From ddda6fffa71ec890c0275d2730b2bfa60bfa1a32 Mon Sep 17 00:00:00 2001
From: Jordan Harrison <jordan@harrison.to>
Date: Sun, 6 Sep 2026 13:38:10 +0100
Subject: [PATCH 1/2] feat(ui): unify themes and polish mobile navigation

---
 .../(board)/member/[id]/reputation/page.tsx   |   6 +-
 .../plugins/[key]/[[...path]]/page.tsx        |   3 +-
 apps/community/app/(board)/search/page.tsx    |   3 +-
 .../app/(board)/unsubscribe/page.tsx          |   4 +-
 apps/community/app/admin/layout.tsx           |  10 +-
 .../admin/plugins/[key]/[[...path]]/page.tsx  |   4 +-
 apps/community/app/install/page.tsx           |   6 +-
 apps/community/app/layout.tsx                 |   2 +
 .../components/account/active-sessions.tsx    |   4 +-
 .../src/components/account/avatar-form.tsx    |   5 +-
 .../src/components/account/feed-token.tsx     |  10 +-
 .../components/account/notification-forms.tsx |  10 +-
 .../components/account/push-device-form.tsx   |   5 +-
 .../components/account/reputation-forms.tsx   |   9 +-
 .../components/account/sign-in-methods.tsx    |   4 +-
 .../components/account/subscription-forms.tsx |  14 +-
 .../components/account/two-factor-forms.tsx   |   7 +-
 .../src/components/account/usercp-forms.tsx   | 107 +++++-----
 .../src/components/admin/admin-forms.tsx      |  45 ++--
 .../src/components/admin/form-bits.tsx        |   5 +-
 .../src/components/admin/mail-test-card.tsx   |   4 +-
 .../src/components/admin/theme-forms.tsx      |   9 +-
 .../src/components/auth/form-controls.tsx     |  33 ++-
 .../src/components/content/edit-post-form.tsx |   5 +-
 .../components/content/new-thread-form.tsx    |   8 +-
 .../src/components/messages/message-forms.tsx |  19 +-
 .../moderation/inline-moderation-form.tsx     |   5 +-
 .../src/components/moderation/queue-form.tsx  |   6 +-
 .../components/moderation/report-forms.tsx    |   6 +-
 .../moderation/thread-surgery-form.tsx        |   8 +-
 .../moderation/thread-tools-form.tsx          |   8 +-
 .../components/moderation/warning-forms.tsx   |  16 +-
 .../src/components/shell/install-action.tsx   |   5 +-
 .../shell/nav-disclosure-enhancer.tsx         |   3 +
 .../src/components/shell/scheme-toggle.tsx    |   2 +-
 .../src/components/shell/theme-switcher.tsx   |  17 +-
 .../src/components/shell/view-tabs.tsx        |  66 +-----
 apps/community/src/styles/globals.css         |  63 ++++++
 apps/community/src/view/copy.ts               |   2 +
 apps/community/src/view/panel-nav.test.ts     |   6 +-
 apps/community/src/view/panel-nav.ts          |  18 +-
 docs/contributing/development.md              |  27 +++
 docs/customization/plugins.md                 |  17 ++
 docs/customization/themes.md                  | 192 ++++++++++++------
 docs/reference/theme-slots.md                 |   6 +-
 e2e/accessibility.spec.ts                     |   2 +-
 e2e/mobile-nav-no-js.spec.ts                  |  21 +-
 e2e/mobile-nav.spec.ts                        |  24 ++-
 e2e/passkeys.spec.ts                          |   6 +-
 e2e/screenshot-site.spec.ts                   |   2 +-
 e2e/screenshot-ui-polish.config.ts            |  11 +
 e2e/screenshot-ui-polish.spec.ts              | 171 ++++++++++++++++
 e2e/support/session.ts                        |   8 +-
 e2e/two-factor.spec.ts                        |   4 +-
 e2e/ui-interactions.spec.ts                   | 176 ++++++++++++++++
 e2e/ui-layout.spec.ts                         |  72 +++++++
 packages/i18n/src/catalogs/en.json            |   4 +-
 packages/plugin-kit/package.json              |   3 +-
 packages/plugin-kit/src/ui.ts                 |  16 +-
 packages/theme-kit/src/view-models.ts         |  20 +-
 packages/ui/package.json                      |   2 +
 packages/ui/src/card.tsx                      |  14 +-
 packages/ui/src/disclosure.tsx                |   4 +-
 packages/ui/src/empty.tsx                     |   4 +-
 packages/ui/src/field.tsx                     |  31 +--
 packages/ui/src/index.ts                      |  25 ++-
 packages/ui/src/nav-tabs-enhancer.test.ts     | 102 ++++++++++
 packages/ui/src/nav-tabs-enhancer.tsx         |  64 ++++++
 packages/ui/src/nav-tabs.test.ts              |  33 +++
 packages/ui/src/nav-tabs.tsx                  |  60 ++++++
 packages/ui/src/navigation-drawer.tsx         |  92 +++++++++
 packages/ui/src/page-header.tsx               |  56 +++++
 packages/ui/src/password-input.test.ts        |  26 +++
 packages/ui/src/password-input.tsx            |  61 ++++++
 packages/ui/src/variants.ts                   |  65 +++++-
 playwright.config.ts                          |   2 +-
 plugins/calendar/package.json                 |   3 +-
 plugins/calendar/src/ui/admin.tsx             |  14 +-
 plugins/calendar/src/ui/page.tsx              |  49 ++---
 plugins/dues/package.json                     |   3 +-
 plugins/dues/src/ui/admin.tsx                 |  52 +++--
 plugins/dues/src/ui/pages.tsx                 |  22 +-
 pnpm-lock.yaml                                |   9 +
 scripts/i18n-baseline.json                    |   3 -
 themes/clubhouse/src/copy.ts                  |   3 +-
 themes/clubhouse/src/shared.tsx               |   6 +-
 themes/clubhouse/src/slots/forum-row.tsx      |   8 +-
 themes/clubhouse/src/slots/header.tsx         | 106 +---------
 themes/clubhouse/src/slots/thread-row.tsx     |   8 +-
 themes/default/src/copy.ts                    |  26 ++-
 themes/default/src/index.ts                   |   3 +
 themes/default/src/messages/en.json           |  11 +
 themes/default/src/shared.tsx                 |  18 +-
 themes/default/src/slots/auth-page.tsx        |  17 +-
 themes/default/src/slots/board-index.tsx      |  28 ++-
 themes/default/src/slots/category-block.tsx   |   2 +-
 themes/default/src/slots/discovery-view.tsx   |  63 +++---
 themes/default/src/slots/error-notice.tsx     |   4 +-
 themes/default/src/slots/footer.tsx           |   2 +-
 themes/default/src/slots/forum-display.tsx    |  20 +-
 themes/default/src/slots/forum-jump.tsx       |   3 +-
 themes/default/src/slots/forum-row.tsx        |  20 +-
 themes/default/src/slots/header.tsx           | 112 +---------
 .../default/src/slots/mobile-header-nav.tsx   |  80 ++++++++
 themes/default/src/slots/pagination.tsx       |   4 +-
 themes/default/src/slots/panel-nav.tsx        | 125 +++++++++---
 themes/default/src/slots/panel-page.tsx       |  18 +-
 themes/default/src/slots/panel-shell.tsx      |   4 +-
 themes/default/src/slots/post-bit.tsx         |   2 +-
 themes/default/src/slots/post-form.tsx        |   6 +-
 themes/default/src/slots/redirect-notice.tsx  |   4 +-
 themes/default/src/slots/search-results.tsx   |  63 +++---
 themes/default/src/slots/thread-row.tsx       |  14 +-
 themes/default/src/slots/thread-view.tsx      |  26 ++-
 themes/midnight/src/copy.ts                   |   3 +-
 themes/midnight/src/slots/header.tsx          | 104 +---------
 themes/phasebook/src/copy.ts                  |   5 +-
 themes/phasebook/src/slots/header.tsx         | 104 +---------
 themes/phasebook/src/slots/panel-nav.tsx      |  19 +-
 themes/raidframe/src/copy.ts                  |   5 +-
 themes/raidframe/src/slots/header.tsx         | 104 +---------
 themes/raidframe/src/slots/panel-nav.tsx      |  19 +-
 122 files changed, 2076 insertions(+), 1243 deletions(-)
 create mode 100644 e2e/screenshot-ui-polish.config.ts
 create mode 100644 e2e/screenshot-ui-polish.spec.ts
 create mode 100644 e2e/ui-interactions.spec.ts
 create mode 100644 e2e/ui-layout.spec.ts
 create mode 100644 packages/ui/src/nav-tabs-enhancer.test.ts
 create mode 100644 packages/ui/src/nav-tabs-enhancer.tsx
 create mode 100644 packages/ui/src/nav-tabs.test.ts
 create mode 100644 packages/ui/src/nav-tabs.tsx
 create mode 100644 packages/ui/src/navigation-drawer.tsx
 create mode 100644 packages/ui/src/page-header.tsx
 create mode 100644 packages/ui/src/password-input.test.ts
 create mode 100644 packages/ui/src/password-input.tsx
 create mode 100644 themes/default/src/slots/mobile-header-nav.tsx

diff --git a/apps/community/app/(board)/member/[id]/reputation/page.tsx b/apps/community/app/(board)/member/[id]/reputation/page.tsx
index 7c918a512..856ae9f7e 100644
--- a/apps/community/app/(board)/member/[id]/reputation/page.tsx
+++ b/apps/community/app/(board)/member/[id]/reputation/page.tsx
@@ -1,7 +1,7 @@
 import type { Metadata } from 'next'
 import { notFound } from 'next/navigation'
 
-import { TextLink } from '@meith/ui'
+import { PageTitle, TextLink } from '@meith/ui'
 
 import { RateMemberForm, WithdrawRatingForm } from '@/components/account/reputation-forms'
 import { BoardNotice } from '@/components/shell/board-notice'
@@ -92,9 +92,7 @@ export default async function ReputationPage({
         )}
 
         <div className="flex flex-col gap-1">
-          <h1 className="font-heading text-2xl font-semibold">
-            {profile.username}&rsquo;s reputation
-          </h1>
+          <PageTitle>{profile.username}&rsquo;s reputation</PageTitle>
           <p className="text-sm text-muted-foreground">
             {reputationLabel(view.summary, translator)}
           </p>
diff --git a/apps/community/app/(board)/plugins/[key]/[[...path]]/page.tsx b/apps/community/app/(board)/plugins/[key]/[[...path]]/page.tsx
index add429eb8..8ad7542ac 100644
--- a/apps/community/app/(board)/plugins/[key]/[[...path]]/page.tsx
+++ b/apps/community/app/(board)/plugins/[key]/[[...path]]/page.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from 'next'
 import { notFound, redirect } from 'next/navigation'
 
 import { pluginPagePath } from '@meith/plugin-kit'
+import { PageTitle } from '@meith/ui'
 
 import { boardUrl } from '@/server/board-url'
 import { getActor } from '@/server/context'
@@ -59,7 +60,7 @@ export default async function PluginBoardPage({
       tabIndex={-1}
       className="mx-auto flex w-full max-w-4xl flex-col gap-6 px-6 py-8 flex-1"
     >
-      <h1 className="font-heading text-2xl font-semibold">{result.title}</h1>
+      <PageTitle>{result.title}</PageTitle>
       {result.node === null ? (
         <p className="rounded-lg border border-border p-4 text-sm text-muted-foreground">
           {(await getTranslator()).t('board.plugin.failed')}
diff --git a/apps/community/app/(board)/search/page.tsx b/apps/community/app/(board)/search/page.tsx
index fc0bdb933..1a23310cf 100644
--- a/apps/community/app/(board)/search/page.tsx
+++ b/apps/community/app/(board)/search/page.tsx
@@ -22,6 +22,7 @@ import {
   type SearchFormModel,
   slotCopy,
 } from '@meith/theme-kit'
+import { PageTitle } from '@meith/ui'
 
 import { SearchOffNotice } from '@/components/board/search-off-notice'
 import { getContainer } from '@/server/container'
@@ -126,7 +127,7 @@ async function Page({ children }: { children: React.ReactNode }) {
       tabIndex={-1}
       className="mx-auto flex w-full max-w-3xl flex-col gap-6 px-6 py-8 flex-1"
     >
-      <h1 className="font-heading text-2xl font-semibold">{translator.t('board.search.title')}</h1>
+      <PageTitle>{translator.t('board.search.title')}</PageTitle>
       {children}
     </main>
   )
diff --git a/apps/community/app/(board)/unsubscribe/page.tsx b/apps/community/app/(board)/unsubscribe/page.tsx
index ed8a68281..c2c0cbcae 100644
--- a/apps/community/app/(board)/unsubscribe/page.tsx
+++ b/apps/community/app/(board)/unsubscribe/page.tsx
@@ -2,7 +2,7 @@ import type { Metadata } from 'next'
 
 import { env } from '@meith/core'
 import { readUnsubscribeToken } from '@meith/subscriptions'
-import { TextLink } from '@meith/ui'
+import { PageTitle, TextLink } from '@meith/ui'
 
 import { UnsubscribeConfirmForm } from '@/components/account/subscription-forms'
 import { BoardNotice } from '@/components/shell/board-notice'
@@ -30,7 +30,7 @@ export default async function UnsubscribePage({
   return (
     <main id="board-content" tabIndex={-1} className="flex-1">
       <div className="mx-auto flex w-full max-w-xl flex-col gap-6 px-6 py-10">
-        <h1 className="font-heading text-2xl font-semibold">{translator.t('page.unsubscribe')}</h1>
+        <PageTitle>{translator.t('page.unsubscribe')}</PageTitle>
 
         {done !== null ? (
           <>
diff --git a/apps/community/app/admin/layout.tsx b/apps/community/app/admin/layout.tsx
index d9241160f..e9461ee3a 100644
--- a/apps/community/app/admin/layout.tsx
+++ b/apps/community/app/admin/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from 'next'
 import { notFound } from 'next/navigation'
 
 import { ADMIN_IDLE_MINUTES } from '@meith/admin'
+import { NavigationDrawerTrigger } from '@meith/ui'
 
 import {
   AdminSecondFactorForm,
@@ -9,6 +10,7 @@ import {
   AdminSignOutForm,
 } from '@/components/admin/admin-forms'
 import { AdminNav } from '@/components/admin/admin-nav'
+import { NavDisclosureEnhancer } from '@/components/shell/nav-disclosure-enhancer'
 import { PanelShell } from '@/components/shell/panel-shell'
 import { askForPassword, pendingAdminSecondFactor, resolveAdmin } from '@/server/admin'
 import { getActor } from '@/server/context'
@@ -66,6 +68,7 @@ export default async function AdminLayout({ children }: { children: React.ReactN
 
   return (
     <div className="min-h-screen bg-background text-foreground">
+      <NavDisclosureEnhancer />
       <a
         href="#board-content"
         className="sr-only focus-visible:not-sr-only focus-visible:absolute focus-visible:top-4 focus-visible:left-4 focus-visible:z-50 focus-visible:inline-flex focus-visible:h-9 focus-visible:items-center focus-visible:rounded-md focus-visible:border focus-visible:border-border focus-visible:bg-card focus-visible:px-3 focus-visible:text-sm focus-visible:font-medium focus-visible:text-foreground focus-visible:shadow-lg"
@@ -74,7 +77,7 @@ export default async function AdminLayout({ children }: { children: React.ReactN
       </a>
 
       <header className="sticky top-0 z-30 border-b border-border bg-card/95 backdrop-blur supports-[backdrop-filter]:bg-card/85">
-        <div className="mx-auto flex h-14 w-full max-w-6xl items-center gap-x-3 px-4 sm:gap-x-4 sm:px-6">
+        <div className="mx-auto flex h-14 w-full max-w-7xl items-center gap-x-3 px-4 sm:gap-x-4 sm:px-6">
           <a
             href="/admin"
             className="flex min-w-0 items-center gap-2.5 font-heading text-base font-semibold whitespace-nowrap text-foreground sm:text-lg"
@@ -100,6 +103,11 @@ export default async function AdminLayout({ children }: { children: React.ReactN
           </a>
           <div className="ml-auto flex shrink-0 items-center gap-3 text-sm whitespace-nowrap sm:gap-4">
             <AdminSignOutForm copy={adminFormsCopy(t)} />
+            <NavigationDrawerTrigger
+              target="panel-admincp-navigation"
+              label={t.t('default.panelNav.open')}
+              className="lg:hidden"
+            />
           </div>
         </div>
       </header>
diff --git a/apps/community/app/admin/plugins/[key]/[[...path]]/page.tsx b/apps/community/app/admin/plugins/[key]/[[...path]]/page.tsx
index 886f2c7d6..36e84a3f8 100644
--- a/apps/community/app/admin/plugins/[key]/[[...path]]/page.tsx
+++ b/apps/community/app/admin/plugins/[key]/[[...path]]/page.tsx
@@ -72,9 +72,7 @@ export default async function AdminPluginPage({
         {rendered.node === null ? (
           <p className={PANEL_NOTE}>{t.t('adminPluginDetail.pluginPageError')}</p>
         ) : (
-          <section className="rounded-xl border border-border bg-surface p-4">
-            {rendered.node}
-          </section>
+          <section className="min-w-0">{rendered.node}</section>
         )}
       </PanelPage>
     )
diff --git a/apps/community/app/install/page.tsx b/apps/community/app/install/page.tsx
index b16655dc9..ea8a43feb 100644
--- a/apps/community/app/install/page.tsx
+++ b/apps/community/app/install/page.tsx
@@ -13,7 +13,7 @@ import {
   warnings,
 } from '@meith/install'
 import { isUsableOrigin, MAIL_PRESETS, normaliseOrigin } from '@meith/settings'
-import { Alert, AlertDescription, AlertTitle, Disclosure } from '@meith/ui'
+import { Alert, AlertDescription, AlertTitle, Disclosure, PageTitle } from '@meith/ui'
 
 import { InstallForm } from '@/components/install/install-form'
 import { InstallRestoreForm } from '@/components/install/restore-form'
@@ -88,9 +88,7 @@ export default async function InstallPage() {
   return (
     <main className="mx-auto flex w-full max-w-2xl flex-col gap-8 px-6 py-12">
       <header className="flex flex-col gap-2">
-        <h1 className="font-heading text-2xl font-semibold tracking-tight text-foreground">
-          {t.t('page.install-this-board')}
-        </h1>
+        <PageTitle>{t.t('page.install-this-board')}</PageTitle>
         <p className="text-sm text-muted-foreground">{t.t('page.this-page-works-once-when')}</p>
       </header>
 
diff --git a/apps/community/app/layout.tsx b/apps/community/app/layout.tsx
index ba539a4b1..5a1aab7e1 100644
--- a/apps/community/app/layout.tsx
+++ b/apps/community/app/layout.tsx
@@ -5,6 +5,7 @@ import { env } from '@meith/core'
 import { currentRequestId } from '@meith/core/logger'
 import { localeDirection, SOURCE_LOCALE } from '@meith/i18n'
 import { resolveBoardUrl } from '@meith/settings'
+import { NavTabsEnhancer } from '@meith/ui/nav-tabs-enhancer'
 
 import { CopyProvider } from '@/components/shell/copy'
 import { CrashNoticeProvider } from '@/components/shell/crash-notice'
@@ -108,6 +109,7 @@ export default async function RootLayout({
         <ServiceWorkerRegistrar />
       </head>
       <body className="font-sans antialiased">
+        <NavTabsEnhancer />
         <DemoBanner />
         <CrashNoticeProvider
           notice={notice}
diff --git a/apps/community/src/components/account/active-sessions.tsx b/apps/community/src/components/account/active-sessions.tsx
index bde3adf4f..462a9b86a 100644
--- a/apps/community/src/components/account/active-sessions.tsx
+++ b/apps/community/src/components/account/active-sessions.tsx
@@ -2,7 +2,7 @@
 
 import { useActionState } from 'react'
 
-import { buttonVariants } from '@meith/ui'
+import { buttonVariants, surfaceVariants } from '@meith/ui'
 
 import { EMPTY_STATE } from '@/server/auth-form-state'
 import { revokeOtherSessionsAction, revokeSessionAction } from '@/server/session-actions'
@@ -10,7 +10,7 @@ import { revokeOtherSessionsAction, revokeSessionAction } from '@/server/session
 import { FormError, PendingButton } from '../auth/form-controls'
 import { type Copy, fromCopy } from '../shell/copy'
 
-const CARD = 'flex flex-col gap-4 rounded-lg border border-border bg-card p-5'
+const CARD = surfaceVariants({ padded: true })
 
 const ROW =
   'flex flex-wrap items-center justify-between gap-3 rounded-md border border-border px-3 py-2'
diff --git a/apps/community/src/components/account/avatar-form.tsx b/apps/community/src/components/account/avatar-form.tsx
index 280069c5d..185d5ef10 100644
--- a/apps/community/src/components/account/avatar-form.tsx
+++ b/apps/community/src/components/account/avatar-form.tsx
@@ -3,6 +3,7 @@
 import { useActionState } from 'react'
 
 import { AVATAR_BOX } from '@meith/avatars/limits'
+import { surfaceVariants } from '@meith/ui'
 
 import { EMPTY_STATE } from '@/server/auth-form-state'
 import { removeAvatarAction, saveAvatarAction } from '@/server/usercp-actions'
@@ -10,7 +11,7 @@ import { removeAvatarAction, saveAvatarAction } from '@/server/usercp-actions'
 import { FormError, SubmitButton } from '../auth/form-controls'
 import { type Copy, fromCopy } from '../shell/copy'
 
-const CARD = 'flex flex-col gap-3 rounded-lg border border-border bg-card p-4'
+const CARD = surfaceVariants({ padded: true })
 
 export function AvatarForm({
   currentUrl,
@@ -86,7 +87,7 @@ export function AvatarForm({
 
       <form action={save} className={CARD} noValidate>
         <FormError message={saveState.error} />
-        <label className="flex flex-col gap-1 text-sm">
+        <label className="flex min-w-0 flex-col gap-2 text-sm">
           <span className="font-medium">{fromCopy(copy, 'accountForm.avatar.choose')}</span>
           <input
             type="file"
diff --git a/apps/community/src/components/account/feed-token.tsx b/apps/community/src/components/account/feed-token.tsx
index 1cff4e657..2bab882b6 100644
--- a/apps/community/src/components/account/feed-token.tsx
+++ b/apps/community/src/components/account/feed-token.tsx
@@ -2,19 +2,19 @@
 
 import { useActionState } from 'react'
 
+import { buttonVariants, surfaceVariants } from '@meith/ui'
+
 import { EMPTY_STATE } from '@/server/auth-form-state'
 import { regenerateFeedTokenAction, revokeFeedTokenAction } from '@/server/feed-token-actions'
 
 import { FormError, PendingButton } from '../auth/form-controls'
 import { type Copy, fromCopy } from '../shell/copy'
 
-const CARD = 'flex flex-col gap-4 rounded-lg border border-border bg-card p-5'
+const CARD = surfaceVariants({ padded: true })
 
-const BUTTON =
-  'inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+const BUTTON = buttonVariants({ variant: 'primary', size: 'default' })
 
-const GHOST_BUTTON =
-  'inline-flex h-9 items-center justify-center rounded-md border border-border bg-background px-4 text-sm font-medium transition-opacity hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+const GHOST_BUTTON = buttonVariants({ variant: 'outline', size: 'default' })
 
 const REVEAL_CODE = 'block overflow-x-auto rounded-sm bg-card px-2 py-1 font-mono text-xs'
 
diff --git a/apps/community/src/components/account/notification-forms.tsx b/apps/community/src/components/account/notification-forms.tsx
index 648bb4f6d..52b39fccd 100644
--- a/apps/community/src/components/account/notification-forms.tsx
+++ b/apps/community/src/components/account/notification-forms.tsx
@@ -2,7 +2,7 @@
 
 import { useActionState } from 'react'
 
-import { textLinkVariants } from '@meith/ui'
+import { buttonVariants, controlVariants, textLinkVariants } from '@meith/ui'
 
 import { EMPTY_STATE } from '@/server/auth-form-state'
 import {
@@ -16,8 +16,7 @@ import { saveBoardDigestCadenceAction } from '@/server/usercp-actions'
 import { FormError, PendingButton } from '../auth/form-controls'
 import { type Copy, fromCopy } from '../shell/copy'
 
-const BUTTON =
-  'inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+const BUTTON = buttonVariants({ variant: 'primary', size: 'default' })
 
 const LINK_BUTTON = `${textLinkVariants({ size: 'sm' })} focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring`
 
@@ -203,8 +202,7 @@ export function AnnouncementsOptInForm({ optedIn, copy }: { optedIn: boolean; co
   )
 }
 
-const FIELD =
-  'w-full max-w-xs rounded-md border border-input bg-card px-3 py-2 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+const FIELD = controlVariants()
 
 export function BoardDigestCadenceForm({ cadence, copy }: { cadence: string; copy: Copy }) {
   const [state, action] = useActionState(saveBoardDigestCadenceAction, EMPTY_STATE)
@@ -216,7 +214,7 @@ export function BoardDigestCadenceForm({ cadence, copy }: { cadence: string; cop
     >
       <FormError message={state.error} />
 
-      <label className="flex flex-col gap-1 text-sm">
+      <label className="flex min-w-0 flex-col gap-2 text-sm">
         <span className="font-medium">{fromCopy(copy, 'accountForm.boardDigest.legend')}</span>
         <span className="text-xs text-muted-foreground">
           {fromCopy(copy, 'accountForm.boardDigest.description')}
diff --git a/apps/community/src/components/account/push-device-form.tsx b/apps/community/src/components/account/push-device-form.tsx
index 6b3558f6d..b2e960a62 100644
--- a/apps/community/src/components/account/push-device-form.tsx
+++ b/apps/community/src/components/account/push-device-form.tsx
@@ -2,13 +2,14 @@
 
 import { useCallback, useEffect, useState } from 'react'
 
+import { buttonVariants } from '@meith/ui'
+
 import { subscribeToPushAction, unsubscribeFromPushAction } from '@/server/push-actions'
 
 import { FormError, FormNotice } from '../auth/form-controls'
 import { type Copy, fromCopy } from '../shell/copy'
 
-const BUTTON =
-  'inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:opacity-60'
+const BUTTON = buttonVariants({ variant: 'primary', size: 'default' })
 
 type Status = 'checking' | 'unsupported' | 'blocked' | 'off' | 'on' | 'working'
 
diff --git a/apps/community/src/components/account/reputation-forms.tsx b/apps/community/src/components/account/reputation-forms.tsx
index 7c236e815..ddb845d9d 100644
--- a/apps/community/src/components/account/reputation-forms.tsx
+++ b/apps/community/src/components/account/reputation-forms.tsx
@@ -2,16 +2,17 @@
 
 import { useActionState } from 'react'
 
+import { controlVariants, surfaceVariants } from '@meith/ui'
+
 import { EMPTY_STATE } from '@/server/auth-form-state'
 import { rateMemberAction, withdrawRatingAction } from '@/server/reputation-actions'
 
 import { FormError, PendingButton } from '../auth/form-controls'
 import { type Copy, fromCopy } from '../shell/copy'
 
-const FIELD =
-  'w-full rounded-md border border-input bg-card px-3 py-2 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+const FIELD = controlVariants()
 
-const CARD = 'flex flex-col gap-3 rounded-lg border border-border bg-card p-5'
+const CARD = surfaceVariants({ padded: true })
 
 const CHOICE =
   'inline-flex h-9 items-center justify-center rounded-md border border-border px-4 text-sm font-medium hover:bg-muted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
@@ -52,7 +53,7 @@ export function RateMemberForm({
           : fromCopy(copy, 'accountForm.rate.changeTitle')}
       </h2>
 
-      <label className="flex flex-col gap-1 text-sm">
+      <label className="flex min-w-0 flex-col gap-2 text-sm">
         <span className="font-medium">
           {commentRequired
             ? fromCopy(copy, 'accountForm.rate.why')
diff --git a/apps/community/src/components/account/sign-in-methods.tsx b/apps/community/src/components/account/sign-in-methods.tsx
index aaf5e31e1..96bf0ca0e 100644
--- a/apps/community/src/components/account/sign-in-methods.tsx
+++ b/apps/community/src/components/account/sign-in-methods.tsx
@@ -2,7 +2,7 @@
 
 import { useActionState } from 'react'
 
-import { buttonVariants } from '@meith/ui'
+import { buttonVariants, surfaceVariants } from '@meith/ui'
 
 import { EMPTY_STATE } from '@/server/auth-form-state'
 import { removePasskeyAction, unlinkIdentityAction } from '@/server/federation-actions'
@@ -10,7 +10,7 @@ import { removePasskeyAction, unlinkIdentityAction } from '@/server/federation-a
 import { FormError, PendingButton } from '../auth/form-controls'
 import { type Copy, fromCopy } from '../shell/copy'
 
-const CARD = 'flex flex-col gap-4 rounded-lg border border-border bg-card p-5'
+const CARD = surfaceVariants({ padded: true })
 
 const ROW =
   'flex flex-wrap items-center justify-between gap-3 rounded-md border border-border px-3 py-2'
diff --git a/apps/community/src/components/account/subscription-forms.tsx b/apps/community/src/components/account/subscription-forms.tsx
index ecc099cf5..2555a6418 100644
--- a/apps/community/src/components/account/subscription-forms.tsx
+++ b/apps/community/src/components/account/subscription-forms.tsx
@@ -2,6 +2,8 @@
 
 import { useActionState, useEffect, useState } from 'react'
 
+import { buttonVariants, controlVariants } from '@meith/ui'
+
 import { EMPTY_STATE } from '@/server/auth-form-state'
 import {
   subscribeAction,
@@ -13,17 +15,13 @@ import { FormError, PendingButton } from '../auth/form-controls'
 import { ProgressiveMarker } from '../content/progressive-marker'
 import { type Copy, fromCopy } from '../shell/copy'
 
-const BUTTON =
-  'inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+const BUTTON = buttonVariants({ variant: 'primary', size: 'default' })
 
-const QUIET_BUTTON =
-  'inline-flex h-9 items-center justify-center rounded-md border border-border px-3 text-sm font-medium transition-colors hover:bg-muted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+const QUIET_BUTTON = buttonVariants({ variant: 'outline', size: 'default' })
 
-const GHOST_BUTTON =
-  'inline-flex h-9 items-center justify-center rounded-md px-3 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+const GHOST_BUTTON = buttonVariants({ variant: 'ghost', size: 'default' })
 
-const FIELD =
-  'rounded-md border border-border bg-background px-2 py-1 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+const FIELD = controlVariants({ size: 'sm', className: 'w-auto max-w-full' })
 
 export interface ModeOption {
   readonly value: string
diff --git a/apps/community/src/components/account/two-factor-forms.tsx b/apps/community/src/components/account/two-factor-forms.tsx
index 4f4c2cb00..c7c04240a 100644
--- a/apps/community/src/components/account/two-factor-forms.tsx
+++ b/apps/community/src/components/account/two-factor-forms.tsx
@@ -2,7 +2,7 @@
 
 import { useActionState } from 'react'
 
-import { buttonVariants } from '@meith/ui'
+import { buttonVariants, surfaceVariants } from '@meith/ui'
 
 import { EMPTY_STATE, type FormState } from '@/server/auth-form-state'
 import {
@@ -18,10 +18,9 @@ import { Field, FormError, PendingButton } from '../auth/form-controls'
 import { OtpField, otpRecoveryFromCopy } from '../auth/otp-field'
 import { type Copy, fromCopy } from '../shell/copy'
 
-const CARD = 'flex flex-col gap-4 rounded-lg border border-border bg-card p-5'
+const CARD = surfaceVariants({ padded: true })
 
-const BUTTON =
-  'inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+const BUTTON = buttonVariants({ variant: 'primary', size: 'default' })
 
 function RecoveryCodes({ state, copy }: { readonly state: FormState; readonly copy: Copy }) {
   const codes = state.values?.[RECOVERY_CODES_FIELD]
diff --git a/apps/community/src/components/account/usercp-forms.tsx b/apps/community/src/components/account/usercp-forms.tsx
index d062f742d..e8b016c2e 100644
--- a/apps/community/src/components/account/usercp-forms.tsx
+++ b/apps/community/src/components/account/usercp-forms.tsx
@@ -3,6 +3,7 @@
 import { useActionState } from 'react'
 
 import type { SubscriptionMode } from '@meith/subscriptions'
+import { buttonVariants, controlVariants, surfaceVariants } from '@meith/ui'
 
 import { EMPTY_STATE } from '@/server/auth-form-state'
 import {
@@ -14,20 +15,18 @@ import {
   saveSignatureAction,
 } from '@/server/usercp-actions'
 
-import { FormError, PendingButton } from '../auth/form-controls'
+import { Field, FormError, PendingButton } from '../auth/form-controls'
 import { MarkdownEditor } from '../content/markdown-editor'
 import { CustomField, type CustomFieldInput } from '../profile/custom-field'
 import { type Copy, fromCopy } from '../shell/copy'
 
 export type { CustomFieldInput }
 
-const FIELD =
-  'w-full rounded-md border border-input bg-card px-3 py-2 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+const FIELD = controlVariants()
 
-const BUTTON =
-  'inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+const BUTTON = buttonVariants({ variant: 'primary', size: 'default' })
 
-const CARD = 'flex flex-col gap-4 rounded-lg border border-border bg-card p-5'
+const CARD = surfaceVariants({ padded: true })
 
 export function ProfileForm({
   location,
@@ -48,12 +47,12 @@ export function ProfileForm({
     <form action={action} className={CARD}>
       <FormError message={state.error} />
 
-      <label className="flex flex-col gap-1 text-sm">
+      <label className="flex min-w-0 flex-col gap-2 text-sm">
         <span className="font-medium">{fromCopy(copy, 'accountForm.profile.location')}</span>
         <input name="location" defaultValue={location} className={FIELD} maxLength={100} />
       </label>
 
-      <label className="flex flex-col gap-1 text-sm">
+      <label className="flex min-w-0 flex-col gap-2 text-sm">
         <span className="font-medium">{fromCopy(copy, 'accountForm.profile.website')}</span>
         <input
           name="website"
@@ -64,7 +63,7 @@ export function ProfileForm({
         />
       </label>
 
-      <label className="flex flex-col gap-1 text-sm">
+      <label className="flex min-w-0 flex-col gap-2 text-sm">
         <span className="font-medium">{fromCopy(copy, 'accountForm.profile.bio')}</span>
         <textarea name="bio" defaultValue={bio} className={FIELD} rows={5} maxLength={1000} />
         <span className="text-xs text-muted-foreground">
@@ -103,7 +102,7 @@ export function DisplayGroupForm({
       </h2>
       <FormError message={state.error} />
 
-      <label className="flex flex-col gap-1 text-sm">
+      <label className="flex min-w-0 flex-col gap-2 text-sm">
         <span className="font-medium">{fromCopy(copy, 'accountForm.displayGroup.label')}</span>
         <select name="displayGroupId" defaultValue={selected} className={FIELD}>
           {choices.map((choice) => (
@@ -157,7 +156,7 @@ export function OptionsForm({
     <form action={action} className={CARD}>
       <FormError message={state.error} />
 
-      <label className="flex flex-col gap-1 text-sm">
+      <label className="flex min-w-0 flex-col gap-2 text-sm">
         <span className="font-medium">{fromCopy(copy, 'accountForm.options.timezone')}</span>
         <select name="timezone" defaultValue={timezone} className={FIELD}>
           {timezones.map((zone) => (
@@ -171,7 +170,7 @@ export function OptionsForm({
         </span>
       </label>
 
-      <label className="flex flex-col gap-1 text-sm">
+      <label className="flex min-w-0 flex-col gap-2 text-sm">
         <span className="font-medium">{fromCopy(copy, 'accountForm.options.locale')}</span>
         <select name="locale" defaultValue={locale} className={FIELD}>
           {locales.map((choice) => (
@@ -185,7 +184,7 @@ export function OptionsForm({
         </span>
       </label>
 
-      <label className="flex flex-col gap-1 text-sm">
+      <label className="flex min-w-0 flex-col gap-2 text-sm">
         <span className="font-medium">{fromCopy(copy, 'accountForm.options.postsPerPage')}</span>
         <input
           name="postsPerPage"
@@ -196,7 +195,7 @@ export function OptionsForm({
         />
       </label>
 
-      <label className="flex flex-col gap-1 text-sm">
+      <label className="flex min-w-0 flex-col gap-2 text-sm">
         <span className="font-medium">{fromCopy(copy, 'accountForm.options.threadsPerPage')}</span>
         <input
           name="threadsPerPage"
@@ -221,7 +220,7 @@ export function OptionsForm({
         </span>
       </label>
 
-      <label className="flex flex-col gap-1 text-sm">
+      <label className="flex min-w-0 flex-col gap-2 text-sm">
         <span className="font-medium">
           {fromCopy(copy, 'accountForm.options.autoWatchOwnThreads')}
         </span>
@@ -237,7 +236,7 @@ export function OptionsForm({
         </span>
       </label>
 
-      <label className="flex flex-col gap-1 text-sm">
+      <label className="flex min-w-0 flex-col gap-2 text-sm">
         <span className="font-medium">
           {fromCopy(copy, 'accountForm.options.autoWatchRepliedThreads')}
         </span>
@@ -276,40 +275,32 @@ export function PasswordForm({ minLength, copy }: { minLength: number; copy: Cop
       </h2>
       <FormError message={state.error} />
 
-      <label className="flex flex-col gap-1 text-sm">
-        <span className="font-medium">{fromCopy(copy, 'accountForm.password.current')}</span>
-        <input
-          type="password"
-          name="currentPassword"
-          className={FIELD}
-          autoComplete="current-password"
-          required
-        />
-      </label>
+      <Field
+        label={fromCopy(copy, 'accountForm.password.current')}
+        type="password"
+        name="currentPassword"
+        autoComplete="current-password"
+        required
+        id="password-currentPassword"
+      />
 
-      <label className="flex flex-col gap-1 text-sm">
-        <span className="font-medium">{fromCopy(copy, 'accountForm.password.new')}</span>
-        <input
-          type="password"
-          name="newPassword"
-          className={FIELD}
-          autoComplete="new-password"
-          minLength={minLength}
-          required
-        />
-      </label>
+      <Field
+        label={fromCopy(copy, 'accountForm.password.new')}
+        type="password"
+        name="newPassword"
+        autoComplete="new-password"
+        minLength={minLength}
+        required
+      />
 
-      <label className="flex flex-col gap-1 text-sm">
-        <span className="font-medium">{fromCopy(copy, 'accountForm.password.confirm')}</span>
-        <input
-          type="password"
-          name="confirmPassword"
-          className={FIELD}
-          autoComplete="new-password"
-          minLength={minLength}
-          required
-        />
-      </label>
+      <Field
+        label={fromCopy(copy, 'accountForm.password.confirm')}
+        type="password"
+        name="confirmPassword"
+        autoComplete="new-password"
+        minLength={minLength}
+        required
+      />
 
       <p className="text-xs text-muted-foreground">{fromCopy(copy, 'accountForm.password.note')}</p>
 
@@ -338,18 +329,16 @@ export function EmailForm({ email, copy }: { email: string; copy: Copy }) {
         {copy['accountForm.email.currentTail']}
       </p>
 
-      <label className="flex flex-col gap-1 text-sm">
-        <span className="font-medium">{fromCopy(copy, 'accountForm.password.current')}</span>
-        <input
-          type="password"
-          name="currentPassword"
-          className={FIELD}
-          autoComplete="current-password"
-          required
-        />
-      </label>
+      <Field
+        label={fromCopy(copy, 'accountForm.password.current')}
+        type="password"
+        name="currentPassword"
+        autoComplete="current-password"
+        required
+        id="email-currentPassword"
+      />
 
-      <label className="flex flex-col gap-1 text-sm">
+      <label className="flex min-w-0 flex-col gap-2 text-sm">
         <span className="font-medium">{fromCopy(copy, 'accountForm.email.new')}</span>
         <input type="email" name="newEmail" className={FIELD} autoComplete="email" required />
       </label>
diff --git a/apps/community/src/components/admin/admin-forms.tsx b/apps/community/src/components/admin/admin-forms.tsx
index c2164237c..0216052bb 100644
--- a/apps/community/src/components/admin/admin-forms.tsx
+++ b/apps/community/src/components/admin/admin-forms.tsx
@@ -2,6 +2,8 @@
 
 import { useActionState } from 'react'
 
+import { buttonVariants, cn, controlVariants, PageTitle, surfaceVariants } from '@meith/ui'
+
 import {
   adminAbandonSecondFactorAction,
   adminSignInAction,
@@ -30,9 +32,9 @@ export function AdminSignInForm({
   return (
     <form
       action={action}
-      className="flex w-full max-w-sm flex-col gap-4 rounded-lg border border-border bg-card p-6"
+      className={cn(surfaceVariants({ padded: true }), 'w-full max-w-md gap-6 p-6 sm:p-8')}
     >
-      <h1 className="text-xl font-semibold tracking-tight">{fromCopy(copy, 'adminPanel.title')}</h1>
+      <PageTitle className="sm:text-2xl">{fromCopy(copy, 'adminPanel.title')}</PageTitle>
 
       <p className="text-sm text-muted-foreground">
         {reason === 'reauth'
@@ -52,14 +54,11 @@ export function AdminSignInForm({
           name="password"
           autoComplete="current-password"
           required
-          className="h-10 rounded-md border border-input bg-background px-3 text-sm outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40"
+          className={controlVariants()}
         />
       </label>
 
-      <PendingButton
-        showWorking
-        className="inline-flex h-10 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
-      >
+      <PendingButton showWorking className={buttonVariants({ variant: 'primary' })}>
         {fromCopy(copy, 'adminPanel.enter')}
       </PendingButton>
 
@@ -80,10 +79,8 @@ export function AdminSecondFactorForm({
   const [state, action] = useActionState(adminVerifySecondFactorAction, EMPTY_STATE)
 
   return (
-    <div className="flex w-full max-w-sm flex-col gap-4 rounded-lg border border-border bg-card p-6">
-      <h1 className="text-xl font-semibold tracking-tight">
-        {fromCopy(copy, 'adminPanel.twoFactor.title')}
-      </h1>
+    <div className={cn(surfaceVariants({ padded: true }), 'w-full max-w-md gap-6 p-6 sm:p-8')}>
+      <PageTitle className="sm:text-2xl">{fromCopy(copy, 'adminPanel.twoFactor.title')}</PageTitle>
 
       <p className="text-sm text-muted-foreground">{fromCopy(copy, 'adminPanel.twoFactor.lede')}</p>
 
@@ -101,10 +98,7 @@ export function AdminSecondFactorForm({
           recovery={otpRecoveryFromCopy(copy)}
         />
 
-        <PendingButton
-          showWorking
-          className="inline-flex h-10 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
-        >
+        <PendingButton showWorking className={buttonVariants({ variant: 'primary' })}>
           {fromCopy(copy, 'adminPanel.twoFactor.submit')}
         </PendingButton>
       </form>
@@ -125,10 +119,25 @@ export function AdminSignOutForm({ copy }: { copy: Copy }) {
   return (
     <form action={adminSignOutAction}>
       <PendingButton
-        showWorking
-        className="text-sm text-muted-foreground hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+        title={fromCopy(copy, 'adminPanel.leave')}
+        className={cn(
+          buttonVariants({ variant: 'ghost', size: 'icon' }),
+          'size-11 sm:w-auto sm:px-3',
+        )}
       >
-        {fromCopy(copy, 'adminPanel.leave')}
+        <svg
+          aria-hidden="true"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className="size-5 sm:hidden"
+        >
+          <path d="M9 5H5v14h4M14 8l4 4-4 4M9 12h9" />
+        </svg>
+        <span className="sr-only sm:not-sr-only">{fromCopy(copy, 'adminPanel.leave')}</span>
       </PendingButton>
     </form>
   )
diff --git a/apps/community/src/components/admin/form-bits.tsx b/apps/community/src/components/admin/form-bits.tsx
index a2e8ceca7..3d38cee02 100644
--- a/apps/community/src/components/admin/form-bits.tsx
+++ b/apps/community/src/components/admin/form-bits.tsx
@@ -1,7 +1,6 @@
-import { Alert, AlertDescription } from '@meith/ui'
+import { Alert, AlertDescription, controlVariants } from '@meith/ui'
 
-export const INPUT =
-  'w-full rounded-md border border-input bg-card px-3 py-2 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+export const INPUT = controlVariants()
 
 export function Saved({ when = true, children }: { when?: boolean; children: React.ReactNode }) {
   if (!when) return null
diff --git a/apps/community/src/components/admin/mail-test-card.tsx b/apps/community/src/components/admin/mail-test-card.tsx
index 222812b79..415f13aa5 100644
--- a/apps/community/src/components/admin/mail-test-card.tsx
+++ b/apps/community/src/components/admin/mail-test-card.tsx
@@ -2,6 +2,8 @@
 
 import { useActionState } from 'react'
 
+import { buttonVariants } from '@meith/ui'
+
 import { PANEL_CARD } from '@/components/shell/panel-list'
 import { EMPTY_STATE, type FormState } from '@/server/auth-form-state'
 import { sendTestMailAction } from '@/server/mail-test-actions'
@@ -69,7 +71,7 @@ export function MailTestCard({
         <div>
           <PendingButton
             disabled={pending || !sends}
-            className="inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground hover:opacity-90 disabled:opacity-60"
+            className={buttonVariants({ variant: 'primary', size: 'default' })}
           >
             {pending
               ? fromCopy(copy, 'adminPanel.mail.sending')
diff --git a/apps/community/src/components/admin/theme-forms.tsx b/apps/community/src/components/admin/theme-forms.tsx
index 2cf1e4707..9c94dcf6f 100644
--- a/apps/community/src/components/admin/theme-forms.tsx
+++ b/apps/community/src/components/admin/theme-forms.tsx
@@ -2,7 +2,7 @@
 
 import { useActionState, useEffect, useState } from 'react'
 
-import { textLinkVariants } from '@meith/ui'
+import { buttonVariants, textLinkVariants } from '@meith/ui'
 
 import { EMPTY_STATE } from '@/server/auth-form-state'
 import {
@@ -42,8 +42,7 @@ import { ThemePreview, ValidatedSample } from './theme-preview'
 const INPUT =
   'w-full rounded-md border border-input bg-card px-3 py-2 font-mono text-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
 
-const GHOST_BUTTON =
-  'inline-flex h-8 items-center justify-center rounded-md border border-border px-3 text-xs font-medium hover:bg-accent hover:text-accent-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+const GHOST_BUTTON = buttonVariants({ variant: 'outline', size: 'sm' })
 
 const LINK = `${textLinkVariants({ tone: 'inherit', size: 'xs' })} focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring`
 
@@ -437,7 +436,7 @@ export function ThemeEditorForm({
             )
           })}
 
-          <label className="flex flex-col gap-1 text-sm">
+          <label className="flex min-w-0 flex-col gap-2 text-sm">
             <span className="font-medium">{fromCopy(copy, 'adminTheme.css.label')}</span>
             <textarea
               name="customCss"
@@ -552,7 +551,7 @@ export function ImportThemeForm({ themeKey, copy }: { themeKey: string; copy: Co
       <Saved when={state.notice === 'imported'}>{fromCopy(copy, 'adminTheme.import.done')}</Saved>
       <input type="hidden" name="key" value={themeKey} />
 
-      <label className="flex flex-col gap-1 text-sm">
+      <label className="flex min-w-0 flex-col gap-2 text-sm">
         <span className="font-medium">{fromCopy(copy, 'adminTheme.import.label')}</span>
         <textarea name="document" rows={8} className={INPUT} required />
         <span className="text-xs text-muted-foreground">
diff --git a/apps/community/src/components/auth/form-controls.tsx b/apps/community/src/components/auth/form-controls.tsx
index d6fb995fc..92c30f2b1 100644
--- a/apps/community/src/components/auth/form-controls.tsx
+++ b/apps/community/src/components/auth/form-controls.tsx
@@ -5,6 +5,7 @@ import { useFormStatus } from 'react-dom'
 
 import { Alert, AlertDescription, AlertTitle, cn, Input, Field as UiField } from '@meith/ui'
 import { Button } from '@meith/ui/button'
+import { PasswordInput } from '@meith/ui/password-input'
 
 import { fromCopy, useCopy } from '../shell/copy'
 
@@ -115,6 +116,15 @@ export function Field({
   error,
   id,
 }: FieldProps) {
+  const copy = useCopy()
+  const inputProps = {
+    required,
+    ...(autoComplete === undefined ? {} : { autoComplete }),
+    ...(defaultValue === undefined ? {} : { defaultValue }),
+    ...(minLength === undefined ? {} : { minLength }),
+    ...(maxLength === undefined ? {} : { maxLength }),
+  }
+
   return (
     <UiField
       name={name}
@@ -123,17 +133,18 @@ export function Field({
       {...(id === undefined ? {} : { id })}
       {...(hint === undefined ? {} : { description: hint })}
     >
-      {(control) => (
-        <Input
-          {...control}
-          type={type}
-          required={required}
-          {...(autoComplete === undefined ? {} : { autoComplete })}
-          {...(defaultValue === undefined ? {} : { defaultValue })}
-          {...(minLength === undefined ? {} : { minLength })}
-          {...(maxLength === undefined ? {} : { maxLength })}
-        />
-      )}
+      {(control) =>
+        type === 'password' ? (
+          <PasswordInput
+            {...control}
+            {...inputProps}
+            showLabel={fromCopy(copy, 'form.showPassword')}
+            hideLabel={fromCopy(copy, 'form.hidePassword')}
+          />
+        ) : (
+          <Input {...control} {...inputProps} type={type} />
+        )
+      }
     </UiField>
   )
 }
diff --git a/apps/community/src/components/content/edit-post-form.tsx b/apps/community/src/components/content/edit-post-form.tsx
index ca634903f..9f495cd5d 100644
--- a/apps/community/src/components/content/edit-post-form.tsx
+++ b/apps/community/src/components/content/edit-post-form.tsx
@@ -4,6 +4,7 @@ import type { ReactNode } from 'react'
 import { useActionState } from 'react'
 
 import type { UploadLimits } from '@meith/attachments/limits'
+import { buttonVariants } from '@meith/ui'
 
 import { EMPTY_STATE } from '@/server/auth-form-state'
 import { deletePostAction, editPostAction, restorePostAction } from '@/server/content-actions'
@@ -131,7 +132,7 @@ export function EditPostForm({
           name="intent"
           value="preview"
           showWorking
-          className="inline-flex h-10 items-center justify-center rounded-md border border-border px-4 text-sm font-medium transition-opacity hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+          className={buttonVariants({ variant: 'outline', size: 'default' })}
         >
           {fromCopy(copy, 'composer.preview')}
         </PendingButton>
@@ -160,7 +161,7 @@ export function DeletePostForm({
       <div>
         <PendingButton
           showWorking
-          className="inline-flex h-10 items-center justify-center rounded-md border border-destructive/40 px-4 text-sm font-medium text-destructive transition-opacity hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+          className={buttonVariants({ variant: 'destructive', size: 'default' })}
         >
           {fromCopy(copy, 'composer.edit.delete')}
         </PendingButton>
diff --git a/apps/community/src/components/content/new-thread-form.tsx b/apps/community/src/components/content/new-thread-form.tsx
index 97d461b20..1c71f6fd4 100644
--- a/apps/community/src/components/content/new-thread-form.tsx
+++ b/apps/community/src/components/content/new-thread-form.tsx
@@ -6,7 +6,7 @@ import { useActionState, useEffect, useState } from 'react'
 import type { UploadLimits } from '@meith/attachments/limits'
 import type { Draft } from '@meith/drafts'
 import { POLL_OPTION_MAX } from '@meith/polls/limits'
-import { buttonVariants, Disclosure } from '@meith/ui'
+import { buttonVariants, controlVariants, Disclosure } from '@meith/ui'
 
 import type { PollDraftValues } from '@/server/auth-form-state'
 import { EMPTY_STATE } from '@/server/auth-form-state'
@@ -128,7 +128,7 @@ export function NewThreadForm({
           <select
             name="prefixId"
             defaultValue={state.values?.prefixId ?? draft?.prefixId?.toString() ?? ''}
-            className="h-10 rounded-md border border-input bg-card px-3 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+            className={controlVariants()}
           >
             <option value="">
               {requiresPrefix
@@ -183,7 +183,7 @@ export function NewThreadForm({
               min={0}
               step={1}
               defaultValue={pollDraft?.maxOptions ?? '1'}
-              className="h-10 rounded-md border border-input bg-card px-3 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+              className={controlVariants()}
             />
             <span className="text-xs text-muted-foreground">
               {fromCopy(copy, 'composer.newThread.pollChoicesHint')}
@@ -215,7 +215,7 @@ export function NewThreadForm({
               type="datetime-local"
               name="pollClosesAt"
               defaultValue={pollDraft?.closesAt ?? ''}
-              className="h-10 rounded-md border border-input bg-card px-3 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+              className={controlVariants()}
             />
             <span className="text-xs text-muted-foreground">
               {fromCopy(copy, 'pollEdit.closesAtHint')}
diff --git a/apps/community/src/components/messages/message-forms.tsx b/apps/community/src/components/messages/message-forms.tsx
index 2b9328aa4..dc7067417 100644
--- a/apps/community/src/components/messages/message-forms.tsx
+++ b/apps/community/src/components/messages/message-forms.tsx
@@ -2,6 +2,8 @@
 
 import { useActionState } from 'react'
 
+import { buttonVariants, controlVariants, surfaceVariants } from '@meith/ui'
+
 import { EMPTY_STATE } from '@/server/auth-form-state'
 import { messageBulkAction, sendMessageAction } from '@/server/message-actions'
 
@@ -11,16 +13,13 @@ import { ConfirmDialog } from '../shell/confirm-dialog'
 import { type Copy, fromCopy } from '../shell/copy'
 import { RecipientField } from './recipient-field'
 
-const FIELD =
-  'w-full rounded-md border border-input bg-card px-3 py-2 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+const FIELD = controlVariants()
 
-const BUTTON =
-  'inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+const BUTTON = buttonVariants({ variant: 'primary', size: 'default' })
 
-const SECONDARY =
-  'inline-flex h-8 items-center justify-center rounded-md border border-border px-3 text-xs font-medium hover:bg-muted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+const SECONDARY = buttonVariants({ variant: 'outline', size: 'sm' })
 
-const CARD = 'flex flex-col gap-4 rounded-lg border border-border bg-card p-5'
+const CARD = surfaceVariants({ padded: true })
 
 export function ComposeForm({
   to,
@@ -44,7 +43,7 @@ export function ComposeForm({
       <FormError message={state.error} />
       {replyToId === null ? null : <input type="hidden" name="replyTo" value={replyToId} />}
 
-      <label htmlFor="message-to" className="flex flex-col gap-1 text-sm">
+      <label htmlFor="message-to" className="flex min-w-0 flex-col gap-2 text-sm">
         <span className="font-medium">{fromCopy(copy, 'messageForm.to')}</span>
         <RecipientField
           id="message-to"
@@ -58,7 +57,7 @@ export function ComposeForm({
         </span>
       </label>
 
-      <label htmlFor="message-bcc" className="flex flex-col gap-1 text-sm">
+      <label htmlFor="message-bcc" className="flex min-w-0 flex-col gap-2 text-sm">
         <span className="font-medium">{fromCopy(copy, 'messageForm.bcc')}</span>
         <RecipientField
           id="message-bcc"
@@ -71,7 +70,7 @@ export function ComposeForm({
         </span>
       </label>
 
-      <label className="flex flex-col gap-1 text-sm">
+      <label className="flex min-w-0 flex-col gap-2 text-sm">
         <span className="font-medium">{fromCopy(copy, 'messageForm.subject')}</span>
         <input
           name="subject"
diff --git a/apps/community/src/components/moderation/inline-moderation-form.tsx b/apps/community/src/components/moderation/inline-moderation-form.tsx
index 83364d4a3..642dd4645 100644
--- a/apps/community/src/components/moderation/inline-moderation-form.tsx
+++ b/apps/community/src/components/moderation/inline-moderation-form.tsx
@@ -2,6 +2,8 @@
 
 import { useActionState } from 'react'
 
+import { buttonVariants } from '@meith/ui'
+
 import { BOARD_MEASURE } from '@/components/shell/measure'
 import { EMPTY_STATE } from '@/server/auth-form-state'
 import { inlineModerateAction } from '@/server/inline-moderation-actions'
@@ -11,8 +13,7 @@ import { FormError, PendingButton } from '../auth/form-controls'
 import { ConfirmDialog } from '../shell/confirm-dialog'
 import { type Copy, fromCopy } from '../shell/copy'
 
-const BUTTON =
-  'inline-flex h-8 items-center rounded-md border border-border px-3 text-xs font-medium hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+const BUTTON = buttonVariants({ variant: 'outline', size: 'sm' })
 
 export interface InlineMoveOption {
   readonly id: number
diff --git a/apps/community/src/components/moderation/queue-form.tsx b/apps/community/src/components/moderation/queue-form.tsx
index adbd6ec74..700b9c4ac 100644
--- a/apps/community/src/components/moderation/queue-form.tsx
+++ b/apps/community/src/components/moderation/queue-form.tsx
@@ -2,7 +2,7 @@
 
 import { useActionState } from 'react'
 
-import { TextLink } from '@meith/ui'
+import { buttonVariants, TextLink } from '@meith/ui'
 
 import { EMPTY_STATE } from '@/server/auth-form-state'
 import { moderateQueueAction } from '@/server/moderation-actions'
@@ -74,14 +74,14 @@ export function QueueForm({ rows, copy }: { rows: readonly QueueFormRow[]; copy:
         <PendingButton
           name="decision"
           value="approve"
-          className="inline-flex h-10 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+          className={buttonVariants({ variant: 'primary', size: 'default' })}
         >
           {fromCopy(copy, 'moderationForm.queue.approve')}
         </PendingButton>
         <PendingButton
           name="decision"
           value="reject"
-          className="inline-flex h-10 items-center justify-center rounded-md border border-destructive/40 px-4 text-sm font-medium text-destructive transition-opacity hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+          className={buttonVariants({ variant: 'destructive', size: 'default' })}
         >
           {fromCopy(copy, 'moderationForm.queue.reject')}
         </PendingButton>
diff --git a/apps/community/src/components/moderation/report-forms.tsx b/apps/community/src/components/moderation/report-forms.tsx
index 503a96d17..f6287674d 100644
--- a/apps/community/src/components/moderation/report-forms.tsx
+++ b/apps/community/src/components/moderation/report-forms.tsx
@@ -2,7 +2,7 @@
 
 import { useActionState } from 'react'
 
-import { Card, CardContent, Field, Textarea, textLinkVariants } from '@meith/ui'
+import { buttonVariants, Card, CardContent, Field, Textarea, textLinkVariants } from '@meith/ui'
 
 import { EMPTY_STATE } from '@/server/auth-form-state'
 import { assignReportAction, closeReportAction, fileReportAction } from '@/server/report-actions'
@@ -120,14 +120,14 @@ export function CloseReportForm({ reportId, copy }: { reportId: number; copy: Co
         <PendingButton
           name="status"
           value="resolved"
-          className="inline-flex h-8 items-center rounded-md bg-primary px-3 text-xs font-medium text-primary-foreground hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+          className={buttonVariants({ variant: 'primary', size: 'sm' })}
         >
           {fromCopy(copy, 'moderationForm.report.resolve')}
         </PendingButton>
         <PendingButton
           name="status"
           value="rejected"
-          className="inline-flex h-8 items-center rounded-md border border-border px-3 text-xs font-medium hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+          className={buttonVariants({ variant: 'outline', size: 'sm' })}
         >
           {fromCopy(copy, 'moderationForm.report.dismiss')}
         </PendingButton>
diff --git a/apps/community/src/components/moderation/thread-surgery-form.tsx b/apps/community/src/components/moderation/thread-surgery-form.tsx
index 582600c16..856688b76 100644
--- a/apps/community/src/components/moderation/thread-surgery-form.tsx
+++ b/apps/community/src/components/moderation/thread-surgery-form.tsx
@@ -2,16 +2,16 @@
 
 import { useActionState } from 'react'
 
+import { buttonVariants, controlVariants } from '@meith/ui'
+
 import { EMPTY_STATE } from '@/server/auth-form-state'
 import { mergeThreadAction, splitThreadAction } from '@/server/surgery-actions'
 
 import { FormError, PendingButton } from '../auth/form-controls'
 import { type Copy, formatFromCopy, fromCopy } from '../shell/copy'
 
-const BUTTON =
-  'inline-flex h-8 items-center rounded-md border border-border px-3 text-xs font-medium hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
-const FIELD =
-  'h-8 min-w-0 max-w-full rounded-md border border-border bg-background px-2 text-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+const BUTTON = buttonVariants({ variant: 'outline', size: 'sm' })
+const FIELD = controlVariants({ size: 'sm', className: 'w-auto max-w-full' })
 const LABEL = 'flex min-w-0 max-w-full items-center text-xs'
 
 export interface SplitPoint {
diff --git a/apps/community/src/components/moderation/thread-tools-form.tsx b/apps/community/src/components/moderation/thread-tools-form.tsx
index 7a488b5ff..6a5cc26fb 100644
--- a/apps/community/src/components/moderation/thread-tools-form.tsx
+++ b/apps/community/src/components/moderation/thread-tools-form.tsx
@@ -2,6 +2,8 @@
 
 import { useActionState } from 'react'
 
+import { buttonVariants, controlVariants } from '@meith/ui'
+
 import { EMPTY_STATE } from '@/server/auth-form-state'
 import { threadToolAction } from '@/server/thread-tool-actions'
 
@@ -9,10 +11,8 @@ import { FormError, PendingButton } from '../auth/form-controls'
 import { ConfirmDialog } from '../shell/confirm-dialog'
 import { type Copy, fromCopy } from '../shell/copy'
 
-const BUTTON =
-  'inline-flex h-8 items-center rounded-md border border-border px-3 text-xs font-medium hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
-const SELECT =
-  'h-8 min-w-0 max-w-full rounded-md border border-border bg-background px-2 text-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+const BUTTON = buttonVariants({ variant: 'outline', size: 'sm' })
+const SELECT = controlVariants({ size: 'sm', className: 'w-auto max-w-full' })
 const SUMMARY =
   'flex cursor-pointer list-none items-center gap-2 rounded-lg px-4 py-3 text-xs font-medium text-muted-foreground select-none hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring [&::-webkit-details-marker]:hidden'
 
diff --git a/apps/community/src/components/moderation/warning-forms.tsx b/apps/community/src/components/moderation/warning-forms.tsx
index be822d0e4..797f4eb46 100644
--- a/apps/community/src/components/moderation/warning-forms.tsx
+++ b/apps/community/src/components/moderation/warning-forms.tsx
@@ -2,17 +2,17 @@
 
 import { useActionState } from 'react'
 
+import { buttonVariants, controlVariants } from '@meith/ui'
+
 import { EMPTY_STATE } from '@/server/auth-form-state'
 import { issueWarningAction, revokeWarningAction } from '@/server/warning-actions'
 
 import { FormError, PendingButton } from '../auth/form-controls'
 import { type Copy, fromCopy } from '../shell/copy'
 
-const FIELD =
-  'w-full rounded-md border border-input bg-card px-3 py-2 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+const FIELD = controlVariants()
 
-const BUTTON =
-  'inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+const BUTTON = buttonVariants({ variant: 'primary', size: 'default' })
 
 export interface WarningTypeOption {
   readonly id: number
@@ -45,7 +45,7 @@ export function IssueWarningForm({
       <input type="hidden" name="userId" value={userId} />
       {postId !== null && <input type="hidden" name="postId" value={postId} />}
 
-      <label className="flex flex-col gap-1 text-sm">
+      <label className="flex min-w-0 flex-col gap-2 text-sm">
         <span className="font-medium">{fromCopy(copy, 'moderationForm.warn.reason')}</span>
         <select name="typeId" className={FIELD} defaultValue="">
           <option value="">{fromCopy(copy, 'moderationForm.warn.somethingElse')}</option>
@@ -58,20 +58,20 @@ export function IssueWarningForm({
       </label>
 
       <div className="grid gap-4 sm:grid-cols-[1fr_8rem]">
-        <label className="flex flex-col gap-1 text-sm">
+        <label className="flex min-w-0 flex-col gap-2 text-sm">
           <span className="font-medium">{fromCopy(copy, 'moderationForm.warn.titleLabel')}</span>
           <input type="text" name="title" maxLength={150} className={FIELD} />
           <span className="text-xs text-muted-foreground">
             {fromCopy(copy, 'moderationForm.warn.titleHint')}
           </span>
         </label>
-        <label className="flex flex-col gap-1 text-sm">
+        <label className="flex min-w-0 flex-col gap-2 text-sm">
           <span className="font-medium">{fromCopy(copy, 'moderationForm.warn.points')}</span>
           <input type="number" name="points" min={1} max={100} className={FIELD} />
         </label>
       </div>
 
-      <label className="flex flex-col gap-1 text-sm">
+      <label className="flex min-w-0 flex-col gap-2 text-sm">
         <span className="font-medium">{fromCopy(copy, 'moderationForm.warn.what')}</span>
         <textarea name="reason" rows={4} maxLength={2000} className={FIELD} required />
         <span className="text-xs text-muted-foreground">
diff --git a/apps/community/src/components/shell/install-action.tsx b/apps/community/src/components/shell/install-action.tsx
index 4b7779299..5fe46eb05 100644
--- a/apps/community/src/components/shell/install-action.tsx
+++ b/apps/community/src/components/shell/install-action.tsx
@@ -2,6 +2,8 @@
 
 import { useEffect, useState } from 'react'
 
+import { buttonVariants } from '@meith/ui'
+
 import { INSTALL_BANNER_COOKIE, INSTALL_BANNER_COOKIE_MAX_AGE } from '@/view/install-banner'
 
 interface InstallPrompt extends Event {
@@ -23,8 +25,7 @@ function isInstallPrompt(event: Event): event is InstallPrompt {
   return 'prompt' in event && 'userChoice' in event
 }
 
-const BUTTON =
-  'inline-flex h-8 items-center rounded-md border border-border bg-background px-3 text-xs font-medium text-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+const BUTTON = buttonVariants({ variant: 'outline', size: 'sm' })
 
 export function InstallAction({ label, how }: { label: string; how: string }) {
   const [pending, setPending] = useState<InstallPrompt | null>(null)
diff --git a/apps/community/src/components/shell/nav-disclosure-enhancer.tsx b/apps/community/src/components/shell/nav-disclosure-enhancer.tsx
index b2258f7a3..a92b2483c 100644
--- a/apps/community/src/components/shell/nav-disclosure-enhancer.tsx
+++ b/apps/community/src/components/shell/nav-disclosure-enhancer.tsx
@@ -19,6 +19,9 @@ export function NavDisclosureEnhancer() {
       if (event.key !== 'Escape') return
 
       for (const details of document.querySelectorAll<HTMLDetailsElement>(OPEN_DISCLOSURES)) {
+        if (details.contains(document.activeElement)) {
+          details.querySelector('summary')?.focus()
+        }
         details.open = false
       }
     }
diff --git a/apps/community/src/components/shell/scheme-toggle.tsx b/apps/community/src/components/shell/scheme-toggle.tsx
index 4df86280a..4b4b36313 100644
--- a/apps/community/src/components/shell/scheme-toggle.tsx
+++ b/apps/community/src/components/shell/scheme-toggle.tsx
@@ -55,7 +55,7 @@ export function SchemeToggle({
               title={labels[option]}
               aria-pressed={selected}
               onClick={() => applySchemeImmediately(option)}
-              className={`inline-flex h-8 items-center justify-center border-border px-2.5 transition-colors [&:not(:first-child)]:border-l focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring ${
+              className={`inline-flex h-8 pointer-coarse:min-h-11 pointer-coarse:min-w-11 items-center justify-center border-border px-2.5 transition-colors [&:not(:first-child)]:border-l focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring ${
                 selected
                   ? 'bg-primary text-primary-foreground'
                   : 'bg-background hover:bg-accent hover:text-accent-foreground'
diff --git a/apps/community/src/components/shell/theme-switcher.tsx b/apps/community/src/components/shell/theme-switcher.tsx
index f12dbc569..5d68a3eeb 100644
--- a/apps/community/src/components/shell/theme-switcher.tsx
+++ b/apps/community/src/components/shell/theme-switcher.tsx
@@ -1,3 +1,5 @@
+import { buttonVariants, cn, controlVariants } from '@meith/ui'
+
 import { PendingButton } from '@/components/auth/form-controls'
 import { MonitorIcon, MoonIcon, SunIcon } from '@/components/shell/appearance-icons'
 import { SchemeToggle } from '@/components/shell/scheme-toggle'
@@ -13,9 +15,6 @@ const SCHEME_LABEL_KEY: Record<ColourSchemePreference, string> = {
   dark: 'appearance.scheme.dark',
 }
 
-const CONTROL =
-  'h-8 rounded-md border border-border bg-background px-2 text-xs text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
-
 export async function ThemeSwitcher() {
   const [{ choices }, theme, scheme, t] = await Promise.all([
     getBoardThemeStyle(),
@@ -43,17 +42,19 @@ export async function ThemeSwitcher() {
           <label htmlFor="appearance-theme" className="text-xs text-muted-foreground">
             {t.t('appearance.theme')}
           </label>
-          <select id="appearance-theme" name="theme" defaultValue={theme} className={CONTROL}>
+          <select
+            id="appearance-theme"
+            name="theme"
+            defaultValue={theme}
+            className={cn(controlVariants({ size: 'sm' }), 'w-auto')}
+          >
             {choices.map((choice) => (
               <option key={choice.key} value={choice.key}>
                 {choice.title}
               </option>
             ))}
           </select>
-          <PendingButton
-            showWorking
-            className="h-8 rounded-md border border-border px-2.5 text-xs font-medium text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
-          >
+          <PendingButton showWorking className={buttonVariants({ variant: 'outline', size: 'sm' })}>
             {t.t('appearance.apply')}
           </PendingButton>
         </form>
diff --git a/apps/community/src/components/shell/view-tabs.tsx b/apps/community/src/components/shell/view-tabs.tsx
index aadd72f4a..3eff50026 100644
--- a/apps/community/src/components/shell/view-tabs.tsx
+++ b/apps/community/src/components/shell/view-tabs.tsx
@@ -1,65 +1 @@
-import { cn } from '@meith/ui'
-
-export interface ViewTab {
-  readonly href: string
-  readonly label: string
-  readonly isCurrent: boolean
-  readonly count?: number
-}
-
-export function ViewTabs({
-  label,
-  tabs,
-  aside,
-  className,
-}: {
-  label: string
-  tabs: readonly ViewTab[]
-  aside?: React.ReactNode
-  className?: string
-}) {
-  if (tabs.length === 0) return null
-
-  return (
-    <nav
-      aria-label={label}
-      className={cn('flex flex-wrap items-center gap-x-3 gap-y-2', className)}
-    >
-      <ul className="inline-flex max-w-full items-center gap-1 overflow-x-auto rounded-lg border border-border bg-surface p-1">
-        {tabs.map((tab) => (
-          <li key={tab.href} className="shrink-0">
-            <a
-              href={tab.href}
-              {...(tab.isCurrent ? { 'aria-current': 'page' as const } : {})}
-              className={cn(
-                'inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-sm whitespace-nowrap transition-colors',
-                'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',
-                tab.isCurrent
-                  ? 'bg-card font-semibold text-primary shadow-sm'
-                  : 'font-medium text-muted-foreground hover:text-foreground',
-              )}
-            >
-              {tab.label}
-              {tab.count !== undefined && tab.count > 0 && (
-                <span
-                  className={cn(
-                    'rounded px-1.5 text-xs font-semibold tabular-nums',
-                    tab.isCurrent
-                      ? 'bg-secondary text-secondary-foreground'
-                      : 'bg-muted text-muted-foreground',
-                  )}
-                >
-                  {tab.count}
-                </span>
-              )}
-            </a>
-          </li>
-        ))}
-      </ul>
-
-      {aside !== undefined && (
-        <span className="shrink-0 text-xs text-muted-foreground">{aside}</span>
-      )}
-    </nav>
-  )
-}
+export { type NavTab as ViewTab, NavTabs as ViewTabs } from '@meith/ui'
diff --git a/apps/community/src/styles/globals.css b/apps/community/src/styles/globals.css
index f7473ec4a..76d0227f1 100644
--- a/apps/community/src/styles/globals.css
+++ b/apps/community/src/styles/globals.css
@@ -436,7 +436,12 @@
     border-color: var(--border);
   }
 
+  html {
+    scrollbar-gutter: stable;
+  }
+
   body {
+    -webkit-font-smoothing: antialiased;
     background-color: var(--background);
     color: var(--foreground);
   }
@@ -465,6 +470,7 @@
   h3,
   h4 {
     text-wrap: balance;
+    overflow-wrap: anywhere;
   }
 
   /*
@@ -1000,3 +1006,60 @@ select:not([multiple], [size]):disabled {
     font-size: 1rem;
   }
 }
+
+[data-slot="navigation-drawer"] {
+  translate: 100% 0;
+  transition:
+    translate 180ms ease-out,
+    display 180ms allow-discrete,
+    overlay 180ms allow-discrete;
+}
+
+[dir="rtl"] [data-slot="navigation-drawer"] {
+  translate: -100% 0;
+}
+
+[data-slot="navigation-drawer"]:popover-open {
+  translate: 0 0;
+}
+
+@starting-style {
+  [data-slot="navigation-drawer"]:popover-open {
+    translate: 100% 0;
+  }
+
+  [dir="rtl"] [data-slot="navigation-drawer"]:popover-open {
+    translate: -100% 0;
+  }
+}
+
+@media (width < 64rem) {
+  html:has([data-slot="navigation-drawer"]:popover-open) {
+    overflow: hidden;
+  }
+}
+
+@media (width >= 64rem) {
+  [data-slot="navigation-drawer"]:popover-open {
+    display: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="navigation-drawer"] {
+    transition: none;
+  }
+}
+
+[data-panel-nav-trigger] {
+  display: none;
+}
+
+body:has(#panel-usercp-navigation) [data-panel-nav-trigger="usercp"],
+body:has(#panel-modcp-navigation) [data-panel-nav-trigger="modcp"] {
+  display: inline-flex;
+}
+
+body:has(#panel-usercp-navigation, #panel-modcp-navigation) [data-main-navigation] > button {
+  display: none;
+}
diff --git a/apps/community/src/view/copy.ts b/apps/community/src/view/copy.ts
index 3c6cb3cf2..95ceb260f 100644
--- a/apps/community/src/view/copy.ts
+++ b/apps/community/src/view/copy.ts
@@ -21,6 +21,8 @@ export function patternCopy(
 }
 
 const CHROME_KEYS = [
+  'form.showPassword',
+  'form.hidePassword',
   'form.working',
   'form.notSaved',
   'confirm.confirm',
diff --git a/apps/community/src/view/panel-nav.test.ts b/apps/community/src/view/panel-nav.test.ts
index 3f1f73316..2b425c258 100644
--- a/apps/community/src/view/panel-nav.test.ts
+++ b/apps/community/src/view/panel-nav.test.ts
@@ -129,8 +129,10 @@ describe('buildPanelNavModel', () => {
     expect(build('/panel/things').sections.map((s) => s.isOpen)).toEqual([false, true])
   })
 
-  it('lists a closed section’s children nowhere', () => {
-    expect(build('/panel').sections[1]?.children).toEqual([])
+  it('keeps a closed section’s destinations available for an expandable menu, excluding record pages', () => {
+    expect(build('/panel').sections[1]?.children.map((child) => child.href)).toEqual([
+      '/panel/things/new',
+    ])
   })
 
   it('lists an open section’s children, and the record only where it is', () => {
diff --git a/apps/community/src/view/panel-nav.ts b/apps/community/src/view/panel-nav.ts
index 31502db64..7f8c85592 100644
--- a/apps/community/src/view/panel-nav.ts
+++ b/apps/community/src/view/panel-nav.ts
@@ -178,16 +178,14 @@ export function buildPanelNavModel(input: {
       isRecord: false,
       isOpen,
       isOverview: section.href === input.overviewHref,
-      children: isOpen
-        ? visibleChildren(section, deepest).map((child) => ({
-            href: child.href,
-            title: panelText(t, child),
-            icon: null,
-            count: countFor(input.counts, child.href),
-            current: currentFor(input.location, child.href, deepest),
-            isRecord: child.record === true,
-          }))
-        : [],
+      children: visibleChildren(section, deepest).map((child) => ({
+        href: child.href,
+        title: panelText(t, child),
+        icon: null,
+        count: countFor(input.counts, child.href),
+        current: currentFor(input.location, child.href, deepest),
+        isRecord: child.record === true,
+      })),
     }
   })
 
diff --git a/docs/contributing/development.md b/docs/contributing/development.md
index d636048f3..0cec6a08f 100644
--- a/docs/contributing/development.md
+++ b/docs/contributing/development.md
@@ -495,6 +495,33 @@ without documenting the reason in the same change. (`packages/drafts` is
 interfaces only — erased at runtime, checked by `index.type-test.ts`, and
 due a floor when it grows runtime behavior.)
 
+## Reviewing the design system
+
+Run the populated demo review with:
+
+```sh
+pnpm exec playwright test --config e2e/screenshot-ui-polish.config.ts
+```
+
+It starts an isolated PGlite demo database on port 55434 and the demo board
+on port 3003. Screenshots and a browsable gallery are written under
+`test-results/ui-polish/`. It covers all five themes in both schemes,
+reading, composing, user and staff panels, Calendar and Dues, and touch
+layouts. The board's data and published demo logins come from the normal
+demo reset task, not a separate screenshot fixture.
+
+`e2e/ui-layout.spec.ts` keeps the important layout checks in the ordinary
+browser suite: all themes at phone, tablet and desktop widths, compact
+listing cards inside wide windows, and 44px touch controls. The shared
+components and recipes are documented in [The theme API](../customization/themes.md#shared-design-system).
+
+The UI regression suite also covers password visibility with and without
+JavaScript, Escape focus recovery in mobile navigation, hamburger drawers with
+right-side placement, top-bar triggers and expandable sub-sections across all
+five themes with JavaScript enabled and disabled,
+and search-filter touch targets. Run `e2e/ui-interactions.spec.ts` together with
+`e2e/mobile-nav.spec.ts` and `e2e/ui-layout.spec.ts` after changing these controls.
+
 ## UI primitives and destructive actions
 
 App components share the primitives in `@meith/ui` rather than re-declaring
diff --git a/docs/customization/plugins.md b/docs/customization/plugins.md
index 0df6541d9..ae740816e 100644
--- a/docs/customization/plugins.md
+++ b/docs/customization/plugins.md
@@ -1291,3 +1291,20 @@ feature that needs it and documented, if at all, afterwards — which is why
 this one is a gate rather than a habit.
 
 If the check fails, run `pnpm plugin:docs` and commit the result.
+
+### Shared presentation recipes
+
+Plugin pages can import `buttonVariants`, `controlVariants`, `surfaceVariants`
+and `NavTabs` from `@meith/ui` to match the board's controls and surfaces.
+Navigation links scroll horizontally on smaller screens. `NavTabs` marks the
+strip for the shared enhancer to reveal its active link. Custom strips using
+`PLUGIN_TAB_LIST` should add `data-nav-tabs` and mark their active link with
+`aria-current="page"` for the same behavior.
+Declare `@meith/ui` as a dependency when importing it. The kit's existing
+`PLUGIN_CARD`, `PLUGIN_NOTE`, `PLUGIN_TAB_LIST` and `pluginTabClass` remain
+available and now use those same recipes. These are server-safe exports.
+
+The admin host provides the page heading and navigation. It gives the plugin
+an unstyled content region, so a plugin using `PLUGIN_CARD` does not acquire
+a second panel around its own cards. Calendar and Dues demonstrate shared
+fields, actions and surfaces on public pages and in administration.
diff --git a/docs/customization/themes.md b/docs/customization/themes.md
index 76174dc38..0da3bb711 100644
--- a/docs/customization/themes.md
+++ b/docs/customization/themes.md
@@ -582,7 +582,9 @@ understand before importing from it:
 
 | Import | What it is |
 |---|---|
-| `@meith/ui` | Everything that renders on the **server**: `Card`, `Badge`, `Alert`, `Avatar`, `Field`, `Input`, `NativeSelect`, `Separator`, `Empty`, `Disclosure`, plus the `buttonVariants` and `badgeVariants` class recipes |
+| `@meith/ui` | Everything that renders on the **server**: `Card`, `Badge`, `Alert`, `Avatar`, `Field`, `Input`, `NativeSelect`, `Separator`, `Empty`, `Disclosure`, `PageHeader`, `PageTitle`, `NavTabs`, plus the `buttonVariants`, `controlVariants` and `badgeVariants` class recipes |
+| `@meith/ui/nav-tabs-enhancer` | `NavTabsEnhancer` — keeps the current navigation link in view without moving the page |
+| `@meith/ui/password-input` | `PasswordInput` — an optional client island with localized `showLabel` and `hideLabel` props |
 | `@meith/ui/button` | The Base UI `Button` — a `"use client"` island |
 | `@meith/ui/menu` | The Base UI `Menu` — the other `"use client"` island |
 
@@ -608,6 +610,85 @@ None of this is required. `@meith/theme-kit` is the only dependency a theme
 *needs*, and a theme that builds its own markup from scratch (as
 `themes/midnight` largely does) is a supported thing to be.
 
+### Shared design system
+
+The default theme and app surfaces use the same foundation. New themes can
+change colours, typefaces, radius and elevation through tokens while reusing
+the layout and interaction components. Avoid copying a component's class
+recipe into a slot when the shared primitive already expresses it.
+
+| Foundation | Shared rule |
+|---|---|
+| Spacing | Use the 4px scale: 8px within a control or field, 16–20px inside cards, 24px between page sections, and 32px of desktop page padding. |
+| Typography | `PageTitle` uses the heading token at 24px on small screens and 30px on larger screens. Card headings are 16px; body and form text are 14–16px; supporting metadata is 12px. |
+| Surfaces | Page uses `background`, cards use `card`, and card headers use a quieter `surface` band. Cards share token-derived corners, borders and elevation. |
+| Controls | Standard buttons, inputs and selects are at least 40px high; large actions are 44px. Compact controls are 32px on a fine pointer. Shared controls have a 44px minimum touch height. |
+| States | Primary actions use `primary` and `primary-hover`; keyboard focus uses an explicit 2px `ring` outline; invalid fields use `destructive` for border and focus. Disabled controls retain their label and reduce emphasis. |
+| Reading | Default post bodies stop at a prose measure, while attachments and post actions retain the available width. Long titles wrap without widening the page. |
+
+`PageHeader`, `PageHeaderContent`, `PageTitle`, `PageDescription` and
+`PageHeaderActions` compose a page introduction. Content and actions wrap
+when they cannot fit alongside each other. Use them for listings, search,
+composers and control panels; `className` overrides allow a theme's own
+heading treatment. Authentication uses the same pieces with a smaller title.
+
+```tsx
+<PageHeader>
+  <PageHeaderContent>
+    <PageTitle>{title}</PageTitle>
+    <PageDescription>{description}</PageDescription>
+  </PageHeaderContent>
+  <PageHeaderActions>{actions}</PageHeaderActions>
+</PageHeader>
+```
+
+`NavTabs` renders ordinary navigation links with `aria-current="page"`,
+optional counts and an optional aside. Its single row scrolls horizontally
+when space is limited, with padding for keyboard focus. It is server-rendered navigation,
+not an ARIA tab widget: links still navigate with JavaScript disabled.
+The app's `ViewTabs` and the default discovery screen use this one component.
+The root layout mounts `NavTabsEnhancer` once. It reveals the current link on
+initial render, when the active link changes, and when the strip resizes; it
+scrolls only the strip horizontally and leaves manual scrolling alone. This
+also handles navigation that arrives after the initial page render. Custom
+plugin strips opt in with `data-nav-tabs` and `aria-current` on the active link.
+Without JavaScript, the same native links remain horizontally scrollable.
+
+`controlVariants({ size: 'sm' })` supplies compact native controls, such as
+the appearance selector. `Input`, `NativeSelect` and `Textarea` use its
+standard recipe; native attributes and `className` remain available.
+`NativeSelect` also accepts `controlSize="sm"` independently of the native
+`size` attribute used by multiple-selection lists.
+
+`PasswordInput` preserves native input attributes, password manager autocomplete
+and the same field value when visibility changes. It starts masked; the localized
+visibility button appears only after hydration, so JavaScript-free forms do not
+show an inert control. Pair it with `Field` rather than placing the input and
+button together inside a wrapping label. Login, registration, reset and account
+password forms use this shared control.
+
+Search refinements use the same navigation and field recipes, stacking labeled
+filters on phones and using two columns when space allows. Poll composer inputs
+also use the standard field geometry.
+
+`surfaceVariants({ padded: true })` styles native forms and plugin sections
+with the same surface, spacing and depth as cards. The plugin kit's existing
+`PLUGIN_CARD`, `PLUGIN_NOTE`, `PLUGIN_TAB_LIST` and `pluginTabClass` exports
+now delegate to these shared recipes. Calendar and Dues use the same control
+and button recipes as the user, moderation and administration panels.
+
+Every `Card` establishes the named `card` size container. The default and
+Clubhouse forum and thread rows use `@3xl/card:` (48rem of card width),
+including their figures and column headings, to reveal desktop columns.
+A sidebar or narrow panel therefore retains the compact arrangement even
+on a wide browser. Use the same named container when adding a listing,
+and keep its title and metadata usable in the compact layout.
+
+The default board index includes a visible page heading, and the default
+shell shares a 1280px maximum width across its header, content, panels and
+footer. Its footer separates forum navigation from appearance preferences.
+Theme and scheme controls continue to submit native forms without scripting.
+
 ### Form controls are 16px on a touch screen, whatever a theme asks for
 
 `globals.css` ends with one rule, outside every Tailwind layer, that sets
@@ -632,68 +713,63 @@ button a theme wants at least 44px tall on a touch screen: a Tailwind
 `pointer-coarse:h-11` (or `pointer-coarse:min-h-11`) alongside the desktop
 size, exactly as `Header`'s own nav links do in every shipped theme.
 
-### Mobile navigation is a disclosure, not an island
-
-`Header`'s nav collapses behind the house `<details>`/`<summary>` disclosure
-below the `lg` breakpoint — the same pattern `PanelNav` uses for the admin
-rail (`themes/default/src/slots/panel-nav.tsx`). A theme that renders
-`navigation` for a reader on a phone should render two things, not one:
-
-- The existing hover/`:focus-within` dropdown strip, now `hidden lg:flex` (or
-  `lg:block`) so it only reaches a pointer wide enough to hover with.
-- A second, `lg:hidden` block: the nav items in a `<details>` a reader taps
-  open, with any item carrying a `submenu` as its own nested `<details>`
-  rather than a hover panel. The default theme puts that `<details>` in the
-  header's top row as a menu button beside the account controls, and lays
-  the open list over the page as an absolutely positioned panel under the
-  header (the header is `sticky`, so the panel stays put while the page
-  scrolls, and `PanelNav`'s own phone-size disclosure sticks just below it
-  at the same `top-14` offset); a theme may just as well render it as a row of its own that
-  pushes the page down, as `themes/midnight` does. Either way the
-  `<summary>` must carry the nav's label — visibly, or in an `sr-only`
-  span beside an icon — because it is the only name the control has. Give every submenu `<details>` in one `Header`
-  the same `name` attribute — the HTML standard makes same-named `<details>`
-  siblings mutually exclusive, so opening one closes another without a line
-  of script. That attribute is a recent addition (Chrome 120, Firefox 124,
-  Safari 17.4 — late 2023 into early 2024) and degrades gracefully: on an
-  older browser each submenu simply stops auto-closing its siblings and
-  keeps opening and closing independently, with no script involved either
-  way, so this is never a no-JS-safety concern — only a tidiness one.
-
-Both blocks render the same links at once — only CSS decides which one a
-reader sees — so anything that inspects the DOM directly (a test, a script)
-rather than asking for what is actually rendered will find every link
-twice. Mark the two blocks with `data-nav-view="desktop"` and
-`data-nav-view="mobile"` so a test can say which copy it means — the
-desktop marker on the `<ul>` whose direct children are the top-level
-items, since the admin navigation spec walks `> li > a` from it: an
-accessibility-tree query (`getByRole`) already only sees the one CSS is
-showing and needs no help, but a raw CSS locator (`page.locator(...)`,
-`toHaveCount`) does not know about `display: none` at all and must be
-scoped to one block explicitly.
-
-This is no-JS-safe by construction: a `<details>` opens and closes on tap or
-click with no script running at all, which is what lets the mobile nav reach
-every reader regardless of JavaScript. Nothing about it may become the only
-way to reach a page — the desktop dropdown and the collapsed one must expose
-the same links.
-
-An item's own link still belongs inside its `<summary>`, next to the
-disclosure triangle, so a reader who wants that item's own page can tap its
-label directly rather than opening the submenu first. A `<summary>` may not
-validly contain another link, but every browser tolerates it: a tap on the
-label runs the link's own default action (the page navigates, so whatever
-the `<details>` did next never matters), and a tap anywhere else on the row —
-the triangle included — toggles the disclosure, because that tap has no
-interactive element of its own to answer to. Give the triangle a dedicated,
-non-overlapping `size-11` box so that "anywhere else" is a real 44px target
-and not the sliver of padding a `flex-1` label leaves beside it.
+### Panel navigation on phones
+
+`NavigationDrawer` from `@meith/ui` is a server-rendered hamburger trigger and
+drawer opening from the right (the inline end in RTL). `NavigationDrawerTrigger`
+can live separately in the top navigation bar by targeting the drawer ID; set
+`showTrigger={false}` on that drawer. Native `popover="auto"` controls open and close it, including an
+outside tap and Escape, even with JavaScript disabled. The board stylesheet
+keeps its header visible, scrolls the navigation independently, dims the page
+and respects reduced motion. It uses the browser's top layer to avoid clipping
+inside a panel or sticky header.
+
+All five themes share `MobilePanelNav` from `@meith/theme-default` while keeping
+their desktop rails. The drawer starts the current group expanded, highlights
+the current page, and gives other groups native disclosure controls. Every
+sub-section has a full-width touch target and wrapping text. Each expandable
+group includes an Overview link to the group's own page. `mobilePanelNavCopy`
+provides its localized labels when a theme supplies its own PanelNav copy.
+
+`PanelNavSectionModel.children` includes destinations from closed sections so
+readers can expand them without navigating to the parent. Record-specific
+items remain limited to their current page. Desktop rails continue to show
+children only when `isOpen` is true.
+
+### Mobile header navigation
+
+All five headers share `MobileHeaderNav` from `@meith/theme-default`, with
+localized labels supplied by `mobileHeaderNavCopy`. Below `lg`, the hamburger
+sits at the end of the top bar and opens the same right-side `NavigationDrawer`
+as the panels. The desktop navigation keeps each theme's own layout.
+
+On account and moderator pages, the header button targets the panel drawer.
+The stylesheet selects this button from the presence of the panel drawer ID,
+so there is one visible hamburger and no duplicate toolbar above the content.
+The admin header uses `NavigationDrawerTrigger` directly, alongside a compact
+sign-out icon on phones that retains its full accessible label. Custom headers should
+include `MobileHeaderNav` even when the board navigation array is empty, so
+panel navigation remains reachable.
+
+Main navigation groups use native `<details>` with a full-width summary that
+expands the group. An Overview link inside the group reaches its parent page;
+child links wrap and have touch-sized targets. The drawer and its groups work
+with JavaScript disabled. Outside taps, Escape and the close button dismiss
+the drawer through native popover behavior. The scrollable body keeps the
+close button available on short screens.
+
+Both desktop and mobile blocks render the same destinations. Their
+`data-nav-view="desktop"` and `data-nav-view="mobile"` markers let DOM-based
+tests select the intended copy. Keep the desktop marker on the list whose
+direct children contain the top-level links.
 
 A theme may go further and tag any disclosure it wants dismissed by an
 outside tap or <kbd>Escape</kbd> with `data-nav-disclosure`. `PageShell`
 mounts `NavDisclosureEnhancer` — an app-level, `"use client"` component,
 never a slot — once per page; it closes every open `[data-nav-disclosure]`
-on a pointer down outside it or an <kbd>Escape</kbd> keypress. This is
+on a pointer down outside it or an <kbd>Escape</kbd> keypress. Escape returns
+focus to the summary when focus was inside the closing disclosure. The admin
+shell mounts the same enhancer for any themed disclosures that opt in. This is
 strictly additive: a theme that never adds the attribute still has a working
 disclosure, just without the tap-outside convenience, and a slot itself must
 never become the client boundary — `Header` stays a plain, "use client"-free
diff --git a/docs/reference/theme-slots.md b/docs/reference/theme-slots.md
index 5a8c3637c..9e59cfba1 100644
--- a/docs/reference/theme-slots.md
+++ b/docs/reference/theme-slots.md
@@ -528,7 +528,7 @@ Props: `PanelNavModel`
 | `panel` | `PanelKind` |  |
 | `label` | `string` | Accessible name for the navigation landmark. |
 | `sections` | `readonly PanelNavSectionModel[]` |  |
-| `currentTitle` | `string \| null` | The title of the deepest item the reader is under, for a collapsed rail's summary — "Sections · Attachments" says where a tap would leave from. `null` when nothing matched the path. |
+| `currentTitle` | `string \| null` | The title of the deepest item the reader is under, for the current location beside a mobile navigation trigger. `null` when no path matched. |
 
 ### PanelPage
 
@@ -830,7 +830,7 @@ One choice in a `<select>` or a radio group, with the current one marked. `isSel
 | `count` | `number \| null` | from `PanelNavItemModel` — A waiting count — the approval queue, unread messages — or `null`. |
 | `current` | `PanelNavCurrent \| null` | from `PanelNavItemModel` — `null` when the reader is somewhere else entirely. |
 | `isRecord` | `boolean` | from `PanelNavItemModel` — A page reached from elsewhere rather than from the rail — warning a member, editing one forum. It is shown as where you are and it is not a link, because a link to the page you are on that also needs an argument you no longer have is a dead end. Only ever present while the reader is on it. |
-| `children` | `readonly PanelNavItemModel[]` | Already filtered to what belongs on screen: a section's children are listed while it `isOpen`, and a record child only while it is the page. |
+| `children` | `readonly PanelNavItemModel[]` | Available destinations, including those in closed sections so a menu can expand them without navigation. A record child appears only on its page. |
 | `isOpen` | `boolean` | The reader is on this section or inside it. |
 | `isOverview` | `boolean` | The panel's front page, which sits above the sections rather than among them. Exactly one section carries this. |
 
@@ -956,7 +956,7 @@ One search result: where it goes, and enough of it to decide whether to go. `exc
 
 ### SearchRefineModel
 
-Filtering and sorting for a results page, in the order of how often it is used: the count, the order, what is already narrowing the page, and — folded away until wanted — the filters themselves. ## Why the order is links and the filters are a form Changing the order is one decision and the commonest one, so `sorts` are links: one click, nothing to submit, and each href carries the filters already applied. Filtering is several decisions at once — a forum *and* a date, say — so `choices` are a GET form with one submit, and the result is a URL. `applied` is the reverse of both: one chip per filter that is on, each with an href that removes only itself. A reader with JavaScript off gets all three, because all three are ordinary HTML. ## The space this is allowed to take A results page is a listing, and a filter panel that fills the screen above it is a listing you cannot see. This is a strip, not a panel: labels sit beside their controls rather than above them, and the whole thing is meant to read as one bar between the heading and the results. Hiding it behind a disclosure is the other way to save the space and a worse one — a filter nobody can see is a filter nobody uses, and a reader who cannot see how a page was narrowed does not trust it. ## Counts, and what they count An option's label carries the number of results it would leave, counted against the search *without* the forum and author filters applied — so the counts stay put as a reader moves between forums instead of collapsing to the one they are already in. `note` carries the caveat when the board is big enough that the count is a floor rather than a total.
+Filtering and sorting for a results page, in the order of how often it is used: the count, the order, what is already narrowing the page, and — folded away until wanted — the filters themselves. ## Why the order is links and the filters are a form Changing the order is one decision and the commonest one, so `sorts` are links: one click, nothing to submit, and each href carries the filters already applied. Filtering is several decisions at once — a forum *and* a date, say — so `choices` are a GET form with one submit, and the result is a URL. `applied` is the reverse of both: one chip per filter that is on, each with an href that removes only itself. A reader with JavaScript off gets all three, because all three are ordinary HTML. ## The space this is allowed to take Keep the count, sort links and applied filters together above the results. Labeled controls can use columns on wider screens and stack on phones so long forum and author names remain readable. Preserve visible labels and usable touch targets without making the page scroll horizontally. ## Counts, and what they count An option's label carries the number of results it would leave, counted against the search *without* the forum and author filters applied — so the counts stay put as a reader moves between forums instead of collapsing to the one they are already in. `note` carries the caveat when the board is big enough that the count is a floor rather than a total.
 
 | Field | Type | Notes |
 |---|---|---|
diff --git a/e2e/accessibility.spec.ts b/e2e/accessibility.spec.ts
index c7e20bb18..472d332b9 100644
--- a/e2e/accessibility.spec.ts
+++ b/e2e/accessibility.spec.ts
@@ -49,7 +49,7 @@ test('a tab row scrolls sideways only, and gives a focus ring room to draw', asy
 test('a failed login submit moves focus to the error alert', async ({ page }) => {
   await page.goto('/login')
   await page.getByLabel('Username or email').fill('e2e-nobody-with-this-name')
-  await page.getByLabel('Password').fill('the-wrong-password')
+  await page.getByLabel('Password', { exact: true }).fill('the-wrong-password')
   await page.getByRole('button', { name: 'Sign in', exact: true }).click()
 
   const alert = page.getByRole('alert').filter({ hasText: 'Not saved' })
diff --git a/e2e/mobile-nav-no-js.spec.ts b/e2e/mobile-nav-no-js.spec.ts
index f51b09594..63c480bb1 100644
--- a/e2e/mobile-nav-no-js.spec.ts
+++ b/e2e/mobile-nav-no-js.spec.ts
@@ -13,11 +13,16 @@ test('the collapsed header nav is reachable without JavaScript', async ({ page }
   const link = mobileNav.getByRole('link', { name: 'New posts' })
   await expect(link).toBeHidden()
 
-  const toggle = mobileNav.locator('summary').filter({ hasText: 'Board sections' })
+  const toggle = mobileNav.getByRole('button', { name: 'Open navigation', exact: true })
   await expect(toggle).toBeVisible()
 
   await toggle.click()
   await expect(link).toBeVisible()
+  await expect
+    .poll(() =>
+      mobileNav.getByRole('dialog').evaluate((element) => getComputedStyle(element).translate),
+    )
+    .toBe('0px')
 
   await link.click()
   await expect(page).toHaveURL(/\/discover\/new$/)
@@ -40,13 +45,15 @@ test("a nav item's dropdown opens and closes via its own disclosure, without Jav
 
   await page.goto('/')
   const mobileNav = page.getByRole('banner').locator('[data-nav-view="mobile"]')
-  await mobileNav.locator('summary').filter({ hasText: 'Board sections' }).click()
+  await mobileNav.getByRole('button', { name: 'Open navigation', exact: true }).click()
 
-  const submenuToggle = mobileNav
-    .locator('summary')
-    .filter({ has: page.getByRole('link', { name: 'Members', exact: true }) })
-    .locator('span')
-    .last()
+  await expect
+    .poll(() =>
+      mobileNav.getByRole('dialog').evaluate((element) => getComputedStyle(element).translate),
+    )
+    .toBe('0px')
+
+  const submenuToggle = mobileNav.locator('summary').filter({ hasText: /^Members$/ })
   const child = mobileNav.getByRole('link', { name: 'Guidelines', exact: true })
 
   await expect(child).toBeHidden()
diff --git a/e2e/mobile-nav.spec.ts b/e2e/mobile-nav.spec.ts
index 76469d8bf..883fed1f1 100644
--- a/e2e/mobile-nav.spec.ts
+++ b/e2e/mobile-nav.spec.ts
@@ -4,32 +4,42 @@ const MOBILE = { width: 390, height: 844 }
 
 test.use({ viewport: MOBILE })
 
-test('an outside tap closes the open mobile nav disclosure', async ({ page }) => {
+test('an outside tap closes the open mobile navigation drawer', async ({ page }) => {
   await page.goto('/')
   const mobileNav = page.getByRole('banner').locator('[data-nav-view="mobile"]')
 
-  const toggle = mobileNav.locator('summary').filter({ hasText: 'Board sections' })
+  const toggle = mobileNav.getByRole('button', { name: 'Open navigation', exact: true })
   const link = mobileNav.getByRole('link', { name: 'New posts' })
 
   await toggle.click()
   await expect(link).toBeVisible()
+  await expect
+    .poll(() =>
+      mobileNav.getByRole('dialog').evaluate((element) => getComputedStyle(element).translate),
+    )
+    .toBe('0px')
 
-  await page.evaluate(() => {
-    document.body.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
-  })
+  await page.mouse.click(10, 300)
   await expect(link).toBeHidden()
 })
 
-test('Escape closes the open mobile nav disclosure', async ({ page }) => {
+test('Escape closes the open mobile navigation drawer', async ({ page }) => {
   await page.goto('/')
   const mobileNav = page.getByRole('banner').locator('[data-nav-view="mobile"]')
 
-  const toggle = mobileNav.locator('summary').filter({ hasText: 'Board sections' })
+  const toggle = mobileNav.getByRole('button', { name: 'Open navigation', exact: true })
   const link = mobileNav.getByRole('link', { name: 'New posts' })
 
   await toggle.click()
   await expect(link).toBeVisible()
+  await expect
+    .poll(() =>
+      mobileNav.getByRole('dialog').evaluate((element) => getComputedStyle(element).translate),
+    )
+    .toBe('0px')
 
+  await link.focus()
   await page.keyboard.press('Escape')
   await expect(link).toBeHidden()
+  await expect(toggle).toBeFocused()
 })
diff --git a/e2e/passkeys.spec.ts b/e2e/passkeys.spec.ts
index 77d7e46a6..b59e07f01 100644
--- a/e2e/passkeys.spec.ts
+++ b/e2e/passkeys.spec.ts
@@ -38,13 +38,13 @@ async function signUpOnLocalhost(page: Page, label: string): Promise<string> {
   await page.goto(`${BOARD}/register`)
   await page.getByLabel('Username').fill(username)
   await page.getByLabel('Email').fill(`${username}@example.test`)
-  await page.getByLabel('Password').fill(PASSWORD)
+  await page.getByLabel('Password', { exact: true }).fill(PASSWORD)
   await page.getByLabel(/I have read and accept/).check()
   await page.getByRole('button', { name: 'Create account' }).click()
   await expect(page).toHaveURL(/\/login\?registered=1$/)
 
   await page.getByLabel('Username or email').fill(username)
-  await page.getByLabel('Password').fill(PASSWORD)
+  await page.getByLabel('Password', { exact: true }).fill(PASSWORD)
   await page.getByRole('button', { name: 'Sign in', exact: true }).click()
   await expect(page).toHaveURL(`${BOARD}/`)
 
@@ -101,7 +101,7 @@ test('a member adds a passkey and signs in with it afterwards', async ({ browser
     await member.clearCookies()
     await memberPage.goto(`${BOARD}/login`)
     await memberPage.getByLabel('Username or email').fill(username)
-    await memberPage.getByLabel('Password').fill(PASSWORD)
+    await memberPage.getByLabel('Password', { exact: true }).fill(PASSWORD)
     await memberPage.getByRole('button', { name: 'Sign in', exact: true }).click()
     await expect(memberPage).toHaveURL(`${BOARD}/`)
     await expect(memberPage.getByRole('button', { name: 'Your account' })).toContainText(username)
diff --git a/e2e/screenshot-site.spec.ts b/e2e/screenshot-site.spec.ts
index 6940d2355..efbf1369a 100644
--- a/e2e/screenshot-site.spec.ts
+++ b/e2e/screenshot-site.spec.ts
@@ -71,7 +71,7 @@ async function paint(
 async function signIn(page: Page, username: string, password: string): Promise<void> {
   await page.goto('/login')
   await page.getByLabel('Username or email').fill(username)
-  await page.getByLabel('Password').fill(password)
+  await page.getByLabel('Password', { exact: true }).fill(password)
   await page.getByRole('button', { name: 'Sign in' }).click()
   await expect(page).toHaveURL('/')
 }
diff --git a/e2e/screenshot-ui-polish.config.ts b/e2e/screenshot-ui-polish.config.ts
new file mode 100644
index 000000000..1220ee490
--- /dev/null
+++ b/e2e/screenshot-ui-polish.config.ts
@@ -0,0 +1,11 @@
+import { defineConfig } from '@playwright/test'
+
+import config from './screenshot-site.config'
+
+export default defineConfig({
+  ...config,
+  outputDir: '../test-results/ui-capture-run',
+  testMatch: /screenshot-ui-polish\.spec\.ts$/,
+  timeout: 600_000,
+  expect: { timeout: 30_000 },
+})
diff --git a/e2e/screenshot-ui-polish.spec.ts b/e2e/screenshot-ui-polish.spec.ts
new file mode 100644
index 000000000..d4ba2f9c7
--- /dev/null
+++ b/e2e/screenshot-ui-polish.spec.ts
@@ -0,0 +1,171 @@
+import { mkdirSync, writeFileSync } from 'node:fs'
+
+import { expect, type Page, test } from '@playwright/test'
+
+import { DEMO_BASE_URL } from './support/config'
+
+const DIRECTORY = 'test-results/ui-polish'
+const shots: string[] = []
+
+async function snap(page: Page, name: string, fullPage = true) {
+  if (name !== 'default-mobile-login') {
+    await expect(page).not.toHaveURL(/\/login(?:\?|$)/)
+  }
+  await expect(page.getByRole('heading', { name: 'Page not found', exact: true })).toHaveCount(0)
+  await page.evaluate(() => document.fonts.ready)
+  await page.addStyleTag({ content: 'nextjs-portal { display: none }' })
+  expect(
+    await page.evaluate(
+      () => document.documentElement.scrollWidth <= document.documentElement.clientWidth,
+    ),
+    name,
+  ).toBe(true)
+  await page.screenshot({
+    path: `${DIRECTORY}/${name}.png`,
+    fullPage,
+    caret: 'initial',
+    animations: 'disabled',
+  })
+  shots.push(name)
+}
+
+function gallery() {
+  const cards = shots
+    .map(
+      (name) =>
+        `<a href="${name}.png"><img src="${name}.png" alt="${name.replaceAll('-', ' ')}" loading="lazy"><span>${name.replaceAll('-', ' ')}</span></a>`,
+    )
+    .join('')
+  writeFileSync(
+    `${DIRECTORY}/index.html`,
+    `<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Meith · UI review</title><style>body{margin:0;padding:40px;font:15px/1.5 system-ui;background:#f4f4f4;color:#222}main{max-width:1280px;margin:auto}h1{font-size:32px;margin:0}p{color:#666;margin-bottom:32px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}a{overflow:hidden;border:1px solid #ddd;border-radius:12px;background:white;color:inherit;text-decoration:none}a:hover{border-color:#087f5b}a:focus-visible{outline:3px solid #087f5b;outline-offset:4px}img{display:block;width:100%;height:240px;object-fit:cover;object-position:top;border-bottom:1px solid #ddd}span{display:block;padding:16px;text-transform:capitalize;font-weight:600}</style><main><h1>Meith · UI review</h1><p>Populated demo · shared design system · all five themes · light, dark and touch layouts. Select a screenshot to see the full page.</p><div class="grid">${cards}</div></main></html>`,
+  )
+}
+
+test('the populated demo across themes, panels and plugins', async ({
+  page,
+  context,
+  browser,
+  request,
+}) => {
+  mkdirSync(DIRECTORY, { recursive: true })
+  await page.setViewportSize({ width: 1440, height: 1000 })
+  await request.post('/api/system/tick', {
+    headers: { authorization: 'Bearer shots-only-tick-secret-0000000000' },
+  })
+  await page.goto('/login')
+  await page.getByLabel('Username or email').fill('admin')
+  await page.getByLabel('Password', { exact: true }).fill('admin')
+  await page.getByRole('button', { name: 'Sign in', exact: true }).click()
+  await expect(page).toHaveURL('/')
+
+  for (const theme of ['default', 'midnight', 'phasebook', 'raidframe', 'clubhouse']) {
+    for (const scheme of ['light', 'dark']) {
+      await context.addCookies([
+        { name: 'meith_theme', value: theme, url: DEMO_BASE_URL },
+        { name: 'meith_scheme', value: scheme, url: DEMO_BASE_URL },
+      ])
+      await page.goto('/')
+      await expect(page.locator('html')).toHaveAttribute('data-theme', theme)
+      await snap(page, `${theme}-${scheme}`)
+    }
+  }
+  await context.addCookies([
+    { name: 'meith_theme', value: 'default', url: DEMO_BASE_URL },
+    { name: 'meith_scheme', value: 'light', url: DEMO_BASE_URL },
+  ])
+  for (const [name, path] of [
+    ['forum', '/15-general-discussion'],
+    ['thread', '/thread/121'],
+    ['composer', '/thread/121/reply'],
+    ['search', '/search'],
+    ['search-results', '/search?q=club'],
+    ['profile', '/member/1'],
+    ['user-panel', '/usercp'],
+    ['account-options', '/usercp/options'],
+    ['messages', '/messages'],
+    ['moderator-panel', '/modcp'],
+    ['moderation-queue', '/moderation'],
+    ['calendar', '/plugins/calendar'],
+    ['membership', '/plugins/dues'],
+  ] as const) {
+    await page.goto(path)
+    await snap(page, `default-${name}`)
+  }
+  await page.goto('/admin')
+  await page.getByLabel('Password', { exact: true }).fill('admin')
+  await page.getByRole('button', { name: 'Enter the control panel' }).click()
+  await expect(page.getByRole('heading', { name: 'Overview', exact: true })).toBeVisible()
+  for (const [name, path] of [
+    ['admin-panel', '/admin'],
+    ['admin-themes', '/admin/themes'],
+    ['admin-calendar', '/admin/plugins/calendar/organisers'],
+    ['admin-membership', '/admin/plugins/dues/plans'],
+  ] as const) {
+    await page.goto(path)
+    await snap(page, `default-${name}`)
+  }
+  await context.addCookies([{ name: 'meith_scheme', value: 'dark', url: DEMO_BASE_URL }])
+  for (const [name, path] of [
+    ['account-options', '/usercp/options'],
+    ['moderator-panel', '/modcp'],
+    ['admin-panel', '/admin'],
+    ['calendar', '/plugins/calendar'],
+    ['membership', '/plugins/dues'],
+  ] as const) {
+    await page.goto(path)
+    await snap(page, `default-dark-${name}`)
+  }
+  await context.addCookies([{ name: 'meith_scheme', value: 'light', url: DEMO_BASE_URL }])
+  const mobile = await browser.newContext({
+    baseURL: DEMO_BASE_URL,
+    storageState: await context.storageState(),
+    hasTouch: true,
+    isMobile: true,
+    viewport: { width: 390, height: 844 },
+  })
+  const phone = await mobile.newPage()
+  for (const [name, path] of [
+    ['home', '/'],
+    ['thread', '/thread/121'],
+    ['user-panel', '/usercp/options'],
+    ['moderator-panel', '/modcp'],
+    ['admin-panel', '/admin'],
+    ['calendar', '/plugins/calendar'],
+    ['membership', '/plugins/dues'],
+    ['admin-membership', '/admin/plugins/dues/plans'],
+  ] as const) {
+    await phone.goto(path)
+    await snap(phone, `default-mobile-${name}`)
+  }
+  await phone.goto('/admin/plugins/dues/codes')
+  const activeTab = phone.locator('[data-nav-tabs] [aria-current="page"]')
+  await expect(activeTab).toBeInViewport({ ratio: 1 })
+  await snap(phone, 'default-mobile-active-plugin-tab', false)
+  await phone.goto('/')
+  await phone.getByRole('button', { name: 'Open navigation', exact: true }).click()
+  await phone
+    .getByRole('dialog')
+    .locator('summary')
+    .filter({ hasText: /^Membership$/ })
+    .click()
+  await snap(phone, 'default-mobile-main-navigation', false)
+  await phone.goto('/admin')
+  await snap(phone, 'default-mobile-panel-header', false)
+  await phone.getByRole('button', { name: 'Open panel navigation' }).click()
+  await phone.getByRole('dialog').locator('summary').filter({ hasText: 'Board settings' }).click()
+  await snap(phone, 'default-mobile-admin-navigation', false)
+  await phone.goto('/admin/settings?group=registration')
+  await phone.getByRole('button', { name: 'Open panel navigation' }).click()
+  await snap(phone, 'default-mobile-admin-subsections', false)
+  await phone.goto('/usercp/options')
+  await phone.getByRole('button', { name: 'Open panel navigation' }).click()
+  await snap(phone, 'default-mobile-account-navigation', false)
+  await phone.goto('/search?q=club')
+  await snap(phone, 'default-mobile-search-results')
+  await mobile.clearCookies()
+  await phone.goto('/login')
+  await snap(phone, 'default-mobile-login')
+  await mobile.close()
+  gallery()
+})
diff --git a/e2e/support/session.ts b/e2e/support/session.ts
index f4dd0b65c..bf082e067 100644
--- a/e2e/support/session.ts
+++ b/e2e/support/session.ts
@@ -19,13 +19,13 @@ export async function signUp(page: Page, label: string): Promise<string> {
   await page.goto('/register')
   await page.getByLabel('Username').fill(username)
   await page.getByLabel('Email').fill(`${username}@example.test`)
-  await page.getByLabel('Password').fill(PASSWORD)
+  await page.getByLabel('Password', { exact: true }).fill(PASSWORD)
   await page.getByLabel(/I have read and accept/).check()
   await page.getByRole('button', { name: 'Create account' }).click()
   await expect(page).toHaveURL(/\/login\?registered=1$/)
 
   await page.getByLabel('Username or email').fill(username)
-  await page.getByLabel('Password').fill(PASSWORD)
+  await page.getByLabel('Password', { exact: true }).fill(PASSWORD)
   await page.getByRole('button', { name: 'Sign in', exact: true }).click()
   await expect(page).toHaveURL('/')
 
@@ -43,7 +43,7 @@ export async function proveCredential(page: Page, password = PASSWORD): Promise<
 export async function signIn(page: Page, username: string, password = PASSWORD): Promise<void> {
   await page.goto('/login')
   await page.getByLabel('Username or email').fill(username)
-  await page.getByLabel('Password').fill(password)
+  await page.getByLabel('Password', { exact: true }).fill(password)
   await page.getByRole('button', { name: 'Sign in', exact: true }).click()
   await expect(page).toHaveURL('/')
 }
@@ -62,7 +62,7 @@ export async function enterAdminPanel(page: Page): Promise<void> {
   await signInAsAdmin(page)
 
   await page.goto('/admin')
-  await page.getByLabel('Password').fill(STAFF_PASSWORD)
+  await page.getByLabel('Password', { exact: true }).fill(STAFF_PASSWORD)
   await page.getByRole('button', { name: 'Enter the control panel' }).click()
   await expect(page.getByRole('heading', { name: 'Overview' })).toBeVisible()
 }
diff --git a/e2e/two-factor.spec.ts b/e2e/two-factor.spec.ts
index 46980098a..f59e6ab6b 100644
--- a/e2e/two-factor.spec.ts
+++ b/e2e/two-factor.spec.ts
@@ -52,7 +52,7 @@ test('the whole second-factor lifecycle survives being hydrated', async ({ page
   await page.context().clearCookies()
   await page.goto('/login')
   await page.getByLabel('Username or email').fill(member)
-  await page.getByLabel('Password').fill(PASSWORD)
+  await page.getByLabel('Password', { exact: true }).fill(PASSWORD)
   await page.getByRole('button', { name: 'Sign in', exact: true }).click()
 
   await expect(page).toHaveURL(/\/login\/verify$/)
@@ -80,7 +80,7 @@ test('the code boxes hydrate in, and a recovery code still signs in through the
   await page.context().clearCookies()
   await page.goto('/login')
   await page.getByLabel('Username or email').fill(member)
-  await page.getByLabel('Password').fill(PASSWORD)
+  await page.getByLabel('Password', { exact: true }).fill(PASSWORD)
   await page.getByRole('button', { name: 'Sign in', exact: true }).click()
 
   await expect(page).toHaveURL(/\/login\/verify$/)
diff --git a/e2e/ui-interactions.spec.ts b/e2e/ui-interactions.spec.ts
new file mode 100644
index 000000000..0c66b7899
--- /dev/null
+++ b/e2e/ui-interactions.spec.ts
@@ -0,0 +1,176 @@
+import { expect, test } from '@playwright/test'
+
+import { E2E_BASE_URL } from './support/config'
+import { enterAdminPanel, runTick } from './support/session'
+
+test('mobile tabs scroll horizontally and reveal the active page after loading or resizing', async ({
+  page,
+}) => {
+  await page.setViewportSize({ width: 320, height: 740 })
+  await page.goto('/discover/unanswered')
+  const strip = page.locator('[data-nav-tabs]')
+  const active = strip.locator('[aria-current="page"]')
+  await expect(active).toHaveAttribute('aria-current', 'page')
+  await expect(active).toBeInViewport({ ratio: 1 })
+  await expect.poll(() => strip.evaluate((element) => element.scrollLeft)).toBeGreaterThan(0)
+  expect(await page.evaluate(() => window.scrollY)).toBe(0)
+  expect(await strip.evaluate((element) => element.scrollHeight - element.clientHeight)).toBe(0)
+
+  await page.setViewportSize({ width: 1280, height: 900 })
+  await expect(active).toBeInViewport({ ratio: 1 })
+  await page.setViewportSize({ width: 320, height: 740 })
+  await expect(active).toBeInViewport({ ratio: 1 })
+  await expect.poll(() => strip.evaluate((element) => element.scrollLeft)).toBeGreaterThan(0)
+
+  await strip.evaluate((element) => {
+    element.querySelector('[aria-current]')!.removeAttribute('aria-current')
+    element.querySelector('a')!.setAttribute('aria-current', 'page')
+  })
+  await expect(strip.locator('a').first()).toBeInViewport({ ratio: 1 })
+})
+
+test('password visibility preserves the value and does not submit the form', async ({ page }) => {
+  await page.goto('/login')
+  const password = page.getByLabel('Password', { exact: true })
+  await password.fill('a-private-test-value')
+  await expect(password).toHaveAttribute('type', 'password')
+  await expect(password).toHaveAttribute('autocomplete', 'current-password')
+  const toggle = page.getByRole('button', { name: 'Show password', exact: true })
+  await toggle.focus()
+  await page.keyboard.press('Enter')
+  await expect(password).toHaveAttribute('type', 'text')
+  await expect(password).toHaveValue('a-private-test-value')
+  await expect(page).toHaveURL('/login')
+  await page.getByRole('button', { name: 'Hide password', exact: true }).click()
+  await expect(password).toHaveAttribute('type', 'password')
+  await expect(password).toHaveValue('a-private-test-value')
+})
+
+test('password fields remain native without JavaScript and have no inert toggle', async ({
+  browser,
+}) => {
+  const context = await browser.newContext({ baseURL: E2E_BASE_URL, javaScriptEnabled: false })
+  const page = await context.newPage()
+  await page.goto('/login')
+  await expect(page.getByLabel('Password', { exact: true })).toHaveAttribute('type', 'password')
+  await expect(page.getByRole('button', { name: 'Show password', exact: true })).toHaveCount(0)
+  await context.close()
+})
+
+for (const javaScriptEnabled of [true, false]) {
+  for (const theme of ['default', 'midnight', 'phasebook', 'raidframe', 'clubhouse']) {
+    test(`${theme} panel drawers expose nested destinations and dismiss correctly with JavaScript ${javaScriptEnabled ? 'on' : 'off'}`, async ({
+      browser,
+    }) => {
+      const context = await browser.newContext({
+        baseURL: E2E_BASE_URL,
+        javaScriptEnabled,
+        viewport: { width: 390, height: 600 },
+      })
+      const page = await context.newPage()
+      await enterAdminPanel(page)
+      await context.addCookies([{ name: 'meith_theme', value: theme, url: E2E_BASE_URL }])
+      for (const [path, name] of [
+        ['/usercp/options', 'Your account'],
+        ['/modcp', 'Moderation'],
+      ] as const) {
+        await page.goto(path)
+        const header = page.getByRole('banner')
+        const opener = header.getByRole('button', { name: 'Open panel navigation', exact: true })
+        await expect(opener).toHaveCount(1)
+        await expect(
+          header.getByRole('button', { name: 'Open navigation', exact: true }),
+        ).toHaveCount(0)
+        await opener.click()
+        const panel = page.getByRole('dialog', { name, exact: true })
+        await expect
+          .poll(() => panel.evaluate((element) => getComputedStyle(element).translate))
+          .toBe('0px')
+        await panel.getByRole('button', { name: 'Close panel navigation' }).click()
+        await expect(panel).toBeHidden()
+      }
+      await page.goto('/')
+      await page
+        .getByRole('banner')
+        .getByRole('button', { name: 'Open navigation', exact: true })
+        .click()
+      const mainMenu = page.locator('#board-mobile-navigation')
+      await expect
+        .poll(() => mainMenu.evaluate((element) => getComputedStyle(element).translate))
+        .toBe('0px')
+      await expect(mainMenu.getByRole('link', { name: 'New posts', exact: true })).toBeVisible()
+      await mainMenu.getByRole('button', { name: 'Close navigation' }).click()
+      await expect(mainMenu).toBeHidden()
+      await page.goto('/admin')
+      const toggle = page.getByRole('banner').getByRole('button', { name: 'Open panel navigation' })
+      const drawer = page.getByRole('dialog', { name: 'Administration' })
+      await toggle.click()
+      await expect
+        .poll(() => drawer.evaluate((element) => getComputedStyle(element).translate))
+        .toBe('0px')
+      await expect(drawer).toBeVisible()
+      const bounds = (await drawer.boundingBox())!
+      expect(bounds.x + bounds.width).toBe(390)
+      expect(bounds.x).toBeGreaterThan(0)
+      await drawer.locator('summary').filter({ hasText: 'Board settings' }).click()
+      const registration = drawer.getByRole('link', { name: 'Registration', exact: true })
+      await expect(registration).toBeVisible()
+      expect((await registration.boundingBox())!.height).toBeGreaterThanOrEqual(44)
+      await registration.click()
+      await expect(page).toHaveURL(/\/admin\/settings\?group=registration$/)
+      await toggle.click()
+      await expect
+        .poll(() => drawer.evaluate((element) => getComputedStyle(element).translate))
+        .toBe('0px')
+      await expect(registration).toHaveAttribute('aria-current', 'page')
+      await expect(registration).toBeVisible()
+      await registration.focus()
+      await expect(registration).toBeInViewport()
+      await page.keyboard.press('Escape')
+      await expect(drawer).toBeHidden()
+      await expect(toggle).toBeFocused()
+      await toggle.click()
+      await expect
+        .poll(() => drawer.evaluate((element) => getComputedStyle(element).translate))
+        .toBe('0px')
+      await page.mouse.click(10, 300)
+      await expect(drawer).toBeHidden()
+      await toggle.click()
+      await expect
+        .poll(() => drawer.evaluate((element) => getComputedStyle(element).translate))
+        .toBe('0px')
+      await drawer.getByRole('button', { name: 'Close panel navigation' }).click()
+      await expect(drawer).toBeHidden()
+      await context.close()
+    })
+  }
+}
+
+test('mobile search choices fit without horizontal scrolling and offer touch-sized controls', async ({
+  browser,
+  request,
+}) => {
+  const context = await browser.newContext({
+    baseURL: E2E_BASE_URL,
+    javaScriptEnabled: false,
+    hasTouch: true,
+    viewport: { width: 320, height: 740 },
+  })
+  const page = await context.newPage()
+  const filters = page
+    .locator('section')
+    .filter({ has: page.getByRole('button', { name: 'Apply filters' }) })
+  await expect(async () => {
+    await runTick(request)
+    await page.goto('/search?q=version')
+    await expect(filters).toBeVisible()
+  }).toPass({ timeout: 20_000, intervals: [500, 1_000, 2_000] })
+  for (const control of await filters.locator('select, button').all()) {
+    const box = (await control.boundingBox())!
+    expect(box.x).toBeGreaterThanOrEqual(0)
+    expect(box.x + box.width).toBeLessThanOrEqual(320)
+    expect(box.height).toBeGreaterThanOrEqual(44)
+  }
+  expect(await filters.evaluate((element) => element.scrollWidth <= element.clientWidth)).toBe(true)
+  await context.close()
+})
diff --git a/e2e/ui-layout.spec.ts b/e2e/ui-layout.spec.ts
new file mode 100644
index 000000000..a68f13e2b
--- /dev/null
+++ b/e2e/ui-layout.spec.ts
@@ -0,0 +1,72 @@
+import { expect, test } from '@playwright/test'
+
+import { E2E_BASE_URL } from './support/config'
+
+const THEMES = ['default', 'midnight', 'phasebook', 'raidframe', 'clubhouse']
+
+test.use({ javaScriptEnabled: false })
+
+for (const theme of THEMES) {
+  test(`${theme} reading and forms fit phone, tablet and desktop widths`, async ({
+    page,
+    context,
+  }) => {
+    await context.addCookies([{ name: 'meith_theme', value: theme, url: E2E_BASE_URL }])
+    for (const width of [390, 768, 1280]) {
+      await page.setViewportSize({ width, height: 900 })
+      for (const path of ['/', '/200-general', '/thread/22', '/search', '/login']) {
+        await page.goto(path)
+        await expect(page.locator('html')).toHaveAttribute('data-theme', theme)
+        expect(
+          await page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth),
+          `${theme} ${path} at ${width}px`,
+        ).toBe(true)
+      }
+    }
+  })
+}
+
+for (const theme of ['default', 'clubhouse']) {
+  test(`${theme} listing columns follow the card width`, async ({ page, context }) => {
+    await context.addCookies([{ name: 'meith_theme', value: theme, url: E2E_BASE_URL }])
+    await page.setViewportSize({ width: 1440, height: 1000 })
+    await page.goto('/200-general')
+    const row = page.locator('[data-slot="card-rows"] > li').filter({
+      has: page.getByRole('link', { name: 'What are you reading this week?', exact: true }),
+    })
+    await expect(row).toHaveCount(1)
+
+    const columns = () =>
+      row.evaluate((element) => getComputedStyle(element).gridTemplateColumns.split(' ').length)
+    expect(await columns()).toBeGreaterThan(2)
+    await row.evaluate((element) => {
+      const card = element.closest<HTMLElement>('[data-slot="card"]')!
+      card.style.width = '640px'
+    })
+    expect(await columns()).toBe(2)
+    expect(await row.evaluate((element) => element.scrollWidth <= element.clientWidth)).toBe(true)
+  })
+}
+
+test('touch fields, primary actions and navigation retain usable targets', async ({ browser }) => {
+  const context = await browser.newContext({
+    baseURL: E2E_BASE_URL,
+    javaScriptEnabled: false,
+    hasTouch: true,
+    viewport: { width: 390, height: 844 },
+  })
+  const page = await context.newPage()
+  await page.goto('/login')
+  for (const control of [
+    page.getByLabel('Username or email'),
+    page.getByLabel('Password'),
+    page.getByRole('button', { name: 'Sign in', exact: true }),
+  ]) {
+    expect((await control.boundingBox())!.height).toBeGreaterThanOrEqual(44)
+  }
+  await page.goto('/200-general')
+  expect(
+    (await page.getByRole('link', { name: 'Top rated' }).boundingBox())!.height,
+  ).toBeGreaterThanOrEqual(44)
+  await context.close()
+})
diff --git a/packages/i18n/src/catalogs/en.json b/packages/i18n/src/catalogs/en.json
index c2429d5d2..6191e4077 100644
--- a/packages/i18n/src/catalogs/en.json
+++ b/packages/i18n/src/catalogs/en.json
@@ -2188,7 +2188,9 @@
   "errorNotice.home": "Forum home",
   "errorNotice.notFound.message": "The page you requested does not exist or is no longer available.",
   "errorNotice.notFound.title": "Page not found",
+  "form.hidePassword": "Hide password",
   "form.notSaved": "Not saved.",
+  "form.showPassword": "Show password",
   "form.working": "Working…",
   "forum.threadDeleted": "The thread was deleted. It is removed rather than destroyed, so a moderator can restore it.",
   "forum.threadHeld": "Your thread was posted and is waiting for a moderator to approve it.",
@@ -2273,7 +2275,6 @@
   "install.restore.hint": "A bundle taken by another deployment of this board — the nightly one, or the one you took before the server died — becomes this board again. It replaces the empty schema the migrator just wrote, applies any migrations the bundle predates, and puts the uploads back. Nothing here can be overwritten: a board with members refuses to restore.",
   "install.restore.idleNote": "Takes seconds for a small board and minutes for a large one. When it finishes, the installer is gone and the board is back.",
   "install.restore.migrated": "{count, plural, one {# migration the bundle predates was} other {# migrations the bundle predates were}} applied on top.",
-
   "install.restore.next": "Restart the web and worker containers so nothing holds a connection from before the restore, then sign in with an account from the restored board.",
   "install.restore.noUploads": "The bundle carried no uploads. If they lived in an object store, point this deployment at the same bucket; otherwise posts will have broken images.",
   "install.restore.noneAnywhere": "No bundles in the backup directory, and none at {destination}.",
@@ -2382,7 +2383,6 @@
   "installRestore.busy": "Another install or restore is running on this board. Wait for it and reload.",
   "installRestore.confirmFirst": "Confirm that you hold the AUTH_SECRET the board ran with before restoring.",
   "installRestore.failed": "The restore stopped: {error}",
-
   "installRestore.pickOne": "Pick a bundle to restore.",
   "installUnlock.button": "Unlock the installer",
   "installUnlock.incorrect": "That does not match the AUTH_SECRET this board runs with.",
diff --git a/packages/plugin-kit/package.json b/packages/plugin-kit/package.json
index 9be54ae8b..2b50bdd3f 100644
--- a/packages/plugin-kit/package.json
+++ b/packages/plugin-kit/package.json
@@ -21,7 +21,8 @@
   },
   "dependencies": {
     "@meith/core": "workspace:^",
-    "@meith/theme-kit": "workspace:^"
+    "@meith/theme-kit": "workspace:^",
+    "@meith/ui": "workspace:^"
   },
   "peerDependencies": {
     "react": "^19.2.0"
diff --git a/packages/plugin-kit/src/ui.ts b/packages/plugin-kit/src/ui.ts
index d4bc85fad..a9d1f9fe2 100644
--- a/packages/plugin-kit/src/ui.ts
+++ b/packages/plugin-kit/src/ui.ts
@@ -1,17 +1,11 @@
-export const PLUGIN_CARD =
-  'flex flex-col gap-3 rounded-lg border border-border bg-card p-4 text-card-foreground shadow-elevation'
+import { navTabListVariants, navTabVariants, surfaceVariants } from '@meith/ui/variants'
 
-export const PLUGIN_NOTE =
-  'rounded-lg border border-border bg-card p-4 text-sm text-muted-foreground'
+export const PLUGIN_CARD = surfaceVariants({ padded: true })
 
-export const PLUGIN_TAB_LIST =
-  'inline-flex max-w-full items-center gap-1 overflow-x-auto rounded-lg border border-border bg-surface p-1'
+export const PLUGIN_NOTE = surfaceVariants({ className: 'p-5 text-sm text-muted-foreground' })
 
-const PLUGIN_TAB_BASE =
-  'inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-sm whitespace-nowrap transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+export const PLUGIN_TAB_LIST = navTabListVariants()
 
 export function pluginTabClass(active: boolean): string {
-  return active
-    ? `${PLUGIN_TAB_BASE} bg-card font-semibold text-foreground shadow-sm`
-    : `${PLUGIN_TAB_BASE} font-medium text-muted-foreground hover:text-foreground`
+  return navTabVariants({ active })
 }
diff --git a/packages/theme-kit/src/view-models.ts b/packages/theme-kit/src/view-models.ts
index 3a7bbd29f..6ee109a6c 100644
--- a/packages/theme-kit/src/view-models.ts
+++ b/packages/theme-kit/src/view-models.ts
@@ -1251,13 +1251,10 @@ export interface SearchChipModel {
  *
  * ## The space this is allowed to take
  *
- * A results page is a listing, and a filter panel that fills the screen above
- * it is a listing you cannot see. This is a strip, not a panel: labels sit
- * beside their controls rather than above them, and the whole thing is meant
- * to read as one bar between the heading and the results. Hiding it behind a
- * disclosure is the other way to save the space and a worse one — a filter
- * nobody can see is a filter nobody uses, and a reader who cannot see how a
- * page was narrowed does not trust it.
+ * Keep the count, sort links and applied filters together above the results.
+ * Labeled controls can use columns on wider screens and stack on phones so
+ * long forum and author names remain readable. Preserve visible labels and
+ * usable touch targets without making the page scroll horizontally.
  *
  * ## Counts, and what they count
  *
@@ -1532,8 +1529,8 @@ export interface PanelNavItemModel {
 
 export interface PanelNavSectionModel extends PanelNavItemModel {
   /**
-   * Already filtered to what belongs on screen: a section's children are
-   * listed while it `isOpen`, and a record child only while it is the page.
+   * Available destinations, including those in closed sections so a menu can
+   * expand them without navigation. A record child appears only on its page.
    */
   readonly children: readonly PanelNavItemModel[]
   /** The reader is on this section or inside it. */
@@ -1551,9 +1548,8 @@ export interface PanelNavModel {
   readonly label: string
   readonly sections: readonly PanelNavSectionModel[]
   /**
-   * The title of the deepest item the reader is under, for a collapsed
-   * rail's summary — "Sections · Attachments" says where a tap would leave
-   * from. `null` when nothing matched the path.
+   * The title of the deepest item the reader is under, for the current
+   * location beside a mobile navigation trigger. `null` when no path matched.
    */
   readonly currentTitle: string | null
 }
diff --git a/packages/ui/package.json b/packages/ui/package.json
index b8f3f90df..8c97f4ea5 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -17,6 +17,8 @@
     "./dialog": "./src/dialog.tsx",
     "./input-otp": "./src/input-otp.tsx",
     "./menu": "./src/menu.tsx",
+    "./nav-tabs-enhancer": "./src/nav-tabs-enhancer.tsx",
+    "./password-input": "./src/password-input.tsx",
     "./popover": "./src/popover.tsx",
     "./tabs": "./src/tabs.tsx",
     "./toast": "./src/toast.tsx",
diff --git a/packages/ui/src/card.tsx b/packages/ui/src/card.tsx
index f02141749..5e77f0cea 100644
--- a/packages/ui/src/card.tsx
+++ b/packages/ui/src/card.tsx
@@ -1,4 +1,5 @@
 import { cn } from './utils'
+import { surfaceVariants } from './variants'
 
 type CardElement = 'section' | 'article' | 'div'
 
@@ -12,10 +13,7 @@ function Card({ as = 'section', className, ...props }: CardProps) {
   return (
     <Component
       data-slot="card"
-      className={cn(
-        'overflow-hidden rounded-lg border border-border bg-card text-card-foreground shadow-elevation',
-        className,
-      )}
+      className={cn(surfaceVariants(), '@container/card overflow-hidden', className)}
       {...props}
     />
   )
@@ -26,7 +24,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
     <div
       data-slot="card-header"
       className={cn(
-        'flex flex-wrap items-center justify-between gap-x-4 gap-y-1 border-b border-border bg-surface px-4 py-2.5',
+        'flex flex-wrap items-center justify-between gap-x-4 gap-y-1 border-b border-border bg-surface/60 px-5 py-3',
         className,
       )}
       {...props}
@@ -48,7 +46,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<'p'>) {
   return (
     <p
       data-slot="card-description"
-      className={cn('text-sm text-muted-foreground', className)}
+      className={cn('text-sm leading-relaxed text-muted-foreground', className)}
       {...props}
     />
   )
@@ -65,7 +63,7 @@ function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
 }
 
 function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
-  return <div data-slot="card-content" className={cn('px-4 py-3.5', className)} {...props} />
+  return <div data-slot="card-content" className={cn('px-5 py-4', className)} {...props} />
 }
 
 function CardRows({ className, ...props }: React.ComponentProps<'ul'>) {
@@ -77,7 +75,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
     <div
       data-slot="card-footer"
       className={cn(
-        'flex flex-wrap items-center gap-3 border-t border-border px-4 py-2.5 text-xs text-muted-foreground',
+        'flex flex-wrap items-center gap-3 border-t border-border px-5 py-3 text-xs text-muted-foreground',
         className,
       )}
       {...props}
diff --git a/packages/ui/src/disclosure.tsx b/packages/ui/src/disclosure.tsx
index 39216eb5a..9ebccd4d3 100644
--- a/packages/ui/src/disclosure.tsx
+++ b/packages/ui/src/disclosure.tsx
@@ -26,7 +26,7 @@ function Disclosure({
     >
       <summary
         className={cn(
-          'flex cursor-default list-none items-center gap-2 px-4 py-2.5 text-sm font-medium select-none',
+          'flex cursor-pointer list-none items-center gap-2 min-h-11 px-4 py-3 text-sm font-medium select-none',
           'transition-colors hover:bg-muted',
           '[&::-webkit-details-marker]:hidden [&::marker]:content-none',
         )}
@@ -44,7 +44,7 @@ function Disclosure({
           <path d="m4.5 3 3 3-3 3" />
         </svg>
 
-        <span className="min-w-0 flex-1 truncate">{summary}</span>
+        <span className="min-w-0 flex-1 [overflow-wrap:anywhere]">{summary}</span>
 
         {aside !== undefined && (
           <span className="shrink-0 text-xs font-normal text-muted-foreground">{aside}</span>
diff --git a/packages/ui/src/empty.tsx b/packages/ui/src/empty.tsx
index 1bf170c17..00003a824 100644
--- a/packages/ui/src/empty.tsx
+++ b/packages/ui/src/empty.tsx
@@ -17,7 +17,7 @@ function EmptyTitle({ className, ...props }: React.ComponentProps<'p'>) {
   return (
     <p
       data-slot="empty-title"
-      className={cn('text-sm font-medium text-foreground', className)}
+      className={cn('text-base font-semibold tracking-tight text-foreground', className)}
       {...props}
     />
   )
@@ -27,7 +27,7 @@ function EmptyDescription({ className, ...props }: React.ComponentProps<'p'>) {
   return (
     <p
       data-slot="empty-description"
-      className={cn('max-w-prose text-sm text-muted-foreground', className)}
+      className={cn('max-w-md text-sm leading-relaxed text-muted-foreground', className)}
       {...props}
     />
   )
diff --git a/packages/ui/src/field.tsx b/packages/ui/src/field.tsx
index f8da09ab9..c692b66f9 100644
--- a/packages/ui/src/field.tsx
+++ b/packages/ui/src/field.tsx
@@ -1,19 +1,12 @@
 import { cn } from './utils'
-
-const CONTROL = [
-  'w-full rounded-md border border-input bg-card px-3 text-sm text-foreground',
-  'transition-[border-color,box-shadow] duration-100',
-  'placeholder:text-muted-foreground',
-  'disabled:cursor-not-allowed disabled:opacity-60',
-  'aria-invalid:border-destructive',
-].join(' ')
+import { controlVariants } from './variants'
 
 function Input({ className, type = 'text', ...props }: React.ComponentProps<'input'>) {
   return (
     <input
       data-slot="input"
       type={type}
-      className={cn(CONTROL, 'h-9 py-1', className)}
+      className={cn(controlVariants(), 'py-2', className)}
       {...props}
     />
   )
@@ -23,15 +16,23 @@ function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
   return (
     <textarea
       data-slot="textarea"
-      className={cn(CONTROL, 'min-h-32 resize-y py-2 leading-relaxed', className)}
+      className={cn(controlVariants(), 'h-auto min-h-36 resize-y py-3 leading-relaxed', className)}
       {...props}
     />
   )
 }
 
-function NativeSelect({ className, ...props }: React.ComponentProps<'select'>) {
+function NativeSelect({
+  className,
+  controlSize = 'default',
+  ...props
+}: React.ComponentProps<'select'> & { controlSize?: 'sm' | 'default' }) {
   return (
-    <select data-slot="native-select" className={cn(CONTROL, 'h-9 pr-8', className)} {...props} />
+    <select
+      data-slot="native-select"
+      className={cn(controlVariants({ size: controlSize }), 'pr-8', className)}
+      {...props}
+    />
   )
 }
 
@@ -40,7 +41,7 @@ function Label({ className, ...props }: React.ComponentProps<'label'>) {
     // biome-ignore lint/a11y/noLabelWithoutControl: the Label primitive itself — its caller supplies the control it wraps
     <label
       data-slot="label"
-      className={cn('text-sm font-medium leading-none text-foreground select-none', className)}
+      className={cn('text-sm font-medium leading-5 text-foreground select-none', className)}
       {...props}
     />
   )
@@ -77,7 +78,7 @@ function Field({
   const describedBy = [errorId, descriptionId].filter((value) => value !== null).join(' ')
 
   return (
-    <div data-slot="field" className={cn('flex flex-col gap-1.5', className)} {...props}>
+    <div data-slot="field" className={cn('flex min-w-0 flex-col gap-2', className)} {...props}>
       <Label htmlFor={id}>{label}</Label>
 
       {children({
@@ -94,7 +95,7 @@ function Field({
       )}
 
       {descriptionId !== null && (
-        <p id={descriptionId} className="text-xs text-muted-foreground">
+        <p id={descriptionId} className="text-xs leading-relaxed text-muted-foreground">
           {description}
         </p>
       )}
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index e813566e5..0de9a9c09 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -19,10 +19,31 @@ export { Disclosure } from './disclosure'
 export { Empty, EmptyAction, EmptyDescription, EmptyTitle } from './empty'
 export type { FieldProps } from './field'
 export { Field, Input, Label, NativeSelect, Textarea } from './field'
+export { type NavTab, NavTabs } from './nav-tabs'
+export {
+  NavigationDrawer,
+  type NavigationDrawerProps,
+  NavigationDrawerTrigger,
+} from './navigation-drawer'
+export {
+  PageDescription,
+  PageHeader,
+  PageHeaderActions,
+  PageHeaderContent,
+  PageTitle,
+} from './page-header'
 export type { SeparatorProps } from './separator'
 export { Separator } from './separator'
 export type { TextLinkProps } from './text-link'
 export { TextLink } from './text-link'
 export { cn } from './utils'
-export type { BadgeVariants, ButtonVariants, TextLinkVariants } from './variants'
-export { badgeVariants, buttonVariants, textLinkVariants } from './variants'
+export type { BadgeVariants, ButtonVariants, ControlVariants, TextLinkVariants } from './variants'
+export {
+  badgeVariants,
+  buttonVariants,
+  controlVariants,
+  navTabListVariants,
+  navTabVariants,
+  surfaceVariants,
+  textLinkVariants,
+} from './variants'
diff --git a/packages/ui/src/nav-tabs-enhancer.test.ts b/packages/ui/src/nav-tabs-enhancer.test.ts
new file mode 100644
index 000000000..d586ffccc
--- /dev/null
+++ b/packages/ui/src/nav-tabs-enhancer.test.ts
@@ -0,0 +1,102 @@
+import type { EffectCallback } from 'react'
+import { afterEach, expect, it, vi } from 'vitest'
+
+import { NavTabsEnhancer } from './nav-tabs-enhancer'
+
+const effects = vi.hoisted(() => ({ mount: (() => {}) as EffectCallback }))
+
+vi.mock('react', async (original) => ({
+  ...(await original<typeof import('react')>()),
+  useEffect: (mount: EffectCallback) => {
+    effects.mount = mount
+  },
+}))
+
+afterEach(() => vi.unstubAllGlobals())
+
+it('reveals current tabs horizontally, leaves manual scrolling alone, and cleans up observers', () => {
+  let offset = 0
+  let activeLeft = 240
+  let mutate = () => {}
+  let resized = () => {}
+  const resize = { observe: vi.fn(), unobserve: vi.fn(), disconnect: vi.fn() }
+  const changes = { observe: vi.fn(), disconnect: vi.fn() }
+  const tab = {
+    getBoundingClientRect: () => ({
+      left: activeLeft - offset,
+      right: activeLeft - offset + 80,
+      width: 80,
+    }),
+  }
+  let active: typeof tab | null = tab
+  const list = {
+    clientWidth: 200,
+    isConnected: true,
+    getBoundingClientRect: () => ({ left: 0, right: 200 }),
+    querySelector: () => active,
+    scrollBy: vi.fn((options: ScrollToOptions) => {
+      offset += options.left ?? 0
+    }),
+    closest: () => list,
+  }
+  vi.stubGlobal('document', { body: {}, querySelectorAll: () => (list.isConnected ? [list] : []) })
+  vi.stubGlobal(
+    'ResizeObserver',
+    class {
+      observe = resize.observe
+      unobserve = resize.unobserve
+      disconnect = resize.disconnect
+      constructor(callback: ResizeObserverCallback) {
+        resized = () =>
+          callback(
+            [{ target: list } as unknown as ResizeObserverEntry],
+            this as unknown as ResizeObserver,
+          )
+      }
+    },
+  )
+  vi.stubGlobal(
+    'MutationObserver',
+    class {
+      observe = changes.observe
+      disconnect = changes.disconnect
+      constructor(callback: MutationCallback) {
+        mutate = () => callback([], this as unknown as MutationObserver)
+      }
+    },
+  )
+
+  NavTabsEnhancer()
+  const cleanup = effects.mount()
+  expect(offset).toBe(180)
+  expect(list.scrollBy).toHaveBeenLastCalledWith({ left: 180 })
+  expect(resize.observe).toHaveBeenCalledWith(tab)
+  resized()
+  expect(list.scrollBy).toHaveBeenCalledTimes(1)
+
+  offset = 0
+  mutate()
+  expect(offset).toBe(0)
+  resized()
+  expect(offset).toBe(180)
+
+  active = null
+  mutate()
+  expect(resize.unobserve).toHaveBeenCalledWith(tab)
+  resized()
+  expect(list.scrollBy).toHaveBeenCalledTimes(2)
+  activeLeft = 10
+  active = { ...tab }
+  mutate()
+  expect(list.scrollBy).toHaveBeenLastCalledWith({ left: -230 })
+
+  list.clientWidth = 0
+  resized()
+  expect(list.scrollBy).toHaveBeenCalledTimes(3)
+  list.isConnected = false
+  mutate()
+  expect(resize.unobserve).toHaveBeenCalledWith(list)
+  if (cleanup) cleanup()
+  expect(resize.disconnect).toHaveBeenCalledOnce()
+  expect(changes.disconnect).toHaveBeenCalledOnce()
+})
diff --git a/packages/ui/src/nav-tabs-enhancer.tsx b/packages/ui/src/nav-tabs-enhancer.tsx
new file mode 100644
index 000000000..4a8ba49e5
--- /dev/null
+++ b/packages/ui/src/nav-tabs-enhancer.tsx
@@ -0,0 +1,64 @@
+'use client'
+
+import { useEffect } from 'react'
+
+const SELECTOR = '[data-nav-tabs]'
+const CURRENT = '[aria-current]:not([aria-current="false"])'
+
+function reveal(list: HTMLElement, active: HTMLElement | null) {
+  if (active === null || list.clientWidth === 0) return
+  const bounds = list.getBoundingClientRect()
+  const tab = active.getBoundingClientRect()
+  if (tab.left >= bounds.left + 4 && tab.right <= bounds.right - 4) return
+  list.scrollBy({ left: tab.left - bounds.left - (list.clientWidth - tab.width) / 2 })
+}
+
+export function NavTabsEnhancer() {
+  useEffect(() => {
+    const lists = new Map<HTMLElement, HTMLElement | null>()
+    const resize = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const list = entry.target.closest<HTMLElement>(SELECTOR)
+        if (list === null) continue
+        reveal(list, lists.get(list) ?? null)
+      }
+    })
+
+    function refresh() {
+      for (const list of lists.keys()) {
+        if (list.isConnected) continue
+        resize.unobserve(list)
+        const active = lists.get(list)
+        if (active) resize.unobserve(active)
+        lists.delete(list)
+      }
+      for (const list of document.querySelectorAll<HTMLElement>(SELECTOR)) {
+        const active = list.querySelector<HTMLElement>(CURRENT)
+        if (!lists.has(list)) resize.observe(list)
+        if (lists.get(list) !== active) {
+          const previous = lists.get(list)
+          if (previous) resize.unobserve(previous)
+          if (active) resize.observe(active)
+          reveal(list, active)
+        }
+        lists.set(list, active)
+      }
+    }
+
+    const changes = new MutationObserver(refresh)
+    changes.observe(document.body, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ['aria-current'],
+    })
+    refresh()
+
+    return () => {
+      changes.disconnect()
+      resize.disconnect()
+    }
+  }, [])
+
+  return null
+}
diff --git a/packages/ui/src/nav-tabs.test.ts b/packages/ui/src/nav-tabs.test.ts
new file mode 100644
index 000000000..a82c1a20f
--- /dev/null
+++ b/packages/ui/src/nav-tabs.test.ts
@@ -0,0 +1,33 @@
+import { createElement } from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+
+import { NavTabs } from './nav-tabs'
+
+describe('NavTabs', () => {
+  it('renders native navigation with one current page and meaningful counts', () => {
+    const html = renderToStaticMarkup(
+      createElement(NavTabs, {
+        label: 'Conversations',
+        tabs: [
+          { href: '/new', label: 'New', isCurrent: true, count: 3 },
+          { href: '/read', label: 'Read', isCurrent: false, count: 0 },
+        ],
+        aside: 'Updated today',
+      }),
+    )
+
+    expect(html).toContain('aria-label="Conversations"')
+    expect(html.match(/aria-current="page"/g)).toHaveLength(1)
+    expect(html).toContain('href="/new"')
+    expect(html).toContain('href="/read"')
+    expect(html).toContain('>3</span>')
+    expect(html).not.toContain('>0</span>')
+    expect(html).toContain('Updated today')
+    expect(html).not.toContain('role="tab"')
+  })
+
+  it('omits an empty navigation landmark', () => {
+    expect(renderToStaticMarkup(createElement(NavTabs, { label: 'Empty', tabs: [] }))).toBe('')
+  })
+})
diff --git a/packages/ui/src/nav-tabs.tsx b/packages/ui/src/nav-tabs.tsx
new file mode 100644
index 000000000..e4dc250d3
--- /dev/null
+++ b/packages/ui/src/nav-tabs.tsx
@@ -0,0 +1,60 @@
+import { cn } from './utils'
+import { navTabListVariants, navTabVariants } from './variants'
+
+export interface NavTab {
+  readonly href: string
+  readonly label: string
+  readonly isCurrent: boolean
+  readonly count?: number
+}
+
+export function NavTabs({
+  label,
+  tabs,
+  aside,
+  className,
+}: {
+  label: string
+  tabs: readonly NavTab[]
+  aside?: React.ReactNode
+  className?: string
+}) {
+  if (tabs.length === 0) return null
+
+  return (
+    <nav
+      aria-label={label}
+      className={cn('flex min-w-0 max-w-full flex-wrap items-center gap-x-3 gap-y-2', className)}
+    >
+      <ul data-nav-tabs className={navTabListVariants()}>
+        {tabs.map((tab) => (
+          <li key={tab.href} className="shrink-0">
+            <a
+              href={tab.href}
+              {...(tab.isCurrent ? { 'aria-current': 'page' as const } : {})}
+              className={navTabVariants({ active: tab.isCurrent })}
+            >
+              {tab.label}
+              {tab.count !== undefined && tab.count > 0 && (
+                <span
+                  className={cn(
+                    'rounded px-1.5 text-xs font-semibold tabular-nums',
+                    tab.isCurrent
+                      ? 'bg-secondary text-secondary-foreground'
+                      : 'bg-muted text-muted-foreground',
+                  )}
+                >
+                  {tab.count}
+                </span>
+              )}
+            </a>
+          </li>
+        ))}
+      </ul>
+
+      {aside !== undefined && (
+        <span className="shrink-0 text-xs text-muted-foreground">{aside}</span>
+      )}
+    </nav>
+  )
+}
diff --git a/packages/ui/src/navigation-drawer.tsx b/packages/ui/src/navigation-drawer.tsx
new file mode 100644
index 000000000..9339499f1
--- /dev/null
+++ b/packages/ui/src/navigation-drawer.tsx
@@ -0,0 +1,92 @@
+import { cn } from './utils'
+import { buttonVariants } from './variants'
+
+export interface NavigationDrawerProps {
+  readonly id: string
+  readonly title: string
+  readonly openLabel: string
+  readonly closeLabel: string
+  readonly showTrigger?: boolean
+  readonly children: React.ReactNode
+}
+
+export function NavigationDrawerTrigger({
+  target,
+  label,
+  className,
+  ...props
+}: Omit<React.ComponentProps<'button'>, 'children'> & {
+  readonly target: string
+  readonly label: string
+}) {
+  return (
+    <button
+      {...props}
+      type="button"
+      popoverTarget={target}
+      aria-label={label}
+      className={cn(buttonVariants({ variant: 'outline', size: 'icon' }), 'size-11', className)}
+    >
+      <svg
+        aria-hidden="true"
+        viewBox="0 0 24 24"
+        className="size-5"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      >
+        <path d="M4 6h16M4 12h16M4 18h16" />
+      </svg>
+    </button>
+  )
+}
+
+export function NavigationDrawer({
+  id,
+  title,
+  openLabel,
+  closeLabel,
+  showTrigger = true,
+  children,
+}: NavigationDrawerProps) {
+  return (
+    <>
+      {showTrigger && <NavigationDrawerTrigger target={id} label={openLabel} />}
+      <div
+        id={id}
+        popover="auto"
+        role="dialog"
+        data-slot="navigation-drawer"
+        aria-labelledby={`${id}-title`}
+        className="fixed inset-y-0 end-0 start-auto m-0 h-dvh max-h-dvh w-80 max-w-[calc(100vw-3rem)] flex-col border-0 border-s border-border bg-card p-0 text-card-foreground shadow-xl backdrop:bg-black/40 [&:popover-open]:flex"
+      >
+        <div className="flex shrink-0 items-center justify-between gap-3 border-b border-border px-4 py-3">
+          <h2 id={`${id}-title`} className="font-heading text-base font-semibold">
+            {title}
+          </h2>
+          <button
+            type="button"
+            popoverTarget={id}
+            popoverTargetAction="hide"
+            aria-label={closeLabel}
+            className={cn(buttonVariants({ variant: 'ghost', size: 'icon' }), 'size-11')}
+          >
+            <svg
+              aria-hidden="true"
+              viewBox="0 0 24 24"
+              className="size-5"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+            >
+              <path d="m6 6 12 12M18 6 6 18" />
+            </svg>
+          </button>
+        </div>
+        <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain p-3">{children}</div>
+      </div>
+    </>
+  )
+}
diff --git a/packages/ui/src/page-header.tsx b/packages/ui/src/page-header.tsx
new file mode 100644
index 000000000..bcd646588
--- /dev/null
+++ b/packages/ui/src/page-header.tsx
@@ -0,0 +1,56 @@
+import { cn } from './utils'
+
+function PageHeader({ className, ...props }: React.ComponentProps<'header'>) {
+  return (
+    <header
+      data-slot="page-header"
+      className={cn('flex flex-wrap items-end justify-between gap-x-6 gap-y-4', className)}
+      {...props}
+    />
+  )
+}
+
+function PageHeaderContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="page-header-content"
+      className={cn('flex min-w-0 flex-1 basis-64 flex-col gap-2', className)}
+      {...props}
+    />
+  )
+}
+
+function PageTitle({ className, ...props }: React.ComponentProps<'h1'>) {
+  return (
+    <h1
+      data-slot="page-title"
+      className={cn(
+        'font-heading text-2xl font-semibold tracking-tight text-balance text-foreground [overflow-wrap:anywhere] sm:text-3xl',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function PageDescription({ className, ...props }: React.ComponentProps<'p'>) {
+  return (
+    <p
+      data-slot="page-description"
+      className={cn('max-w-prose text-sm leading-relaxed text-muted-foreground', className)}
+      {...props}
+    />
+  )
+}
+
+function PageHeaderActions({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="page-header-actions"
+      className={cn('flex max-w-full flex-wrap items-center gap-2', className)}
+      {...props}
+    />
+  )
+}
+
+export { PageDescription, PageHeader, PageHeaderActions, PageHeaderContent, PageTitle }
diff --git a/packages/ui/src/password-input.test.ts b/packages/ui/src/password-input.test.ts
new file mode 100644
index 000000000..e581b89d7
--- /dev/null
+++ b/packages/ui/src/password-input.test.ts
@@ -0,0 +1,26 @@
+import { createElement } from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { expect, it } from 'vitest'
+
+import { PasswordInput } from './password-input'
+
+it('renders a masked native password field with autocomplete and error associations before hydration', () => {
+  const html = renderToStaticMarkup(
+    createElement(PasswordInput, {
+      id: 'current-password',
+      name: 'password',
+      autoComplete: 'current-password',
+      required: true,
+      'aria-invalid': true,
+      'aria-describedby': 'password-error',
+      showLabel: 'Show password',
+      hideLabel: 'Hide password',
+    }),
+  )
+  expect(html).toContain('type="password"')
+  expect(html).toContain('name="password"')
+  expect(html).toContain('autoComplete="current-password"')
+  expect(html).toContain('aria-describedby="password-error"')
+  expect(html).toContain('aria-invalid="true"')
+  expect(html).not.toContain('<button')
+})
diff --git a/packages/ui/src/password-input.tsx b/packages/ui/src/password-input.tsx
new file mode 100644
index 000000000..069a8c5de
--- /dev/null
+++ b/packages/ui/src/password-input.tsx
@@ -0,0 +1,61 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+import { Input } from './field'
+import { cn } from './utils'
+
+export interface PasswordInputProps extends Omit<React.ComponentProps<'input'>, 'type'> {
+  readonly showLabel: string
+  readonly hideLabel: string
+}
+
+export function PasswordInput({
+  showLabel,
+  hideLabel,
+  className,
+  disabled,
+  ...props
+}: PasswordInputProps) {
+  const [visible, setVisible] = useState(false)
+  const [enhanced, setEnhanced] = useState(false)
+
+  useEffect(() => setEnhanced(true), [])
+
+  return (
+    <span data-slot="password-input" className="relative block min-w-0">
+      <Input
+        {...props}
+        disabled={disabled}
+        type={visible ? 'text' : 'password'}
+        className={cn(className, 'pr-12')}
+      />
+      {enhanced && (
+        <button
+          type="button"
+          disabled={disabled}
+          aria-label={visible ? hideLabel : showLabel}
+          aria-controls={props.id}
+          title={visible ? hideLabel : showLabel}
+          onClick={() => setVisible((current) => !current)}
+          className="absolute inset-y-0 right-0 flex w-11 items-center justify-center rounded-r-md text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50"
+        >
+          <svg
+            aria-hidden="true"
+            viewBox="0 0 24 24"
+            className="size-4"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z" />
+            <circle cx="12" cy="12" r="3" />
+            {visible && <path d="m3 3 18 18" />}
+          </svg>
+        </button>
+      )}
+    </span>
+  )
+}
diff --git a/packages/ui/src/variants.ts b/packages/ui/src/variants.ts
index f889dc177..9f6b18f1b 100644
--- a/packages/ui/src/variants.ts
+++ b/packages/ui/src/variants.ts
@@ -4,6 +4,7 @@ export const buttonVariants = cva(
   [
     'inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap',
     'rounded-md border text-sm font-medium leading-none',
+    'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',
     'transition-[color,background-color,border-color,opacity] duration-100 ease-out',
     'disabled:pointer-events-none disabled:opacity-50',
     'aria-disabled:pointer-events-none aria-disabled:opacity-50',
@@ -12,7 +13,8 @@ export const buttonVariants = cva(
   {
     variants: {
       variant: {
-        primary: 'border-transparent bg-primary text-primary-foreground hover:bg-primary-hover',
+        primary:
+          'border-transparent bg-primary text-primary-foreground shadow-sm hover:bg-primary-hover',
         secondary:
           'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/70',
         outline: 'border-border bg-card text-foreground hover:bg-muted',
@@ -23,10 +25,10 @@ export const buttonVariants = cva(
         link: 'h-auto border-transparent p-0 text-foreground underline underline-offset-4 decoration-border hover:decoration-current',
       },
       size: {
-        sm: 'h-8 gap-1.5 px-2.5 text-xs',
-        default: 'h-9 px-3.5',
-        lg: 'h-10 px-4',
-        icon: 'size-9 p-0',
+        sm: 'h-8 gap-1.5 px-2.5 text-xs pointer-coarse:min-h-11',
+        default: 'h-10 px-4 pointer-coarse:min-h-11',
+        lg: 'h-11 px-5',
+        icon: 'size-10 p-0 pointer-coarse:size-11',
       },
     },
     defaultVariants: { variant: 'secondary', size: 'default' },
@@ -93,3 +95,56 @@ export const textLinkVariants = cva(
 )
 
 export type TextLinkVariants = VariantProps<typeof textLinkVariants>
+
+export const controlVariants = cva(
+  [
+    'w-full min-w-0 rounded-md border border-input bg-card text-foreground',
+    'transition-[border-color,box-shadow]',
+    'duration-150',
+    'placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-60',
+    'focus-visible:border-ring focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',
+    'aria-invalid:border-destructive aria-invalid:focus-visible:outline-destructive',
+    'pointer-coarse:min-h-11 pointer-coarse:text-base',
+  ],
+  {
+    variants: {
+      size: {
+        sm: 'min-h-8 px-2.5 py-1 text-xs',
+        default: 'min-h-10 px-3 py-2 text-sm',
+      },
+    },
+    defaultVariants: { size: 'default' },
+  },
+)
+
+export type ControlVariants = VariantProps<typeof controlVariants>
+
+export const surfaceVariants = cva(
+  'min-w-0 rounded-xl border border-border bg-card text-card-foreground shadow-elevation',
+  {
+    variants: {
+      padded: { true: 'flex flex-col gap-4 p-5', false: '' },
+    },
+    defaultVariants: { padded: false },
+  },
+)
+
+export const navTabListVariants = cva(
+  'inline-flex max-w-full items-center gap-1 overflow-x-auto rounded-lg border border-border bg-surface p-1',
+)
+
+export const navTabVariants = cva(
+  [
+    'inline-flex h-9 items-center gap-1.5 rounded-md px-3 text-sm whitespace-nowrap transition-colors pointer-coarse:min-h-11',
+    'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',
+  ],
+  {
+    variants: {
+      active: {
+        true: 'bg-card font-semibold text-primary shadow-sm',
+        false: 'font-medium text-muted-foreground hover:bg-card/60 hover:text-foreground',
+      },
+    },
+    defaultVariants: { active: false },
+  },
+)
diff --git a/playwright.config.ts b/playwright.config.ts
index 034bbce16..98050d59b 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -28,7 +28,7 @@ const INSTALL_SPECS = /install-[\w-]*\.spec\.ts$/
 
 const TOUR_SPECS = /screenshot-[\w-]*\.spec\.ts$/
 
-const SITE_SHOT_SPECS = /screenshot-site\.spec\.ts$/
+const SITE_SHOT_SPECS = /screenshot-(?:site|ui-polish)\.spec\.ts$/
 
 const BOARD_IGNORE = process.env.CI ? [INSTALL_SPECS, TOUR_SPECS] : [INSTALL_SPECS, SITE_SHOT_SPECS]
 
diff --git a/plugins/calendar/package.json b/plugins/calendar/package.json
index 029ea1f8f..3de015fd2 100644
--- a/plugins/calendar/package.json
+++ b/plugins/calendar/package.json
@@ -20,7 +20,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@meith/plugin-kit": "workspace:^"
+    "@meith/plugin-kit": "workspace:^",
+    "@meith/ui": "workspace:^"
   },
   "peerDependencies": {
     "react": "^19.2.0"
diff --git a/plugins/calendar/src/ui/admin.tsx b/plugins/calendar/src/ui/admin.tsx
index a6722ede2..29346af50 100644
--- a/plugins/calendar/src/ui/admin.tsx
+++ b/plugins/calendar/src/ui/admin.tsx
@@ -1,4 +1,5 @@
 import type { PluginAdminPageContext } from '@meith/plugin-kit'
+import { buttonVariants, controlVariants, surfaceVariants } from '@meith/ui'
 
 import en from '../messages/en.json'
 import { organiserIds } from '../store'
@@ -18,7 +19,7 @@ export async function OrganisersPage(context: PluginAdminPageContext) {
   )
 
   return (
-    <div className="flex flex-col gap-4 text-sm">
+    <div className={surfaceVariants({ padded: true, className: 'text-sm' })}>
       {named.length === 0 ? (
         <p className="text-muted-foreground">
           {translated(context, 'calendar.admin.organisers.empty')}
@@ -30,7 +31,10 @@ export async function OrganisersPage(context: PluginAdminPageContext) {
               <span>{organiser.username}</span>
               <form method="post" action="/admin/api/plugins/calendar/organisers/remove">
                 <input type="hidden" name="user_id" value={organiser.userId} />
-                <button type="submit" className="rounded border px-2 py-0.5 text-xs">
+                <button
+                  type="submit"
+                  className={buttonVariants({ variant: 'destructive', size: 'sm' })}
+                >
                   {translated(context, 'calendar.admin.organisers.remove')}
                 </button>
               </form>
@@ -42,13 +46,13 @@ export async function OrganisersPage(context: PluginAdminPageContext) {
       <form
         method="post"
         action="/admin/api/plugins/calendar/organisers/add"
-        className="flex items-end gap-2"
+        className="flex flex-wrap items-end gap-3"
       >
         <label className="flex flex-col gap-1">
           {translated(context, 'calendar.admin.organisers.username')}
-          <input name="username" required className="rounded border p-1" />
+          <input name="username" required className={controlVariants()} />
         </label>
-        <button type="submit" className="rounded border px-3 py-1">
+        <button type="submit" className={buttonVariants({ variant: 'primary' })}>
           {translated(context, 'calendar.admin.organisers.add')}
         </button>
       </form>
diff --git a/plugins/calendar/src/ui/page.tsx b/plugins/calendar/src/ui/page.tsx
index 7633785f7..84d5c4577 100644
--- a/plugins/calendar/src/ui/page.tsx
+++ b/plugins/calendar/src/ui/page.tsx
@@ -5,6 +5,7 @@ import {
   type PluginPageContext,
   pluginTabClass,
 } from '@meith/plugin-kit'
+import { buttonVariants, controlVariants, textLinkVariants } from '@meith/ui'
 
 import { mayAdd, mayManage, resolveCalendarConfig } from '../access'
 import {
@@ -60,7 +61,7 @@ function EventRow({
       <DateBlock event={event} locale={locale} />
 
       <div className="flex min-w-0 flex-col gap-1">
-        <p className="font-semibold leading-tight">{event.title}</p>
+        <p className="font-semibold leading-snug [overflow-wrap:anywhere]">{event.title}</p>
 
         <p className="text-muted-foreground text-sm">
           <time dateTime={event.startsAt.toISOString()}>
@@ -72,27 +73,27 @@ function EventRow({
         <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-sm">
           <span className="text-muted-foreground">{relativeHint(event.startsAt, now, locale)}</span>
           {href !== null && (
-            <a className="underline underline-offset-2" href={href}>
+            <a className={textLinkVariants()} href={href}>
               {translated(context, 'calendar.event.discuss')}
             </a>
           )}
           <a
-            className="underline underline-offset-2"
+            className={textLinkVariants()}
             href={`/api/plugins/calendar/events/ics?id=${event.id}`}
           >
             {translated(context, 'calendar.event.download')}
           </a>
           {manageable && (
             <>
-              <a
-                className="underline underline-offset-2"
-                href={`/plugins/calendar?edit=${event.id}`}
-              >
+              <a className={textLinkVariants()} href={`/plugins/calendar?edit=${event.id}`}>
                 {translated(context, 'calendar.event.edit')}
               </a>
               <form method="post" action="/api/plugins/calendar/events/delete">
                 <input type="hidden" name="id" value={event.id} />
-                <button type="submit" className="underline underline-offset-2">
+                <button
+                  type="submit"
+                  className={buttonVariants({ variant: 'destructive', size: 'sm' })}
+                >
                   {translated(context, 'calendar.event.delete')}
                 </button>
               </form>
@@ -173,53 +174,53 @@ function EventForm({
       {event !== null && <input type="hidden" name="id" value={event.id} />}
 
       <div className="grid gap-3 sm:grid-cols-2">
-        <label className="flex flex-col gap-1 text-sm sm:col-span-2">
+        <label className="flex min-w-0 flex-col gap-2 text-sm sm:col-span-2">
           {translated(context, 'calendar.event.title')}
           <input
             name="title"
             required
             maxLength={120}
             defaultValue={event?.title ?? ''}
-            className="rounded border p-1.5"
+            className={controlVariants()}
           />
         </label>
-        <label className="flex flex-col gap-1 text-sm">
+        <label className="flex min-w-0 flex-col gap-2 text-sm">
           {translated(context, 'calendar.event.starts')}
           <input
             name="starts_at"
             type="datetime-local"
             required
             defaultValue={toDateTimeInput(event?.startsAt ?? null)}
-            className="rounded border p-1.5"
+            className={controlVariants()}
           />
         </label>
-        <label className="flex flex-col gap-1 text-sm">
+        <label className="flex min-w-0 flex-col gap-2 text-sm">
           {translated(context, 'calendar.event.until')}
           <input
             name="ends_at"
             type="datetime-local"
             defaultValue={toDateTimeInput(event?.endsAt ?? null)}
-            className="rounded border p-1.5"
+            className={controlVariants()}
           />
         </label>
-        <label className="flex flex-col gap-1 text-sm">
+        <label className="flex min-w-0 flex-col gap-2 text-sm">
           {translated(context, 'calendar.event.location')}
           <input
             name="location"
             maxLength={120}
             defaultValue={event?.location ?? ''}
-            className="rounded border p-1.5"
+            className={controlVariants()}
           />
         </label>
-        <label className="flex flex-col gap-1 text-sm">
+        <label className="flex min-w-0 flex-col gap-2 text-sm">
           {translated(context, 'calendar.event.thread')}
           <input
             name="thread"
             defaultValue={event?.threadId == null ? '' : String(event.threadId)}
-            className="rounded border p-1.5"
+            className={controlVariants()}
           />
         </label>
-        <label className="flex flex-col gap-1 text-sm">
+        <label className="flex min-w-0 flex-col gap-2 text-sm">
           {translated(context, 'calendar.event.link')}
           <input
             name="link"
@@ -227,19 +228,19 @@ function EventForm({
             maxLength={500}
             placeholder="https://"
             defaultValue={event?.linkUrl ?? ''}
-            className="rounded border p-1.5"
+            className={controlVariants()}
           />
           <span className="text-muted-foreground text-xs">
             {translated(context, 'calendar.event.linkHint')}
           </span>
         </label>
-        <label className="flex flex-col gap-1 text-sm">
+        <label className="flex min-w-0 flex-col gap-2 text-sm">
           {translated(context, 'calendar.event.linkText')}
           <input
             name="link_text"
             maxLength={40}
             defaultValue={event?.linkLabel ?? ''}
-            className="rounded border p-1.5"
+            className={controlVariants()}
           />
           <span className="text-muted-foreground text-xs">
             {translated(context, 'calendar.event.linkTextHint')}
@@ -248,7 +249,7 @@ function EventForm({
       </div>
 
       <div className="flex items-center gap-3">
-        <button type="submit" className="bg-muted rounded border px-3 py-1.5 text-sm">
+        <button type="submit" className={buttonVariants({ variant: 'primary' })}>
           {submit}
         </button>
         {event !== null && (
@@ -295,7 +296,7 @@ export async function CalendarPage(context: PluginPageContext) {
   return (
     <div className="flex flex-col gap-6">
       <nav aria-label={translated(context, 'calendar.page.views')}>
-        <ul className={PLUGIN_TAB_LIST}>
+        <ul data-nav-tabs className={PLUGIN_TAB_LIST}>
           <li className="shrink-0">
             <a
               href="/plugins/calendar"
diff --git a/plugins/dues/package.json b/plugins/dues/package.json
index 347e340a6..a25a9cdc1 100644
--- a/plugins/dues/package.json
+++ b/plugins/dues/package.json
@@ -21,7 +21,8 @@
   },
   "dependencies": {
     "@meith/plugin-kit": "workspace:^",
-    "@meith/theme-kit": "workspace:^"
+    "@meith/theme-kit": "workspace:^",
+    "@meith/ui": "workspace:^"
   },
   "peerDependencies": {
     "react": "^19.2.0"
diff --git a/plugins/dues/src/ui/admin.tsx b/plugins/dues/src/ui/admin.tsx
index 8eff28d48..d908c6d49 100644
--- a/plugins/dues/src/ui/admin.tsx
+++ b/plugins/dues/src/ui/admin.tsx
@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react'
 
 import { PLUGIN_CARD, PLUGIN_NOTE, type PluginAdminPageContext } from '@meith/plugin-kit'
+import { buttonVariants, controlVariants } from '@meith/ui'
 
 import { type DuesConfig, MAX_GRACE_DAYS } from '../config'
 import { formatMinor } from '../money'
@@ -24,14 +25,9 @@ const QUIET_PANEL = PLUGIN_NOTE
 const CARD = PLUGIN_CARD
 const TH = 'px-2 py-1.5 text-left text-xs font-medium text-muted-foreground'
 const TD = 'px-2 py-1.5 align-top'
-const INPUT =
-  'rounded-md border border-border bg-background px-3 py-2 text-sm ' +
-  'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
-const ACT_BUTTON =
-  'inline-flex h-8 items-center justify-center rounded-md border border-transparent ' +
-  'bg-primary px-3 text-sm font-medium text-primary-foreground hover:bg-primary-hover'
-const QUIET_BUTTON =
-  'inline-flex h-8 items-center justify-center rounded-md border border-border px-3 text-sm'
+const INPUT = controlVariants()
+const ACT_BUTTON = buttonVariants({ variant: 'primary', size: 'sm' })
+const QUIET_BUTTON = buttonVariants({ variant: 'outline', size: 'sm' })
 
 function fmt(date: Date, context: PluginAdminPageContext): string {
   return context.t.parts(date, { dateStyle: 'medium', timeStyle: 'short', timeZone: 'UTC' })
@@ -127,7 +123,7 @@ export async function StatusPage({
         <h2 className="font-heading text-lg font-semibold">
           {context.t.t('dues.admin.status.working')}
         </h2>
-        <dl className="flex flex-col gap-1 text-sm">
+        <dl className="flex min-w-0 flex-col gap-2 text-sm">
           <div className="flex justify-between gap-2">
             <dt className="text-muted-foreground">{context.t.t('dues.admin.status.secret')}</dt>
             <dd>
@@ -584,19 +580,19 @@ export async function CodesPage({
           action="/admin/api/plugins/dues/codes/create"
           className="grid gap-3 sm:grid-cols-2"
         >
-          <label className="flex flex-col gap-1 text-sm">
+          <label className="flex min-w-0 flex-col gap-2 text-sm">
             <span className="text-xs text-muted-foreground">
               {context.t.t('dues.admin.codes.codeHelp')}
             </span>
             <input name="code" autoComplete="off" placeholder="LAUNCH50" className={INPUT} />
           </label>
-          <label className="flex flex-col gap-1 text-sm">
+          <label className="flex min-w-0 flex-col gap-2 text-sm">
             <span className="text-xs text-muted-foreground">
               {context.t.t('dues.admin.codes.percentHelp')}
             </span>
             <input type="number" name="percent" min={1} max={100} required className={INPUT} />
           </label>
-          <label className="flex flex-col gap-1 text-sm">
+          <label className="flex min-w-0 flex-col gap-2 text-sm">
             <span className="text-xs text-muted-foreground">
               {context.t.t('dues.admin.codes.planHelp')}
             </span>
@@ -609,13 +605,13 @@ export async function CodesPage({
               ))}
             </select>
           </label>
-          <label className="flex flex-col gap-1 text-sm">
+          <label className="flex min-w-0 flex-col gap-2 text-sm">
             <span className="text-xs text-muted-foreground">
               {context.t.t('dues.admin.codes.redemptionCap')}
             </span>
             <input type="number" name="max" min={1} className={INPUT} />
           </label>
-          <label className="flex flex-col gap-1 text-sm">
+          <label className="flex min-w-0 flex-col gap-2 text-sm">
             <span className="text-xs text-muted-foreground">
               {context.t.t('dues.admin.codes.expiresHelp')}
             </span>
@@ -731,26 +727,26 @@ function PlanFields({ plan, context }: { plan?: PlanRow; context: PluginAdminPag
   const period = plan === undefined ? { length: 90, unit: 'days' } : planPeriodParts(plan)
   return (
     <>
-      <label className="flex flex-col gap-1 text-sm">
+      <label className="flex min-w-0 flex-col gap-2 text-sm">
         <span className="text-xs text-muted-foreground">
           {context.t.t('dues.admin.plans.name')}
         </span>
         <input name="name" defaultValue={plan?.name ?? ''} required className={INPUT} />
       </label>
-      <label className="flex flex-col gap-1 text-sm">
+      <label className="flex min-w-0 flex-col gap-2 text-sm">
         <span className="text-xs text-muted-foreground">
           {context.t.t('dues.admin.plans.description')}
         </span>
         <input name="description" defaultValue={plan?.description ?? ''} className={INPUT} />
       </label>
-      <label className="flex flex-col gap-1 text-sm">
+      <label className="flex min-w-0 flex-col gap-2 text-sm">
         <span className="text-xs text-muted-foreground">
           {context.t.t('dues.admin.plans.giftGroup')}
         </span>
         <input name="group" defaultValue={plan?.groupKey ?? ''} required className={INPUT} />
       </label>
-      <div className="grid grid-cols-2 gap-3">
-        <label className="flex flex-col gap-1 text-sm">
+      <div className="grid gap-4 sm:grid-cols-2">
+        <label className="flex min-w-0 flex-col gap-2 text-sm">
           <span className="text-xs text-muted-foreground">
             {context.t.t('dues.admin.plans.price')}
           </span>
@@ -763,7 +759,7 @@ function PlanFields({ plan, context }: { plan?: PlanRow; context: PluginAdminPag
             className={INPUT}
           />
         </label>
-        <label className="flex flex-col gap-1 text-sm">
+        <label className="flex min-w-0 flex-col gap-2 text-sm">
           <span className="text-xs text-muted-foreground">
             {context.t.t('dues.admin.plans.currency')}
           </span>
@@ -778,8 +774,8 @@ function PlanFields({ plan, context }: { plan?: PlanRow; context: PluginAdminPag
         </label>
       </div>
       {(plan === undefined || plan.mode === 'fixed') && (
-        <div className="grid grid-cols-2 gap-3">
-          <label className="flex flex-col gap-1 text-sm">
+        <div className="grid gap-4 sm:grid-cols-2">
+          <label className="flex min-w-0 flex-col gap-2 text-sm">
             <span className="text-xs text-muted-foreground">
               {context.t.t('dues.admin.plans.length')}
             </span>
@@ -791,7 +787,7 @@ function PlanFields({ plan, context }: { plan?: PlanRow; context: PluginAdminPag
               className={INPUT}
             />
           </label>
-          <label className="flex flex-col gap-1 text-sm">
+          <label className="flex min-w-0 flex-col gap-2 text-sm">
             <span className="text-xs text-muted-foreground">
               {context.t.t('dues.admin.plans.unit')}
             </span>
@@ -805,7 +801,7 @@ function PlanFields({ plan, context }: { plan?: PlanRow; context: PluginAdminPag
         </div>
       )}
       {(plan === undefined || plan.mode === 'auto') && (
-        <label className="flex flex-col gap-1 text-sm">
+        <label className="flex min-w-0 flex-col gap-2 text-sm">
           <span className="text-xs text-muted-foreground">
             {context.t.t('dues.admin.plans.interval')}
           </span>
@@ -816,7 +812,7 @@ function PlanFields({ plan, context }: { plan?: PlanRow; context: PluginAdminPag
         </label>
       )}
       {(plan === undefined || plan.mode === 'auto') && (
-        <label className="flex flex-col gap-1 text-sm">
+        <label className="flex min-w-0 flex-col gap-2 text-sm">
           <span className="text-xs text-muted-foreground">
             {context.t.t('dues.admin.plans.stripePrice')}
           </span>
@@ -937,14 +933,14 @@ export async function PlansAdminPage({
           action="/admin/api/plugins/dues/plans/create"
           className="flex flex-col gap-3"
         >
-          <div className="grid grid-cols-2 gap-3">
-            <label className="flex flex-col gap-1 text-sm">
+          <div className="grid gap-4 sm:grid-cols-2">
+            <label className="flex min-w-0 flex-col gap-2 text-sm">
               <span className="text-xs text-muted-foreground">
                 {context.t.t('dues.admin.plans.key')}
               </span>
               <input name="key" placeholder="day-pass" required className={INPUT} />
             </label>
-            <label className="flex flex-col gap-1 text-sm">
+            <label className="flex min-w-0 flex-col gap-2 text-sm">
               <span className="text-xs text-muted-foreground">
                 {context.t.t('dues.admin.plans.bills')}
               </span>
diff --git a/plugins/dues/src/ui/pages.tsx b/plugins/dues/src/ui/pages.tsx
index 508715788..30b229337 100644
--- a/plugins/dues/src/ui/pages.tsx
+++ b/plugins/dues/src/ui/pages.tsx
@@ -2,6 +2,7 @@ import type { ReactNode } from 'react'
 
 import { PLUGIN_CARD, PLUGIN_NOTE, type PluginPageContext } from '@meith/plugin-kit'
 import type { Translator } from '@meith/theme-kit'
+import { buttonVariants, controlVariants } from '@meith/ui'
 
 import type { DuesConfig } from '../config'
 import { formatMinor } from '../money'
@@ -18,14 +19,9 @@ import {
 const QUIET_PANEL = PLUGIN_NOTE
 
 const CARD = PLUGIN_CARD
-const INPUT =
-  'w-full rounded-md border border-border bg-background px-3 py-2 text-sm ' +
-  'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
-const BUY_BUTTON =
-  'inline-flex h-9 items-center justify-center rounded-md border border-transparent ' +
-  'bg-primary px-4 text-sm font-medium text-primary-foreground hover:bg-primary-hover'
-const QUIET_BUTTON =
-  'inline-flex h-9 items-center justify-center rounded-md border border-border px-3 text-sm'
+const INPUT = controlVariants()
+const BUY_BUTTON = buttonVariants({ variant: 'primary' })
+const QUIET_BUTTON = buttonVariants({ variant: 'outline', size: 'sm' })
 
 function fmtDate(date: Date, t: Translator): ReactNode {
   const label = t.parts(date, {
@@ -180,10 +176,14 @@ function PlanCard({
       </div>
 
       {viewerSignedIn ? (
-        <form method="post" action="/api/plugins/dues/checkout" className="flex flex-col gap-3">
+        <form
+          method="post"
+          action="/api/plugins/dues/checkout"
+          className="mt-auto flex flex-col gap-3"
+        >
           <input type="hidden" name="plan" value={plan.key} />
           {plan.giftable && (
-            <label className="flex flex-col gap-1 text-sm">
+            <label className="flex min-w-0 flex-col gap-2 text-sm">
               <span className="text-xs text-muted-foreground">{t.t('dues.plan.gift')}</span>
               <input
                 name="recipient"
@@ -193,7 +193,7 @@ function PlanCard({
               />
             </label>
           )}
-          <label className="flex flex-col gap-1 text-sm">
+          <label className="flex min-w-0 flex-col gap-2 text-sm">
             <span className="text-xs text-muted-foreground">{t.t('dues.plan.discountCode')}</span>
             <input name="code" defaultValue={defaultCode} autoComplete="off" className={INPUT} />
           </label>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cb3353d2b..1f59dc2e0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -850,6 +850,9 @@ importers:
       '@meith/theme-kit':
         specifier: workspace:^
         version: link:../theme-kit
+      '@meith/ui':
+        specifier: workspace:^
+        version: link:../ui
       react:
         specifier: ^19.2.0
         version: 19.2.0
@@ -1105,6 +1108,9 @@ importers:
       '@meith/plugin-kit':
         specifier: workspace:^
         version: link:../../packages/plugin-kit
+      '@meith/ui':
+        specifier: workspace:^
+        version: link:../../packages/ui
       react:
         specifier: ^19.2.0
         version: 19.2.8
@@ -1121,6 +1127,9 @@ importers:
       '@meith/theme-kit':
         specifier: workspace:^
         version: link:../../packages/theme-kit
+      '@meith/ui':
+        specifier: workspace:^
+        version: link:../../packages/ui
       react:
         specifier: ^19.2.0
         version: 19.2.0
diff --git a/scripts/i18n-baseline.json b/scripts/i18n-baseline.json
index b2bb4b6d6..ddb2076d0 100644
--- a/scripts/i18n-baseline.json
+++ b/scripts/i18n-baseline.json
@@ -144,7 +144,6 @@
   "packages/theme-kit/src/slots.ts": 64,
   "packages/theme-kit/src/theme.ts": 6,
   "packages/ui/src/disclosure.tsx": 1,
-  "packages/ui/src/field.tsx": 1,
   "packages/ui/src/menu.tsx": 4,
   "packages/ui/src/variants.ts": 3,
   "packages/upgrade/src/plan.ts": 1,
@@ -154,8 +153,6 @@
   "plugins/dues/src/plans.ts": 1,
   "plugins/dues/src/store.ts": 12,
   "plugins/dues/src/stripe/client.ts": 1,
-  "plugins/dues/src/ui/admin.tsx": 2,
-  "plugins/dues/src/ui/pages.tsx": 2,
   "plugins/reference/src/plugin.tsx": 1,
   "themes/default/src/slots/forum-row.tsx": 1,
   "themes/phasebook/src/shared.tsx": 2,
diff --git a/themes/clubhouse/src/copy.ts b/themes/clubhouse/src/copy.ts
index b2cfc89b6..6041d3da4 100644
--- a/themes/clubhouse/src/copy.ts
+++ b/themes/clubhouse/src/copy.ts
@@ -1,3 +1,4 @@
+import { mobileHeaderNavCopy } from '@meith/theme-default'
 import type { SlotCopy, Translator } from '@meith/theme-kit'
 
 function copyFor(t: Translator, keys: readonly string[]): SlotCopy {
@@ -71,7 +72,7 @@ export function forumRowCopy(t: Translator): SlotCopy {
 }
 
 export function headerCopy(t: Translator): SlotCopy {
-  return copyFor(t, ['clubhouse.header.boardSections'])
+  return { ...mobileHeaderNavCopy(t), ...copyFor(t, ['clubhouse.header.boardSections']) }
 }
 
 export function latestPostsCopy(t: Translator): SlotCopy {
diff --git a/themes/clubhouse/src/shared.tsx b/themes/clubhouse/src/shared.tsx
index 32ff4da82..8e45814cb 100644
--- a/themes/clubhouse/src/shared.tsx
+++ b/themes/clubhouse/src/shared.tsx
@@ -34,10 +34,10 @@ export const TAB =
   'inline-flex h-11 items-center px-3.5 text-sm font-bold tracking-[0.03em] whitespace-nowrap uppercase transition-colors'
 
 export const BUTTON =
-  'inline-flex h-8 items-center rounded-sm px-3 text-[0.6875rem] font-bold tracking-[0.08em] whitespace-nowrap uppercase transition-colors'
+  'inline-flex h-8 pointer-coarse:min-h-11 items-center rounded-sm px-3 text-[0.6875rem] font-bold tracking-[0.08em] whitespace-nowrap uppercase transition-colors'
 
 export const TABLE_ROW =
-  'grid grid-cols-[auto_minmax(0,1fr)] gap-x-3 gap-y-1.5 px-4 py-2.5 md:grid-cols-[auto_minmax(0,1fr)_4.5rem_4.5rem_14rem] md:items-center'
+  'grid grid-cols-[auto_minmax(0,1fr)] gap-x-3 gap-y-1.5 px-4 py-2.5 @3xl/card:grid-cols-[auto_minmax(0,1fr)_4.5rem_4.5rem_14rem] @3xl/card:items-center'
 
 export function ClubBar({ className }: { className?: string }) {
   return (
@@ -72,7 +72,7 @@ export function ColumnHeads({
   return (
     <div
       aria-hidden="true"
-      className={`hidden border-b-2 border-b-secondary bg-surface md:grid ${TABLE_ROW} py-1.5`}
+      className={`hidden border-b-2 border-b-secondary bg-surface @3xl/card:grid ${TABLE_ROW} py-1.5`}
     >
       <span />
       <span className={MICRO}>{first}</span>
diff --git a/themes/clubhouse/src/slots/forum-row.tsx b/themes/clubhouse/src/slots/forum-row.tsx
index 9fc53429b..e63aa3fc9 100644
--- a/themes/clubhouse/src/slots/forum-row.tsx
+++ b/themes/clubhouse/src/slots/forum-row.tsx
@@ -41,18 +41,18 @@ export function ForumRow({ forum, copy }: ForumRowSlotModel & { copy: SlotCopy }
 
       {!isLink && (
         <>
-          <span className="col-start-2 md:col-start-3 md:block md:text-right">
+          <span className="col-start-2 @3xl/card:col-start-3 @3xl/card:block @3xl/card:text-right">
             <Tally value={forum.threadCount} label={c('threads')} />
-            <span className="ms-3 md:hidden">
+            <span className="ms-3 @3xl/card:hidden">
               <Tally value={forum.postCount} label={c('posts')} />
             </span>
           </span>
 
-          <span className="hidden md:block md:text-right">
+          <span className="hidden @3xl/card:block @3xl/card:text-right">
             <Tally value={forum.postCount} label={c('posts')} />
           </span>
 
-          <div className="col-start-2 min-w-0 text-xs text-muted-foreground md:col-start-5">
+          <div className="col-start-2 min-w-0 text-xs text-muted-foreground @3xl/card:col-start-5">
             {forum.lastPost === null ? (
               <span className={MICRO}>{c('noPostsYet')}</span>
             ) : (
diff --git a/themes/clubhouse/src/slots/header.tsx b/themes/clubhouse/src/slots/header.tsx
index 42054c86f..2ba882d38 100644
--- a/themes/clubhouse/src/slots/header.tsx
+++ b/themes/clubhouse/src/slots/header.tsx
@@ -1,3 +1,4 @@
+import { MobileHeaderNav } from '@meith/theme-default'
 import type { HeaderModel, SlotCopy } from '@meith/theme-kit'
 import { fromSlotCopy, linkTarget } from '@meith/theme-kit'
 
@@ -54,90 +55,6 @@ function Submenu({ items }: { items: HeaderModel['navigation'][number]['submenu'
   )
 }
 
-function Chevron({ className }: { className: string }) {
-  return (
-    <svg
-      aria-hidden="true"
-      viewBox="0 0 12 12"
-      className={className}
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="m4.5 3 3 3-3 3" />
-    </svg>
-  )
-}
-
-function MobileNavItem({ item }: { item: HeaderModel['navigation'][number] }) {
-  if (item.submenu === undefined || item.submenu.length === 0) {
-    return (
-      <li>
-        <a
-          href={item.href}
-          {...linkTarget(item)}
-          className={`${HEADING} flex min-h-11 items-center px-2.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground`}
-        >
-          {item.label}
-        </a>
-      </li>
-    )
-  }
-
-  return (
-    <li>
-      <details data-nav-disclosure name="clubhouse-header-submenu" className="group/submenu">
-        <summary
-          className={`${HEADING} flex min-h-11 cursor-default list-none items-center justify-between gap-2 px-2.5 text-sm text-muted-foreground select-none [&::-webkit-details-marker]:hidden [&::marker]:content-none hover:bg-accent hover:text-foreground`}
-        >
-          <a
-            href={item.href}
-            {...linkTarget(item)}
-            className="min-w-0 flex-1 truncate hover:underline"
-          >
-            {item.label}
-          </a>
-          <span className="flex size-11 shrink-0 items-center justify-center">
-            <Chevron className="size-3 text-muted-foreground transition-transform group-open/submenu:rotate-90" />
-          </span>
-        </summary>
-        <ul className="ml-2 flex flex-col gap-0.5 border-l border-border py-1 pl-2.5">
-          {item.submenu.map((child) => (
-            <li key={child.href}>
-              <a
-                href={child.href}
-                {...linkTarget(child)}
-                className="flex min-h-11 items-center px-2.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
-              >
-                {child.label}
-              </a>
-            </li>
-          ))}
-        </ul>
-      </details>
-    </li>
-  )
-}
-
-function MenuGlyph() {
-  return (
-    <svg
-      aria-hidden="true"
-      viewBox="0 0 20 20"
-      className="size-5"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.75"
-      strokeLinecap="round"
-    >
-      <path className="group-open/menu:hidden" d="M3 5.5h14M3 10h14M3 14.5h14" />
-      <path className="hidden group-open/menu:block" d="m5 5 10 10M15 5 5 15" />
-    </svg>
-  )
-}
-
 export function Header({
   boardTitle,
   homeHref,
@@ -161,26 +78,7 @@ export function Header({
         </a>
         <div className="flex min-w-0 items-center gap-3">
           {children}
-          {navigation.length > 0 && (
-            <nav aria-label={c('boardSections')} data-nav-view="mobile" className="lg:hidden">
-              <details data-nav-disclosure className="group/menu">
-                <summary
-                  className={`rounded-md border border-border text-foreground transition-colors hover:bg-primary hover:text-primary-foreground group-open/menu:bg-primary group-open/menu:text-primary-foreground flex size-10 cursor-default list-none items-center justify-center select-none [&::-webkit-details-marker]:hidden [&::marker]:content-none`}
-                >
-                  <MenuGlyph />
-                  <span className="sr-only">{c('boardSections')}</span>
-                </summary>
-
-                <div className="absolute inset-x-0 top-full z-30 max-h-[calc(100dvh-4rem)] overflow-y-auto border-b border-border bg-card shadow-elevation">
-                  <ul className={`${PAGE} flex flex-col gap-0.5 py-2`}>
-                    {navigation.map((item) => (
-                      <MobileNavItem key={item.href} item={item} />
-                    ))}
-                  </ul>
-                </div>
-              </details>
-            </nav>
-          )}
+          <MobileHeaderNav boardTitle={boardTitle} navigation={navigation} copy={copy} />
         </div>
       </div>
 
diff --git a/themes/clubhouse/src/slots/thread-row.tsx b/themes/clubhouse/src/slots/thread-row.tsx
index b006e1c3e..382c8eb53 100644
--- a/themes/clubhouse/src/slots/thread-row.tsx
+++ b/themes/clubhouse/src/slots/thread-row.tsx
@@ -62,18 +62,18 @@ export function ThreadRow({
         </p>
       </div>
 
-      <span className="col-start-2 md:col-start-3 md:block md:text-right">
+      <span className="col-start-2 @3xl/card:col-start-3 @3xl/card:block @3xl/card:text-right">
         <Tally value={thread.replyCount} label={c('replies')} />
-        <span className="ms-3 md:hidden">
+        <span className="ms-3 @3xl/card:hidden">
           <Tally value={thread.viewCount} label={c('views')} />
         </span>
       </span>
 
-      <span className="hidden md:block md:text-right">
+      <span className="hidden @3xl/card:block @3xl/card:text-right">
         <Tally value={thread.viewCount} label={c('views')} />
       </span>
 
-      <div className="col-start-2 min-w-0 text-xs text-muted-foreground md:col-start-5">
+      <div className="col-start-2 min-w-0 text-xs text-muted-foreground @3xl/card:col-start-5">
         {thread.lastPost === null ? (
           <span className={MICRO}>{c('noRepliesYet')}</span>
         ) : (
diff --git a/themes/default/src/copy.ts b/themes/default/src/copy.ts
index 55922c084..510e29e1d 100644
--- a/themes/default/src/copy.ts
+++ b/themes/default/src/copy.ts
@@ -29,7 +29,12 @@ export function announcementCopy(t: Translator): SlotCopy {
 }
 
 export function boardIndexCopy(t: Translator): SlotCopy {
-  return copyFor(t, ['default.boardIndex.boardActivity', 'default.boardIndex.markAllRead'])
+  return copyFor(t, [
+    'default.boardIndex.boardActivity',
+    'default.boardIndex.markAllRead',
+    'default.boardIndex.heading',
+    'default.boardIndex.description',
+  ])
 }
 
 export function boardStatsCopy(t: Translator): SlotCopy {
@@ -103,7 +108,13 @@ export function forumRowCopy(t: Translator): SlotCopy {
 }
 
 export function headerCopy(t: Translator): SlotCopy {
-  return copyFor(t, ['default.header.sections'])
+  return copyFor(t, [
+    'default.header.sections',
+    'default.header.openMenu',
+    'default.header.closeMenu',
+    'default.header.overview',
+    'default.panelNav.open',
+  ])
 }
 
 export function latestPostsCopy(t: Translator): SlotCopy {
@@ -168,7 +179,16 @@ export function paginationCopy(t: Translator): SlotCopy {
 }
 
 export function panelNavCopy(t: Translator): SlotCopy {
-  return copyFor(t, ['default.panelNav.countCap', 'default.panelNav.waiting'])
+  return copyFor(t, [
+    'default.panelNav.countCap',
+    'default.panelNav.waiting',
+    'default.panelNav.open',
+    'default.panelNav.close',
+    'default.panelNav.overview',
+    'default.panelNav.title.admincp',
+    'default.panelNav.title.usercp',
+    'default.panelNav.title.modcp',
+  ])
 }
 
 export function panelPageCopy(t: Translator): SlotCopy {
diff --git a/themes/default/src/index.ts b/themes/default/src/index.ts
index aa4688c93..f1cab759b 100644
--- a/themes/default/src/index.ts
+++ b/themes/default/src/index.ts
@@ -1,4 +1,7 @@
+export { headerCopy as mobileHeaderNavCopy, panelNavCopy as mobilePanelNavCopy } from './copy'
 export { defaultMessages } from './messages'
+export { MobileHeaderNav } from './slots/mobile-header-nav'
+export { MobilePanelNav } from './slots/panel-nav'
 export { defaultTheme } from './theme'
 export {
   BROWSER_THEME_COLOR,
diff --git a/themes/default/src/messages/en.json b/themes/default/src/messages/en.json
index 11b658d87..a09729da8 100644
--- a/themes/default/src/messages/en.json
+++ b/themes/default/src/messages/en.json
@@ -2,6 +2,8 @@
   "default.announcement.posted": "Posted",
   "default.announcement.postedBy": "Posted by",
   "default.boardIndex.boardActivity": "Board activity",
+  "default.boardIndex.description": "Find your next conversation.",
+  "default.boardIndex.heading": "Community",
   "default.boardIndex.markAllRead": "Mark all forums read",
   "default.boardStats.counted": "Counted",
   "default.boardStats.heading": "Board statistics",
@@ -46,6 +48,9 @@
   "default.forumRow.thread.one": "thread",
   "default.forumRow.thread.other": "threads",
   "default.forumRow.threadsLabel": "Threads",
+  "default.header.closeMenu": "Close navigation",
+  "default.header.openMenu": "Open navigation",
+  "default.header.overview": "Overview",
   "default.header.sections": "Board sections",
   "default.latestPosts.asOf": "As of",
   "default.latestPosts.dot": "·",
@@ -81,7 +86,13 @@
   "default.pagination.of": "of",
   "default.pagination.page": "Page",
   "default.pagination.previous": "Previous",
+  "default.panelNav.close": "Close panel navigation",
   "default.panelNav.countCap": "99+",
+  "default.panelNav.open": "Open panel navigation",
+  "default.panelNav.overview": "Overview",
+  "default.panelNav.title.admincp": "Administration",
+  "default.panelNav.title.modcp": "Moderation",
+  "default.panelNav.title.usercp": "Your account",
   "default.panelNav.waiting": "waiting",
   "default.panelPage.back": "←",
   "default.postActions.edit": "Edit",
diff --git a/themes/default/src/shared.tsx b/themes/default/src/shared.tsx
index d9e76b8f6..6e39057e9 100644
--- a/themes/default/src/shared.tsx
+++ b/themes/default/src/shared.tsx
@@ -7,11 +7,11 @@ import type {
 } from '@meith/theme-kit'
 import { Badge, cn } from '@meith/ui'
 
-const PAGE_WIDTH = 'max-w-6xl'
+const PAGE_WIDTH = 'max-w-7xl'
 
 export const PAGE = `mx-auto w-full ${PAGE_WIDTH} px-4 sm:px-6`
 
-export const PAGE_BODY = `${PAGE} flex w-full flex-col gap-5 py-5 sm:py-6`
+export const PAGE_BODY = `${PAGE} flex w-full flex-col gap-6 py-6 sm:py-8`
 
 export function pageAt(width: 'max-w-3xl' | 'max-w-4xl'): string {
   return `mx-auto w-full ${width} px-4 sm:px-6`
@@ -26,9 +26,6 @@ export const MUTED_LINK = `text-muted-foreground ${LINK}`
 
 export const BELOW_HEADER = 'top-14'
 
-export const PAGE_TITLE =
-  'font-heading text-xl font-semibold tracking-tight text-balance sm:text-2xl'
-
 export const SECTION_TITLE = 'font-heading text-lg font-semibold tracking-tight text-foreground'
 
 export const EYEBROW = 'text-xs font-semibold tracking-wide text-muted-foreground uppercase'
@@ -163,17 +160,20 @@ export function Figures({ items, className }: { items: readonly CountItem[]; cla
   return (
     <dl
       className={cn(
-        'flex flex-wrap gap-x-3 gap-y-0.5 text-xs text-muted-foreground md:grid md:grid-cols-2 md:gap-x-5 md:text-center',
+        'flex flex-wrap gap-x-3 gap-y-0.5 text-xs text-muted-foreground @3xl/card:grid @3xl/card:grid-cols-2 @3xl/card:gap-x-5 @3xl/card:text-center',
         className,
       )}
     >
       {items.map((item) => (
-        <div key={item.label} className="flex items-baseline gap-x-1 md:flex-col md:gap-0">
+        <div
+          key={item.label}
+          className="flex items-baseline gap-x-1 @3xl/card:flex-col @3xl/card:gap-0"
+        >
           <dt className="sr-only">{item.label}</dt>
-          <dd className={cn('font-semibold text-foreground md:text-sm', NUMERIC)}>
+          <dd className={cn('font-semibold text-foreground @3xl/card:text-sm', NUMERIC)}>
             {item.value.label}
           </dd>
-          <dd className="md:text-[0.6875rem] md:leading-4">
+          <dd className="@3xl/card:text-[0.6875rem] @3xl/card:leading-4">
             {item.value.value === 1 ? item.one : item.many}
           </dd>
         </div>
diff --git a/themes/default/src/slots/auth-page.tsx b/themes/default/src/slots/auth-page.tsx
index 6d5b4ab43..5bc9d8bb1 100644
--- a/themes/default/src/slots/auth-page.tsx
+++ b/themes/default/src/slots/auth-page.tsx
@@ -1,4 +1,5 @@
 import type { AuthPageModel } from '@meith/theme-kit'
+import { PageDescription, PageHeader, PageHeaderContent, PageTitle } from '@meith/ui'
 
 import { MUTED_LINK } from '../shared'
 
@@ -9,15 +10,13 @@ export function AuthPage({ title, alert, links, regions }: AuthPageModel) {
       tabIndex={-1}
       className="flex flex-1 flex-col items-center justify-center px-4 py-10 sm:px-6 sm:py-14"
     >
-      <div className="flex w-full max-w-sm flex-col gap-6 rounded-2xl border border-border bg-card p-6 text-card-foreground shadow-elevation sm:p-8">
-        <div className="flex flex-col gap-1">
-          <h1 className="font-heading text-2xl font-semibold tracking-tight text-foreground">
-            {title}
-          </h1>
-          {regions.lede !== undefined && (
-            <p className="text-sm text-muted-foreground">{regions.lede}</p>
-          )}
-        </div>
+      <div className="flex w-full max-w-md flex-col gap-6 rounded-2xl border border-border bg-card p-6 text-card-foreground shadow-elevation sm:p-10">
+        <PageHeader>
+          <PageHeaderContent>
+            <PageTitle className="sm:text-2xl">{title}</PageTitle>
+            {regions.lede !== undefined && <PageDescription>{regions.lede}</PageDescription>}
+          </PageHeaderContent>
+        </PageHeader>
 
         {alert !== null && (
           <p
diff --git a/themes/default/src/slots/board-index.tsx b/themes/default/src/slots/board-index.tsx
index 487f604b3..4382a0b6b 100644
--- a/themes/default/src/slots/board-index.tsx
+++ b/themes/default/src/slots/board-index.tsx
@@ -1,6 +1,12 @@
 import type { BoardIndexModel, SlotCopy } from '@meith/theme-kit'
 import { fromSlotCopy } from '@meith/theme-kit'
-import { buttonVariants } from '@meith/ui'
+import {
+  buttonVariants,
+  PageDescription,
+  PageHeader,
+  PageHeaderContent,
+  PageTitle,
+} from '@meith/ui'
 
 import { PAGE_BODY } from '../shared'
 
@@ -21,13 +27,19 @@ export function BoardIndex({
         <div className="flex flex-col gap-3">{regions.announcements}</div>
       )}
 
-      {markAllReadAction !== null && (
-        <form action={markAllReadAction} method="post" className="-mb-3 self-end">
-          <button type="submit" className={buttonVariants({ variant: 'ghost', size: 'sm' })}>
-            {c('markAllRead')}
-          </button>
-        </form>
-      )}
+      <PageHeader>
+        <PageHeaderContent>
+          <PageTitle>{c('heading')}</PageTitle>
+          <PageDescription>{c('description')}</PageDescription>
+        </PageHeaderContent>
+        {markAllReadAction !== null && (
+          <form action={markAllReadAction} method="post">
+            <button type="submit" className={buttonVariants({ variant: 'ghost', size: 'sm' })}>
+              {c('markAllRead')}
+            </button>
+          </form>
+        )}
+      </PageHeader>
 
       <div
         className={
diff --git a/themes/default/src/slots/category-block.tsx b/themes/default/src/slots/category-block.tsx
index ab4c228e4..0d40a7b53 100644
--- a/themes/default/src/slots/category-block.tsx
+++ b/themes/default/src/slots/category-block.tsx
@@ -8,7 +8,7 @@ export function CategoryBlock({ category, children }: CategoryBlockModel) {
 
   return (
     <Card aria-labelledby={headingId} className="rounded-xl">
-      <CardHeader className="flex-col items-start gap-0 bg-card px-5 py-3">
+      <CardHeader className="flex-col items-start gap-1 bg-surface/50 px-5 py-4">
         <CardTitle id={headingId} className="flex items-center gap-2.5 text-base">
           <span aria-hidden="true" className="h-4 w-1 rounded-full bg-primary" />
           <a href={category.href} className={`${LINK} text-foreground`}>
diff --git a/themes/default/src/slots/discovery-view.tsx b/themes/default/src/slots/discovery-view.tsx
index 9e23079d5..31fb99b56 100644
--- a/themes/default/src/slots/discovery-view.tsx
+++ b/themes/default/src/slots/discovery-view.tsx
@@ -1,38 +1,21 @@
-import type { DiscoveryViewModel, SlotCopy, TabModel } from '@meith/theme-kit'
+import type { DiscoveryViewModel, SlotCopy } from '@meith/theme-kit'
 import { fromSlotCopy } from '@meith/theme-kit'
-import { Avatar, buttonVariants, Card, CardRows, cn, Empty, EmptyDescription } from '@meith/ui'
+import {
+  Avatar,
+  buttonVariants,
+  Card,
+  CardRows,
+  cn,
+  Empty,
+  EmptyDescription,
+  NavTabs,
+  PageDescription,
+  PageHeader,
+  PageHeaderContent,
+  PageTitle,
+} from '@meith/ui'
 
-import { LINK, NUMERIC, PAGE_TITLE, PILL, pageAt, Stamp } from '../shared'
-
-const TAB =
-  'inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-sm whitespace-nowrap transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
-
-function Tabs({ label, tabs }: { label: string; tabs: readonly TabModel[] }) {
-  if (tabs.length === 0) return null
-
-  return (
-    <nav aria-label={label} className="flex flex-wrap items-center gap-x-3 gap-y-2">
-      <ul className="inline-flex max-w-full items-center gap-1 overflow-x-auto rounded-lg border border-border bg-surface p-1">
-        {tabs.map((tab) => (
-          <li key={tab.href} className="shrink-0">
-            <a
-              href={tab.href}
-              {...(tab.isCurrent ? { 'aria-current': 'page' as const } : {})}
-              className={cn(
-                TAB,
-                tab.isCurrent
-                  ? 'bg-card font-semibold text-primary shadow-sm'
-                  : 'font-medium text-muted-foreground hover:text-foreground',
-              )}
-            >
-              {tab.label}
-            </a>
-          </li>
-        ))}
-      </ul>
-    </nav>
-  )
-}
+import { LINK, NUMERIC, PILL, pageAt, Stamp } from '../shared'
 
 export function DiscoveryView({
   title,
@@ -54,12 +37,14 @@ export function DiscoveryView({
       tabIndex={-1}
       className={`${pageAt('max-w-4xl')} flex flex-1 flex-col gap-6 py-6 sm:py-8`}
     >
-      <div className="flex flex-col gap-1">
-        <h1 className={PAGE_TITLE}>{title}</h1>
-        <p className="text-sm text-muted-foreground">{blurb}</p>
-      </div>
+      <PageHeader>
+        <PageHeaderContent>
+          <PageTitle>{title}</PageTitle>
+          <PageDescription>{blurb}</PageDescription>
+        </PageHeaderContent>
+      </PageHeader>
 
-      <Tabs label={tabsLabel} tabs={tabs} />
+      <NavTabs label={tabsLabel} tabs={tabs} />
 
       {refusal !== null ? (
         <p role="alert" className="rounded-lg border border-border bg-card px-4 py-3 text-sm">
@@ -88,7 +73,7 @@ export function DiscoveryView({
                   <div className="flex min-w-0 flex-col gap-0.5">
                     <a
                       href={row.href}
-                      className={`truncate text-[0.9375rem] font-medium text-foreground ${LINK}`}
+                      className={`line-clamp-2 [overflow-wrap:anywhere] text-[0.9375rem] font-medium text-foreground ${LINK}`}
                     >
                       {row.title}
                     </a>
diff --git a/themes/default/src/slots/error-notice.tsx b/themes/default/src/slots/error-notice.tsx
index 1730cecd8..e1a16650d 100644
--- a/themes/default/src/slots/error-notice.tsx
+++ b/themes/default/src/slots/error-notice.tsx
@@ -1,6 +1,6 @@
 import type { ErrorNoticeModel, SlotCopy } from '@meith/theme-kit'
 import { fromSlotCopy } from '@meith/theme-kit'
-import { buttonVariants, Card, CardContent, CardFooter } from '@meith/ui'
+import { buttonVariants, Card, CardContent, CardFooter, PageTitle } from '@meith/ui'
 
 import { NUMERIC } from '../shared'
 
@@ -20,7 +20,7 @@ export function ErrorNotice({
         <p className={`text-xs font-medium tracking-wide text-destructive uppercase ${NUMERIC}`}>
           {c('error')} {status}
         </p>
-        <h1 className="mt-1 text-2xl font-semibold tracking-tight text-balance">{title}</h1>
+        <PageTitle className="mt-1 sm:text-2xl">{title}</PageTitle>
         <p className="mt-2 text-sm text-muted-foreground">{message}</p>
 
         <a href={homeHref} className={`mt-5 ${buttonVariants({ variant: 'primary' })}`}>
diff --git a/themes/default/src/slots/footer.tsx b/themes/default/src/slots/footer.tsx
index 539baece7..9ea841ffe 100644
--- a/themes/default/src/slots/footer.tsx
+++ b/themes/default/src/slots/footer.tsx
@@ -17,7 +17,7 @@ export function Footer({
     <footer className="mt-auto border-t border-border bg-card">
       {regions?.controls && (
         <div
-          className={`${PAGE} flex flex-wrap items-center justify-end gap-x-6 gap-y-3 border-b border-border py-3`}
+          className={`${PAGE} flex flex-wrap items-center justify-between gap-x-6 gap-y-3 border-b border-border py-3`}
         >
           {regions.controls}
         </div>
diff --git a/themes/default/src/slots/forum-display.tsx b/themes/default/src/slots/forum-display.tsx
index 79c3295a2..40e53eaab 100644
--- a/themes/default/src/slots/forum-display.tsx
+++ b/themes/default/src/slots/forum-display.tsx
@@ -9,9 +9,13 @@ import {
   EmptyAction,
   EmptyDescription,
   EmptyTitle,
+  PageHeader,
+  PageHeaderActions,
+  PageHeaderContent,
+  PageTitle,
 } from '@meith/ui'
 
-import { Counts, isEmptyRegion, PAGE_BODY, PAGE_TITLE } from '../shared'
+import { Counts, isEmptyRegion, PAGE_BODY } from '../shared'
 
 export function ForumDisplay({
   forum,
@@ -24,9 +28,9 @@ export function ForumDisplay({
 
   return (
     <div className={PAGE_BODY}>
-      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between sm:gap-6">
-        <div className="min-w-0">
-          <h1 className={PAGE_TITLE}>{forum.title}</h1>
+      <PageHeader>
+        <PageHeaderContent>
+          <PageTitle>{forum.title}</PageTitle>
           <div className="mt-1 flex flex-wrap items-baseline gap-x-3 gap-y-1 text-sm text-muted-foreground">
             {forum.description !== null && <p className="max-w-prose">{forum.description}</p>}
             {forum.type !== 'link' && (
@@ -48,9 +52,9 @@ export function ForumDisplay({
               />
             )}
           </div>
-        </div>
+        </PageHeaderContent>
 
-        <div className="flex shrink-0 flex-wrap items-center gap-2">
+        <PageHeaderActions>
           {markReadAction !== null && (
             <form action={markReadAction} method="post">
               <button type="submit" className={buttonVariants({ variant: 'ghost' })}>
@@ -66,8 +70,8 @@ export function ForumDisplay({
               {c('newThread')}
             </a>
           )}
-        </div>
-      </div>
+        </PageHeaderActions>
+      </PageHeader>
 
       {regions.announcements !== undefined && (
         <div className="flex flex-col gap-3">{regions.announcements}</div>
diff --git a/themes/default/src/slots/forum-jump.tsx b/themes/default/src/slots/forum-jump.tsx
index 8e160c3f3..8df015e4f 100644
--- a/themes/default/src/slots/forum-jump.tsx
+++ b/themes/default/src/slots/forum-jump.tsx
@@ -13,10 +13,11 @@ export function ForumJump({ action, field, forums, submitLabel, label }: ForumJu
       </Label>
 
       <NativeSelect
+        controlSize="sm"
         id={id}
         name={field}
         defaultValue={forums.find((forum) => forum.isSelected)?.value ?? ''}
-        className="h-8 w-auto min-w-48 flex-1 text-xs sm:flex-none"
+        className="h-8 w-auto min-w-0 max-w-full flex-1 sm:w-48 text-xs sm:flex-none"
       >
         {forums.map((forum) => (
           <option
diff --git a/themes/default/src/slots/forum-row.tsx b/themes/default/src/slots/forum-row.tsx
index c23e304a2..768c69b7f 100644
--- a/themes/default/src/slots/forum-row.tsx
+++ b/themes/default/src/slots/forum-row.tsx
@@ -29,15 +29,17 @@ export function ForumRow({ forum, copy }: ForumRowSlotModel & { copy: SlotCopy }
     <li
       data-unread={forum.isUnread ? '' : undefined}
       className={
-        'grid grid-cols-[auto_minmax(0,1fr)] gap-x-3.5 gap-y-2 px-4 py-3.5 transition-colors hover:bg-muted/50 sm:px-5' +
-        (isLink ? '' : ' md:grid-cols-[auto_minmax(0,1fr)_9rem_16rem] md:items-center md:gap-x-5')
+        'grid grid-cols-[auto_minmax(0,1fr)] gap-x-3.5 gap-y-2 px-4 py-4 transition-colors hover:bg-muted/50 sm:px-5' +
+        (isLink
+          ? ''
+          : ' @3xl/card:grid-cols-[auto_minmax(0,1fr)_6rem_13rem] @3xl/card:items-center @3xl/card:gap-x-5')
       }
     >
-      <Tile label={forum.title} unread={forum.isUnread} className="mt-0.5 md:mt-0">
+      <Tile label={forum.title} unread={forum.isUnread} className="mt-0.5 @3xl/card:mt-0">
         {isLink ? <LinkGlyph /> : undefined}
       </Tile>
 
-      <div className="min-w-0">
+      <div className="min-w-0 [overflow-wrap:anywhere]">
         <a
           href={forum.href}
           className={
@@ -70,9 +72,9 @@ export function ForumRow({ forum, copy }: ForumRowSlotModel & { copy: SlotCopy }
       </div>
 
       {!isLink && (
-        <div className="col-start-2 flex min-w-0 flex-col gap-y-1 text-xs text-muted-foreground md:contents">
+        <div className="col-start-2 flex min-w-0 flex-col gap-y-1 text-xs text-muted-foreground @3xl/card:contents">
           <Figures
-            className="md:col-start-3 md:justify-self-end"
+            className="@3xl/card:col-start-3 @3xl/card:justify-self-end"
             items={[
               {
                 label: c('threadsLabel'),
@@ -89,18 +91,18 @@ export function ForumRow({ forum, copy }: ForumRowSlotModel & { copy: SlotCopy }
             ]}
           />
 
-          <div className="order-first flex min-w-0 max-w-full flex-wrap gap-x-1 md:order-none md:col-start-4 md:block md:border-l md:border-border md:pl-5">
+          <div className="order-first flex min-w-0 max-w-full flex-wrap gap-x-1 @3xl/card:order-none @3xl/card:col-start-4 @3xl/card:block @3xl/card:border-l @3xl/card:border-border @3xl/card:pl-5">
             {forum.lastPost === null ? (
               <span className="text-forum-read">{c('noPostsYet')}</span>
             ) : (
               <>
                 <a
                   href={forum.lastPost.href}
-                  className={`max-w-full truncate font-medium text-foreground md:block ${LINK}`}
+                  className={`max-w-full truncate font-medium text-foreground @3xl/card:block ${LINK}`}
                 >
                   {forum.lastPost.threadTitle}
                 </a>
-                <span className="md:mt-0.5 md:block md:truncate">
+                <span className="@3xl/card:mt-0.5 @3xl/card:block @3xl/card:truncate">
                   {c('by')} <UserRef user={forum.lastPost.author} className="font-normal" />{' '}
                   {c('dot')} <Stamp at={forum.lastPost.at} />
                 </span>
diff --git a/themes/default/src/slots/header.tsx b/themes/default/src/slots/header.tsx
index 22bdd81f1..caf9c492d 100644
--- a/themes/default/src/slots/header.tsx
+++ b/themes/default/src/slots/header.tsx
@@ -1,17 +1,12 @@
 import type { HeaderModel, SlotCopy } from '@meith/theme-kit'
 import { fromSlotCopy, linkTarget } from '@meith/theme-kit'
 
-import { BELOW_HEADER, PAGE } from '../shared'
+import { PAGE } from '../shared'
+import { MobileHeaderNav } from './mobile-header-nav'
 
 const DESKTOP_LINK =
   'inline-flex h-9 items-center rounded-full px-3 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground'
 
-const MOBILE_LINK =
-  'flex min-h-11 items-center rounded-lg px-3 text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground'
-
-const SUMMARY =
-  'cursor-default list-none select-none [&::-webkit-details-marker]:hidden [&::marker]:content-none'
-
 function BoardMark({ boardTitle, logo }: Pick<HeaderModel, 'boardTitle' | 'logo'>) {
   if (logo === undefined) {
     return (
@@ -50,7 +45,7 @@ function Submenu({ items }: { items: HeaderModel['navigation'][number]['submenu'
   if (items === undefined || items.length === 0) return null
 
   return (
-    <ul className="invisible absolute top-full left-0 z-30 mt-1 min-w-52 rounded-xl border border-border bg-card p-1.5 opacity-0 shadow-elevation transition-opacity group-focus-within:visible group-focus-within:opacity-100 group-hover:visible group-hover:opacity-100">
+    <ul className="invisible absolute top-full left-0 z-30 min-w-52 rounded-xl border border-border bg-card p-1.5 opacity-0 shadow-elevation transition-opacity group-focus-within:visible group-focus-within:opacity-100 group-hover:visible group-hover:opacity-100">
       {items.map((child) => (
         <li key={child.href}>
           <a
@@ -66,82 +61,6 @@ function Submenu({ items }: { items: HeaderModel['navigation'][number]['submenu'
   )
 }
 
-function Chevron({ className }: { className: string }) {
-  return (
-    <svg
-      aria-hidden="true"
-      viewBox="0 0 12 12"
-      className={className}
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="m4.5 3 3 3-3 3" />
-    </svg>
-  )
-}
-
-function MenuGlyph() {
-  return (
-    <svg
-      aria-hidden="true"
-      viewBox="0 0 20 20"
-      className="size-5"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.75"
-      strokeLinecap="round"
-    >
-      <path className="group-open/menu:hidden" d="M3 5.5h14M3 10h14M3 14.5h14" />
-      <path className="hidden group-open/menu:block" d="m5 5 10 10M15 5 5 15" />
-    </svg>
-  )
-}
-
-function MobileNavItem({ item }: { item: HeaderModel['navigation'][number] }) {
-  if (item.submenu === undefined || item.submenu.length === 0) {
-    return (
-      <li>
-        <a href={item.href} {...linkTarget(item)} className={MOBILE_LINK}>
-          {item.label}
-        </a>
-      </li>
-    )
-  }
-
-  return (
-    <li>
-      <details data-nav-disclosure name="default-header-submenu" className="group/submenu">
-        <summary
-          className={`${SUMMARY} flex min-h-11 items-center justify-between gap-2 rounded-lg pl-3 text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground`}
-        >
-          <a
-            href={item.href}
-            {...linkTarget(item)}
-            className="min-w-0 flex-1 truncate hover:underline"
-          >
-            {item.label}
-          </a>
-          <span className="flex size-11 shrink-0 items-center justify-center">
-            <Chevron className="size-3 text-muted-foreground transition-transform group-open/submenu:rotate-90" />
-          </span>
-        </summary>
-        <ul className="mb-1 ml-3 flex flex-col gap-0.5 border-l border-border py-1 pl-2">
-          {item.submenu.map((child) => (
-            <li key={child.href}>
-              <a href={child.href} {...linkTarget(child)} className={MOBILE_LINK}>
-                {child.label}
-              </a>
-            </li>
-          ))}
-        </ul>
-      </details>
-    </li>
-  )
-}
-
 export function Header({
   boardTitle,
   homeHref,
@@ -165,7 +84,7 @@ export function Header({
       <div className={`${PAGE} flex min-h-14 items-center gap-x-3 sm:gap-x-4`}>
         <a
           href={homeHref}
-          className="flex min-w-0 shrink-0 items-center gap-2.5 text-lg font-semibold tracking-tight text-foreground transition-colors hover:text-primary"
+          className="flex min-w-0 items-center gap-2.5 text-lg font-semibold tracking-tight text-foreground transition-colors hover:text-primary"
         >
           <BoardMark boardTitle={boardTitle} logo={logo} />
         </a>
@@ -201,28 +120,7 @@ export function Header({
 
         <div className="ms-auto flex min-w-0 shrink-0 items-center gap-2 sm:gap-3">{children}</div>
 
-        {hasNavigation && (
-          <nav aria-label={c('sections')} data-nav-view="mobile" className="lg:hidden">
-            <details data-nav-disclosure className="group/menu">
-              <summary
-                className={`${SUMMARY} flex size-10 items-center justify-center rounded-lg border border-border bg-card text-foreground transition-colors hover:border-primary/40 hover:text-primary group-open/menu:border-primary/40 group-open/menu:bg-primary/8 group-open/menu:text-primary`}
-              >
-                <MenuGlyph />
-                <span className="sr-only">{c('sections')}</span>
-              </summary>
-
-              <div
-                className={`absolute inset-x-0 ${BELOW_HEADER} z-30 max-h-[calc(100dvh-3.5rem)] overflow-y-auto border-b border-border bg-card shadow-elevation`}
-              >
-                <ul className={`${PAGE} flex flex-col gap-0.5 py-2`}>
-                  {navigation.map((item) => (
-                    <MobileNavItem key={item.href} item={item} />
-                  ))}
-                </ul>
-              </div>
-            </details>
-          </nav>
-        )}
+        <MobileHeaderNav boardTitle={boardTitle} navigation={navigation} copy={copy} />
       </div>
     </header>
   )
diff --git a/themes/default/src/slots/mobile-header-nav.tsx b/themes/default/src/slots/mobile-header-nav.tsx
new file mode 100644
index 000000000..233c94cb3
--- /dev/null
+++ b/themes/default/src/slots/mobile-header-nav.tsx
@@ -0,0 +1,80 @@
+import type { HeaderModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy, linkTarget } from '@meith/theme-kit'
+import { NavigationDrawer, NavigationDrawerTrigger } from '@meith/ui'
+
+const LINK =
+  'flex min-h-11 items-center rounded-lg px-3 py-2 text-sm font-medium text-foreground hover:bg-muted'
+
+export function MobileHeaderNav({
+  boardTitle,
+  navigation,
+  copy,
+}: Pick<HeaderModel, 'boardTitle' | 'navigation'> & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `default.header.${key}`)
+  return (
+    <nav data-nav-view="mobile" aria-label={c('sections')} className="lg:hidden">
+      {(['usercp', 'modcp'] as const).map((panel) => (
+        <NavigationDrawerTrigger
+          key={panel}
+          target={`panel-${panel}-navigation`}
+          data-panel-nav-trigger={panel}
+          label={fromSlotCopy(copy, 'default.panelNav.open')}
+        />
+      ))}
+      {navigation.length > 0 && (
+        <div data-main-navigation>
+          <NavigationDrawer
+            id="board-mobile-navigation"
+            title={boardTitle}
+            openLabel={c('openMenu')}
+            closeLabel={c('closeMenu')}
+          >
+            <ul className="flex flex-col gap-1">
+              {navigation.map((item) => (
+                <li key={item.href}>
+                  {item.submenu !== undefined && item.submenu.length > 0 ? (
+                    <details className="group/section">
+                      <summary
+                        className={`${LINK} cursor-pointer list-none justify-between gap-3 select-none [&::-webkit-details-marker]:hidden [&::marker]:content-none`}
+                      >
+                        <span className="min-w-0 break-words">{item.label}</span>
+                        <svg
+                          aria-hidden="true"
+                          viewBox="0 0 16 16"
+                          fill="none"
+                          stroke="currentColor"
+                          strokeWidth="1.5"
+                          className="size-4 shrink-0 text-muted-foreground transition-transform group-open/section:rotate-90"
+                        >
+                          <path d="m6 4 4 4-4 4" />
+                        </svg>
+                      </summary>
+                      <ul className="my-1 ms-3 flex flex-col gap-1 border-s border-border ps-2">
+                        <li>
+                          <a href={item.href} {...linkTarget(item)} className={LINK}>
+                            {c('overview')}
+                          </a>
+                        </li>
+                        {item.submenu.map((child) => (
+                          <li key={child.href}>
+                            <a href={child.href} {...linkTarget(child)} className={LINK}>
+                              {child.label}
+                            </a>
+                          </li>
+                        ))}
+                      </ul>
+                    </details>
+                  ) : (
+                    <a href={item.href} {...linkTarget(item)} className={LINK}>
+                      {item.label}
+                    </a>
+                  )}
+                </li>
+              ))}
+            </ul>
+          </NavigationDrawer>
+        </div>
+      )}
+    </nav>
+  )
+}
diff --git a/themes/default/src/slots/pagination.tsx b/themes/default/src/slots/pagination.tsx
index 7cd3f55b0..a8f831c40 100644
--- a/themes/default/src/slots/pagination.tsx
+++ b/themes/default/src/slots/pagination.tsx
@@ -17,7 +17,7 @@ export function Pagination({
 
   const c = (key: string) => fromSlotCopy(copy, `default.pagination.${key}`)
 
-  const step = cn(buttonVariants({ variant: 'outline', size: 'sm' }), 'min-w-20 rounded-full')
+  const step = cn(buttonVariants({ variant: 'outline', size: 'sm' }), 'min-w-20')
   const stepDisabled = cn(step, 'pointer-events-none opacity-40')
 
   return (
@@ -53,7 +53,7 @@ export function Pagination({
                     variant: entry.isCurrent ? 'primary' : 'ghost',
                     size: 'sm',
                   }),
-                  'min-w-8 rounded-full px-2',
+                  'min-w-8 px-2 pointer-coarse:min-w-11',
                   NUMERIC,
                   entry.isCurrent ? '' : 'hidden sm:inline-flex',
                 )}
diff --git a/themes/default/src/slots/panel-nav.tsx b/themes/default/src/slots/panel-nav.tsx
index d5e3fbb6b..b53874bcd 100644
--- a/themes/default/src/slots/panel-nav.tsx
+++ b/themes/default/src/slots/panel-nav.tsx
@@ -1,12 +1,11 @@
 import type { PanelNavItemModel, PanelNavModel, SlotCopy } from '@meith/theme-kit'
 import { fromSlotCopy } from '@meith/theme-kit'
-import { cn, Disclosure } from '@meith/ui'
+import { cn, NavigationDrawer } from '@meith/ui'
 
 import { PanelIcon } from '../panel-icons'
-import { BELOW_HEADER } from '../shared'
 
 const ITEM =
-  'group/item relative flex items-center gap-3 rounded-lg px-3 py-2 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+  'group/item relative flex items-center gap-3 rounded-lg px-3 py-2 pointer-coarse:min-h-11 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
 
 const HERE = 'bg-primary/10 font-semibold text-primary [&_svg]:text-primary'
 const OPEN = 'font-semibold text-foreground hover:bg-muted'
@@ -30,26 +29,30 @@ function Count({ count, copy }: { count: number; copy: SlotCopy }) {
   )
 }
 
-function Item({
-  item,
-  className,
-  copy,
-}: {
-  item: PanelNavItemModel
-  className: string
-  copy: SlotCopy
-}) {
-  const body = (
+function ItemContent({ item, copy }: { item: PanelNavItemModel; copy: SlotCopy }) {
+  return (
     <>
       {item.icon !== null && (
         <span className="text-muted-foreground/70 transition-colors group-hover/item:text-foreground">
           <PanelIcon icon={item.icon} />
         </span>
       )}
-      <span className="min-w-0 flex-1 truncate">{item.title}</span>
+      <span className="min-w-0 flex-1 text-start [overflow-wrap:anywhere]">{item.title}</span>
       {item.count !== null && <Count count={item.count} copy={copy} />}
     </>
   )
+}
+
+function Item({
+  item,
+  className,
+  copy,
+}: {
+  item: PanelNavItemModel
+  className: string
+  copy: SlotCopy
+}) {
+  const body = <ItemContent item={item} copy={copy} />
 
   if (item.isRecord) {
     return (
@@ -113,28 +116,94 @@ function Sections({
   )
 }
 
-export function PanelNav({
+export function MobilePanelNav({
+  panel,
   label,
   sections,
-  currentTitle,
   copy,
 }: PanelNavModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `default.panelNav.${key}`)
+
   return (
-    <>
-      <div
-        className={`sticky ${BELOW_HEADER} z-20 -mx-4 bg-background/95 px-4 py-2 backdrop-blur-sm sm:-mx-6 sm:px-6 lg:hidden`}
+    <div className="lg:hidden">
+      <NavigationDrawer
+        showTrigger={false}
+        id={`panel-${panel}-navigation`}
+        title={c(`title.${panel}`)}
+        openLabel={c('open')}
+        closeLabel={c('close')}
       >
-        <Disclosure
-          summary={label}
-          contentClassName="p-2"
-          {...(currentTitle === null ? {} : { aside: currentTitle })}
-        >
-          <Sections label={label} sections={sections} copy={copy} />
-        </Disclosure>
-      </div>
+        <nav aria-label={label} className="text-sm">
+          <ul className="flex flex-col gap-1">
+            {sections.map((section) => (
+              <li
+                key={section.href}
+                className={cn(section.isOverview && 'mb-2 border-b border-border pb-2')}
+              >
+                {section.children.length > 0 ? (
+                  <details open={section.isOpen} className="group/section">
+                    <summary
+                      className={cn(
+                        ITEM,
+                        'min-h-11 cursor-pointer list-none [&::-webkit-details-marker]:hidden',
+                        section.isOpen ? OPEN : ELSEWHERE,
+                      )}
+                    >
+                      <ItemContent item={section} copy={copy} />
+                      <svg
+                        aria-hidden="true"
+                        viewBox="0 0 16 16"
+                        className="size-4 shrink-0 transition-transform group-open/section:rotate-90"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="1.5"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      >
+                        <path d="m6 4 4 4-4 4" />
+                      </svg>
+                    </summary>
+                    <ul className="my-1 ms-5 flex flex-col gap-1 border-s-2 border-border ps-2">
+                      <li>
+                        <Item
+                          item={{ ...section, title: c('overview'), icon: null, count: null }}
+                          className={cn('min-h-11', section.current === 'here' ? HERE : ELSEWHERE)}
+                          copy={copy}
+                        />
+                      </li>
+                      {section.children.map((child) => (
+                        <li key={child.href}>
+                          <Item
+                            item={child}
+                            className={cn('min-h-11', child.current === 'here' ? HERE : ELSEWHERE)}
+                            copy={copy}
+                          />
+                        </li>
+                      ))}
+                    </ul>
+                  </details>
+                ) : (
+                  <Item
+                    item={section}
+                    className={cn('min-h-11', section.current === 'here' ? HERE : ELSEWHERE)}
+                    copy={copy}
+                  />
+                )}
+              </li>
+            ))}
+          </ul>
+        </nav>
+      </NavigationDrawer>
+    </div>
+  )
+}
 
+export function PanelNav(props: PanelNavModel & { copy: SlotCopy }) {
+  return (
+    <>
+      <MobilePanelNav {...props} />
       <div className="hidden rounded-xl border border-border bg-card p-2 shadow-elevation lg:block">
-        <Sections label={label} sections={sections} copy={copy} />
+        <Sections label={props.label} sections={props.sections} copy={props.copy} />
       </div>
     </>
   )
diff --git a/themes/default/src/slots/panel-page.tsx b/themes/default/src/slots/panel-page.tsx
index 0c1fcdd17..94de31624 100644
--- a/themes/default/src/slots/panel-page.tsx
+++ b/themes/default/src/slots/panel-page.tsx
@@ -1,8 +1,8 @@
 import type { PanelPageModel, PanelSectionModel, SlotCopy } from '@meith/theme-kit'
 import { fromSlotCopy } from '@meith/theme-kit'
-import { cn } from '@meith/ui'
+import { cn, PageHeader, PageHeaderActions, PageHeaderContent, PageTitle } from '@meith/ui'
 
-import { MUTED_LINK, PAGE, PAGE_TITLE, pageAt, SECTION_TITLE } from '../shared'
+import { MUTED_LINK, PAGE, pageAt, SECTION_TITLE } from '../shared'
 
 export function PanelPage({
   title,
@@ -28,8 +28,8 @@ export function PanelPage({
         gap === 'loose' ? 'gap-8' : 'gap-6',
       )}
     >
-      <div className="flex flex-wrap items-end justify-between gap-x-6 gap-y-3 border-b border-border pb-5">
-        <div className="flex min-w-0 flex-col gap-1">
+      <PageHeader className="border-b border-border pb-5">
+        <PageHeaderContent>
           {back !== null && (
             <a
               href={back.href}
@@ -39,7 +39,7 @@ export function PanelPage({
             </a>
           )}
 
-          <h1 className={PAGE_TITLE}>{title}</h1>
+          <PageTitle>{title}</PageTitle>
 
           {regions.lede !== undefined && (
             <p className="max-w-prose text-sm text-muted-foreground">{regions.lede}</p>
@@ -47,12 +47,10 @@ export function PanelPage({
           {regions.meta !== undefined && (
             <p className="text-xs text-muted-foreground">{regions.meta}</p>
           )}
-        </div>
+        </PageHeaderContent>
 
-        {regions.actions !== undefined && (
-          <div className="flex shrink-0 flex-wrap items-center gap-2">{regions.actions}</div>
-        )}
-      </div>
+        {regions.actions !== undefined && <PageHeaderActions>{regions.actions}</PageHeaderActions>}
+      </PageHeader>
 
       {children}
     </main>
diff --git a/themes/default/src/slots/panel-shell.tsx b/themes/default/src/slots/panel-shell.tsx
index 365230499..4c319b2ad 100644
--- a/themes/default/src/slots/panel-shell.tsx
+++ b/themes/default/src/slots/panel-shell.tsx
@@ -3,7 +3,7 @@ import type { PanelShellModel } from '@meith/theme-kit'
 import { EYEBROW, MUTED_LINK } from '../shared'
 
 const RAIL =
-  'flex flex-col gap-4 px-4 pt-5 sm:px-6 lg:sticky lg:w-64 lg:shrink-0 lg:self-start lg:pt-8 lg:pr-0'
+  'flex flex-col gap-4 lg:px-6 lg:sticky lg:w-64 lg:shrink-0 lg:self-start lg:pt-8 lg:pr-0'
 
 function SwitchGlyph() {
   return (
@@ -24,7 +24,7 @@ function SwitchGlyph() {
 
 export function PanelShell({ links, linksLabel, regions, children }: PanelShellModel) {
   return (
-    <div className="mx-auto flex w-full max-w-6xl flex-1 flex-col lg:flex-row lg:gap-8">
+    <div className="mx-auto flex w-full max-w-7xl flex-1 flex-col lg:flex-row lg:gap-8">
       <aside className={`${RAIL} lg:top-14`}>
         {regions.nav}
 
diff --git a/themes/default/src/slots/post-bit.tsx b/themes/default/src/slots/post-bit.tsx
index a81b5b63d..0a6a7c53e 100644
--- a/themes/default/src/slots/post-bit.tsx
+++ b/themes/default/src/slots/post-bit.tsx
@@ -237,7 +237,7 @@ export function PostBit({ post, select, regions, copy }: PostBitSlotModel & { co
           ) : (
             <div className={`flex-1 py-4 sm:py-5 ${BODY_X}`}>
               <div
-                className="prose-md text-[0.9375rem] sm:text-base"
+                className="prose-md max-w-prose text-[0.9375rem] sm:text-base"
                 dangerouslySetInnerHTML={{ __html: post.bodyHtml }}
               />
 
diff --git a/themes/default/src/slots/post-form.tsx b/themes/default/src/slots/post-form.tsx
index a10822df3..38e4bb190 100644
--- a/themes/default/src/slots/post-form.tsx
+++ b/themes/default/src/slots/post-form.tsx
@@ -1,8 +1,8 @@
 import type { PostFormModel, SlotCopy } from '@meith/theme-kit'
 import { fromSlotCopy } from '@meith/theme-kit'
-import { Alert, AlertDescription, AlertTitle, buttonVariants, Card, cn } from '@meith/ui'
+import { Alert, AlertDescription, AlertTitle, buttonVariants, Card, cn, PageTitle } from '@meith/ui'
 
-import { PAGE_TITLE, pageAt } from '../shared'
+import { pageAt } from '../shared'
 
 export function PostForm({
   heading,
@@ -17,7 +17,7 @@ export function PostForm({
   return (
     <div className={`${pageAt('max-w-3xl')} flex w-full flex-col gap-5 py-6 sm:py-8`}>
       <div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-2">
-        <h1 className={PAGE_TITLE}>{heading}</h1>
+        <PageTitle>{heading}</PageTitle>
         <a href={cancelHref} className={cn(buttonVariants({ variant: 'ghost', size: 'sm' }))}>
           {cancelLabel}
         </a>
diff --git a/themes/default/src/slots/redirect-notice.tsx b/themes/default/src/slots/redirect-notice.tsx
index 00f2ff281..6377461fe 100644
--- a/themes/default/src/slots/redirect-notice.tsx
+++ b/themes/default/src/slots/redirect-notice.tsx
@@ -1,6 +1,6 @@
 import type { RedirectNoticeModel, SlotCopy } from '@meith/theme-kit'
 import { fromSlotCopy } from '@meith/theme-kit'
-import { buttonVariants, Card, CardContent } from '@meith/ui'
+import { buttonVariants, Card, CardContent, PageTitle } from '@meith/ui'
 
 export function RedirectNotice({
   message,
@@ -16,7 +16,7 @@ export function RedirectNotice({
         <p className="text-xs font-medium tracking-wide text-muted-foreground uppercase">
           {c('redirecting')}
         </p>
-        <h1 className="mt-1 text-2xl font-semibold tracking-tight">{c('pleaseWait')}</h1>
+        <PageTitle className="mt-1 sm:text-2xl">{c('pleaseWait')}</PageTitle>
         <p className="mt-2 text-sm text-muted-foreground">{message}</p>
 
         <div className="mt-5 flex flex-wrap items-center gap-3">
diff --git a/themes/default/src/slots/search-results.tsx b/themes/default/src/slots/search-results.tsx
index 644beb9f5..b86e94daa 100644
--- a/themes/default/src/slots/search-results.tsx
+++ b/themes/default/src/slots/search-results.tsx
@@ -13,6 +13,11 @@ import {
   Field,
   Input,
   NativeSelect,
+  NavTabs,
+  PageDescription,
+  PageHeader,
+  PageHeaderContent,
+  PageTitle,
 } from '@meith/ui'
 
 import { LINK, pageAt, Stamp } from '../shared'
@@ -37,16 +42,18 @@ export function SearchResults({
       tabIndex={-1}
       className={`${pageAt('max-w-3xl')} flex flex-1 flex-col gap-6 py-8`}
     >
-      <div className="flex flex-col gap-1">
-        <h1 className="font-heading text-2xl font-semibold">
-          {c('resultsFor')} {c('openQuote')}
-          {terms}
-          {c('closeQuote')}
-        </h1>
-        <p className="text-sm text-muted-foreground">
-          {c('searched')} <Stamp at={searchedAt} />. {c('searchedNote')}
-        </p>
-      </div>
+      <PageHeader>
+        <PageHeaderContent>
+          <PageTitle>
+            {c('resultsFor')} {c('openQuote')}
+            {terms}
+            {c('closeQuote')}
+          </PageTitle>
+          <PageDescription>
+            {c('searched')} <Stamp at={searchedAt} />. {c('searchedNote')}
+          </PageDescription>
+        </PageHeaderContent>
+      </PageHeader>
 
       {refine !== undefined && <Refine {...refine} copy={copy} />}
 
@@ -147,32 +154,13 @@ function Refine({
       <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
         <p className="text-sm font-medium text-foreground">{summary}</p>
 
-        <nav
-          aria-label={sortsLabel}
-          className="inline-flex items-center gap-1 rounded-lg border border-border bg-surface p-1"
-        >
-          {sorts.map((sort) => (
-            <a
-              key={sort.label}
-              href={sort.href}
-              {...(sort.isCurrent ? { 'aria-current': 'true' as const } : {})}
-              className={cn(
-                'rounded-md px-2.5 py-1 text-xs whitespace-nowrap transition-colors',
-                sort.isCurrent
-                  ? 'bg-card font-semibold text-foreground shadow-sm'
-                  : 'font-medium text-muted-foreground hover:text-foreground',
-              )}
-            >
-              {sort.label}
-            </a>
-          ))}
-        </nav>
+        <NavTabs label={sortsLabel} tabs={sorts} />
 
         {applied.map((chip) => (
           <a
             key={chip.label}
             href={chip.removeHref}
-            className="inline-flex items-center gap-1.5 rounded-full border border-primary/40 bg-primary/10 px-2.5 py-1 text-xs font-medium text-foreground hover:bg-primary/20"
+            className="inline-flex min-h-8 pointer-coarse:min-h-11 items-center gap-1.5 rounded-full border border-primary/40 bg-primary/10 px-2.5 py-1 text-xs font-medium text-foreground hover:bg-primary/20"
           >
             {chip.label}
             <span aria-hidden="true">{c('removeFilterX')}</span>
@@ -184,7 +172,7 @@ function Refine({
       <form
         method="get"
         action={action}
-        className="flex flex-wrap items-center gap-x-3 gap-y-2 border-t border-border pt-2.5"
+        className="grid grid-cols-1 items-end gap-3 border-t border-border pt-3 sm:grid-cols-2"
       >
         {choices.map((choice) => (
           <Filter
@@ -197,7 +185,7 @@ function Refine({
 
         <button
           type="submit"
-          className={cn(buttonVariants({ variant: 'secondary', size: 'sm' }), 'h-8')}
+          className={cn(buttonVariants({ variant: 'secondary' }), 'justify-self-start')}
         >
           {submitLabel}
         </button>
@@ -227,16 +215,11 @@ function Filter({
   const id = `filter-${name}`
 
   return (
-    <span className="inline-flex items-center gap-1.5">
+    <span className="flex min-w-0 flex-col gap-2">
       <label htmlFor={id} className="text-xs font-medium text-muted-foreground">
         {label}
       </label>
-      <NativeSelect
-        id={id}
-        name={name}
-        defaultValue={selected?.value ?? ''}
-        className="h-8 w-auto min-w-0 py-0 text-xs"
-      >
+      <NativeSelect id={id} name={name} defaultValue={selected?.value ?? ''} className="w-full">
         {options.map((option) => (
           <option key={option.value} value={option.value}>
             {option.label}
diff --git a/themes/default/src/slots/thread-row.tsx b/themes/default/src/slots/thread-row.tsx
index 3c306dbb2..6170d3a03 100644
--- a/themes/default/src/slots/thread-row.tsx
+++ b/themes/default/src/slots/thread-row.tsx
@@ -19,7 +19,7 @@ export function ThreadRow({
     <li
       data-unread={thread.isUnread ? '' : undefined}
       data-visibility={hidden ? thread.visibility : undefined}
-      className={`grid grid-cols-[auto_minmax(0,1fr)] gap-x-3.5 gap-y-2 px-4 py-3.5 transition-colors hover:bg-muted/50 sm:px-5 md:grid-cols-[auto_minmax(0,1fr)_9rem_15rem] md:items-center md:gap-x-5 ${hidden ? tint : ''}`}
+      className={`grid grid-cols-[auto_minmax(0,1fr)] gap-x-3.5 gap-y-2 px-4 py-4 transition-colors hover:bg-muted/50 sm:px-5 @3xl/card:grid-cols-[auto_minmax(0,1fr)_6rem_13rem] @3xl/card:items-center @3xl/card:gap-x-5 ${hidden ? tint : ''}`}
     >
       <span className="flex items-center gap-2.5">
         {select !== null && (
@@ -41,7 +41,7 @@ export function ThreadRow({
         </span>
       </span>
 
-      <div className="min-w-0">
+      <div className="min-w-0 [overflow-wrap:anywhere]">
         <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
           {thread.prefix !== null && <Prefix prefix={thread.prefix} />}
           {thread.isSticky && <Badge tone="pinned">{c('pinned')}</Badge>}
@@ -68,9 +68,9 @@ export function ThreadRow({
         </p>
       </div>
 
-      <div className="col-start-2 flex min-w-0 flex-col gap-y-1 text-xs text-muted-foreground md:contents">
+      <div className="col-start-2 flex min-w-0 flex-col gap-y-1 text-xs text-muted-foreground @3xl/card:contents">
         <Figures
-          className="md:col-start-3 md:justify-self-end"
+          className="@3xl/card:col-start-3 @3xl/card:justify-self-end"
           items={[
             {
               label: c('repliesLabel'),
@@ -87,18 +87,18 @@ export function ThreadRow({
           ]}
         />
 
-        <div className="order-first flex min-w-0 max-w-full flex-wrap gap-x-1 md:order-none md:col-start-4 md:block md:border-l md:border-border md:pl-5">
+        <div className="order-first flex min-w-0 max-w-full flex-wrap gap-x-1 @3xl/card:order-none @3xl/card:col-start-4 @3xl/card:block @3xl/card:border-l @3xl/card:border-border @3xl/card:pl-5">
           {thread.lastPost === null ? (
             <span className="text-thread-moved">{c('noRepliesYet')}</span>
           ) : (
             <>
               <a
                 href={thread.lastPost.href}
-                className={`font-medium text-foreground md:block ${LINK}`}
+                className={`font-medium text-foreground @3xl/card:block ${LINK}`}
               >
                 {c('latestReply')}
               </a>
-              <span className="md:mt-0.5 md:block md:truncate">
+              <span className="@3xl/card:mt-0.5 @3xl/card:block @3xl/card:truncate">
                 {c('by')} <UserRef user={thread.lastPost.author} className="font-normal" />{' '}
                 {c('dot')} <Stamp at={thread.lastPost.at} />
               </span>
diff --git a/themes/default/src/slots/thread-view.tsx b/themes/default/src/slots/thread-view.tsx
index 206aedb69..99a95db6a 100644
--- a/themes/default/src/slots/thread-view.tsx
+++ b/themes/default/src/slots/thread-view.tsx
@@ -1,8 +1,16 @@
 import type { SlotCopy, ThreadViewModel } from '@meith/theme-kit'
 import { fromSlotCopy } from '@meith/theme-kit'
-import { Badge, buttonVariants, cn } from '@meith/ui'
+import {
+  Badge,
+  buttonVariants,
+  cn,
+  PageHeader,
+  PageHeaderActions,
+  PageHeaderContent,
+  PageTitle,
+} from '@meith/ui'
 
-import { Counts, PAGE_BODY, PAGE_TITLE, Prefix } from '../shared'
+import { Counts, PAGE_BODY, Prefix } from '../shared'
 
 export function ThreadView({
   thread,
@@ -16,9 +24,9 @@ export function ThreadView({
 
   return (
     <div className={PAGE_BODY}>
-      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-6">
-        <div className="min-w-0">
-          <h1 className={PAGE_TITLE}>{thread.title}</h1>
+      <PageHeader>
+        <PageHeaderContent>
+          <PageTitle>{thread.title}</PageTitle>
 
           <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-2">
             {thread.prefix !== null && <Prefix prefix={thread.prefix} />}
@@ -43,9 +51,9 @@ export function ThreadView({
               ]}
             />
           </div>
-        </div>
+        </PageHeaderContent>
 
-        <div className="flex shrink-0 flex-wrap items-center gap-2">
+        <PageHeaderActions>
           {watch != null && (
             <form action={watch.action} method="post">
               <button type="submit" className={buttonVariants({ variant: 'outline' })}>
@@ -74,8 +82,8 @@ export function ThreadView({
               {c('replyAction')}
             </a>
           )}
-        </div>
-      </div>
+        </PageHeaderActions>
+      </PageHeader>
 
       {regions.tools !== undefined && (
         <div className="-mb-1 flex flex-col gap-3 empty:hidden">{regions.tools}</div>
diff --git a/themes/midnight/src/copy.ts b/themes/midnight/src/copy.ts
index f63319adc..d3b749211 100644
--- a/themes/midnight/src/copy.ts
+++ b/themes/midnight/src/copy.ts
@@ -1,3 +1,4 @@
+import { mobileHeaderNavCopy } from '@meith/theme-default'
 import type { SlotCopy, Translator } from '@meith/theme-kit'
 
 function copyFor(t: Translator, keys: readonly string[]): SlotCopy {
@@ -60,7 +61,7 @@ export function forumRowCopy(t: Translator): SlotCopy {
 }
 
 export function headerCopy(t: Translator): SlotCopy {
-  return copyFor(t, ['midnight.header.sectionsLabel'])
+  return { ...mobileHeaderNavCopy(t), ...copyFor(t, ['midnight.header.sectionsLabel']) }
 }
 
 export function latestPostsCopy(t: Translator): SlotCopy {
diff --git a/themes/midnight/src/slots/header.tsx b/themes/midnight/src/slots/header.tsx
index 85e63c199..0edd97e28 100644
--- a/themes/midnight/src/slots/header.tsx
+++ b/themes/midnight/src/slots/header.tsx
@@ -1,3 +1,4 @@
+import { MobileHeaderNav } from '@meith/theme-default'
 import type { HeaderModel, SlotCopy } from '@meith/theme-kit'
 import { fromSlotCopy, linkTarget } from '@meith/theme-kit'
 
@@ -43,88 +44,6 @@ function Submenu({ items }: { items: HeaderModel['navigation'][number]['submenu'
   )
 }
 
-function Chevron({ className }: { className: string }) {
-  return (
-    <svg
-      aria-hidden="true"
-      viewBox="0 0 12 12"
-      className={className}
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="m4.5 3 3 3-3 3" />
-    </svg>
-  )
-}
-
-function MobileNavItem({ item }: { item: HeaderModel['navigation'][number] }) {
-  if (item.submenu === undefined || item.submenu.length === 0) {
-    return (
-      <li>
-        <a
-          href={item.href}
-          {...linkTarget(item)}
-          className="flex min-h-11 items-center px-3 font-mono text-xs uppercase tracking-wide text-muted-foreground hover:bg-muted hover:text-foreground"
-        >
-          {item.label}
-        </a>
-      </li>
-    )
-  }
-
-  return (
-    <li>
-      <details data-nav-disclosure name="midnight-header-submenu" className="group/submenu">
-        <summary className="flex min-h-11 cursor-default list-none items-center justify-between gap-2 px-3 font-mono text-xs uppercase tracking-wide text-muted-foreground select-none [&::-webkit-details-marker]:hidden [&::marker]:content-none hover:bg-muted hover:text-foreground">
-          <a
-            href={item.href}
-            {...linkTarget(item)}
-            className="min-w-0 flex-1 truncate hover:underline"
-          >
-            {item.label}
-          </a>
-          <span className="flex size-11 shrink-0 items-center justify-center">
-            <Chevron className="size-3 transition-transform group-open/submenu:rotate-90" />
-          </span>
-        </summary>
-        <ul className="ml-3 flex flex-col gap-0.5 border-l border-border py-1 pl-2.5">
-          {item.submenu.map((child) => (
-            <li key={child.href}>
-              <a
-                href={child.href}
-                {...linkTarget(child)}
-                className="flex min-h-11 items-center px-3 font-mono text-xs uppercase tracking-wide text-muted-foreground hover:bg-muted hover:text-foreground"
-              >
-                {child.label}
-              </a>
-            </li>
-          ))}
-        </ul>
-      </details>
-    </li>
-  )
-}
-
-function MenuGlyph() {
-  return (
-    <svg
-      aria-hidden="true"
-      viewBox="0 0 20 20"
-      className="size-5"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.75"
-      strokeLinecap="round"
-    >
-      <path className="group-open/menu:hidden" d="M3 5.5h14M3 10h14M3 14.5h14" />
-      <path className="hidden group-open/menu:block" d="m5 5 10 10M15 5 5 15" />
-    </svg>
-  )
-}
-
 export function Header({
   boardTitle,
   homeHref,
@@ -148,26 +67,7 @@ export function Header({
         </a>
         <div className="flex min-w-0 items-center gap-3">
           {children}
-          {navigation.length > 0 && (
-            <nav aria-label={c('sectionsLabel')} data-nav-view="mobile" className="lg:hidden">
-              <details data-nav-disclosure className="group/menu">
-                <summary
-                  className={`border border-border text-foreground hover:bg-muted group-open/menu:bg-muted flex size-10 cursor-default list-none items-center justify-center select-none [&::-webkit-details-marker]:hidden [&::marker]:content-none`}
-                >
-                  <MenuGlyph />
-                  <span className="sr-only">{c('sectionsLabel')}</span>
-                </summary>
-
-                <div className="absolute inset-x-0 top-full z-30 max-h-[calc(100dvh-4rem)] overflow-y-auto border-b border-border bg-card shadow-elevation">
-                  <ul className="flex flex-col gap-0.5 px-4 py-2 sm:px-6">
-                    {navigation.map((item) => (
-                      <MobileNavItem key={item.href} item={item} />
-                    ))}
-                  </ul>
-                </div>
-              </details>
-            </nav>
-          )}
+          <MobileHeaderNav boardTitle={boardTitle} navigation={navigation} copy={copy} />
         </div>
       </div>
 
diff --git a/themes/phasebook/src/copy.ts b/themes/phasebook/src/copy.ts
index 9e84d0c1b..b64031a4a 100644
--- a/themes/phasebook/src/copy.ts
+++ b/themes/phasebook/src/copy.ts
@@ -1,3 +1,4 @@
+import { mobileHeaderNavCopy, mobilePanelNavCopy } from '@meith/theme-default'
 import type { SlotCopy, Translator } from '@meith/theme-kit'
 
 function copyFor(t: Translator, keys: readonly string[]): SlotCopy {
@@ -77,7 +78,7 @@ export function forumRowCopy(t: Translator): SlotCopy {
 }
 
 export function headerCopy(t: Translator): SlotCopy {
-  return copyFor(t, ['phasebook.header.sectionsAriaLabel'])
+  return { ...mobileHeaderNavCopy(t), ...copyFor(t, ['phasebook.header.sectionsAriaLabel']) }
 }
 
 export function latestPostsCopy(t: Translator): SlotCopy {
@@ -134,7 +135,7 @@ export function paginationCopy(t: Translator): SlotCopy {
 }
 
 export function panelNavCopy(t: Translator): SlotCopy {
-  return copyFor(t, ['phasebook.panelNav.waiting'])
+  return { ...mobilePanelNavCopy(t), ...copyFor(t, ['phasebook.panelNav.waiting']) }
 }
 
 export function postActionsCopy(t: Translator): SlotCopy {
diff --git a/themes/phasebook/src/slots/header.tsx b/themes/phasebook/src/slots/header.tsx
index 85e35e4e9..2f9e52222 100644
--- a/themes/phasebook/src/slots/header.tsx
+++ b/themes/phasebook/src/slots/header.tsx
@@ -1,3 +1,4 @@
+import { MobileHeaderNav } from '@meith/theme-default'
 import type { HeaderModel, SlotCopy } from '@meith/theme-kit'
 import { fromSlotCopy, linkTarget } from '@meith/theme-kit'
 
@@ -56,88 +57,6 @@ function Submenu({ items }: { items: HeaderModel['navigation'][number]['submenu'
   )
 }
 
-function Chevron({ className }: { className: string }) {
-  return (
-    <svg
-      aria-hidden="true"
-      viewBox="0 0 12 12"
-      className={className}
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="m4.5 3 3 3-3 3" />
-    </svg>
-  )
-}
-
-function MobileNavItem({ item }: { item: HeaderModel['navigation'][number] }) {
-  if (item.submenu === undefined || item.submenu.length === 0) {
-    return (
-      <li>
-        <a
-          href={item.href}
-          {...linkTarget(item)}
-          className="flex min-h-11 items-center rounded-lg px-3 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
-        >
-          {item.label}
-        </a>
-      </li>
-    )
-  }
-
-  return (
-    <li>
-      <details data-nav-disclosure name="phasebook-header-submenu" className="group/submenu">
-        <summary className="flex min-h-11 cursor-default list-none items-center justify-between gap-2 rounded-lg px-3 text-sm font-medium text-muted-foreground select-none [&::-webkit-details-marker]:hidden [&::marker]:content-none hover:bg-accent hover:text-foreground">
-          <a
-            href={item.href}
-            {...linkTarget(item)}
-            className="min-w-0 flex-1 truncate hover:underline"
-          >
-            {item.label}
-          </a>
-          <span className="flex size-11 shrink-0 items-center justify-center">
-            <Chevron className="size-3 text-muted-foreground transition-transform group-open/submenu:rotate-90" />
-          </span>
-        </summary>
-        <ul className="ml-2 flex flex-col gap-0.5 border-l border-border py-1 pl-2.5">
-          {item.submenu.map((child) => (
-            <li key={child.href}>
-              <a
-                href={child.href}
-                {...linkTarget(child)}
-                className="flex min-h-11 items-center rounded-lg px-3 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
-              >
-                {child.label}
-              </a>
-            </li>
-          ))}
-        </ul>
-      </details>
-    </li>
-  )
-}
-
-function MenuGlyph() {
-  return (
-    <svg
-      aria-hidden="true"
-      viewBox="0 0 20 20"
-      className="size-5"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.75"
-      strokeLinecap="round"
-    >
-      <path className="group-open/menu:hidden" d="M3 5.5h14M3 10h14M3 14.5h14" />
-      <path className="hidden group-open/menu:block" d="m5 5 10 10M15 5 5 15" />
-    </svg>
-  )
-}
-
 export function Header({
   boardTitle,
   homeHref,
@@ -186,26 +105,7 @@ export function Header({
 
         <div className="flex shrink-0 items-center justify-end gap-2">
           {children}
-          {navigation.length > 0 && (
-            <nav aria-label={c('sectionsAriaLabel')} data-nav-view="mobile" className="lg:hidden">
-              <details data-nav-disclosure className="group/menu">
-                <summary
-                  className={`rounded-full text-foreground transition-colors hover:bg-accent group-open/menu:bg-accent flex size-10 cursor-default list-none items-center justify-center select-none [&::-webkit-details-marker]:hidden [&::marker]:content-none`}
-                >
-                  <MenuGlyph />
-                  <span className="sr-only">{c('sectionsAriaLabel')}</span>
-                </summary>
-
-                <div className="absolute inset-x-0 top-full z-30 max-h-[calc(100dvh-4rem)] overflow-y-auto border-b border-border bg-card shadow-elevation">
-                  <ul className={`${PAGE} flex flex-col gap-0.5 py-2`}>
-                    {navigation.map((item) => (
-                      <MobileNavItem key={item.href} item={item} />
-                    ))}
-                  </ul>
-                </div>
-              </details>
-            </nav>
-          )}
+          <MobileHeaderNav boardTitle={boardTitle} navigation={navigation} copy={copy} />
         </div>
       </div>
     </header>
diff --git a/themes/phasebook/src/slots/panel-nav.tsx b/themes/phasebook/src/slots/panel-nav.tsx
index c5105291f..251dda9a3 100644
--- a/themes/phasebook/src/slots/panel-nav.tsx
+++ b/themes/phasebook/src/slots/panel-nav.tsx
@@ -1,6 +1,7 @@
+import { MobilePanelNav } from '@meith/theme-default'
 import type { PanelNavItemModel, PanelNavModel, SlotCopy } from '@meith/theme-kit'
 import { fromSlotCopy } from '@meith/theme-kit'
-import { cn, Disclosure } from '@meith/ui'
+import { cn } from '@meith/ui'
 
 import { Chip } from '../shared'
 
@@ -98,6 +99,7 @@ function Sections({
 }
 
 export function PanelNav({
+  panel,
   label,
   sections,
   currentTitle,
@@ -105,14 +107,13 @@ export function PanelNav({
 }: PanelNavModel & { copy: SlotCopy }) {
   return (
     <>
-      <Disclosure
-        summary={label}
-        className="lg:hidden"
-        contentClassName="p-2"
-        {...(currentTitle === null ? {} : { aside: currentTitle })}
-      >
-        <Sections label={label} sections={sections} copy={copy} />
-      </Disclosure>
+      <MobilePanelNav
+        panel={panel}
+        label={label}
+        sections={sections}
+        currentTitle={currentTitle}
+        copy={copy}
+      />
 
       <div className="hidden rounded-lg border border-border bg-card p-2 shadow-elevation lg:block">
         <Sections label={label} sections={sections} copy={copy} />
diff --git a/themes/raidframe/src/copy.ts b/themes/raidframe/src/copy.ts
index 6c3c6783d..56bfc6c3d 100644
--- a/themes/raidframe/src/copy.ts
+++ b/themes/raidframe/src/copy.ts
@@ -1,3 +1,4 @@
+import { mobileHeaderNavCopy, mobilePanelNavCopy } from '@meith/theme-default'
 import type { SlotCopy, Translator } from '@meith/theme-kit'
 
 function copyFor(t: Translator, keys: readonly string[]): SlotCopy {
@@ -92,7 +93,7 @@ export function forumRowCopy(t: Translator): SlotCopy {
 }
 
 export function headerCopy(t: Translator): SlotCopy {
-  return copyFor(t, ['raidframe.header.sectionsAriaLabel'])
+  return { ...mobileHeaderNavCopy(t), ...copyFor(t, ['raidframe.header.sectionsAriaLabel']) }
 }
 
 export function latestPostsCopy(t: Translator): SlotCopy {
@@ -149,7 +150,7 @@ export function paginationCopy(t: Translator): SlotCopy {
 }
 
 export function panelNavCopy(t: Translator): SlotCopy {
-  return copyFor(t, ['raidframe.panelNav.waiting'])
+  return { ...mobilePanelNavCopy(t), ...copyFor(t, ['raidframe.panelNav.waiting']) }
 }
 
 export function panelPageCopy(t: Translator): SlotCopy {
diff --git a/themes/raidframe/src/slots/header.tsx b/themes/raidframe/src/slots/header.tsx
index 23b4aa1e6..8e46b450a 100644
--- a/themes/raidframe/src/slots/header.tsx
+++ b/themes/raidframe/src/slots/header.tsx
@@ -1,3 +1,4 @@
+import { MobileHeaderNav } from '@meith/theme-default'
 import type { HeaderModel, SlotCopy } from '@meith/theme-kit'
 import { fromSlotCopy, linkTarget } from '@meith/theme-kit'
 
@@ -51,88 +52,6 @@ function Submenu({ items }: { items: HeaderModel['navigation'][number]['submenu'
   )
 }
 
-function Chevron({ className }: { className: string }) {
-  return (
-    <svg
-      aria-hidden="true"
-      viewBox="0 0 12 12"
-      className={className}
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="m4.5 3 3 3-3 3" />
-    </svg>
-  )
-}
-
-function MobileNavItem({ item }: { item: HeaderModel['navigation'][number] }) {
-  if (item.submenu === undefined || item.submenu.length === 0) {
-    return (
-      <li>
-        <a
-          href={item.href}
-          {...linkTarget(item)}
-          className="flex min-h-11 items-center px-3.5 font-mono text-[0.6875rem] font-semibold tracking-[0.14em] text-muted-foreground uppercase hover:bg-secondary hover:text-primary"
-        >
-          {item.label}
-        </a>
-      </li>
-    )
-  }
-
-  return (
-    <li>
-      <details data-nav-disclosure name="raidframe-header-submenu" className="group/submenu">
-        <summary className="flex min-h-11 cursor-default list-none items-center justify-between gap-2 px-3.5 font-mono text-[0.6875rem] font-semibold tracking-[0.14em] text-muted-foreground uppercase select-none [&::-webkit-details-marker]:hidden [&::marker]:content-none hover:bg-secondary hover:text-primary">
-          <a
-            href={item.href}
-            {...linkTarget(item)}
-            className="min-w-0 flex-1 truncate normal-case tracking-normal hover:underline"
-          >
-            {item.label}
-          </a>
-          <span className="flex size-11 shrink-0 items-center justify-center">
-            <Chevron className="size-3 transition-transform group-open/submenu:rotate-90" />
-          </span>
-        </summary>
-        <ul className="ml-3 flex flex-col gap-0.5 border-l border-border py-1 pl-2.5">
-          {item.submenu.map((child) => (
-            <li key={child.href}>
-              <a
-                href={child.href}
-                {...linkTarget(child)}
-                className="flex min-h-11 items-center px-3.5 font-mono text-[0.6875rem] font-semibold tracking-[0.14em] text-muted-foreground uppercase hover:bg-secondary hover:text-primary"
-              >
-                {child.label}
-              </a>
-            </li>
-          ))}
-        </ul>
-      </details>
-    </li>
-  )
-}
-
-function MenuGlyph() {
-  return (
-    <svg
-      aria-hidden="true"
-      viewBox="0 0 20 20"
-      className="size-5"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.75"
-      strokeLinecap="round"
-    >
-      <path className="group-open/menu:hidden" d="M3 5.5h14M3 10h14M3 14.5h14" />
-      <path className="hidden group-open/menu:block" d="m5 5 10 10M15 5 5 15" />
-    </svg>
-  )
-}
-
 export function Header({
   boardTitle,
   homeHref,
@@ -155,26 +74,7 @@ export function Header({
         </a>
         <div className="flex min-w-0 items-center gap-3">
           {children}
-          {navigation.length > 0 && (
-            <nav aria-label={c('sectionsAriaLabel')} data-nav-view="mobile" className="lg:hidden">
-              <details data-nav-disclosure className="group/menu">
-                <summary
-                  className={`border border-border bg-card text-foreground hover:border-primary/60 hover:text-primary group-open/menu:border-primary group-open/menu:text-primary flex size-10 cursor-default list-none items-center justify-center select-none [&::-webkit-details-marker]:hidden [&::marker]:content-none`}
-                >
-                  <MenuGlyph />
-                  <span className="sr-only">{c('sectionsAriaLabel')}</span>
-                </summary>
-
-                <div className="absolute inset-x-0 top-full z-30 max-h-[calc(100dvh-4rem)] overflow-y-auto border-b border-border bg-card shadow-elevation">
-                  <ul className="flex flex-col gap-0.5 px-4 py-2">
-                    {navigation.map((item) => (
-                      <MobileNavItem key={item.href} item={item} />
-                    ))}
-                  </ul>
-                </div>
-              </details>
-            </nav>
-          )}
+          <MobileHeaderNav boardTitle={boardTitle} navigation={navigation} copy={copy} />
         </div>
       </div>
 
diff --git a/themes/raidframe/src/slots/panel-nav.tsx b/themes/raidframe/src/slots/panel-nav.tsx
index 65cd6aba5..93f43be5e 100644
--- a/themes/raidframe/src/slots/panel-nav.tsx
+++ b/themes/raidframe/src/slots/panel-nav.tsx
@@ -1,3 +1,4 @@
+import { MobilePanelNav } from '@meith/theme-default'
 import type { PanelNavItemModel, PanelNavModel, SlotCopy } from '@meith/theme-kit'
 import { fromSlotCopy } from '@meith/theme-kit'
 
@@ -105,6 +106,7 @@ function Sections({
 }
 
 export function PanelNav({
+  panel,
   label,
   sections,
   currentTitle,
@@ -112,16 +114,13 @@ export function PanelNav({
 }: PanelNavModel & { copy: SlotCopy }) {
   return (
     <>
-      <details className="border border-border bg-card lg:hidden">
-        <summary className="flex cursor-pointer items-center justify-between gap-2 bg-surface px-3 py-2">
-          <span className={`${MICRO} text-foreground`}>{label}</span>
-          {currentTitle !== null && <span className={MICRO}>{currentTitle}</span>}
-        </summary>
-        <div className={RULE} aria-hidden="true" />
-        <div className="p-2">
-          <Sections label={label} sections={sections} copy={copy} />
-        </div>
-      </details>
+      <MobilePanelNav
+        panel={panel}
+        label={label}
+        sections={sections}
+        currentTitle={currentTitle}
+        copy={copy}
+      />
 
       <div className="hidden border border-border bg-card shadow-elevation lg:block">
         <p className={`${MICRO} border-b border-border bg-surface px-3 py-2 text-foreground`}>

From 942ef5e119f8e0fd61adcc467f4196b55de1d69a Mon Sep 17 00:00:00 2001
From: Jordan Harrison <jordan@harrison.to>
Date: Sun, 6 Sep 2026 13:48:55 +0100
Subject: [PATCH 2/2] test(ui): account for drawer titles and scrollbar gutters

---
 docs/contributing/development.md | 5 ++++-
 e2e/admin-no-js.spec.ts          | 2 +-
 e2e/ui-interactions.spec.ts      | 5 ++++-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/docs/contributing/development.md b/docs/contributing/development.md
index 0cec6a08f..f8f3c20f1 100644
--- a/docs/contributing/development.md
+++ b/docs/contributing/development.md
@@ -519,7 +519,10 @@ The UI regression suite also covers password visibility with and without
 JavaScript, Escape focus recovery in mobile navigation, hamburger drawers with
 right-side placement, top-bar triggers and expandable sub-sections across all
 five themes with JavaScript enabled and disabled,
-and search-filter touch targets. Run `e2e/ui-interactions.spec.ts` together with
+and search-filter touch targets. Drawer alignment is checked against the document
+content edge, which excludes the stable scrollbar gutter on platforms with
+classic scrollbars. Header branding checks target the home link, because the
+closed mobile drawer repeats the board name in its title. Run `e2e/ui-interactions.spec.ts` together with
 `e2e/mobile-nav.spec.ts` and `e2e/ui-layout.spec.ts` after changing these controls.
 
 ## UI primitives and destructive actions
diff --git a/e2e/admin-no-js.spec.ts b/e2e/admin-no-js.spec.ts
index ca7cc082b..1764b6b42 100644
--- a/e2e/admin-no-js.spec.ts
+++ b/e2e/admin-no-js.spec.ts
@@ -43,7 +43,7 @@ test('a board setting saved in the panel reaches the header and the title', asyn
   await expect(page.getByLabel('Board name')).toHaveValue(name)
 
   await page.goto('/')
-  await expect(page.getByRole('banner').getByText(name)).toBeVisible()
+  await expect(page.getByRole('banner').getByRole('link', { name, exact: true })).toBeVisible()
   await expect(page).toHaveTitle(new RegExp(name.replace(/ /g, '\\s')))
 
   await page.goto('/admin/settings?group=board')
diff --git a/e2e/ui-interactions.spec.ts b/e2e/ui-interactions.spec.ts
index 0c66b7899..191fffc96 100644
--- a/e2e/ui-interactions.spec.ts
+++ b/e2e/ui-interactions.spec.ts
@@ -110,7 +110,10 @@ for (const javaScriptEnabled of [true, false]) {
         .toBe('0px')
       await expect(drawer).toBeVisible()
       const bounds = (await drawer.boundingBox())!
-      expect(bounds.x + bounds.width).toBe(390)
+      const contentRight = await page.evaluate(
+        () => document.documentElement.getBoundingClientRect().right,
+      )
+      expect(bounds.x + bounds.width).toBeCloseTo(contentRight, 1)
       expect(bounds.x).toBeGreaterThan(0)
       await drawer.locator('summary').filter({ hasText: 'Board settings' }).click()
       const registration = drawer.getByRole('link', { name: 'Registration', exact: true })