diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index 82fdc55..e677d69 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -7,6 +7,8 @@ import { IngredientListComponent } from './ingredient-list/ingredient-list.compo
 import { LoginComponent } from './login/login.component';
 import { LogoutComponent } from './logout/logout.component';
 import { authGuard } from './guards/auth.guard';
+import { IngredientAddComponent } from './ingredient-add/ingredient-add.component';
+import { IngredientEditComponent } from './ingredient-edit/ingredient-edit.component';
 
 export const routes: Routes = [
   { path: 'add', component: RecipeAddComponent },
@@ -17,6 +19,8 @@ export const routes: Routes = [
     component: IngredientListComponent,
     canActivate: [authGuard],
   },
+  { path: 'ingredient/add', component: IngredientAddComponent },
+  { path: 'ingredient/:id/edit', component: IngredientEditComponent },
   { path: 'login', component: LoginComponent },
   { path: 'logout', component: LogoutComponent },
   { path: '', component: HomeComponent },
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index f85c800..4a852a8 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -1,5 +1,11 @@
 <div>
   <h1>Projet Recipe</h1>
   <br />
+  <h2>Commandes en cours</h2>
+  <ul>
+    <li *ngFor="let recipe of currentOrders">
+      {{ recipe.name }}
+    </li>
+  </ul>
   <p>Bienvenue sur Recipe</p>
 </div>
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index deb69c4..afcc3ff 100644
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@@ -1,12 +1,22 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Recipe } from '../models/recipe';
+import { RecipeService } from '../services/recipe.service';
 
 @Component({
   selector: 'app-home',
   standalone: true,
-  imports: [],
+  imports: [CommonModule],
   templateUrl: './home.component.html',
   styleUrl: './home.component.scss'
 })
-export class HomeComponent {
+export class HomeComponent implements OnInit {
+  currentOrders: Recipe[] = [];
 
+  constructor(private recipeService: RecipeService) {}
+
+  ngOnInit(): void {
+    // Charger les commandes en cours depuis le service
+    this.currentOrders = this.recipeService.getCurrentOrders();
+  }
 }
diff --git a/src/app/ingredient-add/ingredient-add.component.html b/src/app/ingredient-add/ingredient-add.component.html
new file mode 100644
index 0000000..e05512d
--- /dev/null
+++ b/src/app/ingredient-add/ingredient-add.component.html
@@ -0,0 +1,27 @@
+<!--api
+<div>
+  <h2>Add New Ingredient</h2>
+  <form (ngSubmit)="addIngredient()">
+    <mat-form-field appearance="fill">
+      <mat-label>Name</mat-label>
+      <input matInput [(ngModel)]="ingredient.name" name="name" required />
+    </mat-form-field>
+    <button mat-raised-button color="primary" type="submit">
+      Add Ingredient
+    </button>
+  </form>
+</div>
+-->
+
+<div>
+  <h2>Add New Ingredient</h2>
+  <form (ngSubmit)="addIngredient()">
+    <mat-form-field appearance="fill">
+      <mat-label>Name</mat-label>
+      <input matInput [(ngModel)]="name" name="name" required />
+    </mat-form-field>
+    <button mat-raised-button color="primary" type="submit">
+      Add Ingredient
+    </button>
+  </form>
+</div>
diff --git a/src/app/ingredient-add/ingredient-add.component.scss b/src/app/ingredient-add/ingredient-add.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/ingredient-add/ingredient-add.component.ts b/src/app/ingredient-add/ingredient-add.component.ts
new file mode 100644
index 0000000..57b683a
--- /dev/null
+++ b/src/app/ingredient-add/ingredient-add.component.ts
@@ -0,0 +1,38 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { IngredientService } from '../services/ingredient.service';
+import { Ingredient } from '../models/ingredient';
+import { HttpClientModule } from '@angular/common/http';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatButtonModule } from '@angular/material/button';
+import { MatSelectModule } from '@angular/material/select';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-ingredient-add',
+  standalone: true,
+  imports: [HttpClientModule, MatFormFieldModule, MatButtonModule, MatSelectModule, FormsModule],
+  templateUrl: './ingredient-add.component.html',
+  styleUrl: './ingredient-add.component.scss'
+})
+export class IngredientAddComponent {
+  // version api
+  // ingredient: Ingredient = new Ingredient(0, '');
+  name: string = '';
+
+  constructor(private ingredientService: IngredientService, private router: Router) {}
+
+  addIngredient(): void {
+    if (this.name.trim()) {
+      this.ingredientService.addIngredient(this.name.trim());
+      this.router.navigate(['/ingredients']);
+    }
+  }
+
+  // version api
+  // addIngredient(): void {
+  //   this.ingredientService.addIngredient(this.ingredient).subscribe(() => {
+  //     this.router.navigate(['/ingredients']);
+  //   });
+  // }
+}
diff --git a/src/app/ingredient-edit/ingredient-edit.component.html b/src/app/ingredient-edit/ingredient-edit.component.html
new file mode 100644
index 0000000..6d50564
--- /dev/null
+++ b/src/app/ingredient-edit/ingredient-edit.component.html
@@ -0,0 +1,10 @@
+<div *ngIf="ingredient">
+  <h2>Edit Ingredient</h2>
+  <form (ngSubmit)="save()">
+    <mat-form-field appearance="fill">
+      <mat-label>Name</mat-label>
+      <input matInput [(ngModel)]="ingredient.name" name="name" required />
+    </mat-form-field>
+    <button mat-raised-button color="primary" type="submit">Save</button>
+  </form>
+</div>
diff --git a/src/app/ingredient-edit/ingredient-edit.component.scss b/src/app/ingredient-edit/ingredient-edit.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/ingredient-edit/ingredient-edit.component.ts b/src/app/ingredient-edit/ingredient-edit.component.ts
new file mode 100644
index 0000000..0dfb73a
--- /dev/null
+++ b/src/app/ingredient-edit/ingredient-edit.component.ts
@@ -0,0 +1,50 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Ingredient } from '../models/ingredient';
+import { IngredientService } from '../services/ingredient.service';
+import { CommonModule } from '@angular/common';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatButtonModule } from '@angular/material/button';
+import { FormsModule } from '@angular/forms';
+import { HttpClientModule } from '@angular/common/http';
+
+@Component({
+  selector: 'app-ingredient-edit',
+  standalone: true,
+  imports: [CommonModule, MatFormFieldModule, MatButtonModule, FormsModule],
+  templateUrl: './ingredient-edit.component.html',
+  styleUrls: ['./ingredient-edit.component.scss']
+})
+export class IngredientEditComponent implements OnInit {
+  ingredient!: Ingredient;
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private ingredientService: IngredientService
+  ) {}
+
+  ngOnInit(): void {
+    const id = Number(this.route.snapshot.paramMap.get('id'));
+    this.ingredient = this.ingredientService.getIngredient(id);
+  }
+
+  save(): void {
+    // Implement save logic here
+    this.router.navigate(['/ingredients']);
+  }
+
+  // version api
+  // ngOnInit(): void {
+  //   const id = Number(this.route.snapshot.paramMap.get('id'));
+  //   this.ingredientService.getIngredient(id).subscribe((ingredient) => {
+  //     this.ingredient = ingredient;
+  //   });
+  // }
+
+  // save(): void {
+  //   this.ingredientService.updateIngredient(this.ingredient.id, this.ingredient).subscribe(() => {
+  //     this.router.navigate(['/ingredients']);
+  //   });
+  // }
+}
diff --git a/src/app/ingredient-list/ingredient-list.component.html b/src/app/ingredient-list/ingredient-list.component.html
index f42222c..5652ef4 100644
--- a/src/app/ingredient-list/ingredient-list.component.html
+++ b/src/app/ingredient-list/ingredient-list.component.html
@@ -1,5 +1,8 @@
 <div *ngIf="ingredients.length > 0">
   <h2>List of Ingredients</h2>
+  <button mat-raised-button color="primary" (click)="navToAddIngredient()">
+    Add Ingredient
+  </button>
   <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
     <!-- ID Column -->
     <ng-container matColumnDef="id">
@@ -10,7 +13,16 @@
     <!-- Name Column -->
     <ng-container matColumnDef="name">
       <th mat-header-cell *matHeaderCellDef>Name</th>
-      <td mat-cell *matCellDef="let ingredient">{{ ingredient.name }}</td>
+      <td mat-cell *matCellDef="let ingredient">
+        {{ ingredient.name }}
+        <button
+          mat-button
+          color="accent"
+          (click)="onEditIngredient(ingredient)"
+        >
+          Edit
+        </button>
+      </td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
diff --git a/src/app/ingredient-list/ingredient-list.component.ts b/src/app/ingredient-list/ingredient-list.component.ts
index 715b70a..40a1ab1 100644
--- a/src/app/ingredient-list/ingredient-list.component.ts
+++ b/src/app/ingredient-list/ingredient-list.component.ts
@@ -4,13 +4,15 @@ import { IngredientService } from '../services/ingredient.service';
 import { MatTableModule, MatTableDataSource } from '@angular/material/table';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
 import { CommonModule } from '@angular/common';
+import { Router } from '@angular/router';
+import { HttpClientModule } from '@angular/common/http';
 
 @Component({
   selector: 'app-ingredient-list',
   standalone: true,
   templateUrl: './ingredient-list.component.html',
   styleUrls: ['./ingredient-list.component.scss'],
-  imports: [CommonModule, MatTableModule, MatPaginatorModule],
+  imports: [CommonModule, MatTableModule, MatPaginatorModule, HttpClientModule],
 })
 export class IngredientListComponent implements OnInit {
   ingredients: Ingredient[] = [];
@@ -20,7 +22,7 @@ export class IngredientListComponent implements OnInit {
 
   @ViewChild(MatPaginator) paginator!: MatPaginator;
 
-  constructor(private ingredientService: IngredientService) {}
+  constructor(private ingredientService: IngredientService, private router: Router) {}
 
   ngOnInit(): void {
     this.ingredients = this.ingredientService.getIngredients();
@@ -30,4 +32,25 @@ export class IngredientListComponent implements OnInit {
   ngAfterViewInit() {
     this.dataSource.paginator = this.paginator;
   }
+
+  // version api
+
+  // ngOnInit(): void {
+  //   this.loadIngredients();
+  // }
+
+  // loadIngredients(): void {
+  //   this.ingredientService.getIngredients().subscribe((ingredients) => {
+  //     this.ingredients = ingredients;
+  //     this.dataSource.data = this.ingredients;
+  //   });
+  // }
+
+  onEditIngredient(ingredient: Ingredient): void {
+    this.router.navigate(['/ingredient', ingredient.id, 'edit']);
+  }
+
+  navToAddIngredient(): void {
+    this.router.navigate(['/ingredient/add']);
+  }
 }
diff --git a/src/app/recipe-list/recipe-list.component.html b/src/app/recipe-list/recipe-list.component.html
index 7ee5e93..1373591 100644
--- a/src/app/recipe-list/recipe-list.component.html
+++ b/src/app/recipe-list/recipe-list.component.html
@@ -42,6 +42,9 @@
     <ng-container matColumnDef="actions">
       <th mat-header-cell *matHeaderCellDef>Show</th>
       <td mat-cell *matCellDef="let recipe">
+        <button mat-button color="accent" (click)="onOrderRecipe(recipe)">
+          Order
+        </button>
         <button mat-button color="accent" (click)="onSelectRecipe(recipe)">
           Show
         </button>
diff --git a/src/app/recipe-list/recipe-list.component.ts b/src/app/recipe-list/recipe-list.component.ts
index af2769b..08e4da0 100644
--- a/src/app/recipe-list/recipe-list.component.ts
+++ b/src/app/recipe-list/recipe-list.component.ts
@@ -52,4 +52,8 @@ export class RecipeListComponent implements OnInit {
     this.recipes = this.recipeService.getRecipes();
     this.dataSource.data = this.recipes;
   }
+
+  onOrderRecipe(recipe: Recipe): void {
+    this.recipeService.orderRecipe(recipe);
+  }
 }
diff --git a/src/app/services/ingredient.service.ts b/src/app/services/ingredient.service.ts
index 5458ffa..f7fe246 100644
--- a/src/app/services/ingredient.service.ts
+++ b/src/app/services/ingredient.service.ts
@@ -1,5 +1,7 @@
 import { Injectable } from '@angular/core';
 import { Ingredient } from '../models/ingredient';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
 
 @Injectable({
   providedIn: 'root',
@@ -38,4 +40,40 @@ export class IngredientService {
       (ingredient) => ingredient.id === id
     ) as Ingredient;
   }
+
+  addIngredient(name: string): void {
+    const newId = Math.max(...this.ingredients.map(ingredient => ingredient.id)) + 1;
+    const newIngredient = new Ingredient(newId, name);
+    this.ingredients.push(newIngredient);
+  }
 }
+
+// version api
+// @Injectable({
+//   providedIn: 'root',
+// })
+// export class IngredientService {
+//   private apiUrl = 'https://664ba07f35bbda10987d9f99.mockapi.io/api/ingrédients';
+
+//   constructor(private http: HttpClient) {}
+
+//   getIngredients(): Observable<Ingredient[]> {
+//     return this.http.get<Ingredient[]>(this.apiUrl);
+//   }
+
+//   getIngredient(id: number): Observable<Ingredient> {
+//     return this.http.get<Ingredient>(`${this.apiUrl}/${id}`);
+//   }
+
+//   addIngredient(ingredient: Ingredient): Observable<Ingredient> {
+//     return this.http.post<Ingredient>(this.apiUrl, ingredient);
+//   }
+
+//   updateIngredient(id: number, ingredient: Ingredient): Observable<Ingredient> {
+//     return this.http.put<Ingredient>(`${this.apiUrl}/${id}`, ingredient);
+//   }
+
+//   deleteIngredient(id: number): Observable<void> {
+//     return this.http.delete<void>(`${this.apiUrl}/${id}`);
+//   }
+// }
diff --git a/src/app/services/recipe.service.ts b/src/app/services/recipe.service.ts
index 25de6d0..55c562e 100644
--- a/src/app/services/recipe.service.ts
+++ b/src/app/services/recipe.service.ts
@@ -8,6 +8,7 @@ import { IngredientRecipe } from '../models/ingredient-recipe';
 export class RecipeService {
   private localStorageKey = 'recipes';
   private ingredientRecipeKey = 'ingredientRecipes';
+  private currentOrdersKey = 'currentOrders';
 
   getRecipes(): Recipe[] {
     const recipesJson = localStorage.getItem(this.localStorageKey);
@@ -22,8 +23,18 @@ export class RecipeService {
 
   deleteRecipe(recipeId: number): void {
     let recipes = this.getRecipes();
-    recipes = recipes.filter(recipe => recipe.id !== recipeId);
-    localStorage.setItem(this.localStorageKey, JSON.stringify(recipes));
+    const deletedRecipe = recipes.find(recipe => recipe.id === recipeId);
+
+    if (deletedRecipe) {
+      // Remove the recipe from recipes array
+      recipes = recipes.filter(recipe => recipe.id !== recipeId);
+      localStorage.setItem(this.localStorageKey, JSON.stringify(recipes));
+
+      // Remove associated IngredientRecipe objects
+      let ingredientRecipes = this.getIngredientRecipes(recipeId);
+      ingredientRecipes = ingredientRecipes.filter(ir => ir.idRecipe !== recipeId);
+      localStorage.setItem(this.ingredientRecipeKey, JSON.stringify(ingredientRecipes));
+    }
   }
 
   getIngredientRecipes(recipeId: number): IngredientRecipe[] {
@@ -45,4 +56,15 @@ export class RecipeService {
     );
     return ingredientRecipe ? ingredientRecipe.quantity : 0;
   }
+
+  orderRecipe(recipe: Recipe): void {
+    let currentOrders: Recipe[] = JSON.parse(localStorage.getItem(this.currentOrdersKey) || '[]');
+    currentOrders.push(recipe);
+    localStorage.setItem(this.currentOrdersKey, JSON.stringify(currentOrders));
+  }
+
+  getCurrentOrders(): Recipe[] {
+    const currentOrdersJson = localStorage.getItem(this.currentOrdersKey);
+    return currentOrdersJson ? JSON.parse(currentOrdersJson) : [];
+  }
 }