diff --git a/web/modals/threads/create/steps/subchannel-settings.react.js b/web/modals/threads/create/steps/subchannel-settings.react.js
index 210b43d88..deb435187 100644
--- a/web/modals/threads/create/steps/subchannel-settings.react.js
+++ b/web/modals/threads/create/steps/subchannel-settings.react.js
@@ -1,123 +1,125 @@
 // @flow
 
 import * as React from 'react';
 
 import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
 import { threadTypeDescriptions } from 'lib/shared/thread-utils.js';
 import { threadTypes } from 'lib/types/thread-types-enum.js';
 
 import css from './subchannel-settings.css';
 import CommIcon from '../../../../CommIcon.react.js';
 import EnumSettingsOption from '../../../../components/enum-settings-option.react.js';
 import Input from '../../../input.react.js';
 
 const { COMMUNITY_OPEN_SUBTHREAD, COMMUNITY_SECRET_SUBTHREAD } = threadTypes;
 
 const openStatements = [
   {
     statement: threadTypeDescriptions[COMMUNITY_OPEN_SUBTHREAD],
     isStatementValid: true,
     styleStatementBasedOnValidity: false,
   },
 ];
 
 const secretStatements = [
   {
     statement: threadTypeDescriptions[COMMUNITY_SECRET_SUBTHREAD],
     isStatementValid: true,
     styleStatementBasedOnValidity: false,
   },
 ];
 
 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,
   },
 ];
 
 export type VisibilityType = 'open' | 'secret';
 
 type Props = {
   +channelName: string,
   +onChangeChannelName: (SyntheticEvent<HTMLInputElement>) => void,
   +visibilityType: VisibilityType,
   +onOpenTypeSelect: () => void,
   +onSecretTypeSelect: () => void,
   +announcement: boolean,
   +onAnnouncementSelected: () => void,
 };
 
 function SubchannelSettings(props: Props): React.Node {
   const {
     channelName,
     onChangeChannelName,
     visibilityType,
     onOpenTypeSelect,
     onSecretTypeSelect,
     announcement,
     onAnnouncementSelected,
   } = props;
 
   const globeIcon = React.useMemo(
     () => <SWMansionIcon icon="globe-1" size={24} />,
     [],
   );
 
   const lockIcon = React.useMemo(
     () => <SWMansionIcon icon="lock-on" size={24} />,
     [],
   );
 
   const flagIcon = React.useMemo(
     () => <CommIcon icon="megaphone" size={24} />,
     [],
   );
 
   return (
     <>
       <Input
         type="text"
         onChange={onChangeChannelName}
         placeholder="Channel name"
         value={channelName}
       />
 
       <div className={css.wrapper}>
         <div className={css.label}>Visibility</div>
         <EnumSettingsOption
           title="Open"
           statements={openStatements}
           onSelect={onOpenTypeSelect}
           selected={visibilityType === 'open'}
           icon={globeIcon}
           iconPosition="top"
         />
         <EnumSettingsOption
           title="Secret"
           statements={secretStatements}
           onSelect={onSecretTypeSelect}
           selected={visibilityType === 'secret'}
           icon={lockIcon}
           iconPosition="top"
         />
       </div>
 
       <div className={css.wrapper}>
         <div className={css.label}>Optional settings</div>
         <EnumSettingsOption
           title="Announcement"
           statements={announcementStatements}
           onSelect={onAnnouncementSelected}
           selected={announcement}
           icon={flagIcon}
           iconPosition="top"
           type="checkbox"
         />
       </div>
     </>
   );
 }
 
 export default SubchannelSettings;
diff --git a/web/sidebar/community-creation/community-creation-modal.css b/web/sidebar/community-creation/community-creation-modal.css
index 7b1ffe3a6..97ccd156e 100644
--- 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
index b201777ca..f0dbf2485 100644
--- a/web/sidebar/community-creation/community-creation-modal.react.js
+++ b/web/sidebar/community-creation/community-creation-modal.react.js
@@ -1,24 +1,110 @@
 // @flow
 
 import * as React from 'react';
 
 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&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,
+  },
+];
+
 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>
   );
 }
 
 export default CommunityCreationModal;
diff --git a/web/theme.css b/web/theme.css
index 4cc784e24..851e8ba99 100644
--- a/web/theme.css
+++ b/web/theme.css
@@ -1,220 +1,224 @@
 :root {
   /* Never use color values defined here directly in CSS. Add color variables to "Color Theme" below
 
      The reason we never use color values defined here directly in CSS is
 
       1. It makes changing themes from light / dark / user generated impossible.
       2. Gives the programmer context into the color being used.
       3. If our color system changes it's much easier to change color values in one place.
 
      Add a color value to the theme below, and then use it in your CSS.
      naming convention:
      - bg: background.
      - fg: foreground.
      - color: text-color
    */
   --shades-white-100: #ffffff;
   --shades-white-90: #f5f5f5;
   --shades-white-80: #ebebeb;
   --shades-white-70: #e0e0e0;
   --shades-white-60: #cccccc;
 
   --shades-black-100: #0a0a0a;
   --shades-black-90: #1f1f1f;
   --shades-black-80: #404040;
   --shades-black-70: #666666;
   --shades-black-60: #808080;
 
   --violet-dark-100: #7e57c2;
   --violet-dark-80: #6d49ab;
   --violet-dark-60: #563894;
   --violet-dark-40: #44297a;
   --violet-dark-20: #331f5c;
 
   --violet-light-100: #ae94db;
   --violet-light-80: #b9a4df;
   --violet-light-60: #d3c6ec;
   --violet-light-40: #e8e0f5;
   --violet-light-20: #f3f0fa;
 
   --success-light-10: #d5f6e3;
   --success-light-50: #6cdf9c;
   --success-primary: #00c853;
   --success-dark-50: #029841;
   --success-dark-90: #034920;
 
   --error-light-10: #feebe6;
   --error-light-50: #f9947b;
   --error-primary: #f53100;
   --error-dark-50: #b62602;
   --error-dark-90: #4f1203;
 
   --logo-bg: #111827;
   --spoiler-color: #33332c;
   --loading-foreground: #1b0e38;
 
   --bg: var(--shades-black-100);
   --fg: var(--shades-white-100);
   --color-disabled: var(--shades-black-60);
   --text-input-bg: var(--shades-black-80);
   --text-input-color: var(--shades-white-60);
   --text-input-placeholder: var(--shades-white-60);
   --border: var(--shades-black-80);
   --error: var(--error-primary);
   --success: var(--success-dark-50);
 
   /* Color Theme */
 
   --btn-bg-filled: var(--violet-dark-100);
   --btn-bg-outline: var(--shades-black-90);
   --btn-bg-success: var(--success-dark-50);
   --btn-bg-danger: var(--error-primary);
   --btn-bg-disabled: var(--shades-black-80);
   --btn-disabled-color: var(--shades-black-60);
   --chat-bg: var(--violet-dark-80);
   --chat-confirmation-icon: var(--violet-dark-100);
   --keyserver-selection: var(--violet-dark-60);
   --thread-selection: var(--violet-light-80);
   --thread-hover-bg: var(--shades-black-80);
   --thread-active-bg: var(--shades-black-80);
   --chat-timestamp-color: var(--shades-black-60);
   --tool-tip-bg: var(--shades-black-80);
   --tool-tip-color: var(--shades-white-60);
   --border-color: var(--shades-black-80);
   --calendar-chevron: var(--shades-black-60);
   --calendar-day-bg: var(--shades-black-60);
   --calendar-day-selected-color: var(--violet-dark-80);
   --community-bg: var(--shades-black-90);
   --community-settings-selected: var(--violet-dark-60);
   --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);
   --help-color: var(--shades-black-60);
   --breadcrumb-color: var(--shades-white-60);
   --breadcrumb-color-unread: var(--shades-white-60);
   --btn-outline-border: var(--shades-black-60);
   --thread-color-read: var(--shades-black-60);
   --thread-preview-secondary: var(--shades-black-70);
   --relationship-button-green: var(--success-dark-50);
   --relationship-button-red: var(--error-primary);
   --relationship-button-text: var(--fg);
   --disconnected-bar-alert-bg: var(--error-dark-50);
   --disconnected-bar-alert-color: var(--shades-white-100);
   --disconnected-bar-connecting-bg: var(--shades-white-70);
   --disconnected-bar-connecting-color: var(--shades-black-100);
   --permission-color: var(--shades-white-60);
   --thread-top-bar-color: var(--shades-white-100);
   --thread-top-bar-menu-color: var(--shades-white-70);
   --thread-ancestor-keyserver-border: var(--shades-black-70);
   --thread-ancestor-color: var(--shades-white-100);
   --thread-ancestor-separator-color: var(--shades-white-60);
   --text-message-default-background: var(--shades-black-80);
   --message-action-tooltip-bg: var(--shades-black-90);
   --message-action-tooltip-bg-light: var(--shades-black-80);
   --menu-bg: var(--shades-black-90);
   --menu-bg-light: var(--shades-black-80);
   --menu-separator-color: var(--shades-black-80);
   --menu-color: var(--shades-black-60);
   --menu-color-light: var(--shades-white-60);
   --menu-color-hover: var(--shades-white-100);
   --menu-color-dangerous: var(--error-primary);
   --menu-color-dangerous-hover: var(--error-light-50);
   --app-list-icon-read-only-color: var(--shades-black-60);
   --app-list-icon-enabled-color: var(--success-primary);
   --app-list-icon-disabled-color: var(--shades-white-80);
   --account-settings-label: var(--shades-black-60);
   --account-button-color: var(--violet-dark-100);
   --chat-thread-list-color-active: var(--shades-white-60);
   --chat-thread-list-menu-color: var(--shades-white-60);
   --chat-thread-list-menu-bg: var(--shades-black-80);
   --chat-thread-list-menu-active-color: var(--shades-white-60);
   --chat-thread-list-menu-active-bg: var(--shades-black-90);
   --search-clear-color: var(--shades-white-100);
   --search-clear-bg: var(--shades-black-70);
   --search-input-color: var(--shades-white-100);
   --search-input-placeholder: var(--shades-black-60);
   --search-icon-color: var(--shades-black-60);
   --tabs-header-active-color: var(--shades-white-100);
   --tabs-header-active-border: var(--violet-light-100);
   --tabs-header-active-background: var(--violet-dark-100);
   --tabs-header-background-color: var(--shades-black-60);
   --tabs-header-background-color-pill: var(--shades-white-60);
   --tabs-header-background-border: var(--shades-black-80);
   --tabs-header-background-color-hover: var(--shades-white-80);
   --tabs-header-background-border-hover: var(--shades-black-70);
   --members-modal-member-text: var(--shades-black-60);
   --members-modal-member-text-hover: var(--shades-white-100);
   --label-default-bg: var(--violet-dark-80);
   --label-default-color: var(--shades-white-80);
   --subchannels-modal-color: var(--shades-black-60);
   --subchannels-modal-color-hover: var(--shades-white-100);
   --color-selector-active-bg: var(--shades-black-80);
   --relationship-modal-color: var(--shades-black-60);
   --arrow-extension-color: var(--shades-black-60);
   --modal-close-color: var(--shades-black-60);
   --modal-close-color-hover: var(--shades-white-100);
   --add-members-group-header-color: var(--shades-black-60);
   --add-members-item-color: var(--shades-black-60);
   --add-members-item-color-hover: var(--shades-white-100);
   --add-members-item-disabled-color: var(--shades-black-80);
   --add-members-item-disabled-color-hover: var(--shades-black-60);
   --add-members-remove-pending-color: var(--error-primary);
   --add-members-remove-pending-color-hover: var(--error-light-50);
   --radio-border: var(--shades-black-70);
   --radio-color: var(--shades-white-60);
   --notification-settings-option-selected-bg: var(--shades-black-80);
   --notification-settings-option-title-color: var(--shades-white-90);
   --notification-settings-option-color: var(--shades-white-60);
   --notification-settings-option-invalid-color: var(--shades-black-80);
   --notification-settings-option-invalid-selected-color: var(--shades-black-60);
   --danger-zone-subheading-color: var(--shades-white-60);
   --danger-zone-explanation-color: var(--shades-black-60);
   --thread-creation-search-container-bg: var(--shades-black-90);
   --thread-creation-close-search-color: var(--shades-black-60);
   --thread-creation-search-item-bg-hover: var(--shades-black-80);
   --thread-creation-search-item-info-color: var(--shades-black-60);
   --chat-message-list-active-border: #5989d6;
   --sidebars-modal-color: var(--shades-black-60);
   --sidebars-modal-color-hover: var(--shades-white-100);
   --inline-engagement-bg: var(--shades-black-70);
   --inline-engagement-bg-hover: var(--shades-black-80);
   --inline-engagement-color: var(--fg);
   --compose-subchannel-header-fg: var(--shades-black-60);
   --compose-subchannel-header-bg: var(--shades-black-80);
   --compose-subchannel-label-color: var(--shades-black-60);
   --compose-subchannel-mark-color: var(--violet-light-100);
   --enum-option-icon-color: var(--violet-dark-100);
   --show-password-bg-hover: var(--shades-black-70);
   --typeahead-overlay-light: var(--shades-black-80);
   --typeahead-overlay-dark: var(--shades-black-90);
   --typeahead-overlay-text: var(--shades-white-100);
   --typeahead-overlay-shadow-primary: rgba(0, 0, 0, 0.25);
   --typeahead-overlay-shadow-secondary: rgba(0, 0, 0, 0.4);
   --spoiler-text-color: var(--spoiler-color);
   --spoiler-background-color: var(--spoiler-color);
   --purple-link: var(--violet-light-100);
   --drawer-expand-button: var(--shades-black-60);
   --drawer-expand-button-disabled: var(--shades-black-80);
   --drawer-item-color: var(--shades-white-60);
   --drawer-active-item-color: var(--shades-white-100);
   --drawer-open-community-bg: #191919;
   --active-drawer-item-bg: rgba(0, 0, 0, 0.5);
   --community-drawer-lines: rgba(255, 255, 255, 0.08);
   --topbar-button-bg: var(--shades-black-90);
   --filters-button-bg: var(--shades-black-100);
   --filters-button-border: var(--shades-black-80);
   --filters-button-hover-bg: var(--shades-black-90);
   --filter-panel-fg: var(--shades-black-60);
   --filter-panel-bg: #0d0d0d;
   --topbar-button-bg-hover: var(--shades-black-80);
   --topbar-button-fg: var(--shades-white-60);
   --message-label-color: var(--shades-black-60);
   --topbar-lines: rgba(255, 255, 255, 0.08);
   --pin-message-information-text-color: var(--shades-white-60);
   --pin-message-modal-border-color: var(--shades-black-80);
   --pinned-count-banner-color: var(--shades-black-90);
   --pinned-count-text-color: var(--shades-white-90);
 }