diff --git a/components/AppNav.tsx b/components/AppNav.tsx
new file mode 100644
index 0000000..6d848b5
--- /dev/null
+++ b/components/AppNav.tsx
@@ -0,0 +1,48 @@
+'use client'
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { cn } from '@/lib/utils'
+
+const NAV_ITEMS = [
+  { href: '/', label: 'Dashboard' },
+  { href: '/docker', label: 'Docker' },
+  { href: '/git', label: 'Git' },
+  { href: '/systemd', label: 'systemd' },
+  { href: '/caddy', label: 'Caddy' },
+  { href: '/flows', label: 'Flows' },
+  { href: '/audit', label: 'Audit' },
+  { href: '/settings', label: 'Settings' },
+]
+
+export default function AppNav() {
+  const pathname = usePathname()
+
+  return (
+    <nav className="sticky top-0 z-10 border-b border-border bg-background/95 backdrop-blur">
+      <div className="mx-auto max-w-6xl px-6 py-3 flex items-center gap-6">
+        <Link href="/" className="mr-2 text-sm font-semibold tracking-tight shrink-0">
+          Ops Dashboard
+        </Link>
+        {NAV_ITEMS.map((item) => {
+          const isActive =
+            item.href === '/' ? pathname === '/' : pathname.startsWith(item.href)
+          return (
+            <Link
+              key={item.href}
+              href={item.href}
+              className={cn(
+                'text-sm transition-colors',
+                isActive
+                  ? 'text-foreground font-medium'
+                  : 'text-muted-foreground hover:text-foreground',
+              )}
+            >
+              {item.label}
+            </Link>
+          )
+        })}
+      </div>
+    </nav>
+  )
+}