diff --git a/README.md b/README.md
index 4c8e5e5..63c3b09 100644
--- a/README.md
+++ b/README.md
@@ -213,7 +213,8 @@ VigilCareRecords/
 │   ├── run-vigilcare-records-phase-13-verification.sh # OCR config, ocrConfidence API, optional live OCR polling
 │   └── fixtures/test-scan.pdf                    # Sample PDF for upload verification scripts
 └── docs/
-    ├── plans/                                    # Phase 1–13 implementation guides
+    ├── plans/                                    # Phase 14–18 UI redesign guides (1–13 historical; not in repo)
+    ├── designs/                                  # UI/UX design-doc + mockup PNGs
     ├── digitization-workstation-guide.md         # Clinical scenarios and clerk workflow reference
     ├── vigilcare-records-gap-analysis.md         # Known gaps and hardening backlog
     └── vigilcare-records-prd.md                  # Product requirements and phase roadmap
diff --git a/docs/designs/ChatGPT Image Aug 12, 2026, 02_59_04 AM.png b/docs/designs/ChatGPT Image Aug 12, 2026, 02_59_04 AM.png
new file mode 100644
index 0000000..2b4f7f1
Binary files /dev/null and b/docs/designs/ChatGPT Image Aug 12, 2026, 02_59_04 AM.png differ
diff --git a/docs/designs/ChatGPT Image Aug 12, 2026, 02_59_43 AM (1).png b/docs/designs/ChatGPT Image Aug 12, 2026, 02_59_43 AM (1).png
new file mode 100644
index 0000000..867cab4
Binary files /dev/null and b/docs/designs/ChatGPT Image Aug 12, 2026, 02_59_43 AM (1).png differ
diff --git a/docs/designs/ChatGPT Image Aug 12, 2026, 02_59_43 AM (2).png b/docs/designs/ChatGPT Image Aug 12, 2026, 02_59_43 AM (2).png
new file mode 100644
index 0000000..c042422
Binary files /dev/null and b/docs/designs/ChatGPT Image Aug 12, 2026, 02_59_43 AM (2).png differ
diff --git a/docs/designs/ChatGPT Image Aug 12, 2026, 02_59_43 AM (3).png b/docs/designs/ChatGPT Image Aug 12, 2026, 02_59_43 AM (3).png
new file mode 100644
index 0000000..411c7c0
Binary files /dev/null and b/docs/designs/ChatGPT Image Aug 12, 2026, 02_59_43 AM (3).png differ
diff --git a/docs/designs/ChatGPT Image Aug 12, 2026, 02_59_44 AM (4).png b/docs/designs/ChatGPT Image Aug 12, 2026, 02_59_44 AM (4).png
new file mode 100644
index 0000000..1bf24c8
Binary files /dev/null and b/docs/designs/ChatGPT Image Aug 12, 2026, 02_59_44 AM (4).png differ
diff --git a/docs/designs/ChatGPT Image Aug 12, 2026, 02_59_44 AM (5).png b/docs/designs/ChatGPT Image Aug 12, 2026, 02_59_44 AM (5).png
new file mode 100644
index 0000000..1844003
Binary files /dev/null and b/docs/designs/ChatGPT Image Aug 12, 2026, 02_59_44 AM (5).png differ
diff --git a/docs/designs/ChatGPT Image Aug 12, 2026, 02_59_45 AM (6).png b/docs/designs/ChatGPT Image Aug 12, 2026, 02_59_45 AM (6).png
new file mode 100644
index 0000000..7b39799
Binary files /dev/null and b/docs/designs/ChatGPT Image Aug 12, 2026, 02_59_45 AM (6).png differ
diff --git a/docs/designs/ChatGPT Image Aug 12, 2026, 02_59_45 AM (7).png b/docs/designs/ChatGPT Image Aug 12, 2026, 02_59_45 AM (7).png
new file mode 100644
index 0000000..253cb31
Binary files /dev/null and b/docs/designs/ChatGPT Image Aug 12, 2026, 02_59_45 AM (7).png differ
diff --git a/docs/designs/ChatGPT Image Aug 12, 2026, 02_59_45 AM (8).png b/docs/designs/ChatGPT Image Aug 12, 2026, 02_59_45 AM (8).png
new file mode 100644
index 0000000..87eb021
Binary files /dev/null and b/docs/designs/ChatGPT Image Aug 12, 2026, 02_59_45 AM (8).png differ
diff --git a/docs/designs/ChatGPT Image Aug 12, 2026, 02_59_46 AM (10).png b/docs/designs/ChatGPT Image Aug 12, 2026, 02_59_46 AM (10).png
new file mode 100644
index 0000000..80139e5
Binary files /dev/null and b/docs/designs/ChatGPT Image Aug 12, 2026, 02_59_46 AM (10).png differ
diff --git a/docs/designs/ChatGPT Image Aug 12, 2026, 02_59_46 AM (9).png b/docs/designs/ChatGPT Image Aug 12, 2026, 02_59_46 AM (9).png
new file mode 100644
index 0000000..df25150
Binary files /dev/null and b/docs/designs/ChatGPT Image Aug 12, 2026, 02_59_46 AM (9).png differ
diff --git a/docs/designs/design-doc.md b/docs/designs/design-doc.md
new file mode 100644
index 0000000..9d115d9
--- /dev/null
+++ b/docs/designs/design-doc.md
@@ -0,0 +1,2369 @@
+# VigilCare Records — UI/UX Design Specification
+
+## 1. Product Design Direction
+
+### Product character
+
+VigilCare Records should feel:
+
+* Clinical, but not sterile
+* Enterprise-grade, but not visually heavy
+* Trustworthy and controlled
+* Optimized for repetitive daily workflows
+* Extremely clear about data state
+* Conservative around destructive or irreversible actions
+* Fast for trained operators
+* Understandable for occasional clinical users
+
+The interface should communicate one central idea:
+
+**Nothing becomes clinical truth until it has passed the required human review.**
+
+The product should therefore visually distinguish:
+
+1. Source evidence
+2. Draft/extracted data
+3. Verified data
+4. Approved clinical data
+5. Promoted/live data
+
+These states should never become visually ambiguous.
+
+---
+
+# 2. Core Visual System
+
+## 2.1 Overall visual language
+
+Use a modern flat enterprise interface with:
+
+* White primary surfaces
+* Very light cool-gray application background
+* Dark navy navigation
+* Strong blue primary actions
+* Restrained semantic colors
+* Rounded but not excessively rounded containers
+* Minimal shadows
+* Thin borders
+* High information density without appearing cramped
+
+Avoid:
+
+* Excessive gradients
+* Glassmorphism
+* Large decorative illustrations inside operational pages
+* Purple-heavy AI/SaaS aesthetics
+* Excessive pill-shaped UI
+* Floating cards everywhere
+* Oversized typography
+* Large amounts of animation
+
+VigilCare should look like software designed for a hospital workstation rather than a consumer productivity app.
+
+---
+
+# 3. Color System
+
+## Primary
+
+### VigilCare Navy
+
+`#08254A`
+
+Used for:
+
+* Sidebar
+* Logo backdrop
+* Strong structural navigation
+* Selected dark-mode elements
+
+### Primary Blue
+
+`#155EEF`
+
+Used for:
+
+* Primary CTA
+* Selected navigation item
+* Links
+* Focus states
+* Progress indicators
+* Active tabs
+
+### Primary Blue Hover
+
+`#0B4FD6`
+
+### Soft Blue
+
+`#EEF4FF`
+
+Used for:
+
+* Selected rows
+* Informational panels
+* Active filters
+* Non-critical status backgrounds
+
+---
+
+## Neutral
+
+### Page Background
+
+`#F7F9FC`
+
+### Surface
+
+`#FFFFFF`
+
+### Strong Text
+
+`#101828`
+
+### Body Text
+
+`#344054`
+
+### Secondary Text
+
+`#667085`
+
+### Disabled Text
+
+`#98A2B3`
+
+### Border
+
+`#E4E7EC`
+
+### Strong Border
+
+`#D0D5DD`
+
+---
+
+## Semantic colors
+
+### Success
+
+Foreground: `#079455`
+Background: `#ECFDF3`
+
+Use for:
+
+* Verification passed
+* Promotion complete
+* Valid records
+* Healthy service state
+
+### Warning
+
+Foreground: `#DC6803`
+Background: `#FFFAEB`
+
+Use for:
+
+* Low-confidence OCR
+* Approaching SLA
+* Validation warning
+* Uncertain comparison
+
+### Error
+
+Foreground: `#D92D20`
+Background: `#FEF3F2`
+
+Use for:
+
+* Rejection
+* Validation failure
+* Critical discrepancy
+* Failed upload
+
+### Critical Clinical
+
+Foreground: `#B42318`
+Background: `#FEE4E2`
+
+Reserve stronger red treatment for actual clinical urgency.
+
+This distinction matters:
+
+**A workflow error is not automatically a clinical emergency.**
+
+---
+
+# 4. Typography
+
+## Font family
+
+Primary:
+
+**Inter**
+
+Fallback:
+
+`Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif`
+
+For JSON/code:
+
+**JetBrains Mono** or **Roboto Mono**
+
+---
+
+## Type scale
+
+### Page title
+
+28 px
+Weight: 650–700
+Line height: 34 px
+
+Examples:
+
+* Data Entry
+* Verification
+* Clinical Approval
+* Patient History
+
+---
+
+### Major section heading
+
+20 px
+Weight: 600
+Line height: 28 px
+
+---
+
+### Card heading
+
+16 px
+Weight: 600
+Line height: 24 px
+
+---
+
+### Field/section label
+
+14 px
+Weight: 600
+
+---
+
+### Primary body
+
+14 px
+Weight: 400
+Line height: 20–22 px
+
+---
+
+### Secondary/meta text
+
+12 px
+Weight: 400–500
+Line height: 18 px
+
+---
+
+### Table heading
+
+12 px
+Weight: 600
+Uppercase should generally be avoided.
+
+---
+
+### Large metric
+
+28–32 px
+Weight: 650
+
+Used only for:
+
+* Queue counts
+* Throughput
+* Accuracy
+* Important dashboard numbers
+
+---
+
+## Typography rule
+
+Clinical values should have more visual weight than labels.
+
+Example:
+
+BP
+**138/88 mmHg**
+
+not:
+
+**BP**
+138/88 mmHg
+
+---
+
+# 5. Spacing System
+
+Use an 8 px base grid.
+
+Core values:
+
+* 4 px — micro spacing
+* 8 px — related items
+* 12 px — compact controls
+* 16 px — standard component gap
+* 24 px — card padding
+* 32 px — section separation
+* 40–48 px — large page separation
+
+Default page gutter:
+
+**24–32 px**
+
+---
+
+# 6. Border Radius
+
+Avoid excessive softness.
+
+### Small controls
+
+6 px
+
+### Inputs/buttons
+
+8 px
+
+### Cards
+
+10 px
+
+### Large containers
+
+12 px
+
+Avoid 20–30 px consumer-style card radii.
+
+---
+
+# 7. Shadow System
+
+Cards should rely mainly on borders.
+
+Default card:
+
+`border: 1px solid #E4E7EC`
+
+Optional:
+
+`box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04)`
+
+Dialogs:
+
+`0 8px 24px rgba(16,24,40,0.12)`
+
+---
+
+# 8. Application Shell
+
+## Sidebar
+
+Desktop width:
+
+**208–224 px**
+
+Background:
+
+VigilCare Navy.
+
+### Structure
+
+Logo
+
+Main workspace:
+
+* Dashboard
+* Intake
+* Cover Sheets
+* Data Entry
+* Verification
+* Clinical Approval
+* Live Capture
+* Patient History
+
+Supervision:
+
+* Supervisor Dashboard
+* Workload / Queues
+* Reports
+
+Administration:
+
+* Users
+* Master Data
+* FHIR Explorer
+* Configuration
+* Audit Logs
+
+Items should be conditionally shown based on permissions.
+
+Do not show inaccessible features disabled unless there is a strong reason.
+
+---
+
+## Selected item
+
+Background:
+
+`#155EEF`
+
+Text:
+
+white
+
+Icon:
+
+white
+
+Border radius:
+
+6–8 px
+
+---
+
+## Header
+
+Height:
+
+64 px
+
+Contains:
+
+* Global search
+* Alerts
+* Help
+* Current user
+* Role
+* Facility/site selector where applicable
+
+Keep headers thin because most users need vertical workspace.
+
+---
+
+# 9. Global Interaction Principles
+
+## Autosave
+
+For entry workflows:
+
+Display a subtle state:
+
+`Saved 10:24:31`
+
+Do not show repeated success notifications.
+
+States:
+
+* Saving…
+* Saved
+* Save failed
+
+Failure must become visually prominent.
+
+---
+
+## Keyboard support
+
+Data-entry users should be able to complete most tasks without the mouse.
+
+Recommended:
+
+* `Ctrl/Cmd + S` — save draft
+* `Alt + N` — next document
+* `Alt + P` — previous document
+* `Alt + F` — flag/reject
+* `Alt + V` — submit for verification
+* `+/-` — zoom
+* `R` — rotate when document viewer has focus
+
+---
+
+## Status labels
+
+Use semantic labels consistently.
+
+Examples:
+
+* Uploaded
+* In Entry
+* Pending Verification
+* Verification Rejected
+* Pending Approval
+* Approved
+* Promoted
+* Superseded
+* Failed
+
+Never use several different names for the same state.
+
+---
+
+# 10. LOGIN
+
+## Objective
+
+Authenticate the user and route them automatically according to authorization.
+
+---
+
+## Important correction
+
+**Remove the role selector from the generated Login concept.**
+
+The backend should determine roles through authentication/JWT claims.
+
+A user should not select:
+
+> Data Entry Operator / Verifier / Clinician
+
+before authentication.
+
+If a user possesses multiple authorized roles, role switching can happen **after login**.
+
+---
+
+## Layout
+
+Two-column desktop layout.
+
+### Left — Brand panel
+
+Approximately 45%.
+
+Dark navy.
+
+Contains:
+
+VigilCare Records logo
+
+Headline:
+
+**Digitize. Verify. Trust.**
+
+Subtext explaining that scanned clinical records become governed structured data.
+
+Optional restrained illustration:
+
+Paper record → verified digital record.
+
+Avoid feature marketing clutter.
+
+---
+
+### Right — Authentication
+
+Centered card around 420–460 px wide.
+
+Fields:
+
+Username/email
+Password
+
+Optional:
+
+Remember device
+
+Actions:
+
+**Sign In**
+
+Secondary:
+
+Forgot password
+
+Hospital SSO, if actually supported.
+
+---
+
+## Typography
+
+Headline: 38–42 px
+
+Login heading: 28 px
+
+Input labels: 14 px / 600
+
+---
+
+## Visual emphasis
+
+The authentication form should dominate the right side.
+
+No dashboard UI should be displayed prominently enough to distract from authentication.
+
+---
+
+# 11. DASHBOARD
+
+## Objective
+
+Answer:
+
+**What work requires my attention right now?**
+
+This should change depending on role.
+
+---
+
+## Top metrics
+
+Examples:
+
+* My Assignments
+* Awaiting Verification
+* Awaiting Approval
+* Promoted Today
+
+Supervisor roles may instead see:
+
+* Total queue
+* Oldest batch
+* Rejection rate
+* Throughput
+
+---
+
+## Main content
+
+Recommended structure:
+
+### Left 65%
+
+My Queue / Batch Queue
+
+Columns:
+
+Batch ID
+Type
+Track
+Progress
+Status
+Priority
+Age / SLA
+
+### Right 35%
+
+My workflow status
+
+Recent activity
+
+Quick actions
+
+---
+
+## Avoid
+
+Do not fill the dashboard with system infrastructure monitoring.
+
+API/Postgres/Redis status belongs in administration or monitoring unless failures affect current work.
+
+---
+
+# 12. INTAKE
+
+## Objective
+
+Turn incoming scans into a valid digitization batch.
+
+---
+
+## Layout
+
+Two-column layout.
+
+### Main — 70%
+
+Upload area
+
+Batch configuration
+
+### Right — 30%
+
+Recent uploads
+
+---
+
+## Upload zone
+
+Large bordered drop target.
+
+Supports:
+
+PDF
+JPEG
+PNG
+
+Display:
+
+Max 25 MB
+
+Primary:
+
+**Upload Files**
+
+Secondary:
+
+Drag and drop
+
+Do not use three equally prominent upload CTAs.
+
+---
+
+## Batch Details
+
+Fields:
+
+### Batch Type
+
+Examples:
+
+* Registration
+* Vitals
+* Labs
+* Medications
+* Allergies
+* Mixed Chart
+
+### Track
+
+Radio/select:
+
+**Backfill**
+
+Historical or archival document workflow.
+
+**Live Capture**
+
+Documents generated as part of current bedside workflows.
+
+### Patient Link
+
+Optional.
+
+Search:
+
+MRN
+Name
+
+### Cover Sheet Code
+
+Optional.
+
+Barcode/QR scan automatically fills compatible metadata.
+
+---
+
+## Right panel
+
+Recent uploads.
+
+Columns:
+
+File
+Batch
+Status
+Uploaded
+Operator
+
+---
+
+## States
+
+Uploading
+
+Processing
+
+Ready
+
+Failed
+
+Duplicate detected
+
+Barcode recognized
+
+---
+
+## Styling
+
+The upload zone should be approximately the largest visual element.
+
+Blue dashed border only during empty/drop state.
+
+Once files are selected, transition into a file list rather than keeping a huge empty drop zone.
+
+---
+
+# 13. COVER SHEETS
+
+## Objective
+
+Generate physical/digital separators that reliably reconnect scanned paper to system metadata.
+
+---
+
+## Layout
+
+Top section:
+
+50 / 50 split.
+
+Left:
+
+Generation form
+
+Right:
+
+Live preview
+
+Bottom:
+
+Existing cover sheet table
+
+---
+
+## Generation form
+
+Fields:
+
+Quantity
+
+Batch/document type
+
+Track
+
+Patient — optional
+
+Entry clerk — optional
+
+Primary CTA:
+
+**Generate Cover Sheets**
+
+---
+
+## Preview
+
+Show an accurate printable representation.
+
+Include:
+
+VigilCare logo
+
+QR code
+
+Human-readable batch identifier
+
+Barcode if applicable
+
+Document type
+
+Track
+
+Patient identifier when supplied
+
+Generation timestamp
+
+---
+
+## Existing cover sheets
+
+Filters:
+
+Search
+
+Used / unused / partially used
+
+Type
+
+Track
+
+Date
+
+Actions:
+
+Download PDF
+
+Batch download
+
+Regenerate only if business rules permit
+
+---
+
+## Styling
+
+The preview should resemble real paper.
+
+White canvas
+
+Thin gray border
+
+Minimal UI decoration
+
+---
+
+# 14. DATA ENTRY
+
+This is one of the application's most important screens.
+
+## Objective
+
+Allow operators to accurately transcribe scanned records with minimal context switching.
+
+---
+
+# Layout
+
+Three working regions:
+
+### Left — Batch/document queue
+
+Approx. 20%
+
+### Center — Source document viewer
+
+Approx. 35–40%
+
+### Right — Structured data entry
+
+Approx. 40–45%
+
+On smaller desktop screens the queue may collapse.
+
+---
+
+# Queue
+
+Tabs:
+
+Uploaded
+
+In Entry
+
+Rejected
+
+Each item shows:
+
+Batch ID
+
+Facility
+
+Document count
+
+Progress
+
+Assigned operator
+
+Status
+
+Reason when rejected
+
+Selected row:
+
+Soft blue background + blue border.
+
+---
+
+# Document Viewer
+
+Must support:
+
+Zoom
+
+Pan
+
+Rotate
+
+Fit width
+
+Fit page
+
+Fullscreen
+
+Page thumbnails
+
+Page forward/back
+
+Optional contrast enhancement if later supported.
+
+Document should remain visually neutral.
+
+Do not apply decorative shadows beyond a subtle page shadow.
+
+---
+
+# Data Entry Form
+
+Group logically:
+
+Patient
+
+Encounter
+
+Observations
+
+Labs
+
+Medications
+
+Allergies
+
+Other required sections based on `fieldRequirements`.
+
+---
+
+## OCR treatment
+
+OCR must appear as an assistant, not an authority.
+
+Examples:
+
+`OCR 98%`
+
+Use small confidence badges beside values.
+
+Recommended rules:
+
+95–100%
+Subtle green
+
+80–94%
+Amber
+
+<80%
+Red/strong warning
+
+Never automatically imply verification because confidence is high.
+
+---
+
+## Required fields
+
+Small red asterisk.
+
+Validation occurs:
+
+* inline
+* on blur
+* on submission
+
+Avoid waiting until submission to display obvious errors.
+
+---
+
+## Bottom action bar
+
+Sticky.
+
+Left:
+
+Flag / reject document
+
+Center:
+
+Save Draft
+
+Primary:
+
+**Submit for Verification**
+
+Right:
+
+Next document
+
+---
+
+## Design principle
+
+Users should visually scan:
+
+**source → field → source → field**
+
+with as little eye travel as possible.
+
+---
+
+# 15. VERIFICATION
+
+This screen requires stronger evidence comparison.
+
+## Objective
+
+Answer:
+
+**Does the draft accurately represent the source document?**
+
+---
+
+# Layout
+
+### Left
+
+Verification queue
+
+### Center
+
+Source scan
+
+### Right
+
+Entered draft with validation markers
+
+---
+
+# Separation of Duties
+
+Prominent but restrained information banner:
+
+**Separation of Duties Enforced**
+
+Entered by:
+Arjun Menon
+
+Current verifier:
+Priya Nair
+
+If same user:
+
+Disable verification.
+
+Show:
+
+**You cannot verify a batch you entered.**
+
+Do not allow the user to proceed until another batch is selected.
+
+---
+
+# Field comparison states
+
+### Match
+
+Green check.
+
+### Warning / uncertain
+
+Amber.
+
+### Mismatch
+
+Red.
+
+### Missing
+
+Blue/neutral missing state.
+
+Avoid relying only on color.
+
+Add icons/text.
+
+---
+
+# Field interaction
+
+Verifier should be able to click a field and:
+
+* See corresponding source region if OCR coordinates exist
+* Mark correct
+* Mark incorrect
+* Add comment
+
+---
+
+# Verification decision
+
+Sticky bottom area.
+
+Options:
+
+Pass
+
+Reject
+
+Reject requires:
+
+Reason
+
+Optional comment
+
+Example rejection reasons:
+
+* Incorrect transcription
+* Missing required data
+* Wrong patient
+* Poor scan quality
+* Incorrect document classification
+* Incomplete chart
+
+---
+
+## Primary CTA
+
+When Pass selected:
+
+**Pass Verification**
+
+When Reject selected:
+
+**Return for Rework**
+
+Avoid generic “Submit Decision.”
+
+---
+
+# 16. CLINICAL APPROVAL
+
+## Objective
+
+Provide clinical oversight only where policy requires it.
+
+This screen should feel meaningfully different from ordinary verification.
+
+---
+
+## Top metrics
+
+Keep limited.
+
+Useful:
+
+Awaiting Approval
+
+Overdue
+
+Approved Today
+
+Average Review Time
+
+Avoid vanity metrics.
+
+---
+
+# Layout
+
+Queue
+
+Source
+
+Verified Draft
+
+Clinical Risk / Summary
+
+---
+
+## Clinical summary sidebar
+
+Show:
+
+Patient
+
+Encounter
+
+High-stakes values
+
+Reason approval is required
+
+Examples:
+
+Critical observation
+
+Medication
+
+Allergy
+
+Clinical rule
+
+High-risk document type
+
+---
+
+## Clinical flags
+
+Use red carefully.
+
+Example:
+
+Temperature 38.2°C
+
+Antibiotic recorded
+
+Critical lab
+
+These are **clinical signals**, unlike workflow validation errors.
+
+---
+
+## Retroactive Alerts
+
+If supported:
+
+Toggle:
+
+**Run alert evaluation after promotion**
+
+Supporting copy:
+
+May generate alerts for clinical criteria represented in historical records.
+
+It should not sound like alerts occurred contemporaneously.
+
+---
+
+## Approval actions
+
+Approve
+
+Reject
+
+Approval confirmation should clearly state:
+
+> Approval will promote the verified records into live clinical tables.
+
+Primary:
+
+**Approve & Promote**
+
+Destructive:
+
+**Reject Batch**
+
+Rejection requires reason.
+
+---
+
+## Promotion result
+
+After successful action display:
+
+Patient records promoted
+
+Encounter promoted
+
+Observations promoted
+
+Alerts generated: X
+
+Audit event recorded
+
+---
+
+# 17. LIVE CAPTURE
+
+## Objective
+
+Provide a much lighter bedside workflow than backfill entry.
+
+This should **not** look like the full Data Entry screen.
+
+---
+
+# Layout
+
+Top:
+
+Patient / encounter selection
+
+Main:
+
+Observation table
+
+Bottom:
+
+Attestation + authentication
+
+Right:
+
+Submission outcome / alert results
+
+---
+
+# Patient / Encounter
+
+Choice:
+
+New encounter
+
+Existing encounter
+
+Patient search:
+
+MRN
+Name
+
+Once selected, display a compact patient banner.
+
+---
+
+# Observation table
+
+Columns:
+
+Time
+
+Type
+
+Value
+
+Unit
+
+Notes
+
+Source
+
+Actions
+
+Use keyboard-friendly row creation.
+
+Primary inline action:
+
+**+ Add Observation**
+
+---
+
+# Attestation
+
+Required:
+
+> I attest that the information entered above accurately reflects the observations captured at the point of care.
+
+Capture:
+
+Clinician
+
+Role
+
+Location
+
+Timestamp
+
+---
+
+# Password confirmation
+
+Keep visually separate from normal data input.
+
+Purpose:
+
+Explicit clinical attestation.
+
+---
+
+# Submission
+
+Primary:
+
+**Submit Encounter**
+
+After success:
+
+Do not simply return to an empty page.
+
+Show outcome panel.
+
+---
+
+# Critical alerts
+
+If downstream scoring generates alerts, display them immediately.
+
+Examples:
+
+MEWS score elevated
+
+Fever
+
+NEWS2 threshold reached
+
+Use high-visibility clinical alert presentation.
+
+---
+
+# 18. PATIENT HISTORY
+
+## Objective
+
+Explain the complete lineage of structured clinical information.
+
+---
+
+# Search
+
+MRN
+
+Patient name
+
+Date filters
+
+---
+
+# Patient summary
+
+Compact horizontal panel.
+
+MRN
+
+Name
+
+DOB
+
+Sex
+
+Status
+
+Record count
+
+Active versions
+
+Superseded versions
+
+---
+
+# Timeline
+
+Recommended event types:
+
+Uploaded
+
+Entered
+
+Verified
+
+Rejected
+
+Approved
+
+Promoted
+
+Corrected
+
+Superseded
+
+Use consistent icons.
+
+---
+
+# Timeline styling
+
+Vertical or chronological table hybrid.
+
+Timestamp on left.
+
+Event in middle.
+
+Actor / facility on right.
+
+Status tag.
+
+Expandable details.
+
+---
+
+# Corrections
+
+Corrections must clearly show:
+
+Original value
+
+New value
+
+Reason
+
+Corrected by
+
+Time
+
+Superseded version
+
+Example:
+
+Hemoglobin
+
+13.2 g/dL
+→
+13.6 g/dL
+
+Never visually imply the old record disappeared.
+
+---
+
+# Audit detail panel
+
+Selecting an event opens a right panel containing:
+
+Event
+
+Actor
+
+Role
+
+Timestamp
+
+Batch
+
+Reason
+
+Related version
+
+Audit events
+
+---
+
+# 19. SUPERVISOR DASHBOARD
+
+## Objective
+
+Help supervisors identify:
+
+* queue buildup
+* aging work
+* quality problems
+* staffing imbalance
+* bottlenecks
+
+It is an operational dashboard, not an executive BI product.
+
+---
+
+# Metric row
+
+Total in queues
+
+Intake
+
+Data Entry
+
+Verification
+
+Approval
+
+On Hold
+
+---
+
+# Priority information
+
+### Queue age
+
+Highlight oldest age more strongly than average.
+
+Example:
+
+Verification
+**18h 32m**
+
+---
+
+# Operational analytics
+
+Useful charts:
+
+Queue aging
+
+Rejection trend
+
+Throughput
+
+Cycle time
+
+Stage distribution
+
+---
+
+# Bottleneck table
+
+Columns:
+
+Queue
+
+Batch
+
+Problem
+
+Age
+
+Priority
+
+Assigned to
+
+Records
+
+Action
+
+This may be the most useful element on the page.
+
+---
+
+# Team workload
+
+Per-user:
+
+In progress
+
+Completed today
+
+SLA performance
+
+Open assignments
+
+Avoid using simplistic leaderboards.
+
+Healthcare operations should not encourage employees to optimize speed at the expense of accuracy.
+
+---
+
+# Refresh
+
+Auto-refresh:
+
+30 sec / 1 min / 5 min
+
+Manual:
+
+Refresh Now
+
+Never refresh the page in a way that destroys the user's context.
+
+---
+
+# 20. FHIR EXPLORER
+
+## Objective
+
+Provide administrators and integration staff a safe, read-only way to inspect exposed FHIR R4 resources.
+
+It should feel somewhat more technical than the rest of the application.
+
+---
+
+# Resource search
+
+Resource type:
+
+Patient
+
+Encounter
+
+Observation
+
+Then dynamic parameters based on the selected resource.
+
+---
+
+# Workspace
+
+Three columns:
+
+### Left
+
+Search results
+
+### Center
+
+FHIR resource
+
+### Right
+
+Human-readable summary
+
+---
+
+# Tabs
+
+Resource Details
+
+Raw JSON
+
+Tree View
+
+`$everything`
+
+CapabilityStatement
+
+---
+
+# Raw JSON
+
+Font:
+
+JetBrains Mono
+
+13 px
+
+Line height:
+
+20 px
+
+Basic syntax highlighting.
+
+Do not over-style like an IDE.
+
+---
+
+# Read-only indication
+
+Always visible:
+
+🔒 Read Only
+
+This is important enough that the status should remain visible when scrolling.
+
+---
+
+# CapabilityStatement
+
+Present both:
+
+Human-readable capability summary
+
+Raw resource
+
+---
+
+# 21. Navigation by Role
+
+Navigation should be permission-based.
+
+## Intake Operator
+
+Dashboard
+
+Intake
+
+Cover Sheets
+
+---
+
+## Data Entry Operator
+
+Dashboard
+
+Data Entry
+
+Patient History if authorized
+
+---
+
+## Verifier
+
+Dashboard
+
+Verification
+
+Patient History
+
+---
+
+## Clinical Approver
+
+Dashboard
+
+Clinical Approval
+
+Patient History
+
+---
+
+## Clinician
+
+Dashboard
+
+Live Capture
+
+Patient History
+
+---
+
+## Supervisor
+
+Dashboard
+
+Supervisor Dashboard
+
+Queues
+
+Workload
+
+Reports
+
+History
+
+---
+
+## Administrator
+
+Everything appropriate plus:
+
+Users
+
+Master Data
+
+Configuration
+
+Audit Logs
+
+FHIR Explorer
+
+---
+
+# 22. Page Density
+
+VigilCare is primarily desktop workstation software.
+
+Recommended minimum:
+
+1280 × 800
+
+Optimized:
+
+1440 × 900 and above
+
+Entry and Verification particularly benefit from:
+
+1920 × 1080
+
+---
+
+## Density modes
+
+Potential future feature:
+
+Comfortable
+
+Compact
+
+Operators working through hundreds of records may prefer Compact.
+
+---
+
+# 23. Forms
+
+Input height:
+
+36–40 px
+
+Do not use oversized 48–56 px consumer inputs.
+
+Labels stay above the fields.
+
+Long forms should use grouped sections rather than floating forms inside unrelated cards.
+
+---
+
+# 24. Tables
+
+Header:
+
+44 px
+
+Rows:
+
+48–56 px
+
+Selected row:
+
+Soft blue.
+
+Hover:
+
+Very subtle gray/blue.
+
+Numeric values should align consistently.
+
+Tables should support:
+
+Sorting
+
+Filtering
+
+Pagination
+
+Keyboard row navigation where appropriate
+
+---
+
+# 25. Icons
+
+Use a single icon library.
+
+Recommended:
+
+Lucide
+
+or
+
+Phosphor
+
+Outline weight around:
+
+1.5–2 px
+
+Avoid mixing:
+
+Filled icons
+
+Emoji
+
+Multiple icon families
+
+---
+
+# 26. Empty States
+
+Empty states should be operational.
+
+Bad:
+
+> Nothing here yet!
+
+Better:
+
+> No batches are waiting for verification.
+
+> New batches appear here after data entry is submitted.
+
+CTA where relevant:
+
+**Return to Dashboard**
+
+---
+
+# 27. Loading
+
+Prefer:
+
+Skeleton rows
+
+Inline loaders
+
+Specific component loading
+
+Avoid blocking the entire application with a spinner.
+
+---
+
+# 28. Error States
+
+Errors must explain:
+
+What happened
+
+What was preserved
+
+What the user should do
+
+Example:
+
+**Upload failed**
+
+`records_042.pdf` could not be stored.
+
+Your batch settings were preserved.
+
+[Retry Upload]
+
+---
+
+# 29. Confirmation Dialogs
+
+Only use confirmation for meaningful actions.
+
+Examples:
+
+Approve & Promote
+
+Reject Batch
+
+Supersede Record
+
+Delete unsubmitted upload
+
+Do not confirm harmless navigation.
+
+---
+
+# 30. Audit Visibility
+
+Wherever a governance transition occurs, show:
+
+Actor
+
+Role
+
+Timestamp
+
+Previous state
+
+New state
+
+Reason if applicable
+
+Transitions should feel traceable throughout the product.
+
+---
+
+# 31. Accessibility
+
+Target:
+
+WCAG 2.1 AA
+
+Requirements:
+
+Minimum text contrast 4.5:1
+
+Visible keyboard focus
+
+Semantic labels
+
+ARIA descriptions
+
+Do not communicate state by color alone
+
+Minimum interactive target around 36–40 px
+
+Tables navigable by keyboard
+
+Document viewer controls accessible
+
+---
+
+# 32. Responsive Behavior
+
+VigilCare is primarily desktop software.
+
+Do not force complex Entry and Verification workflows into a phone layout.
+
+Suggested support:
+
+### Desktop
+
+Full functionality
+
+### Tablet
+
+Supervisory, history, approval and live capture supported
+
+### Mobile
+
+Primarily:
+
+Patient history
+
+Notifications
+
+Simple live capture
+
+Approval review where appropriate
+
+Avoid full backfill transcription on mobile.
+
+---
+
+# 33. Motion
+
+Keep extremely subtle.
+
+Allowed:
+
+150–200 ms hover
+
+Panel expand/collapse
+
+Toast appearance
+
+Modal transition
+
+Avoid:
+
+Bouncing elements
+
+Animated gradients
+
+Large transitions
+
+Dashboard count animations
+
+Healthcare software should feel stable.
+
+---
+
+# 34. Most Important Screen Hierarchy
+
+The visual hierarchy of the application should reflect workflow risk.
+
+### Level 1 — Source evidence
+
+Original scanned document
+
+### Level 2 — Entered structured information
+
+Draft data
+
+### Level 3 — Verification status
+
+Human verification results
+
+### Level 4 — Clinical approval
+
+Clinical decision when required
+
+### Level 5 — Promotion
+
+Live clinical record
+
+This hierarchy should remain recognizable across every workflow.
+
+---
+
+# 35. Recommended Final Sidebar
+
+For consistency, I would use these exact labels:
+
+**WORKSPACE**
+
+Dashboard
+Intake
+Cover Sheets
+Data Entry
+Verification
+Clinical Approval
+Live Capture
+Patient History
+
+**SUPERVISION**
+
+Supervisor Dashboard
+Queues
+Workload
+Reports
+
+**ADMINISTRATION**
+
+Users
+Master Data
+FHIR Explorer
+Configuration
+Audit Logs
+
+Navigation is filtered by role and permission.
+
+---
+
+# 36. Corrections to the Generated Concepts
+
+Several adjustments should be made before treating the screenshots as implementation references.
+
+### Login
+
+Remove the role selector.
+
+Roles come from authentication.
+
+---
+
+### Data Entry naming
+
+Use **Data Entry** consistently.
+
+Do not alternate between “Entry” and “Data Entry.”
+
+---
+
+### Approval naming
+
+Use **Clinical Approval** consistently.
+
+Do not simultaneously show:
+
+Clinical Approval
+and
+Approvals
+
+as separate navigation items unless they actually represent different concepts.
+
+---
+
+### Dashboard infrastructure metrics
+
+Move detailed:
+
+PostgreSQL
+
+Redis
+
+MinIO
+
+FHIR API
+
+service health into Administration.
+
+The normal operator dashboard should prioritize work.
+
+---
+
+### OCR
+
+Do not label extracted values as inherently correct.
+
+OCR confidence represents machine confidence, not clinical correctness.
+
+---
+
+### Verification
+
+The source scan and entered value should dominate the page.
+
+Analytics are secondary.
+
+---
+
+### Patient History
+
+Promotion should normally identify the user who performed the approval/promotion action according to actual backend workflow. Do not assume the data-entry operator promoted the record.
+
+---
+
+### Clinical Approval
+
+Use the strongest semantic color only for clinical risks and irreversible actions.
+
+Routine workflow warnings should use amber.
+
+---
+
+# 37. Overall Visual Personality
+
+VigilCare Records should sit visually somewhere between:
+
+A modern hospital information system
+
+A high-quality enterprise data workstation
+
+A regulated document-processing platform
+
+It should **not** look like:
+
+A generic AI dashboard
+
+A marketing SaaS template
+
+A consumer health app
+
+A traditional gray hospital EMR from 2008
+
+The resulting identity should be:
+
+**calm, structured, trustworthy, fast, and visibly governed.**
diff --git a/docs/vigilcare-records-prd.md b/docs/vigilcare-records-prd.md
index d662322..4a58775 100644
--- a/docs/vigilcare-records-prd.md
+++ b/docs/vigilcare-records-prd.md
@@ -4,6 +4,8 @@
 
 **Phases 1–13 are complete.** Post-phase hardening (health checks, user management, auth rate limiting, document access audit, batch cancellation, list sorting, unified promotion retry, normalized patient deduplication, assignment-time `IN_ENTRY` transitions, API-proxied document streaming, CORS) is also done. See the [gap analysis](vigilcare-records-gap-analysis.md) summary matrix for remaining open items.
 
+**Phases 14–18 (UI redesign)** are planned: restyle and re-layout `vigilcare-records-web` against [designs/design-doc.md](designs/design-doc.md) without new backend behavior. Implementation guides: [plans/](plans/).
+
 | Phase | Scope | Status |
 |---|---|---|
 | 1 | Schema, auth, roles, batch CRUD, MinIO upload, status machine | Done |
@@ -19,8 +21,13 @@
 | 11 | HL7 FHIR R4 read-only API and FHIR Explorer UI | Done |
 | 12 | Backend-driven batch-type field requirements (`fieldRequirements` metadata) | Done |
 | 13 | Optional OCR-assisted draft pre-fill (Azure or Tesseract; disabled by default) | Done |
+| 14 | UI redesign: design tokens, app shell (sidebar), login | Planned |
+| 15 | UI redesign: shared UX primitives (status, OCR badges, SoD, sticky actions) | Planned |
+| 16 | UI redesign: Entry / Verification / Clinical Approval workstation layouts | Planned |
+| 17 | UI redesign: Intake, Cover Sheets, Live Capture, History, Dashboard, FHIR Explorer | Planned |
+| 18 | UI redesign: surface unused APIs (batch events, work queues, Users admin) | Planned |
 
-**Verification scripts:** `./scripts/run-vigilcare-records-verification-p9.sh` (full workflow + metrics), `./scripts/run-vigilcare-records-phase-10-verification.sh`, `./scripts/run-vigilcare-records-phase-11-verification.sh`, `./scripts/run-vigilcare-records-phase-13-verification.sh`.
+**Verification scripts:** `./scripts/run-vigilcare-records-verification-p9.sh` (full workflow + metrics), `./scripts/run-vigilcare-records-phase-10-verification.sh`, `./scripts/run-vigilcare-records-phase-11-verification.sh`, `./scripts/run-vigilcare-records-phase-13-verification.sh`. Phases 14–18 verify via Vitest + manual checklists in each plan.
 
 See [README.md](../README.md) for API reference, quick start, and [digitization-workstation-guide.md](digitization-workstation-guide.md) for operator workflows.
 
@@ -568,7 +575,7 @@ SMART on FHIR authorization and FHIR write operations remain out of scope.
 
 ---
 
-## Digitization Workstation UI — *implemented (Phases 7, 10, 11, 12, 13)*
+## Digitization Workstation UI — *implemented (Phases 7, 10, 11, 12, 13); redesign Planned (Phases 14–18)*
 
 Vue 3 SPA at `vigilcare-records-web/` (dev server port **3028**, proxies `/api` and `/fhir` → API on **5217**). Role-based routing with JWT refresh.
 
@@ -586,6 +593,20 @@ Vue 3 SPA at `vigilcare-records-web/` (dev server port **3028**, proxies `/api`
 
 Scan viewer loads documents via authenticated `GET /digitization-batches/:id/document` blob URLs (avoids cross-origin MinIO iframe issues). Not a full EMR UI — clinical alerting views remain in VigilCareClinical's ward dashboard.
 
+### UI redesign roadmap (Phases 14–18)
+
+Constrained to **existing API capabilities**. Design source: [designs/design-doc.md](designs/design-doc.md) (section 36 corrections override mockups). Plans: [plans/README.md](plans/README.md).
+
+| Phase | Focus |
+|---|---|
+| 14 | Navy/blue design tokens, role-filtered sidebar shell, split login (no role picker); keep Public Sans |
+| 15 | Shared primitives: status badges, empty/loading/error, sticky action bar, OCR % badges, SoD banner, confirm dialogs |
+| 16 | Dense Entry / Verification / Clinical Approval workstation layouts |
+| 17 | Restyle Intake, Cover Sheets, Live Capture, Patient History, Queue Dashboard, FHIR Explorer |
+| 18 | Wire unused APIs: batch events panel, `work-queue/*` lists, administrator Users page |
+
+Deferred mockup items (global search, notifications, Reports/Master Data, SSO, OCR region highlight, infra health widgets) are listed in [plans/README.md](plans/README.md).
+
 See [digitization-workstation-guide.md](digitization-workstation-guide.md) for operator workflows and clinical scenarios.
 
 ---
@@ -666,12 +687,17 @@ If VigilCareClinical is unreachable in split deployment, batch remains `approved
 | 11 | HL7 FHIR R4 read-only API and FHIR Explorer UI | Done |
 | 12 | Backend-driven batch-type field requirements | Done |
 | 13 | Optional OCR-assisted draft pre-fill | Done |
+| 14 | UI redesign: tokens, app shell, login | Planned |
+| 15 | UI redesign: shared UX primitives | Planned |
+| 16 | UI redesign: Entry / Verification / Approval workstation | Planned |
+| 17 | UI redesign: supporting screens + dashboard | Planned |
+| 18 | UI redesign: surface unused existing APIs | Planned |
 
 ---
 
 ## Step-by-Step Guide
 
-Complete phases in order. Promotion (Phase 4) must not be built until the draft state machine and separation of duties are correct — debugging promotion bugs alongside workflow bugs is painful.
+Complete phases in order. Promotion (Phase 4) must not be built until the draft state machine and separation of duties are correct — debugging promotion bugs alongside workflow bugs is painful. For Phases 14–18, complete each UI plan before starting the next; do not invent backend features to match mockups.
 
 ---
 
@@ -796,6 +822,46 @@ This phase connects Records to Clinical. Run against a VigilCareClinical Phase 2
 
 ---
 
+### Phase 14 — UI Design System, Shell, Login
+
+**What to do:** Map design-doc color tokens into Tailwind (keep Public Sans); add role-filtered `AppShell` sidebar for existing routes; redesign login as split brand + form without a role selector.
+
+**Plan:** [plans/phase-14-plan.md](plans/phase-14-plan.md)
+
+---
+
+### Phase 15 — Shared UX Primitives
+
+**What to do:** Status badges, empty/loading/error patterns, sticky workstation action bar, OCR percentage badges, separation-of-duties banner, confirmation dialogs for irreversible actions.
+
+**Plan:** [plans/phase-15-plan.md](plans/phase-15-plan.md)
+
+---
+
+### Phase 16 — Workstation Layouts (Entry, Verification, Approval)
+
+**What to do:** Dense scan-first layouts with sticky CTAs and design-doc action labels; apply SoD and OCR primitives; no API contract changes.
+
+**Plan:** [plans/phase-16-plan.md](plans/phase-16-plan.md)
+
+---
+
+### Phase 17 — Supporting Screens
+
+**What to do:** Restyle Intake, Cover Sheets, Live Capture, Patient History, Queue Dashboard (overview metrics only — no infra health), and FHIR Explorer.
+
+**Plan:** [plans/phase-17-plan.md](plans/phase-17-plan.md)
+
+---
+
+### Phase 18 — Surface Unused APIs in the UI
+
+**What to do:** Batch events audit panel; prefer `work-queue/entry|verification|clinical-approval` for queues; administrator Users page via existing `UsersController`.
+
+**Plan:** [plans/phase-18-plan.md](plans/phase-18-plan.md)
+
+---
+
 ## Deployment Notes (Small Island Context)
 
 - **Single-site tenant:** One hospital or health district per deployment. No cross-island federation in v1.
@@ -838,7 +904,8 @@ This phase connects Records to Clinical. Run against a VigilCareClinical Phase 2
 
 - [README.md](../README.md) — API reference, quick start, verification scripts, data models
 - [digitization-workstation-guide.md](digitization-workstation-guide.md) — clinical scenarios (backfill, live capture, corrections)
-- [plans/](plans/) — phase-by-phase implementation guides (Phases 1–13)
+- [plans/](plans/) — phase implementation guides (Phases 14–18 UI redesign; Phase 1–13 plans not in repo)
+- [designs/design-doc.md](designs/design-doc.md) — UI/UX design specification for the workstation redesign
 - [vigilcare-records-gap-analysis.md](vigilcare-records-gap-analysis.md) — post-phase hardening tracker and remaining open items
 - [vigilcare-clinical-api-prd.md](vigilcare-clinical-api-prd.md) — downstream alerting and observation ingest
 - [Completed/VigilCareClinicalAPI/VigilCare-Partner-Brief.md](Completed/VigilCareClinicalAPI/VigilCare-Partner-Brief.md) — clinical positioning and scope boundaries
diff --git a/vigilcare-records-web/package-lock.json b/vigilcare-records-web/package-lock.json
index 68664b2..4c957c4 100644
--- a/vigilcare-records-web/package-lock.json
+++ b/vigilcare-records-web/package-lock.json
@@ -1397,9 +1397,9 @@
       }
     },
     "node_modules/brace-expansion": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.1.tgz",
-      "integrity": "sha512-WR1cURNjuvBLMZBMbqM0UoE+WAfdUcEV1ccD8PVBVOI+Z3ND4+SZbN8RsfT2bMuG1qwz5RFvPukSZm5fF2D5eA==",
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.4.tgz",
+      "integrity": "sha512-hGfVzPxthbf3+2yjg/RBs60cB0FhqBS/zvdV/4wn4/BmN0bNMMHPc4V/BbFieqf1TKAGGAHnY4eSjajCl0f2Xg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2768,9 +2768,9 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.15",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.15.tgz",
-      "integrity": "sha512-y7Wygv/7mEOvxTuEQDB8StXdMRBWf1kR/tlhAzBRUFkB2jfcLOAxO/SHmOO2zgz1pVgK29/kyupn059/bCHdjA==",
+      "version": "3.3.18",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.18.tgz",
+      "integrity": "sha512-DTg4MJbGMWkfi6VZFdNt2/caMbQy4Ou+Op/hJQvGEWcnVfoA1QA+xzRKAzw9jD6+GVOOeYr/mIcuDSdug6F6+w==",
       "funding": [
         {
           "type": "github",
@@ -3005,9 +3005,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.5.15",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.15.tgz",
-      "integrity": "sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==",
+      "version": "8.5.26",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.26.tgz",
+      "integrity": "sha512-u82N74LFzG8ca+dD8puPnplTXoGH4fTPpVGuIbt36G3qvNlkvfD0lEAZSxaly3KX8TS/L1A1gsCEmvKmBcVbkQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -3024,7 +3024,7 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "nanoid": "^3.3.12",
+        "nanoid": "^3.3.17",
         "picocolors": "^1.1.1",
         "source-map-js": "^1.2.1"
       },
@@ -3780,9 +3780,9 @@
       }
     },
     "node_modules/undici": {
-      "version": "7.28.0",
-      "resolved": "https://registry.npmjs.org/undici/-/undici-7.28.0.tgz",
-      "integrity": "sha512-cRZYrTDwWznlnRiPjggAGxZXanty6M8RV1ff8Wm4LWXBp7/IG8v5DnOm74DtUBp9OONpK75YlPnIjQqX0dBDtA==",
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-7.29.0.tgz",
+      "integrity": "sha512-IDxfleLmmbSskfWSUATiN1nfn2rDuvnMOqb5CWR92iIfojA0Ud+ulOAAEQ57LPr9rWmsreUyf5lwyao+7GNNVw==",
       "dev": true,
       "license": "MIT",
       "engines": {
diff --git a/vigilcare-records-web/src/assets/main.css b/vigilcare-records-web/src/assets/main.css
index 7a9644d..4b76e53 100644
--- a/vigilcare-records-web/src/assets/main.css
+++ b/vigilcare-records-web/src/assets/main.css
@@ -4,75 +4,100 @@
 @tailwind components;
 @tailwind utilities;
 
+:root {
+  --vc-navy: #08254A;
+  --vc-primary: #155EEF;
+  --vc-primary-hover: #0B4FD6;
+  --vc-soft-blue: #EEF4FF;
+  --vc-bg: #F7F9FC;
+  --vc-surface: #FFFFFF;
+  --vc-text-strong: #101828;
+  --vc-text: #344054;
+  --vc-text-secondary: #667085;
+  --vc-text-disabled: #98A2B3;
+  --vc-border: #E4E7EC;
+  --vc-border-strong: #D0D5DD;
+  --vc-success: #079455;
+  --vc-success-bg: #ECFDF3;
+  --vc-warning: #DC6803;
+  --vc-warning-bg: #FFFAEB;
+  --vc-error: #D92D20;
+  --vc-error-bg: #FEF3F2;
+  --vc-critical: #B42318;
+  --vc-critical-bg: #FEE4E2;
+  --vc-radius-input: 8px;
+  --vc-radius-card: 10px;
+}
+
 @layer base {
   body {
-    @apply font-sans;
+    @apply font-sans text-ink bg-canvas;
   }
 }
 
 @layer components {
   .btn-primary {
-    @apply bg-primary-600 text-white px-4 py-2 rounded-md
+    @apply bg-primary-600 text-white px-4 py-2 rounded-input
            hover:bg-primary-700 disabled:opacity-50 disabled:cursor-not-allowed
            transition-colors;
   }
   .btn-secondary {
-    @apply bg-white text-primary-700 border border-primary-300 px-4 py-2 rounded-md
+    @apply bg-surface text-primary-700 border border-primary-300 px-4 py-2 rounded-input
            hover:bg-primary-50 disabled:opacity-50 disabled:cursor-not-allowed
            transition-colors;
   }
   .btn-danger {
-    @apply bg-clinical-danger text-white px-4 py-2 rounded-md
-           hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed
+    @apply bg-clinical-danger text-white px-4 py-2 rounded-input
+           hover:bg-clinical-critical disabled:opacity-50 disabled:cursor-not-allowed
            transition-colors;
   }
   .form-input {
-    @apply block w-full rounded-md border border-gray-300 px-4 py-2
+    @apply block w-full rounded-input border border-line-strong px-4 py-2 text-ink
            focus:border-primary-500 focus:ring-2 focus:ring-primary-500
-           disabled:bg-gray-100 disabled:text-gray-500;
+           disabled:bg-canvas disabled:text-ink-disabled;
   }
   .page-container {
     @apply p-4 sm:p-6 lg:p-8 max-w-4xl mx-auto;
   }
   .app-header {
     @apply flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between
-           px-4 py-4 sm:px-6 sm:py-4 bg-white border-b shadow-sm;
+           px-4 py-3 sm:px-6 h-auto min-h-16 bg-surface border-b border-line;
   }
   .app-header-title {
-    @apply flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4;
+    @apply flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4 min-w-0;
   }
   .app-header-actions {
     @apply flex flex-wrap items-center gap-2 sm:gap-4;
   }
   .card {
-    @apply bg-white rounded-md border border-gray-200 p-4 sm:p-6;
+    @apply bg-surface rounded-card border border-line p-4 sm:p-6 shadow-card;
   }
   .card-elevated {
-    @apply bg-white rounded-lg shadow-md p-4 sm:p-6;
+    @apply bg-surface rounded-card border border-line p-4 sm:p-6 shadow-card;
   }
   .split-pane {
     @apply grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-8
-           h-auto lg:h-[calc(100vh-4rem)] min-h-0;
+           h-auto lg:flex-1 lg:min-h-0 min-h-0;
   }
   .nav-link {
-    @apply text-sm text-gray-500 hover:text-gray-800 transition-colors;
+    @apply text-sm text-ink-secondary hover:text-ink-strong transition-colors;
   }
   .nav-link.router-link-active {
-    @apply text-gray-900 font-medium;
+    @apply text-ink-strong font-medium;
   }
   .status-badge {
-    @apply px-2 py-1 rounded-full text-xs font-medium;
+    @apply px-2 py-1 rounded-control text-xs font-medium;
   }
   .ocr-banner {
-    @apply bg-blue-50 border border-blue-200 rounded-md p-3 text-sm text-blue-800;
+    @apply bg-primary-50 border border-primary-100 rounded-input p-3 text-sm text-primary-800;
   }
   .ocr-high {
-    @apply border-l-[3px] border-l-green-500;
+    @apply border-l-[3px] border-l-clinical-safe;
   }
   .ocr-medium {
-    @apply border-l-[3px] border-l-yellow-500;
+    @apply border-l-[3px] border-l-clinical-warning;
   }
   .ocr-low {
-    @apply border-l-[3px] border-l-red-500;
+    @apply border-l-[3px] border-l-clinical-danger;
   }
 }
diff --git a/vigilcare-records-web/src/components/AppHeader.vue b/vigilcare-records-web/src/components/AppHeader.vue
index 2f32a18..4a5b019 100644
--- a/vigilcare-records-web/src/components/AppHeader.vue
+++ b/vigilcare-records-web/src/components/AppHeader.vue
@@ -1,45 +1,15 @@
 <template>
   <div class="app-header">
     <div class="app-header-title">
-      <router-link to="/" class="flex items-center gap-2 shrink-0">
-        <svg viewBox="0 0 32 32" class="w-6 h-6" aria-hidden="true">
-          <path fill="currentColor" class="text-primary-700" d="M16 2 4 6.5v8.2c0 8 5.1 14.6 12 15.3 6.9-.7 12-7.3 12-15.3V6.5z"/>
-          <path fill="white" d="M16 8.5c-3.6 0-6.6 2.8-6.6 6.3 0 3.4 2.7 6.4 6.6 9.6 3.9-3.2 6.6-6.2 6.6-9.6 0-3.5-3-6.3-6.6-6.3m0 3.4c1.7 0 3.1 1.3 3.1 2.9s-1.4 2.9-3.1 2.9-3.1-1.3-3.1-2.9 1.4-2.9 3.1-2.9"/>
-        </svg>
-        <span class="font-bold text-primary-800 tracking-tight">VigilCare</span>
-      </router-link>
-      <h1 class="text-lg font-semibold">{{ title }}</h1>
-      <nav class="flex gap-3 ml-4">
-        <router-link v-if="auth.canIntake" to="/intake" class="nav-link">Intake</router-link>
-        <router-link v-if="auth.canIntake" to="/cover-sheets" class="nav-link">Cover Sheets</router-link>
-        <router-link v-if="auth.canEntry" to="/entry" class="nav-link">Entry</router-link>
-        <router-link v-if="auth.canVerify" to="/verification" class="nav-link">Verification</router-link>
-        <router-link v-if="auth.canApprove" to="/approval" class="nav-link">Approval</router-link>
-        <router-link v-if="auth.canLiveCapture" to="/live-capture" class="nav-link">Live Capture</router-link>
-        <router-link to="/patients" class="nav-link">Patient History</router-link>
-        <router-link v-if="auth.canSupervise" to="/dashboard" class="nav-link">Queue Dashboard</router-link>
-        <router-link v-if="auth.canSupervise" to="/fhir-explorer" class="nav-link">FHIR Explorer</router-link>
-      </nav>
+      <h1 class="text-lg font-semibold text-ink-strong">{{ title }}</h1>
       <slot name="subtitle" />
     </div>
     <div class="app-header-actions">
       <slot name="actions" />
-      <span class="text-sm text-gray-600">{{ auth.userFullName }}</span>
-      <button
-        type="button"
-        @click="auth.logout()"
-        class="text-sm text-gray-500 hover:text-gray-800"
-      >
-        Sign Out
-      </button>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { useAuthStore } from '../stores/auth'
-
 defineProps<{ title: string }>()
-
-const auth = useAuthStore()
 </script>
diff --git a/vigilcare-records-web/src/components/AppShell.vue b/vigilcare-records-web/src/components/AppShell.vue
new file mode 100644
index 0000000..cf92a49
--- /dev/null
+++ b/vigilcare-records-web/src/components/AppShell.vue
@@ -0,0 +1,228 @@
+<template>
+  <div class="flex h-screen min-h-0 bg-canvas text-ink">
+    <!-- Sidebar -->
+    <aside
+      :class="[
+        'flex flex-col shrink-0 bg-navy text-white transition-[width] duration-200 ease-out',
+        collapsed ? 'w-16' : 'w-60',
+      ]"
+      aria-label="Main navigation"
+    >
+      <div
+        :class="[
+          'flex items-center h-16 border-b border-white/10 shrink-0',
+          collapsed ? 'justify-center px-2' : 'gap-2.5 px-4',
+        ]"
+      >
+        <svg viewBox="0 0 32 32" class="w-7 h-7 shrink-0" aria-hidden="true">
+          <path fill="#155EEF" d="M16 2 4 6.5v8.2c0 8 5.1 14.6 12 15.3 6.9-.7 12-7.3 12-15.3V6.5z"/>
+          <path fill="white" d="M16 8.5c-3.6 0-6.6 2.8-6.6 6.3 0 3.4 2.7 6.4 6.6 9.6 3.9-3.2 6.6-6.2 6.6-9.6 0-3.5-3-6.3-6.6-6.3m0 3.4c1.7 0 3.1 1.3 3.1 2.9s-1.4 2.9-3.1 2.9-3.1-1.3-3.1-2.9 1.4-2.9 3.1-2.9"/>
+        </svg>
+        <div v-if="!collapsed" class="min-w-0 leading-tight">
+          <p class="font-bold tracking-tight text-sm truncate">VigilCare</p>
+          <p class="text-[11px] text-white/60 truncate">Records</p>
+        </div>
+      </div>
+
+      <nav class="flex-1 overflow-y-auto py-3 px-2 space-y-4">
+        <div v-if="workspaceItems.length">
+          <p
+            v-if="!collapsed"
+            class="px-2 mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-white/40"
+          >
+            Workspace
+          </p>
+          <ul class="space-y-0.5">
+            <li v-for="item in workspaceItems" :key="item.to">
+              <router-link
+                :to="item.to"
+                :title="collapsed ? item.label : undefined"
+                :class="navItemClass(item.to)"
+              >
+                <span class="shrink-0 w-5 h-5 flex items-center justify-center" aria-hidden="true">
+                  <component :is="item.icon" />
+                </span>
+                <span v-if="!collapsed" class="truncate">{{ item.label }}</span>
+              </router-link>
+            </li>
+          </ul>
+        </div>
+
+        <div v-if="adminItems.length">
+          <p
+            v-if="!collapsed"
+            class="px-2 mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-white/40"
+          >
+            Administration
+          </p>
+          <ul class="space-y-0.5">
+            <li v-for="item in adminItems" :key="item.to">
+              <router-link
+                :to="item.to"
+                :title="collapsed ? item.label : undefined"
+                :class="navItemClass(item.to)"
+              >
+                <span class="shrink-0 w-5 h-5 flex items-center justify-center" aria-hidden="true">
+                  <component :is="item.icon" />
+                </span>
+                <span v-if="!collapsed" class="truncate">{{ item.label }}</span>
+              </router-link>
+            </li>
+          </ul>
+        </div>
+      </nav>
+
+      <div class="shrink-0 border-t border-white/10 p-2">
+        <button
+          type="button"
+          class="flex w-full items-center gap-2.5 rounded-input px-2.5 py-2 text-sm text-white/70 hover:bg-white/10 hover:text-white transition-colors"
+          :class="collapsed ? 'justify-center' : ''"
+          :aria-expanded="!collapsed"
+          :aria-label="collapsed ? 'Expand sidebar' : 'Collapse sidebar'"
+          @click="toggleCollapsed"
+        >
+          <svg
+            class="w-5 h-5 shrink-0 transition-transform"
+            :class="collapsed ? 'rotate-180' : ''"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            aria-hidden="true"
+          >
+            <path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clip-rule="evenodd" />
+          </svg>
+          <span v-if="!collapsed">Collapse</span>
+        </button>
+      </div>
+    </aside>
+
+    <!-- Main column -->
+    <div class="flex flex-col flex-1 min-w-0 min-h-0">
+      <header class="flex items-center justify-end gap-4 h-16 shrink-0 px-4 sm:px-6 bg-surface border-b border-line">
+        <span class="text-sm text-ink-secondary truncate">{{ auth.userFullName }}</span>
+        <button
+          type="button"
+          class="text-sm text-ink-secondary hover:text-ink-strong transition-colors"
+          @click="auth.logout()"
+        >
+          Sign Out
+        </button>
+      </header>
+
+      <main class="flex-1 min-h-0 overflow-auto">
+        <slot />
+      </main>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, h, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { useAuthStore } from '../stores/auth'
+
+const COLLAPSE_KEY = 'vigilcare_sidebar_collapsed'
+
+const auth = useAuthStore()
+const route = useRoute()
+
+const collapsed = ref(localStorage.getItem(COLLAPSE_KEY) === '1')
+
+watch(collapsed, (value) => {
+  localStorage.setItem(COLLAPSE_KEY, value ? '1' : '0')
+})
+
+function toggleCollapsed() {
+  collapsed.value = !collapsed.value
+}
+
+function iconPath(d: string) {
+  return () =>
+    h(
+      'svg',
+      { viewBox: '0 0 20 20', fill: 'currentColor', class: 'w-5 h-5' },
+      [h('path', { 'fill-rule': 'evenodd', 'clip-rule': 'evenodd', d })],
+    )
+}
+
+const icons = {
+  intake: iconPath(
+    'M3 4.5A1.5 1.5 0 014.5 3h11A1.5 1.5 0 0117 4.5v11a1.5 1.5 0 01-1.5 1.5h-11A1.5 1.5 0 013 15.5v-11zM5.5 6a.5.5 0 000 1h9a.5.5 0 000-1h-9zm0 3a.5.5 0 000 1h9a.5.5 0 000-1h-9zm0 3a.5.5 0 000 1h6a.5.5 0 000-1h-6z',
+  ),
+  cover: iconPath(
+    'M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm1 3.5A.5.5 0 015.5 6h9a.5.5 0 010 1h-9A.5.5 0 015 6.5zM5.5 9a.5.5 0 000 1h5a.5.5 0 000-1h-5z',
+  ),
+  entry: iconPath(
+    'M3.5 3A1.5 1.5 0 002 4.5v11A1.5 1.5 0 003.5 17h13a1.5 1.5 0 001.5-1.5v-11A1.5 1.5 0 0016.5 3h-13zM5 7.5A.5.5 0 015.5 7h9a.5.5 0 010 1h-9A.5.5 0 015 7.5zm0 3A.5.5 0 015.5 10h9a.5.5 0 010 1h-9A.5.5 0 015 10.5zm0 3A.5.5 0 015.5 13h5a.5.5 0 010 1h-5A.5.5 0 015 13.5z',
+  ),
+  verify: iconPath(
+    'M10 2a8 8 0 100 16 8 8 0 000-16zm3.53 6.47a.75.75 0 00-1.06-1.06L9 10.88 7.53 9.41a.75.75 0 10-1.06 1.06l2 2a.75.75 0 001.06 0l4-4z',
+  ),
+  approve: iconPath(
+    'M10 1.5l7.5 3v5.25c0 4.5-2.9 8.25-7.5 9.25-4.6-1-7.5-4.75-7.5-9.25V4.5L10 1.5zm3.03 6.03a.75.75 0 00-1.06-1.06L9 9.44 7.53 7.97a.75.75 0 10-1.06 1.06l2 2a.75.75 0 001.06 0l3.5-3.5z',
+  ),
+  live: iconPath(
+    'M4 5a2 2 0 012-2h8a2 2 0 012 2v6a2 2 0 01-2 2H9.414l-2.707 2.707A1 1 0 015 15.293V13H6a2 2 0 01-2-2V5zm3.5 2.5a.75.75 0 000 1.5h5a.75.75 0 000-1.5h-5z',
+  ),
+  patients: iconPath(
+    'M10 2a4 4 0 100 8 4 4 0 000-8zM3.5 16.5a6.5 6.5 0 0113 0 .75.75 0 01-.75.75h-11.5a.75.75 0 01-.75-.75z',
+  ),
+  dashboard: iconPath(
+    'M3 4.5A1.5 1.5 0 014.5 3h3A1.5 1.5 0 019 4.5v3A1.5 1.5 0 017.5 9h-3A1.5 1.5 0 013 7.5v-3zM11 4.5A1.5 1.5 0 0112.5 3h3A1.5 1.5 0 0117 4.5v3A1.5 1.5 0 0115.5 9h-3A1.5 1.5 0 0111 7.5v-3zM3 12.5A1.5 1.5 0 014.5 11h3A1.5 1.5 0 019 12.5v3A1.5 1.5 0 017.5 17h-3A1.5 1.5 0 013 15.5v-3zM11 12.5a1.5 1.5 0 011.5-1.5h3a1.5 1.5 0 011.5 1.5v3a1.5 1.5 0 01-1.5 1.5h-3a1.5 1.5 0 01-1.5-1.5v-3z',
+  ),
+  fhir: iconPath(
+    'M4.5 3A1.5 1.5 0 003 4.5v11A1.5 1.5 0 004.5 17h11a1.5 1.5 0 001.5-1.5v-11A1.5 1.5 0 0015.5 3h-11zM6 7.25a.75.75 0 01.75-.75h6.5a.75.75 0 010 1.5h-6.5A.75.75 0 016 7.25zm0 3a.75.75 0 01.75-.75h6.5a.75.75 0 010 1.5h-6.5A.75.75 0 016 10.25zm0 3a.75.75 0 01.75-.75h3.5a.75.75 0 010 1.5h-3.5A.75.75 0 016 13.25z',
+  ),
+}
+
+interface NavItem {
+  label: string
+  to: string
+  icon: () => ReturnType<typeof h>
+  show: boolean
+}
+
+const workspaceItems = computed<NavItem[]>(() =>
+  [
+    { label: 'Intake', to: '/intake', icon: icons.intake, show: auth.canIntake },
+    { label: 'Cover Sheets', to: '/cover-sheets', icon: icons.cover, show: auth.canIntake },
+    { label: 'Data Entry', to: '/entry', icon: icons.entry, show: auth.canEntry },
+    { label: 'Verification', to: '/verification', icon: icons.verify, show: auth.canVerify },
+    { label: 'Clinical Approval', to: '/approval', icon: icons.approve, show: auth.canApprove },
+    { label: 'Live Capture', to: '/live-capture', icon: icons.live, show: auth.canLiveCapture },
+    { label: 'Patient History', to: '/patients', icon: icons.patients, show: auth.isAuthenticated },
+  ].filter((item) => item.show),
+)
+
+const adminItems = computed<NavItem[]>(() =>
+  [
+    { label: 'Queue Dashboard', to: '/dashboard', icon: icons.dashboard, show: auth.canSupervise },
+    { label: 'FHIR Explorer', to: '/fhir-explorer', icon: icons.fhir, show: auth.canSupervise },
+  ].filter((item) => item.show),
+)
+
+function isActive(path: string): boolean {
+  if (path === '/patients') {
+    return route.path === '/patients' || route.path.startsWith('/patients/')
+  }
+  if (path === '/entry') {
+    return route.path === '/entry' || route.path.startsWith('/entry/')
+  }
+  if (path === '/verification') {
+    return route.path === '/verification' || route.path.startsWith('/verification/')
+  }
+  if (path === '/approval') {
+    return route.path === '/approval' || route.path.startsWith('/approval/')
+  }
+  return route.path === path || route.path.startsWith(`${path}/`)
+}
+
+function navItemClass(path: string): string {
+  const base =
+    'flex items-center gap-2.5 rounded-input text-sm transition-colors ' +
+    (collapsed.value ? 'justify-center px-2 py-2.5' : 'px-2.5 py-2')
+  if (isActive(path)) {
+    return `${base} bg-primary-600 text-white font-medium`
+  }
+  return `${base} text-white/75 hover:bg-white/10 hover:text-white`
+}
+</script>
diff --git a/vigilcare-records-web/src/layouts/AuthenticatedLayout.vue b/vigilcare-records-web/src/layouts/AuthenticatedLayout.vue
new file mode 100644
index 0000000..99017ff
--- /dev/null
+++ b/vigilcare-records-web/src/layouts/AuthenticatedLayout.vue
@@ -0,0 +1,9 @@
+<template>
+  <AppShell>
+    <router-view />
+  </AppShell>
+</template>
+
+<script setup lang="ts">
+import AppShell from '../components/AppShell.vue'
+</script>
diff --git a/vigilcare-records-web/src/router/index.ts b/vigilcare-records-web/src/router/index.ts
index b3bacff..3d6e095 100644
--- a/vigilcare-records-web/src/router/index.ts
+++ b/vigilcare-records-web/src/router/index.ts
@@ -8,102 +8,118 @@ const routes: RouteRecordRaw[] = [
     component: () => import('../views/LoginView.vue'),
     meta: { requiresAuth: false },
   },
-  {
-    path: '/intake',
-    name: 'Intake',
-    component: () => import('../views/IntakeView.vue'),
-    meta: { requiresAuth: true, roles: ['INTAKE_CLERK', 'ADMINISTRATOR'] },
-  },
-  {
-    path: '/cover-sheets',
-    name: 'CoverSheets',
-    component: () => import('../views/CoverSheetView.vue'),
-    meta: { requiresAuth: true, roles: ['INTAKE_CLERK', 'ADMINISTRATOR'] },
-  },
-  {
-    path: '/entry',
-    name: 'EntryQueue',
-    component: () => import('../views/EntryView.vue'),
-    meta: { requiresAuth: true, roles: ['DATA_ENTRY_CLERK', 'ADMINISTRATOR'] },
-  },
-  {
-    path: '/entry/:batchId',
-    name: 'EntryBatch',
-    component: () => import('../views/EntryView.vue'),
-    meta: { requiresAuth: true, roles: ['DATA_ENTRY_CLERK', 'ADMINISTRATOR'] },
-    props: true,
-  },
-  {
-    path: '/verification',
-    name: 'VerificationQueue',
-    component: () => import('../views/VerificationView.vue'),
-    meta: {
-      requiresAuth: true,
-      roles: ['VERIFIER', 'CLINICAL_APPROVER', 'ADMINISTRATOR'],
-    },
-  },
-  {
-    path: '/verification/:batchId',
-    name: 'VerificationBatch',
-    component: () => import('../views/VerificationView.vue'),
-    meta: {
-      requiresAuth: true,
-      roles: ['VERIFIER', 'CLINICAL_APPROVER', 'ADMINISTRATOR'],
-    },
-    props: true,
-  },
-  {
-    path: '/approval',
-    name: 'ApprovalQueue',
-    component: () => import('../views/ApprovalView.vue'),
-    meta: {
-      requiresAuth: true,
-      roles: ['CLINICAL_APPROVER', 'ADMINISTRATOR'],
-    },
-  },
-  {
-    path: '/approval/:batchId',
-    name: 'ApprovalBatch',
-    component: () => import('../views/ApprovalView.vue'),
-    meta: {
-      requiresAuth: true,
-      roles: ['CLINICAL_APPROVER', 'ADMINISTRATOR'],
-    },
-    props: true,
-  },
-  {
-    path: '/patients/:patientId/history',
-    name: 'PatientHistory',
-    component: () => import('../views/PatientHistoryView.vue'),
-    meta: { requiresAuth: true },
-    props: true,
-  },
-  {
-    path: '/patients',
-    name: 'PatientSearch',
-    component: () => import('../views/PatientHistoryView.vue'),
-    meta: { requiresAuth: true },
-  },
-  {
-    path: '/live-capture',
-    name: 'LiveCapture',
-    component: () => import('../views/LiveCaptureView.vue'),
-    meta: { requiresAuth: true, roles: ['CLINICIAN', 'ADMINISTRATOR'] },
-  },
-  {
-    path: '/dashboard',
-    name: 'Dashboard',
-    component: () => import('../views/QueueDashboardView.vue'),
-    meta: { requiresAuth: true, roles: ['ADMINISTRATOR'] },
-  },
-  {
-    path: '/fhir-explorer',
-    name: 'FhirExplorer',
-    component: () => import('../views/FhirExplorerView.vue'),
-    meta: { requiresAuth: true, roles: ['ADMINISTRATOR'] },
-  },
   {
     path: '/',
+    component: () => import('../layouts/AuthenticatedLayout.vue'),
+    meta: { requiresAuth: true },
+    children: [
+      {
+        path: '',
+        redirect: () => {
+          const auth = useAuthStore()
+          return auth.isAuthenticated
+            ? getDefaultRouteForRole(auth.userRole)
+            : '/login'
+        },
+      },
+      {
+        path: 'intake',
+        name: 'Intake',
+        component: () => import('../views/IntakeView.vue'),
+        meta: { requiresAuth: true, roles: ['INTAKE_CLERK', 'ADMINISTRATOR'] },
+      },
+      {
+        path: 'cover-sheets',
+        name: 'CoverSheets',
+        component: () => import('../views/CoverSheetView.vue'),
+        meta: { requiresAuth: true, roles: ['INTAKE_CLERK', 'ADMINISTRATOR'] },
+      },
+      {
+        path: 'entry',
+        name: 'EntryQueue',
+        component: () => import('../views/EntryView.vue'),
+        meta: { requiresAuth: true, roles: ['DATA_ENTRY_CLERK', 'ADMINISTRATOR'] },
+      },
+      {
+        path: 'entry/:batchId',
+        name: 'EntryBatch',
+        component: () => import('../views/EntryView.vue'),
+        meta: { requiresAuth: true, roles: ['DATA_ENTRY_CLERK', 'ADMINISTRATOR'] },
+        props: true,
+      },
+      {
+        path: 'verification',
+        name: 'VerificationQueue',
+        component: () => import('../views/VerificationView.vue'),
+        meta: {
+          requiresAuth: true,
+          roles: ['VERIFIER', 'CLINICAL_APPROVER', 'ADMINISTRATOR'],
+        },
+      },
+      {
+        path: 'verification/:batchId',
+        name: 'VerificationBatch',
+        component: () => import('../views/VerificationView.vue'),
+        meta: {
+          requiresAuth: true,
+          roles: ['VERIFIER', 'CLINICAL_APPROVER', 'ADMINISTRATOR'],
+        },
+        props: true,
+      },
+      {
+        path: 'approval',
+        name: 'ApprovalQueue',
+        component: () => import('../views/ApprovalView.vue'),
+        meta: {
+          requiresAuth: true,
+          roles: ['CLINICAL_APPROVER', 'ADMINISTRATOR'],
+        },
+      },
+      {
+        path: 'approval/:batchId',
+        name: 'ApprovalBatch',
+        component: () => import('../views/ApprovalView.vue'),
+        meta: {
+          requiresAuth: true,
+          roles: ['CLINICAL_APPROVER', 'ADMINISTRATOR'],
+        },
+        props: true,
+      },
+      {
+        path: 'patients/:patientId/history',
+        name: 'PatientHistory',
+        component: () => import('../views/PatientHistoryView.vue'),
+        meta: { requiresAuth: true },
+        props: true,
+      },
+      {
+        path: 'patients',
+        name: 'PatientSearch',
+        component: () => import('../views/PatientHistoryView.vue'),
+        meta: { requiresAuth: true },
+      },
+      {
+        path: 'live-capture',
+        name: 'LiveCapture',
+        component: () => import('../views/LiveCaptureView.vue'),
+        meta: { requiresAuth: true, roles: ['CLINICIAN', 'ADMINISTRATOR'] },
+      },
+      {
+        path: 'dashboard',
+        name: 'Dashboard',
+        component: () => import('../views/QueueDashboardView.vue'),
+        meta: { requiresAuth: true, roles: ['ADMINISTRATOR'] },
+      },
+      {
+        path: 'fhir-explorer',
+        name: 'FhirExplorer',
+        component: () => import('../views/FhirExplorerView.vue'),
+        meta: { requiresAuth: true, roles: ['ADMINISTRATOR'] },
+      },
+    ],
+  },
+  {
+    path: '/:pathMatch(.*)*',
     redirect: '/login',
   },
 ]
@@ -139,4 +155,4 @@ router.beforeEach((to, _from, next) => {
   next()
 })
 
-export default router
\ No newline at end of file
+export default router
diff --git a/vigilcare-records-web/src/views/ApprovalView.vue b/vigilcare-records-web/src/views/ApprovalView.vue
index b72aac6..7b1ac7f 100644
--- a/vigilcare-records-web/src/views/ApprovalView.vue
+++ b/vigilcare-records-web/src/views/ApprovalView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="min-h-screen lg:h-screen flex flex-col">
+  <div class="h-full min-h-0 flex flex-col">
     <AppHeader title="Clinical Approval">
       <template #subtitle>
         <span v-if="currentBatch" class="text-sm text-gray-500">
diff --git a/vigilcare-records-web/src/views/CoverSheetView.vue b/vigilcare-records-web/src/views/CoverSheetView.vue
index 44fed20..9455290 100644
--- a/vigilcare-records-web/src/views/CoverSheetView.vue
+++ b/vigilcare-records-web/src/views/CoverSheetView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="min-h-screen flex flex-col">
+  <div class="h-full min-h-0 flex flex-col">
     <AppHeader title="Cover Sheets" />
 
     <div class="p-4 sm:p-6 lg:p-8 max-w-6xl mx-auto flex-1 w-full">
diff --git a/vigilcare-records-web/src/views/EntryView.vue b/vigilcare-records-web/src/views/EntryView.vue
index 6b7cad6..fb2eab2 100644
--- a/vigilcare-records-web/src/views/EntryView.vue
+++ b/vigilcare-records-web/src/views/EntryView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="min-h-screen lg:h-screen flex flex-col">
+  <div class="h-full min-h-0 flex flex-col">
     <AppHeader title="Data Entry">
       <template #subtitle>
         <span v-if="currentBatch" class="text-sm text-gray-500">
@@ -11,7 +11,7 @@
 
     <!-- Queue view (no batch selected) -->
     <div v-if="!batchId" class="flex-1 p-4 sm:p-6">
-      <h2 class="text-xl font-semibold mb-4">Entry Queue</h2>
+      <h2 class="text-xl font-semibold mb-4">Data Entry Queue</h2>
       <BatchList
         :batches="batchStore.batches"
         :loading="batchStore.loading"
diff --git a/vigilcare-records-web/src/views/FhirExplorerView.vue b/vigilcare-records-web/src/views/FhirExplorerView.vue
index 6d7d1a5..5e0fc64 100644
--- a/vigilcare-records-web/src/views/FhirExplorerView.vue
+++ b/vigilcare-records-web/src/views/FhirExplorerView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="min-h-screen flex flex-col">
+  <div class="h-full min-h-0 flex flex-col">
     <AppHeader title="FHIR Explorer" />
 
     <div class="p-4 sm:p-6 lg:p-8 max-w-6xl mx-auto flex-1 w-full space-y-6">
diff --git a/vigilcare-records-web/src/views/IntakeView.vue b/vigilcare-records-web/src/views/IntakeView.vue
index 5973971..2b95723 100644
--- a/vigilcare-records-web/src/views/IntakeView.vue
+++ b/vigilcare-records-web/src/views/IntakeView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="min-h-screen flex flex-col">
+  <div class="h-full min-h-0 flex flex-col">
     <AppHeader title="Intake" />
 
     <div class="page-container flex-1">
diff --git a/vigilcare-records-web/src/views/LiveCaptureView.vue b/vigilcare-records-web/src/views/LiveCaptureView.vue
index d81728a..376b5f2 100644
--- a/vigilcare-records-web/src/views/LiveCaptureView.vue
+++ b/vigilcare-records-web/src/views/LiveCaptureView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="min-h-screen flex flex-col">
+  <div class="h-full min-h-0 flex flex-col">
     <AppHeader title="Live Capture" />
 
     <div class="flex-1 p-4 sm:p-6 lg:p-8 max-w-5xl mx-auto w-full">
diff --git a/vigilcare-records-web/src/views/LoginView.vue b/vigilcare-records-web/src/views/LoginView.vue
index 80d13f2..4944b83 100644
--- a/vigilcare-records-web/src/views/LoginView.vue
+++ b/vigilcare-records-web/src/views/LoginView.vue
@@ -1,40 +1,100 @@
 <template>
-  <div class="min-h-screen flex items-center justify-center bg-gray-50 px-4 py-8">
-    <div class="max-w-md w-full bg-white rounded-lg shadow-md p-6 sm:p-8">
-      <div class="text-center mb-8">
-        <h1 class="text-2xl font-bold text-gray-900">VigilCare Records</h1>
-        <p class="text-gray-600 mt-2">Digitization Workstation</p>
+  <div class="min-h-screen flex flex-col lg:flex-row bg-canvas">
+    <!-- Brand panel -->
+    <aside
+      class="relative flex flex-col justify-between bg-navy text-white px-8 py-10 lg:w-[45%] lg:min-h-screen lg:px-12 lg:py-14"
+    >
+      <div
+        class="pointer-events-none absolute inset-0 opacity-[0.07]"
+        aria-hidden="true"
+        style="background-image: radial-gradient(circle at 20% 20%, #155EEF 0%, transparent 45%), radial-gradient(circle at 80% 70%, #EEF4FF 0%, transparent 40%);"
+      />
+
+      <div class="relative">
+        <div class="flex items-center gap-3">
+          <svg viewBox="0 0 32 32" class="w-9 h-9 shrink-0" aria-hidden="true">
+            <path fill="#155EEF" d="M16 2 4 6.5v8.2c0 8 5.1 14.6 12 15.3 6.9-.7 12-7.3 12-15.3V6.5z"/>
+            <path fill="white" d="M16 8.5c-3.6 0-6.6 2.8-6.6 6.3 0 3.4 2.7 6.4 6.6 9.6 3.9-3.2 6.6-6.2 6.6-9.6 0-3.5-3-6.3-6.6-6.3m0 3.4c1.7 0 3.1 1.3 3.1 2.9s-1.4 2.9-3.1 2.9-3.1-1.3-3.1-2.9 1.4-2.9 3.1-2.9"/>
+          </svg>
+          <div class="leading-tight">
+            <p class="font-bold text-lg tracking-tight">VigilCare</p>
+            <p class="text-sm text-white/60">Records</p>
+          </div>
+        </div>
+
+        <div class="mt-10 lg:mt-20 max-w-md">
+          <h1 class="text-[2rem] sm:text-[2.5rem] lg:text-[2.625rem] font-bold leading-tight tracking-tight">
+            Digitize. Verify. Trust.
+          </h1>
+          <p class="mt-4 text-base text-white/70 leading-relaxed">
+            Scanned clinical records become governed, structured data your teams can verify and trust.
+          </p>
+        </div>
       </div>
 
-      <form @submit.prevent="handleLogin" class="space-y-4">
-        <div>
-          <label class="block text-sm font-medium text-gray-700 mb-2">Username</label>
-          <input
-            v-model="username"
-            type="text"
-            class="form-input"
-            placeholder="e.g. intake1, entry1, verifier1"
-            required
-          />
-        </div>
-        <div>
-          <label class="block text-sm font-medium text-gray-700 mb-2">Password</label>
-          <input
-            v-model="password"
-            type="password"
-            class="form-input"
-            required
-          />
+      <!-- Restrained flow hint (desktop) -->
+      <div
+        class="relative hidden lg:flex items-center gap-3 mt-16 text-sm text-white/50"
+        aria-hidden="true"
+      >
+        <span class="rounded-input border border-white/15 bg-white/5 px-3 py-1.5">Paper record</span>
+        <span class="text-white/30">→</span>
+        <span class="rounded-input border border-white/15 bg-white/5 px-3 py-1.5">Verified digital</span>
+      </div>
+    </aside>
+
+    <!-- Auth panel -->
+    <div class="flex flex-1 items-center justify-center px-4 py-10 sm:px-8">
+      <div class="w-full max-w-[440px] bg-surface border border-line rounded-card shadow-card p-6 sm:p-8">
+        <div class="mb-8">
+          <h2 class="text-[1.75rem] font-semibold text-ink-strong leading-tight">Sign in</h2>
+          <p class="mt-2 text-sm text-ink-secondary">
+            Use your VigilCare workstation credentials.
+          </p>
         </div>
 
-        <div v-if="errorMessage" class="text-clinical-danger text-sm">
-          {{ errorMessage }}
-        </div>
+        <form @submit.prevent="handleLogin" class="space-y-5">
+          <div>
+            <label for="login-username" class="block text-sm font-semibold text-ink mb-2">
+              Username
+            </label>
+            <input
+              id="login-username"
+              v-model="username"
+              type="text"
+              autocomplete="username"
+              class="form-input"
+              placeholder="e.g. intake1, entry1, verifier1"
+              required
+            />
+          </div>
+          <div>
+            <label for="login-password" class="block text-sm font-semibold text-ink mb-2">
+              Password
+            </label>
+            <input
+              id="login-password"
+              v-model="password"
+              type="password"
+              autocomplete="current-password"
+              class="form-input"
+              required
+            />
+          </div>
 
-        <button type="submit" class="btn-primary w-full" :disabled="loading">
-          {{ loading ? 'Signing in...' : 'Sign In' }}
-        </button>
-      </form>
+          <div
+            v-if="errorMessage"
+            class="rounded-input bg-clinical-danger-bg border border-clinical-danger/20 px-3 py-2 text-sm text-clinical-danger"
+            role="alert"
+          >
+            {{ errorMessage }}
+          </div>
+
+          <button type="submit" class="btn-primary w-full" :disabled="loading">
+            {{ loading ? 'Signing in...' : 'Sign In' }}
+          </button>
+        </form>
+      </div>
     </div>
   </div>
 </template>
@@ -60,4 +120,4 @@ async function handleLogin() {
     loading.value = false
   }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/vigilcare-records-web/src/views/PatientHistoryView.vue b/vigilcare-records-web/src/views/PatientHistoryView.vue
index 409b7e7..de035a7 100644
--- a/vigilcare-records-web/src/views/PatientHistoryView.vue
+++ b/vigilcare-records-web/src/views/PatientHistoryView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="min-h-screen flex flex-col">
+  <div class="h-full min-h-0 flex flex-col">
     <AppHeader title="Patient History" />
 
     <div class="flex-1 p-4 sm:p-6 lg:p-8 max-w-5xl mx-auto w-full">
diff --git a/vigilcare-records-web/src/views/QueueDashboardView.vue b/vigilcare-records-web/src/views/QueueDashboardView.vue
index 6cd612c..3257c99 100644
--- a/vigilcare-records-web/src/views/QueueDashboardView.vue
+++ b/vigilcare-records-web/src/views/QueueDashboardView.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="min-h-screen lg:h-screen flex flex-col">
-    <AppHeader title="Supervisor Dashboard">
+  <div class="h-full min-h-0 flex flex-col">
+    <AppHeader title="Queue Dashboard">
       <template #actions>
         <button
           type="button"
diff --git a/vigilcare-records-web/src/views/VerificationView.vue b/vigilcare-records-web/src/views/VerificationView.vue
index 5813d80..cd61c61 100644
--- a/vigilcare-records-web/src/views/VerificationView.vue
+++ b/vigilcare-records-web/src/views/VerificationView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="min-h-screen lg:h-screen flex flex-col">
+  <div class="h-full min-h-0 flex flex-col">
     <AppHeader title="Verification">
       <template #subtitle>
         <span v-if="currentBatch" class="text-sm text-gray-500">
diff --git a/vigilcare-records-web/tailwind.config.js b/vigilcare-records-web/tailwind.config.js
index dfe62df..6d0d28d 100644
--- a/vigilcare-records-web/tailwind.config.js
+++ b/vigilcare-records-web/tailwind.config.js
@@ -7,20 +7,35 @@ export default {
   theme: {
     extend: {
       colors: {
+        navy: '#08254A',
         primary: {
-          50:  '#eff9f8',
-          100: '#d9f0ee',
-          300: '#92d2ca',
-          400: '#5cb9ae',
-          500: '#2f9d91',
-          600: '#1f8075',
-          700: '#17655d',
-          800: '#124e48',
+          50:  '#EEF4FF',
+          100: '#D1E0FF',
+          300: '#84ADFF',
+          400: '#528BFF',
+          500: '#155EEF',
+          600: '#155EEF',
+          700: '#0B4FD6',
+          800: '#0A3FAA',
         },
+        surface: '#FFFFFF',
+        canvas: '#F7F9FC',
+        // Flat keys so @apply text-ink / border-line resolve (nested DEFAULT breaks @apply)
+        ink: '#344054',
+        'ink-strong': '#101828',
+        'ink-secondary': '#667085',
+        'ink-disabled': '#98A2B3',
+        line: '#E4E7EC',
+        'line-strong': '#D0D5DD',
         clinical: {
-          safe:    '#2f9e58',
-          warning: '#c98a1b',
-          danger:  '#c2293f',
+          safe:     '#079455',
+          'safe-bg': '#ECFDF3',
+          warning:  '#DC6803',
+          'warning-bg': '#FFFAEB',
+          danger:   '#D92D20',
+          'danger-bg': '#FEF3F2',
+          critical: '#B42318',
+          'critical-bg': '#FEE4E2',
         },
       },
       fontFamily: {
@@ -32,6 +47,16 @@ export default {
           'sans-serif',
         ],
       },
+      borderRadius: {
+        control: '6px',
+        input: '8px',
+        card: '10px',
+        panel: '12px',
+      },
+      boxShadow: {
+        card: '0 1px 2px rgba(16, 24, 40, 0.04)',
+        dialog: '0 8px 24px rgba(16, 24, 40, 0.12)',
+      },
       spacing: {
         18: '4.5rem',
         22: '5.5rem',