diff --git a/web/modals/search-modal.css b/web/modals/search-modal.css
new file mode 100644
index 000000000..3c26732b3
--- /dev/null
+++ b/web/modals/search-modal.css
@@ -0,0 +1,6 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  margin: 16px;
+}
diff --git a/web/modals/search-modal.react.js b/web/modals/search-modal.react.js
new file mode 100644
index 000000000..b2c63fea3
--- /dev/null
+++ b/web/modals/search-modal.react.js
@@ -0,0 +1,38 @@
+// @flow
+
+import * as React from 'react';
+
+import Search from '../components/search.react';
+import Modal from './modal.react';
+import css from './search-modal.css';
+
+type Props = {
+  +name: string,
+  +searchPlaceholder: string,
+  +onClose: () => void,
+  +children: (searchText: string) => React.Node,
+};
+
+function SearchModal(props: Props): React.Node {
+  const [searchText, setSearchText] = React.useState('');
+  const { name, searchPlaceholder, onClose, children } = props;
+  const child = React.useMemo(() => children(searchText), [
+    children,
+    searchText,
+  ]);
+
+  return (
+    <Modal name={name} onClose={onClose}>
+      <div className={css.container}>
+        <Search
+          onChangeText={setSearchText}
+          searchText={searchText}
+          placeholder={searchPlaceholder}
+        />
+        {child}
+      </div>
+    </Modal>
+  );
+}
+
+export default SearchModal;
diff --git a/web/modals/threads/members/members-modal.css b/web/modals/threads/members/members-modal.css
index e276cc09e..b285d61eb 100644
--- a/web/modals/threads/members/members-modal.css
+++ b/web/modals/threads/members/members-modal.css
@@ -1,53 +1,46 @@
-div.membersContainer {
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  margin: 16px;
-}
-
 div.membersList {
   overflow: scroll;
   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;
 }
diff --git a/web/modals/threads/members/members-modal.react.js b/web/modals/threads/members/members-modal.react.js
index f52706c8e..8064cfd86 100644
--- a/web/modals/threads/members/members-modal.react.js
+++ b/web/modals/threads/members/members-modal.react.js
@@ -1,91 +1,102 @@
 // @flow
 
 import * as React from 'react';
 
 import { threadInfoSelector } from 'lib/selectors/thread-selectors';
 import { userStoreSearchIndex } from 'lib/selectors/user-selectors';
 import { memberHasAdminPowers, memberIsAdmin } from 'lib/shared/thread-utils';
 import { type RelativeMemberInfo } from 'lib/types/thread-types';
 
-import Search from '../../../components/search.react';
 import Tabs from '../../../components/tabs.react';
 import { useSelector } from '../../../redux/redux-utils';
-import Modal from '../../modal.react';
+import SearchModal from '../../search-modal.react';
 import ThreadMembersList from './members-list.react';
-import css from './members-modal.css';
 
-type Props = {
+type ContentProps = {
+  +searchText: string,
   +threadID: string,
-  +onClose: () => void,
 };
-function ThreadMembersModal(props: Props): React.Node {
-  const { threadID, onClose } = props;
+function ThreadMembersModalContent(props: ContentProps): React.Node {
+  const { threadID, searchText } = props;
 
   const [tab, setTab] = React.useState<'All Members' | 'Admins'>('All Members');
-  const [searchText, setSearchText] = React.useState('');
 
   const threadInfo = useSelector(state => threadInfoSelector(state)[threadID]);
   const { members: threadMembersNotFiltered } = threadInfo;
 
   const userSearchIndex = useSelector(userStoreSearchIndex);
   const userIDs = React.useMemo(
     () => userSearchIndex.getSearchResults(searchText),
     [searchText, userSearchIndex],
   );
 
   const allMembers = React.useMemo(
     () =>
       threadMembersNotFiltered.filter(
         (member: RelativeMemberInfo) =>
           searchText.length === 0 || userIDs.includes(member.id),
       ),
     [searchText.length, threadMembersNotFiltered, userIDs],
   );
   const adminMembers = React.useMemo(
     () =>
       allMembers.filter(
         (member: RelativeMemberInfo) =>
           memberIsAdmin(member, threadInfo) || memberHasAdminPowers(member),
       ),
     [allMembers, threadInfo],
   );
 
   const allUsersTab = React.useMemo(
     () => (
       <Tabs.Item id="All Members" header="All Members">
         <ThreadMembersList threadInfo={threadInfo} threadMembers={allMembers} />
       </Tabs.Item>
     ),
     [allMembers, threadInfo],
   );
 
   const allAdminsTab = React.useMemo(
     () => (
       <Tabs.Item id="Admins" header="Admins">
         <ThreadMembersList
           threadInfo={threadInfo}
           threadMembers={adminMembers}
         />
       </Tabs.Item>
     ),
     [adminMembers, threadInfo],
   );
 
   return (
-    <Modal name="Members" onClose={onClose}>
-      <div className={css.membersContainer}>
-        <Search
-          onChangeText={setSearchText}
-          searchText={searchText}
-          placeholder="Search members"
-        />
-        <Tabs.Container activeTab={tab} setTab={setTab}>
-          {allUsersTab}
-          {allAdminsTab}
-        </Tabs.Container>
-      </div>
-    </Modal>
+    <Tabs.Container activeTab={tab} setTab={setTab}>
+      {allUsersTab}
+      {allAdminsTab}
+    </Tabs.Container>
+  );
+}
+
+type Props = {
+  +threadID: string,
+  +onClose: () => void,
+};
+function ThreadMembersModal(props: Props): React.Node {
+  const { onClose, threadID } = props;
+  const renderModalContent = React.useCallback(
+    (searchText: string) => (
+      <ThreadMembersModalContent threadID={threadID} searchText={searchText} />
+    ),
+    [threadID],
+  );
+  return (
+    <SearchModal
+      name="Members"
+      searchPlaceholder="Search members"
+      onClose={onClose}
+    >
+      {renderModalContent}
+    </SearchModal>
   );
 }
 
 export default ThreadMembersModal;