diff --git a/package-lock.json b/package-lock.json
index 3028fa7..4914281 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,8 @@
       "version": "0.0.0",
       "dependencies": {
         "@picocss/pico": "^2.0.6",
-        "vue": "^3.5.13"
+        "vue": "^3.5.13",
+        "vue-i18n": "^11.0.1"
       },
       "devDependencies": {
         "@types/node": "^22.10.2",
@@ -447,6 +448,50 @@
         "node": ">=18"
       }
     },
+    "node_modules/@intlify/core-base": {
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-11.0.1.tgz",
+      "integrity": "sha512-NAmhw1l/llM0HZRpagR/ChJTNymW4ll6/4EDSJML5c8L5Hl/+k6UyF8EIgE6DeHpfheQujkSRngauViHqq6jJQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/message-compiler": "11.0.1",
+        "@intlify/shared": "11.0.1"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/message-compiler": {
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-11.0.1.tgz",
+      "integrity": "sha512-5RFH8x+Mn3mbjcHXnb6KCXGiczBdiQkWkv99iiA0JpKrNuTAQeW59Pjq/uObMB0eR0shnKYGTkIJxum+DbL3sw==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/shared": "11.0.1",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/shared": {
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-11.0.1.tgz",
+      "integrity": "sha512-lH164+aDDptHZ3dBDbIhRa1dOPQUp+83iugpc+1upTOWCnwyC1PVis6rSWNMMJ8VQxvtHQB9JMib48K55y0PvQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
@@ -823,6 +868,12 @@
         "he": "^1.2.0"
       }
     },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
+      "license": "MIT"
+    },
     "node_modules/@vue/language-core": {
       "version": "2.1.10",
       "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.1.10.tgz",
@@ -1223,15 +1274,16 @@
       "dev": true
     },
     "node_modules/nanoid": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
-      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "version": "3.3.8",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
+      "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
       "funding": [
         {
           "type": "github",
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -1539,6 +1591,26 @@
         }
       }
     },
+    "node_modules/vue-i18n": {
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-11.0.1.tgz",
+      "integrity": "sha512-pWAT8CusK8q9/EpN7V3oxwHwxWm6+Kp2PeTZmRGvdZTkUzMQDpbbmHp0TwQ8xw04XKm23cr6B4GL72y3W8Yekg==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/core-base": "11.0.1",
+        "@intlify/shared": "11.0.1",
+        "@vue/devtools-api": "^6.5.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue-tsc": {
       "version": "2.1.10",
       "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.1.10.tgz",
diff --git a/package.json b/package.json
index 3320d39..fb8a398 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "@picocss/pico": "^2.0.6",
-    "vue": "^3.5.13"
+    "vue": "^3.5.13",
+    "vue-i18n": "^11.0.1"
   },
   "devDependencies": {
     "@types/node": "^22.10.2",
diff --git a/src/App.vue b/src/App.vue
index 079405e..23787d2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,6 +5,9 @@ import TraitInput from './components/TraitInput.vue';
 import StatInput from './components/StatInput.vue';
 import { isNumberInput } from './helpers/validation';
 import HelpPopup from './components/HelpPopup.vue';
+import { useI18n } from '@/hooks/useI18n';
+
+const { t } = useI18n();
 
 const levelUps = [4, 8, 15, 25, 30, 35, 40, 45, 50, 55]; // NoSonar these are given by the game
 
@@ -18,8 +21,14 @@ const traitValues = ref<number[]>([0]);
 const addTrait = () => traitValues.value.push(0);
 const removeTrait = (index: number) => (traitValues.value = traitValues.value.filter((_, idx) => idx !== index));
 
-const stats = ['Combat', 'Exploration', 'Industrial', 'Trade'];
-const statValues = ref<number[]>(Array.from({ length: stats.length }, () => 0));
+const stats = computed(() => [
+  t('translation.combat'),
+  t('translation.exploration'),
+  t('translation.industrial'),
+  t('translation.trade'),
+]);
+
+const statValues = ref<number[]>(Array.from({ length: stats.value.length }, () => 0));
 
 const expeditionCount = ref(0);
 const isExpeditionCountValid = computed(() => isNumberInput(expeditionCount.value.toString()));
@@ -62,14 +71,14 @@ const progressClassName = computed(() => {
 <template>
   <header>
     <NavBar />
-    <h1 class="text-center">Frigate Calculator</h1>
+    <h1 class="text-center">{{ t('translation.title') }}</h1>
   </header>
 
   <main>
     <form @submit.prevent>
       <fieldset>
         <legend>
-          <span>Raw Frigate Stats</span>
+          <span>{{ t('translation.statsField') }}</span>
           <HelpPopup input="stats" />
         </legend>
 
@@ -80,12 +89,12 @@ const progressClassName = computed(() => {
             :placeholder="stat"
           />
         </div>
-        <p>Total Base Stats: {{ combinedStats }}</p>
+        <p>{{ t('translation.totalbaseStats') }} {{ combinedStats }}</p>
       </fieldset>
 
       <fieldset>
         <legend>
-          <span>Traits (except Fuel & Duration)</span>
+          <span>{{ t('translation.traitsField') }}</span>
           <HelpPopup input="traits" />
         </legend>
         <div class="trait-list">
@@ -100,28 +109,29 @@ const progressClassName = computed(() => {
           class="add-trait-button"
           @click="addTrait"
         >
-          Add Trait
+          {{ t('translation.addtrait') }}
         </button>
-        <p>Total Bonus Points: {{ combinedTraits }}</p>
+        <p>{{ t('translation.totalBonusPoints') }} {{ combinedTraits }}</p>
       </fieldset>
 
       <fieldset>
         <legend>
-          <span>Amount of Expeditions</span>
+          <span>{{ t('translation.expAmmount') }}</span>
           <HelpPopup input="expeditions" />
         </legend>
         <input
           v-model.trim.number="expeditionCount"
           :aria-invalid="!isExpeditionCountValid || undefined"
           type="text"
-          placeholder="Expeditions"
+          :placeholder="t('translation.expeditions')"
         />
-        <p>Total Rank-Ups: {{ calculatedExpeditionLevel }}</p>
+
+        <p>{{ t('translation.totalRankUps') }} {{ calculatedExpeditionLevel }}</p>
       </fieldset>
     </form>
 
     <p>
-      Frigate score (-5 – 14): <output class="text-bold">{{ calculatedBaseStat }}</output>
+      {{ t('translation.frigscore') }} <output class="text-bold">{{ calculatedBaseStat }}</output>
     </p>
 
     <progress
@@ -136,7 +146,7 @@ const progressClassName = computed(() => {
 
   <footer>
     <div class="credits text-center">
-      Forked from nms-frigate-calc by
+      {{ t('translation.forkedfrom') }}
       <a
         href="https://github.com/gander/"
         target="_blank"
@@ -146,7 +156,7 @@ const progressClassName = computed(() => {
       (<a
         href="https://nms.gander.tools/"
         target="_blank"
-        >Website</a
+        >{{ t('translation.website') }}</a
       >
       |
       <a
@@ -157,20 +167,20 @@ const progressClassName = computed(() => {
     </div>
 
     <div class="sources">
-      <p>Formula sources:</p>
+      <p>{{ t('translation.formula') }}</p>
       <ul>
         <li>
           <a
             href="https://steamcommunity.com/sharedfiles/filedetails/?id=1505175794"
             target="_blank"
-            >Frigate Buyer's Guide - How to Pick the Best Ships (and avoid "Lemons")</a
+            >{{ t('translation.buyersguide') }}</a
           >
         </li>
         <li>
           <a
             href="https://www.reddit.com/r/NoMansSkyTheGame/comments/knjokc/a_guide_to_evaluating_frigate_stats/"
             target="_blank"
-            >A Guide to Evaluating Frigate Stats</a
+            >{{ t('translation.guide') }}</a
           >
         </li>
       </ul>
diff --git a/src/components/HelpPopup.vue b/src/components/HelpPopup.vue
index 7f4d687..7c639e9 100644
--- a/src/components/HelpPopup.vue
+++ b/src/components/HelpPopup.vue
@@ -1,11 +1,14 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import expeditionHelp from '@/assets/expeditions.webp';
 import statsHelp from '@/assets/stats.webp';
 import traitsHelp from '@/assets/traits.webp';
 import { useActiveElement } from '@vueuse/core';
+import { useI18n } from '@/hooks/useI18n';
 
-defineProps<{
+const { t } = useI18n();
+
+const props = defineProps<{
   input: 'expeditions' | 'stats' | 'traits';
 }>();
 
@@ -27,16 +30,26 @@ const showModal = () => {
   openedOnce.value = true;
 };
 const closeModal = () => dialog.value?.close();
+
+const translatedInput = computed(() => {
+  const translations: Record<string, string> = {
+    expeditions: t('translation.expeditions'),
+    stats: t('translation.stats'),
+    traits: t('translation.traits'),
+  };
+
+  return translations[props.input] ?? 'Unknown value';
+});
 </script>
 
 <template>
   <button
     class="help-button"
-    data-tooltip="Help"
+    :data-tooltip="t('translation.help')"
     @click="showModal"
   >
     <img
-      alt="Help"
+      :alt="t('translation.help')"
       class="help-icon"
       loading="lazy"
       src="../assets/help.svg"
@@ -50,11 +63,11 @@ const closeModal = () => dialog.value?.close();
       <article>
         <header>
           <button
-            aria-label="Close"
+            :aria-label="t('translation.close')"
             class="close"
             @click="closeModal"
           ></button>
-          <p class="text-bold">Where to find {{ input }}</p>
+          <p class="text-bold">{{ t('translation.wheretofind') }} {{ translatedInput }}</p>
         </header>
         <div class="transition-container">
           <div
@@ -68,7 +81,7 @@ const closeModal = () => dialog.value?.close();
             <Transition>
               <img
                 v-if="openedOnce"
-                :alt="`Where to find ${input}`"
+                :alt="`${t('translation.wheretofind')} ${translatedInput}`"
                 :src="imageMapping[input]"
                 loading="lazy"
                 @load="isLoading = false"
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 4df2ab4..adef678 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -1,5 +1,15 @@
 <script setup lang="ts">
+import { watch, ref } from 'vue';
 import ThemeSwitch from './ThemeSwitch.vue';
+import { useI18n } from '@/hooks/useI18n';
+const { t, locale, availableLocales } = useI18n();
+
+const selectedLocale = ref(locale.value);
+
+watch(selectedLocale, (newVal) => {
+  locale.value = newVal;
+  localStorage.setItem('lang', newVal);
+});
 </script>
 
 <template>
@@ -8,12 +18,24 @@ import ThemeSwitch from './ThemeSwitch.vue';
       <li>
         <a
           href=".."
-          title="View other pages"
-          >← View other pages</a
+          :title="t('translation.viewother')"
         >
+          ← {{ t('translation.viewother') }}
+        </a>
       </li>
     </ul>
     <ul>
+      <li>
+        <select v-model="selectedLocale">
+          <option
+            v-for="loc in availableLocales"
+            :key="`locale-${loc}`"
+            :value="loc"
+          >
+            {{ loc }}
+          </option>
+        </select>
+      </li>
       <li>
         <ThemeSwitch />
       </li>
diff --git a/src/components/ThemeSwitch.vue b/src/components/ThemeSwitch.vue
index 26981e2..b655bcd 100644
--- a/src/components/ThemeSwitch.vue
+++ b/src/components/ThemeSwitch.vue
@@ -1,10 +1,13 @@
 <script setup lang="ts">
 import { useDark, useToggle } from '@vueuse/core';
+import { useI18n } from '@/hooks/useI18n';
+
+const { t } = useI18n();
 
 const isDark = useDark({ attribute: 'data-theme' });
 const toggleDark = useToggle(isDark);
 </script>
 
 <template>
-  <button @click="toggleDark()">Switch Theme</button>
+  <button @click="toggleDark()">{{ t('translation.switchtheme') }}</button>
 </template>
diff --git a/src/components/TraitInput.vue b/src/components/TraitInput.vue
index a23eeda..ee5e047 100644
--- a/src/components/TraitInput.vue
+++ b/src/components/TraitInput.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { isNumberInput } from '@/helpers/validation';
 import { computed } from 'vue';
+import { useI18n } from '@/hooks/useI18n';
+
+const { t } = useI18n();
 
 const emit = defineEmits(['remove']);
 
@@ -14,7 +17,7 @@ const isValidInput = computed(() => isNumberInput(model.value.toString()));
     <input
       v-model.trim.number="model"
       :aria-invalid="!isValidInput || undefined"
-      placeholder="Trait Value"
+      :placeholder="t('translation.traitvalue')"
       type="text"
     />
     <button
diff --git a/src/hooks/useI18n.ts b/src/hooks/useI18n.ts
new file mode 100644
index 0000000..514eda4
--- /dev/null
+++ b/src/hooks/useI18n.ts
@@ -0,0 +1,38 @@
+import { i18n, messages } from '@/i18n';
+
+type Join<FirstType, SecondType> = FirstType extends string | number
+  ? SecondType extends string | number
+    ? `${FirstType}${'' extends SecondType ? '' : '.'}${SecondType}`
+    : never
+  : never;
+
+/**
+ * Helper type that transforms an object tree into a union type of all possibles leaves.
+ */
+type Leaves<ObjectType> =
+  ObjectType extends Record<string, unknown>
+    ? // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      { [Key in keyof ObjectType]-?: Join<Key, Leaves<ObjectType[Key]>> }[keyof ObjectType]
+    : '';
+
+export type I18NLeaves = Leaves<(typeof messages)['Español']>;
+
+// This function adds type safety to the i18n t function.
+export function useI18n() {
+  // eslint-disable-next-line @typescript-eslint/unbound-method
+  const { t, te, d, n, tm, rt, ...globalApi } = i18n.global;
+
+  type RemoveFirstFromTuple<T extends unknown[]> = ((...b: T) => void) extends (...b: infer I) => void ? I : [];
+
+  const typedT = t as (...args: [I18NLeaves, ...Partial<RemoveFirstFromTuple<Parameters<typeof t>>>]) => string;
+
+  return {
+    t: typedT.bind(i18n),
+    d: d.bind(i18n),
+    te: te.bind(i18n),
+    tm: tm.bind(i18n),
+    rt: rt.bind(i18n),
+    n: n.bind(i18n),
+    ...globalApi,
+  };
+}
diff --git a/src/i18n/en-EN/index.ts b/src/i18n/en-EN/index.ts
new file mode 100644
index 0000000..91c9fd6
--- /dev/null
+++ b/src/i18n/en-EN/index.ts
@@ -0,0 +1,5 @@
+import translation from './translation';
+
+export default {
+  translation,
+};
diff --git a/src/i18n/en-EN/translation.ts b/src/i18n/en-EN/translation.ts
new file mode 100644
index 0000000..b5cb8ad
--- /dev/null
+++ b/src/i18n/en-EN/translation.ts
@@ -0,0 +1,29 @@
+export default {
+  viewother: 'View other pages',
+  switchtheme: 'Switch Theme',
+  title: 'Frigate Calculator',
+  statsField: 'Raw Frigate Stats',
+  traitsField: 'Traits (except Fuel & Duration)',
+  combat: 'Combat',
+  exploration: 'Exploration',
+  industrial: 'Industrial',
+  trade: 'Trade',
+  totalbaseStats: 'Total Base Stats:',
+  expAmmount: 'Amount of Expeditions',
+  totalRankUps: "Total Rank-Ups:",
+  expeditions: 'Expeditions',
+  addtrait: 'Add Trait',
+  traitvalue: 'Trait Value',
+  totalBonusPoints: 'Total Bonus Points:',
+  frigscore: 'Frigate score (-5 – 14):',
+  forkedfrom: 'Forked from nms-frigate-calc by',
+  website: 'Website',
+  guide: 'A Guide to Evaluating Frigate Stats',
+  formula: 'Formula sources:',
+  buyersguide: "Frigate Buyer's Guide - How to Pick the Best Ships (and avoid \"Lemons\")",
+  help: 'Help',
+  close: 'Close',
+  wheretofind: 'Where to find',
+  stats: "Stats",
+  traits: "Traits"
+};
diff --git a/src/i18n/es-ES/index.ts b/src/i18n/es-ES/index.ts
new file mode 100644
index 0000000..91c9fd6
--- /dev/null
+++ b/src/i18n/es-ES/index.ts
@@ -0,0 +1,5 @@
+import translation from './translation';
+
+export default {
+  translation,
+};
diff --git a/src/i18n/es-ES/translation.ts b/src/i18n/es-ES/translation.ts
new file mode 100644
index 0000000..f92451a
--- /dev/null
+++ b/src/i18n/es-ES/translation.ts
@@ -0,0 +1,29 @@
+export default {
+  viewother: 'Ver otras páginas',
+  switchtheme: 'Cambiar tema',
+  title: 'Calculadora de Fragatas',
+  statsField: 'Estadísticas de la Fragata',
+  traitsField: 'Rasgos (excepto Combustible & Duración)',
+  combat: 'Combate',
+  exploration: 'Exploración',
+  industrial: 'Industrial',
+  trade: 'Comercio',
+  totalbaseStats: 'Estadísticas Base Totales:',
+  expAmmount: 'Cantidad de Expediciones',
+  totalRankUps: "Subidas de Clase Totales:",
+  expeditions: 'Expediciones',
+  addtrait: 'Añadir Rasgo',
+  traitvalue: 'Valor del Rasgo',
+  totalBonusPoints: 'Puntos Totales de Bonus:',
+  frigscore: 'Puntuación de la Fragata (-5 – 14):',
+  forkedfrom: 'Bifurcado de nms-frigate-calc por',
+  website: 'Página Web',
+  guide: 'Una Guía para Evaluar las Estadísticas de las Fragatas',
+  formula: 'Fuente Fórmulas:',
+  buyersguide: "Guía de Compra de Fragatas: Cómo Elegir las Mejores Naves (y Evitar los \“limones”\)",
+  help: 'Ayuda',
+  close: 'Cerrar',
+  wheretofind: 'Dónde Encontrar',
+  stats: "Estadisticas",
+  traits: "Rasgos",
+};
diff --git a/src/i18n/eu-EU/index.ts b/src/i18n/eu-EU/index.ts
new file mode 100644
index 0000000..91c9fd6
--- /dev/null
+++ b/src/i18n/eu-EU/index.ts
@@ -0,0 +1,5 @@
+import translation from './translation';
+
+export default {
+  translation,
+};
diff --git a/src/i18n/eu-EU/translation.ts b/src/i18n/eu-EU/translation.ts
new file mode 100644
index 0000000..6711cee
--- /dev/null
+++ b/src/i18n/eu-EU/translation.ts
@@ -0,0 +1,29 @@
+export default {
+  viewother: 'Ikusi beste orrialde batzuk',
+  switchtheme: 'Itxura aldatu',
+  title: 'Fragata-kalkulagailua',
+  statsField: 'Fragataren estatistikak',
+  traitsField: 'Ezaugarriak (erregaia eta iraupena izan ezik)',
+  combat: 'Borroka',
+  exploration: 'Esplorazioa',
+  Industriala: 'industriala',
+  trade: 'Merkataritza',
+  totalbaseStats: 'Oinarrizko estatistikak guztira:',
+  expAmmount: 'Espedizio kopurua',
+  totalRankUps: "Klase igoerak guztira:",
+  expeditions: 'Espedizioak',
+  addtrait: 'Gehitu ezaugarria',
+  traitvalue: 'Ezaugarriaren balioa',
+  totalBonusPoints: 'Bonus puntuak guztira:',
+  frigscore: 'Fragataren puntuazioa (-5 – 14):',
+  forkedfrom: 'Nms-frigate-calc-en adarkatzea',
+  website: 'Web orria',
+  guide: 'Fragaten estatistikak ebaluatzeko gida',
+  formula: 'Formulen iturria:',
+  buyersguide: "Fragatak erosteko gida: nola aukeratu ontzirik onenak (eta saihestu \“limoiak”\)",
+  help: 'Ayuda',
+  close: 'Cerrar',
+  wheretofind: 'Non Aurkitu',
+  stats: "Estatistikak",
+  traits: "Ezaugarriak",
+};
diff --git a/src/i18n/index.ts b/src/i18n/index.ts
new file mode 100644
index 0000000..5f0e26f
--- /dev/null
+++ b/src/i18n/index.ts
@@ -0,0 +1,33 @@
+import { createI18n } from 'vue-i18n';
+import Español from './es-ES';
+import English from './en-EN';
+import Euskara from './eu-EU';
+
+const messages = {
+  Español,
+  English,
+  Euskara,
+};
+
+const languageMap = {
+  Español: ['es', 'es-ES'],
+  English: ['en', 'en-EN', 'en-GB', 'en-US'],
+  Euskara: ['eu', 'eu-EU'],
+};
+
+const langEntries = Object.entries(languageMap);
+const preferredUserLang = navigator.language;
+
+const userLang =
+  langEntries.find((lang) => lang[1].some((langCode) => langCode === preferredUserLang))?.[0] ?? 'English';
+
+const localStorageLang = localStorage.getItem('lang');
+const preferredLang = localStorageLang ?? userLang;
+
+const i18n = createI18n({
+  locale: preferredLang,
+  legacy: false,
+  messages,
+});
+
+export { i18n, messages };
diff --git a/src/main.ts b/src/main.ts
index b070c89..498f1ef 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -4,5 +4,4 @@ import { createApp } from 'vue';
 import App from './App.vue';
 
 const app = createApp(App);
-
 app.mount('#app');