diff --git a/components/i/Aside.vue b/components/i/Aside.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7b6620705edb8466f0644dc2765450129e3496dc
--- /dev/null
+++ b/components/i/Aside.vue
@@ -0,0 +1,24 @@
+<template>
+    <div class="flex-grow bg-gray-100 dark:bg-gray-900">
+        <h1>GitBot</h1>
+    </div>
+    <div class="h-16 bg-gray-100 dark:bg-gray-900 flex items-center justify-center">
+        <UButton
+            :icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
+            color="white"
+            aria-label="Theme"
+            @click="isDark = !isDark"
+        />
+    </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>
diff --git a/layouts/default.vue b/layouts/default.vue
index 72a002ac65b428b4faee5be220afb37ce6c3d764..d407df5ce71f4b396e522582e493717bbaf09f77 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,32 +1,38 @@
 <template>
     <div class="flex min-h-screen">
-        <div class="fixed top-0 bg-gray-100 dark:bg-gray-900 w-64 flex flex-col min-h-screen">
-            <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 class="fixed top-0 w-64 hidden md:flex flex-col min-h-screen">
+            <IAside />
         </div>
-        <div class="ml-64 bg-white dark:bg-black flex flex-grow">
+        <div class="ml-0 md:ml-64 bg-white dark:bg-black flex flex-grow">
             <slot />
         </div>
     </div>
+    <div class="flex md:hidden">
+        <UButton
+            class="fixed top-2 left-2 z-20"
+            color="white"
+            trailing-icon="i-heroicons-bars-3-20-solid"
+            @click="handleToogleAside"
+        />
+        <USlideover
+            class="w-64"
+            v-model="isOpenAside"
+            side="left"
+            :overlay="false"
+        >
+            <UButton
+                class="absolute top-2 right-2 z-20"
+                color="white"
+                trailing-icon="i-heroicons-x-mark-20-solid"
+                @click="handleToogleAside"
+            />
+            <IAside />
+        </USlideover>
+    </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
+<script setup>
+const isOpenAside = ref(false)
+const handleToogleAside = () => {
+    isOpenAside.value = !isOpenAside.value;
+}
+</script>
diff --git a/pages/search/[id].vue b/pages/search/[id].vue
index a3650f583126efd27736ae844206cbad9d46eb91..10ddd8105d07ec5d7e6b24d7b1e2d191fc003128 100644
--- a/pages/search/[id].vue
+++ b/pages/search/[id].vue
@@ -156,7 +156,7 @@ const handleShare = (hash) => {
     })
 }
 const handleCopyMD = (index) => {
-    
+
 }
 const handleReGenerate = (index) => {