diff --git a/layouts/default.vue b/layouts/default.vue
index 71a13fe..9991079 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -2,32 +2,36 @@
     <Loading />
     <a-layout class="layout">
         <a-layout-header class="header">
-            <div class="header-content max-w-3xl mx-auto px-4 flex items-center">
+            <div class="header-content max-w-4xl mx-auto px-4 flex items-center justify-between">
                 <NuxtLink to="/" class="logo">
                     <a-typography-title :level="4" class="!mb-0 !text-white">爱拓工具箱</a-typography-title>
                 </NuxtLink>
+                <div class="flex items-center">
+                    <a href="https://github.com/iLay1678/i-tools" 
+                       rel="external nofollow noreferrer" 
+                       target="_blank"
+                       class="opacity-80 hover:opacity-100 transition-opacity">
+                        <img alt="GitHub Repo stars" 
+                             src="https://img.shields.io/github/stars/iLay1678/i-tools?style=social" 
+                             style="height: 26px;">
+                    </a>
+                </div>
             </div>
         </a-layout-header>
 
         <a-layout-content class="site-layout-content">
-            <div class="max-w-3xl mx-auto w-full">
+            <div class="max-w-4xl mx-auto w-full">
                 <slot />
             </div>
         </a-layout-content>
 
         <a-layout-footer style="text-align: center">
-            <a-typography-link href="https://github.com/iLay1678/i-tools" target="_blank">
-                <template #icon>
-                    <GithubOutlined />
-                </template>
-                GitHub
-            </a-typography-link>
+            <span class="text-gray-500">©2024 爱拓工具箱</span>
         </a-layout-footer>
     </a-layout>
 </template>
 
 <script setup>
-import { GithubOutlined } from '@ant-design/icons-vue'
 import Loading from '~/components/Loading.vue'
 </script>
 
@@ -40,6 +44,8 @@ import Loading from '~/components/Loading.vue'
     position: fixed;
     z-index: 1;
     width: 100%;
+    background: linear-gradient(90deg, #1677ff 0%, #4096ff 100%);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 }
 
 .header-content {
@@ -55,7 +61,17 @@ import Loading from '~/components/Loading.vue'
 .site-layout-content {
     padding: 0 24px;
     margin-top: 64px;
-    min-height: calc(100vh - 64px - 70px);
+    margin-bottom: 70px;  /* 添加底部边距，为固定页脚留出空间 */
+}
+
+:deep(.ant-layout-footer) {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    padding: 20px;
+    background: white;
+    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
+    z-index: 1;
 }
 
 :deep(.ant-layout-header) {
@@ -65,4 +81,13 @@ import Loading from '~/components/Loading.vue'
 :deep(.ant-menu) {
     border-bottom: none;
 }
+
+:deep(.ant-typography-link) {
+    font-size: 16px;
+}
+
+:deep(.ant-typography-title) {
+    color: white !important;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
 </style>
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index 80dc79f..f45813e 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,66 +1,151 @@
 <template>
-
     <head>
         <title>爱拓工具箱</title>
     </head>
-    <main class="max-h-screen bg-gray-100 p-4">
-        <div class="mx-auto w-full max-w-3xl mb-8">
-            <div class="space-y-4">
-                <template v-for="tool in tools" :key="tool.id">
-                    <NuxtLink v-if="tool.available" :to="tool.path" class="block">
-                        <a-card hoverable>
-                            <template #title>
-                                <h2 class="text-xl font-medium"
-                                    :class="tool.available ? 'text-gray-800' : 'text-gray-400'">
+    <main class="bg-gray-100 p-4 pb-8">
+        <div class="mx-auto w-full max-w-4xl">
+            <template v-for="category in categories" :key="category">
+                <div class="mb-8">
+                    <h2 class="category-title inline-block">{{ categoryNames[category] }}</h2>
+                    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
+                        <template v-for="tool in getToolsByCategory(category)" :key="tool.id">
+                            <NuxtLink v-if="tool.available" :to="tool.path">
+                                <a-tooltip :title="tool.description" placement="top">
+                                    <button class="tool-button w-full">
+                                        {{ tool.title }}
+                                    </button>
+                                </a-tooltip>
+                            </NuxtLink>
+                            <a-tooltip v-else :title="tool.description" placement="top">
+                                <button class="tool-button w-full opacity-60 cursor-not-allowed">
                                     {{ tool.title }}
-                                </h2>
-                            </template>
-                            <p :class="tool.available ? 'text-gray-600' : 'text-gray-400'">{{ tool.description }}</p>
-                        </a-card>
-                    </NuxtLink>
-                    <a-card v-else hoverable>
-                        <template #title>
-                            <h2 class="text-xl font-medium text-gray-400">{{ tool.title }}</h2>
+                                </button>
+                            </a-tooltip>
                         </template>
-                        <p class="text-gray-400">{{ tool.description }}</p>
-                    </a-card>
-                </template>
-            </div>
+                    </div>
+                </div>
+            </template>
         </div>
     </main>
 </template>
 
 <script setup>
+const categoryNames = {
+    media: '影音工具',
+    generate: '生成工具',
+    other: '其他工具'
+};
+
 const tools = [
     {
-        id: 999,
-        title: '敬请期待',
-        description: '更多工具正在开发中...',
-        path: '',
-        available: false
-    }, {
         id: 1,
         title: '阿里云盘TV授权',
         description: '获取阿里云盘TV端的授权令牌',
         path: '/alipan-tv-token',
-        available: true
+        available: true,
+        category: 'media'
     },
     {
         id: 2,
         title: '挪车码牌生成',
         description: '生成挪车码牌，方便他人联系车主',
         path: '/move-car',
-        available: true
+        available: true,
+        category: 'generate'
     },
     {
         id: 3,
         title: '二维码生成',
         description: '生成自定义二维码',
         path: '/qrcode',
-        available: true
+        available: true,
+        category: 'generate'
     },
-
+    {
+        id: 999,
+        title: '敬请期待',
+        description: '更多工具正在开发中...',
+        path: '',
+        available: false,
+        category: 'other'
+    }
 ].sort((a, b) => a.id - b.id);
+
+const categories = [...new Set(tools.map(tool => tool.category))];
+
+const getToolsByCategory = (category) => {
+    return tools.filter(tool => tool.category === category);
+};
 </script>
 
-<style scoped></style>
+<style scoped>
+.tool-button {
+    background: linear-gradient(135deg, rgb(52, 52, 52), rgb(73, 73, 73), rgb(94, 94, 94));
+    color: white;
+    padding: 12px 20px;
+    border-radius: 0.5rem;
+    transition: all 0.3s ease;
+    font-size: 1rem;
+    font-weight: 500;
+    border: none;
+    position: relative;
+    overflow: hidden;
+}
+
+.tool-button:not(.cursor-not-allowed):hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.tool-button:not(.cursor-not-allowed):active {
+    transform: translateY(0);
+}
+
+.tool-button::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+        90deg,
+        transparent,
+        rgba(255, 255, 255, 0.1),
+        transparent
+    );
+    transition: 0.5s;
+}
+
+.tool-button:not(.cursor-not-allowed):hover::before {
+    left: 100%;
+}
+
+.category-title {
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: #2c3e50;
+    position: relative;
+    padding-bottom: 0.25rem;
+    margin-bottom: 1rem;    /* 从 1.5rem 减小到 1rem */
+    display: inline-block;
+}
+
+.category-title::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 3px;
+    background: linear-gradient(90deg, #1677ff, #4096ff);
+    border-radius: 3px;
+    transition: all 0.3s ease;
+    opacity: 0.8;
+}
+
+.category-title:hover::after {
+    opacity: 1;
+    transform: scaleX(1.05);
+}
+</style>
