diff --git a/web/modals/modal-overlay.css b/web/modals/modal-overlay.css
new file mode 100644
--- /dev/null
+++ b/web/modals/modal-overlay.css
@@ -0,0 +1,13 @@
+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;
+}
diff --git a/web/modals/modal-overlay.react.js b/web/modals/modal-overlay.react.js
new file mode 100644
--- /dev/null
+++ b/web/modals/modal-overlay.react.js
@@ -0,0 +1,54 @@
+// @flow
+
+import * as React from 'react';
+
+import css from './modal-overlay.css';
+
+type ModalOverlayProps = {
+  +onClose: () => void,
+  +children?: React.Node,
+};
+
+function ModalOverlay(props: ModalOverlayProps): React.Node {
+  const { children, onClose } = props;
+
+  const overlayRef = React.useRef();
+
+  React.useEffect(() => {
+    if (overlayRef.current) {
+      overlayRef.current.focus();
+    }
+  }, []);
+
+  const onBackgroundClick = React.useCallback(
+    event => {
+      if (event.target === overlayRef.current) {
+        onClose();
+      }
+    },
+    [onClose],
+  );
+
+  const onKeyDown = React.useCallback(
+    event => {
+      if (event.keyCode === 27) {
+        onClose();
+      }
+    },
+    [onClose],
+  );
+
+  return (
+    <div
+      className={css.modalOverlay}
+      ref={overlayRef}
+      onClick={onBackgroundClick}
+      tabIndex={0}
+      onKeyDown={onKeyDown}
+    >
+      {children}
+    </div>
+  );
+}
+
+export default ModalOverlay;
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
@@ -4,6 +4,7 @@
 import * as React from 'react';
 
 import SWMansionIcon, { type Icon } from '../SWMansionIcon.react';
+import ModalOverlay from './modal-overlay.react';
 import css from './modal.css';
 
 export type ModalSize = 'small' | 'large' | 'fit-content';
@@ -30,31 +31,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 +60,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 +71,7 @@
         </div>
         {children}
       </div>
-    </div>
+    </ModalOverlay>
   );
 }