diff --git a/cookbook/migrations/0200_alter_propertytype_options_remove_keyword_icon_and_more.py b/cookbook/migrations/0200_alter_propertytype_options_remove_keyword_icon_and_more.py
new file mode 100644
index 000000000..104d6a721
--- /dev/null
+++ b/cookbook/migrations/0200_alter_propertytype_options_remove_keyword_icon_and_more.py
@@ -0,0 +1,52 @@
+# Generated by Django 4.1.10 on 2023-08-29 11:59
+
+from django.db import migrations
+from django.db.models import F, Value
+from django.db.models.functions import Concat
+from django_scopes import scopes_disabled
+
+
+def migrate_icons(apps, schema_editor):
+    with scopes_disabled():
+        MealType = apps.get_model('cookbook', 'MealType')
+        Keyword = apps.get_model('cookbook', 'Keyword')
+        PropertyType = apps.get_model('cookbook', 'PropertyType')
+        RecipeBook = apps.get_model('cookbook', 'RecipeBook')
+
+        MealType.objects.update(name=Concat(F('icon'), Value(' '), F('name')))
+        Keyword.objects.update(name=Concat(F('icon'), Value(' '), F('name')))
+        PropertyType.objects.update(name=Concat(F('icon'), Value(' '), F('name')))
+        RecipeBook.objects.update(name=Concat(F('icon'), Value(' '), F('name')))
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ('cookbook', '0199_alter_propertytype_options_alter_automation_type_and_more'),
+    ]
+
+    operations = [
+
+        migrations.RunPython(
+            migrate_icons
+        ),
+        migrations.AlterModelOptions(
+            name='propertytype',
+            options={'ordering': ('order',)},
+        ),
+        migrations.RemoveField(
+            model_name='keyword',
+            name='icon',
+        ),
+        migrations.RemoveField(
+            model_name='mealtype',
+            name='icon',
+        ),
+        migrations.RemoveField(
+            model_name='propertytype',
+            name='icon',
+        ),
+        migrations.RemoveField(
+            model_name='recipebook',
+            name='icon',
+        ),
+    ]
diff --git a/cookbook/models.py b/cookbook/models.py
index 80ef548dc..86d308852 100644
--- a/cookbook/models.py
+++ b/cookbook/models.py
@@ -116,10 +116,7 @@ class TreeModel(MP_Node):
     _full_name_separator = ' > '
 
     def __str__(self):
-        if self.icon:
-            return f"{self.icon} {self.name}"
-        else:
-            return f"{self.name}"
+        return f"{self.name}"
 
     @property
     def parent(self):
@@ -533,7 +530,6 @@ class Keyword(ExportModelOperationsMixin('keyword'), TreeModel, PermissionModelM
     if SORT_TREE_BY_NAME:
         node_order_by = ['name']
     name = models.CharField(max_length=64)
-    icon = models.CharField(max_length=16, blank=True, null=True)
     description = models.TextField(default="", blank=True)
     created_at = models.DateTimeField(auto_now_add=True)  # TODO deprecate
     updated_at = models.DateTimeField(auto_now=True)  # TODO deprecate
@@ -767,7 +763,6 @@ class PropertyType(models.Model, PermissionModelMixin):
 
     name = models.CharField(max_length=128)
     unit = models.CharField(max_length=64, blank=True, null=True)
-    icon = models.CharField(max_length=16, blank=True, null=True)
     order = models.IntegerField(default=0)
     description = models.CharField(max_length=512, blank=True, null=True)
     category = models.CharField(max_length=64, choices=((NUTRITION, _('Nutrition')), (ALLERGEN, _('Allergen')),
@@ -937,7 +932,6 @@ class RecipeImport(models.Model, PermissionModelMixin):
 class RecipeBook(ExportModelOperationsMixin('book'), models.Model, PermissionModelMixin):
     name = models.CharField(max_length=128)
     description = models.TextField(blank=True)
-    icon = models.CharField(max_length=16, blank=True, null=True)
     shared = models.ManyToManyField(User, blank=True, related_name='shared_with')
     created_by = models.ForeignKey(User, on_delete=models.CASCADE)
     filter = models.ForeignKey('cookbook.CustomFilter', null=True, blank=True, on_delete=models.SET_NULL)
@@ -980,7 +974,6 @@ class RecipeBookEntry(ExportModelOperationsMixin('book_entry'), models.Model, Pe
 class MealType(models.Model, PermissionModelMixin):
     name = models.CharField(max_length=128)
     order = models.IntegerField(default=0)
-    icon = models.CharField(max_length=16, blank=True, null=True)
     color = models.CharField(max_length=7, blank=True, null=True)
     default = models.BooleanField(default=False, blank=True)
     created_by = models.ForeignKey(User, on_delete=models.CASCADE)
diff --git a/vue/src/apps/MealPlanView/MealPlanView.vue b/vue/src/apps/MealPlanView/MealPlanView.vue
index 39342410c..385e93ea1 100644
--- a/vue/src/apps/MealPlanView/MealPlanView.vue
+++ b/vue/src/apps/MealPlanView/MealPlanView.vue
@@ -124,31 +124,6 @@
             </b-tab>
             <b-tab :title="$t('Settings')">
                 <div class="row mt-3">
-                    <div class="col-12 col-md-3 calender-options">
-                        <h5>{{ $t("Planner_Settings") }}</h5>
-                        <b-form>
-                            <b-form-group id="UomInput" :label="$t('Period')" :description="$t('Plan_Period_To_Show')"
-                                          label-for="UomInput">
-                                <b-form-select id="UomInput" v-model="settings.displayPeriodUom"
-                                               :options="options.displayPeriodUom"></b-form-select>
-                            </b-form-group>
-                            <b-form-group id="PeriodInput" :label="$t('Periods')"
-                                          :description="$t('Plan_Show_How_Many_Periods')" label-for="PeriodInput">
-                                <b-form-select id="PeriodInput" v-model="settings.displayPeriodCount"
-                                               :options="options.displayPeriodCount"></b-form-select>
-                            </b-form-group>
-                            <b-form-group id="DaysInput" :label="$t('Starting_Day')" :description="$t('Starting_Day')"
-                                          label-for="DaysInput">
-                                <b-form-select id="DaysInput" v-model="settings.startingDayOfWeek"
-                                               :options="dayNames"></b-form-select>
-                            </b-form-group>
-                            <b-form-group id="WeekNumInput" :label="$t('Week_Numbers')">
-                                <b-form-checkbox v-model="settings.displayWeekNumbers" name="week_num">
-                                    {{ $t("Show_Week_Numbers") }}
-                                </b-form-checkbox>
-                            </b-form-group>
-                        </b-form>
-                    </div>
                     <div class="col-12 col-md-9 col-lg-6">
                         <h5>{{ $t("Meal_Types") }}</h5>
                         <div>
@@ -418,16 +393,6 @@ export default {
         detailed_items: function () {
             return this.settings.displayPeriodUom === "week"
         },
-        dayNames: function () {
-            let options = []
-            this.getFormattedWeekdayNames(this.userLocale, "long", 0).forEach((day, index) => {
-                options.push({text: day, value: index})
-            })
-            return options
-        },
-        userLocale: function () {
-            return this.getDefaultBrowserLocale
-        },
         item_height: function () {
             if (this.settings.displayPeriodUom === "week") {
                 return "10rem"
diff --git a/vue/src/components/Settings/MealPlanSettingsComponent.vue b/vue/src/components/Settings/MealPlanSettingsComponent.vue
index f95ab8b91..31d525887 100644
--- a/vue/src/components/Settings/MealPlanSettingsComponent.vue
+++ b/vue/src/components/Settings/MealPlanSettingsComponent.vue
@@ -11,6 +11,29 @@
                 :placeholder="$t('User')"
             ></generic-multiselect>
         </b-form-group>
+
+        <b-form v-if="meal_plan_store">
+            <b-form-group id="UomInput" :label="$t('Period')" :description="$t('Plan_Period_To_Show')"
+                          label-for="UomInput">
+                <b-form-select id="UomInput" v-model="meal_plan_store.client_settings.displayPeriodUom"
+                               :options="calendar_options.displayPeriodUom"></b-form-select>
+            </b-form-group>
+            <b-form-group id="PeriodInput" :label="$t('Periods')"
+                          :description="$t('Plan_Show_How_Many_Periods')" label-for="PeriodInput">
+                <b-form-select id="PeriodInput" v-model="meal_plan_store.client_settings.displayPeriodCount"
+                               :options="calendar_options.displayPeriodCount"></b-form-select>
+            </b-form-group>
+            <b-form-group id="DaysInput" :label="$t('Starting_Day')" :description="$t('Starting_Day')"
+                          label-for="DaysInput">
+                <b-form-select id="DaysInput" v-model="meal_plan_store.client_settings.startingDayOfWeek"
+                               :options="dayNames()"></b-form-select>
+            </b-form-group>
+            <b-form-group id="WeekNumInput" :label="$t('Week_Numbers')">
+                <b-form-checkbox v-model="meal_plan_store.client_settings.displayWeekNumbers" name="week_num">
+                    {{ $t("Show_Week_Numbers") }}
+                </b-form-checkbox>
+            </b-form-group>
+        </b-form>
     </div>
 </template>
 
@@ -20,6 +43,8 @@ import {ApiMixin, StandardToasts} from "@/utils/utils";
 
 import axios from "axios";
 import GenericMultiselect from "@/components/GenericMultiselect";
+import {useMealPlanStore} from "@/stores/MealPlanStore";
+import {CalendarMathMixin} from "vue-simple-calendar/src/components/bundle";
 
 axios.defaults.xsrfCookieName = 'csrftoken'
 axios.defaults.xsrfHeaderName = "X-CSRFTOKEN"
@@ -28,7 +53,7 @@ let SETTINGS_COOKIE_NAME = "mealplan_settings"
 
 export default {
     name: "MealPlanSettingsComponent",
-    mixins: [ApiMixin],
+    mixins: [ApiMixin, CalendarMathMixin],
     components: {GenericMultiselect},
     props: {
         user_id: Number,
@@ -37,12 +62,23 @@ export default {
         return {
             user_preferences: undefined,
             languages: [],
+            meal_plan_store: undefined,
+            calendar_options: {
+                displayPeriodUom: [
+                    {text: this.$t("Week"), value: "week"},
+                    {text: this.$t("Month"), value: "month",},
+                    {text: this.$t("Year"), value: "year"},
+                ],
+                displayPeriodCount: [1, 2, 3, 4],
+            },
         }
     },
     mounted() {
         this.user_preferences = this.preferences
         this.languages = window.AVAILABLE_LANGUAGES
         this.loadSettings()
+
+        this.meal_plan_store = useMealPlanStore()
     },
     methods: {
         loadSettings: function () {
@@ -64,6 +100,13 @@ export default {
                 StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE, err)
             })
         },
+        dayNames: function () {
+            let options = []
+            this.getFormattedWeekdayNames(this.getDefaultBrowserLocale(), "long", 0).forEach((day, index) => {
+                options.push({text: day, value: index})
+            })
+            return options
+        },
     }
 }
 </script>
diff --git a/vue/src/stores/MealPlanStore.js b/vue/src/stores/MealPlanStore.js
index 44dbf23da..6eaff8c12 100644
--- a/vue/src/stores/MealPlanStore.js
+++ b/vue/src/stores/MealPlanStore.js
@@ -12,6 +12,12 @@ export const useMealPlanStore = defineStore(_STORE_ID, {
     state: () => ({
         plans: {},
         currently_updating: null,
+        client_settings: {
+            displayPeriodUom: "week",
+            displayPeriodCount: 2,
+            startingDayOfWeek: 1,
+            displayWeekNumbers: true,
+        },
     }),
     getters: {
         plan_list: function () {