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 34a267b..7417836 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
@@ -75,7 +75,7 @@
             [value]="mixMaterial.materialId"
             (valueChange)="setMixMaterialMaterial(mixMaterial, $event)">
             <mat-option
-              *ngFor="let material of getAvailableMaterials(mixMaterial)"
+              *ngFor="let material of sortedMaterials(getAvailableMaterials(mixMaterial))"
               [value]="material.id">
               {{materialDisplayName(material)}}
             </mat-option>
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 961e3dc..a0bdfef 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
@@ -4,7 +4,7 @@ import {
   MixMaterial,
   MixMaterialDto,
   mixMaterialsAsMixMaterialsDto,
-  Recipe, RecipeStep,
+  Recipe,
   sortMixMaterialsDto
 } from '../../../shared/model/recipe.model'
 import {ErrorHandlingComponent} from '../../../shared/components/subscribing.component'
@@ -162,6 +162,30 @@ export class MixEditorComponent extends ErrorHandlingComponent {
     return material.name
   }
 
+  sortedMaterials(materials: Material[]): Material[] {
+    return materials.sort((a, b) => {
+      const aPrefixName = a.materialType.prefix.toLowerCase()
+      const bPrefixName = b.materialType.prefix.toLowerCase()
+
+      if (aPrefixName < bPrefixName) {
+        return -1
+      } else if (aPrefixName > bPrefixName) {
+        return 1
+      } else {
+        const aName = a.name.toLowerCase()
+        const bName = b.name.toLowerCase()
+
+        if (aName < bName) {
+          return -1
+        } else if (aName > bName) {
+          return 1
+        } else {
+          return 0
+        }
+      }
+    })
+  }
+
   get canDeleteMix() {
     return this.accountService.hasPermission(EmployeePermission.REMOVE_RECIPES)
   }
diff --git a/src/app/modules/material/service/material.service.ts b/src/app/modules/material/service/material.service.ts
index ddf0ca4..709f0f1 100644
--- a/src/app/modules/material/service/material.service.ts
+++ b/src/app/modules/material/service/material.service.ts
@@ -45,7 +45,7 @@ export class MaterialService {
     const body = new FormData()
     body.append('name', name)
     body.append('inventoryQuantity', inventoryQuantity.toString())
-    body.append('materialType', materialType.toString())
+    body.append('materialTypeId', materialType.toString())
     if (simdutFile && simdutFile.files) {
       body.append('simdutFile', simdutFile.files[0])
     }
@@ -57,7 +57,7 @@ export class MaterialService {
     body.append('id', id.toString())
     body.append('name', name)
     body.append('inventoryQuantity', inventoryQuantity.toString())
-    body.append('materialType', materialType.toString())
+    body.append('materialTypeId', materialType.toString())
     if (simdutFile) {
       body.append('simdutFile', simdutFile)
     }