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
index 0e9faf0..f9081ac 100644
--- a/src/app/modules/recipes/components/mix-editor/mix-editor.component.html
+++ b/src/app/modules/recipes/components/mix-editor/mix-editor.component.html
@@ -1,7 +1,7 @@
-<ng-container *ngIf="recipe && materials && (!editionMode || mix)">
+<ng-container *ngIf="controls && recipe && materials && (!editionMode || mix)">
   <cre-action-bar>
     <cre-action-group>
-      <cre-primary-button routerLink="/color/edit/{{recipeId}}">Retour</cre-primary-button>
+      <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>
@@ -18,8 +18,8 @@
 
     <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-select [control]="controls.materialType" label="Type de produit"-->
+      <!--                  [entries]="materialTypeEntries$"></cre-select>-->
     </cre-form-content>
   </cre-form>
 </ng-container>
@@ -71,7 +71,7 @@
       <!--      </mat-form-field>-->
 
 
-      <cre-select [entries]="getAvailableMaterials(mixMaterial)"></cre-select>
+      <!--      <cre-select [entries]="getAvailableMaterials(mixMaterial)"></cre-select>-->
     </td>
   </ng-container>
 
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
index 325729c..d795617 100644
--- a/src/app/modules/recipes/components/mix-editor/mix-editor.component.ts
+++ b/src/app/modules/recipes/components/mix-editor/mix-editor.component.ts
@@ -20,7 +20,7 @@ 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, tap} from 'rxjs/operators';
+import {map} from 'rxjs/operators';
 import {CreInputEntry} from '../../../shared/components/inputs/inputs';
 import {CreForm, ICreForm} from '../../../shared/components/forms/forms';
 
@@ -30,19 +30,17 @@ import {CreForm, ICreForm} from '../../../shared/components/forms/forms';
   styleUrls: ['./mix-editor.component.sass']
 })
 export class MixEditorComponent extends ErrorHandlingComponent {
-  @ViewChild('matTable') mixTable: MatTable<MixMaterial>
+  @ViewChild(MatTable, {static: true}) mixTable: MatTable<MixMaterial>
   @ViewChild('deleteConfirmBox') deleteConfirmBox: ConfirmBoxComponent
   @ViewChild(CreForm) creForm: ICreForm
 
   @Input() mixId: number | null
-  @Input() recipeId: number | null
-  @Input() materials: Material[]
+  @Input() recipe: Recipe
+  @Input() mix: Mix | null
+  @Input() materials: Material[] = []
 
   @Output() save = new EventEmitter<any>()
 
-  recipe: Recipe
-  mix: Mix | null
-
   editionMode = false
   units = UNIT_MILLILITER
   hoveredMixMaterial: MixMaterial | null
@@ -92,33 +90,14 @@ export class MixEditorComponent extends ErrorHandlingComponent {
       this.editionMode = true
     }
 
-    this.fetchRecipe()
-    this.fetchMaterials()
-  }
+    if (this.editionMode) {
+      this.mix = this.recipe.mixes.find(mix => mix.id === this.mixId)
+      this.mixMaterials = mixMaterialsAsMixMaterialsDto(this.mix)
+    } else {
+      this.addBlankMixMaterial()
+    }
 
-  private fetchRecipe() {
-    this.subscribe(
-      this.recipeService.getById(this.recipeId),
-      recipe => {
-        this.recipe = recipe
-
-        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 fetchMaterials() {
-    this.subscribe(
-      this.materialService.all,
-      materials => this.materials = materials
-    )
+    this.createControls()
   }
 
   private createControls() {
@@ -167,7 +146,7 @@ export class MixEditorComponent extends ErrorHandlingComponent {
   submit() {
     this.save.emit({
       name: this.controls.name.value,
-      recipeId: this.recipeId,
+      recipeId: this.recipe.id,
       materialTypeId: this.controls.materialType.value,
       mixMaterials: this.mixMaterials,
       units: this.units
@@ -176,7 +155,7 @@ export class MixEditorComponent extends ErrorHandlingComponent {
 
   delete() {
     this.deleting = true
-    this.subscribeAndNavigate(this.mixService.delete(this.mixId), `/color/edit/${this.recipeId}`)
+    this.subscribeAndNavigate(this.mixService.delete(this.mixId), `/color/edit/${this.recipe.id}`)
   }
 
   getAvailableMaterials(mixMaterial: MixMaterialDto): CreInputEntry[] {
@@ -187,8 +166,10 @@ export class MixEditorComponent extends ErrorHandlingComponent {
     //   map(materials => this.sortedMaterials(materials)),
     //   map(materials => materials.map(material => new CreInputEntry(material.id, material.name)))
     // )
-    console.log(this.materials.map(material => new CreInputEntry(material.id, material.name)))
-    return []
+    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)
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 128e7d2..0b94ba5 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,5 +1,6 @@
 <cre-mix-editor
-  [recipeId]="recipeId"
+  *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 0cae5af..258319e 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
@@ -5,6 +5,8 @@ import {ActivatedRoute, Router} from '@angular/router'
 import {ErrorHandlingComponent} from '../../../../shared/components/subscribing.component'
 import {MixService} from '../../../services/mix.service'
 import {ErrorService} from '../../../../shared/service/error.service'
+import {Recipe} from "../../../../shared/model/recipe.model";
+import {RecipeService} from "../../../services/recipe.service";
 
 @Component({
   selector: 'cre-mix-add',
@@ -12,10 +14,13 @@ import {ErrorService} from '../../../../shared/service/error.service'
   styleUrls: ['./mix-add.component.sass']
 })
 export class MixAddComponent extends ErrorHandlingComponent {
-  recipeId: number | null
-  materials: Material[] | null
+  materials: Material[] | null = [new Material(0, "Example", 1000, null, null)]
+  recipe: Recipe | null
+
+  private recipeId: number | null
 
   constructor(
+    private recipeService: RecipeService,
     private materialService: MaterialService,
     private mixService: MixService,
     errorService: ErrorService,
@@ -29,10 +34,21 @@ export class MixAddComponent extends ErrorHandlingComponent {
     super.ngOnInit()
 
     this.recipeId = this.urlUtils.parseIntUrlParam('recipeId')
+    this.fetchRecipe()
+    // this.fetchMaterials()
+  }
 
+  private fetchRecipe() {
+    this.subscribe(
+      this.recipeService.getById(this.recipeId),
+      recipe => this.recipe = recipe
+    )
+  }
+
+  private fetchMaterials() {
     this.subscribe(
       this.materialService.getAllForMixCreation(this.recipeId),
-      m => this.materials = m
+      materials => this.materials = materials
     )
   }
 
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 762bae6..8133e72 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"
-  [recipeId]="recipeId"
+  [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 5b360fd..1ab2a1b 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
@@ -4,9 +4,10 @@ import {ErrorHandlingComponent} from '../../../../shared/components/subscribing.
 import {Material} from '../../../../shared/model/material.model'
 import {MaterialService} from '../../../../material/service/material.service'
 import {MixService} from '../../../services/mix.service'
-import {ErrorHandlerComponent, ErrorService} from '../../../../shared/service/error.service'
-import {MixMaterialDto} from '../../../../shared/model/recipe.model'
+import {ErrorService} from '../../../../shared/service/error.service'
+import {MixMaterialDto, Recipe} from '../../../../shared/model/recipe.model'
 import {AlertService} from '../../../../shared/service/alert.service'
+import {RecipeService} from "../../../services/recipe.service";
 
 @Component({
   selector: 'cre-mix-edit',
@@ -15,10 +16,13 @@ import {AlertService} from '../../../../shared/service/alert.service'
 })
 export class MixEditComponent extends ErrorHandlingComponent {
   mixId: number | null
-  recipeId: number | null
+  recipe: Recipe | null
   materials: Material[] | null
 
+  private recipeId: number | null
+
   constructor(
+    private recipeService: RecipeService,
     private materialService: MaterialService,
     private mixService: MixService,
     private alertService: AlertService,
@@ -35,9 +39,21 @@ export class MixEditComponent extends ErrorHandlingComponent {
     this.mixId = this.urlUtils.parseIntUrlParam('id')
     this.recipeId = this.urlUtils.parseIntUrlParam('recipeId')
 
+    this.fetchRecipe()
+    this.fetchMaterials()
+  }
+
+  private fetchRecipe() {
+    this.subscribe(
+      this.recipeService.getById(this.recipeId),
+      recipe => this.recipe = recipe
+    )
+  }
+
+  private fetchMaterials() {
     this.subscribe(
       this.materialService.getAllForMixUpdate(this.mixId),
-      m => this.materials = m
+      materials => this.materials = materials
     )
   }
 
diff --git a/src/app/modules/shared/components/inputs/inputs.ts b/src/app/modules/shared/components/inputs/inputs.ts
index a9e105f..dd74af5 100644
--- a/src/app/modules/shared/components/inputs/inputs.ts
+++ b/src/app/modules/shared/components/inputs/inputs.ts
@@ -399,8 +399,12 @@ export class CreSliderInputComponent {
   selector: 'cre-select',
   templateUrl: 'select.html'
 })
-export class CreSelectComponent extends _CreInputBase {
-  @Input() entries: Observable<CreInputEntry[]> | CreInputEntry[]
+export class CreSelectComponent extends _CreInputBase implements AfterViewInit {
+  @Input() entries: CreInputEntry[] | Observable<CreInputEntry[]>
+
+  ngAfterViewInit(): void {
+    console.log(this.entries)
+  }
 
   get entriesAreObservable(): boolean {
     return isObservable(this.entries)