diff --git a/docs/index.md b/docs/index.md
index 0eca41b1..57e91a6c 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -5,10 +5,9 @@ title: HAPI Documentation
 
 <script setup>
 import { onMounted } from 'vue'
-import { useRouter } from 'vitepress'
+import { withBase } from 'vitepress'
 
 onMounted(() => {
-  const router = useRouter()
-  router.go('/guide/quick-start')
+  window.location.replace(withBase('/guide/quick-start'))
 })
 </script>
diff --git a/website/public/_redirects b/website/public/_redirects
index b9a9f00e..f6ab4cdb 100644
--- a/website/public/_redirects
+++ b/website/public/_redirects
@@ -1,2 +1,4 @@
+/docs/  /docs/guide/quick-start  301
+/docs   /docs/guide/quick-start  301
 /docs/*  /docs/:splat  200
 /*       /index.html   200
diff --git a/website/src/components/Layout.tsx b/website/src/components/Layout.tsx
index 0d75dfda..3f5422d2 100644
--- a/website/src/components/Layout.tsx
+++ b/website/src/components/Layout.tsx
@@ -26,18 +26,14 @@ export default function Layout({ children }: { children: React.ReactNode }) {
 
           {/* Desktop Nav */}
           <nav className="hidden md:flex items-center gap-6">
-            <a href="#features" className="text-sm font-medium hover:text-primary transition-colors">{t('nav.features')}</a>
-
-            <a href="#how-it-works" className="text-sm font-medium hover:text-primary transition-colors">{t('nav.howItWorks')}</a>
-            <a href="#installation" className="text-sm font-medium hover:text-primary transition-colors">{t('nav.installation')}</a>
-            <div className="flex items-center gap-4 ml-4">
+            <div className="flex items-center gap-4">
               <LanguageToggle />
               <ModeToggle />
               <a href="https://github.com/tiann/hapi" target="_blank" rel="noreferrer" className="text-muted-foreground hover:text-foreground transition-colors">
                 <Github className="h-5 w-5" />
               </a>
-              <Button className="font-bold shadow-hard hover:translate-y-0.5 hover:shadow-none transition-all border-2 border-border">
-                {t('nav.getStarted')}
+              <Button className="font-bold shadow-hard hover:translate-y-0.5 hover:shadow-none transition-all border-2 border-border" asChild>
+                <a href="/docs/">{t('nav.getStarted')}</a>
               </Button>
             </div>
           </nav>
@@ -56,12 +52,10 @@ export default function Layout({ children }: { children: React.ReactNode }) {
         {isMenuOpen && (
           <div className="md:hidden border-b-2 border-border bg-background p-4">
             <nav className="flex flex-col gap-4">
-              <a href="#features" className="text-sm font-medium" onClick={() => setIsMenuOpen(false)}>{t('nav.features')}</a>
-
-              <a href="#how-it-works" className="text-sm font-medium" onClick={() => setIsMenuOpen(false)}>{t('nav.howItWorks')}</a>
-              <a href="#installation" className="text-sm font-medium" onClick={() => setIsMenuOpen(false)}>{t('nav.installation')}</a>
-              <div className="flex flex-col gap-2 mt-2">
-                <Button className="w-full font-bold shadow-hard border-2 border-border">{t('nav.getStarted')}</Button>
+              <div className="flex flex-col gap-2">
+                <Button className="w-full font-bold shadow-hard border-2 border-border" asChild>
+                  <a href="/docs/">{t('nav.getStarted')}</a>
+                </Button>
                 <a href="https://github.com/tiann/hapi" target="_blank" rel="noreferrer" className="flex items-center justify-center gap-2 text-sm font-medium p-2 hover:bg-muted rounded-md">
                   <Github className="h-4 w-4" /> {t('nav.viewOnGithub')}
                 </a>
diff --git a/website/src/pages/Home.tsx b/website/src/pages/Home.tsx
index ebfdf301..6f0bc25b 100644
--- a/website/src/pages/Home.tsx
+++ b/website/src/pages/Home.tsx
@@ -44,8 +44,10 @@ export default function Home() {
               </p>
               
               <div className="flex flex-col sm:flex-row gap-4 pt-4">
-                <Button size="lg" className="text-lg px-8 py-6 rounded-xl shadow-hard hover:translate-y-1 hover:shadow-none transition-all border-2 border-border bg-primary text-primary-foreground hover:bg-primary/90">
-                  {t('hero.startBtn')} <ArrowRight className="ml-2 h-5 w-5" />
+                <Button size="lg" className="text-lg px-8 py-6 rounded-xl shadow-hard hover:translate-y-1 hover:shadow-none transition-all border-2 border-border bg-primary text-primary-foreground hover:bg-primary/90" asChild>
+                  <a href="/docs/">
+                    {t('hero.startBtn')} <ArrowRight className="ml-2 h-5 w-5" />
+                  </a>
                 </Button>
                 <Button variant="outline" size="lg" className="text-lg px-8 py-6 rounded-xl shadow-hard hover:translate-y-1 hover:shadow-none transition-all border-2 border-border bg-background" onClick={() => window.open('https://github.com/tiann/hapi', '_blank')}>
                   {t('hero.githubBtn')}
@@ -338,7 +340,7 @@ services:
           </p>
           <div className="flex flex-col sm:flex-row justify-center gap-4">
             <Button size="lg" className="text-lg px-10 py-8 rounded-xl font-bold shadow-hard hover:translate-y-1 hover:shadow-none transition-all border-2 border-white/20 bg-primary text-primary-foreground hover:bg-primary/90" asChild>
-              <a href="https://github.com/tiann/hapi" target="_blank" rel="noreferrer">
+              <a href="/docs/">
                 <Globe className="mr-2 h-5 w-5" />
                 {t('cta.btn')}
               </a>