diff --git a/cookbook/migrations/0182_userpreference_image.py b/cookbook/migrations/0182_userpreference_image.py
new file mode 100644
index 00000000..d9405e40
--- /dev/null
+++ b/cookbook/migrations/0182_userpreference_image.py
@@ -0,0 +1,19 @@
+# Generated by Django 4.0.6 on 2022-07-14 13:32
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('cookbook', '0181_space_image'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='userpreference',
+            name='image',
+            field=models.ForeignKey(null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='user_image', to='cookbook.userfile'),
+        ),
+    ]
diff --git a/cookbook/models.py b/cookbook/models.py
index 359fd29e..bcb7a604 100644
--- a/cookbook/models.py
+++ b/cookbook/models.py
@@ -358,22 +358,15 @@ class UserPreference(models.Model, PermissionModelMixin):
     )
 
     user = AutoOneToOneField(User, on_delete=models.CASCADE, primary_key=True)
+    image = models.ForeignKey("UserFile", on_delete=models.SET_NULL, null=True, related_name='user_image')
     theme = models.CharField(choices=THEMES, max_length=128, default=TANDOOR)
-    nav_color = models.CharField(
-        choices=COLORS, max_length=128, default=PRIMARY
-    )
+    nav_color = models.CharField(choices=COLORS, max_length=128, default=PRIMARY)
     default_unit = models.CharField(max_length=32, default='g')
     use_fractions = models.BooleanField(default=FRACTION_PREF_DEFAULT)
     use_kj = models.BooleanField(default=KJ_PREF_DEFAULT)
-    default_page = models.CharField(
-        choices=PAGES, max_length=64, default=SEARCH
-    )
-    plan_share = models.ManyToManyField(
-        User, blank=True, related_name='plan_share_default'
-    )
-    shopping_share = models.ManyToManyField(
-        User, blank=True, related_name='shopping_share'
-    )
+    default_page = models.CharField(choices=PAGES, max_length=64, default=SEARCH)
+    plan_share = models.ManyToManyField(User, blank=True, related_name='plan_share_default')
+    shopping_share = models.ManyToManyField(User, blank=True, related_name='shopping_share')
     ingredient_decimals = models.IntegerField(default=2)
     comments = models.BooleanField(default=COMMENT_PREF_DEFAULT)
     shopping_auto_sync = models.IntegerField(default=5)
diff --git a/cookbook/serializer.py b/cookbook/serializer.py
index 0de4d093..a752e79b 100644
--- a/cookbook/serializer.py
+++ b/cookbook/serializer.py
@@ -320,6 +320,7 @@ class UserPreferenceSerializer(WritableNestedModelSerializer):
     plan_share = UserNameSerializer(many=True, allow_null=True, required=False)
     shopping_share = UserNameSerializer(many=True, allow_null=True, required=False)
     food_children_exist = serializers.SerializerMethodField('get_food_children_exist')
+    image = UserFileViewSerializer(required=False, allow_null=True, many=False)
 
     def get_food_inherit_defaults(self, obj):
         return FoodInheritFieldSerializer(obj.user.get_active_space().food_inherit.all(), many=True).data
@@ -338,8 +339,8 @@ class UserPreferenceSerializer(WritableNestedModelSerializer):
     class Meta:
         model = UserPreference
         fields = (
-            'user', 'theme', 'nav_color', 'default_unit', 'default_page', 'use_fractions', 'use_kj',
-            'plan_share',
+            'user', 'image', 'theme', 'nav_color', 'default_unit', 'default_page', 'use_fractions', 'use_kj',
+            'plan_share', 'sticky_navbar',
             'ingredient_decimals', 'comments', 'shopping_auto_sync', 'mealplan_autoadd_shopping',
             'food_inherit_default', 'default_delay',
             'mealplan_autoinclude_related', 'mealplan_autoexclude_onhand', 'shopping_share', 'shopping_recent_days',
diff --git a/cookbook/templates/user_settings.html b/cookbook/templates/user_settings.html
new file mode 100644
index 00000000..2ffb9b7a
--- /dev/null
+++ b/cookbook/templates/user_settings.html
@@ -0,0 +1,45 @@
+{% extends "base.html" %}
+{% load render_bundle from webpack_loader %}
+{% load static %}
+{% load i18n %}
+{% load l10n %}
+{% load custom_tags %}
+
+{% block title %}{% trans 'Settings' %}{% endblock %}
+
+
+{% block content %}
+
+    <div id="app">
+
+        <settings-view></settings-view>
+    </div>
+
+
+{% endblock %}
+
+
+{% block script %}
+    {% if debug %}
+        <script src="{% url 'js_reverse' %}"></script>
+    {% else %}
+        <script src="{% static 'django_js_reverse/reverse.js' %}"></script>
+    {% endif %}
+
+    <script type="application/javascript">
+        window.CUSTOM_LOCALE = '{{ request.LANGUAGE_CODE }}'
+        window.USER_ID = {{ request.user.pk }}
+
+        <!--TODO build custom API endpoint for this -->
+        {% get_available_languages as LANGUAGES %}
+        {% get_language_info_list for LANGUAGES as languages %}
+        window.AVAILABLE_LANGUAGES = [
+            {% for language in languages %}
+                ['{{ language.name_local }}', '{{ language.code }}'],
+            {% endfor %}
+        ]
+
+    </script>
+
+    {% render_bundle 'settings_view' %}
+{% endblock %}
\ No newline at end of file
diff --git a/cookbook/urls.py b/cookbook/urls.py
index 3d4633a8..8f7f99d7 100644
--- a/cookbook/urls.py
+++ b/cookbook/urls.py
@@ -68,6 +68,7 @@ urlpatterns = [
     path('plan/', views.meal_plan, name='view_plan'),
     path('shopping/', lists.shopping_list, name='view_shopping'),
     path('settings/', views.user_settings, name='view_settings'),
+    path('user-settings/', views.user_settings_new, name='view_user_settings'),
     path('history/', views.history, name='view_history'),
     path('supermarket/', views.supermarket, name='view_supermarket'),
     path('ingredient-editor/', views.ingredient_editor, name='view_ingredient_editor'),
diff --git a/cookbook/views/views.py b/cookbook/views/views.py
index dad7bd29..4af0829a 100644
--- a/cookbook/views/views.py
+++ b/cookbook/views/views.py
@@ -182,6 +182,11 @@ def view_profile(request, user_id):
     return render(request, 'profile.html', {})
 
 
+@group_required('guest')
+def user_settings_new(request):
+    return render(request, 'user_settings.html', {})
+
+
 @group_required('user')
 def ingredient_editor(request):
     template_vars = {'food_id': -1, 'unit_id': -1}
diff --git a/vue/src/apps/SettingsView/SettingsView.vue b/vue/src/apps/SettingsView/SettingsView.vue
new file mode 100644
index 00000000..9fac1a2b
--- /dev/null
+++ b/vue/src/apps/SettingsView/SettingsView.vue
@@ -0,0 +1,66 @@
+<template>
+    <div id="app" class="row">
+        <div class="col-md-3 col-12">
+            <b-nav vertical>
+                <b-nav-item :active="visible_settings === 'cosmetic'" @click="visible_settings = 'cosmetic'"><i
+                    class="fas fa-fw fa-eye"></i> Cosmetic
+                </b-nav-item>
+                <b-nav-item :active="visible_settings === 'account'" @click="visible_settings = 'account'"><i
+                    class="fas fa-fw fa-user"></i> Account
+                </b-nav-item>
+                <b-nav-item :active="visible_settings === 'search'" @click="visible_settings = 'search'"><i
+                    class="fas fa-fw fa-search"></i> Search
+                </b-nav-item>
+                <b-nav-item :active="visible_settings === 'shopping'" @click="visible_settings = 'shopping'"><i
+                    class="fas fa-fw fa-shopping-cart"></i> Shopping
+                </b-nav-item>
+                <b-nav-item :active="visible_settings === 'meal_plan'" @click="visible_settings = 'meal_plan'"><i
+                    class="fas fa-fw fa-calendar"></i> Meal Plan
+                </b-nav-item>
+                <b-nav-item :active="visible_settings === 'api'" @click="visible_settings = 'api'"><i
+                    class="fas fa-fw fa-code"></i> API
+                </b-nav-item>
+            </b-nav>
+        </div>
+        <div class="col-md-9 col-12">
+            Overview
+            <cosmetic-settings-component v-if="visible_settings === 'cosmetic'" :user_id="user_id"></cosmetic-settings-component>
+        </div>
+    </div>
+</template>
+
+<script>
+import Vue from "vue"
+import {BootstrapVue} from "bootstrap-vue"
+
+import "bootstrap-vue/dist/bootstrap-vue.css"
+import {ApiApiFactory} from "@/utils/openapi/api"
+import CookbookSlider from "@/components/CookbookSlider"
+import LoadingSpinner from "@/components/LoadingSpinner"
+import {StandardToasts, ApiMixin} from "@/utils/utils"
+import CosmeticSettingsComponent from "@/components/Settings/CosmeticSettingsComponent";
+
+Vue.use(BootstrapVue)
+
+export default {
+    name: "ProfileView",
+    mixins: [],
+    components: {CosmeticSettingsComponent},
+    data() {
+        return {
+            visible_settings: 'cosmetic',
+            user_id: window.USER_ID,
+        }
+    },
+    mounted() {
+        this.$i18n.locale = window.CUSTOM_LOCALE
+    },
+    methods: {
+
+    },
+}
+</script>
+
+<style>
+
+</style>
diff --git a/vue/src/apps/SettingsView/main.js b/vue/src/apps/SettingsView/main.js
new file mode 100644
index 00000000..4f2d1dff
--- /dev/null
+++ b/vue/src/apps/SettingsView/main.js
@@ -0,0 +1,17 @@
+import Vue from 'vue'
+import App from './SettingsView.vue'
+import i18n from '@/i18n'
+
+Vue.config.productionTip = false
+
+// TODO move this and other default stuff to centralized JS file (verify nothing breaks)
+let publicPath = localStorage.STATIC_URL + 'vue/'
+if (process.env.NODE_ENV === 'development') {
+    publicPath = 'http://localhost:8080/'
+}
+export default __webpack_public_path__ = publicPath // eslint-disable-line
+
+new Vue({
+    i18n,
+    render: h => h(App),
+}).$mount('#app')
diff --git a/vue/src/components/Settings/CosmeticSettingsComponent.vue b/vue/src/components/Settings/CosmeticSettingsComponent.vue
new file mode 100644
index 00000000..3a23a326
--- /dev/null
+++ b/vue/src/components/Settings/CosmeticSettingsComponent.vue
@@ -0,0 +1,110 @@
+<template>
+    <div v-if="user_preferences !== undefined">
+
+        <b-form-input v-model="user_preferences.default_unit" @change="updateSettings"></b-form-input>
+
+        {{ user_preferences.ingredient_decimals }}
+        <b-form-input type="range" min="0" max="4" step="1" v-model="user_preferences.ingredient_decimals"
+                      @change="updateSettings"></b-form-input>
+
+        <b-form-checkbox v-model="user_preferences.use_fractions" @change="updateSettings"></b-form-checkbox>
+
+        <hr/>
+        Language
+        <b-form-select v-model="$i18n.locale" @change="updateLanguage">
+            <b-form-select-option v-bind:key="l[0]" v-for="l in languages" :value="l[1]">{{ l[0] }} ({{
+                    l[1]
+                }})
+            </b-form-select-option>
+        </b-form-select>
+
+        <b-form-select v-model="user_preferences.theme" @change="updateSettings(true);">
+            <b-form-select-option value="TANDOOR">Tandoor</b-form-select-option>
+            <b-form-select-option value="BOOTSTRAP">Bootstrap</b-form-select-option>
+            <b-form-select-option value="DARKLY">Darkly</b-form-select-option>
+            <b-form-select-option value="FLATLY">Flatly</b-form-select-option>
+            <b-form-select-option value="SUPERHERO">Superhero</b-form-select-option>
+        </b-form-select>
+
+        <b-form-checkbox v-model="user_preferences.sticky_navbar" @change="updateSettings(true);"></b-form-checkbox>
+
+        <b-form-select v-model="user_preferences.nav_color" @change="updateSettings(true);">
+            <b-form-select-option value="PRIMARY">Primary</b-form-select-option>
+            <b-form-select-option value="SECONDARY">Secondary</b-form-select-option>
+            <b-form-select-option value="SUCCESS">Success</b-form-select-option>
+            <b-form-select-option value="INFO">Info</b-form-select-option>
+            <b-form-select-option value="WARNING">Warning</b-form-select-option>
+            <b-form-select-option value="DANGER">Danger</b-form-select-option>
+            <b-form-select-option value="LIGHT">Light</b-form-select-option>
+            <b-form-select-option value="DARK">Dark</b-form-select-option>
+        </b-form-select>
+
+        <hr/>
+
+        <b-form-checkbox v-model="user_preferences.use_kj" @change="updateSettings();"></b-form-checkbox>
+        <b-form-checkbox v-model="user_preferences.comments" @change="updateSettings();"></b-form-checkbox>
+        <b-form-checkbox v-model="user_preferences.left_handed" @change="updateSettings();"></b-form-checkbox>
+
+    </div>
+</template>
+
+<script>
+import {ApiApiFactory} from "@/utils/openapi/api";
+import {resolveDjangoUrl, StandardToasts} from "@/utils/utils";
+
+import axios from "axios";
+
+axios.defaults.xsrfCookieName = 'csrftoken'
+axios.defaults.xsrfHeaderName = "X-CSRFTOKEN"
+
+export default {
+    name: "CosmeticSettingsComponent",
+    props: {
+        user_id: Number,
+    },
+    data() {
+        return {
+            user_preferences: undefined,
+            languages: [],
+        }
+    },
+    mounted() {
+        this.user_preferences = this.preferences
+        this.languages = window.AVAILABLE_LANGUAGES
+        this.loadSettings()
+    },
+    methods: {
+        loadSettings: function () {
+            let apiFactory = new ApiApiFactory()
+            apiFactory.retrieveUserPreference(this.user_id.toString()).then(result => {
+                this.user_preferences = result.data
+            }).catch(err => {
+                StandardToasts.makeStandardToast(this, StandardToasts.FAIL_FETCH, err)
+            })
+        },
+        updateSettings: function (reload) {
+            let apiFactory = new ApiApiFactory()
+            apiFactory.partialUpdateUserPreference(this.user_id.toString(), this.user_preferences).then(result => {
+                StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_UPDATE)
+                if (reload !== undefined) {
+                    location.reload()
+                }
+            }).catch(err => {
+                StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE, err)
+            })
+        },
+        updateLanguage: function () {
+            axios.post(resolveDjangoUrl('set_language'), new URLSearchParams({'language': this.$i18n.locale})).then(result => {
+                StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_UPDATE)
+                location.reload()
+            }).catch(err => {
+                StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE, err)
+            })
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/vue/src/utils/openapi/api.ts b/vue/src/utils/openapi/api.ts
index 62c7b3f8..c2b7f786 100644
--- a/vue/src/utils/openapi/api.ts
+++ b/vue/src/utils/openapi/api.ts
@@ -3110,6 +3110,43 @@ export interface Space {
      * @memberof Space
      */
     file_size_mb?: string;
+    /**
+     * 
+     * @type {SpaceImage}
+     * @memberof Space
+     */
+    image?: SpaceImage;
+}
+/**
+ * 
+ * @export
+ * @interface SpaceImage
+ */
+export interface SpaceImage {
+    /**
+     * 
+     * @type {number}
+     * @memberof SpaceImage
+     */
+    id?: number;
+    /**
+     * 
+     * @type {string}
+     * @memberof SpaceImage
+     */
+    name: string;
+    /**
+     * 
+     * @type {string}
+     * @memberof SpaceImage
+     */
+    file_download?: string;
+    /**
+     * 
+     * @type {string}
+     * @memberof SpaceImage
+     */
+    preview?: string;
 }
 /**
  * 
@@ -3528,6 +3565,12 @@ export interface UserPreference {
      * @memberof UserPreference
      */
     user: number;
+    /**
+     * 
+     * @type {RecipeFile}
+     * @memberof UserPreference
+     */
+    image?: RecipeFile | null;
     /**
      * 
      * @type {string}
@@ -3570,6 +3613,12 @@ export interface UserPreference {
      * @memberof UserPreference
      */
     plan_share?: Array<CustomFilterShared> | null;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof UserPreference
+     */
+    sticky_navbar?: boolean;
     /**
      * 
      * @type {number}
diff --git a/vue/vue.config.js b/vue/vue.config.js
index 1b48c39a..13e06ce6 100644
--- a/vue/vue.config.js
+++ b/vue/vue.config.js
@@ -64,6 +64,10 @@ const pages = {
     profile_view: {
         entry: "./src/apps/ProfileView/main.js",
         chunks: ["chunk-vendors"],
+    },
+    settings_view: {
+        entry: "./src/apps/SettingsView/main.js",
+        chunks: ["chunk-vendors"],
     }
 }