diff --git a/beta/src/components/Layout/useMediaQuery.tsx b/beta/src/components/Layout/useMediaQuery.tsx
index d35c796b..3d541bd7 100644
--- a/beta/src/components/Layout/useMediaQuery.tsx
+++ b/beta/src/components/Layout/useMediaQuery.tsx
@@ -17,14 +17,14 @@ const useMediaQuery = (width: number) => {
 
   useEffect(() => {
     const media = window.matchMedia(`(max-width: ${width}px)`);
-    media.addListener(updateTarget);
+    media.addEventListener('change', updateTarget);
 
     // Check on mount (callback is not called until a change occurs)
     if (media.matches) {
       setTargetReached(true);
     }
 
-    return () => media.removeListener(updateTarget);
+    return () => media.removeEventListener('change', updateTarget);
   }, [updateTarget, width]);
 
   return targetReached;
diff --git a/beta/src/pages/_document.tsx b/beta/src/pages/_document.tsx
index 51da08cc..969a659e 100644
--- a/beta/src/pages/_document.tsx
+++ b/beta/src/pages/_document.tsx
@@ -46,7 +46,7 @@ class MyDocument extends Document {
                   }
                   setTheme(initialTheme);
 
-                  darkQuery.addListener(function (e) {
+                  darkQuery.addEventListener('change', function (e) {
                     if (!preferredTheme) {
                       setTheme(e.matches ? 'dark' : 'light');
                     }