diff --git a/src/App.vue b/src/App.vue
index c8b8753..75e49bb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,37 +1,32 @@
 <template>
   <div id="app">
-
     <!-- Header and hamburger navigation -->
     <navigation></navigation>
-
-    <!-- Header with search field -->
-
-    <!-- TODO move this to the navigation component -->
-    <header class="header">
-      <search-input v-model="query"></search-input>
-    </header>
+    <search-input v-model="query"></search-input>
 
     <!-- Movie popup that will show above existing rendered content -->
-    <movie-popup v-if="moviePopupIsVisible" :id="popupID" :type="popupType"></movie-popup>
-
+    <movie-popup
+      v-if="moviePopupIsVisible"
+      :id="popupID"
+      :type="popupType"
+    ></movie-popup>
 
     <darkmode-toggle />
 
     <!-- Display the component assigned to the given route (default: home) -->
     <router-view class="content" :key="$route.fullPath"></router-view>
-
   </div>
 </template>
 
 <script>
-import Vue from 'vue'
-import Navigation from '@/components/Navigation'
-import MoviePopup from '@/components/MoviePopup'
-import SearchInput from '@/components/SearchInput'
-import DarkmodeToggle from '@/components/ui/darkmodeToggle'
+import Vue from "vue";
+import Navigation from "@/components/Navigation";
+import MoviePopup from "@/components/MoviePopup";
+import SearchInput from "@/components/SearchInput";
+import DarkmodeToggle from "@/components/ui/darkmodeToggle";
 
 export default {
-  name: 'app',
+  name: "app",
   components: {
     Navigation,
     MoviePopup,
@@ -40,39 +35,42 @@ export default {
   },
   data() {
     return {
-      query: '',
+      query: "",
       moviePopupIsVisible: false,
       popupID: 0,
-      popupType: 'movie'
-    }
+      popupType: "movie"
+    };
   },
-  created(){
-    let that = this
+  created() {
+    let that = this;
     Vue.prototype.$popup = {
       get isOpen() {
-        return that.moviePopupIsVisible
+        return that.moviePopupIsVisible;
       },
       open: (id, type) => {
-        this.popupID = id || this.popupID
-        this.popupType = type || this.popupType
-        this.moviePopupIsVisible = true
-        console.log('opened')
+        this.popupID = id || this.popupID;
+        this.popupType = type || this.popupType;
+        this.moviePopupIsVisible = true;
+        console.log("opened");
       },
       close: () => {
-        this.moviePopupIsVisible = false
-        console.log('closed')
+        this.moviePopupIsVisible = false;
+        console.log("closed");
       }
-    }
-    console.log('MoviePopup registered at this.$popup and has state: ', this.$popup.isOpen)
+    };
+    console.log(
+      "MoviePopup registered at this.$popup and has state: ",
+      this.$popup.isOpen
+    );
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
 @import "./src/scss/media-queries";
 @import "./src/scss/variables";
 .content {
-    @include tablet-min{
+  @include tablet-min {
     width: calc(100% - 95px);
     margin-top: $header-size;
     margin-left: 95px;
@@ -86,38 +84,42 @@ export default {
 @import "./src/scss/variables";
 @import "./src/scss/media-queries";
 
-*{
+* {
   box-sizing: border-box;
 }
 html {
   height: 100%;
 }
-body{
+body {
   margin: 0;
   padding: 0;
-  font-family: 'Roboto', sans-serif;
+  font-family: "Roboto", sans-serif;
   line-height: 1.6;
   background: $background-color;
   color: $text-color;
-  transition: background-color .5s ease, color .5s ease;
-  &.hidden{
+  transition: background-color 0.5s ease, color 0.5s ease;
+  &.hidden {
     overflow: hidden;
   }
 }
-h1,h2,h3 {
-  transition: color .5s ease;
+h1,
+h2,
+h3 {
+  transition: color 0.5s ease;
 }
 a:any-link {
   color: inherit;
 }
-input, textarea, button{
-  font-family: 'Roboto', sans-serif;
+input,
+textarea,
+button {
+  font-family: "Roboto", sans-serif;
 }
-figure{
+figure {
   padding: 0;
   margin: 0;
 }
-img{
+img {
   display: block;
   // max-width: 100%;
   height: auto;
@@ -127,16 +129,16 @@ img{
   overflow: hidden;
 }
 
-.wrapper{
+.wrapper {
   position: relative;
 }
-.header{
+.header {
   position: fixed;
   z-index: 15;
   display: flex;
   flex-direction: column;
 
-  @include tablet-min{
+  @include tablet-min {
     width: calc(100% - 170px);
     margin-left: 95px;
     border-top: 0;
@@ -146,14 +148,16 @@ img{
 }
 
 // router view transition
-.fade-enter-active, .fade-leave-active {
+.fade-enter-active,
+.fade-leave-active {
   transition-property: opacity;
   transition-duration: 0.25s;
 }
 .fade-enter-active {
   transition-delay: 0.25s;
 }
-.fade-enter, .fade-leave-active {
-  opacity: 0
+.fade-enter,
+.fade-leave-active {
+  opacity: 0;
 }
 </style>
diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
index 47d97f1..2f2e740 100644
--- a/src/components/Navigation.vue
+++ b/src/components/Navigation.vue
@@ -104,7 +104,7 @@ export default {
   bottom: 0;
   left: 0;
   width: 100%;
-  height: 50px;
+  height: var(--header-size);
   z-index: 10;
   display: block;
   color: $text-color;
@@ -117,20 +117,25 @@ export default {
     height: 100vh;
   }
   &__logo {
-    width: 55px;
+    width: 95px;
     height: $header-size;
     display: flex;
     align-items: center;
     justify-content: center;
     background: $background-nav-logo;
-    @include tablet-min {
-      width: 95px;
+
+    @include mobile-only {
+      align-items: flex-start;
+      padding-top: 0.5rem;
+      width: 55px;
     }
+
     &-image {
       width: 35px;
       height: 31px;
       fill: $green;
       transition: transform 0.5s ease;
+
       @include tablet-min {
         width: 45px;
         height: 40px;
@@ -145,7 +150,7 @@ export default {
     position: fixed;
     width: 55px;
     height: 50px;
-    bottom: 0;
+    bottom: 1.5rem;
     right: 0;
     cursor: pointer;
     z-index: 10;
diff --git a/src/components/SearchInput.vue b/src/components/SearchInput.vue
index 001c87e..690fc48 100644
--- a/src/components/SearchInput.vue
+++ b/src/components/SearchInput.vue
@@ -1,28 +1,28 @@
 <template>
-  <div>
-    <div class="search">
-      <input
-        ref="input"
-        type="text"
-        placeholder="Search for movie or show"
-        aria-label="Search input for finding a movie or show"
-        autocorrect="off"
-        autocapitalize="off"
-        tabindex="1"
-        v-model="query"
-        @input="handleInput"
-        @click="focus = true"
-        @keydown.escape="handleEscape"
-        @keyup.enter="handleSubmit"
-        @keydown.up="navigateUp"
-        @keydown.down="navigateDown"
-      />
-
-      <svg class="search-icon" fill="currentColor" @click="handleSubmit">
-        <use xlink:href="#iconSearch"></use>
-      </svg>
-    </div>
+  <!-- <div> -->
+  <div class="search">
+    <input
+      ref="input"
+      type="text"
+      placeholder="Search for movie or show"
+      aria-label="Search input for finding a movie or show"
+      autocorrect="off"
+      autocapitalize="off"
+      tabindex="1"
+      v-model="query"
+      @input="handleInput"
+      @click="focus = true"
+      @keydown.escape="handleEscape"
+      @keyup.enter="handleSubmit"
+      @keydown.up="navigateUp"
+      @keydown.down="navigateDown"
+    />
 
+    <svg class="search-icon" fill="currentColor" @click="handleSubmit">
+      <use xlink:href="#iconSearch"></use>
+    </svg>
+  </div>
+  <!-- 
     <transition name="fade">
       <div class="dropdown" v-if="!disabled && focus && query.length > 0">
         <div class="filter">
@@ -73,7 +73,7 @@
         </seasoned-button>
       </div>
     </transition>
-  </div>
+  </div> -->
 </template>
 
 <script>
@@ -347,7 +347,7 @@ hr {
   display: flex;
   position: fixed;
   flex-wrap: wrap;
-  z-index: 5;
+  z-index: 16;
   border: 0;
   background-color: $background-color-secondary;
 
@@ -364,10 +364,12 @@ hr {
 
   input {
     display: block;
+    height: calc($header-size - 1.5rem);
     width: 100%;
     padding: 13px 0 13px 45px;
     outline: none;
     margin: 0;
+    margin-bottom: auto;
     border: 0;
     background-color: $background-color-secondary;
     font-weight: 300;
@@ -376,6 +378,7 @@ hr {
     transition: background-color 0.5s ease, color 0.5s ease;
 
     @include tablet-min {
+      height: calc($header-size);
       padding: 13px 30px 13px 60px;
     }
   }
diff --git a/src/components/ui/darkmodeToggle.vue b/src/components/ui/darkmodeToggle.vue
index 3012037..a3f3247 100644
--- a/src/components/ui/darkmodeToggle.vue
+++ b/src/components/ui/darkmodeToggle.vue
@@ -46,7 +46,7 @@ export default {
   z-index: 10;
 
   @include mobile-only {
-    margin-bottom: 3.5rem;
+    margin-bottom: 5rem;
   }
 
   -webkit-user-select: none;
diff --git a/src/scss/main.scss b/src/scss/main.scss
index 249019c..94d3069 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -1,11 +1,10 @@
-
 .noselect {
   -webkit-touch-callout: none; /* iOS Safari */
-  -webkit-user-select: none;   /* Safari */
-  -khtml-user-select: none;    /* Konqueror HTML */
-  -moz-user-select: none;      /* Firefox */
-  -ms-user-select: none;       /* Internet Explorer/Edge */
-  user-select: none;           /* Non-prefixed version, currently */
+  -webkit-user-select: none; /* Safari */
+  -khtml-user-select: none; /* Konqueror HTML */
+  -moz-user-select: none; /* Firefox */
+  -ms-user-select: none; /* Internet Explorer/Edge */
+  user-select: none; /* Non-prefixed version, currently */
 }
 
 .end-section {
@@ -47,4 +46,4 @@
   &-absolute {
     position: absolute;
   }
-}
\ No newline at end of file
+}
diff --git a/src/scss/variables.scss b/src/scss/variables.scss
index 5465fc2..b1f6b34 100644
--- a/src/scss/variables.scss
+++ b/src/scss/variables.scss
@@ -18,12 +18,12 @@
 
   --background-nav-logo: #081c24;
   --color-green: #01d277;
-  --color-green-90: rgba(1, 210, 119, .9);
-  --color-green-70: rgba(1, 210, 119, .73);
+  --color-green-90: rgba(1, 210, 119, 0.9);
+  --color-green-70: rgba(1, 210, 119, 0.73);
   --color-teal: #091c24;
   --color-black: #081c24;
   --white: #fff;
-  --white-70: rgba(255,255,255,0.7);
+  --white-70: rgba(255, 255, 255, 0.7);
 
   --color-warning: rgba(241, 188, 53, 0.7);
   --color-warning-highlight: #f1bc35;
@@ -31,7 +31,7 @@
   --color-success-text: #fff;
   --color-success-highlight: rgb(0, 100, 66);
   --color-error: rgba(220, 48, 35, 0.8);
-  --color-error-highlight: #DC3023;
+  --color-error-highlight: #dc3023;
 
   --header-size: 75px;
 }
@@ -55,7 +55,7 @@
 
 @include mobile-only {
   :root {
-    --header-size: 50px;
+    --header-size: calc(50px + 1.5rem);
   }
 }
 
@@ -67,9 +67,9 @@ $green-90: var(--color-green-90);
 $green-70: var(--color-green-70);
 $teal: #091c24;
 $black: #081c24;
-$black-80: rgba(0,0,0,0.8);
+$black-80: rgba(0, 0, 0, 0.8);
 $white: #fff;
-$white-80: rgba(255,255,255,0.8);
+$white-80: rgba(255, 255, 255, 0.8);
 
 $text-color: var(--text-color) !default;
 $text-color-70: var(--text-color-70) !default;