diff --git a/src/background/messageListeners/ranking.ts b/src/background/messageListeners/ranking.ts
index 5f9a3a39..d353781c 100644
--- a/src/background/messageListeners/ranking.ts
+++ b/src/background/messageListeners/ranking.ts
@@ -1,7 +1,21 @@
 import browser from 'webextension-polyfill'
 
 function handleMessage(message: any) {
-
+  // https://github.com/SocialSisterYi/bilibili-API-collect/blob/7873a79022a5606e2391d93b411a05576a0df111/docs/video_ranking/ranking.md#%E8%8E%B7%E5%8F%96%E5%88%86%E5%8C%BA%E8%A7%86%E9%A2%91%E6%8E%92%E8%A1%8C%E6%A6%9C%E5%88%97%E8%A1%A8
+  if (message.contentScriptQuery === 'getRankingVideos') {
+    const url = `https://api.bilibili.com/x/web-interface/ranking/v2?rid=${message.rid ?? 0}&type=all`
+    return fetch(url)
+      .then(response => response.json())
+      .then(data => data)
+      .catch(error => console.error(error))
+  }
+  else if (message.contentScriptQuery === 'getRankingAnime') {
+    const url = `https://api.bilibili.com/pgc/web/rank/list?day=3&season_type=${message.seasonType}`
+    return fetch(url)
+      .then(response => response.json())
+      .then(data => data)
+      .catch(error => console.error(error))
+  }
 }
 
 function handleConnect() {
diff --git a/src/contentScripts/views/Home/components/Ranking.vue b/src/contentScripts/views/Home/components/Ranking.vue
index e316c2fc..60beaead 100644
--- a/src/contentScripts/views/Home/components/Ranking.vue
+++ b/src/contentScripts/views/Home/components/Ranking.vue
@@ -1,7 +1,45 @@
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n'
 
+const { t } = useI18n()
+
+const genres = computed(() => {
+  return [
+    { name: 'All', rid: 0 },
+    { name: t('topbar.logo_dropdown.anime'), seasonType: 1 },
+    { name: t('topbar.logo_dropdown.chinese_anime'), seasonType: 4 },
+    { name: t('topbar.logo_dropdown.chinese_anime'), rid: 168 },
+    { name: t('topbar.logo_dropdown.documentary_films'), seasonType: 3 },
+    { name: t('topbar.logo_dropdown.animations'), rid: 1 },
+    { name: t('topbar.logo_dropdown.music'), rid: 3 },
+    { name: t('topbar.logo_dropdown.dance'), rid: 129 },
+    { name: t('topbar.logo_dropdown.gaming'), rid: 4 },
+    { name: t('topbar.logo_dropdown.knowledge'), rid: 36 },
+    { name: t('topbar.logo_dropdown.technology'), rid: 188 },
+    { name: t('topbar.logo_dropdown.sports'), rid: 234 },
+    { name: t('topbar.logo_dropdown.cars'), rid: 223 },
+    { name: t('topbar.logo_dropdown.life'), rid: 160 },
+    { name: t('topbar.logo_dropdown.foods'), rid: 211 },
+    { name: t('topbar.logo_dropdown.animals'), rid: 217 },
+    { name: t('topbar.logo_dropdown.kichiku'), rid: 119 },
+    { name: t('topbar.logo_dropdown.fashion'), rid: 155 },
+    { name: t('topbar.logo_dropdown.showbiz'), rid: 5 },
+    { name: t('topbar.logo_dropdown.cinephile'), rid: 181 },
+    { name: t('topbar.logo_dropdown.movies'), seasonType: 2 },
+    { name: t('topbar.logo_dropdown.tv_shows'), seasonType: 5 },
+    { name: t('topbar.logo_dropdown.variety_shows'), seasonType: 7 },
+    { name: 'Original', rid: 0, type: 'origin' },
+    { name: 'Newest Uploader', rid: 0, type: 'rookie' },
+  ]
+})
 </script>
 
 <template>
-  ranking
+  <div>
+    <ul>
+      <li>
+        <a href="">ALL</a>
+      </li>
+    </ul>
+  </div>
 </template>