diff --git a/webui/src/lib/components/auth/forms.jsx b/webui/src/lib/components/auth/forms.jsx
index c3a1c640a94..8f2b087952b 100644
--- a/webui/src/lib/components/auth/forms.jsx
+++ b/webui/src/lib/components/auth/forms.jsx
@@ -9,16 +9,8 @@ import {SearchIcon} from "@primer/octicons-react";
 import {useAPI} from "../../hooks/api";
 import {Checkbox, DataTable, DebouncedFormControl, AlertError, Loading} from "../controls";
 
-export const ResolveEntityDisplayName = (ent) => {
-    // for users
-    if (ent?.email?.length) return ent.email;
-    if (ent?.friendly_name?.length) return ent.friendly_name;
-    // for groups
-    if (ent?.name?.length) return ent.name;
-    return ent.id;
-}
-
-export const AttachModal = ({ show, searchFn, onAttach, onHide, addText = "Add",
+
+export const AttachModal = ({ show, searchFn, onAttach, onHide, resolveEntityFN = (ent => ent.id), addText = "Add",
                           emptyState = 'No matches', modalTitle = 'Add', headers = ['Select', 'ID'],
                      filterPlaceholder = 'Filter...'}) => {
     const search = useRef(null);
@@ -50,7 +42,7 @@ export const AttachModal = ({ show, searchFn, onAttach, onHide, addText = "Add",
                             onAdd={() => setSelected([...selected, ent])}
                             onRemove={() => setSelected(selected.filter(selectedEnt => selectedEnt.id !== ent.id))}
                             name={'selected'}/>,
-                        <strong>{ResolveEntityDisplayName(ent)}</strong>
+                        <strong>{resolveEntityFN(ent)}</strong>
                     ]}/>
 
                 <div className="mt-3">
@@ -59,7 +51,7 @@ export const AttachModal = ({ show, searchFn, onAttach, onHide, addText = "Add",
                         <strong>Selected: </strong>
                         {(selected.map(item => (
                             <Badge key={item.id} pill variant="primary" className="me-1">
-                                {ResolveEntityDisplayName(item)}
+                                {resolveEntityFN(item)}
                             </Badge>
                         )))}
                     </p>
diff --git a/webui/src/lib/utils.ts b/webui/src/lib/utils.ts
index 3be59c67120..266dfbd4817 100644
--- a/webui/src/lib/utils.ts
+++ b/webui/src/lib/utils.ts
@@ -4,7 +4,7 @@ interface User {
   friendly_name: string;
 }
 
-export const resolveDisplayName = (user: User): string => {
+export const resolveUserDisplayName = (user: User): string => {
   if (!user) return "";
   if (user?.email?.length) return user.email;
   if (user?.friendly_name?.length) return user.friendly_name;
diff --git a/webui/src/pages/auth/credentials.jsx b/webui/src/pages/auth/credentials.jsx
index 344ab46c146..33dab61cc7c 100644
--- a/webui/src/pages/auth/credentials.jsx
+++ b/webui/src/pages/auth/credentials.jsx
@@ -12,7 +12,7 @@ import {auth} from "../../lib/api";
 import {useState} from "react";
 import {CredentialsShowModal, CredentialsTable} from "../../lib/components/auth/credentials";
 import {useRouter} from "../../lib/hooks/router";
-import {resolveDisplayName} from "../../lib/utils";
+import {resolveUserDisplayName} from "../../lib/utils";
 
 const CredentialsContainer = () => {
     const router = useRouter();
@@ -40,7 +40,7 @@ const CredentialsContainer = () => {
                     <ConfirmationButton
                         variant="success"
                         modalVariant="success"
-                        msg={<span>Create a new Access Key for user <strong>{resolveDisplayName(user)}</strong>?</span>}
+                        msg={<span>Create a new Access Key for user <strong>{resolveUserDisplayName(user)}</strong>?</span>}
                         onConfirm={hide => {
                             createKey()
                                 .then(key => { setCreatedKey(key) })
diff --git a/webui/src/pages/auth/groups/group/members.jsx b/webui/src/pages/auth/groups/group/members.jsx
index 66df2c76ca9..c7c9fe9842c 100644
--- a/webui/src/pages/auth/groups/group/members.jsx
+++ b/webui/src/pages/auth/groups/group/members.jsx
@@ -6,7 +6,7 @@ import {GroupHeader} from "../../../../lib/components/auth/nav";
 import {useAPIWithPagination} from "../../../../lib/hooks/api";
 import {auth, MAX_LISTING_AMOUNT} from "../../../../lib/api";
 import {Paginator} from "../../../../lib/components/pagination";
-import {AttachModal, ResolveEntityDisplayName} from "../../../../lib/components/auth/forms";
+import {AttachModal} from "../../../../lib/components/auth/forms";
 import {ConfirmationButton} from "../../../../lib/components/modals";
 import {
     ActionGroup,
@@ -19,7 +19,7 @@ import {
 } from "../../../../lib/components/controls";
 import {useRouter} from "../../../../lib/hooks/router";
 import {Link} from "../../../../lib/components/nav";
-import {resolveDisplayName} from "../../../../lib/utils";
+import {resolveUserDisplayName} from "../../../../lib/utils";
 
 
 const GroupMemberList = ({ groupId, after, onPaginate }) => {
@@ -34,7 +34,7 @@ const GroupMemberList = ({ groupId, after, onPaginate }) => {
         setAttachError(null);
     }, [refresh]);
 
-    const setAllUsersFromLakeFS = async () => {
+    const allUsersFromLakeFS = async (resolveUserDisplayNameFN = (user => user.id)) => {
         if (allUsers.length > 0) {
             return allUsers
         }
@@ -48,7 +48,7 @@ const GroupMemberList = ({ groupId, after, onPaginate }) => {
                 after = results.pagination.next_offset;
                 hasMore = results.pagination.has_more;
             } while (hasMore);
-            usersList.sort((a, b) => ResolveEntityDisplayName(a).localeCompare(ResolveEntityDisplayName(b)));
+            usersList.sort((a, b) => resolveUserDisplayNameFN(a).localeCompare(resolveUserDisplayNameFN(b)));
             setAllUsers(usersList);
             return usersList;
         } catch (error) {
@@ -56,9 +56,9 @@ const GroupMemberList = ({ groupId, after, onPaginate }) => {
             return [];
         }
     }
-    const searchUsers = async (prefix, maxResults) => {
-        let allUsersList = await setAllUsersFromLakeFS()
-        let filteredUsers = allUsersList.filter(user => ResolveEntityDisplayName(user).startsWith(prefix));
+    const searchUsers = async (prefix, maxResults, resolveUserDisplayNameFN = (user => user.id)) => {
+        let allUsersList = await allUsersFromLakeFS(resolveUserDisplayNameFN)
+        let filteredUsers = allUsersList.filter(user => resolveUserDisplayNameFN(user).startsWith(prefix));
         return filteredUsers.slice(0, maxResults);
     };
     let content;
@@ -71,7 +71,7 @@ const GroupMemberList = ({ groupId, after, onPaginate }) => {
                 <DataTable
                     keyFn={user => user.id}
                     rowFn={user => [
-                        <Link href={{pathname: '/auth/users/:userId', params: {userId: user.id}}}>{resolveDisplayName(user)}</Link>,
+                        <Link href={{pathname: '/auth/users/:userId', params: {userId: user.id}}}>{resolveUserDisplayName(user)}</Link>,
                         <FormattedDate dateValue={user.creation_date}/>
                     ]}
                     headers={['User ID', 'Created At']}
@@ -80,7 +80,7 @@ const GroupMemberList = ({ groupId, after, onPaginate }) => {
                         buttonFn: user => <ConfirmationButton
                             size="sm"
                             variant="outline-danger"
-                            msg={<span>Are you sure you{'\''}d like to remove user <strong>{resolveDisplayName(user)}</strong> from group <strong>{groupId}</strong>?</span>}
+                            msg={<span>Are you sure you{'\''}d like to remove user <strong>{resolveUserDisplayName(user)}</strong> from group <strong>{groupId}</strong>?</span>}
                             onConfirm={() => {
                                 auth.removeUserFromGroup(user.id, groupId)
                                     .catch(error => alert(error))
@@ -101,7 +101,8 @@ const GroupMemberList = ({ groupId, after, onPaginate }) => {
                     filterPlaceholder={'Find User...'}
                     modalTitle={'Add to Group'}
                     addText={'Add to Group'}
-                    searchFn={prefix => searchUsers(prefix, 5).then(res => res)}
+                    resolveEntityFN={resolveUserDisplayName}
+                    searchFn={prefix => searchUsers(prefix, 5, resolveUserDisplayName).then(res => res)}
                     onHide={() => setShowAddModal(false)}
                     onAttach={(selected) => {
                         Promise.all(selected.map(user => auth.addUserToGroup(user.id, groupId)))
diff --git a/webui/src/pages/auth/users/index.jsx b/webui/src/pages/auth/users/index.jsx
index da45a7218dd..969f58064b5 100644
--- a/webui/src/pages/auth/users/index.jsx
+++ b/webui/src/pages/auth/users/index.jsx
@@ -24,7 +24,7 @@ import {
 } from "../../../lib/components/controls";
 import validator from "validator/es";
 import { disallowPercentSign, INVALID_USER_NAME_ERROR_MESSAGE } from "../validation";
-import { resolveDisplayName } from "../../../lib/utils";
+import { resolveUserDisplayName } from "../../../lib/utils";
 
 const USER_NOT_FOUND = "unknown";
 export const GetUserEmailByIdContext = createContext();
@@ -119,7 +119,7 @@ const UsersContainer = ({nextPage, refresh, setRefresh, error, loading, userList
                         onRemove={() => setSelected(selected.filter(u => u !== user))}
                     />,
                     <Link href={{pathname: '/auth/users/:userId', params: {userId: user.id}}}>
-                        { resolveDisplayName(user) }
+                        { resolveUserDisplayName(user) }
                     </Link>,
                     <FormattedDate dateValue={user.creation_date}/>
                 ]}/>
diff --git a/webui/src/pages/auth/users/user/groups.jsx b/webui/src/pages/auth/users/user/groups.jsx
index 7e2fa6fc94a..ccf9b0dfac4 100644
--- a/webui/src/pages/auth/users/user/groups.jsx
+++ b/webui/src/pages/auth/users/user/groups.jsx
@@ -21,6 +21,12 @@ import { ConfirmationButton } from "../../../../lib/components/modals";
 import { useRouter } from "../../../../lib/hooks/router";
 import { Link } from "../../../../lib/components/nav";
 
+const resolveGroupDisplayName = (group) => {
+    if(!group) return "";
+    if (group?.name?.length) return group.name;
+    return group.id;
+}
+
 const UserGroupsList = ({ userId, after, onPaginate }) => {
   const [refresh, setRefresh] = useState(false);
   const [showAddModal, setShowAddModal] = useState(false);
@@ -97,6 +103,7 @@ const UserGroupsList = ({ userId, after, onPaginate }) => {
             searchFn={(prefix) =>
               auth.listGroups(prefix, "", 5).then((res) => res.results)
             }
+            resolveEntityFN={resolveGroupDisplayName}
             onHide={() => setShowAddModal(false)}
             onAttach={(selected) => {
               Promise.all(
@@ -112,7 +119,8 @@ const UserGroupsList = ({ userId, after, onPaginate }) => {
                 .finally(() => {
                   setShowAddModal(false);
                 });
-            }}
+            }
+          }
           />
         )}
       </>