diff --git a/.trae/documents/Optimize Headless Page for Developers.md b/.trae/documents/Optimize Headless Page for Developers.md
new file mode 100644
index 00000000..65c8477e
--- /dev/null
+++ b/.trae/documents/Optimize Headless Page for Developers.md	
@@ -0,0 +1,32 @@
+I will optimize the `/headless` page to align with the "developer-first" and "freedom" philosophy you described.
+
+### Plan Overview
+The goal is to transform the page from a generic product description to a developer-centric manifesto that emphasizes freedom, open source, and lack of lock-in.
+
+### 1. Update `src/pages/headless/index.tsx`
+I will restructure the page to include a new "Philosophy" section and update the Hero section.
+
+- **Hero Section**: Refocus the message on "Runtime in a Container" and "Run Anywhere".
+- **New Section: "Developer Freedom" (Philosophy)**:
+  - addressing the "anti-lock-in" and "commercialization fears" directly.
+  - Highlight:
+    - **Deployment Freedom**: NAS, Server, Cloud.
+    - **Open Source Kernel**: Explicitly mention `oomol-runtime` is open source.
+    - **Trust**: "Code is Law" spirit.
+
+### 2. Update Internationalization (i18n)
+I will update `i18n/zh-CN/code.json` (and English equivalent) with the new copy to ensure the tone is right.
+
+**New Copy Preview (Chinese):**
+- **Hero Description**: "本质上是将 OOMOL Studio 的运行环境以容器镜像的方式交付给开发者。自由部署，拒绝捆绑。"
+- **Philosophy Title**: "我们的承诺：自由与开放"
+- **Key Points**:
+  - "拒绝商业捆绑：我们开源了核心 Runtime，确保你永远拥有底层的掌控权。"
+  - "部署无边界：无论是个人 NAS、私有服务器还是公有云，你的环境你做主。"
+  - "安心共建：尊重开发者意志，公开透明，Code is Law。"
+
+### 3. Visual/Structure Changes
+- Add a section emphasizing the "Open Source" aspect, possibly with a link to the GitHub repo for the runtime.
+- Use existing UI components (like `FeatureCard`) but repurposed for these new values.
+
+I will proceed with editing `src/pages/headless/index.tsx` and the translation files upon your confirmation.
\ No newline at end of file
diff --git a/.trae/documents/Redesign Cloud Page with Developer-First Narrative.md b/.trae/documents/Redesign Cloud Page with Developer-First Narrative.md
new file mode 100644
index 00000000..a7bee8a4
--- /dev/null
+++ b/.trae/documents/Redesign Cloud Page with Developer-First Narrative.md	
@@ -0,0 +1,28 @@
+I will update the **OOMOL Cloud** page (`src/pages/cloud`) to reflect the new developer-centric narrative, focusing on "Empathy," "Simplicity," and the "Three Core Modes."
+
+### 1. Update Translation Files (`i18n/zh-CN/code.json` & `i18n/en/code.json`)
+I will update the `CLOUD.*` keys to match the new copy.
+*   **Hero Section:**
+    *   Title: "Focus on Coding, Enjoy Programming" (专注代码，享受编程)
+    *   Subtitle: "You write the Function Block, leave the rest to OOMOL." (你只管写函数 Block，剩下的交给 OOMOL。)
+*   **Pain Points Section (New):**
+    *   Narrative: "Writing code is creative; delivering it shouldn't be a burden. Forget about server provisioning, environment setup, and deployment headaches." (作为开发者，我们深知：写代码是创造的乐趣，但交付往往是枯燥的负担...)
+*   **Three Modes (The Solution):**
+    *   **Function Library:** Share and compose (发布为函数库，供他人复用或组合)
+    *   **Serverless API:** One-click deploy, auto-scaling (部署为云函数，提供 Serverless API 服务)
+    *   **MCP for AI:** Native AI integration (以 MCP 方式提供给 AI 调用)
+*   **Pricing/Closing:**
+    *   "Pay-as-you-go. No upfront costs. Save money, save effort." (按调用收取费用，不用预支钱。省钱省力，享受编程。)
+
+### 2. Update Page Component (`src/pages/cloud/index.tsx`)
+I will restructure the page layout:
+*   **Hero:** Update title, description, and stats to highlight "No Ops" and "Pay-as-you-go".
+*   **Pain Points Section:** Add a new text-focused section to present the "Developer's Dilemma" narrative with affinity.
+*   **Core Modes Section:** Replace the generic "Use Cases" with the specific "Three Modes" (Library, API, MCP) as described.
+*   **Value/Pricing Section:** Emphasize the "Pay-as-you-go" model and "Enjoy Programming" philosophy.
+
+### 3. Update Styles (`src/pages/cloud/styles.module.scss`)
+*   Add styling for the new **Pain Points** section (clean, readable typography, centered layout).
+*   Adjust existing card styles if necessary to fit the new content structure.
+
+This approach ensures the page speaks directly to developers' pain points and clearly presents OOMOL Cloud as the solution, exactly as requested.
\ No newline at end of file
diff --git a/.trae/documents/Redesign Studio Page to Developer Philosophy.md b/.trae/documents/Redesign Studio Page to Developer Philosophy.md
new file mode 100644
index 00000000..5983ae25
--- /dev/null
+++ b/.trae/documents/Redesign Studio Page to Developer Philosophy.md	
@@ -0,0 +1,21 @@
+I will redesign the `src/pages/studio/index.tsx` page to be a "Design Philosophy" manifest, focusing on a developer-to-developer narrative rather than marketing features.
+
+**Key Changes:**
+
+1.  **Shift Tone:** Change from "Product Marketing" to "Engineering Blog/Manifesto".
+2.  **New Structure:**
+    *   **Header:** "Built by Developers, For Developers."
+    *   **The "Why" (The Frustration):** A storytelling section about why traditional workflow tools fail developers (black boxes, proprietary DSLs, bad editors).
+    *   **The "How" (Design Decisions):**
+        *   **Principle 1: Code is the Source of Truth.** Explaining the `Node == Function` mapping.
+        *   **Principle 2: Respect the Tooling.** Why we integrated full VS Code (Monaco) and LSP, not just a text area.
+        *   **Principle 3: No Artificial Limits.** Why we use real Docker containers, allowing full `npm`/`pip` access.
+    *   **The Result:** A brief summary of what this enables (bridging visual & code).
+3.  **Visual Style:**
+    *   Use a cleaner, editorial layout (more whitespace, better typography).
+    *   Use code snippets side-by-side with "Node" visuals to demonstrate the mapping.
+    *   Remove the repetitive "Feature Grid" and "Comparison Table" that duplicates the homepage.
+
+**File Changes:**
+*   `src/pages/studio/index.tsx`: Complete rewrite of the content.
+*   `src/pages/studio/styles.module.scss`: Update styles for the editorial/manifest layout.
diff --git "a/.trae/documents/\344\274\230\345\214\226 OOMOL App \351\241\265\351\235\242\346\226\271\346\241\210.md" "b/.trae/documents/\344\274\230\345\214\226 OOMOL App \351\241\265\351\235\242\346\226\271\346\241\210.md"
new file mode 100644
index 00000000..109e00c3
--- /dev/null
+++ "b/.trae/documents/\344\274\230\345\214\226 OOMOL App \351\241\265\351\235\242\346\226\271\346\241\210.md"	
@@ -0,0 +1,55 @@
+# 优化 OOMOL App 页面 (`/app`) 方案
+
+我将根据您的设计思路，重构 `/app` 页面，使其更具开发者亲和力，并清晰传达 "Block 函数 -> C 端产品" 的核心价值。
+
+## 1. 核心叙事调整
+将页面重心从简单的 "功能罗列" 转移到 "开发者价值实现" 上。
+**核心理念**：OOMOL App 是连接 **开发者代码 (Block)** 与 **用户需求** 的桥梁。
+**流程**：`编写函数 (Block)` -> `OOMOL 封装` -> `交付产品 (Chat/Applet)`
+
+## 2. 页面结构设计
+
+### A. Hero 区域 (首屏)
+- **标题**: "OOMOL App：交付 AI 产品的最后一公里"
+- **副标题**: "无需编写 UI，将你的 Block 函数直接转化为 AI Chat 技能与 Applet 小程序，瞬间交付给用户。"
+- **CTA**: 保留下载与文档链接，增加 "查看示例"（如果有）。
+
+### B. 概念阐述 (The "Why")
+- **文案**: "代码即产品 (Code is Product)"。
+- **视觉/描述**: 展示一个简单的函数代码片段，经过 OOMOL 处理，分别变成 "对话界面" 和 "表单界面" 的示意。
+- **开发者痛点解决**: 强调 "零前端代码"、"自动参数解析"、"即刻上线"。
+
+### C. 双产品介绍 (The "What")
+采用对比或并列布局，清晰区分 Chat 与 Applet 的定位：
+
+| 产品 | **OOMOL Chat (AI 助手)** | **OOMOL Applet (表单小程序)** |
+| :--- | :--- | :--- |
+| **定位** | AI 辅助执行 (AI-Assisted) | 直接功能调用 (Direct Execution) |
+| **用户场景** | **"我不清楚具体怎么做"**<br>需求模糊，需要 AI 拆解任务、组合工具。 | **"我知道我要什么"**<br>需求明确，高频使用，追求速度与精准。 |
+| **开发者视角** | **Tools as Skills**<br>你的函数成为 AI 的技能/手脚。 | **Function as App**<br>你的函数直接生成独立小应用。 |
+| **交互形态** | 自然语言对话，多轮交互。 | 结构化表单，填参即用。 |
+| **Icon** | 🤖 智能助手 | 📱 小程序/表单 |
+
+### D. 开发者亲和力优化 (Developer Affinity)
+- **术语使用**: 使用 "参数 (Parameters)"、"返回值 (Return Values)"、"函数调用 (Function Call)" 等开发者熟悉的词汇。
+- **视觉元素**: 在介绍功能时，配合代码视角的注解。例如 "Applet 界面 = 自动根据 Schema 生成 UI"。
+
+## 3. 执行计划
+
+### 1. 修改 `i18n` 翻译文件
+- 在 `i18n/zh-CN/code.json` 中添加新的文案 Key (如 `APP.new.hero.title`, `APP.product.chat.desc` 等)。
+- 在 `i18n/en/code.json` 中添加对应的英文翻译，确保国际化支持。
+
+### 2. 重构 `src/pages/app/index.tsx`
+- 移除旧的 `useCases` 和 `coreFeatures` 数据结构。
+- 实现新的页面布局：
+    - **Hero**: 强调 "函数交付"。
+    - **Concept**: 插入新的概念介绍段落。
+    - **ProductSplit**: 左右分栏展示 Chat 和 Applet。
+- 保持原有的设计风格 (SCSS)，复用 `Layout` 和通用组件。
+
+### 3. 验证
+- 确认中英文案显示正确。
+- 确认页面响应式布局正常。
+
+请确认此方案，我将开始执行。
\ No newline at end of file
diff --git a/docs/headless/.env.example b/docs/headless/.env.example
new file mode 100644
index 00000000..8cd940e3
--- /dev/null
+++ b/docs/headless/.env.example
@@ -0,0 +1,5 @@
+OOMOL_ENV=prod
+OOMOL_TOKEN=
+START_API_SERVER=true
+START_UI_SERVER=true
+OOMOL_LOCAL=1
diff --git a/docs/headless/index.mdx b/docs/headless/index.mdx
new file mode 100644
index 00000000..314dcbb8
--- /dev/null
+++ b/docs/headless/index.mdx
@@ -0,0 +1,31 @@
+# Headless
+
+用于本地部署（通常是在 NAS 里）的单机版无头 studio，没有 Electron，没有服务端调度。
+
+## 本地调试
+
+1. 准备 [.env](./.env.example)
+2. 打包 `pnpm build`
+3. 运行 `pnpm start`
+
+## Docker 部署
+
+1. 准备存储目录，例如：
+
+   ```bash
+   mkdir -p $HOME/oomol-storage
+   ```
+
+2. 准备环境变量文件：
+
+   将 [.env](./.env.example) 放入 `$HOME/.oomol-studio/headless/.env`，并删掉 `OOMOL_LOCAL=1`。
+
+3. 拉取并运行 Docker 镜像，绑定存储目录和环境变量文件：
+
+   ```bash
+   docker pull oomolstudio/headless:latest
+
+   docker run -d --privileged --name oomol-headless -p 4000:4000 -p 52222:52222 --mount type=bind,src=$HOME/.oomol-studio/headless/.env,dst=/app/.env --mount type=bind,src=$HOME/oomol-storage,dst=/oomol-driver/oomol-storage oomolstudio/headless:latest
+   ```
+
+4. 在 `http://localhost:4000` 访问 UI 界面。
diff --git a/docusaurus.config.js b/docusaurus.config.js
index 8ef0cc05..9f4713cb 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -176,29 +176,29 @@ const config = {
           srcDark: "img/logo-en-dark.svg",
         },
         items: [
-          // {
-          //   type: "dropdown",
-          //   label: "Product",
-          //   position: "left",
-          //   items: [
-          //     {
-          //       to: "/studio",
-          //       label: "navbar.oomol-studio",
-          //     },
-          //     {
-          //       to: "/chat",
-          //       label: "navbar.oomol-chat",
-          //     },
-          //     {
-          //       to: "/cloud",
-          //       label: "navbar.oomol-cloud",
-          //     },
-          //     {
-          //       to: "/headless",
-          //       label: "navbar.oomol-headless",
-          //     },
-          //   ],
-          // },
+          {
+            type: "dropdown",
+            label: "Product",
+            position: "left",
+            items: [
+              {
+                to: "/studio",
+                label: "navbar.oomol-studio",
+              },
+              {
+                to: "/app",
+                label: "navbar.oomol-app",
+              },
+              {
+                to: "/cloud",
+                label: "navbar.oomol-cloud",
+              },
+              {
+                to: "/headless",
+                label: "navbar.oomol-headless",
+              },
+            ],
+          },
           {
             type: "doc",
             docId: "get-started/quickstarts",
@@ -207,7 +207,7 @@ const config = {
           },
           { to: "/updates", label: "Updates", position: "left" },
           { to: "/blog", label: "Blog", position: "left" },
-          { to: "/contact-us", label: "Community", position: "left" },
+          { to: "/downloads", label: "navbar.download", position: "left" },
           // { to: "/pricing", label: "Pricing", position: "left" },
         ],
       },
diff --git a/i18n/en/code.json b/i18n/en/code.json
index 8ba64b62..47320623 100644
--- a/i18n/en/code.json
+++ b/i18n/en/code.json
@@ -1629,7 +1629,70 @@
   "CREATE.description": {
     "message": "OOMOL's AI tool creation platform. The core advantage lies in: retaining the unlimited creative ability of traditional programming while having the convenience of low-code development, allowing users to efficiently build various AI tools."
   },
+  "STUDIO.hero.subtitle": {
+    "message": "Workflow Tools Redesigned for Developers"
+  },
   "STUDIO.hero.description": {
+    "message": "We heard developers' voices: traditional workflow platforms make simple things complicated. OOMOL Studio changes everything."
+  },
+  "STUDIO.painPoints.title": {
+    "message": "Three Pain Points of Traditional Workflow Tools"
+  },
+  "STUDIO.painPoints.subtitle": {
+    "message": "As developers, we know exactly how frustrating these problems are"
+  },
+  "STUDIO.painPoints.learningCurve.title": {
+    "message": "High Learning Curve"
+  },
+  "STUDIO.painPoints.learningCurve.description": {
+    "message": "Learning the platform's interaction and design concepts, simple if-else logic becomes complicated with drag-and-drop components. Problems that could be solved with one line of code require time to understand the platform's abstract concepts."
+  },
+  "STUDIO.painPoints.extension.title": {
+    "message": "Difficult Extension"
+  },
+  "STUDIO.painPoints.extension.description": {
+    "message": "Problems that could be solved by importing an open-source library in programming become as complex as rocket science in workflow platforms. Want to extend functionality? Check if the platform supports it first—if not, you're stuck."
+  },
+  "STUDIO.painPoints.toolSwitching.title": {
+    "message": "Leaving Familiar Tools"
+  },
+  "STUDIO.painPoints.toolSwitching.description": {
+    "message": "Even if the platform provides scripting, you have to write code in a clunky web editor instead of your familiar VSCode. You lose code completion, debugging tools, and various extensions, significantly reducing development efficiency."
+  },
+  "STUDIO.solutions.title": {
+    "message": "OOMOL Studio's Solutions"
+  },
+  "STUDIO.solutions.subtitle": {
+    "message": "We redesigned the workflow development experience based on developers' actual needs"
+  },
+  "STUDIO.solutions.functions.title": {
+    "message": "Nodes as Functions, Zero Barrier for Libraries"
+  },
+  "STUDIO.solutions.functions.description": {
+    "message": "In OOMOL Studio, nodes are functions. You don't need to learn any new concepts—write code in familiar ways and import any open-source library. Need a feature? Just npm install."
+  },
+  "STUDIO.solutions.functions.highlight": {
+    "message": "No new concepts, no ceiling. Create workflows like writing code."
+  },
+  "STUDIO.solutions.vscode.title": {
+    "message": "Built on VSCode, Inherit Your Coding Habits"
+  },
+  "STUDIO.solutions.vscode.description": {
+    "message": "OOMOL Studio is built on VSCode, so you can write node code in your familiar editor. Code completion, debugging tools, Git integration, various extensions... all your familiar development experience is here."
+  },
+  "STUDIO.solutions.vscode.highlight": {
+    "message": "Familiar editor, familiar shortcuts, zero adaptation cost."
+  },
+  "STUDIO.solutions.container.title": {
+    "message": "Built-in Container, Consistent Environment for Easy Deployment"
+  },
+  "STUDIO.solutions.container.description": {
+    "message": "Built-in container environment ensures local development is identical to server environment. Write code and run it directly without worrying about 'works on my machine'. Network proxy turns your device into a personal server, zero-cost task launching."
+  },
+  "STUDIO.solutions.container.highlight": {
+    "message": "Local is production, no deployment pitfalls. Idle devices can serve too."
+  },
+  "STUDIO.hero.description.old": {
     "message": "Visual Workflow + Full Code with VSCode, Build and Share AI Tools Fast"
   },
   "STUDIO.hero.stat1": {
@@ -2047,7 +2110,31 @@
     "message": "Auto-select the most suitable model"
   },
   "HEADLESS.hero.description": {
-    "message": "Docker containerized deployment to easily run OOMOL applications on servers and NAS"
+    "message": "OOMOL Headless is essentially delivering the OOMOL Studio runtime environment to developers as a container image. Deploy freely, no lock-in."
+  },
+  "HEADLESS.philosophy.title": {
+    "message": "Our Commitment: Freedom & Openness"
+  },
+  "HEADLESS.philosophy.subtitle": {
+    "message": "We understand developers' concerns about commercial lock-in. OOMOL respects your will and lets technology return to purity."
+  },
+  "HEADLESS.philosophy.freedom.title": {
+    "message": "Deployment Freedom"
+  },
+  "HEADLESS.philosophy.freedom.desc": {
+    "message": "Your code, your device. Whether it's a personal NAS, private server, or public cloud, run it wherever you want."
+  },
+  "HEADLESS.philosophy.opensource.title": {
+    "message": "Open Source Kernel"
+  },
+  "HEADLESS.philosophy.opensource.desc": {
+    "message": "We open-sourced the OOMOL Runtime core code. Code is Law—this is our direct answer to 'refusing excessive commercialization'."
+  },
+  "HEADLESS.philosophy.community.title": {
+    "message": "Build with Peace of Mind"
+  },
+  "HEADLESS.philosophy.community.desc": {
+    "message": "No hidden terms, no forced upgrades. We are committed to building a developer ecosystem where everyone can use it with peace of mind and build happily together."
   },
   "HEADLESS.hero.stat1": {
     "message": "Containerized"
@@ -2064,6 +2151,12 @@
   "HEADLESS.hero.cta.docs": {
     "message": "View Docs"
   },
+  "HEADLESS.deployment.title": {
+    "message": "Docker Deployment"
+  },
+  "HEADLESS.deployment.viewDocs": {
+    "message": "View Full Documentation →"
+  },
   "HEADLESS.useCases.title": {
     "message": "Use Cases"
   },
@@ -2250,106 +2343,253 @@
   "HOME.ProductComparison.cloud.tech": {
     "message": "On-demand scaling, zero operations overhead, instant production deployment"
   },
+  "CLOUD.hero.title": {
+    "message": "OOMOL Cloud"
+  },
   "CLOUD.hero.description": {
-    "message": "Managed runtime environment with RESTful API and MCP protocol endpoints, supporting auto-scaling"
+    "message": "You write the Function Block, leave the rest to OOMOL. Free yourself from operations and let your ideas take flight instantly."
   },
   "CLOUD.hero.stat1": {
-    "message": "Auto-Scaling"
+    "message": "Painless Gen"
   },
   "CLOUD.hero.stat2": {
-    "message": "API Service"
+    "message": "Pay-as-you-go"
   },
   "CLOUD.hero.stat3": {
-    "message": "AI Integration"
+    "message": "Save Effort"
   },
   "CLOUD.hero.cta.start": {
-    "message": "Get Started"
+    "message": "Start Building"
   },
   "CLOUD.hero.cta.docs": {
-    "message": "View Docs"
+    "message": "Learn More"
   },
-  "CLOUD.useCases.title": {
-    "message": "Use Cases"
+  "CLOUD.painPoints.title": {
+    "message": "Delivery Shouldn't Be Torture"
   },
-  "CLOUD.useCases.subtitle": {
-    "message": "Focus on business logic without worrying about servers and operations"
+  "CLOUD.painPoints.subtitle": {
+    "message": "We know the struggle as developers"
   },
-  "CLOUD.useCase.quickDeploy.title": {
-    "message": "Rapid Service Launch"
+  "CLOUD.painPoints.description": {
+    "message": "Coding is creative joy, but delivering code is often a burden. Servers, environments, deployment, UI design... these roadblocks kill many genius ideas. We want to change that."
   },
-  "CLOUD.useCase.quickDeploy.description": {
-    "message": "SMB teams deploy workflows as cloud APIs without server configuration"
+  "CLOUD.solution.title": {
+    "message": "Focus on Coding, Enjoy Programming"
   },
-  "CLOUD.useCase.aiAgent.title": {
-    "message": "AI Agent Integration"
+  "CLOUD.solution.subtitle": {
+    "message": "Write the Block, OOMOL handles the rest"
   },
-  "CLOUD.useCase.aiAgent.description": {
-    "message": "Connect to Claude, ChatGPT and other AI platforms via MCP protocol, providing custom tools"
+  "CLOUD.modes.library.title": {
+    "message": "Publish as Library"
   },
-  "CLOUD.useCase.miniapp.title": {
-    "message": "Mini-App Backend"
+  "CLOUD.modes.library.description": {
+    "message": "Share Blocks with others or compose them into new features. Let your code be the foundation of community innovation."
   },
-  "CLOUD.useCase.miniapp.description": {
-    "message": "Provide RESTful APIs for mini-apps and mobile applications with auto-generated docs and test UI"
+  "CLOUD.modes.serverless.title": {
+    "message": "Deploy as Cloud Function"
   },
-  "CLOUD.useCase.noOps.title": {
-    "message": "Zero Operations"
+  "CLOUD.modes.serverless.description": {
+    "message": "One-click deploy as Serverless API. No Ops, auto-scaling, providing stable API services for others."
   },
-  "CLOUD.useCase.noOps.description": {
-    "message": "Auto-monitoring, logging, security isolation - no infrastructure management needed"
+  "CLOUD.modes.mcp.title": {
+    "message": "Provide for AI (MCP)"
   },
-  "CLOUD.features.title": {
-    "message": "Core Features"
+  "CLOUD.modes.mcp.description": {
+    "message": "Publish via MCP (Model Context Protocol), allowing AI Agents to directly call your functions and connect to the intelligent world."
   },
-  "CLOUD.features.oneDeploy.title": {
-    "message": "One-Click Deploy"
+  "CLOUD.pricing.title": {
+    "message": "Pay Per Call, No Upfront Cost"
   },
-  "CLOUD.features.oneDeploy.description": {
-    "message": "Push directly from Studio to Cloud with auto domain and HTTPS configuration"
+  "CLOUD.pricing.description": {
+    "message": "No expensive server fees, no complex prepaid plans. We charge by call count. Save money, save effort, and focus on the joy of programming."
   },
-  "CLOUD.features.oneDeploy.feature1": {
-    "message": "Git Push-style deployment"
+  "CLOUD.pricing.cta": {
+    "message": "View Pricing"
   },
-  "CLOUD.features.oneDeploy.feature2": {
-    "message": "Auto HTTPS certificate setup"
+  "CLOUD.opensource.title": {
+    "message": "Open Source Infrastructure"
   },
-  "CLOUD.features.oneDeploy.feature3": {
-    "message": "Zero-downtime updates"
+  "CLOUD.opensource.subtitle": {
+    "message": "OOMOL's underlying runtime kernel is fully open source, giving you complete control over your deployment environment"
   },
-  "CLOUD.features.monitor.title": {
-    "message": "Auto Monitoring"
+  "CLOUD.opensource.description": {
+    "message": "We believe in the power of open source. OOMOL's virtual machine and runtime core code are completely open source, allowing you to freely view, modify, and deploy. Whether it's a personal NAS, private server, or public cloud, you have complete deployment freedom."
   },
-  "CLOUD.features.monitor.description": {
-    "message": "Real-time performance monitoring, log viewing, error tracking"
+  "CLOUD.opensource.projects.title": {
+    "message": "Open Source Projects"
   },
-  "CLOUD.features.monitor.feature1": {
-    "message": "Real-time metrics dashboard"
+  "CLOUD.opensource.ovm.title": {
+    "message": "OVM"
   },
-  "CLOUD.features.monitor.feature2": {
-    "message": "Centralized log search"
+  "CLOUD.opensource.ovm.description": {
+    "message": "Cross-platform virtual machine manager providing unified container runtime for OOMOL"
   },
-  "CLOUD.features.monitor.feature3": {
-    "message": "Anomaly alerts"
+  "CLOUD.opensource.ovm-core.title": {
+    "message": "OVM Core"
   },
-  "CLOUD.features.security.title": {
-    "message": "Security Isolation"
+  "CLOUD.opensource.ovm-core.description": {
+    "message": "Core runtime library for OVM, handling container lifecycle and resource management"
   },
-  "CLOUD.features.security.description": {
-    "message": "Container-level isolation, access control, data encryption"
+  "CLOUD.opensource.ovm-win.title": {
+    "message": "OVM Windows"
   },
-  "CLOUD.features.security.feature1": {
-    "message": "Sandbox environment isolation"
+  "CLOUD.opensource.ovm-win.description": {
+    "message": "OVM implementation for Windows platform, supporting WSL2 and Hyper-V"
   },
-  "CLOUD.features.security.feature2": {
-    "message": "API key management"
+  "CLOUD.opensource.ovm-mac.title": {
+    "message": "OVM macOS"
   },
-  "CLOUD.features.security.feature3": {
-    "message": "Data encryption in transit"
+  "CLOUD.opensource.ovm-mac.description": {
+    "message": "OVM implementation for macOS platform, based on Apple Virtualization Framework"
   },
   "STUDIO.hero.description": {
     "message": "Local development environment for developers, VSCode-based visual programming tool with FRP protocol for P2P computing power sharing"
   },
   "HEADLESS.hero.description": {
     "message": "Containerized deployment solution, packaging workflows as standalone Docker images for cloud servers, private clouds and K8s clusters"
+  },
+  "APP.new.hero.title": { "message": "OOMOL App" },
+  "APP.new.hero.subtitle": {
+    "message": "The Last Mile of AI Product Delivery"
+  },
+  "APP.new.hero.description": {
+    "message": "Turn your Block functions into AI Chat skills and Applets instantly, without writing any UI code."
+  },
+  "APP.new.concept.title": { "message": "Code is Product" },
+  "APP.new.concept.description": {
+    "message": "OOMOL automatically wraps your backend logic (Blocks) into frontend products. You focus on the function; we connect it to the user."
+  },
+  "APP.new.chat.pill": { "message": "Chat · Workflow Copilot" },
+  "APP.new.chat.title": { "message": "OOMOL Chat" },
+  "APP.new.chat.subtitle": {
+    "message": "AI Assistant · Exploratory Interaction"
+  },
+  "APP.new.chat.description": {
+    "message": "When user intent is vague, AI intelligently orchestrates your tools to solve the problem."
+  },
+  "APP.new.chat.meta1.label": { "message": "For Whom" },
+  "APP.new.chat.meta1.value": {
+    "message": "People who need to rapidly turn ideas into automated workflows"
+  },
+  "APP.new.chat.meta2.label": { "message": "Core Experience" },
+  "APP.new.chat.meta2.value": {
+    "message": "Build workflows step-by-step through conversation, like discussing with a colleague"
+  },
+  "APP.new.chat.devValue": {
+    "message": "Tools as Skills: Your functions become the AI's capabilities."
+  },
+  "APP.new.applet.pill": { "message": "Applet · Composable Apps" },
+  "APP.new.applet.title": { "message": "OOMOL Applet" },
+  "APP.new.applet.subtitle": {
+    "message": "Form Applet · Deterministic Interaction"
+  },
+  "APP.new.applet.description": {
+    "message": "When user needs are clear, direct execution with parameters for efficiency."
+  },
+  "APP.new.applet.meta1.label": { "message": "For Whom" },
+  "APP.new.applet.meta1.value": {
+    "message": "Teams that need to publish, reuse, and share automation capabilities"
+  },
+  "APP.new.applet.meta2.label": { "message": "Core Experience" },
+  "APP.new.applet.meta2.value": {
+    "message": "Compose capability components into products, like building with LEGO"
+  },
+  "APP.new.applet.devValue": {
+    "message": "Function as App: Auto-generated UI, zero frontend code."
+  },
+  "APP.new.hero.cta.web": {
+    "message": "Use in Web"
+  },
+  "APP.new.hero.cta.studio": {
+    "message": "Use in OOMOL Studio"
+  },
+  "APP.new.cta.download": { "message": "Download" },
+  "APP.new.cta.docs": { "message": "View Docs" },
+  "STUDIO.page.title": {
+    "message": "OOMOL Studio - Design Philosophy"
+  },
+  "STUDIO.page.description": {
+    "message": "OOMOL Studio. Why we built OOMOL Studio the way we did."
+  },
+  "STUDIO.manifesto.title": {
+    "message": "OOMOL Studio"
+  },
+  "STUDIO.manifesto.subtitle": {
+    "message": "We built OOMOL Studio because we were tired of choosing between \"easy to use\" and \"powerful enough.\""
+  },
+  "STUDIO.story.paragraph1": {
+    "message": "As engineers, we love automation. We love chaining tools together to build pipelines, agents, and data flows. But whenever we tried to use existing \"Workflow Platforms,\" we hit a wall."
+  },
+  "STUDIO.story.frustration.line1": {
+    "message": "\"Why do I have to learn a proprietary JSON syntax just to write an if/else statement?\""
+  },
+  "STUDIO.story.frustration.line2": {
+    "message": "\"Why can't I just import a library? Why do I have to wait for the platform to support it?\""
+  },
+  "STUDIO.story.frustration.line3": {
+    "message": "\"Why am I coding in a textarea with no autocomplete?\""
+  },
+  "STUDIO.story.paragraph2": {
+    "message": "We realized that Low Code often meant High Frustration for professional developers. It abstracted away the things we actually liked: control, debugging, and the ecosystem."
+  },
+  "STUDIO.story.paragraph3": {
+    "message": "So we decided to build something different. Not a \"No-Code\" toy, but a real IDE."
+  },
+  "STUDIO.principles.header": {
+    "message": "Our Design Philosophy"
+  },
+  "STUDIO.principle1.title": {
+    "message": "1. Code is the Source of Truth"
+  },
+  "STUDIO.principle1.paragraph1": {
+    "message": "We didn't invent a new visual language. We simply visualize standard code."
+  },
+  "STUDIO.principle1.paragraph2": {
+    "message": "In OOMOL, a Node is just a Function. The inputs are arguments, the outputs are return values."
+  },
+  "STUDIO.principle1.paragraph3": {
+    "message": "You don't \"configure\" a node; you write a function. The UI is just a reflection of your code's signature."
+  },
+  "STUDIO.principle1.codeComment1": {
+    "message": "// This function..."
+  },
+  "STUDIO.principle1.codeComment2": {
+    "message": "// ...Automatically becomes a Node with:"
+  },
+  "STUDIO.principle1.codeComment3": {
+    "message": "// Input port: \"text\""
+  },
+  "STUDIO.principle1.codeComment4": {
+    "message": "// Output port: \"result\""
+  },
+  "STUDIO.principle2.title": {
+    "message": "2. Respect the Tooling"
+  },
+  "STUDIO.principle2.paragraph1": {
+    "message": "We believe you shouldn't have to downgrade your environment just to use a visual tool."
+  },
+  "STUDIO.principle2.paragraph2": {
+    "message": "That's why we embedded the full Monaco Editor (VS Code) into every node."
+  },
+  "STUDIO.principle2.paragraph3": {
+    "message": "Intellisense, Type Checking, Linting, Formatting, and even full Debugging Protocol (DAP) support. It feels like home because it is home."
+  },
+  "STUDIO.principle3.title": {
+    "message": "3. Containerized Deployment, No Artificial Limits"
+  },
+  "STUDIO.principle3.paragraph1": {
+    "message": "Traditional platforms run your code in a restricted, proprietary sandbox. If you need native Node.js modules or system-level tools, you're stuck."
+  },
+  "STUDIO.principle3.paragraph2": {
+    "message": "OOMOL runs on Standard Docker Containers."
+  },
+  "STUDIO.principle3.paragraph3": {
+    "message": "Need ffmpeg? apt-get install it. Need specific system dependencies? Just install them."
+  },
+  "STUDIO.principle3.codeComment": {
+    "message": "# No wrappers. Just standard tools."
+  },
+  "STUDIO.principle3.codeComment2": {
+    "message": "# It just works."
   }
 }
diff --git a/i18n/en/docusaurus-theme-classic/navbar.json b/i18n/en/docusaurus-theme-classic/navbar.json
index b584eb6a..c0d295e4 100644
--- a/i18n/en/docusaurus-theme-classic/navbar.json
+++ b/i18n/en/docusaurus-theme-classic/navbar.json
@@ -51,9 +51,9 @@
     "message": "OOMOL Hub",
     "description": "Navbar item with label navbar.oomol-hub"
   },
-  "item.label.navbar.oomol-chat": {
-    "message": "OOMOL Chat",
-    "description": "Navbar item with label navbar.oomol-chat"
+  "item.label.navbar.oomol-app": {
+    "message": "OOMOL App",
+    "description": "Navbar item with label navbar.oomol-app"
   },
   "item.label.navbar.oomol-cloud": {
     "message": "OOMOL Cloud",
@@ -67,6 +67,10 @@
     "message": "Product",
     "description": "Navbar item with label Product"
   },
+  "item.label.navbar.download": {
+    "message": "Download",
+    "description": "Navbar item with label navbar.download"
+  },
   "title": {
     "message": "OOMOL",
     "description": "The title in the navbar"
diff --git a/i18n/zh-CN/code.json b/i18n/zh-CN/code.json
index f1f0429a..4c8861b1 100644
--- a/i18n/zh-CN/code.json
+++ b/i18n/zh-CN/code.json
@@ -1181,7 +1181,70 @@
   "CREATE.description": {
     "message": "OOMOL 推出的 AI 工具创作平台。该平台的核心优势在于：既保留了传统编程的无限创造能力，又具备低代码开发的便捷性，让用户能够高效地构建各类 AI 工具。"
   },
+  "STUDIO.hero.subtitle": {
+    "message": "为开发者重新设计的工作流工具"
+  },
   "STUDIO.hero.description": {
+    "message": "我们听到了开发者的声音：传统工作流平台让简单的事情变复杂。OOMOL Studio 改变这一切。"
+  },
+  "STUDIO.painPoints.title": {
+    "message": "传统工作流工具的三大痛点"
+  },
+  "STUDIO.painPoints.subtitle": {
+    "message": "作为开发者，我们深知这些问题有多让人头疼"
+  },
+  "STUDIO.painPoints.learningCurve.title": {
+    "message": "学习成本高"
+  },
+  "STUDIO.painPoints.learningCurve.description": {
+    "message": "学习平台的交互和设计理念，简单的 if-else 逻辑被几个拖拽组件搞得复杂难用。明明一句代码能解决的问题，却要花时间理解平台的抽象概念。"
+  },
+  "STUDIO.painPoints.extension.title": {
+    "message": "扩展麻烦"
+  },
+  "STUDIO.painPoints.extension.description": {
+    "message": "编程时引用个开源库就能解决的问题，在工作流平台里却像造火箭一样复杂。想要扩展功能？先看看平台支不支持，不支持就只能干瞪眼。"
+  },
+  "STUDIO.painPoints.toolSwitching.title": {
+    "message": "离开熟悉的工具"
+  },
+  "STUDIO.painPoints.toolSwitching.description": {
+    "message": "就算平台提供了脚本功能，也要在难用的网页编辑器里写代码，而不是在熟悉的 VSCode 中。失去了代码补全、调试工具和各种插件，开发效率大打折扣。"
+  },
+  "STUDIO.solutions.title": {
+    "message": "OOMOL Studio 的解决方案"
+  },
+  "STUDIO.solutions.subtitle": {
+    "message": "我们从开发者的实际需求出发，重新设计工作流开发体验"
+  },
+  "STUDIO.solutions.functions.title": {
+    "message": "节点即函数，引用库零门槛"
+  },
+  "STUDIO.solutions.functions.description": {
+    "message": "在 OOMOL Studio 中，节点就是函数。你不需要学习任何新概念，用熟悉的方式编写代码，任意引用开源库。想要什么功能，npm install 就能搞定。"
+  },
+  "STUDIO.solutions.functions.highlight": {
+    "message": "不学新概念，不设天花板。像写代码一样创建工作流。"
+  },
+  "STUDIO.solutions.vscode.title": {
+    "message": "基于 VSCode，继承编程习惯"
+  },
+  "STUDIO.solutions.vscode.description": {
+    "message": "OOMOL Studio 基于 VSCode 开发，你可以在熟悉的编辑器中编写节点代码。代码补全、调试工具、Git 集成、各种插件...所有你习惯的开发体验都在这里。"
+  },
+  "STUDIO.solutions.vscode.highlight": {
+    "message": "熟悉的编辑器，熟悉的快捷键，零适应成本。"
+  },
+  "STUDIO.solutions.container.title": {
+    "message": "内置容器，环境一致好部署"
+  },
+  "STUDIO.solutions.container.description": {
+    "message": "软件内置容器环境，本地开发和服务器环境完全一致。写完代码直接运行，不用担心「我这能跑，服务器怎么就不行」。通过网络反代，让你的设备秒变私人服务器，零成本启动任务。"
+  },
+  "STUDIO.solutions.container.highlight": {
+    "message": "本地即生产，部署不踩坑。闲置设备也能当服务器用。"
+  },
+  "STUDIO.hero.description.old": {
     "message": "可视化工作流 + VSCode 全代码，快速构建并分享 AI 工具"
   },
   "STUDIO.hero.stat1": {
@@ -2050,7 +2113,31 @@
     "description": "The text for authors with 0 blog post"
   },
   "HEADLESS.hero.description": {
-    "message": "Docker 容器化部署，轻松在服务器和 NAS 上运行 OOMOL 应用"
+    "message": "OOMOL Headless 本质上是将 OOMOL Studio 的运行环境以容器镜像的方式交付给开发者。自由部署，拒绝捆绑。"
+  },
+  "HEADLESS.philosophy.title": {
+    "message": "我们的承诺：自由与开放"
+  },
+  "HEADLESS.philosophy.subtitle": {
+    "message": "我们深知开发者对商业化捆绑的担忧。OOMOL 尊重你的意志，让技术回归纯粹。"
+  },
+  "HEADLESS.philosophy.freedom.title": {
+    "message": "部署自由"
+  },
+  "HEADLESS.philosophy.freedom.desc": {
+    "message": "你的代码，你的设备。无论是个人 NAS、私有服务器还是公有云，只要你愿意，想跑哪里就跑哪里。"
+  },
+  "HEADLESS.philosophy.opensource.title": {
+    "message": "内核开源"
+  },
+  "HEADLESS.philosophy.opensource.desc": {
+    "message": "我们将 OOMOL Runtime 核心代码开源。Code is Law，这是我们对“拒绝过度商业化”最直接的回答。"
+  },
+  "HEADLESS.philosophy.community.title": {
+    "message": "安心共建"
+  },
+  "HEADLESS.philosophy.community.desc": {
+    "message": "没有隐藏条款，没有强制升级。我们致力于构建一个让大家安心使用、开心共建的开发者生态。"
   },
   "HEADLESS.hero.stat1": {
     "message": "容器化部署"
@@ -2067,6 +2154,12 @@
   "HEADLESS.hero.cta.docs": {
     "message": "查看文档"
   },
+  "HEADLESS.deployment.title": {
+    "message": "Docker 部署"
+  },
+  "HEADLESS.deployment.viewDocs": {
+    "message": "查看完整文档 →"
+  },
   "HEADLESS.useCases.title": {
     "message": "适用场景"
   },
@@ -2253,106 +2346,248 @@
   "HOME.ProductComparison.cloud.tech": {
     "message": "按需扩缩容、零运维心智负担、极速发布到生产环境"
   },
+  "CLOUD.hero.title": {
+    "message": "OOMOL Cloud"
+  },
   "CLOUD.hero.description": {
-    "message": "免运维的托管式运行环境，提供 RESTful API 和 MCP 协议端点，支持自动扩缩容"
+    "message": "你只管写函数 Block，剩下的交给 OOMOL。从繁琐的运维中解放出来，让创意即刻落地。"
   },
   "CLOUD.hero.stat1": {
-    "message": "弹性伸缩"
+    "message": "无痛生成"
   },
   "CLOUD.hero.stat2": {
-    "message": "API 服务"
+    "message": "按量计费"
   },
   "CLOUD.hero.stat3": {
-    "message": "AI 集成"
+    "message": "省钱省力"
   },
   "CLOUD.hero.cta.start": {
-    "message": "开始使用"
+    "message": "开始构建"
   },
   "CLOUD.hero.cta.docs": {
-    "message": "查看文档"
+    "message": "了解更多"
   },
-  "CLOUD.useCases.title": {
-    "message": "适用场景"
+  "CLOUD.painPoints.title": {
+    "message": "交付代码不该是折磨"
   },
-  "CLOUD.useCases.subtitle": {
-    "message": "无需关心服务器和运维，专注于业务逻辑开发"
+  "CLOUD.painPoints.subtitle": {
+    "message": "作为开发者，我们深知你的苦恼"
   },
-  "CLOUD.useCase.quickDeploy.title": {
-    "message": "快速上线服务"
+  "CLOUD.painPoints.description": {
+    "message": "写代码本身是充满创造愉悦的，但将代码交付给用户往往枯燥乏味。购买服务器、准备环境、部署代码、可用性设计、UI 设计... 很多天才的设计都因为这些“拦路虎”，要么趴在电脑里孤芳自赏，要么做了一半无奈放弃，甚至因为产品没卖出去就背负了高昂的服务器费用。"
   },
-  "CLOUD.useCase.quickDeploy.description": {
-    "message": "中小团队无需配置服务器，一键部署工作流为云端 API 服务"
+  "CLOUD.solution.title": {
+    "message": "专注代码，享受编程"
   },
-  "CLOUD.useCase.aiAgent.title": {
-    "message": "AI Agent 集成"
+  "CLOUD.solution.subtitle": {
+    "message": "你只管写函数 Block，剩下的交给 OOMOL"
   },
-  "CLOUD.useCase.aiAgent.description": {
-    "message": "通过 MCP 协议对接 Claude、ChatGPT 等 AI 平台，提供专属工具"
+  "CLOUD.modes.library.title": {
+    "message": "发布为函数库"
   },
-  "CLOUD.useCase.miniapp.title": {
-    "message": "小程序后端"
+  "CLOUD.modes.library.description": {
+    "message": "将 Block 分享给他人使用，或者通过工作流组合成新的功能。让你的代码成为社区创新的基石。"
   },
-  "CLOUD.useCase.miniapp.description": {
-    "message": "为小程序、移动应用提供 RESTful API，自动生成文档和测试界面"
+  "CLOUD.modes.serverless.title": {
+    "message": "部署为云函数"
   },
-  "CLOUD.useCase.noOps.title": {
-    "message": "免运维管理"
+  "CLOUD.modes.serverless.description": {
+    "message": "一键部署为 Serverless API 服务。无需运维，自动扩缩容，为他人提供稳定的 API 服务。"
   },
-  "CLOUD.useCase.noOps.description": {
-    "message": "自动监控、日志记录、安全隔离，无需管理基础设施"
+  "CLOUD.modes.mcp.title": {
+    "message": "提供给 AI 调用"
   },
-  "CLOUD.features.title": {
-    "message": "核心功能"
+  "CLOUD.modes.mcp.description": {
+    "message": "以 MCP (Model Context Protocol) 方式发布，让 AI Agent 直接调用你的函数，连接智能世界。"
   },
-  "CLOUD.features.oneDeploy.title": {
-    "message": "一键部署"
+  "CLOUD.pricing.title": {
+    "message": "按调用收费，不用预支"
   },
-  "CLOUD.features.oneDeploy.description": {
-    "message": "从 Studio 直接推送到 Cloud，自动配置域名和 HTTPS"
+  "CLOUD.pricing.description": {
+    "message": "没有昂贵的服务器租用费，没有复杂的预付费套餐。我们按调用次数收取费用，真正做到省钱省力，让你专注于享受编程的乐趣。"
   },
-  "CLOUD.features.oneDeploy.feature1": {
-    "message": "Git Push 式部署体验"
+  "CLOUD.pricing.cta": {
+    "message": "查看详细价格"
   },
-  "CLOUD.features.oneDeploy.feature2": {
-    "message": "自动 HTTPS 证书配置"
+  "CLOUD.opensource.title": {
+    "message": "开源基础设施"
   },
-  "CLOUD.features.oneDeploy.feature3": {
-    "message": "零停机更新部署"
+  "CLOUD.opensource.subtitle": {
+    "message": "OOMOL 的底层运行时内核全部开源,让你完全掌控部署环境"
   },
-  "CLOUD.features.monitor.title": {
-    "message": "自动监控"
+  "CLOUD.opensource.description": {
+    "message": "我们坚信开源的力量。OOMOL 的虚拟机和运行时核心代码完全开源,你可以自由查看、修改和部署。无论是个人 NAS、私有服务器还是公有云,你都拥有完全的部署自由。"
   },
-  "CLOUD.features.monitor.description": {
-    "message": "实时性能监控、日志查看、错误追踪"
+  "CLOUD.opensource.projects.title": {
+    "message": "开源项目"
   },
-  "CLOUD.features.monitor.feature1": {
-    "message": "实时性能指标展示"
+  "CLOUD.opensource.ovm.title": {
+    "message": "OVM"
   },
-  "CLOUD.features.monitor.feature2": {
-    "message": "集中式日志查询"
+  "CLOUD.opensource.ovm.description": {
+    "message": "跨平台虚拟机管理器,为 OOMOL 提供统一的容器运行环境"
   },
-  "CLOUD.features.monitor.feature3": {
-    "message": "异常告警通知"
+  "CLOUD.opensource.ovm-core.title": {
+    "message": "OVM Core"
   },
-  "CLOUD.features.security.title": {
-    "message": "安全隔离"
+  "CLOUD.opensource.ovm-core.description": {
+    "message": "OVM 的核心运行时库,处理容器生命周期和资源管理"
   },
-  "CLOUD.features.security.description": {
-    "message": "容器级隔离、访问控制、数据加密"
+  "CLOUD.opensource.ovm-win.title": {
+    "message": "OVM Windows"
   },
-  "CLOUD.features.security.feature1": {
-    "message": "沙箱环境隔离"
+  "CLOUD.opensource.ovm-win.description": {
+    "message": "Windows 平台的 OVM 实现,支持 WSL2 和 Hyper-V"
   },
-  "CLOUD.features.security.feature2": {
-    "message": "API 密钥管理"
+  "CLOUD.opensource.ovm-mac.title": {
+    "message": "OVM macOS"
   },
-  "CLOUD.features.security.feature3": {
-    "message": "传输数据加密"
+  "CLOUD.opensource.ovm-mac.description": {
+    "message": "macOS 平台的 OVM 实现,基于 Apple Virtualization Framework"
   },
   "STUDIO.hero.description": {
     "message": "面向开发者的本地开发环境，基于 VSCode 的可视化编程工具，结合 FRP 协议实现 P2P 算力共享"
   },
   "HEADLESS.hero.description": {
-    "message": "容器化部署方案，将工作流打包为独立 Docker 镜像，适配云服务器、私有云和 K8s 集群"
+    "message": "用于本地部署（通常是在 NAS 里）的单机版无头 studio，没有 Electron，没有服务端调度。"
+  },
+  "APP.new.hero.title": { "message": "OOMOL App" },
+  "APP.new.hero.subtitle": { "message": "交付 AI 产品的最后一公里" },
+  "APP.new.hero.description": {
+    "message": "无需编写 UI，将你的 Block 函数直接转化为 AI Chat 技能与 Applet 小程序，瞬间交付给用户。"
+  },
+  "APP.new.concept.title": { "message": "代码即产品" },
+  "APP.new.concept.description": {
+    "message": "OOMOL 负责将你的后端逻辑 (Block) 自动封装为前端产品。你专注于编写函数，我们负责连接用户。"
+  },
+  "APP.new.chat.pill": { "message": "对话 · 工作流助手" },
+  "APP.new.chat.title": { "message": "OOMOL Chat" },
+  "APP.new.chat.subtitle": { "message": "AI 助手 · 探索性交互" },
+  "APP.new.chat.description": {
+    "message": "当用户需求模糊时，AI 智能调度你的工具来解决问题。"
+  },
+  "APP.new.chat.meta1.label": { "message": "适合谁" },
+  "APP.new.chat.meta1.value": {
+    "message": "需要把想法快速变成自动化工作流的人"
+  },
+  "APP.new.chat.meta2.label": { "message": "核心体验" },
+  "APP.new.chat.meta2.value": {
+    "message": "像和同事讨论一样，一步步对话搭建流程"
+  },
+  "APP.new.chat.devValue": { "message": "工具即技能：你的函数就是 AI 的手脚" },
+  "APP.new.applet.pill": { "message": "小程序 · 可编排应用" },
+  "APP.new.applet.title": { "message": "OOMOL Applet" },
+  "APP.new.applet.subtitle": { "message": "表单小程序 · 确定性交互" },
+  "APP.new.applet.description": {
+    "message": "当用户需求明确时，直接填参调用，高效精准。"
+  },
+  "APP.new.applet.meta1.label": { "message": "适合谁" },
+  "APP.new.applet.meta1.value": {
+    "message": "需要发布、复用、分享自动化能力的团队"
+  },
+  "APP.new.applet.meta2.label": { "message": "核心体验" },
+  "APP.new.applet.meta2.value": {
+    "message": "像搭乐高一样，把能力组件编排成产品"
+  },
+  "APP.new.applet.devValue": {
+    "message": "函数即应用：自动生成表单 UI，零前端代码"
+  },
+  "APP.new.hero.cta.web": {
+    "message": "在网页中使用"
+  },
+  "APP.new.hero.cta.studio": {
+    "message": "在 OOMOL Studio 中使用"
+  },
+  "APP.new.cta.download": { "message": "下载体验" },
+  "APP.new.cta.docs": { "message": "查看文档" },
+  "STUDIO.page.title": {
+    "message": "OOMOL Studio - 设计哲学"
+  },
+  "STUDIO.page.description": {
+    "message": "OOMOL Studio。为什么我们要这样构建 OOMOL Studio。"
+  },
+  "STUDIO.manifesto.title": {
+    "message": "OOMOL Studio"
+  },
+  "STUDIO.manifesto.subtitle": {
+    "message": "我们构建 OOMOL Studio，是因为厌倦了在「易于使用」和「足够强大」之间做选择。"
+  },
+  "STUDIO.manifesto.cta.download": {
+    "message": "下载 OOMOL Studio"
+  },
+  "STUDIO.story.paragraph1": {
+    "message": "作为工程师，我们热爱自动化。我们喜欢将工具链接在一起构建流水线、智能体和数据流。但每当我们尝试使用现有的「工作流平台」时，总会遇到障碍。"
+  },
+  "STUDIO.story.frustration.line1": {
+    "message": "「为什么我必须学习专有的 JSON 语法才能写一个 if/else 语句？」"
+  },
+  "STUDIO.story.frustration.line2": {
+    "message": "「为什么我不能直接导入一个库？为什么我必须等待平台支持它？」"
+  },
+  "STUDIO.story.frustration.line3": {
+    "message": "「为什么我要在一个没有自动补全的文本框里写代码？」"
+  },
+  "STUDIO.story.paragraph2": {
+    "message": "我们意识到，对于专业开发者来说，低代码往往意味着高度挫折。它抽象掉了我们真正喜欢的东西：控制、调试和生态系统。"
+  },
+  "STUDIO.story.paragraph3": {
+    "message": "所以我们决定构建一些不同的东西。不是一个「无代码」玩具，而是一个真正的 IDE。"
+  },
+  "STUDIO.principles.header": {
+    "message": "我们的设计理念"
+  },
+  "STUDIO.principle1.title": {
+    "message": "1. 代码是高效逻辑组织工具"
+  },
+  "STUDIO.principle1.paragraph1": {
+    "message": "我们没有发明新的可视化语言。我们只是将标准代码可视化。"
+  },
+  "STUDIO.principle1.paragraph2": {
+    "message": "在 OOMOL 中，节点就是函数。输入是参数，输出是返回值。"
+  },
+  "STUDIO.principle1.paragraph3": {
+    "message": "你不需要「配置」节点；你只需编写函数。UI 只是代码签名的反映。"
+  },
+  "STUDIO.principle1.codeComment1": {
+    "message": "# Perform addition of x and y"
+  },
+  "STUDIO.principle1.codeComment2": {
+    "message": "// ...自动变成一个节点："
+  },
+  "STUDIO.principle1.codeComment3": {
+    "message": "// 输入端口: \"text\""
+  },
+  "STUDIO.principle1.codeComment4": {
+    "message": "// 输出端口: \"result\""
+  },
+  "STUDIO.principle2.title": {
+    "message": "2. 尊重编程生态工具链"
+  },
+  "STUDIO.principle2.paragraph1": {
+    "message": "我们认为，你不应该为了使用可视化工具而降级你的开发环境。"
+  },
+  "STUDIO.principle2.paragraph2": {
+    "message": "这就是为什么我们在每个节点中嵌入了完整的 Monaco 编辑器 (VS Code)。"
+  },
+  "STUDIO.principle2.paragraph3": {
+    "message": "智能感知、类型检查、代码检查、格式化，甚至完整的调试协议 (DAP) 支持。感觉像家一样，因为它就是家。"
+  },
+  "STUDIO.principle3.title": {
+    "message": "3. 支持容器化部署,没有人为限制"
+  },
+  "STUDIO.principle3.paragraph1": {
+    "message": "传统平台在受限的专有沙箱中运行你的代码。如果你需要原生 Node.js 模块或系统级工具,你就会被困住。"
+  },
+  "STUDIO.principle3.paragraph2": {
+    "message": "OOMOL 运行在标准 Docker 容器上。"
+  },
+  "STUDIO.principle3.paragraph3": {
+    "message": "需要 ffmpeg？apt-get install 安装它。需要特定的系统依赖？直接安装就行。"
+  },
+  "STUDIO.principle3.codeComment": {
+    "message": "# 没有封装。只有标准工具。"
+  },
+  "STUDIO.principle3.codeComment2": {
+    "message": "# 就是这么简单。"
   }
 }
diff --git a/i18n/zh-CN/docusaurus-plugin-content-blog-updates/1.4.14/index.mdx b/i18n/zh-CN/docusaurus-plugin-content-blog-updates/1.4.14/index.mdx
new file mode 100644
index 00000000..817785ca
--- /dev/null
+++ b/i18n/zh-CN/docusaurus-plugin-content-blog-updates/1.4.14/index.mdx
@@ -0,0 +1,73 @@
+---
+slug: OOMOL_Studio_1.4.14
+title: OOMOL Studio 1.4.14
+date: 2025-12-06
+---
+
+import useBaseUrl from "@docusaurus/useBaseUrl";
+
+# OOMOL Studio
+
+## 通用
+
+### 1. 优化社区功能体验
+
+社区功能由原来的 iframe 改为现在的原生组件实现,使用起来更加流畅顺滑,大幅提升了浏览和交互体验。
+
+<img
+  src={useBaseUrl("/img/release/1.4.14/community.png")}
+  alt="优化社区功能体验"
+/>
+
+### 2. 全新"互联"功能
+
+通过软件内置的容器和网络反代技术,为你的设备分配一个域名,让你可以像使用服务器一样使用你的设备。比如你家里有一台带有 4090 显卡的电脑空着,安装了 OOMOL Studio 就可以作为私有云服务器使用,充分利用闲置设备资源,无需额外购买服务器。
+
+<img
+  src={useBaseUrl("/img/release/1.4.14/connect.png")}
+  alt="互联功能"
+/>
+
+### 3. 智能"聊天"功能
+
+用户可以将自己创建的 Block 作为 AI 的 Tool Call 使用。通过大模型调用,降低使用门槛,实现 Block 的组合使用,让工作流更加智能化。
+
+<img
+  src={useBaseUrl("/img/release/1.4.14/chat.png")}
+  alt="聊天功能"
+/>
+
+### 4. 便捷"小应用"功能
+
+用户可以将 Block 作为表单一样使用——填写参数、执行、等待结果。这个功能方便用户在明确知道自己需求时快速使用 Block。与聊天功能不同,小应用更适合目标明确的场景。
+
+小应用还支持设置自动化任务,用户可以定时执行,实现工作流的自动化运行。
+
+<img
+  src={useBaseUrl("/img/release/1.4.14/applet.png")}
+  alt="小应用功能"
+/>
+
+## 编程功能
+
+### 1. 支持 Claude Code
+
+集成了 Claude Code 功能,为开发者提供更强大的编程辅助能力。
+
+### 2. AI 智能化功能
+
+新增多项 AI 辅助功能,包括:
+- AI 自动完善翻译信息
+- AI 辅助完善发布信息
+- AI 报错解读,快速定位问题
+- AI 搜索在线组件,提高开发效率
+
+### 3. 优化发包体验
+
+改进了 Block 发布流程,使开发者的发包体验更加流畅便捷。
+
+## 其他
+
+### 感谢
+
+感谢所有为本版本提供建议和反馈的用户,你们的支持是我们不断前进的动力!
diff --git a/i18n/zh-CN/docusaurus-theme-classic/navbar.json b/i18n/zh-CN/docusaurus-theme-classic/navbar.json
index 4cae758c..3818d363 100644
--- a/i18n/zh-CN/docusaurus-theme-classic/navbar.json
+++ b/i18n/zh-CN/docusaurus-theme-classic/navbar.json
@@ -51,9 +51,9 @@
     "message": "OOMOL Hub",
     "description": "Navbar item with label navbar.oomol-hub"
   },
-  "item.label.navbar.oomol-chat": {
-    "message": "OOMOL Chat",
-    "description": "Navbar item with label navbar.oomol-chat"
+  "item.label.navbar.oomol-app": {
+    "message": "OOMOL App",
+    "description": "Navbar item with label navbar.oomol-app"
   },
   "item.label.navbar.oomol-cloud": {
     "message": "OOMOL Cloud",
@@ -67,6 +67,10 @@
     "message": "产品",
     "description": "Navbar item with label Product"
   },
+  "item.label.navbar.download": {
+    "message": "下载",
+    "description": "Navbar item with label navbar.download"
+  },
   "title": {
     "message": "OOMOL",
     "description": "The title in the navbar"
diff --git a/src/components/CookieConsent/CookieConsentComponent.tsx b/src/components/CookieConsent/CookieConsentComponent.tsx
index 1628be25..3bc3194c 100644
--- a/src/components/CookieConsent/CookieConsentComponent.tsx
+++ b/src/components/CookieConsent/CookieConsentComponent.tsx
@@ -1,11 +1,12 @@
-import { useEffect, useRef } from "react";
+import type { DocusaurusContext } from "@docusaurus/types";
+
+import { useLocation } from "@docusaurus/router";
+import { useColorMode } from "@docusaurus/theme-common";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import { useEffect } from "react";
 import * as CookieConsent from "vanilla-cookieconsent";
 
 import { pluginConfig } from "./cookieConsentConfig";
-import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import { DocusaurusContext } from "@docusaurus/types";
-import { useColorMode } from "@docusaurus/theme-common";
-import { useLocation } from "@docusaurus/router";
 
 export const CookieConsentComponent = () => {
   const location = useLocation();
diff --git a/src/components/DownloadButton/styles.module.scss b/src/components/DownloadButton/styles.module.scss
index fa3f25fe..10eb9844 100644
--- a/src/components/DownloadButton/styles.module.scss
+++ b/src/components/DownloadButton/styles.module.scss
@@ -56,7 +56,7 @@
   flex-direction: column;
   gap: 12px;
   background-color: var(--oomol-bg-elevated);
-  border-radius: 10px;
+  border-radius: 4px;
   padding: 12px 16px;
   color: var(--oomol-text-secondary);
   box-shadow: var(--oomol-shadow-md);
diff --git a/src/components/HomepagePdfCraftShowcase/styles.module.scss b/src/components/HomepagePdfCraftShowcase/styles.module.scss
index e16f3503..907c874c 100644
--- a/src/components/HomepagePdfCraftShowcase/styles.module.scss
+++ b/src/components/HomepagePdfCraftShowcase/styles.module.scss
@@ -333,13 +333,38 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 12px 28px;
-  border-radius: 40px;
-  font-size: 15px;
+  gap: 6px;
+  padding: 8px 20px;
+  border-radius: 4px;
+  font-size: 14px;
   font-weight: 500;
   text-decoration: none;
   transition: all 0.2s ease;
   white-space: nowrap;
+  cursor: pointer;
+  margin: 0 !important;
+
+  // Small size
+  &.small {
+    padding: 4px 12px;
+    font-size: 12px;
+    gap: 4px;
+  }
+
+  // Medium size (default)
+  &.medium {
+    padding: 8px 20px;
+    font-size: 14px;
+    gap: 6px;
+  }
+
+  // Large size
+  &.large {
+    padding: 12px 32px;
+    font-size: 16px;
+    gap: 8px;
+    font-weight: 600;
+  }
 
   @media (max-width: 768px) {
     width: 100%;
@@ -349,26 +374,31 @@
 
 .primaryButton {
   background: var(--oomol-primary);
-  color: white;
-  border: 2px solid var(--oomol-primary);
+  color: var(--oomol-text-inverse);
+  border: none;
+
+  [data-theme="dark"] & {
+    color: var(--oomol-white);
+  }
 
   &:hover {
     background: var(--oomol-primary-hover);
-    border-color: var(--oomol-primary-hover);
-    color: white;
-    transform: translateY(-2px);
-    box-shadow: var(--oomol-shadow-lg);
+    color: var(--oomol-text-inverse) !important;
+
+    [data-theme="dark"] & {
+      color: var(--oomol-white) !important;
+    }
   }
 }
 
 .secondaryButton {
-  background: transparent;
+  background: inherit;
   color: var(--oomol-text-primary);
-  border: 2px solid var(--oomol-border-default);
+  border: 1px solid var(--oomol-border-default);
 
   &:hover {
+    color: var(--oomol-primary) !important;
     border-color: var(--oomol-primary);
-    color: var(--oomol-primary);
-    background: rgba(var(--oomol-primary-rgb), 0.05);
+    background: var(--oomol-primary-bg);
   }
 }
diff --git a/src/components/HomepageProductComparison/index.tsx b/src/components/HomepageProductComparison/index.tsx
index a7e93818..1a81d535 100644
--- a/src/components/HomepageProductComparison/index.tsx
+++ b/src/components/HomepageProductComparison/index.tsx
@@ -1,5 +1,6 @@
 import styles from "./styles.module.scss";
 
+import Link from "@docusaurus/Link";
 import { translate } from "@docusaurus/Translate";
 
 // 产品对比数据 - 重构为卡片式数据结构
@@ -14,6 +15,7 @@ const products = [
     tech: translate({ message: "HOME.ProductComparison.studio.tech" }),
     icon: "🖥️",
     color: "primary",
+    link: "/studio",
   },
   {
     name: translate({ message: "HOME.ProductComparison.product.headless" }),
@@ -27,6 +29,7 @@ const products = [
     tech: translate({ message: "HOME.ProductComparison.headless.tech" }),
     icon: "🐳",
     color: "secondary",
+    link: "/headless",
   },
   {
     name: translate({ message: "HOME.ProductComparison.product.cloud" }),
@@ -38,6 +41,7 @@ const products = [
     tech: translate({ message: "HOME.ProductComparison.cloud.tech" }),
     icon: "☁️",
     color: "tertiary",
+    link: "/cloud",
   },
 ];
 
@@ -58,8 +62,9 @@ export default function HomepageProductComparison() {
         {/* 产品卡片网格 */}
         <div className={styles.productsGrid}>
           {products.map((product, index) => (
-            <div
+            <Link
               key={index}
+              to={product.link}
               className={`${styles.productCard} ${styles[product.color]}`}
             >
               {/* 卡片头部 */}
@@ -98,7 +103,7 @@ export default function HomepageProductComparison() {
                   <div className={styles.infoContent}>{product.tech}</div>
                 </div>
               </div>
-            </div>
+            </Link>
           ))}
         </div>
       </div>
diff --git a/src/components/HomepageProductComparison/styles.module.scss b/src/components/HomepageProductComparison/styles.module.scss
index af69f96c..520aad21 100644
--- a/src/components/HomepageProductComparison/styles.module.scss
+++ b/src/components/HomepageProductComparison/styles.module.scss
@@ -66,10 +66,14 @@
   display: flex;
   flex-direction: column;
   height: 100%;
+  text-decoration: none;
+  color: inherit;
 
   &:hover {
     transform: translateY(-8px);
     box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
+    text-decoration: none;
+    color: inherit;
   }
 
   // 不同产品的主题色
diff --git a/src/css/custom.scss b/src/css/custom.scss
index aea109b2..93b57401 100644
--- a/src/css/custom.scss
+++ b/src/css/custom.scss
@@ -317,8 +317,8 @@ $desktop-width: $breakpoint-xl;
   background-image: url("/img/products/hub.svg");
 }
 
-.navbar-item-chat::before {
-  background-image: url("/img/products/chat.svg");
+.navbar-item-app::before {
+  background-image: url("/img/products/app.svg");
 }
 
 // 文档页面 sidebar 样式
diff --git a/src/css/design-tokens.scss b/src/css/design-tokens.scss
index 4864fe16..4d6a79b4 100644
--- a/src/css/design-tokens.scss
+++ b/src/css/design-tokens.scss
@@ -89,11 +89,11 @@
   --oomol-hub-bg: rgba(16, 185, 129, 0.1);
   --oomol-hub-border: rgba(16, 185, 129, 0.3);
 
-  /* Chat - 橙色 */
-  --oomol-chat: #f59e0b;
-  --oomol-chat-dark: #d97706;
-  --oomol-chat-bg: rgba(245, 158, 11, 0.1);
-  --oomol-chat-border: rgba(245, 158, 11, 0.3);
+  /* App - 橙色 */
+  --oomol-app: #f59e0b;
+  --oomol-app-dark: #d97706;
+  --oomol-app-bg: rgba(245, 158, 11, 0.1);
+  --oomol-app-border: rgba(245, 158, 11, 0.3);
 
   /* Headless - 蓝绿色 */
   --oomol-headless: #06b6d4;
@@ -282,11 +282,11 @@
   --oomol-hub-bg: rgba(16, 185, 129, 0.15);
   --oomol-hub-border: rgba(16, 185, 129, 0.4);
 
-  /* Chat - 橙色 */
-  --oomol-chat: #f59e0b;
-  --oomol-chat-dark: #d97706;
-  --oomol-chat-bg: rgba(245, 158, 11, 0.15);
-  --oomol-chat-border: rgba(245, 158, 11, 0.4);
+  /* App - 橙色 */
+  --oomol-app: #f59e0b;
+  --oomol-app-dark: #d97706;
+  --oomol-app-bg: rgba(245, 158, 11, 0.15);
+  --oomol-app-border: rgba(245, 158, 11, 0.4);
 
   /* Headless - 蓝绿色 */
   --oomol-headless: #06b6d4;
diff --git a/src/pages/app/index.tsx b/src/pages/app/index.tsx
new file mode 100644
index 00000000..c13eff68
--- /dev/null
+++ b/src/pages/app/index.tsx
@@ -0,0 +1,240 @@
+import styles from "./styles.module.scss";
+
+import { translate } from "@docusaurus/Translate";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import { GetStartedPrompt } from "@site/src/components/GetStartedPrompt";
+import ThemedImage from "@theme/ThemedImage";
+
+import Layout from "../../theme/Layout";
+
+export default function AppPage() {
+  return (
+    <Layout>
+      <div className={styles.container}>
+        {/* Hero Section */}
+        <section className={styles.hero}>
+          <h1 className={styles.heroTitle}>
+            {translate({ id: "APP.new.hero.title", message: "OOMOL App" })}
+          </h1>
+          <p className={styles.heroSubtitle}>
+            {translate({
+              id: "APP.new.hero.subtitle",
+              message: "交付 AI 产品的最后一公里",
+            })}
+          </p>
+          <p className={styles.heroDescription}>
+            {translate({
+              id: "APP.new.hero.description",
+              message:
+                "无需编写 UI，将你的 Block 函数直接转化为 AI Chat 技能与 Applet 小程序，瞬间交付给用户。",
+            })}
+          </p>
+          <div className={styles.heroCTA}>
+            <a
+              href="https://app.oomol.com"
+              className={`${styles.primaryButton} ${styles.large}`}
+            >
+              {translate({
+                id: "APP.new.hero.cta.web",
+                message: "在网页中使用",
+              })}
+            </a>
+            <a
+              href={useBaseUrl("/downloads")}
+              className={`${styles.secondaryButton} ${styles.large}`}
+            >
+              {translate({
+                id: "APP.new.hero.cta.studio",
+                message: "在 OOMOL Studio 中使用",
+              })}
+            </a>
+          </div>
+        </section>
+
+        {/* Product Section */}
+        <section className={styles.productSection}>
+          <div className={styles.sectionHeader}>
+            <h2 className={styles.sectionTitle}>
+              {translate({
+                id: "APP.new.concept.title",
+                message: "代码即产品",
+              })}
+            </h2>
+            <p className={styles.sectionSubtitle}>
+              {translate({
+                id: "APP.new.concept.description",
+                message:
+                  "OOMOL 负责将你的后端逻辑 (Block) 自动封装为前端产品。你专注于编写函数，我们负责连接用户。",
+              })}
+            </p>
+          </div>
+
+          <div className={styles.productContainer}>
+            {/* OOMOL Chat */}
+            <div className={styles.productItem}>
+              <div className={styles.productText}>
+                <div className={styles.productLabelRow}>
+                  <span className={styles.productPill}>
+                    {translate({
+                      id: "APP.new.chat.pill",
+                      message: "Chat · Workflow Copilot",
+                    })}
+                  </span>
+                  <span className={styles.productTag}>
+                    {translate({
+                      id: "APP.new.chat.subtitle",
+                      message: "AI 助手 · 探索性交互",
+                    })}
+                  </span>
+                </div>
+                <h3 className={styles.productTitle}>
+                  {translate({
+                    id: "APP.new.chat.title",
+                    message: "OOMOL Chat",
+                  })}
+                </h3>
+                <p className={styles.productDesc}>
+                  {translate({
+                    id: "APP.new.chat.description",
+                    message:
+                      "当用户需求模糊时，AI 智能调度你的工具来解决问题。",
+                  })}
+                </p>
+                <div className={styles.productMetaGrid}>
+                  <div className={styles.productMetaItem}>
+                    <div className={styles.productMetaLabel}>
+                      {translate({
+                        id: "APP.new.chat.meta1.label",
+                        message: "适合谁",
+                      })}
+                    </div>
+                    <div className={styles.productMetaValue}>
+                      {translate({
+                        id: "APP.new.chat.meta1.value",
+                        message: "需要把想法快速变成自动化工作流的人",
+                      })}
+                    </div>
+                  </div>
+                  <div className={styles.productMetaItem}>
+                    <div className={styles.productMetaLabel}>
+                      {translate({
+                        id: "APP.new.chat.meta2.label",
+                        message: "核心体验",
+                      })}
+                    </div>
+                    <div className={styles.productMetaValue}>
+                      {translate({
+                        id: "APP.new.chat.meta2.value",
+                        message: "像和同事讨论一样，一步步对话搭建流程",
+                      })}
+                    </div>
+                  </div>
+                </div>
+                <p className={styles.devValue}>
+                  {translate({
+                    id: "APP.new.chat.devValue",
+                    message: "Tools as Skills：你的函数就是 AI 的手脚",
+                  })}
+                </p>
+              </div>
+              <div className={styles.productVisual}>
+                <div className={styles.productImageWrapper}>
+                  <ThemedImage
+                    sources={{
+                      light: useBaseUrl("/img/pages/app/chat-light.png"),
+                      dark: useBaseUrl("/img/pages/app/chat-dark.png"),
+                    }}
+                    alt="OOMOL Chat"
+                    className={styles.productImage}
+                  />
+                </div>
+              </div>
+            </div>
+
+            {/* OOMOL Applet */}
+            <div className={styles.productItem}>
+              <div className={styles.productText}>
+                <div className={styles.productLabelRow}>
+                  <span className={styles.productPill}>
+                    {translate({
+                      id: "APP.new.applet.pill",
+                      message: "Applet · 可编排应用",
+                    })}
+                  </span>
+                  <span className={styles.productTag}>
+                    {translate({
+                      id: "APP.new.applet.subtitle",
+                      message: "表单小程序 · 确定性交互",
+                    })}
+                  </span>
+                </div>
+                <h3 className={styles.productTitle}>
+                  {translate({
+                    id: "APP.new.applet.title",
+                    message: "OOMOL Applet",
+                  })}
+                </h3>
+                <p className={styles.productDesc}>
+                  {translate({
+                    id: "APP.new.applet.description",
+                    message: "当用户需求明确时，直接填参调用，高效精准。",
+                  })}
+                </p>
+                <div className={styles.productMetaGrid}>
+                  <div className={styles.productMetaItem}>
+                    <div className={styles.productMetaLabel}>
+                      {translate({
+                        id: "APP.new.applet.meta1.label",
+                        message: "适合谁",
+                      })}
+                    </div>
+                    <div className={styles.productMetaValue}>
+                      {translate({
+                        id: "APP.new.applet.meta1.value",
+                        message: "需要发布、复用、分享自动化能力的团队",
+                      })}
+                    </div>
+                  </div>
+                  <div className={styles.productMetaItem}>
+                    <div className={styles.productMetaLabel}>
+                      {translate({
+                        id: "APP.new.applet.meta2.label",
+                        message: "核心体验",
+                      })}
+                    </div>
+                    <div className={styles.productMetaValue}>
+                      {translate({
+                        id: "APP.new.applet.meta2.value",
+                        message: "像搭乐高一样，把能力组件编排成产品",
+                      })}
+                    </div>
+                  </div>
+                </div>
+                <p className={styles.devValue}>
+                  {translate({
+                    id: "APP.new.applet.devValue",
+                    message: "Function as App：自动生成表单 UI，零前端代码",
+                  })}
+                </p>
+              </div>
+              <div className={styles.productVisual}>
+                <div className={styles.productImageWrapper}>
+                  <ThemedImage
+                    sources={{
+                      light: useBaseUrl("/img/pages/app/applet-light.png"),
+                      dark: useBaseUrl("/img/pages/app/applet-dark.png"),
+                    }}
+                    alt="OOMOL Applet"
+                    className={styles.productImage}
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <GetStartedPrompt />
+      </div>
+    </Layout>
+  );
+}
diff --git a/src/pages/chat/styles.module.scss b/src/pages/app/styles.module.scss
similarity index 61%
rename from src/pages/chat/styles.module.scss
rename to src/pages/app/styles.module.scss
index 87782693..ec932833 100644
--- a/src/pages/chat/styles.module.scss
+++ b/src/pages/app/styles.module.scss
@@ -4,10 +4,9 @@
 // Container
 // ============================================
 .container {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 0;
+  width: 100%;
   background: var(--ifm-background-color);
+  color: var(--ifm-font-color-base);
 }
 
 // ============================================
@@ -26,7 +25,14 @@
   margin-bottom: 1.5rem;
   letter-spacing: -0.03em;
   line-height: 1.1;
-  color: var(--oomol-primary);
+  color: var(--ifm-heading-color);
+}
+
+.heroSubtitle {
+  font-size: 1.5rem;
+  font-weight: 400;
+  margin-bottom: 1.5rem;
+  color: var(--ifm-color-emphasis-700);
 }
 
 .heroDescription {
@@ -71,42 +77,89 @@
 .heroCTA {
   display: flex;
   justify-content: center;
-  gap: 16px;
+  gap: 12px;
   flex-wrap: wrap;
 }
 
 .primaryButton,
 .secondaryButton {
-  padding: 14px 32px;
-  font-size: 1rem;
-  font-weight: 600;
-  border-radius: 8px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 20px;
+  font-size: 14px;
+  font-weight: 500;
+  border-radius: 4px;
   text-decoration: none;
   transition: all 0.2s ease;
-  display: inline-block;
+  margin: 0 !important;
+
+  i {
+    font-size: 16px;
+  }
+
+  // Small size
+  &.small {
+    padding: 4px 12px;
+    font-size: 12px;
+    gap: 4px;
+
+    i {
+      font-size: 14px;
+    }
+  }
+
+  // Medium size (default)
+  &.medium {
+    padding: 8px 20px;
+    font-size: 14px;
+    gap: 6px;
+
+    i {
+      font-size: 16px;
+    }
+  }
+
+  // Large size
+  &.large {
+    padding: 12px 32px;
+    font-size: 16px;
+    gap: 8px;
+    font-weight: 600;
+
+    i {
+      font-size: 20px;
+    }
+  }
 }
 
 .primaryButton {
   background: var(--oomol-primary);
-  color: white;
+  color: var(--oomol-text-inverse);
   border: none;
 
+  [data-theme="dark"] & {
+    color: var(--oomol-white);
+  }
+
   &:hover {
     background: var(--oomol-primary-hover);
-    transform: translateY(-2px);
-    box-shadow: 0 8px 24px var(--oomol-primary-bg-hover);
-    color: white;
+    color: var(--oomol-text-inverse) !important;
+
+    [data-theme="dark"] & {
+      color: var(--oomol-white) !important;
+    }
   }
 }
 
 .secondaryButton {
-  background: transparent;
-  color: var(--ifm-color-emphasis-800);
-  border: 1.5px solid var(--ifm-color-emphasis-300);
+  background: inherit;
+  color: var(--oomol-text-primary);
+  border: 1px solid var(--oomol-border-default);
 
   &:hover {
+    color: var(--oomol-primary) !important;
     border-color: var(--oomol-primary);
-    color: var(--oomol-primary);
     background: var(--oomol-primary-bg);
   }
 }
@@ -369,3 +422,166 @@
     font-size: 1.5rem;
   }
 }
+
+// ============================================
+// Product Section
+// ============================================
+.productSection {
+  padding: 120px 24px;
+  background: var(--ifm-background-color);
+}
+
+.sectionHeader {
+  text-align: center;
+  max-width: 900px;
+  margin: 0 auto 100px;
+}
+
+.sectionTitle {
+  font-size: 2.5rem;
+  font-weight: 800;
+  color: var(--ifm-heading-color);
+  margin-bottom: 20px;
+}
+
+.sectionSubtitle {
+  font-size: 1.2rem;
+  color: var(--ifm-color-emphasis-700);
+  line-height: 1.6;
+  margin: 0 auto;
+  text-align: center;
+}
+
+.productContainer {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.productItem {
+  margin: 0 auto 160px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 80px;
+  align-items: center;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  @media (max-width: 996px) {
+    grid-template-columns: 1fr;
+    gap: 40px;
+    margin-bottom: 100px;
+  }
+}
+
+.productText {
+  h3,
+  h4,
+  p {
+    margin: 0;
+    line-height: 1.7;
+  }
+}
+
+.productLabelRow {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 16px;
+}
+
+.productPill {
+  padding: 4px 10px;
+  border-radius: 999px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  background: var(--oomol-primary-bg);
+  color: var(--oomol-primary);
+}
+
+.productTag {
+  font-size: 0.75rem;
+  color: var(--ifm-color-emphasis-600);
+}
+
+.productTitle {
+  font-size: 2rem;
+  font-weight: 800;
+  color: var(--ifm-heading-color);
+  margin-bottom: 16px;
+}
+
+.productSubtitle {
+  font-size: 1.2rem;
+  font-weight: 600;
+  color: var(--oomol-primary);
+  margin-bottom: 24px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.productDesc {
+  font-size: 1.1rem;
+  color: var(--ifm-color-emphasis-700);
+  line-height: 1.8;
+  margin-bottom: 24px;
+}
+
+.devValue {
+  font-size: 1rem;
+  color: var(--oomol-primary);
+  line-height: 1.8;
+  font-weight: 500;
+  margin: 16px 0 0;
+}
+
+.productMetaGrid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px 24px;
+  margin-top: 12px;
+  margin-bottom: 12px;
+}
+
+.productMetaItem {
+  padding: 10px 12px;
+  border-radius: 10px;
+  background: var(--ifm-background-surface-color);
+  border: 1px solid var(--ifm-color-emphasis-200);
+}
+
+.productMetaLabel {
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--ifm-color-emphasis-500);
+}
+
+.productMetaValue {
+  font-size: 0.95rem;
+  color: var(--ifm-color-emphasis-800);
+  font-weight: 500;
+  margin: 0;
+}
+
+.productVisual {
+  width: 100%;
+}
+
+.productImageWrapper {
+  width: 100%;
+}
+
+.productImage {
+  width: 100%;
+  height: auto;
+  display: block;
+  border-radius: 12px;
+  overflow: hidden;
+  background: var(--ifm-background-surface-color);
+  border: 1px solid var(--ifm-color-emphasis-200);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+}
diff --git a/src/pages/chat/index.tsx b/src/pages/chat/index.tsx
deleted file mode 100644
index 3273a014..00000000
--- a/src/pages/chat/index.tsx
+++ /dev/null
@@ -1,179 +0,0 @@
-import styles from "./styles.module.scss";
-
-import { translate } from "@docusaurus/Translate";
-import { GetStartedPrompt } from "@site/src/components/GetStartedPrompt";
-
-import Layout from "../../theme/Layout";
-
-// 使用场景数据
-const useCases = [
-  {
-    icon: "💬",
-    title: translate({ message: "CHAT.useCase.conversation.title" }),
-    description: translate({
-      message: "CHAT.useCase.conversation.description",
-    }),
-  },
-  {
-    icon: "🔧",
-    title: translate({ message: "CHAT.useCase.tools.title" }),
-    description: translate({ message: "CHAT.useCase.tools.description" }),
-  },
-  {
-    icon: "📚",
-    title: translate({ message: "CHAT.useCase.knowledge.title" }),
-    description: translate({ message: "CHAT.useCase.knowledge.description" }),
-  },
-  {
-    icon: "🤝",
-    title: translate({ message: "CHAT.useCase.collaboration.title" }),
-    description: translate({
-      message: "CHAT.useCase.collaboration.description",
-    }),
-  },
-];
-
-// 核心功能数据
-const coreFeatures = [
-  {
-    icon: "🤖",
-    title: translate({ message: "CHAT.features.mcp.title" }),
-    description: translate({ message: "CHAT.features.mcp.description" }),
-    features: [
-      translate({ message: "CHAT.features.mcp.feature1" }),
-      translate({ message: "CHAT.features.mcp.feature2" }),
-      translate({ message: "CHAT.features.mcp.feature3" }),
-    ],
-  },
-  {
-    icon: "🎯",
-    title: translate({ message: "CHAT.features.agent.title" }),
-    description: translate({ message: "CHAT.features.agent.description" }),
-    features: [
-      translate({ message: "CHAT.features.agent.feature1" }),
-      translate({ message: "CHAT.features.agent.feature2" }),
-      translate({ message: "CHAT.features.agent.feature3" }),
-    ],
-  },
-  {
-    icon: "⚡",
-    title: translate({ message: "CHAT.features.models.title" }),
-    description: translate({ message: "CHAT.features.models.description" }),
-    features: [
-      translate({ message: "CHAT.features.models.feature1" }),
-      translate({ message: "CHAT.features.models.feature2" }),
-      translate({ message: "CHAT.features.models.feature3" }),
-    ],
-  },
-];
-
-// 使用场景卡片组件
-const UseCaseCard = ({ useCase }: { useCase: (typeof useCases)[0] }) => {
-  return (
-    <div className={styles.useCaseCard}>
-      <div className={styles.useCaseIcon}>{useCase.icon}</div>
-      <h3 className={styles.useCaseTitle}>{useCase.title}</h3>
-      <p className={styles.useCaseDescription}>{useCase.description}</p>
-    </div>
-  );
-};
-
-// 核心功能卡片组件
-const FeatureCard = ({ feature }: { feature: (typeof coreFeatures)[0] }) => {
-  return (
-    <div className={styles.featureCard}>
-      <div className={styles.featureIcon}>{feature.icon}</div>
-      <h3 className={styles.featureTitle}>{feature.title}</h3>
-      <p className={styles.featureDescription}>{feature.description}</p>
-      <ul className={styles.featureList}>
-        {feature.features.map((item, idx) => (
-          <li key={idx}>{item}</li>
-        ))}
-      </ul>
-    </div>
-  );
-};
-
-export default function ChatPage() {
-  return (
-    <Layout>
-      <div className={styles.container}>
-        {/* Hero 区域 */}
-        <div className={styles.hero}>
-          <h1 className={styles.heroTitle}>OOMOL Chat</h1>
-          <p className={styles.heroDescription}>
-            {translate({ message: "CHAT.hero.description" })}
-          </p>
-
-          {/* 数据亮点 */}
-          <div className={styles.heroStats}>
-            <div className={styles.stat}>
-              <span className={styles.statValue}>MCP</span>
-              <span className={styles.statLabel}>
-                {translate({ message: "CHAT.hero.stat1" })}
-              </span>
-            </div>
-            <div className={styles.stat}>
-              <span className={styles.statValue}>
-                {translate({ message: "CHAT.hero.statValue2" })}
-              </span>
-              <span className={styles.statLabel}>
-                {translate({ message: "CHAT.hero.stat2" })}
-              </span>
-            </div>
-            <div className={styles.stat}>
-              <span className={styles.statValue}>AI Agent</span>
-              <span className={styles.statLabel}>
-                {translate({ message: "CHAT.hero.stat3" })}
-              </span>
-            </div>
-          </div>
-
-          {/* 双 CTA */}
-          <div className={styles.heroCTA}>
-            <a href="/downloads" className={styles.primaryButton}>
-              {translate({ message: "CHAT.hero.cta.download" })}
-            </a>
-            <a href="/docs" className={styles.secondaryButton}>
-              {translate({ message: "CHAT.hero.cta.docs" })}
-            </a>
-          </div>
-        </div>
-
-        {/* 使用场景 */}
-        <section className={styles.useCasesSection}>
-          <div className={styles.sectionHeader}>
-            <h2 className={styles.sectionTitle}>
-              {translate({ message: "CHAT.useCases.title" })}
-            </h2>
-            <p className={styles.sectionSubtitle}>
-              {translate({ message: "CHAT.useCases.subtitle" })}
-            </p>
-          </div>
-          <div className={styles.useCasesGrid}>
-            {useCases.map((useCase, index) => (
-              <UseCaseCard key={index} useCase={useCase} />
-            ))}
-          </div>
-        </section>
-
-        {/* 核心功能 */}
-        <section className={styles.featuresSection}>
-          <div className={styles.sectionHeader}>
-            <h2 className={styles.sectionTitle}>
-              {translate({ message: "CHAT.features.title" })}
-            </h2>
-          </div>
-          <div className={styles.featuresGrid}>
-            {coreFeatures.map((feature, index) => (
-              <FeatureCard key={index} feature={feature} />
-            ))}
-          </div>
-        </section>
-
-        {/* CTA 区域 */}
-        <GetStartedPrompt />
-      </div>
-    </Layout>
-  );
-}
diff --git a/src/pages/cloud/index.tsx b/src/pages/cloud/index.tsx
index 2b746be3..422147eb 100644
--- a/src/pages/cloud/index.tsx
+++ b/src/pages/cloud/index.tsx
@@ -1,173 +1,166 @@
 import styles from "./styles.module.scss";
 
 import { translate } from "@docusaurus/Translate";
+import useBaseUrl from "@docusaurus/useBaseUrl";
 import { GetStartedPrompt } from "@site/src/components/GetStartedPrompt";
+import ThemedImage from "@theme/ThemedImage";
 
 import Layout from "../../theme/Layout";
 
-// 使用场景数据
-const useCases = [
-  {
-    icon: "☁️",
-    title: translate({ message: "CLOUD.useCase.quickDeploy.title" }),
-    description: translate({
-      message: "CLOUD.useCase.quickDeploy.description",
-    }),
-  },
-  {
-    icon: "🤖",
-    title: translate({ message: "CLOUD.useCase.aiAgent.title" }),
-    description: translate({ message: "CLOUD.useCase.aiAgent.description" }),
-  },
-  {
-    icon: "📱",
-    title: translate({ message: "CLOUD.useCase.miniapp.title" }),
-    description: translate({ message: "CLOUD.useCase.miniapp.description" }),
-  },
-  {
-    icon: "🚀",
-    title: translate({ message: "CLOUD.useCase.noOps.title" }),
-    description: translate({ message: "CLOUD.useCase.noOps.description" }),
-  },
-];
+// import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 
-// 核心功能数据
-const coreFeatures = [
+// Three Modes Data
+const modes = [
   {
-    icon: "🚀",
-    title: translate({ message: "CLOUD.features.oneDeploy.title" }),
-    description: translate({ message: "CLOUD.features.oneDeploy.description" }),
-    features: [
-      translate({ message: "CLOUD.features.oneDeploy.feature1" }),
-      translate({ message: "CLOUD.features.oneDeploy.feature2" }),
-      translate({ message: "CLOUD.features.oneDeploy.feature3" }),
-    ],
+    // Library 模式: 发布为函数库
+    imageLight: "/img/pages/cloud/publish-light.png",
+    imageDark: "/img/pages/cloud/publish-dark.png",
+    title: translate({ message: "CLOUD.modes.library.title" }),
+    description: translate({ message: "CLOUD.modes.library.description" }),
   },
   {
-    icon: "📊",
-    title: translate({ message: "CLOUD.features.monitor.title" }),
-    description: translate({ message: "CLOUD.features.monitor.description" }),
-    features: [
-      translate({ message: "CLOUD.features.monitor.feature1" }),
-      translate({ message: "CLOUD.features.monitor.feature2" }),
-      translate({ message: "CLOUD.features.monitor.feature3" }),
-    ],
+    // Serverless 模式: 部署为云函数
+    imageLight: "/img/pages/cloud/create-api-light.png",
+    imageDark: "/img/pages/cloud/create-api-dark.png",
+    title: translate({ message: "CLOUD.modes.serverless.title" }),
+    description: translate({ message: "CLOUD.modes.serverless.description" }),
   },
   {
-    icon: "🔐",
-    title: translate({ message: "CLOUD.features.security.title" }),
-    description: translate({ message: "CLOUD.features.security.description" }),
-    features: [
-      translate({ message: "CLOUD.features.security.feature1" }),
-      translate({ message: "CLOUD.features.security.feature2" }),
-      translate({ message: "CLOUD.features.security.feature3" }),
-    ],
+    // MCP 模式: 提供给 AI 调用
+    imageLight: "/img/pages/cloud/ai-chat-light.png",
+    imageDark: "/img/pages/cloud/ai-chat-dark.png",
+    title: translate({ message: "CLOUD.modes.mcp.title" }),
+    description: translate({ message: "CLOUD.modes.mcp.description" }),
   },
 ];
 
-// 使用场景卡片组件
-const UseCaseCard = ({ useCase }: { useCase: (typeof useCases)[0] }) => {
-  return (
-    <div className={styles.useCaseCard}>
-      <div className={styles.useCaseIcon}>{useCase.icon}</div>
-      <h3 className={styles.useCaseTitle}>{useCase.title}</h3>
-      <p className={styles.useCaseDescription}>{useCase.description}</p>
-    </div>
-  );
-};
-
-// 核心功能卡片组件
-const FeatureCard = ({ feature }: { feature: (typeof coreFeatures)[0] }) => {
+const ModeItem = ({
+  mode,
+  index,
+}: {
+  mode: (typeof modes)[0];
+  index: number;
+}) => {
   return (
-    <div className={styles.featureCard}>
-      <div className={styles.featureIcon}>{feature.icon}</div>
-      <h3 className={styles.featureTitle}>{feature.title}</h3>
-      <p className={styles.featureDescription}>{feature.description}</p>
-      <ul className={styles.featureList}>
-        {feature.features.map((item, idx) => (
-          <li key={idx}>{item}</li>
-        ))}
-      </ul>
+    <div className={styles.modeItem}>
+      <div className={styles.modeText}>
+        <div className={styles.modeNumber}>0{index + 1}</div>
+        <h3 className={styles.modeTitle}>{mode.title}</h3>
+        <p className={styles.modeDescription}>{mode.description}</p>
+      </div>
+      <div className={styles.modeVisual}>
+        <div className={styles.modeImageWrapper}>
+          <ThemedImage
+            sources={{
+              light: useBaseUrl(mode.imageLight),
+              dark: useBaseUrl(mode.imageDark),
+            }}
+            alt={mode.title}
+            className={styles.modeImage}
+          />
+        </div>
+      </div>
     </div>
   );
 };
 
 export default function CloudPage() {
+  // const { i18n } = useDocusaurusContext() as unknown as {
+  //   i18n: { currentLocale: string };
+  // };
+  // const pricingUrl =
+  //   i18n.currentLocale === "zh-CN" ? "/zh-CN/pricing" : "/pricing";
+
   return (
     <Layout>
       <div className={styles.container}>
-        {/* Hero 区域 */}
+        {/* Hero Section */}
         <div className={styles.hero}>
-          <h1 className={styles.heroTitle}>OOMOL Cloud</h1>
+          <h1 className={styles.heroTitle}>
+            {translate({ message: "CLOUD.hero.title" })}
+          </h1>
           <p className={styles.heroDescription}>
             {translate({ message: "CLOUD.hero.description" })}
           </p>
 
-          {/* 数据亮点 */}
           <div className={styles.heroStats}>
             <div className={styles.stat}>
-              <span className={styles.statValue}>自动扩缩容</span>
+              {/* 🖼️ 图片占位: 免费徽章图标 (SVG/PNG 60x60px) */}
+              <span className={styles.statValue}>✨</span>
               <span className={styles.statLabel}>
                 {translate({ message: "CLOUD.hero.stat1" })}
               </span>
             </div>
             <div className={styles.stat}>
-              <span className={styles.statValue}>RESTful API</span>
+              {/* 🖼️ 图片占位: 定价徽章图标 (SVG/PNG 60x60px) */}
+              <span className={styles.statValue}>💰</span>
               <span className={styles.statLabel}>
                 {translate({ message: "CLOUD.hero.stat2" })}
               </span>
             </div>
             <div className={styles.stat}>
-              <span className={styles.statValue}>MCP 协议</span>
+              {/* 🖼️ 图片占位: 低维护徽章图标 (SVG/PNG 60x60px) */}
+              <span className={styles.statValue}>☕️</span>
               <span className={styles.statLabel}>
                 {translate({ message: "CLOUD.hero.stat3" })}
               </span>
             </div>
           </div>
 
-          {/* 双 CTA */}
           <div className={styles.heroCTA}>
-            <a href="/downloads" className={styles.primaryButton}>
-              {translate({ message: "CLOUD.hero.cta.start" })}
-            </a>
-            <a href="/docs" className={styles.secondaryButton}>
-              {translate({ message: "CLOUD.hero.cta.docs" })}
+            <a
+              href="https://console.oomol.com/cloud-function"
+              className={`${styles.primaryButton} ${styles.large}`}
+            >
+              开始使用
             </a>
           </div>
         </div>
 
-        {/* 使用场景 */}
-        <section className={styles.useCasesSection}>
+        {/* Pain Points Section (Empathy) */}
+
+        {/* Solution / Modes Section */}
+        <section className={styles.modesSection}>
           <div className={styles.sectionHeader}>
             <h2 className={styles.sectionTitle}>
-              {translate({ message: "CLOUD.useCases.title" })}
+              {translate({ message: "CLOUD.solution.title" })}
             </h2>
-            <p className={styles.sectionSubtitle}>
-              {translate({ message: "CLOUD.useCases.subtitle" })}
-            </p>
           </div>
-          <div className={styles.useCasesGrid}>
-            {useCases.map((useCase, index) => (
-              <UseCaseCard key={index} useCase={useCase} />
+          <section className={styles.painPointsSection}>
+            <div className={styles.painPointsContent}>
+              <div className={styles.painPointsText}>
+                {translate({ message: "CLOUD.painPoints.description" })}
+              </div>
+            </div>
+          </section>
+          <div className={styles.modesContainer}>
+            {modes.map((mode, index) => (
+              <ModeItem key={index} mode={mode} index={index} />
             ))}
           </div>
         </section>
 
-        {/* 核心功能 */}
-        <section className={styles.featuresSection}>
+        {/* Pricing Section */}
+        {/* <section className={styles.pricingSection}>
           <div className={styles.sectionHeader}>
             <h2 className={styles.sectionTitle}>
-              {translate({ message: "CLOUD.features.title" })}
+              {translate({ message: "CLOUD.pricing.title" })}
             </h2>
           </div>
-          <div className={styles.featuresGrid}>
-            {coreFeatures.map((feature, index) => (
-              <FeatureCard key={index} feature={feature} />
-            ))}
+          <div className={styles.pricingContent}>
+            <p className={styles.pricingDescription}>
+              {translate({ message: "CLOUD.pricing.description" })}
+            </p>
+            <a
+              href={pricingUrl}
+              className={`${styles.primaryButton} ${styles.large}`}
+            >
+              {translate({ message: "CLOUD.pricing.cta" })}
+            </a>
           </div>
-        </section>
+        </section> */}
 
-        {/* CTA 区域 */}
+        {/* Final CTA */}
         <GetStartedPrompt />
       </div>
     </Layout>
diff --git a/src/pages/cloud/styles.module.scss b/src/pages/cloud/styles.module.scss
index 87782693..2749a113 100644
--- a/src/pages/cloud/styles.module.scss
+++ b/src/pages/cloud/styles.module.scss
@@ -11,7 +11,7 @@
 }
 
 // ============================================
-// Hero 区域 - 与 Studio 保持一致的极简风格
+// Hero 区域
 // ============================================
 .hero {
   text-align: center;
@@ -26,7 +26,7 @@
   margin-bottom: 1.5rem;
   letter-spacing: -0.03em;
   line-height: 1.1;
-  color: var(--oomol-primary);
+  color: var(--ifm-heading-color);
 }
 
 .heroDescription {
@@ -71,42 +71,73 @@
 .heroCTA {
   display: flex;
   justify-content: center;
-  gap: 16px;
+  gap: 12px;
   flex-wrap: wrap;
 }
 
 .primaryButton,
 .secondaryButton {
-  padding: 14px 32px;
-  font-size: 1rem;
-  font-weight: 600;
-  border-radius: 8px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 20px;
+  font-size: 14px;
+  font-weight: 500;
+  border-radius: 4px;
   text-decoration: none;
   transition: all 0.2s ease;
-  display: inline-block;
+  margin: 0 !important;
+
+  // Small size
+  &.small {
+    padding: 4px 12px;
+    font-size: 12px;
+    gap: 4px;
+  }
+
+  // Medium size (default)
+  &.medium {
+    padding: 8px 20px;
+    font-size: 14px;
+    gap: 6px;
+  }
+
+  // Large size
+  &.large {
+    padding: 12px 32px;
+    font-size: 16px;
+    gap: 8px;
+    font-weight: 600;
+  }
 }
 
 .primaryButton {
   background: var(--oomol-primary);
-  color: white;
+  color: var(--oomol-text-inverse);
   border: none;
 
+  [data-theme="dark"] & {
+    color: var(--oomol-white);
+  }
+
   &:hover {
     background: var(--oomol-primary-hover);
-    transform: translateY(-2px);
-    box-shadow: 0 8px 24px var(--oomol-primary-bg-hover);
-    color: white;
+    color: var(--oomol-text-inverse) !important;
+
+    [data-theme="dark"] & {
+      color: var(--oomol-white) !important;
+    }
   }
 }
 
 .secondaryButton {
-  background: transparent;
-  color: var(--ifm-color-emphasis-800);
-  border: 1.5px solid var(--ifm-color-emphasis-300);
+  background: inherit;
+  color: var(--oomol-text-primary);
+  border: 1px solid var(--oomol-border-default);
 
   &:hover {
+    color: var(--oomol-primary) !important;
     border-color: var(--oomol-primary);
-    color: var(--oomol-primary);
     background: var(--oomol-primary-bg);
   }
 }
@@ -137,235 +168,221 @@
 }
 
 // ============================================
-// 使用场景 - 4列网格
+// Pain Points Section (New)
 // ============================================
-.useCasesSection {
-  padding: 100px 32px;
+.painPointsSection {
+  padding: 0px 24px 60px 24px;
   background: linear-gradient(
-    180deg,
-    transparent 0%,
-    var(--ifm-color-primary-lightest) 50%,
-    transparent 100%
+    135deg,
+    var(--ifm-background-color) 0%,
+    var(--ifm-background-surface-color) 100%
   );
+  position: relative;
+  overflow: hidden;
 }
 
-.useCasesGrid {
-  max-width: 1200px;
+.painPointsContent {
+  max-width: 900px;
   margin: 0 auto;
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-  gap: 24px;
+  text-align: center;
 }
 
-.useCaseCard {
-  padding: 32px 24px;
-  background: var(--ifm-background-surface-color);
-  border-radius: 12px;
-  border: 1px solid var(--ifm-color-emphasis-200);
-  transition: all 0.3s ease;
-  text-align: center;
+.painPointsHeader {
+  margin-bottom: 64px;
 
-  &:hover {
-    border-color: var(--oomol-primary);
-    box-shadow: 0 8px 24px var(--oomol-primary-bg-hover);
-    transform: translateY(-4px);
+  .sectionTitle {
+    font-size: 3rem;
+    font-weight: 900;
+    background: linear-gradient(
+      135deg,
+      var(--ifm-heading-color) 0%,
+      var(--ifm-color-emphasis-700) 100%
+    );
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    margin-bottom: 16px;
+    letter-spacing: -0.03em;
   }
-}
 
-.useCaseIcon {
-  font-size: 3rem;
-  margin-bottom: 16px;
+  .sectionSubtitle {
+    font-size: 1.3rem;
+    color: var(--ifm-color-emphasis-600);
+    font-weight: 500;
+  }
 }
 
-.useCaseTitle {
-  font-size: 1.35rem;
-  font-weight: 700;
-  color: var(--ifm-heading-color);
-  margin-bottom: 12px;
-  line-height: 1.3;
-}
+.painPointsText {
+  font-size: 1.2rem;
+  line-height: 2;
+  color: var(--ifm-color-emphasis-800);
+  font-weight: 400;
+  text-align: left;
+  padding: 48px;
+  background: var(--ifm-background-surface-color);
+  border-radius: 20px;
+  border: 1px solid var(--ifm-color-emphasis-200);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
+  position: relative;
 
-.useCaseDescription {
-  font-size: 0.95rem;
-  color: var(--ifm-color-emphasis-700);
-  line-height: 1.6;
-  margin: 0;
+  &::before {
+    content: '"';
+    position: absolute;
+    top: 20px;
+    left: 24px;
+    font-size: 5rem;
+    font-weight: 900;
+    color: var(--oomol-primary);
+    opacity: 0.15;
+    line-height: 1;
+    font-family: Georgia, serif;
+  }
+
+  @media (max-width: 768px) {
+    padding: 32px 24px;
+    font-size: 1.1rem;
+    line-height: 1.8;
+
+    &::before {
+      font-size: 3.5rem;
+      top: 12px;
+      left: 16px;
+    }
+  }
 }
 
 // ============================================
-// 核心功能 - 3列卡片
+// Modes Section (Solution)
 // ============================================
-.featuresSection {
-  padding: 100px 32px;
+.modesSection {
+  padding: 120px 24px;
+  background: var(--ifm-background-color);
 }
 
-.featuresGrid {
+.modesContainer {
   max-width: 1200px;
   margin: 0 auto;
+}
+
+.modeItem {
+  margin: 0 auto 160px;
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-  gap: 32px;
+  grid-template-columns: 1fr 1fr;
+  gap: 80px;
+  align-items: center;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  @media (max-width: 996px) {
+    grid-template-columns: 1fr;
+    gap: 40px;
+    margin-bottom: 100px;
+  }
 }
 
-.featureCard {
-  padding: 40px;
-  background: var(--ifm-background-surface-color);
-  border-radius: 16px;
-  border: 1px solid var(--ifm-color-emphasis-200);
-  transition: all 0.3s ease;
+.modeText {
+  h3 {
+    margin-top: 0;
+    margin-left: 0;
+    margin-right: 0;
+  }
 
-  &:hover {
-    border-color: var(--oomol-primary);
-    box-shadow: 0 12px 32px var(--oomol-primary-bg-hover);
-    transform: translateY(-6px);
+  p {
+    margin: 0;
   }
 }
 
-.featureIcon {
-  font-size: 3rem;
-  margin-bottom: 16px;
-  display: block;
+.modeNumber {
+  font-size: 4rem;
+  font-weight: 900;
+  color: var(--oomol-primary);
+  opacity: 0.15;
+  line-height: 1;
+  margin-bottom: 24px;
+  letter-spacing: -0.05em;
 }
 
-.featureTitle {
-  font-size: 1.75rem;
+.modeTitle {
+  font-size: 2rem;
   font-weight: 700;
-  color: var(--ifm-heading-color);
-  margin-bottom: 12px;
-  line-height: 1.3;
+  color: var(--oomol-primary);
+  margin-bottom: 24px;
 }
 
-.featureDescription {
-  font-size: 1.05rem;
+.modeDescription {
+  font-size: 1.15rem;
   color: var(--ifm-color-emphasis-700);
-  margin-bottom: 20px;
-  line-height: 1.6;
+  line-height: 1.7;
 }
 
-.featureList {
-  list-style: none;
-  padding: 0;
-  margin: 0;
+.modeVisual {
+  width: 100%;
+}
 
-  li {
-    padding-left: 24px;
-    margin-bottom: 10px;
-    position: relative;
-    font-size: 0.95rem;
-    color: var(--ifm-color-emphasis-600);
-    line-height: 1.6;
+.modeImageWrapper {
+  width: 100%;
+}
 
-    &::before {
-      content: "→";
-      position: absolute;
-      left: 0;
-      color: var(--oomol-primary);
-      font-weight: 700;
-    }
-  }
+.modeImage {
+  width: 100%;
+  height: auto;
+  display: block;
+  border-radius: 12px;
+  overflow: hidden;
+  background: var(--ifm-background-surface-color);
+  border: 1px solid var(--ifm-color-emphasis-200);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 }
 
 // ============================================
-// 响应式设计
+// Pricing Section
+// ============================================
+.pricingSection {
+  padding: 100px 32px;
+  text-align: center;
+}
+
+.pricingContent {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.pricingDescription {
+  font-size: 1.25rem;
+  color: var(--ifm-color-emphasis-700);
+  margin-bottom: 48px;
+  line-height: 1.6;
+}
+
+// ============================================
+// Responsive
 // ============================================
 @media (max-width: 996px) {
   .hero {
     padding: 80px 24px 60px;
   }
-
   .heroTitle {
     font-size: 3rem;
   }
-
   .heroDescription {
     font-size: 1.25rem;
   }
-
-  .heroStats {
-    gap: 32px;
-  }
-
-  .statValue {
-    font-size: 1.75rem;
-  }
-
-  .sectionTitle {
-    font-size: 2.25rem;
-  }
-
-  .sectionSubtitle {
+  .painPointsText {
     font-size: 1.1rem;
   }
-
-  .useCasesSection,
-  .featuresSection {
-    padding: 80px 24px;
-  }
-
-  .useCasesGrid {
-    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  }
-
-  .featuresGrid {
-    grid-template-columns: 1fr;
-  }
 }
 
 @media (max-width: 768px) {
   .hero {
     padding: 60px 20px 40px;
   }
-
   .heroTitle {
     font-size: 2.5rem;
   }
-
-  .heroDescription {
-    font-size: 1.1rem;
-  }
-
   .heroStats {
     flex-direction: column;
     gap: 24px;
   }
-
-  .heroCTA {
-    flex-direction: column;
-    align-items: stretch;
-
-    .primaryButton,
-    .secondaryButton {
-      width: 100%;
-      text-align: center;
-    }
-  }
-
-  .sectionTitle {
-    font-size: 2rem;
-  }
-
-  .sectionSubtitle {
-    font-size: 1rem;
-  }
-
-  .useCasesSection,
-  .featuresSection {
-    padding: 60px 20px;
-  }
-
-  .sectionHeader {
-    margin-bottom: 48px;
-  }
-
-  .useCasesGrid {
-    grid-template-columns: 1fr;
-  }
-
-  .useCaseTitle {
-    font-size: 1.25rem;
-  }
-
-  .featureTitle {
-    font-size: 1.5rem;
-  }
 }
diff --git a/src/pages/headless/index.tsx b/src/pages/headless/index.tsx
index 9a5b07d6..06caf911 100644
--- a/src/pages/headless/index.tsx
+++ b/src/pages/headless/index.tsx
@@ -1,173 +1,194 @@
 import styles from "./styles.module.scss";
 
 import { translate } from "@docusaurus/Translate";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import { GetStartedPrompt } from "@site/src/components/GetStartedPrompt";
-
-import Layout from "../../theme/Layout";
-
-// 使用场景数据
-const useCases = [
-  {
-    icon: "🐳",
-    title: translate({ message: "HEADLESS.useCase.docker.title" }),
-    description: translate({ message: "HEADLESS.useCase.docker.description" }),
-  },
-  {
-    icon: "☁️",
-    title: translate({ message: "HEADLESS.useCase.cloud.title" }),
-    description: translate({ message: "HEADLESS.useCase.cloud.description" }),
-  },
-  {
-    icon: "🔄",
-    title: translate({ message: "HEADLESS.useCase.ci.title" }),
-    description: translate({ message: "HEADLESS.useCase.ci.description" }),
-  },
-  {
-    icon: "🌐",
-    title: translate({ message: "HEADLESS.useCase.api.title" }),
-    description: translate({ message: "HEADLESS.useCase.api.description" }),
-  },
-];
-
-// 核心功能数据
-const coreFeatures = [
-  {
-    icon: "🚀",
-    title: translate({ message: "HEADLESS.features.deploy.title" }),
-    description: translate({ message: "HEADLESS.features.deploy.description" }),
-    features: [
-      translate({ message: "HEADLESS.features.deploy.feature1" }),
-      translate({ message: "HEADLESS.features.deploy.feature2" }),
-      translate({ message: "HEADLESS.features.deploy.feature3" }),
-    ],
-  },
-  {
-    icon: "📦",
-    title: translate({ message: "HEADLESS.features.package.title" }),
-    description: translate({
-      message: "HEADLESS.features.package.description",
-    }),
-    features: [
-      translate({ message: "HEADLESS.features.package.feature1" }),
-      translate({ message: "HEADLESS.features.package.feature2" }),
-      translate({ message: "HEADLESS.features.package.feature3" }),
-    ],
-  },
-  {
-    icon: "🔗",
-    title: translate({ message: "HEADLESS.features.remote.title" }),
-    description: translate({ message: "HEADLESS.features.remote.description" }),
-    features: [
-      translate({ message: "HEADLESS.features.remote.feature1" }),
-      translate({ message: "HEADLESS.features.remote.feature2" }),
-      translate({ message: "HEADLESS.features.remote.feature3" }),
-    ],
-  },
-];
-
-// 使用场景卡片组件
-const UseCaseCard = ({ useCase }: { useCase: (typeof useCases)[0] }) => {
-  return (
-    <div className={styles.useCaseCard}>
-      <div className={styles.useCaseIcon}>{useCase.icon}</div>
-      <h3 className={styles.useCaseTitle}>{useCase.title}</h3>
-      <p className={styles.useCaseDescription}>{useCase.description}</p>
-    </div>
-  );
-};
-
-// 核心功能卡片组件
-const FeatureCard = ({ feature }: { feature: (typeof coreFeatures)[0] }) => {
-  return (
-    <div className={styles.featureCard}>
-      <div className={styles.featureIcon}>{feature.icon}</div>
-      <h3 className={styles.featureTitle}>{feature.title}</h3>
-      <p className={styles.featureDescription}>{feature.description}</p>
-      <ul className={styles.featureList}>
-        {feature.features.map((item, idx) => (
-          <li key={idx}>{item}</li>
-        ))}
-      </ul>
-    </div>
-  );
-};
+import Layout from "@theme/Layout";
+import React from "react";
 
 export default function HeadlessPage() {
+  const { i18n } = useDocusaurusContext() as unknown as {
+    i18n: { currentLocale: string };
+  };
+  const docsUrl =
+    i18n.currentLocale === "zh-CN"
+      ? "/zh-CN/docs/headless/"
+      : "/docs/headless/";
+
   return (
     <Layout>
       <div className={styles.container}>
-        {/* Hero 区域 */}
-        <div className={styles.hero}>
-          <h1 className={styles.heroTitle}>OOMOL Headless</h1>
-          <p className={styles.heroDescription}>
-            {translate({ message: "HEADLESS.hero.description" })}
-          </p>
-
-          {/* 数据亮点 */}
-          <div className={styles.heroStats}>
-            <div className={styles.stat}>
-              <span className={styles.statValue}>Docker</span>
-              <span className={styles.statLabel}>
-                {translate({ message: "HEADLESS.hero.stat1" })}
-              </span>
+        {/* Hero Section */}
+        <section className={styles.heroSection}>
+          <div className={styles.heroContent}>
+            <h1 className={styles.heroTitle}>OOMOL Headless</h1>
+            <p className={styles.heroSubtitle}>
+              {translate({ message: "HEADLESS.hero.description" })}
+            </p>
+            <div className={styles.commandBlock}>
+              <code>docker pull oomolstudio/headless:latest</code>
+              <button
+                className={styles.copyBtn}
+                onClick={() => {
+                  navigator.clipboard.writeText(
+                    "docker pull oomolstudio/headless:latest"
+                  );
+                }}
+              >
+                Copy
+              </button>
             </div>
-            <div className={styles.stat}>
-              <span className={styles.statValue}>远程访问</span>
-              <span className={styles.statLabel}>
-                {translate({ message: "HEADLESS.hero.stat2" })}
-              </span>
+          </div>
+        </section>
+
+        {/* Docker Deployment Section */}
+        <section className={styles.deploymentSection}>
+          <div className={styles.deploymentCard}>
+            <h2 className={styles.deploymentTitle}>
+              {translate({ message: "HEADLESS.deployment.title" })}
+            </h2>
+            <div className={styles.deploymentCode}>
+              {`docker run -d --privileged --name oomol-headless -p 4000:4000 -p 52222:52222 \\
+  --mount type=bind,src=$HOME/.oomol-studio/headless/.env,dst=/app/.env \\
+  --mount type=bind,src=$HOME/oomol-storage,dst=/oomol-driver/oomol-storage \\
+  oomolstudio/headless:latest`}
             </div>
-            <div className={styles.stat}>
-              <span className={styles.statValue}>包管理</span>
-              <span className={styles.statLabel}>
-                {translate({ message: "HEADLESS.hero.stat3" })}
-              </span>
+            <div className={styles.deploymentCTA}>
+              <a href={docsUrl} className={styles.deploymentLink}>
+                {translate({ message: "HEADLESS.deployment.viewDocs" })}
+              </a>
             </div>
           </div>
+        </section>
 
-          {/* 双 CTA */}
-          <div className={styles.heroCTA}>
-            <a href="/downloads" className={styles.primaryButton}>
-              {translate({ message: "HEADLESS.hero.cta.download" })}
-            </a>
-            <a href="/docs" className={styles.secondaryButton}>
-              {translate({ message: "HEADLESS.hero.cta.docs" })}
-            </a>
+        {/* Manifesto / Philosophy Section */}
+        <section className={styles.philosophySection}>
+          <div className={styles.philosophyHeader}>
+            <h2>{translate({ message: "HEADLESS.philosophy.title" })}</h2>
+            <p>{translate({ message: "HEADLESS.philosophy.subtitle" })}</p>
           </div>
-        </div>
 
-        {/* 使用场景 */}
-        <section className={styles.useCasesSection}>
+          <div className={styles.cardGrid}>
+            {/* Freedom */}
+            <div className={styles.card}>
+              {/* 🖼️ 图片占位: Freedom 图标 (建议使用开放的鸟类图标或自由主题插图, SVG/PNG 80x80px) */}
+              <div className={styles.cardIcon}>🕊️</div>
+              <h3>
+                {translate({ message: "HEADLESS.philosophy.freedom.title" })}
+              </h3>
+              <p>
+                {translate({ message: "HEADLESS.philosophy.freedom.desc" })}
+              </p>
+            </div>
+
+            {/* Open Source */}
+            <div className={styles.card}>
+              {/* 🖼️ 图片占位: 开源图标 (建议使用解锁或开源 logo, SVG/PNG 80x80px) */}
+              <div className={styles.cardIcon}>🔓</div>
+              <h3>
+                {translate({ message: "HEADLESS.philosophy.opensource.title" })}
+              </h3>
+              <p>
+                {translate({ message: "HEADLESS.philosophy.opensource.desc" })}
+              </p>
+            </div>
+
+            {/* Community */}
+            <div className={styles.card}>
+              {/* 🖼️ 图片占位: 社区图标 (建议使用握手或社区主题插图, SVG/PNG 80x80px) */}
+              <div className={styles.cardIcon}>🤝</div>
+              <h3>
+                {translate({ message: "HEADLESS.philosophy.community.title" })}
+              </h3>
+              <p>
+                {translate({ message: "HEADLESS.philosophy.community.desc" })}
+              </p>
+            </div>
+          </div>
+        </section>
+
+        {/* Open Source Projects Section */}
+        <section className={styles.opensourceSection}>
           <div className={styles.sectionHeader}>
             <h2 className={styles.sectionTitle}>
-              {translate({ message: "HEADLESS.useCases.title" })}
+              {translate({ message: "CLOUD.opensource.title" })}
             </h2>
             <p className={styles.sectionSubtitle}>
-              {translate({ message: "HEADLESS.useCases.subtitle" })}
+              {translate({ message: "CLOUD.opensource.subtitle" })}
             </p>
           </div>
-          <div className={styles.useCasesGrid}>
-            {useCases.map((useCase, index) => (
-              <UseCaseCard key={index} useCase={useCase} />
-            ))}
+          <div className={styles.projectsGrid}>
+            <a
+              href="https://github.com/oomol-lab/ovm"
+              target="_blank"
+              rel="noopener noreferrer"
+              className={styles.projectCard}
+            >
+              <h3 className={styles.projectTitle}>
+                {translate({ message: "CLOUD.opensource.ovm.title" })}
+              </h3>
+              <p className={styles.projectDescription}>
+                {translate({ message: "CLOUD.opensource.ovm.description" })}
+              </p>
+              <span className={styles.projectLink}>GitHub →</span>
+            </a>
+            <a
+              href="https://github.com/oomol-lab/ovm-core"
+              target="_blank"
+              rel="noopener noreferrer"
+              className={styles.projectCard}
+            >
+              <h3 className={styles.projectTitle}>
+                {translate({ message: "CLOUD.opensource.ovm-core.title" })}
+              </h3>
+              <p className={styles.projectDescription}>
+                {translate({
+                  message: "CLOUD.opensource.ovm-core.description",
+                })}
+              </p>
+              <span className={styles.projectLink}>GitHub →</span>
+            </a>
+            <a
+              href="https://github.com/oomol-lab/ovm-win"
+              target="_blank"
+              rel="noopener noreferrer"
+              className={styles.projectCard}
+            >
+              <h3 className={styles.projectTitle}>
+                {translate({ message: "CLOUD.opensource.ovm-win.title" })}
+              </h3>
+              <p className={styles.projectDescription}>
+                {translate({ message: "CLOUD.opensource.ovm-win.description" })}
+              </p>
+              <span className={styles.projectLink}>GitHub →</span>
+            </a>
+            <a
+              href="https://github.com/oomol-lab/ovm-mac"
+              target="_blank"
+              rel="noopener noreferrer"
+              className={styles.projectCard}
+            >
+              <h3 className={styles.projectTitle}>
+                {translate({ message: "CLOUD.opensource.ovm-mac.title" })}
+              </h3>
+              <p className={styles.projectDescription}>
+                {translate({ message: "CLOUD.opensource.ovm-mac.description" })}
+              </p>
+              <span className={styles.projectLink}>GitHub →</span>
+            </a>
           </div>
         </section>
 
-        {/* 核心功能 */}
-        <section className={styles.featuresSection}>
-          <div className={styles.sectionHeader}>
-            <h2 className={styles.sectionTitle}>
-              {translate({ message: "HEADLESS.features.title" })}
-            </h2>
-          </div>
-          <div className={styles.featuresGrid}>
-            {coreFeatures.map((feature, index) => (
-              <FeatureCard key={index} feature={feature} />
-            ))}
-          </div>
+        {/* Footer CTA */}
+        <section className={styles.ctaSection}>
+          <a
+            href={docsUrl}
+            className={`${styles.primaryButton} ${styles.large}`}
+          >
+            {translate({ message: "HEADLESS.hero.cta.docs" })}
+          </a>
         </section>
 
-        {/* CTA 区域 */}
         <GetStartedPrompt />
       </div>
     </Layout>
diff --git a/src/pages/headless/styles.module.scss b/src/pages/headless/styles.module.scss
index 87782693..9dcad580 100644
--- a/src/pages/headless/styles.module.scss
+++ b/src/pages/headless/styles.module.scss
@@ -1,371 +1,491 @@
 @use "../../css/custom.scss" as *;
 
-// ============================================
-// Container
-// ============================================
 .container {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 0;
-  background: var(--ifm-background-color);
+  background-color: var(--ifm-background-color);
+  min-height: calc(100vh - var(--ifm-navbar-height));
 }
 
 // ============================================
-// Hero 区域 - 与 Studio 保持一致的极简风格
+// Hero Section
 // ============================================
-.hero {
+.heroSection {
+  padding: 120px 24px 80px;
   text-align: center;
-  padding: 120px 32px 100px;
   background: var(--ifm-background-color);
-  position: relative;
+
+  @media (max-width: 768px) {
+    padding: 80px 20px 60px;
+  }
+}
+
+.heroContent {
+  max-width: 800px;
+  margin: 0 auto;
 }
 
 .heroTitle {
   font-size: 4rem;
   font-weight: 800;
-  margin-bottom: 1.5rem;
   letter-spacing: -0.03em;
-  line-height: 1.1;
-  color: var(--oomol-primary);
+  margin-bottom: 24px;
+  color: var(--ifm-heading-color);
+
+  @media (max-width: 768px) {
+    font-size: 2.5rem;
+  }
 }
 
-.heroDescription {
+.heroSubtitle {
   font-size: 1.5rem;
+  line-height: 1.5;
   color: var(--ifm-color-emphasis-700);
-  max-width: 720px;
-  margin: 0 auto 3rem;
-  line-height: 1.6;
-  font-weight: 400;
-}
+  margin-bottom: 48px;
 
-// 数据亮点
-.heroStats {
-  display: flex;
-  justify-content: center;
-  gap: 48px;
-  margin-bottom: 3rem;
-  flex-wrap: wrap;
+  @media (max-width: 768px) {
+    font-size: 1.2rem;
+  }
 }
 
-.stat {
-  display: flex;
-  flex-direction: column;
+.commandBlock {
+  display: inline-flex;
   align-items: center;
-  gap: 8px;
-}
-
-.statValue {
-  font-size: 2rem;
-  font-weight: 700;
-  color: var(--oomol-primary);
-}
-
-.statLabel {
-  font-size: 0.9rem;
-  color: var(--ifm-color-emphasis-600);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-// CTA 按钮
-.heroCTA {
-  display: flex;
-  justify-content: center;
+  background: var(--ifm-pre-background);
+  border: 1px solid var(--ifm-color-emphasis-200);
+  padding: 12px 24px;
+  border-radius: 12px;
   gap: 16px;
-  flex-wrap: wrap;
-}
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 
-.primaryButton,
-.secondaryButton {
-  padding: 14px 32px;
-  font-size: 1rem;
-  font-weight: 600;
-  border-radius: 8px;
-  text-decoration: none;
-  transition: all 0.2s ease;
-  display: inline-block;
+  code {
+    font-family: "JetBrains Mono", monospace;
+    font-size: 1.1rem;
+    color: var(--ifm-color-primary);
+    background: transparent;
+    border: none;
+    padding: 0;
+  }
 }
 
-.primaryButton {
-  background: var(--oomol-primary);
-  color: white;
+.copyBtn {
+  background: var(--ifm-color-emphasis-200);
   border: none;
+  padding: 6px 12px;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  color: var(--ifm-color-emphasis-700);
 
   &:hover {
-    background: var(--oomol-primary-hover);
-    transform: translateY(-2px);
-    box-shadow: 0 8px 24px var(--oomol-primary-bg-hover);
-    color: white;
+    background: var(--ifm-color-emphasis-300);
+    color: var(--ifm-color-emphasis-900);
   }
-}
-
-.secondaryButton {
-  background: transparent;
-  color: var(--ifm-color-emphasis-800);
-  border: 1.5px solid var(--ifm-color-emphasis-300);
 
-  &:hover {
-    border-color: var(--oomol-primary);
-    color: var(--oomol-primary);
-    background: var(--oomol-primary-bg);
+  &:active {
+    transform: scale(0.95);
   }
 }
 
 // ============================================
-// Section Headers
+// Docker Deployment Section
 // ============================================
-.sectionHeader {
-  text-align: center;
-  margin-bottom: 64px;
+.deploymentSection {
+  padding: 0 24px;
+  max-width: 900px;
+  margin: 0 auto 60px;
 }
 
-.sectionTitle {
-  font-size: 2.75rem;
-  font-weight: 800;
-  color: var(--ifm-heading-color);
-  margin-bottom: 12px;
-  letter-spacing: -0.02em;
-  line-height: 1.2;
+.deploymentCard {
+  background: var(--ifm-background-surface-color);
+  border: 1px solid var(--ifm-color-emphasis-200);
+  border-radius: 16px;
+  padding: 32px;
 }
 
-.sectionSubtitle {
-  font-size: 1.2rem;
-  color: var(--ifm-color-emphasis-700);
-  max-width: 720px;
-  margin: 0 auto;
-  line-height: 1.6;
+.deploymentTitle {
+  margin-bottom: 24px;
+  font-size: 1.8rem;
+  text-align: center;
+  color: var(--ifm-heading-color);
 }
 
-// ============================================
-// 使用场景 - 4列网格
-// ============================================
-.useCasesSection {
-  padding: 100px 32px;
-  background: linear-gradient(
-    180deg,
-    transparent 0%,
-    var(--ifm-color-primary-lightest) 50%,
-    transparent 100%
-  );
+.deploymentCode {
+  background: var(--ifm-pre-background);
+  border-radius: 8px;
+  padding: 16px;
+  overflow-x: auto;
+  margin-bottom: 24px;
+  font-family: "JetBrains Mono", monospace;
+  font-size: 0.9rem;
+  line-height: 1.5;
+  white-space: pre;
+  color: var(--ifm-code-color);
 }
 
-.useCasesGrid {
-  max-width: 1200px;
-  margin: 0 auto;
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-  gap: 24px;
+.deploymentCTA {
+  text-align: center;
 }
 
-.useCaseCard {
-  padding: 32px 24px;
-  background: var(--ifm-background-surface-color);
-  border-radius: 12px;
-  border: 1px solid var(--ifm-color-emphasis-200);
-  transition: all 0.3s ease;
-  text-align: center;
+.deploymentLink {
+  color: var(--oomol-primary);
+  font-weight: 600;
+  font-size: 1.1rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  text-decoration: none;
+  transition: all 0.2s ease;
 
   &:hover {
-    border-color: var(--oomol-primary);
-    box-shadow: 0 8px 24px var(--oomol-primary-bg-hover);
-    transform: translateY(-4px);
+    text-decoration: underline;
+    color: var(--oomol-primary-hover);
   }
 }
 
-.useCaseIcon {
-  font-size: 3rem;
-  margin-bottom: 16px;
+// ============================================
+// Philosophy Section
+// ============================================
+.philosophySection {
+  padding: 80px 24px 100px;
+  max-width: 1200px;
+  margin: 0 auto;
 }
 
-.useCaseTitle {
-  font-size: 1.35rem;
-  font-weight: 700;
-  color: var(--ifm-heading-color);
-  margin-bottom: 12px;
-  line-height: 1.3;
-}
+.philosophyHeader {
+  text-align: center;
+  margin-bottom: 64px;
 
-.useCaseDescription {
-  font-size: 0.95rem;
-  color: var(--ifm-color-emphasis-700);
-  line-height: 1.6;
-  margin: 0;
-}
+  h2 {
+    font-size: 2.5rem;
+    font-weight: 700;
+    margin-bottom: 16px;
+  }
 
-// ============================================
-// 核心功能 - 3列卡片
-// ============================================
-.featuresSection {
-  padding: 100px 32px;
+  p {
+    font-size: 1.2rem;
+    color: var(--ifm-color-emphasis-600);
+    max-width: 600px;
+    margin: 0 auto;
+  }
 }
 
-.featuresGrid {
-  max-width: 1200px;
-  margin: 0 auto;
+.cardGrid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 32px;
 }
 
-.featureCard {
-  padding: 40px;
+.card {
   background: var(--ifm-background-surface-color);
-  border-radius: 16px;
   border: 1px solid var(--ifm-color-emphasis-200);
+  padding: 40px 32px;
+  border-radius: 20px;
   transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
 
   &:hover {
+    transform: translateY(-5px);
     border-color: var(--oomol-primary);
     box-shadow: 0 12px 32px var(--oomol-primary-bg-hover);
-    transform: translateY(-6px);
   }
-}
 
-.featureIcon {
-  font-size: 3rem;
-  margin-bottom: 16px;
-  display: block;
-}
+  h3 {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 16px;
+  }
 
-.featureTitle {
-  font-size: 1.75rem;
-  font-weight: 700;
-  color: var(--ifm-heading-color);
-  margin-bottom: 12px;
-  line-height: 1.3;
+  p {
+    font-size: 1.05rem;
+    line-height: 1.6;
+    color: var(--ifm-color-emphasis-700);
+    margin-bottom: 24px;
+  }
 }
 
-.featureDescription {
-  font-size: 1.05rem;
-  color: var(--ifm-color-emphasis-700);
-  margin-bottom: 20px;
-  line-height: 1.6;
+.cardIcon {
+  font-size: 3rem;
+  margin-bottom: 24px;
 }
 
-.featureList {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-
-  li {
-    padding-left: 24px;
-    margin-bottom: 10px;
-    position: relative;
-    font-size: 0.95rem;
-    color: var(--ifm-color-emphasis-600);
-    line-height: 1.6;
+.cardLink {
+  font-weight: 600;
+  font-size: 1rem;
+  color: var(--oomol-primary);
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
 
-    &::before {
-      content: "→";
-      position: absolute;
-      left: 0;
-      color: var(--oomol-primary);
-      font-weight: 700;
-    }
+  &:hover {
+    text-decoration: underline;
   }
 }
 
 // ============================================
-// 响应式设计
+// CTA Section
 // ============================================
-@media (max-width: 996px) {
-  .hero {
-    padding: 80px 24px 60px;
-  }
+.ctaSection {
+  text-align: center;
+  padding-bottom: 100px;
+}
 
-  .heroTitle {
-    font-size: 3rem;
-  }
+// Button styles matching app page
+.primaryButton,
+.secondaryButton {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 20px;
+  font-size: 14px;
+  font-weight: 500;
+  border-radius: 4px;
+  text-decoration: none;
+  transition: all 0.2s ease;
+  margin: 0 !important;
 
-  .heroDescription {
-    font-size: 1.25rem;
+  i {
+    font-size: 16px;
   }
 
-  .heroStats {
-    gap: 32px;
-  }
+  // Small size
+  &.small {
+    padding: 4px 12px;
+    font-size: 12px;
+    gap: 4px;
 
-  .statValue {
-    font-size: 1.75rem;
+    i {
+      font-size: 14px;
+    }
   }
 
-  .sectionTitle {
-    font-size: 2.25rem;
-  }
+  // Medium size (default)
+  &.medium {
+    padding: 8px 20px;
+    font-size: 14px;
+    gap: 6px;
 
-  .sectionSubtitle {
-    font-size: 1.1rem;
+    i {
+      font-size: 16px;
+    }
   }
 
-  .useCasesSection,
-  .featuresSection {
-    padding: 80px 24px;
+  // Large size
+  &.large {
+    padding: 12px 32px;
+    font-size: 16px;
+    gap: 8px;
+    font-weight: 600;
+
+    i {
+      font-size: 20px;
+    }
   }
+}
 
-  .useCasesGrid {
-    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+.primaryButton {
+  background: var(--oomol-primary);
+  color: var(--oomol-text-inverse);
+  border: none;
+
+  [data-theme="dark"] & {
+    color: var(--oomol-white);
   }
 
-  .featuresGrid {
-    grid-template-columns: 1fr;
+  &:hover {
+    background: var(--oomol-primary-hover);
+    color: var(--oomol-text-inverse) !important;
+
+    [data-theme="dark"] & {
+      color: var(--oomol-white) !important;
+    }
   }
 }
 
-@media (max-width: 768px) {
-  .hero {
-    padding: 60px 20px 40px;
+.secondaryButton {
+  background: inherit;
+  color: var(--oomol-text-primary);
+  border: 1px solid var(--oomol-border-default);
+
+  &:hover {
+    color: var(--oomol-primary) !important;
+    border-color: var(--oomol-primary);
+    background: var(--oomol-primary-bg);
   }
+}
 
-  .heroTitle {
-    font-size: 2.5rem;
+.primaryBtn {
+  display: inline-block;
+  background: var(--oomol-primary);
+  color: white;
+  padding: 16px 48px;
+  font-size: 1.1rem;
+  font-weight: 700;
+  border-radius: 100px;
+  text-decoration: none;
+  transition: all 0.2s ease;
+  box-shadow: 0 8px 24px var(--oomol-primary-bg-hover);
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 12px 32px var(--oomol-primary-bg-hover);
+    color: white;
+    text-decoration: none;
   }
+}
 
-  .heroDescription {
-    font-size: 1.1rem;
+// ============================================
+// Open Source Projects Section
+// ============================================
+.opensourceSection {
+  padding: 100px 32px;
+  background: var(--ifm-background-surface-color);
+  position: relative;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: linear-gradient(
+      90deg,
+      transparent 0%,
+      var(--ifm-color-emphasis-300) 50%,
+      transparent 100%
+    );
   }
+}
 
-  .heroStats {
-    flex-direction: column;
+.sectionHeader {
+  text-align: center;
+  margin-bottom: 48px;
+}
+
+.sectionTitle {
+  font-size: 2.5rem;
+  font-weight: 800;
+  color: var(--ifm-heading-color);
+  margin-bottom: 12px;
+  letter-spacing: -0.02em;
+  line-height: 1.2;
+}
+
+.sectionSubtitle {
+  font-size: 1.2rem;
+  color: var(--ifm-color-emphasis-700);
+  max-width: 720px;
+  margin: 0 auto;
+  line-height: 1.6;
+}
+
+.opensourceDescription {
+  max-width: 900px;
+  margin: 0 auto 64px;
+  font-size: 1.2rem;
+  line-height: 1.8;
+  color: var(--ifm-color-emphasis-700);
+  text-align: center;
+}
+
+.projectsGrid {
+  max-width: 1200px;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 32px;
+
+  @media (max-width: 768px) {
+    grid-template-columns: 1fr;
     gap: 24px;
   }
+}
 
-  .heroCTA {
-    flex-direction: column;
-    align-items: stretch;
+.projectCard {
+  display: flex;
+  flex-direction: column;
+  padding: 40px;
+  background: var(--ifm-background-color);
+  border: 1px solid var(--ifm-color-emphasis-200);
+  border-radius: 16px;
+  text-decoration: none;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: var(--oomol-primary);
+    transform: scaleX(0);
+    transform-origin: left;
+    transition: transform 0.3s ease;
+  }
 
-    .primaryButton,
-    .secondaryButton {
-      width: 100%;
-      text-align: center;
+  &:hover {
+    border-color: var(--oomol-primary);
+    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
+    transform: translateY(-4px);
+
+    &::before {
+      transform: scaleX(1);
     }
-  }
 
-  .sectionTitle {
-    font-size: 2rem;
+    .projectLink {
+      color: var(--oomol-primary);
+      transform: translateX(4px);
+    }
   }
+}
 
-  .sectionSubtitle {
-    font-size: 1rem;
-  }
+.projectTitle {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--ifm-heading-color);
+  margin-bottom: 16px;
+  margin-top: 0;
+}
 
-  .useCasesSection,
-  .featuresSection {
-    padding: 60px 20px;
-  }
+.projectDescription {
+  font-size: 1rem;
+  line-height: 1.6;
+  color: var(--ifm-color-emphasis-700);
+  margin-bottom: 24px;
+  flex: 1;
+}
 
-  .sectionHeader {
-    margin-bottom: 48px;
-  }
+.projectLink {
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--ifm-color-emphasis-600);
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  transition: all 0.3s ease;
+  align-self: flex-start;
+}
 
-  .useCasesGrid {
-    grid-template-columns: 1fr;
+// ============================================
+// Responsive
+// ============================================
+@media (max-width: 996px) {
+  .opensourceSection {
+    padding: 80px 24px;
   }
+}
 
-  .useCaseTitle {
-    font-size: 1.25rem;
+@media (max-width: 768px) {
+  .projectCard {
+    padding: 28px;
   }
-
-  .featureTitle {
-    font-size: 1.5rem;
+  .opensourceDescription {
+    font-size: 1.1rem;
   }
 }
diff --git a/src/pages/pricing/index.tsx b/src/pages/pricing/index.tsx
index c5744a6b..d06a6682 100644
--- a/src/pages/pricing/index.tsx
+++ b/src/pages/pricing/index.tsx
@@ -88,10 +88,7 @@ export default function Index() {
             </div>
 
             {/* 标准版 */}
-            <div className={`${styles.planCard} ${styles.recommended}`}>
-              <div className={styles.badge}>
-                {translate({ message: "PRICING.subscription.recommended" })}
-              </div>
+            <div className={styles.planCard}>
               <div className={styles.planHeader}>
                 <div className={styles.planName}>
                   {translate({ message: "PRICING.subscription.standard.name" })}
@@ -166,7 +163,10 @@ export default function Index() {
             </div>
 
             {/* 专业版 */}
-            <div className={styles.planCard}>
+            <div className={`${styles.planCard} ${styles.recommended}`}>
+              <div className={styles.badge}>
+                {translate({ message: "PRICING.subscription.recommended" })}
+              </div>
               <div className={styles.planHeader}>
                 <div className={styles.planName}>
                   {translate({ message: "PRICING.subscription.pro.name" })}
diff --git a/src/pages/pricing/styles.module.scss b/src/pages/pricing/styles.module.scss
index 744b5ef0..bb0a1c01 100644
--- a/src/pages/pricing/styles.module.scss
+++ b/src/pages/pricing/styles.module.scss
@@ -160,7 +160,11 @@
 
 .subscribeBtn {
   width: 100%;
+  height: 43px;
   margin-bottom: 32px;
+  border-radius: 4px;
+  font-size: 18px;
+  font-weight: 500;
   background-color: var(--oomol-primary) !important;
   border-color: var(--oomol-primary) !important;
   color: white !important;
diff --git a/src/pages/studio/index.tsx b/src/pages/studio/index.tsx
index 4ab32eab..263473e8 100644
--- a/src/pages/studio/index.tsx
+++ b/src/pages/studio/index.tsx
@@ -1,274 +1,140 @@
 import styles from "./styles.module.scss";
 
 import { translate } from "@docusaurus/Translate";
-import { FeatureBlockList } from "@site/src/components/FeatureBlockList/FeatureBlockList";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import { DownloadButton } from "@site/src/components/DownloadButton";
 import { GetStartedPrompt } from "@site/src/components/GetStartedPrompt";
-import StudioPdfCraftCase from "@site/src/components/StudioPdfCraftCase";
-
-import Layout from "../../theme/Layout";
-
-// 开发者工作流数据
-const developerWorkflow = {
-  steps: [
-    {
-      number: "1",
-      title: translate({ message: "STUDIO.workflow.step1.title" }),
-      description: translate({ message: "STUDIO.workflow.step1.description" }),
-      features: [
-        translate({ message: "STUDIO.workflow.step1.feature1" }),
-        translate({ message: "STUDIO.workflow.step1.feature2" }),
-      ],
-    },
-    {
-      number: "2",
-      title: translate({ message: "STUDIO.workflow.step2.title" }),
-      description: translate({ message: "STUDIO.workflow.step2.description" }),
-      features: [
-        translate({ message: "STUDIO.workflow.step2.feature1" }),
-        translate({ message: "STUDIO.workflow.step2.feature2" }),
-      ],
-    },
-    {
-      number: "3",
-      title: translate({ message: "STUDIO.workflow.step3.title" }),
-      description: translate({ message: "STUDIO.workflow.step3.description" }),
-      features: [
-        translate({ message: "STUDIO.workflow.step3.feature1" }),
-        translate({ message: "STUDIO.workflow.step3.feature2" }),
-      ],
-    },
-    {
-      number: "4",
-      title: translate({ message: "STUDIO.workflow.step4.title" }),
-      description: translate({ message: "STUDIO.workflow.step4.description" }),
-      features: [
-        translate({ message: "STUDIO.workflow.step4.feature1" }),
-        translate({ message: "STUDIO.workflow.step4.feature2" }),
-        translate({ message: "STUDIO.workflow.step4.feature3" }),
-      ],
-    },
-  ],
-};
-
-// 核心优势数据
-const coreAdvantages = [
-  {
-    icon: "💻",
-    title: translate({ message: "STUDIO.advantages.vscode.title" }),
-    description: translate({ message: "STUDIO.advantages.vscode.description" }),
-    features: [
-      translate({ message: "STUDIO.advantages.vscode.feature1" }),
-      translate({ message: "STUDIO.advantages.vscode.feature2" }),
-      translate({ message: "STUDIO.advantages.vscode.feature3" }),
-    ],
-  },
-  {
-    icon: "🔗",
-    title: translate({ message: "STUDIO.advantages.p2p.title" }),
-    description: translate({ message: "STUDIO.advantages.p2p.description" }),
-    features: [
-      translate({ message: "STUDIO.advantages.p2p.feature1" }),
-      translate({ message: "STUDIO.advantages.p2p.feature2" }),
-      translate({ message: "STUDIO.advantages.p2p.feature3" }),
-    ],
-  },
-  {
-    icon: "🚀",
-    title: translate({ message: "STUDIO.advantages.api.title" }),
-    description: translate({ message: "STUDIO.advantages.api.description" }),
-    features: [
-      translate({ message: "STUDIO.advantages.api.feature1" }),
-      translate({ message: "STUDIO.advantages.api.feature2" }),
-      translate({ message: "STUDIO.advantages.api.feature3" }),
-    ],
-  },
-];
-
-// AI 集成能力数据
-const aiCapabilities = {
-  title: translate({ message: "STUDIO.ai.title" }),
-  description: translate({ message: "STUDIO.ai.description" }),
-  features: [
-    {
-      icon: "🤖",
-      content: translate({ message: "STUDIO.ai.feature1" }),
-    },
-    {
-      icon: "🎨",
-      content: translate({ message: "STUDIO.ai.feature2" }),
-    },
-    {
-      icon: "🎤",
-      content: translate({ message: "STUDIO.ai.feature3" }),
-    },
-    {
-      icon: "⚡",
-      content: translate({ message: "STUDIO.ai.feature4" }),
-    },
-  ],
-};
-
-// 工作流步骤组件
-const WorkflowStep = ({
-  step,
-}: {
-  step: (typeof developerWorkflow.steps)[0];
-  index: number;
-}) => {
-  return (
-    <div className={styles.workflowStep}>
-      <div className={styles.stepNumber}>{step.number}</div>
-      <div className={styles.stepContent}>
-        <h3 className={styles.stepTitle}>{step.title}</h3>
-        <p className={styles.stepDescription}>{step.description}</p>
-        <ul className={styles.stepFeatures}>
-          {step.features.map((feature, idx) => (
-            <li key={idx}>{feature}</li>
-          ))}
-        </ul>
-      </div>
-    </div>
-  );
-};
-
-// 核心优势卡片组件
-const AdvantageCard = ({
-  advantage,
-}: {
-  advantage: (typeof coreAdvantages)[0];
-}) => {
-  return (
-    <div className={styles.advantageCard}>
-      <div className={styles.advantageIcon}>{advantage.icon}</div>
-      <h3 className={styles.advantageTitle}>{advantage.title}</h3>
-      <p className={styles.advantageDescription}>{advantage.description}</p>
-      <ul className={styles.advantageFeatures}>
-        {advantage.features.map((feature, idx) => (
-          <li key={idx}>{feature}</li>
-        ))}
-      </ul>
-    </div>
-  );
-};
-
-// AI 能力卡片组件
-const AICapabilityCard = ({
-  capability,
-}: {
-  capability: (typeof aiCapabilities.features)[0];
-}) => {
-  return (
-    <div className={styles.aiCapabilityCard}>
-      <span className={styles.aiIcon}>{capability.icon}</span>
-      <span className={styles.aiContent}>{capability.content}</span>
-    </div>
-  );
-};
+import Layout from "@theme/Layout";
+import ThemedImage from "@theme/ThemedImage";
+import React from "react";
 
 export default function StudioPage() {
   return (
-    <Layout>
+    <Layout
+      title={translate({ message: "STUDIO.page.title" })}
+      description={translate({ message: "STUDIO.page.description" })}
+    >
       <div className={styles.container}>
-        {/* Hero 区域 */}
-        <div className={styles.hero}>
-          <h1 className={styles.heroTitle}>OOMOL Studio</h1>
-          <p className={styles.heroDescription}>
-            {translate({ message: "STUDIO.hero.description" })}
+        {/* 1. Header / Manifesto Title */}
+        <header className={styles.manifestHeader}>
+          <h1 className={styles.title}>
+            {translate({ message: "STUDIO.manifesto.title" })}
+          </h1>
+          <p className={styles.subtitle}>
+            {translate({ message: "STUDIO.manifesto.subtitle" })}
           </p>
-
-          {/* 数据亮点 */}
-          <div className={styles.heroStats}>
-            <div className={styles.stat}>
-              <span className={styles.statValue}>20+</span>
-              <span className={styles.statLabel}>
-                {translate({ message: "STUDIO.hero.stat1" })}
-              </span>
-            </div>
-            <div className={styles.stat}>
-              <span className={styles.statValue}>3 分钟</span>
-              <span className={styles.statLabel}>
-                {translate({ message: "STUDIO.hero.stat2" })}
-              </span>
-            </div>
-            <div className={styles.stat}>
-              <span className={styles.statValue}>P2P</span>
-              <span className={styles.statLabel}>
-                {translate({ message: "STUDIO.hero.stat3" })}
-              </span>
-            </div>
+          <div className={styles.headerCTA}>
+            <DownloadButton />
           </div>
-
-          {/* 双 CTA */}
-          <div className={styles.heroCTA}>
-            <a href="/downloads" className={styles.primaryButton}>
-              {translate({ message: "STUDIO.hero.cta.download" })}
-            </a>
-            <a href="/docs" className={styles.secondaryButton}>
-              {translate({ message: "STUDIO.hero.cta.docs" })}
-            </a>
+        </header>
+
+        {/* Hero Image */}
+        <section className={styles.heroImageSection}>
+          <div className={styles.heroImageWrapper}>
+            <ThemedImage
+              sources={{
+                light: useBaseUrl("/img/pages/studio/studio-light.png"),
+                dark: useBaseUrl("/img/pages/studio/studio-dark.png"),
+              }}
+              alt="OOMOL Studio"
+              className={styles.heroImage}
+            />
           </div>
-        </div>
+        </section>
 
-        {/* 开发者工作流 */}
-        <section className={styles.workflowSection}>
-          <div className={styles.sectionHeader}>
-            <h2 className={styles.sectionTitle}>
-              {translate({ message: "STUDIO.workflow.title" })}
-            </h2>
-            <p className={styles.sectionSubtitle}>
-              {translate({ message: "STUDIO.workflow.subtitle" })}
+        {/* 2. The Story (The "Why") */}
+        <section className={styles.storySection}>
+          <p>{translate({ message: "STUDIO.story.paragraph1" })}</p>
+
+          <div className={styles.frustrationBlock}>
+            <p>
+              {translate({ message: "STUDIO.story.frustration.line1" })}
+              <br />
+              <br />
+              {translate({ message: "STUDIO.story.frustration.line2" })}
+              <br />
+              <br />
+              {translate({ message: "STUDIO.story.frustration.line3" })}
             </p>
           </div>
-          <div className={styles.workflowSteps}>
-            {developerWorkflow.steps.map((step, index) => (
-              <WorkflowStep key={index} step={step} index={index} />
-            ))}
-          </div>
-        </section>
 
-        {/* 核心差异化优势 */}
-        <section className={styles.advantagesSection}>
-          <div className={styles.sectionHeader}>
-            <h2 className={styles.sectionTitle}>
-              {translate({ message: "STUDIO.advantages.title" })}
-            </h2>
-          </div>
-          <div className={styles.advantagesGrid}>
-            {coreAdvantages.map((advantage, index) => (
-              <AdvantageCard key={index} advantage={advantage} />
-            ))}
-          </div>
+          <p>{translate({ message: "STUDIO.story.paragraph2" })}</p>
+          <p>{translate({ message: "STUDIO.story.paragraph3" })}</p>
         </section>
 
-        {/* AI 集成能力 */}
-        <section className={styles.aiSection}>
-          <div className={styles.sectionHeader}>
-            <h2 className={styles.sectionTitle}>{aiCapabilities.title}</h2>
-            <p className={styles.sectionSubtitle}>
-              {aiCapabilities.description}
-            </p>
+        {/* 3. The Principles (The "How") */}
+        <section className={styles.principlesSection}>
+          <div className={styles.principlesHeader}>
+            <h2>{translate({ message: "STUDIO.principles.header" })}</h2>
           </div>
-          <div className={styles.aiCapabilitiesGrid}>
-            {aiCapabilities.features.map((capability, index) => (
-              <AICapabilityCard key={index} capability={capability} />
-            ))}
+
+          {/* Principle 1 */}
+          <div className={styles.principleItem}>
+            <div className={styles.principleText}>
+              <h3>{translate({ message: "STUDIO.principle1.title" })}</h3>
+              <p>{translate({ message: "STUDIO.principle1.paragraph1" })}</p>
+              <p>{translate({ message: "STUDIO.principle1.paragraph2" })}</p>
+              <p>{translate({ message: "STUDIO.principle1.paragraph3" })}</p>
+            </div>
+            <div className={styles.principleVisual}>
+              <div className={styles.principleImageWrapper}>
+                <ThemedImage
+                  sources={{
+                    light: useBaseUrl("/img/pages/studio/code-light.png"),
+                    dark: useBaseUrl("/img/pages/studio/code-dark.png"),
+                  }}
+                  alt="Code as Truth"
+                  className={styles.principleImage}
+                />
+              </div>
+            </div>
           </div>
-        </section>
 
-        {/* PDF-Craft 实战案例 */}
-        <StudioPdfCraftCase />
+          {/* Principle 2 */}
+          <div className={styles.principleItem}>
+            <div className={styles.principleText}>
+              <h3>{translate({ message: "STUDIO.principle2.title" })}</h3>
+              <p>{translate({ message: "STUDIO.principle2.paragraph1" })}</p>
+              <p>{translate({ message: "STUDIO.principle2.paragraph2" })}</p>
+              <p>{translate({ message: "STUDIO.principle2.paragraph3" })}</p>
+            </div>
+            <div className={styles.principleVisual}>
+              <div className={styles.principleImageWrapper}>
+                <ThemedImage
+                  sources={{
+                    light: useBaseUrl("/img/pages/studio/edit-light.png"),
+                    dark: useBaseUrl("/img/pages/studio/edit-dark.png"),
+                  }}
+                  alt="Respect Toolchain"
+                  className={styles.principleImage}
+                />
+              </div>
+            </div>
+          </div>
 
-        {/* 技术特性快览 */}
-        <section className={styles.techFeaturesSection}>
-          <div className={styles.sectionHeader}>
-            <h2 className={styles.sectionTitle}>
-              {translate({ message: "STUDIO.techFeatures.title" })}
-            </h2>
+          {/* Principle 3 */}
+          <div className={styles.principleItem}>
+            <div className={styles.principleText}>
+              <h3>{translate({ message: "STUDIO.principle3.title" })}</h3>
+              <p>{translate({ message: "STUDIO.principle3.paragraph1" })}</p>
+              <p>{translate({ message: "STUDIO.principle3.paragraph2" })}</p>
+              <p>{translate({ message: "STUDIO.principle3.paragraph3" })}</p>
+            </div>
+            <div className={styles.principleVisual}>
+              <div className={styles.principleImageWrapper}>
+                <ThemedImage
+                  sources={{
+                    light: useBaseUrl("/img/pages/studio/package-light.png"),
+                    dark: useBaseUrl("/img/pages/studio/package-dark.png"),
+                  }}
+                  alt="No Artificial Limits"
+                  className={styles.principleImage}
+                />
+              </div>
+            </div>
           </div>
-          <FeatureBlockList />
         </section>
 
-        {/* CTA 区域 */}
         <GetStartedPrompt />
       </div>
     </Layout>
diff --git a/src/pages/studio/styles.module.scss b/src/pages/studio/styles.module.scss
index 38b8d84b..b8a6c41a 100644
--- a/src/pages/studio/styles.module.scss
+++ b/src/pages/studio/styles.module.scss
@@ -1,462 +1,212 @@
 @use "../../css/custom.scss" as *;
 
-// ============================================
-// Container
-// ============================================
 .container {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 0;
+  width: 100%;
   background: var(--ifm-background-color);
+  color: var(--ifm-font-color-base);
 }
 
-// ============================================
-// Hero 区域 - Vercel 风格极简设计
-// ============================================
-.hero {
+// 1. Header Section
+.manifestHeader {
+  padding: 120px 24px 80px;
   text-align: center;
-  padding: 120px 32px 100px;
-  background: var(--ifm-background-color);
-  position: relative;
+  max-width: 900px;
+  margin: 0 auto;
+
+  @include respond-to(md) {
+    padding: 80px 20px 60px;
+  }
 }
 
-.heroTitle {
+.title {
   font-size: 4rem;
   font-weight: 800;
-  margin-bottom: 1.5rem;
-  letter-spacing: -0.03em;
   line-height: 1.1;
-  color: var(--oomol-primary);
+  margin-bottom: 32px;
+  letter-spacing: -0.03em;
+  color: var(--ifm-heading-color);
+
+  @include respond-to(md) {
+    font-size: 2.5rem;
+  }
 }
 
-.heroDescription {
+.subtitle {
   font-size: 1.5rem;
-  color: var(--ifm-color-emphasis-700);
-  max-width: 720px;
-  margin: 0 auto 3rem;
-  line-height: 1.6;
+  color: var(--ifm-color-emphasis-600);
   font-weight: 400;
-}
-
-// 数据亮点
-.heroStats {
-  display: flex;
-  justify-content: center;
-  gap: 48px;
-  margin-bottom: 3rem;
-  flex-wrap: wrap;
-}
-
-.stat {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-}
-
-.statValue {
-  font-size: 2rem;
-  font-weight: 700;
-  color: var(--oomol-primary);
-}
+  line-height: 1.6;
+  max-width: 700px;
+  margin: 0 auto;
 
-.statLabel {
-  font-size: 0.9rem;
-  color: var(--ifm-color-emphasis-600);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
+  @include respond-to(md) {
+    font-size: 1.2rem;
+  }
 }
 
-// CTA 按钮
-.heroCTA {
+.headerCTA {
   display: flex;
   justify-content: center;
-  gap: 16px;
-  flex-wrap: wrap;
-}
-
-.primaryButton,
-.secondaryButton {
-  padding: 14px 32px;
-  font-size: 1rem;
-  font-weight: 600;
-  border-radius: 8px;
-  text-decoration: none;
-  transition: all 0.2s ease;
-  display: inline-block;
+  margin-top: 40px;
 }
 
-.primaryButton {
-  background: var(--oomol-primary);
-  color: white;
-  border: none;
-
-  &:hover {
-    background: var(--oomol-primary-hover);
-    transform: translateY(-2px);
-    box-shadow: 0 8px 24px var(--oomol-primary-bg-hover);
-    color: white;
-  }
-}
-
-.secondaryButton {
-  background: transparent;
-  color: var(--ifm-color-emphasis-800);
-  border: 1.5px solid var(--ifm-color-emphasis-300);
+// Hero Image Section
+.heroImageSection {
+  max-width: 1200px;
+  margin: 0 auto 100px;
+  padding: 0 24px;
 
-  &:hover {
-    border-color: var(--ifm-color-primary);
-    color: var(--ifm-color-primary);
-    background: var(--ifm-color-primary-lightest);
+  @include respond-to(md) {
+    margin-bottom: 80px;
   }
 }
 
-// ============================================
-// Section Headers - 清晰的层次结构
-// ============================================
-.sectionHeader {
-  text-align: center;
-  margin-bottom: 64px;
-}
-
-.sectionTitle {
-  font-size: 2.75rem;
-  font-weight: 800;
-  color: var(--ifm-heading-color);
-  margin-bottom: 12px;
-  letter-spacing: -0.02em;
-  line-height: 1.2;
+.heroImageWrapper {
+  width: 100%;
 }
 
-.sectionSubtitle {
-  font-size: 1.2rem;
-  color: var(--ifm-color-emphasis-700);
-  max-width: 720px;
-  margin: 0 auto;
-  line-height: 1.6;
-}
-
-// ============================================
-// 工作流步骤 - 流程化展示
-// ============================================
-.workflowSection {
-  padding: 100px 32px;
-  background: linear-gradient(
-    180deg,
-    transparent 0%,
-    var(--ifm-color-primary-lightest) 50%,
-    transparent 100%
-  );
-}
-
-.workflowSteps {
-  max-width: 1200px;
-  margin: 0 auto;
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 32px;
-}
-
-.workflowStep {
-  position: relative;
-  padding: 32px;
-  background: var(--ifm-background-surface-color);
+.heroImage {
+  width: 100%;
+  height: auto;
+  display: block;
   border-radius: 12px;
+  overflow: hidden;
+  background: var(--ifm-background-surface-color);
   border: 1px solid var(--ifm-color-emphasis-200);
-  transition: all 0.3s ease;
-
-  &:hover {
-    border-color: var(--ifm-color-primary);
-    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.12);
-    transform: translateY(-4px);
-  }
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 }
 
-.stepNumber {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
-  background: var(--oomol-primary);
-  color: white;
-  font-size: 1.5rem;
-  font-weight: 700;
-  margin-bottom: 16px;
-}
-
-.stepTitle {
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: var(--ifm-heading-color);
-  margin-bottom: 12px;
-  line-height: 1.3;
-}
+// 2. Story Section (The Why)
+.storySection {
+  max-width: 800px;
+  margin: 0 auto 120px;
+  padding: 0 24px;
 
-.stepDescription {
-  font-size: 1rem;
-  color: var(--ifm-color-emphasis-700);
-  margin-bottom: 16px;
-  line-height: 1.6;
-}
-
-.stepFeatures {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-
-  li {
-    padding-left: 24px;
-    margin-bottom: 8px;
-    position: relative;
-    font-size: 0.95rem;
-    color: var(--ifm-color-emphasis-600);
-    line-height: 1.5;
-
-    &::before {
-      content: "✓";
-      position: absolute;
-      left: 0;
-      color: var(--oomol-primary);
-      font-weight: 700;
-    }
+  p {
+    font-size: 1.25rem;
+    line-height: 1.8;
+    color: var(--ifm-color-emphasis-800);
+    margin-bottom: 24px;
   }
-}
 
-// ============================================
-// 核心优势 - 卡片网格
-// ============================================
-.advantagesSection {
-  padding: 100px 32px;
-}
-
-.advantagesGrid {
-  max-width: 1200px;
-  margin: 0 auto;
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-  gap: 32px;
+  h2 {
+    font-size: 2rem;
+    margin-top: 60px;
+    margin-bottom: 32px;
+    font-weight: 700;
+  }
 }
 
-.advantageCard {
-  padding: 40px;
+.frustrationBlock {
   background: var(--ifm-background-surface-color);
-  border-radius: 16px;
-  border: 1px solid var(--ifm-color-emphasis-200);
-  transition: all 0.3s ease;
+  border-left: 4px solid var(--ifm-color-primary);
+  padding: 32px;
+  margin: 40px 0;
+  border-radius: 0 16px 16px 0;
 
-  &:hover {
-    border-color: var(--ifm-color-primary);
-    box-shadow: 0 12px 32px rgba(99, 102, 241, 0.15);
-    transform: translateY(-6px);
+  p {
+    font-size: 1.1rem;
+    margin-bottom: 0;
+    color: var(--ifm-color-emphasis-700);
+    font-style: italic;
   }
 }
 
-.advantageIcon {
-  font-size: 3rem;
-  margin-bottom: 16px;
-  display: block;
-}
-
-.advantageTitle {
-  font-size: 1.75rem;
-  font-weight: 700;
-  color: var(--ifm-heading-color);
-  margin-bottom: 12px;
-  line-height: 1.3;
-}
-
-.advantageDescription {
-  font-size: 1.05rem;
-  color: var(--ifm-color-emphasis-700);
-  margin-bottom: 20px;
-  line-height: 1.6;
+// 3. Principles Section (The How)
+.principlesSection {
+  background: var(--ifm-background-surface-color);
+  padding: 120px 24px;
 }
 
-.advantageFeatures {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-
-  li {
-    padding-left: 24px;
-    margin-bottom: 10px;
-    position: relative;
-    font-size: 0.95rem;
-    color: var(--ifm-color-emphasis-600);
-    line-height: 1.6;
+.principlesHeader {
+  text-align: center;
+  max-width: 800px;
+  margin: 0 auto 80px;
 
-    &::before {
-      content: "→";
-      position: absolute;
-      left: 0;
-      color: var(--oomol-primary);
-      font-weight: 700;
-    }
+  h2 {
+    font-size: 2.5rem;
+    font-weight: 800;
+    margin-bottom: 24px;
   }
 }
 
-// ============================================
-// AI 能力 - 简洁网格
-// ============================================
-.aiSection {
-  padding: 100px 32px;
-  background: linear-gradient(
-    180deg,
-    transparent 0%,
-    var(--ifm-color-primary-lightest) 50%,
-    transparent 100%
-  );
-}
-
-.aiCapabilitiesGrid {
-  max-width: 1000px;
-  margin: 0 auto;
+.principleItem {
+  max-width: 1200px;
+  margin: 0 auto 160px;
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-  gap: 24px;
-}
-
-.aiCapabilityCard {
-  display: flex;
+  grid-template-columns: 1fr 1fr;
+  gap: 80px;
   align-items: center;
-  gap: 16px;
-  padding: 24px;
-  background: var(--ifm-background-surface-color);
-  border-radius: 12px;
-  border: 1px solid var(--ifm-color-emphasis-200);
-  transition: all 0.2s ease;
-
-  &:hover {
-    border-color: var(--ifm-color-primary);
-    transform: translateX(4px);
-  }
-}
-
-.aiIcon {
-  font-size: 2rem;
-  flex-shrink: 0;
-}
-
-.aiContent {
-  font-size: 0.95rem;
-  color: var(--ifm-color-emphasis-700);
-  line-height: 1.5;
-}
-
-// ============================================
-// 技术特性区域
-// ============================================
-.techFeaturesSection {
-  padding: 100px 32px;
-}
-
-// ============================================
-// 响应式设计
-// ============================================
-@media (max-width: 996px) {
-  .hero {
-    padding: 80px 24px 60px;
-  }
-
-  .heroTitle {
-    font-size: 3rem;
-  }
-
-  .heroDescription {
-    font-size: 1.25rem;
-  }
-
-  .heroStats {
-    gap: 32px;
-  }
 
-  .statValue {
-    font-size: 1.75rem;
+  &:last-child {
+    margin-bottom: 0;
   }
 
-  .sectionTitle {
-    font-size: 2.25rem;
-  }
-
-  .sectionSubtitle {
-    font-size: 1.1rem;
-  }
-
-  .workflowSection,
-  .advantagesSection,
-  .aiSection,
-  .techFeaturesSection {
-    padding: 80px 24px;
-  }
-
-  .workflowSteps {
-    grid-template-columns: 1fr;
-  }
-
-  .advantagesGrid {
-    grid-template-columns: 1fr;
-  }
-
-  .aiCapabilitiesGrid {
+  @include respond-to(md) {
     grid-template-columns: 1fr;
+    gap: 40px;
+    margin-bottom: 100px;
   }
 }
 
-@media (max-width: 768px) {
-  .hero {
-    padding: 60px 20px 40px;
+.principleText {
+  h3 {
+    font-size: 2rem;
+    font-weight: 700;
+    margin-bottom: 24px;
+    color: var(--oomol-primary);
   }
 
-  .heroTitle {
-    font-size: 2.5rem;
+  p {
+    font-size: 1.15rem;
+    line-height: 1.7;
+    color: var(--ifm-color-emphasis-700);
+    margin-bottom: 24px;
   }
+}
 
-  .heroDescription {
-    font-size: 1.1rem;
-  }
+.principleVisual {
+  width: 100%;
 
-  .heroStats {
-    flex-direction: column;
-    gap: 24px;
+  pre {
+    margin: 0;
+    background: transparent;
+    padding: 0;
   }
+}
 
-  .heroCTA {
-    flex-direction: column;
-    align-items: stretch;
-
-    .primaryButton,
-    .secondaryButton {
-      width: 100%;
-      text-align: center;
-    }
-  }
+.principleImageWrapper {
+  width: 100%;
+}
 
-  .sectionTitle {
-    font-size: 2rem;
-  }
+.principleImage {
+  width: 100%;
+  height: auto;
+  display: block;
+  border-radius: 12px;
+  overflow: hidden;
+  background: var(--ifm-background-surface-color);
+  border: 1px solid var(--ifm-color-emphasis-200);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+}
 
-  .sectionSubtitle {
-    font-size: 1rem;
-  }
+// 4. Conclusion
+.conclusionSection {
+  padding: 120px 24px;
+  text-align: center;
+  max-width: 800px;
+  margin: 0 auto;
 
-  .workflowSection,
-  .advantagesSection,
-  .aiSection,
-  .techFeaturesSection {
-    padding: 60px 20px;
+  h2 {
+    font-size: 2.5rem;
+    font-weight: 800;
+    margin-bottom: 32px;
   }
 
-  .sectionHeader {
+  p {
+    font-size: 1.25rem;
+    line-height: 1.6;
+    color: var(--ifm-color-emphasis-700);
     margin-bottom: 48px;
   }
-
-  .stepTitle {
-    font-size: 1.35rem;
-  }
-
-  .advantageTitle {
-    font-size: 1.5rem;
-  }
 }
diff --git a/src/theme/Layout/index.tsx b/src/theme/Layout/index.tsx
index 2c9f40d6..4f517565 100644
--- a/src/theme/Layout/index.tsx
+++ b/src/theme/Layout/index.tsx
@@ -4,15 +4,13 @@ import "vanilla-cookieconsent/dist/cookieconsent.css";
 
 import type { ReactNode } from "react";
 
+import BrowserOnly from "@docusaurus/BrowserOnly";
+import { CookieConsentComponent } from "@site/src/components/CookieConsent/CookieConsentComponent";
 import Footer from "@theme/Footer";
 import LayoutProvider from "@theme/Layout/Provider";
 import Navbar from "@theme/Navbar";
 import { clsx } from "clsx";
-import React, { useEffect } from "react";
-import BrowserOnly from "@docusaurus/BrowserOnly";
-import { CookieConsentComponent } from "@site/src/components/CookieConsent/CookieConsentComponent";
-import { pluginConfig } from "@site/src/components/CookieConsent/cookieConsentConfig";
-import CookieConsent from "vanilla-cookieconsent";
+import React from "react";
 
 interface LayoutProps {
   children: ReactNode;
diff --git a/src/theme/Navbar/index.tsx b/src/theme/Navbar/index.tsx
index 96638799..32e3bef5 100644
--- a/src/theme/Navbar/index.tsx
+++ b/src/theme/Navbar/index.tsx
@@ -166,25 +166,34 @@ const NavbarComponent: React.FC<NavbarProps> = memo(() => {
             <NavbarItem {...item} key={i} />
           ))}
           <div className={styles.actions}>
-            <Link to="/downloads" className={styles.downloadButton}>
-              <i className="i-lucide-download" />
-              {translate({ message: "Theme.Navbar.download" })}
+            <Link to="https://hub.oomol.com" className={styles.downloadButton}>
+              <i className="i-lucide-globe" />
+              {translate({ message: "Theme.Navbar.community" })}
             </Link>
             <BrowserOnly
               fallback={
                 <a className={styles.loginButton}>
+                  <i className="i-lucide-log-in" />
                   {translate({ message: "Theme.Navbar.login" })}
                 </a>
               }
             >
               {() => {
+                const signedIn = isSignedIn();
                 return (
                   <a
                     className={styles.loginButton}
                     onClick={() => handleSignin()}
                   >
+                    <i
+                      className={
+                        signedIn
+                          ? "i-lucide-layout-dashboard"
+                          : "i-lucide-log-in"
+                      }
+                    />
                     {translate({
-                      message: isSignedIn()
+                      message: signedIn
                         ? "Theme.Navbar.console"
                         : "Theme.Navbar.login",
                     })}
diff --git a/static/img/pages/app/applet-dark.png b/static/img/pages/app/applet-dark.png
new file mode 100644
index 00000000..de0672c8
Binary files /dev/null and b/static/img/pages/app/applet-dark.png differ
diff --git a/static/img/pages/app/applet-light.png b/static/img/pages/app/applet-light.png
new file mode 100644
index 00000000..7e89dfd8
Binary files /dev/null and b/static/img/pages/app/applet-light.png differ
diff --git a/static/img/pages/app/chat-dark.png b/static/img/pages/app/chat-dark.png
new file mode 100644
index 00000000..5afb4c77
Binary files /dev/null and b/static/img/pages/app/chat-dark.png differ
diff --git a/static/img/pages/app/chat-light.png b/static/img/pages/app/chat-light.png
new file mode 100644
index 00000000..a43d8641
Binary files /dev/null and b/static/img/pages/app/chat-light.png differ
diff --git a/static/img/pages/cloud/ai-chat-dark.png b/static/img/pages/cloud/ai-chat-dark.png
new file mode 100644
index 00000000..56feac32
Binary files /dev/null and b/static/img/pages/cloud/ai-chat-dark.png differ
diff --git a/static/img/pages/cloud/ai-chat-light.png b/static/img/pages/cloud/ai-chat-light.png
new file mode 100644
index 00000000..938d3264
Binary files /dev/null and b/static/img/pages/cloud/ai-chat-light.png differ
diff --git a/static/img/pages/cloud/create-api-dark.png b/static/img/pages/cloud/create-api-dark.png
new file mode 100644
index 00000000..21e48558
Binary files /dev/null and b/static/img/pages/cloud/create-api-dark.png differ
diff --git a/static/img/pages/cloud/create-api-light.png b/static/img/pages/cloud/create-api-light.png
new file mode 100644
index 00000000..4c8a140b
Binary files /dev/null and b/static/img/pages/cloud/create-api-light.png differ
diff --git a/static/img/pages/cloud/publish-dark.png b/static/img/pages/cloud/publish-dark.png
new file mode 100644
index 00000000..f45f833e
Binary files /dev/null and b/static/img/pages/cloud/publish-dark.png differ
diff --git a/static/img/pages/cloud/publish-light.png b/static/img/pages/cloud/publish-light.png
new file mode 100644
index 00000000..e2533576
Binary files /dev/null and b/static/img/pages/cloud/publish-light.png differ
diff --git a/static/img/pages/headless/docker-deploy.svg b/static/img/pages/headless/docker-deploy.svg
deleted file mode 100644
index 63eb58be..00000000
--- a/static/img/pages/headless/docker-deploy.svg
+++ /dev/null
@@ -1,52 +0,0 @@
-<svg width="800" height="600" viewBox="0 0 800 600" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <!-- Background -->
-  <rect width="800" height="600" fill="#0B0B0B"/>
-
-  <!-- Grid pattern -->
-  <defs>
-    <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
-      <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#1F1F1F" stroke-width="1"/>
-    </pattern>
-  </defs>
-  <rect width="800" height="600" fill="url(#grid)"/>
-
-  <!-- Docker logo style container -->
-  <g transform="translate(200, 150)">
-    <!-- Main container boxes -->
-    <rect x="0" y="80" width="60" height="50" fill="#06B6D4" opacity="0.3" rx="4"/>
-    <rect x="70" y="80" width="60" height="50" fill="#06B6D4" opacity="0.4" rx="4"/>
-    <rect x="140" y="80" width="60" height="50" fill="#06B6D4" opacity="0.5" rx="4"/>
-    <rect x="210" y="80" width="60" height="50" fill="#06B6D4" opacity="0.6" rx="4"/>
-
-    <rect x="70" y="20" width="60" height="50" fill="#06B6D4" opacity="0.5" rx="4"/>
-    <rect x="140" y="20" width="60" height="50" fill="#06B6D4" opacity="0.6" rx="4"/>
-
-    <rect x="140" y="-40" width="60" height="50" fill="#06B6D4" opacity="0.7" rx="4"/>
-
-    <!-- Docker text -->
-    <text x="135" y="180" fill="#06B6D4" font-family="monospace" font-size="24" font-weight="bold" text-anchor="middle">Docker</text>
-  </g>
-
-  <!-- Terminal window -->
-  <g transform="translate(100, 320)">
-    <rect width="600" height="200" fill="#1F1F1F" rx="8" stroke="#06B6D4" stroke-width="2"/>
-
-    <!-- Terminal header -->
-    <rect width="600" height="30" fill="#252525" rx="8"/>
-    <circle cx="15" cy="15" r="5" fill="#FF5F56"/>
-    <circle cx="35" cy="15" r="5" fill="#FFBD2E"/>
-    <circle cx="55" cy="15" r="5" fill="#27C93F"/>
-
-    <!-- Terminal content -->
-    <text x="20" y="60" fill="#06B6D4" font-family="monospace" font-size="14">$ docker pull oomol/headless:latest</text>
-    <text x="20" y="85" fill="#0891B2" font-family="monospace" font-size="14">latest: Pulling from oomol/headless</text>
-    <text x="20" y="110" fill="#0891B2" font-family="monospace" font-size="14">Status: Downloaded newer image</text>
-    <text x="20" y="135" fill="#06B6D4" font-family="monospace" font-size="14">$ docker run -d -p 8080:8080 oomol/headless</text>
-    <text x="20" y="160" fill="#27C93F" font-family="monospace" font-size="14">✓ Container started successfully</text>
-  </g>
-
-  <!-- Decorative elements -->
-  <circle cx="700" cy="80" r="30" fill="#06B6D4" opacity="0.1"/>
-  <circle cx="100" cy="100" r="20" fill="#06B6D4" opacity="0.1"/>
-  <circle cx="720" cy="500" r="25" fill="#0891B2" opacity="0.1"/>
-</svg>
diff --git a/static/img/pages/headless/package-management.svg b/static/img/pages/headless/package-management.svg
deleted file mode 100644
index a76f2a37..00000000
--- a/static/img/pages/headless/package-management.svg
+++ /dev/null
@@ -1,66 +0,0 @@
-<svg width="800" height="600" viewBox="0 0 800 600" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <!-- Background -->
-  <rect width="800" height="600" fill="#0B0B0B"/>
-
-  <!-- Grid pattern -->
-  <defs>
-    <pattern id="grid2" width="40" height="40" patternUnits="userSpaceOnUse">
-      <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#1F1F1F" stroke-width="1"/>
-    </pattern>
-  </defs>
-  <rect width="800" height="600" fill="url(#grid2)"/>
-
-  <!-- Package management interface -->
-  <g transform="translate(100, 80)">
-    <!-- Header -->
-    <rect width="600" height="60" fill="#1F1F1F" rx="8"/>
-    <text x="30" y="40" fill="#06B6D4" font-family="Arial, sans-serif" font-size="24" font-weight="bold">Package Manager</text>
-
-    <!-- Package list -->
-    <g transform="translate(0, 80)">
-      <!-- Package 1 -->
-      <rect width="600" height="80" fill="#252525" rx="6"/>
-      <rect x="20" y="20" width="40" height="40" fill="#06B6D4" opacity="0.3" rx="4"/>
-      <text x="80" y="30" fill="#FFFFFF" font-family="Arial, sans-serif" font-size="16" font-weight="600">image-processor</text>
-      <text x="80" y="50" fill="#999999" font-family="Arial, sans-serif" font-size="12">v2.1.0 • Installed</text>
-      <rect x="500" y="20" width="80" height="40" fill="#06B6D4" rx="4"/>
-      <text x="540" y="45" fill="#FFFFFF" font-family="Arial, sans-serif" font-size="14" text-anchor="middle" font-weight="500">Upgrade</text>
-
-      <!-- Package 2 -->
-      <g transform="translate(0, 100)">
-        <rect width="600" height="80" fill="#1F1F1F" rx="6"/>
-        <rect x="20" y="20" width="40" height="40" fill="#0891B2" opacity="0.3" rx="4"/>
-        <text x="80" y="30" fill="#FFFFFF" font-family="Arial, sans-serif" font-size="16" font-weight="600">ai-workflow</text>
-        <text x="80" y="50" fill="#999999" font-family="Arial, sans-serif" font-size="12">v1.5.2 • Running</text>
-        <circle cx="540" cy="40" r="8" fill="#27C93F"/>
-        <text x="560" y="45" fill="#27C93F" font-family="Arial, sans-serif" font-size="12" font-weight="500">Active</text>
-      </g>
-
-      <!-- Package 3 -->
-      <g transform="translate(0, 200)">
-        <rect width="600" height="80" fill="#252525" rx="6"/>
-        <rect x="20" y="20" width="40" height="40" fill="#06B6D4" opacity="0.3" rx="4"/>
-        <text x="80" y="30" fill="#FFFFFF" font-family="Arial, sans-serif" font-size="16" font-weight="600">data-analyzer</text>
-        <text x="80" y="50" fill="#999999" font-family="Arial, sans-serif" font-size="12">v3.0.1 • Installed</text>
-        <rect x="500" y="20" width="80" height="40" fill="#434343" rx="4"/>
-        <text x="540" y="45" fill="#999999" font-family="Arial, sans-serif" font-size="14" text-anchor="middle" font-weight="500">Remove</text>
-      </g>
-
-      <!-- Package 4 - Available -->
-      <g transform="translate(0, 300)">
-        <rect width="600" height="80" fill="#1F1F1F" rx="6" stroke="#06B6D4" stroke-width="1" stroke-dasharray="4 4"/>
-        <rect x="20" y="20" width="40" height="40" fill="#06B6D4" opacity="0.2" rx="4"/>
-        <text x="80" y="30" fill="#FFFFFF" font-family="Arial, sans-serif" font-size="16" font-weight="600">text-generator</text>
-        <text x="80" y="50" fill="#999999" font-family="Arial, sans-serif" font-size="12">v1.0.0 • Available from Hub</text>
-        <rect x="500" y="20" width="80" height="40" fill="#06B6D4" rx="4"/>
-        <text x="540" y="45" fill="#FFFFFF" font-family="Arial, sans-serif" font-size="14" text-anchor="middle" font-weight="500">Install</text>
-      </g>
-    </g>
-  </g>
-
-  <!-- Status indicator -->
-  <g transform="translate(650, 30)">
-    <circle cx="0" cy="0" r="6" fill="#27C93F"/>
-    <text x="-50" y="5" fill="#999999" font-family="Arial, sans-serif" font-size="12" text-anchor="end">4 packages</text>
-  </g>
-</svg>
diff --git a/static/img/pages/headless/remote-access.svg b/static/img/pages/headless/remote-access.svg
deleted file mode 100644
index 2a0e7384..00000000
--- a/static/img/pages/headless/remote-access.svg
+++ /dev/null
@@ -1,98 +0,0 @@
-<svg width="800" height="600" viewBox="0 0 800 600" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <!-- Background -->
-  <rect width="800" height="600" fill="#0B0B0B"/>
-
-  <!-- Grid pattern -->
-  <defs>
-    <pattern id="grid3" width="40" height="40" patternUnits="userSpaceOnUse">
-      <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#1F1F1F" stroke-width="1"/>
-    </pattern>
-  </defs>
-  <rect width="800" height="600" fill="url(#grid3)"/>
-
-  <!-- Browser window -->
-  <g transform="translate(80, 60)">
-    <rect width="640" height="480" fill="#1F1F1F" rx="8" stroke="#06B6D4" stroke-width="2"/>
-
-    <!-- Browser header -->
-    <rect width="640" height="40" fill="#252525" rx="8"/>
-    <circle cx="20" cy="20" r="6" fill="#FF5F56"/>
-    <circle cx="45" cy="20" r="6" fill="#FFBD2E"/>
-    <circle cx="70" cy="20" r="6" fill="#27C93F"/>
-
-    <!-- URL bar -->
-    <rect x="100" y="10" width="520" height="20" fill="#1F1F1F" rx="10"/>
-    <text x="115" y="24" fill="#06B6D4" font-family="monospace" font-size="12">https://headless.oomol.local:8080</text>
-  </g>
-
-  <!-- Dashboard content -->
-  <g transform="translate(100, 120)">
-    <!-- Title -->
-    <text x="20" y="30" fill="#06B6D4" font-family="Arial, sans-serif" font-size="20" font-weight="bold">Remote Dashboard</text>
-
-    <!-- Stats cards -->
-    <g transform="translate(0, 60)">
-      <!-- CPU Card -->
-      <rect width="180" height="100" fill="#252525" rx="6"/>
-      <text x="15" y="25" fill="#999999" font-family="Arial, sans-serif" font-size="12">CPU Usage</text>
-      <text x="15" y="60" fill="#06B6D4" font-family="Arial, sans-serif" font-size="32" font-weight="bold">42%</text>
-      <rect x="15" y="75" width="150" height="8" fill="#1F1F1F" rx="4"/>
-      <rect x="15" y="75" width="63" height="8" fill="#06B6D4" rx="4"/>
-
-      <!-- Memory Card -->
-      <g transform="translate(200, 0)">
-        <rect width="180" height="100" fill="#252525" rx="6"/>
-        <text x="15" y="25" fill="#999999" font-family="Arial, sans-serif" font-size="12">Memory</text>
-        <text x="15" y="60" fill="#0891B2" font-family="Arial, sans-serif" font-size="32" font-weight="bold">6.2 GB</text>
-        <rect x="15" y="75" width="150" height="8" fill="#1F1F1F" rx="4"/>
-        <rect x="15" y="75" width="90" height="8" fill="#0891B2" rx="4"/>
-      </g>
-
-      <!-- Packages Card -->
-      <g transform="translate(400, 0)">
-        <rect width="180" height="100" fill="#252525" rx="6"/>
-        <text x="15" y="25" fill="#999999" font-family="Arial, sans-serif" font-size="12">Active Packages</text>
-        <text x="15" y="60" fill="#27C93F" font-family="Arial, sans-serif" font-size="32" font-weight="bold">8</text>
-        <circle cx="150" cy="55" r="8" fill="#27C93F"/>
-      </g>
-    </g>
-
-    <!-- Running services -->
-    <g transform="translate(0, 190)">
-      <text x="0" y="0" fill="#FFFFFF" font-family="Arial, sans-serif" font-size="16" font-weight="600">Running Services</text>
-
-      <!-- Service 1 -->
-      <g transform="translate(0, 20)">
-        <rect width="600" height="50" fill="#1F1F1F" rx="4"/>
-        <circle cx="25" cy="25" r="6" fill="#27C93F"/>
-        <text x="45" y="30" fill="#FFFFFF" font-family="Arial, sans-serif" font-size="14">image-processor</text>
-        <text x="520" y="30" fill="#999999" font-family="Arial, sans-serif" font-size="12">Running 2h 34m</text>
-      </g>
-
-      <!-- Service 2 -->
-      <g transform="translate(0, 80)">
-        <rect width="600" height="50" fill="#1F1F1F" rx="4"/>
-        <circle cx="25" cy="25" r="6" fill="#27C93F"/>
-        <text x="45" y="30" fill="#FFFFFF" font-family="Arial, sans-serif" font-size="14">ai-workflow</text>
-        <text x="520" y="30" fill="#999999" font-family="Arial, sans-serif" font-size="12">Running 5h 12m</text>
-      </g>
-
-      <!-- Service 3 -->
-      <g transform="translate(0, 140)">
-        <rect width="600" height="50" fill="#1F1F1F" rx="4"/>
-        <circle cx="25" cy="25" r="6" fill="#27C93F"/>
-        <text x="45" y="30" fill="#FFFFFF" font-family="Arial, sans-serif" font-size="14">data-analyzer</text>
-        <text x="520" y="30" fill="#999999" font-family="Arial, sans-serif" font-size="12">Running 1h 08m</text>
-      </g>
-    </g>
-  </g>
-
-  <!-- Connection indicator -->
-  <g transform="translate(680, 80)">
-    <circle cx="0" cy="0" r="4" fill="#27C93F"/>
-    <circle cx="0" cy="0" r="8" fill="#27C93F" opacity="0.3">
-      <animate attributeName="r" from="8" to="16" dur="2s" repeatCount="indefinite"/>
-      <animate attributeName="opacity" from="0.3" to="0" dur="2s" repeatCount="indefinite"/>
-    </circle>
-  </g>
-</svg>
diff --git a/static/img/pages/studio/code-dark.png b/static/img/pages/studio/code-dark.png
new file mode 100644
index 00000000..33ef99fd
Binary files /dev/null and b/static/img/pages/studio/code-dark.png differ
diff --git a/static/img/pages/studio/code-light.png b/static/img/pages/studio/code-light.png
new file mode 100644
index 00000000..38afebc0
Binary files /dev/null and b/static/img/pages/studio/code-light.png differ
diff --git a/static/img/pages/studio/edit-dark.png b/static/img/pages/studio/edit-dark.png
new file mode 100644
index 00000000..fa5be594
Binary files /dev/null and b/static/img/pages/studio/edit-dark.png differ
diff --git a/static/img/pages/studio/edit-light.png b/static/img/pages/studio/edit-light.png
new file mode 100644
index 00000000..ae9a1818
Binary files /dev/null and b/static/img/pages/studio/edit-light.png differ
diff --git a/static/img/pages/studio/package-dark.png b/static/img/pages/studio/package-dark.png
new file mode 100644
index 00000000..a539161e
Binary files /dev/null and b/static/img/pages/studio/package-dark.png differ
diff --git a/static/img/pages/studio/package-light.png b/static/img/pages/studio/package-light.png
new file mode 100644
index 00000000..87777e94
Binary files /dev/null and b/static/img/pages/studio/package-light.png differ
diff --git a/static/img/pages/studio/studio-dark.png b/static/img/pages/studio/studio-dark.png
new file mode 100644
index 00000000..25b40ffa
Binary files /dev/null and b/static/img/pages/studio/studio-dark.png differ
diff --git a/static/img/pages/studio/studio-light.png b/static/img/pages/studio/studio-light.png
new file mode 100644
index 00000000..2a59d2fd
Binary files /dev/null and b/static/img/pages/studio/studio-light.png differ
diff --git a/static/img/products/chat.svg b/static/img/products/app.svg
similarity index 100%
rename from static/img/products/chat.svg
rename to static/img/products/app.svg
diff --git a/static/img/release/1.4.14/applet.png b/static/img/release/1.4.14/applet.png
new file mode 100644
index 00000000..7cd08e42
Binary files /dev/null and b/static/img/release/1.4.14/applet.png differ
diff --git a/static/img/release/1.4.14/chat.png b/static/img/release/1.4.14/chat.png
new file mode 100644
index 00000000..d2a6c01a
Binary files /dev/null and b/static/img/release/1.4.14/chat.png differ
diff --git a/static/img/release/1.4.14/community.png b/static/img/release/1.4.14/community.png
new file mode 100644
index 00000000..c90af093
Binary files /dev/null and b/static/img/release/1.4.14/community.png differ
diff --git a/static/img/release/1.4.14/connect.png b/static/img/release/1.4.14/connect.png
new file mode 100644
index 00000000..f14ce97f
Binary files /dev/null and b/static/img/release/1.4.14/connect.png differ
diff --git a/tailwind.config.js b/tailwind.config.js
index 81583247..fb5d4091 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -23,7 +23,7 @@ module.exports = {
         "oomol-primary-hover": "var(--oomol-primary-hover)",
         "oomol-studio": "var(--oomol-studio)",
         "oomol-hub": "var(--oomol-hub)",
-        "oomol-chat": "var(--oomol-chat)",
+        "oomol-app": "var(--oomol-app)",
         border: "hsl(var(--border))",
         input: "hsl(var(--input))",
         ring: "hsl(var(--ring))",
diff --git a/updates/1.4.14/index.mdx b/updates/1.4.14/index.mdx
new file mode 100644
index 00000000..dd7498f5
--- /dev/null
+++ b/updates/1.4.14/index.mdx
@@ -0,0 +1,73 @@
+---
+slug: OOMOL_Studio_1.4.14
+title: OOMOL Studio 1.4.14
+date: 2025-12-06
+---
+
+import useBaseUrl from "@docusaurus/useBaseUrl";
+
+# OOMOL Studio
+
+## General
+
+### 1. Enhanced Community Experience
+
+The Community feature has been rebuilt with native components instead of iframe, delivering a smoother and more responsive browsing and interaction experience.
+
+<img
+  src={useBaseUrl("/img/release/1.4.14/community.png")}
+  alt="Enhanced Community Experience"
+/>
+
+### 2. New "Connect" Feature
+
+Through built-in containers and network reverse proxy technology, we assign a domain name to your device, enabling you to use it like a server. For example, if you have a computer with an RTX 4090 GPU sitting idle at home, installing OOMOL Studio transforms it into a private cloud server, maximizing your hardware resources without purchasing additional servers.
+
+<img
+  src={useBaseUrl("/img/release/1.4.14/connect.png")}
+  alt="Connect Feature"
+/>
+
+### 3. Intelligent "Chat" Feature
+
+Users can now use their created Blocks as AI Tool Calls. Through large language model integration, this feature lowers the barrier to entry, enables Block composition, and makes workflows more intelligent.
+
+<img
+  src={useBaseUrl("/img/release/1.4.14/chat.png")}
+  alt="Chat Feature"
+/>
+
+### 4. Convenient "Mini Apps" Feature
+
+Users can utilize Blocks like forms—fill in parameters, execute, and wait for results. This feature is perfect when you know exactly what you need. Unlike the Chat feature, Mini Apps are designed for goal-oriented scenarios.
+
+Mini Apps also support automation settings, allowing users to schedule timed executions for automated workflow runs.
+
+<img
+  src={useBaseUrl("/img/release/1.4.14/applet.png")}
+  alt="Mini Apps Feature"
+/>
+
+## Programming Features
+
+### 1. Claude Code Support
+
+Integrated Claude Code functionality to provide developers with more powerful programming assistance capabilities.
+
+### 2. AI-Powered Intelligence
+
+Added multiple AI-assisted features, including:
+- AI-powered translation completion
+- AI-assisted publishing information enhancement
+- AI error interpretation for quick problem diagnosis
+- AI-powered online component search to boost development efficiency
+
+### 3. Improved Publishing Experience
+
+Enhanced the Block publishing workflow, making the developer publishing experience smoother and more convenient.
+
+## Others
+
+### Thanks
+
+Thanks to all users who provided suggestions and feedback for this release. Your support drives us forward!