diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 24d435e..572f07b 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -12,6 +12,11 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9.1.4
+
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
@@ -19,9 +24,6 @@ jobs:
           cache: 'pnpm'
           cache-dependency-path: '**/pnpm-lock.yaml'
 
-      - name: Setup pnpm
-        run: corepack enable && corepack prepare pnpm@latest --activate
-
       - name: Install dependencies
         run: pnpm install
 
diff --git a/.gitignore b/.gitignore
index 05a1505..d389c59 100644
--- a/.gitignore
+++ b/.gitignore
@@ -28,8 +28,8 @@ dist/
 downloads/
 eggs/
 .eggs/
-lib/
-lib64/
+/lib/
+/lib64/
 parts/
 sdist/
 var/
diff --git a/.hoplite/settings.json b/.hoplite/settings.json
new file mode 100644
index 0000000..a0793d1
--- /dev/null
+++ b/.hoplite/settings.json
@@ -0,0 +1,11 @@
+{
+  "version": 1,
+  "ports": {"preview": 3000, "additional": {}},
+  "scripts": {
+    "setup": {"enabled": true, "command": "pnpm install"},
+    "run": {"enabled": true, "command": "tail -f /dev/null | pnpm --filter web dev"},
+    "archive": {"enabled": true, "command": null},
+    "check": {"enabled": true, "command": "pnpm --filter web exec tsc --noEmit"}
+  },
+  "mcpServers": []
+}
diff --git a/apps/web/src/app/(advisor)/advisor/claims/page.tsx b/apps/web/src/app/(advisor)/advisor/claims/page.tsx
index 0a7783e..d8b02ba 100644
--- a/apps/web/src/app/(advisor)/advisor/claims/page.tsx
+++ b/apps/web/src/app/(advisor)/advisor/claims/page.tsx
@@ -130,11 +130,11 @@ export default function AdvisorClaimsOverviewPage() {
       {/* ── Header ─────────────────────────────────────────────────────────── */}
       <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-b border-slate-900 pb-4">
         <div>
-          <h1 className="text-xl sm:text-2xl font-black text-white tracking-tight flex items-center gap-2.5">
+          <h1 className="text-xl sm:text-2xl font-black text-[#191919] tracking-tight flex items-center gap-2.5">
             <FileText className="w-6 h-6 text-violet-400" />
             <span>Claims Overview</span>
           </h1>
-          <p className="text-xs text-slate-400 mt-1">
+          <p className="text-xs text-[#6E6862] mt-1">
             {isLoading
               ? 'Loading claims across your portfolio…'
               : `${allClaims.length} total claims across ${customers.length} assigned clients.`}
diff --git a/apps/web/src/app/(advisor)/advisor/renewals/page.tsx b/apps/web/src/app/(advisor)/advisor/renewals/page.tsx
index b0d5baf..b516ff6 100644
--- a/apps/web/src/app/(advisor)/advisor/renewals/page.tsx
+++ b/apps/web/src/app/(advisor)/advisor/renewals/page.tsx
@@ -97,8 +97,8 @@ export default function AdvisorRenewalsPage() {
       {/* Header */}
       <div className="flex items-start justify-between gap-4 flex-wrap">
         <div>
-          <h1 className="text-2xl font-extrabold text-white tracking-tight">Renewals Due</h1>
-          <p className="text-slate-400 text-sm mt-1">
+          <h1 className="text-2xl font-extrabold text-[#191919] tracking-tight">Renewals Due</h1>
+          <p className="text-[#6E6862] text-sm mt-1">
             Policies expiring soon across your assigned customers.
           </p>
         </div>
diff --git a/apps/web/src/app/(auth)/login/page.tsx b/apps/web/src/app/(auth)/login/page.tsx
index 174e729..c2503f0 100644
--- a/apps/web/src/app/(auth)/login/page.tsx
+++ b/apps/web/src/app/(auth)/login/page.tsx
@@ -4,7 +4,7 @@ import React, { useState, useEffect, useCallback, Suspense } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import Link from 'next/link';
 import Script from 'next/script';
-import { Mail, Lock, Loader2, ArrowRight, ShieldCheck } from 'lucide-react';
+import { Mail, Lock, Loader2, ArrowRight, ShieldCheck, Eye, EyeOff } from 'lucide-react';
 import { login, loginWithGoogle } from '@/lib/auth';
 
 declare global {
@@ -43,6 +43,7 @@ function LoginForm() {
 
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
   const [loading, setLoading] = useState(false);
   const [googleLoading, setGoogleLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -181,27 +182,30 @@ function LoginForm() {
         </div>
 
         <div className="space-y-1.5">
-          <div className="flex justify-between items-center">
-            <label htmlFor="password" className="block text-xs font-medium text-[#191919]">
-              Password
-            </label>
-            <a href="#" className="text-xs font-medium text-[#6E6862] hover:text-[#191919] transition-colors">
-              Forgot?
-            </a>
-          </div>
+          <label htmlFor="password" className="block text-xs font-medium text-[#191919]">
+            Password
+          </label>
           <div className="relative">
             <span className="absolute inset-y-0 left-0 flex items-center pl-3.5 text-[#8C847B]">
               <Lock className="w-4 h-4" />
             </span>
             <input
               id="password"
-              type="password"
+              type={showPassword ? 'text' : 'password'}
               required
               placeholder="••••••••"
               value={password}
               onChange={(e) => setPassword(e.target.value)}
-              className="w-full pl-10 pr-3.5 py-2.5 bg-[#FAF8F5] border border-[#E2DDD4] rounded-xl text-xs text-[#191919] placeholder:text-[#8C847B] focus:outline-none focus:border-[#191919] focus:ring-1 focus:ring-[#191919] transition-all"
+              className="w-full pl-10 pr-10 py-2.5 bg-[#FAF8F5] border border-[#E2DDD4] rounded-xl text-xs text-[#191919] placeholder:text-[#8C847B] focus:outline-none focus:border-[#191919] focus:ring-1 focus:ring-[#191919] transition-all"
             />
+            <button
+              type="button"
+              onClick={() => setShowPassword((v) => !v)}
+              aria-label={showPassword ? 'Hide password' : 'Show password'}
+              className="absolute inset-y-0 right-0 flex items-center pr-3.5 text-[#8C847B] hover:text-[#191919] transition-colors cursor-pointer"
+            >
+              {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+            </button>
           </div>
         </div>
 
diff --git a/apps/web/src/app/(auth)/register/page.tsx b/apps/web/src/app/(auth)/register/page.tsx
index f1a1049..9f50c71 100644
--- a/apps/web/src/app/(auth)/register/page.tsx
+++ b/apps/web/src/app/(auth)/register/page.tsx
@@ -3,7 +3,7 @@
 import React, { useState } from 'react';
 import { useRouter } from 'next/navigation';
 import Link from 'next/link';
-import { User, Mail, Phone, Lock, Loader2, ArrowRight, ShieldCheck, Check, X } from 'lucide-react';
+import { User, Mail, Phone, Lock, Loader2, ArrowRight, ShieldCheck, Check, X, Eye, EyeOff } from 'lucide-react';
 import { api } from '@/lib/auth';
 
 export default function RegisterPage() {
@@ -13,6 +13,7 @@ export default function RegisterPage() {
   const [email, setEmail] = useState('');
   const [phone, setPhone] = useState('');
   const [password, setPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
   const [role, setRole] = useState('customer');
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -208,13 +209,21 @@ export default function RegisterPage() {
                     </span>
                     <input
                       id="password"
-                      type="password"
+                      type={showPassword ? 'text' : 'password'}
                       required
                       placeholder="••••••••"
                       value={password}
                       onChange={(e) => setPassword(e.target.value)}
-                      className="w-full pl-10 pr-3.5 py-2.5 bg-[#FAF8F5] border border-[#E2DDD4] rounded-xl text-xs text-[#191919] placeholder:text-[#8C847B] focus:outline-none focus:border-[#191919] focus:ring-1 focus:ring-[#191919] transition-all"
+                      className="w-full pl-10 pr-10 py-2.5 bg-[#FAF8F5] border border-[#E2DDD4] rounded-xl text-xs text-[#191919] placeholder:text-[#8C847B] focus:outline-none focus:border-[#191919] focus:ring-1 focus:ring-[#191919] transition-all"
                     />
+                    <button
+                      type="button"
+                      onClick={() => setShowPassword((v) => !v)}
+                      aria-label={showPassword ? 'Hide password' : 'Show password'}
+                      className="absolute inset-y-0 right-0 flex items-center pr-3.5 text-[#8C847B] hover:text-[#191919] transition-colors cursor-pointer"
+                    >
+                      {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                    </button>
                   </div>
 
                   {password && (
diff --git a/apps/web/src/app/(dashboard)/claims/[id]/page.tsx b/apps/web/src/app/(dashboard)/claims/[id]/page.tsx
index 6f7fc05..398c0aa 100644
--- a/apps/web/src/app/(dashboard)/claims/[id]/page.tsx
+++ b/apps/web/src/app/(dashboard)/claims/[id]/page.tsx
@@ -53,8 +53,8 @@ export default function ClaimDetailPage() {
         <div className="w-12 h-12 rounded-2xl bg-rose-500/10 text-rose-500 flex items-center justify-center border border-rose-500/10 mx-auto">
           <FileQuestion className="w-6 h-6" />
         </div>
-        <h3 className="text-base font-bold text-white">Claim Not Found</h3>
-        <p className="text-xs text-slate-400 max-w-sm mx-auto">
+        <h3 className="text-base font-bold text-[#191919]">Claim Not Found</h3>
+        <p className="text-xs text-[#6E6862] max-w-sm mx-auto">
           The claim you are looking for does not exist or you do not have permission to view it.
         </p>
         <button onClick={() => router.push('/claims')} className="text-xs font-semibold text-blue-400 hover:underline">
diff --git a/apps/web/src/app/(dashboard)/claims/new/page.tsx b/apps/web/src/app/(dashboard)/claims/new/page.tsx
index 3e8a18b..070d4f1 100644
--- a/apps/web/src/app/(dashboard)/claims/new/page.tsx
+++ b/apps/web/src/app/(dashboard)/claims/new/page.tsx
@@ -224,11 +224,11 @@ export default function NewClaimPage() {
       
       {/* Page Header */}
       <div>
-        <h1 className="text-xl sm:text-2xl font-black text-white tracking-tight flex items-center gap-2.5">
+        <h1 className="text-xl sm:text-2xl font-black text-[#191919] tracking-tight flex items-center gap-2.5">
           <FilePlus className="w-6 h-6 text-[#16A34A]" />
           <span>File a Claim</span>
         </h1>
-        <p className="text-xs text-slate-400 mt-1">Submit your vehicle accident incident information and images to begin claim triage review.</p>
+        <p className="text-xs text-[#6E6862] mt-1">Submit your vehicle accident incident information and images to begin claim triage review.</p>
       </div>
 
       {/* Steps Indicator Progress Stepper */}
@@ -255,7 +255,7 @@ export default function NewClaimPage() {
               {step > s.idx ? '✓' : s.idx}
             </div>
             <span className={`text-[10px] font-bold uppercase tracking-wider transition-colors duration-300 ${
-              step >= s.idx ? 'text-white' : 'text-slate-500'
+              step >= s.idx ? 'text-[#191919]' : 'text-slate-500'
             }`}>
               {s.label}
             </span>
diff --git a/apps/web/src/app/(dashboard)/claims/page.tsx b/apps/web/src/app/(dashboard)/claims/page.tsx
index ff3371f..c121709 100644
--- a/apps/web/src/app/(dashboard)/claims/page.tsx
+++ b/apps/web/src/app/(dashboard)/claims/page.tsx
@@ -86,7 +86,11 @@ export default function ClaimsPage() {
         <EmptyState
           icon={FileQuestion}
           title="No claims matching this category"
-          description={`There are currently no claims with status '${activeTab.replace('_', ' ')}'.`}
+          description={
+            activeTab === 'all'
+              ? "You haven't filed any claims yet. File a claim to start tracking AI triage, review, and settlement here."
+              : `There are currently no claims with status '${activeTab.replace('_', ' ')}'.`
+          }
           action={
             activeTab === 'all'
               ? {
diff --git a/apps/web/src/app/(dashboard)/dashboard/my-advisor/page.tsx b/apps/web/src/app/(dashboard)/dashboard/my-advisor/page.tsx
index 9a6dc9f..9e4bf32 100644
--- a/apps/web/src/app/(dashboard)/dashboard/my-advisor/page.tsx
+++ b/apps/web/src/app/(dashboard)/dashboard/my-advisor/page.tsx
@@ -5,9 +5,7 @@ import React, { useState } from 'react';
 import { useQuery, useMutation } from '@tanstack/react-query';
 import {
   User,
-  Send,
   Loader2,
-  Calendar,
   Ban,
   Users,
   Mail,
diff --git a/apps/web/src/app/(dashboard)/help/page.tsx b/apps/web/src/app/(dashboard)/help/page.tsx
index b38dcbc..85d7b38 100644
--- a/apps/web/src/app/(dashboard)/help/page.tsx
+++ b/apps/web/src/app/(dashboard)/help/page.tsx
@@ -38,11 +38,11 @@ export default function HelpPage() {
       
       {/* Header Block */}
       <div>
-        <h1 className="text-xl sm:text-2xl font-black text-white tracking-tight flex items-center gap-2.5">
+        <h1 className="text-xl sm:text-2xl font-black text-[#191919] tracking-tight flex items-center gap-2.5">
           <HelpCircle className="w-6 h-6 text-[#1B4FD8]" />
           <span>Support Co-Pilot & Help Centre</span>
         </h1>
-        <p className="text-xs text-slate-400 mt-1">
+        <p className="text-xs text-[#6E6862] mt-1">
           Learn about automatic claims parsing, AI assessment indices, and co-pilot guidelines.
         </p>
       </div>
@@ -53,7 +53,7 @@ export default function HelpPage() {
         <div className="lg:col-span-2 space-y-4">
           <div className="flex items-center gap-2 mb-2">
             <BookOpen className="w-4.5 h-4.5 text-blue-400" />
-            <h2 className="font-extrabold text-sm uppercase tracking-widest text-slate-400">Frequently Asked Questions</h2>
+            <h2 className="font-extrabold text-sm uppercase tracking-widest text-[#6E6862]">Frequently Asked Questions</h2>
           </div>
 
           <div className="space-y-3.5">
@@ -73,7 +73,7 @@ export default function HelpPage() {
         <div className="space-y-4">
           <div className="flex items-center gap-2 mb-2">
             <MessageSquare className="w-4.5 h-4.5 text-[#16A34A]" />
-            <h2 className="font-extrabold text-sm uppercase tracking-widest text-slate-400">Support Contacts</h2>
+            <h2 className="font-extrabold text-sm uppercase tracking-widest text-[#6E6862]">Support Contacts</h2>
           </div>
 
           <div className="backdrop-blur-md bg-slate-900/60 border border-slate-800 rounded-2xl p-5 space-y-4">
diff --git a/apps/web/src/app/(dashboard)/policies/upload-modal.tsx b/apps/web/src/app/(dashboard)/policies/upload-modal.tsx
index f60f8e9..a19b74e 100644
--- a/apps/web/src/app/(dashboard)/policies/upload-modal.tsx
+++ b/apps/web/src/app/(dashboard)/policies/upload-modal.tsx
@@ -96,6 +96,7 @@ export function UploadModal({ isOpen, onClose, onSuccess }: UploadModalProps) {
 
       onSuccess();
       onClose();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (err: any) {
       setUploading(false);
       setProgress(0);
diff --git a/apps/web/src/app/(insurer)/insurer/claims/[id]/page.tsx b/apps/web/src/app/(insurer)/insurer/claims/[id]/page.tsx
index 2ca6c71..9ff449b 100644
--- a/apps/web/src/app/(insurer)/insurer/claims/[id]/page.tsx
+++ b/apps/web/src/app/(insurer)/insurer/claims/[id]/page.tsx
@@ -452,7 +452,7 @@ export default function InsurerClaimReviewPage() {
         </button>
         <div className="flex-1">
           <div className="flex items-center gap-3 flex-wrap">
-            <h1 className="text-xl font-extrabold text-white tracking-tight">{claim.claim_number}</h1>
+            <h1 className="text-xl font-extrabold text-[#191919] tracking-tight">{claim.claim_number}</h1>
             <StatusBadge status={claim.status} />
           </div>
           <p className="text-xs text-slate-500 mt-0.5">
diff --git a/apps/web/src/app/(insurer)/insurer/claims/page.tsx b/apps/web/src/app/(insurer)/insurer/claims/page.tsx
index 8bbf7da..be8f55b 100644
--- a/apps/web/src/app/(insurer)/insurer/claims/page.tsx
+++ b/apps/web/src/app/(insurer)/insurer/claims/page.tsx
@@ -184,8 +184,8 @@ function InsurerClaimsQueueContent() {
     <div className="space-y-6 animate-in fade-in duration-300">
       {/* Header */}
       <div>
-        <h1 className="text-2xl font-extrabold text-white tracking-tight">Claim Queue</h1>
-        <p className="text-slate-400 text-sm mt-1">All submitted and active claims awaiting review.</p>
+        <h1 className="text-2xl font-extrabold text-[#191919] tracking-tight">Claim Queue</h1>
+        <p className="text-[#6E6862] text-sm mt-1">All submitted and active claims awaiting review.</p>
       </div>
 
       {/* Filters */}
diff --git a/apps/web/src/app/(insurer)/insurer/reports/page.tsx b/apps/web/src/app/(insurer)/insurer/reports/page.tsx
index 7815e0b..62109ad 100644
--- a/apps/web/src/app/(insurer)/insurer/reports/page.tsx
+++ b/apps/web/src/app/(insurer)/insurer/reports/page.tsx
@@ -6,8 +6,8 @@ export default function InsurerReportsPage() {
   return (
     <div className="space-y-6 animate-in fade-in duration-300">
       <div>
-        <h1 className="text-2xl font-extrabold text-white tracking-tight">Reports</h1>
-        <p className="text-slate-400 text-sm mt-1">Analytics and performance metrics for claims processing.</p>
+        <h1 className="text-2xl font-extrabold text-[#191919] tracking-tight">Reports</h1>
+        <p className="text-[#6E6862] text-sm mt-1">Analytics and performance metrics for claims processing.</p>
       </div>
 
       {/* Coming Soon */}
@@ -22,8 +22,8 @@ export default function InsurerReportsPage() {
         </div>
 
         <div className="text-center space-y-2 max-w-sm">
-          <h2 className="text-xl font-extrabold text-white">Coming Soon</h2>
-          <p className="text-slate-400 text-sm leading-relaxed">
+          <h2 className="text-xl font-extrabold text-[#191919]">Coming Soon</h2>
+          <p className="text-[#6E6862] text-sm leading-relaxed">
             The reports module is under development. It will include claim settlement rates,
             officer performance metrics, risk distribution charts, and monthly trend analysis.
           </p>
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index ab85801..74669c3 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -9,9 +9,7 @@ import {
   ArrowRight,
   Eye,
   Check,
-  Layers,
   Sparkles,
-  ChevronRight,
 } from 'lucide-react';
 
 export default function Home() {
diff --git a/apps/web/src/components/layouts/AppShell.tsx b/apps/web/src/components/layouts/AppShell.tsx
index 0464e25..7a2de90 100644
--- a/apps/web/src/components/layouts/AppShell.tsx
+++ b/apps/web/src/components/layouts/AppShell.tsx
@@ -32,7 +32,7 @@ export function AppShell({
   brandIcon: BrandIcon,
 }: AppShellProps) {
   const pathname = usePathname();
-  const { user, sidebarOpen, setSidebarOpen, toggleSidebar, syncUser, toast } = useAppStore();
+  const { user, sidebarOpen, setSidebarOpen, toggleSidebar, syncUser } = useAppStore();
 
   useEffect(() => {
     syncUser();
@@ -43,24 +43,6 @@ export function AppShell({
 
   return (
     <div className="min-h-screen bg-[#FAF8F5] text-[#191919] flex flex-col md:flex-row relative selection:bg-[#191919] selection:text-[#FAF8F5]">
-      {/* Toast Notification Container */}
-      {toast.message && (
-        <div className="fixed top-5 right-5 z-50 animate-in fade-in slide-in-from-top-4 duration-300">
-          <div
-            className={cn(
-              'px-4 py-3 rounded-xl border text-xs font-medium shadow-md flex items-center gap-2 max-w-md',
-              toast.type === 'error'
-                ? 'bg-[#FDF2F0] border-[#F2C0B7] text-[#B83A26]'
-                : toast.type === 'info'
-                ? 'bg-[#F0F5FD] border-[#B7D2F2] text-[#205295]'
-                : 'bg-[#F1F8F1] border-[#C2E4C2] text-[#2E7D32]'
-            )}
-          >
-            <span>{toast.message}</span>
-          </div>
-        </div>
-      )}
-
       {/* Mobile Top Navigation Header */}
       <header className="md:hidden sticky top-0 z-40 w-full h-16 bg-[#FAF8F5]/90 backdrop-blur-md border-b border-[#E2DDD4] px-4 flex items-center justify-between">
         <div className="flex items-center gap-2.5">
@@ -74,6 +56,8 @@ export function AppShell({
         </div>
         <button
           onClick={toggleSidebar}
+          aria-label={sidebarOpen ? 'Close navigation menu' : 'Open navigation menu'}
+          aria-expanded={sidebarOpen}
           className="p-2 text-[#6E6862] hover:text-[#191919] transition-colors rounded-lg hover:bg-[#F1EDE4]"
         >
           {sidebarOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
@@ -104,6 +88,7 @@ export function AppShell({
           </div>
           <button
             onClick={() => setSidebarOpen(false)}
+            aria-label="Close navigation menu"
             className="md:hidden p-1.5 text-[#6E6862] hover:text-[#191919] rounded-lg hover:bg-[#F1EDE4]"
           >
             <X className="w-4 h-4" />
diff --git a/apps/web/src/components/providers.tsx b/apps/web/src/components/providers.tsx
index 3897f1f..461b522 100644
--- a/apps/web/src/components/providers.tsx
+++ b/apps/web/src/components/providers.tsx
@@ -23,8 +23,11 @@ export default function Providers({ children }: { children: React.ReactNode }) {
       {children}
 
       {/* Global Custom Toast System */}
-      {toast.message && (
-        <div className="fixed bottom-5 right-5 z-[9999] max-w-sm w-full bg-slate-900/90 border border-slate-800 text-white rounded-2xl shadow-2xl p-4 flex items-start gap-3 animate-in slide-in-from-bottom duration-300 backdrop-blur-xl">
+      {toast?.message && (
+        <div
+          role={toast.type === 'error' ? 'alert' : 'status'}
+          className="fixed bottom-5 right-5 z-[9999] max-w-sm w-full bg-slate-900/90 border border-slate-800 text-white rounded-2xl shadow-2xl p-4 flex items-start gap-3 animate-in slide-in-from-bottom duration-300 backdrop-blur-xl"
+        >
           <div className="mt-0.5 shrink-0">
             {toast.type === 'success' && <CheckCircle className="w-5 h-5 text-emerald-500" />}
             {toast.type === 'error' && <AlertTriangle className="w-5 h-5 text-rose-500" />}
@@ -33,7 +36,11 @@ export default function Providers({ children }: { children: React.ReactNode }) {
           <div className="flex-1 text-sm font-medium pr-2 break-words">
             {toast.message}
           </div>
-          <button onClick={hideToast} className="text-slate-500 hover:text-slate-300 transition-colors shrink-0">
+          <button
+            onClick={hideToast}
+            aria-label="Dismiss notification"
+            className="text-slate-500 hover:text-slate-300 transition-colors shrink-0"
+          >
             <X className="w-4 h-4" />
           </button>
         </div>
diff --git a/apps/web/src/lib/api-client.ts b/apps/web/src/lib/api-client.ts
new file mode 100644
index 0000000..988ac06
--- /dev/null
+++ b/apps/web/src/lib/api-client.ts
@@ -0,0 +1,186 @@
+'use client';
+
+import { api } from '@/lib/auth';
+import type {
+  PolicyDetail,
+  PolicyUploadResponse,
+  BackendClaim,
+  ClaimDetail,
+  ClaimCreateInput,
+  ClaimCreateResponse,
+  ClaimSubmitResponse,
+  ClaimImage,
+  ClaimStatus,
+  ClaimType,
+  RiskLevel,
+  InsurerQueueFilters,
+  AITriageAssessment,
+  AuditLog,
+  ChatMessage,
+  ConversationResponse,
+  AdvisorCustomer,
+  LinkedAdvisor,
+  ConsentRecord,
+  DataExportRequest,
+  DataDeletionRequest,
+} from '@coverai/shared-types';
+
+// Re-exported so pages import domain types from a single module.
+export type {
+  PolicyDetail,
+  BackendClaim,
+  ClaimDetail,
+  ClaimImage,
+  ClaimStatus,
+  ClaimType,
+  RiskLevel,
+  InsurerQueueFilters,
+  AITriageAssessment,
+  AuditLog,
+  ChatMessage,
+  AdvisorCustomer,
+  LinkedAdvisor,
+  ConsentRecord,
+  DataExportRequest,
+  DataDeletionRequest,
+};
+
+// ── Policies ────────────────────────────────────────────────────────────────
+
+export const getPolicies = (): Promise<PolicyDetail[]> =>
+  api.get('/policies').then((r) => r.data);
+
+export const getPolicy = (id: string): Promise<PolicyDetail> =>
+  api.get(`/policies/${id}`).then((r) => r.data);
+
+export const uploadPolicy = (
+  file: File,
+  vehicleReg: string,
+  insurerName: string,
+  onProgress?: (event: { loaded: number; total?: number }) => void
+): Promise<PolicyUploadResponse> => {
+  const form = new FormData();
+  form.append('file', file);
+  form.append('vehicle_registration', vehicleReg);
+  form.append('insurer_name', insurerName);
+  return api
+    .post('/policies/upload', form, {
+      headers: { 'Content-Type': 'multipart/form-data' },
+      onUploadProgress: (event) => {
+        if (onProgress && event.total) {
+          onProgress({ loaded: event.loaded, total: event.total });
+        }
+      },
+    })
+    .then((r) => r.data);
+};
+
+// ── Claims ──────────────────────────────────────────────────────────────────
+
+export const getClaims = (status?: string): Promise<BackendClaim[]> =>
+  api.get('/claims', { params: status ? { status } : undefined }).then((r) => r.data);
+
+export const getClaim = (id: string): Promise<ClaimDetail> =>
+  api.get(`/claims/${id}`).then((r) => r.data);
+
+export const createClaim = (input: ClaimCreateInput): Promise<ClaimCreateResponse> =>
+  api.post('/claims', input).then((r) => r.data);
+
+export const submitClaim = (id: string): Promise<ClaimSubmitResponse> =>
+  api.post(`/claims/${id}/submit`).then((r) => r.data);
+
+export const uploadClaimImages = (claimId: string, files: File[]): Promise<unknown> => {
+  const form = new FormData();
+  files.forEach((f) => form.append('files', f));
+  return api
+    .post(`/claims/${claimId}/images`, form, {
+      headers: { 'Content-Type': 'multipart/form-data' },
+    })
+    .then((r) => r.data);
+};
+
+// ── Conversations (AI co-pilot) ─────────────────────────────────────────────
+
+export const getPolicyConversation = (policyId: string): Promise<ConversationResponse> =>
+  api.get(`/conversations/policy/${policyId}`).then((r) => r.data);
+
+export const createConversation = (policyId: string): Promise<ConversationResponse> =>
+  api.post('/conversations', { policy_id: policyId }).then((r) => r.data);
+
+export const getConversationMessages = (conversationId: string): Promise<ChatMessage[]> =>
+  api.get(`/conversations/${conversationId}/messages`).then((r) => r.data);
+
+// ── Advisors ────────────────────────────────────────────────────────────────
+
+export const getAdvisorCustomers = (): Promise<AdvisorCustomer[]> =>
+  api.get('/advisors/my-customers').then((r) => r.data);
+
+export const getAdvisorCustomerPolicies = (customerId: string): Promise<PolicyDetail[]> =>
+  api.get(`/advisors/my-customers/${customerId}/policies`).then((r) => r.data);
+
+export const getAdvisorCustomerClaims = (customerId: string): Promise<BackendClaim[]> =>
+  api.get(`/advisors/my-customers/${customerId}/claims`).then((r) => r.data);
+
+export const getMyAdvisors = (): Promise<LinkedAdvisor[]> =>
+  api.get('/advisors/my-advisors').then((r) => r.data);
+
+export const createAdvisorAssignment = (advisorEmail: string): Promise<Pick<LinkedAdvisor, 'assignment_id' | 'advisor_name' | 'advisor_email'>> =>
+  api.post('/advisors/assignments', { advisor_email: advisorEmail }).then((r) => r.data);
+
+export const deleteAdvisorAssignment = (assignmentId: string): Promise<{ message: string }> =>
+  api.delete(`/advisors/assignments/${assignmentId}`).then((r) => r.data);
+
+// ── Insurer claim queue / review ────────────────────────────────────────────
+
+export const getInsurerClaimsQueue = (
+  filters?: InsurerQueueFilters
+): Promise<BackendClaim[]> =>
+  api.get('/insurer/claims', { params: filters }).then((r) => r.data);
+
+export const selfAssignClaim = (claimId: string): Promise<{
+  claim_id: string;
+  claim_number: string;
+  assigned_officer_id: string;
+  status: ClaimStatus;
+  message: string;
+}> => api.post(`/insurer/claims/${claimId}/assign`).then((r) => r.data);
+
+export const patchClaimStatus = (
+  claimId: string,
+  body: { status: ClaimStatus; remarks: string; approved_amount?: number }
+): Promise<{ claim_id: string; status: ClaimStatus; message: string }> =>
+  api.patch(`/insurer/claims/${claimId}/status`, body).then((r) => r.data);
+
+export const getSystemAuditLogs = (params?: {
+  search?: string;
+  action?: string;
+  resource_type?: string;
+  page?: number;
+  limit?: number;
+}): Promise<AuditLog[]> => api.get('/admin/audit-logs', { params }).then((r) => r.data);
+
+// ── DPDP consent & data rights ──────────────────────────────────────────────
+
+export const getConsentRecords = (): Promise<ConsentRecord[]> =>
+  api.get('/consent/').then((r) => r.data);
+
+export const updateConsentRecord = (
+  consentType: string,
+  granted: boolean
+): Promise<{ status: string; message: string }> =>
+  api.patch(`/consent/${consentType}`, { granted }).then((r) => r.data);
+
+export const requestDataExport = (): Promise<{ request_id: string; message: string }> =>
+  api.post('/consent/data-export-request').then((r) => r.data);
+
+export const requestDataDeletion = (): Promise<{ request_id: string; message: string }> =>
+  api.post('/consent/data-deletion-request').then((r) => r.data);
+
+export const cancelDataDeletion = (): Promise<{ status: string; message: string }> =>
+  api.post('/consent/data-deletion-request/cancel').then((r) => r.data);
+
+export const getDataExportRequests = (): Promise<DataExportRequest[]> =>
+  api.get('/consent/data-export-requests').then((r) => r.data);
+
+export const getDataDeletionRequests = (): Promise<DataDeletionRequest[]> =>
+  api.get('/consent/data-deletion-requests').then((r) => r.data);
diff --git a/apps/web/src/lib/auth.ts b/apps/web/src/lib/auth.ts
new file mode 100644
index 0000000..b855c68
--- /dev/null
+++ b/apps/web/src/lib/auth.ts
@@ -0,0 +1,79 @@
+'use client';
+
+import axios from 'axios';
+
+const API_BASE =
+  process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000/api/v1';
+
+export const api = axios.create({
+  baseURL: API_BASE,
+  withCredentials: true,
+  headers: { 'Content-Type': 'application/json' },
+});
+
+export interface DecodedUser {
+  id: string;
+  email: string;
+  role: string;
+  full_name: string;
+  avatar_url?: string | null;
+  phone?: string | null;
+  is_active?: boolean;
+  is_verified?: boolean;
+}
+
+const USER_STORAGE_KEY = 'user_data';
+
+export interface AuthResponse {
+  token_type: 'bearer';
+  user: DecodedUser;
+}
+
+function persistUser(user: DecodedUser | null): void {
+  if (user) {
+    try {
+      localStorage.setItem(USER_STORAGE_KEY, JSON.stringify(user));
+    } catch {
+      // localStorage unavailable (private mode) — session still works via HttpOnly cookie
+    }
+  } else {
+    try {
+      localStorage.removeItem(USER_STORAGE_KEY);
+    } catch {
+      // ignore
+    }
+  }
+}
+
+export async function login(email: string, password: string): Promise<DecodedUser> {
+  const { data } = await api.post<AuthResponse>('/auth/login', { email, password });
+  persistUser(data.user);
+  return data.user;
+}
+
+export async function loginWithGoogle(credential: string): Promise<DecodedUser> {
+  const { data } = await api.post<AuthResponse>('/auth/google', { id_token: credential });
+  persistUser(data.user);
+  return data.user;
+}
+
+export async function logout(): Promise<void> {
+  try {
+    await api.post('/auth/logout');
+  } catch {
+    // Logout must always complete locally even if the API is unreachable.
+  } finally {
+    persistUser(null);
+  }
+}
+
+export function getUser(): DecodedUser | null {
+  try {
+    const raw = localStorage.getItem(USER_STORAGE_KEY);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw) as DecodedUser;
+    return parsed && typeof parsed === 'object' && typeof parsed.role === 'string' ? parsed : null;
+  } catch {
+    return null;
+  }
+}
diff --git a/apps/web/src/lib/store.ts b/apps/web/src/lib/store.ts
new file mode 100644
index 0000000..cc9a258
--- /dev/null
+++ b/apps/web/src/lib/store.ts
@@ -0,0 +1,61 @@
+'use client';
+
+import { create } from 'zustand';
+import { getUser, DecodedUser } from '@/lib/auth';
+
+export type ToastType = 'success' | 'error' | 'info';
+
+export interface ToastState {
+  message: string;
+  type: ToastType;
+}
+
+interface AppState {
+  user: DecodedUser | null;
+  sidebarOpen: boolean;
+  toast: ToastState | null;
+  setUser: (user: DecodedUser | null) => void;
+  setSidebarOpen: (open: boolean) => void;
+  toggleSidebar: () => void;
+  syncUser: () => void;
+  showToast: (message: string, type?: ToastType) => void;
+  hideToast: () => void;
+}
+
+let toastTimer: ReturnType<typeof setTimeout> | undefined;
+
+export const useAppStore = create<AppState>((set, get) => ({
+  user: null,
+  sidebarOpen: false,
+  toast: null,
+
+  setUser: (user) => set({ user }),
+
+  setSidebarOpen: (open) => set({ sidebarOpen: open }),
+
+  toggleSidebar: () => set((s) => ({ sidebarOpen: !s.sidebarOpen })),
+
+  syncUser: () => {
+    const current = getUser();
+    if (current?.id !== get().user?.id) {
+      set({ user: current });
+    }
+  },
+
+  showToast: (message, type = 'info') => {
+    if (toastTimer) {
+      clearTimeout(toastTimer);
+    }
+    set({ toast: { message, type } });
+    toastTimer = setTimeout(() => {
+      set({ toast: null });
+    }, 4000);
+  },
+
+  hideToast: () => {
+    if (toastTimer) {
+      clearTimeout(toastTimer);
+    }
+    set({ toast: null });
+  },
+}));