diff --git a/src/background/apis/anime.ts b/src/background/apis/anime.ts
index 28cf6fce..5bf2b5c9 100644
--- a/src/background/apis/anime.ts
+++ b/src/background/apis/anime.ts
@@ -4,7 +4,23 @@ export const setupAnimeAPIs = () => {
   browser.runtime.onMessage.addListener((message) => {
     // get popular anime list
     if (message.contentScriptQuery === 'getPopularAnimeList') {
-      const url = 'https://api.bilibili.com/pgc/web/rank/list?season_type=1&day=3'
+      const url
+        = 'https://api.bilibili.com/pgc/web/rank/list?season_type=1&day=3'
+      return fetch(url)
+        .then(response => response.json())
+        .then(data => data)
+        .catch(error => console.error(error))
+    }
+    else if (message.contentScriptQuery === 'getAnimeTimeTable') {
+      const url
+        = 'https://api.bilibili.com/pgc/web/timeline?types=1&before=6&after=6'
+      return fetch(url)
+        .then(response => response.json())
+        .then(data => data)
+        .catch(error => console.error(error))
+    }
+    else if (message.contentScriptQuery === 'getAnimeDetail') {
+      const url = 'https://api.bilibili.com/pgc/view/web/season?ep_id=234406'
       return fetch(url)
         .then(response => response.json())
         .then(data => data)
diff --git a/src/contentScripts/views/Anime/components/PopularAnimeCarousel.vue b/src/contentScripts/views/Anime/components/PopularAnimeCarousel.vue
index 125ad8f8..f7b31694 100644
--- a/src/contentScripts/views/Anime/components/PopularAnimeCarousel.vue
+++ b/src/contentScripts/views/Anime/components/PopularAnimeCarousel.vue
@@ -1,28 +1,84 @@
 <script setup lang="ts">
 import type { PopularAnime } from './types'
+
 const popularAnimeList = reactive<PopularAnime[]>([])
+const activatedAnime = ref<PopularAnime>()
+const bannerContent = ref<HTMLElement>()
+const bannerHeight = ref<number>(0)
+
+onload = () => {
+  bannerHeight.value = bannerContent.value?.offsetHeight as number
+}
+
+onresize = () => {
+  bannerHeight.value = bannerContent.value?.offsetHeight as number
+}
 
 onMounted(() => {
   getPopularAnimeList()
 })
 
 function getPopularAnimeList() {
-  browser.runtime.sendMessage({
-    contentScriptQuery: 'getPopularAnimeList',
-  }).then((response) => {
-    const { code, result: { list } } = response
-    if (code === 0)
-      Object.assign(popularAnimeList, list.slice(0, 10) as PopularAnime[])
-  })
+  browser.runtime
+    .sendMessage({
+      contentScriptQuery: 'getPopularAnimeList',
+    })
+    .then((response) => {
+      const {
+        code,
+        result: { list },
+      } = response
+      if (code === 0) {
+        Object.assign(popularAnimeList, list.slice(0, 7) as PopularAnime[])
+        activatedAnime.value = popularAnimeList[0]
+      }
+    })
 }
 </script>
 
 <template>
-  <ul grid="~ cols-5 gap-4" overflow-hidden>
+  <div
+    ref="bannerContent"
+    w-full
+    h-70vh
+    min-h-400px
+    pos="absolute top-0 left-0"
+    z="-1"
+    backdrop-blur-2xl
+  >
+    <div
+      :style="{ backgroundImage: `url(${activatedAnime?.cover})` }"
+      bg="cover center"
+      duration-600
+      w-full
+      h-full
+      pos="absolute"
+      opacity-60
+      after:content-none
+      after:pos="absolute top-0 left-0"
+      after:w-full after:h-full
+      after:backdrop-blur-2xl
+    />
+  </div>
+  <div h-70vh min-h-400px z-1>
+    <div text="3xl">
+      {{ activatedAnime?.title }}
+
+      <img
+        w="full"
+        :src="activatedAnime?.ss_horizontal_cover.replace('https:', '')"
+        rounded="$bew-radius"
+      >
+    </div>
+  </div>
+
+  <ul w-full flex gap-4 overflow-hidden m="t--150px">
     <li
       v-for="(item, index) in popularAnimeList"
       :key="index"
+      flex="1"
       flex-shrink-0
+      @mouseover="activatedAnime = item"
     >
       <img
         w="full"
@@ -34,6 +90,4 @@ function getPopularAnimeList() {
   </ul>
 </template>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>
diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue
index 301d8473..52d4252a 100644
--- a/src/contentScripts/views/App.vue
+++ b/src/contentScripts/views/App.vue
@@ -60,6 +60,7 @@ function changeActivatePage(pageName: AppPage) {
         flex="~ col gap-2"
         rounded="r-$bew-radius"
         shadow="$bew-shadow-2"
+        style="backdrop-filter: var(--bew-filter-glass)"
       >
         <button
           class="tab-item"
@@ -105,7 +106,7 @@ function changeActivatePage(pageName: AppPage) {
       </div>
     </aside>
 
-    <main p="t-80px x-5" m="l-60px r-60px" w-full>
+    <main p="t-80px x-5" m="x-100px" w-full>
       <KeepAlive>
         <Home v-if="activatedPage === AppPage.Home" />
         <Search v-else-if="activatedPage === AppPage.Search" />
@@ -131,7 +132,6 @@ function changeActivatePage(pageName: AppPage) {
     hover:text-white
     dark-hover:bg-white
     dark-hover:text-black;
-  backdrop-filter: var(--bew-filter-glass);
 
   &.active {
     --at-apply: bg-$bew-theme-color dark-bg-white text-white dark-text-black;