diff --git a/web/modals/modal.react.js b/web/modals/modal.react.js
index 3b66a8c52..1f68556c3 100644
--- a/web/modals/modal.react.js
+++ b/web/modals/modal.react.js
@@ -1,103 +1,108 @@
 // @flow
 
 import classNames from 'classnames';
 import * as React from 'react';
 
 import SWMansionIcon, { type Icon } from '../SWMansionIcon.react';
 import css from './modal.css';
 
 export type ModalSize = 'small' | 'large' | 'fit-content';
-type Props = {
+
+export type ModalOverridableProps = {
   +name: string,
   +icon?: Icon,
   +onClose: () => void,
   +withCloseButton?: boolean,
-  +children?: React.Node,
   +size?: ModalSize,
 };
 
-function Modal(props: Props): React.Node {
+type ModalProps = {
+  ...ModalOverridableProps,
+  +children?: React.Node,
+};
+
+function Modal(props: ModalProps): React.Node {
   const {
     size = 'small',
     children,
     onClose,
     name,
     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(
     () =>
       classNames(css.modalContainer, {
         [css.modalContainerLarge]: size === 'large',
         [css.modalContainerSmall]: size === 'small',
       }),
     [size],
   );
 
   const cornerCloseButton = React.useMemo(() => {
     if (!withCloseButton) {
       return null;
     }
     return (
       <span className={css.modalClose} onClick={onClose}>
         <SWMansionIcon size={24} icon="cross" />
       </span>
     );
   }, [onClose, withCloseButton]);
 
   const headerIcon = React.useMemo(() => {
     if (!icon) {
       return null;
     }
     return <SWMansionIcon size={24} icon={icon} />;
   }, [icon]);
 
   return (
     <div
       className={css.modalOverlay}
       ref={overlayRef}
       onClick={onBackgroundClick}
       tabIndex={0}
       onKeyDown={onKeyDown}
     >
       <div className={modalContainerClasses}>
         <div className={css.modalHeader}>
           <h2 className={css.title}>
             {headerIcon}
             {name}
           </h2>
           {cornerCloseButton}
         </div>
         {children}
       </div>
     </div>
   );
 }
 
 export default Modal;
diff --git a/web/modals/search-modal.react.js b/web/modals/search-modal.react.js
index 8b9adb17e..cb70189b1 100644
--- a/web/modals/search-modal.react.js
+++ b/web/modals/search-modal.react.js
@@ -1,39 +1,37 @@
 // @flow
 
 import * as React from 'react';
 
 import Search from '../components/search.react';
-import Modal, { type ModalSize } from './modal.react';
+import Modal, { type ModalOverridableProps } from './modal.react';
 import css from './search-modal.css';
 
 type Props = {
-  +name: string,
-  +searchPlaceholder: string,
-  +size?: ModalSize,
-  +onClose: () => void,
+  ...ModalOverridableProps,
   +children: (searchText: string) => React.Node,
+  +searchPlaceholder: string,
 };
 
 function SearchModal(props: Props): React.Node {
   const [searchText, setSearchText] = React.useState('');
-  const { name, searchPlaceholder, size, onClose, children } = props;
+  const { children, searchPlaceholder, ...modalProps } = props;
   const child = React.useMemo(() => children(searchText), [
     children,
     searchText,
   ]);
 
   return (
-    <Modal name={name} onClose={onClose} size={size}>
+    <Modal {...modalProps}>
       <div className={css.container}>
         <Search
           onChangeText={setSearchText}
           searchText={searchText}
           placeholder={searchPlaceholder}
         />
         {child}
       </div>
     </Modal>
   );
 }
 
 export default SearchModal;