diff --git a/components/i/SearchHistory.vue b/components/i/SearchHistory.vue
index 460140a8627980ceff0998ebb8b646ea5cdeead9..f7da80baf4ba7740c74bac7ef0ca1588bf1a7f2b 100644
--- a/components/i/SearchHistory.vue
+++ b/components/i/SearchHistory.vue
@@ -2,7 +2,7 @@
     <div class="flex flex-col overflow-hidden group">
         <div class="flex justify-between">
             <UButton
-                class="flex-grow cursor-default"
+                class="flex-grow cursor-default hover:bg-transparent dark:hover:bg-transparent"
                 leading-icon="i-heroicons-magnifying-glass"
                 color="gray"
                 variant="ghost"
diff --git a/components/i/library/header.vue b/components/i/library/header.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a73bb75e15e4fea4fda75aa087b85a2ece3e389e
--- /dev/null
+++ b/components/i/library/header.vue
@@ -0,0 +1,44 @@
+<template>
+    <div class="flex flex-col w-full items-center sticky top-0 bg-white dark:bg-black z-10">
+        <div class="container max-w-screen-lg flex flex-col p-6">
+            <div class="flex justify-between items-center">
+                <div class="flex gap-4">
+                    <div class="flex items-center text-xl gap-2" v-if="!collect">
+                        <UIcon name="i-heroicons-rectangle-stack-20-solid" />
+                        <div>主题</div>
+                    </div>
+                    <template v-else>
+                        <UButton
+                            icon="i-heroicons-chevron-left"
+                            color="gray"
+                            variant="ghost"
+                            to="/library"
+                        />
+                        <div class="flex items-center text-xl gap-2">
+                            <UIcon name="i-heroicons-squares-2x2" />
+                            <div>{{ collect }}</div>
+                        </div>
+                    </template>
+                </div>
+                <div class="flex">
+                    <UInput
+                        v-model="searchQuery"
+                        icon="i-heroicons-magnifying-glass-20-solid"
+                        placeholder="搜索你的主题..."
+                        size="md"
+                    />
+                </div>
+            </div>
+        </div>
+        <UDivider />
+    </div>
+</template>
+<script setup>
+defineProps({
+    collect: {
+        type: String,
+        default: ''
+    }
+})
+const searchQuery = ref('')
+</script>
diff --git a/pages/library/[id].vue b/pages/library/[id].vue
new file mode 100644
index 0000000000000000000000000000000000000000..b4d4b90e8f0f0cf00b540fa2bd9b786775f73eb2
--- /dev/null
+++ b/pages/library/[id].vue
@@ -0,0 +1,24 @@
+<template>
+    <div class="w-full items-center flex flex-col">
+        <ILibraryHeader collect="前端开发" />
+        <div class="container max-w-screen-lg flex flex-col p-6">
+            <div class="flex gap-10">
+                <div class="flex flex-col flex-grow">
+                    <div class="flex flex-col gap-4">
+                        <ILibraryThread />
+                        <ILibraryThread />
+                        <ILibraryThread />
+                        <ILibraryThread />
+                        <ILibraryThread />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup>
+const route = useRoute()
+const state = reactive({
+    id: route.params.id
+})
+</script>
\ No newline at end of file
diff --git a/pages/library/index.vue b/pages/library/index.vue
index 5d64fae62bf0054f1f80a97aae52e45afcc7a175..62318fa20ff5b0ad5219b28991bafea5c292f269 100644
--- a/pages/library/index.vue
+++ b/pages/library/index.vue
@@ -1,22 +1,6 @@
 <template>
     <div class="w-full items-center flex flex-col">
-        <div class="container max-w-screen-lg flex flex-col p-6">
-            <div class="flex justify-between items-center">
-                <div class="flex items-center text-xl gap-2">
-                    <UIcon name="i-heroicons-rectangle-stack-20-solid" />
-                    <div>主题</div>
-                </div>
-                <div class="flex">
-                    <UInput
-                        v-model="searchQuery"
-                        icon="i-heroicons-magnifying-glass-20-solid"
-                        placeholder="搜索你的主题..."
-                        size="md"
-                    />
-                </div>
-            </div>
-        </div>
-        <UDivider />
+        <ILibraryHeader />
         <div class="container max-w-screen-lg flex flex-col p-6">
             <div class="flex gap-10">
                 <div class="flex flex-col flex-grow">
@@ -51,7 +35,6 @@
 </template>
 <script setup>
 const { $openLibraryCreate } = useLibraryStore()
-const searchQuery = ref('')
 function handleOpenCreateLibrary () {
     $openLibraryCreate()
 }