diff --git a/web/modals/threads/create/steps/subchannel-settings.react.js b/web/modals/threads/create/steps/subchannel-settings.react.js
--- a/web/modals/threads/create/steps/subchannel-settings.react.js
+++ b/web/modals/threads/create/steps/subchannel-settings.react.js
@@ -31,7 +31,9 @@
 
 const announcementStatements = [
   {
-    statement: 'Admins can create Announcement channels.',
+    statement:
+      'Only admins and other admin-appointed roles can send ' +
+      'messages in an announcement channel.',
     isStatementValid: true,
     styleStatementBasedOnValidity: false,
   },
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
@@ -1,7 +1,103 @@
-div.modal_body {
+div.modalBody {
   display: flex;
   flex-direction: column;
-  width: 383px;
-  height: 560px;
   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: 10px;
+  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;
+}
+
+.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
@@ -5,18 +5,104 @@
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 
 import css from './community-creation-modal.css';
+import CommIcon from '../../CommIcon.react.js';
+import Button from '../../components/button.react.js';
+import EnumSettingsOption from '../../components/enum-settings-option.react.js';
+import UserAvatar from '../../components/user-avatar.react.js';
+import Input from '../../modals/input.react.js';
 import Modal from '../../modals/modal.react.js';
 
+const announcementStatements = [
+  {
+    statement:
+      `This option sets the community'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,
+  },
+];
+
 function CommunityCreationModal(): React.Node {
   const modalContext = useModalContext();
 
+  const [pendingCommunityName, setPendingCommunityName] =
+    React.useState<string>('');
+
+  const onChangePendingCommunityName = React.useCallback(
+    (event: SyntheticEvent<HTMLInputElement>) =>
+      setPendingCommunityName(event.currentTarget.value),
+    [],
+  );
+
+  const [announcementSetting, setAnnouncementSetting] = React.useState(false);
+  const onAnnouncementSelected = React.useCallback(() => {
+    setAnnouncementSetting(!announcementSetting);
+  }, [announcementSetting]);
+
+  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>
+    );
+  }
+
   return (
     <Modal
       name="Create a community"
       onClose={modalContext.popModal}
-      size="small"
+      size="large"
     >
-      <div className={css.modal_body}></div>
+      <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 variant="filled">Create community</Button>
+          </div>
+        </form>
+      </div>
     </Modal>
   );
 }
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -89,6 +89,10 @@
   --unread-bg: var(--error-primary);
   --settings-btn-bg: var(--violet-dark-100);
   --community-creation-btn-bg: var(--shades-black-80);
+  --community-creation-ancestry-bg: var(--shades-black-80);
+  --community-creation-ancestry-text: var(--shades-black-60);
+  --community-creation-form-notice: var(--shades-white-60);
+  --community-creation-keyserver-container: var(--shades-black-100);
   --modal-bg: var(--shades-black-90);
   --modal-fg: var(--shades-white-60);
   --join-bg: var(--shades-black-90);