diff --git a/angular.json b/angular.json
index 1cd53b0..6a2e7da 100644
--- a/angular.json
+++ b/angular.json
@@ -24,6 +24,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.css"
             ],
             "scripts": []
@@ -88,6 +89,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.css"
             ],
             "scripts": []
@@ -119,6 +121,7 @@
           }
         }
       }
-    }},
+    }
+  },
   "defaultProject": "EPAClient"
-}
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 06de7ca..b03cc8e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -205,6 +205,22 @@
       "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-9.1.9.tgz",
       "integrity": "sha512-qWVi0TxmU6HeXAgEsfpQvFFygh+a0kH2kGe6bWij4XvG6dWfV3xZjlaFwSIYGk+yK4yL0+9+PAXH+ENfxNw+Cw=="
     },
+    "@angular/cdk": {
+      "version": "9.2.4",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-9.2.4.tgz",
+      "integrity": "sha512-iw2+qHMXHYVC6K/fttHeNHIieSKiTEodVutZoOEcBu9rmRTGbLB26V/CRsfIRmA1RBk+uFYWc6UQZnMC3RdnJQ==",
+      "requires": {
+        "parse5": "^5.0.0"
+      },
+      "dependencies": {
+        "parse5": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
+          "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
+          "optional": true
+        }
+      }
+    },
     "@angular/cli": {
       "version": "9.1.7",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-9.1.7.tgz",
@@ -464,6 +480,11 @@
       "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-9.1.9.tgz",
       "integrity": "sha512-r675yImnb/0pY7K5W3V2ITa7YETu1I2AS+bRfII6UQ6gthyeFFOHb5noa7YneC2yqQiM6E4DQmF5ig3daPuFNg=="
     },
+    "@angular/material": {
+      "version": "9.2.4",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-9.2.4.tgz",
+      "integrity": "sha512-LkoTXE6B0slvMhvfZDdPWaz4yaYLkaAp5VSPunI9pxGsPxzqEV9e210wC1/sjG/76Nk8Ep7/2z9XKac8Q9bMwA=="
+    },
     "@angular/platform-browser": {
       "version": "9.1.9",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-9.1.9.tgz",
diff --git a/package.json b/package.json
index 31d485f..3a2116c 100644
--- a/package.json
+++ b/package.json
@@ -12,10 +12,12 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "~9.1.9",
+    "@angular/cdk": "^9.2.4",
     "@angular/common": "~9.1.9",
     "@angular/compiler": "~9.1.9",
     "@angular/core": "~9.1.9",
     "@angular/forms": "~9.1.9",
+    "@angular/material": "^9.2.4",
     "@angular/platform-browser": "~9.1.9",
     "@angular/platform-browser-dynamic": "~9.1.9",
     "@angular/router": "~9.1.9",
diff --git a/src/app/angular-material/angular-material.module.ts b/src/app/angular-material/angular-material.module.ts
new file mode 100644
index 0000000..77d6c37
--- /dev/null
+++ b/src/app/angular-material/angular-material.module.ts
@@ -0,0 +1,11 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+/*import {
+} from "@angular/material";//*/
+
+
+@NgModule({
+  imports : []
+})
+export class MaterialModule {}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 82c6cc7..42a51ae 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -5,12 +5,13 @@ import { KeycloakAngularModule, KeycloakService } from 'keycloak-angular';
 
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
-
+import { MaterialModule } from "./angular-material/angular-material.module";
 
 import { HomeComponent, HomeAssistanteComponent, HomeCollaborateurComponent,
    HomeCommercialComponent, HomeRHComponent } from './home';
 
 import { environment } from '../environments/environment';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 let keycloakService: KeycloakService = new KeycloakService();
 
@@ -22,7 +23,8 @@ let keycloakService: KeycloakService = new KeycloakService();
   imports: [
     BrowserModule,
     KeycloakAngularModule,
-    AppRoutingModule
+    AppRoutingModule,
+    BrowserAnimationsModule
   ],
   providers: [
     {
diff --git a/src/index.html b/src/index.html
index 5013adc..6297d38 100644
--- a/src/index.html
+++ b/src/index.html
@@ -6,6 +6,8 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body>
   <app-root></app-root>
diff --git a/src/styles.css b/src/styles.css
index 90d4ee0..7e7239a 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1 +1,4 @@
 /* You can add global styles to this file, and also import other style files */
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }