diff --git a/src/background/apis/videos.ts b/src/background/apis/videos.ts
index ebf81689..4b97ef7e 100644
--- a/src/background/apis/videos.ts
+++ b/src/background/apis/videos.ts
@@ -63,6 +63,14 @@ export const setupVideosAPIs = () => {
         .then(data => data)
         .catch(error => console.error(error))
     }
+    else if (message.contentScriptQuery === 'getAppRecommendVideos') {
+      const url = `https://app.bilibili.com/x/feed/index?build=1&idx=${message.idx}&appkey=27eb53fc9058f8c3&access_key=${message.accessKey}`
+      // const url = `https://app.bilibili.com/x/v2/feed/index?build=72100100&idx=${message.idx}&appkey=27eb53fc9058f8c3&access_key=${message.accessKey}`
+      return fetch(url)
+        .then(response => response.json())
+        .then(data => data)
+        .catch(error => console.error(error))
+    }
     // https://github.com/SocialSisterYi/bilibili-API-collect/blob/master/docs/video/info.md#%E8%8E%B7%E5%8F%96%E8%A7%86%E9%A2%91%E8%B6%85%E8%AF%A6%E7%BB%86%E4%BF%A1%E6%81%AFweb%E7%AB%AF
     else if (message.contentScriptQuery === 'getVideoInfo') {
       const url = `https://api.bilibili.com/x/web-interface/view/detail?${message.aid ? `aid=${message.aid}` : `bvid=${message.bvid}`}`
diff --git a/src/components/Settings.vue b/src/components/Settings.vue
index a9587899..3ff712b6 100644
--- a/src/components/Settings.vue
+++ b/src/components/Settings.vue
@@ -183,7 +183,30 @@ function changeThemeColor(color: string) {
       />
     </div>
 
-    <div class="settings-item" important-hidden>
+    <div class="settings-item">
+      <div>
+        Recommendation mode
+      </div>
+
+      <div flex>
+        <div
+          p-4 cursor-pointer
+          :style="{ background: settings.recommendationMode === 'web' ? 'var(--bew-theme-color)' : '' }"
+          @click="settings.recommendationMode = 'web'"
+        >
+          web
+        </div>
+        <div
+          p-4 cursor-pointer
+          :style="{ background: settings.recommendationMode === 'app' ? 'var(--bew-theme-color)' : '' }"
+          @click="settings.recommendationMode = 'app'"
+        >
+          app
+        </div>
+      </div>
+    </div>
+
+    <div class="settings-item">
       <div>
         {{ $t('settings.authorize_app') }}
         <br>
diff --git a/src/components/Topbar/Topbar.vue b/src/components/Topbar/Topbar.vue
index 469167ad..7dd687b2 100644
--- a/src/components/Topbar/Topbar.vue
+++ b/src/components/Topbar/Topbar.vue
@@ -318,7 +318,7 @@ function getNewMomentsCount() {
           <div
             class="right-side-item"
             :class="{ active: showMomentsPop }"
-            @mouseenter="showMomentsPop = true"
+            @mouseenter="showMomentsPop = true; newMomentsCount = 0"
             @mouseleave="showMomentsPop = false"
           >
             <div v-if="newMomentsCount !== 0" class="unread-message">
diff --git a/src/contentScripts/views/Home/components/RecommendContent.vue b/src/contentScripts/views/Home/components/RecommendContent.vue
index 5a1735e3..073fd546 100644
--- a/src/contentScripts/views/Home/components/RecommendContent.vue
+++ b/src/contentScripts/views/Home/components/RecommendContent.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 // import { accessKey, language } from '~/logic/index'
 import type { Video } from '~/components/VideoCard/types'
+import { accessKey, settings } from '~/logic'
 
 const videoList = reactive<Video[]>([])
 const isLoading = ref<boolean>(false)
@@ -9,6 +10,11 @@ let refreshIdx = 1
 
 onMounted(() => {
   getRecommendVideos()
+  // if (settings.value.recommendationMode === 'web') { getRecommendVideos() }
+  // else {
+  //   for (let i = 0; i < 3; i++)
+  //     getAppRecommendVideos()
+  // }
 
   window.onscroll = () => {
     if (window.innerHeight + window.scrollY >= document.body.scrollHeight - 20) {
@@ -16,6 +22,11 @@ onMounted(() => {
         return
 
       getRecommendVideos()
+      // if (settings.value.recommendationMode === 'web') { getRecommendVideos() }
+      // else {
+      //   for (let i = 0; i < 3; i++)
+      //     getAppRecommendVideos()
+      // }
     }
   }
 })
@@ -58,6 +69,40 @@ async function getRecommendVideos() {
   }
 }
 
+async function getAppRecommendVideos() {
+  isLoading.value = true
+  try {
+    const response = await browser.runtime.sendMessage({
+      contentScriptQuery: 'getAppRecommendVideos',
+      accessKey: accessKey.value,
+      idx: 1,
+    })
+
+    if (response.code === 0) {
+      const resData = [] as Video[]
+
+      response.data.forEach((item: Video) => {
+        resData.push(item)
+      })
+
+      // when videoList has length property, it means it is the first time to load
+      if (!videoList.length) {
+        Object.assign(videoList, resData)
+      }
+      else {
+        // else we concat the new data to the old data
+        Object.assign(videoList, videoList.concat(resData))
+      }
+    }
+    else if (response.code === 62011) {
+      needToLoginFirst.value = true
+    }
+  }
+  finally {
+    isLoading.value = false
+  }
+}
+
 function jumpToLoginPage() {
   location.href = 'https://passport.bilibili.com/login'
 }
@@ -74,6 +119,7 @@ function jumpToLoginPage() {
     m="b-0 t-0"
     grid="~ 2xl:cols-5 xl:cols-4 lg:cols-3 md:cols-2 gap-4"
   >
+    <!-- <template v-if="settings.recommendationMode === 'web'"> -->
     <VideoCard
       v-for="video in videoList"
       :key="video.id"
@@ -88,6 +134,23 @@ function jumpToLoginPage() {
       :published-timestamp="video.pubdate"
       :bvid="video.bvid"
     />
+    <!-- </template> -->
+    <!-- <template v-else>
+      <VideoCard
+        v-for="(video, index) in videoList"
+        :key="index"
+        :duration="video.duration"
+        :title="video.title"
+        :cover="video.cover ?? ''"
+        :author="video.name"
+        :author-face="video.face"
+        :mid="video.mid"
+        :view="video.play"
+        :danmaku="video.danmaku"
+        :published-timestamp="video.ctime"
+        :aid="Number(video.param)"
+      />
+    </template> -->
 
     <!-- skeleton -->
     <template v-for="item in 30" :key="item">
diff --git a/src/logic/storage.ts b/src/logic/storage.ts
index 574bce75..6e2b291b 100644
--- a/src/logic/storage.ts
+++ b/src/logic/storage.ts
@@ -11,4 +11,5 @@ export const settings = useStorageLocal('settings', ref<Settings>({
   isShowTopbar: true,
   dockPosition: 'left',
   themeColor: '#00a1d6',
+  recommendationMode: 'web',
 }), { mergeDefaults: true })
diff --git a/src/manifest.ts b/src/manifest.ts
index af2e375e..4dc8a347 100644
--- a/src/manifest.ts
+++ b/src/manifest.ts
@@ -37,7 +37,7 @@ export async function getManifest() {
       'scripting',
       'declarativeNetRequest',
     ],
-    host_permissions: ['*://*.bilibili.com/*', '*://www.mcbbs.net/*'],
+    host_permissions: ['*://*.bilibili.com/*', '*://*.mcbbs.net/*'],
     content_scripts: [
       {
         matches: ['http://www.bilibili.com/*', 'https://www.bilibili.com/*'],
diff --git a/src/models/models.ts b/src/models/models.ts
index 51239287..fab074c8 100644
--- a/src/models/models.ts
+++ b/src/models/models.ts
@@ -3,4 +3,5 @@ export interface Settings {
   isShowTopbar: boolean
   dockPosition: 'left' | 'right' | 'bottom'
   themeColor: string
+  recommendationMode: 'web' | 'app'
 }