diff --git a/layouts/default.vue b/layouts/default.vue
index 39005d49c11e36948912cee742a5ebda784cf796..11f3b57af5830b36b466ad94abef293c77ce1e84 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,10 +1,32 @@
 <template>
     <div class="flex h-screen">
-        <div class="bg-gray-100 text-white w-64 flex flex-col">
-
+        <div class="bg-gray-100 dark:bg-gray-800 w-64 flex flex-col">
+            <div class="flex-grow">
+                <h1>GitBot</h1>
+            </div>
+            <div class="h-16 flex items-center justify-center">
+                <UButton
+                    :icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
+                    color="gray"
+                    variant="ghost"
+                    aria-label="Theme"
+                    @click="isDark = !isDark"
+                />
+            </div>
         </div>
-        <div class="flex-grow bg-white p-6">
+        <div class="bg-white dark:bg-gray-900 flex-grow p-6">
             <slot />
         </div>
     </div>
 </template>
+<script setup lang="ts">
+const colorMode = useColorMode()
+const isDark = computed({
+    get () {
+        return colorMode.value === 'dark'
+    },
+    set () {
+        colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
+    }
+})
+</script>
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index 21626b22cfbd65aabddd8d92e77e88814b543a5e..9df3b397bb7f706b8d2d3c9dbe5b532587518f7b 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,5 +1,12 @@
 <template>
-    Home
+    <div class="flex items-center justify-center h-full max-w-full">
+        <div class="max-w-screen-sm w-full">
+            <UTextarea
+                autoresize
+                placeholder="输入搜索内容..."
+            />
+        </div>
+    </div>
 </template>
 <script setup>