diff --git a/src/clients/ClientsSection.tsx b/src/clients/ClientsSection.tsx
index 0fb53bab9f..3bd4b5dd6e 100644
--- a/src/clients/ClientsSection.tsx
+++ b/src/clients/ClientsSection.tsx
@@ -24,7 +24,8 @@ import {
 import { ViewHeader } from "../components/view-header/ViewHeader";
 import { useAdminClient } from "../context/auth/AdminClient";
 import { useRealm } from "../context/realm-context/RealmContext";
-import { addTrailingSlash, emptyFormatter, exportClient } from "../util";
+import { emptyFormatter, exportClient } from "../util";
+import { convertClientToUrl } from "../utils/client-url";
 import { InitialAccessTokenList } from "./initial-access/InitialAccessTokenList";
 import { toAddClient } from "./routes/AddClient";
 import { toClient } from "./routes/Client";
@@ -103,40 +104,6 @@ export default function ClientsSection() {
     </TableText>
   );
 
-  const ClientHomePage = (client: ClientRepresentation) => {
-    const rootUrl = client.rootUrl;
-    const baseUrl = client.baseUrl;
-
-    // absolute base url configured, use base url is
-    if (baseUrl?.startsWith("http")) {
-      return baseUrl;
-    }
-
-    if (rootUrl === "${authBaseUrl}" && baseUrl) {
-      // eslint-disable-next-line prettier/prettier
-      return rootUrl.replace("${authBaseUrl}", addTrailingSlash(adminClient.baseUrl)) + baseUrl.substring(1);
-    }
-
-    if (rootUrl === "${authAdminUrl}" && baseUrl) {
-      // eslint-disable-next-line prettier/prettier
-      return rootUrl.replace("${authAdminUrl}", addTrailingSlash(adminClient.baseUrl)) + baseUrl.substring(1);
-    }
-
-    if (!rootUrl) {
-      return baseUrl;
-    }
-
-    if (rootUrl.startsWith("http")) {
-      let targetUrl = rootUrl;
-      if (baseUrl) {
-        targetUrl = addTrailingSlash(targetUrl) + baseUrl.substring(1);
-      }
-      return targetUrl;
-    }
-
-    return baseUrl;
-  };
-
   const ToolbarItems = () => {
     if (!isManager) return <span />;
 
@@ -249,7 +216,8 @@ export default function ClientsSection() {
                   name: "baseUrl",
                   displayKey: "clients:homeURL",
                   cellFormatters: [formattedLinkTableCell(), emptyFormatter()],
-                  cellRenderer: ClientHomePage,
+                  cellRenderer: (c) =>
+                    convertClientToUrl(c, adminClient.baseUrl),
                 },
               ]}
             />
diff --git a/src/utils/client-url.test.ts b/src/utils/client-url.test.ts
new file mode 100644
index 0000000000..3ebad7aa50
--- /dev/null
+++ b/src/utils/client-url.test.ts
@@ -0,0 +1,84 @@
+import { describe, expect, it } from "vitest";
+import { convertClientToUrl } from "./client-url";
+
+describe("convertClientToUrl", () => {
+  it("returns base url when base url starts with http", () => {
+    //given
+    const baseUrl = "http://something";
+
+    //when
+    const result = convertClientToUrl({ baseUrl }, "");
+
+    //then
+    expect(result).toBe(baseUrl);
+  });
+
+  it("when root url constrains ${authAdminUrl}", () => {
+    //given
+    const rootUrl = "${authAdminUrl}";
+    const baseUrl = "/else";
+
+    //when
+    const result = convertClientToUrl({ rootUrl, baseUrl }, "/admin");
+
+    //then
+    expect(result).toBe("/admin/else");
+  });
+
+  it("when root url constrains ${authBaseUrl}", () => {
+    //given
+    const rootUrl = "${authBaseUrl}";
+    const baseUrl = "/something";
+
+    //when
+    const result = convertClientToUrl({ rootUrl, baseUrl }, "/admin");
+
+    //then
+    expect(result).toBe("/admin/something");
+  });
+
+  it("when baseUrl when rootUrl is not set", () => {
+    //given
+    const baseUrl = "/another";
+
+    //when
+    const result = convertClientToUrl({ rootUrl: undefined, baseUrl }, "");
+
+    //then
+    expect(result).toBe("/another");
+  });
+
+  it("when rootUrl starts with http and baseUrl is set", () => {
+    //given
+    const baseUrl = "/another";
+    const rootUrl = "http://test.nl";
+
+    //when
+    const result = convertClientToUrl({ rootUrl, baseUrl }, "");
+
+    //then
+    expect(result).toBe("http://test.nl/another");
+  });
+
+  it("when rootUrl starts with http and baseUrl not set return it", () => {
+    //given
+    const rootUrl = "http://test.nl";
+
+    //when
+    const result = convertClientToUrl({ rootUrl, baseUrl: undefined }, "");
+
+    //then
+    expect(result).toBe("http://test.nl");
+  });
+
+  it("should it return ${authBaseUrl} when baseUrl is not set?", () => {
+    //given
+    const rootUrl = "${authBaseUrl}";
+
+    //when
+    const result = convertClientToUrl({ rootUrl, baseUrl: undefined }, "");
+
+    //then
+    expect(result).toBeUndefined();
+  });
+});
diff --git a/src/utils/client-url.ts b/src/utils/client-url.ts
new file mode 100644
index 0000000000..1c72337729
--- /dev/null
+++ b/src/utils/client-url.ts
@@ -0,0 +1,31 @@
+import ClientRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientRepresentation";
+import { joinPath } from "./joinPath";
+
+export const convertClientToUrl = (
+  { rootUrl, baseUrl }: ClientRepresentation,
+  adminClientBaseUrl: string
+) => {
+  // absolute base url configured, use base url is
+  if (baseUrl?.startsWith("http")) {
+    return baseUrl;
+  }
+
+  if (
+    (rootUrl === "${authBaseUrl}" || rootUrl === "${authAdminUrl}") &&
+    baseUrl
+  ) {
+    return rootUrl.replace(
+      /\$\{(authAdminUrl|authBaseUrl)\}/,
+      joinPath(adminClientBaseUrl, baseUrl)
+    );
+  }
+
+  if (rootUrl?.startsWith("http")) {
+    if (baseUrl) {
+      return joinPath(rootUrl, baseUrl);
+    }
+    return rootUrl;
+  }
+
+  return baseUrl;
+};