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
@@ -25,5 +25,26 @@
 .roleModalRoleSelector {
   display: flex;
   justify-content: center;
+  flex-direction: column;
+  align-items: center;
   padding: 20px;
 }
+
+.roleModalActionButtons {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-self: center;
+  align-items: stretch;
+  margin: 16px 200px 16px 0;
+}
+
+.roleModalSaveButton {
+  margin-left: 8px;
+  padding: 14px 32px;
+}
+
+.roleModalBackButton {
+  padding: 14px 32px;
+}
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
@@ -2,9 +2,13 @@
 
 import * as React from 'react';
 
+import { useModalContext } from 'lib/components/modal-provider.react.js';
 import type { RelativeMemberInfo, ThreadInfo } from 'lib/types/thread-types';
+import { values } from 'lib/utils/objects.js';
 
 import css from './change-member-role-modal.css';
+import Button, { buttonThemes } from '../../../components/button.react.js';
+import Dropdown from '../../../components/dropdown.react.js';
 import UserAvatar from '../../../components/user-avatar.react.js';
 import Modal from '../../modal.react.js';
 
@@ -14,11 +18,31 @@
 };
 
 function ChangeMemberRoleModal(props: ChangeMemberRoleModalProps): React.Node {
-  const { memberInfo } = props;
+  const { memberInfo, threadInfo } = props;
+  const { popModal } = useModalContext();
   const modalName = 'Change Role';
 
+  const roleOptions = React.useMemo(
+    () =>
+      values(threadInfo.roles).map(role => ({
+        id: role.id,
+        name: role.name,
+      })),
+    [threadInfo.roles],
+  );
+
+  const initialSelectedRole = React.useMemo(() => {
+    if (!memberInfo.role) {
+      return null;
+    }
+    return memberInfo.role;
+  }, [memberInfo.role]);
+
+  const [selectedRole, setSelectedRole] =
+    React.useState<?string>(initialSelectedRole);
+
   return (
-    <Modal name={modalName} onClose={() => {}} size="large">
+    <Modal name={modalName} onClose={popModal} size="large">
       <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.
@@ -29,6 +53,25 @@
         </div>
         <div className={css.roleModalMemberName}>{memberInfo.username}</div>
       </div>
+      <div className={css.roleModalRoleSelector}>
+        <Dropdown
+          options={roleOptions}
+          activeSelection={selectedRole}
+          setActiveSelection={setSelectedRole}
+        />
+      </div>
+      <div className={css.roleModalActionButtons}>
+        <Button variant="outline" className={css.roleModalBackButton}>
+          Back
+        </Button>
+        <Button
+          variant="filled"
+          className={css.roleModalSaveButton}
+          buttonColor={buttonThemes.primary}
+        >
+          Save
+        </Button>
+      </div>
     </Modal>
   );
 }