diff --git a/vue/src/apps/MealPlanView/MealPlanView.vue b/vue/src/apps/MealPlanView/MealPlanView.vue
index b555d0d37d..1473d70895 100644
--- a/vue/src/apps/MealPlanView/MealPlanView.vue
+++ b/vue/src/apps/MealPlanView/MealPlanView.vue
@@ -2,122 +2,153 @@
     <div>
         <b-tabs content-class="mt-3" v-model="current_tab">
             <b-tab :title="$t('Planner')" active>
-                <div class="row calender-row d-none d-lg-block">
-                    <div class="col-12 calender-parent">
-                        <calendar-view
-                            :show-date="showDate"
-                            :enable-date-selection="true"
-                            class="theme-default"
-                            :items="plan_items"
-                            :display-period-uom="settings.displayPeriodUom"
-                            :period-changed-callback="periodChangedCallback"
-                            :enable-drag-drop="true"
-                            :item-content-height="item_height"
-                            @click-date="createEntryClick"
-                            @drop-on-date="moveEntry"
-                            :display-period-count="settings.displayPeriodCount"
-                            :starting-day-of-week="settings.startingDayOfWeek"
-                            :display-week-numbers="settings.displayWeekNumbers"
-                        >
-                            <template #item="{ value, weekStartDate, top }">
-                                <meal-plan-card
-                                    :value="value"
-                                    :week-start-date="weekStartDate"
-                                    :top="top"
-                                    :detailed="detailed_items"
-                                    :item_height="item_height"
-                                    @dragstart="dragged_item = value"
-                                    @click-item="entryClick"
-                                    @open-context-menu="openContextMenu"
-                                />
-                            </template>
-                            <template #header="{ headerProps }">
-                                <meal-plan-calender-header
-                                    ref="header"
-                                    :header-props="headerProps"
-                                    @input="setShowDate"
-                                    @delete-dragged="deleteEntry(dragged_item)"
-                                    @create-new="createEntryClick(new Date())"
-                                    @set-starting-day-back="setStartingDay(-1)"
-                                    @set-starting-day-forward="setStartingDay(1)"
-                                    :i-cal-url="iCalUrl"
-                                    :options="options"
-                                    :settings_prop="settings"
-                                />
-                            </template>
-                        </calendar-view>
-                    </div>
-                </div>
-                <div class="row d-block d-lg-none">
-                    <div>
-                        <div class="col-12">
-                            <div class="col-12 d-flex justify-content-center mt-2">
-                                <b-button-toolbar key-nav aria-label="Toolbar with button groups">
-                                    <b-button-group class="mx-1">
-                                        <b-button v-html="'<<'" class="p-2 pr-3 pl-3"
-                                                  @click="setShowDate($refs.header.headerProps.previousPeriod)"></b-button>
-                                    </b-button-group>
-                                    <b-button-group class="mx-1">
-                                        <b-button @click="setShowDate($refs.header.headerProps.currentPeriod)"><i
-                                            class="fas fa-home"></i></b-button>
-                                        <b-form-datepicker right button-only button-variant="secondary" @context="datePickerChanged"></b-form-datepicker>
-                                    </b-button-group>
-                                    <b-button-group class="mx-1">
-                                        <b-button v-html="'>>'" class="p-2 pr-3 pl-3"
-                                                  @click="setShowDate($refs.header.headerProps.nextPeriod)"></b-button>
-                                    </b-button-group>
-                                </b-button-toolbar>
+                <div class=" d-none d-lg-block">
+                    <div class="row">
+                        <div class="col col-2">
+                            <h4>{{ $t('Meal_Types') }}</h4>
+
+                            <b-form-checkbox :button-variant="danger" v-model="mt.checked" size="lg" v-for="mt in meal_types" v-bind:key="mt.id">
+
+                                <b-badge variant="primary" :style="{'background-color':mt.color}">{{ mt.name }}</b-badge>
+                            </b-form-checkbox>
+
+                            <hr/>
+                            <button class="btn btn-success shadow-none mt-1 btn-block" @click="createEntryClick(new Date())"><i
+                                class="fas fa-calendar-plus"></i> {{ $t("Create") }}
+                            </button>
+                            <button class="btn btn-primary shadow-none mt-1 btn-block" @click="createAutoPlan(new Date())"><i
+                                class="fas fa-calendar-plus"></i> {{ $t("Auto_Planner") }}
+                            </button>
+                            <a class="btn btn-primary shadow-none mt-1 btn-blockmt-1 btn-block" :href="iCalUrl"><i class="fas fa-download"></i>
+                                {{ $t("Export_To_ICal") }}
+                            </a>
+
+
+                        </div>
+                        <div class="col col-10">
+                            <div class="row calender-row ">
+                                <div class="col-12 calender-parent">
+                                    <calendar-view
+                                        :show-date="showDate"
+                                        :enable-date-selection="true"
+                                        class="theme-default"
+                                        :items="plan_items"
+                                        :display-period-uom="settings.displayPeriodUom"
+                                        :period-changed-callback="periodChangedCallback"
+                                        :enable-drag-drop="true"
+                                        :item-content-height="item_height"
+                                        @click-date="createEntryClick"
+                                        @drop-on-date="moveEntry"
+                                        :display-period-count="settings.displayPeriodCount"
+                                        :starting-day-of-week="settings.startingDayOfWeek"
+                                        :display-week-numbers="settings.displayWeekNumbers"
+                                    >
+                                        <template #item="{ value, weekStartDate, top }">
+                                            <meal-plan-card
+                                                :value="value"
+                                                :week-start-date="weekStartDate"
+                                                :top="top"
+                                                :detailed="detailed_items"
+                                                :item_height="item_height"
+                                                @dragstart="dragged_item = value"
+                                                @click-item="entryClick"
+                                                @open-context-menu="openContextMenu"
+                                            />
+                                        </template>
+                                        <template #header="{ headerProps }">
+                                            <meal-plan-calender-header
+                                                ref="header"
+                                                :header-props="headerProps"
+                                                @input="setShowDate"
+                                                @delete-dragged="deleteEntry(dragged_item)"
+                                                @create-new="createEntryClick(new Date())"
+                                                @set-starting-day-back="setStartingDay(-1)"
+                                                @set-starting-day-forward="setStartingDay(1)"
+                                                :i-cal-url="iCalUrl"
+                                                :options="options"
+                                                :settings_prop="settings"
+                                            />
+                                        </template>
+                                    </calendar-view>
+                                </div>
                             </div>
                         </div>
-                        <div class="col-12 mt-2" style="padding-bottom: 60px">
-                            <div v-for="day in mobileSimpleGrid" v-bind:key="day.day">
-                                <b-list-group>
-                                    <b-list-group-item>
-                                        <div class="d-flex flex-row align-middle">
-                                            <h6 class="mb-0 mt-1 align-middle">{{ day.date_label }}</h6>
-
-                                            <div class="flex-grow-1 text-right">
-                                                <b-button class="btn-sm btn-outline-primary" @click="showMealPlanEditModal(null, day.create_default_date)"><i
-                                                    class="fa fa-plus"></i></b-button>
-                                            </div>
+                    </div>
+                    <div class="row">
+                        <div class="col">
+                            <div class="row d-block d-lg-none">
+                                <div>
+                                    <div class="col-12">
+                                        <div class="col-12 d-flex justify-content-center mt-2">
+                                            <b-button-toolbar key-nav aria-label="Toolbar with button groups">
+                                                <b-button-group class="mx-1">
+                                                    <b-button v-html="'<<'" class="p-2 pr-3 pl-3"
+                                                              @click="setShowDate($refs.header.headerProps.previousPeriod)"></b-button>
+                                                </b-button-group>
+                                                <b-button-group class="mx-1">
+                                                    <b-button @click="setShowDate($refs.header.headerProps.currentPeriod)"><i
+                                                        class="fas fa-home"></i></b-button>
+                                                    <b-form-datepicker right button-only button-variant="secondary" @context="datePickerChanged"></b-form-datepicker>
+                                                </b-button-group>
+                                                <b-button-group class="mx-1">
+                                                    <b-button v-html="'>>'" class="p-2 pr-3 pl-3"
+                                                              @click="setShowDate($refs.header.headerProps.nextPeriod)"></b-button>
+                                                </b-button-group>
+                                            </b-button-toolbar>
                                         </div>
-
-                                    </b-list-group-item>
-                                    <b-list-group-item v-for="plan in day.plan_entries" v-bind:key="plan.entry.id">
-                                        <div class="d-flex flex-row align-items-center">
-                                            <div>
-                                                <b-img style="height: 50px; width: 50px; object-fit: cover"
-                                                       :src="plan.entry.recipe.image" rounded="circle" v-if="plan.entry.recipe?.image"></b-img>
-                                                <b-img style="height: 50px; width: 50px; object-fit: cover"
-                                                       :src="image_placeholder" rounded="circle" v-else></b-img>
-                                            </div>
-                                            <div class="flex-grow-1 ml-2"
-                                                 style="text-overflow: ellipsis; overflow-wrap: anywhere;">
+                                    </div>
+                                    <div class="col-12 mt-2" style="padding-bottom: 60px">
+                                        <div v-for="day in mobileSimpleGrid" v-bind:key="day.day">
+                                            <b-list-group>
+                                                <b-list-group-item>
+                                                    <div class="d-flex flex-row align-middle">
+                                                        <h6 class="mb-0 mt-1 align-middle">{{ day.date_label }}</h6>
+
+                                                        <div class="flex-grow-1 text-right">
+                                                            <b-button class="btn-sm btn-outline-primary" @click="showMealPlanEditModal(null, day.create_default_date)"><i
+                                                                class="fa fa-plus"></i></b-button>
+                                                        </div>
+                                                    </div>
+
+                                                </b-list-group-item>
+                                                <b-list-group-item v-for="plan in day.plan_entries" v-bind:key="plan.entry.id">
+                                                    <div class="d-flex flex-row align-items-center">
+                                                        <div>
+                                                            <b-img style="height: 50px; width: 50px; object-fit: cover"
+                                                                   :src="plan.entry.recipe.image" rounded="circle" v-if="plan.entry.recipe?.image"></b-img>
+                                                            <b-img style="height: 50px; width: 50px; object-fit: cover"
+                                                                   :src="image_placeholder" rounded="circle" v-else></b-img>
+                                                        </div>
+                                                        <div class="flex-grow-1 ml-2"
+                                                             style="text-overflow: ellipsis; overflow-wrap: anywhere;">
                                                     <span class="two-row-text">
                                                         <a :href="resolveDjangoUrl('view_recipe', plan.entry.recipe.id)" v-if="plan.entry.recipe">{{ plan.entry.recipe.name }}</a>
                                                         <span v-else>{{ plan.entry.title }}</span> <br/>
                                                     </span>
-                                                <span v-if="plan.entry.note" class="two-row-text">
+                                                            <span v-if="plan.entry.note" class="two-row-text">
                                                     <small>{{ plan.entry.note }}</small> <br/>
                                                 </span>
-                                                <small class="text-muted">
-                                                    <span v-if="plan.entry.shopping" class="font-light"><i class="fas fa-shopping-cart fa-xs "/></span>
-                                                    {{ plan.entry.meal_type_name }}
-                                                    <span v-if="plan.entry.recipe">
+                                                            <small class="text-muted">
+                                                                <span v-if="plan.entry.shopping" class="font-light"><i class="fas fa-shopping-cart fa-xs "/></span>
+                                                                {{ plan.entry.meal_type_name }}
+                                                                <span v-if="plan.entry.recipe">
                                                      - <i class="fa fa-clock"></i> {{ plan.entry.recipe.working_time + plan.entry.recipe.waiting_time }} {{ $t('min') }}
                                                 </span>
-                                                </small>
-                                            </div>
-                                            <div class="hover-button">
-                                                <a class="pr-2" @click.stop="openContextMenu($event, {originalItem: plan})"><i class="fas fa-ellipsis-v"></i></a>
-                                            </div>
+                                                            </small>
+                                                        </div>
+                                                        <div class="hover-button">
+                                                            <a class="pr-2" @click.stop="openContextMenu($event, {originalItem: plan})"><i class="fas fa-ellipsis-v"></i></a>
+                                                        </div>
+                                                    </div>
+                                                </b-list-group-item>
+
+                                            </b-list-group>
                                         </div>
-                                    </b-list-group-item>
+                                    </div>
 
-                                </b-list-group>
+                                </div>
                             </div>
                         </div>
-
                     </div>
                 </div>
 
@@ -139,7 +170,7 @@
                                             </div>
                                             <div class="col-10">
                                                 <h5 class="mt-1 mb-1">
-                                                    {{ meal_type.name  }}<span class="float-right text-primary" style="cursor: pointer"
+                                                    {{ meal_type.name }}<span class="float-right text-primary" style="cursor: pointer"
                                                 ><i class="fa"
                                                     v-bind:class="{ 'fa-pen': !meal_type.editing, 'fa-save': meal_type.editing }"
                                                     @click="editOrSaveMealType(index)" aria-hidden="true"></i
@@ -253,20 +284,6 @@
             :current_period="current_period"
         ></auto-meal-plan-modal>
 
-        <div class="row d-none d-lg-block">
-            <div class="col-12 float-right">
-                <button class="btn btn-success shadow-none" @click="createEntryClick(new Date())"><i
-                    class="fas fa-calendar-plus"></i> {{ $t("Create") }}
-                </button>
-                <button class="btn btn-primary shadow-none" @click="createAutoPlan(new Date())"><i
-                    class="fas fa-calendar-plus"></i> {{ $t("Auto_Planner") }}
-                </button>
-                <a class="btn btn-primary shadow-none" :href="iCalUrl"><i class="fas fa-download"></i>
-                    {{ $t("Export_To_ICal") }}
-                </a>
-            </div>
-        </div>
-
         <bottom-navigation-bar :create_links="[{label:$t('Export_To_ICal'), url: iCalUrl, icon:'fas fa-download'}]">
             <template #custom_create_functions>
                 <h6 class="dropdown-header">{{ $t('Meal_Plan') }}</h6>
diff --git a/vue/src/components/MealPlanCard.vue b/vue/src/components/MealPlanCard.vue
index b09373b83d..b04322fc34 100644
--- a/vue/src/components/MealPlanCard.vue
+++ b/vue/src/components/MealPlanCard.vue
@@ -14,7 +14,7 @@
         <div class="card-header p-1 text-center text-primary border-bottom-0" v-if="detailed" :style="`background-color: ${background_color}`">
             <span class="font-light text-center" v-if="entry.entry.meal_type.icon != null">{{ entry.entry.meal_type.icon }}</span>
             <span class="font-light d-none d-md-inline">{{ entry.entry.meal_type.name }}</span>
-            <span v-if="entry.entry.shopping" class="font-light"><i class="fas fa-shopping-cart fa-xs float-left" v-b-tooltip.hover.top :title="$t('in_shopping')" /></span>
+            <span v-if="entry.entry.shopping" class="font-light"><i class="fas fa-shopping-cart fa-xs float-left" v-b-tooltip.hover.top :title="$t('in_shopping')"/></span>
         </div>
         <div class="card-img-overlay h-100 d-flex flex-column justify-content-right float-right text-right p-0" v-if="detailed">
             <a>
@@ -41,11 +41,8 @@
         <div class="card-body p-1" v-if="detailed && entry.entry.recipe == null" :style="`background-color: ${background_color}`">
             <p>{{ entry.entry.note }}</p>
         </div>
+
         <div class="row p-1 flex-nowrap" v-if="!detailed" :style="`background-color: ${background_color}`">
-            <div class="col-2">
-                <span class="font-light text-center" v-if="entry.entry.meal_type.icon != null" v-b-tooltip.hover.left :title="entry.entry.meal_type.name">{{ entry.entry.meal_type.icon }}</span>
-                <span class="font-light text-center" v-if="entry.entry.meal_type.icon == null" v-b-tooltip.hover.left :title="entry.entry.meal_type.name">❓</span>
-            </div>
             <div class="col-10 d-inline-block text-truncate" :style="`max-height:${item_height}`">
                 <span class="font-light">{{ title }}</span>
             </div>
@@ -71,7 +68,8 @@ export default {
             image_placeholder: window.IMAGE_PLACEHOLDER,
         }
     },
-    mounted() {},
+    mounted() {
+    },
     computed: {
         entry: function () {
             return this.value.originalItem
diff --git a/vue/src/components/MealPlanEditModal.vue b/vue/src/components/MealPlanEditModal.vue
index e78e78005a..275ba740c1 100644
--- a/vue/src/components/MealPlanEditModal.vue
+++ b/vue/src/components/MealPlanEditModal.vue
@@ -135,10 +135,9 @@ import Vue from "vue"
 import VueCookies from "vue-cookies"
 import {BootstrapVue} from "bootstrap-vue"
 import GenericMultiselect from "@/components/GenericMultiselect"
-import {ApiMixin, getUserPreference} from "@/utils/utils"
+import {ApiMixin, getUserPreference, ToastMixin} from "@/utils/utils"
 
 const {ApiApiFactory} = require("@/utils/openapi/api")
-const {StandardToasts} = require("@/utils/utils")
 
 import {useUserPreferenceStore} from "@/stores/UserPreferenceStore";
 import {useMealPlanStore} from "@/stores/MealPlanStore";
@@ -163,7 +162,7 @@ export default {
             default: true,
         },
     },
-    mixins: [ApiMixin],
+    mixins: [ApiMixin, ToastMixin],
     components: {
         GenericMultiselect,
         RecipeCard: () => import("@/components/RecipeCard.vue"),
@@ -234,9 +233,11 @@ export default {
         editEntry() {
 
             if (this.entryEditing.meal_type == null) {
+                this.makeToast('Warning', this.$t('Meal_Type_Required'), 'warning')
                 return;
             }
             if (this.entryEditing.recipe == null && this.entryEditing.title === "") {
+                this.makeToast('Warning', this.$t('Title_or_Recipe_Required'), 'warning')
                 return
             }
             //TODO properly validate
diff --git a/vue/src/components/Modals/ColorInput.vue b/vue/src/components/Modals/ColorInput.vue
new file mode 100644
index 0000000000..1a1c5afc12
--- /dev/null
+++ b/vue/src/components/Modals/ColorInput.vue
@@ -0,0 +1,46 @@
+<template>
+    <div>
+        <b-form-group v-bind:label="field_label" class="mb-3">
+            <b-form-input v-model="new_value" type="color" ></b-form-input>
+            <em v-if="help" class="small text-muted">{{ help }}</em>
+            <small v-if="subtitle" class="text-muted">{{ subtitle }}</small>
+        </b-form-group>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "ColorInput",
+    props: {
+        field: { type: String, default: "You Forgot To Set Field Name" },
+        label: { type: String, default: "Text Field" },
+        value: { type: String, default: "" },
+        help: { type: String, default: undefined },
+        subtitle: { type: String, default: undefined },
+        optional: {type: Boolean, default: false},
+    },
+    computed: {
+        field_label: function () {
+            if (this.optional) {
+                return this.label
+            } else {
+                return this.label + '*'
+            }
+        }
+    },
+    data() {
+        return {
+            new_value: undefined,
+        }
+    },
+    mounted() {
+        this.new_value = this.value
+    },
+    watch: {
+        new_value: function () {
+            this.$root.$emit("change", this.field, this.new_value)
+        },
+    },
+    methods: {},
+}
+</script>
diff --git a/vue/src/components/Modals/GenericModalForm.vue b/vue/src/components/Modals/GenericModalForm.vue
index 15bdd25810..a2bdb9a612 100644
--- a/vue/src/components/Modals/GenericModalForm.vue
+++ b/vue/src/components/Modals/GenericModalForm.vue
@@ -19,6 +19,7 @@
                     <file-input v-if="visibleCondition(f, 'file')" :label="f.label" :value="f.value" :field="f.field" @change="storeValue" :optional="f.optional"/>
                     <small-text v-if="visibleCondition(f, 'smalltext')" :value="f.value" />
                     <date-input v-if="visibleCondition(f, 'date')" :label="f.label" :value="f.value" :field="f.field" :help="showHelp && f.help" :subtitle="f.subtitle" :optional="f.optional"/>
+                    <color-input v-if="visibleCondition(f, 'color')" :label="f.label" :value="f.value" :field="f.field" :help="showHelp && f.help" :subtitle="f.subtitle" :optional="f.optional"/>
                     <number-input v-if="visibleCondition(f, 'number')" :label="f.label" :value="f.value" :field="f.field" :placeholder="f.placeholder" :help="showHelp && f.help" :subtitle="f.subtitle" :optional="f.optional"/>
                 </div>
                 <template v-slot:modal-footer>
diff --git a/vue/src/utils/models.js b/vue/src/utils/models.js
index 5ff3655fe5..700d096ca4 100644
--- a/vue/src/utils/models.js
+++ b/vue/src/utils/models.js
@@ -23,7 +23,7 @@ export class Models {
                         false: undefined,
                     },
                 },
-                tree: { default: undefined },
+                tree: {default: undefined},
             },
         },
         delete: {
@@ -50,7 +50,7 @@ export class Models {
                     type: "lookup",
                     field: "target",
                     list: "self",
-                    sticky_options: [{ id: 0, name: "tree_root" }],
+                    sticky_options: [{id: 0, name: "tree_root"}],
                 },
             },
         },
@@ -71,7 +71,7 @@ export class Models {
             food_onhand: true,
             shopping: true,
         },
-        tags: [{ field: "supermarket_category", label: "name", color: "info" }],
+        tags: [{field: "supermarket_category", label: "name", color: "info"}],
         // REQUIRED: unordered array of fields that can be set during create
         create: {
             // if not defined partialUpdate will use the same parameters, prepending 'id'
@@ -177,7 +177,7 @@ export class Models {
                     field: "substitute_siblings",
                     label: "substitute_siblings", // form.label always translated in utils.getForm()
                     help_text: "substitute_siblings_help", // form.help_text always translated
-                    condition: { field: "parent", value: true, condition: "field_exists" },
+                    condition: {field: "parent", value: true, condition: "field_exists"},
                 },
                 substitute_children: {
                     form_field: true,
@@ -186,7 +186,7 @@ export class Models {
                     field: "substitute_children",
                     label: "substitute_children",
                     help_text: "substitute_children_help",
-                    condition: { field: "numchild", value: 0, condition: "gt" },
+                    condition: {field: "numchild", value: 0, condition: "gt"},
                 },
                 inherit_fields: {
                     form_field: true,
@@ -196,7 +196,7 @@ export class Models {
                     field: "inherit_fields",
                     list: "FOOD_INHERIT_FIELDS",
                     label: "InheritFields",
-                    condition: { field: "food_children_exist", value: true, condition: "preference_equals" },
+                    condition: {field: "food_children_exist", value: true, condition: "preference_equals"},
                     help_text: "InheritFields_help",
                 },
                 child_inherit_fields: {
@@ -207,7 +207,7 @@ export class Models {
                     field: "child_inherit_fields",
                     list: "FOOD_INHERIT_FIELDS",
                     label: "ChildInheritFields", // form.label always translated in utils.getForm()
-                    condition: { field: "numchild", value: 0, condition: "gt" },
+                    condition: {field: "numchild", value: 0, condition: "gt"},
                     help_text: "ChildInheritFields_help", // form.help_text always translated
                 },
                 reset_inherit: {
@@ -217,7 +217,7 @@ export class Models {
                     field: "reset_inherit",
                     label: "reset_children",
                     help_text: "reset_children_help",
-                    condition: { field: "numchild", value: 0, condition: "gt" },
+                    condition: {field: "numchild", value: 0, condition: "gt"},
                 },
                 form_function: "FoodCreateDefault",
             },
@@ -304,24 +304,24 @@ export class Models {
                     form_field: true,
                     type: "choice",
                     options: [
-                        { value: "g", text: "g" },
-                        { value: "kg", text: "kg" },
-                        { value: "ounce", text: "ounce" },
-                        { value: "pound", text: "pound" },
-                        { value: "ml", text: "ml" },
-                        { value: "l", text: "l" },
-                        { value: "fluid_ounce", text: "fluid_ounce" },
-                        { value: "pint", text: "pint" },
-                        { value: "quart", text: "quart" },
-                        { value: "gallon", text: "gallon" },
-                        { value: "tbsp", text: "tbsp" },
-                        { value: "tsp", text: "tsp" },
-                        { value: "imperial_fluid_ounce", text: "imperial_fluid_ounce" },
-                        { value: "imperial_pint", text: "imperial_pint" },
-                        { value: "imperial_quart", text: "imperial_quart" },
-                        { value: "imperial_gallon", text: "imperial_gallon" },
-                        { value: "imperial_tbsp", text: "imperial_tbsp" },
-                        { value: "imperial_tsp", text: "imperial_tsp" },
+                        {value: "g", text: "g"},
+                        {value: "kg", text: "kg"},
+                        {value: "ounce", text: "ounce"},
+                        {value: "pound", text: "pound"},
+                        {value: "ml", text: "ml"},
+                        {value: "l", text: "l"},
+                        {value: "fluid_ounce", text: "fluid_ounce"},
+                        {value: "pint", text: "pint"},
+                        {value: "quart", text: "quart"},
+                        {value: "gallon", text: "gallon"},
+                        {value: "tbsp", text: "tbsp"},
+                        {value: "tsp", text: "tsp"},
+                        {value: "imperial_fluid_ounce", text: "imperial_fluid_ounce"},
+                        {value: "imperial_pint", text: "imperial_pint"},
+                        {value: "imperial_quart", text: "imperial_quart"},
+                        {value: "imperial_gallon", text: "imperial_gallon"},
+                        {value: "imperial_tbsp", text: "imperial_tbsp"},
+                        {value: "imperial_tsp", text: "imperial_tsp"},
                     ],
                     field: "base_unit",
                     label: "Base Unit",
@@ -375,7 +375,7 @@ export class Models {
         name: "Recipe_Book",
         apiName: "RecipeBook",
         create: {
-            params: [["name", "description",  "filter"]],
+            params: [["name", "description", "filter"]],
             form: {
                 name: {
                     form_field: true,
@@ -457,7 +457,7 @@ export class Models {
     static SUPERMARKET = {
         name: "Supermarket",
         apiName: "Supermarket",
-        ordered_tags: [{ field: "category_to_supermarket", label: "category::name", color: "info" }],
+        ordered_tags: [{field: "category_to_supermarket", label: "category::name", color: "info"}],
         create: {
             params: [["name", "description", "category_to_supermarket"]],
             form: {
@@ -540,13 +540,13 @@ export class Models {
                     form_field: true,
                     type: "choice",
                     options: [
-                        { value: "FOOD_ALIAS", text: "Food_Alias" },
-                        { value: "UNIT_ALIAS", text: "Unit_Alias" },
-                        { value: "KEYWORD_ALIAS", text: "Keyword_Alias" },
-                        { value: "DESCRIPTION_REPLACE", text: "Description_Replace" },
-                        { value: "INSTRUCTION_REPLACE", text: "Instruction_Replace" },
-                        { value: "NEVER_UNIT", text: "Never_Unit" },
-                        { value: "TRANSPOSE_WORDS", text: "Transpose_Words" },
+                        {value: "FOOD_ALIAS", text: "Food_Alias"},
+                        {value: "UNIT_ALIAS", text: "Unit_Alias"},
+                        {value: "KEYWORD_ALIAS", text: "Keyword_Alias"},
+                        {value: "DESCRIPTION_REPLACE", text: "Description_Replace"},
+                        {value: "INSTRUCTION_REPLACE", text: "Instruction_Replace"},
+                        {value: "NEVER_UNIT", text: "Never_Unit"},
+                        {value: "TRANSPOSE_WORDS", text: "Transpose_Words"},
                     ],
                     field: "type",
                     label: "Type",
@@ -830,7 +830,7 @@ export class Models {
             params: ["filter_list"],
         },
         create: {
-            params: [["name"]],
+            params: [["name", "color", "default"]],
             form: {
                 name: {
                     form_field: true,
@@ -839,6 +839,20 @@ export class Models {
                     label: "Name",
                     placeholder: "",
                 },
+                color: {
+                    form_field: true,
+                    type: "color",
+                    field: "color",
+                    label: "Color",
+                    placeholder: "",
+                },
+                default: {
+                    form_field: true,
+                    type: "checkbox",
+                    field: "default",
+                    label: "Default",
+                    placeholder: "",
+                },
             },
         },
     }
@@ -995,7 +1009,7 @@ export class Actions {
                     },
                 ],
             },
-            ok_label: { function: "translate", phrase: "Save" },
+            ok_label: {function: "translate", phrase: "Save"},
         },
     }
     static UPDATE = {
@@ -1030,7 +1044,7 @@ export class Actions {
                     },
                 ],
             },
-            ok_label: { function: "translate", phrase: "Delete" },
+            ok_label: {function: "translate", phrase: "Delete"},
             instruction: {
                 form_field: true,
                 type: "instruction",
@@ -1057,17 +1071,17 @@ export class Actions {
         suffix: "s",
         params: ["query", "page", "pageSize", "options"],
         config: {
-            query: { default: undefined },
-            page: { default: 1 },
-            pageSize: { default: 25 },
+            query: {default: undefined},
+            page: {default: 1},
+            pageSize: {default: 25},
         },
     }
     static MERGE = {
         function: "merge",
         params: ["source", "target"],
         config: {
-            source: { type: "string" },
-            target: { type: "string" },
+            source: {type: "string"},
+            target: {type: "string"},
         },
         form: {
             title: {
@@ -1082,7 +1096,7 @@ export class Actions {
                     },
                 ],
             },
-            ok_label: { function: "translate", phrase: "Merge" },
+            ok_label: {function: "translate", phrase: "Merge"},
             instruction: {
                 form_field: true,
                 type: "instruction",
@@ -1116,8 +1130,8 @@ export class Actions {
         function: "move",
         params: ["source", "target"],
         config: {
-            source: { type: "string" },
-            target: { type: "string" },
+            source: {type: "string"},
+            target: {type: "string"},
         },
         form: {
             title: {
@@ -1132,7 +1146,7 @@ export class Actions {
                     },
                 ],
             },
-            ok_label: { function: "translate", phrase: "Move" },
+            ok_label: {function: "translate", phrase: "Move"},
             instruction: {
                 form_field: true,
                 type: "instruction",
diff --git a/vue/src/utils/openapi/api.ts b/vue/src/utils/openapi/api.ts
index bc23bfd8e7..c4a8c2da03 100644
--- a/vue/src/utils/openapi/api.ts
+++ b/vue/src/utils/openapi/api.ts
@@ -4,7 +4,7 @@
  * Django Recipes
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * The version of the OpenAPI document: 0.0.0
+ * The version of the OpenAPI document: 1.0.0
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
@@ -166,7 +166,9 @@ export enum AutomationTypeEnum {
     UnitAlias = 'UNIT_ALIAS',
     KeywordAlias = 'KEYWORD_ALIAS',
     DescriptionReplace = 'DESCRIPTION_REPLACE',
-    InstructionReplace = 'INSTRUCTION_REPLACE'
+    InstructionReplace = 'INSTRUCTION_REPLACE',
+    NeverUnit = 'NEVER_UNIT',
+    TransposeWords = 'TRANSPOSE_WORDS'
 }
 
 /**
@@ -463,6 +465,12 @@ export interface Food {
      * @memberof Food
      */
     recipe?: FoodRecipe | null;
+    /**
+     * 
+     * @type {string}
+     * @memberof Food
+     */
+    url?: string | null;
     /**
      * 
      * @type {Array<FoodProperties>}
@@ -665,6 +673,12 @@ export interface FoodPropertiesFoodUnit {
      * @memberof FoodPropertiesFoodUnit
      */
     description?: string | null;
+    /**
+     * 
+     * @type {string}
+     * @memberof FoodPropertiesFoodUnit
+     */
+    base_unit?: string | null;
     /**
      * 
      * @type {string}
@@ -695,19 +709,19 @@ export interface FoodPropertyType {
      * @type {string}
      * @memberof FoodPropertyType
      */
-    icon?: string | null;
+    unit?: string | null;
     /**
      * 
      * @type {string}
      * @memberof FoodPropertyType
      */
-    unit?: string | null;
+    description?: string | null;
     /**
      * 
-     * @type {string}
+     * @type {number}
      * @memberof FoodPropertyType
      */
-    description?: string | null;
+    order?: number;
     /**
      * 
      * @type {string}
@@ -928,12 +942,6 @@ export interface ImportLogKeyword {
      * @memberof ImportLogKeyword
      */
     name: string;
-    /**
-     * 
-     * @type {string}
-     * @memberof ImportLogKeyword
-     */
-    icon?: string | null;
     /**
      * 
      * @type {string}
@@ -1104,6 +1112,12 @@ export interface IngredientFood {
      * @memberof IngredientFood
      */
     recipe?: FoodRecipe | null;
+    /**
+     * 
+     * @type {string}
+     * @memberof IngredientFood
+     */
+    url?: string | null;
     /**
      * 
      * @type {Array<FoodProperties>}
@@ -1708,12 +1722,6 @@ export interface Keyword {
      * @memberof Keyword
      */
     name: string;
-    /**
-     * 
-     * @type {string}
-     * @memberof Keyword
-     */
-    icon?: string | null;
     /**
      * 
      * @type {string}
@@ -1866,12 +1874,6 @@ export interface MealPlanMealType {
      * @memberof MealPlanMealType
      */
     order?: number;
-    /**
-     * 
-     * @type {string}
-     * @memberof MealPlanMealType
-     */
-    icon?: string | null;
     /**
      * 
      * @type {string}
@@ -2043,12 +2045,6 @@ export interface MealType {
      * @memberof MealType
      */
     order?: number;
-    /**
-     * 
-     * @type {string}
-     * @memberof MealType
-     */
-    icon?: string | null;
     /**
      * 
      * @type {string}
@@ -3067,19 +3063,19 @@ export interface PropertyType {
      * @type {string}
      * @memberof PropertyType
      */
-    icon?: string | null;
+    unit?: string | null;
     /**
      * 
      * @type {string}
      * @memberof PropertyType
      */
-    unit?: string | null;
+    description?: string | null;
     /**
      * 
-     * @type {string}
+     * @type {number}
      * @memberof PropertyType
      */
-    description?: string | null;
+    order?: number;
     /**
      * 
      * @type {string}
@@ -3262,12 +3258,6 @@ export interface RecipeBook {
      * @memberof RecipeBook
      */
     description?: string;
-    /**
-     * 
-     * @type {string}
-     * @memberof RecipeBook
-     */
-    icon?: string | null;
     /**
      * 
      * @type {Array<CustomFilterShared>}
@@ -3514,12 +3504,6 @@ export interface RecipeKeywords {
      * @memberof RecipeKeywords
      */
     name: string;
-    /**
-     * 
-     * @type {string}
-     * @memberof RecipeKeywords
-     */
-    icon?: string | null;
     /**
      * 
      * @type {string}
@@ -3855,6 +3839,12 @@ export interface RecipeSteps {
      * @memberof RecipeSteps
      */
     numrecipe?: string;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof RecipeSteps
+     */
+    show_ingredients_table?: boolean;
 }
 /**
  * 
@@ -4580,7 +4570,7 @@ export interface Step {
      * @type {boolean}
      * @memberof Step
      */
-    show_ingredeints_table?: boolean;
+    show_ingredients_table?: boolean;
 }
 /**
  * 
@@ -4851,6 +4841,12 @@ export interface Unit {
      * @memberof Unit
      */
     description?: string | null;
+    /**
+     * 
+     * @type {string}
+     * @memberof Unit
+     */
+    base_unit?: string | null;
     /**
      * 
      * @type {string}
@@ -4943,6 +4939,12 @@ export interface UnitConversionBaseUnit {
      * @memberof UnitConversionBaseUnit
      */
     description?: string | null;
+    /**
+     * 
+     * @type {string}
+     * @memberof UnitConversionBaseUnit
+     */
+    base_unit?: string | null;
     /**
      * 
      * @type {string}
diff --git a/vue/src/utils/openapi/common.ts b/vue/src/utils/openapi/common.ts
index c97e037f96..4742584377 100644
--- a/vue/src/utils/openapi/common.ts
+++ b/vue/src/utils/openapi/common.ts
@@ -4,7 +4,7 @@
  * Django Recipes
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * The version of the OpenAPI document: 0.0.0
+ * The version of the OpenAPI document: 1.0.0
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
diff --git a/vue/src/utils/openapi/configuration.ts b/vue/src/utils/openapi/configuration.ts
index 4b9ac39b21..9d1d14086f 100644
--- a/vue/src/utils/openapi/configuration.ts
+++ b/vue/src/utils/openapi/configuration.ts
@@ -4,7 +4,7 @@
  * Django Recipes
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * The version of the OpenAPI document: 0.0.0
+ * The version of the OpenAPI document: 1.0.0
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).