diff --git a/lib/utils/role-utils.js b/lib/utils/role-utils.js
--- a/lib/utils/role-utils.js
+++ b/lib/utils/role-utils.js
@@ -54,7 +54,28 @@
   return message;
 }
 
+type RoleDeletableAndEditableStatus = {
+  +isDeletable: boolean,
+  +isEditable: boolean,
+};
+function useRoleDeletableAndEditableStatus(
+  roleName: string,
+  defaultRoleID: string,
+  existingRoleID: string,
+): RoleDeletableAndEditableStatus {
+  return React.useMemo(() => {
+    const canDelete = roleName !== 'Admins' && defaultRoleID !== existingRoleID;
+    const canEdit = roleName !== 'Admins';
+
+    return {
+      isDeletable: canDelete,
+      isEditable: canEdit,
+    };
+  }, [roleName, defaultRoleID, existingRoleID]);
+}
+
 export {
   useFilterPermissionOptionsByThreadType,
   constructRoleDeletionMessagePrompt,
+  useRoleDeletableAndEditableStatus,
 };
diff --git a/web/components/menu.css b/web/components/menu.css
--- a/web/components/menu.css
+++ b/web/components/menu.css
@@ -42,6 +42,14 @@
   top: 24px;
 }
 
+div.menuActionListRoleActions {
+  font-size: var(--s-font-14);
+  background-color: var(--menu-bg-light);
+  color: var(--menu-color);
+  stroke: var(--menu-color);
+  top: 20px;
+}
+
 button.menuAction {
   color: inherit;
   z-index: 1;
diff --git a/web/components/menu.react.js b/web/components/menu.react.js
--- a/web/components/menu.react.js
+++ b/web/components/menu.react.js
@@ -6,7 +6,11 @@
 import css from './menu.css';
 import { useRenderMenu } from '../menu-provider.react.js';
 
-type MenuVariant = 'thread-actions' | 'member-actions' | 'community-actions';
+type MenuVariant =
+  | 'thread-actions'
+  | 'member-actions'
+  | 'community-actions'
+  | 'role-actions';
 
 type MenuProps = {
   +icon: React.Node,
@@ -30,6 +34,7 @@
     [css.menuActionListThreadActions]: variant === 'thread-actions',
     [css.menuActionListMemberActions]: variant === 'member-actions',
     [css.menuActionListCommunityActions]: variant === 'community-actions',
+    [css.menuActionListRoleActions]: variant === 'role-actions',
   });
 
   const menuActionList = React.useMemo(
diff --git a/web/roles/community-roles-modal.css b/web/roles/community-roles-modal.css
--- a/web/roles/community-roles-modal.css
+++ b/web/roles/community-roles-modal.css
@@ -17,7 +17,7 @@
 }
 
 .rolePanelTitle:last-of-type {
-  margin-right: 32px;
+  margin-right: 90px;
 }
 
 .separator {
diff --git a/web/roles/community-roles-modal.react.js b/web/roles/community-roles-modal.react.js
--- a/web/roles/community-roles-modal.react.js
+++ b/web/roles/community-roles-modal.react.js
@@ -32,11 +32,12 @@
       Object.keys(roleNamesToMembers).map(roleName => (
         <RolePanelEntry
           key={roleName}
+          threadInfo={threadInfo}
           roleName={roleName}
           memberCount={roleNamesToMembers[roleName]}
         />
       )),
-    [roleNamesToMembers],
+    [roleNamesToMembers, threadInfo],
   );
 
   const rolePermissionsForNewRole = React.useMemo(() => new Set(), []);
diff --git a/web/roles/role-actions-menu.css b/web/roles/role-actions-menu.css
new file mode 100644
--- /dev/null
+++ b/web/roles/role-actions-menu.css
@@ -0,0 +1,4 @@
+.menuContainer {
+  color: var(--menu-color-light);
+  width: 10px;
+}
diff --git a/web/roles/role-actions-menu.react.js b/web/roles/role-actions-menu.react.js
new file mode 100644
--- /dev/null
+++ b/web/roles/role-actions-menu.react.js
@@ -0,0 +1,84 @@
+// @flow
+
+import invariant from 'invariant';
+import * as React from 'react';
+
+import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
+import type { ThreadInfo } from 'lib/types/thread-types.js';
+import { useRoleDeletableAndEditableStatus } from 'lib/utils/role-utils.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 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 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;
diff --git a/web/roles/role-panel-entry.css b/web/roles/role-panel-entry.css
--- a/web/roles/role-panel-entry.css
+++ b/web/roles/role-panel-entry.css
@@ -1,7 +1,5 @@
 .rolePanelEntry {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
+  display: grid;
   align-items: center;
   padding: 12px;
   color: var(--community-roles-text-color);
@@ -13,9 +11,16 @@
 }
 
 .rolePanelCountEntryContainer {
-  margin-right: 40px;
   display: flex;
-  align-items: flex-end;
+  align-items: center;
+  justify-content: flex-end;
+  grid-column: 3;
+}
+
+.rolePanelCountAndIcon {
+  display: flex;
+  align-items: center;
+  margin-right: 90px;
 }
 
 .rolePanelCountEntry {
diff --git a/web/roles/role-panel-entry.react.js b/web/roles/role-panel-entry.react.js
--- a/web/roles/role-panel-entry.react.js
+++ b/web/roles/role-panel-entry.react.js
@@ -2,22 +2,29 @@
 
 import * as React from 'react';
 
+import type { ThreadInfo } from 'lib/types/thread-types.js';
+
+import RoleActionsMenu from './role-actions-menu.react.js';
 import css from './role-panel-entry.css';
 import CommIcon from '../CommIcon.react.js';
 
 type RolePanelEntryProps = {
+  +threadInfo: ThreadInfo,
   +roleName: string,
   +memberCount: number,
 };
 
 function RolePanelEntry(props: RolePanelEntryProps): React.Node {
-  const { roleName, memberCount } = props;
+  const { threadInfo, roleName, memberCount } = props;
   return (
     <div className={css.rolePanelEntry}>
       <div className={css.rolePanelNameEntry}>{roleName}</div>
       <div className={css.rolePanelCountEntryContainer}>
-        <div className={css.rolePanelCountEntry}>{memberCount}</div>
-        <CommIcon icon="user-filled" size={18} />
+        <div className={css.rolePanelCountAndIcon}>
+          <div className={css.rolePanelCountEntry}>{memberCount}</div>
+          <CommIcon icon="user-filled" size={18} />
+        </div>
+        <RoleActionsMenu threadInfo={threadInfo} roleName={roleName} />
       </div>
     </div>
   );