diff --git a/src/components/LeadVerification/AssignLeadModal.jsx b/src/components/LeadVerification/AssignLeadModal.jsx
new file mode 100644
index 0000000..bd444b5
--- /dev/null
+++ b/src/components/LeadVerification/AssignLeadModal.jsx
@@ -0,0 +1,159 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { X, User, Repeat, UserPlus, Loader2 } from 'lucide-react';
+import { useMockStore } from '../../data/mockStore';
+import Select from '../ui/Select';
+
+// One modal handles both "Assign" and "Reassign" — `mode` differentiates copy
+// and target action. `mode='reassign'` is the In Progress flow.
+// Assignee list is sourced from `users` (store key) filtered to role === 'ADMIN'.
+// Field names match our store shape: assigneeId / assigneeName (not assignedToId/assignedToName).
+const AssignLeadModal = ({ isOpen, onClose, lead, mode = 'assign' }) => {
+    const { users, assignLeadVerification, reassignLeadVerification } = useMockStore();
+    const [selectedId, setSelectedId] = useState('');
+    const [submitting, setSubmitting] = useState(false);
+
+    const isReassign = mode === 'reassign';
+
+    // Build the assignee list from admin users, excluding the currently assigned one.
+    const adminUsers = useMemo(
+        () => (users || []).filter(u => u.role === 'ADMIN'),
+        [users],
+    );
+
+    const available = useMemo(
+        () => adminUsers.filter(p => p.id !== lead?.assigneeId),
+        [adminUsers, lead],
+    );
+
+    useEffect(() => {
+        if (isOpen) {
+            setSelectedId('');
+            setSubmitting(false);
+        }
+    }, [isOpen]);
+
+    useEffect(() => {
+        if (!isOpen) return;
+        const onKey = (e) => { if (e.key === 'Escape') onClose(); };
+        const prevOverflow = document.body.style.overflow;
+        document.body.style.overflow = 'hidden';
+        window.addEventListener('keydown', onKey);
+        return () => {
+            document.body.style.overflow = prevOverflow;
+            window.removeEventListener('keydown', onKey);
+        };
+    }, [isOpen, onClose]);
+
+    if (!isOpen || !lead) return null;
+
+    const handleConfirm = async () => {
+        if (!selectedId) return;
+        const target = adminUsers.find(a => a.id === selectedId);
+        if (!target) return;
+        setSubmitting(true);
+        await new Promise(r => setTimeout(r, 250));
+        if (isReassign) reassignLeadVerification(lead.id, target.id, target.name);
+        else assignLeadVerification(lead.id, target.id, target.name);
+        setSubmitting(false);
+        onClose();
+    };
+
+    const Icon = isReassign ? Repeat : UserPlus;
+    const headerIconCls = isReassign
+        ? 'bg-purple-500/10 text-purple-500'
+        : 'bg-blue-500/10 text-blue-500';
+
+    return createPortal(
+        <div className="fixed inset-0 z-[9999] flex items-center justify-center p-4" role="dialog" aria-modal="true">
+            <div
+                className="absolute inset-0 bg-black/60 backdrop-blur-sm"
+                onClick={submitting ? undefined : onClose}
+            />
+            <div className="relative w-full max-w-md bg-white dark:bg-[#121214] rounded-2xl shadow-2xl border border-zinc-200 dark:border-white/10 overflow-hidden animate-in zoom-in-95 duration-200">
+                <div className="px-5 py-4 border-b border-zinc-200 dark:border-white/10 flex items-center justify-between bg-zinc-50/50 dark:bg-white/5">
+                    <div className="flex items-center gap-3">
+                        <div className={`p-2 rounded-xl ${headerIconCls}`}>
+                            <Icon size={18} />
+                        </div>
+                        <h2 className="text-base font-bold text-zinc-900 dark:text-white uppercase tracking-wider">
+                            {isReassign ? 'Reassign Lead' : 'Assign Lead'}
+                        </h2>
+                    </div>
+                    <button
+                        onClick={onClose}
+                        disabled={submitting}
+                        aria-label="Close"
+                        className="p-2 rounded-lg bg-zinc-100 dark:bg-white/10 text-zinc-500 hover:text-red-500 transition-colors disabled:opacity-50"
+                    >
+                        <X size={18} />
+                    </button>
+                </div>
+
+                <div className="p-5 space-y-4">
+                    <div className="text-sm text-zinc-600 dark:text-zinc-400">
+                        {isReassign ? 'Reassign ' : 'Assign '}
+                        <span className="font-bold text-zinc-900 dark:text-white">{lead.customerName}</span>
+                        {' '}({lead.leadId})
+                        {lead.assigneeName && (
+                            <>
+                                {' currently with '}
+                                <span className="font-bold text-zinc-900 dark:text-white">{lead.assigneeName}</span>
+                            </>
+                        )}
+                        .
+                    </div>
+
+                    <div className="space-y-1.5">
+                        <label
+                            htmlFor="lv-assignee"
+                            className="text-xs font-bold uppercase tracking-wider text-zinc-600 dark:text-zinc-400 flex items-center gap-1.5"
+                        >
+                            <User size={12} /> Assignee
+                        </label>
+                        <Select
+                            id="lv-assignee"
+                            ariaLabel="Assignee"
+                            value={selectedId}
+                            onChange={setSelectedId}
+                            placeholder="Select an assignee…"
+                            options={available.map(a => ({ value: a.id, label: `${a.name} — ${a.role}` }))}
+                        />
+                        {available.length === 0 && (
+                            <p className="text-xs text-zinc-500 mt-1">
+                                No other assignees available.
+                            </p>
+                        )}
+                    </div>
+                </div>
+
+                <div className="px-5 py-4 border-t border-zinc-200 dark:border-white/10 bg-zinc-50 dark:bg-white/5 flex justify-end gap-2">
+                    <button
+                        type="button"
+                        onClick={onClose}
+                        disabled={submitting}
+                        className="px-4 py-2 text-sm font-bold rounded-xl border border-zinc-200 dark:border-white/10 text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-white/5 transition-colors disabled:opacity-50"
+                    >
+                        Cancel
+                    </button>
+                    <button
+                        type="button"
+                        onClick={handleConfirm}
+                        disabled={!selectedId || submitting}
+                        className={`inline-flex items-center gap-2 px-5 py-2 text-sm font-bold rounded-xl text-white shadow-lg transition-all disabled:opacity-50 ${
+                            isReassign
+                                ? 'bg-purple-600 hover:bg-purple-500 shadow-purple-500/20'
+                                : 'bg-blue-600 hover:bg-blue-500 shadow-blue-500/20'
+                        }`}
+                    >
+                        {submitting && <Loader2 size={14} className="animate-spin" />}
+                        {isReassign ? 'Reassign' : 'Assign'}
+                    </button>
+                </div>
+            </div>
+        </div>,
+        document.body,
+    );
+};
+
+export default AssignLeadModal;
diff --git a/src/components/LeadVerification/LeadActionsMenu.jsx b/src/components/LeadVerification/LeadActionsMenu.jsx
new file mode 100644
index 0000000..829e191
--- /dev/null
+++ b/src/components/LeadVerification/LeadActionsMenu.jsx
@@ -0,0 +1,76 @@
+import React from 'react';
+import { ShieldCheck, ShieldX, UserPlus, Repeat, Clock, Eye } from 'lucide-react';
+
+const MenuItem = ({ icon: Icon, children, onClick, disabled, variant }) => (
+    <button
+        type="button"
+        onClick={onClick}
+        disabled={disabled}
+        className={`w-full flex items-center gap-2 px-3 py-2 text-xs font-semibold transition-colors disabled:opacity-40 disabled:cursor-not-allowed text-left ${
+            variant === 'success'
+                ? 'text-emerald-600 dark:text-emerald-400 hover:bg-emerald-500/10'
+                : variant === 'danger'
+                ? 'text-red-600 dark:text-red-400 hover:bg-red-500/10'
+                : 'text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-white/5'
+        }`}
+    >
+        <Icon size={13} className="shrink-0" />
+        {children}
+    </button>
+);
+
+// Reused both by table row's dropdown and the mobile card's stack of buttons.
+// `canManage` mirrors the existing PermissionGate pattern (leads:verify).
+// Field names match our store shape: assigneeId (not assignedToId).
+export const LeadActionsMenu = ({
+    lead,
+    canManage,
+    onView,
+    onAssign,
+    onReassign,
+    onVerify,
+    onUnverify,
+    onMarkPending,
+}) => {
+    const status = lead.status;
+    const isVerified   = status === 'Verified';
+    const isUnverified = status === 'Unverified';
+    const isInProgress = status === 'In Progress';
+    const hasAssignee  = Boolean(lead.assigneeId);
+
+    return (
+        <>
+            <MenuItem icon={Eye} onClick={onView}>View Details</MenuItem>
+            <MenuItem icon={ShieldCheck} onClick={onVerify} disabled={!canManage || isVerified} variant="success">
+                Verify Lead
+            </MenuItem>
+            <MenuItem icon={ShieldX} onClick={onUnverify} disabled={!canManage || isUnverified} variant="danger">
+                Mark Unverified
+            </MenuItem>
+            <MenuItem
+                icon={UserPlus}
+                onClick={onAssign}
+                disabled={!canManage || isVerified}
+            >
+                {hasAssignee ? 'Change Assignee' : 'Assign'}
+            </MenuItem>
+            <MenuItem
+                icon={Repeat}
+                onClick={onReassign}
+                disabled={!canManage || !isInProgress}
+                title={!isInProgress ? 'Reassign is only available while In Progress' : undefined}
+            >
+                Reassign (In Progress)
+            </MenuItem>
+            <MenuItem
+                icon={Clock}
+                onClick={onMarkPending}
+                disabled={!canManage || status === 'Pending' || isVerified}
+            >
+                Move to Pending
+            </MenuItem>
+        </>
+    );
+};
+
+export default LeadActionsMenu;
diff --git a/src/components/LeadVerification/LeadCard.jsx b/src/components/LeadVerification/LeadCard.jsx
new file mode 100644
index 0000000..821f4d7
--- /dev/null
+++ b/src/components/LeadVerification/LeadCard.jsx
@@ -0,0 +1,103 @@
+import React from 'react';
+import {
+    Eye, ShieldCheck, ShieldX, UserPlus, Repeat, Clock, Phone, MapPin, User,
+} from 'lucide-react';
+import { LeadStatusBadge, VerificationStatusPill } from './LeadStatusBadge';
+
+const formatDate = (iso) => {
+    if (!iso) return '—';
+    try {
+        return new Date(iso).toLocaleDateString('en-US', {
+            year: 'numeric', month: 'short', day: 'numeric',
+        });
+    } catch { return iso; }
+};
+
+const CardActionButton = ({ icon: Icon, children, onClick, disabled, variant }) => (
+    <button
+        type="button"
+        onClick={onClick}
+        disabled={disabled}
+        className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-[11px] font-bold uppercase tracking-wider border transition-colors disabled:opacity-40 disabled:cursor-not-allowed ${
+            variant === 'success'
+                ? 'text-emerald-600 dark:text-emerald-400 border-emerald-500/20 hover:bg-emerald-500/10'
+                : variant === 'danger'
+                ? 'text-red-600 dark:text-red-400 border-red-500/20 hover:bg-red-500/10'
+                : 'text-zinc-700 dark:text-zinc-300 border-zinc-200 dark:border-white/10 hover:bg-zinc-100 dark:hover:bg-white/5'
+        }`}
+    >
+        <Icon size={12} />
+        {children}
+    </button>
+);
+
+// Field names match our store shape: assigneeId / assigneeName (not assignedToId/assignedToName).
+const LeadCard = ({
+    lead,
+    canManage,
+    onView,
+    onAssign,
+    onReassign,
+    onVerify,
+    onUnverify,
+    onMarkPending,
+}) => {
+    const isVerified   = lead.status === 'Verified';
+    const isUnverified = lead.status === 'Unverified';
+    const isInProgress = lead.status === 'In Progress';
+    const hasAssignee  = Boolean(lead.assigneeId);
+
+    return (
+        <div className="p-4 active:bg-zinc-50 dark:active:bg-white/5 transition-colors">
+            <button type="button" onClick={onView} className="w-full text-left">
+                <div className="flex justify-between items-start gap-3 mb-2">
+                    <div className="min-w-0 flex-1">
+                        <h4 className="font-semibold text-zinc-900 dark:text-white truncate">
+                            {lead.customerName}
+                        </h4>
+                        <p className="text-[11px] text-zinc-500 font-mono mt-0.5">{lead.leadId}</p>
+                    </div>
+                    <LeadStatusBadge status={lead.status} />
+                </div>
+                <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-zinc-500 mb-2">
+                    <span className="flex items-center gap-1">
+                        <Phone size={11} />
+                        {lead.phone}
+                    </span>
+                    {lead.address && (
+                        <span className="flex items-center gap-1 max-w-full">
+                            <MapPin size={11} />
+                            <span className="truncate max-w-[180px]">{lead.address}</span>
+                        </span>
+                    )}
+                </div>
+                <div className="flex flex-wrap items-center gap-2 mb-1">
+                    <VerificationStatusPill label={lead.verificationStatus} />
+                    <span className="flex items-center gap-1 text-[11px] text-zinc-500">
+                        <User size={11} />
+                        {lead.assigneeName || 'Unassigned'}
+                    </span>
+                    <span className="text-[11px] text-zinc-400 font-mono">
+                        {formatDate(lead.createdAt)} · {lead.source}
+                    </span>
+                </div>
+            </button>
+            <div className="mt-3 flex flex-wrap gap-2 pt-3 border-t border-zinc-100 dark:border-white/5">
+                <CardActionButton icon={Eye} onClick={onView}>View</CardActionButton>
+                <CardActionButton icon={ShieldCheck} onClick={onVerify} disabled={!canManage || isVerified} variant="success">Verify</CardActionButton>
+                <CardActionButton icon={ShieldX} onClick={onUnverify} disabled={!canManage || isUnverified} variant="danger">Unverify</CardActionButton>
+                <CardActionButton icon={UserPlus} onClick={onAssign} disabled={!canManage || isVerified}>
+                    {hasAssignee ? 'Reassign' : 'Assign'}
+                </CardActionButton>
+                <CardActionButton icon={Repeat} onClick={onReassign} disabled={!canManage || !isInProgress}>
+                    Reassign (IP)
+                </CardActionButton>
+                <CardActionButton icon={Clock} onClick={onMarkPending} disabled={!canManage || lead.status === 'Pending' || isVerified}>
+                    Pending
+                </CardActionButton>
+            </div>
+        </div>
+    );
+};
+
+export default LeadCard;
diff --git a/src/components/LeadVerification/LeadDetailsModal.jsx b/src/components/LeadVerification/LeadDetailsModal.jsx
new file mode 100644
index 0000000..7df1aca
--- /dev/null
+++ b/src/components/LeadVerification/LeadDetailsModal.jsx
@@ -0,0 +1,151 @@
+import React, { useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import {
+    X, Phone, Mail, MapPin, User, FileText, Clock, Hash, History as HistoryIcon,
+} from 'lucide-react';
+import { LeadStatusBadge, VerificationStatusPill } from './LeadStatusBadge';
+
+const formatDateTime = (iso) => {
+    if (!iso) return '—';
+    try {
+        return new Date(iso).toLocaleString('en-US', {
+            year: 'numeric', month: 'short', day: 'numeric',
+            hour: 'numeric', minute: '2-digit',
+        });
+    } catch { return iso; }
+};
+
+const Row = ({ icon: Icon, label, value }) => (
+    <div className="flex items-start gap-3 py-2 border-b border-zinc-100 dark:border-white/5 last:border-0">
+        <div className="shrink-0 p-1.5 rounded-lg bg-zinc-100 dark:bg-white/5 text-zinc-500">
+            <Icon size={14} />
+        </div>
+        <div className="min-w-0 flex-1">
+            <div className="text-[10px] uppercase tracking-wider text-zinc-400 dark:text-zinc-500 font-bold">
+                {label}
+            </div>
+            <div className="text-sm text-zinc-900 dark:text-white font-medium break-words">
+                {value || '—'}
+            </div>
+        </div>
+    </div>
+);
+
+// Field names match our store shape: assigneeName (not assignedToName).
+const LeadDetailsModal = ({ isOpen, onClose, lead }) => {
+    useEffect(() => {
+        if (!isOpen) return;
+        const onKey = (e) => { if (e.key === 'Escape') onClose(); };
+        const prevOverflow = document.body.style.overflow;
+        document.body.style.overflow = 'hidden';
+        window.addEventListener('keydown', onKey);
+        return () => {
+            document.body.style.overflow = prevOverflow;
+            window.removeEventListener('keydown', onKey);
+        };
+    }, [isOpen, onClose]);
+
+    if (!isOpen || !lead) return null;
+
+    return createPortal(
+        <div className="fixed inset-0 z-[9999] flex items-end sm:items-center justify-center p-0 sm:p-4" role="dialog" aria-modal="true">
+            <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} />
+            <div className="relative w-full sm:max-w-2xl max-h-[92vh] sm:max-h-[88vh] flex flex-col bg-white dark:bg-[#121214] sm:rounded-2xl rounded-t-2xl shadow-2xl border border-zinc-200 dark:border-white/10 overflow-hidden animate-in zoom-in-95 duration-200">
+                {/* Header */}
+                <div className="px-5 py-4 border-b border-zinc-200 dark:border-white/10 flex items-start justify-between gap-3 bg-zinc-50/50 dark:bg-white/5">
+                    <div className="min-w-0">
+                        <div className="flex items-center gap-2 flex-wrap">
+                            <h2 className="text-base font-bold text-zinc-900 dark:text-white truncate">
+                                {lead.customerName}
+                            </h2>
+                            <LeadStatusBadge status={lead.status} />
+                            <VerificationStatusPill label={lead.verificationStatus} />
+                        </div>
+                        <p className="mt-0.5 text-[11px] font-mono text-zinc-500">{lead.leadId}</p>
+                    </div>
+                    <button
+                        onClick={onClose}
+                        aria-label="Close"
+                        className="p-2 rounded-lg bg-zinc-100 dark:bg-white/10 text-zinc-500 hover:text-red-500 transition-colors shrink-0"
+                    >
+                        <X size={18} />
+                    </button>
+                </div>
+
+                {/* Body */}
+                <div className="overflow-y-auto custom-scrollbar p-5 space-y-6">
+                    {/* Contact Info */}
+                    <section>
+                        <h3 className="text-xs font-bold uppercase tracking-widest text-zinc-500 mb-2 flex items-center gap-1.5">
+                            <User size={12} /> Contact
+                        </h3>
+                        <div className="rounded-xl border border-zinc-200 dark:border-white/10 bg-white dark:bg-white/5 px-3">
+                            <Row icon={Phone}   label="Phone"   value={lead.phone} />
+                            <Row icon={Mail}    label="Email"   value={lead.email} />
+                            <Row icon={MapPin}  label="Address" value={lead.address} />
+                            <Row icon={Hash}    label="Source"  value={lead.source} />
+                        </div>
+                    </section>
+
+                    {/* Assignment */}
+                    <section>
+                        <h3 className="text-xs font-bold uppercase tracking-widest text-zinc-500 mb-2 flex items-center gap-1.5">
+                            <User size={12} /> Assignment
+                        </h3>
+                        <div className="rounded-xl border border-zinc-200 dark:border-white/10 bg-white dark:bg-white/5 px-3">
+                            <Row icon={User}  label="Assigned To" value={lead.assigneeName} />
+                            <Row icon={Clock} label="Created"     value={formatDateTime(lead.createdAt)} />
+                            <Row icon={Clock} label="Verified At" value={formatDateTime(lead.verifiedAt)} />
+                        </div>
+                    </section>
+
+                    {/* Notes */}
+                    <section>
+                        <h3 className="text-xs font-bold uppercase tracking-widest text-zinc-500 mb-2 flex items-center gap-1.5">
+                            <FileText size={12} /> Verification Notes
+                        </h3>
+                        <div className="rounded-xl border border-zinc-200 dark:border-white/10 bg-white dark:bg-white/5 p-3 text-sm text-zinc-700 dark:text-zinc-300 leading-relaxed whitespace-pre-wrap">
+                            {lead.verificationNotes || 'No notes yet.'}
+                        </div>
+                    </section>
+
+                    {/* History */}
+                    {lead.history?.length > 0 && (
+                        <section>
+                            <h3 className="text-xs font-bold uppercase tracking-widest text-zinc-500 mb-2 flex items-center gap-1.5">
+                                <HistoryIcon size={12} /> Activity
+                            </h3>
+                            <ol className="relative border-l-2 border-zinc-100 dark:border-white/10 ml-1.5 space-y-3 pl-4">
+                                {lead.history.map((h, i) => (
+                                    <li key={i} className="relative">
+                                        <span className="absolute -left-[22px] top-1.5 w-3 h-3 rounded-full bg-blue-500 ring-4 ring-white dark:ring-[#121214]" />
+                                        <p className="text-sm text-zinc-900 dark:text-white font-medium">
+                                            {h.action}
+                                        </p>
+                                        <p className="text-[11px] text-zinc-500 mt-0.5">
+                                            {formatDateTime(h.at)} · {h.by}
+                                        </p>
+                                    </li>
+                                ))}
+                            </ol>
+                        </section>
+                    )}
+                </div>
+
+                {/* Footer */}
+                <div className="px-5 py-3 border-t border-zinc-200 dark:border-white/10 bg-zinc-50 dark:bg-white/5 flex justify-end">
+                    <button
+                        type="button"
+                        onClick={onClose}
+                        className="px-4 py-2 text-sm font-bold rounded-xl border border-zinc-200 dark:border-white/10 text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-white/5 transition-colors"
+                    >
+                        Close
+                    </button>
+                </div>
+            </div>
+        </div>,
+        document.body,
+    );
+};
+
+export default LeadDetailsModal;
diff --git a/src/components/LeadVerification/LeadStatusBadge.jsx b/src/components/LeadVerification/LeadStatusBadge.jsx
new file mode 100644
index 0000000..4b29d17
--- /dev/null
+++ b/src/components/LeadVerification/LeadStatusBadge.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { LV_STATUS_CONFIG, lvVerificationStatusCls } from './statusConfig';
+
+export const LeadStatusBadge = ({ status }) => {
+    const cfg = LV_STATUS_CONFIG[status] || LV_STATUS_CONFIG.Pending;
+    const Icon = cfg.icon;
+    const spin = status === 'In Progress';
+    return (
+        <span className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-wide ${cfg.cls}`}>
+            <Icon size={11} className={spin ? 'animate-spin' : ''} />
+            {cfg.label}
+        </span>
+    );
+};
+
+export const VerificationStatusPill = ({ label }) => {
+    if (!label) return null;
+    return (
+        <span className={`inline-flex items-center px-2 py-0.5 rounded-md text-[10px] font-semibold uppercase tracking-wide border ${lvVerificationStatusCls(label)}`}>
+            {label}
+        </span>
+    );
+};
diff --git a/src/components/LeadVerification/LeadTableRow.jsx b/src/components/LeadVerification/LeadTableRow.jsx
new file mode 100644
index 0000000..ea622e2
--- /dev/null
+++ b/src/components/LeadVerification/LeadTableRow.jsx
@@ -0,0 +1,131 @@
+import React from 'react';
+import { MoreVertical, Phone, Eye } from 'lucide-react';
+import { LeadStatusBadge, VerificationStatusPill } from './LeadStatusBadge';
+import LeadActionsMenu from './LeadActionsMenu';
+
+const formatDate = (iso) => {
+    if (!iso) return '—';
+    try {
+        return new Date(iso).toLocaleDateString('en-US', {
+            year: 'numeric', month: 'short', day: 'numeric',
+        });
+    } catch { return iso; }
+};
+
+// Field names match our store shape: assigneeId / assigneeName (not assignedToId/assignedToName).
+const LeadTableRow = ({
+    lead,
+    openMenu,
+    setOpenMenu,
+    canManage,
+    onView,
+    onAssign,
+    onReassign,
+    onVerify,
+    onUnverify,
+    onMarkPending,
+}) => {
+    return (
+        <tr className="hover:bg-zinc-50 dark:hover:bg-white/5 transition-colors group">
+            <td className="px-5 py-4 whitespace-nowrap">
+                <button type="button" onClick={onView} className="text-left">
+                    <div className="font-mono text-[11px] text-zinc-500">{lead.leadId}</div>
+                    <div className="text-[10px] text-zinc-400 mt-0.5">
+                        {formatDate(lead.createdAt)}
+                    </div>
+                </button>
+            </td>
+            <td className="px-5 py-4">
+                <button type="button" onClick={onView} className="text-left flex items-center gap-2">
+                    <div className="w-8 h-8 rounded-full bg-blue-500/10 text-blue-500 flex items-center justify-center text-xs font-bold shrink-0">
+                        {lead.customerName?.charAt(0)}
+                    </div>
+                    <div className="min-w-0">
+                        <div className="font-semibold text-sm text-zinc-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors truncate max-w-[180px]">
+                            {lead.customerName}
+                        </div>
+                        <div className="text-[11px] text-zinc-500 truncate max-w-[180px]">
+                            {lead.address}
+                        </div>
+                    </div>
+                </button>
+            </td>
+            <td className="px-5 py-4 whitespace-nowrap">
+                <a
+                    href={`tel:${lead.phone}`}
+                    className="inline-flex items-center gap-1.5 text-sm text-zinc-700 dark:text-zinc-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
+                >
+                    <Phone size={12} className="text-zinc-400" />
+                    {lead.phone}
+                </a>
+            </td>
+            <td className="px-5 py-4">
+                <span className="text-sm text-zinc-700 dark:text-zinc-300">{lead.source}</span>
+            </td>
+            <td className="px-5 py-4">
+                {lead.assigneeName ? (
+                    <div className="flex items-center gap-2">
+                        <div className="w-6 h-6 rounded-full bg-purple-500/10 text-purple-500 flex items-center justify-center text-[10px] font-bold shrink-0">
+                            {lead.assigneeName?.charAt(0)}
+                        </div>
+                        <span className="text-sm text-zinc-700 dark:text-zinc-300 truncate max-w-[140px]">
+                            {lead.assigneeName}
+                        </span>
+                    </div>
+                ) : (
+                    <span className="text-xs italic text-zinc-400">Unassigned</span>
+                )}
+            </td>
+            <td className="px-5 py-4">
+                <LeadStatusBadge status={lead.status} />
+            </td>
+            <td className="px-5 py-4">
+                <VerificationStatusPill label={lead.verificationStatus} />
+            </td>
+            <td className="px-5 py-4 whitespace-nowrap text-sm text-zinc-500">
+                {formatDate(lead.createdAt)}
+            </td>
+            <td className="px-5 py-4 text-right relative">
+                <div className="inline-flex items-center gap-1">
+                    <button
+                        type="button"
+                        onClick={onView}
+                        className="p-1.5 rounded-lg text-zinc-500 hover:text-blue-600 hover:bg-blue-500/10 transition-colors"
+                        aria-label="View details"
+                        title="View"
+                    >
+                        <Eye size={14} />
+                    </button>
+                    <button
+                        type="button"
+                        onClick={(e) => { e.stopPropagation(); setOpenMenu(!openMenu); }}
+                        className="p-1.5 rounded-lg text-zinc-500 hover:text-zinc-900 dark:hover:text-white hover:bg-zinc-200 dark:hover:bg-white/10 transition-colors"
+                        aria-label="More actions"
+                        aria-expanded={openMenu}
+                    >
+                        <MoreVertical size={14} />
+                    </button>
+                </div>
+                {openMenu && (
+                    <div
+                        onClick={(e) => e.stopPropagation()}
+                        className="absolute right-5 top-full mt-1 w-52 bg-white dark:bg-[#18181b] border border-zinc-200 dark:border-white/10 rounded-xl shadow-xl z-20 overflow-hidden text-left"
+                    >
+                        <LeadActionsMenu
+                            lead={lead}
+                            canManage={canManage}
+                            onView={() => { setOpenMenu(false); onView(); }}
+                            onAssign={() => { setOpenMenu(false); onAssign(); }}
+                            onReassign={() => { setOpenMenu(false); onReassign(); }}
+                            onVerify={() => { setOpenMenu(false); onVerify(); }}
+                            onUnverify={() => { setOpenMenu(false); onUnverify(); }}
+                            onMarkPending={() => { setOpenMenu(false); onMarkPending(); }}
+                        />
+                    </div>
+                )}
+            </td>
+        </tr>
+    );
+};
+
+export default LeadTableRow;
diff --git a/src/components/LeadVerification/SummaryCards.jsx b/src/components/LeadVerification/SummaryCards.jsx
new file mode 100644
index 0000000..8af7dd6
--- /dev/null
+++ b/src/components/LeadVerification/SummaryCards.jsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { SpotlightCard } from '../SpotlightCard';
+import { ShieldCheck, ShieldX, UserCheck, Loader2, Clock } from 'lucide-react';
+
+const TILE_DEF = [
+    { key: 'verified',   label: 'Verified',    icon: ShieldCheck, accent: 'text-emerald-500', bg: 'bg-emerald-500/10' },
+    { key: 'inProgress', label: 'In Progress', icon: Loader2,     accent: 'text-blue-500',    bg: 'bg-blue-500/10' },
+    { key: 'assigned',   label: 'Assigned',    icon: UserCheck,   accent: 'text-amber-500',   bg: 'bg-amber-500/10' },
+    { key: 'pending',    label: 'Pending',     icon: Clock,       accent: 'text-zinc-500',    bg: 'bg-zinc-400/15' },
+    { key: 'unverified', label: 'Unverified',  icon: ShieldX,     accent: 'text-red-500',     bg: 'bg-red-500/10' },
+];
+
+export default function SummaryCards({ stats }) {
+    return (
+        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3 sm:gap-4">
+            {TILE_DEF.map(({ key, label, icon: Icon, accent, bg }) => (
+                <SpotlightCard key={key} className="p-4 sm:p-5">
+                    <div className="flex items-center justify-between gap-3">
+                        <div className="min-w-0">
+                            <p className="text-[10px] font-bold uppercase tracking-widest text-zinc-500 dark:text-zinc-400 truncate">
+                                {label}
+                            </p>
+                            <p className="mt-1 text-2xl sm:text-3xl font-extrabold text-zinc-900 dark:text-white tabular-nums">
+                                {stats[key] ?? 0}
+                            </p>
+                        </div>
+                        <div className={`shrink-0 p-2.5 rounded-xl ${bg} ${accent}`}>
+                            <Icon size={18} className={key === 'inProgress' ? 'animate-spin' : ''} />
+                        </div>
+                    </div>
+                </SpotlightCard>
+            ))}
+        </div>
+    );
+}
diff --git a/src/components/LeadVerification/statusConfig.js b/src/components/LeadVerification/statusConfig.js
new file mode 100644
index 0000000..d4fb83e
--- /dev/null
+++ b/src/components/LeadVerification/statusConfig.js
@@ -0,0 +1,57 @@
+import { Clock, UserCheck, Loader2, ShieldCheck, ShieldX } from 'lucide-react';
+
+// Centralised lead-verification status visuals + icons. Reused by table, cards,
+// summary tiles, and modals so the badge always looks identical.
+export const LV_STATUS_CONFIG = {
+    Pending: {
+        label: 'Pending',
+        icon: Clock,
+        cls: 'bg-zinc-200 text-zinc-700 dark:bg-zinc-700 dark:text-zinc-300',
+        dot: 'bg-zinc-400',
+        accent: 'text-zinc-500',
+    },
+    Assigned: {
+        label: 'Assigned',
+        icon: UserCheck,
+        cls: 'bg-amber-100 text-amber-700 dark:bg-amber-500/20 dark:text-amber-400',
+        dot: 'bg-amber-500',
+        accent: 'text-amber-500',
+    },
+    'In Progress': {
+        label: 'In Progress',
+        icon: Loader2,
+        cls: 'bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-400',
+        dot: 'bg-blue-500',
+        accent: 'text-blue-500',
+    },
+    Verified: {
+        label: 'Verified',
+        icon: ShieldCheck,
+        cls: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-400',
+        dot: 'bg-emerald-500',
+        accent: 'text-emerald-500',
+    },
+    Unverified: {
+        label: 'Unverified',
+        icon: ShieldX,
+        cls: 'bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-400',
+        dot: 'bg-red-500',
+        accent: 'text-red-500',
+    },
+};
+
+export const LV_VERIFICATION_STATUS_CLS = {
+    Verified:                       'bg-emerald-50 text-emerald-700 border-emerald-200 dark:bg-emerald-500/10 dark:text-emerald-300 dark:border-emerald-500/20',
+    'Awaiting Confirmation':        'bg-blue-50 text-blue-700 border-blue-200 dark:bg-blue-500/10 dark:text-blue-300 dark:border-blue-500/20',
+    'Verification In Progress':     'bg-blue-50 text-blue-700 border-blue-200 dark:bg-blue-500/10 dark:text-blue-300 dark:border-blue-500/20',
+    'Verifying Identity':           'bg-purple-50 text-purple-700 border-purple-200 dark:bg-purple-500/10 dark:text-purple-300 dark:border-purple-500/20',
+    'Reviewing Insurance':          'bg-purple-50 text-purple-700 border-purple-200 dark:bg-purple-500/10 dark:text-purple-300 dark:border-purple-500/20',
+    'Pending Outreach':             'bg-amber-50 text-amber-700 border-amber-200 dark:bg-amber-500/10 dark:text-amber-300 dark:border-amber-500/20',
+    Unassigned:                     'bg-zinc-50 text-zinc-600 border-zinc-200 dark:bg-white/5 dark:text-zinc-300 dark:border-white/10',
+    'Failed Contact':               'bg-red-50 text-red-700 border-red-200 dark:bg-red-500/10 dark:text-red-300 dark:border-red-500/20',
+    'Emergency — Awaiting Verifier':'bg-red-50 text-red-700 border-red-200 dark:bg-red-500/10 dark:text-red-300 dark:border-red-500/20',
+};
+
+export const lvVerificationStatusCls = (label) =>
+    LV_VERIFICATION_STATUS_CLS[label] ||
+    'bg-zinc-50 text-zinc-600 border-zinc-200 dark:bg-white/5 dark:text-zinc-300 dark:border-white/10';
diff --git a/src/pages/LeadVerification/LeadVerificationPage.jsx b/src/pages/LeadVerification/LeadVerificationPage.jsx
new file mode 100644
index 0000000..0e54dd7
--- /dev/null
+++ b/src/pages/LeadVerification/LeadVerificationPage.jsx
@@ -0,0 +1,428 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { useMockStore } from '../../data/mockStore';
+import { usePermissions } from '../../hooks/usePermissions';
+import { SpotlightCard } from '../../components/SpotlightCard';
+import SummaryCards from '../../components/LeadVerification/SummaryCards';
+import LeadTableRow from '../../components/LeadVerification/LeadTableRow';
+import LeadCard from '../../components/LeadVerification/LeadCard';
+import AssignLeadModal from '../../components/LeadVerification/AssignLeadModal';
+import LeadDetailsModal from '../../components/LeadVerification/LeadDetailsModal';
+import Select from '../../components/ui/Select';
+import {
+    Search, Filter, ShieldCheck, ChevronLeft, ChevronRight, AlertCircle,
+} from 'lucide-react';
+
+const PAGE_SIZE = 8;
+
+// Canonical status list — matches the 5 statuses defined in statusConfig.js.
+const LV_STATUSES = ['Pending', 'Assigned', 'In Progress', 'Verified', 'Unverified'];
+
+const Th = ({ children, align }) => (
+    <th className={`px-5 py-4 text-xs font-bold uppercase tracking-wider text-zinc-500 ${align === 'right' ? 'text-right' : ''}`}>
+        {children}
+    </th>
+);
+
+const EmptyState = () => (
+    <div className="py-16 text-center text-zinc-500">
+        <ShieldCheck size={32} className="mx-auto mb-3 text-zinc-400" />
+        <p className="font-semibold">No verification leads match your filters.</p>
+        <p className="text-sm mt-1">Try clearing filters or adjust the search.</p>
+    </div>
+);
+
+const ConfirmDialog = ({ title, body, confirmLabel, confirmColor, onConfirm, onClose }) => {
+    useEffect(() => {
+        const handler = (e) => { if (e.key === 'Escape') onClose(); };
+        window.addEventListener('keydown', handler);
+        return () => window.removeEventListener('keydown', handler);
+    }, [onClose]);
+
+    return (
+        <div className="fixed inset-0 z-[9999] flex items-center justify-center p-4" role="dialog" aria-modal="true">
+            <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} />
+            <div className="relative w-full max-w-sm bg-white dark:bg-[#121214] rounded-2xl shadow-2xl border border-zinc-200 dark:border-white/10 overflow-hidden animate-in zoom-in-95 duration-200">
+                <div className="p-5 space-y-3">
+                    <div className="flex items-center gap-3">
+                        <div className="p-2 rounded-xl bg-amber-500/10 text-amber-500">
+                            <AlertCircle size={20} />
+                        </div>
+                        <h2 className="text-base font-bold text-zinc-900 dark:text-white">{title}</h2>
+                    </div>
+                    <div className="text-sm text-zinc-600 dark:text-zinc-400">{body}</div>
+                </div>
+                <div className="px-5 py-3 border-t border-zinc-200 dark:border-white/10 bg-zinc-50 dark:bg-white/5 flex justify-end gap-2">
+                    <button
+                        type="button"
+                        onClick={onClose}
+                        className="px-4 py-2 text-xs font-bold uppercase tracking-wider rounded-lg border border-zinc-200 dark:border-white/10 text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-white/5 transition-colors"
+                    >
+                        Cancel
+                    </button>
+                    <button
+                        type="button"
+                        onClick={onConfirm}
+                        className={`px-4 py-2 text-xs font-bold uppercase tracking-wider rounded-lg text-white shadow-lg transition-colors ${confirmColor}`}
+                    >
+                        {confirmLabel}
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default function LeadVerificationPage() {
+    // Store keys: leadVerifications, verifyLead, unverifyLead, setLeadVerificationStatus,
+    // assignLeadVerification, reassignLeadVerification, addLeadVerificationNote, users.
+    // (leadVerificationStatuses and leadVerificationAssignees don't exist in our store —
+    //  statuses are hardcoded as LV_STATUSES; assignees are derived from users filtered to ADMIN.)
+    const {
+        leadVerifications,
+        verifyLead,
+        unverifyLead,
+        setLeadVerificationStatus,
+        users,
+    } = useMockStore();
+    const { can } = usePermissions();
+
+    // Owners/Admins/Sales reps with `leads:verify` get the destructive actions.
+    // Everyone else stays read-only.
+    const canManage = can('leads', 'verify') || can('leads', 'log');
+
+    const [search, setSearch] = useState('');
+    const [statusFilter, setStatusFilter] = useState('all');
+    const [sourceFilter, setSourceFilter] = useState('all');
+    const [assigneeFilter, setAssigneeFilter] = useState('all');
+    const [page, setPage] = useState(1);
+    const [openMenuId, setOpenMenuId] = useState(null);
+
+    // Modal state
+    const [viewLead, setViewLead] = useState(null);
+    const [assignLead, setAssignLead] = useState(null);
+    const [reassignLead, setReassignLead] = useState(null);
+    const [confirmVerify, setConfirmVerify] = useState(null);
+    const [confirmUnverify, setConfirmUnverify] = useState(null);
+
+    // Admin users for assignee filter dropdown (id + name).
+    const adminUsers = useMemo(
+        () => (users || []).filter(u => u.role === 'ADMIN'),
+        [users],
+    );
+
+    // Sources from data (no hard-coded list).
+    const sources = useMemo(
+        () => Array.from(new Set(leadVerifications.map(l => l.source))).sort(),
+        [leadVerifications],
+    );
+
+    // Field names match our store shape: assigneeId / assigneeName.
+    const filtered = useMemo(() => {
+        const q = search.trim().toLowerCase();
+        return leadVerifications.filter(lv => {
+            if (q) {
+                const blob = `${lv.customerName} ${lv.leadId} ${lv.phone} ${lv.email || ''} ${lv.address || ''} ${lv.source} ${lv.assigneeName || ''}`.toLowerCase();
+                if (!blob.includes(q)) return false;
+            }
+            if (statusFilter !== 'all' && lv.status !== statusFilter) return false;
+            if (sourceFilter !== 'all' && lv.source !== sourceFilter) return false;
+            if (assigneeFilter !== 'all') {
+                if (assigneeFilter === 'unassigned' && lv.assigneeId) return false;
+                if (assigneeFilter !== 'unassigned' && lv.assigneeId !== assigneeFilter) return false;
+            }
+            return true;
+        });
+    }, [leadVerifications, search, statusFilter, sourceFilter, assigneeFilter]);
+
+    const totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE));
+    const safePage = Math.min(page, totalPages);
+    const pageStart = (safePage - 1) * PAGE_SIZE;
+    const paginated = filtered.slice(pageStart, pageStart + PAGE_SIZE);
+
+    useEffect(() => { setPage(1); }, [search, statusFilter, sourceFilter, assigneeFilter]);
+
+    useEffect(() => {
+        const handler = () => setOpenMenuId(null);
+        if (openMenuId) document.addEventListener('click', handler);
+        return () => document.removeEventListener('click', handler);
+    }, [openMenuId]);
+
+    const stats = useMemo(() => ({
+        total:      leadVerifications.length,
+        verified:   leadVerifications.filter(l => l.status === 'Verified').length,
+        inProgress: leadVerifications.filter(l => l.status === 'In Progress').length,
+        assigned:   leadVerifications.filter(l => l.status === 'Assigned').length,
+        pending:    leadVerifications.filter(l => l.status === 'Pending').length,
+        unverified: leadVerifications.filter(l => l.status === 'Unverified').length,
+    }), [leadVerifications]);
+
+    const clearFilters = () => {
+        setSearch('');
+        setStatusFilter('all');
+        setSourceFilter('all');
+        setAssigneeFilter('all');
+    };
+
+    const handleVerify = () => {
+        if (!confirmVerify) return;
+        verifyLead(confirmVerify.id);
+        setConfirmVerify(null);
+    };
+
+    const handleUnverify = () => {
+        if (!confirmUnverify) return;
+        unverifyLead(confirmUnverify.id);
+        setConfirmUnverify(null);
+    };
+
+    return (
+        <div className="min-h-full bg-zinc-50 dark:bg-[#09090b] text-zinc-900 dark:text-white transition-colors duration-300 relative">
+            {/* Ambient bg — matches other CRM pages */}
+            <div className="fixed top-0 left-0 w-full h-full overflow-hidden pointer-events-none z-0">
+                <div className="absolute top-[-10%] left-[-10%] w-[50%] h-[50%] bg-emerald-500/5 dark:bg-emerald-900/10 rounded-full blur-[120px]" />
+                <div className="absolute bottom-[-10%] right-[-10%] w-[50%] h-[50%] bg-blue-500/5 dark:bg-blue-900/10 rounded-full blur-[120px]" />
+            </div>
+
+            <div className="relative z-10 p-4 sm:p-6 lg:p-8 max-w-7xl mx-auto space-y-6 pb-20">
+                {/* Header */}
+                <header className="flex flex-col md:flex-row justify-between items-start md:items-end gap-4 border-b border-zinc-200 dark:border-white/5 pb-6">
+                    <div>
+                        <h1 className="text-3xl sm:text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-zinc-900 to-zinc-600 dark:from-white dark:to-white/60 tracking-tight">
+                            Lead Verification
+                        </h1>
+                        <p className="text-zinc-500 dark:text-zinc-400 mt-1 text-sm">
+                            {stats.total} total · {stats.verified} verified · {stats.inProgress} in progress · {stats.pending} pending
+                        </p>
+                    </div>
+                </header>
+
+                {/* Summary cards */}
+                <SummaryCards stats={stats} />
+
+                {/* Filters */}
+                <SpotlightCard className="p-4">
+                    <div className="grid grid-cols-1 md:grid-cols-12 gap-3">
+                        {/* Search */}
+                        <div className="relative md:col-span-5">
+                            <label htmlFor="lv-search" className="sr-only">Search verification leads</label>
+                            <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400" size={16} />
+                            <input
+                                id="lv-search"
+                                type="text"
+                                placeholder="Search name, lead ID, phone, source…"
+                                value={search}
+                                onChange={(e) => setSearch(e.target.value)}
+                                className="w-full bg-zinc-100 dark:bg-black/40 border border-zinc-200 dark:border-white/10 rounded-xl py-2 pl-10 pr-4 text-sm text-zinc-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500/20"
+                            />
+                        </div>
+
+                        {/* Status */}
+                        <div className="md:col-span-3">
+                            <label htmlFor="lv-filter-status" className="sr-only">Filter by status</label>
+                            <Select
+                                id="lv-filter-status"
+                                ariaLabel="Filter by status"
+                                value={statusFilter}
+                                onChange={setStatusFilter}
+                                options={[
+                                    { value: 'all', label: 'All statuses' },
+                                    ...LV_STATUSES.map(s => ({ value: s, label: s })),
+                                ]}
+                            />
+                        </div>
+
+                        {/* Source */}
+                        <div className="md:col-span-2">
+                            <label htmlFor="lv-filter-source" className="sr-only">Filter by source</label>
+                            <Select
+                                id="lv-filter-source"
+                                ariaLabel="Filter by source"
+                                value={sourceFilter}
+                                onChange={setSourceFilter}
+                                options={[
+                                    { value: 'all', label: 'All sources' },
+                                    ...sources.map(s => ({ value: s, label: s })),
+                                ]}
+                            />
+                        </div>
+
+                        {/* Assignee */}
+                        <div className="md:col-span-2">
+                            <label htmlFor="lv-filter-assignee" className="sr-only">Filter by assignee</label>
+                            <Select
+                                id="lv-filter-assignee"
+                                ariaLabel="Filter by assignee"
+                                value={assigneeFilter}
+                                onChange={setAssigneeFilter}
+                                options={[
+                                    { value: 'all', label: 'All assignees' },
+                                    { value: 'unassigned', label: 'Unassigned' },
+                                    ...adminUsers.map(a => ({ value: a.id, label: a.name })),
+                                ]}
+                            />
+                        </div>
+                    </div>
+
+                    {(search || statusFilter !== 'all' || sourceFilter !== 'all' || assigneeFilter !== 'all') && (
+                        <div className="mt-3 flex items-center justify-between text-xs text-zinc-500 dark:text-zinc-400">
+                            <span className="flex items-center gap-1.5">
+                                <Filter size={12} />
+                                {filtered.length} match{filtered.length === 1 ? '' : 'es'}
+                            </span>
+                            <button
+                                type="button"
+                                onClick={clearFilters}
+                                className="font-bold uppercase tracking-wider text-blue-600 dark:text-blue-400 hover:underline"
+                            >
+                                Clear filters
+                            </button>
+                        </div>
+                    )}
+                </SpotlightCard>
+
+                {/* Table / cards */}
+                <SpotlightCard className="overflow-hidden">
+                    {/* Desktop */}
+                    <div className="hidden lg:block overflow-x-auto">
+                        <table className="w-full text-left border-collapse">
+                            <thead className="bg-zinc-50 dark:bg-[#18181b] border-b border-zinc-200 dark:border-white/10">
+                                <tr>
+                                    <Th>Lead ID</Th>
+                                    <Th>Customer</Th>
+                                    <Th>Phone</Th>
+                                    <Th>Source</Th>
+                                    <Th>Assigned To</Th>
+                                    <Th>Status</Th>
+                                    <Th>Verification</Th>
+                                    <Th>Created</Th>
+                                    <Th align="right">Actions</Th>
+                                </tr>
+                            </thead>
+                            <tbody className="divide-y divide-zinc-100 dark:divide-white/5">
+                                {paginated.length === 0 ? (
+                                    <tr>
+                                        <td colSpan={9}>
+                                            <EmptyState />
+                                        </td>
+                                    </tr>
+                                ) : paginated.map(lead => (
+                                    <LeadTableRow
+                                        key={lead.id}
+                                        lead={lead}
+                                        canManage={canManage}
+                                        openMenu={openMenuId === lead.id}
+                                        setOpenMenu={(open) => setOpenMenuId(open ? lead.id : null)}
+                                        onView={() => setViewLead(lead)}
+                                        onAssign={() => setAssignLead(lead)}
+                                        onReassign={() => setReassignLead(lead)}
+                                        onVerify={() => setConfirmVerify(lead)}
+                                        onUnverify={() => setConfirmUnverify(lead)}
+                                        onMarkPending={() => setLeadVerificationStatus(lead.id, 'Pending')}
+                                    />
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+
+                    {/* Mobile / tablet cards */}
+                    <div className="lg:hidden divide-y divide-zinc-100 dark:divide-white/5">
+                        {paginated.length === 0 ? (
+                            <EmptyState />
+                        ) : paginated.map(lead => (
+                            <LeadCard
+                                key={lead.id}
+                                lead={lead}
+                                canManage={canManage}
+                                onView={() => setViewLead(lead)}
+                                onAssign={() => setAssignLead(lead)}
+                                onReassign={() => setReassignLead(lead)}
+                                onVerify={() => setConfirmVerify(lead)}
+                                onUnverify={() => setConfirmUnverify(lead)}
+                                onMarkPending={() => setLeadVerificationStatus(lead.id, 'Pending')}
+                            />
+                        ))}
+                    </div>
+
+                    {/* Pagination */}
+                    <div className="px-5 py-3 border-t border-zinc-200 dark:border-white/10 bg-zinc-50 dark:bg-white/5 flex flex-col sm:flex-row justify-between items-center gap-3 text-xs">
+                        <span className="text-zinc-500">
+                            Showing {filtered.length === 0 ? 0 : pageStart + 1}–{Math.min(pageStart + PAGE_SIZE, filtered.length)} of {filtered.length}
+                        </span>
+                        <div className="flex items-center gap-1.5">
+                            <button
+                                type="button"
+                                onClick={() => setPage(p => Math.max(1, p - 1))}
+                                disabled={safePage === 1}
+                                aria-label="Previous page"
+                                className="p-1.5 rounded-lg bg-white dark:bg-white/5 border border-zinc-200 dark:border-white/10 text-zinc-500 hover:bg-zinc-100 dark:hover:bg-white/10 disabled:opacity-40 disabled:pointer-events-none transition-colors"
+                            >
+                                <ChevronLeft size={14} />
+                            </button>
+                            <span className="px-3 py-1.5 rounded-lg bg-white dark:bg-white/5 border border-zinc-200 dark:border-white/10 font-mono font-bold text-zinc-900 dark:text-white">
+                                {safePage} / {totalPages}
+                            </span>
+                            <button
+                                type="button"
+                                onClick={() => setPage(p => Math.min(totalPages, p + 1))}
+                                disabled={safePage === totalPages}
+                                aria-label="Next page"
+                                className="p-1.5 rounded-lg bg-white dark:bg-white/5 border border-zinc-200 dark:border-white/10 text-zinc-500 hover:bg-zinc-100 dark:hover:bg-white/10 disabled:opacity-40 disabled:pointer-events-none transition-colors"
+                            >
+                                <ChevronRight size={14} />
+                            </button>
+                        </div>
+                    </div>
+                </SpotlightCard>
+            </div>
+
+            {/* Modals */}
+            <LeadDetailsModal
+                isOpen={Boolean(viewLead)}
+                lead={viewLead}
+                onClose={() => setViewLead(null)}
+            />
+            <AssignLeadModal
+                isOpen={Boolean(assignLead)}
+                lead={assignLead}
+                mode="assign"
+                onClose={() => setAssignLead(null)}
+            />
+            <AssignLeadModal
+                isOpen={Boolean(reassignLead)}
+                lead={reassignLead}
+                mode="reassign"
+                onClose={() => setReassignLead(null)}
+            />
+
+            {confirmVerify && (
+                <ConfirmDialog
+                    title="Verify this lead?"
+                    body={
+                        <>
+                            <span className="font-bold text-zinc-900 dark:text-white">{confirmVerify.customerName}</span> will be marked as <span className="font-bold text-emerald-600">Verified</span> and automatically pushed into <span className="font-bold">New Leads</span>.
+                        </>
+                    }
+                    confirmLabel="Verify & Convert"
+                    confirmColor="bg-emerald-600 hover:bg-emerald-500 shadow-emerald-500/20"
+                    onConfirm={handleVerify}
+                    onClose={() => setConfirmVerify(null)}
+                />
+            )}
+
+            {confirmUnverify && (
+                <ConfirmDialog
+                    title="Mark as unverified?"
+                    body={
+                        <>
+                            This will move <span className="font-bold text-zinc-900 dark:text-white">{confirmUnverify.customerName}</span> to <span className="font-bold text-red-600">Unverified</span>. They will remain in the list for follow-up.
+                        </>
+                    }
+                    confirmLabel="Mark Unverified"
+                    confirmColor="bg-red-600 hover:bg-red-500 shadow-red-500/20"
+                    onConfirm={handleUnverify}
+                    onClose={() => setConfirmUnverify(null)}
+                />
+            )}
+        </div>
+    );
+}