diff --git a/web/sidebar/community-creation/community-creation-members-modal.css b/web/sidebar/community-creation/community-creation-keyserver-label.css
copy from web/sidebar/community-creation/community-creation-members-modal.css
copy to web/sidebar/community-creation/community-creation-keyserver-label.css
--- a/web/sidebar/community-creation/community-creation-members-modal.css
+++ b/web/sidebar/community-creation/community-creation-keyserver-label.css
@@ -1,10 +1,3 @@
-.container {
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  margin: 16px;
-}
-
 div.ancestryContainer {
   display: flex;
   justify-content: center;
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
--- /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
--- a/web/sidebar/community-creation/community-creation-members-modal.css
+++ b/web/sidebar/community-creation/community-creation-members-modal.css
@@ -4,33 +4,3 @@
   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
--- a/web/sidebar/community-creation/community-creation-members-modal.react.js
+++ b/web/sidebar/community-creation/community-creation-members-modal.react.js
@@ -2,8 +2,8 @@
 
 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';
@@ -23,13 +23,7 @@
       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}
diff --git a/web/sidebar/community-creation/community-creation-modal.css b/web/sidebar/community-creation/community-creation-modal.css
--- a/web/sidebar/community-creation/community-creation-modal.css
+++ b/web/sidebar/community-creation/community-creation-modal.css
@@ -4,19 +4,6 @@
   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;
@@ -91,20 +78,3 @@
   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
--- a/web/sidebar/community-creation/community-creation-modal.react.js
+++ b/web/sidebar/community-creation/community-creation-modal.react.js
@@ -14,6 +14,7 @@
   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';
@@ -155,13 +156,7 @@
       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>