diff --git a/src/flaschengeist.d.ts b/src/flaschengeist.d.ts
index ec9cc9d..a69c5f1 100644
--- a/src/flaschengeist.d.ts
+++ b/src/flaschengeist.d.ts
@@ -1,101 +1,121 @@
 declare namespace FG {
-	interface Session {
-		expires: Date;
-		token: string;
-		lifetime: number;
-		browser: string;
-		platform: string;
-		userid: string;
-	}
-	interface User {
-		userid: string;
-		display_name: string;
-		firstname: string;
-		lastname: string;
-		mail: string;
-		birthday?: any;
-		roles: Array<string>;
-		permissions?: any;
-		avatar_url?: any;
-	}
-	type Permission = string;
-	interface Role {
-		id: number;
-		name: string;
-		permissions: Array<Permission>;
-	}
-	interface Transaction {
-		id: number;
-		time: Date;
-		amount: number;
-		reversal_id: number;
-		sender_id?: any;
-		receiver_id?: any;
-		author_id?: any;
-		original_id?: any;
-	}
-	interface Drink {
-		id: number;
-		name: string;
-		volume: number;
-		cost_price: number;
-		discount: number;
-		extra_charge?: any;
-		prices: Array<DrinkPrice>;
-		ingredients: Array<Ingredient>;
-		tags: Array<any>;
-	}
-	interface DrinkPrice {
-		id: number;
-		volume: number;
-		price: number;
-		no_auto: boolean;
-		public: boolean;
-		description?: any;
-		round_step: number;
-	}
-	interface DrinkType {
-		id: number;
-		name: string;
-	}
-	interface Ingredient {
-		id: number;
-		volume: number;
-		drink_parent_id: number;
-		drink_ingredient_id: number;
-		drink_ingredient?: any;
-	}
-	interface Tag {
-		id: number;
-		name: string;
-	}
-	interface Event {
-		id: number;
-		start: Date;
-		end: Date;
-		description?: any;
-		type: EventType;
-		jobs: Array<Job>;
-	}
-	interface EventType {
-		id: number;
-		name: string;
-	}
-	interface Job {
-		id: number;
-		start: Date;
-		end?: any;
-		comment: string;
-		type: JobType;
-		services: Array<Service>;
-		required_services: number;
-	}
-	interface JobType {
-		id: number;
-		name: string;
-	}
-	interface Service {
-		userid: string;
-		value: number;
-	}
+  interface Session {
+    expires: Date;
+    token: string;
+    lifetime: number;
+    browser: string;
+    platform: string;
+    userid: string;
+  }
+  interface User {
+    userid: string;
+    display_name: string;
+    firstname: string;
+    lastname: string;
+    mail: string;
+    birthday?: Date;
+    roles: Array<string>;
+    permissions?: string[];
+    avatar_url?: string;
+  }
+  type Permission = string;
+  interface Role {
+    id: number;
+    name: string;
+    permissions: Array<Permission>;
+  }
+  interface Transaction {
+    id: number;
+    time: Date;
+    amount: number;
+    reversal_id: number;
+    sender_id?: number;
+    receiver_id?: number;
+    author_id?: number;
+    original_id?: number;
+  }
+  interface Drink {
+    id: number;
+    article_id?: string;
+    package_size?: number;
+    name: string;
+    volume?: number;
+    cost_price_pro_volume?: number;
+    cost_price_package_netto?: number;
+    tags: Array<Tag>;
+    type: DrinkType;
+    volumes: DrinkPriceVolume[];
+  }
+  interface DrinkIngredient {
+    id: number;
+    volume: number;
+    drink_ingredient_id: number;
+    drink_ingredient?: Drink;
+    price: number;
+  }
+  interface DrinkPrice {
+    id: number;
+    price: number;
+    public: boolean;
+    description?: string;
+  }
+  interface DrinkMinPrice {
+    percentage: number;
+    price: number;
+  }
+  interface DrinkPriceVolume {
+    id: number;
+    volume: number;
+    min_prices: DrinkMinPrice[];
+    prices: Array<DrinkPrice>;
+    ingredients: Array<DrinkIngredient & ExtraIngredient>;
+  }
+  interface DrinkType {
+    id: number;
+    name: string;
+  }
+  interface ExtraIngredient {
+    id: number;
+    name: string;
+    price: number;
+  }
+  interface Ingredient {
+    id: number;
+    volume_id: number;
+    drink_ingredient: DrinkIngredient | null;
+    extra_ingredient: ExtraIngredient | null;
+  }
+  interface Tag {
+    id: number;
+    name: string;
+  }
+  interface Event {
+    id: number;
+    start: Date;
+    end: Date;
+    description?: string;
+    type: EventType;
+    jobs: Array<Job>;
+  }
+  interface EventType {
+    id: number;
+    name: string;
+  }
+  interface Job {
+    id: number;
+    start: Date;
+    end?: Date;
+    comment: string;
+    type: JobType;
+    services: Array<Service>;
+    required_services: number;
+  }
+  interface JobType {
+    id: number;
+    name: string;
+  }
+  interface Service {
+    userid: string;
+    value: number;
+  }
 }
diff --git a/src/plugins/pricelist/components/CalculationTable.vue b/src/plugins/pricelist/components/CalculationTable.vue
index 2bfd96d..5ce69a9 100644
--- a/src/plugins/pricelist/components/CalculationTable.vue
+++ b/src/plugins/pricelist/components/CalculationTable.vue
@@ -3,7 +3,7 @@
     <q-table
       title="Kalkulationstabelle"
       :columns="columns"
-      :data="test"
+      :data="drinks"
       :visible-columns="visibleColumn"
       :dense="$q.screen.lt.md"
     >
@@ -22,10 +22,10 @@
           options-cover
         />
       </template>
-      <template v-slot:body-cell-price_calc="price_calc">
+      <template v-slot:body-cell-volumes="volumes">
         <q-table
           :columns="column_calc"
-          :data="price_calc.value"
+          :data="volumes.value"
           dense
           :visible-columns="visibleColumn"
           row-key="id"
@@ -34,8 +34,8 @@
           <template v-slot:header="props">
             <q-tr :props="props">
               <q-th auto-width />
-              <q-th v-for="(col, index) in props.cols" :key="col + index" :props="props">
-                {{ col }}
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                {{ col.label }}
               </q-th>
             </q-tr>
           </template>
@@ -62,7 +62,7 @@
                     <div class="col">
                       <q-badge color="primary">{{ min_price.percentage }}%</q-badge>
                     </div>
-                    <div class="col" style="text-align: end;">
+                    <div class="col" style="text-align: end">
                       {{ parseFloat(min_price.price).toFixed(3) }}€
                     </div>
                   </div>
@@ -83,30 +83,67 @@
                           :key="col.name"
                           :props="prices_props"
                         >
-                          {{ col.value }}
+                          <div v-if="col.name == 'public'" class="full-width">
+                            <q-toggle
+                              v-model="col.value"
+                              dense
+                              @input="updatePrice(prices_props.row, props.row)"
+                            />
+                          </div>
+                          <div v-else class="full-width">
+                            {{ col.value }}
+                          </div>
                         </q-td>
                         <q-td>
                           <q-btn
                             color="negative"
+                            padding="xs"
                             round
                             size="xs"
                             icon="mdi-delete"
-                            @click="deletePrice(prices_props.row)"
-                            v-if="!prices_props.row.to_delete"
+                            @click="deletePrice(prices_props.row, props.row)"
                           />
-                          <q-btn color="positive" size="xs" label="Speichern" v-else />
                         </q-td>
                       </q-tr>
                     </template>
                     <template v-slot:bottom>
                       <div class="full-width row justify-end">
-                        <q-btn
-                          size="xs"
-                          icon-right="add"
-                          color="positive"
-                          label="Preis hinzufügen"
-                          @click="addPrice(col.value)"
-                        />
+                        <q-btn size="xs" icon-right="add" color="positive" label="Preis hinzufügen">
+                          <q-menu anchor="center middle" self="center middle">
+                            <div class="row justify-around q-pa-sm">
+                              <q-input
+                                v-model.number="newPrice.price"
+                                dense
+                                filled
+                                class="q-px-sm"
+                                type="number"
+                                label="Preis"
+                              />
+                              <q-input
+                                v-model="newPrice.description"
+                                dense
+                                filled
+                                class="q-px-sm"
+                                label="Beschreibung"
+                              />
+                              <q-toggle
+                                v-model="newPrice.public"
+                                dense
+                                class="q-px-sm"
+                                label="Öffentlich"
+                              />
+                            </div>
+                            <div class="row justify-between q-pa-sm">
+                              <q-btn label="Abbrechen" @click="cancelAddPrice" v-close-popup />
+                              <q-btn
+                                label="Speichern"
+                                color="primary"
+                                @click="addPrice(props.row)"
+                                v-close-popup
+                              />
+                            </div>
+                          </q-menu>
+                        </q-btn>
                       </div>
                     </template>
                     <template v-slot:no-data class="justify-end">
@@ -130,31 +167,39 @@
             <q-tr v-show="props.expand" :props="props">
               <q-td colspan="100%">
                 <div
-                  v-for="(ingredient, index) in props.row.ingredients"
-                  :key="`${props.key}_${index}`"
+                  v-for="ingredient in props.row.ingredients"
+                  :key="`volume:${props.row.id},ingredient:${ingredient.id}`"
                   class="full-width row justify-evenly q-py-xs"
                 >
-                  <q-select
-                    class="col q-px-sm"
-                    label="Getränk"
-                    filled
-                    dense
-                    :options="test"
-                    option-label="name"
-                    v-model="ingredient.drink"
-                    @input="calc_min_prices(props.row)"
-                  />
-                  <q-input
-                    class="col q-px-sm"
-                    label="Volume in L"
-                    type="number"
-                    filled
-                    dense
-                    v-model="ingredient.volume"
-                    @change="calc_min_prices(props.row)"
-                    step="0.01"
-                    min="0"
-                  />
+                  <div
+                    class="full-width row justify-evenly q-py-xs"
+                    v-if="ingredient.drink_ingredient"
+                  >
+                    <q-select
+                      class="col q-px-sm"
+                      label="Getränk"
+                      filled
+                      dense
+                      :options="drinks"
+                      option-label="name"
+                      v-model="ingredient.drink_ingredient"
+                      @input="calc_min_prices(props.row)"
+                    />
+                    <q-input
+                      class="col q-px-sm"
+                      label="Volume in L"
+                      type="number"
+                      filled
+                      dense
+                      v-model.number="ingredient.volume"
+                      @change="calc_min_prices(props.row)"
+                      step="0.01"
+                      min="0"
+                    />
+                  </div>
+                  <div v-else-if="ingredient.name">
+                    {{ ingredient.name }} {{ ingredient.price }}
+                  </div>
                 </div>
                 <div class="full-width row justify-end q-py-xs">
                   <q-btn
@@ -162,7 +207,7 @@
                     icon-right="add"
                     color="positive"
                     label="Zutat hinzufügen"
-                    @click="addIngredient(props.row.ingredients)"
+                    @click="addIngredient(props.row.ingredients, props.row.id)"
                     @change="calc_min_prices(props.row)"
                   />
                 </div>
@@ -176,7 +221,7 @@
                 icon-right="add"
                 label="Abgabe hinzufügen"
                 size="xs"
-                @click="addVolume(price_calc.value)"
+                @click="addVolume(volumes.value)"
               />
             </div>
           </template>
@@ -187,280 +232,181 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onBeforeMount, ref } from '@vue/composition-api';
-import { Store } from 'vuex';
-import { StateInterface } from '../../../store';
-import { DrinkInterface } from '../store/drinks';
+import { defineComponent, onBeforeMount, ref, computed } from '@vue/composition-api';
+import store, { calc_min_prices } from '../store/altStore';
 import { v4 } from 'uuid';
 export default defineComponent({
   name: 'CalculationTable',
   setup(_, { root }) {
-    const store = <Store<StateInterface>>root.$store;
-    const state = <DrinkInterface>store.state.drink;
-    const drinks = ref();
     onBeforeMount(() => {
-      void store
-        .dispatch('drink/getDrinks')
-        .then(() => (drinks.value = drinks.value = state.drinks));
+      store.actions.getDrinks();
     });
 
     const columns = [
       {
         name: 'name',
         label: 'Getränkename',
-        field: 'name'
+        field: 'name',
       },
       {
         name: 'article_id',
         label: 'Artikelnummer',
-        field: 'article_id'
+        field: 'article_id',
       },
       {
-        name: 'drink_kind',
+        name: 'drink_type',
         label: 'Kategorie',
-        field: 'drink_kind'
+        field: 'type',
+        format: (val: FG.DrinkType) => `${val.name}`,
       },
       {
         name: 'volume_package',
         label: 'Inhalt in l des Gebinde',
-        field: 'volume_package'
+        field: 'volume',
       },
       {
         name: 'package_size',
         label: 'Gebindegröße',
-        field: 'package_size'
+        field: 'package_size',
       },
       {
         name: 'cost_price_package_netto',
         label: 'Preis Netto/Gebinde',
         field: 'cost_price_package_netto',
-        format: (val: number) => `${val.toFixed(3)}€`
+        format: (val: number | null) => (val ? `${val.toFixed(3)}€` : ''),
       },
       {
         name: 'cost_price_pro_volume',
         label: 'Preis mit 19%/Liter',
         field: 'cost_price_pro_volume',
-        format: (val: number) => `${val.toFixed(3)}€`
+        format: (val: number | null) => (val ? `${val.toFixed(3)}€` : ''),
       },
       {
-        name: 'price_calc',
+        name: 'volumes',
         label: 'Preiskalkulation',
-        field: 'price_calc'
-      }
+        field: 'volumes',
+      },
     ];
     const column_calc = [
       {
         name: 'volume',
         label: 'Abgabe in l',
         field: 'volume',
-        format: (val: number) => `${val} L`
+        format: (val: number) => `${val} L`,
       },
       {
         name: 'min_prices',
         label: 'Minimal Preise',
-        field: 'min_prices'
+        field: 'min_prices',
       },
       {
         name: 'prices',
         label: 'Preise',
-        field: 'prices'
-      }
+        field: 'prices',
+      },
     ];
     const column_prices = [
       {
         name: 'price',
         label: 'Preis',
         field: 'price',
-        format: (val: number) => `${val.toFixed(2)}€`
+        format: (val: number) => `${val.toFixed(2)}€`,
       },
       {
         name: 'description',
         label: 'Beschreibung',
-        field: 'description'
-      }
-    ];
-    const test = ref([
-      {
-        name: 'Elbhang Rot',
-        article_id: 41807,
-        drink_kind: 'Bier',
-        volume_package: 50,
-        package_size: 1,
-        cost_price_package_netto: 97,
-        cost_price_pro_volume: 2.309,
-        price_calc: [
-          {
-            id: v4(),
-            volume: 0.5,
-            min_prices: [
-              {
-                percentage: 100,
-                price: 1.15
-              },
-              {
-                percentage: 250,
-                price: 2.875
-              },
-              {
-                percentage: 300,
-                price: 3.45
-              }
-            ],
-            prices: [
-              { price: 2, description: '', to_delete: false },
-              { price: 1.4, description: 'Club intern', to_delete: false },
-              {
-                price: 1.6,
-                description: 'Club extern',
-                to_delete: false
-              }
-            ]
-          }
-        ]
+        field: 'description',
       },
       {
-        name: 'Sinalco Cola',
-        article_id: 443,
-        drink_kind: 'AFG',
-        volume_package: 1,
-        package_size: 12,
-        cost_price_package_netto: 7.28,
-        cost_price_pro_volume: 0.722,
-        price_calc: [
-          {
-            id: v4(),
-            volume: 0.2,
-            min_prices: [
-              {
-                percentage: 100,
-                price: 0.14
-              },
-              {
-                percentage: 250,
-                price: 0.35
-              },
-              {
-                percentage: 300,
-                price: 0.42
-              }
-            ],
-            prices: [
-              {
-                price: 1,
-                description: 'klein',
-                to_delete: false
-              },
-              { price: 0.5, description: 'klein club intern', to_delete: false }
-            ]
-          },
-          {
-            id: v4(),
-            volume: 0.4,
-            min_prices: [
-              {
-                percentage: 100,
-                price: 0.289
-              },
-              {
-                percentage: 250,
-                price: 0.722
-              },
-              {
-                percentage: 300,
-                price: 0.866
-              }
-            ],
-            prices: [
-              {
-                price: 1.8,
-                description: 'groß',
-                to_delet: false
-              },
-              { price: 1, description: 'groß club intern', to_delete: false }
-            ]
-          }
-        ]
-      }
-    ]);
+        name: 'public',
+        label: 'Öffentlich',
+        field: 'public',
+      },
+    ];
     const visibleColumn = ref([
       'name',
       'drink_kind',
       'cost_price_pro_volumne',
-      'price_calc',
+      'volumes',
       'volume',
       'min_prices',
       'prices',
       'price',
-      'description'
+      'description',
+      'public',
     ]);
 
-    function deletePrice(row) {
+    function deletePrice(row: FG.DrinkPrice) {
       console.log(row);
-      row.to_delete = true;
     }
-    function addPrice(table) {
-      console.log(table);
-      table.push({
-        price: 20,
-        description: 'test',
-        to_delete: false
-      });
+    const emptyPrice = {
+      price: 0,
+      description: '',
+      public: true,
+    };
+    const newPrice = ref(emptyPrice);
+    function addPrice(volume: FG.DrinkPriceVolume) {
+      store.actions.setPrice({ ...newPrice.value }, volume);
+      cancelAddPrice();
+    }
+    function cancelAddPrice() {
+      setTimeout(() => {
+        addPrice.value = emptyPrice;
+      }, 200);
+    }
+    function updatePrice(price: FG.DrinkPrice, volume: FG.DrinkPriceVolume) {
+      store.actions.updatePrice(price, volume);
+    }
+    function deletePrice(price: FG.DrinkPrice, volume: FG.DrinkPriceVolume) {
+      console.log(price, volume);
+      store.actions.deletePrice(price, volume);
     }
 
-    function addVolume(table) {
+    function addVolume(table: FG.DrinkPriceVolume[]) {
       table.push({
         id: v4(),
         volume: null,
         min_prices: [
           {
             percentage: 100,
-            price: null
+            price: 0,
           },
           {
             percentage: 250,
-            price: null
+            price: 0,
           },
           {
             percentage: 300,
-            price: null
-          }
+            price: 0,
+          },
         ],
         prices: [],
-        ingredients: []
+        ingredients: [],
       });
     }
 
-    function addIngredient(ingredients) {
-      ingredients.push({ drink: null, volume: null });
-    }
-    function calc_min_prices(row) {
-      console.log(row.ingredients);
-      row.volume = 0;
-      let cost_price = 0;
-      row.ingredients.forEach(ingredient => {
-        row.volume = row.volume + Number.parseFloat(ingredient.volume);
-        cost_price = Number.parseFloat(ingredient.volume) * ingredient.drink.cost_price_pro_volume;
-      });
-      console.log(row.volume, cost_price);
-      row.min_prices.forEach(min_price => {
-        min_price.price = (cost_price * min_price.percentage) / 100;
-      });
+    function addIngredient(ingredients: FG.Ingredient[]) {
+      ingredients.push({ id: -1, volume_id: 0, drink_ingredient: null, extra_ingredient: null });
     }
 
     return {
-      drinks,
+      drinks: computed({ get: () => store.state.drinks, set: (val) => console.log(val) }),
       columns,
-      test,
       column_calc,
       column_prices,
       visibleColumn,
       deletePrice,
+      newPrice,
       addPrice,
+      updatePrice,
+      deletePrice,
+      cancelAddPrice,
       addVolume,
       addIngredient,
-      calc_min_prices
+      calc_min_prices,
+      console,
     };
-  }
+  },
 });
 </script>
 
diff --git a/src/plugins/pricelist/store/altStore.ts b/src/plugins/pricelist/store/altStore.ts
new file mode 100644
index 0000000..5430a8a
--- /dev/null
+++ b/src/plugins/pricelist/store/altStore.ts
@@ -0,0 +1,100 @@
+import { reactive } from '@vue/composition-api';
+import { axios } from 'src/boot/axios';
+import { AxiosResponse } from 'axios';
+import ExtraIngredient = FG.ExtraIngredient;
+
+const state = reactive<{ drinks: FG.Drink[]; tags: FG.Tag[]; drinkTypes: FG.DrinkType[] }>({
+  drinks: [],
+  tags: [],
+  drinkTypes: [],
+});
+
+const actions = {
+  getDrinks() {
+    axios
+      .get('pricelist/drinks')
+      .then((response: AxiosResponse<FG.Drink[]>) => {
+        state.drinks = response.data;
+        console.log(state.drinks);
+        state.drinks.forEach((drink: FG.Drink) => {
+          drink.volumes.forEach((volume: FG.DrinkPriceVolume) => {
+            volume.min_prices = [
+              { percentage: 100, price: (drink.cost_price_pro_volume || 0) * volume.volume * 1 },
+              { percentage: 250, price: (drink.cost_price_pro_volume || 0) * volume.volume * 2.5 },
+              { percentage: 300, price: (drink.cost_price_pro_volume || 0) * volume.volume * 3 },
+            ];
+            if (volume.ingredients.length > 0) {
+              calc_min_prices(volume);
+            }
+            this.sortPrices(volume);
+          });
+        });
+      })
+      .catch((err) => console.warn(err));
+  },
+  setPrice(price: FG.DrinkPrice, volume: FG.DrinkPriceVolume) {
+    axios
+      .post(`pricelist/prices/volumes/${volume.id}`, price)
+      .then((response: AxiosResponse<FG.DrinkPrice>) => {
+        volume.prices.push(response.data);
+        this.sortPrices(volume);
+      })
+      .catch((err) => console.warn(err));
+  },
+  sortPrices(volume: FG.DrinkPriceVolume) {
+    volume.prices.sort((a, b) => {
+      if (a.price > b.price) return 1;
+      if (b.price > a.price) return -1;
+      return 0;
+    });
+  },
+  deletePrice(price: FG.DrinkPrice, volume: FG.DrinkPriceVolume) {
+    axios
+      .delete(`pricelist/prices/${price.id}`)
+      .then(() => {
+        const index = volume.prices.findIndex((a) => a.id == price.id);
+        if (index > -1) {
+          volume.prices.splice(index, 1);
+        }
+      })
+      .catch((err) => console.warn(err));
+  },
+  updatePrice(price: FG.DrinkPrice, volume: FG.DrinkPriceVolume) {
+    axios
+      .put(`pricelist/prices/${price.id}`, price)
+      .then((response: AxiosResponse<FG.DrinkPrice>) => {
+        const index = volume.prices.findIndex((a) => a.id === price.id);
+        if (index > -1) {
+          volume.prices[index] = response.data;
+          this.sortPrices(volume);
+        }
+      })
+      .catch((err) => console.log(err));
+  },
+};
+
+const getters = {};
+
+function calc_min_prices(row: FG.DrinkPriceVolume) {
+  row.volume = 0;
+  let cost_price = 0;
+  row.ingredients.forEach((ingredient: FG.DrinkIngredient & FG.ExtraIngredient) => {
+    console.log(ingredient);
+    if (ingredient.drink_ingredient) {
+      row.volume = row.volume + ingredient.volume;
+      cost_price += ingredient.volume * (ingredient.drink_ingredient.cost_price_pro_volume || 0);
+    } else if (ingredient.name && ingredient.price) {
+      cost_price += ingredient.price;
+    }
+  });
+  row.min_prices.forEach((min_price) => {
+    min_price.price = (cost_price * min_price.percentage) / 100;
+  });
+}
+
+export { calc_min_prices };
+export default {
+  state,
+  actions,
+  getters,
+};