diff --git a/src/app/modules/colors/components/mix-editor/mix-editor.component.html b/src/app/modules/colors/components/mix-editor/mix-editor.component.html
index 1c1ca94..7a356dc 100644
--- a/src/app/modules/colors/components/mix-editor/mix-editor.component.html
+++ b/src/app/modules/colors/components/mix-editor/mix-editor.component.html
@@ -71,9 +71,15 @@
       <th mat-header-cell *matHeaderCellDef>Produit</th>
       <td mat-cell *matCellDef="let mixMaterial">
         <mat-form-field *ngIf="materials">
-          <mat-select #select [(ngModel)]="mixMaterial.materialId" [value]="mixMaterial.materialId">
-            <mat-option *ngFor="let material of getAvailableMaterials(select)"
-                        [value]="material.id">{{material.name}}</mat-option>
+          <mat-select
+            #select
+            [value]="mixMaterial.materialId"
+            (valueChange)="setMixMaterialMaterial(mixMaterial, $event)">
+            <mat-option
+              *ngFor="let material of getAvailableMaterials(mixMaterial)"
+              [value]="material.id">
+              {{material.name}}
+            </mat-option>
           </mat-select>
         </mat-form-field>
       </td>
diff --git a/src/app/modules/colors/components/mix-editor/mix-editor.component.ts b/src/app/modules/colors/components/mix-editor/mix-editor.component.ts
index 0aa425f..fec8b0d 100644
--- a/src/app/modules/colors/components/mix-editor/mix-editor.component.ts
+++ b/src/app/modules/colors/components/mix-editor/mix-editor.component.ts
@@ -108,6 +108,12 @@ export class MixEditorComponent extends ErrorHandlingComponent {
 
   removeRow(position: number) {
     this.mixMaterials.splice(position, 1)
+
+    // Decreases the position of each mix material above the removed one
+    for (let i = position; i < this.mixMaterials.length; i++) {
+      this.mixMaterials[i].position -= 1
+    }
+
     this.mixTable.renderRows()
   }
 
@@ -126,6 +132,11 @@ export class MixEditorComponent extends ErrorHandlingComponent {
     table.renderRows()
   }
 
+  setMixMaterialMaterial(mixMaterial: MixMaterialDto, materialId: number) {
+    mixMaterial.isPercents = this.materials.find(m => m.id === materialId).materialType.usePercentages
+    mixMaterial.materialId = materialId
+  }
+
   submit() {
     this.save.emit({
       name: this.nameControl.value,
@@ -141,8 +152,8 @@ export class MixEditorComponent extends ErrorHandlingComponent {
     this.subscribeAndNavigate(this.mixService.delete(this.mixId), `/color/edit/${this.recipeId}`)
   }
 
-  getAvailableMaterials(selector: MatSelect): Material[] {
-    return this.materials.filter(m => selector.value === m.id || this.mixMaterials.filter(mm => mm.materialId === m.id).length === 0)
+  getAvailableMaterials(mixMaterial: MixMaterialDto): Material[] {
+    return this.materials.filter(m => mixMaterial.materialId === m.id || this.mixMaterials.filter(mm => mm.materialId === m.id).length === 0)
   }
 
   get canDeleteMix() {
diff --git a/src/app/modules/colors/components/mix-table/mix-table.component.ts b/src/app/modules/colors/components/mix-table/mix-table.component.ts
index 8a31b9f..61240c3 100644
--- a/src/app/modules/colors/components/mix-table/mix-table.component.ts
+++ b/src/app/modules/colors/components/mix-table/mix-table.component.ts
@@ -76,11 +76,16 @@ export class MixTableComponent extends SubscribingComponent {
     this.locationChange.emit({id: this.mix.id, location: event.target.value})
   }
 
-  changeQuantity(event: any, mixMaterial: MixMaterial, isTotal = false) {
+  changeQuantity(event: any, mixMaterial: MixMaterialDto, isTotal = false) {
     const newQuantity = parseInt(event.target.value)
+    // Skip if there if the input is null
+    if (!newQuantity) {
+      return
+    }
+
     let ratio = 1
     if (!isTotal) {
-      const originalQuantity = this.findMixMaterialDto(mixMaterial.material.id)
+      const originalQuantity = this.findMixMaterialDto(mixMaterial.materialId)
       ratio = newQuantity / originalQuantity.quantity
     } else {
       ratio = newQuantity / this.getTotalQuantity()
@@ -98,7 +103,7 @@ export class MixTableComponent extends SubscribingComponent {
   }
 
   getMixMaterialQuantityRounded(mixMaterial: MixMaterialDto): number {
-    return this.round(this.getMixMaterialFromDto(this.findMixMaterialDto(mixMaterial.materialId)).quantity)
+    return this.round(this.findMixMaterialDto(mixMaterial.materialId).quantity)
   }
 
   getTotalQuantity(index: number = -1): number {
diff --git a/src/app/modules/colors/components/step-list/step-list.component.html b/src/app/modules/colors/components/step-list/step-list.component.html
index f514e70..efb9c0c 100644
--- a/src/app/modules/colors/components/step-list/step-list.component.html
+++ b/src/app/modules/colors/components/step-list/step-list.component.html
@@ -10,6 +10,6 @@
     </mat-list>
 
     <p *ngIf="!selectedGroupId" class="empty-text text-center">Aucun groupe n'est sélectionné</p>
-    <p *ngIf="steps.length === 0" class="empty-text text-center">Il n'y a aucune étape définie pour ce groupe</p>
+    <p *ngIf="selectedGroupId && steps.length === 0" class="empty-text text-center">Il n'y a aucune étape définie pour ce groupe</p>
   </mat-card-content>
 </mat-card>
diff --git a/src/app/modules/colors/pages/edit/edit.component.html b/src/app/modules/colors/pages/edit/edit.component.html
index 2ff1d65..8ec157a 100644
--- a/src/app/modules/colors/pages/edit/edit.component.html
+++ b/src/app/modules/colors/pages/edit/edit.component.html
@@ -6,7 +6,7 @@
         <button mat-raised-button color="accent" (click)="submit(editComponent, stepTable)"
                 [disabled]="editComponent.form && editComponent.form.invalid">Enregistrer
         </button>
-        <button mat-raised-button color="warn" *ngIf="hasDeletePermission" (click)="delete()">Supprimer</button>
+        <button mat-raised-button color="warn" *ngIf="hasDeletePermission" (click)="confirmBoxComponent.show()">Supprimer</button>
       </div>
       <mat-form-field>
         <mat-label>Unités</mat-label>
@@ -51,3 +51,5 @@
     </div>
   </div>
 </div>
+
+<cre-confirm-box #confirmBoxComponent message="Voulez-vous vraiment supprimer la couleur {{recipe.name}}?" (confirm)="delete()"></cre-confirm-box>
diff --git a/src/app/modules/colors/pages/edit/edit.component.ts b/src/app/modules/colors/pages/edit/edit.component.ts
index 6b3acc6..b801f16 100644
--- a/src/app/modules/colors/pages/edit/edit.component.ts
+++ b/src/app/modules/colors/pages/edit/edit.component.ts
@@ -1,6 +1,6 @@
 import {Component, ViewChild} from '@angular/core'
 import {ErrorHandlingComponent} from '../../../shared/components/subscribing.component'
-import {Recipe, RecipeStep} from '../../../shared/model/recipe.model'
+import {Recipe, recipeMixCount, RecipeStep, recipeStepCount} from '../../../shared/model/recipe.model'
 import {RecipeService} from '../../services/recipe.service'
 import {ActivatedRoute, Router} from '@angular/router'
 import {Validators} from '@angular/forms'
@@ -131,10 +131,10 @@ export class EditComponent extends ErrorHandlingComponent {
       parseInt(this.activatedRoute.snapshot.paramMap.get('id')),
       recipe => {
         this.recipe = recipe
-        if (this.recipe.mixCount == 0) {
+        if (recipeMixCount(this.recipe) == 0) {
           this.alertService.pushWarning('Il n\'y a aucun mélange dans cette recette')
         }
-        if (this.recipe.stepCount == 0) {
+        if (recipeStepCount(this.recipe) == 0) {
           this.alertService.pushWarning('Il n\'y a aucune étape dans cette recette')
         }
       },
diff --git a/src/app/modules/colors/pages/explore/explore.component.ts b/src/app/modules/colors/pages/explore/explore.component.ts
index a83add8..3dc9b6e 100644
--- a/src/app/modules/colors/pages/explore/explore.component.ts
+++ b/src/app/modules/colors/pages/explore/explore.component.ts
@@ -2,7 +2,7 @@ import {Component} from '@angular/core'
 import {RecipeService} from '../../services/recipe.service'
 import {ActivatedRoute, Router} from '@angular/router'
 import {ErrorHandlingComponent} from '../../../shared/components/subscribing.component'
-import {MixMaterialDto, Recipe, recipeNoteForGroupId} from '../../../shared/model/recipe.model'
+import {MixMaterialDto, Recipe, recipeMixCount, recipeNoteForGroupId, recipeStepCount} from '../../../shared/model/recipe.model'
 import {Observable, Subject} from 'rxjs'
 import {ErrorModel, ErrorService} from '../../../shared/service/error.service'
 import {AlertService} from '../../../shared/service/alert.service'
@@ -62,7 +62,7 @@ export class ExploreComponent extends ErrorHandlingComponent {
       r => {
         this.recipe = r
 
-        if (this.recipe.mixCount <= 0 || this.recipe.stepCount <= 0) {
+        if (recipeMixCount(this.recipe) <= 0 || recipeStepCount(this.recipe) <= 0) {
           this.alertService.pushWarning('Cette recette n\'est pas complète')
         }
       },
diff --git a/src/app/modules/shared/model/recipe.model.ts b/src/app/modules/shared/model/recipe.model.ts
index bd01c52..3355946 100644
--- a/src/app/modules/shared/model/recipe.model.ts
+++ b/src/app/modules/shared/model/recipe.model.ts
@@ -18,14 +18,6 @@ export class Recipe {
     public groupsInformation: RecipeGroupInformation[]
   ) {
   }
-
-  get mixCount(): number {
-    return this.mixes.length
-  }
-
-  get stepCount(): number {
-    return this.groupsInformation.flatMap(i => i.steps).length
-  }
 }
 
 export class RecipeGroupInformation {
@@ -86,6 +78,14 @@ export class RecipeStep {
   }
 }
 
+export function recipeMixCount(recipe: Recipe): number {
+  return recipe.mixes.length
+}
+
+export function recipeStepCount(recipe: Recipe): number {
+  return recipe.groupsInformation.length > 0 ? recipe.groupsInformation.flatMap(i => i.steps).length : 0
+}
+
 export function recipeNoteForGroupId(recipe: Recipe, groupId: number): string | null {
   const groupInformation = recipe.groupsInformation.find(i => i.group.id === groupId)
   return groupInformation ? groupInformation.note : null