diff --git a/src/components/Topbar/Topbar.vue b/src/components/Topbar/Topbar.vue
index 8474cc31..abde1865 100644
--- a/src/components/Topbar/Topbar.vue
+++ b/src/components/Topbar/Topbar.vue
@@ -53,15 +53,21 @@ const avatarShadow = ref<HTMLImageElement>() as Ref<HTMLImageElement>
 const favoritesPopRef = ref<any>()
 
 const scrollTop = ref<number>(0)
-const preventShowTopbar = ref<boolean>(false)
+const preventAdjustTopbarVisible = ref<boolean>(false)
 
 watch(scrollTop, (newVal, oldVal) => {
-  if (newVal === oldVal)
+  if (newVal === oldVal) {
+    preventAdjustTopbarVisible.value = true
     return
-  if (newVal <= 0 || Math.abs(newVal - oldVal) < 5)
-    preventShowTopbar.value = true
+  }
+  // Set a certain offset in pixels to prevent minor scrolling from triggering adjustments
+  // in the top bar visibility
+  const offset = 5
+
+  if (newVal <= 0 || Math.abs(newVal - oldVal) < offset)
+    preventAdjustTopbarVisible.value = true
   else
-    preventShowTopbar.value = false
+    preventAdjustTopbarVisible.value = false
 })
 
 watch(
@@ -98,13 +104,13 @@ watch(showFavoritesPop, (newVal, oldVal) => {
 })
 
 watch(activatedPage, () => {
-  hideTopbar.value = false
-  emitter.emit('topbarVisibleChange', true)
+  toggleTopbarVisible(true)
 })
 
-onMounted(() => {
+onMounted(async () => {
   initData()
-
+  await nextTick()
+  toggleTopbarVisible(true)
   window.addEventListener('wheel', handleWheelScroll)
   window.addEventListener('scroll', handleScroll)
 })
@@ -136,7 +142,7 @@ function handleWheelScroll(event: WheelEvent): void {
     scrollTop.value = document.documentElement.scrollTop
   }
 
-  if (preventShowTopbar.value)
+  if (preventAdjustTopbarVisible.value)
     return
 
   toggleTopbarVisible(true)
diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue
index 2e34d22b..02eaba00 100644
--- a/src/contentScripts/views/App.vue
+++ b/src/contentScripts/views/App.vue
@@ -252,12 +252,12 @@ provide('scrollbarRef', scrollbarRef)
   </template>
 
   <div
-    ref="mainAppRef" class="bewly-wrapper" text="$bew-text-1" transition="opacity duration-300" overflow-y-hidden z-60
-    pos="absolute top-0 left-0" w-full h-full overflow-hidden
+    ref="mainAppRef" class="bewly-wrapper" text="$bew-text-1" transition="opacity duration-300" z-60
+    pos="absolute top-0 left-0" w-full h-full
     :style="{ opacity: 1, height: isHomePage() ? '100vh' : '0' }"
   >
     <!-- Dock & RightSideButtons -->
-    <div>
+    <div pos="absolute top-0 left-0" w-inherit h-inherit overflow-hidden>
       <Dock v-if="isHomePage()" :activated-page="activatedPage" @change-page="pageName => changeActivatePage(pageName)" @settings-visibility-change="toggleSettings" />
       <RightSideButtons v-else @settings-visibility-change="toggleSettings" />
     </div>
diff --git a/src/contentScripts/views/Home/Home.vue b/src/contentScripts/views/Home/Home.vue
index db7f8046..95ac92a1 100644
--- a/src/contentScripts/views/Home/Home.vue
+++ b/src/contentScripts/views/Home/Home.vue
@@ -134,7 +134,7 @@ onUnmounted(() => {
       </Transition>
 
       <header
-        pos="sticky top-80px" w-fit z-10 mb-9 transition="all 300 ease-in-out"
+        pos="sticky top-80px" w-fit z-10 mb-9 duration-300 ease-in-out
         :class="{ hide: shouldMoveTabsUp }"
       >
         <ul flex="~ items-center gap-2">
@@ -184,7 +184,7 @@ onUnmounted(() => {
 }
 
 .hide {
-  transform: translateY(-70px);
+  --at-apply: important-translate-y--70px;
 }
 
 .tab-activated {
diff --git a/src/contentScripts/views/Home/components/Ranking.vue b/src/contentScripts/views/Home/components/Ranking.vue
index 0c08a401..90672f24 100644
--- a/src/contentScripts/views/Home/components/Ranking.vue
+++ b/src/contentScripts/views/Home/components/Ranking.vue
@@ -2,6 +2,7 @@
 import { useI18n } from 'vue-i18n'
 import type { PgcModel, RankingType, RankingVideoModel } from '../types'
 import { settings } from '~/logic'
+import emitter from '~/utils/mitt'
 
 const { t } = useI18n()
 
@@ -41,6 +42,7 @@ const isLoading = ref<boolean>(false)
 const activatedRankingType = ref<RankingType>({ ...rankingTypes.value[0] })
 const videoList = reactive<RankingVideoModel[]>([])
 const PgcList = reactive<PgcModel[]>([])
+const shouldMoveAsideUp = ref<boolean>(false)
 
 watch(() => activatedRankingType.value.id, () => {
   handleBackToTop(settings.value.useSearchPageModeOnHomePage ? 510 : 0)
@@ -52,9 +54,28 @@ watch(() => activatedRankingType.value.id, () => {
 })
 
 onMounted(() => {
+  emitter.on('topbarVisibleChange', (val) => {
+    shouldMoveAsideUp.value = false
+
+    // Allow moving tabs up only when the top bar is not hidden & is set to auto-hide
+    // This feature is primarily designed to compatible with the Bilibili Evolved's top bar
+    // Even when the BewlyBewly top bar is hidden, the Bilibili Evolved top bar still exists, so not moving up
+    if (settings.value.autoHideTopbar && settings.value.isShowTopbar) {
+      if (val)
+        shouldMoveAsideUp.value = false
+
+      else
+        shouldMoveAsideUp.value = true
+    }
+  })
+
   getRankingVideos()
 })
 
+onBeforeUnmount(() => {
+  emitter.off('topbarVisibleChange')
+})
+
 function getRankingVideos() {
   videoList.length = 0
   isLoading.value = true
@@ -86,7 +107,8 @@ function getRankingPgc() {
 <template>
   <div flex="~ gap-40px">
     <aside
-      pos="sticky top-150px" h="[calc(100vh-140px)]" w-200px shrink-0
+      pos="sticky top-150px" h="[calc(100vh-140px)]" w-200px shrink-0 duration-300 ease-in-out
+      :class="{ hide: shouldMoveAsideUp }"
     >
       <OverlayScrollbarsComponent h-inherit p-20px m--20px defer>
         <ul flex="~ col gap-2">
@@ -163,4 +185,8 @@ function getRankingPgc() {
 .active {
   --at-apply: scale-110 bg-$bew-theme-color dark:bg-white text-white dark:text-black shadow-$bew-shadow-2;
 }
+
+.hide {
+  --at-apply: h-[calc(100vh-70)] translate-y--70px;
+}
 </style>