diff --git a/web/roles/create-roles-modal.css b/web/roles/create-roles-modal.css
--- a/web/roles/create-roles-modal.css
+++ b/web/roles/create-roles-modal.css
@@ -1,7 +1,6 @@
 .formContainer {
   display: flex;
   flex-direction: column;
-  padding: 16px 32px 0 32px;
 }
 
 .roleNameLabel {
@@ -28,8 +27,7 @@
 
 .separator {
   border: 0;
-  margin: 16px 32px 8px 32px;
-  width: 90%;
+  margin: 16px 0 8px 0;
   align-self: center;
   height: 2px;
   border: none;
@@ -40,7 +38,7 @@
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  padding: 16px 32px 24px 32px;
+  padding: 16px 0 24px 0;
 }
 
 .permissionsLabel {
@@ -66,13 +64,6 @@
   overflow-y: auto;
 }
 
-.buttonsContainer {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-  padding: 16px 32px;
-}
-
 .backButton {
   width: 100px;
 }
diff --git a/web/roles/create-roles-modal.react.js b/web/roles/create-roles-modal.react.js
--- a/web/roles/create-roles-modal.react.js
+++ b/web/roles/create-roles-modal.react.js
@@ -235,8 +235,42 @@
     return createButtonText;
   }, [createRolesLoadingStatus, createButtonText]);
 
+  const primaryButton = React.useMemo(
+    () => (
+      <Button
+        variant="filled"
+        className={css.createRoleButton}
+        buttonColor={buttonThemes.standard}
+        onClick={onClickCreateRole}
+      >
+        {saveButtonContent}
+      </Button>
+    ),
+    [onClickCreateRole, saveButtonContent],
+  );
+
+  const secondaryButton = React.useMemo(
+    () => (
+      <Button
+        variant="outline"
+        className={css.backButton}
+        buttonColor={buttonThemes.outline}
+        onClick={onCloseModal}
+      >
+        Back
+      </Button>
+    ),
+    [onCloseModal],
+  );
+
   return (
-    <Modal name={modalName} onClose={onCloseModal} size="large">
+    <Modal
+      name={modalName}
+      onClose={onCloseModal}
+      size="large"
+      primaryButton={primaryButton}
+      secondaryButton={secondaryButton}
+    >
       <form method="POST" className={css.formContainer}>
         <div className={css.roleNameLabel}>Role name</div>
         <div className={css.roleNameInput}>
@@ -259,24 +293,6 @@
         </div>
       </div>
       <div className={css.permissionsContainer}>{permissionsList}</div>
-      <div className={css.buttonsContainer}>
-        <Button
-          variant="outline"
-          className={css.backButton}
-          buttonColor={buttonThemes.outline}
-          onClick={onCloseModal}
-        >
-          Back
-        </Button>
-        <Button
-          variant="filled"
-          className={css.createRoleButton}
-          buttonColor={buttonThemes.standard}
-          onClick={onClickCreateRole}
-        >
-          {saveButtonContent}
-        </Button>
-      </div>
     </Modal>
   );
 }