diff --git a/web/sidebar/community-creation/community-creation-members-modal.css b/web/sidebar/community-creation/community-creation-keyserver-label.css
similarity index 86%
copy from web/sidebar/community-creation/community-creation-members-modal.css
copy to web/sidebar/community-creation/community-creation-keyserver-label.css
index 3bf7e5b38..e60e23d70 100644
--- a/web/sidebar/community-creation/community-creation-members-modal.css
+++ b/web/sidebar/community-creation/community-creation-keyserver-label.css
@@ -1,36 +1,29 @@
-.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-keyserver-label.react.js b/web/sidebar/community-creation/community-creation-keyserver-label.react.js
new file mode 100644
index 000000000..5871a7a1b
--- /dev/null
+++ b/web/sidebar/community-creation/community-creation-keyserver-label.react.js
@@ -0,0 +1,20 @@
+// @flow
+
+import * as React from 'react';
+
+import css from './community-creation-keyserver-label.css';
+import CommIcon from '../../CommIcon.react.js';
+
+function CommunityCreationKeyserverLabel(): React.Node {
+  return (
+    <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>
+  );
+}
+
+export default CommunityCreationKeyserverLabel;
diff --git a/web/sidebar/community-creation/community-creation-members-modal.css b/web/sidebar/community-creation/community-creation-members-modal.css
index 3bf7e5b38..3c26732b3 100644
--- a/web/sidebar/community-creation/community-creation-members-modal.css
+++ b/web/sidebar/community-creation/community-creation-members-modal.css
@@ -1,36 +1,6 @@
 .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
index 30be4dbc1..7533ab17b 100644
--- a/web/sidebar/community-creation/community-creation-members-modal.react.js
+++ b/web/sidebar/community-creation/community-creation-members-modal.react.js
@@ -1,49 +1,43 @@
 // @flow
 
 import * as React from 'react';
 
+import CommunityCreationKeyserverLabel from './community-creation-keyserver-label.react.js';
 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>
+      <CommunityCreationKeyserverLabel />
       <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.css b/web/sidebar/community-creation/community-creation-modal.css
index cc698433d..d54423466 100644
--- a/web/sidebar/community-creation/community-creation-modal.css
+++ b/web/sidebar/community-creation/community-creation-modal.css
@@ -1,110 +1,80 @@
 div.modalBody {
   display: flex;
   flex-direction: column;
   overflow: hidden;
 }
 
-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);
-}
-
 div.avatarContainer {
   display: flex;
   justify-content: center;
   padding-top: 20px;
 }
 
 .formContainer {
   display: flex;
   flex-direction: column;
   padding: 20px;
 }
 
 div.formTitle {
   padding-top: 6px;
   font-size: 14px;
   font-weight: 600;
   vertical-align: top;
   color: var(--fg);
 }
 
 div.formContent {
   display: flex;
   font-family: var(--font-stack);
   color: var(--fg);
   margin-top: 8px;
   margin-bottom: 12px;
 }
 
 div.formContent textarea {
   padding: 12px;
   background: var(--modal-bg);
   color: var(--fg);
   border: 1px solid var(--border-color);
   font-size: var(--m-font-16);
   border-radius: 4px;
   width: 100%;
   resize: vertical;
   min-height: 20px;
 }
 
 div.formNotice {
   color: var(--community-creation-form-notice);
   font-size: var(--xs-font-12);
   text-align: center;
 }
 
 hr {
   margin: 20px 0;
   height: 0;
   border: none;
   border-top: #ffffff33 solid 1px;
 }
 
 div.optionalSettingsContainer {
   color: var(--enum-option-icon-color);
 }
 
 div.optionalSettingsLabel {
   color: var(--compose-subchannel-label-color);
   padding-bottom: 20px;
 }
 
 div.createCommunityButtonContainer {
   display: flex;
   flex-direction: column;
   margin-top: 20px;
 }
 
 div.createCommunityButtonContent {
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 24px;
 }
-
-.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-modal.react.js b/web/sidebar/community-creation/community-creation-modal.react.js
index 6c234d113..9e4450f7c 100644
--- a/web/sidebar/community-creation/community-creation-modal.react.js
+++ b/web/sidebar/community-creation/community-creation-modal.react.js
@@ -1,213 +1,208 @@
 // @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 CommunityCreationKeyserverLabel from './community-creation-keyserver-label.react.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>
+        <CommunityCreationKeyserverLabel />
         {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;