diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index c7beb9b..af2e07e 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -6,11 +6,7 @@
   <component name="ChangeListManager">
     <list default="true" id="c5a06892-a370-4c6a-a9cf-5d61f93a285b" name="Changes" comment="Adding Front">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/daidokoro/.gitignore" beforeDir="false" afterPath="$PROJECT_DIR$/daidokoro/.gitignore" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/daidokoro/src/app/component/accueil/accueil.component.html" beforeDir="false" afterPath="$PROJECT_DIR$/daidokoro/src/app/component/accueil/accueil.component.html" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/daidokoro/src/app/component/accueil/accueil.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/daidokoro/src/app/component/accueil/accueil.component.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/daidokoro/src/app/component/recipe-list/recipe-list.component.html" beforeDir="false" afterPath="$PROJECT_DIR$/daidokoro/src/app/component/recipe-list/recipe-list.component.html" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/daidokoro/src/app/component/recipe-list/recipe-list.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/daidokoro/src/app/component/recipe-list/recipe-list.component.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/daidokoro/src/app/component/recipe-form/recipe-form.component.html" beforeDir="false" afterPath="$PROJECT_DIR$/daidokoro/src/app/component/recipe-form/recipe-form.component.html" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -27,7 +23,7 @@
   <component name="Git.Settings">
     <option name="RECENT_BRANCH_BY_REPOSITORY">
       <map>
-        <entry key="$PROJECT_DIR$" value="front" />
+        <entry key="$PROJECT_DIR$" value="master" />
       </map>
     </option>
     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
@@ -47,7 +43,7 @@
   &quot;keyToString&quot;: {
     &quot;ASKED_ADD_EXTERNAL_FILES&quot;: &quot;true&quot;,
     &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
-    &quot;git-widget-placeholder&quot;: &quot;master&quot;,
+    &quot;git-widget-placeholder&quot;: &quot;formFront&quot;,
     &quot;last_opened_file_path&quot;: &quot;/home/dorian/Documents/but3/Angular/Daidokoro&quot;,
     &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
     &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
diff --git a/daidokoro/src/app/component/recipe-form/recipe-form.component.css b/daidokoro/src/app/component/recipe-form/recipe-form.component.css
deleted file mode 100644
index e69de29..0000000
diff --git a/daidokoro/src/app/component/recipe-form/recipe-form.component.html b/daidokoro/src/app/component/recipe-form/recipe-form.component.html
index f6d6fd5..5292f49 100644
--- a/daidokoro/src/app/component/recipe-form/recipe-form.component.html
+++ b/daidokoro/src/app/component/recipe-form/recipe-form.component.html
@@ -1,41 +1,138 @@
-<form [formGroup]="recipeForm" (ngSubmit)="onSubmit()">
-  <label for="id">ID: </label>
-  <input id="id" type="number" formControlName="id" required>
+<style>
+  body {
+    font-family: Arial, sans-serif;
+    background-color: #bab6b6;
+    margin: 0;
+    padding: 20px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+  .form-container {
+    background-color: #fff;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    padding: 20px;
+    width: 100%;
+  }
+  .form-container h2 {
+    margin-top: 0;
+  }
+  .form-group {
+    margin-bottom: 15px;
+  }
+  .form-group label {
+    display: block;
+    margin-bottom: 5px;
+  }
+  .form-group input,
+  .form-group select,
+  .form-group button {
+    width: 97%;
+    padding: 10px;
+    margin-top: 5px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+  }
+  .form-group button {
+    background-color: black;
+    color: white;
+    border: none;
+    cursor: pointer;
+  }
+  .form-group button:hover {
+    background-color: #525259;
+  }
+  .form-group .remove-button {
+    background-color: red;
+  }
+  .form-group .remove-button:hover {
+    background-color: darkred;
+  }
+  .add-ingredient-button {
+    background-color: #4CAF50;
+    color: white;
+  }
+  .add-ingredient-button:hover {
+    background-color: #45a049;
+  }
+  .submit-button {
+    background-color: black;
+    color: white;
+  }
+  .submit-button:hover {
+    background-color: #525259;
+  }
+  .error-message {
+    color: red;
+    font-size: 0.9em;
+    margin-top: 5px;
+  }
+  .form-group.invalid input,
+  .form-group.invalid select {
+    border-color: red;
+  }
 
-  <label for="name">Name: </label>
-  <input id="name" type="text" formControlName="name" required>
+</style>
+<body>
+<div class="form-container">
+  <h2>Ajouter une Recette</h2>
+  <form [formGroup]="recipeForm" (ngSubmit)="onSubmit()">
+    <div class="form-group" [class.invalid]="recipeForm.get('id')?.invalid && recipeForm.get('id')?.touched">
+      <label for="id">ID: </label>
+      <input id="id" type="number" formControlName="id" required>
+      <div class="error-message" *ngIf="recipeForm.get('id')?.invalid && recipeForm.get('id')?.touched">
+        L'ID est requis.
+      </div>
+    </div>
 
-  <label for="description">Description: </label>
-  <input id="description" type="text" formControlName="description" required>
+    <div class="form-group" [class.invalid]="recipeForm.get('name')?.invalid && recipeForm.get('name')?.touched">
+      <label for="name">Name: </label>
+      <input id="name" type="text" formControlName="name" required>
+      <div class="error-message" *ngIf="recipeForm.get('name')?.invalid && recipeForm.get('name')?.touched">
+        Le nom est requis.
+      </div>
+    </div>
 
-  <label for="image">Image: </label>
-  <input id="image" type="file" (change)="onFileChange($event)">
+    <div class="form-group" [class.invalid]="recipeForm.get('description')?.invalid && recipeForm.get('description')?.touched">
+      <label for="description">Description: </label>
+      <input id="description" type="text" formControlName="description" required>
+      <div class="error-message" *ngIf="recipeForm.get('description')?.invalid && recipeForm.get('description')?.touched">
+        La description est requise.
+      </div>
+    </div>
+    <label for="image">Image: </label>
+    <input id="image" type="file" (change)="onFileChange($event)">
 
-  <div *ngIf="imageBase64">
-    <img [src]="imageBase64" alt="Selected Image" style="max-width: 200px; max-height: 200px;">
-  </div>
+    <br>
+    <div *ngIf="imageBase64">
+      <img [src]="imageBase64" alt="Selected Image" style="max-width: 200px; max-height: 200px;">
+    </div>
+    <br>
 
-  <div formArrayName="ingredients">
-    <div *ngFor="let ingredient of ingredients.controls; let i=index" [formGroupName]="i">
-      <label for="ingredient-quantity">Quantity:</label>
-      <input id="ingredient-quantity" type="number" formControlName="quantity" required>
+    <div formArrayName="ingredients">
+      <div *ngFor="let ingredient of ingredients.controls; let i=index" [formGroupName]="i" class="form-group">
+        <label for="ingredient-quantity">Quantity:</label>
+        <input id="ingredient-quantity" type="number" formControlName="quantity" required>
 
-      <label for="ingredient-unit">Unit:</label>
-      <select id="ingredient-unit" formControlName="unit" required>
-        <option *ngFor="let unit of unity" [value]="unit">{{ unit }}</option>
-      </select>
+        <label for="ingredient-unit">Unit:</label>
+        <select id="ingredient-unit" formControlName="unit" required>
+          <option *ngFor="let unit of unity" [value]="unit">{{ unit }}</option>
+        </select>
 
-      <label for="ingredient-name">Ingredient:</label>
-      <select id="ingredient-name" formControlName="ingredient" required>
-        <option *ngFor="let ingredient of ingredientsList" [value]="ingredient.$name">{{ ingredient.$name }}</option>
-      </select>
+        <label for="ingredient-name">Ingredient:</label>
+        <select id="ingredient-name" formControlName="ingredient" required>
+          <option *ngFor="let ingredient of ingredientsList" [value]="ingredient.$name">{{ ingredient.$name }}</option>
+        </select>
 
-      <button type="button" (click)="removeIngredient(i)">Remove</button>
+        <button type="button" class="remove-button" (click)="removeIngredient(i)">Remove</button>
+      </div>
     </div>
-  </div>
 
-  <button type="button" (click)="addIngredient()">Add Ingredient</button>
+    <button type="button" class="add-ingredient-button" (click)="addIngredient()">Add Ingredient</button>
 
-  <p>Complete the form to enable the button.</p>
-  <button type="submit" [disabled]="!recipeForm.valid">Submit</button>
-</form>
+    <p>Complete the form to enable the button.</p>
+    <button type="submit"  class="submit-button"  [disabled]="!recipeForm.valid">Submit</button>
+  </form>
+  </div>
+</body>
diff --git a/daidokoro/src/app/component/recipe-form/recipe-form.component.ts b/daidokoro/src/app/component/recipe-form/recipe-form.component.ts
index d542a76..e2d7b77 100644
--- a/daidokoro/src/app/component/recipe-form/recipe-form.component.ts
+++ b/daidokoro/src/app/component/recipe-form/recipe-form.component.ts
@@ -1,6 +1,6 @@
-import {Component, EventEmitter, Output} from '@angular/core';
-import {Recipe} from "../../model/recipe.model";
-import {FormControl, FormGroup, ReactiveFormsModule, FormArray, FormBuilder} from "@angular/forms";
+import { Component, EventEmitter, Output } from '@angular/core';
+import { Recipe } from "../../model/recipe.model";
+import { FormControl, FormGroup, ReactiveFormsModule, FormArray, FormBuilder, Validators } from "@angular/forms";
 import { Ingredient } from '../../model/ingredient.model';
 import { Unity } from '../../model/unity';
 import { IngredientService } from '../../service/ingredient.service';
@@ -10,8 +10,7 @@ import {NgFor, NgIf} from "@angular/common";
   selector: 'app-recipe-form',
   standalone: true,
   imports: [ReactiveFormsModule, NgFor, NgIf],
-  templateUrl: './recipe-form.component.html',
-  styleUrl: './recipe-form.component.css'
+  templateUrl: './recipe-form.component.html'
 })
 export class RecipeFormComponent {
   @Output() formSubmitted = new EventEmitter<Recipe>();
@@ -19,7 +18,7 @@ export class RecipeFormComponent {
   unity = Object.values(Unity);
   imageBase64: string | null = null;
 
-  constructor(private formBuilder: FormBuilder, private ingredientService : IngredientService){}
+  constructor(private formBuilder: FormBuilder, private ingredientService: IngredientService) { }
 
   ngOnInit(): void {
     this.ingredientService.getAll().subscribe(ingredients => {
@@ -29,28 +28,29 @@ export class RecipeFormComponent {
   }
 
   recipeForm: FormGroup = this.formBuilder.group({
-    id: new FormControl('', { nonNullable: true }),
-    name: new FormControl('', { nonNullable: true }),
-    description: new FormControl('', { nonNullable: true }),
+    id: new FormControl('', { nonNullable: true, validators: [Validators.required] }),
+    name: new FormControl('', { nonNullable: true, validators: [Validators.required] }),
+    description: new FormControl('', { nonNullable: true, validators: [Validators.required] }),
     ingredients: this.formBuilder.array([this.newIngredient()]),
     image: new FormControl('', {nonNullable: false})
   });
 
-  get ingredients():FormArray{
+  get ingredients(): FormArray {
     return this.recipeForm.get('ingredients') as FormArray;
   }
 
-  newIngredient(): FormGroup{
+  newIngredient(): FormGroup {
     return this.formBuilder.group({
-      quantity: new FormControl(0, { nonNullable: true }),
-      unit: new FormControl('', { nonNullable: true }),
-      ingredient: new FormControl('', { nonNullable: true })
+      quantity: new FormControl(0, { nonNullable: true, validators: [Validators.required] }),
+      unit: new FormControl('', { nonNullable: true, validators: [Validators.required] }),
+      ingredient: new FormControl('', { nonNullable: true, validators: [Validators.required] })
     });
   }
 
   addIngredient() {
     this.ingredients.push(this.newIngredient());
   }
+
   removeIngredient(index: number) {
     if (this.ingredients.length > 1) {
 
@@ -74,13 +74,13 @@ export class RecipeFormComponent {
   }
 
   onSubmit() {
-    if(this.recipeForm.valid){
+    if (this.recipeForm.valid) {
       const recipe: Recipe = {
         $id: parseInt(this.recipeForm.value.id!),
         $name: this.recipeForm.value.name!,
         $description: this.recipeForm.value.description!,
         $createdAt: new Date(),
-        $ingredients: this.recipeForm.value.ingredients!.map((ingredient : any) => ({
+        $ingredients: this.recipeForm.value.ingredients!.map((ingredient: any) => ({
           quantity: ingredient.quantity,
           unit: ingredient.unit,
           ingredient: this.ingredientsList.find(ing => ing.$name === ingredient.ingredient)
@@ -92,8 +92,5 @@ export class RecipeFormComponent {
       this.ingredients.clear()
       this.addIngredient()
     }
-
   }
-
-
 }