diff --git a/src/components/Settings/Settings.vue b/src/components/Settings/Settings.vue
index 6c7022f6..82a6c4fe 100644
--- a/src/components/Settings/Settings.vue
+++ b/src/components/Settings/Settings.vue
@@ -100,7 +100,7 @@ function setCurrentTitle() {
 <template>
   <div class="fixed w-full h-full top-0 left-0" z="9998">
     <div
-      class="fixed w-full h-full top-0 left-0" opacity-60 :style="{ backgroundColor: isHomePage ? '' : 'var(--bew-bg)' }"
+      class="fixed w-full h-full top-0 left-0" opacity-60 :style="{ backgroundColor: 'rgba(0, 0, 0, 0.6)' }"
       @click="handleClose"
     />
 
diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue
index 82ca9c4e..7647d01d 100644
--- a/src/contentScripts/views/App.vue
+++ b/src/contentScripts/views/App.vue
@@ -271,13 +271,13 @@ provide('activatedPage', activatedPage)
     :style="{ opacity: 1, height: isHomePage ? '100vh' : '0' }"
   >
     <!-- Dock & RightSideButtons -->
-    <div :style="{ opacity: showSettings ? 0.4 : 1 }">
+    <div>
       <Dock v-if="isHomePage" :activated-page="activatedPage" @change-page="pageName => changeActivatePage(pageName)" @settings-visibility-change="toggleSettings" />
       <RightSideButtons v-else @settings-visibility-change="toggleSettings" />
     </div>
 
     <!-- Topbar -->
-    <div m-auto max-w="$bew-page-max-width" :style="{ opacity: showSettings ? 0.4 : 1 }">
+    <div m-auto max-w="$bew-page-max-width">
       <Transition name="topbar">
         <Topbar
           v-if="settings.isShowTopbar && !isHomePage"
@@ -302,7 +302,7 @@ provide('activatedPage', activatedPage)
     </KeepAlive>
 
     <OverlayScrollbarsComponent ref="scrollbarRef" element="div" h-inherit defer @os-scroll="handleOsScroll">
-      <div m-auto max-w="$bew-page-max-width" :style="{ opacity: showSettings ? 0.4 : 1 }">
+      <div m-auto max-w="$bew-page-max-width">
         <div flex="~" max-w="$bew-page-max-width">
           <main
             v-if="isHomePage"