diff --git "a/docs/PRD/\345\223\201\347\211\214\345\256\232\345\210\266 Logo \344\270\216\346\226\207\346\241\210\351\205\215\347\275\256 PRD.md" "b/docs/PRD/\345\223\201\347\211\214\345\256\232\345\210\266 Logo \344\270\216\346\226\207\346\241\210\351\205\215\347\275\256 PRD.md"
new file mode 100644
index 0000000000..10f98e854a
--- /dev/null
+++ "b/docs/PRD/\345\223\201\347\211\214\345\256\232\345\210\266 Logo \344\270\216\346\226\207\346\241\210\351\205\215\347\275\256 PRD.md"	
@@ -0,0 +1,546 @@
+# 品牌定制 Logo 与文案配置 PRD
+
+## 1. 背景
+
+BiSheng 需要在管理后台提供可视化的品牌定制能力，让系统管理员在不重新打包前端代码的情况下，配置系统品牌名称、管理后台与登录页 Logo、浏览器标签图标以及 Loading 图标/动画。
+
+同时，既有“系统品牌白标化定制手册”仍然保留：部署前仍可通过替换 `/assets/bisheng/` 下的默认素材和修改 `config.js` 完成基础白标化。本功能是在系统部署后提供可视化配置，不替代部署前静态替换方案。
+
+## 2. 产品目标
+
+1. 管理员可在系统配置中进入品牌定制页面，完成品牌名称和视觉素材配置。
+2. 配置保存后，通过运行时脚本下发到管理后台和工作台，避免重新构建前端包。
+3. Logo 素材支持默认素材和用户上传素材两类来源。
+4. 上传素材按用途分类存储和选择，下拉选项展示图片预览与文件名。
+5. 支持删除非默认上传素材；如果删除的是正在使用的素材，自动回退到对应默认素材。
+6. 每个可配置项都提供独立预览按钮，预览区展示对应系统界面并高亮生效位置。
+7. 保持工作台“构建 → 日常”已有图标配置逻辑不被品牌定制覆盖。
+
+## 3. 非目标与边界
+
+1. 不提供“品牌包”能力，不读取 `brand-default.json`。
+2. 不在品牌定制页面配置 `linsightAgentName`。该字段仍按系统品牌白标化定制手册，通过 `config.js` 控制。
+3. 不在品牌定制页面配置工作台左上角图标、欢迎页面图标、对话头像、欢迎语、输入框提示语等工作台日常配置；这些仍由“构建 → 日常”维护。
+4. 不提供图片裁剪、压缩、在线设计、颜色提取等素材编辑能力。
+5. 不支持按租户、部门、用户分别配置品牌；当前品牌定制为实例级配置。
+6. 不替代主题配色能力；主题配色和品牌定制只是同属于“外观设置”下的两个子选项卡。
+
+## 4. 入口与信息架构
+
+入口：
+
+`系统 → 外观设置 → 品牌定制`
+
+外观设置下包含两个子选项卡：
+
+| 子选项卡 | 说明 |
+| --- | --- |
+| 主题配色 | 原有颜色配置与组件预览能力 |
+| 品牌定制 | 新增品牌文案、Logo、Loading 配置能力 |
+
+品牌定制页面分为四个区域：
+
+1. 文案配置
+2. Logo 素材
+3. Loading 配置
+4. 预览
+
+## 5. 角色与权限
+
+| 角色 | 权限 |
+| --- | --- |
+| 管理员 | 可查看、上传、删除、保存、重置品牌配置 |
+| 普通用户 | 不可进入品牌定制页面，但可看到已生效的品牌展示 |
+| 未登录用户 | 可在登录页加载公开运行时品牌配置 |
+
+后端配置接口需要管理员鉴权；运行时脚本 `/api/v1/brand/runtime.js` 为公开读取接口，用于页面初始化前加载品牌配置。
+
+## 6. 功能说明
+
+### 6.1 文案配置
+
+当前品牌定制页面仅配置一个文案项：
+
+| 配置项 | 字段 | 中文列 | 英文列 | 说明 |
+| --- | --- | --- | --- | --- |
+| 系统品牌名称 | `brandName` | 支持 | 支持 | 用于浏览器标题，以及系统中通过品牌名称变量展示的文案 |
+
+规则：
+
+1. 中文、英文分别存储。
+2. 单字段最长 20 个字符。
+3. 不允许输入 `<`、`>`，避免 HTML 注入。
+4. 展示时根据当前语言取值：
+   - 中文环境优先取 `zh`，为空时回退 `en`。
+   - 非中文环境优先取 `en`，为空时回退 `zh`。
+5. 品牌定制保存接口不接收、不保存、不下发 `linsightAgentName`。
+6. `linsightAgentName` 继续通过部署目录的 `config.js` 配置，保证原系统品牌白标化定制手册方案不受影响。
+
+### 6.2 Logo 素材配置
+
+品牌定制负责以下 Logo/图片配置：
+
+| 配置项 | 字段 | 默认素材 | 建议规格 | 生效位置 |
+| --- | --- | --- | --- | --- |
+| 浏览器标签图标 | `assets.favicon` | `/assets/bisheng/favicon.ico` | 32 x 32，建议 ico | 管理后台浏览器标签；工作台初始运行时也会加载，之后可能被“构建 → 日常”的对话头像配置覆盖 |
+| 登录页左侧大图 | `assets.loginHeroLight` | `/assets/bisheng/login-logo-big.png` | 420 x 704 | 管理后台登录页浅色模式左侧大图 |
+| 登录页左侧大图（暗黑） | `assets.loginHeroDark` | `/assets/bisheng/login-logo-dark.png` | 420 x 704 | 管理后台登录页暗黑模式左侧大图 |
+| 表单与顶部 Logo | `assets.headerLogoLight` | `/assets/bisheng/login-logo-small.png` | 410 x 120 | 管理后台左上角 Logo、登录页顶部 Logo（浅色） |
+| 表单与顶部 Logo（暗黑） | `assets.headerLogoDark` | `/assets/bisheng/logo-small-dark.png` | 410 x 120 | 管理后台左上角 Logo、登录页顶部 Logo（暗黑） |
+
+不由品牌定制负责的工作台图标：
+
+| 工作台图标 | 配置入口 |
+| --- | --- |
+| 工作台左上角图标 | 构建 → 日常 → 左侧边栏图标 |
+| 欢迎页面图标与对话头像 | 构建 → 日常 → 欢迎页面图标 & 对话头像 |
+| 工作台最终 favicon | 优先跟随“欢迎页面图标 & 对话头像” |
+
+### 6.3 素材上传、选择与删除
+
+上传规则：
+
+1. 支持格式：`ico`、`png`、`jpg`、`jpeg`、`svg`、`gif`、`webp`。
+2. 单文件不超过 5MB。
+3. SVG 不允许包含 `<script>`、`javascript:`、事件处理器等风险内容。
+4. 上传时按配置项分类存储到对象存储。
+5. 存储对象名格式：`brand-assets/{category}/{uuid}_{原始文件名}`。
+6. 页面展示文件名时隐藏对象存储路径，只展示用户上传时选择的原始文件名。
+
+分类目录：
+
+| 配置项 | category | 对象存储前缀 |
+| --- | --- | --- |
+| 浏览器标签图标 | `favicon` | `brand-assets/favicon/` |
+| 登录页左侧大图 | `loginHeroLight` | `brand-assets/login-hero-light/` |
+| 登录页左侧大图（暗黑） | `loginHeroDark` | `brand-assets/login-hero-dark/` |
+| 表单与顶部 Logo | `headerLogoLight` | `brand-assets/header-logo-light/` |
+| 表单与顶部 Logo（暗黑） | `headerLogoDark` | `brand-assets/header-logo-dark/` |
+| Loading 图标 | `loadingIcon` | `brand-assets/loading-icon/` |
+
+选择规则：
+
+1. 每个配置项的下拉框固定包含一个默认素材选项。
+2. 下拉选项展示图片预览、文件名、默认标识。
+3. 非默认素材右侧展示删除按钮。
+4. 默认素材不可删除。
+5. 删除当前正在使用的素材后，该配置项自动切换为对应默认素材。
+
+### 6.4 Loading 配置
+
+| 配置项 | 字段 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| Loading 图标 | `loading.icon` / `URLLoadingIcon` | 空，使用系统内置蓝色横线 Loading | 用于系统 Loading 组件 |
+| Loading 动画 | `loading.animation` | 空 | 支持无动画、旋转、脉冲、弹跳 |
+
+Loading 图标来源：
+
+1. 内置默认 Loading：未配置图片时使用系统内置蓝色横线 Loading。
+2. 上传素材：上传到 `brand-assets/loading-icon/` 后可在下拉框选择。
+3. URL 素材：Loading 图标支持粘贴 URL；Logo 素材不支持 URL 输入。
+
+URL 规则：
+
+1. 不允许包含空格、`<`、`>`。
+2. 仅支持以 `http://` 或 `https://` 开头的完整 URL，例如 `https://example.com/loading.svg`。
+3. URL 可用性由用户自行保证，系统不校验远程文件长期有效性。
+
+### 6.5 预览
+
+预览区默认展示空白占位图。用户点击任一配置项右侧的“预览”按钮后，预览区展示对应系统界面，并用明显蓝色描边与外扩高亮标识该配置项影响的位置。
+
+预览规则：
+
+1. 系统品牌名称：展示登录页/浏览器框架预览，并高亮浏览器标题与页面品牌文案位置。
+2. 浏览器标签图标：展示浏览器框架预览，并高亮标签图标。
+3. 登录页左侧大图：展示登录页完整结构，并高亮左侧大图。
+4. 表单与顶部 Logo：展示登录页或管理后台结构，并高亮 Logo。
+5. Loading 图标/动画：展示加载场景，并高亮 Loading 图标。
+6. 与当前配置项无关的内容可用色块或模糊骨架表示。
+7. 预览使用当前表单值，无需保存即可预览。
+
+### 6.6 保存
+
+点击保存后：
+
+1. 前端将品牌定制可编辑字段提交到后端。
+2. 后端合并默认值并持久化到实例级配置项 `brand_config`。
+3. 保存成功后，当前管理后台页面即时更新 `window.BRAND_CONFIG`、浏览器标题和 favicon。
+4. 登录页、管理后台主框架 Logo、工作台启动配置在刷新或重新进入页面后读取最新运行时配置。
+5. 保存成功展示成功提示；失败时按统一请求错误提示展示。
+
+保存接口不保存 `linsightAgentName`，避免覆盖部署前 `config.js` 中的手册配置。
+
+### 6.7 重置默认
+
+点击“重置默认”后：
+
+1. 页面表单恢复为系统默认品牌名称、默认 Logo、默认 Loading 配置。
+2. 用户仍需点击保存才会写入后端。
+3. 保存后默认素材路径保持为 `/assets/bisheng/...`，继续兼容部署前静态替换方案。
+
+## 7. 生效机制
+
+### 7.1 静态默认配置
+
+管理后台和工作台入口 HTML 都会先加载静态配置：
+
+`/assets/bisheng/config.js`
+
+该文件用于部署前白标化，典型结构如下：
+
+```javascript
+window.BRAND_CONFIG = {
+    brandName: {
+        zh: "BISHENG",
+        en: "BISHENG"
+    },
+    linsightAgentName: {
+        zh: "灵思",
+        en: "Linsight"
+    },
+    URLLoadingIcon: "",
+    loadingIcon: "",
+    loadingAnimation: ""
+};
+```
+
+部署前白标化仍按原手册操作：
+
+1. 替换部署目录 `/assets/bisheng/` 下的默认图片文件。
+2. 修改 `config.js` 中的 `brandName`、`linsightAgentName`、`URLLoadingIcon` 等字段。
+3. 保持默认文件名不变：
+   - `favicon.ico`
+   - `login-logo-big.png`
+   - `login-logo-dark.png`
+   - `login-logo-small.png`
+   - `logo-small-dark.png`
+   - 可选 `loading.svg`，并在 `config.js` 中配置 Loading 路径。
+
+### 7.2 运行时配置
+
+静态 `config.js` 加载后，页面继续加载：
+
+`/api/v1/brand/runtime.js`
+
+运行时脚本负责：
+
+1. 读取后端持久化的品牌定制配置。
+2. 与已有 `window.BRAND_CONFIG` 合并。
+3. 更新 `brandName`、Logo assets、Loading 配置。
+4. 不下发 `linsightAgentName`，避免覆盖 `config.js` 手册配置。
+5. 设置 `document.title`。
+6. 设置 favicon。
+7. 对相对资源路径按当前应用 base path 归一化。
+8. 响应头设置 `Cache-Control: no-store`，避免保存后刷新仍读旧配置。
+
+加载顺序：
+
+1. `config.js`
+2. `runtime.js`
+3. 前端应用初始化
+
+### 7.3 本地与部署环境
+
+正式部署中，管理后台和工作台可在同一个域名与端口下运行，例如：
+
+`http://host:3002/sys`
+
+`http://host:3002/workspace/c/new`
+
+本地开发中，管理后台和工作台可能分别运行在不同端口，例如：
+
+`http://127.0.0.1:3001/sys`
+
+`http://127.0.0.1:4001/workspace/c/new`
+
+要求：
+
+1. 工作台应通过注入的后端/平台 base URL 加载 `config.js` 与 `runtime.js`。
+2. 管理后台保存品牌配置后，工作台刷新或重新进入时应读取同一份后端品牌配置。
+3. 同域部署和本地分端口部署都应正常工作。
+
+## 8. 数据模型
+
+### 8.1 后端持久化数据
+
+后端配置项 key：
+
+`brand_config`
+
+持久化 JSON 示例：
+
+```json
+{
+  "brandName": {
+    "zh": "毕昇",
+    "en": "BISHENG"
+  },
+  "assets": {
+    "favicon": {
+      "url": "/assets/bisheng/favicon.ico",
+      "relative_path": "",
+      "file_name": ""
+    },
+    "loginHeroLight": {
+      "url": "/assets/bisheng/login-logo-big.png",
+      "relative_path": "",
+      "file_name": ""
+    },
+    "loginHeroDark": {
+      "url": "/assets/bisheng/login-logo-dark.png",
+      "relative_path": "",
+      "file_name": ""
+    },
+    "headerLogoLight": {
+      "url": "/assets/bisheng/login-logo-small.png",
+      "relative_path": "",
+      "file_name": ""
+    },
+    "headerLogoDark": {
+      "url": "/assets/bisheng/logo-small-dark.png",
+      "relative_path": "",
+      "file_name": ""
+    }
+  },
+  "loading": {
+    "icon": null,
+    "iconOptions": [],
+    "animation": ""
+  },
+  "URLLoadingIcon": ""
+}
+```
+
+字段说明：
+
+| 字段 | 说明 |
+| --- | --- |
+| `brandName` | 品牌定制页面唯一可配置文案 |
+| `assets.*.url` | 当前可访问 URL；默认素材为站内路径，上传素材保存运行时生成的访问 URL |
+| `assets.*.relative_path` | 上传到对象存储后的对象路径；默认素材为空 |
+| `assets.*.file_name` | 上传时的原始文件名，用于 UI 展示 |
+| `loading.icon` | 当前选择的 Loading 图标 |
+| `loading.iconOptions` | 用户粘贴 URL 后形成的可选项 |
+| `loading.animation` | Loading 动画类名 |
+| `URLLoadingIcon` | 兼容历史 Loading 字段 |
+
+### 8.2 兼容字段
+
+`BrandConfig` 模型仍保留 `linsightAgentName`，用于兼容已有前端 i18n 和静态 `config.js`。但品牌定制保存模型 `BrandConfigUpdate` 不包含该字段，runtime payload 也会移除该字段。
+
+## 9. API 设计
+
+### 9.1 获取品牌配置
+
+`GET /api/v1/brand/config`
+
+权限：管理员。
+
+返回：合并默认值后的品牌配置。
+
+### 9.2 保存品牌配置
+
+`PUT /api/v1/brand/config`
+
+权限：管理员。
+
+请求体：`BrandConfigUpdate`，包含 `brandName`、`assets`、`loading`、`URLLoadingIcon`。
+
+说明：请求体不包含 `linsightAgentName`。
+
+返回：保存后的品牌配置。
+
+### 9.3 获取素材选项
+
+`GET /api/v1/brand/assets/options?category={category}`
+
+权限：管理员。
+
+支持 `category`：
+
+1. `favicon`
+2. `loginHeroLight`
+3. `loginHeroDark`
+4. `headerLogoLight`
+5. `headerLogoDark`
+6. `loadingIcon`
+
+返回：默认素材 + 对应分类目录下已上传素材列表。
+
+### 9.4 上传素材
+
+`POST /api/v1/brand/assets`
+
+权限：管理员。
+
+请求：`multipart/form-data`
+
+| 字段 | 说明 |
+| --- | --- |
+| `file` | 上传文件 |
+| `category` | 素材分类 |
+
+返回：素材 URL、对象存储路径、原始文件名。
+
+### 9.5 删除素材
+
+`DELETE /api/v1/brand/assets?category={category}&relative_path={relative_path}`
+
+权限：管理员。
+
+规则：
+
+1. 只能删除对应分类目录下的上传素材。
+2. 不允许删除默认素材。
+3. 删除后如果该素材正在被配置使用，则后端配置自动回退到默认素材。
+
+返回：该分类默认素材。
+
+### 9.6 运行时脚本
+
+`GET /api/v1/brand/runtime.js`
+
+权限：公开。
+
+返回：JavaScript 脚本。
+
+作用：
+
+1. 将品牌配置写入 `window.BRAND_CONFIG`。
+2. 更新 `document.title`。
+3. 更新 favicon。
+4. 归一化相对资源路径。
+5. 保留 `config.js` 中的 `linsightAgentName`。
+
+## 10. 前端集成要求
+
+### 10.1 管理后台
+
+1. `index.html` 按顺序加载 `/assets/bisheng/config.js` 与 `/api/v1/brand/runtime.js`。
+2. 登录页左侧大图使用 `loginHeroLight/loginHeroDark`。
+3. 登录页顶部 Logo 使用 `headerLogoLight/headerLogoDark`。
+4. 管理后台主框架左上角 Logo 使用 `headerLogoLight/headerLogoDark`。
+5. 浏览器标题与 favicon 由运行时配置控制。
+6. 保存成功后当前页面即时更新标题与 favicon；其他 Logo 位置刷新后生效。
+
+### 10.2 工作台
+
+1. `index.html` 按顺序加载 `config.js` 与 `runtime.js`。
+2. 系统品牌名称可影响工作台初始化阶段的浏览器标题及 i18n 品牌变量。
+3. runtime 会设置工作台初始 favicon。
+4. 工作台加载“构建 → 日常”配置后，如果存在 `assistantIcon.image`，工作台 favicon 会被该配置覆盖。
+5. 工作台左侧边栏图标、欢迎页面图标、对话头像继续由“构建 → 日常”配置，不由品牌定制接管。
+
+## 11. 部署前白标化操作说明
+
+适用于客户在系统部署前就希望默认展示客户品牌的场景。
+
+操作步骤：
+
+1. 在部署产物的 `/assets/bisheng/` 目录准备默认素材。
+2. 使用客户素材替换以下文件，文件名保持不变：
+   - `favicon.ico`
+   - `login-logo-big.png`
+   - `login-logo-dark.png`
+   - `login-logo-small.png`
+   - `logo-small-dark.png`
+3. 如需默认 Loading 图标，放置 `loading.svg` 或其他图片，并在 `config.js` 中配置：
+   - `URLLoadingIcon: "/assets/bisheng/loading.svg"`
+   - `loadingIcon: "/assets/bisheng/loading.svg"`
+   - `loadingAnimation` 按需配置。
+4. 修改 `config.js`：
+   - `brandName`：系统品牌名称。
+   - `linsightAgentName`：智能体功能名。
+5. 启动系统后，默认素材和默认文案即为客户品牌。
+6. 系统部署后，管理员仍可在“系统 → 外观设置 → 品牌定制”中上传新素材或修改系统品牌名称。
+
+注意：
+
+1. 如果部署前只替换图片、不修改 `config.js`，文案仍使用默认文案。
+2. 如果部署后在品牌定制中保存了配置，后端 `brand_config` 会覆盖同名 Logo 与 `brandName` 默认值。
+3. `linsightAgentName` 不会被品牌定制覆盖，仍以 `config.js` 为准。
+
+## 12. 验收标准
+
+### 12.1 页面入口与布局
+
+1. 系统配置中原“主题配色”入口调整为“外观设置”。
+2. 外观设置下存在“主题配色”和“品牌定制”两个子选项卡。
+3. 品牌定制页面展示文案配置、Logo 素材、Loading 配置、预览区。
+4. 文案配置中仅展示“系统品牌名称”，不展示“智能体功能名”。
+
+### 12.2 文案
+
+1. 修改系统品牌名称中文/英文并保存后，浏览器标题按当前语言取对应字段。
+2. 中文环境优先显示中文，英文或非中文环境优先显示英文。
+3. 任一语言为空时，可回退到另一语言。
+4. 输入 `<` 或 `>` 时后端拒绝保存。
+5. 品牌定制保存后不影响 `config.js` 中的 `linsightAgentName`。
+
+### 12.3 Logo 素材
+
+1. 每个 Logo 配置项下拉框都展示默认素材。
+2. 上传素材后，下拉框展示图片预览和原始文件名，不展示对象存储路径。
+3. 选择上传素材并保存后，刷新对应页面可看到新素材。
+4. 非默认上传素材可删除。
+5. 删除正在使用的素材后，该配置项自动回退默认素材。
+6. 默认素材不可删除。
+
+### 12.4 Loading
+
+1. 未配置 Loading 图标时，使用系统内置蓝色横线 Loading。
+2. 上传 Loading 图标并保存后，系统 Loading 组件使用新图标。
+3. 粘贴合法 URL 后，可选择该 URL 作为 Loading 图标。
+4. 选择旋转、脉冲、弹跳动画后，预览区立即展示对应动画。
+5. 保存后刷新页面，Loading 动画配置继续生效。
+
+### 12.5 预览
+
+1. 未点击预览按钮时，预览区展示空白占位图。
+2. 点击配置项预览按钮后，预览区展示对应系统界面。
+3. 预览区高亮框足够明显，不被文案遮挡。
+4. 预览使用当前表单值，不要求先保存。
+5. 与当前配置项无关的内容可使用骨架或色块表示。
+
+### 12.6 运行时与兼容
+
+1. `/api/v1/brand/runtime.js` 返回 JavaScript，且响应不缓存。
+2. 管理后台和工作台均能加载 runtime。
+3. 本地 3001 管理后台保存配置后，4001 工作台刷新可读取同一份配置。
+4. 同域部署时，管理后台和工作台也能读取同一份配置。
+5. runtime 不覆盖 `config.js` 中的 `linsightAgentName`。
+6. 默认 `/assets/bisheng/...` 静态替换方案仍可用。
+
+## 13. 风险与处理
+
+| 风险 | 处理 |
+| --- | --- |
+| 品牌定制与工作台日常配置边界混淆 | PRD 和 UI 文案明确：工作台侧栏图标、欢迎图标、对话头像归“构建 → 日常” |
+| 删除素材导致页面裂图 | 删除当前使用素材时自动回退默认素材 |
+| 对象存储 URL 临时签名过期 | 持久化 `relative_path`，读取配置和 runtime 时重新生成可访问 URL |
+| 本地分端口导致工作台读不到配置 | 工作台通过注入 base URL 加载 `config.js` 和 `runtime.js` |
+| runtime 覆盖部署前手册配置 | runtime 不下发 `linsightAgentName`，仅覆盖品牌定制负责的字段 |
+| SVG 安全风险 | 上传时拒绝脚本、事件处理器和 `javascript:` 风险内容 |
+
+## 14. 发布与回滚
+
+发布要求：
+
+1. 后端注册 `/api/v1/brand/*` 路由。
+2. 管理后台和工作台入口 HTML 加载 `config.js` 与 `runtime.js`。
+3. 管理后台和工作台都包含 `/assets/bisheng/` 默认静态素材。
+4. MinIO/public bucket 与文件访问代理在本地和部署环境均可访问。
+
+回滚策略：
+
+1. 前端可回退到仅使用静态 `config.js` 与默认素材。
+2. 后端保留已有 `brand_config`，不主动删除。
+3. 如需清空运行时配置，可删除或重置 `brand_config`，系统回退到默认 `/assets/bisheng/...` 素材。
+
+## 15. 待后续确认
+
+1. 是否需要在品牌定制中增加“清空后端配置并完全回到部署前手册默认值”的操作。
+2. 是否需要增加素材尺寸校验或上传后尺寸提示。
+3. 是否需要记录品牌配置保存、上传、删除操作日志。
+4. 是否需要未来按租户支持不同品牌配置。
diff --git a/src/backend/bisheng/api/router.py b/src/backend/bisheng/api/router.py
index a8f33df467..a096bb3302 100644
--- a/src/backend/bisheng/api/router.py
+++ b/src/backend/bisheng/api/router.py
@@ -39,6 +39,7 @@
 from bisheng.tenant.api.router import router as tenant_router
 from bisheng.admin.api.router import router as admin_router
 from bisheng.approval.api.router import router as approval_router
+from bisheng.brand.api.router import router as brand_router
 from bisheng.sensitive_word.api.router import router as sensitive_word_policy_router
 from bisheng.workstation.api.endpoints.conversation_export import router as conversation_export_router
 
@@ -86,6 +87,7 @@
 router.include_router(citation_router)
 router.include_router(admin_router)
 router.include_router(approval_router)
+router.include_router(brand_router)
 router.include_router(sensitive_word_policy_router)
 
 router_rpc = APIRouter(prefix='/api/v2', )
diff --git a/src/backend/bisheng/brand/__init__.py b/src/backend/bisheng/brand/__init__.py
new file mode 100644
index 0000000000..fba61fc405
--- /dev/null
+++ b/src/backend/bisheng/brand/__init__.py
@@ -0,0 +1 @@
+"""Brand customization module."""
diff --git a/src/backend/bisheng/brand/api/__init__.py b/src/backend/bisheng/brand/api/__init__.py
new file mode 100644
index 0000000000..d7c42f7149
--- /dev/null
+++ b/src/backend/bisheng/brand/api/__init__.py
@@ -0,0 +1 @@
+"""Brand API package."""
diff --git a/src/backend/bisheng/brand/api/endpoints/__init__.py b/src/backend/bisheng/brand/api/endpoints/__init__.py
new file mode 100644
index 0000000000..2125bfe1b5
--- /dev/null
+++ b/src/backend/bisheng/brand/api/endpoints/__init__.py
@@ -0,0 +1 @@
+"""Brand endpoint package."""
diff --git a/src/backend/bisheng/brand/api/endpoints/brand.py b/src/backend/bisheng/brand/api/endpoints/brand.py
new file mode 100644
index 0000000000..fe4e2cf958
--- /dev/null
+++ b/src/backend/bisheng/brand/api/endpoints/brand.py
@@ -0,0 +1,81 @@
+from fastapi import APIRouter, Depends, File, Form, Query, UploadFile
+from fastapi.responses import PlainTextResponse
+
+from bisheng.brand.domain.schemas.brand_schema import BrandAssetCategory, BrandConfigUpdate
+from bisheng.brand.domain.services.brand_service import BrandService
+from bisheng.common.dependencies.user_deps import UserPayload
+from bisheng.common.schemas.api import resp_200
+
+
+router = APIRouter()
+
+
+def get_brand_service() -> BrandService:
+    return BrandService()
+
+
+@router.get('/config')
+async def get_brand_config(
+    admin_user: UserPayload = Depends(UserPayload.get_admin_user),
+    service: BrandService = Depends(get_brand_service),
+):
+    config = await service.get_config()
+    return resp_200(config.model_dump(mode='json'))
+
+
+@router.put('/config')
+async def update_brand_config(
+    data: BrandConfigUpdate,
+    admin_user: UserPayload = Depends(UserPayload.get_admin_user),
+    service: BrandService = Depends(get_brand_service),
+):
+    config = await service.save_config(data)
+    return resp_200(config.model_dump(mode='json'))
+
+
+@router.get('/assets/options')
+async def list_brand_asset_options(
+    category: BrandAssetCategory = Query(...),
+    admin_user: UserPayload = Depends(UserPayload.get_admin_user),
+    service: BrandService = Depends(get_brand_service),
+):
+    options = await service.list_asset_options(category)
+    return resp_200([option.model_dump(mode='json') for option in options])
+
+
+@router.post('/assets')
+async def upload_brand_asset(
+    admin_user: UserPayload = Depends(UserPayload.get_admin_user),
+    file: UploadFile = File(...),
+    category: BrandAssetCategory | None = Form(default=None),
+    service: BrandService = Depends(get_brand_service),
+):
+    try:
+        result = await service.upload_asset(file, category=category)
+        return resp_200(result.model_dump(mode='json'))
+    finally:
+        if file:
+            await file.close()
+
+
+@router.delete('/assets')
+async def delete_brand_asset(
+    category: BrandAssetCategory = Query(...),
+    relative_path: str = Query(...),
+    admin_user: UserPayload = Depends(UserPayload.get_admin_user),
+    service: BrandService = Depends(get_brand_service),
+):
+    default_asset = await service.delete_asset(category, relative_path)
+    return resp_200(default_asset.model_dump(mode='json'))
+
+
+@router.get('/runtime.js')
+async def get_brand_runtime_script(
+    service: BrandService = Depends(get_brand_service),
+):
+    script = await service.build_runtime_script()
+    return PlainTextResponse(
+        script,
+        media_type='application/javascript',
+        headers={'Cache-Control': 'no-store'},
+    )
diff --git a/src/backend/bisheng/brand/api/router.py b/src/backend/bisheng/brand/api/router.py
new file mode 100644
index 0000000000..2824abdffd
--- /dev/null
+++ b/src/backend/bisheng/brand/api/router.py
@@ -0,0 +1,9 @@
+"""Brand router aggregation."""
+
+from fastapi import APIRouter
+
+from bisheng.brand.api.endpoints.brand import router as brand_router
+
+
+router = APIRouter(prefix='/brand', tags=['Brand'])
+router.include_router(brand_router)
diff --git a/src/backend/bisheng/brand/domain/__init__.py b/src/backend/bisheng/brand/domain/__init__.py
new file mode 100644
index 0000000000..e73393f0f0
--- /dev/null
+++ b/src/backend/bisheng/brand/domain/__init__.py
@@ -0,0 +1 @@
+"""Brand domain package."""
diff --git a/src/backend/bisheng/brand/domain/repositories/__init__.py b/src/backend/bisheng/brand/domain/repositories/__init__.py
new file mode 100644
index 0000000000..76e33f0259
--- /dev/null
+++ b/src/backend/bisheng/brand/domain/repositories/__init__.py
@@ -0,0 +1 @@
+"""Brand repositories package."""
diff --git a/src/backend/bisheng/brand/domain/repositories/brand_config_repository.py b/src/backend/bisheng/brand/domain/repositories/brand_config_repository.py
new file mode 100644
index 0000000000..6980880d71
--- /dev/null
+++ b/src/backend/bisheng/brand/domain/repositories/brand_config_repository.py
@@ -0,0 +1,14 @@
+from typing import Optional
+
+from bisheng.common.models.config import Config, ConfigDao
+
+
+class BrandConfigRepository:
+    """Persistence adapter for instance-level brand config."""
+
+    async def get_value(self, key: str) -> Optional[str]:
+        config = await ConfigDao.aget_config_by_key(key)
+        return config.value if config else None
+
+    async def upsert_value(self, key: str, value: str) -> Config:
+        return await ConfigDao.insert_or_update_config(key, value)
diff --git a/src/backend/bisheng/brand/domain/schemas/__init__.py b/src/backend/bisheng/brand/domain/schemas/__init__.py
new file mode 100644
index 0000000000..c4017be33e
--- /dev/null
+++ b/src/backend/bisheng/brand/domain/schemas/__init__.py
@@ -0,0 +1 @@
+"""Brand schemas package."""
diff --git a/src/backend/bisheng/brand/domain/schemas/brand_schema.py b/src/backend/bisheng/brand/domain/schemas/brand_schema.py
new file mode 100644
index 0000000000..f9d0291df5
--- /dev/null
+++ b/src/backend/bisheng/brand/domain/schemas/brand_schema.py
@@ -0,0 +1,71 @@
+from typing import Literal, Optional
+
+from pydantic import BaseModel, Field, field_validator
+
+
+class BrandText(BaseModel):
+    zh: str = Field(default='', max_length=20)
+    en: str = Field(default='', max_length=20)
+
+    @field_validator('zh', 'en')
+    @classmethod
+    def validate_plain_text(cls, value: str) -> str:
+        text = value.strip()
+        if '<' in text or '>' in text:
+            raise ValueError('HTML is not allowed')
+        return text
+
+
+class BrandAsset(BaseModel):
+    url: str = ''
+    relative_path: str = ''
+    file_name: str = ''
+
+
+BrandAssetCategory = Literal[
+    'favicon',
+    'loginHeroLight',
+    'loginHeroDark',
+    'headerLogoLight',
+    'headerLogoDark',
+    'loadingIcon',
+]
+
+
+class BrandAssetOption(BrandAsset):
+    is_default: bool = False
+
+
+class BrandAssets(BaseModel):
+    favicon: BrandAsset = Field(default_factory=BrandAsset)
+    loginHeroLight: BrandAsset = Field(default_factory=BrandAsset)
+    loginHeroDark: BrandAsset = Field(default_factory=BrandAsset)
+    headerLogoLight: BrandAsset = Field(default_factory=BrandAsset)
+    headerLogoDark: BrandAsset = Field(default_factory=BrandAsset)
+
+
+class BrandLoading(BaseModel):
+    icon: Optional[BrandAsset] = None
+    iconOptions: list[BrandAsset] = Field(default_factory=list)
+    animation: Literal['', 'animate-spin', 'animate-pulse', 'animate-bounce'] = ''
+
+
+class BrandConfig(BaseModel):
+    brandName: BrandText = Field(default_factory=lambda: BrandText(zh='BISHENG', en='BISHENG'))
+    linsightAgentName: BrandText = Field(default_factory=lambda: BrandText(zh='灵思', en='Linsight'))
+    assets: BrandAssets = Field(default_factory=BrandAssets)
+    loading: BrandLoading = Field(default_factory=BrandLoading)
+    URLLoadingIcon: str = ''
+
+
+class BrandConfigUpdate(BaseModel):
+    brandName: BrandText = Field(default_factory=lambda: BrandText(zh='BISHENG', en='BISHENG'))
+    assets: BrandAssets = Field(default_factory=BrandAssets)
+    loading: BrandLoading = Field(default_factory=BrandLoading)
+    URLLoadingIcon: str = ''
+
+
+class BrandAssetUploadResponse(BaseModel):
+    url: str
+    relative_path: str
+    file_name: str
diff --git a/src/backend/bisheng/brand/domain/services/__init__.py b/src/backend/bisheng/brand/domain/services/__init__.py
new file mode 100644
index 0000000000..4fe5e3b715
--- /dev/null
+++ b/src/backend/bisheng/brand/domain/services/__init__.py
@@ -0,0 +1 @@
+"""Brand services package."""
diff --git a/src/backend/bisheng/brand/domain/services/brand_service.py b/src/backend/bisheng/brand/domain/services/brand_service.py
new file mode 100644
index 0000000000..a5b2e356dc
--- /dev/null
+++ b/src/backend/bisheng/brand/domain/services/brand_service.py
@@ -0,0 +1,453 @@
+import asyncio
+import json
+import mimetypes
+import re
+from copy import deepcopy
+from datetime import datetime, timezone
+from pathlib import PurePath
+from typing import Any
+from uuid import uuid4
+
+from fastapi import HTTPException, UploadFile
+from loguru import logger
+
+from bisheng.brand.domain.repositories.brand_config_repository import BrandConfigRepository
+from bisheng.brand.domain.schemas.brand_schema import (
+    BrandAsset,
+    BrandAssetCategory,
+    BrandAssetOption,
+    BrandConfigUpdate,
+    BrandAssetUploadResponse,
+    BrandConfig,
+    BrandText,
+)
+from bisheng.common.errcode.server import UploadFileEmptyError, UploadFileExtError
+from bisheng.common.services.config_service import settings as bisheng_settings
+from bisheng.core.storage.minio.minio_manager import get_minio_storage
+
+
+BRAND_CONFIG_KEY = 'brand_config'
+MAX_BRAND_ASSET_BYTES = 5 * 1024 * 1024
+SUPPORTED_EXTENSIONS = {'ico', 'png', 'jpg', 'jpeg', 'svg', 'gif', 'webp'}
+DEFAULT_ASSET_URLS = {
+    'favicon': '/assets/bisheng/favicon.ico',
+    'loginHeroLight': '/assets/bisheng/login-logo-big.png',
+    'loginHeroDark': '/assets/bisheng/login-logo-dark.png',
+    'headerLogoLight': '/assets/bisheng/login-logo-small.png',
+    'headerLogoDark': '/assets/bisheng/logo-small-dark.png',
+}
+ASSET_CATEGORY_PREFIXES: dict[BrandAssetCategory, str] = {
+    'favicon': 'brand-assets/favicon',
+    'loginHeroLight': 'brand-assets/login-hero-light',
+    'loginHeroDark': 'brand-assets/login-hero-dark',
+    'headerLogoLight': 'brand-assets/header-logo-light',
+    'headerLogoDark': 'brand-assets/header-logo-dark',
+    'loadingIcon': 'brand-assets/loading-icon',
+}
+UPLOAD_NAME_PREFIX_PATTERN = re.compile(r'^[0-9a-f]{32}_(.+)$')
+UNSAFE_FILENAME_PATTERN = re.compile(r'[<>:"|?*\x00-\x1f\x7f]+')
+SCRIPT_RISK_PATTERN = re.compile(
+    rb'(<\s*script\b|javascript\s*:|on(?:load|error|click|mouseover|focus)\s*=)',
+    re.IGNORECASE,
+)
+
+
+def _builtin_config() -> BrandConfig:
+    config = BrandConfig()
+    for key, url in DEFAULT_ASSET_URLS.items():
+        setattr(config.assets, key, BrandAsset(url=url, relative_path='', file_name=''))
+    return config
+
+
+def _merge_text(default_text: BrandText, value: Any) -> BrandText:
+    if not isinstance(value, dict):
+        return deepcopy(default_text)
+    zh = str(value.get('zh') or '').strip()
+    en = str(value.get('en') or '').strip()
+    return BrandText(
+        zh=zh or default_text.zh,
+        en=en or default_text.en,
+    )
+
+
+def _merge_asset(default_asset: BrandAsset, value: Any) -> BrandAsset:
+    if not isinstance(value, dict):
+        return deepcopy(default_asset)
+    return BrandAsset(
+        url=str(value.get('url') or '').strip() or default_asset.url,
+        relative_path=str(value.get('relative_path') or '').strip(),
+        file_name=str(value.get('file_name') or '').strip(),
+    )
+
+
+def _default_config() -> BrandConfig:
+    return _builtin_config()
+
+
+class BrandService:
+    def __init__(self, repository: BrandConfigRepository | None = None) -> None:
+        self.repository = repository or BrandConfigRepository()
+
+    async def get_config(self) -> BrandConfig:
+        raw_value = await self.repository.get_value(BRAND_CONFIG_KEY)
+        config = _default_config()
+        if raw_value:
+            try:
+                saved = BrandConfig.model_validate(json.loads(raw_value))
+                config = self._merge_with_defaults(saved)
+            except (json.JSONDecodeError, ValueError) as exc:
+                logger.warning('Invalid brand_config in DB, using defaults: %s', exc)
+        await self._hydrate_asset_urls(config)
+        return config
+
+    async def save_config(self, config: BrandConfigUpdate) -> BrandConfig:
+        normalized = self._merge_with_defaults(config)
+        normalized.URLLoadingIcon = self._resolve_loading_icon_url(normalized)
+        persisted = normalized.model_dump(mode='json')
+        persisted.pop('linsightAgentName', None)
+        await self.repository.upsert_value(
+            BRAND_CONFIG_KEY,
+            json.dumps(persisted, ensure_ascii=False),
+        )
+        await self._hydrate_asset_urls(normalized)
+        return normalized
+
+    async def list_asset_options(self, category: BrandAssetCategory) -> list[BrandAssetOption]:
+        options = [self._default_asset_option(category)]
+
+        minio_client = await get_minio_storage()
+        bucket = bisheng_settings.object_storage.minio.public_bucket
+        prefix = f'{ASSET_CATEGORY_PREFIXES[category]}/'
+
+        try:
+            objects = await asyncio.to_thread(
+                lambda: list(
+                    minio_client.minio_client_sync.list_objects(
+                        bucket,
+                        prefix=prefix,
+                        recursive=True,
+                    )
+                )
+            )
+        except Exception:
+            logger.exception('Failed to list brand asset options for category: %s', category)
+            raise
+
+        def sort_key(item: Any) -> datetime:
+            return getattr(item, 'last_modified', None) or datetime.min.replace(tzinfo=timezone.utc)
+
+        for item in sorted(objects, key=sort_key, reverse=True):
+            object_name = getattr(item, 'object_name', '')
+            if not object_name:
+                continue
+            url = await minio_client.get_share_link(object_name, bucket=bucket)
+            options.append(
+                BrandAssetOption(
+                    url=url,
+                    relative_path=object_name,
+                    file_name=self._display_filename_from_object_name(object_name),
+                )
+            )
+
+        return options
+
+    async def upload_asset(
+        self,
+        file: UploadFile,
+        category: BrandAssetCategory | None = None,
+    ) -> BrandAssetUploadResponse:
+        if not file:
+            raise UploadFileEmptyError()
+
+        filename = PurePath(file.filename or '').name
+        ext = filename.rsplit('.', 1)[-1].lower() if '.' in filename else ''
+        if ext not in SUPPORTED_EXTENSIONS:
+            raise UploadFileExtError()
+
+        payload = await file.read()
+        if not payload:
+            raise UploadFileEmptyError()
+        if len(payload) > MAX_BRAND_ASSET_BYTES:
+            raise HTTPException(status_code=413, detail='Brand asset size cannot exceed 5MB')
+        if ext == 'svg' and SCRIPT_RISK_PATTERN.search(payload):
+            raise UploadFileExtError()
+
+        object_name = self._build_object_name(filename, ext, category)
+        content_type = file.content_type or mimetypes.guess_type(filename)[0] or 'application/octet-stream'
+        minio_client = await get_minio_storage()
+        bucket = bisheng_settings.object_storage.minio.public_bucket
+        await minio_client.put_object(
+            bucket_name=bucket,
+            object_name=object_name,
+            file=payload,
+            content_type=content_type,
+        )
+        url = await minio_client.get_share_link(object_name, bucket=bucket)
+        return BrandAssetUploadResponse(url=url, relative_path=object_name, file_name=filename)
+
+    async def delete_asset(self, category: BrandAssetCategory, relative_path: str) -> BrandAsset:
+        object_name = relative_path.strip()
+        self._validate_asset_object_name(category, object_name)
+
+        minio_client = await get_minio_storage()
+        bucket = bisheng_settings.object_storage.minio.public_bucket
+        await minio_client.remove_object(bucket_name=bucket, object_name=object_name)
+        await self._reset_saved_asset_if_deleted(category, object_name)
+
+        default_asset = self._default_asset_option(category)
+        return BrandAsset(
+            url=default_asset.url,
+            relative_path=default_asset.relative_path,
+            file_name=default_asset.file_name,
+        )
+
+    async def build_runtime_script(self) -> str:
+        config = await self.get_config()
+        payload_data = config.model_dump(mode='json')
+        payload_data.pop('linsightAgentName', None)
+        payload = json.dumps(payload_data, ensure_ascii=False).replace('</', '<\\/')
+        return f"""(function() {{
+  var incoming = {payload};
+  var previous = window.BRAND_CONFIG || {{}};
+  function mergeObject(base, next) {{
+    var result = {{}};
+    Object.keys(base || {{}}).forEach(function(key) {{ result[key] = base[key]; }});
+    Object.keys(next || {{}}).forEach(function(key) {{ result[key] = next[key]; }});
+    return result;
+  }}
+  function getRuntimeBaseUrl() {{
+    var currentScript = document.currentScript && document.currentScript.src || '';
+    var marker = '/api/v1/brand/runtime.js';
+    var markerIndex = currentScript.indexOf(marker);
+    if (markerIndex === -1) {{
+      return '';
+    }}
+    var path = currentScript.slice(0, markerIndex);
+    try {{
+      path = new URL(path).pathname;
+    }} catch (error) {{}}
+    return path.replace(/\\/$/, '');
+  }}
+  function withRuntimeBaseUrl(url) {{
+    if (!url || /^(?:https?:|data:|blob:|\\/\\/)/i.test(url)) {{
+      return url || '';
+    }}
+    var baseUrl = getRuntimeBaseUrl();
+    if (!baseUrl || url.indexOf(baseUrl + '/') === 0) {{
+      return url;
+    }}
+    return url.charAt(0) === '/' ? baseUrl + url : baseUrl + '/' + url;
+  }}
+  function normalizeAssetUrls(assets) {{
+    Object.keys(assets || {{}}).forEach(function(key) {{
+      if (assets[key] && assets[key].url) {{
+        assets[key].url = withRuntimeBaseUrl(assets[key].url);
+      }}
+    }});
+  }}
+  window.BRAND_CONFIG = mergeObject(previous, incoming);
+  window.BRAND_CONFIG.brandName = mergeObject(previous.brandName, incoming.brandName);
+  if (previous.linsightAgentName || incoming.linsightAgentName) {{
+    window.BRAND_CONFIG.linsightAgentName = mergeObject(previous.linsightAgentName, incoming.linsightAgentName);
+  }}
+  window.BRAND_CONFIG.assets = mergeObject(previous.assets, incoming.assets);
+  normalizeAssetUrls(window.BRAND_CONFIG.assets);
+  var loading = incoming.loading || {{}};
+  var loadingIcon = withRuntimeBaseUrl(incoming.URLLoadingIcon || (loading.icon && loading.icon.url) || previous.loadingIcon || '');
+  window.BRAND_CONFIG.URLLoadingIcon = loadingIcon;
+  window.BRAND_CONFIG.loadingIcon = loadingIcon;
+  window.BRAND_CONFIG.loadingAnimation = loading.animation || previous.loadingAnimation || '';
+  function getBrandLanguage() {{
+    var savedLanguage = '';
+    try {{ savedLanguage = window.localStorage && window.localStorage.getItem('i18nextLng') || ''; }} catch (error) {{ savedLanguage = ''; }}
+    var language = savedLanguage || navigator.language || 'en';
+    return language.toLowerCase().indexOf('zh') === 0 ? 'zh' : 'en';
+  }}
+  function getBrandTitle(brandName) {{
+    var language = getBrandLanguage();
+    return language === 'zh' ? (brandName.zh || brandName.en || '') : (brandName.en || brandName.zh || '');
+  }}
+  if (window.BRAND_CONFIG.brandName) {{
+    document.title = getBrandTitle(window.BRAND_CONFIG.brandName);
+  }}
+  var favicon = window.BRAND_CONFIG.assets && window.BRAND_CONFIG.assets.favicon && window.BRAND_CONFIG.assets.favicon.url;
+  if (favicon) {{
+    var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
+    link.rel = 'icon';
+    link.href = favicon;
+    document.head.appendChild(link);
+  }}
+}})();"""
+
+    def _merge_with_defaults(self, incoming: BrandConfig | BrandConfigUpdate) -> BrandConfig:
+        merged = _default_config()
+        data: dict[str, Any] = incoming.model_dump(mode='json')
+        merged.brandName = _merge_text(merged.brandName, data.get('brandName'))
+        merged.linsightAgentName = _merge_text(merged.linsightAgentName, data.get('linsightAgentName'))
+        for key in DEFAULT_ASSET_URLS:
+            saved_asset = data.get('assets', {}).get(key) or {}
+            default_asset = getattr(merged.assets, key)
+            setattr(
+                merged.assets,
+                key,
+                BrandAsset(
+                    url=saved_asset.get('url') or default_asset.url,
+                    relative_path=saved_asset.get('relative_path') or '',
+                    file_name=saved_asset.get('file_name') or '',
+                ),
+            )
+
+        loading = data.get('loading') or {}
+        icon_data = deepcopy(loading.get('icon')) if loading.get('icon') else None
+        merged.loading.animation = loading.get('animation') or ''
+        default_loading_icon = merged.loading.icon
+        merged.loading.icon = (
+            _merge_asset(default_loading_icon, icon_data)
+            if icon_data and default_loading_icon
+            else (BrandAsset.model_validate(icon_data) if icon_data else default_loading_icon)
+        )
+        merged.loading.iconOptions = [
+            BrandAsset.model_validate(option)
+            for option in loading.get('iconOptions') or []
+            if option
+        ]
+        merged.URLLoadingIcon = data.get('URLLoadingIcon') or merged.URLLoadingIcon
+        return merged
+
+    async def _hydrate_asset_urls(self, config: BrandConfig) -> None:
+        for key in DEFAULT_ASSET_URLS:
+            asset = getattr(config.assets, key)
+            await self._hydrate_asset_url(asset)
+        if config.loading.icon:
+            await self._hydrate_asset_url(config.loading.icon)
+        for option in config.loading.iconOptions:
+            await self._hydrate_asset_url(option)
+        config.URLLoadingIcon = self._resolve_loading_icon_url(config)
+
+    async def _hydrate_asset_url(self, asset: BrandAsset) -> None:
+        if not asset.relative_path:
+            return
+        try:
+            minio_client = await get_minio_storage()
+            bucket = bisheng_settings.object_storage.minio.public_bucket
+            asset.url = await minio_client.get_share_link(asset.relative_path, bucket=bucket)
+        except Exception:
+            logger.exception('Failed to build brand asset share link: %s', asset.relative_path)
+            raise
+
+    def _resolve_loading_icon_url(self, config: BrandConfig) -> str:
+        if config.loading.icon and config.loading.icon.url:
+            return config.loading.icon.url
+        return config.URLLoadingIcon or ''
+
+    def _default_asset_option(self, category: BrandAssetCategory) -> BrandAssetOption:
+        default_url = DEFAULT_ASSET_URLS.get(category)
+        if default_url:
+            default_asset = getattr(_default_config().assets, category)
+            return BrandAssetOption(
+                url=default_asset.url,
+                relative_path=default_asset.relative_path,
+                file_name=default_asset.file_name or PurePath(default_asset.url).name,
+                is_default=True,
+            )
+        default_loading = _default_config().loading.icon
+        return BrandAssetOption(
+            url=default_loading.url if default_loading else '',
+            relative_path=default_loading.relative_path if default_loading else '',
+            file_name=(default_loading.file_name if default_loading else '') or 'default-loading-icon',
+            is_default=True,
+        )
+
+    async def _reset_saved_asset_if_deleted(
+        self,
+        category: BrandAssetCategory,
+        object_name: str,
+    ) -> None:
+        raw_value = await self.repository.get_value(BRAND_CONFIG_KEY)
+        if not raw_value:
+            return
+
+        try:
+            saved = BrandConfig.model_validate(json.loads(raw_value))
+            normalized = self._merge_with_defaults(saved)
+        except (json.JSONDecodeError, ValueError) as exc:
+            logger.warning('Invalid brand_config while deleting asset, skip config reset: %s', exc)
+            return
+
+        if category == 'loadingIcon':
+            changed = False
+            if normalized.loading.icon and normalized.loading.icon.relative_path == object_name:
+                normalized.loading.icon = None
+                normalized.URLLoadingIcon = ''
+                changed = True
+            next_options = [
+                option for option in normalized.loading.iconOptions
+                if option.relative_path != object_name
+            ]
+            if len(next_options) != len(normalized.loading.iconOptions):
+                normalized.loading.iconOptions = next_options
+                changed = True
+            if not changed:
+                return
+            normalized.URLLoadingIcon = self._resolve_loading_icon_url(normalized)
+            await self.repository.upsert_value(
+                BRAND_CONFIG_KEY,
+                json.dumps(normalized.model_dump(mode='json'), ensure_ascii=False),
+            )
+            return
+
+        current_asset = getattr(normalized.assets, category)
+        if current_asset.relative_path != object_name:
+            return
+
+        default_asset = getattr(_default_config().assets, category)
+        setattr(
+            normalized.assets,
+            category,
+            BrandAsset(url=default_asset.url, relative_path=default_asset.relative_path, file_name=default_asset.file_name),
+        )
+        normalized.URLLoadingIcon = self._resolve_loading_icon_url(normalized)
+        await self.repository.upsert_value(
+            BRAND_CONFIG_KEY,
+            json.dumps(normalized.model_dump(mode='json'), ensure_ascii=False),
+        )
+
+    def _validate_asset_object_name(self, category: BrandAssetCategory, object_name: str) -> None:
+        prefix = f'{ASSET_CATEGORY_PREFIXES[category]}/'
+        if not object_name or not object_name.startswith(prefix) or object_name.endswith('/'):
+            raise HTTPException(status_code=400, detail='Invalid brand asset path')
+        if '..' in PurePath(object_name).parts:
+            raise HTTPException(status_code=400, detail='Invalid brand asset path')
+
+    def _build_object_name(
+        self,
+        filename: str,
+        ext: str,
+        category: BrandAssetCategory | None,
+    ) -> str:
+        if not category:
+            return f'brand/{uuid4().hex}.{ext}'
+
+        prefix = ASSET_CATEGORY_PREFIXES[category]
+        safe_filename = self._safe_filename(filename, ext)
+        return f'{prefix}/{uuid4().hex}_{safe_filename}'
+
+    def _safe_filename(self, filename: str, ext: str) -> str:
+        safe_name = UNSAFE_FILENAME_PATTERN.sub('_', PurePath(filename or '').name).strip(' ._')
+        if not safe_name:
+            return f'asset.{ext}'
+
+        suffix = f'.{ext}'
+        if not safe_name.lower().endswith(suffix):
+            safe_name = f'{safe_name}{suffix}'
+
+        if len(safe_name) <= 120:
+            return safe_name
+
+        stem = safe_name[: 120 - len(suffix)].rstrip(' ._')
+        return f'{stem or "asset"}{suffix}'
+
+    def _display_filename_from_object_name(self, object_name: str) -> str:
+        filename = PurePath(object_name).name
+        match = UPLOAD_NAME_PREFIX_PATTERN.match(filename)
+        return match.group(1) if match else filename
diff --git a/src/frontend/client/index.html b/src/frontend/client/index.html
index 44c97ef228..abb0e0aa60 100644
--- a/src/frontend/client/index.html
+++ b/src/frontend/client/index.html
@@ -18,7 +18,11 @@
       };
     }
   </script>
-  <script src="PROTOCAL_IGNORE/assets/bisheng/config.js?v=<%= Date.now() %>"></script>
+  <script>
+    var brandBaseUrl = '<%- baseUrl %>';
+    document.write('<script src="' + brandBaseUrl + '/assets/bisheng/config.js?v=<%= Date.now() %>"><\/script>');
+    document.write('<script src="' + brandBaseUrl + '/api/v1/brand/runtime.js?v=<%= Date.now() %>"><\/script>');
+  </script>
   <meta name="viewport" content="width=device-width, initial-scale=1, interactive-widget=resizes-content" />
   <meta name="referrer" content="never">
   <style>
@@ -31,7 +35,20 @@
   </style>
   <!-- <script src="http://192.168.2.224:9000/vditor.js" defer></script> -->
   <script>
-    document.title = window.BRAND_CONFIG.brandName.en
+    function getBrandLanguage() {
+      const savedLanguage = localStorage.getItem('i18nextLng') || '';
+      const language = savedLanguage || navigator.language || 'en';
+      return language.toLowerCase().startsWith('zh') ? 'zh' : 'en';
+    }
+
+    function getBrandTitle(brandName) {
+      const language = getBrandLanguage();
+      return language === 'zh'
+        ? (brandName.zh || brandName.en || '')
+        : (brandName.en || brandName.zh || '');
+    }
+
+    document.title = getBrandTitle(window.BRAND_CONFIG.brandName || {})
 
     const theme = localStorage.getItem('color-theme');
     const loadingContainerStyle = document.createElement('style');
@@ -68,4 +85,4 @@
   </div>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/src/frontend/client/public/assets/bisheng/config.js b/src/frontend/client/public/assets/bisheng/config.js
index 4e816abd76..c6a45a54b5 100644
--- a/src/frontend/client/public/assets/bisheng/config.js
+++ b/src/frontend/client/public/assets/bisheng/config.js
@@ -1,30 +1,15 @@
 window.BRAND_CONFIG = {
-    // 1. 系统品牌名称
     brandName: {
         zh: "BISHENG",
         en: "BISHENG"
     },
-
-    // 2. 灵思智能体
     linsightAgentName: {
         zh: "灵思",
         en: "Linsight"
     },
-
-    // 3. 灵思中英文结合展示名
-    linsightFullName: {
-        zh: "灵思Linsight",
-        en: "Linsight"
-    },
-    dailyFullName: {
-        zh: "日常模式",
-        en: "Daily Mode"
-    },
-
-    // 4. Loading 图标配置
-    // 支持相对路径 (如 /branding/loading.gif) 或 完整的 URL (如 https://cdn.com/icon.png)
+    URLLoadingIcon: "",
     loadingIcon: "",
-    loadingAnimation: "" // animate-spin | animate-ping | animate-pulse | animate-bounce
+    loadingAnimation: ""
 };
 
 // Application-wide runtime config (separate from BRAND_CONFIG above).
@@ -33,4 +18,4 @@ window.APP_CONFIG = {
     // Hide Japanese from the language switcher and prevent it from being
     // auto-selected by browser/locale detection. Set to false to re-enable.
     disableJa: true
-};
\ No newline at end of file
+};
diff --git a/src/frontend/client/public/assets/bisheng/favicon.ico b/src/frontend/client/public/assets/bisheng/favicon.ico
new file mode 100644
index 0000000000..e3d4fb91a2
Binary files /dev/null and b/src/frontend/client/public/assets/bisheng/favicon.ico differ
diff --git a/src/frontend/client/public/assets/bisheng/login-logo-big.png b/src/frontend/client/public/assets/bisheng/login-logo-big.png
new file mode 100644
index 0000000000..98fd77125e
Binary files /dev/null and b/src/frontend/client/public/assets/bisheng/login-logo-big.png differ
diff --git a/src/frontend/client/public/assets/bisheng/login-logo-dark.png b/src/frontend/client/public/assets/bisheng/login-logo-dark.png
new file mode 100644
index 0000000000..9f100e06e5
Binary files /dev/null and b/src/frontend/client/public/assets/bisheng/login-logo-dark.png differ
diff --git a/src/frontend/client/public/assets/bisheng/login-logo-small.png b/src/frontend/client/public/assets/bisheng/login-logo-small.png
new file mode 100644
index 0000000000..1bc37e64c9
Binary files /dev/null and b/src/frontend/client/public/assets/bisheng/login-logo-small.png differ
diff --git a/src/frontend/client/public/assets/bisheng/logo-small-dark.png b/src/frontend/client/public/assets/bisheng/logo-small-dark.png
new file mode 100644
index 0000000000..67b18e08e7
Binary files /dev/null and b/src/frontend/client/public/assets/bisheng/logo-small-dark.png differ
diff --git a/src/frontend/client/public/assets/bisheng/logo.jpeg b/src/frontend/client/public/assets/bisheng/logo.jpeg
new file mode 100644
index 0000000000..df532d700e
Binary files /dev/null and b/src/frontend/client/public/assets/bisheng/logo.jpeg differ
diff --git a/src/frontend/client/src/components/Nav/NewChat.tsx b/src/frontend/client/src/components/Nav/NewChat.tsx
index e725d6756e..c185972bd1 100644
--- a/src/frontend/client/src/components/Nav/NewChat.tsx
+++ b/src/frontend/client/src/components/Nav/NewChat.tsx
@@ -109,7 +109,7 @@ export default function NewChat({
       <div className="" style={{ transform: 'none' }}>
         {isSmallScreen ? (
           <MobileSidebarHeaderTabs
-            logoSrc={bsConfig?.sidebarIcon?.image}
+            logoSrc={bsConfig?.sidebarIcon?.image ? __APP_ENV__.BASE_URL + bsConfig.sidebarIcon.image : undefined}
             onClose={toggleNav}
             onLinkClick={(link) => {
               if (link.closeDrawerOnNavigate) {
@@ -169,4 +169,4 @@ export default function NewChat({
       {subHeaders != null ? subHeaders : null}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/frontend/client/src/hooks/queries/endpoints/queries.ts b/src/frontend/client/src/hooks/queries/endpoints/queries.ts
index 3a56082b23..cb1adb8ff0 100644
--- a/src/frontend/client/src/hooks/queries/endpoints/queries.ts
+++ b/src/frontend/client/src/hooks/queries/endpoints/queries.ts
@@ -6,6 +6,21 @@ import { getKnowledgeStatusApi } from '~/api';
 import { BsConfig, QueryKeys, TEndpointsConfig, TStartupConfig, dataService } from '~/types/chat';
 import store from '~/store';
 
+const externalUrlRE = /^(?:https?:|data:|blob:|\/\/)/i;
+
+function getAppBaseUrl() {
+  return (__APP_ENV__.BASE_URL || '').replace(/\/$/, '');
+}
+
+function withAppBaseUrl(url?: string) {
+  if (!url) return '';
+  if (externalUrlRE.test(url)) return url;
+
+  const baseUrl = getAppBaseUrl();
+  if (!baseUrl || url.startsWith(`${baseUrl}/`)) return url;
+  return url.startsWith('/') ? `${baseUrl}${url}` : `${baseUrl}/${url}`;
+}
+
 export const useGetEndpointsQuery = <TData = TEndpointsConfig>(
   config?: UseQueryOptions<TEndpointsConfig, unknown, TData>,
 ): QueryObserverResult<TData> => {
@@ -64,14 +79,14 @@ export const useGetBsConfig = (
         const favicon = document.createElement('link');
         favicon.type = 'image/x-icon';
         favicon.rel = 'shortcut icon';
-        favicon.href = __APP_ENV__.BASE_URL + data.assistantIcon.image;
+        favicon.href = withAppBaseUrl(data.assistantIcon.image);
         document.head.appendChild(favicon);
       }
       return data;
     }),
     {
-      refetchOnWindowFocus: false,
-      refetchOnReconnect: false,
+      refetchOnWindowFocus: true,
+      refetchOnReconnect: true,
       refetchOnMount: 'always',
       ...config,
       enabled: (config?.enabled ?? true) === true && queriesEnabled,
diff --git a/src/frontend/client/src/layouts/MainLayout.tsx b/src/frontend/client/src/layouts/MainLayout.tsx
index b63f062684..6d1ee2334e 100644
--- a/src/frontend/client/src/layouts/MainLayout.tsx
+++ b/src/frontend/client/src/layouts/MainLayout.tsx
@@ -324,6 +324,7 @@ export default function MainLayout() {
     isChannelRoute || isAppChatRoute || (isAppsArea && !isAppChatRoute && !isAppsExploreRoute);
   const isKnowledgeRoute = /^\/knowledge(\/|$)/.test(pathname);
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
+  const { data: workstationConfig } = useGetBsConfig({ enabled: Boolean(user) });
   // 移动端：应用会话、/apps、/channel、/knowledge 都隐藏 MainLayout 左栏。
   // /apps 保留本布局内菜单按钮；/channel、/knowledge 使用各自页面的抽屉入口。
   const shouldHideSidebarOnMobileAppsArea = isMobile && (isAppChatRoute || isAppsArea || isChannelRoute || isKnowledgeRoute);
@@ -352,7 +353,14 @@ export default function MainLayout() {
     getBysConfigApi().then((res: any) => {
       setConfig(res.data);
     });
-  }, []);
+  }, [setConfig]);
+  useEffect(() => {
+    if (!workstationConfig) return;
+    setConfig((current: any) => ({
+      ...(current || {}),
+      ...workstationConfig,
+    }));
+  }, [setConfig, workstationConfig]);
 
   // System notice popup — single instance above KeepAlive so dismissal is global.
   const remoteNotice = (config as { system_notification?: string } | undefined)?.system_notification ?? '';
diff --git a/src/frontend/client/src/locales/i18n.ts b/src/frontend/client/src/locales/i18n.ts
index 0b13ccb528..ad0fb10709 100644
--- a/src/frontend/client/src/locales/i18n.ts
+++ b/src/frontend/client/src/locales/i18n.ts
@@ -52,14 +52,14 @@ i18n
       defaultVariables: {
         bisheng: config.brandName?.en,
         bishengZh: config.brandName?.zh,
-        linsight: config.linsightAgentName?.en,
-        linsightZh: config.linsightAgentName?.zh,
-        linsightFull: config.linsightFullName?.en,
-        linsightFullZh: config.linsightFullName?.zh,
-        dailyFullName: config.dailyFullName?.en,
-        dailyFullNameZh: config.dailyFullName?.zh,
+        linsight: config.linsightAgentName?.en || 'Linsight',
+        linsightZh: config.linsightAgentName?.zh || '灵思',
+        linsightFull: 'Linsight',
+        linsightFullZh: '灵思 Linsight',
+        dailyFullName: 'Daily Mode',
+        dailyFullNameZh: '日常模式',
       }
     },
   });
 
-export default i18n;
\ No newline at end of file
+export default i18n;
diff --git a/src/frontend/client/src/pages/Subscription/Sidebar/ChannelSidebar.tsx b/src/frontend/client/src/pages/Subscription/Sidebar/ChannelSidebar.tsx
index eb461c8edc..3526d22cc8 100644
--- a/src/frontend/client/src/pages/Subscription/Sidebar/ChannelSidebar.tsx
+++ b/src/frontend/client/src/pages/Subscription/Sidebar/ChannelSidebar.tsx
@@ -158,7 +158,7 @@ export function ChannelSidebar({
                 {mobileDrawerMode ? (
                     <>
                         <MobileSidebarHeaderTabs
-                            logoSrc={bsConfig?.sidebarIcon?.image}
+                            logoSrc={bsConfig?.sidebarIcon?.image ? __APP_ENV__.BASE_URL + bsConfig.sidebarIcon.image : undefined}
                             onClose={onDrawerClose}
                             onLinkClick={(link) => {
                                 if (link.closeDrawerOnNavigate) onDrawerClose?.();
@@ -300,4 +300,4 @@ export function ChannelSidebar({
             ) : null}
         </div>
     );
-};
\ No newline at end of file
+};
diff --git a/src/frontend/client/src/pages/knowledge/sidebar/KnowledgeSpaceSidebar.tsx b/src/frontend/client/src/pages/knowledge/sidebar/KnowledgeSpaceSidebar.tsx
index 6938828908..e6a2746927 100644
--- a/src/frontend/client/src/pages/knowledge/sidebar/KnowledgeSpaceSidebar.tsx
+++ b/src/frontend/client/src/pages/knowledge/sidebar/KnowledgeSpaceSidebar.tsx
@@ -209,7 +209,7 @@ export function KnowledgeSpaceSidebar({
             >
                 {mobileDrawerMode ? (
                     <MobileSidebarHeaderTabs
-                        logoSrc={bsConfig?.sidebarIcon?.image}
+                        logoSrc={bsConfig?.sidebarIcon?.image ? __APP_ENV__.BASE_URL + bsConfig.sidebarIcon.image : undefined}
                         onClose={onDrawerClose}
                         onLinkClick={(link) => {
                             if (link.closeDrawerOnNavigate) onDrawerClose?.();
diff --git a/src/frontend/client/src/vite-env.d.ts b/src/frontend/client/src/vite-env.d.ts
index 955914e9c9..6efbfab1b8 100644
--- a/src/frontend/client/src/vite-env.d.ts
+++ b/src/frontend/client/src/vite-env.d.ts
@@ -27,10 +27,21 @@ interface Window {
   BRAND_CONFIG?: {
     brandName?: { zh?: string; en?: string };
     linsightAgentName?: { zh?: string; en?: string };
-    linsightFullName?: { zh?: string; en?: string };
-    dailyFullName?: { zh?: string; en?: string };
     loadingIcon?: string;
+    URLLoadingIcon?: string;
     loadingAnimation?: string;
+    loading?: {
+      icon?: { url?: string; relative_path?: string; file_name?: string } | null;
+      iconOptions?: Array<{ url?: string; relative_path?: string; file_name?: string }>;
+      animation?: string;
+    };
+    assets?: {
+      favicon?: { url?: string };
+      loginHeroLight?: { url?: string };
+      loginHeroDark?: { url?: string };
+      headerLogoLight?: { url?: string };
+      headerLogoDark?: { url?: string };
+    };
   };
   /** Runtime app config injected by public/assets/bisheng/config.js. */
   APP_CONFIG?: {
diff --git a/src/frontend/client/vite.config.ts b/src/frontend/client/vite.config.ts
index 27a19ca645..0852480a55 100644
--- a/src/frontend/client/vite.config.ts
+++ b/src/frontend/client/vite.config.ts
@@ -186,13 +186,13 @@ export default defineConfig(({ command, mode }) => {
       compression({
         threshold: 10240,
       }),
-      createHtmlPlugin({}),
-      {
-        name: 'clear-placeholder',
-        transformIndexHtml(html) {
-          return html.replace('PROTOCAL_IGNORE/', '/');
-        }
-      },
+      createHtmlPlugin({
+        inject: {
+          data: {
+            baseUrl: app_env.BASE_URL.replace(/\/$/, ''),
+          },
+        },
+      }),
       viteStaticCopy({
         targets: [
           {
diff --git a/src/frontend/platform/index.html b/src/frontend/platform/index.html
index a6ce03e68c..b1b2cd5daa 100644
--- a/src/frontend/platform/index.html
+++ b/src/frontend/platform/index.html
@@ -16,12 +16,32 @@
         }
     </script>
     <script src="/assets/bisheng/config.js?v=<%= Date.now() %>"></script>
+    <script src="<%- baseUrl %>/api/v1/brand/runtime.js?v=<%= Date.now() %>"></script>
     <%- aceScriptSrc %>
         <title>loading...</title>
         <!-- window.APP_CONFIG.baseUrl -->
         <!-- style -->
         <script>
-            document.title = window.BRAND_CONFIG.brandName.en
+            function getBrandLanguage() {
+                const savedLanguage = localStorage.getItem('i18nextLng') || ''
+                const normalized = savedLanguage === 'zh' ? 'zh-Hans' : savedLanguage === 'en' ? 'en-US' : savedLanguage
+                if (savedLanguage === 'zh') {
+                    localStorage.setItem('i18nextLng', 'zh-Hans')
+                } else if (savedLanguage === 'en') {
+                    localStorage.setItem('i18nextLng', 'en-US')
+                }
+                const language = normalized || navigator.language || navigator.userLanguage || 'en-US'
+                return language.toLowerCase().startsWith('zh') ? 'zh' : 'en'
+            }
+
+            function getBrandTitle(brandName) {
+                const language = getBrandLanguage()
+                return language === 'zh'
+                    ? (brandName.zh || brandName.en || '')
+                    : (brandName.en || brandName.zh || '')
+            }
+
+            document.title = getBrandTitle(window.BRAND_CONFIG.brandName || {})
 
             fetch('<%- baseUrl %>/api/v1/web/config').then(function (res) {
                 return res.json()
@@ -40,12 +60,6 @@
                 });
             })
             // 兼容历史
-            const ln = localStorage.getItem('i18nextLng')
-            if (ln === 'zh') {
-                localStorage.setItem('i18nextLng', 'zh-Hans')
-            } else if (ln === 'en') {
-                localStorage.setItem('i18nextLng', 'en-US')
-            }
         </script>
 </head>
 
@@ -65,4 +79,4 @@
     })
 </script>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/src/frontend/platform/public/assets/bisheng/config.js b/src/frontend/platform/public/assets/bisheng/config.js
index 4e816abd76..c6a45a54b5 100644
--- a/src/frontend/platform/public/assets/bisheng/config.js
+++ b/src/frontend/platform/public/assets/bisheng/config.js
@@ -1,30 +1,15 @@
 window.BRAND_CONFIG = {
-    // 1. 系统品牌名称
     brandName: {
         zh: "BISHENG",
         en: "BISHENG"
     },
-
-    // 2. 灵思智能体
     linsightAgentName: {
         zh: "灵思",
         en: "Linsight"
     },
-
-    // 3. 灵思中英文结合展示名
-    linsightFullName: {
-        zh: "灵思Linsight",
-        en: "Linsight"
-    },
-    dailyFullName: {
-        zh: "日常模式",
-        en: "Daily Mode"
-    },
-
-    // 4. Loading 图标配置
-    // 支持相对路径 (如 /branding/loading.gif) 或 完整的 URL (如 https://cdn.com/icon.png)
+    URLLoadingIcon: "",
     loadingIcon: "",
-    loadingAnimation: "" // animate-spin | animate-ping | animate-pulse | animate-bounce
+    loadingAnimation: ""
 };
 
 // Application-wide runtime config (separate from BRAND_CONFIG above).
@@ -33,4 +18,4 @@ window.APP_CONFIG = {
     // Hide Japanese from the language switcher and prevent it from being
     // auto-selected by browser/locale detection. Set to false to re-enable.
     disableJa: true
-};
\ No newline at end of file
+};
diff --git a/src/frontend/platform/public/locales/en-US/bs.json b/src/frontend/platform/public/locales/en-US/bs.json
index e6752b9153..9681be4c8f 100644
--- a/src/frontend/platform/public/locales/en-US/bs.json
+++ b/src/frontend/platform/public/locales/en-US/bs.json
@@ -84,7 +84,59 @@
     "radius": "Radius",
     "warning": "Warning",
     "warningForeground": "Warning Foreground",
-    "blackButton": "Black Button"
+    "blackButton": "Black Button",
+    "brandCustomization": "Branding",
+    "brandAssetUploadSuccess": "Uploaded",
+    "brandUploading": "Uploading",
+    "brandUpload": "Upload",
+    "brandDefaultAsset": "Default",
+    "brandDeleteAsset": "Delete asset",
+    "brandAssetDeleteSuccess": "Deleted",
+    "brandSelectAssetPlaceholder": "Select an asset",
+    "brandAssetUrlPlaceholder": "Asset URL",
+    "brandPasteUrl": "Paste URL",
+    "brandUrlDialogTitle": "Add asset URL",
+    "brandUrlDialogDescription": "Paste an image URL. It will be added to the selectable asset list.",
+    "brandUrlDialogCancel": "Cancel",
+    "brandUrlDialogConfirm": "Confirm",
+    "brandAssetUrlInvalid": "Enter a valid URL that starts with http:// or https://.",
+    "brandAssetUrlAddSuccess": "URL added",
+    "brandUrlAssetName": "URL asset",
+    "brandDefaultLoadingIcon": "Default loading icon",
+    "brandResetDefault": "Reset",
+    "brandSave": "Save",
+    "brandTextSection": "Copy",
+    "brandAssetsSection": "Logo Assets",
+    "brandLoadingSection": "Loading",
+    "brandPreview": "Preview",
+    "brandPreviewButton": "Preview",
+    "brandPreviewEmpty": "Click Preview beside a setting to see where it applies",
+    "brandSystemName": "System brand",
+    "brandSystemNameDesc": "Used for browser title, login page, and similar surfaces",
+    "brandLinsightAgentName": "Agent feature name",
+    "brandLinsightAgentNameDesc": "Used for feature module names across the system",
+    "brandChineseColumn": "Chinese",
+    "brandEnglishColumn": "English",
+    "brandZhPlaceholder": "Chinese",
+    "brandEnPlaceholder": "English",
+    "brandSaveSuccess": "Saved",
+    "brandFavicon": "Favicon",
+    "brandFaviconSpec": "32 x 32, ico recommended",
+    "brandLoginHeroLight": "Login hero",
+    "brandLoginHeroSpec": "420 x 704, light mode",
+    "brandLoginHeroDark": "Login hero dark",
+    "brandLoginHeroDarkSpec": "420 x 704, dark mode",
+    "brandHeaderLogoLight": "Header logo",
+    "brandHeaderLogoSpec": "410 x 120, login form and header",
+    "brandHeaderLogoDark": "Header logo dark",
+    "brandHeaderLogoDarkSpec": "410 x 120, dark mode",
+    "brandLoadingIcon": "Loading icon",
+    "brandLoadingIconSpec": "SVG recommended, upload or URL",
+    "brandLoadingAnimation": "Animation",
+    "brandAnimationNone": "None",
+    "brandAnimationSpin": "Spin",
+    "brandAnimationPulse": "Pulse",
+    "brandAnimationBounce": "Bounce"
   },
   "login": {
     "slogen": "Convenient, Flexible, Reliable Enterprise-Level Large Model Application Development Platform",
@@ -381,6 +433,7 @@
     "primaryMenu": "Primary menu",
     "viewPermission": "View permission",
     "themeColor": "Theme color",
+    "appearanceSettings": "Appearance",
     "toolAuthorization": "Tool",
     "createUser": "Create User",
     "usernamePlaceholder": "This username will be used to log in, and cannot be changed",
diff --git a/src/frontend/platform/public/locales/ja/bs.json b/src/frontend/platform/public/locales/ja/bs.json
index ae11f8004c..0bd12cba38 100644
--- a/src/frontend/platform/public/locales/ja/bs.json
+++ b/src/frontend/platform/public/locales/ja/bs.json
@@ -84,7 +84,59 @@
     "radius": "角丸半径",
     "warning": "警告色",
     "warningForeground": "警告前景色",
-    "blackButton": "ブラックボタン"
+    "blackButton": "ブラックボタン",
+    "brandCustomization": "ブランド設定",
+    "brandAssetUploadSuccess": "アップロードしました",
+    "brandUploading": "アップロード中",
+    "brandUpload": "アップロード",
+    "brandDefaultAsset": "デフォルト",
+    "brandDeleteAsset": "素材を削除",
+    "brandAssetDeleteSuccess": "削除しました",
+    "brandSelectAssetPlaceholder": "素材を選択",
+    "brandAssetUrlPlaceholder": "素材 URL",
+    "brandPasteUrl": "URL を貼り付け",
+    "brandUrlDialogTitle": "素材 URL を追加",
+    "brandUrlDialogDescription": "画像 URL を貼り付けると、選択可能な素材リストに追加されます。",
+    "brandUrlDialogCancel": "キャンセル",
+    "brandUrlDialogConfirm": "確定",
+    "brandAssetUrlInvalid": "http:// または https:// で始まる有効な URL を入力してください。",
+    "brandAssetUrlAddSuccess": "URL を追加しました",
+    "brandUrlAssetName": "URL 素材",
+    "brandDefaultLoadingIcon": "内蔵デフォルト Loading アイコン",
+    "brandResetDefault": "リセット",
+    "brandSave": "保存",
+    "brandTextSection": "文言設定",
+    "brandAssetsSection": "ロゴ素材",
+    "brandLoadingSection": "Loading 設定",
+    "brandPreview": "プレビュー",
+    "brandPreviewButton": "プレビュー",
+    "brandPreviewEmpty": "各設定のプレビューボタンを押すと対応エリアを確認できます",
+    "brandSystemName": "システムブランド名",
+    "brandSystemNameDesc": "ブラウザータイトル、ログインページなどで使用",
+    "brandLinsightAgentName": "エージェント機能名",
+    "brandLinsightAgentNameDesc": "システム内の機能モジュール名として使用",
+    "brandChineseColumn": "中国語",
+    "brandEnglishColumn": "英語",
+    "brandZhPlaceholder": "中国語",
+    "brandEnPlaceholder": "英語",
+    "brandSaveSuccess": "保存しました",
+    "brandFavicon": "ブラウザーアイコン",
+    "brandFaviconSpec": "32 x 32、ico 推奨",
+    "brandLoginHeroLight": "ログイン大画像",
+    "brandLoginHeroSpec": "420 x 704、ライトモード",
+    "brandLoginHeroDark": "ログイン大画像（ダーク）",
+    "brandLoginHeroDarkSpec": "420 x 704、ダークモード",
+    "brandHeaderLogoLight": "フォームとヘッダーロゴ",
+    "brandHeaderLogoSpec": "410 x 120、ログインフォームと左上ヘッダー",
+    "brandHeaderLogoDark": "フォームとヘッダーロゴ（ダーク）",
+    "brandHeaderLogoDarkSpec": "410 x 120、ダークモード",
+    "brandLoadingIcon": "Loading アイコン",
+    "brandLoadingIconSpec": "SVG 推奨、アップロードまたは URL",
+    "brandLoadingAnimation": "アニメーション",
+    "brandAnimationNone": "なし",
+    "brandAnimationSpin": "回転",
+    "brandAnimationPulse": "パルス",
+    "brandAnimationBounce": "バウンス"
   },
   "login": {
     "slogen": "便利・柔軟・信頼できるエンタープライズ向け大規模モデルアプリ開発プラットフォーム",
@@ -377,6 +429,7 @@
     "primaryMenu": "第1階層メニュー",
     "viewPermission": "閲覧権限",
     "themeColor": "テーマ配色",
+    "appearanceSettings": "外観設定",
     "toolAuthorization": "ツール権限付与",
     "createUser": "ユーザー作成",
     "usernamePlaceholder": "今後このユーザー名でログインします。ユーザー名は変更できません。",
diff --git a/src/frontend/platform/public/locales/zh-Hans/bs.json b/src/frontend/platform/public/locales/zh-Hans/bs.json
index f4528caf02..d6658d5837 100644
--- a/src/frontend/platform/public/locales/zh-Hans/bs.json
+++ b/src/frontend/platform/public/locales/zh-Hans/bs.json
@@ -85,7 +85,59 @@
     "radius": "圆角半径",
     "warning": "警告色",
     "warningForeground": "警告前景色",
-    "blackButton": "黑按钮"
+    "blackButton": "黑按钮",
+    "brandCustomization": "品牌定制",
+    "brandAssetUploadSuccess": "上传成功",
+    "brandUploading": "上传中",
+    "brandUpload": "上传",
+    "brandDefaultAsset": "默认",
+    "brandDeleteAsset": "删除素材",
+    "brandAssetDeleteSuccess": "删除成功",
+    "brandSelectAssetPlaceholder": "请选择素材",
+    "brandAssetUrlPlaceholder": "素材 URL",
+    "brandPasteUrl": "粘贴 URL",
+    "brandUrlDialogTitle": "添加素材 URL",
+    "brandUrlDialogDescription": "粘贴图片 URL，确认后会加入可选择的素材列表。",
+    "brandUrlDialogCancel": "取消",
+    "brandUrlDialogConfirm": "确定",
+    "brandAssetUrlInvalid": "请输入以 http:// 或 https:// 开头的有效 URL。",
+    "brandAssetUrlAddSuccess": "URL 已添加",
+    "brandUrlAssetName": "URL 素材",
+    "brandDefaultLoadingIcon": "内置默认 Loading 图标",
+    "brandResetDefault": "重置默认",
+    "brandSave": "保存",
+    "brandTextSection": "文案配置",
+    "brandAssetsSection": "Logo 素材",
+    "brandLoadingSection": "Loading 配置",
+    "brandPreview": "预览",
+    "brandPreviewButton": "预览",
+    "brandPreviewEmpty": "点击配置项右侧的预览按钮查看对应区域",
+    "brandSystemName": "系统品牌名称",
+    "brandSystemNameDesc": "用于浏览器标题、登录页等",
+    "brandLinsightAgentName": "智能体功能名",
+    "brandLinsightAgentNameDesc": "系统中各处提到的功能模块名称",
+    "brandChineseColumn": "中文",
+    "brandEnglishColumn": "英文",
+    "brandZhPlaceholder": "中文",
+    "brandEnPlaceholder": "英文",
+    "brandSaveSuccess": "保存成功",
+    "brandFavicon": "浏览器标签图标",
+    "brandFaviconSpec": "32 x 32，建议 ico",
+    "brandLoginHeroLight": "登录页左侧大图",
+    "brandLoginHeroSpec": "420 x 704，浅色模式",
+    "brandLoginHeroDark": "登录页左侧大图（暗黑）",
+    "brandLoginHeroDarkSpec": "420 x 704，暗黑模式",
+    "brandHeaderLogoLight": "表单与顶部 Logo",
+    "brandHeaderLogoSpec": "410 x 120，浅色模式，用于登录页和管理后台左侧边栏",
+    "brandHeaderLogoDark": "表单与顶部 Logo（暗黑）",
+    "brandHeaderLogoDarkSpec": "410 x 120，暗黑模式，用于登录页和管理后台左侧边栏",
+    "brandLoadingIcon": "Loading 图标",
+    "brandLoadingIconSpec": "建议 SVG，可上传或填写 URL",
+    "brandLoadingAnimation": "动画",
+    "brandAnimationNone": "无",
+    "brandAnimationSpin": "旋转",
+    "brandAnimationPulse": "呼吸",
+    "brandAnimationBounce": "弹跳"
   },
   "login": {
     "slogen": "便捷、灵活、可靠的企业级大模型应用开发平台",
@@ -382,6 +434,7 @@
     "primaryMenu": "管理后台菜单",
     "viewPermission": "查看权限",
     "themeColor": "主题配色",
+    "appearanceSettings": "外观设置",
     "toolAuthorization": "工具权限",
     "createUser": "创建用户",
     "usernamePlaceholder": "后续使用此用户名进行登录，用户名不可修改",
diff --git a/src/frontend/platform/src/components/bs-icons/loading/index.tsx b/src/frontend/platform/src/components/bs-icons/loading/index.tsx
index ccc5d03bac..d5a5356668 100644
--- a/src/frontend/platform/src/components/bs-icons/loading/index.tsx
+++ b/src/frontend/platform/src/components/bs-icons/loading/index.tsx
@@ -2,6 +2,7 @@ import React, { forwardRef } from "react";
 import Load from "./Load.svg?react";
 import Loading from "./Loading.svg?react";
 import { cname } from "../../bs-ui/utils";
+import { getBrandLoadingIconUrl } from "@/utils/brand";
 
 export const LoadIcon = forwardRef<
     SVGSVGElement & { className: any },
@@ -15,8 +16,9 @@ export const LoadingIcon = forwardRef<
     SVGSVGElement & { className: any },
     React.PropsWithChildren<{ className?: string }>
 >(({ className, ...props }, ref) => {
-    if (window.BRAND_CONFIG.loadingIcon) {
-        return <img src={window.BRAND_CONFIG.loadingIcon} ref={ref} {...props} className={cname('text-primary max-w-14', className, window.BRAND_CONFIG.loadingAnimation)} />;
+    const loadingIcon = getBrandLoadingIconUrl();
+    if (loadingIcon) {
+        return <img src={loadingIcon} ref={ref} {...props} className={cname('text-primary max-w-14', className, window.BRAND_CONFIG?.loadingAnimation)} />;
     }
     return <Loading ref={ref} {...props} className={cname('text-primary', className)} />;
-});
\ No newline at end of file
+});
diff --git a/src/frontend/platform/src/controllers/API/index.ts b/src/frontend/platform/src/controllers/API/index.ts
index 51702b6d76..ad6959d329 100644
--- a/src/frontend/platform/src/controllers/API/index.ts
+++ b/src/frontend/platform/src/controllers/API/index.ts
@@ -186,6 +186,74 @@ export async function getAppConfig(): Promise<AppConfig> {
 export async function saveThemeApi(data: string): Promise<any> {
     return await axios.post(`/api/v1/web/config`, { value: data });
 }
+
+export interface BrandText {
+    zh: string;
+    en: string;
+}
+
+export interface BrandAsset {
+    url: string;
+    relative_path?: string;
+    file_name?: string;
+}
+
+export interface BrandAssetOption extends BrandAsset {
+    is_default?: boolean;
+}
+
+export interface BrandAssets {
+    favicon: BrandAsset;
+    loginHeroLight: BrandAsset;
+    loginHeroDark: BrandAsset;
+    headerLogoLight: BrandAsset;
+    headerLogoDark: BrandAsset;
+}
+
+export interface BrandLoading {
+    icon?: BrandAsset | null;
+    iconOptions?: BrandAsset[];
+    animation: "" | "animate-spin" | "animate-pulse" | "animate-bounce";
+}
+
+export interface BrandConfig {
+    brandName: BrandText;
+    linsightAgentName: BrandText;
+    assets: BrandAssets;
+    loading: BrandLoading;
+    URLLoadingIcon?: string;
+}
+
+export type BrandConfigUpdate = Omit<BrandConfig, "linsightAgentName">;
+
+export type BrandAssetCategory = keyof BrandAssets | "loadingIcon";
+
+export async function getBrandConfigApi(): Promise<BrandConfig> {
+    return await axios.get(`/api/v1/brand/config`);
+}
+
+export async function saveBrandConfigApi(data: BrandConfigUpdate): Promise<BrandConfig> {
+    return await axios.put(`/api/v1/brand/config`, data);
+}
+
+export async function getBrandAssetOptionsApi(category: BrandAssetCategory): Promise<BrandAssetOption[]> {
+    return await axios.get(`/api/v1/brand/assets/options`, { params: { category } });
+}
+
+export async function uploadBrandAssetApi(data: FormData): Promise<BrandAsset> {
+    return await axios.post(`/api/v1/brand/assets`, data, {
+        headers: { "Content-Type": "multipart/form-data" },
+    });
+}
+
+export async function deleteBrandAssetApi(
+    category: BrandAssetCategory,
+    relativePath: string
+): Promise<BrandAsset> {
+    return await axios.delete(`/api/v1/brand/assets`, {
+        params: { category, relative_path: relativePath },
+    });
+}
 /**
  * Reads all templates from the database.
  *
diff --git a/src/frontend/platform/src/i18n.js b/src/frontend/platform/src/i18n.js
index 3ec029fd22..13382f9a5e 100644
--- a/src/frontend/platform/src/i18n.js
+++ b/src/frontend/platform/src/i18n.js
@@ -60,12 +60,12 @@ i18n.use(Backend)
             defaultVariables: {
                 bisheng: config.brandName?.en,
                 bishengZh: config.brandName?.zh,
-                linsight: config.linsightAgentName?.en,
-                linsightZh: config.linsightAgentName?.zh,
-                linsightFull: config.linsightFullName?.en,
-                linsightFullZh: config.linsightFullName?.zh,
-                dailyFullName: config.dailyFullName?.en,
-                dailyFullNameZh: config.dailyFullName?.zh,
+                linsight: config.linsightAgentName?.en || 'Linsight',
+                linsightZh: config.linsightAgentName?.zh || '灵思',
+                linsightFull: 'Linsight',
+                linsightFullZh: '灵思 Linsight',
+                dailyFullName: 'Daily Mode',
+                dailyFullNameZh: '日常模式',
             }
         }
     });
@@ -73,4 +73,4 @@ i18n.use(Backend)
 export default i18n;
 
 // Dynamically load the namespace 
-// i18n.loadNamespaces(['bs']);
\ No newline at end of file
+// i18n.loadNamespaces(['bs']);
diff --git a/src/frontend/platform/src/layout/MainLayout.tsx b/src/frontend/platform/src/layout/MainLayout.tsx
index a3b6cd4d72..1e20058c89 100755
--- a/src/frontend/platform/src/layout/MainLayout.tsx
+++ b/src/frontend/platform/src/layout/MainLayout.tsx
@@ -30,6 +30,7 @@ import { userContext } from "../contexts/userContext";
 import { logoutApi } from "../controllers/API/user";
 import { captureAndAlertRequestErrorHoc } from "../controllers/request";
 import { User } from "../types/api/user";
+import { getBrandAssetUrl } from "../utils/brand";
 import HeaderMenu from "./HeaderMenu";
 
 export default function MainLayout() {
@@ -113,7 +114,8 @@ export default function MainLayout() {
                 <div className="flex h-9 my-[14px]">
                     <div className="inline-block" >
                         {/* @ts-ignore */}
-                        <img src={__APP_ENV__.BASE_URL + '/assets/bisheng/login-logo-small.png'} className="w-[104px] ml-[38px] rounded dark:w-[104px]" alt="" />
+                        <img src={getBrandAssetUrl('headerLogoLight', '/assets/bisheng/login-logo-small.png')} className="w-[104px] ml-[38px] rounded dark:hidden" alt="" />
+                        <img src={getBrandAssetUrl('headerLogoDark', '/assets/bisheng/logo-small-dark.png')} className="w-[104px] ml-[38px] rounded hidden dark:block" alt="" />
                     </div>
                 </div>
                 <div>
diff --git a/src/frontend/platform/src/pages/LoginPage/login.tsx b/src/frontend/platform/src/pages/LoginPage/login.tsx
index 6a5eaa3c31..058696ee4f 100644
--- a/src/frontend/platform/src/pages/LoginPage/login.tsx
+++ b/src/frontend/platform/src/pages/LoginPage/login.tsx
@@ -15,6 +15,7 @@ import LoginBridge from './loginBridge';
 import { PWD_RULE, handleEncrypt, handleLdapEncrypt } from './utils';
 import { locationContext } from '@/contexts/locationContext';
 import { ldapLoginApi, getSSOurlApi } from '@/controllers/API/pro';
+import { getBrandAssetUrl } from '@/utils/brand';
 import { getWorkspaceClientUrl } from '@/utils/workspaceUrl';
 
 interface LoginPageProps {
@@ -245,15 +246,15 @@ export const LoginPage = ({ forceLocal = false }: LoginPageProps) => {
     return <div className='w-full min-h-screen bg-background-dark flex items-center justify-center sm:py-4 overflow-y-auto'>
         <div className='relative z-10 sm:w-[1280px] w-full sm:h-[720px] h-full sm:shrink-0 border rounded-lg shadow-xl overflow-hidden bg-background-login'>
             <div className='w-[420px] h-[704px] m-[8px] hidden sm:block relative z-20'>
-                <img src={__APP_ENV__.BASE_URL + '/assets/bisheng/login-logo-big.png'} alt="logo_picture" className='w-full h-full dark:hidden' />
-                <img src={__APP_ENV__.BASE_URL + '/assets/bisheng/login-logo-dark.png'} alt="logo_picture" className='w-full h-full hidden dark:block' />
+                <img src={getBrandAssetUrl('loginHeroLight', '/assets/bisheng/login-logo-big.png')} alt="logo_picture" className='w-full h-full dark:hidden' />
+                <img src={getBrandAssetUrl('loginHeroDark', '/assets/bisheng/login-logo-dark.png')} alt="logo_picture" className='w-full h-full hidden dark:block' />
                 {/* <iframe src={__APP_ENV__.BASE_URL + '/face.html'} className='w-full h-full'></iframe> */}
             </div>
             <div className='absolute w-full h-full z-10 flex justify-end top-0'>
                 <div className='w-[852px] sm:px-[266px] px-[20px] pyx-[200px] bg-background-login relative'>
                     <div>
-                        <img src={__APP_ENV__.BASE_URL + '/assets/bisheng/login-logo-small.png'} className="block w-[114px] h-[36px] m-auto mt-[140px] dark:w-[124px] dark:pr-[10px] dark:hidden" alt="" />
-                        <img src={__APP_ENV__.BASE_URL + '/assets/bisheng/logo-small-dark.png'} className="w-[114px] h-[36px] m-auto mt-[140px] dark:w-[124px] dark:pr-[10px] dark:block hidden" alt="" />
+                        <img src={getBrandAssetUrl('headerLogoLight', '/assets/bisheng/login-logo-small.png')} className="block w-[114px] h-[36px] m-auto mt-[140px] dark:w-[124px] dark:pr-[10px] dark:hidden" alt="" />
+                        <img src={getBrandAssetUrl('headerLogoDark', '/assets/bisheng/logo-small-dark.png')} className="w-[114px] h-[36px] m-auto mt-[140px] dark:w-[124px] dark:pr-[10px] dark:block hidden" alt="" />
                         <span className='block w-fit m-auto font-normal text-[14px] text-tx-color mt-[24px]'>{t('login.slogen')}</span>
                     </div>
                     <div className="grid gap-[12px] mt-[68px]">
diff --git a/src/frontend/platform/src/pages/LoginPage/resetPwd.tsx b/src/frontend/platform/src/pages/LoginPage/resetPwd.tsx
index 7f39584933..04f16779e3 100644
--- a/src/frontend/platform/src/pages/LoginPage/resetPwd.tsx
+++ b/src/frontend/platform/src/pages/LoginPage/resetPwd.tsx
@@ -7,6 +7,7 @@ import { Button } from "../../components/bs-ui/button";
 import { PasswordInput } from "../../components/bs-ui/input";
 import { changePasswordApi, loggedChangePasswordApi } from "../../controllers/API/user";
 import { captureAndAlertRequestErrorHoc } from "../../controllers/request";
+import { getBrandAssetUrl } from "@/utils/brand";
 import { PWD_RULE, handleEncrypt } from './utils';
 
 export const ResetPwdPage = () => {
@@ -84,7 +85,7 @@ export const ResetPwdPage = () => {
                 ><ArrowLeft /></Button>}
                 <div className='bg-background-login relative'>
                     <div>
-                        <img src={__APP_ENV__.BASE_URL + '/assets/bisheng/login-logo-small.png'} alt="small_logo" className='block w-[114px] h-[36px] m-auto mt-[140px]' />
+                        <img src={getBrandAssetUrl('headerLogoLight', '/assets/bisheng/login-logo-small.png')} alt="small_logo" className='block w-[114px] h-[36px] m-auto mt-[140px]' />
                         <span className='block w-fit m-auto font-normal text-[14px] text-tx-color mt-[24px]'>{t('resetPassword.slogen')}</span>
                     </div>
                     <div className="grid gap-[12px] mt-[68px]">
diff --git a/src/frontend/platform/src/pages/SystemPage/index.tsx b/src/frontend/platform/src/pages/SystemPage/index.tsx
index c3479e1318..675a6fd230 100644
--- a/src/frontend/platform/src/pages/SystemPage/index.tsx
+++ b/src/frontend/platform/src/pages/SystemPage/index.tsx
@@ -76,7 +76,7 @@ export default function index() {
             <TabsTrigger value="system">{t("system.systemConfiguration")}</TabsTrigger>
           )}
           {canAccessSystemConfig && (
-            <TabsTrigger value="theme">{t("system.themeColor")}</TabsTrigger>
+            <TabsTrigger value="theme">{t("system.appearanceSettings")}</TabsTrigger>
           )}
         </TabsList>
         {showOrgTab && (
diff --git a/src/frontend/platform/src/pages/SystemPage/theme/BrandAssetUpload.tsx b/src/frontend/platform/src/pages/SystemPage/theme/BrandAssetUpload.tsx
new file mode 100644
index 0000000000..96de318da1
--- /dev/null
+++ b/src/frontend/platform/src/pages/SystemPage/theme/BrandAssetUpload.tsx
@@ -0,0 +1,455 @@
+import { Button } from "@/components/bs-ui/button";
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from "@/components/bs-ui/dialog";
+import { Input } from "@/components/bs-ui/input";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+} from "@/components/bs-ui/select";
+import { useToast } from "@/components/bs-ui/toast/use-toast";
+import type { BrandAsset, BrandAssetCategory, BrandAssetOption } from "@/controllers/API";
+import { deleteBrandAssetApi, uploadBrandAssetApi } from "@/controllers/API";
+import { captureAndAlertRequestErrorHoc } from "@/controllers/request";
+import { withBrandBaseUrl } from "@/utils/brand";
+import { Check, Eye, ImageIcon, Link, Loader2, Trash2, Upload } from "lucide-react";
+import { ChangeEvent, MouseEvent, PointerEvent, ReactNode, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { BRAND_ASSET_ACCEPT } from "./brandTypes";
+
+const EMPTY_DEFAULT_VALUE = "__brand_empty_default__";
+
+interface BrandAssetUploadProps {
+    label: string;
+    spec: string;
+    value?: BrandAsset | null;
+    fallbackUrl?: string;
+    category?: BrandAssetCategory;
+    options?: BrandAssetOption[];
+    allowUrlOption?: boolean;
+    emptyPreview?: ReactNode;
+    previewActive?: boolean;
+    onChange: (asset: BrandAsset) => void;
+    onPreview?: () => void;
+    onUploaded?: (asset: BrandAsset) => void;
+    onDeleted?: (deletedAsset: BrandAssetOption, fallbackAsset: BrandAsset) => void;
+    onUrlAdded?: (asset: BrandAsset) => void;
+}
+
+const getAssetValue = (asset?: BrandAsset | null) => (
+    asset?.relative_path || asset?.url || ""
+);
+
+const getOptionValue = (asset?: BrandAssetOption | BrandAsset | null) => (
+    getAssetValue(asset) || EMPTY_DEFAULT_VALUE
+);
+
+const getFileName = (asset?: BrandAsset | null) => {
+    if (asset?.file_name) return asset.file_name;
+    const source = asset?.relative_path || asset?.url || "";
+    if (!source || source.startsWith("data:")) return "";
+    const cleanSource = source.split("?")[0];
+    return cleanSource.split("/").pop() || cleanSource;
+};
+
+const isValidAssetUrl = (value: string) => {
+    const trimmed = value.trim();
+    return /^https?:\/\/[^\s<>]+$/i.test(trimmed);
+};
+
+function AssetOptionContent({
+    option,
+    label,
+    selected = false,
+    deleting = false,
+    emptyPreview,
+    onDelete,
+}: {
+    option: BrandAssetOption;
+    label: string;
+    selected?: boolean;
+    deleting?: boolean;
+    emptyPreview?: ReactNode;
+    onDelete?: (option: BrandAssetOption) => void;
+}) {
+    const { t } = useTranslation();
+    const pointerDeleteTriggeredRef = useRef(false);
+    const previewUrl = withBrandBaseUrl(option.url);
+    const canDelete = !option.is_default && !!onDelete && (!!option.relative_path || !!option.url);
+
+    const handleDeletePointerDown = (event: PointerEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (event.button !== 0 || deleting) return;
+        pointerDeleteTriggeredRef.current = true;
+        onDelete?.(option);
+        window.setTimeout(() => {
+            pointerDeleteTriggeredRef.current = false;
+        }, 300);
+    };
+
+    const handleDeleteMouseDown = (event: MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+        event.stopPropagation();
+    };
+
+    const handleDeleteClick = (event: MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (pointerDeleteTriggeredRef.current || deleting) return;
+        onDelete?.(option);
+    };
+
+    return (
+        <div className="flex min-w-0 flex-1 items-center gap-2">
+            <div className="flex size-9 shrink-0 items-center justify-center overflow-hidden rounded border bg-muted">
+                {previewUrl ? (
+                    <img src={previewUrl} alt={label} className="max-h-full max-w-full object-contain" />
+                ) : emptyPreview ? (
+                    emptyPreview
+                ) : (
+                    <ImageIcon className="size-4 text-muted-foreground" />
+                )}
+            </div>
+            <div className="min-w-0 flex-1">
+                <div className="flex min-w-0 items-center gap-2">
+                    <span className="truncate text-sm text-foreground">{getFileName(option)}</span>
+                    {option.is_default && (
+                        <span className="shrink-0 rounded bg-primary/10 px-1.5 py-0.5 text-[11px] text-primary">
+                            {t("theme.brandDefaultAsset")}
+                        </span>
+                    )}
+                </div>
+            </div>
+            {selected && <Check className="size-4 shrink-0 text-primary" />}
+            {canDelete && (
+                <button
+                    type="button"
+                    className="flex size-7 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-destructive/10 hover:text-destructive disabled:cursor-not-allowed disabled:opacity-50"
+                    aria-label={t("theme.brandDeleteAsset")}
+                    title={t("theme.brandDeleteAsset")}
+                    disabled={deleting}
+                    onPointerDown={handleDeletePointerDown}
+                    onMouseDown={handleDeleteMouseDown}
+                    onClick={handleDeleteClick}
+                >
+                    {deleting ? <Loader2 className="size-4 animate-spin" /> : <Trash2 className="size-4" />}
+                </button>
+            )}
+        </div>
+    );
+}
+
+export default function BrandAssetUpload({
+    label,
+    spec,
+    value,
+    fallbackUrl = "",
+    category,
+    options = [],
+    allowUrlOption = false,
+    emptyPreview,
+    previewActive = false,
+    onChange,
+    onPreview,
+    onUploaded,
+    onDeleted,
+    onUrlAdded,
+}: BrandAssetUploadProps) {
+    const { t } = useTranslation();
+    const { toast } = useToast();
+    const inputRef = useRef<HTMLInputElement>(null);
+    const [uploading, setUploading] = useState(false);
+    const [deletingValue, setDeletingValue] = useState("");
+    const [urlDialogOpen, setUrlDialogOpen] = useState(false);
+    const [urlValue, setUrlValue] = useState("");
+    const selectable = !!category;
+    const rawSelectedValue = getAssetValue(value);
+    const selectedValue = selectable ? rawSelectedValue || EMPTY_DEFAULT_VALUE : rawSelectedValue;
+    const effectiveOptions = useMemo(() => {
+        if (!selectable || !selectedValue || options.some((option) => getOptionValue(option) === selectedValue)) {
+            return options;
+        }
+
+        return [
+            {
+                url: value?.url || fallbackUrl,
+                relative_path: value?.relative_path || "",
+                file_name: getFileName(value),
+            },
+            ...options,
+        ];
+    }, [fallbackUrl, options, selectable, selectedValue, value]);
+    const selectedOption = effectiveOptions.find((option) => getOptionValue(option) === selectedValue);
+    const previewUrl = withBrandBaseUrl(selectedOption?.url || value?.url || fallbackUrl);
+
+    const handlePickFile = () => {
+        inputRef.current?.click();
+    };
+
+    const handleFileChange = async (event: ChangeEvent<HTMLInputElement>) => {
+        const file = event.target.files?.[0];
+        event.target.value = "";
+        if (!file) return;
+
+        const formData = new FormData();
+        formData.append("file", file);
+        if (category) {
+            formData.append("category", category);
+        }
+        setUploading(true);
+        const uploaded = await captureAndAlertRequestErrorHoc(uploadBrandAssetApi(formData));
+        setUploading(false);
+        if (!uploaded) return;
+
+        onChange(uploaded);
+        onUploaded?.(uploaded);
+        toast({
+            title: t("prompt"),
+            variant: "success",
+            description: t("theme.brandAssetUploadSuccess"),
+        });
+    };
+
+    const handleAssetSelect = (assetValue: string) => {
+        const selected = effectiveOptions.find((option) => getOptionValue(option) === assetValue);
+        if (!selected) return;
+        onChange({
+            url: selected.url,
+            relative_path: selected.relative_path || "",
+            file_name: selected.file_name || "",
+        });
+    };
+
+    const getFallbackAsset = (): BrandAsset => {
+        const defaultOption = effectiveOptions.find((option) => option.is_default);
+        return {
+            url: defaultOption?.url || fallbackUrl,
+            relative_path: defaultOption?.relative_path || "",
+            file_name: defaultOption?.file_name || getFileName(defaultOption) || getFileName({ url: fallbackUrl }),
+        };
+    };
+
+    const handleAssetDelete = async (option: BrandAssetOption) => {
+        if (option.is_default) return;
+
+        const optionValue = getOptionValue(option);
+        if (!option.relative_path) {
+            const fallbackAsset = getFallbackAsset();
+            if (optionValue === selectedValue) {
+                onChange(fallbackAsset);
+            }
+            onDeleted?.(option, fallbackAsset);
+            toast({
+                title: t("prompt"),
+                variant: "success",
+                description: t("theme.brandAssetDeleteSuccess"),
+            });
+            return;
+        }
+
+        if (!category) return;
+        setDeletingValue(optionValue);
+        const defaultAsset = await captureAndAlertRequestErrorHoc(
+            deleteBrandAssetApi(category, option.relative_path)
+        );
+        setDeletingValue("");
+        if (!defaultAsset) return;
+
+        const fallbackAsset: BrandAsset = {
+            url: defaultAsset.url || fallbackUrl,
+            relative_path: defaultAsset.relative_path || "",
+            file_name: defaultAsset.file_name || getFileName(defaultAsset),
+        };
+
+        if (optionValue === selectedValue) {
+            onChange(fallbackAsset);
+        }
+        onDeleted?.(option, fallbackAsset);
+        toast({
+            title: t("prompt"),
+            variant: "success",
+            description: t("theme.brandAssetDeleteSuccess"),
+        });
+    };
+
+    const handleOpenUrlDialog = () => {
+        setUrlValue("");
+        setUrlDialogOpen(true);
+    };
+
+    const handleUrlConfirm = () => {
+        const nextUrl = urlValue.trim();
+        if (!isValidAssetUrl(nextUrl)) {
+            toast({
+                title: t("prompt"),
+                variant: "warning",
+                description: t("theme.brandAssetUrlInvalid"),
+            });
+            return;
+        }
+
+        const urlAsset: BrandAsset = {
+            url: nextUrl,
+            relative_path: "",
+            file_name: getFileName({ url: nextUrl }) || t("theme.brandUrlAssetName"),
+        };
+        onChange(urlAsset);
+        onUrlAdded?.(urlAsset);
+        setUrlDialogOpen(false);
+        toast({
+            title: t("prompt"),
+            variant: "success",
+            description: t("theme.brandAssetUrlAddSuccess"),
+        });
+    };
+
+    const handleUrlChange = (event: ChangeEvent<HTMLInputElement>) => {
+        onChange({
+            url: event.target.value,
+            relative_path: "",
+            file_name: value?.file_name || "",
+        });
+    };
+
+    return (
+        <>
+            <div className="grid grid-cols-1 gap-4 rounded-md border border-border bg-background px-4 py-3 sm:grid-cols-[112px_minmax(0,1fr)]">
+            <div className="flex h-[88px] w-[112px] items-center justify-center overflow-hidden rounded border border-dashed bg-muted">
+                {previewUrl ? (
+                    <img src={previewUrl} alt={label} className="max-h-full max-w-full object-contain" />
+                ) : emptyPreview ? (
+                    emptyPreview
+                ) : (
+                    <ImageIcon className="size-8 text-muted-foreground" />
+                )}
+            </div>
+            <div className="min-w-0 space-y-3">
+                <div className="flex items-start justify-between gap-3">
+                    <div className="min-w-0">
+                        <p className="truncate text-sm font-medium text-foreground">{label}</p>
+                        <p className="mt-1 text-xs text-muted-foreground">{spec}</p>
+                    </div>
+                    <div className="flex shrink-0 items-center gap-2">
+                        {onPreview && (
+                            <Button
+                                type="button"
+                                size="sm"
+                                variant={previewActive ? "default" : "outline"}
+                                onClick={onPreview}
+                            >
+                                <Eye className="mr-1 size-4" />
+                                {t("theme.brandPreviewButton")}
+                            </Button>
+                        )}
+                        {allowUrlOption && (
+                            <Button
+                                type="button"
+                                size="sm"
+                                variant="outline"
+                                onClick={handleOpenUrlDialog}
+                            >
+                                <Link className="mr-1 size-4" />
+                                {t("theme.brandPasteUrl")}
+                            </Button>
+                        )}
+                        <Button
+                            type="button"
+                            size="sm"
+                            variant="outline"
+                            disabled={uploading}
+                            onClick={handlePickFile}
+                        >
+                            <Upload className="mr-1 size-4" />
+                            {uploading ? t("theme.brandUploading") : t("theme.brandUpload")}
+                        </Button>
+                    </div>
+                </div>
+                {selectable ? (
+                    <Select value={selectedValue} onValueChange={handleAssetSelect}>
+                        <SelectTrigger className="h-11 bg-background">
+                            {selectedOption ? (
+                                <AssetOptionContent option={selectedOption} label={label} emptyPreview={emptyPreview} />
+                            ) : (
+                                <span className="text-sm text-muted-foreground">
+                                    {t("theme.brandSelectAssetPlaceholder")}
+                                </span>
+                            )}
+                        </SelectTrigger>
+                        <SelectContent className="w-[var(--radix-select-trigger-width)]">
+                            {effectiveOptions.map((option) => {
+                                const optionValue = getOptionValue(option);
+                                return (
+                                    <SelectItem
+                                        key={optionValue}
+                                        value={optionValue}
+                                        textValue={getFileName(option)}
+                                        customContent
+                                        showIcon={false}
+                                        className="pr-2"
+                                    >
+                                        <AssetOptionContent
+                                            option={option}
+                                            label={label}
+                                            selected={optionValue === selectedValue}
+                                            deleting={deletingValue === optionValue}
+                                            emptyPreview={emptyPreview}
+                                            onDelete={handleAssetDelete}
+                                        />
+                                    </SelectItem>
+                                );
+                            })}
+                        </SelectContent>
+                    </Select>
+                ) : (
+                    <Input
+                        value={value?.url || ""}
+                        placeholder={t("theme.brandAssetUrlPlaceholder")}
+                        onChange={handleUrlChange}
+                    />
+                )}
+            </div>
+            <input
+                ref={inputRef}
+                type="file"
+                className="hidden"
+                accept={BRAND_ASSET_ACCEPT}
+                onChange={handleFileChange}
+            />
+            </div>
+            <Dialog open={urlDialogOpen} onOpenChange={setUrlDialogOpen}>
+                <DialogContent className="sm:max-w-[520px]">
+                    <DialogHeader>
+                        <DialogTitle>{t("theme.brandUrlDialogTitle")}</DialogTitle>
+                        <DialogDescription>{t("theme.brandUrlDialogDescription")}</DialogDescription>
+                    </DialogHeader>
+                    <Input
+                        value={urlValue}
+                        placeholder={t("theme.brandAssetUrlPlaceholder")}
+                        onChange={(event) => setUrlValue(event.target.value)}
+                        onKeyDown={(event) => {
+                            if (event.key === "Enter") {
+                                handleUrlConfirm();
+                            }
+                        }}
+                    />
+                    <DialogFooter>
+                        <Button type="button" variant="outline" onClick={() => setUrlDialogOpen(false)}>
+                            {t("theme.brandUrlDialogCancel")}
+                        </Button>
+                        <Button type="button" onClick={handleUrlConfirm}>
+                            {t("theme.brandUrlDialogConfirm")}
+                        </Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
+        </>
+    );
+}
diff --git a/src/frontend/platform/src/pages/SystemPage/theme/BrandCustomization.tsx b/src/frontend/platform/src/pages/SystemPage/theme/BrandCustomization.tsx
new file mode 100644
index 0000000000..50a3dd4752
--- /dev/null
+++ b/src/frontend/platform/src/pages/SystemPage/theme/BrandCustomization.tsx
@@ -0,0 +1,548 @@
+import { Button, LoadButton } from "@/components/bs-ui/button";
+import { Input } from "@/components/bs-ui/input";
+import { Label } from "@/components/bs-ui/label";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/bs-ui/select";
+import { useToast } from "@/components/bs-ui/toast/use-toast";
+import { darkContext } from "@/contexts/darkContext";
+import type { BrandAsset, BrandAssetOption, BrandConfig, BrandText } from "@/controllers/API";
+import { getBrandAssetOptionsApi, getBrandConfigApi, saveBrandConfigApi } from "@/controllers/API";
+import { captureAndAlertRequestErrorHoc } from "@/controllers/request";
+import { withBrandBaseUrl } from "@/utils/brand";
+import { Eye, RefreshCw, Save } from "lucide-react";
+import { ChangeEvent, useContext, useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import BrandAssetUpload from "./BrandAssetUpload";
+import BrandPreviewPanel from "./BrandPreviewPanel";
+import { BrandAssetKey, BrandPreviewTarget, BrandTextKey, buildDefaultAssetOptions, cloneBrandConfig, DEFAULT_BRAND_CONFIG } from "./brandTypes";
+
+const ASSET_ROWS: Array<{
+    key: BrandAssetKey;
+    labelKey: string;
+    specKey: string;
+}> = [
+    { key: "favicon", labelKey: "theme.brandFavicon", specKey: "theme.brandFaviconSpec" },
+    { key: "loginHeroLight", labelKey: "theme.brandLoginHeroLight", specKey: "theme.brandLoginHeroSpec" },
+    { key: "loginHeroDark", labelKey: "theme.brandLoginHeroDark", specKey: "theme.brandLoginHeroDarkSpec" },
+    { key: "headerLogoLight", labelKey: "theme.brandHeaderLogoLight", specKey: "theme.brandHeaderLogoSpec" },
+    { key: "headerLogoDark", labelKey: "theme.brandHeaderLogoDark", specKey: "theme.brandHeaderLogoDarkSpec" },
+];
+
+const TEXT_ROWS: Array<{
+    key: BrandTextKey;
+    labelKey: string;
+    descKey: string;
+}> = [
+    {
+        key: "brandName",
+        labelKey: "theme.brandSystemName",
+        descKey: "theme.brandSystemNameDesc",
+    },
+];
+
+const getBrandTitle = (brandName?: BrandText) => {
+    const language = localStorage.getItem("i18nextLng") || navigator.language || "en-US";
+    return language.toLowerCase().startsWith("zh")
+        ? (brandName?.zh || brandName?.en || "")
+        : (brandName?.en || brandName?.zh || "");
+};
+
+const omitLinsightAgentName = (config: BrandConfig) => {
+    const payload = { ...config } as Partial<BrandConfig>;
+    delete payload.linsightAgentName;
+    return payload as Omit<BrandConfig, "linsightAgentName">;
+};
+
+function applyRuntimeBrandConfig(config: BrandConfig) {
+    const loadingIcon = config.URLLoadingIcon || config.loading?.icon?.url || "";
+    window.BRAND_CONFIG = {
+        ...window.BRAND_CONFIG,
+        ...omitLinsightAgentName(config),
+        loadingIcon,
+        URLLoadingIcon: loadingIcon,
+        loadingAnimation: config.loading?.animation || "",
+    };
+    const title = getBrandTitle(config.brandName);
+    if (title) {
+        document.title = title;
+    }
+    const favicon = config.assets?.favicon?.url;
+    if (favicon) {
+        const link = document.querySelector("link[rel*='icon']") || document.createElement("link");
+        link.setAttribute("rel", "icon");
+        link.setAttribute("href", withBrandBaseUrl(favicon));
+        document.head.appendChild(link);
+    }
+}
+
+function normalizeForSave(config: BrandConfig) {
+    const next = cloneBrandConfig(config);
+    const loadingIconUrl = next.loading?.icon?.url || next.URLLoadingIcon || "";
+    next.URLLoadingIcon = loadingIconUrl;
+    next.loading.iconOptions = normalizeLoadingUrlOptions(
+        next.loading?.icon?.url && !next.loading.icon.relative_path
+            ? upsertAssetOption(next.loading.iconOptions, next.loading.icon)
+            : next.loading.iconOptions
+    );
+    if (!loadingIconUrl) {
+        next.loading.icon = null;
+    }
+    return omitLinsightAgentName(next);
+}
+
+const getAssetValue = (asset?: BrandAsset | null) => (
+    asset?.relative_path || asset?.url || ""
+);
+
+const DEFAULT_OPTION_VALUE = "__default__";
+
+const mergeAssetOptions = (options: BrandAssetOption[]) => {
+    const seen = new Set<string>();
+    return options.filter((option) => {
+        const value = getAssetValue(option) || DEFAULT_OPTION_VALUE;
+        if (seen.has(value)) return false;
+        seen.add(value);
+        return true;
+    });
+};
+
+const upsertAssetOption = (options: BrandAsset[] = [], asset: BrandAsset) => {
+    const assetValue = getAssetValue(asset);
+    if (!assetValue) return options;
+    return [
+        {
+            url: asset.url || "",
+            relative_path: asset.relative_path || "",
+            file_name: asset.file_name || "",
+        },
+        ...options.filter((option) => getAssetValue(option) !== assetValue),
+    ];
+};
+
+const normalizeLoadingUrlOptions = (options: BrandAsset[] = []) => {
+    const seen = new Set<string>();
+    return options.filter((option) => {
+        if (!option.url || option.relative_path) return false;
+        const value = getAssetValue(option);
+        if (!value || seen.has(value)) return false;
+        seen.add(value);
+        return true;
+    }).map((option) => ({
+        url: option.url,
+        relative_path: "",
+        file_name: option.file_name || "",
+    }));
+};
+
+function StaticLoadingBarsIcon({ className = "" }: { className?: string }) {
+    return (
+        <svg viewBox="0 0 36 36" fill="none" className={className} aria-hidden="true">
+            <rect x="10" y="8" width="3" height="2" rx="1" fill="currentColor" />
+            <rect x="14" y="8" width="10" height="2" rx="1" fill="currentColor" />
+            <rect x="11" y="11.5" width="16" height="2" rx="1" fill="currentColor" />
+            <rect x="11" y="15" width="12" height="2" rx="1" fill="currentColor" />
+            <rect x="11" y="18.5" width="14" height="2" rx="1" fill="currentColor" />
+            <rect x="11" y="22" width="16" height="2" rx="1" fill="currentColor" />
+            <rect x="10" y="25.5" width="10" height="2" rx="1" fill="currentColor" />
+            <rect x="21" y="25.5" width="3" height="2" rx="1" fill="currentColor" />
+        </svg>
+    );
+}
+
+function BrandTextField({
+    label,
+    description,
+    value,
+    previewActive,
+    onChange,
+    onPreview,
+}: {
+    label: string;
+    description: string;
+    value: BrandText;
+    previewActive: boolean;
+    onChange: (next: BrandText) => void;
+    onPreview: () => void;
+}) {
+    const { t } = useTranslation();
+
+    const handleChange = (lang: keyof BrandText) => (event: ChangeEvent<HTMLInputElement>) => {
+        onChange({
+            ...value,
+            [lang]: event.target.value,
+        });
+    };
+
+    return (
+        <div className="grid grid-cols-1 items-center gap-3 lg:grid-cols-[180px_minmax(0,1fr)_minmax(0,1fr)_72px]">
+            <div className="space-y-1">
+                <Label className="text-sm text-foreground">{label}</Label>
+                <p className="text-xs leading-5 text-muted-foreground">{description}</p>
+            </div>
+            <Input
+                value={value.zh}
+                maxLength={20}
+                placeholder={t("theme.brandZhPlaceholder")}
+                onChange={handleChange("zh")}
+            />
+            <Input
+                value={value.en}
+                maxLength={20}
+                placeholder={t("theme.brandEnPlaceholder")}
+                onChange={handleChange("en")}
+            />
+            <Button
+                type="button"
+                size="sm"
+                variant={previewActive ? "default" : "outline"}
+                className="w-fit justify-self-start"
+                onClick={onPreview}
+            >
+                <Eye className="mr-1 size-3.5" />
+                {t("theme.brandPreviewButton")}
+            </Button>
+        </div>
+    );
+}
+
+export default function BrandCustomization() {
+    const { t } = useTranslation();
+    const { toast } = useToast();
+    const { dark } = useContext(darkContext);
+    const [config, setConfig] = useState<BrandConfig>(() => cloneBrandConfig(DEFAULT_BRAND_CONFIG));
+    const [assetOptions, setAssetOptions] = useState<Record<BrandAssetKey, BrandAssetOption[]>>(
+        () => buildDefaultAssetOptions()
+    );
+    const [loadingIconUploadOptions, setLoadingIconUploadOptions] = useState<BrandAssetOption[]>([]);
+    const [previewTarget, setPreviewTarget] = useState<BrandPreviewTarget | null>(null);
+    const [loading, setLoading] = useState(true);
+    const [saving, setSaving] = useState(false);
+
+    useEffect(() => {
+        let mounted = true;
+
+        const loadBrandData = async () => {
+            const [configData, optionEntries, loadingIconOptions] = await Promise.all([
+                captureAndAlertRequestErrorHoc(getBrandConfigApi()),
+                Promise.all(ASSET_ROWS.map(async ({ key }) => ({
+                    key,
+                    options: await captureAndAlertRequestErrorHoc(getBrandAssetOptionsApi(key)),
+                }))),
+                captureAndAlertRequestErrorHoc(getBrandAssetOptionsApi("loadingIcon")),
+            ]);
+
+            if (!mounted) return;
+
+            if (configData) {
+                setConfig(configData);
+            }
+
+            setAssetOptions((current) => {
+                const next = { ...current };
+                optionEntries.forEach(({ key, options }) => {
+                    if (options) {
+                        next[key] = options;
+                    }
+                });
+                return next;
+            });
+            if (loadingIconOptions) {
+                setLoadingIconUploadOptions(loadingIconOptions.filter((option) => !option.is_default));
+            }
+            setLoading(false);
+        };
+
+        loadBrandData();
+
+        return () => {
+            mounted = false;
+        };
+    }, []);
+
+    const handleAssetUploaded = (key: BrandAssetKey, asset: BrandAsset) => {
+        setAssetOptions((current) => {
+            const uploadedOption: BrandAssetOption = { ...asset, is_default: false };
+            const uploadedValue = getAssetValue(uploadedOption);
+            return {
+                ...current,
+                [key]: [
+                    uploadedOption,
+                    ...(current[key] || []).filter((option) => getAssetValue(option) !== uploadedValue),
+                ],
+            };
+        });
+    };
+
+    const handleAssetDeleted = (
+        key: BrandAssetKey,
+        deletedAsset: BrandAssetOption,
+        fallbackAsset: BrandAsset,
+    ) => {
+        const deletedValue = getAssetValue(deletedAsset);
+        setAssetOptions((current) => ({
+            ...current,
+            [key]: (current[key] || []).filter((option) => getAssetValue(option) !== deletedValue),
+        }));
+        setConfig((current) => {
+            if (getAssetValue(current.assets[key]) !== deletedValue) {
+                return current;
+            }
+            return {
+                ...current,
+                assets: {
+                    ...current.assets,
+                    [key]: fallbackAsset,
+                },
+            };
+        });
+    };
+
+    const loadingIconAsset = useMemo<BrandAsset>(() => (
+        config.loading.icon || {
+            url: config.URLLoadingIcon || DEFAULT_BRAND_CONFIG.URLLoadingIcon || "",
+            relative_path: "",
+            file_name: config.URLLoadingIcon ? "" : t("theme.brandDefaultLoadingIcon"),
+        }
+    ), [config.URLLoadingIcon, config.loading.icon, t]);
+    const defaultLoadingAsset = useMemo<BrandAsset>(() => DEFAULT_BRAND_CONFIG.loading.icon || {
+        url: DEFAULT_BRAND_CONFIG.URLLoadingIcon || "",
+        relative_path: "",
+        file_name: "default-loading-icon",
+    }, []);
+    const loadingIconOptions = useMemo<BrandAssetOption[]>(() => (
+        mergeAssetOptions([
+            {
+                ...defaultLoadingAsset,
+                file_name: t("theme.brandDefaultLoadingIcon"),
+                is_default: true,
+            },
+            ...loadingIconUploadOptions.map((option) => ({ ...option, is_default: false })),
+            ...(config.loading.iconOptions || []).map((option) => ({ ...option, is_default: false })),
+        ])
+    ), [config.loading.iconOptions, defaultLoadingAsset, loadingIconUploadOptions, t]);
+    const handleTextChange = (key: BrandTextKey, value: BrandText) => {
+        setConfig((current) => ({
+            ...current,
+            [key]: value,
+        }));
+    };
+
+    const handleAssetChange = (key: BrandAssetKey, asset: BrandAsset) => {
+        setConfig((current) => ({
+            ...current,
+            assets: {
+                ...current.assets,
+                [key]: asset,
+            },
+        }));
+    };
+
+    const handleLoadingIconChange = (asset: BrandAsset) => {
+        setConfig((current) => ({
+            ...current,
+            URLLoadingIcon: asset.url,
+            loading: {
+                ...current.loading,
+                icon: asset.url ? asset : null,
+                iconOptions: asset.url && !asset.relative_path
+                    ? upsertAssetOption(current.loading.iconOptions, asset)
+                    : current.loading.iconOptions,
+            },
+        }));
+    };
+
+    const handleLoadingIconUploaded = (asset: BrandAsset) => {
+        setLoadingIconUploadOptions((current) => {
+            const uploadedOption: BrandAssetOption = { ...asset, is_default: false };
+            const uploadedValue = getAssetValue(uploadedOption);
+            return [
+                uploadedOption,
+                ...current.filter((option) => getAssetValue(option) !== uploadedValue),
+            ];
+        });
+    };
+
+    const handleLoadingUrlAdded = (asset: BrandAsset) => {
+        setConfig((current) => ({
+            ...current,
+            loading: {
+                ...current.loading,
+                iconOptions: upsertAssetOption(current.loading.iconOptions, asset),
+            },
+        }));
+    };
+
+    const handleLoadingIconDeleted = (
+        deletedAsset: BrandAssetOption,
+        fallbackAsset: BrandAsset,
+    ) => {
+        const deletedValue = getAssetValue(deletedAsset);
+        if (deletedAsset.relative_path) {
+            setLoadingIconUploadOptions((current) => (
+                current.filter((option) => getAssetValue(option) !== deletedValue)
+            ));
+        }
+
+        setConfig((current) => {
+            const currentValue = getAssetValue(current.loading.icon) || current.URLLoadingIcon || "";
+            const shouldResetCurrent = currentValue === deletedValue;
+            return {
+                ...current,
+                URLLoadingIcon: shouldResetCurrent ? fallbackAsset.url : current.URLLoadingIcon,
+                loading: {
+                    ...current.loading,
+                    icon: shouldResetCurrent ? (fallbackAsset.url ? fallbackAsset : null) : current.loading.icon,
+                    iconOptions: (current.loading.iconOptions || []).filter((option) => (
+                        getAssetValue(option) !== deletedValue
+                    )),
+                },
+            };
+        });
+    };
+
+    const handleAnimationChange = (animation: BrandConfig["loading"]["animation"]) => {
+        setConfig((current) => ({
+            ...current,
+            loading: {
+                ...current.loading,
+                animation,
+            },
+        }));
+    };
+
+    const handleReset = () => {
+        setConfig(cloneBrandConfig(DEFAULT_BRAND_CONFIG));
+    };
+
+    const handleSave = async () => {
+        setSaving(true);
+        const saved = await captureAndAlertRequestErrorHoc(saveBrandConfigApi(normalizeForSave(config)));
+        setSaving(false);
+        if (!saved) return;
+
+        setConfig(saved);
+        applyRuntimeBrandConfig(saved);
+        toast({
+            title: t("prompt"),
+            variant: "success",
+            description: t("theme.brandSaveSuccess"),
+        });
+    };
+
+    return (
+        <div className="h-full min-h-0 overflow-y-auto border-t bg-accent">
+            <div className="mx-auto grid max-w-[1480px] grid-cols-1 gap-6 px-6 py-5 xl:grid-cols-[minmax(0,1fr)_520px]">
+                <div className="min-w-0 space-y-6">
+                    <div className="flex items-center justify-between gap-3">
+                        <h2 className="text-lg font-medium">{t("theme.brandCustomization")}</h2>
+                        <div className="flex items-center gap-2">
+                            <Button type="button" variant="outline" onClick={handleReset} disabled={loading || saving}>
+                                <RefreshCw className="mr-1 size-4" />
+                                {t("theme.brandResetDefault")}
+                            </Button>
+                            <LoadButton type="button" loading={saving} disabled={loading} onClick={handleSave}>
+                                <Save className="mr-1 size-4" />
+                                {t("theme.brandSave")}
+                            </LoadButton>
+                        </div>
+                    </div>
+
+                    <section className="space-y-3 rounded-md border border-border bg-background p-4">
+                        <h3 className="text-base font-medium">{t("theme.brandTextSection")}</h3>
+                        <div className="space-y-3">
+                            <div className="hidden grid-cols-[180px_minmax(0,1fr)_minmax(0,1fr)_72px] items-center gap-3 lg:grid">
+                                <span />
+                                <span className="text-xs font-medium text-muted-foreground">{t("theme.brandChineseColumn")}</span>
+                                <span className="text-xs font-medium text-muted-foreground">{t("theme.brandEnglishColumn")}</span>
+                                <span />
+                            </div>
+                            {TEXT_ROWS.map(({ key, labelKey, descKey }) => (
+                                <BrandTextField
+                                    key={key}
+                                    label={t(labelKey)}
+                                    description={t(descKey)}
+                                    value={config[key]}
+                                    previewActive={previewTarget === key}
+                                    onChange={(value) => handleTextChange(key, value)}
+                                    onPreview={() => setPreviewTarget(key)}
+                                />
+                            ))}
+                        </div>
+                    </section>
+
+                    <section className="space-y-3">
+                        <h3 className="text-base font-medium">{t("theme.brandAssetsSection")}</h3>
+                        <div className="grid gap-3">
+                            {ASSET_ROWS.map(({ key, labelKey, specKey }) => (
+                                <BrandAssetUpload
+                                    key={key}
+                                    label={t(labelKey)}
+                                    spec={t(specKey)}
+                                    value={config.assets[key]}
+                                    fallbackUrl={DEFAULT_BRAND_CONFIG.assets[key].url}
+                                    category={key}
+                                    options={assetOptions[key]}
+                                    previewActive={previewTarget === key}
+                                    onChange={(asset) => handleAssetChange(key, asset)}
+                                    onPreview={() => setPreviewTarget(key)}
+                                    onUploaded={(asset) => handleAssetUploaded(key, asset)}
+                                    onDeleted={(deletedAsset, fallbackAsset) => handleAssetDeleted(key, deletedAsset, fallbackAsset)}
+                                />
+                            ))}
+                        </div>
+                    </section>
+
+                    <section className="space-y-3 rounded-md border border-border bg-background p-4">
+                        <h3 className="text-base font-medium">{t("theme.brandLoadingSection")}</h3>
+                        <BrandAssetUpload
+                            label={t("theme.brandLoadingIcon")}
+                            spec={t("theme.brandLoadingIconSpec")}
+                            value={loadingIconAsset}
+                            category="loadingIcon"
+                            options={loadingIconOptions}
+                            allowUrlOption
+                            emptyPreview={<StaticLoadingBarsIcon className="size-6 text-primary" />}
+                            previewActive={previewTarget === "loadingIcon"}
+                            onChange={handleLoadingIconChange}
+                            onPreview={() => setPreviewTarget("loadingIcon")}
+                            onUploaded={handleLoadingIconUploaded}
+                            onDeleted={handleLoadingIconDeleted}
+                            onUrlAdded={handleLoadingUrlAdded}
+                        />
+                        <div className="grid grid-cols-1 items-center gap-3 sm:grid-cols-[140px_minmax(0,240px)_auto]">
+                            <Label>{t("theme.brandLoadingAnimation")}</Label>
+                            <Select value={config.loading.animation || "none"} onValueChange={(value) => handleAnimationChange(value === "none" ? "" : value as BrandConfig["loading"]["animation"])}>
+                                <SelectTrigger>
+                                    <SelectValue />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    <SelectItem value="none">{t("theme.brandAnimationNone")}</SelectItem>
+                                    <SelectItem value="animate-spin">{t("theme.brandAnimationSpin")}</SelectItem>
+                                    <SelectItem value="animate-pulse">{t("theme.brandAnimationPulse")}</SelectItem>
+                                    <SelectItem value="animate-bounce">{t("theme.brandAnimationBounce")}</SelectItem>
+                                </SelectContent>
+                            </Select>
+                            <Button
+                                type="button"
+                                size="sm"
+                                variant={previewTarget === "loadingAnimation" ? "default" : "outline"}
+                                className="w-fit"
+                                onClick={() => setPreviewTarget("loadingAnimation")}
+                            >
+                                <Eye className="mr-1 size-4" />
+                                {t("theme.brandPreviewButton")}
+                            </Button>
+                        </div>
+                    </section>
+                </div>
+
+                <BrandPreviewPanel config={config} target={previewTarget} dark={Boolean(dark)} />
+            </div>
+        </div>
+    );
+}
diff --git a/src/frontend/platform/src/pages/SystemPage/theme/BrandPreviewPanel.tsx b/src/frontend/platform/src/pages/SystemPage/theme/BrandPreviewPanel.tsx
new file mode 100644
index 0000000000..a0660690f7
--- /dev/null
+++ b/src/frontend/platform/src/pages/SystemPage/theme/BrandPreviewPanel.tsx
@@ -0,0 +1,292 @@
+import DefaultLoadingIcon from "@/components/bs-icons/loading/Loading.svg?react";
+import type { BrandAsset, BrandConfig } from "@/controllers/API";
+import { withBrandBaseUrl } from "@/utils/brand";
+import { Monitor } from "lucide-react";
+import type { ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import type { BrandAssetKey, BrandPreviewTarget } from "./brandTypes";
+import { DEFAULT_BRAND_CONFIG } from "./brandTypes";
+
+interface BrandPreviewPanelProps {
+    config: BrandConfig;
+    target: BrandPreviewTarget | null;
+    dark: boolean;
+}
+
+const PREVIEW_LABEL_KEYS: Record<BrandPreviewTarget, string> = {
+    brandName: "theme.brandSystemName",
+    favicon: "theme.brandFavicon",
+    loginHeroLight: "theme.brandLoginHeroLight",
+    loginHeroDark: "theme.brandLoginHeroDark",
+    headerLogoLight: "theme.brandHeaderLogoLight",
+    headerLogoDark: "theme.brandHeaderLogoDark",
+    loadingIcon: "theme.brandLoadingIcon",
+    loadingAnimation: "theme.brandLoadingAnimation",
+};
+
+const cx = (...classes: Array<string | false | null | undefined>) => (
+    classes.filter(Boolean).join(" ")
+);
+
+const getImageUrl = (asset: BrandAsset | undefined, fallback: string) => (
+    withBrandBaseUrl(asset?.url || fallback)
+);
+
+const getLocalizedText = (text?: { zh?: string; en?: string }) => (
+    text?.zh || text?.en || ""
+);
+
+function Highlight({
+    active,
+    children,
+    className = "",
+}: {
+    active: boolean;
+    children: ReactNode;
+    className?: string;
+}) {
+    return (
+        <div
+            className={cx(
+                "relative rounded-md",
+                active && "z-10 ring-[3px] ring-primary ring-offset-[3px] ring-offset-background shadow-[0_0_0_8px_rgba(0,89,255,0.18)]",
+                className
+            )}
+        >
+            {children}
+        </div>
+    );
+}
+
+function SkeletonLine({ className = "" }: { className?: string }) {
+    return <div className={cx("h-3 rounded bg-muted", className)} />;
+}
+
+function MockBrowserFrame({
+    title,
+    faviconUrl,
+    target,
+    children,
+}: {
+    title: string;
+    faviconUrl: string;
+    target: BrandPreviewTarget;
+    children: ReactNode;
+}) {
+    return (
+        <div className="overflow-hidden rounded-md border bg-background shadow-sm">
+            <div className="flex h-10 items-center gap-2 border-b bg-muted px-3">
+                <Highlight active={target === "favicon"} className="shrink-0">
+                    <img src={faviconUrl} alt="" className="size-5 rounded object-contain" />
+                </Highlight>
+                <Highlight active={target === "brandName"} className="min-w-0">
+                    <div className="max-w-[180px] truncate rounded bg-background px-3 py-1 text-xs text-foreground">
+                        {title}
+                    </div>
+                </Highlight>
+                <div className="ml-auto flex gap-1">
+                    <span className="size-2 rounded-full bg-border" />
+                    <span className="size-2 rounded-full bg-border" />
+                    <span className="size-2 rounded-full bg-border" />
+                </div>
+            </div>
+            {children}
+        </div>
+    );
+}
+
+function LoginPreview({
+    config,
+    target,
+}: {
+    config: BrandConfig;
+    target: BrandPreviewTarget;
+}) {
+    const isDarkHero = target === "loginHeroDark" || target === "headerLogoDark";
+    const heroKey: BrandAssetKey = isDarkHero ? "loginHeroDark" : "loginHeroLight";
+    const logoKey: BrandAssetKey = target === "headerLogoDark" ? "headerLogoDark" : "headerLogoLight";
+    const faviconUrl = getImageUrl(config.assets.favicon, DEFAULT_BRAND_CONFIG.assets.favicon.url);
+    const title = getLocalizedText(config.brandName) || "BISHENG";
+
+    return (
+        <MockBrowserFrame title={title} faviconUrl={faviconUrl} target={target}>
+            <div className="grid h-[410px] grid-cols-[190px_minmax(0,1fr)] bg-background p-4">
+                <Highlight active={target === "loginHeroLight" || target === "loginHeroDark"} className="h-full overflow-hidden">
+                    <img
+                        src={getImageUrl(config.assets[heroKey], DEFAULT_BRAND_CONFIG.assets[heroKey].url)}
+                        alt=""
+                        className="h-full w-full rounded-md object-cover"
+                    />
+                </Highlight>
+                <div className="flex min-w-0 items-center justify-center px-7">
+                    <div className="w-full max-w-[260px] space-y-5">
+                        <Highlight active={target === "headerLogoLight" || target === "headerLogoDark"} className="mx-auto w-fit">
+                            <img
+                                src={getImageUrl(config.assets[logoKey], DEFAULT_BRAND_CONFIG.assets[logoKey].url)}
+                                alt=""
+                                className="h-10 max-w-[170px] object-contain"
+                            />
+                        </Highlight>
+                        <Highlight active={target === "brandName"}>
+                            <p className="text-center text-sm text-muted-foreground">{title}</p>
+                        </Highlight>
+                        <div className="space-y-3">
+                            <SkeletonLine className="h-9" />
+                            <SkeletonLine className="h-9" />
+                            <SkeletonLine className="h-9 w-2/3" />
+                            <div className="h-10 rounded-md bg-primary/80" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </MockBrowserFrame>
+    );
+}
+
+function AdminPreview({
+    config,
+    target,
+}: {
+    config: BrandConfig;
+    target: BrandPreviewTarget;
+}) {
+    const logoKey: BrandAssetKey = target === "headerLogoDark" ? "headerLogoDark" : "headerLogoLight";
+    const faviconUrl = getImageUrl(config.assets.favicon, DEFAULT_BRAND_CONFIG.assets.favicon.url);
+    const title = getLocalizedText(config.brandName) || "BISHENG";
+
+    return (
+        <MockBrowserFrame title={title} faviconUrl={faviconUrl} target={target}>
+            <div className="h-[410px] bg-accent p-4">
+                <div className="flex h-full overflow-hidden rounded-md border bg-background">
+                    <div className="w-[110px] border-r bg-muted/40 p-3">
+                        <Highlight active={target === "headerLogoLight" || target === "headerLogoDark"}>
+                            <img
+                                src={getImageUrl(config.assets[logoKey], DEFAULT_BRAND_CONFIG.assets[logoKey].url)}
+                                alt=""
+                                className="h-8 max-w-[86px] object-contain"
+                            />
+                        </Highlight>
+                        <div className="mt-7 space-y-4">
+                            {Array.from({ length: 7 }).map((_, index) => (
+                                <div key={index} className="flex items-center gap-2">
+                                    <span className="size-4 rounded bg-slate-300" />
+                                    <SkeletonLine className="w-12" />
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                    <div className="min-w-0 flex-1 p-4">
+                        <div className="mb-4 flex justify-end gap-2">
+                            <SkeletonLine className="h-8 w-16" />
+                            <SkeletonLine className="h-8 w-16" />
+                        </div>
+                        <div className="space-y-3">
+                            <SkeletonLine className="h-9" />
+                            <div className="grid grid-cols-2 gap-3">
+                                <SkeletonLine className="h-24" />
+                                <SkeletonLine className="h-24" />
+                            </div>
+                            <SkeletonLine className="h-28" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </MockBrowserFrame>
+    );
+}
+
+function LoadingPreview({
+    config,
+    target,
+}: {
+    config: BrandConfig;
+    target: BrandPreviewTarget;
+}) {
+    const faviconUrl = getImageUrl(config.assets.favicon, DEFAULT_BRAND_CONFIG.assets.favicon.url);
+    const title = getLocalizedText(config.brandName) || "BISHENG";
+    const loadingIconUrl = withBrandBaseUrl(config.URLLoadingIcon || config.loading?.icon?.url || "");
+
+    return (
+        <MockBrowserFrame title={title} faviconUrl={faviconUrl} target={target}>
+            <div className="relative flex h-[410px] items-center justify-center bg-background">
+                <div className="absolute inset-x-8 top-24 grid grid-cols-3 gap-3 opacity-40 blur-sm">
+                    {Array.from({ length: 6 }).map((_, index) => (
+                        <SkeletonLine key={index} className="h-16" />
+                    ))}
+                </div>
+                <Highlight active={target === "loadingIcon" || target === "loadingAnimation"} className="bg-background p-5 shadow">
+                    {loadingIconUrl ? (
+                        <img
+                            src={loadingIconUrl}
+                            alt=""
+                            className={cx("size-12 object-contain", config.loading.animation || "")}
+                        />
+                    ) : (
+                        <DefaultLoadingIcon className={cx("size-12 text-primary", config.loading.animation || "")} />
+                    )}
+                </Highlight>
+            </div>
+        </MockBrowserFrame>
+    );
+}
+
+function EmptyPreview() {
+    const { t } = useTranslation();
+    return (
+        <div className="flex h-[464px] items-center justify-center rounded-md border border-dashed bg-muted/30 p-6">
+            <div className="w-full max-w-[320px] space-y-4">
+                <div className="flex justify-center">
+                    <div className="flex size-12 items-center justify-center rounded-md bg-background text-muted-foreground shadow-sm">
+                        <Monitor className="size-6" />
+                    </div>
+                </div>
+                <p className="text-center text-sm text-muted-foreground">{t("theme.brandPreviewEmpty")}</p>
+                <div className="rounded-md border bg-background p-4">
+                    <SkeletonLine className="mb-3 h-8" />
+                    <div className="grid grid-cols-[80px_minmax(0,1fr)] gap-3">
+                        <SkeletonLine className="h-28" />
+                        <div className="space-y-2">
+                            <SkeletonLine />
+                            <SkeletonLine className="w-5/6" />
+                            <SkeletonLine className="h-16" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default function BrandPreviewPanel({ config, target, dark }: BrandPreviewPanelProps) {
+    const { t } = useTranslation();
+    const resolvedTarget = target;
+
+    const renderPreview = () => {
+        if (!resolvedTarget) return <EmptyPreview />;
+        if (resolvedTarget === "loadingIcon" || resolvedTarget === "loadingAnimation") {
+            return <LoadingPreview config={config} target={resolvedTarget} />;
+        }
+        if (resolvedTarget === "headerLogoLight" || resolvedTarget === "headerLogoDark") {
+            return <AdminPreview config={config} target={resolvedTarget} />;
+        }
+        const loginTargets: BrandPreviewTarget[] = ["brandName", "favicon", "loginHeroLight", "loginHeroDark"];
+        if (loginTargets.includes(resolvedTarget)) {
+            return <LoginPreview config={config} target={resolvedTarget} />;
+        }
+        return <AdminPreview config={config} target={dark ? "headerLogoDark" : "headerLogoLight"} />;
+    };
+
+    return (
+        <aside className="h-fit space-y-4 rounded-md border border-border bg-background p-4 xl:sticky xl:top-5">
+            <div className="flex min-h-6 items-center justify-between gap-3">
+                <h3 className="text-base font-medium">{t("theme.brandPreview")}</h3>
+                {resolvedTarget && (
+                    <span className="truncate rounded bg-primary/10 px-2 py-1 text-xs text-primary">
+                        {t(PREVIEW_LABEL_KEYS[resolvedTarget])}
+                    </span>
+                )}
+            </div>
+            {renderPreview()}
+        </aside>
+    );
+}
diff --git a/src/frontend/platform/src/pages/SystemPage/theme/brandTypes.ts b/src/frontend/platform/src/pages/SystemPage/theme/brandTypes.ts
new file mode 100644
index 0000000000..92319a3433
--- /dev/null
+++ b/src/frontend/platform/src/pages/SystemPage/theme/brandTypes.ts
@@ -0,0 +1,60 @@
+import type { BrandAssetOption, BrandConfig } from "@/controllers/API";
+
+export const BRAND_ASSET_ACCEPT = ".ico,.png,.jpg,.jpeg,.svg,.gif,.webp";
+
+export type BrandAssetKey = keyof BrandConfig["assets"];
+export type BrandTextKey = "brandName";
+export type BrandPreviewTarget = BrandTextKey | BrandAssetKey | "loadingIcon" | "loadingAnimation";
+
+export const DEFAULT_BRAND_CONFIG: BrandConfig = {
+    brandName: { zh: "BISHENG", en: "BISHENG" },
+    linsightAgentName: { zh: "灵思", en: "Linsight" },
+    assets: {
+        favicon: {
+            url: "/assets/bisheng/favicon.ico",
+            relative_path: "",
+            file_name: "",
+        },
+        loginHeroLight: {
+            url: "/assets/bisheng/login-logo-big.png",
+            relative_path: "",
+            file_name: "",
+        },
+        loginHeroDark: {
+            url: "/assets/bisheng/login-logo-dark.png",
+            relative_path: "",
+            file_name: "",
+        },
+        headerLogoLight: {
+            url: "/assets/bisheng/login-logo-small.png",
+            relative_path: "",
+            file_name: "",
+        },
+        headerLogoDark: {
+            url: "/assets/bisheng/logo-small-dark.png",
+            relative_path: "",
+            file_name: "",
+        },
+    },
+    loading: {
+        icon: null,
+        iconOptions: [],
+        animation: "",
+    },
+    URLLoadingIcon: "",
+};
+
+export const cloneBrandConfig = (config: BrandConfig): BrandConfig => (
+    JSON.parse(JSON.stringify(config))
+);
+
+export const buildDefaultAssetOptions = (): Record<BrandAssetKey, BrandAssetOption[]> => (
+    Object.entries(DEFAULT_BRAND_CONFIG.assets).reduce((result, [key, asset]) => ({
+        ...result,
+        [key]: [{
+            ...asset,
+            file_name: asset.url.split("/").pop() || asset.url,
+            is_default: true,
+        }],
+    }), {} as Record<BrandAssetKey, BrandAssetOption[]>)
+);
diff --git a/src/frontend/platform/src/pages/SystemPage/theme/index.tsx b/src/frontend/platform/src/pages/SystemPage/theme/index.tsx
index 27a1c910b0..8b63dc7ab8 100644
--- a/src/frontend/platform/src/pages/SystemPage/theme/index.tsx
+++ b/src/frontend/platform/src/pages/SystemPage/theme/index.tsx
@@ -7,6 +7,8 @@ import HSLitem from "./HSLitem";
 import { RadioGroup, RadioGroupItem } from "@/components/bs-ui/radio";
 import { Label } from "@/components/bs-ui/label";
 import { useTranslation } from "react-i18next";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/bs-ui/tabs";
+import BrandCustomization from "./BrandCustomization";
 
 // Default theme configuration
 const defaultTheme = {
@@ -58,7 +60,7 @@ const themeKeys = {
     '--black-button': 'theme.blackButton',
 };
 
-export default function Theme() {
+function ThemeColorSettings() {
     const [theme, setTheme] = useState(Object.keys(window.ThemeStyle.comp).length ? window.ThemeStyle.comp : { ...defaultTheme });
     const [bg, setBg] = useState(window.ThemeStyle.bg || 'logo')
     const { t } = useTranslation()
@@ -132,3 +134,22 @@ export default function Theme() {
         </div>
     </div>
 };
+
+export default function Theme() {
+    const { t } = useTranslation();
+
+    return (
+        <Tabs defaultValue="themeColor" className="flex h-full min-h-0 flex-1 flex-col">
+            <TabsList className="mt-2 shrink-0 self-start">
+                <TabsTrigger value="themeColor">{t("system.themeColor")}</TabsTrigger>
+                <TabsTrigger value="brand">{t("theme.brandCustomization")}</TabsTrigger>
+            </TabsList>
+            <TabsContent value="themeColor" className="min-h-0 flex-1 overflow-auto">
+                <ThemeColorSettings />
+            </TabsContent>
+            <TabsContent value="brand" className="min-h-0 flex-1 overflow-hidden">
+                <BrandCustomization />
+            </TabsContent>
+        </Tabs>
+    );
+}
diff --git a/src/frontend/platform/src/types/global.d.ts b/src/frontend/platform/src/types/global.d.ts
index d4b62f0608..919dde23a5 100644
--- a/src/frontend/platform/src/types/global.d.ts
+++ b/src/frontend/platform/src/types/global.d.ts
@@ -9,10 +9,21 @@ declare global {
         BRAND_CONFIG?: {
             brandName?: { zh?: string; en?: string };
             linsightAgentName?: { zh?: string; en?: string };
-            linsightFullName?: { zh?: string; en?: string };
-            dailyFullName?: { zh?: string; en?: string };
             loadingIcon?: string;
+            URLLoadingIcon?: string;
             loadingAnimation?: string;
+            loading?: {
+                icon?: { url?: string; relative_path?: string; file_name?: string } | null;
+                iconOptions?: Array<{ url?: string; relative_path?: string; file_name?: string }>;
+                animation?: string;
+            };
+            assets?: {
+                favicon?: { url?: string };
+                loginHeroLight?: { url?: string };
+                loginHeroDark?: { url?: string };
+                headerLogoLight?: { url?: string };
+                headerLogoDark?: { url?: string };
+            };
         };
         /** Runtime app config injected by public/assets/bisheng/config.js. */
         APP_CONFIG?: {
diff --git a/src/frontend/platform/src/utils/brand.ts b/src/frontend/platform/src/utils/brand.ts
new file mode 100644
index 0000000000..c59a44eb6d
--- /dev/null
+++ b/src/frontend/platform/src/utils/brand.ts
@@ -0,0 +1,29 @@
+type BrandAssetKey =
+    | "favicon"
+    | "loginHeroLight"
+    | "loginHeroDark"
+    | "headerLogoLight"
+    | "headerLogoDark";
+
+const ABSOLUTE_URL_PATTERN = /^(https?:|data:|blob:)/i;
+
+export function withBrandBaseUrl(url = "") {
+    if (!url) return "";
+    if (ABSOLUTE_URL_PATTERN.test(url)) return url;
+    const baseUrl = (__APP_ENV__.BASE_URL || "").replace(/\/$/, "");
+    const normalizedUrl = url.startsWith("/") ? url : `/${url}`;
+    return `${baseUrl}${normalizedUrl}`;
+}
+
+export function getBrandAssetUrl(key: BrandAssetKey, fallback: string) {
+    const configuredUrl = window.BRAND_CONFIG?.assets?.[key]?.url || "";
+    return withBrandBaseUrl(configuredUrl || fallback);
+}
+
+export function getBrandLoadingIconUrl() {
+    return withBrandBaseUrl(
+        window.BRAND_CONFIG?.URLLoadingIcon
+        || window.BRAND_CONFIG?.loadingIcon
+        || "",
+    );
+}