diff --git a/docs/getting-started/configuration.md b/docs/getting-started/configuration.md
index d4d336170..13ed412a2 100644
--- a/docs/getting-started/configuration.md
+++ b/docs/getting-started/configuration.md
@@ -100,7 +100,7 @@ You can change the header background color by specifying the color code for the
 ```json
 {
     ...,
-    "headerColor": "#1565c0"
+    "headerColor": "#ffffff"
 }
 ```
 
diff --git a/docs/ja/getting-started/configuration.md b/docs/ja/getting-started/configuration.md
index 96bcdac3d..5b8a27910 100644
--- a/docs/ja/getting-started/configuration.md
+++ b/docs/ja/getting-started/configuration.md
@@ -100,7 +100,7 @@ Alfresco コンテンツアプリケーションの左上隅に表示される
 ```json
 {
     ...,
-    "headerColor": "#1565c0"
+    "headerColor": "#ffffff"
 }
 ```
 
diff --git a/src/app.config.json b/src/app.config.json
index b1ef44eb1..3a4ccafa7 100644
--- a/src/app.config.json
+++ b/src/app.config.json
@@ -25,7 +25,7 @@
   },
   "viewer.maxRetries": 1,
   "sharedLinkDateTimePickerType": "date",
-  "headerColor": "#1565c0",
+  "headerColor": "#ffffff",
   "languagePicker": true,
   "processServices": true,
   "pagination": {
diff --git a/src/app/components/header/header.component.scss b/src/app/components/header/header.component.scss
new file mode 100644
index 000000000..b01af02c3
--- /dev/null
+++ b/src/app/components/header/header.component.scss
@@ -0,0 +1,23 @@
+@mixin app-header-theme($theme) {
+  $foreground: map-get($theme, foreground);
+
+  .adf-app-title {
+    color: mat-color($foreground, text, 0.72);
+  }
+
+  .adf-menu-icon {
+    color: mat-color($foreground, text, 0.72) !important;
+  }
+
+  .aca-current-user {
+    color: mat-color($foreground, text, 0.72) !important;
+  }
+
+  .adf-toolbar-divider div {
+    background-color: mat-color($foreground, text, 0.72) !important;
+  }
+
+  .app-toolbar-menu {
+    color: mat-color($foreground, text, 0.72) !important;
+  }
+}
diff --git a/src/app/components/header/header.component.ts b/src/app/components/header/header.component.ts
index 4f8b8c3bd..d181157d8 100644
--- a/src/app/components/header/header.component.ts
+++ b/src/app/components/header/header.component.ts
@@ -45,6 +45,7 @@ import {
 @Component({
   selector: 'app-header',
   templateUrl: 'header.component.html',
+  styleUrls: ['header.component.scss'],
   encapsulation: ViewEncapsulation.None,
   host: { class: 'app-header' }
 })
diff --git a/src/app/components/layout/layout.theme.scss b/src/app/components/layout/layout.theme.scss
index bc73d98ef..ea585ac2a 100644
--- a/src/app/components/layout/layout.theme.scss
+++ b/src/app/components/layout/layout.theme.scss
@@ -1,5 +1,7 @@
 @import './app-layout/app-layout.theme.scss';
+@import './app/components/header/header.component.scss';
 
 @mixin layout-theme($theme) {
   @include app-layout-theme($theme);
+  @include app-header-theme($theme);
 }
diff --git a/src/app/store/initial-state.ts b/src/app/store/initial-state.ts
index e620f4f89..b733e7484 100644
--- a/src/app/store/initial-state.ts
+++ b/src/app/store/initial-state.ts
@@ -27,7 +27,7 @@ import { AppState, AppStore } from '@alfresco/aca-shared/store';
 
 export const INITIAL_APP_STATE: AppState = {
   appName: 'Alfresco Content Application',
-  headerColor: '#1565c0',
+  headerColor: '#ffffff',
   logoPath: 'assets/images/alfresco-logo-white.svg',
   languagePicker: false,
   sharedUrl: '',