diff --git a/src/components/Topbar/TopbarFavoritesPop.vue b/src/components/Topbar/TopbarFavoritesPop.vue
index 6753e0a2..05eb92cc 100644
--- a/src/components/Topbar/TopbarFavoritesPop.vue
+++ b/src/components/Topbar/TopbarFavoritesPop.vue
@@ -41,7 +41,7 @@ onMounted(async () => {
   activatedFavoriteTitle.value = favoriteCategories[0].title
   getFavoriteResources(
     activatedMediaId.value,
-    currentPageNum.value++,
+    ++currentPageNum.value,
     keyword.value,
   )
 
@@ -57,7 +57,7 @@ onMounted(async () => {
         && !isLoading.value
       ) {
         if (activatedMediaId.value && !noMoreContent.value)
-          getFavoriteResources(activatedMediaId.value, currentPageNum.value++)
+          getFavoriteResources(activatedMediaId.value, ++currentPageNum.value)
       }
     })
   }
@@ -99,6 +99,9 @@ function getFavoriteResources(
     })
     .then((res) => {
       if (res.code === 0) {
+        if (Array.isArray(res.data.medias) && res.data.medias.length > 0)
+          favoriteResources.push(...res.data.medias)
+
         if (
           res.data.medias === null
           || (res.data.medias.length < 20 && favoriteResources.length > 0)
@@ -108,9 +111,6 @@ function getFavoriteResources(
           return
         }
 
-        res.data.medias.forEach((item: FavoriteResource) => {
-          favoriteResources.push(item)
-        })
         noMoreContent.value = false
       }
       isLoading.value = false
diff --git a/src/components/Topbar/TopbarHistoryPop.vue b/src/components/Topbar/TopbarHistoryPop.vue
index 106999ff..1c8e1d83 100644
--- a/src/components/Topbar/TopbarHistoryPop.vue
+++ b/src/components/Topbar/TopbarHistoryPop.vue
@@ -139,16 +139,15 @@ function getHistoryList(type: HistoryType, viewAt = 0 as number) {
     })
     .then((res) => {
       if (res.code === 0) {
+        if (Array.isArray(res.data.list) && res.data.list.length > 0)
+          historys.push(...res.data.list)
+
         if (historys.length !== 0 && res.data.list.length < 20) {
           isLoading.value = false
           noMoreContent.value = true
           return
         }
 
-        res.data.list.forEach((item: HistoryItem) => {
-          historys.push(item)
-        })
-
         noMoreContent.value = false
       }
       isLoading.value = false
diff --git a/src/components/Topbar/TopbarMomentsPop.vue b/src/components/Topbar/TopbarMomentsPop.vue
index d8fad9b1..9b7084e5 100644
--- a/src/components/Topbar/TopbarMomentsPop.vue
+++ b/src/components/Topbar/TopbarMomentsPop.vue
@@ -7,6 +7,7 @@ import { MomentType } from './types'
 import type { MomentItem } from './types'
 import { getUserID } from '~/utils/main'
 import { calcTimeSince } from '~/utils/dataFormatter'
+
 const { t } = useI18n()
 
 const moments = reactive<Array<MomentItem>>([]) as UnwrapNestedRefs<
@@ -98,16 +99,18 @@ function getNewMoments(typeList: number[]) {
     })
     .then((res) => {
       if (res.code === 0) {
+        if (Array.isArray(res.data.cards) && res.data.cards.length > 0) {
+          res.data.cards.forEach((item: any) => {
+            pushItemIntoMoments(item)
+          })
+        }
+
         if (moments.length !== 0 && res.data.cards.length < 20) {
           isLoading.value = false
           noMoreContent.value = true
           return
         }
 
-        res.data.cards.forEach((item: any) => {
-          pushItemIntoMoments(item)
-        })
-
         // set this lastest offset id, which will clear the new moment's marker point
         // after you watch these moments.
         if (selectedTab.value === 0)
diff --git a/src/contentScripts/views/Favorites/Favorites.vue b/src/contentScripts/views/Favorites/Favorites.vue
index 5474bc19..3e5c2308 100644
--- a/src/contentScripts/views/Favorites/Favorites.vue
+++ b/src/contentScripts/views/Favorites/Favorites.vue
@@ -2,6 +2,7 @@
 import { useI18n } from 'vue-i18n'
 import { getCSRF, getUserID, openLinkToNewTab, removeHttpFromUrl } from '~/utils/main'
 import type { FavoriteCategory, FavoriteResource } from '~/components/Topbar/types'
+import emitter from '~/utils/mitt'
 
 const { t } = useI18n()
 
@@ -29,9 +30,20 @@ watch(activatedCategoryId, (newVal: number, oldVal: number) => {
 
 onMounted(async () => {
   await getFavoriteCategories()
-  activatedCategoryId.value = favoriteCategories[0].id
-  activatedFavoriteTitle.value = favoriteCategories[0].title
-  // getFavoriteResources()
+  changeCategory(favoriteCategories[0])
+
+  emitter.off('reachBottom')
+  emitter.on('reachBottom', () => {
+    if (isLoading.value)
+      return
+
+    if (!noMoreContent.value)
+      getFavoriteResources(activatedCategoryId.value, ++currentPageNum.value, keyword.value)
+  })
+})
+
+onUnmounted(() => {
+  emitter.off('reachBottom')
 })
 
 /**
@@ -88,6 +100,9 @@ function getFavoriteResources(
     })
     .then((res) => {
       if (res.code === 0) {
+        if (Array.isArray(res.data.medias) && res.data.medias.length > 0)
+          favoriteResources.push(...res.data.medias)
+
         if (
           res.data.medias === null
           || (res.data.medias.length < 20 && favoriteResources.length > 0)
@@ -97,9 +112,6 @@ function getFavoriteResources(
           return
         }
 
-        res.data.medias.forEach((item: FavoriteResource) => {
-          favoriteResources.push(item)
-        })
         noMoreContent.value = false
       }
       isLoading.value = false
@@ -120,6 +132,7 @@ function deleteWatchLaterItem(index: number, aid: number) {
 }
 
 function changeCategory(categoryItem: FavoriteCategory) {
+  currentPageNum.value = 1
   activatedCategoryId.value = categoryItem.id
   activatedFavoriteTitle.value = categoryItem.title
 }
@@ -162,6 +175,8 @@ function jumpToLoginPage() {
             :author="item.upper.name"
             :author-face="item.upper.face"
             :mid="item.upper.mid"
+            :view="item.cnt_info.play"
+            :danmaku="item.cnt_info.danmaku"
             :published-timestamp="item.pubtime"
             :bvid="item.bvid"
           />
@@ -209,27 +224,23 @@ function jumpToLoginPage() {
             {{ t('watch_later.play_all') }}
           </Button>
         </p>
-        <ul h-full overflow-overlay border-t="1 color-[rgba(255,255,255,.2)]" border-b="1 color-[rgba(255,255,255,.2)]">
+        <ul class="category-list" h-full overflow-overlay border-t="1 color-[rgba(255,255,255,.2)]" border-b="1 color-[rgba(255,255,255,.2)]">
           <li
             v-for="item in favoriteCategories" :key="item.id"
-            flex items-center
             border-b="1 color-[rgba(255,255,255,.2)]"
-            h-30px px-4 cursor-pointer hover:bg="[rgba(255,255,255,.35)]"
-            duration-300 color-white
+            lh-30px px-4 cursor-pointer hover:bg="[rgba(255,255,255,.35)]"
+            duration-300 color-white flex justify-between
             :style="{ background: item.id === activatedCategoryId ? 'rgba(255,255,255,.35)' : '' }"
-            @click="() => {
-              activatedCategoryId = item.id
-              activatedFavoriteTitle = item.title
-            }"
+            @click="changeCategory(item)"
           >
-            {{ item.title }}
+            <span>{{ item.title }}</span> <span ml-2 color-white color-opacity-60>{{ item.media_count }}</span>
           </li>
         </ul>
         <div
           v-if="favoriteResources[0]"
           pos="absolute top-0 left-0" w-full h-full bg-cover bg-center z--1
         >
-          <div absolute w-full h-full style="backdrop-filter: blur(60px) saturate(180%)" bg="$bew-fill-1" />
+          <div absolute w-full h-full style="backdrop-filter: blur(60px) saturate(180%)" bg="$bew-fill-4" />
           <img
             v-if="favoriteResources[0]"
             :src="removeHttpFromUrl(`${favoriteResources[0].cover}@480w_270h_1c`)"
@@ -255,4 +266,24 @@ function jumpToLoginPage() {
 .list-leave-to {
   --at-apply: opacity-0 transform translate-y-2 transform-gpu;
 }
+
+.category-list {
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(255, 255, 255, .35);
+    border-radius: 20px;
+  }
+
+  &::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+}
 </style>
diff --git a/src/contentScripts/views/History/History.vue b/src/contentScripts/views/History/History.vue
index 3531d30a..1dc0e1cf 100644
--- a/src/contentScripts/views/History/History.vue
+++ b/src/contentScripts/views/History/History.vue
@@ -69,16 +69,15 @@ function getHistoryList() {
     })
     .then((res) => {
       if (res.code === 0) {
+        if (Array.isArray(res.data.list) && res.data.list.length > 0)
+          historyList.push(...res.data.list)
+
         if (historyList.length !== 0 && res.data.list.length < 20) {
           isLoading.value = false
           noMoreContent.value = true
           return
         }
 
-        res.data.list.forEach((item: HistoryItem) => {
-          historyList.push(item)
-        })
-
         noMoreContent.value = false
       }
       isLoading.value = false