diff --git a/web/roles/community-roles-modal.css b/web/roles/community-roles-modal.css
index 4b43de204..79b62ad02 100644
--- a/web/roles/community-roles-modal.css
+++ b/web/roles/community-roles-modal.css
@@ -1,52 +1,37 @@
 .modalDescription {
   color: var(--text-background-secondary-default);
-  padding: 16px 32px 0 32px;
   font-size: var(--m-font-16);
+  margin-bottom: 16px;
 }
 
 .rolePanelTitleContainer {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  margin: 32px 32px 16px 32px;
+  margin: 24px 0 16px;
 }
 
 .rolePanelTitle {
   color: var(--text-background-primary-default);
   font-size: var(--l-font-18);
 }
 
 .rolePanelTitle:last-of-type {
   margin-right: 90px;
 }
 
 .separator {
   border: 0;
-  margin: 0 32px 8px 32px;
-  width: 85%;
+  margin-bottom: 8px;
   align-self: center;
   height: 2px;
   border: none;
   border-top: var(--separator-background-primary-default) solid 1px;
 }
 
 .rolePanelList {
   display: flex;
   flex-direction: column;
   overflow-y: auto;
   max-height: 400px;
-  margin: 0 32px 16px 24px;
-}
-
-.createRoleButtonContainer {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-self: center;
-  align-items: stretch;
-  margin-bottom: 16px;
-}
-
-.createRoleButton {
-  margin: 0 32px 0 32px;
 }
diff --git a/web/roles/community-roles-modal.react.js b/web/roles/community-roles-modal.react.js
index a7c006ca1..7b2670875 100644
--- a/web/roles/community-roles-modal.react.js
+++ b/web/roles/community-roles-modal.react.js
@@ -1,101 +1,109 @@
 // @flow
 
 import * as React from 'react';
 
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import { threadInfoSelector } from 'lib/selectors/thread-selectors.js';
 import { useRoleMemberCountsForCommunity } from 'lib/shared/thread-utils.js';
 import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import type { UserSurfacedPermission } from 'lib/types/thread-permission-types.js';
 
 import css from './community-roles-modal.css';
 import CreateRolesModal from './create-roles-modal.react.js';
 import RolePanelEntry from './role-panel-entry.react.js';
 import Button, { buttonThemes } from '../components/button.react.js';
 import Modal from '../modals/modal.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 
 type CommunityRolesModalProps = {
   +community: ThreadInfo,
 };
 
 function CommunityRolesModal(props: CommunityRolesModalProps): React.Node {
   const { popModal, pushModal } = useModalContext();
   const { community } = props;
 
   const [threadInfo, setThreadInfo] = React.useState<ThreadInfo>(community);
   const threadID = threadInfo.id;
   const reduxThreadInfo: ?ThreadInfo = useSelector(
     state => threadInfoSelector(state)[threadID],
   );
 
   React.useEffect(() => {
     if (reduxThreadInfo) {
       setThreadInfo(reduxThreadInfo);
     }
   }, [reduxThreadInfo]);
 
   const roleNamesToMembers = useRoleMemberCountsForCommunity(threadInfo);
 
   const rolePanelList = React.useMemo(
     () =>
       Object.keys(roleNamesToMembers).map(roleName => (
         <RolePanelEntry
           key={roleName}
           threadInfo={threadInfo}
           roleName={roleName}
           memberCount={roleNamesToMembers[roleName]}
         />
       )),
     [roleNamesToMembers, threadInfo],
   );
 
   const rolePermissionsForNewRole = React.useMemo(
     () => new Set<UserSurfacedPermission>(),
     [],
   );
 
   const onClickCreateRole = React.useCallback(
     () =>
       pushModal(
         <CreateRolesModal
           threadInfo={threadInfo}
           action="create_role"
           roleName="New Role"
           rolePermissions={rolePermissionsForNewRole}
         />,
       ),
     [pushModal, threadInfo, rolePermissionsForNewRole],
   );
 
+  const createRoleButton = React.useMemo(
+    () => (
+      <Button
+        variant="filled"
+        buttonColor={buttonThemes.standard}
+        onClick={onClickCreateRole}
+      >
+        Create Role
+      </Button>
+    ),
+    [onClickCreateRole],
+  );
+
   return (
-    <Modal name="Roles" onClose={popModal} size="large">
+    <Modal
+      name="Roles"
+      onClose={popModal}
+      size="large"
+      primaryButton={createRoleButton}
+    >
       <div className={css.modalDescription}>
         Roles help you group community members together and assign them certain
         permissions. When people join the community, they are automatically
         assigned the Members role.
       </div>
       <div className={css.modalDescription}>
         Communities must always have the Admins and Members role.
       </div>
       <div className={css.rolePanelTitleContainer}>
         <div className={css.rolePanelTitle}>Roles</div>
         <div className={css.rolePanelTitle}>Members</div>
       </div>
       <hr className={css.separator} />
       <div className={css.rolePanelList}>{rolePanelList}</div>
-      <div className={css.createRoleButtonContainer}>
-        <Button
-          variant="filled"
-          className={css.createRoleButton}
-          buttonColor={buttonThemes.standard}
-          onClick={onClickCreateRole}
-        >
-          Create Role
-        </Button>
-      </div>
     </Modal>
   );
 }
 
 export default CommunityRolesModal;
diff --git a/web/roles/role-panel-entry.css b/web/roles/role-panel-entry.css
index 827ce187c..5c8a96d3e 100644
--- a/web/roles/role-panel-entry.css
+++ b/web/roles/role-panel-entry.css
@@ -1,29 +1,33 @@
 .rolePanelEntry {
   display: grid;
   align-items: center;
-  padding: 12px;
+  padding: 12px 12px 12px 0;
   color: var(--text-background-primary-default);
   font-weight: 500;
 }
 
+.rolePanelEntry:last-of-type {
+  padding-bottom: 0;
+}
+
 .rolePanelNameEntry {
   font-size: var(--s-font-14);
 }
 
 .rolePanelCountEntryContainer {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   grid-column: 3;
 }
 
 .rolePanelCountAndIcon {
   display: flex;
   align-items: center;
   margin-right: 90px;
 }
 
 .rolePanelCountEntry {
   font-size: var(--s-font-14);
   margin-right: 2px;
 }