diff --git a/frontend/src/components/CommandPalette.tsx b/frontend/src/components/CommandPalette.tsx
new file mode 100644
index 0000000..ca941dd
--- /dev/null
+++ b/frontend/src/components/CommandPalette.tsx
@@ -0,0 +1,118 @@
+import * as Dialog from "@radix-ui/react-dialog";
+import { ArrowRight, Search, X } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { cn } from "../lib/utils";
+import { navigationItems } from "../navigation";
+import { IconButton } from "./ui";
+
+export function CommandPalette({
+  open,
+  onOpenChange
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}) {
+  const [query, setQuery] = useState("");
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (!open) setQuery("");
+  }, [open]);
+
+  const filtered = useMemo(() => {
+    const needle = query.trim().toLowerCase();
+    if (!needle) return navigationItems;
+    return navigationItems.filter((item) =>
+      [item.label, item.description, item.group, ...item.keywords]
+        .join(" ")
+        .toLowerCase()
+        .includes(needle)
+    );
+  }, [query]);
+
+  function go(to: string) {
+    navigate(to);
+    onOpenChange(false);
+  }
+
+  return (
+    <Dialog.Root open={open} onOpenChange={onOpenChange}>
+      <Dialog.Portal>
+        <Dialog.Overlay className="fixed inset-0 z-40 bg-[#020408]/75 backdrop-blur-sm" />
+        <Dialog.Content className="fixed left-1/2 top-[14vh] z-50 w-[min(92vw,640px)] -translate-x-1/2 overflow-hidden rounded-2xl border border-line bg-panel shadow-command">
+          <Dialog.Title className="sr-only">Search navigation</Dialog.Title>
+          <Dialog.Description className="sr-only">
+            Find and open a DocSentinel workspace.
+          </Dialog.Description>
+          <div className="flex items-center gap-3 border-b border-line px-4">
+            <Search className="h-5 w-5 shrink-0 text-muted" aria-hidden="true" />
+            <input
+              autoFocus
+              aria-label="Search navigation"
+              className="h-14 min-w-0 flex-1 bg-transparent text-sm text-text outline-none placeholder:text-muted"
+              onChange={(event) => setQuery(event.target.value)}
+              placeholder="Search pages, tools, and workflows..."
+              value={query}
+            />
+            <Dialog.Close asChild>
+              <IconButton
+                className="h-8 w-8 border-0 bg-transparent"
+                label="Close search"
+              >
+                <X aria-hidden="true" />
+              </IconButton>
+            </Dialog.Close>
+          </div>
+          <div className="max-h-[min(58vh,520px)] overflow-y-auto p-2">
+            {filtered.length ? (
+              filtered.map((item) => {
+                const Icon = item.icon;
+                return (
+                  <Dialog.Close asChild key={item.to}>
+                    <button
+                      className={cn(
+                        "focus-ring group grid w-full grid-cols-[40px_1fr_auto] items-center gap-3 rounded-xl px-3 py-2.5 text-left",
+                        "text-muted transition hover:bg-panel2 hover:text-text"
+                      )}
+                      onClick={() => go(item.to)}
+                      type="button"
+                    >
+                      <span className="flex h-10 w-10 items-center justify-center rounded-lg border border-line bg-canvas text-accent">
+                        <Icon className="h-4 w-4" aria-hidden="true" />
+                      </span>
+                      <span className="min-w-0">
+                        <span className="block text-sm font-medium text-text">
+                          {item.label}
+                        </span>
+                        <span className="mt-0.5 block truncate text-xs text-muted">
+                          {item.group} · {item.description}
+                        </span>
+                      </span>
+                      <ArrowRight
+                        className="h-4 w-4 opacity-0 transition group-hover:opacity-100"
+                        aria-hidden="true"
+                      />
+                    </button>
+                  </Dialog.Close>
+                );
+              })
+            ) : (
+              <div className="px-4 py-12 text-center">
+                <div className="text-sm font-medium text-text">No page found</div>
+                <div className="mt-1 text-xs text-muted">
+                  Try a workflow, tool, or page name.
+                </div>
+              </div>
+            )}
+          </div>
+          <div className="flex items-center justify-between border-t border-line bg-canvas/60 px-4 py-2 text-[11px] text-muted">
+            <span>{filtered.length} destinations</span>
+            <span>Press Esc to close</span>
+          </div>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
diff --git a/frontend/src/components/Layout.test.tsx b/frontend/src/components/Layout.test.tsx
new file mode 100644
index 0000000..bb18e4c
--- /dev/null
+++ b/frontend/src/components/Layout.test.tsx
@@ -0,0 +1,79 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { AppProviders } from "../app/providers";
+import Layout from "./Layout";
+
+function renderLayout() {
+  return render(
+    <MemoryRouter initialEntries={["/"]}>
+      <AppProviders>
+        <Routes>
+          <Route element={<Layout />}>
+            <Route index element={<h1>Workspace content</h1>} />
+            <Route path="integrations" element={<h1>Gateway content</h1>} />
+          </Route>
+        </Routes>
+      </AppProviders>
+    </MemoryRouter>
+  );
+}
+
+describe("Layout", () => {
+  beforeEach(() => {
+    const values = new Map<string, string>();
+    vi.stubGlobal("localStorage", {
+      clear: () => values.clear(),
+      getItem: (key: string) => values.get(key) ?? null,
+      key: (index: number) => [...values.keys()][index] ?? null,
+      length: 0,
+      removeItem: (key: string) => values.delete(key),
+      setItem: (key: string, value: string) => values.set(key, value)
+    });
+    vi.stubGlobal(
+      "fetch",
+      vi.fn().mockResolvedValue(
+        new Response(JSON.stringify({ status: "ok" }), {
+          status: 200,
+          headers: { "Content-Type": "application/json" }
+        })
+      )
+    );
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it("groups navigation by user workflow", () => {
+    renderLayout();
+
+    expect(screen.getByText("Review & govern")).toBeInTheDocument();
+    expect(screen.getByText("Agent operations")).toBeInTheDocument();
+    expect(
+      screen.getByRole("link", { name: "Assessment queue" })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("link", { name: "Agent gateway" })
+    ).toBeInTheDocument();
+  });
+
+  it("opens the command palette with the standard keyboard shortcut", async () => {
+    const user = userEvent.setup();
+    renderLayout();
+
+    fireEvent.keyDown(window, { key: "k", ctrlKey: true });
+    const dialog = screen.getByRole("dialog", { name: "Search navigation" });
+    expect(dialog).toBeInTheDocument();
+
+    await user.type(
+      screen.getByRole("textbox", { name: "Search navigation" }),
+      "mcp"
+    );
+    expect(
+      screen.getByRole("button", { name: /Agent gateway.*Agent operations/ })
+    ).toBeInTheDocument();
+  });
+});
diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index a11e31c..952e1ab 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -1,182 +1,319 @@
 import * as Dialog from "@radix-ui/react-dialog";
 import { useQuery } from "@tanstack/react-query";
 import {
-  BrainCircuit,
-  Database,
-  FolderKanban,
-  Gauge,
-  ListChecks,
+  ChevronRight,
+  FilePlus2,
   Menu,
-  Network,
-  Settings,
+  Search,
   ShieldCheck,
-  X,
-  type LucideIcon
+  UserRound,
+  X
 } from "lucide-react";
-import { NavLink, Outlet } from "react-router-dom";
+import { useEffect, useState } from "react";
+import { Link, NavLink, Outlet, useLocation } from "react-router-dom";
 
 import { getHealth } from "../lib/api";
+import { getGovernanceSession } from "../lib/governanceApi";
 import { cn } from "../lib/utils";
-import { Badge, IconButton } from "./ui";
-
-type NavItem = {
-  to: string;
-  label: string;
-  icon: LucideIcon;
-};
-
-const navItems: NavItem[] = [
-  { to: "/", label: "Dashboard", icon: Gauge },
-  { to: "/assessments", label: "Assessments", icon: ListChecks },
-  { to: "/governance", label: "Governance", icon: FolderKanban },
-  { to: "/kb", label: "Knowledge Base", icon: Database },
-  { to: "/skills", label: "Skills", icon: BrainCircuit },
-  { to: "/integrations", label: "Agent Integrations", icon: Network },
-  { to: "/settings", label: "Settings", icon: Settings }
-];
-
-function Brand() {
+import {
+  navigationGroups,
+  navigationItemForPath,
+  type NavigationItem
+} from "../navigation";
+import { CommandPalette } from "./CommandPalette";
+import { Badge, Button, IconButton } from "./ui";
+
+function Brand({ compact = false }: { compact?: boolean }) {
   return (
-    <div className="flex min-w-0 items-center gap-3">
-      <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-accent/30 bg-accent/10 text-accent">
+    <Link
+      aria-label={compact ? "DocSentinel home" : undefined}
+      className="focus-ring flex min-w-0 items-center gap-3 rounded-lg"
+      to="/"
+    >
+      <div className="relative flex h-9 w-9 shrink-0 items-center justify-center rounded-xl border border-accent/30 bg-accent/10 text-accent shadow-[inset_0_0_18px_rgba(88,166,255,0.08)]">
         <ShieldCheck className="h-4 w-4" aria-hidden="true" />
+        <span className="absolute -right-0.5 -top-0.5 h-2 w-2 rounded-full border-2 border-canvas bg-good" />
       </div>
-      <div className="min-w-0">
-        <div className="truncate text-sm font-semibold text-text">DocSentinel</div>
-        <div className="truncate text-[11px] text-muted">Trustworthy review</div>
-      </div>
-    </div>
+      {!compact ? (
+        <div className="min-w-0">
+          <div className="truncate text-sm font-semibold tracking-tight text-text">
+            DocSentinel
+          </div>
+          <div className="truncate text-[11px] text-muted">
+            Security review workspace
+          </div>
+        </div>
+      ) : null}
+    </Link>
   );
 }
 
+function NavigationLink({
+  item,
+  mobile
+}: {
+  item: NavigationItem;
+  mobile: boolean;
+}) {
+  const Icon = item.icon;
+  const link = (
+    <NavLink
+      to={item.to}
+      end={item.to === "/"}
+      className={({ isActive }) =>
+        cn(
+          "focus-ring group relative flex min-h-10 items-center gap-3 rounded-lg px-3 py-2 text-sm transition",
+          isActive
+            ? "bg-accent/10 font-medium text-text"
+            : "text-muted hover:bg-panel2/80 hover:text-text"
+        )
+      }
+    >
+      {({ isActive }) => (
+        <>
+          <span
+            aria-hidden="true"
+            className={cn(
+              "absolute inset-y-2 left-0 w-0.5 rounded-full bg-accent transition-opacity",
+              isActive ? "opacity-100" : "opacity-0"
+            )}
+          />
+          <Icon
+            className={cn(
+              "h-4 w-4 shrink-0 transition",
+              isActive ? "text-accent" : "text-muted group-hover:text-text"
+            )}
+            aria-hidden="true"
+          />
+          <span className="truncate">{item.label}</span>
+        </>
+      )}
+    </NavLink>
+  );
+
+  return mobile ? <Dialog.Close asChild>{link}</Dialog.Close> : link;
+}
+
 function Navigation({ mobile = false }: { mobile?: boolean }) {
   return (
-    <nav aria-label="Primary navigation" className="space-y-1 p-3">
-      {navItems.map((item) => {
-        const Icon = item.icon;
-        const link = (
-          <NavLink
-            key={item.to}
-            to={item.to}
-            end={item.to === "/"}
-            className={({ isActive }) =>
-              cn(
-                "focus-ring flex h-9 items-center gap-3 rounded-md px-3 text-sm transition",
-                isActive
-                  ? "bg-panel2 text-text"
-                  : "text-muted hover:bg-panel2/70 hover:text-text"
-              )
-            }
-          >
-            <Icon className="h-4 w-4" aria-hidden="true" />
-            <span>{item.label}</span>
-          </NavLink>
-        );
-
-        return mobile ? (
-          <Dialog.Close key={item.to} asChild>
-            {link}
-          </Dialog.Close>
-        ) : (
-          link
-        );
-      })}
+    <nav aria-label="Primary navigation" className="space-y-5 px-3 py-4">
+      {navigationGroups.map((group) => (
+        <div key={group.label}>
+          <div className="mb-1.5 px-3 text-[10px] font-semibold uppercase tracking-[0.14em] text-muted/70">
+            {group.label}
+          </div>
+          <div className="space-y-0.5">
+            {group.items.map((item) => (
+              <NavigationLink
+                item={item}
+                key={item.to}
+                mobile={mobile}
+              />
+            ))}
+          </div>
+        </div>
+      ))}
     </nav>
   );
 }
 
-function HealthIndicator() {
+function HealthIndicator({ detailed = false }: { detailed?: boolean }) {
   const health = useQuery({
     queryKey: ["health"],
     queryFn: getHealth,
     refetchInterval: 30_000
   });
   const online = health.data?.status === "ok";
+  const label = health.isPending
+    ? "Checking API"
+    : online
+      ? "All systems operational"
+      : "API unavailable";
 
   return (
-    <div className="flex items-center gap-2 text-xs text-muted">
-      <span
-        aria-hidden="true"
-        className={cn(
-          "h-2 w-2 rounded-full",
-          health.isPending ? "bg-muted" : online ? "bg-good" : "bg-bad"
-        )}
-      />
-      <span>{health.isPending ? "Checking API" : online ? "API connected" : "API unavailable"}</span>
+    <div className="flex min-w-0 items-center gap-2.5">
+      <span className="relative flex h-2.5 w-2.5 shrink-0" aria-hidden="true">
+        {online ? (
+          <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-good opacity-30" />
+        ) : null}
+        <span
+          className={cn(
+            "relative inline-flex h-2.5 w-2.5 rounded-full",
+            health.isPending ? "bg-muted" : online ? "bg-good" : "bg-bad"
+          )}
+        />
+      </span>
+      <div className="min-w-0">
+        <div className="truncate text-xs text-text">{label}</div>
+        {detailed ? (
+          <div className="mt-0.5 text-[10px] text-muted">
+            Local API · checked every 30s
+          </div>
+        ) : null}
+      </div>
     </div>
   );
 }
 
+function SidebarFooter() {
+  const session = getGovernanceSession();
+  return (
+    <div className="space-y-2 border-t border-line p-3">
+      <div className="rounded-xl border border-line bg-panel p-3">
+        <HealthIndicator detailed />
+      </div>
+      <Link
+        className="focus-ring flex items-center gap-3 rounded-xl px-3 py-2 text-muted transition hover:bg-panel hover:text-text"
+        to={session ? "/governance" : "/login"}
+      >
+        <span className="flex h-8 w-8 items-center justify-center rounded-lg border border-line bg-panel">
+          <UserRound className="h-4 w-4" aria-hidden="true" />
+        </span>
+        <span className="min-w-0">
+          <span className="block truncate text-xs font-medium text-text">
+            {session?.user.full_name || session?.user.username || "Governance access"}
+          </span>
+          <span className="mt-0.5 block truncate text-[10px] text-muted">
+            {session ? session.user.role : "Sign in to review controls"}
+          </span>
+        </span>
+      </Link>
+    </div>
+  );
+}
+
+function MobileNavigation() {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <IconButton label="Open navigation">
+          <Menu aria-hidden="true" />
+        </IconButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <Dialog.Overlay className="fixed inset-0 z-40 bg-[#020408]/75 backdrop-blur-sm" />
+        <Dialog.Content className="fixed inset-y-0 left-0 z-50 flex w-[min(88vw,300px)] flex-col border-r border-line bg-canvas shadow-command">
+          <Dialog.Title className="sr-only">Navigation</Dialog.Title>
+          <Dialog.Description className="sr-only">
+            Open a DocSentinel workspace.
+          </Dialog.Description>
+          <div className="flex h-16 items-center justify-between border-b border-line px-4">
+            <Brand />
+            <Dialog.Close asChild>
+              <IconButton label="Close navigation">
+                <X aria-hidden="true" />
+              </IconButton>
+            </Dialog.Close>
+          </div>
+          <div className="min-h-0 flex-1 overflow-y-auto">
+            <Navigation mobile />
+          </div>
+          <SidebarFooter />
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
 export default function Layout() {
+  const location = useLocation();
+  const current = navigationItemForPath(location.pathname);
+  const [commandOpen, setCommandOpen] = useState(false);
+
+  useEffect(() => {
+    function onKeyDown(event: KeyboardEvent) {
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
+        event.preventDefault();
+        setCommandOpen((open) => !open);
+      }
+    }
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, []);
+
   return (
     <div className="min-h-screen bg-canvas">
-      <aside className="fixed inset-y-0 left-0 z-20 hidden w-56 border-r border-line bg-canvas lg:flex lg:flex-col">
-        <div className="flex h-14 items-center border-b border-line px-4">
+      <a
+        className="focus-ring fixed left-3 top-3 z-[70] -translate-y-20 rounded-lg bg-accent px-3 py-2 text-sm font-medium text-canvas transition focus:translate-y-0"
+        href="#main-content"
+      >
+        Skip to main content
+      </a>
+
+      <aside className="fixed inset-y-0 left-0 z-20 hidden w-64 border-r border-line bg-canvas/95 lg:flex lg:flex-col">
+        <div className="flex h-16 items-center border-b border-line px-4">
           <Brand />
         </div>
         <div className="min-h-0 flex-1 overflow-y-auto">
           <Navigation />
         </div>
-        <div className="border-t border-line px-4 py-3">
-          <HealthIndicator />
-        </div>
+        <SidebarFooter />
       </aside>
 
-      <div className="lg:pl-56">
-        <header className="sticky top-0 z-10 border-b border-line bg-canvas/95 backdrop-blur">
-          <div className="flex h-14 items-center justify-between gap-3 px-4 sm:px-6">
+      <div className="lg:pl-64">
+        <header className="sticky top-0 z-30 border-b border-line bg-canvas/88 backdrop-blur-xl">
+          <div className="flex h-16 items-center justify-between gap-3 px-4 sm:px-6 lg:px-8">
             <div className="flex min-w-0 items-center gap-3">
               <div className="lg:hidden">
-                <Dialog.Root>
-                  <Dialog.Trigger asChild>
-                    <IconButton label="Open navigation">
-                      <Menu aria-hidden="true" />
-                    </IconButton>
-                  </Dialog.Trigger>
-                  <Dialog.Portal>
-                    <Dialog.Overlay className="fixed inset-0 z-40 bg-black/55" />
-                    <Dialog.Content className="fixed inset-y-0 left-0 z-50 flex w-[min(86vw,280px)] flex-col border-r border-line bg-canvas shadow-command">
-                      <Dialog.Title className="sr-only">Navigation</Dialog.Title>
-                      <div className="flex h-14 items-center justify-between border-b border-line px-4">
-                        <Brand />
-                        <Dialog.Close asChild>
-                          <IconButton label="Close navigation">
-                            <X aria-hidden="true" />
-                          </IconButton>
-                        </Dialog.Close>
-                      </div>
-                      <div className="min-h-0 flex-1 overflow-y-auto">
-                        <Navigation mobile />
-                      </div>
-                      <div className="border-t border-line px-4 py-3">
-                        <HealthIndicator />
-                      </div>
-                    </Dialog.Content>
-                  </Dialog.Portal>
-                </Dialog.Root>
+                <MobileNavigation />
               </div>
-              <div className="hidden lg:block">
-                <div className="text-xs text-muted">Workspace</div>
-                <div className="text-sm font-medium text-text">Local review</div>
+              <div className="hidden min-w-0 items-center gap-2 sm:flex">
+                <span className="text-xs text-muted">{current.group}</span>
+                <ChevronRight className="h-3 w-3 text-muted/60" aria-hidden="true" />
+                <span className="truncate text-xs font-medium text-text">
+                  {current.label}
+                </span>
               </div>
-              <div className="lg:hidden">
-                <div className="truncate text-sm font-semibold text-text">DocSentinel</div>
+              <div className="sm:hidden">
+                <Brand compact />
               </div>
             </div>
 
             <div className="flex items-center gap-2">
-              <Badge>Local-first</Badge>
-              <div className="hidden sm:block">
-                <HealthIndicator />
-              </div>
+              <button
+                aria-label="Search navigation"
+                className="focus-ring hidden h-10 w-[min(30vw,280px)] items-center gap-2 rounded-lg border border-line bg-panel px-3 text-left text-sm text-muted transition hover:border-muted/40 hover:bg-panel2 sm:flex"
+                onClick={() => setCommandOpen(true)}
+                type="button"
+              >
+                <Search className="h-4 w-4" aria-hidden="true" />
+                <span className="min-w-0 flex-1 truncate">Search or jump to...</span>
+                <kbd className="rounded border border-line bg-canvas px-1.5 py-0.5 font-sans text-[10px] text-muted">
+                  ⌘K
+                </kbd>
+              </button>
+              <IconButton
+                className="sm:hidden"
+                label="Search navigation"
+                onClick={() => setCommandOpen(true)}
+              >
+                <Search aria-hidden="true" />
+              </IconButton>
+              {current.to !== "/assessments" ? (
+                <Link className="hidden sm:block" to="/assessments#new-assessment">
+                  <Button>
+                    <FilePlus2 className="h-4 w-4" aria-hidden="true" />
+                    New assessment
+                  </Button>
+                </Link>
+              ) : null}
+              <Badge className="hidden xl:inline-flex" tone="accent">
+                Local workspace
+              </Badge>
             </div>
           </div>
         </header>
 
-        <main className="mx-auto w-full max-w-[1600px] px-4 py-5 sm:px-6">
+        <main
+          className="mx-auto w-full max-w-[1520px] px-4 py-6 sm:px-6 lg:px-8 lg:py-8"
+          id="main-content"
+          tabIndex={-1}
+        >
           <Outlet />
         </main>
       </div>
+
+      <CommandPalette open={commandOpen} onOpenChange={setCommandOpen} />
     </div>
   );
 }
diff --git a/frontend/src/components/ui.tsx b/frontend/src/components/ui.tsx
index fba43c0..bbe7bcc 100644
--- a/frontend/src/components/ui.tsx
+++ b/frontend/src/components/ui.tsx
@@ -1,23 +1,39 @@
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import type {
   ButtonHTMLAttributes,
+  HTMLAttributes,
   InputHTMLAttributes,
   ReactNode,
   SelectHTMLAttributes,
   TextareaHTMLAttributes
 } from "react";
+import { forwardRef } from "react";
 
 import { cn } from "../lib/utils";
 
-export function Card({ children, className }: { children: ReactNode; className?: string }) {
-  return <section className={cn("rounded-md border border-line bg-panel", className)}>{children}</section>;
+export function Card({
+  children,
+  className,
+  ...props
+}: HTMLAttributes<HTMLElement>) {
+  return (
+    <section
+      className={cn(
+        "overflow-hidden rounded-xl border border-line bg-panel shadow-[0_1px_0_rgba(255,255,255,0.025)]",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </section>
+  );
 }
 
 export function CardHeader({ title, action, meta }: { title: string; action?: ReactNode; meta?: ReactNode }) {
   return (
-    <div className="flex min-h-12 items-center justify-between gap-3 border-b border-line px-4 py-3">
+    <div className="flex min-h-14 items-center justify-between gap-3 border-b border-line px-4 py-3">
       <div className="min-w-0">
-        <h2 className="truncate text-sm font-medium text-text">{title}</h2>
+        <h2 className="truncate text-sm font-semibold tracking-tight text-text">{title}</h2>
         {meta ? <div className="mt-1 text-xs text-muted">{meta}</div> : null}
       </div>
       {action ? <div className="shrink-0">{action}</div> : null}
@@ -25,28 +41,30 @@ export function CardHeader({ title, action, meta }: { title: string; action?: Re
   );
 }
 
-export function Button({
-  className,
-  variant = "default",
-  ...props
-}: ButtonHTMLAttributes<HTMLButtonElement> & { variant?: "default" | "quiet" | "danger" | "success" }) {
+export const Button = forwardRef<
+  HTMLButtonElement,
+  ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: "default" | "quiet" | "danger" | "success";
+  }
+>(function Button({ className, variant = "default", ...props }, ref) {
   const variants = {
-    default: "border-accent/35 bg-accent/12 text-accent hover:bg-accent/18",
-    quiet: "border-line bg-panel2 text-text hover:bg-[#1a2028]",
+    default: "border-accent/40 bg-accent text-[#06111f] hover:bg-[#75b4ff]",
+    quiet: "border-line bg-panel2 text-text hover:border-muted/40 hover:bg-[#1d2430]",
     danger: "border-bad/35 bg-bad/12 text-bad hover:bg-bad/18",
     success: "border-good/35 bg-good/12 text-good hover:bg-good/18"
   };
   return (
     <button
+      ref={ref}
       className={cn(
-        "focus-ring inline-flex h-9 items-center justify-center gap-2 rounded-md border px-3 text-sm font-medium transition disabled:cursor-not-allowed disabled:opacity-50",
+        "focus-ring inline-flex h-10 items-center justify-center gap-2 rounded-lg border px-3.5 text-sm font-semibold transition disabled:cursor-not-allowed disabled:opacity-50",
         variants[variant],
         className
       )}
       {...props}
     />
   );
-}
+});
 
 export function Tooltip({
   label,
@@ -71,21 +89,20 @@ export function Tooltip({
   );
 }
 
-export function IconButton({
-  label,
-  className,
-  children,
-  ...props
-}: ButtonHTMLAttributes<HTMLButtonElement> & {
-  label: string;
-  children: ReactNode;
-}) {
+export const IconButton = forwardRef<
+  HTMLButtonElement,
+  ButtonHTMLAttributes<HTMLButtonElement> & {
+    label: string;
+    children: ReactNode;
+  }
+>(function IconButton({ label, className, children, ...props }, ref) {
   return (
     <Tooltip label={label}>
       <button
+        ref={ref}
         aria-label={label}
         className={cn(
-          "focus-ring inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-line bg-panel text-muted transition hover:bg-panel2 hover:text-text disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:h-4 [&_svg]:w-4",
+          "focus-ring inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border border-line bg-panel text-muted transition hover:border-muted/40 hover:bg-panel2 hover:text-text disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:h-4 [&_svg]:w-4",
           className
         )}
         {...props}
@@ -94,13 +111,13 @@ export function IconButton({
       </button>
     </Tooltip>
   );
-}
+});
 
 export function Input({ className, ...props }: InputHTMLAttributes<HTMLInputElement>) {
   return (
     <input
       className={cn(
-        "focus-ring h-9 w-full rounded-md border border-line bg-[#0d1117] px-3 text-sm text-text placeholder:text-muted",
+        "focus-ring h-10 w-full rounded-lg border border-line bg-canvas px-3 text-sm text-text transition placeholder:text-muted hover:border-muted/40",
         className
       )}
       {...props}
@@ -112,7 +129,7 @@ export function Select({ className, ...props }: SelectHTMLAttributes<HTMLSelectE
   return (
     <select
       className={cn(
-        "focus-ring h-9 w-full rounded-md border border-line bg-[#0d1117] px-3 text-sm text-text",
+        "focus-ring h-10 w-full rounded-lg border border-line bg-canvas px-3 text-sm text-text transition hover:border-muted/40",
         className
       )}
       {...props}
@@ -124,7 +141,7 @@ export function Textarea({ className, ...props }: TextareaHTMLAttributes<HTMLTex
   return (
     <textarea
       className={cn(
-        "focus-ring min-h-24 w-full resize-y rounded-md border border-line bg-[#0d1117] px-3 py-2 text-sm text-text placeholder:text-muted",
+        "focus-ring min-h-24 w-full resize-y rounded-lg border border-line bg-canvas px-3 py-2.5 text-sm leading-5 text-text transition placeholder:text-muted hover:border-muted/40",
         className
       )}
       {...props}
@@ -149,7 +166,7 @@ export function Badge({
     accent: "border-accent/35 bg-accent/10 text-accent"
   };
   return (
-    <span className={cn("inline-flex items-center rounded border px-2 py-0.5 text-xs font-medium", tones[tone], className)}>
+    <span className={cn("inline-flex items-center rounded-md border px-2 py-0.5 text-xs font-medium", tones[tone], className)}>
       {children}
     </span>
   );
@@ -157,8 +174,8 @@ export function Badge({
 
 export function EmptyState({ title, action }: { title: string; action?: ReactNode }) {
   return (
-    <div className="flex min-h-40 flex-col items-center justify-center gap-3 px-4 py-8 text-center text-sm text-muted">
-      <div>{title}</div>
+    <div className="flex min-h-40 flex-col items-center justify-center gap-3 px-4 py-10 text-center text-sm text-muted">
+      <div className="max-w-sm leading-5">{title}</div>
       {action}
     </div>
   );
@@ -195,11 +212,14 @@ export function PageHeader({
   actions?: ReactNode;
 }) {
   return (
-    <div className="flex min-h-14 flex-col justify-between gap-3 border-b border-line pb-4 sm:flex-row sm:items-end">
+    <div className="flex flex-col justify-between gap-4 sm:flex-row sm:items-end">
       <div className="min-w-0">
-        <h1 className="text-lg font-semibold text-text">{title}</h1>
+        <div className="mb-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-accent">
+          DocSentinel workspace
+        </div>
+        <h1 className="text-2xl font-semibold tracking-tight text-text">{title}</h1>
         {description ? (
-          <p className="mt-1 max-w-3xl text-sm leading-5 text-muted">{description}</p>
+          <p className="mt-1.5 max-w-3xl text-sm leading-6 text-muted">{description}</p>
         ) : null}
       </div>
       {actions ? <div className="flex shrink-0 flex-wrap items-center gap-2">{actions}</div> : null}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 7ef7051..af19aab 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -4,12 +4,12 @@
 
 :root {
   color-scheme: dark;
-  --canvas: 10 12 15;
-  --panel: 16 19 23;
-  --panel-2: 21 25 31;
-  --line: 37 43 51;
-  --muted: 139 149 161;
-  --text: 230 237 243;
+  --canvas: 8 11 16;
+  --panel: 13 17 23;
+  --panel-2: 19 24 32;
+  --line: 40 48 60;
+  --muted: 148 159 174;
+  --text: 236 242 248;
   --accent: 88 166 255;
   --good: 63 185 80;
   --warn: 210 153 34;
@@ -30,7 +30,11 @@ body {
   margin: 0;
   min-width: 320px;
   min-height: 100vh;
-  background: rgb(var(--canvas));
+  background:
+    radial-gradient(circle at 65% -20%, rgb(var(--accent) / 0.07), transparent 34rem),
+    rgb(var(--canvas));
+  color: rgb(var(--text));
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
 }
 
 button,
@@ -40,6 +44,11 @@ textarea {
   font: inherit;
 }
 
+button,
+a {
+  -webkit-tap-highlight-color: transparent;
+}
+
 ::-webkit-scrollbar {
   height: 10px;
   width: 10px;
@@ -55,7 +64,7 @@ textarea {
 }
 
 .focus-ring {
-  @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/55 focus-visible:ring-offset-1 focus-visible:ring-offset-canvas;
+  @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 focus-visible:ring-offset-2 focus-visible:ring-offset-canvas;
 }
 
 ::selection {
diff --git a/frontend/src/navigation.ts b/frontend/src/navigation.ts
new file mode 100644
index 0000000..398b0ed
--- /dev/null
+++ b/frontend/src/navigation.ts
@@ -0,0 +1,115 @@
+import {
+  BrainCircuit,
+  Database,
+  FolderKanban,
+  Gauge,
+  ListChecks,
+  Network,
+  Settings,
+  type LucideIcon
+} from "lucide-react";
+
+export type NavigationItem = {
+  to: string;
+  label: string;
+  shortLabel: string;
+  description: string;
+  keywords: string[];
+  icon: LucideIcon;
+};
+
+export type NavigationGroup = {
+  label: string;
+  items: NavigationItem[];
+};
+
+export const navigationGroups: NavigationGroup[] = [
+  {
+    label: "Workspace",
+    items: [
+      {
+        to: "/",
+        label: "Overview",
+        shortLabel: "Overview",
+        description: "Security posture and work requiring attention",
+        keywords: ["dashboard", "command center", "metrics", "activity"],
+        icon: Gauge
+      }
+    ]
+  },
+  {
+    label: "Review & govern",
+    items: [
+      {
+        to: "/assessments",
+        label: "Assessment queue",
+        shortLabel: "Assessments",
+        description: "Submit evidence, review findings, and approve outcomes",
+        keywords: ["review", "findings", "reports", "documents", "remediation"],
+        icon: ListChecks
+      },
+      {
+        to: "/governance",
+        label: "Governance",
+        shortLabel: "Governance",
+        description: "Projects, controls, evidence, and readiness",
+        keywords: ["controls", "policy", "compliance", "pallas", "projects"],
+        icon: FolderKanban
+      }
+    ]
+  },
+  {
+    label: "Agent operations",
+    items: [
+      {
+        to: "/kb",
+        label: "Knowledge base",
+        shortLabel: "Knowledge",
+        description: "Approved sources and retrieval inspection",
+        keywords: ["rag", "documents", "context", "sources", "reindex"],
+        icon: Database
+      },
+      {
+        to: "/skills",
+        label: "Skill library",
+        shortLabel: "Skills",
+        description: "Assessment personas, prompts, and frameworks",
+        keywords: ["prompts", "personas", "agents", "frameworks"],
+        icon: BrainCircuit
+      },
+      {
+        to: "/integrations",
+        label: "Agent gateway",
+        shortLabel: "Gateway",
+        description: "MCP and A2A endpoints, access, and capabilities",
+        keywords: ["mcp", "a2a", "protocols", "integrations", "tools"],
+        icon: Network
+      }
+    ]
+  },
+  {
+    label: "System",
+    items: [
+      {
+        to: "/settings",
+        label: "Runtime settings",
+        shortLabel: "Settings",
+        description: "Model provider, API health, and local runtime",
+        keywords: ["llm", "provider", "model", "configuration", "health"],
+        icon: Settings
+      }
+    ]
+  }
+];
+
+export const navigationItems = navigationGroups.flatMap((group) =>
+  group.items.map((item) => ({ ...item, group: group.label }))
+);
+
+export function navigationItemForPath(pathname: string) {
+  return (
+    navigationItems.find((item) =>
+      item.to === "/" ? pathname === "/" : pathname.startsWith(item.to)
+    ) ?? navigationItems[0]
+  );
+}
diff --git a/frontend/src/pages/Assessments.tsx b/frontend/src/pages/Assessments.tsx
index 5be7bce..f741c39 100644
--- a/frontend/src/pages/Assessments.tsx
+++ b/frontend/src/pages/Assessments.tsx
@@ -1,5 +1,15 @@
-import { Check, FileUp, MessageSquare, RefreshCw, Send, Shield, X } from "lucide-react";
+import * as Dialog from "@radix-ui/react-dialog";
+import {
+  Check,
+  FileUp,
+  MessageSquare,
+  RefreshCw,
+  Send,
+  Shield,
+  X
+} from "lucide-react";
 import { FormEvent, useEffect, useMemo, useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
 
 import { SeverityBadge, StatusBadge, taskTitle } from "../components/domain";
 import { ThreatEvidencePanel } from "../components/ThreatEvidencePanel";
@@ -57,6 +67,8 @@ const statusOptions = [
 ];
 
 export default function Assessments() {
+  const location = useLocation();
+  const navigate = useNavigate();
   const [tasks, setTasks] = useState<AssessmentTask[]>([]);
   const [skills, setSkills] = useState<Skill[]>([]);
   const [selectedId, setSelectedId] = useState<string | null>(null);
@@ -68,6 +80,19 @@ export default function Assessments() {
   const [loading, setLoading] = useState(true);
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [submitError, setSubmitError] = useState<string | null>(null);
+  const submitOpen = location.hash === "#new-assessment";
+
+  function setSubmitOpen(open: boolean) {
+    navigate(
+      {
+        pathname: location.pathname,
+        search: location.search,
+        hash: open ? "new-assessment" : ""
+      },
+      { replace: true }
+    );
+  }
 
   async function loadTasks(nextSelectedId = selectedId) {
     setLoading(true);
@@ -129,11 +154,11 @@ export default function Assessments() {
     const form = new FormData(event.currentTarget);
     const files = form.getAll("files").filter((value): value is File => value instanceof File && value.size > 0);
     if (!files.length) {
-      setError("Select at least one document.");
+      setSubmitError("Select at least one document.");
       return;
     }
     setBusy(true);
-    setError(null);
+    setSubmitError(null);
     try {
       const created = await submitAssessment({
         files,
@@ -145,8 +170,11 @@ export default function Assessments() {
       });
       event.currentTarget.reset();
       await loadTasks(created.task_id);
+      setSubmitOpen(false);
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Assessment submission failed.");
+      setSubmitError(
+        err instanceof Error ? err.message : "Assessment submission failed."
+      );
     } finally {
       setBusy(false);
     }
@@ -205,48 +233,108 @@ export default function Assessments() {
       <PageHeader
         title="Assessments"
         description="Submit project material, inspect evidence-backed drafts, and complete human review."
+        actions={
+          <Button onClick={() => setSubmitOpen(true)} type="button">
+            <FileUp className="h-4 w-4" aria-hidden="true" />
+            New assessment
+          </Button>
+        }
       />
-      <div className="grid gap-4 xl:grid-cols-[360px_1fr]">
-        <div className="space-y-4">
-        <Card>
-          <CardHeader title="Submit Assessment" meta="Files, phase, skill, and review mode." />
-          <form onSubmit={handleSubmit} className="space-y-3 p-4">
-            <Field label="Documents">
-              <Input name="files" type="file" multiple accept=".txt,.md,.pdf,.docx,.xlsx,.pptx" />
-            </Field>
-            <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-1">
-              <Field label="SSDLC phase">
-                <Select name="phase" defaultValue="auto">
-                  {phases.map((phase) => <option key={phase} value={phase}>{phase}</option>)}
-                </Select>
-              </Field>
-              <Field label="Skill">
-                <Select name="skill_id" defaultValue="ssdlc-design">
-                  <option value="">Default</option>
-                  {skills.map((skill) => <option key={skill.id} value={skill.id}>{skill.name}</option>)}
-                </Select>
-              </Field>
+
+      <Dialog.Root open={submitOpen} onOpenChange={setSubmitOpen}>
+        <Dialog.Portal>
+          <Dialog.Overlay className="fixed inset-0 z-40 bg-[#020408]/75 backdrop-blur-sm" />
+          <Dialog.Content className="fixed left-1/2 top-1/2 z-50 max-h-[90vh] w-[min(92vw,680px)] -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-2xl border border-line bg-panel shadow-command">
+            <div className="flex items-start justify-between gap-4 border-b border-line px-5 py-4">
+              <div>
+                <Dialog.Title className="text-lg font-semibold tracking-tight text-text">
+                  New assessment
+                </Dialog.Title>
+                <Dialog.Description className="mt-1 text-sm leading-5 text-muted">
+                  Define the evidence boundary, SSDLC phase, and review policy.
+                </Dialog.Description>
+              </div>
+              <Dialog.Close asChild>
+                <IconButton label="Close new assessment">
+                  <X aria-hidden="true" />
+                </IconButton>
+              </Dialog.Close>
             </div>
-            <Field label="Scenario">
-              <Input name="scenario_id" placeholder="threat-modeling" />
-            </Field>
-            <Field label="Project">
-              <Input name="project_id" placeholder="SNOW-1234 or repo/project" />
-            </Field>
-            <label className="flex items-center gap-2 text-sm text-muted">
-              <input name="collaborative_mode" type="checkbox" defaultChecked className="h-4 w-4 accent-accent" />
-              Human review before closure
-            </label>
-            <Button className="w-full" disabled={busy}>
-              <FileUp className="h-4 w-4" />
-              Submit
-            </Button>
-          </form>
-        </Card>
+            <form onSubmit={handleSubmit} className="space-y-4 p-5">
+              <Field label="Documents">
+                <Input
+                  name="files"
+                  type="file"
+                  multiple
+                  accept=".txt,.md,.pdf,.docx,.xlsx,.pptx"
+                />
+              </Field>
+              <div className="grid gap-4 sm:grid-cols-2">
+                <Field label="SSDLC phase">
+                  <Select name="phase" defaultValue="auto">
+                    {phases.map((phase) => (
+                      <option key={phase} value={phase}>
+                        {phase}
+                      </option>
+                    ))}
+                  </Select>
+                </Field>
+                <Field label="Assessment skill">
+                  <Select name="skill_id" defaultValue="ssdlc-design">
+                    <option value="">Default</option>
+                    {skills.map((skill) => (
+                      <option key={skill.id} value={skill.id}>
+                        {skill.name}
+                      </option>
+                    ))}
+                  </Select>
+                </Field>
+                <Field label="Scenario">
+                  <Input name="scenario_id" placeholder="threat-modeling" />
+                </Field>
+                <Field label="Project reference">
+                  <Input name="project_id" placeholder="SNOW-1234 or repo/project" />
+                </Field>
+              </div>
+              <label className="flex items-start gap-3 rounded-xl border border-line bg-canvas p-3 text-sm text-muted">
+                <input
+                  name="collaborative_mode"
+                  type="checkbox"
+                  defaultChecked
+                  className="mt-0.5 h-4 w-4 accent-accent"
+                />
+                <span>
+                  <span className="block font-medium text-text">
+                    Require human review
+                  </span>
+                  <span className="mt-0.5 block text-xs leading-5">
+                    Agent output remains a draft until an authorized reviewer acts.
+                  </span>
+                </span>
+              </label>
+              <ErrorNote message={submitError} />
+              <div className="flex flex-col-reverse gap-2 border-t border-line pt-4 sm:flex-row sm:justify-end">
+                <Dialog.Close asChild>
+                  <Button type="button" variant="quiet">
+                    Cancel
+                  </Button>
+                </Dialog.Close>
+                <Button disabled={busy}>
+                  <FileUp className="h-4 w-4" aria-hidden="true" />
+                  {busy ? "Submitting..." : "Submit for assessment"}
+                </Button>
+              </div>
+            </form>
+          </Dialog.Content>
+        </Dialog.Portal>
+      </Dialog.Root>
 
+      <div className="grid gap-4 xl:grid-cols-[400px_1fr]">
+        <div className="space-y-4">
         <Card>
           <CardHeader
-            title="Queue"
+            title="Assessment queue"
+            meta="Prioritized by risk and recency"
             action={
               <IconButton
                 label="Refresh assessment queue"
diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx
index 50e8f16..4571cc2 100644
--- a/frontend/src/pages/Dashboard.tsx
+++ b/frontend/src/pages/Dashboard.tsx
@@ -82,7 +82,7 @@ export default function Dashboard() {
           <IconButton label="Refresh dashboard" onClick={() => void load()} disabled={loading}>
             <RefreshCw aria-hidden="true" />
           </IconButton>
-          <Link to="/assessments">
+          <Link className="sm:hidden" to="/assessments#new-assessment">
             <Button>
               <FileCheck2 className="h-4 w-4" />
               New assessment