diff --git a/cookbook/views/api.py b/cookbook/views/api.py
index 9dd8d7cda..05190dd14 100644
--- a/cookbook/views/api.py
+++ b/cookbook/views/api.py
@@ -926,7 +926,7 @@ class MealTypeViewSet(viewsets.ModelViewSet):
     pagination_class = DefaultPagination
 
     def get_queryset(self):
-        queryset = self.queryset.order_by('order', 'id').filter(created_by=self.request.user).filter(
+        queryset = self.queryset.order_by('time', 'id').filter(created_by=self.request.user).filter(
             space=self.request.space).all()
         return queryset
 
diff --git a/vue3/src/components/model_editors/MealTypeEditor.vue b/vue3/src/components/model_editors/MealTypeEditor.vue
index 8f1447791..cefe2c196 100644
--- a/vue3/src/components/model_editors/MealTypeEditor.vue
+++ b/vue3/src/components/model_editors/MealTypeEditor.vue
@@ -7,8 +7,28 @@
         <v-card-text>
             <v-form>
                 <v-text-field v-model="editingObj.name" :label="$t('Name')"></v-text-field>
-                <v-time-picker v-model="editingObj.time"></v-time-picker>
-                <v-color-picker v-model="editingObj.color"></v-color-picker>
+
+                <v-text-field
+                    max-width="200px"
+                    v-model="editingObj.time"
+                    :active="timePickerMenu"
+                    :focus="timePickerMenu"
+                    :label="$t('Time')"
+                    prepend-icon="fa-solid fa-clock"
+                    readonly>
+                    <v-menu
+                    v-model="timePickerMenu"
+                    :close-on-content-click="false"
+                    activator="parent"
+                    transition="scale-transition">
+                    <v-time-picker v-if="timePickerMenu" format="24hr" v-model="editingObj.time"></v-time-picker>
+                </v-menu>
+                </v-text-field>
+
+
+                <v-color-picker v-model="editingObj.color" mode="hex" :modes="['hex']" show-swatches
+                                :swatches="[['#ddbf86'],['#b98766'],['#b55e4f'],['#82aa8b'],['#385f84']]"></v-color-picker>
+
             </v-form>
         </v-card-text>
         <v-card-actions>
@@ -28,7 +48,8 @@ import DeleteConfirmDialog from "@/components/dialogs/DeleteConfirmDialog.vue";
 import {useI18n} from "vue-i18n";
 import {ErrorMessageType, PreparedMessage, useMessageStore} from "@/stores/MessageStore";
 import {useClipboard} from "@vueuse/core";
-import {VTimePicker} from 'vuetify/labs/VTimePicker' // TODO remove once out of labs
+import {VTimePicker} from 'vuetify/labs/VTimePicker'
+import {useUserPreferenceStore} from "@/stores/UserPreferenceStore"; // TODO remove once out of labs
 
 
 const {t} = useI18n()
@@ -46,7 +67,7 @@ const editingObj = ref({} as MealType)
 const loading = ref(false)
 
 // object specific data (for selects/display)
-
+const timePickerMenu = ref(false)
 
 /**
  * checks if given object has ID property to determine if it needs to be updated or created
diff --git a/vue3/src/components/settings/MealPlanSettings.vue b/vue3/src/components/settings/MealPlanSettings.vue
index bb4a5aece..79966a716 100644
--- a/vue3/src/components/settings/MealPlanSettings.vue
+++ b/vue3/src/components/settings/MealPlanSettings.vue
@@ -34,10 +34,11 @@
         <v-divider></v-divider>
 
         <v-list class="mt-2">
-            <v-list-item v-for="mt in mealTypes">
+            <v-list-item v-for="mt in mealTypes.sort(compareSortMealType)">
                 <v-avatar :color="mt.color"></v-avatar>
                 {{ mt.name }}
                 <template #append>
+                    <v-chip class="me-2">{{ mt.time}}</v-chip>
                     <v-btn color="edit">
                         <v-icon icon="$edit"></v-icon>
                         <model-editor-dialog model="MealType" :item="mt" @delete="deleteMealType"></model-editor-dialog>
@@ -88,6 +89,22 @@ onMounted(() => {
     })
 })
 
+/**
+ * compare function to pass to .sort() method of MealType display
+ * sorts by meal type time
+ * @param a {MealType} MealType a
+ * @param b {MealType} MealType b
+ */
+function compareSortMealType(a: MealType, b: MealType) {
+    if (a.time < b.time) {
+        return -1
+    } else if (a.time > b.time) {
+        return 1
+    }
+    return 0
+}
+
+
 /**
  * delete mealtype from client list (database handled by editor)
  * @param mealType to delete from list