diff --git a/docs/components/home/Additional.vue b/docs/components/home/Additional.vue
index 32474a01..824f9bec 100644
--- a/docs/components/home/Additional.vue
+++ b/docs/components/home/Additional.vue
@@ -102,7 +102,7 @@ onPaneReady((i) => emit('pane', i))
         Vue Flow includes a MiniMap, Controls and Background, as well as a ton of utilities and a supercharged composable to
         control the internal state outside the Vue Flow component.
       </p>
-      <a class="button max-w-max" href="/docs"> Documentation </a>
+      <router-link class="button max-w-max" to="/guide/"> Documentation </router-link>
     </div>
   </div>
 </template>
diff --git a/docs/components/home/Basic.vue b/docs/components/home/Basic.vue
index 193f9701..9b52116c 100644
--- a/docs/components/home/Basic.vue
+++ b/docs/components/home/Basic.vue
@@ -102,7 +102,7 @@ onPaneReady((i) => emit('pane', i))
         Vue Flow comes with seamless zooming & panning, different edge and node types, single and multi-selection, controls,
         several event handlers and more.
       </p>
-      <a class="button max-w-max" href="/docs"> Documentation </a>
+      <router-link class="button max-w-max" to="/guide/"> Documentation </router-link>
     </div>
   </div>
   <div
diff --git a/docs/components/home/Home.vue b/docs/components/home/Home.vue
index f862daac..3902ec3f 100644
--- a/docs/components/home/Home.vue
+++ b/docs/components/home/Home.vue
@@ -128,13 +128,13 @@ onPaneReady(({ fitView }) => {
         </template>
         <template v-else-if="props.id === 'documentation'">
           <div class="flex">
-            <a class="link group bg-orange-500" href="/docs"> Read The Documentation </a>
+            <router-link class="link group bg-orange-500" to="/guide/"> Read The Documentation </router-link>
           </div>
           <Handle type="target" :position="Position.Top" />
         </template>
         <template v-else-if="props.id === 'examples'">
           <div class="flex">
-            <a class="link group bg-purple-500" href="/examples"> Check The Examples </a>
+            <router-link class="link group bg-purple-500" to="/examples/"> Check The Examples </router-link>
           </div>
           <Handle type="target" :position="Position.Top" />
           <Handle class="block md:hidden" type="source" :position="Position.Bottom" />
diff --git a/docs/components/home/Nested.vue b/docs/components/home/Nested.vue
index 89525703..a0b883a5 100644
--- a/docs/components/home/Nested.vue
+++ b/docs/components/home/Nested.vue
@@ -60,7 +60,7 @@ onPaneReady((i) => emit('pane', i))
     <div class="flex flex-col gap-2 items-center md:items-start">
       <h1>Nested- & Subflows</h1>
       <p>Vue Flow comes with built-in support for nested nodes and nested flows.</p>
-      <a class="button max-w-max" href="/docs"> Documentation </a>
+      <router-link class="button max-w-max" to="/guide/"> Documentation </router-link>
     </div>
   </div>
   <div
diff --git a/docs/components/home/RGB.vue b/docs/components/home/RGB.vue
index 9666488b..29c885f2 100644
--- a/docs/components/home/RGB.vue
+++ b/docs/components/home/RGB.vue
@@ -106,7 +106,7 @@ const nodeColor: MiniMapNodeFunc = (node) => {
         You can create your own node and edge types or just pass a custom style. Implement custom UIs inside your nodes and add
         functionality to your edges.
       </p>
-      <a class="button max-w-max" href="/docs">Documentation</a>
+      <router-link class="button max-w-max" to="/guide/">Documentation</router-link>
     </div>
   </div>
 </template>