diff --git a/src/app/()/page.tsx b/src/app/()/page.tsx
index ac4bb3d..9f25910 100644
--- a/src/app/()/page.tsx
+++ b/src/app/()/page.tsx
@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { ArrowRight, CheckCircle2 } from "lucide-react";
+import { ArrowRight, CheckCircle2, Code2, Lock, Users } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
 import {
@@ -25,20 +25,29 @@ export default function HomePage() {
     <div className="flex min-h-screen flex-col">
       <Header />
       <main className="flex-1">
-        <Section className="pb-0">
+        {/* Hero Section */}
+        <Section className="relative overflow-hidden bg-gradient-to-b from-white to-gray-50 pb-16 pt-24 dark:from-gray-900 dark:to-gray-800">
+          <div className="absolute inset-0">
+            <div className="bg-grid-black/[0.02] dark:bg-grid-white/[0.02] absolute inset-0" />
+          </div>
           <Container>
-            <div className="flex flex-col items-center justify-center space-y-8 text-center">
-              <TypographyH1 className="text-4xl font-bold tracking-tighter sm:text-5xl md:text-6xl lg:text-7xl">
-                Q58 Connect
-              </TypographyH1>
-              <TypographyLead className="max-w-[600px]">
-                使用 Q58 论坛账号，一键登录您的应用
-              </TypographyLead>
+            <div className="relative flex flex-col items-center justify-center space-y-8 text-center">
+              <div className="space-y-6">
+                <h1 className="text-4xl font-bold tracking-tighter text-gray-900 dark:text-white sm:text-5xl md:text-6xl lg:text-7xl">
+                  Q58 Connect
+                </h1>
+                <div className="mx-auto max-w-[800px] px-4">
+                  <p className="text-base text-gray-500 dark:text-gray-400 sm:text-lg md:text-xl">
+                    基于 OAuth 2.0 协议，为您的应用快速接入 Q58
+                    论坛统一身份认证，实现一键登录
+                  </p>
+                </div>
+              </div>
               <div className="flex gap-4">
                 <Link href="/sign-in">
-                  <Button size="lg">
+                  <Button size="lg" className="gap-2">
                     开始使用
-                    <ArrowRight className="ml-2 h-5 w-5" />
+                    <ArrowRight className="h-5 w-5" />
                   </Button>
                 </Link>
               </div>
@@ -46,18 +55,20 @@ export default function HomePage() {
           </Container>
         </Section>
 
-        <Section>
+        {/* Features Section */}
+        <Section className="bg-white py-24 dark:bg-gray-900">
           <Container>
             <div className="grid gap-8 md:grid-cols-3">
-              <Card>
+              <Card className="border-2 bg-white/50 transition-colors hover:border-primary/50 dark:bg-gray-800/50">
                 <CardHeader>
-                  <CardTitle>简单集成</CardTitle>
-                  <CardDescription>
+                  <Code2 className="h-10 w-10 text-primary" />
+                  <CardTitle className="text-xl">简单集成</CardTitle>
+                  <CardDescription className="text-base">
                     只需几行代码，即可为您的应用添加 Q58 论坛账号登录功能
                   </CardDescription>
                 </CardHeader>
                 <CardContent>
-                  <ul className="space-y-2">
+                  <ul className="space-y-4 text-sm">
                     <li className="flex items-center gap-2">
                       <CheckCircle2 className="h-5 w-5 text-green-500" />
                       <span>标准 OAuth 2.0 协议</span>
@@ -74,15 +85,16 @@ export default function HomePage() {
                 </CardContent>
               </Card>
 
-              <Card>
+              <Card className="border-2 bg-white/50 transition-colors hover:border-primary/50 dark:bg-gray-800/50">
                 <CardHeader>
-                  <CardTitle>安全可靠</CardTitle>
-                  <CardDescription>
+                  <Lock className="h-10 w-10 text-primary" />
+                  <CardTitle className="text-xl">安全可靠</CardTitle>
+                  <CardDescription className="text-base">
                     采用业界最佳实践，确保您的应用和用户数据安全
                   </CardDescription>
                 </CardHeader>
                 <CardContent>
-                  <ul className="space-y-2">
+                  <ul className="space-y-4 text-sm">
                     <li className="flex items-center gap-2">
                       <CheckCircle2 className="h-5 w-5 text-green-500" />
                       <span>HTTPS 加密传输</span>
@@ -99,15 +111,16 @@ export default function HomePage() {
                 </CardContent>
               </Card>
 
-              <Card>
+              <Card className="border-2 bg-white/50 transition-colors hover:border-primary/50 dark:bg-gray-800/50">
                 <CardHeader>
-                  <CardTitle>功能丰富</CardTitle>
-                  <CardDescription>
+                  <Users className="h-10 w-10 text-primary" />
+                  <CardTitle className="text-xl">功能丰富</CardTitle>
+                  <CardDescription className="text-base">
                     提供完整的用户信息和权限管理功能
                   </CardDescription>
                 </CardHeader>
                 <CardContent>
-                  <ul className="space-y-2">
+                  <ul className="space-y-4 text-sm">
                     <li className="flex items-center gap-2">
                       <CheckCircle2 className="h-5 w-5 text-green-500" />
                       <span>用户基本信息</span>
@@ -127,34 +140,36 @@ export default function HomePage() {
           </Container>
         </Section>
 
-        <Section>
+        {/* Documentation Section */}
+        <Section className="border-t bg-gray-50 py-24 dark:bg-gray-800">
           <Container>
-            <Card>
-              <CardHeader>
-                <CardTitle>快速开始</CardTitle>
-                <CardDescription>
-                  按照以下步骤，快速接入 Q58 Connect
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <Tabs defaultValue="auth" className="w-full">
-                  <TabsList className="grid w-full grid-cols-3">
-                    <TabsTrigger value="auth">发起授权</TabsTrigger>
-                    <TabsTrigger value="callback">处理回调</TabsTrigger>
-                    <TabsTrigger value="userinfo">获取用户</TabsTrigger>
-                  </TabsList>
-                  <TabsContent value="auth" className="mt-4">
-                    <Card>
-                      <CardHeader>
-                        <CardTitle>1. 发起授权请求</CardTitle>
-                        <CardDescription>
-                          将用户重定向到授权页面
-                        </CardDescription>
-                      </CardHeader>
-                      <CardContent>
-                        <pre className="overflow-x-auto rounded-lg bg-gray-100 p-4 dark:bg-gray-800">
-                          <code className="text-sm">
-                            {`const authUrl = 'https://connect.q58.club/oauth/authorize?' + 
+            <div className="mx-auto max-w-4xl">
+              <Card className="overflow-hidden border-2 p-6">
+                <CardHeader className="bg-white dark:bg-gray-900">
+                  <CardTitle className="text-2xl">快速开始</CardTitle>
+                  <CardDescription className="text-base">
+                    按照以下步骤，快速接入 Q58 Connect
+                  </CardDescription>
+                </CardHeader>
+                <CardContent className="bg-white p-0 dark:bg-gray-900">
+                  <Tabs defaultValue="auth" className="w-full">
+                    <TabsList className="grid w-full grid-cols-3">
+                      <TabsTrigger value="auth">发起授权</TabsTrigger>
+                      <TabsTrigger value="callback">处理回调</TabsTrigger>
+                      <TabsTrigger value="userinfo">获取用户</TabsTrigger>
+                    </TabsList>
+                    <TabsContent value="auth" className="mt-4">
+                      <Card>
+                        <CardHeader>
+                          <CardTitle>1. 发起授权请求</CardTitle>
+                          <CardDescription>
+                            将用户重定向到授权页面
+                          </CardDescription>
+                        </CardHeader>
+                        <CardContent>
+                          <pre className="overflow-x-auto rounded-lg bg-gray-100 p-4 dark:bg-gray-800">
+                            <code className="text-sm">
+                              {`const authUrl = 'https://connect.q58.club/oauth/authorize?' + 
   new URLSearchParams({
     response_type: 'code',        // 必填，固定值
     client_id: 'your_client_id',  // 必填，您的应用ID
@@ -164,23 +179,23 @@ export default function HomePage() {
   });
 
 window.location.href = authUrl;`}
-                          </code>
-                        </pre>
-                      </CardContent>
-                    </Card>
-                  </TabsContent>
-                  <TabsContent value="callback" className="mt-4">
-                    <Card>
-                      <CardHeader>
-                        <CardTitle>2. 处理授权回调</CardTitle>
-                        <CardDescription>
-                          在回调地址处理授权结果
-                        </CardDescription>
-                      </CardHeader>
-                      <CardContent>
-                        <pre className="overflow-x-auto rounded-lg bg-gray-100 p-4 dark:bg-gray-800">
-                          <code className="text-sm">
-                            {`// 获取访问令牌
+                            </code>
+                          </pre>
+                        </CardContent>
+                      </Card>
+                    </TabsContent>
+                    <TabsContent value="callback" className="mt-4">
+                      <Card>
+                        <CardHeader>
+                          <CardTitle>2. 处理授权回调</CardTitle>
+                          <CardDescription>
+                            在回调地址处理授权结果
+                          </CardDescription>
+                        </CardHeader>
+                        <CardContent>
+                          <pre className="overflow-x-auto rounded-lg bg-gray-100 p-4 dark:bg-gray-800">
+                            <code className="text-sm">
+                              {`// 获取访问令牌
 const response = await fetch('https://connect.q58.club/api/oauth/access_token', {
   method: 'POST',
   headers: {
@@ -193,23 +208,23 @@ const response = await fetch('https://connect.q58.club/api/oauth/access_token',
 });
 
 const { access_token, expires_in } = await response.json();`}
-                          </code>
-                        </pre>
-                      </CardContent>
-                    </Card>
-                  </TabsContent>
-                  <TabsContent value="userinfo" className="mt-4">
-                    <Card>
-                      <CardHeader>
-                        <CardTitle>3. 获取用户信息</CardTitle>
-                        <CardDescription>
-                          使用访问令牌获取用户数据
-                        </CardDescription>
-                      </CardHeader>
-                      <CardContent>
-                        <pre className="overflow-x-auto rounded-lg bg-gray-100 p-4 dark:bg-gray-800">
-                          <code className="text-sm">
-                            {`const userInfo = await fetch('https://connect.q58.club/api/oauth/user', {
+                            </code>
+                          </pre>
+                        </CardContent>
+                      </Card>
+                    </TabsContent>
+                    <TabsContent value="userinfo" className="mt-4">
+                      <Card>
+                        <CardHeader>
+                          <CardTitle>3. 获取用户信息</CardTitle>
+                          <CardDescription>
+                            使用访问令牌获取用户数据
+                          </CardDescription>
+                        </CardHeader>
+                        <CardContent>
+                          <pre className="overflow-x-auto rounded-lg bg-gray-100 p-4 dark:bg-gray-800">
+                            <code className="text-sm">
+                              {`const userInfo = await fetch('https://connect.q58.club/api/oauth/user', {
   headers: {
     'Authorization': \`Bearer \${access_token}\`
   }
@@ -224,27 +239,31 @@ const { access_token, expires_in } = await response.json();`}
   "avatar_url": "https://...",
   "groups": ["group1", "group2"]
 }`}
-                          </code>
-                        </pre>
-                      </CardContent>
-                    </Card>
-                  </TabsContent>
-                </Tabs>
-              </CardContent>
-            </Card>
+                            </code>
+                          </pre>
+                        </CardContent>
+                      </Card>
+                    </TabsContent>
+                  </Tabs>
+                </CardContent>
+              </Card>
+            </div>
           </Container>
         </Section>
 
-        <Section>
+        {/* CTA Section */}
+        <Section className="bg-white py-24 dark:bg-gray-900">
           <Container>
             <div className="text-center">
-              <TypographyH2>准备好了吗？</TypographyH2>
-              <TypographyMuted className="mt-2">
+              <h2 className="text-3xl font-bold">准备好了吗？</h2>
+              <p className="mt-2 text-gray-500 dark:text-gray-400">
                 创建一个应用，开始使用 Q58 Connect
-              </TypographyMuted>
-              <div className="mt-4">
+              </p>
+              <div className="mt-8">
                 <Link href="/sign-in">
-                  <Button size="lg">立即开始</Button>
+                  <Button size="lg" className="min-w-[200px]">
+                    立即开始
+                  </Button>
                 </Link>
               </div>
             </div>
@@ -252,9 +271,9 @@ const { access_token, expires_in } = await response.json();`}
         </Section>
       </main>
 
-      <footer className="border-t bg-white py-8 dark:bg-gray-800">
+      <footer className="border-t bg-white py-12 dark:bg-gray-900">
         <Container>
-          <div className="text-center text-gray-600 dark:text-gray-400">
+          <div className="text-center text-sm text-gray-500 dark:text-gray-400">
             © 2024{" "}
             <a
               href="https://q58.club"
diff --git a/src/components/layout/header-client.tsx b/src/components/layout/header-client.tsx
index a05ddab..f3d856b 100644
--- a/src/components/layout/header-client.tsx
+++ b/src/components/layout/header-client.tsx
@@ -3,7 +3,7 @@
 import { useEffect, useState } from "react";
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
-import { ChevronDown, User } from "lucide-react";
+import { ChevronDown, Menu, User } from "lucide-react";
 import { signOut } from "next-auth/react";
 
 import { cn } from "@/lib/utils";
@@ -38,7 +38,7 @@ export function HeaderClient({ initialUser }: HeaderClientProps) {
     if (!user) return null;
 
     return (
-      <div className="ml-8 flex items-center space-x-1">
+      <div className="ml-8 hidden items-center space-x-1 md:flex">
         <Link
           href="/dashboard"
           className={cn(
@@ -155,27 +155,157 @@ export function HeaderClient({ initialUser }: HeaderClientProps) {
     );
   };
 
+  // 移动端导航菜单
+  const renderMobileMenu = () => {
+    if (!user) return null;
+
+    return (
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" size="icon" className="md:hidden">
+            <Menu className="h-5 w-5" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-64">
+          <div className="flex items-center gap-3 border-b px-2 py-3">
+            <Avatar className="h-8 w-8">
+              <AvatarImage src={user.avatarUrl || undefined} />
+              <AvatarFallback>
+                {user.name?.charAt(0) || user.username?.charAt(0)}
+              </AvatarFallback>
+            </Avatar>
+            <div className="flex flex-col">
+              <span className="text-sm font-medium">
+                {user.name || user.username}
+              </span>
+              <span className="text-xs text-muted-foreground">
+                {user.email}
+              </span>
+            </div>
+          </div>
+          <DropdownMenuItem asChild>
+            <Link
+              href="/dashboard"
+              className={cn("w-full", pathname === "/dashboard" && "bg-accent")}
+            >
+              控制台
+            </Link>
+          </DropdownMenuItem>
+          <DropdownMenuItem asChild>
+            <Link
+              href="/dashboard/clients"
+              className={cn(
+                "w-full",
+                pathname.startsWith("/dashboard/clients") && "bg-accent",
+              )}
+            >
+              应用管理
+            </Link>
+          </DropdownMenuItem>
+          <DropdownMenuItem asChild>
+            <Link
+              href="/dashboard/settings"
+              className={cn(
+                "w-full",
+                pathname === "/dashboard/settings" && "bg-accent",
+              )}
+            >
+              设置
+            </Link>
+          </DropdownMenuItem>
+          {user.role === "ADMIN" && (
+            <>
+              <div className="my-1 h-px bg-border" />
+              <DropdownMenuItem asChild>
+                <Link
+                  href="/admin"
+                  className={cn("w-full", pathname === "/admin" && "bg-accent")}
+                >
+                  管理后台
+                </Link>
+              </DropdownMenuItem>
+              <DropdownMenuItem asChild>
+                <Link
+                  href="/admin/users"
+                  className={cn(
+                    "w-full",
+                    pathname === "/admin/users" && "bg-accent",
+                  )}
+                >
+                  用户列表
+                </Link>
+              </DropdownMenuItem>
+              <DropdownMenuItem asChild>
+                <Link
+                  href="/admin/clients"
+                  className={cn(
+                    "w-full",
+                    pathname === "/admin/clients" && "bg-accent",
+                  )}
+                >
+                  应用管理
+                </Link>
+              </DropdownMenuItem>
+              <DropdownMenuItem asChild>
+                <Link
+                  href="/admin/authorizations"
+                  className={cn(
+                    "w-full",
+                    pathname === "/admin/authorizations" && "bg-accent",
+                  )}
+                >
+                  授权管理
+                </Link>
+              </DropdownMenuItem>
+              <DropdownMenuItem asChild>
+                <Link
+                  href="/admin/logs"
+                  className={cn(
+                    "w-full",
+                    pathname === "/admin/logs" && "bg-accent",
+                  )}
+                >
+                  系统日志
+                </Link>
+              </DropdownMenuItem>
+            </>
+          )}
+          <div className="my-1 h-px bg-border" />
+          <DropdownMenuItem
+            onClick={handleSignOut}
+            className="text-red-600 focus:bg-red-50 focus:text-red-600 dark:focus:bg-red-950"
+          >
+            退出登录
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+  };
+
   return (
     <div className="flex items-center space-x-4">
       {renderNavLinks()}
       <ThemeToggle />
       {user ? (
-        <div className="flex items-center gap-3">
-          <Avatar className="h-8 w-8">
-            <AvatarImage src={user.avatarUrl || undefined} />
-            <AvatarFallback>
-              {user.name?.charAt(0) || user.username?.charAt(0)}
-            </AvatarFallback>
-          </Avatar>
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={handleSignOut}
-            className="text-muted-foreground hover:text-red-600"
-          >
-            退出
-          </Button>
-        </div>
+        <>
+          <div className="hidden items-center gap-3 md:flex">
+            <Avatar className="h-8 w-8">
+              <AvatarImage src={user.avatarUrl || undefined} />
+              <AvatarFallback>
+                {user.name?.charAt(0) || user.username?.charAt(0)}
+              </AvatarFallback>
+            </Avatar>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleSignOut}
+              className="text-muted-foreground hover:text-red-600"
+            >
+              退出
+            </Button>
+          </div>
+          {renderMobileMenu()}
+        </>
       ) : (
         <Button
           variant="outline"
diff --git a/src/components/layout/header.tsx b/src/components/layout/header.tsx
index b9b9397..70b6362 100644
--- a/src/components/layout/header.tsx
+++ b/src/components/layout/header.tsx
@@ -1,6 +1,7 @@
 import Link from "next/link";
 
 import { getCurrentUser } from "@/lib/session";
+import DynamicLogo from "@/components/dynamic-logo";
 import { HeaderClient } from "@/components/layout/header-client";
 
 export async function Header() {
@@ -12,7 +13,8 @@ export async function Header() {
         <div className="flex h-14 items-center justify-between">
           <div className="flex items-center">
             <Link href="/" className="flex items-center space-x-3">
-              <h1 className="text-2xl font-bold text-[#25263A] dark:text-white">
+              <DynamicLogo />
+              <h1 className="hidden text-2xl font-bold text-[#25263A] dark:text-white sm:block">
                 Q58 Connect
               </h1>
             </Link>