diff --git a/app/app.vue b/app/app.vue
index 67f55d4..bf173ff 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -50,13 +50,12 @@ provide('navigation', navigation)
 <template>
   <UApp>
     <NuxtLoadingIndicator />
-
+    <AppHeader />
     <UMain>
       <NuxtLayout>
         <NuxtPage />
       </NuxtLayout>
     </UMain>
-
     <ClientOnly>
       <LazyUContentSearch
         :files="files"
diff --git a/app/components/AppSidebar.vue b/app/components/AppSidebar.vue
index b18be24..888eb61 100644
--- a/app/components/AppSidebar.vue
+++ b/app/components/AppSidebar.vue
@@ -48,20 +48,20 @@
           <div>
             <NuxtLink
               to="/"
-              class="flex items-center px-4 py-3 text-sm font-medium rounded-xl text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 hover:shadow-sm transition-all duration-200"
+              class="flex items-center px-4 py-2 text-sm font-medium rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 hover:shadow-sm transition-all duration-200"
               :class="{
                 'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 shadow-sm':
                   $route.path === '/',
               }"
             >
-              <Icon name="uim:house-user" class="text-primary mr-2" size="20" />
+              <Icon name="lucide-home" class="text-primary mr-2" size="20" />
               站点首页
             </NuxtLink>
           </div>
 
 
         <!-- 分隔线 -->
-        <div class="flex items-center px-6 p-1 ">
+        <div class="flex items-center px-8 p-1 ">
           <ContentDirectory />
         </div>
 
diff --git a/app/components/ContentDirectory.vue b/app/components/ContentDirectory.vue
index e8ca7a4..b815f7d 100644
--- a/app/components/ContentDirectory.vue
+++ b/app/components/ContentDirectory.vue
@@ -3,6 +3,7 @@
       <UContentNavigation 
         :navigation="directoryNavigation" 
         highlight 
+        
         color="primary"
         variant="pill"
       />
diff --git a/app/components/auth/login.vue b/app/components/auth/login.vue
new file mode 100644
index 0000000..d4ff518
--- /dev/null
+++ b/app/components/auth/login.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+const providers = ref([
+  {
+    label: 'Google',
+    icon: 'i-simple-icons-google',
+    color: 'neutral',
+    variant: 'subtle'
+  },
+  {
+    label: 'GitHub',
+    icon: 'i-simple-icons-github',
+    color: 'neutral',
+    variant: 'subtle'
+  }
+])
+const fields = ref([
+  {
+    name: 'email',
+    type: 'text',
+    label: 'Email'
+  },
+  {
+    name: 'password',
+    type: 'password',
+    label: 'Password'
+  }
+])
+</script>
+
+<template>
+  <UAuthForm
+    class="max-w-md"
+    title="Login"
+    description="Enter your credentials to access your account."
+    icon="i-lucide-user"
+    :fields="fields"
+    :providers="providers"
+    :separator="{
+      icon: 'i-lucide-user'
+    }"
+  />
+</template>
diff --git a/app/pages/register.vue b/app/components/auth/register.vue
similarity index 100%
rename from app/pages/register.vue
rename to app/components/auth/register.vue
diff --git a/app/error.vue b/app/error.vue
index f66678c..966f659 100644
--- a/app/error.vue
+++ b/app/error.vue
@@ -1,42 +1,57 @@
 <script setup lang="ts">
-import type { NuxtError } from '#app'
+import type { NuxtError } from "#app";
+
+definePageMeta({
+  layout: "default",
+});
 
 defineProps<{
-  error: NuxtError
-}>()
+  error: NuxtError;
+}>();
 
 useHead({
   htmlAttrs: {
-    lang: 'en'
-  }
-})
+    lang: "zh-CN",
+  },
+});
 
 useSeoMeta({
-  title: 'Page not found',
-  description: 'We are sorry but this page could not be found.'
-})
+  title: "Page not found",
+  description: "We are sorry but this page could not be found.",
+});
 
-const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('docs'))
-const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('docs'), {
-  server: false
-})
+const { data: navigation } = await useAsyncData("navigation", () =>
+  queryCollectionNavigation("docs"),
+);
+const { data: files } = useLazyAsyncData(
+  "search",
+  () => queryCollectionSearchSections("docs"),
+  {
+    server: false,
+  },
+);
 
-provide('navigation', navigation)
+provide("navigation", navigation);
 </script>
 
 <template>
   <UApp>
     <AppHeader />
 
-    <UError :error="error" />
+    <UError
+      :error="error"
+      :clear="{
+        size: 'xl',
+        icon: 'i-lucide-arrow-left',
+        class: 'rounded-full',
+      }"
+      redirect="/"
+    />
 
     <AppFooter />
 
     <ClientOnly>
-      <LazyUContentSearch
-        :files="files"
-        :navigation="navigation"
-      />
+      <LazyUContentSearch :files="files" :navigation="navigation" />
     </ClientOnly>
   </UApp>
 </template>
diff --git a/app/pages/[...slug].vue b/app/pages/[...slug].vue
index 615c7f8..2904732 100644
--- a/app/pages/[...slug].vue
+++ b/app/pages/[...slug].vue
@@ -18,11 +18,52 @@ const pageFontSizeClass = computed(() => {
   return `text-${selectedFontSize.value}`
 })
 
-const { data: page } = await useAsyncData(route.path, () => queryCollection('docs').path(route.path).first())
+// 根据路由参数构建内容路径
+const path = computed(() => {
+  const slug = route.params.slug;
+  
+  // 处理 slug 参数
+  if (!slug) {
+    return '/'; // 如果没有 slug，返回根路径
+  }
+  
+  const pathValue = Array.isArray(slug) ? slug.join("/") : slug;
+  
+  // 确保路径以 / 开头，不以 / 结尾
+  const normalizedPath = `/${pathValue}`.replace(/\/+$/, ""); // 使用 /+ 匹配多个连续的斜杠
+  
+  return normalizedPath;
+});
+
+// URL 解码并验证路径
+const queryPath = computed(() => {
+  try {
+    return decodeURIComponent(path.value);
+  } catch (error) {
+    console.error('URL decode error:', error);
+    return path.value; // 如果解码失败，返回原始路径
+  }
+});
+
+
+const { data: page } = await useAsyncData(
+  `page-${route.path}`, // 使用更具体的 key
+  () => queryCollection('docs').path(queryPath.value).first(),
+  {
+    default: () => null // 提供默认值
+  }
+);
+
 if (!page.value) {
-  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
+  throw createError({ 
+    statusCode: 404, 
+    statusMessage: '文档不存在', 
+    message: '当前页面不存在，请您检查路径是否正确',
+    fatal: true 
+  });
 }
 
+
 const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
   return queryCollectionItemSurroundings('docs', route.path, {
     fields: ['description']
diff --git a/app/pages/index.vue b/app/pages/index.vue
index d9619d0..9d3ecaa 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+definePageMeta({
+  layout: 'default'
+})
+
 const { data: page } = await useAsyncData('index', () => queryCollection('landing').path('/').first())
 if (!page.value) {
   throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
diff --git a/app/pages/login.vue b/app/pages/login.vue
deleted file mode 100644
index 4ac1fa6..0000000
--- a/app/pages/login.vue
+++ /dev/null
@@ -1,96 +0,0 @@
-<template>
-  <div class="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
-    <div class="max-w-md w-full space-y-8">
-      <div>
-        <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white">
-          登录您的账户
-        </h2>
-        <p class="mt-2 text-center text-sm text-gray-600 dark:text-gray-300">
-          或
-          <NuxtLink to="/register" class="font-medium text-blue-600 hover:text-blue-500">
-            创建新账户
-          </NuxtLink>
-        </p>
-      </div>
-      <form class="mt-8 space-y-6" @submit.prevent="handleLogin">
-        <div class="rounded-md shadow-sm -space-y-px">
-          <div>
-            <label for="email" class="sr-only">邮箱地址</label>
-            <input 
-              id="email" 
-              v-model="email" 
-              type="email" 
-              required 
-              class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm" 
-              placeholder="邮箱地址"
-            >
-          </div>
-          <div>
-            <label for="password" class="sr-only">密码</label>
-            <input 
-              id="password" 
-              v-model="password" 
-              type="password" 
-              required 
-              class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm" 
-              placeholder="密码"
-            >
-          </div>
-        </div>
-
-        <div class="flex items-center justify-between">
-          <div class="flex items-center">
-            <input 
-              id="remember-me" 
-              v-model="rememberMe" 
-              type="checkbox" 
-              class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
-            >
-            <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">
-              记住我
-            </label>
-          </div>
-
-          <div class="text-sm">
-            <a href="#" class="font-medium text-blue-600 hover:text-blue-500">
-              忘记密码？
-            </a>
-          </div>
-        </div>
-
-        <div>
-          <button 
-            type="submit" 
-            class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-          >
-            <span class="absolute left-0 inset-y-0 flex items-center pl-3">
-              <svg class="h-5 w-5 text-blue-500 group-hover:text-blue-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
-              </svg>
-            </span>
-            登录
-          </button>
-        </div>
-      </form>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-const email = ref('')
-const password = ref('')
-const rememberMe = ref(false)
-
-const handleLogin = () => {
-  // TODO: Implement actual login logic
-  console.log('Login attempt:', { email: email.value, password: password.value, rememberMe: rememberMe.value })
-  
-  // For demo purposes, redirect to home
-  navigateTo('/')
-}
-
-useSeoMeta({
-  title: '登录 - Easy Docs',
-  description: '登录您的 Easy Docs 账户'
-})
-</script>
\ No newline at end of file
diff --git a/content/1.getting-started/.navigation.yml b/content/1.getting-started/.navigation.yml
deleted file mode 100644
index 6dca48e..0000000
--- a/content/1.getting-started/.navigation.yml
+++ /dev/null
@@ -1,2 +0,0 @@
-title: Getting Started
-icon: false
diff --git a/content/1.简单文档/.navigation.yml b/content/1.简单文档/.navigation.yml
new file mode 100644
index 0000000..9689ca3
--- /dev/null
+++ b/content/1.简单文档/.navigation.yml
@@ -0,0 +1,2 @@
+title: 简单文档
+icon: i-lucide-book-open
diff --git a/content/1.getting-started/1.index.md b/content/1.简单文档/1.index.md
similarity index 100%
rename from content/1.getting-started/1.index.md
rename to content/1.简单文档/1.index.md
diff --git a/content/1.getting-started/2.installation.md b/content/1.简单文档/2.installation.md
similarity index 100%
rename from content/1.getting-started/2.installation.md
rename to content/1.简单文档/2.installation.md
diff --git a/content/1.getting-started/3.usage.md b/content/1.简单文档/3.usage.md
similarity index 100%
rename from content/1.getting-started/3.usage.md
rename to content/1.简单文档/3.usage.md
diff --git a/content/2.essentials/.navigation.yml b/content/2.essentials/.navigation.yml
index b82ae3f..3b0ec7a 100644
--- a/content/2.essentials/.navigation.yml
+++ b/content/2.essentials/.navigation.yml
@@ -1 +1,2 @@
 title: Essentials
+icon: i-lucide-book-open
\ No newline at end of file
diff --git a/content/2.essentials/1.markdown-syntax.md b/content/2.essentials/1.index.md
similarity index 100%
rename from content/2.essentials/1.markdown-syntax.md
rename to content/2.essentials/1.index.md
diff --git a/content/3.getting-started/.navigation.yml b/content/3.getting-started/.navigation.yml
new file mode 100644
index 0000000..ab24228
--- /dev/null
+++ b/content/3.getting-started/.navigation.yml
@@ -0,0 +1,2 @@
+title: Getting Started
+icon: i-lucide-book-open
diff --git a/content/3.getting-started/1.index.md b/content/3.getting-started/1.index.md
new file mode 100644
index 0000000..b74c700
--- /dev/null
+++ b/content/3.getting-started/1.index.md
@@ -0,0 +1,86 @@
+---
+title: Introduction
+description: Welcome to Nuxt UI Pro documentation template.
+navigation:
+  icon: i-lucide-house
+---
+
+This template is a ready-to-use documentation template made with [Nuxt UI Pro](https://ui.nuxt.com/pro), a collection of premium components built on top of [Nuxt UI](https://ui.nuxt.com) to create beautiful & responsive Nuxt applications in minutes.
+
+There are already many websites based on this template:
+
+::card-group
+  :::card
+  ---
+  icon: i-simple-icons-nuxtdotjs
+  target: _blank
+  title: Nuxt
+  to: https://nuxt.com
+  ---
+  The Nuxt website
+  :::
+
+  :::card
+  ---
+  icon: i-simple-icons-nuxtdotjs
+  target: _blank
+  title: Nuxt UI
+  to: https://ui.nuxt.com
+  ---
+  The documentation of `@nuxt/ui` and `@nuxt/ui-pro`
+  :::
+
+  :::card
+  ---
+  icon: i-simple-icons-nuxtdotjs
+  target: _blank
+  title: Nuxt Image
+  to: https://image.nuxt.com
+  ---
+  The documentation of `@nuxt/image`
+  :::
+
+  :::card
+  ---
+  icon: i-simple-icons-nuxtdotjs
+  target: _blank
+  title: Nuxt Content
+  to: https://content.nuxt.com
+  ---
+  The documentation of `@nuxt/content`
+  :::
+
+  :::card
+  ---
+  icon: i-simple-icons-nuxtdotjs
+  target: _blank
+  title: Nuxt Devtools
+  to: https://devtools.nuxt.com
+  ---
+  The documentation of `@nuxt/devtools`
+  :::
+
+  :::card
+  ---
+  icon: i-simple-icons-nuxtdotjs
+  target: _blank
+  title: Nuxt Hub
+  to: https://hub.nuxt.com
+  ---
+  The best place to manage your projects, environments and variables.
+  :::
+::
+
+## Key Features
+
+This template includes a range of features designed to streamline documentation management:
+
+- **Powered by** [**Nuxt 3**](https://nuxt.com): Utilizes the latest Nuxt framework for optimal performance.
+- **Built with** [**Nuxt UI**](https://ui.nuxt.com) **and** [**Nuxt UI Pro**](https://ui.nuxt.com/pro): Integrates a comprehensive suite of UI components.
+- [**MDC Syntax**](https://content.nuxt.com/usage/markdown) **via** [**Nuxt Content**](https://content.nuxt.com): Supports Markdown with component integration for dynamic content.
+- [**Nuxt Studio**](https://content.nuxt.com/docs/studio) **Compatible**: Offers integration with Nuxt Studio for content editing.
+- **Auto-generated Sidebar Navigation**: Automatically generates navigation from content structure.
+- **Full-Text Search**: Includes built-in search functionality for content discovery.
+- **Optimized Typography**: Features refined typography for enhanced readability.
+- **Dark Mode**: Offers dark mode support for user preference.
+- **Extensive Functionality**: Explore the template to fully appreciate its capabilities.
diff --git a/content/3.getting-started/2.installation.md b/content/3.getting-started/2.installation.md
new file mode 100644
index 0000000..147b972
--- /dev/null
+++ b/content/3.getting-started/2.installation.md
@@ -0,0 +1,29 @@
+---
+title: Installation
+description: Get started with Nuxt UI Pro documentation template.
+navigation:
+  icon: i-lucide-download
+---
+
+::tip{target="_blank" to="https://content.nuxt.com/templates/docs"}
+Use this template on Nuxt Studio and start your documentation in seconds.
+::
+
+## Quick Start
+
+You can start a fresh new project with:
+
+```bash [Terminal]
+npx nuxi init -t github:nuxt-ui-pro/docs
+```
+
+or create a new repository from GitHub:
+
+1. Open <https://github.com/nuxt-ui-pro/docs>
+2. Click on `Use this template` button
+3. Enter repository name and click on `Create repository from template` button
+4. Clone your new repository
+5. Install dependencies with your favorite package manager
+6. Start development server
+
+That's it! You can now start writing your documentation in the [`content/`](https://content.nuxt.com/usage/content-directory) directory 🚀
diff --git a/content/3.getting-started/3.usage.md b/content/3.getting-started/3.usage.md
new file mode 100644
index 0000000..911979e
--- /dev/null
+++ b/content/3.getting-started/3.usage.md
@@ -0,0 +1,127 @@
+---
+title: Usage
+description: Learn how to write and customize your documentation.
+navigation:
+  icon: i-lucide-sliders
+---
+
+This is only a basic example of what you can achieve with [Nuxt UI Pro](https://ui.nuxt.com/pro/guide), you can tweak it to match your needs. The template uses several Nuxt modules underneath like [`@nuxt/content`](https://content.nuxt.com) for the content and [`nuxt-og-image`](https://nuxtseo.com/og-image/getting-started/installation) for social previews.
+
+::tip
+---
+target: _blank
+to: https://ui.nuxt.com/getting-started/installation/pro/nuxt
+---
+Learn more on how to take the most out of Nuxt UI Pro!
+::
+
+## Writing content
+
+You can just start writing `.md` or `.yml` files in the [`content/`](https://content.nuxt.com/usage/content-directory) directory to have your pages updated. The navigation will be automatically generated in the left aside and in the mobile menu. You will also be able to go through your content with full-text search.
+
+## App Configuration
+
+In addition to `@nuxt/ui-pro` configuration through the `app.config.ts`, this template lets you customize the `Header`, `Footer` and the `Table of contents` components.
+
+### Header
+
+```ts [app.config.ts]
+export default defineAppConfig({
+  header: {
+    title: '',
+    to: '/',
+    // Logo configuration
+    logo: {
+      alt: '',
+      // Light mode
+      light: '',
+      // Dark mode
+      dark: ''
+    },
+    // Show or hide the search bar
+    search: true,
+    // Show or hide the color mode button
+    colorMode: true,
+    // Customize links
+    links: [{
+      'icon': 'i-simple-icons-github',
+      'to': 'https://github.com/nuxt-ui-pro/docs',
+      'target': '_blank',
+      'aria-label': 'GitHub'
+    }]
+  },
+})
+```
+
+### Footer
+
+```ts [app.config.ts]
+export default defineAppConfig({
+  footer: {
+    // Update bottom left credits
+    credits: `Copyright © ${new Date().getFullYear()}`,
+    // Show or hide the color mode button
+    colorMode: false,
+    // Customize links
+    links: [{
+      'icon': 'i-simple-icons-nuxtdotjs',
+      'to': 'https://nuxt.com',
+      'target': '_blank',
+      'aria-label': 'Nuxt Website'
+    }, {
+      'icon': 'i-simple-icons-discord',
+      'to': 'https://discord.com/invite/ps2h6QT',
+      'target': '_blank',
+      'aria-label': 'Nuxt UI on Discord'
+    }, {
+      'icon': 'i-simple-icons-x',
+      'to': 'https://x.com/nuxt_js',
+      'target': '_blank',
+      'aria-label': 'Nuxt on X'
+    }, {
+      'icon': 'i-simple-icons-github',
+      'to': 'https://github.com/nuxt/ui',
+      'target': '_blank',
+      'aria-label': 'Nuxt UI on GitHub'
+    }]
+  },
+})
+```
+
+### Table of contents
+
+```ts [app.config.ts]
+export default defineAppConfig({
+  toc: {
+    // Title of the main table of contents
+    title: 'Table of Contents',
+    // Customize links
+    bottom: {
+      // Title of the bottom table of contents
+      title: 'Community',
+      // URL of your repository content folder
+      edit: 'https://github.com/nuxt-ui-pro/docs/edit/main/content',
+      links: [{
+        icon: 'i-lucide-star',
+        label: 'Star on GitHub',
+        to: 'https://github.com/nuxt/ui',
+        target: '_blank'
+      }, {
+        icon: 'i-lucide-book-open',
+        label: 'Nuxt UI Pro docs',
+        to: 'https://ui.nuxt.com/getting-started/installation/pro/nuxt',
+        target: '_blank'
+      }, {
+        icon: 'i-simple-icons-nuxtdotjs',
+        label: 'Purchase a license',
+        to: 'https://ui.nuxt.com/pro/purchase',
+        target: '_blank'
+      }]
+    }
+  }
+})
+```
+
+::tip{target="_blank" to="https://content.nuxt.com/docs/studio/config"}
+This template integrates with Nuxt Studio, providing a visual interface for editing your documentation - perfect for non-technical contributors.
+::
diff --git a/content/1.getting-started/_dir.yml b/content/3.getting-started/_dir.yml
similarity index 100%
rename from content/1.getting-started/_dir.yml
rename to content/3.getting-started/_dir.yml
diff --git a/nuxt.config.ts b/nuxt.config.ts
index c68e64b..1d93629 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -22,6 +22,12 @@ export default defineNuxtConfig({
         toc: {
           searchDepth: 1
         }
+      },
+      pathMeta: {
+        slugifyOptions: {
+          // Keep everything except invalid chars, this will preserve Chinese characters
+          remove: /[$*+~()'"!\-=#?:@.]/g,
+        }
       }
     }
   },