diff --git a/README.md b/README.md
index 2e1b4c3..5c6ba05 100644
--- a/README.md
+++ b/README.md
@@ -15,7 +15,7 @@ Authentik (OIDC), with local admin/operator/viewer roles.
 
 All modules from the original plan are built:
 
-- Monorepo scaffold, Tabler-themed app shell/navigation
+- Monorepo scaffold, Tabler-themed app shell with a grouped sidebar (Infrastructure, Network, Automation, Operations, Administration; groups open on demand, the one holding the current page is always open, and what you leave open is remembered)
 - Authentik OIDC login, roles (first user to sign in becomes admin), audit log
 - **Dashboard** — an overview of every system this app tracks, all sharing
   one widget-card design (label + status badge, a small stat row, then its
diff --git a/web/src/layout/AppShell.tsx b/web/src/layout/AppShell.tsx
index fd06df4..6bf2ee5 100644
--- a/web/src/layout/AppShell.tsx
+++ b/web/src/layout/AppShell.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState, type ReactNode } from "react";
-import { Link, NavLink } from "react-router-dom";
+import { Link, NavLink, useLocation } from "react-router-dom";
 import {
   IconLayoutDashboard,
   IconServer2,
@@ -26,46 +26,127 @@ import {
   IconWorldWww,
   IconListCheck,
   IconShieldLock,
+  IconRefresh,
 } from "@tabler/icons-react";
 import { api, type CurrentUser, type MaintenanceWindow } from "../api/client";
 import { formatRemaining } from "../utils/duration";
 import { getTheme, setTheme, type Theme } from "../utils/theme";
 import CommandPalette from "../components/CommandPalette";
 
-interface NavItem {
+type Role = "operator" | "admin";
+
+interface NavLeaf {
   to: string;
   label: string;
+  /** Shown for top-level links, and when a group is left with a single visible page and so is drawn as that page's own link. */
   icon: ReactNode;
-  minRole?: "operator" | "admin";
+  minRole?: Role;
 }
 
-const NAV_ITEMS: NavItem[] = [
+interface NavGroup {
+  id: string;
+  label: string;
+  icon: ReactNode;
+  items: NavLeaf[];
+}
+
+type NavEntry = NavLeaf | NavGroup;
+
+const isGroup = (entry: NavEntry): entry is NavGroup => "items" in entry;
+
+const NAV: NavEntry[] = [
   { to: "/", label: "Dashboard", icon: <IconLayoutDashboard size={20} /> },
-  { to: "/servers", label: "Servers", icon: <IconServer2 size={20} /> },
-  { to: "/proxmox", label: "Proxmox", icon: <IconServerCog size={20} /> },
-  { to: "/docker", label: "Docker", icon: <IconBrandDocker size={20} /> },
-  { to: "/synology", label: "Synology", icon: <IconDatabase size={20} /> },
+  {
+    id: "infrastructure",
+    label: "Infrastructure",
+    icon: <IconServer2 size={20} />,
+    items: [
+      { to: "/servers", label: "Servers", icon: <IconServer2 size={20} /> },
+      { to: "/proxmox", label: "Proxmox", icon: <IconServerCog size={20} /> },
+      { to: "/synology", label: "Synology", icon: <IconDatabase size={20} /> },
+      { to: "/docker", label: "Docker", icon: <IconBrandDocker size={20} /> },
+      { to: "/tailscale", label: "Tailscale", icon: <IconAffiliate size={20} /> },
+    ],
+  },
+  {
+    id: "network",
+    label: "Network",
+    icon: <IconWorld size={20} />,
+    items: [
+      { to: "/dns", label: "DNS", icon: <IconWorld size={20} /> },
+      { to: "/domains", label: "Domains", icon: <IconWorldWww size={20} /> },
+      { to: "/ipam", label: "IP Addresses", icon: <IconNetwork size={20} /> },
+      { to: "/consistency", label: "Consistency", icon: <IconListCheck size={20} /> },
+    ],
+  },
+  {
+    id: "automation",
+    label: "Automation",
+    icon: <IconRefresh size={20} />,
+    items: [
+      { to: "/semaphore", label: "Semaphore", icon: <IconPlayerPlay size={20} /> },
+      { to: "/gitea", label: "Gitea", icon: <IconBrandGit size={20} /> },
+    ],
+  },
   { to: "/secrets", label: "Secrets", icon: <IconKey size={20} /> },
-  { to: "/dns", label: "DNS", icon: <IconWorld size={20} /> },
-  { to: "/consistency", label: "Consistency", icon: <IconListCheck size={20} /> },
-  { to: "/domains", label: "Domains", icon: <IconWorldWww size={20} /> },
-  { to: "/ipam", label: "IP Addresses", icon: <IconNetwork size={20} /> },
-  { to: "/tailscale", label: "Tailscale", icon: <IconAffiliate size={20} /> },
-  { to: "/semaphore", label: "Semaphore", icon: <IconPlayerPlay size={20} /> },
-  { to: "/gitea", label: "Gitea", icon: <IconBrandGit size={20} /> },
-  { to: "/integrations", label: "Integrations", icon: <IconPlugConnected size={20} /> },
-  { to: "/generator", label: "Generator", icon: <IconWand size={20} /> },
-  { to: "/maintenance", label: "Maintenance", icon: <IconTool size={20} /> },
-  { to: "/privacy", label: "Privacy", icon: <IconShieldLock size={20} /> },
-  { to: "/users", label: "Users", icon: <IconUsers size={20} />, minRole: "admin" },
-  { to: "/sessions", label: "Sessions", icon: <IconDevices size={20} />, minRole: "admin" },
-  { to: "/audit-log", label: "Audit Log", icon: <IconHistory size={20} />, minRole: "operator" },
-  { to: "/diag-log", label: "Diagnostic Log", icon: <IconStethoscope size={20} />, minRole: "admin" },
-  { to: "/settings", label: "Settings", icon: <IconSettings size={20} />, minRole: "admin" },
+  {
+    id: "operations",
+    label: "Operations",
+    icon: <IconTool size={20} />,
+    items: [
+      { to: "/maintenance", label: "Maintenance", icon: <IconTool size={20} /> },
+      { to: "/generator", label: "Generator", icon: <IconWand size={20} /> },
+    ],
+  },
+  {
+    id: "administration",
+    label: "Administration",
+    icon: <IconSettings size={20} />,
+    items: [
+      { to: "/integrations", label: "Integrations", icon: <IconPlugConnected size={20} /> },
+      { to: "/users", label: "Users", icon: <IconUsers size={20} />, minRole: "admin" },
+      { to: "/sessions", label: "Sessions", icon: <IconDevices size={20} />, minRole: "admin" },
+      { to: "/audit-log", label: "Audit Log", icon: <IconHistory size={20} />, minRole: "operator" },
+      { to: "/diag-log", label: "Diagnostic Log", icon: <IconStethoscope size={20} />, minRole: "admin" },
+      { to: "/settings", label: "Settings", icon: <IconSettings size={20} />, minRole: "admin" },
+    ],
+  },
 ];
 
 const roleRank: Record<CurrentUser["role"], number> = { viewer: 0, operator: 1, admin: 2 };
 
+/** What this role can see: pages it isn't allowed are dropped, an emptied group disappears, and a group down to one page becomes that page's own link. */
+function visibleNav(role: CurrentUser["role"]): NavEntry[] {
+  const allowed = (leaf: NavLeaf) => !leaf.minRole || roleRank[role] >= roleRank[leaf.minRole];
+  const out: NavEntry[] = [];
+  for (const entry of NAV) {
+    if (!isGroup(entry)) {
+      if (allowed(entry)) out.push(entry);
+      continue;
+    }
+    const items = entry.items.filter(allowed);
+    if (items.length === 1) out.push(items[0]);
+    else if (items.length > 1) out.push({ ...entry, items });
+  }
+  return out;
+}
+
+const OPEN_GROUPS_KEY = "hlm-nav-open-groups";
+
+function loadOpenGroups(): Set<string> {
+  try {
+    const value = JSON.parse(localStorage.getItem(OPEN_GROUPS_KEY) ?? "[]");
+    return new Set(Array.isArray(value) ? value.filter((v): v is string => typeof v === "string") : []);
+  } catch {
+    return new Set(); // storage blocked or corrupted: start with everything closed
+  }
+}
+
+/** Is this the current page (or a page beneath it, like /servers/3 under /servers)? */
+function isCurrent(pathname: string, to: string): boolean {
+  return to === "/" ? pathname === "/" : pathname === to || pathname.startsWith(`${to}/`);
+}
+
 export default function AppShell({ user, children }: { user: CurrentUser; children: ReactNode }) {
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const [theme, setThemeState] = useState<Theme>(() => getTheme());
@@ -91,9 +172,33 @@ export default function AppShell({ user, children }: { user: CurrentUser; childr
     };
   }, []);
 
-  const visibleItems = NAV_ITEMS.filter(
-    (item) => !item.minRole || roleRank[user.role] >= roleRank[item.minRole],
-  );
+  const nav = visibleNav(user.role);
+  const { pathname } = useLocation();
+  const [openGroups, setOpenGroups] = useState<Set<string>>(loadOpenGroups);
+
+  // The group holding the current page is always open, so you can see where you are (others stay as you left them).
+  useEffect(() => {
+    const active = nav.find((entry): entry is NavGroup => isGroup(entry) && entry.items.some((item) => isCurrent(pathname, item.to)));
+    if (active) setOpenGroups((prev) => (prev.has(active.id) ? prev : new Set(prev).add(active.id)));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pathname, user.role]);
+
+  useEffect(() => {
+    try {
+      localStorage.setItem(OPEN_GROUPS_KEY, JSON.stringify([...openGroups]));
+    } catch {
+      // not persisted; the menu still works for this visit
+    }
+  }, [openGroups]);
+
+  function toggleGroup(id: string) {
+    setOpenGroups((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }
 
   function toggleTheme() {
     const next: Theme = theme === "dark" ? "light" : "dark";
@@ -121,19 +226,45 @@ export default function AppShell({ user, children }: { user: CurrentUser; childr
               <CommandPalette />
             </div>
             <ul className="navbar-nav pt-lg-3">
-              {visibleItems.map((item) => (
-                <li className="nav-item" key={item.to}>
-                  <NavLink
-                    to={item.to}
-                    end={item.to === "/"}
-                    className="nav-link"
-                    onClick={() => setSidebarOpen(false)}
-                  >
-                    <span className="nav-link-icon d-md-none d-lg-inline-block">{item.icon}</span>
-                    <span className="nav-link-title">{item.label}</span>
-                  </NavLink>
-                </li>
-              ))}
+              {nav.map((entry) => {
+                if (!isGroup(entry)) {
+                  return (
+                    <li className="nav-item" key={entry.to}>
+                      <NavLink to={entry.to} end={entry.to === "/"} className="nav-link" onClick={() => setSidebarOpen(false)}>
+                        <span className="nav-link-icon d-md-none d-lg-inline-block">{entry.icon}</span>
+                        <span className="nav-link-title">{entry.label}</span>
+                      </NavLink>
+                    </li>
+                  );
+                }
+                const open = openGroups.has(entry.id);
+                const holdsCurrent = entry.items.some((item) => isCurrent(pathname, item.to));
+                return (
+                  <li className="nav-item dropdown" key={entry.id}>
+                    <button
+                      type="button"
+                      className={`nav-link dropdown-toggle w-100 border-0 bg-transparent text-start ${open ? "show" : ""} ${holdsCurrent ? "active" : ""}`}
+                      aria-expanded={open}
+                      onClick={() => toggleGroup(entry.id)}
+                    >
+                      <span className="nav-link-icon d-md-none d-lg-inline-block">{entry.icon}</span>
+                      <span className="nav-link-title">{entry.label}</span>
+                    </button>
+                    <div className={`dropdown-menu ${open ? "show" : ""}`}>
+                      {entry.items.map((item) => (
+                        <NavLink
+                          key={item.to}
+                          to={item.to}
+                          className={({ isActive }) => `dropdown-item ${isActive ? "active" : ""}`}
+                          onClick={() => setSidebarOpen(false)}
+                        >
+                          {item.label}
+                        </NavLink>
+                      ))}
+                    </div>
+                  </li>
+                );
+              })}
             </ul>
             <div className="navbar-footer px-3">
               <button
@@ -144,6 +275,14 @@ export default function AppShell({ user, children }: { user: CurrentUser; childr
                 {theme === "dark" ? <IconSun size={16} /> : <IconMoon size={16} />}
                 {theme === "dark" ? "Light mode" : "Dark mode"}
               </button>
+              <NavLink
+                to="/privacy"
+                className="btn btn-outline-secondary btn-sm w-100 mb-2 d-flex align-items-center justify-content-center gap-2"
+                onClick={() => setSidebarOpen(false)}
+              >
+                <IconShieldLock size={16} />
+                Privacy
+              </NavLink>
               <div className="text-secondary small mb-2">
                 Signed in as {user.name ?? user.email ?? user.sub} · {user.role}
               </div>
diff --git a/web/src/styles.css b/web/src/styles.css
index 88605ef..422833d 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -33,3 +33,9 @@
   color: var(--tblr-secondary);
   margin-bottom: 1.5rem;
 }
+
+/* Sidebar submenus: a little tighter than Tabler's dropdown rows, so several open groups still fit on one screen. */
+.navbar-vertical .dropdown-menu .dropdown-item {
+  padding-top: 0.3rem;
+  padding-bottom: 0.3rem;
+}