diff --git a/docs/redesign/phase-2/TRACEABILITY.md b/docs/redesign/phase-2/TRACEABILITY.md
index 06ac752..97b960b 100644
--- a/docs/redesign/phase-2/TRACEABILITY.md
+++ b/docs/redesign/phase-2/TRACEABILITY.md
@@ -1,6 +1,6 @@
 # Redesign traceability
 
-Successor planning checkpoint: [Phase 3 impact matrix and architecture](../phase-3/PRESERVATION_IMPACT_MATRIX.md). It maps all 57 contracts to proposed destinations/validation, without changing their requirements or claiming implemented/visual parity. The subsequent [P4-01 trace sheet](../phase-4/p4-01/TRACEABILITY.md), [P4-02 named-control/modal record](../phase-4/p4-02/README.md) and [P4-03 preview keyboard record](../phase-4/p4-03/README.md) link shared foundation changes to regression and representative visual evidence. P4-04 remains unstarted.
+Successor planning checkpoint: [Phase 3 impact matrix and architecture](../phase-3/PRESERVATION_IMPACT_MATRIX.md). It maps all 57 contracts to proposed destinations/validation, without changing their requirements or claiming implemented/visual parity. The subsequent [P4-01 trace sheet](../phase-4/p4-01/TRACEABILITY.md), [P4-02 named-control/modal record](../phase-4/p4-02/README.md), [P4-03 preview keyboard record](../phase-4/p4-03/README.md) and [P4-04 Settings layout/typography record](../phase-4/p4-04/README.md) link shared foundation changes to regression and representative visual evidence. P4-05 remains unstarted.
 
 Phase 2 starts at `2d0f131`. The [preservation matrix](PRESERVATION_MATRIX.md) is the stable baseline: **PRES-E01…PRES-A03**, in the original ledger's groups (not one contiguous numeric range). Old references such as C07 remain valid aliases. Subdivide a later workflow with a suffix, for example `PRES-C07.override-reset`; do not reuse an ID or silently change its meaning.
 
diff --git a/docs/redesign/phase-4/README.md b/docs/redesign/phase-4/README.md
index 1f27435..bd0980f 100644
--- a/docs/redesign/phase-4/README.md
+++ b/docs/redesign/phase-4/README.md
@@ -6,5 +6,6 @@ Phase 4 starts from `f696f23` on `codex/ui-redesign-phase4`. The 57 preservation
 - [P4-01 preservation and visual evidence](p4-01/TRACEABILITY.md)
 - [P4-02 named controls and modal state](p4-02/README.md)
 - [P4-03 builder preview keyboard boundary](p4-03/README.md)
+- [P4-04 page layout and typography primitives](p4-04/README.md)
 
-P4-02 is locally validated after `115441a` and the separate documentation restructure `682a302` on the same Phase 4 branch. P4-03 follows the P4-02 checkpoint `ebd4a3e`, adding preview keyboard access and preserving focused panes through viewport transitions. P4-04 remains unstarted. No route/layout redesign, CV margin/template rendering correction, B07, backend/schema behaviour changes or production deployment is included. F04 remains open pending actual production ingress evidence.
+P4-02 is locally validated after `115441a` and the separate documentation restructure `682a302` on the same Phase 4 branch. P4-03 follows the P4-02 checkpoint `ebd4a3e`, adding preview keyboard access and preserving focused panes through viewport transitions. P4-04 follows `806eee4e`, introducing opt-in shared page/section typography and layout with Settings as the sole consumer. Its baseline is 916 backend / 348 frontend / 47 actual browser passes plus unchanged P2-D01 expected failure. P4-05 remains unstarted. No broader page migration, CV margin/template rendering correction, B07, backend/schema behaviour change or production deployment is included. F04 remains open pending actual production ingress evidence.
diff --git a/docs/redesign/phase-4/p4-04/README.md b/docs/redesign/phase-4/p4-04/README.md
new file mode 100644
index 0000000..87e8ff4
--- /dev/null
+++ b/docs/redesign/phase-4/p4-04/README.md
@@ -0,0 +1,181 @@
+# P4-04 — Page layout and typography primitives
+
+Implemented and locally validated on 2026-09-12 from `806eee4e1ea44cd15c75cc73467b1101a7bd8d2c` on `codex/ui-redesign-phase4`. Settings (`/settings`) is the only representative consumer. The commit containing this record is the P4-04 checkpoint (`git log -- docs/redesign/phase-4/p4-04`). P4-05, Phase 5 migration and B07 have not begun; no production deployment was performed. F04 remains open.
+
+Approved sources: [P4-04 scope](../../phase-3/PHASE4_IMPLEMENTATION_PLAN.md), [design system](../../phase-3/DESIGN_SYSTEM_ARCHITECTURE.md), [component architecture](../../phase-3/COMPONENT_ARCHITECTURE.md), [responsive strategy](../../phase-3/RESPONSIVE_STRATEGY.md), [accessibility plan](../../phase-3/ACCESSIBILITY_PLAN.md), [preservation impact](../../phase-3/PRESERVATION_IMPACT_MATRIX.md) and the [57-contract baseline](../../phase-2/PRESERVATION_MATRIX.md).
+
+## Selection and implementation boundary
+
+Settings exercises heading/description, independent sections/actions, bounded reading width, desktop tabs/mobile selector, preferences, loading/error and permission-dependent controls. Its subcards have no other production callers. Existing save handlers and endpoint contracts do not require refactoring. Inspection found an h5 shell title, non-heading section labels, nested padding and 240px minimum form widths. Retain the existing route, tab state/unmount behavior, independent requests and all controls. The shell opts only this route into the new header/width contract; other pages retain their existing presentation.
+
+Use current Archivo/system fonts, semantic palette and focus treatment. Introduce opt-in MUI page-title/section-title/description variants rather than globally resizing legacy headings. Alias bounded reading/data/editor widths beside the existing theme gutter/section variables. Consolidate repeated section presentation into a small PageSection; it does not own requests, drafts or saves. Settings has no page-wide transaction: keep its save actions in their existing sections, with no invented global Save. Test the shared optional header action layout with a non-production component fixture.
+
+## Preservation impact recorded before implementation
+
+All IDs retain their complete Phase 1/2 contracts. The following are directly affected or contained within the Settings consumer; no source/resource or permission semantics change.
+
+| PRES IDs | Existing behavior → P4-04 change | Existing automated evidence / additional proof |
+|---|---|---|
+| E07, E08 | Same route, sidebar, header utilities, theme and EN/NB → opt-in semantic h1 and theme typography; responsive page/section rhythm | sidebar-active-nav, theme-state/contrast, i18n-provider, P4-01/02 browser; add real Settings loaded/reflow/keyboard evidence |
+| S03, J05, W11 | Independent table/theme/language/rules/notification settings → same controls within shared layout | settings-view (failed save/retry, scenario payload); redesign-preservation browser (resize draft, native save); add table/theme callback proof before edits |
+| S04 | AI privacy, usage, billing availability → same state owners in named sections | settings-view, ai-usage-card, server privacy/entitlement tests; loaded zero-usage/locked and failure browser states |
+| S05 | Export/encrypted backup/deletion safeguards → section heading/action wrapping only | account-data-export and server export/backup/deletion suites; browser no-data export and disabled deletion access |
+| J10, J04 | CSV/JSON tools and capture bookmarklet → retained nested controls and headings | csv-export, capture tests and existing CSV browser; no serializer/capture edits |
+| M06 | Connected account navigation → action retained in its section | email-provider-connections and new actual Settings navigation check; provider connectivity remains unverified |
+| E09 | Account identity governs all requests/caches → unchanged private tree and B02 context | account-isolation browser and server session-boundary regressions |
+
+High-risk saving and lifecycle behavior already has focused tests. Before presentation changes, the added independent table/theme callback case and the existing Settings, usage, CSV and account-export cases passed: 13 tests in four suites. The final checkpoint adds presentation/real-browser evidence rather than rewriting these owners.
+
+## Shared architecture and changed files
+
+- [PageLayout.tsx](../../../../job-tracker-ui/src/layout/PageLayout.tsx): two small compositions, `PageHeader` and `PageSection`, and the `PageWidth` union. Header text wraps without truncation; optional actions wrap independently. Sections have generated heading IDs and semantic `section`/h2/h3 structure. Neither headings nor noninteractive sections acquire tab stops. A section is plain by default; Settings explicitly requests the existing semantic paper surface/base theme radius. No mandatory nested card, data fetching, form state or new provider is introduced.
+- [theme.ts](../../../../job-tracker-ui/src/theme.ts): opt-in `pageTitle`, `sectionTitle`, `pageDescription` MUI typography variants and three page-width CSS aliases. Existing palettes, focus overrides, legacy typography variants, Archivo/system font stack, provisional hue and font hosting are unchanged. `mui-theme.d.ts` replaces `theme.d.ts`: the old declaration filename collided with `theme.ts` and TypeScript omitted it from the compilation. Giving it a distinct name enables the new variant augmentation while retaining P4-01 palette declarations. No tsconfig weakening or `as any` workaround was added.
+- [App.tsx](../../../../job-tracker-ui/src/App.tsx): only the Settings description and opt-in `pageLayout="reading"` prop for `/settings` and its existing trailing-slash equivalent. Query strings, route declarations, auth/providers, global actions and navigation handlers are untouched.
+- [AppShell.tsx](../../../../job-tracker-ui/src/layout/AppShell.tsx): the optional page-layout prop selects shared width/header styling. The existing main/gutter, toolbar, breadcrumbs, sidebar, drawer, user menu and their handlers remain. **Other routes still use their old width and title markup.** Connected Accounts is not migrated by the `/settings` opt-in.
+- [SettingsView.tsx](../../../../job-tracker-ui/src/components/SettingsView.tsx): remove local SectionCard duplication and the second outer padded Paper; use shared section spacing, headings and shrinkable preference columns. Preserve desktop tabs/mobile selector and their tab state. The desktop tablist gains a translated name distinct from the existing mobile selector. Connected Accounts uses the shared section-header action slot, wrapping below the description on narrow screens; its route/callback is unchanged.
+- Settings-only subcomponents `AiPrivacySettingsCard`, `AiUsageCard`, `QuickCaptureCard`, `RulesSettingsCard`, `BackupCard` and nested `ImportExportJobs`: replace repeated section presentation/heading markup. Usage plan metadata occupies the header's trailing slot. No API call, payload, entitlement, download, serialization, bookmarklet, confirmation or save implementation changes.
+- `i18n/translations.ts`: one truthful Settings description in English and Bokmål. No new font or final branding choice.
+- Tests: new `src/page-layout.test.tsx`, one additional `src/settings-view.test.tsx` case and new `e2e/settings-page-layout.spec.ts`. The inherited `e2e/redesign-preservation.spec.ts` Settings case now explicitly awaits/asserts the notification PUT before its existing readback/reload checks; the separately discovered SQLite contention is documented below. Documentation: this record/evidence, Phase 4 index, Phase 2 trace link and active TODO status.
+
+### Typography and rhythm
+
+| Role | Opt-in value / responsibility |
+|---|---|
+| Page title | h1 semantics; 24/30 px equivalent on phone, 28/34 from 768px; weight 700; rem sizes |
+| Section title | h2/h3 chosen by hierarchy; 18/24 px equivalent, weight 600 |
+| Description | 14/20 px equivalent, weight 400, semantic secondary text; at most 75ch; long words may wrap |
+| Reading width | 60rem, matching Settings' existing nominal 960px cap; header and body now align |
+| Data/editor aliases | 82.5rem / 100%; future opt-in contracts only. No table/editor migrated or certified here |
+| Page gutters | Existing 16/24/32px theme variables; owned once by the shell |
+| Sections | Existing 24px section gap; 16px header/content gap; optional surface uses existing 16/20px card padding and base theme radius |
+
+No global body/legacy-heading resize, new palette, motion, density preference or competing token system. The first visual review caught the MUI numeric radius multiplier creating overly rounded new sections; using the existing base radius corrected that before the complete checkpoint. Section grid alignment also avoids distributing spare vertical space inside unequal-height columns.
+
+## Regression and visual method
+
+The two component tests prove full localized heading names/semantic levels, independent actions, disabled actions, nonfocusable sections and unmodified `ViewStateNotice` loading/error/retry/empty transitions. The new Settings callback test protects separate table-size, column and theme changes without backend preference writes.
+
+Four real Chromium workflows cover **light/English, light/Bokmål, dark/English and dark/Bokmål**, each through desktop and phone. Each creates its own non-admin account in the disposable local API database, uses real authentication/B02 context and blocks outbound browser traffic. No production/provider credentials or services are used.
+
+Coverage includes:
+
+1. Loaded real Settings: one h1, named section headings, actual zero-usage Free state and unavailable external AI. The zero-usage state is not a simulated provider success.
+2. 1920/1440/1024/768/767/390/320px General reflow; 320/390/768/1024/1440px rule editing without losing the draft. The overflow oracle checks actual ordinary descendants against the main/viewport edges, so the inherited body overflow rule cannot disguise clipping.
+3. A synthetic long English/Bokmål title at 320px to stress wrapping. Only title text is substituted in the test; no CSS injection, hidden controls or production fixture route. Reload restores actual copy.
+4. Keyboard mobile-section selection and focus return. Existing initial rules error/re-entry recovery, followed by native scenario save; the native API confirms the changed value.
+5. Held notification read/skeleton in the same page layout; one injected local 503 save failure preserves the unchecked draft; explicit retry persists it and reload proves it remains saved. Initial validation showed that error clearance alone was insufficient save proof because it occurs before request completion. The permanent oracle waits for the exact PUT response and checks its status before reading persisted state; the separate backend contention evidence is retained below.
+6. Backup headings/actions at 320px, actual no-job account ZIP download and server-disabled deletion. Existing unit/server tests retain recent-auth, exact confirmation and enabled deletion coverage; no destructive browser operation is attempted.
+7. Real Connected Accounts navigation through the responsive section action, inherited keyboard outline, and continued non-admin API denial. Provider connection functionality itself remains under its existing tests and operational gap.
+
+The shared header's optional page action uses the same composition as the real Connected Accounts section action. Settings has no artificial top-level Save button. Component tests also exercise a long localized page-action label. All screenshot data is synthetic; authenticated traces and databases remain ignored.
+
+## Intentionally retained debt and Phase 5 implications
+
+- This is a single Settings-page migration. Secondary navigation reorganisation, moving account/security sections, new settings routes, shell/sidebar redesign, command expansion and the other pages remain Phase 5+ work. P4-05 density has not begun.
+- Initial notification/AI-privacy load failures still use their existing error/skeleton behavior; no new retry or completion-announcement contract is claimed. Rules reload through existing section re-entry. Unsaved rules still unmount when deliberately changing sections, as recorded in Phase 2; viewport changes retain them. Shared layout must not silently invent draft persistence.
+- Existing import file-label keyboard semantics, full JSON roundtrip, encrypted restore, enabled paid-account deletion, provider connectivity/billing and real delivery require their separately scoped evidence. The CSV serializer and B01–B05 controls are unchanged.
+- Existing P2-D01 expected failure, P4-02-D01–D04 and P4-03-D01 remain explicit. CV margins/templates/pagination correctness is dedicated later work. No unrelated accessibility suppression or defect fix is included.
+- **P4-04-O01 — existing fixed-toast overlap:** visual review observed the export-success toast covering the bottom Connected Accounts action briefly. `toast.tsx` and its placement/timing are unchanged. The final fixture waits for normal dismissal, then checks the focused button receives hit testing before capture. This is not a claim that all transient toast overlap is repaired; review shared feedback placement with the later shell work.
+- **P4-04-O02 — existing SQLite notification-save contention:** concurrent request evidence and investigation are recorded below. The backend and application save handler are unchanged. Do not claim concurrent preference writes/reads are reliable based on the sequential preservation fixture; investigate in a separate backend reliability ticket without folding it into P4-05.
+- Browser viewport/keyboard and axe evidence do not certify Narrator/NVDA, real mobile touch/software keyboards, screen-reader behavior, browser 200%/400% zoom or forced colors. Those remain manual validation gaps. Data/editor width aliases still need their actual consumer fixtures before adoption.
+- **F04 remains open:** no deployed ingress, firewall, DNS or TLS evidence was collected. Feature-branch push does not deploy or close it.
+- Phase 5 can opt each reviewed consumer into the header/width/section contract, preserving its domain state and adding its own tests. Do not enable the new header globally or migrate the provider tree as a side effect.
+
+Rollback is limited to this presentation/test slice and restoring the declaration filename if reverting the entire change. There is no schema, storage format, package, CI, infrastructure or backend-contract change.
+
+## Final verification
+
+| Validation | Inherited P4-03 baseline | P4-04 result |
+|---|---|---|
+| Backend Release regression | 916 | **916 passed**, zero failed/skipped |
+| Frontend Jest | 345 | **348 passed in 74 suites**: two new shared-composition cases and one independent Settings-preference case |
+| Full Chromium suite | 43 actual passes + P2-D01 expected failure | **47 actual passes + unchanged P2-D01 expected failure**: four new Settings workflows, no inherited test removed or reclassified |
+| Final focused Settings repeat | Not additional cases | **4 passed**, the same four cases repeated after strengthening post-scroll focus hit testing |
+| Account/IP rate-limit HTTP | 9 | **9 passed** |
+| Production-mode ingress HTTP | 6 | **6 passed** locally; does not close deployed F04 |
+| Shared PDF admission HTTP | 1 | **1 passed** |
+| Effective Compose/config adversarial checks | 3 | **3 passed** |
+| TypeScript | Pass | **Pass**, standalone frontend and the additional scoped E2E type check |
+| ESLint | Pass | **Pass**, zero warnings allowed |
+| Frontend production build | Pass | **Pass**, Next static production export used by the browser runs |
+| API Release build | Pass | **Pass**, zero warnings/errors with `-warnaserror` |
+| Additional repository checks | Existing gates retained | Supply-chain tests **3**, Ollama evaluation harness tests **5**, extension tests **3**, all passed |
+| Repository hygiene | Pass | Tracked-secret scan, working/staged whitespace and local Markdown targets passed; **120** current/root Markdown documents checked, historical archive excluded |
+
+The full backend suite includes the existing B01 destination, B02 account/session, B03 admission, B04 partition and export coverage. The frontend/browser suites retain B02 switching, CSV safety and the existing CV/public-PDF flows. No application, backend, package, CI or infrastructure change followed these baseline runs. Browser-only refinements strengthen response synchronization and screenshot/focus proof. The final complete browser run uses both the new fixture and the explicitly sequential inherited Settings check described below.
+
+Playwright's list summary counts the expected failure as a successful test outcome. The JSON [SCAN_RESULTS.json](SCAN_RESULTS.json) explicitly records **47 `passed → passed` and one `failed → failed`**, not 48 successful workflows. P2-D01 still reaches the existing SQLite submitted-package failure; its historical-binary follow-on proof remains blocked.
+
+### Rendered review and accessibility evidence
+
+The final four Settings cases produced **36 synthetic screenshots**, **60 geometric reflow checks with zero out-of-bounds nodes**, and **20 full tagged axe scans with zero violations and no rule/element exclusions**. All 20 scans contain incomplete contrast checks; `aria-hidden-focus` also appears as incomplete. These remain review items, not automated passes. Raw incomplete details are retained in [SCAN_RESULTS.json](SCAN_RESULTS.json). Representative rendered images were inspected for hierarchy, density, wrapping, semantic surfaces, secondary-text readability and unclipped keyboard focus in both themes/locales.
+
+| PRES IDs → preserved behavior | Automated evidence | Representative rendered evidence |
+|---|---|---|
+| E07/E08 → Settings route, theme/language and existing navigation | Four new browser cases: one h1; EN/NB; 320–1920px reflow; keyboard section selection/focus return; non-Settings route retained | [Desktop light/NB](visual/general-1440-light-nb.png), [desktop dark/EN](visual/general-1440-dark-en.png), [phone dark/EN](visual/general-390-dark-en.png), [phone light/NB](visual/general-320-light-nb.png) |
+| S03/J05/W11 → independent preferences, rule draft survives resize, native save/retry/reload | New preference unit case; Settings browser API readback; inherited settings-view/redesign-preservation coverage | [Long NB heading](visual/long-heading-light-nb.png), [rules error dark/NB](visual/rules-error-dark-nb.png), [notification skeleton light/EN](visual/notifications-loading-light-en.png), [failed save dark/EN](visual/notifications-error-dark-en.png) |
+| S04 → real zero-usage Free state, external AI remains disabled | Actual native account/usage response, disabled switch; existing ai-usage-card/privacy/entitlement cases | [Usage and capture at 320px](visual/connected-action-dark-nb.png); this is not provider or paid-plan certification |
+| S05/J10/J04 → account export, deletion gate, existing import/capture | Actual ZIP download and disabled deletion; unchanged CSV/capture unit/backend tests | [Backup light/NB](visual/backup-light-nb.png), [backup dark/EN](visual/backup-dark-en.png), [export controls desktop](visual/general-1440-light-en.png) |
+| M06/E09 → Connected Accounts action, session-owned API access | Keyboard activation opens existing route, focus outline/hit-test, non-admin API 403; existing account-isolation/provider tests | [Connected action light/EN](visual/connected-action-light-en.png), [Connected action dark/NB](visual/connected-action-dark-nb.png) |
+
+All screenshots use 900px height; widths are in names or 320px for error/loading/backup/connected/long-heading captures. The remaining combinations are in [visual/](visual/). Existing source controls and the mobile section chooser remain; no action is hidden to pass reflow. Post-scroll hit testing uses retrying assertions to wait for the rendered position to settle. The initial immediate assertion sampled before that stable position; no application workaround or style injection was added.
+
+This validates the shared primitives and the single Settings consumer, not every application's visual parity. Reading width is exercised here; data/editor aliases are reserved for separately validated consumer migrations. Manual assistive-technology and the explicitly retained debt above remain open.
+
+### P4-04-O02 investigation and test-boundary correction
+
+A complete rerun failed the inherited `[PRES-S03 PRES-W11] responsive settings navigation keeps rule edits and persists notification preferences` case. Its native readback remained `true`; the browser had an unchecked draft and a visible save-error alert. The trace proved the click reached the API: `PUT /api/notification-settings` returned **500**, while the test's overlapping GETs returned **200** with the old value. This was neither a lost click nor a successful save hidden by presentation.
+
+Repeating that unchanged fixture ten times with API console capture yielded **eight passes and two failures**. Both server failures were `DbUpdateException` with SQLite error 5, `database is locked`, through `UserStore.UpdateAsync` and [NotificationSettingsController.Put](../../../../JobTrackerApi/Controllers/NotificationSettingsController.cs). This controller, its Identity/database configuration and the Settings save handler are unchanged from `806eee4e`. The original trace is `.artifacts/p4-04-settings-failure-trace.zip`; the failing full run is preserved as `p4-04-browser-intermittent.json/.log`, and the repeated API diagnostics as `p4-04-settings-diagnostic.json/.log`. These synthetic traces/logs remain ignored rather than publishing session credentials.
+
+The inherited test began native GET polling immediately after clicking Save, before the PUT completed. That added concurrent read traffic unrelated to its sequential UI preservation contract. It now awaits the exact PUT and **requires HTTP 200**, then retains the existing native readback and reload checks. No 500 is accepted, retried or converted to an expected failure. P2-D01 is unchanged. The four new Settings cases already await their PUT responses and explicitly verify error/draft/retry behavior.
+
+The corrected sequential case passed **ten of ten repeats**, with API console capture and no notification-save 500. These are diagnostic repeats of one inherited case, not ten new tests. The subsequent complete suite is the final checkpoint result in the table above.
+
+This correction isolates the intended sequential test; it does **not** repair or dismiss the backend contention. Further work must reproduce the concurrent API condition, identify the locking/transaction cause and verify a bounded backend solution. No schema, retry policy, SQLite mode or server synchronization change is included here. The original fixture is recoverable from `806eee4e:job-tracker-ui/e2e/redesign-preservation.spec.ts` for the same ten-repeat local probe.
+
+### Commands
+
+Run from repository root unless a directory change is shown. Output logs/TRX/JSON are retained under ignored `.artifacts/`; the scan evidence and synthetic screenshots are committed here. Existing installed dependencies were used; there were no CI/package/infrastructure changes or remote-provider calls.
+
+```powershell
+$env:DOTNET_ROOT='C:/Users/Connor/.dotnet'
+& C:/Users/Connor/.dotnet/dotnet.exe test JobTrackerApi.Tests/JobTrackerApi.Tests.csproj --configuration Release --no-restore --logger 'trx;LogFileName=p4-04.trx' --results-directory .artifacts/redesign-p4-04 -- xUnit.parallelizeTestCollections=false xUnit.maxParallelThreads=1
+# Final repeat after the browser-only correction, using the unchanged Release build:
+& C:/Users/Connor/.dotnet/dotnet.exe test JobTrackerApi.Tests/JobTrackerApi.Tests.csproj --configuration Release --no-build --no-restore --logger 'trx;LogFileName=p4-04-final.trx' --results-directory .artifacts/redesign-p4-04 -- xUnit.parallelizeTestCollections=false xUnit.maxParallelThreads=1
+& C:/Users/Connor/.dotnet/dotnet.exe build JobTrackerApi/JobTrackerApi.csproj --configuration Release --no-restore -warnaserror
+python scripts/test-ingress.py
+python scripts/test-supply-chain.py
+python scripts/test-ollama-evaluation.py
+node --test browser-extension/tests/*.test.mjs
+Set-Location job-tracker-ui
+npm test -- --watchAll=false --runInBand --json --outputFile=../.artifacts/p4-04-jest.json
+npm run typecheck
+node node_modules/typescript/bin/tsc --project ../.artifacts/p4-04-e2e-tsconfig.json
+npm run lint
+$env:NEXT_PUBLIC_API_BASE_URL='http://localhost:5302/api'
+$env:NEXT_TELEMETRY_DISABLED='1'
+npm run build
+$env:DOTNET_HOST_PATH='C:/Users/Connor/.dotnet/dotnet.exe'
+$env:PLAYWRIGHT_STATIC_EXPORT='true'
+$env:PLAYWRIGHT_PREBUILT_EXPORT='true'
+$env:P4_04_CAPTURE='true'
+$env:PLAYWRIGHT_JSON_OUTPUT_FILE='../.artifacts/p4-04-browser.json'
+node node_modules/@playwright/test/cli.js test --reporter=list,json
+$env:PLAYWRIGHT_JSON_OUTPUT_FILE='../.artifacts/p4-04-final-focused.json'
+node node_modules/@playwright/test/cli.js test e2e/settings-page-layout.spec.ts --reporter=list,json
+# Diagnostic: executed before and after the inherited Settings response barrier;
+# the first run reproduced O02. No retry option or expected failure was added.
+$env:DEBUG='pw:webserver'
+node node_modules/@playwright/test/cli.js test e2e/redesign-preservation.spec.ts --grep 'responsive settings navigation' --repeat-each=10 --reporter=list,json
+Remove-Item Env:DEBUG
+node node_modules/@playwright/test/cli.js test --config=playwright.rate-limits.config.ts
+node node_modules/@playwright/test/cli.js test --config=playwright.ingress.config.ts
+node node_modules/@playwright/test/cli.js test --config=playwright.pdf.config.ts
+Set-Location ..
+python scripts/supply-chain.py scan-secrets
+git diff --check
+git diff --cached --check
+```
+
+The ignored E2E type config extends the existing frontend configuration, includes the new Settings spec, the affected inherited preservation spec and MUI augmentation, disables incremental caching and resolves frontend Node types. It adds no test exclusion or production compiler change.
diff --git a/docs/redesign/phase-4/p4-04/SCAN_RESULTS.json b/docs/redesign/phase-4/p4-04/SCAN_RESULTS.json
new file mode 100644
index 0000000..d04f1ee
--- /dev/null
+++ b/docs/redesign/phase-4/p4-04/SCAN_RESULTS.json
@@ -0,0 +1,2418 @@
+{
+  "date": "2026-09-12",
+  "source": ".artifacts/p4-04-browser.json",
+  "outcomes": {
+    "passed -> passed": 47,
+    "failed -> failed": 1
+  },
+  "focusedSource": ".artifacts/p4-04-final-focused.json",
+  "focusedOutcomes": {
+    "passed -> passed": 4
+  },
+  "note": "Scans, reflow checks and screenshots come from the final complete-suite rerun after strengthening post-scroll focus hit testing. The focused repeat uses the same four Settings cases, not additional tests.",
+  "diagnosticHistory": [
+    {
+      "source": ".artifacts/p4-04-browser-intermittent.json",
+      "outcomes": {
+        "passed -> passed": 46,
+        "failed -> failed": 1,
+        "passed -> failed": 1
+      }
+    },
+    {
+      "source": ".artifacts/p4-04-settings-diagnostic.json",
+      "outcomes": {
+        "passed -> passed": 8,
+        "passed -> failed": 2
+      }
+    },
+    {
+      "source": ".artifacts/p4-04-settings-sequential.json",
+      "outcomes": {
+        "passed -> passed": 10
+      }
+    }
+  ],
+  "diagnosticFinding": "P4-04-O02: the inherited Settings case exposed SQLite error 5 during overlapping read/write traffic. The sequential test now requires the PUT response before readback. Backend contention remains open; no failure suppression or new expected failure was added.",
+  "settingsCases": [
+    {
+      "title": "[PRES-E07 E08 E09 S03 S04 S05 J05 J10 M06 W11] light/en Settings headings, reflow and retained actions",
+      "file": "settings-page-layout.spec.ts",
+      "expected": "passed",
+      "actual": "passed"
+    },
+    {
+      "title": "[PRES-E07 E08 E09 S03 S04 S05 J05 J10 M06 W11] light/nb Settings headings, reflow and retained actions",
+      "file": "settings-page-layout.spec.ts",
+      "expected": "passed",
+      "actual": "passed"
+    },
+    {
+      "title": "[PRES-E07 E08 E09 S03 S04 S05 J05 J10 M06 W11] dark/en Settings headings, reflow and retained actions",
+      "file": "settings-page-layout.spec.ts",
+      "expected": "passed",
+      "actual": "passed"
+    },
+    {
+      "title": "[PRES-E07 E08 E09 S03 S04 S05 J05 J10 M06 W11] dark/nb Settings headings, reflow and retained actions",
+      "file": "settings-page-layout.spec.ts",
+      "expected": "passed",
+      "actual": "passed"
+    }
+  ],
+  "settingsScanCount": 20,
+  "settingsViolationCount": 0,
+  "scansWithIncompleteRules": 20,
+  "reflowChecks": [
+    {
+      "name": "general-1920-light-en-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "general-1440-light-en-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "general-1024-light-en-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "general-768-light-en-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "general-767-light-en-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "general-390-light-en-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "general-320-light-en-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "long-heading-light-en-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "rules-320-light-en-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "rules-390-light-en-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "rules-768-light-en-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "rules-1024-light-en-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "rules-1440-light-en-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "notifications-error-light-en-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "backup-light-en-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "general-1920-light-nb-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "general-1440-light-nb-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "general-1024-light-nb-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "general-768-light-nb-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "general-767-light-nb-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "general-390-light-nb-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "general-320-light-nb-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "long-heading-light-nb-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "rules-320-light-nb-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "rules-390-light-nb-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "rules-768-light-nb-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "rules-1024-light-nb-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "rules-1440-light-nb-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "notifications-error-light-nb-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "backup-light-nb-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "general-1920-dark-en-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "general-1440-dark-en-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "general-1024-dark-en-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "general-768-dark-en-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "general-767-dark-en-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "general-390-dark-en-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "general-320-dark-en-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "long-heading-dark-en-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "rules-320-dark-en-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "rules-390-dark-en-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "rules-768-dark-en-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "rules-1024-dark-en-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "rules-1440-dark-en-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "notifications-error-dark-en-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "backup-dark-en-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "general-1920-dark-nb-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "general-1440-dark-nb-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "general-1024-dark-nb-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "general-768-dark-nb-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "general-767-dark-nb-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "general-390-dark-nb-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "general-320-dark-nb-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "long-heading-dark-nb-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "rules-320-dark-nb-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "rules-390-dark-nb-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "rules-768-dark-nb-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "rules-1024-dark-nb-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "rules-1440-dark-nb-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "notifications-error-dark-nb-reflow",
+      "outsideBounds": []
+    },
+    {
+      "name": "backup-dark-nb-reflow",
+      "outsideBounds": []
+    }
+  ],
+  "scans": [
+    {
+      "name": "general-light-en-axe",
+      "violations": [],
+      "incomplete": [
+        {
+          "id": "color-contrast",
+          "impact": "serious",
+          "tags": [
+            "cat.color",
+            "wcag2aa",
+            "wcag143",
+            "TTv5",
+            "TT13.c",
+            "EN-301-549",
+            "EN-9.1.4.3",
+            "ACT",
+            "RGAAv4",
+            "RGAA-3.2.1"
+          ],
+          "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
+          "help": "Elements must meet minimum color contrast ratio thresholds",
+          "helpUrl": "https://dequeuniversity.com/rules/axe/4.13/color-contrast?application=playwright",
+          "nodes": [
+            {
+              "any": [
+                {
+                  "id": "color-contrast",
+                  "data": {
+                    "contrastRatio": 0,
+                    "fontSize": "10.5pt (14px)",
+                    "fontWeight": "normal",
+                    "messageKey": "bgOverlap",
+                    "expectedContrastRatio": "4.5:1"
+                  },
+                  "relatedNodes": [],
+                  "impact": "serious",
+                  "message": "Element's background color could not be determined because it is overlapped by another element"
+                }
+              ],
+              "all": [],
+              "none": [],
+              "impact": "serious",
+              "html": "<div tabindex=\"0\" role=\"combobox\" aria-expanded=\"false\" aria-haspopup=\"listbox\" aria-labelledby=\"theme-mode-label\" class=\"MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-1ehla7j\">Light</div>",
+              "target": [
+                "div[aria-labelledby=\"theme-mode-label\"]"
+              ],
+              "failureSummary": "Fix any of the following:\n  Element's background color could not be determined because it is overlapped by another element"
+            },
+            {
+              "any": [
+                {
+                  "id": "color-contrast",
+                  "data": {
+                    "contrastRatio": 0,
+                    "fontSize": "10.5pt (14px)",
+                    "fontWeight": "normal",
+                    "messageKey": "bgOverlap",
+                    "expectedContrastRatio": "4.5:1"
+                  },
+                  "relatedNodes": [],
+                  "impact": "serious",
+                  "message": "Element's background color could not be determined because it is overlapped by another element"
+                }
+              ],
+              "all": [],
+              "none": [],
+              "impact": "serious",
+              "html": "<div tabindex=\"0\" role=\"combobox\" aria-expanded=\"false\" aria-haspopup=\"listbox\" aria-labelledby=\"language-label\" class=\"MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-1ehla7j\">English</div>",
+              "target": [
+                "div[aria-labelledby=\"language-label\"]"
+              ],
+              "failureSummary": "Fix any of the following:\n  Element's background color could not be determined because it is overlapped by another element"
+            },
+            {
+              "any": [
+                {
+                  "id": "color-contrast",
+                  "data": {
+                    "contrastRatio": 0,
+                    "fontSize": "10.5pt (14px)",
+                    "fontWeight": "normal",
+                    "messageKey": "bgOverlap",
+                    "expectedContrastRatio": "4.5:1"
+                  },
+                  "relatedNodes": [],
+                  "impact": "serious",
+                  "message": "Element's background color could not be determined because it is overlapped by another element"
+                }
+              ],
+              "all": [],
+              "none": [],
+              "impact": "serious",
+              "html": "<div tabindex=\"0\" role=\"combobox\" aria-expanded=\"false\" aria-haspopup=\"listbox\" aria-labelledby=\"page-size-label\" class=\"MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-1ehla7j\">15</div>",
+              "target": [
+                "div[aria-labelledby=\"page-size-label\"]"
+              ],
+              "failureSummary": "Fix any of the following:\n  Element's background color could not be determined because it is overlapped by another element"
+            },
+            {
+              "any": [
+                {
+                  "id": "color-contrast",
+                  "data": {
+                    "contrastRatio": 0,
+                    "fontSize": "10.5pt (14px)",
+                    "fontWeight": "normal",
+                    "messageKey": "bgOverlap",
+                    "expectedContrastRatio": "4.5:1"
+                  },
+                  "relatedNodes": [],
+                  "impact": "serious",
+                  "message": "Element's background color could not be determined because it is overlapped by another element"
+                }
+              ],
+              "all": [],
+              "none": [],
+              "impact": "serious",
+              "html": "<input aria-invalid=\"false\" id=\"_r_1e_\" readonly=\"\" class=\"MuiInputBase-input M...\" type=\"text\" value=\"javascript:void(wind...\">",
+              "target": [
+                "#_r_1e_"
+              ],
+              "failureSummary": "Fix any of the following:\n  Element's background color could not be determined because it is overlapped by another element"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "phone-light-en-axe",
+      "violations": [],
+      "incomplete": [
+        {
+          "id": "color-contrast",
+          "impact": "serious",
+          "tags": [
+            "cat.color",
+            "wcag2aa",
+            "wcag143",
+            "TTv5",
+            "TT13.c",
+            "EN-301-549",
+            "EN-9.1.4.3",
+            "ACT",
+            "RGAAv4",
+            "RGAA-3.2.1"
+          ],
+          "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
+          "help": "Elements must meet minimum color contrast ratio thresholds",
+          "helpUrl": "https://dequeuniversity.com/rules/axe/4.13/color-contrast?application=playwright",
+          "nodes": [
+            {
+              "any": [
+                {
+                  "id": "color-contrast",
+                  "data": {
+                    "contrastRatio": 0,
+                    "fontSize": "10.5pt (14px)",
+                    "fontWeight": "normal",
+                    "messageKey": "bgOverlap",
+                    "expectedContrastRatio": "4.5:1"
+                  },
+                  "relatedNodes": [],
+                  "impact": "serious",
+                  "message": "Element's background color could not be determined because it is overlapped by another element"
+                }
+              ],
+              "all": [],
+              "none": [],
+              "impact": "serious",
+              "html": "<div tabindex=\"0\" role=\"combobox\" aria-expanded=\"false\" aria-haspopup=\"listbox\" aria-labelledby=\"settings-section-label\" class=\"MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-1ehla7j\">General</div>",
+              "target": [
+                "div[aria-labelledby=\"settings-section-label\"]"
+              ],
+              "failureSummary": "Fix any of the following:\n  Element's background color could not be determined because it is overlapped by another element"
+            },
+            {
+              "any": [
+                {
+                  "id": "color-contrast",
+                  "data": {
+                    "contrastRatio": 0,
+                    "fontSize": "10.5pt (14px)",
+                    "fontWeight": "normal",
+                    "messageKey": "bgOverlap",
+                    "expectedContrastRatio": "4.5:1"
+                  },
+                  "relatedNodes": [],
+                  "impact": "serious",
+                  "message": "Element's background color could not be determined because it is overlapped by another element"
+                }
+              ],
+              "all": [],
+              "none": [],
+              "impact": "serious",
+              "html": "<div tabindex=\"0\" role=\"combobox\" aria-expanded=\"false\" aria-haspopup=\"listbox\" aria-labelledby=\"theme-mode-label\" class=\"MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-1ehla7j\">Light</div>",
+              "target": [
+                "div[aria-labelledby=\"theme-mode-label\"]"
+              ],
+              "failureSummary": "Fix any of the following:\n  Element's background color could not be determined because it is overlapped by another element"
+            },
+            {
+              "any": [
+                {
+                  "id": "color-contrast",
+                  "data": {
+                    "contrastRatio": 0,
+                    "fontSize": "10.5pt (14px)",
+                    "fontWeight": "normal",
+                    "messageKey": "bgOverlap",
+                    "expectedContrastRatio": "4.5:1"
+                  },
+                  "relatedNodes": [],
+                  "impact": "serious",
+                  "message": "Element's background color could not be determined because it is overlapped by another element"
+                }
+              ],
+              "all": [],
+              "none": [],
+              "impact": "serious",
+              "html": "<div tabindex=\"0\" role=\"combobox\" aria-expanded=\"false\" aria-haspopup=\"listbox\" aria-labelledby=\"language-label\" class=\"MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-1ehla7j\">English</div>",
+              "target": [
+                "div[aria-labelledby=\"language-label\"]"
+              ],
+              "failureSummary": "Fix any of the following:\n  Element's background color could not be determined because it is overlapped by another element"
+            },
+            {
+              "any": [
+                {
+                  "id": "color-contrast",
+                  "data": {
+                    "contrastRatio": 0,
+                    "fontSize": "10.5pt (14px)",
+                    "fontWeight": "normal",
+                    "messageKey": "bgOverlap",
+                    "expectedContrastRatio": "4.5:1"
+                  },
+                  "relatedNodes": [],
+                  "impact": "serious",
+                  "message": "Element's background color could not be determined because it is overlapped by another element"
+                }
+              ],
+              "all": [],
+              "none": [],
+              "impact": "serious",
+              "html": "<div tabindex=\"0\" role=\"combobox\" aria-expanded=\"false\" aria-haspopup=\"listbox\" aria-labelledby=\"page-size-label\" class=\"MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-1ehla7j\">15</div>",
+              "target": [
+                "div[aria-labelledby=\"page-size-label\"]"
+              ],
+              "failureSummary": "Fix any of the following:\n  Element's background color could not be determined because it is overlapped by another element"
+            },
+            {
+              "any": [
+                {
+                  "id": "color-contrast",
+                  "data": {
+                    "contrastRatio": 0,
+                    "fontSize": "10.5pt (14px)",
+                    "fontWeight": "normal",
+                    "messageKey": "bgOverlap",
+                    "expectedContrastRatio": "4.5:1"
+                  },
+                  "relatedNodes": [],
+                  "impact": "serious",
+                  "message": "Element's background color could not be determined because it is overlapped by another element"
+                }
+              ],
+              "all": [],
+              "none": [],
+              "impact": "serious",
+              "html": "<input aria-invalid=\"false\" id=\"_r_1e_\" readonly=\"\" class=\"MuiInputBase-input M...\" type=\"text\" value=\"javascript:void(wind...\" style=\"\">",
+              "target": [
+                "#_r_1e_"
+              ],
+              "failureSummary": "Fix any of the following:\n  Element's background color could not be determined because it is overlapped by another element"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "rules-error-light-en-axe",
+      "violations": [],
+      "incomplete": [
+        {
+          "id": "aria-hidden-focus",
+          "impact": "serious",
+          "tags": [
+            "cat.name-role-value",
+            "wcag2a",
+            "wcag412",
+            "TTv5",
+            "TT6.a",
+            "EN-301-549",
+            "EN-9.4.1.2",
+            "RGAAv4",
+            "RGAA-10.8.1"
+          ],
+          "description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
+          "help": "ARIA hidden element must not be focusable or contain focusable elements",
+          "helpUrl": "https://dequeuniversity.com/rules/axe/4.13/aria-hidden-focus?application=playwright",
+          "nodes": [
+            {
+              "any": [],
+              "all": [
+                {
+                  "id": "focusable-modal-open",
+                  "data": null,
+                  "relatedNodes": [
+                    {
+                      "html": "<li class=\"MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters Mui-selected MuiMenuItem-root MuiMenuItem-gutters Mui-selected css-qy8v2z\" tabindex=\"0\" role=\"option\" aria-selected=\"true\" data-value=\"1\">Follow-ups<span class=\"MuiTouchRipple-root css-4mb1j7\"></span></li>",
+                      "target": [
+                        "li[data-value=\"1\"]"
+                      ]
+                    }
+                  ],
+                  "impact": "serious",
+                  "message": "Check that focusable elements are not tabbable in the current state"
+                }
+              ],
+              "none": [],
+              "impact": "serious",
+              "html": "<div role=\"presentation\" id=\"menu-\" class=\"MuiPopover-root MuiMenu-root MuiModal-root css-lhktpd\" aria-hidden=\"true\">",
+              "target": [
+                "#menu-"
+              ],
+              "failureSummary": "Fix all of the following:\n  Check that focusable elements are not tabbable in the current state"
+            }
+          ]
+        },
+        {
+          "id": "color-contrast",
+          "impact": "serious",
+          "tags": [
+            "cat.color",
+            "wcag2aa",
+            "wcag143",
+            "TTv5",
+            "TT13.c",
+            "EN-301-549",
+            "EN-9.1.4.3",
+            "ACT",
+            "RGAAv4",
+            "RGAA-3.2.1"
+          ],
+          "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
+          "help": "Elements must meet minimum color contrast ratio thresholds",
+          "helpUrl": "https://dequeuniversity.com/rules/axe/4.13/color-contrast?application=playwright",
+          "nodes": [
+            {
+              "any": [
+                {
+                  "id": "color-contrast",
+                  "data": {
+                    "contrastRatio": 0,
+                    "fontSize": "10.5pt (14px)",
+                    "fontWeight": "normal",
+                    "messageKey": "bgOverlap",
+                    "expectedContrastRatio": "4.5:1"
+                  },
+                  "relatedNodes": [],
+                  "impact": "serious",
+                  "message": "Element's background color could not be determined because it is overlapped by another element"
+                }
+              ],
+              "all": [],
+              "none": [],
+              "impact": "serious",
+              "html": "<div tabindex=\"0\" role=\"combobox\" aria-expanded=\"false\" aria-haspopup=\"listbox\" aria-labelledby=\"settings-section-label\" class=\"MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-1ehla7j\">Follow-ups</div>",
+              "target": [
+                ".MuiSelect-select"
+              ],
+              "failureSummary": "Fix any of the following:\n  Element's background color could not be determined because it is overlapped by another element"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "notifications-error-light-en-axe",
+      "violations": [],
+      "incomplete": [
+        {
+          "id": "color-contrast",
+          "impact": "serious",
+          "tags": [
+            "cat.color",
+            "wcag2aa",
+            "wcag143",
+            "TTv5",
+            "TT13.c",
+            "EN-301-549",
+            "EN-9.1.4.3",
+            "ACT",
+            "RGAAv4",
+            "RGAA-3.2.1"
+          ],
+          "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
+          "help": "Elements must meet minimum color contrast ratio thresholds",
+          "helpUrl": "https://dequeuniversity.com/rules/axe/4.13/color-contrast?application=playwright",
+          "nodes": [
+            {
+              "any": [
+                {
+                  "id": "color-contrast",
+                  "data": {
+                    "contrastRatio": 0,
+                    "fontSize": "10.5pt (14px)",
+                    "fontWeight": "normal",
+                    "messageKey": "bgOverlap",
+                    "expectedContrastRatio": "4.5:1"
+                  },
+                  "relatedNodes": [],
+                  "impact": "serious",
+                  "message": "Element's background color could not be determined because it is overlapped by another element"
+                }
+              ],
+              "all": [],
+              "none": [],
+              "impact": "serious",
+              "html": "<div tabindex=\"0\" role=\"combobox\" aria-expanded=\"false\" aria-haspopup=\"listbox\" aria-labelledby=\"settings-section-label\" class=\"MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-1ehla7j\">Notifications</div>",
+              "target": [
+                ".MuiSelect-select"
+              ],
+              "failureSummary": "Fix any of the following:\n  Element's background color could not be determined because it is overlapped by another element"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "backup-light-en-axe",
+      "violations": [],
+      "incomplete": [
+        {
+          "id": "aria-hidden-focus",
+          "impact": "serious",
+          "tags": [
+            "cat.name-role-value",
+            "wcag2a",
+            "wcag412",
+            "TTv5",
+            "TT6.a",
+            "EN-301-549",
+            "EN-9.4.1.2",
+            "RGAAv4",
+            "RGAA-10.8.1"
+          ],
+          "description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
+          "help": "ARIA hidden element must not be focusable or contain focusable elements",
+          "helpUrl": "https://dequeuniversity.com/rules/axe/4.13/aria-hidden-focus?application=playwright",
+          "nodes": [
+            {
+              "any": [],
+              "all": [
+                {
+                  "id": "focusable-modal-open",
+                  "data": null,
+                  "relatedNodes": [
+                    {
+                      "html": "<li class=\"MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters Mui-selected MuiMenuItem-root MuiMenuItem-gutters Mui-selected css-qy8v2z\" tabindex=\"0\" role=\"option\" aria-selected=\"true\" data-value=\"3\">Backup<span class=\"MuiTouchRipple-root css-4mb1j7\"></span></li>",
+                      "target": [
+                        "li[data-value=\"3\"]"
+                      ]
+                    }
+                  ],
+                  "impact": "serious",
+                  "message": "Check that focusable elements are not tabbable in the current state"
+                }
+              ],
+              "none": [],
+              "impact": "serious",
+              "html": "<div role=\"presentation\" id=\"menu-\" class=\"MuiPopover-root MuiMenu-root MuiModal-root css-lhktpd\" aria-hidden=\"true\">",
+              "target": [
+                "#menu-"
+              ],
+              "failureSummary": "Fix all of the following:\n  Check that focusable elements are not tabbable in the current state"
+            }
+          ]
+        },
+        {
+          "id": "color-contrast",
+          "impact": "serious",
+          "tags": [
+            "cat.color",
+            "wcag2aa",
+            "wcag143",
+            "TTv5",
+            "TT13.c",
+            "EN-301-549",
+            "EN-9.1.4.3",
+            "ACT",
+            "RGAAv4",
+            "RGAA-3.2.1"
+          ],
+          "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
+          "help": "Elements must meet minimum color contrast ratio thresholds",
+          "helpUrl": "https://dequeuniversity.com/rules/axe/4.13/color-contrast?application=playwright",
+          "nodes": [
+            {
+              "any": [
+                {
+                  "id": "color-contrast",
+                  "data": {
+                    "contrastRatio": 0,
+                    "fontSize": "10.5pt (14px)",
+                    "fontWeight": "normal",
+                    "messageKey": "bgOverlap",
+                    "expectedContrastRatio": "4.5:1"
+                  },
+                  "relatedNodes": [],
+                  "impact": "serious",
+                  "message": "Element's background color could not be determined because it is overlapped by another element"
+                }
+              ],
+              "all": [],
+              "none": [],
+              "impact": "serious",
+              "html": "<div tabindex=\"0\" role=\"combobox\" aria-expanded=\"false\" aria-haspopup=\"listbox\" aria-labelledby=\"settings-section-label\" class=\"MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-1ehla7j\">Backup</div>",
+              "target": [
+                ".MuiSelect-select"
+              ],
+              "failureSummary": "Fix any of the following:\n  Element's background color could not be determined because it is overlapped by another element"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "general-light-nb-axe",
+      "violations": [],
+      "incomplete": [
+        {
+          "id": "color-contrast",
+          "impact": "serious",
+          "tags": [
+            "cat.color",
+            "wcag2aa",
+            "wcag143",
+            "TTv5",
+            "TT13.c",
+            "EN-301-549",
+            "EN-9.1.4.3",
+            "ACT",
+            "RGAAv4",
+            "RGAA-3.2.1"
+          ],
+          "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
+          "help": "Elements must meet minimum color contrast ratio thresholds",
+          "helpUrl": "https://dequeuniversity.com/rules/axe/4.13/color-contrast?application=playwright",
+          "nodes": [
+            {
+              "any": [
+                {
+                  "id": "color-contrast",
+                  "data": {
+                    "contrastRatio": 0,
+                    "fontSize": "10.5pt (14px)",
+                    "fontWeight": "normal",
+                    "messageKey": "bgOverlap",
+                    "expectedContrastRatio": "4.5:1"
+                  },
+                  "relatedNodes": [],
+                  "impact": "serious",
+                  "message": "Element's background color could not be determined because it is overlapped by another element"
+                }
+              ],
+              "all": [],
+              "none": [],
+              "impact": "serious",
+              "html": "<div tabindex=\"0\" role=\"combobox\" aria-expanded=\"false\" aria-haspopup=\"listbox\" aria-labelledby=\"theme-mode-label\" class=\"MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-1ehla7j\">Lyst</div>",
+              "target": [
+                "div[aria-labelledby=\"theme-mode-label\"]"
+              ],
+              "failureSummary": "Fix any of the following:\n  Element's background color could not be determined because it is overlapped by another element"
+            },
+            {
+              "any": [
+                {
+                  "id": "color-contrast",
+                  "data": {
+                    "contrastRatio": 0,
+                    "fontSize": "10.5pt (14px)",
+                    "fontWeight": "normal",
+                    "messageKey": "bgOverlap",
+                    "expectedContrastRatio": "4.5:1"
+                  },
+                  "relatedNodes": [],
+                  "impact": "serious",
+                  "message": "Element's background color could not be determined because it is overlapped by another element"
+                }
+              ],
+              "all": [],
+              "none": [],
+              "impact": "serious",
+              "html": "<div tabindex=\"0\" role=\"combobox\" aria-expanded=\"false\" aria-haspopup=\"listbox\" aria-labelledby=\"language-label\" class=\"MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-1ehla7j\">Norsk Bokmål</div>",
+              "target": [
+                "div[aria-labelledby=\"language-label\"]"
+              ],
+              "failureSummary": "Fix any of the following:\n  Element's background color could not be determined because it is overlapped by another element"
+            },
+            {
+              "any": [
+                {
+                  "id": "color-contrast",
+                  "data": {
+                    "contrastRatio": 0,
+                    "fontSize": "10.5pt (14px)",
+                    "fontWeight": "normal",
+                    "messageKey": "bgOverlap",
+                    "expectedContrastRatio": "4.5:1"
+                  },
+                  "relatedNodes": [],
+                  "impact": "serious",
+                  "message": "Element's background color could not be determined because it is overlapped by another element"
+                }
+              ],
+              "all": [],
+              "none": [],
+              "impact": "serious",
+              "html": "<div tabindex=\"0\" role=\"combobox\" aria-expanded=\"false\" aria-haspopup=\"listbox\" aria-labelledby=\"page-size-label\" class=\"MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-1ehla7j\">15</div>",
+              "target": [
+                "div[aria-labelledby=\"page-size-label\"]"
+              ],
+              "failureSummary": "Fix any of the following:\n  Element's background color could not be determined because it is overlapped by another element"
+            },
+            {
+              "any": [
+                {
+                  "id": "color-contrast",
+                  "data": {
+                    "contrastRatio": 0,
+                    "fontSize": "10.5pt (14px)",
+                    "fontWeight": "normal",
+                    "messageKey": "bgOverlap",
+                    "expectedContrastRatio": "4.5:1"
+                  },
+                  "relatedNodes": [],
+                  "impact": "serious",
+                  "message": "Element's background color could not be determined because it is overlapped by another element"
+                }
+              ],
+              "all": [],
+              "none": [],
+              "impact": "serious",
+              "html": "<input aria-invalid=\"false\" id=\"_r_1e_\" readonly=\"\" class=\"MuiInputBase-input M...\" type=\"text\" value=\"javascript:void(wind...\">",
+              "target": [
+                "#_r_1e_"
+              ],
+              "failureSummary": "Fix any of the following:\n  Element's background color could not be determined because it is overlapped by another element"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "phone-light-nb-axe",
+      "violations": [],
+      "incomplete": [
+        {
+          "id": "color-contrast",
+          "impact": "serious",
+          "tags": [
+            "cat.color",
+            "wcag2aa",
+            "wcag143",
+            "TTv5",
+            "TT13.c",
+            "EN-301-549",
+            "EN-9.1.4.3",
+            "ACT",
+            "RGAAv4",
+            "RGAA-3.2.1"
+          ],
+          "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
+          "help": "Elements must meet minimum color contrast ratio thresholds",
+          "helpUrl": "https://dequeuniversity.com/rules/axe/4.13/color-contrast?application=playwright",
+          "nodes": [
+            {
+              "any": [
+                {
+                  "id": "color-contrast",
+                  "data": {
+                    "contrastRatio": 0,
+                    "fontSize": "10.5pt (14px)",
+                    "fontWeight": "normal",
+                    "messageKey": "bgOverlap",
+                    "expectedContrastRatio": "4.5:1"
+                  },
+                  "relatedNodes": [],
+                  "impact": "serious",
+                  "message": "Element's background color could not be determined because it is overlapped by another element"
+                }
+              ],
+              "all": [],
+              "none": [],
+              "impact": "serious",
+              "html": "<div tabindex=\"0\" role=\"combobox\" aria-expanded=\"false\" aria-haspopup=\"listbox\" aria-labelledby=\"settings-section-label\" class=\"MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-1ehla7j\">Generelt</div>",
+              "target": [
+                "div[aria-labelledby=\"settings-section-label\"]"
+              ],
+              "failureSummary": "Fix any of the following:\n  Element's background color could not be determined because it is overlapped by another element"
+            },
+            {
+              "any": [
+                {
+                  "id": "color-contrast",
+                  "data": {
+                    "contrastRatio": 0,
+                    "fontSize": "10.5pt (14px)",
+                    "fontWeight": "normal",
+                    "messageKey": "bgOverlap",
+                    "expectedContrastRatio": "4.5:1"
+                  },
+                  "relatedNodes": [],
+                  "impact": "serious",
+                  "message": "Element's background color could not be determined because it is overlapped by another element"
+                }
+              ],
+              "all": [],
+              "none": [],
+              "impact": "serious",
+              "html": "<div tabindex=\"0\" role=\"combobox\" aria-expanded=\"false\" aria-haspopup=\"listbox\" aria-labelledby=\"theme-mode-label\" class=\"MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-1ehla7j\">Lyst</div>",
+              "target": [
+                "div[aria-labelledby=\"theme-mode-label\"]"
+              ],
+              "failureSummary": "Fix any of the following:\n  Element's background color could not be determined because it is overlapped by another element"
+            },
+            {
+              "any": [
+                {
+                  "id": "color-contrast",
+                  "data": {
+                    "contrastRatio": 0,
+                    "fontSize": "10.5pt (14px)",
+                    "fontWeight": "normal",
+                    "messageKey": "bgOverlap",
+                    "expectedContrastRatio": "4.5:1"
+                  },
+                  "relatedNodes": [],
+                  "impact": "serious",
+                  "message": "Element's background color could not be determined because it is overlapped by another element"
+                }
+              ],
+              "all": [],
+              "none": [],
+              "impact": "serious",
+              "html": "<div tabindex=\"0\" role=\"combobox\" aria-expanded=\"false\" aria-haspopup=\"listbox\" aria-labelledby=\"language-label\" class=\"MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-1ehla7j\">Norsk Bokmål</div>",
+              "target": [
+                "div[aria-labelledby=\"language-label\"]"
+              ],
+              "failureSummary": "Fix any of the following:\n  Element's background color could not be determined because it is overlapped by another element"
+            },
+            {
+              "any": [
+                {
+                  "id": "color-contrast",
+                  "data": {
+                    "contrastRatio": 0,
+                    "fontSize": "10.5pt (14px)",
+                    "fontWeight": "normal",
+                    "messageKey": "bgOverlap",
+                    "expectedContrastRatio": "4.5:1"
+                  },
+                  "relatedNodes": [],
+                  "impact": "serious",
+                  "message": "Element's background color could not be determined because it is overlapped by another element"
+                }
+              ],
+              "all": [],
+              "none": [],
+              "impact": "serious",
+              "html": "<div tabindex=\"0\" role=\"combobox\" aria-expanded=\"false\" aria-haspopup=\"listbox\" aria-labelledby=\"page-size-label\" class=\"MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-1ehla7j\">15</div>",
+              "target": [
+                "div[aria-labelledby=\"page-size-label\"]"
+              ],
+              "failureSummary": "Fix any of the following:\n  Element's background color could not be determined because it is overlapped by another element"
+            },
+            {
+              "any": [
+                {
+                  "id": "color-contrast",
+                  "data": {
+                    "contrastRatio": 0,
+                    "fontSize": "10.5pt (14px)",
+                    "fontWeight": "normal",
+                    "messageKey": "bgOverlap",
+                    "expectedContrastRatio": "4.5:1"
+                  },
+                  "relatedNodes": [],
+                  "impact": "serious",
+                  "message": "Element's background color could not be determined because it is overlapped by another element"
+                }
+              ],
+              "all": [],
+              "none": [],
+              "impact": "serious",
+              "html": "<input aria-invalid=\"false\" id=\"_r_1e_\" readonly=\"\" class=\"MuiInputBase-input M...\" type=\"text\" value=\"javascript:void(wind...\" style=\"\">",
+              "target": [
+                "#_r_1e_"
+              ],
+              "failureSummary": "Fix any of the following:\n  Element's background color could not be determined because it is overlapped by another element"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "rules-error-light-nb-axe",
+      "violations": [],
+      "incomplete": [
+        {
+          "id": "aria-hidden-focus",
+          "impact": "serious",
+          "tags": [
+            "cat.name-role-value",
+            "wcag2a",
+            "wcag412",
+            "TTv5",
+            "TT6.a",
+            "EN-301-549",
+            "EN-9.4.1.2",
+            "RGAAv4",
+            "RGAA-10.8.1"
+          ],
+          "description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
+          "help": "ARIA hidden element must not be focusable or contain focusable elements",
+          "helpUrl": "https://dequeuniversity.com/rules/axe/4.13/aria-hidden-focus?application=playwright",
+          "nodes": [
+            {
+              "any": [],
+              "all": [
+                {
+                  "id": "focusable-modal-open",
+                  "data": null,
+                  "relatedNodes": [
+                    {
+                      "html": "<li class=\"MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters Mui-selected MuiMenuItem-root MuiMenuItem-gutters Mui-selected css-qy8v2z\" tabindex=\"0\" role=\"option\" aria-selected=\"true\" data-value=\"1\">Oppfølging<span class=\"MuiTouchRipple-root css-4mb1j7\"></span></li>",
+                      "target": [
+                        "li[data-value=\"1\"]"
+                      ]
+                    }
+                  ],
+                  "impact": "serious",
+                  "message": "Check that focusable elements are not tabbable in the current state"
+                }
+              ],
+              "none": [],
+              "impact": "serious",
+              "html": "<div role=\"presentation\" id=\"menu-\" class=\"MuiPopover-root MuiMenu-root MuiModal-root css-lhktpd\" aria-hidden=\"true\">",
+              "target": [
+                "#menu-"
+              ],
+              "failureSummary": "Fix all of the following:\n  Check that focusable elements are not tabbable in the current state"
+            }
+          ]
+        },
+        {
+          "id": "color-contrast",
+          "impact": "serious",
+          "tags": [
+            "cat.color",
+            "wcag2aa",
+            "wcag143",
+            "TTv5",
+            "TT13.c",
+            "EN-301-549",
+            "EN-9.1.4.3",
+            "ACT",
+            "RGAAv4",
+            "RGAA-3.2.1"
+          ],
+          "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
+          "help": "Elements must meet minimum color contrast ratio thresholds",
+          "helpUrl": "https://dequeuniversity.com/rules/axe/4.13/color-contrast?application=playwright",
+          "nodes": [
+            {
+              "any": [
+                {
+                  "id": "color-contrast",
+                  "data": {
+                    "contrastRatio": 0,
+                    "fontSize": "10.5pt (14px)",
+                    "fontWeight": "normal",
+                    "messageKey": "bgOverlap",
+                    "expectedContrastRatio": "4.5:1"
+                  },
+                  "relatedNodes": [],
+                  "impact": "serious",
+                  "message": "Element's background color could not be determined because it is overlapped by another element"
+                }
+              ],
+              "all": [],
+              "none": [],
+              "impact": "serious",
+              "html": "<div tabindex=\"0\" role=\"combobox\" aria-expanded=\"false\" aria-haspopup=\"listbox\" aria-labelledby=\"settings-section-label\" class=\"MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-1ehla7j\">Oppfølging</div>",
+              "target": [
+                ".MuiSelect-select"
+              ],
+              "failureSummary": "Fix any of the following:\n  Element's background color could not be determined because it is overlapped by another element"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "notifications-error-light-nb-axe",
+      "violations": [],
+      "incomplete": [
+        {
+          "id": "color-contrast",
+          "impact": "serious",
+          "tags": [
+            "cat.color",
+            "wcag2aa",
+            "wcag143",
+            "TTv5",
+            "TT13.c",
+            "EN-301-549",
+            "EN-9.1.4.3",
+            "ACT",
+            "RGAAv4",
+            "RGAA-3.2.1"
+          ],
+          "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
+          "help": "Elements must meet minimum color contrast ratio thresholds",
+          "helpUrl": "https://dequeuniversity.com/rules/axe/4.13/color-contrast?application=playwright",
+          "nodes": [
+            {
+              "any": [
+                {
+                  "id": "color-contrast",
+                  "data": {
+                    "contrastRatio": 0,
+                    "fontSize": "10.5pt (14px)",
+                    "fontWeight": "normal",
+                    "messageKey": "bgOverlap",
+                    "expectedContrastRatio": "4.5:1"
+                  },
+                  "relatedNodes": [],
+                  "impact": "serious",
+                  "message": "Element's background color could not be determined because it is overlapped by another element"
+                }
+              ],
+              "all": [],
+              "none": [],
+              "impact": "serious",
+              "html": "<div tabindex=\"0\" role=\"combobox\" aria-expanded=\"false\" aria-haspopup=\"listbox\" aria-labelledby=\"settings-section-label\" class=\"MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-1ehla7j\">Varsler</div>",
+              "target": [
+                ".MuiSelect-select"
+              ],
+              "failureSummary": "Fix any of the following:\n  Element's background color could not be determined because it is overlapped by another element"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "backup-light-nb-axe",
+      "violations": [],
+      "incomplete": [
+        {
+          "id": "aria-hidden-focus",
+          "impact": "serious",
+          "tags": [
+            "cat.name-role-value",
+            "wcag2a",
+            "wcag412",
+            "TTv5",
+            "TT6.a",
+            "EN-301-549",
+            "EN-9.4.1.2",
+            "RGAAv4",
+            "RGAA-10.8.1"
+          ],
+          "description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
+          "help": "ARIA hidden element must not be focusable or contain focusable elements",
+          "helpUrl": "https://dequeuniversity.com/rules/axe/4.13/aria-hidden-focus?application=playwright",
+          "nodes": [
+            {
+              "any": [],
+              "all": [
+                {
+                  "id": "focusable-modal-open",
+                  "data": null,
+                  "relatedNodes": [
+                    {
+                      "html": "<li class=\"MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters Mui-selected MuiMenuItem-root MuiMenuItem-gutters Mui-selected css-qy8v2z\" tabindex=\"0\" role=\"option\" aria-selected=\"true\" data-value=\"3\">Sikkerhetskopi<span class=\"MuiTouchRipple-root css-4mb1j7\"></span></li>",
+                      "target": [
+                        "li[data-value=\"3\"]"
+                      ]
+                    }
+                  ],
+                  "impact": "serious",
+                  "message": "Check that focusable elements are not tabbable in the current state"
+                }
+              ],
+              "none": [],
+              "impact": "serious",
+              "html": "<div role=\"presentation\" id=\"menu-\" class=\"MuiPopover-root MuiMenu-root MuiModal-root css-lhktpd\" aria-hidden=\"true\">",
+              "target": [
+                "#menu-"
+              ],
+              "failureSummary": "Fix all of the following:\n  Check that focusable elements are not tabbable in the current state"
+            }
+          ]
+        },
+        {
+          "id": "color-contrast",
+          "impact": "serious",
+          "tags": [
+            "cat.color",
+            "wcag2aa",
+            "wcag143",
+            "TTv5",
+            "TT13.c",
+            "EN-301-549",
+            "EN-9.1.4.3",
+            "ACT",
+            "RGAAv4",
+            "RGAA-3.2.1"
+          ],
+          "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
+          "help": "Elements must meet minimum color contrast ratio thresholds",
+          "helpUrl": "https://dequeuniversity.com/rules/axe/4.13/color-contrast?application=playwright",
+          "nodes": [
+            {
+              "any": [
+                {
+                  "id": "color-contrast",
+                  "data": {
+                    "contrastRatio": 0,
+                    "fontSize": "10.5pt (14px)",
+                    "fontWeight": "normal",
+                    "messageKey": "bgOverlap",
+                    "expectedContrastRatio": "4.5:1"
+                  },
+                  "relatedNodes": [],
+                  "impact": "serious",
+                  "message": "Element's background color could not be determined because it is overlapped by another element"
+                }
+              ],
+              "all": [],
+              "none": [],
+              "impact": "serious",
+              "html": "<div tabindex=\"0\" role=\"combobox\" aria-expanded=\"false\" aria-haspopup=\"listbox\" aria-labelledby=\"settings-section-label\" class=\"MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-1ehla7j\">Sikkerhetskopi</div>",
+              "target": [
+                ".MuiSelect-select"
+              ],
+              "failureSummary": "Fix any of the following:\n  Element's background color could not be determined because it is overlapped by another element"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "general-dark-en-axe",
+      "violations": [],
+      "incomplete": [
+        {
+          "id": "color-contrast",
+          "impact": "serious",
+          "tags": [
+            "cat.color",
+            "wcag2aa",
+            "wcag143",
+            "TTv5",
+            "TT13.c",
+            "EN-301-549",
+            "EN-9.1.4.3",
+            "ACT",
+            "RGAAv4",
+            "RGAA-3.2.1"
+          ],
+          "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
+          "help": "Elements must meet minimum color contrast ratio thresholds",
+          "helpUrl": "https://dequeuniversity.com/rules/axe/4.13/color-contrast?application=playwright",
+          "nodes": [
+            {
+              "any": [
+                {
+                  "id": "color-contrast",
+                  "data": {
+                    "contrastRatio": 0,
+                    "fontSize": "10.5pt (14px)",
+                    "fontWeight": "normal",
+                    "messageKey": "bgOverlap",
+                    "expectedContrastRatio": "4.5:1"
+                  },
+                  "relatedNodes": [],
+                  "impact": "serious",
+                  "message": "Element's background color could not be determined because it is overlapped by another element"
+                }
+              ],
+              "all": [],
+              "none": [],
+              "impact": "serious",
+              "html": "<div tabindex=\"0\" role=\"combobox\" aria-expanded=\"false\" aria-haspopup=\"listbox\" aria-labelledby=\"theme-mode-label\" class=\"MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-1ehla7j\">Dark</div>",
+              "target": [
+                "div[aria-labelledby=\"theme-mode-label\"]"
+              ],
+              "failureSummary": "Fix any of the following:\n  Element's background color could not be determined because it is overlapped by another element"
+            },
+            {
+              "any": [
+                {
+                  "id": "color-contrast",
+                  "data": {
+                    "contrastRatio": 0,
+                    "fontSize": "10.5pt (14px)",
+                    "fontWeight": "normal",
+                    "messageKey": "bgOverlap",
+                    "expectedContrastRatio": "4.5:1"
+                  },
+                  "relatedNodes": [],
+                  "impact": "serious",
+                  "message": "Element's background color could not be determined because it is overlapped by another element"
+                }
+              ],
+              "all": [],
+              "none": [],
+              "impact": "serious",
+              "html": "<div tabindex=\"0\" role=\"combobox\" aria-expanded=\"false\" aria-haspopup=\"listbox\" aria-labelledby=\"language-label\" class=\"MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-1ehla7j\">English</div>",
+              "target": [
+                "div[aria-labelledby=\"language-label\"]"
+              ],
+              "failureSummary": "Fix any of the following:\n  Element's background color could not be determined because it is overlapped by another element"
+            },
+            {
+              "any": [
+                {
+                  "id": "color-contrast",
+                  "data": {
+                    "contrastRatio": 0,
+                    "fontSize": "10.5pt (14px)",
+                    "fontWeight": "normal",
+                    "messageKey": "bgOverlap",
+                    "expectedContrastRatio": "4.5:1"
+                  },
+                  "relatedNodes": [],
+                  "impact": "serious",
+                  "message": "Element's background color could not be determined because it is overlapped by another element"
+                }
+              ],
+              "all": [],
+              "none": [],
+              "impact": "serious",
+              "html": "<div tabindex=\"0\" role=\"combobox\" aria-expanded=\"false\" aria-haspopup=\"listbox\" aria-labelledby=\"page-size-label\" class=\"MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-1ehla7j\">15</div>",
+              "target": [
+                "div[aria-labelledby=\"page-size-label\"]"
+              ],
+              "failureSummary": "Fix any of the following:\n  Element's background color could not be determined because it is overlapped by another element"
+            },
+            {
+              "any": [
+                {
+                  "id": "color-contrast",
+                  "data": {
+                    "contrastRatio": 0,
+                    "fontSize": "10.5pt (14px)",
+                    "fontWeight": "normal",
+                    "messageKey": "bgOverlap",
+                    "expectedContrastRatio": "4.5:1"
+                  },
+                  "relatedNodes": [],
+                  "impact": "serious",
+                  "message": "Element's background color could not be determined because it is overlapped by another element"
+                }
+              ],
+              "all": [],
+              "none": [],
+              "impact": "serious",
+              "html": "<input aria-invalid=\"false\" id=\"_r_1e_\" readonly=\"\" class=\"MuiInputBase-input M...\" type=\"text\" value=\"javascript:void(wind...\">",
+              "target": [
+                "#_r_1e_"
+              ],
+              "failureSummary": "Fix any of the following:\n  Element's background color could not be determined because it is overlapped by another element"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "phone-dark-en-axe",
+      "violations": [],
+      "incomplete": [
+        {
+          "id": "color-contrast",
+          "impact": "serious",
+          "tags": [
+            "cat.color",
+            "wcag2aa",
+            "wcag143",
+            "TTv5",
+            "TT13.c",
+            "EN-301-549",
+            "EN-9.1.4.3",
+            "ACT",
+            "RGAAv4",
+            "RGAA-3.2.1"
+          ],
+          "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
+          "help": "Elements must meet minimum color contrast ratio thresholds",
+          "helpUrl": "https://dequeuniversity.com/rules/axe/4.13/color-contrast?application=playwright",
+          "nodes": [
+            {
+              "any": [
+                {
+                  "id": "color-contrast",
+                  "data": {
+                    "contrastRatio": 0,
+                    "fontSize": "10.5pt (14px)",
+                    "fontWeight": "normal",
+                    "messageKey": "bgOverlap",
+                    "expectedContrastRatio": "4.5:1"
+                  },
+                  "relatedNodes": [],
+                  "impact": "serious",
+                  "message": "Element's background color could not be determined because it is overlapped by another element"
+                }
+              ],
+              "all": [],
+              "none": [],
+              "impact": "serious",
+              "html": "<div tabindex=\"0\" role=\"combobox\" aria-expanded=\"false\" aria-haspopup=\"listbox\" aria-labelledby=\"settings-section-label\" class=\"MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-1ehla7j\">General</div>",
+              "target": [
+                "div[aria-labelledby=\"settings-section-label\"]"
+              ],
+              "failureSummary": "Fix any of the following:\n  Element's background color could not be determined because it is overlapped by another element"
+            },
+            {
+              "any": [
+                {
+                  "id": "color-contrast",
+                  "data": {
+                    "contrastRatio": 0,
+                    "fontSize": "10.5pt (14px)",
+                    "fontWeight": "normal",
+                    "messageKey": "bgOverlap",
+                    "expectedContrastRatio": "4.5:1"
+                  },
+                  "relatedNodes": [],
+                  "impact": "serious",
+                  "message": "Element's background color could not be determined because it is overlapped by another element"
+                }
+              ],
+              "all": [],
+              "none": [],
+              "impact": "serious",
+              "html": "<div tabindex=\"0\" role=\"combobox\" aria-expanded=\"false\" aria-haspopup=\"listbox\" aria-labelledby=\"theme-mode-label\" class=\"MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-1ehla7j\">Dark</div>",
+              "target": [
+                "div[aria-labelledby=\"theme-mode-label\"]"
+              ],
+              "failureSummary": "Fix any of the following:\n  Element's background color could not be determined because it is overlapped by another element"
+            },
+            {
+              "any": [
+                {
+                  "id": "color-contrast",
+                  "data": {
+                    "contrastRatio": 0,
+                    "fontSize": "10.5pt (14px)",
+                    "fontWeight": "normal",
+                    "messageKey": "bgOverlap",
+                    "expectedContrastRatio": "4.5:1"
+                  },
+                  "relatedNodes": [],
+                  "impact": "serious",
+                  "message": "Element's background color could not be determined because it is overlapped by another element"
+                }
+              ],
+              "all": [],
+              "none": [],
+              "impact": "serious",
+              "html": "<div tabindex=\"0\" role=\"combobox\" aria-expanded=\"false\" aria-haspopup=\"listbox\" aria-labelledby=\"language-label\" class=\"MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-1ehla7j\">English</div>",
+              "target": [
+                "div[aria-labelledby=\"language-label\"]"
+              ],
+              "failureSummary": "Fix any of the following:\n  Element's background color could not be determined because it is overlapped by another element"
+            },
+            {
+              "any": [
+                {
+                  "id": "color-contrast",
+                  "data": {
+                    "contrastRatio": 0,
+                    "fontSize": "10.5pt (14px)",
+                    "fontWeight": "normal",
+                    "messageKey": "bgOverlap",
+                    "expectedContrastRatio": "4.5:1"
+                  },
+                  "relatedNodes": [],
+                  "impact": "serious",
+                  "message": "Element's background color could not be determined because it is overlapped by another element"
+                }
+              ],
+              "all": [],
+              "none": [],
+              "impact": "serious",
+              "html": "<div tabindex=\"0\" role=\"combobox\" aria-expanded=\"false\" aria-haspopup=\"listbox\" aria-labelledby=\"page-size-label\" class=\"MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-1ehla7j\">15</div>",
+              "target": [
+                "div[aria-labelledby=\"page-size-label\"]"
+              ],
+              "failureSummary": "Fix any of the following:\n  Element's background color could not be determined because it is overlapped by another element"
+            },
+            {
+              "any": [
+                {
+                  "id": "color-contrast",
+                  "data": {
+                    "contrastRatio": 0,
+                    "fontSize": "10.5pt (14px)",
+                    "fontWeight": "normal",
+                    "messageKey": "bgOverlap",
+                    "expectedContrastRatio": "4.5:1"
+                  },
+                  "relatedNodes": [],
+                  "impact": "serious",
+                  "message": "Element's background color could not be determined because it is overlapped by another element"
+                }
+              ],
+              "all": [],
+              "none": [],
+              "impact": "serious",
+              "html": "<input aria-invalid=\"false\" id=\"_r_1e_\" readonly=\"\" class=\"MuiInputBase-input M...\" type=\"text\" value=\"javascript:void(wind...\" style=\"\">",
+              "target": [
+                "#_r_1e_"
+              ],
+              "failureSummary": "Fix any of the following:\n  Element's background color could not be determined because it is overlapped by another element"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "rules-error-dark-en-axe",
+      "violations": [],
+      "incomplete": [
+        {
+          "id": "aria-hidden-focus",
+          "impact": "serious",
+          "tags": [
+            "cat.name-role-value",
+            "wcag2a",
+            "wcag412",
+            "TTv5",
+            "TT6.a",
+            "EN-301-549",
+            "EN-9.4.1.2",
+            "RGAAv4",
+            "RGAA-10.8.1"
+          ],
+          "description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
+          "help": "ARIA hidden element must not be focusable or contain focusable elements",
+          "helpUrl": "https://dequeuniversity.com/rules/axe/4.13/aria-hidden-focus?application=playwright",
+          "nodes": [
+            {
+              "any": [],
+              "all": [
+                {
+                  "id": "focusable-modal-open",
+                  "data": null,
+                  "relatedNodes": [
+                    {
+                      "html": "<li class=\"MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters Mui-selected MuiMenuItem-root MuiMenuItem-gutters Mui-selected css-qy8v2z\" tabindex=\"0\" role=\"option\" aria-selected=\"true\" data-value=\"1\">Follow-ups<span class=\"MuiTouchRipple-root css-4mb1j7\"></span></li>",
+                      "target": [
+                        "li[data-value=\"1\"]"
+                      ]
+                    }
+                  ],
+                  "impact": "serious",
+                  "message": "Check that focusable elements are not tabbable in the current state"
+                }
+              ],
+              "none": [],
+              "impact": "serious",
+              "html": "<div role=\"presentation\" id=\"menu-\" class=\"MuiPopover-root MuiMenu-root MuiModal-root css-lhktpd\" aria-hidden=\"true\">",
+              "target": [
+                "#menu-"
+              ],
+              "failureSummary": "Fix all of the following:\n  Check that focusable elements are not tabbable in the current state"
+            }
+          ]
+        },
+        {
+          "id": "color-contrast",
+          "impact": "serious",
+          "tags": [
+            "cat.color",
+            "wcag2aa",
+            "wcag143",
+            "TTv5",
+            "TT13.c",
+            "EN-301-549",
+            "EN-9.1.4.3",
+            "ACT",
+            "RGAAv4",
+            "RGAA-3.2.1"
+          ],
+          "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
+          "help": "Elements must meet minimum color contrast ratio thresholds",
+          "helpUrl": "https://dequeuniversity.com/rules/axe/4.13/color-contrast?application=playwright",
+          "nodes": [
+            {
+              "any": [
+                {
+                  "id": "color-contrast",
+                  "data": {
+                    "contrastRatio": 0,
+                    "fontSize": "10.5pt (14px)",
+                    "fontWeight": "normal",
+                    "messageKey": "bgOverlap",
+                    "expectedContrastRatio": "4.5:1"
+                  },
+                  "relatedNodes": [],
+                  "impact": "serious",
+                  "message": "Element's background color could not be determined because it is overlapped by another element"
+                }
+              ],
+              "all": [],
+              "none": [],
+              "impact": "serious",
+              "html": "<div tabindex=\"0\" role=\"combobox\" aria-expanded=\"false\" aria-haspopup=\"listbox\" aria-labelledby=\"settings-section-label\" class=\"MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-1ehla7j\">Follow-ups</div>",
+              "target": [
+                ".MuiSelect-select"
+              ],
+              "failureSummary": "Fix any of the following:\n  Element's background color could not be determined because it is overlapped by another element"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "notifications-error-dark-en-axe",
+      "violations": [],
+      "incomplete": [
+        {
+          "id": "color-contrast",
+          "impact": "serious",
+          "tags": [
+            "cat.color",
+            "wcag2aa",
+            "wcag143",
+            "TTv5",
+            "TT13.c",
+            "EN-301-549",
+            "EN-9.1.4.3",
+            "ACT",
+            "RGAAv4",
+            "RGAA-3.2.1"
+          ],
+          "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
+          "help": "Elements must meet minimum color contrast ratio thresholds",
+          "helpUrl": "https://dequeuniversity.com/rules/axe/4.13/color-contrast?application=playwright",
+          "nodes": [
+            {
+              "any": [
+                {
+                  "id": "color-contrast",
+                  "data": {
+                    "contrastRatio": 0,
+                    "fontSize": "10.5pt (14px)",
+                    "fontWeight": "normal",
+                    "messageKey": "bgOverlap",
+                    "expectedContrastRatio": "4.5:1"
+                  },
+                  "relatedNodes": [],
+                  "impact": "serious",
+                  "message": "Element's background color could not be determined because it is overlapped by another element"
+                }
+              ],
+              "all": [],
+              "none": [],
+              "impact": "serious",
+              "html": "<div tabindex=\"0\" role=\"combobox\" aria-expanded=\"false\" aria-haspopup=\"listbox\" aria-labelledby=\"settings-section-label\" class=\"MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-1ehla7j\">Notifications</div>",
+              "target": [
+                ".MuiSelect-select"
+              ],
+              "failureSummary": "Fix any of the following:\n  Element's background color could not be determined because it is overlapped by another element"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "backup-dark-en-axe",
+      "violations": [],
+      "incomplete": [
+        {
+          "id": "aria-hidden-focus",
+          "impact": "serious",
+          "tags": [
+            "cat.name-role-value",
+            "wcag2a",
+            "wcag412",
+            "TTv5",
+            "TT6.a",
+            "EN-301-549",
+            "EN-9.4.1.2",
+            "RGAAv4",
+            "RGAA-10.8.1"
+          ],
+          "description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
+          "help": "ARIA hidden element must not be focusable or contain focusable elements",
+          "helpUrl": "https://dequeuniversity.com/rules/axe/4.13/aria-hidden-focus?application=playwright",
+          "nodes": [
+            {
+              "any": [],
+              "all": [
+                {
+                  "id": "focusable-modal-open",
+                  "data": null,
+                  "relatedNodes": [
+                    {
+                      "html": "<li class=\"MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters Mui-selected MuiMenuItem-root MuiMenuItem-gutters Mui-selected css-qy8v2z\" tabindex=\"0\" role=\"option\" aria-selected=\"true\" data-value=\"3\">Backup<span class=\"MuiTouchRipple-root css-4mb1j7\"></span></li>",
+                      "target": [
+                        "li[data-value=\"3\"]"
+                      ]
+                    }
+                  ],
+                  "impact": "serious",
+                  "message": "Check that focusable elements are not tabbable in the current state"
+                }
+              ],
+              "none": [],
+              "impact": "serious",
+              "html": "<div role=\"presentation\" id=\"menu-\" class=\"MuiPopover-root MuiMenu-root MuiModal-root css-lhktpd\" aria-hidden=\"true\">",
+              "target": [
+                "#menu-"
+              ],
+              "failureSummary": "Fix all of the following:\n  Check that focusable elements are not tabbable in the current state"
+            }
+          ]
+        },
+        {
+          "id": "color-contrast",
+          "impact": "serious",
+          "tags": [
+            "cat.color",
+            "wcag2aa",
+            "wcag143",
+            "TTv5",
+            "TT13.c",
+            "EN-301-549",
+            "EN-9.1.4.3",
+            "ACT",
+            "RGAAv4",
+            "RGAA-3.2.1"
+          ],
+          "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
+          "help": "Elements must meet minimum color contrast ratio thresholds",
+          "helpUrl": "https://dequeuniversity.com/rules/axe/4.13/color-contrast?application=playwright",
+          "nodes": [
+            {
+              "any": [
+                {
+                  "id": "color-contrast",
+                  "data": {
+                    "contrastRatio": 0,
+                    "fontSize": "10.5pt (14px)",
+                    "fontWeight": "normal",
+                    "messageKey": "bgOverlap",
+                    "expectedContrastRatio": "4.5:1"
+                  },
+                  "relatedNodes": [],
+                  "impact": "serious",
+                  "message": "Element's background color could not be determined because it is overlapped by another element"
+                }
+              ],
+              "all": [],
+              "none": [],
+              "impact": "serious",
+              "html": "<div tabindex=\"0\" role=\"combobox\" aria-expanded=\"false\" aria-haspopup=\"listbox\" aria-labelledby=\"settings-section-label\" class=\"MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-1ehla7j\">Backup</div>",
+              "target": [
+                ".MuiSelect-select"
+              ],
+              "failureSummary": "Fix any of the following:\n  Element's background color could not be determined because it is overlapped by another element"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "general-dark-nb-axe",
+      "violations": [],
+      "incomplete": [
+        {
+          "id": "color-contrast",
+          "impact": "serious",
+          "tags": [
+            "cat.color",
+            "wcag2aa",
+            "wcag143",
+            "TTv5",
+            "TT13.c",
+            "EN-301-549",
+            "EN-9.1.4.3",
+            "ACT",
+            "RGAAv4",
+            "RGAA-3.2.1"
+          ],
+          "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
+          "help": "Elements must meet minimum color contrast ratio thresholds",
+          "helpUrl": "https://dequeuniversity.com/rules/axe/4.13/color-contrast?application=playwright",
+          "nodes": [
+            {
+              "any": [
+                {
+                  "id": "color-contrast",
+                  "data": {
+                    "contrastRatio": 0,
+                    "fontSize": "10.5pt (14px)",
+                    "fontWeight": "normal",
+                    "messageKey": "bgOverlap",
+                    "expectedContrastRatio": "4.5:1"
+                  },
+                  "relatedNodes": [],
+                  "impact": "serious",
+                  "message": "Element's background color could not be determined because it is overlapped by another element"
+                }
+              ],
+              "all": [],
+              "none": [],
+              "impact": "serious",
+              "html": "<div tabindex=\"0\" role=\"combobox\" aria-expanded=\"false\" aria-haspopup=\"listbox\" aria-labelledby=\"theme-mode-label\" class=\"MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-1ehla7j\">Mørkt</div>",
+              "target": [
+                "div[aria-labelledby=\"theme-mode-label\"]"
+              ],
+              "failureSummary": "Fix any of the following:\n  Element's background color could not be determined because it is overlapped by another element"
+            },
+            {
+              "any": [
+                {
+                  "id": "color-contrast",
+                  "data": {
+                    "contrastRatio": 0,
+                    "fontSize": "10.5pt (14px)",
+                    "fontWeight": "normal",
+                    "messageKey": "bgOverlap",
+                    "expectedContrastRatio": "4.5:1"
+                  },
+                  "relatedNodes": [],
+                  "impact": "serious",
+                  "message": "Element's background color could not be determined because it is overlapped by another element"
+                }
+              ],
+              "all": [],
+              "none": [],
+              "impact": "serious",
+              "html": "<div tabindex=\"0\" role=\"combobox\" aria-expanded=\"false\" aria-haspopup=\"listbox\" aria-labelledby=\"language-label\" class=\"MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-1ehla7j\">Norsk Bokmål</div>",
+              "target": [
+                "div[aria-labelledby=\"language-label\"]"
+              ],
+              "failureSummary": "Fix any of the following:\n  Element's background color could not be determined because it is overlapped by another element"
+            },
+            {
+              "any": [
+                {
+                  "id": "color-contrast",
+                  "data": {
+                    "contrastRatio": 0,
+                    "fontSize": "10.5pt (14px)",
+                    "fontWeight": "normal",
+                    "messageKey": "bgOverlap",
+                    "expectedContrastRatio": "4.5:1"
+                  },
+                  "relatedNodes": [],
+                  "impact": "serious",
+                  "message": "Element's background color could not be determined because it is overlapped by another element"
+                }
+              ],
+              "all": [],
+              "none": [],
+              "impact": "serious",
+              "html": "<div tabindex=\"0\" role=\"combobox\" aria-expanded=\"false\" aria-haspopup=\"listbox\" aria-labelledby=\"page-size-label\" class=\"MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-1ehla7j\">15</div>",
+              "target": [
+                "div[aria-labelledby=\"page-size-label\"]"
+              ],
+              "failureSummary": "Fix any of the following:\n  Element's background color could not be determined because it is overlapped by another element"
+            },
+            {
+              "any": [
+                {
+                  "id": "color-contrast",
+                  "data": {
+                    "contrastRatio": 0,
+                    "fontSize": "10.5pt (14px)",
+                    "fontWeight": "normal",
+                    "messageKey": "bgOverlap",
+                    "expectedContrastRatio": "4.5:1"
+                  },
+                  "relatedNodes": [],
+                  "impact": "serious",
+                  "message": "Element's background color could not be determined because it is overlapped by another element"
+                }
+              ],
+              "all": [],
+              "none": [],
+              "impact": "serious",
+              "html": "<input aria-invalid=\"false\" id=\"_r_1e_\" readonly=\"\" class=\"MuiInputBase-input M...\" type=\"text\" value=\"javascript:void(wind...\">",
+              "target": [
+                "#_r_1e_"
+              ],
+              "failureSummary": "Fix any of the following:\n  Element's background color could not be determined because it is overlapped by another element"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "phone-dark-nb-axe",
+      "violations": [],
+      "incomplete": [
+        {
+          "id": "color-contrast",
+          "impact": "serious",
+          "tags": [
+            "cat.color",
+            "wcag2aa",
+            "wcag143",
+            "TTv5",
+            "TT13.c",
+            "EN-301-549",
+            "EN-9.1.4.3",
+            "ACT",
+            "RGAAv4",
+            "RGAA-3.2.1"
+          ],
+          "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
+          "help": "Elements must meet minimum color contrast ratio thresholds",
+          "helpUrl": "https://dequeuniversity.com/rules/axe/4.13/color-contrast?application=playwright",
+          "nodes": [
+            {
+              "any": [
+                {
+                  "id": "color-contrast",
+                  "data": {
+                    "contrastRatio": 0,
+                    "fontSize": "10.5pt (14px)",
+                    "fontWeight": "normal",
+                    "messageKey": "bgOverlap",
+                    "expectedContrastRatio": "4.5:1"
+                  },
+                  "relatedNodes": [],
+                  "impact": "serious",
+                  "message": "Element's background color could not be determined because it is overlapped by another element"
+                }
+              ],
+              "all": [],
+              "none": [],
+              "impact": "serious",
+              "html": "<div tabindex=\"0\" role=\"combobox\" aria-expanded=\"false\" aria-haspopup=\"listbox\" aria-labelledby=\"settings-section-label\" class=\"MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-1ehla7j\">Generelt</div>",
+              "target": [
+                "div[aria-labelledby=\"settings-section-label\"]"
+              ],
+              "failureSummary": "Fix any of the following:\n  Element's background color could not be determined because it is overlapped by another element"
+            },
+            {
+              "any": [
+                {
+                  "id": "color-contrast",
+                  "data": {
+                    "contrastRatio": 0,
+                    "fontSize": "10.5pt (14px)",
+                    "fontWeight": "normal",
+                    "messageKey": "bgOverlap",
+                    "expectedContrastRatio": "4.5:1"
+                  },
+                  "relatedNodes": [],
+                  "impact": "serious",
+                  "message": "Element's background color could not be determined because it is overlapped by another element"
+                }
+              ],
+              "all": [],
+              "none": [],
+              "impact": "serious",
+              "html": "<div tabindex=\"0\" role=\"combobox\" aria-expanded=\"false\" aria-haspopup=\"listbox\" aria-labelledby=\"theme-mode-label\" class=\"MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-1ehla7j\">Mørkt</div>",
+              "target": [
+                "div[aria-labelledby=\"theme-mode-label\"]"
+              ],
+              "failureSummary": "Fix any of the following:\n  Element's background color could not be determined because it is overlapped by another element"
+            },
+            {
+              "any": [
+                {
+                  "id": "color-contrast",
+                  "data": {
+                    "contrastRatio": 0,
+                    "fontSize": "10.5pt (14px)",
+                    "fontWeight": "normal",
+                    "messageKey": "bgOverlap",
+                    "expectedContrastRatio": "4.5:1"
+                  },
+                  "relatedNodes": [],
+                  "impact": "serious",
+                  "message": "Element's background color could not be determined because it is overlapped by another element"
+                }
+              ],
+              "all": [],
+              "none": [],
+              "impact": "serious",
+              "html": "<div tabindex=\"0\" role=\"combobox\" aria-expanded=\"false\" aria-haspopup=\"listbox\" aria-labelledby=\"language-label\" class=\"MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-1ehla7j\">Norsk Bokmål</div>",
+              "target": [
+                "div[aria-labelledby=\"language-label\"]"
+              ],
+              "failureSummary": "Fix any of the following:\n  Element's background color could not be determined because it is overlapped by another element"
+            },
+            {
+              "any": [
+                {
+                  "id": "color-contrast",
+                  "data": {
+                    "contrastRatio": 0,
+                    "fontSize": "10.5pt (14px)",
+                    "fontWeight": "normal",
+                    "messageKey": "bgOverlap",
+                    "expectedContrastRatio": "4.5:1"
+                  },
+                  "relatedNodes": [],
+                  "impact": "serious",
+                  "message": "Element's background color could not be determined because it is overlapped by another element"
+                }
+              ],
+              "all": [],
+              "none": [],
+              "impact": "serious",
+              "html": "<div tabindex=\"0\" role=\"combobox\" aria-expanded=\"false\" aria-haspopup=\"listbox\" aria-labelledby=\"page-size-label\" class=\"MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-1ehla7j\">15</div>",
+              "target": [
+                "div[aria-labelledby=\"page-size-label\"]"
+              ],
+              "failureSummary": "Fix any of the following:\n  Element's background color could not be determined because it is overlapped by another element"
+            },
+            {
+              "any": [
+                {
+                  "id": "color-contrast",
+                  "data": {
+                    "contrastRatio": 0,
+                    "fontSize": "10.5pt (14px)",
+                    "fontWeight": "normal",
+                    "messageKey": "bgOverlap",
+                    "expectedContrastRatio": "4.5:1"
+                  },
+                  "relatedNodes": [],
+                  "impact": "serious",
+                  "message": "Element's background color could not be determined because it is overlapped by another element"
+                }
+              ],
+              "all": [],
+              "none": [],
+              "impact": "serious",
+              "html": "<input aria-invalid=\"false\" id=\"_r_1e_\" readonly=\"\" class=\"MuiInputBase-input M...\" type=\"text\" value=\"javascript:void(wind...\" style=\"\">",
+              "target": [
+                "#_r_1e_"
+              ],
+              "failureSummary": "Fix any of the following:\n  Element's background color could not be determined because it is overlapped by another element"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "rules-error-dark-nb-axe",
+      "violations": [],
+      "incomplete": [
+        {
+          "id": "aria-hidden-focus",
+          "impact": "serious",
+          "tags": [
+            "cat.name-role-value",
+            "wcag2a",
+            "wcag412",
+            "TTv5",
+            "TT6.a",
+            "EN-301-549",
+            "EN-9.4.1.2",
+            "RGAAv4",
+            "RGAA-10.8.1"
+          ],
+          "description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
+          "help": "ARIA hidden element must not be focusable or contain focusable elements",
+          "helpUrl": "https://dequeuniversity.com/rules/axe/4.13/aria-hidden-focus?application=playwright",
+          "nodes": [
+            {
+              "any": [],
+              "all": [
+                {
+                  "id": "focusable-modal-open",
+                  "data": null,
+                  "relatedNodes": [
+                    {
+                      "html": "<li class=\"MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters Mui-selected MuiMenuItem-root MuiMenuItem-gutters Mui-selected css-qy8v2z\" tabindex=\"0\" role=\"option\" aria-selected=\"true\" data-value=\"1\">Oppfølging<span class=\"MuiTouchRipple-root css-4mb1j7\"></span></li>",
+                      "target": [
+                        "li[data-value=\"1\"]"
+                      ]
+                    }
+                  ],
+                  "impact": "serious",
+                  "message": "Check that focusable elements are not tabbable in the current state"
+                }
+              ],
+              "none": [],
+              "impact": "serious",
+              "html": "<div role=\"presentation\" id=\"menu-\" class=\"MuiPopover-root MuiMenu-root MuiModal-root css-lhktpd\" aria-hidden=\"true\">",
+              "target": [
+                "#menu-"
+              ],
+              "failureSummary": "Fix all of the following:\n  Check that focusable elements are not tabbable in the current state"
+            }
+          ]
+        },
+        {
+          "id": "color-contrast",
+          "impact": "serious",
+          "tags": [
+            "cat.color",
+            "wcag2aa",
+            "wcag143",
+            "TTv5",
+            "TT13.c",
+            "EN-301-549",
+            "EN-9.1.4.3",
+            "ACT",
+            "RGAAv4",
+            "RGAA-3.2.1"
+          ],
+          "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
+          "help": "Elements must meet minimum color contrast ratio thresholds",
+          "helpUrl": "https://dequeuniversity.com/rules/axe/4.13/color-contrast?application=playwright",
+          "nodes": [
+            {
+              "any": [
+                {
+                  "id": "color-contrast",
+                  "data": {
+                    "contrastRatio": 0,
+                    "fontSize": "10.5pt (14px)",
+                    "fontWeight": "normal",
+                    "messageKey": "bgOverlap",
+                    "expectedContrastRatio": "4.5:1"
+                  },
+                  "relatedNodes": [],
+                  "impact": "serious",
+                  "message": "Element's background color could not be determined because it is overlapped by another element"
+                }
+              ],
+              "all": [],
+              "none": [],
+              "impact": "serious",
+              "html": "<div tabindex=\"0\" role=\"combobox\" aria-expanded=\"false\" aria-haspopup=\"listbox\" aria-labelledby=\"settings-section-label\" class=\"MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-1ehla7j\">Oppfølging</div>",
+              "target": [
+                ".MuiSelect-select"
+              ],
+              "failureSummary": "Fix any of the following:\n  Element's background color could not be determined because it is overlapped by another element"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "notifications-error-dark-nb-axe",
+      "violations": [],
+      "incomplete": [
+        {
+          "id": "color-contrast",
+          "impact": "serious",
+          "tags": [
+            "cat.color",
+            "wcag2aa",
+            "wcag143",
+            "TTv5",
+            "TT13.c",
+            "EN-301-549",
+            "EN-9.1.4.3",
+            "ACT",
+            "RGAAv4",
+            "RGAA-3.2.1"
+          ],
+          "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
+          "help": "Elements must meet minimum color contrast ratio thresholds",
+          "helpUrl": "https://dequeuniversity.com/rules/axe/4.13/color-contrast?application=playwright",
+          "nodes": [
+            {
+              "any": [
+                {
+                  "id": "color-contrast",
+                  "data": {
+                    "contrastRatio": 0,
+                    "fontSize": "10.5pt (14px)",
+                    "fontWeight": "normal",
+                    "messageKey": "bgOverlap",
+                    "expectedContrastRatio": "4.5:1"
+                  },
+                  "relatedNodes": [],
+                  "impact": "serious",
+                  "message": "Element's background color could not be determined because it is overlapped by another element"
+                }
+              ],
+              "all": [],
+              "none": [],
+              "impact": "serious",
+              "html": "<div tabindex=\"0\" role=\"combobox\" aria-expanded=\"false\" aria-haspopup=\"listbox\" aria-labelledby=\"settings-section-label\" class=\"MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-1ehla7j\">Varsler</div>",
+              "target": [
+                ".MuiSelect-select"
+              ],
+              "failureSummary": "Fix any of the following:\n  Element's background color could not be determined because it is overlapped by another element"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "backup-dark-nb-axe",
+      "violations": [],
+      "incomplete": [
+        {
+          "id": "aria-hidden-focus",
+          "impact": "serious",
+          "tags": [
+            "cat.name-role-value",
+            "wcag2a",
+            "wcag412",
+            "TTv5",
+            "TT6.a",
+            "EN-301-549",
+            "EN-9.4.1.2",
+            "RGAAv4",
+            "RGAA-10.8.1"
+          ],
+          "description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
+          "help": "ARIA hidden element must not be focusable or contain focusable elements",
+          "helpUrl": "https://dequeuniversity.com/rules/axe/4.13/aria-hidden-focus?application=playwright",
+          "nodes": [
+            {
+              "any": [],
+              "all": [
+                {
+                  "id": "focusable-modal-open",
+                  "data": null,
+                  "relatedNodes": [
+                    {
+                      "html": "<li class=\"MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters Mui-selected MuiMenuItem-root MuiMenuItem-gutters Mui-selected css-qy8v2z\" tabindex=\"0\" role=\"option\" aria-selected=\"true\" data-value=\"3\">Sikkerhetskopi<span class=\"MuiTouchRipple-root css-4mb1j7\"></span></li>",
+                      "target": [
+                        "li[data-value=\"3\"]"
+                      ]
+                    }
+                  ],
+                  "impact": "serious",
+                  "message": "Check that focusable elements are not tabbable in the current state"
+                }
+              ],
+              "none": [],
+              "impact": "serious",
+              "html": "<div role=\"presentation\" id=\"menu-\" class=\"MuiPopover-root MuiMenu-root MuiModal-root css-lhktpd\" aria-hidden=\"true\">",
+              "target": [
+                "#menu-"
+              ],
+              "failureSummary": "Fix all of the following:\n  Check that focusable elements are not tabbable in the current state"
+            }
+          ]
+        },
+        {
+          "id": "color-contrast",
+          "impact": "serious",
+          "tags": [
+            "cat.color",
+            "wcag2aa",
+            "wcag143",
+            "TTv5",
+            "TT13.c",
+            "EN-301-549",
+            "EN-9.1.4.3",
+            "ACT",
+            "RGAAv4",
+            "RGAA-3.2.1"
+          ],
+          "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
+          "help": "Elements must meet minimum color contrast ratio thresholds",
+          "helpUrl": "https://dequeuniversity.com/rules/axe/4.13/color-contrast?application=playwright",
+          "nodes": [
+            {
+              "any": [
+                {
+                  "id": "color-contrast",
+                  "data": {
+                    "contrastRatio": 0,
+                    "fontSize": "10.5pt (14px)",
+                    "fontWeight": "normal",
+                    "messageKey": "bgOverlap",
+                    "expectedContrastRatio": "4.5:1"
+                  },
+                  "relatedNodes": [],
+                  "impact": "serious",
+                  "message": "Element's background color could not be determined because it is overlapped by another element"
+                }
+              ],
+              "all": [],
+              "none": [],
+              "impact": "serious",
+              "html": "<div tabindex=\"0\" role=\"combobox\" aria-expanded=\"false\" aria-haspopup=\"listbox\" aria-labelledby=\"settings-section-label\" class=\"MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-1ehla7j\">Sikkerhetskopi</div>",
+              "target": [
+                ".MuiSelect-select"
+              ],
+              "failureSummary": "Fix any of the following:\n  Element's background color could not be determined because it is overlapped by another element"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
diff --git a/docs/redesign/phase-4/p4-04/visual/backup-dark-en.png b/docs/redesign/phase-4/p4-04/visual/backup-dark-en.png
new file mode 100644
index 0000000..b0ffc11
Binary files /dev/null and b/docs/redesign/phase-4/p4-04/visual/backup-dark-en.png differ
diff --git a/docs/redesign/phase-4/p4-04/visual/backup-dark-nb.png b/docs/redesign/phase-4/p4-04/visual/backup-dark-nb.png
new file mode 100644
index 0000000..5a1da3d
Binary files /dev/null and b/docs/redesign/phase-4/p4-04/visual/backup-dark-nb.png differ
diff --git a/docs/redesign/phase-4/p4-04/visual/backup-light-en.png b/docs/redesign/phase-4/p4-04/visual/backup-light-en.png
new file mode 100644
index 0000000..4a455c5
Binary files /dev/null and b/docs/redesign/phase-4/p4-04/visual/backup-light-en.png differ
diff --git a/docs/redesign/phase-4/p4-04/visual/backup-light-nb.png b/docs/redesign/phase-4/p4-04/visual/backup-light-nb.png
new file mode 100644
index 0000000..0a3c2f8
Binary files /dev/null and b/docs/redesign/phase-4/p4-04/visual/backup-light-nb.png differ
diff --git a/docs/redesign/phase-4/p4-04/visual/connected-action-dark-en.png b/docs/redesign/phase-4/p4-04/visual/connected-action-dark-en.png
new file mode 100644
index 0000000..b9df85f
Binary files /dev/null and b/docs/redesign/phase-4/p4-04/visual/connected-action-dark-en.png differ
diff --git a/docs/redesign/phase-4/p4-04/visual/connected-action-dark-nb.png b/docs/redesign/phase-4/p4-04/visual/connected-action-dark-nb.png
new file mode 100644
index 0000000..881c238
Binary files /dev/null and b/docs/redesign/phase-4/p4-04/visual/connected-action-dark-nb.png differ
diff --git a/docs/redesign/phase-4/p4-04/visual/connected-action-light-en.png b/docs/redesign/phase-4/p4-04/visual/connected-action-light-en.png
new file mode 100644
index 0000000..e0032b5
Binary files /dev/null and b/docs/redesign/phase-4/p4-04/visual/connected-action-light-en.png differ
diff --git a/docs/redesign/phase-4/p4-04/visual/connected-action-light-nb.png b/docs/redesign/phase-4/p4-04/visual/connected-action-light-nb.png
new file mode 100644
index 0000000..2369d07
Binary files /dev/null and b/docs/redesign/phase-4/p4-04/visual/connected-action-light-nb.png differ
diff --git a/docs/redesign/phase-4/p4-04/visual/general-1440-dark-en.png b/docs/redesign/phase-4/p4-04/visual/general-1440-dark-en.png
new file mode 100644
index 0000000..1906f96
Binary files /dev/null and b/docs/redesign/phase-4/p4-04/visual/general-1440-dark-en.png differ
diff --git a/docs/redesign/phase-4/p4-04/visual/general-1440-dark-nb.png b/docs/redesign/phase-4/p4-04/visual/general-1440-dark-nb.png
new file mode 100644
index 0000000..1e5095e
Binary files /dev/null and b/docs/redesign/phase-4/p4-04/visual/general-1440-dark-nb.png differ
diff --git a/docs/redesign/phase-4/p4-04/visual/general-1440-light-en.png b/docs/redesign/phase-4/p4-04/visual/general-1440-light-en.png
new file mode 100644
index 0000000..7695921
Binary files /dev/null and b/docs/redesign/phase-4/p4-04/visual/general-1440-light-en.png differ
diff --git a/docs/redesign/phase-4/p4-04/visual/general-1440-light-nb.png b/docs/redesign/phase-4/p4-04/visual/general-1440-light-nb.png
new file mode 100644
index 0000000..735cc20
Binary files /dev/null and b/docs/redesign/phase-4/p4-04/visual/general-1440-light-nb.png differ
diff --git a/docs/redesign/phase-4/p4-04/visual/general-320-dark-en.png b/docs/redesign/phase-4/p4-04/visual/general-320-dark-en.png
new file mode 100644
index 0000000..da59e33
Binary files /dev/null and b/docs/redesign/phase-4/p4-04/visual/general-320-dark-en.png differ
diff --git a/docs/redesign/phase-4/p4-04/visual/general-320-dark-nb.png b/docs/redesign/phase-4/p4-04/visual/general-320-dark-nb.png
new file mode 100644
index 0000000..38a184c
Binary files /dev/null and b/docs/redesign/phase-4/p4-04/visual/general-320-dark-nb.png differ
diff --git a/docs/redesign/phase-4/p4-04/visual/general-320-light-en.png b/docs/redesign/phase-4/p4-04/visual/general-320-light-en.png
new file mode 100644
index 0000000..f6e0f86
Binary files /dev/null and b/docs/redesign/phase-4/p4-04/visual/general-320-light-en.png differ
diff --git a/docs/redesign/phase-4/p4-04/visual/general-320-light-nb.png b/docs/redesign/phase-4/p4-04/visual/general-320-light-nb.png
new file mode 100644
index 0000000..8671708
Binary files /dev/null and b/docs/redesign/phase-4/p4-04/visual/general-320-light-nb.png differ
diff --git a/docs/redesign/phase-4/p4-04/visual/general-390-dark-en.png b/docs/redesign/phase-4/p4-04/visual/general-390-dark-en.png
new file mode 100644
index 0000000..89c3937
Binary files /dev/null and b/docs/redesign/phase-4/p4-04/visual/general-390-dark-en.png differ
diff --git a/docs/redesign/phase-4/p4-04/visual/general-390-dark-nb.png b/docs/redesign/phase-4/p4-04/visual/general-390-dark-nb.png
new file mode 100644
index 0000000..1f13ed6
Binary files /dev/null and b/docs/redesign/phase-4/p4-04/visual/general-390-dark-nb.png differ
diff --git a/docs/redesign/phase-4/p4-04/visual/general-390-light-en.png b/docs/redesign/phase-4/p4-04/visual/general-390-light-en.png
new file mode 100644
index 0000000..23c585a
Binary files /dev/null and b/docs/redesign/phase-4/p4-04/visual/general-390-light-en.png differ
diff --git a/docs/redesign/phase-4/p4-04/visual/general-390-light-nb.png b/docs/redesign/phase-4/p4-04/visual/general-390-light-nb.png
new file mode 100644
index 0000000..92a3825
Binary files /dev/null and b/docs/redesign/phase-4/p4-04/visual/general-390-light-nb.png differ
diff --git a/docs/redesign/phase-4/p4-04/visual/long-heading-dark-en.png b/docs/redesign/phase-4/p4-04/visual/long-heading-dark-en.png
new file mode 100644
index 0000000..3a265fd
Binary files /dev/null and b/docs/redesign/phase-4/p4-04/visual/long-heading-dark-en.png differ
diff --git a/docs/redesign/phase-4/p4-04/visual/long-heading-dark-nb.png b/docs/redesign/phase-4/p4-04/visual/long-heading-dark-nb.png
new file mode 100644
index 0000000..9c440de
Binary files /dev/null and b/docs/redesign/phase-4/p4-04/visual/long-heading-dark-nb.png differ
diff --git a/docs/redesign/phase-4/p4-04/visual/long-heading-light-en.png b/docs/redesign/phase-4/p4-04/visual/long-heading-light-en.png
new file mode 100644
index 0000000..f44f32c
Binary files /dev/null and b/docs/redesign/phase-4/p4-04/visual/long-heading-light-en.png differ
diff --git a/docs/redesign/phase-4/p4-04/visual/long-heading-light-nb.png b/docs/redesign/phase-4/p4-04/visual/long-heading-light-nb.png
new file mode 100644
index 0000000..b27a699
Binary files /dev/null and b/docs/redesign/phase-4/p4-04/visual/long-heading-light-nb.png differ
diff --git a/docs/redesign/phase-4/p4-04/visual/notifications-error-dark-en.png b/docs/redesign/phase-4/p4-04/visual/notifications-error-dark-en.png
new file mode 100644
index 0000000..a7e22af
Binary files /dev/null and b/docs/redesign/phase-4/p4-04/visual/notifications-error-dark-en.png differ
diff --git a/docs/redesign/phase-4/p4-04/visual/notifications-error-dark-nb.png b/docs/redesign/phase-4/p4-04/visual/notifications-error-dark-nb.png
new file mode 100644
index 0000000..c5e9f36
Binary files /dev/null and b/docs/redesign/phase-4/p4-04/visual/notifications-error-dark-nb.png differ
diff --git a/docs/redesign/phase-4/p4-04/visual/notifications-error-light-en.png b/docs/redesign/phase-4/p4-04/visual/notifications-error-light-en.png
new file mode 100644
index 0000000..cff7669
Binary files /dev/null and b/docs/redesign/phase-4/p4-04/visual/notifications-error-light-en.png differ
diff --git a/docs/redesign/phase-4/p4-04/visual/notifications-error-light-nb.png b/docs/redesign/phase-4/p4-04/visual/notifications-error-light-nb.png
new file mode 100644
index 0000000..c603653
Binary files /dev/null and b/docs/redesign/phase-4/p4-04/visual/notifications-error-light-nb.png differ
diff --git a/docs/redesign/phase-4/p4-04/visual/notifications-loading-dark-en.png b/docs/redesign/phase-4/p4-04/visual/notifications-loading-dark-en.png
new file mode 100644
index 0000000..1c6ae27
Binary files /dev/null and b/docs/redesign/phase-4/p4-04/visual/notifications-loading-dark-en.png differ
diff --git a/docs/redesign/phase-4/p4-04/visual/notifications-loading-dark-nb.png b/docs/redesign/phase-4/p4-04/visual/notifications-loading-dark-nb.png
new file mode 100644
index 0000000..683c52c
Binary files /dev/null and b/docs/redesign/phase-4/p4-04/visual/notifications-loading-dark-nb.png differ
diff --git a/docs/redesign/phase-4/p4-04/visual/notifications-loading-light-en.png b/docs/redesign/phase-4/p4-04/visual/notifications-loading-light-en.png
new file mode 100644
index 0000000..0c836eb
Binary files /dev/null and b/docs/redesign/phase-4/p4-04/visual/notifications-loading-light-en.png differ
diff --git a/docs/redesign/phase-4/p4-04/visual/notifications-loading-light-nb.png b/docs/redesign/phase-4/p4-04/visual/notifications-loading-light-nb.png
new file mode 100644
index 0000000..6cfb73e
Binary files /dev/null and b/docs/redesign/phase-4/p4-04/visual/notifications-loading-light-nb.png differ
diff --git a/docs/redesign/phase-4/p4-04/visual/rules-error-dark-en.png b/docs/redesign/phase-4/p4-04/visual/rules-error-dark-en.png
new file mode 100644
index 0000000..e62e114
Binary files /dev/null and b/docs/redesign/phase-4/p4-04/visual/rules-error-dark-en.png differ
diff --git a/docs/redesign/phase-4/p4-04/visual/rules-error-dark-nb.png b/docs/redesign/phase-4/p4-04/visual/rules-error-dark-nb.png
new file mode 100644
index 0000000..3dda2bb
Binary files /dev/null and b/docs/redesign/phase-4/p4-04/visual/rules-error-dark-nb.png differ
diff --git a/docs/redesign/phase-4/p4-04/visual/rules-error-light-en.png b/docs/redesign/phase-4/p4-04/visual/rules-error-light-en.png
new file mode 100644
index 0000000..0ccada0
Binary files /dev/null and b/docs/redesign/phase-4/p4-04/visual/rules-error-light-en.png differ
diff --git a/docs/redesign/phase-4/p4-04/visual/rules-error-light-nb.png b/docs/redesign/phase-4/p4-04/visual/rules-error-light-nb.png
new file mode 100644
index 0000000..b4c7cb1
Binary files /dev/null and b/docs/redesign/phase-4/p4-04/visual/rules-error-light-nb.png differ
diff --git a/docs/roadmap/todo.md b/docs/roadmap/todo.md
index 7b62fdd..35e56cb 100644
--- a/docs/roadmap/todo.md
+++ b/docs/roadmap/todo.md
@@ -4,11 +4,12 @@ Status reconciled: 2026-09-12.
 
 ## Current repository work
 
-- **P4-04 — not started:** review the completed [P4-03 preview keyboard checkpoint](../redesign/phase-4/p4-03/README.md) before the separately scoped page-layout/typography work. Preserve existing integrity coordination gates and regression coverage.
 - **P2-D01 — open:** repair the SQLite `DateTimeOffset` ordering baseline before package/tailoring restructuring; retain the expected-failure browser oracle until native capture and historical-binary preservation are proven. P2-O01's initial rules-500 behavior also remains unconfirmed.
 - **P3-O01/P3-O02 — open:** address analytics population/period labels and navigation/query/error retention when those surfaces are next changed. Evidence is in the current [redesign decision records](../redesign/phase-3/OPEN_DECISIONS.md).
 - **P4-02-D01–D04 — existing accessibility/content debt:** command-list semantic children, company save-error feedback outside the modal's accessible subtree, the mobile application-progress scroll region, and the literal AI context `{name}` placeholder. Evidence and owning future slices are in the [P4-02 record](../redesign/phase-4/p4-02/README.md). Do not disable modal background isolation or hide findings.
 - **P4-03-D01 — existing shared Tooltip contrast debt:** the light Redo tooltip fails the text contrast target. Evidence and the narrow regression exception are in the [P4-03 record](../redesign/phase-4/p4-03/README.md); repair in a scoped shared-theme follow-up.
+- **P4-04-O01 — existing fixed-toast overlap:** export-success feedback can temporarily obscure a bottom-of-page action. Review shared feedback placement with later shell work; P4-04 leaves timing/placement unchanged and verifies the action after normal dismissal. [Evidence](../redesign/phase-4/p4-04/README.md).
+- **P4-04-O02 — existing SQLite notification-save contention:** overlapping native preference read/write requests reproduced HTTP 500 with SQLite error 5 in two of ten local runs. The sequential UI test now awaits and requires the save response before readback; server concurrency remains unresolved. Investigate separately from page-layout/density work. [Evidence](../redesign/phase-4/p4-04/README.md).
 - **F04/B06 — open:** complete the authorized main release and production ingress/runtime verification; the browser gate and runner diagnostics remain unresolved. No gate should be bypassed.
 
 ## Delivery and feature gates
@@ -24,4 +25,4 @@ The current builder already includes expandable sections, preset/free-text custo
 
 CV preview margin, pagination and theme/template accuracy still require a dedicated rendering/PDF validation slice, as reiterated by Connor during P4-03. P4-03 only addresses the keyboard/viewport boundary. Define expected output and preserve current settings, templates and preview/PDF relationships before broader editor changes; do not restart already-completed builder features from archived plans.
 
-Completed phase items are intentionally omitted here; their evidence remains recoverable in the pre-cleanup backup and existing archive.
+Completed phase items are intentionally omitted here; their evidence remains in the current redesign checkpoint records and recoverable historical archive.
diff --git a/job-tracker-ui/e2e/redesign-preservation.spec.ts b/job-tracker-ui/e2e/redesign-preservation.spec.ts
index 8497ce9..bb706f2 100644
--- a/job-tracker-ui/e2e/redesign-preservation.spec.ts
+++ b/job-tracker-ui/e2e/redesign-preservation.spec.ts
@@ -130,7 +130,11 @@ test("[PRES-S03 PRES-W11] responsive settings navigation keeps rule edits and pe
   await expect.poll(async () => (await (await page.request.get(`${apiUrl}/rules`)).json()).appliedFollowUpDays).toBe(5);
   await page.getByRole("tab", { name: "Notifications", exact: true }).click();
   await page.getByLabel("Email reminders for follow-ups", { exact: true }).uncheck();
+  // Read back after the mutation completes; concurrent read/write stress is a
+  // separate SQLite defect (P4-04-O02), not this sequential UI preservation flow.
+  const saveNotifications = page.waitForResponse(response => response.url() === `${apiUrl}/notification-settings` && response.request().method() === 'PUT');
   await page.getByRole("button", { name: "Save notification settings", exact: true }).click();
+  expect((await saveNotifications).status()).toBe(200);
   await expect.poll(async () => (await (await page.request.get(`${apiUrl}/notification-settings`)).json()).emailFollowUpRemindersEnabled).toBe(false);
   await page.reload();
   await page.getByRole("tab", { name: "Notifications", exact: true }).click();
diff --git a/job-tracker-ui/e2e/settings-page-layout.spec.ts b/job-tracker-ui/e2e/settings-page-layout.spec.ts
new file mode 100644
index 0000000..fb8b303
--- /dev/null
+++ b/job-tracker-ui/e2e/settings-page-layout.spec.ts
@@ -0,0 +1,194 @@
+import AxeBuilder from "@axe-core/playwright";
+import { expect, test as base, type APIRequestContext, type Page, type TestInfo } from "@playwright/test";
+import { translations } from "../src/i18n/translations";
+
+const apiUrl = "http://localhost:5302/api";
+const password = "E2ePassword123!";
+async function login(api: APIRequestContext, email: string) {
+  expect((await api.post(`${apiUrl}/auth/login`, { data: { email, password } })).status()).toBe(200);
+  const me = await (await api.get(`${apiUrl}/auth/me`)).json();
+  const csrf = (await api.storageState()).cookies.find(c => c.name === "XSRF-TOKEN")!.value;
+  return { "X-CSRF-TOKEN": csrf, "X-Session-Context": me.sessionContext as string };
+}
+
+const test = base.extend<{ headers: Record<string, string> }>({
+  headers: async ({ playwright, page, context }, provide) => {
+    const admin = await playwright.request.newContext();
+    try {
+      const adminHeaders = await login(admin, "e2e@example.test");
+      const email = `p404-${Date.now()}-${Math.random().toString(36).slice(2)}@example.test`;
+      expect((await admin.post(`${apiUrl}/users`, { headers: adminHeaders, data: { email, password, roles: [] } })).status()).toBe(200);
+      const headers = await login(page.request, email);
+      await context.route("**/*", route => {
+        const url = new URL(route.request().url());
+        return ["localhost", "127.0.0.1"].includes(url.hostname) || ["data:", "blob:", "about:"].includes(url.protocol) ? route.continue() : route.abort();
+      });
+      await provide(headers);
+    } finally { await admin.dispose(); }
+  },
+});
+
+async function capture(page: Page, info: TestInfo, name: string) {
+  const path = process.env.P4_04_CAPTURE === "true" ? `../docs/redesign/phase-4/p4-04/visual/${name}.png` : info.outputPath(`${name}.png`);
+  await page.screenshot({ path, fullPage: false });
+  await info.attach(name, { path, contentType: "image/png" });
+}
+
+async function scan(page: Page, info: TestInfo, name: string) {
+  const result = await new AxeBuilder({ page }).withTags(["wcag2a", "wcag2aa", "wcag21a", "wcag21aa"]).analyze();
+  await info.attach(`${name}-axe`, { body: JSON.stringify({ violations: result.violations, incomplete: result.incomplete }, null, 2), contentType: "application/json" });
+  expect(result.violations).toEqual([]);
+}
+
+async function reflow(page: Page, info: TestInfo, name: string) {
+  // Test actual descendants, not body.scrollWidth: the inherited body overflow rule
+  // must not disguise a child/action extending beyond the available reading area.
+  const outside = await page.locator("main").evaluate(main => {
+    const bounds = main.getBoundingClientRect();
+    return Array.from(main.querySelectorAll("h1,h2,h3,p,button,[role='combobox'],.MuiFormControlLabel-root,a"))
+      .filter(node => node.getClientRects().length && getComputedStyle(node).visibility !== "hidden")
+      .map(node => ({ text: node.textContent?.slice(0, 90), left: node.getBoundingClientRect().left, right: node.getBoundingClientRect().right }))
+      .filter(rect => rect.left < bounds.left - 1 || rect.right > Math.min(bounds.right, innerWidth) + 1);
+  });
+  await info.attach(`${name}-reflow`, { body: JSON.stringify(outside), contentType: "application/json" });
+  expect(outside).toEqual([]);
+}
+
+for (const mode of ["light", "dark"] as const) for (const language of ["en", "nb"] as const) {
+  test(`[PRES-E07 E08 E09 S03 S04 S05 J05 J10 M06 W11] ${mode}/${language} Settings headings, reflow and retained actions`, async ({ page, headers }, info) => {
+    test.setTimeout(180_000);
+    const t = translations[language];
+    const suffix = `${mode}-${language}`;
+    await page.emulateMedia({ reducedMotion: "reduce" });
+    await page.addInitScript(({ mode, language }) => { localStorage.setItem("jobtracker.themeMode", mode); localStorage.setItem("uiLanguage", language); }, { mode, language });
+    expect((await page.request.put(`${apiUrl}/auth/preferences/language`, { headers, data: { language: language === "nb" ? "nb-NO" : "en" } })).ok()).toBe(true);
+    await page.setViewportSize({ width: 1440, height: 900 });
+    await page.goto(language === "nb" ? "/settings/?source=preservation" : "/settings");
+    const main = page.getByRole("main");
+    await expect(page.locator("html")).toHaveAttribute("data-color-scheme", mode);
+    await expect(main.getByRole("heading", { level: 1 })).toHaveText(t.settings);
+    await expect(main.getByRole("switch", { name: t.settingsAiEnabled, exact: true })).toBeVisible();
+    await expect(main.getByText(t.settingsUsageNoAi, { exact: true })).toBeVisible();
+    await expect(main.getByRole("switch", { name: t.settingsAiExternalAllowed, exact: true })).toBeDisabled();
+    for (const title of [t.settingsAppearance, t.settingsLanguageTitle, t.settingsJobs, t.settingsAiPrivacyTitle, t.settingsUsageTitle, t.settingsQuickCaptureTitle, t.connectedAccounts]) {
+      await expect(main.getByRole("heading", { level: 2, name: title, exact: true })).toHaveCount(1);
+    }
+    await scan(page, info, `general-${suffix}`);
+    for (const width of [1920, 1440, 1024, 768, 767, 390, 320]) {
+      await page.setViewportSize({ width, height: 900 });
+      await reflow(page, info, `general-${width}-${suffix}`);
+      if ([1440, 390, 320].includes(width)) {
+        await page.evaluate(() => scrollTo(0, 0));
+        await capture(page, info, `general-${width}-${suffix}`);
+      }
+    }
+    await scan(page, info, `phone-${suffix}`);
+    // Synthetic long localized title, with no CSS injection or hidden controls.
+    await main.getByRole("heading", { level: 1 }).evaluate((node, title) => { node.textContent = title; }, language === "nb"
+      ? "Innstillinger for jobbpreferanser, oppfølginger og tilkoblede innbokser"
+      : "Settings for job preferences, follow-up reminders and connected inboxes");
+    await reflow(page, info, `long-heading-${suffix}`);
+    await capture(page, info, `long-heading-${suffix}`);
+
+    const chooseSection = async (name: string) => {
+      if (page.viewportSize()!.width < 768) {
+        const selector = main.getByRole("combobox", { name: t.settingsNavigation, exact: true });
+        await selector.focus();
+        await selector.press("Enter");
+        await page.getByRole("option", { name, exact: true }).focus();
+        await page.keyboard.press("Enter");
+        await expect(selector).toBeFocused();
+      } else await main.getByRole("tab", { name, exact: true }).click();
+    };
+
+    // Initial rules failure retains heading/error; existing section re-entry reloads.
+    await page.route(`${apiUrl}/rules`, route => route.fulfill({ status: 503, contentType: "application/json", body: JSON.stringify({ message: "Synthetic rules unavailable" }) }));
+    await chooseSection(t.settingsTabFollowUps);
+    await expect(main.getByRole("alert")).toContainText("Synthetic rules unavailable");
+    await expect(main.getByRole("heading", { level: 2, name: t.rulesTitle })).toBeVisible();
+    await capture(page, info, `rules-error-${suffix}`);
+    await scan(page, info, `rules-error-${suffix}`);
+    await page.unroute(`${apiUrl}/rules`);
+    await chooseSection(t.settingsTabGeneral);
+    await chooseSection(t.settingsTabFollowUps);
+    const rule = main.getByRole("spinbutton", { name: t.rulesAppliedFollowUpDays, exact: true });
+    await rule.fill("5");
+    for (const width of [320, 390, 768, 1024, 1440]) {
+      await page.setViewportSize({ width, height: 900 });
+      await expect(rule).toHaveValue("5");
+      await reflow(page, info, `rules-${width}-${suffix}`);
+    }
+    const response = page.waitForResponse(r => r.url() === `${apiUrl}/rules` && r.request().method() === "PUT");
+    await main.getByRole("button", { name: t.rulesSave, exact: true }).click();
+    expect((await response).status()).toBe(204);
+    expect((await (await page.request.get(`${apiUrl}/rules`)).json()).appliedFollowUpDays).toBe(5);
+
+    // Hold only the local notification read to exercise loading in the same layout.
+    let release!: () => void;
+    const held = new Promise<void>(resolve => { release = resolve; });
+    await page.route(`${apiUrl}/notification-settings`, async route => { await held; await route.continue(); });
+    await page.reload();
+    await page.setViewportSize({ width: 320, height: 900 });
+    await chooseSection(t.settingsTabNotifications);
+    await expect(main.locator(".MuiSkeleton-root")).toBeVisible();
+    await capture(page, info, `notifications-loading-${suffix}`);
+    release();
+    const pref = main.getByRole("checkbox", { name: t.settingsNotificationsFollowUpReminders, exact: true });
+    await expect(pref).toBeChecked();
+    await page.unroute(`${apiUrl}/notification-settings`);
+    await pref.uncheck();
+    let fail = true;
+    await page.route(`${apiUrl}/notification-settings`, route => {
+      if (route.request().method() === "PUT" && fail) { fail = false; return route.fulfill({ status: 503, contentType: "application/json", body: JSON.stringify({ message: "Synthetic notification save failure" }) }); }
+      return route.continue();
+    });
+    const save = main.getByRole("button", { name: t.settingsNotificationsSave, exact: true });
+    await save.focus();
+    const savedNotification = page.waitForResponse(r => r.url() === `${apiUrl}/notification-settings` && r.request().method() === "PUT");
+    await save.press("Enter");
+    expect((await savedNotification).status()).toBe(503);
+    await expect(main.getByRole("alert")).toContainText("Synthetic notification save failure");
+    await expect(pref).not.toBeChecked();
+    await reflow(page, info, `notifications-error-${suffix}`);
+    await capture(page, info, `notifications-error-${suffix}`);
+    await scan(page, info, `notifications-error-${suffix}`);
+    const retriedNotification = page.waitForResponse(r => r.url() === `${apiUrl}/notification-settings` && r.request().method() === "PUT");
+    await save.press("Enter");
+    expect((await retriedNotification).status()).toBe(200);
+    await expect(main.getByRole("alert")).toHaveCount(0);
+    expect((await (await page.request.get(`${apiUrl}/notification-settings`)).json()).emailFollowUpRemindersEnabled).toBe(false);
+    await page.reload();
+    await chooseSection(t.settingsTabNotifications);
+    await expect(pref).not.toBeChecked();
+
+    await chooseSection(t.settingsTabBackup);
+    await expect(main.getByText(t.accountDeleteDisabled, { exact: true })).toBeVisible();
+    await expect(main.getByRole("button", { name: t.accountDeleteButton, exact: true })).toHaveCount(0);
+    await reflow(page, info, `backup-${suffix}`);
+    await capture(page, info, `backup-${suffix}`);
+    await scan(page, info, `backup-${suffix}`);
+    const download = page.waitForEvent("download");
+    await main.getByRole("button", { name: t.accountExportDownload, exact: true }).click();
+    expect((await download).suggestedFilename()).toMatch(/\.zip$/);
+    // The existing fixed toast can temporarily cover bottom-of-page actions.
+    // Let it dismiss normally before certifying/capturing the focused action.
+    await expect(page.getByRole("alert").filter({ hasText: t.accountExportDownloaded })).toHaveCount(0, { timeout: 15_000 });
+    await chooseSection(t.settingsTabGeneral);
+    const manage = main.getByRole("button", { name: t.settingsManageConnectedAccounts, exact: true });
+    await manage.focus();
+    await page.keyboard.press("Shift+Tab");
+    await page.keyboard.press("Tab");
+    await expect(manage).toBeFocused();
+    expect(await manage.evaluate(node => getComputedStyle(node).outlineStyle)).toBe("solid");
+    await manage.scrollIntoViewIfNeeded();
+    await expect.poll(() => manage.evaluate(node => {
+      const rect = node.getBoundingClientRect();
+      const hit = document.elementFromPoint(rect.x + rect.width / 2, rect.y + rect.height / 2);
+      return node.contains(hit) ? "visible" : `${hit?.tagName}: ${hit?.getAttribute("class")} at ${rect.x},${rect.y},${rect.width},${rect.height}`;
+    })).toBe("visible");
+    await capture(page, info, `connected-action-${suffix}`);
+    await manage.press("Enter");
+    await expect(page).toHaveURL(/\/settings\/connected-accounts$/);
+    expect((await page.request.get(`${apiUrl}/users`)).status()).toBe(403);
+  });
+}
diff --git a/job-tracker-ui/src/App.tsx b/job-tracker-ui/src/App.tsx
index 465a714..9255efd 100644
--- a/job-tracker-ui/src/App.tsx
+++ b/job-tracker-ui/src/App.tsx
@@ -137,6 +137,7 @@ function titleFor(path: string, t: (k: any) => string): string {
 }
 
 function subtitleFor(path: string, t: (k: any) => string): string | undefined {
+  if (/^\/settings\/?$/.test(path)) return t("settingsPageDescription");
   if (path === "/dashboard") return t("dashboardPageSubtitle");
   if (path.startsWith("/discover")) return t("discoverJobsSubtitle");
   if (/^\/jobs\/\d+/.test(path)) return t("jobDetailsWorkspaceSubtitle");
@@ -358,6 +359,7 @@ function Shell({ jobPageSize, setJobPageSize, jobColumns, setJobColumns, themeMo
       <AppShell
         pageTitle={pageTitle}
         pageSubtitle={pageSubtitle}
+        pageLayout={/^\/settings\/?$/.test(path) ? "reading" : undefined}
         breadcrumbs={breadcrumbs}
         pathname={path}
         nav={nav}
diff --git a/job-tracker-ui/src/components/AiPrivacySettingsCard.tsx b/job-tracker-ui/src/components/AiPrivacySettingsCard.tsx
index f3b80d0..a1a6a22 100644
--- a/job-tracker-ui/src/components/AiPrivacySettingsCard.tsx
+++ b/job-tracker-ui/src/components/AiPrivacySettingsCard.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
-import { Alert, Box, Button, FormControlLabel, Paper, Skeleton, Switch, Typography } from "@mui/material";
+import { Alert, Box, Button, FormControlLabel, Skeleton, Switch, Typography } from "@mui/material";
+import { PageSection } from "../layout/PageLayout";
 import { api } from "../api";
 import { useI18n } from "../i18n/I18nProvider";
 import { useToast } from "../toast";
@@ -46,9 +47,7 @@ export default function AiPrivacySettingsCard() {
   };
 
   return (
-    <Paper sx={{ p: 2.5, borderRadius: 4, border: "none" }}>
-      <Typography variant="overline" sx={{ color: "text.secondary", fontWeight: 800 }}>{t("settingsAiPrivacyTitle")}</Typography>
-      <Typography variant="body2" sx={{ color: "text.secondary", mt: 0.25, mb: 1.5 }}>{t("settingsAiPrivacyBody")}</Typography>
+    <PageSection surface title={t("settingsAiPrivacyTitle")} description={t("settingsAiPrivacyBody")}>
       {failed ? <Alert severity="error" sx={{ mb: 1.5 }}>{t("settingsAiPrivacyUnavailable")}</Alert> : null}
       {!settings ? <Skeleton variant="rounded" height={96} /> : <Box sx={{ display: "grid", gap: 1 }}>
         <FormControlLabel
@@ -70,6 +69,6 @@ export default function AiPrivacySettingsCard() {
         </Typography>
         <Box><Button variant="contained" disabled={saving} onClick={() => void save()}>{t("settingsAiSave")}</Button></Box>
       </Box>}
-    </Paper>
+    </PageSection>
   );
 }
diff --git a/job-tracker-ui/src/components/AiUsageCard.tsx b/job-tracker-ui/src/components/AiUsageCard.tsx
index 426fb46..64de68b 100644
--- a/job-tracker-ui/src/components/AiUsageCard.tsx
+++ b/job-tracker-ui/src/components/AiUsageCard.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
-import { Alert, Box, Button, LinearProgress, Paper, Skeleton, Stack, Typography } from "@mui/material";
+import { Alert, Box, Button, LinearProgress, Skeleton, Typography } from "@mui/material";
+import { PageSection } from "../layout/PageLayout";
 import { api } from "../api";
 import { useI18n } from "../i18n/I18nProvider";
 
@@ -59,11 +60,7 @@ export default function AiUsageCard() {
   const storagePercent = Math.min(100, usage.storageUsedBytes / usage.storageLimitBytes * 100);
 
   return (
-    <Paper sx={{ p: 2.5, borderRadius: 4, border: "none" }}>
-      <Stack direction="row" justifyContent="space-between" alignItems="baseline" sx={{ mb: 2 }}>
-        <Typography variant="overline" sx={{ color: "text.secondary", fontWeight: 800 }}>{t("settingsUsageTitle")}</Typography>
-        <Typography variant="caption" sx={{ textTransform: "capitalize", fontWeight: 700 }}>{t("settingsUsagePlan", { plan: usage.plan })}</Typography>
-      </Stack>
+    <PageSection surface title={t("settingsUsageTitle")} actions={<Typography variant="caption" sx={{ textTransform: "capitalize", fontWeight: 700 }}>{t("settingsUsagePlan", { plan: usage.plan })}</Typography>}>
       {usage.monthlyCallLimit === 0 ? <Alert severity="info" sx={{ mb: 2 }}>{t("settingsUsageNoAi")}</Alert> : <><Box sx={{ mb: 2 }}>
         <Typography variant="body2">{t("settingsUsageGenerations", { used: usage.currentMonth.calls.toLocaleString(), limit: usage.monthlyCallLimit.toLocaleString() })}</Typography>
         <LinearProgress variant="determinate" value={callsPercent} aria-label={t("settingsUsageGenerationsProgress")} sx={{ mt: 0.75, height: 7, borderRadius: 99 }} />
@@ -85,6 +82,6 @@ export default function AiUsageCard() {
           {t("settingsBillingNotConfigured")}
         </Typography>
       ) : null}
-    </Paper>
+    </PageSection>
   );
 }
diff --git a/job-tracker-ui/src/components/BackupCard.tsx b/job-tracker-ui/src/components/BackupCard.tsx
index f363a29..529347d 100644
--- a/job-tracker-ui/src/components/BackupCard.tsx
+++ b/job-tracker-ui/src/components/BackupCard.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 
-import { Alert, Box, Button, Divider, Paper, Typography } from "@mui/material";
+import { Alert, Box, Button, Divider, Typography } from "@mui/material";
+import { PageSection } from "../layout/PageLayout";
 import { api, getApiErrorMessage } from "../api";
 import { clearAuthClientState } from "../auth";
 import { useToast } from "../toast";
@@ -95,10 +96,7 @@ export default function BackupCard() {
   };
 
   return (
-    <Paper sx={{ mt: 2, p: 2 }}>
-      <Typography variant="h6" sx={{ mb: 1 }}>
-        {t("backupTitle")}
-      </Typography>
+    <PageSection surface title={t("backupTitle")}>
       <Typography sx={{ color: "text.secondary", mb: 1 }}>
         {t("accountExportBody")}
       </Typography>
@@ -109,7 +107,7 @@ export default function BackupCard() {
       </Box>
       <Alert severity="info" sx={{ mt: 1.5 }}>{t("accountExportRecentSignIn")}</Alert>
       <Divider sx={{ my: 2 }} />
-      <Typography variant="subtitle1" sx={{ fontWeight: 800, mb: 0.5 }}>{t("backupEncryptedTitle")}</Typography>
+      <Typography component="h3" variant="sectionTitle">{t("backupEncryptedTitle")}</Typography>
       <Typography sx={{ color: "text.secondary", mb: 1 }}>
         {t("backupBody")}
       </Typography>
@@ -119,7 +117,7 @@ export default function BackupCard() {
         </Button>
       </Box>
       <Divider sx={{ my: 2 }} />
-      <Typography variant="subtitle1" sx={{ fontWeight: 800, mb: 0.5 }}>{t("accountDeleteTitle")}</Typography>
+      <Typography component="h3" variant="sectionTitle">{t("accountDeleteTitle")}</Typography>
       {lifecycle?.deletionStatus === "pending" ? (
         <Alert severity="warning">{t("accountDeletePending", { stage: lifecycle.request?.stage ?? "pending" })}</Alert>
       ) : lifecycle?.deletionEnabled ? (
@@ -132,6 +130,6 @@ export default function BackupCard() {
       ) : (
         <Alert severity="info">{t("accountDeleteDisabled")}</Alert>
       )}
-    </Paper>
+    </PageSection>
   );
 }
diff --git a/job-tracker-ui/src/components/ImportExportJobs.tsx b/job-tracker-ui/src/components/ImportExportJobs.tsx
index 4e61207..df7036f 100644
--- a/job-tracker-ui/src/components/ImportExportJobs.tsx
+++ b/job-tracker-ui/src/components/ImportExportJobs.tsx
@@ -1,6 +1,7 @@
 import React, { useMemo, useState } from "react";
 
-import { Box, Button, Paper, Typography } from "@mui/material";
+import { Box, Button, Typography } from "@mui/material";
+import { PageSection } from "../layout/PageLayout";
 
 import { api } from "../api";
 import { Company, JobApplication } from "../types";
@@ -248,13 +249,7 @@ export default function ImportExportJobs() {
   const helper = useMemo(() => t("importExportBody"), [t]);
 
   return (
-    <Paper sx={{ mt: 2, p: 2 }}>
-      <Typography variant="h6" sx={{ mb: 1 }}>
-        {t("importExportTitle")}
-      </Typography>
-      <Typography variant="body2" sx={{ color: "text.secondary", mb: 2 }}>
-        {helper}
-      </Typography>
+    <PageSection level="h3" title={t("importExportTitle")} description={helper}>
 
       <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap", alignItems: "center" }}>
         <Button variant="outlined" onClick={() => void exportAll("json")}>{t("exportJson")}</Button>
@@ -276,6 +271,6 @@ export default function ImportExportJobs() {
           </Typography>
         )}
       </Box>
-    </Paper>
+    </PageSection>
   );
 }
diff --git a/job-tracker-ui/src/components/QuickCaptureCard.tsx b/job-tracker-ui/src/components/QuickCaptureCard.tsx
index 2b57109..968d670 100644
--- a/job-tracker-ui/src/components/QuickCaptureCard.tsx
+++ b/job-tracker-ui/src/components/QuickCaptureCard.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useRef } from "react";
 
-import { Box, Paper, TextField, Typography } from "@mui/material";
+import { Box, TextField, Typography } from "@mui/material";
+import { PageSection } from "../layout/PageLayout";
 
 import { useI18n } from "../i18n/I18nProvider";
 import { useToast } from "../toast";
@@ -24,9 +25,7 @@ export default function QuickCaptureCard() {
   }, [bookmarklet]);
 
   return (
-    <Paper sx={{ p: 2 }}>
-      <Typography sx={{ fontWeight: 950, mb: 0.5 }}>{t("settingsQuickCaptureTitle")}</Typography>
-      <Typography variant="body2" sx={{ color: "text.secondary", mb: 1.5 }}>{t("settingsQuickCaptureSubtitle")}</Typography>
+    <PageSection surface title={t("settingsQuickCaptureTitle")} description={t("settingsQuickCaptureSubtitle")}>
 
       <Box sx={{ display: "flex", alignItems: "center", gap: 1.5, flexWrap: "wrap", mb: 1.5 }}>
         <Box
@@ -64,6 +63,6 @@ export default function QuickCaptureCard() {
         InputProps={{ readOnly: true }}
         onFocus={(e) => e.target.select()}
       />
-    </Paper>
+    </PageSection>
   );
 }
diff --git a/job-tracker-ui/src/components/RulesSettingsCard.tsx b/job-tracker-ui/src/components/RulesSettingsCard.tsx
index 806b2de..563e31b 100644
--- a/job-tracker-ui/src/components/RulesSettingsCard.tsx
+++ b/job-tracker-ui/src/components/RulesSettingsCard.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 
-import { Alert, Box, Button, Paper, TextField, Typography } from "@mui/material";
+import { Alert, Box, Button, TextField, Typography } from "@mui/material";
+import { PageSection } from "../layout/PageLayout";
 
 import { api, getApiErrorMessage } from "../api";
 import { useToast } from "../toast";
@@ -50,12 +51,9 @@ export default function RulesSettingsCard() {
 
   if (!s) {
     return (
-      <Paper sx={{ mt: 2, p: 2 }}>
-        <Typography variant="h6" sx={{ mb: 1 }}>
-          {t("rulesTitle")}
-        </Typography>
+      <PageSection surface title={t("rulesTitle")}>
         {loadError ? <Alert severity="error">{loadError}</Alert> : <Typography sx={{ color: "text.secondary" }}>{t("rulesLoading")}</Typography>}
-      </Paper>
+      </PageSection>
     );
   }
 
@@ -68,13 +66,7 @@ export default function RulesSettingsCard() {
   });
 
   return (
-    <Paper sx={{ mt: 2, p: 2 }}>
-      <Typography variant="h6" sx={{ mb: 1 }}>
-        {t("rulesTitle")}
-      </Typography>
-      <Typography variant="body2" sx={{ color: "text.secondary", mb: 2 }}>
-        {t("rulesBody")}
-      </Typography>
+    <PageSection surface title={t("rulesTitle")} description={t("rulesBody")}>
 
       <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "1fr 1fr 1fr" }, gap: 2 }}>
         <TextField label={t("rulesAppliedFollowUpDays")} {...num("appliedFollowUpDays")} />
@@ -93,6 +85,6 @@ export default function RulesSettingsCard() {
           {saving ? t("rulesSaving") : t("rulesSave")}
         </Button>
       </Box>
-    </Paper>
+    </PageSection>
   );
 }
diff --git a/job-tracker-ui/src/components/SettingsView.tsx b/job-tracker-ui/src/components/SettingsView.tsx
index 760127c..7518cdb 100644
--- a/job-tracker-ui/src/components/SettingsView.tsx
+++ b/job-tracker-ui/src/components/SettingsView.tsx
@@ -9,7 +9,6 @@ import {
   FormControlLabel,
   InputLabel,
   MenuItem,
-  Paper,
   Select,
   Skeleton,
   Tab,
@@ -30,6 +29,7 @@ import { ThemeModePref } from "../themePrefs";
 import { useI18n } from "../i18n/I18nProvider";
 import { api, getApiErrorMessage } from "../api";
 import { useToast } from "../toast";
+import { PageSection } from "../layout/PageLayout";
 
 interface Props {
   pageSize: 15 | 20 | 25;
@@ -42,17 +42,7 @@ interface Props {
 
 function TabPanel({ value, index, children }: { value: number; index: number; children: React.ReactNode }) {
   if (value !== index) return null;
-  return <Box sx={{ mt: 2.5 }}>{children}</Box>;
-}
-
-function SectionCard({ title, subtitle, children }: { title: string; subtitle?: string; children: React.ReactNode }) {
-  return (
-    <Paper sx={{ p: "var(--app-card-padding)", borderRadius: 4, border: "none", boxShadow: "0px 1px 2px 0px rgba(15,23,42,0.04), 0px 8px 24px -12px rgba(15,23,42,0.12)" }}>
-      <Typography variant="overline" sx={{ color: "text.secondary", fontWeight: 800 }}>{title}</Typography>
-      {subtitle ? <Typography variant="body2" sx={{ color: "text.secondary", mt: 0.25, mb: 1.5 }}>{subtitle}</Typography> : <Box sx={{ mb: 1.5 }} />}
-      {children}
-    </Paper>
-  );
+  return <Box sx={{ mt: "var(--app-section-gap)", minWidth: 0 }}>{children}</Box>;
 }
 
 type NotificationPrefs = {
@@ -97,7 +87,7 @@ export default function SettingsView({
   };
 
   return (
-    <Paper sx={{ mt: 0, p: "var(--app-card-padding)", borderRadius: 4, border: "none", boxShadow: "0px 1px 2px 0px rgba(15,23,42,0.04), 0px 8px 24px -12px rgba(15,23,42,0.12)", maxWidth: 960, mx: "auto" }}>
+    <Box sx={{ minWidth: 0 }}>
       <FormControl fullWidth sx={{ display: { xs: "flex", sm: "none" }, mb: 1 }}>
         <InputLabel id="settings-section-label">{t("settingsNavigation")}</InputLabel>
         <Select
@@ -113,7 +103,7 @@ export default function SettingsView({
         </Select>
       </FormControl>
 
-      <Tabs value={tab} onChange={(_, v) => setTab(v)} variant="scrollable" scrollButtons="auto" sx={{ display: { xs: "none", sm: "flex" }, mb: 1 }}>
+      <Tabs aria-label={t("settings")} value={tab} onChange={(_, v) => setTab(v)} variant="scrollable" scrollButtons="auto" sx={{ display: { xs: "none", sm: "flex" }, mb: 1 }}>
         <Tab label={t("settingsTabGeneral")} />
         <Tab label={t("settingsTabFollowUps")} />
         <Tab label={t("settingsTabNotifications")} />
@@ -121,9 +111,9 @@ export default function SettingsView({
       </Tabs>
 
       <TabPanel value={tab} index={0}>
-        <Box sx={{ display: "grid", gap: 2.5 }}>
-          <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "1fr 1fr" }, gap: 2.5 }}>
-            <SectionCard title={t("settingsAppearance")}>
+        <Box sx={{ display: "grid", gap: "var(--app-section-gap)", minWidth: 0 }}>
+          <Box sx={{ display: "grid", gridTemplateColumns: { xs: "minmax(0, 1fr)", md: "repeat(2, minmax(0, 1fr))" }, gap: "var(--app-section-gap)" }}>
+            <PageSection surface title={t("settingsAppearance")}>
               <FormControl fullWidth>
                 <InputLabel id="theme-mode-label">{t("settingsTheme")}</InputLabel>
                 <Select
@@ -137,9 +127,9 @@ export default function SettingsView({
                   <MenuItem value="light">{t("settingsThemeLight")}</MenuItem>
                 </Select>
               </FormControl>
-            </SectionCard>
+            </PageSection>
 
-            <SectionCard title={t("settingsLanguageTitle")} subtitle={t("settingsLanguageBody")}>
+            <PageSection surface title={t("settingsLanguageTitle")} description={t("settingsLanguageBody")}>
               <FormControl fullWidth>
                 <InputLabel id="language-label">{t("settingsPreferredLanguage")}</InputLabel>
                 <Select
@@ -152,13 +142,13 @@ export default function SettingsView({
                   <MenuItem value="nb">{t("settingsNorwegian")}</MenuItem>
                 </Select>
               </FormControl>
-            </SectionCard>
+            </PageSection>
           </Box>
 
-          <SectionCard title={t("settingsJobs")}>
+          <PageSection surface title={t("settingsJobs")}>
             <Box sx={{ display: "flex", gap: 4, flexWrap: "wrap" }}>
-              <Box sx={{ minWidth: 240 }}>
-                <Typography variant="subtitle2" sx={{ mb: 1, fontWeight: 700 }}>
+              <Box sx={{ flex: "1 1 15rem", minWidth: 0 }}>
+                <Typography component="h3" variant="subtitle2" sx={{ mb: 1, fontWeight: 700 }}>
                   {t("settingsPagination")}
                 </Typography>
                 <FormControl fullWidth>
@@ -176,8 +166,8 @@ export default function SettingsView({
                 </FormControl>
               </Box>
 
-              <Box sx={{ minWidth: 240 }}>
-                <Typography variant="subtitle2" sx={{ mb: 1, fontWeight: 700 }}>
+              <Box sx={{ flex: "1 1 15rem", minWidth: 0 }}>
+                <Typography component="h3" variant="subtitle2" sx={{ mb: 1, fontWeight: 700 }}>
                   {t("settingsColumns")}
                 </Typography>
                 {(
@@ -200,14 +190,13 @@ export default function SettingsView({
             <Box sx={{ mt: 2 }}>
               <ImportExportJobs />
             </Box>
-          </SectionCard>
+          </PageSection>
 
           <AiPrivacySettingsCard />
           <AiUsageCard />
           <QuickCaptureCard />
-          <SectionCard title={t("connectedAccounts")} subtitle={t("settingsConnectedAccountsBody")}>
-            <Button variant="outlined" onClick={() => navigate("/settings/connected-accounts")}>{t("settingsManageConnectedAccounts")}</Button>
-          </SectionCard>
+          <PageSection surface title={t("connectedAccounts")} description={t("settingsConnectedAccountsBody")}
+            actions={<Button variant="outlined" onClick={() => navigate("/settings/connected-accounts")}>{t("settingsManageConnectedAccounts")}</Button>} />
         </Box>
       </TabPanel>
 
@@ -216,7 +205,7 @@ export default function SettingsView({
       </TabPanel>
 
       <TabPanel value={tab} index={2}>
-        <SectionCard title={t("settingsNotificationsTitle")} subtitle={t("settingsNotificationsBody")}>
+        <PageSection surface title={t("settingsNotificationsTitle")} description={t("settingsNotificationsBody")}>
           {notificationError ? <Alert severity="error" sx={{ mb: 1.5 }}>{notificationError}</Alert> : null}
           {!notificationPrefs ? <Skeleton variant="rounded" height={70} /> : <Box sx={{ display: "grid", gap: 1 }}>
             <FormControlLabel
@@ -232,12 +221,12 @@ export default function SettingsView({
           <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap", mt: 1.5 }}>
             <Button variant="outlined" onClick={() => navigate("/reminders")}>{t("settingsOpenReminderInbox")}</Button>
           </Box>
-        </SectionCard>
+        </PageSection>
       </TabPanel>
 
       <TabPanel value={tab} index={3}>
         <BackupCard />
       </TabPanel>
-    </Paper>
+    </Box>
   );
 }
diff --git a/job-tracker-ui/src/i18n/translations.ts b/job-tracker-ui/src/i18n/translations.ts
index c53fe28..38a7bff 100644
--- a/job-tracker-ui/src/i18n/translations.ts
+++ b/job-tracker-ui/src/i18n/translations.ts
@@ -1057,6 +1057,7 @@ export const translations = {
     settingsNotificationsSave: "Save notification settings",
     settingsSaving: "Saving…",
     settingsAppearance: "Appearance",
+    settingsPageDescription: "Manage appearance, job preferences, follow-ups, notifications and your data.",
     settingsTheme: "Theme",
     settingsThemeSystem: "System",
     settingsThemeDark: "Dark",
@@ -3496,6 +3497,7 @@ export const translations = {
     settingsNotificationsSave: "Lagre varslingsinnstillinger",
     settingsSaving: "Lagrer…",
     settingsAppearance: "Utseende",
+    settingsPageDescription: "Administrer utseende, jobbinnstillinger, oppfølginger, varsler og dine data.",
     settingsTheme: "Tema",
     settingsThemeSystem: "System",
     settingsThemeDark: "Mørkt",
diff --git a/job-tracker-ui/src/layout/AppShell.tsx b/job-tracker-ui/src/layout/AppShell.tsx
index 26c3b65..fb70493 100644
--- a/job-tracker-ui/src/layout/AppShell.tsx
+++ b/job-tracker-ui/src/layout/AppShell.tsx
@@ -31,6 +31,7 @@ import NotificationsNoneIcon from "@mui/icons-material/NotificationsNone";
 import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined";
 
 import JobbjaktMark from "../assets/JobbjaktMark";
+import { PageHeader, type PageWidth } from "./PageLayout";
 import { useI18n } from "../i18n/I18nProvider";
 
 export type NavItem = {
@@ -78,6 +79,7 @@ const SIDEBAR_SELECTED_ICON = "var(--palette-navigation-selectedIcon)";
 export default function AppShell({
   pageTitle,
   pageSubtitle,
+  pageLayout,
   breadcrumbs,
   pathname,
   nav,
@@ -97,6 +99,7 @@ export default function AppShell({
 }: {
   pageTitle: string;
   pageSubtitle?: string;
+  pageLayout?: PageWidth;
   breadcrumbs: string[];
   pathname: string;
   nav: NavItem[];
@@ -527,7 +530,7 @@ export default function AppShell({
           minWidth: 0,
         }}
       >
-        <Box sx={{ mx: "auto", maxWidth: 1320, width: "100%", minWidth: 0 }}>
+        <Box sx={{ mx: "auto", maxWidth: pageLayout ? `var(--app-page-width-${pageLayout})` : 1320, width: "100%", minWidth: 0 }}>
           <Toolbar sx={{ minHeight: { xs: isMobile ? 124 : 68, md: 76 } }} />
           <Box sx={{ display: "flex", flexDirection: "column", gap: 0.75, mb: "var(--app-section-gap)", minWidth: 0 }}>
             <Box sx={{ minWidth: 0 }}>
@@ -538,14 +541,18 @@ export default function AppShell({
                   </Typography>
                 ))}
               </Breadcrumbs>
-              <Typography variant="h5" sx={{ fontWeight: 600, overflowWrap: "anywhere" }}>
-                {pageTitle}
-              </Typography>
-              {pageSubtitle ? (
-                <Typography variant="body2" sx={{ color: "text.secondary", mt: 0.25, overflowWrap: "anywhere" }}>
-                  {pageSubtitle}
-                </Typography>
-              ) : null}
+              {pageLayout ? <PageHeader title={pageTitle} description={pageSubtitle} /> : (
+                <>
+                  <Typography variant="h5" sx={{ fontWeight: 600, overflowWrap: "anywhere" }}>
+                    {pageTitle}
+                  </Typography>
+                  {pageSubtitle ? (
+                    <Typography variant="body2" sx={{ color: "text.secondary", mt: 0.25, overflowWrap: "anywhere" }}>
+                      {pageSubtitle}
+                    </Typography>
+                  ) : null}
+                </>
+              )}
             </Box>
           </Box>
 
diff --git a/job-tracker-ui/src/layout/PageLayout.tsx b/job-tracker-ui/src/layout/PageLayout.tsx
new file mode 100644
index 0000000..57adc88
--- /dev/null
+++ b/job-tracker-ui/src/layout/PageLayout.tsx
@@ -0,0 +1,49 @@
+import React, { useId } from "react";
+import { Box, Typography } from "@mui/material";
+
+// Opt-in widths: the shell owns gutters; consumers must not add a second page gutter.
+export type PageWidth = "reading" | "data" | "editor";
+
+type HeaderProps = {
+  title: string;
+  description?: string;
+  actions?: React.ReactNode;
+  level?: "h1" | "h2" | "h3";
+  titleId?: string;
+};
+
+export function PageHeader({ title, description, actions, level = "h1", titleId }: HeaderProps) {
+  return (
+    <Box component="header" sx={{ display: "flex", flexWrap: "wrap", alignItems: "flex-start", gap: 2, minWidth: 0 }}>
+      <Box sx={{ flex: "1 1 16rem", minWidth: 0 }}>
+        <Typography id={titleId} component={level} variant={level === "h1" ? "pageTitle" : "sectionTitle"} sx={{ overflowWrap: "anywhere" }}>
+          {title}
+        </Typography>
+        {description ? <Typography variant="pageDescription" component="p" color="text.secondary" sx={{ mt: 1, maxWidth: "75ch", overflowWrap: "anywhere" }}>
+          {description}
+        </Typography> : null}
+      </Box>
+      {actions ? <Box sx={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: 1, minWidth: 0, maxWidth: "100%", "& > *": { maxWidth: "100%", whiteSpace: "normal", overflowWrap: "anywhere" } }}>
+        {actions}
+      </Box> : null}
+    </Box>
+  );
+}
+
+// Presentation only: domain components keep their loading, draft and mutation owners.
+export function PageSection({ title, description, actions, children, level = "h2", surface = false }: Omit<HeaderProps, "titleId" | "level"> & {
+  children?: React.ReactNode;
+  level?: "h2" | "h3";
+  surface?: boolean;
+}) {
+  const titleId = useId();
+  return (
+    <Box component="section" aria-labelledby={titleId} sx={{
+      display: "grid", gap: 2, minWidth: 0, alignContent: "start",
+      ...(surface ? { p: "var(--app-card-padding)", bgcolor: "background.paper", border: "1px solid", borderColor: "divider", borderRadius: 1 } : {}),
+    }}>
+      <PageHeader title={title} titleId={titleId} description={description} actions={actions} level={level} />
+      {children ? <Box sx={{ minWidth: 0 }}>{children}</Box> : null}
+    </Box>
+  );
+}
diff --git a/job-tracker-ui/src/theme.d.ts b/job-tracker-ui/src/mui-theme.d.ts
similarity index 52%
rename from job-tracker-ui/src/theme.d.ts
rename to job-tracker-ui/src/mui-theme.d.ts
index a617a14..ab4d7e3 100644
--- a/job-tracker-ui/src/theme.d.ts
+++ b/job-tracker-ui/src/mui-theme.d.ts
@@ -1,6 +1,17 @@
 import "@mui/material/styles";
+import "@mui/material/Typography";
 
 declare module "@mui/material/styles" {
+  interface TypographyVariants {
+    pageTitle: React.CSSProperties;
+    sectionTitle: React.CSSProperties;
+    pageDescription: React.CSSProperties;
+  }
+  interface TypographyVariantsOptions {
+    pageTitle?: React.CSSProperties;
+    sectionTitle?: React.CSSProperties;
+    pageDescription?: React.CSSProperties;
+  }
   interface TypeBackground { elevated: string }
   interface Palette {
     border: { subtle: string; default: string; strong: string };
@@ -16,3 +27,11 @@ declare module "@mui/material/styles" {
     navigation?: Palette["navigation"];
   }
 }
+
+declare module "@mui/material/Typography" {
+  interface TypographyPropsVariantOverrides {
+    pageTitle: true;
+    sectionTitle: true;
+    pageDescription: true;
+  }
+}
diff --git a/job-tracker-ui/src/page-layout.test.tsx b/job-tracker-ui/src/page-layout.test.tsx
new file mode 100644
index 0000000..3820b55
--- /dev/null
+++ b/job-tracker-ui/src/page-layout.test.tsx
@@ -0,0 +1,53 @@
+import React from "react";
+import "@testing-library/jest-dom";
+import { fireEvent, render, screen, within } from "@testing-library/react";
+import { Alert, Button, ThemeProvider } from "@mui/material";
+import { getTheme } from "./theme";
+import { PageHeader, PageSection } from "./layout/PageLayout";
+import ViewStateNotice from "./components/ViewStateNotice";
+import { I18nProvider } from "./i18n/I18nProvider";
+
+test("[PRES-E08] page and nested section headings retain full names and independent actions", () => {
+  const save = jest.fn();
+  const manage = jest.fn();
+  render(<ThemeProvider theme={getTheme("light")}>
+    <PageHeader title="Innstillinger for oppfølginger og jobbpreferanser" description="Ærlig informasjon om dine valg."
+      actions={<Button onClick={save}>Lagre varslingsinnstillinger</Button>} />
+    <PageSection title="Tilkoblede kontoer" description="Administrer innbokstilkoblinger separat."
+      actions={<Button onClick={manage}>Administrer tilkoblede kontoer</Button>}>
+      <PageSection title="Kontotilgang" level="h3"><Button disabled>Utilgjengelig</Button></PageSection>
+    </PageSection>
+  </ThemeProvider>);
+  expect(screen.getAllByRole("heading", { level: 1 })).toHaveLength(1);
+  expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent("Innstillinger for oppfølginger og jobbpreferanser");
+  const section = screen.getByRole("region", { name: "Tilkoblede kontoer" });
+  expect(within(section).getByRole("heading", { level: 2 })).toHaveTextContent("Tilkoblede kontoer");
+  expect(within(section).getByRole("heading", { level: 3 })).toHaveTextContent("Kontotilgang");
+  expect(section).not.toHaveAttribute("tabindex");
+  fireEvent.click(screen.getByRole("button", { name: "Lagre varslingsinnstillinger" }));
+  fireEvent.click(within(section).getByRole("button", { name: "Administrer tilkoblede kontoer" }));
+  fireEvent.click(screen.getByRole("button", { name: "Utilgjengelig" }));
+  expect(save).toHaveBeenCalledTimes(1);
+  expect(manage).toHaveBeenCalledTimes(1);
+});
+
+test("[PRES-E08] section composition retains loaded, error/retry and empty child semantics", () => {
+  const retry = jest.fn();
+  const content = (loading: boolean, failed: boolean) => <ThemeProvider theme={getTheme("dark")}><I18nProvider>
+    <PageSection title="Notifications">
+      <ViewStateNotice loading={loading} title="Could not load" onRetry={retry}
+        error={failed ? { kind: "unavailable", message: "Could not load", retryable: true } : null} />
+      {!loading && !failed ? <Alert severity="info">No notifications.</Alert> : null}
+    </PageSection>
+  </I18nProvider></ThemeProvider>;
+  const view = render(content(true, false));
+  expect(screen.getByRole("status")).toHaveTextContent("Loading");
+  view.rerender(content(false, true));
+  fireEvent.click(screen.getByRole("button", { name: "Retry" }));
+  expect(retry).toHaveBeenCalledTimes(1);
+  expect(screen.getByRole("alert")).toHaveTextContent("Could not load");
+  view.rerender(content(false, false));
+  expect(screen.getByRole("status")).toHaveTextContent("Content loaded.");
+  expect(screen.getByRole("alert")).toHaveTextContent("No notifications.");
+  expect(screen.getByRole("region", { name: "Notifications" })).not.toHaveAttribute("tabindex");
+});
diff --git a/job-tracker-ui/src/settings-view.test.tsx b/job-tracker-ui/src/settings-view.test.tsx
index 96b6f59..cf35dfb 100644
--- a/job-tracker-ui/src/settings-view.test.tsx
+++ b/job-tracker-ui/src/settings-view.test.tsx
@@ -25,7 +25,7 @@ jest.mock('./components/BackupCard', () => () => <div>Backup Stub</div>);
 
 const mockedApi = api as jest.Mocked<typeof api>;
 
-function renderView() {
+function renderView(overrides: Partial<React.ComponentProps<typeof SettingsView>> = {}) {
   return render(
     <MemoryRouter>
       <ToastProvider>
@@ -37,6 +37,7 @@ function renderView() {
             onColumnsChange={jest.fn()}
             themeMode="dark"
             onThemeModeChange={jest.fn()}
+            {...overrides}
           />
         </I18nProvider>
       </ToastProvider>
@@ -163,3 +164,20 @@ test('[PRES-S03 PRES-W11] saving one follow-up rule preserves the other scenario
     offerFollowUpDays: 7, offerGhostDays: 14, feedbackFollowUpDays: 7, feedbackGhostDays: 14,
   }));
 });
+
+test('[PRES-S03 PRES-J05] table and theme preferences keep their independent callbacks', async () => {
+  const onPageSizeChange = jest.fn();
+  const onColumnsChange = jest.fn();
+  const onThemeModeChange = jest.fn();
+  renderView({ onPageSizeChange, onColumnsChange, onThemeModeChange });
+  await screen.findByText(/AI privacy/i);
+  fireEvent.mouseDown(screen.getByRole('combobox', { name: 'Rows per page' }));
+  fireEvent.click(screen.getByRole('option', { name: '25' }));
+  expect(onPageSizeChange).toHaveBeenCalledWith(25);
+  fireEvent.click(screen.getByRole('checkbox', { name: 'Job URL' }));
+  expect(onColumnsChange).toHaveBeenCalledWith({ status: true, dateApplied: true, daysSince: true, jobUrl: true });
+  fireEvent.mouseDown(screen.getByRole('combobox', { name: 'Theme' }));
+  fireEvent.click(screen.getByRole('option', { name: 'Light' }));
+  expect(onThemeModeChange).toHaveBeenCalledWith('light');
+  expect(mockedApi.put).not.toHaveBeenCalled();
+});
diff --git a/job-tracker-ui/src/theme.ts b/job-tracker-ui/src/theme.ts
index 0d36997..d588cc2 100644
--- a/job-tracker-ui/src/theme.ts
+++ b/job-tracker-ui/src/theme.ts
@@ -218,6 +218,10 @@ function buildTypography() {
   return {
     fontFamily: "'Archivo', system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif",
     letterSpacing: 0,
+    // Opt-in application hierarchy; legacy page/marketing variants stay unchanged.
+    pageTitle: { fontWeight: 700, fontSize: "1.5rem", lineHeight: 1.25, letterSpacing: "-0.01em", "@media (min-width: 768px)": { fontSize: "1.75rem", lineHeight: 34 / 28 } },
+    sectionTitle: { fontWeight: 600, fontSize: "1.125rem", lineHeight: 24 / 18 },
+    pageDescription: { fontWeight: 400, fontSize: "0.875rem", lineHeight: 20 / 14 },
     // Mockup headings (F:\Pictures\website\jobtracker\new) are bold/black-weight display
     // type ("Dashboard", "One workspace for the whole search") -- 500 across the board read
     // as noticeably lighter/flatter than that reference. h1-h4 (page titles, hero, section
@@ -283,6 +287,9 @@ export const getTheme = (_mode: "light" | "dark") => {
           "--app-page-gutter": "16px",
           "--app-section-gap": "24px",
           "--app-card-padding": "16px",
+          "--app-page-width-reading": "60rem",
+          "--app-page-width-data": "82.5rem",
+          "--app-page-width-editor": "100%",
         },
         "@media (min-width: 768px)": {
           ":root": {