diff --git a/src/app/components/ingredient-mini/ingredient-mini.component.css b/src/app/components/ingredient-mini/ingredient-mini.component.css
new file mode 100644
index 0000000..450dc06
--- /dev/null
+++ b/src/app/components/ingredient-mini/ingredient-mini.component.css
@@ -0,0 +1,15 @@
+.ingredient-mini {
+  min-width: 130px;
+  background-color: #d3d3d3;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+
+  .ingredient-mini-title {
+    font-size: 1.2rem;
+    font-weight: bold;
+  }
+}
\ No newline at end of file
diff --git a/src/app/components/ingredient-mini/ingredient-mini.component.html b/src/app/components/ingredient-mini/ingredient-mini.component.html
new file mode 100644
index 0000000..43d9dad
--- /dev/null
+++ b/src/app/components/ingredient-mini/ingredient-mini.component.html
@@ -0,0 +1,4 @@
+<div class="ingredient-mini">
+  <span class="ingredient-mini-title">{{ ingredient.name }}</span>
+  <span>{{ ingredient.qty }}g</span>
+</div>
diff --git a/src/app/components/ingredient-mini/ingredient-mini.component.spec.ts b/src/app/components/ingredient-mini/ingredient-mini.component.spec.ts
new file mode 100644
index 0000000..2cfdb18
--- /dev/null
+++ b/src/app/components/ingredient-mini/ingredient-mini.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IngredientMiniComponent } from './ingredient-mini.component';
+
+describe('IngredientMiniComponent', () => {
+  let component: IngredientMiniComponent;
+  let fixture: ComponentFixture<IngredientMiniComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [IngredientMiniComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(IngredientMiniComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/ingredient-mini/ingredient-mini.component.ts b/src/app/components/ingredient-mini/ingredient-mini.component.ts
new file mode 100644
index 0000000..11429c6
--- /dev/null
+++ b/src/app/components/ingredient-mini/ingredient-mini.component.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { Ingredient } from '../../model/ingredient.model'
+import { Input } from '@angular/core'; 
+
+@Component({
+  selector: 'app-ingredient-mini',
+  standalone: true,
+  imports: [],
+  templateUrl: './ingredient-mini.component.html',
+  styleUrl: './ingredient-mini.component.css'
+})
+export class IngredientMiniComponent {
+  @Input() ingredient!: Ingredient;
+}
diff --git a/src/app/components/recipe-detail/recipe-detail.component.css b/src/app/components/recipe-detail/recipe-detail.component.css
index ba6717e..2d3d261 100644
--- a/src/app/components/recipe-detail/recipe-detail.component.css
+++ b/src/app/components/recipe-detail/recipe-detail.component.css
@@ -1,4 +1,11 @@
 img {
   max-height: 300px;
   height: 300px;
+}
+
+#recipe-list {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 1rem;
 }
\ No newline at end of file
diff --git a/src/app/components/recipe-detail/recipe-detail.component.html b/src/app/components/recipe-detail/recipe-detail.component.html
index abb6f45..19ec2fd 100644
--- a/src/app/components/recipe-detail/recipe-detail.component.html
+++ b/src/app/components/recipe-detail/recipe-detail.component.html
@@ -4,4 +4,8 @@
   <p>{{ recipe.description }}</p>
 
   <h2>{{ 'recipe.ingredients' | transloco }}</h2>
+
+  <div id="recipe-list">
+    <app-ingredient-mini *ngFor="let ingredient of recipe.ingredients" [ingredient]="ingredient"></app-ingredient-mini>
+  </div>
 </div>
\ No newline at end of file
diff --git a/src/app/components/recipe-detail/recipe-detail.component.ts b/src/app/components/recipe-detail/recipe-detail.component.ts
index e19892d..4d6d3dd 100644
--- a/src/app/components/recipe-detail/recipe-detail.component.ts
+++ b/src/app/components/recipe-detail/recipe-detail.component.ts
@@ -3,11 +3,14 @@ import { Recipe } from '../../model/recipe.model';
 import { RecipeService } from '../../services/recipe.service';
 import { Router, ActivatedRoute } from '@angular/router';
 import { TranslocoPipe } from '@jsverse/transloco';
+import { IngredientMiniComponent } from '../ingredient-mini/ingredient-mini.component';
+import { NgFor } from '@angular/common';
+
 
 @Component({
   selector: 'app-recipe-detail',
   standalone: true,
-  imports: [TranslocoPipe],
+  imports: [NgFor, TranslocoPipe, IngredientMiniComponent],
   templateUrl: './recipe-detail.component.html',
   styleUrl: './recipe-detail.component.css'
 })
diff --git a/src/app/components/recipe-form/recipe-form.component.ts b/src/app/components/recipe-form/recipe-form.component.ts
index bd6c2ab..75808e8 100644
--- a/src/app/components/recipe-form/recipe-form.component.ts
+++ b/src/app/components/recipe-form/recipe-form.component.ts
@@ -11,6 +11,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatButtonModule } from '@angular/material/button';
 import { MatSelectModule} from '@angular/material/select';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-recipe-form',
@@ -35,7 +36,7 @@ export class RecipeFormComponent {
   defaultOption: string = this.ingredientsOptions[2];
   filename: string = '';
 
-  constructor(private fb: FormBuilder, private recipeService: RecipeService) {
+  constructor(private fb: FormBuilder, private recipeService: RecipeService, private router: Router) {
     this.recipeForm = this.fb.group({
       name: ['', Validators.required],
       description: ['', Validators.required],
@@ -86,9 +87,8 @@ export class RecipeFormComponent {
         }))
       };
       console.log('Recipe added:', newRecipe);
-      this.recipeService.addRecipe(newRecipe);
-      this.recipeForm.reset();
-      this.filename = "No file provided"
+      let newId = this.recipeService.addRecipe(newRecipe);
+      this.router.navigate(['recipe', newId - 1]);
     } else {
       console.log('Form is invalid');
     }
diff --git a/src/app/services/recipe.service.ts b/src/app/services/recipe.service.ts
index a4b04ac..763cc69 100644
--- a/src/app/services/recipe.service.ts
+++ b/src/app/services/recipe.service.ts
@@ -22,11 +22,12 @@ export class RecipeService {
   }
 
   // Add a new recipe
-  addRecipe(recipe: Recipe): void {
+  addRecipe(recipe: Recipe): number {
     this.getRecipes();
     recipe.id = this.recipes.length
-    this.recipes.push(recipe);
+    let newId = this.recipes.push(recipe);
     localStorage.setItem(this.localStorageKey, JSON.stringify(this.recipes));
+    return newId;
   }
 
   // Clear all recipes (for example, if needed)
diff --git a/src/styles.css b/src/styles.css
index 0c37ddf..f2bd8b6 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,8 +1,3 @@
 :root {
   font-family: "Helvetica";
-}
-
-html,
-body {
-  height: 100%;
 }
\ No newline at end of file