diff --git a/ui/ui-commons/src/main/java/fr/gouv/vitamui/ui/commons/config/UIPropertiesImpl.java b/ui/ui-commons/src/main/java/fr/gouv/vitamui/ui/commons/config/UIPropertiesImpl.java
index 7313abafd740b1654a1adbb9a80634c7d0c52a8c..afdfd51b52e3bf24213f5c289833dd1c8d5bd5a4 100644
--- a/ui/ui-commons/src/main/java/fr/gouv/vitamui/ui/commons/config/UIPropertiesImpl.java
+++ b/ui/ui-commons/src/main/java/fr/gouv/vitamui/ui/commons/config/UIPropertiesImpl.java
@@ -36,6 +36,8 @@
  */
 package fr.gouv.vitamui.ui.commons.config;
 
+import java.util.Map;
+
 import fr.gouv.vitamui.commons.rest.client.configuration.RestClientConfiguration;
 import fr.gouv.vitamui.ui.commons.property.BaseUrl;
 import fr.gouv.vitamui.ui.commons.property.UIProperties;
diff --git a/ui/ui-commons/src/main/java/fr/gouv/vitamui/ui/commons/property/UIProperties.java b/ui/ui-commons/src/main/java/fr/gouv/vitamui/ui/commons/property/UIProperties.java
index 5b6d657d96fb52879e081aac72efd1155db72b40..77b7535a33b69855801a2231615d4bf14b830245 100644
--- a/ui/ui-commons/src/main/java/fr/gouv/vitamui/ui/commons/property/UIProperties.java
+++ b/ui/ui-commons/src/main/java/fr/gouv/vitamui/ui/commons/property/UIProperties.java
@@ -36,6 +36,8 @@
  */
 package fr.gouv.vitamui.ui.commons.property;
 
+import java.util.Map;
+
 import fr.gouv.vitamui.commons.rest.client.configuration.RestClientConfiguration;
 
 public interface UIProperties {
diff --git a/ui/ui-commons/src/main/java/fr/gouv/vitamui/ui/commons/rest/ApplicationController.java b/ui/ui-commons/src/main/java/fr/gouv/vitamui/ui/commons/rest/ApplicationController.java
index 32b19a2ae4581b9b532dd544e6234fe975890821..cc3c92ac2de0c07f203223ca259ec91f8c713472 100644
--- a/ui/ui-commons/src/main/java/fr/gouv/vitamui/ui/commons/rest/ApplicationController.java
+++ b/ui/ui-commons/src/main/java/fr/gouv/vitamui/ui/commons/rest/ApplicationController.java
@@ -37,6 +37,7 @@
 package fr.gouv.vitamui.ui.commons.rest;
 
 import java.util.Collection;
+import java.util.HashMap;
 import java.util.Map;
 
 import org.springframework.beans.factory.annotation.Autowired;
diff --git a/ui/ui-commons/src/main/java/fr/gouv/vitamui/ui/commons/service/ApplicationService.java b/ui/ui-commons/src/main/java/fr/gouv/vitamui/ui/commons/service/ApplicationService.java
index ac5488b2f7cc982f9dcaa999df423b232b2484cd..b027d42159e38a8e1b206d870bf681fdd48b08ee 100644
--- a/ui/ui-commons/src/main/java/fr/gouv/vitamui/ui/commons/service/ApplicationService.java
+++ b/ui/ui-commons/src/main/java/fr/gouv/vitamui/ui/commons/service/ApplicationService.java
@@ -36,12 +36,17 @@
  */
 package fr.gouv.vitamui.ui.commons.service;
 
+import java.io.IOException;
+import java.nio.file.Files;
+import java.nio.file.Path;
+import java.nio.file.Paths;
 import java.util.Collection;
 import java.util.HashMap;
 import java.util.Map;
 import java.util.Optional;
 
 import javax.validation.constraints.NotNull;
+import javax.xml.bind.DatatypeConverter;
 
 import org.springframework.beans.factory.annotation.Value;
 import org.springframework.boot.context.properties.ConfigurationProperties;
diff --git a/ui/ui-frontend-common/package-lock.json b/ui/ui-frontend-common/package-lock.json
index 10dced667816469b2e2dbc33346661eb3c92e6bf..7aff721494f69c4d1e6715c2ce746225e98d0923 100644
--- a/ui/ui-frontend-common/package-lock.json
+++ b/ui/ui-frontend-common/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "ui-frontend-common",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -4433,8 +4433,7 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -4455,14 +4454,12 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -4477,20 +4474,17 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -4607,8 +4601,7 @@
         "inherits": {
           "version": "2.0.4",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "ini": {
           "version": "1.3.5",
@@ -4620,7 +4613,6 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -4635,7 +4627,6 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -4643,14 +4634,12 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "minipass": {
           "version": "2.9.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -4669,7 +4658,6 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -4759,8 +4747,7 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -4772,7 +4759,6 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -4858,8 +4844,7 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -4895,7 +4880,6 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -4915,7 +4899,6 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -4959,14 +4942,12 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "yallist": {
           "version": "3.1.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         }
       }
     },
diff --git a/ui/ui-frontend-common/package.json b/ui/ui-frontend-common/package.json
index 3a734711c0b2ab08afa7a83b48a133ffe7921bb1..f3a98a6ad4e73654378905433312aeefe19cba12 100644
--- a/ui/ui-frontend-common/package.json
+++ b/ui/ui-frontend-common/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ui-frontend-common",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "main": "src/index.ts",
   "scripts": {
     "ng": "ng",
diff --git a/ui/ui-frontend-common/src/app/modules/components/navbar/navbar.component.html b/ui/ui-frontend-common/src/app/modules/components/navbar/navbar.component.html
index 9fc9cff830ac5d5a1c25a9880bd50414ca230df7..e29804bb9761c6ad3a4a3cc83a3ec01602115ac2 100644
--- a/ui/ui-frontend-common/src/app/modules/components/navbar/navbar.component.html
+++ b/ui/ui-frontend-common/src/app/modules/components/navbar/navbar.component.html
@@ -1,7 +1,7 @@
 <nav class="vitamui-navbar">
   <a href="{{portalUrl}}" class="vitamui-navbar-logo">
     <img *ngIf="base64Logo" [src]="trustedAppLogoUrl">
-    <img *ngIf="!base64Logo" src="../../../../assets/navbar-logo.svg">
+    <img *ngIf="!base64Logo" src="../../../../assets/vitamui-logo.png">
   </a>
 
   <ul class="menu">
diff --git a/ui/ui-frontend-common/src/app/modules/components/navbar/navbar.component.spec.ts b/ui/ui-frontend-common/src/app/modules/components/navbar/navbar.component.spec.ts
index 73a49c1b44ced12347522e40da88a7c16f7fe543..3e62c813201a427ed52a4ed7b2593f3d3ca915f6 100644
--- a/ui/ui-frontend-common/src/app/modules/components/navbar/navbar.component.spec.ts
+++ b/ui/ui-frontend-common/src/app/modules/components/navbar/navbar.component.spec.ts
@@ -108,7 +108,7 @@ describe('NavbarComponent', () => {
 
   beforeEach(async(() => {
     const authServiceStub = { logout: () => { } };
-    const startupServiceStub = { getPortalUrl: () => { } };
+    const startupServiceStub = { getPortalUrl: () => { }, getLogo: () => { } };
 
     TestBed.configureTestingModule({
       imports: [
diff --git a/ui/ui-frontend-common/src/app/modules/startup.service.ts b/ui/ui-frontend-common/src/app/modules/startup.service.ts
index cc9c22a021ec27b644405181a2b5e378d042519e..e1a416adb8cdd350936a99bcd47c111273b1278f 100644
--- a/ui/ui-frontend-common/src/app/modules/startup.service.ts
+++ b/ui/ui-frontend-common/src/app/modules/startup.service.ts
@@ -40,7 +40,6 @@ import { tap } from 'rxjs/operators';
 import { Inject, Injectable } from '@angular/core';
 
 import { ApplicationApiService } from './api/application-api.service';
-import { CustomerApiService } from './api/customer-api.service';
 import { SecurityApiService } from './api/security-api.service';
 import { ApplicationId } from './application-id.enum';
 import { ApplicationService } from './application.service';
@@ -48,6 +47,7 @@ import { AuthService } from './auth.service';
 import { WINDOW_LOCATION } from './injection-tokens';
 import { Logger } from './logger/logger';
 import { AppConfiguration, AuthUser } from './models';
+import { getColorFromMaps } from './utils/colors.util';
 
 const WARNING_DURATION = 2000;
 const DARK_SUFFIX = '-dark';
@@ -88,9 +88,9 @@ export class StartupService {
         this.authService.logoutRedirectUiUrl = this.configurationData.LOGOUT_REDIRECT_UI_URL;
       })
       .then(() => this.refreshUser().toPromise())
-      .then(() => this.applicationApi.getAsset('navbar-logo.svg').toPromise())
+      .then(() => this.applicationApi.getAsset('vitamui-logo.png').toPromise())
       .then((data: any) => {
-        this.configurationData.LOGO = data['navbar-logo.svg'];
+        this.configurationData.LOGO = data['vitamui-logo.png'];
       })
       .then(() => {
 
diff --git a/ui/ui-frontend-common/src/sass/material/_menu.scss b/ui/ui-frontend-common/src/sass/material/_menu.scss
index fb5dfb630d026056121f2a01c6c2cb3703e82166..18058aedeeb327fe46eac2c20bdea71e15dade11 100644
--- a/ui/ui-frontend-common/src/sass/material/_menu.scss
+++ b/ui/ui-frontend-common/src/sass/material/_menu.scss
@@ -133,7 +133,7 @@
     }
 
     .mat-menu-item:hover:not([disabled]):not(.menu-cancel-button) {
-        background-color: lighten(var(--vitamui-secondary), 10);
+        background-color: var(--vitamui-secondary-light);
     }
 
     .mat-menu-item[disabled] {
@@ -143,7 +143,7 @@
     .more-action-divider {
         height: 10px;
         width: 100%;
-        background-color: lighten(var(--vitamui-secondary), 8);
+        background-color: var(--vitamui-secondary-light-8);
 
         + .mat-menu-item {
             border-top-color: transparent;
diff --git a/ui/ui-frontend-common/src/sass/mixins/material/_select.scss b/ui/ui-frontend-common/src/sass/mixins/material/_select.scss
index 83fd94e4557996ec5ee41052832f91921b4d5533..9f41d19b3345bedc62f646119296ed7c1938e729 100644
--- a/ui/ui-frontend-common/src/sass/mixins/material/_select.scss
+++ b/ui/ui-frontend-common/src/sass/mixins/material/_select.scss
@@ -32,12 +32,12 @@
 
     .mat-option.mat-selected:not(.mat-option-multiple) {
         font-weight: 500;
-        color: $greeny-blue;
+        color: var(--vitamui-secondary);
 
         &:before {
             content: 'check';
             font-family: 'Material Icons';
-            color: $greeny-blue;
+            color: var(--vitamui-secondary);
             display: block;
             position: absolute;
             left: 10px;
diff --git a/ui/ui-frontend-common/src/sass/mixins/material/_select.scss.rej b/ui/ui-frontend-common/src/sass/mixins/material/_select.scss.rej
deleted file mode 100644
index 05c6efaac830a9ca63cd8095a67461fecbb85e22..0000000000000000000000000000000000000000
--- a/ui/ui-frontend-common/src/sass/mixins/material/_select.scss.rej
+++ /dev/null
@@ -1,20 +0,0 @@
-diff a/ui/ui-frontend-common/src/sass/mixins/material/_select.scss b/ui/ui-frontend-common/src/sass/mixins/material/_select.scss	(rejected hunks)
-@@ -29,15 +29,15 @@
-     .mat-option.mat-selected:not(.mat-option-multiple):not(.mat-active):not(:hover) {
-         background: none;
-     }
--  
-+
-     .mat-option.mat-selected:not(.mat-option-multiple) {
-         font-weight: 500;
--        color: $greeny-blue;
-+        color: var(--vitamui-secondary);
- 
-         &:before {
-             content: 'check';
-             font-family: 'Material Icons';
--            color: $greeny-blue;
-+            color: var(--vitamui-secondary);
-             display: block;
-             position: absolute;
-             left: 10px;
diff --git a/ui/ui-frontend/package-lock.json b/ui/ui-frontend/package-lock.json
index be675288cbad2229aa49b6416e18bbed8793f0cd..3625e90a3c0ca5a9db5f276a33f8484c47b9fbb3 100644
--- a/ui/ui-frontend/package-lock.json
+++ b/ui/ui-frontend/package-lock.json
@@ -10445,7 +10445,8 @@
       }
     },
     "ui-frontend-common": {
-      "version": "file:../ui-frontend-common/ui-frontend-common-0.0.2.tgz",
+      "version": "file:../ui-frontend-common/ui-frontend-common-0.0.13.tgz",
+      "integrity": "sha512-bQ+YHuLIiBFR5E4BlWC+e/Jz+8nisnuUHlJVB2kVNSvrxMgqH5cFh4WRL1rdaU/DXcNcS/0nHK7uoRCKDWbcmQ==",
       "requires": {
         "@angular/animations": "8.0.0",
         "@angular/cdk": "^8.0.0",
diff --git a/ui/ui-frontend/package.json b/ui/ui-frontend/package.json
index 71bd508fb311d42e8491b044b06f2e379be5edac..3d1914dedcb00cadd9e2e72fcb011ca8fcebf5fe 100644
--- a/ui/ui-frontend/package.json
+++ b/ui/ui-frontend/package.json
@@ -59,7 +59,7 @@
     "moment": "^2.24.0",
     "rxjs": "^6.5.2",
     "tslib": "^1.9.0",
-    "ui-frontend-common": "file:../ui-frontend-common/ui-frontend-common-0.0.2.tgz",
+    "ui-frontend-common": "file:../ui-frontend-common/ui-frontend-common-0.0.13.tgz",
     "underscore": "^1.9.1",
     "web-animations-js": "^2.3.2",
     "zone.js": "~0.9.1"
diff --git a/ui/ui-frontend/package.json.rej b/ui/ui-frontend/package.json.rej
deleted file mode 100644
index d3db92f4f7a8a8d5770e0f18bcac8eff457a4dff..0000000000000000000000000000000000000000
--- a/ui/ui-frontend/package.json.rej
+++ /dev/null
@@ -1,10 +0,0 @@
-diff a/ui/ui-frontend/package.json b/ui/ui-frontend/package.json	(rejected hunks)
-@@ -59,7 +59,7 @@
-     "moment": "^2.24.0",
-     "rxjs": "^6.5.2",
-     "tslib": "^1.9.0",
--    "ui-frontend-common": "file:../ui-frontend-common/ui-frontend-common-0.0.25.tgz",
-+    "ui-frontend-common": "file:../ui-frontend-common/ui-frontend-common-0.0.26.tgz",
-     "underscore": "^1.9.1",
-     "web-animations-js": "github:angular/web-animations-js#release_pr208",
-     "zone.js": "~0.9.1"
diff --git a/ui/ui-frontend/projects/identity/src/app/core/customer.service.spec.ts b/ui/ui-frontend/projects/identity/src/app/core/customer.service.spec.ts
index 345f2a87460cc3d9f7401fb939f0366cadddae4b..3307e8006e7998c9e1b3900db59788cf680f2381 100644
--- a/ui/ui-frontend/projects/identity/src/app/core/customer.service.spec.ts
+++ b/ui/ui-frontend/projects/identity/src/app/core/customer.service.spec.ts
@@ -192,5 +192,6 @@ const expectedCustomer: Customer = {
       country: 'FR',
     },
     readonly: false
-  }]
+  }],
+  themeColors: new Map<string, string>()
 };
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-colors-input/customer-colors-input.component.html b/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-colors-input/customer-colors-input.component.html
index 094c8639351f4dd6ac60f99811b8dacffcbb0ee3..36006205024237568731e1f845569c4201485107 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-colors-input/customer-colors-input.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-colors-input/customer-colors-input.component.html
@@ -1,11 +1,11 @@
 <!-- TODO: Add specific colors -->
 <div class="d-flex" [formGroup]="colorForm">
-  <openvitamui-common-input class="field-color-name" formControlName="colorName" maxlength="100"
+  <vitamui-common-input class="field-color-name" formControlName="colorName" maxlength="100"
                          placeholder="Identifiant de Couleur" i18n-placeholder="Customer color name input placeholder@@customerCreateColorNamePlaceholder">
-  </openvitamui-common-input>
-  <openvitamui-common-input class="field-color-value" formControlName="colorValue" maxlength="7"
+  </vitamui-common-input>
+  <vitamui-common-input class="field-color-value" formControlName="colorValue" maxlength="7"
                          placeholder="Couleur RGB" i18n-placeholder="Customer color value input placeholder@@customerCreateColorValuePlaceholder">
-  </openvitamui-common-input>
+  </vitamui-common-input>
   <button type="button" class="btn secondary" (click)="add()" [disabled]="buttonAddDisabled()" i18n="color input add button@@colorsInputAddButton">Ajouter</button>
 </div>
 <div class="vitamui-input-errors">
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-colors-input/customer-colors-input.component.spec.ts b/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-colors-input/customer-colors-input.component.spec.ts
index 9dcc8372cb8306a3e183746f44c7a61181afb730..d34237703ce8b0f4837808519f7927be780624a7 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-colors-input/customer-colors-input.component.spec.ts
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-colors-input/customer-colors-input.component.spec.ts
@@ -1,5 +1,9 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { ReactiveFormsModule } from '@angular/forms';
+import { InjectorModule, LoggerModule } from 'ui-frontend-common';
+import { VitamUICommonTestModule } from 'ui-frontend-common/testing';
 import { CustomerColorsInputComponent } from './customer-colors-input.component';
 
 describe('CustomerColorsInputComponent', () => {
@@ -8,9 +12,19 @@ describe('CustomerColorsInputComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ CustomerColorsInputComponent ]
+      imports: [
+        ReactiveFormsModule,
+        HttpClientTestingModule,
+        VitamUICommonTestModule,
+        InjectorModule,
+        LoggerModule.forRoot(),
+      ],
+      declarations: [CustomerColorsInputComponent],
+      providers: [
+      ]
     })
     .compileComponents();
+
   }));
 
   beforeEach(() => {
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-create.component.spec.ts b/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-create.component.spec.ts
index 500901e9a340235a43f6a82adb12cd81d9d30ed9..c18726b79dbc26648a20c9feb23b60f90daec3b7 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-create.component.spec.ts
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-create.component.spec.ts
@@ -74,6 +74,23 @@ class OwnerFormStubComponent implements ControlValueAccessor {
   registerOnTouched() {}
 }
 
+@Component({
+  selector: 'app-customer-colors-input',
+  template: '',
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => CustomerColorsInputStubComponent),
+    multi: true,
+  }]
+})
+class CustomerColorsInputStubComponent implements ControlValueAccessor {
+    @Input() placeholder: string;
+    @Input() spinnerDiameter = 25;
+    writeValue() {}
+    registerOnChange() {}
+    registerOnTouched() {}
+}
+
 const expectedCustomer = {
   enabled: true,
   code: '424242',
@@ -101,7 +118,8 @@ const expectedCustomer = {
       city: 'Paris',
       country: 'FR',
     }
-  }]
+  }],
+  themeColors: new Map<string, string>()
 };
 
 let component: CustomerCreateComponent;
@@ -143,6 +161,7 @@ describe('CustomerCreateComponent', () => {
       declarations: [
         CustomerCreateComponent,
         OwnerFormStubComponent,
+        CustomerColorsInputStubComponent,
       ],
       providers: [
         { provide: MatDialogRef, useValue: matDialogRefSpy },
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-create.component.ts b/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-create.component.ts
index d4f224226379319b94f1f3bcd46ff147170bc6da..c916be382de74203272d37009b38b0fa29b82b66 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-create.component.ts
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-create.component.ts
@@ -35,7 +35,7 @@
  * knowledge of the CeCILL-C license and that you accept its terms.
  */
 import { merge, Subscription } from 'rxjs';
-import { ConfirmDialogService, OtpState } from 'ui-frontend-common';
+import { ConfirmDialogService, Customer, OtpState } from 'ui-frontend-common';
 
 import { Component, Inject, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-list/customer-list.component.spec.ts b/ui/ui-frontend/projects/identity/src/app/customer/customer-list/customer-list.component.spec.ts
index d86ea33ed4f164d7b8887c1368286ec9b1573937..965cbd43748e024793969ab61d6e841d42ebac3b 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/customer-list/customer-list.component.spec.ts
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-list/customer-list.component.spec.ts
@@ -113,7 +113,8 @@ describe('CustomerListComponent', () => {
           city: 'paris',
           country: 'france'
         },
-        owners: []
+        owners: [],
+        themeColors: new Map<string, string>()
       },
       {
         id: '12',
@@ -138,7 +139,8 @@ describe('CustomerListComponent', () => {
           city: 'paris',
           country: 'france'
         },
-        owners: []
+        owners: [],
+        themeColors: new Map<string, string>()
       },
       {
         id: '13',
@@ -163,7 +165,8 @@ describe('CustomerListComponent', () => {
           city: 'paris',
           country: 'france'
         },
-        owners: []
+        owners: [],
+        themeColors: new Map<string, string>()
       },
       {
         id: '14',
@@ -188,7 +191,8 @@ describe('CustomerListComponent', () => {
           city: 'paris',
           country: 'france'
         },
-        owners: []
+        owners: [],
+        themeColors: new Map<string, string>()
       },
       {
         id: '15',
@@ -213,7 +217,8 @@ describe('CustomerListComponent', () => {
           city: 'paris',
           country: 'france'
         },
-        owners: []
+        owners: [],
+        themeColors: new Map<string, string>()
       },
     ];
 
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-list/customer-list.service.spec.ts b/ui/ui-frontend/projects/identity/src/app/customer/customer-list/customer-list.service.spec.ts
index 27ac5a89ae99fe8dbf503a781a3cbe85dbd1b5d6..fe71ecde7ec2a27a25bea923c699383506a60ca6 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/customer-list/customer-list.service.spec.ts
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-list/customer-list.service.spec.ts
@@ -98,7 +98,8 @@ const expectedCustomersPage: { values: Customer[], pageNum: number, pageSize: nu
         zipCode: '75009',
         city: 'Paris',
         country: 'France'
-      }
+      },
+      themeColors: new Map<string, string>()
     },
     {
       id: '5acc6bd8b75bfb2e46aeec41e0973280907b4bc7a918b07df78df36f501b3ba5',
@@ -153,7 +154,8 @@ const expectedCustomersPage: { values: Customer[], pageNum: number, pageSize: nu
         zipCode: '75008',
         city: 'Paris',
         country: 'France'
-      }
+      },
+      themeColors: new Map<string, string>()
     },
   ],
   pageNum: 0,
@@ -216,7 +218,8 @@ const customersPage: { values: Customer[], pageNum: number, pageSize: number, ha
         zipCode: '75009',
         city: 'Paris',
         country: 'France'
-      }
+      },
+      themeColors: new Map<string, string>()
     },
     {
       id: '5acc6bd8b75bfb2e46aeec41e0973280907b4bc7a918b07df78df36f501b3ba5',
@@ -271,7 +274,8 @@ const customersPage: { values: Customer[], pageNum: number, pageSize: number, ha
         zipCode: '75008',
         city: 'Paris',
         country: 'France'
-      }
+      },
+      themeColors: new Map<string, string>()
     },
   ],
   pageNum: 0,
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity-tab.component.spec.ts b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity-tab.component.spec.ts
index 141d1fb1b3b55633343675919b7485cf6c1c3be4..affccd62b0ae99b9ceb2668196385e9b00266ba8 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity-tab.component.spec.ts
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity-tab.component.spec.ts
@@ -82,7 +82,8 @@ let expectedCustomer: Customer = {
     },
     customerId: 'idCustomer',
     readonly: false
-  }]
+  }],
+  themeColors: new Map<string, string>()
 };
 
 @Component({
@@ -142,7 +143,8 @@ describe('GraphicIdentityTabComponent', () => {
         },
         customerId: 'idCustomer',
         readonly: false
-      }]
+      }],
+      themeColors: new Map<string, string>()
     };
     const snackBarSpy = jasmine.createSpyObj('VitamUISnackBar', ['open', 'openFromComponent']);
 
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity-update/graphic-identity-update.component.spec.ts b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity-update/graphic-identity-update.component.spec.ts
index 06bd2c39f4a31623e6174e582d4fc0833d800bf4..7226113d7ffd4c5447e916d2dcbf066528c610da 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity-update/graphic-identity-update.component.spec.ts
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity-update/graphic-identity-update.component.spec.ts
@@ -35,7 +35,9 @@
  * knowledge of the CeCILL-C license and that you accept its terms.
  */
 import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { forwardRef, Input } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { ENVIRONMENT } from 'ui-frontend-common';
@@ -43,6 +45,7 @@ import { BASE_URL, Customer, InjectorModule, LoggerModule, OtpState } from 'ui-f
 import { VitamUICommonTestModule } from 'ui-frontend-common/testing';
 import { environment } from './../../../../../environments/environment';
 
+import { Component } from '@angular/core';
 import { VitamUISnackBar } from '../../../../shared/vitamui-snack-bar';
 import { GraphicIdentityUpdateComponent } from './graphic-identity-update.component';
 
@@ -83,9 +86,27 @@ const expectedCustomer: Customer = {
     },
     customerId: 'idCustomer',
     readonly: false
-  }]
+  }],
+  themeColors: new Map<string, string>()
 };
 
+@Component({
+  selector: 'app-customer-colors-input',
+  template: '',
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => CustomerColorsInputStubComponent),
+    multi: true,
+  }]
+})
+class CustomerColorsInputStubComponent implements ControlValueAccessor {
+    @Input() placeholder: string;
+    @Input() spinnerDiameter = 25;
+    writeValue() {}
+    registerOnChange() {}
+    registerOnTouched() {}
+}
+
 describe('GraphicIdentityUpdateComponent', () => {
   let component: GraphicIdentityUpdateComponent;
   let fixture: ComponentFixture<GraphicIdentityUpdateComponent>;
@@ -99,9 +120,9 @@ describe('GraphicIdentityUpdateComponent', () => {
         HttpClientTestingModule,
         VitamUICommonTestModule,
         InjectorModule,
-        LoggerModule.forRoot()
+        LoggerModule.forRoot(),
       ],
-      declarations: [GraphicIdentityUpdateComponent],
+      declarations: [CustomerColorsInputStubComponent, GraphicIdentityUpdateComponent],
       providers: [
         { provide: MatDialogRef, useValue: matDialogRefSpy },
         { provide: MAT_DIALOG_DATA, useValue: { customer: expectedCustomer, logo: null } },
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/information-tab/information-tab.component.spec.ts b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/information-tab/information-tab.component.spec.ts
index df85bfd2a0b4ab329b15778ddb76ad823d070675..2e638913a8a419f29da4f40564dc49d654451ea4 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/information-tab/information-tab.component.spec.ts
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/information-tab/information-tab.component.spec.ts
@@ -70,7 +70,8 @@ let expectedCustomer: Customer = {
         city: 'paris',
         country: 'france'
     },
-    owners: []
+    owners: [],
+    themeColors: new Map<string, string>()
 };
 
 @Component({
@@ -91,6 +92,22 @@ class EditableDomainInputStubComponent implements ControlValueAccessor {
   registerOnChange() {}
   registerOnTouched() {}
 }
+@Component({
+  selector: 'app-customer-colors-input',
+  template: '',
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => CustomerColorsInputStubComponent),
+    multi: true,
+  }]
+})
+class CustomerColorsInputStubComponent implements ControlValueAccessor {
+    @Input() placeholder: string;
+    @Input() spinnerDiameter = 25;
+    writeValue() {}
+    registerOnChange() {}
+    registerOnTouched() {}
+}
 
 @Component({
     template: `<app-information-tab [customer]="customer" [readOnly]="readOnly"></app-information-tab>`
@@ -130,7 +147,8 @@ describe('Customer InformationTabComponent', () => {
         city: 'paris',
         country: 'france'
       },
-      owners: []
+      owners: [],
+      themeColors: new Map<string, string>()
     };
     const customerServiceSpy = jasmine.createSpyObj('CustomerService', { patch: of({}) });
     const customerCreateValidatorsSpy = jasmine.createSpyObj(
@@ -148,6 +166,7 @@ describe('Customer InformationTabComponent', () => {
         InformationTabComponent,
         TestHostComponent,
         EditableDomainInputStubComponent,
+        CustomerColorsInputStubComponent,
       ],
       providers: [
         { provide: CustomerService, useValue: customerServiceSpy },
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/sso-tab/sso-tab.component.spec.ts b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/sso-tab/sso-tab.component.spec.ts
index 575f682f98dda0e174055efc9e5f67f980850985..ef51923d5b0393dbbe60c66f58c7786bedc15c56 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/sso-tab/sso-tab.component.spec.ts
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/sso-tab/sso-tab.component.spec.ts
@@ -91,7 +91,8 @@ class TestHostComponent {
         city : 'Paris',
         country : 'DK'
     },
-    owners: []
+    owners: [],
+    themeColors: new Map<string, string>()
   };
   @ViewChild(SsoTabComponent, { static: false }) component: SsoTabComponent;
 }
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-resolver.service.spec.ts b/ui/ui-frontend/projects/identity/src/app/customer/customer-resolver.service.spec.ts
index 846a5acc5daa0be2d5934566641a0298da85b4f1..d83e430b49de9d62ef42c2b3ffcca1dba76701ce 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/customer-resolver.service.spec.ts
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-resolver.service.spec.ts
@@ -67,7 +67,8 @@ const expectedCustomer: Customer = {
     city: 'paris',
     country: 'france'
   },
-  owners: []
+  owners: [],
+  themeColors: new Map<string, string>()
 };
 
 describe('CustomerResolver', () => {
diff --git a/ui/ui-frontend/projects/identity/src/app/user/user-preview/user-information-tab/user-information-tab.component.spec.ts b/ui/ui-frontend/projects/identity/src/app/user/user-preview/user-information-tab/user-information-tab.component.spec.ts
index 063e18627f46240eb0b81bc7d89102669a565d27..cd55d7bf851f48462df8fd382b30cd1b1fc0e48d 100644
--- a/ui/ui-frontend/projects/identity/src/app/user/user-preview/user-information-tab/user-information-tab.component.spec.ts
+++ b/ui/ui-frontend/projects/identity/src/app/user/user-preview/user-information-tab/user-information-tab.component.spec.ts
@@ -114,7 +114,8 @@ let expectedCustomer: Customer = {
     },
     customerId: 'idCustomer',
     readonly : false
-  }]
+  }],
+  themeColors: new Map<string, string>()
 };
 
 let expectedUserInfo: AdminUserProfile = {
@@ -220,7 +221,8 @@ describe('UserInfoTabComponent', () => {
         },
         customerId: 'idCustomer',
         readonly : false
-      }]
+      }],
+      themeColors: new Map<string, string>()
     };
     expectedUserInfo = {
       multifactorAllowed: true,
diff --git a/ui/ui-identity/src/main/config/ui-identity-application-dev.yml b/ui/ui-identity/src/main/config/ui-identity-application-dev.yml
index bbb2e5297216f6edf16d7b6b04693a140cfe6b88..69d8d9935b1712a5ec69e5f2811daa132b99ebd7 100644
--- a/ui/ui-identity/src/main/config/ui-identity-application-dev.yml
+++ b/ui/ui-identity/src/main/config/ui-identity-application-dev.yml
@@ -15,7 +15,7 @@ ui-identity:
     vitamui-primary-light: "#992fb1"
     vitamui-primary-light-20: "#ba52d1"
     vitamui-secondary: "#7FA1D4"
-  assets: /vitamui/assets/ui-identity
+  assets: src/main/config
   iam-external-client:
     server-host: localhost
     server-port: 8083
diff --git a/ui/ui-identity/src/main/config/ui-identity-application-recette.yml b/ui/ui-identity/src/main/config/ui-identity-application-recette.yml
index ebe706b2995adc854a7de1d92f5a8a5a248e656d..aedc74b8ba258b50253775f6ba61a8bf52bc27f6 100644
--- a/ui/ui-identity/src/main/config/ui-identity-application-recette.yml
+++ b/ui/ui-identity/src/main/config/ui-identity-application-recette.yml
@@ -10,6 +10,12 @@ spring:
         register: false
 
 ui-identity:
+  theme-colors:
+    vitamui-primary: "#702382"
+    vitamui-primary-light: "#992fb1"
+    vitamui-primary-light-20: "#ba52d1"
+    vitamui-secondary: "#7FA1D4"
+  assets: src/main/config
   iam-external-client:
     server-host: localhost
     server-port: 8083
diff --git a/ui/ui-identity/src/main/config/vitamui-logo.png b/ui/ui-identity/src/main/config/vitamui-logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..5fccc526e489c1e1b41fa6a4a6c5eb24a8012435
Binary files /dev/null and b/ui/ui-identity/src/main/config/vitamui-logo.png differ
diff --git a/ui/ui-portal/src/main/config/ui-portal-application-dev.yml b/ui/ui-portal/src/main/config/ui-portal-application-dev.yml
index 80d4ac1d2e1da5198928730042eafb8b25d4dd8c..1e10c574a370538382157e1342c967eb87d8ff59 100644
--- a/ui/ui-portal/src/main/config/ui-portal-application-dev.yml
+++ b/ui/ui-portal/src/main/config/ui-portal-application-dev.yml
@@ -30,7 +30,7 @@ ui-portal:
     vitamui-primary-light: "#992fb1"
     vitamui-primary-light-20: "#ba52d1"
     vitamui-secondary: "#7FA1D4"
-  assets: /vitamui/assets/ui-portal
+  assets: src/main/config
   iam-external-client:
     server-host: localhost
     server-port: 8083
diff --git a/ui/ui-portal/src/main/config/ui-portal-application-recette.yml b/ui/ui-portal/src/main/config/ui-portal-application-recette.yml
index 98619d32169ef6c2653cbb5d57599bffc6642805..fd49621fc575a14f1c31af4701acb1a560747d05 100644
--- a/ui/ui-portal/src/main/config/ui-portal-application-recette.yml
+++ b/ui/ui-portal/src/main/config/ui-portal-application-recette.yml
@@ -25,6 +25,12 @@ management:
       enabled: false
 
 ui-portal:
+  theme-colors:
+    vitamui-primary: "#702382"
+    vitamui-primary-light: "#992fb1"
+    vitamui-primary-light-20: "#ba52d1"
+    vitamui-secondary: "#7FA1D4"
+  assets: src/main/config
   iam-external-client:
     server-host: localhost
     server-port: 8083
diff --git a/ui/ui-portal/src/main/config/vitamui-logo.png b/ui/ui-portal/src/main/config/vitamui-logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..5fccc526e489c1e1b41fa6a4a6c5eb24a8012435
Binary files /dev/null and b/ui/ui-portal/src/main/config/vitamui-logo.png differ