diff --git a/CHANGELOG.md b/CHANGELOG.md
index e40f787f..4c3adfc7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ## 1.0.11
 
 * update chinese translation, thanks @XiangtingLee, fixes [#251](https://github.com/cars10/elasticvue/pull/251)
+* adds french translation, thanks @XNxa, fixes [#250](https://github.com/cars10/elasticvue/pull/250)
 
 ## 1.0.10
 
diff --git a/playwright.config.ts b/playwright.config.ts
index 5714a7f9..9eb01c8f 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -42,10 +42,10 @@ export default defineConfig({
       use: { ...devices['Desktop Firefox'] }
     },
 
-    //{
-    //  name: 'webkit',
-    //  use: { ...devices['Desktop Safari'] },
-    //},
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
 
     /* Test against mobile viewports. */
     // {
diff --git a/src/assets/images/icons/flags/fr.svg b/src/assets/images/icons/flags/fr.svg
new file mode 100644
index 00000000..4ba25065
--- /dev/null
+++ b/src/assets/images/icons/flags/fr.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="900" height="600">
+  <rect width="900" height="600" fill="#ED2939"/>
+  <rect width="600" height="600" fill="#fff"/>
+  <rect width="300" height="600" fill="#002395"/>
+</svg>
diff --git a/src/components/base/LanguageSwitcher.vue b/src/components/base/LanguageSwitcher.vue
index 4991ece6..34c48e48 100644
--- a/src/components/base/LanguageSwitcher.vue
+++ b/src/components/base/LanguageSwitcher.vue
@@ -3,26 +3,19 @@
          data-testid="change-language-button">
     <q-menu>
       <q-list>
-        <q-item v-close-popup
+        <q-item v-for="{code, title, icon} in languages"
+                :key="code"
+                v-close-popup
                 clickable
+                dense
+                
                 active-class="bg-grey-8"
-                :active="store.language === 'en'"
-                :title="t('base.language_switcher.languages.en.title')"
-                data-testid="change-language__english"
-                @click="changeLanguage('en')">
+                :active="store.language === code"
+                :title="title"
+                :data-testid="`change-language__${code}`"
+                @click="changeLanguage(code)">
           <q-item-section>
-            <img :src="en" alt="English" height="16">
-          </q-item-section>
-        </q-item>
-        <q-item v-close-popup
-                clickable
-                active-class="bg-grey-8"
-                :active="store.language === 'cn'"
-                :title="t('base.language_switcher.languages.cn.title')"
-                data-testid="change-language__chinese"
-                @click="changeLanguage('cn')">
-          <q-item-section>
-            <img :src="cn" alt="Chinese" height="16">
+            <img :src="icon" :alt="title" height="16">
           </q-item-section>
         </q-item>
       </q-list>
@@ -33,6 +26,7 @@
 <script setup lang="ts">
   import en from '../../assets/images/icons/flags/en.svg'
   import cn from '../../assets/images/icons/flags/cn.svg'
+  import fr from '../../assets/images/icons/flags/fr.svg'
   import { useI18nStore } from '../../store/i18n'
   import { useTranslation } from '../../composables/i18n.ts'
   import { ValidLocale } from '../../consts.ts'
@@ -46,4 +40,15 @@
     store.setLanguage(lang)
     router.go(0)
   }
+
+  type Language = {
+    code: ValidLocale
+    title: string
+    icon: string
+  }
+  const languages: Language[] = [
+    { code: 'en', title: t('base.language_switcher.languages.en.title'), icon: en },
+    { code: 'cn', title: t('base.language_switcher.languages.cn.title'), icon: cn },
+    { code: 'fr', title: t('base.language_switcher.languages.fr.title'), icon: fr }
+  ]
 </script>
diff --git a/src/consts.ts b/src/consts.ts
index aa29ac02..e873591b 100644
--- a/src/consts.ts
+++ b/src/consts.ts
@@ -8,9 +8,10 @@ export const REQUEST_DEFAULT_HEADERS = {
 export const SUPPORTED_COUNTRY_LOCALES: Record<string, ValidLocale> = {
   en: 'en',
   cn: 'cn',
-  zh: 'cn'
+  zh: 'cn',
+  fr: 'fr'
 }
-export type ValidLocale = 'en' | 'cn'
+export type ValidLocale = 'en' | 'cn' | 'fr'
 export const DEFAULT_LOCALE: ValidLocale = 'en'
 
 export const DEFAULT_ROWS_PER_PAGE = [10, 20, 100, 0]
diff --git a/src/locales/cn.json b/src/locales/cn.json
index 13d3da0c..07434c5b 100644
--- a/src/locales/cn.json
+++ b/src/locales/cn.json
@@ -24,6 +24,9 @@
         },
         "cn": {
           "title": "设置为中文"
+        },
+        "fr": {
+          "title": "法语"
         }
       }
     },
diff --git a/src/locales/en.json b/src/locales/en.json
index 9fc3cea5..9b6a7af4 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -24,6 +24,9 @@
         },
         "cn": {
           "title": "Chinese"
+        },
+        "fr": {
+          "title": "French"
         }
       }
     },
diff --git a/src/plugins/vue-i18n.ts b/src/plugins/vue-i18n.ts
index 246280be..5801ee25 100644
--- a/src/plugins/vue-i18n.ts
+++ b/src/plugins/vue-i18n.ts
@@ -2,6 +2,7 @@
 import { createI18n } from 'vue-i18n'
 import en from '../locales/en.json'
 import cn from '../locales/cn.json'
+import fr from '../locales/fr.json'
 import { useI18nStore } from '../store/i18n'
 
 export const vueI18n = () => {
@@ -15,7 +16,7 @@ export const vueI18n = () => {
     legacy: false,
     locale: language,
     fallbackLocale: 'en',
-    messages: { en, cn },
+    messages: { en, cn, fr },
     warnHtmlMessage: false
   })
 }
diff --git a/tests/e2e/tests/pages/Base.spec.ts b/tests/e2e/tests/pages/Base.spec.ts
index f67db8d6..7c69cedf 100644
--- a/tests/e2e/tests/pages/Base.spec.ts
+++ b/tests/e2e/tests/pages/Base.spec.ts
@@ -33,7 +33,7 @@ test.describe('base', () => {
         await openElasticvue(page)
         page.getByTestId('change-language-button').click()
 
-        await expect(page.getByTestId('change-language__english')).toHaveClass(/q-item--active/)
+        await expect(page.getByTestId('change-language__en')).toHaveClass(/q-item--active/)
       })
     })
   })