diff --git a/src/pages/groups/Read.tsx b/src/pages/groups/Read.tsx
index 1fbc6ab9..9d4f515c 100644
--- a/src/pages/groups/Read.tsx
+++ b/src/pages/groups/Read.tsx
@@ -1,5 +1,6 @@
import React from 'react';
import {Link as RouterLink, useParams, useNavigate} from 'react-router-dom';
+import {Theme} from '@mui/material/styles';
import Box from '@mui/material/Box';
import Chip from '@mui/material/Chip';
@@ -644,6 +645,106 @@ export default function ReadGroup() {
+ {group.type !== 'role_group' && (group.active_role_member_mappings?.length || group.active_role_owner_mappings?.length) ? (
+
+
+
+
+
+
+
+
+ Roles with Access
+
+
+ Roles that grant access to this group
+
+
+
+
+
+
+ Total: {(group.active_role_member_mappings?.length || 0) + (group.active_role_owner_mappings?.length || 0)}
+
+
+
+
+ Role Name
+ Access Type
+ Ending
+
+
+
+
+ {(group.active_role_owner_mappings ?? []).map((roleMapping: RoleGroupMap) => (
+
+
+ theme.palette.primary.main,
+ },
+ }}
+ component={RouterLink}>
+ {roleMapping.active_role_group?.name}
+
+
+
+
+
+
+
+
+
+
+ ))}
+ {(group.active_role_member_mappings ?? []).map((roleMapping: RoleGroupMap) => (
+
+
+ theme.palette.primary.main,
+ },
+ }}
+ component={RouterLink}>
+ {roleMapping.active_role_group?.name}
+
+
+
+
+
+
+
+
+
+
+ ))}
+
+
+
+
+ ) : null}