diff --git a/web/app/layout.tsx b/web/app/layout.tsx
index 5e273fd..f9fbed0 100644
--- a/web/app/layout.tsx
+++ b/web/app/layout.tsx
@@ -2,6 +2,7 @@ import "./globals.css";
 import type { Metadata, Viewport } from "next";
 import Nav from "@/components/nav";
 import AutoRefresh from "@/components/auto-refresh";
+import { getSession } from "@/lib/auth";
 
 export const metadata: Metadata = {
   title: "CM Bot V2",
@@ -10,22 +11,19 @@ export const metadata: Metadata = {
 
 export const viewport: Viewport = {
   themeColor: "#18181b",
-  // Lets the page draw under the iPhone notch / Dynamic Island when the
-  // PWA runs in standalone mode. Components that pin to the edges (Nav,
-  // Toast) read env(safe-area-inset-*) to keep their content out of the
-  // hardware cutouts.
   viewportFit: "cover",
 };
 
-export default function RootLayout({
+export default async function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
+  const session = await getSession();
   return (
     <html lang="en">
       <body className="min-h-screen bg-zinc-50 text-zinc-900 antialiased">
-        <Nav />
+        {session && <Nav username={session.username} />}
         <main className="mx-auto max-w-6xl px-4 pb-16 pt-8 sm:px-6 sm:pt-12">
           {children}
         </main>
diff --git a/web/components/nav.tsx b/web/components/nav.tsx
index bedfc53..8726b78 100644
--- a/web/components/nav.tsx
+++ b/web/components/nav.tsx
@@ -2,25 +2,29 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { useEffect, useRef, useState } from "react";
+import { logout } from "@/app/auth-actions";
 
-export default function Nav() {
+type Props = { username: string };
+
+export default function Nav({ username }: Props) {
   const pathname = usePathname() ?? "/";
+  const isPasskeys = pathname.startsWith("/cm-passkeys");
   const isUsers = pathname.startsWith("/users");
-  const isAccounts = !isUsers;
+  const isAccounts = !isUsers && !isPasskeys;
+  const initial = (username[0] ?? "?").toUpperCase();
 
   return (
     <header
       className="sticky top-0 z-10 border-b border-zinc-200/80 bg-white/80 backdrop-blur-md"
       style={{
-        // Push content below the iPhone notch when the PWA is installed.
-        // No-op on browsers without a notch (env() resolves to 0).
         paddingTop: "env(safe-area-inset-top)",
         paddingLeft: "env(safe-area-inset-left)",
         paddingRight: "env(safe-area-inset-right)",
       }}
     >
-      <div className="mx-auto flex max-w-6xl items-center justify-between gap-4 px-4 py-4 sm:px-6">
-        <Link href="/" className="group flex items-center gap-3">
+      <div className="mx-auto flex max-w-6xl items-center justify-between gap-3 px-4 py-4 sm:gap-4 sm:px-6">
+        <Link href="/" className="group flex shrink-0 items-center gap-3">
           <span className="flex h-8 w-8 items-center justify-center rounded-lg bg-zinc-900 text-[11px] font-semibold tracking-tight text-white">
             CM
           </span>
@@ -34,17 +38,20 @@ export default function Nav() {
           </span>
         </Link>
 
-        <nav
-          aria-label="Primary"
-          className="flex items-center gap-1 rounded-full bg-zinc-100 p-1"
-        >
-          <NavLink href="/" active={isAccounts}>
-            Accounts
-          </NavLink>
-          <NavLink href="/users" active={isUsers}>
-            Users
-          </NavLink>
-        </nav>
+        <div className="flex min-w-0 items-center gap-2 sm:gap-3">
+          <nav
+            aria-label="Primary"
+            className="flex items-center gap-1 rounded-full bg-zinc-100 p-1"
+          >
+            <NavLink href="/" active={isAccounts}>
+              Accounts
+            </NavLink>
+            <NavLink href="/users" active={isUsers}>
+              Users
+            </NavLink>
+          </nav>
+          <AccountMenu username={username} initial={initial} />
+        </div>
       </div>
     </header>
   );
@@ -73,3 +80,78 @@ function NavLink({
     </Link>
   );
 }
+
+function AccountMenu({
+  username,
+  initial,
+}: {
+  username: string;
+  initial: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    function onPointerDown(e: PointerEvent) {
+      if (!wrapperRef.current) return;
+      if (!wrapperRef.current.contains(e.target as Node)) setOpen(false);
+    }
+    function onKey(e: KeyboardEvent) {
+      if (e.key === "Escape") setOpen(false);
+    }
+    document.addEventListener("pointerdown", onPointerDown);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+
+  return (
+    <div ref={wrapperRef} className="relative">
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        className="inline-flex items-center gap-2 rounded-full px-2 py-1 text-xs font-medium text-zinc-700 transition-colors hover:bg-zinc-100"
+      >
+        <span className="flex h-6 w-6 items-center justify-center rounded-full bg-zinc-900 text-[10px] font-semibold text-white">
+          {initial}
+        </span>
+        <span className="hidden max-w-[10rem] truncate sm:inline">
+          {username}
+        </span>
+      </button>
+      {open && (
+        <div
+          role="menu"
+          className="absolute right-0 top-[calc(100%+0.5rem)] z-20 w-48 overflow-hidden rounded-xl bg-white py-1 shadow-lg ring-1 ring-zinc-200/60"
+        >
+          <div className="px-3 pb-1 pt-2 text-[10px] font-medium uppercase tracking-wider text-zinc-400 sm:hidden">
+            {username}
+          </div>
+          <Link
+            href="/cm-passkeys"
+            role="menuitem"
+            onClick={() => setOpen(false)}
+            className="block px-3 py-2 text-xs text-zinc-700 transition-colors hover:bg-zinc-50 hover:text-zinc-900"
+          >
+            Passkey settings
+          </Link>
+          <form action={logout}>
+            <button
+              type="submit"
+              role="menuitem"
+              onClick={() => setOpen(false)}
+              className="block w-full px-3 py-2 text-left text-xs text-zinc-700 transition-colors hover:bg-zinc-50 hover:text-red-600"
+            >
+              Sign out
+            </button>
+          </form>
+        </div>
+      )}
+    </div>
+  );
+}
