diff --git a/components/i/library/Header.vue b/components/i/library/Header.vue
index 2b5fd992d533c220a6cd963c377e1ba86bc863fc..0dccb4406619276736c2dcc3c239bcee9b55943c 100644
--- a/components/i/library/Header.vue
+++ b/components/i/library/Header.vue
@@ -17,6 +17,7 @@
                         <div class="flex items-center text-xl gap-2">
                             <UIcon name="i-heroicons-squares-2x2" />
                             <div>{{ collect }}</div>
+                            <UBadge color="gray" variant="soft" :label="count" />
                         </div>
                     </template>
                 </div>
@@ -43,6 +44,10 @@ defineProps({
     description: {
         type: String,
         default: ''
+    },
+    count: {
+        type: Number,
+        default: 0
     }
 })
 const searchQuery = ref('')
diff --git a/pages/library/[id].vue b/pages/library/[id].vue
index e6938c1d81485d2cc406357b11fc9b517c1254e7..6e9a3718c8dd557b036363962ec0205d5db69ee9 100644
--- a/pages/library/[id].vue
+++ b/pages/library/[id].vue
@@ -1,6 +1,11 @@
 <template>
     <div class="w-full items-center flex flex-col">
-        <ILibraryHeader v-if="currentCollect" :collect="currentCollect.name" :description="currentCollect.description" />
+        <ILibraryHeader
+            v-if="currentCollect"
+            :collect="currentCollect.name"
+            :description="currentCollect.description"
+            :count="currentCollect.record_count"
+        />
         <div class="container max-w-screen-lg flex flex-col p-6">
             <div class="flex gap-10">
                 <div class="flex flex-col flex-grow">