diff --git a/src/main/frontend/src/app/modules/colors/components/mix-editor/mix-editor.component.html b/src/main/frontend/src/app/modules/colors/components/mix-editor/mix-editor.component.html
index 59bfaad..82d8c55 100644
--- a/src/main/frontend/src/app/modules/colors/components/mix-editor/mix-editor.component.html
+++ b/src/main/frontend/src/app/modules/colors/components/mix-editor/mix-editor.component.html
@@ -1,4 +1,4 @@
-<mat-card *ngIf="recipe" class="x-centered y-centered">
+<mat-card *ngIf="recipe && (!editionMode || mix)" class="x-centered y-centered">
   <mat-card-header>
     <mat-card-title *ngIf="!editionMode">Création d'un mélange pour la recette {{recipe.company.name}}
       - {{recipe.name}}</mat-card-title>
@@ -22,11 +22,13 @@
       </mat-select>
     </mat-form-field>
 
-    <ng-container *ngTemplateOutlet="mixEditor"></ng-container>
+    <div class="mix-materials-wrapper">
+      <ng-container *ngTemplateOutlet="mixEditor"></ng-container>
+    </div>
   </mat-card-content>
   <mat-card-actions>
     <button mat-raised-button color="primary" routerLink="/color/edit/{{recipeId}}">Retour</button>
-    <button *ngIf="editionMode" mat-raised-button color="warn" (click)="delete()">Supprimer</button>
+    <button *ngIf="editionMode && canDeleteMix" mat-raised-button color="warn" (click)="deleteConfirmBox.show()">Supprimer</button>
     <button mat-raised-button color="accent" [disabled]="!form.valid" (click)="submit()">Enregistrer</button>
   </mat-card-actions>
 </mat-card>
@@ -65,7 +67,9 @@
       <th mat-header-cell *matHeaderCellDef>Unités</th>
       <td mat-cell *matCellDef="let mixMaterial" class="units-wrapper">
         <ng-container *ngIf="materials">
-          <ng-container *ngIf="materialUsePercentages(mixMaterial)">%</ng-container>
+          <ng-container *ngIf="materialUsePercentages(mixMaterial)">
+            <p>%</p>
+          </ng-container>
           <ng-container *ngIf="!materialUsePercentages(mixMaterial)">
             <ng-container *ngIf="!hoveredMixMaterial || hoveredMixMaterial != mixMaterial">
               <span>{{units}}</span>
@@ -94,3 +98,8 @@
   </table>
 </ng-template>
 
+<cre-confirm-box
+  #deleteConfirmBox
+  message="Voulez-vous vraiment supprimer le mélange {{mix.mixType.name}} de la recette {{recipe.company.name}} - {{recipe.name}}"
+  (confirm)="delete()">
+</cre-confirm-box>
diff --git a/src/main/frontend/src/app/modules/colors/components/mix-editor/mix-editor.component.sass b/src/main/frontend/src/app/modules/colors/components/mix-editor/mix-editor.component.sass
index 3d15487..ee4dba4 100644
--- a/src/main/frontend/src/app/modules/colors/components/mix-editor/mix-editor.component.sass
+++ b/src/main/frontend/src/app/modules/colors/components/mix-editor/mix-editor.component.sass
@@ -1,2 +1,3 @@
-td.units-wrapper
+td.units-wrapper p
   width: 3rem
+  margin-bottom: 0
diff --git a/src/main/frontend/src/app/modules/colors/components/mix-editor/mix-editor.component.ts b/src/main/frontend/src/app/modules/colors/components/mix-editor/mix-editor.component.ts
index 8839e3b..5572641 100644
--- a/src/main/frontend/src/app/modules/colors/components/mix-editor/mix-editor.component.ts
+++ b/src/main/frontend/src/app/modules/colors/components/mix-editor/mix-editor.component.ts
@@ -12,6 +12,9 @@ import {FormBuilder, FormControl, FormGroup, Validators} from "@angular/forms";
 import {UNIT_MILLILITER} from "../../../shared/units";
 import {MatTable} from "@angular/material/table";
 import {ActivatedRoute, Router} from "@angular/router";
+import {ConfirmBoxComponent} from "../../../shared/components/confirm-box/confirm-box.component";
+import {AccountService} from "../../../accounts/services/account.service";
+import {EmployeePermission} from "../../../shared/model/employee";
 
 @Component({
   selector: 'cre-mix-editor',
@@ -20,6 +23,7 @@ import {ActivatedRoute, Router} from "@angular/router";
 })
 export class MixEditorComponent extends SubscribingComponent {
   @ViewChild('mixTable') mixTable: MatTable<MixMaterial>
+  @ViewChild('deleteConfirmBox') deleteConfirmBox: ConfirmBoxComponent
 
   @Input() mixId: number | null
   @Input() recipeId: number | null
@@ -46,6 +50,7 @@ export class MixEditorComponent extends SubscribingComponent {
     private recipeService: RecipeService,
     private materialService: MaterialService,
     private materialTypeService: MaterialTypeService,
+    private accountService: AccountService,
     private formBuilder: FormBuilder,
     router: Router,
     activatedRoute: ActivatedRoute
@@ -57,14 +62,16 @@ export class MixEditorComponent extends SubscribingComponent {
     super.ngOnInit();
 
     this.mixId = this.urlUtils.parseIntUrlParam('id')
+    if (this.mixId) {
+      this.editionMode = true
+    }
 
     this.subscribe(
       this.recipeService.getById(this.recipeId),
       {
         next: r => {
           this.recipe = r
-          if (this.mixId) {
-            this.editionMode = true
+          if (this.editionMode) {
             this.subscribe(
               this.mixService.getById(this.mixId),
               {
@@ -107,7 +114,7 @@ export class MixEditorComponent extends SubscribingComponent {
   }
 
   delete() {
-
+    this.subscribeAndNavigate(this.mixService.delete(this.mixId), `/color/edit/${this.recipeId}`)
   }
 
   materialUsePercentages(mixMaterial: any) {
@@ -121,6 +128,10 @@ export class MixEditorComponent extends SubscribingComponent {
     return id ? this.materials.filter(m => m.id === id)[0] : null
   }
 
+  get canDeleteMix() {
+    return this.accountService.hasPermission(EmployeePermission.REMOVE_RECIPE)
+  }
+
   private generateForm() {
     this.nameControl = new FormControl(this.mix ? this.mix.mixType.name : null, Validators.required)
     this.materialTypeControl = new FormControl(this.mix ? this.mix.mixType.material.materialType.id : null, Validators.required)
diff --git a/src/main/frontend/src/app/modules/colors/services/mix.service.ts b/src/main/frontend/src/app/modules/colors/services/mix.service.ts
index e33db7e..a27b0cd 100644
--- a/src/main/frontend/src/app/modules/colors/services/mix.service.ts
+++ b/src/main/frontend/src/app/modules/colors/services/mix.service.ts
@@ -51,6 +51,10 @@ export class MixService {
     return this.api.put('/recipe/mix', body)
   }
 
+  delete(id: number): Observable<void> {
+    return this.api.delete(`/recipe/mix/${id}`)
+  }
+
   extractMixMaterials(mix: Mix): { materialId: number, quantity: number, percents: boolean }[] {
     return mix.mixMaterials.map(m => {
       return {materialId: m.material.id, quantity: m.quantity, percents: m.material.materialType.usePercentages}
diff --git a/src/main/frontend/src/app/modules/shared/components/subscribing.component.ts b/src/main/frontend/src/app/modules/shared/components/subscribing.component.ts
index 7e9e805..16d9a99 100644
--- a/src/main/frontend/src/app/modules/shared/components/subscribing.component.ts
+++ b/src/main/frontend/src/app/modules/shared/components/subscribing.component.ts
@@ -29,6 +29,16 @@ export abstract class SubscribingComponent implements OnInit, OnDestroy {
     this.subscribers$.push(observable.subscribe(observer))
   }
 
+  subscribeAndNavigate(observable: Observable<any>, route: string) {
+    this.subscribe(
+      observable,
+      {
+        next: () => this.urlUtils.navigateTo(route)
+      },
+      1
+    )
+  }
+
   subscribeEntityByIdFromRoute<T>(service: any, entitySubject: Subject<T>, notFoundRoute: string, paramName: string = 'id') {
     const id = this.urlUtils.parseIntUrlParam(paramName)
     this.subscribe(
diff --git a/src/main/kotlin/dev/fyloz/trial/colorrecipesexplorer/model/Recipe.kt b/src/main/kotlin/dev/fyloz/trial/colorrecipesexplorer/model/Recipe.kt
index 3c79c62..7348862 100644
--- a/src/main/kotlin/dev/fyloz/trial/colorrecipesexplorer/model/Recipe.kt
+++ b/src/main/kotlin/dev/fyloz/trial/colorrecipesexplorer/model/Recipe.kt
@@ -42,7 +42,7 @@ data class Recipe(
     @ManyToOne
     val company: Company,
 
-    @OneToMany
+    @OneToMany(cascade = [CascadeType.ALL])
     val mixes: MutableCollection<Mix>,
 
     @OneToMany(cascade = [CascadeType.ALL])
diff --git a/src/main/kotlin/dev/fyloz/trial/colorrecipesexplorer/service/MixService.kt b/src/main/kotlin/dev/fyloz/trial/colorrecipesexplorer/service/MixService.kt
index 2ba3fa7..f4717f7 100644
--- a/src/main/kotlin/dev/fyloz/trial/colorrecipesexplorer/service/MixService.kt
+++ b/src/main/kotlin/dev/fyloz/trial/colorrecipesexplorer/service/MixService.kt
@@ -78,4 +78,10 @@ class MixServiceImpl(
     override fun updateLocation(mix: Mix, location: String) {
         update(mix.apply { this.location = location })
     }
+
+    @Transactional
+    override fun delete(entity: Mix) {
+        recipeService.removeMix(entity)
+        super.delete(entity)
+    }
 }
diff --git a/src/main/kotlin/dev/fyloz/trial/colorrecipesexplorer/service/RecipeService.kt b/src/main/kotlin/dev/fyloz/trial/colorrecipesexplorer/service/RecipeService.kt
index 0628a3c..4c74ada 100644
--- a/src/main/kotlin/dev/fyloz/trial/colorrecipesexplorer/service/RecipeService.kt
+++ b/src/main/kotlin/dev/fyloz/trial/colorrecipesexplorer/service/RecipeService.kt
@@ -19,6 +19,9 @@ interface RecipeService : ExternalModelService<Recipe, RecipeSaveDto, RecipeUpda
 
     /** Adds the given [mix] to the given [recipe]. */
     fun addMix(recipe: Recipe, mix: Mix): Recipe
+
+    /** Removes the given [mix] from its recipe. */
+    fun removeMix(mix: Mix): Recipe
 }
 
 @Service
@@ -87,4 +90,7 @@ class RecipeServiceImpl(
 
     override fun addMix(recipe: Recipe, mix: Mix) =
         update(recipe.apply { mixes.add(mix) })
+
+    override fun removeMix(mix: Mix): Recipe =
+        update(mix.recipe.apply { mixes.remove(mix) })
 }
diff --git a/src/test/kotlin/dev/fyloz/trial/colorrecipesexplorer/service/RecipeServiceTest.kt b/src/test/kotlin/dev/fyloz/trial/colorrecipesexplorer/service/RecipeServiceTest.kt
index 4da45b4..178c7d4 100644
--- a/src/test/kotlin/dev/fyloz/trial/colorrecipesexplorer/service/RecipeServiceTest.kt
+++ b/src/test/kotlin/dev/fyloz/trial/colorrecipesexplorer/service/RecipeServiceTest.kt
@@ -97,7 +97,7 @@ class RecipeServiceTest :
     @Nested
     inner class AddMix {
         @Test
-        fun `add the given mix to the given recipe and updates it`() {
+        fun `adds the given mix to the given recipe and updates it`() {
             val mix = mix(id = 0L)
             val recipe = recipe(id = 0L, mixes = mutableListOf())
 
@@ -111,4 +111,23 @@ class RecipeServiceTest :
             assertTrue(found.mixes.contains(mix))
         }
     }
+
+    @Nested
+    inner class RemoveMix {
+        @Test
+        fun `removes the given mix from its recipe and updates it`() {
+            val recipe = recipe(id = 0L, mixes = mutableListOf())
+            val mix = mix(id = 0L, recipe = recipe)
+            recipe.mixes.add(mix)
+
+            doAnswer { it.arguments[0] }.whenever(service).update(any<Recipe>())
+
+            val found = service.removeMix(mix)
+
+            verify(service).update(any<Recipe>())
+
+            assertEquals(recipe.id, found.id)
+            assertFalse(found.mixes.contains(mix))
+        }
+    }
 }