diff --git a/docs2/components/home/Acknowledgement.vue b/docs2/components/home/Acknowledgement.vue
index e969fbe2..bb531a98 100644
--- a/docs2/components/home/Acknowledgement.vue
+++ b/docs2/components/home/Acknowledgement.vue
@@ -3,7 +3,7 @@ import Heart from '~icons/mdi/heart'
 </script>
 
 <template>
-  <div id="acknowledgement" class="w-full dark:(bg-black text-white) border-y-1 border-white">
+  <div id="acknowledgement" class="w-full">
     <div class="max-w-11/12 md:max-w-6/12 m-auto py-4 md:(pb-12 pt-6) text-center">
       <div>
         <h1 class="md:mb-8 flex justify-center items-center"><Heart class="text-red-500" /> Acknowledgement</h1>
diff --git a/docs2/components/home/Banner.vue b/docs2/components/home/Banner.vue
index 2b3fcd0e..dd8a87dc 100644
--- a/docs2/components/home/Banner.vue
+++ b/docs2/components/home/Banner.vue
@@ -8,7 +8,7 @@ const npmData = await $fetch('https://api.npmjs.org/downloads/point/last-month/@
 </script>
 
 <template>
-  <div class="w-full dark:(bg-black text-white border-white) border-black border-y-1">
+  <div class="w-full dark:(border-white) border-black border-y-1">
     <div class="max-w-full md:max-w-11/12 m-auto py-4 md:py-12 <md:(dark:border-t-1 border-white)">
       <div class="grid md:grid-cols-3 gap-3 text-center <md:divide-y md:divide-x dark:divide-white divide-black">
         <div class="grid grid-rows-auto gap-2 py-4 md:py-0">
diff --git a/docs2/components/home/Features.vue b/docs2/components/home/Features.vue
index 53bf7bae..81a2bf7f 100644
--- a/docs2/components/home/Features.vue
+++ b/docs2/components/home/Features.vue
@@ -24,7 +24,7 @@ onBeforeUnmount(stop)
 </script>
 
 <template>
-  <div ref="el" class="w-full dark:(bg-black text-white)">
+  <div ref="el" class="w-full">
     <div
       class="flex flex-col divide-y divide-gray-500 md:divide-y-0 gap-12 md:gap-24 lg:gap-36 max-w-9/12 md:max-w-11/12 lg:max-w-9/12 m-auto py-12 md:py-24 text-center md:text-left"
     >
diff --git a/docs2/components/home/flows/Intro.vue b/docs2/components/home/flows/Intro.vue
index 7eddbdf6..4ddb904b 100644
--- a/docs2/components/home/flows/Intro.vue
+++ b/docs2/components/home/flows/Intro.vue
@@ -239,7 +239,7 @@ const animations = ref<{ className: string; duration: number }[]>(shuffle(create
 </script>
 
 <template>
-  <VueFlow ref="el" class="dark:bg-black bg-white transition-colors duration-200 ease-in-out">
+  <VueFlow ref="el">
     <XyzTransition xyz="fade down ease-out-back duration-10" mode="out-in">
       <Background v-if="animatedBackground">
         <template #pattern-container="{ id }">
@@ -306,21 +306,21 @@ const animations = ref<{ className: string; duration: number }[]>(shuffle(create
       </template>
       <template v-else-if="props.id === 'documentation'">
         <div class="flex">
-          <router-link class="link group bg-[#f15a16]" to="/guide/"> Read The Documentation </router-link>
+          <router-link class="intro-link group bg-[#f15a16]" to="/guide/"> Read The Documentation </router-link>
         </div>
         <Handle type="target" :position="Position.Top" />
         <Handle class="block md:hidden" type="source" :position="Position.Bottom" />
       </template>
       <template v-else-if="props.id === 'examples'">
         <div class="flex">
-          <router-link class="link group bg-[#ef467e]" to="/examples/"> Check The Examples </router-link>
+          <router-link class="intro-link group bg-[#ef467e]" to="/examples/"> Check The Examples </router-link>
         </div>
         <Handle type="target" :position="Position.Top" />
         <Handle class="block md:hidden" type="source" :position="Position.Bottom" />
       </template>
       <template v-else-if="props.id === 'acknowledgement'">
         <div class="flex" @click="scrollTo">
-          <button class="link group bg-sky-500"><Heart class="text-red-500" /> Acknowledgement</button>
+          <button class="intro-link group bg-sky-500"><Heart class="text-red-500" /> Acknowledgement</button>
         </div>
         <Handle type="target" :position="Position.Top" />
       </template>
@@ -431,7 +431,7 @@ const animations = ref<{ className: string; duration: number }[]>(shuffle(create
   hover:(ring ring-white);
 }
 
-.link {
+.intro-link {
   @apply flex
   gap-3
   items-center
diff --git a/docs2/src/.vitepress/components.d.ts b/docs2/src/.vitepress/components.d.ts
index 4379bb9e..7a638935 100644
--- a/docs2/src/.vitepress/components.d.ts
+++ b/docs2/src/.vitepress/components.d.ts
@@ -5,8 +5,34 @@ import '@vue/runtime-core'
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    Acknowledgement: typeof import('./../../components/home/Acknowledgement.vue')['default']
+    Additional: typeof import('./../../components/home/flows/Additional.vue')['default']
+    App: typeof import('./../../components/examples/basic/App.vue')['default']
+    Banner: typeof import('./../../components/home/Banner.vue')['default']
+    Basic: typeof import('./../../components/home/flows/Basic.vue')['default']
+    Controls: typeof import('./../../components/examples/save-restore/Controls.vue')['default']
+    Custom: typeof import('./../../components/home/edges/Custom.vue')['default']
+    CustomConnectionLine: typeof import('./../../components/examples/connectionline/CustomConnectionLine.vue')['default']
+    CustomEdge: typeof import('./../../components/examples/edges/CustomEdge.vue')['default']
+    CustomEdge2: typeof import('./../../components/examples/edges/CustomEdge2.vue')['default']
+    CustomEdgeLabel: typeof import('./../../components/examples/edges/CustomEdgeLabel.vue')['default']
+    CustomInput: typeof import('./../../components/examples/validation/CustomInput.vue')['default']
+    CustomNode: typeof import('./../../components/examples/custom-node/CustomNode.vue')['default']
+    Features: typeof import('./../../components/home/Features.vue')['default']
+    Flow: typeof import('./../../components/examples/multi/Flow.vue')['default']
+    Home: typeof import('./../../components/home/Home.vue')['default']
+    Input: typeof import('./../../components/home/nodes/Input.vue')['default']
+    InteractionControls: typeof import('./../../components/examples/interaction/InteractionControls.vue')['default']
+    Intro: typeof import('./../../components/home/flows/Intro.vue')['default']
+    Nested: typeof import('./../../components/home/flows/Nested.vue')['default']
+    Output: typeof import('./../../components/home/nodes/Output.vue')['default']
+    PiniaExample: typeof import('./../../components/examples/pinia/PiniaExample.vue')['default']
+    Repl: typeof import('./../../components/Repl.vue')['default']
+    RGB: typeof import('./../../components/home/flows/RGB.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    Sidebar: typeof import('./../../components/examples/dnd/Sidebar.vue')['default']
+    TeleportableNode: typeof import('./../../components/examples/teleport/TeleportableNode.vue')['default']
   }
 }
 
diff --git a/docs2/src/.vitepress/config.ts b/docs2/src/.vitepress/config.ts
index 0574ceca..763f9d5a 100644
--- a/docs2/src/.vitepress/config.ts
+++ b/docs2/src/.vitepress/config.ts
@@ -65,7 +65,7 @@ export default defineConfigWithTheme<DefaultTheme.Config>({
         config: resolve(__dirname, './windi.config.ts'),
       }),
       Components({
-        dirs: [resolve(__dirname, '../../components')],
+        dirs: [resolve(__dirname, './../../components')],
         deep: true,
         // allow auto load markdown components under `./src/components/`
         extensions: ['vue', 'md'],
diff --git a/docs2/src/index.md b/docs2/src/index.md
index 1531bce5..9b8f688f 100644
--- a/docs2/src/index.md
+++ b/docs2/src/index.md
@@ -1,8 +1,7 @@
 ---
-home: true
+layout: home
 heroText: null
 tagline: null
-footer: MIT Licensed | Copyright © 2021-present Burak Cakmakoglu
 ---
 
 <Home />