diff --git a/src/main/frontend/src/app/modules/colors/components/mixes-card/mixes-card.component.html b/src/main/frontend/src/app/modules/colors/components/mixes-card/mixes-card.component.html
new file mode 100644
index 0000000..f22e4d6
--- /dev/null
+++ b/src/main/frontend/src/app/modules/colors/components/mixes-card/mixes-card.component.html
@@ -0,0 +1,29 @@
+
+
+ Mélanges
+
+
+
+ >
+
+
+
+
+
+
+
diff --git a/src/main/frontend/src/app/modules/colors/components/mixes-card/mixes-card.component.sass b/src/main/frontend/src/app/modules/colors/components/mixes-card/mixes-card.component.sass
new file mode 100644
index 0000000..70d750c
--- /dev/null
+++ b/src/main/frontend/src/app/modules/colors/components/mixes-card/mixes-card.component.sass
@@ -0,0 +1,3 @@
+mat-card
+ background-color: rgba(255, 255, 255, 0.5)
+ min-width: 20rem
diff --git a/src/main/frontend/src/app/modules/colors/components/mixes-card/mixes-card.component.ts b/src/main/frontend/src/app/modules/colors/components/mixes-card/mixes-card.component.ts
new file mode 100644
index 0000000..63ee4e8
--- /dev/null
+++ b/src/main/frontend/src/app/modules/colors/components/mixes-card/mixes-card.component.ts
@@ -0,0 +1,21 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {Recipe} from "../../../shared/model/recipe.model";
+import {Subject} from "rxjs";
+
+@Component({
+ selector: 'cre-mixes-card',
+ templateUrl: './mixes-card.component.html',
+ styleUrls: ['./mixes-card.component.sass']
+})
+export class MixesCardComponent {
+ @Input() recipe: Recipe
+ @Input() units$: Subject
+ @Input() deductErrorBody: any
+ @Input() printingError = 2
+ @Input() editionMode = false
+
+ @Output() locationChange = new EventEmitter<{ id: number, location: string }>()
+ @Output() quantityChange = new EventEmitter<{ id: number, materialId: number, quantity: number }>()
+ @Output() deduct = new EventEmitter()
+ @Output() printingErrorChange = new EventEmitter()
+}