diff --git a/js/src/components/Settings/SettingsOnboarding.vue b/js/src/components/Settings/SettingsOnboarding.vue
index e9a489b7c..383d7d25f 100644
--- a/js/src/components/Settings/SettingsOnboarding.vue
+++ b/js/src/components/Settings/SettingsOnboarding.vue
@@ -70,14 +70,16 @@ const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
 
 const { loggedUser } = useUserSettings();
 
+const { mutate: doUpdateLocale } = updateLocale();
+
 onMounted(() => {
-  updateLocale(locale as unknown as string);
+  doUpdateLocale({ locale: locale as unknown as string });
   doUpdateSetting({ timezone });
 });
 
 watch(locale, () => {
   if (locale.value) {
-    updateLocale(locale.value as string);
+    doUpdateLocale({ locale: locale as unknown as string });
     saveLocaleData(locale.value as string);
   }
 });
diff --git a/js/src/composition/apollo/user.ts b/js/src/composition/apollo/user.ts
index 4e8128eb4..b1459ff2b 100644
--- a/js/src/composition/apollo/user.ts
+++ b/js/src/composition/apollo/user.ts
@@ -59,12 +59,8 @@ export async function doUpdateSetting(
   }));
 }
 
-export async function updateLocale(locale: string) {
-  useMutation<{ id: string; locale: string }>(UPDATE_USER_LOCALE, () => ({
-    variables: {
-      locale,
-    },
-  }));
+export function updateLocale() {
+  return useMutation<{ id: string; locale: string }>(UPDATE_USER_LOCALE);
 }
 
 export function registerAccount() {
diff --git a/js/src/views/Settings/PreferencesView.vue b/js/src/views/Settings/PreferencesView.vue
index 919131972..2be472a9e 100644
--- a/js/src/views/Settings/PreferencesView.vue
+++ b/js/src/views/Settings/PreferencesView.vue
@@ -47,6 +47,7 @@
         <o-select
           :loading="loadingTimezones || loadingUserSettings"
           v-model="$i18n.locale"
+          @update:modelValue="updateLanguage"
           :placeholder="t('Select a language')"
           id="setting-language"
         >
@@ -147,7 +148,7 @@ import RouteName from "../../router/name";
 import { AddressSearchType } from "@/types/enums";
 import { Address, IAddress } from "@/types/address.model";
 import { useTimezones } from "@/composition/apollo/config";
-import { useUserSettings } from "@/composition/apollo/user";
+import { useUserSettings, updateLocale } from "@/composition/apollo/user";
 import { useHead } from "@vueuse/head";
 import { computed, defineAsyncComponent, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
@@ -172,6 +173,12 @@ useHead({
 const theme = ref(localStorage.getItem("theme"));
 const systemTheme = ref(!("theme" in localStorage));
 
+const { mutate: doUpdateLocale } = updateLocale();
+
+const updateLanguage = (newLocale: string) => {
+  doUpdateLocale({ locale: newLocale });
+};
+
 watch(systemTheme, (newSystemTheme) => {
   console.debug("changing system theme", newSystemTheme);
   if (newSystemTheme) {