diff --git a/src/background/messageListeners/index.ts b/src/background/messageListeners/index.ts
index f2f81c5a..d2888651 100644
--- a/src/background/messageListeners/index.ts
+++ b/src/background/messageListeners/index.ts
@@ -8,6 +8,7 @@ import { setupMomentMsgLstnr } from './moment'
 import { setupHistoryMsgLstnr } from './history'
 import { setupFavoriteMsgLstnr } from './favorite'
 import { setupWatchLaterMsgLstnr } from './watchLater'
+import { setupRankingMsgLstnr } from './ranking'
 
 export function setupAllMsgLstnrs() {
   setupAuthMsgLstnr()
@@ -20,4 +21,5 @@ export function setupAllMsgLstnrs() {
   setupFavoriteMsgLstnr()
   setupAnimeMsgLstnr()
   setupWatchLaterMsgLstnr()
+  setupRankingMsgLstnr()
 }
diff --git a/src/background/messageListeners/ranking.ts b/src/background/messageListeners/ranking.ts
new file mode 100644
index 00000000..5f9a3a39
--- /dev/null
+++ b/src/background/messageListeners/ranking.ts
@@ -0,0 +1,15 @@
+import browser from 'webextension-polyfill'
+
+function handleMessage(message: any) {
+
+}
+
+function handleConnect() {
+  browser.runtime.onMessage.removeListener(handleMessage)
+  browser.runtime.onMessage.addListener(handleMessage)
+}
+
+export function setupRankingMsgLstnr() {
+  browser.runtime.onConnect.removeListener(handleConnect)
+  browser.runtime.onConnect.addListener(handleConnect)
+}
diff --git a/src/contentScripts/views/Home/Home.vue b/src/contentScripts/views/Home/Home.vue
index 6334c084..69fac36c 100644
--- a/src/contentScripts/views/Home/Home.vue
+++ b/src/contentScripts/views/Home/Home.vue
@@ -2,6 +2,7 @@
 import ForYou from './components/ForYou.vue'
 import Following from './components/Following.vue'
 import Trending from './components/Trending.vue'
+import Ranking from './components/Ranking.vue'
 import emitter from '~/utils/mitt'
 import { settings } from '~/logic'
 
@@ -9,9 +10,9 @@ const handleBackToTop = inject('handleBackToTop') as () => void
 
 const recommendContentKey = ref<string>(`recommendContent${Number(new Date())}`)
 const activatedPage = ref<'ForYou' | 'Following' | 'Trending'>('ForYou')
-const pages = { ForYou, Following, Trending }
+const pages = { ForYou, Following, Trending, Ranking }
 
-const tabs = reactive<{ label: string; value: 'ForYou' | 'Following' | 'Trending' }[]>([
+const tabs = reactive<{ label: string; value: 'ForYou' | 'Following' | 'Trending' | 'Ranking' }[]>([
   {
     label: 'For you',
     value: 'ForYou',
@@ -24,6 +25,10 @@ const tabs = reactive<{ label: string; value: 'ForYou' | 'Following' | 'Trending
     label: 'Trending',
     value: 'Trending',
   },
+  {
+    label: 'Ranking',
+    value: 'Ranking',
+  },
 ])
 
 watch(() => activatedPage.value, () => {
diff --git a/src/contentScripts/views/Home/components/Ranking.vue b/src/contentScripts/views/Home/components/Ranking.vue
new file mode 100644
index 00000000..e316c2fc
--- /dev/null
+++ b/src/contentScripts/views/Home/components/Ranking.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  ranking
+</template>