diff --git a/src/app/notes/details-note/details-note.component.html b/src/app/notes/details-note/details-note.component.html
index 544fa34..f7bf301 100644
--- a/src/app/notes/details-note/details-note.component.html
+++ b/src/app/notes/details-note/details-note.component.html
@@ -10,5 +10,5 @@
     <p>Créé le {{ note.dateCreation | date : 'dd/MM/yyyy à hh:mm'}}</p>
     <p>Dernère mise à jour le {{ note.dateMiseAjour | date : 'dd/MM/yyyy à hh:mm'}}</p>
     <button mat-raised-button [routerLink]="['/notes', note.id, 'edit']">Modifier la note </button>
-    <button mat-raised-button color="warn">Supprimer la note</button>
+    <button mat-raised-button color="warn" (click)="supprimerNote()">Supprimer la note</button>
 </ng-container>
diff --git a/src/app/notes/details-note/details-note.component.ts b/src/app/notes/details-note/details-note.component.ts
index a934f5d..af5d92f 100644
--- a/src/app/notes/details-note/details-note.component.ts
+++ b/src/app/notes/details-note/details-note.component.ts
@@ -1,5 +1,6 @@
-import { Component, OnInit } from "@angular/core";
-import { ActivatedRoute } from "@angular/router";
+import { Component, Inject, OnInit } from "@angular/core";
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from "@angular/material/dialog";
+import { ActivatedRoute, Router } from "@angular/router";
 import { DetailsNoteDTO, NotesService } from "@shared/api-swagger";
 import { Subscription } from "rxjs";
 
@@ -14,7 +15,7 @@ export class DetailsNoteComponent implements OnInit{
 
     noteSubscription: Subscription;
 
-    constructor(private noteService: NotesService, private activatedRoute: ActivatedRoute) {}
+    constructor(private dialog: MatDialog, private noteService: NotesService, private activatedRoute: ActivatedRoute) {}
 
     ngOnInit() {
         const id: any = this.activatedRoute.snapshot.paramMap.get("id");
@@ -25,4 +26,35 @@ export class DetailsNoteComponent implements OnInit{
             )
         }
     }
+
+    supprimerNote() {
+        this.dialog.open(DialogSuppressionNoteComponent, { data: this.note})
+    }
+}
+
+
+@Component({
+    selector: "dialog-supprimer-note",
+    templateUrl: "./dialog-suppression-note.html"
+})
+export class DialogSuppressionNoteComponent {
+    noteSubcription: Subscription;
+
+    constructor(private dialogRef: MatDialogRef<DialogSuppressionNoteComponent>,@Inject(MAT_DIALOG_DATA) public data: DetailsNoteDTO, private noteService: NotesService, private router: Router) {}
+
+
+    fermer() { 
+        this.dialogRef.close();
+    }
+
+    supprimer() {
+        this.noteSubcription = this.noteService.deleteNote(this.data.id).subscribe(
+            () => { 
+                this.router.navigate(["/notes"]);
+                this.dialogRef.close();
+             },
+            err => console.log(err)
+        );
+
+    }
 }
\ No newline at end of file
diff --git a/src/app/notes/details-note/dialog-suppression-note.html b/src/app/notes/details-note/dialog-suppression-note.html
new file mode 100644
index 0000000..291b670
--- /dev/null
+++ b/src/app/notes/details-note/dialog-suppression-note.html
@@ -0,0 +1,4 @@
+<p> <b>Souhaitez-vous réellement supprimer la note {{data.titre}} ? Une fois supprimée, aucune note ne peut être récupérée !</b></p>
+
+<button mat-raised-button color="warn" (click)="supprimer()">Supprimer</button>
+<button mat-raised-button (click)="fermer()">Annuler</button>
\ No newline at end of file
diff --git a/src/app/notes/notes.module.ts b/src/app/notes/notes.module.ts
index 616cc62..9067e36 100644
--- a/src/app/notes/notes.module.ts
+++ b/src/app/notes/notes.module.ts
@@ -9,7 +9,7 @@ import { NotesComponent } from "./notes.component";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { DialogChoixCollaborateurNoteComponent, NouvelleNoteComponent } from "./nouvelle-note/nouvelle-note.component";
 import { MatTablesModule } from "@shared/mat-tables/mat-tables.module";
-import { DetailsNoteComponent } from "./details-note/details-note.component";
+import { DetailsNoteComponent, DialogSuppressionNoteComponent } from "./details-note/details-note.component";
 import { ModifierNoteComponent } from "./modifier-note/modifier-note.component";
 
 
@@ -17,7 +17,8 @@ import { ModifierNoteComponent } from "./modifier-note/modifier-note.component";
     declarations: [ 
         NotesComponent, NouvelleNoteComponent, 
         DialogChoixCollaborateurNoteComponent,
-        DetailsNoteComponent, ModifierNoteComponent
+        DetailsNoteComponent, ModifierNoteComponent,
+        DialogSuppressionNoteComponent
     ],
     imports: [
       CommonModule,