diff --git a/components/prose/ProsePre.global.vue b/components/prose/ProsePre.global.vue
index 8c4a0251c98d2dcecb20ea89031f45c17dc24a4b..8c04e987b9475f18a61e89569e26da5208f44080 100644
--- a/components/prose/ProsePre.global.vue
+++ b/components/prose/ProsePre.global.vue
@@ -1,15 +1,17 @@
 <template>
-    <pre class="flex justify-between m-0 rounded-bl-none rounded-br-none dark">
-        <div>{{ language }}</div>
-        <UButton
-            leading-icon="i-heroicons-document-duplicate-20-solid"
-            color="gray"
-            variant="link"
-            @click="handleCopy"
-        />
-    </pre>
-    <UDivider :ui="{ border: { base: 'border-gray-700' } }" />
-    <pre :class="$props.class" class="m-0 rounded-tl-none rounded-tr-none"><code v-html="codeBlock"></code></pre>
+    <UCard :ui="{ body: { padding: 'p-0 sm:p-0' }, base: 'overflow-hidden' }">
+        <pre class="flex justify-between m-0 rounded-none dark">
+            <div>{{ language }}</div>
+            <UButton
+                leading-icon="i-heroicons-document-duplicate-20-solid"
+                color="gray"
+                variant="link"
+                @click="handleCopy"
+            />
+        </pre>
+        <UDivider :ui="{ border: { base: 'border-gray-700' } }" />
+        <pre :class="$props.class" class="m-0 rounded-none"><code v-html="codeBlock"></code></pre>
+    </UCard>
 </template>
 
 <script setup>
diff --git a/composables/useMQ.js b/composables/useMQ.js
new file mode 100644
index 0000000000000000000000000000000000000000..ec13ce239a62496d790472011c4a2b680b27b4a6
--- /dev/null
+++ b/composables/useMQ.js
@@ -0,0 +1,5 @@
+export const SM = useMediaQuery('(max-width: 640px)')
+export const MD = useMediaQuery('(max-width: 768px)')
+export const LG = useMediaQuery('(max-width: 1024px)')
+export const XL = useMediaQuery('(max-width: 1280px)')
+export const XXL = useMediaQuery('(max-width: 1536px)')
\ No newline at end of file
diff --git a/pages/search/[id].vue b/pages/search/[id].vue
index e119c996369ad127f0cf56fcc593939e63f2853d..c335e0abac9e06092705d867ec3f39aeaf1627b5 100644
--- a/pages/search/[id].vue
+++ b/pages/search/[id].vue
@@ -1,8 +1,8 @@
 <template>
     <div class="w-full items-center flex flex-col">
         <header class="sticky top-0 z-10 bg-white dark:bg-black w-full flex flex-col">
-            <div class="w-full p-2 justify-between items-center flex">
-                <div class="flex-grow justify-center items-center flex space-x-2">
+            <div class="w-full p-2 justify-end sm:justify-between items-center flex">
+                <div class="flex-grow justify-center items-center space-x-2 hidden sm:flex">
                     <UTooltip text="点击修改标题" v-if="!isEditTitle">
                         <div @click="handleFocusTitle">{{ state.query }}</div>
                     </UTooltip>
@@ -16,13 +16,14 @@
                     <span>/</span>
                     <UButton color="gray" variant="ghost" leading-icon="i-heroicons-plus-20-solid">收藏</UButton>
                 </div>
-                <div>
+                <div class="flex gap-2">
+                    <UButton v-if="SM" color="gray" variant="ghost" leading-icon="i-heroicons-plus-20-solid">收藏</UButton>
                     <UButton @click="handleShare" leading-icon="i-heroicons-share-20-solid">分享</UButton>
                 </div>
             </div>
             <UDivider />
         </header>
-        <div class="container max-w-screen-lg flex flex-col space-y-6 mb-4 p-6" id="scrollElement">
+        <div class="container max-w-screen-lg flex flex-col space-y-6 p-6 pb-0" id="scrollElement">
             <div class="grid">
                 <h1 class="text-3xl truncate">{{ state.query }}</h1>
             </div>
@@ -31,8 +32,8 @@
                 {{ state.repo }}
             </section>
             <template v-for="(item, index) in data" :key="index">
-                <div class="grid">
-                    <h1 class="text-3xl truncate" v-if="index !== 0" :id="index + 1">{{ item.question }}</h1>
+                <div class="grid" v-if="index !== 0">
+                    <h1 class="text-3xl truncate" :id="index + 1">{{ item.question }}</h1>
                 </div>
                 <UCard :ui="{ body: { padding: 'p-4 sm:p-4' } }">
                     <UAccordion :items="[{}]" default-open>
@@ -123,7 +124,7 @@
                 </UButton>
             </div>
         </div>
-        <div class="container max-w-screen-lg sticky bottom-4 flex p-6">
+        <div class="container max-w-screen-lg sticky bottom-2 flex pl-6 pr-6">
             <div class="justify-between flex w-full space-x-2">
                 <UTooltip text="停止生成" v-if="asking">
                     <UButton