diff --git a/web/modals/threads/settings/thread-settings-delete-button.react.js b/web/modals/threads/settings/thread-settings-delete-button.react.js
new file mode 100644
--- /dev/null
+++ b/web/modals/threads/settings/thread-settings-delete-button.react.js
@@ -0,0 +1,43 @@
+// @flow
+
+import * as React from 'react';
+
+import type { SetState } from 'lib/types/hook-types.js';
+import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
+
+import { useOnDeleteThread } from './thread-settings-utils.js';
+import Button, { buttonThemes } from '../../../components/button.react.js';
+
+type Props = {
+  +threadInfo: ThreadInfo,
+  +threadSettingsOperationInProgress: boolean,
+  +setErrorMessage: SetState<?string>,
+};
+
+function ThreadSettingsDeleteButton(props: Props): React.Node {
+  const { threadInfo, threadSettingsOperationInProgress, setErrorMessage } =
+    props;
+
+  const onDeleteThread = useOnDeleteThread({
+    threadInfo: threadInfo,
+    setErrorMessage,
+  });
+
+  const threadSettingsDeleteButton = React.useMemo(
+    () => (
+      <Button
+        onClick={onDeleteThread}
+        disabled={threadSettingsOperationInProgress}
+        variant="filled"
+        buttonColor={buttonThemes.danger}
+      >
+        Delete
+      </Button>
+    ),
+    [onDeleteThread, threadSettingsOperationInProgress],
+  );
+
+  return threadSettingsDeleteButton;
+}
+
+export default ThreadSettingsDeleteButton;
diff --git a/web/modals/threads/settings/thread-settings-delete-tab.css b/web/modals/threads/settings/thread-settings-delete-tab.css
--- a/web/modals/threads/settings/thread-settings-delete-tab.css
+++ b/web/modals/threads/settings/thread-settings-delete-tab.css
@@ -1,9 +1,3 @@
-form.container {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-}
-
 div.warning_container {
   display: flex;
   flex-direction: row;
diff --git a/web/modals/threads/settings/thread-settings-delete-tab.react.js b/web/modals/threads/settings/thread-settings-delete-tab.react.js
--- a/web/modals/threads/settings/thread-settings-delete-tab.react.js
+++ b/web/modals/threads/settings/thread-settings-delete-tab.react.js
@@ -3,61 +3,21 @@
 import * as React from 'react';
 
 import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
-import { type SetState } from 'lib/types/hook-types.js';
-import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 
-import SubmitSection from './submit-section.react.js';
 import css from './thread-settings-delete-tab.css';
-import { useOnDeleteThread } from './thread-settings-utils.js';
-import { buttonThemes } from '../../../components/button.react.js';
-
-type ThreadSettingsDeleteTabProps = {
-  +threadSettingsOperationInProgress: boolean,
-  +threadInfo: ThreadInfo,
-  +setErrorMessage: SetState<?string>,
-  +errorMessage?: ?string,
-};
-
-function ThreadSettingsDeleteTab(
-  props: ThreadSettingsDeleteTabProps,
-): React.Node {
-  const {
-    threadSettingsOperationInProgress,
-    threadInfo,
-    setErrorMessage,
-    errorMessage,
-  } = props;
-
-  const onDeleteThread = useOnDeleteThread({
-    threadInfo,
-    setErrorMessage,
-  });
 
+function ThreadSettingsDeleteTab(): React.Node {
   return (
-    <form method="POST" className={css.container}>
-      <div>
-        <div className={css.warning_container}>
-          <SWMansionIcon
-            icon="warning-circle"
-            className={css.warning_icon}
-            size={26}
-          />
-          <p className={css.deletion_warning}>
-            Your chat will be permanently deleted. There is no way to reverse
-            this.
-          </p>
-        </div>
-      </div>
-      <SubmitSection
-        errorMessage={errorMessage}
-        onClick={onDeleteThread}
-        variant="filled"
-        buttonColor={buttonThemes.danger}
-        disabled={threadSettingsOperationInProgress}
-      >
-        Delete
-      </SubmitSection>
-    </form>
+    <div className={css.warning_container}>
+      <SWMansionIcon
+        icon="warning-circle"
+        className={css.warning_icon}
+        size={26}
+      />
+      <p className={css.deletion_warning}>
+        Your chat will be permanently deleted. There is no way to reverse this.
+      </p>
+    </div>
   );
 }
 
diff --git a/web/modals/threads/settings/thread-settings-modal.react.js b/web/modals/threads/settings/thread-settings-modal.react.js
--- a/web/modals/threads/settings/thread-settings-modal.react.js
+++ b/web/modals/threads/settings/thread-settings-modal.react.js
@@ -23,6 +23,7 @@
 import { type ThreadChanges } from 'lib/types/thread-types.js';
 import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';
 
+import ThreadSettingsDeleteButton from './thread-settings-delete-button.react.js';
 import ThreadSettingsDeleteTab from './thread-settings-delete-tab.react.js';
 import ThreadSettingsGeneralTab from './thread-settings-general-tab.react.js';
 import css from './thread-settings-modal.css';
@@ -223,14 +224,7 @@
           />
         );
       }
-      return (
-        <ThreadSettingsDeleteTab
-          threadSettingsOperationInProgress={changeInProgress}
-          threadInfo={threadInfo}
-          setErrorMessage={setErrorMessage}
-          errorMessage={errorMessage}
-        />
-      );
+      return <ThreadSettingsDeleteTab />;
     }, [
       availableRelationshipActions,
       changeInProgress,
@@ -242,6 +236,20 @@
       threadInfo,
     ]);
 
+    const primaryButton = React.useMemo(() => {
+      if (!threadInfo) {
+        return null;
+      }
+
+      return (
+        <ThreadSettingsDeleteButton
+          threadInfo={threadInfo}
+          threadSettingsOperationInProgress={changeInProgress}
+          setErrorMessage={setErrorMessage}
+        />
+      );
+    }, [changeInProgress, threadInfo]);
+
     if (!threadInfo) {
       return (
         <Modal onClose={modalContext.popModal} name="Invalid chat">
@@ -258,9 +266,10 @@
         onClose={modalContext.popModal}
         icon="settings"
         size="fit-content"
+        subheader={tabs}
+        primaryButton={primaryButton}
       >
         <div className={css.modal_body}>
-          {tabs}
           <div className={css.tab_body}>{tabContent}</div>
         </div>
       </Modal>