diff --git a/package.json b/package.json
index a24b3fd..29c7e73 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,7 @@
     "next-themes": "^0.4.6",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "react-hook-form": "^7.57.0",
+    "react-hook-form": "^7.58.0",
     "require-in-the-middle": "^7.5.2",
     "sonner": "^2.0.5",
     "vaul": "^1.1.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 83316cb..be4567c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10,7 +10,7 @@ importers:
     dependencies:
       '@hookform/resolvers':
         specifier: ^5.1.1
-        version: 5.1.1(react-hook-form@7.57.0(react@19.1.0))
+        version: 5.1.1(react-hook-form@7.58.0(react@19.1.0))
       '@radix-ui/react-avatar':
         specifier: ^1.1.10
         version: 1.1.10(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -78,8 +78,8 @@ importers:
         specifier: ^19.1.0
         version: 19.1.0(react@19.1.0)
       react-hook-form:
-        specifier: ^7.57.0
-        version: 7.57.0(react@19.1.0)
+        specifier: ^7.58.0
+        version: 7.58.0(react@19.1.0)
       require-in-the-middle:
         specifier: ^7.5.2
         version: 7.5.2
@@ -3108,8 +3108,8 @@ packages:
     peerDependencies:
       react: ^19.1.0
 
-  react-hook-form@7.57.0:
-    resolution: {integrity: sha512-RbEks3+cbvTP84l/VXGUZ+JMrKOS8ykQCRYdm5aYsxnDquL0vspsyNhGRO7pcH6hsZqWlPOjLye7rJqdtdAmlg==}
+  react-hook-form@7.58.0:
+    resolution: {integrity: sha512-zGijmEed35oNfOfy7ub99jfjkiLhHwA3dl5AgyKdWC6QQzhnc7tkWewSa+T+A2EpLrc6wo5DUoZctS9kufWJjA==}
     engines: {node: '>=18.0.0'}
     peerDependencies:
       react: ^16.8.0 || ^17 || ^18 || ^19
@@ -3804,10 +3804,10 @@ snapshots:
 
   '@floating-ui/utils@0.2.9': {}
 
-  '@hookform/resolvers@5.1.1(react-hook-form@7.57.0(react@19.1.0))':
+  '@hookform/resolvers@5.1.1(react-hook-form@7.58.0(react@19.1.0))':
     dependencies:
       '@standard-schema/utils': 0.3.0
-      react-hook-form: 7.57.0(react@19.1.0)
+      react-hook-form: 7.58.0(react@19.1.0)
 
   '@humanfs/core@0.19.1': {}
 
@@ -6708,7 +6708,7 @@ snapshots:
       react: 19.1.0
       scheduler: 0.26.0
 
-  react-hook-form@7.57.0(react@19.1.0):
+  react-hook-form@7.58.0(react@19.1.0):
     dependencies:
       react: 19.1.0
 
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 772f232..225c19d 100755
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -4,6 +4,7 @@ import { Geist } from 'next/font/google';
 import { cn } from '@/lib/utils';
 import {
   AuthProvider,
+  QueryProvider,
   ThemeProvider,
   TVModeProvider,
 } from '@/components/context';
@@ -385,6 +386,7 @@ const geist = Geist({
   variable: '--font-geist-sans',
 });
 
+
 const RootLayout = ({ children }: Readonly<{ children: React.ReactNode }>) => {
   return (
     <html lang='en' className={`${geist.variable}`} suppressHydrationWarning>
@@ -397,23 +399,25 @@ const RootLayout = ({ children }: Readonly<{ children: React.ReactNode }>) => {
           enableSystem
           disableTransitionOnChange
         >
-          <AuthProvider>
-            <PlausibleProvider
-              domain='techtracker.gbrown.org'
-              customDomain='https://plausible.gbrown.org'
-              trackOutboundLinks={true}
-              selfHosted={true}
-            >
-              <TVModeProvider>
-                <main className='min-h-screen'>
-                  <Header />
-                  {children}
-                  <Toaster />
-                </main>
-                <Footer />
-              </TVModeProvider>
-            </PlausibleProvider>
-          </AuthProvider>
+          <QueryProvider>
+            <AuthProvider>
+              <PlausibleProvider
+                domain='techtracker.gbrown.org'
+                customDomain='https://plausible.gbrown.org'
+                trackOutboundLinks={true}
+                selfHosted={true}
+              >
+                <TVModeProvider>
+                  <main className='min-h-screen'>
+                    <Header />
+                    {children}
+                    <Toaster />
+                  </main>
+                  <Footer />
+                </TVModeProvider>
+              </PlausibleProvider>
+            </AuthProvider>
+          </QueryProvider>
         </ThemeProvider>
       </body>
     </html>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index fc96bfe..1894dd1 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -8,22 +8,7 @@ const Home = async () => {
   if (!userResponse.success) {
     redirect('/sign-in');
   } else if (userResponse.data) {
-    redirect('/status');
+    redirect('/status/list');
   } else return <div />;
 };
 export default Home;
-
-//'use client';
-
-////import { TechTable } from '@/components/status';
-//import { redirect } from 'next/navigation';
-//import { useAuth } from '@/components/context';
-
-//const HomePage = () => {
-//const { isAuthenticated } = useAuth();
-//if (!isAuthenticated) {
-//redirect('/sign-in');
-//}
-//redirect('/profile');
-//};
-//export default HomePage;
diff --git a/src/app/status/list/layout.tsx b/src/app/status/list/layout.tsx
new file mode 100644
index 0000000..ead8b51
--- /dev/null
+++ b/src/app/status/list/layout.tsx
@@ -0,0 +1,16 @@
+import type { Metadata } from 'next';
+
+export const generateMetadata = (): Metadata => {
+  return {
+    title: 'Status List'
+  };
+};
+
+const SignInLayout = ({ children }: Readonly<{ children: React.ReactNode }>) => {
+    return (
+      <div>
+        {children}
+      </div>
+    );
+  };
+export default SignInLayout;
diff --git a/src/app/status/page.tsx b/src/app/status/list/page.tsx
similarity index 80%
rename from src/app/status/page.tsx
rename to src/app/status/list/page.tsx
index cc4804d..eaf66fd 100644
--- a/src/app/status/page.tsx
+++ b/src/app/status/list/page.tsx
@@ -1,6 +1,6 @@
 'use server';
 
-import { StatusList, TechTable } from '@/components/status';
+import { StatusList } from '@/components/status';
 import { getUser, getRecentUsersWithStatuses } from '@/lib/actions';
 import { redirect } from 'next/navigation';
 
@@ -12,7 +12,6 @@ const Status = async () => {
     const response = await getRecentUsersWithStatuses();
     if (!response.success) throw new Error(response.error);
     const usersWithStatuses = response.data;
-    //return <TechTable initialStatuses={usersWithStatuses} />;
     return <StatusList initialStatuses={usersWithStatuses} />;
   }
 };
diff --git a/src/app/status/layout.tsx b/src/app/status/table/layout.tsx
similarity index 70%
rename from src/app/status/layout.tsx
rename to src/app/status/table/layout.tsx
index 570642b..1b8b059 100644
--- a/src/app/status/layout.tsx
+++ b/src/app/status/table/layout.tsx
@@ -1,3 +1,4 @@
+
 import type { Metadata } from 'next';
 
 export const generateMetadata = (): Metadata => {
@@ -6,11 +7,11 @@ export const generateMetadata = (): Metadata => {
   };
 };
 
-const StatusLayout = ({ children }: Readonly<{ children: React.ReactNode }>) => {
+const SignInLayout = ({ children }: Readonly<{ children: React.ReactNode }>) => {
     return (
       <div>
         {children}
       </div>
     );
   };
-export default StatusLayout;
+export default SignInLayout;
diff --git a/src/app/status/table/page.tsx b/src/app/status/table/page.tsx
new file mode 100644
index 0000000..4942d56
--- /dev/null
+++ b/src/app/status/table/page.tsx
@@ -0,0 +1,18 @@
+'use server';
+
+import { TechTable } from '@/components/status';
+import { getUser, getRecentUsersWithStatuses } from '@/lib/actions';
+import { redirect } from 'next/navigation';
+
+const Status = async () => {
+  const userRespoonse = await getUser();
+  if (!userRespoonse.success) {
+    redirect('/sign-in');
+  } else {
+    const response = await getRecentUsersWithStatuses();
+    if (!response.success) throw new Error(response.error);
+    const usersWithStatuses = response.data;
+    return <TechTable initialStatuses={usersWithStatuses} />;
+  }
+};
+export default Status;
diff --git a/src/components/context/Query.tsx b/src/components/context/Query.tsx
new file mode 100644
index 0000000..ae4d7c5
--- /dev/null
+++ b/src/components/context/Query.tsx
@@ -0,0 +1,77 @@
+// src/components/providers/query-provider.tsx
+'use client';
+
+import { QueryClient, QueryClientProvider, QueryCache, MutationCache } from '@tanstack/react-query';
+import { useState } from 'react';
+import { toast } from 'sonner';
+
+// Define error codes for different types of errors
+export const enum QueryErrorCodes {
+  USERS_FETCH_FAILED = 'USERS_FETCH_FAILED',
+  STATUS_UPDATE_FAILED = 'STATUS_UPDATE_FAILED',
+  // Add more as needed
+}
+
+const queryCacheOnError = (error: unknown, query: any) => {
+  const errorMessage = error instanceof Error ? error.message : 'Something went wrong';
+
+  switch (query.meta?.errCode) {
+    case QueryErrorCodes.USERS_FETCH_FAILED:
+      // Don't show toast for user fetch errors - handle in component
+      break;
+    default:
+      // Only show generic errors for unexpected failures
+      console.error('Query error:', error);
+      break;
+  }
+};
+
+const mutationCacheOnError = (error: unknown, variables: unknown, context: unknown, mutation: any) => {
+  const errorMessage = error instanceof Error ? error.message : 'Something went wrong';
+
+  switch (mutation.meta?.errCode) {
+    case QueryErrorCodes.STATUS_UPDATE_FAILED:
+      toast.error(`Failed to update status: ${errorMessage}`);
+      break;
+    default:
+      toast.error(`Operation failed: ${errorMessage}`);
+      break;
+  }
+};
+
+type QueryProviderProps = {
+  children: React.ReactNode;
+};
+
+export const QueryProvider = ({ children }: QueryProviderProps) => {
+  const [queryClient] = useState(() => new QueryClient({
+    queryCache: new QueryCache({
+      onError: queryCacheOnError,
+    }),
+    mutationCache: new MutationCache({
+      onError: mutationCacheOnError,
+    }),
+    defaultOptions: {
+      queries: {
+        staleTime: 30 * 1000, // 30 seconds
+        refetchOnWindowFocus: true,
+        retry: (failureCount, error) => {
+          // Don't retry on 4xx errors
+          if (error instanceof Error && error.message.includes('4')) {
+            return false;
+          }
+          return failureCount < 3;
+        },
+      },
+      mutations: {
+        retry: 1,
+      },
+    },
+  }));
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      {children}
+    </QueryClientProvider>
+  );
+};
diff --git a/src/components/context/index.tsx b/src/components/context/index.tsx
index 0236fc8..7b52308 100644
--- a/src/components/context/index.tsx
+++ b/src/components/context/index.tsx
@@ -1,3 +1,4 @@
 export { AuthProvider, useAuth } from './Auth';
 export { ThemeProvider, ThemeToggle } from './Theme';
 export { TVModeProvider, useTVMode, TVToggle } from './TVMode';
+export * from './Query';
diff --git a/src/components/default/auth/buttons/SignInWithMicrosoft.tsx b/src/components/default/auth/buttons/SignInWithMicrosoft.tsx
index 30e904a..a35bb90 100644
--- a/src/components/default/auth/buttons/SignInWithMicrosoft.tsx
+++ b/src/components/default/auth/buttons/SignInWithMicrosoft.tsx
@@ -48,7 +48,7 @@ export const SignInWithMicrosoft = ({
             if (!updateResponse.success) throw new Error('Could not update provider!');
           }
         }
-        window.location.href = result.data.url + `?provider=${result.data.provider}`;
+        window.location.href = result.data.url;
       } else {
         setStatusMessage(`Error: Could not sign in with Microsoft!`);
       }
diff --git a/src/components/status/StatusList.tsx b/src/components/status/StatusList.tsx
index e613b27..5561197 100644
--- a/src/components/status/StatusList.tsx
+++ b/src/components/status/StatusList.tsx
@@ -1,7 +1,5 @@
 "use client"
-
-import { createClient } from "@/utils/supabase"
-import { useState, useEffect, useCallback, useRef } from "react"
+import { useState, useEffect, useRef } from "react"
 import { useAuth, useTVMode } from "@/components/context"
 import { getRecentUsersWithStatuses, updateStatuses, updateUserStatus, type UserWithStatus } from "@/lib/hooks"
 import { BasedAvatar, Drawer, DrawerTrigger, Loading } from "@/components/ui"
@@ -9,249 +7,265 @@ import { SubmitButton } from "@/components/default"
 import { toast } from "sonner"
 import { HistoryDrawer } from "@/components/status"
 import type { Profile } from "@/utils/supabase"
-import type { RealtimeChannel } from "@supabase/supabase-js"
 import { makeConditionalClassName } from "@/lib/utils"
 import { Card, CardContent, CardHeader } from "@/components/ui/card"
 import { Badge } from "@/components/ui/badge"
 import { Checkbox } from "@/components/ui/checkbox"
 import { Input } from "@/components/ui/input"
 import { Button } from "@/components/ui/button"
-import { Wifi, WifiOff, Clock, User } from "lucide-react"
+import { RefreshCw, Clock, Wifi, WifiOff } from "lucide-react"
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { QueryErrorCodes } from "@/components/context";
+import { createClient } from "@/utils/supabase";
+import type { RealtimeChannel } from '@supabase/supabase-js';
 
 type StatusListProps = {
   initialStatuses: UserWithStatus[]
 }
 
-export const StatusList = ({ initialStatuses = [] }: StatusListProps) => {
-  const { isAuthenticated } = useAuth()
-  const { tvMode } = useTVMode()
-  const [loading, setLoading] = useState(true)
-  const [selectedUsers, setSelectedUsers] = useState<string[]>([])
-  const [selectAll, setSelectAll] = useState(false)
-  const [updatingStatus, setUpdatingStatus] = useState(false)
-  const [statusInput, setStatusInput] = useState("")
-  const [usersWithStatuses, setUsersWithStatuses] = useState<UserWithStatus[]>(initialStatuses)
-  const [selectedHistoryUser, setSelectedHistoryUser] = useState<Profile | null>(null)
+export const StatusList = ({ initialStatuses = [] }: StatusListProps) => { // Fixed props destructuring
+  const { isAuthenticated } = useAuth();
+  const { tvMode } = useTVMode();
+  const queryClient = useQueryClient();
+
+  const [selectedUsers, setSelectedUsers] = useState<UserWithStatus[]>([]);
+  const [selectAll, setSelectAll] = useState(false);
+  const [statusInput, setStatusInput] = useState('');
+  const [selectedHistoryUser, setSelectedHistoryUser] = useState<Profile | null>(null);
+
   const [connectionStatus, setConnectionStatus] = useState<"connecting" | "connected" | "disconnected">("connecting")
-  const [newStatusIds, setNewStatusIds] = useState<Set<string>>(new Set())
-  const channelRef = useRef<RealtimeChannel | null>(null)
-  const supabaseRef = useRef(createClient())
+  const [newStatusIds, setNewStatusIds] = useState<Set<string>>(new Set());
+  const channelRef = useRef<RealtimeChannel | null>(null);
+  const supabaseRef = useRef(createClient());
 
-  const fetchRecentUsersWithStatuses = useCallback(async () => {
-    try {
-      const response = await getRecentUsersWithStatuses()
-      if (!response.success) throw new Error(response.error)
-      return response.data
-    } catch (error) {
-      toast.error(`Error fetching technicians: ${error as Error}`)
-      return []
-    }
-  }, [])
 
-  // Initial load
-  useEffect(() => {
-    const loadData = async () => {
-      const data = await fetchRecentUsersWithStatuses()
-      setUsersWithStatuses(data)
-      setLoading(false)
-    }
-    loadData().catch((error) => {
-      console.error("Error loading data:", error)
-    })
-  }, [fetchRecentUsersWithStatuses, isAuthenticated])
-
-  const updateStatus = useCallback(async () => {
-    if (!isAuthenticated) {
-      toast.error("You must be signed in to update statuses.")
-      return
-    }
-    if (!statusInput.trim()) {
-      toast.error("Please enter a valid status.")
-      return
-    }
-
-    try {
-      setUpdatingStatus(true)
-      if (selectedUsers.length === 0) {
-        const result = await updateUserStatus(statusInput)
-        if (!result.success) throw new Error(result.error)
-        toast.success("Status updated for signed in user.")
-      } else {
-        const selectedUserObjects = usersWithStatuses.filter((u) => selectedUsers.includes(u.user.id))
-        const result = await updateStatuses(selectedUserObjects, statusInput)
-        if (!result.success) throw new Error(result.error)
-        toast.success(`Status updated for ${selectedUsers.length} selected users.`)
+  // Keep all your existing React Query code exactly as is
+  const {
+    data: usersWithStatuses = initialStatuses,
+    isLoading: loading,
+    error,
+    refetch,
+    isFetching,
+    dataUpdatedAt,
+  } = useQuery({
+    queryKey: ['users-with-statuses'],
+    queryFn: async () => {
+      try {
+        const response = await getRecentUsersWithStatuses();
+        if (!response.success) throw new Error(response.error);
+        return response.data;
+      } catch (error) {
+        toast.error(`Error fetching technicians: ${error instanceof Error ? error.message : 'Unknown error'}`);
+        throw error;
       }
-      setSelectedUsers([])
-      setStatusInput("")
-    } catch (error) {
-      const errorMessage = error instanceof Error ? error.message : String(error)
-      toast.error(`Failed to update status: ${errorMessage}`)
-    } finally {
-      setUpdatingStatus(false)
-    }
-  }, [isAuthenticated, statusInput, selectedUsers, usersWithStatuses])
-
-  const handleCheckboxChange = (id: string) => {
-    setSelectedUsers((prev) => (prev.includes(id) ? prev.filter((prevId) => prevId !== id) : [...prev, id]))
-  }
-
-  const handleSelectAllChange = () => {
-    if (selectAll) {
-      setSelectedUsers([])
-    } else {
-      setSelectedUsers(usersWithStatuses.map((user) => user.user.id))
-    }
-    setSelectAll(!selectAll)
-  }
+    },
+    enabled: isAuthenticated,
+    refetchInterval: 30000, // Changed to 30 seconds as backup
+    refetchOnWindowFocus: true,
+    refetchOnMount: true,
+    initialData: initialStatuses,
+    meta: { errCode: QueryErrorCodes.USERS_FETCH_FAILED },
+  });
 
+  // Add this new useEffect for realtime enhancement
   useEffect(() => {
-    setSelectAll(selectedUsers.length === usersWithStatuses.length && usersWithStatuses.length > 0)
-  }, [selectedUsers.length, usersWithStatuses.length])
-
-  // Real-time connection setup
-  useEffect(() => {
-    if (!isAuthenticated) return
+    if (!isAuthenticated) return;
 
     let reconnectAttempts = 0
     const maxReconnectAttempts = 3
     let reconnectTimeout: NodeJS.Timeout
     let isComponentMounted = true
-    let currentChannel: RealtimeChannel | null = null
+    let currentChannel: RealtimeChannel | null = null;
 
-    const setupRealtimeConnection = () => {
+    const setUpRealtimeConnection = () => {
       if (!isComponentMounted) return
-
-      // Clean up any existing channel first
       if (currentChannel) {
-        supabaseRef.current.removeChannel(currentChannel).catch(console.error)
-        currentChannel = null
+        supabaseRef.current.removeChannel(currentChannel).catch((error) => {
+          console.error(`Error unsubscribing: ${error}`);
+        });
+        currentChannel = null;
       }
-
-      console.log("Setting up new realtime connection...")
-      setConnectionStatus("connecting")
-
+      setConnectionStatus('connecting');
       const channel = supabaseRef.current
-        .channel(`status_updates`, {
-          config: {
-            broadcast: { self: true },
-          },
-        })
-        .on("broadcast", { event: "status_updated" }, (payload) => {
-          const { user_status } = payload.payload as {
-            user_status: UserWithStatus
-            timestamp: string
-          }
-          console.log("Received status update:", user_status)
+      .channel('status_updates')
+      .on('broadcast', { event: 'status_updated' }, (payload) => {
+        console.log('Realtime update received, triggering refetch...');
+        refetch().catch((error) => {
+          console.error(`Error refetching: ${error}`);
+        });
+      })
+      .subscribe((status) => {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-enum-comparison
+        if (status === 'SUBSCRIBED') {
+          console.log('Realtime connection established');
+          setConnectionStatus('connected');
+          reconnectAttempts = 0
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-enum-comparison
+        } else if (status === 'CHANNEL_ERROR') {
+          console.log('Realtime connection failed, relying on polling');
+          setConnectionStatus('disconnected');
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-enum-comparison
+        } else if (status === 'CLOSED') {
+          console.log('Realtime connection closed');
+          setConnectionStatus('disconnected');
+          if (isComponentMounted && reconnectAttempts < maxReconnectAttempts) {
+            reconnectAttempts++
+            const delay = 2000 * reconnectAttempts
 
-          // Add animation class for new status
-          setNewStatusIds((prev) => new Set([...prev, user_status.user.id]))
+            console.log(`Reconnecting after close ${reconnectAttempts}/${maxReconnectAttempts} in ${delay}ms`)
 
-          // Remove animation class after animation completes
-          setTimeout(() => {
-            setNewStatusIds((prev) => {
-              const newSet = new Set(prev)
-              newSet.delete(user_status.user.id)
-              return newSet
-            })
-          }, 1000)
-
-          setUsersWithStatuses((prevUsers) => {
-            const existingUserIndex = prevUsers.findIndex((u) => u.user.id === user_status.user.id)
-
-            if (existingUserIndex !== -1) {
-              const updatedUsers = [...prevUsers]
-              updatedUsers[existingUserIndex] = {
-                user: user_status.user,
-                status: user_status.status,
-                created_at: user_status.created_at,
-                updated_by: user_status.updated_by,
-              }
-              return updatedUsers
-            } else {
-              return [user_status, ...prevUsers]
+            if (reconnectTimeout) {
+              clearTimeout(reconnectTimeout)
             }
-          })
-        })
-        .subscribe((status) => {
-          console.log("Subscription status:", status)
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-enum-comparison
-          if (status === "SUBSCRIBED") {
-            console.log("Successfully subscribed to status updates!")
-            setConnectionStatus("connected")
-            reconnectAttempts = 0
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-enum-comparison
-          } else if (status === "CLOSED") {
-            console.log("Connection closed")
-            setConnectionStatus("disconnected")
 
-            if (isComponentMounted && reconnectAttempts < maxReconnectAttempts) {
-              reconnectAttempts++
-              const delay = 2000 * reconnectAttempts
-
-              console.log(`Reconnecting after close ${reconnectAttempts}/${maxReconnectAttempts} in ${delay}ms`)
-
-              if (reconnectTimeout) {
-                clearTimeout(reconnectTimeout)
+            reconnectTimeout = setTimeout(() => {
+              if (isComponentMounted) {
+                setUpRealtimeConnection()
               }
-
-              reconnectTimeout = setTimeout(() => {
-                if (isComponentMounted) {
-                  setupRealtimeConnection()
-                }
-              }, delay)
-            } else {
-              console.log("Max reconnection attempts reached or component unmounted")
-            }
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-enum-comparison
-          } else if (status === "CHANNEL_ERROR") {
-            console.error("Channel error - stopping reconnection attempts")
-            setConnectionStatus("disconnected")
+            }, delay)
+          } else {
+            console.log("Max reconnection attempts reached or component unmounted")
           }
-        })
-
-      currentChannel = channel
-      channelRef.current = channel
+        }
+      });
+      currentChannel = channel;
+      channelRef.current = channel;
     }
 
     const initialTimeout = setTimeout(() => {
       if (isComponentMounted) {
-        setupRealtimeConnection()
+        setUpRealtimeConnection()
       }
     }, 1000)
 
     return () => {
       isComponentMounted = false
-
-      if (initialTimeout) {
+      if (initialTimeout)
         clearTimeout(initialTimeout)
-      }
-
-      if (reconnectTimeout) {
+      if (reconnectTimeout)
         clearTimeout(reconnectTimeout)
-      }
 
       if (currentChannel) {
-        console.log("Cleaning up realtime connection...")
+        console.log('Cleaning up realtime connection...');
         supabaseRef.current.removeChannel(currentChannel).catch((error) => {
-          console.error(`Error unsubscribing: ${error}`)
-        })
+          console.error(`Error unsubscribing: ${error}`);
+        });
+        channelRef.current = null;
+      }
+    };
+  }, [isAuthenticated, refetch]);
+
+  // Updated mutation
+  const updateStatusMutation = useMutation({
+    mutationFn: async ({ usersWithStatuses, status }: { usersWithStatuses: UserWithStatus[], status: string }) => {
+      if (usersWithStatuses.length === 0) {
+        const result = await updateUserStatus(status);
+        if (!result.success) throw new Error(result.error);
+        return { type: 'single', result };
+      } else {
+        const result = await updateStatuses(usersWithStatuses, status);
+        if (!result.success) throw new Error(result.error);
+        return { type: 'multiple', result, count: usersWithStatuses.length };
+      }
+    },
+    meta: { errCode: QueryErrorCodes.STATUS_UPDATE_FAILED },
+    onMutate: async ({ usersWithStatuses, status }) => {
+      // Optimistic update logic
+      await queryClient.cancelQueries({ queryKey: ['users-with-statuses'] });
+      const previousData = queryClient.getQueryData<UserWithStatus[]>(['users-with-statuses']);
+
+      if (previousData && usersWithStatuses.length > 0) {
+        const now = new Date().toISOString();
+        const optimisticData = previousData.map(userStatus => {
+          if (usersWithStatuses.some(selected => selected.user.id === userStatus.user.id)) {
+            return {
+              ...userStatus,
+              status,
+              created_at: now,
+            };
+          }
+          return userStatus;
+        });
+        queryClient.setQueryData(['users-with-statuses'], optimisticData);
+
+        // Add animation for optimistic updates
+        const updatedIds = usersWithStatuses.map(u => u.user.id);
+        setNewStatusIds(prev => new Set([...prev, ...updatedIds]));
+
+        // Remove animation after 1 second
+        setTimeout(() => {
+          setNewStatusIds(prev => {
+            const updated = new Set(prev);
+            updatedIds.forEach(id => updated.delete(id));
+            return updated;
+          });
+        }, 1000);
       }
 
-      channelRef.current = null
-    }
-  }, [isAuthenticated])
+      return { previousData };
+    },
+    onSuccess: (data) => {
+      // Handle success in the mutation function
+      void queryClient.invalidateQueries({ queryKey: ['users-with-statuses'] }); // Fixed floating promise
 
-  const formatTime = (timestamp: string) => {
-    const date = new Date(timestamp)
-    const time = date.toLocaleTimeString("en-US", {
-      hour: "numeric",
-      minute: "numeric",
-    })
-    const day = date.getDate()
-    const month = date.toLocaleString("default", { month: "long" })
-    return `${time} - ${month} ${day}`
-  }
+      if (data.type === 'single') {
+        toast.success('Status updated for signed in user.');
+      } else {
+        toast.success(`Status updated for ${data.count} selected users.`);
+      }
+
+      setSelectedUsers([]);
+      setStatusInput('');
+    },
+    onError: (error, _variables, context) => { // Fixed unused variables
+      // Rollback optimistic update
+      if (context?.previousData) {
+        queryClient.setQueryData(['users-with-statuses'], context.previousData);
+      }
+      // Error handling is done in the global mutation cache
+      console.error('Status update failed:', error);
+    },
+  });
+
+  const handleUpdateStatus = () => {
+    if (!isAuthenticated) {
+      toast.error('You must be signed in to update statuses.');
+      return;
+    }
+    if (!statusInput.trim()) {
+      toast.error('Please enter a valid status.');
+      return;
+    }
+
+    updateStatusMutation.mutate({
+      usersWithStatuses: selectedUsers,
+      status: statusInput.trim()
+    });
+  };
+
+  const handleCheckboxChange = (user: UserWithStatus) => {
+    setSelectedUsers((prev) =>
+      prev.some(u => u.user.id === user.user.id)
+        ? prev.filter((prevUser) => prevUser.user.id !== user.user.id)
+        : [...prev, user]
+    );
+  };
+
+  const handleSelectAllChange = () => {
+    if (selectAll) {
+      setSelectedUsers([]);
+    } else {
+      setSelectedUsers(usersWithStatuses);
+    }
+    setSelectAll(!selectAll);
+  };
+
+  useEffect(() => {
+    setSelectAll(
+      selectedUsers.length === usersWithStatuses.length &&
+      usersWithStatuses.length > 0
+    );
+  }, [selectedUsers.length, usersWithStatuses.length]);
 
   const getConnectionIcon = () => {
     switch (connectionStatus) {
@@ -275,44 +289,79 @@ export const StatusList = ({ initialStatuses = [] }: StatusListProps) => {
     }
   }
 
+  const formatTime = (timestamp: string) => {
+    const date = new Date(timestamp);
+    const time = date.toLocaleTimeString('en-US', {
+      hour: 'numeric',
+      minute: 'numeric',
+    });
+    const day = date.getDate();
+    const month = date.toLocaleString('default', { month: 'long' });
+    return `${time} - ${month} ${day}`;
+  };
+
   if (loading) {
     return (
-      <div className="flex justify-center items-center min-h-[400px]">
-        <Loading className="w-full" alpha={0.5} />
+      <div className='flex justify-center items-center min-h-[400px]'>
+        <Loading className='w-full' alpha={0.5} />
       </div>
-    )
+    );
+  }
+
+  if (error) {
+    return (
+      <div className='flex flex-col justify-center items-center min-h-[400px] gap-4'>
+        <p className='text-red-500'>Error loading status updates</p>
+        <Button onClick={() => refetch()} variant='outline'>
+          <RefreshCw className='w-4 h-4 mr-2' />
+          Retry
+        </Button>
+      </div>
+    );
   }
 
   const containerClassName = makeConditionalClassName({
     context: tvMode,
-    defaultClassName: "mx-auto space-y-4",
-    on: "lg:w-11/12 w-full mt-15",
-    off: "w-5/6",
-  })
+    defaultClassName: 'mx-auto space-y-4',
+    on: 'lg:w-11/12 w-full mt-15',
+    off: 'w-5/6',
+  });
 
   const cardClassName = makeConditionalClassName({
     context: tvMode,
-    defaultClassName: "transition-all duration-300 hover:shadow-md",
-    on: "lg:text-4xl",
-    off: "lg:text-base",
-  })
+    defaultClassName: 'transition-all duration-300 hover:shadow-md',
+    on: 'lg:text-4xl',
+    off: 'lg:text-base',
+  });
 
   return (
     <div className={containerClassName}>
-      {/* Connection Status Header */}
-      <div className="flex items-center justify-between mb-6">
-        <div className="flex items-center gap-2">
-          <h2 className={`font-bold ${tvMode ? "text-6xl" : "text-2xl"}`}>Tech Status</h2>
-          <Badge variant="outline" className="flex items-center gap-2">
-            {getConnectionIcon()}
-            <span className="text-xs">{getConnectionText()}</span>
-          </Badge>
+      {/* Status Header */}
+      <div className='flex items-center justify-between mb-6'>
+        <div className='flex items-center gap-2'>
+          <h2 className={`font-bold ${tvMode ? 'text-6xl' : 'text-2xl'}`}>
+            Tech Status
+          </h2>
+          {isFetching ? (
+            <Badge variant="outline" className="flex items-center gap-2">
+              <RefreshCw className='w-4 h-4 animate-spin text-blue-500' />
+              <span className='text-xs'>Updating...</span>
+            </Badge>
+          ) : (
+            <Badge variant="outline" className="flex items-center gap-2">
+              {getConnectionIcon()}
+              <span className='text-xs'>{getConnectionText()}</span>
+            </Badge>
+          )}
         </div>
-
         {!tvMode && usersWithStatuses.length > 0 && (
-          <div className="flex items-center gap-2">
-            <Checkbox id="select-all" checked={selectAll} onCheckedChange={handleSelectAllChange} />
-            <label htmlFor="select-all" className="text-sm font-medium">
+          <div className='flex items-center gap-2'>
+            <Checkbox
+              id='select-all'
+              checked={selectAll}
+              onCheckedChange={handleSelectAllChange}
+            />
+            <label htmlFor='select-all' className='text-sm font-medium'>
               Select All ({selectedUsers.length} selected)
             </label>
           </div>
@@ -320,50 +369,51 @@ export const StatusList = ({ initialStatuses = [] }: StatusListProps) => {
       </div>
 
       {/* Status Cards */}
-      <div className="space-y-3">
+      <div className='space-y-3'>
         {usersWithStatuses.map((userWithStatus) => {
-          const isSelected = selectedUsers.includes(userWithStatus.user.id)
-          const isNewStatus = newStatusIds.has(userWithStatus.user.id)
-          const isUpdatedByOther = userWithStatus.updated_by && userWithStatus.updated_by.id !== userWithStatus.user.id
+          const isSelected = selectedUsers.some(u => u.user.id === userWithStatus.user.id);
+          const isNewStatus = newStatusIds.has(userWithStatus.user.id);
+          const isUpdatedByOther = userWithStatus.updated_by &&
+            userWithStatus.updated_by.id !== userWithStatus.user.id;
 
           return (
             <Card
               key={userWithStatus.user.id}
               className={`
                 ${cardClassName}
-                ${isSelected ? "ring-2 ring-primary" : ""}
-                ${isNewStatus ? "animate-pulse bg-primary/5 border-primary/20" : ""}
+                ${isSelected ? 'ring-2 ring-primary' : ''}
+                ${isNewStatus ? 'animate-pulse bg-primary/5 border-primary/20' : ''}
                 hover:bg-muted/50 cursor-pointer
               `}
             >
-              <CardHeader className="pb-3">
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-3">
+              <CardHeader className='pb-3'>
+                <div className='flex items-center justify-between'>
+                  <div className='flex items-center gap-3'>
                     {!tvMode && (
                       <Checkbox
                         checked={isSelected}
-                        onCheckedChange={() => handleCheckboxChange(userWithStatus.user.id)}
+                        onCheckedChange={() => handleCheckboxChange(userWithStatus)}
                         onClick={(e) => e.stopPropagation()}
                       />
                     )}
                     <BasedAvatar
                       src={userWithStatus.user.avatar_url}
                       fullName={userWithStatus.user.full_name}
-                      className={tvMode ? "w-16 h-16" : "w-12 h-12"}
+                      className={tvMode ? 'w-16 h-16' : 'w-12 h-12'}
                     />
                     <div>
-                      <h3 className={`font-semibold ${tvMode ? "text-5xl" : "text-lg"}`}>
-                        {userWithStatus.user.full_name ?? "Unknown User"}
+                      <h3 className={`font-semibold ${tvMode ? 'text-5xl' : 'text-lg'}`}>
+                        {userWithStatus.user.full_name ?? 'Unknown User'}
                       </h3>
                       {isUpdatedByOther && (
-                        <div className="flex items-center gap-1 text-muted-foreground">
+                        <div className='flex items-center gap-1 text-muted-foreground'>
                           <BasedAvatar
                             src={userWithStatus.updated_by?.avatar_url}
                             fullName={userWithStatus.updated_by?.full_name}
-                            className="w-3 h-3"
+                            className='w-3 h-3'
                           />
                           {userWithStatus.updated_by && (
-                            <span className={`text-xs ${tvMode ? "text-3xl" : ""}`}>
+                            <span className={`text-xs ${tvMode ? 'text-3xl' : ''}`}>
                               Updated by {userWithStatus.updated_by.full_name}
                             </span>
                           )}
@@ -371,84 +421,94 @@ export const StatusList = ({ initialStatuses = [] }: StatusListProps) => {
                       )}
                     </div>
                   </div>
-                  <div className="flex items-center gap-2 text-muted-foreground">
-                    <Clock className={`${tvMode ? "w-8 h-8" : "w-4 h-4"}`} />
-                    <span className={`text-sm ${tvMode ? "text-3xl" : ""}`}>
+                  <div className='flex items-center gap-2 text-muted-foreground'>
+                    <Clock className={`${tvMode ? 'w-8 h-8' : 'w-4 h-4'}`} />
+                    <span className={`text-sm ${tvMode ? 'text-3xl' : ''}`}>
                       {formatTime(userWithStatus.created_at)}
                     </span>
                   </div>
                 </div>
               </CardHeader>
-              <CardContent className="pt-0">
+              <CardContent className='pt-0'>
                 <Drawer>
                   <DrawerTrigger asChild>
                     <div
                       className={`
                         p-4 rounded-lg bg-muted/30 hover:bg-muted/50
                         transition-colors cursor-pointer text-left
-                        ${tvMode ? "text-4xl" : "text-base"}
+                        ${tvMode ? 'text-4xl' : 'text-base'}
                       `}
                       onClick={() => setSelectedHistoryUser(userWithStatus.user)}
                     >
-                      <p className="font-medium">{userWithStatus.status}</p>
+                      <p className='font-medium'>{userWithStatus.status}</p>
                     </div>
                   </DrawerTrigger>
-                  {selectedHistoryUser === userWithStatus.user && <HistoryDrawer user={selectedHistoryUser} />}
+                  {selectedHistoryUser === userWithStatus.user && (
+                    <HistoryDrawer user={selectedHistoryUser} />
+                  )}
                 </Drawer>
               </CardContent>
             </Card>
-          )
+          );
         })}
       </div>
 
       {usersWithStatuses.length === 0 && (
-        <Card className="p-8 text-center">
-          <p className={`text-muted-foreground ${tvMode ? "text-4xl" : "text-lg"}`}>No status updates yet</p>
+        <Card className='p-8 text-center'>
+          <p className={`text-muted-foreground ${tvMode ? 'text-4xl' : 'text-lg'}`}>
+            No status updates yet
+          </p>
         </Card>
       )}
 
       {/* Status Update Input */}
       {!tvMode && (
-        <Card className="p-6 mt-6">
-          <div className="flex flex-col gap-4">
-            <h3 className="text-lg font-semibold">Update Status</h3>
-            <div className="flex gap-4">
+        <Card className='p-6 mt-6'>
+          <div className='flex flex-col gap-4'>
+            <h3 className='text-lg font-semibold'>Update Status</h3>
+            <div className='flex gap-4'>
               <Input
                 autoFocus
-                type="text"
+                type='text'
                 placeholder="What's your status?"
-                className="flex-1 text-base"
+                className='flex-1 text-base'
                 value={statusInput}
                 onChange={(e) => setStatusInput(e.target.value)}
                 onKeyDown={(e) => {
-                  if (e.key === "Enter" && !e.shiftKey) {
-                    e.preventDefault()
-                    updateStatus().catch((error) => {
-                      toast.error(`Failed to update status: ${error as Error}`)
-                    })
+                  if (e.key === 'Enter' && !e.shiftKey && !updateStatusMutation.isPending) {
+                    e.preventDefault();
+                    handleUpdateStatus();
                   }
                 }}
+                disabled={updateStatusMutation.isPending}
               />
               <SubmitButton
-                onClick={updateStatus}
-                disabled={updatingStatus}
-                className="px-6"
+                onClick={handleUpdateStatus}
+                disabled={updateStatusMutation.isPending}
+                className='px-6'
               >
-                {selectedUsers.length > 0 ? `Update ${selectedUsers.length} Users` : "Update Status"}
+                {updateStatusMutation.isPending
+                  ? 'Updating...'
+                  : selectedUsers.length > 0
+                    ? `Update ${selectedUsers.length} Users`
+                    : 'Update Status'
+                }
               </SubmitButton>
             </div>
             {selectedUsers.length > 0 && (
-              <p className="text-sm text-muted-foreground">Updating status for {selectedUsers.length} selected users</p>
+              <p className='text-sm text-muted-foreground'>
+                Updating status for {selectedUsers.length} selected users
+              </p>
             )}
           </div>
         </Card>
       )}
 
       {/* Global Status History Drawer */}
-      <div className="flex justify-center mt-6">
+      <div className='flex justify-center mt-6'>
         <Drawer>
           <DrawerTrigger asChild>
-            <Button variant="outline" className={tvMode ? "text-3xl p-6" : ""}>
+            <Button variant='outline' className={tvMode ? 'text-3xl p-6' : ''}>
               View All Status History
             </Button>
           </DrawerTrigger>
@@ -456,82 +516,5 @@ export const StatusList = ({ initialStatuses = [] }: StatusListProps) => {
         </Drawer>
       </div>
     </div>
-  )
-}
-//'use client';
-
-//import { createClient } from '@/utils/supabase';
-//import { useState, useEffect, useCallback, useRef } from 'react';
-//import { useAuth, useTVMode } from '@/components/context';
-//import {
-  //getRecentUsersWithStatuses,
-  //updateStatuses,
-  //updateUserStatus,
-  //type UserWithStatus,
-//} from '@/lib/hooks';
-//import {
-  //BasedAvatar,
-  //Drawer,
-  //DrawerTrigger,
-  //Loading,
-//} from '@/components/ui';
-//import { SubmitButton } from '@/components/default';
-//import { toast } from 'sonner';
-//import { HistoryDrawer } from '@/components/status';
-//import type { Profile } from '@/utils/supabase';
-//import type { RealtimeChannel } from '@supabase/supabase-js';
-//import { makeConditionalClassName } from '@/lib/utils';
-
-//export const StatusList = (initialStatuses: UserWithStatus[]) => {
-  //const { isAuthenticated } = useAuth();
-  //const { tvMode } = useTVMode();
-  //const [loading, setLoading] = useState(true);
-  //const [selectedUsers, setSelectedUsers] = useState<UserWithStatus[]>([]);
-  //const [selectAll, setSelectAll] = useState(false);
-  //const [updatingStatus, setUpdatingStatus] = useState(false);
-  //const [statusInput, setStatusInput] = useState('');
-  //const [usersWithStatuses, setUsersWithStatuses] = useState<UserWithStatus[]>(initialStatuses);
-  //const [selectedHistoryUser, setSelectedHistoryUser] = useState<UserWithStatus | null>(null);
-  //const channelRef = useRef<RealtimeChannel | null>(null);
-  //const supabaseRef = useRef(createClient());
-
-  //const fetchRecentUsersWithStatuses = useCallback(async () => {
-    //const response = await getRecentUsersWithStatuses();
-    //if (response.success) return response.data;
-    //else toast.error('Error fetching users!');
-    //return [];
-  //}, []);
-
-  //useEffect(() => {
-    //const loadData = async () => {
-      //const data = await fetchRecentUsersWithStatuses();
-      //setUsersWithStatuses(data);
-    //};
-    //loadData()
-      //.catch(()=> toast.error('Error fetching users.'))
-      //.finally(() => setLoading(false));
-  //}, [fetchRecentUsersWithStatuses, isAuthenticated]);
-
-  //const updateStatus = useCallback(async () => {
-    //try {
-      //if (!isAuthenticated) throw new Error('Not authenticated.');
-      //if (!statusInput.trim()) throw new Error('Not a valid status.')
-
-      //setUpdatingStatus(true);
-      //if (selectedUsers.length === 0) {
-        //const result = await updateUserStatus(statusInput);
-        //if (!result.success) throw new Error('Could not updateUserStatus!')
-        //toast.success('Status updated!');
-      //} else {
-        //const result = await updateStatuses(selectedUsers, statusInput);
-      //}
-
-    //} catch (error) {
-      //toast.error(`Error updating statuses: ${error as Error}`);
-    //}
-  //});
-
-  //return (
-    //<div/>
-  //);
-//};
+  );
+};
diff --git a/src/components/status/TechTable.tsx b/src/components/status/TechTable.tsx
index a16042a..39e07e9 100755
--- a/src/components/status/TechTable.tsx
+++ b/src/components/status/TechTable.tsx
@@ -1,7 +1,5 @@
 'use client';
-
-import { createClient } from '@/utils/supabase';
-import { useState, useEffect, useCallback, useRef } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { useAuth, useTVMode } from '@/components/context';
 import {
   getRecentUsersWithStatuses,
@@ -19,8 +17,14 @@ import { SubmitButton } from '@/components/default';
 import { toast } from 'sonner';
 import { HistoryDrawer } from '@/components/status';
 import type { Profile } from '@/utils/supabase';
-import type { RealtimeChannel } from '@supabase/supabase-js';
 import { makeConditionalClassName } from '@/lib/utils';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { RefreshCw, Wifi, WifiOff } from 'lucide-react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { QueryErrorCodes } from '@/components/context';
+import { createClient } from '@/utils/supabase';
+import type { RealtimeChannel } from '@supabase/supabase-js';
 
 type TechTableProps = {
   initialStatuses: UserWithStatus[];
@@ -31,41 +35,194 @@ export const TechTable = ({
 }: TechTableProps) => {
   const { isAuthenticated } = useAuth();
   const { tvMode } = useTVMode();
-  const [loading, setLoading] = useState(true);
+  const queryClient = useQueryClient();
   const [selectedUsers, setSelectedUsers] = useState<UserWithStatus[]>([]);
   const [selectAll, setSelectAll] = useState(false);
   const [statusInput, setStatusInput] = useState('');
-  const [usersWithStatuses, setUsersWithStatuses] =
-    useState<UserWithStatus[]>(initialStatuses);
-  const [selectedHistoryUser, setSelectedHistoryUser] =
-    useState<UserWithStatus | null>(null);
+  const [selectedHistoryUser, setSelectedHistoryUser] = useState<Profile | null>(null);
+  const [connectionStatus, setConnectionStatus] = useState<"connecting" | "connected" | "disconnected">("connecting");
+  const [newStatusIds, setNewStatusIds] = useState<Set<string>>(new Set());
   const channelRef = useRef<RealtimeChannel | null>(null);
   const supabaseRef = useRef(createClient());
 
-  const fetchRecentUsersWithStatuses = useCallback(async () => {
-    try {
-      const response = await getRecentUsersWithStatuses();
-      if (!response.success) throw new Error(response.error);
-      return response.data;
-    } catch (error) {
-      toast.error(`Error fetching technicians: ${error as Error}`);
-      return [];
-    }
-  }, []);
+  // Keep all your existing React Query code exactly as is
+  const {
+    data: usersWithStatuses = initialStatuses,
+    isLoading: loading,
+    error,
+    refetch,
+    isFetching,
+    dataUpdatedAt,
+  } = useQuery({
+    queryKey: ['users-with-statuses'],
+    queryFn: async () => {
+      try {
+        const response = await getRecentUsersWithStatuses();
+        if (!response.success) throw new Error(response.error);
+        return response.data;
+      } catch (error) {
+        toast.error(`Error fetching technicians: ${error instanceof Error ? error.message : 'Unknown error'}`);
+        throw error;
+      }
+    },
+    enabled: isAuthenticated,
+    refetchInterval: 30000, // Changed to 30 seconds as backup
+    refetchOnWindowFocus: true,
+    refetchOnMount: true,
+    initialData: initialStatuses,
+    meta: { errCode: QueryErrorCodes.USERS_FETCH_FAILED },
+  });
 
-  // Initial load
+  // Add this new useEffect for realtime enhancement
   useEffect(() => {
-    const loadData = async () => {
-      const data = await fetchRecentUsersWithStatuses();
-      setUsersWithStatuses(data);
-      setLoading(false);
-    };
-    loadData().catch((error) => {
-      console.error('Error loading data:', error);
-    });
-  }, [fetchRecentUsersWithStatuses, isAuthenticated]);
+    if (!isAuthenticated) return;
+    let reconnectAttempts = 0
+    const maxReconnectAttempts = 3
+    let reconnectTimeout: NodeJS.Timeout
+    let isComponentMounted = true
+    let currentChannel: RealtimeChannel | null = null;
 
-  const updateStatus = useCallback(async () => {
+    const setUpRealtimeConnection = () => {
+      if (!isComponentMounted) return
+      if (currentChannel) {
+        supabaseRef.current.removeChannel(currentChannel).catch((error) => {
+          console.error(`Error unsubscribing: ${error}`);
+        });
+        currentChannel = null;
+      }
+      setConnectionStatus('connecting');
+      const channel = supabaseRef.current
+      .channel('status_updates')
+      .on('broadcast', { event: 'status_updated' }, (payload) => {
+        console.log('Realtime update received, triggering refetch...');
+        refetch().catch((error) => {
+          console.error(`Error refetching: ${error}`);
+        });
+      })
+      .subscribe((status) => {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-enum-comparison
+        if (status === 'SUBSCRIBED') {
+          console.log('Realtime connection established');
+          setConnectionStatus('connected');
+          reconnectAttempts = 0
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-enum-comparison
+        } else if (status === 'CHANNEL_ERROR') {
+          console.log('Realtime connection failed, relying on polling');
+          setConnectionStatus('disconnected');
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-enum-comparison
+        } else if (status === 'CLOSED') {
+          console.log('Realtime connection closed');
+          setConnectionStatus('disconnected');
+          if (isComponentMounted && reconnectAttempts < maxReconnectAttempts) {
+            reconnectAttempts++
+            const delay = 2000 * reconnectAttempts
+            console.log(`Reconnecting after close ${reconnectAttempts}/${maxReconnectAttempts} in ${delay}ms`)
+            if (reconnectTimeout) {
+              clearTimeout(reconnectTimeout)
+            }
+            reconnectTimeout = setTimeout(() => {
+              if (isComponentMounted) {
+                setUpRealtimeConnection()
+              }
+            }, delay)
+          } else {
+            console.log("Max reconnection attempts reached or component unmounted")
+          }
+        }
+      });
+      currentChannel = channel;
+      channelRef.current = channel;
+    }
+
+    const initialTimeout = setTimeout(() => {
+      if (isComponentMounted) {
+        setUpRealtimeConnection()
+      }
+    }, 1000)
+
+    return () => {
+      isComponentMounted = false
+      if (initialTimeout)
+        clearTimeout(initialTimeout)
+      if (reconnectTimeout)
+        clearTimeout(reconnectTimeout)
+      if (currentChannel) {
+        console.log('Cleaning up realtime connection...');
+        supabaseRef.current.removeChannel(currentChannel).catch((error) => {
+          console.error(`Error unsubscribing: ${error}`);
+        });
+        channelRef.current = null;
+      }
+    };
+  }, [isAuthenticated, refetch]);
+
+  // Updated mutation
+  const updateStatusMutation = useMutation({
+    mutationFn: async ({ usersWithStatuses, status }: { usersWithStatuses: UserWithStatus[], status: string }) => {
+      if (usersWithStatuses.length === 0) {
+        const result = await updateUserStatus(status);
+        if (!result.success) throw new Error(result.error);
+        return { type: 'single', result };
+      } else {
+        const result = await updateStatuses(usersWithStatuses, status);
+        if (!result.success) throw new Error(result.error);
+        return { type: 'multiple', result, count: usersWithStatuses.length };
+      }
+    },
+    meta: { errCode: QueryErrorCodes.STATUS_UPDATE_FAILED },
+    onMutate: async ({ usersWithStatuses, status }) => {
+      // Optimistic update logic
+      await queryClient.cancelQueries({ queryKey: ['users-with-statuses'] });
+      const previousData = queryClient.getQueryData<UserWithStatus[]>(['users-with-statuses']);
+      if (previousData && usersWithStatuses.length > 0) {
+        const now = new Date().toISOString();
+        const optimisticData = previousData.map(userStatus => {
+          if (usersWithStatuses.some(selected => selected.user.id === userStatus.user.id)) {
+            return {
+              ...userStatus,
+              status,
+              created_at: now,
+            };
+          }
+          return userStatus;
+        });
+        queryClient.setQueryData(['users-with-statuses'], optimisticData);
+        // Add animation for optimistic updates
+        const updatedIds = usersWithStatuses.map(u => u.user.id);
+        setNewStatusIds(prev => new Set([...prev, ...updatedIds]));
+        // Remove animation after 1 second
+        setTimeout(() => {
+          setNewStatusIds(prev => {
+            const updated = new Set(prev);
+            updatedIds.forEach(id => updated.delete(id));
+            return updated;
+          });
+        }, 1000);
+      }
+      return { previousData };
+    },
+    onSuccess: (data) => {
+      // Handle success in the mutation function
+      void queryClient.invalidateQueries({ queryKey: ['users-with-statuses'] }); // Fixed floating promise
+      if (data.type === 'single') {
+        toast.success('Status updated for signed in user.');
+      } else {
+        toast.success(`Status updated for ${data.count} selected users.`);
+      }
+      setSelectedUsers([]);
+      setStatusInput('');
+    },
+    onError: (error, _variables, context) => { // Fixed unused variables
+      // Rollback optimistic update
+      if (context?.previousData) {
+        queryClient.setQueryData(['users-with-statuses'], context.previousData);
+      }
+      // Error handling is done in the global mutation cache
+      console.error('Status update failed:', error);
+    },
+  });
+
+  const handleUpdateStatus = () => {
     if (!isAuthenticated) {
       toast.error('You must be signed in to update statuses.');
       return;
@@ -74,32 +231,17 @@ export const TechTable = ({
       toast.error('Please enter a valid status.');
       return;
     }
-    try {
-      if (selectedUsers.length === 0) {
-        const result = await updateUserStatus(statusInput);
-        if (!result.success) throw new Error(result.error);
-        toast.success(`Status updated for signed in user.`);
-      } else {
-        const result = await updateStatuses(selectedUsers, statusInput);
-        if (!result.success) throw new Error(result.error);
-        toast.success(
-          `Status updated for ${selectedUsers.length} selected users.`,
-        );
-      }
-      setSelectedUsers([]);
-      setStatusInput('');
-    } catch (error) {
-      const errorMessage =
-        error instanceof Error ? error.message : String(error);
-      toast.error(`Failed to update status: ${errorMessage}`);
-    }
-  }, [isAuthenticated, statusInput, selectedUsers]);
+    updateStatusMutation.mutate({
+      usersWithStatuses: selectedUsers,
+      status: statusInput.trim()
+    });
+  };
 
-  const handleCheckboxChange = (id: string) => {
+  const handleCheckboxChange = (user: UserWithStatus) => {
     setSelectedUsers((prev) =>
-      prev.includes(id)
-        ? prev.filter((prevId) => prevId !== id)
-        : [...prev, id],
+      prev.some(u => u.user.id === user.user.id)
+        ? prev.filter((prevUser) => prevUser.user.id !== user.user.id)
+        : [...prev, user]
     );
   };
 
@@ -107,7 +249,7 @@ export const TechTable = ({
     if (selectAll) {
       setSelectedUsers([]);
     } else {
-      setSelectedUsers(usersWithStatuses.map((tech) => tech.user.id));
+      setSelectedUsers(usersWithStatuses);
     }
     setSelectAll(!selectAll);
   };
@@ -115,132 +257,31 @@ export const TechTable = ({
   useEffect(() => {
     setSelectAll(
       selectedUsers.length === usersWithStatuses.length &&
-        usersWithStatuses.length > 0,
+      usersWithStatuses.length > 0
     );
   }, [selectedUsers.length, usersWithStatuses.length]);
 
-  useEffect(() => {
-    if (!isAuthenticated) return;
+  const getConnectionIcon = () => {
+    switch (connectionStatus) {
+      case "connected":
+        return <Wifi className="w-4 h-4 text-green-500" />
+      case "connecting":
+        return <Wifi className="w-4 h-4 text-yellow-500 animate-pulse" />
+      case "disconnected":
+        return <WifiOff className="w-4 h-4 text-red-500" />
+    }
+  }
 
-    let reconnectAttempts = 0;
-    const maxReconnectAttempts = 3; // Reduced from 5
-    let reconnectTimeout: NodeJS.Timeout;
-    let isComponentMounted = true;
-    let currentChannel: RealtimeChannel | null = null;
-
-    const setupRealtimeConnection = () => {
-      if (!isComponentMounted) return;
-
-      // Clean up any existing channel first
-      if (currentChannel) {
-        supabaseRef.current.removeChannel(currentChannel).catch(console.error);
-        currentChannel = null;
-      }
-
-      console.log('Setting up new realtime connection...');
-
-      const channel = supabaseRef.current
-        .channel(`status_updates`, { // Unique channel name
-          config: {
-            broadcast: { self: true }
-          }
-        })
-        .on('broadcast', { event: 'status_updated' }, (payload) => {
-          const { user_status } = payload.payload as {
-            user_status: UserWithStatus;
-            timestamp: string;
-          };
-          console.log('Received status update:', user_status);
-
-          setUsersWithStatuses((prevUsers) => {
-            const existingUserIndex = prevUsers.findIndex((u) =>
-              u.user.id === user_status.user.id,
-            );
-
-            if (existingUserIndex !== -1) {
-              const updatedUsers = [...prevUsers];
-              updatedUsers[existingUserIndex] = {
-                user: user_status.user,
-                status: user_status.status,
-                created_at: user_status.created_at,
-                updated_by: user_status.updated_by,
-              };
-              return updatedUsers;
-            } else {
-              return [user_status, ...prevUsers];
-            }
-          });
-        })
-        .subscribe((status) => {
-          console.log('Subscription status:', status);
-          // ignore this enum error please
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-enum-comparison
-          if (status === 'SUBSCRIBED') {
-            console.log('Successfully subscribed to status updates!');
-            reconnectAttempts = 0;
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-enum-comparison
-          } else if (status === 'CLOSED') {
-            console.log('Connection closed');
-
-            // Only reconnect if we haven't exceeded max attempts and component is still mounted
-            if (isComponentMounted && reconnectAttempts < maxReconnectAttempts) {
-              reconnectAttempts++;
-              const delay = 2000 * reconnectAttempts; // Linear backoff instead of exponential
-
-              console.log(`Reconnecting after close ${reconnectAttempts}/${maxReconnectAttempts} in ${delay}ms`);
-
-              // Clear any existing timeout
-              if (reconnectTimeout) {
-                clearTimeout(reconnectTimeout);
-              }
-
-              reconnectTimeout = setTimeout(() => {
-                if (isComponentMounted) {
-                  setupRealtimeConnection();
-                }
-              }, delay);
-            } else {
-              console.log('Max reconnection attempts reached or component unmounted');
-            }
-
-          } else if (status === 'CHANNEL_ERROR') {
-            console.error('Channel error - stopping reconnection attempts');
-            // Don't reconnect on channel errors to avoid infinite loops
-          }
-        });
-
-      currentChannel = channel;
-      channelRef.current = channel;
-    };
-
-    // Add a small delay before initial connection to ensure auth is stable
-    const initialTimeout = setTimeout(() => {
-      if (isComponentMounted) {
-        setupRealtimeConnection();
-      }
-    }, 1000);
-
-    return () => {
-      isComponentMounted = false;
-
-      if (initialTimeout) {
-        clearTimeout(initialTimeout);
-      }
-
-      if (reconnectTimeout) {
-        clearTimeout(reconnectTimeout);
-      }
-
-      if (currentChannel) {
-        console.log('Cleaning up realtime connection...');
-        supabaseRef.current.removeChannel(currentChannel).catch((error) => {
-          console.error(`Error unsubscribing: ${error}`);
-        });
-      }
-
-      channelRef.current = null;
-    };
-  }, [isAuthenticated]); // Keep this dependency but make the connection more stable
+  const getConnectionText = () => {
+    switch (connectionStatus) {
+      case "connected":
+        return "Connected"
+      case "connecting":
+        return "Connecting..."
+      case "disconnected":
+        return "Disconnected"
+    }
+  }
 
   const formatTime = (timestamp: string) => {
     const date = new Date(timestamp);
@@ -261,6 +302,18 @@ export const TechTable = ({
     );
   }
 
+  if (error) {
+    return (
+      <div className='flex flex-col justify-center items-center min-h-[400px] gap-4'>
+        <p className='text-red-500'>Error loading status updates</p>
+        <Button onClick={() => refetch()} variant='outline'>
+          <RefreshCw className='w-4 h-4 mr-2' />
+          Retry
+        </Button>
+      </div>
+    );
+  }
+
   const containerClassName = makeConditionalClassName({
     context: tvMode,
     defaultClassName: 'mx-auto',
@@ -284,6 +337,21 @@ export const TechTable = ({
 
   return (
     <div className={containerClassName}>
+      {/* Status Header */}
+      <div className='flex items-center justify-between mb-6'>
+          {isFetching ? (
+            <Badge variant="outline" className="flex items-center gap-2">
+              <RefreshCw className='w-4 h-4 animate-spin text-blue-500' />
+              <span className='text-xs'>Updating...</span>
+            </Badge>
+          ) : (
+            <Badge variant="outline" className="flex items-center gap-2">
+              {getConnectionIcon()}
+              <span className='text-xs'>{getConnectionText()}</span>
+            </Badge>
+          )}
+      </div>
+
       <table className='w-full text-center rounded-md'>
         <thead>
           <tr className='bg-muted'>
@@ -312,55 +380,87 @@ export const TechTable = ({
           </tr>
         </thead>
         <tbody>
-          {usersWithStatuses.map((userWithStatus, index) => (
-            <tr
-              key={userWithStatus.user.id}
-              className={`
-                ${index % 2 === 0 ? 'bg-muted/50' : 'bg-background'}
-                hover:bg-muted/75 transition-all duration-300
-              `}
-            >
-              {!tvMode && (
-                <td className={tCheckboxClassName}>
-                  <input
-                    type='checkbox'
-                    className={checkBoxClassName}
-                    checked={selectedUsers.includes(userWithStatus.user.id)}
-                    onChange={() =>
-                      handleCheckboxChange(userWithStatus.user.id)
-                    }
-                  />
+          {usersWithStatuses.map((userWithStatus, index) => {
+            const isSelected = selectedUsers.some(u => u.user.id === userWithStatus.user.id);
+            const isNewStatus = newStatusIds.has(userWithStatus.user.id);
+
+            return (
+              <tr
+                key={userWithStatus.user.id}
+                className={`
+                  ${index % 2 === 0 ? 'bg-muted/50' : 'bg-background'}
+                  ${isSelected ? 'ring-2 ring-primary' : ''}
+                  ${isNewStatus ? 'animate-pulse bg-primary/5 border-primary/20' : ''}
+                  hover:bg-muted/75 transition-all duration-300
+                `}
+              >
+                {!tvMode && (
+                  <td className={tCheckboxClassName}>
+                    <input
+                      type='checkbox'
+                      className={checkBoxClassName}
+                      checked={isSelected}
+                      onChange={() => handleCheckboxChange(userWithStatus)}
+                    />
+                  </td>
+                )}
+                <td className={tdClassName}>
+                  <div className='flex items-center gap-3'>
+                    <BasedAvatar
+                      src={userWithStatus.user.avatar_url}
+                      fullName={userWithStatus.user.full_name}
+                      className={tvMode ? 'w-16 h-16' : 'w-12 h-12'}
+                    />
+                    <div>
+                      <p className={`font-semibold ${tvMode ? 'text-5xl' : 'text-lg'}`}>
+                        {userWithStatus.user.full_name ?? 'Unknown User'}
+                      </p>
+                      {userWithStatus.updated_by &&
+                       userWithStatus.updated_by.id !== userWithStatus.user.id && (
+                        <div className='flex items-center gap-1 text-muted-foreground'>
+                          <BasedAvatar
+                            src={userWithStatus.updated_by?.avatar_url}
+                            fullName={userWithStatus.updated_by?.full_name}
+                            className='w-3 h-3'
+                          />
+                          <span className={`text-xs ${tvMode ? 'text-3xl' : ''}`}>
+                            Updated by {userWithStatus.updated_by.full_name}
+                          </span>
+                        </div>
+                      )}
+                    </div>
+                  </div>
                 </td>
-              )}
-              <td className={tdClassName}>
-                <div className='flex'>
-                  <BasedAvatar
-                    src={userWithStatus.user.avatar_url}
-                    fullName={userWithStatus.user.full_name}
-                  />
-                  <p>{userWithStatus.user.full_name ?? 'Unknown User'}</p>
-                </div>
-              </td>
-              <td className={tdClassName}>
-                <Drawer>
-                  <DrawerTrigger
-                    className='text-center w-full p-2 rounded-md hover:bg-muted transition-colors'
-                    onClick={() => setSelectedHistoryUser(userWithStatus.user)}
-                  >
-                    {userWithStatus.status}
-                  </DrawerTrigger>
-                  {selectedHistoryUser === userWithStatus.user && (
-                    <HistoryDrawer user={selectedHistoryUser} />
-                  )}
-                </Drawer>
-              </td>
-              <td className={tdClassName}>
-                {formatTime(userWithStatus.created_at)}
-              </td>
-            </tr>
-          ))}
+                <td className={tdClassName}>
+                  <Drawer>
+                    <DrawerTrigger
+                      className='text-center w-full p-2 rounded-md hover:bg-muted transition-colors'
+                      onClick={() => setSelectedHistoryUser(userWithStatus.user)}
+                    >
+                      {userWithStatus.status}
+                    </DrawerTrigger>
+                    {selectedHistoryUser === userWithStatus.user && (
+                      <HistoryDrawer user={selectedHistoryUser} />
+                    )}
+                  </Drawer>
+                </td>
+                <td className={tdClassName}>
+                  {formatTime(userWithStatus.created_at)}
+                </td>
+              </tr>
+            );
+          })}
         </tbody>
       </table>
+
+      {usersWithStatuses.length === 0 && (
+        <div className='p-8 text-center'>
+          <p className={`text-muted-foreground ${tvMode ? 'text-4xl' : 'text-lg'}`}>
+            No status updates yet
+          </p>
+        </div>
+      )}
+
       {!tvMode && (
         <div className='mx-auto flex flex-row items-center justify-center py-5 gap-4'>
           <input
@@ -375,12 +475,12 @@ export const TechTable = ({
             value={statusInput}
             onChange={(e) => setStatusInput(e.target.value)}
             onKeyDown={(e) => {
-              if (e.key === 'Enter') {
-                updateStatus().catch((error) => {
-                  toast.error(`Failed to update status: ${error as Error}`);
-                });
+              if (e.key === 'Enter' && !updateStatusMutation.isPending) {
+                e.preventDefault();
+                handleUpdateStatus();
               }
             }}
+            disabled={updateStatusMutation.isPending}
           />
           <SubmitButton
             size='xl'
@@ -389,14 +489,39 @@ export const TechTable = ({
               disabled:opacity-50 disabled:cursor-not-allowed \
               cursor-pointer'
             }
-            onClick={() => updateStatus()}
-            disabled={!statusInput.trim()}
+            onClick={handleUpdateStatus}
+            disabled={!statusInput.trim() || updateStatusMutation.isPending}
             disabledNotLoading={true}
           >
-            Update
+            {updateStatusMutation.isPending
+              ? 'Updating...'
+              : selectedUsers.length > 0
+                ? `Update ${selectedUsers.length} Users`
+                : 'Update Status'
+            }
           </SubmitButton>
         </div>
       )}
+
+      {selectedUsers.length > 0 && !tvMode && (
+        <div className='text-center mt-4'>
+          <p className='text-sm text-muted-foreground'>
+            Updating status for {selectedUsers.length} selected users
+          </p>
+        </div>
+      )}
+
+      {/* Global Status History Drawer */}
+      <div className='flex justify-center mt-6'>
+        <Drawer>
+          <DrawerTrigger asChild>
+            <Button variant='outline' className={tvMode ? 'text-3xl p-6' : ''}>
+              View All Status History
+            </Button>
+          </DrawerTrigger>
+          <HistoryDrawer />
+        </Drawer>
+      </div>
     </div>
   );
 };
diff --git a/src/lib/hooks/public.ts b/src/lib/hooks/public.ts
index f799c32..b3ddf3a 100644
--- a/src/lib/hooks/public.ts
+++ b/src/lib/hooks/public.ts
@@ -4,6 +4,36 @@ import { createClient, type Profile } from '@/utils/supabase';
 import { getSignedUrl, getUser } from '@/lib/hooks';
 import type { Result } from '.';
 
+export const getOriginalProfile = async (
+  userId: string | null = null,
+): Promise<Result<Profile>> => {
+  try {
+    if (userId == null) {
+      const user = await getUser();
+      if (!user.success || !user.data.id)
+        throw new Error('User not found');
+      userId = user.data.id;
+    }
+    const supabase = createClient();
+    const { data, error } = await supabase
+      .from('profiles')
+      .select('*')
+      .eq('id', userId)
+      .single();
+    if (error) throw error;
+
+    return { success: true, data: data as Profile };
+  } catch (error) {
+    return {
+      success: false,
+      error:
+        error instanceof Error
+          ? error.message
+          : 'Unknown error getting profile',
+    };
+  }
+};
+
 export const getProfile = async (
   userId: string | null = null
 ): Promise<Result<Profile>> => {
diff --git a/src/lib/hooks/status.ts b/src/lib/hooks/status.ts
index 01188c5..80d3f5c 100644
--- a/src/lib/hooks/status.ts
+++ b/src/lib/hooks/status.ts
@@ -1,7 +1,7 @@
 'use client';
 import { createClient } from '@/utils/supabase';
 import type { Profile, Result } from '@/utils/supabase';
-import { getUser, getProfile, getSignedUrl } from '@/lib/hooks';
+import { getUser, getOriginalProfile, getSignedUrl } from '@/lib/hooks';
 
 export type UserWithStatus = {
   id?: string;
@@ -67,9 +67,9 @@ export const getRecentUsersWithStatuses = async (): Promise<
     for (const userWithStatus of filtered) {
       if (userWithStatus.user.avatar_url)
         userWithStatus.user.avatar_url =
-          await getAvatarUrl(userWithStatus.updated_by?.avatar_url);
+          await getAvatarUrl(userWithStatus.user.avatar_url);
       if (userWithStatus.updated_by?.avatar_url)
-        userWithStatus.user.avatar_url =
+        userWithStatus.updated_by.avatar_url =
           await getAvatarUrl(userWithStatus.updated_by?.avatar_url);
       filteredWithAvatars.push(userWithStatus);
     }
@@ -115,7 +115,7 @@ export const updateStatuses = async (
 ): Promise<Result<void>> => {
   try {
     const supabase = createClient();
-    const profileResponse = await getProfile();
+    const profileResponse = await getOriginalProfile();
     if (!profileResponse.success) throw new Error('Not authenticated!');
     const user = profileResponse.data;
 
@@ -155,7 +155,7 @@ export const updateUserStatus = async (
 ): Promise<Result<void>> => {
   try {
     const supabase = createClient();
-    const profileResponse = await getProfile();
+    const profileResponse = await getOriginalProfile();
     if (!profileResponse.success)
       throw new Error(`Not authenticated! ${profileResponse.error}`);
     const userProfile = profileResponse.data;
