diff --git a/src/app/engagements/dialog-engagements.html b/src/app/engagements/dialog-engagements.html
new file mode 100644
index 0000000..053d8bb
--- /dev/null
+++ b/src/app/engagements/dialog-engagements.html
@@ -0,0 +1,30 @@
+<h3>Détails de l'engagement</h3>
+<p> Collaborateur: {{collaborateur.nom}} {{collaborateur.prenom}}</p>
+<p> Référent: {{referent.nom}} {{referent.prenom}}</p>
+<p>EP effectué le {{ ep.datePrevisionnelle | date: 'dd/MM/yyyy' }} </p>
+<p>Action : {{ data.action}}</p>
+<p>Modalité: {{ data.modalite }}</p>
+<p>Date limite: {{ data.dateLimite | date: 'dd/MM/yyyy' }} </p>
+<p>Etat : {{ afficherEtat(data.etatEngagement) }}</p>
+<p *ngIf="data.etatEngagement == etatEngagement.NonRealisable"> Raison non réalisable : {{data.raisonNonRealisable}}</p>
+<ng-container *ngIf="data.etatEngagement == etatEngagement.EnAttente">
+    <button mat-raised-button (click)="repondre()">Répondre à l'engagement</button>
+    <ng-container *ngIf="donnerReponse">
+        <mat-slide-toggle [(ngModel)]="engagementRespecte">
+            Engagement respecté
+        </mat-slide-toggle>
+        
+        <div>
+            <mat-form-field *ngIf="!engagementRespecte" appearance="fill">
+                <mat-label>Raison du refus</mat-label>
+                <textarea matInput [(ngModel)]="raisonRefus"></textarea>
+            </mat-form-field>
+        
+        </div>
+        <button mat-raised-button (click)="mettreAJourEngagement()">Valider le choix</button>
+    </ng-container>
+    
+</ng-container>
+<button mat-raised-button (click)="fermer()">Fermer</button>
+
+
diff --git a/src/app/engagements/engagements.component.ts b/src/app/engagements/engagements.component.ts
index 7a1c655..d139521 100644
--- a/src/app/engagements/engagements.component.ts
+++ b/src/app/engagements/engagements.component.ts
@@ -1,5 +1,9 @@
-import { Component } from "@angular/core";
-import { EngagementDTO } from "@shared/api-swagger";
+import { Component, Inject } from "@angular/core";
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from "@angular/material/dialog";
+import { MatSnackBar } from "@angular/material/snack-bar";
+import { CollaborateurDTO, EngagementDTO, EngagementsService, EpInformationDTO, EtatEngagement, afficherEtatEngagement } from "@shared/api-swagger";
+import { Subscription } from "rxjs";
+
 
 @Component({
     selector: "app-engagements",
@@ -8,9 +12,75 @@ import { EngagementDTO } from "@shared/api-swagger";
 export class EngagementsComponent {
 
     displayedColumns :  string[] = ["businessunit", "collaborateur", "action", "dispositif", "modalite", "datelimite", "etat"]; 
-    constructor() {}
+    constructor(private dialog: MatDialog) {}
 
     afficherDetailsEngagements(engagement: EngagementDTO) {
-        console.log(engagement);
+        const datas = { data: engagement, width: "80%", height: '80%'};
+        this.dialog.open(DialogEngagementsComponent, datas);
+    }
+}
+
+@Component( {
+    selector: "dialog-engagements",
+    templateUrl: "dialog-engagements.html"
+})
+export class DialogEngagementsComponent {
+    ep: EpInformationDTO;
+    collaborateur: CollaborateurDTO;
+    referent: CollaborateurDTO;
+    etatEngagement: any = EtatEngagement;
+    engagementsSubscription: Subscription;
+    
+    donnerReponse: boolean = false;
+    raisonRefus : string = "";
+    engagementRespecte: boolean = true;
+
+
+    constructor(private dialogRef : MatDialogRef<DialogEngagementsComponent>, @Inject(MAT_DIALOG_DATA) public data : EngagementDTO, private engagementsService: EngagementsService,
+                    private snackBar: MatSnackBar){
+        this.ep = data.ep;
+        this.collaborateur = data.ep.collaborateur;
+        this.referent = data.ep.referent;
+    }
+
+    mettreAJourEngagement() {
+        let engagement : EngagementDTO = this.data;
+        if(this.engagementRespecte) {
+            engagement.etatEngagement = EtatEngagement.Respecte;
+        }
+        else {
+            if(this.raisonRefus.length == 0) {
+                this.snackBar.open("Vous devez justifier le refus de respecter l'engagement.", "Attention", {
+                    duration: 5000,
+                    horizontalPosition: "center",
+                    verticalPosition: "top",
+                });
+                return;
+            }
+            engagement.raisonNonRealisable = this.raisonRefus;
+            engagement.etatEngagement = EtatEngagement.NonRealisable; 
+        }
+        this.engagementsSubscription = this.engagementsService.updateEngagement(engagement, engagement.id).subscribe(
+            () => location.reload(),
+            err => console.log(err)
+        );
+    }
+
+    afficherEtat(etat: EtatEngagement) {
+        return afficherEtatEngagement(etat);
+    }
+
+    fermer() {
+        this.dialogRef.close();
+    }
+
+    repondre() {
+        this.donnerReponse = true;
+    }
+
+    ngOnDestroy() {
+        if(this.engagementsSubscription != null) {
+            this.engagementsSubscription.unsubscribe();
+        }
     }
 }
\ No newline at end of file
diff --git a/src/app/engagements/engagements.module.ts b/src/app/engagements/engagements.module.ts
index fb4e8b2..b06d1fc 100644
--- a/src/app/engagements/engagements.module.ts
+++ b/src/app/engagements/engagements.module.ts
@@ -5,15 +5,16 @@ import { RouterModule } from '@angular/router';
 import { MaterialModule } from "@shared/angular-material/angular-material.module";
 
 import {NavMenuModule} from '@shared/nav-menu/nav-menu.module';
-import { EngagementsComponent } from "./engagements.component";
+import { DialogEngagementsComponent, EngagementsComponent } from "./engagements.component";
 import { EngagementsRoutingModule } from "./engagements.routing.module";
 import { MatTablesModule } from "@shared/mat-tables/mat-tables.module";
+import { FormsModule } from "@angular/forms";
 
 
 
 @NgModule({
     declarations: [
-        EngagementsComponent
+        EngagementsComponent, DialogEngagementsComponent
     ],
     exports: [],
     imports: [
@@ -21,7 +22,9 @@ import { MatTablesModule } from "@shared/mat-tables/mat-tables.module";
         RouterModule, 
         NavMenuModule,
         EngagementsRoutingModule,
-        MatTablesModule
+        MatTablesModule,
+        MaterialModule, 
+        FormsModule
     ],
 })
 export class EngagementsModule {}
\ No newline at end of file
diff --git a/src/app/shared/angular-material/angular-material.module.ts b/src/app/shared/angular-material/angular-material.module.ts
index ceda0f8..195bc88 100644
--- a/src/app/shared/angular-material/angular-material.module.ts
+++ b/src/app/shared/angular-material/angular-material.module.ts
@@ -19,6 +19,8 @@ import {MatSelectModule} from '@angular/material/select';
 import {MatStepperModule} from '@angular/material/stepper';
 import {MatChipsModule} from '@angular/material/chips';
 import {MatSnackBarModule} from '@angular/material/snack-bar';
+import {MatSlideToggleModule} from '@angular/material/slide-toggle';
+
 
 import { NgxMatDatetimePickerModule, NgxMatTimepickerModule, NgxMatNativeDateModule } from '@angular-material-components/datetime-picker';
 
@@ -36,7 +38,7 @@ import { NgxMatDatetimePickerModule, NgxMatTimepickerModule, NgxMatNativeDateMod
     NgxMatDatetimePickerModule, MatDatepickerModule,
     NgxMatNativeDateModule, MatNativeDateModule,
     MatCheckboxModule, MatSelectModule, MatStepperModule,
-    MatChipsModule, MatSnackBarModule
+    MatChipsModule, MatSnackBarModule, MatSlideToggleModule
   ],
   exports : [MatCardModule,
     MatButtonModule, MatMenuModule,
@@ -47,7 +49,7 @@ import { NgxMatDatetimePickerModule, NgxMatTimepickerModule, NgxMatNativeDateMod
     NgxMatDatetimePickerModule, MatDatepickerModule,
     NgxMatNativeDateModule, MatNativeDateModule,
     MatCheckboxModule, MatSelectModule, MatStepperModule,
-    MatChipsModule, MatSnackBarModule
+    MatChipsModule, MatSnackBarModule, MatSlideToggleModule
   ]
 })
 export class MaterialModule {}
diff --git a/src/app/shared/api-swagger/model/etatEngagement.ts b/src/app/shared/api-swagger/model/etatEngagement.ts
index ac12563..17b2f26 100644
--- a/src/app/shared/api-swagger/model/etatEngagement.ts
+++ b/src/app/shared/api-swagger/model/etatEngagement.ts
@@ -20,4 +20,17 @@ export const EtatEngagement = {
     Respecte: 'Respecte' as EtatEngagement,
     NonRealisable: 'NonRealisable' as EtatEngagement,
     DateLimitePassee: 'DateLimitePassee' as EtatEngagement
-};
\ No newline at end of file
+};
+
+export function afficherEtatEngagement(etatEngagement: EtatEngagement) {
+    switch(etatEngagement) {
+        case EtatEngagement.Respecte:
+            return "Respecté";
+        case EtatEngagement.NonRealisable:
+            return "Non réalisable";
+        case EtatEngagement.EnAttente:
+            return "En attente";
+        case EtatEngagement.DateLimitePassee:
+            return "Date limite passée";
+    }
+}
\ No newline at end of file
diff --git a/src/app/shared/mat-tables/engagements-table/engagements-table.html b/src/app/shared/mat-tables/engagements-table/engagements-table.html
index 38fee0a..eb9f040 100644
--- a/src/app/shared/mat-tables/engagements-table/engagements-table.html
+++ b/src/app/shared/mat-tables/engagements-table/engagements-table.html
@@ -47,7 +47,7 @@
 
             <ng-container matColumnDef="dispositif">
                 <mat-header-cell *matHeaderCellDef>Dispositif</mat-header-cell>
-                <mat-cell *matCellDef="let row">{{row.dispotitif}}</mat-cell>
+                <mat-cell *matCellDef="let row">{{row.dispositif}}</mat-cell>
             </ng-container>
 
             <ng-container matColumnDef="modalite">
@@ -57,7 +57,7 @@
 
             <ng-container matColumnDef="datelimite">
                 <mat-header-cell *matHeaderCellDef>Date limite</mat-header-cell>
-                <mat-cell *matCellDef="let row">{{row.dateLimite}}</mat-cell>
+                <mat-cell *matCellDef="let row">{{row.dateLimite | date :'dd/MM/yyyy'}}</mat-cell>
             </ng-container>
 
             <ng-container matColumnDef="etat">
diff --git a/src/app/shared/mat-tables/engagements-table/engagements-table.ts b/src/app/shared/mat-tables/engagements-table/engagements-table.ts
index 50e8d47..7450212 100644
--- a/src/app/shared/mat-tables/engagements-table/engagements-table.ts
+++ b/src/app/shared/mat-tables/engagements-table/engagements-table.ts
@@ -1,6 +1,6 @@
 import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
 import { MatTableDataSource } from "@angular/material/table";
-import { BusinessUnitDTO, CollaborateurDTO, EngagementDTO, EngagementsService, EtatEngagement } from "@shared/api-swagger";
+import { BusinessUnitDTO, CollaborateurDTO, EngagementDTO, EngagementsService, EtatEngagement, afficherEtatEngagement } from "@shared/api-swagger";
 import { cles, engagementTypeRecherche } from "@shared/utils/cles";
 import { EngagementsRoutingModule } from "app/engagements/engagements.routing.module";
 import { Subscription } from "rxjs";
@@ -122,16 +122,7 @@ export class EngagementTableComponent implements OnInit {
     }
 
     afficherEtat(etat: EtatEngagement) {
-        switch(etat) {
-            case EtatEngagement.Respecte:
-                return "Respecté";
-            case EtatEngagement.NonRealisable:
-                return "Non réalisable";
-            case EtatEngagement.EnAttente:
-                return "En attente";
-            case EtatEngagement.DateLimitePassee:
-                return "Date limite passée";
-        }
+        return afficherEtatEngagement(etat);
     }
 
     /**