diff --git a/components/i/library/collect.vue b/components/i/library/collect.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2eb1b15e5c487bba309191203514527f1845ee71
--- /dev/null
+++ b/components/i/library/collect.vue
@@ -0,0 +1,24 @@
+<template>
+    <ULink to="/library/123">
+        <UCard :ui="cardUI">
+            <div class="flex flex-col gap-1">
+                <div>前端开发</div>
+                <div class="flex">
+                    <div class="flex items-center text-gray-500 text-sm gap-0.5">
+                        <UIcon name="i-heroicons-square-3-stack-3d" />
+                        <span>1</span>
+                    </div>
+                </div>
+            </div>
+        </UCard>
+    </ULink>
+</template>
+<script setup>
+const cardUI = {
+    body: {
+        padding: 'sm:p-3 p-3',
+        base: 'h-full'
+    },
+    background: 'transition bg-gray-50 hover:bg-gray-100 dark:hover:bg-gray-800'
+}
+</script>
\ No newline at end of file
diff --git a/components/i/library/thread.vue b/components/i/library/thread.vue
new file mode 100644
index 0000000000000000000000000000000000000000..979e6487957d018d0dc581b9c4638e32bd36c563
--- /dev/null
+++ b/components/i/library/thread.vue
@@ -0,0 +1,37 @@
+<template>
+    <ULink to="/search/123" class="flex flex-col group">
+        <div class="transition truncate group-hover:text-primary">Python有哪些新的库</div>
+        <div class="break-word text-balance text-gray-600 line-clamp-2 font-sans text-base">
+            Python有许多新的库不断涌现,以下是一些值得关注的新库:
+            Anthropic - 由Anthropic公司开发的大型语言模型库,用于自然语言处理和生成任务。
+            Jax - 用于高性能数值计算的库,支持自动微分和GPU/TPU加速,适用于机器学习和科学计算。
+            FastAPI - 一个现代、快速的Web框架,用于构建API。它基于ASGI,支持异步编程。
+            Starlette - 一个轻量级的ASGI框架,可用于构建高性能的异步Web服务。
+            Polars - 一个快速的数据框架库,性能优于Pandas,支持延迟计算。
+            Altair - 一个基于Vega和Vega-Lite的声明式统计可视化库。
+            AnyIO - 提供异步并发抽象的库,支持多种异步库如asyncio、trio等。
+            Hypothesis - 一个基于属性的测试框架,可自动生成测试用例。
+
+            这些只是Python新兴库中的一小部分。Python生态系统一直在快速发展,新库层出不穷,为开发者提供更多选择。
+        </div>
+    </ULink>
+    <div class="flex justify-between items-center">
+        <div class="flex gap-4">
+            <div class="flex items-center text-gray-500 text-sm gap-0.5">
+                <UIcon name="i-heroicons-eye" />
+                <span>1</span>
+            </div>
+            <div class="flex items-center text-gray-500 text-sm gap-0.5">
+                <UIcon name="i-heroicons-clock" />
+                <span>52 分钟前</span>
+            </div>
+        </div>
+        <div class="flex">
+            
+        </div>
+    </div>
+    <UDivider />
+</template>
+<script setup>
+
+</script>
\ No newline at end of file
diff --git a/pages/library.vue b/pages/library.vue
index 69d12d2bc7f866b419c294f84b81be28ac7ae36e..7c425f649b5a54d49ea4c8efdc5b0e558b89c5bb 100644
--- a/pages/library.vue
+++ b/pages/library.vue
@@ -1,6 +1,61 @@
 <template>
-    to be done
+    <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 />
+        <div class="container max-w-screen-lg flex flex-col p-6">
+            <div class="flex gap-4">
+                <div class="flex flex-col flex-grow">
+                    <div class="flex items-center text-lg gap-2">
+                        <UIcon name="i-heroicons-square-3-stack-3d" />
+                        <div>帖子</div>
+                    </div>
+                    <div class="flex flex-col gap-4 mt-4">
+                        <ILibraryThread />
+                        <ILibraryThread />
+                        <ILibraryThread />
+                        <ILibraryThread />
+                        <ILibraryThread />
+                    </div>
+                </div>
+                <div class="flex flex-col flex-shrink-0 w-56">
+                    <div class="flex justify-between items-center">
+                        <div class="flex items-center text-lg gap-2">
+                            <UIcon name="i-heroicons-squares-2x2" />
+                            <div>集合</div>
+                        </div>
+                        <UButton
+                            icon="i-heroicons-plus-20-solid"
+                            variant="soft"
+                            @click="handleOpenCreateLibrary"
+                        />
+                    </div>
+                    <div class="flex flex-col gap-4 mt-4">
+                        <ILibraryCollect />
+                        <ILibraryCollect />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 </template>
 <script setup>
+const searchQuery = ref('')
+function handleOpenCreateLibrary () {
 
+}
 </script>