diff --git a/src/views/identity/administration/Roles.jsx b/src/views/identity/administration/Roles.jsx
index 79383c4f007d..600d5f31cd49 100644
--- a/src/views/identity/administration/Roles.jsx
+++ b/src/views/identity/administration/Roles.jsx
@@ -23,7 +23,7 @@ const Offcanvas = (row, rowIndex, formatExtraData) => {
       >
         <h5>Role Group Name:</h5> {row.DisplayName}
         <br></br> <br></br>
-        <h5>Member Names:</h5> {row.Members ? <p>{row.Members}</p> : <p>Role has no members.</p>}
+        <h5>Member Names:</h5> {row.Members ? row.Members.split(',').map((member, index) => <p key={index}>{member}</p>) : <p>Role has no members.</p>}
       </CippOffcanvas>
     </>
   )
@@ -53,6 +53,25 @@ const columns = [
     exportSelector: 'Members',
     omit: true,
   },
+  {
+    selector: (row) => row['Members'],
+    name: 'Assignments',
+    sortable: false,
+    cell: (row) => {
+      if (row.Members === 'none') {
+        return null;
+      }
+      const memberCount = row.Members ? row.Members.split(',').length : 0;
+      const memberText = row.Members && row.Members !== 'none' ? `Member${memberCount === 1 ? '' : 's'}` : null;
+      return (
+        <>
+          {memberCount} {memberText}
+        </>
+      );
+    },
+    exportSelector: 'Members',
+    maxWidth: '150px',
+  },
   {
     selector: (row) => 'View Members',
     name: 'Members',