diff --git a/src/App.vue b/src/App.vue
index c8b8753..b3ee099 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,123 +1,151 @@
+<style lang="scss" scoped>
+@import "./src/scss/media-queries";
+#app {
+  display: grid;
+  // grid-template-columns: 90px 1fr 90px;
+  grid-template-rows: var(--header-size);
+  grid-template-columns: var(--header-size) 1fr;
+}
+
+.header {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  grid-column: 1 / 3;
+  grid-row: 1;
+  z-index: 15;
+}
+
+.content {
+  grid-column: 2 / 3;
+  grid-row: 2;
+  z-index: 5;
+
+  @include mobile {
+    grid-column: 1 / 3;
+  }
+}
+
+.desktop-menu {
+  grid-column: 1 / 2;
+  grid-row: 2;
+  width: var(--header-size);
+  position: fixed;
+  top: var(--header-size);
+  left: 0;
+}
+</style>
+
 <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>
-
-    <!-- Movie popup that will show above existing rendered content -->
-    <movie-popup v-if="moviePopupIsVisible" :id="popupID" :type="popupType"></movie-popup>
-
-
-    <darkmode-toggle />
+    <NavigationHeader class="header"></NavigationHeader>
+    <NavigationIcons class="desktop-menu desktop-only" />
 
     <!-- Display the component assigned to the given route (default: home) -->
     <router-view class="content" :key="$route.fullPath"></router-view>
 
+    <!-- Movie popup that will show above existing rendered content -->
+    <movie-popup
+      v-if="moviePopupIsVisible"
+      :id="popupID"
+      :type="popupType"
+    ></movie-popup>
+
+    <darkmode-toggle />
   </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 NavigationHeader from "@/components/NavigationHeader";
+import NavigationIcons from "@/components/NavigationIcons";
+import MoviePopup from "@/components/MoviePopup";
+import DarkmodeToggle from "@/components/ui/darkmodeToggle";
 
 export default {
-  name: 'app',
+  name: "app",
   components: {
-    Navigation,
+    NavigationHeader,
+    NavigationIcons,
     MoviePopup,
-    SearchInput,
     DarkmodeToggle
   },
   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)
-  }
-}
-</script>
+    };
 
-<style lang="scss" scoped>
-@import "./src/scss/media-queries";
-@import "./src/scss/variables";
-.content {
-    @include tablet-min{
-    width: calc(100% - 95px);
-    margin-top: $header-size;
-    margin-left: 95px;
-    position: relative;
+    const movieId = new URLSearchParams(window.location.search).get("movie");
+    if (movieId) {
+      this.$popup.open(movieId, "movie");
+    }
   }
-}
-</style>
+};
+</script>
 
 <style lang="scss">
 // @import "./src/scss/main";
 @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;
+
+  * {
+    transition: background-color 0.5s ease, color 0.5s ease;
+  }
+
+  &.hidden {
     overflow: hidden;
   }
 }
-h1,h2,h3 {
-  transition: color .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,33 +155,35 @@ img{
   overflow: hidden;
 }
 
-.wrapper{
+.wrapper {
   position: relative;
 }
-.header{
-  position: fixed;
-  z-index: 15;
-  display: flex;
-  flex-direction: column;
+// .header {
+//   position: fixed;
+//   z-index: 15;
+//   display: flex;
+//   flex-direction: column;
 
-  @include tablet-min{
-    width: calc(100% - 170px);
-    margin-left: 95px;
-    border-top: 0;
-    border-bottom: 0;
-    top: 0;
-  }
-}
+//   @include tablet-min {
+//     width: calc(100% - 170px);
+//     margin-left: 95px;
+//     border-top: 0;
+//     border-bottom: 0;
+//     top: 0;
+//   }
+// }
 
 // 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
deleted file mode 100644
index 88adb47..0000000
--- a/src/components/Navigation.vue
+++ /dev/null
@@ -1,314 +0,0 @@
-<template>
-  <div>
-    <nav class="nav">
-      <router-link class="nav__logo" :to="{name: 'home'}" exact title="Vue.js — TMDb App">
-        <svg class="nav__logo-image">
-          <use xlink:href="#svgLogo"></use>
-        </svg>
-      </router-link>
-
-      <div class="nav__hamburger" @click="toggleNav">
-        <div v-for="_ in 3" class="bar"></div>
-      </div>
-
-      <ul class="nav__list">
-        <li class="nav__item" v-for="item in listTypes">
-          <router-link class="nav__link" :to="'/list/' + item.route">
-            <div class="nav__link-wrap">
-              <svg class="nav__link-icon">
-                <use :xlink:href="'#icon_' + item.route"></use>
-              </svg>
-              <span class="nav__link-title">{{ item.title }}</span>
-            </div>
-          </router-link>
-        </li>
-
-        <li class="nav__item nav__item--profile">
-          <router-link class="nav__link nav__link--profile" :to="{name: 'signin'}" v-if="!userLoggedIn">
-            <div class="nav__link-wrap">
-              <svg class="nav__link-icon">
-                <use xlink:href="#iconLogin"></use>
-              </svg>
-              <span class="nav__link-title">Sign in</span>
-            </div>
-          </router-link>
-
-          <router-link class="nav__link nav__link--profile" :to="{name: 'profile'}" v-if="userLoggedIn">
-            <div class="nav__link-wrap">
-              <svg class="nav__link-icon">
-                <use xlink:href="#iconLogin"></use>
-              </svg>
-              <span class="nav__link-title">Profile</span>
-            </div>
-          </router-link>
-        </li>
-      </ul>
-    </nav>
-
-    <div class="spacer"></div>
-  </div>
-</template>
-
-<script>
-import storage from '@/storage'
-
-export default {
-  data(){
-    return {
-      listTypes: storage.homepageLists,
-      userLoggedIn: localStorage.getItem('token') ? true : false
-    }
-  },
-  methods: {
-    setUserStatus(){
-      this.userLoggedIn = localStorage.getItem('token') ? true : false;
-    },
-    toggleNav(){
-      document.querySelector('.nav__hamburger').classList.toggle('nav__hamburger--active');
-      document.querySelector('.nav__list').classList.toggle('nav__list--active');
-    }
-  },
-  created(){
-    // TODO move this to state manager
-    eventHub.$on('setUserStatus', this.setUserStatus);
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import "./src/scss/variables";
-@import "./src/scss/media-queries";
-
-.icon {
-  width: 30px;
-}
-
-.spacer {
-  @include mobile-only {
-    width: 100%;
-    height: $header-size;
-  }
-}
-
-.nav {
-  transition: background .5s ease;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 50px;
-  z-index: 10;
-  display: block;
-  color: $text-color;
-  background-color: $background-color-secondary;
-
-  @include tablet-min{
-    width: 95px;
-    height: 100vh;
-  }
-  &__logo {
-    width: 55px;
-    height: $header-size;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: $background-nav-logo;
-    @include tablet-min{
-      width: 95px;
-    }
-    &-image{
-      width: 35px;
-      height: 31px;
-      fill: $green;
-      transition: transform 0.5s ease;
-      @include tablet-min{
-        width: 45px;
-        height: 40px;
-      }
-    }
-    &:hover &-image {
-      transform: scale(1.04);
-    }
-  }
-  &__hamburger {
-    display: block;
-    position: fixed;
-    width: 55px;
-    height: 50px;
-    top: 0;
-    right: 0;
-    cursor: pointer;
-    z-index: 10;
-    border-left: 1px solid $background-color;
-    @include tablet-min{
-      display: none;
-    }
-    .bar {
-      position: absolute;
-      width: 23px;
-      height: 1px;
-      background-color: $text-color-70;
-      transition: all 300ms ease;
-      &:nth-child(1) {
-        left: 16px;
-        top: 17px;
-      }
-      &:nth-child(2) {
-        left: 16px;
-        top: 25px;
-        &:after {
-          content: "";
-          position: absolute;
-          left: 0px;
-          top: 0px;
-          width: 23px;
-          height: 1px;
-          transition: all 300ms ease;
-        }
-      }
-      &:nth-child(3) {
-        right: 15px;
-        top: 33px;
-      }
-    }
-    &--active {
-      .bar{
-        &:nth-child(1),
-        &:nth-child(3){
-          width: 0;
-        }
-        &:nth-child(2) {
-          transform: rotate(-45deg);
-        }
-        &:nth-child(2):after {
-          transform: rotate(-90deg);
-          // background: rgba($c-dark, 0.5);
-          background-color: $text-color-70;
-        }
-      }
-    }
-  }
-  &__list {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    text-align: center;
-    width: 100%;
-    position: fixed;
-    left: 0;
-    top: 50px;
-    border-top: 1px solid $background-color;
-    @include mobile-only {
-      display: flex;
-      flex-wrap: wrap;
-      font-size: 0;
-      opacity: 0;
-      visibility: hidden;
-      background-color: $background-95;
-      text-align: left;
-      &--active{
-        opacity: 1;
-        visibility: visible;
-      }
-    }
-    @include tablet-min {
-      display: flex;
-      position: relative;
-      display: block;
-      width: 100%;
-      border-top: 0;
-      top: 0;
-    }
-  }
-  &__item {
-    transition: background .5s ease, color .5s ease, border .5s ease;
-    background-color: $background-color-secondary;
-    color: $text-color-70;
-
-    @include mobile-only {
-      flex: 0 0 50%;
-      text-align: center;
-      border-bottom: 1px solid $background-color;
-      &:nth-child(odd){
-        border-right: 1px solid $background-color;
-
-        &:last-child {
-          // flex: 0 0 100%;
-        }
-      }
-    }
-    @include tablet-min {
-      width: 100%;
-      border-bottom: 1px solid $text-color-5;
-
-      &--profile {
-        position: fixed;
-        right: 0;
-        top: 0;
-        width: $header-size;
-        height: $header-size;
-        border-bottom: 0;
-        border-left: 1px solid $background-color;
-      }
-    }
-    &:hover, .is-active {
-      color: $text-color;
-      background-color: $background-color;
-    }
-  }
-  &__link {
-    background-color: inherit; // a elements have a transparent background
-    width: 100%;
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: center;
-    font-size: 7px;
-    font-weight: 300;
-    text-decoration: none;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    position: relative;
-    cursor: pointer;
-    &-wrap {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-    }
-
-    @include mobile-only {
-      font-size: 10px;
-      padding: 20px 0;
-    }
-    @include tablet-min {
-      width: 95px;
-      height: 95px;
-      font-size: 9px;
-      &--profile {
-        width: 75px;
-        height: 75px;
-        background-color: $background-color-secondary;
-      }
-    }
-    &-icon {
-      width: 20px;
-      height: 20px;
-      fill: $text-color-70;
-      @include tablet-min {
-        width: 20px;
-        height: 20px;
-        margin-bottom: 5px;
-      }
-
-    }
-    &-title {
-      margin-top: 5px;
-      display: block;
-      width: 100%;
-    }
-    &:hover &-icon, &.is-active &-icon {
-      fill: $text-color;
-    }
-  }
-}
-</style>
diff --git a/src/components/NavigationHeader.vue b/src/components/NavigationHeader.vue
new file mode 100644
index 0000000..8ed69a8
--- /dev/null
+++ b/src/components/NavigationHeader.vue
@@ -0,0 +1,344 @@
+<template>
+  <nav>
+    <router-link class="nav__logo" to="/home" exact>
+      <TmdbLogo class="logo" />
+    </router-link>
+
+    <SearchInput />
+
+    <div class="nav__hamburger" @click="toggleNav">
+      <div v-for="_ in 3" class="bar"></div>
+    </div>
+
+    <router-link class="profile desktop-only" to="/profile">
+      <li class="navigation-link">
+        <icon-profile class="navigation-icon" />
+        <span>{{ !userLoggedIn ? "Signin" : "Profile" }}</span>
+      </li>
+    </router-link>
+    <!-- <NavigationIcons class="desktop-only" /> -->
+
+    <div class="nav__list mobile-only">
+      <NavigationIcons>
+        <router-link
+          v-if="userLoggedIn"
+          class="settings"
+          to="/profile?settings=true"
+        >
+          <li class="navigation-link">
+            <icon-settings class="navigation-icon stroke" />
+            <span>Settings</span>
+          </li>
+        </router-link>
+
+        <router-link
+          v-if="userLoggedIn"
+          class="profile"
+          to="/profile?activity=true"
+        >
+          <li class="navigation-link">
+            <icon-activity class="navigation-icon stroke" />
+            <span>Activity</span>
+          </li>
+        </router-link>
+
+        <router-link class="profile" to="/profile">
+          <li class="navigation-link">
+            <icon-profile class="navigation-icon" />
+            <span>{{ !userLoggedIn ? "Signin" : "Profile" }}</span>
+          </li>
+        </router-link>
+      </NavigationIcons>
+
+      <!--       <li class="nav__item nav__item--profile">
+        <router-link
+          class="nav__link nav__link--profile"
+          :to="{ name: 'signin' }"
+          v-if="!userLoggedIn"
+        >
+          <div class="nav__link-wrap">
+            <svg class="nav__link-icon">
+              <use xlink:href="#iconLogin"></use>
+            </svg>
+            <span class="nav__link-title">Sign in</span>
+          </div>
+        </router-link>
+
+        <router-link
+          class="nav__link nav__link--profile"
+          :to="{ name: 'profile' }"
+          v-if="userLoggedIn"
+        >
+          <div class="nav__link-wrap">
+            <svg class="nav__link-icon">
+              <use xlink:href="#iconLogin"></use>
+            </svg>
+            <span class="nav__link-title">Profile</span>
+          </div>
+        </router-link>
+      </li> -->
+    </div>
+    <div style="z-index: -1"></div>
+  </nav>
+</template>
+
+<script>
+import storage from "@/storage";
+import TmdbLogo from "../icons/tmdb-logo";
+import IconProfile from "../icons/IconProfile";
+import IconSettings from "../icons/IconSettings";
+import IconActivity from "../icons/IconActivity";
+import SearchInput from "@/components/SearchInput";
+import NavigationIcons from "src/components/NavigationIcons";
+
+export default {
+  components: {
+    NavigationIcons,
+    SearchInput,
+    TmdbLogo,
+    IconProfile,
+    IconSettings,
+    IconActivity
+  },
+  data() {
+    return {
+      listTypes: storage.homepageLists,
+      userLoggedIn: localStorage.getItem("token") ? true : false
+    };
+  },
+  methods: {
+    setUserStatus() {
+      this.userLoggedIn = localStorage.getItem("token") ? true : false;
+    },
+    toggleNav() {
+      document
+        .querySelector(".nav__hamburger")
+        .classList.toggle("nav__hamburger--active");
+      document
+        .querySelector(".nav__list")
+        .classList.toggle("nav__list--active");
+    }
+  },
+  created() {
+    // TODO move this to state manager
+    eventHub.$on("setUserStatus", this.setUserStatus);
+  }
+};
+</script>
+
+<style lang="scss">
+@import "./src/scss/media-queries";
+
+.navigation-link {
+  display: grid;
+  place-items: center;
+  list-style: none;
+  padding: 1rem 0.15rem;
+  margin: 0;
+  text-align: center;
+  background-color: var(--background-color-secondary);
+  transition: transform 0.3s ease, color 0.3s ease, stoke 0.3s ease,
+    fill 0.3s ease, background-color 0.5s ease;
+
+  height: var(--header-size);
+
+  @include mobile {
+    padding: 1rem;
+    width: 50vw;
+  }
+
+  &:hover {
+    transform: scale(1.05);
+  }
+
+  &:hover,
+  &.active {
+    background-color: var(--background-color);
+
+    span,
+    .navigation-icon {
+      color: var(--text-color);
+      fill: var(--text-color);
+
+      &.stroke {
+        stroke: var(--text-color);
+      }
+    }
+  }
+
+  span {
+    text-transform: uppercase;
+    margin-top: 0.75rem;
+    font-size: 11px;
+    color: var(--text-color-70);
+  }
+}
+
+a {
+  text-decoration: none;
+}
+
+.navigation-icon {
+  width: 28px;
+  fill: var(--text-color-70);
+  transition: inherit;
+
+  &.stroke {
+    stroke: var(--text-color-70);
+  }
+}
+</style>
+<style lang="scss" scoped>
+@import "./src/scss/variables";
+@import "./src/scss/media-queries";
+
+.spacer {
+  @include mobile-only {
+    width: 100%;
+    height: $header-size;
+  }
+}
+
+nav {
+  display: grid;
+  grid-template-columns: var(--header-size) 1fr var(--header-size);
+
+  > * {
+    z-index: 10;
+  }
+}
+
+.logo {
+  padding: 1rem;
+  fill: var(--color-green);
+  transition: transform 0.3s ease;
+
+  &:hover {
+    transform: scale(1.08);
+  }
+
+  @include mobile {
+    padding: 0.5rem;
+  }
+}
+
+.nav {
+  // transition: background 0.5s ease;
+  // position: fixed;
+  // top: 0;
+  // left: 0;
+  // width: 100%;
+  // height: 50px;
+  // z-index: 10;
+  // display: block;
+  // color: $text-color;
+  // background-color: $background-color-secondary;
+
+  &__logo {
+    width: var(--header-size);
+    height: var(--header-size);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: $background-nav-logo;
+
+    // &-image {
+    //   width: 35px;
+    //   height: 31px;
+    //   fill: $green;
+    //   transition: transform 0.5s ease;
+    //   @include tablet-min {
+    //     width: 45px;
+    //     height: 40px;
+    //   }
+    // }
+    // &:hover &-image {
+    //   transform: scale(1.04);
+    // }
+  }
+  &__hamburger {
+    display: block;
+    position: relative;
+    width: var(--header-size);
+    height: var(--header-size);
+    cursor: pointer;
+    border-left: 1px solid $background-color;
+    background-color: var(--background-color-secondary);
+
+    @include tablet-min {
+      display: none;
+    }
+    .bar {
+      position: absolute;
+      width: 23px;
+      height: 1px;
+      background-color: $text-color-70;
+      transition: all 300ms ease;
+      &:nth-child(1) {
+        left: 16px;
+        top: 17px;
+      }
+      &:nth-child(2) {
+        left: 16px;
+        top: 25px;
+        &:after {
+          content: "";
+          position: absolute;
+          left: 0px;
+          top: 0px;
+          width: 23px;
+          height: 1px;
+          transition: all 300ms ease;
+        }
+      }
+      &:nth-child(3) {
+        right: 15px;
+        top: 33px;
+      }
+    }
+    &--active {
+      .bar {
+        &:nth-child(1),
+        &:nth-child(3) {
+          width: 0;
+        }
+        &:nth-child(2) {
+          transform: rotate(-45deg);
+        }
+        &:nth-child(2):after {
+          transform: rotate(-90deg);
+          // background: rgba($c-dark, 0.5);
+          background-color: $text-color-70;
+        }
+      }
+    }
+  }
+  &__list {
+    width: 100%;
+    position: fixed;
+    left: 0;
+    top: var(--header-size);
+    opacity: 0;
+    transition: opacity 0.4s ease;
+    visibility: hidden;
+
+    @include mobile-only {
+      display: flex;
+      flex-wrap: wrap;
+      background-color: $background-95;
+      &--active {
+        opacity: 1;
+        visibility: visible;
+      }
+    }
+    @include tablet-min {
+      display: flex;
+      position: relative;
+      display: block;
+      width: 100%;
+      border-top: 0;
+      top: 0;
+    }
+  }
+}
+</style>
diff --git a/src/components/NavigationIcons.vue b/src/components/NavigationIcons.vue
new file mode 100644
index 0000000..16ead9c
--- /dev/null
+++ b/src/components/NavigationIcons.vue
@@ -0,0 +1,95 @@
+<template>
+  <ul class="navigation-icons">
+    <router-link
+      :to="{ path: route.route }"
+      v-for="route in routes"
+      :key="route.title"
+    >
+      <li
+        class="navigation-link"
+        :class="{ active: route.route == activeRoute }"
+      >
+        <component class="navigation-icon" :is="route.icon"></component>
+        <span>{{ route.title }}</span>
+      </li>
+    </router-link>
+
+    <slot></slot>
+  </ul>
+</template>
+
+<script>
+import IconRequest from "../icons/IconRequest";
+import IconNowPlaying from "../icons/IconNowPlaying";
+import IconPopular from "../icons/IconPopular";
+import IconUpcoming from "../icons/IconUpcoming";
+
+export default {
+  name: "NavigationIcons",
+  components: { IconRequest, IconPopular, IconNowPlaying, IconUpcoming },
+  data() {
+    return {
+      routes: [],
+      activeRoute: null
+    };
+  },
+  watch: {
+    $route() {
+      this.activeRoute = window.location.pathname;
+    }
+  },
+  created() {
+    this.activeRoute = window.location.pathname;
+    this.routes = this.getAvailableRoutes();
+  },
+  methods: {
+    getAvailableRoutes() {
+      return [
+        {
+          title: "Requests",
+          route: "/requests",
+          apiPath: "/v2/requests",
+          icon: IconRequest
+        },
+        {
+          title: "Now Playing",
+          route: "/list/now_playing",
+          apiPath: "/v2/movie/now_playing",
+          icon: IconNowPlaying
+        },
+        {
+          title: "Popular",
+          route: "/list/popular",
+          apiPath: "/v2/movie/popular",
+          icon: IconPopular
+        },
+        {
+          title: "Upcoming",
+          route: "/list/upcoming",
+          apiPath: "/v2/movie/upcoming",
+          icon: IconUpcoming
+        }
+      ];
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "./src/scss/media-queries";
+
+.navigation-icons {
+  display: inline-flex;
+  flex-direction: column;
+  margin: 0;
+  padding-left: 0;
+  height: 100%;
+  background-color: var(--background-color-secondary);
+  z-index: 15;
+
+  @include mobile {
+    flex-wrap: wrap;
+    flex-direction: row;
+  }
+}
+</style>
diff --git a/src/components/ResultsList.vue b/src/components/ResultsList.vue
index db6539e..968c7d5 100644
--- a/src/components/ResultsList.vue
+++ b/src/components/ResultsList.vue
@@ -1,12 +1,15 @@
-<template> 
-  <ul class="results" :class="{'shortList': shortList}">
-    <movies-list-item v-for='movie in results' :movie="movie" />
+<template>
+  <ul class="results" :class="{ shortList: shortList }">
+    <movies-list-item
+      v-for="movie in results"
+      :movie="movie"
+      :key="movie.title"
+    />
   </ul>
 </template>
 
-
 <script>
-import MoviesListItem from '@/components/MoviesListItem'
+import MoviesListItem from "@/components/MoviesListItem";
 
 export default {
   components: { MoviesListItem },
diff --git a/src/components/SearchInput.vue b/src/components/SearchInput.vue
index 5bc89e6..aed43fd 100644
--- a/src/components/SearchInput.vue
+++ b/src/components/SearchInput.vue
@@ -9,16 +9,19 @@
         autocorrect="off"
         autocapitalize="off"
         tabindex="1"
-        v-model="query" 
-        @input="handleInput" 
+        v-model="query"
+        @input="handleInput"
         @click="focus = true"
         @keydown.escape="handleEscape"
         @keyup.enter="handleSubmit"
         @keydown.up="navigateUp"
-        @keydown.down="navigateDown" />
+        @keydown.down="navigateDown"
+      />
 
-      <svg class="search-icon" fill="currentColor" @click="handleSubmit"><use xlink:href="#iconSearch"></use></svg>
-    </div> 
+      <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">
@@ -26,10 +29,14 @@
           <h2>Filter your search:</h2>
 
           <div class="filter-items">
-            <toggle-button :options="searchTypes" :selected.sync="selectedSearchType" />
+            <toggle-button
+              :options="searchTypes"
+              :selected.sync="selectedSearchType"
+            />
 
-            <label>Adult
-              <input type="checkbox" value="adult" v-model="adult">
+            <label
+              >Adult
+              <input type="checkbox" value="adult" v-model="adult" />
             </label>
           </div>
         </div>
@@ -37,49 +44,57 @@
         <hr />
 
         <div class="dropdown-results" v-if="elasticSearchResults.length">
-          <ul v-for="(item, index) in elasticSearchResults"
-              @click="openResult(item, index + 1)"
-              :class="{ active: index + 1 === selectedResult}">
-                
-              {{ item.name }}
+          <ul
+            v-for="(item, index) in elasticSearchResults"
+            @click="openResult(item, index + 1)"
+            :class="{ active: index + 1 === selectedResult }"
+          >
+            {{
+              item.name
+            }}
           </ul>
         </div>
 
         <div v-else class="dropdown">
           <div class="dropdown-results">
-            <h2 class="not-found">No results for query: <b>{{ query }}</b></h2>
+            <h2 class="not-found">
+              No results for query: <b>{{ query }}</b>
+            </h2>
           </div>
         </div>
 
-        <seasoned-button class="end-section" fullWidth="true" 
-          @click="focus = false" :active="elasticSearchResults.length + 1 === selectedResult">
+        <seasoned-button
+          class="end-section"
+          fullWidth="true"
+          @click="focus = false"
+          :active="elasticSearchResults.length + 1 === selectedResult"
+        >
           close
         </seasoned-button>
       </div>
-
     </transition>
   </div>
 </template>
 
 <script>
-import SeasonedButton from '@/components/ui/SeasonedButton'
-import ToggleButton from '@/components/ui/ToggleButton';
+import SeasonedButton from "@/components/ui/SeasonedButton";
+import ToggleButton from "@/components/ui/ToggleButton";
 
-import { elasticSearchMoviesAndShows } from '@/api'
-import config from '@/config.json'
+import { elasticSearchMoviesAndShows } from "@/api";
+import config from "@/config.json";
 
 export default {
-  name: 'SearchInput',
+  name: "SearchInput",
   components: {
     SeasonedButton,
     ToggleButton
   },
-  props: ['value'],
+  props: ["value"],
   data() {
     return {
       adult: true,
-      searchTypes: ['all', 'movie', 'show', 'person'],
-      selectedSearchType: 'all',
+      searchTypes: ["all", "movie", "show", "person"],
+      selectedSearchType: "all",
 
       query: this.value,
       focus: false,
@@ -87,144 +102,150 @@ export default {
       scrollListener: undefined,
       scrollDistance: 0,
       elasticSearchResults: [],
-      selectedResult: 0,
-    }
+      selectedResult: 0
+    };
   },
   watch: {
-    focus: function(val) {
+    focus: function (val) {
       if (val === true) {
-        window.addEventListener('scroll', this.disableFocus)
+        window.addEventListener("scroll", this.disableFocus);
       } else {
-        window.removeEventListener('scroll', this.disableFocus)
-        this.scrollDistance = 0
+        window.removeEventListener("scroll", this.disableFocus);
+        this.scrollDistance = 0;
       }
     },
-    adult: function(value) {
-      this.handleInput()
+    adult: function (value) {
+      this.handleInput();
     }
   },
   beforeMount() {
-    const elasticUrl = config.ELASTIC_URL
-    if (elasticUrl === undefined || elasticUrl === false || elasticUrl === '') {
-      this.disabled = true
+    const elasticUrl = config.ELASTIC_URL;
+    if (elasticUrl === undefined || elasticUrl === false || elasticUrl === "") {
+      this.disabled = true;
     }
   },
   beforeDestroy() {
-    console.log('scroll eventlistener not removed, destroying!')
-    window.removeEventListener('scroll', this.disableFocus)
+    console.log("scroll eventlistener not removed, destroying!");
+    window.removeEventListener("scroll", this.disableFocus);
   },
   methods: {
     navigateDown() {
-      this.focus = true
-      this.selectedResult++
+      this.focus = true;
+      this.selectedResult++;
     },
     navigateUp() {
-      this.focus = true
-      this.selectedResult--
+      this.focus = true;
+      this.selectedResult--;
       const input = this.$refs.input;
-      const textLength = input.value.length
+      const textLength = input.value.length;
 
       setTimeout(() => {
-        input.focus()
-        input.setSelectionRange(textLength, textLength + 1)
-      }, 1)
+        input.focus();
+        input.setSelectionRange(textLength, textLength + 1);
+      }, 1);
     },
     openResult(item, index) {
       this.selectedResult = index;
-      this.$popup.open(item.id, item.type)
+      this.$popup.open(item.id, item.type);
     },
-    handleInput(e){
-      this.selectedResult = 0
-      this.$emit('input', this.query);
+    handleInput(e) {
+      this.selectedResult = 0;
+      this.$emit("input", this.query);
 
-      if (! this.focus) {
+      if (!this.focus) {
         this.focus = true;
       }
 
-      elasticSearchMoviesAndShows(this.query)
-      .then(resp => {
-        const data = resp.hits.hits
+      elasticSearchMoviesAndShows(this.query).then(resp => {
+        const data = resp.hits.hits;
 
         let results = data.map(item => {
-          const index = item._index.slice(0, -1)
-          if (index === 'movie' || item._source.original_title) {
+          const index = item._index.slice(0, -1);
+          if (index === "movie" || item._source.original_title) {
             return {
               name: item._source.original_title,
               id: item._source.id,
               adult: item._source.adult,
-              type: 'movie'
-            }
-          } else if (index === 'show' || item._source.original_name) {
+              type: "movie"
+            };
+          } else if (index === "show" || item._source.original_name) {
             return {
               name: item._source.original_name,
               id: item._source.id,
               adult: item._source.adult,
-              type: 'show'
-            }
+              type: "show"
+            };
           }
-        })
-        results = this.removeDuplicates(results)
-        this.elasticSearchResults = results
-      })
+        });
+        results = this.removeDuplicates(results);
+        this.elasticSearchResults = results;
+      });
     },
     removeDuplicates(searchResults) {
-      let filteredResults = []
+      let filteredResults = [];
       searchResults.map(result => {
-        const numberOfDuplicates = filteredResults.filter(filterItem => filterItem.id == result.id)
+        const numberOfDuplicates = filteredResults.filter(
+          filterItem => filterItem.id == result.id
+        );
         if (numberOfDuplicates.length >= 1) {
-          return null
+          return null;
         }
-        filteredResults.push(result)
-      })
+        filteredResults.push(result);
+      });
 
       if (this.adult == false) {
-        filteredResults = filteredResults.filter(result => result.adult == false)
+        filteredResults = filteredResults.filter(
+          result => result.adult == false
+        );
       }
 
-      return filteredResults
+      return filteredResults;
     },
     handleSubmit() {
-      let searchResults = this.elasticSearchResults
+      let searchResults = this.elasticSearchResults;
 
       if (this.selectedResult > searchResults.length) {
-        this.focus = false
-        this.selectedResult = 0
+        this.focus = false;
+        this.selectedResult = 0;
       } else if (this.selectedResult > 0) {
-        const resultItem = searchResults[this.selectedResult - 1]
-        this.$popup.open(resultItem.id, resultItem.type)
+        const resultItem = searchResults[this.selectedResult - 1];
+        this.$popup.open(resultItem.id, resultItem.type);
       } else {
-        const encodedQuery = encodeURI(this.query.replace('/ /g, "+"'))
-        const media_type = this.selectedSearchType !== 'all' ? this.selectedSearchType : null
-        this.$router.push({ name: 'search', query: { query: encodedQuery, adult: this.adult, media_type }});
-        this.focus = false
-        this.selectedResult = 0
+        const encodedQuery = encodeURI(this.query.replace('/ /g, "+"'));
+        const media_type =
+          this.selectedSearchType !== "all" ? this.selectedSearchType : null;
+        this.$router.push({
+          name: "search",
+          query: { query: encodedQuery, adult: this.adult, media_type }
+        });
+        this.focus = false;
+        this.selectedResult = 0;
       }
     },
     handleEscape() {
       if (this.$popup.isOpen) {
-        console.log('THIS WAS FUCKOING OPEN!')
+        console.log("THIS WAS FUCKOING OPEN!");
       } else {
-        this.focus = false
+        this.focus = false;
       }
     },
     disableFocus(_) {
-      this.focus = false
+      this.focus = false;
     }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
 @import "./src/scss/variables";
 @import "./src/scss/media-queries";
-@import './src/scss/main';
-
+@import "./src/scss/main";
 
 .fade-enter-active {
-  transition: opacity .2s;
+  transition: opacity 0.2s;
 }
 .fade-leave-active {
-  transition: opacity .2s;
+  transition: opacity 0.2s;
 }
 .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
   opacity: 0;
@@ -300,7 +321,7 @@ hr {
       width: calc(100% - 25px);
       max-width: fit-content;
 
-      list-style: none;      
+      list-style: none;
       color: rgba(0, 0, 0, 0.5);
       text-transform: capitalize;
       cursor: pointer;
@@ -311,7 +332,9 @@ hr {
       overflow: hidden;
       color: $text-color-50;
 
-      &.active, &:hover, &:active {
+      &.active,
+      &:hover,
+      &:active {
         color: $text-color;
         border-bottom: 2px solid $text-color;
       }
@@ -333,7 +356,7 @@ hr {
   top: 0;
   right: 55px;
 
-  @include tablet-min{
+  @include tablet-min {
     position: relative;
     width: 100%;
     right: 0px;
@@ -348,16 +371,16 @@ hr {
     border: 0;
     background-color: $background-color-secondary;
     font-weight: 300;
-    font-size: 19px;
+    font-size: 18px;
     color: $text-color;
-    transition: background-color .5s ease, color .5s ease;
 
     @include tablet-min {
+      font-size: 24px;
       padding: 13px 30px 13px 60px;
     }
   }
 
-  &-icon{
+  &-icon {
     width: 20px;
     height: 20px;
     fill: $text-color-50;
@@ -365,12 +388,14 @@ hr {
     pointer-events: none;
     position: absolute;
     left: 15px;
-    top: 15px;
+    top: calc(50% - 10px);
 
-    @include tablet-min{
-      top: 27px;
-      left: 25px;
+    @include tablet-min {
+      width: 24px;
+      height: 24px;
+      top: calc(50% - 12px);
+      left: 22px;
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/scss/media-queries.scss b/src/scss/media-queries.scss
index 39c95bc..dc355c8 100644
--- a/src/scss/media-queries.scss
+++ b/src/scss/media-queries.scss
@@ -3,77 +3,77 @@
 $phone-xs-width: 480px;
 $tablet-p-width: 768px;
 $tablet-l-width: 1024px;
-$desktop-width:  1200px;
+$desktop-width: 1200px;
 $desktop-l-width: 1600px;
 $mobile-width: 768px;
 
 @mixin desktop {
 	@media (min-width: #{$mobile-width + 1px}) {
-    @content;
-  }
+		@content;
+	}
 }
 
 @mixin mobile {
 	@media (max-width: #{$mobile-width}) {
-    @content;
-  }
+		@content;
+	}
 }
 
 .desktop-only {
 	@include mobile {
-		display: none;
+		display: none !important;
 	}
 }
 
 .mobile-only {
 	@include desktop {
-		display: none;
+		display: none !important;
 	}
 }
 
 // Media
-@mixin mobile-only{
-	@media (max-width: #{$tablet-p-width - 1px}){
+@mixin mobile-only {
+	@media (max-width: #{$tablet-p-width - 1px}) {
 		@content;
 	}
 }
-@mixin mobile-ls-min{
-  @media (min-width: #{$phone-xs-width}){
+@mixin mobile-ls-min {
+	@media (min-width: #{$phone-xs-width}) {
 		@content;
 	}
 }
-@mixin tablet-only{
-	@media (min-width: #{$tablet-p-width}) and (max-width: #{$desktop-width - 1px}){
+@mixin tablet-only {
+	@media (min-width: #{$tablet-p-width}) and (max-width: #{$desktop-width - 1px}) {
 		@content;
 	}
 }
-@mixin tablet-min{
-	@media (min-width: #{$tablet-p-width}){
+@mixin tablet-min {
+	@media (min-width: #{$tablet-p-width}) {
 		@content;
 	}
 }
-@mixin tablet-portrait-only{
-	@media (min-width: #{$tablet-p-width}) and (max-width: #{$tablet-l-width - 1px}){
+@mixin tablet-portrait-only {
+	@media (min-width: #{$tablet-p-width}) and (max-width: #{$tablet-l-width - 1px}) {
 		@content;
 	}
 }
-@mixin tablet-landscape-min{
-	@media (min-width: #{$tablet-l-width}){
+@mixin tablet-landscape-min {
+	@media (min-width: #{$tablet-l-width}) {
 		@content;
 	}
 }
-@mixin desktop-min{
-	@media (min-width: #{$desktop-width}){
+@mixin desktop-min {
+	@media (min-width: #{$desktop-width}) {
 		@content;
 	}
 }
-@mixin desktop-lg-min{
-	@media (min-width: #{$desktop-l-width}){
+@mixin desktop-lg-min {
+	@media (min-width: #{$desktop-l-width}) {
 		@content;
 	}
 }
-@mixin retina{
-  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){
-    @content;
-  }
+@mixin retina {
+	@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+		@content;
+	}
 }
diff --git a/src/scss/variables.scss b/src/scss/variables.scss
index 5465fc2..077cc77 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,9 +31,9 @@
   --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;
+  --header-size: 90px;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -55,7 +55,7 @@
 
 @include mobile-only {
   :root {
-    --header-size: 50px;
+    --header-size: 55px;
   }
 }
 
@@ -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;