diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index aab1488..7436b2a 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -42,6 +42,7 @@ import { PageUpdateAccountComponent } from './pages/page-update-account/page-upd
 import { DayPilot, DayPilotModule } from "@daypilot/daypilot-lite-angular";
 import { HumeurComponent } from './components/humeur/humeur.component';
 
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -87,6 +88,7 @@ import { HumeurComponent } from './components/humeur/humeur.component';
     FormsModule,
     AutofocusFixModule.forRoot(),
     DayPilotModule
+
   ],
   providers: [
 
diff --git a/src/app/components/card-menu/card-menu.component.html b/src/app/components/card-menu/card-menu.component.html
index a6a566b..44b472f 100644
--- a/src/app/components/card-menu/card-menu.component.html
+++ b/src/app/components/card-menu/card-menu.component.html
@@ -1,46 +1,124 @@
-<div class="menu">
 <div *ngFor="let menu of listMenus">
-  <p>{{ menu.dateMenu }} {{ menu.libelle }}</p>
-</div>
+  <div class="menu card mb-4" style="width: 14rem">
+    <p>{{ menu.dateMenu | date: "EEEE, d":"fr" }}</p>
+    <p>{{ menu.repas }}</p>
+    <p>{{ menu.libelle }}</p>
 
+    <ng-template #content let-modal>
+      <div class="modal-header">
+        <h4 class="modal-title" id="modal-basic-title">
+          Mettre à jour un menu
+        </h4>
+        <button
+          type="button"
+          class="close"
+          aria-label="Close"
+          (click)="modal.dismiss('Cross click')"
+        >
+          <span aria-hidden="true"> × </span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <form [formGroup]="upMenuForm">
+          <div class="form-group">
+            <label for="dateMenu"> Date </label>
+            <div class="input-group">
+              <input
+                id="dateMenu"
+                class="form-control"
+                formControlName="dateMenuFc"
+                value="{{ menu.dateMenu }}"
+                placeholder=""
+                name="date"
+              />
+              <input
+                id="libelle"
+                class="form-control"
+                formControlName="libelleFc"
+                value="{{ menu.libelle }}"
+                placeholder=""
+                name="libelle"
+              />
+              <input
+                id="repas"
+                class="form-control"
+                formControlName="repasFc"
+                value="{{ menu.repas }}"
+                placeholder=""
+                name="repas"
+              />
+            </div>
+          </div>
+        </form>
+      </div>
+      <div class="modal-footer">
+        <button
+          type="button"
+          class="btn btn-outline-dark"
+          (click)="modal.close(updateMenu(menu.id))"
+        >
+          Mettre à jour
+        </button>
+      </div>
+    </ng-template>
+
+    <i class="bi bi-pencil-square" (click)="open(content)"></i>
+    <i class="bi bi-trash3" (click)="deleteMenu(menu.id)"></i>
+  </div>
+</div>
 <ng-template #content let-modal>
   <div class="modal-header">
-    <h4 class="modal-title" id="modal-basic-title">
-      Ajouter un menu
-    </h4>
-    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
-
-      <span aria-hidden="true">
-        ×
-      </span>
+    <h4 class="modal-title" id="modal-basic-title">Ajouter un menu</h4>
+    <button
+      type="button"
+      class="close"
+      aria-label="Close"
+      (click)="modal.dismiss('Cross click')"
+    >
+      <span aria-hidden="true"> × </span>
     </button>
   </div>
   <div class="modal-body">
     <form [formGroup]="menuForm">
       <div class="form-group">
-        <label for="dateMenu">
-          Date
-        </label>
+        <label for="dateMenu"> Date </label>
         <div class="input-group">
-          <input id="dateMenu" class="form-control" formControlName="dateMenuFc" placeholder="yyyy-mm-dd" name="date"
-          >
-<input id="libelle" class="form-control" formControlName="libelleFc" placeholder="" name="libelle"
->
+          <input
+            id="dateMenu"
+            class="form-control"
+            formControlName="dateMenuFc"
+            placeholder="aaaa-mm-jj"
+            name="date"
+          />
+          <input
+            id="libelle"
+            class="form-control"
+            formControlName="libelleFc"
+            placeholder="repas"
+            name="libelle"
+          />
+          <input
+            id="repas"
+            class="form-control"
+            formControlName="repasFc"
+            placeholder="soir ou midi"
+            name="repas"
+          />
         </div>
       </div>
     </form>
   </div>
   <div class="modal-footer">
-    <button type="button" class="btn btn-outline-dark" (click)="modal.close(saveMenu())">
-      Save
+    <button
+      type="button"
+      class="btn btn-outline-dark"
+      (click)="modal.close(saveMenu())"
+    >
+      Enregistrer
     </button>
   </div>
 </ng-template>
 
-<button class="btn btn-lg btn-outline-primary" (click)="open(content)">
- Ajouter un menu
+<button type="button" class="btn btn-outline-dark" (click)="open(content)">
+  Ajouter un menu
 </button>
-
-
-
-</div>
diff --git a/src/app/components/card-menu/card-menu.component.ts b/src/app/components/card-menu/card-menu.component.ts
index 1cbbff0..002fd82 100644
--- a/src/app/components/card-menu/card-menu.component.ts
+++ b/src/app/components/card-menu/card-menu.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Menu } from 'src/app/models/menu';
 import { MenusService } from 'src/app/services/menus.service';
@@ -22,6 +22,8 @@ closeResult = '';
 public listMenus:any[];
 public menuId : any;
 public menuForm : FormGroup;
+public upMenuForm : FormGroup;
+
 
   constructor(
     private menusService: MenusService,
@@ -31,10 +33,49 @@ public menuForm : FormGroup;
     private fb: FormBuilder
   ) {
     this.listMenus=[];
-    this.menuId=0;
     this.menuForm = new FormGroup({});
+    this.upMenuForm = this.initForm();
    }
 
+     //Méthode qui initialise les champs du formulaire avec les infos de la BDD
+  private initForm(menu?: Menu): FormGroup {
+    return this.fb.group({
+      dateMenu: [menu ? menu.dateMenu : ''],
+      libelle: [menu ? menu.libelle : ''],
+      repas: [menu ? menu.repas : ''],
+
+    });
+  }
+
+  //delete d'un menu
+  deleteMenu(id_menu : number): void {
+  window.alert("Le menu a bien été supprimé!")
+this.menusService.deleteMenu(id_menu)?.subscribe((resp) => {
+  this.router.navigate(['menu']);
+});
+
+  }
+
+//updateMenu
+updateMenu(id_menu : number): void {
+    const dateValue = this.menuForm.value['dateMenuFc'];
+    const libelleValue = this.menuForm.value['libelleFc'];
+    const repasValue = this.menuForm.value['repasFc'];
+
+    const menu: Menu = {
+      dateMenu: dateValue,
+      libelle: libelleValue,
+      repas: repasValue,
+      id: id_menu
+    };
+
+    console.log(id_menu);
+
+    this.menusService.updateMenu(menu, id_menu)?.subscribe((resp) => {
+      console.log("ok");
+        this.router.navigate(['menu']);
+      });
+  }
 
 
 //ajout d'un menu
@@ -42,21 +83,24 @@ saveMenu(): void {
 
     const dateValue = this.menuForm.value['dateMenuFc'];
     const libelleValue = this.menuForm.value['libelleFc'];
+    const repasValue = this.menuForm.value['repasFc'];
 
     const menu: Menu = {
       dateMenu: dateValue,
       libelle: libelleValue,
+      repas: repasValue,
+      id: 0
     };
 
-    // if (menu.dateMenu != undefined && menu.libelle != '') {
+   if (menu.dateMenu !=='' && menu.libelle !== '') {
 
-    console.log(dateValue);
+    console.log(menu.dateMenu);
       this.menusService.addMenu(menu)?.subscribe((resp) => {
         this.router.navigate(['menu']);
       });
-    // } else {
-    //   this.router.navigate(['menu']);
-    // }
+    } else {
+      this.router.navigate(['accueil']);
+    }
 }
 
 
@@ -72,6 +116,7 @@ this.menusService.getMenu()?.subscribe((listMenus: any[])=>{
   {
     dateMenuFc: new FormControl('',[Validators.required]),
     libelleFc: new FormControl('',[Validators.required]),
+    repasFc: new FormControl('',[Validators.required]),
   }
 );
   }
@@ -99,11 +144,3 @@ open(content: any) {
 
 
 
-//modif d'un menu
-// this.menuId=this.route.snapshot.paramMap.get('id');
-// this.menusService.getMenuById(this.menuId)
-// .subscribe((this.listMenus:any)=>)
-
-//delete d'un menu
-
-
diff --git a/src/app/models/menu.ts b/src/app/models/menu.ts
index 9b08b81..81b7415 100644
--- a/src/app/models/menu.ts
+++ b/src/app/models/menu.ts
@@ -3,5 +3,7 @@ import { Team } from './team';
 
 export interface Menu {
   libelle: string;
-  dateMenu: Date;
+  dateMenu: string;
+  repas: string;
+  id: number;
 }
diff --git a/src/app/services/menus.service.ts b/src/app/services/menus.service.ts
index 9eebafb..019495f 100644
--- a/src/app/services/menus.service.ts
+++ b/src/app/services/menus.service.ts
@@ -44,13 +44,17 @@ apiUrl: string;
 
   }
 
-  deleteMenu(id: any): Observable<any> {
-    return this.http.delete(`${this.apiUrl}/menus/delete/`+ id);
+  deleteMenu(id:number): Observable<any> {
+    return this.http.delete(`${this.apiUrl}/menus/delete/${id}`);
   }
 
-  updateMenu(menu: Menu): Observable<any> {
-    return this.http.put(`${this.apiUrl}/contacts/update/`, menu);
-  }
+
+  updateMenu(menu: Menu, id:number): Observable<any> | void {
+    const teamId = this.tokenService.getCurrentTeamId();
+    if (teamId){
+    return this.http.put(`${this.apiUrl}/menus/update/${teamId}/${id}`, menu);
+  }else {
+      this.router.navigate(['accueil']);
+    }
+}
 }
-
-