diff --git a/pages/search/[id].vue b/pages/search/[id].vue
index d9d952376be6f74ed3da9c91807a7bfab7f03780..1c5575fb6a6d1a7d7340fc81dbf16807b3d0088f 100644
--- a/pages/search/[id].vue
+++ b/pages/search/[id].vue
@@ -1,10 +1,50 @@
 <template>
-    <div>
-        Search
+    <div class="flex h-full justify-center max-w-full">
+        <div class="max-w-screen-sm w-full flex flex-col space-y-4">
+            <h1 class="whitespace-pre-line break-words [word-break:break-word] default font-display text-3xl font-regular text-textMain dark:text-textMainDark selection:bg-super/50 selection:text-textMain dark:selection:bg-superDuper/10 dark:selection:text-superDark"
+            >{{ state.query }}</h1>
+            <section>{{ state.repo }}</section>
+            <UProgress :value="currentStep" :max="steps" :color="stepColor" indicator>
+                <template #step-1="{ step }">
+                    <span class="text-blue-500 items-center justify-end flex space-x-1">
+                        <UIcon name="i-heroicons-document-chart-bar-20-solid" class="text-base" />
+                        <span>{{ step }}</span>
+                    </span>
+                </template>
+                <template #step-2="{ step }">
+                    <span class="text-blue-500 items-center justify-end flex space-x-1">
+                        <UIcon name="i-heroicons-code-bracket-square-20-solid" class="text-base" />
+                        <span>{{ step }}</span>
+                    </span>
+                </template>
+                <template #step-3="{ step }">
+                    <span class="text-blue-500 items-center justify-end flex space-x-1">
+                        <UIcon name="i-heroicons-document-20-solid" class="text-base" />
+                        <span>{{ step }}</span>
+                    </span>
+                </template>
+                <template #step-4="{ step }">
+                    <span class="text-green-500 items-center justify-end flex space-x-1">
+                        <UIcon name="i-heroicons-document-check-20-solid" class="text-base" />
+                        <span>{{ step }}</span>
+                    </span>
+                </template>
+            </UProgress>
+        </div>
     </div>
 </template>
 <script setup>
-    defineOptions({
-        name: 'page-search`'
-    });
+const route = useRoute()
+const state = reactive({
+    query: route.query.query || '',
+    repo: route.query.repo || ''
+})
+const currentStep = ref(1)
+const steps = ['', '问题分析', '代码搜索', '整理答案', '完成！']
+const stepColor = computed(() => {
+    switch (true) {
+        case currentStep.value >= steps.length - 1: return 'green'
+        default: return 'blue'
+    }
+})
 </script>
\ No newline at end of file