diff --git a/src/contentScripts/views/Home/Home.vue b/src/contentScripts/views/Home/Home.vue
index 2f963028..e5272c68 100644
--- a/src/contentScripts/views/Home/Home.vue
+++ b/src/contentScripts/views/Home/Home.vue
@@ -1,24 +1,29 @@
 <script setup lang="ts">
-import RecommendContent from './components/RecommendContent.vue'
+import ForYou from './components/ForYou.vue'
 import Following from './components/Following.vue'
+import Trending from './components/Trending.vue'
 import emitter from '~/utils/mitt'
 import { settings } from '~/logic'
 
 const handleBackToTop = inject('handleBackToTop') as () => void
 
 const recommendContentKey = ref<string>(`recommendContent${Number(new Date())}`)
-const activatedPage = ref<'RecommendContent' | 'Following'>('RecommendContent')
-const pages = { RecommendContent, Following }
+const activatedPage = ref<'ForYou' | 'Following' | 'Trending'>('ForYou')
+const pages = { ForYou, Following, Trending }
 
-const tabs = reactive<{ label: string; value: 'RecommendContent' | 'Following' }[]>([
+const tabs = reactive<{ label: string; value: 'ForYou' | 'Following' | 'Trending' }[]>([
   {
     label: 'For you',
-    value: 'RecommendContent',
+    value: 'ForYou',
   },
   {
     label: 'Following',
     value: 'Following',
   },
+  {
+    label: 'Trending',
+    value: 'Trending',
+  },
 ])
 
 watch(() => activatedPage.value, () => {
diff --git a/src/contentScripts/views/Home/components/RecommendContent.vue b/src/contentScripts/views/Home/components/ForYou.vue
similarity index 100%
rename from src/contentScripts/views/Home/components/RecommendContent.vue
rename to src/contentScripts/views/Home/components/ForYou.vue
diff --git a/src/contentScripts/views/Home/components/Trending.vue b/src/contentScripts/views/Home/components/Trending.vue
index e69de29b..33976c32 100644
--- a/src/contentScripts/views/Home/components/Trending.vue
+++ b/src/contentScripts/views/Home/components/Trending.vue
@@ -0,0 +1,3 @@
+<template>
+  Trending
+</template>