From dc7376a37cd306196d03e5170c2c356bfdf7bdf8 Mon Sep 17 00:00:00 2001
From: Andreas <mail@devmount.de>
Date: Tue, 21 Jan 2025 18:14:10 +0100
Subject: [PATCH] User store extended settings store (#828)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ➕ Extend subscriber model with additional settings

* ➕ Extend user store with additional settings

* 🔨 Move settings related functions from utils

* 🔨 Replace deprecated exists function with authenticated

* 🔨 Use init call for whole user store

* 🔨 Load default locale from user settings

* 🔨 Only update settings on settings page

* 🔨 Fix user store tests

* 🔨 Fix user store tests (2nd try)

* 📜 Update documentation

* Update backend/src/appointment/database/models.py

Co-authored-by: Mel <97147377+MelissaAutumn@users.noreply.github.com>

* Update backend/src/appointment/database/models.py

Co-authored-by: Mel <97147377+MelissaAutumn@users.noreply.github.com>

* Update backend/src/appointment/database/schemas.py

Co-authored-by: Mel <97147377+MelissaAutumn@users.noreply.github.com>

* Update backend/src/appointment/migrations/versions/2025_01_15_1340-4a15d01919b8_add_config_fields_to_subscribers_table.py

Co-authored-by: Mel <97147377+MelissaAutumn@users.noreply.github.com>

* Update backend/src/appointment/migrations/versions/2025_01_15_1340-4a15d01919b8_add_config_fields_to_subscribers_table.py

Co-authored-by: Mel <97147377+MelissaAutumn@users.noreply.github.com>

* Update backend/src/appointment/routes/api.py

Co-authored-by: Mel <97147377+MelissaAutumn@users.noreply.github.com>

* Update backend/src/appointment/routes/auth.py

Co-authored-by: Mel <97147377+MelissaAutumn@users.noreply.github.com>

* Update docs/README.md

Co-authored-by: Mel <97147377+MelissaAutumn@users.noreply.github.com>

* 🔨 Fix more colour naming

* 🔨 Fix more colour naming

---------

Co-authored-by: Mel <97147377+MelissaAutumn@users.noreply.github.com>
---
 backend/README.md                             |   8 +-
 backend/src/appointment/database/models.py    |  20 ++-
 backend/src/appointment/database/schemas.py   |   4 +
 ..._add_config_fields_to_subscribers_table.py |  33 ++++
 backend/src/appointment/routes/api.py         |   5 +-
 backend/src/appointment/routes/auth.py        |   3 +
 docs/README.md                                |   6 +-
 frontend/index.html                           |  10 +-
 frontend/src/App.vue                          |  35 +++--
 frontend/src/components/BookingModal.vue      |   6 +-
 frontend/src/components/CalendarQalendar.vue  |  23 +--
 frontend/src/components/FTUE/Finish.vue       |   7 +-
 frontend/src/components/FTUE/SetupProfile.vue |   5 +-
 .../src/components/FTUE/SetupSchedule.vue     |   2 +-
 frontend/src/components/NavBar.vue            |   2 +-
 frontend/src/components/ScheduleCreation.vue  |  10 +-
 frontend/src/components/SettingsAccount.vue   |   9 +-
 .../src/components/SettingsConnections.vue    |   2 +-
 frontend/src/components/SettingsGeneral.vue   |  87 ++++-------
 .../bookingView/BookingViewError.vue          |   2 +-
 .../bookingView/BookingViewSuccess.vue        |   2 +-
 frontend/src/composables/i18n.ts              |   5 +-
 frontend/src/definitions.ts                   |   4 +-
 frontend/src/locales/de.json                  |   2 +-
 frontend/src/main.ts                          |   5 +-
 frontend/src/models.ts                        |  36 +++--
 frontend/src/stores/schedule-store.ts         |   6 +-
 frontend/src/stores/user-store.ts             | 144 ++++++++++++++----
 frontend/src/utils.ts                         |  58 ++-----
 frontend/src/views/ContactView.vue            |   2 +-
 frontend/src/views/LoginView.vue              |   8 +-
 frontend/src/views/LogoutView.vue             |   8 +-
 frontend/src/views/PostLoginView.vue          |   7 +-
 frontend/src/views/ProfileView.vue            |  12 +-
 frontend/test/stores/user-store.test.js       |  41 +++--
 35 files changed, 373 insertions(+), 246 deletions(-)
 create mode 100644 backend/src/appointment/migrations/versions/2025_01_15_1340-4a15d01919b8_add_config_fields_to_subscribers_table.py

diff --git a/backend/README.md b/backend/README.md
index bc659c1b1..4f44e9db2 100644
--- a/backend/README.md
+++ b/backend/README.md
@@ -31,7 +31,7 @@ pip install ruff
 Commands
 
 ```bash
-ruff check 
+ruff check
 ```
 
 ### Authentication
@@ -60,6 +60,12 @@ To generate a database migration, bash into a running backend container and run:
 alembic revision -m "create ... table"
 ```
 
+To roll back one migration, run:
+
+```bash
+alembic downgrade -1
+```
+
 ## Commands
 
 Backend has a light selection of cli commands available to be run inside a container.
diff --git a/backend/src/appointment/database/models.py b/backend/src/appointment/database/models.py
index 08595cdaa..dc8fb6d1c 100644
--- a/backend/src/appointment/database/models.py
+++ b/backend/src/appointment/database/models.py
@@ -85,6 +85,17 @@ class InviteStatus(enum.Enum):
     revoked = 2  # The code is no longer valid and cannot be used for sign up anymore
 
 
+class ColourScheme(enum.Enum):
+    system = 'system'
+    dark = 'dark'
+    light = 'light'
+
+
+class TimeMode(enum.Enum):
+    h12 = 12
+    h24 = 24
+
+
 def encrypted_type(column_type, length: int = 255, **kwargs) -> StringEncryptedType:
     """Helper to reduce visual noise when creating model columns"""
     return StringEncryptedType(column_type, secret, AesEngine, 'pkcs5', length=length, **kwargs)
@@ -134,12 +145,15 @@ class Subscriber(HasSoftDelete, Base):
 
     name = Column(encrypted_type(String), index=True)
     level = Column(Enum(SubscriberLevel), default=SubscriberLevel.basic, index=True)
-    language = Column(encrypted_type(String), nullable=False, default=FALLBACK_LOCALE, index=True)
-    timezone = Column(encrypted_type(String), index=True)
     avatar_url = Column(encrypted_type(String, length=2048), index=False)
-
     short_link_hash = Column(encrypted_type(String), index=False)
 
+    # General settings
+    language = Column(encrypted_type(String), nullable=False, default=FALLBACK_LOCALE, index=True)
+    timezone = Column(encrypted_type(String), index=True)
+    colour_scheme = Column(Enum(ColourScheme), default=ColourScheme.system, nullable=False, index=True)
+    time_mode = Column(Enum(TimeMode), default=TimeMode.h24, nullable=False, index=True)
+
     # Only accept the times greater than the one specified in the `iat` claim of the jwt token
     minimum_valid_iat_time = Column('minimum_valid_iat_time', encrypted_type(DateTime))
 
diff --git a/backend/src/appointment/database/schemas.py b/backend/src/appointment/database/schemas.py
index c0d5e94a8..7443238f1 100644
--- a/backend/src/appointment/database/schemas.py
+++ b/backend/src/appointment/database/schemas.py
@@ -27,6 +27,8 @@
     ExternalConnectionType,
     MeetingLinkProviderType,
     InviteStatus,
+    ColourScheme,
+    TimeMode,
 )
 from .. import utils, defines
 
@@ -299,6 +301,8 @@ class SubscriberIn(BaseModel):
     avatar_url: str | None = None
     secondary_email: str | None = None
     language: str | None = FALLBACK_LOCALE
+    colour_scheme: ColourScheme = ColourScheme.system
+    time_mode: TimeMode = TimeMode.h24
 
 
 class SubscriberBase(SubscriberIn):
diff --git a/backend/src/appointment/migrations/versions/2025_01_15_1340-4a15d01919b8_add_config_fields_to_subscribers_table.py b/backend/src/appointment/migrations/versions/2025_01_15_1340-4a15d01919b8_add_config_fields_to_subscribers_table.py
new file mode 100644
index 000000000..7302a18d3
--- /dev/null
+++ b/backend/src/appointment/migrations/versions/2025_01_15_1340-4a15d01919b8_add_config_fields_to_subscribers_table.py
@@ -0,0 +1,33 @@
+"""Add config fields to subscribers table
+
+Revision ID: 4a15d01919b8
+Revises: 0c99f6a02f3b
+Create Date: 2025-01-15 13:40:12.022117
+
+"""
+import os
+from alembic import op
+import sqlalchemy as sa
+from sqlalchemy_utils import StringEncryptedType
+from sqlalchemy_utils.types.encrypted.encrypted_type import AesEngine
+from appointment.database.models import ColourScheme, TimeMode
+
+
+def secret():
+    return os.getenv('DB_SECRET')
+
+# revision identifiers, used by Alembic.
+revision = '4a15d01919b8'
+down_revision = '0c99f6a02f3b'
+branch_labels = None
+depends_on = None
+
+
+def upgrade() -> None:
+    op.add_column('subscribers', sa.Column('colour_scheme', sa.Enum(ColourScheme), default=ColourScheme.system, nullable=False, index=True))
+    op.add_column('subscribers', sa.Column('time_mode', sa.Enum(TimeMode), default=TimeMode.h24, nullable=False, index=True))
+
+
+def downgrade() -> None:
+    op.drop_column('subscribers', 'colour_scheme')
+    op.drop_column('subscribers', 'time_mode')
diff --git a/backend/src/appointment/routes/api.py b/backend/src/appointment/routes/api.py
index 99a4d96df..39eca8ec4 100644
--- a/backend/src/appointment/routes/api.py
+++ b/backend/src/appointment/routes/api.py
@@ -82,7 +82,10 @@ def update_me(
         is_setup=me.is_setup,
         avatar_url=me.avatar_url,
         schedule_links=schedule_links_by_subscriber(db, subscriber),
-        unique_hash=me.unique_hash
+        unique_hash=me.unique_hash,
+        language=me.language,
+        colour_scheme=me.colour_scheme,
+        time_mode=me.time_mode,
     )
 
 
diff --git a/backend/src/appointment/routes/auth.py b/backend/src/appointment/routes/auth.py
index 9d8ec3904..2afc007c1 100644
--- a/backend/src/appointment/routes/auth.py
+++ b/backend/src/appointment/routes/auth.py
@@ -388,6 +388,9 @@ def me(
         is_setup=subscriber.is_setup,
         schedule_links=schedule_links_by_subscriber(db, subscriber),
         unique_hash=hash,
+        language=subscriber.language,
+        colour_scheme=subscriber.colour_scheme,
+        time_mode=subscriber.time_mode,
     )
 
 
diff --git a/docs/README.md b/docs/README.md
index 3c50291b1..d2bec2a4d 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -69,16 +69,18 @@ erDiagram
     string email "FxA account email and email used for password auth"
     string name "Preferred display name"
     enum level "Subscription level [basic, plus, pro, admin]"
-    int timezone "User selected home timezone, UTC offset"
     string avatar_url "Public link to an avatar image"
     string short_link_hash "Hash for verifying user link"
+    string language "Lang code for subscribers preferred locale"
+    int timezone "User selected home timezone, UTC offset"
+    enum colour_scheme "Frontend theme [system, dark, light]"
+    enum time_mode "Format for displaying times [h12, h24]"
     string minimum_valid_iat_time "Minimum valid time to accept for JWT tokens"
     date time_created "UTC timestamp of subscriber creation"
     date time_updated "UTC timestamp of last subscriber modification"
     string secondary_email "Secondary email address"
     date time_deleted "UTC timestamp of deletion (soft delete)"
     int ftue_level "Version of the FTUE the user has completed"
-    string language "Lang code for subscribers preferred locale"
   }
   SUBSCRIBERS ||--o{ CALENDARS : own
   CALENDARS {
diff --git a/frontend/index.html b/frontend/index.html
index 6e670f758..cf4d73d3f 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -6,10 +6,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Thunderbird Appointment</title>
     <script>
-      // handle theme color scheme
+      // Load initial theme color scheme from user settings
+      const user = JSON.parse(localStorage?.getItem('tba/user') ?? '{}');
+      const browserPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
       if (
-        (localStorage?.getItem('theme') === 'dark'
-        || (!localStorage?.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches))
+        (user?.settings?.colourScheme === 'dark'
+        || (user?.settings?.colourScheme === 'system' && browserPrefersDark)
+        || (!user?.settings?.colourScheme && browserPrefersDark))
       ) {
         document.documentElement.classList.add('dark');
       } else {
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index e2a837138..010e4b62b 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -5,10 +5,10 @@ import {
 } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { storeToRefs } from 'pinia';
-import { getPreferredTheme } from '@/utils';
 import {
   apiUrlKey, callKey, refreshKey, isPasswordAuthKey, isFxaAuthKey, fxaEditProfileUrlKey, hasProfanityKey,
 } from '@/keys';
+import { defaultLocale } from '@/utils';
 import { StringResponse } from '@/models';
 import { usePosthog, posthog } from '@/composables/posthog';
 import UAParser from 'ua-parser-js';
@@ -29,12 +29,12 @@ import { useAppointmentStore } from '@/stores/appointment-store';
 import { useScheduleStore } from '@/stores/schedule-store';
 
 // component constants
-const currentUser = useUserStore(); // data: { username, email, name, level, timezone, id }
+const user = useUserStore();
 const apiUrl = inject(apiUrlKey);
 const route = useRoute();
 const routeName = typeof route.name === 'string' ? route.name : '';
 const router = useRouter();
-const lang = localStorage?.getItem('locale') ?? navigator.language.split('-')[0];
+const lang = defaultLocale();
 
 const siteNotificationStore = useSiteNotificationStore();
 const {
@@ -59,13 +59,12 @@ const hasProfanity = (input: string) => profanity.exists(input);
 provide(hasProfanityKey, hasProfanity);
 
 // handle auth and fetch
-const isAuthenticated = computed(() => currentUser?.exists());
 const call = createFetch({
   baseUrl: apiUrl,
   options: {
     beforeFetch({ options }) {
-      if (isAuthenticated.value) {
-        const token = currentUser.data.accessToken;
+      if (user?.authenticated) {
+        const token = user.data.accessToken;
         // @ts-ignore
         options.headers.Authorization = `Bearer ${token}`;
       }
@@ -95,7 +94,7 @@ const call = createFetch({
         );
       } else if (response && response.status === 401 && data?.detail?.id === 'INVALID_TOKEN') {
         // Clear current user data, and ship them to the login screen!
-        currentUser.$reset();
+        user.$reset();
         await router.push('/login');
         return context;
       }
@@ -110,6 +109,9 @@ const call = createFetch({
   },
 });
 
+// Initialize API calls for user store
+user.init(call);
+
 provide(callKey, call);
 provide(isPasswordAuthKey, import.meta.env?.VITE_AUTH_SCHEME === 'password');
 provide(isFxaAuthKey, import.meta.env?.VITE_AUTH_SCHEME === 'fxa');
@@ -126,7 +128,6 @@ const navItems = [
 const calendarStore = useCalendarStore();
 const appointmentStore = useAppointmentStore();
 const scheduleStore = useScheduleStore();
-const userStore = useUserStore();
 
 // true if route can be accessed without authentication
 const routeIsPublic = computed(
@@ -141,9 +142,9 @@ const routeHasModal = computed(
 
 // retrieve calendars and appointments after checking login and persisting user to db
 const getDbData = async () => {
-  if (currentUser?.exists()) {
+  if (user?.authenticated) {
     await Promise.all([
-      userStore.profile(call),
+      user.profile(),
       calendarStore.fetch(call),
       appointmentStore.fetch(call),
       scheduleStore.fetch(call),
@@ -175,7 +176,6 @@ const onPageLoad = async () => {
     effective_resolution: effectiveDeviceRes,
     user_agent: navigator.userAgent,
     locale: lang,
-    theme: getPreferredTheme(),
   }).json();
 
   const { data } = response;
@@ -289,9 +289,8 @@ onMounted(async () => {
     });
 
     const id = await onPageLoad();
-    if (isAuthenticated.value) {
-      const profile = useUserStore();
-      posthog.identify(profile.data.uniqueHash);
+    if (user?.authenticated) {
+      posthog.identify(user.data.uniqueHash);
     } else if (id) {
       posthog.identify(id);
     }
@@ -302,20 +301,20 @@ onMounted(async () => {
 
 <template>
   <!-- authenticated subscriber content -->
-  <template v-if="router.hasRoute(route.name) && (isAuthenticated || routeIsPublic)">
+  <template v-if="router.hasRoute(route.name) && (user?.authenticated || routeIsPublic)">
     <site-notification
-      v-if="isAuthenticated && visibleNotification"
+      v-if="user?.authenticated && visibleNotification"
       :title="notificationTitle"
       :action-url="notificationActionUrl"
     >
       {{ notificationMessage }}
     </site-notification>
-    <nav-bar v-if="isAuthenticated" :nav-items="navItems"/>
+    <nav-bar v-if="user?.authenticated" :nav-items="navItems"/>
     <title-bar v-if="routeIsPublic"/>
     <main
       :class="{
         'mx-4 min-h-full py-32 lg:mx-8': !routeIsHome && !routeIsPublic,
-        '!pt-24': routeIsHome || isAuthenticated,
+        '!pt-24': routeIsHome || user?.authenticated,
         'min-h-full': routeIsPublic && !routeHasModal,
       }"
     >
diff --git a/frontend/src/components/BookingModal.vue b/frontend/src/components/BookingModal.vue
index b59334283..651547f84 100644
--- a/frontend/src/components/BookingModal.vue
+++ b/frontend/src/components/BookingModal.vue
@@ -67,11 +67,11 @@ const bookIt = () => {
 };
 
 onMounted(() => {
-  if (user.exists()) {
+  if (user.authenticated) {
     attendee.name = user.data.name;
     attendee.email = user.data.preferredEmail;
-    if (user.data.timezone !== null) {
-      attendee.timezone = user.data.timezone;
+    if (user.data.settings.timezone !== null) {
+      attendee.timezone = user.data.settings.timezone;
     }
   }
 });
diff --git a/frontend/src/components/CalendarQalendar.vue b/frontend/src/components/CalendarQalendar.vue
index 72340498a..b4c11cc84 100644
--- a/frontend/src/components/CalendarQalendar.vue
+++ b/frontend/src/components/CalendarQalendar.vue
@@ -6,18 +6,20 @@ import { Qalendar } from 'qalendar';
 import 'qalendar/dist/style.css';
 import CalendarEvent from '@/elements/calendar/CalendarEvent.vue';
 import {
-  ColorSchemes,
+  ColourSchemes,
   DateFormatStrings,
   DEFAULT_SLOT_DURATION,
 } from '@/definitions';
-import { getLocale, getPreferredTheme, timeFormat } from '@/utils';
+import { timeFormat } from '@/utils';
 import { useRoute, useRouter } from 'vue-router';
 import { dayjsKey } from '@/keys';
+import { useUserStore } from '@/stores/user-store';
 
 // component constants
 const dj = inject(dayjsKey);
 const router = useRouter();
 const route = useRoute();
+const user = useUserStore();
 
 // component properties
 const props = defineProps({
@@ -63,7 +65,6 @@ const displayFormat = timeFormat();
 const calendarColors = ref({});
 const selectedDate = ref(null);
 const calendarMode = ref(isValidMode(route.hash) ? route.hash.slice(1) : 'month');
-const preferredTheme = getPreferredTheme();
 
 // component emits
 const emit = defineEmits(['daySelected', 'eventSelected', 'dateChange']);
@@ -171,9 +172,9 @@ const dateSelected = (date) => {
  * If that calendar hasn't been used before it's added to our colourScheme map for Qalendar
  * @param calendarTitle {string}
  * @param calendarColor {string}
- * @returns {string} id for the colorScheme property
+ * @returns {string} id for the colourScheme property
  */
-const processCalendarColorScheme = (calendarTitle, calendarColor) => {
+const processCalendarColourScheme = (calendarTitle, calendarColor) => {
   // TODO: Replace the replace pattern with some regex
   const slug = calendarTitle.replace(/[^a-zA-Z0-9]/g, '_').toLowerCase();
   if (!calendarColors.value[slug]) {
@@ -205,7 +206,7 @@ const calendarEvents = computed(() => {
     return {
       id: event.title,
       title: event.title,
-      colorScheme: processCalendarColorScheme(event.calendar_title, event.calendar_color),
+      colourScheme: processCalendarColourScheme(event.calendar_title, event.calendar_color),
       time: {
         start: event.all_day
           ? start.format(DateFormatStrings.QalendarFullDay)
@@ -244,7 +245,7 @@ const calendarEvents = computed(() => {
       title: !isBookingRoute.value
         ? appointment.title
         : `${start.format(displayFormat)} - ${end.format(displayFormat)}`,
-      colorScheme: processCalendarColorScheme(
+      colourScheme: processCalendarColourScheme(
         appointment?.calendar_title ?? 'booking',
         appointment?.calendar_color ?? 'rgb(20, 184, 166)',
       ),
@@ -301,7 +302,7 @@ const dayBoundary = computed(() => {
 });
 
 // For now we only support English and German
-const locale = getLocale();
+const locale = user.data.settings.language;
 
 /**
  * Calendar Config Object
@@ -325,7 +326,7 @@ const config = ref({
       '"Segoe UI Symbol"',
       '"Noto Color Emoji"',
     ].join(', '),
-    colorSchemes: calendarColors,
+    colourSchemes: calendarColors,
   },
   defaultMode: calendarMode.value, // mode happens to match up with our mode!
   dayIntervals: {
@@ -380,8 +381,8 @@ watch(route, () => {
 </script>
 <template>
   <div
-    :style="{'color-scheme': preferredTheme === ColorSchemes.Dark ? 'dark' : null}"
-    :class="{'is-light-mode': preferredTheme === ColorSchemes.Light}"
+    :style="{'color-scheme': user.myColourScheme === ColourSchemes.Dark ? 'dark' : null}"
+    :class="{'is-light-mode': user.myColourScheme === ColourSchemes.Light}"
   >
     <qalendar
       :events="calendarEvents"
diff --git a/frontend/src/components/FTUE/Finish.vue b/frontend/src/components/FTUE/Finish.vue
index f51a899a5..6192e89ab 100644
--- a/frontend/src/components/FTUE/Finish.vue
+++ b/frontend/src/components/FTUE/Finish.vue
@@ -14,6 +14,7 @@ const call = inject(callKey);
 
 const scheduleStore = useScheduleStore();
 const userStore = useUserStore();
+userStore.init(call);
 const ftueStore = useFTUEStore();
 const { nextStep } = ftueStore;
 
@@ -25,7 +26,7 @@ const myLinkShow = ref(false);
 onMounted(async () => {
   await Promise.all([
     scheduleStore.fetch(call),
-    userStore.profile(call),
+    userStore.profile(),
   ]);
   myLink.value = userStore.myLink;
 });
@@ -34,8 +35,8 @@ const onSubmit = async () => {
   isLoading.value = true;
 
   // Can't run async together!
-  await userStore.finishFTUE(call);
-  await userStore.profile(call);
+  await userStore.finishFTUE();
+  await userStore.profile();
 
   // Clear the FTUE flow
   window.localStorage?.removeItem('tba/ftue');
diff --git a/frontend/src/components/FTUE/SetupProfile.vue b/frontend/src/components/FTUE/SetupProfile.vue
index a25fe9a21..92bbad9c0 100644
--- a/frontend/src/components/FTUE/SetupProfile.vue
+++ b/frontend/src/components/FTUE/SetupProfile.vue
@@ -18,6 +18,7 @@ const ftueStore = useFTUEStore();
 const { hasNextStep } = storeToRefs(ftueStore);
 const { nextStep } = ftueStore;
 const user = useUserStore();
+user.init(call);
 
 // @ts-ignore
 // See https://github.com/microsoft/TypeScript/issues/49231
@@ -29,7 +30,7 @@ const timezoneOptions = Intl.supportedValuesOf('timeZone').map((timezone: string
 const formRef = ref<HTMLFormElement>();
 const fullName = ref(user.data?.name ?? '');
 const username = ref(user.data?.username ?? '');
-const timezone = ref(user.data.timezone ?? dj.tz.guess());
+const timezone = ref(user.data.settings.timezone ?? dj.tz.guess());
 const isLoading = ref(false);
 
 // Form validation
@@ -57,7 +58,7 @@ const onSubmit = async () => {
     return;
   }
 
-  const response = await user.updateUser(call, {
+  const response = await user.updateUser({
     name: fullName.value,
     username: username.value,
     timezone: timezone.value,
diff --git a/frontend/src/components/FTUE/SetupSchedule.vue b/frontend/src/components/FTUE/SetupSchedule.vue
index ce2f2b12e..a4174bf3d 100644
--- a/frontend/src/components/FTUE/SetupSchedule.vue
+++ b/frontend/src/components/FTUE/SetupSchedule.vue
@@ -98,7 +98,7 @@ const onSubmit = async () => {
     farthest_booking: 20160,
     start_date: dj().format(DateFormatStrings.QalendarFullDay),
     details: schedule.value?.details ?? '',
-    timezone: user.data.timezone,
+    timezone: user.data.settings.timezone,
   };
 
   const data = schedules.value.length > 0
diff --git a/frontend/src/components/NavBar.vue b/frontend/src/components/NavBar.vue
index 649edff7b..9cf78a02c 100644
--- a/frontend/src/components/NavBar.vue
+++ b/frontend/src/components/NavBar.vue
@@ -59,7 +59,7 @@ const isNavEntryActive = (item: string) => {
         :placeholder="t('label.search')"
       />
     </label> -->
-    <nav v-if="user.exists()" class="flex items-stretch gap-4">
+    <nav v-if="user.authenticated" class="flex items-stretch gap-4">
       <div class="flex justify-end gap-8">
         <nav-bar-item
           v-for="item in navItems"
diff --git a/frontend/src/components/ScheduleCreation.vue b/frontend/src/components/ScheduleCreation.vue
index e5cb43d08..25a5e9348 100644
--- a/frontend/src/components/ScheduleCreation.vue
+++ b/frontend/src/components/ScheduleCreation.vue
@@ -274,15 +274,15 @@ const savingInProgress = ref(false);
 const saveSchedule = async (withConfirmation = true) => {
   savingInProgress.value = true;
   // build data object for post request
-  const obj = { ...scheduleInput.value, timezone: user.data.timezone };
+  const obj = { ...scheduleInput.value, timezone: user.data.settings.timezone };
   // convert local input times to utc times
 
   obj.start_time = dj(`${dj().format('YYYY-MM-DD')}T${obj.start_time}:00`)
-    .tz(user.data.timezone ?? dj.tz.guess(), true)
+    .tz(user.data.settings.timezone ?? dj.tz.guess(), true)
     .utc()
     .format('HH:mm');
   obj.end_time = dj(`${dj().format('YYYY-MM-DD')}T${obj.end_time}:00`)
-    .tz(user.data.timezone ?? dj.tz.guess(), true)
+    .tz(user.data.settings.timezone ?? dj.tz.guess(), true)
     .utc()
     .format('HH:mm');
   // Update the start_date with the current date
@@ -327,7 +327,7 @@ const saveSchedule = async (withConfirmation = true) => {
 
   // We retrieve the slugs from the user store
   // ...we should adjust this, but for now just refresh the profile.
-  await user.profile(call);
+  await user.profile();
 
   savingInProgress.value = false;
   emit('created');
@@ -517,7 +517,7 @@ watch(
               {{ t("label.timeZone") }}
             </div>
             <div class="flex justify-between">
-              <div class="text-gray-600 dark:text-gray-200">{{ user.data.timezone ?? dj.tz.guess() }}</div>
+              <div class="text-gray-600 dark:text-gray-200">{{ user.data.settings.timezone ?? dj.tz.guess() }}</div>
               <link-button class="edit-link-btn" @click="router.push({ name: 'settings' })" :tooltip="t('label.editInSettings')" data-testid="dashboard-availability-edit-link-btn">
                 {{ t('label.edit') }}
               </link-button>
diff --git a/frontend/src/components/SettingsAccount.vue b/frontend/src/components/SettingsAccount.vue
index 240b8b501..57d0ada6d 100644
--- a/frontend/src/components/SettingsAccount.vue
+++ b/frontend/src/components/SettingsAccount.vue
@@ -32,9 +32,10 @@ const { t } = useI18n({ useScope: 'global' });
 const call = inject(callKey);
 const hasProfanity = inject(hasProfanityKey);
 const router = useRouter();
-const user = useUserStore();
 const schedule = useScheduleStore();
 const externalConnectionsStore = useExternalConnectionsStore();
+const user = useUserStore();
+user.init(call);
 
 const activeUsername = ref(user.data.username);
 const activeDisplayName = ref(user.data.name);
@@ -65,7 +66,7 @@ const getAvailableEmails = async () => {
 };
 
 const refreshData = async () => Promise.all([
-  user.profile(call),
+  user.profile(),
   schedule.fetch(call, true),
   externalConnectionsStore.fetch(call),
   getAvailableEmails(),
@@ -87,7 +88,7 @@ const updateUser = async () => {
   if (!error.value) {
     // update user in store
     user.updateProfile(data.value);
-    await user.updateSignedUrl(call);
+    await user.updateSignedUrl();
     errorUsername.value = null;
     errorDisplayName.value = null;
     // TODO show some confirmation
@@ -166,7 +167,7 @@ const refreshLink = async () => {
 };
 
 const refreshLinkConfirm = async () => {
-  await user.changeSignedUrl(call);
+  await user.changeSignedUrl();
   await refreshData();
   closeModals();
 
diff --git a/frontend/src/components/SettingsConnections.vue b/frontend/src/components/SettingsConnections.vue
index 3e304a26d..e7d6ad8ba 100644
--- a/frontend/src/components/SettingsConnections.vue
+++ b/frontend/src/components/SettingsConnections.vue
@@ -54,7 +54,7 @@ const refreshData = async () => {
     externalConnectionsStore.fetch(call, true),
     calendarStore.fetch(call),
     // Need to update userStore in case they used an attached email
-    userStore.profile(call),
+    userStore.profile(),
   ]);
 };
 
diff --git a/frontend/src/components/SettingsGeneral.vue b/frontend/src/components/SettingsGeneral.vue
index 5c07b6a91..e15d7e20d 100644
--- a/frontend/src/components/SettingsGeneral.vue
+++ b/frontend/src/components/SettingsGeneral.vue
@@ -1,44 +1,32 @@
 <script setup lang="ts">
-import { ColorSchemes } from '@/definitions';
-import {
-  ref, reactive, inject, watch,
-} from 'vue';
+import { ColourSchemes } from '@/definitions';
+import { ref, inject, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useUserStore } from '@/stores/user-store';
-import { dayjsKey, callKey } from '@/keys';
-import { SubscriberResponse } from '@/models';
+import { callKey } from '@/keys';
 
 // component constants
-const user = useUserStore();
 const { t, locale, availableLocales } = useI18n({ useScope: 'global' });
 const call = inject(callKey);
-const dj = inject(dayjsKey);
+const user = useUserStore();
+user.init(call);
 
 // handle ui languages
-// TODO: move to settings store
-watch(locale, (newValue) => {
-  localStorage?.setItem('locale', newValue);
-  window.location.reload();
+watch(locale, (newValue: string) => {
+  user.data.settings.language = newValue;
+  window.location.reload(); // This is needed to reload locale for dayjs instance
 });
 
 // handle theme mode
-// TODO: move to settings store
-const initialTheme = localStorage?.getItem('theme')
-  ? localStorage.getItem('theme')
-  : ColorSchemes.System;
-const theme = ref(initialTheme);
-watch(theme, (newValue) => {
+watch(() => user.data.settings.colourScheme, (newValue) => {
   switch (newValue) {
-    case ColorSchemes.Dark:
-      localStorage?.setItem('theme', 'dark');
+    case ColourSchemes.Dark:
       document.documentElement.classList.add('dark');
       break;
-    case ColorSchemes.Light:
-      localStorage?.setItem('theme', 'light');
+    case ColourSchemes.Light:
       document.documentElement.classList.remove('dark');
       break;
-    case ColorSchemes.System:
-      localStorage?.removeItem('theme');
+    case ColourSchemes.System:
       if (!window.matchMedia('(prefers-color-scheme: dark)').matches) {
         document.documentElement.classList.remove('dark');
       } else {
@@ -50,37 +38,25 @@ watch(theme, (newValue) => {
   }
 });
 
-// handle time format
-// TODO: move to settings store
-const detectedTimeFormat = Number(dj('2022-05-24 20:00:00').format('LT').split(':')[0]) > 12 ? '24' : '12';
-const initialTimeFormat = localStorage?.getItem('timeFormat') ?? detectedTimeFormat;
-const timeFormat = ref(initialTimeFormat);
-watch(timeFormat, (newValue) => {
-  localStorage?.setItem('timeFormat', newValue);
-});
+// Make sure settings are saved directly when changed
+watch(
+  () => [
+    user.data.settings.language,
+    user.data.settings.timezone,
+    user.data.settings.colourScheme,
+    user.data.settings.timeFormat,
+  ],
+  () => {
+    if (user.authenticated) {
+      user.updateSettings();
+    }
+  },
+);
 
-// timezones
-const activeTimezone = reactive({
-  primary: user.data.timezone ?? dj.tz.guess(),
-  secondary: dj.tz.guess(),
-});
 // @ts-ignore
 // See https://github.com/microsoft/TypeScript/issues/49231
 const timezones = Intl.supportedValuesOf('timeZone');
 
-// save timezone config
-const updateTimezone = async () => {
-  const obj = {
-    username: user.data.username,
-    timezone: activeTimezone.primary,
-  };
-  const { error }: SubscriberResponse = await call('me').put(obj).json();
-  if (!error.value) {
-    // update user in store
-    user.data.timezone = activeTimezone.primary;
-    // TODO show some confirmation
-  }
-};
 </script>
 
 <template>
@@ -103,8 +79,8 @@ const updateTimezone = async () => {
       <div class="text-lg">{{ t('label.appearance') }}</div>
       <label class="mt-4 flex items-center pl-4">
         <div class="w-full max-w-2xs">{{ t('label.theme') }}</div>
-        <select v-model="theme" class="w-full max-w-sm rounded-md" data-testid="settings-general-theme-select">
-          <option v-for="value in Object.values(ColorSchemes)" :key="value" :value="value">
+        <select v-model="user.data.settings.colourScheme" class="w-full max-w-sm rounded-md" data-testid="settings-general-theme-select">
+          <option v-for="value in Object.values(ColourSchemes)" :key="value" :value="value">
             {{ t('label.' + value) }}
           </option>
         </select>
@@ -124,7 +100,7 @@ const updateTimezone = async () => {
       <div class="text-lg">{{ t('label.timeFormat') }}</div>
       <div class="text-lg"><!--{{ t('label.dateFormat') }}--></div>
       <label class="flex cursor-pointer items-center gap-4 pl-4">
-        <input type="radio" name="timeFormat" :value="12" v-model="timeFormat" class="text-teal-500" />
+        <input type="radio" name="timeFormat" :value="12" v-model="user.data.settings.timeFormat" class="text-teal-500" />
         <div class="w-full max-w-2xs">{{ t('label.12hAmPm') }}</div>
       </label>
       <label class="flex cursor-pointer items-center gap-4 pl-4">
@@ -132,7 +108,7 @@ const updateTimezone = async () => {
         <div class="w-full max-w-2xs">{{ t('label.DDMMYYYY') }}</div> -->
       </label>
       <label class="flex cursor-pointer items-center gap-4 pl-4">
-        <input type="radio" name="timeFormat" :value="24" v-model="timeFormat" class="text-teal-500" />
+        <input type="radio" name="timeFormat" :value="24" v-model="user.data.settings.timeFormat" class="text-teal-500" />
         <div class="w-full max-w-2xs">{{ t('label.24h') }}</div>
       </label>
       <label class="flex cursor-pointer items-center gap-4 pl-4">
@@ -145,9 +121,8 @@ const updateTimezone = async () => {
       <label class="mt-4 flex items-center pl-4">
         <div class="w-full max-w-2xs">{{ t('label.primaryTimeZone') }}</div>
         <select
-          v-model="activeTimezone.primary"
+          v-model="user.data.settings.timezone"
           class="w-full max-w-sm rounded-md"
-          @change="updateTimezone"
           data-testid="settings-general-timezone-select"
         >
           <option v-for="tz in timezones" :key="tz" :value="tz">
diff --git a/frontend/src/components/bookingView/BookingViewError.vue b/frontend/src/components/bookingView/BookingViewError.vue
index d373237a5..f5b640212 100644
--- a/frontend/src/components/bookingView/BookingViewError.vue
+++ b/frontend/src/components/bookingView/BookingViewError.vue
@@ -26,7 +26,7 @@ defineProps<Props>();
     {{ body ?? t('error.generalBookingError') }}
   </div>
   <primary-button
-    v-if="!user.exists()"
+    v-if="!user.authenticated"
     class="btn-start mt-12 p-7"
     :label="t('label.startUsingTba')"
     @click="router.push({ name: 'home' })"
diff --git a/frontend/src/components/bookingView/BookingViewSuccess.vue b/frontend/src/components/bookingView/BookingViewSuccess.vue
index 7222fddfe..b3e3f1c00 100644
--- a/frontend/src/components/bookingView/BookingViewSuccess.vue
+++ b/frontend/src/components/bookingView/BookingViewSuccess.vue
@@ -49,7 +49,7 @@ defineProps<Props>();
       </div>
     </div>
     <primary-button
-      v-if="!user.exists()"
+      v-if="!user.authenticated"
       class="btn-start mt-12 p-7"
       :label="t('label.startUsingTba')"
       @click="router.push({ name: 'home' })"
diff --git a/frontend/src/composables/i18n.ts b/frontend/src/composables/i18n.ts
index ada80af27..3055324ce 100644
--- a/frontend/src/composables/i18n.ts
+++ b/frontend/src/composables/i18n.ts
@@ -1,5 +1,6 @@
 // init localization
 import { createI18n } from 'vue-i18n';
+import { defaultLocale } from '@/utils';
 
 // language source files
 import de from '@/locales/de.json';
@@ -9,11 +10,11 @@ const messages = {
   de, // German
   en, // English
 };
-const loc = localStorage?.getItem('locale') ?? navigator.language.split('-')[0];
+
 const instance = createI18n({
   legacy: false,
   globalInjection: true,
-  locale: loc,
+  locale: defaultLocale(),
   fallbackLocale: 'en',
   messages,
 });
diff --git a/frontend/src/definitions.ts b/frontend/src/definitions.ts
index 3db0c322a..2279a9cc3 100644
--- a/frontend/src/definitions.ts
+++ b/frontend/src/definitions.ts
@@ -136,7 +136,7 @@ export enum SettingsSections {
 /**
  * Available color schemes for theme
  */
-export enum ColorSchemes {
+export enum ColourSchemes {
   System = 'system',
   Dark = 'dark',
   Light = 'light',
@@ -307,7 +307,7 @@ export default {
   CalendarManagementType,
   CalendarProviders,
   ColorPalette,
-  ColorSchemes,
+  ColourSchemes,
   DateFormatStrings,
   DEFAULT_SLOT_DURATION,
   Dismissibles,
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index 8627ff942..713c4386b 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -321,7 +321,7 @@
     "sync": "Synchronisieren",
     "syncCalendars": "Kalender synchronisieren",
     "system": "System",
-    "theme": "Thema",
+    "theme": "Farbschema",
     "time": "Zeit",
     "timeFormat": "Zeitformat",
     "timeZone": "Zeitzone",
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 8bfd8f8dc..9f2ae6beb 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -1,8 +1,8 @@
 // init app
 import App from '@/App.vue';
 import { createApp } from 'vue';
-import { getPreferredTheme } from '@/utils';
 import { apiUrlKey, bookingUrlKey } from '@/keys';
+import { defaultLocale } from '@/utils';
 
 // pinia state management
 import { createPinia } from 'pinia';
@@ -72,9 +72,8 @@ const apiUrl = `${protocol}://${import.meta.env.VITE_API_URL}${port}`;
 app.provide(apiUrlKey, apiUrl);
 app.provide(bookingUrlKey, `${protocol}://${import.meta.env.VITE_BASE_URL}/appointments/all/`);
 
-const loc = localStorage?.getItem('locale') ?? navigator.language.split('-')[0];
 app.use(i18ninstance);
-useDayJS(app, loc);
+useDayJS(app, defaultLocale());
 
 // ready? let's go!
 app.mount('#app');
diff --git a/frontend/src/models.ts b/frontend/src/models.ts
index 7b709fda4..863ae173f 100644
--- a/frontend/src/models.ts
+++ b/frontend/src/models.ts
@@ -98,7 +98,7 @@ export type CustomEventData = {
 export type CalendarEvent = {
   id: number|string;
   title: string;
-  colorScheme: string;
+  colourScheme: string;
   time?: TimeFormatted;
   description: string;
   with: string;
@@ -220,7 +220,7 @@ export type User = {
   preferredEmail: string;
   level: number;
   name: string;
-  timezone: string;
+  settings: UserConfig;
   username: string;
   signedUrl: string;
   avatarUrl: string;
@@ -230,6 +230,17 @@ export type User = {
   uniqueHash: string;
 };
 
+/**
+ * User settings to customize the application
+ * Used to store language, theme, time format and such.
+ */
+export type UserConfig = {
+  language: string,
+  colourScheme: string,
+  timeFormat: number,
+  timezone: string;
+};
+
 /**
  * User activity as in the things they do within our application
  * Used to store the state of dismissables and such.
@@ -241,15 +252,18 @@ export type UserActivity = {
 export type Subscriber = {
   id?: number;
   username: string;
-  name: string;
-  email: string;
-  preferred_email: string;
-  level: number;
-  timezone: string;
-  avatar_url: string;
-  is_setup: boolean;
-  unique_hash: string;
-  schedule_links: string[];
+  name?: string;
+  email?: string;
+  preferred_email?: string;
+  level?: number;
+  language?: string;
+  timezone?: string;
+  colour_scheme?: string;
+  time_mode?: number;
+  avatar_url?: string;
+  is_setup?: boolean;
+  unique_hash?: string;
+  schedule_links?: string[];
   secondary_email?: string;
   invite?: Invite;
   time_created?: string;
diff --git a/frontend/src/stores/schedule-store.ts b/frontend/src/stores/schedule-store.ts
index f8a267b3b..f0d2b4966 100644
--- a/frontend/src/stores/schedule-store.ts
+++ b/frontend/src/stores/schedule-store.ts
@@ -46,7 +46,7 @@ export const useScheduleStore = defineStore('schedules', () => {
       connected: true,
     },
     time_updated: '1970-01-01T00:00:00',
-  };
+  } as Schedule;
 
   // State
   const isLoaded = ref(false);
@@ -187,7 +187,7 @@ export const useScheduleStore = defineStore('schedules', () => {
 
     const user = useUserStore();
     return dj(`${dj().format(dateFormat)}T${time}:00`)
-      .tz(user.data.timezone ?? dj.tz.guess(), true)
+      .tz(user.data.settings.timezone ?? dj.tz.guess(), true)
       .utc()
       .format('HH:mm');
   };
@@ -203,7 +203,7 @@ export const useScheduleStore = defineStore('schedules', () => {
 
     return dj(`${dj(baseTime).format(dateFormat)}T${time}:00`)
       .utc(true)
-      .tz(user.data.timezone ?? dj.tz.guess())
+      .tz(user.data.settings.timezone ?? dj.tz.guess())
       .format('HH:mm');
   };
 
diff --git a/frontend/src/stores/user-store.ts b/frontend/src/stores/user-store.ts
index 05c3f3528..3b925bd1c 100644
--- a/frontend/src/stores/user-store.ts
+++ b/frontend/src/stores/user-store.ts
@@ -1,18 +1,28 @@
 import { defineStore } from 'pinia';
 import { useLocalStorage } from '@vueuse/core';
 import { i18n } from '@/composables/i18n';
-import { computed, inject } from 'vue';
+import { computed, inject, ref } from 'vue';
 import {
   Subscriber, User, Fetch, Error, BooleanResponse, SignatureResponse, SubscriberResponse, TokenResponse,
+  UserConfig,
 } from '@/models';
 import { usePosthog, posthog } from '@/composables/posthog';
+import { dayjsKey } from '@/keys';
+import { ColourSchemes } from '@/definitions';
+
+const initialUserConfigObject = {
+  language: null,
+  colourScheme: null,
+  timeFormat: null,
+  timezone: null,
+} as UserConfig;
 
 const initialUserObject = {
   email: null,
   preferredEmail: null,
   level: null,
   name: null,
-  timezone: null,
+  settings: initialUserConfigObject,
   username: null,
   signedUrl: null,
   avatarUrl: null,
@@ -25,6 +35,50 @@ const initialUserObject = {
 export const useUserStore = defineStore('user', () => {
   const data = useLocalStorage('tba/user', structuredClone(initialUserObject));
 
+  const call = ref(null);
+
+  /**
+   * Initialize store with data required at runtime
+   *
+   * @param fetch preconfigured function to perform API calls
+   */
+  const init = (fetch: Fetch) => {
+    call.value = fetch;
+  }
+
+  // Init user config if not already available
+  if (!data.value?.settings) {
+    const dj = inject(dayjsKey);
+    const detectedTimeFormat = Number(dj('2022-05-24 20:00:00').format('LT').split(':')[0]) > 12 ? 24 : 12;
+
+    data.value.settings = {
+      language: i18n.locale.value,
+      colourScheme: ColourSchemes.System,
+      timeFormat: detectedTimeFormat,
+      timezone: dj.tz.guess(),
+    };
+  }
+
+  /**
+   * Update user settings only
+   */
+  const updateSettings = async () => {
+    const obj = {
+      username: data.value.username,
+      language: data.value.settings.language,
+      timezone: data.value.settings.timezone,
+      colour_scheme: data.value.settings.colourScheme,
+      time_mode: data.value.settings.timeFormat,
+    };
+
+    const { error }: SubscriberResponse = await call.value('me').put(obj).json();
+    if (!error.value) {
+      // TODO show some confirmation
+    } else {
+      // TODO show error message
+    }
+  };
+
   /**
    * Return the first schedule link or their signed url
    */
@@ -34,7 +88,7 @@ export const useUserStore = defineStore('user', () => {
       return scheduleLinks[0];
     }
 
-    console.warn('Signed urls are deprecated here!');
+    // TODO: Signed urls are deprecated here!
     return data.value.signedUrl;
   });
 
@@ -46,12 +100,28 @@ export const useUserStore = defineStore('user', () => {
     return link?.slice(link.lastIndexOf('/') + 1);
   });
 
-  const authenticated = computed((): boolean => data.value.accessToken !== null);
   /**
-   * @deprecated - Use authenticated
-   * @see this.authenticated
+   * Return the user color scheme
+   */
+  const myColourScheme = computed((): ColourSchemes => {
+    switch (data.value.settings.colourScheme) {
+      case 'dark':
+        return ColourSchemes.Dark;
+      case 'light':
+        return ColourSchemes.Light;
+      case 'system':
+      default:
+        return window.matchMedia('(prefers-color-scheme: dark)').matches
+          ? ColourSchemes.Dark
+          : ColourSchemes.Light;
+    }
+  });
+
+  /**
+   * True if user has a valid access token
    */
-  const exists = () => data.value.accessToken !== null;
+  const authenticated = computed((): boolean => data.value.accessToken !== null);
+
   const $reset = () => {
     if (usePosthog) {
       posthog.reset();
@@ -69,7 +139,12 @@ export const useUserStore = defineStore('user', () => {
       email: subscriber.email,
       preferredEmail: subscriber?.preferred_email ?? subscriber.email,
       level: subscriber.level,
-      timezone: subscriber.timezone,
+      settings: {
+        language: subscriber.language,
+        colourScheme: subscriber.colour_scheme,
+        timeFormat: subscriber.time_mode,
+        timezone: subscriber.timezone,
+      },
       avatarUrl: subscriber.avatar_url,
       isSetup: subscriber.is_setup,
       scheduleLinks: subscriber.schedule_links,
@@ -79,10 +154,9 @@ export const useUserStore = defineStore('user', () => {
 
   /**
    * Retrieve the current signed url and update store
-   * @param call preconfigured API fetch function
    */
-  const updateSignedUrl = async (call: Fetch): Promise<Error> => {
-    const { error, data: sigData }: SignatureResponse = await call('me/signature').get().json();
+  const updateSignedUrl = async (): Promise<Error> => {
+    const { error, data: sigData }: SignatureResponse = await call.value('me/signature').get().json();
 
     if (error.value || !sigData.value?.url) {
       return { error: sigData.value ?? error.value };
@@ -93,12 +167,17 @@ export const useUserStore = defineStore('user', () => {
     return { error: false };
   };
 
-  const updateUser = async (fetch, inputData) => {
-    const { data: userData, error } = await fetch('me').put(inputData).json();
+  /**
+   * Retrieve the current signed url and update store
+   * @param inputData Subscriber data to throw into the db
+   */
+  const updateUser = async (inputData: Subscriber) => {
+    const { error, data: userData }: SubscriberResponse = await call.value('me').put(inputData).json();
+
     if (!error.value) {
       // update user in store
       updateProfile(userData.value);
-      await updateSignedUrl(fetch);
+      await updateSignedUrl();
 
       return { error: false };
     }
@@ -106,14 +185,16 @@ export const useUserStore = defineStore('user', () => {
     return { error: data.value ?? error.value };
   };
 
-  const finishFTUE = async (fetch) => fetch('subscriber/setup').post().json();
+  /**
+   * Retrieve the current signed url and update store
+   */
+  const finishFTUE = async () => call.value('subscriber/setup').post().json();
 
   /**
    * Update store with profile data from db
-   * @param call preconfigured API fetch function
    */
-  const profile = async (call: Fetch): Promise<Error> => {
-    const { error, data: userData }: SubscriberResponse = await call('me').get().json();
+  const profile = async (): Promise<Error> => {
+    const { error, data: userData }: SubscriberResponse = await call.value('me').get().json();
 
     // Type error means they refreshed midway through the request. Don't log them out for this!
     if (error.value instanceof TypeError) {
@@ -128,30 +209,28 @@ export const useUserStore = defineStore('user', () => {
 
     updateProfile(userData.value);
 
-    return updateSignedUrl(call);
+    return updateSignedUrl();
   };
 
   /**
    * Invalidate the current signed url and replace it with a new one
-   * @param call preconfigured API fetch function
    */
-  const changeSignedUrl = async (call: Fetch): Promise<Error> => {
-    const { error, data: sigData }: BooleanResponse = await call('me/signature').post().json();
+  const changeSignedUrl = async (): Promise<Error> => {
+    const { error, data: sigData }: BooleanResponse = await call.value('me/signature').post().json();
 
     if (error.value) {
       return { error: sigData.value ?? error.value };
     }
 
-    return updateSignedUrl(call);
+    return updateSignedUrl();
   };
 
   /**
    * Request subscriber login
-   * @param call preconfigured API fetch function
    * @param username
    * @param password or null if fxa authentication
    */
-  const login = async (call: Fetch, username: string, password: string|null): Promise<Error> => {
+  const login = async (username: string, password: string|null): Promise<Error> => {
     $reset();
 
     if (import.meta.env.VITE_AUTH_SCHEME === 'password') {
@@ -159,7 +238,7 @@ export const useUserStore = defineStore('user', () => {
       const formData = new FormData(document.createElement('form'));
       formData.set('username', username);
       formData.set('password', password);
-      const { error, data: tokenData }: TokenResponse = await call('token').post(formData).json();
+      const { error, data: tokenData }: TokenResponse = await call.value('token').post(formData).json();
 
       if (error.value || !tokenData.value.access_token) {
         return { error: tokenData.value ?? error.value };
@@ -169,7 +248,7 @@ export const useUserStore = defineStore('user', () => {
     } else if (import.meta.env.VITE_AUTH_SCHEME === 'fxa') {
       // We get a one-time token back from the api, use it to fetch the real access token
       data.value.accessToken = username;
-      const { error, data: tokenData }: TokenResponse = await call('fxa-token').post().json();
+      const { error, data: tokenData }: TokenResponse = await call.value('fxa-token').post().json();
 
       if (error.value || !tokenData.value.access_token) {
         return { error: tokenData.value ?? error.value };
@@ -180,15 +259,14 @@ export const useUserStore = defineStore('user', () => {
       return { error: i18n.t('error.loginMethodNotSupported') };
     }
 
-    return profile(call);
+    return profile();
   };
 
   /**
    * Do subscriber logout and reset store
-   * @param call preconfigured API fetch function
    */
-  const logout = async (call: Fetch) => {
-    const { error }: BooleanResponse = await call('logout').get().json();
+  const logout = async () => {
+    const { error }: BooleanResponse = await call.value('logout').get().json();
 
     if (error.value) {
       // TODO: show error message
@@ -200,8 +278,9 @@ export const useUserStore = defineStore('user', () => {
 
   return {
     data,
+    init,
     authenticated,
-    exists,
+    updateSettings,
     $reset,
     updateSignedUrl,
     profile,
@@ -211,6 +290,7 @@ export const useUserStore = defineStore('user', () => {
     logout,
     myLink,
     mySlug,
+    myColourScheme,
     updateUser,
     finishFTUE,
   };
diff --git a/frontend/src/utils.ts b/frontend/src/utils.ts
index fc4574fe0..fdc85bf05 100644
--- a/frontend/src/utils.ts
+++ b/frontend/src/utils.ts
@@ -1,5 +1,5 @@
 // get the first key of given object that points to given value
-import { ColorSchemes } from '@/definitions';
+import { ColourSchemes } from '@/definitions';
 import { Ref } from 'vue';
 import { i18nType } from '@/composables/i18n';
 import {
@@ -77,13 +77,25 @@ export const download = (data: BlobPart, filename: string, contenttype: string =
 };
 
 // handle time format, return dayjs format string
-// can be either set by the user (local storage) or detected from system
+// can be either set by the user (local storage) or detected from system.
+// This functions works independent from Pinia stores so that
+// it can be called even if stores are not initialized yet.
 export const timeFormat = (): string => {
+  const user = JSON.parse(localStorage?.getItem('tba/user') ?? '{}');
   const is12HourTime = Intl.DateTimeFormat().resolvedOptions().hour12 ? 12 : 24;
-  const format = Number(localStorage?.getItem('timeFormat')) ?? is12HourTime;
+  const format = Number(user?.setttings?.timeFormat ?? is12HourTime);
   return format === 24 ? 'HH:mm' : 'hh:mm A';
 };
 
+// Check if we already have a local user preferred language
+// Otherwise just use the navigators language.
+// This functions works independent from Pinia stores so that
+// it can be called even if stores are not initialized yet.
+export const defaultLocale = () => {
+  const user = JSON.parse(localStorage?.getItem('tba/user') ?? '{}');
+  return user?.settings?.language ?? navigator.language.split('-')[0];
+}
+
 // event popup handling
 export const initialEventPopupData: EventPopup = {
   event: null,
@@ -111,48 +123,10 @@ export const showEventPopup = (el: HTMLElementEvent, event: CalendarEvent, posit
   return obj;
 };
 
-/**
- * Returns the stored locale setting or null if none is set.
- * TODO: This should be moved to a settings store
- */
-export const getLocale = (): string|null => {
-  const locale = localStorage?.getItem('locale');
-  if (!locale) {
-    return null;
-  }
-  return locale;
-};
-
-/**
- * Returns the stored theme value. If the stored value does not exist, it will guess based on prefers-color-scheme.
- * TODO: This should be moved to a settings store
- * @returns {ColorSchemes} - Colour theme value
- */
-export const getPreferredTheme = (): string => {
-  const theme = localStorage?.getItem('theme');
-  if (!theme) {
-    return window.matchMedia('(prefers-color-scheme: dark)').matches ? ColorSchemes.Dark : ColorSchemes.Light;
-  }
-
-  switch (theme) {
-    case 'dark':
-      return ColorSchemes.Dark;
-    case 'light':
-      return ColorSchemes.Light;
-    default:
-      // This would be ColorSchemes.System, but I feel like we need a definitive answer here.
-      return window.matchMedia('(prefers-color-scheme: dark)').matches ? ColorSchemes.Dark : ColorSchemes.Light;
-  }
-};
-
 /**
  * via: https://stackoverflow.com/a/11868398
  */
 export const getAccessibleColor = (hexcolor: string): string => {
-  const defaultColor = getPreferredTheme() === ColorSchemes.Dark ? 'white' : 'black';
-  if (!hexcolor) {
-    return defaultColor;
-  }
   const r = parseInt(hexcolor.substring(1, 3), 16);
   const g = parseInt(hexcolor.substring(3, 5), 16);
   const b = parseInt(hexcolor.substring(5, 7), 16);
@@ -214,9 +188,9 @@ export default {
   initials,
   download,
   timeFormat,
+  defaultLocale,
   initialEventPopupData,
   showEventPopup,
   getAccessibleColor,
-  getLocale,
   handleFormError,
 };
diff --git a/frontend/src/views/ContactView.vue b/frontend/src/views/ContactView.vue
index d44e6a439..cd0e44d1f 100644
--- a/frontend/src/views/ContactView.vue
+++ b/frontend/src/views/ContactView.vue
@@ -48,7 +48,7 @@ const send = async () => {
 
 <template>
   <!-- page title area -->
-  <div v-if="user.exists()" class="flex flex-col items-center justify-center gap-4">
+  <div v-if="user.authenticated" class="flex flex-col items-center justify-center gap-4">
     <div class="text-4xl font-light">{{ t('heading.contactRequest') }}</div>
     <div class="w-full max-w-lg">{{ t('text.contactRequestForm') }}</div>
     <alert-box
diff --git a/frontend/src/views/LoginView.vue b/frontend/src/views/LoginView.vue
index 4ed02999f..3d25020a4 100644
--- a/frontend/src/views/LoginView.vue
+++ b/frontend/src/views/LoginView.vue
@@ -22,9 +22,6 @@ import PrimaryButton from '@/tbpro/elements/PrimaryButton.vue';
 import WordMark from '@/elements/WordMark.vue';
 import { handleFormError } from '@/utils';
 
-// component constants
-const user = useUserStore();
-
 // component constants
 const { t } = useI18n();
 const call = inject(callKey);
@@ -33,6 +30,9 @@ const route = useRoute();
 const router = useRouter();
 const isPasswordAuth = inject(isPasswordAuthKey);
 const isFxaAuth = inject(isFxaAuthKey);
+const user = useUserStore();
+user.init(call);
+
 // Don't show the invite code field, only the "Join the waiting list" part
 const hideInviteField = ref(false);
 const isLoading = ref(false);
@@ -166,7 +166,7 @@ const login = async () => {
     return;
   }
 
-  const { error }: Error = await user.login(call, email.value, password.value);
+  const { error }: Error = await user.login(email.value, password.value);
   if (error) {
     let errObj = error as PydanticException;
     if (typeof error === 'string') {
diff --git a/frontend/src/views/LogoutView.vue b/frontend/src/views/LogoutView.vue
index 1685fe63d..0eeeb3ae9 100644
--- a/frontend/src/views/LogoutView.vue
+++ b/frontend/src/views/LogoutView.vue
@@ -7,14 +7,14 @@ import { useRouter } from 'vue-router';
 import LoadingSpinner from '@/elements/LoadingSpinner.vue';
 
 // component constants
-const user = useUserStore();
-const router = useRouter();
-
 const call = inject(callKey);
+const router = useRouter();
+const user = useUserStore();
+user.init(call);
 
 // do log out
 const logout = async () => {
-  await user.logout(call);
+  await user.logout();
   await router.push('/');
 };
 
diff --git a/frontend/src/views/PostLoginView.vue b/frontend/src/views/PostLoginView.vue
index c185bfd33..6dfb6e866 100644
--- a/frontend/src/views/PostLoginView.vue
+++ b/frontend/src/views/PostLoginView.vue
@@ -8,11 +8,10 @@ import { callKey } from '@/keys';
 const route = useRoute();
 const router = useRouter();
 
-// component constants
-const user = useUserStore();
-
 // component constants
 const call = inject(callKey);
+const user = useUserStore();
+user.init(call);
 
 const isFxaAuth = computed(() => import.meta.env?.VITE_AUTH_SCHEME === 'fxa');
 
@@ -28,7 +27,7 @@ onMounted(async () => {
     return;
   }
 
-  await user.login(call, route.params.token as string, null);
+  await user.login(route.params.token as string, null);
 
   // If we don't have a redirectTo or it's to logout then push to dashboard!
   if (!redirectTo || redirectTo === '/logout') {
diff --git a/frontend/src/views/ProfileView.vue b/frontend/src/views/ProfileView.vue
index 3a722e575..406e9d4c5 100644
--- a/frontend/src/views/ProfileView.vue
+++ b/frontend/src/views/ProfileView.vue
@@ -18,10 +18,7 @@ import { useCalendarStore } from '@/stores/calendar-store';
 import { useAppointmentStore } from '@/stores/appointment-store';
 
 // component constants
-const user = useUserStore();
 const router = useRouter();
-
-// component constants
 const { t } = useI18n();
 const call = inject(callKey);
 const fxaEditProfileUrl = inject(fxaEditProfileUrlKey);
@@ -29,12 +26,15 @@ const isFxaAuth = inject(isFxaAuthKey);
 
 const appointmentStore = useAppointmentStore();
 const calendarStore = useCalendarStore();
+const user = useUserStore();
+user.init(call);
+
 const { pendingAppointments } = storeToRefs(appointmentStore);
 const { connectedCalendars } = storeToRefs(calendarStore);
 
 // do log out
 const logout = async () => {
-  await user.logout(call);
+  await user.logout();
   await router.push('/');
 };
 
@@ -45,14 +45,14 @@ const editProfile = async () => {
 
 <template>
   <!-- page title area -->
-  <div v-if="user.exists()" class="flex flex-col items-center justify-center gap-2">
+  <div v-if="user.authenticated" class="flex flex-col items-center justify-center gap-2">
     <div class="text-4xl font-light">{{ user.data.name }}</div>
     <div class="flex items-center gap-4">
       <div class="rounded-full border border-gray-500 px-2 text-xs uppercase text-gray-500">
         {{ keyByValue(SubscriberLevels, user.data.level, true) }}
       </div>
       <div class="flex gap-1 text-gray-500">
-        {{ user.data.timezone }}
+        {{ user.data.settings.timezone }}
         <router-link :to="{ name: 'settings' }" class="cursor-pointer pt-0.5">
           <icon-pencil class="stroke-1.5 size-4" />
         </router-link>
diff --git a/frontend/test/stores/user-store.test.js b/frontend/test/stores/user-store.test.js
index e48f89d49..d424ff1c3 100644
--- a/frontend/test/stores/user-store.test.js
+++ b/frontend/test/stores/user-store.test.js
@@ -18,7 +18,7 @@ const TEST_USERNAME = 'test';
 const TEST_PASSWORD = 'password';
 
 const beforeFetch = async (options, user) => {
-  if (user.exists()) {
+  if (user.authenticated) {
     const token = await user.data.accessToken;
     options.headers.Authorization = `Bearer ${token}`;
   }
@@ -56,7 +56,10 @@ const restHandlers = [
       email: 'test@example.org',
       level: 1,
       timezone: 'America/Vancouver',
-      avatarUrl: null,
+      language: 'de',
+      time_mode: 12,
+      colour_scheme: 'dark',
+      avatar_url: null,
     });
   }),
   http.get(`${API_URL}/me/signature`, async (request) => {
@@ -85,6 +88,7 @@ describe('User Store', () => {
   beforeEach(() => {
     setActivePinia(createPinia());
   });
+
   // Start server before all tests
   beforeAll(() => server.listen());
 
@@ -97,13 +101,15 @@ describe('User Store', () => {
   test('exists', () => {
     const user = useUserStore();
     user.data.accessToken = 'abc';
-    expect(user.exists()).toBe(true);
+    expect(user.authenticated).toBe(true);
   });
+
   test('does not exist', () => {
     const user = useUserStore();
     user.$reset();
-    expect(user.exists()).toBe(false);
+    expect(user.authenticated).toBe(false);
   });
+
   test('reset', () => {
     const user = useUserStore();
 
@@ -117,44 +123,51 @@ describe('User Store', () => {
     });
 
     // Check if the user exists (because we have an access token)
-    expect(user.exists() === true);
+    expect(user.authenticated === true);
 
     // Reset the user which should null all user data.
     user.$reset();
 
     // Ensure our data is null/don't exist
-    expect(user.exists()).toBe(false);
+    expect(user.authenticated).toBe(false);
     expect(user.data.name).toBeNull();
     expect(user.data.email).toBeNull();
     expect(user.data.signedUrl).toBeNull();
   });
+
   test('login fails', async () => {
     const user = useUserStore();
-
-    const response = await user.login(createFetch({
+    user.init(createFetch({
       baseUrl: API_URL,
-    }), TEST_USERNAME, `${TEST_PASSWORD}_thispasswordisnolongerokay`);
+    }));
+
+    const response = await user.login(TEST_USERNAME, `${TEST_PASSWORD}_thispasswordisnolongerokay`);
     expect(response === false);
   });
+
   test('login successful', async () => {
     // This will call profile() as well!
     const user = useUserStore();
-
-    const response = await user.login(createFetch({
+    user.init(createFetch({
       baseUrl: API_URL,
       options: {
         beforeFetch: async ({ options }) => beforeFetch(options, user),
       },
-    }), TEST_USERNAME, `${TEST_PASSWORD}`);
+    }));
+
+    const response = await user.login(TEST_USERNAME, `${TEST_PASSWORD}`);
 
     expect(response.error).toBe(false);
-    expect(user.exists()).toBe(true);
+    expect(user.authenticated).toBe(true);
     expect(user.data.accessToken).toBeTruthy();
     expect(user.data.username).toBeTruthy();
     expect(user.data.email).toBeTruthy();
     expect(user.data.name).toBeTruthy();
     expect(user.data.level).toBeTruthy();
-    expect(user.data.timezone).toBeTruthy();
+    expect(user.data.settings.timezone).toBeTruthy();
+    expect(user.data.settings.language).toBeTruthy();
+    expect(user.data.settings.timeFormat).toBeTruthy();
+    expect(user.data.settings.colourScheme).toBeTruthy();
     expect(user.data.signedUrl).toBeTruthy();
   });
 });