diff --git a/Views/Shared/_Layout.cshtml b/Views/Shared/_Layout.cshtml
index 7d45007..ff1d1d1 100644
--- a/Views/Shared/_Layout.cshtml
+++ b/Views/Shared/_Layout.cshtml
@@ -5,38 +5,134 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>@ViewData["Title"] - ShipServicesApp</title>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
     <style>
         body { background-color: #f8fafc; }
-        .sidebar { min-height: 100vh; background: #22223b; }
-        .sidebar a { color: #fff; text-decoration: none; }
+        .sidebar { min-height: 100vh; background: #22223b; position: fixed; top: 0; left: 0; z-index: 1000; overflow-y: auto; }
+        .sidebar a { color: #fff; text-decoration: none; padding: 0.75rem 1rem; display: block; transition: all 0.3s; }
+        .sidebar .nav-link { border-radius: 0.375rem; margin: 0.25rem 0.5rem; }
+        .sidebar .nav-link i { margin-right: 0.75rem; width: 1.25rem; }
         .sidebar .nav-link.active, .sidebar .nav-link:hover { background: #4a4e69; color: #fff; }
-        .app-header { background: #4a4e69; color: #fff; padding: 1rem 2rem; font-size: 2rem; letter-spacing: 2px; }
-        .main-content { padding: 2rem; }
+        .sidebar .collapse-toggle { cursor: pointer; padding: 0.75rem 1rem; margin: 0.25rem 0.5rem; border-radius: 0.375rem; }
+        .sidebar .collapse-toggle:hover { background: #4a4e69; }
+        .sidebar .collapse-toggle i.bi-chevron-right { transition: transform 0.3s; }
+        .sidebar .collapse-toggle.collapsed i.bi-chevron-right { transform: rotate(0deg); }
+        .sidebar .collapse-toggle:not(.collapsed) i.bi-chevron-right { transform: rotate(90deg); }
+        .sidebar .submenu .nav-link { padding-left: 3rem; font-size: 0.9rem; }
+        .app-header { background: #4a4e69; color: #fff; padding: 1rem 2rem; font-size: 2rem; letter-spacing: 2px; position: sticky; top: 0; z-index: 1001; }
+        .main-content { padding: 2rem; margin-left: 16.666667%; }
+        .sidebar-toggle { display: none; position: fixed; top: 1rem; left: 1rem; z-index: 1002; background: #4a4e69; border: none; color: #fff; padding: 0.5rem; border-radius: 0.375rem; }
+        
+        @@media (max-width: 768px) {
+            .sidebar { left: -100%; transition: left 0.3s; }
+            .sidebar.show { left: 0; }
+            .sidebar-toggle { display: block; }
+            .main-content { margin-left: 0; }
+            .app-header { padding-left: 4rem; }
+        }
     </style>
 </head>
 <body>
+    <button class="sidebar-toggle" id="sidebarToggle" type="button" aria-label="Toggle navigation sidebar">
+        <i class="bi bi-list fs-4"></i>
+    </button>
+    
     <div class="app-header">Ship Services Management</div>
-    <div class="container-fluid">
-        <div class="row">
-            <nav class="col-md-2 d-none d-md-block sidebar py-3">
-                <div class="nav flex-column">
-                    <a class="nav-link @(ViewContext.RouteData.Values["controller"].ToString() == "Home" ? "active" : "")" asp-controller="Home" asp-action="Index">Home</a>
-                    <a class="nav-link @(ViewContext.RouteData.Values["controller"].ToString() == "ShipAgency" ? "active" : "")" asp-controller="ShipAgency" asp-action="Index">Ship Agencies</a>
-                    <a class="nav-link @(ViewContext.RouteData.Values["controller"].ToString() == "PortCaptaincy" ? "active" : "")" asp-controller="PortCaptaincy" asp-action="Index">Port Captaincy</a>
-                    <a class="nav-link @(ViewContext.RouteData.Values["controller"].ToString() == "CrewSupply" ? "active" : "")" asp-controller="CrewSupply" asp-action="Index">Emergency Crew / Repairs</a>
-                    <a class="nav-link @(ViewContext.RouteData.Values["controller"].ToString() == "SupplyServices" ? "active" : "")" asp-controller="SupplyServices" asp-action="Index">Supply Services</a>
-                    <a class="nav-link @(ViewContext.RouteData.Values["controller"].ToString() == "ShipRepairs" ? "active" : "")" asp-controller="ShipRepairs" asp-action="Index">Ship Repairs</a>
-                    <a class="nav-link @(ViewContext.RouteData.Values["controller"].ToString() == "Customs" ? "active" : "")" asp-controller="Customs" asp-action="Index">Customs Clearance</a>
-                    <a class="nav-link @(ViewContext.RouteData.Values["controller"].ToString() == "UnderwaterServices" ? "active" : "")" asp-controller="UnderwaterServices" asp-action="Index">Underwater/Diving</a>
-                    <a class="nav-link @(ViewContext.RouteData.Values["controller"].ToString() == "Husbanding" ? "active" : "")" asp-controller="Husbanding" asp-action="Index">Husbanding</a>
-                    <a class="nav-link @(ViewContext.RouteData.Values["controller"].ToString() == "TankCleaning" ? "active" : "")" asp-controller="TankCleaning" asp-action="Index">Tank Cleaning</a>
-                </div>
-            </nav>
-            <main class="col-md-10 ms-sm-auto main-content">
-                @RenderBody()
-            </main>
+    
+    <nav class="col-md-2 sidebar py-3" id="sidebar" aria-label="Main navigation">
+        <div class="nav flex-column">
+            <!-- Home -->
+            <a class="nav-link @(ViewContext.RouteData.Values["controller"].ToString() == "Home" ? "active" : "")" asp-controller="Home" asp-action="Index">
+                <i class="bi bi-house-door-fill"></i>Home
+            </a>
+            
+            <!-- Main Services -->
+            <a class="nav-link @(ViewContext.RouteData.Values["controller"].ToString() == "ShipAgency" ? "active" : "")" asp-controller="ShipAgency" asp-action="Index">
+                <i class="bi bi-ship"></i>Ship Agencies
+            </a>
+            
+            <a class="nav-link @(ViewContext.RouteData.Values["controller"].ToString() == "PortCaptaincy" ? "active" : "")" asp-controller="PortCaptaincy" asp-action="Index">
+                <i class="bi bi-geo-alt-fill"></i>Port Captaincy
+            </a>
+            
+            <a class="nav-link @(ViewContext.RouteData.Values["controller"].ToString() == "CrewSupply" ? "active" : "")" asp-controller="CrewSupply" asp-action="Index">
+                <i class="bi bi-person-fill-gear"></i>Emergency Crew / Repairs
+            </a>
+            
+            <!-- Supply & Maintenance Group -->
+            <div class="collapse-toggle collapsed" data-bs-toggle="collapse" data-bs-target="#supplyGroup" aria-expanded="false" aria-controls="supplyGroup">
+                <i class="bi bi-chevron-right"></i>
+                <i class="bi bi-box-seam-fill"></i>Supply & Maintenance
+            </div>
+            <div class="collapse submenu" id="supplyGroup">
+                <a class="nav-link @(ViewContext.RouteData.Values["controller"].ToString() == "SupplyServices" ? "active" : "")" asp-controller="SupplyServices" asp-action="Index">
+                    <i class="bi bi-droplet-fill"></i>Supply Services
+                </a>
+                <a class="nav-link @(ViewContext.RouteData.Values["controller"].ToString() == "ShipRepairs" ? "active" : "")" asp-controller="ShipRepairs" asp-action="Index">
+                    <i class="bi bi-tools"></i>Ship Repairs
+                </a>
+            </div>
+            
+            <!-- Operations Group -->
+            <div class="collapse-toggle collapsed" data-bs-toggle="collapse" data-bs-target="#operationsGroup" aria-expanded="false" aria-controls="operationsGroup">
+                <i class="bi bi-chevron-right"></i>
+                <i class="bi bi-gear-fill"></i>Operations
+            </div>
+            <div class="collapse submenu" id="operationsGroup">
+                <a class="nav-link @(ViewContext.RouteData.Values["controller"].ToString() == "Customs" ? "active" : "")" asp-controller="Customs" asp-action="Index">
+                    <i class="bi bi-file-earmark-check-fill"></i>Customs Clearance
+                </a>
+                <a class="nav-link @(ViewContext.RouteData.Values["controller"].ToString() == "UnderwaterServices" ? "active" : "")" asp-controller="UnderwaterServices" asp-action="Index">
+                    <i class="bi bi-water"></i>Underwater/Diving
+                </a>
+                <a class="nav-link @(ViewContext.RouteData.Values["controller"].ToString() == "Husbanding" ? "active" : "")" asp-controller="Husbanding" asp-action="Index">
+                    <i class="bi bi-clipboard-data-fill"></i>Husbanding
+                </a>
+                <a class="nav-link @(ViewContext.RouteData.Values["controller"].ToString() == "TankCleaning" ? "active" : "")" asp-controller="TankCleaning" asp-action="Index">
+                    <i class="bi bi-droplet-half"></i>Tank Cleaning
+                </a>
+            </div>
         </div>
-    </div>
+    </nav>
+    
+    <main class="main-content">
+        @RenderBody()
+    </main>
+    
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+    <script>
+        // Mobile sidebar toggle
+        document.getElementById('sidebarToggle').addEventListener('click', function() {
+            document.getElementById('sidebar').classList.toggle('show');
+        });
+        
+        // Close sidebar when clicking outside on mobile
+        document.addEventListener('click', function(event) {
+            const sidebar = document.getElementById('sidebar');
+            const toggle = document.getElementById('sidebarToggle');
+            if (window.innerWidth <= 768 && 
+                !sidebar.contains(event.target) && 
+                !toggle.contains(event.target) &&
+                sidebar.classList.contains('show')) {
+                sidebar.classList.remove('show');
+            }
+        });
+        
+        // Auto-expand active section
+        window.addEventListener('DOMContentLoaded', function() {
+            const activeLink = document.querySelector('.sidebar .nav-link.active');
+            if (activeLink) {
+                const collapse = activeLink.closest('.collapse');
+                if (collapse) {
+                    const bsCollapse = new bootstrap.Collapse(collapse, { toggle: false });
+                    bsCollapse.show();
+                    const toggle = document.querySelector('[data-bs-target="#' + collapse.id + '"]');
+                    if (toggle) {
+                        toggle.classList.remove('collapsed');
+                    }
+                }
+            }
+        });
+    </script>
 </body>
 </html>
\ No newline at end of file
