diff --git a/docs/progress/README.md b/docs/progress/README.md
index 46aa7de..37145a9 100644
--- a/docs/progress/README.md
+++ b/docs/progress/README.md
@@ -203,3 +203,4 @@ Oldest first; append new entries to the bottom.
 | [hosted-grow-root-disk.md](hosted-grow-root-disk.md) — Grow the hosted image's root filesystem to fill the whole provider disk on boot. The image bakes a fixed **8 GiB** root (sparse raw stays small) but nothing grew it onto the far larger provider disk, so a box ran on ~8 GiB — docker image storage + the brain's SQLite store share that one volume, so a single app install can fill it and the brain's first store write 500s login (the box looks offline though it is up). **Fix:** a runtime `repart.d` definition (`Type=root`, `GrowFileSystem=yes`, no size cap) + a `malmo-grow-root.service` oneshot running `systemd-repart --dry-run=no`, ordered `Before=docker.service host-agent.service` and **fail-closed** (`Requires=` from both, via a docker drop-in and host-agent's unit) so the write-heavy services refuse to start on an un-grown root. Build-time root stays pinned at 8 GiB; the two repart definitions are deliberately separate. Lean set gains `systemd-repart` + `libfdisk1` only (no `libcryptsetup`, cryptsetup cut preserved). Boot-proof asserts the tool is present and the unit reached `active`; real full-disk growth is a provider-box acceptance step. **Known:** the stock `systemd-repart.service` also runs the same config (harmless double execution — idempotent; consolidation deferred pending a live re-test), and a pre-existing unrelated `/setup` 503 boot-proof failure reproduces on clean `main`, tracked separately | done |
 | [hosted-setup-boot-proof-race.md](hosted-setup-boot-proof-race.md) — Close the `/setup` 503 boot-proof failure [hosted-grow-root-disk.md](hosted-grow-root-disk.md) tracked separately, and confirm the wildcard-TLS/`:443` path is green. The `unseeded` boot polled `POST /api/v1/setup` for **403** but broke on any of `403\|503\|409\|200`, so a transient **503** — Caddy answering "no ready `/api` upstream" in the first second after the control-plane stack comes up, before the brain's listener + dashboard route land — ended the loop and failed the proof, though the box is correct (the brain returns 403 unconditionally on hosted, no 503 path; the diag showed all four containers "Up <1–2 seconds"). **Fix:** break only on a definitive `403\|409\|200` and ride through `502\|503`, exactly as the `/api/v1/me` poll above already does; a genuinely stuck `/setup` still fails after the 30s window. The louder "`:443` never binds" symptom was a **broken-build artifact, not a live regression**: the build-and-boot CI job (`CI / Cloud image`, `publish=false`) passed both the `unseeded` and `seeded` boots (`seeded` hard-asserts `:443` bound + `caddy: wildcard TLS configured`), and every known real-box root cause (`certificates.automate` #301, seed-fetch keep-alive, static resolver) is already fixed in-tree — so no product change. Adds `docs/dev/hosted-boot-proof.md` (runbook: happy-path flow, brain-log milestones, symptom→where-to-look, how to run) and de-stales `TESTING.md`'s `/setup` gate description (the as-built SSO/403, superseding the secret 401/200). Test-lane + docs only | done |
 | [hosted-grow-root-fs.md](hosted-grow-root-fs.md) — Corrects [hosted-grow-root-disk.md](hosted-grow-root-disk.md)'s "verified on a real provider box" claim. A live acceptance run found the root **partition** grew to the full disk (`systemd-repart` extended it, GPT `GROWFS` bit set) but the **ext4 filesystem inside it stayed at the original 8 GiB** — the disk-full/500 failure mode was not actually closed. Found via the same **Hetzner rescue mode** technique as `hosted-wildcard-cert-automate.md`: booting the (still-running) probe box into rescue and reading its disk + persistent journal directly. **Root cause:** `GrowFileSystem=yes` only sets the GPT `GROWFS` attribute bit; actually growing the mounted root filesystem is normally `systemd-growfs-root.service`'s job, which `systemd-gpt-auto-generator` wires up only when booted with `root=gpt-auto` — Hetzner (and cloud providers generally) boot with an explicit `root=PARTUUID=...` instead, so that generator, and the growfs service, never ran; zero mention of `growfs` anywhere in the boot journal. The existing boot-proof assertion couldn't have caught this: on the QEMU disk (fixed-size, no spare space) growing the filesystem is a no-op regardless of whether the growfs step runs. **Fix:** `malmo-grow-root.service`'s `ExecStart` now calls `systemd-growfs /` (the exact call the generator-driven service would have made) after `systemd-repart`, in the same command rather than a separate `ExecStartPost` — a review catch found `ExecStartPost` runs even on `systemd-repart`'s accepted 76/77 "nothing to grow" exits and has no visibility into which code fired, so it would fail the fail-closed unit on those harmless cases; the merged step only calls `growfs` when `systemd-repart` exits 0 and passes 76/77 through as success. `cloud-assertions.sh` also checks `systemd-growfs` is present in the lean image, and its pass message no longer claims real growth is verified by this lane. **Live acceptance:** re-provisioned onto a real box with the fix; root volume reported 79.99 GB total / 78.21 GB free (was 8.35 GB pre-fix) — filesystem grow confirmed on real hardware. `ENVIRONMENT.md` # Storage corrected to describe the grow as the two explicit steps it actually is | done |
+| [oatmeal-home-settings-composition.md](oatmeal-home-settings-composition.md) — Restructure the signed-in **Home + Settings** surfaces onto the Oatmeal composition (**closes #290**, finishes the rollout #261 deferred). Two signature moves applied uniformly: every section title moves from the tiny uppercase-muted `<h2>` label to the shared `components/ui/Heading.vue` **Instrument Serif** display heading (top-level titles `:level=2`; app-detail sub-sections `:level=3`; the app-detail page title drops its bespoke `<h1>` onto `<Heading :level=2>`), and every olive-50 (`bg-card`) panel/row/table container moves from the compact `rounded-xl … px-4 py-3` to the calmer `rounded-2xl … p-5` (the auth cards' radius + cloud spacing). Covers `HomeView` (System health/Household/Yours) + all Settings sections (Account, Notifications, About, Users, Outgoing email, Installed apps, installed-app **detail**) + the desktop nav panel; **Activity** — the only section with no in-page heading — gains a serif "Activity" title. Pure composition: no behavior/IA/routing change, no literal `bg-olive-*`, no raw hex. **Two documented judgement calls**: (1) the Home launcher grids are left **open** (tiles are already olive-50 cards — wrapping them in an olive-50 panel washes their contrast and fights `DASHBOARD.md`'s calm-launcher north star), and (2) the pill `<Button>`/input **element-idiom is deferred** (it's coupled to a pill-input idiom out of #290's card-panel/heading scope; a buttons-only pass would leave pill buttons beside square inputs) → follow-up. No spec edit (composition realizes `WEB_UI.md` # Styling; IA unchanged, `DASHBOARD.md`/`SETTINGS.md` pin no heading style — matches #261's "no visual-language rule changed" precedent). `make check-web` green; live full-stack visual pass not run in-env (authenticated SPA, no headless-browser lib) — reviewer eyeball recommended on the two judgement calls | done |
diff --git a/docs/progress/oatmeal-home-settings-composition.md b/docs/progress/oatmeal-home-settings-composition.md
new file mode 100644
index 0000000..f24969c
--- /dev/null
+++ b/docs/progress/oatmeal-home-settings-composition.md
@@ -0,0 +1,41 @@
+# Oatmeal composition — Home + Settings onto serif headings + olive-50 card panels
+
+- **Status:** done
+- **Date:** 2026-07-09
+- **Specs touched:** none (composition realizes the Oatmeal theme already owned by `WEB_UI.md` # Styling; no IA or visual-language rule changed — see # How it maps to the specs)
+- **Closes:** #290
+- **Builds on:** #260 (`oatmeal-theme.md`, palette + fonts + token remap), #261 (`oatmeal-element-idioms.md`, the shared `components/ui/Heading.vue` display idiom this slice rolls out), #262 (`oatmeal-token-sweep.md`).
+
+## What was done
+
+#260 recolored the whole dashboard onto the olive tokens and restructured the **auth** surfaces to the theme's composition; #261 added the shared `<Heading>` / `<Button>` idioms and applied them to chrome + auth, explicitly deferring the Home/Settings section-heading rollout to #290. This slice finishes the job for the two remaining signed-in surfaces so "our UI structure follows the theme" holds across the whole dashboard, not just its colors.
+
+Two signature Oatmeal moves, applied uniformly to Home and every Settings section:
+
+- **Serif `font-display` section headings.** Every section title switched from the old tiny uppercase-muted label (`text-xs font-medium uppercase tracking-wide text-muted-foreground`) to the shared `components/ui/Heading.vue` (Instrument Serif, `tracking-tight`). Top-level section/group titles use `:level="2"` (`text-2xl`); the app-detail page's per-app sub-sections (Outgoing email / Setup secrets / Settings) use `:level="3"` (`text-xl`) so they read as sub-headings under the app name. The app-detail page title (`app.name`) moved from a bespoke `<h1 class="text-xl font-semibold">` to `<Heading :level="2">` — aligning it with the rest of the signed-in shell (which is uniformly `h2`-based; there is no `h1` in the signed-in app, only the auth wordmark uses `:level="1"`).
+- **Olive-50 card panels with cloud spacing.** Panels were already `bg-card` (olive-50); they moved from the compact `rounded-xl … px-4 py-3` to the calmer `rounded-2xl … p-5` (the auth cards' `1rem` radius + generous padding). Applied to every card/row/table container across the sections and the Settings desktop nav panel.
+
+Per-surface notes:
+
+- **Home** (`HomeView.vue`) — "System health", "Household", "Yours" are now serif headings; the health-issue rows are `rounded-2xl p-5`. The **launcher grids are deliberately left open** (tiles on the `background`, not wrapped in a panel) — see # Known gaps.
+- **Settings sections** — Account, Notifications, About, Users (Add user + People), Outgoing email (Add + Email accounts), Installed apps, and the installed-app **detail** page all take the serif heading + `rounded-2xl p-5` panel treatment. **Activity** was the one section with no in-page heading (its title came only from the nav); it gains a serif "Activity" heading on the header row (Export CSV/JSON stay to its right), with the admin/member intro line moved just below — so all sections now open with a consistent serif title. The audit table card is `rounded-2xl`.
+- **Settings nav** (`SettingsLayout.vue`) — the desktop nav panel bumped to `rounded-2xl` to match the content panels; the grouped-nav labels stay small (they're navigation chrome, not page headings).
+
+No behavior, data flow, routing, or IA changed — this is a pure composition pass. No literal `bg-olive-*` and no raw hex introduced (colors keep flowing from the semantic tokens).
+
+## How it maps to the specs
+
+- **`WEB_UI.md` # Styling** already owns the Oatmeal theme (olive `@theme` + Inter/Instrument Serif); this slice *realizes* the serif-heading + card-panel composition it describes, so no edit was needed there.
+- **`DASHBOARD.md`** (calm-launcher north star, the tile model) and **`SETTINGS.md`** (the My-account / Box-settings IA, panel inventory) describe *information architecture and behavior*, not heading pixels or panel radii. The IA is unchanged and neither doc pins the old heading style, so — matching the #261 precedent ("No visual-language rule changed, so DASHBOARD.md needed no edit") — no spec edit was warranted. The `docs/README.md` spec map is unaffected (no spec added/removed).
+
+## Known gaps & deviations
+
+- **Home launcher grids are left open, not wrapped in a panel — a deliberate reconciliation of #290 with `DASHBOARD.md`.** An earlier pass wrapped each Household/Yours grid in an `bg-card` (olive-50) panel to read literally as "card panels". But the app tiles' own logo squares are *also* `bg-card` (olive-50), so nesting them inside an olive-50 panel washed out their fill contrast, and boxing the apps leans toward the "control panel" look `DASHBOARD.md`'s north star argues against ("a calm launcher, not a control panel … breathing room"). On the launcher **the tiles are the cards**; re-wrapping them isn't the theme's intent. So the grids stay open (tiles as cards) with serif group headings — the composition change for Home is the headings + tiles-as-cards, and Settings carries the explicit card-panel composition. Flagged because it's a judgement call a reviewer should eyeball.
+- **Form element-idiom (pill `<Button>` + pill inputs) deferred to a focused follow-up.** #261's ADR anticipated #290 also consuming `<Button>` for action buttons, but #290's own "Do" list scopes to *card/panel composition + font-display headings + structural utilities*, and the button question is coupled to inputs: the theme's pill button (`rounded-full`) is paired with a pill input idiom (the auth surfaces make **both** `rounded-full`). There is no shared `<Input>` component yet, and pillifying inputs across the dense admin forms (Users, Outgoing email) is out of #290's stated scope. Converting **only** the buttons would leave pill buttons beside square (`rounded-lg`) inputs in every form — an internally inconsistent half-conversion that reads worse than today's uniform rounded controls. So all action buttons/inputs stay on the current token-based `rounded-lg` shape for this slice; unifying them onto the pill idiom (buttons + an `<Input>` component together) is the natural next step and wants a visual pass.
+- **Pre-existing non-olive accents left untouched (surgical scope).** The Activity "OK" result badge still uses `bg-emerald-500/10 text-emerald-600` and the failed-tile tint uses `amber-*` — both predate this change and are unrelated to the composition. They weren't introduced here and weren't swept (out of scope for a composition pass); the `success`/`warning` tokens exist if a future sweep wants them.
+- **Verification is `make check-web` (typecheck + production build) — green.** A live full-stack visual pass wasn't run in this environment (the signed-in Home/Settings sit behind the authenticated SPA, and no browser-automation lib is available to drive it headlessly). The change is presentational and built on the already-proven `<Heading>` idiom and semantic tokens, but the two judgement calls above (open launcher grids; the calmer heading/panel scale) are worth a reviewer's eyeball.
+
+## What's next
+
+1. **Form element-idiom rollout** — a shared `<Input>` (pill) idiom, then move Home/Settings action buttons to `<Button>` and inputs to the pill input together, so the control layer matches the auth surfaces without a transitional button/input shape mismatch.
+2. **Dark mode** — still the deferred downstream decision from #260.
diff --git a/web-ui/src/views/HomeView.vue b/web-ui/src/views/HomeView.vue
index 85f3c05..457d1b2 100644
--- a/web-ui/src/views/HomeView.vue
+++ b/web-ui/src/views/HomeView.vue
@@ -16,6 +16,7 @@ import { useAuth } from "../auth";
 import { useHealth } from "../useHealth";
 import { relativeTime } from "../utils";
 import AppTile from "../components/AppTile.vue";
+import Heading from "@/components/ui/Heading.vue";
 
 const { currentUser, singleUserMode } = useAuth();
 
@@ -42,13 +43,13 @@ const empty = computed(() => household.value.length === 0 && yours.value.length
     <!-- Active health issues (HEALTH.md # Display, the inline issues list). The
          degraded-mode banner links here; shows the full active set, warnings
          included. Admin-only (the query is gated), so members never see it. -->
-    <section v-if="activeIssues.length" id="health-issues" class="space-y-3">
-      <h2 class="text-xs font-medium uppercase tracking-wide text-muted-foreground">System health</h2>
+    <section v-if="activeIssues.length" id="health-issues" class="space-y-4">
+      <Heading :level="2">System health</Heading>
       <ul class="space-y-2">
         <li
           v-for="i in activeIssues"
           :key="`${i.id} ${i.instance_key ?? ''}`"
-          class="flex items-start gap-3 rounded-xl border border-border bg-card px-4 py-3"
+          class="flex items-start gap-3 rounded-2xl border border-border bg-card p-5"
         >
           <span class="health-dot" :data-sev="i.severity" aria-hidden="true"></span>
           <div class="min-w-0 flex-1">
@@ -82,15 +83,15 @@ const empty = computed(() => household.value.length === 0 && yours.value.length
     </div>
 
     <template v-else>
-      <section v-if="household.length" class="space-y-3">
-        <h2 v-if="!singleUserMode" class="text-xs font-medium uppercase tracking-wide text-muted-foreground">Household</h2>
+      <section v-if="household.length" class="space-y-4">
+        <Heading v-if="!singleUserMode" :level="2">Household</Heading>
         <div class="grid grid-cols-2 gap-x-6 gap-y-8 sm:grid-cols-4 lg:grid-cols-6">
           <AppTile v-for="a in household" :key="a.id" :instance="a" />
         </div>
       </section>
 
-      <section v-if="yours.length" class="space-y-3">
-        <h2 v-if="!singleUserMode" class="text-xs font-medium uppercase tracking-wide text-muted-foreground">Yours</h2>
+      <section v-if="yours.length" class="space-y-4">
+        <Heading v-if="!singleUserMode" :level="2">Yours</Heading>
         <div class="grid grid-cols-2 gap-x-6 gap-y-8 sm:grid-cols-4 lg:grid-cols-6">
           <AppTile v-for="a in yours" :key="a.id" :instance="a" />
         </div>
diff --git a/web-ui/src/views/settings/AboutSection.vue b/web-ui/src/views/settings/AboutSection.vue
index 0572e8f..6df088d 100644
--- a/web-ui/src/views/settings/AboutSection.vue
+++ b/web-ui/src/views/settings/AboutSection.vue
@@ -4,12 +4,13 @@
 // genuinely known (product identity + project link) rather than fabricating
 // system facts. When the brain exposes a build/version + box-name surface, this
 // section grows to show it.
+import Heading from "@/components/ui/Heading.vue";
 </script>
 
 <template>
-  <section class="space-y-3">
-    <h2 class="text-xs font-medium uppercase tracking-wide text-muted-foreground">About</h2>
-    <div class="space-y-2 rounded-xl border border-border bg-card px-4 py-4">
+  <section class="space-y-4">
+    <Heading :level="2">About</Heading>
+    <div class="space-y-2 rounded-2xl border border-border bg-card p-5">
       <div class="text-base font-medium">malmo</div>
       <p class="text-sm text-muted-foreground">
         A home-server OS for people who want to own their data — not become sysadmins.
diff --git a/web-ui/src/views/settings/AccountSection.vue b/web-ui/src/views/settings/AccountSection.vue
index 63277e8..5c00201 100644
--- a/web-ui/src/views/settings/AccountSection.vue
+++ b/web-ui/src/views/settings/AccountSection.vue
@@ -11,6 +11,7 @@
 import { ref } from "vue";
 import { api, type ApiError } from "@/api";
 import { changeMyPassword, useAuth } from "@/auth";
+import Heading from "@/components/ui/Heading.vue";
 
 const { currentUser } = useAuth();
 
@@ -41,9 +42,9 @@ function cancelPwChange() {
 </script>
 
 <template>
-  <section class="space-y-3">
-    <h2 class="text-xs font-medium uppercase tracking-wide text-muted-foreground">Account</h2>
-    <div class="space-y-3 rounded-xl border border-border bg-card px-4 py-3">
+  <section class="space-y-4">
+    <Heading :level="2">Account</Heading>
+    <div class="space-y-3 rounded-2xl border border-border bg-card p-5">
       <div class="flex items-center justify-between gap-4">
         <div class="min-w-0">
           <div class="text-sm font-medium">{{ currentUser?.username }}</div>
diff --git a/web-ui/src/views/settings/ActivitySection.vue b/web-ui/src/views/settings/ActivitySection.vue
index 3015d87..477f457 100644
--- a/web-ui/src/views/settings/ActivitySection.vue
+++ b/web-ui/src/views/settings/ActivitySection.vue
@@ -11,6 +11,7 @@ import { computed } from "vue";
 import { useQuery, useInfiniteQuery } from "@tanstack/vue-query";
 import { api, type AuditEvent, type User } from "@/api";
 import { useAuth } from "@/auth";
+import Heading from "@/components/ui/Heading.vue";
 
 const { currentUser } = useAuth();
 const isAdmin = computed(() => currentUser.value?.role === "admin");
@@ -144,10 +145,8 @@ function exportJson() {
 
 <template>
   <div class="space-y-6">
-    <div class="flex items-center justify-between gap-2">
-      <p class="text-sm text-muted-foreground">
-        {{ isAdmin ? "Everything that happened on this box." : "Your account activity." }}
-      </p>
+    <div class="flex flex-wrap items-center justify-between gap-3">
+      <Heading :level="2">Activity</Heading>
       <div class="flex gap-2">
         <button
           class="rounded-lg border border-border px-3 py-1.5 text-sm hover:bg-muted disabled:opacity-50"
@@ -165,12 +164,15 @@ function exportJson() {
         </button>
       </div>
     </div>
+    <p class="text-sm text-muted-foreground">
+      {{ isAdmin ? "Everything that happened on this box." : "Your account activity." }}
+    </p>
 
     <p v-if="audit.isLoading.value" class="text-sm text-muted-foreground">Loading…</p>
     <p v-else-if="audit.isError.value" class="text-sm text-destructive">Couldn't load activity.</p>
     <p v-else-if="events.length === 0" class="text-sm text-muted-foreground">No activity yet.</p>
 
-    <div v-else class="overflow-x-auto rounded-xl border border-border bg-card">
+    <div v-else class="overflow-x-auto rounded-2xl border border-border bg-card">
       <table class="w-full text-sm">
         <thead>
           <tr class="border-b border-border text-left text-xs uppercase tracking-wide text-muted-foreground">
diff --git a/web-ui/src/views/settings/InstalledAppDetailSection.vue b/web-ui/src/views/settings/InstalledAppDetailSection.vue
index ca70e26..c5fd915 100644
--- a/web-ui/src/views/settings/InstalledAppDetailSection.vue
+++ b/web-ui/src/views/settings/InstalledAppDetailSection.vue
@@ -16,6 +16,7 @@ import { SwitchRoot, SwitchThumb } from "reka-ui";
 import { api, waitForJob, type Instance, type CatalogDetail, type Job, type MailProviderOption, type AppSecrets, type AppSecret, type AppConfig, type AppConfigField } from "@/api";
 import { useAuth } from "@/auth";
 import AppLogs from "@/components/AppLogs.vue";
+import Heading from "@/components/ui/Heading.vue";
 
 const route = useRoute();
 const router = useRouter();
@@ -261,7 +262,7 @@ const saveConfig = useMutation({
         </div>
 
         <div class="min-w-0 flex-1">
-          <h1 class="text-xl font-semibold">{{ app.name }}</h1>
+          <Heading :level="2">{{ app.name }}</Heading>
           <p v-if="detail?.short_description" class="mt-0.5 text-sm text-muted-foreground">
             {{ detail.short_description }}
           </p>
@@ -340,9 +341,9 @@ const saveConfig = useMutation({
       </p>
 
       <!-- Outgoing email — provider binding for mail-capable apps. -->
-      <section v-if="app.mail_supported && canControl" class="space-y-2">
-        <h2 class="text-xs font-medium uppercase tracking-wide text-muted-foreground">Outgoing email</h2>
-        <div class="flex flex-wrap items-center gap-3 rounded-xl border border-border bg-card px-4 py-3">
+      <section v-if="app.mail_supported && canControl" class="space-y-3">
+        <Heading :level="3">Outgoing email</Heading>
+        <div class="flex flex-wrap items-center gap-3 rounded-2xl border border-border bg-card p-5">
           <div class="min-w-0 flex-1">
             <div class="text-sm font-medium">Send email as</div>
             <div class="text-xs text-muted-foreground">
@@ -372,8 +373,8 @@ const saveConfig = useMutation({
       <p v-if="secretsQuery.isError.value" class="text-sm text-destructive">
         Couldn't load secrets: {{ (secretsQuery.error.value as Error)?.message }}
       </p>
-      <section v-if="canControl && secrets.length" class="space-y-2">
-        <h2 class="text-xs font-medium uppercase tracking-wide text-muted-foreground">Setup secrets</h2>
+      <section v-if="canControl && secrets.length" class="space-y-3">
+        <Heading :level="3">Setup secrets</Heading>
         <p class="text-xs text-muted-foreground">
           Use these to finish signing in to {{ app.name }} the first time. Keep them private.
         </p>
@@ -381,7 +382,7 @@ const saveConfig = useMutation({
           <li
             v-for="s in secrets"
             :key="s.name"
-            class="flex flex-wrap items-center gap-3 rounded-xl border border-border bg-card px-4 py-3"
+            class="flex flex-wrap items-center gap-3 rounded-2xl border border-border bg-card p-5"
           >
             <div class="min-w-0 flex-1">
               <div class="text-xs font-medium text-muted-foreground">{{ s.name }}</div>
@@ -414,14 +415,14 @@ const saveConfig = useMutation({
       <p v-if="configQuery.isError.value" class="text-sm text-destructive">
         Couldn't load settings: {{ (configQuery.error.value as Error)?.message }}
       </p>
-      <section v-if="canControl && configFields.length" class="space-y-2">
-        <h2 class="text-xs font-medium uppercase tracking-wide text-muted-foreground">Settings</h2>
+      <section v-if="canControl && configFields.length" class="space-y-3">
+        <Heading :level="3">Settings</Heading>
         <p class="text-xs text-muted-foreground">Changing these restarts {{ app.name }} briefly.</p>
         <div class="space-y-2">
           <div
             v-for="f in configFields"
             :key="f.app_env"
-            class="space-y-2 rounded-xl border border-border bg-card px-4 py-3"
+            class="space-y-2 rounded-2xl border border-border bg-card p-5"
           >
             <div>
               <div class="text-sm font-medium">
@@ -521,7 +522,7 @@ const saveConfig = useMutation({
       >
         <button
           type="button"
-          class="flex w-full shrink-0 items-center justify-between gap-3 rounded-xl border border-border bg-card px-4 py-3 text-sm hover:bg-muted"
+          class="flex w-full shrink-0 items-center justify-between gap-3 rounded-2xl border border-border bg-card p-5 text-sm hover:bg-muted"
           :aria-expanded="logsOpen"
           @click="logsOpen = !logsOpen"
         >
diff --git a/web-ui/src/views/settings/InstalledAppsSection.vue b/web-ui/src/views/settings/InstalledAppsSection.vue
index 05f566b..3a92666 100644
--- a/web-ui/src/views/settings/InstalledAppsSection.vue
+++ b/web-ui/src/views/settings/InstalledAppsSection.vue
@@ -12,6 +12,7 @@ import { RouterLink } from "vue-router";
 import { api, type Instance } from "@/api";
 import { useAuth } from "@/auth";
 import { ChevronRight } from "lucide-vue-next";
+import Heading from "@/components/ui/Heading.vue";
 
 const { singleUserMode } = useAuth();
 
@@ -22,8 +23,8 @@ const apps = useQuery({
 </script>
 
 <template>
-  <section class="space-y-3">
-    <h2 class="text-xs font-medium uppercase tracking-wide text-muted-foreground">Installed apps</h2>
+  <section class="space-y-4">
+    <Heading :level="2">Installed apps</Heading>
     <p v-if="apps.isLoading.value" class="text-sm text-muted-foreground">Loading…</p>
     <p
       v-else-if="(apps.data.value?.apps.length ?? 0) === 0"
@@ -35,7 +36,7 @@ const apps = useQuery({
       <li v-for="a in apps.data.value!.apps" :key="a.id">
         <RouterLink
           :to="`/settings/apps/${a.id}`"
-          class="flex items-center justify-between gap-3 rounded-xl border border-border bg-card px-4 py-3 hover:bg-muted"
+          class="flex items-center justify-between gap-3 rounded-2xl border border-border bg-card p-5 hover:bg-muted"
         >
           <div class="flex items-baseline gap-2">
             <strong class="text-sm">{{ a.name }}</strong>
diff --git a/web-ui/src/views/settings/NotificationsSection.vue b/web-ui/src/views/settings/NotificationsSection.vue
index c4ce1a6..be3c45a 100644
--- a/web-ui/src/views/settings/NotificationsSection.vue
+++ b/web-ui/src/views/settings/NotificationsSection.vue
@@ -6,6 +6,7 @@
 import { computed } from "vue";
 import { SwitchRoot, SwitchThumb } from "reka-ui";
 import { useNotificationMutes } from "@/useNotificationMutes";
+import Heading from "@/components/ui/Heading.vue";
 
 const { mutes, setMuted } = useNotificationMutes();
 const mutedSet = computed(() => new Set(mutes.data.value?.muted ?? []));
@@ -25,15 +26,15 @@ const notificationCategories = [
 </script>
 
 <template>
-  <section class="space-y-3">
-    <h2 class="text-xs font-medium uppercase tracking-wide text-muted-foreground">Notifications</h2>
+  <section class="space-y-4">
+    <Heading :level="2">Notifications</Heading>
     <p class="text-sm text-muted-foreground">Choose which kinds of notifications reach you. Turn a kind off to stop it from showing in your bell.</p>
     <p v-if="mutes.isLoading.value" class="text-sm text-muted-foreground">Loading…</p>
     <ul v-else class="space-y-2">
       <li
         v-for="c in notificationCategories"
         :key="c.id"
-        class="flex items-center justify-between gap-4 rounded-xl border border-border bg-card px-4 py-3"
+        class="flex items-center justify-between gap-4 rounded-2xl border border-border bg-card p-5"
       >
         <div class="min-w-0">
           <div class="text-sm font-medium">{{ c.label }}</div>
diff --git a/web-ui/src/views/settings/OutgoingEmailSection.vue b/web-ui/src/views/settings/OutgoingEmailSection.vue
index c303841..7e7c225 100644
--- a/web-ui/src/views/settings/OutgoingEmailSection.vue
+++ b/web-ui/src/views/settings/OutgoingEmailSection.vue
@@ -12,6 +12,7 @@ import { useQuery, useMutation, useQueryClient } from "@tanstack/vue-query";
 import { api, ApiError, type MailProvider } from "@/api";
 import { withElevation } from "@/elevate";
 import { useAuth } from "@/auth";
+import Heading from "@/components/ui/Heading.vue";
 
 const router = useRouter();
 const qc = useQueryClient();
@@ -154,12 +155,12 @@ const sendTest = useMutation({
 <template>
   <div class="space-y-6">
     <!-- Add provider form -->
-    <section class="space-y-3">
-      <h2 class="text-xs font-medium uppercase tracking-wide text-muted-foreground">Outgoing email</h2>
+    <section class="space-y-4">
+      <Heading :level="2">Outgoing email</Heading>
       <p class="text-sm text-muted-foreground">
         Add an email account your apps can send from — password resets, reminders, invites. Apps choose an account when you install them.
       </p>
-      <div class="rounded-xl border border-border bg-card px-4 py-3 space-y-3">
+      <div class="rounded-2xl border border-border bg-card p-5 space-y-3">
         <div class="grid gap-2 sm:grid-cols-2">
           <input
             v-model="newForm.label"
@@ -225,8 +226,8 @@ const sendTest = useMutation({
     </section>
 
     <!-- Provider list -->
-    <section class="space-y-3">
-      <h2 class="text-xs font-medium uppercase tracking-wide text-muted-foreground">Email accounts</h2>
+    <section class="space-y-4">
+      <Heading :level="2">Email accounts</Heading>
       <p v-if="providers.isLoading.value" class="text-sm text-muted-foreground">Loading…</p>
       <p
         v-else-if="(providers.data.value?.providers ?? []).length === 0"
@@ -238,7 +239,7 @@ const sendTest = useMutation({
         <li
           v-for="p in (providers.data.value?.providers ?? [])"
           :key="p.id"
-          class="rounded-xl border border-border bg-card px-4 py-3 space-y-3"
+          class="rounded-2xl border border-border bg-card p-5 space-y-3"
         >
           <!-- Main row -->
           <div class="flex flex-wrap items-center gap-2">
diff --git a/web-ui/src/views/settings/SettingsLayout.vue b/web-ui/src/views/settings/SettingsLayout.vue
index c3181a2..f0fcc38 100644
--- a/web-ui/src/views/settings/SettingsLayout.vue
+++ b/web-ui/src/views/settings/SettingsLayout.vue
@@ -80,7 +80,7 @@ const flatItems = computed(() => visibleGroups.value.flatMap((g) => g.items));
     </nav>
 
     <!-- Desktop: bordered nav panel with grouped sections. -->
-    <nav class="hidden shrink-0 flex-col gap-5 rounded-xl border border-border bg-card p-3 md:flex md:w-64">
+    <nav class="hidden shrink-0 flex-col gap-5 rounded-2xl border border-border bg-card p-3 md:flex md:w-64">
       <div v-for="group in visibleGroups" :key="group.label">
         <div class="px-3 pb-1 text-xs font-semibold text-muted-foreground">{{ group.label }}</div>
         <ul class="space-y-1">
diff --git a/web-ui/src/views/settings/UsersSection.vue b/web-ui/src/views/settings/UsersSection.vue
index 61a5780..6e9a544 100644
--- a/web-ui/src/views/settings/UsersSection.vue
+++ b/web-ui/src/views/settings/UsersSection.vue
@@ -15,6 +15,7 @@ import { useQuery, useMutation, useQueryClient } from "@tanstack/vue-query";
 import { api, ApiError, type User } from "@/api";
 import { withElevation } from "@/elevate";
 import { useAuth } from "@/auth";
+import Heading from "@/components/ui/Heading.vue";
 
 const router = useRouter();
 const qc = useQueryClient();
@@ -137,9 +138,9 @@ const doResetPassword = useMutation({
 <template>
   <div class="space-y-6">
     <!-- Create user form -->
-    <section class="space-y-3">
-      <h2 class="text-xs font-medium uppercase tracking-wide text-muted-foreground">Add user</h2>
-      <div class="rounded-xl border border-border bg-card px-4 py-3 space-y-3">
+    <section class="space-y-4">
+      <Heading :level="2">Add user</Heading>
+      <div class="rounded-2xl border border-border bg-card p-5 space-y-3">
         <div class="flex flex-wrap gap-2">
           <input
             v-model="newUsername"
@@ -176,14 +177,14 @@ const doResetPassword = useMutation({
     </section>
 
     <!-- User list -->
-    <section class="space-y-3">
-      <h2 class="text-xs font-medium uppercase tracking-wide text-muted-foreground">People</h2>
+    <section class="space-y-4">
+      <Heading :level="2">People</Heading>
       <p v-if="users.isLoading.value" class="text-sm text-muted-foreground">Loading…</p>
       <ul v-else class="space-y-2">
         <li
           v-for="u in (users.data.value?.users ?? [])"
           :key="u.id"
-          class="rounded-xl border border-border bg-card px-4 py-3 space-y-3"
+          class="rounded-2xl border border-border bg-card p-5 space-y-3"
         >
           <!-- Main row -->
           <div class="flex flex-wrap items-center gap-2">