diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index 67f23cb..0412431 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -28,7 +28,7 @@ export function Layout({ user, children }: Props) {
           <p style={{ color: 'var(--text-muted)', fontSize: '0.72rem', marginTop: '0.2rem' }}>{user.name}</p>
         </div>
 
-        <div style={{ flex: 1, padding: '0.5rem 0', overflowY: 'auto' }}>
+        <div className="nav-scroll" style={{ flex: 1, padding: '0.5rem 0', overflowY: 'auto' }}>
           <NavItem to="/" icon={LayoutGrid} label="Grid" end />
           {user.is_admin && <NavItem to="/settings" icon={Settings} label="Settings" />}
         </div>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 45dd0ff..f7fd1d3 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -346,3 +346,18 @@ input, textarea, select { font-family: inherit; }
   cursor: pointer;
   padding: 2px;
 }
+
+/* Sidebar scrollbar */
+.nav-scroll::-webkit-scrollbar,
+.sidebar::-webkit-scrollbar,
+.sidebar-nav::-webkit-scrollbar { width: 4px; }
+.nav-scroll::-webkit-scrollbar-track,
+.sidebar::-webkit-scrollbar-track,
+.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
+.nav-scroll::-webkit-scrollbar-thumb,
+.sidebar::-webkit-scrollbar-thumb,
+.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(201,168,76,0.35); border-radius: 2px; }
+.nav-scroll::-webkit-scrollbar-thumb:hover,
+.sidebar::-webkit-scrollbar-thumb:hover,
+.sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(201,168,76,0.65); }
+.nav-scroll, .sidebar, .sidebar-nav { scrollbar-width: thin; scrollbar-color: rgba(201,168,76,0.35) transparent; }