diff --git a/web/modals/alert.css b/web/modals/alert.css
index acf18aa0a..8b54f759e 100644
--- a/web/modals/alert.css
+++ b/web/modals/alert.css
@@ -1,15 +1,7 @@
 div.modal_body {
-  padding: 20px;
-  color: var(--fg);
-  background-color: var(--modal-bg);
-  border-radius: 16px;
+  color: var(--text-background-primary-default);
   flex: 1;
   display: flex;
   flex-direction: column;
   text-align: center;
 }
-
-.ok_button {
-  width: 100%;
-  margin-top: 24px;
-}
diff --git a/web/modals/alert.react.js b/web/modals/alert.react.js
index bfa3e8bb3..587cc8995 100644
--- a/web/modals/alert.react.js
+++ b/web/modals/alert.react.js
@@ -1,36 +1,37 @@
 // @flow
 
 import * as React from 'react';
 
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 
 import css from './alert.css';
 import Modal from './modal.react.js';
 import Button from '../components/button.react.js';
 
 type AlertProps = {
   +title: string,
   +children: string,
 };
 function Alert(props: AlertProps): React.Node {
   const { title, children } = props;
   const { popModal } = useModalContext();
 
+  const primaryButton = React.useMemo(
+    () => (
+      <Button onClick={popModal} type="submit" variant="filled">
+        OK
+      </Button>
+    ),
+    [popModal],
+  );
+
   return (
-    <Modal name={title} onClose={popModal}>
+    <Modal name={title} onClose={popModal} primaryButton={primaryButton}>
       <div className={css.modal_body}>
         <p>{children}</p>
-        <Button
-          onClick={popModal}
-          type="submit"
-          variant="filled"
-          className={css.ok_button}
-        >
-          OK
-        </Button>
       </div>
     </Modal>
   );
 }
 
 export default Alert;