From b36c9a4784c88537214cba4fd6d36a27f4bcf4ea Mon Sep 17 00:00:00 2001
From: FalkWolsky <fw@falkwolsky.com>
Date: Tue, 13 Oct 2026 16:28:11 +0200
Subject: [PATCH 1/4] Remove unnecessary Request for License Check

---
 .../lowcoder/src/api/licenseRequestApi.ts     |  41 +++-
 .../pages/setting/enterpriseHosting.test.tsx  |  16 +-
 .../subscriptions/EnterpriseLicenses.tsx      |   4 +-
 .../src/util/enterpriseLicenseSync.test.tsx   | 189 ++++++++++++++++++
 .../src/util/enterpriseLicenseSync.ts         |  92 +++++++--
 deploy/n8n/enterprise-licenses/README.md      |   8 +-
 .../EnterpriseLicenseCapability.java          |   6 +
 .../EnterpriseLicenseCapabilityService.java   |  28 ++-
 ...nterpriseLicenseCapabilityServiceTest.java |  76 +++++++
 .../EnterpriseLicenseController.java          |  90 ++++++++-
 .../EnterpriseLicenseControllerTest.java      | 137 ++++++++++++-
 11 files changed, 642 insertions(+), 45 deletions(-)
 create mode 100644 client/packages/lowcoder/src/util/enterpriseLicenseSync.test.tsx
 create mode 100644 server/api-service/lowcoder-domain/src/test/java/org/lowcoder/domain/enterprise/EnterpriseLicenseCapabilityServiceTest.java

diff --git a/client/packages/lowcoder/src/api/licenseRequestApi.ts b/client/packages/lowcoder/src/api/licenseRequestApi.ts
index a4a922b5b..ed38b49fb 100644
--- a/client/packages/lowcoder/src/api/licenseRequestApi.ts
+++ b/client/packages/lowcoder/src/api/licenseRequestApi.ts
@@ -1,5 +1,6 @@
 import Api from "api/api";
 import { isPublicLowcoderCloud } from "util/enterpriseHosting";
+import { ERROR_CODES } from "constants/apiConstants";
 
 export interface LicenseContactData {
   companyName: string;
@@ -38,19 +39,49 @@ export interface EnterpriseLicenseStatus {
   licenses: EnterpriseLicenseFile[];
 }
 
+export class EnterpriseLicenseRequestError extends Error {
+  constructor(message: string, readonly retryable = true, readonly retryAfterMs = 0) {
+    super(message);
+    this.name = "EnterpriseLicenseRequestError";
+  }
+}
+
+function requestError(response?: { status?: number; headers?: Record<string, any> }) {
+  const status = response?.status;
+  const retryable = !status || status === 408 || status === 429 || status >= 500;
+  const retryAfter = response?.headers?.["retry-after"];
+  const retryAfterMs = retryAfter ? Math.max(0, Number.isFinite(Number(retryAfter))
+    ? Number(retryAfter) * 1000 : Date.parse(retryAfter) - Date.now()) : 0;
+  return new EnterpriseLicenseRequestError(status === 401 || status === 403
+    ? "Your session no longer has permission to manage these licenses. Sign in as the purchasing workspace admin."
+    : retryable ? "The license service is temporarily unavailable. We will retry automatically; you can also refresh manually."
+    : "Licenses could not be refreshed. Check your installation's licensing configuration and try again.",
+    retryable, Number.isFinite(retryAfterMs) ? retryAfterMs : 0);
+}
+
 async function request<T>(action: string, body: object): Promise<T> {
   if (isPublicLowcoderCloud()) {
     throw new Error("Enterprise licenses are available from your self-hosted Lowcoder installation.");
   }
-  const response = await Api.post(`/enterprise-licenses/${action}`, { ...body, returnOrigin: window.location.origin }, undefined, { timeout: 120000 });
-  const result = response.data?.data;
-  if (!result || result.success !== true) throw new Error("Enterprise licensing request was not confirmed");
-  return result as T;
+  try {
+    const response = await Api.post(`/enterprise-licenses/${action}`, { ...body, returnOrigin: window.location.origin }, undefined, { timeout: 120000 });
+    // The shared interceptor resolves some HTTP failures instead of rejecting them.
+    if (response?.status >= 400) throw requestError(response);
+    const result = response?.data?.data;
+    if (!result || result.success !== true || ((action === "status" || action === "sync") &&
+      (!Array.isArray(result.orders) || !Array.isArray(result.licenses)))) throw requestError();
+    return result as T;
+  } catch (error) {
+    if (error instanceof EnterpriseLicenseRequestError) throw error;
+    const failure = error as { response?: { status?: number; headers?: Record<string, any> }; code?: string };
+    throw requestError(failure?.code === ERROR_CODES.REQUEST_NOT_AUTHORISED ? { status: 401 } : failure?.response);
+  }
 }
 
 export const submitLicenseRequest = (data: LicenseRequestData) =>
   request<{ success: true; requestId: string; checkoutUrl: string }>("checkout", data);
-export const getLicenseRequestStatus = (orgId: string) => request<EnterpriseLicenseStatus>("status", { orgId });
+export const getLicenseRequestStatus = (orgId: string, refresh = false) =>
+  request<EnterpriseLicenseStatus>("status", { orgId, ...(refresh ? { refresh: true } : {}) });
 export const synchronizeEnterpriseLicenses = (orgId: string) => request<EnterpriseLicenseStatus>("sync", { orgId });
 export const getEnterpriseLicenseFile = (orgId: string, licenseId: string) =>
   request<{ filename: string; license: string }>("download", { orgId, licenseId });
diff --git a/client/packages/lowcoder/src/pages/setting/enterpriseHosting.test.tsx b/client/packages/lowcoder/src/pages/setting/enterpriseHosting.test.tsx
index c2a5b90b1..c0f42566c 100644
--- a/client/packages/lowcoder/src/pages/setting/enterpriseHosting.test.tsx
+++ b/client/packages/lowcoder/src/pages/setting/enterpriseHosting.test.tsx
@@ -18,12 +18,15 @@ jest.mock("util/permissionUtils", () => ({ currentOrgAdmin: () => true }));
 
 const post = Api.post as jest.Mock;
 const location = window.location;
-const setHost = (hostname: string) => Object.defineProperty(window, "location", {
-  configurable: true, value: { hostname, origin: `https://${hostname}` },
-});
+const testLocation = { hostname: "", origin: "" };
+const setHost = (hostname: string) => {
+  Object.assign(testLocation, { hostname, origin: `https://${hostname}` });
+  Object.defineProperty(window, "location", { configurable: true, value: testLocation });
+};
 
 beforeEach(() => {
   setHost("app.lowcoder.cloud");
+  Object.defineProperty(navigator, "onLine", { configurable: true, value: true });
   (useSelector as jest.Mock).mockImplementation(selector => selector === getDeploymentId ? "deployment-1" :
     { currentOrgId: "org", id: "admin", name: "Admin" });
   window.matchMedia = jest.fn().mockImplementation(() => ({
@@ -75,6 +78,7 @@ test.each(["en", "de", "es", "it", "pt", "ru", "zh"])("self-hosting guidance is
 
 test("self-hosted administrators can still open the purchase form", () => {
   setHost("private.lowcoder.cloud");
+  expect(isPublicLowcoderCloud()).toBe(false);
   render(<EnterpriseLicenses />);
   fireEvent.click(screen.getByRole("button", { name: "Request Enterprise licenses" }));
   expect(screen.getByRole("dialog")).toHaveTextContent("Enterprise License Request");
@@ -87,7 +91,7 @@ test("cloud API calls cannot create checkout even if the form is bypassed", asyn
   expect(post).not.toHaveBeenCalled();
 });
 
-test("license polling is skipped on cloud but still runs on a self-hosted installation", async () => {
+test("cloud skips licensing and an empty self-hosted account stops after status", async () => {
   jest.useFakeTimers();
   post.mockResolvedValue({ data: { data: { success: true, orders: [], licenses: [] } } });
   const cloud = renderHook(() => useEnterpriseLicenseSync("org", "admin", true));
@@ -100,6 +104,8 @@ test("license polling is skipped on cloud but still runs on a self-hosted instal
   setHost("lowcoder.example");
   const selfHosted = renderHook(() => useEnterpriseLicenseSync("org", "admin", true));
   await act(async () => {});
-  expect(post).toHaveBeenCalledWith("/enterprise-licenses/sync", { orgId: "org", returnOrigin: "https://lowcoder.example" }, undefined, { timeout: 120000 });
+  expect(post).toHaveBeenCalledWith("/enterprise-licenses/status", { orgId: "org", returnOrigin: "https://lowcoder.example" }, undefined, { timeout: 120000 });
+  await act(async () => { jest.advanceTimersByTime(3600000); });
+  expect(post).toHaveBeenCalledTimes(1);
   selfHosted.unmount();
 });
diff --git a/client/packages/lowcoder/src/pages/setting/subscriptions/EnterpriseLicenses.tsx b/client/packages/lowcoder/src/pages/setting/subscriptions/EnterpriseLicenses.tsx
index 905a6a6f3..ccc9ce383 100644
--- a/client/packages/lowcoder/src/pages/setting/subscriptions/EnterpriseLicenses.tsx
+++ b/client/packages/lowcoder/src/pages/setting/subscriptions/EnterpriseLicenses.tsx
@@ -50,8 +50,8 @@ function SelfHostedEnterpriseLicenses() {
       <Button type="primary" onClick={() => setOpen(true)}>Request Enterprise licenses</Button>
       <Button onClick={refreshEnterpriseLicenses} loading={state.loading}>Refresh licenses</Button>
     </Space>
-    {state.error && <Alert type="warning" showIcon style={{ marginBottom: 16 }} message="License service unavailable"
-      description="Licenses could not be refreshed. Try again shortly, or ask your installation administrator to check its licensing connection." />}
+    {state.error && <Alert type="warning" showIcon style={{ marginBottom: 16 }} message="License refresh failed"
+      description={state.error} />}
     {state.data.orders.map(order => <Card size="small" key={order.requestId} style={{ marginBottom: 12 }}>
       <Space wrap><Typography.Text strong>{order.companyName}</Typography.Text><Tag>{order.status}</Tag>
         <Typography.Text>{order.deploymentIds.length} instances · {order.billingInterval === "year" ? "Annual" : "Monthly"}</Typography.Text>
diff --git a/client/packages/lowcoder/src/util/enterpriseLicenseSync.test.tsx b/client/packages/lowcoder/src/util/enterpriseLicenseSync.test.tsx
new file mode 100644
index 000000000..af5c72a2d
--- /dev/null
+++ b/client/packages/lowcoder/src/util/enterpriseLicenseSync.test.tsx
@@ -0,0 +1,189 @@
+import { act, renderHook } from "@testing-library/react";
+import Api from "api/api";
+import { getLicenseRequestStatus } from "api/licenseRequestApi";
+import { refreshEnterpriseLicenses, useEnterpriseLicenseStatus, useEnterpriseLicenseSync } from "./enterpriseLicenseSync";
+
+jest.mock("api/api", () => ({ __esModule: true, default: { post: jest.fn() } }));
+const post = Api.post as jest.Mock;
+const location = window.location;
+const empty = { orders: [], licenses: [] };
+const pending = { orders: [{ requestId: "purchase", status: "awaiting_payment" }], licenses: [] };
+const issued = { orders: [{ requestId: "purchase", status: "active" }], licenses: [{ id: "file", notAfter: "2027-01-01" }] };
+const response = (data: object) => ({ status: 200, data: { data: { success: true, ...data } } });
+const flush = async () => { await act(async () => {}); };
+const advance = async (ms: number) => { await act(async () => { jest.advanceTimersByTime(ms); }); };
+const syncCalls = () => post.mock.calls.filter(([url]) => url.endsWith("/sync"));
+const start = () => renderHook(() => useEnterpriseLicenseSync("org", "admin", true));
+
+beforeEach(() => {
+  jest.useFakeTimers();
+  Object.defineProperty(window, "location", { configurable: true, value: { hostname: "localhost", origin: "http://localhost:8000" } });
+  Object.defineProperty(document, "visibilityState", { configurable: true, value: "visible" });
+  Object.defineProperty(navigator, "onLine", { configurable: true, value: true });
+  post.mockResolvedValue(response(empty));
+});
+afterEach(() => {
+  Object.defineProperty(window, "location", { configurable: true, value: location });
+  jest.useRealTimers();
+});
+
+test("Community account makes one status request and never syncs on timers or wake events", async () => {
+  start();
+  await flush();
+  await advance(3600000);
+  await act(async () => {
+    window.dispatchEvent(new Event("focus"));
+    window.dispatchEvent(new Event("online"));
+    document.dispatchEvent(new Event("visibilitychange"));
+  });
+  expect(post).toHaveBeenCalledTimes(1);
+  expect(post.mock.calls[0][0]).toBe("/enterprise-licenses/status");
+  expect(post.mock.calls[0][1].refresh).toBeUndefined();
+  expect(syncCalls()).toHaveLength(0);
+});
+
+test("first checkout can activate before any installed license and continue renewing", async () => {
+  post.mockResolvedValueOnce(response(pending)).mockResolvedValue(response(issued));
+  start();
+  await flush();
+  expect(post.mock.calls.map(([url]) => url)).toEqual(["/enterprise-licenses/status", "/enterprise-licenses/sync"]);
+  await advance(60000);
+  expect(syncCalls()).toHaveLength(2);
+});
+
+test("returning purchasing admin discovers purchases without browser storage", async () => {
+  post.mockResolvedValue(response(issued));
+  const first = start();
+  await flush();
+  first.unmount();
+  post.mockClear();
+  start();
+  await flush();
+  expect(post.mock.calls.map(([url]) => url)).toEqual(["/enterprise-licenses/status", "/enterprise-licenses/sync"]);
+});
+
+test("opening the license library discovers purchases after an initially empty status", async () => {
+  start();
+  await flush();
+  post.mockResolvedValueOnce(response(pending)).mockResolvedValue(response(issued));
+  const library = renderHook(() => useEnterpriseLicenseStatus("org:admin"));
+  await flush();
+  expect(post.mock.calls[1][1]).toMatchObject({ orgId: "org", refresh: true });
+  expect(syncCalls()).toHaveLength(1);
+  expect(library.result.current.data).toMatchObject(issued);
+});
+
+test("library mounted before the app sync effect still requests discovery", async () => {
+  renderHook(() => useEnterpriseLicenseStatus("org:admin"));
+  start();
+  await flush();
+  expect(post.mock.calls[0][1]).toMatchObject({ refresh: true });
+  expect(syncCalls()).toHaveLength(0);
+});
+
+test("failed status discovery retries with backoff and never issues an unconfirmed sync", async () => {
+  post.mockRejectedValue(new Error("offline relay"));
+  start();
+  await flush();
+  expect(post).toHaveBeenCalledTimes(1);
+  for (const delay of [60000, 120000, 240000, 480000, 900000, 900000]) {
+    const previous = post.mock.calls.length;
+    await advance(delay - 1);
+    await act(async () => { window.dispatchEvent(new Event("focus")); });
+    expect(post).toHaveBeenCalledTimes(previous);
+    await advance(1);
+    expect(post).toHaveBeenCalledTimes(previous + 1);
+  }
+  expect(syncCalls()).toHaveLength(0);
+});
+
+test("failed renewal preserves downloads and success resets backoff", async () => {
+  post.mockResolvedValue(response(issued));
+  // Read-only observation here also exercises the initial explicit library lookup.
+  const library = renderHook(() => useEnterpriseLicenseStatus("org:admin"));
+  start();
+  await flush();
+  post.mockRejectedValue(new Error("offline relay"));
+  await advance(60000);
+  expect(library.result.current.data).toMatchObject(issued);
+  expect(library.result.current.error).toMatch(/temporarily unavailable/);
+  await advance(60000);
+  const attempts = post.mock.calls.length;
+  post.mockResolvedValue(response(issued));
+  await advance(119999);
+  expect(post).toHaveBeenCalledTimes(attempts);
+  await advance(1);
+  expect(library.result.current.error).toBe("");
+  await advance(60000);
+  expect(post).toHaveBeenCalledTimes(attempts + 2);
+});
+
+test("resolved HTTP errors respect Retry-After without turning an outage into empty status", async () => {
+  post.mockResolvedValue({ status: 503, headers: { "retry-after": "300" }, data: { code: 503 } });
+  start();
+  await flush();
+  await advance(299999);
+  expect(post).toHaveBeenCalledTimes(1);
+  await advance(1);
+  expect(post).toHaveBeenCalledTimes(2);
+  expect(syncCalls()).toHaveLength(0);
+});
+
+test("manual refresh can recover during backoff and discovers before syncing", async () => {
+  post.mockRejectedValue(new Error("relay unavailable"));
+  start();
+  await flush();
+  post.mockResolvedValueOnce(response(pending)).mockResolvedValue(response(issued));
+  await act(async () => { refreshEnterpriseLicenses(); });
+  expect(post.mock.calls[1][1]).toMatchObject({ refresh: true });
+  expect(syncCalls()).toHaveLength(1);
+});
+
+test.each([400, 401, 403, 404])("HTTP %s stops automatic retries until a manual refresh or new session", async status => {
+  post.mockResolvedValue({ status, data: { code: status } });
+  start();
+  await flush();
+  await advance(3600000);
+  await act(async () => { window.dispatchEvent(new Event("focus")); });
+  expect(post).toHaveBeenCalledTimes(1);
+  post.mockResolvedValue(response(empty));
+  await act(async () => { refreshEnterpriseLicenses(); });
+  expect(post).toHaveBeenCalledTimes(2);
+});
+
+test("malformed successful response is retryable and cannot silently stop renewal", async () => {
+  post.mockResolvedValue(response({ orders: null, licenses: [] }));
+  await expect(getLicenseRequestStatus("org")).rejects.toMatchObject({ retryable: true });
+});
+
+test("hidden and offline sessions wait until visible and online", async () => {
+  Object.defineProperty(document, "visibilityState", { configurable: true, value: "hidden" });
+  start();
+  await advance(60000);
+  expect(post).not.toHaveBeenCalled();
+  Object.defineProperty(document, "visibilityState", { configurable: true, value: "visible" });
+  Object.defineProperty(navigator, "onLine", { configurable: true, value: false });
+  await act(async () => { document.dispatchEvent(new Event("visibilitychange")); });
+  expect(post).not.toHaveBeenCalled();
+  Object.defineProperty(navigator, "onLine", { configurable: true, value: true });
+  await act(async () => { window.dispatchEvent(new Event("online")); });
+  expect(post).toHaveBeenCalledTimes(1);
+});
+
+test("switching workspace ignores an old response and never syncs for the old scope", async () => {
+  let resolve!: (value: unknown) => void;
+  post.mockReturnValueOnce(new Promise(value => { resolve = value; })).mockResolvedValue(response(empty));
+  const hook = renderHook(({ org }) => useEnterpriseLicenseSync(org, "admin", true), { initialProps: { org: "old" } });
+  hook.rerender({ org: "new" });
+  await flush();
+  await act(async () => { resolve(response(pending)); });
+  expect(syncCalls()).toHaveLength(0);
+  expect(post.mock.calls.map(([, body]) => body.orgId)).toEqual(["old", "new"]);
+});
+
+test("disabled session never contacts the licensing API", async () => {
+  renderHook(() => useEnterpriseLicenseSync("org", "admin", false));
+  await flush();
+  await advance(3600000);
+  expect(post).not.toHaveBeenCalled();
+});
diff --git a/client/packages/lowcoder/src/util/enterpriseLicenseSync.ts b/client/packages/lowcoder/src/util/enterpriseLicenseSync.ts
index ff1a0f2b0..594c3bea4 100644
--- a/client/packages/lowcoder/src/util/enterpriseLicenseSync.ts
+++ b/client/packages/lowcoder/src/util/enterpriseLicenseSync.ts
@@ -1,50 +1,104 @@
 import { useEffect, useSyncExternalStore } from "react";
-import { EnterpriseLicenseStatus, synchronizeEnterpriseLicenses } from "api/licenseRequestApi";
+import { EnterpriseLicenseRequestError, EnterpriseLicenseStatus, getLicenseRequestStatus, synchronizeEnterpriseLicenses } from "api/licenseRequestApi";
 import { isPublicLowcoderCloud } from "./enterpriseHosting";
 
 const empty: EnterpriseLicenseStatus = { orders: [], licenses: [] };
-let snapshot = { scope: "", data: empty, loading: false, error: false };
+let snapshot = { scope: "", data: empty, loading: false, error: "" };
 const listeners = new Set<() => void>();
 const publish = (value: typeof snapshot) => { snapshot = value; listeners.forEach(listener => listener()); };
 const subscribe = (fn: () => void) => { listeners.add(fn); return () => { listeners.delete(fn); }; };
-let refresh: (() => void) | undefined;
-export const refreshEnterpriseLicenses = () => refresh?.();
+let refresh: { scope: string; run: () => void } | undefined;
+const openLibraries = new Set<string>();
+export const refreshEnterpriseLicenses = () => refresh?.run();
 export const useEnterpriseLicenseStatus = (scope: string) => {
   const state = useSyncExternalStore(subscribe, () => snapshot, () => snapshot);
-  return state.scope === scope ? state : { scope, data: empty, loading: false, error: false };
+  useEffect(() => {
+    // A deliberate visit discovers purchases even after an interrupted checkout or upgrade.
+    // Remember the open view because child effects can run before the app's sync effect.
+    openLibraries.add(scope);
+    if (refresh?.scope === scope) refresh.run();
+    return () => { openLibraries.delete(scope); };
+  }, [scope]);
+  return state.scope === scope ? state : { scope, data: empty, loading: false, error: "" };
 };
 
+const intervalMs = 60000;
+const maxBackoffMs = 15 * 60000;
+const hasPurchase = (data: EnterpriseLicenseStatus) => data.orders.length > 0 || data.licenses.length > 0;
+
 /** Renewal deliberately depends on an active admin UI session, not a background server cron. */
 export function useEnterpriseLicenseSync(orgId: string, userId: string, enabled: boolean) {
   useEffect(() => {
     const scope = `${orgId}:${userId}`;
-    publish({ scope, data: empty, loading: false, error: false });
+    publish({ scope, data: empty, loading: false, error: "" });
     if (isPublicLowcoderCloud() || !enabled || !orgId || !userId) return;
-    let stopped = false, busy = false, lastAttempt = 0;
+    let stopped = false, busy = false, initialized = false, purchased = false, terminal = false;
+    let failures = 0, nextAttempt = 0, discover = openLibraries.has(scope);
+    let timer: number | undefined;
+    const schedule = () => {
+      window.clearTimeout(timer);
+      if (!stopped && !terminal && (!initialized || purchased || discover)) {
+        timer = window.setTimeout(wake, Math.max(intervalMs, nextAttempt - Date.now()));
+      }
+    };
     const run = async (force = false) => {
-      if (stopped || busy || document.visibilityState === "hidden" || (!force && Date.now() - lastAttempt < 60000)) return;
+      if (stopped || busy) return;
+      if (document.visibilityState === "hidden" || !navigator.onLine) { schedule(); return; }
+      if (!force && (Date.now() < nextAttempt || terminal || (initialized && !purchased && !discover))) return;
       busy = true;
-      lastAttempt = Date.now();
       publish({ ...snapshot, scope, loading: true });
+      const lookup = !initialized || discover;
+      const explicitDiscovery = discover;
+      discover = false;
       try {
-        const data = await synchronizeEnterpriseLicenses(orgId);
-        if (!stopped) publish({ scope, data, loading: false, error: false });
-      } catch {
-        if (!stopped) publish({ ...snapshot, scope, loading: false, error: true });
-      } finally { busy = false; }
+        if (lookup) {
+          const data = await getLicenseRequestStatus(orgId, explicitDiscovery);
+          if (stopped) return;
+          initialized = true;
+          purchased = hasPurchase(data);
+          publish({ scope, data, loading: purchased, error: "" });
+        }
+        if (purchased) {
+          const data = await synchronizeEnterpriseLicenses(orgId);
+          if (stopped) return;
+          purchased = hasPurchase(data);
+          publish({ scope, data, loading: false, error: "" });
+        }
+        failures = 0;
+        terminal = false;
+        nextAttempt = Date.now() + intervalMs;
+      } catch (error) {
+        if (stopped) return;
+        const failure = error instanceof EnterpriseLicenseRequestError ? error
+          : new EnterpriseLicenseRequestError("Licenses could not be refreshed. We will retry automatically.");
+        // Retry failed discovery as discovery, not as an unconfirmed sync.
+        if (lookup) { initialized = false; discover = discover || explicitDiscovery; }
+        terminal = !failure.retryable;
+        failures += 1;
+        nextAttempt = Date.now() + Math.max(failure.retryAfterMs,
+          Math.min(maxBackoffMs, intervalMs * 2 ** Math.min(failures - 1, 4)));
+        publish({ ...snapshot, scope, loading: false, error: failure.message });
+      } finally {
+        busy = false;
+        schedule();
+      }
     };
     const wake = () => { void run(); };
-    const manual = () => { void run(true); };
-    refresh = manual;
+    const manual = () => {
+      discover = true;
+      terminal = false;
+      void run(true);
+    };
+    const registration = { scope, run: manual };
+    refresh = registration;
     wake();
-    const timer = window.setInterval(wake, 60000);
     window.addEventListener("focus", wake);
     window.addEventListener("online", wake);
     document.addEventListener("visibilitychange", wake);
     return () => {
       stopped = true;
-      if (refresh === manual) refresh = undefined;
-      window.clearInterval(timer);
+      if (refresh === registration) refresh = undefined;
+      window.clearTimeout(timer);
       window.removeEventListener("focus", wake);
       window.removeEventListener("online", wake);
       document.removeEventListener("visibilitychange", wake);
diff --git a/deploy/n8n/enterprise-licenses/README.md b/deploy/n8n/enterprise-licenses/README.md
index d0a02b6c8..3555bc90f 100644
--- a/deploy/n8n/enterprise-licenses/README.md
+++ b/deploy/n8n/enterprise-licenses/README.md
@@ -7,7 +7,9 @@ The administrator purchases from Settings → Subscription → Enterprise licens
 - Lowcoder's authenticated `/api/enterprise-licenses/*` endpoints require the requesting user to be a current administrator of the selected workspace. Files are scoped to the purchasing user, workspace, and installation.
 - A private random owner capability is stored encrypted in Lowcoder's MongoDB. Its hash scopes n8n database queries. The capability is sent only from the Lowcoder backend to n8n; it is never returned to the browser or stored in Stripe metadata. Preserve MongoDB and the existing encryption key across upgrades.
 - n8n creates hosted Stripe Checkout subscriptions, validates the configured live prices, and records purchase ownership in the dedicated License Database.
-- The UI checks while an administrator is signed in and the page is visible. Only missing/expired license periods trigger Stripe reconciliation. Reconciliation verifies the subscription owner, paid invoice, exact product/price/quantity, successful payment, and absence of refunds or disputes before calling the private license service.
+- On admin login, the UI requests status once. With no Enterprise purchase or previous checkout activity, the backend returns an empty library locally without creating an owner capability or contacting the relay. An empty library stops automatic polling. Opening the Enterprise license section or pressing Refresh explicitly discovers purchases through `status` with `refresh: true`.
+- A confirmed checkout or an existing order enables sync while the purchasing administrator is signed in and the page is visible and online. This works before an Enterprise plugin/license is installed. Only missing/expired license periods trigger Stripe reconciliation. Reconciliation verifies the subscription owner, paid invoice, exact product/price/quantity, successful payment, and absence of refunds or disputes before calling the private license service.
+- Transient failures use 1, 2, 4, 8, then 15-minute retry delays (capped at 15 minutes, honoring a longer `Retry-After`). Success restores the normal one-minute interval. Focus/online events do not bypass backoff. Manual refresh can retry immediately, and existing downloads remain visible during an outage. Authorization/other permanent HTTP errors stop automatic retries.
 - Stripe payment receipts do not issue licenses independently. A monthly renewal requires the purchasing administrator to return to Lowcoder. Administrators download and install the newly issued files through the normal license installation process. Service can be interrupted if this is delayed.
 - Each file has a deterministic identity per paid invoice and deployment, a generation lease, an exact paid validity period, and `apiCallsLimit: 1000000000`. Names use `Company_deployment_YYYY-MM-DD_YYYY-MM-DD.lic`.
 
@@ -44,6 +46,10 @@ If the dialog displays a payment error immediately and the API logs show `404 NO
 
 ## Recovery
 
+A purchase marker is stored alongside the encrypted owner capability, scoped to deployment, workspace, and purchasing admin. It is independent of browser storage and installed-license validity. Legacy capabilities without a marker receive a status-only discovery before sync is allowed; empty legacy accounts are remembered locally. Checkout attempts are recorded before calling the relay, so an ambiguous response can be reconciled on the next sign-in or explicit refresh. Empty responses cannot erase a confirmed purchase or an in-flight checkout. Existing capability tokens are preserved.
+
+Relay HTTP failures, DNS/connection errors, timeouts and malformed replies return HTTP 503 with a sanitized licensing message and `Retry-After: 60`. The licensing controller preserves its own HTTP 400/401/403 statuses instead of letting the global exception handler turn them into HTTP 500. Release the updated frontend and backend together; the backend also guards sync requests from older clients, but stopping the browser's repeated requests requires the new frontend.
+
 A retry reuses the immutable purchase request ID and Stripe idempotency keys. After an ambiguous checkout creation older than 23 hours, reconcile the existing Stripe customer/session before retrying to avoid duplicate subscriptions. License generation claims expire after 180 seconds; the next authenticated UI check retries. Preserve database backups, the signing dependency, and the Lowcoder encryption key. Do not reset capabilities to repair an unrelated billing problem, because doing so would break access to existing purchases.
 
 ## Verification on 2026-10-10
diff --git a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/enterprise/EnterpriseLicenseCapability.java b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/enterprise/EnterpriseLicenseCapability.java
index d4e7ffe9a..eba95d1b2 100644
--- a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/enterprise/EnterpriseLicenseCapability.java
+++ b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/enterprise/EnterpriseLicenseCapability.java
@@ -9,7 +9,13 @@
 public class EnterpriseLicenseCapability {
     @Id private String id;
     @JsonIgnore private String encryptedToken;
+    // Confirms an order/checkout exists, never payment or Enterprise entitlement.
+    // null identifies records created before purchase-scoped polling was introduced.
+    @JsonIgnore private Boolean purchaseConfirmed;
+    @JsonIgnore private boolean checkoutAttempted;
 
     public String getId() { return id; }
     @JsonIgnore public String getEncryptedToken() { return encryptedToken; }
+    @JsonIgnore public Boolean getPurchaseConfirmed() { return purchaseConfirmed; }
+    @JsonIgnore public boolean isCheckoutAttempted() { return checkoutAttempted; }
 }
diff --git a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/enterprise/EnterpriseLicenseCapabilityService.java b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/enterprise/EnterpriseLicenseCapabilityService.java
index 4e6021cb8..811b09b1a 100644
--- a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/enterprise/EnterpriseLicenseCapabilityService.java
+++ b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/enterprise/EnterpriseLicenseCapabilityService.java
@@ -19,6 +19,7 @@
 
 @Service
 public class EnterpriseLicenseCapabilityService {
+    public enum PurchaseState { NONE, UNKNOWN, CONFIRMED }
     private final ReactiveMongoTemplate mongo;
     private final EncryptionService encryption;
     private final SecureRandom random = new SecureRandom();
@@ -36,7 +37,8 @@ public Mono<String> token(String hostId, String orgId, String userId) {
                 byte[] bytes = new byte[32];
                 random.nextBytes(bytes);
                 String token = Base64.getUrlEncoder().withoutPadding().encodeToString(bytes);
-                Update update = new Update().setOnInsert("encryptedToken", encryption.encryptString(token));
+                Update update = new Update().setOnInsert("encryptedToken", encryption.encryptString(token))
+                        .setOnInsert("purchaseConfirmed", false);
                 // Concurrent first visits must all keep the original token, never rotate it.
                 return mongo.findAndModify(query, update,
                     FindAndModifyOptions.options().upsert(true).returnNew(true), EnterpriseLicenseCapability.class)
@@ -47,6 +49,30 @@ public Mono<String> token(String hostId, String orgId, String userId) {
             .map(record -> encryption.decryptString(record.getEncryptedToken()));
     }
 
+    /** Reading Community status must not create credentials or contact the relay. */
+    public Mono<PurchaseState> purchaseState(String hostId, String orgId, String userId) {
+        return mongo.findById(ownerKey(hostId, orgId, userId), EnterpriseLicenseCapability.class)
+                .map(record -> Boolean.TRUE.equals(record.getPurchaseConfirmed()) ? PurchaseState.CONFIRMED
+                        : record.getPurchaseConfirmed() == null || record.isCheckoutAttempted()
+                                ? PurchaseState.UNKNOWN : PurchaseState.NONE)
+                .defaultIfEmpty(PurchaseState.NONE);
+    }
+
+    /** Persist before contacting checkout so an ambiguous response remains discoverable. */
+    public Mono<Void> checkoutAttempted(String hostId, String orgId, String userId) {
+        return mongo.updateFirst(Query.query(Criteria.where("_id").is(ownerKey(hostId, orgId, userId))),
+                new Update().set("checkoutAttempted", true), EnterpriseLicenseCapability.class).then();
+    }
+
+    public Mono<Void> recordPurchaseStatus(String hostId, String orgId, String userId, boolean purchased) {
+        Criteria criteria = Criteria.where("_id").is(ownerKey(hostId, orgId, userId));
+        // A concurrent empty/old response must never erase a purchase or an in-flight checkout.
+        if (!purchased) criteria = criteria.and("purchaseConfirmed").ne(true).and("checkoutAttempted").ne(true);
+        Update update = new Update().set("purchaseConfirmed", purchased);
+        if (purchased) update.set("checkoutAttempted", false);
+        return mongo.updateFirst(Query.query(criteria), update, EnterpriseLicenseCapability.class).then();
+    }
+
     static String ownerKey(String hostId, String orgId, String userId) {
         try {
             MessageDigest digest = MessageDigest.getInstance("SHA-256");
diff --git a/server/api-service/lowcoder-domain/src/test/java/org/lowcoder/domain/enterprise/EnterpriseLicenseCapabilityServiceTest.java b/server/api-service/lowcoder-domain/src/test/java/org/lowcoder/domain/enterprise/EnterpriseLicenseCapabilityServiceTest.java
new file mode 100644
index 000000000..dbc1d734a
--- /dev/null
+++ b/server/api-service/lowcoder-domain/src/test/java/org/lowcoder/domain/enterprise/EnterpriseLicenseCapabilityServiceTest.java
@@ -0,0 +1,76 @@
+package org.lowcoder.domain.enterprise;
+
+import org.junit.jupiter.api.Test;
+import org.lowcoder.domain.encryption.EncryptionService;
+import org.lowcoder.domain.enterprise.EnterpriseLicenseCapabilityService.PurchaseState;
+import org.springframework.data.mongodb.core.ReactiveMongoTemplate;
+import org.springframework.data.mongodb.core.query.Query;
+import org.springframework.data.mongodb.core.query.Update;
+import org.springframework.test.util.ReflectionTestUtils;
+import com.mongodb.client.result.UpdateResult;
+import reactor.core.publisher.Mono;
+
+import static org.junit.jupiter.api.Assertions.*;
+import static org.mockito.ArgumentMatchers.*;
+import static org.mockito.Mockito.*;
+
+class EnterpriseLicenseCapabilityServiceTest {
+    final ReactiveMongoTemplate mongo = mock(ReactiveMongoTemplate.class, withSettings().mockMaker("mock-maker-subclass"));
+    final EncryptionService encryption = mock(EncryptionService.class, withSettings().mockMaker("mock-maker-subclass"));
+    final EnterpriseLicenseCapabilityService service = new EnterpriseLicenseCapabilityService(mongo, encryption);
+    final String owner = EnterpriseLicenseCapabilityService.ownerKey("host", "org", "admin");
+
+    EnterpriseLicenseCapability record(Boolean purchased, boolean attempted) {
+        var record = new EnterpriseLicenseCapability();
+        ReflectionTestUtils.setField(record, "purchaseConfirmed", purchased);
+        ReflectionTestUtils.setField(record, "checkoutAttempted", attempted);
+        return record;
+    }
+
+    @Test void absentCommunityAccountDoesNotCreateAnOwnershipCredential() {
+        when(mongo.findById(owner, EnterpriseLicenseCapability.class)).thenReturn(Mono.empty());
+        assertEquals(PurchaseState.NONE, service.purchaseState("host", "org", "admin").block());
+        verify(mongo).findById(owner, EnterpriseLicenseCapability.class);
+        verifyNoMoreInteractions(mongo);
+        verifyNoInteractions(encryption);
+    }
+
+    @Test void legacyCredentialsNeedDiscoveryButEmptyMigratedAccountsDoNot() {
+        when(mongo.findById(owner, EnterpriseLicenseCapability.class)).thenReturn(Mono.just(record(null, false)));
+        assertEquals(PurchaseState.UNKNOWN, service.purchaseState("host", "org", "admin").block());
+        when(mongo.findById(owner, EnterpriseLicenseCapability.class)).thenReturn(Mono.just(record(false, false)));
+        assertEquals(PurchaseState.NONE, service.purchaseState("host", "org", "admin").block());
+    }
+
+    @Test void interruptedCheckoutNeedsDiscoveryWithoutClaimingAPurchase() {
+        when(mongo.findById(owner, EnterpriseLicenseCapability.class)).thenReturn(Mono.just(record(false, true)));
+        assertEquals(PurchaseState.UNKNOWN, service.purchaseState("host", "org", "admin").block());
+    }
+
+    @Test void confirmedPurchaseSurvivesAnotherCheckoutAttempt() {
+        when(mongo.findById(owner, EnterpriseLicenseCapability.class)).thenReturn(Mono.just(record(true, true)));
+        assertEquals(PurchaseState.CONFIRMED, service.purchaseState("host", "org", "admin").block());
+    }
+
+    @Test void purchaseStateIsScopedToTheExactDeploymentWorkspaceAndAdmin() {
+        when(mongo.findById(anyString(), eq(EnterpriseLicenseCapability.class))).thenReturn(Mono.empty());
+        when(mongo.findById(owner, EnterpriseLicenseCapability.class)).thenReturn(Mono.just(record(true, false)));
+        assertEquals(PurchaseState.CONFIRMED, service.purchaseState("host", "org", "admin").block());
+        assertEquals(PurchaseState.NONE, service.purchaseState("other-host", "org", "admin").block());
+        assertEquals(PurchaseState.NONE, service.purchaseState("host", "other-org", "admin").block());
+        assertEquals(PurchaseState.NONE, service.purchaseState("host", "org", "other-admin").block());
+    }
+
+    @Test void negativeDiscoveryUpdateProtectsConcurrentCheckoutAndConfirmation() {
+        when(mongo.updateFirst(any(Query.class), any(Update.class), eq(EnterpriseLicenseCapability.class)))
+                .thenAnswer(call -> {
+                    var query = ((Query) call.getArgument(0)).getQueryObject();
+                    assertEquals(owner, query.getString("_id"));
+                    assertEquals(true, ((org.bson.Document) query.get("purchaseConfirmed")).get("$ne"));
+                    assertEquals(true, ((org.bson.Document) query.get("checkoutAttempted")).get("$ne"));
+                    return Mono.just(UpdateResult.acknowledged(0, 0L, null));
+                });
+        service.recordPurchaseStatus("host", "org", "admin", false).block();
+        verify(mongo).updateFirst(any(Query.class), any(Update.class), eq(EnterpriseLicenseCapability.class));
+    }
+}
diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/subscription/EnterpriseLicenseController.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/subscription/EnterpriseLicenseController.java
index 6595a7550..f61320021 100644
--- a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/subscription/EnterpriseLicenseController.java
+++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/subscription/EnterpriseLicenseController.java
@@ -1,7 +1,9 @@
 package org.lowcoder.api.subscription;
 
 import com.fasterxml.jackson.databind.JsonNode;
+import com.fasterxml.jackson.databind.node.JsonNodeFactory;
 import org.lowcoder.domain.enterprise.EnterpriseLicenseCapabilityService;
+import org.lowcoder.domain.enterprise.EnterpriseLicenseCapabilityService.PurchaseState;
 import org.lowcoder.api.home.SessionUserService;
 import org.lowcoder.sdk.config.dynamic.ConfigCenter;
 import org.lowcoder.sdk.webclient.WebClientBuildHelper;
@@ -9,6 +11,7 @@
 import org.springframework.beans.factory.annotation.Value;
 import org.springframework.http.HttpStatus;
 import org.springframework.http.MediaType;
+import org.springframework.http.ResponseEntity;
 import org.springframework.http.server.reactive.ServerHttpRequest;
 import org.springframework.web.bind.annotation.*;
 import org.springframework.web.server.ResponseStatusException;
@@ -60,7 +63,7 @@ public Mono<ResponseView<JsonNode>> request(@PathVariable String action, @Reques
                                 "Enterprise Edition is self-hosted. Purchase a license from your own Lowcoder installation."));
                     }
                     String hostId = config.deployment().ofString("id", "").get();
-                    if (hostId == null || hostId.isBlank() || relayUrl.isBlank()) {
+                    if (hostId == null || hostId.isBlank()) {
                         return Mono.error(new ResponseStatusException(HttpStatus.SERVICE_UNAVAILABLE,
                                 "Enterprise licensing is not configured for this installation"));
                     }
@@ -69,7 +72,9 @@ public Mono<ResponseView<JsonNode>> request(@PathVariable String action, @Reques
                     payload.put("hostId", hostId);
                     payload.put("orgId", member.getOrgId());
                     payload.put("userId", member.getUserId());
-                    payload.put("issuedAt", System.currentTimeMillis());
+                    if (action.equals("status") || action.equals("sync")) {
+                        return library(payload, action.equals("status") && body.path("refresh").asBoolean(false));
+                    }
                     if (action.equals("checkout")) {
                         JsonNode deployments = body.path("deploymentIds");
                         if (!deployments.isArray() || deployments.size() < 1 || deployments.size() > 3 ||
@@ -85,7 +90,11 @@ public Mono<ResponseView<JsonNode>> request(@PathVariable String action, @Reques
                     if (action.equals("portal")) payload.put("requestId", body.path("requestId").asText());
                     if (action.equals("checkout") || action.equals("portal")) {
                         String origin = publicUrl.isBlank() ? body.path("returnOrigin").asText() : publicUrl;
-                        URI base = URI.create(origin);
+                        URI base;
+                        try { base = URI.create(origin); }
+                        catch (IllegalArgumentException error) {
+                            throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "Invalid Enterprise return origin");
+                        }
                         // Local development may return over HTTP. Payment and relay traffic still use HTTPS.
                         boolean loopback = base.getHost() != null && List.of("localhost", "127.0.0.1", "[::1]").contains(base.getHost());
                         if (!("https".equals(base.getScheme()) || ("http".equals(base.getScheme()) && loopback)) ||
@@ -98,10 +107,77 @@ public Mono<ResponseView<JsonNode>> request(@PathVariable String action, @Reques
                         payload.put("returnUrl", origin.replaceAll("/+$", "") + "/setting/subscription?enterpriseLicense=return");
                     }
                     return capabilities.token(hostId, member.getOrgId(), member.getUserId())
-                            .flatMap(token -> send(payload, token));
+                            .flatMap(token -> {
+                                if (!action.equals("checkout")) return relay(payload, token);
+                                return capabilities.checkoutAttempted(hostId, member.getOrgId(), member.getUserId())
+                                        .then(Mono.defer(() -> relay(payload, token)))
+                                        .flatMap(result -> capabilities.recordPurchaseStatus(hostId, member.getOrgId(), member.getUserId(), true)
+                                                .thenReturn(result));
+                            });
                 }).map(ResponseView::success);
     }
 
+    private Mono<JsonNode> library(Map<String, Object> payload, boolean refresh) {
+        String hostId = (String) payload.get("hostId"), orgId = (String) payload.get("orgId"), userId = (String) payload.get("userId");
+        return capabilities.purchaseState(hostId, orgId, userId).flatMap(state -> {
+            if (state == PurchaseState.NONE && !refresh) {
+                var empty = JsonNodeFactory.instance.objectNode().put("success", true);
+                empty.putArray("orders");
+                empty.putArray("licenses");
+                return Mono.just(empty);
+            }
+            return capabilities.token(hostId, orgId, userId).flatMap(token -> {
+                Map<String, Object> lookup = new LinkedHashMap<>(payload);
+                // Legacy credentials and ambiguous checkouts are discovered without issuing files.
+                if (state != PurchaseState.CONFIRMED) lookup.put("action", "status");
+                return relay(lookup, token).flatMap(result -> {
+                    boolean purchased = hasPurchase(result);
+                    return capabilities.recordPurchaseStatus(hostId, orgId, userId, purchased)
+                            .then(Mono.defer(() -> "sync".equals(payload.get("action")) &&
+                                    "status".equals(lookup.get("action")) && purchased
+                                            ? relay(payload, token) : Mono.just(result)));
+                });
+            });
+        });
+    }
+
+    private static boolean hasPurchase(JsonNode result) {
+        return !result.path("orders").isEmpty() || !result.path("licenses").isEmpty();
+    }
+
+    private Mono<JsonNode> relay(Map<String, Object> payload, String token) {
+        return Mono.defer(() -> {
+            // Database work must not consume the relay's authenticated-request freshness window.
+            payload.put("issuedAt", System.currentTimeMillis());
+            return send(payload, token);
+        }).filter(result -> {
+            if (!result.path("success").asBoolean(false)) return false;
+            String action = (String) payload.get("action");
+            if (action.equals("status") || action.equals("sync")) {
+                return result.path("orders").isArray() && result.path("licenses").isArray();
+            }
+            if (action.equals("checkout")) {
+                return !result.path("checkoutUrl").asText().isBlank() &&
+                        result.path("requestId").equals(payload.get("requestId"));
+            }
+            return true;
+        }).switchIfEmpty(Mono.error(new ResponseStatusException(HttpStatus.SERVICE_UNAVAILABLE,
+                "Enterprise license service returned an invalid response. Please retry shortly.")))
+                .onErrorMap(error -> !(error instanceof ResponseStatusException), error ->
+                        new ResponseStatusException(HttpStatus.SERVICE_UNAVAILABLE,
+                                "Enterprise license service is temporarily unavailable. Please retry shortly.", error));
+    }
+
+    // The global handler converts non-plugin ResponseStatusExceptions to 500. Keep the
+    // licensing API's authorization, validation and availability statuses intact locally.
+    @ExceptionHandler(ResponseStatusException.class)
+    public ResponseEntity<ResponseView<Void>> licensingError(ResponseStatusException error) {
+        var response = ResponseEntity.status(error.getStatusCode());
+        if (error.getStatusCode().value() == 503) response.header("Retry-After", "60");
+        return response.body(ResponseView.error(error.getStatusCode().value(),
+                error.getReason() == null ? "Enterprise licensing request could not be completed" : error.getReason()));
+    }
+
     private static boolean isPublicCloudUrl(String url) {
         try {
             String host = URI.create(url).getHost();
@@ -112,7 +188,11 @@ private static boolean isPublicCloudUrl(String url) {
     }
 
     Mono<JsonNode> send(Map<String, Object> payload, String token) {
-        URI target = URI.create(relayUrl);
+        URI target;
+        try { target = URI.create(relayUrl); }
+        catch (IllegalArgumentException error) {
+            return Mono.error(new ResponseStatusException(HttpStatus.SERVICE_UNAVAILABLE, "Enterprise relay requires HTTPS"));
+        }
         if (!"https".equals(target.getScheme()) || target.getHost() == null || target.getUserInfo() != null) {
             return Mono.error(new ResponseStatusException(HttpStatus.SERVICE_UNAVAILABLE, "Enterprise relay requires HTTPS"));
         }
diff --git a/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/subscription/EnterpriseLicenseControllerTest.java b/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/subscription/EnterpriseLicenseControllerTest.java
index 9f6cdaecf..901c252b8 100644
--- a/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/subscription/EnterpriseLicenseControllerTest.java
+++ b/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/subscription/EnterpriseLicenseControllerTest.java
@@ -3,6 +3,15 @@
 import org.junit.jupiter.api.*;
 import org.lowcoder.api.home.SessionUserService;
 import org.lowcoder.domain.enterprise.EnterpriseLicenseCapabilityService;
+import org.lowcoder.domain.enterprise.EnterpriseLicenseCapabilityService.PurchaseState;
+import org.lowcoder.api.framework.exception.GlobalExceptionHandler;
+import org.lowcoder.api.framework.exception.ApiPerfHelper;
+import org.springframework.context.annotation.AnnotationConfigApplicationContext;
+import org.springframework.web.reactive.config.DelegatingWebFluxConfiguration;
+import org.springframework.test.web.reactive.server.WebTestClient;
+import org.springframework.web.reactive.function.client.WebClientResponseException;
+import org.springframework.http.HttpHeaders;
+import java.nio.charset.StandardCharsets;
 import org.lowcoder.domain.organization.model.*;
 import org.lowcoder.sdk.config.dynamic.ConfigCenter;
 import org.springframework.web.server.ResponseStatusException;
@@ -23,20 +32,40 @@ class EnterpriseLicenseControllerTest {
     EnterpriseLicenseController controller;
     JsonNode body;
     final ServerHttpRequest request = MockServerHttpRequest.post("https://ui.example/api/enterprise-licenses/checkout").build();
+    JsonNode relayResult() {
+        return mapper.valueToTree(Map.of("success", true, "requestId", "00000000-0000-4000-8000-000000000001",
+                "checkoutUrl", "https://checkout.stripe.com/c/pay/test", "orders", List.of(Map.of("requestId", "existing")), "licenses", List.of()));
+    }
+    JsonNode emptyLibrary() { return mapper.valueToTree(Map.of("success", true, "orders", List.of(), "licenses", List.of())); }
+    final List<AnnotationConfigApplicationContext> contexts = new ArrayList<>();
+    WebTestClient webClient() {
+        var context = new AnnotationConfigApplicationContext();
+        contexts.add(context);
+        context.register(DelegatingWebFluxConfiguration.class);
+        context.registerBean(EnterpriseLicenseController.class, () -> controller);
+        context.getBeanFactory().registerSingleton("apiPerfHelper", mock(ApiPerfHelper.class, withSettings().mockMaker("mock-maker-subclass")));
+        context.registerBean(GlobalExceptionHandler.class);
+        context.refresh();
+        return WebTestClient.bindToApplicationContext(context).build();
+    }
+    @AfterEach void closeContexts() { contexts.forEach(AnnotationConfigApplicationContext::close); }
     @BeforeEach void setup() {
         controller = mock(EnterpriseLicenseController.class,withSettings().mockMaker("mock-maker-subclass").useConstructor(sessions,config,capabilities,"https://flow.example/webhook/enterprise","https://ui.example").defaultAnswer(CALLS_REAL_METHODS));
+        when(capabilities.purchaseState("real-deployment", "org", "real-admin")).thenReturn(Mono.just(PurchaseState.CONFIRMED));
+        when(capabilities.checkoutAttempted(anyString(), anyString(), anyString())).thenReturn(Mono.empty());
+        when(capabilities.recordPurchaseStatus(anyString(), anyString(), anyString(), anyBoolean())).thenReturn(Mono.empty());
         when(capabilities.token("real-deployment","org","real-admin")).thenReturn(Mono.just("private-test-token"));
         when(sessions.getVisitorOrgMember()).thenReturn(Mono.just(new OrgMember("org","real-admin",MemberRole.ADMIN,"normal",0)));
         when(config.deployment().ofString("id", "").get()).thenReturn("real-deployment");
         body=mapper.valueToTree(Map.of("orgId","org","userId","forged","hostId","forged","requestId","00000000-0000-4000-8000-000000000001",
             "billingInterval","year","deploymentIds",List.of("real-deployment","other-deployment"),"contactData",Map.of("companyName","Company")));
-        doReturn(Mono.just(mapper.valueToTree(Map.of("success",true)))).when(controller).send(anyMap(),eq("private-test-token"));
+        doReturn(Mono.just(relayResult())).when(controller).send(anyMap(),eq("private-test-token"));
     }
     @Test void ownerAndCurrentDeploymentComeOnlyFromSessionAndServerConfig() {
         doAnswer(call->{ Map<String,Object> p=call.getArgument(0);
             assertEquals("real-admin",p.get("userId")); assertEquals("real-deployment",p.get("hostId")); assertEquals("org",p.get("orgId"));
             assertEquals("https://ui.example/setting/subscription?enterpriseLicense=return",p.get("returnUrl")); assertFalse(p.containsKey("priceId"));
-            return Mono.just(mapper.valueToTree(Map.of("success",true))); }).when(controller).send(anyMap(),eq("private-test-token"));
+            return Mono.just(relayResult()); }).when(controller).send(anyMap(),eq("private-test-token"));
         assertNotNull(controller.request("checkout",body,request).block());
     }
     @Test void membersAndFormerAdminsCannotRetrieveOrGenerateFiles() {
@@ -60,12 +89,14 @@ class EnterpriseLicenseControllerTest {
     @Test void downloadScopeCannotBeOverriddenByRequestFields() {
         doAnswer(call->{ Map<String,Object> p=call.getArgument(0); assertEquals("real-admin",p.get("userId"));
             assertEquals("real-deployment",p.get("hostId")); assertFalse(p.containsKey("customerId"));assertFalse(p.containsKey("returnUrl"));
-            return Mono.just(mapper.valueToTree(Map.of("success",true))); }).when(controller).send(anyMap(),eq("private-test-token"));
+            return Mono.just(relayResult()); }).when(controller).send(anyMap(),eq("private-test-token"));
         assertNotNull(controller.request("download",body,request).block());
     }
     @Test void missingRelayConfigurationFailsClosed() {
         controller=mock(EnterpriseLicenseController.class,withSettings().mockMaker("mock-maker-subclass").useConstructor(sessions,config,capabilities,"","https://ui.example").defaultAnswer(CALLS_REAL_METHODS));
-        assertThrows(ResponseStatusException.class,()->controller.request("checkout",body,request).block());verify(controller,never()).send(anyMap(),eq("private-test-token"));
+        ResponseStatusException error = assertThrows(ResponseStatusException.class,()->controller.request("checkout",body,request).block());
+        assertEquals(HttpStatus.SERVICE_UNAVAILABLE, error.getStatusCode());
+        verify(capabilities, never()).recordPurchaseStatus(anyString(), anyString(), anyString(), anyBoolean());
     }
     @Test void localCheckoutAndPortalCanReturnToTheDevelopmentUi() {
         controller=mock(EnterpriseLicenseController.class,withSettings().mockMaker("mock-maker-subclass").useConstructor(sessions,config,capabilities,"https://flow.example/webhook/enterprise","").defaultAnswer(CALLS_REAL_METHODS));
@@ -73,7 +104,7 @@ class EnterpriseLicenseControllerTest {
             ((com.fasterxml.jackson.databind.node.ObjectNode)body).put("returnOrigin",origin);
             doAnswer(call->{ Map<String,Object> p=call.getArgument(0);
                 assertEquals(origin+"/setting/subscription?enterpriseLicense=return",p.get("returnUrl"));
-                return Mono.just(mapper.valueToTree(Map.of("success",true))); }).when(controller).send(anyMap(),eq("private-test-token"));
+                return Mono.just(relayResult()); }).when(controller).send(anyMap(),eq("private-test-token"));
             for (String action:List.of("checkout", "portal")) assertNotNull(controller.request(action,body,request).block());
         }
     }
@@ -110,7 +141,7 @@ class EnterpriseLicenseControllerTest {
                 "https://app.lowcoder.cloud.example", "https://my-lowcoder.example")) {
             controller = mock(EnterpriseLicenseController.class,withSettings().mockMaker("mock-maker-subclass")
                     .useConstructor(sessions,config,capabilities,"https://flow.example/webhook/enterprise",origin).defaultAnswer(CALLS_REAL_METHODS));
-            doReturn(Mono.just(mapper.valueToTree(Map.of("success",true)))).when(controller).send(anyMap(),anyString());
+            doReturn(Mono.just(relayResult())).when(controller).send(anyMap(),anyString());
             assertNotNull(controller.request("checkout",body,MockServerHttpRequest.post(origin + "/api/enterprise-licenses/checkout").build()).block());
             verify(controller).send(anyMap(),eq("private-test-token"));
         }
@@ -118,7 +149,7 @@ class EnterpriseLicenseControllerTest {
     @Test void existingCloudPurchasesRemainManageableWithoutNewCheckout() {
         controller = mock(EnterpriseLicenseController.class,withSettings().mockMaker("mock-maker-subclass")
                 .useConstructor(sessions,config,capabilities,"https://flow.example/webhook/enterprise","https://app.lowcoder.cloud").defaultAnswer(CALLS_REAL_METHODS));
-        doReturn(Mono.just(mapper.valueToTree(Map.of("success",true)))).when(controller).send(anyMap(),anyString());
+        doReturn(Mono.just(relayResult())).when(controller).send(anyMap(),anyString());
         for (String action : List.of("status", "download", "portal")) {
             assertNotNull(controller.request(action,body,request).block());
         }
@@ -133,4 +164,96 @@ class EnterpriseLicenseControllerTest {
         }
         verify(controller,never()).send(anyMap(),anyString());
     }
+
+    @Test void communityStatusAndOldClientSyncStayLocalWithoutCreatingCredentials() {
+        when(capabilities.purchaseState("real-deployment", "org", "real-admin")).thenReturn(Mono.just(PurchaseState.NONE));
+        for (String action : List.of("status", "sync")) {
+            assertEquals(emptyLibrary(), controller.request(action, body, request).block().getData());
+        }
+        verify(capabilities, never()).token(anyString(), anyString(), anyString());
+        verify(controller, never()).send(anyMap(), anyString());
+    }
+
+    @Test void openingLibraryExplicitlyCanDiscoverAnExistingPurchase() {
+        when(capabilities.purchaseState("real-deployment", "org", "real-admin")).thenReturn(Mono.just(PurchaseState.NONE));
+        ((com.fasterxml.jackson.databind.node.ObjectNode) body).put("refresh", true);
+        controller.request("status", body, request).block();
+        verify(controller).send(argThat(p -> "status".equals(p.get("action"))), anyString());
+        verify(capabilities).recordPurchaseStatus("real-deployment", "org", "real-admin", true);
+    }
+
+    @Test void legacyCommunityCredentialIsCheckedWithoutGeneratingFiles() {
+        when(capabilities.purchaseState("real-deployment", "org", "real-admin")).thenReturn(Mono.just(PurchaseState.UNKNOWN));
+        doReturn(Mono.just(emptyLibrary())).when(controller).send(anyMap(), anyString());
+        assertEquals(emptyLibrary(), controller.request("sync", body, request).block().getData());
+        verify(controller).send(argThat(p -> "status".equals(p.get("action"))), anyString());
+        verify(controller, never()).send(argThat(p -> "sync".equals(p.get("action"))), anyString());
+        verify(capabilities).recordPurchaseStatus("real-deployment", "org", "real-admin", false);
+    }
+
+    @Test void legacyPurchaseOrInterruptedCheckoutCanActivateBeforeAnyLicenseIsInstalled() {
+        when(capabilities.purchaseState("real-deployment", "org", "real-admin")).thenReturn(Mono.just(PurchaseState.UNKNOWN));
+        assertNotNull(controller.request("sync", body, request).block());
+        var sequence = inOrder(controller, capabilities);
+        sequence.verify(controller).send(argThat(p -> "status".equals(p.get("action"))), anyString());
+        sequence.verify(capabilities).recordPurchaseStatus("real-deployment", "org", "real-admin", true);
+        sequence.verify(controller).send(argThat(p -> "sync".equals(p.get("action"))), anyString());
+    }
+
+    @Test void confirmedPurchaseContinuesToSyncForRenewals() {
+        controller.request("sync", body, request).block();
+        verify(controller).send(argThat(p -> "sync".equals(p.get("action"))), anyString());
+        verify(controller, never()).send(argThat(p -> "status".equals(p.get("action"))), anyString());
+    }
+
+    @Test void checkoutIsRecordedBeforeRelayAndConfirmedOnlyAfterSuccess() {
+        controller.request("checkout", body, request).block();
+        var sequence = inOrder(controller, capabilities);
+        sequence.verify(capabilities).checkoutAttempted("real-deployment", "org", "real-admin");
+        sequence.verify(controller).send(anyMap(), anyString());
+        sequence.verify(capabilities).recordPurchaseStatus("real-deployment", "org", "real-admin", true);
+    }
+
+    @Test void ambiguousCheckoutRemainsDiscoverableWithoutClaimingItSucceeded() {
+        doReturn(Mono.error(new java.util.concurrent.TimeoutException("private relay detail"))).when(controller).send(anyMap(), anyString());
+        ResponseStatusException error = assertThrows(ResponseStatusException.class, () -> controller.request("checkout", body, request).block());
+        assertEquals(HttpStatus.SERVICE_UNAVAILABLE, error.getStatusCode());
+        verify(capabilities).checkoutAttempted("real-deployment", "org", "real-admin");
+        verify(capabilities, never()).recordPurchaseStatus(anyString(), anyString(), anyString(), anyBoolean());
+    }
+
+    @Test void invalidRelayResultsCannotDisableRenewalsOrConfirmPurchases() {
+        for (JsonNode result : List.of(mapper.createObjectNode(), mapper.valueToTree(Map.of("success", true)),
+                mapper.valueToTree(Map.of("success", false, "orders", List.of(), "licenses", List.of())))) {
+            doReturn(Mono.just(result)).when(controller).send(anyMap(), anyString());
+            for (String action : List.of("status", "sync", "checkout")) {
+                ResponseStatusException error = assertThrows(ResponseStatusException.class, () -> controller.request(action, body, request).block());
+                assertEquals(HttpStatus.SERVICE_UNAVAILABLE, error.getStatusCode());
+            }
+        }
+        verify(capabilities, never()).recordPurchaseStatus(anyString(), anyString(), anyString(), anyBoolean());
+    }
+
+    @Test void relayFailuresReturn503WithRetryAfterInsteadOfGlobal500() {
+        WebTestClient client = webClient();
+        for (Throwable cause : List.of(new java.net.UnknownHostException("private relay detail"),
+                new java.io.IOException("Connection prematurely closed"), new java.util.concurrent.TimeoutException(),
+                WebClientResponseException.create(500, "upstream", HttpHeaders.EMPTY, "private detail".getBytes(StandardCharsets.UTF_8), StandardCharsets.UTF_8))) {
+            doReturn(Mono.error(cause)).when(controller).send(anyMap(), anyString());
+            client.post().uri("/api/enterprise-licenses/sync").bodyValue(body).exchange()
+                    .expectStatus().isEqualTo(503).expectHeader().valueEquals("Retry-After", "60")
+                    .expectBody().jsonPath("$.code").isEqualTo(503)
+                    .jsonPath("$.message").isEqualTo("Enterprise license service is temporarily unavailable. Please retry shortly.");
+        }
+    }
+
+    @Test void authorizationAndValidationKeepTheirHttpStatus() {
+        WebTestClient client = webClient();
+        ((com.fasterxml.jackson.databind.node.ObjectNode) body).set("deploymentIds", mapper.valueToTree(List.of("foreign")));
+        client.post().uri("/api/enterprise-licenses/checkout").bodyValue(body).exchange().expectStatus().isBadRequest();
+        when(sessions.getVisitorOrgMember()).thenReturn(Mono.just(new OrgMember("org", "real-admin", MemberRole.MEMBER, "normal", 0)));
+        client.post().uri("/api/enterprise-licenses/status").bodyValue(body).exchange().expectStatus().isForbidden();
+        when(sessions.getVisitorOrgMember()).thenReturn(Mono.empty());
+        client.post().uri("/api/enterprise-licenses/status").bodyValue(body).exchange().expectStatus().isUnauthorized();
+    }
 }

From c93e8b12471425ed23a7953afa361f8ab303d157 Mon Sep 17 00:00:00 2001
From: FalkWolsky <fw@falkwolsky.com>
Date: Tue, 13 Oct 2026 17:22:09 +0200
Subject: [PATCH 2/4] Branding for refreshed UI

---
 .../src/components/GlobalInstances.tsx        |  32 +++--
 .../src/components/adminThemeVariables.ts     |   8 ++
 .../lowcoder-design/src/components/button.tsx | 112 +++++++++---------
 .../lowcoder/admin-branding-preview.html      |   5 +
 .../src/components/layout/AdminBrand.tsx      |  24 ++++
 .../src/components/layout/AdminSidebar.tsx    |  24 ++++
 .../src/components/layout/BRANDING.md         |  32 +++++
 .../lowcoder/src/components/layout/Layout.tsx |  43 +------
 .../src/components/layout/SideBarItem.tsx     |  10 +-
 .../src/components/layout/SubSideBar.tsx      |  12 +-
 .../components/layout/adminAppearance.test.ts |  43 +++++++
 .../src/components/layout/adminAppearance.ts  |  99 ++++++++++++++++
 .../src/components/layout/adminTheme.test.tsx |  60 ++++++++++
 .../src/components/layout/adminTheme.tsx      | 101 ++++++----------
 .../src/dev-utils/admin-branding-preview.tsx  |  88 ++++++++++++++
 .../packages/lowcoder/src/i18n/locales/de.ts  |   6 +-
 .../packages/lowcoder/src/i18n/locales/en.ts  |   6 +-
 .../packages/lowcoder/src/i18n/locales/es.ts  |   6 +-
 .../packages/lowcoder/src/i18n/locales/it.ts  |   6 +-
 .../packages/lowcoder/src/i18n/locales/pt.ts  |   6 +-
 .../packages/lowcoder/src/i18n/locales/ru.ts  |   6 +-
 .../packages/lowcoder/src/i18n/locales/zh.ts  |   6 +-
 .../src/pages/ApplicationV2/HomeLayout.tsx    |   4 +-
 .../src/pages/ApplicationV2/HomeResCard.tsx   |  22 ++--
 .../src/pages/ApplicationV2/HomeTableView.tsx |   6 +-
 .../pages/ApplicationV2/MarketplaceView.tsx   |   8 +-
 .../src/pages/ApplicationV2/NewsLayout.tsx    |   5 +-
 .../pages/ApplicationV2/TrashTableView.tsx    |   2 +-
 .../pages/ApplicationV2/UserProfileLayout.tsx |  12 +-
 .../marketplace/MarketplacePreview.tsx        |   4 +-
 .../marketplace/marketplaceStyles.tsx         |  28 ++---
 .../lowcoder/src/pages/common/header.tsx      |  12 +-
 .../lowcoder/src/pages/common/help.tsx        |   8 +-
 .../src/pages/datasource/datasourceList.tsx   |   2 +-
 .../src/pages/queryLibrary/LeftNav.tsx        |  16 +--
 .../src/pages/setting/settingHome.tsx         |   1 -
 .../setting/subscriptions/productCard.tsx     |   4 +-
 .../reducers/uiReducers/enterpriseReducer.ts  |   8 +-
 .../redux/sagas/enterpriseBranding.test.ts    |  74 ++++++++++++
 .../src/redux/sagas/enterpriseSagas.ts        |  41 +++----
 .../redux/selectors/enterpriseSelectors.ts    |   6 +-
 client/packages/lowcoder/vite.config.mts      |   1 +
 42 files changed, 713 insertions(+), 286 deletions(-)
 create mode 100644 client/packages/lowcoder-design/src/components/adminThemeVariables.ts
 create mode 100644 client/packages/lowcoder/admin-branding-preview.html
 create mode 100644 client/packages/lowcoder/src/components/layout/AdminBrand.tsx
 create mode 100644 client/packages/lowcoder/src/components/layout/AdminSidebar.tsx
 create mode 100644 client/packages/lowcoder/src/components/layout/BRANDING.md
 create mode 100644 client/packages/lowcoder/src/components/layout/adminAppearance.test.ts
 create mode 100644 client/packages/lowcoder/src/components/layout/adminAppearance.ts
 create mode 100644 client/packages/lowcoder/src/components/layout/adminTheme.test.tsx
 create mode 100644 client/packages/lowcoder/src/dev-utils/admin-branding-preview.tsx
 create mode 100644 client/packages/lowcoder/src/redux/sagas/enterpriseBranding.test.ts

diff --git a/client/packages/lowcoder-design/src/components/GlobalInstances.tsx b/client/packages/lowcoder-design/src/components/GlobalInstances.tsx
index 19b2ec8e8..2683f1813 100644
--- a/client/packages/lowcoder-design/src/components/GlobalInstances.tsx
+++ b/client/packages/lowcoder-design/src/components/GlobalInstances.tsx
@@ -1,3 +1,4 @@
+import { useLayoutEffect } from "react";
 import { default as App } from "antd/es/app";
 import type { MessageInstance } from "antd/es/message/interface";
 import type { ModalStaticFunctions } from "antd/es/modal/confirm";
@@ -7,12 +8,29 @@ let messageInstance: MessageInstance;
 let notificationInstance: NotificationInstance;
 let modalInstance: Omit<ModalStaticFunctions, 'warn'>;
 
-export default () => {
-  const staticFunction = App.useApp();
-  messageInstance = staticFunction.message;
-  modalInstance = staticFunction.modal;
-  notificationInstance = staticFunction.notification;
+// Nested application shells can supply a themed API without leaking it after exit.
+const scopes = new Map<symbol, { priority: number; api: ReturnType<typeof App.useApp> }>();
+function updateInstances() {
+  const active = Array.from(scopes.values()).sort((a, b) => b.priority - a.priority)[0]?.api;
+  if (active) {
+    messageInstance = active.message;
+    modalInstance = active.modal;
+    notificationInstance = active.notification;
+  }
+}
+
+export default function GlobalInstances({ priority = 0 }: { priority?: number }) {
+  const api = App.useApp();
+  useLayoutEffect(() => {
+    const key = Symbol();
+    scopes.set(key, { priority, api });
+    updateInstances();
+    return () => {
+      scopes.delete(key);
+      updateInstances();
+    };
+  }, [api, priority]);
   return null;
-};
+}
 
-export { messageInstance, notificationInstance, modalInstance };
\ No newline at end of file
+export { messageInstance, notificationInstance, modalInstance };
diff --git a/client/packages/lowcoder-design/src/components/adminThemeVariables.ts b/client/packages/lowcoder-design/src/components/adminThemeVariables.ts
new file mode 100644
index 000000000..f9358c852
--- /dev/null
+++ b/client/packages/lowcoder-design/src/components/adminThemeVariables.ts
@@ -0,0 +1,8 @@
+import type { DefaultTheme } from "styled-components";
+
+type AdminTheme = DefaultTheme & { admin?: { variables: Record<string, string> } };
+
+// React theme context survives portals; inherited DOM variables do not.
+// Outside the Admin shell this contributes no styles.
+export const adminThemeVariables = ({ theme }: { theme: DefaultTheme }) =>
+  (theme as AdminTheme).admin?.variables;
diff --git a/client/packages/lowcoder-design/src/components/button.tsx b/client/packages/lowcoder-design/src/components/button.tsx
index 469c79f84..26183a255 100644
--- a/client/packages/lowcoder-design/src/components/button.tsx
+++ b/client/packages/lowcoder-design/src/components/button.tsx
@@ -5,6 +5,7 @@ import styled, { css } from "styled-components";
 import { Loading } from "./Loading";
 import * as React from "react";
 import { CSSProperties, forwardRef } from "react";
+import { adminThemeVariables } from "./adminThemeVariables";
 
 const buttonStyleConfig = {
   normal: css`
@@ -28,95 +29,95 @@ const buttonStyleConfig = {
   `,
   primary: css`
   &&& {
-      background: #4965f2;
-      border: 1px solid #4965f2;
-      color: #ffffff;
+      background: var(--admin-accent, #4965f2);
+      border: 1px solid var(--admin-accent, #4965f2);
+      color: var(--admin-on-accent, #ffffff);
 
       &.ant-btn-background-ghost {
-        background-color: #fafbff;
-        color: #4965f2;
-        border-color: #c9d1fc;
+        background-color: var(--admin-tint, #fafbff);
+        color: var(--admin-link, #4965f2);
+        border-color: var(--admin-line-hover, #c9d1fc);
 
         &:hover {
-          color: #315efb;
-          background-color: #f5faff;
-          border-color: #c2d6ff;
+          color: var(--admin-link-hover, #315efb);
+          background-color: var(--admin-hover, #f5faff);
+          border-color: var(--admin-line-hover, #c2d6ff);
         }
 
         &:focus {
-          color: #315efb;
-          background-color: #f5faff;
-          border-color: #c2d6ff;
+          color: var(--admin-link-hover, #315efb);
+          background-color: var(--admin-hover, #f5faff);
+          border-color: var(--admin-line-hover, #c2d6ff);
         }
       }
 
       &:focus {
-        background: #4965f2;
-        border: 1px solid #4965f2;
-        color: #ffffff;
+        background: var(--admin-accent, #4965f2);
+        border: 1px solid var(--admin-accent, #4965f2);
+        color: var(--admin-on-accent, #ffffff);
       }
 
       &:hover {
-        border: 1px solid #315efb;
-        background: #315efb;
-        color: #ffffff;
+        border: 1px solid var(--admin-accent-hover, #315efb);
+        background: var(--admin-accent-hover, #315efb);
+        color: var(--admin-on-accent, #ffffff);
       }
 
       :disabled {
         &:hover {
-          border: 1px solid #dbe1fd;
-          background: #dbe1fd;
-          color: #ffffff;
+          border: 1px solid var(--admin-line, #dbe1fd);
+          background: var(--admin-line, #dbe1fd);
+          color: var(--admin-on-accent, #ffffff);
           opacity: 1;
         }
 
-        border: 1px solid #dbe1fd;
-        background: #dbe1fd;
-        color: #ffffff;
+        border: 1px solid var(--admin-line, #dbe1fd);
+        background: var(--admin-line, #dbe1fd);
+        color: var(--admin-on-accent, #ffffff);
         opacity: 1;
       }
     }
   `,
   blue: css`
-    background-color: #fafbff;
-    color: #4965f2;
-    border-color: #c9d1fc;
+    background-color: var(--admin-tint, #fafbff);
+    color: var(--admin-link, #4965f2);
+    border-color: var(--admin-line-hover, #c9d1fc);
 
     &:hover {
-      color: #315efb;
-      background-color: #f5faff;
-      border-color: #c2d6ff;
+      color: var(--admin-link-hover, #315efb);
+      background-color: var(--admin-hover, #f5faff);
+      border-color: var(--admin-line-hover, #c2d6ff);
     }
 
     &:focus {
-      color: #315efb;
-      background-color: #f5faff;
-      border-color: #c2d6ff;
+      color: var(--admin-link-hover, #315efb);
+      background-color: var(--admin-hover, #f5faff);
+      border-color: var(--admin-line-hover, #c2d6ff);
     }
 
     :disabled,
     :disabled:hover {
-      background: #f9fbff;
+      background: var(--admin-hover, #f9fbff);
       border: 1px solid #dee9ff;
       border-radius: 4px;
     }
   `,
   link: css`
     &&& {
-      color: #4955f2;
-      border-color: #c9d1fc;
-      background-color: #fafbff;
+      color: var(--admin-link, #4955f2);
+      border-color: var(--admin-line-hover, #c9d1fc);
+      background-color: var(--admin-tint, #fafbff);
   
       &:hover {
-        color: #315efb;
-        border-color: #c2d6ff;
-        background-color: #f9fbff;
+        color: var(--admin-link-hover, #315efb);
+        border-color: var(--admin-line-hover, #c2d6ff);
+        background-color: var(--admin-hover, #f9fbff);
       }
   
       &:focus {
-        color: #315efb;
-        border-color: #c2d6ff;
-        background-color: #f9fbff;
+        color: var(--admin-link-hover, #315efb);
+        border-color: var(--admin-line-hover, #c2d6ff);
+        background-color: var(--admin-hover, #f9fbff);
       }
     }
   `,
@@ -143,6 +144,7 @@ const buttonStyleConfig = {
 export type TacoButtonType = keyof typeof buttonStyleConfig;
 
 const StyledAntdButton = styled(Button)<{ $buttonType: TacoButtonType; $loading: boolean }>`
+  ${adminThemeVariables};
   ${(props) => buttonStyleConfig[props.$buttonType]};
   display: flex;
   align-items: center;
@@ -189,8 +191,8 @@ const TacoButton = forwardRef(
     let loadingBackground;
     let loadingColor;
     if (buttonType === "link") {
-      loadingBackground = "#fafbff";
-      loadingColor = "#3377FF";
+      loadingBackground = "var(--admin-tint, #fafbff)";
+      loadingColor = "var(--admin-accent-hover, #3377FF)";
     } else if (buttonType === "delete") {
       loadingBackground = "#fef4f4";
       loadingColor = "#f73131";
@@ -227,9 +229,9 @@ export const BigButtonStyle = styled.button`
   height: 30px;
   width: 280px;
   margin-right: 2px;
-  color: #4965f2;
-  border: 1px solid #c9d1fc;
-  background: #fafbff;
+  color: var(--admin-accent, #4965f2);
+  border: 1px solid var(--admin-line-hover, #c9d1fc);
+  background: var(--admin-tint, #fafbff);
   border-radius: 4px;
 
   font-size: 13px;
@@ -239,9 +241,9 @@ export const BigButtonStyle = styled.button`
   cursor: pointer;
 
   &:hover {
-    color: #3377ff;
-    border: 1px solid #c2d6ff;
-    background: #f9fbff;
+    color: var(--admin-accent-hover, #3377ff);
+    border: 1px solid var(--admin-line-hover, #c2d6ff);
+    background: var(--admin-hover, #f9fbff);
     transition: all 0.4s ease;
   }
 `;
@@ -270,7 +272,7 @@ export const RedButton = styled(BigButtonStyle)`
 const StyledAddButton = styled.button`
   display: flex;
   align-items: center;
-  color: #4965f2;
+  color: var(--admin-accent, #4965f2);
   font-size: 13px;
   line-height: 13px;
   gap: 4px;
@@ -281,17 +283,17 @@ const StyledAddButton = styled.button`
   padding: 0;
 
   &:hover {
-    color: #315efb;
+    color: var(--admin-accent-hover, #315efb);
     background: white;
 
     svg g {
-      stroke: #315efb;
+      stroke: var(--admin-accent-hover, #315efb);
     }
   }
 
   &:focus {
     background: white;
-    color: #315efb;
+    color: var(--admin-accent-hover, #315efb);
   }
 
   svg {
diff --git a/client/packages/lowcoder/admin-branding-preview.html b/client/packages/lowcoder/admin-branding-preview.html
new file mode 100644
index 000000000..388cd6258
--- /dev/null
+++ b/client/packages/lowcoder/admin-branding-preview.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<html lang="en">
+  <head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Admin branding preview</title></head>
+  <body style="margin:0"><div id="root"></div><script type="module" src="/src/dev-utils/admin-branding-preview.tsx"></script></body>
+</html>
diff --git a/client/packages/lowcoder/src/components/layout/AdminBrand.tsx b/client/packages/lowcoder/src/components/layout/AdminBrand.tsx
new file mode 100644
index 000000000..abe558300
--- /dev/null
+++ b/client/packages/lowcoder/src/components/layout/AdminBrand.tsx
@@ -0,0 +1,24 @@
+import type { BrandingConfig } from "api/enterpriseApi";
+import { Logo, LogoHome } from "assets/images";
+import { trans } from "i18n";
+import { buildMaterialPreviewURL } from "util/materialUtils";
+import styled from "styled-components";
+
+const BrandLogo = styled.img`
+  height: 28px;
+  max-width: 100%;
+  object-fit: contain;
+`;
+
+export function AdminBrand({ branding, showName }: { branding?: BrandingConfig; showName: boolean }) {
+  const { logo, standardTitle } = branding?.config_set || {};
+  const name = standardTitle || trans("productName");
+  if (logo) return <BrandLogo src={branding?.orgId ? buildMaterialPreviewURL(logo) : logo} alt={name} />;
+  if (!showName && !standardTitle) return <LogoHome />;
+  return (
+    <span className="admin-brand-name">
+      {!standardTitle && <span className="admin-brand-mark"><Logo /></span>}
+      <span className="admin-brand-title" title={name}>{name}</span>
+    </span>
+  );
+}
diff --git a/client/packages/lowcoder/src/components/layout/AdminSidebar.tsx b/client/packages/lowcoder/src/components/layout/AdminSidebar.tsx
new file mode 100644
index 000000000..df9c455dd
--- /dev/null
+++ b/client/packages/lowcoder/src/components/layout/AdminSidebar.tsx
@@ -0,0 +1,24 @@
+import styled from "styled-components";
+import SideBar from "./SideBar";
+import { adminThemeVariables } from "lowcoder-design/src/components/adminThemeVariables";
+
+export const AdminSidebar = styled(SideBar)`
+  ${adminThemeVariables};
+  background: var(--admin-sidebar, #f8f3fb);
+  color: var(--admin-sidebar-text, #281a30);
+  font-family: var(--admin-font);
+  padding: 20px 14px;
+  overflow-y: auto;
+  flex-shrink: 0;
+  border-right: 1px solid var(--admin-line);
+
+  .sidebar-section:not(:last-child)::after {
+    content: "";
+    display: block;
+    width: calc(100% - 24px);
+    height: 1px;
+    background: var(--admin-line);
+    margin: 12px auto;
+  }
+`;
+
diff --git a/client/packages/lowcoder/src/components/layout/BRANDING.md b/client/packages/lowcoder/src/components/layout/BRANDING.md
new file mode 100644
index 000000000..9ddf52dcf
--- /dev/null
+++ b/client/packages/lowcoder/src/components/layout/BRANDING.md
@@ -0,0 +1,32 @@
+# Admin branding
+
+The Admin shell uses the existing Enterprise branding API and Redux state. It does
+not introduce another branding API, setting or database representation.
+
+- `getBrandingSetting` selects the current workspace configuration, then the global
+  configuration. These are complete configurations, not a field-by-field merge.
+  This preserves explicit `false` settings and the origin of logo references
+  (workspace material IDs versus global URLs).
+- `getAdminAppearance` translates the settings into Ant Design tokens and
+  `--admin-*` CSS variables. New Admin components should use these instead of fixed
+  Lowcoder colors. Semantic error/success colors and app artwork remain independent.
+- Header and sidebar settings override the generated palette. The primary color
+  remains exact; text on that color and links get readable foreground colors.
+- Stored font names such as `Open+Sans` are normalized for CSS. The existing app
+  font loader loads the selected font. No custom font is required for the default
+  locally bundled Ubuntu font.
+- The scoped styled-components theme carries variables into custom portal content.
+  The nested Ant App supplies themed imperative dialogs/messages and restores the
+  outer instances when leaving Admin. The app editor retains its own theme.
+- Existing custom CSS hooks (`top-header`, `sidebar`, `sidebar-item`,
+  `sidebar-section`, `main-content`) and the workspace preload CSS path remain.
+
+With the Vite development server running, `/admin-branding-preview.html` exercises
+the real shell, navigation, cards, tables and dialogs with sample company settings.
+It never saves account settings or calls the branding API, and is not a production
+build entry. Use it to check different brands, responsive navigation and custom CSS.
+
+Regression coverage is in `adminAppearance.test.ts`, `adminTheme.test.tsx` and
+`redux/sagas/enterpriseBranding.test.ts`, including workspace switches and API
+failures. Branding API persistence still requires an Enterprise backend for a live
+end-to-end check.
diff --git a/client/packages/lowcoder/src/components/layout/Layout.tsx b/client/packages/lowcoder/src/components/layout/Layout.tsx
index cfd72de1d..d459ec018 100644
--- a/client/packages/lowcoder/src/components/layout/Layout.tsx
+++ b/client/packages/lowcoder/src/components/layout/Layout.tsx
@@ -5,42 +5,18 @@ import * as React from "react";
 import { ReactElement, useState, useEffect } from "react";
 import { HelpDropdown } from "pages/common/help";
 import MainContent from "components/layout/MainContent";
-import SideBar from "components/layout/SideBar";
+import { AdminSidebar } from "./AdminSidebar";
 import { CNMainContent, CNSidebar } from "constants/styleSelectors";
 import { SideBarSection, SideBarSectionProps } from "./SideBarSection";
 import styled from "styled-components";
-import { useSelector } from "react-redux";
 import { MenuOutlined } from "@ant-design/icons";
 import { Drawer, Button } from "antd";
 import { trans } from "i18n";
-import { getBrandingSetting } from "@lowcoder-ee/redux/selectors/enterpriseSelectors";
 
 type LayoutProps = {
   sections: SideBarSectionProps[];
 };
 
-const SideBarV2 = styled(SideBar)<{
-  $bgColor?: string,
-  $fontColor?: string,
-  $activeBgColor?: string,
-  $activeFontColor?: string,
-}>`
-  background: ${props => props.$bgColor ? props.$bgColor : '#f8f3fb'} !important;
-  ${props => props.$fontColor && `color: ${props.$fontColor}`};
-  padding: 20px 14px;
-  overflow-y: auto;
-  flex-shrink: 0;
-  border-right: 1px solid #e9e0ee;
-
-  .sidebar-section:not(:last-child)::after {
-    content: "";
-    display: block;
-    width: calc(100% - 24px);
-    height: 1px;
-    background: #e9e0ee;
-    margin: 12px auto;
-  }
-`;
 
 const MobileMenuButton = styled(Button)`
   display: none;
@@ -65,7 +41,6 @@ const DrawerContentWrapper = styled.div`
 export function Layout(props: LayoutProps) {
   const [drawerVisible, setDrawerVisible] = useState(false);
   const [isMobile, setIsMobile] = useState(() => window.innerWidth <= 720);
-  const brandingSettings = useSelector(getBrandingSetting);
 
   const toggleDrawer = () => {
     setDrawerVisible(!drawerVisible);
@@ -134,14 +109,10 @@ export function Layout(props: LayoutProps) {
         destroyOnHidden // Ensure drawer content is removed when closed
       >
         <DrawerContentWrapper>
-          <SideBarV2
+          <AdminSidebar
             width="100%"
             style={{ height: "100%" }}
             className={CNSidebar}
-            $bgColor={brandingSettings?.config_set?.adminSidebarColor}
-            $fontColor={brandingSettings?.config_set?.adminSidebarFontColor}
-            $activeBgColor={brandingSettings?.config_set?.adminSidebarActiveBgColor}
-            $activeFontColor={brandingSettings?.config_set?.adminSidebarActiveFontColor}
           >
             {mobileSections
               .filter((section) => section.items.length > 0)
@@ -152,26 +123,22 @@ export function Layout(props: LayoutProps) {
                   onItemClick={handleMenuClick} // Pass handler to close the drawer
                 />
               ))}
-          </SideBarV2>
+          </AdminSidebar>
         </DrawerContentWrapper>
       </Drawer>
 
       {/* Desktop Layout */}
       <AntdLayout>
         {!isMobile && (
-          <SideBarV2
+          <AdminSidebar
             className={`${CNSidebar} desktop-only`}
-            $bgColor={brandingSettings?.config_set?.adminSidebarColor}
-            $fontColor={brandingSettings?.config_set?.adminSidebarFontColor}
-            $activeBgColor={brandingSettings?.config_set?.adminSidebarActiveBgColor}
-            $activeFontColor={brandingSettings?.config_set?.adminSidebarActiveFontColor}
           >
             {desktopSections
               .filter((section) => section.items.length > 0)
               .map((section, index) => (
                 <SideBarSection key={index} {...section} />
               ))}
-          </SideBarV2>
+          </AdminSidebar>
         )}
         <MainContent id="admin-main" tabIndex={-1} className={CNMainContent}>
           <Switch>{routes}</Switch>
diff --git a/client/packages/lowcoder/src/components/layout/SideBarItem.tsx b/client/packages/lowcoder/src/components/layout/SideBarItem.tsx
index 1e052307e..17b417dc8 100644
--- a/client/packages/lowcoder/src/components/layout/SideBarItem.tsx
+++ b/client/packages/lowcoder/src/components/layout/SideBarItem.tsx
@@ -30,11 +30,11 @@ const Wrapper = styled.button<{
 
   &:hover {
     background: ${(props) => (props.$selected ? (
-      `${props.$selectedBgColor ? props.$selectedBgColor : '#eadcf3'}`
+      `${props.$selectedBgColor ? props.$selectedBgColor : 'var(--admin-sidebar-active, #eadcf3)'}`
     ) : (
-      `${props.$selectedBgColor ? props.$selectedBgColor : '#f0e6f6'}`
+      `${props.$selectedBgColor ? props.$selectedBgColor : 'var(--admin-sidebar-active, #f0e6f6)'}`
     ))};
-    color: ${(props) => props.$selectedFontColor ? props.$selectedFontColor : '#683e86'}
+    color: ${(props) => props.$selectedFontColor ? props.$selectedFontColor : 'var(--admin-sidebar-active-text, #683e86)'}
   }
 
   svg {
@@ -44,8 +44,8 @@ const Wrapper = styled.button<{
   ${(props) =>
     props.$selected &&
     css`
-      color: ${props.$selectedFontColor ? props.$selectedFontColor : '#683e86'};
-      background: ${props.$selectedBgColor ? props.$selectedBgColor : '#eadcf3'};
+      color: ${props.$selectedFontColor ? props.$selectedFontColor : 'var(--admin-sidebar-active-text, #683e86)'};
+      background: ${props.$selectedBgColor ? props.$selectedBgColor : 'var(--admin-sidebar-active, #eadcf3)'};
     `}
 `;
 
diff --git a/client/packages/lowcoder/src/components/layout/SubSideBar.tsx b/client/packages/lowcoder/src/components/layout/SubSideBar.tsx
index 37cf49b0d..a26ad53ed 100644
--- a/client/packages/lowcoder/src/components/layout/SubSideBar.tsx
+++ b/client/packages/lowcoder/src/components/layout/SubSideBar.tsx
@@ -7,7 +7,8 @@ const Wrapper = styled.div`
   flex-shrink: 0;
   overflow-y: auto;
   height: 100%;
-  background: #fdfbfe;
+  background: var(--admin-sidebar, #fdfbfe);
+  color: var(--admin-sidebar-text, #222222);
   border-right: 1px solid var(--admin-line, #e9e0ee);
   box-sizing: border-box;
   border-radius: 2px;
@@ -16,13 +17,18 @@ const Wrapper = styled.div`
   h2 {
     font-weight: 500;
     font-size: 20px;
-    color: #222222;
+    color: inherit;
     margin: 0 0 20px 14px;
   }
   summary { list-style: none; pointer-events: none; }
   summary::-webkit-details-marker { display: none; }
 
-  .ant-menu { background: transparent; }
+  .ant-menu { background: transparent; color: inherit; }
+  .ant-menu .ant-menu-item { color: var(--admin-sidebar-text); }
+  .ant-menu .ant-menu-item-selected, .ant-menu .ant-menu-item:hover {
+    background: var(--admin-sidebar-active);
+    color: var(--admin-sidebar-active-text);
+  }
   && .ant-menu-inline .ant-menu-item {
     display: flex;
     align-items: center;
diff --git a/client/packages/lowcoder/src/components/layout/adminAppearance.test.ts b/client/packages/lowcoder/src/components/layout/adminAppearance.test.ts
new file mode 100644
index 000000000..73ef92383
--- /dev/null
+++ b/client/packages/lowcoder/src/components/layout/adminAppearance.test.ts
@@ -0,0 +1,43 @@
+import { colord } from "colord";
+import { getAdminAppearance } from "./adminAppearance";
+
+describe("Admin branding", () => {
+  it("uses Lowcoder defaults when no company brand is configured", () => {
+    const appearance = getAdminAppearance();
+    expect(appearance.colors.accent).toBe("#8050a0");
+    expect(appearance.fontFamily).toContain("Lowcoder Ubuntu");
+    expect(getAdminAppearance({ mainBrandingColor: "invalid" })).toEqual(appearance);
+  });
+
+  it.each(["#007f68", "#2356c4", "#ffdc00", "#888888"])("carries %s into controls, links and page decoration", (mainBrandingColor) => {
+    const { colors, theme, variables } = getAdminAppearance({ mainBrandingColor });
+    expect(theme.token?.colorPrimary).toBe(mainBrandingColor);
+    expect(variables["--admin-accent"]).toBe(mainBrandingColor);
+    expect(colors.tint).not.toBe(getAdminAppearance().colors.tint);
+    expect(theme.components?.Menu?.itemSelectedColor).toBe(colors.link);
+    expect(theme.components?.Table?.rowHoverBg).toBe(colors.hover);
+    expect(colord(colors.link).contrast("#fff")).toBeGreaterThanOrEqual(4.5);
+    expect(colord(colors.onAccent).contrast(mainBrandingColor)).toBeGreaterThanOrEqual(4.5);
+    expect(colord(colors.onAccent).contrast(colors.accentHover)).toBeGreaterThanOrEqual(4.5);
+    expect(colord(colors.linkHover).contrast("#fff")).toBeGreaterThanOrEqual(4.5);
+  });
+
+  it("honors every explicit Admin navigation color independently of the accent", () => {
+    const { colors } = getAdminAppearance({
+      mainBrandingColor: "#007f68", appHeaderColor: "#ffffff",
+      adminSidebarColor: "#101928", adminSidebarFontColor: "#eeeeee",
+      adminSidebarActiveBgColor: "#ffdc00", adminSidebarActiveFontColor: "#222222",
+    });
+    expect(colors).toMatchObject({
+      accent: "#007f68", header: "#ffffff", headerText: "#000000",
+      sidebar: "#101928", sidebarText: "#eeeeee",
+      sidebarActive: "#ffdc00", sidebarActiveText: "#222222",
+    });
+  });
+
+  it.each(["Open+Sans", "Playfair+Display"])("normalizes the saved font %s", (font) => {
+    const { fontFamily, theme } = getAdminAppearance({ font });
+    expect(fontFamily).toBe(`"${font.replace(/\+/g, " ")}", sans-serif`);
+    expect(theme.token?.fontFamily).toBe(fontFamily);
+  });
+});
diff --git a/client/packages/lowcoder/src/components/layout/adminAppearance.ts b/client/packages/lowcoder/src/components/layout/adminAppearance.ts
new file mode 100644
index 000000000..05c1e59da
--- /dev/null
+++ b/client/packages/lowcoder/src/components/layout/adminAppearance.ts
@@ -0,0 +1,99 @@
+import type { ThemeConfig } from "antd";
+import type { BrandingSettings } from "api/enterpriseApi";
+import { colord, extend } from "colord";
+import a11y from "colord/plugins/a11y";
+import mix from "colord/plugins/mix";
+import names from "colord/plugins/names";
+
+extend([a11y, mix, names]);
+
+const defaultFont = "'Lowcoder Ubuntu', Ubuntu, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif";
+const onColor = (background: string) =>
+  colord(background).contrast("#fff") >= colord(background).contrast("#000000") ? "#ffffff" : "#000000";
+
+// Keep the configured primary color exact. Links need a readable variant on white,
+// including when a company's primary color is yellow or another very light color.
+function linkColor(color: string) {
+  let result = colord(color);
+  for (let i = 0; i < 20 && result.contrast("#fff") < 4.5; i++) result = result.darken(0.05);
+  return result.toHex();
+}
+
+export function getAdminAppearance(branding: BrandingSettings = {}) {
+  const customAccent = colord(branding.mainBrandingColor || "").isValid();
+  const accent = customAccent ? branding.mainBrandingColor! : "#8050a0";
+  const foreground = onColor(accent);
+  const link = customAccent ? linkColor(accent) : "#754394";
+  const tint = (white: number) => colord(accent).mix("#fff", white).toHex();
+  const font = branding.font?.trim().replace(/\+/g, " ");
+  const fontFamily = font ? `${JSON.stringify(font)}, sans-serif` : defaultFont;
+  const palette = {
+    accent,
+    accentHover: (foreground === "#ffffff" ? colord(accent).darken(0.08) : colord(accent).lighten(0.08)).toHex(),
+    onAccent: foreground,
+    link,
+    linkHover: colord(link).darken(0.06).toHex(),
+    ink: customAccent ? "#24252a" : "#281a30",
+    muted: customAccent ? "#6e7078" : "#786a80",
+    line: customAccent ? tint(0.84) : "#e9e0ee",
+    lineHover: customAccent ? tint(0.55) : "#c7a8dc",
+    paper: customAccent ? tint(0.98) : "#faf7fc",
+    surface: "#ffffff",
+    tint: customAccent ? tint(0.92) : "#f3eaf9",
+    hover: customAccent ? tint(0.96) : "#faf6fd",
+    focus: colord(link).alpha(0.6).toRgbString(),
+    header: branding.appHeaderColor || "#201329",
+    sidebar: branding.adminSidebarColor || (customAccent ? tint(0.97) : "#f8f3fb"),
+    sidebarActive: branding.adminSidebarActiveBgColor || (customAccent ? tint(0.87) : "#eadcf3"),
+    cover: customAccent ? colord(accent).mix("#171717", 0.65).toHex() : "#231629",
+  };
+  const colors = {
+    ...palette,
+    headerText: onColor(palette.header),
+    sidebarText: branding.adminSidebarFontColor || (colord(palette.sidebar).isDark() ? "#ffffff" : palette.ink),
+    sidebarActiveText: branding.adminSidebarActiveFontColor ||
+      (branding.adminSidebarActiveBgColor ? onColor(palette.sidebarActive) : palette.link),
+    coverText: onColor(palette.cover),
+  };
+  const variables: Record<string, string> = { "--admin-font": fontFamily, "--admin-radius": "16px" };
+  Object.entries(colors).forEach(([key, value]) => {
+    variables[`--admin-${key.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`)}`] = value;
+  });
+  const theme: ThemeConfig = {
+    // Scope Ant styles too: a nested Admin provider must not recolor the editor.
+    hashed: true,
+    token: {
+      colorPrimary: colors.accent,
+      colorLink: colors.link,
+      colorLinkHover: colors.linkHover,
+      colorTextLightSolid: colors.onAccent,
+      colorPrimaryText: colors.link,
+      colorPrimaryTextHover: colors.linkHover,
+      colorText: colors.ink,
+      colorTextSecondary: colors.muted,
+      colorBorder: colors.line,
+      colorBgLayout: colors.paper,
+      borderRadius: 10,
+      fontFamily,
+    },
+    components: {
+      Button: {
+        primaryShadow: "0 3px 8px #00000012", primaryColor: colors.onAccent,
+        defaultHoverColor: colors.link, defaultActiveColor: colors.linkHover,
+        colorPrimaryHover: colors.accentHover,
+      },
+      Pagination: { colorPrimary: colors.link, colorPrimaryHover: colors.linkHover },
+      Table: { headerBg: colors.paper, headerColor: colors.muted, rowHoverBg: colors.hover, cellPaddingBlock: 16 },
+      Menu: {
+        itemColor: colors.ink,
+        itemSelectedBg: colors.tint,
+        itemSelectedColor: colors.link,
+        itemHoverBg: colors.hover,
+        itemHoverColor: colors.link,
+        itemBorderRadius: 10,
+      },
+      Card: { borderRadiusLG: 16 },
+    },
+  };
+  return { colors, variables, theme, fontFamily };
+}
diff --git a/client/packages/lowcoder/src/components/layout/adminTheme.test.tsx b/client/packages/lowcoder/src/components/layout/adminTheme.test.tsx
new file mode 100644
index 000000000..509419c37
--- /dev/null
+++ b/client/packages/lowcoder/src/components/layout/adminTheme.test.tsx
@@ -0,0 +1,60 @@
+import { act, render, screen, waitFor } from "@testing-library/react";
+import App from "antd/es/app";
+import ConfigProvider from "antd/es/config-provider";
+import theme from "antd/es/theme";
+import { createPortal } from "react-dom";
+import { Provider } from "react-redux";
+import { createStore } from "redux";
+import GlobalInstances, { modalInstance } from "lowcoder-design/src/components/GlobalInstances";
+import { TacoButton } from "lowcoder-design/src/components/button";
+import { AdminTheme } from "./adminTheme";
+import { AdminBrand } from "./AdminBrand";
+
+const company = {
+  id: "company", orgId: "a",
+  config_set: { mainBrandingColor: "#007f68", font: "Open+Sans", standardTitle: "Acme Operations" },
+};
+const store = createStore(() => ({
+  ui: { users: { user: { currentOrgId: "a" } }, enterprise: { workspaceBranding: company } },
+}));
+function Tokens({ label }: { label: string }) {
+  const { token } = theme.useToken();
+  return <output aria-label={label}>{token.colorPrimary}|{token.fontFamily}</output>;
+}
+function Shell({ admin }: { admin: boolean }) {
+  return <Provider store={store}>
+    <ConfigProvider theme={{ token: { colorPrimary: "#123456", fontFamily: "Outer font" } }}>
+      <App>
+        <GlobalInstances />
+        {admin ? <AdminTheme>
+          <AdminBrand branding={company} showName />
+          {createPortal(<><Tokens label="portal" /><TacoButton buttonType="primary">Portal action</TacoButton></>, document.body)}
+        </AdminTheme> : <Tokens label="editor" />}
+      </App>
+    </ConfigProvider>
+  </Provider>;
+}
+
+it("brands portaled controls and imperative dialogs, then restores the outer theme on exit", async () => {
+  const view = render(<Shell admin />);
+  expect(screen.getByText("Acme Operations")).toBeInTheDocument();
+  expect(screen.queryByText("Lowcoder")).not.toBeInTheDocument();
+  expect(screen.getByLabelText("portal")).toHaveTextContent('#007f68|"Open Sans", sans-serif');
+  expect(getComputedStyle(screen.getByRole("button", { name: "Portal action" })).getPropertyValue("--admin-accent")).toBe("#007f68");
+  let dialog: ReturnType<typeof modalInstance.confirm>;
+  act(() => { dialog = modalInstance.confirm({ title: "Company dialog", content: <Tokens label="dialog" /> }); });
+  await waitFor(() => expect(screen.getByLabelText("dialog")).toHaveTextContent('#007f68|"Open Sans", sans-serif'));
+  act(() => dialog.destroy());
+  view.rerender(<Shell admin={false} />);
+  expect(screen.getByLabelText("editor")).toHaveTextContent("#123456|Outer font");
+  act(() => { dialog = modalInstance.confirm({ title: "Outer dialog", content: <Tokens label="outer-dialog" /> }); });
+  await waitFor(() => expect(screen.getByLabelText("outer-dialog")).toHaveTextContent("#123456|Outer font"));
+  act(() => dialog.destroy());
+});
+
+it("resolves workspace material logos and global URL logos without mixing their origins", () => {
+  const view = render(<AdminBrand showName branding={{ ...company, config_set: { logo: "material-id" } }} />);
+  expect(screen.getByRole("img")).toHaveAttribute("src", expect.stringContaining("/api/materials/material-id?type=preview"));
+  view.rerender(<AdminBrand showName branding={{ config_set: { logo: "https://example.com/logo.svg" } }} />);
+  expect(screen.getByRole("img")).toHaveAttribute("src", "https://example.com/logo.svg");
+});
diff --git a/client/packages/lowcoder/src/components/layout/adminTheme.tsx b/client/packages/lowcoder/src/components/layout/adminTheme.tsx
index ce3efe963..247a3237d 100644
--- a/client/packages/lowcoder/src/components/layout/adminTheme.tsx
+++ b/client/packages/lowcoder/src/components/layout/adminTheme.tsx
@@ -1,57 +1,38 @@
-import { ConfigProvider, ThemeConfig } from "antd";
-import { CSSProperties, PropsWithChildren, useMemo } from "react";
+import App from "antd/es/app";
+import ConfigProvider from "antd/es/config-provider";
+import { PropsWithChildren, useMemo } from "react";
 import { useSelector } from "react-redux";
 import { getBrandingSetting } from "redux/selectors/enterpriseSelectors";
-import styled from "styled-components";
+import styled, { ThemeProvider } from "styled-components";
+import GlobalInstances from "lowcoder-design/src/components/GlobalInstances";
+import { getAdminAppearance } from "./adminAppearance";
+import { adminThemeVariables } from "lowcoder-design/src/components/adminThemeVariables";
 import ubuntuRegular from "assets/fonts/ubuntu-400.woff2";
 import ubuntuMedium from "assets/fonts/ubuntu-500.woff2";
 import ubuntuBold from "assets/fonts/ubuntu-700.woff2";
 
-// Website brand tokens, scoped to the management area. The app canvas and editor
-// keep their own theme; enterprise branding continues to override the shell.
-export const adminTheme: ThemeConfig = {
-  token: {
-    colorPrimary: "#8050a0",
-    colorLink: "#754394",
-    colorText: "#281a30",
-    colorTextSecondary: "#786a80",
-    colorBorder: "#e5dce9",
-    colorBgLayout: "#faf7fc",
-    borderRadius: 10,
-    fontFamily: "'Lowcoder Ubuntu', Ubuntu, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
-  },
-  components: {
-    Button: { primaryShadow: "0 3px 8px #683e8618" },
-    Table: { headerBg: "#faf7fc", headerColor: "#786a80", rowHoverBg: "#faf6fd", cellPaddingBlock: 16 },
-    Menu: { itemSelectedBg: "#efe3f7", itemSelectedColor: "#683e86", itemBorderRadius: 10 },
-    Card: { borderRadiusLG: 16 },
-  },
-};
-
 const ThemeScope = styled.div`
+  ${adminThemeVariables};
   @font-face { font-family: 'Lowcoder Ubuntu'; src: url('${ubuntuRegular}') format('woff2'); font-weight: 400; font-display: swap; }
   @font-face { font-family: 'Lowcoder Ubuntu'; src: url('${ubuntuMedium}') format('woff2'); font-weight: 500; font-display: swap; }
   @font-face { font-family: 'Lowcoder Ubuntu'; src: url('${ubuntuBold}') format('woff2'); font-weight: 700; font-display: swap; }
-  --admin-ink: #281a30;
-  --admin-muted: #786a80;
-  --admin-accent: #8050a0;
-  --admin-line: #e9e0ee;
-  --admin-paper: #faf7fc;
-  --admin-tint: #f3eaf9;
-  --admin-radius: 16px;
-  font-family: 'Lowcoder Ubuntu', Ubuntu, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-family: var(--admin-font);
   color: var(--admin-ink);
   min-width: 0;
   height: 100%;
 
   .main-content { background: var(--admin-paper); min-width: 0; scrollbar-gutter: stable; }
-  .top-header { background-color: #201329; border-bottom: 1px solid #ffffff14; }
+  .top-header { background-color: var(--admin-header); border-bottom: 1px solid #ffffff14; }
   @media (max-width: 720px) {
     .top-header { padding-left: 60px; padding-right: 16px; }
     .top-header .ant-row { gap: 12px; margin: 0 !important; flex-wrap: nowrap; }
     .top-header .ant-col { padding: 0 !important; }
   }
-  .admin-brand-mark { display: flex; }
+  .admin-brand-name { display: flex; align-items: center; gap: 10px; color: var(--admin-header-text); font-size: 20px; font-weight: 500; min-width: 0; }
+  .admin-brand-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .admin-brand-mark { display: flex; flex-shrink: 0; }
+  .top-header > div:first-child, .top-header > div:first-child > a { min-width: 0; }
+  .top-header > div:last-child { flex-shrink: 0; margin-left: 16px; }
   .admin-brand-mark svg { width: 24px; height: 26px; }
   @media (max-width: 360px) {
     .top-header { padding-left: 54px; padding-right: 12px; }
@@ -59,24 +40,18 @@ const ThemeScope = styled.div`
     .admin-brand-name { font-size: 16px !important; gap: 6px !important; }
     .admin-brand-mark svg { width: 20px; height: 24px; }
   }
-  .ant-card { box-shadow: 0 4px 20px #39204e04; }
+  .ant-card { box-shadow: 0 4px 20px #00000004; }
   .ant-card-head { border-color: var(--admin-line); }
   .ant-table { color: var(--admin-ink); }
-  && .ant-table-thead > tr > th { background: #faf7fc; color: var(--admin-muted); font-size: 12px; font-weight: 500; height: 44px; }
+  && .ant-table-thead > tr > th { background: var(--admin-paper); color: var(--admin-muted); font-size: 12px; font-weight: 500; height: 44px; }
   && .ant-table-column-title { font-size: 12px; font-weight: 500; }
-  && .ant-table-tbody > tr:hover > td { background: #faf6fd; }
-  .ant-table-tbody > tr > td { border-color: #f0eaf3; }
+  && .ant-table-tbody > tr:hover > td { background: var(--admin-hover); }
+  .ant-table-tbody > tr > td { border-color: var(--admin-line); }
   && .ant-table-tbody button:not(:disabled) { opacity: 1; }
   .ant-table-row:focus-within .home-datasource-edit-button { opacity: 1; }
-  &&& [data-button-type='primary']:not(:disabled) {
-    background: var(--admin-accent);
-    border-color: var(--admin-accent);
-    color: white;
-  }
-  &&& [data-button-type='primary']:not(:disabled):hover { filter: brightness(0.92); }
   .ant-pagination { flex-wrap: wrap; row-gap: 8px; }
   :where(button, a, [role='button'], [tabindex='0']):focus-visible {
-    outline: 3px solid #b480de99;
+    outline: 3px solid var(--admin-focus);
     outline-offset: 3px;
   }
   @media (prefers-reduced-motion: reduce) {
@@ -86,17 +61,19 @@ const ThemeScope = styled.div`
 
 export function AdminTheme({ children }: PropsWithChildren) {
   const branding = useSelector(getBrandingSetting)?.config_set;
-  const theme = useMemo(() => ({
-    ...adminTheme,
-    token: { ...adminTheme.token,
-      ...(branding?.font ? { fontFamily: branding.font } : {}),
-      ...(branding?.mainBrandingColor ? { colorPrimary: branding.mainBrandingColor } : {}),
-    },
-  }), [branding?.font, branding?.mainBrandingColor]);
-  return <ConfigProvider theme={theme}><ThemeScope className="lowcoder-admin" style={{
-    fontFamily: branding?.font,
-    ...(branding?.mainBrandingColor ? { "--admin-accent": branding.mainBrandingColor } : {}),
-  } as CSSProperties}>{children}</ThemeScope></ConfigProvider>;
+  const appearance = useMemo(() => getAdminAppearance(branding), [branding]);
+  return (
+    <ConfigProvider theme={appearance.theme}>
+      <ThemeProvider theme={(outer) => ({ ...outer, admin: appearance })}>
+        <ThemeScope className="lowcoder-admin">
+          <App component={false}>
+            <GlobalInstances priority={1} />
+            {children}
+          </App>
+        </ThemeScope>
+      </ThemeProvider>
+    </ConfigProvider>
+  );
 }
 
 export const AdminPage = styled.div`
@@ -123,9 +100,9 @@ export const AdminPageHeader = styled.div`
 export const AdminSurface = styled.div`
   border: 1px solid var(--admin-line);
   border-radius: var(--admin-radius);
-  background: white;
+  background: var(--admin-surface);
   min-width: 0;
-  box-shadow: 0 6px 30px #39204e04;
+  box-shadow: 0 6px 30px #00000004;
 `;
 
 export const AdminCover = styled.div`
@@ -134,9 +111,9 @@ export const AdminCover = styled.div`
   padding: 28px 32px;
   margin-bottom: 24px;
   border-radius: 18px;
-  color: white;
-  background: radial-gradient(ellipse at 95% 10%, #754394 0%, transparent 60%), #231629;
-  h1 { position: relative; color: white; font-weight: 500; font-size: clamp(26px, 2.5vw, 36px); line-height: 1.2; letter-spacing: -0.035em; margin: 0; }
-  p { color: #e0cde9; margin: 10px 0 0; max-width: 670px; line-height: 1.6; }
+  color: var(--admin-cover-text);
+  background: var(--admin-cover);
+  h1 { position: relative; color: var(--admin-cover-text); font-weight: 500; font-size: clamp(26px, 2.5vw, 36px); line-height: 1.2; letter-spacing: -0.035em; margin: 0; }
+  p { color: var(--admin-cover-text); opacity: 0.8; margin: 10px 0 0; max-width: 670px; line-height: 1.6; }
   @media (max-width: 720px) { padding: 24px; }
 `;
diff --git a/client/packages/lowcoder/src/dev-utils/admin-branding-preview.tsx b/client/packages/lowcoder/src/dev-utils/admin-branding-preview.tsx
new file mode 100644
index 000000000..59237e30d
--- /dev/null
+++ b/client/packages/lowcoder/src/dev-utils/admin-branding-preview.tsx
@@ -0,0 +1,88 @@
+// Local visual regression fixture. Not included in the production build inputs.
+// Uses the real components with sample branding; never reads or writes an account.
+import "antd/dist/reset.css";
+import { useMemo, useState } from "react";
+import { createRoot } from "react-dom/client";
+import { Provider } from "react-redux";
+import { createStore } from "redux";
+import { MemoryRouter } from "react-router-dom";
+import { Button, Card, Drawer, Input, Menu, Select, Space, Table } from "antd";
+import { AppstoreOutlined, SearchOutlined, SettingOutlined, UserOutlined } from "@ant-design/icons";
+import type { BrandingSettings } from "api/enterpriseApi";
+import { AdminTheme } from "components/layout/adminTheme";
+import { AdminBrand } from "components/layout/AdminBrand";
+import { AdminSidebar } from "components/layout/AdminSidebar";
+import { SideBarItem } from "components/layout/SideBarItem";
+import SubSideBar from "components/layout/SubSideBar";
+import Header from "components/layout/Header";
+import { TacoButton } from "lowcoder-design/src/components/button";
+import { modalInstance } from "lowcoder-design/src/components/GlobalInstances";
+import { MarketplaceShell, MarketplaceGrid } from "pages/ApplicationV2/marketplace/marketplaceStyles";
+
+const brands: Record<string, BrandingSettings> = {
+  Lowcoder: {},
+  "Acme Green": {
+    standardTitle: "Acme Operations", mainBrandingColor: "#007f68", font: "Open+Sans",
+    appHeaderColor: "#102a26", adminSidebarColor: "#163a32", adminSidebarFontColor: "#e5f5ef",
+    adminSidebarActiveBgColor: "#ccebdd", adminSidebarActiveFontColor: "#123b2d",
+  },
+  "OEM Blue": {
+    standardTitle: "Northstar Company Operations", mainBrandingColor: "#2356c4", font: "Inter",
+    appHeaderColor: "#ffffff", adminSidebarColor: "#eef3fc", adminSidebarFontColor: "#293e61",
+    adminSidebarActiveBgColor: "#2356c4", adminSidebarActiveFontColor: "#ffffff",
+  },
+  "Bright Amber": { standardTitle: "Amber Studio", mainBrandingColor: "#ffdc00", font: "Playfair+Display" },
+};
+
+function Example({ page, setPage }: { page: string; setPage: (page: string) => void }) {
+  const names = ["Your apps", "Marketplace", "Settings"];
+  return <>{names.map((name) => <SideBarItem key={name} text={name} selected={page === name} onClick={() => setPage(name)} icon={({ style }) => name === "Settings" ? <SettingOutlined style={style} /> : <AppstoreOutlined style={style} />} />)}</>;
+}
+
+function Preview() {
+  const [brand, setBrand] = useState("Acme Green");
+  const [page, setPage] = useState("Marketplace");
+  const [drawer, setDrawer] = useState(false);
+  const [customCss, setCustomCss] = useState(false);
+  const branding = { id: "sample", orgId: "sample", config_set: brands[brand] };
+  const store = useMemo(() => createStore(() => ({
+    ui: { enterprise: { workspaceBranding: { id: "sample", orgId: "sample", config_set: brands[brand] } }, users: { user: { currentOrgId: "sample" } } },
+  })), [brand]);
+  return <Provider store={store}><MemoryRouter><AdminTheme>
+    {brands[brand].font && <link rel="stylesheet" href={`https://fonts.googleapis.com/css2?family=${brands[brand].font}:wght@400;500;700&display=swap`} />}
+    <div style={{ padding: "12px 20px", background: "#fff", borderBottom: "1px solid #ddd", display: "flex", flexWrap: "wrap", gap: 12, alignItems: "center" }}>
+      <strong>Branding preview</strong><span>Sample data · no settings are saved</span>
+      <Select aria-label="Brand" value={brand} onChange={setBrand} options={Object.keys(brands).map((value) => ({ value, label: value }))} style={{ width: 150 }} />
+      <Button onClick={() => setDrawer(true)}>Mobile menu</Button>
+      <Button onClick={() => modalInstance.confirm({ title: "Branded dialog", content: "Dialogs use the same company colors and font.", okText: "Continue" })}>Open dialog</Button>
+      <Button aria-pressed={customCss} onClick={() => setCustomCss(!customCss)}>Custom CSS</Button>
+    </div>
+    {customCss && <style>{`.lowcoder-admin .main-content { background: #eeeeee; } .lowcoder-admin .sidebar-item { border-radius: 0; }`}</style>}
+    <Header headerStart={<AdminBrand branding={branding} showName />} headerEnd={<UserOutlined style={{ color: "var(--admin-header-text)", fontSize: 20 }} />} />
+    <div style={{ display: "flex", minHeight: "calc(100vh - 116px)" }}>
+      <AdminSidebar className="sidebar fixture-desktop" style={{ height: "auto" }}><Example page={page} setPage={setPage} /></AdminSidebar>
+      <main className="main-content" style={{ flex: 1, minWidth: 0 }}>
+        {page === "Settings" ? <div style={{ display: "flex", height: "100%" }}>
+          <SubSideBar title="Settings"><Menu selectedKeys={["branding"]} items={[{ key: "workspace", label: "Workspaces" }, { key: "branding", label: "Branding" }, { key: "subscriptions", label: "Subscriptions" }]} /></SubSideBar>
+          <div style={{ padding: 32, flex: 1 }}><h1>Company branding</h1><Card title="Workspace identity"><p>Your company colors, typography and navigation settings.</p><TacoButton buttonType="primary">Save settings</TacoButton></Card></div>
+        </div> : <MarketplaceShell>
+          <div className="marketplace-heading"><div><div className="eyebrow">Build together</div><h1>{page}</h1><p className="intro">Discover useful apps and the people who build them.</p></div><Button type="primary">Share an app</Button></div>
+          <div className="tabs" role="tablist"><button role="tab" aria-selected>Community <span className="tab-count">24</span></button><button role="tab" aria-selected={false}>Local</button></div>
+          <div className="toolbar"><Input className="search" prefix={<SearchOutlined />} placeholder="Search apps, creators and categories" /><Select defaultValue="recent" options={[{ value: "recent", label: "Recently shared" }, { value: "name", label: "App name" }]} /></div>
+          <div className="categories">{["All apps", "Analytics", "Operations", "Customer support"].map((category, i) => <button key={category} aria-pressed={i === 0}>{category}</button>)}</div>
+          {page === "Your apps" ? <Table pagination={{ pageSize: 2 }} columns={[{ title: "App", dataIndex: "name" }, { title: "Owner", dataIndex: "owner" }]} dataSource={[{ key: "1", name: "Sales dashboard", owner: "Alex Morgan" }, { key: "2", name: "Customer support", owner: "Sam Chen" }, { key: "3", name: "Project tracker", owner: "Jamie Lee" }]} /> : <MarketplaceGrid $list={false}>
+            {["Sales dashboard", "Customer support", "Project tracker"].map((title, i) => <article className="marketplace-card" key={title}>
+              <div style={{ aspectRatio: "16 / 10", background: "var(--admin-tint)", display: "grid", placeItems: "center" }}><AppstoreOutlined style={{ fontSize: 48, color: "var(--admin-link)" }} /></div>
+              <div className="card-body"><div className="tags"><span className="tag">{i === 0 ? "Analytics" : "Operations"}</span></div><a className="title-link" href="#sample" onClick={(event) => event.preventDefault()}>{title}</a><p className="card-description">A shared workspace for your team’s daily work, with clear reports and useful insights.</p><div className="card-footer"><div className="creator-row"><span className="avatar">AM</span><span className="creator-name">Alex Morgan</span></div><Button type="link">Explore</Button></div></div>
+            </article>)}
+          </MarketplaceGrid>}
+          <Space style={{ marginTop: 24 }}><TacoButton buttonType="primary">Create app</TacoButton><TacoButton buttonType="blue">Import app</TacoButton></Space>
+        </MarketplaceShell>}
+      </main>
+    </div>
+    <Drawer placement="left" open={drawer} onClose={() => setDrawer(false)} title="Navigation" width={280} styles={{ body: { padding: 0 } }}><AdminSidebar className="sidebar" width="100%" style={{ height: "100%" }}><Example page={page} setPage={(value) => { setPage(value); setDrawer(false); }} /></AdminSidebar></Drawer>
+    <style>{`@media(max-width:720px){.fixture-desktop{display:none}.lowcoder-admin .top-header{padding-left:20px}}`}</style>
+  </AdminTheme></MemoryRouter></Provider>;
+}
+
+if (import.meta.env.DEV) createRoot(document.getElementById("root")!).render(<Preview />);
diff --git a/client/packages/lowcoder/src/i18n/locales/de.ts b/client/packages/lowcoder/src/i18n/locales/de.ts
index 81aa592e1..9563f5700 100644
--- a/client/packages/lowcoder/src/i18n/locales/de.ts
+++ b/client/packages/lowcoder/src/i18n/locales/de.ts
@@ -3,7 +3,7 @@ import { en } from "./en";
 export const de = {
   ...en,
   "marketplace": {
-    "eyebrow": "Mit Lowcoder erstellt",
+    "eyebrow": "Mit {brandName} erstellt",
     "title": "Inspiration für deine nächste App",
     "description": "Entdecke nützliche Apps, ihre Funktionsweise und die Menschen dahinter.",
     "community": "Community",
@@ -62,10 +62,10 @@ export const de = {
     "appsDescription": "Deine Apps, Module und Ordner. Entwickle etwas, das die Arbeit leichter macht.",
     "folderDescription": "Organisiere zusammengehörige Apps. Öffne einen Ordner, um seinen Inhalt zu sehen.",
     "trashDescription": "Gelöschte Apps prüfen, wiederherstellen oder endgültig entfernen.",
-    "marketplaceDescription": "Inspiration für dein nächstes Projekt. Entdecke Apps, die mit Lowcoder entwickelt wurden.",
+    "marketplaceDescription": "Inspiration für dein nächstes Projekt. Entdecke Apps, die mit {brandName} entwickelt wurden.",
     "datasourceDescription": "Verbinde Datenbanken und Dienste und nutze sie im gesamten Arbeitsbereich.",
     "queriesDescription": "Erstelle, teste und teile wiederverwendbare Abfragen für deine Apps.",
-    "newsDescription": "Ideen, Produktneuigkeiten und praktische Tipps für Lowcoder.",
+    "newsDescription": "Ideen, Produktneuigkeiten und praktische Tipps für {brandName}.",
     "profileDescription": "Verwalte dein Profil und deine persönlichen Einstellungen.",
     "blogPosts": "Aus dem Blog",
     "videos": "Ansehen und lernen",
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
index 130abcb42..bf567b1a9 100644
--- a/client/packages/lowcoder/src/i18n/locales/en.ts
+++ b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -2,7 +2,7 @@
 
 export const en = {
   "marketplace": {
-    "eyebrow": "Made with Lowcoder",
+    "eyebrow": "Made with {brandName}",
     "title": "Find your next inspiration",
     "description": "Explore useful apps, discover how they work, and meet the people who built them.",
     "community": "Community",
@@ -61,10 +61,10 @@ export const en = {
     "appsDescription": "Your apps, modules and folders. Build something that makes work better.",
     "folderDescription": "Keep related apps together. Open a folder to explore what is inside.",
     "trashDescription": "Review deleted apps. Restore what you need, or remove it permanently.",
-    "marketplaceDescription": "A little inspiration for your next build. Explore apps made with Lowcoder.",
+    "marketplaceDescription": "A little inspiration for your next build. Explore apps made with {brandName}.",
     "datasourceDescription": "Connect your databases and services. Use them across your workspace.",
     "queriesDescription": "Build, test and share reusable queries across your apps.",
-    "newsDescription": "Ideas, product updates and practical ways to build with Lowcoder.",
+    "newsDescription": "Ideas, product updates and practical ways to build with {brandName}.",
     "profileDescription": "Make yourself at home. Manage your profile and personal preferences.",
     "blogPosts": "From the blog",
     "videos": "Watch and learn",
diff --git a/client/packages/lowcoder/src/i18n/locales/es.ts b/client/packages/lowcoder/src/i18n/locales/es.ts
index c8b853f03..461be04c4 100644
--- a/client/packages/lowcoder/src/i18n/locales/es.ts
+++ b/client/packages/lowcoder/src/i18n/locales/es.ts
@@ -3,7 +3,7 @@ import { en } from "./en";
 export const es = {
   ...en,
   "marketplace": {
-    "eyebrow": "Creado con Lowcoder",
+    "eyebrow": "Creado con {brandName}",
     "title": "Encuentra tu próxima inspiración",
     "description": "Descubre apps útiles, cómo funcionan y las personas que las crearon.",
     "community": "Comunidad",
@@ -62,10 +62,10 @@ export const es = {
     "appsDescription": "Tus apps, módulos y carpetas. Crea algo que facilite el trabajo.",
     "folderDescription": "Agrupa las apps relacionadas. Abre una carpeta para explorar su contenido.",
     "trashDescription": "Revisa las apps eliminadas. Restaura las que necesites o elimínalas definitivamente.",
-    "marketplaceDescription": "Inspiración para tu próximo proyecto. Explora apps creadas con Lowcoder.",
+    "marketplaceDescription": "Inspiración para tu próximo proyecto. Explora apps creadas con {brandName}.",
     "datasourceDescription": "Conecta tus bases de datos y servicios para usarlos en todo tu espacio de trabajo.",
     "queriesDescription": "Crea, prueba y comparte consultas reutilizables entre tus apps.",
-    "newsDescription": "Ideas, novedades y formas prácticas de crear con Lowcoder.",
+    "newsDescription": "Ideas, novedades y formas prácticas de crear con {brandName}.",
     "profileDescription": "Gestiona tu perfil y tus preferencias personales.",
     "blogPosts": "Desde el blog",
     "videos": "Mira y aprende",
diff --git a/client/packages/lowcoder/src/i18n/locales/it.ts b/client/packages/lowcoder/src/i18n/locales/it.ts
index f4fbbb84c..519ad3db2 100644
--- a/client/packages/lowcoder/src/i18n/locales/it.ts
+++ b/client/packages/lowcoder/src/i18n/locales/it.ts
@@ -3,7 +3,7 @@ import { en } from "./en";
 export const it = {
   ...en,
   "marketplace": {
-    "eyebrow": "Creato con Lowcoder",
+    "eyebrow": "Creato con {brandName}",
     "title": "Trova la tua prossima ispirazione",
     "description": "Scopri app utili, come funzionano e le persone che le hanno create.",
     "community": "Community",
@@ -62,10 +62,10 @@ export const it = {
     "appsDescription": "Le tue app, i tuoi moduli e le tue cartelle. Crea qualcosa che migliori il lavoro.",
     "folderDescription": "Raggruppa le app correlate. Apri una cartella per esplorarne il contenuto.",
     "trashDescription": "Controlla le app eliminate. Ripristinale o rimuovile definitivamente.",
-    "marketplaceDescription": "Ispirazione per il tuo prossimo progetto. Esplora le app create con Lowcoder.",
+    "marketplaceDescription": "Ispirazione per il tuo prossimo progetto. Esplora le app create con {brandName}.",
     "datasourceDescription": "Collega database e servizi e usali nel tuo spazio di lavoro.",
     "queriesDescription": "Crea, prova e condividi query riutilizzabili tra le tue app.",
-    "newsDescription": "Idee, novità e consigli pratici per creare con Lowcoder.",
+    "newsDescription": "Idee, novità e consigli pratici per creare con {brandName}.",
     "profileDescription": "Gestisci il tuo profilo e le tue preferenze personali.",
     "blogPosts": "Dal blog",
     "videos": "Guarda e impara",
diff --git a/client/packages/lowcoder/src/i18n/locales/pt.ts b/client/packages/lowcoder/src/i18n/locales/pt.ts
index b5aa3d371..6b3d54c7d 100644
--- a/client/packages/lowcoder/src/i18n/locales/pt.ts
+++ b/client/packages/lowcoder/src/i18n/locales/pt.ts
@@ -3,7 +3,7 @@ import { en } from "./en";
 export const pt = {
   ...en,
   "marketplace": {
-    "eyebrow": "Criado com Lowcoder",
+    "eyebrow": "Criado com {brandName}",
     "title": "Encontre sua próxima inspiração",
     "description": "Explore apps úteis, veja como funcionam e conheça quem as criou.",
     "community": "Comunidade",
@@ -62,10 +62,10 @@ export const pt = {
     "appsDescription": "Suas apps, módulos e pastas. Crie algo que melhore o trabalho.",
     "folderDescription": "Agrupe apps relacionadas. Abra uma pasta para explorar o conteúdo.",
     "trashDescription": "Revise as apps excluídas. Restaure o que precisar ou remova permanentemente.",
-    "marketplaceDescription": "Inspiração para seu próximo projeto. Explore apps criadas com Lowcoder.",
+    "marketplaceDescription": "Inspiração para seu próximo projeto. Explore apps criadas com {brandName}.",
     "datasourceDescription": "Conecte bancos de dados e serviços e use-os em seu espaço de trabalho.",
     "queriesDescription": "Crie, teste e compartilhe consultas reutilizáveis entre suas apps.",
-    "newsDescription": "Ideias, novidades e dicas práticas para criar com Lowcoder.",
+    "newsDescription": "Ideias, novidades e dicas práticas para criar com {brandName}.",
     "profileDescription": "Gerencie seu perfil e suas preferências pessoais.",
     "blogPosts": "Do blog",
     "videos": "Assista e aprenda",
diff --git a/client/packages/lowcoder/src/i18n/locales/ru.ts b/client/packages/lowcoder/src/i18n/locales/ru.ts
index 765b71fe3..2aaa1efdd 100644
--- a/client/packages/lowcoder/src/i18n/locales/ru.ts
+++ b/client/packages/lowcoder/src/i18n/locales/ru.ts
@@ -3,7 +3,7 @@ import { en } from "./en";
 export const ru = {
   ...en,
   "marketplace": {
-    "eyebrow": "Создано с Lowcoder",
+    "eyebrow": "Создано с {brandName}",
     "title": "Найдите вдохновение для новой идеи",
     "description": "Изучайте полезные приложения, их возможности и знакомьтесь с авторами.",
     "community": "Сообщество",
@@ -62,10 +62,10 @@ export const ru = {
     "appsDescription": "Ваши приложения, модули и папки. Создавайте то, что делает работу удобнее.",
     "folderDescription": "Объединяйте связанные приложения. Откройте папку, чтобы просмотреть её содержимое.",
     "trashDescription": "Просматривайте удалённые приложения. Восстанавливайте нужные или удаляйте окончательно.",
-    "marketplaceDescription": "Идеи для вашего следующего проекта. Изучайте приложения, созданные с Lowcoder.",
+    "marketplaceDescription": "Идеи для вашего следующего проекта. Изучайте приложения, созданные с {brandName}.",
     "datasourceDescription": "Подключайте базы данных и сервисы для использования в рабочем пространстве.",
     "queriesDescription": "Создавайте, тестируйте и делитесь запросами для повторного использования в приложениях.",
-    "newsDescription": "Идеи, обновления продукта и практические советы по работе с Lowcoder.",
+    "newsDescription": "Идеи, обновления продукта и практические советы по работе с {brandName}.",
     "profileDescription": "Управляйте своим профилем и личными настройками.",
     "blogPosts": "Из блога",
     "videos": "Смотрите и учитесь",
diff --git a/client/packages/lowcoder/src/i18n/locales/zh.ts b/client/packages/lowcoder/src/i18n/locales/zh.ts
index dd2f0ee6b..2e2ebbe81 100644
--- a/client/packages/lowcoder/src/i18n/locales/zh.ts
+++ b/client/packages/lowcoder/src/i18n/locales/zh.ts
@@ -4,7 +4,7 @@ import { en } from "./en";
 export const zh = {
   ...en,
   "marketplace": {
-    "eyebrow": "使用 Lowcoder 构建",
+    "eyebrow": "使用 {brandName} 构建",
     "title": "寻找下一份灵感",
     "description": "探索实用应用，了解其功能，并认识背后的创作者。",
     "community": "社区",
@@ -63,10 +63,10 @@ export const zh = {
     "appsDescription": "管理应用、模块和文件夹，构建让工作更轻松的工具。",
     "folderDescription": "将相关应用整理在一起，打开文件夹查看内容。",
     "trashDescription": "查看已删除的应用，恢复所需应用或将其永久删除。",
-    "marketplaceDescription": "为下一个项目寻找灵感，探索使用 Lowcoder 构建的应用。",
+    "marketplaceDescription": "为下一个项目寻找灵感，探索使用 {brandName} 构建的应用。",
     "datasourceDescription": "连接数据库和服务，并在整个工作空间中使用。",
     "queriesDescription": "创建、测试和共享可在应用之间复用的查询。",
-    "newsDescription": "了解产品动态，获取使用 Lowcoder 构建应用的实用方法。",
+    "newsDescription": "了解产品动态，获取使用 {brandName} 构建应用的实用方法。",
     "profileDescription": "管理个人资料和个人偏好设置。",
     "blogPosts": "博客精选",
     "videos": "观看与学习",
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx
index 65e1f4273..d3dfab5b4 100644
--- a/client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx
+++ b/client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx
@@ -1,3 +1,4 @@
+import { getBrandingSetting } from "redux/selectors/enterpriseSelectors";
 import { FolderNavigator } from "./FolderNavigator";
 import { User } from "constants/userConstants";
 import { useSelector } from "react-redux";
@@ -186,6 +187,7 @@ export interface HomeLayoutProps {
 }
 
 export function HomeLayout(props: HomeLayoutProps) {
+  const brandName = useSelector(getBrandingSetting)?.config_set?.standardTitle || trans("productName");
   const { breadcrumb = [],
     title,
     elements = [],
@@ -426,7 +428,7 @@ export function HomeLayout(props: HomeLayoutProps) {
               {mode === "trash" && trans("home.trash")}
               {mode === "view" && trans("home.allApplications")}
             </h1>
-            <p>{trans(mode === "marketplace" ? "admin.marketplaceDescription" : mode === "trash" ? "admin.trashDescription" : mode === "folder" ? "admin.folderDescription" : "admin.appsDescription")}</p>
+            <p>{trans(mode === "marketplace" ? "admin.marketplaceDescription" : mode === "trash" ? "admin.trashDescription" : mode === "folder" ? "admin.folderDescription" : "admin.appsDescription", { brandName })}</p>
           </StyleHomeCover>
           <Card className="admin-resource-surface">
             
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/HomeResCard.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/HomeResCard.tsx
index a6a182a63..3ad7661ef 100644
--- a/client/packages/lowcoder/src/pages/ApplicationV2/HomeResCard.tsx
+++ b/client/packages/lowcoder/src/pages/ApplicationV2/HomeResCard.tsx
@@ -36,16 +36,16 @@ const ExecButton = styled(TacoButton)`
   height: 24px;
   padding: 5px 12px;
   margin-right: 10px;
-  background: #f8f1fc;
-  border: 1px solid #e5d4f0;
+  background: var(--admin-tint);
+  border: 1px solid var(--admin-line);
   border-radius: 4px;
   font-weight: 500;
-  color: #754394;
+  color: var(--admin-link);
 
   &:hover {
-    background: #f9fbff;
-    border: 1px solid #c2d6ff;
-    color: #315efb;
+    background: var(--admin-hover);
+    border: 1px solid var(--admin-line-hover);
+    color: var(--admin-link);
   }
 
   @media screen and (max-width: 500px) {
@@ -60,7 +60,7 @@ const Wrapper = styled.div`
   background: white;
   min-height: 116px;
   transition: border-color 150ms, box-shadow 150ms;
-  &:hover, &:focus-within { border-color: #c7a8dc; box-shadow: 0 6px 20px #683e860a; }
+  &:hover, &:focus-within { border-color: var(--admin-line-hover); box-shadow: 0 6px 20px #0000000a; }
 `;
 
 const Card = styled.div`
@@ -120,7 +120,7 @@ const CardInfo = styled.div`
 
 const AppTimeOwnerInfoLabel = styled.div`
   font-size: 13px;
-  color: #8b8fa3;
+  color: var(--admin-muted);
   line-height: 15px;
   overflow: hidden;
   white-space: nowrap;
@@ -139,14 +139,14 @@ const OperationWrapper = styled.div`
 
 export const StyledTypographyText = styled(AntdTypographyText)`
   font-size: 14px;
-  color: #333333;
+  color: var(--admin-ink);
   line-height: 14px;
   overflow: hidden;
   text-overflow: ellipsis;
   display: block;
 
   &:hover {
-  color: #315efb;
+  color: var(--admin-link);
   }
 `;
 
@@ -284,7 +284,7 @@ export function HomeResCard(props: { res: HomeRes; onMove: (res: HomeRes) => voi
             style={{ 
               marginRight: "6px", 
               flexShrink: 0, 
-              color: "#b766db" 
+              color: "var(--admin-link)"
               }} 
             /> :
             Icon && (
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/HomeTableView.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/HomeTableView.tsx
index 2fb4d06ba..92f0bbd57 100644
--- a/client/packages/lowcoder/src/pages/ApplicationV2/HomeTableView.tsx
+++ b/client/packages/lowcoder/src/pages/ApplicationV2/HomeTableView.tsx
@@ -36,11 +36,11 @@ const NameWrapper = styled.div`
   display: flex;
   align-items: center;
   font-size: 14px;
-  color: #333333;
+  color: var(--admin-ink);
 `;
 
 const SubColumnCell = styled.div`
-  color: #8b8fa3;
+  color: var(--admin-muted);
 `;
 
 const EditBtn = styled(TacoButton)`
@@ -157,7 +157,7 @@ export const HomeTableView = (props: { resources: HomeRes[], setModify?: any, mo
                     style={{ 
                       marginRight: "6px", 
                       flexShrink: 0, 
-                      color: "#b766db" 
+                      color: "var(--admin-link)"
                       }} 
                     /> : Icon && (
                     <BrandedIcon>
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/MarketplaceView.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/MarketplaceView.tsx
index 03411343f..9a111ff83 100644
--- a/client/packages/lowcoder/src/pages/ApplicationV2/MarketplaceView.tsx
+++ b/client/packages/lowcoder/src/pages/ApplicationV2/MarketplaceView.tsx
@@ -1,3 +1,4 @@
+import { getBrandingSetting } from "redux/selectors/enterpriseSelectors";
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import {
   Alert,
@@ -64,6 +65,7 @@ const initials = (name: string) =>
     .toUpperCase();
 
 export function MarketplaceView() {
+  const brandName = useSelector(getBrandingSetting)?.config_set?.standardTitle || trans("productName");
   const workspaceId = useSelector(getUser).currentOrgId;
   const history = useHistory();
   const location = useLocation();
@@ -370,7 +372,7 @@ export function MarketplaceView() {
         <>
           <div className="marketplace-heading">
             <div>
-              <div className="eyebrow">{trans("marketplace.eyebrow")}</div>
+              <div className="eyebrow">{trans("marketplace.eyebrow", { brandName })}</div>
               <h1>{trans("marketplace.title")}</h1>
               <p className="intro">{trans("marketplace.description")}</p>
             </div>
@@ -448,7 +450,7 @@ export function MarketplaceView() {
               aria-label={trans("marketplace.search")}
               placeholder={trans("marketplace.search")}
               prefix={
-                <SearchOutlined style={{ color: "#a38eaf", marginRight: 6 }} />
+                <SearchOutlined style={{ color: "var(--admin-muted)", marginRight: 6 }} />
               }
               value={searchInput}
               onChange={(event) => setSearchInput(event.target.value)}
@@ -584,7 +586,7 @@ export function MarketplaceView() {
               <Skeleton active paragraph={{ rows: 10 }} />
             ) : apps.length === 0 ? (
               <div className="empty">
-                <GlobalOutlined style={{ fontSize: 32, color: "#ad8abd" }} />
+                <GlobalOutlined style={{ fontSize: 32, color: "var(--admin-accent)" }} />
                 <h2>
                   {trans(
                     filtered
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/NewsLayout.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/NewsLayout.tsx
index 4a992a080..6a09cd0a7 100644
--- a/client/packages/lowcoder/src/pages/ApplicationV2/NewsLayout.tsx
+++ b/client/packages/lowcoder/src/pages/ApplicationV2/NewsLayout.tsx
@@ -1,3 +1,5 @@
+import { useSelector } from "react-redux";
+import { getBrandingSetting } from "redux/selectors/enterpriseSelectors";
 import { AdminPage, AdminCover } from "components/layout/adminTheme";
 import styled from "styled-components";
 import { trans } from "../../i18n";
@@ -79,6 +81,7 @@ function useNewsFeed(load: () => Promise<any[]>, enabled = true) {
 }
 
 export function NewsLayout() {
+  const brandName = useSelector(getBrandingSetting)?.config_set?.standardTitle || trans("productName");
   const releases = useNewsFeed(getReleases);
   const videos = useNewsFeed(getYoutubeVideos);
   const blog = useNewsFeed(getHubspotContent, BLOG_NEWS_ENABLED);
@@ -92,7 +95,7 @@ export function NewsLayout() {
       <ContentWrapper>
         <NewsView>
           <StyleNewsCover>
-            <h1>{trans("home.news")}</h1><p>{trans("admin.newsDescription")}</p>
+            <h1>{trans("home.news")}</h1><p>{trans("admin.newsDescription", { brandName })}</p>
           </StyleNewsCover>
           <Card style={{ marginBottom: "20px" }}>
 
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/TrashTableView.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/TrashTableView.tsx
index d8e8d3711..c1edd9b2a 100644
--- a/client/packages/lowcoder/src/pages/ApplicationV2/TrashTableView.tsx
+++ b/client/packages/lowcoder/src/pages/ApplicationV2/TrashTableView.tsx
@@ -23,7 +23,7 @@ const NameWrapper = styled.div`
   display: flex;
   align-items: center;
   font-size: 14px;
-  color: #333333;
+  color: var(--admin-ink);
 `;
 
 const EditBtn = styled(TacoButton)`
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/UserProfileLayout.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/UserProfileLayout.tsx
index bebc2cb9f..54373f684 100644
--- a/client/packages/lowcoder/src/pages/ApplicationV2/UserProfileLayout.tsx
+++ b/client/packages/lowcoder/src/pages/ApplicationV2/UserProfileLayout.tsx
@@ -56,12 +56,12 @@ const Breadcrumb = styled(AntdBreadcrumb)`
   font-size: 12px;
 
   li:not(:last-child) {
-    color: #8b8fa3;
+    color: var(--admin-muted);
   }
 
   li:last-child {
     font-weight: 500;
-    color: #222222;
+    color: var(--admin-ink);
   }
 
   li.ant-breadcrumb-separator {
@@ -91,7 +91,7 @@ const StyleProfileContent = styled.div`
     gap: 20px;
 
     .subtitle {
-        color: #8b8fa3;
+        color: var(--admin-muted);
     }
 
     .button-end {
@@ -107,12 +107,12 @@ const StyleProfileContent = styled.div`
 const StyleAvatar = styled(Avatar)`
   position: relative;
   border: 3px solid #eee;
-  color: #fff;
+  color: var(--admin-on-accent);
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: bold;
-  background: #8050a0;
+  background: var(--admin-accent);
   border-radius: 20px;
   .ant-avatar-string {
     font-size: 2em;
@@ -120,7 +120,7 @@ const StyleAvatar = styled(Avatar)`
 `;
 
 const TextMuted = styled.div`
-    color: "#8b8fa3";
+    color: "var(--admin-muted)";
 `;
 
 const BgSuccess = styled.div`
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/marketplace/MarketplacePreview.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/marketplace/MarketplacePreview.tsx
index 68f7822b1..bba2a456a 100644
--- a/client/packages/lowcoder/src/pages/ApplicationV2/marketplace/MarketplacePreview.tsx
+++ b/client/packages/lowcoder/src/pages/ApplicationV2/marketplace/MarketplacePreview.tsx
@@ -10,7 +10,7 @@ const Frame = styled.div`
   width: 100%;
   aspect-ratio: 16 / 10;
   overflow: hidden;
-  background: linear-gradient(145deg, #f4ecfa, #ece7f5);
+  background: var(--admin-tint);
   border-bottom: 1px solid var(--admin-line);
   display: flex;
   align-items: center;
@@ -26,7 +26,7 @@ const Frame = styled.div`
     align-items: center;
     flex-direction: column;
     gap: 14px;
-    color: #8b709b;
+    color: var(--admin-muted);
     padding: 20px;
     text-align: center;
     font-size: 12px;
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/marketplace/marketplaceStyles.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/marketplace/marketplaceStyles.tsx
index 114e304c2..670c3bc59 100644
--- a/client/packages/lowcoder/src/pages/ApplicationV2/marketplace/marketplaceStyles.tsx
+++ b/client/packages/lowcoder/src/pages/ApplicationV2/marketplace/marketplaceStyles.tsx
@@ -19,7 +19,7 @@ export const MarketplaceShell = styled.div`
     font-weight: 500;
     letter-spacing: 0.12em;
     text-transform: uppercase;
-    color: var(--admin-accent);
+    color: var(--admin-link);
     margin-bottom: 10px;
   }
   h1 {
@@ -54,14 +54,14 @@ export const MarketplaceShell = styled.div`
     cursor: pointer;
   }
   .tabs button[aria-selected="true"] {
-    color: var(--admin-accent);
-    border-bottom-color: var(--admin-accent);
+    color: var(--admin-link);
+    border-bottom-color: var(--admin-link);
   }
   .tab-count {
     font-size: 11px;
     padding: 3px 7px;
     margin-left: 7px;
-    background: #eee6f3;
+    background: var(--admin-tint);
     border-radius: 8px;
   }
   .toolbar {
@@ -95,8 +95,8 @@ export const MarketplaceShell = styled.div`
   }
   .categories button[aria-pressed="true"] {
     background: var(--admin-accent);
-    color: white;
-    border-color: var(--admin-accent);
+    color: var(--admin-on-accent);
+    border-color: var(--admin-link);
   }
   .results-bar {
     display: flex;
@@ -176,7 +176,7 @@ export const MarketplaceShell = styled.div`
     white-space: pre-wrap;
     overflow-wrap: anywhere;
     line-height: 1.8;
-    color: #66556e;
+    color: var(--admin-muted);
   }
   .creator-panel {
     background: white;
@@ -204,8 +204,8 @@ export const MarketplaceShell = styled.div`
     border-radius: 50%;
     align-items: center;
     justify-content: center;
-    background: #efe4f7;
-    color: var(--admin-accent);
+    background: var(--admin-tint);
+    color: var(--admin-link);
     font-size: 11px;
     font-weight: 500;
   }
@@ -236,7 +236,7 @@ export const MarketplaceShell = styled.div`
   }
   .tag {
     background: var(--admin-tint);
-    color: #79558b;
+    color: var(--admin-link);
     border-radius: 6px;
     padding: 4px 7px;
     font-size: 10px;
@@ -309,8 +309,8 @@ export const MarketplaceGrid = styled.div<{ $list: boolean }>`
       border-color 0.2s;
   }
   .marketplace-card:hover {
-    border-color: #cdb5dc;
-    box-shadow: 0 10px 28px #4a255e10;
+    border-color: var(--admin-line-hover);
+    box-shadow: 0 10px 28px #00000010;
   }
   .cover-link {
     display: block;
@@ -333,7 +333,7 @@ export const MarketplaceGrid = styled.div<{ $list: boolean }>`
     overflow-wrap: anywhere;
   }
   .title-link:hover {
-    color: var(--admin-accent);
+    color: var(--admin-link);
   }
   .card-description {
     color: var(--admin-muted);
@@ -348,7 +348,7 @@ export const MarketplaceGrid = styled.div<{ $list: boolean }>`
   }
   .card-footer {
     margin-top: auto;
-    border-top: 1px solid #f1ebf4;
+    border-top: 1px solid var(--admin-line);
     padding-top: 14px;
     display: flex;
     align-items: center;
diff --git a/client/packages/lowcoder/src/pages/common/header.tsx b/client/packages/lowcoder/src/pages/common/header.tsx
index 0533e179e..e6b8894fa 100644
--- a/client/packages/lowcoder/src/pages/common/header.tsx
+++ b/client/packages/lowcoder/src/pages/common/header.tsx
@@ -6,6 +6,7 @@ import { default as Flex} from "antd/es/flex";
 import { default as Popover } from "antd/es/popover";
 import { default as Typography } from "antd/es/typography";
 import LayoutHeader from "components/layout/Header";
+import { AdminBrand } from "components/layout/AdminBrand";
 import { SHARE_TITLE } from "constants/apiConstants";
 import { AppTypeEnum } from "constants/applicationConstants";
 import {
@@ -694,16 +695,7 @@ export function AppHeader({ showBrandName = false }: { showBrandName?: boolean }
 
   const headerStart = (
     <StyledLink href={ALL_APPLICATIONS_URL} aria-label={trans("home.home")} onClick={(event) => { event.preventDefault(); history.push(ALL_APPLICATIONS_URL); }}>
-      {/* {REACT_APP_LOWCODER_SHOW_BRAND === 'true' ?  REACT_APP_LOWCODER_CUSTOM_LOGO !== "" ? <img src={REACT_APP_LOWCODER_CUSTOM_LOGO}  height={28} alt="logo" /> :<LogoWithName branding={!user.orgDev} /> : <LogoHome />} */}
-      { brandingSettings?.config_set?.logo
-        ? (
-          Boolean(brandingSettings?.orgId)
-          ? <BrandLogo src={buildMaterialPreviewURL(brandingSettings?.config_set?.logo)} />
-          : <BrandLogo src={brandingSettings?.config_set?.logo} />
-        ) : showBrandName
-          ? <span className="admin-brand-name" style={{ display: "flex", alignItems: "center", gap: 10, color: "#d2a5ee", fontSize: 20, fontWeight: 500 }}><span className="admin-brand-mark"><Logo /></span>Lowcoder</span>
-          : <LogoHome />
-      }
+      <AdminBrand branding={brandingSettings} showName={showBrandName} />
     </StyledLink>
   );
   const headerEnd = (
diff --git a/client/packages/lowcoder/src/pages/common/help.tsx b/client/packages/lowcoder/src/pages/common/help.tsx
index dddf129d3..14a159206 100644
--- a/client/packages/lowcoder/src/pages/common/help.tsx
+++ b/client/packages/lowcoder/src/pages/common/help.tsx
@@ -197,17 +197,17 @@ function HelpDropdownComp(props: HelpDropdownProps) {
   const showDocLink = useMemo(() => {
     if (!Boolean(brandingSettings)) return Boolean(docHomeUrl);
     return brandingSettings?.config_set?.showDocumentation;
-  }, [brandingSettings?.config_set?.showDocumentation]);
+  }, [brandingSettings]);
 
   const showSubmitIssueLink = useMemo(() => {
     if (!Boolean(brandingSettings)) return Boolean(issueUrl);
     return brandingSettings?.config_set?.submitIssue;
-  }, [brandingSettings?.config_set?.submitIssue]);
+  }, [brandingSettings]);
 
   const showWhatsNewLink = useMemo(() => {
     if (!Boolean(brandingSettings)) return Boolean(changeLogDocUrl);
     return brandingSettings?.config_set?.whatsNew;
-  }, [brandingSettings?.config_set?.whatsNew]);
+  }, [brandingSettings]);
 
   const closeTooltip = () => {
     // turn of tooltip
@@ -294,7 +294,7 @@ function HelpDropdownComp(props: HelpDropdownProps) {
           return;
       }
     },
-    [dispatch, setVideoVisible, setShowHelp, user]
+    [dispatch, setVideoVisible, setShowHelp, user, brandingSettings, props.setShowShortcutList]
   );
 
   const overlayMenus = (
diff --git a/client/packages/lowcoder/src/pages/datasource/datasourceList.tsx b/client/packages/lowcoder/src/pages/datasource/datasourceList.tsx
index 8ca2683da..d175fd2fc 100644
--- a/client/packages/lowcoder/src/pages/datasource/datasourceList.tsx
+++ b/client/packages/lowcoder/src/pages/datasource/datasourceList.tsx
@@ -77,7 +77,7 @@ const PopoverIcon = styled(PointIcon)`
     cursor: pointer;
 
     g {
-      fill: #3377ff;
+      fill: var(--admin-link, #3377ff);
     }
   }
 `;
diff --git a/client/packages/lowcoder/src/pages/queryLibrary/LeftNav.tsx b/client/packages/lowcoder/src/pages/queryLibrary/LeftNav.tsx
index 9d20a8710..0806f8129 100644
--- a/client/packages/lowcoder/src/pages/queryLibrary/LeftNav.tsx
+++ b/client/packages/lowcoder/src/pages/queryLibrary/LeftNav.tsx
@@ -34,7 +34,7 @@ const Wrapper = styled.div<{ $readOnly?: boolean }>`
   min-height: 0;
   height: 100%;
   border-right: 1px solid var(--admin-line);
-  background: #fdfbfe;
+  background: var(--admin-surface, #fdfbfe);
   @media (max-width: 1000px) { width: 100%; flex: 0 0 300px; height: 300px; border-right: 0; border-bottom: 1px solid var(--admin-line); }
   ${(props) => {
     if (props.$readOnly) {
@@ -68,13 +68,13 @@ const CreateBtn = styled(TacoButton)<{ $readOnly?: boolean }>`
   opacity: ${(props) => (props.$readOnly ? 0.5 : 1)};
 
   &:hover ${AddIcon} g {
-    stroke: #315efb;
+    stroke: var(--admin-link, #315efb);
   }
 
   &:disabled,
   &:disabled:hover {
     ${AddIcon} g {
-      stroke: #4965f230;
+      stroke: var(--admin-line, #4965f230);
     }
   }
 `;
@@ -103,14 +103,14 @@ const SelectItem = styled.div<{ $selected: boolean; $readOnly?: boolean }>`
   margin: 4px 10px;
   border-radius: 10px;
   border: 1px solid transparent;
-  &:focus-visible { outline: 2px solid #b480de; outline-offset: -2px; }
+  &:focus-visible { outline: 2px solid var(--admin-focus, #b480de); outline-offset: -2px; }
   padding: 0 16px;
   background-color: ${(props) =>
-    props.$selected ? (props.$readOnly ? "#EFEFF1" : "#f0e5f7") : "unset"};
+    props.$selected ? (props.$readOnly ? "#EFEFF1" : "var(--admin-tint, #f0e5f7)") : "unset"};
   cursor: pointer;
 
   &:hover {
-    background-color: ${(props) => !props.$selected && "#f7f0fb"};
+    background-color: ${(props) => !props.$selected && "var(--admin-hover, #f7f0fb)"};
   }
 `;
 
@@ -160,7 +160,7 @@ const PopoverIcon = styled(PointIcon)`
     cursor: pointer;
 
     g {
-      fill: #3377ff;
+      fill: var(--admin-link, #3377ff);
     }
   }
 `;
@@ -299,7 +299,7 @@ export const LeftNav = (props: {
                     <>
                       <div>{trans("query.noQueries")}</div>
                       <span
-                        style={{ color: "#4965f2", cursor: "pointer", margin: "0 4px" }}
+                        style={{ color: "var(--admin-link, #4965f2)", cursor: "pointer", margin: "0 4px" }}
                         onClick={props.addQuery}
                       >
                         {trans("newItem")}
diff --git a/client/packages/lowcoder/src/pages/setting/settingHome.tsx b/client/packages/lowcoder/src/pages/setting/settingHome.tsx
index e3fe5d1a3..397b631d7 100644
--- a/client/packages/lowcoder/src/pages/setting/settingHome.tsx
+++ b/client/packages/lowcoder/src/pages/setting/settingHome.tsx
@@ -176,7 +176,6 @@ export function SettingHome() {
               </div>
               <Button
                 type="primary"
-                style={{ backgroundColor: "#ff6f3c", borderColor: "#ff6f3c" }}
                 onClick={() => setHubspotVisible(true)}
               >
                 {trans("enterprise.requestLicensesBtton")}
diff --git a/client/packages/lowcoder/src/pages/setting/subscriptions/productCard.tsx b/client/packages/lowcoder/src/pages/setting/subscriptions/productCard.tsx
index b6495f796..275ba6199 100644
--- a/client/packages/lowcoder/src/pages/setting/subscriptions/productCard.tsx
+++ b/client/packages/lowcoder/src/pages/setting/subscriptions/productCard.tsx
@@ -103,7 +103,7 @@ export const ProductCard: React.FC<ProductCardProps> = ({
       hoverable
       loading={loading}
       cover={
-        image ? <img loading="lazy" alt={title} src={image} /> : <div className="product-placeholder"><RobotOutlined style={{ fontSize: 96, color: "#ff6f3c" }} /></div>
+        image ? <img loading="lazy" alt={title} src={image} /> : <div className="product-placeholder"><RobotOutlined style={{ fontSize: 96, color: "var(--admin-accent)" }} /></div>
       }
       actions={[
         <Button type="default" block onClick={goToSubscriptionInformation} style={{width:"90%"}} icon={<InfoCircleOutlined />}>{trans("automator.subscription.explore")}</Button>,
@@ -112,7 +112,7 @@ export const ProductCard: React.FC<ProductCardProps> = ({
         ) : (
         !activeSubscription && (
           checkoutLinkDataLoaded && checkoutLink ? (
-            <Button type="primary" block onClick={goToCheckout} style={{width:"90%", backgroundColor: "#ff6f3c"}}>
+            <Button type="primary" block onClick={goToCheckout} style={{width:"90%"}}>
               {trans("iconScout.buySubscriptionButton")}
             </Button>
           ) : (
diff --git a/client/packages/lowcoder/src/redux/reducers/uiReducers/enterpriseReducer.ts b/client/packages/lowcoder/src/redux/reducers/uiReducers/enterpriseReducer.ts
index 83ac8cd7c..af037612c 100644
--- a/client/packages/lowcoder/src/redux/reducers/uiReducers/enterpriseReducer.ts
+++ b/client/packages/lowcoder/src/redux/reducers/uiReducers/enterpriseReducer.ts
@@ -32,18 +32,22 @@ const enterpriseReducer = createReducer(initialState, {
   }),
   [ReduxActionTypes.SET_GLOBAL_BRANDING_SETTING]: (
     state: EnterpriseReduxState,
-    action: ReduxAction<BrandingSettingResponse>
+    action: ReduxAction<BrandingSettingResponse | undefined>
   ) => ({
     ...state,
     globalBranding: action.payload,
   }),
   [ReduxActionTypes.SET_WORKSPACE_BRANDING_SETTING]: (
     state: EnterpriseReduxState,
-    action: ReduxAction<BrandingSettingResponse>
+    action: ReduxAction<BrandingSettingResponse | undefined>
   ) => ({
     ...state,
     workspaceBranding: action.payload,
   }),
+  [ReduxActionTypes.LOGOUT_USER_SUCCESS]: (state: EnterpriseReduxState) => ({
+    ...state,
+    workspaceBranding: undefined,
+  }),
   
   [ReduxActionTypes.FETCH_ENVIRONMENTS]: (
     state: EnterpriseReduxState
diff --git a/client/packages/lowcoder/src/redux/sagas/enterpriseBranding.test.ts b/client/packages/lowcoder/src/redux/sagas/enterpriseBranding.test.ts
new file mode 100644
index 000000000..709b00a04
--- /dev/null
+++ b/client/packages/lowcoder/src/redux/sagas/enterpriseBranding.test.ts
@@ -0,0 +1,74 @@
+import { runSaga, stdChannel } from "redux-saga";
+import { getBranding } from "api/enterpriseApi";
+import { ReduxActionTypes } from "constants/reduxActionConstants";
+import type { AppState } from "redux/reducers";
+import { getBrandingSetting } from "redux/selectors/enterpriseSelectors";
+import enterpriseSagas, { fetchBrandingSettingSaga } from "./enterpriseSagas";
+
+jest.mock("api/enterpriseApi", () => ({ getBranding: jest.fn() }));
+jest.mock("pages/setting/environments/services/environments.service", () => ({}));
+
+const globalBranding = { id: "global", config_set: { logo: "https://example.com/logo.svg", mainBrandingColor: "#2356c4" } };
+const workspaceBranding = { id: "workspace", orgId: "a", config_set: { logo: "material-id", mainBrandingColor: "#007f68", showDocumentation: false } };
+const state = (orgId: string, workspace = workspaceBranding) => ({
+  ui: { users: { user: { currentOrgId: orgId } }, enterprise: { globalBranding, workspaceBranding: workspace } },
+}) as AppState;
+
+it("keeps workspace precedence, explicit false settings and logo provenance", () => {
+  expect(getBrandingSetting(state("a"))).toBe(workspaceBranding);
+  expect(getBrandingSetting(state("a"))?.config_set?.showDocumentation).toBe(false);
+});
+
+it("uses the global identity immediately when switching workspace", () => {
+  expect(getBrandingSetting(state("b"))).toBe(globalBranding);
+  expect(getBrandingSetting(state("b"))?.orgId).toBeUndefined();
+});
+
+it("falls back after a workspace configuration is reset", () => {
+  expect(getBrandingSetting(state("a", { ...workspaceBranding, config_set: {} } as typeof workspaceBranding))).toBe(globalBranding);
+});
+
+it.each([{}, { id: "reset", config_set: {} }])("clears unavailable branding and requests a global fallback", async (response) => {
+  jest.mocked(getBranding).mockResolvedValue(response as any);
+  const dispatched: any[] = [];
+  await runSaga({ dispatch: (action) => dispatched.push(action) }, fetchBrandingSettingSaga, {
+    type: ReduxActionTypes.FETCH_BRANDING_SETTING, payload: { orgId: "b" },
+  }).toPromise();
+  expect(dispatched).toEqual([
+    { type: ReduxActionTypes.SET_WORKSPACE_BRANDING_SETTING, payload: undefined },
+    { type: ReduxActionTypes.FETCH_BRANDING_SETTING, payload: {} },
+  ]);
+});
+
+it("does not retain another company's branding after an API error", async () => {
+  const error = jest.spyOn(console, "error").mockImplementation(() => {});
+  jest.mocked(getBranding).mockRejectedValue(new Error("Unavailable"));
+  const dispatched: any[] = [];
+  await runSaga({ dispatch: (action) => dispatched.push(action) }, fetchBrandingSettingSaga, {
+    type: ReduxActionTypes.FETCH_BRANDING_SETTING, payload: { orgId: "b", fallbackToGlobal: true },
+  }).toPromise();
+  expect(dispatched[0]).toEqual({ type: ReduxActionTypes.SET_WORKSPACE_BRANDING_SETTING, payload: undefined });
+  error.mockRestore();
+});
+
+it("keeps the newest workspace response even when a global request overlaps it", async () => {
+  const channel = stdChannel();
+  const dispatched: any[] = [];
+  const pending: Record<string, (value: any) => void> = {};
+  jest.mocked(getBranding).mockImplementation((orgId) => new Promise((resolve) => { pending[orgId || "global"] = resolve; }));
+  const task = runSaga({ channel, dispatch: (action) => dispatched.push(action) }, enterpriseSagas);
+  try {
+    channel.put({ type: ReduxActionTypes.FETCH_BRANDING_SETTING, payload: { orgId: "a" } });
+    channel.put({ type: ReduxActionTypes.FETCH_BRANDING_SETTING, payload: {} });
+    channel.put({ type: ReduxActionTypes.FETCH_BRANDING_SETTING, payload: { orgId: "b" } });
+    pending.b({ ...workspaceBranding, orgId: "b" });
+    pending.global(globalBranding);
+    pending.a(workspaceBranding);
+    await Promise.resolve();
+    expect(dispatched.filter((action) => action.type === ReduxActionTypes.SET_WORKSPACE_BRANDING_SETTING))
+      .toEqual([{ type: ReduxActionTypes.SET_WORKSPACE_BRANDING_SETTING, payload: { ...workspaceBranding, orgId: "b" } }]);
+    expect(dispatched).toContainEqual({ type: ReduxActionTypes.SET_GLOBAL_BRANDING_SETTING, payload: globalBranding });
+  } finally {
+    task.cancel();
+  }
+});
diff --git a/client/packages/lowcoder/src/redux/sagas/enterpriseSagas.ts b/client/packages/lowcoder/src/redux/sagas/enterpriseSagas.ts
index ef4421053..75cf911a5 100644
--- a/client/packages/lowcoder/src/redux/sagas/enterpriseSagas.ts
+++ b/client/packages/lowcoder/src/redux/sagas/enterpriseSagas.ts
@@ -1,11 +1,11 @@
 import { call, put, takeLatest } from 'redux-saga/effects';
+import type { Action } from 'redux';
 import { ReduxAction, ReduxActionTypes } from "constants/reduxActionConstants";
 import { setEnterpriseLicense, fetchEnvironmentsSuccess, fetchEnvironmentsFailure } from "redux/reduxActions/enterpriseActions";
 import { BrandingSettingResponse, EnterpriseLicenseResponse, FetchBrandingSettingPayload, getBranding, getEnterpriseLicense } from "api/enterpriseApi";
 import { getEnvironmentsWithLicenseStatus } from "pages/setting/environments/services/environments.service";
 import { Environment } from "pages/setting/environments/types/environment.types";
 
-import { AxiosResponse } from 'axios';
 
 function* fetchEnterpriseLicenseSaga(): Generator<any, void, EnterpriseLicenseResponse> {
   try {
@@ -27,36 +27,29 @@ function* fetchEnvironmentsSaga(): Generator<any, void, Environment[]> {
   }
 }
 
-function* fetchBrandingSettingSaga(action: ReduxAction<FetchBrandingSettingPayload>) {
+export function* fetchBrandingSettingSaga(action: ReduxAction<FetchBrandingSettingPayload>): Generator<any, void, BrandingSettingResponse> {
+  const { orgId, fallbackToGlobal = true } = action.payload;
+  const type = orgId ? ReduxActionTypes.SET_WORKSPACE_BRANDING_SETTING : ReduxActionTypes.SET_GLOBAL_BRANDING_SETTING;
+  let response: BrandingSettingResponse | undefined;
   try {
-    const response: BrandingSettingResponse = yield getBranding(action.payload.orgId);
-    if (response && response.id) {
-      if (action.payload.orgId) {
-        yield put({
-          type: ReduxActionTypes.SET_WORKSPACE_BRANDING_SETTING,
-          payload: response,
-        });
-        return;
-      }
-      yield put({
-        type: ReduxActionTypes.SET_GLOBAL_BRANDING_SETTING,
-        payload: response,
-      });
-    }
+    response = yield call(getBranding, orgId);
   } catch (error) {
     console.error('Failed to fetch branding setting:', error);
-    // fetch global branding if org's branding setting is not available
-    if (Boolean(action.payload.orgId) && action.payload.fallbackToGlobal) {
-      yield put({
-        type: ReduxActionTypes.FETCH_BRANDING_SETTING,
-        payload: {},
-      })
-    }
+  }
+  // Empty/reset configurations must clear the previous workspace's brand.
+  const hasBranding = response?.id && Object.keys(response.config_set || {}).length > 0;
+  yield put({ type, payload: hasBranding ? { ...response, ...(orgId ? { orgId } : {}) } : undefined });
+  if (orgId && !hasBranding && fallbackToGlobal) {
+    yield put({ type: ReduxActionTypes.FETCH_BRANDING_SETTING, payload: {} });
   }
 }
 
 export default function* enterpriseSagas() {
   yield takeLatest(ReduxActionTypes.FETCH_ENTERPRISE_LICENSE, fetchEnterpriseLicenseSaga);
-  yield takeLatest(ReduxActionTypes.FETCH_BRANDING_SETTING, fetchBrandingSettingSaga);
+  // A global fallback request must not cancel a workspace branding request.
+  yield takeLatest((action: Action): action is ReduxAction<FetchBrandingSettingPayload> =>
+    action.type === ReduxActionTypes.FETCH_BRANDING_SETTING && !(action as ReduxAction<FetchBrandingSettingPayload>).payload.orgId, fetchBrandingSettingSaga);
+  yield takeLatest((action: Action): action is ReduxAction<FetchBrandingSettingPayload> =>
+    action.type === ReduxActionTypes.FETCH_BRANDING_SETTING && Boolean((action as ReduxAction<FetchBrandingSettingPayload>).payload.orgId), fetchBrandingSettingSaga);
   yield takeLatest(ReduxActionTypes.FETCH_ENVIRONMENTS, fetchEnvironmentsSaga);
 }
diff --git a/client/packages/lowcoder/src/redux/selectors/enterpriseSelectors.ts b/client/packages/lowcoder/src/redux/selectors/enterpriseSelectors.ts
index 9f52c5cb7..4f872dd69 100644
--- a/client/packages/lowcoder/src/redux/selectors/enterpriseSelectors.ts
+++ b/client/packages/lowcoder/src/redux/selectors/enterpriseSelectors.ts
@@ -16,7 +16,11 @@ export const selectIsLicenseActive = (state: AppState) => {
 };
 
 export const getBrandingSetting = (state: AppState) => {
-  return state.ui.enterprise?.workspaceBranding || state.ui.enterprise?.globalBranding;
+  const { workspaceBranding, globalBranding } = state.ui.enterprise || {};
+  // Do not show the old workspace's identity while the new branding is loading.
+  const currentOrgId = state.ui.users.user.currentOrgId;
+  return workspaceBranding?.orgId === currentOrgId && Object.keys(workspaceBranding?.config_set || {}).length > 0
+    ? workspaceBranding : globalBranding;
 }
 
 export const getGlobalBrandingSetting = (state: AppState) => {
diff --git a/client/packages/lowcoder/vite.config.mts b/client/packages/lowcoder/vite.config.mts
index 009d9d417..cb9b3e585 100644
--- a/client/packages/lowcoder/vite.config.mts
+++ b/client/packages/lowcoder/vite.config.mts
@@ -278,6 +278,7 @@ export const viteConfig: UserConfig = {
       pages: [
         { filename: "index.html", template: "index.html", injectOptions: { data: { browserCheckScript: isDev ? "" : `<script src="${base}${browserCheckFileName}"></script>` } } },
         { filename: "marketplace-preview.html", template: "marketplace-preview.html" },
+        ...(isDev ? [{ filename: "admin-branding-preview.html", template: "admin-branding-preview.html" }] : []),
       ],
     }),
     isVisualizerEnabled && visualizer(),

From f7c7202ab8e82ea40573ee01165f4db16cf7189e Mon Sep 17 00:00:00 2001
From: FalkWolsky <fw@falkwolsky.com>
Date: Tue, 13 Oct 2026 17:46:41 +0200
Subject: [PATCH 3/4] Fixed New Button overlay

---
 .../src/dev-utils/admin-branding-preview.tsx  |  23 +++-
 .../ApplicationV2/CreateDropdown.test.tsx     |  98 ++++++++++++++++
 .../pages/ApplicationV2/CreateDropdown.tsx    | 107 +++++++-----------
 3 files changed, 156 insertions(+), 72 deletions(-)
 create mode 100644 client/packages/lowcoder/src/pages/ApplicationV2/CreateDropdown.test.tsx

diff --git a/client/packages/lowcoder/src/dev-utils/admin-branding-preview.tsx b/client/packages/lowcoder/src/dev-utils/admin-branding-preview.tsx
index 59237e30d..6b93bff6a 100644
--- a/client/packages/lowcoder/src/dev-utils/admin-branding-preview.tsx
+++ b/client/packages/lowcoder/src/dev-utils/admin-branding-preview.tsx
@@ -6,7 +6,7 @@ import { createRoot } from "react-dom/client";
 import { Provider } from "react-redux";
 import { createStore } from "redux";
 import { MemoryRouter } from "react-router-dom";
-import { Button, Card, Drawer, Input, Menu, Select, Space, Table } from "antd";
+import { Button, Card, Drawer, Input, Menu, Select, Space } from "antd";
 import { AppstoreOutlined, SearchOutlined, SettingOutlined, UserOutlined } from "@ant-design/icons";
 import type { BrandingSettings } from "api/enterpriseApi";
 import { AdminTheme } from "components/layout/adminTheme";
@@ -18,6 +18,13 @@ import Header from "components/layout/Header";
 import { TacoButton } from "lowcoder-design/src/components/button";
 import { modalInstance } from "lowcoder-design/src/components/GlobalInstances";
 import { MarketplaceShell, MarketplaceGrid } from "pages/ApplicationV2/marketplace/marketplaceStyles";
+import { HomeLayout } from "pages/ApplicationV2/HomeLayout";
+import type { FolderMeta } from "constants/applicationConstants";
+
+const folders: FolderMeta[] = ["Sales dashboards", "Customer support", "Project trackers", "Operations"].map((name, i) => ({
+  folderId: `sample-${i}`, orgId: "sample", name, createBy: "Alex Morgan", createAt: 1791849600000,
+  manageable: true, lastViewTime: 0, folder: true,
+}));
 
 const brands: Record<string, BrandingSettings> = {
   Lowcoder: {},
@@ -44,9 +51,15 @@ function Preview() {
   const [page, setPage] = useState("Marketplace");
   const [drawer, setDrawer] = useState(false);
   const [customCss, setCustomCss] = useState(false);
+  const [modified, setModified] = useState(false);
   const branding = { id: "sample", orgId: "sample", config_set: brands[brand] };
   const store = useMemo(() => createStore(() => ({
-    ui: { enterprise: { workspaceBranding: { id: "sample", orgId: "sample", config_set: brands[brand] } }, users: { user: { currentOrgId: "sample" } } },
+    ui: {
+      enterprise: { workspaceBranding: { id: "sample", orgId: "sample", config_set: brands[brand] } },
+      users: { user: { currentOrgId: "sample", username: "Alex Morgan", orgDev: true, userStatus: { newUserGuidance: true } } },
+      application: { applicationList: [], loadingStatus: { isApplicationCreating: false } },
+      folder: { folders },
+    },
   })), [brand]);
   return <Provider store={store}><MemoryRouter><AdminTheme>
     {brands[brand].font && <link rel="stylesheet" href={`https://fonts.googleapis.com/css2?family=${brands[brand].font}:wght@400;500;700&display=swap`} />}
@@ -65,17 +78,17 @@ function Preview() {
         {page === "Settings" ? <div style={{ display: "flex", height: "100%" }}>
           <SubSideBar title="Settings"><Menu selectedKeys={["branding"]} items={[{ key: "workspace", label: "Workspaces" }, { key: "branding", label: "Branding" }, { key: "subscriptions", label: "Subscriptions" }]} /></SubSideBar>
           <div style={{ padding: 32, flex: 1 }}><h1>Company branding</h1><Card title="Workspace identity"><p>Your company colors, typography and navigation settings.</p><TacoButton buttonType="primary">Save settings</TacoButton></Card></div>
-        </div> : <MarketplaceShell>
+        </div> : page === "Your apps" ? <HomeLayout mode="view" title="Your apps" elements={folders} currentPage={1} pageSize={10} total={folders.length} setIsCreated={setModified} isCreated={modified} /> : <MarketplaceShell>
           <div className="marketplace-heading"><div><div className="eyebrow">Build together</div><h1>{page}</h1><p className="intro">Discover useful apps and the people who build them.</p></div><Button type="primary">Share an app</Button></div>
           <div className="tabs" role="tablist"><button role="tab" aria-selected>Community <span className="tab-count">24</span></button><button role="tab" aria-selected={false}>Local</button></div>
           <div className="toolbar"><Input className="search" prefix={<SearchOutlined />} placeholder="Search apps, creators and categories" /><Select defaultValue="recent" options={[{ value: "recent", label: "Recently shared" }, { value: "name", label: "App name" }]} /></div>
           <div className="categories">{["All apps", "Analytics", "Operations", "Customer support"].map((category, i) => <button key={category} aria-pressed={i === 0}>{category}</button>)}</div>
-          {page === "Your apps" ? <Table pagination={{ pageSize: 2 }} columns={[{ title: "App", dataIndex: "name" }, { title: "Owner", dataIndex: "owner" }]} dataSource={[{ key: "1", name: "Sales dashboard", owner: "Alex Morgan" }, { key: "2", name: "Customer support", owner: "Sam Chen" }, { key: "3", name: "Project tracker", owner: "Jamie Lee" }]} /> : <MarketplaceGrid $list={false}>
+          <MarketplaceGrid $list={false}>
             {["Sales dashboard", "Customer support", "Project tracker"].map((title, i) => <article className="marketplace-card" key={title}>
               <div style={{ aspectRatio: "16 / 10", background: "var(--admin-tint)", display: "grid", placeItems: "center" }}><AppstoreOutlined style={{ fontSize: 48, color: "var(--admin-link)" }} /></div>
               <div className="card-body"><div className="tags"><span className="tag">{i === 0 ? "Analytics" : "Operations"}</span></div><a className="title-link" href="#sample" onClick={(event) => event.preventDefault()}>{title}</a><p className="card-description">A shared workspace for your team’s daily work, with clear reports and useful insights.</p><div className="card-footer"><div className="creator-row"><span className="avatar">AM</span><span className="creator-name">Alex Morgan</span></div><Button type="link">Explore</Button></div></div>
             </article>)}
-          </MarketplaceGrid>}
+          </MarketplaceGrid>
           <Space style={{ marginTop: 24 }}><TacoButton buttonType="primary">Create app</TacoButton><TacoButton buttonType="blue">Import app</TacoButton></Space>
         </MarketplaceShell>}
       </main>
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/CreateDropdown.test.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/CreateDropdown.test.tsx
new file mode 100644
index 000000000..95a64d523
--- /dev/null
+++ b/client/packages/lowcoder/src/pages/ApplicationV2/CreateDropdown.test.tsx
@@ -0,0 +1,98 @@
+import { fireEvent, render, screen, waitFor, within } from "@testing-library/react";
+import { Provider } from "react-redux";
+import { createStore } from "redux";
+import { MemoryRouter } from "react-router-dom";
+import { CreateDropdown } from "./CreateDropdown";
+import { useCreateHomeRes } from "./useCreateHomeRes";
+import { HomeResTypeEnum } from "types/homeRes";
+import { HomeResInfo } from "util/homeResUtils";
+import { trans } from "i18n";
+
+jest.mock("./useCreateHomeRes", () => ({ useCreateHomeRes: jest.fn() }));
+
+const handleCreate = jest.fn();
+const store = createStore(() => ({ ui: { users: { user: { currentOrgId: "workspace" } } } }));
+
+function Example({ mode = "view", defaultVisible = false }: {
+  mode?: "view" | "folder" | "module" | "folders"; defaultVisible?: boolean;
+}) {
+  return <Provider store={store}><MemoryRouter>
+    <div data-testid="toolbar" style={{ overflow: "hidden", transform: "translateZ(0)" }}>
+      <CreateDropdown mode={mode} defaultVisible={defaultVisible} setModify={jest.fn()} modify={false} />
+    </div>
+    <button>Outside the menu</button>
+  </MemoryRouter></Provider>;
+}
+
+beforeEach(() => {
+  jest.mocked(useCreateHomeRes).mockReturnValue([handleCreate, false]);
+});
+
+it("opens on click outside the toolbar's stacking context and supports repeated dismissal", async () => {
+  render(<Example />);
+  const trigger = screen.getByRole("button", { name: trans("newItem") });
+  expect(screen.queryByRole("menu")).not.toBeInTheDocument();
+  fireEvent.click(trigger);
+  const menu = await screen.findByRole("menu");
+  await waitFor(() => expect(menu).toBeVisible());
+  expect(screen.getByTestId("toolbar")).not.toContainElement(menu);
+  expect(document.body).toContainElement(menu);
+  expect(within(menu).getAllByRole("menuitem")).toHaveLength(5);
+  expect(trigger).toHaveAttribute("aria-expanded", "true");
+
+  fireEvent.click(trigger);
+  await waitFor(() => expect(screen.queryByRole("menu")).not.toBeInTheDocument());
+  fireEvent.click(trigger);
+  await screen.findByRole("menu");
+  fireEvent.mouseDown(screen.getByRole("button", { name: "Outside the menu" }));
+  await waitFor(() => expect(trigger).toHaveAttribute("aria-expanded", "false"));
+  fireEvent.click(trigger);
+  await screen.findByRole("menu");
+  fireEvent.keyDown(window, { key: "Escape", keyCode: 27 });
+  await waitFor(() => expect(trigger).toHaveAttribute("aria-expanded", "false"));
+});
+
+it.each([HomeResTypeEnum.Application, HomeResTypeEnum.Module, HomeResTypeEnum.Folder])(
+  "keeps creation action %s and closes the menu after selection", async (type) => {
+    render(<Example mode="folder" />);
+    const trigger = screen.getByRole("button", { name: trans("newItem") });
+    fireEvent.click(trigger);
+    fireEvent.click(await screen.findByRole("menuitem", { name: HomeResInfo[type].name }));
+    expect(handleCreate).toHaveBeenCalledTimes(1);
+    expect(handleCreate).toHaveBeenCalledWith(type);
+    await waitFor(() => expect(trigger).toHaveAttribute("aria-expanded", "false"));
+  }
+);
+
+it("keeps the navigation layout picker", async () => {
+  render(<Example />);
+  fireEvent.click(screen.getByRole("button", { name: trans("newItem") }));
+  fireEvent.click(await screen.findByRole("menuitem", { name: HomeResInfo[HomeResTypeEnum.Navigation].name }));
+  const dialog = await screen.findByRole("dialog");
+  expect(handleCreate).not.toHaveBeenCalled();
+  fireEvent.click(within(dialog).getByText(HomeResInfo[HomeResTypeEnum.NavLayout].name));
+  expect(handleCreate).toHaveBeenCalledWith(HomeResTypeEnum.NavLayout);
+});
+
+it("keeps the JSON import file picker", async () => {
+  render(<Example mode="module" />);
+  const trigger = screen.getByRole("button", { name: trans("newItem") });
+  fireEvent.click(trigger);
+  const item = await screen.findByRole("menuitem", { name: trans("home.import") });
+  const input = item.querySelector<HTMLInputElement>('input[type="file"]')!;
+  const openPicker = jest.spyOn(input, "click").mockImplementation(() => {});
+  expect(input).toHaveAttribute("accept", ".json");
+  fireEvent.click(within(item).getByText(trans("home.import")));
+  expect(openPicker).toHaveBeenCalledTimes(1);
+  expect(handleCreate).not.toHaveBeenCalled();
+  await waitFor(() => expect(trigger).toHaveAttribute("aria-expanded", "false"));
+  openPicker.mockRestore();
+});
+
+it("keeps folder-only mode and allows an initially open tutorial menu to close", async () => {
+  render(<Example mode="folders" defaultVisible />);
+  const menu = await screen.findByRole("menu");
+  expect(within(menu).getAllByRole("menuitem")).toHaveLength(1);
+  fireEvent.click(within(menu).getByRole("menuitem", { name: HomeResInfo[HomeResTypeEnum.Folder].name }));
+  await waitFor(() => expect(screen.queryByRole("menu")).not.toBeInTheDocument());
+});
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/CreateDropdown.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/CreateDropdown.tsx
index d3650180f..efc201069 100644
--- a/client/packages/lowcoder/src/pages/ApplicationV2/CreateDropdown.tsx
+++ b/client/packages/lowcoder/src/pages/ApplicationV2/CreateDropdown.tsx
@@ -10,14 +10,13 @@ import {
   PcNavIcon,
   TacoButton,
 } from "lowcoder-design";
-import React, { FunctionComponent, useState } from "react";
+import React, { FunctionComponent, useEffect, useState } from "react";
 import type { ItemType } from "antd/es/menu/interface";
 import { HomeResInfo } from "../../util/homeResUtils";
 import { createAppItemClass } from "../tutorials/HomeTutorialsV2";
 import styled from "styled-components";
 import { default as AntdDropdown } from "antd/es/dropdown";
-import { default as AntdMenu } from "antd/es/menu";
-import { HomeLayoutMode } from "./HomeLayout";
+import type { HomeLayoutMode } from "./HomeLayout";
 import { useSelector } from "react-redux";
 import { getUser } from "../../redux/selectors/usersSelectors";
 import { useCreateHomeRes } from "./useCreateHomeRes";
@@ -30,35 +29,6 @@ const Dropdown = styled(AntdDropdown)`
   }
 `;
 
-const CreateDropdownMenu = styled(AntdMenu)`
-&&& {
-  width: fit-content;
-  min-width: 110px;
-  padding: 8px;
-  background: #ffffff;
-  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
-  border-radius: 8px;
-
-  .ant-dropdown-menu-item,
-  .ant-dropdown-menu-submenu-title {
-    padding: 8px;
-    display: flex;
-    align-items: center;
-    &:hover {
-      background: #f2f7fc;
-      border-radius: 4px;
-    }
-  }
-
-  .ant-dropdown-menu-title-content {
-    font-size: 13px;
-    color: #333333;
-    line-height: 13px;
-    display: flex;
-  }
-}
-`;
-
 const CreateMenuItem = styled.div`
   display: flex;
   align-items: center;
@@ -74,15 +44,13 @@ const CreateBtn = styled(TacoButton)`
   padding: 0 16px;
   margin-left: 0;
   border-radius: 10px;
-  && { background: #8050a0; border-color: #8050a0; color: white; }
-  &&:hover { background: #683e86; border-color: #683e86; }
 
   & > svg {
     width: 16px;
     height: 16px;
 
     path {
-      fill: white;
+      fill: currentColor;
     }
   }
 `;
@@ -191,9 +159,12 @@ function NavLayoutPickModal(props: {
 
 export const CreateDropdown = (props: { defaultVisible?: boolean; mode: HomeLayoutMode; setModify: any; modify: boolean }) => {
   const { defaultVisible, mode, setModify, modify} = props;
-  const [createDropdownVisible, setCreateDropdownVisible] = useState(false);
+  const [createDropdownVisible, setCreateDropdownVisible] = useState(Boolean(defaultVisible));
   const [layoutPickerVisible, setLayoutPickerVisible] = useState(false);
 
+  // The tutorial opens this menu initially and dismisses it when the guide ends.
+  useEffect(() => setCreateDropdownVisible(Boolean(defaultVisible)), [defaultVisible]);
+
   const user = useSelector(getUser);
 
   const [handleCreate, isCreating] = useCreateHomeRes(setModify, modify);
@@ -221,7 +192,7 @@ export const CreateDropdown = (props: { defaultVisible?: boolean; mode: HomeLayo
         <CreateMenuItem
           className={type === HomeResTypeEnum.Application ? createAppItemClass : undefined}
         >
-          {Icon && <Icon style={{ width: "16px", height: "16px", marginRight: "4px" }} />}
+          {Icon && <Icon aria-hidden="true" style={{ width: "16px", height: "16px", marginRight: "4px" }} />}
           {HomeResInfo[type].name}
         </CreateMenuItem>
       ),
@@ -244,38 +215,40 @@ export const CreateDropdown = (props: { defaultVisible?: boolean; mode: HomeLayo
         setVisible={setLayoutPickerVisible}
       />
       <Dropdown
-        open={createDropdownVisible || defaultVisible}
-        trigger={["hover"]}
-        getPopupContainer={(node) => node}
-        onOpenChange={() => setCreateDropdownVisible(!createDropdownVisible)}
-        popupRender={() => (
-          <CreateDropdownMenu
-            items={[
-              getCreateMenuItem(HomeResTypeEnum.Application, mode),
-              getCreateMenuItem(HomeResTypeEnum.Module, mode),
-              getCreateMenuItem(HomeResTypeEnum.Navigation, mode),
-              getCreateMenuItem(HomeResTypeEnum.Folder, mode),
-              mode === "view" || mode === "module" || mode === "folder"
-                ? {
-                    label: (
-                      <AppImport orgId={user.currentOrgId}>
-                        <CreateMenuItem>
-                          <ImportIconV2 width="16px" height="16px" style={{ marginRight: "4px" }} />
-                          {trans("home.import")}
-                        </CreateMenuItem>
-                      </AppImport>
-                    ),
-                    key: "import",
-                    style: { height: "32px" },
-                  }
-                : null,
-            ]}
-          />
-        )}
+        open={createDropdownVisible}
+        trigger={["click"]}
+        placement="bottomRight"
+        autoFocus
+        // Portaling into the button traps the menu underneath the resource cards.
+        getPopupContainer={(node) => node.ownerDocument.body}
+        onOpenChange={setCreateDropdownVisible}
+        overlayStyle={{ minWidth: 180 }}
+        menu={{
+          items: [
+            getCreateMenuItem(HomeResTypeEnum.Application, mode),
+            getCreateMenuItem(HomeResTypeEnum.Module, mode),
+            getCreateMenuItem(HomeResTypeEnum.Navigation, mode),
+            getCreateMenuItem(HomeResTypeEnum.Folder, mode),
+            mode === "view" || mode === "module" || mode === "folder"
+              ? {
+                  label: (
+                    <AppImport orgId={user.currentOrgId}>
+                      <CreateMenuItem>
+                        <ImportIconV2 aria-hidden="true" width="16px" height="16px" style={{ marginRight: "4px" }} />
+                        {trans("home.import")}
+                      </CreateMenuItem>
+                    </AppImport>
+                  ),
+                  key: "import",
+                  style: { height: "32px" },
+                }
+              : null,
+          ],
+        }}
       >
-        <CreateBtn buttonType={"primary"}>
+        <CreateBtn buttonType="primary" aria-haspopup="menu" aria-expanded={createDropdownVisible}>
           {isCreating ? trans("home.creating") : trans("newItem")}
-          <PackUpIcon />
+          <PackUpIcon aria-hidden="true" />
         </CreateBtn>
       </Dropdown>
     </>

From eafcfbe41979ffd1606b001de8918055b8d8c0ee Mon Sep 17 00:00:00 2001
From: Faran Javed <faran.code@gmail.com>
Date: Thu, 15 Oct 2026 01:58:54 +0500
Subject: [PATCH 4/4] fix: #2178 better UX for the news cards

---
 .../src/pages/ApplicationV2/NewsLayout.tsx    | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/NewsLayout.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/NewsLayout.tsx
index 6a09cd0a7..87730e901 100644
--- a/client/packages/lowcoder/src/pages/ApplicationV2/NewsLayout.tsx
+++ b/client/packages/lowcoder/src/pages/ApplicationV2/NewsLayout.tsx
@@ -128,7 +128,6 @@ export function NewsLayout() {
                 return (
                   <Col xs={24} sm={12} md={12} lg={8} key={`blog-${idx}`}>
                     <Card
-                      hoverable
                       cover={
                         <a href={url} target="_blank" rel="noreferrer">
                           <CardImage src={coverImage} alt={htmlTitle} loading="lazy"/>
@@ -177,15 +176,22 @@ export function NewsLayout() {
             <Row gutter={[16, 16]}>
               {youTubeData.map((item, idx) => {
                 const s = item.snippet;
+                const videoUrl = `https://www.youtube.com/watch?v=${item.id.videoId}`;
                 return (
                   <Col xs={24} sm={12} md={8} lg={6} key={`yt-${idx}`}>
                     <Card
                       hoverable
-                      cover={
-                        <a href={`https://www.youtube.com/watch?v=${item.id.videoId}`} target="_blank" rel="noreferrer">
-                          <CardImage src={s.thumbnails.high.url} alt={s.title} />
-                        </a>
-                      }
+                      role="link"
+                      tabIndex={0}
+                      aria-label={s.title}
+                      onClick={() => window.open(videoUrl, "_blank", "noopener,noreferrer")}
+                      onKeyDown={(event) => {
+                        if (event.key === "Enter") {
+                          event.preventDefault();
+                          event.currentTarget.click();
+                        }
+                      }}
+                      cover={<CardImage src={s.thumbnails.high.url} alt={s.title} />}
                     >
                       <Card.Meta
                         title={s.title}
@@ -213,7 +219,6 @@ export function NewsLayout() {
                 return (
                   <Col xs={24} sm={12} md={12} lg={8} key={`gh-${idx}`}>
                     <Card
-                      hoverable
                       title={`${c.tag_name} (${c.name})`}
                       extra={<a href={c.html_url} target="_blank" rel="noreferrer">View</a>}
                     >