diff --git a/src/app.config.json b/src/app.config.json
index e5ea19e7f..d86f8657f 100644
--- a/src/app.config.json
+++ b/src/app.config.json
@@ -5,6 +5,7 @@
         "build": "1234"
     },
     "logo": "/assets/images/alfresco-logo-white.svg",
+    "headerColor": "#2196F3",
     "languagePicker": false,
     "document-list": {
         "supportedPageSizes": [
diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html
index d6d641262..a289d2284 100644
--- a/src/app/components/header/header.component.html
+++ b/src/app/components/header/header.component.html
@@ -1,4 +1,4 @@
-<adf-toolbar class="app-menu">
+<adf-toolbar class="app-menu" [style.background-color]="backgroundColor">
     <adf-toolbar-title>
         <a class="app-menu__title"
             title="{{ appName }}"
diff --git a/src/app/components/header/header.component.scss b/src/app/components/header/header.component.scss
index e1ae95a52..85b2ae712 100644
--- a/src/app/components/header/header.component.scss
+++ b/src/app/components/header/header.component.scss
@@ -4,7 +4,7 @@
 
     &.adf-toolbar {
         .mat-toolbar {
-            background-color: #2196F3;
+            background-color: inherit;
             font-family: inherit;
             min-height: $app-menu-height;
             height: $app-menu-height;
diff --git a/src/app/components/header/header.component.ts b/src/app/components/header/header.component.ts
index f54b8bef9..2d55cdc74 100644
--- a/src/app/components/header/header.component.ts
+++ b/src/app/components/header/header.component.ts
@@ -15,7 +15,8 @@
  * limitations under the License.
  */
 
-import { Component, ViewEncapsulation } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { Component, ViewEncapsulation, SecurityContext } from '@angular/core';
 import { AppConfigService } from '@alfresco/adf-core';
 
 @Component({
@@ -26,8 +27,12 @@ import { AppConfigService } from '@alfresco/adf-core';
 })
 export class HeaderComponent {
     private defaultPath = '/assets/images/alfresco-logo-white.svg';
+    private defaultBackgroundColor = '#2196F3';
 
-    constructor(private appConfig: AppConfigService) {}
+    constructor(
+        private appConfig: AppConfigService,
+        private sanitizer: DomSanitizer
+    ) {}
 
     get appName(): string {
         return <string>this.appConfig.get('application.name');
@@ -36,4 +41,9 @@ export class HeaderComponent {
     get logo() {
         return this.appConfig.get('logo', this.defaultPath);
     }
+
+    get backgroundColor() {
+        const color = this.appConfig.get('headerColor', this.defaultBackgroundColor);
+        return this.sanitizer.sanitize(SecurityContext.STYLE, color);
+    }
 }