diff --git a/src/index.html b/src/index.html
index 7969ce61..9a2874e2 100644
--- a/src/index.html
+++ b/src/index.html
@@ -2,135 +2,173 @@
 <html lang="en">
 
   <head>
-    <!--Site Information-->
+    <!--Site Meta Information-->
     <meta charset="UTF-8" />
     <title>Sweet Avenue POS</title>
     <!--Mobile Specific Metas-->
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />   
     <!--CSS-->
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="css/main.css" />   
     <!--Site Icon-->
     <link rel="icon" href="images/sweet-avenue-logo.png" type="image/png"/>
   </head>
 
-  <body class="bg-timberwolf">
+  <body>
 
-    <!--Header-->
-    <div class="navbar navbar-expand bg-rose-white shadow-sm">
-      <div class="container-fluid">
-        <div class="row align-items-center">
+    <!--Main Container-->
+    <div class="container-fluid px-0 bg-timberwolf">
+
+      <!--Header-->
+      <div class="navbar shadow-sm sticky-top bg-rose-white">
+        <div class="row align-items-center justify-content-between">
           <div class="col-auto pe-0">
-            <a class="ps-2 navbar-brand" href="#">
+
+            <!--Logo brand-->
+            <a class="ps-4 navbar-brand" href="#">
               <img class="m-1" src="images/sweet-avenue-logo.png" alt="Sweet Avenue Logo" width="70" height="70">
             </a>
           </div>
-          <div class="col ps-0">
-            <h3 class="mb-0 text-tiger-orange"><dt><strong>SWEET AVENUE</strong></dt></h3>
-            <h5 class="text-tiger-orange"><dt><strong>COFFEE • BAKESHOP</strong></dt></h5>
+
+          <!--Shop's name-->
+          <div class="col ps-0 text-tiger-orange">
+            <h3 class="mb-0 fw-bold"><strong>SWEET AVENUE</strong></h3>
+            <h5 class="fw-bold"><strong>COFFEE • BAKESHOP</strong></h5>
+
+            <!--Hamburger/Toggle icon for smaller screens-->
+            <div class="col-auto position-absolute top-50 end-0 translate-middle-y pe-4">
+              <button class="navbar-toggler d-lg-none" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarContent" aria-controls="sidebarContent" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+              </button>
+            </div>
+            
           </div>
         </div>
       </div>
-    </div>
-    <!--End of Header-->
-
-
-    <!--Sidebar-->
-    <div class="d-flex flex-column">
-      <div class="row min-vh-100">
-        <div class="col-xl-1 col-lg-1 col-md-2 bg-rose-white d-flex flex-wrap flex-column mx-2 shadow-sm">
-          <div class="align-items-center nav-underline">
-
-            <!--Sidebar Contents-->
-            <!--Home-->
-            <div class="pt-4 row">
-              <div class="col-12 text-center">
-                <a class="nav-link" href="#"> 
-                  <img src="icons/house-door.svg" width="24" height="24" alt="home-icon">
-                  <div>Home</div>
-                </a>
-              </div>
-            </div>
-            
-            <!--Transaction-->
-            <div class="pt-3 row">
-              <div class="col-12 text-center">
-                <a class="nav-link" href="#">
-                  <img src="icons/cart-plus.svg" width="24" height="24" alt="transaction-icon">
-                  <div>Transaction</div>
-                </a>
-              </div>
-            </div>
+      <!--End of Header-->
 
-            <!--Sales-->
-            <div class="pt-3 row">
-              <div class="col-12 text-center">
-                <a class="nav-link" href="#">
-                  <img src="icons/cash-stack.svg" width="24" height="24" alt="sales-icon">
-                  <div>Sales</div>
-                </a>
-              </div>
-            </div>
+      <div class="container-fluid px-0">
+        <div class="overflow-hidden flex-column">
+          <div class="row overflow-y-auto" style="height: calc(100vh - 94px);">
 
-            <!--Products-->
-            <div class="pt-3 row">
-              <div class="col-12 text-center">
-                <a class="nav-link" href="#">
-                  <img src="icons/cup.svg" width="24" height="24" alt="products-icon">
-                  <div>Products</div>
-                </a>
-              </div>
-            </div>
+            <!--Sidebar-->
+            <div id="sidebarContent" class="fw-semibold text-muted navbar nav-underline col-xl-1 col-lg-2 col-md-2 col-sm-4 d-lg-flex flex-wrap flex-column shadow-sm bg-rose-white mx-2 collapse">
+                <!--Home-->
+                <div class="pt-4 row">
+                  <div class="col-12 text-center">
+                    <a class="nav-link" href="#"> 
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-house-door" viewBox="0 0 16 16">
+                        <path d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4z"/>
+                      </svg>
+                      <div class="pt-1">Home</div>
+                    </a>
+                  </div>
+                </div>
+                
+                <!--Transaction-->
+                <div class="pt-1 row">
+                  <div class="col-12 text-center">
+                    <a class="nav-link" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-cart-plus" viewBox="0 0 16 16">
+                        <path d="M9 5.5a.5.5 0 0 0-1 0V7H6.5a.5.5 0 0 0 0 1H8v1.5a.5.5 0 0 0 1 0V8h1.5a.5.5 0 0 0 0-1H9z"/>
+                        <path d="M.5 1a.5.5 0 0 0 0 1h1.11l.401 1.607 1.498 7.985A.5.5 0 0 0 4 12h1a2 2 0 1 0 0 4 2 2 0 0 0 0-4h7a2 2 0 1 0 0 4 2 2 0 0 0 0-4h1a.5.5 0 0 0 .491-.408l1.5-8A.5.5 0 0 0 14.5 3H2.89l-.405-1.621A.5.5 0 0 0 2 1zm3.915 10L3.102 4h10.796l-1.313 7zM6 14a1 1 0 1 1-2 0 1 1 0 0 1 2 0m7 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/>
+                      </svg>
+                      <div class="pt-1">Transact</div>
+                    </a>
+                  </div>
+                </div>
 
-            <!--Reports-->
-            <div class="pt-3 row">
-              <div class="col-12 text-center">
-                <a class="nav-link" href="#">
-                  <img src="icons/clipboard2-data.svg" width="24" height="24" alt="reports-icon">
-                  <div>Reports</div>
-                </a>
-              </div>
-            </div>
+                <!--Sales-->
+                <div class="pt-1 row">
+                  <div class="col-12 text-center">
+                    <a class="nav-link" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-cash-stack" viewBox="0 0 16 16">
+                        <path d="M1 3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1zm7 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4"/>
+                        <path d="M0 5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1zm3 0a2 2 0 0 1-2 2v4a2 2 0 0 1 2 2h10a2 2 0 0 1 2-2V7a2 2 0 0 1-2-2z"/>
+                      </svg>
+                      <div class="pt-1">Sales</div>
+                    </a>
+                  </div>
+                </div>
 
-            <!--Accounts-->
-            <div class="pt-3 row">
-              <div class="col-12 text-center">
-                <a class="nav-link" href="#">
-                  <img src="icons/people.svg" width="24" height="24" alt="accounts-icon">
-                  <div>Accounts</div>
-                </a>
-              </div>
-            </div>
-          </div>  
-
-            <div class="mt-auto">
-              <!--Sign-in User-->
-              <div class="row">
-                <div class="col-12 text-center">
-                  <a class="nav-link" href="#">
-                    <img src="images/sweet-avenue-logo.png" width="35" height="35" alt="user-image">
-                    <div>Admin</div>
-                  </a>
+                <!--Products-->
+                <div class="pt-1 row">
+                  <div class="col-12 text-center">
+                    <a class="nav-link" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-cup" viewBox="0 0 16 16">
+                        <path fill-rule="evenodd" d="M.11 3.187A.5.5 0 0 1 .5 3h13a.5.5 0 0 1 .488.608l-.22.991a3.001 3.001 0 0 1-1.3 5.854l-.132.59A2.5 2.5 0 0 1 9.896 13H4.104a2.5 2.5 0 0 1-2.44-1.958L.012 3.608a.5.5 0 0 1 .098-.42Zm12.574 6.288a2 2 0 0 0 .866-3.899zM1.124 4l1.516 6.825A1.5 1.5 0 0 0 4.104 12h5.792a1.5 1.5 0 0 0 1.464-1.175L12.877 4H1.123Z"/>
+                      </svg>
+                      <div class="pt-1">Products</div>
+                    </a>
+                  </div>
+                </div>
+
+                <!--Reports-->
+                <div class="pt-1 row">
+                  <div class="col-12 text-center">
+                    <a class="nav-link" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-clipboard2-data" viewBox="0 0 16 16">
+                        <path d="M9.5 0a.5.5 0 0 1 .5.5.5.5 0 0 0 .5.5.5.5 0 0 1 .5.5V2a.5.5 0 0 1-.5.5h-5A.5.5 0 0 1 5 2v-.5a.5.5 0 0 1 .5-.5.5.5 0 0 0 .5-.5.5.5 0 0 1 .5-.5z"/>
+                        <path d="M3 2.5a.5.5 0 0 1 .5-.5H4a.5.5 0 0 0 0-1h-.5A1.5 1.5 0 0 0 2 2.5v12A1.5 1.5 0 0 0 3.5 16h9a1.5 1.5 0 0 0 1.5-1.5v-12A1.5 1.5 0 0 0 12.5 1H12a.5.5 0 0 0 0 1h.5a.5.5 0 0 1 .5.5v12a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5z"/>
+                        <path d="M10 7a1 1 0 1 1 2 0v5a1 1 0 1 1-2 0zm-6 4a1 1 0 1 1 2 0v1a1 1 0 1 1-2 0zm4-3a1 1 0 0 0-1 1v3a1 1 0 1 0 2 0V9a1 1 0 0 0-1-1"/>
+                      </svg>
+                      <div class="pt-1">Reports</div>
+                    </a>
+                  </div>
                 </div>
-              </div>
-
-              <!--Logout button-->
-              <div class="pt-3 row">
-                <div class="col-12 text-center">
-                  <a class="nav-link" href="#">
-                    <img src="icons/box-arrow-in-left.svg" width="24" height="24" alt="logout-icon">
-                    <div>Logout</div>
-                  </a>
+
+                <!--Accounts-->
+                <div class="pt-1 row">
+                  <div class="col-12 text-center">
+                    <a class="nav-link" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-people" viewBox="0 0 16 16">
+                        <path d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1zm-7.978-1L7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002-.014.002zM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4m3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0M6.936 9.28a6 6 0 0 0-1.23-.247A7 7 0 0 0 5 9c-4 0-5 3-5 4q0 1 1 1h4.216A2.24 2.24 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816M4.92 10A5.5 5.5 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275ZM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0m3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4"/>
+                      </svg>
+                      <div class="pt-1">Accounts</div>
+                    </a>
+                  </div>
+                </div>
+
+              <!--Last two elements-->
+              <div class="mt-auto mb-4">
+                <!--Sign-in User-->
+                <div class="pt-4 row">
+                  <div class="col-12 text-center">
+                    <a class="nav-link" href="#">
+                      <img src="images/sweet-avenue-logo.png" width="35" height="35" alt="user-image">
+                      <div class="pt-1">Admin</div>
+                    </a>
+                  </div>
                 </div>
-              </div>
+
+                <!--Logout button-->
+                <div class="pt-3 row">
+                  <div class="col-12 text-center">
+                    <a class="nav-link" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-box-arrow-in-left" viewBox="0 0 16 16">
+                        <path fill-rule="evenodd" d="M10 3.5a.5.5 0 0 0-.5-.5h-8a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 1 1 0v2A1.5 1.5 0 0 1 9.5 14h-8A1.5 1.5 0 0 1 0 12.5v-9A1.5 1.5 0 0 1 1.5 2h8A1.5 1.5 0 0 1 11 3.5v2a.5.5 0 0 1-1 0z"/>
+                        <path fill-rule="evenodd" d="M4.146 8.354a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H14.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708z"/>
+                      </svg>
+                      <div class="pt-1">Logout</div>
+                    </a>
+                  </div>
+                </div>
+              </div> 
             </div>
-            <!--End of Sidebar Contents-->
-            
+            <!--End of Sidebar-->
+
+            <!--Main Content-->
+            <div class="col">
+              <!-- Content goes here -->
+            </div>
+
           </div>
-        </div>
+        </div>   
       </div>
     </div>
-    <!--End of Sidebar-->
 
+    <!--Bootstrap JavaScript-->
     <script src="../vendor/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+
   </body>
 </html>
