diff --git a/web/sidebar/community-creation/community-creation-modal.css b/web/sidebar/community-creation/community-creation-modal.css
index ead1ded6f..dfe065bc9 100644
--- a/web/sidebar/community-creation/community-creation-modal.css
+++ b/web/sidebar/community-creation/community-creation-modal.css
@@ -1,77 +1,70 @@
 div.modalBody {
   display: flex;
   flex-direction: column;
   overflow: hidden;
 }
 
 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(--text-background-primary-default);
 }
 
 div.formContent {
   display: flex;
   font-family: var(--font-stack);
   margin-top: 8px;
   margin-bottom: 12px;
 }
 
 div.formContent textarea {
   padding: 12px;
   border: 1px solid var(--separator-background-primary-default);
   font-size: var(--m-font-16);
   border-radius: 4px;
   width: 100%;
   resize: vertical;
   min-height: 20px;
 }
 
 div.formNotice {
   color: var(--text-background-secondary-default);
   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(--enumOption-icon-primary-default);
 }
 
 div.optionalSettingsLabel {
   color: var(--text-background-tertiary-default);
   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;
 }
diff --git a/web/sidebar/community-creation/community-creation-modal.react.js b/web/sidebar/community-creation/community-creation-modal.react.js
index 3c3b4b686..89f193b72 100644
--- a/web/sidebar/community-creation/community-creation-modal.react.js
+++ b/web/sidebar/community-creation/community-creation-modal.react.js
@@ -1,209 +1,219 @@
 // @flow
 
 import * as React from 'react';
 
 import {
   useNewThread,
   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 } from 'lib/utils/redux-promise-utils.js';
 import { useDispatch } from 'lib/utils/redux-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 UserAvatar from '../../avatars/user-avatar.react.js';
 import CommIcon from '../../CommIcon.react.js';
 import Button, { buttonThemes } from '../../components/button.react.js';
 import EnumSettingsOption from '../../components/enum-settings-option.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’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 communityCreationKeyserverLabel = <CommunityCreationKeyserverLabel />;
+
 const createNewCommunityLoadingStatusSelector =
   createLoadingStatusSelector(newThreadActionTypes);
 
 function CommunityCreationModal(): React.Node {
   const modalContext = useModalContext();
 
   const dispatch = useDispatch();
   const dispatchActionPromise = useDispatchActionPromise();
 
   const callNewThread = useNewThread();
   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();
     void 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="XL" />
       </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';
-  }
+
+  const buttonContent = React.useMemo(() => {
+    if (createNewCommunityLoadingStatus === 'loading') {
+      return (
+        <LoadingIndicator
+          status={createNewCommunityLoadingStatus}
+          size="medium"
+        />
+      );
+    } else if (errorMessage) {
+      return errorMessage;
+    } else {
+      return 'Create community';
+    }
+  }, [createNewCommunityLoadingStatus, errorMessage]);
+
+  const button = React.useMemo(
+    () => (
+      <Button
+        onClick={createNewCommunity}
+        variant="filled"
+        buttonColor={errorMessage ? buttonThemes.danger : buttonThemes.standard}
+        disabled={createNewCommunityLoadingStatus === 'loading'}
+      >
+        <div className={css.createCommunityButtonContent}>{buttonContent}</div>
+      </Button>
+    ),
+    [
+      buttonContent,
+      createNewCommunity,
+      createNewCommunityLoadingStatus,
+      errorMessage,
+    ],
+  );
 
   return (
     <Modal
       name="Create a community"
       onClose={modalContext.popModal}
       size="large"
+      primaryButton={button}
+      subheader={communityCreationKeyserverLabel}
     >
       <div className={css.modalBody}>
-        <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&rsquo;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
-              }
-              disabled={createNewCommunityLoadingStatus === 'loading'}
-            >
-              <div className={css.createCommunityButtonContent}>
-                {buttonContent}
-              </div>
-            </Button>
-          </div>
         </form>
       </div>
     </Modal>
   );
 }
 
 export default CommunityCreationModal;