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
@@ -11,7 +11,7 @@
 type Props = {
   +name: React.Node,
   +icon?: Icon,
-  +onClose: () => void,
+  +onClose?: () => void,
   +children?: React.Node,
   +size?: ModalSize,
   +fixedHeight?: boolean,
@@ -49,6 +49,15 @@
       headerIcon = <SWMansionIcon size={24} icon={icon} />;
     }
 
+    let cornerCloseButton;
+    if (onClose) {
+      cornerCloseButton = (
+        <span className={css['modal-close']} onClick={onClose}>
+          <SWMansionIcon size={24} icon="cross" />
+        </span>
+      );
+    }
+
     return (
       <div
         className={overlayClasses}
@@ -60,9 +69,7 @@
         <div className={modalContainerClasses}>
           <div className={modalClasses}>
             <div className={css['modal-header']}>
-              <span className={css['modal-close']} onClick={onClose}>
-                ×
-              </span>
+              {cornerCloseButton}
               <h2>
                 {headerIcon}
                 {name}
@@ -83,7 +90,7 @@
     event: SyntheticEvent<HTMLDivElement>,
   ) => void = event => {
     if (event.target === this.overlay) {
-      this.props.onClose();
+      this.props.onClose?.();
     }
   };
 
@@ -91,7 +98,7 @@
     event: SyntheticKeyboardEvent<HTMLDivElement>,
   ) => void = event => {
     if (event.keyCode === 27) {
-      this.props.onClose();
+      this.props.onClose?.();
     }
   };
 }