diff --git a/public/app/core/components/RolePicker/RolePickerMenu.tsx b/public/app/core/components/RolePicker/RolePickerMenu.tsx
index 2742b13488c..9b6d7d62708 100644
--- a/public/app/core/components/RolePicker/RolePickerMenu.tsx
+++ b/public/app/core/components/RolePicker/RolePickerMenu.tsx
@@ -498,8 +498,7 @@ export const RoleMenuGroupOption = React.forwardRef<HTMLDivElement, RoleMenuGrou
 RoleMenuGroupOption.displayName = 'RoleMenuGroupOption';
 
 const getRoleGroup = (role: Role) => {
-  const parts = role.name.split(':');
-  return parts.length > 1 ? parts[1] : '';
+  return role.group ?? 'Other';
 };
 
 const capitalize = (s: string): string => {
diff --git a/public/app/types/accessControl.ts b/public/app/types/accessControl.ts
index 07e987f7329..09c6bc15b18 100644
--- a/public/app/types/accessControl.ts
+++ b/public/app/types/accessControl.ts
@@ -55,6 +55,7 @@ export interface Role {
   name: string;
   displayName: string;
   description: string;
+  group: string;
   global: boolean;
   version: number;
   created: string;