diff --git a/web/modals/threads/members/add-members-modal.react.js b/web/modals/threads/members/add-members-modal.react.js
index 60923a742..9b018ef06 100644
--- a/web/modals/threads/members/add-members-modal.react.js
+++ b/web/modals/threads/members/add-members-modal.react.js
@@ -1,202 +1,202 @@
 // @flow
 
 import * as React from 'react';
 
 import {
   changeThreadSettingsActionTypes,
   changeThreadSettings,
 } from 'lib/actions/thread-actions.js';
 import { useENSNames } from 'lib/hooks/ens-cache.js';
 import { threadInfoSelector } from 'lib/selectors/thread-selectors.js';
 import {
   userSearchIndexForPotentialMembers,
   userInfoSelectorForPotentialMembers,
 } from 'lib/selectors/user-selectors.js';
 import { getPotentialMemberItems } from 'lib/shared/search-utils.js';
 import { threadActualMembers } from 'lib/shared/thread-utils.js';
 import {
   useDispatchActionPromise,
   useServerCall,
 } from 'lib/utils/action-utils.js';
 
 import AddMembersListContent from './add-members-list-content.react.js';
 import css from './members-modal.css';
 import Button from '../../../components/button.react.js';
 import Label from '../../../components/label.react.js';
 import { useSelector } from '../../../redux/redux-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, setPendingUsersToAdd] = React.useState<
     $ReadOnlySet<string>,
   >(new Set());
 
   const threadInfo = useSelector(state => threadInfoSelector(state)[threadID]);
   const { parentThreadID, community } = threadInfo;
   const parentThreadInfo = useSelector(state =>
     parentThreadID ? threadInfoSelector(state)[parentThreadID] : null,
   );
   const communityThreadInfo = useSelector(state =>
     community ? threadInfoSelector(state)[community] : null,
   );
   const otherUserInfos = useSelector(userInfoSelectorForPotentialMembers);
   const userSearchIndex = useSelector(userSearchIndexForPotentialMembers);
   const excludeUserIDs = React.useMemo(
     () =>
       threadActualMembers(threadInfo.members).concat(
         Array.from(pendingUsersToAdd),
       ),
     [pendingUsersToAdd, threadInfo.members],
   );
 
   const userSearchResults = React.useMemo(
     () =>
       getPotentialMemberItems(
         searchText,
         otherUserInfos,
         userSearchIndex,
         excludeUserIDs,
         parentThreadInfo,
         communityThreadInfo,
         threadInfo.type,
       ),
     [
       communityThreadInfo,
       excludeUserIDs,
       otherUserInfos,
       parentThreadInfo,
       searchText,
       threadInfo.type,
       userSearchIndex,
     ],
   );
   const userSearchResultsWithENSNames = useENSNames(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;
       }),
     [],
   );
 
   const dispatchActionPromise = useDispatchActionPromise();
   const callChangeThreadSettings = useServerCall(changeThreadSettings);
 
   const addUsers = React.useCallback(() => {
     dispatchActionPromise(
       changeThreadSettingsActionTypes,
       callChangeThreadSettings({
         threadID,
         changes: { newMemberIDs: Array.from(pendingUsersToAdd) },
       }),
     );
     onClose();
   }, [
     callChangeThreadSettings,
     dispatchActionPromise,
     onClose,
     pendingUsersToAdd,
     threadID,
   ]);
 
   const pendingUserInfos = React.useMemo(
     () =>
       Array.from(pendingUsersToAdd)
         .map(userID => ({
           id: userID,
           username: otherUserInfos[userID].username,
         }))
         .sort((a, b) => a.username.localeCompare(b.username)),
     [otherUserInfos, pendingUsersToAdd],
   );
   const pendingUserInfosWithENSNames = useENSNames(pendingUserInfos);
 
   const labelItems = React.useMemo(() => {
     if (!pendingUserInfosWithENSNames.length) {
       return null;
     }
     return (
       <div className={css.addMembersPendingList}>
         {pendingUserInfosWithENSNames.map(userInfo => (
           <Label key={userInfo.id} onClose={() => onSwitchUser(userInfo.id)}>
             {userInfo.username}
           </Label>
         ))}
       </div>
     );
   }, [onSwitchUser, pendingUserInfosWithENSNames]);
 
   return (
     <div className={css.addMembersContent}>
       {labelItems}
       <div className={css.addMembersListContainer}>
         <AddMembersListContent
           userListItems={userSearchResultsWithENSNames}
           switchUser={onSwitchUser}
           pendingUsersToAdd={pendingUsersToAdd}
           hasParentThread={!!threadInfo.parentThreadID}
         />
       </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>
   );
 }
 
 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;
+export { AddMembersModal, AddMembersModalContent };
diff --git a/web/modals/threads/members/members-modal.css b/web/modals/threads/members/members-modal.css
index fd82f3cae..50ee4d7de 100644
--- a/web/modals/threads/members/members-modal.css
+++ b/web/modals/threads/members/members-modal.css
@@ -1,93 +1,91 @@
 div.modalContentContainer {
-  width: 383px;
   height: 617px;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   row-gap: 16px;
 }
 
 div.membersListTabs {
   flex: 1;
   overflow: hidden;
 }
 
 div.addNewMembers button {
   width: 100%;
 }
 
 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);
-  width: 383px;
   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/modals/threads/members/members-modal.react.js b/web/modals/threads/members/members-modal.react.js
index 4a36e52d5..16d9fb014 100644
--- a/web/modals/threads/members/members-modal.react.js
+++ b/web/modals/threads/members/members-modal.react.js
@@ -1,141 +1,141 @@
 // @flow
 
 import * as React from 'react';
 
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import { threadInfoSelector } from 'lib/selectors/thread-selectors.js';
 import { userStoreSearchIndex } from 'lib/selectors/user-selectors.js';
 import {
   memberHasAdminPowers,
   memberIsAdmin,
   threadHasPermission,
 } from 'lib/shared/thread-utils.js';
 import { threadPermissions } from 'lib/types/thread-permission-types.js';
 import { type RelativeMemberInfo } from 'lib/types/thread-types.js';
 
-import AddMembersModal from './add-members-modal.react.js';
+import { AddMembersModal } from './add-members-modal.react.js';
 import ThreadMembersList from './members-list.react.js';
 import css from './members-modal.css';
 import Button from '../../../components/button.react.js';
 import Tabs from '../../../components/tabs.react.js';
 import { useSelector } from '../../../redux/redux-utils.js';
 import SearchModal from '../../search-modal.react.js';
 
 type ContentProps = {
   +searchText: string,
   +threadID: string,
 };
 function ThreadMembersModalContent(props: ContentProps): React.Node {
   const { threadID, searchText } = props;
 
   const [tab, setTab] = React.useState<'All Members' | 'Admins'>('All Members');
 
   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],
   );
 
   const { pushModal, popModal } = useModalContext();
 
   const onClickAddMembers = React.useCallback(() => {
     pushModal(<AddMembersModal onClose={popModal} threadID={threadID} />);
   }, [popModal, pushModal, threadID]);
 
   const canAddMembers = threadHasPermission(
     threadInfo,
     threadPermissions.ADD_MEMBERS,
   );
 
   const addMembersButton = React.useMemo(() => {
     if (!canAddMembers) {
       return null;
     }
     return (
       <div className={css.addNewMembers}>
         <Button variant="filled" onClick={onClickAddMembers}>
           Add members
         </Button>
       </div>
     );
   }, [canAddMembers, onClickAddMembers]);
 
   return (
     <div className={css.modalContentContainer}>
       <div className={css.membersListTabs}>
         <Tabs.Container activeTab={tab} setTab={setTab}>
           {allUsersTab}
           {allAdminsTab}
         </Tabs.Container>
       </div>
       {addMembersButton}
     </div>
   );
 }
 
 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}
-      size="fit-content"
+      size="large"
     >
       {renderModalContent}
     </SearchModal>
   );
 }
 
 export default ThreadMembersModal;
diff --git a/web/sidebar/community-creation/community-creation-members-modal.css b/web/sidebar/community-creation/community-creation-members-modal.css
new file mode 100644
index 000000000..3bf7e5b38
--- /dev/null
+++ b/web/sidebar/community-creation/community-creation-members-modal.css
@@ -0,0 +1,36 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  margin: 16px;
+}
+
+div.ancestryContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 40px;
+  background-color: var(--community-creation-ancestry-bg);
+  margin-top: 20px;
+}
+
+div.ancestryContainer p {
+  color: var(--community-creation-ancestry-text);
+}
+
+.keyserverContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 5px 10px;
+  margin: 0 6px;
+  border-radius: 8px;
+  background-color: var(--community-creation-keyserver-container);
+}
+
+.keyserverName {
+  padding-left: 6px;
+  color: var(--thread-ancestor-color);
+  font-size: var(--s-font-14);
+  font-weight: var(--semi-bold);
+}
diff --git a/web/sidebar/community-creation/community-creation-members-modal.react.js b/web/sidebar/community-creation/community-creation-members-modal.react.js
new file mode 100644
index 000000000..30be4dbc1
--- /dev/null
+++ b/web/sidebar/community-creation/community-creation-members-modal.react.js
@@ -0,0 +1,49 @@
+// @flow
+
+import * as React from 'react';
+
+import css from './community-creation-members-modal.css';
+import CommIcon from '../../CommIcon.react.js';
+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"
+    >
+      <div className={css.ancestryContainer}>
+        <p>within</p>
+        <div className={css.keyserverContainer}>
+          <CommIcon icon="cloud-filled" size={18} color="white" />
+          <div className={css.keyserverName}>ashoat</div>
+        </div>
+      </div>
+      <div className={css.container}>
+        <Search
+          onChangeText={setSearchText}
+          searchText={searchText}
+          placeholder="Search members"
+        />
+        <AddMembersModalContent
+          searchText={searchText}
+          threadID={threadID}
+          onClose={onClose}
+        />
+      </div>
+    </Modal>
+  );
+}
+
+export default CommunityCreationMembersModal;
diff --git a/web/sidebar/community-creation/community-creation-modal.react.js b/web/sidebar/community-creation/community-creation-modal.react.js
index 9e8440775..6c234d113 100644
--- a/web/sidebar/community-creation/community-creation-modal.react.js
+++ b/web/sidebar/community-creation/community-creation-modal.react.js
@@ -1,206 +1,213 @@
 // @flow
 
 import * as React from 'react';
 import { useDispatch } from 'react-redux';
 
 import { newThread, newThreadActionTypes } from 'lib/actions/thread-actions.js';
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
 import { threadTypes } from 'lib/types/thread-types-enum.js';
 import type { NewThreadResult } from 'lib/types/thread-types.js';
 import {
   useDispatchActionPromise,
   useServerCall,
 } from 'lib/utils/action-utils.js';
 
+import CommunityCreationMembersModal from './community-creation-members-modal.react.js';
 import css from './community-creation-modal.css';
 import CommIcon from '../../CommIcon.react.js';
 import Button, { buttonThemes } from '../../components/button.react.js';
 import EnumSettingsOption from '../../components/enum-settings-option.react.js';
 import UserAvatar from '../../components/user-avatar.react.js';
 import LoadingIndicator from '../../loading-indicator.react.js';
 import Input from '../../modals/input.react.js';
 import Modal from '../../modals/modal.react.js';
 import { updateNavInfoActionType } from '../../redux/action-types.js';
 import { useSelector } from '../../redux/redux-utils.js';
 import { nonThreadCalendarQuery } from '../../selectors/nav-selectors.js';
 
 const announcementStatements = [
   {
     statement:
       `This option sets the community&apos;s root channel to an ` +
       `announcement channel. Only admins and other admin-appointed ` +
       `roles can send messages in an announcement channel.`,
     isStatementValid: true,
     styleStatementBasedOnValidity: false,
   },
 ];
 
 const createNewCommunityLoadingStatusSelector =
   createLoadingStatusSelector(newThreadActionTypes);
 
 function CommunityCreationModal(): React.Node {
   const modalContext = useModalContext();
 
   const dispatch = useDispatch();
   const dispatchActionPromise = useDispatchActionPromise();
 
   const callNewThread = useServerCall(newThread);
   const calendarQueryFunc = useSelector(nonThreadCalendarQuery);
 
   const [errorMessage, setErrorMessage] = React.useState<?string>();
 
   const [pendingCommunityName, setPendingCommunityName] =
     React.useState<string>('');
 
   const onChangePendingCommunityName = React.useCallback(
     (event: SyntheticEvent<HTMLInputElement>) => {
       setErrorMessage();
       setPendingCommunityName(event.currentTarget.value);
     },
     [],
   );
 
   const [announcementSetting, setAnnouncementSetting] = React.useState(false);
   const onAnnouncementSelected = React.useCallback(() => {
     setErrorMessage();
     setAnnouncementSetting(!announcementSetting);
   }, [announcementSetting]);
 
   const callCreateNewCommunity = React.useCallback(async () => {
     const calendarQuery = calendarQueryFunc();
 
     try {
       const newThreadResult: NewThreadResult = await callNewThread({
         name: pendingCommunityName,
         type: announcementSetting
           ? threadTypes.COMMUNITY_ANNOUNCEMENT_ROOT
           : threadTypes.COMMUNITY_ROOT,
         calendarQuery,
       });
       return newThreadResult;
     } catch (e) {
       setErrorMessage('Community creation failed. Please try again.');
       throw e;
     }
   }, [
     announcementSetting,
     calendarQueryFunc,
     callNewThread,
     pendingCommunityName,
   ]);
 
   const createNewCommunity = React.useCallback(async () => {
     setErrorMessage();
 
     const newThreadResultPromise = callCreateNewCommunity();
     dispatchActionPromise(newThreadActionTypes, newThreadResultPromise);
     const newThreadResult: NewThreadResult = await newThreadResultPromise;
 
     const { newThreadID } = newThreadResult;
     await dispatch({
       type: updateNavInfoActionType,
       payload: {
         activeChatThreadID: newThreadID,
       },
     });
 
     modalContext.popModal();
+    modalContext.pushModal(
+      <CommunityCreationMembersModal
+        onClose={modalContext.popModal}
+        threadID={newThreadID}
+      />,
+    );
   }, [callCreateNewCommunity, dispatch, dispatchActionPromise, modalContext]);
 
   const megaphoneIcon = React.useMemo(
     () => <CommIcon icon="megaphone" size={24} />,
     [],
   );
 
   const avatarNodeEnabled = false;
   let avatarNode;
   if (avatarNodeEnabled) {
     avatarNode = (
       <div className={css.avatarContainer}>
         <UserAvatar userID="256" size="profile" />
       </div>
     );
   }
 
   const createNewCommunityLoadingStatus: LoadingStatus = useSelector(
     createNewCommunityLoadingStatusSelector,
   );
   let buttonContent;
   if (createNewCommunityLoadingStatus === 'loading') {
     buttonContent = (
       <LoadingIndicator
         status={createNewCommunityLoadingStatus}
         size="medium"
       />
     );
   } else if (errorMessage) {
     buttonContent = errorMessage;
   } else {
     buttonContent = 'Create community';
   }
 
   return (
     <Modal
       name="Create a community"
       onClose={modalContext.popModal}
       size="large"
     >
       <div className={css.modalBody}>
         <div className={css.ancestryContainer}>
           <p>within</p>
           <div className={css.keyserverContainer}>
             <CommIcon icon="cloud-filled" size={18} color="white" />
             <div className={css.keyserverName}>ashoat</div>
           </div>
         </div>
         {avatarNode}
         <form method="POST" className={css.formContainer}>
           <div>
             <div className={css.formTitle}>Community Name</div>
             <div className={css.formContent}>
               <Input
                 type="text"
                 value={pendingCommunityName}
                 placeholder="Community Name"
                 onChange={onChangePendingCommunityName}
               />
             </div>
           </div>
           <div className={css.formNotice}>
             You may edit your community&apos;s image and name later.
           </div>
           <hr />
           <div className={css.optionalSettingsContainer}>
             <div className={css.optionalSettingsLabel}>Optional settings</div>
             <EnumSettingsOption
               selected={announcementSetting}
               onSelect={onAnnouncementSelected}
               icon={megaphoneIcon}
               title="Announcement"
               statements={announcementStatements}
               iconPosition="top"
               type="checkbox"
             />
           </div>
           <div className={css.createCommunityButtonContainer}>
             <Button
               onClick={createNewCommunity}
               variant="filled"
               buttonColor={
                 errorMessage ? buttonThemes.danger : buttonThemes.standard
               }
             >
               <div className={css.createCommunityButtonContent}>
                 {buttonContent}
               </div>
             </Button>
           </div>
         </form>
       </div>
     </Modal>
   );
 }
 
 export default CommunityCreationModal;