diff --git a/src/features/MediaQuery/hooks.tsx b/src/features/MediaQuery/hooks.tsx
index 3318c3bc..b8bd9d59 100644
--- a/src/features/MediaQuery/hooks.tsx
+++ b/src/features/MediaQuery/hooks.tsx
@@ -12,10 +12,23 @@ export const useMediaQuery = (query: string) => {
     const listener = (event: MediaQueryListEvent) => {
       setQueryMatches(event.matches)
     }
-    mediaQuery.addEventListener('change', listener)
+
+    try {
+      // Chrome & Firefox & Safari version >= 14
+      mediaQuery.addEventListener('change', listener)
+    } catch {
+      // Safari
+      mediaQuery.addListener(listener)
+    }
 
     return () => {
-      mediaQuery.removeEventListener('change', listener)
+      try {
+        // Chrome & Firefox & Safari version >= 14
+        mediaQuery.removeEventListener('change', listener)
+      } catch {
+        // Safari
+        mediaQuery.removeListener(listener)
+      }
     }
   }, [mediaQuery])