diff --git a/src/App/styles.less b/src/App/styles.less
index 044c6e678..f4454424c 100644
--- a/src/App/styles.less
+++ b/src/App/styles.less
@@ -28,13 +28,13 @@
     --color-placeholder-background: @color-surface-dark5-20;
     --primary-background-color: rgba(12, 11, 17, 1);
     --secondary-background-color: rgba(26, 23, 62, 1);
-    --tertiary-background-color: rgba(15, 13, 32, 1);
     --primary-foreground-color: rgba(255, 255, 255, 0.9);
     --secondary-foreground-color: rgb(12, 11, 17, 1);
-    --primary-overlay-color: rgba(255, 255, 255, 0.05);
     --primary-accent-color: rgb(123, 91, 245);
     --secondary-accent-color: rgba(34, 179, 101, 1);
     --tertiary-accent-color: rgba(246, 199, 0, 1);
+    --overlay-color: rgba(255, 255, 255, 0.05);
+    --modal-background-color: rgba(15, 13, 32, 1);
     --border-radius: 0.75rem;
 }
 
@@ -55,7 +55,7 @@
     overflow: hidden;
     word-break: break-word;
     scrollbar-width: thin;
-    scrollbar-color: var(--primary-overlay-color) transparent;
+    scrollbar-color: var(--overlay-color) transparent;
 }
 
 ::-webkit-scrollbar {
@@ -65,7 +65,7 @@
 
 ::-webkit-scrollbar-thumb {
     border-radius: var(--scroll-bar-size);
-    background-color: var(--primary-overlay-color);
+    background-color: var(--overlay-color);
 
     &:hover {
         background-color: var(--primary-accent-color);
diff --git a/src/common/Checkbox/styles.less b/src/common/Checkbox/styles.less
index 3aa0802cd..d8224db53 100644
--- a/src/common/Checkbox/styles.less
+++ b/src/common/Checkbox/styles.less
@@ -16,7 +16,7 @@
         width: @width;
         height: @height;
         border-radius: @height;
-        background-color: var(--primary-overlay-color);
+        background-color: var(--overlay-color);
         transition: background-color 0.1s ease-in-out;
 
         &::before {
diff --git a/src/common/MetaItem/styles.less b/src/common/MetaItem/styles.less
index 439fb0bc4..52beef88e 100644
--- a/src/common/MetaItem/styles.less
+++ b/src/common/MetaItem/styles.less
@@ -59,7 +59,7 @@
     .poster-container {
         position: relative;
         z-index: 0;
-        background-color: var(--primary-overlay-color);
+        background-color: var(--overlay-color);
         border-radius: var(--border-radius);
         transition: all 0.1s ease-out;
 
@@ -126,7 +126,7 @@
             right: 1rem;
             height: 0.45rem;
             border-radius: 0.45rem;
-            background-color: var(--primary-overlay-color);
+            background-color: var(--overlay-color);
             overflow: hidden;
 
             .progress-bar {
@@ -227,7 +227,7 @@
 
                         &:hover, &:focus {
                             outline: none;
-                            background-color: var(--primary-overlay-color);
+                            background-color: var(--overlay-color);
                         }
 
                         .multiselect-option-label {
diff --git a/src/common/MetaPreview/ActionButton/styles.less b/src/common/MetaPreview/ActionButton/styles.less
index ae3a70591..e9d57e6bd 100644
--- a/src/common/MetaPreview/ActionButton/styles.less
+++ b/src/common/MetaPreview/ActionButton/styles.less
@@ -10,7 +10,7 @@
     align-items: center;
     gap: 1rem;
     border-radius: 100%;
-    background-color: var(--primary-overlay-color);
+    background-color: var(--overlay-color);
     backdrop-filter: blur(5px);
     transition: all 0.1s ease-out;
 
diff --git a/src/common/MetaPreview/MetaLinks/styles.less b/src/common/MetaPreview/MetaLinks/styles.less
index 4d93fc849..a722253ed 100644
--- a/src/common/MetaPreview/MetaLinks/styles.less
+++ b/src/common/MetaPreview/MetaLinks/styles.less
@@ -31,7 +31,7 @@
             font-size: 1rem;
             font-weight: 500;
             color: var(--primary-foreground-color);
-            background-color: var(--primary-overlay-color);
+            background-color: var(--overlay-color);
             backdrop-filter: blur(5px);
 
             &:hover, &:focus {
diff --git a/src/common/MetaPreview/styles.less b/src/common/MetaPreview/styles.less
index dddf57a86..083c50995 100644
--- a/src/common/MetaPreview/styles.less
+++ b/src/common/MetaPreview/styles.less
@@ -46,18 +46,6 @@
         left: -10px;
         z-index: -1;
 
-        &::after {
-            position: absolute;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            left: 0;
-            z-index: 1;
-            background: var(--tertiary-background-color);
-            opacity: 0.8;
-            content: "";
-        }
-
         .background-image {
             display: block;
             width: 100%;
@@ -65,6 +53,7 @@
             object-fit: cover;
             object-position: center;
             filter: blur(10px);
+            opacity: 0.3;
         }
     }
 
diff --git a/src/common/MetaRow/styles.less b/src/common/MetaRow/styles.less
index 86d845525..863601be8 100644
--- a/src/common/MetaRow/styles.less
+++ b/src/common/MetaRow/styles.less
@@ -35,7 +35,7 @@
 
             &:hover, &:focus {
                 outline: none;
-                background-color: var(--primary-overlay-color);
+                background-color: var(--overlay-color);
                 opacity: 1;
             }
 
diff --git a/src/common/ModalDialog/styles.less b/src/common/ModalDialog/styles.less
index a06bbfa32..7a9dd621f 100644
--- a/src/common/ModalDialog/styles.less
+++ b/src/common/ModalDialog/styles.less
@@ -18,7 +18,7 @@
         max-height: 80%;
         padding: 0 2rem;
         border-radius: var(--border-radius);
-        background-color: var(--tertiary-background-color);
+        background-color: var(--modal-background-color);
 
         .close-button-container {
             position: absolute;
@@ -33,7 +33,7 @@
                 display: block;
                 width: 100%;
                 height: 100%;
-                color: var(--primary-overlay-color);
+                color: var(--overlay-color);
             }
 
             &:hover, &:focus {
diff --git a/src/common/Multiselect/styles.less b/src/common/Multiselect/styles.less
index db7771898..31b44182a 100644
--- a/src/common/Multiselect/styles.less
+++ b/src/common/Multiselect/styles.less
@@ -14,7 +14,7 @@
     height: 2.75rem;
     padding: 0 1.5rem;
     border-radius: 2.75rem;
-    background-color: var(--primary-overlay-color);
+    background-color: var(--overlay-color);
 
     &:global(.active) {
         .icon {
@@ -58,7 +58,7 @@
             }
 
             &:hover, &:focus {
-                background-color: var(--primary-overlay-color);
+                background-color: var(--overlay-color);
             }
 
             .label {
diff --git a/src/common/NavBar/HorizontalNavBar/NavMenu/styles.less b/src/common/NavBar/HorizontalNavBar/NavMenu/styles.less
index b216db1d6..8b58f3796 100644
--- a/src/common/NavBar/HorizontalNavBar/NavMenu/styles.less
+++ b/src/common/NavBar/HorizontalNavBar/NavMenu/styles.less
@@ -8,7 +8,7 @@
     max-height: calc(100vh - var(--horizontal-nav-bar-size));
     overflow-y: auto;
     border-radius: var(--border-radius);
-    background-color: var(--tertiary-background-color);
+    background-color: var(--modal-background-color);
 
     .user-info-container {
         display: flex;
@@ -67,7 +67,7 @@
     }
 
     .nav-menu-section {
-        border-top: thin solid var(--primary-overlay-color);
+        border-top: thin solid var(--overlay-color);
 
         .nav-menu-option-container {
             display: flex;
@@ -77,7 +77,7 @@
             padding: 0 1.5rem;
 
             &:hover {
-                background-color: var(--primary-overlay-color);
+                background-color: var(--overlay-color);
             }
 
             .icon {
diff --git a/src/common/NavBar/HorizontalNavBar/SearchBar/styles.less b/src/common/NavBar/HorizontalNavBar/SearchBar/styles.less
index 74c2110c5..094e6de03 100644
--- a/src/common/NavBar/HorizontalNavBar/SearchBar/styles.less
+++ b/src/common/NavBar/HorizontalNavBar/SearchBar/styles.less
@@ -8,7 +8,7 @@
     flex-direction: row;
     height: var(--search-bar-size);
     border-radius: var(--search-bar-size);
-    background-color: var(--primary-overlay-color);
+    background-color: var(--overlay-color);
 
     .search-input {
         flex: 1;
diff --git a/src/common/NavBar/HorizontalNavBar/styles.less b/src/common/NavBar/HorizontalNavBar/styles.less
index 99844d3a9..2be5ccf35 100644
--- a/src/common/NavBar/HorizontalNavBar/styles.less
+++ b/src/common/NavBar/HorizontalNavBar/styles.less
@@ -78,7 +78,7 @@
         }
 
         &:hover, &:global(.active) {
-            background-color: var(--primary-overlay-color);
+            background-color: var(--overlay-color);
             opacity: 1;
 
             .icon {
diff --git a/src/common/NavBar/VerticalNavBar/NavTabButton/styles.less b/src/common/NavBar/VerticalNavBar/NavTabButton/styles.less
index 490468457..95ed91c35 100644
--- a/src/common/NavBar/VerticalNavBar/NavTabButton/styles.less
+++ b/src/common/NavBar/VerticalNavBar/NavTabButton/styles.less
@@ -12,7 +12,7 @@
     border-radius: 0.75rem;
 
     &:hover {
-        background-color: var(--primary-overlay-color);
+        background-color: var(--overlay-color);
 
         .label {
             opacity: 0.6;
diff --git a/src/common/PaginationInput/styles.less b/src/common/PaginationInput/styles.less
index 7f6572d5e..ecf6c56a4 100644
--- a/src/common/PaginationInput/styles.less
+++ b/src/common/PaginationInput/styles.less
@@ -12,7 +12,7 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        background-color: var(--primary-overlay-color);
+        background-color: var(--overlay-color);
 
         .icon {
             display: block;
@@ -26,7 +26,7 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        background-color: var(--primary-overlay-color);
+        background-color: var(--overlay-color);
 
         .label {
             flex: none;
diff --git a/src/common/Popup/styles.less b/src/common/Popup/styles.less
index e75a077ef..e81de9033 100644
--- a/src/common/Popup/styles.less
+++ b/src/common/Popup/styles.less
@@ -16,7 +16,7 @@
         overflow: hidden;
         visibility: hidden;
         border-radius: var(--border-radius);
-        background-color: var(--tertiary-background-color);
+        background-color: var(--modal-background-color);
         box-shadow: 0 1.35rem 2.7rem @color-background-dark5-40,
             0 1.1rem 0.85rem @color-background-dark5-20;
         cursor: auto;
diff --git a/src/common/SearchBar/styles.less b/src/common/SearchBar/styles.less
index 779b3286a..265655970 100644
--- a/src/common/SearchBar/styles.less
+++ b/src/common/SearchBar/styles.less
@@ -10,7 +10,7 @@
     padding: 0 1.5rem;
     border-radius: 3rem;
     border: var(--focus-outline-size) solid transparent;
-    background-color: var(--primary-overlay-color);
+    background-color: var(--overlay-color);
     cursor: text;
 
     &:focus-within {
diff --git a/src/common/SharePrompt/styles.less b/src/common/SharePrompt/styles.less
index 9120088ca..c9953be50 100644
--- a/src/common/SharePrompt/styles.less
+++ b/src/common/SharePrompt/styles.less
@@ -60,7 +60,7 @@
         flex-direction: row;
         margin-top: 1rem;
         border-radius: var(--border-radius);
-        background-color: var(--primary-overlay-color);
+        background-color: var(--overlay-color);
 
         .url-text-input {
             flex: 1;
diff --git a/src/common/Slider/styles.less b/src/common/Slider/styles.less
index 9ae5be739..858543931 100644
--- a/src/common/Slider/styles.less
+++ b/src/common/Slider/styles.less
@@ -39,7 +39,7 @@ html.active-slider-within {
         flex: 1;
         height: var(--track-size);
         border-radius: var(--track-size);
-        background-color: var(--primary-overlay-color);
+        background-color: var(--overlay-color);
     }
 
     .track-before {
@@ -47,7 +47,7 @@ html.active-slider-within {
         flex: none;
         height: var(--track-size);
         border-radius: var(--track-size);
-        background-color: var(--primary-overlay-color);
+        background-color: var(--overlay-color);
     }
 
     .track-after {
diff --git a/src/routes/Addons/Addon/styles.less b/src/routes/Addons/Addon/styles.less
index 382212730..998baf53d 100644
--- a/src/routes/Addons/Addon/styles.less
+++ b/src/routes/Addons/Addon/styles.less
@@ -9,7 +9,7 @@
     align-items: flex-start;
     padding: 1.5rem;
     border-radius: var(--border-radius);
-    background-color: var(--primary-overlay-color);
+    background-color: var(--overlay-color);
     cursor: inherit;
 
     .logo-container {
diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less
index 80b30ba76..2f485c221 100644
--- a/src/routes/Addons/styles.less
+++ b/src/routes/Addons/styles.less
@@ -112,7 +112,7 @@
                 width: 3rem;
                 height: 3rem;
                 border-radius: var(--border-radius);
-                background-color: var(--primary-overlay-color);
+                background-color: var(--overlay-color);
 
                 .filter-icon {
                     flex: none;
@@ -179,8 +179,8 @@
             padding: 1rem;
             color: var(--primary-foreground-color);
             border-radius: var(--border-radius);
-            background-color: var(--primary-overlay-color);
-            outline: var(--focus-outline-size) solid var(--primary-overlay-color);
+            background-color: var(--overlay-color);
+            outline: var(--focus-outline-size) solid var(--overlay-color);
             outline-offset: calc(-1 * var(--focus-outline-size));
 
             &:hover {
diff --git a/src/routes/Discover/styles.less b/src/routes/Discover/styles.less
index 0604f3eaf..e0b6706d3 100644
--- a/src/routes/Discover/styles.less
+++ b/src/routes/Discover/styles.less
@@ -77,7 +77,7 @@
                     width: 3rem;
                     height: 3rem;
                     border-radius: var(--border-radius);
-                    background-color: var(--primary-overlay-color);
+                    background-color: var(--overlay-color);
 
                     .filter-icon {
                         flex: none;
@@ -207,7 +207,7 @@
             width: 29rem;
             padding: 2rem 2.5rem;
             border-radius: var(--border-radius) 0 0 var(--border-radius);
-            background-color: var(--tertiary-background-color);
+            background-color: var(--modal-background-color);
         }
     }
 }
diff --git a/src/routes/Intro/ConsentCheckbox/styles.less b/src/routes/Intro/ConsentCheckbox/styles.less
index fbd087de0..2bf136924 100644
--- a/src/routes/Intro/ConsentCheckbox/styles.less
+++ b/src/routes/Intro/ConsentCheckbox/styles.less
@@ -15,7 +15,7 @@
 
     &:focus {
         outline: none;
-        background-color: var(--primary-overlay-color);
+        background-color: var(--overlay-color);
     }
 
     &:global(.checked) {
diff --git a/src/routes/Intro/PasswordResetModal/styles.less b/src/routes/Intro/PasswordResetModal/styles.less
index dce5ded6b..9a84b79c0 100644
--- a/src/routes/Intro/PasswordResetModal/styles.less
+++ b/src/routes/Intro/PasswordResetModal/styles.less
@@ -18,10 +18,10 @@
             border-radius: var(--border-radius);
             outline-offset: calc(-1 * var(--focus-outline-size));
             color: var(--primary-foreground-color);
-            background: var(--primary-overlay-color);
+            background: var(--overlay-color);
             
             &:hover, &:focus {
-                outline: var(--focus-outline-size) solid var(--primary-overlay-color);
+                outline: var(--focus-outline-size) solid var(--overlay-color);
             }
         }
     }
diff --git a/src/routes/Intro/styles.less b/src/routes/Intro/styles.less
index b32919148..1b1200a7c 100644
--- a/src/routes/Intro/styles.less
+++ b/src/routes/Intro/styles.less
@@ -135,10 +135,10 @@
                 border-radius: var(--border-radius);
                 outline-offset: calc(-1 * var(--focus-outline-size));
                 color: var(--primary-foreground-color);
-                background: var(--primary-overlay-color);
+                background: var(--overlay-color);
 
                 &:hover, &:focus {
-                    outline: var(--focus-outline-size) solid var(--primary-overlay-color);
+                    outline: var(--focus-outline-size) solid var(--overlay-color);
                 }
             }
 
@@ -202,7 +202,7 @@
         justify-content: center;
         padding: 2rem;
         border-radius: var(--border-radius);
-        background-color: var(--tertiary-background-color);
+        background-color: var(--modal-background-color);
 
         @keyframes flash {
             0% {
diff --git a/src/routes/Library/styles.less b/src/routes/Library/styles.less
index 3e0f2c8a9..4f18711ca 100644
--- a/src/routes/Library/styles.less
+++ b/src/routes/Library/styles.less
@@ -62,7 +62,7 @@
                 width: 3rem;
                 height: 3rem;
                 border-radius: var(--border-radius);
-                background-color: var(--primary-overlay-color);
+                background-color: var(--overlay-color);
 
                 .filter-icon {
                     flex: none;
@@ -86,12 +86,12 @@
 
                     .pagination-prev-button-container, .pagination-next-button-container {
                         .pagination-button-icon {
-                            color: var(--primary-overlay-color);
+                            color: var(--overlay-color);
                         }
                     }
 
                     .pagination-label {
-                        color: var(--primary-overlay-color);
+                        color: var(--overlay-color);
                     }
                 }
 
diff --git a/src/routes/MetaDetails/StreamsList/Stream/styles.less b/src/routes/MetaDetails/StreamsList/Stream/styles.less
index 396083b2b..9d1ee2176 100644
--- a/src/routes/MetaDetails/StreamsList/Stream/styles.less
+++ b/src/routes/MetaDetails/StreamsList/Stream/styles.less
@@ -18,7 +18,7 @@
     border-radius: var(--border-radius);
 
     &:hover, &:focus {
-        background-color: var(--primary-overlay-color);
+        background-color: var(--overlay-color);
     }
 
     &:hover, &:focus, &:global(.selected) {
@@ -53,7 +53,7 @@
             width: 8rem;
             padding: 1rem;
             color: var(--primary-foreground-color);
-            background-color: var(--primary-overlay-color);
+            background-color: var(--overlay-color);
             opacity: 0.25;
         }
 
diff --git a/src/routes/MetaDetails/StreamsList/styles.less b/src/routes/MetaDetails/StreamsList/styles.less
index 41b090070..00f5ec11b 100644
--- a/src/routes/MetaDetails/StreamsList/styles.less
+++ b/src/routes/MetaDetails/StreamsList/styles.less
@@ -47,7 +47,7 @@
         background: none;
 
         &:hover, &:focus, &:global(.active) {
-            background-color: var(--primary-overlay-color);
+            background-color: var(--overlay-color);
         }
 
         & >.multiselect-label {
diff --git a/src/routes/MetaDetails/VideosList/SeasonsBar/styles.less b/src/routes/MetaDetails/VideosList/SeasonsBar/styles.less
index b80fba840..7e58c7ec8 100644
--- a/src/routes/MetaDetails/VideosList/SeasonsBar/styles.less
+++ b/src/routes/MetaDetails/VideosList/SeasonsBar/styles.less
@@ -28,7 +28,7 @@
         padding: 0.5rem;
 
         &:hover, &:focus {
-            background-color: var(--primary-overlay-color);
+            background-color: var(--overlay-color);
         }
 
         &:focus {
@@ -60,7 +60,7 @@
         background: none;
 
         &:hover, &:focus, &:global(.active) {
-            background-color: var(--primary-overlay-color);
+            background-color: var(--overlay-color);
         }
 
         &>.multiselect-label {
diff --git a/src/routes/MetaDetails/VideosList/Video/styles.less b/src/routes/MetaDetails/VideosList/Video/styles.less
index eed6c0f60..f8824fcda 100644
--- a/src/routes/MetaDetails/VideosList/Video/styles.less
+++ b/src/routes/MetaDetails/VideosList/Video/styles.less
@@ -23,7 +23,7 @@
     &:hover,
     &:focus,
     &:global(.active) {
-        background-color: var(--primary-overlay-color);
+        background-color: var(--overlay-color);
     }
 
     .thumbnail-container {
@@ -40,7 +40,7 @@
             object-fit: cover;
             object-position: center;
             opacity: 0.9;
-            background-color: var(--primary-overlay-color);
+            background-color: var(--overlay-color);
         }
 
         .placeholder-icon {
@@ -49,7 +49,7 @@
             width: 8rem;
             padding: 1rem;
             color: var(--primary-foreground-color);
-            background-color: var(--primary-overlay-color);
+            background-color: var(--overlay-color);
             opacity: 0.25;
         }
     }
@@ -169,7 +169,7 @@
 
                 &:hover,
                 &:focus {
-                    background-color: var(--primary-overlay-color);
+                    background-color: var(--overlay-color);
                 }
 
                 .context-menu-option-label {
diff --git a/src/routes/MetaDetails/styles.less b/src/routes/MetaDetails/styles.less
index 49aab96e9..e609b4bb4 100644
--- a/src/routes/MetaDetails/styles.less
+++ b/src/routes/MetaDetails/styles.less
@@ -17,7 +17,6 @@
     flex-direction: column;
     width: 100%;
     height: 100%;
-    background-color: transparent;
 
     .nav-bar {
         z-index: 1;
@@ -45,18 +44,7 @@
             bottom: 0;
             left: 0;
             z-index: -1;
-
-            &::after {
-                position: absolute;
-                top: 0;
-                right: 0;
-                bottom: 0;
-                left: 0;
-                z-index: 1;
-                background: var(--tertiary-background-color);
-                opacity: 0.7;
-                content: "";
-            }
+            background-color: var(--modal-background-color);
 
             .background-image {
                 pointer-events: none; 
@@ -65,7 +53,7 @@
                 height: 100%;
                 object-fit: cover;
                 object-position: top left;
-                opacity: 0.9;
+                opacity: 0.3;
             }
         }
 
diff --git a/src/routes/Player/ControlBar/VolumeSlider/styles.less b/src/routes/Player/ControlBar/VolumeSlider/styles.less
index 9c1556159..98ec07142 100644
--- a/src/routes/Player/ControlBar/VolumeSlider/styles.less
+++ b/src/routes/Player/ControlBar/VolumeSlider/styles.less
@@ -9,7 +9,7 @@
 
 .volume-slider:not(:global(.disabled)) {
     .slider-track {
-        background-color: var(--primary-overlay-color);
+        background-color: var(--overlay-color);
     }
 
     .slider-track-after {
diff --git a/src/routes/Player/ControlBar/styles.less b/src/routes/Player/ControlBar/styles.less
index 938dc5bda..147a3f0a2 100644
--- a/src/routes/Player/ControlBar/styles.less
+++ b/src/routes/Player/ControlBar/styles.less
@@ -105,7 +105,7 @@
                 flex-direction: column;
                 padding: 0.5rem;
                 border-radius: var(--border-radius);
-                background-color: var(--tertiary-background-color);
+                background-color: var(--modal-background-color);
                 box-shadow: 0 1.35rem 2.7rem @color-background-dark5-40,
                     0 1.1rem 0.85rem @color-background-dark5-20;
 
diff --git a/src/routes/Player/NextVideoPopup/styles.less b/src/routes/Player/NextVideoPopup/styles.less
index 6c2ff745e..91709fed0 100644
--- a/src/routes/Player/NextVideoPopup/styles.less
+++ b/src/routes/Player/NextVideoPopup/styles.less
@@ -26,7 +26,7 @@
         display: flex;
         justify-content: center;
         align-items: center;
-        background-color: var(--primary-overlay-color);
+        background-color: var(--overlay-color);
 
         .poster-image {
             flex: none;
@@ -119,7 +119,7 @@
                 }
 
                 &:hover, &:focus {
-                    background-color: var(--primary-overlay-color);
+                    background-color: var(--overlay-color);
                 }
             }
         }
diff --git a/src/routes/Player/OptionsMenu/Option/styles.less b/src/routes/Player/OptionsMenu/Option/styles.less
index 7ae05b3ad..88193d0ac 100644
--- a/src/routes/Player/OptionsMenu/Option/styles.less
+++ b/src/routes/Player/OptionsMenu/Option/styles.less
@@ -31,7 +31,7 @@
     }
 
     &:hover {
-        background-color: var(--primary-overlay-color);
+        background-color: var(--overlay-color);
     }
 
     &:global(.disabled) {
diff --git a/src/routes/Player/SpeedMenu/Option/styles.less b/src/routes/Player/SpeedMenu/Option/styles.less
index 2b716d573..77b351909 100644
--- a/src/routes/Player/SpeedMenu/Option/styles.less
+++ b/src/routes/Player/SpeedMenu/Option/styles.less
@@ -11,7 +11,7 @@
     border-radius: var(--border-radius);
     
     &:global(.selected) {
-        background-color: var(--primary-overlay-color);
+        background-color: var(--overlay-color);
 
         .icon {
             display: block;
@@ -19,7 +19,7 @@
     }
 
     &:hover, &:focus {
-        background-color: var(--primary-overlay-color);
+        background-color: var(--overlay-color);
     }
 
     .label {
diff --git a/src/routes/Player/SubtitlesMenu/DiscreteSelectInput/styles.less b/src/routes/Player/SubtitlesMenu/DiscreteSelectInput/styles.less
index 986267eac..2ceb41f80 100644
--- a/src/routes/Player/SubtitlesMenu/DiscreteSelectInput/styles.less
+++ b/src/routes/Player/SubtitlesMenu/DiscreteSelectInput/styles.less
@@ -24,7 +24,7 @@
         flex-direction: row;
         align-items: center;
         border-radius: 3.5rem;
-        background: var(--primary-overlay-color);
+        background: var(--overlay-color);
 
         .button-container {
             flex: none;
@@ -32,7 +32,7 @@
             height: 3.5rem;
             padding: 1rem;
             border-radius: 100%;
-            background-color: var(--primary-overlay-color);
+            background-color: var(--overlay-color);
 
             .icon {
                 display: block;
diff --git a/src/routes/Player/SubtitlesMenu/styles.less b/src/routes/Player/SubtitlesMenu/styles.less
index c41410e06..3f397b068 100644
--- a/src/routes/Player/SubtitlesMenu/styles.less
+++ b/src/routes/Player/SubtitlesMenu/styles.less
@@ -37,7 +37,7 @@
                 border-radius: var(--border-radius);
 
                 &:global(.selected), &:hover {
-                    background-color: var(--primary-overlay-color);
+                    background-color: var(--overlay-color);
                 }
 
                 .language-label, .variant-label {
diff --git a/src/routes/Player/styles.less b/src/routes/Player/styles.less
index b650a64a0..01b6a05ae 100644
--- a/src/routes/Player/styles.less
+++ b/src/routes/Player/styles.less
@@ -154,7 +154,7 @@ html:not(.active-slider-within) {
             max-height: calc(100% - 13.5rem);
             max-width: calc(100% - 4rem);
             border-radius: var(--border-radius);
-            background-color: var(--tertiary-background-color);
+            background-color: var(--modal-background-color);
             box-shadow: 0 1.35rem 2.7rem @color-background-dark5-40,
                 0 1.1rem 0.85rem @color-background-dark5-20;
             backdrop-filter: blur(15px);
diff --git a/src/routes/Settings/styles.less b/src/routes/Settings/styles.less
index c9b53aa35..4db190708 100644
--- a/src/routes/Settings/styles.less
+++ b/src/routes/Settings/styles.less
@@ -53,12 +53,12 @@
                 &.selected {
                     font-weight: 600;
                     color: var(--primary-foreground-color);
-                    background-color: var(--primary-overlay-color);
+                    background-color: var(--overlay-color);
                     opacity: 1;
                 }
 
                 &:hover {
-                    background-color: var(--primary-overlay-color);
+                    background-color: var(--overlay-color);
                 }
             }
 
@@ -69,7 +69,7 @@
             .version-info-label {
                 flex: 0 1 auto;
                 margin: 0.5rem 0;
-                color: var(--primary-overlay-color);
+                color: var(--overlay-color);
             }
         }
 
@@ -86,7 +86,7 @@
                 overflow: visible;
 
                 &:not(:last-child) {
-                    border-bottom: thin solid var(--primary-overlay-color);
+                    border-bottom: thin solid var(--overlay-color);
                 }
 
                 .section-title {
@@ -181,7 +181,7 @@
                             height: 3.5rem;
                             border-radius: 3.5rem;
                             margin-left: 1rem;
-                            background-color: var(--primary-overlay-color);
+                            background-color: var(--overlay-color);
 
                             &:hover {
                                 outline: var(--focus-outline-size) solid var(--primary-foreground-color);
@@ -235,7 +235,7 @@
                             justify-content: center;
                             height: 3.5rem;
                             border-radius: 3.5rem;
-                            background-color: var(--primary-overlay-color);
+                            background-color: var(--overlay-color);
 
                             &:hover {
                                 outline: var(--focus-outline-size) solid var(--primary-foreground-color);
@@ -318,7 +318,7 @@
                                 flex-direction: row;
                                 align-items: center;
                                 justify-content: center;
-                                background-color: var(--primary-overlay-color);
+                                background-color: var(--overlay-color);
 
                                 &:hover {
                                     outline: var(--focus-outline-size) solid var(--primary-foreground-color);
@@ -349,8 +349,8 @@
                                 font-weight: 500;
                                 color: var(--primary-foreground-color);
                                 border-radius: 0.25em;
-                                box-shadow: 0 4px 0 1px var(--tertiary-background-color);
-                                background-color: var(--primary-overlay-color);
+                                box-shadow: 0 4px 0 1px var(--modal-background-color);
+                                background-color: var(--overlay-color);
                             }
 
                             .label {
@@ -375,8 +375,8 @@
             padding: 1rem;
             color: var(--primary-foreground-color);
             border-radius: var(--border-radius);
-            background-color: var(--primary-overlay-color);
-            outline: var(--focus-outline-size) solid var(--primary-overlay-color);
+            background-color: var(--overlay-color);
+            outline: var(--focus-outline-size) solid var(--overlay-color);
             outline-offset: calc(-1 * var(--focus-outline-size));
 
             &:hover {