diff --git a/src/frontend/apps/e2e/__tests__/app-impress/language.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/language.spec.ts
index b81d7331..cc787605 100644
--- a/src/frontend/apps/e2e/__tests__/app-impress/language.spec.ts
+++ b/src/frontend/apps/e2e/__tests__/app-impress/language.spec.ts
@@ -13,9 +13,11 @@ test.describe('Language', () => {
).toBeVisible();
const header = page.locator('header').first();
- await header.getByRole('combobox').getByText('EN').click();
- await header.getByRole('option', { name: 'FR' }).click();
- await expect(header.getByRole('combobox').getByText('FR')).toBeVisible();
+ await header.getByRole('combobox').getByText('English').click();
+ await header.getByRole('option', { name: 'Français' }).click();
+ await expect(
+ header.getByRole('combobox').getByText('Français'),
+ ).toBeVisible();
await expect(
page.getByRole('button', {
diff --git a/src/frontend/apps/impress/src/features/language/LanguagePicker.tsx b/src/frontend/apps/impress/src/features/language/LanguagePicker.tsx
index e40a8475..8dce8157 100644
--- a/src/frontend/apps/impress/src/features/language/LanguagePicker.tsx
+++ b/src/frontend/apps/impress/src/features/language/LanguagePicker.tsx
@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
import styled from 'styled-components';
import { Box, Text } from '@/components/';
+import { LANGUAGES_ALLOWED } from '@/i18n/conf';
import IconLanguage from './assets/icon-language.svg?url';
@@ -49,7 +50,7 @@ export const LanguagePicker = () => {
$align="center"
>
- {lang.toUpperCase()}
+ {LANGUAGES_ALLOWED[lang]}
),
}));
diff --git a/src/frontend/apps/impress/src/i18n/conf.ts b/src/frontend/apps/impress/src/i18n/conf.ts
index 9b2b1f05..d58f5730 100644
--- a/src/frontend/apps/impress/src/i18n/conf.ts
+++ b/src/frontend/apps/impress/src/i18n/conf.ts
@@ -1,3 +1,6 @@
-export const LANGUAGES_ALLOWED = ['en', 'fr'];
+export const LANGUAGES_ALLOWED: { [key: string]: string } = {
+ en: 'English',
+ fr: 'Français',
+};
export const LANGUAGE_LOCAL_STORAGE = 'impress-language';
export const BASE_LANGUAGE = 'fr';
diff --git a/src/frontend/apps/impress/src/i18n/initI18n.ts b/src/frontend/apps/impress/src/i18n/initI18n.ts
index 7d601c1f..f5a8f4be 100644
--- a/src/frontend/apps/impress/src/i18n/initI18n.ts
+++ b/src/frontend/apps/impress/src/i18n/initI18n.ts
@@ -13,7 +13,7 @@ i18n
interpolation: {
escapeValue: false,
},
- preload: LANGUAGES_ALLOWED,
+ preload: Object.keys(LANGUAGES_ALLOWED),
nsSeparator: '||',
})
.catch(() => {
diff --git a/src/frontend/apps/impress/src/i18n/utils.ts b/src/frontend/apps/impress/src/i18n/utils.ts
index 8b520ca7..edf51715 100644
--- a/src/frontend/apps/impress/src/i18n/utils.ts
+++ b/src/frontend/apps/impress/src/i18n/utils.ts
@@ -22,5 +22,7 @@ export const getLanguage = () => {
const language = splitLocaleCode(languageStore).language;
- return LANGUAGES_ALLOWED.includes(language) ? language : BASE_LANGUAGE;
+ return Object.keys(LANGUAGES_ALLOWED).includes(language)
+ ? language
+ : BASE_LANGUAGE;
};