diff --git a/components/select/src/vwc-select.scss b/components/select/src/vwc-select.scss
index bd8a7cda9d..0692019de4 100644
--- a/components/select/src/vwc-select.scss
+++ b/components/select/src/vwc-select.scss
@@ -226,3 +226,7 @@ vwc-notched-outline {
 		padding-top: 8px;
 	}
 }
+
+mwc-menu {
+	--mdc-theme-surface: var(#{scheme-variables.$vvd-color-surface-8dp});
+}
diff --git a/components/surface/src/vwc-surface.scss b/components/surface/src/vwc-surface.scss
index 60a27119e7..20ff1b3924 100644
--- a/components/surface/src/vwc-surface.scss
+++ b/components/surface/src/vwc-surface.scss
@@ -5,7 +5,7 @@ $surface-border-radius: --vvd-surface-border-radius;
 
 :host {
 	.mdc-menu-surface {
-		background-color: var(#{scheme-variables.$vvd-color-canvas});
+		background-color: var(#{scheme-variables.$vvd-color-surface-8dp});
 		border-radius: var(#{$surface-border-radius}, $default-surface-border-radius);
 		box-shadow: 0 6px 8px rgba(0, 0, 0, 0.05), 0 12px 16px rgba(0, 0, 0, 0.05), 0 4px 24px rgba(0, 0, 0, 0.1);
 	}