diff --git a/vue/src/components/Settings/AccountSettingsComponent.vue b/vue/src/components/Settings/AccountSettingsComponent.vue
index 2df3c9afa..27900bd3f 100644
--- a/vue/src/components/Settings/AccountSettingsComponent.vue
+++ b/vue/src/components/Settings/AccountSettingsComponent.vue
@@ -1,15 +1,22 @@
 <template>
-    <div v-if="user !== undefined">
+    <div>
+        <div v-if="user !== undefined">
+
+            <b-form-input v-model="user.username" @change="updateUser(false)" disabled></b-form-input>
+            <b-form-input v-model="user.first_name" @change="updateUser(false)"></b-form-input>
+            <b-form-input v-model="user.last_name" @change="updateUser(false)"></b-form-input>
+        </div>
+
+        <a :href="resolveDjangoUrl('account_email')" class="btn btn-primary">Emails</a>
+        <a :href="resolveDjangoUrl('account_change_password')" class="btn btn-primary">Password</a>
+        <a :href="resolveDjangoUrl('socialaccount_connections')" class="btn btn-primary">Social</a>
 
-        <b-form-input v-model="user.username" @change="updateUser(false)" disabled></b-form-input>
-        <b-form-input v-model="user.first_name" @change="updateUser(false)"></b-form-input>
-        <b-form-input v-model="user.last_name" @change="updateUser(false)"></b-form-input>
     </div>
 </template>
 
 <script>
 import {ApiApiFactory} from "@/utils/openapi/api";
-import {StandardToasts} from "@/utils/utils";
+import {ResolveUrlMixin, StandardToasts} from "@/utils/utils";
 
 import axios from "axios";
 
@@ -18,6 +25,7 @@ axios.defaults.xsrfHeaderName = "X-CSRFTOKEN"
 
 export default {
     name: "AccountSettingsComponent",
+    mixins: [ResolveUrlMixin],
     props: {
         user_id: Number,
     },
diff --git a/vue/src/components/Settings/ShoppingSettingsComponent.vue b/vue/src/components/Settings/ShoppingSettingsComponent.vue
index 7455cd7de..aa2bd1a05 100644
--- a/vue/src/components/Settings/ShoppingSettingsComponent.vue
+++ b/vue/src/components/Settings/ShoppingSettingsComponent.vue
@@ -1,21 +1,50 @@
 <template>
     <div v-if="user_preferences !== undefined">
 
+        <generic-multiselect
+            @change="updateSettings(false)"
+            :model="Models.USER"
+            :initial_selection="user_preferences.shopping_share"
+            label="display_name"
+            :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"
+                      @change="updateSettings(false)"></b-form-input>
+
+         <b-form-checkbox v-model="user_preferences.mealplan_autoadd_shopping" @change="updateSettings(false)"></b-form-checkbox>
+         <b-form-checkbox v-model="user_preferences.mealplan_autoexclude_onhand" @change="updateSettings(false)"></b-form-checkbox>
+         <b-form-checkbox v-model="user_preferences.mealplan_autoinclude_related" @change="updateSettings(false)"></b-form-checkbox>
+         <b-form-checkbox v-model="user_preferences.shopping_add_onhand" @change="updateSettings(false)"></b-form-checkbox>
+
+        <b-form-input type="number" v-model="user_preferences.default_delay" @change="updateSettings(false)"></b-form-input>
+        <b-form-checkbox v-model="user_preferences.filter_to_supermarket" @change="updateSettings(false)"></b-form-checkbox>
+        <b-form-input type="range" min="0" max="14" step="1" v-model="user_preferences.shopping_recent_days"
+                      @change="updateSettings(false)"></b-form-input>
+
+        
+        <b-form-input v-model="user_preferences.csv_delim" @change="updateSettings(false)"></b-form-input>
+        <b-form-input v-model="user_preferences.csv_prefix" @change="updateSettings(false)"></b-form-input>
     </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"
 
 export default {
     name: "ShoppingSettingsComponent",
+    mixins: [ApiMixin],
+    components: {GenericMultiselect},
     props: {
         user_id: Number,
     },