diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/customer-preview.component.html b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/customer-preview.component.html
index 62086ec25f716d2790fb884df0f0feb5483015a9..ddba95e229f5123fdf956825142b1136bf9b3a39 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/customer-preview.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/customer-preview.component.html
@@ -1,21 +1,25 @@
   <vitamui-common-sidenav-header [title]="customer?.name" [subtitle]="'(' +  customer?.code + ')'" [icon]="'vitamui-icon-bank'"
    (onclose)="emitClose()"></vitamui-common-sidenav-header>
 
-  <div class="vitamui-sidepanel-body">
+  <div class="vitamui-sidepanel-body" >
     <mat-tab-group class="preview-tab-group">
-      <mat-tab label="Informations" i18n-label="Information tab@@customerPreviewTabInformation">
+      <mat-tab label="{{'CUSTOMER.TAB.INFORMATION' | translate}}" i18n-label="Information tab@@customerPreviewTabInformation">
         <app-information-tab [customer]="customer" [readOnly]="isPopup || customer?.readonly" [gdprReadOnlyStatus]="gdprReadOnlyStatus"></app-information-tab>
       </mat-tab>
 
-      <mat-tab label="SSO" i18n-label="SSO tab@@customerPreviewTabSSO" class="no-padding">
+      <mat-tab label="{{'CUSTOMER.TAB.SSO' | translate}}" i18n-label="SSO tab@@customerPreviewTabSSO" class="no-padding">
         <app-sso-tab [customer]="customer" [readOnly]="isPopup || customer?.readonly"></app-sso-tab>
       </mat-tab>
 
-      <mat-tab label="ID. graphique" i18n-label="Visual identity tab@@customerPreviewTabVisualIdentity">
+      <mat-tab label="{{'CUSTOMER.TAB.GRAPHIC_ID' | translate}}" i18n-label="Visual identity tab@@customerPreviewTabVisualIdentity">
         <app-graphic-identity-tab [customer]="customer" [readOnly]="isPopup || customer?.readonly"></app-graphic-identity-tab>
       </mat-tab>
 
-      <mat-tab label="Historique" i18n-label="History tab@@customerPreviewTabHistory">
+      <mat-tab label="{{'CUSTOMER.TAB.HOMEPAGE_MESSAGE' | translate}}" i18n-label="Visual identity tab@@customerPreviewTabVisualIdentity">
+        <app-homepage-message-tab [customer]="customer" [readOnly]="isPopup || customer?.readonly"></app-homepage-message-tab>
+      </mat-tab>
+
+      <mat-tab label="{{'CUSTOMER.TAB.HISTORY' | translate}}" i18n-label="History tab@@customerPreviewTabHistory">
         <vitamui-common-operation-history-tab [id]="customer?.id" [identifier]="customer?.identifier" collectionName="customers" [filter]="filterEvents"></vitamui-common-operation-history-tab>
       </mat-tab>
     </mat-tab-group>
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/customer-preview.component.scss b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/customer-preview.component.scss
index 8d95e6799f0ae14f63545a44b379755e04d9c01d..0290a514a99f932a87c5af9693fd1dcd6f65acec 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/customer-preview.component.scss
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/customer-preview.component.scss
@@ -1,7 +1,16 @@
+:host::ng-deep {
+    .mat-tab-header-pagination.mat-tab-header-pagination {
+        display: flex !important;
+    }
+    .mat-tab-header-pagination.mat-tab-header-pagination-disabled {
+        display: none!important;
+    }
+}
+
 .no-padding {
     padding: 0;
 }
 
 .pointer {
     cursor: pointer;
-}
\ No newline at end of file
+}
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/customer-preview.module.ts b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/customer-preview.module.ts
index f9fd52438c5d2fce4bde26650b84304e66d9ce9e..69f9f153d6e32dd28343a1995498b1fc7bcfb8d4 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/customer-preview.module.ts
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/customer-preview.module.ts
@@ -54,6 +54,8 @@ import { GraphicIdentityTabComponent } from './graphic-identity-tab/graphic-iden
 import { GraphicIdentityUpdateComponent } from './graphic-identity-tab/graphic-identity-update/graphic-identity-update.component';
 import { GraphicIdentityFormComponent } from './graphic-identity-tab/graphic-identity/graphic-identity-form/graphic-identity-form.component';
 import { GraphicIdentityComponent } from './graphic-identity-tab/graphic-identity/graphic-identity.component';
+import { HomepageMessageTabComponent } from './homepage-message-tab/homepage-message-tab.component';
+import { HomepageMessageUpdateComponent } from './homepage-message-tab/homepage-message-update/homepage-message-update.component';
 import { InformationTabComponent } from './information-tab/information-tab.component';
 import { IdentityProviderCreateComponent } from './sso-tab/identity-provider-create/identity-provider-create.component';
 import { IdentityProviderDetailsComponent } from './sso-tab/identity-provider-details/identity-provider-details.component';
@@ -86,9 +88,11 @@ import { SsoTabComponent } from './sso-tab/sso-tab.component';
     GraphicIdentityUpdateComponent,
     GraphicIdentityComponent,
     GraphicIdentityFormComponent,
+    HomepageMessageTabComponent,
+    HomepageMessageUpdateComponent
   ],
   exports: [ CustomerPreviewComponent, GraphicIdentityComponent ],
-  entryComponents: [IdentityProviderCreateComponent, GraphicIdentityUpdateComponent],
+  entryComponents: [IdentityProviderCreateComponent, GraphicIdentityUpdateComponent, HomepageMessageUpdateComponent],
   providers: [IdentityProviderService]
 })
 export class CustomerPreviewModule { }
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity-tab.component.html b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity-tab.component.html
index a1225a470a12d5abd3957156e86cbd6f38f8a480..9472ef361b245d31e8def675851c8e64538bdcbd 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity-tab.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity-tab.component.html
@@ -1,17 +1,17 @@
 <div class="d-flex">
   <div class="col-6 mr-4 d-flex justify-content-center align-items-center">
     <button class="btn primary mb-20" (click)="openUpdateCustomerLogo()" [disabled]="readonly">
-      <div i18n="customer graphic identity tab edit@@customerGraphicIdentityTabEditButton">
-          Modifier
+      <div>
+        {{'COMMON.UPDATE' | translate}}
       </div>
     </button>
   </div>
   <div class="col-6">
-    <label i18n="@@labelLogoPortal">Logo portal</label>
+    <label class="text normal light">{{'GRAPHIC_IDENTITY.LOGO_PORTAL_TITLE' | translate}}</label>
     <div class="image-area small d-flex flex-column justify-content-center align-items-center"
       [style.background-color]="theme.colors[THEME_COLORS.VITAMUI_BACKGROUND] | safeStyle"
     >
-      <div *ngIf="isLoading"><mat-spinner class="vitamui-spinner medium"></mat-spinner></div>
+      <div *ngIf="isLoading"><mat-spinner class="vitamui-spinner normal"></mat-spinner></div>
       <img *ngIf="!isLoading" [src]="theme?.portalUrl">
     </div>
   </div>
@@ -19,21 +19,21 @@
  
 <div class="d-flex mt-4">
   <div class="col-6 mr-4">
-    <label i18n="@@labelLogoHeader">Logo header</label>
+    <label class="text normal light">{{'GRAPHIC_IDENTITY.LOGO_HEADER_TITLE' | translate}}</label>
     <div class="image-area small d-flex flex-column justify-content-center align-items-center"
       [style.background-color]="theme.colors[THEME_COLORS.VITAMUI_HEADER_FOOTER] | safeStyle"
     >
-      <div *ngIf="isLoading"><mat-spinner class="vitamui-spinner medium"></mat-spinner></div>
+      <div *ngIf="isLoading"><mat-spinner class="vitamui-spinner normal"></mat-spinner></div>
       <img *ngIf="!isLoading" [src]="theme?.headerUrl">
     </div>
   </div>
 
   <div class="col-6">
-    <label i18n="@@labelLogoFooter">Logo footer</label>
+    <label class="text normal light">{{'GRAPHIC_IDENTITY.LOGO_FOOTER_TITLE' | translate}}</label>
     <div class="image-area small d-flex flex-column justify-content-center align-items-center"
       [style.background-color]="theme.colors[THEME_COLORS.VITAMUI_HEADER_FOOTER] | safeStyle"
     >
-      <div *ngIf="isLoading"><mat-spinner class="vitamui-spinner medium"></mat-spinner></div>
+      <div *ngIf="isLoading"><mat-spinner class="vitamui-spinner normal"></mat-spinner></div>
       <img *ngIf="!isLoading" [src]="theme?.footerUrl">
     </div>
   </div>
@@ -41,7 +41,7 @@
 
 <div *ngFor="let colorName of [THEME_COLORS.VITAMUI_PRIMARY, THEME_COLORS.VITAMUI_SECONDARY]" class="col-12 d-flex mt-4">
   <div class="label-color p-0 col-4">
-    <label>{{COLOR_NAME[colorName]}}</label>
+    <label class="text normal light">{{COLOR_NAME[colorName]}}</label>
     {{theme.colors[colorName]}}
   </div>
   <div class="pl-2">
@@ -55,7 +55,7 @@
   
 <div class="col-12 d-flex mt-4">
   <div class="label-color p-0 col-4">
-    <label i18n="@@labelColorTertiary">Couleur tertiaire</label>
+    <label class="text normal light">{{'COLOR.TERTIARY' | translate}}</label>
     {{theme.colors[THEME_COLORS.VITAMUI_TERTIARY]}}
   </div>
   <div class="pl-2">
@@ -65,7 +65,7 @@
 
 <div class="col-12 d-flex mt-4">
   <div class="label-color p-0 col-4">
-    <label i18n="@@labelColorHeaderFooter">Couleur header/footer</label>
+    <label class="text normal light">{{'COLOR.HEADER_FOOTER' | translate}}</label>
     {{theme.colors[THEME_COLORS.VITAMUI_HEADER_FOOTER]}}
   </div>
   <div class="pl-2">
@@ -75,7 +75,7 @@
 
 <div class="col-12 d-flex mt-4">
   <div class="label-color p-0 col-4">
-    <label i18n="@@labelColorBackground">Couleur background</label>
+    <label class="text normal light">{{'COLOR.BACKGROUND' | translate}}</label>
     {{theme.colors[THEME_COLORS.VITAMUI_BACKGROUND]}}
   </div>
   <div class="pl-2">
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity-tab.component.scss b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity-tab.component.scss
index 6a2f0e7ce746a568633bee653979cbb91113274f..d5c065e775fec9e3ef95ae1997251b86573e6fb4 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity-tab.component.scss
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity-tab.component.scss
@@ -7,11 +7,6 @@
     flex-direction: column;
   }
 
-  label {
-    font-size: 13px;
-    color: $greyish-two;
-    font-weight: normal;
-  }
 
   label+* {
     text-overflow: ellipsis;
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity-update/graphic-identity-update.component.html b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity-update/graphic-identity-update.component.html
index ee7ca96b81c1c166304eb9c096fb53f9a21c14bb..f25682f0361b67aa7abb3506bf6828dd3c5b0da1 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity-update/graphic-identity-update.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity-update/graphic-identity-update.component.html
@@ -3,7 +3,7 @@
     (formToSend)="customForm = $event.form; logos = $event.logos">
   </app-graphic-identity>
   <div class="d-flex">
-    <button type="button" class="btn primary mr-4 text uppercase" [disabled]="disabled"
+    <button type="button" class="btn primary mr-4 uppercase" [disabled]="disabled"
       (click)="updateGraphicIdentity()">{{'GRAPHIC_IDENTITY.SUBMIT' | translate}}</button>
     <button type="button" class="btn cancel link uppercase" (click)="onCancel()">{{'COMMON.CANCEL' | translate}}</button>
   </div>
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity/graphic-identity-form/graphic-identity-form.component.html b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity/graphic-identity-form/graphic-identity-form.component.html
index b804d16abfcc0bc650f798b9f1a4074c90ce01cb..f0d71fad810373f62478cc3e3702792821595c6e 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity/graphic-identity-form/graphic-identity-form.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity/graphic-identity-form/graphic-identity-form.component.html
@@ -14,7 +14,7 @@
 
         <div class="d-flex">
           <div>
-            <label class="text medium bold">{{'GRAPHIC_IDENTITY.LOGO_PORTAL_TITLE' | translate}}</label>
+            <label class="text normal bold">{{'GRAPHIC_IDENTITY.LOGO_PORTAL_TITLE' | translate}}</label>
             <vitamui-common-drag-drop-file
               class="color-background image-area-big"
               [disabled]="disabled"
@@ -28,7 +28,7 @@
         </div>
         <div class="d-flex">
           <div class="mr-4">
-            <label class="text medium bold">{{'GRAPHIC_IDENTITY.LOGO_HEADER_TITLE' | translate}}</label>
+            <label class="text normal bold">{{'GRAPHIC_IDENTITY.LOGO_HEADER_TITLE' | translate}}</label>
             <vitamui-common-drag-drop-file
               class="color-header-footer image-area-small"
               [disabled]="disabled"
@@ -40,7 +40,7 @@
               [messPj]="'GRAPHIC_IDENTITY.LOGO_ATTACH' | translate"></vitamui-common-drag-drop-file>
           </div>
           <div>
-            <label class="text medium bold">{{'GRAPHIC_IDENTITY.LOGO_FOOTER_TITLE' | translate}}</label>
+            <label class="text normal bold">{{'GRAPHIC_IDENTITY.LOGO_FOOTER_TITLE' | translate}}</label>
             <vitamui-common-drag-drop-file
               class="color-header-footer image-area-small"
               [disabled]="disabled"
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/homepage-message-tab/homepage-message-tab.component.html b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/homepage-message-tab/homepage-message-tab.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..a367e94b87578367cfa9ccadc2a77ad9504e7618
--- /dev/null
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/homepage-message-tab/homepage-message-tab.component.html
@@ -0,0 +1,17 @@
+<div class="d-flex">
+    <button class="btn primary mb-20" (click)="openUpdateHomepageMessage()" [disabled]="readonly">
+      <div>
+        {{'COMMON.UPDATE' | translate}}
+      </div>
+    </button>
+</div>
+
+<div class="col-12 d-flex flex-column mt-4">
+  <label class="text normal light">{{'HOMEPAGE_MESSAGE.PORTAL_TITLE' | translate}}</label>
+  <span>{{portalTitle}}</span>
+</div>
+
+<div class="col-12 d-flex flex-column mt-4">
+  <label class="text normal light">{{'HOMEPAGE_MESSAGE.PORTAL_MESSAGE' | translate}}</label>
+  {{portalMessage}}
+</div>
\ No newline at end of file
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/homepage-message-tab/homepage-message-tab.component.scss b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/homepage-message-tab/homepage-message-tab.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/homepage-message-tab/homepage-message-tab.component.ts b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/homepage-message-tab/homepage-message-tab.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7d7f84da4a8dd75cd95b79b3d6546ae48a97083e
--- /dev/null
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/homepage-message-tab/homepage-message-tab.component.ts
@@ -0,0 +1,61 @@
+import {Component, Input, OnDestroy, OnInit} from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { Subject } from 'rxjs';
+import { Customer, ThemeService } from 'ui-frontend-common';
+import { HomepageMessageUpdateComponent } from './homepage-message-update/homepage-message-update.component';
+
+@Component({
+  selector: 'app-homepage-message-tab',
+  templateUrl: './homepage-message-tab.component.html',
+  styleUrls: ['./homepage-message-tab.component.scss']
+})
+export class HomepageMessageTabComponent implements OnInit, OnDestroy {
+
+  @Input()
+  set customer(customer: Customer) {
+    this._customer = customer;
+    this.resetTab(this.customer);
+  }
+  get customer(): Customer { return this._customer; }
+  // tslint:disable-next-line:variable-name
+  private _customer: Customer;
+
+  @Input()
+  set readOnly(readOnly: boolean) {
+    this._readonly = readOnly;
+  }
+  get readonly(): boolean { return this._readonly; }
+
+  // tslint:disable-next-line:variable-name
+  private _readonly: boolean;
+  private destroy = new Subject();
+
+  public portalTitle: string;
+  public portalMessage: string;
+
+  constructor(private dialog: MatDialog,
+              private themeService: ThemeService ) {
+  }
+  ngOnDestroy(): void {
+    this.destroy.next();
+  }
+
+  ngOnInit() {
+  }
+
+  private resetTab(customer: Customer): void {
+    this.portalMessage = customer && this.customer.portalMessage ? this.customer.portalMessage
+    : this.themeService.defaultTheme.portalMessage;
+    this.portalTitle =  customer && this.customer.portalTitle ? this.customer.portalTitle
+    : this.themeService.defaultTheme.portalTitle;
+  }
+
+  openUpdateHomepageMessage() {
+   const dialogRef = this.dialog.open(HomepageMessageUpdateComponent, {
+      panelClass: 'vitamui-modal',
+      disableClose: true,
+      data: { customer: this.customer }
+    });
+   dialogRef.afterClosed().subscribe();
+  }
+}
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/homepage-message-tab/homepage-message-update/homepage-message-update.component.html b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/homepage-message-tab/homepage-message-update/homepage-message-update.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..277219133d518632a8bb926f368ba9e0cddcf876
--- /dev/null
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/homepage-message-tab/homepage-message-update/homepage-message-update.component.html
@@ -0,0 +1,36 @@
+<div class="content">
+
+  <form [formGroup]="homepageMessageForm" id="homepageMessageForm">
+
+    <div class="d-flex justify-content-between">
+      <div class="pl-4 d-flex flex-column">
+        <div class="text large bold mb-4">
+          {{'HOMEPAGE_MESSAGE.UPDATE_TITLE' | translate}}
+        </div>
+
+        <vitamui-common-input
+        class="pb-2"
+        formControlName="portalTitle"
+        [placeholder]="'HOMEPAGE_MESSAGE.PORTAL_TITLE' | translate"
+        >
+        </vitamui-common-input>
+
+          <vitamui-common-textarea
+            class="pb-2"
+            formControlName="portalMessage"
+            [placeholder]="'HOMEPAGE_MESSAGE.PORTAL_MESSAGE' | translate"
+            [maxlength]="500"></vitamui-common-textarea>
+          <small class="d-flex justify-content-end ">{{homepageMessageForm.get('portalMessage')?.value?.length}} {{'HOMEPAGE_MESSAGE.PORTAL_MESSAGE_LENGTH' | translate}}</small>
+       
+      </div>
+    </div>
+    <div class="d-flex mt-4">
+      <button type="submit" class="btn primary uppercase mr-4" [disabled]="!homepageMessageForm.valid">
+        {{'COMMON.APPLY_UPDATE' | translate}}
+      </button>
+      <button type="button" class="btn cancel link uppercase" (click)="onCancel()">
+        {{'COMMON.CANCEL' | translate}}
+      </button>
+    </div>
+  </form>
+</div>
\ No newline at end of file
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/homepage-message-tab/homepage-message-update/homepage-message-update.component.scss b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/homepage-message-tab/homepage-message-update/homepage-message-update.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ca7953929d1083213c7eed036cfdf242cc870f9f
--- /dev/null
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/homepage-message-tab/homepage-message-update/homepage-message-update.component.scss
@@ -0,0 +1,5 @@
+:host {
+    .content {
+        padding: 30px 60px 60px 60px;
+    }
+}
\ No newline at end of file
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/homepage-message-tab/homepage-message-update/homepage-message-update.component.ts b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/homepage-message-tab/homepage-message-update/homepage-message-update.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..906eecb55b2952777ca80396af94cb0e45b56c40
--- /dev/null
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/homepage-message-tab/homepage-message-update/homepage-message-update.component.ts
@@ -0,0 +1,46 @@
+import { Component, Inject, Input, OnDestroy, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { Subscription } from 'rxjs';
+import { ConfirmDialogService, Customer } from 'ui-frontend-common';
+
+@Component({
+  selector: 'app-homepage-message-update',
+  templateUrl: './homepage-message-update.component.html',
+  styleUrls: ['./homepage-message-update.component.scss']
+})
+
+export class HomepageMessageUpdateComponent implements OnInit, OnDestroy {
+
+  @Input()
+  public homepageMessageForm: FormGroup;
+
+  private keyPressSubscription: Subscription;
+
+  constructor(
+    public dialogRef: MatDialogRef<HomepageMessageUpdateComponent>,
+    private formBuilder: FormBuilder,
+    @Inject(MAT_DIALOG_DATA) public data: { customer: Customer},
+    private confirmDialogService: ConfirmDialogService
+  ) {}
+
+  ngOnDestroy(): void {
+    this.keyPressSubscription.unsubscribe();
+  }
+
+  ngOnInit() {
+    this.homepageMessageForm = this.formBuilder.group({
+      portalTitle: ['', [Validators.required]],
+      portalMessage: ['', [Validators.required, Validators.maxLength(500)]],
+    });
+    this.keyPressSubscription = this.confirmDialogService.listenToEscapeKeyPress(this.dialogRef).subscribe(() => this.onCancel());
+  }
+
+  onCancel() {
+    if (this.homepageMessageForm.dirty) {
+      this.confirmDialogService.confirmBeforeClosing(this.dialogRef);
+    } else {
+      this.dialogRef.close();
+    }
+  }
+}