diff --git a/src/app/angular-material/angular-material.module.ts b/src/app/angular-material/angular-material.module.ts
index e4619ef..78fbeda 100644
--- a/src/app/angular-material/angular-material.module.ts
+++ b/src/app/angular-material/angular-material.module.ts
@@ -5,14 +5,25 @@ import { CommonModule } from "@angular/common";
 } from "@angular/material";//*/
 import {MatCardModule} from '@angular/material/card';
 import { MatButtonModule } from '@angular/material/button';
-import {MatMenuModule} from '@angular/material/menu';
+import {MatInputModule} from '@angular/material/input';
 import {MatIconModule} from '@angular/material/icon';
+import {MatMenuModule} from '@angular/material/menu';
+import {MatPaginatorModule} from '@angular/material/paginator';
 import {MatTableModule} from '@angular/material/table';
+import {MatSortModule} from '@angular/material/sort';
 
 @NgModule({
+  imports : [MatCardModule,
+    MatButtonModule, MatMenuModule,
+    MatIconModule,MatPaginatorModule,
+    MatSortModule, MatTableModule,
+    MatInputModule
+  ],
   exports : [MatCardModule,
     MatButtonModule, MatMenuModule,
-    MatIconModule, MatTableModule
+    MatIconModule,MatPaginatorModule,
+    MatSortModule, MatTableModule,
+    MatInputModule
   ]
 })
 export class MaterialModule {}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 6ea0446..462e728 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -2,7 +2,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgModule, DoBootstrap } from '@angular/core';
 import { HttpClientModule } from '@angular/common/http';
-
+import { FormsModule } from '@angular/forms';
 import { KeycloakAngularModule, KeycloakService } from 'keycloak-angular';
 
 import { AppComponent } from './app.component';
@@ -38,7 +38,8 @@ let keycloakService: KeycloakService = new KeycloakService();
     AppRoutingModule,
     BrowserAnimationsModule,
     MaterialModule,
-    HttpClientModule
+    HttpClientModule,
+    FormsModule
   ],
   providers: [
     {
diff --git a/src/app/home/home-assistante/home-assistante.component.css b/src/app/home/home-assistante/home-assistante.component.css
new file mode 100644
index 0000000..bbd5b89
--- /dev/null
+++ b/src/app/home/home-assistante/home-assistante.component.css
@@ -0,0 +1,100 @@
+mat-table {
+  width: 85%;
+  margin-left: 5%;
+  margin-right: 5%;
+}
+
+mat-paginator {
+  margin-top: 1%;
+  margin-right: 10%;
+}
+
+mat-form-field {
+  width: auto;
+  margin-left: 5%;
+}
+/*
+table{
+ width: 100%;
+}
+
+.mat-column-username {
+  word-wrap: break-word !important;
+  white-space: unset !important;
+  flex: 0 0 28% !important;
+  width: 28% !important;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+
+  word-break: break-word;
+
+  -ms-hyphens: auto;
+  -moz-hyphens: auto;
+  -webkit-hyphens: auto;
+  hyphens: auto;
+}
+
+.mat-column-emailid {
+  word-wrap: break-word !important;
+  white-space: unset !important;
+  flex: 0 0 25% !important;
+  width: 25% !important;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+
+  word-break: break-word;
+
+  -ms-hyphens: auto;
+  -moz-hyphens: auto;
+  -webkit-hyphens: auto;
+  hyphens: auto;
+}
+
+.mat-column-contactno {
+  word-wrap: break-word !important;
+  white-space: unset !important;
+  flex: 0 0 17% !important;
+  width: 17% !important;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+
+  word-break: break-word;
+
+  -ms-hyphens: auto;
+  -moz-hyphens: auto;
+  -webkit-hyphens: auto;
+  hyphens: auto;
+}
+
+.mat-column-userimage {
+  word-wrap: break-word !important;
+  white-space: unset !important;
+  flex: 0 0 8% !important;
+  width: 8% !important;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+
+  word-break: break-word;
+
+  -ms-hyphens: auto;
+  -moz-hyphens: auto;
+  -webkit-hyphens: auto;
+  hyphens: auto;
+}
+
+.mat-column-userActivity {
+  word-wrap: break-word !important;
+  white-space: unset !important;
+  flex: 0 0 10% !important;
+  width: 10% !important;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+
+  word-break: break-word;
+
+  -ms-hyphens: auto;
+  -moz-hyphens: auto;
+  -webkit-hyphens: auto;
+  hyphens: auto;
+}
+*/
diff --git a/src/app/home/home-assistante/home-assistante.component.html b/src/app/home/home-assistante/home-assistante.component.html
index 63ce996..a5b5ede 100644
--- a/src/app/home/home-assistante/home-assistante.component.html
+++ b/src/app/home/home-assistante/home-assistante.component.html
@@ -1 +1,52 @@
-<h1> Page assistante </h1>
+<h1> Bienvenu.e</h1>
+
+<h1>AU DESSUS</h1>
+
+
+<mat-form-field>
+  <mat-label>Recherche un collaborateur</mat-label>
+  <input matInput type="text" [(ngModel)]="search" (keyup)="applyFilter($event.target.value)">
+  <mat-button *ngIf="search" matSuffix mat-icon-button aria-label="Clear" (click)="search=''">
+    <mat-icon>close</mat-icon>
+  </mat-button>
+</mat-form-field>
+
+
+<mat-table [dataSource]="this.dataSource" matSort>
+
+  <ng-container matColumnDef="agence">
+    <mat-header-cell *matHeaderCellDef mat-sort-header> Agence </mat-header-cell>
+    <mat-cell  *matCellDef="let row"> {{row.agence}} </mat-cell>
+  </ng-container>
+
+  <ng-container  matColumnDef="info">
+    <mat-header-cell *matHeaderCellDef mat-sort-header> Collaborateur </mat-header-cell>
+    <mat-cell  *matCellDef="let row"> {{row.info}} </mat-cell>
+  </ng-container>
+
+  <ng-container matColumnDef="type">
+    <mat-header-cell *matHeaderCellDef mat-sort-header> Type </mat-header-cell>
+    <mat-cell  *matCellDef="let row"> {{row.type}} </mat-cell>
+  </ng-container>
+
+  <ng-container matColumnDef="datemail">
+    <mat-header-cell *matHeaderCellDef mat-sort-header> Date envoie mail </mat-header-cell>
+    <mat-cell  *matCellDef="let row"> {{row.datemail}} </mat-cell>
+  </ng-container>
+
+  <ng-container matColumnDef="dateentretien">
+    <mat-header-cell *matHeaderCellDef mat-sort-header> Date entretient </mat-header-cell>
+    <mat-cell  *matCellDef="let row"> {{row.dateentretien}} </mat-cell>
+  </ng-container>
+
+  <ng-container matColumnDef="etat">
+    <mat-header-cell *matHeaderCellDef mat-sort-header> Etat </mat-header-cell>
+    <mat-cell *matCellDef="let row"> {{row.etat}} </mat-cell>
+  </ng-container>
+
+  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
+</mat-table>
+<mat-paginator #paginatorEP [pageSizeOptions]="[1, 5, 10, 25, 50, 100]"> </mat-paginator>
+
+<h1>EN DESSOUS</h1>
diff --git a/src/app/home/home-assistante/home-assistante.component.ts b/src/app/home/home-assistante/home-assistante.component.ts
index 1f80c4a..c7db6c1 100644
--- a/src/app/home/home-assistante/home-assistante.component.ts
+++ b/src/app/home/home-assistante/home-assistante.component.ts
@@ -1,23 +1,179 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, ViewChild, ViewChildren, AfterViewInit } from '@angular/core';
 
+import { KeycloakService } from 'keycloak-angular';
+import { Observable, Subscription } from 'rxjs';
+
+import {MatTableDataSource} from '@angular/material/table';
+import {MatPaginator} from '@angular/material/paginator';
+import {MatSort} from '@angular/material/sort';
+
+import { ServiceCollaborateur, ServiceEP } from "../../service";
+import { CollaborateurModel } from "../../modeles/modele-collaborateur";
+import { EpModel } from "../../modeles/modele-ep";
+import { DisplayEP } from "../../utils/displayEP";
 
 @Component({
   selector : 'home-assistante',
-  templateUrl : 'home-assistante.component.html'
+  templateUrl : 'home-assistante.component.html',
+  styleUrls : [ "./home-assistante.component.css"]
 })
-export class HomeAssistanteComponent implements OnInit {
-
+export class HomeAssistanteComponent implements OnInit, AfterViewInit {
 
-  constructor() {
+  epDisponibles : DisplayEP[];
+  epFiltre : DisplayEP[];
+  private epDisponiblesSubscription : Subscription;
+  displayedColumns: string[] = ["agence", "info", "datemail", "dateentretien", "etat", "type"];
+  dataSource : MatTableDataSource<DisplayEP>;
+  search = "";
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatSort) sort: MatSort;
 
+  constructor(public keycloakService : KeycloakService, private serviceCollaborateur : ServiceCollaborateur,
+                                        private serviceEP : ServiceEP) {
   }
 
+  ngAfterViewInit() {
+    console.log("VIEWINITED");
+  }
 
+  initDisplay(eps) {
+    console.log("INITDISPLAY");
+    this.epDisponibles = []
+    let epDisplay : DisplayEP;
+    for(let ep of eps) {
+      epDisplay = new DisplayEP();
+      epDisplay.id = ep.id;
+      epDisplay.agence = ep.collaborateur.agence;
+      epDisplay.info = ep.collaborateur.nom+" "+ep.collaborateur.prenom;
+      epDisplay.dateentretien = ep.dateEntretien;
+      epDisplay.datemail = ep.dateDisponibilite;
+      epDisplay.etat = ep.etat;
+      epDisplay.type = ep.type;
+      this.epDisponibles.push(epDisplay);
+    }
+  }
 
-
+  refreshDataSource() {
+    console.log("REFRESH");
+    this.epFiltre =this.epDisponibles;
+    this.dataSource = new MatTableDataSource(this.epFiltre);
+    console.log(this.dataSource.paginator);
+    this.dataSource.paginator = this.paginator;
+    console.log(this.dataSource.paginator);
+    console.log(this.paginator);
+    this.dataSource.sort = this.sort;
+  }
 
   ngOnInit() {
+    console.log("INIT");
+    this.epDisponiblesSubscription = this.serviceEP.listeEPDisponibles().
+       subscribe(eps => {
+         this.initDisplay(eps);
+         this.refreshDataSource();
+       });
+  }
+
+  applyFilter(filterValue: string) {
+    console.log(filterValue);
+    filterValue = filterValue.trim();
+    filterValue = filterValue.toLowerCase();
+    this.dataSource.filter = filterValue;
   }
 
+  ngOnDestroy() {
+    console.log("DESTROY");
+    if(this.epDisponiblesSubscription != null) {
+      this.epDisponiblesSubscription.unsubscribe();
+    }
+  }
 
 }
+
+  /*private collabListSubscription : Subscription;
+  private collab1Subscription : Subscription;
+  private collab2Subscription : Subscription;
+  private listeCollaborateurs : CollaborateurModel[];
+  private formationSubscription : Subscription;
+  private addFormationSubscription : Subscription;
+
+  private epEnvoieSubscription : Subscription;
+  private epCollaborateurSubscription : Subscription;
+  private epDisponiblesSubscription : Subscription;
+  private epCollaborateurProchain : Subscription;
+
+  //*/
+//********TEST********//
+/*let ep = new EpModel();
+ep.id = 10;
+ep.type ="EPA";
+//ep.dateDisponibilite = new Date(2020,0,5,25,30);
+ep.dateDisponibilite = new Date(2020,0,0,25,30);
+ep.etat = "créer";
+let collaborateur = new CollaborateurModel();
+collaborateur.id = 1;
+collaborateur.nom = "GRETTE";
+collaborateur.prenom = "Yanaël";
+collaborateur.mail = "yanael.grette@apside-groupe.com";
+collaborateur.agence = "Orléans";
+collaborateur.fonction = "Stagiaire";
+
+ep.collaborateur = collaborateur;
+this.epEnvoieSubscription = this.serviceEP.envoieEP(ep, "saisie").
+  subscribe(eps => this.display(eps));
+//this.epCollaborateurProchain = this.serviceEP.prochainEPCollaborateur(3).
+  //subscribe(eps => this.display(eps));
+//this.epCollaborateurSubscription = this.serviceEP.listeEPCollaborateur(1).
+  //subscribe(eps => this.display(eps));
+
+/*
+let formation = new FormationModel();
+formation.intitule = "TestJAVA";
+formation.dateDebut = new Date("10-12-2020");
+formation.dateFin = new Date("10-12-2020");
+formation.statut = "Prévue";
+formation.lieu = "Orléans";
+formation.duree = 5;
+formation.organisme = "Apside";
+formation.nomFormateur = "Patrick";
+console.log(formation.dateDebut);
+this.addFormationSubscription = this.serviceFormation.nouvelleFormation(formation)
+  .subscribe();
+this.formationSubscription = this.serviceFormation.listeFormations()
+  .subscribe(formations=> this.display(formations));
+/*
+this.collabListSubscription = this.serviceCollaborateur.listeCollaborateurs(token).
+  subscribe(collaborateurs => this.test(collaborateurs));
+let params = { mail : "angelique@apside.com"};
+this.collab1Subscription = this.serviceCollaborateur.getCollaborateurByParam(token,params).
+  subscribe(collaborateurs => this.test2(collaborateurs));
+let params2 = { id : 1 };
+this.collab2Subscription = this.serviceCollaborateur.getCollaborateurByParam(token,params2).
+  subscribe(collaborateurs => this.test2(collaborateurs));
+
+  console.log(token);*
+  //*/
+
+
+  /*if(this.collabListSubscription != null) {
+    this.collabListSubscription.unsubscribe();
+  }*/
+  /*
+  if(this.formationSubscription != null) {
+    this.formationSubscription.unsubscribe();
+  }
+  if(this.addFormationSubscription != null) {
+    this.addFormationSubscription.unsubscribe();
+  }
+  if(this.epEnvoieSubscription != null) {
+    this.epEnvoieSubscription.unsubscribe();
+  }
+  if(this.epCollaborateurSubscription != null) {
+    this.epCollaborateurSubscription.unsubscribe();
+  }
+  if(this.epDisponiblesSubscription != null) {
+    this.epDisponiblesSubscription.unsubscribe();
+  }
+  if(this.epCollaborateurProchain != null) {
+    this.epCollaborateurProchain.unsubscribe();
+  }
+  */
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index b5097ef..c2efddb 100644
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@@ -1,20 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 
 import { KeycloakService } from 'keycloak-angular';
-import { Observable, Subscription } from 'rxjs';
-
-import { ServiceCollaborateur, ServiceFormation, ServiceEP } from "../service";
-import { CollaborateurModel } from "../modeles/modele-collaborateur";
-import { FormationModel } from "../modeles/modele-formation";
-import { EpModel } from "../modeles/modele-ep";
-
-
-/*
-import { HomeAssistanteComponent } from './home-assistante/home-assistante.component';
-import { HomeCollaborateurComponent } from './home-collaborateur/home-collaborateur.component';
-import { HomeCommercialComponent } from './home-commercial/home-commercial.component';
-import { HomeRHComponent } from './home-rh/home-rh.component';
-//*/
 
 import { Role } from '../utils/roles';
 
@@ -25,113 +11,10 @@ import { Role } from '../utils/roles';
 export class HomeComponent implements OnInit {
 
   role = Role;
-  /*private collabListSubscription : Subscription;
-  private collab1Subscription : Subscription;
-  private collab2Subscription : Subscription;
-  private listeCollaborateurs : CollaborateurModel[];
-  private formationSubscription : Subscription;
-  private addFormationSubscription : Subscription;
-
-  private epEnvoieSubscription : Subscription;
-  private epCollaborateurSubscription : Subscription;
-  private epDisponiblesSubscription : Subscription;
-  private epCollaborateurProchain : Subscription;
-
-  //*/
-  constructor(public keycloakService : KeycloakService, private serviceCollaborateur : ServiceCollaborateur,
-                private serviceFormation : ServiceFormation, private serviceEP : ServiceEP) {
-
-    //********TEST********//
-    /*let ep = new EpModel();
-    ep.id = 10;
-    ep.type ="EPA";
-    //ep.dateDisponibilite = new Date(2020,0,5,25,30);
-    ep.dateDisponibilite = new Date(2020,0,0,25,30);
-    ep.etat = "créer";
-    let collaborateur = new CollaborateurModel();
-    collaborateur.id = 1;
-    collaborateur.nom = "GRETTE";
-    collaborateur.prenom = "Yanaël";
-    collaborateur.mail = "yanael.grette@apside-groupe.com";
-    collaborateur.agence = "Orléans";
-    collaborateur.fonction = "Stagiaire";
-
-    ep.collaborateur = collaborateur;
-    this.epEnvoieSubscription = this.serviceEP.envoieEP(ep, "saisie").
-      subscribe(eps => this.display(eps));
-    //this.epCollaborateurProchain = this.serviceEP.prochainEPCollaborateur(3).
-      //subscribe(eps => this.display(eps));
-    //this.epCollaborateurSubscription = this.serviceEP.listeEPCollaborateur(1).
-      //subscribe(eps => this.display(eps));
-    //this.epDisponiblesSubscription = this.serviceEP.listeEPDisponibles().
-    //  subscribe(eps => this.display(eps));
-    /*
-    let formation = new FormationModel();
-    formation.intitule = "TestJAVA";
-    formation.dateDebut = new Date("10-12-2020");
-    formation.dateFin = new Date("10-12-2020");
-    formation.statut = "Prévue";
-    formation.lieu = "Orléans";
-    formation.duree = 5;
-    formation.organisme = "Apside";
-    formation.nomFormateur = "Patrick";
-    console.log(formation.dateDebut);
-    this.addFormationSubscription = this.serviceFormation.nouvelleFormation(formation)
-      .subscribe();
-    this.formationSubscription = this.serviceFormation.listeFormations()
-      .subscribe(formations=> this.display(formations));
-    /*
-    this.collabListSubscription = this.serviceCollaborateur.listeCollaborateurs(token).
-      subscribe(collaborateurs => this.test(collaborateurs));
-    let params = { mail : "angelique@apside.com"};
-    this.collab1Subscription = this.serviceCollaborateur.getCollaborateurByParam(token,params).
-      subscribe(collaborateurs => this.test2(collaborateurs));
-    let params2 = { id : 1 };
-    this.collab2Subscription = this.serviceCollaborateur.getCollaborateurByParam(token,params2).
-      subscribe(collaborateurs => this.test2(collaborateurs));
-
-      console.log(token);*
-      //*/
-  }
-
-  display(listes) {
-    for(let l of listes) {
-      console.log(l);
-    }
-  }
-/*
-  test2(collaborateur) {
-    console.log(collaborateur);
+  constructor(public keycloakService : KeycloakService) {
   }
 
-*/
   ngOnInit() {
   }
 
-  ngOnDestroy() {
-    /*if(this.collabListSubscription != null) {
-      this.collabListSubscription.unsubscribe();
-    }*/
-    /*
-    if(this.formationSubscription != null) {
-      this.formationSubscription.unsubscribe();
-    }
-    if(this.addFormationSubscription != null) {
-      this.addFormationSubscription.unsubscribe();
-    }
-    if(this.epEnvoieSubscription != null) {
-      this.epEnvoieSubscription.unsubscribe();
-    }
-    if(this.epCollaborateurSubscription != null) {
-      this.epCollaborateurSubscription.unsubscribe();
-    }
-    if(this.epDisponiblesSubscription != null) {
-      this.epDisponiblesSubscription.unsubscribe();
-    }
-    if(this.epCollaborateurProchain != null) {
-      this.epCollaborateurProchain.unsubscribe();
-    }
-    */
-  }
-
 }
diff --git a/src/app/utils/displayEP.ts b/src/app/utils/displayEP.ts
new file mode 100644
index 0000000..197eee3
--- /dev/null
+++ b/src/app/utils/displayEP.ts
@@ -0,0 +1,9 @@
+export class DisplayEP {
+  id : number;
+  agence : string;
+  info : string;
+  dateentretien : Date;
+  datemail : Date;
+  etat : string;
+  type : string;
+}