diff --git a/src/components/base/LanguageSelectButtonBase.ts b/src/components/base/LanguageSelectButtonBase.ts
new file mode 100644
index 00000000..0446d771
--- /dev/null
+++ b/src/components/base/LanguageSelectButtonBase.ts
@@ -0,0 +1,72 @@
+import { computed } from 'vue';
+
+import type { LanguageOption } from '@/locales/index.ts';
+import { useI18n } from '@/locales/helpers.ts';
+
+import { useSettingsStore } from '@/stores/setting.ts';
+
+export interface LanguageSelectButtonBaseProps {
+    disabled?: boolean;
+    useModelValue?: boolean;
+    modelValue?: string;
+}
+
+export interface LanguageSelectButtonBaseEmits {
+    (e: 'update:modelValue', value: string): void;
+}
+
+export function useLanguageSelectButtonBase(props: LanguageSelectButtonBaseProps, emit: LanguageSelectButtonBaseEmits) {
+    const { getCurrentLanguageTag, getCurrentLanguageDisplayName, getAllLanguageOptions, getLanguageInfo, setLanguage } = useI18n();
+
+    const settingsStore = useSettingsStore();
+
+    const allLanguages = computed<LanguageOption[]>(() => getAllLanguageOptions(false));
+
+    const currentLocale = computed<string>({
+        get: () => getCurrentLanguageTag(),
+        set: (value: string) => {
+            const localeDefaultSettings = setLanguage(value);
+            settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
+        }
+    });
+
+    const currentLanguageName = computed<string>(() => {
+        if (props.useModelValue && props.modelValue) {
+            const languageInfo = getLanguageInfo(props.modelValue);
+
+            if (!languageInfo) {
+                return '';
+            }
+
+            return languageInfo.displayName;
+        } else {
+            return getCurrentLanguageDisplayName()
+        }
+    });
+
+    function updateLanguage(languageTag: string): void {
+        if (props.useModelValue) {
+            emit('update:modelValue', languageTag);
+        } else {
+            currentLocale.value = languageTag;
+        }
+    }
+
+    function isLanguageSelected(languageTag: string): boolean {
+        if (props.useModelValue) {
+            return props.modelValue === languageTag;
+        } else {
+            return currentLocale.value === languageTag;
+        }
+    }
+
+    return {
+        // computed states
+        allLanguages,
+        currentLocale,
+        currentLanguageName,
+        // functions
+        updateLanguage,
+        isLanguageSelected
+    }
+}
diff --git a/src/components/desktop/LanguageSelectButton.vue b/src/components/desktop/LanguageSelectButton.vue
new file mode 100644
index 00000000..13a489d9
--- /dev/null
+++ b/src/components/desktop/LanguageSelectButton.vue
@@ -0,0 +1,37 @@
+<template>
+    <v-menu location="bottom" max-height="500">
+        <template #activator="{ props }">
+            <v-btn variant="text" :disabled="disabled" v-bind="props">{{ currentLanguageName }}</v-btn>
+        </template>
+        <v-list>
+            <v-list-item :key="lang.languageTag" :value="lang.languageTag" v-for="lang in allLanguages">
+                <v-list-item-title class="cursor-pointer" @click="updateLanguage(lang.languageTag)">
+                    <div class="d-flex align-center">
+                        <span>{{ lang.nativeDisplayName }}</span>
+                        <v-spacer style="min-width: 40px" />
+                        <v-icon :icon="mdiCheck" v-if="isLanguageSelected(lang.languageTag)" />
+                        <span class="text-field-append-text" v-if="!isLanguageSelected(lang.languageTag)">{{ lang.displayName }}</span>
+                    </div>
+                </v-list-item-title>
+            </v-list-item>
+        </v-list>
+    </v-menu>
+</template>
+
+<script setup lang="ts">
+import { type LanguageSelectButtonBaseProps, type LanguageSelectButtonBaseEmits, useLanguageSelectButtonBase } from '@/components/base/LanguageSelectButtonBase.ts';
+
+import {
+    mdiCheck
+} from '@mdi/js';
+
+const props = defineProps<LanguageSelectButtonBaseProps>();
+const emit = defineEmits<LanguageSelectButtonBaseEmits>();
+
+const {
+    allLanguages,
+    currentLanguageName,
+    updateLanguage,
+    isLanguageSelected
+} = useLanguageSelectButtonBase(props, emit);
+</script>
diff --git a/src/components/mobile/LanguageSelectButton.vue b/src/components/mobile/LanguageSelectButton.vue
new file mode 100644
index 00000000..85ebae18
--- /dev/null
+++ b/src/components/mobile/LanguageSelectButton.vue
@@ -0,0 +1,32 @@
+<template>
+    <f7-button small popover-open=".lang-popover-menu" :disabled="disabled" :text="currentLanguageName"></f7-button>
+
+    <f7-popover class="lang-popover-menu">
+        <f7-list dividers>
+            <f7-list-item link="#" no-chevron popover-close
+                          :key="lang.languageTag"
+                          :title="lang.nativeDisplayName"
+                          v-for="lang in allLanguages"
+                          @click="updateLanguage(lang.languageTag)">
+                <template #after>
+                    <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="isLanguageSelected(lang.languageTag)"></f7-icon>
+                    <span v-if="!isLanguageSelected(lang.languageTag)">{{ lang.displayName }}</span>
+                </template>
+            </f7-list-item>
+        </f7-list>
+    </f7-popover>
+</template>
+
+<script setup lang="ts">
+import { type LanguageSelectButtonBaseProps, type LanguageSelectButtonBaseEmits, useLanguageSelectButtonBase } from '@/components/base/LanguageSelectButtonBase.ts';
+
+const props = defineProps<LanguageSelectButtonBaseProps>();
+const emit = defineEmits<LanguageSelectButtonBaseEmits>();
+
+const {
+    allLanguages,
+    currentLanguageName,
+    updateLanguage,
+    isLanguageSelected
+} = useLanguageSelectButtonBase(props, emit);
+</script>
diff --git a/src/components/mobile/ListItemSelectionSheet.vue b/src/components/mobile/ListItemSelectionSheet.vue
index 2ffeea57..1505e316 100644
--- a/src/components/mobile/ListItemSelectionSheet.vue
+++ b/src/components/mobile/ListItemSelectionSheet.vue
@@ -14,6 +14,7 @@
                 <f7-list-item link="#" no-chevron
                               :title="ti((titleField ? (item as Record<string, unknown>)[titleField] : item) as string, !!titleI18n)"
                               :value="getItemValue(item, index, valueField, valueType)"
+                              :after="ti((afterField ? (item as Record<string, unknown>)[afterField] : item) as string, !!afterI18n)"
                               :class="{ 'list-item-selected': isSelected(item, index) }"
                               :key="getItemValue(item, index, keyField, valueType)"
                               v-for="(item, index) in items"
@@ -45,6 +46,8 @@ const props = defineProps<{
     valueField?: string; // for value type == item
     titleField: string;
     titleI18n?: boolean;
+    afterField: string;
+    afterI18n?: boolean;
     iconField?: string;
     iconType?: string;
     colorField?: string;
diff --git a/src/desktop-main.ts b/src/desktop-main.ts
index 8a5a01d3..bcb2400e 100644
--- a/src/desktop-main.ts
+++ b/src/desktop-main.ts
@@ -78,6 +78,7 @@ import MapView from '@/components/common/MapView.vue';
 import ItemIcon from '@/components/desktop/ItemIcon.vue';
 import BtnVerticalGroup from '@/components/desktop/BtnVerticalGroup.vue';
 import AmountInput from '@/components/desktop/AmountInput.vue';
+import LanguageSelectButton from '@/components/desktop/LanguageSelectButton.vue';
 import DateTimeSelect from '@/components/desktop/DateTimeSelect.vue';
 import DateSelect from '@/components/desktop/DateSelect.vue';
 import ColorSelect from '@/components/desktop/ColorSelect.vue';
@@ -450,6 +451,7 @@ app.component('MapView', MapView);
 app.component('ItemIcon', ItemIcon);
 app.component('BtnVerticalGroup', BtnVerticalGroup);
 app.component('AmountInput', AmountInput);
+app.component('LanguageSelectButton', LanguageSelectButton);
 app.component('DateTimeSelect', DateTimeSelect);
 app.component('DateSelect', DateSelect);
 app.component('ColorSelect', ColorSelect);
diff --git a/src/locales/helpers.ts b/src/locales/helpers.ts
index 7d3f5d48..d2f73a34 100644
--- a/src/locales/helpers.ts
+++ b/src/locales/helpers.ts
@@ -612,16 +612,13 @@ export function useI18n() {
             }
 
             const languageInfo = ALL_LANGUAGES[languageTag];
-            let displayName = languageInfo.displayName;
+            const displayName = languageInfo.displayName;
             const languageNameInCurrentLanguage = getLanguageDisplayName(languageInfo.name);
 
-            if (languageNameInCurrentLanguage && languageNameInCurrentLanguage !== displayName) {
-                displayName = `${languageNameInCurrentLanguage} (${displayName})`;
-            }
-
             ret.push({
                 languageTag: languageTag,
-                displayName: displayName
+                displayName: languageNameInCurrentLanguage,
+                nativeDisplayName: displayName
             });
         }
 
@@ -632,7 +629,8 @@ export function useI18n() {
         if (includeSystemDefault) {
             ret.splice(0, 0, {
                 languageTag: '',
-                displayName: t('System Default')
+                displayName: '',
+                nativeDisplayName: t('System Default')
             });
         }
 
diff --git a/src/locales/index.ts b/src/locales/index.ts
index 9a3d3fab..cbc8a5d5 100644
--- a/src/locales/index.ts
+++ b/src/locales/index.ts
@@ -17,6 +17,7 @@ export interface LanguageInfo {
 export interface LanguageOption {
     readonly languageTag: string;
     readonly displayName: string;
+    readonly nativeDisplayName: string;
 }
 
 export const DEFAULT_LANGUAGE: string = 'en';
diff --git a/src/mobile-main.ts b/src/mobile-main.ts
index 88fd6ef1..9c1a6237 100644
--- a/src/mobile-main.ts
+++ b/src/mobile-main.ts
@@ -86,6 +86,7 @@ import PinCodeInput from '@/components/common/PinCodeInput.vue';
 import MapView from '@/components/common/MapView.vue';
 
 import ItemIcon from '@/components/mobile/ItemIcon.vue';
+import LanguageSelectButton from '@/components/mobile/LanguageSelectButton.vue';
 import PieChart from '@/components/mobile/PieChart.vue';
 import TrendsBarChart from '@/components/mobile/TrendsBarChart.vue';
 import PinCodeInputSheet from '@/components/mobile/PinCodeInputSheet.vue';
@@ -170,6 +171,7 @@ app.component('PinCodeInput', PinCodeInput);
 app.component('MapView', MapView);
 
 app.component('ItemIcon', ItemIcon);
+app.component('LanguageSelectButton', LanguageSelectButton);
 app.component('PieChart', PieChart);
 app.component('TrendsBarChart', TrendsBarChart);
 app.component('PinCodeInputSheet', PinCodeInputSheet);
diff --git a/src/styles/mobile/global.css b/src/styles/mobile/global.css
index bd243012..29fa8601 100644
--- a/src/styles/mobile/global.css
+++ b/src/styles/mobile/global.css
@@ -166,6 +166,20 @@ i.icon.la, i.icon.las, i.icon.lab {
     overflow-y: auto;
 }
 
+.lang-popover-menu .popover-inner .item-title {
+    display: flex;
+    flex-shrink: 0;
+    overflow: inherit;
+    text-overflow: inherit;
+}
+
+.lang-popover-menu .popover-inner .item-after {
+    display: block;
+    flex-shrink: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 .login-page-fixed-bottom {
     background-color: inherit !important;
 }
diff --git a/src/views/base/LoginPageBase.ts b/src/views/base/LoginPageBase.ts
index 6c5c12a6..4e20936d 100644
--- a/src/views/base/LoginPageBase.ts
+++ b/src/views/base/LoginPageBase.ts
@@ -42,11 +42,6 @@ export function useLoginPageBase() {
 
     const tips = computed<string>(() => getServerTipContent(getLoginPageTips()));
 
-    function changeLanguage(locale: string): void {
-        const localeDefaultSettings = setLanguage(locale);
-        settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
-    }
-
     function doAfterLogin(authResponse: AuthResponse): void {
         if (authResponse.user) {
             const localeDefaultSettings = setLanguage(authResponse.user.language);
@@ -76,11 +71,11 @@ export function useLoginPageBase() {
         twoFAVerifyType,
         logining,
         verifying,
+        // computed states
         inputIsEmpty,
         twoFAInputIsEmpty,
         tips,
         // functions
-        changeLanguage,
         doAfterLogin
     }
 }
diff --git a/src/views/base/SignupPageBase.ts b/src/views/base/SignupPageBase.ts
index 8cb0eea2..796a866c 100644
--- a/src/views/base/SignupPageBase.ts
+++ b/src/views/base/SignupPageBase.ts
@@ -23,6 +23,16 @@ export function useSignupPageBase() {
     const user = ref<User>(userStore.generateNewUserModel(getCurrentLanguageTag()));
     const submitting = ref<boolean>(false);
 
+    const languageTitle = computed<string>(() => {
+        const languageInCurrentLanguage = tt('Language');
+
+        if (languageInCurrentLanguage !== 'Language') {
+            return `${languageInCurrentLanguage} / Language`;
+        }
+
+        return languageInCurrentLanguage;
+    });
+
     const currentLocale = computed<string>({
         get: () => getCurrentLanguageTag(),
         set: (value: string) => {
@@ -118,6 +128,7 @@ export function useSignupPageBase() {
         user,
         submitting,
         // computed states
+        languageTitle,
         currentLocale,
         currentLanguageName,
         inputEmptyProblemMessage,
diff --git a/src/views/base/UnlockPageBase.ts b/src/views/base/UnlockPageBase.ts
index 4b202064..c0be1b55 100644
--- a/src/views/base/UnlockPageBase.ts
+++ b/src/views/base/UnlockPageBase.ts
@@ -38,11 +38,6 @@ export function useUnlockPageBase() {
         return !!pinCode && pinCode.length === 6;
     }
 
-    function changeLanguage(locale: string): void {
-        const localeDefaultSettings = setLanguage(locale);
-        settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
-    }
-
     function doAfterUnlocked(): void {
         transactionsStore.initTransactionDraft();
         tokensStore.refreshTokenAndRevokeOldToken().then(response => {
@@ -82,7 +77,6 @@ export function useUnlockPageBase() {
         isWebAuthnAvailable,
         // methods
         isPinCodeValid,
-        changeLanguage,
         doAfterUnlocked,
         doRelogin
     };
diff --git a/src/views/desktop/ForgetPasswordPage.vue b/src/views/desktop/ForgetPasswordPage.vue
index 36c10777..f19e5be8 100644
--- a/src/views/desktop/ForgetPasswordPage.vue
+++ b/src/views/desktop/ForgetPasswordPage.vue
@@ -67,22 +67,7 @@
                         <v-card-text class="pt-0">
                             <v-row>
                                 <v-col cols="12" class="text-center">
-                                    <v-menu location="bottom">
-                                        <template #activator="{ props }">
-                                            <v-btn variant="text"
-                                                   :disabled="requesting"
-                                                   v-bind="props">{{ currentLanguageName }}</v-btn>
-                                        </template>
-                                        <v-list>
-                                            <v-list-item v-for="lang in allLanguages" :key="lang.languageTag">
-                                                <v-list-item-title
-                                                    class="cursor-pointer"
-                                                    @click="changeLanguage(lang.languageTag)">
-                                                    {{ lang.displayName }}
-                                                </v-list-item-title>
-                                            </v-list-item>
-                                        </v-list>
-                                    </v-menu>
+                                    <language-select-button :disabled="requesting" />
                                 </v-col>
 
                                 <v-col cols="12" class="d-flex align-center pt-0">
@@ -100,23 +85,19 @@
             </v-col>
         </v-row>
 
-        <confirm-dialog ref="confirmDialog"/>
         <snack-bar ref="snackbar" />
     </div>
 </template>
 
 <script setup lang="ts">
-import ConfirmDialog from '@/components/desktop/ConfirmDialog.vue';
 import SnackBar from '@/components/desktop/SnackBar.vue';
 
 import { ref, computed, useTemplateRef } from 'vue';
 import { useTheme } from 'vuetify';
 
-import type { LanguageOption } from '@/locales/index.ts';
 import { useI18n } from '@/locales/helpers.ts';
 
 import { useRootStore } from '@/stores/index.ts';
-import { useSettingsStore } from '@/stores/setting.ts';
 
 import { APPLICATION_LOGO_PATH } from '@/consts/asset.ts';
 import { ThemeType } from '@/core/theme.ts';
@@ -126,27 +107,22 @@ import {
     mdiChevronLeft,
 } from '@mdi/js';
 
-type ConfirmDialogType = InstanceType<typeof ConfirmDialog>;
 type SnackBarType = InstanceType<typeof SnackBar>;
 
 const theme = useTheme();
 
-const { tt, getCurrentLanguageDisplayName, getAllLanguageOptions, setLanguage } = useI18n();
+const { tt } = useI18n();
 
 const rootStore = useRootStore();
-const settingsStore = useSettingsStore();
 
 const version = `v${getVersion()}`;
 
-const confirmDialog = useTemplateRef<ConfirmDialogType>('confirmDialog');
 const snackbar = useTemplateRef<SnackBarType>('snackbar');
 
 const email = ref<string>('');
 const requesting = ref<boolean>(false);
 
-const allLanguages = computed<LanguageOption[]>(() => getAllLanguageOptions(false));
 const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
-const currentLanguageName = computed<string>(() => getCurrentLanguageDisplayName());
 
 function requestResetPassword(): void {
     if (!email.value) {
@@ -169,9 +145,4 @@ function requestResetPassword(): void {
         }
     });
 }
-
-function changeLanguage(locale: string): void {
-    const localeDefaultSettings = setLanguage(locale);
-    settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
-}
 </script>
diff --git a/src/views/desktop/LoginPage.vue b/src/views/desktop/LoginPage.vue
index 6c89bbfa..db039764 100644
--- a/src/views/desktop/LoginPage.vue
+++ b/src/views/desktop/LoginPage.vue
@@ -129,22 +129,7 @@
                         <v-card-text class="pt-0">
                             <v-row>
                                 <v-col cols="12" class="text-center">
-                                    <v-menu location="bottom">
-                                        <template #activator="{ props }">
-                                            <v-btn variant="text"
-                                                   :disabled="logining || verifying"
-                                                   v-bind="props">{{ currentLanguageName }}</v-btn>
-                                        </template>
-                                        <v-list>
-                                            <v-list-item v-for="lang in allLanguages" :key="lang.languageTag">
-                                                <v-list-item-title
-                                                    class="cursor-pointer"
-                                                    @click="changeLanguage(lang.languageTag)">
-                                                    {{ lang.displayName }}
-                                                </v-list-item-title>
-                                            </v-list-item>
-                                        </v-list>
-                                    </v-menu>
+                                    <language-select-button :disabled="logining || verifying" />
                                 </v-col>
 
                                 <v-col cols="12" class="d-flex align-center pt-0">
@@ -175,7 +160,6 @@ import { ref, computed, useTemplateRef, nextTick } from 'vue';
 import { useRouter } from 'vue-router';
 import { useTheme } from 'vuetify';
 
-import type { LanguageOption } from '@/locales/index.ts';
 import { useI18n } from '@/locales/helpers.ts';
 import { useLoginPageBase } from '@/views/base/LoginPageBase.ts';
 
@@ -196,7 +180,7 @@ type SnackBarType = InstanceType<typeof SnackBar>;
 const router = useRouter();
 const theme = useTheme();
 
-const { tt, getCurrentLanguageDisplayName, getAllLanguageOptions } = useI18n();
+const { tt } = useI18n();
 
 const rootStore = useRootStore();
 
@@ -213,7 +197,6 @@ const {
     inputIsEmpty,
     twoFAInputIsEmpty,
     tips,
-    changeLanguage,
     doAfterLogin
 } = useLoginPageBase();
 
@@ -224,9 +207,7 @@ const snackbar = useTemplateRef<SnackBarType>('snackbar');
 const show2faInput = ref<boolean>(false);
 const showMobileQrCode = ref<boolean>(false);
 
-const allLanguages = computed<LanguageOption[]>(() => getAllLanguageOptions(false));
 const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
-const currentLanguageName = computed<string>(() => getCurrentLanguageDisplayName());
 
 function login(): void {
     if (!username.value) {
diff --git a/src/views/desktop/ResetPasswordPage.vue b/src/views/desktop/ResetPasswordPage.vue
index 81327522..9b2458ae 100644
--- a/src/views/desktop/ResetPasswordPage.vue
+++ b/src/views/desktop/ResetPasswordPage.vue
@@ -92,22 +92,7 @@
                         <v-card-text class="pt-0">
                             <v-row>
                                 <v-col cols="12" class="text-center">
-                                    <v-menu location="bottom">
-                                        <template #activator="{ props }">
-                                            <v-btn variant="text"
-                                                   :disabled="updating"
-                                                   v-bind="props">{{ currentLanguageName }}</v-btn>
-                                        </template>
-                                        <v-list>
-                                            <v-list-item v-for="lang in allLanguages" :key="lang.languageTag">
-                                                <v-list-item-title
-                                                    class="cursor-pointer"
-                                                    @click="changeLanguage(lang.languageTag)">
-                                                    {{ lang.displayName }}
-                                                </v-list-item-title>
-                                            </v-list-item>
-                                        </v-list>
-                                    </v-menu>
+                                    <language-select-button :disabled="updating" />
                                 </v-col>
 
                                 <v-col cols="12" class="d-flex align-center pt-0">
@@ -139,11 +124,9 @@ import { ref, computed, useTemplateRef } from 'vue';
 import { useRouter } from 'vue-router';
 import { useTheme } from 'vuetify';
 
-import type { LanguageOption } from '@/locales/index.ts';
 import { useI18n } from '@/locales/helpers.ts';
 
 import { useRootStore } from '@/stores/index.ts';
-import { useSettingsStore } from '@/stores/setting.ts';
 
 import { APPLICATION_LOGO_PATH } from '@/consts/asset.ts';
 import { ThemeType } from '@/core/theme.ts';
@@ -163,10 +146,9 @@ const props = defineProps<{
 const router = useRouter();
 const theme = useTheme();
 
-const { tt, getCurrentLanguageDisplayName, getAllLanguageOptions, setLanguage } = useI18n();
+const { tt } = useI18n();
 
 const rootStore = useRootStore();
-const settingsStore = useSettingsStore();
 
 const version = `v${getVersion()}`;
 
@@ -181,9 +163,7 @@ const confirmPassword = ref<string>('');
 const updating = ref<boolean>(false);
 const passwordChanged = ref<boolean>(false);
 
-const allLanguages = computed<LanguageOption[]>(() => getAllLanguageOptions(false));
 const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
-const currentLanguageName = computed<string>(() => getCurrentLanguageDisplayName());
 
 const inputProblemMessage = computed<string | null>(() => {
     if (!email.value) {
@@ -201,11 +181,6 @@ const inputProblemMessage = computed<string | null>(() => {
     }
 });
 
-function changeLanguage(locale: string): void {
-    const localeDefaultSettings = setLanguage(locale);
-    settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
-}
-
 function onSnackbarShowStateChanged(newValue: boolean): void {
     if (!newValue && passwordChanged.value) {
         router.replace('/login');
diff --git a/src/views/desktop/SignupPage.vue b/src/views/desktop/SignupPage.vue
index 5a863e42..293b0c56 100644
--- a/src/views/desktop/SignupPage.vue
+++ b/src/views/desktop/SignupPage.vue
@@ -91,14 +91,29 @@
                                 <v-row>
                                     <v-col cols="12" md="12">
                                         <v-select
-                                            item-title="displayName"
+                                            item-title="nativeDisplayName"
                                             item-value="languageTag"
                                             :disabled="submitting || navigateToHomePage"
-                                            :label="tt('Language')"
-                                            :placeholder="tt('Language')"
+                                            :label="languageTitle"
+                                            :placeholder="languageTitle"
                                             :items="allLanguages"
                                             v-model="currentLocale"
-                                        />
+                                        >
+                                            <template #item="{ props, item }">
+                                                <v-list-item :value="item.value" v-bind="props">
+                                                    <template #title>
+                                                        <v-list-item-title>
+                                                            <div class="d-flex align-center">
+                                                                <span>{{ item.title }}</span>
+                                                                <v-spacer />
+                                                                <v-icon :icon="mdiCheck" v-if="currentLocale == item.raw.languageTag" />
+                                                                <span class="text-field-append-text" v-if="currentLocale !== item.raw.languageTag">{{ item.raw.displayName }}</span>
+                                                            </div>
+                                                        </v-list-item-title>
+                                                    </template>
+                                                </v-list-item>
+                                            </template>
+                                        </v-select>
                                     </v-col>
                                 </v-row>
 
@@ -146,22 +161,8 @@
                                                   v-model="usePresetCategories"/>
                                     </v-col>
                                     <v-col cols="12" sm="6" class="text-right-sm">
-                                        <v-menu location="bottom">
-                                            <template #activator="{ props }">
-                                                <v-btn variant="text"
-                                                       :disabled="submitting || navigateToHomePage"
-                                                       v-bind="props">{{ currentLanguageName }}</v-btn>
-                                            </template>
-                                            <v-list>
-                                                <v-list-item v-for="lang in allLanguages" :key="lang.languageTag">
-                                                    <v-list-item-title
-                                                        class="cursor-pointer"
-                                                        @click="currentLocale = lang.languageTag">
-                                                        {{ lang.displayName }}
-                                                    </v-list-item-title>
-                                                </v-list-item>
-                                            </v-list>
-                                        </v-menu>
+                                        <language-select-button :disabled="submitting || navigateToHomePage"
+                                                                :use-model-value="true" v-model="currentLocale" />
                                     </v-col>
                                 </v-row>
 
@@ -273,8 +274,8 @@ const { tt, getAllLanguageOptions, getAllCurrencies, getAllWeekDays, getAllTrans
 const {
     user,
     submitting,
+    languageTitle,
     currentLocale,
-    currentLanguageName,
     inputEmptyProblemMessage,
     inputInvalidProblemMessage,
     getCategoryTypeName,
diff --git a/src/views/desktop/UnlockPage.vue b/src/views/desktop/UnlockPage.vue
index b1892b3a..499c08d5 100644
--- a/src/views/desktop/UnlockPage.vue
+++ b/src/views/desktop/UnlockPage.vue
@@ -68,22 +68,7 @@
                         <v-card-text class="pt-0">
                             <v-row>
                                 <v-col cols="12" class="text-center">
-                                    <v-menu location="bottom">
-                                        <template #activator="{ props }">
-                                            <v-btn variant="text"
-                                                   :disabled="verifyingByWebAuthn"
-                                                   v-bind="props">{{ currentLanguageName }}</v-btn>
-                                        </template>
-                                        <v-list>
-                                            <v-list-item v-for="lang in allLanguages" :key="lang.languageTag">
-                                                <v-list-item-title
-                                                    class="cursor-pointer"
-                                                    @click="changeLanguage(lang.languageTag)">
-                                                    {{ lang.displayName }}
-                                                </v-list-item-title>
-                                            </v-list-item>
-                                        </v-list>
-                                    </v-menu>
+                                    <language-select-button :disabled="verifyingByWebAuthn" />
                                 </v-col>
 
                                 <v-col cols="12" class="d-flex align-center pt-0">
@@ -114,7 +99,6 @@ import { ref, computed, useTemplateRef } from 'vue';
 import { useRouter } from 'vue-router';
 import { useTheme } from 'vuetify';
 
-import type { LanguageOption } from '@/locales/index.ts';
 import { useI18n } from '@/locales/helpers.ts';
 import { useUnlockPageBase } from '@/views/base/UnlockPageBase.ts';
 
@@ -141,8 +125,8 @@ type SnackBarType = InstanceType<typeof SnackBar>;
 const router = useRouter();
 const theme = useTheme();
 
-const { tt, getCurrentLanguageDisplayName, getAllLanguageOptions } = useI18n();
-const { version, pinCode, isWebAuthnAvailable, isPinCodeValid, changeLanguage, doAfterUnlocked, doRelogin } = useUnlockPageBase();
+const { tt } = useI18n();
+const { version, pinCode, isWebAuthnAvailable, isPinCodeValid, doAfterUnlocked, doRelogin } = useUnlockPageBase();
 
 const settingsStore = useSettingsStore();
 const userStore = useUserStore();
@@ -152,9 +136,7 @@ const snackbar = useTemplateRef<SnackBarType>('snackbar');
 
 const verifyingByWebAuthn = ref<boolean>(false);
 
-const allLanguages = computed<LanguageOption[]>(() => getAllLanguageOptions(false));
 const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
-const currentLanguageName = computed<string>(() => getCurrentLanguageDisplayName());
 
 function unlockByWebAuthn(): void {
     const webAuthnCredentialId = getWebAuthnCredentialId();
diff --git a/src/views/desktop/VerifyEmailPage.vue b/src/views/desktop/VerifyEmailPage.vue
index 76385ea7..2f56c982 100644
--- a/src/views/desktop/VerifyEmailPage.vue
+++ b/src/views/desktop/VerifyEmailPage.vue
@@ -71,22 +71,7 @@
                         <v-card-text class="pt-0">
                             <v-row>
                                 <v-col cols="12" class="text-center">
-                                    <v-menu location="bottom">
-                                        <template #activator="{ props }">
-                                            <v-btn variant="text"
-                                                   :disabled="resending"
-                                                   v-bind="props">{{ currentLanguageName }}</v-btn>
-                                        </template>
-                                        <v-list>
-                                            <v-list-item v-for="lang in allLanguages" :key="lang.languageTag">
-                                                <v-list-item-title
-                                                    class="cursor-pointer"
-                                                    @click="changeLanguage(lang.languageTag)">
-                                                    {{ lang.displayName }}
-                                                </v-list-item-title>
-                                            </v-list-item>
-                                        </v-list>
-                                    </v-menu>
+                                    <language-select-button :disabled="resending" />
                                 </v-col>
 
                                 <v-col cols="12" class="d-flex align-center pt-0">
@@ -117,11 +102,9 @@ import { ref, computed, useTemplateRef } from 'vue';
 import { useRouter } from 'vue-router';
 import { useTheme } from 'vuetify';
 
-import type { LanguageOption } from '@/locales/index.ts';
 import { useI18n } from '@/locales/helpers.ts';
 
 import { useRootStore } from '@/stores/index.ts';
-import { useSettingsStore } from '@/stores/setting.ts';
 
 import { APPLICATION_LOGO_PATH } from '@/consts/asset.ts';
 import { ThemeType } from '@/core/theme.ts';
@@ -145,10 +128,9 @@ const props = defineProps<{
 const router = useRouter();
 const theme = useTheme();
 
-const { tt, te, getCurrentLanguageDisplayName, getAllLanguageOptions, setLanguage } = useI18n();
+const { tt, te } = useI18n();
 
 const rootStore = useRootStore();
-const settingsStore = useSettingsStore();
 
 const version = `v${getVersion()}`;
 
@@ -161,9 +143,7 @@ const resending = ref<boolean>(false);
 const verified = ref<boolean>(false);
 const errorMessage = ref<string>('');
 
-const allLanguages = computed<LanguageOption[]>(() => getAllLanguageOptions(false));
 const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
-const currentLanguageName = computed<string>(() => getCurrentLanguageDisplayName());
 
 function init(): void {
     verified.value = false;
@@ -210,11 +190,6 @@ function resendEmail(): void {
     });
 }
 
-function changeLanguage(locale: string): void {
-    const localeDefaultSettings = setLanguage(locale);
-    settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
-}
-
 function onSnackbarShowStateChanged(newValue: boolean): void {
     if (!newValue && verified.value && isUserLogined()) {
         router.replace('/');
diff --git a/src/views/desktop/categories/list/dialogs/PresetDialog.vue b/src/views/desktop/categories/list/dialogs/PresetDialog.vue
index 4cac72cc..ab25d069 100644
--- a/src/views/desktop/categories/list/dialogs/PresetDialog.vue
+++ b/src/views/desktop/categories/list/dialogs/PresetDialog.vue
@@ -11,19 +11,8 @@
                     <div class="d-flex align-center mb-1">
                         <h4>{{ getCategoryTypeName(categoryType) }}</h4>
                         <v-spacer/>
-                        <v-menu location="bottom">
-                            <template #activator="{ props }">
-                                <v-btn variant="text" :disabled="submitting"
-                                       v-bind="props">{{ currentLanguageName }}</v-btn>
-                            </template>
-                            <v-list>
-                                <v-list-item :key="lang.languageTag" :value="lang.languageTag" v-for="lang in allLanguages">
-                                    <v-list-item-title class="cursor-pointer" @click="currentLocale = lang.languageTag">
-                                        {{ lang.displayName }}
-                                    </v-list-item-title>
-                                </v-list-item>
-                            </v-list>
-                        </v-menu>
+                        <language-select-button :disabled="submitting"
+                                                :use-model-value="true" v-model="currentLocale" />
                     </div>
 
                     <v-expansion-panels class="border rounded mb-2" variant="accordion" multiple :disabled="submitting">
@@ -76,7 +65,6 @@ import { useI18n } from '@/locales/helpers.ts';
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts';
 
 import type { PartialRecord } from '@/core/base.ts';
-import type { LanguageOption } from '@/locales/index.ts';
 import { type LocalizedPresetCategory, CategoryType } from '@/core/category.ts';
 import { categorizedArrayToPlainArray } from '@/lib/common.ts';
 
@@ -93,7 +81,7 @@ const emit = defineEmits<{
     (e: 'category:saved', event: { message: string }): void;
 }>();
 
-const { tt, getCurrentLanguageTag, getAllLanguageOptions, getAllTransactionDefaultCategories, getLanguageInfo } = useI18n();
+const { tt, getCurrentLanguageTag, getAllTransactionDefaultCategories } = useI18n();
 
 const transactionCategoriesStore = useTransactionCategoriesStore();
 
@@ -102,7 +90,6 @@ const snackbar = useTemplateRef<SnackBarType>('snackbar');
 const currentLocale = ref<string>(getCurrentLanguageTag());
 const submitting = ref<boolean>(false);
 
-const allLanguages = computed<LanguageOption[]>(() => getAllLanguageOptions(false));
 const allPresetCategories = computed<PartialRecord<CategoryType, LocalizedPresetCategory[]>>(() => getAllTransactionDefaultCategories(props.categoryType, currentLocale.value));
 
 const showState = computed<boolean>({
@@ -110,16 +97,6 @@ const showState = computed<boolean>({
     set: (value) => emit('update:show', value)
 });
 
-const currentLanguageName = computed<string>(() => {
-    const languageInfo = getLanguageInfo(currentLocale.value);
-
-    if (!languageInfo) {
-        return '';
-    }
-
-    return languageInfo.displayName;
-});
-
 function getCategoryTypeName(categoryType: CategoryType): string {
     switch (categoryType) {
         case CategoryType.Income:
diff --git a/src/views/desktop/user/settings/tabs/UserBasicSettingTab.vue b/src/views/desktop/user/settings/tabs/UserBasicSettingTab.vue
index 417a336d..8da29458 100644
--- a/src/views/desktop/user/settings/tabs/UserBasicSettingTab.vue
+++ b/src/views/desktop/user/settings/tabs/UserBasicSettingTab.vue
@@ -117,7 +117,7 @@
                         <v-row>
                             <v-col cols="12" md="6">
                                 <v-select
-                                    item-title="displayName"
+                                    item-title="nativeDisplayName"
                                     item-value="languageTag"
                                     persistent-placeholder
                                     :disabled="loading || saving"
@@ -125,7 +125,22 @@
                                     :placeholder="languageTitle"
                                     :items="allLanguages"
                                     v-model="newProfile.language"
-                                />
+                                >
+                                    <template #item="{ props, item }">
+                                        <v-list-item :value="item.value" v-bind="props">
+                                            <template #title>
+                                                <v-list-item-title>
+                                                    <div class="d-flex align-center">
+                                                        <span>{{ item.title }}</span>
+                                                        <v-spacer />
+                                                        <v-icon :icon="mdiCheck" v-if="newProfile.language == item.raw.languageTag" />
+                                                        <span class="text-field-append-text" v-if="newProfile.language !== item.raw.languageTag">{{ item.raw.displayName }}</span>
+                                                    </div>
+                                                </v-list-item-title>
+                                            </template>
+                                        </v-list-item>
+                                    </template>
+                                </v-select>
                             </v-col>
 
                             <v-col cols="12" md="6">
@@ -351,7 +366,8 @@ import { isUserVerifyEmailEnabled } from '@/lib/server_settings.ts';
 
 import {
     mdiAccount,
-    mdiAccountEditOutline
+    mdiAccountEditOutline,
+    mdiCheck
 } from '@mdi/js';
 
 type ConfirmDialogType = InstanceType<typeof ConfirmDialog>;
diff --git a/src/views/mobile/LoginPage.vue b/src/views/mobile/LoginPage.vue
index 867111e0..896bd8d3 100644
--- a/src/views/mobile/LoginPage.vue
+++ b/src/views/mobile/LoginPage.vue
@@ -56,7 +56,7 @@
             </f7-block-footer>
         </f7-list>
 
-        <f7-button small popover-open=".lang-popover-menu" :text="currentLanguageName"></f7-button>
+        <language-select-button />
 
         <f7-list class="login-page-bottom">
             <f7-block-footer>
@@ -76,22 +76,6 @@
             </div>
         </f7-toolbar>
 
-        <f7-popover class="lang-popover-menu">
-            <f7-list dividers>
-                <f7-list-item
-                    link="#" no-chevron popover-close
-                    :title="lang.displayName"
-                    :key="lang.languageTag"
-                    v-for="lang in allLanguages"
-                    @click="changeLanguage(lang.languageTag)"
-                >
-                    <template #after>
-                        <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="currentLanguageCode === lang.languageTag"></f7-icon>
-                    </template>
-                </f7-list-item>
-            </f7-list>
-        </f7-popover>
-
         <f7-sheet
             style="height:auto"
             :opened="show2faSheet" @sheet:closed="show2faSheet = false"
@@ -185,7 +169,6 @@
 import { ref, computed } from 'vue';
 import type { Router } from 'framework7/types';
 
-import type { LanguageOption } from '@/locales/index.ts';
 import { useI18n } from '@/locales/helpers.ts';
 import { useLoginPageBase } from '@/views/base/LoginPageBase.ts';
 
@@ -201,7 +184,7 @@ const props = defineProps<{
     f7router: Router.Router;
 }>();
 
-const { tt, getCurrentLanguageTag, getCurrentLanguageDisplayName, getAllLanguageOptions } = useI18n();
+const { tt } = useI18n();
 const { showAlert, showToast } = useI18nUIComponents();
 
 const rootStore = useRootStore();
@@ -219,7 +202,6 @@ const {
     inputIsEmpty,
     twoFAInputIsEmpty,
     tips,
-    changeLanguage,
     doAfterLogin
 } = useLoginPageBase();
 
@@ -233,9 +215,6 @@ const show2faSheet = ref<boolean>(false);
 const showForgetPasswordSheet = ref<boolean>(false);
 const showVerifyEmailSheet = ref<boolean>(false);
 
-const allLanguages = computed<LanguageOption[]>(() => getAllLanguageOptions(false));
-const currentLanguageCode = computed<string>(() => getCurrentLanguageTag());
-const currentLanguageName = computed<string>(() => getCurrentLanguageDisplayName());
 const twoFAVerifyTypeSwitchName = computed<string>(() => {
     if (twoFAVerifyType.value === 'backupcode') {
         return 'Use Passcode';
diff --git a/src/views/mobile/SignupPage.vue b/src/views/mobile/SignupPage.vue
index cbb2be22..eea849cf 100644
--- a/src/views/mobile/SignupPage.vue
+++ b/src/views/mobile/SignupPage.vue
@@ -61,14 +61,14 @@
             <f7-list-item
                 class="list-item-with-header-and-title list-item-no-item-after"
                 :key="currentLocale + '_lang'"
-                :header="tt('Language')"
+                :header="languageTitle"
                 :title="currentLanguageName"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Language'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Language'), popupCloseLinkText: tt('Done') }"
+                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Language'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: languageTitle, popupCloseLinkText: tt('Done') }"
             >
                 <select v-model="currentLocale">
                     <option :value="lang.languageTag"
                             :key="lang.languageTag"
-                            v-for="lang in allLanguages">{{ lang.displayName }}</option>
+                            v-for="lang in allLanguages">{{ lang.nativeDisplayName }}</option>
                 </select>
             </f7-list-item>
 
@@ -165,7 +165,8 @@
 
             <list-item-selection-sheet value-type="item"
                                        value-field="languageTag"
-                                       title-field="displayName"
+                                       title-field="nativeDisplayName"
+                                       after-field="displayName"
                                        :items="allLanguages"
                                        v-model:show="showPresetCategoriesChangeLocaleSheet"
                                        v-model="currentLocale">
@@ -202,6 +203,7 @@ const { showAlert, showToast } = useI18nUIComponents();
 const {
     user,
     submitting,
+    languageTitle,
     currentLocale,
     currentLanguageName,
     inputEmptyProblemMessage,
diff --git a/src/views/mobile/UnlockPage.vue b/src/views/mobile/UnlockPage.vue
index a567efcf..ddc1d35a 100644
--- a/src/views/mobile/UnlockPage.vue
+++ b/src/views/mobile/UnlockPage.vue
@@ -26,7 +26,7 @@
             </f7-block-footer>
         </f7-list>
 
-        <f7-button small popover-open=".lang-popover-menu" :text="currentLanguageName"></f7-button>
+        <language-select-button />
 
         <f7-list class="login-page-bottom">
             <f7-block-footer>
@@ -45,30 +45,12 @@
                 <span>{{ version }}</span>
             </div>
         </f7-toolbar>
-
-        <f7-popover class="lang-popover-menu">
-            <f7-list dividers>
-                <f7-list-item
-                    link="#" no-chevron popover-close
-                    :title="lang.displayName"
-                    :key="lang.languageTag"
-                    v-for="lang in allLanguages"
-                    @click="changeLanguage(lang.languageTag)"
-                >
-                    <template #after>
-                        <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="currentLanguageCode === lang.languageTag"></f7-icon>
-                    </template>
-                </f7-list-item>
-            </f7-list>
-        </f7-popover>
     </f7-page>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
 import type { Router } from 'framework7/types';
 
-import type { LanguageOption } from '@/locales/index.ts';
 import { useI18n } from '@/locales/helpers.ts';
 import { useI18nUIComponents, showLoading, hideLoading } from '@/lib/ui/mobile.ts';
 import { useUnlockPageBase } from '@/views/base/UnlockPageBase.ts';
@@ -94,17 +76,13 @@ const props = defineProps<{
     f7router: Router.Router;
 }>();
 
-const { tt, getCurrentLanguageTag, getCurrentLanguageDisplayName, getAllLanguageOptions } = useI18n();
+const { tt } = useI18n();
 const { showToast, showConfirm } = useI18nUIComponents();
-const { version, pinCode, isWebAuthnAvailable, isPinCodeValid, changeLanguage, doAfterUnlocked, doRelogin } = useUnlockPageBase();
+const { version, pinCode, isWebAuthnAvailable, isPinCodeValid, doAfterUnlocked, doRelogin } = useUnlockPageBase();
 
 const settingsStore = useSettingsStore();
 const userStore = useUserStore();
 
-const allLanguages = computed<LanguageOption[]>(() => getAllLanguageOptions(false));
-const currentLanguageCode = computed<string>(() => getCurrentLanguageTag());
-const currentLanguageName = computed<string>(() => getCurrentLanguageDisplayName());
-
 function unlockByWebAuthn(): void {
     const router = props.f7router;
     const webAuthnCredentialId = getWebAuthnCredentialId();
diff --git a/src/views/mobile/categories/PresetPage.vue b/src/views/mobile/categories/PresetPage.vue
index 2a96e8dd..a3dc8c1a 100644
--- a/src/views/mobile/categories/PresetPage.vue
+++ b/src/views/mobile/categories/PresetPage.vue
@@ -47,7 +47,8 @@
 
         <list-item-selection-sheet value-type="item"
                                    value-field="languageTag"
-                                   title-field="displayName"
+                                   title-field="nativeDisplayName"
+                                   after-field="displayName"
                                    :items="allLanguages"
                                    v-model:show="showChangeLocaleSheet"
                                    v-model="currentLocale">
diff --git a/src/views/mobile/users/UserProfilePage.vue b/src/views/mobile/users/UserProfilePage.vue
index 400fc006..f55dbdcc 100644
--- a/src/views/mobile/users/UserProfilePage.vue
+++ b/src/views/mobile/users/UserProfilePage.vue
@@ -135,7 +135,7 @@
                 <select v-model="newProfile.language">
                     <option :value="language.languageTag"
                             :key="language.languageTag"
-                            v-for="language in allLanguages">{{ language.displayName }}</option>
+                            v-for="language in allLanguages">{{ language.nativeDisplayName }}</option>
                 </select>
             </f7-list-item>
 
@@ -407,7 +407,7 @@ const showMoreActionSheet = ref<boolean>(false);
 const currentLanguageName = computed<string>(() => {
     for (let i = 0; i < allLanguages.value.length; i++) {
         if (allLanguages.value[i].languageTag === newProfile.value.language) {
-            return allLanguages.value[i].displayName;
+            return allLanguages.value[i].nativeDisplayName;
         }
     }