diff --git a/src/_locales/cmn-CN.yml b/src/_locales/cmn-CN.yml
index abd6a686..761f14e9 100644
--- a/src/_locales/cmn-CN.yml
+++ b/src/_locales/cmn-CN.yml
@@ -10,6 +10,8 @@ common:
   hour: 小时前
   minute: 分钟前
   second: 秒前
+  please_log_in_first: 请先登录
+  login: 登录
 settings:
   title: 设置
   select_language: 界面语文
diff --git a/src/_locales/cmn-TW.yml b/src/_locales/cmn-TW.yml
index b7f35ea0..1523f1b8 100644
--- a/src/_locales/cmn-TW.yml
+++ b/src/_locales/cmn-TW.yml
@@ -10,6 +10,8 @@ common:
   hour: 小時前
   minute: 分鐘前
   second: 秒前
+  please_log_in_first: 請先登入
+  login: 登入
 settings:
   title: 設定
   select_language: 介面語文
diff --git a/src/_locales/en.yml b/src/_locales/en.yml
index 1ab39e75..c9a86821 100644
--- a/src/_locales/en.yml
+++ b/src/_locales/en.yml
@@ -10,6 +10,8 @@ common:
   hour: hour ago | hours ago
   minute: minute ago | minutes ago
   second: second ago | seconds ago
+  please_log_in_first: Please log in first
+  login: Login
 settings:
   title: Settings
   select_language: Language
diff --git a/src/_locales/jyut.yml b/src/_locales/jyut.yml
index 48fc1983..91aa77ea 100644
--- a/src/_locales/jyut.yml
+++ b/src/_locales/jyut.yml
@@ -10,6 +10,8 @@ common:
   hour: 個鐘頭前
   minute: 分鐘前
   second: 秒前
+  please_log_in_first: 唔該登入先
+  login: 登入
 settings:
   title: 校做
   select_language: 介面語文
@@ -38,7 +40,7 @@ settings:
 auth:
   err_tip: Failed to grant Access Key
   plz_login_first: Please login to bilibili first
-  receive_verified_url_err: Unable to receive verified URL. Please go back and try againe.
+  receive_verified_url_err: Unable to receive verified URL. Please go back and try again.
   failed_to_get_accesskey: Failed to get Access Key
 topbar:
   sign_in: 登入
diff --git a/src/background/apis/videos.ts b/src/background/apis/videos.ts
index 8a1414a8..ebf81689 100644
--- a/src/background/apis/videos.ts
+++ b/src/background/apis/videos.ts
@@ -56,7 +56,8 @@ export const setupVideosAPIs = () => {
     // #endregion
 
     if (message.contentScriptQuery === 'getRecommendVideos') {
-      const url = `https://api.bilibili.com/x/web-interface/index/top/feed/rcmd?fresh_idx=${message.refreshIdx}&feed_version=V1&fresh_type=4&ps=30&plat=1`
+      // const url = `https://app.bilibili.com/x/v2/feed/index?build=72100100&idx=${message.idx}&appkey=27eb53fc9058f8c3&access_key=${message.accessKey}`
+      const url = `https://api.bilibili.com/x/web-interface/index/top/feed/rcmd?fresh_idx=${message.refreshIdx}&feed_version=V2&fresh_type=4&ps=30&plat=1`
       return fetch(url)
         .then(response => response.json())
         .then(data => data)
diff --git a/src/components/Empty.vue b/src/components/Empty.vue
index ed86e4e8..6d7f085e 100644
--- a/src/components/Empty.vue
+++ b/src/components/Empty.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import browser from 'webextension-polyfill'
+
 const props = defineProps<{
-  description: string
+  description?: string
 }>()
 
 const emptyImg = browser.runtime.getURL('/assets/empty.png')
@@ -10,7 +11,7 @@ const emptyImg = browser.runtime.getURL('/assets/empty.png')
 <template>
   <div flex="~ col gap-4" justify="center" items="center">
     <img :src="emptyImg" w="200px" h="auto">
-    <span text="$bew-text-3">{{ props.description }}</span>
+    <span v-if="props.description" text="$bew-text-3">{{ props.description }}</span>
     <slot />
   </div>
 </template>
diff --git a/src/components/Settings.vue b/src/components/Settings.vue
index bb86febb..fc3470a6 100644
--- a/src/components/Settings.vue
+++ b/src/components/Settings.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 import type { Ref } from 'vue'
-// import { grantAccessKey, revokeAccessKey } from '~/utils/index'
+import { grantAccessKey, revokeAccessKey } from '~/utils/index'
 import { accessKey, settings } from '~/logic'
 
 const emit = defineEmits(['close'])
 
 const { t, locale } = useI18n()
 
-// const authorizeBtn = ref<HTMLButtonElement>() as Ref<HTMLButtonElement>
+const authorizeBtn = ref<HTMLButtonElement>() as Ref<HTMLButtonElement>
 const langsSelect = ref<HTMLElement>() as Ref<HTMLElement>
 
 const langs = computed(() => {
@@ -56,13 +56,13 @@ function close() {
   emit('close')
 }
 
-// function onAuthorize() {
-//   grantAccessKey(authorizeBtn.value)
-// }
+function onAuthorize() {
+  grantAccessKey(authorizeBtn.value)
+}
 
-// function onRevoke() {
-//   revokeAccessKey()
-// }
+function onRevoke() {
+  revokeAccessKey()
+}
 </script>
 
 <template>
@@ -101,7 +101,7 @@ function close() {
       />
     </div>
 
-    <!-- <div class="settings-item">
+    <div class="settings-item" important-hidden>
       <div>
         {{ $t('settings.authorize_app') }}
         <br>
@@ -118,7 +118,7 @@ function close() {
       <button v-else class="line-btn" @click="onRevoke">
         <span>{{ $t('settings.btn.revoke') }}</span>
       </button>
-    </div> -->
+    </div>
 
     <div class="settings-item">
       <div>
diff --git a/src/components/VideoCard/VideoCard.vue b/src/components/VideoCard/VideoCard.vue
index 7ba0b1ad..695274f7 100644
--- a/src/components/VideoCard/VideoCard.vue
+++ b/src/components/VideoCard/VideoCard.vue
@@ -1,16 +1,25 @@
 <script lang="ts" setup>
 import type { Video } from './types'
-import { accessKey, language } from '~/logic/index'
+// import { accessKey, language } from '~/logic/index'
 import {
   calcCurrentTime,
   calcTimeSince,
   numFormatter,
   removeHttpFromUrl,
 } from '~/utils'
-import { LanguageType } from '~/enums/appEnums'
+// import { LanguageType } from '~/enums/appEnums'
 
 const props = defineProps<{
   videoData: Video
+  // duration: number
+  // title: string
+  // cover: string
+  // author: string
+  // mid: number
+  // view: number
+  // danmaku: number
+  // publishedDate: number
+
 }>()
 
 const videoUrl = computed(() => {
@@ -18,7 +27,7 @@ const videoUrl = computed(() => {
 })
 
 const isDislike = ref<boolean>(false)
-const dislikeReasonId = ref<number | null>(null)
+// const dislikeReasonId = ref<number | null>(null)
 const showPopCtrl = ref<boolean>(false)
 
 function gotoChannel(mid: number) {
diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue
index d0bdb22b..48c2e26f 100644
--- a/src/contentScripts/views/App.vue
+++ b/src/contentScripts/views/App.vue
@@ -56,6 +56,7 @@ onMounted(() => {
   if (/https?:\/\/(www.)?bilibili.com\/video\/.*/.test(location.href))
     isVideoPage.value = true
   setAppAppearance()
+  setAppLanguage()
 })
 
 function changeActivatePage(pageName: AppPage) {
@@ -195,9 +196,10 @@ function setAppAppearance() {
         <main
           p="t-80px" m-auto
           :w="isVideoPage ? '[calc(100%-160px)]' : 'lg:85% md:[calc(90%-60px)] [calc(100%-120px)]'"
+          relative
         >
           <Transition name="fade">
-            <Component :is="pages[activatedPage]" v-if="!isVideoPage" />
+            <Component :is="pages[activatedPage]" v-if="!isVideoPage" absolute w-full />
             <Video v-else />
           </Transition>
         </main>
diff --git a/src/contentScripts/views/History/History.vue b/src/contentScripts/views/History/History.vue
index 33f795e2..18d27a6e 100644
--- a/src/contentScripts/views/History/History.vue
+++ b/src/contentScripts/views/History/History.vue
@@ -520,9 +520,9 @@ function jumpToLoginPage() {
       </div>
     </aside>
   </div>
-  <Empty v-else mt-6 description="Please login first">
+  <Empty v-else mt-6 :description="t('common.please_log_in_first')">
     <Button type="primary" @click="jumpToLoginPage()">
-      Login
+      {{ $t('common.login') }}
     </Button>
   </Empty>
 </template>
diff --git a/src/contentScripts/views/Home/components/RecommendContent.vue b/src/contentScripts/views/Home/components/RecommendContent.vue
index ba38221c..f2923b44 100644
--- a/src/contentScripts/views/Home/components/RecommendContent.vue
+++ b/src/contentScripts/views/Home/components/RecommendContent.vue
@@ -6,6 +6,7 @@ import type { Video } from '~/components/VideoCard/types'
 
 const videoList = reactive<Video[]>([])
 const isLoading = ref<boolean>(false)
+const needToLoginFirst = ref<boolean>(false)
 let refreshIdx = 1
 
 onMounted(() => {
@@ -50,6 +51,9 @@ async function getRecommendVideos() {
         Object.assign(videoList, videoList.concat(resData))
       }
     }
+    else if (response.code === 62011) {
+      needToLoginFirst.value = true
+    }
   }
   finally {
     isLoading.value = false
@@ -61,10 +65,20 @@ function onEnter(el: Element, done: () => void) {
   element.style.transitionDelay = '0.1s'
   done()
 }
+
+function jumpToLoginPage() {
+  location.href = 'https://passport.bilibili.com/login'
+}
 </script>
 
 <template>
+  <Empty v-if="needToLoginFirst" mt-6 :description="$t('common.please_log_in_first')">
+    <Button type="primary" @click="jumpToLoginPage()">
+      {{ $t('common.login') }}
+    </Button>
+  </Empty>
   <div
+    v-else
     m="b-0 t-0"
     grid="~ 2xl:cols-5 xl:cols-4 lg:cols-3 md:cols-2 gap-4"
   >
@@ -77,7 +91,7 @@ function onEnter(el: Element, done: () => void) {
     </TransitionGroup>
   </div>
 
-  <loading v-if="isLoading" />
+  <Loading v-if="isLoading" />
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/manifest.ts b/src/manifest.ts
index 81ec8096..aeb70e6d 100644
--- a/src/manifest.ts
+++ b/src/manifest.ts
@@ -35,10 +35,8 @@ export async function getManifest() {
       'storage',
       'activeTab',
       'scripting',
-      'declarativeNetRequest',
-      'declarativeNetRequestFeedback',
     ],
-    host_permissions: ['https://*.bilibili.com/*'],
+    host_permissions: ['*://*.bilibili.com/*', '*://www.mcbbs.net/*'],
     content_scripts: [
       {
         matches: ['http://www.bilibili.com/*', 'https://www.bilibili.com/*'],
diff --git a/src/utils/dataFormatter.ts b/src/utils/dataFormatter.ts
index 82e46b51..be7b7059 100644
--- a/src/utils/dataFormatter.ts
+++ b/src/utils/dataFormatter.ts
@@ -1,3 +1,4 @@
+import { LanguageType } from './../enums/appEnums'
 import { settings } from '~/logic'
 import { i18n } from '~/utils/i18n'
 export const { t } = i18n.global
@@ -5,15 +6,8 @@ export const { t } = i18n.global
 export const numFormatter = (num: number) => {
   const digits = 1 // specify number of digits after decimal
   let lookup
-  if (settings.value.language === 'en') {
-    lookup = [
-      { value: 1, symbol: '' },
-      { value: 1e3, symbol: 'K' },
-      { value: 1e6, symbol: 'M' },
-      { value: 1e9, symbol: 'B' },
-    ]
-  }
-  else if (settings.value.language === 'cmn-CN') {
+
+  if (settings.value.language === LanguageType.Mandarin_CN) {
     lookup = [
       { value: 1, symbol: ' ' },
       { value: 1e4, symbol: ' 万' },
@@ -21,7 +15,7 @@ export const numFormatter = (num: number) => {
       { value: 1e8, symbol: ' 亿' },
     ]
   }
-  else {
+  else if (settings.value.language === LanguageType.Cantonese || settings.value.language === LanguageType.Mandarin_TW) {
     lookup = [
       { value: 1, symbol: ' ' },
       { value: 1e4, symbol: ' 萬' },
@@ -29,6 +23,14 @@ export const numFormatter = (num: number) => {
       { value: 1e8, symbol: ' 億' },
     ]
   }
+  else {
+    lookup = [
+      { value: 1, symbol: '' },
+      { value: 1e3, symbol: 'K' },
+      { value: 1e6, symbol: 'M' },
+      { value: 1e9, symbol: 'B' },
+    ]
+  }
   const rx = /\.0+$|(\.[0-9]*[1-9])0+$/
   const item = lookup.slice().reverse().find((item) => {
     return num >= item.value