diff --git a/web/roles/create-roles-modal.react.js b/web/roles/create-roles-modal.react.js
index a114b4534..0b322c707 100644
--- a/web/roles/create-roles-modal.react.js
+++ b/web/roles/create-roles-modal.react.js
@@ -1,293 +1,295 @@
 // @flow
 
 import classNames from 'classnames';
 import invariant from 'invariant';
 import * as React from 'react';
 
 import {
   modifyCommunityRole,
   modifyCommunityRoleActionTypes,
 } from 'lib/actions/thread-actions.js';
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
 import type {
   UserSurfacedPermission,
   UserSurfacedPermissionOption,
 } from 'lib/types/thread-permission-types.js';
 import type {
   ThreadInfo,
   RoleModificationRequest,
 } from 'lib/types/thread-types.js';
 import {
   useServerCall,
   useDispatchActionPromise,
 } from 'lib/utils/action-utils.js';
 import { values } from 'lib/utils/objects.js';
 import { useFilterPermissionOptionsByThreadType } from 'lib/utils/role-utils.js';
 
 import css from './create-roles-modal.css';
 import Button, { buttonThemes } from '../components/button.react.js';
 import EnumSettingsOption from '../components/enum-settings-option.react.js';
 import LoadingIndicator from '../loading-indicator.react.js';
 import Input from '../modals/input.react.js';
 import Modal from '../modals/modal.react.js';
 import UnsavedChangesModal from '../modals/unsaved-changes-modal.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 
 const createRolesLoadingStatusSelector = createLoadingStatusSelector(
   modifyCommunityRoleActionTypes,
 );
 
 type CreateRolesModalProps = {
   +threadInfo: ThreadInfo,
   +action: 'create_role' | 'edit_role',
   +existingRoleID?: string,
   +roleName: string,
   +rolePermissions: $ReadOnlySet<UserSurfacedPermission>,
 };
 
 type RoleCreationErrorVariant = 'already_exists' | 'unknown_error';
 
 function CreateRolesModal(props: CreateRolesModalProps): React.Node {
   const { pushModal, popModal } = useModalContext();
   const { threadInfo, action, existingRoleID, roleName, rolePermissions } =
     props;
 
   const callModifyCommunityRole = useServerCall(modifyCommunityRole);
   const dispatchActionPromise = useDispatchActionPromise();
 
   const createRolesLoadingStatus: LoadingStatus = useSelector(
     createRolesLoadingStatusSelector,
   );
 
   const [pendingRoleName, setPendingRoleName] =
     React.useState<string>(roleName);
   const [pendingRolePermissions, setPendingRolePermissions] =
     React.useState<$ReadOnlySet<UserSurfacedPermission>>(rolePermissions);
 
   const [roleCreationFailed, setRoleCreationFailed] =
     React.useState<?RoleCreationErrorVariant>();
 
+  const createButtonText = action === 'create_role' ? 'Create' : 'Save';
+
   const onChangeRoleName = React.useCallback(
     (event: SyntheticEvent<HTMLInputElement>) => {
       setRoleCreationFailed(null);
       setPendingRoleName(event.currentTarget.value);
     },
     [],
   );
 
   const onCloseModal = React.useCallback(() => {
     const pendingSet = new Set(pendingRolePermissions);
     const roleSet = new Set(rolePermissions);
 
     let arePermissionsEqual = true;
     if (pendingSet.size !== roleSet.size) {
       arePermissionsEqual = false;
     }
     for (const permission of pendingSet) {
       if (!roleSet.has(permission)) {
         arePermissionsEqual = false;
         break;
       }
     }
 
     if (pendingRoleName === roleName && arePermissionsEqual) {
       popModal();
       return;
     }
 
     pushModal(<UnsavedChangesModal />);
   }, [
     pendingRoleName,
     roleName,
     pendingRolePermissions,
     rolePermissions,
     pushModal,
     popModal,
   ]);
 
   const clearPermissionsClassNames = classNames({
     [css.clearPermissions]: true,
     [css.clearPermissionsDisabled]: pendingRolePermissions.size === 0,
     [css.clearPermissionsEnabled]: pendingRolePermissions.size > 0,
   });
 
   const onClearPermissions = React.useCallback(
     () => setPendingRolePermissions(new Set()),
     [],
   );
 
   const isUserSurfacedPermissionSelected = React.useCallback(
     (option: UserSurfacedPermissionOption) =>
       pendingRolePermissions.has(option.userSurfacedPermission),
     [pendingRolePermissions],
   );
 
   const onEnumValuePress = React.useCallback(
     (option: UserSurfacedPermissionOption) =>
       setPendingRolePermissions(currentPermissions => {
         if (currentPermissions.has(option.userSurfacedPermission)) {
           const newPermissions = new Set(currentPermissions);
           newPermissions.delete(option.userSurfacedPermission);
           return newPermissions;
         } else {
           return new Set([
             ...currentPermissions,
             option.userSurfacedPermission,
           ]);
         }
       }),
     [],
   );
 
   const filteredUserSurfacedPermissionOptions =
     useFilterPermissionOptionsByThreadType(threadInfo.type);
 
   const permissionsList = React.useMemo(
     () =>
       [...filteredUserSurfacedPermissionOptions].map(permission => (
         <EnumSettingsOption
           key={permission.userSurfacedPermission}
           selected={isUserSurfacedPermissionSelected(permission)}
           onSelect={() => onEnumValuePress(permission)}
           icon={null}
           title={permission.title}
           type="checkbox"
           statements={[{ statement: permission.description }]}
         />
       )),
     [
       filteredUserSurfacedPermissionOptions,
       isUserSurfacedPermissionSelected,
       onEnumValuePress,
     ],
   );
 
   const errorMessageClassNames = classNames({
     [css.errorMessage]: true,
     [css.errorMessageVisible]: !!roleCreationFailed,
   });
 
   const threadRoleNames = React.useMemo(
     () => values(threadInfo.roles).map(role => role.name),
     [threadInfo],
   );
 
   const onClickCreateRole = React.useCallback(() => {
     if (threadRoleNames.includes(pendingRoleName) && action === 'create_role') {
       setRoleCreationFailed('already_exists');
       return;
     }
 
     let callModifyCommunityRoleParams: RoleModificationRequest;
     if (action === 'create_role') {
       callModifyCommunityRoleParams = {
         community: threadInfo.id,
         action,
         name: pendingRoleName,
         permissions: [...pendingRolePermissions],
       };
     } else {
       invariant(existingRoleID, 'existingRoleID should be defined');
       callModifyCommunityRoleParams = {
         community: threadInfo.id,
         existingRoleID,
         action,
         name: pendingRoleName,
         permissions: [...pendingRolePermissions],
       };
     }
 
     dispatchActionPromise(
       modifyCommunityRoleActionTypes,
       (async () => {
         try {
           const response = await callModifyCommunityRole(
             callModifyCommunityRoleParams,
           );
           popModal();
           return response;
         } catch (e) {
           setRoleCreationFailed('unknown_error');
           throw e;
         }
       })(),
     );
   }, [
     callModifyCommunityRole,
     dispatchActionPromise,
     threadInfo,
     action,
     existingRoleID,
     pendingRoleName,
     pendingRolePermissions,
     popModal,
     threadRoleNames,
   ]);
 
   const errorMessage = React.useMemo(() => {
     if (roleCreationFailed === 'already_exists') {
       return 'There is already a role with this name in the community';
     } else {
       return 'An unknown error occurred. Please try again';
     }
   }, [roleCreationFailed]);
 
   const saveButtonContent = React.useMemo(() => {
     if (createRolesLoadingStatus === 'loading') {
       return (
         <LoadingIndicator status={createRolesLoadingStatus} size="medium" />
       );
     }
 
-    return 'Save';
-  }, [createRolesLoadingStatus]);
+    return createButtonText;
+  }, [createRolesLoadingStatus, createButtonText]);
 
   return (
     <Modal name="Create Role" onClose={onCloseModal} size="large">
       <form method="POST" className={css.formContainer}>
         <div className={css.roleNameLabel}>Role Name</div>
         <div className={css.roleNameInput}>
           <Input
             type="text"
             value={pendingRoleName}
             onChange={onChangeRoleName}
           />
         </div>
         <div className={errorMessageClassNames}>{errorMessage}</div>
       </form>
       <hr className={css.separator} />
       <div className={css.permissionsHeaderContainer}>
         <div className={css.permissionsLabel}>Permissions</div>
         <div
           className={clearPermissionsClassNames}
           onClick={onClearPermissions}
         >
           Clear Permissions
         </div>
       </div>
       <div className={css.permissionsContainer}>{permissionsList}</div>
       <div className={css.buttonsContainer}>
         <Button
           variant="outline"
           className={css.backButton}
           buttonColor={buttonThemes.outline}
           onClick={onCloseModal}
         >
           Back
         </Button>
         <Button
           variant="filled"
           className={css.createRoleButton}
           buttonColor={buttonThemes.standard}
           onClick={onClickCreateRole}
         >
           {saveButtonContent}
         </Button>
       </div>
     </Modal>
   );
 }
 
 export default CreateRolesModal;
diff --git a/web/roles/role-actions-menu.react.js b/web/roles/role-actions-menu.react.js
index 8a3cdd313..67c1da5f5 100644
--- a/web/roles/role-actions-menu.react.js
+++ b/web/roles/role-actions-menu.react.js
@@ -1,84 +1,108 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
+import { useModalContext } from 'lib/components/modal-provider.react.js';
 import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
+import { useRoleUserSurfacedPermissions } from 'lib/shared/thread-utils.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
 import { useRoleDeletableAndEditableStatus } from 'lib/utils/role-utils.js';
 
+import CreateRolesModal from './create-roles-modal.react.js';
 import css from './role-actions-menu.css';
 import MenuItem from '../components/menu-item.react.js';
 import Menu from '../components/menu.react.js';
 
 const menuIcon = <SWMansionIcon icon="menu-horizontal" size={20} />;
 
 type RoleActionsMenuProps = {
   +threadInfo: ThreadInfo,
   +roleName: string,
 };
 
 function RoleActionsMenu(props: RoleActionsMenuProps): React.Node {
   const { threadInfo, roleName } = props;
+  const { pushModal } = useModalContext();
 
   const defaultRoleID = Object.keys(threadInfo.roles).find(
     roleID => threadInfo.roles[roleID].isDefault,
   );
   invariant(defaultRoleID, 'default role should exist');
 
   const existingRoleID = Object.keys(threadInfo.roles).find(
     roleID => threadInfo.roles[roleID].name === roleName,
   );
   invariant(existingRoleID, 'existing role should exist');
 
   const roleOptions = useRoleDeletableAndEditableStatus(
     roleName,
     defaultRoleID,
     existingRoleID,
   );
 
-  // TODO: Implement in following diffs
-  const openEditRoleModal = React.useCallback(() => {}, []);
+  const roleNamesToUserSurfacedPermissions =
+    useRoleUserSurfacedPermissions(threadInfo);
+
+  const openEditRoleModal = React.useCallback(
+    () =>
+      pushModal(
+        <CreateRolesModal
+          threadInfo={threadInfo}
+          action="edit_role"
+          existingRoleID={existingRoleID}
+          roleName={roleName}
+          rolePermissions={roleNamesToUserSurfacedPermissions[roleName]}
+        />,
+      ),
+    [
+      existingRoleID,
+      pushModal,
+      roleName,
+      roleNamesToUserSurfacedPermissions,
+      threadInfo,
+    ],
+  );
   const openDeleteRoleModal = React.useCallback(() => {}, []);
 
   const menuItems = React.useMemo(() => {
     const availableOptions = [];
     const { isDeletable, isEditable } = roleOptions;
 
     if (isEditable) {
       availableOptions.push(
         <MenuItem
           key="Edit role"
           text="Edit role"
           icon="edit-1"
           onClick={openEditRoleModal}
           dangerous={false}
         />,
       );
     }
 
     if (isDeletable) {
       availableOptions.push(
         <MenuItem
           key="Delete role"
           text="Delete role"
           icon="cross-circle"
           onClick={openDeleteRoleModal}
           dangerous={true}
         />,
       );
     }
 
     return availableOptions;
   }, [roleOptions, openDeleteRoleModal, openEditRoleModal]);
 
   return (
     <div className={css.menuContainer}>
       <Menu icon={menuIcon} variant="role-actions">
         {menuItems}
       </Menu>
     </div>
   );
 }
 
 export default RoleActionsMenu;