diff --git a/CSS/themes/bazarr/bazarr-base.css b/CSS/themes/bazarr/bazarr-base.css
index 2f904741..3600600c 100644
--- a/CSS/themes/bazarr/bazarr-base.css
+++ b/CSS/themes/bazarr/bazarr-base.css
@@ -396,11 +396,13 @@ hr {
 }
 
 .modal-header {
+    background: var(--modal-header-color);
     border-bottom: 1px solid var(--accent-color);
 
 }
 
 .modal-footer {
+    background: var(--modal-footer-color);
     border-top: 1px solid var(--accent-color);
 }
 
@@ -623,7 +625,7 @@ input {
 /* DROPDOWN MENU */
 .dropdown-menu,.dropdown-header {
     color: var(--text);
-    background: var(--modal-bg-color);
+    background: var(--drop-down-menu-bg);
 }
 
 .dropdown-item {
@@ -657,7 +659,7 @@ input {
 }
 
 .selector__menu {
-    background: var(--modal-bg-color) !important;
+    background: var(--drop-down-menu-bg) !important;
     color: var(--text)
 }
 
diff --git a/CSS/themes/lidarr/lidarr-base.css b/CSS/themes/lidarr/lidarr-base.css
index 9e5ad5ca..04baf588 100644
--- a/CSS/themes/lidarr/lidarr-base.css
+++ b/CSS/themes/lidarr/lidarr-base.css
@@ -109,7 +109,7 @@ a:hover {
 
 /* MODAL */
 [class*="ModalHeader-modalHeader-"] {
-    background: var(--modal-bg-color);
+    background: var(--modal-header-color);
     color: var(--text-hover);
     border-bottom: rgb(var(--accent-color));
 }
@@ -122,7 +122,7 @@ a:hover {
 }
 
 [class*="ModalFooter-modalFooter-"] {
-    background: var(--modal-bg-color);
+    background: var(--modal-footer-color);
     color: #fff;
     border-top: 1px solid rgb(var(--accent-color));
 }
@@ -218,7 +218,7 @@ a:hover {
 [class*="EnhancedSelectInput-options-"] {
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 4px;
-    background: var(--modal-bg-color);
+    background: var(--drop-down-menu-bg);
     color: var(--text);
 }
 
@@ -511,7 +511,7 @@ a:hover {
 /* TOP HEADER DROPDOWN */
 [class*="MenuItem-menuItem-"],
 [class*="MenuContent-menuContent-"] {
-    background: var(--modal-bg-color);
+    background: var(--drop-down-menu-bg);
     color: var(--text);
 }
 
diff --git a/CSS/themes/prowlarr/prowlarr-base.css b/CSS/themes/prowlarr/prowlarr-base.css
index 8c05d78c..8b5db571 100644
--- a/CSS/themes/prowlarr/prowlarr-base.css
+++ b/CSS/themes/prowlarr/prowlarr-base.css
@@ -109,7 +109,7 @@ a:hover {
 
 /* MODAL */
 [class*="ModalHeader-modalHeader-"] {
-    background: var(--modal-bg-color);
+    background: var(--modal-header-color);
     color: var(--text-hover);
     border-bottom: var(--accent-color);
 }
@@ -120,7 +120,7 @@ a:hover {
 }
 
 [class*="ModalFooter-modalFooter-"] {
-    background: var(--modal-bg-color);
+    background: var(--modal-footer-color);
     color: #fff;
     border-top: 1px solid var(--accent-color);
 }
@@ -467,7 +467,7 @@ a:hover {
 /* LIBRARY TOP HEADER DROPDOWN */
 [class*="MenuItem-menuItem-"],
 [class*="MenuContent-menuContent-"] {
-    background: var(--modal-bg-color);
+    background: var(--drop-down-menu-bg);
     color: var(--text);
 }
 
@@ -507,7 +507,7 @@ a:hover {
 [class*="EnhancedSelectInput-options-"] {
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 4px;
-    background: var(--modal-bg-color);
+    background: var(--drop-down-menu-bg);
     color: var(--text);
 }
 [class*="EnhancedSelectInputOption-isSelected-"],
diff --git a/CSS/themes/radarr/radarr-base.css b/CSS/themes/radarr/radarr-base.css
index 118dee92..e6b4b1c5 100644
--- a/CSS/themes/radarr/radarr-base.css
+++ b/CSS/themes/radarr/radarr-base.css
@@ -109,7 +109,7 @@ a:hover {
 
 /* MODAL */
 [class*="ModalHeader-modalHeader-"] {
-    background: var(--modal-bg-color);
+    background: var(--modal-header-color);
     color: var(--text-hover);
     border-bottom: rgb(var(--accent-color));
 }
@@ -120,7 +120,7 @@ a:hover {
 }
 
 [class*="ModalFooter-modalFooter-"] {
-    background: var(--modal-bg-color);
+    background: var(--modal-footer-color);
     color: #fff;
     border-top: 1px solid rgb(var(--accent-color));
 }
@@ -472,7 +472,7 @@ a:hover {
 /* LIBRARY TOP HEADER DROPDOWN */
 [class*="MenuItem-menuItem-"],
 [class*="MenuContent-menuContent-"] {
-    background: var(--modal-bg-color);
+    background: var(--drop-down-menu-bg);
     color: var(--text);
 }
 
@@ -512,7 +512,7 @@ a:hover {
 [class*="EnhancedSelectInput-options-"] {
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 4px;
-    background: var(--modal-bg-color);
+    background: var(--drop-down-menu-bg);
     color: var(--text);
 }
 [class*="EnhancedSelectInputOption-isSelected-"],
diff --git a/CSS/themes/readarr/readarr-base.css b/CSS/themes/readarr/readarr-base.css
index d9c3c5e6..366fe3f9 100644
--- a/CSS/themes/readarr/readarr-base.css
+++ b/CSS/themes/readarr/readarr-base.css
@@ -109,7 +109,7 @@ a:hover {
 
 /* MODAL */
 [class*="ModalHeader-modalHeader-"] {
-    background: var(--modal-bg-color);
+    background: var(--modal-header-color);
     color: var(--text-hover);
     border-bottom: rgb(var(--accent-color));
 }
@@ -122,7 +122,7 @@ a:hover {
 }
 
 [class*="ModalFooter-modalFooter-"] {
-    background: var(--modal-bg-color);
+    background: var(--modal-footer-color);
     color: #fff;
     border-top: 1px solid rgb(var(--accent-color));
 }
@@ -218,7 +218,7 @@ a:hover {
 [class*="EnhancedSelectInput-options-"] {
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 4px;
-    background: var(--modal-bg-color);
+    background: var(--drop-down-menu-bg);
     color: var(--text);
 }
 
@@ -515,7 +515,7 @@ a:hover {
 /* TOP HEADER DROPDOWN */
 [class*="MenuItem-menuItem-"],
 [class*="MenuContent-menuContent-"] {
-    background: var(--modal-bg-color);
+    background: var(--drop-down-menu-bg);
     color: var(--text);
 }
 
diff --git a/CSS/themes/sonarr/sonarr-base.css b/CSS/themes/sonarr/sonarr-base.css
index 1706052c..5158c000 100644
--- a/CSS/themes/sonarr/sonarr-base.css
+++ b/CSS/themes/sonarr/sonarr-base.css
@@ -111,7 +111,7 @@ a:hover {
 
 /* MODAL */
 [class*="ModalHeader-modalHeader-"] {
-    background: var(--modal-bg-color);
+    background: var(--modal-header-color);
     color: var(--text-hover);
     border-bottom: rgb(var(--accent-color));
 }
@@ -122,7 +122,7 @@ a:hover {
 }
 
 [class*="ModalFooter-modalFooter-"] {
-    background: var(--modal-bg-color);
+    background: var(--modal-footer-color);
     color: #fff;
     border-top: 1px solid rgb(var(--accent-color));
 }
@@ -490,7 +490,7 @@ a:hover {
 /* SERIES TOP HEADER DROPDOWN */
 [class*="MenuItem-menuItem-"],
 [class*="MenuContent-menuContent-"] {
-    background: var(--modal-bg-color);
+    background: var(--drop-down-menu-bg);
     color: var(--text);
 }
 
@@ -529,7 +529,7 @@ a:hover {
 [class*="EnhancedSelectInput-options-"] {
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 4px;
-    background: var(--modal-bg-color);
+    background: var(--drop-down-menu-bg);
     color: var(--text);
 }
 [class*="EnhancedSelectInputOption-isSelected-"],