diff --git a/web/modals/threads/settings/thread-settings-relationship-tab.css b/web/modals/threads/settings/thread-settings-relationship-tab.css
new file mode 100644
index 000000000..deb385db4
--- /dev/null
+++ b/web/modals/threads/settings/thread-settings-relationship-tab.css
@@ -0,0 +1,5 @@
+div.container {
+  display: flex;
+  flex-direction: column;
+  row-gap: 10px;
+}
diff --git a/web/modals/threads/settings/thread-settings-relationship-tab.react.js b/web/modals/threads/settings/thread-settings-relationship-tab.react.js
new file mode 100644
index 000000000..8e04e2344
--- /dev/null
+++ b/web/modals/threads/settings/thread-settings-relationship-tab.react.js
@@ -0,0 +1,35 @@
+// @flow
+
+import * as React from 'react';
+
+import { type SetState } from 'lib/types/hook-types';
+import { type RelationshipButton } from 'lib/types/relationship-types';
+import type { UserInfo } from 'lib/types/user-types';
+
+import ThreadSettingsRelationshipButton from './thread-settings-relationship-button.react';
+import css from './thread-settings-relationship-tab.css';
+
+type Props = {
+  +setErrorMessage: SetState<string>,
+  +relationshipButtons: $ReadOnlyArray<RelationshipButton>,
+  +otherUserInfo: UserInfo,
+};
+
+function ThreadSettingsRelationshipTab(props: Props): React.Node {
+  const { relationshipButtons, otherUserInfo, setErrorMessage } = props;
+  const buttons = React.useMemo(
+    () =>
+      relationshipButtons.map(action => (
+        <ThreadSettingsRelationshipButton
+          key={action}
+          relationshipButton={action}
+          otherUserInfo={otherUserInfo}
+          setErrorMessage={setErrorMessage}
+        />
+      )),
+    [otherUserInfo, relationshipButtons, setErrorMessage],
+  );
+  return <div className={css.container}>{buttons}</div>;
+}
+
+export default ThreadSettingsRelationshipTab;