diff --git a/web/modals/alert.css b/web/modals/alert.css
--- 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
--- a/web/modals/alert.react.js
+++ b/web/modals/alert.react.js
@@ -16,18 +16,19 @@
   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>
   );