diff --git a/src/renderer/App.js b/src/renderer/App.js
index 4930836f..f7d45d8f 100644
--- a/src/renderer/App.js
+++ b/src/renderer/App.js
@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import TopNav from './components/top-nav/top-nav.vue'
 import SideNav from './components/side-nav/side-nav.vue'
+import FtToast from './components/ft-toast/ft-toast.vue'
 import $ from 'jquery'
 
 let useElectron
@@ -18,7 +19,8 @@ export default Vue.extend({
   name: 'App',
   components: {
     TopNav,
-    SideNav
+    SideNav,
+    FtToast,
   },
   computed: {
     isOpen: function () {
diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index 187e4b0d..2393a4c2 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -14,6 +14,7 @@
       />
       <!-- </keep-alive> -->
     </Transition>
+    <ft-toast ref="toast" message="hello world" :action="toastAction" />
   </div>
 </template>
 
diff --git a/src/renderer/components/ft-toast/ft-toast.css b/src/renderer/components/ft-toast/ft-toast.css
new file mode 100644
index 00000000..4098ac3c
--- /dev/null
+++ b/src/renderer/components/ft-toast/ft-toast.css
@@ -0,0 +1,31 @@
+.toast {
+  display: flex;
+  height: 60px;
+  width: 200px;
+  overflow-y: auto;
+  position: fixed;
+  left: calc(50vw - 100px);
+  bottom: 100px;
+  text-align: center;
+  z-index: 100;
+  background-color: var(--card-bg-color);
+  opacity: 0;
+  border-radius: 20px;
+  cursor: pointer;
+}
+
+.message {
+  margin: auto;
+}
+
+.open {
+  visibility: visible;
+  opacity: 1;
+  transition: visibility 0s linear 0s, opacity 300ms;
+}
+
+.closed {
+  visibility: hidden;
+  opacity: 0;
+  transition: visibility 0s linear 300ms, opacity 300ms;
+}
diff --git a/src/renderer/components/ft-toast/ft-toast.js b/src/renderer/components/ft-toast/ft-toast.js
new file mode 100644
index 00000000..b835370a
--- /dev/null
+++ b/src/renderer/components/ft-toast/ft-toast.js
@@ -0,0 +1,33 @@
+import Vue from 'vue'
+
+export default Vue.extend({
+  name: 'FtToast',
+  props: {
+    message: {
+      type: String,
+      required: true,
+    },
+    action: {
+      type: Function,
+      default: function () {},
+    },
+  },
+  data: function () {
+    return {
+      isOpen: false,
+    }
+  },
+  methods: {
+    performAction: function () {
+      this.action()
+      this.close()
+    },
+    close: function () {
+      this.isOpen = false
+    },
+    open: function () {
+      this.isOpen = true
+      setTimeout(this.close, 2000)
+    },
+  },
+})
diff --git a/src/renderer/components/ft-toast/ft-toast.vue b/src/renderer/components/ft-toast/ft-toast.vue
new file mode 100644
index 00000000..23f95ecb
--- /dev/null
+++ b/src/renderer/components/ft-toast/ft-toast.vue
@@ -0,0 +1,12 @@
+<template>
+  <div
+    ref="toast"
+    class="toast"
+    :class="{ closed: !isOpen, open: isOpen }"
+    @click="performAction()"
+  >
+  <p class="message"> {{ message }} </p></div>
+</template>
+
+<script src="./ft-toast.js" />
+<style scoped src="./ft-toast.css" />
\ No newline at end of file