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
@@ -13,7 +13,6 @@
 .formContainer {
   display: flex;
   flex-direction: column;
-  padding: 20px;
 }
 
 div.formTitle {
@@ -63,12 +62,6 @@
   padding-bottom: 20px;
 }
 
-div.createCommunityButtonContainer {
-  display: flex;
-  flex-direction: column;
-  margin-top: 20px;
-}
-
 div.createCommunityButtonContent {
   display: flex;
   justify-content: center;
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
@@ -39,6 +39,8 @@
   },
 ];
 
+const communityCreationKeyserverLabel = <CommunityCreationKeyserverLabel />;
+
 const createNewCommunityLoadingStatusSelector =
   createLoadingStatusSelector(newThreadActionTypes);
 
@@ -135,28 +137,50 @@
   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>
@@ -186,20 +210,6 @@
               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>