diff --git a/nuxt.config.ts b/nuxt.config.ts
index 70151a6..454516f 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -8,7 +8,7 @@ export default defineNuxtConfig({
         "@nuxt/content",
         ["@unocss/nuxt", { autoImport: false }],
         "nuxt-icon",
-        "nuxt-monaco-editor",
+        // "nuxt-monaco-editor", // not used right now
         "@nuxt/image",
         "@vueuse/nuxt",
         "nuxt-security"
@@ -28,5 +28,12 @@ export default defineNuxtConfig({
             theme: "github-dark",
             preload: ["json", "kotlin", "http", "js", "ts", "md", "shell"]
         }
+    },
+
+
+    router: {
+        options: {
+            scrollBehaviorType: "smooth"
+        }
     }
 });
diff --git a/package.json b/package.json
index 39f275f..2ec2708 100644
--- a/package.json
+++ b/package.json
@@ -8,24 +8,21 @@
     "preview": "nuxt preview"
   },
   "devDependencies": {
-    "@nuxt/content": "^2.8.5",
-    "@nuxt/devtools": "1.0.0-beta.3",
-    "@unocss/nuxt": "^0.56.5",
-    "monaco-editor": "^0.44.0",
-    "nuxt": "^3.7.4",
-    "nuxt-icon": "^0.5.0",
-    "nuxt-monaco-editor": "^1.2.3",
-    "nuxt-security": "1.0.0-rc.2",
-    "tailwindcss": "^3.3.3",
+    "@nuxt/content": "^2.12.0",
+    "@nuxt/devtools": "1.0.8",
+    "@unocss/nuxt": "^0.58.5",
+    "nuxt": "^3.10.1",
+    "nuxt-icon": "^0.6.8",
+    "nuxt-security": "1.1.1",
+    "tailwindcss": "^3.4.1",
     "vue-router": "^4.2.5"
   },
   "dependencies": {
-    "@headlessui/vue": "^1.7.16",
-    "@heroicons/vue": "^2.0.18",
-    "@julr/unocss-preset-forms": "^0.0.5",
+    "@headlessui/vue": "^1.7.19",
+    "@heroicons/vue": "^2.1.1",
+    "@julr/unocss-preset-forms": "^0.1.0",
     "@nuxt/image": "rc",
-    "@unocss/reset": "^0.56.5",
-    "@vueuse/nuxt": "^10.6.1",
-    "fetch-to-curl": "^0.6.0"
+    "@unocss/reset": "^0.58.5",
+    "@vueuse/nuxt": "^10.7.2"
   }
 }
diff --git a/src/components/content/Callout/Callout.vue b/src/components/content/Callout/Callout.vue
index 71008a5..a9ce69c 100644
--- a/src/components/content/Callout/Callout.vue
+++ b/src/components/content/Callout/Callout.vue
@@ -1,9 +1,9 @@
 <template>
     <div class="pt-4 px-4 bg-slate-800 text-slate-50 rounded-md border-l-4 flex gap-3" :class="borderClass">
         <div>
-            <CheckCircleIcon v-if="type==='Success'" class="text-green-700 h-6 mt-1"/>
-            <InformationCircleIcon v-if="type==='Info'" class="text-primary-300 h-6 mt-1"/>
-            <ExclamationTriangleIcon v-if="type==='Error'" class="text-red-400 h-6 mt-1"/>
+            <CheckCircleIcon v-if="type === 'Success'" class="text-green-700 h-6 mt-1" />
+            <InformationCircleIcon v-if="type === 'Info'" class="text-primary-300 h-6 mt-1" />
+            <ExclamationTriangleIcon v-if="type === 'Error'" class="text-red-400 h-6 mt-1" />
         </div>
         <slot />
     </div>
@@ -16,23 +16,22 @@ import { computed } from "vue";
 const props = defineProps({
     type: {
         type: String,
-        default: 'Info',
-        validator: (value: string) => ['Success', 'Error', 'Info'].includes(value),
+        default: "Info",
+        validator: (value: string) => ["Success", "Error", "Info"].includes(value),
         required: false,
-    }
-})
+    },
+});
 
 const borderClass = computed(() => {
     switch (props.type) {
-        case 'Success':
-            return 'border-green-500';
-        case 'Error':
-            return 'border-red-400';
-        case 'Info':
-            return 'border-primary-400';
+        case "Success":
+            return "border-green-500";
+        case "Error":
+            return "border-red-400";
+        case "Info":
+            return "border-primary-400";
         default:
-            return '';
+            return "";
     }
-})
-
+});
 </script>
diff --git a/src/components/content/HttpRequest.vue b/src/components/content/HttpRequest.vue
index 9bb39ff..5ba7970 100644
--- a/src/components/content/HttpRequest.vue
+++ b/src/components/content/HttpRequest.vue
@@ -1,25 +1,25 @@
 <template>
-    <div class="border pt-2 pb-3 px-3">
+<!--    <div class="border pt-2 pb-3 px-3">
         <div class="px-4 sm:px-0 flex justify-between items-center">
             <h3 class="text-base leading-7 text-white">
                 <span class="text-white mr-1">HTTP:</span> <span class="font-extrabold mr-0.5">{{ method }}</span> <a :href="url">{{ url }}</a>
                 <hr />
             </h3>
-            <!--            <span class="isolate inline-flex rounded-md shadow-sm">-->
-            <!--                <button-->
-            <!--                    class="relative inline-flex items-center gap-x-1.5 rounded-l-md bg-gray-800 px-3 py-2 text-sm font-semibold text-white ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"-->
-            <!--                    type="button"-->
-            <!--                >-->
-            <!--                    <BookmarkIcon aria-hidden="true" class="-ml-0.5 h-5 w-5 text-gray-400" />-->
-            <!--                    Bookmark for your use-case-->
-            <!--                </button>-->
-            <!--                <button-->
-            <!--                    class="relative -ml-px inline-flex items-center rounded-r-md bg-gray-600 px-3 py-2 text-sm font-semibold text-gray-200 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"-->
-            <!--                    type="button"-->
-            <!--                >-->
-            <!--                    12-->
-            <!--                </button>-->
-            <!--            </span>-->
+            &lt;!&ndash;            <span class="isolate inline-flex rounded-md shadow-sm">&ndash;&gt;
+            &lt;!&ndash;                <button&ndash;&gt;
+            &lt;!&ndash;                    class="relative inline-flex items-center gap-x-1.5 rounded-l-md bg-gray-800 px-3 py-2 text-sm font-semibold text-white ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"&ndash;&gt;
+            &lt;!&ndash;                    type="button"&ndash;&gt;
+            &lt;!&ndash;                >&ndash;&gt;
+            &lt;!&ndash;                    <BookmarkIcon aria-hidden="true" class="-ml-0.5 h-5 w-5 text-gray-400" />&ndash;&gt;
+            &lt;!&ndash;                    Bookmark for your use-case&ndash;&gt;
+            &lt;!&ndash;                </button>&ndash;&gt;
+            &lt;!&ndash;                <button&ndash;&gt;
+            &lt;!&ndash;                    class="relative -ml-px inline-flex items-center rounded-r-md bg-gray-600 px-3 py-2 text-sm font-semibold text-gray-200 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"&ndash;&gt;
+            &lt;!&ndash;                    type="button"&ndash;&gt;
+            &lt;!&ndash;                >&ndash;&gt;
+            &lt;!&ndash;                    12&ndash;&gt;
+            &lt;!&ndash;                </button>&ndash;&gt;
+            &lt;!&ndash;            </span>&ndash;&gt;
         </div>
         <p v-if="description" class="max-w-2xl text-sm leading-6 text-gray-400">{{ description }}</p>
         <div class="mt-2 border-t border-white/10">
@@ -32,7 +32,7 @@
                         </span>
                     </dt>
                     <dd class="mt-1 text-sm leading-6 text-gray-400 sm:col-span-2 sm:mt-0">
-                        <input v-bind="headerValue.value" :placeholder="headerValue.example" class="bg-gray-700 text-white px-1 w-full" />
+                        <input :placeholder="headerValue.example" class="bg-gray-700 text-white px-1 w-full" v-bind="headerValue.value" />
                     </dd>
                 </div>
                 <div v-for="[key, value] in queryParamMap" v-if="queryParamMap && queryParamMap.size >= 1" class="px-4 py-1 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
@@ -50,11 +50,11 @@
             </dl>
         </div>
 
-        <!--            v-if="body"-->
-        <!--        @update:model-value="$emit('update:modelValue', $event.target.value)"-->
+        &lt;!&ndash;            v-if="body"&ndash;&gt;
+        &lt;!&ndash;        @update:model-value="$emit('update:modelValue', $event.target.value)"&ndash;&gt;
         <div v-if="body" class="">
             Body:
-            <monaco-editor v-if="body" :model-value="bodyString" :options="{ theme: 'vs-dark', fontSize: 12 }" class="h-56 w-full" lang="json"> Loading editor... </monaco-editor>
+            <LazyMonacoEditor v-if="body" :model-value="bodyString" :options="{ theme: 'vs-dark', fontSize: 12 }" class="h-56 w-full" lang="json"> Loading editor... </LazyMonacoEditor>
         </div>
 
         <span class="flex gap-3 items-center mt-1">
@@ -76,7 +76,7 @@
         <div v-if="loading">Loading...</div>
         <div v-if="result">
             Result:
-            <monaco-editor
+            <LazyMonacoEditor
                 v-if="result"
                 :lang="resultLang"
                 :model-value="result"
@@ -86,17 +86,17 @@
                 class="h-44"
             >
                 Loading result...
-            </monaco-editor>
+            </LazyMonacoEditor>
         </div>
         <div v-if="requestSendError">
             Error:
             {{ requestSendError }}
         </div>
-    </div>
+    </div>-->
 </template>
 
 <script lang="ts" setup>
-import { Ref } from "@vue/reactivity";
+/*import { Ref } from "@vue/reactivity";
 import fetchToCurl from "fetch-to-curl";
 
 export interface Props {
@@ -179,7 +179,7 @@ async function sendRequest() {
 
         if (contentType == "application/json") {
             resultLang.value = "json";
-        } /*if (contentType == "text/plain")*/ else {
+        } /!*if (contentType == "text/plain")*!/ else {
             resultLang.value = "text";
         }
         result.value = await fetched.text();
@@ -191,12 +191,11 @@ async function sendRequest() {
 
 function toCurl() {
     //<div v-for="[headerKey, heIaderValue] in headersMap" v-if="headersMap && headersMap.size >= 1";
-    headersMap.value?.entries
-
+    headersMap.value?.entries;
 
     const fetched = fetchToCurl(props.url, {
         method: props.method,
     });
     window.alert(fetched);
-}
+}*/
 </script>
diff --git a/src/components/content/ProseA.vue b/src/components/content/ProseA.vue
index d0c71a3..407099d 100644
--- a/src/components/content/ProseA.vue
+++ b/src/components/content/ProseA.vue
@@ -1,11 +1,11 @@
 <template>
-    <NuxtLink :href="href" :target="target" class="underline underline-primary-300 hover:underline-primary-400 font-bold text-gray-50">
+    <NuxtLink :href="href" :target="target" class="underline underline-primary-300 hover:underline-primary-400 font-bold text-gray-50 cursor-pointer">
         <slot />
     </NuxtLink>
 </template>
 
 <script lang="ts" setup>
-defineProps({
+const props = defineProps({
     href: {
         type: String,
         default: "",
@@ -15,5 +15,5 @@ defineProps({
         default: undefined,
         required: false,
     },
-});
+})
 </script>
diff --git a/src/components/content/ProseCodeInline.vue b/src/components/content/ProseCodeInline.vue
index 5c5bf19..3a8963e 100644
--- a/src/components/content/ProseCodeInline.vue
+++ b/src/components/content/ProseCodeInline.vue
@@ -1,6 +1,5 @@
 <template>
-    <code
-        class="bg-gray-900 py-0.9 px-1.8 rounded-md border-inline border-1 border-gray-700 text-sm text-gray-50 font-bold">
+    <code class="bg-gray-900 py-0.9 px-1.8 rounded-md border-inline border-1 border-gray-700 text-sm text-gray-50 font-bold">
         <slot />
     </code>
 </template>
diff --git a/src/components/content/ProseH1.vue b/src/components/content/ProseH1.vue
index b452a5c..10f59a7 100644
--- a/src/components/content/ProseH1.vue
+++ b/src/components/content/ProseH1.vue
@@ -1,35 +1,19 @@
 <template>
-  <h1
-    :id="id"
-    class="relative font-semibold text-4xl mb-10 text-gray-50 cursor-pointer"
-    @pointerenter="showHashtag = true"
-    @pointerleave="showHashtag = false"
-    @click.prevent="handleClick"
-  >
-    <span v-if="showHashtag" class="absolute left-[-32px] text-primary-300"
-      >#</span
-    >
-    <a v-if="generate" :href="`#${id}`">
-      <slot />
-    </a>
-    <slot v-else />
-  </h1>
+    <h1 :id="id" class="relative font-semibold text-4xl mb-10 text-gray-50 cursor-pointer group">
+        <span class="absolute left-[-32px] text-primary-300 hidden group-hover:block">#</span>
+        <NuxtLink v-if="id && generate" :to="{ hash: `#${id}` }">
+            <slot />
+        </NuxtLink>
+        <slot v-else />
+    </h1>
 </template>
 
-<script setup lang="ts">
-import { computed, useRuntimeConfig, ref } from "#imports";
-import { scroll } from "~/lib/navHelper/scroll";
+<script lang="ts" setup>
+import { computed, useRuntimeConfig } from "#imports";
 
 const route = useRoute();
-const showHashtag = ref(false);
 const props = defineProps<{ id?: string }>();
 
 const { headings } = useRuntimeConfig().public.mdc;
 const generate = computed(() => props.id && headings?.anchorLinks?.h1);
-
-function handleClick() {
-  if (props.id) {
-    scroll(props.id, route.path);
-  }
-}
 </script>
diff --git a/src/components/content/ProseH2.vue b/src/components/content/ProseH2.vue
index d9567e5..e356543 100644
--- a/src/components/content/ProseH2.vue
+++ b/src/components/content/ProseH2.vue
@@ -1,36 +1,19 @@
 <template>
-  <h2
-    :id="id"
-    class="font-semibold text-3xl mb-2 mt-10 text-gray-50"
-    @pointerenter="showHashtag = true"
-    @pointerleave="showHashtag = false"
-    @click.prevent="handleClick"
-  >
-    <span v-if="showHashtag" class="absolute left-[-2%] text-primary-300"
-      >#</span
-    >
-    <a v-if="id && generate" :href="`#${id}`">
-      <slot />
-    </a>
-    <slot v-else />
-  </h2>
+    <h2 :id="id" class="font-semibold text-3xl mb-2 mt-10 text-gray-50 group">
+        <span class="absolute left-[-2%] text-primary-300 hidden group-hover:block">#</span>
+        <NuxtLink v-if="id && generate" :to="{ hash: `#${id}` }">
+            <slot />
+        </NuxtLink>
+        <slot v-else />
+    </h2>
 </template>
 
-<script setup lang="ts">
-import { computed, ref, useRuntimeConfig } from "#imports";
-import { scroll } from "~/lib/navHelper/scroll";
+<script lang="ts" setup>
+import { computed, useRuntimeConfig } from "#imports";
 
 const route = useRoute();
-const showHashtag = ref(false);
-
 const props = defineProps<{ id?: string }>();
 
 const { headings } = useRuntimeConfig().public.mdc;
 const generate = computed(() => props.id && headings?.anchorLinks?.h2);
-
-function handleClick() {
-  if (props.id) {
-    scroll(props.id, route.path);
-  }
-}
 </script>
diff --git a/src/components/content/ProseH3.vue b/src/components/content/ProseH3.vue
index ba9ba0d..c974c98 100644
--- a/src/components/content/ProseH3.vue
+++ b/src/components/content/ProseH3.vue
@@ -1,36 +1,19 @@
 <template>
-  <h3
-    :id="id"
-    class="font-semibold text-2xl mb-2 mt-10 text-gray-50"
-    @pointerenter="showHashtag = true"
-    @pointerleave="showHashtag = false"
-    @click.prevent="handleClick"
-  >
-    <span v-if="showHashtag" class="absolute left-[-8px] text-primary-300"
-      >#</span
-    >
-    <a v-if="id && generate" :href="`#${id}`">
-      <slot />
-    </a>
-    <slot v-else />
-  </h3>
+    <h3 :id="id" class="font-semibold text-2xl mb-2 mt-10 text-gray-50 group">
+        <span class="absolute left-[-8px] text-primary-300 hidden group-hover:block">#</span>
+        <NuxtLink v-if="id && generate" :to="{ hash: `#${id}` }">
+            <slot />
+        </NuxtLink>
+        <slot v-else />
+    </h3>
 </template>
 
 <script setup lang="ts">
-import { computed, ref, useRuntimeConfig } from "#imports";
-import { scroll } from "~/lib/navHelper/scroll";
+import { computed, useRuntimeConfig } from "#imports";
 
 const route = useRoute();
-const showHashtag = ref(false);
-
 const props = defineProps<{ id?: string }>();
 
 const { headings } = useRuntimeConfig().public.mdc;
 const generate = computed(() => props.id && headings?.anchorLinks?.h3);
-
-function handleClick() {
-  if (props.id) {
-    scroll(props.id, route.path);
-  }
-}
 </script>
diff --git a/src/components/content/ProseH4.vue b/src/components/content/ProseH4.vue
index aff58ff..083883c 100644
--- a/src/components/content/ProseH4.vue
+++ b/src/components/content/ProseH4.vue
@@ -1,36 +1,19 @@
 <template>
-  <h4
-    :id="id"
-    class="font-semibold text-xl mb-2 mt-10 text-gray-50"
-    @pointerenter="showHashtag = true"
-    @pointerleave="showHashtag = false"
-    @click.prevent="handleClick"
-  >
-    <span v-if="showHashtag" class="absolute left-[-5px] text-primary-300"
-      >#</span
-    >
-    <a v-if="id && generate" :href="`#${id}`">
-      <slot />
-    </a>
-    <slot v-else />
-  </h4>
+    <h4 :id="id" class="font-semibold text-xl mb-2 mt-10 text-gray-50 group">
+        <span class="absolute left-[-5px] text-primary-300 hidden group-hover:block">#</span>
+        <NuxtLink v-if="id && generate" :to="{ hash: `#${id}` }">
+            <slot />
+        </NuxtLink>
+        <slot v-else />
+    </h4>
 </template>
 
 <script setup lang="ts">
-import { computed, ref, useRuntimeConfig } from "#imports";
-import { scroll } from "~/lib/navHelper/scroll";
+import { computed, useRuntimeConfig } from "#imports";
 
 const route = useRoute();
-const showHashtag = ref(false);
-
 const props = defineProps<{ id?: string }>();
 
 const { headings } = useRuntimeConfig().public.mdc;
 const generate = computed(() => props.id && headings?.anchorLinks?.h4);
-
-function handleClick() {
-  if (props.id) {
-    scroll(props.id, route.path);
-  }
-}
 </script>
diff --git a/src/components/content/ProseH5.vue b/src/components/content/ProseH5.vue
index 71ab691..3791411 100644
--- a/src/components/content/ProseH5.vue
+++ b/src/components/content/ProseH5.vue
@@ -1,35 +1,19 @@
 <template>
-  <h5
-    :id="id"
-    class="font-semibold text-lg mb-2 mt-10 text-gray-50"
-    @pointerenter="showHashtag = true"
-    @pointerleave="showHashtag = false"
-    @click.prevent="handleClick"
-  >
-    <span v-if="showHashtag" class="absolute left-[-3px] text-primary-300"
-      >#</span
-    >
-    <a v-if="id && generate" :href="`#${id}`">
-      <slot />
-    </a>
-    <slot v-else />
-  </h5>
+    <h5 :id="id" class="font-semibold text-lg mb-2 mt-10 text-gray-50 group">
+        <span class="absolute left-[-3px] text-primary-300 hidden group-hover:block">#</span>
+        <NuxtLink v-if="id && generate" :to="{ hash: `#${id}` }">
+            <slot />
+        </NuxtLink>
+        <slot v-else />
+    </h5>
 </template>
 
 <script setup lang="ts">
-import { computed, useRuntimeConfig, ref } from "#imports";
-import { scroll } from "~/lib/navHelper/scroll";
+import { computed, useRuntimeConfig } from "#imports";
 
 const route = useRoute();
-const showHashtag = ref(false);
-
 const props = defineProps<{ id?: string }>();
 
 const { headings } = useRuntimeConfig().public.mdc;
 const generate = computed(() => props.id && headings?.anchorLinks?.h5);
-function handleClick() {
-  if (props.id) {
-    scroll(props.id, route.path);
-  }
-}
 </script>
diff --git a/src/components/content/ProseH6.vue b/src/components/content/ProseH6.vue
index 259172f..5834230 100644
--- a/src/components/content/ProseH6.vue
+++ b/src/components/content/ProseH6.vue
@@ -1,35 +1,19 @@
 <template>
-  <h6
-    :id="id"
-    class="font-semibold mb-1 mt-10 text-gray-50"
-    @pointerenter="showHashtag = true"
-    @pointerleave="showHashtag = false"
-    @click.prevent="handleClick"
-  >
-    <span v-if="showHashtag" class="absolute left-[-2px] text-primary-300"
-      >#</span
-    >
-    <a v-if="id && generate" :href="`#${id}`">
-      <slot />
-    </a>
-    <slot v-else />
-  </h6>
+    <h6 :id="id" class="font-semibold mb-1 mt-10 text-gray-50 group">
+        <span class="absolute left-[-2px] text-primary-300 hidden group-hover:block">#</span>
+        <NuxtLink v-if="id && generate" :to="{ hash: `#${id}` }">
+            <slot />
+        </NuxtLink>
+        <slot v-else />
+    </h6>
 </template>
 
 <script setup lang="ts">
-import { computed, ref, useRuntimeConfig } from "#imports";
-import { scroll } from "~/lib/navHelper/scroll";
+import { computed, useRuntimeConfig } from "#imports";
 
 const route = useRoute();
-const showHashtag = ref(false);
-
 const props = defineProps<{ id?: string }>();
 
 const { headings } = useRuntimeConfig().public.mdc;
 const generate = computed(() => props.id && headings?.anchorLinks?.h6);
-function handleClick() {
-  if (props.id) {
-    scroll(props.id, route.path);
-  }
-}
 </script>
diff --git a/src/components/content/ProsePre.vue b/src/components/content/ProsePre.vue
index 2bf080e..636a2e5 100644
--- a/src/components/content/ProsePre.vue
+++ b/src/components/content/ProsePre.vue
@@ -1,87 +1,62 @@
 <template>
-  <div
-    class="relative bg-slate-900 border-0.2 border-slate-600 mb-6 rounded-md"
-  >
-    <div v-if="filename" class="py-2 px-4">
-      <span>
-        {{ filename }}
-      </span>
+    <div class="relative bg-slate-900 border-0.2 border-slate-600 mb-6 rounded-md">
+        <div v-if="filename" class="py-2 px-4">
+            <span>
+                {{ filename }}
+            </span>
+        </div>
+        <div v-if="copied" class="absolute top-3 right-4 cursor-pointer text-primary-300">
+            <ClipboardDocumentCheckIcon class="h-4" />
+        </div>
+        <div v-else class="absolute top-3 right-4 hover:text-gray-50 cursor-pointer" @click="copy(code)">
+            <ClipboardDocumentIcon class="h-4" />
+        </div>
+        <div :class="filename ? 'rounded-b-md' : 'rounded-md'" class="bg-slate-800 py-2.5 px-4 border border-0.2 border-slate-700 overflow-x-scroll text-sm">
+            <pre :class="$props.class"><slot /></pre>
+        </div>
     </div>
-    <div
-      v-if="!showCheckIcon"
-      @click="copyCodeAndShowCheckIcon"
-      class="absolute top-3 right-4 hover:text-gray-50 cursor-pointer"
-    >
-      <ClipboardDocumentIcon class="h-4" />
-    </div>
-    <div
-      v-if="showCheckIcon"
-      class="absolute top-3 right-4 cursor-pointer text-primary-300"
-    >
-      <ClipboardDocumentCheckIcon class="h-4" />
-    </div>
-    <div
-      :class="filename ? 'rounded-b-md' : 'rounded-md'"
-      class="bg-slate-800 py-2.5 px-4 border border-0.2 border-slate-700 overflow-x-scroll text-sm"
-    >
-      <pre :class="$props.class"><slot /></pre>
-    </div>
-  </div>
 </template>
 
-<script setup lang="ts">
-import {
-  ClipboardDocumentIcon,
-  ClipboardDocumentCheckIcon,
-} from "@heroicons/vue/24/outline";
+<script lang="ts" setup>
+import { ClipboardDocumentCheckIcon, ClipboardDocumentIcon } from "@heroicons/vue/24/outline";
 import { useClipboard } from "@vueuse/core";
-import { ref } from "vue";
 
 const props = defineProps({
-  code: {
-    type: String,
-    default: "",
-  },
-  language: {
-    type: String,
-    default: null,
-  },
-  filename: {
-    type: String,
-    default: null,
-  },
-  highlights: {
-    type: Array as () => number[],
-    default: () => [],
-  },
-  meta: {
-    type: String,
-    default: null,
-  },
-  class: {
-    type: String,
-    default: null,
-  },
+    code: {
+        type: String,
+        default: "",
+    },
+    language: {
+        type: String,
+        default: null,
+    },
+    filename: {
+        type: String,
+        default: null,
+    },
+    highlights: {
+        type: Array as () => number[],
+        default: () => [],
+    },
+    meta: {
+        type: String,
+        default: null,
+    },
+    class: {
+        type: String,
+        default: null,
+    },
 });
 
-const { copy, copied, text } = useClipboard();
-let showCheckIcon = ref();
-
-const copyCodeAndShowCheckIcon = async () => {
-  await copy(props.code);
-  showCheckIcon.value = true;
-  setTimeout(() => {
-    showCheckIcon.value = false;
-  }, 900);
-};
+const { copy, copied } = useClipboard();
 </script>
 
 <style>
 pre code .line {
-  display: block;
+    display: block;
 }
 
 pre code .line:empty::before {
-  content: "\200b";
+    content: "\200b";
 }
 </style>
diff --git a/src/components/tableOfContents/TableOfContents.vue b/src/components/tableOfContents/TableOfContents.vue
index 44a08b2..d3d99d0 100644
--- a/src/components/tableOfContents/TableOfContents.vue
+++ b/src/components/tableOfContents/TableOfContents.vue
@@ -1,57 +1,51 @@
 <template>
-  <ul class="mt-5" ref="ul">
-    <ContentQuery :path="$route.path" find="one" v-slot="{ data }">
-      <TocElement
-        v-if="data"
-        v-for="element in getTableOfContents(data)"
-        :toc-element="element"
-        :key="element.id"
-        class="table-of-contents-element"
-      />
-    </ContentQuery>
-  </ul>
+    <nav aria-label="Table of contents">
+        <ul ref="ul" class="mt-5">
+            <ContentQuery v-slot="{ data }" :path="$route.path" find="one">
+                <TocElement v-for="element in getTableOfContents(data)" v-if="data" :key="element.id" :toc-element="element" class="table-of-contents-element" />
+            </ContentQuery>
+        </ul>
+    </nav>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import TocElement from "~/components/tableOfContents/TocElement.vue";
 
 interface Element {
-  type: string;
-  tag: string;
-  props: {
-    id: string;
-  };
-  children: Child[];
+    type: string;
+    tag: string;
+    props: {
+        id: string;
+    };
+    children: Child[];
 }
 
 interface Child {
-  type: string;
-  value?: string;
+    type: string;
+    value?: string;
 }
 
 interface TableOfContentsElement {
-  tag: string;
-  id: string;
-  value: string;
+    tag: string;
+    id: string;
+    value: string;
 }
 
 function getTableOfContents(data: any) {
-  const contentChildren = data?.body?.children;
-  const filteredContent = contentChildren?.filter((child: any) => {
-    const tagsToFilter = ["h2", "h3", "h4", "h5", "h6"];
-    if (tagsToFilter.includes(child.tag)) {
-      if (child.children.length > 0) {
-        return true;
-      }
-    }
-  });
-  const tableOfContents: TableOfContentsElement[] = filteredContent.map(
-    (content: Element) => ({
-      tag: content.tag,
-      id: content.props.id,
-      value: content.children[0].value,
-    })
-  );
-  return tableOfContents;
+    const contentChildren = data?.body?.children;
+    const filteredContent = contentChildren?.filter((child: any) => {
+        const tagsToFilter = ["h1", "h2", "h3", "h4", "h5", "h6"];
+        if (tagsToFilter.includes(child.tag)) {
+            if (child.children.length > 0) {
+                return true;
+            }
+        }
+    });
+    const tableOfContents: TableOfContentsElement[] = filteredContent.map((content: Element) => ({
+        tag: content.tag,
+        id: content.props.id,
+        value: content.children[0].value,
+    }));
+    return tableOfContents;
 }
 </script>
diff --git a/src/components/tableOfContents/TocElement.vue b/src/components/tableOfContents/TocElement.vue
index 279f7a8..be23ecc 100644
--- a/src/components/tableOfContents/TocElement.vue
+++ b/src/components/tableOfContents/TocElement.vue
@@ -1,37 +1,31 @@
 <template>
-  <li
-    :class="marginClass"
-    class="text-sm my-2 cursor-pointer hover:text-primary-300"
-    @click="scroll(tocElement.id, $route.path)"
-  >
-    <component :is="tocElement.tag" :id="tocElement.id"
-      >{{ tocElement.value }}
-    </component>
-  </li>
+    <li :class="marginClass" class="my-2">
+        <NuxtLink :to="{hash: `#${tocElement.id}`}" class="text-sm cursor-pointer hover:text-primary-300">
+            <component :is="tocElement.tag" :id="tocElement.id">{{ tocElement.value }} </component>
+        </NuxtLink>
+    </li>
 </template>
 
 <script setup lang="ts">
-import { scroll } from "~/lib/navHelper/scroll";
-
 interface TableOfContentsElement {
-  tag: string;
-  id: string;
-  value: string;
+    tag: string;
+    id: string;
+    value: string;
 }
 
 const props = defineProps<{
-  tocElement: TableOfContentsElement;
+    tocElement: TableOfContentsElement;
 }>();
 
 const { tocElement } = props;
 const route = useRoute();
 
 const marginClasses: Record<string, string> = {
-  h2: "ml-0",
-  h3: "ml-1.5",
-  h4: "ml-3",
-  h5: "ml-6",
-  h6: "ml-6",
+    h2: "ml-0",
+    h3: "ml-1.5",
+    h4: "ml-3",
+    h5: "ml-6",
+    h6: "ml-6",
 };
 
 const marginClass = computed(() => marginClasses[tocElement.tag]);
diff --git a/src/content/2.api/_dir.yml b/src/content/2.api/_dir.yml
new file mode 100644
index 0000000..04d91e0
--- /dev/null
+++ b/src/content/2.api/_dir.yml
@@ -0,0 +1 @@
+title: API