diff --git a/vue/src/components/Settings/MealPlanSettingsComponent.vue b/vue/src/components/Settings/MealPlanSettingsComponent.vue
index 04e1539b9..d68087f79 100644
--- a/vue/src/components/Settings/MealPlanSettingsComponent.vue
+++ b/vue/src/components/Settings/MealPlanSettingsComponent.vue
@@ -1,21 +1,34 @@
 <template>
     <div v-if="user_preferences !== undefined">
 
+        <generic-multiselect
+            @change="updateSettings(false)"
+            :model="Models.USER"
+            :initial_selection="user_preferences.plan_share"
+            label="display_name"
+            :multiple="true"
+            :placeholder="$t('User')"
+        ></generic-multiselect>
 
     </div>
 </template>
 
 <script>
 import {ApiApiFactory} from "@/utils/openapi/api";
-import {StandardToasts} from "@/utils/utils";
+import {ApiMixin, StandardToasts} from "@/utils/utils";
 
 import axios from "axios";
+import GenericMultiselect from "@/components/GenericMultiselect";
 
 axios.defaults.xsrfCookieName = 'csrftoken'
 axios.defaults.xsrfHeaderName = "X-CSRFTOKEN"
 
+let SETTINGS_COOKIE_NAME = "mealplan_settings"
+
 export default {
     name: "MealPlanSettingsComponent",
+    mixins: [ApiMixin],
+    components: {GenericMultiselect},
     props: {
         user_id: Number,
     },
diff --git a/vue/src/components/Settings/ShoppingSettingsComponent.vue b/vue/src/components/Settings/ShoppingSettingsComponent.vue
index aa2bd1a05..29ae5f849 100644
--- a/vue/src/components/Settings/ShoppingSettingsComponent.vue
+++ b/vue/src/components/Settings/ShoppingSettingsComponent.vue
@@ -9,7 +9,6 @@
             :multiple="true"
             :placeholder="$t('User')"
         ></generic-multiselect>
-        autosync
 
         <!--TODO load min autosync time from env -->
           <b-form-input type="range" min="0" max="60" step="1" v-model="user_preferences.shopping_auto_sync"