diff --git a/web/src/pages/Home/index.jsx b/web/src/pages/Home/index.jsx
index a577250..208bc2c 100644
--- a/web/src/pages/Home/index.jsx
+++ b/web/src/pages/Home/index.jsx
@@ -20,7 +20,7 @@ For commercial licensing, please contact support@quantumnous.com
 import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { Copy, Check, Code, Terminal, FileCode, Box, Grid3X3, Play, Trophy, PieChart, Search, Sun, Moon, Monitor, Languages } from 'lucide-react';
+import { Copy, Check, Code, Terminal, FileCode, Box, Grid3X3, Play, Trophy, PieChart, BookOpen, Search, Sun, Moon, Monitor, Languages } from 'lucide-react';
 
 
 /* ==================================================================
@@ -162,10 +162,15 @@ function HeroSection() {
             {[
               { key: "model", label: "模型", icon: <Box size={16} />, to: "/pricing" },
               { key: "benchmark", label: "评测", icon: <Trophy size={16} />, to: "/benchmarks" },
+              { key: "docs", label: "文档", icon: <BookOpen size={16} />, to: "/docs", isDocs: true },
               { key: "console", label: "控制台", icon: <Grid3X3 size={16} />, to: "/console" },
-            ].map((item) => (
-              <Link key={item.key} to={item.to} className="inline-flex items-center gap-1.5 px-3 py-1.5 text-[14px] rounded-md transition-colors duration-150 text-white/60 hover:text-white">{item.icon}<span className="hidden sm:inline">{t(item.label)}</span></Link>
-            ))}
+            ].map((item) => {
+              const linkClass = "inline-flex items-center gap-1.5 px-3 py-1.5 text-[14px] rounded-md transition-colors duration-150 text-white/60 hover:text-white";
+              if (item.isDocs) {
+                return <a key={item.key} href={item.to} className={linkClass}>{item.icon}<span className="hidden sm:inline">{t(item.label)}</span></a>;
+              }
+              return <Link key={item.key} to={item.to} className={linkClass}>{item.icon}<span className="hidden sm:inline">{t(item.label)}</span></Link>;
+            })}
           </nav>
           <div className="flex items-center gap-1">
             <HomeThemeToggle />