diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 3f9390b..1b730b9 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -62,14 +62,17 @@ function Layout({ children }) {
             <span className="nav-label">Alerts</span>
           </NavLink>
           {me?.role === "admin" && (
-            <NavLink to="/admin/users" className={navClass}>
-              <span className="nav-icon" aria-hidden="true">
-                <svg viewBox="0 0 24 24">
-                  <path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm-7 8a7 7 0 0 1 14 0" />
-                </svg>
-              </span>
-              <span className="nav-label">Admin</span>
-            </NavLink>
+            <>
+              <div className="sidebar-nav-spacer" aria-hidden="true" />
+              <NavLink to="/admin/users" className={({ isActive }) => `nav-btn admin-nav${isActive ? " active" : ""}`}>
+                <span className="nav-icon" aria-hidden="true">
+                  <svg viewBox="0 0 24 24">
+                    <path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm-7 8a7 7 0 0 1 14 0" />
+                  </svg>
+                </span>
+                <span className="nav-label">Admin</span>
+              </NavLink>
+            </>
           )}
         </nav>
         <div className="profile">
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 9c8d07f..f523cfc 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -69,6 +69,13 @@ a {
   gap: 9px;
 }
 
+.sidebar-nav-spacer {
+  height: 12px;
+  margin: 2px 0 4px;
+  border-top: 1px solid #23406a;
+  opacity: 0.9;
+}
+
 .nav-btn {
   position: relative;
   display: flex;
@@ -107,6 +114,33 @@ a {
   background: linear-gradient(180deg, #74e8ff, #25bdf3);
 }
 
+.nav-btn.admin-nav {
+  border-color: #5b4da1;
+  background: linear-gradient(180deg, #1c2a58, #18224a);
+  color: #d8d5ff;
+}
+
+.nav-btn.admin-nav .nav-icon {
+  border-color: #7060c2;
+  background: linear-gradient(180deg, #2a2e66, #212854);
+}
+
+.nav-btn.admin-nav:hover {
+  border-color: #8b7ce0;
+  background: linear-gradient(180deg, #24316a, #1f2a5a);
+}
+
+.nav-btn.admin-nav.active {
+  border-color: #b9a7ff;
+  box-shadow: inset 0 0 0 1px #b9a7ff69, 0 8px 20px #1a143a8a;
+  background: linear-gradient(180deg, #332d73, #27235f);
+  color: #f4eeff;
+}
+
+.nav-btn.admin-nav.active::before {
+  background: linear-gradient(180deg, #ddd2ff, #b9a7ff);
+}
+
 .nav-icon {
   width: 28px;
   height: 28px;