diff --git a/src/features/welcome/components/Sections/ChooseLanguage.jsx b/src/features/welcome/components/Sections/ChooseLanguage.jsx
index a3f3779a..971d4adc 100644
--- a/src/features/welcome/components/Sections/ChooseLanguage.jsx
+++ b/src/features/welcome/components/Sections/ChooseLanguage.jsx
@@ -1,6 +1,7 @@
+import { useMemo } from 'react';
import { MdOutlineOpenInNew } from 'react-icons/md';
import languages from '@/i18n/languages.json';
-import { useT } from 'contexts/TranslationContext';
+import { useT, useTranslation } from 'contexts/TranslationContext';
import variables from 'config/variables';
import { Radio } from 'components/Form/Settings';
@@ -8,9 +9,45 @@ import { Header, Content } from '../Layout';
function ChooseLanguage() {
const t = useT();
+ const { language: currentLanguage } = useTranslation();
const title = t('modals.welcome.sections.language.title');
const description = t('modals.welcome.sections.language.description');
+ const languageOptions = useMemo(() => {
+ const currentLanguageISO = currentLanguage.replace('_', '-');
+ const displayNames = new Intl.DisplayNames([currentLanguageISO], { type: 'language' });
+
+ return languages.map((lang) => {
+ const nativeName = lang.name;
+ const isoCode = lang.value.replace('_', '-');
+
+ let translatedName;
+ try {
+ translatedName = displayNames.of(isoCode);
+ if (translatedName) {
+ translatedName = translatedName.split(' (')[0];
+ }
+ } catch (e) {
+ translatedName = nativeName;
+ }
+
+ const displayName =
+ !translatedName || translatedName === nativeName ? (
+ nativeName
+ ) : (
+ <>
+ {nativeName}{' '}
+ ({translatedName})
+ >
+ );
+
+ return {
+ name: displayName,
+ value: lang.value,
+ };
+ });
+ }, [currentLanguage]);
+
return (
-
+
);