diff --git a/src/contentScripts/views/Anime/Anime.vue b/src/contentScripts/views/Anime/Anime.vue
index 6dbaad91..d13660ea 100644
--- a/src/contentScripts/views/Anime/Anime.vue
+++ b/src/contentScripts/views/Anime/Anime.vue
@@ -2,7 +2,6 @@
 import AnimeTimeTable from './components/AnimeTimeTable.vue'
 import { getUserID, openLinkToNewTab } from '~/utils/main'
 import { numFormatter } from '~/utils/dataFormatter'
-import emitter from '~/utils/mitt'
 import type { List as WatchListItem, WatchListResult } from '~/models/anime/watchList'
 import type { List as PopularAnimeItem, PopularAnimeResult } from '~/models/anime/popular'
 import type { ItemSubItem as RecommendationItem, RecommendationResult } from '~/models/anime/recommendation'
@@ -15,21 +14,48 @@ const isLoadingAnimeWatchList = ref<boolean>()
 const isLoadingPopularAnime = ref<boolean>()
 const isLoadingRecommendAnime = ref<boolean>()
 const activatedSeasonId = ref<number>()
+const noMoreContent = ref<boolean>()
+const noMoreContentWarning = ref<boolean>()
+const { handleReachBottom, handlePageRefresh } = useBewlyApp()
+
+const isLoading = computed(() => {
+  return isLoadingAnimeWatchList.value || isLoadingPopularAnime.value || isLoadingRecommendAnime.value
+})
+
+function initPageAction() {
+  handleReachBottom.value = () => {
+    if (isLoadingRecommendAnime.value)
+      return
+    if (noMoreContent.value) {
+      noMoreContentWarning.value = true
+      return
+    }
+    getRecommendAnimeList()
+  }
+  handlePageRefresh.value = () => {
+    if (isLoading.value)
+      return
+
+    animeWatchList.length = 0
+    recommendAnimeList.length = 0
+    popularAnimeList.length = 0
+    cursor.value = 0
+    getAnimeWatchList()
+    getPopularAnimeList()
+    getRecommendAnimeList()
+  }
+}
 
 onMounted(() => {
   getAnimeWatchList()
   getPopularAnimeList()
   getRecommendAnimeList()
 
-  emitter.off('reachBottom')
-  emitter.on('reachBottom', () => {
-    if (!isLoadingRecommendAnime.value)
-      getRecommendAnimeList()
-  })
+  initPageAction()
 })
 
-onUnmounted(() => {
-  emitter.off('reachBottom')
+onActivated(() => {
+  initPageAction()
 })
 
 function getAnimeWatchList() {
@@ -70,10 +96,13 @@ function getRecommendAnimeList() {
       if (code === 0 && has_next) {
         if (recommendAnimeList.length === 0)
           Object.assign(recommendAnimeList, items[0].sub_items as RecommendationItem[])
-        else recommendAnimeList.push(...items[0].sub_items)
+        else
+          recommendAnimeList.push(...items[0].sub_items)
 
         cursor.value = coursor
       }
+      if (code === 0 && !has_next)
+        noMoreContent.value = true
     })
     .finally(() => {
       isLoadingRecommendAnime.value = false
@@ -246,6 +275,10 @@ function getPopularAnimeList() {
         </div>
       </section>
     </div>
+
+    <!-- no more content -->
+    <Empty v-if="noMoreContentWarning" class="pb-4" :description="$t('common.no_more_content')" />
+
     <!-- loading -->
     <loading v-if="isLoadingRecommendAnime && recommendAnimeList.length !== 0" m="-t-4" />
   </div>
diff --git a/src/contentScripts/views/Favorites/Favorites.vue b/src/contentScripts/views/Favorites/Favorites.vue
index 9ea638ff..ac03ccb3 100644
--- a/src/contentScripts/views/Favorites/Favorites.vue
+++ b/src/contentScripts/views/Favorites/Favorites.vue
@@ -20,23 +20,33 @@ const activatedCategoryCover = ref<string>('')
 const shouldMoveCtrlBarUp = ref<boolean>(false)
 const currentPageNum = ref<number>(1)
 const keyword = ref<string>('')
-const handlePageRefresh = inject('handlePageRefresh') as Ref<() => void | Promise<void>>
+const { handlePageRefresh, handleReachBottom } = useBewlyApp()
 const isLoading = ref<boolean>(true)
 const isFullPageLoading = ref<boolean>(false)
 const noMoreContent = ref<boolean>()
 
+function initPageAction() {
+  handleReachBottom.value = async () => {
+    if (isLoading.value)
+      return
+    if (noMoreContent.value)
+      return
+    await getFavoriteResources(selectedCategory.value!.id, ++currentPageNum.value, keyword.value)
+  }
+
+  handlePageRefresh.value = () => {
+    if (isLoading.value)
+      return
+    favoriteResources.length = 0
+    handleSearch()
+  }
+}
+
 onMounted(async () => {
   await getFavoriteCategories()
   changeCategory(favoriteCategories[0])
 
-  emitter.off('reachBottom')
-  emitter.on('reachBottom', () => {
-    if (isLoading.value)
-      return
-
-    if (!noMoreContent.value)
-      getFavoriteResources(selectedCategory.value!.id, ++currentPageNum.value, keyword.value)
-  })
+  initPageAction()
 
   emitter.off('topBarVisibleChange')
   emitter.on('topBarVisibleChange', (val) => {
@@ -56,15 +66,11 @@ onMounted(async () => {
 })
 
 onUnmounted(() => {
-  emitter.off('reachBottom')
   emitter.off('topBarVisibleChange')
 })
 
 onActivated(() => {
-  handlePageRefresh.value = () => {
-    favoriteResources.length = 0
-    handleSearch()
-  }
+  initPageAction()
 })
 
 async function getFavoriteCategories() {
diff --git a/src/contentScripts/views/History/History.vue b/src/contentScripts/views/History/History.vue
index 45ce619e..7588819a 100644
--- a/src/contentScripts/views/History/History.vue
+++ b/src/contentScripts/views/History/History.vue
@@ -3,10 +3,8 @@ import { useDateFormat } from '@vueuse/core'
 import { useI18n } from 'vue-i18n'
 
 // import type { HistoryItem } from './types'
-import type { Ref } from 'vue'
 import { getCSRF, openLinkToNewTab, removeHttpFromUrl } from '~/utils/main'
 import { calcCurrentTime } from '~/utils/dataFormatter'
-import emitter from '~/utils/mitt'
 import { Business } from '~/models/video/history'
 import type { List as HistoryItem, HistoryResult } from '~/models/video/history'
 import type { List as HistorySearchItem, HistorySearchResult } from '~/models/video/historySearch'
@@ -14,32 +12,46 @@ import type { List as HistorySearchItem, HistorySearchResult } from '~/models/vi
 const { t } = useI18n()
 
 const isLoading = ref<boolean>()
-const noMoreContent = ref<boolean>()
+const noMoreContent = ref<boolean>(false)
+const noMoreContentWarning = ref<boolean>(false)
 const historyList = reactive<Array<HistoryItem>>([])
 const currentPageNum = ref<number>(1)
 const keyword = ref<string>()
 const historyStatus = ref<boolean>()
-const handlePageRefresh = inject('handlePageRefresh') as Ref<() => void | Promise<void>>
+const { handlePageRefresh, handleReachBottom } = useBewlyApp()
 
 const HistoryBusiness = computed(() => {
   return Business
 })
 
+function initPageAction() {
+  handleReachBottom.value = () => {
+    if (isLoading.value)
+      return
+    if (noMoreContent.value) {
+      noMoreContentWarning.value = true
+      return
+    }
+
+    if (keyword.value)
+      searchHistoryList()
+    else
+      getHistoryList()
+  }
+
+  handlePageRefresh.value = () => {
+    historyList.length = 0
+    currentPageNum.value = 1
+    getHistoryList()
+  }
+}
+
 watch(
   () => keyword.value,
   (newValue, oldValue) => {
     if (newValue === oldValue)
       return
-    emitter.on('reachBottom', () => {
-      if (isLoading.value)
-        return
-
-      if (!noMoreContent.value) {
-        if (keyword.value)
-          searchHistoryList()
-        else getHistoryList()
-      }
-    })
+    initPageAction()
   },
 )
 
@@ -47,28 +59,11 @@ onMounted(() => {
   getHistoryList()
   getHistoryPauseStatus()
 
-  emitter.off('reachBottom')
-  emitter.on('reachBottom', () => {
-    if (isLoading.value)
-      return
-
-    if (!noMoreContent.value) {
-      if (keyword.value)
-        searchHistoryList()
-      else getHistoryList()
-    }
-  })
-})
-
-onUnmounted(() => {
-  emitter.off('reachBottom')
+  initPageAction()
 })
 
 onActivated(() => {
-  handlePageRefresh.value = () => {
-    historyList.length = 0
-    getHistoryList()
-  }
+  initPageAction()
 })
 
 /**
@@ -154,7 +149,7 @@ function deleteHistoryItem(index: number, historyItem: HistoryItem) {
  * @param item history item
  * @return {string} url
  */
-function getHistoryUrl(item: HistoryItem) {
+function getHistoryUrl(item: HistoryItem): string {
   // anime
   if (item.history.business === 'pgc') {
     return removeHttpFromUrl(item.uri)
@@ -481,6 +476,10 @@ function jumpToLoginPage() {
           </section>
         </a>
       </transition-group>
+
+      <!-- no more content -->
+      <Empty v-if="noMoreContentWarning" class="py-4" :description="$t('common.no_more_content')" />
+
       <!-- loading -->
       <Transition name="fade">
         <loading
diff --git a/src/contentScripts/views/WatchLater/WatchLater.vue b/src/contentScripts/views/WatchLater/WatchLater.vue
index c5cf7a38..bf4c2b6d 100644
--- a/src/contentScripts/views/WatchLater/WatchLater.vue
+++ b/src/contentScripts/views/WatchLater/WatchLater.vue
@@ -12,15 +12,23 @@ const noMoreContent = ref<boolean>()
 const watchLaterList = reactive<VideoItem[]>([])
 const { handlePageRefresh } = useBewlyApp()
 
-onMounted(() => {
-  getAllWatchLaterList()
-})
-
-onActivated(() => {
+function initPageAction() {
   handlePageRefresh.value = () => {
+    if (isLoading.value)
+      return
+
     watchLaterList.length = 0
     getAllWatchLaterList()
   }
+}
+
+onMounted(() => {
+  getAllWatchLaterList()
+  initPageAction()
+})
+
+onActivated(() => {
+  initPageAction()
 })
 
 /**