diff --git a/src/components/BaseComponents/FooterBar.vue b/src/components/BaseComponents/FooterBar.vue
index 7e9d7af939ff0f2b03d7f961ea7f49d5b40d1cb5..478a86447ca15a4a5be2cbb140e6a797ed142188 100644
--- a/src/components/BaseComponents/FooterBar.vue
+++ b/src/components/BaseComponents/FooterBar.vue
@@ -1,8 +1,8 @@
 <template>
   <footer
-    class="w-full bg-white dark:bg-gray-800 sm:flex-row border-1 border-t border-b border-gray-600 h-10"
+    class="w-full bg-white dark:bg-gray-800 sm:flex-row border-1 border-t border-gray-600 h-10"
   >
-    <p class="float-left text-xs my-3 ml-4">
+    <p class="float-left text-xs my-3 ml-4 text-primary-dark">
       © BoCo 2022 - All rights reserved
     </p>
     <QuestionMarkCircleIcon
diff --git a/src/components/BaseComponents/NavBar.vue b/src/components/BaseComponents/NavBar.vue
index 39941c5321ede2b107b3750ae38f38d198202e67..e80792a22af331b12efb22fe785c06f306e994de 100644
--- a/src/components/BaseComponents/NavBar.vue
+++ b/src/components/BaseComponents/NavBar.vue
@@ -1,36 +1,42 @@
 <template>
   <nav
-    class="flex items-center bg-white justify-between h-14 border-1 border-b border-gray-300 border-solid sticky top-0 z-50"
+    class="flex items-center bg-white justify-between h-10 md:h-14 border-1 border-b border-gray-300 border-solid sticky top-0 z-50"
   >
     <div class="logo">
       <img
-        class="m-1 ml-4 cursor-pointer h-12"
+        class="m-1 ml-4 cursor-pointer h-9 md:h-12"
         src="../../assets/logo3.svg"
         alt="BoCo logo"
         @click="$router.push('/')"
       />
     </div>
-    <ul class="flex">
-      <li>
+    <ul class="flex justify-between">
+      <li class="cursor-pointer"
+          @click="$router.push('/newItem')"
+      >
         <PlusIcon
-          class="m-6 cursor-pointer h-7 text-primary-medium"
+          class="m-6 md:mr-2 h-7 text-primary-medium float-left"
           alt="Legg til"
-          @click="$router.push('/newItem')"
         />
+        <a class="hidden md:block mt-7 text-sm float-right">Legg til</a>
       </li>
-      <li>
+      <li class="cursor-pointer"
+          @click="$router.push('/messages')"
+      >
         <ChatAlt2Icon
-          class="m-6 cursor-pointer h-7 text-primary-medium"
+          class="m-6 md:mr-2 h-7 text-primary-medium float-left"
           alt="Meldinger"
-          @click="$router.push('/messages')"
         />
+        <a class="hidden md:block mt-7 text-sm float-right">Meldinger</a>
       </li>
-      <li>
+      <li class="cursor-pointer"
+          @click="loadProfile"
+      >
         <UserCircleIcon
-          class="m-6 cursor-pointer h-7 text-primary-medium"
+          class="m-6 md:mr-2 h-7 text-primary-medium float-left"
           alt="Profil"
-          @click="loadProfile"
         />
+        <a class="hidden md:block mr-4 mt-7 text-sm float-right">Profil</a>
       </li>
     </ul>
   </nav>