diff --git a/frontend/src/components/mfa/BackupCodeTicket.tsx b/frontend/src/components/mfa/BackupCodeTicket.tsx
new file mode 100644
index 00000000..106f4597
--- /dev/null
+++ b/frontend/src/components/mfa/BackupCodeTicket.tsx
@@ -0,0 +1,29 @@
+import { cn } from '@/lib/utils';
+
+export function BackupCodeTicket({ codes }: { codes: string[] }) {
+  return (
+    <div className="overflow-hidden rounded-md border border-card-border bg-background/60 shadow-[inset_0_2px_6px_0_oklch(0_0_0/0.35)]">
+      <div className="flex items-center justify-between border-b border-card-border/60 px-3 py-2 font-mono text-[10px] uppercase tracking-[0.18em] text-stat-subtitle">
+        <span>Recovery codes</span>
+        <span className="tabular-nums">{codes.length} issued</span>
+      </div>
+      <ol className="grid grid-cols-1 sm:grid-cols-2">
+        {codes.map((c, i) => (
+          <li
+            key={c}
+            className={cn(
+              'flex items-center gap-3 px-3 py-2 font-mono text-sm tabular-nums tracking-[0.15em] text-stat-value',
+              'border-t border-card-border/40',
+              i < 2 && 'sm:border-t-0',
+            )}
+          >
+            <span className="text-[10px] uppercase tracking-[0.18em] text-stat-subtitle">
+              {String(i + 1).padStart(2, '0')}
+            </span>
+            <span>{c}</span>
+          </li>
+        ))}
+      </ol>
+    </div>
+  );
+}
diff --git a/frontend/src/components/mfa/MfaBackupCodesDialog.tsx b/frontend/src/components/mfa/MfaBackupCodesDialog.tsx
index 04ca78d1..886f0e44 100644
--- a/frontend/src/components/mfa/MfaBackupCodesDialog.tsx
+++ b/frontend/src/components/mfa/MfaBackupCodesDialog.tsx
@@ -1,21 +1,14 @@
 import { useRef, useState } from 'react';
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogDescription,
-  DialogFooter,
-} from '@/components/ui/dialog';
+import { Modal, ModalHeader, ModalBody, ModalFooter } from '@/components/ui/modal';
 import { Button } from '@/components/ui/button';
 import { Check, Copy, Download } from 'lucide-react';
 import { toast } from '@/components/ui/toast-store';
 import { apiFetch } from '@/lib/api';
 import { copyToClipboard } from '@/lib/clipboard';
-import { cn } from '@/lib/utils';
 import { TOTP_LENGTH, normalizeTotpInput } from '@/lib/mfa';
 import { OtpDigitField } from '@/components/auth/OtpDigitField';
 import { ErrorRail } from '@/components/auth/ErrorRail';
+import { BackupCodeTicket } from './BackupCodeTicket';
 
 interface MfaBackupCodesDialogProps {
   open: boolean;
@@ -122,7 +115,8 @@ export function MfaBackupCodesDialog({ open, onOpenChange, onRegenerated }: MfaB
   };
 
   return (
-    <Dialog
+    <Modal
+      size="md"
       open={open}
       onOpenChange={(next) => {
         if (!next) {
@@ -132,108 +126,73 @@ export function MfaBackupCodesDialog({ open, onOpenChange, onRegenerated }: MfaB
         onOpenChange(next);
       }}
     >
-      <DialogContent className="max-w-md overflow-hidden p-0">
-        <div className="relative">
-          <span aria-hidden className="absolute inset-y-0 left-0 w-[3px] bg-brand/70" />
+      <ModalHeader
+        kicker="SECURITY · BACKUP CODES"
+        title={step === 'confirm' ? 'Confirm identity' : 'New recovery codes'}
+        description="Replace your backup codes with a freshly generated set. The previous set stops working immediately."
+      />
 
-          <DialogHeader className="border-b border-card-border/60 px-6 pt-6 pb-4 text-left">
-            <div className="font-mono text-[10px] uppercase tracking-[0.22em] text-stat-subtitle">
-              SENCHO · MFA
+      {step === 'confirm' && (
+        <>
+          <ModalBody>
+            <p className="text-sm leading-snug text-stat-subtitle">
+              Enter a code from your authenticator to generate a new set. The previous codes stop working immediately.
+            </p>
+            <OtpDigitField
+              id="mfa-regen-code"
+              value={code}
+              onChange={handleCodeChange}
+              state={confirmState}
+              disabled={loading || confirmState === 'success'}
+              autoFocus
+            />
+            {error && <ErrorRail>{error}</ErrorRail>}
+          </ModalBody>
+          <ModalFooter
+            secondary={
+              <Button type="button" variant="ghost" onClick={() => onOpenChange(false)} disabled={loading}>
+                Cancel
+              </Button>
+            }
+            primary={null}
+          />
+        </>
+      )}
+
+      {step === 'show' && (
+        <>
+          <ModalBody>
+            <WarningRail>Previous codes have been invalidated.</WarningRail>
+            <p className="text-sm leading-snug text-stat-subtitle">
+              Each code can be used once. Store them safely. They will not be shown again.
+            </p>
+            <BackupCodeTicket codes={backupCodes} />
+            <div className="flex gap-2">
+              <Button type="button" variant="outline" className="flex-1" onClick={handleCopy}>
+                <Copy className="h-4 w-4" strokeWidth={1.5} />
+                Copy all
+              </Button>
+              <Button type="button" variant="outline" className="flex-1" onClick={handleDownload}>
+                <Download className="h-4 w-4" strokeWidth={1.5} />
+                Download
+              </Button>
             </div>
-            <DialogTitle className="mt-1 font-display text-[1.75rem] italic leading-tight text-stat-value">
-              {step === 'confirm' ? 'Confirm identity' : 'New recovery codes'}
-            </DialogTitle>
-            <DialogDescription className="sr-only">
-              Replace your backup codes with a freshly generated set. The previous
-              set stops working immediately.
-            </DialogDescription>
-          </DialogHeader>
-
-          <div className="px-6 py-5">
-            {step === 'confirm' && (
-              <div className="flex flex-col gap-4">
-                <p className="text-sm leading-snug text-stat-subtitle">
-                  Enter a code from your authenticator to generate a new set. The previous codes stop working immediately.
-                </p>
-                <OtpDigitField
-                  id="mfa-regen-code"
-                  value={code}
-                  onChange={handleCodeChange}
-                  state={confirmState}
-                  disabled={loading || confirmState === 'success'}
-                  autoFocus
-                />
-                {error && <ErrorRail>{error}</ErrorRail>}
-                <DialogFooter className="mt-2 gap-2 sm:gap-2">
-                  <Button type="button" variant="ghost" onClick={() => onOpenChange(false)} disabled={loading}>
-                    Cancel
-                  </Button>
-                </DialogFooter>
-              </div>
-            )}
-
-            {step === 'show' && (
-              <div className="flex flex-col gap-4">
-                <WarningRail>Previous codes have been invalidated.</WarningRail>
-                <p className="text-sm leading-snug text-stat-subtitle">
-                  Each code can be used once. Store them safely. They will not be shown again.
-                </p>
-                <BackupCodeTicket codes={backupCodes} />
-                <div className="flex gap-2">
-                  <Button type="button" variant="outline" className="flex-1" onClick={handleCopy}>
-                    <Copy className="h-4 w-4" strokeWidth={1.5} />
-                    Copy all
-                  </Button>
-                  <Button type="button" variant="outline" className="flex-1" onClick={handleDownload}>
-                    <Download className="h-4 w-4" strokeWidth={1.5} />
-                    Download
-                  </Button>
-                </div>
-                <DialogFooter className="mt-2">
-                  <Button
-                    type="button"
-                    onClick={handleFinish}
-                    className="bg-brand text-brand-foreground shadow-btn-glow hover:bg-brand/90"
-                  >
-                    <Check strokeWidth={1.5} />
-                    Done
-                  </Button>
-                </DialogFooter>
-              </div>
-            )}
-          </div>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-function BackupCodeTicket({ codes }: { codes: string[] }) {
-  return (
-    <div className="overflow-hidden rounded-md border border-card-border bg-background/60 shadow-[inset_0_2px_6px_0_oklch(0_0_0/0.35)]">
-      <div className="flex items-center justify-between border-b border-card-border/60 px-3 py-2 font-mono text-[10px] uppercase tracking-[0.18em] text-stat-subtitle">
-        <span>Recovery codes</span>
-        <span className="tabular-nums">{codes.length} issued</span>
-      </div>
-      <ol className="grid grid-cols-1 sm:grid-cols-2">
-        {codes.map((c, i) => (
-          <li
-            key={c}
-            className={cn(
-              'flex items-center gap-3 px-3 py-2 font-mono text-sm tabular-nums tracking-[0.15em] text-stat-value',
-              'border-t border-card-border/40',
-              i === 0 && 'sm:border-t-0',
-              i === 1 && 'sm:border-t-0',
-            )}
-          >
-            <span className="text-[10px] uppercase tracking-[0.18em] text-stat-subtitle">
-              {String(i + 1).padStart(2, '0')}
-            </span>
-            <span>{c}</span>
-          </li>
-        ))}
-      </ol>
-    </div>
+          </ModalBody>
+          <ModalFooter
+            primary={
+              <Button
+                type="button"
+                onClick={handleFinish}
+                className="bg-brand text-brand-foreground shadow-btn-glow hover:bg-brand/90"
+              >
+                <Check strokeWidth={1.5} />
+                Done
+              </Button>
+            }
+          />
+        </>
+      )}
+    </Modal>
   );
 }
 
@@ -247,4 +206,3 @@ function WarningRail({ children }: { children: React.ReactNode }) {
     </div>
   );
 }
-
diff --git a/frontend/src/components/mfa/MfaDisableDialog.tsx b/frontend/src/components/mfa/MfaDisableDialog.tsx
index 0cf9271e..6516bba7 100644
--- a/frontend/src/components/mfa/MfaDisableDialog.tsx
+++ b/frontend/src/components/mfa/MfaDisableDialog.tsx
@@ -1,13 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
-import {
-  AlertDialog,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogCancel,
-} from '@/components/ui/alert-dialog';
+import { Modal, ModalDestructiveHeader, ModalBody, ModalFooter } from '@/components/ui/modal';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { toast } from '@/components/ui/toast-store';
@@ -127,76 +119,70 @@ export function MfaDisableDialog({ open, onOpenChange, onDisabled }: MfaDisableD
   };
 
   return (
-    <AlertDialog open={open} onOpenChange={onOpenChange}>
-      <AlertDialogContent className="max-w-md overflow-hidden p-0">
-        <div className="relative">
-          <span aria-hidden className="absolute inset-y-0 left-0 w-[3px] bg-destructive/70" />
-
-          <AlertDialogHeader className="border-b border-card-border/60 px-6 pt-6 pb-4 text-left">
-            <div className="font-mono text-[10px] uppercase tracking-[0.22em] text-destructive">
-              SENCHO · MFA · DISABLE
-            </div>
-            <AlertDialogTitle className="mt-1 font-display text-[1.75rem] italic leading-tight text-stat-value">
-              Turn off two-factor
-            </AlertDialogTitle>
-            <AlertDialogDescription className="mt-2 text-sm leading-snug text-stat-subtitle">
-              Disabling 2FA removes this login layer. Your backup codes become invalid. Confirm with a current code to proceed.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-
-          <div className="flex flex-col gap-4 px-6 py-5">
-            {useBackup ? (
-              <div className="flex flex-col gap-1.5">
-                <span className="font-mono text-[10px] uppercase tracking-[0.18em] text-stat-subtitle">
-                  Backup code · 10 chars
-                </span>
-                <Input
-                  id="mfa-disable-backup"
-                  type="text"
-                  inputMode="text"
-                  autoComplete="one-time-code"
-                  maxLength={BACKUP_CODE_DISPLAY_LENGTH}
-                  value={display}
-                  onChange={(e) => handleBackupChange(e.target.value)}
-                  placeholder="ABCDE-FGHIJ"
-                  className="h-12 bg-background/60 border-card-border text-center font-mono text-lg tabular-nums tracking-[0.3em] shadow-[inset_0_2px_4px_0_oklch(0_0_0/0.25)] focus-visible:border-brand/60 focus-visible:ring-2 focus-visible:ring-brand/40"
-                />
-              </div>
-            ) : (
-              <OtpDigitField
-                id="mfa-disable-code"
-                value={display}
-                onChange={handleOtpChange}
-                state={otpState}
-                disabled={loading || otpState === 'success'}
-                autoFocus
-              />
-            )}
-
-            <button
-              type="button"
-              onClick={handleToggleBackup}
-              className="self-start font-mono text-[10px] uppercase tracking-[0.18em] text-stat-subtitle transition-colors hover:text-brand"
-            >
-              {useBackup ? '[ Use authenticator ]' : '[ Use backup code ]'}
-            </button>
-
-            {error && <ErrorRail>{error}</ErrorRail>}
+    <Modal size="md" open={open} onOpenChange={onOpenChange}>
+      <ModalDestructiveHeader
+        kicker="SECURITY · MFA · DISABLE"
+        title="Turn off two-factor"
+        description="Disabling 2FA removes this login layer. Your backup codes become invalid."
+      />
+      <ModalBody>
+        <p className="text-sm leading-snug text-stat-subtitle">
+          Disabling 2FA removes this login layer. Your backup codes become invalid.
+          Confirm with a current code to proceed.
+        </p>
+        {useBackup ? (
+          <div className="flex flex-col gap-1.5">
+            <span className="font-mono text-[10px] uppercase tracking-[0.18em] text-stat-subtitle">
+              Backup code · 10 chars
+            </span>
+            <Input
+              id="mfa-disable-backup"
+              type="text"
+              inputMode="text"
+              autoComplete="one-time-code"
+              maxLength={BACKUP_CODE_DISPLAY_LENGTH}
+              value={display}
+              onChange={(e) => handleBackupChange(e.target.value)}
+              placeholder="ABCDE-FGHIJ"
+              className="h-12 bg-background/60 border-card-border text-center font-mono text-lg tabular-nums tracking-[0.3em] shadow-[inset_0_2px_4px_0_oklch(0_0_0/0.25)] focus-visible:border-brand/60 focus-visible:ring-2 focus-visible:ring-brand/40"
+            />
           </div>
-
-          <AlertDialogFooter className="border-t border-card-border/60 px-6 py-4">
-            <AlertDialogCancel disabled={loading}>Cancel</AlertDialogCancel>
-            <Button
-              type="button"
-              variant="destructive"
-              disabled={loading || raw.length !== expectedLength}
-              onClick={handleDisableClick}
-            >
-              {loading ? 'Disabling...' : 'Disable'}
-            </Button>
-          </AlertDialogFooter>
-        </div>
-      </AlertDialogContent>
-    </AlertDialog>
+        ) : (
+          <OtpDigitField
+            id="mfa-disable-code"
+            value={display}
+            onChange={handleOtpChange}
+            state={otpState}
+            disabled={loading || otpState === 'success'}
+            autoFocus
+          />
+        )}
+        <button
+          type="button"
+          onClick={handleToggleBackup}
+          className="self-start font-mono text-[10px] uppercase tracking-[0.18em] text-stat-subtitle transition-colors hover:text-brand"
+        >
+          {useBackup ? '[ Use authenticator ]' : '[ Use backup code ]'}
+        </button>
+        {error && <ErrorRail>{error}</ErrorRail>}
+      </ModalBody>
+      <ModalFooter
+        secondary={
+          <Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={loading}>
+            Cancel
+          </Button>
+        }
+        primary={
+          <Button
+            type="button"
+            variant="destructive"
+            disabled={loading || raw.length !== expectedLength}
+            onClick={handleDisableClick}
+          >
+            {loading ? 'Disabling...' : 'Disable'}
+          </Button>
+        }
+      />
+    </Modal>
   );
 }
diff --git a/frontend/src/components/mfa/MfaEnrollDialog.tsx b/frontend/src/components/mfa/MfaEnrollDialog.tsx
index 91a5cc08..36ef3ae6 100644
--- a/frontend/src/components/mfa/MfaEnrollDialog.tsx
+++ b/frontend/src/components/mfa/MfaEnrollDialog.tsx
@@ -1,13 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 import { QRCodeSVG } from 'qrcode.react';
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogDescription,
-  DialogFooter,
-} from '@/components/ui/dialog';
+import { Modal, ModalHeader, ModalBody, ModalFooter } from '@/components/ui/modal';
 import { Button } from '@/components/ui/button';
 import { ArrowRight, Check, Copy, Download, Loader2 } from 'lucide-react';
 import { toast } from '@/components/ui/toast-store';
@@ -17,6 +10,7 @@ import { cn } from '@/lib/utils';
 import { TOTP_LENGTH, normalizeTotpInput } from '@/lib/mfa';
 import { OtpDigitField } from '@/components/auth/OtpDigitField';
 import { ErrorRail } from '@/components/auth/ErrorRail';
+import { BackupCodeTicket } from './BackupCodeTicket';
 
 interface MfaEnrollDialogProps {
   open: boolean;
@@ -158,134 +152,137 @@ export function MfaEnrollDialog({ open, onOpenChange, onEnrolled }: MfaEnrollDia
     onEnrolled();
   };
 
+  const title =
+    step === 'qr' ? 'Pair your authenticator' :
+    step === 'confirm' ? 'Confirm the pairing' :
+    'Save your recovery codes';
+
   return (
-    <Dialog
+    <Modal
+      size="md"
       open={open}
       onOpenChange={(next) => {
         if (!next && step === 'backup') onEnrolled();
         onOpenChange(next);
       }}
     >
-      <DialogContent className="max-w-md overflow-hidden p-0">
-        <div className="relative">
-          <span aria-hidden className="absolute inset-y-0 left-0 w-[3px] bg-brand/70" />
+      <ModalHeader
+        kicker="SECURITY · MFA"
+        title={title}
+        description="Enrol a time-based one-time password (TOTP) authenticator and save single-use backup codes."
+      />
+      <StepRail step={step} />
 
-          <DialogHeader className="border-b border-card-border/60 px-6 pt-6 pb-4 text-left">
-            <div className="font-mono text-[10px] uppercase tracking-[0.22em] text-stat-subtitle">
-              SENCHO · MFA
+      {step === 'qr' && (
+        <>
+          <ModalBody>
+            <p className="text-sm leading-snug text-stat-subtitle">
+              Scan the code with 1Password, Bitwarden, Google Authenticator, or any TOTP app.
+            </p>
+            <div className="flex justify-center rounded-md bg-background p-5 shadow-[inset_0_2px_6px_0_oklch(0_0_0/0.45)]">
+              {otpauthUri ? (
+                <QRCodeSVG value={otpauthUri} size={180} />
+              ) : (
+                <div className="flex h-[180px] w-[180px] items-center justify-center">
+                  <Loader2 className="h-5 w-5 animate-spin text-stat-subtitle" strokeWidth={1.5} />
+                </div>
+              )}
             </div>
-            <DialogTitle className="mt-1 font-display text-[1.75rem] italic leading-tight text-stat-value">
-              {step === 'qr' && 'Pair your authenticator'}
-              {step === 'confirm' && 'Confirm the pairing'}
-              {step === 'backup' && 'Save your recovery codes'}
-            </DialogTitle>
-            <DialogDescription className="sr-only">
-              Enrol a time-based one-time password (TOTP) authenticator and save
-              single-use backup codes.
-            </DialogDescription>
-          </DialogHeader>
-
-          <StepRail step={step} />
-
-          <div className="px-6 py-5">
-            {step === 'qr' && (
-              <div className="flex flex-col gap-4">
-                <p className="text-sm leading-snug text-stat-subtitle">
-                  Scan the code with 1Password, Bitwarden, Google Authenticator, or any TOTP app.
-                </p>
-                <div className="flex justify-center rounded-md bg-background p-5 shadow-[inset_0_2px_6px_0_oklch(0_0_0/0.45)]">
-                  {otpauthUri ? (
-                    <QRCodeSVG value={otpauthUri} size={180} />
-                  ) : (
-                    <div className="flex h-[180px] w-[180px] items-center justify-center">
-                      <Loader2 className="h-5 w-5 animate-spin text-stat-subtitle" strokeWidth={1.5} />
-                    </div>
-                  )}
-                </div>
-                <div className="flex flex-col gap-1.5">
-                  <span className="font-mono text-[10px] uppercase tracking-[0.18em] text-stat-subtitle">
-                    Secret · manual entry
-                  </span>
-                  <div className="flex items-stretch gap-2">
-                    <code className="flex-1 truncate rounded-md border border-card-border bg-background/60 px-3 py-2 font-mono text-xs tabular-nums tracking-[0.2em] text-stat-value shadow-[inset_0_2px_4px_0_oklch(0_0_0/0.25)]">
-                      {formatSecret(secret) || '...'}
-                    </code>
-                    <Button type="button" size="icon" variant="outline" onClick={handleCopySecret} disabled={!secret}>
-                      <Copy className="h-4 w-4" strokeWidth={1.5} />
-                    </Button>
-                  </div>
-                </div>
-                <DialogFooter className="mt-2 gap-2 sm:gap-2">
-                  <Button type="button" variant="ghost" onClick={() => onOpenChange(false)}>
-                    Cancel
-                  </Button>
-                  <Button
-                    type="button"
-                    onClick={() => setStep('confirm')}
-                    disabled={!otpauthUri || loading}
-                    className="bg-brand text-brand-foreground shadow-btn-glow hover:bg-brand/90"
-                  >
-                    Continue
-                    <ArrowRight strokeWidth={1.5} />
-                  </Button>
-                </DialogFooter>
+            <div className="flex flex-col gap-1.5">
+              <span className="font-mono text-[10px] uppercase tracking-[0.18em] text-stat-subtitle">
+                Secret · manual entry
+              </span>
+              <div className="flex items-stretch gap-2">
+                <code className="min-w-0 flex-1 truncate rounded-md border border-card-border bg-background/60 px-3 py-2 font-mono text-xs tabular-nums tracking-[0.2em] text-stat-value shadow-[inset_0_2px_4px_0_oklch(0_0_0/0.25)]">
+                  {formatSecret(secret) || '...'}
+                </code>
+                <Button type="button" size="icon" variant="outline" onClick={handleCopySecret} disabled={!secret}>
+                  <Copy className="h-4 w-4" strokeWidth={1.5} />
+                </Button>
               </div>
-            )}
+            </div>
+          </ModalBody>
+          <ModalFooter
+            secondary={
+              <Button type="button" variant="ghost" onClick={() => onOpenChange(false)}>
+                Cancel
+              </Button>
+            }
+            primary={
+              <Button
+                type="button"
+                onClick={() => setStep('confirm')}
+                disabled={!otpauthUri || loading}
+                className="bg-brand text-brand-foreground shadow-btn-glow hover:bg-brand/90"
+              >
+                Continue
+                <ArrowRight strokeWidth={1.5} />
+              </Button>
+            }
+          />
+        </>
+      )}
 
-            {step === 'confirm' && (
-              <div className="flex flex-col gap-4">
-                <p className="text-sm leading-snug text-stat-subtitle">
-                  Enter the 6-digit code shown in your authenticator to confirm the pairing.
-                </p>
-                <OtpDigitField
-                  id="mfa-confirm-code"
-                  value={code}
-                  onChange={handleCodeChange}
-                  state={confirmState}
-                  disabled={loading || confirmState === 'success'}
-                  autoFocus
-                />
-                {error && <ErrorRail>{error}</ErrorRail>}
-                <DialogFooter className="mt-2 gap-2 sm:gap-2">
-                  <Button type="button" variant="ghost" onClick={() => setStep('qr')} disabled={loading}>
-                    Back
-                  </Button>
-                </DialogFooter>
-              </div>
-            )}
+      {step === 'confirm' && (
+        <>
+          <ModalBody>
+            <p className="text-sm leading-snug text-stat-subtitle">
+              Enter the 6-digit code shown in your authenticator to confirm the pairing.
+            </p>
+            <OtpDigitField
+              id="mfa-confirm-code"
+              value={code}
+              onChange={handleCodeChange}
+              state={confirmState}
+              disabled={loading || confirmState === 'success'}
+              autoFocus
+            />
+            {error && <ErrorRail>{error}</ErrorRail>}
+          </ModalBody>
+          <ModalFooter
+            secondary={
+              <Button type="button" variant="ghost" onClick={() => setStep('qr')} disabled={loading}>
+                Back
+              </Button>
+            }
+            primary={null}
+          />
+        </>
+      )}
 
-            {step === 'backup' && (
-              <div className="flex flex-col gap-4">
-                <p className="text-sm leading-snug text-stat-subtitle">
-                  Each code unlocks your account once if your authenticator is unavailable. Store them safely. They will not be shown again.
-                </p>
-                <BackupCodeTicket codes={backupCodes} />
-                <div className="flex gap-2">
-                  <Button type="button" variant="outline" className="flex-1" onClick={handleCopyBackupCodes}>
-                    <Copy className="h-4 w-4" strokeWidth={1.5} />
-                    Copy all
-                  </Button>
-                  <Button type="button" variant="outline" className="flex-1" onClick={handleDownloadBackupCodes}>
-                    <Download className="h-4 w-4" strokeWidth={1.5} />
-                    Download
-                  </Button>
-                </div>
-                <DialogFooter className="mt-2">
-                  <Button
-                    type="button"
-                    onClick={handleFinish}
-                    className="bg-brand text-brand-foreground shadow-btn-glow hover:bg-brand/90"
-                  >
-                    <Check strokeWidth={1.5} />
-                    Done
-                  </Button>
-                </DialogFooter>
-              </div>
-            )}
-          </div>
-        </div>
-      </DialogContent>
-    </Dialog>
+      {step === 'backup' && (
+        <>
+          <ModalBody>
+            <p className="text-sm leading-snug text-stat-subtitle">
+              Each code unlocks your account once if your authenticator is unavailable. Store them safely. They will not be shown again.
+            </p>
+            <BackupCodeTicket codes={backupCodes} />
+            <div className="flex gap-2">
+              <Button type="button" variant="outline" className="flex-1" onClick={handleCopyBackupCodes}>
+                <Copy className="h-4 w-4" strokeWidth={1.5} />
+                Copy all
+              </Button>
+              <Button type="button" variant="outline" className="flex-1" onClick={handleDownloadBackupCodes}>
+                <Download className="h-4 w-4" strokeWidth={1.5} />
+                Download
+              </Button>
+            </div>
+          </ModalBody>
+          <ModalFooter
+            primary={
+              <Button
+                type="button"
+                onClick={handleFinish}
+                className="bg-brand text-brand-foreground shadow-btn-glow hover:bg-brand/90"
+              >
+                <Check strokeWidth={1.5} />
+                Done
+              </Button>
+            }
+          />
+        </>
+      )}
+    </Modal>
   );
 }
 
@@ -326,33 +323,3 @@ function StepRail({ step }: { step: Step }) {
     </div>
   );
 }
-
-function BackupCodeTicket({ codes }: { codes: string[] }) {
-  return (
-    <div className="overflow-hidden rounded-md border border-card-border bg-background/60 shadow-[inset_0_2px_6px_0_oklch(0_0_0/0.35)]">
-      <div className="flex items-center justify-between border-b border-card-border/60 px-3 py-2 font-mono text-[10px] uppercase tracking-[0.18em] text-stat-subtitle">
-        <span>Recovery codes</span>
-        <span className="tabular-nums">{codes.length} issued</span>
-      </div>
-      <ol className="grid grid-cols-1 sm:grid-cols-2">
-        {codes.map((c, i) => (
-          <li
-            key={c}
-            className={cn(
-              'flex items-center gap-3 px-3 py-2 font-mono text-sm tabular-nums tracking-[0.15em] text-stat-value',
-              'border-t border-card-border/40',
-              i === 0 && 'sm:border-t-0',
-              i === 1 && 'sm:border-t-0',
-            )}
-          >
-            <span className="text-[10px] uppercase tracking-[0.18em] text-stat-subtitle">
-              {String(i + 1).padStart(2, '0')}
-            </span>
-            <span>{c}</span>
-          </li>
-        ))}
-      </ol>
-    </div>
-  );
-}
-
diff --git a/frontend/src/components/ui/modal.tsx b/frontend/src/components/ui/modal.tsx
index c0d50a68..6ccce8ac 100644
--- a/frontend/src/components/ui/modal.tsx
+++ b/frontend/src/components/ui/modal.tsx
@@ -40,7 +40,7 @@ export function Modal({ open, onOpenChange, children, size = 'md', className }:
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent
         className={cn(
-          'p-0 gap-0 overflow-hidden',
+          'p-0 gap-0 overflow-hidden grid-cols-1',
           SIZE_CLASS[size],
           className,
         )}