diff --git a/packages/web/src/settings/SettingsModal.svelte b/packages/web/src/settings/SettingsModal.svelte
index b521ca84a..df3157d8d 100644
--- a/packages/web/src/settings/SettingsModal.svelte
+++ b/packages/web/src/settings/SettingsModal.svelte
@@ -42,7 +42,7 @@
   import { safeFormatDate } from 'dbgate-tools';
   import FormDefaultActionField from './FormDefaultActionField.svelte';
   import AiSettingsTab from './AiSettingsTab.svelte';
-  import { _t } from '../translations';
+  import { _t, setSelectedLanguage } from '../translations';
   import hasPermission from '../utility/hasPermission';
   import ConfirmModal from '../modals/ConfirmModal.svelte';
   import { showModal } from '../modals/modalTools';
@@ -180,34 +180,40 @@ ORDER BY
             defaultValue={false}
           />
           <div class="heading">{_t('settings.localization', { defaultMessage: 'Localization' })}</div>
-          <FormSelectField
+
+          <FormFieldTemplateLarge
             label={_t('settings.localization.language', { defaultMessage: 'Language' })}
-            name="localization.language"
-            defaultValue={getSelectedLanguage()}
-            data-testid="SettingsModal_languageSelect"
-            isNative
-            options={[
-              { value: 'cs', label: 'Čeština' },
-              { value: 'de', label: 'Deutsch' },
-              { value: 'en', label: 'English' },
-              { value: 'es', label: 'Español' },
-              { value: 'fr', label: 'Français' },
-              { value: 'sk', label: 'Slovenčina' },
-              { value: 'zh', label: '中文' },
-            ]}
-            on:change={() => {
-              showModal(ConfirmModal, {
-                message: _t('settings.localization.reloadWarning', {
-                  defaultMessage: 'Application will be reloaded to apply new language settings',
-                }),
-                onConfirm: () => {
-                  setTimeout(() => {
-                    internalRedirectTo(electron ? '/index.html' : '/');
-                  }, 100);
-                },
-              });
-            }}
-          />
+            type="combo"
+          >
+            <SelectField
+              isNative
+              data-testid="SettingsModal_languageSelect"
+              options={[
+                { value: 'cs', label: 'Čeština' },
+                { value: 'de', label: 'Deutsch' },
+                { value: 'en', label: 'English' },
+                { value: 'es', label: 'Español' },
+                { value: 'fr', label: 'Français' },
+                { value: 'sk', label: 'Slovenčina' },
+                { value: 'zh', label: '中文' },
+              ]}
+              defaultValue={getSelectedLanguage()}
+              value={getSelectedLanguage()}
+              on:change={e => {
+                setSelectedLanguage(e.detail);
+                showModal(ConfirmModal, {
+                  message: _t('settings.localization.reloadWarning', {
+                    defaultMessage: 'Application will be reloaded to apply new language settings',
+                  }),
+                  onConfirm: () => {
+                    setTimeout(() => {
+                      internalRedirectTo(electron ? '/index.html' : '/');
+                    }, 100);
+                  },
+                });
+              }}
+            />
+          </FormFieldTemplateLarge>
 
           <div class="heading">{_t('settings.dataGrid.title', { defaultMessage: 'Data grid' })}</div>
           <FormTextField
diff --git a/packages/web/src/translations.ts b/packages/web/src/translations.ts
index 7cf0f2ec3..082af75ae 100644
--- a/packages/web/src/translations.ts
+++ b/packages/web/src/translations.ts
@@ -7,6 +7,8 @@ import zh from '../../../translations/zh.json';
 
 import MessageFormat, { MessageFunction } from '@messageformat/core';
 import { getStringSettingsValue } from './settings/settingsTools';
+import getElectron from './utility/getElectron';
+import { apiCall } from './utility/api';
 
 const translations = {
   en: {},
@@ -28,25 +30,34 @@ let selectedLanguageCache: string | null = null;
 export function getSelectedLanguage(): string {
   if (selectedLanguageCache) return selectedLanguageCache;
 
-  const browserLanguage = getBrowserLanguage();
-  const selectedLanguage = getStringSettingsValue('localization.language', browserLanguage);
+  // const browserLanguage = getBrowserLanguage();
+  const selectedLanguage = getElectron()
+    ? getStringSettingsValue('localization.language', null)
+    : localStorage.getItem('selectedLanguage');
 
-  if (!supportedLanguages.includes(selectedLanguage)) return defaultLanguage;
+  if (!selectedLanguage || !supportedLanguages.includes(selectedLanguage)) return defaultLanguage;
   return selectedLanguage;
 }
 
+export async function setSelectedLanguage(language: string) {
+  if (getElectron()) {
+    await apiCall('config/update-settings', { 'localization.language': language });
+  } else {
+    localStorage.setItem('selectedLanguage', language);
+  }
+}
+
 export function saveSelectedLanguageToCache() {
   selectedLanguageCache = getSelectedLanguage();
 }
 
 export function getBrowserLanguage(): string {
-  return 'en';
-  // if (typeof window !== 'undefined') {
-  //   return (
-  //     (navigator.languages && navigator.languages[0]).slice(0, 2) || navigator.language.slice(0, 2) || defaultLanguage
-  //   );
-  // }
-  // return defaultLanguage;
+  if (typeof window !== 'undefined') {
+    return (
+      (navigator.languages && navigator.languages[0]).slice(0, 2) || navigator.language.slice(0, 2) || defaultLanguage
+    );
+  }
+  return defaultLanguage;
 }
 
 type TranslateOptions = {