diff --git a/source/_patterns/02-components/mainnavigation/_mainnavigation.variables.scss b/source/_patterns/02-components/mainnavigation/_mainnavigation.variables.scss
index ddc45442705..82e1065876e 100644
--- a/source/_patterns/02-components/mainnavigation/_mainnavigation.variables.scss
+++ b/source/_patterns/02-components/mainnavigation/_mainnavigation.variables.scss
@@ -3,6 +3,7 @@
 @import "../../00-base/icons/icons.helpers";
 
 $header-big-link-paddingTop: 32 * 0.0625 !default;
+$header---backgroundColor: #fdfdfd !default; // TODO: This would need to get replaced by the correct (semantic) color
 
 // * reduced height
 // $header-big-link-paddingTop: 19*0.0625 !default;
diff --git a/source/_patterns/02-components/mainnavigation/mainnavigation.scss b/source/_patterns/02-components/mainnavigation/mainnavigation.scss
index 83c92d3a46a..2fd6888d209 100644
--- a/source/_patterns/02-components/mainnavigation/mainnavigation.scss
+++ b/source/_patterns/02-components/mainnavigation/mainnavigation.scss
@@ -36,7 +36,7 @@
 		@include icon(glyph(menu), 24, "outline", $partial: $partial);
 		@include icon(glyph(close), 24, "outline", "after", $partial: $partial);
 
-		background-color: #fdfdfd; // TODO: This would need to get replaced by the correct (semantic) color
+		background-color: $header---backgroundColor; // TODO: This would need to get replaced by the correct (semantic) color
 
 		border-bottom: 1px solid $db-color-warm-gray-100;
 
@@ -79,7 +79,7 @@
 	}
 
 	ul {
-		background-color: #fff;
+		background-color: $header---backgroundColor;
 	}
 
 	// Multiple level navigation
diff --git a/source/_patterns/03-areas/00-header/_header.variables.scss b/source/_patterns/03-areas/00-header/_header.variables.scss
index d730c9a1058..b887805fffa 100644
--- a/source/_patterns/03-areas/00-header/_header.variables.scss
+++ b/source/_patterns/03-areas/00-header/_header.variables.scss
@@ -13,5 +13,3 @@ $header---borderBottom: #{to-rem(
 $header---marginBottom: to-rem(
 	$pxValue: 16
 ) !default;
-
-$header---backgroundColor: #fdfdfd !default; // TODO: This would need to get replaced by the correct (semantic) color