diff --git a/dashboard/web/src/components/sidebar-nav.tsx b/dashboard/web/src/components/sidebar-nav.tsx
new file mode 100644
index 0000000..01edff6
--- /dev/null
+++ b/dashboard/web/src/components/sidebar-nav.tsx
@@ -0,0 +1,152 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import { usePathname, useRouter } from 'next/navigation';
+import {
+  LayoutDashboard,
+  Activity,
+  BarChart3,
+  Cpu,
+  Key,
+  Code2,
+  Settings,
+  LogOut,
+  Menu,
+  X,
+  Sun,
+  Moon,
+  HeartPulse,
+} from 'lucide-react';
+import { useAuth } from '@/lib/auth';
+
+const navItems = [
+  { href: '/', label: 'Dashboard', icon: LayoutDashboard },
+  { href: '/health', label: 'Health', icon: HeartPulse },
+  { href: '/metrics', label: 'Metrics', icon: BarChart3 },
+  { href: '/system', label: 'System', icon: Cpu },
+  { href: '/env', label: 'Environment', icon: Key },
+  { href: '/code-quality', label: 'Code Quality', icon: Code2 },
+  { href: '/settings/cosmos', label: 'Settings', icon: Settings },
+];
+
+export function SidebarNav() {
+  const pathname = usePathname();
+  const router = useRouter();
+  const { user, logout } = useAuth();
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const [theme, setTheme] = useState('light');
+
+  const handleLogout = () => {
+    logout();
+    router.push('/login');
+  };
+
+  const initials = user?.email
+    ? user.email.slice(0, 2).toUpperCase()
+    : '??';
+
+  const sidebarContent = (
+    <>
+      {/* Logo */}
+      <div className="flex h-16 items-center justify-between border-b px-6">
+        <div className="flex items-center gap-2">
+          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-blue-600">
+            <LayoutDashboard className="h-4 w-4 text-white" />
+          </div>
+          <div>
+            <h1 className="text-sm font-bold">DevOps</h1>
+            <p className="text-[10px] text-gray-500">Dashboard</p>
+          </div>
+        </div>
+        {/* Mobile close button */}
+        <button
+          className="md:hidden text-gray-500 hover:text-gray-700"
+          onClick={() => setMobileOpen(false)}
+        >
+          <X className="h-5 w-5" />
+        </button>
+      </div>
+
+      {/* Navigation */}
+      <nav className="flex-1 space-y-1 px-3 py-4">
+        {navItems.map(item => {
+          const isActive = pathname === item.href ||
+            (item.href !== '/' && pathname.startsWith(item.href));
+          return (
+            <Link
+              key={item.href}
+              href={item.href}
+              onClick={() => setMobileOpen(false)}
+              className={`flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors ${
+                isActive
+                  ? 'bg-blue-600 text-white'
+                  : 'text-gray-700 hover:bg-gray-100'
+              }`}
+            >
+              <item.icon className="h-4 w-4" />
+              <span>{item.label}</span>
+            </Link>
+          );
+        })}
+      </nav>
+
+      {/* Footer — theme toggle + user info + logout */}
+      <div className="border-t p-4 space-y-3">
+        <button
+          onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+          className="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors"
+        >
+          {theme === 'dark' ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
+          {theme === 'dark' ? 'Light Mode' : 'Dark Mode'}
+        </button>
+        <div className="flex items-center gap-3">
+          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-gray-200 text-xs font-bold text-gray-700">
+            {initials}
+          </div>
+          <div className="flex-1 min-w-0">
+            <p className="text-sm font-medium truncate text-gray-900">{user?.email ?? 'Admin'}</p>
+            <p className="text-xs text-gray-500 truncate">{user?.role ?? 'admin'}</p>
+          </div>
+          <button
+            onClick={handleLogout}
+            title="Sign out"
+            aria-label="Sign out"
+            className="text-gray-500 hover:text-gray-700"
+          >
+            <LogOut className="h-4 w-4" />
+          </button>
+        </div>
+      </div>
+    </>
+  );
+
+  return (
+    <>
+      {/* Mobile hamburger */}
+      <div className="fixed top-0 left-0 right-0 z-40 flex h-14 items-center border-b bg-white px-4 md:hidden">
+        <button onClick={() => setMobileOpen(true)}>
+          <Menu className="h-6 w-6" />
+        </button>
+        <span className="ml-3 text-sm font-bold">DevOps Dashboard</span>
+      </div>
+      {/* Spacer for mobile top bar */}
+      <div className="h-14 md:hidden" />
+
+      {/* Overlay */}
+      {mobileOpen && (
+        <div
+          className="fixed inset-0 z-40 bg-black/50 md:hidden"
+          onClick={() => setMobileOpen(false)}
+        />
+      )}
+
+      {/* Sidebar — always visible on md+, slide-in on mobile */}
+      <aside
+        className={`fixed inset-y-0 left-0 z-50 flex w-64 flex-col border-r bg-white transition-transform duration-200 max-md:translate-x-[-100%] ${mobileOpen ? 'max-md:translate-x-0' : ''}`}
+      >
+        {sidebarContent}
+      </aside>
+    </>
+  );
+}