diff --git a/web/modals/threads/members/add-members-modal.react.js b/web/modals/threads/members/add-members-modal.react.js
index 3622168af..a3ffea215 100644
--- a/web/modals/threads/members/add-members-modal.react.js
+++ b/web/modals/threads/members/add-members-modal.react.js
@@ -1,123 +1,120 @@
 // @flow
 
 import * as React from 'react';
 
 import {
   changeThreadSettingsActionTypes,
   useChangeThreadSettings,
 } from 'lib/actions/thread-actions.js';
 import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 
 import css from './members-modal.css';
 import Button from '../../../components/button.react.js';
 import {
   AddUsersListProvider,
   useAddUsersListContext,
 } from '../../../settings/relationship/add-users-list-provider.react.js';
 import AddUsersList from '../../../settings/relationship/add-users-list.react.js';
 import { useAddMembersListUserInfos } from '../../../settings/relationship/add-users-utils.js';
 import SearchModal from '../../search-modal.react.js';
 
 type ContentProps = {
   +searchText: string,
   +threadID: string,
-  +onClose: () => void,
 };
 
 function AddMembersModalContent(props: ContentProps): React.Node {
-  const { searchText, threadID, onClose } = props;
-
-  const { pendingUsersToAdd } = useAddUsersListContext();
+  const { searchText, threadID } = props;
 
   const { userInfos, sortedUsersWithENSNames } = useAddMembersListUserInfos({
     threadID,
     searchText,
   });
 
+  return (
+    <div className={css.addMembersContent}>
+      <div className={css.addMembersListContainer}>
+        <AddUsersList
+          searchModeActive={searchText.length > 0}
+          userInfos={userInfos}
+          sortedUsersWithENSNames={sortedUsersWithENSNames}
+        />
+      </div>
+    </div>
+  );
+}
+
+type Props = {
+  +threadID: string,
+  +onClose: () => void,
+};
+
+function AddMembersModal(props: Props): React.Node {
+  const { threadID, onClose } = props;
+
+  const { pendingUsersToAdd } = useAddUsersListContext();
+
   const dispatchActionPromise = useDispatchActionPromise();
   const callChangeThreadSettings = useChangeThreadSettings();
 
   const addUsers = React.useCallback(() => {
     void dispatchActionPromise(
       changeThreadSettingsActionTypes,
       callChangeThreadSettings({
         threadID,
         changes: { newMemberIDs: Array.from(pendingUsersToAdd.keys()) },
       }),
     );
     onClose();
   }, [
     callChangeThreadSettings,
     dispatchActionPromise,
     onClose,
     pendingUsersToAdd,
     threadID,
   ]);
 
-  return (
-    <div className={css.addMembersContent}>
-      <div className={css.addMembersListContainer}>
-        <AddUsersList
-          searchModeActive={searchText.length > 0}
-          userInfos={userInfos}
-          sortedUsersWithENSNames={sortedUsersWithENSNames}
-        />
-      </div>
-      <div className={css.addMembersFooter}>
-        <Button onClick={onClose} variant="outline">
-          Cancel
-        </Button>
-        <Button
-          disabled={!pendingUsersToAdd.size}
-          variant="filled"
-          onClick={addUsers}
-        >
-          Add selected members
-        </Button>
-      </div>
-    </div>
+  const primaryButton = React.useMemo(
+    () => (
+      <Button
+        disabled={!pendingUsersToAdd.size}
+        variant="filled"
+        onClick={addUsers}
+      >
+        Add selected members
+      </Button>
+    ),
+    [addUsers, pendingUsersToAdd.size],
   );
-}
-
-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}
-      />
+      <AddMembersModalContent searchText={searchText} threadID={threadID} />
     ),
-    [onClose, threadID],
+    [threadID],
   );
 
   return (
     <SearchModal
       name="Add members"
       searchPlaceholder="Search members"
       onClose={onClose}
       size="fit-content"
+      primaryButton={primaryButton}
     >
       {addMembersModalContent}
     </SearchModal>
   );
 }
 
 function AddMembersModalWrapper(props: Props): React.Node {
   const { threadID, onClose } = props;
 
   return (
     <AddUsersListProvider>
       <AddMembersModal threadID={threadID} onClose={onClose} />
     </AddUsersListProvider>
   );
 }
 
 export { AddMembersModalWrapper, AddMembersModalContent };
diff --git a/web/modals/threads/members/members-modal.css b/web/modals/threads/members/members-modal.css
index 5738a49e1..35faff5a0 100644
--- a/web/modals/threads/members/members-modal.css
+++ b/web/modals/threads/members/members-modal.css
@@ -1,89 +1,82 @@
 div.modalContentContainer {
   height: 617px;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   row-gap: 16px;
 }
 
 div.membersListTabsContent {
   flex: 1;
   overflow: hidden;
 }
 
 div.addNewMembers button {
   width: 100%;
 }
 
 div.membersList {
   height: 100%;
   overflow-y: scroll;
   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 {
   cursor: pointer;
   background-color: var(--drawer-open-community-bg);
   border-radius: 8px;
 }
 
 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);
   height: 617px;
 }
 
 div.addMembersPendingList {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   gap: 6px;
   padding: 8px;
 }
 
 div.addMembersListContainer {
   overflow: auto;
   flex: 1;
 }
-
-div.addMembersFooter {
-  display: flex;
-  justify-content: end;
-  column-gap: 16px;
-  margin-top: 16px;
-}
diff --git a/web/sidebar/community-creation/community-creation-members-modal.react.js b/web/sidebar/community-creation/community-creation-members-modal.react.js
index 7533ab17b..5ee23de1a 100644
--- a/web/sidebar/community-creation/community-creation-members-modal.react.js
+++ b/web/sidebar/community-creation/community-creation-members-modal.react.js
@@ -1,43 +1,39 @@
 // @flow
 
 import * as React from 'react';
 
 import CommunityCreationKeyserverLabel from './community-creation-keyserver-label.react.js';
 import css from './community-creation-members-modal.css';
 import Search from '../../components/search.react.js';
 import Modal from '../../modals/modal.react.js';
 import { AddMembersModalContent } from '../../modals/threads/members/add-members-modal.react.js';
 
 type Props = {
   +threadID: string,
   +onClose: () => void,
 };
 function CommunityCreationMembersModal(props: Props): React.Node {
   const { threadID, onClose } = props;
   const [searchText, setSearchText] = React.useState('');
 
   return (
     <Modal
       name="Add members to the community"
       subtitle="You may also add members later"
       onClose={onClose}
       size="large"
     >
       <CommunityCreationKeyserverLabel />
       <div className={css.container}>
         <Search
           onChangeText={setSearchText}
           searchText={searchText}
           placeholder="Search members"
         />
-        <AddMembersModalContent
-          searchText={searchText}
-          threadID={threadID}
-          onClose={onClose}
-        />
+        <AddMembersModalContent searchText={searchText} threadID={threadID} />
       </div>
     </Modal>
   );
 }
 
 export default CommunityCreationMembersModal;