diff --git a/web/modals/threads/members/change-member-role-modal.css b/web/modals/threads/members/change-member-role-modal.css
--- a/web/modals/threads/members/change-member-role-modal.css
+++ b/web/modals/threads/members/change-member-role-modal.css
@@ -1,6 +1,5 @@
 .roleModalDescription {
   color: var(--change-member-role-modal-description-text);
-  padding: 16px 32px 0 32px;
   font-size: medium;
   line-height: 1.5;
 }
@@ -24,20 +23,10 @@
 
 .roleModalRoleSelector {
   display: flex;
-  justify-content: center;
   flex-direction: column;
   align-items: center;
   padding: 20px 20px 0 20px;
-}
-
-.roleModalActionButtons {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-  align-self: center;
-  align-items: stretch;
-  margin: 16px 200px 16px 0;
+  height: 172px;
 }
 
 .roleModalSaveButton {
diff --git a/web/modals/threads/members/change-member-role-modal.react.js b/web/modals/threads/members/change-member-role-modal.react.js
--- a/web/modals/threads/members/change-member-role-modal.react.js
+++ b/web/modals/threads/members/change-member-role-modal.react.js
@@ -110,8 +110,42 @@
     threadInfo.id,
   ]);
 
+  const primaryButton = React.useMemo(
+    () => (
+      <Button
+        variant="filled"
+        className={css.roleModalSaveButton}
+        buttonColor={buttonThemes.primary}
+        onClick={onSave}
+        disabled={!!disabledRoleChangeMessage}
+      >
+        Save
+      </Button>
+    ),
+    [disabledRoleChangeMessage, onSave],
+  );
+
+  const secondaryButton = React.useMemo(
+    () => (
+      <Button
+        variant="outline"
+        className={css.roleModalBackButton}
+        onClick={onCloseModal}
+      >
+        Back
+      </Button>
+    ),
+    [onCloseModal],
+  );
+
   return (
-    <Modal name="Change Role" onClose={onCloseModal} size="large">
+    <Modal
+      name="Change Role"
+      onClose={onCloseModal}
+      size="large"
+      primaryButton={primaryButton}
+      secondaryButton={secondaryButton}
+    >
       <div className={css.roleModalDescription}>
         Members can only be assigned to one role at a time. Changing a
         member&rsquo;s role will replace their previously assigned role.
@@ -131,24 +165,6 @@
         />
       </div>
       {disabledRoleChangeMessage}
-      <div className={css.roleModalActionButtons}>
-        <Button
-          variant="outline"
-          className={css.roleModalBackButton}
-          onClick={onCloseModal}
-        >
-          Back
-        </Button>
-        <Button
-          variant="filled"
-          className={css.roleModalSaveButton}
-          buttonColor={buttonThemes.primary}
-          onClick={onSave}
-          disabled={!!disabledRoleChangeMessage}
-        >
-          Save
-        </Button>
-      </div>
     </Modal>
   );
 }