diff --git a/front/src/App.svelte b/front/src/App.svelte
index f5f4997..79f9c18 100644
--- a/front/src/App.svelte
+++ b/front/src/App.svelte
@@ -15,9 +15,9 @@
         cart: {path: '/cart', className: 'active'},
     }
 
-    let cartLen = 0;
+    let cartItemCount = 0;
     Cart.subscribe(() => {
-        cartLen = Cart.getLength();
+        cartItemCount = Cart.getLength();
     });
 
     let scrollY = 0;
@@ -43,12 +43,22 @@
     }
 </script>
 
+
 <svelte:window
     bind:scrollY={scrollY}
     bind:innerWidth={width}
 />
 <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">
+    <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"
+    />
+    <link
+        rel="stylesheet"
+        href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+        integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+        crossorigin=""
+    />
 </svelte:head>
 
 
@@ -59,21 +69,17 @@
                 <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 class="nav-logo"><img src={Logo} alt="TastyBites"></span>
             <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&nbsp;{#if cartLen}({cartLen}){/if}
-                </a></li>
+                <li use:active={links.cart}><a href="/cart" use:link>Cart&nbsp;<span class="nav-basket">{cartItemCount}</span></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&nbsp;{#if cartLen}({cartLen}){/if}
-                </a></li>
+                <li use:active={links.cart}><a href="/cart" use:link>Cart&nbsp;<span class="nav-basket">{cartItemCount}</span></a></li>
             </ul>
         {/if}
     </nav>
diff --git a/front/src/pages/PageIndex.svelte b/front/src/pages/PageIndex.svelte
index 9b7a540..ed9a5e0 100644
--- a/front/src/pages/PageIndex.svelte
+++ b/front/src/pages/PageIndex.svelte
@@ -22,10 +22,6 @@
     });
 </script>
 
-<svelte:head>
-    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
-</svelte:head>
-
 <AnnouncementBanner />
 <a href="/annoucements" use:link>Learn More <ArrowUpRight /></a>
 <div class="spacer" />
diff --git a/front/src/styles/_navigation_bar.scss b/front/src/styles/_navigation_bar.scss
index b286242..480b48d 100644
--- a/front/src/styles/_navigation_bar.scss
+++ b/front/src/styles/_navigation_bar.scss
@@ -38,10 +38,31 @@ nav {
 
             a {
                 padding: $spacing-xsmall $spacing-normal;
-                display: block;
+
+                display: flex;
+                flex-direction: row;
+                justify-content: center;
+                align-items: center;
+
                 text-decoration: none;
                 text-shadow: 0 1px 0.5px rgba(#000, 0.8);
+
                 color: inherit;
+
+                .nav-basket {
+                    padding: 0 $spacing-xsmall;
+
+                    min-width: 17px;
+                    min-height: 17px;
+
+                    display: inline-block;
+
+                    font-size: $font-size-small;
+
+                    border-radius: $border-radius-circle;
+                    background-color: $color-light;
+                    color: $color-on-light;
+                }
             }
 
             &:hover {
@@ -50,11 +71,16 @@ nav {
 
             &.active {
                 color: $color-primary !important;
+
+                .nav-basket {
+                    background-color: $color-primary;
+                    color: $color-on-primary;
+                }
             }
         }
     }
 
-    span {
+    .nav-logo {
         padding: 0 $spacing-normal;
         font-weight: $font-weight-black;
         font-size: $font-size-h1;
@@ -64,7 +90,6 @@ nav {
 
             display: block;
         }
-
     }
 
     &.scrolled {