diff --git a/src/lib/hooks/useMediaQuery.ts b/src/lib/hooks/useMediaQuery.ts
index 0d7a61d..9b9b3dd 100644
--- a/src/lib/hooks/useMediaQuery.ts
+++ b/src/lib/hooks/useMediaQuery.ts
@@ -1,16 +1,21 @@
-import { useEffect, useMemo, useState } from 'react';
+'use client';
+
+import { useEffect, useState } from 'react';
 
 export function useMediaQuery(mq: string) {
 
-    const mql = useMemo(() => matchMedia(mq), [mq]);
-    const [matches, setMatch] = useState(mql.matches);
+    const [matches, setMatch] = useState(
+        () => typeof window !== 'undefined' ? window.matchMedia(mq).matches : false,
+    );
 
     useEffect(() => {
-        const listener = (e: any) => setMatch(e.matches);
-        mql.addEventListener('change', listener);
-
-        return () => mql.removeEventListener('change', listener);
-    }, [mq, mql]);
+        if (typeof window !== 'undefined') {
+            const mql = window.matchMedia(mq);
+            const listener = (e: any) => setMatch(e.matches);
+            mql.addEventListener('change', listener);
+            return () => mql.removeEventListener('change', listener);
+        }
+    }, [mq]);
 
     return matches;
 }