frontend/src/components/BackLink.tsx

@@ -0,0 +1,17 @@
+import { Link } from 'react-router-dom';
+import { ArrowLeft } from 'lucide-react';
+import type { ReactNode } from 'react';
+
+interface BackLinkProps {
+  to: string;
+  children: ReactNode;
+}
+
+export function BackLink({ to, children }: BackLinkProps): JSX.Element {
+  return (
+    <Link to={to} className="inline-flex items-center gap-xxs caption-md text-graphite hover:text-primary">
+      <ArrowLeft size={14} aria-hidden />
+      {children}
+    </Link>
+  );
+}

frontend/src/pages/SimulationFormPage.tsx

@@ -22,6 +22,8 @@ import { MitreTechniquesField } from '@/components/MitreTechniquesField';
 import { ExecuteViaC2Modal } from '@/components/ExecuteViaC2Modal';
 import { ImportC2HistoryModal } from '@/components/ImportC2HistoryModal';
 import { C2TasksPanel } from '@/components/C2TasksPanel';
+import { AlertBanner } from '@/components/AlertBanner';
+import { BackLink } from '@/components/BackLink';
 
 interface RedteamFormState {
   name: string;
@@ -238,9 +240,7 @@ export function SimulationFormPage(): JSX.Element {
     return (
       <div className="flex flex-col gap-xl max-w-2xl">
         <header>
-          <Link to={`/engagements/${engagementId}`} className="btn-text-link text-[14px]">
-            ← Back to engagement
-          </Link>
+          <BackLink to={`/engagements/${engagementId}`}>Back to engagement</BackLink>
           <h1 className="text-[32px] font-medium leading-none mt-sm">New simulation</h1>
         </header>
 
@@ -279,9 +279,7 @@ export function SimulationFormPage(): JSX.Element {
     <div className="flex flex-col gap-xl">
       <header className="flex items-start justify-between gap-md">
         <div className="flex flex-col gap-sm">
-          <Link to={`/engagements/${engagementId}`} className="btn-text-link text-[14px]">
-            ← Back to engagement
-          </Link>
+          <BackLink to={`/engagements/${engagementId}`}>Back to engagement</BackLink>
           <h1 className="text-[32px] font-medium leading-none">{rt.name || simulation?.name}</h1>
           {status ? (
             <div className="flex items-center gap-md">
@@ -298,22 +296,17 @@ export function SimulationFormPage(): JSX.Element {
 
       {/* Done banner */}
       {isDone && (
-        <div
-          role="status"
-          className="rounded-none px-xl py-md bg-cloud border border-hairline text-[14px] text-charcoal"
-        >
+        <AlertBanner variant="success">
           This simulation is <strong>done</strong> and read-only. Use Reopen to make changes.
-        </div>
+        </AlertBanner>
       )}
 
       {/* SOC banner */}
       {socBlocked && (
-        <div
-          role="alert"
-          data-testid="soc-blocked-banner"
-          className="rounded-none px-xl py-md bg-fog border border-hairline text-[14px] text-charcoal"
-        >
-          Simulation not yet ready for review — the red team must mark it as &quot;Review required&quot; before you can fill in the SOC section.
+        <div data-testid="soc-blocked-banner">
+          <AlertBanner variant="warn">
+            Simulation not yet ready for review — the red team must mark it as &quot;Review required&quot; before you can fill in the SOC section.
+          </AlertBanner>
         </div>
       )}
 

frontend/src/pages/TemplateFormPage.tsx

@@ -9,6 +9,7 @@ import { FormField, TextArea, TextInput } from '@/components/FormField';
 import { LoadingState } from '@/components/LoadingState';
 import { ErrorState } from '@/components/ErrorState';
 import { ConfirmDialog } from '@/components/ConfirmDialog';
+import { BackLink } from '@/components/BackLink';
 import { MitreTechniqueTag, MitreTacticTag } from '@/components/MitreTechniqueTag';
 import { MitreTechniquePicker } from '@/components/MitreTechniquePicker';
 import { MitreMatrixModal } from '@/components/MitreMatrixModal';
@@ -127,9 +128,7 @@ export function TemplateFormPage(): JSX.Element {
     <div className="flex flex-col gap-xl">
       <header className="flex items-start justify-between gap-md">
         <div className="flex flex-col gap-sm">
-          <Link to="/admin/templates" className="btn-text-link text-[14px]">
-            ← Back to templates
-          </Link>
+          <BackLink to="/admin/templates">Back to templates</BackLink>
           <h1 className="text-[32px] font-medium leading-none">
             {isNew ? 'New template' : (existing.data?.name ?? 'Edit template')}
           </h1>