diff --git a/front/src/App.svelte b/front/src/App.svelte
index e50e864..2f5dd92 100644
--- a/front/src/App.svelte
+++ b/front/src/App.svelte
@@ -8,7 +8,9 @@
     let oldLocation = undefined;
     let showNavBar = false;
     let fullWidth = false;
-    let scrollY = 0;
+
+    let windowScrollY = 0;
+    let windowWidth = 0;
 
     function routeLoading(event) {
         if (event.detail.location === oldLocation) {
@@ -24,14 +26,15 @@
     }
 </script>
 
-<svelte:window bind:scrollY={scrollY} />
+<svelte:window bind:scrollY={windowScrollY} bind:innerWidth={windowWidth} />
 <svelte:head>
     <link rel="stylesheet" href="https://api.fontshare.com/v2/css?f[]=erode@300,301,400,401,500,501,600,601,700,701,1,2&display=swap">
 </svelte:head>
 
 {#if showNavBar }
     <NavigationBar
-        scrolled={scrollY > 0}
+        scrolled={windowScrollY > 0}
+        mobile={windowWidth < 700}
     />
 {/if}
 <main
diff --git a/front/src/pages/PageContact.svelte b/front/src/pages/PageContact.svelte
index 93b8011..0a90642 100644
--- a/front/src/pages/PageContact.svelte
+++ b/front/src/pages/PageContact.svelte
@@ -23,7 +23,7 @@
     </DropDown>
 </div>
 
-<div class="spacer"></div>
+<div class="spacer" />
 
 <h2>Contact From</h2>
 <form>
diff --git a/front/src/pages/PageIndex.svelte b/front/src/pages/PageIndex.svelte
index 5fb7108..e8caa8a 100644
--- a/front/src/pages/PageIndex.svelte
+++ b/front/src/pages/PageIndex.svelte
@@ -27,30 +27,29 @@
           crossorigin=""/>
 </svelte:head>
 
-<div>
-    <AnnouncementBanner />
-    <a href="/annoucements" use:link>Learn More <ArrowUpRight /></a>
-    <div class="spacer"></div>
+<AnnouncementBanner />
+<a href="/annoucements" use:link>Learn More <ArrowUpRight /></a>
+<div class="spacer" />
 
-    <h2>Where to find us</h2>
-    <div id="contact">
-        <div id="map"></div>
-        <div class="container">
-            <h2>Some Title</h2>
-            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis dolore maiores, dolorem unde, illo vero dolores magnam omnis, explicabo vel eos voluptatem libero ullam ipsa molestias laboriosam voluptas nisi sunt.</p>
-        </div>
+<h2>Where to find us</h2>
+<div id="contact">
+    <div id="map"></div>
+    <div class="container">
+        <h2>Some Title</h2>
+        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis dolore maiores, dolorem unde, illo vero dolores magnam omnis, explicabo vel eos voluptatem libero ullam ipsa molestias laboriosam voluptas nisi sunt.</p>
     </div>
-    <div class="spacer"></div>
-
-    <h2>Popular Today</h2>
-    <MenuList {items} />
-    <a href="/menu" use:link>See All <ArrowUpRight /></a>
-    <div class="spacer"></div>
-
-    <h2>About Us</h2>contact
-    <p>Want to know the story of the restaurant?</p>
-    <a href="/about" use:link>Continue reading <ArrowUpRight /></a>
 </div>
+<div class="spacer" />
+
+<h2>Popular Today</h2>
+<MenuList {items} />
+<a href="/menu" use:link>See All <ArrowUpRight /></a>
+<div class="spacer" />
+
+<h2>About Us</h2>contact
+<p>Want to know the story of the restaurant?</p>
+<a href="/about" use:link>Continue reading <ArrowUpRight /></a>
+
 
 <style lang="scss">
     @import "%/styles/vars";
diff --git a/front/src/pages/elements/NavigationBar.svelte b/front/src/pages/elements/NavigationBar.svelte
index 4ad9026..eca8b4a 100644
--- a/front/src/pages/elements/NavigationBar.svelte
+++ b/front/src/pages/elements/NavigationBar.svelte
@@ -3,27 +3,52 @@
     import active from 'svelte-spa-router/active'
     import Logo from '/LogoAlt.svg';
 
+    const links = {
+        home: {path: '/', className: 'active'},
+        menu: {path: '/menu', className: 'active'},
+        contact: {path: '/contact', className: 'active'},
+        cart: {path: '/cart', className: 'active'},
+    }
+
     export let scrolled = false;
+    export let mobile = false;
 </script>
 
-<nav class:scrolled={scrolled}>
-    <ul style="justify-content: flex-end">
-        <li use:active={{path: '/', className: 'active'}}>
-            <a href="/" use:link>Home</a>
-        </li>
-        <li use:active={{path: '/menu', className: 'active'}}>
-            <a href="/menu" use:link>Menu</a>
-        </li>
-    </ul>
+<nav class:scrolled={scrolled} class:mobile={mobile}>
+    {#if !mobile}
+        <ul style="justify-content: flex-end">
+            <li use:active={links.home}>
+                <a href="/" use:link>Home</a>
+            </li>
+            <li use:active={links.menu}>
+                <a href="/menu" use:link>Menu</a>
+            </li>
+        </ul>
 
-    <span><img src={Logo} alt="TastyBites"></span>
+        <span><img src={Logo} alt="TastyBites"></span>
 
-    <ul style="justify-content: flex-start">
-        <li use:active={{path: '/contact', className: 'active'}}>
-            <a href="/contact" use:link>Contact Us</a>
-        </li>
-        <li use:active={{path: '/cart', className: 'active'}}>
-            <a href="/cart" use:link>Cart</a>
-        </li>
-    </ul>
+        <ul style="justify-content: flex-start">
+            <li use:active={links.contact}>
+                <a href="/contact" use:link>Contact&nbsp;Us</a>
+            </li>
+            <li use:active={links.cart}>
+                <a href="/cart" use:link>Cart</a>
+            </li>
+        </ul>
+    {:else}
+        <ul>
+            <li use:active={links.home}>
+                <a href="/" use:link>Home</a>
+            </li>
+            <li use:active={links.menu}>
+                <a href="/menu" use:link>Menu</a>
+            </li>
+            <li use:active={links.contact}>
+                <a href="/contact" use:link>Contact&nbsp;Us</a>
+            </li>
+            <li use:active={links.cart}>
+                <a href="/cart" use:link>Cart</a>
+            </li>
+        </ul>
+    {/if}
 </nav>
diff --git a/front/src/styles/_navigation_bar.scss b/front/src/styles/_navigation_bar.scss
index 31b458f..f41fd23 100644
--- a/front/src/styles/_navigation_bar.scss
+++ b/front/src/styles/_navigation_bar.scss
@@ -1,5 +1,5 @@
 nav {
-    padding: $spacing-small;
+    padding: $spacing-small $spacing-normal;
 
     width: 100%;
     height: $sizing-navigation-height;
@@ -31,16 +31,21 @@ nav {
         list-style: none;
 
         li {
-            padding: 0 $spacing-small;
-
             font-weight: $font-weight-normal;
             font-size: $font-size-h6;
+            border-radius: $border-radius-circle;
 
             a {
+                padding: $spacing-xsmall $spacing-normal;
+                display: block;
                 text-decoration: none;
                 color: inherit;
             }
 
+            &:hover {
+                background-color: rgba($color-light, 0.05);
+            }
+
             &.active {
                 color: $color-primary !important;
             }
@@ -63,4 +68,11 @@ nav {
     &.scrolled {
         //box-shadow: 0 0 15px 1px $color-background;
     }
+
+    &.mobile {
+        ul {
+            width: 100%;
+            justify-content: space-around;
+        }
+    }
 }
\ No newline at end of file
diff --git a/front/src/styles/vars.scss b/front/src/styles/vars.scss
index cdbe1a6..4602718 100644
--- a/front/src/styles/vars.scss
+++ b/front/src/styles/vars.scss
@@ -25,6 +25,7 @@ $sizing-full-width: 1200px;
 $sizing-navigation-height: 55px;
 
 // PADDING/MARGIN
+$spacing-xsmall: 5px;
 $spacing-small: 10px;
 $spacing-normal: 16px;
 $spacing-large: 32px;
diff --git a/front/src/testData.js b/front/src/testData.js
index ea5ed23..23383f7 100644
--- a/front/src/testData.js
+++ b/front/src/testData.js
@@ -3,19 +3,19 @@
 let Items;
 export default Items = [
     {
-        name: "Breakfast",
+        name: "Bar of Soap",
         price: 69.99,
-        labels: ["vegan", "spicy",],
+        labels: ["vegan", "spicy"],
     },
     {
-        name: "Dinner",
+        name: "Sock",
         price: 21,
-        labels: ["vegan", "fish", "nut", "spicy",],
+        labels: ["vegan", "fish", "nut", "spicy"],
     },
     {
         name: "Brick",
         price: 0,
-        labels: ["spicy",],
+        labels: ["spicy"],
     },
     {
         name: "Toast",