diff --git a/web/roles/community-roles-modal.css b/web/roles/community-roles-modal.css
--- a/web/roles/community-roles-modal.css
+++ b/web/roles/community-roles-modal.css
@@ -1,14 +1,14 @@
 .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 {
@@ -22,8 +22,7 @@
 
 .separator {
   border: 0;
-  margin: 0 32px 8px 32px;
-  width: 85%;
+  margin-bottom: 8px;
   align-self: center;
   height: 2px;
   border: none;
@@ -35,18 +34,4 @@
   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
--- a/web/roles/community-roles-modal.react.js
+++ b/web/roles/community-roles-modal.react.js
@@ -68,8 +68,26 @@
     [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
@@ -84,16 +102,6 @@
       </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>
   );
 }
diff --git a/web/roles/role-panel-entry.css b/web/roles/role-panel-entry.css
--- a/web/roles/role-panel-entry.css
+++ b/web/roles/role-panel-entry.css
@@ -1,11 +1,15 @@
 .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);
 }