diff --git a/src/app/demandes-delegation/demandes-delegation.component.html b/src/app/demandes-delegation/demandes-delegation.component.html
index 0c6b256..b432884 100644
--- a/src/app/demandes-delegation/demandes-delegation.component.html
+++ b/src/app/demandes-delegation/demandes-delegation.component.html
@@ -1,2 +1,4 @@
 <app-nav-menu></app-nav-menu>
 <h1>Liste des demandes de délégations</h1>
+
+<app-demande-delegation *ngFor="let demandeDelegation of demandesDelegation" [demandeDelegation]="demandeDelegation"></app-demande-delegation>
\ No newline at end of file
diff --git a/src/app/demandes-delegation/demandes-delegation.component.ts b/src/app/demandes-delegation/demandes-delegation.component.ts
index b3fff19..e260c2a 100644
--- a/src/app/demandes-delegation/demandes-delegation.component.ts
+++ b/src/app/demandes-delegation/demandes-delegation.component.ts
@@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import { CollaborateurDTO, DemandeDelegationDTO, DemandesDelegationService } from '@shared/api-swagger';
+import { cles } from '@shared/utils/cles';
+import { Subscription } from 'rxjs';
 
 /**
     */
@@ -8,8 +11,38 @@ import { Component, OnInit } from '@angular/core';
 })
 export class DemandesDelegationComponent implements OnInit {
 
-  constructor() {}
+
+  idCollaborateurConnecte: string = "";
+
+  chargement: boolean = true;
+  
+  demandesDelegation: DemandeDelegationDTO[] = [];
+  
+  demandeDelegationSubscription: Subscription;
+  constructor(private demandeDelegationService: DemandesDelegationService) {}
+
 
   ngOnInit() {
+    this.recupererIdCollaborateurConencte();
+  }
+
+  recupererIdCollaborateurConencte() {
+    if(sessionStorage.getItem(cles.sessionKeyConnectee) == undefined) {
+      setTimeout( () => this.recupererIdCollaborateurConencte(), 1000);
+    }
+    else {
+      const collaborateurConnecte: CollaborateurDTO = JSON.parse(sessionStorage.getItem(cles.sessionKeyConnectee)); 
+      this.idCollaborateurConnecte = collaborateurConnecte.id;
+      this.updateListeDemandesDelegation();
+    }
+  }
+
+  updateListeDemandesDelegation() {
+    this.chargement = false;
+    this.demandeDelegationSubscription = this.demandeDelegationService.getDemandesDelegationReferent(this.idCollaborateurConnecte).subscribe(
+      demandeDelegations => this.demandesDelegation = demandeDelegations,
+      err => console.log(err)
+    );
+
   }
 }
diff --git a/src/app/demandes-delegation/demandes-delegation.module.ts b/src/app/demandes-delegation/demandes-delegation.module.ts
index 6b5e489..4431f3e 100644
--- a/src/app/demandes-delegation/demandes-delegation.module.ts
+++ b/src/app/demandes-delegation/demandes-delegation.module.ts
@@ -22,8 +22,9 @@ import { DemandesDelegationRoutingModule } from './demandes-delegation.routing.m
     MaterialModule,
     NavMenuModule,
     DemandesDelegationRoutingModule,
-    RouterModule
-
+    RouterModule,
+    FormsModule,
+    CommonModule
   ],
 })
 export class DemandesDelegationModule {}
diff --git a/src/app/demandes-delegation/demandes-delegation.routing.module.ts b/src/app/demandes-delegation/demandes-delegation.routing.module.ts
index 41b0340..091e3ec 100644
--- a/src/app/demandes-delegation/demandes-delegation.routing.module.ts
+++ b/src/app/demandes-delegation/demandes-delegation.routing.module.ts
@@ -3,11 +3,9 @@ import { Routes, RouterModule } from '@angular/router';
 
 
 import { DemandesDelegationComponent } from "./demandes-delegation.component";
-import { DemandeDelegationComponent } from "./details-demande-delegation/demande-delegation.component";
 
 import { AuthGuard } from '@shared/auth/auth.guard';
 
-import { paths_demandes_delegation } from "@shared/utils/paths";
 
 /**
   * Routes du module demandes delegation
@@ -18,11 +16,6 @@ const routes: Routes = [
     component: DemandesDelegationComponent,
     pathMatch: 'full',
     canActivate: [AuthGuard]
-  },
-  {
-    path: paths_demandes_delegation.get,
-    component: DemandeDelegationComponent,
-    canActivate: [AuthGuard]
   }
 ];
 
diff --git a/src/app/demandes-delegation/details-demande-delegation/demande-delegation.component.html b/src/app/demandes-delegation/details-demande-delegation/demande-delegation.component.html
index 30c4a86..fc93be2 100644
--- a/src/app/demandes-delegation/details-demande-delegation/demande-delegation.component.html
+++ b/src/app/demandes-delegation/details-demande-delegation/demande-delegation.component.html
@@ -1,2 +1,15 @@
-<app-nav-menu></app-nav-menu>
-<h1> Demande delegation </h1>
+<mat-card>
+    <mat-card-header>
+        <mat-card-title>{{demandeDelegation.ep.collaborateur.nom}} {{demandeDelegation.ep.collaborateur.prenom}}</mat-card-title>
+    </mat-card-header>
+    <mat-card-content>
+        <p>Demande effectuée le {{ demandeDelegation.dateDemande | date: 'dd/MM/yyyy'}} par {{demandeDelegation.ep.referent.nom}} {{demandeDelegation.ep.referent.prenom}} </p>
+        <p *ngIf="demandeDelegation.ep.datePrevisionnelle == undefined"> {{demandeDelegation.ep.type}} en attente d'une date</p>
+        <p *ngIf="demandeDelegation.ep.datePrevisionnelle != undefined"> {{demandeDelegation.ep.type}} prévu le {{demandeDelegation.ep.datePrevisionnelle | date : 'dd/MM/yyyy'}}  </p>
+
+    </mat-card-content>
+    <mat-card-footer>
+        <button mat-raised-button color="primary">Accepter la demande</button>
+        <button mat-raised-button color="warn">Refuser la demande</button>
+    </mat-card-footer>
+</mat-card>
\ No newline at end of file
diff --git a/src/app/demandes-delegation/details-demande-delegation/demande-delegation.component.ts b/src/app/demandes-delegation/details-demande-delegation/demande-delegation.component.ts
index c62f626..1e6df7d 100644
--- a/src/app/demandes-delegation/details-demande-delegation/demande-delegation.component.ts
+++ b/src/app/demandes-delegation/details-demande-delegation/demande-delegation.component.ts
@@ -1,4 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { DemandeDelegationDTO } from '@shared/api-swagger';
+
 
 /**
     */
@@ -8,6 +10,9 @@ import { Component, OnInit } from '@angular/core';
 })
 export class DemandeDelegationComponent implements OnInit {
 
+  @Input() demandeDelegation: DemandeDelegationDTO;
+  @Output() eventEmitter: EventEmitter<any> = new EventEmitter<any>();
+
   constructor() {}
 
   ngOnInit() {