diff --git a/client/app/assets/less/inc/variables.less b/client/app/assets/less/inc/variables.less
index 4fbe64aa73..aa2d0aac8f 100755
--- a/client/app/assets/less/inc/variables.less
+++ b/client/app/assets/less/inc/variables.less
@@ -69,6 +69,11 @@
 @white: #ffffff;
 @white-100: #fbfdff;
 @white-200: #f2f7fb;
+@bg-50: #ffffff;
+@bg-100: #fbfdff;
+@bg-100A: #f8f9fa;
+@bg-200: #f2f7fb;
+@bg-300: #edf4fd;
 @gray-50: #f2f3f6;
 @gray-100: #e5e7ee;
 @gray-200: #cad3e5;
diff --git a/client/app/pages/dashboards/DashboardPage.less b/client/app/pages/dashboards/DashboardPage.less
index 47c11f18d7..ae07460b22 100644
--- a/client/app/pages/dashboards/DashboardPage.less
+++ b/client/app/pages/dashboards/DashboardPage.less
@@ -11,6 +11,7 @@
   flex-grow: 1;
   flex-direction: column;
   width: 100%;
+  background-color: @bg-200;
 }
 
 #dashboard-container {
diff --git a/client/app/pages/dashboards/PublicDashboardPage.less b/client/app/pages/dashboards/PublicDashboardPage.less
index ed03e4f4f8..e0c054d8e4 100644
--- a/client/app/pages/dashboards/PublicDashboardPage.less
+++ b/client/app/pages/dashboards/PublicDashboardPage.less
@@ -1,5 +1,8 @@
+@import (reference, less) "~@/assets/less/inc/variables";
+
 .public-dashboard-page {
   width: 100%;
+  background-color: @bg-200;
 
   .page-header-wrapper {
     margin-top: 0;
diff --git a/client/app/pages/dashboards/components/DashboardHeader.less b/client/app/pages/dashboards/components/DashboardHeader.less
index 7a9b18e4f9..27ee90d470 100644
--- a/client/app/pages/dashboards/components/DashboardHeader.less
+++ b/client/app/pages/dashboards/components/DashboardHeader.less
@@ -1,4 +1,5 @@
 @import (reference, less) "~@/components/ApplicationArea/ApplicationLayout/index.less";
+@import (reference, less) "~@/assets/less/inc/variables";
 
 .dashboard-header {
   display: flex;
@@ -6,7 +7,7 @@
   align-items: stretch;
   position: -webkit-sticky; // required for Safari
   position: sticky;
-  background: #f6f7f9;
+  background-color: @bg-200;
   z-index: 99;
   width: 100%;
   top: 0;