diff --git a/web/modals/threads/members/change-member-role-modal.css b/web/modals/threads/members/change-member-role-modal.css
index 7576d8594..78daa271b 100644
--- a/web/modals/threads/members/change-member-role-modal.css
+++ b/web/modals/threads/members/change-member-role-modal.css
@@ -1,29 +1,50 @@
 .roleModalDescription {
   color: var(--change-member-role-modal-description-text);
   padding: 16px 32px 0 32px;
   font-size: medium;
   line-height: 1.5;
 }
 
 .roleModalMember {
   display: flex;
   align-items: center;
   justify-content: center;
   margin-top: 24px;
 }
 
 .roleModalMemberAvatar {
   margin-right: 4px;
 }
 
 .roleModalMemberName {
   margin-left: 4px;
   font-size: large;
   color: var(--change-member-role-modal-generic-text);
 }
 
 .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
index 448b845d5..ac382b8ba 100644
--- a/web/modals/threads/members/change-member-role-modal.react.js
+++ b/web/modals/threads/members/change-member-role-modal.react.js
@@ -1,37 +1,74 @@
 // @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 = {
   +memberInfo: RelativeMemberInfo,
   +threadInfo: ThreadInfo,
 };
 
 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}>
         Members can only be assigned to one role at a time. Changing a
         member&rsquo;s role will replace their previously assigned role.
       </div>
       <div className={css.roleModalMember}>
         <div className={css.roleModalMemberAvatar}>
           <UserAvatar userID={memberInfo.id} size="large" />
         </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>
   );
 }
 
 export default ChangeMemberRoleModal;