diff --git a/web/settings/account-delete-modal.css b/web/settings/account-delete-modal.css
index 306fe03eb..a6ce8ac4e 100644
--- a/web/settings/account-delete-modal.css
+++ b/web/settings/account-delete-modal.css
@@ -1,26 +1,29 @@
 .modal_body {
-  padding: 24px 32px;
   color: var(--fg);
 }
 .modal_body p {
   font-size: var(--s-font-14);
 }
 
 .deletion_warning {
   font-weight: var(--bold);
-  margin-bottom: 16px;
 }
 
-.form_footer {
-  display: flex;
-  flex-direction: row-reverse;
-  justify-content: space-between;
-  padding-top: 24px;
-}
 .form_error {
   font-size: var(--xs-font-12);
   color: var(--error);
   font-style: italic;
-  padding-left: 6px;
-  align-self: center;
+  height: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+}
+
+.errorPlaceholder {
+  height: 24px;
+}
+
+.infoContainer {
+  display: flex;
+  column-gap: 8px;
 }
diff --git a/web/settings/account-delete-modal.react.js b/web/settings/account-delete-modal.react.js
index 848075165..0c2be8ba1 100644
--- a/web/settings/account-delete-modal.react.js
+++ b/web/settings/account-delete-modal.react.js
@@ -1,94 +1,105 @@
 // @flow
 
 import * as React from 'react';
 
 import {
   useDeleteAccount,
   deleteAccountActionTypes,
 } from 'lib/actions/user-actions.js';
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 
 import css from './account-delete-modal.css';
 import Button, { buttonThemes } from '../components/button.react.js';
 import Modal from '../modals/modal.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 
 const deleteAccountLoadingStatusSelector = createLoadingStatusSelector(
   deleteAccountActionTypes,
 );
 
 const AccountDeleteModal: React.ComponentType<{}> = React.memo<{}>(
   function AccountDeleteModal(): React.Node {
     const inputDisabled = useSelector(
       state => deleteAccountLoadingStatusSelector(state) === 'loading',
     );
 
     const callDeleteAccount = useDeleteAccount();
     const dispatchActionPromise = useDispatchActionPromise();
     const { popModal } = useModalContext();
 
     const [errorMessage, setErrorMessage] = React.useState('');
     let error;
     if (errorMessage) {
       error = (
         <div className={css.form_error}>
           <p>{errorMessage}</p>
         </div>
       );
     }
 
     const deleteAccountAction = React.useCallback(async () => {
       try {
         setErrorMessage('');
         const response = await callDeleteAccount();
         popModal();
         return response;
       } catch (e) {
         setErrorMessage('unknown error deleting account');
         throw e;
       }
     }, [callDeleteAccount, popModal]);
 
     const onDelete = React.useCallback(
       (event: SyntheticEvent<HTMLButtonElement>) => {
         event.preventDefault();
         void dispatchActionPromise(
           deleteAccountActionTypes,
           deleteAccountAction(),
         );
       },
-      [dispatchActionPromise, deleteAccountAction],
+      [deleteAccountAction, dispatchActionPromise],
+    );
+
+    const primaryButton = React.useMemo(
+      () => (
+        <Button
+          variant="filled"
+          buttonColor={buttonThemes.danger}
+          type="submit"
+          onClick={onDelete}
+          disabled={inputDisabled}
+        >
+          Delete Account
+        </Button>
+      ),
+      [inputDisabled, onDelete],
     );
 
     return (
-      <Modal name="Delete Account" onClose={popModal} size="large">
+      <Modal
+        name="Delete Account"
+        onClose={popModal}
+        size="large"
+        primaryButton={primaryButton}
+      >
         <div className={css.modal_body}>
           <form method="POST">
-            <SWMansionIcon icon="warning-circle" size={22} />
-            <p className={css.deletion_warning}>
-              Your account will be permanently deleted. There is no way to
-              reverse this.
-            </p>
-            <div className={css.form_footer}>
-              <Button
-                variant="filled"
-                buttonColor={buttonThemes.danger}
-                type="submit"
-                onClick={onDelete}
-                disabled={inputDisabled}
-              >
-                Delete Account
-              </Button>
-              {error}
+            <div className={css.infoContainer}>
+              <SWMansionIcon icon="warning-circle" size={22} />
+              <p className={css.deletion_warning}>
+                Your account will be permanently deleted. There is no way to
+                reverse this.
+              </p>
             </div>
+            {error}
           </form>
         </div>
       </Modal>
     );
   },
 );
 
 export default AccountDeleteModal;