diff --git a/vue3/src/components/model_editors/SupermarketEditor.vue b/vue3/src/components/model_editors/SupermarketEditor.vue
index 37e449874..be789aa3d 100644
--- a/vue3/src/components/model_editors/SupermarketEditor.vue
+++ b/vue3/src/components/model_editors/SupermarketEditor.vue
@@ -33,7 +33,8 @@
                                 </v-btn>
                             </h3>
 
-                            <draggable class="mt-4" tag="VList" v-model="supermarketCategories" handle=".drag-handle" item-key="id" group="categories">
+                            <draggable class="mt-4" tag="VList" v-model="unusedSupermarketCategories" handle=".drag-handle" item-key="id" group="categories"
+                            >
                                 <template #item="{element}">
                                     <v-list-item border :key="element.id">
                                         <template #prepend>
@@ -49,16 +50,20 @@
                             <h3> {{ $t('SelectedCategories') }} </h3>
                             <draggable
                                 tag="VList"
-                                v-model="editingObj.categoryToSupermarket"
+                                v-model="editingObjSupermarketCategories"
                                 handle=".drag-handle" item-key="id" group="categories"
-                                 >
+                                :empty-insert-threshold="20"
+                                @sort="updateEditingObjectSupermarketCategoryRelation"
+                                @add="addTest"
+                                @remove="removeTest"
+                            >
                                 <template #item="{element}">
                                     <v-list-item border :key="element.id">
                                         <template #prepend>
                                             <v-icon class="drag-handle" icon="$dragHandle"></v-icon>
                                         </template>
-                                        {{ element.category.name }}
-                                        {{ element.order }}
+                                        {{ element.name }}
+
                                         <template #append>
                                             <v-btn color="warning">
                                                 <i class="fa-solid fa-link-slash"></i>
@@ -84,12 +89,13 @@
 
 <script setup lang="ts">
 
-import {onMounted, PropType, ref} from "vue";
-import {ApiApi, Supermarket, SupermarketCategory} from "@/openapi";
+import {computed, onMounted, PropType, ref} from "vue";
+import {ApiApi, Supermarket, SupermarketCategory, SupermarketCategoryRelation} from "@/openapi";
 import ModelEditorBase from "@/components/model_editors/ModelEditorBase.vue";
 import {useModelEditorFunctions} from "@/composables/useModelEditorFunctions";
 import ModelEditDialog from "@/components/dialogs/ModelEditDialog.vue";
 import draggable from "vuedraggable";
+import {ErrorMessageType, useMessageStore} from "@/stores/MessageStore";
 
 const props = defineProps({
     item: {type: {} as PropType<Supermarket>, required: false, default: null},
@@ -104,6 +110,11 @@ const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading,
 const tab = ref("categories")
 
 const supermarketCategories = ref([] as SupermarketCategory[])
+const editingObjSupermarketCategories = ref([] as SupermarketCategory[])
+
+const unusedSupermarketCategories = computed(() => {
+    return supermarketCategories.value.filter(e => !editingObjSupermarketCategories.value.includes(e))
+})
 
 onMounted(() => {
     const api = new ApiApi()
@@ -114,9 +125,42 @@ onMounted(() => {
 
     api.apiSupermarketCategoryList({pageSize: 100}).then(r => {
         supermarketCategories.value = r.results
+        
+        //TODO fix performing this in a way that async setupState works
+        editingObj.value.categoryToSupermarket.forEach(cTS => {
+            editingObjSupermarketCategories.value.push(cTS.category)
+        })
     })
 })
 
+function updateEditingObjectSupermarketCategoryRelation(operation: any) {
+    if (operation.to == operation.from) {
+        console.log('sort', operation)
+    }
+}
+
+function addTest(operation: any) {
+    let api = new ApiApi()
+
+    if (typeof operation.newIndex == "number" && editingObjSupermarketCategories.value.length >= operation.newIndex) {
+        let sC = {
+            category: editingObjSupermarketCategories.value[operation.newIndex],
+            order: operation.newIndex,
+            supermarket: editingObj.value.id,
+        } as SupermarketCategoryRelation
+
+        api.apiSupermarketCategoryRelationCreate({supermarketCategoryRelation: sC}).then(r => {
+
+        }).catch((err: any) => {
+            useMessageStore().addError(ErrorMessageType.CREATE_ERROR, err)
+        })
+    }
+}
+
+function removeTest(operation: any) {
+    console.log('remove', operation)
+}
+
 </script>
 
 <style scoped>