diff --git a/package-lock.json b/package-lock.json
index e217e26..c00326d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2284,6 +2284,43 @@
       "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==",
       "dev": true
     },
+    "axios": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.0.tgz",
+      "integrity": "sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==",
+      "requires": {
+        "follow-redirects": "1.5.10",
+        "is-buffer": "^2.0.2"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "follow-redirects": {
+          "version": "1.5.10",
+          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
+          "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
+          "requires": {
+            "debug": "=3.1.0"
+          }
+        },
+        "is-buffer": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.4.tgz",
+          "integrity": "sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A=="
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        }
+      }
+    },
     "babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -14786,6 +14823,11 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.10.tgz",
       "integrity": "sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ=="
     },
+    "vue-axios": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/vue-axios/-/vue-axios-2.1.5.tgz",
+      "integrity": "sha512-th5xVbInVoyIoe+qY+9GCflEVezxAvztD4xpFF39SRQYqpoKD2qkmX8yv08jJG9a2SgNOCjirjJGSwg/wTrbmA=="
+    },
     "vue-eslint-parser": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz",
diff --git a/package.json b/package.json
index 99b9ec8..b0d8bbb 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
+    "axios": "^0.19.0",
     "core-js": "^2.6.5",
     "prerender-spa-plugin": "^3.4.0",
     "register-service-worker": "^1.6.2",
@@ -17,6 +18,7 @@
     "stylelint-prettier": "^1.1.1",
     "stylelint-scss": "^3.11.1",
     "vue": "^2.6.10",
+    "vue-axios": "^2.1.5",
     "vue-meta": "^2.3.0",
     "vue-router": "^3.0.3",
     "vuex": "^3.0.1"
@@ -37,6 +39,7 @@
     "eslint-loader": "^3.0.2",
     "eslint-plugin-prettier": "^3.1.1",
     "eslint-plugin-vue": "^5.0.0",
+    "html-webpack-plugin": "^3.2.0",
     "node-sass": "^4.9.0",
     "prettier": "^1.18.2",
     "sass-loader": "^7.1.0",
diff --git a/src/App.vue b/src/App.vue
index 7b901f5..39dff70 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -17,6 +17,12 @@ export default {
   computed: {
     ...mapState(['windowHeight']),
   },
+  mounted() {
+    const path = this.$route.fullPath;
+    if (path !== '/') {
+      this.$router.push('/');
+    }
+  },
 };
 </script>
 
@@ -34,7 +40,7 @@ export default {
   font-family: 'Roboto', 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  min-height: 400px;
+  min-height: 500px;
   position: relative;
   text-align: center;
   width: 100%;
diff --git a/src/components/Form.vue b/src/components/Form.vue
index cfcd0a6..9f098d7 100644
--- a/src/components/Form.vue
+++ b/src/components/Form.vue
@@ -1,18 +1,23 @@
 <template>
   <form @submit.prevent="action">
+    <p v-if="this.$store.state.alert" class="alert">{{ $store.state.alert }}</p>
     <input
-      v-if="!submitted"
       ref="email"
+      :class="{ comeOut: submitted }"
       class="email"
       type="email"
       name="email"
       placeholder="Enter your email"
       required="true"
+      :disabled="submitted"
       @focus="isFocused = true"
-      @blur="isFocused = false"
+      @keyup="updateEmail"
+      @blur="updateEmail"
     />
     <Success :submitted="submitted" />
-    <button v-if="!submitted" type="submit" class="notify">Notify Me!</button>
+    <button :class="{ comeOut: submitted }" :disabled="submitted" type="submit" class="notify">
+      {{ loading ? 'Verifying...' : 'Notify Me!' }}
+    </button>
   </form>
 </template>
 
@@ -32,6 +37,19 @@ export default {
       type: Function,
       default: () => 1,
     },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    email: {
+      type: String,
+      default: '',
+    },
+  },
+  methods: {
+    updateEmail(e) {
+      this.$store.state.email = e.target.value;
+    },
   },
 };
 </script>
@@ -39,14 +57,26 @@ export default {
 <style lang="scss" scoped>
 @import '@/styles/main.scss';
 
+.alert {
+  background: rgb(255, 162, 162);
+  border-radius: 5px;
+  color: rgb(117, 15, 15);
+  font-weight: 500;
+  margin-bottom: 10px;
+  padding: 5px;
+  text-align: left;
+  width: 100%;
+}
+
 form {
   align-items: center;
   display: flex;
   flex-flow: column;
+  margin-bottom: 20px;
   margin-top: 30px;
   max-width: 500px;
+  position: relative;
   width: 100%;
-
   @include breakpoint(375) {
     margin-top: 35px;
   }
@@ -94,11 +124,46 @@ form {
   max-width: 500px;
   outline: none;
   padding: 10px;
+  transition: background-color 0.2s, transform 0.2s;
   width: 100%;
   @include breakpoint(375) {
     font-size: 20px;
     padding: 12px;
   }
+  @include breakpoint($desktop) {
+    &:hover {
+      background: rgb(6, 126, 6);
+    }
+
+    &:active {
+      transform: scale(0.95);
+    }
+  }
+}
+
+.comeOut {
+  animation-duration: 0.3s;
+  animation-fill-mode: forwards;
+  animation-name: come-out;
+  animation-timing-function: ease-in-out;
+}
+
+@keyframes come-out {
+  0% {
+    opacity: 0.7;
+    transform: translateX(-10px);
+  }
+
+  50% {
+    opacity: 0;
+    transform: translateX(-100px);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateX(-200px);
+    visibility: hidden;
+  }
 }
 
 ::placeholder {
diff --git a/src/components/LogoAnimated.vue b/src/components/LogoAnimated.vue
index d934b10..63a65b1 100644
--- a/src/components/LogoAnimated.vue
+++ b/src/components/LogoAnimated.vue
@@ -26,6 +26,8 @@ export default {
     const rightEye = '.logo-animated__eye--right';
     this.mouseTracker(leftEye);
     this.mouseTracker(rightEye);
+    this.touchTracker(leftEye);
+    this.touchTracker(rightEye);
     document.querySelectorAll(logo)[0].style.height = this.height;
     document.querySelectorAll(leftEye)[0].style.height = `calc(${this.height}/ 3.63)`;
     document.querySelectorAll(rightEye)[0].style.height = `calc(${this.height}/ 3.63)`;
@@ -42,6 +44,20 @@ export default {
         eye.style.transform = `rotate(${rotationDegrees}deg)`;
       });
     },
+    touchTracker(className) {
+      let app = document.querySelector('#app');
+      app.addEventListener('touchmove', e => {
+        let eye = document.querySelector(className);
+        let mouseX = eye.getBoundingClientRect().left;
+        let mouseY = eye.getBoundingClientRect().top;
+        let radianDegrees = Math.atan2(
+          e.touches[0].clientX - mouseX,
+          e.touches[0].clientY - mouseY,
+        );
+        let rotationDegrees = radianDegrees * (180 / Math.PI) * -1 + 90;
+        eye.style.transform = `rotate(${rotationDegrees}deg)`;
+      });
+    },
   },
 };
 </script>
@@ -55,6 +71,7 @@ export default {
 
   &__logo {
     height: 100%;
+    width: 100%;
   }
 
   &__eye {
diff --git a/src/components/PurpleNachos.vue b/src/components/PurpleNachos.vue
index b81e508..e3e0a71 100644
--- a/src/components/PurpleNachos.vue
+++ b/src/components/PurpleNachos.vue
@@ -34,6 +34,8 @@ export default {
     }
   }
 
+  $moveUp: -10px;
+
   img {
     margin-left: -25px;
     margin-right: -35px;
@@ -48,8 +50,7 @@ export default {
     width: 120px;
 
     &:hover {
-      margin-top: -30px;
-      transform: scale(1.2);
+      transform: scale(1.2) translateY($moveUp);
     }
 
     &:active {
@@ -60,7 +61,7 @@ export default {
       transform: rotate(30deg);
 
       &:hover {
-        transform: scale(1.2) rotate(30deg);
+        transform: scale(1.2) rotate(30deg) translateY($moveUp);
       }
 
       &:active {
@@ -72,7 +73,7 @@ export default {
       transform: rotate(10deg);
 
       &:hover {
-        transform: scale(1.2) rotate(10deg);
+        transform: scale(1.2) rotate(10deg) translateY($moveUp);
       }
 
       &:active {
diff --git a/src/components/Success.vue b/src/components/Success.vue
index ed77135..9c5860b 100644
--- a/src/components/Success.vue
+++ b/src/components/Success.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="submitted" class="success">
+  <div class="success" :class="{ comeIn: submitted }">
     <h3>Congrats - Email Added</h3>
     <p>You'll be notified once we go live!</p>
   </div>
@@ -26,7 +26,11 @@ export default {
   flex-flow: column;
   height: 130px;
   max-width: 500px;
+  opacity: 0;
   padding: 10px;
+  position: absolute;
+  transform: translateX(-200px);
+  visibility: hidden;
   width: 100%;
   @include flex(center, center);
 
@@ -41,4 +45,30 @@ export default {
     font-size: 22px;
   }
 }
+
+.comeIn {
+  animation-delay: 0.1s;
+  animation-duration: 0.5s;
+  animation-fill-mode: forwards;
+  animation-name: come-in;
+  animation-timing-function: ease-in-out;
+}
+
+@keyframes come-in {
+  0% {
+    opacity: 0;
+    transform: translateX(200px);
+  }
+
+  50% {
+    opacity: 0.7;
+    transform: translateX(0px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateX(0px);
+    visibility: visible;
+  }
+}
 </style>
diff --git a/src/components/Twitter.vue b/src/components/Twitter.vue
index a435bf6..cce1514 100644
--- a/src/components/Twitter.vue
+++ b/src/components/Twitter.vue
@@ -43,7 +43,7 @@ export default {
   .twitter-link {
     color: white;
     text-decoration: none;
-    transition: transform 0.2s;
+    transition-duration: 0.2s;
     @include flex(center, center);
 
     &:hover {
diff --git a/src/main.js b/src/main.js
index e03c751..038f90f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,11 +1,13 @@
 import Vue from 'vue';
+import axios from 'axios';
+import VueAxios from 'vue-axios';
 import App from './App.vue';
 import router from './router';
 import store from './store';
 import './registerServiceWorker';
 
 Vue.config.productionTip = false;
-
+Vue.use(VueAxios, axios);
 new Vue({
   router,
   store,
diff --git a/src/store.js b/src/store.js
index 21aaaf8..828ab89 100644
--- a/src/store.js
+++ b/src/store.js
@@ -6,6 +6,9 @@ Vue.use(Vuex);
 export default new Vuex.Store({
   state: {
     windowHeight: '',
+    api: 'https://testing.nachonight.tv/',
+    alert: '',
+    email: '',
   },
   mutations: {},
   actions: {},
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 5589449..1687894 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,3 +1,3 @@
 $purple: #5a4d9f;
-$green: #16a736;
+$green: rgb(5, 145, 5);
 $desktop: 1000;
\ No newline at end of file
diff --git a/src/views/ComingSoon.vue b/src/views/ComingSoon.vue
index ffbee33..e5ebacb 100644
--- a/src/views/ComingSoon.vue
+++ b/src/views/ComingSoon.vue
@@ -1,10 +1,13 @@
 <template>
   <div class="coming-soon" :class="{ inputMode: isFocused }">
-    <LogoAnimated height="200px" />
+    <div class="coming-soon__logo-container">
+      <LogoAnimated height="100%" />
+    </div>
+
     <h1>Coming Soon</h1>
-    <p class="coming-soon__desc">Share your screen, window and tabs with your friends</p>
+    <p class="coming-soon__desc">Share your screen, window and tabs with your friends.</p>
 
-    <Form :action="submitEmail" :submitted="submitted" />
+    <Form :action="submitEmail" :submitted="submitted" :loading="loading" :email="email" />
 
     <Twitter :submitted="submitted" />
 
@@ -17,7 +20,7 @@
 import PurpleNachos from '@/components/PurpleNachos';
 import Twitter from '@/components/Twitter';
 import Form from '@/components/Form';
-import LogoAnimated '@/components/LogoAnimated.vue';
+import LogoAnimated from '@/components/LogoAnimated.vue';
 
 export default {
   name: 'ComingSoon',
@@ -81,6 +84,8 @@ export default {
     isFocused: '',
     submitted: false,
     nachosAmount: 8,
+    loading: false,
+    email: '',
     meta: {
       title: 'Coming Soon',
       description: {
@@ -100,34 +105,55 @@ export default {
     },
   }),
   mounted() {
-    const minHeight = 600;
-    if (window.innerHeight < minHeight && window.matchMedia('(orientation: landscape)').matches) {
-      this.$store.state.windowHeight = minHeight;
-    } else {
-      this.$store.state.windowHeight = window.innerHeight;
-    }
-    window.addEventListener('resize', () => {
-      if (this.$refs.email !== document.activeElement) {
-        if (
-          window.innerHeight < minHeight &&
-          window.matchMedia('(orientation: landscape)').matches
-        ) {
-          this.$store.state.windowHeight = minHeight;
-        } else {
-          this.$store.state.windowHeight = window.innerHeight;
-        }
-      }
-      // Purple Nacho Logic
+    const adjustNachos = () => {
       if (window.innerWidth < 1150) {
         this.nachosAmount = 19;
       } else {
         this.nachosAmount = 8;
       }
+    };
+    adjustNachos();
+    const minHeight = 600;
+    const adjustHeight = () => {
+      if (window.innerHeight < minHeight && window.matchMedia('(orientation: landscape)').matches) {
+        this.$store.state.windowHeight = minHeight;
+      } else {
+        this.$store.state.windowHeight = window.innerHeight;
+      }
+    };
+    adjustHeight();
+    window.addEventListener('resize', () => {
+      if (this.$refs.email !== document.activeElement) {
+        adjustHeight();
+      }
+      // Purple Nacho Logic
+      adjustNachos();
     });
   },
   methods: {
     submitEmail() {
-      this.submitted = true;
+      this.loading = true;
+      this.axios
+        .post(`${this.$store.state.api}add-address`, {
+          email: this.$store.state.email,
+        })
+        .then(() => {
+          this.$store.state.alert = '';
+          this.submitted = true;
+          this.loading = false;
+        })
+        .catch(error => {
+          window.navigator.vibrate(200);
+          const errorStatus = error.response.status;
+          this.loading = false;
+          if (errorStatus === 403) {
+            this.$store.state.alert =
+              'Your email is already setup to be notified! Thanks for the commitment though.';
+          } else {
+            this.$store.state.alert =
+              'Oop, hold the cheese, something went wrong. Try again later.';
+          }
+        });
     },
   },
 };
@@ -152,7 +178,7 @@ $desktop: 1000;
   width: 100%;
   @include flex(flex-start, center);
 
-  &__logo {
+  &__logo-container {
     backface-visibility: hidden;
     filter: grayscale(0%); // fixes flickering in firefox
     margin-top: 10px;
diff --git a/vue.config.js b/vue.config.js
index 2ba4422..e1542e8 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,9 +1,17 @@
 const path = require('path');
 const PrerenderSPAPlugin = require('prerender-spa-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = {
   configureWebpack: {
     plugins: [
+      new HtmlWebpackPlugin({
+        template: 'public/index.html',
+        // any other options you'd normally set are still supported:
+        compile: false,
+        inject: true,
+      }),
+
       new PrerenderSPAPlugin({
         staticDir: path.join(__dirname, 'dist'),
         // Required - Routes to render. (EXAMPLE: routes: ['/', '/about', '/some/deep/nested/route']),