diff --git a/src/components/BackToTopAndRefreshButtons.vue b/src/components/BackToTopAndRefreshButtons.vue
index 91c3bed9..74d590de 100644
--- a/src/components/BackToTopAndRefreshButtons.vue
+++ b/src/components/BackToTopAndRefreshButtons.vue
@@ -19,7 +19,7 @@ const emit = defineEmits(['refresh', 'back-to-top'])
         --b-button-shadow: var(--bew-shadow-1);
         --b-button-shadow-hover: var(--bew-shadow-2);
         --b-button-shadow-active: var(--bew-shadow-1);
-        backdrop-filter: var(--bew-filter-glass);
+        backdrop-filter: var(--bew-filter-glass-1);
       "
       @click="showRefreshButton ? emit('refresh') : emit('back-to-top')"
     >
diff --git a/src/components/Dock/Dock.vue b/src/components/Dock/Dock.vue
index 28df5073..b89d463b 100644
--- a/src/components/Dock/Dock.vue
+++ b/src/components/Dock/Dock.vue
@@ -179,7 +179,7 @@ function toggleDockHide(hide: boolean) {
         bottom: settings.dockPosition === 'bottom',
         hide: hideDock,
       }"
-      style="backdrop-filter: var(--bew-filter-glass);"
+      style="backdrop-filter: var(--bew-filter-glass-1);"
       absolute duration-300 ease-in-out
       p-2 m-2 bg="$bew-content-1" flex="~ col gap-2 shrink-0"
       rounded="$bew-radius" border="1px $bew-border-color"
diff --git a/src/components/RightSideButtons/RightSideButtons.vue b/src/components/RightSideButtons/RightSideButtons.vue
index a71c1f93..08e354bf 100644
--- a/src/components/RightSideButtons/RightSideButtons.vue
+++ b/src/components/RightSideButtons/RightSideButtons.vue
@@ -103,7 +103,7 @@ function toggleDark(e: MouseEvent) {
       <Tooltip :content="currentAppColorScheme === 'dark' ? $t('dock.dark_mode') : $t('dock.light_mode')" placement="left">
         <Button
           class="ctrl-btn"
-          style="backdrop-filter: var(--bew-filter-glass);"
+          style="backdrop-filter: var(--bew-filter-glass-1);"
           center size="small" round
           @click="toggleDark"
           @mouseenter="hoveringDockItem.themeMode = true"
@@ -126,7 +126,7 @@ function toggleDark(e: MouseEvent) {
       <Tooltip :content="$t('dock.settings')" placement="left">
         <Button
           class="ctrl-btn"
-          style="backdrop-filter: var(--bew-filter-glass);"
+          style="backdrop-filter: var(--bew-filter-glass-1);"
           center size="small" round
           @click="emit('settings-visibility-change')"
         >
diff --git a/src/components/SearchBar/SearchBar.vue b/src/components/SearchBar/SearchBar.vue
index d7c3d1d4..226a6141 100644
--- a/src/components/SearchBar/SearchBar.vue
+++ b/src/components/SearchBar/SearchBar.vue
@@ -333,7 +333,7 @@ async function handleClearSearchHistory() {
   @mixin card-content {
     --at-apply: text-base outline-none w-full
       bg-$b-search-bar-color shadow-$bew-shadow-2;
-    backdrop-filter: var(--bew-filter-glass);
+    backdrop-filter: var(--bew-filter-glass-1);
   }
 
   .search-bar {
diff --git a/src/components/Select.vue b/src/components/Select.vue
index c71d1f81..6b20a325 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -86,7 +86,7 @@ function onMouseEnter() {
     <transition>
       <div
         v-if="showOptions"
-        style="backdrop-filter: var(--bew-filter-glass)"
+        style="backdrop-filter: var(--bew-filter-glass-1)"
         pos="absolute" bg="$bew-elevated-2" shadow="$bew-shadow-2" p="2"
         m="t-2"
         rounded="$bew-radius" z="1" flex="~ col gap-1"
diff --git a/src/components/Settings/Settings.vue b/src/components/Settings/Settings.vue
index 0781df59..147279fe 100644
--- a/src/components/Settings/Settings.vue
+++ b/src/components/Settings/Settings.vue
@@ -124,7 +124,7 @@ function setCurrentTitle() {
         shrink-0 p="x-4" pos="absolute left--84px" z-2
       >
         <ul
-          style="backdrop-filter: var(--bew-filter-glass)"
+          style="backdrop-filter: var(--bew-filter-glass-2)"
           flex="~ gap-2 col" rounded="30px hover:25px" bg="$bew-elevated-1 hover:$bew-elevated-2" p-2 shadow="$bew-shadow-3"
           scale="group-hover:105" duration-300 overflow-hidden antialiased
           border="1 $bew-border-color"
@@ -181,7 +181,7 @@ function setCurrentTitle() {
               {{ title }}
             </div>
             <div
-              style="backdrop-filter: var(--bew-filter-glass)"
+              style="backdrop-filter: var(--bew-filter-glass-1)"
               text-2xl leading-0 bg="$bew-fill-1 hover:$bew-theme-color-30" w="32px" h="32px"
               p="1" rounded-8 cursor="pointer"
               hover:ring="2 $bew-theme-color" hover:text="$bew-theme-color" duration-300
diff --git a/src/components/Settings/components/ChildSettingsDialog.vue b/src/components/Settings/components/ChildSettingsDialog.vue
index ae70bc8c..9b4500de 100644
--- a/src/components/Settings/components/ChildSettingsDialog.vue
+++ b/src/components/Settings/components/ChildSettingsDialog.vue
@@ -52,7 +52,7 @@ function handleClose() {
         </div>
 
         <div
-          style="backdrop-filter: var(--bew-filter-glass)"
+          style="backdrop-filter: var(--bew-filter-glass-1)"
           text-2xl leading-0 bg="$bew-fill-1 hover:$bew-theme-color-30" w="32px" h="32px"
           ml-auto p="1" rounded-8 cursor="pointer"
           hover:ring="2 $bew-theme-color" hover:text="$bew-theme-color" duration-300
diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index 486f63ee..45c8dc15 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -307,7 +307,7 @@ defineExpose({
               v-if="showLogo"
               ref="logo" href="//www.bilibili.com"
               class="group logo"
-              style="backdrop-filter: var(--bew-filter-glass)"
+              style="backdrop-filter: var(--bew-filter-glass-1)"
               flex items-center 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"
@@ -362,7 +362,7 @@ defineExpose({
         flex="inline xl:1 justify-center items-center"
       >
         <div
-          style="backdrop-filter: var(--bew-filter-glass)"
+          style="backdrop-filter: var(--bew-filter-glass-1)"
           ml-auto flex h-55px p-2 bg="$bew-elevated-1"
           text="$bew-text-1" border="1 $bew-border-color" rounded-full shadow="$bew-shadow-2"
         >
diff --git a/src/components/TopBar/components/ChannelsPop.vue b/src/components/TopBar/components/ChannelsPop.vue
index e5ee5bd8..bd48dbb4 100644
--- a/src/components/TopBar/components/ChannelsPop.vue
+++ b/src/components/TopBar/components/ChannelsPop.vue
@@ -44,7 +44,7 @@ const genres = [
 
 <template>
   <div
-    style="backdrop-filter: var(--bew-filter-glass);"
+    style="backdrop-filter: var(--bew-filter-glass-1);"
     shadow="$bew-shadow-3"
     flex="~"
     p="4"
diff --git a/src/components/TopBar/components/FavoritesPop.vue b/src/components/TopBar/components/FavoritesPop.vue
index 1d0e1c47..df1f582b 100644
--- a/src/components/TopBar/components/FavoritesPop.vue
+++ b/src/components/TopBar/components/FavoritesPop.vue
@@ -134,7 +134,7 @@ defineExpose({
   >
     <!-- top bar -->
     <header
-      style="backdrop-filter: var(--bew-filter-glass)"
+      style="backdrop-filter: var(--bew-filter-glass-1)"
       flex="~" items-center justify-between
       p="x-6"
       pos="fixed top-0 left-0"
diff --git a/src/components/TopBar/components/HistoryPop.vue b/src/components/TopBar/components/HistoryPop.vue
index 2d64c12e..61509957 100644
--- a/src/components/TopBar/components/HistoryPop.vue
+++ b/src/components/TopBar/components/HistoryPop.vue
@@ -175,7 +175,7 @@ function getHistoryList(type: HistoryType, viewAt = 0 as number) {
   >
     <!-- top bar -->
     <header
-      style="backdrop-filter: var(--bew-filter-glass);"
+      style="backdrop-filter: var(--bew-filter-glass-1);"
       flex="~"
       justify="between"
       p="y-4 x-6"
diff --git a/src/components/TopBar/components/MomentsPop.vue b/src/components/TopBar/components/MomentsPop.vue
index e46a76c4..3e1aa0f2 100644
--- a/src/components/TopBar/components/MomentsPop.vue
+++ b/src/components/TopBar/components/MomentsPop.vue
@@ -283,7 +283,7 @@ function toggleWatchLater(aid: number) {
   >
     <!-- top bar -->
     <header
-      style="backdrop-filter: var(--bew-filter-glass)"
+      style="backdrop-filter: var(--bew-filter-glass-1)"
       flex="~"
       justify="between"
       items-center
diff --git a/src/components/TopBar/components/WatchLaterPop.vue b/src/components/TopBar/components/WatchLaterPop.vue
index 5a338bec..fa80cafc 100644
--- a/src/components/TopBar/components/WatchLaterPop.vue
+++ b/src/components/TopBar/components/WatchLaterPop.vue
@@ -50,7 +50,7 @@ function getAllWatchLaterList() {
   >
     <!-- top bar -->
     <header
-      style="backdrop-filter: var(--bew-filter-glass);"
+      style="backdrop-filter: var(--bew-filter-glass-1);"
       flex="~"
       justify="between"
       p="y-4 x-6"
diff --git a/src/components/VideoCard/VideoCard.vue b/src/components/VideoCard/VideoCard.vue
index 7c92ff11..480bb2e6 100644
--- a/src/components/VideoCard/VideoCard.vue
+++ b/src/components/VideoCard/VideoCard.vue
@@ -379,7 +379,7 @@ function handelMouseLeave() {
                   rounded="$bew-radius"
                   style="
                     box-shadow: var(--bew-shadow-2);
-                    backdrop-filter: var(--bew-filter-glass);
+                    backdrop-filter: var(--bew-filter-glass-1);
                   "
                 >
                   <p p="2" text="$bew-text-3">
diff --git a/src/contentScripts/views/Home/Home.vue b/src/contentScripts/views/Home/Home.vue
index 5171c902..ee9df8e6 100644
--- a/src/contentScripts/views/Home/Home.vue
+++ b/src/contentScripts/views/Home/Home.vue
@@ -179,7 +179,7 @@ function toggleTabContentLoading(loading: boolean) {
           <li
             v-for="tab in currentTabs" :key="tab.page"
             :class="{ 'tab-activated': activatedPage === tab.page }"
-            style="backdrop-filter: var(--bew-filter-glass)"
+            style="backdrop-filter: var(--bew-filter-glass-1)"
             px-4 lh-35px bg="$bew-elevated-1 hover:$bew-elevated-1-hover" rounded="$bew-radius"
             cursor-pointer shadow="$bew-shadow-1" box-border border="1 $bew-border-color" duration-300
             flex="~ gap-2 items-center"
diff --git a/src/styles/adaptedStyles/homePage.scss b/src/styles/adaptedStyles/homePage.scss
index f9cc4a0e..9ba604a7 100644
--- a/src/styles/adaptedStyles/homePage.scss
+++ b/src/styles/adaptedStyles/homePage.scss
@@ -12,7 +12,7 @@
 
   // .header-channel-fixed {
   //   background-color: var(--bew-elevated-2);
-  //   backdrop-filter: var(--bew-filter-glass);
+  //   backdrop-filter: var(--bew-filter-glass-1);
   //   border-radius: var(--bew-radius);
   //   box-shadow: var(--bew-shadow-2);
   // }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 41414796..0ca18633 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -3,7 +3,8 @@
   --bew-radius: 12px;
   --bew-radius-half: calc(var(--bew-radius) / 2);
 
-  --bew-filter-glass: blur(20px) saturate(180%);
+  --bew-filter-glass-1: blur(20px) saturate(180%);
+  --bew-filter-glass-2: blur(40px) saturate(180%);
   --bew-filter-icon-glow: saturate(0) brightness(2)
     drop-shadow(0 0 0.2px white)
     drop-shadow(0 0 0.5px var(--bew-theme-color))