diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index f76f7039..85aec4be 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -63,6 +63,12 @@ const isSearchPage = computed((): boolean => {
 
 // 當使用背景時，強制 icon 變白色用於區分背景
 const forceWhiteIcon = computed((): boolean => {
+  if (
+    // 分區頁面由於上面有背景，所以強制 icon 變白色用於區分背景
+    // channel, anime, chinese anime, tv shows, movie, variety shows, mooc
+    /https?:\/\/(?:www.)?bilibili.com\/(?:v|anime|guochuang|tv|movie|variety|mooc).*/.test(location.href)
+  )
+    return true
   if (!isHomePage())
     return false
   if (activatedPage.value === AppPage.Search) {
@@ -439,12 +445,12 @@ defineExpose({
         <Transition name="fade">
           <div
             v-if="!reachTop"
-            pos="absolute top-0 left-0" w-full h="[calc(var(--bew-top-bar-height)+10px)]"
+            pos="absolute top-0 left-0" w-full h="[calc(var(--bew-top-bar-height)+20px)]"
             pointer-events-none opacity-100
             :style="{
               background: `linear-gradient(to bottom, ${
                 forceWhiteIcon
-                  ? 'rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.4) calc(var(--bew-top-bar-height) / 2)'
+                  ? 'rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2) calc(var(--bew-top-bar-height) / 2)'
                   : 'color-mix(in oklab, var(--bew-bg), transparent 20%), color-mix(in oklab, var(--bew-bg), transparent 40%) calc(var(--bew-top-bar-height) / 2)'
               }, transparent)`,
             }"
@@ -465,17 +471,20 @@ defineExpose({
               grid="~ place-items-center"
               rounded="46px" duration-300
               w-46px h-46px transform-gpu
-              bg="hover:$bew-theme-color dark-hover:white"
+              bg="hover:$bew-theme-color"
               @click="event => handleClickTopBarItem(event, 'channels')"
             >
               <svg
                 t="1720198072316" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="1477" width="38" height="38"
-                un-fill="$bew-theme-color dark:white" un-group-hover:fill="white dark:$bew-theme-color"
-                filter="drop-shadow-[0_0_4px_var(--bew-theme-color-60)] dark:drop-shadow-[0_0_4px_var(--bew-theme-color)]"
+                :style="{
+                  fill: forceWhiteIcon ? 'white' : 'var(--bew-theme-color)',
+                  filter: forceWhiteIcon ? 'drop-shadow(0 0 6px black)' : 'drop-shadow(0 0 4px var(--bew-theme-color-60))',
+                }"
+                group-hover:fill="!white"
+                group-hover:filter="!none"
                 duration-300 mt--1px
               >
-                >
                 <path d="M450.803484 456.506027l-120.670435 23.103715 10.333298 45.288107 119.454151-23.102578-9.117014-45.289244z m65.04448 120.060586c-29.483236 63.220622-55.926329 15.502222-55.926328 15.502223l-19.754098 12.768142s38.90176 53.192249 75.986489 12.764729c43.770311 40.42752 77.203911-13.068516 77.203911-13.068516l-17.934791-11.55072c0.001138-0.304924-31.305956 44.983182-59.575183-16.415858z m59.57632-74.773617L695.182222 524.895573l10.029511-45.288106-120.364373-23.103716-9.423076 45.289245z m237.784178-88.926436c-1.905778-84.362809-75.487004-100.540871-75.487004-100.540871s-57.408853-0.316302-131.944676-0.95232l54.237867-52.332089s8.562916-10.784996-6.026809-22.834062c-14.592-12.051342-15.543182-6.660551-20.615396-3.487289-4.441884 3.169849-69.462471 66.920676-80.878933 78.340551-29.494613 0-60.2624-0.319716-90.075591-0.319716h10.466418s-77.705671-76.754489-82.781298-80.241777c-5.075627-3.488427-5.709369-8.56064-20.616533 3.487289-14.589724 12.05248-6.026809 22.8352-6.026809 22.8352l55.504213 53.919288c-60.261262 0-112.280462 0.319716-136.383147 1.268623-78.025387 22.521173-71.99744 100.859449-71.99744 100.859449s0.950044 168.100978 0 253.103217c8.562916 85.00224 73.899804 98.636231 73.899805 98.636231s26.007324 0.63488 45.357511 0.63488c1.900089 5.391929 3.486151 32.034133 33.302756 32.034134 29.495751 0 33.30048-32.034133 33.30048-32.034134s217.263218-0.950044 235.340231-0.950044c0.953458 9.196658 5.394204 33.619058 35.207395 33.303893 29.494613-0.636018 31.714418-35.20512 31.714418-35.20512s10.151253-0.95232 40.280747 0c70.413653-13.005938 74.534684-95.468658 74.534684-95.468657s-1.265209-169.689316-0.312889-254.056676zM752.628622 681.8304c0 13.319964-10.467556 24.102684-23.471218 24.102684H300.980907c-13.003662 0-23.47008-10.78272-23.47008-24.102684V397.961671c0-13.32224 10.467556-24.106098 23.47008-24.106098h428.176497c13.003662 0 23.471218 10.783858 23.471218 24.106098v283.868729z" p-id="1478" /></svg>
             </a>
 
@@ -491,7 +500,7 @@ defineExpose({
         </div>
 
         <!-- search bar -->
-        <div flex="inline 1 md:justify-center <md:justify-end items-center" w="full">
+        <div flex="inline 1 md:justify-center items-center" w="full">
           <Transition name="slide-out">
             <SearchBar
               v-if="showSearchBar"
@@ -883,10 +892,10 @@ defineExpose({
 }
 
 .logo.activated {
-  --uno: "bg-$bew-theme-color dark:bg-white";
+  --uno: "bg-$bew-theme-color";
 
   svg {
-    --uno: "fill-white dark:fill-$bew-theme-color";
+    --uno: "!fill-white !filter-none";
   }
 }
 
@@ -947,14 +956,13 @@ defineExpose({
   .unread-dot {
     --uno: "w-8px h-8px bg-$bew-theme-color rounded-8px absolute right-2px top-2px";
   }
-
   .right-side-item {
     --uno: "relative text-$bew-text-1 flex items-center";
 
     &:not(.avatar) a {
       --uno: "text-lg grid place-items-center rounded-40px duration-300 relative z-5";
       --uno: "h-34px w-34px";
-      filter: drop-shadow(0 0 4px var(--bew-bg));
+      filter: drop-shadow(0 0 6px var(--bew-bg));
     }
 
     &.active a,
@@ -964,7 +972,7 @@ defineExpose({
 
     .white-icon {
       --uno: "text-white";
-      filter: drop-shadow(0 0 4px black) !important;
+      filter: drop-shadow(0 0 6px black) !important;
     }
   }