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;
-  padding: 20px;
+  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;
+}
+
+.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
@@ -1,12 +1,16 @@
 // @flow
 
+import invariant from 'invariant';
 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 UserAvatar from '../../../avatars/user-avatar.react.js';
+import Button, { buttonThemes } from '../../../components/button.react.js';
+import Dropdown from '../../../components/dropdown.react.js';
 import Modal from '../../modal.react.js';
 
 type ChangeMemberRoleModalProps = {
@@ -15,9 +19,23 @@
 };
 
 function ChangeMemberRoleModal(props: ChangeMemberRoleModalProps): React.Node {
-  const { memberInfo } = props;
+  const { memberInfo, threadInfo } = props;
   const { popModal } = useModalContext();
 
+  const roleOptions = React.useMemo(
+    () =>
+      values(threadInfo.roles).map(role => ({
+        id: role.id,
+        name: role.name,
+      })),
+    [threadInfo.roles],
+  );
+
+  const initialSelectedRole = memberInfo.role;
+  invariant(initialSelectedRole, "Member's role must be defined");
+
+  const [selectedRole, setSelectedRole] = React.useState(initialSelectedRole);
+
   return (
     <Modal name="Change Role" onClose={popModal} size="large">
       <div className={css.roleModalDescription}>
@@ -30,6 +48,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>
   );
 }