diff --git a/web/modals/threads/thread-settings-general-tab.css b/web/modals/threads/thread-settings-general-tab.css
new file mode 100644
--- /dev/null
+++ b/web/modals/threads/thread-settings-general-tab.css
@@ -0,0 +1,38 @@
+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%;
+}
+
+div.form_textarea_container {
+  margin-top: 1px;
+}
+
+div.edit_thread_color_container {
+  margin-top: -5px;
+}
+
+div.color_title {
+  margin-top: 4px;
+}
diff --git a/web/modals/threads/thread-settings-general-tab.react.js b/web/modals/threads/thread-settings-general-tab.react.js
new file mode 100644
--- /dev/null
+++ b/web/modals/threads/thread-settings-general-tab.react.js
@@ -0,0 +1,76 @@
+// @flow
+
+import * as React from 'react';
+
+import Input from '../input.react.js';
+import ColorSelector from './color-selector.react.js';
+import css from './thread-settings-general-tab.css';
+
+type ThreadSettingsGeneralTabProps = {
+  +threadNameValue: string,
+  +threadNamePlaceholder: string,
+  +threadNameOnChange: (event: SyntheticEvent<HTMLInputElement>) => void,
+  +threadNameDisabled: boolean,
+  +threadNameInputRef: (nameInput: ?HTMLInputElement) => void,
+  +threadDescriptionValue: string,
+  +threadDescriptionOnChange: (
+    event: SyntheticEvent<HTMLTextAreaElement>,
+  ) => void,
+  +threadDescriptionDisabled: boolean,
+  +threadColorCurrentColor: string,
+  +threadColorOnColorSelection: (color: string) => void,
+};
+function ThreadSettingsGeneralTab(
+  props: ThreadSettingsGeneralTabProps,
+): React.Node {
+  const {
+    threadNameValue,
+    threadNamePlaceholder,
+    threadNameOnChange,
+    threadNameDisabled,
+    threadNameInputRef,
+    threadDescriptionValue,
+    threadDescriptionOnChange,
+    threadDescriptionDisabled,
+    threadColorCurrentColor,
+    threadColorOnColorSelection,
+  } = props;
+
+  return (
+    <div>
+      <div>
+        <div className={css.form_title}>Thread name</div>
+        <div className={css.form_content}>
+          <Input
+            type="text"
+            value={threadNameValue}
+            placeholder={threadNamePlaceholder}
+            onChange={threadNameOnChange}
+            disabled={threadNameDisabled}
+            ref={threadNameInputRef}
+          />
+        </div>
+      </div>
+      <div className={css.form_textarea_container}>
+        <div className={css.form_title}>Description</div>
+        <div className={css.form_content}>
+          <textarea
+            value={threadDescriptionValue}
+            placeholder="Thread description"
+            onChange={threadDescriptionOnChange}
+            disabled={threadDescriptionDisabled}
+          />
+        </div>
+      </div>
+      <div className={css.edit_thread_color_container}>
+        <div className={`${css.form_title} ${css.color_title}`}>Color</div>
+        <ColorSelector
+          currentColor={threadColorCurrentColor}
+          onColorSelection={threadColorOnColorSelection}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default ThreadSettingsGeneralTab;
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
@@ -39,9 +39,8 @@
 import Button from '../../components/button.react';
 import { useModalContext } from '../../modals/modal-provider.react';
 import { useSelector } from '../../redux/redux-utils';
-import Input from '../input.react';
 import Modal from '../modal.react';
-import ColorSelector from './color-selector.react';
+import ThreadSettingsGeneralTab from './thread-settings-general-tab.react';
 import css from './thread-settings-modal.css';
 
 const { COMMUNITY_OPEN_SUBTHREAD, COMMUNITY_SECRET_SUBTHREAD } = threadTypes;
@@ -190,39 +189,18 @@
     let mainContent = null;
     if (this.state.currentTabType === 'general') {
       mainContent = (
-        <div>
-          <div>
-            <div className={css.form_title}>Thread name</div>
-            <div className={css.form_content}>
-              <Input
-                type="text"
-                value={firstLine(this.possiblyChangedValue('name'))}
-                placeholder={this.namePlaceholder()}
-                onChange={this.onChangeName}
-                disabled={inputDisabled}
-                ref={this.nameInputRef}
-              />
-            </div>
-          </div>
-          <div className={css.form_textarea_container}>
-            <div className={css.form_title}>Description</div>
-            <div className={css.form_content}>
-              <textarea
-                value={this.possiblyChangedValue('description')}
-                placeholder="Thread description"
-                onChange={this.onChangeDescription}
-                disabled={inputDisabled}
-              />
-            </div>
-          </div>
-          <div className={css.edit_thread_color_container}>
-            <div className={`${css.form_title} ${css.color_title}`}>Color</div>
-            <ColorSelector
-              currentColor={this.possiblyChangedValue('color')}
-              onColorSelection={this.onChangeColor}
-            />
-          </div>
-        </div>
+        <ThreadSettingsGeneralTab
+          threadNameValue={firstLine(this.possiblyChangedValue('name'))}
+          threadNamePlaceholder={this.namePlaceholder()}
+          threadNameOnChange={this.onChangeName}
+          threadNameDisabled={inputDisabled}
+          threadNameInputRef={this.nameInputRef}
+          threadDescriptionValue={this.possiblyChangedValue('description')}
+          threadDescriptionOnChange={this.onChangeDescription}
+          threadDescriptionDisabled={inputDisabled}
+          threadColorCurrentColor={this.possiblyChangedValue('color')}
+          threadColorOnColorSelection={this.onChangeColor}
+        />
       );
     } else if (this.state.currentTabType === 'privacy') {
       mainContent = (