diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index d46b2d9d..d41bc300 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -28,6 +28,9 @@
 			<dropdown-item @click.native="reportIssue">
 				Report a bug 🐛
 			</dropdown-item>
+			<dropdown-item @click.native="shareFeedback">
+				Share feedback 🗣
+			</dropdown-item>
 			<dropdown-divider />
 			<div class="help__widget-version">
 				{{ appVersion }}
@@ -53,6 +56,7 @@ import newRemote from "./modal/newRemote";
 import initializeGitRepository from "./modal/initializeGitRepository";
 import cloneRepository from "./modal/cloneRepository";
 import switchRepository from "./modal/switchRepository";
+import feedback from "./modal/feedback";
 
 // help widget
 import packageJson from "../../package.json";
@@ -78,6 +82,7 @@ export default {
 		initializeGitRepository,
 		cloneRepository,
 		switchRepository,
+		feedback,
 		DropdownList,
 		DropdownItem,
 		DropdownDivider
@@ -149,6 +154,10 @@ export default {
 			);
 			this.toggleHelpWidget();
 		},
+		shareFeedback() {
+			this.$store.commit("modal/toggleFeedbackModal", true);
+			this.toggleHelpWidget();
+		},
 		toggleHelpWidget() {
 			this.helpWidget = !this.helpWidget;
 		}
diff --git a/src/renderer/components/icon/frown.vue b/src/renderer/components/icon/frown.vue
new file mode 100644
index 00000000..ca4898ee
--- /dev/null
+++ b/src/renderer/components/icon/frown.vue
@@ -0,0 +1,3 @@
+<template>
+	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M16 16s-1.5-2-4-2-4 2-4 2"></path><line x1="9" y1="9" x2="9.01" y2="9"></line><line x1="15" y1="9" x2="15.01" y2="9"></line></svg>
+</template>
diff --git a/src/renderer/components/icon/smile.vue b/src/renderer/components/icon/smile.vue
new file mode 100644
index 00000000..9a300c9a
--- /dev/null
+++ b/src/renderer/components/icon/smile.vue
@@ -0,0 +1,3 @@
+<template>
+	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M8 14s1.5 2 4 2 4-2 4-2"></path><line x1="9" y1="9" x2="9.01" y2="9"></line><line x1="15" y1="9" x2="15.01" y2="9"></line></svg>
+</template>
diff --git a/src/renderer/components/input/textarea.vue b/src/renderer/components/input/textarea.vue
new file mode 100644
index 00000000..bc9a4947
--- /dev/null
+++ b/src/renderer/components/input/textarea.vue
@@ -0,0 +1,111 @@
+<template>
+	<textarea
+		:name="name"
+		class="textarea"
+		:class="{
+			'textarea-disable': disabled,
+			'textarea-invalid': isInvalid
+		}"
+		:placeholder="placeholder"
+		:disabled="disabled"
+		:style="{
+			...spacingProps,
+			...borderProps,
+			...fontProps,
+			resize
+		}"
+		:rows="rows"
+		:cols="cols"
+		@input="$emit('input', $event.target.value)"
+	></textarea>
+</template>
+
+<script>
+import spacingProps from "../../mixins/spacingProps";
+import borderProps from "../../mixins/borderProps";
+import fontProps from "../../mixins/fontProps";
+
+export default {
+	name: "TextArea",
+	mixins: [spacingProps, borderProps, fontProps],
+	props: {
+		name: {
+			type: String,
+			default: "inputField",
+			required: true
+		},
+		placeholder: {
+			type: String,
+			default: "Enter the value",
+			required: true
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		isInvalid: {
+			type: Boolean,
+			default: false
+		},
+		cols: {
+			type: Number,
+			default: 5
+		},
+		rows: {
+			type: Number,
+			default: 5
+		},
+		borderRadius: {
+			type: String,
+			default: ".3"
+		},
+		fontSize: {
+			type: Number,
+			default: 0.833
+		},
+		paddingTop: {
+			type: String,
+			default: ".5rem"
+		},
+		paddingBottom: {
+			type: String,
+			default: ".5rem"
+		},
+		paddingLeft: {
+			type: String,
+			default: ".8rem"
+		},
+		paddingRight: {
+			type: String,
+			default: ".8rem"
+		},
+		width: {
+			type: String,
+			default: "100%"
+		},
+		resize: {
+			type: String,
+			default: "both"
+		}
+	}
+};
+</script>
+
+<style lang="sass">
+.textarea
+	outline: none
+	border-color: #eeeeee
+
+	&-disable
+		background-color: #eeeeee
+		color: #222831
+		cursor: not-allowed
+		user-select: none
+
+	&-invalid
+		border-color: #f04747
+
+	&:focus
+		box-shadow: rgba(#00adb5, .2) 0 0 0 3px
+		border-color: #00adb5
+</style>
diff --git a/src/renderer/components/input/textareaLabel.vue b/src/renderer/components/input/textareaLabel.vue
new file mode 100644
index 00000000..46ef6650
--- /dev/null
+++ b/src/renderer/components/input/textareaLabel.vue
@@ -0,0 +1,82 @@
+<template>
+	<div :style="{ ...spacingProps }">
+		<p class="textarea__label" :for="labelName">
+			{{ label }}
+		</p>
+		<text-area
+			name="Feedback message"
+			placeholder="Enter your message"
+			label="Message"
+			:cols="cols"
+			:value="value"
+			:disabled="disabled"
+			:is-invalid="isInvalid"
+			:resize="resize"
+			@input="$emit('input', $event)"
+		/>
+	</div>
+</template>
+
+<script>
+import spacingProps from "../../mixins/spacingProps";
+import TextArea from "./textarea";
+
+export default {
+	name: "TextAreaLabel",
+	components: {
+		TextArea
+	},
+	mixins: [spacingProps],
+	props: {
+		name: {
+			type: String,
+			default: "inputField",
+			required: true
+		},
+		placeholder: {
+			type: String,
+			default: "Enter the value",
+			required: true
+		},
+		value: {
+			type: String,
+			default: ""
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		isInvalid: {
+			type: Boolean,
+			default: false
+		},
+		cols: {
+			type: Number,
+			default: 5
+		},
+		rows: {
+			type: Number,
+			default: 5
+		},
+		label: {
+			type: String,
+			required: true
+		},
+		resize: {
+			type: String,
+			default: "both"
+		}
+	},
+	computed: {
+		labelName() {
+			return this.label.toLowerCase().replace(" ", "_");
+		}
+	}
+};
+</script>
+
+<style lang="sass">
+.textarea__label
+	font-size: 12px
+	margin-bottom: .2rem
+</style>
diff --git a/src/renderer/modal/feedback.vue b/src/renderer/modal/feedback.vue
new file mode 100644
index 00000000..38b45f32
--- /dev/null
+++ b/src/renderer/modal/feedback.vue
@@ -0,0 +1,173 @@
+<template>
+	<t-card width="small">
+		<t-card-header>
+			<t-card-header-heading heading="Share feedback" />
+			<t-card-header-close modal-name="Feedback" />
+		</t-card-header>
+		<t-card-body>
+			<div v-show="feedbackForm.toggle" style="width: 100%;">
+				<div>
+					<h6>How was your experience?</h6>
+					<div class="feedback__icons-container">
+						<div
+							class="feedback__icons"
+							:class="{
+								'feedback__icons-focus': selectEmoji === 'smile'
+							}"
+							@click="selectEmoji = 'smile'"
+						>
+							<SmileIcon />
+						</div>
+						<div
+							class="feedback__icons"
+							:class="{
+								'feedback__icons-focus': selectEmoji === 'frown'
+							}"
+							@click="selectEmoji = 'frown'"
+						>
+							<FrownIcon />
+						</div>
+					</div>
+				</div>
+				<text-area-label
+					v-model.trim="feedbackForm.message"
+					:rows="8"
+					name="feedback message"
+					placeholder="Enter your message"
+					label="Tell us why?"
+					resize="vertical"
+				/>
+				<div style="font-size: 0.625rem; color: #c5c5c5;">
+					{{ wordCount }} characters left
+				</div>
+			</div>
+			<div v-show="!feedbackForm.toggle" class="model__body-thankyou">
+				Thank you for sharing the feedback :)
+			</div>
+		</t-card-body>
+		<t-card-footer>
+			<t-button
+				v-if="feedbackForm.toggle"
+				margin-left=".5rem"
+				appearance="primary"
+				:disabled="!disableTweet"
+				@click.native="submitFeedback"
+			>
+				Tweet
+			</t-button>
+			<t-button
+				v-if="!feedbackForm.toggle"
+				margin-left=".5rem"
+				appearance="primary"
+				@click.native="submitFeedback"
+			>
+				Close
+			</t-button>
+		</t-card-footer>
+	</t-card>
+</template>
+
+<script>
+// components
+import TCard from "../components/TCard/TCard";
+import TCardHeader from "../components/TCard/TCardHeader";
+import TCardHeaderHeading from "../components/TCard/TCardHeaderHeading";
+import TCardHeaderClose from "../components/TCard/TCardHeaderClose";
+import TCardBody from "../components/TCard/TCardBody";
+import TCardFooter from "../components/TCard/TCardFooter";
+import TextAreaLabel from "../components/input/textareaLabel";
+import TButton from "../components/TButton/TButton";
+
+// icons
+import SmileIcon from "../components/icon/smile";
+import FrownIcon from "../components/icon/frown";
+
+// pachakes
+const { shell } = require("electron");
+
+export default {
+	name: "FeedbackForm",
+	components: {
+		TCard,
+		TCardHeader,
+		TCardHeaderHeading,
+		TCardHeaderClose,
+		TCardBody,
+		TCardFooter,
+		TextAreaLabel,
+		TButton,
+		SmileIcon,
+		FrownIcon
+	},
+	data() {
+		return {
+			selectEmoji: "",
+			feedbackForm: {
+				message: "",
+				toggle: true
+			}
+		};
+	},
+	computed: {
+		selectedEmoji() {
+			if (this.selectEmoji === "smile") {
+				return " (😃)";
+			} else if (this.selectEmoji === "frown") {
+				return " (🙁)";
+			} else {
+				return "";
+			}
+		},
+		wordCount() {
+			return 280 - this.feedbackForm.message.length - 16;
+		},
+		disableTweet() {
+			return !!this.feedbackForm.message && !!this.selectEmoji;
+		}
+	},
+	methods: {
+		submitFeedback(event) {
+			if (this.disableTweet) {
+				let tweetUrl = new URL("https://twitter.com/intent/tweet");
+				tweetUrl.searchParams.append(
+					"text",
+					this.feedbackForm.message.slice(0, 264) +
+						" via @gitthermal" +
+						this.selectedEmoji
+				);
+				shell.openExternal(tweetUrl.href);
+				this.feedbackForm.toggle = !this.feedbackForm.toggle;
+				setTimeout(() => {
+					this.closeModel();
+				}, 2500);
+			} else {
+				event.preventDefault();
+			}
+		}
+	}
+};
+</script>
+
+<style lang="sass">
+.feedback__icons-container
+	display: flex
+	margin-bottom: 1.5rem
+
+.feedback__icons
+	display: flex
+	padding: 0.15rem
+	cursor: pointer
+	border: 1px solid #eeeeee
+	border-radius: 0.3rem
+
+	svg
+		width: 1.875rem
+		height: 1.875rem
+		stroke: #222831
+
+	&:first-child
+		margin-right: 0.5rem
+
+.feedback__icons-focus
+	border-color: #00adb5
+</style>
diff --git a/src/renderer/store/modules/modal.js b/src/renderer/store/modules/modal.js
index 30b5680b..ecc9da15 100644
--- a/src/renderer/store/modules/modal.js
+++ b/src/renderer/store/modules/modal.js
@@ -6,7 +6,8 @@ const state = {
 	exportCommitData: false,
 	newRemote: false,
 	cloneRepository: false,
-	initializeGitRepository: false
+	initializeGitRepository: false,
+	feedback: false
 };
 
 const getters = {};
@@ -35,6 +36,9 @@ const mutations = {
 	},
 	toggleInitializeGitRepositoryModal(state, status) {
 		state.initializeGitRepository = status;
+	},
+	toggleFeedbackModal(state, status) {
+		state.feedback = status;
 	}
 };