diff --git a/src/app/components/periode-essai/periode-essai.component.html b/src/app/components/periode-essai/periode-essai.component.html
index 2b0f88b..f4e9697 100644
--- a/src/app/components/periode-essai/periode-essai.component.html
+++ b/src/app/components/periode-essai/periode-essai.component.html
@@ -1,23 +1,35 @@
 <div xmlns="">
 
-  <h2 class=mb-4>Périodes d'essai</h2>
+  <h2 *ngIf="isOld" class=mb-4>Périodes d'essai Passées</h2>
+  <h2 *ngIf="!isOld" class=mb-4>Périodes d'essai En cours</h2>
 
   <div style="display: flex">
     <p style="margin: 10px 0 10px 0">Pour ajouter une nouvelle période d'essai, cliquez ici : </p>
     <button routerLink="/periodeessais/add">Ajouter</button>
   </div>
+  <br/><br/>
+
+  <div style="display: flex">
+    <p *ngIf="!isOld" style="margin: 10px 0 10px 0">Pour voir les périodes d'essai passées, cliquez ici : </p>
+    <p *ngIf="isOld" style="margin: 10px 0 10px 0">Pour voir les périodes d'essai en cours, cliquez ici :</p>
+    <button (click)="onIsOldChange()">Changer</button>
+  </div>
 
   <div class="mb-5 col-12" style="overflow-x:auto;">
     <table class="table">
       <thead>
       <tr>
         <th scope="col">Collaborateur</th>
+        <th scope="col">Date de début</th>
+        <th scope="col">Date de fin prévue</th>
         <th scope="col">Issue</th>
       </tr>
       </thead>
       <tbody>
       <tr *ngFor="let periodeEssai of periodeEssais">
         <th scope="row">{{getCollaborateurById(periodeEssai.collaborateurId).name}} {{getCollaborateurById(periodeEssai.collaborateurId).firstName}}</th>
+        <td> {{getSplitDate(periodeEssai.startingDate.toString())}}</td>
+        <th> {{getSplitDate(periodeEssai.plannedEndingDate.toString())}}</th>
         <td> {{periodeEssai.issue}}</td>
         <td><a routerLink="{{periodeEssai.id}}"> Modifier </a></td>
       </tr>
diff --git a/src/app/components/periode-essai/periode-essai.component.ts b/src/app/components/periode-essai/periode-essai.component.ts
index 2d2d565..3fec2b8 100644
--- a/src/app/components/periode-essai/periode-essai.component.ts
+++ b/src/app/components/periode-essai/periode-essai.component.ts
@@ -15,6 +15,11 @@ export class PeriodeEssaiComponent implements OnInit {
   collaborateurs: Collaborateur[] = [];
   periodeEssais: PeriodeEssai[] = [];
 
+  periodeEssaisEnCours: PeriodeEssai[] = [];
+  periodeEssaisPassees: PeriodeEssai[] = [];
+
+  isOld: boolean = false;
+
   constructor(
     private http: HttpClient,
     private collaborateurService: CollaborateurService,
@@ -25,6 +30,21 @@ export class PeriodeEssaiComponent implements OnInit {
   ngOnInit(): void {
     this.getCollaborateurs();
     this.getPeriodeEssais();
+
+  }
+
+  onIsOldChange() {
+    this.isOld = !this.isOld;
+    this.initPeriodeEssai();
+  }
+
+  initPeriodeEssai(){
+    if (this.isOld) {
+      this.periodeEssais = this.periodeEssaisPassees;
+    }
+    else{
+      this.periodeEssais = this.periodeEssaisEnCours;
+    }
   }
 
   getCollaborateurs(): void {
@@ -46,7 +66,25 @@ export class PeriodeEssaiComponent implements OnInit {
 
   getPeriodeEssais() {
     this.periodeEssaiService.getPeriodeEssais()
-      .subscribe(periodeEssais => this.periodeEssais = periodeEssais);
+      .subscribe(periodeEssais => {
+        periodeEssais.forEach(pe => {
+          if (new Date(pe.plannedEndingDate).getTime() > new Date().getTime()) {
+            this.periodeEssaisEnCours.push(pe);
+          } else {
+            this.periodeEssaisPassees.push(pe);
+          }
+        })
+        this.periodeEssaisEnCours.sort((b, a) => new Date(b.plannedEndingDate).getTime() - new Date(a.plannedEndingDate).getTime());
+        this.periodeEssaisPassees.sort((a, b) => new Date(b.plannedEndingDate).getTime() - new Date(a.plannedEndingDate).getTime());
+        this.initPeriodeEssai();
+      });
+  }
+
+  getSplitDate(date: string | undefined): string {
+    if (date == undefined) {
+      return "";
+    }
+    return date.split('T')[0];
   }
 
 }