diff --git a/components/EntityEdit.vue b/components/EntityEdit.vue
index 366abf5..8b41f39 100644
--- a/components/EntityEdit.vue
+++ b/components/EntityEdit.vue
@@ -1,5 +1,6 @@
 <script setup>
 import dayjs from "dayjs";
+import MaterialComposing from "~/components/materialComposing.vue";
 
 const props = defineProps({
   type: {
@@ -613,6 +614,12 @@ const contentChanged = (content, datapoint) => {
               :preloadedContent="item[datapoint.key].html"
           />
 
+
+          <MaterialComposing
+            v-else-if="datapoint.inputType === 'materialComposing'"
+            :item="item"
+          />
+
           <UButton
               v-if="['text','number','select','date','datetime','textarea'].includes(datapoint.inputType)"
               @click="item[datapoint.key] = null"
diff --git a/components/columnRenderings/serviceCategories.vue b/components/columnRenderings/serviceCategories.vue
new file mode 100644
index 0000000..51295f1
--- /dev/null
+++ b/components/columnRenderings/serviceCategories.vue
@@ -0,0 +1,21 @@
+<script setup>
+const props = defineProps({
+  row: {
+    type: Object,
+    required: true,
+    default: {}
+  }
+})
+
+const servicecategories = ref([])
+
+const setup = async () => {
+  servicecategories.value = await useSupabaseSelect("servicecategories")
+}
+
+setup()
+</script>
+
+<template>
+  <span v-if="props.row.servicecategories && servicecategories.length > 0">{{props.row.servicecategories.map(i => servicecategories.find(x => x.id === i).name).join(", ")}}</span>
+</template>
diff --git a/components/materialComposing.vue b/components/materialComposing.vue
new file mode 100644
index 0000000..23d1282
--- /dev/null
+++ b/components/materialComposing.vue
@@ -0,0 +1,129 @@
+<script setup>
+
+import { v4 as uuidv4 } from 'uuid';
+
+const supabase = useSupabaseClient()
+
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true
+  }
+})
+
+const products = ref([])
+const units = ref([])
+
+const setup = async () => {
+  products.value = await useSupabaseSelect("products")
+  units.value = (await supabase.from("units").select()).data
+}
+
+setup()
+
+const addProductToMaterialComposition = () => {
+
+  if(!props.item.materialComposition) props.item.materialComposition = []
+
+  props.item.materialComposition.push({
+    id: uuidv4(),
+    unit: 1,
+    quantity: 1,
+    price: 0,
+  })
+  calculateTotalMaterialPrice()
+}
+
+const removeProductFromMaterialComposition = (id) => {
+  props.item.materialComposition = props.item.materialComposition.filter((item) => item.id !== id)
+  calculateTotalMaterialPrice()
+}
+
+const calculateTotalMaterialPrice = () => {
+  let total = 0
+
+  props.item.materialComposition.forEach((item) => {
+    let rowSum = item.quantity * item.price
+    total += rowSum
+  })
+
+  props.item.sellingPriceComposed.material = total
+}
+
+const setRowData = (row) => {
+  let product = products.value.find(i => i.id === row.product)
+
+  row.unit = product.unit
+  row.price = product.sellingPrice
+}
+
+</script>
+
+<template>
+  <UCard class="w-full">
+    <UButton
+        @click="addProductToMaterialComposition"
+    >
+      + Artikel
+    </UButton>
+
+    <table class="w-full mt-3">
+      <tr
+          v-for="product in props.item.materialComposition"
+      >
+        <td>
+          <USelectMenu
+            :options="products"
+            value-attribute="id"
+            option-attribute="name"
+            v-model="product.product"
+            :color="product.product ? 'primary' : 'rose'"
+            @change="setRowData(product)"
+          >
+            <template #label>
+              {{products.find(i => i.id === product.product) ? products.find(i => i.id === product.product).name : 'Kein Artikel ausgewählt'}}
+            </template>
+          </USelectMenu>
+        </td>
+        <td>
+          <UInput
+            type="number"
+            v-model="product.quantity"
+            :step="units.find(i => i.id === product.unit) ? units.find(i => i.id === product.unit).step : 1"
+            @change="calculateTotalMaterialPrice"
+          />
+        </td>
+        <td>
+          <USelectMenu
+            :options="units"
+            value-attribute="id"
+            option-attribute="name"
+            v-model="product.unit"
+          ></USelectMenu>
+        </td>
+        <td>
+          <UInput
+            type="number"
+            v-model="product.price"
+            step="0.01"
+            @change="calculateTotalMaterialPrice"
+          />
+        </td>
+        <td>
+          <UButton
+            icon="i-heroicons-x-mark"
+            @click="removeProductFromMaterialComposition(product.id)"
+            variant="outline"
+            color="rose"
+          />
+        </td>
+      </tr>
+    </table>
+  </UCard>
+</template>
+
+<style scoped>
+td {
+  margin-bottom: 0.5em;
+}
+</style>
\ No newline at end of file
diff --git a/stores/data.js b/stores/data.js
index 194edc7..29177d8 100644
--- a/stores/data.js
+++ b/stores/data.js
@@ -30,6 +30,7 @@ import sellingPriceComposedWorker from "~/components/columnRenderings/sellingPri
 import sellingPriceComposedTotal from "~/components/columnRenderings/sellingPriceComposedTotal.vue"
 import startDate from "~/components/columnRenderings/startDate.vue"
 import endDate from "~/components/columnRenderings/endDate.vue"
+import serviceCategories from "~/components/columnRenderings/serviceCategories.vue"
 
 import quantity from "~/components/helpRenderings/quantity.vue"
 import {useZipCheck} from "~/composables/useZipCheck.js";
@@ -39,7 +40,6 @@ export const useDataStore = defineStore('data', () => {
 
     const supabase = useSupabaseClient()
     const profileStore = useProfileStore()
-    const user = useSupabaseUser()
     const toast = useToast()
     const router = useRouter()
 
@@ -1380,7 +1380,8 @@ export const useDataStore = defineStore('data', () => {
                     selectDataType: "servicecategories",
                     selectOptionAttribute: "name",
                     selectSearchAttributes: ['name'],
-                    selectMultiple: true
+                    selectMultiple: true,
+                    component: serviceCategories
                 },
                 {
                     key: "sellingPriceComposed.worker",
@@ -1408,6 +1409,11 @@ export const useDataStore = defineStore('data', () => {
                     },
                     component: sellingPriceComposedMaterial
                 },
+                {
+                    key: "materialComposing",
+                    label: "Zusammensetzung Materialpreis",
+                    inputType: "materialComposing",
+                },
                 {
                     key: "sellingPriceComposed.total",
                     label: "Verkaufspreis Gesamt pro Einheit",
@@ -2213,7 +2219,7 @@ export const useDataStore = defineStore('data', () => {
 
             await generateHistoryItems(dataType, supabaseData[0])
 
-            if(!["statementallocations","absencerequests", "productcategories", "projecttypes", "checks", "profiles","services", "inventoryitems"].includes(dataType) ){
+            if(!["statementallocations","absencerequests", "productcategories", "servicecategories", "projecttypes", "checks", "profiles","services", "inventoryitems"].includes(dataType) ){
                 await eval( dataType + '.value.push(' + JSON.stringify(...supabaseData) + ')')
             }