diff --git a/src/hooks/use-mobile.tsx b/src/hooks/use-mobile.tsx
index 99548db2..d2487bac 100644
--- a/src/hooks/use-mobile.tsx
+++ b/src/hooks/use-mobile.tsx
@@ -6,14 +6,23 @@ export function useIsMobile(): boolean | undefined {
   const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
 
   React.useEffect(() => {
+    // Guard against server-side rendering
     if (typeof window === 'undefined') return;
     
     const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    
+    // Use MediaQueryList.matches instead of window.innerWidth for consistency
     const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+      setIsMobile(mql.matches);
     };
+    
+    // Set initial value
+    setIsMobile(mql.matches);
+    
+    // Listen for changes
     mql.addEventListener("change", onChange);
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    
+    // Cleanup listener on unmount
     return () => mql.removeEventListener("change", onChange);
   }, []);