diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index f662ef8..92f7fb2 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -4,12 +4,16 @@ import { RecipeListComponent } from './recipe-list/recipe-list.component';
 import { HomeComponent } from './home/home.component';
 import { RecipeAddComponent } from './recipe-add/recipe-add.component';
 import { IngredientListComponent } from './ingredient-list/ingredient-list.component';
+import { IngredientEditComponent } from './ingredient-edit/ingredient-edit.component';
+import { IngredientAddComponent } from './ingredient-add/ingredient-add.component';
 
 export const routes: Routes = [
   { path: 'add', component: RecipeAddComponent },
   { path: 'recipe/:id', component: RecipeComponent },
   { path: 'list', component: RecipeListComponent },
   { path: 'ingredients', component: IngredientListComponent },
+  { path: 'ingredient/add', component: IngredientAddComponent },
+  { path: 'ingredient/:id/edit', component: IngredientEditComponent },
   { path: '', component: HomeComponent },
   { path: '**', redirectTo: '' },
 ];
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/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}`);
+//   }
+// }