diff --git a/web/modals/modal.css b/web/modals/modal.css
index 0ed13e23f..483528beb 100644
--- a/web/modals/modal.css
+++ b/web/modals/modal.css
@@ -1,96 +1,91 @@
 div.modal-overlay {
   position: fixed;
   left: 0;
   top: 0;
   bottom: 0;
   z-index: 4;
   width: 100%;
   background-color: rgba(0, 0, 0, 0.4);
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: center;
   overflow: auto;
 }
 div.resizable-modal-overlay {
   min-height: 60px;
 }
-div.small-modal-overlay {
-  padding-top: 100px;
-}
-div.large-modal-overlay {
-  padding-top: 50px;
-}
 div.modal-container {
   background: var(--bg);
   background-size: 3000px 2000px;
   max-width: 330px;
   border-radius: 15px;
   display: flex;
   min-height: 0;
   max-height: 500px;
 }
 div.large-modal-container {
   max-width: 500px;
 }
 div.modal {
   position: relative;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.1);
   background-color: var(--modal-bg);
   border-radius: 15px;
   flex: 1;
   display: flex;
   flex-direction: column;
 }
 div.large-modal-container div.modal {
   width: 500px;
 }
 div.fixed-height-modal {
   height: 100%;
 }
 span.modal-close {
   float: right;
   font-size: 32px;
   font-weight: 300;
   line-height: 30px;
   color: var(--fg);
 }
 span.modal-close:hover {
   cursor: pointer;
 }
 div.modal-header {
   padding: 32px 40px 16px 40px;
 }
 div.modal-header > h2 {
   font-size: var(--xl-font-20);
   font-weight: var(--bold);
   color: var(--fg);
   display: flex;
   align-items: center;
 }
 div.modal-header > h2 svg {
   padding-right: 8px;
   display: flex;
 }
 
 div.intro-modal {
   padding: 10px 21px 12px 21px;
   border-radius: 5px;
   border: 1px solid #c8c8c8;
   background-color: #f8f8f8;
   width: 310px;
   position: fixed;
   font-family: var(--font-stack);
   margin-top: 100px;
   box-shadow: 2px 3px 6px 0px rgba(0, 0, 0, 0.1);
 }
 
 @media only screen and (-webkit-min-device-pixel-ratio: 2),
   only screen and (min--moz-device-pixel-ratio: 2),
   only screen and (-o-min-device-pixel-ratio: 2/1),
   only screen and (min-device-pixel-ratio: 2),
   only screen and (min-resolution: 320dpi),
   only screen and (min-resolution: 2dppx) {
   div.modal-container {
     background: var(--bg);
   }
 }
diff --git a/web/modals/modal.react.js b/web/modals/modal.react.js
index 9446d8139..532559495 100644
--- a/web/modals/modal.react.js
+++ b/web/modals/modal.react.js
@@ -1,115 +1,112 @@
 // @flow
 
 import classNames from 'classnames';
 import invariant from 'invariant';
 import * as React from 'react';
 
 import SWMansionIcon, { type Icon } from '../SWMansionIcon.react';
 import css from './modal.css';
 
 export type ModalSize = 'small' | 'large';
 type Props = {
   +name: React.Node,
   +icon?: Icon,
   +onClose: () => void,
   +withCloseButton?: boolean,
   +children?: React.Node,
   +size?: ModalSize,
   +fixedHeight?: boolean,
 };
 class Modal extends React.PureComponent<Props> {
   static defaultProps: { +size: ModalSize, fixedHeight: boolean } = {
     size: 'small',
     fixedHeight: true,
   };
   overlay: ?HTMLDivElement;
 
   componentDidMount() {
     invariant(this.overlay, 'overlay ref unset');
     this.overlay.focus();
   }
 
   render(): React.Node {
     const {
       size,
       children,
       onClose,
       fixedHeight,
       name,
       icon,
       withCloseButton = true,
     } = this.props;
 
-    const overlayClasses = classNames(
-      css['modal-overlay'],
-      { [css['small-modal-overlay']]: size === 'small' },
-      { [css['large-modal-overlay']]: size === 'large' },
-      { [css['resizable-modal-overlay']]: !fixedHeight },
-    );
+    const overlayClasses = classNames(css['modal-overlay'], {
+      [css['resizable-modal-overlay']]: !fixedHeight,
+    });
     const modalContainerClasses = classNames(css['modal-container'], {
       [css['large-modal-container']]: size === 'large',
     });
     const modalClasses = classNames(css['modal'], {
       [css['fixed-height-modal']]: fixedHeight,
     });
 
     let headerIcon;
     if (icon) {
       headerIcon = <SWMansionIcon size={24} icon={icon} />;
     }
 
     let cornerCloseButton;
     if (withCloseButton) {
       cornerCloseButton = (
         <span className={css['modal-close']} onClick={onClose}>
           <SWMansionIcon size={24} icon="cross" />
         </span>
       );
     }
 
     return (
       <div
         className={overlayClasses}
         ref={this.overlayRef}
         onClick={this.onBackgroundClick}
         tabIndex={0}
         onKeyDown={this.onKeyDown}
       >
         <div className={modalContainerClasses}>
           <div className={modalClasses}>
             <div className={css['modal-header']}>
               {cornerCloseButton}
               <h2>
                 {headerIcon}
                 {name}
               </h2>
             </div>
             {children}
           </div>
         </div>
       </div>
     );
   }
 
   overlayRef: (overlay: ?HTMLDivElement) => void = overlay => {
     this.overlay = overlay;
   };
 
   onBackgroundClick: (
     event: SyntheticEvent<HTMLDivElement>,
   ) => void = event => {
     if (event.target === this.overlay) {
       this.props.onClose();
     }
   };
 
   onKeyDown: (
     event: SyntheticKeyboardEvent<HTMLDivElement>,
   ) => void = event => {
     if (event.keyCode === 27) {
       this.props.onClose();
     }
   };
 }
 
 export default Modal;