diff --git a/vue3/src/components/dialogs/MealPlanDialog.vue b/vue3/src/components/dialogs/MealPlanDialog.vue
index 49badc59b..0b1d40998 100644
--- a/vue3/src/components/dialogs/MealPlanDialog.vue
+++ b/vue3/src/components/dialogs/MealPlanDialog.vue
@@ -18,7 +18,7 @@
                                     prepend-icon=""
                                     prepend-inner-icon="$calendar"
                                 ></v-date-input>
-                                <ModelSelect model="MealType" v-model="mutableMealPlan.mealType"></ModelSelect>
+                                <ModelSelect model="MealType" :allow-create="true" v-model="mutableMealPlan.mealType"></ModelSelect>
                                 <v-number-input control-variant="split" :min="0" v-model="mutableMealPlan.servings"></v-number-input>
                                 <v-text-field label="Share" v-model="mutableMealPlan.shared"></v-text-field>
                             </v-col>
diff --git a/vue3/src/components/display/HorizontalMealPlanWindow.vue b/vue3/src/components/display/HorizontalMealPlanWindow.vue
index 864fffcec..355b2878a 100644
--- a/vue3/src/components/display/HorizontalMealPlanWindow.vue
+++ b/vue3/src/components/display/HorizontalMealPlanWindow.vue
@@ -84,12 +84,11 @@ const meal_plan_grid = computed(() => {
 
     for (const x of Array(4).keys()) {
         let grid_day_date = DateTime.now().plus({days: x})
-        console.log('going trough days ', x, grid_day_date)
         grid.push({
             date: grid_day_date,
             create_default_date: grid_day_date.toISODate(), // improve meal plan edit modal to do formatting itself and accept dates
             date_label: grid_day_date.toLocaleString(DateTime.DATE_MED),
-            plan_entries: useMealPlanStore().plan_list.filter((m: MealPlan) => ((DateTime.fromJSDate(m.fromDate).startOf('day') <= grid_day_date.startOf('day')) && (DateTime.fromJSDate((m.toDate != undefined) ? m.toDate : m.fromDate).startOf('day') >= grid_day_date.startOf('day')))),
+            plan_entries: useMealPlanStore().planList.filter((m: MealPlan) => ((DateTime.fromJSDate(m.fromDate).startOf('day') <= grid_day_date.startOf('day')) && (DateTime.fromJSDate((m.toDate != undefined) ? m.toDate : m.fromDate).startOf('day') >= grid_day_date.startOf('day')))),
         } as MealPlanGridItem)
     }
 
diff --git a/vue3/src/components/display/VSnackbarQueued.vue b/vue3/src/components/display/VSnackbarQueued.vue
index 22f1f1241..751c45b63 100644
--- a/vue3/src/components/display/VSnackbarQueued.vue
+++ b/vue3/src/components/display/VSnackbarQueued.vue
@@ -49,17 +49,26 @@ const props = defineProps({
     }
 })
 
-
+// ID of message timeout currently running
 const timeoutId = ref(-1)
+// currently visible message
 const visibleMessage = ref({} as Message)
+// visible state binding of snackbar
 const showSnackbar = ref(false)
 
+/**
+ * subscribe to mutation of the snackbarQueue to detect new messages being added
+ */
 useMessageStore().$subscribe((mutation, state) => {
     if ('snackbarQueue' in state && mutation.events.type == 'add') {
         processQueue()
     }
 })
 
+/**
+ * process snackbar queue
+ * show oldest message for desired time and remove it afterwards
+ */
 function processQueue() {
     if (timeoutId.value == -1 && useMessageStore().snackbarQueue.length > 0) {
         visibleMessage.value = useMessageStore().snackbarQueue[0]
@@ -72,6 +81,10 @@ function processQueue() {
     }
 }
 
+/**
+ * after item timeout has been reached remove it from the list
+ * and restart processing the queue to check for new items
+ */
 function removeItem() {
     showSnackbar.value = false
     clearTimeout(timeoutId.value)
diff --git a/vue3/src/components/inputs/ModelSelect.vue b/vue3/src/components/inputs/ModelSelect.vue
index 7484be229..810e14324 100644
--- a/vue3/src/components/inputs/ModelSelect.vue
+++ b/vue3/src/components/inputs/ModelSelect.vue
@@ -9,6 +9,8 @@
             :resolve-on-load="false"
             v-model="model"
             :options="search"
+            :on-create="createObject"
+            :createOption="allowCreate"
             :delay="300"
             :object="true"
             :valueProp="itemValue"
@@ -29,13 +31,12 @@
 </template>
 
 <script lang="ts" setup>
-import {onMounted, PropType, ref, Ref} from "vue"
-import {useDebounceFn} from "@vueuse/core"
+import {onMounted, PropType, ref} from "vue"
 import {GenericModel, getModelFromStr} from "@/types/Models"
 import Multiselect from '@vueform/multiselect'
 import {ErrorMessageType, MessageType, useMessageStore} from "@/stores/MessageStore";
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue', 'create'])
 
 const props = defineProps({
     model: {type: String, required: true},
@@ -51,10 +52,9 @@ const props = defineProps({
 
     mode: {type: String as PropType<'single' | 'multiple' | 'tags'>, default: 'single'},
 
-    // not verified
-
     allowCreate: {type: Boolean, default: false},
 
+    // not verified
     search_on_load: {type: Boolean, default: false},
 
     placeholder: {type: String, default: undefined},
@@ -72,9 +72,13 @@ const props = defineProps({
 
 const model = defineModel()
 const model_class = ref({} as GenericModel<any>)
-const items: Ref<Array<any>> = ref([])
-const selected_items: Ref<Array<any> | any> = ref(undefined)
 
+/**
+ * create instance of model class when mounted
+ */
+onMounted(() => {
+    model_class.value = getModelFromStr(props.model)
+})
 
 /**
  * performs the API request to search for the selected input
@@ -90,23 +94,22 @@ function search(query: string) {
     })
 }
 
-// TODO refactor for new multiselect
-function addItem(item: string) {
-    console.log("CREATEING NEW with -> ", item)
+/**
+ * handle new object being created
+ *
+ * @param object object with two keys (itemValue/itemLabel) both having the string of the newly created item (query) as a value {<itemValue>: query, <itemLabel>: query}
+ * @param select$ reference to multiselect instance
+ */
+async function createObject(object: any, select$: Multiselect) {
+    console.log("CREATING NEW with -> ", object)
 
-    model_class.value.create(item).then((createdObj) => {
-        useMessageStore().addMessage(MessageType.SUCCESS, 'Created', 5000)
-        if (selected_items.value instanceof Array) {
-            selected_items.value.push(createdObj)
-        } else {
-            selected_items.value = createdObj
-        }
-        items.value.push(createdObj)
+    emit('create', object)
 
+    return await model_class.value.create(object[props.itemLabel]).then((createdObj) => {
+        useMessageStore().addMessage(MessageType.SUCCESS, 'Created', 5000, createdObj)
+        return createdObj
     }).catch((err) => {
         useMessageStore().addError(ErrorMessageType.CREATE_ERROR, err)
-    }).finally(() => {
-
     })
 }