diff --git a/vue/src/components/Modals/GenericModalForm.vue b/vue/src/components/Modals/GenericModalForm.vue
index a2bdb9a612..218a18f473 100644
--- a/vue/src/components/Modals/GenericModalForm.vue
+++ b/vue/src/components/Modals/GenericModalForm.vue
@@ -58,6 +58,7 @@ import SmallText from "@/components/Modals/SmallText"
 import HelpBadge from "@/components/Badges/Help"
 import NumberInput from "@/components/Modals/NumberInput.vue";
 import TextAreaInput from "@/components/Modals/TextAreaInput.vue";
+import ColorInput from "@/components/Modals/ColorInput.vue";
 
 export default {
     name: "GenericModalForm",
@@ -71,7 +72,8 @@ export default {
         HelpBadge,
         DateInput,
         NumberInput,
-        TextAreaInput
+        TextAreaInput,
+        ColorInput
     },
     mixins: [ApiMixin, ToastMixin],
     props: {
diff --git a/vue/src/components/Settings/MealPlanSettingsComponent.vue b/vue/src/components/Settings/MealPlanSettingsComponent.vue
index 31d5258873..672f2bf690 100644
--- a/vue/src/components/Settings/MealPlanSettingsComponent.vue
+++ b/vue/src/components/Settings/MealPlanSettingsComponent.vue
@@ -12,6 +12,8 @@
             ></generic-multiselect>
         </b-form-group>
 
+        <hr/>
+
         <b-form v-if="meal_plan_store">
             <b-form-group id="UomInput" :label="$t('Period')" :description="$t('Plan_Period_To_Show')"
                           label-for="UomInput">
@@ -34,6 +36,38 @@
                 </b-form-checkbox>
             </b-form-group>
         </b-form>
+
+        <hr/>
+
+        <h5>{{ $t("Meal_Types") }}
+            <button type="button" class="btn btn-success shadow-none float-right" @click="generic_action = Actions.CREATE;"><i class="fas fa-plus"></i></button>
+        </h5>
+
+        <draggable :list="meal_types" group="meal_types" :empty-insert-threshold="10" class="mt-4"
+                   @sort="sortMealTypes()" ghost-class="ghost" handle=".handle">
+            <b-list-group-item v-for="mt in meal_types" v-bind:key="mt.id">
+
+                <button type="button" class="btn handle shadow-none"><i class="fas fa-arrows-alt-v"></i></button>
+
+                <b-badge :style="{'background-color': mt.color}"><i class="fas fa-palette"></i> </b-badge>
+                <span> {{ mt.name }} </span>
+
+                <b-badge v-if="mt.default">{{ $t('Default') }}</b-badge>
+                <div class="btn-group  float-right">
+                    <button type="button" class="btn btn-primary shadow-none" @click="generic_action = Actions.UPDATE; editing_meal_type=mt;"><i class="fas fa-edit"></i></button>
+                    <button type="button" class="btn btn-danger shadow-none" @click="generic_action = Actions.DELETE; editing_meal_type=mt;"><i class="fas fa-trash-alt"></i></button>
+                </div>
+
+            </b-list-group-item>
+        </draggable>
+        <b-list-group>
+
+
+        </b-list-group>
+
+        <generic-modal-form :model="Models.MEAL_TYPE" :action="generic_action" :show="generic_action !== null"
+                            :item1="editing_meal_type"
+                            @finish-action="finishGenericAction"/>
     </div>
 </template>
 
@@ -45,16 +79,16 @@ import axios from "axios";
 import GenericMultiselect from "@/components/GenericMultiselect";
 import {useMealPlanStore} from "@/stores/MealPlanStore";
 import {CalendarMathMixin} from "vue-simple-calendar/src/components/bundle";
+import draggable from "vuedraggable"
+import GenericModalForm from "@/components/Modals/GenericModalForm.vue";
 
 axios.defaults.xsrfCookieName = 'csrftoken'
 axios.defaults.xsrfHeaderName = "X-CSRFTOKEN"
 
-let SETTINGS_COOKIE_NAME = "mealplan_settings"
-
 export default {
     name: "MealPlanSettingsComponent",
     mixins: [ApiMixin, CalendarMathMixin],
-    components: {GenericMultiselect},
+    components: {GenericModalForm, draggable, GenericMultiselect},
     props: {
         user_id: Number,
     },
@@ -71,6 +105,9 @@ export default {
                 ],
                 displayPeriodCount: [1, 2, 3, 4],
             },
+            meal_types: [],
+            generic_action: null,
+            editing_meal_type: null,
         }
     },
     mounted() {
@@ -79,6 +116,8 @@ export default {
         this.loadSettings()
 
         this.meal_plan_store = useMealPlanStore()
+
+        this.loadMealTypes()
     },
     methods: {
         loadSettings: function () {
@@ -107,6 +146,36 @@ export default {
             })
             return options
         },
+        loadMealTypes: function () {
+            let apiClient = new ApiApiFactory()
+            apiClient.listMealTypes().then(result => {
+                this.meal_types = result.data
+            }).catch(err => {
+                StandardToasts.makeStandardToast(this, StandardToasts.FAIL_FETCH, err)
+            })
+        },
+        sortMealTypes() {
+            this.meal_types.forEach(function (element, index) {
+                element.order = index
+            })
+
+            this.meal_types.forEach((meal_type) => {
+                let apiClient = new ApiApiFactory()
+
+                apiClient.updateMealType(meal_type.id, meal_type).then((e) => {
+
+                }).catch((err) => {
+                    StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE, err)
+                })
+            })
+        },
+        finishGenericAction: function (e) {
+            if (e !== 'cancel') {
+                this.loadMealTypes()
+            }
+            this.editing_meal_type = null;
+            this.generic_action = null;
+        }
     }
 }
 </script>