diff --git a/src/components/shared/frame/UserList/index.tsx b/src/components/shared/frame/UserList/index.tsx
index 1201b6a70..a30ebc80d 100644
--- a/src/components/shared/frame/UserList/index.tsx
+++ b/src/components/shared/frame/UserList/index.tsx
@@ -42,6 +42,12 @@ interface FetchHookArgsType {
   addUserResponse?: boolean
 }
 
+interface RoleType {
+  roleId: string
+  clientId: string
+  roleName: string
+}
+
 export const UserList = ({
   sectionTitle,
   addButtonLabel,
@@ -137,11 +143,11 @@ export const UserList = ({
             flex: 4,
             renderCell: ({ value: roles }) =>
               roles.length
-                ? roles.map((role: string) => (
+                ? roles.map((role: RoleType) => (
                     <StatusTag
-                      key={role}
+                      key={role.roleId}
                       color="label"
-                      label={role}
+                      label={role.roleName}
                       className="statusTag"
                     />
                   ))