diff --git a/frontend/src/pages/VisitorManagementPage.tsx b/frontend/src/pages/VisitorManagementPage.tsx
index 16c0176..06e98c0 100644
--- a/frontend/src/pages/VisitorManagementPage.tsx
+++ b/frontend/src/pages/VisitorManagementPage.tsx
@@ -17,12 +17,12 @@ type TabType = 'active' | 'all' | 'zones' | 'reports' | 'gallery';
 export default function VisitorManagementPage() {
     const { addToast } = useToast();
     const [activeTab, setActiveTab] = useState<TabType>('active');
-    const [activeVisitors, setActiveVisitors] = useState<ActiveVisitor[]>([]);
+    const [activeVisitors, setActiveVisitors] = useState<(ActiveVisitor & { id: string })[]>([]);
     const [allVisitors, setAllVisitors] = useState<(Visitor & { logs: VisitorLog[] })[]>([]);
     const [zones, setZones] = useState<AccessZone[]>([]);
     const [loading, setLoading] = useState(true);
     const [searchQuery, setSearchQuery] = useState('');
-    const [revokeModal, setRevokeModal] = useState<{ visitor: ActiveVisitor, notes: string } | null>(null);
+    const [revokeModal, setRevokeModal] = useState<{ visitor: ActiveVisitor & { id: string }, notes: string } | null>(null);
 
     useEffect(() => {
         loadData();
@@ -91,7 +91,7 @@ export default function VisitorManagementPage() {
     };
 
     // Columns for Active (Live) Visitors
-    const activeColumns: Column<ActiveVisitor>[] = [
+    const activeColumns: Column<ActiveVisitor & { id: string }>[] = [
         {
             key: 'visitor',
             header: 'On-Site Personnel',