diff --git a/package-lock.json b/package-lock.json
index 1c8f23f..7272556 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
         "@angular/platform-browser-dynamic": "~13.0.0",
         "@angular/router": "~13.0.0",
         "bootstrap": "^5.1.3",
+        "bootstrap-icons": "^1.8.1",
         "jwt-decode": "^3.1.2",
         "ngx-autofocus-fix": "^1.0.4",
         "rxjs": "~7.4.0",
@@ -3620,6 +3621,14 @@
         "@popperjs/core": "^2.10.2"
       }
     },
+    "node_modules/bootstrap-icons": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.8.1.tgz",
+      "integrity": "sha512-IXUqislddPJfwq6H+2nTkHyr9epO9h6u1AG0OZCx616w+TgzeoCjfmI3qJMQqt1J586gN2IxzB4M99Ip4sTZ1w==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -14170,6 +14179,11 @@
       "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
       "requires": {}
     },
+    "bootstrap-icons": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.8.1.tgz",
+      "integrity": "sha512-IXUqislddPJfwq6H+2nTkHyr9epO9h6u1AG0OZCx616w+TgzeoCjfmI3qJMQqt1J586gN2IxzB4M99Ip4sTZ1w=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
diff --git a/package.json b/package.json
index 1507a28..6568a98 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "@angular/platform-browser-dynamic": "~13.0.0",
     "@angular/router": "~13.0.0",
     "bootstrap": "^5.1.3",
+    "bootstrap-icons": "^1.8.1",
     "jwt-decode": "^3.1.2",
     "ngx-autofocus-fix": "^1.0.4",
     "rxjs": "~7.4.0",
diff --git a/src/app/components/fiche-contact/fiche-contact.component.ts b/src/app/components/fiche-contact/fiche-contact.component.ts
index cc46263..f6c1a8a 100644
--- a/src/app/components/fiche-contact/fiche-contact.component.ts
+++ b/src/app/components/fiche-contact/fiche-contact.component.ts
@@ -14,6 +14,7 @@ export class FicheContactComponent implements OnInit {
   ngOnInit(): void {}
 
   onClickDelete(numPerson: number){
+    window.alert("Le contact à bien été supprimé!")
     this.clickDelete.emit(numPerson);
   }
 }
diff --git a/src/app/pages/page-repertoire/page-repertoire.component.ts b/src/app/pages/page-repertoire/page-repertoire.component.ts
index 99e0f66..b147389 100644
--- a/src/app/pages/page-repertoire/page-repertoire.component.ts
+++ b/src/app/pages/page-repertoire/page-repertoire.component.ts
@@ -33,16 +33,6 @@ export class PageRepertoireComponent implements OnInit {
       this.listContact = listContact;
       this.listFull = listContact;
     });
-
-    this.personneid = this.route.snapshot.paramMap.get('id');
-    console.log(this.personneid);
-
-    this.repertoireService
-      .getContactById(this.personneid)
-      .subscribe((listContactInfo: any) => {
-        console.log(listContactInfo);
-        this.listContactInfo = listContactInfo;
-      });
   }
 
   // Méthode pour récuper ce qui est saisi dans l'input
@@ -63,15 +53,20 @@ export class PageRepertoireComponent implements OnInit {
     this.listContact = prenom;
   }
 
-  // Méthode qui au click va ouvrir les détails d'un contat
+  // Méthode qui au click va ouvrir les détails d'un contact
   onClick(personne: any) {
     console.log(personne);
     this.openDetails = personne;
   }
 
-
-  onClickDelete(contact: Contact){
-    this.repertoireService.deleteContact(contact).subscribe((resp) => {
+  // Méthode qui au click va supprimer un contact
+  onClickDelete(contactId: number){
+    this.repertoireService.deleteContact(contactId).subscribe((resp) => {
+      if(contactId) {
+        this.listContact.forEach(contactId => console.log(contactId))
+      }else{
+        window.alert("Le contact ne peut pas être supprimé!")
+      }
       this.router.navigate(['repertoire/']);
     });
   }
diff --git a/src/app/services/repertoire.service.ts b/src/app/services/repertoire.service.ts
index a452854..cf9701b 100644
--- a/src/app/services/repertoire.service.ts
+++ b/src/app/services/repertoire.service.ts
@@ -27,12 +27,11 @@ export class RepertoireService {
 
   addContact(contact: Contact): Observable<any> {
     console.log(contact);
-
     return this.http.post(`${this.apiUrl}/contacts/add`, contact);
   }
 
-  deleteContact(contact: Contact): Observable<any> {
-    return this.http.delete(`${this.apiUrl}/contacts/delete/1`);
+  deleteContact(contactId: number): Observable<any> {
+    return this.http.delete(`${this.apiUrl}/contacts/delete/${contactId}`);
   }
 
   updateContact(contact: Contact): Observable<any> {