diff --git a/frontend/App.vue b/frontend/App.vue
index ac08b8a..5f53dd0 100644
--- a/frontend/App.vue
+++ b/frontend/App.vue
@@ -1,17 +1,17 @@
 <template>
   <div>
-    <Header></Header>
+    <Navigation></Navigation>
 
     <router-view />
   </div>
 </template>
 
 <script>
-import Header from '@/components/Header';
+import Navigation from '@/components/Navigation';
 
 export default {
   name: 'App',
-  components: { Header }
+  components: { Navigation }
 }
 </script>
 
diff --git a/frontend/assets/images/logo-black.png b/frontend/assets/images/logo-black.png
new file mode 100644
index 0000000..9b9337c
Binary files /dev/null and b/frontend/assets/images/logo-black.png differ
diff --git a/frontend/assets/images/logo-white.png b/frontend/assets/images/logo-white.png
new file mode 100644
index 0000000..cd2ec9a
Binary files /dev/null and b/frontend/assets/images/logo-white.png differ
diff --git a/frontend/components/Header.vue b/frontend/components/Header.vue
deleted file mode 100644
index b574ab1..0000000
--- a/frontend/components/Header.vue
+++ /dev/null
@@ -1,102 +0,0 @@
-<template>
-  <header class="flex space-between">
-    <div>
-      <img class="logo" src="https://planetposen.no/Planetposen/Hjem_files/shapeimage_1.png" />
-
-      <router-link to="/" class="header-element">
-        <span>Hjem</span>
-      </router-link>
-      <router-link to="/" class="header-element">
-        <span>Om oss</span>
-      </router-link>
-      <router-link to="/" class="header-element">
-        <span>Produkter</span>
-      </router-link>
-    </div>
-    <div>
-      <!-- <i class="icon icon--profile"></i> -->
-      <router-link to="/cart">
-        <i class="icon icon--cart-outline header-element"></i>
-      </router-link>
-    </div>
-  </header>
-</template>
-
-<script>
-export default {
-  name: 'Header'
-}
-</script>
-
-<style lang="scss" scoped>
-@import "./frontend/styles/variables";
-
-$header-height: 80px;
-
-header {
-  display: flex;
-  justify-content: space-between;
-  background-color: #3b945e; // 3
-  height: $header-height;
-  color: #f2f2f2; // 3
-
-  > div {
-    display: flex;
-    align-items: center;
-    height: $header-height;
-
-    a {
-      text-decoration: unset;
-      color: inherit;
-      height: 100%;
-    }
-
-    // background-color: $green; // 1
-    // background-color: #3aafa9; // 2
-    // background-color: #3b945e; // 3
-    // color: $text-color; // 1
-    // color: white; // 2
-    // color: #f2f2f2; // 3
-
-    .logo {
-      display: block;
-      height: 100%;
-      width: auto;
-    }
-
-    .header-element {
-      display: flex;
-      align-items: center;
-      padding: 0 0.7rem;
-      height: 100%;
-      cursor: pointer;
-
-      &:hover {
-        // background-color: #379683; // 1
-        background-color: #def2f1; // 2
-        // background-color: #57ba98; // 3
-        color: white; // 1
-        color: $text-color; // 2
-        color: #182628; // 3
-        // background-color: #8ee4af;
-      }
-
-      // &:first-of-type {
-      //   margin-left: 5rem;
-      // }
-
-      span {
-        letter-spacing: 2.5px;
-        text-transform: lowercase;
-        font-weight: 300;
-        align-items: center;
-      }
-    }
-
-    .icon {
-      font-size: 1.75rem;
-      font-weight: 700;
-    }
-  }
-}
-</style>
\ No newline at end of file
diff --git a/frontend/components/Navigation.vue b/frontend/components/Navigation.vue
new file mode 100644
index 0000000..5587771
--- /dev/null
+++ b/frontend/components/Navigation.vue
@@ -0,0 +1,148 @@
+<template>
+  <div>
+    <nav class="mobile-only">
+      <ul class="nav-list">
+        <li class="nav-item">
+          <router-link to="/cart">
+            <i class="icon icon--basket-outline"></i>
+          </router-link>
+        </li>
+
+        <img class="logo" src="/frontend/assets/images/logo-white.png" />
+
+        <li class="nav-item">
+          <router-link to="/cart">
+            <i class="icon icon--basket-outline"></i>
+          </router-link>
+        </li>
+      </ul>
+    </nav>
+
+    <nav class="desktop-only">
+      <ul class="nav-list">
+        <img class="logo" src="/frontend/assets/images/logo-black.png" />
+        <!-- <img class="logo" src="https://planetposen.no/Planetposen/Hjem_files/shapeimage_1.png" /> -->
+
+        <li class="nav-item">
+          <router-link to="/" class="">
+            <span>Hjem</span>
+          </router-link>
+        </li>
+        <li class="nav-item">
+          <router-link to="/">
+            <span>Om oss</span>
+          </router-link>
+        </li>
+        <li class="nav-item">
+          <router-link to="/">
+            <span>Produkter</span>
+          </router-link>
+        </li>
+      </ul>
+      <ul>
+        <li class="nav-item">
+        <!-- <i class="icon icon--profile"></i> -->
+          <router-link to="/cart">
+            <i class="icon icon--basket-outline"></i>
+          </router-link>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Navigation'
+}
+</script>
+
+<style lang="scss" scoped>
+@import "./frontend/styles/variables";
+@import './frontend/styles/global';
+
+$nav-height: 80px;
+
+nav {
+  display: flex;
+  justify-content: space-between;
+  background-color: #3b945e; // 3
+  height: $nav-height;
+  color: #f2f2f2; // 3
+
+  > ul {
+    display: flex;
+    align-items: center;
+    height: $nav-height;
+    margin: 0;
+    padding: 0;
+
+    @include mobile {
+      width: 100%;
+      justify-content: space-between;
+    }
+
+    a {
+      text-decoration: unset;
+      color: inherit;
+      // height: 100%;
+    }
+
+    li {
+      height: 100%;
+      display: block;
+    }
+
+    // background-color: $green; // 1
+    // background-color: #3aafa9; // 2
+    // background-color: #3b945e; // 3
+    // color: $text-color; // 1
+    // color: white; // 2
+    // color: #f2f2f2; // 3
+
+    .logo {
+      display: block;
+      height: 100%;
+      width: auto;
+
+      @include desktop {
+        background-color: #def2f1;
+      }
+    }
+
+    .nav-item {
+      display: flex;
+      align-items: center;
+      padding: 0 0.7rem;
+      height: 100%;
+      cursor: pointer;
+
+      &:hover {
+        // background-color: #379683; // 1
+        background-color: #def2f1; // 2
+        // background-color: #57ba98; // 3
+        color: white; // 1
+        color: $text-color; // 2
+        color: #182628; // 3
+        // background-color: #8ee4af;
+      }
+
+      // &:first-of-type {
+      //   margin-left: 5rem;
+      // }
+
+      span {
+        letter-spacing: 2.5px;
+        text-transform: lowercase;
+        font-weight: 300;
+        align-items: center;
+      }
+    }
+
+    .icon {
+      font-size: 1.75rem;
+      font-weight: 700;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/frontend/styles/global.scss b/frontend/styles/global.scss
index 5470860..46c41ce 100644
--- a/frontend/styles/global.scss
+++ b/frontend/styles/global.scss
@@ -1,3 +1,4 @@
+@import './frontend/styles/variables';
 
 .flex {
   display: flex;
@@ -14,4 +15,16 @@
 .flex-direction-column {
   display: flex;
   flex-direction: column;
+}
+
+@include desktop {
+  .mobile-only {
+    display: none;
+  }
+}
+
+@include mobile {
+  .desktop-only {
+    display: none;
+  }
 }
\ No newline at end of file
diff --git a/frontend/styles/variables.scss b/frontend/styles/variables.scss
index 17b1ded..57b1855 100644
--- a/frontend/styles/variables.scss
+++ b/frontend/styles/variables.scss
@@ -1,3 +1,17 @@
 
 $green: #5cdb95;
-$text-color: #05386B;
\ No newline at end of file
+$text-color: #05386B;
+
+$mobile-width: 768px;
+
+@mixin mobile {
+  @media (max-width: #{$mobile-width}) {
+    @content;
+  }
+}
+
+@mixin desktop {
+  @media (min-width: #{$mobile-width + 1px}) {
+    @content;
+  }
+}
\ No newline at end of file