diff --git a/js/apps/admin-ui/src/clients/ClientsSection.tsx b/js/apps/admin-ui/src/clients/ClientsSection.tsx
index 13d069bad7..e455cbda5e 100644
--- a/js/apps/admin-ui/src/clients/ClientsSection.tsx
+++ b/js/apps/admin-ui/src/clients/ClientsSection.tsx
@@ -81,6 +81,39 @@ const ClientHomeLink = (client: ClientRepresentation) => {
   return <FormattedLink href={href} />;
 };
 
+const ToolbarItems = () => {
+  const { t } = useTranslation("clients");
+  const { realm } = useRealm();
+
+  const { hasAccess } = useAccess();
+  const isManager = hasAccess("manage-clients");
+
+  if (!isManager) return <span />;
+
+  return (
+    <>
+      <ToolbarItem>
+        <Button
+          component={(props) => <Link {...props} to={toAddClient({ realm })} />}
+        >
+          {t("createClient")}
+        </Button>
+      </ToolbarItem>
+      <ToolbarItem>
+        <Button
+          component={(props) => (
+            <Link {...props} to={toImportClient({ realm })} />
+          )}
+          variant="link"
+          data-testid="importClient"
+        >
+          {t("importClient")}
+        </Button>
+      </ToolbarItem>
+    </>
+  );
+};
+
 export default function ClientsSection() {
   const { t } = useTranslation("clients");
   const { addAlert, addError } = useAlerts();
@@ -131,35 +164,6 @@ export default function ClientsSection() {
     },
   });
 
-  const ToolbarItems = () => {
-    if (!isManager) return <span />;
-
-    return (
-      <>
-        <ToolbarItem>
-          <Button
-            component={(props) => (
-              <Link {...props} to={toAddClient({ realm })} />
-            )}
-          >
-            {t("createClient")}
-          </Button>
-        </ToolbarItem>
-        <ToolbarItem>
-          <Button
-            component={(props) => (
-              <Link {...props} to={toImportClient({ realm })} />
-            )}
-            variant="link"
-            data-testid="importClient"
-          >
-            {t("importClient")}
-          </Button>
-        </ToolbarItem>
-      </>
-    );
-  };
-
   return (
     <>
       <ViewHeader
diff --git a/js/apps/admin-ui/src/clients/authorization/Permissions.tsx b/js/apps/admin-ui/src/clients/authorization/Permissions.tsx
index 8ff16b8433..fe2435fe67 100644
--- a/js/apps/admin-ui/src/clients/authorization/Permissions.tsx
+++ b/js/apps/admin-ui/src/clients/authorization/Permissions.tsx
@@ -52,6 +52,19 @@ type ExpandablePolicyRepresentation = PolicyRepresentation & {
   isExpanded: boolean;
 };
 
+const AssociatedPoliciesRenderer = ({
+  row,
+}: {
+  row: ExpandablePolicyRepresentation;
+}) => {
+  return (
+    <>
+      {row.associatedPolicies?.[0]?.name}{" "}
+      <MoreLabel array={row.associatedPolicies} />
+    </>
+  );
+};
+
 export const AuthorizationPermissions = ({ clientId }: PermissionsProps) => {
   const { t } = useTranslation("clients");
   const navigate = useNavigate();
@@ -78,19 +91,6 @@ export const AuthorizationPermissions = ({ clientId }: PermissionsProps) => {
   const [max, setMax] = useState(10);
   const [first, setFirst] = useState(0);
 
-  const AssociatedPoliciesRenderer = ({
-    row,
-  }: {
-    row: ExpandablePolicyRepresentation;
-  }) => {
-    return (
-      <>
-        {row.associatedPolicies?.[0]?.name}{" "}
-        <MoreLabel array={row.associatedPolicies} />
-      </>
-    );
-  };
-
   useFetch(
     async () => {
       const permissions = await adminClient.clients.findPermissions({
diff --git a/js/apps/admin-ui/src/clients/registration/ClientRegistrationList.tsx b/js/apps/admin-ui/src/clients/registration/ClientRegistrationList.tsx
index d214d85212..2c1e9caad7 100644
--- a/js/apps/admin-ui/src/clients/registration/ClientRegistrationList.tsx
+++ b/js/apps/admin-ui/src/clients/registration/ClientRegistrationList.tsx
@@ -19,6 +19,25 @@ type ClientRegistrationListProps = {
   subType: "anonymous" | "authenticated";
 };
 
+const DetailLink = (comp: ComponentRepresentation) => {
+  const { realm } = useRealm();
+  const { subTab } = useParams<ClientRegistrationParams>();
+
+  return (
+    <Link
+      key={comp.id}
+      to={toRegistrationProvider({
+        realm,
+        subTab: subTab || "anonymous",
+        providerId: comp.providerId!,
+        id: comp.id,
+      })}
+    >
+      {comp.name}
+    </Link>
+  );
+};
+
 export const ClientRegistrationList = ({
   subType,
 }: ClientRegistrationListProps) => {
@@ -43,20 +62,6 @@ export const ClientRegistrationList = ({
     [selectedPolicy]
   );
 
-  const DetailLink = (comp: ComponentRepresentation) => (
-    <Link
-      key={comp.id}
-      to={toRegistrationProvider({
-        realm,
-        subTab: subTab || "anonymous",
-        providerId: comp.providerId!,
-        id: comp.id,
-      })}
-    >
-      {comp.name}
-    </Link>
-  );
-
   const [toggleDeleteDialog, DeleteConfirm] = useConfirmDialog({
     titleKey: "clients:clientRegisterPolicyDeleteConfirmTitle",
     messageKey: t("clientRegisterPolicyDeleteConfirm", {
diff --git a/js/apps/admin-ui/src/components/role-mapping/RoleMapping.tsx b/js/apps/admin-ui/src/components/role-mapping/RoleMapping.tsx
index cc9e328243..29233b0018 100644
--- a/js/apps/admin-ui/src/components/role-mapping/RoleMapping.tsx
+++ b/js/apps/admin-ui/src/components/role-mapping/RoleMapping.tsx
@@ -158,30 +158,6 @@ export const RoleMapping = ({
     },
   });
 
-  const ManagerToolbarItems = () => {
-    if (!isManager) return <span />;
-
-    return (
-      <>
-        <ToolbarItem>
-          <Button data-testid="assignRole" onClick={() => setShowAssign(true)}>
-            {t("common:assignRole")}
-          </Button>
-        </ToolbarItem>
-        <ToolbarItem>
-          <Button
-            variant="link"
-            data-testid="unAssignRole"
-            onClick={toggleDeleteDialog}
-            isDisabled={selected.length === 0}
-          >
-            {t("common:unAssignRole")}
-          </Button>
-        </ToolbarItem>
-      </>
-    );
-  };
-
   return (
     <>
       {showAssign && (
@@ -219,7 +195,28 @@ export const RoleMapping = ({
                 }}
               />
             </ToolbarItem>
-            <ManagerToolbarItems />
+            {isManager && (
+              <>
+                <ToolbarItem>
+                  <Button
+                    data-testid="assignRole"
+                    onClick={() => setShowAssign(true)}
+                  >
+                    {t("common:assignRole")}
+                  </Button>
+                </ToolbarItem>
+                <ToolbarItem>
+                  <Button
+                    variant="link"
+                    data-testid="unAssignRole"
+                    onClick={toggleDeleteDialog}
+                    isDisabled={selected.length === 0}
+                  >
+                    {t("common:unAssignRole")}
+                  </Button>
+                </ToolbarItem>
+              </>
+            )}
           </>
         }
         actions={
diff --git a/js/apps/admin-ui/src/components/roles-list/RolesList.tsx b/js/apps/admin-ui/src/components/roles-list/RolesList.tsx
index 8992b092b9..ae2e3c3754 100644
--- a/js/apps/admin-ui/src/components/roles-list/RolesList.tsx
+++ b/js/apps/admin-ui/src/components/roles-list/RolesList.tsx
@@ -18,6 +18,36 @@ import { KeycloakDataTable } from "../table-toolbar/KeycloakDataTable";
 
 import "./RolesList.css";
 
+type RoleDetailLinkProps = RoleRepresentation & {
+  defaultRoleName?: string;
+  toDetail: (roleId: string) => To;
+  messageBundle?: string;
+};
+
+const RoleDetailLink = ({
+  defaultRoleName,
+  toDetail,
+  messageBundle,
+  ...role
+}: RoleDetailLinkProps) => {
+  const { t } = useTranslation(messageBundle);
+  const { realm } = useRealm();
+
+  return role.name !== defaultRoleName ? (
+    <Link to={toDetail(role.id!)}>{role.name}</Link>
+  ) : (
+    <>
+      <Link to={toRealmSettings({ realm, tab: "user-registration" })}>
+        {role.name}{" "}
+      </Link>
+      <HelpItem
+        helpText={t(`${messageBundle}:defaultRole`)}
+        fieldLabelId="defaultRole"
+      />
+    </>
+  );
+};
+
 type RolesListProps = {
   paginated?: boolean;
   parentRoleId?: string;
@@ -58,23 +88,6 @@ export const RolesList = ({
     []
   );
 
-  const RoleDetailLink = (role: RoleRepresentation) =>
-    role.name !== realm?.defaultRole?.name ? (
-      <Link to={toDetail(role.id!)}>{role.name}</Link>
-    ) : (
-      <>
-        <Link
-          to={toRealmSettings({ realm: realmName, tab: "user-registration" })}
-        >
-          {role.name}{" "}
-        </Link>
-        <HelpItem
-          helpText={t(`${messageBundle}:defaultRole`)}
-          fieldLabelId="defaultRole"
-        />
-      </>
-    );
-
   const [toggleDeleteDialog, DeleteConfirm] = useConfirmDialog({
     titleKey: "roles:roleDeleteConfirm",
     messageKey: t("roles:roleDeleteConfirmDialog", {
@@ -146,7 +159,14 @@ export const RolesList = ({
           {
             name: "name",
             displayKey: "roles:roleName",
-            cellRenderer: RoleDetailLink,
+            cellRenderer: (row) => (
+              <RoleDetailLink
+                {...row}
+                defaultRoleName={realm.defaultRole?.name}
+                toDetail={toDetail}
+                messageBundle={messageBundle}
+              />
+            ),
           },
           {
             name: "composite",
diff --git a/js/apps/admin-ui/src/events/EventsSection.tsx b/js/apps/admin-ui/src/events/EventsSection.tsx
index 2a7852c902..bc05bb29c3 100644
--- a/js/apps/admin-ui/src/events/EventsSection.tsx
+++ b/js/apps/admin-ui/src/events/EventsSection.tsx
@@ -93,6 +93,29 @@ const DetailCell = (event: EventRepresentation) => (
   </DescriptionList>
 );
 
+const UserDetailLink = (event: EventRepresentation) => {
+  const { t } = useTranslation("events");
+  const { realm } = useRealm();
+
+  return (
+    <>
+      {event.userId && (
+        <Link
+          key={`link-${event.time}-${event.type}`}
+          to={toUser({
+            realm,
+            id: event.userId,
+            tab: "settings",
+          })}
+        >
+          {event.userId}
+        </Link>
+      )}
+      {!event.userId && t("noUserDetails")}
+    </>
+  );
+};
+
 export default function EventsSection() {
   const { t } = useTranslation("events");
   const { adminClient } = useAdminClient();
@@ -193,24 +216,6 @@ export default function EventsSection() {
     commitFilters();
   }
 
-  const UserDetailLink = (event: EventRepresentation) => (
-    <>
-      {event.userId && (
-        <Link
-          key={`link-${event.time}-${event.type}`}
-          to={toUser({
-            realm,
-            id: event.userId,
-            tab: "settings",
-          })}
-        >
-          {event.userId}
-        </Link>
-      )}
-      {!event.userId && t("noUserDetails")}
-    </>
-  );
-
   const userEventSearchFormDisplay = () => {
     return (
       <Flex
diff --git a/js/apps/admin-ui/src/groups/GroupTable.tsx b/js/apps/admin-ui/src/groups/GroupTable.tsx
index 75020a3583..d3c6ddafb2 100644
--- a/js/apps/admin-ui/src/groups/GroupTable.tsx
+++ b/js/apps/admin-ui/src/groups/GroupTable.tsx
@@ -87,20 +87,6 @@ export const GroupTable = ({
     return groupsData || [];
   };
 
-  const GroupNameCell = (group: GroupRepresentation) => {
-    if (!canViewDetails) return <span>{group.name}</span>;
-
-    return (
-      <Link
-        key={group.id}
-        to={`${location.pathname}/${group.id}`}
-        onClick={() => setSubGroups([...subGroups, group])}
-      >
-        {group.name}
-      </Link>
-    );
-  };
-
   return (
     <>
       <DeleteGroup
@@ -221,7 +207,18 @@ export const GroupTable = ({
           {
             name: "name",
             displayKey: "groups:groupName",
-            cellRenderer: GroupNameCell,
+            cellRenderer: (group) =>
+              canViewDetails ? (
+                <Link
+                  key={group.id}
+                  to={`${location.pathname}/${group.id}`}
+                  onClick={() => setSubGroups([...subGroups, group])}
+                >
+                  {group.name}
+                </Link>
+              ) : (
+                <span>{group.name}</span>
+              ),
           },
         ]}
         emptyState={
diff --git a/js/apps/admin-ui/src/groups/Members.tsx b/js/apps/admin-ui/src/groups/Members.tsx
index 63170c97ff..ce056d029f 100644
--- a/js/apps/admin-ui/src/groups/Members.tsx
+++ b/js/apps/admin-ui/src/groups/Members.tsx
@@ -32,10 +32,32 @@ type MembersOf = UserRepresentation & {
   membership: GroupRepresentation[];
 };
 
+const MemberOfRenderer = (member: MembersOf) => {
+  return (
+    <>
+      {member.membership.map((group, index) => (
+        <>
+          <GroupPath key={group.id} group={group} />
+          {member.membership[index + 1] ? ", " : ""}
+        </>
+      ))}
+    </>
+  );
+};
+
+const UserDetailLink = (user: MembersOf) => {
+  const { realm } = useRealm();
+  return (
+    <Link key={user.id} to={toUser({ realm, id: user.id!, tab: "settings" })}>
+      {user.username}
+    </Link>
+  );
+};
+
 export const Members = () => {
   const { t } = useTranslation("groups");
   const { adminClient } = useAdminClient();
-  const { realm } = useRealm();
+
   const { addAlert, addError } = useAlerts();
   const location = useLocation();
   const id = getLastId(location.pathname);
@@ -90,24 +112,6 @@ export const Members = () => {
     });
   };
 
-  const MemberOfRenderer = (member: MembersOf) => {
-    return (
-      <>
-        {member.membership.map((group, index) => (
-          <>
-            <GroupPath key={group.id} group={group} />
-            {member.membership[index + 1] ? ", " : ""}
-          </>
-        ))}
-      </>
-    );
-  };
-
-  const UserDetailLink = (user: MembersOf) => (
-    <Link key={user.id} to={toUser({ realm, id: user.id!, tab: "settings" })}>
-      {user.username}
-    </Link>
-  );
   return (
     <>
       {addMembers && (
diff --git a/js/apps/admin-ui/src/identity-providers/add/DetailSettings.tsx b/js/apps/admin-ui/src/identity-providers/add/DetailSettings.tsx
index e93c654a99..2a41d2aa4d 100644
--- a/js/apps/admin-ui/src/identity-providers/add/DetailSettings.tsx
+++ b/js/apps/admin-ui/src/identity-providers/add/DetailSettings.tsx
@@ -128,6 +128,28 @@ const Header = ({ onChange, value, save, toggleDeleteDialog }: HeaderProps) => {
   );
 };
 
+type MapperLinkProps = IdPWithMapperAttributes & {
+  provider?: IdentityProviderRepresentation;
+};
+
+const MapperLink = ({ name, mapperId, provider }: MapperLinkProps) => {
+  const { realm } = useRealm();
+  const { alias } = useParams<IdentityProviderParams>();
+
+  return (
+    <Link
+      to={toIdentityProviderEditMapper({
+        realm,
+        alias,
+        providerId: provider?.providerId!,
+        id: mapperId,
+      })}
+    >
+      {name}
+    </Link>
+  );
+};
+
 export default function DetailSettings() {
   const { t } = useTranslation("identity-providers");
   const { alias, providerId } = useParams<IdentityProviderParams>();
@@ -146,19 +168,6 @@ export default function DetailSettings() {
   const { profileInfo } = useServerInfo();
   const refresh = () => setKey(key + 1);
 
-  const MapperLink = ({ name, mapperId }: IdPWithMapperAttributes) => (
-    <Link
-      to={toIdentityProviderEditMapper({
-        realm,
-        alias,
-        providerId: provider?.providerId!,
-        id: mapperId,
-      })}
-    >
-      {name}
-    </Link>
-  );
-
   useFetch(
     () => adminClient.identityProviders.findOne({ alias }),
     (fetchedProvider) => {
@@ -460,7 +469,9 @@ export default function DetailSettings() {
                 {
                   name: "name",
                   displayKey: "common:name",
-                  cellRenderer: MapperLink,
+                  cellRenderer: (row) => (
+                    <MapperLink {...row} provider={provider} />
+                  ),
                 },
                 {
                   name: "category",
diff --git a/js/apps/admin-ui/src/realm-settings/AddClientProfileModal.tsx b/js/apps/admin-ui/src/realm-settings/AddClientProfileModal.tsx
index 95c607dad7..f54d865dfd 100644
--- a/js/apps/admin-ui/src/realm-settings/AddClientProfileModal.tsx
+++ b/js/apps/admin-ui/src/realm-settings/AddClientProfileModal.tsx
@@ -12,6 +12,17 @@ type ClientProfile = ClientProfileRepresentation & {
   global: boolean;
 };
 
+const AliasRenderer = ({ name, global }: ClientProfile) => {
+  const { t } = useTranslation("roles");
+
+  return (
+    <>
+      {name}{" "}
+      {global && <Label color="blue">{t("realm-settings:global")}</Label>}
+    </>
+  );
+};
+
 export type AddClientProfileModalProps = {
   open: boolean;
   toggleDialog: () => void;
@@ -57,13 +68,6 @@ export const AddClientProfileModal = (props: AddClientProfileModalProps) => {
     return <KeycloakSpinner />;
   }
 
-  const AliasRenderer = ({ name, global }: ClientProfile) => (
-    <>
-      {name}{" "}
-      {global && <Label color="blue">{t("realm-settings:global")}</Label>}
-    </>
-  );
-
   return (
     <Modal
       data-testid="addClientProfile"
diff --git a/js/apps/admin-ui/src/user-federation/ldap/mappers/LdapMapperList.tsx b/js/apps/admin-ui/src/user-federation/ldap/mappers/LdapMapperList.tsx
index 77bb87c2a1..7b5bc7d0ab 100644
--- a/js/apps/admin-ui/src/user-federation/ldap/mappers/LdapMapperList.tsx
+++ b/js/apps/admin-ui/src/user-federation/ldap/mappers/LdapMapperList.tsx
@@ -21,6 +21,14 @@ export type LdapMapperListProps = {
   toDetail: (mapperId: string) => To;
 };
 
+type MapperLinkProps = ComponentRepresentation & {
+  toDetail: (mapperId: string) => To;
+};
+
+const MapperLink = ({ toDetail, ...mapper }: MapperLinkProps) => (
+  <Link to={toDetail(mapper.id!)}>{mapper.name}</Link>
+);
+
 export const LdapMapperList = ({ toCreate, toDetail }: LdapMapperListProps) => {
   const navigate = useNavigate();
   const { t } = useTranslation("user-federation");
@@ -77,10 +85,6 @@ export const LdapMapperList = ({ toCreate, toDetail }: LdapMapperListProps) => {
     },
   });
 
-  const MapperLink = (mapper: ComponentRepresentation) => (
-    <Link to={toDetail(mapper.id!)}>{mapper.name}</Link>
-  );
-
   return (
     <>
       <DeleteConfirm />
@@ -112,7 +116,7 @@ export const LdapMapperList = ({ toCreate, toDetail }: LdapMapperListProps) => {
         columns={[
           {
             name: "name",
-            cellRenderer: MapperLink,
+            cellRenderer: (row) => <MapperLink {...row} toDetail={toDetail} />,
           },
           {
             name: "type",