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
@@ -11,6 +11,7 @@
 import Dropdown from '../../../components/dropdown.react.js';
 import UserAvatar from '../../../components/user-avatar.react.js';
 import Modal from '../../modal.react.js';
+import UnsavedChangesModal from '../../unsaved-changes-modal.react.js';
 
 type ChangeMemberRoleModalProps = {
   +memberInfo: RelativeMemberInfo,
@@ -19,7 +20,7 @@
 
 function ChangeMemberRoleModal(props: ChangeMemberRoleModalProps): React.Node {
   const { memberInfo, threadInfo } = props;
-  const { popModal } = useModalContext();
+  const { pushModal, popModal } = useModalContext();
 
   const roleOptions = React.useMemo(
     () =>
@@ -40,6 +41,15 @@
   const [selectedRole, setSelectedRole] =
     React.useState<?string>(initialSelectedRole);
 
+  const onBackClick = React.useCallback(() => {
+    if (selectedRole === initialSelectedRole) {
+      popModal();
+      return;
+    }
+
+    pushModal(<UnsavedChangesModal />);
+  }, [initialSelectedRole, popModal, pushModal, selectedRole]);
+
   return (
     <Modal name="Change Role" onClose={popModal} size="large">
       <div className={css.roleModalDescription}>
@@ -60,7 +70,11 @@
         />
       </div>
       <div className={css.roleModalActionButtons}>
-        <Button variant="outline" className={css.roleModalBackButton}>
+        <Button
+          variant="outline"
+          className={css.roleModalBackButton}
+          onClick={onBackClick}
+        >
           Back
         </Button>
         <Button
diff --git a/web/modals/unsaved-changes-modal.css b/web/modals/unsaved-changes-modal.css
new file mode 100644
--- /dev/null
+++ b/web/modals/unsaved-changes-modal.css
@@ -0,0 +1,27 @@
+.unsavedChangesModalText {
+  color: var(--unsaved-changes-modal-text-color);
+  font-size: var(--l-font-18);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 50px;
+}
+
+.unsavedChangesModalButtons {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-self: center;
+  align-items: stretch;
+  margin: 16px 64px 16px 0;
+}
+
+.unsavedChangesCloseModalButton {
+  margin-left: 8px;
+  padding: 10px 20px;
+}
+
+.unsavedChangesBackButton {
+  padding: 10px 20px;
+}
diff --git a/web/modals/unsaved-changes-modal.react.js b/web/modals/unsaved-changes-modal.react.js
new file mode 100644
--- /dev/null
+++ b/web/modals/unsaved-changes-modal.react.js
@@ -0,0 +1,53 @@
+// @flow
+
+import * as React from 'react';
+
+import { useModalContext } from 'lib/components/modal-provider.react.js';
+
+import Modal from './modal.react.js';
+import css from './unsaved-changes-modal.css';
+import Button, { buttonThemes } from '../components/button.react.js';
+
+function UnsavedChangesModal(): React.Node {
+  const modalName = '';
+  const { popModal } = useModalContext();
+
+  const onCloseModalClick = React.useCallback(() => {
+    // Pop the unsaved changes modal and the modal that triggered it.
+    popModal();
+    popModal();
+  }, [popModal]);
+
+  return (
+    <Modal
+      name={modalName}
+      onClose={popModal}
+      withCloseButton={false}
+      size="large"
+    >
+      <div className={css.unsavedChangesModalText}>
+        You have unsaved changes, are you sure you want to close the modal? You
+        will lose all your progress.
+      </div>
+      <div className={css.unsavedChangesModalButtons}>
+        <Button
+          variant="outline"
+          className={css.unsavedChangesBackButton}
+          onClick={popModal}
+        >
+          Back
+        </Button>
+        <Button
+          variant="filled"
+          className={css.unsavedChangesCloseModalButton}
+          buttonColor={buttonThemes.danger}
+          onClick={onCloseModalClick}
+        >
+          Close Modal
+        </Button>
+      </div>
+    </Modal>
+  );
+}
+
+export default UnsavedChangesModal;
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -231,4 +231,5 @@
   --dropdown-selected-option-check-color: var(--violet-dark-100);
   --change-member-role-modal-description-text: var(--shades-white-80);
   --change-member-role-modal-generic-text: var(--shades-white-100);
+  --unsaved-changes-modal-text-color: var(--shades-white-60);
 }