diff --git a/src/components/Topbar/Topbar.vue b/src/components/Topbar/Topbar.vue
index 70028c4c..21989f45 100644
--- a/src/components/Topbar/Topbar.vue
+++ b/src/components/Topbar/Topbar.vue
@@ -210,7 +210,7 @@ async function getTopbarNewMomentsCount() {
           v-show="showTopbarMask"
           class="fixed top-0 left-0"
           w="full"
-          h="100px"
+          h="80px"
           opacity="100"
           pointer-events-none
           z--1
diff --git a/src/contentScripts/views/Home/Home.vue b/src/contentScripts/views/Home/Home.vue
index 3734c49a..698bf4ff 100644
--- a/src/contentScripts/views/Home/Home.vue
+++ b/src/contentScripts/views/Home/Home.vue
@@ -89,17 +89,24 @@ onUnmounted(() => {
             v-for="tab in tabs" :key="tab.value"
             px-4 lh-40px bg="$bew-elevated-2" backdrop-glass rounded="$bew-radius"
             cursor-pointer shadow="$bew-shadow-2"
-            :style="{ backgroundColor: activatedPage === tab.value ? 'var(--bew-theme-color)' : null }"
+            :class="{ 'tab-activated': activatedPage === tab.value }"
             @click="activatedPage = tab.value"
           >
             {{ tab.label }}
           </li>
         </ul>
       </header>
-      <Component :is="pages[activatedPage]" :key="recommendContentKey" />
+
+      <Transition name="page-fade">
+        <Component :is="pages[activatedPage]" :key="recommendContentKey" />
+      </Transition>
       <!-- <RecommendContent :key="recommendContentKey" /> -->
     </main>
   </div>
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.tab-activated {
+  --at-apply: bg-$bew-theme-color dark:bg-white color-white dark:color-black
+}
+</style>