diff --git a/web/modals/threads/thread-settings-delete-tab.css b/web/modals/threads/thread-settings-delete-tab.css
new file mode 100644
--- /dev/null
+++ b/web/modals/threads/thread-settings-delete-tab.css
@@ -0,0 +1,43 @@
+div.modal_body p.confirm_account_password {
+  margin-bottom: 4px;
+  color: var(--fg);
+}
+
+div.form_title {
+  padding: 6px 6px 0 0;
+  font-size: 14px;
+  font-weight: 600;
+  vertical-align: top;
+  color: var(--fg);
+}
+div.form_content {
+  display: flex;
+  font-family: var(--font-stack);
+  color: var(--fg);
+  margin-top: 4px;
+  margin-bottom: 8px;
+}
+div.form_content input {
+  margin-bottom: 4px;
+}
+
+div.form_content textarea {
+  padding: 12px;
+  background: var(--modal-bg);
+  color: var(--fg);
+  border: 1px solid var(--border-color);
+  font-size: var(--m-font-16);
+  border-radius: 4px;
+  width: 100%;
+}
+
+.italic {
+  font-style: italic;
+  color: var(--fg);
+}
+
+div.edit_thread_account_password {
+  border-top: 2px solid #efefef;
+  padding-top: 4px;
+  margin-top: 2px;
+}
diff --git a/web/modals/threads/thread-settings-delete-tab.react.js b/web/modals/threads/thread-settings-delete-tab.react.js
new file mode 100644
--- /dev/null
+++ b/web/modals/threads/thread-settings-delete-tab.react.js
@@ -0,0 +1,51 @@
+// @flow
+
+import * as React from 'react';
+
+import css from './thread-settings-modal.css';
+
+type ThreadSettingsDeleteTabProps = {
+  +accountPassword: string,
+  +onChangeAccountPassword: (event: SyntheticEvent<HTMLInputElement>) => void,
+  +inputDisabled: boolean,
+  +accountPasswordInputRef: (accountPasswordInput: ?HTMLInputElement) => void,
+};
+
+function ThreadSettingsDeleteTab(
+  props: ThreadSettingsDeleteTabProps,
+): React.Node {
+  const {
+    accountPassword,
+    onChangeAccountPassword,
+    inputDisabled,
+    accountPasswordInputRef,
+  } = props;
+  return (
+    <>
+      <div>
+        <p className={css.italic}>
+          Your thread will be permanently deleted. There is no way to reverse
+          this.
+        </p>
+      </div>
+      <div className={css.edit_thread_account_password}>
+        <p className={css.confirm_account_password}>
+          Please enter your account password to confirm your identity
+        </p>
+        <div className={css.form_title}>Account password</div>
+        <div className={css.form_content}>
+          <input
+            type="password"
+            placeholder="Personal account password"
+            value={accountPassword}
+            onChange={onChangeAccountPassword}
+            disabled={inputDisabled}
+            ref={accountPasswordInputRef}
+          />
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default ThreadSettingsDeleteTab;
diff --git a/web/modals/threads/thread-settings-modal.react.js b/web/modals/threads/thread-settings-modal.react.js
--- a/web/modals/threads/thread-settings-modal.react.js
+++ b/web/modals/threads/thread-settings-modal.react.js
@@ -36,6 +36,7 @@
 import { useModalContext } from '../../modals/modal-provider.react';
 import { useSelector } from '../../redux/redux-utils';
 import Modal from '../modal.react';
+import ThreadSettingsDeleteTab from './thread-settings-delete-tab.react';
 import ThreadSettingsGeneralTab from './thread-settings-general-tab.react';
 import css from './thread-settings-modal.css';
 import ThreadSettingsPrivacyTab from './thread-settings-privacy-tab.react';
@@ -208,30 +209,12 @@
       );
     } else if (this.state.currentTabType === 'delete') {
       mainContent = (
-        <>
-          <div>
-            <p className={css.italic}>
-              Your thread will be permanently deleted. There is no way to
-              reverse this.
-            </p>
-          </div>
-          <div className={css.edit_thread_account_password}>
-            <p className={css.confirm_account_password}>
-              Please enter your account password to confirm your identity
-            </p>
-            <div className={css.form_title}>Account password</div>
-            <div className={css.form_content}>
-              <input
-                type="password"
-                placeholder="Personal account password"
-                value={this.state.accountPassword}
-                onChange={this.onChangeAccountPassword}
-                disabled={inputDisabled}
-                ref={this.accountPasswordInputRef}
-              />
-            </div>
-          </div>
-        </>
+        <ThreadSettingsDeleteTab
+          accountPassword={this.state.accountPassword}
+          onChangeAccountPassword={this.onChangeAccountPassword}
+          inputDisabled={inputDisabled}
+          accountPasswordInputRef={this.accountPasswordInputRef}
+        />
       );
     }