diff --git a/docs/components/Logo.vue b/docs/components/Logo.vue
index da16396..279c245 100644
--- a/docs/components/Logo.vue
+++ b/docs/components/Logo.vue
@@ -4,7 +4,7 @@
 
 <template>
   <svg
-    class="w-9 h-9"
+    class="w-8 h-8"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 0 970 1008"
diff --git a/docs/components/TitleBar.vue b/docs/components/TitleBar.vue
index 19f651a..24d0dc4 100644
--- a/docs/components/TitleBar.vue
+++ b/docs/components/TitleBar.vue
@@ -11,7 +11,7 @@ const runtimeConfig = useRuntimeConfig().public
     :class="[route.path !== '/' ? 'border-b-neutral-200 dark:border-b-neutral-700' : 'border-b-transparent dark:border-b-transparent']"
   >
     <NuxtLink to="/" class="flex items-center gap-2 text-neutral-900 dark:text-neutral-100 group">
-      <Logo />
+      <Logo class="-mt-0.5" />
       <h1 class="flex flex-col">
         <span class="block font-medium text-xl leading-none">
           RayineUI
diff --git a/docs/components/icon/TablerAd2.vue b/docs/components/icon/TablerAd2.vue
new file mode 100644
index 0000000..ec85f6c
--- /dev/null
+++ b/docs/components/icon/TablerAd2.vue
@@ -0,0 +1,9 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M11.933 5H5v16h13v-8m-4 4H9" /><path d="M9 13h5V9H9zm6-8V3m3 3l2-2m-1 5h2" /></g></svg>
+</template>
+
+<script>
+export default {
+  name: 'TablerAd2',
+}
+</script>
diff --git a/docs/components/icon/TablerGitMerge.vue b/docs/components/icon/TablerGitMerge.vue
new file mode 100644
index 0000000..131739e
--- /dev/null
+++ b/docs/components/icon/TablerGitMerge.vue
@@ -0,0 +1,9 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M5 18a2 2 0 1 0 4 0a2 2 0 1 0-4 0M5 6a2 2 0 1 0 4 0a2 2 0 1 0-4 0m10 6a2 2 0 1 0 4 0a2 2 0 1 0-4 0M7 8v8" /><path d="M7 8a4 4 0 0 0 4 4h4" /></g></svg>
+</template>
+
+<script>
+export default {
+  name: 'TablerGitMerge',
+}
+</script>
diff --git a/docs/content/2.components/input.md b/docs/content/2.components/input.md
index 73057e1..cf22ed0 100644
--- a/docs/content/2.components/input.md
+++ b/docs/content/2.components/input.md
@@ -1,5 +1,6 @@
 ---
 description: The input component is used to get user input
+since: 1.3.2
 ---
 
 ## Usage
diff --git a/docs/content/2.components/message.md b/docs/content/2.components/message.md
index 9a7ee7f..b5cff27 100644
--- a/docs/content/2.components/message.md
+++ b/docs/content/2.components/message.md
@@ -1,5 +1,6 @@
 ---
 description: The message component is used to display a message to the user
+since: 1.2.0
 ---
 
 ## Usage
diff --git a/docs/pages/[...slug].vue b/docs/pages/[...slug].vue
index ea4da65..91f8568 100644
--- a/docs/pages/[...slug].vue
+++ b/docs/pages/[...slug].vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { withoutTrailingSlash } from 'ufo'
+import { standard } from '#rayui/ui.config'
 
 const route = useRoute()
 
@@ -40,10 +41,10 @@ const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
                 <li v-for="child in link.children" :key="child._path">
                   <NuxtLink
                     :to="child._path"
-                    class="text-sm text-neutral-500 dark:text-neutral-400"
+                    class="text-sm text-neutral-500 dark:text-neutral-400 flex items-center gap-1"
                     active-class="text-primary dark:text-primary font-medium"
                   >
-                    {{ child.title }}
+                    <span>{{ child.title }}</span>
                   </NuxtLink>
                 </li>
               </ul>
@@ -55,9 +56,19 @@ const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
 
     <div class="col-span-12" :class="[hasToc ? 'md:col-span-8' : 'md:col-span-10']">
       <div>
-        <h1 class="text-3xl text-primary font-medium">
-          {{ page?.title || 'untitled' }}
-        </h1>
+        <div class="flex justify-between items-center">
+          <h1 class="text-3xl text-primary font-medium">
+            {{ page?.title || 'untitled' }}
+          </h1>
+          <div
+            v-if="page?.since"
+            class="ring-1 ring-inset ring-primary-200 text-primary-500 rounded-md bg-primary-50 font-medium flex items-center gap-1"
+            :class="[standard.padding['sm'], standard.size['2xs']]"
+          >
+            <IconTablerGitMerge class="text-sm -mt-0.5" />
+            v{{ page.since }}
+          </div>
+        </div>
         <p v-if="page?.description" class="text-lg text-neutral-500 dark:text-neutral-400 mt-2">
           {{ page.description }}
         </p>
@@ -126,7 +137,7 @@ const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
 }
 
 .surround-btn {
-  @apply  font-medium;
+  @apply font-medium;
 
   div {
     @apply bg-neutral-100 dark:bg-neutral-800 rounded-lg px-8 py-6 w-full h-full flex flex-col gap-0 border border-transparent;
diff --git a/eslint.config.mjs b/eslint.config.mjs
index f4b7c6d..00650b0 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -10,7 +10,7 @@ export default createConfigForNuxt({
     stylistic: true,
   },
   dirs: {
-    src: ['./playground'],
+    src: ['./playground', './docs'],
   },
 }).overrideRules({
   '@typescript-eslint/no-unused-expressions': [