diff --git a/apps/citizen-pwa/src/App.routes.test.tsx b/apps/citizen-pwa/src/App.routes.test.tsx
index 7453425d..70c79372 100644
--- a/apps/citizen-pwa/src/App.routes.test.tsx
+++ b/apps/citizen-pwa/src/App.routes.test.tsx
@@ -6,7 +6,7 @@ vi.mock('./components/MapTab/index.js', () => ({
   MapTab: () => <div>Map tab</div>,
 }))
 
-vi.mock('./components/SubmitReportForm.js', () => ({
+vi.mock('./components/SubmitReportForm/index.js', () => ({
   SubmitReportForm: () => <div>Report form</div>,
 }))
 
@@ -41,10 +41,11 @@ describe('App routes', () => {
     expect(screen.getByRole('button', { name: /map/i })).toHaveAttribute('aria-current', 'page')
   })
 
-  it('shows the report shell at /report', async () => {
+  it('shows the report form at /report', async () => {
     await renderAppAt('/report')
     expect(screen.getByText('Report form')).toBeInTheDocument()
-    expect(screen.getByRole('button', { name: /report/i })).toHaveAttribute('aria-current', 'page')
+    expect(screen.queryByRole('banner')).not.toBeInTheDocument()
+    expect(screen.queryByRole('navigation', { name: /main navigation/i })).not.toBeInTheDocument()
   })
 
   it('navigates between shell tabs', async () => {
diff --git a/apps/citizen-pwa/src/components/CitizenShell.tsx b/apps/citizen-pwa/src/components/CitizenShell.tsx
index da3798a6..739b739e 100644
--- a/apps/citizen-pwa/src/components/CitizenShell.tsx
+++ b/apps/citizen-pwa/src/components/CitizenShell.tsx
@@ -1,13 +1,14 @@
 import type { ReactNode } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
+import { Map, Rss, AlertTriangle, Bell, User } from 'lucide-react'
 import '../styles/design-tokens.css'
 
 const TABS = [
-  { label: 'Map', path: '/' },
-  { label: 'Feed', path: '/feed' },
-  { label: 'Report', path: '/report' },
-  { label: 'Alerts', path: '/alerts' },
-  { label: 'Profile', path: '/profile' },
+  { label: 'Map', path: '/', Icon: Map },
+  { label: 'Feed', path: '/feed', Icon: Rss },
+  { label: 'Report', path: '/report', Icon: AlertTriangle },
+  { label: 'Alerts', path: '/alerts', Icon: Bell },
+  { label: 'Profile', path: '/profile', Icon: User },
 ] as const
 
 export function CitizenShell({ children }: { children: ReactNode }) {
@@ -80,17 +81,13 @@ export function CitizenShell({ children }: { children: ReactNode }) {
               cursor: 'pointer',
             }}
           >
-            <span style={{ fontSize: '1.25rem', lineHeight: 1 }}>
-              {tab.label === 'Report'
-                ? '🚨'
-                : tab.label === 'Alerts'
-                  ? '⚠️'
-                  : tab.label === 'Profile'
-                    ? '👤'
-                    : tab.label === 'Feed'
-                      ? '📋'
-                      : '🗺'}
-            </span>
+            <tab.Icon
+              size={20}
+              strokeWidth={pathname === tab.path ? 2.5 : 2}
+              color={
+                pathname === tab.path ? 'var(--color-primary)' : 'var(--color-on-surface-variant)'
+              }
+            />
             {tab.label}
           </button>
         ))}
diff --git a/apps/citizen-pwa/src/components/SubmitReportForm.tsx b/apps/citizen-pwa/src/components/SubmitReportForm.tsx
deleted file mode 100644
index 59369910..00000000
--- a/apps/citizen-pwa/src/components/SubmitReportForm.tsx
+++ /dev/null
@@ -1,245 +0,0 @@
-import { useState } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { addDoc, collection } from 'firebase/firestore'
-import { httpsCallable } from 'firebase/functions'
-import {
-  db,
-  fns,
-  ensureSignedIn,
-  hasFirebaseConfig,
-  FIREBASE_ENV_ERROR_MESSAGE,
-} from '../services/firebase.js'
-import { saveReport } from '../services/localForageReports.js'
-import { submitReport, type SubmitReportDeps } from '../services/submit-report.js'
-import { normalizeMsisdn } from '@bantayog/shared-validators'
-import type { ReportType, Severity } from '@bantayog/shared-types'
-
-function randomPublicRef(): string {
-  const alphabet = 'abcdefghijklmnopqrstuvwxyz0123456789'
-  const bytes = crypto.getRandomValues(new Uint8Array(8))
-  return Array.from(bytes, (b) => alphabet[b % alphabet.length]).join('')
-}
-
-function randomSecret(): string {
-  return crypto.randomUUID()
-}
-
-async function sha256Hex(input: string | Blob): Promise<string> {
-  const buf =
-    typeof input === 'string'
-      ? new TextEncoder().encode(input)
-      : new Uint8Array(await input.arrayBuffer())
-  const digest = await crypto.subtle.digest('SHA-256', buf)
-  return Array.from(new Uint8Array(digest))
-    .map((b) => b.toString(16).padStart(2, '0'))
-    .join('')
-}
-
-async function putBlob(url: string, blob: Blob): Promise<void> {
-  const res = await fetch(url, {
-    method: 'PUT',
-    body: blob,
-    headers: { 'content-type': blob.type },
-  })
-  if (!res.ok) throw new Error('upload failed: ' + String(res.status))
-}
-
-export function SubmitReportForm() {
-  const nav = useNavigate()
-  const [reportType, setReportType] = useState<ReportType>('flood')
-  const [severity, setSeverity] = useState<Severity>('medium')
-  const [description, setDescription] = useState('')
-  const [photo, setPhoto] = useState<File | null>(null)
-  const [lat, setLat] = useState<number | null>(null)
-  const [lng, setLng] = useState<number | null>(null)
-  const [phone, setPhone] = useState('')
-  const [smsConsent, setSmsConsent] = useState(false)
-  const [phoneError, setPhoneError] = useState<string | null>(null)
-  const [busy, setBusy] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-
-  async function getLocation(): Promise<void> {
-    const pos = await new Promise<GeolocationPosition>((resolve, reject) => {
-      navigator.geolocation.getCurrentPosition(resolve, reject, {
-        enableHighAccuracy: true,
-        timeout: 10000,
-      })
-    })
-    setLat(pos.coords.latitude)
-    setLng(pos.coords.longitude)
-  }
-
-  async function onCaptureLocation(): Promise<void> {
-    try {
-      await getLocation()
-    } catch (e: unknown) {
-      setError(e instanceof Error ? e.message : 'location failed')
-    }
-  }
-
-  async function onSubmit(e: React.SubmitEvent): Promise<void> {
-    e.preventDefault()
-    if (lat === null || lng === null) {
-      setError('Please capture your location.')
-      return
-    }
-    if (phone) {
-      try {
-        normalizeMsisdn(phone)
-      } catch {
-        setPhoneError('Enter a valid PH mobile number (e.g. 09171234567 or +639171234567)')
-        return
-      }
-    }
-    setBusy(true)
-    setError(null)
-    try {
-      if (!hasFirebaseConfig()) {
-        throw new Error(FIREBASE_ENV_ERROR_MESSAGE)
-      }
-      const deps: SubmitReportDeps = {
-        ensureSignedIn,
-        requestUploadUrl: async (args) =>
-          (await httpsCallable(fns(), 'requestUploadUrl')(args)).data as {
-            uploadUrl: string
-            uploadId: string
-            storagePath: string
-            expiresAt: number
-          },
-        putBlob,
-        writeInbox: async (doc) => {
-          const ref = await addDoc(collection(db(), 'report_inbox'), doc)
-          return ref.id
-        },
-        randomUUID: () => crypto.randomUUID(),
-        randomPublicRef,
-        randomSecret,
-        sha256Hex,
-        now: () => Date.now(),
-      }
-      const result = await submitReport(deps, {
-        reportType,
-        severity,
-        description,
-        publicLocation: { lat, lng },
-        ...(photo ? { photo } : {}),
-        ...(phone && smsConsent ? { contact: { phone, smsConsent: true as const } } : {}),
-      })
-      void saveReport({
-        publicRef: result.publicRef,
-        secret: result.secret,
-        reportType,
-        severity,
-        lat,
-        lng,
-        submittedAt: Date.now(),
-      }).catch((persistError: unknown) => {
-        console.error('Failed to cache report locally', persistError)
-      })
-      // eslint-disable-next-line @typescript-eslint/no-floating-promises
-      nav('/receipt', { state: result })
-    } catch (e: unknown) {
-      setError(e instanceof Error ? e.message : 'submission failed')
-    } finally {
-      setBusy(false)
-    }
-  }
-
-  return (
-    <form
-      // eslint-disable-next-line @typescript-eslint/no-misused-promises
-      onSubmit={onSubmit}
-      aria-label="Report submission form"
-    >
-      <label>
-        Type
-        <select
-          value={reportType}
-          onChange={(e) => {
-            setReportType(e.target.value as ReportType)
-          }}
-        >
-          <option value="flood">Flood</option>
-          <option value="fire">Fire</option>
-          <option value="accident">Accident</option>
-          <option value="other">Other</option>
-        </select>
-      </label>
-      <label>
-        Severity
-        <select
-          value={severity}
-          onChange={(e) => {
-            setSeverity(e.target.value as Severity)
-          }}
-        >
-          <option value="low">Low</option>
-          <option value="medium">Medium</option>
-          <option value="high">High</option>
-        </select>
-      </label>
-      <label>
-        Description
-        <textarea
-          value={description}
-          onChange={(e) => {
-            setDescription(e.target.value)
-          }}
-          maxLength={5000}
-          required
-        />
-      </label>
-      <label>
-        Photo (optional)
-        <input
-          type="file"
-          accept="image/jpeg,image/png,image/webp"
-          onChange={(e) => {
-            setPhoto(e.target.files?.[0] ?? null)
-          }}
-        />
-      </label>
-      <label>
-        Mobile number (optional — for SMS alerts)
-        <input
-          type="tel"
-          value={phone}
-          placeholder="09171234567 or +639171234567"
-          onChange={(e) => {
-            setPhone(e.target.value)
-            setPhoneError(null)
-          }}
-        />
-      </label>
-      {phoneError && <p role="alert">{phoneError}</p>}
-      <label>
-        <input
-          type="checkbox"
-          checked={smsConsent}
-          onChange={(e) => {
-            setSmsConsent(e.target.checked)
-          }}
-          disabled={!phone}
-        />
-        Send me SMS updates about this report
-      </label>
-      <button
-        type="button"
-        onClick={() => {
-          void onCaptureLocation()
-        }}
-      >
-        Capture location
-      </button>
-      {lat !== null && lng !== null && (
-        <p>
-          Location: {lat.toFixed(5)}, {lng.toFixed(5)}
-        </p>
-      )}
-      {error && <p role="alert">{error}</p>}
-      <button type="submit" disabled={busy}>
-        {busy ? 'Submitting\u2026' : 'Submit report'}
-      </button>
-    </form>
-  )
-}
diff --git a/apps/citizen-pwa/src/components/SubmitReportForm/Step2WhoWhere.tsx b/apps/citizen-pwa/src/components/SubmitReportForm/Step2WhoWhere.tsx
index d5701cee..b5711228 100644
--- a/apps/citizen-pwa/src/components/SubmitReportForm/Step2WhoWhere.tsx
+++ b/apps/citizen-pwa/src/components/SubmitReportForm/Step2WhoWhere.tsx
@@ -326,11 +326,18 @@ export function Step2WhoWhere({ onNext, onBack, isSubmitting = false }: Step2Who
   const [locationError, setLocationError] = useState<string | null>(null)
   const [nameError, setNameError] = useState<string | null>(null)
   const [phoneError, setPhoneError] = useState<string | null>(null)
+  const [hasMemory, setHasMemory] = useState(false)
 
   const attemptGps = async () => {
     setLocationError(null)
     setGpsLoading(true)
     try {
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      if (!navigator.geolocation) {
+        setLocationError('GPS not supported on this device.')
+        setLocationMethod('manual')
+        return
+      }
       const pos = await new Promise<GeolocationPosition>((resolve, reject) => {
         navigator.geolocation.getCurrentPosition(resolve, reject, {
           enableHighAccuracy: true,
@@ -341,7 +348,13 @@ export function Step2WhoWhere({ onNext, onBack, isSubmitting = false }: Step2Who
       setLocationMethod('gps')
     } catch (err: unknown) {
       console.error('[Step2WhoWhere] attemptGps failed:', err)
-      setLocationError('Could not get location.')
+      let msg = 'Could not get location. Choose municipality manually.'
+      if (err && typeof err === 'object' && 'code' in err) {
+        const code = (err as GeolocationPositionError).code
+        if (code === 1) msg = 'Location access denied. Choose municipality manually.'
+        else if (code === 3) msg = 'Location timed out. Choose municipality manually.'
+      }
+      setLocationError(msg)
       setLocationMethod('manual')
     } finally {
       setGpsLoading(false)
@@ -353,6 +366,22 @@ export function Step2WhoWhere({ onNext, onBack, isSubmitting = false }: Step2Who
     void attemptGps()
   }, [])
 
+  useEffect(() => {
+    try {
+      const savedName = localStorage.getItem('bantayog.reporter.name')
+      // Phone is session-only to limit long-lived PII exposure
+      const savedMsisdn = sessionStorage.getItem('bantayog.reporter.msisdn')
+      if (savedName || savedMsisdn) {
+        // eslint-disable-next-line react-hooks/set-state-in-effect
+        if (savedName) setReporterName(savedName)
+        if (savedMsisdn) setReporterMsisdn(savedMsisdn)
+        setHasMemory(true)
+      }
+    } catch {
+      // Restricted/private mode — skip pre-fill silently
+    }
+  }, [])
+
   const handleSelectMunicipality = (muniId: string) => {
     setSelectedMunicipalityId(muniId)
     setSelectedBarangayId(undefined)
@@ -387,6 +416,14 @@ export function Step2WhoWhere({ onNext, onBack, isSubmitting = false }: Step2Who
       }
     }
 
+    try {
+      localStorage.setItem('bantayog.reporter.name', reporterName)
+      // Phone is session-only to limit long-lived PII exposure
+      sessionStorage.setItem('bantayog.reporter.msisdn', reporterMsisdn)
+    } catch {
+      // Restricted/private mode — skip persist silently
+    }
+
     onNext({
       location: finalLocation ?? { lat: 0, lng: 0 },
       reporterName,
@@ -562,6 +599,7 @@ export function Step2WhoWhere({ onNext, onBack, isSubmitting = false }: Step2Who
 
       {locationMethod !== null ? (
         <>
+          {hasMemory && <p className="memory-hint">Pre-filled from your last report</p>}
           <div className="field-group">
             <p className="field-label">Your name</p>
             <input
@@ -598,8 +636,11 @@ export function Step2WhoWhere({ onNext, onBack, isSubmitting = false }: Step2Who
             </p>
           </div>
 
-          <div className="field-group">
-            <p className="field-label">Is anyone hurt?</p>
+          <div className="field-group field-group--urgent">
+            <p className="field-label">
+              Is anyone hurt?
+              <em className="field-label-optional"> May injured ba?</em>
+            </p>
             <div className="toggle-group">
               <button
                 type="button"
@@ -655,6 +696,7 @@ export function Step2WhoWhere({ onNext, onBack, isSubmitting = false }: Step2Who
             fullWidth
             onClick={handleNext}
             disabled={!canProceed || isSubmitting}
+            style={{ marginTop: '1.5rem' }}
           >
             {isSubmitting ? 'Please wait...' : 'Continue'}
           </Button>
diff --git a/apps/citizen-pwa/src/components/SubmitReportForm/index.tsx b/apps/citizen-pwa/src/components/SubmitReportForm/index.tsx
index 5d8813f8..0a94cb5b 100644
--- a/apps/citizen-pwa/src/components/SubmitReportForm/index.tsx
+++ b/apps/citizen-pwa/src/components/SubmitReportForm/index.tsx
@@ -1,200 +1,188 @@
-import { useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { normalizeMsisdn } from '@bantayog/shared-validators'
-import type { ReportType, Severity } from '@bantayog/shared-types'
+import type { ReportType } from '@bantayog/shared-types'
 import { createDraft } from '../../services/submit-report.js'
 import type { Draft } from '../../services/draft-store.js'
 import { useSubmissionMachine } from '../../hooks/useSubmissionMachine.js'
+import { Step1Evidence } from './Step1Evidence.js'
+import { Step2WhoWhere } from './Step2WhoWhere.js'
+import { Step3Review } from './Step3Review.js'
+import { RevealSheet } from '../RevealSheet.js'
 import { OfflineBanner } from './OfflineBanner.js'
-import { SmsFallbackButton } from './SmsFallbackButton.js'
 import { StaleDraftBanner } from './StaleDraftBanner.js'
 
+interface Step1Data {
+  reportType: string
+  photoFile: File | null
+}
+
+interface Step2Data {
+  location: { lat: number; lng: number }
+  reporterName: string
+  reporterMsisdn: string
+  patientCount: number
+  locationMethod: 'gps' | 'manual'
+  municipalityId?: string
+  municipalityLabel?: string
+  barangayId?: string
+  nearestLandmark?: string
+}
+
+interface FormData {
+  step1: Step1Data | null
+  step2: Step2Data | null
+}
+
 export function SubmitReportForm() {
-  return <FormCollector />
+  return <WizardContainer />
 }
 
-function FormCollector() {
+function WizardContainer() {
   const nav = useNavigate()
-  const [reportType, setReportType] = useState<ReportType>('flood')
-  const [severity, setSeverity] = useState<Severity>('medium')
-  const [description, setDescription] = useState('')
-  const [photo, setPhoto] = useState<File | null>(null)
-  const [lat, setLat] = useState<number | null>(null)
-  const [lng, setLng] = useState<number | null>(null)
-  const [phone, setPhone] = useState('')
-  const [smsConsent, setSmsConsent] = useState(false)
-  const [phoneError, setPhoneError] = useState<string | null>(null)
-  const [error, setError] = useState<string | null>(null)
+  const [step, setStep] = useState<1 | 2 | 3>(1)
+  const [formData, setFormData] = useState<FormData>({ step1: null, step2: null })
   const [draft, setDraft] = useState<Draft | null>(null)
   const [isCreatingDraft, setIsCreatingDraft] = useState(false)
+  const [draftError, setDraftError] = useState<string | null>(null)
 
-  async function getLocation(): Promise<void> {
-    const pos = await new Promise<GeolocationPosition>((resolve, reject) => {
-      navigator.geolocation.getCurrentPosition(resolve, reject, {
-        enableHighAccuracy: true,
-        timeout: 10000,
-      })
-    })
-    setLat(pos.coords.latitude)
-    setLng(pos.coords.longitude)
+  const handleStep1Next = (data: Step1Data) => {
+    setFormData((prev) => ({ ...prev, step1: data }))
+    setStep(2)
   }
 
-  async function onCaptureLocation(): Promise<void> {
-    try {
-      await getLocation()
-    } catch (e: unknown) {
-      setError(e instanceof Error ? e.message : 'location failed')
-    }
+  const handleStep2Next = (data: Step2Data) => {
+    setFormData((prev) => ({ ...prev, step2: data }))
+    setStep(3)
   }
 
-  async function onSubmit(e: React.SyntheticEvent<HTMLFormElement>): Promise<void> {
-    e.preventDefault()
+  const handleStep2Back = () => {
+    setStep(1)
+  }
+
+  const handleStep3Back = () => {
+    setStep(2)
+  }
+
+  const handleStep3Submit = async () => {
     if (isCreatingDraft) return
-    if (lat === null || lng === null) {
-      setError('Please capture your location.')
-      return
-    }
-    if (phone) {
-      try {
-        normalizeMsisdn(phone)
-      } catch {
-        setPhoneError('Enter a valid PH mobile number (e.g. 09171234567 or +639171234567)')
-        return
-      }
-    }
-    setError(null)
+    if (!formData.step1 || !formData.step2) return
+
     setIsCreatingDraft(true)
+    setDraftError(null)
+
     try {
+      const msisdnHash = formData.step2.reporterMsisdn
+        ? await hashPhone(formData.step2.reporterMsisdn)
+        : undefined
+      const photo = formData.step1.photoFile
+        ? new Blob([await formData.step1.photoFile.arrayBuffer()], {
+            type: formData.step1.photoFile.type,
+          })
+        : undefined
+
       const created = await createDraft({
-        reportType,
-        barangay: '',
-        description,
-        severity,
-        location: { lat, lng },
-        ...(phone && smsConsent ? { reporterMsisdnHash: await hashPhone(phone) } : {}),
+        reportType: formData.step1.reportType as ReportType,
+        // barangayId holds the barangay name when selected; fall back to municipality label
+        barangay: formData.step2.barangayId ?? formData.step2.municipalityLabel ?? '',
+        description:
+          formData.step2.patientCount > 0 ? `Patients: ${String(formData.step2.patientCount)}` : '',
+        severity: 'medium',
+        location: formData.step2.location,
+        reporterName: formData.step2.reporterName,
+        ...(msisdnHash ? { reporterMsisdnHash: msisdnHash } : {}),
         clientDraftRef: crypto.randomUUID(),
-        ...(photo ? { photo: new Blob([await photo.arrayBuffer()], { type: photo.type }) } : {}),
+        ...(formData.step2.barangayId ? { barangayId: formData.step2.barangayId } : {}),
+        ...(formData.step2.nearestLandmark
+          ? { nearestLandmark: formData.step2.nearestLandmark }
+          : {}),
+        ...(photo ? { photo } : {}),
       })
+
       setDraft(created)
-    } catch (e: unknown) {
-      setError(e instanceof Error ? e.message : 'Failed to create draft')
+    } catch (err: unknown) {
+      setDraftError(err instanceof Error ? err.message : 'Failed to create draft')
     } finally {
       setIsCreatingDraft(false)
     }
   }
 
+  const handleStep1Back = () => {
+    void nav('/')
+  }
+
   if (draft) {
     return (
       <SubmissionPanel
         draft={draft}
-        phone={phone}
         onSuccess={(publicRef) => {
-          void nav('/receipt', { state: { publicRef, secret: 'pending' } })
+          void nav(`/reports/${publicRef}`)
         }}
       />
     )
   }
 
+  if (step === 1) {
+    return (
+      <Step1Evidence
+        onNext={handleStep1Next}
+        onBack={handleStep1Back}
+        isSubmitting={isCreatingDraft}
+      />
+    )
+  }
+
+  if (step === 2) {
+    return (
+      <Step2WhoWhere
+        onNext={handleStep2Next}
+        onBack={handleStep2Back}
+        isSubmitting={isCreatingDraft}
+      />
+    )
+  }
+
+  if (!formData.step1 || !formData.step2) {
+    return null
+  }
+
   return (
-    <form onSubmit={(e) => void onSubmit(e)} aria-label="Report submission form">
-      <label>
-        Type
-        <select
-          value={reportType}
-          onChange={(e) => {
-            setReportType(e.target.value as ReportType)
-          }}
-        >
-          <option value="flood">Flood</option>
-          <option value="fire">Fire</option>
-          <option value="accident">Accident</option>
-          <option value="other">Other</option>
-        </select>
-      </label>
-      <label>
-        Severity
-        <select
-          value={severity}
-          onChange={(e) => {
-            setSeverity(e.target.value as Severity)
-          }}
-        >
-          <option value="low">Low</option>
-          <option value="medium">Medium</option>
-          <option value="high">High</option>
-        </select>
-      </label>
-      <label>
-        Description
-        <textarea
-          value={description}
-          onChange={(e) => {
-            setDescription(e.target.value)
-          }}
-          maxLength={5000}
-          required
-        />
-      </label>
-      <label>
-        Photo (optional)
-        <input
-          type="file"
-          accept="image/jpeg,image/png,image/webp"
-          onChange={(e) => {
-            setPhoto(e.target.files?.[0] ?? null)
-          }}
-        />
-      </label>
-      <label>
-        Mobile number (optional — for SMS alerts)
-        <input
-          type="tel"
-          value={phone}
-          placeholder="09171234567 or +639171234567"
-          onChange={(e) => {
-            setPhone(e.target.value)
-            setPhoneError(null)
-          }}
-        />
-      </label>
-      {phoneError && <p role="alert">{phoneError}</p>}
-      <label>
-        <input
-          type="checkbox"
-          checked={smsConsent}
-          onChange={(e) => {
-            setSmsConsent(e.target.checked)
-          }}
-          disabled={!phone}
-        />
-        Send me SMS updates about this report
-      </label>
-      <button type="button" onClick={() => void onCaptureLocation()}>
-        Capture location
-      </button>
-      {lat !== null && lng !== null && (
-        <p>
-          Location: {lat.toFixed(5)}, {lng.toFixed(5)}
-        </p>
-      )}
-      {error && <p role="alert">{error}</p>}
-      <button type="submit" disabled={isCreatingDraft}>
-        {isCreatingDraft ? 'Saving draft\u2026' : 'Submit report'}
-      </button>
-    </form>
+    <>
+      <Step3Review
+        onBack={handleStep3Back}
+        onSubmit={() => void handleStep3Submit()}
+        reportData={{
+          reportType: formData.step1.reportType,
+          location: formData.step2.location,
+          reporterName: formData.step2.reporterName,
+          reporterMsisdn: formData.step2.reporterMsisdn,
+          patientCount: formData.step2.patientCount,
+          locationMethod: formData.step2.locationMethod,
+          ...(formData.step2.municipalityLabel
+            ? { municipalityLabel: formData.step2.municipalityLabel }
+            : {}),
+          ...(formData.step2.barangayId ? { barangayId: formData.step2.barangayId } : {}),
+          ...(formData.step2.nearestLandmark
+            ? { nearestLandmark: formData.step2.nearestLandmark }
+            : {}),
+        }}
+        isSubmitting={isCreatingDraft}
+      />
+      {draftError && <p role="alert">{draftError}</p>}
+    </>
   )
 }
 
 function SubmissionPanel({
   draft,
-  phone,
   onSuccess,
 }: {
   draft: Draft
-  phone: string
   onSuccess: (publicRef: string) => void
 }) {
+  const nav = useNavigate()
   const [now] = useState(() => Date.now())
+  const hasAutoSubmittedRef = useRef(false)
   const machine = useSubmissionMachine({
     draft,
     onSuccess,
@@ -203,7 +191,60 @@ function SubmissionPanel({
     },
   })
 
-  const showSmsFallback = machine.state === 'queued' || machine.state === 'failed_terminal'
+  // Auto-start: wizard captured consent in Step3, no second confirm needed.
+  // Ref guard prevents double-invocation under React Strict Mode.
+  useEffect(() => {
+    if (hasAutoSubmittedRef.current) return
+    hasAutoSubmittedRef.current = true
+    void machine.submit()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  if (machine.state === 'server_confirmed') {
+    return <RevealSheet state="success" referenceCode={draft.id} />
+  }
+
+  if (machine.state === 'queued') {
+    return (
+      <div aria-label="Submission status">
+        <RevealSheet
+          state="queued"
+          referenceCode={draft.id}
+          onClose={() => {
+            void nav('/')
+          }}
+        />
+      </div>
+    )
+  }
+
+  if (machine.state === 'failed_retryable') {
+    return (
+      <div aria-label="Submission status">
+        <RevealSheet
+          state="failed_retryable"
+          referenceCode={draft.id}
+          onClose={() => {
+            void nav('/')
+          }}
+        />
+      </div>
+    )
+  }
+
+  // RevealSheet has no failed_terminal variant; reuse failed_retryable messaging
+  // ("We couldn't send it yet") which is accurate for both retryable and terminal failures.
+  if (machine.state === 'failed_terminal') {
+    return (
+      <RevealSheet
+        state="failed_retryable"
+        referenceCode={draft.id}
+        onClose={() => {
+          void nav('/')
+        }}
+      />
+    )
+  }
 
   return (
     <div aria-label="Submission status">
@@ -215,16 +256,6 @@ function SubmissionPanel({
           Submit report
         </button>
       )}
-
-      {showSmsFallback && (
-        <SmsFallbackButton
-          draft={draft}
-          {...(phone ? { reporterMsisdn: phone } : {})}
-          onSent={() => {
-            machine.sendSmsFallback()
-          }}
-        />
-      )}
     </div>
   )
 }
diff --git a/apps/citizen-pwa/src/routes.tsx b/apps/citizen-pwa/src/routes.tsx
index 3f142bf0..e085268f 100644
--- a/apps/citizen-pwa/src/routes.tsx
+++ b/apps/citizen-pwa/src/routes.tsx
@@ -1,8 +1,7 @@
 import { createBrowserRouter, RouterProvider } from 'react-router-dom'
 import { CitizenShell } from './components/CitizenShell.js'
 import { MapTab } from './components/MapTab/index.js'
-import { SubmitReportForm as LegacySubmitReportForm } from './components/SubmitReportForm.js'
-import { SubmitReportForm as NewSubmitReportForm } from './components/SubmitReportForm/index.js'
+import { SubmitReportForm } from './components/SubmitReportForm/index.js'
 import { ReceiptScreen } from './components/ReceiptScreen.js'
 import { LookupScreen } from './components/LookupScreen.js'
 import { TrackingScreen } from './components/TrackingScreen.js'
@@ -26,15 +25,7 @@ const router = createBrowserRouter([
   },
   {
     path: '/report',
-    element: (
-      <CitizenShell>
-        <LegacySubmitReportForm />
-      </CitizenShell>
-    ),
-  },
-  {
-    path: '/report/new',
-    element: <NewSubmitReportForm />,
+    element: <SubmitReportForm />,
     handle: { hideBottomNav: true },
   },
   {
diff --git a/apps/citizen-pwa/src/styles/globals.css b/apps/citizen-pwa/src/styles/globals.css
index 542c1a70..f6718c18 100644
--- a/apps/citizen-pwa/src/styles/globals.css
+++ b/apps/citizen-pwa/src/styles/globals.css
@@ -632,6 +632,14 @@ body {
   margin-left: 0.25rem;
 }
 
+.field-group--urgent {
+  background: var(--color-surface-warn);
+  border: 1px solid var(--color-border-warn);
+  border-left: 3px solid var(--color-failed-fg);
+  border-radius: 0.5rem;
+  padding: 0.75rem;
+}
+
 .type-grid {
   display: flex;
   flex-wrap: wrap;
diff --git a/docs/progress.md b/docs/progress.md
index acd65360..9673a963 100644
--- a/docs/progress.md
+++ b/docs/progress.md
@@ -2,6 +2,22 @@
 
 ## Current
 
+### 3-Step Wizard Wiring — feature/3-step-wizard-wiring (2026-04-23)
+
+- Status: DONE locally — 3 commits on branch, ready for PR
+- Branch: `feature/3-step-wizard-wiring`
+- Scope:
+  - `SubmitReportForm/index.tsx` rewritten as `WizardContainer` (Step1→2→3 with data accumulation) + `SubmissionPanel` (drives RevealSheet via `useSubmissionMachine`)
+  - Dead `showSmsFallback` variable removed by code-quality review
+  - `/report` consolidated to new wizard; `/report/new` removed; old `SubmitReportForm.tsx` deleted
+  - `App.routes.test.tsx` mock path updated to new wizard module
+  - `SubmissionPanel` auto-starts `machine.submit()` on mount — no double-confirm after wizard Step3
+  - `failed_terminal` renders `RevealSheet state="failed_retryable"` instead of raw `OfflineBanner + SmsFallbackButton`
+- Verification:
+  - `pnpm --filter @bantayog/citizen-pwa typecheck` — PASS
+  - `pnpm --filter @bantayog/citizen-pwa lint` — PASS
+  - `pnpm --filter @bantayog/citizen-pwa exec vitest run` — PASS (101 passed, 2 todo)
+
 ### PR #57 Review Fixes — feature/map-tab (2026-04-22)
 
 - Status: in progress — reviewer comments are being resolved on `feature/map-tab`