diff --git a/Aaru.Server/Components/Layout/MainLayout.razor b/Aaru.Server/Components/Layout/MainLayout.razor
index 31b665fb..75a778c4 100644
--- a/Aaru.Server/Components/Layout/MainLayout.razor
+++ b/Aaru.Server/Components/Layout/MainLayout.razor
@@ -1,8 +1,11 @@
 @inherits LayoutComponentBase
 
+
 <div class="page">
-    <div class="sidebar">
-        <NavMenu/>
+    <input id="layout-navbar-toggler" class="navbar-toggler" title="Navigation menu" type="checkbox" />
+    <label for="layout-navbar-toggler" class="navbar-toggler-label" aria-label="Toggle navigation"></label>
+    <div class="sidebar" id="sidebar-container">
+        <NavMenu />
     </div>
 
     <main>
diff --git a/Aaru.Server/Components/Layout/MainLayout.razor.css b/Aaru.Server/Components/Layout/MainLayout.razor.css
index ccc291cc..bc6c82c2 100644
--- a/Aaru.Server/Components/Layout/MainLayout.razor.css
+++ b/Aaru.Server/Components/Layout/MainLayout.razor.css
@@ -1,3 +1,330 @@
+.navbar.top-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 3.5rem;
+  padding: 0 1rem;
+  position: relative;
+}
+
+.navbar-toggler-label {
+  display: none;
+  width: 3.5rem;
+  height: 2.5rem;
+  cursor: pointer;
+  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.55)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  z-index: 1100;
+  margin: 0;
+}
+
+.navbar.top-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  height: 3.5rem;
+  padding: 0 1rem;
+}
+
+.navbar-toggler-label {
+  display: none;
+  position: absolute;
+  left: 1rem;
+  top: 0.5rem;
+  width: 3.5rem;
+  height: 2.5rem;
+  cursor: pointer;
+  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.55)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  z-index: 1100;
+}
+
+.navbar .navbar-brand {
+  color: #fff;
+  font-size: 1.3rem;
+  text-decoration: none;
+  margin-left: auto;
+}
+
+.navbar-toggler {
+  display: none;
+}
+
+@media (max-width: 640px) {
+  .navbar-toggler-label {
+    display: block;
+  }
+
+  .sidebar {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 80vw;
+    max-width: 350px;
+    height: 100vh;
+    z-index: 1000;
+    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
+    background: #23222a;
+    transition: transform 0.2s ease;
+  }
+
+  #layout-navbar-toggler:checked + .navbar-toggler-label + .sidebar {
+    display: block;
+  }
+}
+
+@media (min-width: 641px) {
+  .navbar-toggler-label {
+    display: none !important;
+  }
+
+  .sidebar {
+    display: block;
+    position: sticky;
+    top: 0;
+    width: 350px;
+    height: 100vh;
+    z-index: 1;
+    box-shadow: none;
+    background: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
+  }
+}
+
+.navbar.top-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  height: 3.5rem;
+  padding: 0 1rem;
+}
+
+.navbar-toggler-label {
+  display: none;
+  width: 3.5rem;
+  height: 2.5rem;
+  cursor: pointer;
+  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.55)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  z-index: 1100;
+  margin-right: 0.5rem;
+}
+
+.navbar .navbar-brand {
+  color: #fff;
+  font-size: 1.3rem;
+  text-decoration: none;
+  margin-left: auto;
+}
+
+.navbar-toggler {
+  display: none;
+}
+
+@media (max-width: 640px) {
+  .navbar-toggler-label {
+    display: block;
+  }
+
+  .navbar .navbar-brand {
+    margin-left: auto;
+  }
+
+  .sidebar {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 80vw;
+    max-width: 350px;
+    height: 100vh;
+    z-index: 1000;
+    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
+    background: #23222a;
+    transition: transform 0.2s ease;
+  }
+
+  .navbar-toggler:checked ~ .nav-scrollable,
+  .navbar-toggler:checked ~ nav,
+  .navbar-toggler:checked ~ .sidebar {
+    display: block;
+  }
+}
+
+@media (min-width: 641px) {
+  .navbar-toggler-label {
+    display: none !important;
+  }
+
+  .sidebar {
+    display: block;
+    position: sticky;
+    top: 0;
+    width: 350px;
+    height: 100vh;
+    z-index: 1;
+    box-shadow: none;
+    background: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
+  }
+}
+
+/* Hamburger toggler and Aaru title alignment in sidebar top row */
+.navbar.top-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 3.5rem;
+  padding: 0 1rem;
+}
+
+.navbar-toggler-label {
+  display: none;
+  position: static;
+  width: 3.5rem;
+  height: 2.5rem;
+  cursor: pointer;
+  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.55)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  z-index: 1100;
+}
+
+.navbar .navbar-brand {
+  margin-left: auto;
+  color: #fff;
+  font-size: 1.3rem;
+  text-decoration: none;
+}
+
+.navbar-toggler {
+  display: none;
+}
+
+@media (max-width: 640px) {
+  .navbar-toggler-label {
+    display: block;
+  }
+
+  .navbar .navbar-brand {
+    margin-left: auto;
+  }
+}
+
+}
+@media (min-width: 641px) {
+  .navbar-toggler-label {
+    display: none !important;
+  }
+}
+
+/* Remove .aaru-title-bar styles, and ensure .navbar-brand is right-aligned in sidebar */
+.navbar .navbar-brand {
+  margin-left: auto;
+  color: #fff;
+  font-size: 1.3rem;
+  text-decoration: none;
+}
+
+/* Aaru title bar styles */
+.aaru-title-bar {
+  position: fixed;
+  left: 0;
+  top: 0;
+  height: 3.5rem;
+  display: flex;
+  align-items: center;
+  z-index: 1050;
+  width: 100vw;
+  background: rgba(35, 34, 42, 0.95);
+  border-bottom: 1px solid #44434a;
+  padding-left: 4.5rem;
+}
+
+.aaru-title-bar .navbar-brand {
+  font-size: 1.3rem;
+  color: #fff;
+  text-decoration: none;
+}
+
+@media (min-width: 641px) {
+  .aaru-title-bar {
+    left: 350px;
+    width: calc(100vw - 350px);
+    padding-left: 2rem;
+    background: transparent;
+    color: #23222a;
+    border-bottom: none;
+  }
+
+  .aaru-title-bar .navbar-brand {
+    color: #23222a;
+  }
+}
+
+/* Hamburger menu for mobile */
+.navbar-toggler-label {
+  display: none;
+  position: fixed;
+  left: 1rem;
+  width: 3.5rem;
+  height: 2.5rem;
+  cursor: pointer;
+  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.55)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  z-index: 1100;
+}
+
+.navbar-toggler {
+  display: none;
+}
+
+@media (max-width: 640px) {
+  .navbar-toggler-label {
+    display: block;
+  }
+
+  .sidebar {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 80vw;
+    max-width: 350px;
+    height: 100vh;
+    z-index: 1000;
+    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
+    background: #23222a;
+    transition: transform 0.2s ease;
+  }
+
+  .navbar-toggler:checked ~ .sidebar {
+    display: block;
+  }
+}
+
+@media (min-width: 641px) {
+  .navbar-toggler-label {
+    display: none;
+  }
+
+  .sidebar {
+    display: block;
+    position: sticky;
+    top: 0;
+    width: 350px;
+    height: 100vh;
+    z-index: 1;
+    box-shadow: none;
+    background: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
+  }
+}
+
 .page {
   position: relative;
   display: flex;
diff --git a/Aaru.Server/Components/Layout/NavMenu.razor b/Aaru.Server/Components/Layout/NavMenu.razor
index 7cc131de..0d5bfefd 100644
--- a/Aaru.Server/Components/Layout/NavMenu.razor
+++ b/Aaru.Server/Components/Layout/NavMenu.razor
@@ -4,67 +4,66 @@
 @inject IWebHostEnvironment HostEnvironment
 @inject IConfiguration      Configuration
 
-<div class="navbar navbar-dark ps-3 top-row">
-    <div class="container-fluid">
+<div class="navmenu-container">
+    <div class="navbar navbar-dark ps-3 top-row" style="display: flex; align-items: center; justify-content: flex-end;">
         <a class="navbar-brand" href="">Aaru</a>
     </div>
-</div>
+    <!-- Hamburger toggler moved to MainLayout.razor -->
+    <div class="nav-scrollable">
+        <nav class="flex-column">
+            <div class="nav-item px-3">
+                <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
+                    <span aria-hidden="true" class="bi bi-house-door-fill-nav-menu"></span> Home
+                </NavLink>
+            </div>
 
-<input class="navbar-toggler" title="Navigation menu" type="checkbox"/>
+            <div class="nav-item px-3">
+                <NavLink class="nav-link" href="Stats">
+                    <span aria-hidden="true" class="bi bi-graph-up-nav-menu"></span> Statistics
+                </NavLink>
+            </div>
 
-<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
-    <nav class="flex-column">
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
-                <span aria-hidden="true" class="bi bi-house-door-fill-nav-menu"></span> Home
-            </NavLink>
-        </div>
+            <div class="nav-item px-3 sidebar-nav">
+                @((MarkupString)_sidebarMarkup)
+            </div>
 
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="Stats">
-                <span aria-hidden="true" class="bi bi-graph-up-nav-menu"></span> Statistics
-            </NavLink>
-        </div>
+            <div class="nav-item px-3">
+                <NavLink class="nav-link" href="auth">
+                    <span aria-hidden="true" class="bi bi-lock-nav-menu"></span> Auth Required
+                </NavLink>
+            </div>
 
-        <div class="nav-item px-3 sidebar-nav">
-            @((MarkupString)_sidebarMarkup)
-        </div>
-
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="auth">
-                <span aria-hidden="true" class="bi bi-lock-nav-menu"></span> Auth Required
-            </NavLink>
-        </div>
-
-        <AuthorizeView>
-            <Authorized>
-                <div class="nav-item px-3">
-                    <NavLink class="nav-link" href="Account/Manage">
-                        <span aria-hidden="true" class="bi bi-person-fill-nav-menu"></span> @context.User.Identity?.Name
-                    </NavLink>
-                </div>
-                <div class="nav-item px-3">
-                    <form action="Account/Logout" method="post">
-                        <AntiforgeryToken/>
-                        <input name="ReturnUrl" type="hidden" value="@_currentUrl"/>
-                        <button class="nav-link" type="submit">
-                            <span aria-hidden="true" class="bi bi-arrow-bar-left-nav-menu"></span> Logout
-                        </button>
-                    </form>
-                </div>
-            </Authorized>
-            <NotAuthorized>
-                <div class="nav-item px-3">
-                    <NavLink class="nav-link" href="Account/Register">
-                        <span aria-hidden="true" class="bi bi-person-nav-menu"></span> Register
-                    </NavLink>
-                </div>
-                <div class="nav-item px-3">
-                    <NavLink class="nav-link" href="Account/Login">
-                        <span aria-hidden="true" class="bi bi-person-badge-nav-menu"></span> Login
-                    </NavLink>
-                </div>
-            </NotAuthorized>
-        </AuthorizeView>
-    </nav>
+            <AuthorizeView>
+                <Authorized>
+                    <div class="nav-item px-3">
+                        <NavLink class="nav-link" href="Account/Manage">
+                            <span aria-hidden="true"
+                                  class="bi bi-person-fill-nav-menu"></span> @context.User.Identity?.Name
+                        </NavLink>
+                    </div>
+                    <div class="nav-item px-3">
+                        <form action="Account/Logout" method="post">
+                            <AntiforgeryToken />
+                            <input name="ReturnUrl" type="hidden" value="@_currentUrl" />
+                            <button class="nav-link" type="submit">
+                                <span aria-hidden="true" class="bi bi-arrow-bar-left-nav-menu"></span> Logout
+                            </button>
+                        </form>
+                    </div>
+                </Authorized>
+                <NotAuthorized>
+                    <div class="nav-item px-3">
+                        <NavLink class="nav-link" href="Account/Register">
+                            <span aria-hidden="true" class="bi bi-person-nav-menu"></span> Register
+                        </NavLink>
+                    </div>
+                    <div class="nav-item px-3">
+                        <NavLink class="nav-link" href="Account/Login">
+                            <span aria-hidden="true" class="bi bi-person-badge-nav-menu"></span> Login
+                        </NavLink>
+                    </div>
+                </NotAuthorized>
+            </AuthorizeView>
+        </nav>
+    </div>
 </div>
\ No newline at end of file
diff --git a/Aaru.Server/Components/Layout/NavMenu.razor.css b/Aaru.Server/Components/Layout/NavMenu.razor.css
index 203d235d..31495f1d 100644
--- a/Aaru.Server/Components/Layout/NavMenu.razor.css
+++ b/Aaru.Server/Components/Layout/NavMenu.razor.css
@@ -1,3 +1,23 @@
+.navbar-toggler-label {
+  display: block;
+  position: absolute;
+  top: 0.5rem;
+  right: 1rem;
+  width: 3.5rem;
+  height: 2.5rem;
+  cursor: pointer;
+  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.55)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  z-index: 10;
+}
+
+@media (min-width: 641px) {
+  .navbar-toggler-label {
+    display: none;
+  }
+}
+
 .navbar-toggler {
   appearance: none;
   cursor: pointer;
@@ -84,7 +104,7 @@
 }
 
 .nav-item ::deep .nav-link {
-  color: #d7d7d7;
+  color: rgb(195, 39, 39) !important;
   background: none;
   border: none;
   border-radius: 4px;
@@ -93,6 +113,8 @@
   align-items: center;
   line-height: 3rem;
   width: 100%;
+  font-weight: bold;
+  text-decoration: none !important;
 }
 
 .nav-item ::deep a.active {
@@ -105,25 +127,5 @@
   color: white;
 }
 
-.nav-scrollable {
-  display: none;
-}
 
-.navbar-toggler:checked ~ .nav-scrollable {
-  display: block;
-}
 
-@media (min-width: 641px) {
-  .navbar-toggler {
-    display: none;
-  }
-
-  .nav-scrollable {
-    /* Never collapse the sidebar for wide screens */
-    display: block;
-
-    /* Allow sidebar to scroll for tall menus */
-    height: calc(100vh - 3.5rem);
-    overflow-y: auto;
-  }
-}