diff --git a/docs/app.vue b/docs/app.vue
index cafbc25..d8ffef7 100644
--- a/docs/app.vue
+++ b/docs/app.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { ParsedContent } from '@nuxt/content/dist/runtime/types'
 import Header from './components/Header.vue'
+import Footer from './components/Footer.vue';
 
 
 const { seo } = useAppConfig()
@@ -22,11 +23,12 @@ provide('navigation', navigation)
   <div>
     <NuxtLoadingIndicator />
     <Header />
-      <NuxtLayout >
-        <NuxtPage />
-      </NuxtLayout>
+    <NuxtLayout >
+      <NuxtPage />
+    </NuxtLayout>
     <ClientOnly>
       <LazyUContentSearch :files="files" :navigation="navigation" />
     </ClientOnly>
+    <Footer />
   </div>
 </template>
diff --git a/docs/components/CodeGroup.vue b/docs/components/CodeGroup.vue
index f76ec01..3589147 100644
--- a/docs/components/CodeGroup.vue
+++ b/docs/components/CodeGroup.vue
@@ -13,6 +13,7 @@ const props = defineProps({
 
 const slots = useSlots();
 const selectedIndex = ref(0);
+const isCopied = ref(false);
 
 function transformSlot(slot: any, index: number) {
   if (typeof slot.type === "symbol") {
@@ -34,16 +35,21 @@ const selectedTab = computed(() => tabs.value[selectedIndex.value]);
 function copytoclipboard() {
   const code = selectedTab?.value.component.props.code;
   navigator.clipboard.writeText(code);
+  isCopied.value = true;
+  setTimeout(() => {
+      isCopied.value = false;
+    }, 1000);
 }
+
 </script>
 
 <template>
-  <div class="border rounded-md">
-    <div class="flex items-center justify-between">
+  <div class="border rounded-md my-2.5">
+    <div class="flex items-center justify-between border-b">
       <div class="flex">
         <button
-          class="px-5 py-1 ms-2 my-2 rounded-md flex gap-x-2 items-center"
-          :class="{ 'bg-gray-100': index == selectedIndex }"
+          class="px-2 py-1.5 ms-2 my-2 text-sm text-gray-700 rounded-md flex gap-x-2 items-center"
+          :class="{ 'bg-slate-100': index == selectedIndex }"
           v-for="(tab, index) in tabs"
           :key="index"
           tabindex="-1"
@@ -51,18 +57,22 @@ function copytoclipboard() {
         >
           <div>
             <span v-if="tab.label == 'Form.vue'">
-              <vue-icon class="w-4" />
+              <vue-icon class="w-3.5" />
             </span>
             <span v-if="tab.label == 'Form.svelte'">
-              <svelte-icon class="w-4"/>
+              <svelte-icon class="w-3.5"/>
             </span>
           </div>
           <span>{{ tab.label }}</span>
         </button>
       </div>
-      <span class="px-2" @click="copytoclipboard"> <copy-icon class="w-4 fill-gray-500 cursor-pointer hover:fill-gray-700"/></span>
+      <div
+      class="px-2 relative group" @click="copytoclipboard"> <copy-icon class="w-4 fill-gray-500 cursor-pointer" :class="{'fill-gray-800':isCopied}"/>
+      <span v-if="!isCopied" class="absolute -right-10 -top-7 px-2 py-[3px] invisible opacity-0 group-hover:opacity-100 group-hover:visible text-nowrap text-xs text-gray-600 bg-white shadow-lg rounded-md border border-gray-100 transition-all duration-300">Copy to clipboard</span>
+      <span v-if="isCopied" class="absolute -right-3 -top-7 px-2 py-[3px] text-nowrap text-xs text-gray-600 bg-white shadow-lg rounded-md border border-gray-100 transition-all duration-300">Copied</span>
+      </div>
     </div>
-    <div class="px-5 py-2 bg-gray-50 rounded-md">
+    <div class="px-5 py-3 bg-gray-50 rounded-md">
       <component :is="selectedTab?.component" :key="selectedIndex" />
     </div>
   </div>
diff --git a/docs/components/Footer.vue b/docs/components/Footer.vue
index c036ac8..9661f60 100644
--- a/docs/components/Footer.vue
+++ b/docs/components/Footer.vue
@@ -6,8 +6,8 @@ import twitterIcon from "./icon/twitter.icon.vue";
 </script>
 
 <template>
-  <footer class="border-t sticky bottom-0 left-0 bg-white z-20">
-    <div class="py-5 max-lg:py-10">
+  <footer class="border-t bg-white z-20">
+    <div class="py-3.5 max-lg:py-10">
       <div class="max-w-7xl mx-auto px-6">
         <div
           class="lg:flex items-center lg:justify-between sm:max-md:flex-col sm:max-md:items-center max-lg:space-y-5"
@@ -18,9 +18,9 @@ import twitterIcon from "./icon/twitter.icon.vue";
            <a href="https://radixweb.com/" class="hover:underline"">Developed & Maintained By <b>Radixians</b></a>
           </p>
           <div
-            class="flex items-center lg:pe-4 space-x-4 max-lg:text-center lg:text-center md:order-1 lg:order-2"
+            class="flex items-center space-x-4 max-lg:text-center lg:text-center md:order-1 lg:order-2 p-2 rounded-md hover:bg-gray-50"
           >
-            <span><a href="https://github.com/nattyjs/tidy"><github-icon class="w-5 fill-gray-700 cursor-pointer" /></a></span>
+            <span><a href="https://github.com/nattyjs/tidy"><github-icon class="w-5 fill-gray-700 cursor-pointer hover:fill-gray-900" /></a></span>
           </div>
         </div>
       </div>
diff --git a/docs/components/Header.vue b/docs/components/Header.vue
index f686191..0dbfde9 100644
--- a/docs/components/Header.vue
+++ b/docs/components/Header.vue
@@ -20,8 +20,8 @@ import SearchIcon from "./icon/search.icon.vue";
 
           </div>
           <div class="space-x-5 flex items-center">
-            <span>
-             <a href="https://github.com/nattyjs/tidy" target="_blank"> <github-icon class="w-5 fill-gray-700 cursor-pointer" /></a>
+            <span class="p-2 hover:bg-gray-50 rounded-md">
+             <a href="https://github.com/nattyjs/tidy" target="_blank"> <github-icon class="w-5 fill-gray-700 cursor-pointer hover:fill-gray-900" /></a>
             </span>
           </div>
         </nav>
diff --git a/docs/components/NavigationTree.vue b/docs/components/NavigationTree.vue
index 15c21c0..8ab98f5 100644
--- a/docs/components/NavigationTree.vue
+++ b/docs/components/NavigationTree.vue
@@ -1,30 +1,64 @@
+<script setup lang="ts">
+import { useRoute } from "vue-router";
+import DownArrowIcon from "./icon/down-arrow.icon.vue";
+const route = useRoute();
+const { data: navigation } = await useAsyncData("contentNavigation", () =>
+  fetchContentNavigation()
+);
+const openIndexes = ref<number[]>([]);
+
+function toggleDropdown(index: number) {
+  if (openIndexes.value.includes(index)) {
+    openIndexes.value = openIndexes.value.filter((i) => i !== index);
+  } else {
+    openIndexes.value.push(index);
+  }
+}
+</script>
+
 <template>
-  <div class="max-h-[calc(100vh-110px)] overflow-y-scroll pb-10 z-10">
+  <div class="max-h-[calc(100vh-100px)] overflow-y-scroll pb-3 z-10">
     <div v-for="(items, index) in navigation" :key="index">
-      <h5 class="text-sm font-semibold text-gray-600 pt-4 pb-2">
-        {{ items.title }}
-      </h5>
-      <div v-if="items.children">
-        <nav class="ps-2">
-          <NuxtLink
-            class="text-sm mt-1 block ps-3 font-DMSans_Regular text-gray-500 hover:text-green-500 cursor-pointer border-l  pt-1 py-1" :class="{'text-green-500 border-l-green-400 ': route.path === item._path}"
-            v-for="item in items.children"
-            :to="item._path"
-            :key="item.title"
-            >{{ item.title }}
-          </NuxtLink>
-        </nav>
+      <div class="pt-4 pb-2">
+        <h5
+          @click="toggleDropdown(index)"
+          class="flex justify-between items-center text-sm font-semibold text-gray-600"
+        >
+          <span class="cursor-pointer">{{
+            items.title
+          }}</span>
+          <span class="pe-5"
+            ><down-arrow-icon
+              class="w-4 fill-gray-500 transition-all duration-300"
+              :class="{ '-rotate-90': !openIndexes.includes(index) }"
+          /></span>
+        </h5>
+      </div>
+      <div
+        :class="{
+          'max-h-full overflow-y-auto': openIndexes.includes(index),
+          'max-h-0': !openIndexes.includes(index),
+        }"
+        class="overflow-hidden transition-max-height duration-700"
+      >
+        <div v-if="items.children">
+          <nav class="ps-2">
+            <NuxtLink
+              class="text-sm mt-1 block ps-3 font-DMSans_Regular text-gray-500 hover:text-green-500 hover:border-l-green-400 cursor-pointer border-l pt-1 py-1"
+              :class="{
+                'text-green-500 border-l-green-400 ': route.path === item._path,
+              }"
+              v-for="item in items.children"
+              :to="item._path"
+              :key="item.title"
+              >{{ item.title }}
+            </NuxtLink>
+          </nav>
+        </div>
       </div>
     </div>
   </div>
 </template>
-<script setup lang="ts">
-import { useRoute } from 'vue-router';
-const route = useRoute()
-const { data: navigation } = await useAsyncData("contentNavigation", () =>
-  fetchContentNavigation()
-);
-</script>
 
 <style scoped>
 ::-webkit-scrollbar {
diff --git a/docs/components/UButton.vue b/docs/components/UButton.vue
index 0607653..4c42fee 100644
--- a/docs/components/UButton.vue
+++ b/docs/components/UButton.vue
@@ -1,39 +1,41 @@
 <template>
-    <div class=" inline-block pb-5">
-        <button :class="props.class" class="bg-[#00C16A] hover:bg-green-600 rounded-md px-3 py-1.5 text-white font-medium me-5 text-sm transition-all duration-300">
-            <a :href="props.to" :target="target">
-                {{ props.label }}
-            </a>
-        </button>
-    </div>
-
-
-
-
+  <div class="inline-block pt-2 pb-2">
+    <button
+      :class="props.class"
+      class="bg-[#00C16A] hover:bg-green-600 rounded-md px-3 py-1.5 text-white font-medium me-5 text-sm transition-all duration-300"
+    >
+      <a :href="props.to" :target="target" class="flex gap-x-1">
+        <span><spark-icon class="w-5 fill-white" /></span>
+        {{ props.label }}
+      </a>
+    </button>
+  </div>
 </template>
+
 <script setup lang="ts">
-import { defineProps, PropType } from 'vue';
-    const props = defineProps({
-        class:{
-            type:String as PropType<any>,
-            default:''
-        },
-        label:{
-            type:String as PropType<any>,
-            default:''
-        },
-        icon:{
-            type:String as PropType<any>,
-            default:''
-        },
-        target:{
-            type:String as PropType<any>,
-            default:''
-        },
-        to:{
-            type:String as PropType<any>,
-            default:''
-        },
-    })
+import { defineProps, PropType } from "vue";
+import sparkIcon from "./icon/spark.icon.vue";
 
+const props = defineProps({
+  class: {
+    type: String as PropType<any>,
+    default: "",
+  },
+  label: {
+    type: String as PropType<any>,
+    default: "",
+  },
+  icon: {
+    type: String as PropType<any>,
+    default: "",
+  },
+  target: {
+    type: String as PropType<any>,
+    default: "",
+  },
+  to: {
+    type: String as PropType<any>,
+    default: "",
+  },
+});
 </script>
diff --git a/docs/components/UCode.vue b/docs/components/UCode.vue
index 3758c98..5972633 100644
--- a/docs/components/UCode.vue
+++ b/docs/components/UCode.vue
@@ -2,6 +2,7 @@
 <script setup lang="ts">
 import { defineProps } from "vue";
 import copyIcon from "./icon/copy.icon.vue";
+import terminalIcon from "./icon/terminal.icon.vue";
 
 let copied = false
 const props = defineProps({
@@ -13,6 +14,7 @@ const props = defineProps({
 
 const slots = useSlots();
 const selectedIndex = ref(0);
+const isCopied = ref(false);
 
 function transformSlot(slot: any, index: number) {
   if (typeof slot.type === "symbol") {
@@ -34,20 +36,31 @@ const tabs = computed(
 function copytoclipboard() {
   const code = tabs?.value.component.props.code;
   navigator.clipboard.writeText(code);
+  isCopied.value = true;
+  setTimeout(() => {
+      isCopied.value = false;
+    }, 1000);
 }
 
 console.log(tabs.value);
 </script>
 
 <template>
-  <div class="relative border rounded-md">
-    <div class="flex items-center justify-between px-2 pt-2">
-      <div>
-        <button v-if="tabs.label !== '0'" class="text-gray-700 text-sm tracking-wide ps-3">{{ tabs.label }}</button>
+  <div class="relative border rounded-md my-4 max-xl:max-w-lg">
+    <div v-if="tabs.label !== '0'" class="flex items-center justify-between px-2 py-3 border-b">
+      <div class="flex items-center gap-x-2 px-3">
+        <span v-if="tabs.label !== '0'"><terminal-icon class="w-3.5 fill-gray-600" /></span>
+        <button v-if="tabs.label !== '0'" class="text-gray-700 text-sm tracking-wide">{{ tabs.label }}</button>
       </div>
-      <span  @click="copytoclipboard"><copy-icon class="w-4 fill-gray-500 hover:fill-gray-700 cursor-pointer pb-2"/></span>
     </div>
-    <div class="px-5 py-2 bg-gray-50 rounded-b-md">
+    <div :class="{'absolute top-3 right-3':tabs.label !== 0}"  @click="copytoclipboard">
+      <div class="relative group">
+        <copy-icon class="w-4 fill-gray-500 hover:fill-gray-700 cursor-pointer"/>
+        <span v-if="!isCopied" class="absolute -right-11 -top-7 px-2 py-[3px] invisible opacity-0 group-hover:opacity-100 group-hover:visible text-nowrap text-xs text-gray-600 bg-white shadow-lg rounded-md border border-gray-100 transition-all duration-300">Copy to clipboard</span>
+        <span v-if="isCopied" class="absolute -right-4 -top-7 px-2 py-[3px] text-nowrap text-xs text-gray-600 bg-white shadow-lg rounded-md border border-gray-100 transition-all duration-300">Copied</span>
+      </div>
+    </div>
+    <div class="px-5 py-3 bg-gray-50 rounded-b-md rounded-t-md ">
       <component :is="tabs?.component" :key="tabs.label" />
     </div>
   </div>
diff --git a/docs/components/icon/copy.icon.vue b/docs/components/icon/copy.icon.vue
index 26ad638..a0fdb21 100644
--- a/docs/components/icon/copy.icon.vue
+++ b/docs/components/icon/copy.icon.vue
@@ -1,7 +1,7 @@
 <template>
   <svg
     viewBox="0 0 24 24"
-    fill="none"
+    fill=""
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
diff --git a/docs/components/icon/down-arrow.icon.vue b/docs/components/icon/down-arrow.icon.vue
new file mode 100644
index 0000000..761542a
--- /dev/null
+++ b/docs/components/icon/down-arrow.icon.vue
@@ -0,0 +1,10 @@
+<template>
+  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M4.29289 8.29289C4.68342 7.90237 5.31658 7.90237 5.70711 8.29289L12 14.5858L18.2929 8.29289C18.6834 7.90237 19.3166 7.90237 19.7071 8.29289C20.0976 8.68342 20.0976 9.31658 19.7071 9.70711L12.7071 16.7071C12.3166 17.0976 11.6834 17.0976 11.2929 16.7071L4.29289 9.70711C3.90237 9.31658 3.90237 8.68342 4.29289 8.29289Z"
+      fill=""
+    />
+  </svg>
+</template>
diff --git a/docs/components/icon/right-arrow-icon.vue b/docs/components/icon/right-arrow-icon.vue
index cf0b96b..de3e309 100644
--- a/docs/components/icon/right-arrow-icon.vue
+++ b/docs/components/icon/right-arrow-icon.vue
@@ -1,23 +1,29 @@
 <template>
   <svg
-    fill=""
     version="1.1"
     id="Layer_1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
-    viewBox="0 0 492.004 492.004"
+    viewBox="0 0 32 32"
+    enable-background="new 0 0 32 32"
     xml:space="preserve"
   >
-    <g>
-      <g>
-        <path
-          d="M484.14,226.886L306.46,49.202c-5.072-5.072-11.832-7.856-19.04-7.856c-7.216,0-13.972,2.788-19.044,7.856l-16.132,16.136
-			c-5.068,5.064-7.86,11.828-7.86,19.04c0,7.208,2.792,14.2,7.86,19.264L355.9,207.526H26.58C11.732,207.526,0,219.15,0,234.002
-			v22.812c0,14.852,11.732,27.648,26.58,27.648h330.496L252.248,388.926c-5.068,5.072-7.86,11.652-7.86,18.864
-			c0,7.204,2.792,13.88,7.86,18.948l16.132,16.084c5.072,5.072,11.828,7.836,19.044,7.836c7.208,0,13.968-2.8,19.04-7.872
-			l177.68-177.68c5.084-5.088,7.88-11.88,7.86-19.1C492.02,238.762,489.228,231.966,484.14,226.886z"
-        />
-      </g>
-    </g>
+    <line
+      fill="none"
+      stroke=""
+      stroke-width="2"
+      stroke-miterlimit="10"
+      x1="26"
+      y1="16"
+      x2="4"
+      y2="16"
+    />
+    <polyline
+      fill="none"
+      stroke=""
+      stroke-width="2"
+      stroke-miterlimit="10"
+      points="18,7.5 26.5,16 18,24.5 "
+    />
   </svg>
 </template>
diff --git a/docs/components/icon/spark.icon.vue b/docs/components/icon/spark.icon.vue
new file mode 100644
index 0000000..1c1a70e
--- /dev/null
+++ b/docs/components/icon/spark.icon.vue
@@ -0,0 +1,11 @@
+<template>
+  <svg
+    viewBox="0 0 16 16"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+  >
+    <rect width="16" height="16" id="icon-bound" fill="none" />
+    <path d="M10,1L3,9h4.5L6,15l7-8H8.5L10,1z" />
+  </svg>
+</template>
diff --git a/docs/components/icon/terminal.icon.vue b/docs/components/icon/terminal.icon.vue
new file mode 100644
index 0000000..429d2e8
--- /dev/null
+++ b/docs/components/icon/terminal.icon.vue
@@ -0,0 +1,11 @@
+<template>
+  <svg fill="" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M9.25 12a.75.75 0 01-.22.53l-2.75 2.75a.75.75 0 01-1.06-1.06L7.44 12 5.22 9.78a.75.75 0 111.06-1.06l2.75 2.75c.141.14.22.331.22.53zm2 2a.75.75 0 000 1.5h5a.75.75 0 000-1.5h-5z"
+    />
+    <path
+      fill-rule="evenodd"
+      d="M0 4.75C0 3.784.784 3 1.75 3h20.5c.966 0 1.75.784 1.75 1.75v14.5A1.75 1.75 0 0122.25 21H1.75A1.75 1.75 0 010 19.25V4.75zm1.75-.25a.25.25 0 00-.25.25v14.5c0 .138.112.25.25.25h20.5a.25.25 0 00.25-.25V4.75a.25.25 0 00-.25-.25H1.75z"
+    />
+  </svg>
+</template>
diff --git a/docs/pages/[...slug].vue b/docs/pages/[...slug].vue
index 013edc8..29a68ad 100644
--- a/docs/pages/[...slug].vue
+++ b/docs/pages/[...slug].vue
@@ -4,14 +4,14 @@ import UButton from "~/components/UButton.vue";
 import TocLinks from "~/components/TocLinks.vue";
 import UCode from "~/components/UCode.vue";
 import rightArrowIcon from "~/components/icon/right-arrow-icon.vue";
-import { onMounted } from 'vue';
+import { onMounted } from "vue";
 // import hljs from "highlight.js";
 
 const route = useRoute();
 const components = {
   "code-group": CodeGroup,
   "u-button": UButton,
-  "u-code":UCode
+  "u-code": UCode,
 };
 
 // onMounted(() => {
@@ -25,17 +25,17 @@ definePageMeta({
   layout: "docs",
 });
 
-const { data:page } = await useAsyncData(`content-${route.path}`, () =>
+const { data: page } = await useAsyncData(`content-${route.path}`, () =>
   queryContent().where({ _path: route.path }).findOne()
 );
 
 useSeoMeta({
-  titleTemplate: '',
+  titleTemplate: "",
   title: page.value.title,
   ogTitle: page.value.title,
   description: page.value.description,
-  ogDescription: page.value.description
-})
+  ogDescription: page.value.description,
+});
 
 const { data: surround } = await useAsyncData(`${route.path}-surround`, () =>
   queryContent()
@@ -46,117 +46,180 @@ const { data: surround } = await useAsyncData(`${route.path}-surround`, () =>
 
 const toclinks = page?.value.body.toc.links;
 
-
 const [prev, next] = surround.value || [];
 
-console.log(page.value)
+console.log(page.value);
 
-console.log(page.value?._dir)
+console.log(page.value?._dir);
 // const headline = page?.value?._dir?.split('-').map((p)=>(p[0].toUpperCase()+p.slice(1))).join(' ')
 // const headline = computed(() => {
 //   return (page.value._dir).split('-').map((p)=>(p[0].toUpperCase()+p.slice(1))).join(' ')
 // })
-
-
 </script>
 
 <template>
   <div class="flex gap-x-8">
-    <div class="content w-9/12 py-5">
-    <div class="border-b">
-      <h2 class="text-4xl font-semibold py-5">{{ page?.title }}</h2>
-      <h5 class="text-lg text-gray-500 tracking-wide leading-7 pb-5">{{ page?.description }}</h5>
-    </div>
-      <ContentRenderer v-if="page" :value="page" :components="components"  id="contentrenderer" />
-        <!-- <ContentRendererMarkdown id="contentrenderer" :value="page" :components="components" />
+    <div
+      class="content py-5 pb-20 max-xl:max-w-lg max-2xl:max-w-2xl max-2xl:w-full"
+      :class="{
+        'w-9/12': toclinks.length <= 1
+      }"
+    >
+      <div class="border-b pb-3 mb-2 xl:mb-3">
+        <h2 class="text-3xl 2xl:text-4xl font-semibold py-5">{{ page?.title }}</h2>
+        <h5 class="text-sm xl:text-base 2xl:text-lg text-gray-500 tracking-wide leading-7 pb-3 xl:pb-5 text-justify" :class="{'hidden':page?.description.length == 0}">
+          {{ page?.description }}
+        </h5>
+      </div>
+      <ContentRenderer
+        v-if="page"
+        :value="page"
+        :components="components"
+        id="contentrenderer"
+      />
+      <!-- <ContentRendererMarkdown id="contentrenderer" :value="page" :components="components" />
       </ContentRenderer> -->
       <hr v-if="surround?.length" />
       <div v-if="surround" class="surround-div flex justify-end my-5 gap-x-5">
-        <div v-if="prev" class="prev w-1/2 h-48 border rounded-md hover:bg-gray-50 group px-5 py-4 transition-all duration-300">
+        <div
+          v-if="prev"
+          class="prev w-1/2 border rounded-md hover:bg-gray-50 group px-5 py-2 xl:py-4 transition-all duration-300"
+        >
           <NuxtLink :to="prev._path">
-            <div v-if="prev" class="surround-prev space-y-3">
-              <div class="bg-gray-100 group-hover:bg-green-50 group-hover:border-green-200 px-2.5 py-2.5 transition-all duration-300 w-fit rounded-full border"><right-arrow-icon class="w-4 fill-gray-500 rotate-180"/></div>
-              <h5 class="text-gray-800 font-medium">{{ prev.title }}</h5>
-              <p class="text-sm text-gray-400">{{ prev.description.slice(0,100)+'...' }}</p>
+            <div v-if="prev" class="surround-prev space-y-2 2xl:space-y-3 py-2">
+              <div
+                class="bg-slate-100 group-hover:bg-green-50 group-hover:border-green-400 p-1.5 xl:p-2 transition-all duration-300 w-fit rounded-full border"
+              >
+                <right-arrow-icon
+                  class="w-4 xl:w-5 stroke-gray-900 group-hover:stroke-green-500 rotate-180"
+                />
+              </div>
+              <h5 class="text-gray-800 font-medium text-sm xl:text-base">{{ prev.title }}</h5>
+              <p class="text-sm text-gray-400">
+                {{ prev.description.slice(0, 80) + "..." }}
+              </p>
             </div>
           </NuxtLink>
         </div>
-        <div v-if="next" class="next text-right w-1/2 h-48 border rounded-md hover:bg-gray-50 px-5 py-4 group transition-all duration-300">
+        <div
+          v-if="next"
+          class="next text-right w-1/2 border rounded-md hover:bg-gray-50 px-5 py-2 xl:py-4 group transition-all duration-300"
+        >
           <NuxtLink :to="next._path">
-            <div v-if="next" class="surround-next space-y-3 flex flex-col items-end">
-              <div class="bg-gray-100 group-hover:bg-green-50 group-hover:border-green-200 px-2.5 py-2.5 transition-all duration-300 w-fit rounded-full border"><right-arrow-icon class="w-4 fill-gray-500"/></div>
-              <h5 class="text-gray-800 font-medium">{{ next.title }}</h5>
-              <p class="text-sm text-gray-400">{{ next.description.slice(0,100)+'...' }}</p>
+            <div
+              v-if="next"
+              class="surround-next space-y-2 2xl:space-y-3 flex py-2 flex-col items-end"
+            >
+              <div
+                class="bg-slate-100 group-hover:bg-green-50 group-hover:border-green-400 p-1.5 xl:p-2 transition-all duration-300 w-fit rounded-full border"
+              >
+                <right-arrow-icon
+                  class="w-4 xl:w-5 stroke-gray-900 group-hover:stroke-green-500"
+                />
+              </div>
+              <h5 class="text-gray-800 font-medium text-sm xl:text-base">{{ next.title }}</h5>
+              <p class="text-sm text-gray-400">
+                {{ next.description.slice(0, 80) + "..." }}
+              </p>
             </div>
           </NuxtLink>
         </div>
       </div>
+      {{ console.log(`Console.log ${toclinks.length > 1}`) }}
     </div>
-    <div class="3/12 relative">
-      <div class="min-w-52 sticky right-0 top-24" v-if="toclinks.length>1">
+    <div v-if="toclinks.length > 1" class="3/12 relative pe-5 pb-3">
+      <div
+        class="right-bar min-w-48 max-w-48 sticky right-0 top-24 max-h-[calc(100vh-110px)] overflow-y-auto"
+      >
         <TocLinks :toclinks="toclinks" />
+        {{ console.log(`Console.log ${toclinks.length > 1}`) }}
       </div>
     </div>
   </div>
 </template>
 
 <style>
-#contentrenderer h1{
-  font-size: 1.5rem;
+#contentrenderer h1 {
+  font-size: 2rem;
   font-weight: 600;
   padding-top: 20px;
+  padding-bottom: 20px;
 }
-#contentrenderer h2{
+#contentrenderer h2 {
   font-size: 1.5rem;
   font-weight: 600;
-  padding-top: 20px;
-  padding-bottom: 10px;
+  padding-top: 30px;
+  padding-bottom: 5px;
 }
-#contentrenderer h3{
-  font-size: 1rem;
+#contentrenderer h3 {
+  font-size: 1.25rem;
   font-weight: 600;
-  color:  rgb(0, 0, 0);
-  /* font-weight: 400; */
+  color: rgb(0, 0, 0);
   padding-top: 20px;
 }
-#contentrenderer h4{
+#contentrenderer h4 {
   font-size: 1rem;
   font-weight: 600;
-  padding: 15px 0;
-  /* color: rgb(55 65 81); */
+  padding-top: 15px;
 }
-#contentrenderer p{
+#contentrenderer p {
   font-size: 1rem;
   color: rgb(55 65 81);
   padding: 15px 0;
+  line-height: 1.5rem;
+  letter-spacing: 0.01em;
+  text-align: justify;
 }
-#contentrenderer p a{
-  color: #00C16A;
+#contentrenderer p a {
+  color: #00c16a;
 }
-#contentrenderer li a{
-  color: #00C16A;
+#contentrenderer li a {
+  color: #00c16a;
 }
-#contentrenderer ul{
-  padding: 10px 0;
-  padding-bottom: 0;
+#contentrenderer ul {
+  padding: 5px 0;
 }
-#contentrenderer ul li strong{
+#contentrenderer ul li strong {
   font-size: 1rem;
-  color: rgb(34 197 94);
+  color: black;
   padding: 20px 0;
-  font-weight: 400;
+  font-weight: 500;
 }
-#contentrenderer ol li strong{
+#contentrenderer ol li strong {
   font-size: 1rem;
-  color: rgb(34 197 94);
+  color: black;
   padding: 20px 0;
-  font-weight: 400;
+  font-weight: 500;
+  letter-spacing: 0.02rem;
 }
 #contentrenderer ul li {
   font-size: 1rem;
-  color: rgb(55 65 81);
-  padding: 5px 0;
+  color: rgb(55, 65, 81);
+  padding: 3px 0;
+  list-style: none;
+  margin-left: 1rem;
+  padding-left: 1rem;
+}
+#contentrenderer ol li ul li {
+  font-size: 1rem;
+  color: rgb(55, 65, 81);
+  padding: 3px 0;
+  list-style: none;
+  margin-left: 1rem;
+  padding-left: 1rem;
+}
+
+#contentrenderer ul li::marker {
+  content: "•";
+  font-size: 1.2rem;
+  color: rgb(209 213 219);
+}
+#contentrenderer ol li ul li::marker {
+  content: "•";
+  font-size: 1.2rem;
+  color: rgb(209 213 219);
 }
+
 #contentrenderer ol li {
   font-size: 1rem;
   color: rgb(55 65 81);
@@ -164,43 +227,77 @@ console.log(page.value?._dir)
   list-style: decimal;
   margin-left: 20px;
 }
-#contentrenderer ol li code {
-  font-size: 1rem;
-  color: rgb(55 65 81);
-  background-color: rgb(243 244 246);
-  padding: 1px 3px;
-  border-radius: 5px;
-}
 #contentrenderer table {
   font-size: 1rem;
-  width: 100%;
-  border-radius: 50%;
-  text-align: left;
+  width: 75%;
+  margin: 15px 0;
+}
+#contentrenderer table thead {
+  text-align: center;
 }
-#contentrenderer table thead{
-  background-color: rgb(249 250 251);
-  border-radius: 20px;
+#contentrenderer table tbody {
+  text-align: left;
 }
-#contentrenderer table thead tr th{
+#contentrenderer table thead tr th {
   font-size: 0.9rem;
-  color: rgb(75 85 99);
-  padding: 10px 20px;
+  color: rgb(17 24 39);
+  border-bottom: 1px solid rgb(209 213 219);
+  padding: 10px 10px;
   font-weight: 500;
 }
-#contentrenderer table tbody tr td{
+#contentrenderer table tbody tr {
+  border-bottom: 1px solid rgb(229 231 235);
+}
+#contentrenderer table tbody tr:last-child {
+  border-bottom: none;
+}
+#contentrenderer table tbody tr td {
   font-size: 0.9rem;
-  color: rgb(107 114 128);
-  padding: 8px 20px;
-  border-bottom: 1px solid rgb(243 244 246);
-  border-style: dashed;
+  color: rgb(55 65 81);
+  padding: 8px 6px;
 }
-pre  {
+#contentrenderer pre {
   max-width: 640px;
   overflow-x: auto;
 }
-pre code {
+#contentrenderer pre code {
   font-size: 0.9rem;
 }
+#contentrenderer p code {
+  color: rgb(31 41 55);
+  font-weight: 600;
+  font-size: 0.875em;
+  background-color: rgb(248 250 252);
+  padding: 0 0.375rem;
+  display: inline-block;
+  border-radius: 0.375rem;
+  border: 1px solid rgb(203 213 225);
+}
+#contentrenderer li code {
+  color: rgb(31 41 55);
+  font-weight: 600;
+  font-size: 0.875em;
+  background-color: rgb(248 250 252);
+  padding: 0 0.375rem;
+  display: inline-block;
+  border-radius: 0.375rem;
+  border: 1px solid rgb(203 213 225);
+}
+#contentrenderer a code {
+  color: rgb(31 41 55);
+  font-weight: 600;
+  font-size: 0.875em;
+  background-color: rgb(248 250 252);
+  padding: 0 10px;
+  display: inline-block;
+  border-radius: 0.375rem;
+  border: 1px solid rgb(203 213 225);
+  border-style: dashed;
+}
+hr {
+  margin-top: 2.5rem;
+  margin-bottom: 2.5rem;
+}
 ::-webkit-scrollbar {
   height: 4px;
   width: 10px;
@@ -211,78 +308,246 @@ pre code {
 ::-webkit-scrollbar-thumb {
   background: rgba(161, 160, 160, 0.603);
 }
-/* ::-webkit-scrollbar-thumb:hover {
-  background: gray;
-} */
-/* pre{
-  max-width: 100%;
-  overflow-x: hidden;
-  background-color: rgba(238, 233, 233, 0.801);
-  padding: 10px;
-  border-radius: 5px;
-} */
-/* #contentrenderer pre code{
-  border-radius: 5px;
-  padding: 20px;
-  background-color: rgb(243 244 246);
-} */
-/* .surround-div{
-  display: flex;
-  width: 100%;
-  column-gap: 10px;
-  padding: 10px  0px;
 
+.right-bar::-webkit-scrollbar {
+  width: 2px;
 }
-.prev{
-  width: 50%;
-  padding: 5px 10px;
-  border: 1px solid rgb(209 213 219);
-  border-radius: 5px;
-}
-.prev h5{
-font-weight: 500;
-color: rgb(107 114 128);
-}
-.next{
-  width: 50%;
-  padding: 5px 10px;
-  border: 1px solid rgb(209 213 219);
-  border-radius: 5px;
-}
-.next h5{
-font-weight: 500;
-color: rgb(107 114 128);
-} */
-
-
-/* main {
-  margin-top: 5px;
-  display: flex;
+.right-bar::-webkit-scrollbar-track {
+  background: white;
 }
-
-.content {
-  width: 70%;
+.right-bar::-webkit-scrollbar-thumb {
+  background: white;
 }
-.surround {
-  width: 370px;
-  padding: 1.5px;
-  padding-left: 10px;
-  border: 1px solid black;
-  height: 150px;
-  margin-right: 10px;
+.right-bar::-webkit-scrollbar-thumb:hover {
+  background: white;
 }
 
-.surround-div {
-  display: flex;
-  max-width: 170px;
-}
+/* responsiveness */
+
+@media (max-width: 1279px) {
+  #contentrenderer h1 {
+    font-size: 1rem;
+    font-weight: 600;
+    padding-top: 20px;
+    padding-bottom: 20px;
+  }
+  #contentrenderer h2 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    padding-top: 30px;
+  }
+  #contentrenderer h3 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: rgb(0, 0, 0);
+    padding-top: 20px;
+  }
+  #contentrenderer h4 {
+    font-size: 0.9rem;
+    padding-top: 15px;
+  }
+  #contentrenderer p {
+    font-size: 0.9rem;
+    padding: 10px 0;
+  }
+  #contentrenderer p a {
+    color: #00c16a;
+  }
+  #contentrenderer li a {
+    color: #00c16a;
+  }
+  #contentrenderer ul {
+    padding: 5px 0;
+  }
+  #contentrenderer ul li strong {
+    font-size: 0.9rem;
+    padding: 15px 0;
+  }
+  #contentrenderer ol li strong {
+    font-size: 0.9rem;
+    padding: 15px 0;
+  }
+  #contentrenderer ul li {
+    font-size: 0.9rem;
+    padding: 3px 0;
+    list-style: none;
+    margin-left: 1rem;
+    padding-left: 1rem;
+    text-align: justify;
+  }
+  #contentrenderer ol li ul li {
+    font-size: 0.9rem;
+    color: rgb(55, 65, 81);
+    padding: 3px 0;
+    list-style: none;
+    margin-left: 1rem;
+    padding-left: 1rem;
+  }
+
+  #contentrenderer ul li::marker {
+    content: "•";
+    font-size: 1.2rem;
+    color: rgb(209 213 219);
+  }
+  #contentrenderer ol li ul li::marker {
+    content: "•";
+    font-size: 1.2rem;
+    color: rgb(209 213 219);
+  }
 
-.prev {
-  margin-right: 20px;
+  #contentrenderer ol li {
+    font-size: 0.9rem;
+    margin-left: 15px;
+  }
+  #contentrenderer table {
+    font-size: 0.8rem;
+    width: 100%;
+    margin: 15px 0;
+  }
+  #contentrenderer table thead tr th {
+    font-size: 0.8rem;
+    padding: 10px 10px;
+  }
+  #contentrenderer table tbody tr td {
+    font-size: 0.8rem;
+    color: rgb(55 65 81);
+    padding: 8px 6px;
+  }
+  #contentrenderer pre {
+    max-width: 640px;
+    overflow-x: auto;
+  }
+  #contentrenderer pre code {
+    font-size: 0.9rem;
+  }
+  #contentrenderer p code {
+    font-weight: 550;
+    font-size: 0.8em;
+  }
+  #contentrenderer li code {
+    font-weight: 550;
+    font-size: 0.8em;
+  }
+  #contentrenderer a code {
+    font-weight: 550;
+    font-size: 0.85em;
+  }
+  hr {
+    margin-top: 2.5rem;
+    margin-bottom: 2.5rem;
+  }
 }
- .next {
-  margin-left: 30px;
-} */
+@media (max-width: 1535px) {
+  #contentrenderer h1 {
+    font-size: 1rem;
+    font-weight: 600;
+    padding-top: 20px;
+    padding-bottom: 20px;
+  }
+  #contentrenderer h2 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    padding-top: 30px;
+  }
+  #contentrenderer h3 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: rgb(0, 0, 0);
+    padding-top: 20px;
+  }
+  #contentrenderer h4 {
+    font-size: 0.9rem;
+    padding-top: 15px;
+  }
+  #contentrenderer p {
+    font-size: 0.9rem;
+    padding: 10px 0;
+  }
+  #contentrenderer p a {
+    color: #00c16a;
+  }
+  #contentrenderer li a {
+    color: #00c16a;
+  }
+  #contentrenderer ul {
+    padding: 5px 0;
+  }
+  #contentrenderer ul li strong {
+    font-size: 0.9rem;
+    padding: 15px 0;
+  }
+  #contentrenderer ol li strong {
+    font-size: 0.9rem;
+    padding: 15px 0;
+  }
+  #contentrenderer ul li {
+    font-size: 0.9rem;
+    padding: 3px 0;
+    list-style: none;
+    margin-left: 1rem;
+    padding-left: 1rem;
+    text-align: justify;
+  }
+  #contentrenderer ol li ul li {
+    font-size: 0.9rem;
+    color: rgb(55, 65, 81);
+    padding: 3px 0;
+    list-style: none;
+    margin-left: 1rem;
+    padding-left: 1rem;
+  }
 
-</style>
+  #contentrenderer ul li::marker {
+    content: "•";
+    font-size: 1.2rem;
+    color: rgb(209 213 219);
+  }
+  #contentrenderer ol li ul li::marker {
+    content: "•";
+    font-size: 1.2rem;
+    color: rgb(209 213 219);
+  }
 
+  #contentrenderer ol li {
+    font-size: 0.9rem;
+    margin-left: 15px;
+  }
+  #contentrenderer table {
+    font-size: 0.8rem;
+    width: 80%;
+    margin: 15px 0;
+  }
+  #contentrenderer table thead tr th {
+    font-size: 0.8rem;
+    padding: 10px 10px;
+  }
+  #contentrenderer table tbody tr td {
+    font-size: 0.8rem;
+    color: rgb(55 65 81);
+    padding: 8px 6px;
+  }
+  #contentrenderer pre {
+    max-width: 640px;
+    overflow-x: auto;
+  }
+  #contentrenderer pre code {
+    font-size: 0.9rem;
+  }
+  #contentrenderer p code {
+    font-weight: 550;
+    font-size: 0.8em;
+  }
+  #contentrenderer li code {
+    font-weight: 550;
+    font-size: 0.8em;
+  }
+  #contentrenderer a code {
+    font-weight: 550;
+    font-size: 0.85em;
+  }
+  hr {
+    margin-top: 2.5rem;
+    margin-bottom: 2.5rem;
+  }
+}
+</style>
diff --git a/docs/pages/index.vue b/docs/pages/index.vue
index 6c50787..2f67cb5 100644
--- a/docs/pages/index.vue
+++ b/docs/pages/index.vue
@@ -2,11 +2,12 @@
 import CopyIcon from "~/components/icon/copy.icon.vue";
 import RightArrowIcon from "~/components/icon/right-arrow-icon.vue";
 import SafeCheckIcon from "~/components/icon/safe-check.icon.vue";
-import Footer from "~/components/Footer.vue";
+// import Footer from "~/components/Footer.vue";
 
 const { data: page } = await useAsyncData("index", () =>
   queryContent("/").findOne()
 );
+const isCopied = ref(false);
 console.log(page);
 useSeoMeta({
   titleTemplate: "",
@@ -15,6 +16,15 @@ useSeoMeta({
   description: page.value.description,
   ogDescription: page.value.description,
 });
+
+
+// copy functionality pending....
+function copytoclipboard() {
+  isCopied.value = true;
+  setTimeout(() => {
+    isCopied.value = false;
+  }, 1000);
+}
 </script>
 
 <template>
@@ -37,11 +47,11 @@ useSeoMeta({
           <div class="">
             <NuxtLink :to="page?.hero.links[0].to">
               <button
-                class="border flex items-center gap-x-1.5 py-2 px-3 rounded-md bg-[#00C16A] tracking-wide text-sm font-medium text-white hover:bg-green-600"
+                class="border flex items-center gap-x-1.5 py-2 px-3 rounded-md bg-[#00C16A] tracking-wide text-sm font-medium text-white hover:bg-green-600 transition-all duration-300"
               >
                 <span>{{ page?.hero.links[0].label }}</span>
                 <span>
-                  <right-arrow-icon class="w-3 fill-white" />
+                  <right-arrow-icon class="w-5 stroke-white" />
                 </span>
               </button>
             </NuxtLink>
@@ -55,9 +65,25 @@ useSeoMeta({
               class="border py-3.5 px-4 rounded-t-md text-sm text-gray-600 tracking-wider flex justify-between"
             >
               <span><MDC :value="page?.hero.title" /></span>
-              <span>
+              <!-- <span>
                 <copy-icon class="w-4 fill-gray-600 hover:fill-gray-800 cursor-pointer" />
-              </span>
+              </span> -->
+              <div class="relative group">
+                <copy-icon
+                @click="copytoclipboard"
+                  class="w-4 fill-gray-500 hover:fill-gray-700 cursor-pointer"
+                />
+                <span
+                  v-if="!isCopied"
+                  class="absolute -right-12 -top-7 px-2 py-[3px] invisible opacity-0 group-hover:opacity-100 group-hover:visible text-nowrap text-xs text-gray-600 bg-white shadow-lg rounded-md border border-gray-100 transition-all duration-300"
+                  >Copy to clipboard</span
+                >
+                <span
+                  v-if="isCopied"
+                  class="absolute -right-5 -top-7 px-2 py-[3px] text-nowrap text-xs text-gray-600 bg-white shadow-lg rounded-md border border-gray-100 transition-all duration-300"
+                  >Copied</span
+                >
+              </div>
             </div>
             <p
               class="border py-3.5 px-4 rounded-b-md border-t-0 tracking-wider text-green-500 font-medium bg-gray-50"
@@ -79,10 +105,13 @@ useSeoMeta({
           <div
             v-for="item in page?.features?.items"
             :key="item?.title"
-            class="col-span-12 md:col-span-6 xl:col-span-4 border h-auto rounded-lg p-5 hover:bg-gray-50 cursor-pointer hover:border-green-400 transition-all duration-500 hover:-translate-y-1 hover:shadow-md  hover:bg-gradient-to-r from-white to-gray-100"
+            class="col-span-12 md:col-span-6 xl:col-span-4 border h-auto rounded-lg p-5 cursor-pointer hover:border-green-400 transition-all duration-500 hover:-translate-y-1 hover:shadow-lg group"
           >
+            {{ console.log(item.index) }}
             <span>
-              <safe-check-icon class="w-7 fill-gray-700" />
+              <safe-check-icon
+                class="w-7 fill-gray-700 group-hover:fill-gray-800 transition-all duration-300"
+              />
             </span>
             <p class="pt-2 text-base font-semibold text-gray-700">
               {{ item?.title }}
@@ -93,15 +122,14 @@ useSeoMeta({
           </div>
         </div>
         <div
-          class=" flex items-center gap-x-2 mt-24 mb-10 py-1.5 px-5 border border-gray-300 rounded-md font-medium text-gray-600 text-sm bg-gray-50 hover:bg-gray-100 cursor-pointer transition-all duration-300"
+          class="flex items-center gap-x-2 mt-24 mb-10 py-1.5 px-5 border border-gray-300 rounded-md font-medium text-gray-600 text-sm bg-slate-50 hover:bg-slate-100 cursor-pointer transition-all duration-300"
         >
           <NuxtLink :to="page?.features?.links[0].to">{{
             page?.features.links[0].label
           }}</NuxtLink>
-          <span><right-arrow-icon class="w-3 fill-gray-500 translate-y-[1px]" /></span>
+          <!-- <span><right-arrow-icon class="w-3 fill-gray-500 translate-y-[1px]" /></span> -->
         </div>
       </div>
     </div>
   </div>
-  <Footer />
 </template>