diff --git a/src/components/modal.jsx b/src/components/modal.jsx
index f1aaaf0e..0587b3ce 100644
--- a/src/components/modal.jsx
+++ b/src/components/modal.jsx
@@ -41,6 +41,24 @@ function Modal({ children, onClose, onClick, class: className }) {
   );
   useCloseWatcher(onClose, [onClose]);
 
+  useEffect(() => {
+    const $deckContainers = document.querySelectorAll('.deck-container');
+    if (children) {
+      $deckContainers.forEach(($deckContainer) => {
+        $deckContainer.setAttribute('inert', '');
+      });
+    } else {
+      $deckContainers.forEach(($deckContainer) => {
+        $deckContainer.removeAttribute('inert');
+      });
+    }
+    return () => {
+      $deckContainers.forEach(($deckContainer) => {
+        $deckContainer.removeAttribute('inert');
+      });
+    };
+  }, [children]);
+
   const Modal = (
     <div
       ref={(node) => {
diff --git a/src/pages/status.jsx b/src/pages/status.jsx
index 50c3b305..01585a54 100644
--- a/src/pages/status.jsx
+++ b/src/pages/status.jsx
@@ -153,6 +153,18 @@ function StatusPage(params) {
     return () => clearTimeout(timer);
   }, [showMediaOnly]);
 
+  useEffect(() => {
+    const $deckContainers = document.querySelectorAll('.deck-container');
+    $deckContainers.forEach(($deckContainer) => {
+      $deckContainer.setAttribute('inert', '');
+    });
+    return () => {
+      $deckContainers.forEach(($deckContainer) => {
+        $deckContainer.removeAttribute('inert');
+      });
+    };
+  }, []);
+
   return (
     <div class="deck-backdrop">
       {showMedia ? (