diff --git a/docs/app.config.ts b/docs/app.config.ts
new file mode 100644
index 0000000..d92df4b
--- /dev/null
+++ b/docs/app.config.ts
@@ -0,0 +1,6 @@
+export default defineAppConfig({
+  rayui: {
+    primary: 'indigo',
+    gray: 'neutral',
+  },
+})
diff --git a/docs/components/Logo.vue b/docs/components/Logo.vue
new file mode 100644
index 0000000..da16396
--- /dev/null
+++ b/docs/components/Logo.vue
@@ -0,0 +1,77 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+  <svg
+    class="w-9 h-9"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    viewBox="0 0 970 1008"
+  >
+    <g id="rayine">
+      <g id="r_leg">
+        <path
+          class="cls-1"
+          d="m921.3,858.91v121.45c0,15.27-12.38,27.64-27.64,27.64h-122.51c-7.33,0-14.36-2.91-19.55-8.1l-384.22-384.22,262.61-3.69c18.78,0,28.64-6.04,46.42-9.42l236.79,236.79c5.18,5.18,8.1,12.22,8.1,19.55Z"
+        />
+      </g>
+      <path
+        id="r_head"
+        class="cls-2"
+        d="m921.3,323.84c0,142.4-102,260.99-236.93,286.69-17.79,3.38-36.14,5.16-54.91,5.16h-262.07v-208.38h207.85c20.44,0,39.18-7.36,53.69-19.57,18.2-15.3,29.77-38.24,29.77-63.89s-11.57-48.59-29.77-63.89c-14.51-12.22-33.25-19.57-53.69-19.57-.18,0-.35,0-.53.01h0s-207.32-.01-207.32-.01V32h262.07c161.18,0,291.84,130.66,291.84,291.84Z"
+      />
+      <g id="cube_3">
+        <rect
+          class="cls-1"
+          x="48.7"
+          y="698.61"
+          width="249.85"
+          height="309.39"
+          rx="26"
+          ry="26"
+        />
+      </g>
+      <rect
+        id="cube_2"
+        class="cls-3"
+        x="48.7"
+        y="407.3"
+        width="249.85"
+        height="208.38"
+        rx="26"
+        ry="26"
+      />
+      <g id="cube_1">
+        <rect
+          class="cls-1"
+          x="48.7"
+          y="32"
+          width="249.85"
+          height="292.37"
+          rx="26"
+          ry="26"
+        />
+      </g>
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+#cube_1,
+#cube_3 {
+  @apply fill-zinc-600;
+}
+
+#cube_2 {
+  @apply fill-primary-400;
+}
+
+#r_head {
+  @apply fill-zinc-500 drop-shadow-2xl;
+}
+
+#r_leg {
+  @apply fill-zinc-600;
+}
+</style>
diff --git a/docs/components/TitleBar.vue b/docs/components/TitleBar.vue
index 787426c..19f651a 100644
--- a/docs/components/TitleBar.vue
+++ b/docs/components/TitleBar.vue
@@ -10,13 +10,17 @@ const runtimeConfig = useRuntimeConfig().public
     class="w-full flex justify-between items-center py-2 h-16 z-50 border-b sticky top-0 bg-white dark:bg-neutral-900 transition-colors"
     :class="[route.path !== '/' ? 'border-b-neutral-200 dark:border-b-neutral-700' : 'border-b-transparent dark:border-b-transparent']"
   >
-    <NuxtLink to="/" class="text-neutral-900 dark:text-neutral-100">
-      <h1 class="font-medium text-xl">
-        RayineUI<sup class="text-xs">&nbsp;<span class="text-primary font-medium">{{ runtimeConfig.version }}</span></sup>
+    <NuxtLink to="/" class="flex items-center gap-2 text-neutral-900 dark:text-neutral-100 group">
+      <Logo />
+      <h1 class="flex flex-col">
+        <span class="block font-medium text-xl leading-none">
+          RayineUI
+          <sup class="text-xs"><span class="text-primary font-medium">{{ runtimeConfig.version }}</span></sup>
+        </span>
+        <span class="block font-normal text-xs leading-none">
+          RayineSoft Components Lib
+        </span>
       </h1>
-      <h2 class="font-normal text-xs">
-        RayineSoft Components Lib
-      </h2>
     </NuxtLink>
     <div class="flex items-center gap-4">
       <NuxtLink
@@ -28,4 +32,8 @@ const runtimeConfig = useRuntimeConfig().public
   </header>
 </template>
 
-<style scoped></style>
+<style scoped>
+#rayine .cls-1 {
+  @apply !bg-white dark:bg-neutral-900;
+}
+</style>
diff --git a/docs/public/favicon.ico b/docs/public/favicon.ico
index 18993ad..d27794e 100644
Binary files a/docs/public/favicon.ico and b/docs/public/favicon.ico differ
diff --git a/docs/public/rayine.svg b/docs/public/rayine.svg
new file mode 100644
index 0000000..ae07887
--- /dev/null
+++ b/docs/public/rayine.svg
@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="_图层_2" data-name="图层 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 970 1008">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #3f3f46;
+      }
+
+      .cls-1, .cls-2, .cls-3 {
+        stroke-width: 0px;
+      }
+
+      .cls-2 {
+        fill: #71717a;
+        filter: url(#drop-shadow-1);
+      }
+
+      .cls-3 {
+        fill: #a5b4fc;
+        filter: url(#drop-shadow-2);
+      }
+    </style>
+    <filter id="drop-shadow-1" filterUnits="userSpaceOnUse">
+      <feOffset dx="0" dy="16"/>
+      <feGaussianBlur result="blur" stdDeviation="16"/>
+      <feFlood flood-color="#71717a" flood-opacity=".8"/>
+      <feComposite in2="blur" operator="in"/>
+      <feComposite in="SourceGraphic"/>
+    </filter>
+    <filter id="drop-shadow-2" filterUnits="userSpaceOnUse">
+      <feOffset dx="0" dy="16"/>
+      <feGaussianBlur result="blur-2" stdDeviation="16"/>
+      <feFlood flood-color="#a5b4fc" flood-opacity=".8"/>
+      <feComposite in2="blur-2" operator="in"/>
+      <feComposite in="SourceGraphic"/>
+    </filter>
+  </defs>
+  <g id="rayine">
+    <g id="r_leg">
+      <path class="cls-1" d="m921.3,858.91v121.45c0,15.27-12.38,27.64-27.64,27.64h-122.51c-7.33,0-14.36-2.91-19.55-8.1l-384.22-384.22,262.61-3.69c18.78,0,28.64-6.04,46.42-9.42l236.79,236.79c5.18,5.18,8.1,12.22,8.1,19.55Z"/>
+    </g>
+    <path id="r_head" class="cls-2" d="m921.3,323.84c0,142.4-102,260.99-236.93,286.69-17.79,3.38-36.14,5.16-54.91,5.16h-262.07v-208.38h207.85c20.44,0,39.18-7.36,53.69-19.57,18.2-15.3,29.77-38.24,29.77-63.89s-11.57-48.59-29.77-63.89c-14.51-12.22-33.25-19.57-53.69-19.57-.18,0-.35,0-.53.01h0s-207.32-.01-207.32-.01V32h262.07c161.18,0,291.84,130.66,291.84,291.84Z"/>
+    <g id="cube_3">
+      <rect class="cls-1" x="48.7" y="698.61" width="249.85" height="309.39" rx="26" ry="26"/>
+    </g>
+    <rect id="cube_2" class="cls-3" x="48.7" y="407.3" width="249.85" height="208.38" rx="26" ry="26"/>
+    <g id="cube_1">
+      <rect class="cls-1" x="48.7" y="32" width="249.85" height="292.37" rx="26" ry="26"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file