feat(design): adopt CIBG component patterns (header, forms, wizards, dashboard)

Re-skins the app's layout on top of the CIBG Huisstijl theme (previous commit) so it matches designsystem.cibg.nl, not just its colour tokens — magenta ("robijn") header, horizontal nav, and the CIBG component markup for forms/wizards/dashboard. - Header: logo block + robijn titlebar (breadcrumb + user menu) + grey horizontal nav (4 links) replacing the dashboard side-nav; breadcrumb restyled for the titlebar (no background of its own — CIBG's global `header nav` rule otherwise bleeds a grey fill into it, fixed by scoping an override inside BreadcrumbComponent). - Forms: form-field/radio-group/checkbox rebuilt on CIBG's horizontal `form-group row` / `form-check.styled` markup (label col-md-4, control col-md-8); same input() APIs. - Wizards: stepper rebuilt as the CIBG "stappenindicator" (numbered circles, visited steps clickable for back-nav, title merged in); wizard-shell adopts the CIBG procesnavigatie button row. Back-navigation wired into all three wizard machines (registratie-wizard already had it; added `GaNaarStap` to intake/herregistratie machines, pure + spec'd). - New shared/ui molecules: confirmation (animated bevestiging checkmark, replaces plain alerts on submit), review-section (controlestap sections with "Wijzigen"), application-list/application-link (CIBG "aanvragen" rows, replace the dashboard's card grid and aanvraag-block). - Cleanup: delete side-nav and now-unused styles.scss utilities (.app-overview, .app-form-panel, .app-card-grid); correct design-tokens.mdx (it referenced tokens that no longer exist) and document the CIBG-value token bridge. Verified: build/lint/check:tokens green, 178 tests pass (4 new GaNaarStap cases), and manually driven end-to-end (dashboard, a full herregistratie submission through to the confirmation screen, mobile width, keyboard focus). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-02 14:33:05 +02:00
parent 7887355ca3
commit 6257d7ede3
44 changed files with 769 additions and 591 deletions
--- a/src/app/auth/ui/login-form/login-form.component.ts
+++ b/src/app/auth/ui/login-form/login-form.component.ts
@@ -9,7 +9,11 @@ import { ButtonComponent } from '@shared/ui/button/button.component';
  selector: 'app-login-form',
  imports: [FormsModule, FormFieldComponent, TextInputComponent, ButtonComponent],
  template: `
-    <form (ngSubmit)="submitted.emit(bsn)" class="app-form app-form-panel">
+    <form (ngSubmit)="submitted.emit(bsn)" class="form-horizontal">
+      <div class="form-header">
+        <div class="form-action"><span class="meta" i18n="@@form.verplichteVelden">* verplichte velden</span></div>
+      </div>
+
      <app-form-field i18n-label="@@login.bsnLabel" label="BSN" fieldId="bsn" required i18n-description="@@login.bsnDescription" description="9 cijfers (demo: vul iets in)">
        <app-text-input inputId="bsn" [(ngModel)]="bsn" name="bsn" placeholder="123456789" />
      </app-form-field>
--- a/src/app/herregistratie/domain/herregistratie.machine.spec.ts
+++ b/src/app/herregistratie/domain/herregistratie.machine.spec.ts
@@ -1,7 +1,7 @@
 import { describe, it, expect } from 'vitest';
 import { ok, err } from '@shared/kernel/fp';
 import { initialUpload } from '@shared/upload/upload.machine';
-import { initial, next, back, submit, resolve, reduce, WizardState } from './herregistratie.machine';
+import { initial, next, back, gaNaarStap, submit, resolve, reduce, WizardState } from './herregistratie.machine';

 const editing1 = (uren: string, jaren = '5', punten = ''): WizardState => ({ tag: 'Editing', step: 1, draft: { uren, jaren, punten }, errors: {}, upload: initialUpload });
 const editing2 = (uren: string, punten: string, jaren = '5'): WizardState => ({ tag: 'Editing', step: 2, draft: { uren, jaren, punten }, errors: {}, upload: initialUpload });
@@ -46,6 +46,17 @@ describe('wizard.machine', () => {
    expect(resolve(submitting, ok(undefined)).tag).toBe('Submitted');
    expect(resolve(submitting, err('boom')).tag).toBe('Failed');
  });
+
+  it('gaNaarStap jumps back to an earlier step, clearing errors', () => {
+    expect((gaNaarStap(editing3('4160', '200'), 1) as any).step).toBe(1);
+  });
+
+  it('gaNaarStap ignores a same/forward jump and jumps outside Editing', () => {
+    const e3 = editing3('4160', '200');
+    expect(gaNaarStap(e3, 3)).toBe(e3); // same step -> no-op
+    const submitting = submit(e3);
+    expect(gaNaarStap(submitting, 1)).toBe(submitting); // not Editing -> no-op
+  });
 });

 describe('reduce (message-driven)', () => {
--- a/src/app/herregistratie/domain/herregistratie.machine.ts
+++ b/src/app/herregistratie/domain/herregistratie.machine.ts
@@ -87,6 +87,13 @@ export function back(s: WizardState): WizardState {
  return { ...s, step: (s.step - 1) as 1 | 2, errors: {} };
 }

+/** Jump back to an earlier step to correct data (controle → step N). Forward
+    jumps are not allowed (would skip validation). */
+export function gaNaarStap(s: WizardState, step: 1 | 2 | 3): WizardState {
+  if (s.tag !== 'Editing' || step >= s.step) return s;
+  return { ...s, step, errors: {} };
+}
+
 /** Step 3 submit: parse everything + require documents; Submitting only with Valid. */
 export function submit(s: WizardState): WizardState {
  if (s.tag !== 'Editing' || s.step !== 3) return s;
@@ -121,6 +128,7 @@ export type WizardMsg =
  | { tag: 'SetField'; key: keyof Draft; value: string }
  | { tag: 'Next' }
  | { tag: 'Back' }
+  | { tag: 'GaNaarStap'; step: 1 | 2 | 3 }
  | { tag: 'Submit' }
  | { tag: 'Retry' }
  | { tag: 'SubmitConfirmed' }
@@ -136,6 +144,8 @@ export function reduce(s: WizardState, m: WizardMsg): WizardState {
      return next(s);
    case 'Back':
      return back(s);
+    case 'GaNaarStap':
+      return gaNaarStap(s, m.step);
    case 'Submit':
      return submit(s);
    case 'Retry':
--- a/src/app/herregistratie/domain/intake.machine.spec.ts
+++ b/src/app/herregistratie/domain/intake.machine.spec.ts
@@ -8,6 +8,7 @@ import {
  currentStep,
  next,
  back,
+  gaNaarStap,
  submit,
  resolve,
  reduce,
@@ -67,6 +68,19 @@ describe('navigation', () => {
  it('Back never goes below the first step', () => {
    expect(back(initial)).toBe(initial);
  });
+
+  it('gaNaarStap jumps back to an earlier step, clearing errors', () => {
+    const s = answering({ buitenlandGewerkt: 'nee' }, 2);
+    expect((gaNaarStap(s, 0) as any).cursor).toBe(0);
+  });
+
+  it('gaNaarStap ignores a same/forward jump and jumps outside Answering', () => {
+    const s = answering({ buitenlandGewerkt: 'nee' }, 1);
+    expect(gaNaarStap(s, 1)).toBe(s); // same step -> no-op
+    expect(gaNaarStap(s, 2)).toBe(s); // forward -> no-op
+    const submitting = submit(answering({ buitenlandGewerkt: 'nee', uren: '4160' }, 2));
+    expect(gaNaarStap(submitting, 0)).toBe(submitting); // not Answering -> no-op
+  });
 });

 describe('submit', () => {
--- a/src/app/herregistratie/domain/intake.machine.ts
+++ b/src/app/herregistratie/domain/intake.machine.ts
@@ -156,6 +156,13 @@ export function back(s: IntakeState): IntakeState {
  return { ...s, cursor: s.cursor - 1, errors: {} };
 }

+/** Jump back to an earlier step to correct answers (review → step N). Forward
+    jumps are not allowed (would skip validation). */
+export function gaNaarStap(s: IntakeState, cursor: number): IntakeState {
+  if (s.tag !== 'Answering' || cursor < 0 || cursor >= s.cursor) return s;
+  return { ...s, cursor, errors: {} };
+}
+
 export function submit(s: IntakeState): IntakeState {
  if (s.tag !== 'Answering') return s;
  const r = validateAll(s.answers, s.scholingThreshold);
@@ -171,6 +178,7 @@ export type IntakeMsg =
  | { tag: 'SetAnswer'; key: keyof Answers; value: string }
  | { tag: 'Next' }
  | { tag: 'Back' }
+  | { tag: 'GaNaarStap'; cursor: number }
  | { tag: 'Submit' }
  | { tag: 'Retry' }
  | { tag: 'SubmitConfirmed' }
@@ -186,6 +194,8 @@ export function reduce(s: IntakeState, m: IntakeMsg): IntakeState {
      return next(s);
    case 'Back':
      return back(s);
+    case 'GaNaarStap':
+      return gaNaarStap(s, m.cursor);
    case 'Submit':
      return submit(s);
    case 'Retry':
--- a/src/app/herregistratie/ui/herregistratie-wizard/herregistratie-wizard.component.ts
+++ b/src/app/herregistratie/ui/herregistratie-wizard/herregistratie-wizard.component.ts
@@ -3,7 +3,8 @@ import { FormsModule } from '@angular/forms';
 import { FormFieldComponent } from '@shared/ui/form-field/form-field.component';
 import { TextInputComponent } from '@shared/ui/text-input/text-input.component';
 import { AlertComponent } from '@shared/ui/alert/alert.component';
-import { WizardShellComponent, WizardError, WizardStatus } from '@shared/layout/wizard-shell/wizard-shell.component';
+import { WizardShellComponent, WizardError, WizardStatus, naarStapLabel } from '@shared/layout/wizard-shell/wizard-shell.component';
+import { ConfirmationComponent } from '@shared/ui/confirmation/confirmation.component';
 import { createStore } from '@shared/application/store';
 import { whenTag } from '@shared/kernel/fp';
 import { BigProfileStore } from '@registratie/application/big-profile.store';
@@ -22,12 +23,13 @@ import { UploadState, initialUpload, deliveryRefs } from '@shared/upload/upload.
    the dashboard shows "in behandeling" immediately. */
@Component({
  selector: 'app-herregistratie-wizard',
-  imports: [FormsModule, FormFieldComponent, TextInputComponent, AlertComponent, WizardShellComponent, DocumentUploadComponent],
+  imports: [FormsModule, FormFieldComponent, TextInputComponent, AlertComponent, ConfirmationComponent, WizardShellComponent, DocumentUploadComponent],
  template: `
    <app-wizard-shell
      [steps]="stepLabels"
      [current]="step() - 1"
      [stepTitle]="stepTitle()"
+      i18n-processName="@@herregWizard.processName" processName="Herregistratie aanvragen"
      [status]="shellStatus()"
      [primaryLabel]="primaryLabel()"
      [canGoBack]="step() > 1"
@@ -36,7 +38,8 @@ import { UploadState, initialUpload, deliveryRefs } from '@shared/upload/upload.
      (primary)="onPrimary()"
      (back)="dispatch({ tag: 'Back' })"
      (cancel)="restart()"
-      (retry)="onRetry()">
+      (retry)="onRetry()"
+      (goToStep)="goToStep($event)">

      @switch (step()) {
        @case (1) {
@@ -71,7 +74,7 @@ import { UploadState, initialUpload, deliveryRefs } from '@shared/upload/upload.
      }

      <div wizardSuccess>
-        <app-alert type="ok" i18n="@@herregWizard.success">Uw aanvraag tot herregistratie is ontvangen.</app-alert>
+        <app-confirmation i18n-title="@@herregWizard.success.title" title="Uw aanvraag tot herregistratie is ontvangen" />
      </div>
    </app-wizard-shell>
  `,
@@ -127,7 +130,15 @@ export class HerregistratieWizardComponent {

  // --- Presentational wiring for the shared wizard shell ---------------------
  protected stepTitle = computed(() => this.stepTitles[this.step() - 1]);
-  protected primaryLabel = computed(() => (this.step() < 3 ? $localize`:@@wizard.volgende:Volgende` : $localize`:@@herregWizard.indienen:Herregistratie aanvragen`));
+  protected primaryLabel = computed(() => {
+    const step = this.step();
+    return step < 3 ? naarStapLabel(step + 1, this.stepLabels[step]) : $localize`:@@herregWizard.indienen:Herregistratie aanvragen`;
+  });
+
+  /** Stepper emits a 0-based index for an earlier (visited) step. */
+  protected goToStep(index: number) {
+    this.dispatch({ tag: 'GaNaarStap', step: (index + 1) as 1 | 2 | 3 });
+  }
  protected errorMessage = computed(() => $localize`:@@wizard.indienenMislukt:Indienen mislukt:` + ` ${this.failedError()}`);
  protected shellStatus = computed<WizardStatus>(() => {
    switch (this.state().tag) {
--- a/src/app/herregistratie/ui/intake-wizard/intake-wizard.component.ts
+++ b/src/app/herregistratie/ui/intake-wizard/intake-wizard.component.ts
@@ -6,7 +6,9 @@ import { RadioGroupComponent, JA_NEE } from '@shared/ui/radio-group/radio-group.
 import { ButtonComponent } from '@shared/ui/button/button.component';
 import { AlertComponent } from '@shared/ui/alert/alert.component';
 import { DataRowComponent } from '@shared/ui/data-row/data-row.component';
-import { WizardShellComponent, WizardError, WizardStatus } from '@shared/layout/wizard-shell/wizard-shell.component';
+import { ReviewSectionComponent } from '@shared/ui/review-section/review-section.component';
+import { ConfirmationComponent } from '@shared/ui/confirmation/confirmation.component';
+import { WizardShellComponent, WizardError, WizardStatus, naarStapLabel } from '@shared/layout/wizard-shell/wizard-shell.component';
 import { createStore } from '@shared/application/store';
 import { whenTag } from '@shared/kernel/fp';
 import { BigProfileStore } from '@registratie/application/big-profile.store';
@@ -32,12 +34,13 @@ import { IntakePolicyAdapter } from '@herregistratie/infrastructure/intake-polic
    sessionStorage so a page reload keeps the user's progress (cleared on tab close). */
@Component({
  selector: 'app-intake-wizard',
-  imports: [FormsModule, FormFieldComponent, TextInputComponent, RadioGroupComponent, ButtonComponent, AlertComponent, DataRowComponent, WizardShellComponent],
+  imports: [FormsModule, FormFieldComponent, TextInputComponent, RadioGroupComponent, ButtonComponent, AlertComponent, DataRowComponent, ReviewSectionComponent, ConfirmationComponent, WizardShellComponent],
  template: `
    <app-wizard-shell
      [steps]="stepLabels"
      [current]="cursor()"
      [stepTitle]="stepTitle()"
+      i18n-processName="@@intake.processName" processName="Herregistratie-intake"
      [status]="shellStatus()"
      [primaryLabel]="primaryLabel()"
      [canGoBack]="cursor() > 0"
@@ -46,7 +49,8 @@ import { IntakePolicyAdapter } from '@herregistratie/infrastructure/intake-polic
      (primary)="onPrimary()"
      (back)="dispatch({ tag: 'Back' })"
      (cancel)="restart()"
-      (retry)="onRetry()">
+      (retry)="onRetry()"
+      (goToStep)="dispatch({ tag: 'GaNaarStap', cursor: $event })">

      @switch (step()) {
        @case ('buitenland') {
@@ -81,12 +85,18 @@ import { IntakePolicyAdapter } from '@herregistratie/infrastructure/intake-polic
        }
        @case ('review') {
          <app-alert type="info" i18n="@@intake.review.controleer">Controleer uw antwoorden en dien de aanvraag in.</app-alert>
-          <dl class="app-section">
+          <app-review-section i18n-heading="@@intake.sectie.buitenland" heading="Buitenland"
+            i18n-editAriaLabel="@@intake.buitenlandWijzigenAria" editAriaLabel="Wijzigen buitenland"
+            (edit)="dispatch({ tag: 'GaNaarStap', cursor: 0 })">
            <app-data-row i18n-key="@@intake.review.buitenNl" key="Buiten NL gewerkt" [value]="answers().buitenlandGewerkt ?? '—'" />
            @if (answers().buitenlandGewerkt === 'ja') {
              <app-data-row i18n-key="@@intake.review.land" key="Land" [value]="answers().land ?? ''" />
              <app-data-row i18n-key="@@intake.review.buitenlandseUren" key="Buitenlandse uren" [value]="answers().buitenlandseUren ?? ''" />
            }
+          </app-review-section>
+          <app-review-section class="app-section" i18n-heading="@@intake.sectie.werk" heading="Werk in Nederland"
+            i18n-editAriaLabel="@@intake.werkWijzigenAria" editAriaLabel="Wijzigen werk in Nederland"
+            (edit)="dispatch({ tag: 'GaNaarStap', cursor: 1 })">
            <app-data-row i18n-key="@@intake.review.urenNl" key="Uren NL" [value]="answers().uren ?? ''" />
            @if (scholingZichtbaar()) {
              <app-data-row i18n-key="@@intake.review.scholing" key="Aanvullende scholing" [value]="answers().scholingGevolgd ?? ''" />
@@ -94,15 +104,16 @@ import { IntakePolicyAdapter } from '@herregistratie/infrastructure/intake-polic
            @if (answers().scholingGevolgd === 'ja') {
              <app-data-row i18n-key="@@intake.review.punten" key="Nascholingspunten" [value]="answers().punten ?? ''" />
            }
-          </dl>
+          </app-review-section>
        }
      }

      <div wizardSuccess>
-        <app-alert type="ok" i18n="@@intake.success">Uw aanvraag tot herregistratie is ontvangen.</app-alert>
-        <div class="app-section">
-          <app-button variant="secondary" (click)="restart()" i18n="@@intake.opnieuw">Opnieuw beginnen</app-button>
-        </div>
+        <app-confirmation i18n-title="@@intake.success.title" title="Uw aanvraag tot herregistratie is ontvangen">
+          <div class="app-section">
+            <app-button variant="secondary" (click)="restart()" i18n="@@intake.opnieuw">Opnieuw beginnen</app-button>
+          </div>
+        </app-confirmation>
      </div>
    </app-wizard-shell>
  `,
@@ -155,7 +166,11 @@ export class IntakeWizardComponent {
    review: $localize`:@@intake.title.review:Controleren en indienen`,
  };
  protected stepTitle = computed(() => this.stepTitles[this.step()]);
-  protected primaryLabel = computed(() => (this.step() === 'review' ? $localize`:@@intake.indienen:Aanvraag indienen` : $localize`:@@wizard.volgende:Volgende`));
+  protected primaryLabel = computed(() => {
+    if (this.step() === 'review') return $localize`:@@intake.indienen:Aanvraag indienen`;
+    const next = this.cursor() + 1;
+    return naarStapLabel(next + 1, this.stepLabels[next]);
+  });
  protected errorMessage = computed(() => $localize`:@@wizard.indienenMislukt:Indienen mislukt:` + ` ${this.failedError()}`);
  protected shellStatus = computed<WizardStatus>(() => {
    switch (this.state().tag) {
--- a/src/app/registratie/ui/aanvraag-block/aanvraag-block.component.ts
+++ b/src/app/registratie/ui/aanvraag-block/aanvraag-block.component.ts
@@ -1,9 +1,6 @@
 import { Component, computed, input, output } from '@angular/core';
-import { DatePipe } from '@angular/common';
-import { HeadingComponent } from '@shared/ui/heading/heading.component';
-import { StatusBadgeComponent } from '@shared/ui/status-badge/status-badge.component';
 import { ButtonComponent } from '@shared/ui/button/button.component';
-import { CardComponent } from '@shared/ui/card/card.component';
+import { ApplicationLinkComponent } from '@shared/ui/application-link/application-link.component';
 import { Aanvraag, AanvraagType } from '@registratie/domain/aanvraag';
 import { blockActions } from '@registratie/domain/block-actions';

@@ -13,53 +10,30 @@ const TYPE_LABELS: Record<AanvraagType, string> = {
  intake: $localize`:@@aanvraagBlock.type.intake:Herregistratie-intake`,
 };

-/** Organism: one application on the dashboard's"Mijn aanvragen" list. Which badge
-    + actions it shows is driven by the pure `blockActions(status)` and the status
-    tag; the block only renders. Composes card + status-badge + button. */
+/** Organism: one application on the dashboard's "Mijn aanvragen" list, rendered as
+    a CIBG Huisstijl "aanvragen" row (application-link). Which text/actions it shows
+    is driven by the pure `blockActions(status)` and the status tag; the block only
+    renders. Only a resumable Concept is clickable — a resolved status has nothing
+    to navigate to, so it renders as a plain (non-anchor) row. */
@Component({
  selector: 'app-aanvraag-block',
-  imports: [DatePipe, HeadingComponent, StatusBadgeComponent, ButtonComponent, CardComponent],
-  styles: [`
-    .head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--rhc-space-max-md); flex-wrap: wrap; }
-    .actions { display: flex; gap: var(--rhc-space-max-md); margin-block-start: var(--rhc-space-max-md); }
-  `],
+  imports: [ButtonComponent, ApplicationLinkComponent],
+  // display:contents — see application-link.component.ts (keeps <li> a direct <ul> child).
+  styles: [`:host{display:contents}`],
  template: `
-    <app-card>
-      <div class="head">
-        <app-heading [level]="3">{{ typeLabel() }}</app-heading>
-        <app-status-badge [label]="badgeLabel()" [color]="badgeColor()" />
-      </div>
-
-      @switch (aanvraag().status.tag) {
-        @case ('Concept') {
-          <p i18n="@@aanvraagBlock.stap">Stap {{ stap().index }} van {{ stap().count }}</p>
-        }
-        @case ('InBehandeling') {
-          <p i18n="@@aanvraagBlock.inBehandeling">Referentie {{ ref() }} · ingediend op {{ aanvraag().submittedAt | date: 'longDate' }}</p>
-          @if (manual()) {
-            <p class="app-text-subtle" i18n="@@aanvraagBlock.manual">Uw aanvraag wordt handmatig beoordeeld in de backoffice.</p>
-          }
-        }
-        @case ('Goedgekeurd') {
-          <p i18n="@@aanvraagBlock.goedgekeurd">Referentie {{ ref() }}</p>
-        }
-        @case ('Afgewezen') {
-          <p i18n="@@aanvraagBlock.afgewezen">Referentie {{ ref() }}</p>
-          <p class="app-text-subtle">{{ reden() }}</p>
-        }
-      }
-
-      @if (actions().length) {
-        <div class="actions">
-          @if (actions().includes('resume')) {
-            <app-button (click)="resume.emit()" i18n="@@aanvraagBlock.verderGaan">Verder gaan</app-button>
-          }
-          @if (actions().includes('cancel')) {
-            <app-button variant="subtle" (click)="cancel.emit()" i18n="@@aanvraagBlock.annuleren">Annuleren</app-button>
-          }
+    <app-application-link
+      [heading]="typeLabel()"
+      [status]="statusText()"
+      [subtitle]="subtitle()"
+      [cta]="actions().includes('resume') ? verderGaan : ''"
+      [clickable]="actions().includes('resume')"
+      (activate)="resume.emit()">
+      @if (actions().includes('cancel')) {
+        <div applicationActions>
+          <app-button variant="subtle" (click)="cancel.emit()" i18n="@@aanvraagBlock.annuleren">Annuleren</app-button>
        </div>
      }
-    </app-card>
+    </app-application-link>
  `,
 })
 export class AanvraagBlockComponent {
@@ -68,42 +42,30 @@ export class AanvraagBlockComponent {
  resume = output<void>();
  cancel = output<void>();

+  protected readonly verderGaan = $localize`:@@aanvraagBlock.verderGaan:Verder gaan`;
+
  protected typeLabel = computed(() => TYPE_LABELS[this.aanvraag().type]);
  protected actions = computed(() => blockActions(this.aanvraag().status));

-  // Status-tag → badge presentation (the UI's mapping, not a domain rule).
-  protected badgeLabel = computed(() => {
-    switch (this.aanvraag().status.tag) {
-      case 'Concept': return $localize`:@@aanvraagBlock.badge.concept:Concept`;
-      case 'InBehandeling': return $localize`:@@aanvraagBlock.badge.inBehandeling:In behandeling`;
-      case 'Goedgekeurd': return $localize`:@@aanvraagBlock.badge.goedgekeurd:Goedgekeurd`;
-      case 'Afgewezen': return $localize`:@@aanvraagBlock.badge.afgewezen:Afgewezen`;
+  // Status-tag → row text (the UI's mapping, not a domain rule).
+  protected statusText = computed(() => {
+    const s = this.aanvraag().status;
+    switch (s.tag) {
+      case 'Concept': return $localize`:@@aanvraagBlock.stap:Stap ${s.stepIndex + 1}:index: van ${s.stepCount}:count:`;
+      case 'InBehandeling': return $localize`:@@aanvraagBlock.inBehandeling:Referentie ${s.referentie}:ref: · ingediend op ${formatNL(this.aanvraag().submittedAt)}:datum:`;
+      case 'Goedgekeurd': return $localize`:@@aanvraagBlock.goedgekeurd:Referentie ${s.referentie}:ref:`;
+      case 'Afgewezen': return $localize`:@@aanvraagBlock.afgewezen:Referentie ${s.referentie}:ref:`;
    }
  });
-  protected badgeColor = computed(() => {
-    switch (this.aanvraag().status.tag) {
-      case 'Concept': return 'var(--rhc-color-cool-grey-300)';
-      case 'InBehandeling': return 'var(--rhc-color-oranje-500)';
-      case 'Goedgekeurd': return 'var(--rhc-color-groen-500)';
-      case 'Afgewezen': return 'var(--rhc-color-rood-500)';
-    }
-  });
-
-  // Field accessors per tag (the template @switch guarantees the right shape).
-  protected stap = computed(() => {
+  // Secondary note under the status line, when there's one to show.
+  protected subtitle = computed(() => {
    const s = this.aanvraag().status;
-    return s.tag === 'Concept' ? { index: s.stepIndex + 1, count: s.stepCount } : { index: 0, count: 0 };
-  });
-  protected ref = computed(() => {
-    const s = this.aanvraag().status;
-    return s.tag !== 'Concept' ? s.referentie : '';
-  });
-  protected manual = computed(() => {
-    const s = this.aanvraag().status;
-    return s.tag === 'InBehandeling' && s.manual;
-  });
-  protected reden = computed(() => {
-    const s = this.aanvraag().status;
-    return s.tag === 'Afgewezen' ? s.reden : '';
+    if (s.tag === 'InBehandeling' && s.manual) return $localize`:@@aanvraagBlock.manual:Uw aanvraag wordt handmatig beoordeeld in de backoffice.`;
+    if (s.tag === 'Afgewezen') return s.reden;
+    return '';
  });
 }
+
+function formatNL(iso?: string): string {
+  return iso ? new Date(iso).toLocaleDateString('nl-NL', { day: 'numeric', month: 'long', year: 'numeric' }) : '';
+}
--- a/src/app/registratie/ui/aanvraag-block/aanvraag-block.stories.ts
+++ b/src/app/registratie/ui/aanvraag-block/aanvraag-block.stories.ts
@@ -1,4 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/angular';
+import { applicationConfig } from '@storybook/angular';
+import { provideRouter } from '@angular/router';
 import { AanvraagBlockComponent } from './aanvraag-block.component';
 import { Aanvraag } from '@registratie/domain/aanvraag';

@@ -14,6 +16,12 @@ const base = {
 const meta: Meta<AanvraagBlockComponent> = {
  title: 'Organisms/Aanvraag Block',
  component: AanvraagBlockComponent,
+  decorators: [applicationConfig({ providers: [provideRouter([])] })],
+  render: (args) => ({
+    props: args,
+    // A row is an <li> — the "applications" list styling needs the real list context.
+    template: `<ul class="list-unstyled"><app-aanvraag-block [aanvraag]="aanvraag" /></ul>`,
+  }),
 };
 export default meta;
 type Story = StoryObj<AanvraagBlockComponent>;
--- a/src/app/registratie/ui/address-fields/address-fields.component.ts
+++ b/src/app/registratie/ui/address-fields/address-fields.component.ts
@@ -22,7 +22,6 @@ export type AdresErrors = Partial<Record<keyof AdresValue, string>>;
  styles: [`
    fieldset{border:0;margin:0;padding:0;min-inline-size:0}
    legend{padding:0;font-weight:var(--rhc-text-font-weight-semi-bold);margin-block-end:var(--rhc-space-max-md)}
-    app-form-field + app-form-field{display:block;margin-block-start:var(--rhc-space-max-lg)}
  `],
  template: `
    <fieldset>
--- a/src/app/registratie/ui/change-request-form/change-request-form.component.ts
+++ b/src/app/registratie/ui/change-request-form/change-request-form.component.ts
@@ -28,7 +28,10 @@ import { ApiClient } from '@shared/infrastructure/api-client';
      </div>
    } @else {
      <app-heading [level]="2" i18n="@@changeRequest.heading">Adreswijziging doorgeven</app-heading>
-      <form (ngSubmit)="onSubmit()" class="app-form app-form-panel app-section">
+      <form (ngSubmit)="onSubmit()" class="form-horizontal app-section">
+        <div class="form-header">
+          <div class="form-action"><span class="meta" i18n="@@form.verplichteVelden">* verplichte velden</span></div>
+        </div>
        <app-address-fields
          idPrefix="cr"
          [value]="adres()"
--- a/src/app/registratie/ui/dashboard.page.ts
+++ b/src/app/registratie/ui/dashboard.page.ts
@@ -2,13 +2,13 @@ import { Component, computed, inject } from '@angular/core';
 import { Router } from '@angular/router';
 import { PageShellComponent } from '@shared/layout/page-shell/page-shell.component';
 import { HeadingComponent } from '@shared/ui/heading/heading.component';
-import { LinkComponent } from '@shared/ui/link/link.component';
 import { AlertComponent } from '@shared/ui/alert/alert.component';
 import { SkeletonComponent } from '@shared/ui/skeleton/skeleton.component';
 import { DataRowComponent } from '@shared/ui/data-row/data-row.component';
 import { CardComponent } from '@shared/ui/card/card.component';
 import { TaskListComponent } from '@shared/ui/task-list/task-list.component';
-import { SideNavComponent, NavItem } from '@shared/layout/side-nav/side-nav.component';
+import { ApplicationListComponent } from '@shared/ui/application-list/application-list.component';
+import { ApplicationLinkComponent } from '@shared/ui/application-link/application-link.component';
 import { ASYNC } from '@shared/ui/async/async.component';
 import { RegistrationSummaryComponent } from '@registratie/ui/registration-summary/registration-summary.component';
 import { RegistrationTableComponent } from '@registratie/ui/registration-table/registration-table.component';
@@ -24,24 +24,21 @@ import { tasksFromProfile } from '@registratie/domain/tasks';
@Component({
  selector: 'app-dashboard-page',
  imports: [
-    PageShellComponent, HeadingComponent, LinkComponent, AlertComponent, SkeletonComponent,
-    DataRowComponent, CardComponent, TaskListComponent, SideNavComponent, ...ASYNC,
+    PageShellComponent, HeadingComponent, AlertComponent, SkeletonComponent,
+    DataRowComponent, CardComponent, TaskListComponent, ApplicationListComponent, ApplicationLinkComponent, ...ASYNC,
    RegistrationSummaryComponent, RegistrationTableComponent, AanvraagBlockComponent,
  ],
  template: `
    <app-page-shell i18n-heading="@@dashboard.heading" heading="Mijn overzicht" i18n-intro="@@dashboard.intro" intro="Welkom in uw persoonlijke omgeving van het BIG-register. Hier ziet u uw registratie en regelt u uw zaken.">
-      <div class="app-overview">
-        <app-side-nav [items]="nav" />
-
        <div class="app-stack">
          @if (aanvragen().length) {
            <section>
              <app-heading [level]="2" i18n="@@dashboard.mijnAanvragen">Mijn aanvragen</app-heading>
-              <div class="app-stack app-section">
+              <app-application-list class="app-section">
                @for (a of aanvragen(); track a.id) {
                  <app-aanvraag-block animate.enter="app-item-enter" animate.leave="app-item-leave" [aanvraag]="a" (resume)="resume(a)" (cancel)="cancelAanvraag(a)" />
                }
-              </div>
+              </app-application-list>
            </section>
          }

@@ -68,7 +65,7 @@ import { tasksFromProfile } from '@registratie/domain/tasks';
                  <app-registration-summary [reg]="$any(p).registration" />
                </div>
                <app-card class="app-section" i18n-heading="@@dashboard.persoonsgegevens" heading="Persoonsgegevens (BRP)">
-                  <dl>
+                  <dl class="row mb-0">
                    <app-data-row i18n-key="@@dashboard.straat" key="Straat" [value]="$any(p).person.adres.straat" />
                    <app-data-row i18n-key="@@dashboard.postcode" key="Postcode" [value]="$any(p).person.adres.postcode" />
                    <app-data-row i18n-key="@@dashboard.woonplaats" key="Woonplaats" [value]="$any(p).person.adres.woonplaats" />
@@ -100,19 +97,13 @@ import { tasksFromProfile } from '@registratie/domain/tasks';

          <section>
            <app-heading [level]="2" i18n="@@dashboard.watWiltUDoen">Wat wilt u doen?</app-heading>
-            <ul class="app-card-grid app-section">
+            <app-application-list class="app-section">
              @for (a of acties; track a.to) {
-                <li>
-                  <app-card [heading]="a.titel">
-                    <p>{{ a.tekst }}</p>
-                    <app-link [to]="a.to">{{ a.actie }} →</app-link>
-                  </app-card>
-                </li>
+                <app-application-link [heading]="a.titel" [subtitle]="a.tekst" [cta]="a.actie" [to]="a.to" />
              }
-            </ul>
+            </app-application-list>
          </section>
        </div>
-      </div>
    </app-page-shell>
  `,
 })
@@ -158,21 +149,15 @@ export class DashboardPage {
    return tasksFromProfile(reg, this.eligible());
  }

-  /** Portal sections (navigation, not actions). */
-  protected readonly nav: NavItem[] = [
-    { label: $localize`:@@dashboard.nav.overzicht:Overzicht`, to: '/dashboard' },
-    { label: $localize`:@@dashboard.nav.gegevens:Mijn gegevens`, to: '/registratie' },
-    { label: $localize`:@@dashboard.nav.herregistratie:Herregistratie`, to: '/herregistratie' },
-    { label: $localize`:@@dashboard.nav.inschrijven:Inschrijven`, to: '/registreren' },
-    { label: $localize`:@@dashboard.nav.concepten:Functionele patronen`, to: '/concepts' },
-    { label: $localize`:@@dashboard.nav.brief:Brief opstellen`, to: '/brief' },
-  ];
-
-  /** Primary transactional actions, as a card grid. */
+  /** Primary transactional actions, as an "aanvragen" list (see CIBG's
+      componenten/aanvragen). The core portal sections live in the header nav now;
+      the teaching pages (concepts/brief) are only reachable from here. */
  protected readonly acties = [
    { to: '/registreren', titel: $localize`:@@dashboard.actie.inschrijven.titel:Inschrijven`, tekst: $localize`:@@dashboard.actie.inschrijven.tekst:Schrijf u in in het BIG-register via de registratiewizard.`, actie: $localize`:@@dashboard.actie.inschrijven.actie:Start inschrijving` },
    { to: '/herregistratie', titel: $localize`:@@dashboard.actie.herregistratie.titel:Herregistratie aanvragen`, tekst: $localize`:@@dashboard.actie.herregistratie.tekst:Verleng uw registratie voor de komende periode.`, actie: $localize`:@@dashboard.actie.herregistratie.actie:Vraag aan` },
    { to: '/intake', titel: $localize`:@@dashboard.actie.intake.titel:Herregistratie-intake`, tekst: $localize`:@@dashboard.actie.intake.tekst:Vragenlijst met vertakkingen.`, actie: $localize`:@@dashboard.actie.intake.actie:Start intake` },
    { to: '/registratie', titel: $localize`:@@dashboard.actie.wijzigen.titel:Gegevens wijzigen`, tekst: $localize`:@@dashboard.actie.wijzigen.tekst:Bekijk uw gegevens of geef een wijziging door.`, actie: $localize`:@@dashboard.actie.wijzigen.actie:Bekijk gegevens` },
+    { to: '/concepts', titel: $localize`:@@dashboard.actie.concepten.titel:Functionele patronen`, tekst: $localize`:@@dashboard.actie.concepten.tekst:Bekijk de FP/TEA-bouwstenen van deze POC.`, actie: $localize`:@@dashboard.actie.concepten.actie:Bekijk patronen` },
+    { to: '/brief', titel: $localize`:@@dashboard.actie.brief.titel:Brief opstellen`, tekst: $localize`:@@dashboard.actie.brief.tekst:Stel een brief samen uit vaste en vrije onderdelen.`, actie: $localize`:@@dashboard.actie.brief.actie:Start brief` },
  ];
 }
--- a/src/app/registratie/ui/registratie-wizard/registratie-wizard.component.ts
+++ b/src/app/registratie/ui/registratie-wizard/registratie-wizard.component.ts
@@ -7,7 +7,9 @@ import { ButtonComponent } from '@shared/ui/button/button.component';
 import { AlertComponent } from '@shared/ui/alert/alert.component';
 import { SkeletonComponent } from '@shared/ui/skeleton/skeleton.component';
 import { DataRowComponent } from '@shared/ui/data-row/data-row.component';
-import { WizardShellComponent, WizardError, WizardStatus } from '@shared/layout/wizard-shell/wizard-shell.component';
+import { ReviewSectionComponent } from '@shared/ui/review-section/review-section.component';
+import { ConfirmationComponent } from '@shared/ui/confirmation/confirmation.component';
+import { WizardShellComponent, WizardError, WizardStatus, naarStapLabel } from '@shared/layout/wizard-shell/wizard-shell.component';
 import { ASYNC } from '@shared/ui/async/async.component';
 import { AddressFieldsComponent } from '@registratie/ui/address-fields/address-fields.component';
 import { createStore } from '@shared/application/store';
@@ -54,7 +56,7 @@ const NL_TAALVAARDIGHEID_VRAAG = 'nl-taalvaardigheid';
  selector: 'app-registratie-wizard',
  imports: [
    FormsModule, FormFieldComponent, TextInputComponent, RadioGroupComponent, ButtonComponent,
-    AlertComponent, SkeletonComponent, DataRowComponent, WizardShellComponent,
+    AlertComponent, SkeletonComponent, DataRowComponent, ReviewSectionComponent, ConfirmationComponent, WizardShellComponent,
    AddressFieldsComponent, DocumentUploadComponent, ...ASYNC,
  ],
  template: `
@@ -62,6 +64,7 @@ const NL_TAALVAARDIGHEID_VRAAG = 'nl-taalvaardigheid';
      [steps]="stepLabels"
      [current]="cursor()"
      [stepTitle]="stepTitle()"
+      i18n-processName="@@regWizard.processName" processName="Inschrijven in het BIG-register"
      [status]="shellStatus()"
      [primaryLabel]="primaryLabel()"
      [canGoBack]="cursor() > 0"
@@ -71,7 +74,8 @@ const NL_TAALVAARDIGHEID_VRAAG = 'nl-taalvaardigheid';
      (primary)="onPrimary()"
      (back)="dispatch({ tag: 'Back' })"
      (cancel)="restart()"
-      (retry)="onRetry()">
+      (retry)="onRetry()"
+      (goToStep)="dispatch({ tag: 'GaNaarStap', cursor: $event })">

      @switch (step()) {
        @case ('adres') {
@@ -119,7 +123,7 @@ const NL_TAALVAARDIGHEID_VRAAG = 'nl-taalvaardigheid';
                        [ngModel]="draft().beroep ?? ''" (ngModelChange)="dispatch({ tag: 'DeclareerBeroep', beroep: $event })" />
                    </app-form-field>
                  } @else if (draft().beroep) {
-                    <dl class="app-section">
+                    <dl class="row mb-0 app-section">
                      <app-data-row i18n-key="@@regWizard.beroepAfgeleid" key="Beroep (afgeleid uit diploma)" [value]="draft().beroep ?? ''" />
                    </dl>
                  }
@@ -156,31 +160,35 @@ const NL_TAALVAARDIGHEID_VRAAG = 'nl-taalvaardigheid';
            }
            @case ('controle') {
              <app-alert type="info" i18n="@@regWizard.controleer">Controleer uw gegevens en dien de registratie in.</app-alert>
-              <dl class="app-section">
+              <app-review-section i18n-heading="@@regWizard.sectie.adres" heading="Adres en correspondentie"
+                i18n-editAriaLabel="@@regWizard.adresWijzigenAria" editAriaLabel="Wijzigen adresgegevens"
+                (edit)="dispatch({ tag: 'GaNaarStap', cursor: 0 })">
                <app-data-row i18n-key="@@regWizard.summary.adres" key="Adres" [value]="adresSamenvatting()" />
                <app-data-row i18n-key="@@regWizard.summary.herkomstAdres" key="Herkomst adres" [value]="adresHerkomstLabel()" />
                <app-data-row i18n-key="@@regWizard.summary.correspondentie" key="Correspondentie" [value]="correspondentieLabel()" />
                @if (draft().correspondentie === 'email') {
                  <app-data-row i18n-key="@@regWizard.summary.email" key="E-mailadres" [value]="draft().email ?? ''" />
                }
+              </app-review-section>
+              <app-review-section class="app-section" i18n-heading="@@regWizard.sectie.beroep" heading="Beroep en diploma"
+                i18n-editAriaLabel="@@regWizard.diplomaWijzigenAria" editAriaLabel="Wijzigen beroep en diploma"
+                (edit)="dispatch({ tag: 'GaNaarStap', cursor: 1 })">
                <app-data-row i18n-key="@@regWizard.summary.beroep" key="Beroep" [value]="draft().beroep ?? ''" />
                <app-data-row i18n-key="@@regWizard.summary.herkomstDiploma" key="Herkomst diploma" [value]="diplomaHerkomstLabel()" />
                @for (item of samenvattingVragen(); track item.vraag) {
                  <app-data-row [key]="item.vraag" [value]="item.antwoord" />
                }
-              </dl>
-              <div class="app-button-row app-section">
-                <app-button type="button" variant="subtle" (click)="dispatch({ tag: 'GaNaarStap', cursor: 0 })" i18n="@@regWizard.adresWijzigen">Adres wijzigen</app-button>
-                <app-button type="button" variant="subtle" (click)="dispatch({ tag: 'GaNaarStap', cursor: 1 })" i18n="@@regWizard.diplomaWijzigen">Diploma wijzigen</app-button>
-              </div>
+              </app-review-section>
        }
      }

      <div wizardSuccess>
-        <app-alert type="ok" i18n="@@regWizard.success">Uw registratie is ontvangen. Uw referentienummer is {{ referentie() }}. Bewaar dit nummer voor uw administratie.</app-alert>
-        <div class="app-section">
-          <app-button variant="secondary" (click)="restart()" i18n="@@regWizard.nieuweRegistratie">Nieuwe registratie starten</app-button>
-        </div>
+        <app-confirmation i18n-title="@@regWizard.success.title" title="Uw registratie is ontvangen">
+          <p class="app-section" i18n="@@regWizard.success.referentie">Uw referentienummer is {{ referentie() }}. Bewaar dit nummer voor uw administratie.</p>
+          <div class="app-section">
+            <app-button variant="secondary" (click)="restart()" i18n="@@regWizard.nieuweRegistratie">Nieuwe registratie starten</app-button>
+          </div>
+        </app-confirmation>
      </div>
    </app-wizard-shell>
  `,
@@ -243,7 +251,11 @@ export class RegistratieWizardComponent {
  protected failedError = computed(() => whenTag(this.state(), 'Mislukt')?.error ?? '');

  // --- Presentational wiring for the shared wizard shell ---------------------
-  protected primaryLabel = computed(() => (this.step() === 'controle' ? $localize`:@@regWizard.indienen:Registratie indienen` : $localize`:@@wizard.volgende:Volgende`));
+  protected primaryLabel = computed(() => {
+    if (this.step() === 'controle') return $localize`:@@regWizard.indienen:Registratie indienen`;
+    const next = this.cursor() + 1;
+    return naarStapLabel(next + 1, this.stepLabels[next]);
+  });
  protected errorMessage = computed(() => $localize`:@@regWizard.indienenMislukt:Het indienen is niet gelukt:` + ` ${this.failedError()}`);
  protected shellStatus = computed<WizardStatus>(() => {
    switch (this.state().tag) {
--- a/src/app/registratie/ui/registration-summary/registration-summary.component.ts
+++ b/src/app/registratie/ui/registration-summary/registration-summary.component.ts
@@ -12,7 +12,7 @@ import { CardComponent } from '@shared/ui/card/card.component';
  imports: [DatePipe, DataRowComponent, StatusBadgeComponent, CardComponent],
  template: `
    <app-card>
-      <dl>
+      <dl class="row mb-0">
        <app-data-row i18n-key="@@summary.bigNummer" key="BIG-nummer" [value]="reg().bigNummer" />
        <app-data-row i18n-key="@@summary.naam" key="Naam" [value]="reg().naam" />
        <app-data-row i18n-key="@@summary.beroep" key="Beroep" [value]="reg().beroep" />
--- a/src/app/shared/layout/breadcrumb/breadcrumb.component.ts
+++ b/src/app/shared/layout/breadcrumb/breadcrumb.component.ts
@@ -6,39 +6,27 @@ export interface BreadcrumbItem {
  link?: string; // omit on the current (last) page
 }

-/** Chrome: breadcrumb navigation. Renders the RHC/Utrecht breadcrumb pattern; the
-    last item is the current page (no link, aria-current). Domain-free — the caller
-    supplies the trail. */
+/** Chrome: breadcrumb navigation, styled for the CIBG titlebar (`.titlebar .title`) —
+    plain links with a chevron `::after` from the CIBG Icons font, current page as an
+    unlinked, bold span. Domain-free — the caller supplies the trail. */
@Component({
  selector: 'app-breadcrumb',
  imports: [RouterLink],
-  styles: [`
-    :host{display:block}
-    .list{display:flex;flex-wrap:wrap;gap:var(--rhc-space-max-md);align-items:center;list-style:none;margin:0;padding:0;font-size:var(--rhc-text-font-size-sm)}
-    .crumb{display:inline-flex;align-items:center;gap:var(--rhc-space-max-md)}
-    a{color:var(--rhc-color-foreground-link);text-decoration:underline}
-    a:hover{color:var(--rhc-color-foreground-link-hover)}
-    .current{color:var(--rhc-color-foreground-subtle)}
-    .sep{color:var(--rhc-color-foreground-subtle)}
-    /* Inverse: on the blue header bar, everything is white. */
-    :host(.inverse) a,
-    :host(.inverse) .current,
-    :host(.inverse) .sep { color: var(--rhc-color-foreground-on-primary); }
-  `],
+  // CIBG's global "header nav" background rule matches ANY nav inside a <header>
+  // — including this one, wherever it's mounted. Override it so the breadcrumb
+  // never carries its own background (it should show whatever's behind it, e.g.
+  // the titlebar's robijn fill).
+  styles: [`nav{background:none}`],
  template: `
    <nav i18n-aria-label="@@breadcrumb.aria" aria-label="Kruimelpad">
-      <ol class="list">
-        @for (item of items(); track item.label; let last = $last; let first = $first) {
-          <li class="crumb">
-            @if (!first) { <span class="sep" aria-hidden="true">›</span> }
-            @if (item.link && !last) {
-              <a [routerLink]="item.link">{{ item.label }}</a>
-            } @else {
-              <span class="current" aria-current="page">{{ item.label }}</span>
-            }
-          </li>
+      <span class="visually-hidden" i18n="@@breadcrumb.hier">U bevindt zich hier:</span>
+      @for (item of items(); track item.label; let last = $last) {
+        @if (item.link && !last) {
+          <a [routerLink]="item.link">{{ item.label }}</a>
+        } @else {
+          <span aria-current="page">{{ item.label }}</span>
        }
-      </ol>
+      }
    </nav>
  `,
 })
--- a/src/app/shared/layout/breadcrumb/breadcrumb.stories.ts
+++ b/src/app/shared/layout/breadcrumb/breadcrumb.stories.ts
@@ -9,7 +9,8 @@ const meta: Meta<BreadcrumbComponent> = {
  decorators: [applicationConfig({ providers: [provideRouter([])] })],
  render: (args) => ({
    props: args,
-    template: `<app-breadcrumb [items]="items" />`,
+    // Rendered inside a mock .titlebar .title so the story reflects the real chrome.
+    template: `<div class="titlebar" style="padding: 1rem"><div class="title"><app-breadcrumb [items]="items" /></div></div>`,
  }),
 };
 export default meta;
--- a/src/app/shared/layout/side-nav/side-nav.component.ts
+++ b/src/app/shared/layout/side-nav/side-nav.component.ts
@@ -1,50 +0,0 @@
-import { Component, input } from '@angular/core';
-import { RouterLink, RouterLinkActive } from '@angular/router';
-
-export interface NavItem {
-  readonly label: string;
-  readonly to: string;
-}
-
-/** Organism: vertical side navigation for the "Mijn omgeving" portal. The active
-    route is marked with `routerLinkActive`. Domain-free — the caller supplies the
-    items (English-named shared chrome). */
-@Component({
-  selector: 'app-side-nav',
-  imports: [RouterLink, RouterLinkActive],
-  styles: [`
-    :host{display:block}
-    .list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--rhc-space-max-xs)}
-    .item{
-      display:block;
-      padding:var(--rhc-space-max-md) var(--rhc-space-max-lg);
-      color:var(--rhc-color-foreground-default);
-      text-decoration:none;
-      border-radius:var(--rhc-border-radius-sm);
-      border-inline-start:var(--rhc-border-width-md) solid transparent;
-    }
-    .item:hover{background:var(--rhc-color-cool-grey-100)}
-    .item.active{
-      background:var(--rhc-color-lintblauw-100);
-      border-inline-start-color:var(--rhc-color-lintblauw-700);
-      color:var(--rhc-color-lintblauw-700);
-      font-weight:var(--rhc-text-font-weight-semi-bold);
-    }
-  `],
-  template: `
-    <nav [attr.aria-label]="ariaLabel()">
-      <ul class="list">
-        @for (item of items(); track item.to) {
-          <li>
-            <a class="item" [routerLink]="item.to" routerLinkActive="active"
-               [routerLinkActiveOptions]="{ exact: true }">{{ item.label }}</a>
-          </li>
-        }
-      </ul>
-    </nav>
-  `,
-})
-export class SideNavComponent {
-  items = input.required<NavItem[]>();
-  ariaLabel = input($localize`:@@sideNav.aria:Mijn omgeving`);
-}
--- a/src/app/shared/layout/side-nav/side-nav.stories.ts
+++ b/src/app/shared/layout/side-nav/side-nav.stories.ts
@@ -1,27 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-import { applicationConfig } from '@storybook/angular';
-import { provideRouter } from '@angular/router';
-import { SideNavComponent } from './side-nav.component';
-
-const meta: Meta<SideNavComponent> = {
-  title: 'Layout/Side Nav',
-  component: SideNavComponent,
-  decorators: [applicationConfig({ providers: [provideRouter([])] })],
-  render: (args) => ({
-    props: args,
-    template: `<div style="max-inline-size:15rem"><app-side-nav [items]="items" /></div>`,
-  }),
-};
-export default meta;
-type Story = StoryObj<SideNavComponent>;
-
-export const Default: Story = {
-  args: {
-    items: [
-      { label: 'Overzicht', to: '/dashboard' },
-      { label: 'Mijn gegevens', to: '/registratie' },
-      { label: 'Herregistratie', to: '/herregistratie' },
-      { label: 'Inschrijven', to: '/registreren' },
-    ],
-  },
-};
--- a/src/app/shared/layout/site-footer/site-footer.component.ts
+++ b/src/app/shared/layout/site-footer/site-footer.component.ts
@@ -8,7 +8,7 @@ import { Component } from '@angular/core';
  selector: 'app-site-footer',
  styles: [`
    :host{display:block}
-    .bar{background:var(--rhc-color-donkerblauw-700);color:var(--rhc-color-foreground-on-primary);margin-block-start:var(--rhc-space-max-5xl);inline-size:100%}
+    .bar{background:var(--rhc-color-layout);color:var(--rhc-color-foreground-on-primary);margin-block-start:var(--rhc-space-max-5xl);inline-size:100%}
    .inner{max-inline-size:var(--app-content-max);margin-inline:auto;padding:var(--rhc-space-max-3xl) var(--rhc-space-max-2xl);box-sizing:border-box;display:flex;gap:var(--rhc-space-max-3xl);flex-wrap:wrap;justify-content:space-between}
    .tagline{font-style:italic;font-weight:var(--rhc-text-font-weight-semi-bold);font-size:var(--rhc-text-font-size-lg);max-inline-size:18rem}
    .ministry{margin-block-start:var(--rhc-space-max-md);font-size:var(--rhc-text-font-size-sm);color:var(--rhc-color-foreground-on-primary)}
@@ -16,7 +16,7 @@ import { Component } from '@angular/core';
    .links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--rhc-space-max-sm);font-size:var(--rhc-text-font-size-sm)}
    .links a{color:var(--rhc-color-foreground-on-primary);text-decoration:none}
    .links a:hover{text-decoration:underline}
-    .meta{inline-size:100%;border-block-start:var(--rhc-border-width-sm) solid var(--rhc-color-lintblauw-600);margin-block-start:var(--rhc-space-max-xl);padding-block-start:var(--rhc-space-max-lg);font-size:var(--rhc-text-font-size-sm);opacity:.85}
+    .meta{inline-size:100%;border-block-start:var(--rhc-border-width-sm) solid rgb(255 255 255 / 0.25);margin-block-start:var(--rhc-space-max-xl);padding-block-start:var(--rhc-space-max-lg);font-size:var(--rhc-text-font-size-sm);opacity:.85}
  `],
  template: `
    <footer class="bar">
--- a/src/app/shared/layout/site-header/site-header.component.ts
+++ b/src/app/shared/layout/site-header/site-header.component.ts
@@ -1,62 +1,81 @@
-import { Component, computed, inject, input } from '@angular/core';
+import { Component, computed, inject } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
-import { NavigationEnd, Router, RouterLink } from '@angular/router';
+import { NavigationEnd, Router, RouterLink, RouterLinkActive } from '@angular/router';
 import { filter, map } from 'rxjs/operators';
 import { SESSION_PORT } from '@shared/application/session.port';
 import { BreadcrumbComponent } from '@shared/layout/breadcrumb/breadcrumb.component';
 import { trailFor } from '@shared/layout/breadcrumb/breadcrumb-trail';

-/** Organism: Rijksoverheid-style site header. Two tiers, like rijksoverheid.nl:
-    a white brand bar (wordmark + session/logout) over a lint-blue bar carrying
-    the breadcrumb. ponytail: text wordmark, not the licensed Rijksoverheid logo;
-    no search box (no search feature yet). */
+interface HeaderNavItem {
+  readonly label: string;
+  readonly to: string;
+}
+
+const NAV_ITEMS: readonly HeaderNavItem[] = [
+  { label: $localize`:@@header.nav.overzicht:Overzicht`, to: '/dashboard' },
+  { label: $localize`:@@header.nav.gegevens:Mijn gegevens`, to: '/registratie' },
+  { label: $localize`:@@header.nav.herregistratie:Herregistratie`, to: '/herregistratie' },
+  { label: $localize`:@@header.nav.inschrijven:Inschrijven`, to: '/registreren' },
+];
+
+/** Organism: CIBG Huisstijl site header — logo block, robijn titlebar (breadcrumb +
+    user menu), horizontal nav. ponytail: text wordmark, not the licensed Rijksoverheid
+    beeldmerk; no search box (no search feature yet). */
@Component({
  selector: 'app-site-header',
-  imports: [RouterLink, BreadcrumbComponent],
+  imports: [RouterLink, RouterLinkActive, BreadcrumbComponent],
  styles: [`
-    :host{display:block}
-    /* Tier 1 — white brand bar */
-    .brandbar{background:var(--rhc-color-wit);border-block-end:var(--rhc-border-width-sm) solid var(--rhc-color-border-subtle);inline-size:100%}
-    .brandbar .inner{display:flex;align-items:center;gap:var(--rhc-space-max-xl);max-inline-size:var(--app-content-max);margin-inline:auto;padding:var(--rhc-space-max-lg) var(--rhc-space-max-2xl);box-sizing:border-box}
-    .brand{display:flex;align-items:center;gap:var(--rhc-space-max-lg);color:var(--rhc-color-foreground-default);text-decoration:none}
-    .mark{display:inline-block;inline-size:var(--rhc-space-max-md);block-size:var(--rhc-space-max-4xl);background:var(--rhc-color-lintblauw-700)}
-    .name{font-weight:var(--rhc-text-font-weight-bold);line-height:var(--rhc-text-line-height-sm)}
-    .sub{font-weight:var(--rhc-text-font-weight-regular);font-size:var(--rhc-text-font-size-sm);color:var(--rhc-color-foreground-subtle)}
-    .session{margin-inline-start:auto;display:flex;align-items:center;gap:var(--rhc-space-max-lg);font-size:var(--rhc-text-font-size-sm)}
-    .user{color:var(--rhc-color-foreground-subtle)}
-    .logout{background:none;border:0;padding:0;cursor:pointer;color:var(--rhc-color-foreground-link);text-decoration:underline;font:inherit}
-    .logout:hover{color:var(--rhc-color-foreground-link-hover)}
-    /* Tier 2 — blue breadcrumb bar */
-    .navbar{background:var(--rhc-color-lintblauw-700);color:var(--rhc-color-foreground-on-primary);inline-size:100%}
-    .navbar .inner{max-inline-size:var(--app-content-max);margin-inline:auto;padding:var(--rhc-space-max-md) var(--rhc-space-max-2xl);box-sizing:border-box}
+    .logout{background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;font:inherit;color:inherit}
+    /* CIBG's header nav has no bg by default in this build — the grey bar is ours.
+       (.titlebar keeps its own robijn fill — --ro-layout — untouched; the breadcrumb
+       inside it has no background of its own, so the bar's colour shows through.) */
+    nav{background-color:var(--rhc-color-cool-grey-200)}
  `],
  template: `
-    <div class="brandbar">
-      <div class="inner">
-        <a routerLink="/dashboard" class="brand">
-          <span aria-hidden="true" class="mark"></span>
-          <span class="name" i18n="@@header.brand">Rijksoverheid<br><span class="sub">BIG-register</span></span>
-        </a>
-        <span class="portal sub">{{ subtitle() }}</span>
-        @if (session(); as s) {
-          <span class="session">
-            <span class="user"><ng-container i18n="@@header.ingelogdAls">Ingelogd als</ng-container> {{ s.naam }}</span>
-            <button type="button" class="logout" (click)="logout()" i18n="@@header.uitloggen">Uitloggen</button>
-          </span>
-        }
-      </div>
-    </div>
-    @if (trail().length) {
-      <div class="navbar">
-        <div class="inner">
-          <app-breadcrumb class="inverse" [items]="trail()" />
+    <header>
+      <div class="logo">
+        <div class="logo__wrapper">
+          <a routerLink="/dashboard" class="logo__link">
+            <figure class="logo__figure">
+              <figcaption class="logo__text">
+                <span class="logo__sender" i18n="@@header.sender">BIG-register</span>
+                <span class="logo__ministry" i18n="@@header.ministry">Ministerie van Volksgezondheid, Welzijn en Sport</span>
+              </figcaption>
+            </figure>
+          </a>
        </div>
      </div>
-    }
+      <div class="titlebar">
+        <div class="container">
+          <div class="row">
+            <div class="title col-md-7">
+              @if (trail().length) { <app-breadcrumb [items]="trail()" /> }
+            </div>
+            <div class="user-menu col-md-5">
+              @if (session(); as s) {
+                <div><span class="login-name">{{ s.naam }}</span></div>
+                <div><button type="button" class="logout" (click)="logout()" i18n="@@header.uitloggen">Uitloggen</button></div>
+              }
+            </div>
+          </div>
+        </div>
+      </div>
+      <nav i18n-aria-label="@@header.navAria" aria-label="Hoofdnavigatie">
+        <div class="container">
+          <ul>
+            @for (item of navItems; track item.to) {
+              <li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
+                <a [routerLink]="item.to">{{ item.label }}</a>
+              </li>
+            }
+          </ul>
+        </div>
+      </nav>
+    </header>
  `,
 })
 export class SiteHeaderComponent {
-  subtitle = input($localize`:@@header.subtitle:Mijn omgeving`);
+  protected readonly navItems = NAV_ITEMS;

  private router = inject(Router);
  private sessionPort = inject(SESSION_PORT, { optional: true });
--- a/src/app/shared/layout/site-header/site-header.stories.ts
+++ b/src/app/shared/layout/site-header/site-header.stories.ts
@@ -9,9 +9,8 @@ const meta: Meta<SiteHeaderComponent> = {
  decorators: [applicationConfig({ providers: [provideRouter([])] })],
  render: (args) => ({
    props: args,
-    template: `<app-site-header [subtitle]="subtitle" />`,
+    template: `<app-site-header />`,
  }),
-  args: { subtitle: 'Mijn omgeving' },
 };
 export default meta;
 type Story = StoryObj<SiteHeaderComponent>;
--- a/src/app/shared/layout/wizard-shell/wizard-shell.component.ts
+++ b/src/app/shared/layout/wizard-shell/wizard-shell.component.ts
@@ -5,6 +5,11 @@ import { AlertComponent } from '@shared/ui/alert/alert.component';
 import { SpinnerComponent } from '@shared/ui/spinner/spinner.component';
 import { StepperComponent } from '@shared/ui/stepper/stepper.component';

+/** CIBG procesnavigatie primary-button copy for a non-final step: "Naar stap 2 - Werk".
+    Shared so every wizard's `primaryLabel` reads the same way. */
+export const naarStapLabel = (stepNumber: number, stepLabel: string) =>
+  $localize`:@@wizard.naarStap:Naar stap ${stepNumber}:nummer: - ${stepLabel}:label:`;
+
 /** A flat validation error pointing at a field: `id` matches the field's anchor. */
 export interface WizardError {
  readonly id: string;
@@ -15,9 +20,9 @@ export type WizardStatus = 'editing' | 'submitting' | 'submitted' | 'failed';

 /**
 * Template: the canonical shell every wizard renders into, so they cannot drift.
- * It owns the consistent outline — stepper + focusable step heading + error
- * summary + the <form> + the Back/Next/Cancel action bar + the submitting/
- * submitted/failed states — and the a11y focus management.
+ * It owns the consistent outline — CIBG stappenindicator (title merged in) + error
+ * summary + the horizontal <form> + the CIBG procesnavigatie button row + the
+ * submitting/submitted/failed states — and the a11y focus management.
 *
 * Presentational and unidirectional: all state stays in the wizard container
 * (the Elm-style store). Inputs flow down; the container reacts to the outputs
@@ -34,8 +39,8 @@ export type WizardStatus = 'editing' | 'submitting' | 'submitted' | 'failed';
  template: `
    @switch (status()) {
      @case ('editing') {
-        <app-stepper class="app-section" [steps]="steps()" [current]="current()" />
-        <h2 #stepHeading tabindex="-1" class="app-section">{{ stepTitle() }}</h2>
+        <app-stepper class="app-section" [steps]="steps()" [current]="current()"
+          [processName]="processName()" [stepTitle]="stepTitle()" (stepSelected)="goToStep.emit($event)" />
        @if (errors().length) {
          <div #errorSummary tabindex="-1" role="alert" aria-labelledby="wizard-error-title" class="app-section">
            <app-alert type="error">
@@ -48,13 +53,19 @@ export type WizardStatus = 'editing' | 'submitting' | 'submitted' | 'failed';
            </app-alert>
          </div>
        }
-        <form (ngSubmit)="primary.emit()" class="app-form app-form-panel">
+        <form (ngSubmit)="primary.emit()" class="form-horizontal app-section">
+          <div class="form-header">
+            <div class="form-action"><span class="meta" i18n="@@form.verplichteVelden">* verplichte velden</span></div>
+          </div>
          <ng-content />
-          <div class="app-button-row app-button-row--spaced">
+          <hr />
+          <div class="d-flex flex-column flex-sm-row-reverse">
+            <div class="m-0"><app-button type="submit" variant="primary">{{ primaryLabel() }}</app-button></div>
            @if (canGoBack()) {
-              <app-button type="button" variant="secondary" (click)="back.emit()" i18n="@@wizard.vorige">Vorige</app-button>
+              <app-button type="button" variant="subtle" class="me-auto" (click)="back.emit()" i18n="@@wizard.terugVorige">Terug naar vorige stap</app-button>
            }
-            <app-button type="submit" variant="primary">{{ primaryLabel() }}</app-button>
+          </div>
+          <div class="app-section">
            <app-button type="button" variant="subtle" (click)="cancel.emit()" i18n="@@wizard.annuleren">Annuleren</app-button>
          </div>
        </form>
@@ -78,6 +89,8 @@ export class WizardShellComponent {
  steps = input.required<string[]>();
  current = input.required<number>();
  stepTitle = input.required<string>();
+  /** Overall process name, shown above the step title (e.g. "Herregistratie aanvragen"). */
+  processName = input('');
  status = input.required<WizardStatus>();
  primaryLabel = input.required<string>();
  canGoBack = input(false);
@@ -89,6 +102,8 @@ export class WizardShellComponent {
  back = output<void>();
  cancel = output<void>();
  retry = output<void>();
+  /** A visited step number was clicked in the stepper — back-navigation only. */
+  goToStep = output<number>();

  /** Error-summary link: focus the field instead of letting the browser navigate.
      A fragment href resolves against <base href="/">, not the current route, so
@@ -98,18 +113,18 @@ export class WizardShellComponent {
    document.getElementById(id)?.focus(); // focus() scrolls the input into view
  }

-  private stepHeading = viewChild<ElementRef<HTMLElement>>('stepHeading');
+  private stepper = viewChild(StepperComponent);
  private errorSummary = viewChild<ElementRef<HTMLElement>>('errorSummary');

  constructor() {
-    // A11y: move focus to the step heading when the step changes (skip first run
+    // A11y: move focus to the step title when the step changes (skip first run
    // so we don't grab focus on initial load). Tracks current(), which is value-
    // stable across keystrokes, so typing never steals focus.
    let firstStep = true;
    effect(() => {
      this.current();
      if (firstStep) { firstStep = false; return; }
-      untracked(() => queueMicrotask(() => this.stepHeading()?.nativeElement.focus()));
+      untracked(() => queueMicrotask(() => this.stepper()?.focusTitle()));
    });
    // A11y: when validation errors first appear (after a failed submit), move
    // focus to the error summary so it's announced. Only on the rising edge
--- a/src/app/shared/layout/wizard-shell/wizard-shell.stories.ts
+++ b/src/app/shared/layout/wizard-shell/wizard-shell.stories.ts
@@ -8,8 +8,9 @@ const meta: Meta<WizardShellComponent> = {
    props: args,
    template: `
      <app-wizard-shell
-        [steps]="steps" [current]="current" [stepTitle]="stepTitle" [status]="status"
-        [primaryLabel]="primaryLabel" [canGoBack]="canGoBack" [errors]="errors" [errorMessage]="errorMessage">
+        [steps]="steps" [current]="current" [stepTitle]="stepTitle" [processName]="processName" [status]="status"
+        [primaryLabel]="primaryLabel" [canGoBack]="canGoBack" [errors]="errors" [errorMessage]="errorMessage"
+        (goToStep)="goToStep($event)">
        <p class="rhc-paragraph">Voorbeeld-stapinhoud (de stapvelden worden hier geprojecteerd).</p>
        <div wizardSuccess><p class="rhc-paragraph">Uw aanvraag is ontvangen.</p></div>
      </app-wizard-shell>`,
@@ -19,7 +20,10 @@ export default meta;
 type Story = StoryObj<WizardShellComponent>;

 const steps = ['Adres', 'Beroep', 'Controle'];
-const base = { steps, current: 1, stepTitle: 'Beroep op basis van uw diploma', primaryLabel: 'Volgende', canGoBack: true, errors: [], errorMessage: '' };
+const base = {
+  steps, current: 1, stepTitle: 'Beroep op basis van uw diploma', processName: 'Inschrijven in het BIG-register',
+  primaryLabel: 'Volgende', canGoBack: true, errors: [], errorMessage: '', goToStep: () => {},
+};

 export const Editing: Story = { args: { ...base, status: 'editing' } };
 export const EditingMetFouten: Story = {
--- a/src/app/shared/ui/application-link/application-link.component.ts
+++ b/src/app/shared/ui/application-link/application-link.component.ts
@@ -0,0 +1,52 @@
+import { Component, input, output } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { RouterLink } from '@angular/router';
+
+/** Molecule: one row in a CIBG Huisstijl "aanvragen" list — `<li><a class="application">`
+    with a title, optional subtitle/status/cta (see application-list.component.ts).
+    Renders a plain (non-interactive) row when there's nothing to navigate to — the
+    chevron/hover styling only applies to the `<a>`. A `[applicationActions]` slot
+    projects a sibling action (e.g. "Annuleren") after the anchor — a button can't
+    nest inside the anchor itself. */
+@Component({
+  selector: 'app-application-link',
+  imports: [RouterLink, NgTemplateOutlet],
+  // display:contents so the <li> becomes a real DOM/accessibility-tree child of the
+  // parent <ul> — a wrapper host between them can break list semantics for AT.
+  styles: [`:host{display:contents}`],
+  template: `
+    <li>
+      @if (to()) {
+        <a class="application" [routerLink]="to()"><ng-container [ngTemplateOutlet]="body" /></a>
+      } @else if (clickable()) {
+        <a href="#" class="application" (click)="onActivate($event)"><ng-container [ngTemplateOutlet]="body" /></a>
+      } @else {
+        <div><ng-container [ngTemplateOutlet]="body" /></div>
+      }
+      <ng-content select="[applicationActions]" />
+    </li>
+    <ng-template #body>
+      <h3 class="application-title">{{ heading() }}</h3>
+      @if (subtitle()) { <div class="subtitle">{{ subtitle() }}</div> }
+      @if (status()) { <div class="status">{{ status() }}</div> }
+      @if (cta()) { <div class="cta">{{ cta() }}</div> }
+    </ng-template>
+  `,
+})
+export class ApplicationLinkComponent {
+  heading = input.required<string>();
+  subtitle = input('');
+  status = input('');
+  cta = input('');
+  /** Set for a plain routerLink navigation (e.g. the "Wat wilt u doen?" actions). */
+  to = input('');
+  /** Set when the row navigates imperatively (e.g. resume with query params) — the
+      row still renders as a clickable `<a>`, but `activate` decides what happens. */
+  clickable = input(false);
+  activate = output<void>();
+
+  protected onActivate(ev: Event) {
+    ev.preventDefault(); // fragment href resolves against <base href>, not the route
+    this.activate.emit();
+  }
+}
--- a/src/app/shared/ui/application-link/application-link.stories.ts
+++ b/src/app/shared/ui/application-link/application-link.stories.ts
@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { applicationConfig } from '@storybook/angular';
+import { provideRouter } from '@angular/router';
+import { ApplicationLinkComponent } from './application-link.component';
+
+const meta: Meta<ApplicationLinkComponent> = {
+  title: 'Molecules/Application Link',
+  component: ApplicationLinkComponent,
+  decorators: [applicationConfig({ providers: [provideRouter([])] })],
+  render: (args) => ({
+    props: args,
+    // Rows are <li>s — a real list gives them their normal layout in the story.
+    template: `<ul class="list-unstyled"><app-application-link [heading]="heading" [subtitle]="subtitle" [status]="status" [cta]="cta" [to]="to" [clickable]="clickable" /></ul>`,
+  }),
+};
+export default meta;
+type Story = StoryObj<ApplicationLinkComponent>;
+
+export const Navigatie: Story = {
+  args: { heading: 'Inschrijven', subtitle: 'Schrijf u in in het BIG-register.', to: '/registreren' },
+};
+export const Actie: Story = {
+  args: { heading: 'Inschrijving', status: 'Stap 2 van 3', cta: 'Verder gaan', clickable: true },
+};
+export const NietInteractief: Story = {
+  args: { heading: 'Herregistratie', status: 'Referentie 2024-00123 · ingediend op 12 mei 2024' },
+};
--- a/src/app/shared/ui/application-list/application-list.component.ts
+++ b/src/app/shared/ui/application-list/application-list.component.ts
@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+
+/** Molecule: wraps `<app-application-link>` rows in the CIBG Huisstijl "aanvragen"
+    dashboard block (`.dashboard-block.applications`) — see
+    designsystem.cibg.nl/componenten/aanvragen. Used for both the "Mijn aanvragen"
+    list and the "Wat wilt u doen?" action list on the dashboard. */
+@Component({
+  selector: 'app-application-list',
+  template: `
+    <div class="dashboard-block applications">
+      <ul class="list-unstyled">
+        <ng-content />
+      </ul>
+    </div>
+  `,
+})
+export class ApplicationListComponent {}
--- a/src/app/shared/ui/application-list/application-list.stories.ts
+++ b/src/app/shared/ui/application-list/application-list.stories.ts
@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { applicationConfig, moduleMetadata } from '@storybook/angular';
+import { provideRouter } from '@angular/router';
+import { ApplicationListComponent } from './application-list.component';
+import { ApplicationLinkComponent } from '@shared/ui/application-link/application-link.component';
+
+const meta: Meta<ApplicationListComponent> = {
+  title: 'Molecules/Application List',
+  component: ApplicationListComponent,
+  decorators: [
+    applicationConfig({ providers: [provideRouter([])] }),
+    moduleMetadata({ imports: [ApplicationLinkComponent] }),
+  ],
+  render: () => ({
+    template: `
+      <app-application-list>
+        <app-application-link heading="Inschrijving" status="Stap 2 van 3" cta="Verder gaan" clickable="true" />
+        <app-application-link heading="Herregistratie" status="Referentie 2024-00123 · ingediend op 12 mei 2024" />
+        <app-application-link heading="Inschrijven" subtitle="Schrijf u in in het BIG-register." to="/registreren" />
+      </app-application-list>`,
+  }),
+};
+export default meta;
+type Story = StoryObj<ApplicationListComponent>;
+
+export const Default: Story = {};
--- a/src/app/shared/ui/checkbox/checkbox.component.ts
+++ b/src/app/shared/ui/checkbox/checkbox.component.ts
@@ -1,22 +1,17 @@
 import { Component, forwardRef, input } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

-/** Atom: a labelled checkbox wired as a form control (ngModel/reactive). Native
-    input for full keyboard + screen-reader support; the label is the click target. */
+/** Atom: a labelled checkbox wired as a form control (ngModel/reactive). Thin
+    wrapper over the CIBG Huisstijl `.form-check.styled` checkbox CSS; native
+    input for full keyboard + screen-reader support. */
@Component({
  selector: 'app-checkbox',
-  styles: [`
-    :host{display:block}
-    label{display:inline-flex;align-items:center;gap:var(--rhc-space-max-md);cursor:pointer}
-    /* form-check-input floats/margins for the .form-check layout; here it's flex-aligned. */
-    .form-check-input{margin:0;float:none;inline-size:1.1rem;block-size:1.1rem}
-  `],
  template: `
-    <label class="form-check-label">
+    <div class="form-check styled">
      <input class="form-check-input" type="checkbox" [id]="checkboxId()" [checked]="value" [disabled]="disabled"
        (change)="onToggle($event)" (blur)="onTouched()" />
-      <span>{{ label() }}</span>
-    </label>
+      <label class="form-check-label" [for]="checkboxId()">{{ label() }}</label>
+    </div>
  `,
  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CheckboxComponent), multi: true }],
 })
--- a/src/app/shared/ui/confirmation/confirmation.component.ts
+++ b/src/app/shared/ui/confirmation/confirmation.component.ts
@@ -0,0 +1,25 @@
+import { Component, input } from '@angular/core';
+
+/** Molecule: the CIBG Huisstijl "bevestiging" (confirmation) — an animated green
+    checkmark banner shown at the end of an aanvraagproces, ONLY when the user has
+    nothing left to do (see designsystem.cibg.nl/componenten/bevestiging). Follow-up
+    content (a reference number, a restart button) is projected below the banner. */
+@Component({
+  selector: 'app-confirmation',
+  template: `
+    <div class="confirmation">
+      <svg class="confirmation__checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52" height="52" width="52">
+        <circle class="confirmation__checkmark-circle" cx="26" cy="26" r="18" fill="none" />
+        <path class="confirmation__checkmark-check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
+      </svg>
+      <div class="confirmation__title">
+        <span class="visually-hidden">{{ successPrefix() }}</span>{{ title() }}
+      </div>
+    </div>
+    <ng-content />
+  `,
+})
+export class ConfirmationComponent {
+  title = input.required<string>();
+  successPrefix = input($localize`:@@confirmation.succes:Succes:`);
+}
--- a/src/app/shared/ui/confirmation/confirmation.stories.ts
+++ b/src/app/shared/ui/confirmation/confirmation.stories.ts
@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { ConfirmationComponent } from './confirmation.component';
+
+const meta: Meta<ConfirmationComponent> = {
+  title: 'Molecules/Confirmation',
+  component: ConfirmationComponent,
+  render: (args) => ({
+    props: args,
+    template: `
+      <app-confirmation [title]="title">
+        <p class="app-section">Uw referentienummer is 2024-00123. Bewaar dit nummer voor uw administratie.</p>
+      </app-confirmation>`,
+  }),
+};
+export default meta;
+type Story = StoryObj<ConfirmationComponent>;
+
+export const Default: Story = { args: { title: 'Uw aanvraag is verstuurd' } };
--- a/src/app/shared/ui/data-row/data-row.component.ts
+++ b/src/app/shared/ui/data-row/data-row.component.ts
@@ -1,28 +1,15 @@
 import { Component, input } from '@angular/core';

-/** Molecule: one key/value row in a data summary. Hand-rolled from tokens
-    (CIBG has no data-summary component). Wrap several in a <dl> (see registration-summary). */
+/** Molecule: one key/value row in a CIBG Huisstijl "controlestap" data summary
+    (`dt.col-md-4` / `dd.col-md-8`). `display:contents` so the dt/dd become direct
+    flex children of the parent `<dl class="row">` — the Bootstrap grid classes
+    need that to lay out correctly. Wrap several in a `<dl class="row mb-0">`. */
@Component({
  selector: 'app-data-row',
-  styles: [`
-    .item{
-      display:grid;
-      grid-template-columns:minmax(8rem, 14rem) 1fr;
-      gap:var(--rhc-space-max-md);
-      padding-block:var(--rhc-space-max-md);
-      border-block-end:var(--rhc-border-width-sm) solid var(--rhc-color-border-subtle);
-      margin:0;
-    }
-    /* drop the divider on the last row so the list ends cleanly */
-    :host:last-child .item{border-block-end-style:none}
-    .item-key{font-weight:var(--rhc-text-font-weight-semi-bold);margin:0}
-    .item-value{margin:0}
-  `],
+  styles: [`:host{display:contents}`],
  template: `
-    <div class="item">
-      <dt class="item-key">{{ key() }}</dt>
-      <dd class="item-value"><ng-content>{{ value() }}</ng-content></dd>
-    </div>
+    <dt class="col-md-4">{{ key() }}</dt>
+    <dd class="col-md-8"><ng-content>{{ value() }}</ng-content></dd>
  `,
 })
 export class DataRowComponent {
--- a/src/app/shared/ui/data-row/data-row.stories.ts
+++ b/src/app/shared/ui/data-row/data-row.stories.ts
@@ -6,8 +6,8 @@ const meta: Meta<DataRowComponent> = {
  component: DataRowComponent,
  render: (args) => ({
    props: args,
-    // Rows live inside an RHC data-summary list (dt/dd); wrap so it renders in context.
-    template: `<dl class="rhc-data-summary"><app-data-row [key]="key" [value]="value" /></dl>`,
+    // Rows are dt.col-md-4/dd.col-md-8 flex children of a Bootstrap .row dl (CIBG controlestap).
+    template: `<dl class="row mb-0"><app-data-row [key]="key" [value]="value" /></dl>`,
  }),
  args: { key: 'BIG-nummer', value: '19012345601' },
 };
--- a/src/app/shared/ui/form-field/form-field.component.ts
+++ b/src/app/shared/ui/form-field/form-field.component.ts
@@ -1,28 +1,24 @@
 import { Component, booleanAttribute, input } from '@angular/core';

-/** Molecule: form field = label + projected control + optional error/description.
-    Reused by both the login form and the change-request form. */
+/** Molecule: form field = label + projected control + optional error/description,
+    in the CIBG Huisstijl horizontal `form-group row` layout (label `col-md-4`,
+    control `col-md-8`). The required asterisk comes from
+    `.form-group.required>.col-form-label::after` — no separate "(verplicht)" text.
+    Reused by the login form, the change-request form, and every wizard step. */
@Component({
  selector: 'app-form-field',
-  styles: [`
-    :host{display:block}
-    .label{display:block;font-weight:var(--rhc-text-font-weight-semi-bold);margin-block-end:var(--rhc-space-max-sm)}
-    .req{font-weight:var(--rhc-text-font-weight-regular);color:var(--rhc-color-foreground-subtle)}
-    .desc{color:var(--rhc-color-foreground-subtle);font-size:var(--rhc-text-font-size-sm);margin-block-end:var(--rhc-space-max-sm)}
-    .error{color:var(--rhc-color-foreground-default);font-weight:var(--rhc-text-font-weight-semi-bold);margin-block-start:var(--rhc-space-max-sm);border-inline-start:var(--rhc-border-width-md) solid var(--rhc-color-rood-500);padding-inline-start:var(--rhc-space-max-md)}
-  `],
  template: `
-    <div class="form-field">
-      <label class="form-label label" [id]="fieldId() + '-label'" [for]="fieldId()">
-        {{ label() }}@if (required()) { <span class="req" i18n="@@formField.verplicht">(verplicht)</span> }
-      </label>
-      @if (description()) {
-        <div class="form-text desc" [id]="fieldId() + '-desc'">{{ description() }}</div>
-      }
-      <ng-content />
-      @if (error()) {
-        <div class="error" [id]="fieldId() + '-error'" role="alert">{{ error() }}</div>
-      }
+    <div class="form-group row" [class.required]="required()">
+      <label class="col-md-4 col-form-label" [id]="fieldId() + '-label'" [for]="fieldId()">{{ label() }}</label>
+      <div class="col-md-8 col-control">
+        @if (description()) {
+          <div class="form-text" [id]="fieldId() + '-desc'">{{ description() }}</div>
+        }
+        <ng-content />
+        @if (error()) {
+          <div [id]="fieldId() + '-error'" role="alert"><span class="errortext">{{ error() }}</span></div>
+        }
+      </div>
    </div>
  `,
 })
--- a/src/app/shared/ui/form-field/form-field.stories.ts
+++ b/src/app/shared/ui/form-field/form-field.stories.ts
@@ -9,18 +9,21 @@ const meta: Meta<FormFieldComponent> = {
  decorators: [moduleMetadata({ imports: [TextInputComponent] })],
  render: (args) => ({
    props: args,
+    // form-horizontal + .row context, same as every real caller (wizard-shell, login-form, …).
    template: `
-      <app-form-field [label]="label" [fieldId]="fieldId" [description]="description" [error]="error">
-        <app-text-input [inputId]="fieldId" [invalid]="!!error" placeholder="Vul in" />
-      </app-form-field>`,
+      <form class="form-horizontal">
+        <app-form-field [label]="label" [fieldId]="fieldId" [description]="description" [error]="error" [required]="required">
+          <app-text-input [inputId]="fieldId" [invalid]="!!error" placeholder="Vul in" />
+        </app-form-field>
+      </form>`,
  }),
 };
 export default meta;
 type Story = StoryObj<FormFieldComponent>;

 export const Default: Story = {
-  args: { label: 'BSN', fieldId: 'bsn', description: '9 cijfers' },
+  args: { label: 'BSN', fieldId: 'bsn', description: '9 cijfers', required: true },
 };
 export const WithError: Story = {
-  args: { label: 'Straat en huisnummer', fieldId: 'street', error: 'Dit veld is verplicht.' },
+  args: { label: 'Straat en huisnummer', fieldId: 'street', error: 'Dit veld is verplicht.', required: true },
 };
--- a/src/app/shared/ui/radio-group/radio-group.component.ts
+++ b/src/app/shared/ui/radio-group/radio-group.component.ts
@@ -13,21 +13,11 @@ export const JA_NEE: RadioOption[] = [
  { value: 'nee', label: $localize`:@@common.nee:Nee` },
 ];

-/** Atom: a radio group. Thin wrapper over the Utrecht/RHC radio CSS, wired as a
-    form control so it works with ngModel just like the text-input atom. */
+/** Atom: a radio group. Thin wrapper over the CIBG Huisstijl `.form-check.styled`
+    radio CSS, wired as a form control so it works with ngModel just like the
+    text-input atom. */
@Component({
  selector: 'app-radio-group',
-  styles: [`
-    .radio-option {
-      display: flex;
-      align-items: center;
-      gap: var(--rhc-space-max-md);
-      padding-block: var(--rhc-space-max-sm);
-      margin: 0;
-    }
-    /* form-check-input floats/margins for the .form-check layout; here it's flex-aligned. */
-    .radio-option .form-check-input { margin: 0; float: none; }
-  `],
  template: `
    <div
      role="radiogroup"
@@ -35,19 +25,20 @@ export const JA_NEE: RadioOption[] = [
      [attr.aria-invalid]="invalid() ? 'true' : null"
      [attr.aria-describedby]="invalid() ? name() + '-error' : null">
      @for (opt of options(); track opt.value) {
-        <label class="form-check-label radio-option">
+        <div class="form-check styled">
          <input
            class="form-check-input"
            [class.is-invalid]="invalid()"
            type="radio"
+            [id]="name() + '-' + opt.value"
            [name]="name()"
            [value]="opt.value"
            [checked]="value === opt.value"
            [disabled]="disabled"
            (change)="select(opt.value)"
            (blur)="onTouched()" />
-          {{ opt.label }}
-        </label>
+          <label class="form-check-label" [for]="name() + '-' + opt.value">{{ opt.label }}</label>
+        </div>
      }
    </div>
  `,
--- a/src/app/shared/ui/review-section/review-section.component.ts
+++ b/src/app/shared/ui/review-section/review-section.component.ts
@@ -0,0 +1,39 @@
+import { Component, input, output } from '@angular/core';
+
+/** Molecule: one section of a CIBG Huisstijl "controlestap" (wizard review step) —
+    a heading with a "Wijzigen" link, and the section's `<app-data-row>`s in a
+    `.data-block > .block-wrapper > dl.row`. Domain-free; the caller supplies the
+    heading and decides what "Wijzigen" does (typically jump back to a step). */
+@Component({
+  selector: 'app-review-section',
+  template: `
+    <div class="d-flex">
+      <h2>{{ heading() }}</h2>
+      @if (showEdit()) {
+        <div class="ms-auto">
+          <a href="#" [attr.aria-label]="editAriaLabel() || editLabel()" (click)="onEdit($event)">{{ editLabel() }}</a>
+        </div>
+      }
+    </div>
+    <div class="data-block">
+      <div class="block-wrapper">
+        <dl class="row mb-0">
+          <ng-content />
+        </dl>
+      </div>
+    </div>
+  `,
+})
+export class ReviewSectionComponent {
+  heading = input.required<string>();
+  editLabel = input($localize`:@@reviewSection.wijzigen:Wijzigen`);
+  editAriaLabel = input('');
+  showEdit = input(true);
+
+  edit = output<void>();
+
+  protected onEdit(ev: Event) {
+    ev.preventDefault(); // fragment href resolves against <base href>, not the route
+    this.edit.emit();
+  }
+}
--- a/src/app/shared/ui/review-section/review-section.stories.ts
+++ b/src/app/shared/ui/review-section/review-section.stories.ts
@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { ReviewSectionComponent } from './review-section.component';
+import { DataRowComponent } from '@shared/ui/data-row/data-row.component';
+
+const meta: Meta<ReviewSectionComponent> = {
+  title: 'Molecules/Review Section',
+  component: ReviewSectionComponent,
+  decorators: [moduleMetadata({ imports: [DataRowComponent] })],
+  render: (args) => ({
+    props: args,
+    template: `
+      <app-review-section [heading]="heading" [editLabel]="editLabel" [editAriaLabel]="editAriaLabel" [showEdit]="showEdit">
+        <app-data-row key="Straat en huisnummer" value="Dorpsstraat 1" />
+        <app-data-row key="Postcode" value="1234 AB" />
+        <app-data-row key="Woonplaats" value="Utrecht" />
+      </app-review-section>`,
+  }),
+};
+export default meta;
+type Story = StoryObj<ReviewSectionComponent>;
+
+export const Default: Story = {
+  args: { heading: 'Adres en correspondentie', editAriaLabel: 'Wijzigen adresgegevens' },
+};
+export const ZonderWijzigen: Story = {
+  args: { heading: 'Adres en correspondentie', showEdit: false },
+};
--- a/src/app/shared/ui/stepper/stepper.component.ts
+++ b/src/app/shared/ui/stepper/stepper.component.ts
@@ -1,61 +1,71 @@
-import { Component, input } from '@angular/core';
+import { Component, ElementRef, input, output, viewChild } from '@angular/core';

-/** Molecule: a horizontal step indicator for a multi-step flow. Visual progress
-    plus accessible semantics — an ordered list with `aria-current="step"` on the
-    active step and a visually-hidden "Stap X van Y" summary. Domain-free. */
+/** Molecule: the CIBG Huisstijl "stappenindicator" — numbered circles (`.step-list`),
+    visited steps clickable for back-only navigation, and the step title merged into
+    the same block (process name + "Stap X van Y: Titel", per the aanvraagproces
+    pattern). Domain-free; forward navigation only via the wizard's own buttons. */
@Component({
  selector: 'app-stepper',
-  styles: [`
-    :host{display:block}
-    .sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
-    .steps{display:flex;list-style:none;margin:0;padding:0}
-    .step{
-      flex:1 1 0;min-inline-size:0;position:relative;
-      display:flex;flex-direction:column;align-items:center;gap:var(--rhc-space-max-sm);
-      text-align:center;color:var(--rhc-color-foreground-subtle);
-    }
-    /* connector line to the previous step, drawn behind the circles */
-    .step::before{
-      content:'';position:absolute;z-index:0;
-      inset-block-start:calc(var(--rhc-space-max-4xl) / 2);
-      inset-inline-start:-50%;inline-size:100%;block-size:var(--rhc-border-width-md);
-      background:var(--rhc-color-cool-grey-300);
-    }
-    .step:first-child::before{display:none}
-    .step--done::before,.step--current::before{background:var(--rhc-color-lintblauw-500)}
-    .num{
-      position:relative;z-index:1;display:grid;place-items:center;
-      inline-size:var(--rhc-space-max-4xl);block-size:var(--rhc-space-max-4xl);
-      border-radius:var(--rhc-border-radius-round);
-      border:var(--rhc-border-width-md) solid var(--rhc-color-cool-grey-300);
-      background:var(--rhc-color-wit);
-      font-weight:var(--rhc-text-font-weight-bold);
-    }
-    .label{font-size:var(--rhc-text-font-size-sm);padding-inline:var(--rhc-space-max-sm)}
-    .step--done .num{background:var(--rhc-color-lintblauw-500);border-color:var(--rhc-color-lintblauw-500);color:var(--rhc-color-foreground-on-primary)}
-    .step--current{color:var(--rhc-color-foreground-default)}
-    .step--current .num{background:var(--rhc-color-lintblauw-700);border-color:var(--rhc-color-lintblauw-700);color:var(--rhc-color-foreground-on-primary)}
-    .step--current .label{font-weight:var(--rhc-text-font-weight-semi-bold)}
-  `],
  template: `
-    <nav i18n-aria-label="@@stepper.aria" aria-label="Voortgang">
-      <p class="sr-only" i18n="@@stepper.stapVan">Stap {{ current() + 1 }} van {{ steps().length }}: {{ steps()[current()] }}</p>
-      <ol class="steps">
+    <div class="stepper">
+      <ol class="step-list order-1">
        @for (label of steps(); track label; let i = $index) {
-          <li
-            class="step"
-            [class.step--current]="i === current()"
-            [class.step--done]="i < current()"
-            [attr.aria-current]="i === current() ? 'step' : null">
-            <span class="num" aria-hidden="true">{{ i + 1 }}</span>
-            <span class="label">{{ label }}</span>
+          <li>
+            @if (i < current()) {
+              <a href="#" class="step visited" (click)="select($event, i)" [attr.aria-label]="terugNaar(i, label)">
+                <span class="visually-hidden" i18n="@@stepper.stap">Stap</span> {{ i + 1 }}
+                <span class="visually-hidden" i18n="@@stepper.voltooid">Voltooid</span>
+              </a>
+            } @else if (i === current()) {
+              <span class="step active" aria-current="step" [attr.aria-label]="huidigeStap(i, label)">
+                <span class="visually-hidden" i18n="@@stepper.stap">Stap</span> {{ i + 1 }}
+                <span class="visually-hidden" i18n="@@stepper.huidig">Huidige stap</span>
+              </span>
+            } @else {
+              <span class="step" [attr.aria-label]="stap(i, label)">
+                <span class="visually-hidden" i18n="@@stepper.stap">Stap</span> {{ i + 1 }}
+              </span>
+            }
          </li>
        }
      </ol>
-    </nav>
+      <h2 #title tabindex="-1" class="h1 order-0">
+        @if (processName()) { <span class="process-name">{{ processName() }}</span> }
+        <ng-container i18n="@@stepper.stapVan">Stap {{ current() + 1 }}<span class="visually-hidden"> van {{ steps().length }}</span>: {{ stepTitle() || steps()[current()] }}</ng-container>
+      </h2>
+    </div>
  `,
 })
 export class StepperComponent {
  steps = input.required<string[]>();
  current = input.required<number>();
+  /** Name of the overall process, shown above the step title (e.g. "Herregistratie aanvragen"). */
+  processName = input('');
+  /** Overrides the step label as the title; falls back to `steps()[current()]`. */
+  stepTitle = input('');
+
+  /** Emitted when a visited (earlier) step is clicked — back-navigation only. */
+  stepSelected = output<number>();
+
+  private titleEl = viewChild<ElementRef<HTMLElement>>('title');
+
+  /** wizard-shell calls this after a step change so the new title is announced. */
+  focusTitle(): void {
+    this.titleEl()?.nativeElement.focus();
+  }
+
+  protected select(ev: Event, i: number) {
+    ev.preventDefault(); // fragment href resolves against <base href>, not the route
+    this.stepSelected.emit(i);
+  }
+
+  protected stap(i: number, label: string) {
+    return $localize`:@@stepper.naarStap:Stap ${i + 1}:nummer: ${label}:label:`;
+  }
+  protected huidigeStap(i: number, label: string) {
+    return $localize`:@@stepper.huidigeStapLabel:Huidige stap, stap ${i + 1}:nummer: ${label}:label:`;
+  }
+  protected terugNaar(i: number, label: string) {
+    return $localize`:@@stepper.terugNaarStap:Terug naar stap ${i + 1}:nummer: ${label}:label:`;
+  }
 }
--- a/src/app/shared/ui/stepper/stepper.stories.ts
+++ b/src/app/shared/ui/stepper/stepper.stories.ts
@@ -6,14 +6,15 @@ const meta: Meta<StepperComponent> = {
  component: StepperComponent,
  render: (args) => ({
    props: args,
-    template: `<app-stepper [steps]="steps" [current]="current" />`,
+    template: `<app-stepper [steps]="steps" [current]="current" [processName]="processName" [stepTitle]="stepTitle" (stepSelected)="stepSelected($event)" />`,
  }),
 };
 export default meta;
 type Story = StoryObj<StepperComponent>;

 const steps = ['Adres', 'Beroep', 'Controle'];
+const base = { steps, processName: 'Inschrijven in het BIG-register', stepTitle: '', stepSelected: () => {} };

-export const Eerste: Story = { args: { steps, current: 0 } };
-export const Midden: Story = { args: { steps, current: 1 } };
-export const Laatste: Story = { args: { steps, current: 2 } };
+export const Eerste: Story = { args: { ...base, current: 0 } };
+export const Midden: Story = { args: { ...base, current: 1, stepTitle: 'Beroep op basis van uw diploma' } };
+export const Laatste: Story = { args: { ...base, current: 2 } };