diff --git a/docs/package.json b/docs/package.json
index 71e1fe32..e034890e 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -24,6 +24,7 @@
     "@types/node": "^18.14.2",
     "@unocss/preset-typography": "^0.50.3",
     "@unocss/reset": "^0.50.3",
+    "@unocss/transformer-directives": "^0.50.3",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vue-macros/reactivity-transform": "^0.2.4",
     "@vue-macros/volar": "^0.8.4",
diff --git a/docs/pnpm-lock.yaml b/docs/pnpm-lock.yaml
index a63cf9fb..40258c53 100644
--- a/docs/pnpm-lock.yaml
+++ b/docs/pnpm-lock.yaml
@@ -7,6 +7,7 @@ specifiers:
   '@types/node': ^18.14.2
   '@unocss/preset-typography': ^0.50.3
   '@unocss/reset': ^0.50.3
+  '@unocss/transformer-directives': ^0.50.3
   '@vitejs/plugin-vue': ^4.0.0
   '@vue-macros/reactivity-transform': ^0.2.4
   '@vue-macros/volar': ^0.8.4
@@ -47,6 +48,7 @@ devDependencies:
   '@types/node': 18.14.2
   '@unocss/preset-typography': 0.50.3
   '@unocss/reset': 0.50.3
+  '@unocss/transformer-directives': 0.50.3
   '@vitejs/plugin-vue': 4.0.0_vite@4.1.4+vue@3.2.47
   '@vue-macros/reactivity-transform': 0.2.4_vue@3.2.47
   '@vue-macros/volar': 0.8.4_igk56f2koesnegulglkulhcgka
diff --git a/docs/src/App.vue b/docs/src/App.vue
index 1c4ea77a..81e68447 100644
--- a/docs/src/App.vue
+++ b/docs/src/App.vue
@@ -1,8 +1,10 @@
-
-
 <template>
   <div text="gray-700 dark:gray-200" mb-22>
     <RouterView />
   </div>
   <the-footer />
 </template>
+
+<style>
+
+</style>
diff --git a/docs/src/layouts/docs.vue b/docs/src/layouts/docs.vue
index f8c53331..19a728b1 100644
--- a/docs/src/layouts/docs.vue
+++ b/docs/src/layouts/docs.vue
@@ -2,12 +2,17 @@
 import { useHead } from '@vueuse/head'
 const menu = [
   {
-    name: 'What is Dozzle?',
-    path: '/guide/what-is-dozzle',
-  },
-  {
-    name: 'Getting Started',
-    path: '/guide/getting-started',
+    name: 'Introduction',
+    subMenu: [
+      {
+        name: 'What is Dozzle?',
+        path: '/guide/what-is-dozzle',
+      },
+      {
+        name: 'Getting Started',
+        path: '/guide/getting-started',
+      },
+    ],
   },
 ]
 useHead({
@@ -44,10 +49,20 @@ useHead({
     <aside>
       <nav w-64>
         <ul>
-          <li v-for="item in menu" :key="item.path">
-            <router-link :to="item.path">
-              {{ item.name }}
-            </router-link>
+          <li
+            v-for="m in menu"
+            :key="m.name"
+          >
+            <h2 class="text-lg font-bold">
+              {{ m.name }}
+            </h2>
+            <ul mt-4 space-y-4 border="l-2 dark-50/50">
+              <li v-for="item in m.subMenu" :key="item.path" pl-3>
+                <router-link :to="item.path" active-class="text-teal-600">
+                  {{ item.name }}
+                </router-link>
+              </li>
+            </ul>
           </li>
         </ul>
       </nav>
diff --git a/docs/unocss.config.ts b/docs/unocss.config.ts
index 55bbf0ba..865e5193 100644
--- a/docs/unocss.config.ts
+++ b/docs/unocss.config.ts
@@ -8,6 +8,7 @@ import {
 } from 'unocss'
 
 import { presetTypography } from '@unocss/preset-typography'
+import transformerDirectives from '@unocss/transformer-directives'
 
 export default defineConfig({
   shortcuts: [
@@ -15,6 +16,9 @@ export default defineConfig({
     ['icon-btn', 'text-[0.9em] inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-teal-600 !outline-none'],
     [/^circle-(\w+)$/, ([, c]) => `rounded-full bg-${c}500 w-3 h-3 `],
   ],
+  transformers: [
+    transformerDirectives(),
+  ],
   presets: [
     presetUno(),
     presetAttributify(),