diff --git a/web/i18n/en.json b/web/i18n/en.json
new file mode 100644
index 000000000..65a0882eb
--- /dev/null
+++ b/web/i18n/en.json
@@ -0,0 +1,5 @@
+{
+  "title": "Download Twake Mail application",
+  "description": "Faster and more convenient",
+  "open": "Open"
+}
\ No newline at end of file
diff --git a/web/i18n/fr.json b/web/i18n/fr.json
new file mode 100644
index 000000000..ebbd0b148
--- /dev/null
+++ b/web/i18n/fr.json
@@ -0,0 +1,5 @@
+{
+  "title": "Télécharger l’application Twake Mail",
+  "description": "Plus rapide et pratique",
+  "open": "Ouvrir"
+}
\ No newline at end of file
diff --git a/web/i18n/translater.js b/web/i18n/translater.js
new file mode 100644
index 000000000..e7b13a592
--- /dev/null
+++ b/web/i18n/translater.js
@@ -0,0 +1,25 @@
+const i18n = {};
+
+function getUserLanguage() {
+  console.info(`[Twake Mail] Current Language: `, navigator.language);
+  return navigator.language.split('-')[0];
+}
+
+async function loadLanguageResources() {
+  try {
+    const language = getUserLanguage();
+    const response = await fetch(`/i18n/${language}.json`);
+    const data = await response.json();
+    i18n[language] = data;
+    console.info(`[Twake Mail] Successfully loaded ${language} resources:`, i18n[language]);
+  } catch (error) {
+    console.error(`[Twake Mail] Error loading ${language} resources:`, error);
+  }
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+  const language = getUserLanguage();
+  document.getElementById('banner-title-id').textContent = i18n[language].title;
+  document.getElementById('banner-description-id').textContent = i18n[language].description;
+  document.getElementById('open-button-id').textContent = i18n[language].open;
+});
\ No newline at end of file
diff --git a/web/i18n/vi.json b/web/i18n/vi.json
new file mode 100644
index 000000000..2c8b0cd60
--- /dev/null
+++ b/web/i18n/vi.json
@@ -0,0 +1,5 @@
+{
+  "title": "Tải ứng dụng Twake Mail",
+  "description": "Nhanh hơn và thuận tiện hơn",
+  "open": "Mở"
+}
\ No newline at end of file