diff --git a/src/app/modules/recipes/components/mix-editor/mix-editor.component.html b/src/app/modules/recipes/components/mix-editor/mix-editor.component.html
deleted file mode 100644
index 5e294cd..0000000
--- a/src/app/modules/recipes/components/mix-editor/mix-editor.component.html
+++ /dev/null
@@ -1,126 +0,0 @@
-<ng-container *ngIf="controls && recipe && materials && (!editionMode || mix)">
-  <cre-action-bar>
-    <cre-action-group>
-      <cre-primary-button routerLink="/color/edit/{{recipe.id}}">Retour</cre-primary-button>
-    </cre-action-group>
-    <cre-action-group>
-      <cre-warn-button *ngIf="editionMode" (click)="deleteConfirmBox.show()">Supprimer</cre-warn-button>
-      <cre-submit-button [form]="creForm" (submit)="submit()">Enregistrer</cre-submit-button>
-    </cre-action-group>
-  </cre-action-bar>
-
-  <cre-form #creForm [formControls]="controls" class="mx-auto">
-    <cre-form-title *ngIf="!editionMode">Ajouter un mélange à la couleur {{recipe.company.name}}
-      - {{recipe.name}}</cre-form-title>
-    <cre-form-title *ngIf="editionMode">Modification du mélange {{mix.mixType.name}} de la
-      couleur {{recipe.company.name}}
-      - {{recipe.name}}</cre-form-title>
-
-    <cre-form-content>
-      <cre-input [control]="controls.name" label="name" icon="form-textbox"></cre-input>
-      <!--      <cre-select [control]="controls.materialType" label="Type de produit"-->
-      <!--                  [entries]="materialTypeEntries$"></cre-select>-->
-    </cre-form-content>
-  </cre-form>
-</ng-container>
-
-<table #matTable mat-table [dataSource]="mixMaterials" class="mx-auto mt-5">
-  <ng-container matColumnDef="position">
-    <th mat-header-cell *matHeaderCellDef>Position</th>
-    <td mat-cell *matCellDef="let mixMaterial">
-      {{mixMaterial.position}}
-    </td>
-  </ng-container>
-
-  <ng-container matColumnDef="buttonsPosition">
-    <th mat-header-cell *matHeaderCellDef></th>
-    <td mat-cell *matCellDef="let mixMaterial; let i = index">
-      <ng-container *ngIf="(!hoveredMixMaterial && i === 0) || hoveredMixMaterial === mixMaterial">
-        <button
-          mat-mini-fab
-          color="primary"
-          class="mr-1"
-          [disabled]="mixMaterial.position <= 1"
-          (click)="decreasePosition(mixMaterial, matTable)">
-          <mat-icon svgIcon="arrow-up"></mat-icon>
-        </button>
-        <button
-          mat-mini-fab
-          color="primary"
-          [disabled]="mixMaterial.position >= mixMaterials.length"
-          (click)="increasePosition(mixMaterial, matTable)">
-          <mat-icon svgIcon="arrow-down"></mat-icon>
-        </button>
-      </ng-container>
-    </td>
-  </ng-container>
-
-  <ng-container matColumnDef="material">
-    <th mat-header-cell *matHeaderCellDef>Produit</th>
-    <td mat-cell *matCellDef="let mixMaterial">
-      <!--      <mat-form-field *ngIf="materials">-->
-      <!--        <mat-select-->
-      <!--          [value]="mixMaterial.materialId"-->
-      <!--          (valueChange)="setMixMaterialMaterial(mixMaterial, $event)">-->
-      <!--          <mat-option-->
-      <!--            *ngFor="let material of sortedMaterials(getAvailableMaterials(mixMaterial))"-->
-      <!--            [value]="material.id">-->
-      <!--            {{materialDisplayName(material)}}-->
-      <!--          </mat-option>-->
-      <!--        </mat-select>-->
-      <!--      </mat-form-field>-->
-
-
-            <cre-select [entries]="getAvailableMaterials(mixMaterial)"></cre-select>
-    </td>
-  </ng-container>
-
-  <ng-container matColumnDef="quantity">
-    <th mat-header-cell *matHeaderCellDef>Quantité</th>
-    <td mat-cell *matCellDef="let mixMaterial">
-      <mat-form-field>
-        <input matInput type="number" step="0.001" [(ngModel)]="mixMaterial.quantity"/>
-      </mat-form-field>
-    </td>
-  </ng-container>
-
-  <ng-container matColumnDef="units">
-    <th mat-header-cell *matHeaderCellDef>Unités</th>
-    <td mat-cell *matCellDef="let mixMaterial" class="units-wrapper">
-      <ng-container *ngIf="materials">
-        <ng-container *ngIf="mixMaterial.isPercents">
-          <p>%</p>
-        </ng-container>
-        <ng-container *ngIf="!mixMaterial.isPercents">
-          <ng-container *ngIf="!hoveredMixMaterial || hoveredMixMaterial != mixMaterial">
-            <span>{{units}}</span>
-          </ng-container>
-          <ng-container *ngIf="hoveredMixMaterial && hoveredMixMaterial == mixMaterial">
-            <cre-unit-selector [(unit)]="units" [showLabel]="false" [short]="true"></cre-unit-selector>
-          </ng-container>
-        </ng-container>
-      </ng-container>
-    </td>
-  </ng-container>
-
-  <ng-container matColumnDef="buttonRemove">
-    <th mat-header-cell *matHeaderCellDef>
-      <button mat-raised-button color="accent" (click)="addRow()">Ajouter</button>
-    </th>
-    <td mat-cell *matCellDef="let mixMaterial; let i = index">
-      <ng-container *ngIf="hoveredMixMaterial && hoveredMixMaterial == mixMaterial">
-        <button mat-raised-button color="warn" (click)="removeRow(i)">Retirer</button>
-      </ng-container>
-    </td>
-  </ng-container>
-
-  <tr mat-header-row *matHeaderRowDef="tableColumns"></tr>
-  <tr mat-row *matRowDef="let mixMaterial; columns: tableColumns" (mouseover)="hoveredMixMaterial = mixMaterial"></tr>
-</table>
-
-<cre-confirm-box
-  *ngIf="editionMode && mix"
-  #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/app/modules/recipes/components/mix-editor/mix-editor.component.sass b/src/app/modules/recipes/components/mix-editor/mix-editor.component.sass
deleted file mode 100644
index 3eb5b9b..0000000
--- a/src/app/modules/recipes/components/mix-editor/mix-editor.component.sass
+++ /dev/null
@@ -1,6 +0,0 @@
-mat-card
-  max-width: unset !important
-
-td.units-wrapper p
-  width: 3rem
-  margin-bottom: 0
diff --git a/src/app/modules/recipes/components/mix-editor/mix-editor.component.ts b/src/app/modules/recipes/components/mix-editor/mix-editor.component.ts
deleted file mode 100644
index d795617..0000000
--- a/src/app/modules/recipes/components/mix-editor/mix-editor.component.ts
+++ /dev/null
@@ -1,214 +0,0 @@
-import {Component, EventEmitter, Input, Output, ViewChild} from '@angular/core'
-import {
-  Mix,
-  MixMaterial,
-  MixMaterialDto,
-  mixMaterialsAsMixMaterialsDto,
-  Recipe,
-  sortMixMaterialsDto
-} from '../../../shared/model/recipe.model'
-import {ErrorHandlingComponent} from '../../../shared/components/subscribing.component'
-import {MixService} from '../../services/mix.service'
-import {RecipeService} from '../../services/recipe.service'
-import {Material, materialComparator} from '../../../shared/model/material.model'
-import {MaterialService} from '../../../material/service/material.service'
-import {MaterialTypeService} from '../../../material-type/service/material-type.service'
-import {FormBuilder, FormControl, 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 {ErrorService} from '../../../shared/service/error.service'
-import {map} from 'rxjs/operators';
-import {CreInputEntry} from '../../../shared/components/inputs/inputs';
-import {CreForm, ICreForm} from '../../../shared/components/forms/forms';
-
-@Component({
-  selector: 'cre-mix-editor',
-  templateUrl: './mix-editor.component.html',
-  styleUrls: ['./mix-editor.component.sass']
-})
-export class MixEditorComponent extends ErrorHandlingComponent {
-  @ViewChild(MatTable, {static: true}) mixTable: MatTable<MixMaterial>
-  @ViewChild('deleteConfirmBox') deleteConfirmBox: ConfirmBoxComponent
-  @ViewChild(CreForm) creForm: ICreForm
-
-  @Input() mixId: number | null
-  @Input() recipe: Recipe
-  @Input() mix: Mix | null
-  @Input() materials: Material[] = []
-
-  @Output() save = new EventEmitter<any>()
-
-  editionMode = false
-  units = UNIT_MILLILITER
-  hoveredMixMaterial: MixMaterial | null
-  tableColumns = ['position', 'buttonsPosition', 'material', 'quantity', 'units', 'buttonRemove']
-
-  deleting = false
-  errorHandlers = [{
-    filter: error => error.type === 'notfound-mix-id',
-    consumer: _ => this.urlUtils.navigateTo('/color/list')
-  }, {
-    filter: error => error.type === 'exists-material-name',
-    messageProducer: error => `Un produit avec le nom '${error.name}' existe déjà`
-  }, {
-    filter: error => error.type === 'cannotdelete-mix',
-    messageProducer: _ => 'Ce mélange est utilisé par un ou plusieurs autres mélanges'
-  }, {
-    filter: error => error.type === 'invalid-mixmaterial-first',
-    messageProducer: _ => 'La quantité du premier ingrédient du mélange ne peut pas être exprimée en pourcentage'
-  }]
-
-  controls: any
-  materialTypeEntries$ = this.materialTypeService.all.pipe(
-    map(materialTypes => materialTypes.map(materialType => new CreInputEntry(materialType.id, materialType.name))),
-  )
-
-  private _mixMaterials: MixMaterialDto[] = []
-
-  constructor(
-    private mixService: MixService,
-    private recipeService: RecipeService,
-    private materialService: MaterialService,
-    private materialTypeService: MaterialTypeService,
-    private accountService: AccountService,
-    private formBuilder: FormBuilder,
-    errorService: ErrorService,
-    router: Router,
-    activatedRoute: ActivatedRoute
-  ) {
-    super(errorService, activatedRoute, router)
-  }
-
-  ngOnInit() {
-    super.ngOnInit()
-
-    this.mixId = this.urlUtils.parseIntUrlParam('id')
-    if (this.mixId) {
-      this.editionMode = true
-    }
-
-    if (this.editionMode) {
-      this.mix = this.recipe.mixes.find(mix => mix.id === this.mixId)
-      this.mixMaterials = mixMaterialsAsMixMaterialsDto(this.mix)
-    } else {
-      this.addBlankMixMaterial()
-    }
-
-    this.createControls()
-  }
-
-  private createControls() {
-    this.controls = {
-      name: new FormControl(this.mix?.mixType.name, Validators.required),
-      materialType: new FormControl(this.mix?.mixType.material.materialType.id, Validators.required)
-    }
-  }
-
-  addRow() {
-    this.addBlankMixMaterial()
-    this.mixTable.renderRows()
-  }
-
-  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()
-  }
-
-  increasePosition(mixMaterial: MixMaterialDto, table: MatTable<any>) {
-    this.updateMixMaterialPosition(mixMaterial, mixMaterial.position + 1)
-    this.sort(table)
-  }
-
-  decreasePosition(mixMaterial: MixMaterialDto, table: MatTable<any>) {
-    this.updateMixMaterialPosition(mixMaterial, mixMaterial.position - 1)
-    this.sort(table)
-  }
-
-  sort(table: MatTable<any>) {
-    this.mixMaterials = sortMixMaterialsDto(this.mixMaterials)
-    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.controls.name.value,
-      recipeId: this.recipe.id,
-      materialTypeId: this.controls.materialType.value,
-      mixMaterials: this.mixMaterials,
-      units: this.units
-    })
-  }
-
-  delete() {
-    this.deleting = true
-    this.subscribeAndNavigate(this.mixService.delete(this.mixId), `/color/edit/${this.recipe.id}`)
-  }
-
-  getAvailableMaterials(mixMaterial: MixMaterialDto): CreInputEntry[] {
-    // return this.materialService.all.pipe(
-    //   map(materials => materials.filter(material => {
-    //     return mixMaterial.materialId === material.id || this.mixMaterials.filter(mm => mm.materialId === material.id).length === 0
-    //   })),
-    //   map(materials => this.sortedMaterials(materials)),
-    //   map(materials => materials.map(material => new CreInputEntry(material.id, material.name)))
-    // )
-    return this.materials
-      .filter(m => mixMaterial.materialId === m.id || this.mixMaterials.filter(mm => mm.materialId === m.id).length === 0)
-      .sort(materialComparator)
-      .map(material => new CreInputEntry(material.id, material.name))
-    // return this.materials.map(material => new CreInputEntry(material.id, material.name))
-    // return this.materials
-    //   .filter(m => mixMaterial.materialId === m.id || this.mixMaterials.filter(mm => mm.materialId === m.id).length === 0)
-    //   .sort(materialComparator)
-    //   .map(material => new CreInputEntry(material.id, material.name))
-  }
-
-  materialDisplayName(material: Material): string {
-    if (material.materialType.prefix) {
-      return `[${material.materialType.prefix}] ${material.name}`
-    }
-    return material.name
-  }
-
-  get mixMaterials(): MixMaterialDto[] {
-    return this._mixMaterials
-  }
-
-  set mixMaterials(mixMaterials: MixMaterialDto[]) {
-    this._mixMaterials = mixMaterials
-    this.mixTable.renderRows()
-  }
-
-  private addBlankMixMaterial() {
-    const mixMaterial = new MixMaterialDto(null, 0, false, this.mixMaterials.length + 1)
-    this.mixMaterials = [...this.mixMaterials, mixMaterial]
-  }
-
-  private updateMixMaterialPosition(mixMaterial: MixMaterialDto, updatedPosition: number) {
-    if (!this.mixMaterialAtPosition(updatedPosition)) {
-      mixMaterial.position = updatedPosition
-    } else {
-      const conflictingStep = this.mixMaterialAtPosition(updatedPosition)
-      conflictingStep.position = mixMaterial.position
-      mixMaterial.position = updatedPosition
-    }
-  }
-
-  private mixMaterialAtPosition(position: number): MixMaterialDto {
-    return this.mixMaterials.find(m => m.position === position)
-  }
-}
diff --git a/src/app/modules/recipes/components/mix-table/mix-table.component.ts b/src/app/modules/recipes/components/mix-table/mix-table.component.ts
index 2018c5a..ad5758b 100644
--- a/src/app/modules/recipes/components/mix-table/mix-table.component.ts
+++ b/src/app/modules/recipes/components/mix-table/mix-table.component.ts
@@ -191,12 +191,13 @@ export class MixTableComponent extends SubscribingComponent {
       materialId: quantity.materialId,
       quantity: this.calculateQuantity(index),
       isPercents: quantity.isPercents,
-      position: quantity.position
+      position: quantity.position,
+      units: UNIT_MILLILITER
     })
   }
 
   private convertQuantities(newUnit: string) {
-    this.mixMaterials.forEach(q => q.quantity = convertMixMaterialQuantity(q, this.units, newUnit))
+    this.mixMaterials.forEach(q => q.quantity = convertMixMaterialQuantity(q, newUnit))
     this.units = newUnit
   }
 
diff --git a/src/app/modules/recipes/mix/add.html b/src/app/modules/recipes/mix/add.html
index 26639dd..b0b1c5b 100644
--- a/src/app/modules/recipes/mix/add.html
+++ b/src/app/modules/recipes/mix/add.html
@@ -1,10 +1,10 @@
 <ng-container *ngIf="recipe">
   <cre-action-bar>
     <cre-action-group>
-      <cre-primary-button>Retour</cre-primary-button>
+      <cre-primary-button routerLink="/color/edit/{{recipe.id}}">Retour</cre-primary-button>
     </cre-action-group>
     <cre-action-group>
-      <cre-submit-button [valid]="form.valid">Enregistrer</cre-submit-button>
+      <cre-accent-button [disabled]="!form.valid" (click)="submit(form.formValues)">Enregistrer</cre-accent-button>
     </cre-action-group>
   </cre-action-bar>
 
diff --git a/src/app/modules/recipes/mix/materials-form.html b/src/app/modules/recipes/mix/materials-form.html
index 91d95ca..4c4db10 100644
--- a/src/app/modules/recipes/mix/materials-form.html
+++ b/src/app/modules/recipes/mix/materials-form.html
@@ -8,7 +8,7 @@
   <cre-table [hidden]="materialCount <= 0" class="mx-auto" [dataSource]="mixMaterials" [columns]="columns">
     <ng-container matColumnDef="position">
       <th mat-header-cell *matHeaderCellDef>Position</th>
-      <td mat-cell *matCellDef="let mixMaterial">{{mixMaterial.position + 1}}</td>
+      <td mat-cell *matCellDef="let mixMaterial">{{mixMaterial.position}}</td>
     </ng-container>
 
     <ng-container matColumnDef="positionButtons">
@@ -16,8 +16,10 @@
       <td mat-cell *matCellDef="let mixMaterial">
         <cre-table-position-buttons
           [position]="mixMaterial.position"
-          [min]="0"
-          [max]="mixMaterials.length - 1"
+          [min]="1"
+          [max]="mixMaterials.length"
+          [disableDecreaseButton]="isDecreasePositionButtonDisabled(mixMaterial)"
+          [disableIncreaseButton]="isIncreasePositionButtonDisabled(mixMaterial)"
           (positionChange)="updatePosition(mixMaterial, $event)">
         </cre-table-position-buttons>
       </td>
diff --git a/src/app/modules/recipes/mix/materials-form.ts b/src/app/modules/recipes/mix/materials-form.ts
index 7ecc05c..a90f552 100644
--- a/src/app/modules/recipes/mix/materials-form.ts
+++ b/src/app/modules/recipes/mix/materials-form.ts
@@ -8,6 +8,7 @@ import {takeUntil} from 'rxjs/operators'
 import {CreComboBoxComponent, CreInputEntry} from '../../shared/components/inputs/inputs'
 import {AccountService} from '../../accounts/services/account.service'
 import {Permission} from '../../shared/model/user'
+import {UNIT_MILLILITER} from "../../shared/units";
 
 @Component({
   selector: 'cre-mix-materials-form',
@@ -51,11 +52,11 @@ export class MixMaterialsForm implements AfterViewInit, OnDestroy {
 
   addRow() {
     const position = this.nextPosition
-    const mixMaterial = new MixMaterialDto(null, 0, false, position)
+    const mixMaterial = new MixMaterialDto(null, 0, false, position, UNIT_MILLILITER)
 
-    const materialIdControl = new FormControl(null, Validators.required)
-    const quantityControl = new FormControl(0, Validators.required)
-    const unitsControl = new FormControl(null, Validators.required)
+    const materialIdControl = new FormControl(mixMaterial.materialId, Validators.required)
+    const quantityControl = new FormControl(mixMaterial.quantity, Validators.required)
+    const unitsControl = new FormControl(mixMaterial.units, Validators.required)
 
     materialIdControl.valueChanges
       .pipe(takeUntil(this._destroy$))
@@ -85,7 +86,9 @@ export class MixMaterialsForm implements AfterViewInit, OnDestroy {
   }
 
   removeRow(mixMaterial: MixMaterialDto) {
-    this.mixMaterials = this.mixMaterials.filter(x => x.position != mixMaterial.position)
+    this.mixMaterials = this.mixMaterials.filter(x => x.position !== mixMaterial.position)
+    this._controls = this._controls.filter(x => x.position !== mixMaterial.position)
+    this._availableMaterialsEntries = this._availableMaterialsEntries.filter(x => x.position !== mixMaterial.position)
 
     for (let position = mixMaterial.position + 1; position < this.mixMaterials.length; position++) {
       this.updatePosition(this.getMixMaterialByPosition(position), position - 1, false)
@@ -121,6 +124,23 @@ export class MixMaterialsForm implements AfterViewInit, OnDestroy {
     return mixMaterial.materialId ? this._allMaterials.filter(x => x.id === mixMaterial.materialId)[0].materialType.usePercentages : false
   }
 
+  isDecreasePositionButtonDisabled(mixMaterial: MixMaterialDto): boolean {
+    return mixMaterial.position <= 2 && this.areUnitsPercents(mixMaterial)
+  }
+
+  isIncreasePositionButtonDisabled(mixMaterial: MixMaterialDto): boolean {
+    if (mixMaterial.position === this.mixMaterials.length) {
+      return true
+    }
+
+    if (mixMaterial.position > 1) {
+      return false
+    }
+
+    const nextMixMaterial = this.getMixMaterialByPosition(mixMaterial.position + 1)
+    return this.areUnitsPercents(nextMixMaterial)
+  }
+
   get hasMaterialEditPermission(): boolean {
     return this.accountService.hasPermission(Permission.EDIT_MATERIALS)
   }
@@ -129,6 +149,21 @@ export class MixMaterialsForm implements AfterViewInit, OnDestroy {
     return this._allMaterials ? this._allMaterials.length : 0
   }
 
+  get updatedMixMaterials(): MixMaterialDto[] {
+    const updatedMixMaterials: MixMaterialDto[] = []
+    this.mixMaterials.forEach(mixMaterial => {
+      const controls = this.getControlsByPosition(mixMaterial.position).controls
+      updatedMixMaterials.push({
+        materialId: controls.materialId.value,
+        quantity: controls.quantity.value,
+        position: mixMaterial.position,
+        units: controls.units.value,
+        isPercents: this.areUnitsPercents(mixMaterial)
+      })
+    })
+    return updatedMixMaterials
+  }
+
   get valid(): boolean {
     return this._controls
       .map(controls => controls.controls)
@@ -138,7 +173,7 @@ export class MixMaterialsForm implements AfterViewInit, OnDestroy {
   }
 
   private get nextPosition(): number {
-    return this.mixMaterials.length
+    return this.mixMaterials.length + 1
   }
 
   private getMixMaterialByPosition(position: number): MixMaterialDto {
@@ -170,7 +205,7 @@ export class MixMaterialsForm implements AfterViewInit, OnDestroy {
     return this._allMaterials
       .filter(material => {
         // Prevent use of percents in first position
-        if (material.materialType.usePercentages && mixMaterial.position === 0) {
+        if (material.materialType.usePercentages && mixMaterial.position <= 1) {
           return false
         }
 
diff --git a/src/app/modules/recipes/mix/mix.ts b/src/app/modules/recipes/mix/mix.ts
index 35ccc73..edee932 100644
--- a/src/app/modules/recipes/mix/mix.ts
+++ b/src/app/modules/recipes/mix/mix.ts
@@ -14,6 +14,7 @@ import {Material} from '../../shared/model/material.model'
 import {MaterialService} from '../../material/service/material.service'
 import {CreForm} from '../../shared/components/forms/forms'
 import {MixMaterialsForm} from './materials-form'
+import {MixSaveDto, MixService} from "../services/mix.service";
 
 @Component({
   selector: 'cre-mix-add',
@@ -26,6 +27,7 @@ export class MixAdd extends SubscribingComponent {
   private _recipe: Recipe | null
 
   constructor(
+    private mixService: MixService,
     private recipeService: RecipeService,
     private materialTypeService: MaterialTypeService,
     private materialService: MaterialService,
@@ -49,6 +51,13 @@ export class MixAdd extends SubscribingComponent {
     )
   }
 
+  submit(dto: MixSaveDto) {
+    this.subscribeAndNavigate(
+      this.mixService.saveDto(dto),
+      `/color/edit/${this.recipe.id}`
+    )
+  }
+
   set recipe(recipe: Recipe) {
     this._recipe = recipe
     this.materials$ = this.materialService.getAllForMixCreation(recipe.id)
@@ -110,6 +119,15 @@ export class MixForm {
   @Input() materialTypes: Observable<MaterialType[]>
   @Input() materials: Observable<Material[]>
 
+  get formValues(): MixSaveDto {
+    return {
+      name: this.infoForm.mixName,
+      recipeId: this.recipe.id,
+      materialTypeId: this.infoForm.mixMaterialTypeId,
+      mixMaterials: this.mixMaterialsForm.updatedMixMaterials
+    }
+  }
+
   get valid(): boolean {
     return this.infoForm?.valid && this.mixMaterialsForm?.valid
   }
diff --git a/src/app/modules/recipes/pages/mix/mix-add/mix-add.component.html b/src/app/modules/recipes/pages/mix/mix-add/mix-add.component.html
index 0b94ba5..bfb396a 100644
--- a/src/app/modules/recipes/pages/mix/mix-add/mix-add.component.html
+++ b/src/app/modules/recipes/pages/mix/mix-add/mix-add.component.html
@@ -1,6 +1,6 @@
-<cre-mix-editor
-  *ngIf="recipe && materials"
-  [recipe]="recipe"
-  [materials]="materials"
-  (save)="submit($event)">
-</cre-mix-editor>
+<!--<cre-mix-editor-->
+<!--  *ngIf="recipe && materials"-->
+<!--  [recipe]="recipe"-->
+<!--  [materials]="materials"-->
+<!--  (save)="submit($event)">-->
+<!--</cre-mix-editor>-->
diff --git a/src/app/modules/recipes/pages/mix/mix-add/mix-add.component.ts b/src/app/modules/recipes/pages/mix/mix-add/mix-add.component.ts
index 258319e..7a277a9 100644
--- a/src/app/modules/recipes/pages/mix/mix-add/mix-add.component.ts
+++ b/src/app/modules/recipes/pages/mix/mix-add/mix-add.component.ts
@@ -54,7 +54,7 @@ export class MixAddComponent extends ErrorHandlingComponent {
 
   submit(values) {
     this.subscribeAndNavigate(
-      this.mixService.saveWithUnits(values.name, values.recipeId, values.materialTypeId, values.mixMaterials, values.units),
+      this.mixService.saveWithUnits(values.name, values.recipeId, values.materialTypeId, values.mixMaterials),
       `/color/edit/${this.recipeId}`
     )
   }
diff --git a/src/app/modules/recipes/pages/mix/mix-edit/mix-edit.component.html b/src/app/modules/recipes/pages/mix/mix-edit/mix-edit.component.html
index 8133e72..03e26ae 100644
--- a/src/app/modules/recipes/pages/mix/mix-edit/mix-edit.component.html
+++ b/src/app/modules/recipes/pages/mix/mix-edit/mix-edit.component.html
@@ -1,6 +1,6 @@
-<cre-mix-editor
-  [mixId]="mixId"
-  [recipe]="recipe"
-  [materials]="materials"
-  (save)="submit($event)">
-</cre-mix-editor>
+<!--<cre-mix-editor-->
+<!--  [mixId]="mixId"-->
+<!--  [recipe]="recipe"-->
+<!--  [materials]="materials"-->
+<!--  (save)="submit($event)">-->
+<!--</cre-mix-editor>-->
diff --git a/src/app/modules/recipes/pages/mix/mix-edit/mix-edit.component.ts b/src/app/modules/recipes/pages/mix/mix-edit/mix-edit.component.ts
index 1ab2a1b..cf3c1b5 100644
--- a/src/app/modules/recipes/pages/mix/mix-edit/mix-edit.component.ts
+++ b/src/app/modules/recipes/pages/mix/mix-edit/mix-edit.component.ts
@@ -64,7 +64,7 @@ export class MixEditComponent extends ErrorHandlingComponent {
     }
 
     this.subscribeAndNavigate(
-      this.mixService.updateWithUnits(this.mixId, values.name, values.materialTypeId, values.mixMaterials, values.units),
+      this.mixService.updateWithUnits(this.mixId, values.name, values.materialTypeId, values.mixMaterials),
       `/color/edit/${this.recipeId}`
     )
   }
diff --git a/src/app/modules/recipes/recipes.module.ts b/src/app/modules/recipes/recipes.module.ts
index 2579711..392f961 100644
--- a/src/app/modules/recipes/recipes.module.ts
+++ b/src/app/modules/recipes/recipes.module.ts
@@ -9,7 +9,6 @@ import {RecipeInfoComponent} from './components/recipe-info/recipe-info.componen
 import {MixTableComponent} from './components/mix-table/mix-table.component'
 import {StepListComponent} from './components/step-list/step-list.component'
 import {StepTableComponent} from './components/step-table/step-table.component'
-import {MixEditorComponent} from './components/mix-editor/mix-editor.component'
 import {UnitSelectorComponent} from './components/unit-selector/unit-selector.component'
 import {MixAddComponent} from './pages/mix/mix-add/mix-add.component'
 import {MixEditComponent} from './pages/mix/mix-edit/mix-edit.component'
@@ -32,7 +31,6 @@ import {MixMaterialsForm} from "./mix/materials-form";
     MixTableComponent,
     StepListComponent,
     StepTableComponent,
-    MixEditorComponent,
     UnitSelectorComponent,
     MixAddComponent,
     MixEditComponent,
diff --git a/src/app/modules/recipes/services/mix.service.ts b/src/app/modules/recipes/services/mix.service.ts
index cfd57bf..7466673 100644
--- a/src/app/modules/recipes/services/mix.service.ts
+++ b/src/app/modules/recipes/services/mix.service.ts
@@ -21,8 +21,17 @@ export class MixService {
     return this.api.get<Mix>(`/recipe/mix/${id}`)
   }
 
-  saveWithUnits(name: string, recipeId: number, materialTypeId: number, mixMaterials: MixMaterialDto[], units: string): Observable<void> {
-    return this.save(name, recipeId, materialTypeId, this.convertMixMaterialsToMl(mixMaterials, units))
+  saveDto(dto: MixSaveDto): Observable<void> {
+    return this.saveWithUnits(
+      dto.name,
+      dto.recipeId,
+      dto.materialTypeId,
+      dto.mixMaterials,
+    )
+  }
+
+  saveWithUnits(name: string, recipeId: number, materialTypeId: number, mixMaterials: MixMaterialDto[]): Observable<void> {
+    return this.save(name, recipeId, materialTypeId, this.convertMixMaterialsToMl(mixMaterials))
   }
 
   save(name: string, recipeId: number, materialTypeId: number, mixMaterials: MixMaterialDto[]): Observable<void> {
@@ -36,8 +45,8 @@ export class MixService {
     return this.api.post('/recipe/mix', body)
   }
 
-  updateWithUnits(id: number, name: string, materialTypeId: number, mixMaterials: MixMaterialDto[], units: string): Observable<void> {
-    return this.update(id, name, materialTypeId, this.convertMixMaterialsToMl(mixMaterials, units))
+  updateWithUnits(id: number, name: string, materialTypeId: number, mixMaterials: MixMaterialDto[]): Observable<void> {
+    return this.update(id, name, materialTypeId, this.convertMixMaterialsToMl(mixMaterials))
   }
 
   update(id: number, name: string, materialTypeId: number, mixMaterials: MixMaterialDto[]): Observable<void> {
@@ -56,11 +65,12 @@ export class MixService {
     return this.api.delete(`/recipe/mix/${id}`)
   }
 
-  private convertMixMaterialsToMl(mixMaterials: MixMaterialDto[], units: string): MixMaterialDto[] {
-    return mixMaterials.map(m => {
-      m.quantity = convertMixMaterialQuantity(m, units, UNIT_MILLILITER)
-      return m
-    })
+  private convertMixMaterialsToMl(mixMaterials: MixMaterialDto[]): MixMaterialDto[] {
+    return mixMaterials.map(mixMaterial => ({
+      ...mixMaterial,
+      quantity: convertMixMaterialQuantity(mixMaterial, UNIT_MILLILITER),
+      units: UNIT_MILLILITER
+    }))
   }
 
   private appendMixMaterialsToBody(mixMaterials: MixMaterialDto[], body: any) {
@@ -74,3 +84,10 @@ export class MixService {
   }
 }
 
+export interface MixSaveDto {
+  name: string
+  recipeId: number
+  materialTypeId: number
+  mixMaterials: MixMaterialDto[]
+}
+
diff --git a/src/app/modules/shared/components/inputs/select.html b/src/app/modules/shared/components/inputs/select.html
index e17b4a4..14a03ee 100644
--- a/src/app/modules/shared/components/inputs/select.html
+++ b/src/app/modules/shared/components/inputs/select.html
@@ -1,14 +1,13 @@
 <mat-form-field>
   <mat-label>{{label}}</mat-label>
-  <mat-select [attr.formControl]="control ? control : null">
+  <mat-select [formControl]="control">
     <ng-container *ngIf="entriesAreObservable">
       <ng-container
         *ngFor="let entry of (observableEntries | async)">
         <mat-option [value]="entry.key">{{entry.display || entry.value}}</mat-option>
       </ng-container>
     </ng-container>
-    <ng-container
-      *ngIf="!entriesAreObservable">
+    <ng-container *ngIf="!entriesAreObservable">
       <mat-option *ngFor="let entry of arrayEntries" [value]="entry.key">
         {{entry.display || entry.value}}
       </mat-option>
diff --git a/src/app/modules/shared/components/tables/position-buttons.html b/src/app/modules/shared/components/tables/position-buttons.html
index cb85502..f953d7b 100644
--- a/src/app/modules/shared/components/tables/position-buttons.html
+++ b/src/app/modules/shared/components/tables/position-buttons.html
@@ -3,14 +3,14 @@
     mat-mini-fab
     color="primary"
     class="mr-1"
-    [disabled]="position <= min"
+    [disabled]="disableDecreaseButton || position <= min"
     (click)="decreasePosition()">
     <mat-icon svgIcon="arrow-up"></mat-icon>
   </button>
   <button
     mat-mini-fab
     color="primary"
-    [disabled]="position >= max"
+    [disabled]="disableIncreaseButton || position >= max"
     (click)="increasePosition()">
     <mat-icon svgIcon="arrow-down"></mat-icon>
   </button>
diff --git a/src/app/modules/shared/components/tables/tables.ts b/src/app/modules/shared/components/tables/tables.ts
index b98a7a3..c555716 100644
--- a/src/app/modules/shared/components/tables/tables.ts
+++ b/src/app/modules/shared/components/tables/tables.ts
@@ -95,6 +95,8 @@ export class CrePositionButtons {
   @Input() min = 0
   @Input() max: number
   @Input() hidden = false
+  @Input() disableDecreaseButton = false
+  @Input() disableIncreaseButton = false
 
   @Output() positionChange = new EventEmitter<number>();
 
diff --git a/src/app/modules/shared/model/recipe.model.ts b/src/app/modules/shared/model/recipe.model.ts
index 3b096e0..b0849cd 100644
--- a/src/app/modules/shared/model/recipe.model.ts
+++ b/src/app/modules/shared/model/recipe.model.ts
@@ -1,6 +1,7 @@
 import {Material} from './material.model'
 import {Company} from './company.model'
 import {Group} from './user'
+import {UNIT_MILLILITER} from "../units";
 
 export class Recipe {
   public id: number
@@ -53,7 +54,8 @@ export class MixMaterialDto {
     public materialId: number,
     public quantity: number,
     public isPercents: boolean,
-    public position: number
+    public position: number,
+    public units: string
   ) {
   }
 }
@@ -103,7 +105,8 @@ export function mixMaterialsAsMixMaterialsDto(mix: Mix): MixMaterialDto[] {
     m.material.id,
     m.quantity,
     m.material.materialType.usePercentages,
-    m.position
+    m.position,
+    UNIT_MILLILITER
   )))
 }
 
diff --git a/src/app/modules/shared/units.ts b/src/app/modules/shared/units.ts
index 403f136..adbb475 100644
--- a/src/app/modules/shared/units.ts
+++ b/src/app/modules/shared/units.ts
@@ -25,8 +25,8 @@ export const UNIT_RATIOS = {
   }
 }
 
-export function convertMixMaterialQuantity(computedQuantity: MixMaterialDto, from: string, to: string): number {
-  return !computedQuantity.isPercents ? convertQuantity(computedQuantity.quantity, from, to) : computedQuantity.quantity
+export function convertMixMaterialQuantity(mixMaterial: MixMaterialDto, to: string): number {
+  return !mixMaterial.isPercents ? convertQuantity(mixMaterial.quantity, mixMaterial.units, to) : mixMaterial.quantity
 }
 
 export function convertQuantity(quantity: number, from: string, to: string): number {