diff --git a/ui/src/app/admin/component/ApproversList.js b/ui/src/app/admin/component/ApproversList.js
new file mode 100644
index 000000000..70481229a
--- /dev/null
+++ b/ui/src/app/admin/component/ApproversList.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+export function ApproversList ({ group, children }) {
+
+    const list = React.useMemo(() => {
+        if (group.approversList?.length > 0) {
+            return group.approversList[0].approverGroupIds;
+        }
+        return [];
+    }, [group]);
+
+    return (<>
+        { list.length > 0 ? children(list) : '-' }
+    </>)
+}
\ No newline at end of file
diff --git a/ui/src/app/admin/component/GroupName.js b/ui/src/app/admin/component/GroupName.js
new file mode 100644
index 000000000..7d8ccd4fb
--- /dev/null
+++ b/ui/src/app/admin/component/GroupName.js
@@ -0,0 +1,7 @@
+import React from 'react';
+
+export function GroupName ({id, groups}) {
+    const group = React.useMemo(() => groups.find(g => g.resourceId === id), [id, groups]);
+
+    return (<>{ group.name }</>);
+}
\ No newline at end of file
diff --git a/ui/src/app/admin/container/GroupsList.js b/ui/src/app/admin/container/GroupsList.js
index 6172695a4..82dc6c7ff 100644
--- a/ui/src/app/admin/container/GroupsList.js
+++ b/ui/src/app/admin/container/GroupsList.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import { faEdit, faPlusCircle, faTrash } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
@@ -9,6 +9,9 @@ import { Translate } from '../../i18n/components/translate';
 
 import { DeleteConfirmation } from '../../core/components/DeleteConfirmation';
 
+import { GroupName } from '../component/GroupName';
+import { ApproversList } from '../component/ApproversList';
+
 export function GroupsList({ groups, onDelete }) {
 
     const remove = (id) => {
@@ -54,7 +57,18 @@ export function GroupsList({ groups, onDelete }) {
                                                 <tr key={i}>
                                                     <td>{group.name}</td>
                                                     <td>{group.description || ''}</td>
-                                                    <td>{group.approversList?.length > 0 ? group.approversList[0].approverGroupIds.join(', ') : '-'}</td>
+                                                    <td>
+                                                        <ApproversList group={group}>
+                                                            {(list) => (list.map((id, idx) => {
+                                                                return (
+                                                                    <Fragment key={idx}>
+                                                                        <GroupName id={id} groups={groups} />
+                                                                        { idx < (list.length - 1) && ', ' }
+                                                                    </Fragment>
+                                                                );
+                                                            }))}
+                                                        </ApproversList>
+                                                    </td>
                                                     <td className="text-end">
                                                         <Link to={`../${group.resourceId}/edit`} className="btn btn-link text-primary"
                                                             id={`group-edit-${i}`}>