diff --git a/src/plugins/pricelist/pages/CocktailBuilder.vue b/src/plugins/pricelist/pages/CocktailBuilder.vue
index eb572e7..3193fd6 100644
--- a/src/plugins/pricelist/pages/CocktailBuilder.vue
+++ b/src/plugins/pricelist/pages/CocktailBuilder.vue
@@ -5,11 +5,10 @@
     </q-card-section>
     <q-card-section>
       <ingredients
+        v-model="volume.ingredients"
         class="q-pa-sm"
-        :volume="volume"
-        :ingredients="volume.ingredients"
-        @addIngredient="addIngredient"
-        @deleteIngredient="deleteIngredient"
+        editable
+        @update:modelValue="update"
       />
     </q-card-section>
     <q-card-section>
@@ -30,34 +29,14 @@
 import { defineComponent, onBeforeMount, ref } from 'vue';
 import Ingredients from 'src/plugins/pricelist/components/CalculationTable/Ingredients.vue';
 import { DrinkPriceVolume, usePricelistStore } from 'src/plugins/pricelist/store';
+import { calc_min_prices } from '../utils/utils';
 export default defineComponent({
   name: 'CocktailBuilder',
   components: { Ingredients },
   setup() {
     onBeforeMount(() => {
       void store.get_min_prices().finally(() => {
-        store.min_prices.forEach((min_price) => {
-          (<DrinkPriceVolume>volume.value).min_prices.push({
-            percentage: min_price,
-            price: /*computed<number>(() => {
-              let retVal = 0;
-              let extraIngredientPrice = 0;
-              volume.value.ingredients.forEach((ingredient) => {
-                if (ingredient.drink_ingredient) {
-                  const _drink = store.drinks.find(
-                    (a) => a.id === ingredient.drink_ingredient?.ingredient_id
-                  );
-                  retVal +=
-                    ingredient.drink_ingredient.volume * <number>(<unknown>_drink?.cost_per_volume);
-                }
-                if (ingredient.extra_ingredient) {
-                  extraIngredientPrice += ingredient.extra_ingredient.price;
-                }
-              });
-              return (retVal * min_price) / 100 + extraIngredientPrice;
-            }) */ 0,
-          });
-        });
+        volume.value.min_prices = calc_min_prices(volume.value, undefined, store.min_prices);
       });
       void store.getDrinks();
       void store.getDrinkTypes();
@@ -74,17 +53,11 @@ export default defineComponent({
     };
     const volume = ref(emptyVolume);
 
-    function addIngredient(ingredient: FG.Ingredient) {
-      volume.value.ingredients.push(ingredient);
-    }
-    function deleteIngredient(ingredient: FG.Ingredient) {
-      const index = volume.value.ingredients.findIndex((a) => a.id === ingredient.id);
-      if (index > -1) {
-        volume.value.ingredients.splice(index, 1);
-      }
+    function update() {
+      volume.value.min_prices = calc_min_prices(volume.value, undefined, store.min_prices);
     }
 
-    return { volume, addIngredient, deleteIngredient };
+    return { volume, update };
   },
 });
 </script>