diff --git a/docs/swr-loading-migration.md b/docs/swr-loading-migration.md
new file mode 100644
index 0000000..0fc714e
--- /dev/null
+++ b/docs/swr-loading-migration.md
@@ -0,0 +1,122 @@
+# Moving data loading to SWR
+
+## Where we are
+
+The frontend fetches data by hand. Each screen has a `useEffect` that calls an
+API function, stores the result in `useState`, and tracks its own `loading`
+flag. The guards look like this:
+
+```ts
+useEffect(() => {
+  if (authenticated && token && activeWorkspaceId) {
+    // fetch, set state, set loading false
+  }
+}, [authenticated, token, activeWorkspaceId]);
+```
+
+It works, but every screen repeats the same wiring, and "refresh on workspace
+switch" is done manually. There's no shared cache, so two screens asking for the
+same thing fetch it twice.
+
+The loading UI is already standard: one `CenteredProgress` component (a centered
+spinner, `role="status"`, screen-reader label, no visible text). Tables take a
+`loading` prop. None of that changes here — SWR just decides when `loading` is
+true.
+
+## Where we're going
+
+Use [SWR](https://swr.vercel.app/) to do the fetching. We picked SWR over
+TanStack Query because it's smaller and its conditional-key feature lines up
+with how we gate on auth and workspace.
+
+The key idea: a request key that's `null` means "not ready, don't fetch." So the
+auth/workspace guard becomes part of the key instead of an `if`:
+
+```ts
+const key = token && workspaceId ? ["forms", workspaceId] : null;
+const { data, isLoading } = useSWR(key, () => getSobaForms(token, workspaceId));
+```
+
+When `workspaceId` changes, the key changes, and SWR refetches on its own. That
+removes the manual refetch effects.
+
+## Plan
+
+Do it one screen at a time. Each phase is shippable on its own.
+
+### Phase B — set up SWR, migrate one screen
+
+1. Add the `swr` dependency.
+2. Wrap the app in `<SWRConfig>` (in `AppProviders`) with the default options we
+   want (e.g. don't revalidate on window focus unless we decide to).
+3. Write a small `useAuthedSWR` hook that reads the token and `activeWorkspaceId`
+   from the store, builds the key (or `null`), and calls the API function. It
+   returns SWR's `data`, `isLoading`, `isValidating`, `error`, and `mutate`.
+4. Migrate `FormList` to it. Delete the `useEffect`, the `useState`, and the
+   guard. Feed `isLoading` to the table's `loading` prop.
+5. Update the `FormList` test to render inside an `<SWRConfig>` that resets the
+   cache (see Testing below).
+
+After this, FormList is the reference. The rest copy it.
+
+### Phase C — migrate the other reads
+
+One per change, same shape as FormList:
+
+- `SubmissionList`
+- `SubmissionView`
+- `Header` (workspaces, current user)
+- the designer's schema/version loads
+
+Each migration deletes a `useEffect` and its guard. Workspace-switch refetch
+effects go away because the key handles it.
+
+### Phase D — writes and Redux cleanup
+
+- Move the create/save/publish calls to `useSWRMutation`, and call `mutate` to
+  refresh the affected list after a write.
+- Once a slice is only holding fetched data, delete it. `currentUserSlice` and
+  the list part of `workspaceSlice` are the candidates.
+- Keep in Redux what's actually client state: the Keycloak token and auth flags,
+  the selected `activeWorkspaceId`, and notifications.
+
+### Phase E — optional
+
+Add Next's `loading.tsx` files for route transitions, reusing `CenteredProgress`.
+Only worth it if the route-change flash bothers us.
+
+## How loading maps
+
+| State                                                     | What the user sees                                |
+| --------------------------------------------------------- | ------------------------------------------------- |
+| `isLoading` (first load, no data yet)                     | `CenteredProgress` / table `loading`              |
+| `isValidating` (background refresh, data already showing) | leave the data up; optionally a small inline hint |
+| `error`                                                   | the existing inline alert / empty state           |
+
+Don't show the full spinner on a background refresh — that's the point of
+splitting `isLoading` from `isValidating`.
+
+## Testing
+
+SWR caches across renders, so tests need a fresh cache each time or they leak
+into each other. Wrap the component under test:
+
+```tsx
+import { SWRConfig } from "swr";
+
+render(
+  <SWRConfig value={{ provider: () => new Map(), dedupingInterval: 0 }}>
+    <FormList />
+  </SWRConfig>,
+);
+```
+
+The fetch functions are already mocked the same way they are today, so the
+assertions don't change much — you're just driving them through SWR.
+
+## Notes
+
+- These are client-side reads, same as now. SWR runs in the browser; there's no
+  server-rendering change.
+- Don't touch the Form.io engine. This is about how SOBA loads its own data.
+- Token stays in Redux. The hook reads it for the key; SWR never owns auth.
diff --git a/frontend/app/[lang]/designer/[...formId]/page.tsx b/frontend/app/[lang]/designer/[...formId]/page.tsx
index 9f1398e..ccc7fac 100644
--- a/frontend/app/[lang]/designer/[...formId]/page.tsx
+++ b/frontend/app/[lang]/designer/[...formId]/page.tsx
@@ -1,5 +1,6 @@
 import { getDictionary, hasLocale, Locale } from '../../dictionaries';
 import FormDesignerLoader from '@/src/features/designer/ui/FormDesignerLoader';
+import { DsPageHeading } from '@/app/ui/DsPageHeading';
 import { notFound } from 'next/navigation';
 import { loadFeaturesMeta } from '@/src/shared/config/featuresMeta';
 import { createIsFeatureAllowed, FEATURE_CODES } from '@/src/shared/featureFlags/flags';
@@ -28,10 +29,14 @@ export default async function Page({ params }: PageProps) {
     notFound();
   }
 
-  const { formId } = await params;
+  const { lang, formId } = await params;
+  const dict = await getDictionary((hasLocale(lang) ? lang : 'en') as Locale);
 
   return (
     <section className="p-4" aria-labelledby="designer-heading">
+      <DsPageHeading id="designer-heading" className="visually-hidden">
+        {dict.general.formDesigner}
+      </DsPageHeading>
       <FormDesignerLoader id={formId} />
     </section>
   );
diff --git a/frontend/app/[lang]/designer/page.tsx b/frontend/app/[lang]/designer/page.tsx
index 733d464..59a0fdf 100644
--- a/frontend/app/[lang]/designer/page.tsx
+++ b/frontend/app/[lang]/designer/page.tsx
@@ -1,5 +1,6 @@
 import { getDictionary, hasLocale, Locale } from '../dictionaries';
 import FormDesignerLoader from '@/src/features/designer/ui/FormDesignerLoader';
+import { DsPageHeading } from '@/app/ui/DsPageHeading';
 import { notFound } from 'next/navigation';
 import { loadFeaturesMeta } from '@/src/shared/config/featuresMeta';
 import { createIsFeatureAllowed, FEATURE_CODES } from '@/src/shared/featureFlags/flags';
@@ -20,7 +21,6 @@ export async function generateMetadata({ params }: PageProps) {
   };
 }
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export default async function Page({ params }: PageProps) {
   const featuresMeta = await loadFeaturesMeta();
   const isFeatureAllowed = createIsFeatureAllowed(featuresMeta);
@@ -28,8 +28,14 @@ export default async function Page({ params }: PageProps) {
     notFound();
   }
 
+  const { lang } = await params;
+  const dict = await getDictionary((hasLocale(lang) ? lang : 'en') as Locale);
+
   return (
     <section className="p-4" aria-labelledby="designer-heading">
+      <DsPageHeading id="designer-heading" className="visually-hidden">
+        {dict.general.formDesigner}
+      </DsPageHeading>
       <FormDesignerLoader id={[]} />
     </section>
   );
diff --git a/frontend/app/[lang]/feedback/page.tsx b/frontend/app/[lang]/feedback/page.tsx
index 57472e4..6e8a7f5 100644
--- a/frontend/app/[lang]/feedback/page.tsx
+++ b/frontend/app/[lang]/feedback/page.tsx
@@ -1,4 +1,5 @@
 import { getDictionary, resolveLocale } from '../dictionaries';
+import { DsPageHeading } from '@/app/ui/DsPageHeading';
 
 type PageProps = {
   params: Promise<{ lang: string }>;
@@ -8,7 +9,7 @@ export async function generateMetadata({ params }: PageProps) {
   const locale = resolveLocale(param.lang);
   const dict = await getDictionary(locale);
   return {
-    title: `${dict.general.title}`,
+    title: `${dict.general.feedback} | ${dict.general.title}`,
     description: dict.general.description,
   };
 }
@@ -18,5 +19,12 @@ export default async function Page({ params }: PageProps) {
   const locale = resolveLocale(param.lang);
   const dict = await getDictionary(locale);
 
-  return <div>{dict.general.feedback}</div>;
+  return (
+    <section className="p-4" aria-labelledby="feedback-heading">
+      <DsPageHeading id="feedback-heading">{dict.general.feedback}</DsPageHeading>
+      <p className="mt-3 text-muted" data-testid="feedback-coming-soon">
+        {dict.general.comingSoon}
+      </p>
+    </section>
+  );
 }
diff --git a/frontend/app/[lang]/forms/page.tsx b/frontend/app/[lang]/forms/page.tsx
index 220898a..62236b7 100644
--- a/frontend/app/[lang]/forms/page.tsx
+++ b/frontend/app/[lang]/forms/page.tsx
@@ -26,12 +26,12 @@ export default async function Page({ params }: PageProps) {
   const locale = resolveLocale(param.lang);
   return (
     <AuthRedirect to={`/${locale}`} ifLogged={false}>
-      <div>
+      <section aria-labelledby="forms-heading">
         <FormList
           designModeEnabled={isFeatureAllowed(FEATURE_CODES.DESIGN_MODE)}
           submitModeEnabled={isFeatureAllowed(FEATURE_CODES.SUBMIT_MODE)}
         />
-      </div>
+      </section>
     </AuthRedirect>
   );
 }
diff --git a/frontend/app/[lang]/help/page.tsx b/frontend/app/[lang]/help/page.tsx
index e44580f..3ba84c6 100644
--- a/frontend/app/[lang]/help/page.tsx
+++ b/frontend/app/[lang]/help/page.tsx
@@ -1,4 +1,5 @@
 import { getDictionary, resolveLocale } from '../dictionaries';
+import { DsPageHeading } from '@/app/ui/DsPageHeading';
 
 type PageProps = {
   params: Promise<{ lang: string }>;
@@ -8,7 +9,7 @@ export async function generateMetadata({ params }: PageProps) {
   const locale = resolveLocale(param.lang);
   const dict = await getDictionary(locale);
   return {
-    title: `${dict.general.title}`,
+    title: `${dict.general.help} | ${dict.general.title}`,
     description: dict.general.description,
   };
 }
@@ -18,5 +19,12 @@ export default async function Page({ params }: PageProps) {
   const locale = resolveLocale(param.lang);
   const dict = await getDictionary(locale);
 
-  return <div>{dict.general.help}</div>;
+  return (
+    <section className="p-4" aria-labelledby="help-heading">
+      <DsPageHeading id="help-heading">{dict.general.help}</DsPageHeading>
+      <p className="mt-3 text-muted" data-testid="help-coming-soon">
+        {dict.general.comingSoon}
+      </p>
+    </section>
+  );
 }
diff --git a/frontend/app/[lang]/meta/page.tsx b/frontend/app/[lang]/meta/page.tsx
deleted file mode 100644
index 6ed5193..0000000
--- a/frontend/app/[lang]/meta/page.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { DsPageHeading } from '@/app/ui/DsPageHeading';
-import MetaReviewClientLoader from '@/src/features/meta-review/ui/MetaReviewClientLoader';
-import { getDictionary, hasLocale, Locale, resolveLocale } from '../dictionaries';
-
-type PageProps = {
-  params: Promise<{ lang: string }>;
-};
-
-export async function generateMetadata({ params }: PageProps) {
-  const param = await params;
-  const locale = resolveLocale(param.lang);
-  const dict = await getDictionary(locale);
-  const title = dict.metaPage?.title ?? 'Meta';
-  return {
-    title: `${title} | ${dict.general.title}`,
-    description: dict.general.description,
-  };
-}
-
-export default async function Page({ params }: PageProps) {
-  const { lang } = await params;
-  const locale = hasLocale(lang) ? lang : 'en';
-  const dict = await getDictionary(locale as Locale);
-  const heading = dict.metaPage?.title ?? 'Meta';
-  return (
-    <section className="p-4" aria-labelledby="meta-review-heading">
-      <DsPageHeading id="meta-review-heading">{heading}</DsPageHeading>
-      <div className="mt-4">
-        <MetaReviewClientLoader />
-      </div>
-    </section>
-  );
-}
diff --git a/frontend/app/[lang]/submission/[submissionId]/page.tsx b/frontend/app/[lang]/submission/[submissionId]/page.tsx
index ae8850c..1117ad0 100644
--- a/frontend/app/[lang]/submission/[submissionId]/page.tsx
+++ b/frontend/app/[lang]/submission/[submissionId]/page.tsx
@@ -1,4 +1,5 @@
 import { SubmissionView } from '@/src/features/submit-mode/ui/SubmissionView';
+import { DsPageHeading } from '@/app/ui/DsPageHeading';
 import { getDictionary, hasLocale, Locale } from '../../dictionaries';
 import { notFound } from 'next/navigation';
 import { loadFeaturesMeta } from '@/src/shared/config/featuresMeta';
@@ -15,7 +16,7 @@ export async function generateMetadata({ params }: PageProps) {
   }
   const dict = await getDictionary(param.lang as Locale);
   return {
-    title: `Submission | ${dict.general.title}`,
+    title: `${dict.submission.pageTitle} | ${dict.general.title}`,
     description: dict.general.description,
   };
 }
@@ -27,9 +28,11 @@ export default async function Page({ params }: PageProps) {
     notFound();
   }
 
-  await params;
+  const { lang } = await params;
+  const dict = await getDictionary((hasLocale(lang) ? lang : 'en') as Locale);
   return (
     <section className="p-4" aria-labelledby="submission-view-heading">
+      <DsPageHeading id="submission-view-heading">{dict.submission.pageTitle}</DsPageHeading>
       <SubmissionView />
     </section>
   );
diff --git a/frontend/app/ui/Header.module.css b/frontend/app/ui/Header.module.css
index f2dda33..c07a240 100644
--- a/frontend/app/ui/Header.module.css
+++ b/frontend/app/ui/Header.module.css
@@ -29,6 +29,13 @@
   border-color: var(--app-border) !important;
 }
 
+.userDrop:focus-visible {
+  /* Keyboard focus needs a clearly visible ring; the surface-pinning rules
+     above otherwise leave focus indistinguishable from the resting state. */
+  outline: 2px solid var(--app-focus-ring) !important;
+  outline-offset: 2px;
+}
+
 .limitText {
   max-width: 100px;
   /* overflow: hidden; */
diff --git a/frontend/app/ui/Header.tsx b/frontend/app/ui/Header.tsx
index 0d5c62e..a012fad 100644
--- a/frontend/app/ui/Header.tsx
+++ b/frontend/app/ui/Header.tsx
@@ -132,7 +132,7 @@ function Header({ headerNavItems }: HeaderProps) {
           {displayName ? (
             <Dropdown>
               <Dropdown.Toggle className={styles.userDrop} data-testid="user-dropdown" id="dropdown-user">
-                <FaUser className="align-text-top" />
+                <FaUser className="align-text-top" aria-hidden="true" />
                 <span className={styles.limitText + ' ms-2 me-2'}>{displayName}</span>
               </Dropdown.Toggle>
               <Dropdown.Menu>
diff --git a/frontend/app/ui/base/CenteredProgress.tsx b/frontend/app/ui/base/CenteredProgress.tsx
new file mode 100644
index 0000000..afa47e1
--- /dev/null
+++ b/frontend/app/ui/base/CenteredProgress.tsx
@@ -0,0 +1,41 @@
+'use client';
+
+import { ProgressCircle } from '@bcgov/design-system-react-components';
+
+type CenteredProgressProps = {
+  /**
+   * Screen-reader-only label for the spinner. There is no visible loading text
+   * by design, so this is the only thing assistive tech announces — keep it
+   * meaningful (e.g. the localized "Loading…").
+   */
+  label?: string;
+  /** Optional minimum height so the spinner can center within a tall empty area. */
+  minHeight?: string;
+  'data-testid'?: string;
+};
+
+/**
+ * The single loading indicator for the app: a horizontally/vertically centered
+ * ProgressCircle with no visible text. Use everywhere a screen, page data area,
+ * or table body is pending so loading looks and behaves the same throughout.
+ *
+ * Accessibility: the wrapper is a `role="status"` live region (implicit
+ * `aria-live="polite"`) so screen readers announce the spinner when it appears,
+ * and the ProgressCircle carries an `aria-label` as its accessible name.
+ */
+export function CenteredProgress({
+  label = 'Loading',
+  minHeight,
+  'data-testid': testId = 'loading-indicator',
+}: CenteredProgressProps) {
+  return (
+    <div
+      role="status"
+      className="d-flex justify-content-center align-items-center p-5"
+      style={minHeight ? { minHeight } : undefined}
+      data-testid={testId}
+    >
+      <ProgressCircle isIndeterminate aria-label={label} />
+    </div>
+  );
+}
diff --git a/frontend/dictionaries/en.json b/frontend/dictionaries/en.json
index ddd62a7..0189ce0 100644
--- a/frontend/dictionaries/en.json
+++ b/frontend/dictionaries/en.json
@@ -8,16 +8,17 @@
     "description": "Next Gen Forms",
     "notAuthenticated": "You are not authenticated. Please login to access this section.",
     "forms": "Forms",
+    "formDesigner": "Form Designer",
     "feedback": "Feedback",
     "help": "Help",
     "welcomeTo": "Welcome to",
-    "loading": "Loading…"
+    "loading": "Loading…",
+    "comingSoon": "This feature is coming soon."
   },
   "header": {
     "workspaces": "Workspaces",
     "design": "Design",
     "submit": "Submit",
-    "metaReview": "API meta",
     "themeToggle": "Toggle color theme",
     "skipToMain": "Skip to main content",
     "designer": "Designer",
@@ -27,23 +28,6 @@
     "openMenuAria": "Open navigation menu",
     "closeMenuAria": "Close navigation menu"
   },
-  "metaPage": {
-    "title": "API meta & health",
-    "refresh": "Refresh",
-    "loadCodes": "Load reference codes",
-    "loadRoles": "Load roles",
-    "sections": {
-      "health": "Health",
-      "readiness": "Readiness",
-      "build": "Build",
-      "features": "Features",
-      "frontendConfig": "Frontend config",
-      "plugins": "Plugins",
-      "formEngines": "Form engines",
-      "codes": "Reference codes",
-      "roles": "Roles"
-    }
-  },
   "base": {
     "copyToClipboard": {
       "copyToClipboard": "Copy to Clipboard",
@@ -107,8 +91,6 @@
     "namePlaceholder": "Enter form name",
     "slugLabel": "Form Slug",
     "slugPlaceholder": "Enter form slug",
-    "descriptionLabel": "Description",
-    "descriptionPlaceholder": "Enter form description",
     "loading": "Loading form...",
     "schemaNotAvailable": "Form schema not available.",
     "edit": "Edit",
@@ -119,11 +101,6 @@
     "visibilityPublic": "Public",
     "visibilityAzureIDIR": "IDIR - MFA",
     "disclaimerLabel": "I agree to the disclaimer and statement of responsibility",
-    "disclaimerTitle": "Disclaimer",
-    "disclaimerText1": "It is your responsibility to comply with Privacy laws governing the collection, use and disclosure of personally identifiable information.",
-    "disclaimerText2": "Access to this form designer tool does not inherently grant permission to collect, use or disclose any personally identifiable information.",
-    "disclaimerText3": "It is your responsibility to obtain consent to collect information as required by law.",
-    "disclaimerText4": "If you use BCeID or BC Services Card as form access options, you MUST notify the Identity Information Management (IDIM) team by email (IDIM.Consulting@gov.bc.ca) your intent to leverage BCeID or BC Services Card.",
     "exportJson": "Export JSON",
     "importJson": "Import JSON",
     "importSchema": "Import Schema",
@@ -135,9 +112,6 @@
     "designerTab": "Designer",
     "settingsTab": "Settings",
     "teamTab": "Team",
-    "settingsPlaceholder": "Form settings will be available here.",
-    "teamManagement": "Team Management",
-    "teamPlaceholder": "Team management tools will be available here.",
     "readOnlyMode": "Read-Only Mode:",
     "viewingHistoricalVersion": "You are viewing historical version",
     "savePublishDisabled": "Save and Publish options are disabled.",
@@ -161,12 +135,11 @@
     "formPreview": "Form Preview",
     "untitledForm": "Untitled Form",
     "closePreview": "Close Preview",
-    "noFormLayout": "No form layout designed yet.",
-    "apiKey": "API Key",
-    "apiKeyPlaceholder": "Enter your api key"
+    "noFormLayout": "No form layout designed yet."
   },
   "submission": {
     "submissions": "Submissions",
+    "pageTitle": "Submission",
     "loading": "Loading submissions…",
     "empty": "No submissions in this workspace yet.",
     "error": "Could not load submissions.",
diff --git a/frontend/dictionaries/fr.json b/frontend/dictionaries/fr.json
index a08b419..4023469 100644
--- a/frontend/dictionaries/fr.json
+++ b/frontend/dictionaries/fr.json
@@ -8,16 +8,17 @@
     "description": "Formulaires de Nouvelle Génération",
     "notAuthenticated": "Vous n'êtes pas authentifié. Veuillez vous connecter pour accéder à cette section.",
     "forms": "Formulaires",
+    "formDesigner": "Concepteur de formulaires",
     "feedback": "Retour d'information",
     "help": "Aidé",
     "welcomeTo": "Bienvenue sur",
-    "loading": "Chargement…"
+    "loading": "Chargement…",
+    "comingSoon": "Cette fonctionnalité sera bientôt disponible."
   },
   "header": {
     "workspaces": "Espaces de travail",
     "design": "Conception",
     "submit": "Soumettre",
-    "metaReview": "Méta API",
     "themeToggle": "Basculer le theme de couleur",
     "skipToMain": "Aller au contenu principal",
     "designer": "Générateur de Formulaire",
@@ -27,23 +28,6 @@
     "openMenuAria": "Ouvrir le menu de navigation",
     "closeMenuAria": "Fermer le menu de navigation"
   },
-  "metaPage": {
-    "title": "Méta API et santé",
-    "refresh": "Actualiser",
-    "loadCodes": "Charger les codes de référence",
-    "loadRoles": "Charger les rôles",
-    "sections": {
-      "health": "Santé",
-      "readiness": "Disponibilité",
-      "build": "Build",
-      "features": "Fonctionnalités",
-      "frontendConfig": "Config frontale",
-      "plugins": "Plugins",
-      "formEngines": "Moteurs de formulaire",
-      "codes": "Codes de référence",
-      "roles": "Rôles"
-    }
-  },
   "base": {
     "copyToClipboard": {
       "copyToClipboard": "Copier dans le presse-papiers",
@@ -107,8 +91,6 @@
     "namePlaceholder": "Entrez le nom du formulaire",
     "slugLabel": "Slug du Formulaire",
     "slugPlaceholder": "Entrez le slug du formulaire",
-    "descriptionLabel": "Description",
-    "descriptionPlaceholder": "Entrez la description du formulaire",
     "loading": "Chargement du formulaire...",
     "schemaNotAvailable": "Schéma du formulaire non disponible.",
     "edit": "Modifier",
@@ -119,11 +101,6 @@
     "visibilityPublic": "Publique",
     "visibilityAzureIDIR": "IDIR - MFA",
     "disclaimerLabel": "J'accepte l'avis de non-responsabilité et la déclaration de responsabilité",
-    "disclaimerTitle": "Avis de non-responsabilité",
-    "disclaimerText1": "Il est de votre responsabilité de vous conformer aux lois sur la protection de la vie privée régissant la collecte, l'utilisation et la divulgation d'informations personnellement identifiables.",
-    "disclaimerText2": "L'accès à cet outil de conception de formulaires n'accorde pas intrinsèquement l'autorisation de collecter, d'utiliser ou de divulguer des informations personnellement identifiables.",
-    "disclaimerText3": "Il est de votre responsabilité d'obtenir le consentement pour recueillir des informations comme l'exige la loi.",
-    "disclaimerText4": "Si vous utilisez BCeID ou BC Services Card comme options d'accès au formulaire, vous DEVEZ aviser l'équipe de gestion des informations d'identité (IDIM) par courriel (IDIM.Consulting@gov.bc.ca) de votre intention d'utiliser BCeID ou BC Services Card.",
     "exportJson": "Exporter JSON",
     "importJson": "Importer JSON",
     "importSchema": "Importer le schéma",
@@ -135,9 +112,6 @@
     "designerTab": "Concepteur",
     "settingsTab": "Paramètres",
     "teamTab": "Équipe",
-    "settingsPlaceholder": "Les paramètres du formulaire seront disponibles ici.",
-    "teamManagement": "Gestion d'équipe",
-    "teamPlaceholder": "Les outils de gestion d'équipe seront disponibles ici.",
     "readOnlyMode": "Mode lecture seule :",
     "viewingHistoricalVersion": "Vous consultez la version historique",
     "savePublishDisabled": "Les options Sauvegarder et Publier sont désactivées.",
@@ -161,12 +135,11 @@
     "formPreview": "Aperçu du formulaire",
     "untitledForm": "Formulaire sans titre",
     "closePreview": "Fermer l'aperçu",
-    "noFormLayout": "Aucune mise en page de formulaire n'a encore été conçue.",
-    "apiKey": "Clé API",
-    "apiKeyPlaceholder": "Entrez votre clé API"
+    "noFormLayout": "Aucune mise en page de formulaire n'a encore été conçue."
   },
   "submission": {
     "submissions": "Soumissions",
+    "pageTitle": "Soumission",
     "loading": "Chargement des soumissions…",
     "empty": "Aucune soumission dans cet espace pour l’instant.",
     "error": "Impossible de charger les soumissions.",
diff --git a/frontend/eslint.config.mts b/frontend/eslint.config.mts
deleted file mode 100644
index 6c2f3e2..0000000
--- a/frontend/eslint.config.mts
+++ /dev/null
@@ -1,51 +0,0 @@
-import js from '@eslint/js';
-import globals from 'globals';
-import tseslint from 'typescript-eslint';
-import react from 'eslint-plugin-react';
-import reactHooks from 'eslint-plugin-react-hooks';
-import reactRefresh from 'eslint-plugin-react-refresh';
-import prettier from 'eslint-plugin-prettier';
-import { defineConfig, globalIgnores } from 'eslint/config';
-
-export default defineConfig([
-  globalIgnores(['dist', 'node_modules']),
-
-  {
-    files: ['**/*.{ts,tsx,js,jsx}'],
-
-    languageOptions: {
-      ecmaVersion: 2020,
-      sourceType: 'module',
-      globals: {
-        ...globals.browser,
-        ...globals.node,
-      },
-    },
-
-    plugins: {
-      react,
-      'react-refresh': reactRefresh,
-      prettier,
-    },
-
-    extends: [
-      js.configs.recommended,
-      tseslint.configs.recommended,
-      react.configs.flat.recommended,
-      reactHooks.configs.flat.recommended,
-      reactRefresh.configs.vite,
-      'plugin:prettier/recommended',
-    ],
-
-    rules: {
-      'prettier/prettier': 'error',
-      'react/react-in-jsx-scope': 'off',
-    },
-
-    settings: {
-      react: {
-        version: 'detect',
-      },
-    },
-  },
-]);
diff --git a/frontend/lib/constants.ts b/frontend/lib/constants.ts
deleted file mode 100644
index e0b8946..0000000
--- a/frontend/lib/constants.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import type { NotificationType } from './slices/notificationSlice';
-
-export const NotificationTypes: Record<string, { type: NotificationType }> = {
-  INFO: { type: 'info' },
-  SUCCESS: { type: 'success' },
-  WARNING: { type: 'warning' },
-  ERROR: { type: 'error' },
-};
diff --git a/frontend/lib/runtimeConfig.ts b/frontend/lib/runtimeConfig.ts
deleted file mode 100644
index ab487a4..0000000
--- a/frontend/lib/runtimeConfig.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from '@/src/shared/config/runtimeConfig';
diff --git a/frontend/lib/slices/keycloakSlice.ts b/frontend/lib/slices/keycloakSlice.ts
index 817f0b7..95020c7 100644
--- a/frontend/lib/slices/keycloakSlice.ts
+++ b/frontend/lib/slices/keycloakSlice.ts
@@ -2,7 +2,7 @@ import Keycloak from 'keycloak-js';
 import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
 import type { PayloadAction } from '@reduxjs/toolkit';
 import type { AppDispatch } from '../store';
-import { loadFrontendRuntimeConfig } from '../runtimeConfig';
+import { loadFrontendRuntimeConfig } from '@/src/shared/config/runtimeConfig';
 
 // Keep the Keycloak instance out of Redux state (non-serializable).
 // Store it in a module-level variable instead.
diff --git a/frontend/lib/sobaApi.ts b/frontend/lib/sobaApi.ts
deleted file mode 100644
index e7036cf..0000000
--- a/frontend/lib/sobaApi.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from '@/src/shared/api/sobaApi';
diff --git a/frontend/src/app/plugins/registry.ts b/frontend/src/app/plugins/registry.ts
index edfd37f..93ba24f 100644
--- a/frontend/src/app/plugins/registry.ts
+++ b/frontend/src/app/plugins/registry.ts
@@ -1,16 +1,10 @@
 import type { Locale } from '@/app/[lang]/dictionaries';
 import { designerPlugin } from '@/src/features/designer/plugin';
-import { metaReviewPlugin } from '@/src/features/meta-review/plugin';
 import { submitModePlugin } from '@/src/features/submit-mode/plugin';
 import { workspacesPlugin } from '@/src/features/workspaces/plugin';
 import type { AppPlugin, PluginNavItem, Dictionary } from '@/src/types/plugins';
 
-const allPlugins: AppPlugin[] = [
-  workspacesPlugin,
-  designerPlugin,
-  submitModePlugin,
-  metaReviewPlugin,
-];
+const allPlugins: AppPlugin[] = [workspacesPlugin, designerPlugin, submitModePlugin];
 
 function getEnabledPlugins(isFeatureAllowed: (code: string) => boolean): AppPlugin[] {
   return allPlugins
diff --git a/frontend/src/app/providers/AppProviders.tsx b/frontend/src/app/providers/AppProviders.tsx
index 052f9db..fae65b9 100644
--- a/frontend/src/app/providers/AppProviders.tsx
+++ b/frontend/src/app/providers/AppProviders.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { Provider } from 'react-redux';
 import { I18nProvider } from 'react-aria-components';
 import makeStore from '@/lib/store';
@@ -22,6 +22,15 @@ export default function AppProviders({
 }) {
   const store = useMemo(() => makeStore(), []);
 
+  // The root layout renders a static `<html lang="en">` (it sits above the
+  // `[lang]` segment and can't know the locale). Keep the document language in
+  // sync with the active locale so assistive tech announces `/fr` pages in French.
+  useEffect(() => {
+    if (locale) {
+      document.documentElement.lang = locale;
+    }
+  }, [locale]);
+
   return (
     <I18nProvider locale={locale}>
       <DictionaryContext.Provider value={dictionary}>
diff --git a/frontend/src/app/ui/AuthRedirect.tsx b/frontend/src/app/ui/AuthRedirect.tsx
index 2125664..fc70f1f 100644
--- a/frontend/src/app/ui/AuthRedirect.tsx
+++ b/frontend/src/app/ui/AuthRedirect.tsx
@@ -4,7 +4,7 @@ import { useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import { useKeycloak } from '@/lib/hooks/useKeycloak';
 import { useDictionary } from '@/app/[lang]/Providers';
-import { ProgressCircle } from '@bcgov/design-system-react-components';
+import { CenteredProgress } from '@/app/ui/base/CenteredProgress';
 
 export function AuthRedirect({
   to,
@@ -28,14 +28,7 @@ export function AuthRedirect({
   }, [shouldRedirect, router, to]);
 
   if (initializing || shouldRedirect) {
-    return (
-      <div
-        className="d-flex justify-content-center align-items-center"
-        style={{ minHeight: '50vh' }}
-      >
-        <ProgressCircle isIndeterminate aria-label={dict.general.loading} />
-      </div>
-    );
+    return <CenteredProgress label={dict.general.loading} minHeight="50vh" />;
   }
 
   return <>{children}</>;
diff --git a/frontend/src/components/DataTable.tsx b/frontend/src/components/DataTable.tsx
index 6bc2d72..3cf7657 100644
--- a/frontend/src/components/DataTable.tsx
+++ b/frontend/src/components/DataTable.tsx
@@ -2,8 +2,9 @@
 
 import React from 'react';
 import { Table } from 'react-bootstrap';
-import { ProgressCircle, Select, Button } from '@bcgov/design-system-react-components';
+import { Select, Button } from '@bcgov/design-system-react-components';
 import { FaChevronLeft, FaChevronRight } from 'react-icons/fa6';
+import { CenteredProgress } from '@/app/ui/base/CenteredProgress';
 
 export interface Column<T> {
   key: string;
@@ -21,6 +22,7 @@ export interface DataTableProps<T> {
   emptyMessage?: string;
   loadingMessage?: string;
   itemName?: string;
+  caption?: string;
   pageSize?: number;
   currentPage?: number;
   totalItems?: number;
@@ -38,6 +40,7 @@ export function DataTable<T>({
   emptyMessage = 'No items found.',
   loadingMessage = 'Loading...',
   itemName = 'items',
+  caption,
   pageSize = 10,
   currentPage = 1,
   totalItems,
@@ -51,11 +54,13 @@ export function DataTable<T>({
   return (
     <div className="bg-white rounded overflow-hidden" style={{ border: 'none' }}>
       <Table hover responsive className="mb-0 align-middle" style={{ border: 'none' }}>
-        <thead style={{ backgroundColor: '#EBEBEB', borderBottom: 'none' }}>
+        {caption ? <caption className="visually-hidden">{caption}</caption> : null}
+        <thead style={{ backgroundColor: 'var(--app-bg)', borderBottom: 'none' }}>
           <tr>
             {columns.map((col) => (
               <th
                 key={col.key}
+                scope="col"
                 className={`px-4 py-3 text-dark fw-bold border-0 text-${col.align || 'start'}`}
                 style={col.width ? { width: col.width } : undefined}
               >
@@ -67,11 +72,8 @@ export function DataTable<T>({
         <tbody style={{ borderTop: 'none' }}>
           {loading ? (
             <tr>
-              <td colSpan={columns.length} className="py-5">
-                <div className="d-flex align-items-center justify-content-center gap-2">
-                  <ProgressCircle isIndeterminate size="small" aria-label={loadingMessage} />
-                  <span>{loadingMessage}</span>
-                </div>
+              <td colSpan={columns.length} className="p-0">
+                <CenteredProgress label={loadingMessage} data-testid="datatable-loading" />
               </td>
             </tr>
           ) : data.length === 0 ? (
@@ -82,7 +84,7 @@ export function DataTable<T>({
             </tr>
           ) : (
             data.map((item) => (
-              <tr key={keyExtractor(item)} style={{ borderBottom: '1px solid #dee2e6' }}>
+              <tr key={keyExtractor(item)} style={{ borderBottom: '1px solid var(--app-border)' }}>
                 {columns.map((col) => (
                   <td
                     key={`${keyExtractor(item)}-${col.key}`}
@@ -102,7 +104,7 @@ export function DataTable<T>({
       {!loading && data.length > 0 && totalItems !== undefined && (
         <div
           className="px-4 py-3 d-flex justify-content-between align-items-center"
-          style={{ backgroundColor: '#EBEBEB', color: '#333' }}
+          style={{ backgroundColor: 'var(--app-bg)', color: 'var(--app-text)' }}
         >
           <div className="d-flex align-items-center gap-2">
             <span>Items per page:</span>
diff --git a/frontend/src/components/Modal.module.css b/frontend/src/components/Modal.module.css
new file mode 100644
index 0000000..ba7efe8
--- /dev/null
+++ b/frontend/src/components/Modal.module.css
@@ -0,0 +1,35 @@
+/*
+ * Baseline layout for app "form" dialogs (import/export, preview, etc.).
+ *
+ * The BC Design System plain `Dialog` only stacks its children with no internal
+ * structure, which is why these looked basic. We give them the same region
+ * model the DS `AlertDialog` uses — header / body / footer separated by thin
+ * borders — reusing the same design tokens so the spacing matches the rest of
+ * the system (e.g. the disclaimer dialog).
+ */
+
+.header {
+  padding: var(--layout-padding-medium) var(--layout-padding-large);
+  border-bottom: var(--layout-border-width-small) solid var(--surface-color-border-default);
+}
+
+.title {
+  margin: 0;
+  font: var(--typography-bold-h5);
+  color: var(--typography-color-primary);
+}
+
+/*
+ * Body sits between the two thin borders. It's a flex column so passed-in
+ * content stretches to the full width of the padded area by default.
+ */
+.body {
+  display: flex;
+  flex-direction: column;
+  padding: var(--layout-padding-medium) var(--layout-padding-large);
+  border-bottom: var(--layout-border-width-small) solid var(--surface-color-border-default);
+}
+
+.footer {
+  padding: var(--layout-padding-medium) var(--layout-padding-large);
+}
diff --git a/frontend/src/components/Modal.tsx b/frontend/src/components/Modal.tsx
index 7235726..ecdf469 100644
--- a/frontend/src/components/Modal.tsx
+++ b/frontend/src/components/Modal.tsx
@@ -2,6 +2,7 @@
 
 import React from 'react';
 import { Modal as BCModal, Dialog, Heading, ButtonGroup } from '@bcgov/design-system-react-components';
+import styles from './Modal.module.css';
 
 export interface ModalProps {
   show: boolean;
@@ -40,9 +41,17 @@ export function Modal({ show, title, onClose, children, size = 'lg', footer }: M
       style={{ width: WIDTH_BY_SIZE[size], maxWidth: '100vw' }}
     >
       <Dialog isCloseable aria-label={title}>
-        <Heading slot="title">{title}</Heading>
-        {children}
-        {footer && <ButtonGroup ariaLabel="Dialog actions">{footer}</ButtonGroup>}
+        <div className={styles.header}>
+          <Heading slot="title" className={styles.title}>
+            {title}
+          </Heading>
+        </div>
+        <div className={styles.body}>{children}</div>
+        {footer && (
+          <div className={styles.footer}>
+            <ButtonGroup ariaLabel="Dialog actions">{footer}</ButtonGroup>
+          </div>
+        )}
       </Dialog>
     </BCModal>
   );
diff --git a/frontend/src/features/designer/ui/FormDesigner.tsx b/frontend/src/features/designer/ui/FormDesigner.tsx
index be72c39..292348b 100644
--- a/frontend/src/features/designer/ui/FormDesigner.tsx
+++ b/frontend/src/features/designer/ui/FormDesigner.tsx
@@ -15,6 +15,7 @@ import type {
 } from '@formio/react';
 import './FormDesigner.module.css';
 import { Modal as CommonModal } from '@/src/components/Modal';
+import { CenteredProgress } from '@/app/ui/base/CenteredProgress';
 import { TextArea, Button, InlineAlert } from '@bcgov/design-system-react-components';
 import { useNotificationStore } from '@/lib/hooks/useNotificationStore';
 
@@ -232,7 +233,7 @@ const FormDesigner: React.FC<DesignerProps> = ({ onUpdateModel, initialModel = n
   }, [importJson, onUpdateModel, sanitizeForm, addNotification, dict.form.invalidJson]);
 
   if (initializing) {
-    return <div className="p-5 text-center">Loading Designer...</div>;
+    return <CenteredProgress label={dict.form.loading} />;
   }
 
   if (!authenticated) {
diff --git a/frontend/src/features/designer/ui/FormDesignerLoader.tsx b/frontend/src/features/designer/ui/FormDesignerLoader.tsx
index 184e2c5..108dd9d 100644
--- a/frontend/src/features/designer/ui/FormDesignerLoader.tsx
+++ b/frontend/src/features/designer/ui/FormDesignerLoader.tsx
@@ -2,10 +2,11 @@
 
 import dynamic from 'next/dynamic';
 import React from 'react';
+import { CenteredProgress } from '@/app/ui/base/CenteredProgress';
 
 const FormForm = dynamic(() => import('./FormForm'), {
   ssr: false,
-  loading: () => <div className="p-5 text-center">Loading Form Designer...</div>,
+  loading: () => <CenteredProgress />,
 });
 
 export default function FormDesignerLoader({ id }: { id?: string[] }) {
diff --git a/frontend/src/features/designer/ui/FormForm.tsx b/frontend/src/features/designer/ui/FormForm.tsx
index 4d06652..7526b06 100644
--- a/frontend/src/features/designer/ui/FormForm.tsx
+++ b/frontend/src/features/designer/ui/FormForm.tsx
@@ -3,19 +3,15 @@ import { useState, useEffect, useCallback } from 'react';
 import { useRouter, useParams } from 'next/navigation';
 import { Tabs, Tab } from 'react-bootstrap';
 import {
-  ProgressCircle,
   InlineAlert,
   Button,
   Form,
   TextField,
-  TextArea,
   Select,
   CheckboxGroup,
   Checkbox,
-  Modal as BCModal,
-  AlertDialog,
 } from '@bcgov/design-system-react-components';
-import { FaInfoCircle } from 'react-icons/fa';
+import { CenteredProgress } from '@/app/ui/base/CenteredProgress';
 import { Modal as CommonModal } from '@/src/components/Modal';
 import styles from './FormForm.module.css';
 
@@ -86,7 +82,6 @@ function FormForm({ id }: { id?: string[] }) {
   const [isDirty, setIsDirty] = useState(false);
   const [showPreview, setShowPreview] = useState(false);
 
-  const [showDisclaimerModal, setShowDisclaimerModal] = useState(false);
   const [agreedDisclaimer, setAgreedDisclaimer] = useState(false);
 
   useEffect(() => {
@@ -151,11 +146,6 @@ function FormForm({ id }: { id?: string[] }) {
     [slugManuallyEdited],
   );
 
-  const updateDescription = (value: string) => {
-    setFormDesc(value);
-    setIsDirty(true);
-  };
-
   const updateFormSchema = useCallback((data: FormType) => {
     setFormSchema(data);
     setIsDirty(true);
@@ -299,12 +289,12 @@ function FormForm({ id }: { id?: string[] }) {
     }
   };
 
-  if (!authenticated) {
-    return <div>You must be logged in</div>;
+  if (initializing) {
+    return <CenteredProgress label={dict.form.loading} />;
   }
 
-  if (initializing) {
-    return <div>Forms initializing</div>;
+  if (!authenticated) {
+    return <div className="p-5 text-center">{dict.general.notAuthenticated}</div>;
   }
 
   const renderDesignerContent = () => (
@@ -353,30 +343,21 @@ function FormForm({ id }: { id?: string[] }) {
           ))}
         </CheckboxGroup>
 
-        <div className="d-flex align-items-center gap-2">
-          <Checkbox
-            isSelected={agreedDisclaimer}
-            onChange={setAgreedDisclaimer}
-            isDisabled={isHistoryView || isCurrentPublished}
-          >
-            {dict.form.disclaimerLabel ||
-              'I agree to the disclaimer and statement of responsibility'}
-          </Checkbox>
-          <FaInfoCircle
-            className="text-info"
-            style={{ cursor: 'pointer' }}
-            onClick={() => setShowDisclaimerModal(true)}
-          />
-        </div>
+        <Checkbox
+          isSelected={agreedDisclaimer}
+          onChange={setAgreedDisclaimer}
+          isDisabled={isHistoryView || isCurrentPublished}
+        >
+          {dict.form.disclaimerLabel ||
+            'I agree to the disclaimer and statement of responsibility'}
+        </Checkbox>
       </Form>
 
       {/* Form Builder */}
       <div className={styles.designerWrapper}>
         {id && id[0] ? (
           loading ? (
-            <div className="my-4 text-center">
-              <ProgressCircle isIndeterminate aria-label={dict.form.loading} />
-            </div>
+            <CenteredProgress label={dict.form.loading} />
           ) : formSchema ? (
             <FormDesigner onUpdateModel={updateFormSchema} initialModel={formSchema} />
           ) : (
@@ -387,15 +368,8 @@ function FormForm({ id }: { id?: string[] }) {
         )}
       </div>
 
-      {/* Description */}
-      <div className="mt-4 mb-5 pb-5" style={{ maxWidth: '640px' }}>
-        <TextArea
-          label={dict.form.descriptionLabel}
-          value={formDesc}
-          onChange={updateDescription}
-          isDisabled={isHistoryView || isCurrentPublished}
-        />
-      </div>
+      {/* Spacer so the builder clears the fixed action bar */}
+      <div className="mb-5 pb-5" />
 
       <div
         className={`${styles.floatingActions} shadow-lg p-3 rounded-pill d-flex gap-2 bg-white border`}
@@ -414,13 +388,13 @@ function FormForm({ id }: { id?: string[] }) {
           </Button>
         )}
         <Button
-          variant="secondary"
+          variant="primary"
           onPress={saveFormDraft}
           isDisabled={isHistoryView || isCurrentPublished || isSaving || loading || !agreedDisclaimer}
         >
           {isSaving ? dict.form.saving || 'Saving...' : dict.form.save || 'Save'}
         </Button>
-        <Button variant="secondary" onPress={() => setShowPreview(true)} isDisabled={isSaving || loading}>
+        <Button variant="tertiary" onPress={() => setShowPreview(true)} isDisabled={isSaving || loading}>
           {dict.form.preview || 'Preview'}
         </Button>
         {id && id[0] && (
@@ -501,7 +475,7 @@ function FormForm({ id }: { id?: string[] }) {
           onSelect={(k) => setActiveTab(k || 'designer')}
           className="mb-3"
         >
-          <Tab eventKey="designer" title="Designer">
+          <Tab eventKey="designer" title={dict.form.designerTab || 'Designer'}>
             {renderDesignerContent()}
           </Tab>
           <Tab eventKey="settings" title={dict.form.settingsTab || 'Settings'}>
@@ -535,43 +509,6 @@ function FormForm({ id }: { id?: string[] }) {
           </p>
         )}
       </CommonModal>
-
-      {/* Disclaimer Dialog */}
-      <BCModal
-        isOpen={showDisclaimerModal}
-        onOpenChange={(open) => {
-          if (!open) setShowDisclaimerModal(false);
-        }}
-        isDismissable
-      >
-        <AlertDialog
-          variant="info"
-          title={dict.form.disclaimerTitle || 'Disclaimer'}
-          isCloseable
-          buttons={
-            <Button variant="primary" onPress={() => setShowDisclaimerModal(false)}>
-              {dict.form.close || 'Close'}
-            </Button>
-          }
-        >
-          <p>
-            {dict.form.disclaimerText1 ||
-              'It is your responsibility to comply with Privacy laws governing the collection, use and disclosure of personally identifiable information.'}
-          </p>
-          <p>
-            {dict.form.disclaimerText2 ||
-              'Access to this form designer tool does not inherently grant permission to collect, use or disclose any personally identifiable information.'}
-          </p>
-          <p>
-            {dict.form.disclaimerText3 ||
-              'It is your responsibility to obtain consent to collect information as required by law.'}
-          </p>
-          <p>
-            {dict.form.disclaimerText4 ||
-              'If you use BCeID or BC Services Card as form access options, you MUST notify the Identity Information Management (IDIM) team by email (IDIM.Consulting@gov.bc.ca) your intent to leverage BCeID or BC Services Card.'}
-          </p>
-        </AlertDialog>
-      </BCModal>
     </>
   );
 }
diff --git a/frontend/src/features/designer/ui/FormList.tsx b/frontend/src/features/designer/ui/FormList.tsx
index f3b4c5f..1a2c793 100644
--- a/frontend/src/features/designer/ui/FormList.tsx
+++ b/frontend/src/features/designer/ui/FormList.tsx
@@ -2,10 +2,12 @@
 
 import { useState, useEffect, useMemo, useCallback } from 'react';
 import { Container } from 'react-bootstrap';
-import { Button as DSButton, ProgressCircle, TextField } from '@bcgov/design-system-react-components';
+import { Button as DSButton, TextField } from '@bcgov/design-system-react-components';
 import { DataTable, type Column } from '@/src/components/DataTable';
+import { DsPageHeading } from '@/app/ui/DsPageHeading';
 import { useKeycloak } from '@/lib/hooks/useKeycloak';
 import { useDictionary } from '@/app/[lang]/Providers';
+import Link from 'next/link';
 import { useRouter, usePathname } from 'next/navigation';
 import { getLocaleFromPath } from '@/src/shared/util/locale';
 import { FaMagnifyingGlass, FaX } from 'react-icons/fa6';
@@ -154,18 +156,13 @@ function FormList({
         width: '40%',
         render: (form: SobaFormSummary) => {
           return designModeEnabled ? (
-            <a
-              href="#"
+            <Link
+              href={`/${locale}/designer/${form.id}`}
               data-testid={'form-link-' + form.id}
-              onClick={(e) => {
-                e.preventDefault();
-                handleAction('manage', form.id);
-              }}
-              className="text-decoration-underline"
-              style={{ cursor: 'pointer', color: '#00538A' }}
+              className="text-decoration-underline link-primary"
             >
               {form.name || dictForm?.nameLabel || 'Untitled Form'}
-            </a>
+            </Link>
           ) : (
             <span>{form.name || dictForm?.nameLabel || 'Untitled Form'}</span>
           );
@@ -200,22 +197,26 @@ function FormList({
         ),
       },
     ],
-    [handleAction, dictFormList, dictForm, designModeEnabled, submitModeEnabled, formatLongDate],
+    [
+      handleAction,
+      locale,
+      dictFormList,
+      dictForm,
+      designModeEnabled,
+      submitModeEnabled,
+      formatLongDate,
+    ],
   );
 
-  if (initializing)
-    return (
-      <div className="p-5 text-center">
-        <ProgressCircle isIndeterminate aria-label={dict.general.loading} />
-      </div>
-    );
-  if (!authenticated) return <div className="p-5 text-center">{dict.general.notAuthenticated}</div>;
+  // Auth gate only — loading (including Keycloak init) is shown inside the table
+  // body so the page heading stays visible throughout.
+  if (!authenticated && !initializing) {
+    return <div className="p-5 text-center">{dict.general.notAuthenticated}</div>;
+  }
 
   return (
     <Container fluid className="py-4 px-lg-5">
-      <div>
-        <h1>Forms</h1>
-      </div>
+      <DsPageHeading id="forms-heading">{dict.general.forms}</DsPageHeading>
       <div className="mb-3 d-flex justify-content-between align-items-center">
         {designModeEnabled && (
           <DSButton
@@ -260,11 +261,12 @@ function FormList({
       <DataTable<SobaFormSummary>
         data={paginatedForms as SobaFormSummary[]}
         columns={columns}
-        loading={loading}
+        loading={loading || initializing}
         error={error}
         emptyMessage="No forms found matching your criteria."
         loadingMessage={dict.general.loading}
         itemName="items"
+        caption={dict.general.forms}
         pageSize={pageSize}
         currentPage={currentPage}
         totalItems={filteredForms.length}
diff --git a/frontend/src/features/designer/ui/FormSettingsTab.tsx b/frontend/src/features/designer/ui/FormSettingsTab.tsx
index df61b4b..8838892 100644
--- a/frontend/src/features/designer/ui/FormSettingsTab.tsx
+++ b/frontend/src/features/designer/ui/FormSettingsTab.tsx
@@ -1,7 +1,5 @@
 'use client';
 
-import React from 'react';
-import { TextField } from '@bcgov/design-system-react-components';
 import type { Dictionary } from '@/src/types/plugins';
 
 interface FormSettingsTabProps {
@@ -9,17 +7,11 @@ interface FormSettingsTabProps {
 }
 
 export default function FormSettingsTab({ dict }: FormSettingsTabProps) {
-  const [apiKey, setApiKey] = React.useState('');
-
   return (
     <div className="p-3 border rounded-bottom bg-white border-top-0">
-      <h5 className="mb-3">{dict.form.settingsTab || 'Settings'}</h5>
-      <TextField
-        label={dict.form.apiKey}
-        description={dict.form.apiKeyPlaceholder}
-        value={apiKey}
-        onChange={setApiKey}
-      />
+      <p className="text-muted mb-0" data-testid="settings-coming-soon">
+        {dict.general.comingSoon}
+      </p>
     </div>
   );
 }
diff --git a/frontend/src/features/designer/ui/FormTeamTab.tsx b/frontend/src/features/designer/ui/FormTeamTab.tsx
index 58b7206..6830f4a 100644
--- a/frontend/src/features/designer/ui/FormTeamTab.tsx
+++ b/frontend/src/features/designer/ui/FormTeamTab.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import type { Dictionary } from '@/src/types/plugins';
 
 interface FormTeamTabProps {
@@ -8,9 +7,8 @@ interface FormTeamTabProps {
 export default function FormTeamTab({ dict }: FormTeamTabProps) {
   return (
     <div className="p-3 border rounded-bottom bg-white border-top-0">
-      <h5 className="mb-3">{dict.form.teamManagement || 'Team Management'}</h5>
-      <p className="text-muted">
-        {dict.form.teamPlaceholder || 'Team management tools will be available here.'}
+      <p className="text-muted mb-0" data-testid="team-coming-soon">
+        {dict.general.comingSoon}
       </p>
     </div>
   );
diff --git a/frontend/src/features/formio-v5/ui/DynamicForm.tsx b/frontend/src/features/formio-v5/ui/DynamicForm.tsx
index e396bd0..761abdf 100644
--- a/frontend/src/features/formio-v5/ui/DynamicForm.tsx
+++ b/frontend/src/features/formio-v5/ui/DynamicForm.tsx
@@ -3,6 +3,7 @@
 import dynamic from 'next/dynamic';
 import type { FormProps } from '@formio/react';
 import { useFormioV5FormChrome } from '@/lib/hooks/useFormioV5FormChrome';
+import { CenteredProgress } from '@/app/ui/base/CenteredProgress';
 
 function FormioV5FormChrome({ children }: { children: React.ReactNode }) {
   useFormioV5FormChrome('render');
@@ -16,7 +17,7 @@ function FormioV5FormChrome({ children }: { children: React.ReactNode }) {
  */
 const FormioForm = dynamic<FormProps>(() => import('@formio/react').then((m) => m.Form), {
   ssr: false,
-  loading: () => <p className="text-muted small">Loading form renderer…</p>,
+  loading: () => <CenteredProgress />,
 });
 
 export function DynamicForm(props: FormProps) {
diff --git a/frontend/src/features/formio-v5/ui/FormioV5FormRenderClient.tsx b/frontend/src/features/formio-v5/ui/FormioV5FormRenderClient.tsx
index da970a3..8cae651 100644
--- a/frontend/src/features/formio-v5/ui/FormioV5FormRenderClient.tsx
+++ b/frontend/src/features/formio-v5/ui/FormioV5FormRenderClient.tsx
@@ -1,15 +1,16 @@
 'use client';
 
-import { useParams } from 'next/navigation';
+import { useParams, useRouter, usePathname } from 'next/navigation';
 import { useEffect, useRef, useState } from 'react';
 import { FormioProvider, Submission } from '@formio/react';
 import type { FormType } from '@formio/react';
 import { InlineAlert } from '@bcgov/design-system-react-components';
+import { CenteredProgress } from '@/app/ui/base/CenteredProgress';
 import { useDictionary } from '@/app/[lang]/Providers';
+import { getLocaleFromPath } from '@/src/shared/util/locale';
 import { normalizeFormioRenderError } from '@/src/features/formio-v5/normalizeFormioRenderError';
 import { FormioV5FormRenderErrorBoundary } from '@/src/features/formio-v5/ui/FormioV5FormRenderErrorBoundary';
 import { DynamicForm } from '@/src/features/formio-v5/ui/DynamicForm';
-import { ReadOnlyFormView } from '@/src/features/formio-v5/ui/ReadOnlyFormView';
 import {
   getSobaFormVersions,
   getFormVersionSchema,
@@ -18,6 +19,7 @@ import {
 } from '@/src/shared/api/sobaApi';
 import { useKeycloak } from '@/lib/hooks/useKeycloak';
 import { useAppSelector } from '@/lib/store';
+import { useNotificationStore } from '@/lib/hooks/useNotificationStore';
 
 type FormRenderLabels = {
   loading: string;
@@ -34,17 +36,18 @@ type FormRenderLabels = {
 function FormioV5FormRenderBody({ formId, labels }: { formId: string; labels: FormRenderLabels }) {
   const { token } = useKeycloak();
   const { activeWorkspaceId } = useAppSelector((state) => state.workspace);
+  const { addNotification } = useNotificationStore();
+  const router = useRouter();
+  const locale = getLocaleFromPath(usePathname());
   const ws = activeWorkspaceId || undefined;
 
   const [schema, setSchema] = useState<FormType | null>(null);
   const [formVersionId, setFormVersionId] = useState<string | null>(null);
   const [loadError, setLoadError] = useState<string | null>(null);
   const [renderError, setRenderError] = useState<string | null>(null);
-  const [successAlert, setSuccessAlert] = useState(false);
-  const [submitted, setSubmitted] = useState<Submission | null>(null);
   const [loaded, setLoaded] = useState(false);
-  // The Form.io webform instance; in JSON mode (no `src`) we must signal it when our own
-  // persistence finishes, or its submit button spins forever.
+  // The Form.io webform instance; in JSON mode (no `src`) we must signal it on a failed
+  // save, or its submit button spins forever. On success we navigate away instead.
   const formInstanceRef = useRef<{
     emit: (event: string, ...args: unknown[]) => void;
   } | null>(null);
@@ -92,11 +95,11 @@ function FormioV5FormRenderBody({ formId, labels }: { formId: string; labels: Fo
         'submit',
         ws,
       );
-      setSuccessAlert(true);
-      // Tell the webform the submission is complete so its submit button stops spinning,
-      // then re-render the form read-only with the submitted answers.
-      formInstanceRef.current?.emit('submitDone', submission);
-      setSubmitted(submission);
+      addNotification({ text: labels.submitSuccess, type: 'success' });
+      // Go straight to the saved submission's read-only view — the same page the
+      // submissions table links to. Navigating away unmounts the form, so there's
+      // no need to emit `submitDone` and no flash of Form.io's own success screen.
+      router.push(`/${locale}/submission/${created.id}`);
     } catch (err) {
       setRenderError(normalizeFormioRenderError(err, labels.rendererError));
       formInstanceRef.current?.emit('submitError', labels.rendererError);
@@ -112,7 +115,7 @@ function FormioV5FormRenderBody({ formId, labels }: { formId: string; labels: Fo
   }
 
   if (!schema) {
-    return <p className="text-muted small">{labels.loading}</p>;
+    return <CenteredProgress label={labels.loading} />;
   }
 
   return (
@@ -122,11 +125,6 @@ function FormioV5FormRenderBody({ formId, labels }: { formId: string; labels: Fo
           {renderError}
         </InlineAlert>
       ) : null}
-      {successAlert ? (
-        <InlineAlert variant="success" role="alert">
-          {labels.submitSuccess}
-        </InlineAlert>
-      ) : null}
       <FormioV5FormRenderErrorBoundary
         fallback={
           <InlineAlert variant="danger" role="alert">
@@ -134,26 +132,25 @@ function FormioV5FormRenderBody({ formId, labels }: { formId: string; labels: Fo
           </InlineAlert>
         }
       >
-        {submitted ? (
-          <ReadOnlyFormView schema={schema} submission={submitted} />
-        ) : (
-          <div className="formio-v5-chrome" data-soba-formio-chrome>
-            <FormioProvider>
-              <DynamicForm
-                className="formio-v5-form-root"
-                src=""
-                form={schema}
-                onFormReady={(instance) => {
-                  formInstanceRef.current = instance;
-                }}
-                onError={(err) => {
-                  setRenderError(normalizeFormioRenderError(err, labels.loadError));
-                }}
-                onSubmit={submitForm}
-              />
-            </FormioProvider>
-          </div>
-        )}
+        <div className="formio-v5-chrome" data-soba-formio-chrome>
+          <FormioProvider>
+            <DynamicForm
+              className="formio-v5-form-root"
+              src=""
+              form={schema}
+              // We own all submit messaging (success toast + redirect, inline error),
+              // so suppress Form.io's built-in green "Submission Complete" alert.
+              options={{ noAlerts: true }}
+              onFormReady={(instance) => {
+                formInstanceRef.current = instance;
+              }}
+              onError={(err) => {
+                setRenderError(normalizeFormioRenderError(err, labels.loadError));
+              }}
+              onSubmit={submitForm}
+            />
+          </FormioProvider>
+        </div>
       </FormioV5FormRenderErrorBoundary>
     </>
   );
diff --git a/frontend/src/features/formio-v5/ui/FormioV5FormRenderLoader.tsx b/frontend/src/features/formio-v5/ui/FormioV5FormRenderLoader.tsx
index 7834f87..2f17f59 100644
--- a/frontend/src/features/formio-v5/ui/FormioV5FormRenderLoader.tsx
+++ b/frontend/src/features/formio-v5/ui/FormioV5FormRenderLoader.tsx
@@ -1,14 +1,11 @@
 'use client';
 
 import dynamic from 'next/dynamic';
+import { CenteredProgress } from '@/app/ui/base/CenteredProgress';
 
 const FormioV5FormRenderClient = dynamic(() => import('./FormioV5FormRenderClient'), {
   ssr: false,
-  loading: () => (
-    <p className="small" style={{ color: 'var(--typography-color-secondary)' }}>
-      Loading…
-    </p>
-  ),
+  loading: () => <CenteredProgress />,
 });
 
 export default function FormioV5FormRenderLoader() {
diff --git a/frontend/src/features/meta-review/plugin.tsx b/frontend/src/features/meta-review/plugin.tsx
deleted file mode 100644
index 95cd562..0000000
--- a/frontend/src/features/meta-review/plugin.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import type { AppPlugin } from '@/src/types/plugins';
-import { FEATURE_CODES } from '@/src/shared/featureFlags/flags';
-
-export const metaReviewPlugin: AppPlugin = {
-  id: 'meta-review',
-  featureCode: FEATURE_CODES.META,
-  showInHeaderNav: false,
-  order: 40,
-  getNavItem: ({ locale, dictionary }) => {
-    const label = dictionary.header.metaReview;
-    if (!label) return null;
-    return {
-      id: 'meta-review',
-      href: `/${locale}/meta`,
-      label,
-    };
-  },
-};
diff --git a/frontend/src/features/meta-review/ui/MetaReviewClient.tsx b/frontend/src/features/meta-review/ui/MetaReviewClient.tsx
deleted file mode 100644
index 777a091..0000000
--- a/frontend/src/features/meta-review/ui/MetaReviewClient.tsx
+++ /dev/null
@@ -1,223 +0,0 @@
-'use client';
-
-import { useCallback, useEffect, useState, type ReactNode } from 'react';
-import { Button, InlineAlert } from '@bcgov/design-system-react-components';
-import { useDictionary } from '@/app/[lang]/Providers';
-import {
-  fetchBuildMeta,
-  fetchCodesMeta,
-  fetchFeaturesMeta,
-  fetchFormEnginesMeta,
-  fetchFrontendConfigMeta,
-  fetchHealth,
-  fetchHealthReady,
-  fetchPluginsMeta,
-  fetchRolesMeta,
-} from '@/src/shared/api/sobaApi';
-
-type SectionState =
-  | { status: 'idle' | 'loading' }
-  | { status: 'ok'; data: unknown }
-  | { status: 'error'; message: string };
-
-const initialSection: SectionState = { status: 'idle' };
-
-function formatJson(data: unknown): string {
-  try {
-    return JSON.stringify(data, null, 2);
-  } catch {
-    return String(data);
-  }
-}
-
-function JsonBlock({ state }: { state: SectionState }) {
-  if (state.status === 'loading') return <p className="text-muted small mb-0">Loading…</p>;
-  if (state.status === 'error') {
-    return (
-      <div className="mt-2">
-        <InlineAlert variant="danger" role="alert">
-          {state.message}
-        </InlineAlert>
-      </div>
-    );
-  }
-  if (state.status === 'ok') {
-    return (
-      <pre
-        className="mt-2 border rounded bg-light p-3 small overflow-auto"
-        style={{ maxHeight: '28rem' }}
-      >
-        {formatJson(state.data)}
-      </pre>
-    );
-  }
-  return null;
-}
-
-function MetaSection({
-  title,
-  state,
-  children,
-}: {
-  title: string;
-  state: SectionState;
-  children?: ReactNode;
-}) {
-  return (
-    <section className="mb-4 pb-4 border-bottom">
-      <h2 className="h5 mb-2">{title}</h2>
-      {children}
-      <JsonBlock state={state} />
-    </section>
-  );
-}
-
-export default function MetaReviewClient() {
-  const dict = useDictionary();
-  const labels = dict.metaPage;
-
-  const [health, setHealth] = useState<SectionState>(initialSection);
-  const [readiness, setReadiness] = useState<SectionState>(initialSection);
-  const [build, setBuild] = useState<SectionState>(initialSection);
-  const [features, setFeatures] = useState<SectionState>(initialSection);
-  const [frontendConfig, setFrontendConfig] = useState<SectionState>(initialSection);
-  const [plugins, setPlugins] = useState<SectionState>(initialSection);
-  const [formEngines, setFormEngines] = useState<SectionState>(initialSection);
-  const [codes, setCodes] = useState<SectionState>(initialSection);
-  const [roles, setRoles] = useState<SectionState>(initialSection);
-
-  const loadCore = useCallback(async () => {
-    setHealth({ status: 'loading' });
-    setReadiness({ status: 'loading' });
-    setBuild({ status: 'loading' });
-    setFeatures({ status: 'loading' });
-    setFrontendConfig({ status: 'loading' });
-    setPlugins({ status: 'loading' });
-    setFormEngines({ status: 'loading' });
-
-    const run = async <T,>(
-      fn: () => Promise<T>,
-    ): Promise<{ ok: true; data: T } | { ok: false; message: string }> => {
-      try {
-        const data = await fn();
-        return { ok: true, data };
-      } catch (e) {
-        const message = e instanceof Error ? e.message : 'Request failed';
-        return { ok: false, message };
-      }
-    };
-
-    const [h, r, b, f, fc, p, fe] = await Promise.all([
-      run(() => fetchHealth()),
-      run(() => fetchHealthReady()),
-      run(() => fetchBuildMeta()),
-      run(() => fetchFeaturesMeta()),
-      run(() => fetchFrontendConfigMeta()),
-      run(() => fetchPluginsMeta()),
-      run(() => fetchFormEnginesMeta()),
-    ]);
-
-    setHealth(h.ok ? { status: 'ok', data: h.data } : { status: 'error', message: h.message });
-    if (r.ok) {
-      setReadiness({
-        status: 'ok',
-        data: { httpStatus: r.data.status, body: r.data.body },
-      });
-    } else {
-      setReadiness({ status: 'error', message: r.message });
-    }
-    setBuild(b.ok ? { status: 'ok', data: b.data } : { status: 'error', message: b.message });
-    setFeatures(f.ok ? { status: 'ok', data: f.data } : { status: 'error', message: f.message });
-    setFrontendConfig(
-      fc.ok ? { status: 'ok', data: fc.data } : { status: 'error', message: fc.message },
-    );
-    setPlugins(p.ok ? { status: 'ok', data: p.data } : { status: 'error', message: p.message });
-    setFormEngines(
-      fe.ok ? { status: 'ok', data: fe.data } : { status: 'error', message: fe.message },
-    );
-  }, []);
-
-  useEffect(() => {
-    // Schedule outside the effect flush: react-hooks/set-state-in-effect forbids calling loadCore()
-    // directly here because it updates many useStates synchronously at the start of the async fn.
-    const id = window.setTimeout(() => {
-      void loadCore();
-    }, 0);
-    return () => window.clearTimeout(id);
-  }, [loadCore]);
-
-  const loadCodes = useCallback(async () => {
-    setCodes({ status: 'loading' });
-    try {
-      const data = await fetchCodesMeta(true);
-      setCodes({ status: 'ok', data });
-    } catch (e) {
-      const message = e instanceof Error ? e.message : 'Request failed';
-      setCodes({ status: 'error', message });
-    }
-  }, []);
-
-  const loadRoles = useCallback(async () => {
-    setRoles({ status: 'loading' });
-    try {
-      const data = await fetchRolesMeta(true);
-      setRoles({ status: 'ok', data });
-    } catch (e) {
-      const message = e instanceof Error ? e.message : 'Request failed';
-      setRoles({ status: 'error', message });
-    }
-  }, []);
-
-  if (!labels) {
-    return (
-      <InlineAlert variant="warning">Missing dictionary keys for this page (metaPage).</InlineAlert>
-    );
-  }
-
-  return (
-    <div>
-      <div className="mb-4 d-flex flex-wrap align-items-center gap-3">
-        <Button type="button" variant="secondary" onPress={() => void loadCore()}>
-          {labels.refresh}
-        </Button>
-        <p className="text-muted small mb-0">GET /health, /health/ready, /meta/*</p>
-      </div>
-
-      <MetaSection title={labels.sections.health} state={health} />
-      <MetaSection title={labels.sections.readiness} state={readiness} />
-      <MetaSection title={labels.sections.build} state={build} />
-      <MetaSection title={labels.sections.features} state={features} />
-      <MetaSection title={labels.sections.frontendConfig} state={frontendConfig} />
-      <MetaSection title={labels.sections.plugins} state={plugins} />
-      <MetaSection title={labels.sections.formEngines} state={formEngines} />
-
-      <section className="mb-4 pb-4 border-bottom">
-        <h2 className="h5 mb-2">{labels.sections.codes}</h2>
-        <Button
-          type="button"
-          variant="secondary"
-          className="mb-2"
-          onPress={() => void loadCodes()}
-          isDisabled={codes.status === 'loading'}
-        >
-          {labels.loadCodes}
-        </Button>
-        <JsonBlock state={codes} />
-      </section>
-
-      <section className="mb-4">
-        <h2 className="h5 mb-2">{labels.sections.roles}</h2>
-        <Button
-          type="button"
-          variant="secondary"
-          className="mb-2"
-          onPress={() => void loadRoles()}
-          isDisabled={roles.status === 'loading'}
-        >
-          {labels.loadRoles}
-        </Button>
-        <JsonBlock state={roles} />
-      </section>
-    </div>
-  );
-}
diff --git a/frontend/src/features/meta-review/ui/MetaReviewClientLoader.tsx b/frontend/src/features/meta-review/ui/MetaReviewClientLoader.tsx
deleted file mode 100644
index 377ffe7..0000000
--- a/frontend/src/features/meta-review/ui/MetaReviewClientLoader.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-'use client';
-
-import dynamic from 'next/dynamic';
-
-/** Client-only: BC DS `Button` (React Aria) emits unstable `id`s under SSR → hydration mismatch. */
-const MetaReviewClient = dynamic(() => import('./MetaReviewClient'), {
-  ssr: false,
-  loading: () => (
-    <p className="small" style={{ color: 'var(--typography-color-secondary)' }}>
-      Loading…
-    </p>
-  ),
-});
-
-export default function MetaReviewClientLoader() {
-  return <MetaReviewClient />;
-}
diff --git a/frontend/src/features/submit-mode/ui/SubmissionList.tsx b/frontend/src/features/submit-mode/ui/SubmissionList.tsx
index 84395aa..612a7eb 100644
--- a/frontend/src/features/submit-mode/ui/SubmissionList.tsx
+++ b/frontend/src/features/submit-mode/ui/SubmissionList.tsx
@@ -2,13 +2,16 @@
 
 import { useEffect, useMemo, useState } from 'react';
 import { Container } from 'react-bootstrap';
-import { useRouter, usePathname } from 'next/navigation';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
 import { useKeycloak } from '@/lib/hooks/useKeycloak';
 import { useDictionary } from '@/app/[lang]/Providers';
 import { getLocaleFromPath } from '@/src/shared/util/locale';
 import { getSobaSubmissions } from '@/src/shared/api/sobaApiForms';
 import type { SubmissionListItem } from '@/src/types/submissions';
 import { DataTable, Column } from '@/src/components/DataTable';
+import { DsPageHeading } from '@/app/ui/DsPageHeading';
+import { WorkflowStateBadge } from './WorkflowStateBadge';
 import { useAppSelector } from '@/lib/store';
 
 interface SubmissionListProps {
@@ -18,7 +21,6 @@ interface SubmissionListProps {
 export function SubmissionList({ formId }: SubmissionListProps = {}) {
   const { authenticated, token, initializing } = useKeycloak();
   const dict = useDictionary();
-  const router = useRouter();
   const pathname = usePathname();
   const locale = getLocaleFromPath(pathname);
   const [submissions, setSubmissions] = useState<SubmissionListItem[]>([]);
@@ -52,13 +54,11 @@ export function SubmissionList({ formId }: SubmissionListProps = {}) {
     }
   }, [authenticated, token, formId, activeWorkspaceId]);
 
-  const loading = !!(authenticated && token && !isLoaded);
+  const loading = initializing || (authenticated && (!token || !isLoaded));
 
-  if (initializing || (authenticated && !token)) {
-    return <div className="p-4">{dict.form?.loading || 'Loading submissions...'}</div>;
-  }
-
-  if (!authenticated) {
+  // Auth gate only — loading (including Keycloak init) is shown inside the table
+  // body so the page heading stays visible throughout.
+  if (!authenticated && !initializing) {
     return null;
   }
 
@@ -68,19 +68,14 @@ export function SubmissionList({ formId }: SubmissionListProps = {}) {
       key: 'id',
       label: dict.submission?.columns?.id || 'Submission ID',
       render: (sub) => (
-        <a
-          href="#"
+        <Link
+          href={`/${locale}/submission/${sub.id}`}
           data-testid={`submission-view-${sub.id}`}
-          onClick={(e) => {
-            e.preventDefault();
-            router.push(`/${locale}/submission/${sub.id}`);
-          }}
-          className="text-decoration-underline font-monospace small"
-          style={{ cursor: 'pointer', color: '#00538A' }}
+          className="text-decoration-underline font-monospace small link-primary"
           title={dict.submission?.view || 'View'}
         >
           {sub.id}
-        </a>
+        </Link>
       ),
     },
     {
@@ -103,23 +98,15 @@ export function SubmissionList({ formId }: SubmissionListProps = {}) {
     {
       key: 'workflowState',
       label: dict.submission?.columns?.status || 'Status',
-      render: (sub) => (
-        <span
-          className={`badge rounded-pill ${
-            sub.workflowState === 'submitted' ? 'text-bg-success' : 'text-bg-secondary'
-          }`}
-        >
-          {sub.workflowState.toUpperCase()}
-        </span>
-      ),
+      render: (sub) => <WorkflowStateBadge state={sub.workflowState} />,
     },
   ];
 
   return (
     <Container fluid className="py-4 px-lg-5">
-      <div>
-        <h1>{dict.submission?.submissions || 'Submissions'}</h1>
-      </div>
+      <DsPageHeading id="submissions-heading">
+        {dict.submission?.submissions || 'Submissions'}
+      </DsPageHeading>
       <DataTable<SubmissionListItem>
         data={paginatedSubmissions}
         columns={columns}
@@ -128,6 +115,7 @@ export function SubmissionList({ formId }: SubmissionListProps = {}) {
         loadingMessage={dict.submission?.loading || 'Loading submissions...'}
         keyExtractor={(sub) => sub.id}
         itemName={dict.submission?.submissions || 'submissions'}
+        caption={dict.submission?.submissions || 'Submissions'}
         totalItems={submissions.length}
         pageSize={pageSize}
         currentPage={currentPage}
diff --git a/frontend/src/features/submit-mode/ui/SubmissionView.tsx b/frontend/src/features/submit-mode/ui/SubmissionView.tsx
index 24d6c8b..f2d86b1 100644
--- a/frontend/src/features/submit-mode/ui/SubmissionView.tsx
+++ b/frontend/src/features/submit-mode/ui/SubmissionView.tsx
@@ -3,11 +3,13 @@
 import { useParams } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import type { FormType, Submission } from '@formio/react';
-import { ProgressCircle, InlineAlert } from '@bcgov/design-system-react-components';
+import { InlineAlert } from '@bcgov/design-system-react-components';
+import { CenteredProgress } from '@/app/ui/base/CenteredProgress';
 import { useKeycloak } from '@/lib/hooks/useKeycloak';
 import { useDictionary } from '@/app/[lang]/Providers';
 import { useAppSelector } from '@/lib/store';
 import { ReadOnlyFormView } from '@/src/features/formio-v5/ui/ReadOnlyFormView';
+import { WorkflowStateBadge } from './WorkflowStateBadge';
 import { useFormatLongDate } from '@/src/shared/hooks/useFormatLongDate';
 import {
   getSobaSubmission,
@@ -63,18 +65,14 @@ export function SubmissionView() {
   }, [authenticated, token, submissionId, ws, loaded]);
 
   if (initializing || (authenticated && !token)) {
-    return (
-      <div className="p-5 text-center">
-        <ProgressCircle isIndeterminate aria-label={dict.general.loading} />
-      </div>
-    );
+    return <CenteredProgress label={dict.general.loading} />;
   }
   if (!authenticated) return null;
 
   return (
     <div className="mt-3" data-testid="submission-view">
       {!loaded ? (
-        <p className="text-muted small">{dictSub?.loading || 'Loading…'}</p>
+        <CenteredProgress label={dictSub?.loading || dict.general.loading} />
       ) : notFound || !submission ? (
         <InlineAlert variant="danger" role="alert" data-testid="submission-view-notfound">
           {dictSub?.notFound || 'Submission not found.'}
@@ -82,13 +80,14 @@ export function SubmissionView() {
       ) : (
         <>
           <div className="mb-3" data-testid="submission-view-header">
-            <h2 className="h5 mb-1">{submission.formName || dict.form?.nameLabel || 'Submission'}</h2>
+            <h3 className="h5 mb-1">{submission.formName || dict.form?.nameLabel || 'Submission'}</h3>
             <div className="small text-muted">
               <span data-testid="submission-view-version">v{submission.versionNo ?? 1}</span>
               {' · '}
-              <span data-testid="submission-view-status">
-                {(submission.workflowState || '').toUpperCase()}
-              </span>
+              <WorkflowStateBadge
+                state={submission.workflowState}
+                data-testid="submission-view-status"
+              />
               {submission.submittedAt ? (
                 <>
                   {' · '}
diff --git a/frontend/src/features/submit-mode/ui/WorkflowStateBadge.tsx b/frontend/src/features/submit-mode/ui/WorkflowStateBadge.tsx
new file mode 100644
index 0000000..9f0f055
--- /dev/null
+++ b/frontend/src/features/submit-mode/ui/WorkflowStateBadge.tsx
@@ -0,0 +1,20 @@
+'use client';
+
+type WorkflowStateBadgeProps = {
+  state?: string;
+  'data-testid'?: string;
+};
+
+/**
+ * The submission workflow-state pill, shared by the submissions list and the
+ * single-submission viewer so the status looks identical in both places. The
+ * state text is always rendered (not color-only) for accessibility.
+ */
+export function WorkflowStateBadge({ state, 'data-testid': testId }: WorkflowStateBadgeProps) {
+  const variant = (state || '').toLowerCase() === 'submitted' ? 'text-bg-success' : 'text-bg-secondary';
+  return (
+    <span className={`badge rounded-pill ${variant}`} data-testid={testId}>
+      {(state || '').toUpperCase()}
+    </span>
+  );
+}
diff --git a/frontend/src/shared/config/runtimeConfig.ts b/frontend/src/shared/config/runtimeConfig.ts
index 3fb9441..6e1b376 100644
--- a/frontend/src/shared/config/runtimeConfig.ts
+++ b/frontend/src/shared/config/runtimeConfig.ts
@@ -87,10 +87,6 @@ export async function loadFrontendRuntimeConfig(): Promise<FrontendRuntimeConfig
   return configPromise;
 }
 
-export function getCachedFrontendRuntimeConfig(): FrontendRuntimeConfig | null {
-  return cachedConfig;
-}
-
 export function getSobaApiBaseUrl(): string {
   return cachedConfig?.api.baseUrl ?? getBootstrapApiBaseUrl();
 }
diff --git a/frontend/src/shared/featureFlags/flags.ts b/frontend/src/shared/featureFlags/flags.ts
index 308a57d..677d519 100644
--- a/frontend/src/shared/featureFlags/flags.ts
+++ b/frontend/src/shared/featureFlags/flags.ts
@@ -5,7 +5,8 @@ export const FEATURE_CODES = {
   WORKSPACES: 'workspaces',
   DESIGN_MODE: 'design-mode',
   SUBMIT_MODE: 'submit-mode',
-  /** Dev/review: API meta & health inspection (matches `soba.feature` seed code `meta`). */
+  /** Backend `soba.feature` seed code `meta` (API meta & health). Mirrored here so
+   * the frontend feature enumeration stays in sync even without a dedicated UI. */
   META: 'meta',
   MARKETING: 'marketing',
 } as const;
diff --git a/frontend/src/shared/util/locale.ts b/frontend/src/shared/util/locale.ts
index 8feaa53..f0a2cf5 100644
--- a/frontend/src/shared/util/locale.ts
+++ b/frontend/src/shared/util/locale.ts
@@ -1,7 +1,7 @@
 /**
  * Supported locales
  */
-export const knownLocales = ['en', 'fr'] as const;
+const knownLocales = ['en', 'fr'] as const;
 
 /**
  * Small client-side utility to extract locale (en|fr) from a pathname.
diff --git a/frontend/src/types/formio.ts b/frontend/src/types/formio.ts
deleted file mode 100644
index 5602188..0000000
--- a/frontend/src/types/formio.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/** Minimal shape from GET /formio-v5/form (Form.io CE). */
-export type FormioV5FormListItem = {
-  _id: string;
-  title?: string;
-  name?: string;
-  path?: string;
-};
diff --git a/frontend/src/types/forms.ts b/frontend/src/types/forms.ts
index 8086298..39e0889 100644
--- a/frontend/src/types/forms.ts
+++ b/frontend/src/types/forms.ts
@@ -26,22 +26,6 @@ export type SobaResponseFormType = {
   formEngineCode?: string;
 };
 
-export type SobaFormWithVersionResponse = SobaResponseFormType & {
-  formVersion?: {
-    id: string;
-    formId: string;
-    versionNo: number;
-    state: string;
-    engineSyncStatus: string;
-    engineSchemaRef?: string | null;
-    currentRevisionNo: number;
-    publishedAt?: string | null;
-    visibility?: string[];
-    createdAt: string;
-    updatedAt: string;
-  } | null;
-};
-
 export type SobaFormVersionType = {
   id: string;
   versionNo: number;
diff --git a/frontend/tests/components/DataTable.test.tsx b/frontend/tests/components/DataTable.test.tsx
index 11043a7..19eea1f 100644
--- a/frontend/tests/components/DataTable.test.tsx
+++ b/frontend/tests/components/DataTable.test.tsx
@@ -30,7 +30,9 @@ describe('DataTable', () => {
       />,
     );
 
-    expect(screen.getByText('Please wait...')).toBeInTheDocument();
+    // No visible loading text by design — the spinner carries the message as its
+    // screen-reader accessible name (aria-label) inside a role="status" region.
+    expect(screen.getByRole('progressbar', { name: 'Please wait...' })).toBeInTheDocument();
   });
 
   it('renders rows and calls paging callbacks', async () => {
diff --git a/frontend/tests/features/designer/FormDesigner.test.tsx b/frontend/tests/features/designer/FormDesigner.test.tsx
index 8bb96cb..786441e 100644
--- a/frontend/tests/features/designer/FormDesigner.test.tsx
+++ b/frontend/tests/features/designer/FormDesigner.test.tsx
@@ -29,10 +29,10 @@ describe('FormDesigner', () => {
     vi.clearAllMocks();
   });
 
-  it('shows loading message when initializing', () => {
+  it('shows the loading indicator when initializing', () => {
     keycloakState = { authenticated: false, initializing: true };
     render(<FormDesigner onUpdateModel={() => {}} initialModel={null} />);
-    expect(screen.getByText('Loading Designer...')).toBeInTheDocument();
+    expect(screen.getByRole('status')).toBeInTheDocument();
   });
 
   it('shows login required when not authenticated', () => {
diff --git a/frontend/tests/features/designer/FormList.test.tsx b/frontend/tests/features/designer/FormList.test.tsx
index 80788c0..c9676ee 100644
--- a/frontend/tests/features/designer/FormList.test.tsx
+++ b/frontend/tests/features/designer/FormList.test.tsx
@@ -11,7 +11,7 @@ vi.mock('@/lib/hooks/useKeycloak', () => ({
 vi.mock('@/app/[lang]/Providers', () => ({
   useDictionary: () => ({
     locale: 'en',
-    general: { notAuthenticated: 'Not authed' },
+    general: { notAuthenticated: 'Not authed', forms: 'Forms' },
     form: { nameLabel: 'Form Name' },
     submission: {
       formList: {
@@ -76,7 +76,7 @@ describe('FormList', () => {
     await act(async () => {
       render(<FormList />);
     });
-    expect(screen.getByText('Forms')).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: 'Forms' })).toBeInTheDocument();
     // DS TextField puts data-testid on its wrapper; query the input by its
     // accessible label instead.
     const input = screen.getByLabelText('Search');
diff --git a/frontend/tests/lib/constants.test.ts b/frontend/tests/lib/constants.test.ts
deleted file mode 100644
index 41169d4..0000000
--- a/frontend/tests/lib/constants.test.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { NotificationTypes } from '@/lib/constants';
-
-describe('NotificationTypes', () => {
-  it('defines INFO type', () => {
-    expect(NotificationTypes.INFO).toEqual({ type: 'info' });
-  });
-
-  it('defines SUCCESS type', () => {
-    expect(NotificationTypes.SUCCESS).toEqual({ type: 'success' });
-  });
-
-  it('defines WARNING type', () => {
-    expect(NotificationTypes.WARNING).toEqual({ type: 'warning' });
-  });
-
-  it('defines ERROR type', () => {
-    expect(NotificationTypes.ERROR).toEqual({ type: 'error' });
-  });
-
-  it('covers all four notification types', () => {
-    expect(Object.keys(NotificationTypes)).toHaveLength(4);
-  });
-});