diff --git a/vue3/src/components/dialogs/ModelMergeDialog.vue b/vue3/src/components/dialogs/ModelMergeDialog.vue
index 867410d82b..5232a2b5c0 100644
--- a/vue3/src/components/dialogs/ModelMergeDialog.vue
+++ b/vue3/src/components/dialogs/ModelMergeDialog.vue
@@ -1,15 +1,16 @@
 <template>
     <v-dialog max-width="600px" :activator="props.activator" v-model="dialog">
-        <v-card>
+        <v-card :loading="loading">
             <v-card-title>{{ $t('merge_title', {type: getGenericModelFromString(props.model).model.name}) }}</v-card-title>
             <!-- TODO localize model name -->
             <v-card-text>
                 {{ $t('merge_selection', {source: '', type: getGenericModelFromString(props.model).model.name}) }}
-                <model-select append-to-body :model="props.model"></model-select>
+                <model-select  :model="props.model" v-model="target"></model-select>
+                <model-select append-to-body :model="props.model" v-model="target"></model-select>
             </v-card-text>
             <v-card-actions>
                 <v-btn>{{ $t('Cancel') }}</v-btn>
-                <v-btn color="warning">{{ $t('Merge') }}</v-btn>
+                <v-btn color="warning" @click="mergeModel()">{{ $t('Merge') }}</v-btn>
             </v-card-actions>
         </v-card>
     </v-dialog>
@@ -18,19 +19,35 @@
 <script setup lang="ts">
 
 import ModelSelect from "@/components/inputs/ModelSelect.vue";
-import {PropType} from "vue";
+import {PropType, ref} from "vue";
 import {EditorSupportedModels, getGenericModelFromString} from "@/types/Models";
+import {ApiApi, Food} from "@/openapi";
+import {ErrorMessageType, PreparedMessage, useMessageStore} from "@/stores/MessageStore";
 
 const props = defineProps({
     model: {type: String as PropType<EditorSupportedModels>, required: true},
-    sourceObject: {},
+    sourceId: {type: Number},
     activator: {type: String, default: 'parent'},
 })
 
 const dialog = defineModel<boolean>({default: false})
+const loading = ref(false)
+
+const target = ref({} as Food)
 
 function mergeModel() {
-    
+    let api = new ApiApi()
+    if (target != null) {
+        loading.value = true
+        api.apiFoodMergeUpdate({id: props.sourceId!, food: {} as Food, target: target.value.id!}).then(r => {
+            useMessageStore().addPreparedMessage(PreparedMessage.UPDATE_SUCCESS)
+        }).catch(err => {
+            useMessageStore().addError(ErrorMessageType.UPDATE_ERROR, err)
+        }).finally(() => {
+            loading.value = false
+        })
+    }
+
 }
 
 </script>
diff --git a/vue3/src/pages/ModelListPage.vue b/vue3/src/pages/ModelListPage.vue
index 0f4a44a9a5..087ec8bda5 100644
--- a/vue3/src/pages/ModelListPage.vue
+++ b/vue3/src/pages/ModelListPage.vue
@@ -53,7 +53,7 @@
                                     </v-list-item>
                                     <v-list-item prepend-icon="fa-solid fa-arrows-to-dot" link>
                                         {{ $t('Merge') }}
-                                        <model-merge-dialog :model="model" activator="parent"></model-merge-dialog>
+                                        <model-merge-dialog :model="model" :source-id="item.id" activator="parent"></model-merge-dialog>
                                     </v-list-item>
                                 </v-list>
                             </v-menu>