diff --git a/web/settings/account-delete-modal.css b/web/settings/account-delete-modal.css
--- a/web/settings/account-delete-modal.css
+++ b/web/settings/account-delete-modal.css
@@ -1,5 +1,4 @@
 .modal_body {
-  padding: 24px 32px;
   color: var(--fg);
 }
 .modal_body p {
@@ -8,19 +7,18 @@
 
 .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;
 }
diff --git a/web/settings/account-delete-modal.react.js b/web/settings/account-delete-modal.react.js
--- a/web/settings/account-delete-modal.react.js
+++ b/web/settings/account-delete-modal.react.js
@@ -34,10 +34,13 @@
 
     const [errorMessage, setErrorMessage] = React.useState('');
 
-    let errorMsg;
-    if (errorMessage) {
-      errorMsg = <div className={css.form_error}>{errorMessage}</div>;
-    }
+    const errorMsg = React.useMemo(() => {
+      if (!errorMessage) {
+        return <div className={css.errorPlaceholder} />;
+      }
+
+      return <div className={css.form_error}>{errorMessage}</div>;
+    }, [errorMessage]);
 
     const deleteAction = React.useCallback(async () => {
       try {
@@ -58,12 +61,33 @@
           deleteKeyserverAccountActionTypes,
           deleteAction(),
         );
+        setErrorMessage('unknown error');
       },
-      [dispatchActionPromise, deleteAction],
+      [deleteAction, 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} />
@@ -71,18 +95,7 @@
               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>
-              {errorMsg}
-            </div>
+            {errorMsg}
           </form>
         </div>
       </Modal>