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
@@ -1,8 +1,11 @@
 // @flow
 
+import _groupBy from 'lodash/fp/groupBy.js';
+import _toPairs from 'lodash/fp/toPairs.js';
 import * as React from 'react';
 
 import { useSelector } from './redux-utils.js';
+import { useSortedENSResolvedUsers } from '../hooks/ens-cache.js';
 import { threadInfoSelector } from '../selectors/thread-selectors.js';
 import type {
   RelativeMemberInfo,
@@ -93,6 +96,36 @@
   return roleMap;
 }
 
+function useMembersGroupedByRole(
+  threadInfo: ThreadInfo,
+): $ReadOnlyMap<string, $ReadOnlyArray<RelativeMemberInfo>> {
+  const { members } = threadInfo;
+  const sortedENSResolvedMembers = useSortedENSResolvedUsers(members);
+
+  const roles = useRolesFromCommunityThreadInfo(
+    threadInfo,
+    sortedENSResolvedMembers,
+  );
+
+  const groupByRoleName = React.useMemo(
+    () =>
+      _groupBy(member => roles.get(member.id)?.name)(sortedENSResolvedMembers),
+    [sortedENSResolvedMembers, roles],
+  );
+
+  const membersGroupedByRoleMap = React.useMemo(() => {
+    const map: Map<string, $ReadOnlyArray<RelativeMemberInfo>> = new Map();
+
+    _toPairs(groupByRoleName)
+      .sort((a, b) => a[0].localeCompare(b[0]))
+      .forEach(([roleName, memberInfos]) => map.set(roleName, memberInfos));
+
+    return map;
+  }, [groupByRoleName]);
+
+  return membersGroupedByRoleMap;
+}
+
 function toggleUserSurfacedPermission(
   rolePermissions: ThreadRolePermissionsBlob,
   userSurfacedPermission: UserSurfacedPermission,
@@ -124,4 +157,5 @@
   useRoleDeletableAndEditableStatus,
   useRolesFromCommunityThreadInfo,
   toggleUserSurfacedPermission,
+  useMembersGroupedByRole,
 };