diff --git a/.vscode/settings.json b/.vscode/settings.json
index a1f9a3a..21e055f 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,10 +1,12 @@
 {
 	"editor.fontLigatures": true,
 	"cSpell.words": [
+		"deepseek",
 		"HITL",
 		"innerhtml",
 		"llms",
 		"opensource",
+		"qwen",
 		"retryable",
 		"wouter"
 	],
diff --git a/packages/website/src/docs/features/model-integration/page.tsx b/packages/website/src/docs/features/model-integration/page.tsx
index f9fbfac..1d8b691 100644
--- a/packages/website/src/docs/features/model-integration/page.tsx
+++ b/packages/website/src/docs/features/model-integration/page.tsx
@@ -1,164 +1,133 @@
 import { useTranslation } from 'react-i18next'
 
-import BetaNotice from '@/components/BetaNotice'
 import CodeEditor from '@/components/CodeEditor'
 
+// Recommended models: lightweight with excellent tool call capabilities
+const MODELS = {
+	recommended: [
+		'gpt-4.1-mini',
+		'claude-haiku-4.5',
+		'gemini-3-flash',
+		'deepseek-3.2',
+		'qwen-3-max',
+		'gpt-5.2',
+	],
+	verified: [
+		'gpt-4.1',
+		'gpt-5',
+		'gpt-5-mini',
+		'gpt-5.1',
+		'grok-4',
+		'grok-code-fast',
+		'qwen3-max',
+		'deepseek-v3.2',
+		'claude-sonnet-3.5',
+		'claude-sonnet-4.5',
+		'gemini-2.5',
+		'gemini-3-pro',
+	],
+}
+
 export default function ModelIntegration() {
 	const { t } = useTranslation('docs')
+	const allModels = [...MODELS.recommended, ...MODELS.verified]
 
 	return (
-		<div>
-			<h1 className="text-4xl font-bold mb-6">{t('model_integration.title')}</h1>
-
-			<p className="text-xl text-gray-600 dark:text-gray-300 mb-6 leading-relaxed">
+		<div className="max-w-4xl">
+			<h1 className="text-4xl font-bold mb-4">{t('model_integration.title')}</h1>
+			<p className="text-lg text-gray-600 dark:text-gray-400 mb-8">
 				{t('model_integration.subtitle')}
 			</p>
 
-			<h2 className="text-2xl font-bold mb-3">{t('model_integration.recommended')}</h2>
-
-			<div className="grid md:grid-cols-3 gap-4 mb-6">
-				<div className="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg">
-					<h3 className="text-lg font-semibold mb-2 text-green-900 dark:text-green-300">
-						{t('model_integration.model_gpt4_title')}
-					</h3>
-					<p className="text-sm text-gray-600 dark:text-gray-300 mb-2">
-						{t('model_integration.model_gpt4_badge')}
-					</p>
-					<ul className="text-sm text-gray-500 dark:text-gray-400 space-y-1">
-						<li>{t('model_integration.model_gpt4_1')}</li>
-						<li>{t('model_integration.model_gpt4_2')}</li>
-						<li>{t('model_integration.model_gpt4_3')}</li>
-					</ul>
-				</div>
-
-				<div className="p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg">
-					<h3 className="text-lg font-semibold mb-2 text-purple-900 dark:text-purple-300">
-						{t('model_integration.model_deepseek_title')}
-					</h3>
-					<p className="text-sm text-gray-600 dark:text-gray-300 mb-2">
-						{t('model_integration.model_deepseek_badge')}
-					</p>
-					<ul className="text-sm text-gray-500 dark:text-gray-400 space-y-1">
-						<li>{t('model_integration.model_deepseek_1')}</li>
-						<li>{t('model_integration.model_deepseek_2')}</li>
-						<li>{t('model_integration.model_deepseek_3')}</li>
-					</ul>
-				</div>
-
-				<div className="p-4 bg-orange-50 dark:bg-orange-900/20 rounded-lg">
-					<h3 className="text-lg font-semibold mb-2 text-orange-900 dark:text-orange-300">
-						{t('model_integration.model_qwen_title')}
-					</h3>
-					<p className="text-sm text-gray-600 dark:text-gray-300 mb-2">
-						{t('model_integration.model_qwen_badge')}
-					</p>
-					<ul className="text-sm text-gray-500 dark:text-gray-400 space-y-1">
-						<li>{t('model_integration.model_qwen_1')}</li>
-						<li>{t('model_integration.model_qwen_2')}</li>
-						<li>{t('model_integration.model_qwen_3')}</li>
-					</ul>
-				</div>
-
-				<div className="p-4 bg-orange-50 dark:bg-orange-900/20 rounded-lg">
-					<h3 className="text-lg font-semibold mb-2 text-orange-900 dark:text-orange-300">
-						{t('model_integration.model_gemini_title')}
-					</h3>
-					<p className="text-sm text-gray-600 dark:text-gray-300 mb-2">
-						{t('model_integration.model_gemini_badge')}
-					</p>
-				</div>
-			</div>
-
-			<h2 className="text-2xl font-bold mb-3">{t('model_integration.available')}</h2>
-
-			<div className="p-4 bg-emerald-50 dark:bg-emerald-900/20 rounded-lg mb-6">
-				<h3 className="text-lg font-semibold mb-3 text-emerald-900 dark:text-emerald-300">
-					{t('model_integration.available_verified')}
-				</h3>
-				<div className="flex flex-wrap gap-2">
-					<span className="inline-flex items-center rounded-full bg-emerald-100 dark:bg-emerald-900/40 text-emerald-900 dark:text-emerald-200 px-3 py-1 text-sm">
-						gpt-4.1-mini/4.1/5
-					</span>
-					<span className="inline-flex items-center rounded-full bg-emerald-100 dark:bg-emerald-900/40 text-emerald-900 dark:text-emerald-200 px-3 py-1 text-sm">
-						grok-4/grok-code-fast
-					</span>
-					<span className="inline-flex items-center rounded-full bg-emerald-100 dark:bg-emerald-900/40 text-emerald-900 dark:text-emerald-200 px-3 py-1 text-sm">
-						qwen3
-					</span>
-					<span className="inline-flex items-center rounded-full bg-emerald-100 dark:bg-emerald-900/40 text-emerald-900 dark:text-emerald-200 px-3 py-1 text-sm">
-						deepseek-v3.1/3.2
-					</span>
-					<span className="inline-flex items-center rounded-full bg-emerald-100 dark:bg-emerald-900/40 text-emerald-900 dark:text-emerald-200 px-3 py-1 text-sm">
-						claude-sonnet-4/4.5/haiku-4.5
-					</span>
-					<span className="inline-flex items-center rounded-full bg-emerald-100 dark:bg-emerald-900/40 text-emerald-900 dark:text-emerald-200 px-3 py-1 text-sm">
-						gemini-2.5
-					</span>
-				</div>
-			</div>
-
-			<h2 className="text-2xl font-bold mb-3">{t('model_integration.tips')}</h2>
-
-			<div className="p-4 bg-red-50 dark:bg-red-900/20 rounded-lg mb-6">
-				<ul className="text-sm text-gray-600 dark:text-gray-300 space-y-1 list-disc pl-5">
-					<li>{t('model_integration.tip_1')}</li>
-					<li>{t('model_integration.tip_2')}</li>
-					<li>{t('model_integration.tip_3')}</li>
-				</ul>
-			</div>
-
-			<h2 className="text-2xl font-bold mb-3">{t('model_integration.security')}</h2>
-
-			<div className="p-4 bg-yellow-50 dark:bg-yellow-900/20 border-l-4 border-yellow-500 mb-4">
-				<p className="text-sm font-semibold text-yellow-900 dark:text-yellow-200">
-					{t('model_integration.security_warning')}
+			{/* Models Section */}
+			<section className="mb-10">
+				<h2 className="text-2xl font-semibold mb-3">{t('model_integration.available')}</h2>
+				<p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
+					{t('model_integration.recommendation_logic')}
 				</p>
-			</div>
+				<div className="bg-linear-to-br from-emerald-50 to-cyan-50 dark:from-emerald-950/30 dark:to-cyan-950/30 rounded-xl p-6 border border-emerald-200/50 dark:border-emerald-800/50">
+					<div className="flex flex-wrap gap-2">
+						{allModels.map((model) => {
+							const isRecommended = MODELS.recommended.includes(model)
+							return (
+								<div
+									key={model}
+									className={`px-3 py-1.5 rounded-md text-sm font-medium transition-colors ${
+										isRecommended
+											? 'bg-emerald-500 text-white shadow-sm'
+											: 'bg-white/60 dark:bg-gray-800/60 text-gray-700 dark:text-gray-300'
+									}`}
+								>
+									{model}
+									{isRecommended && <span className="ml-1">⭐</span>}
+								</div>
+							)
+						})}
+					</div>
+				</div>
+			</section>
 
-			<p className="text-gray-600 dark:text-gray-300 mb-4">
-				{t('model_integration.security_desc')}
-			</p>
+			{/* Tips Section */}
+			<section className="mb-10">
+				<h2 className="text-2xl font-semibold mb-4">{t('model_integration.tips')}</h2>
+				<div className="p-4 bg-blue-50 dark:bg-blue-950/20 rounded-lg border border-blue-200 dark:border-blue-800">
+					<ul className="text-sm text-gray-700 dark:text-gray-300 space-y-2 list-disc pl-5">
+						<li>{t('model_integration.tip_2')}</li>
+						<li>{t('model_integration.tip_3')}</li>
+					</ul>
+				</div>
+			</section>
 
-			<div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg mb-6">
-				<h3 className="text-lg font-semibold mb-3 text-blue-900 dark:text-blue-300">
-					{t('model_integration.security_backend_proxy')}
-				</h3>
-				<p className="text-sm text-gray-600 dark:text-gray-300 mb-3">
-					{t('model_integration.security_backend_desc')}
-				</p>
-				<ul className="text-sm text-gray-600 dark:text-gray-300 space-y-1 list-none pl-0">
-					<li>{t('model_integration.security_method_1')}</li>
-					<li>{t('model_integration.security_method_2')}</li>
-					<li>{t('model_integration.security_method_3')}</li>
-				</ul>
-			</div>
+			{/* Security Section */}
+			<section className="mb-10">
+				<h2 className="text-2xl font-semibold mb-4">{t('model_integration.security')}</h2>
+				<div className="bg-yellow-50 dark:bg-yellow-950/20 border-l-4 border-yellow-500 p-5 rounded-r-lg mb-4">
+					<p className="text-sm font-semibold text-yellow-900 dark:text-yellow-200">
+						{t('model_integration.security_warning')}
+					</p>
+				</div>
+				<div className="bg-gray-50 dark:bg-gray-900/30 rounded-lg p-5 border border-gray-200 dark:border-gray-800">
+					<h3 className="font-semibold text-gray-900 dark:text-gray-100 mb-2">
+						{t('model_integration.security_backend_proxy')}
+					</h3>
+					<p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
+						{t('model_integration.security_backend_desc')}
+					</p>
+					<ul className="text-sm text-gray-600 dark:text-gray-400 space-y-1">
+						<li>{t('model_integration.security_method_1')}</li>
+						<li>{t('model_integration.security_method_2')}</li>
+						<li>{t('model_integration.security_method_3')}</li>
+					</ul>
+				</div>
+			</section>
 
-			<h2 className="text-2xl font-bold mb-3">{t('model_integration.configuration')}</h2>
-
-			<CodeEditor
-				code={`
-// 百炼等其他兼容服务
+			{/* Configuration Section */}
+			<section className="mb-10">
+				<h2 className="text-2xl font-semibold mb-4">{t('model_integration.configuration')}</h2>
+				<CodeEditor
+					code={`// OpenAI-compatible services (e.g., Alibaba Bailian)
 const pageAgent = new PageAgent({
   baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
   apiKey: 'your-api-key',
   model: 'qwen-plus'
 });
 
-// 私有部署模型
+// Self-hosted models (e.g., Ollama)
 const pageAgent = new PageAgent({
   baseURL: 'http://localhost:11434/v1',
-  apiKey: 'N/A',  // Ollama 通常使用任意值
+  apiKey: 'N/A',  // Ollama typically accepts any value
   model: 'qwen3:latest'
 });
 
-// 测试接口
-// @note: 限流，限制 prompt 内容，限制来源，随时变更，请替换成你自己的
-// @note: 使用 DeepSeek-chat(3.2) 官方版本，使用协议和隐私策略见 DeepSeek 网站
+// Free testing endpoint
+// Note: Rate-limited, content-filtered, subject to change. Replace with your own.
+// Note: Uses official DeepSeek-chat (3.2). See DeepSeek website for terms & privacy.
 const DEMO_MODEL = 'PAGE-AGENT-FREE-TESTING-RANDOM'
 const DEMO_BASE_URL = 'https://hwcxiuzfylggtcktqgij.supabase.co/functions/v1/llm-testing-proxy'
 const DEMO_API_KEY = 'PAGE-AGENT-FREE-TESTING-RANDOM'
 `}
-			/>
+				/>
+			</section>
 		</div>
 	)
 }
diff --git a/packages/website/src/i18n/locales/en-US/docs.ts b/packages/website/src/i18n/locales/en-US/docs.ts
index 8f5299c..d008eee 100644
--- a/packages/website/src/i18n/locales/en-US/docs.ts
+++ b/packages/website/src/i18n/locales/en-US/docs.ts
@@ -115,32 +115,17 @@ export default {
 	model_integration: {
 		title: 'Model Integration',
 		subtitle:
-			'Supports OpenAI-compatible models with tool call support, including public cloud services and private deployments.',
+			'Supports models that comply with OpenAI API specification and support tool calls, including public cloud services and private deployments.',
+		recommendation_logic: 'Recommended: Lightweight models with strong ToolCall capabilities',
 		recommended: 'Recommended Models',
-		model_gpt4_title: '⚡ gpt-4.1-mini',
-		model_gpt4_badge: 'Evaluation Baseline ✅',
-		model_gpt4_1: '• Cost-effective',
-		model_gpt4_2: '• Fast',
-		model_gpt4_3: '• High success rate',
-		model_deepseek_title: '💰 DeepSeek-3.2',
-		model_deepseek_badge: 'Economical',
-		model_deepseek_1: '• Much cheaper than similar models',
-		model_deepseek_2: '• ToolCall may error but usually auto-recovers',
-		model_deepseek_3: "• This site's free demo uses DeepSeek",
-		model_qwen_title: '🛡️ qwen3',
-		model_qwen_badge: 'Secure & Compliant',
-		model_qwen_1: '• Controllable, decent results, reasonable price',
-		model_qwen_2: '• ToolCall may error but usually auto-recovers',
-		model_qwen_3: '• Best for scenarios with detailed steps',
-		model_gemini_title: '⚡ gemini-2.5-flash',
-		model_gemini_badge: 'Highly efficient, high success rate, reasonable price',
 		available: 'Available Models',
-		available_verified: '✅ Verified Working',
+		available_verified: 'Verified Working Models',
 		tips: 'Tips',
 		tip_1: 'Reasoning models (like GPT-5) are slower with no advantage',
 		tip_2:
-			"Non-OpenAI models don't guarantee JSON schema compliance—tool call may error but usually recovers. Higher temperature recommended",
-		tip_3: 'Small/nano models perform poorly',
+			'Models with weaker ToolCall capabilities may return incorrect formats. Common errors usually auto-recover. Higher temperature recommended',
+		tip_3:
+			'Small models or those unable to handle complex tool definitions typically perform poorly',
 		security: '🔐 Production Authentication',
 		security_warning: '⚠️ Never commit real LLM API Keys to your frontend codebase',
 		security_desc:
diff --git a/packages/website/src/i18n/locales/zh-CN/docs.ts b/packages/website/src/i18n/locales/zh-CN/docs.ts
index 783ac90..c031062 100644
--- a/packages/website/src/i18n/locales/zh-CN/docs.ts
+++ b/packages/website/src/i18n/locales/zh-CN/docs.ts
@@ -114,31 +114,15 @@ export default {
 	model_integration: {
 		title: '模型接入',
 		subtitle: '当前支持符合 OpenAI 接口规范且支持 tool call 的模型,包括公有云服务和私有部署方案。',
+		recommendation_logic: '推荐使用 ToolCall 能力强的轻量级模型',
 		recommended: '推荐模型',
-		model_gpt4_title: '⚡ gpt-4.1-mini',
-		model_gpt4_badge: '评估基准 ✅',
-		model_gpt4_1: '• 性价比高',
-		model_gpt4_2: '• 速度快',
-		model_gpt4_3: '• 成功率高',
-		model_deepseek_title: '💰 DeepSeek-3.2',
-		model_deepseek_badge: '经济实惠',
-		model_deepseek_1: '• 价格远低于同等级其他模型',
-		model_deepseek_2: '• ToolCall 有出错率,通常能够自动修复',
-		model_deepseek_3: '• 本网站提供的免费试用为 DeepSeek',
-		model_qwen_title: '🛡️ qwen3',
-		model_qwen_badge: '安全合规',
-		model_qwen_1: '• 可控、效果尚可,价格合理',
-		model_qwen_2: '• ToolCall 有出错率,通常能够自动修复',
-		model_qwen_3: '• 适合能给出详细步骤的场景',
-		model_gemini_title: '⚡ gemini-2.5-flash',
-		model_gemini_badge: '极其高效,成功率高,价格合理',
 		available: '可用模型',
-		available_verified: '✅ 已验证可用',
+		available_verified: '已验证可用模型',
 		tips: '提示',
 		tip_1: 'reasoning 模型(如 GPT-5),速度偏慢,没有必要',
 		tip_2:
-			'不保证 json schema 的模型(openAI 以外的几乎所有模型),tool call 有概率出错,通常能自动修复,建议 temperature 设置高一些',
-		tip_3: '小模型、nano 模型,效果不佳',
+			'ToolCall 能力较弱的模型可能返回错误的格式，常见错误能够自动恢复，建议设置较高的 temperature',
+		tip_3: '小模型或者无法适应复杂 Tool 定义的模型，通常效果不佳',
 		security: '🔐 生产环境鉴权建议',
 		security_warning: '⚠️ 永远不要把真实的 LLM API Key 发布到前端代码库',
 		security_desc: '在实际应用中,为了隐藏真实的 LLM API Key，建议采用以下架构:',