diff --git a/web/modals/modal.css b/web/modals/modal.css
--- a/web/modals/modal.css
+++ b/web/modals/modal.css
@@ -62,3 +62,16 @@
   line-height: 18px;
   color: var(--modal-fg);
 }
+
+.modalContentContainer {
+  padding: 16px 32px 24px;
+}
+
+.buttonContainer {
+  background-color: var(--modal-background-secondary-default);
+  padding: 16px 32px;
+}
+
+.primaryButtonContainer > button {
+  width: 100%;
+}
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
@@ -22,6 +22,7 @@
   +size?: ModalSize,
   +modalHeaderCentered?: boolean,
   +secondaryHeaderButton?: React.Node,
+  +primaryButton?: React.Node,
 };
 
 type ModalProps = {
@@ -40,6 +41,7 @@
     withCloseButton = true,
     modalHeaderCentered = false,
     secondaryHeaderButton,
+    primaryButton,
   } = props;
 
   const modalContainerClasses = classNames(css.modalContainer, {
@@ -88,6 +90,19 @@
     return <h2 className={css.subtitle}>{subtitle}</h2>;
   }, [subtitle]);
 
+  const buttonContainer = React.useMemo(() => {
+    if (!primaryButton) {
+      return null;
+    }
+
+    const className = classNames(
+      css.buttonContainer,
+      css.primaryButtonContainer,
+    );
+
+    return <div className={className}>{primaryButton}</div>;
+  }, [primaryButton]);
+
   const modal = React.useMemo(
     () => (
       <ModalOverlay onClose={onClose}>
@@ -102,11 +117,13 @@
             </div>
             {subtitleNode}
           </div>
-          {children}
+          <div className={css.modalContentContainer}>{children}</div>
+          {buttonContainer}
         </div>
       </ModalOverlay>
     ),
     [
+      buttonContainer,
       children,
       headerButtons,
       headerIcon,