diff --git a/src/App.vue b/src/App.vue
index 4ac04cbcf304afb5e7e35e1fd513c65e11763773..5dfb204c0e0fad55c49ad32de0566be7e47598fc 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -47,7 +47,7 @@ nav a:first-of-type {
 @media (min-width: 1024px) {
   header {
     display: flex;
-    place-items: center;
+    qplace-items: center;
     padding-right: calc(var(--section-gap) / 2);
   }
 
diff --git a/src/assets/main.css b/src/assets/main.css
index e8667cd4508b6163e44e675ff899de1896544c84..3c0a06b26763dc5a9effbed2afbccab2d9ed0951 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -3,7 +3,7 @@
 #app {
   max-width: 1280px;
   margin: 0 auto;
-  padding: 2rem;
+  qpadding: 2rem;
 
   font-weight: normal;
 }
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 1e4daa4af9706ebebe0c33560aa7ab881f2edf6b..dac9a4312a66c583994fe521f16a3bfc7a73c2c4 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -1,29 +1,29 @@
 <template>
     <div>
         <nav>
-            <ul>
+            <ul :aria-label = "'Navigation links'">
                 <li>
-                    <RouterLink :to="'/'">
+                    <RouterLink :to="'/'" :aria-label="'link to home page'">
                       <Icon icon="material-symbols:home-outline-rounded" :color="iconColor" :style="{ fontSize: iconSize }" />
                     </RouterLink>
                 </li>
                 <li>
-                    <RouterLink :to="'/'">
+                    <RouterLink :to="'/'" :aria-label="'link to fridge page'">
                       <Icon icon="mingcute:fridge-line" :color="iconColor" :style="{ fontSize: iconSize }"/>
                     </RouterLink>
                  </li>
                 <li>
-                    <RouterLink :to="'/'">
+                    <RouterLink :to="'/'" :aria-label="'link to week menu page'">
                       <Icon icon="mdi:leaf-circle" :color="iconColor"  :style="{ fontSize: logoSize }" />
                     </RouterLink>
                 </li>
                 <li>
-                    <RouterLink :to="'/'">
+                    <RouterLink :to="'/'" :aria-label="'link to shopping list'">
                       <Icon icon="material-symbols:event-list-outline" :color="iconColor" :style="{ fontSize: iconSize }" />
                     </RouterLink>
                 </li>
                 <li>
-                    <RouterLink :to="'/'">
+                    <RouterLink :to="'/'" :aria-label="'link to settings page'">
                       <Icon icon="mdi:cog" :color="iconColor" :style="{ fontSize: iconSize }"/>
                     </RouterLink>
                 </li>
@@ -45,7 +45,7 @@ export default {
       return `32px`;
     },
     logoSize() {
-      return '40px';
+      return '32px';
     }
   }
 }
@@ -54,7 +54,10 @@ export default {
 <style scoped lang="scss">
 
 nav {
-    width: 393px;
+    position: fixed;
+    top: auto;
+    bottom: 0;
+    width: 100%;
     background-color: base.$green;
     margin:0;
     padding:0;
@@ -67,10 +70,22 @@ ul {
     padding: 0;
     margin-right: 1em;
     margin-left: 1em;
+    margin-top: .6em;
 
 }
+
+
+
+@media only screen and (min-width: base.$desktop-min){
+    nav {
+        top:0;
+        left:0;
+        bottom:auto;
+    }
+}
+
+
 li{
-    padding-top: 0.6em;
     text-align: center;
 }
 </style>
\ No newline at end of file
diff --git a/src/style.scss b/src/style.scss
index ee2b8b314dd738fba76060c644c80ab8758f2950..438fccd78f13664e5980f646df8a9ee3fa3d6768 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -4,3 +4,7 @@ $white:#FFFFFF;
 $grey:#D9D9D9;
 $red:#EE6D6D;
 
+
+$desktop-min: 800px;
+$phone-min : 360px;
+