diff --git a/src/components/SearchBar/SearchBar.vue b/src/components/SearchBar/SearchBar.vue
index 6f8508a5..cb73f166 100644
--- a/src/components/SearchBar/SearchBar.vue
+++ b/src/components/SearchBar/SearchBar.vue
@@ -280,10 +280,13 @@ function handleKeyDown() {
 }
 
 #search-wrap {
+  --b-search-bar-color: var(--bew-content-1);
+  --b-search-bar-color-hover: var(--bew-content-1-hover);
+  --b-search-bar-color-focus: var(--b-search-bar-color);
 
   @mixin card-content {
     --at-apply: text-base outline-none w-full
-      bg-$bew-content-1 shadow-$bew-shadow-2;
+      bg-$b-search-bar-color shadow-$bew-shadow-2;
     backdrop-filter: var(--bew-filter-glass);
   }
 
@@ -292,7 +295,12 @@ function handleKeyDown() {
       @include card-content;
       --at-apply: shadow-$bew-shadow-2;
 
+      &:hover {
+        --at-apply: bg-$b-search-bar-color-hover;
+      }
+
       &:focus {
+        --at-apply: bg-$b-search-bar-color-focus;
         box-shadow: 0 6px 16px var(--bew-theme-color-40), inset 0 0 6px var(--bew-theme-color-30)
       }
     }
diff --git a/src/components/Topbar/Topbar.vue b/src/components/Topbar/Topbar.vue
index a0211061..3a1ef0ff 100644
--- a/src/components/Topbar/Topbar.vue
+++ b/src/components/Topbar/Topbar.vue
@@ -4,7 +4,6 @@ import { onMounted, watch } from 'vue'
 import type { UnReadDm, UnReadMessage, UserInfo } from './types'
 import { updateInterval } from './notify'
 import { getUserID } from '~/utils/main'
-import { settings } from '~/logic'
 
 interface Props {
   showSearchBar?: boolean
@@ -95,12 +94,12 @@ async function initData() {
 }
 
 function showLogoMenuDropdown() {
-  logo.value.classList.add('hover')
+  logo.value.classList.add('activated')
   showChannelsPop.value = true
 }
 
 function closeLogoMenuDropdown() {
-  logo.value.classList.remove('hover')
+  logo.value.classList.remove('activated')
   showChannelsPop.value = false
 }
 
@@ -203,65 +202,62 @@ async function getTopbarNewMomentsCount() {
       p="lg:x-20 md:x-16 x-14"
       h="70px"
     >
-      <Transition name="fade">
+      <div w="xl:280px">
         <div
-          v-show="showTopbarMask"
-          class="fixed top-0 left-0"
-          w="full"
-          h="80px"
-          opacity="80"
-          pointer-events-none
-          z--1
-          :style="{
-            background: (settings.wallpaper || settings.useSearchPageModeOnHomePage) && isHomePage
-              ? 'linear-gradient(rgba(0,0,0,0.6), transparent)' : `linear-gradient(var(--bew-homepage-bg), transparent)`
-          }"
-        />
-      </Transition>
-
-      <div
-        class="left-side" z-1 w="xl:280px" shrink-0
-        @mouseenter.self="showLogoMenuDropdown()"
-        @mouseleave.self="closeLogoMenuDropdown()"
-      >
-        <Transition name="slide-out">
-          <a
-            v-if="showLogo"
-            ref="logo" class="logo" href="//www.bilibili.com"
-            :style="{ fill: (settings.wallpaper || settings.useSearchPageModeOnHomePage) && isHomePage ? 'white' : 'var(--bew-logo-color)' }"
-          >
-            <svg
-              t="1645466458357"
-              class="icon"
-              viewBox="0 0 2299 1024"
-              version="1.1"
-              xmlns="http://www.w3.org/2000/svg"
-              p-id="2663"
-              width="60"
-              height="60"
+          z-1 shrink-0 relative w-fit
+          @mouseenter.self="showLogoMenuDropdown()"
+          @mouseleave.self="closeLogoMenuDropdown()"
+        >
+          <Transition name="slide-out">
+            <a
+              v-if="showLogo"
+              ref="logo" href="//www.bilibili.com"
+              class="group logo"
+              flex items-center backdrop-glass border="1 $bew-border-color"
+              rounded="50px" p="x-4" shadow="$bew-shadow-2" duration-300
+              bg="$bew-elevated-1 hover:$bew-theme-color dark-hover:white"
+              w-auto h-50px
             >
-              <path
-                d="M1775.840814 322.588002c6.0164 1.002733 53.144869-9.525967 55.150336-6.016401 3.0082 4.5123 24.065601 155.92504 18.550567 156.927774s-44.621635 10.027334-44.621635 10.027334c-3.0082-20.556034-28.577901-147.903173-29.079268-160.938707m75.205003-14.539634l20.556034 162.944174c10.5287-0.501367 53.144869-3.509567 57.155803-4.010934-6.0164-61.668103-16.545101-158.933241-16.545101-158.93324-20.054668-4.010934-41.112069-4.010934-61.166736 0m-40.610702 226.116376s92.752838-23.564234 126.344406-12.0328c17.046467 61.668103 48.131202 407.611118 51.139402 421.649386-21.057401 2.506833-90.246004 8.523234-95.761037 10.027333-4.5123-26.071068-81.72277-403.098818-81.722771-419.643919m343.436183-207.565809c5.515034 1.5041 54.648969-5.013667 55.150335-1.5041 1.002733 12.032801 6.0164 157.42914 0.501367 157.930507s-44.621635 4.010934-44.621635 4.010934c-1.002733-20.054668-12.032801-146.90044-11.030067-160.437341m75.70637-4.010933l4.010933 160.938707c10.5287 0 52.643502 2.506833 57.155803 2.005467-1.002733-61.668103 0-158.933241 0-158.933241-20.054668-3.509567-40.610702-5.013667-61.166736-4.010933m-64.676303 216.089043s94.758304-12.534167 126.845772 2.506833c7.019134 72.196803 6.0164 408.613852 7.019134 422.652119-21.558768 0-90.246004 1.002733-95.761038 2.005467-1.002733-26.071068-39.607968-410.619319-38.103868-427.164419m-220.099977-413.627519c54.648969 278.759879 96.262404 755.058234 97.766504 785.641602 0 0 43.117535 1.002733 91.750105 4.010934C2105.740095 614.383415 2070.644427 134.575493 2071.145794 119.033126c-12.032801-13.536901-126.344406 6.0164-126.344406 6.0164m-120.328005 659.297196c-10.5287-78.213204-290.291313-166.955108-447.720454-138.377206 0 0-19.553301-172.470141-27.073801-339.425248-6.517767-143.390873-1.002733-282.770813 0.501366-305.833681-10.5287-7.5205-123.837572 46.627102-185.004308 69.188603 0 0 73.199537 309.844614 126.344406 952.59671 0 0 84.730971 9.0246 230.12731-19.051934s317.365114-115.815705 302.825481-219.097244m-341.932083 140.88404l-24.566967-176.982441c6.0164-3.0082 156.927774 53.144869 172.971507 63.172203-2.506833 11.030067-148.40454 113.810238-148.40454 113.810238M610.664628 322.588002c6.0164 1.002733 53.144869-9.525967 55.150335-6.016401 3.0082 4.5123 24.065601 155.92504 18.550568 156.927774s-44.621635 10.027334-44.621635 10.027334c-3.0082-20.556034-28.577901-147.903173-29.079268-160.938707m75.205003-14.539634l20.556034 162.944174c10.5287-0.501367 53.144869-3.509567 57.155803-4.010934-6.517767-61.668103-16.545101-158.933241-16.545101-158.93324-20.054668-4.010934-41.112069-4.010934-61.166736 0m-40.610702 226.116376s92.752838-23.564234 126.344406-12.0328c17.046467 61.668103 48.131202 407.611118 51.139402 421.649386-21.057401 2.506833-90.246004 8.523234-95.761037 10.027333-4.5123-26.071068-81.72277-403.098818-81.722771-419.643919m343.436182-207.565809c5.515034 1.5041 54.648969-5.013667 55.150336-1.5041 1.002733 12.032801 6.0164 157.42914 0.501367 157.930507s-44.621635 4.010934-44.621635 4.010934c-1.002733-20.054668-11.531434-146.90044-11.030068-160.437341m75.706371-4.010933l4.010933 160.938707c10.5287 0 52.643502 2.506833 57.155803 2.005467-1.002733-61.668103 0-158.933241 0-158.933241-20.054668-3.509567-40.610702-4.5123-61.166736-4.010933m-64.676303 216.089043s94.758304-12.534167 126.845772 2.506833c7.019134 72.196803 6.0164 408.613852 7.019134 422.652119-21.558768 0-90.246004 1.002733-95.761038 2.005467-0.501367-26.071068-39.607968-410.619319-38.103868-427.164419m-220.099977-413.627519c54.648969 278.759879 96.262404 755.058234 97.766504 785.641602 0 0 43.117535 1.002733 91.750105 4.010934-28.577901-300.318647-63.67357-780.126569-63.172203-796.170303-12.032801-13.035534-126.344406 6.517767-126.344406 6.517767m-120.328005 659.297196c-10.5287-78.213204-290.291313-166.955108-447.720454-138.377206 0 0-19.553301-172.470141-27.073801-339.425248-6.517767-143.390873-1.002733-282.770813 0.501366-305.833681C174.475608-6.308547 61.166736 47.337689 0 69.89919c0 0 73.199537 309.844614 126.344406 952.59671 0 0 84.730971 9.0246 230.12731-19.051934s317.365114-115.815705 302.825481-219.097244m-341.932083 140.88404l-24.566967-176.982441c6.0164-3.0082 156.927774 53.144869 172.971507 63.172203-2.506833 11.030067-148.40454 113.810238-148.40454 113.810238"
-                p-id="2664"
-              />
-            </svg>
-          </a>
-        </Transition>
+              <svg
+                t="1645466458357"
+                viewBox="0 0 2299 1024"
+                version="1.1"
+                xmlns="http://www.w3.org/2000/svg"
+                p-id="2663"
+                width="50"
+                height="40"
+                duration-300
+                un-fill="$bew-theme-color dark:white" un-group-hover:fill="white dark:$bew-theme-color"
+              >
+                <path
+                  d="M1775.840814 322.588002c6.0164 1.002733 53.144869-9.525967 55.150336-6.016401 3.0082 4.5123 24.065601 155.92504 18.550567 156.927774s-44.621635 10.027334-44.621635 10.027334c-3.0082-20.556034-28.577901-147.903173-29.079268-160.938707m75.205003-14.539634l20.556034 162.944174c10.5287-0.501367 53.144869-3.509567 57.155803-4.010934-6.0164-61.668103-16.545101-158.933241-16.545101-158.93324-20.054668-4.010934-41.112069-4.010934-61.166736 0m-40.610702 226.116376s92.752838-23.564234 126.344406-12.0328c17.046467 61.668103 48.131202 407.611118 51.139402 421.649386-21.057401 2.506833-90.246004 8.523234-95.761037 10.027333-4.5123-26.071068-81.72277-403.098818-81.722771-419.643919m343.436183-207.565809c5.515034 1.5041 54.648969-5.013667 55.150335-1.5041 1.002733 12.032801 6.0164 157.42914 0.501367 157.930507s-44.621635 4.010934-44.621635 4.010934c-1.002733-20.054668-12.032801-146.90044-11.030067-160.437341m75.70637-4.010933l4.010933 160.938707c10.5287 0 52.643502 2.506833 57.155803 2.005467-1.002733-61.668103 0-158.933241 0-158.933241-20.054668-3.509567-40.610702-5.013667-61.166736-4.010933m-64.676303 216.089043s94.758304-12.534167 126.845772 2.506833c7.019134 72.196803 6.0164 408.613852 7.019134 422.652119-21.558768 0-90.246004 1.002733-95.761038 2.005467-1.002733-26.071068-39.607968-410.619319-38.103868-427.164419m-220.099977-413.627519c54.648969 278.759879 96.262404 755.058234 97.766504 785.641602 0 0 43.117535 1.002733 91.750105 4.010934C2105.740095 614.383415 2070.644427 134.575493 2071.145794 119.033126c-12.032801-13.536901-126.344406 6.0164-126.344406 6.0164m-120.328005 659.297196c-10.5287-78.213204-290.291313-166.955108-447.720454-138.377206 0 0-19.553301-172.470141-27.073801-339.425248-6.517767-143.390873-1.002733-282.770813 0.501366-305.833681-10.5287-7.5205-123.837572 46.627102-185.004308 69.188603 0 0 73.199537 309.844614 126.344406 952.59671 0 0 84.730971 9.0246 230.12731-19.051934s317.365114-115.815705 302.825481-219.097244m-341.932083 140.88404l-24.566967-176.982441c6.0164-3.0082 156.927774 53.144869 172.971507 63.172203-2.506833 11.030067-148.40454 113.810238-148.40454 113.810238M610.664628 322.588002c6.0164 1.002733 53.144869-9.525967 55.150335-6.016401 3.0082 4.5123 24.065601 155.92504 18.550568 156.927774s-44.621635 10.027334-44.621635 10.027334c-3.0082-20.556034-28.577901-147.903173-29.079268-160.938707m75.205003-14.539634l20.556034 162.944174c10.5287-0.501367 53.144869-3.509567 57.155803-4.010934-6.517767-61.668103-16.545101-158.933241-16.545101-158.93324-20.054668-4.010934-41.112069-4.010934-61.166736 0m-40.610702 226.116376s92.752838-23.564234 126.344406-12.0328c17.046467 61.668103 48.131202 407.611118 51.139402 421.649386-21.057401 2.506833-90.246004 8.523234-95.761037 10.027333-4.5123-26.071068-81.72277-403.098818-81.722771-419.643919m343.436182-207.565809c5.515034 1.5041 54.648969-5.013667 55.150336-1.5041 1.002733 12.032801 6.0164 157.42914 0.501367 157.930507s-44.621635 4.010934-44.621635 4.010934c-1.002733-20.054668-11.531434-146.90044-11.030068-160.437341m75.706371-4.010933l4.010933 160.938707c10.5287 0 52.643502 2.506833 57.155803 2.005467-1.002733-61.668103 0-158.933241 0-158.933241-20.054668-3.509567-40.610702-4.5123-61.166736-4.010933m-64.676303 216.089043s94.758304-12.534167 126.845772 2.506833c7.019134 72.196803 6.0164 408.613852 7.019134 422.652119-21.558768 0-90.246004 1.002733-95.761038 2.005467-0.501367-26.071068-39.607968-410.619319-38.103868-427.164419m-220.099977-413.627519c54.648969 278.759879 96.262404 755.058234 97.766504 785.641602 0 0 43.117535 1.002733 91.750105 4.010934-28.577901-300.318647-63.67357-780.126569-63.172203-796.170303-12.032801-13.035534-126.344406 6.517767-126.344406 6.517767m-120.328005 659.297196c-10.5287-78.213204-290.291313-166.955108-447.720454-138.377206 0 0-19.553301-172.470141-27.073801-339.425248-6.517767-143.390873-1.002733-282.770813 0.501366-305.833681C174.475608-6.308547 61.166736 47.337689 0 69.89919c0 0 73.199537 309.844614 126.344406 952.59671 0 0 84.730971 9.0246 230.12731-19.051934s317.365114-115.815705 302.825481-219.097244m-341.932083 140.88404l-24.566967-176.982441c6.0164-3.0082 156.927774 53.144869 172.971507 63.172203-2.506833 11.030067-148.40454 113.810238-148.40454 113.810238"
+                  p-id="2664"
+                />
+              </svg>
+            </a>
+          </Transition>
 
-        <Transition name="slide-in">
-          <ChannelsPop
-            v-if="showChannelsPop"
-            class="bew-popover"
-            pos="!left-0 !top-70px"
-            transform="!translate-x-0"
-          />
-        </Transition>
+          <Transition name="slide-in">
+            <ChannelsPop
+              v-if="showChannelsPop"
+              class="bew-popover"
+              pos="!left-0 !top-70px"
+              transform="!translate-x-0"
+            />
+          </Transition>
+        </div>
       </div>
 
       <!-- search bar -->
       <div flex="~" w="full" justify="md:center <md:end" items-center>
         <Transition name="slide-out">
-          <SearchBar v-if="props.showSearchBar" />
+          <SearchBar
+            v-if="props.showSearchBar"
+            style="
+              --b-search-bar-color: var(--bew-elevated-1);
+              --b-search-bar-hover: var(--bew-elevated-1-hover);
+            "
+          />
         </Transition>
       </div>
 
@@ -536,31 +532,17 @@ async function getTopbarNewMomentsCount() {
     after:transform after:-translate-x-1/2;
 }
 
-.left-side {
-  --at-apply: relative ;
-  .logo {
-    --at-apply: flex items-center;
+.logo.activated {
+  --at-apply: bg-$bew-theme-color dark:bg-white;
 
-    &.hover {
-      svg:nth-child(2) {
-        --at-apply: transform rotate-180;
-      }
-    }
-
-    svg {
-      --at-apply: w-60px h-auto filter;
-      filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
-
-      &:nth-child(2) {
-        --at-apply: duration-300;
-      }
-    }
+  svg {
+    --at-apply: fill-white dark:fill-$bew-theme-color;
   }
 }
 
 .right-side {
   --at-apply: flex h-55px items-center rounded-full p-2 backdrop-glass
-    bg-$bew-content-1 text-$bew-text-1 border-1 border-$bew-border-color
+    bg-$bew-elevated-1 text-$bew-text-1 border-1 border-$bew-border-color
     box-border;
   box-shadow: var(--bew-shadow-2);