diff --git a/resources/js/hooks/use-mobile.tsx b/resources/js/hooks/use-mobile.tsx
index 710ad6e1..bb0efd42 100644
--- a/resources/js/hooks/use-mobile.tsx
+++ b/resources/js/hooks/use-mobile.tsx
@@ -2,20 +2,29 @@ import { useSyncExternalStore } from 'react';
 
 const MOBILE_BREAKPOINT = 768;
 
-const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+const mql = (): MediaQueryList | null => {
+    if (typeof window === 'undefined') return null;
+    return window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+};
 
 function mediaQueryListener(callback: (event: MediaQueryListEvent) => void) {
-    mql.addEventListener('change', callback);
+    mql()?.addEventListener('change', callback);
 
     return () => {
-        mql.removeEventListener('change', callback);
+        mql()?.removeEventListener('change', callback);
     };
 }
 
-function isSmallerThanBreakpoint() {
-    return mql.matches;
+function isSmallerThanBreakpoint(): boolean {
+    return mql()?.matches || false;
 }
 
+const getServerSnapshot = (): boolean => false;
+
 export function useIsMobile() {
-    return useSyncExternalStore(mediaQueryListener, isSmallerThanBreakpoint);
+    return useSyncExternalStore(
+        mediaQueryListener,
+        isSmallerThanBreakpoint,
+        getServerSnapshot,
+    );
 }