diff --git a/web/sidebar/community-creation/community-creation-modal.css b/web/sidebar/community-creation/community-creation-modal.css
index 97ccd156e..8bc637e12 100644
--- a/web/sidebar/community-creation/community-creation-modal.css
+++ b/web/sidebar/community-creation/community-creation-modal.css
@@ -1,103 +1,110 @@
 div.modalBody {
   display: flex;
   flex-direction: column;
   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;
 }
 
+div.createCommunityButtonContent {
+  display: flex;
+  justify-content: center;
+  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
index f0dbf2485..1954dfceb 100644
--- a/web/sidebar/community-creation/community-creation-modal.react.js
+++ b/web/sidebar/community-creation/community-creation-modal.react.js
@@ -1,110 +1,208 @@
 // @flow
 
 import * as React from 'react';
+import { useDispatch } from 'react-redux';
 
+import { newThread, 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,
+  useServerCall,
+} from 'lib/utils/action-utils.js';
 
 import css from './community-creation-modal.css';
 import CommIcon from '../../CommIcon.react.js';
-import Button from '../../components/button.react.js';
+import Button, { buttonThemes } from '../../components/button.react.js';
 import EnumSettingsOption from '../../components/enum-settings-option.react.js';
 import UserAvatar from '../../components/user-avatar.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 createNewCommunityLoadingStatusSelector =
+  createLoadingStatusSelector(newThreadActionTypes);
+
 function CommunityCreationModal(): React.Node {
   const modalContext = useModalContext();
 
+  const dispatch = useDispatch();
+  const dispatchActionPromise = useDispatchActionPromise();
+
+  const callNewThread = useServerCall(newThread);
+  const calendarQueryFunc = useSelector(nonThreadCalendarQuery);
+
+  const [errorMessage, setErrorMessage] = React.useState<?string>();
+
   const [pendingCommunityName, setPendingCommunityName] =
     React.useState<string>('');
 
   const onChangePendingCommunityName = React.useCallback(
-    (event: SyntheticEvent<HTMLInputElement>) =>
-      setPendingCommunityName(event.currentTarget.value),
+    (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();
+    dispatchActionPromise(newThreadActionTypes, newThreadResultPromise);
+    const newThreadResult: NewThreadResult = await newThreadResultPromise;
+
+    if (newThreadResult) {
+      const { newThreadID } = newThreadResult;
+      await dispatch({
+        type: updateNavInfoActionType,
+        payload: {
+          activeChatThreadID: newThreadID,
+        },
+      });
+
+      modalContext.popModal();
+    }
+  }, [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="profile" />
       </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';
+  }
+
   return (
     <Modal
       name="Create a community"
       onClose={modalContext.popModal}
       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>
         {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>
+            <Button
+              onClick={createNewCommunity}
+              variant="filled"
+              buttonColor={
+                errorMessage ? buttonThemes.danger : buttonThemes.standard
+              }
+            >
+              <div className={css.createCommunityButtonContent}>
+                {buttonContent}
+              </div>
+            </Button>
           </div>
         </form>
       </div>
     </Modal>
   );
 }
 
 export default CommunityCreationModal;