diff --git a/web/modals/threads/members/add-members-modal.react.js b/web/modals/threads/members/add-members-modal.react.js
new file mode 100644
index 000000000..1fb127ed8
--- /dev/null
+++ b/web/modals/threads/members/add-members-modal.react.js
@@ -0,0 +1,95 @@
+// @flow
+
+import * as React from 'react';
+
+import Button from '../../../components/button.react';
+import SearchModal from '../../search-modal.react';
+import AddMembersList from './add-members-list.react';
+import css from './members-modal.css';
+
+type ContentProps = {
+  +searchText: string,
+  +threadID: string,
+  +onClose: () => void,
+};
+
+function AddMembersModalContent(props: ContentProps): React.Node {
+  const { onClose } = props;
+
+  const [pendingUsersToAdd, setPendingUsersToAdd] = React.useState<
+    $ReadOnlySet<string>,
+  >(new Set());
+
+  const userSearchResults = [];
+
+  const onSwitchUser = React.useCallback(
+    userID =>
+      setPendingUsersToAdd(users => {
+        const newUsers = new Set(users);
+        if (newUsers.has(userID)) {
+          newUsers.delete(userID);
+        } else {
+          newUsers.add(userID);
+        }
+        return newUsers;
+      }),
+    [],
+  );
+
+  return (
+    <div className={css.addMembersContent}>
+      <div className={css.addMembersListContainer}>
+        <AddMembersList
+          userListItems={userSearchResults}
+          switchUser={onSwitchUser}
+          pendingUsersToAdd={pendingUsersToAdd}
+        />
+      </div>
+      <div className={css.addMembersFooter}>
+        <Button onClick={onClose} variant="secondary">
+          Cancel
+        </Button>
+        <Button
+          disabled={!pendingUsersToAdd.size}
+          variant="primary"
+          onClick={() => {}}
+        >
+          Add selected members
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+type Props = {
+  +threadID: string,
+  +onClose: () => void,
+};
+
+function AddMembersModal(props: Props): React.Node {
+  const { threadID, onClose } = props;
+
+  const addMembersModalContent = React.useCallback(
+    (searchText: string) => (
+      <AddMembersModalContent
+        searchText={searchText}
+        threadID={threadID}
+        onClose={onClose}
+      />
+    ),
+    [onClose, threadID],
+  );
+
+  return (
+    <SearchModal
+      name="Add members"
+      searchPlaceholder="Search members"
+      onClose={onClose}
+      size="fit-content"
+    >
+      {addMembersModalContent}
+    </SearchModal>
+  );
+}
+
+export default AddMembersModal;
diff --git a/web/modals/threads/members/members-modal.css b/web/modals/threads/members/members-modal.css
index 7db8ed8b2..13a668ab8 100644
--- a/web/modals/threads/members/members-modal.css
+++ b/web/modals/threads/members/members-modal.css
@@ -1,93 +1,114 @@
 div.modalContentContainer {
   width: 383px;
   height: 617px;
 }
 
 div.membersList {
   overflow: auto;
   padding: 8px 0;
   color: var(--members-modal-member-text);
 }
 
 div.noScroll {
   overflow: hidden;
 }
 
 div.memberContainer {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   padding: 8px 16px;
 }
 
 div.memberContainer:hover {
   color: var(--members-modal-member-text-hover);
 }
 
 div.memberContainerWithMenuOpen {
   color: var(--members-modal-member-text-hover);
 }
 
 div.memberInfo {
   font-size: var(--l-font-18);
   display: flex;
   align-items: center;
   gap: 10px;
 }
 
 div.memberAction {
   position: relative;
 }
 
 h5.memberletterHeader {
   margin: 16px;
   color: var(--members-modal-member-text);
   font-size: var(--s-font-14);
 }
 
 div.noUsers {
   padding-top: 16px;
   text-align: center;
 }
 
+div.addMembersContent {
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  color: var(--fg);
+  row-gap: 16px;
+  width: 383px;
+  height: 617px;
+}
+
+div.addMembersListContainer {
+  overflow: auto;
+  flex: 1;
+}
+
+div.addMembersFooter {
+  display: flex;
+  justify-content: end;
+  column-gap: 16px;
+}
+
 div.addMemberItemsGroupHeader {
   font-size: var(--s-font-14);
   color: var(--add-members-group-header-color);
   margin: 16px;
 }
 
 button.addMemberItem {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   color: var(--add-members-item-color);
   font-size: var(--l-font-18);
   background-color: transparent;
   border: none;
   width: 100%;
 }
 
 button.addMemberItem:hover {
   color: var(--add-members-item-color-hover);
 }
 
 button.addMemberItem:disabled {
   color: var(--add-members-item-disabled-color);
   cursor: not-allowed;
 }
 
 button.addMemberItem:hover:disabled {
   color: var(--add-members-item-disabled-color-hover);
 }
 
 button.addMemberItem .label {
   padding: 8px 16px;
 }
 
 button.addMemberItem .danger {
   color: var(--add-members-remove-pending-color);
 }
 button.addMemberItem:hover .danger {
   color: var(--add-members-remove-pending-color-hover);
 }