diff --git a/web/modals/modal.css b/web/modals/modal.css
--- a/web/modals/modal.css
+++ b/web/modals/modal.css
@@ -1,17 +1,3 @@
-div.modalOverlay {
-  position: fixed;
-  left: 0;
-  top: 0;
-  height: 100%;
-  z-index: 4;
-  width: 100%;
-  background-color: rgba(0, 0, 0, 0.9);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
 div.modalContainer {
   display: flex;
   background-color: var(--modal-bg);
diff --git a/web/modals/modal.react.js b/web/modals/modal.react.js
--- a/web/modals/modal.react.js
+++ b/web/modals/modal.react.js
@@ -3,6 +3,8 @@
 import classNames from 'classnames';
 import * as React from 'react';
 
+import ModalOverlay from 'lib/components/modal.react';
+
 import SWMansionIcon, { type Icon } from '../SWMansionIcon.react';
 import css from './modal.css';
 
@@ -30,31 +32,6 @@
     icon,
     withCloseButton = true,
   } = props;
-  const overlayRef = React.useRef();
-
-  const onBackgroundClick = React.useCallback(
-    event => {
-      if (event.target === overlayRef.current) {
-        onClose();
-      }
-    },
-    [onClose],
-  );
-
-  const onKeyDown = React.useCallback(
-    event => {
-      if (event.keyCode === 27) {
-        onClose();
-      }
-    },
-    [onClose],
-  );
-
-  React.useEffect(() => {
-    if (overlayRef.current) {
-      overlayRef.current.focus();
-    }
-  }, []);
 
   const modalContainerClasses = React.useMemo(
     () =>
@@ -84,13 +61,7 @@
   }, [icon]);
 
   return (
-    <div
-      className={css.modalOverlay}
-      ref={overlayRef}
-      onClick={onBackgroundClick}
-      tabIndex={0}
-      onKeyDown={onKeyDown}
-    >
+    <ModalOverlay onClose={onClose}>
       <div className={modalContainerClasses}>
         <div className={css.modalHeader}>
           <h2 className={css.title}>
@@ -101,7 +72,7 @@
         </div>
         {children}
       </div>
-    </div>
+    </ModalOverlay>
   );
 }