diff --git a/astro.config.mjs b/astro.config.mjs
index 40df501..8cc48b5 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -9,7 +9,7 @@ export default defineConfig({
   site: 'https://zen-browser.app',
   i18n: {
     defaultLocale: 'en',
-    locales: ['en'],
+    locales: ['en', 'ja'],
     routing: {
       fallbackType: 'rewrite',
       prefixDefaultLocale: false,
diff --git a/package-lock.json b/package-lock.json
index c0d40b3..ef516f5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,67 +8,65 @@
       "name": "www",
       "version": "0.0.1",
       "dependencies": {
-        "@astrojs/check": "^0.9.4",
-        "@astrojs/cloudflare": "^12.5.2",
+        "@astrojs/check": "0.9.4",
+        "@astrojs/cloudflare": "12.5.2",
         "@astrojs/react": "^4.3.0",
-        "@astrojs/rss": "^4.0.11",
-        "@astrojs/sitemap": "^3.3.1",
-        "@astrojs/tailwind": "^6.0.2",
-        "@fontsource/bricolage-grotesque": "^5.1.0",
-        "@fortawesome/fontawesome-svg-core": "^6.7.1",
-        "@fortawesome/free-brands-svg-icons": "^6.7.1",
-        "@fortawesome/free-solid-svg-icons": "^6.7.1",
+        "@astrojs/rss": "4.0.11",
+        "@astrojs/sitemap": "3.3.1",
+        "@astrojs/tailwind": "6.0.2",
+        "@fontsource/bricolage-grotesque": "5.1.0",
+        "@fortawesome/fontawesome-svg-core": "6.7.1",
+        "@fortawesome/free-brands-svg-icons": "6.7.1",
+        "@fortawesome/free-solid-svg-icons": "6.7.1",
         "@types/react": "^19.1.6",
         "@types/react-dom": "^19.1.5",
-        "astro": "^5.7.10",
-        "astro-navbar": "^2.3.7",
+        "astro": "5.7.10",
+        "astro-navbar": "2.3.7",
         "autoprefixer": "10.4.14",
-        "clsx": "^2.1.1",
-        "date-fns": "^4.1.0",
-        "free-astro-components": "^1.2.0",
-        "lucide-astro": "^0.460.0",
-        "lucide-react": "^0.475.0",
-        "motion": "^11.13.5",
-        "postcss": "^8.5.1",
+        "clsx": "2.1.1",
+        "date-fns": "4.1.0",
+        "free-astro-components": "1.2.0",
+        "motion": "^12.15.0",
+        "postcss": "8.5.1",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
-        "sharp": "^0.33.5",
-        "tailwind-merge": "^3.3.0",
-        "tailwindcss": "^3.4.15",
-        "typescript": "^5.6.3"
+        "sharp": "0.33.5",
+        "tailwind-merge": "3.3.0",
+        "tailwindcss": "3.4.15",
+        "typescript": "5.6.3"
       },
       "devDependencies": {
-        "@eslint/compat": "^1.2.9",
-        "@eslint/eslintrc": "^3.3.1",
-        "@eslint/js": "^9.27.0",
-        "@playwright/test": "^1.52.0",
-        "@testing-library/jest-dom": "^6.6.3",
-        "@testing-library/user-event": "^14.6.1",
-        "@types/eslint-plugin-jsx-a11y": "^6.10.0",
-        "@types/jsdom": "^21.1.7",
-        "@types/node": "^22.15.18",
-        "@typescript-eslint/eslint-plugin": "^8.33.0",
-        "@typescript-eslint/parser": "^8.33.0",
-        "@typescript-eslint/utils": "^8.33.0",
-        "@vitest/coverage-istanbul": "^3.1.3",
-        "eslint": "^9.27.0",
-        "eslint-config-prettier": "^10.1.5",
-        "eslint-import-resolver-typescript": "^4.4.1",
-        "eslint-plugin-astro": "^1.3.1",
-        "eslint-plugin-import": "^2.31.0",
-        "eslint-plugin-jsx-a11y": "^6.10.2",
-        "eslint-plugin-react": "^7.37.5",
-        "eslint-plugin-react-hooks": "^5.2.0",
-        "husky": "^9.1.7",
-        "jsdom": "^26.1.0",
-        "lint-staged": "^15.2.7",
+        "@eslint/compat": "1.2.9",
+        "@eslint/eslintrc": "3.3.1",
+        "@eslint/js": "9.27.0",
+        "@playwright/test": "1.52.0",
+        "@testing-library/jest-dom": "6.6.3",
+        "@testing-library/user-event": "14.6.1",
+        "@types/eslint-plugin-jsx-a11y": "6.10.0",
+        "@types/jsdom": "21.1.7",
+        "@types/node": "22.15.18",
+        "@typescript-eslint/eslint-plugin": "8.33.0",
+        "@typescript-eslint/parser": "8.33.0",
+        "@typescript-eslint/utils": "8.33.0",
+        "@vitest/coverage-istanbul": "3.1.3",
+        "eslint": "9.27.0",
+        "eslint-config-prettier": "10.1.5",
+        "eslint-import-resolver-typescript": "4.4.1",
+        "eslint-plugin-astro": "1.3.1",
+        "eslint-plugin-import": "2.31.0",
+        "eslint-plugin-jsx-a11y": "6.10.2",
+        "eslint-plugin-react": "7.37.5",
+        "eslint-plugin-react-hooks": "5.2.0",
+        "husky": "9.1.7",
+        "jsdom": "26.1.0",
+        "lint-staged": "15.2.7",
         "prettier": "3.5.3",
         "prettier-plugin-astro": "0.14.1",
-        "prettier-plugin-tailwindcss": "^0.6.11",
-        "typescript-eslint": "^8.33.0",
-        "vite-tsconfig-paths": "^5.1.4",
-        "vitest": "^3.1.3",
-        "wrangler": "^4.17.0"
+        "prettier-plugin-tailwindcss": "0.6.11",
+        "typescript-eslint": "8.33.0",
+        "vite-tsconfig-paths": "5.1.4",
+        "vitest": "3.1.3",
+        "wrangler": "4.17.0"
       }
     },
     "node_modules/@adobe/css-tools": {
@@ -143,17 +141,17 @@
       }
     },
     "node_modules/@astrojs/cloudflare": {
-      "version": "12.5.3",
-      "resolved": "https://registry.npmjs.org/@astrojs/cloudflare/-/cloudflare-12.5.3.tgz",
-      "integrity": "sha512-QYA6gkF+s3LpDNT0KoURgJeByjiSvUABK1VXBpi9yzqUQfWm3kSAtn0aBXX8EkRlE5UaJ0CkArizfgfqr9zBhA==",
+      "version": "12.5.2",
+      "resolved": "https://registry.npmjs.org/@astrojs/cloudflare/-/cloudflare-12.5.2.tgz",
+      "integrity": "sha512-zhqBJmy0zXqpniWuAbpWY6CCNdkq3Olm2LMHv0lryvY6CUFcZbDzTK225zgz//r5zPj8ty1qbvWRnXgCaiaaYQ==",
       "license": "MIT",
       "dependencies": {
         "@astrojs/internal-helpers": "0.6.1",
         "@astrojs/underscore-redirects": "0.6.1",
-        "@cloudflare/workers-types": "^4.20250507.0",
-        "tinyglobby": "^0.2.13",
-        "vite": "^6.3.5",
-        "wrangler": "^4.14.1"
+        "@cloudflare/workers-types": "^4.20250327.0",
+        "tinyglobby": "^0.2.12",
+        "vite": "^6.3.4",
+        "wrangler": "^4.5.1"
       },
       "peerDependencies": {
         "astro": "^5.0.0"
@@ -213,13 +211,13 @@
       }
     },
     "node_modules/@astrojs/markdown-remark": {
-      "version": "6.3.2",
-      "resolved": "https://registry.npmjs.org/@astrojs/markdown-remark/-/markdown-remark-6.3.2.tgz",
-      "integrity": "sha512-bO35JbWpVvyKRl7cmSJD822e8YA8ThR/YbUsciWNA7yTcqpIAL2hJDToWP5KcZBWxGT6IOdOkHSXARSNZc4l/Q==",
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@astrojs/markdown-remark/-/markdown-remark-6.3.1.tgz",
+      "integrity": "sha512-c5F5gGrkczUaTVgmMW9g1YMJGzOtRvjjhw6IfGuxarM6ct09MpwysP10US729dy07gg8y+ofVifezvP3BNsWZg==",
       "license": "MIT",
       "dependencies": {
         "@astrojs/internal-helpers": "0.6.1",
-        "@astrojs/prism": "3.3.0",
+        "@astrojs/prism": "3.2.0",
         "github-slugger": "^2.0.0",
         "hast-util-from-html": "^2.0.3",
         "hast-util-to-text": "^4.0.2",
@@ -230,9 +228,9 @@
         "rehype-stringify": "^10.0.1",
         "remark-gfm": "^4.0.1",
         "remark-parse": "^11.0.0",
-        "remark-rehype": "^11.1.2",
+        "remark-rehype": "^11.1.1",
         "remark-smartypants": "^3.0.2",
-        "shiki": "^3.2.1",
+        "shiki": "^3.0.0",
         "smol-toml": "^1.3.1",
         "unified": "^11.0.5",
         "unist-util-remove-position": "^5.0.0",
@@ -242,15 +240,15 @@
       }
     },
     "node_modules/@astrojs/prism": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/@astrojs/prism/-/prism-3.3.0.tgz",
-      "integrity": "sha512-q8VwfU/fDZNoDOf+r7jUnMC2//H2l0TuQ6FkGJL8vD8nw/q5KiL3DS1KKBI3QhI9UQhpJ5dc7AtqfbXWuOgLCQ==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@astrojs/prism/-/prism-3.2.0.tgz",
+      "integrity": "sha512-GilTHKGCW6HMq7y3BUv9Ac7GMe/MO9gi9GW62GzKtth0SwukCu/qp2wLiGpEujhY+VVhaG9v7kv/5vFzvf4NYw==",
       "license": "MIT",
       "dependencies": {
-        "prismjs": "^1.30.0"
+        "prismjs": "^1.29.0"
       },
       "engines": {
-        "node": "18.20.8 || ^20.3.0 || >=22.0.0"
+        "node": "^18.17.1 || ^20.3.0 || >=22.0.0"
       }
     },
     "node_modules/@astrojs/react": {
@@ -284,9 +282,9 @@
       }
     },
     "node_modules/@astrojs/sitemap": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/@astrojs/sitemap/-/sitemap-3.4.0.tgz",
-      "integrity": "sha512-C5m/xsKvRSILKM3hy47n5wKtTQtJXn8epoYuUmCCstaE9XBt20yInym3Bz2uNbEiNfv11bokoW0MqeXPIvjFIQ==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@astrojs/sitemap/-/sitemap-3.3.1.tgz",
+      "integrity": "sha512-GRnDUCTviBSNfXJ0Jmur+1/C+z3g36jy79VyYggfe1uNyEYSTcmAfTTCmbytrRvJRNyJJnSfB/77Gnm9PiXRRg==",
       "license": "MIT",
       "dependencies": {
         "sitemap": "^8.0.0",
@@ -346,10 +344,38 @@
         "postcss": "^8.1.0"
       }
     },
+    "node_modules/@astrojs/tailwind/node_modules/postcss": {
+      "version": "8.5.3",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
+      "integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.8",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
     "node_modules/@astrojs/telemetry": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/@astrojs/telemetry/-/telemetry-3.3.0.tgz",
-      "integrity": "sha512-UFBgfeldP06qu6khs/yY+q1cDAaArM2/7AEIqQ9Cuvf7B1hNLq0xDrZkct+QoIGyjq56y8IaE2I3CTvG99mlhQ==",
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@astrojs/telemetry/-/telemetry-3.2.1.tgz",
+      "integrity": "sha512-SSVM820Jqc6wjsn7qYfV9qfeQvePtVc1nSofhyap7l0/iakUKywj3hfy3UJAOV4sGV4Q/u450RD4AaCaFvNPlg==",
       "license": "MIT",
       "dependencies": {
         "ci-info": "^4.2.0",
@@ -361,7 +387,7 @@
         "which-pm-runs": "^1.1.0"
       },
       "engines": {
-        "node": "18.20.8 || ^20.3.0 || >=22.0.0"
+        "node": "^18.17.1 || ^20.3.0 || >=22.0.0"
       }
     },
     "node_modules/@astrojs/underscore-redirects": {
@@ -1576,54 +1602,51 @@
       }
     },
     "node_modules/@fontsource/bricolage-grotesque": {
-      "version": "5.2.7",
-      "resolved": "https://registry.npmjs.org/@fontsource/bricolage-grotesque/-/bricolage-grotesque-5.2.7.tgz",
-      "integrity": "sha512-ql0TatHgaYqJy66qSPT0V53RYzfBPAv1P+0j1an5ErcdrnDXkuX3ZWXbUXHe3jK676APcyeV1uGCQeGPzCSd3g==",
-      "license": "OFL-1.1",
-      "funding": {
-        "url": "https://github.com/sponsors/ayuhito"
-      }
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@fontsource/bricolage-grotesque/-/bricolage-grotesque-5.1.0.tgz",
+      "integrity": "sha512-kdZyXbftmi09GjewApG5z7KVbcz5ZXNvFUguKodNtOe34j9F3Hp7dWjcZNqMt/o4BtBKZBBLM4MjAVE+DrQpng==",
+      "license": "OFL-1.1"
     },
     "node_modules/@fortawesome/fontawesome-common-types": {
-      "version": "6.7.2",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.7.2.tgz",
-      "integrity": "sha512-Zs+YeHUC5fkt7Mg1l6XTniei3k4bwG/yo3iFUtZWd/pMx9g3fdvkSK9E0FOC+++phXOka78uJcYb8JaFkW52Xg==",
+      "version": "6.7.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.7.1.tgz",
+      "integrity": "sha512-gbDz3TwRrIPT3i0cDfujhshnXO9z03IT1UKRIVi/VEjpNHtSBIP2o5XSm+e816FzzCFEzAxPw09Z13n20PaQJQ==",
       "license": "MIT",
       "engines": {
         "node": ">=6"
       }
     },
     "node_modules/@fortawesome/fontawesome-svg-core": {
-      "version": "6.7.2",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.7.2.tgz",
-      "integrity": "sha512-yxtOBWDrdi5DD5o1pmVdq3WMCvnobT0LU6R8RyyVXPvFRd2o79/0NCuQoCjNTeZz9EzA9xS3JxNWfv54RIHFEA==",
+      "version": "6.7.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.7.1.tgz",
+      "integrity": "sha512-8dBIHbfsKlCk2jHQ9PoRBg2Z+4TwyE3vZICSnoDlnsHA6SiMlTwfmW6yX0lHsRmWJugkeb92sA0hZdkXJhuz+g==",
       "license": "MIT",
       "dependencies": {
-        "@fortawesome/fontawesome-common-types": "6.7.2"
+        "@fortawesome/fontawesome-common-types": "6.7.1"
       },
       "engines": {
         "node": ">=6"
       }
     },
     "node_modules/@fortawesome/free-brands-svg-icons": {
-      "version": "6.7.2",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.7.2.tgz",
-      "integrity": "sha512-zu0evbcRTgjKfrr77/2XX+bU+kuGfjm0LbajJHVIgBWNIDzrhpRxiCPNT8DW5AdmSsq7Mcf9D1bH0aSeSUSM+Q==",
+      "version": "6.7.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.7.1.tgz",
+      "integrity": "sha512-nJR76eqPzCnMyhbiGf6X0aclDirZriTPRcFm1YFvuupyJOGwlNF022w3YBqu+yrHRhnKRpzFX+8wJKqiIjWZkA==",
       "license": "(CC-BY-4.0 AND MIT)",
       "dependencies": {
-        "@fortawesome/fontawesome-common-types": "6.7.2"
+        "@fortawesome/fontawesome-common-types": "6.7.1"
       },
       "engines": {
         "node": ">=6"
       }
     },
     "node_modules/@fortawesome/free-solid-svg-icons": {
-      "version": "6.7.2",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.7.2.tgz",
-      "integrity": "sha512-GsBrnOzU8uj0LECDfD5zomZJIjrPhIlWU82AHwa2s40FKH+kcxQaBvBo3Z4TxyZHIyX8XTDxsyA33/Vx9eFuQA==",
+      "version": "6.7.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.7.1.tgz",
+      "integrity": "sha512-BTKc0b0mgjWZ2UDKVgmwaE0qt0cZs6ITcDgjrti5f/ki7aF5zs+N91V6hitGo3TItCFtnKg6cUVGdTmBFICFRg==",
       "license": "(CC-BY-4.0 AND MIT)",
       "dependencies": {
-        "@fortawesome/fontawesome-common-types": "6.7.2"
+        "@fortawesome/fontawesome-common-types": "6.7.1"
       },
       "engines": {
         "node": ">=6"
@@ -2820,15 +2843,6 @@
       "integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==",
       "license": "MIT"
     },
-    "node_modules/@types/fontkit": {
-      "version": "2.0.8",
-      "resolved": "https://registry.npmjs.org/@types/fontkit/-/fontkit-2.0.8.tgz",
-      "integrity": "sha512-wN+8bYxIpJf+5oZdrdtaX04qUuWHcKxcDEgRS9Qm9ZClSHjzEn13SxUC+5eRM+4yXIeTYk8mTzLAWGF64847ew==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/node": "*"
-      }
-    },
     "node_modules/@types/hast": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
@@ -2889,9 +2903,9 @@
       }
     },
     "node_modules/@types/node": {
-      "version": "22.15.23",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.15.23.tgz",
-      "integrity": "sha512-7Ec1zaFPF4RJ0eXu1YT/xgiebqwqoJz8rYPDi/O2BcZ++Wpt0Kq9cl0eg6NN6bYbPnR67ZLo7St5Q3UK0SnARw==",
+      "version": "22.15.18",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.15.18.tgz",
+      "integrity": "sha512-v1DKRfUdyW+jJhZNEI1PYy29S2YRxMV5AOO/x/SjKmW0acCIOqmbj6Haf9eHAhsPmrhlHSxEhv/1WszcLWV4cg==",
       "license": "MIT",
       "dependencies": {
         "undici-types": "~6.21.0"
@@ -3472,9 +3486,9 @@
       }
     },
     "node_modules/@vitest/coverage-istanbul": {
-      "version": "3.1.4",
-      "resolved": "https://registry.npmjs.org/@vitest/coverage-istanbul/-/coverage-istanbul-3.1.4.tgz",
-      "integrity": "sha512-WcGed2Bad8T96tSPr7zLsLS8SBiGuTnoEUAf/wLeA2rOTTFo9N2Mrxr6//v4qleXsYh+o2nd+gZ63KcNB8fgjg==",
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@vitest/coverage-istanbul/-/coverage-istanbul-3.1.3.tgz",
+      "integrity": "sha512-S6zpofFh7ykVM01KpCbsdPRKBG4SCP/ErvrakFBJEUhiN/nRgsuCsi68VSe8rWstz6V1cJ/Sa/PDttr6FRZuNg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3493,18 +3507,18 @@
         "url": "https://opencollective.com/vitest"
       },
       "peerDependencies": {
-        "vitest": "3.1.4"
+        "vitest": "3.1.3"
       }
     },
     "node_modules/@vitest/expect": {
-      "version": "3.1.4",
-      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-3.1.4.tgz",
-      "integrity": "sha512-xkD/ljeliyaClDYqHPNCiJ0plY5YIcM0OlRiZizLhlPmpXWpxnGMyTZXOHFhFeG7w9P5PBeL4IdtJ/HeQwTbQA==",
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-3.1.3.tgz",
+      "integrity": "sha512-7FTQQuuLKmN1Ig/h+h/GO+44Q1IlglPlR2es4ab7Yvfx+Uk5xsv+Ykk+MEt/M2Yn/xGmzaLKxGw2lgy2bwuYqg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/spy": "3.1.4",
-        "@vitest/utils": "3.1.4",
+        "@vitest/spy": "3.1.3",
+        "@vitest/utils": "3.1.3",
         "chai": "^5.2.0",
         "tinyrainbow": "^2.0.0"
       },
@@ -3513,13 +3527,13 @@
       }
     },
     "node_modules/@vitest/mocker": {
-      "version": "3.1.4",
-      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-3.1.4.tgz",
-      "integrity": "sha512-8IJ3CvwtSw/EFXqWFL8aCMu+YyYXG2WUSrQbViOZkWTKTVicVwZ/YiEZDSqD00kX+v/+W+OnxhNWoeVKorHygA==",
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-3.1.3.tgz",
+      "integrity": "sha512-PJbLjonJK82uCWHjzgBJZuR7zmAOrSvKk1QBxrennDIgtH4uK0TB1PvYmc0XBCigxxtiAVPfWtAdy4lpz8SQGQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/spy": "3.1.4",
+        "@vitest/spy": "3.1.3",
         "estree-walker": "^3.0.3",
         "magic-string": "^0.30.17"
       },
@@ -3553,13 +3567,13 @@
       }
     },
     "node_modules/@vitest/runner": {
-      "version": "3.1.4",
-      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-3.1.4.tgz",
-      "integrity": "sha512-djTeF1/vt985I/wpKVFBMWUlk/I7mb5hmD5oP8K9ACRmVXgKTae3TUOtXAEBfslNKPzUQvnKhNd34nnRSYgLNQ==",
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-3.1.3.tgz",
+      "integrity": "sha512-Tae+ogtlNfFei5DggOsSUvkIaSuVywujMj6HzR97AHK6XK8i3BuVyIifWAm/sE3a15lF5RH9yQIrbXYuo0IFyA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/utils": "3.1.4",
+        "@vitest/utils": "3.1.3",
         "pathe": "^2.0.3"
       },
       "funding": {
@@ -3567,13 +3581,13 @@
       }
     },
     "node_modules/@vitest/snapshot": {
-      "version": "3.1.4",
-      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-3.1.4.tgz",
-      "integrity": "sha512-JPHf68DvuO7vilmvwdPr9TS0SuuIzHvxeaCkxYcCD4jTk67XwL45ZhEHFKIuCm8CYstgI6LZ4XbwD6ANrwMpFg==",
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-3.1.3.tgz",
+      "integrity": "sha512-XVa5OPNTYUsyqG9skuUkFzAeFnEzDp8hQu7kZ0N25B1+6KjGm4hWLtURyBbsIAOekfWQ7Wuz/N/XXzgYO3deWQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/pretty-format": "3.1.4",
+        "@vitest/pretty-format": "3.1.3",
         "magic-string": "^0.30.17",
         "pathe": "^2.0.3"
       },
@@ -3581,10 +3595,23 @@
         "url": "https://opencollective.com/vitest"
       }
     },
+    "node_modules/@vitest/snapshot/node_modules/@vitest/pretty-format": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-3.1.3.tgz",
+      "integrity": "sha512-i6FDiBeJUGLDKADw2Gb01UtUNb12yyXAqC/mmRWuYl+m/U9GS7s8us5ONmGkGpUUo7/iAYzI2ePVfOZTYvUifA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tinyrainbow": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
     "node_modules/@vitest/spy": {
-      "version": "3.1.4",
-      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-3.1.4.tgz",
-      "integrity": "sha512-Xg1bXhu+vtPXIodYN369M86K8shGLouNjoVI78g8iAq2rFoHFdajNvJJ5A/9bPMFcfQqdaCpOgWKEoMQg/s0Yg==",
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-3.1.3.tgz",
+      "integrity": "sha512-x6w+ctOEmEXdWaa6TO4ilb7l9DxPR5bwEb6hILKuxfU1NqWT2mpJD9NJN7t3OTfxmVlOMrvtoFJGdgyzZ605lQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3595,13 +3622,13 @@
       }
     },
     "node_modules/@vitest/utils": {
-      "version": "3.1.4",
-      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-3.1.4.tgz",
-      "integrity": "sha512-yriMuO1cfFhmiGc8ataN51+9ooHRuURdfAZfwFd3usWynjzpLslZdYnRegTv32qdgtJTsj15FoeZe2g15fY1gg==",
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-3.1.3.tgz",
+      "integrity": "sha512-2Ltrpht4OmHO9+c/nmHtF09HWiyWdworqnHIwjfvDyWjuwKbdkcS9AnhsDn+8E2RM4x++foD1/tNuLPVvWG1Rg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/pretty-format": "3.1.4",
+        "@vitest/pretty-format": "3.1.3",
         "loupe": "^3.1.3",
         "tinyrainbow": "^2.0.0"
       },
@@ -3609,6 +3636,19 @@
         "url": "https://opencollective.com/vitest"
       }
     },
+    "node_modules/@vitest/utils/node_modules/@vitest/pretty-format": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-3.1.3.tgz",
+      "integrity": "sha512-i6FDiBeJUGLDKADw2Gb01UtUNb12yyXAqC/mmRWuYl+m/U9GS7s8us5ONmGkGpUUo7/iAYzI2ePVfOZTYvUifA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tinyrainbow": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
     "node_modules/@volar/kit": {
       "version": "2.4.14",
       "resolved": "https://registry.npmjs.org/@volar/kit/-/kit-2.4.14.tgz",
@@ -4095,15 +4135,15 @@
       "license": "MIT"
     },
     "node_modules/astro": {
-      "version": "5.8.0",
-      "resolved": "https://registry.npmjs.org/astro/-/astro-5.8.0.tgz",
-      "integrity": "sha512-G57ELkdIntDiSrucA5lQaRtBOjquaZ9b9NIwoz2f471ZuuJcynLjWgItgBzlrz5UMY4WqnFbVWUCKlJb7nt9bA==",
+      "version": "5.7.10",
+      "resolved": "https://registry.npmjs.org/astro/-/astro-5.7.10.tgz",
+      "integrity": "sha512-9TQcFZqP2w6//JXXUHfw8/5PX7KUx9EkG5O3m+hISuyeUztvjY1q5+p7+C5HiXyg24Zs3KkpieoL5BGRXGCAGA==",
       "license": "MIT",
       "dependencies": {
         "@astrojs/compiler": "^2.11.0",
         "@astrojs/internal-helpers": "0.6.1",
-        "@astrojs/markdown-remark": "6.3.2",
-        "@astrojs/telemetry": "3.3.0",
+        "@astrojs/markdown-remark": "6.3.1",
+        "@astrojs/telemetry": "3.2.1",
         "@capsizecss/unpack": "^2.4.0",
         "@oslojs/encoding": "^1.1.0",
         "@rollup/pluginutils": "^5.1.4",
@@ -4126,11 +4166,9 @@
         "esbuild": "^0.25.0",
         "estree-walker": "^3.0.3",
         "flattie": "^1.1.1",
-        "fontace": "~0.3.0",
         "github-slugger": "^2.0.0",
         "html-escaper": "3.0.3",
         "http-cache-semantics": "^4.1.1",
-        "import-meta-resolve": "^4.1.0",
         "js-yaml": "^4.1.0",
         "kleur": "^4.1.5",
         "magic-string": "^0.30.17",
@@ -4149,7 +4187,7 @@
         "tinyglobby": "^0.2.12",
         "tsconfck": "^3.1.5",
         "ultrahtml": "^1.6.0",
-        "unifont": "~0.5.0",
+        "unifont": "~0.4.1",
         "unist-util-visit": "^5.0.0",
         "unstorage": "^1.15.0",
         "vfile": "^6.0.3",
@@ -4166,7 +4204,7 @@
         "astro": "astro.js"
       },
       "engines": {
-        "node": "18.20.8 || ^20.3.0 || >=22.0.0",
+        "node": "^18.17.1 || ^20.3.0 || >=22.0.0",
         "npm": ">=9.6.5",
         "pnpm": ">=7.1.0"
       },
@@ -4219,9 +4257,9 @@
       }
     },
     "node_modules/astro-navbar": {
-      "version": "2.3.9",
-      "resolved": "https://registry.npmjs.org/astro-navbar/-/astro-navbar-2.3.9.tgz",
-      "integrity": "sha512-1FpVpVbOHlXT0vi/GvHb49y5LmH3yYcSO39pcyUDZ6eISjv/d3PlUg9C84h9o5TFxb4VzkSKfI+kvvMkCfHvEg==",
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/astro-navbar/-/astro-navbar-2.3.7.tgz",
+      "integrity": "sha512-3rB27AkbTQVZCyrNc0C+8EK558eF9U/Ldmwnfl3w4lZ2zZCjUCiCqhoEAqkBEupiVsZux89/AkNUpBkufQQ5jA==",
       "license": "MIT"
     },
     "node_modules/astro/node_modules/aria-query": {
@@ -4927,9 +4965,9 @@
       }
     },
     "node_modules/commander": {
-      "version": "13.1.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-13.1.0.tgz",
-      "integrity": "sha512-/rFeCpNJQbhSZjGVwO9RFV3xPqbnERS8MmIQzCtD/zl6gpJuV/bMLuN92oG3F7d8oDEHHRrujSXNUr8fpjntKw==",
+      "version": "12.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-12.1.0.tgz",
+      "integrity": "sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -6449,16 +6487,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/fontace": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/fontace/-/fontace-0.3.0.tgz",
-      "integrity": "sha512-czoqATrcnxgWb/nAkfyIrRp6Q8biYj7nGnL6zfhTcX+JKKpWHFBnb8uNMw/kZr7u++3Y3wYSYoZgHkCcsuBpBg==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/fontkit": "^2.0.8",
-        "fontkit": "^2.0.4"
-      }
-    },
     "node_modules/fontkit": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/fontkit/-/fontkit-2.0.4.tgz",
@@ -6522,13 +6550,13 @@
       }
     },
     "node_modules/framer-motion": {
-      "version": "11.18.2",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.18.2.tgz",
-      "integrity": "sha512-5F5Och7wrvtLVElIpclDT0CBzMVg3dL22B64aZwHtsIY8RB4mXICLrkajK4G9R+ieSAGcgrLeae2SeUTg2pr6w==",
+      "version": "12.15.0",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.15.0.tgz",
+      "integrity": "sha512-XKg/LnKExdLGugZrDILV7jZjI599785lDIJZLxMiiIFidCsy0a4R2ZEf+Izm67zyOuJgQYTHOmodi7igQsw3vg==",
       "license": "MIT",
       "dependencies": {
-        "motion-dom": "^11.18.1",
-        "motion-utils": "^11.18.1",
+        "motion-dom": "^12.15.0",
+        "motion-utils": "^12.12.1",
         "tslib": "^2.4.0"
       },
       "peerDependencies": {
@@ -8165,22 +8193,22 @@
       "license": "MIT"
     },
     "node_modules/lint-staged": {
-      "version": "15.5.2",
-      "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-15.5.2.tgz",
-      "integrity": "sha512-YUSOLq9VeRNAo/CTaVmhGDKG+LBtA8KF1X4K5+ykMSwWST1vDxJRB2kv2COgLb1fvpCo+A/y9A0G0znNVmdx4w==",
+      "version": "15.2.7",
+      "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-15.2.7.tgz",
+      "integrity": "sha512-+FdVbbCZ+yoh7E/RosSdqKJyUM2OEjTciH0TFNkawKgvFp1zbGlEC39RADg+xKBG1R4mhoH2j85myBQZ5wR+lw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "chalk": "^5.4.1",
-        "commander": "^13.1.0",
-        "debug": "^4.4.0",
-        "execa": "^8.0.1",
-        "lilconfig": "^3.1.3",
-        "listr2": "^8.2.5",
-        "micromatch": "^4.0.8",
-        "pidtree": "^0.6.0",
-        "string-argv": "^0.3.2",
-        "yaml": "^2.7.0"
+        "chalk": "~5.3.0",
+        "commander": "~12.1.0",
+        "debug": "~4.3.4",
+        "execa": "~8.0.1",
+        "lilconfig": "~3.1.1",
+        "listr2": "~8.2.1",
+        "micromatch": "~4.0.7",
+        "pidtree": "~0.6.0",
+        "string-argv": "~0.3.2",
+        "yaml": "~2.4.2"
       },
       "bin": {
         "lint-staged": "bin/lint-staged.js"
@@ -8193,9 +8221,9 @@
       }
     },
     "node_modules/lint-staged/node_modules/chalk": {
-      "version": "5.4.1",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.4.1.tgz",
-      "integrity": "sha512-zgVZuo2WcZgfUEmsn6eO3kINexW8RAE4maiQ8QNs8CtpPCSyMiYsULR3HQYkm3w8FIA3SberyMJMSldGsW+U3w==",
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
+      "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -8205,10 +8233,41 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/lint-staged/node_modules/debug": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/lint-staged/node_modules/yaml": {
+      "version": "2.4.5",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.5.tgz",
+      "integrity": "sha512-aBx2bnqDzVOyNKfsysjA2ms5ZlnjSAW2eG3/L5G/CSujfjLJTJsEw1bGw8kCf04KodQWk1pxlGnZ56CRxiawmg==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/listr2": {
-      "version": "8.3.3",
-      "resolved": "https://registry.npmjs.org/listr2/-/listr2-8.3.3.tgz",
-      "integrity": "sha512-LWzX2KsqcB1wqQ4AHgYb4RsDXauQiqhjLk+6hjbaeHG4zpjjVAB6wC/gz6X0l+Du1cN3pUB5ZlrvTbhGSNnUQQ==",
+      "version": "8.2.5",
+      "resolved": "https://registry.npmjs.org/listr2/-/listr2-8.2.5.tgz",
+      "integrity": "sha512-iyAZCeyD+c1gPyE9qpFu8af0Y+MRtmKOncdGoA2S5EY8iFq99dmmvkNnHiWo+pj0s7yH7l3KPIgee77tKpXPWQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -8357,24 +8416,6 @@
         "yallist": "^3.0.2"
       }
     },
-    "node_modules/lucide-astro": {
-      "version": "0.460.0",
-      "resolved": "https://registry.npmjs.org/lucide-astro/-/lucide-astro-0.460.0.tgz",
-      "integrity": "sha512-4iteWvZ2l/KjXXKnaKXdeCXOd2zsO6gqdhSm7krjYgDlb68mPpylPSvWciBP26h2IRKkorKqkkKCmkFBbChFiA==",
-      "license": "MIT",
-      "peerDependencies": {
-        "astro": ">=2.7.1"
-      }
-    },
-    "node_modules/lucide-react": {
-      "version": "0.475.0",
-      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.475.0.tgz",
-      "integrity": "sha512-NJzvVu1HwFVeZ+Gwq2q00KygM1aBhy/ZrhY9FsAgJtpB+E4R7uxRk9M2iKvHa6/vNxZydIB59htha4c2vvwvVg==",
-      "license": "ISC",
-      "peerDependencies": {
-        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
-      }
-    },
     "node_modules/lz-string": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
@@ -9438,12 +9479,12 @@
       }
     },
     "node_modules/motion": {
-      "version": "11.18.2",
-      "resolved": "https://registry.npmjs.org/motion/-/motion-11.18.2.tgz",
-      "integrity": "sha512-JLjvFDuFr42NFtcVoMAyC2sEjnpA8xpy6qWPyzQvCloznAyQ8FIXioxWfHiLtgYhoVpfUqSWpn1h9++skj9+Wg==",
+      "version": "12.15.0",
+      "resolved": "https://registry.npmjs.org/motion/-/motion-12.15.0.tgz",
+      "integrity": "sha512-HLouXyIb1uQFiZgJTYGrtEzbatPc6vK+HP+Qt6afLQjaudiGiLLVsoy71CwzD/Stlh06FUd5OpyiXqn6XvqjqQ==",
       "license": "MIT",
       "dependencies": {
-        "framer-motion": "^11.18.2",
+        "framer-motion": "^12.15.0",
         "tslib": "^2.4.0"
       },
       "peerDependencies": {
@@ -9464,18 +9505,18 @@
       }
     },
     "node_modules/motion-dom": {
-      "version": "11.18.1",
-      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.18.1.tgz",
-      "integrity": "sha512-g76KvA001z+atjfxczdRtw/RXOM3OMSdd1f4DL77qCTF/+avrRJiawSG4yDibEQ215sr9kpinSlX2pCTJ9zbhw==",
+      "version": "12.15.0",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.15.0.tgz",
+      "integrity": "sha512-D2ldJgor+2vdcrDtKJw48k3OddXiZN1dDLLWrS8kiHzQdYVruh0IoTwbJBslrnTXIPgFED7PBN2Zbwl7rNqnhA==",
       "license": "MIT",
       "dependencies": {
-        "motion-utils": "^11.18.1"
+        "motion-utils": "^12.12.1"
       }
     },
     "node_modules/motion-utils": {
-      "version": "11.18.1",
-      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-11.18.1.tgz",
-      "integrity": "sha512-49Kt+HKjtbJKLtgO/LKj9Ld+6vw9BjH5d9sc40R/kVyH8GLAXgT42M2NnuPcJNuA3s9ZfZBUcwIgpmZWGEE+hA==",
+      "version": "12.12.1",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.12.1.tgz",
+      "integrity": "sha512-f9qiqUHm7hWSLlNW8gS9pisnsN7CRFRD58vNjptKdsqFLpkVnX00TNeD6Q0d27V9KzT7ySFyK1TZ/DShfVOv6w==",
       "license": "MIT"
     },
     "node_modules/mrmime": {
@@ -10229,9 +10270,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.5.3",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
-      "integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==",
+      "version": "8.5.1",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.1.tgz",
+      "integrity": "sha512-6oz2beyjc5VMn/KV1pPw8fliQkhBXrVn1Z3TVyqZxU8kZpzEKhBdmCFqI6ZbmGtamQvQGuU1sgPTk8ZrXDD7jQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -12067,9 +12108,9 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "3.4.17",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
-      "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
+      "version": "3.4.15",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.15.tgz",
+      "integrity": "sha512-r4MeXnfBmSOuKUWmXe6h2CcyfzJCEk4F0pptO5jlnYSIViUkVmsawj80N5h2lO3gwcmSb4n3PuN+e+GC1Guylw==",
       "license": "MIT",
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
@@ -12081,7 +12122,7 @@
         "glob-parent": "^6.0.2",
         "is-glob": "^4.0.3",
         "jiti": "^1.21.6",
-        "lilconfig": "^3.1.3",
+        "lilconfig": "^2.1.0",
         "micromatch": "^4.0.8",
         "normalize-path": "^3.0.0",
         "object-hash": "^3.0.0",
@@ -12139,6 +12180,15 @@
         "node": ">= 6"
       }
     },
+    "node_modules/tailwindcss/node_modules/lilconfig": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
+      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/tailwindcss/node_modules/picomatch": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
@@ -12562,9 +12612,9 @@
       "license": "MIT"
     },
     "node_modules/typescript": {
-      "version": "5.8.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz",
-      "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
+      "version": "5.6.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
+      "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
@@ -12714,9 +12764,9 @@
       }
     },
     "node_modules/unifont": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/unifont/-/unifont-0.5.0.tgz",
-      "integrity": "sha512-4DueXMP5Hy4n607sh+vJ+rajoLu778aU3GzqeTCqsD/EaUcvqZT9wPC8kgK6Vjh22ZskrxyRCR71FwNOaYn6jA==",
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/unifont/-/unifont-0.4.1.tgz",
+      "integrity": "sha512-zKSY9qO8svWYns+FGKjyVdLvpGPwqmsCjeJLN1xndMiqxHWBAhoWDMYMG960MxeV48clBmG+fDP59dHY1VoZvg==",
       "license": "MIT",
       "dependencies": {
         "css-tree": "^3.0.0",
@@ -13140,9 +13190,9 @@
       }
     },
     "node_modules/vite-node": {
-      "version": "3.1.4",
-      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-3.1.4.tgz",
-      "integrity": "sha512-6enNwYnpyDo4hEgytbmc6mYWHXDHYEn0D1/rw4Q+tnHUGtKTJsn8T1YkX6Q18wI5LCrS8CTYlBaiCqxOy2kvUA==",
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-3.1.3.tgz",
+      "integrity": "sha512-uHV4plJ2IxCl4u1up1FQRrqclylKAogbtBfOTwcuJ28xFi+89PZ57BRh+naIRvH70HPwxy5QHYzg1OrEaC7AbA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -13196,6 +13246,34 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/vite/node_modules/postcss": {
+      "version": "8.5.3",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
+      "integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.8",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
     "node_modules/vitefu": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/vitefu/-/vitefu-1.0.6.tgz",
@@ -13215,19 +13293,19 @@
       }
     },
     "node_modules/vitest": {
-      "version": "3.1.4",
-      "resolved": "https://registry.npmjs.org/vitest/-/vitest-3.1.4.tgz",
-      "integrity": "sha512-Ta56rT7uWxCSJXlBtKgIlApJnT6e6IGmTYxYcmxjJ4ujuZDI59GUQgVDObXXJujOmPDBYXHK1qmaGtneu6TNIQ==",
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-3.1.3.tgz",
+      "integrity": "sha512-188iM4hAHQ0km23TN/adso1q5hhwKqUpv+Sd6p5sOuh6FhQnRNW3IsiIpvxqahtBabsJ2SLZgmGSpcYK4wQYJw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/expect": "3.1.4",
-        "@vitest/mocker": "3.1.4",
-        "@vitest/pretty-format": "^3.1.4",
-        "@vitest/runner": "3.1.4",
-        "@vitest/snapshot": "3.1.4",
-        "@vitest/spy": "3.1.4",
-        "@vitest/utils": "3.1.4",
+        "@vitest/expect": "3.1.3",
+        "@vitest/mocker": "3.1.3",
+        "@vitest/pretty-format": "^3.1.3",
+        "@vitest/runner": "3.1.3",
+        "@vitest/snapshot": "3.1.3",
+        "@vitest/spy": "3.1.3",
+        "@vitest/utils": "3.1.3",
         "chai": "^5.2.0",
         "debug": "^4.4.0",
         "expect-type": "^1.2.1",
@@ -13240,7 +13318,7 @@
         "tinypool": "^1.0.2",
         "tinyrainbow": "^2.0.0",
         "vite": "^5.0.0 || ^6.0.0",
-        "vite-node": "3.1.4",
+        "vite-node": "3.1.3",
         "why-is-node-running": "^2.3.0"
       },
       "bin": {
@@ -13256,8 +13334,8 @@
         "@edge-runtime/vm": "*",
         "@types/debug": "^4.1.12",
         "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0",
-        "@vitest/browser": "3.1.4",
-        "@vitest/ui": "3.1.4",
+        "@vitest/browser": "3.1.3",
+        "@vitest/ui": "3.1.3",
         "happy-dom": "*",
         "jsdom": "*"
       },
diff --git a/package.json b/package.json
index d4f56ae..25783d5 100644
--- a/package.json
+++ b/package.json
@@ -16,70 +16,68 @@
     "prepare": "husky",
     "test": "npx vitest run",
     "test:coverage": "npx vitest --coverage",
-    "test:playwright": "npx playwright test"
+    "test:playwright": "npx playwright test --reporter=list"
   },
   "dependencies": {
-    "@astrojs/check": "^0.9.4",
-    "@astrojs/cloudflare": "^12.5.2",
+    "@astrojs/check": "0.9.4",
+    "@astrojs/cloudflare": "12.5.2",
     "@astrojs/react": "^4.3.0",
-    "@astrojs/rss": "^4.0.11",
-    "@astrojs/sitemap": "^3.3.1",
-    "@astrojs/tailwind": "^6.0.2",
-    "@fontsource/bricolage-grotesque": "^5.1.0",
-    "@fortawesome/fontawesome-svg-core": "^6.7.1",
-    "@fortawesome/free-brands-svg-icons": "^6.7.1",
-    "@fortawesome/free-solid-svg-icons": "^6.7.1",
+    "@astrojs/rss": "4.0.11",
+    "@astrojs/sitemap": "3.3.1",
+    "@astrojs/tailwind": "6.0.2",
+    "@fontsource/bricolage-grotesque": "5.1.0",
+    "@fortawesome/fontawesome-svg-core": "6.7.1",
+    "@fortawesome/free-brands-svg-icons": "6.7.1",
+    "@fortawesome/free-solid-svg-icons": "6.7.1",
     "@types/react": "^19.1.6",
     "@types/react-dom": "^19.1.5",
-    "astro": "^5.7.10",
-    "astro-navbar": "^2.3.7",
+    "astro": "5.7.10",
+    "astro-navbar": "2.3.7",
     "autoprefixer": "10.4.14",
-    "clsx": "^2.1.1",
-    "date-fns": "^4.1.0",
-    "free-astro-components": "^1.2.0",
-    "lucide-astro": "^0.460.0",
-    "lucide-react": "^0.475.0",
-    "motion": "^11.13.5",
-    "postcss": "^8.5.1",
+    "clsx": "2.1.1",
+    "date-fns": "4.1.0",
+    "free-astro-components": "1.2.0",
+    "motion": "^12.15.0",
+    "postcss": "8.5.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "sharp": "^0.33.5",
-    "tailwind-merge": "^3.3.0",
-    "tailwindcss": "^3.4.15",
-    "typescript": "^5.6.3"
+    "sharp": "0.33.5",
+    "tailwind-merge": "3.3.0",
+    "tailwindcss": "3.4.15",
+    "typescript": "5.6.3"
   },
   "devDependencies": {
-    "@eslint/compat": "^1.2.9",
-    "@eslint/eslintrc": "^3.3.1",
-    "@eslint/js": "^9.27.0",
-    "@playwright/test": "^1.52.0",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/user-event": "^14.6.1",
-    "@types/eslint-plugin-jsx-a11y": "^6.10.0",
-    "@types/jsdom": "^21.1.7",
-    "@types/node": "^22.15.18",
-    "@typescript-eslint/eslint-plugin": "^8.33.0",
-    "@typescript-eslint/parser": "^8.33.0",
-    "@typescript-eslint/utils": "^8.33.0",
-    "@vitest/coverage-istanbul": "^3.1.3",
-    "eslint": "^9.27.0",
-    "eslint-config-prettier": "^10.1.5",
-    "eslint-import-resolver-typescript": "^4.4.1",
-    "eslint-plugin-astro": "^1.3.1",
-    "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "husky": "^9.1.7",
-    "jsdom": "^26.1.0",
-    "lint-staged": "^15.2.7",
+    "@eslint/compat": "1.2.9",
+    "@eslint/eslintrc": "3.3.1",
+    "@eslint/js": "9.27.0",
+    "@playwright/test": "1.52.0",
+    "@testing-library/jest-dom": "6.6.3",
+    "@testing-library/user-event": "14.6.1",
+    "@types/eslint-plugin-jsx-a11y": "6.10.0",
+    "@types/jsdom": "21.1.7",
+    "@types/node": "22.15.18",
+    "@typescript-eslint/eslint-plugin": "8.33.0",
+    "@typescript-eslint/parser": "8.33.0",
+    "@typescript-eslint/utils": "8.33.0",
+    "@vitest/coverage-istanbul": "3.1.3",
+    "eslint": "9.27.0",
+    "eslint-config-prettier": "10.1.5",
+    "eslint-import-resolver-typescript": "4.4.1",
+    "eslint-plugin-astro": "1.3.1",
+    "eslint-plugin-import": "2.31.0",
+    "eslint-plugin-jsx-a11y": "6.10.2",
+    "eslint-plugin-react": "7.37.5",
+    "eslint-plugin-react-hooks": "5.2.0",
+    "husky": "9.1.7",
+    "jsdom": "26.1.0",
+    "lint-staged": "15.2.7",
     "prettier": "3.5.3",
     "prettier-plugin-astro": "0.14.1",
-    "prettier-plugin-tailwindcss": "^0.6.11",
-    "typescript-eslint": "^8.33.0",
-    "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^3.1.3",
-    "wrangler": "^4.17.0"
+    "prettier-plugin-tailwindcss": "0.6.11",
+    "typescript-eslint": "8.33.0",
+    "vite-tsconfig-paths": "5.1.4",
+    "vitest": "3.1.3",
+    "wrangler": "4.17.0"
   },
   "overrides": {
     "jiti": "2.4.2"
diff --git a/src/components/BackButton.astro b/src/components/BackButton.astro
index 8b6816f..5004ae9 100644
--- a/src/components/BackButton.astro
+++ b/src/components/BackButton.astro
@@ -9,9 +9,15 @@ const {
     mods: { slug },
   },
 } = getUI(locale)
+
+const { href, ...props } = Astro.props
+
+if (!href) {
+  console.error('BackButton: href is required')
+}
 ---
 
-<button type="button" onclick="window.history.back()" class="mb-8 flex w-min items-center gap-2">
+<a href={href} class="mb-8 flex w-fit items-center gap-2" {...props} data-testid="back-button">
   <ArrowLeftIcon class="size-4" />
   {slug.back}
-</button>
+</a>
diff --git a/src/components/Button.astro b/src/components/Button.astro
index e2266ed..9967220 100644
--- a/src/components/Button.astro
+++ b/src/components/Button.astro
@@ -3,7 +3,17 @@ import { getLocale, getPath } from '~/utils/i18n'
 
 const locale = getLocale(Astro)
 const getLocalePath = getPath(locale)
-const { class: className, isPrimary, isAlert, isBordered, href, id, extra } = Astro.props
+const {
+  class: className,
+  isPrimary,
+  isAlert,
+  isBordered,
+  href,
+  id,
+  extra,
+  localePath = true,
+  ...props
+} = Astro.props
 ---
 
 {
@@ -11,7 +21,7 @@ const { class: className, isPrimary, isAlert, isBordered, href, id, extra } = As
     <a
       id={id}
       {...extra}
-      href={getLocalePath(href)}
+      href={localePath ? getLocalePath(href) : href}
       class:list={[
         'transition-bg flex items-center justify-center gap-2 rounded-xl px-6 py-4 transition-transform duration-150 hover:scale-[1.02] active:scale-[0.98]',
         className,
@@ -23,6 +33,7 @@ const { class: className, isPrimary, isAlert, isBordered, href, id, extra } = As
               ? 'bg-subtle'
               : '!transition-bg border-2 border-dark hover:bg-dark hover:text-paper hover:shadow-sm',
       ]}
+      {...props}
     >
       <slot />
     </a>
@@ -41,6 +52,7 @@ const { class: className, isPrimary, isAlert, isBordered, href, id, extra } = As
               ? ''
               : '!transition-bg border-2 border-dark hover:bg-dark hover:text-paper hover:shadow-sm',
       ]}
+      {...props}
     >
       <slot />
     </button>
diff --git a/src/components/Community.astro b/src/components/Community.astro
index 0bc2a5e..89d38e6 100644
--- a/src/components/Community.astro
+++ b/src/components/Community.astro
@@ -23,15 +23,17 @@ const {
   class="relative flex w-full flex-col items-center gap-6 py-12 text-start md:text-center lg:py-36"
 >
   <Description class="mb-2 text-6xl font-bold">
-    <motion.span client:load {...getTitleAnimation(0.2)}>
-      {community.title[0]}
-    </motion.span>
-    <motion.span client:load {...getTitleAnimation(0.4)}>
-      {community.title[1]}
-    </motion.span>
-    <motion.span client:load {...getTitleAnimation(0.6)}>
-      {community.title[2]}
-    </motion.span>
+    {
+      community.title.map((title, index) =>
+        title !== '\n' ? (
+          <motion.span client:load {...getTitleAnimation(0.2 + index * 0.2)}>
+            {title}
+          </motion.span>
+        ) : (
+          <br class="hidden md:block" />
+        )
+      )
+    }
   </Description>
   <motion.p client:load {...getTitleAnimation(0.6)} className="lg:w-1/2 lg:px-0">
     {community.description}
diff --git a/src/components/Features.astro b/src/components/Features.astro
index fb753d8..171876e 100644
--- a/src/components/Features.astro
+++ b/src/components/Features.astro
@@ -19,22 +19,28 @@ const {
   },
 } = getUI(locale)
 
-const { title1 = features.title1, title2 = features.title2, title3 = features.title3 } = Astro.props
+interface Props {
+  titles?: string[]
+}
+
+const { titles } = Astro.props
 
 const descriptions = Object.values(features.featureTabs).map(tab => tab.description)
 ---
 
 <section id="Features" class="relative flex w-full flex-col py-12 text-start lg:py-36">
   <Description class="mb-2 text-4xl font-bold sm:text-6xl">
-    <motion.span client:load {...getTitleAnimation(0.2)}>
-      {title1}
-    </motion.span>
-    <motion.span client:load {...getTitleAnimation(0.4)}>
-      {title2}
-    </motion.span>
-    <motion.span client:load {...getTitleAnimation(0.6)}>
-      {title3}
-    </motion.span>
+    {
+      (titles || features.titles).map((title, index) =>
+        title !== '\n' ? (
+          <motion.span client:load {...getTitleAnimation(0.2 + index * 0.2)}>
+            {title}
+          </motion.span>
+        ) : (
+          <br class="hidden md:block" />
+        )
+      )
+    }
   </Description>
   <motion.p client:load {...getTitleAnimation(0.6)} className="lg:w-1/2">
     {features.description}
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 933308e..7c639fb 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -20,7 +20,10 @@ const {
   aria-label="Site footer"
 >
   <div class="container flex w-full flex-col items-start justify-between gap-12">
-    <section class="w-full text-center lg:w-1/2 lg:text-left" aria-labelledby="footer-title">
+    <section
+      class="flex w-full flex-col gap-4 text-center lg:w-1/2 lg:text-left"
+      aria-labelledby="footer-title"
+    >
       <Description id="footer-title" class="text-6xl font-bold !text-paper"
         >{footer.title}</Description
       >
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
index cf77f2b..3bc9a6d 100644
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -37,26 +37,25 @@ const {
 >
   <div class="flex h-full flex-col items-center justify-center">
     <Title class="relative px-12 text-center font-normal leading-8 md:text-7xl lg:px-0 lg:text-9xl">
-      <motion.span client:load {...getHeroTitleAnimation()}>
-        {hero.title[0]}
-      </motion.span>
-      <motion.span client:load {...getHeroTitleAnimation()}>
-        {hero.title[1]}
-      </motion.span>
-      <br class="hidden md:block" />
-      <motion.span client:load {...getHeroTitleAnimation()}>
-        {hero.title[2]}
-      </motion.span>
-      <motion.span client:load {...getHeroTitleAnimation()} className="italic text-coral">
-        {hero.title[3]}
-      </motion.span>
-      <motion.span client:load {...getHeroTitleAnimation()}>
-        {hero.title[4]}
-      </motion.span>
+      {
+        hero.title.map(title =>
+          title.text !== '\n' ? (
+            <motion.span
+              client:load
+              {...getHeroTitleAnimation()}
+              className={title.highlight ? 'italic text-coral' : ''}
+            >
+              {title.text}
+            </motion.span>
+          ) : (
+            <br class="hidden md:block" />
+          )
+        )
+      }
     </Title>
     <motion.span client:load {...getHeroTitleAnimation()}>
       <Description class="px-12 text-center lg:px-0">
-        {hero.description[0]}.
+        {hero.description[0]}
         <br class="hidden sm:inline" />
         {hero.description[1]}</Description
       >
diff --git a/src/components/ModsList.astro b/src/components/ModsList.astro
new file mode 100644
index 0000000..eb118b7
--- /dev/null
+++ b/src/components/ModsList.astro
@@ -0,0 +1,679 @@
+---
+import { icon, library } from '@fortawesome/fontawesome-svg-core'
+import { faSort, faSortDown, faSortUp } from '@fortawesome/free-solid-svg-icons'
+import { type ZenTheme } from '~/mods'
+import { getPath, type Locale } from '~/utils/i18n'
+
+// Add icons to the library
+library.add(faSort, faSortUp, faSortDown)
+
+// Create icon objects
+const defaultSortIcon = icon({ prefix: 'fas', iconName: 'sort' })
+const ascSortIcon = icon({ prefix: 'fas', iconName: 'sort-up' })
+const descSortIcon = icon({ prefix: 'fas', iconName: 'sort-down' })
+
+interface Props {
+  allMods: ZenTheme[]
+  locale: Locale
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  translations: any
+}
+
+const { allMods, locale, translations } = Astro.props
+
+const getLocalePath = getPath(locale)
+
+// Server-side rendering setup
+const defaultLimit = 12
+const initialMods = allMods.slice(0, defaultLimit)
+const totalPages = Math.ceil(allMods.length / defaultLimit)
+---
+
+<div id="mods-list-container" class="flex flex-1 flex-col">
+  <div class="flex flex-col items-center gap-4">
+    <div class="flex w-full flex-col items-center justify-center gap-6">
+      <input
+        class="w-full rounded-full border-2 border-dark bg-transparent px-6 py-2 text-lg outline-none"
+        id="search"
+        placeholder={translations.search}
+        type="text"
+      />
+    </div>
+
+    <div class="grid w-full grid-cols-2 place-items-center gap-4 sm:grid-cols-3">
+      <div class="flex flex-col items-start gap-2">
+        <button
+          class="text-md flex items-center gap-2 px-4 py-2 font-semibold"
+          id="created-sort"
+          type="button"
+        >
+          {translations.sort.lastCreated}
+          <span class="relative">
+            <span id="created-sort-default" class="" set:html={defaultSortIcon.html[0]} />
+            <span id="created-sort-asc" class="hidden" set:html={ascSortIcon.html[0]} />
+            <span id="created-sort-desc" class="hidden" set:html={descSortIcon.html[0]} />
+          </span>
+        </button>
+      </div>
+
+      <div class="flex flex-col items-center gap-2">
+        <button
+          class="text-md flex items-center gap-2 px-4 py-2 font-semibold"
+          id="updated-sort"
+          type="button"
+        >
+          {translations.sort.lastUpdated}
+          <span class="relative">
+            <span id="updated-sort-default" class="" set:html={defaultSortIcon.html[0]} />
+            <span id="updated-sort-asc" class="hidden" set:html={ascSortIcon.html[0]} />
+            <span id="updated-sort-desc" class="hidden" set:html={descSortIcon.html[0]} />
+          </span>
+        </button>
+      </div>
+
+      <div class="col-span-2 flex items-center gap-2 px-4 py-2 sm:col-span-1">
+        <label class="text-md font-semibold" for="limit">
+          {translations.sort.perPage}
+        </label>
+        <select class="rounded border border-dark px-2 py-1 text-sm dark:bg-paper" id="limit">
+          <option value="12">12</option>
+          <option value="24">24</option>
+          <option value="48">48</option>
+          <option value="96">96</option>
+        </select>
+      </div>
+    </div>
+  </div>
+  <div
+    id="mods-grid"
+    class="grid w-full grid-cols-1 place-items-start gap-12 py-6 md:grid-cols-2 xl:grid-cols-3"
+  >
+    {
+      initialMods.map(mod => (
+        <a
+          class="mod-card flex w-full flex-col gap-4 border-transparent transition-colors duration-100 hover:opacity-90"
+          href={getLocalePath(`/mods/${mod.id}`)}
+        >
+          <div class="relative mb-0 block aspect-[1.85/1] h-48 overflow-hidden rounded-md border-2 border-dark object-cover shadow-md">
+            <img
+              alt={mod.name}
+              class="h-full w-full object-cover transition-transform duration-100 hover:scale-105"
+              loading="lazy"
+              src={mod.image}
+            />
+          </div>
+          <div>
+            <h2 class="text-lg font-bold">
+              {mod.name}{' '}
+              <span class="ml-1 text-sm font-normal">
+                {translations.by} @{mod.author}
+              </span>
+            </h2>
+            <p class="line-clamp-2 text-sm font-thin">{mod.description}</p>
+          </div>
+        </a>
+      ))
+    }
+  </div>
+  <div
+    id="no-results"
+    class="hidden h-full min-h-96 flex-col justify-center gap-4 place-self-center text-center"
+  >
+    <h2 class="text-lg font-bold">{translations.noResults}</h2>
+    <p class="text-sm font-thin">{translations.noResultsDescription}</p>
+  </div>
+  <div id="pagination" class="mx-auto mb-12 hidden items-center justify-center gap-4 px-8">
+    {
+      totalPages > 1 && (
+        <>
+          <span class="pointer-events-none px-3 py-2 text-gray-400">&lt;</span>
+          <form class="flex items-center gap-2" id="page-form">
+            <input
+              id="page-input"
+              aria-label="Page number"
+              class="w-16 rounded border border-dark bg-transparent px-2 py-1 text-center text-sm"
+              type="text"
+              value="1"
+            />
+            <span class="text-sm">
+              {translations.pagination.pagination
+                .replace('{totalPages}', totalPages.toString())
+                .replace('{totalItems}', allMods.length.toString())
+                .replace('{input}', '')}
+            </span>
+          </form>
+          <a
+            class="px-3 py-2 text-dark hover:text-gray-600"
+            href={getLocalePath('/mods?page=2')}
+            data-page="2"
+          >
+            &gt;
+          </a>
+        </>
+      )
+    }
+  </div>
+</div>
+
+<script define:vars={{ allMods, translations, locale }} is:inline>
+  class ModsSearch {
+    constructor() {
+      this.allMods = allMods
+      this.translations = translations
+      this.locale = locale // State
+      this.state = {
+        search: '',
+        createdSort: 'default',
+        updatedSort: 'default',
+        page: 1,
+        limit: 12,
+      }
+
+      // Track if content has been dynamically modified
+      this.hasBeenModified = false
+
+      // Performance optimizations
+      this.searchTimeout = null
+      this.isRendering = false
+      this.lastFilteredMods = null
+      this.lastRenderState = null
+
+      // Cache DOM elements for better performance and intellisense
+      this.elements = this.cacheElements()
+
+      this.initializeFromURL()
+      this.bindEvents()
+      this.renderMods()
+    }
+
+    cacheElements() {
+      const searchInput = document.getElementById('search')
+      const limitSelect = document.getElementById('limit')
+      const createdSortButton = document.getElementById('created-sort')
+      const updatedSortButton = document.getElementById('updated-sort')
+      const modsGrid = document.getElementById('mods-grid')
+      const noResults = document.getElementById('no-results')
+      const pagination = document.getElementById('pagination')
+
+      // Sort icon elements
+      const createdSortDefault = document.getElementById('created-sort-default')
+      const createdSortAsc = document.getElementById('created-sort-asc')
+      const createdSortDesc = document.getElementById('created-sort-desc')
+      const updatedSortDefault = document.getElementById('updated-sort-default')
+      const updatedSortAsc = document.getElementById('updated-sort-asc')
+      const updatedSortDesc = document.getElementById('updated-sort-desc')
+
+      return {
+        searchInput: searchInput instanceof HTMLInputElement ? searchInput : null,
+        limitSelect: limitSelect instanceof HTMLSelectElement ? limitSelect : null,
+        createdSortButton:
+          createdSortButton instanceof HTMLButtonElement ? createdSortButton : null,
+        updatedSortButton:
+          updatedSortButton instanceof HTMLButtonElement ? updatedSortButton : null,
+        modsGrid: modsGrid instanceof HTMLDivElement ? modsGrid : null,
+        noResults: noResults instanceof HTMLDivElement ? noResults : null,
+        pagination: pagination instanceof HTMLDivElement ? pagination : null,
+        sortIcons: {
+          createdDefault: createdSortDefault instanceof HTMLSpanElement ? createdSortDefault : null,
+          createdAsc: createdSortAsc instanceof HTMLSpanElement ? createdSortAsc : null,
+          createdDesc: createdSortDesc instanceof HTMLSpanElement ? createdSortDesc : null,
+          updatedDefault: updatedSortDefault instanceof HTMLSpanElement ? updatedSortDefault : null,
+          updatedAsc: updatedSortAsc instanceof HTMLSpanElement ? updatedSortAsc : null,
+          updatedDesc: updatedSortDesc instanceof HTMLSpanElement ? updatedSortDesc : null,
+        },
+      }
+    }
+
+    getLocalePath(path) {
+      if (this.locale && this.locale !== 'en' && !path.startsWith(`/${this.locale}`)) {
+        return `/${this.locale}${path.startsWith('/') ? '' : '/'}${path}`
+      }
+      return path
+    }
+    validateSortOrder(value, defaultValue = 'default') {
+      const validSortOrders = ['default', 'asc', 'desc']
+      return validSortOrders.includes(value) ? value : defaultValue
+    }
+
+    validateLimit(value, defaultValue = 12) {
+      const validLimits = [12, 24, 48, 96]
+      const parsed = parseInt(value, 10)
+      return validLimits.includes(parsed) ? parsed : defaultValue
+    }
+
+    validatePage(value, defaultValue = 1) {
+      const parsed = parseInt(value, 10)
+      return !isNaN(parsed) && parsed >= 1 ? parsed : defaultValue
+    }
+    initializeFromURL() {
+      const params = new URLSearchParams(window.location.search)
+
+      const rawCreatedSort = params.get('created')
+      const rawUpdatedSort = params.get('updated')
+      const rawPage = params.get('page')
+      const rawLimit = params.get('limit')
+
+      this.state = {
+        search: params.get('q') || '',
+        createdSort: this.validateSortOrder(rawCreatedSort, 'default'),
+        updatedSort: this.validateSortOrder(rawUpdatedSort, 'default'),
+        page: this.validatePage(rawPage, 1),
+        limit: this.validateLimit(rawLimit, 12),
+      }
+
+      // Set form values using cached elements
+      if (this.elements.searchInput) {
+        this.elements.searchInput.value = this.state.search
+      }
+      if (this.elements.limitSelect) {
+        this.elements.limitSelect.value = this.state.limit.toString()
+      }
+    }
+    bindEvents() {
+      // Search input with debouncing
+      if (this.elements.searchInput) {
+        this.elements.searchInput.addEventListener('input', e => {
+          // Clear existing timeout
+          if (this.searchTimeout) {
+            clearTimeout(this.searchTimeout)
+          }
+
+          // Set new timeout for debounced search
+          this.searchTimeout = setTimeout(() => {
+            if (e.target instanceof HTMLInputElement) {
+              this.setState({ search: e.target.value, page: 1 })
+            }
+          }, 300) // 300ms debounce
+        })
+      }
+
+      // Sort buttons
+      if (this.elements.createdSortButton) {
+        this.elements.createdSortButton.addEventListener('click', () => {
+          this.toggleCreatedSort()
+        })
+      }
+
+      if (this.elements.updatedSortButton) {
+        this.elements.updatedSortButton.addEventListener('click', () => {
+          this.toggleUpdatedSort()
+        })
+      }
+
+      // Limit select
+      if (this.elements.limitSelect) {
+        this.elements.limitSelect.addEventListener('change', e => {
+          if (e.target instanceof HTMLSelectElement) {
+            const newLimit = this.validateLimit(e.target.value, this.state.limit)
+            this.setState({ limit: newLimit, page: 1 })
+          }
+        })
+      }
+    }
+    setState(newState) {
+      // Prevent multiple renders
+      if (this.isRendering) return
+
+      // Validate new state values before setting
+      const validatedState = { ...newState }
+
+      if ('createdSort' in validatedState) {
+        validatedState.createdSort = this.validateSortOrder(
+          validatedState.createdSort,
+          this.state.createdSort
+        )
+      }
+      if ('updatedSort' in validatedState) {
+        validatedState.updatedSort = this.validateSortOrder(
+          validatedState.updatedSort,
+          this.state.updatedSort
+        )
+      }
+
+      if ('page' in validatedState) {
+        validatedState.page = this.validatePage(validatedState.page, this.state.page)
+      }
+
+      if ('limit' in validatedState) {
+        validatedState.limit = this.validateLimit(validatedState.limit, this.state.limit)
+      }
+
+      // Determine if this is a search/filter operation (should replace URL)
+      // vs pagination navigation (should push to history)
+      const isSearchOrFilter =
+        'search' in validatedState ||
+        'createdSort' in validatedState ||
+        'updatedSort' in validatedState ||
+        'limit' in validatedState ||
+        ('page' in validatedState && validatedState.page === 1)
+
+      this.state = { ...this.state, ...validatedState }
+      this.updateURL(isSearchOrFilter)
+      this.updateSortIcons()
+      this.renderMods()
+    }
+    toggleCreatedSort() {
+      const newSort =
+        this.state.createdSort === 'default'
+          ? 'asc'
+          : this.state.createdSort === 'asc'
+            ? 'desc'
+            : 'default'
+      this.setState({ createdSort: newSort, updatedSort: 'default', page: 1 })
+    }
+
+    toggleUpdatedSort() {
+      const newSort =
+        this.state.updatedSort === 'default'
+          ? 'asc'
+          : this.state.updatedSort === 'asc'
+            ? 'desc'
+            : 'default'
+      this.setState({ updatedSort: newSort, createdSort: 'default', page: 1 })
+    }
+    updateSortIcons() {
+      // Update created sort icons using cached elements
+      if (this.elements.sortIcons.createdDefault) {
+        this.elements.sortIcons.createdDefault.classList.toggle(
+          'hidden',
+          this.state.createdSort !== 'default'
+        )
+      }
+      if (this.elements.sortIcons.createdAsc) {
+        this.elements.sortIcons.createdAsc.classList.toggle(
+          'hidden',
+          this.state.createdSort !== 'asc'
+        )
+      }
+      if (this.elements.sortIcons.createdDesc) {
+        this.elements.sortIcons.createdDesc.classList.toggle(
+          'hidden',
+          this.state.createdSort !== 'desc'
+        )
+      }
+
+      // Update updated sort icons using cached elements
+      if (this.elements.sortIcons.updatedDefault) {
+        this.elements.sortIcons.updatedDefault.classList.toggle(
+          'hidden',
+          this.state.updatedSort !== 'default'
+        )
+      }
+      if (this.elements.sortIcons.updatedAsc) {
+        this.elements.sortIcons.updatedAsc.classList.toggle(
+          'hidden',
+          this.state.updatedSort !== 'asc'
+        )
+      }
+      if (this.elements.sortIcons.updatedDesc) {
+        this.elements.sortIcons.updatedDesc.classList.toggle(
+          'hidden',
+          this.state.updatedSort !== 'desc'
+        )
+      }
+    }
+    updateURL(isSearchOrFilter = false) {
+      const params = new URLSearchParams()
+
+      if (this.state.search) params.set('q', this.state.search)
+      if (this.state.createdSort !== 'default') params.set('created', this.state.createdSort)
+      if (this.state.updatedSort !== 'default') params.set('updated', this.state.updatedSort)
+      if (this.state.page > 1) params.set('page', this.state.page.toString())
+      if (this.state.limit !== 12) params.set('limit', this.state.limit.toString())
+
+      const newUrl = `${window.location.pathname}${params.toString() ? `?${params.toString()}` : ''}`
+
+      // Only push to history for pagination navigation, replace for search/filtering
+      if (!isSearchOrFilter && this.state.page > 1) {
+        window.history.pushState({}, '', newUrl)
+      } else {
+        window.history.replaceState({}, '', newUrl)
+      }
+    }
+
+    getFilteredMods() {
+      let filtered = [...this.allMods]
+
+      // Filter by search
+      const searchTerm = this.state.search.toLowerCase()
+      if (searchTerm) {
+        filtered = filtered.filter(
+          mod =>
+            mod.name.toLowerCase().includes(searchTerm) ||
+            mod.description.toLowerCase().includes(searchTerm) ||
+            mod.author.toLowerCase().includes(searchTerm) ||
+            (mod.tags?.some(tag => tag.toLowerCase().includes(searchTerm)) ?? false)
+        )
+      }
+
+      // Sort by createdAt if chosen
+      if (this.state.createdSort !== 'default') {
+        filtered.sort((a, b) => {
+          const diff = new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
+          return this.state.createdSort === 'asc' ? diff : -diff
+        })
+      }
+
+      // Sort by updatedAt if chosen
+      if (this.state.updatedSort !== 'default') {
+        filtered.sort((a, b) => {
+          const diff = new Date(a.updatedAt).getTime() - new Date(b.updatedAt).getTime()
+          return this.state.updatedSort === 'asc' ? diff : -diff
+        })
+      }
+
+      return filtered
+    }
+    renderMods() {
+      // Prevent concurrent renders
+      if (this.isRendering) return
+      this.isRendering = true
+
+      // Use requestAnimationFrame for smoother rendering
+      requestAnimationFrame(() => {
+        try {
+          const filteredMods = this.getFilteredMods()
+          const totalPages = Math.ceil(filteredMods.length / this.state.limit)
+          const startIndex = (this.state.page - 1) * this.state.limit
+          const endIndex = startIndex + this.state.limit
+          const paginatedMods = filteredMods.slice(startIndex, endIndex)
+
+          if (paginatedMods.length > 0) {
+            if (this.elements.noResults) {
+              this.elements.noResults.classList.add('hidden')
+            }
+            if (this.elements.modsGrid) {
+              this.elements.modsGrid.classList.remove('hidden')
+            }
+
+            // Check if we're in the default state
+            const isDefaultState =
+              this.state.search === '' &&
+              this.state.createdSort === 'default' &&
+              this.state.updatedSort === 'default' &&
+              this.state.page === 1 &&
+              this.state.limit === 12
+
+            // Re-render if: not in default state, OR we've been modified and need to restore default
+            if (!isDefaultState || this.hasBeenModified) {
+              // Create document fragment for better performance
+              const fragment = document.createDocumentFragment()
+              const tempDiv = document.createElement('div')
+
+              tempDiv.innerHTML = paginatedMods
+                .map(
+                  mod => `
+                <a
+                  class="mod-card flex w-full flex-col gap-4 border-transparent transition-colors duration-100 hover:opacity-90"
+                  href="${this.getLocalePath(`/mods/${mod.id}${this.buildSearchParams()}`)}"
+                >
+                  <div class="relative mb-0 block aspect-[1.85/1] h-48 overflow-hidden rounded-md border-2 border-dark object-cover shadow-md">
+                    <img
+                      alt="${mod.name}"
+                      class="h-full w-full object-cover transition-transform duration-100 hover:scale-105"
+                      loading="lazy"
+                      src="${mod.image}"
+                    />
+                  </div>
+                  <div>
+                    <h2 class="text-lg font-bold">
+                      ${mod.name} <span class="ml-1 text-sm font-normal">${this.translations.by} @${mod.author}</span>
+                    </h2>
+                    <p class="text-sm font-thin line-clamp-2">${mod.description}</p>
+                  </div>
+                </a>
+              `
+                )
+                .join('')
+
+              // Move all children to fragment
+              while (tempDiv.firstChild) {
+                fragment.appendChild(tempDiv.firstChild)
+              }
+
+              // Clear and append fragment (single reflow)
+              if (this.elements.modsGrid) {
+                this.elements.modsGrid.innerHTML = ''
+                this.elements.modsGrid.appendChild(fragment)
+              }
+
+              // Track that we've modified the content
+              this.hasBeenModified = !isDefaultState
+            }
+          } else {
+            if (this.elements.modsGrid) {
+              this.elements.modsGrid.classList.add('hidden')
+            }
+            if (this.elements.noResults) {
+              this.elements.noResults.classList.replace('hidden', 'flex')
+            }
+            this.hasBeenModified = true
+          }
+
+          this.renderPagination(totalPages, filteredMods.length)
+        } finally {
+          this.isRendering = false
+        }
+      })
+    }
+
+    buildSearchParams() {
+      const params = new URLSearchParams()
+      if (this.state.search) params.set('q', this.state.search)
+      if (this.state.createdSort !== 'default') params.set('created', this.state.createdSort)
+      if (this.state.updatedSort !== 'default') params.set('updated', this.state.updatedSort)
+      if (this.state.page > 1) params.set('page', this.state.page.toString())
+      if (this.state.limit !== 12) params.set('limit', this.state.limit.toString())
+      return params.toString() ? `?${params.toString()}` : ''
+    }
+
+    buildPaginationUrl(targetPage) {
+      const params = new URLSearchParams(this.buildSearchParams())
+      if (targetPage > 1) {
+        params.set('page', targetPage.toString())
+      } else {
+        params.delete('page')
+      }
+      return `/mods?${params.toString()}`
+    }
+    navigatePage(pageNum) {
+      // Validate page number
+      const validatedPage = this.validatePage(pageNum, this.state.page)
+
+      // Update state without going through setState to handle URL properly
+      this.state = { ...this.state, page: validatedPage }
+
+      // For pagination navigation, push to history if page > 1, otherwise replace
+      this.updateURL(false) // false = this is navigation, not search/filter
+      this.updateSortIcons()
+      this.renderMods()
+      window.scrollTo(0, 0)
+    }
+
+    renderPagination(totalPages, totalItems) {
+      const paginationElement = this.elements.pagination
+
+      if (!paginationElement) return
+
+      if (totalPages <= 1) {
+        paginationElement.innerHTML = ''
+        paginationElement.classList.add('hidden')
+        return
+      }
+
+      const prevButton =
+        this.state.page > 1
+          ? `<a
+          class="px-3 py-2 text-dark hover:text-gray-600"
+          href="${this.getLocalePath(this.buildPaginationUrl(this.state.page - 1))}"
+          data-page="${this.state.page - 1}"
+        >
+          &lt;
+        </a>`
+          : `<span class="pointer-events-none px-3 py-2 text-gray-400">&lt;</span>`
+
+      const nextButton =
+        this.state.page < totalPages
+          ? `<a
+          class="px-3 py-2 text-dark hover:text-gray-600"
+          href="${this.getLocalePath(this.buildPaginationUrl(this.state.page + 1))}"
+          data-page="${this.state.page + 1}"
+        >
+          &gt;
+        </a>`
+          : `<span class="pointer-events-none px-3 py-2 text-gray-400">&gt;</span>`
+
+      const paginationText = this.translations.pagination.pagination
+        .replace('{totalPages}', totalPages.toString())
+        .replace('{totalItems}', totalItems.toString())
+
+      paginationElement.innerHTML = `
+        ${prevButton}
+        <form class="flex items-center gap-2" id="page-form">
+          <input
+            id="page-input"
+            aria-label="Page number"
+            class="w-16 rounded border border-dark bg-transparent px-2 py-1 text-center text-sm"
+            type="text"
+            value="${this.state.page}"
+          />
+          <span class="text-sm">${paginationText.replace('{input}', '')}</span>
+        </form>
+        ${nextButton}
+      `
+
+      // Bind pagination events
+      paginationElement.classList.replace('hidden', 'flex')
+
+      const pageForm = document.getElementById('page-form')
+      const pageInput = document.getElementById('page-input')
+
+      if (pageForm && pageInput instanceof HTMLInputElement) {
+        pageForm.addEventListener('submit', e => {
+          e.preventDefault()
+          const inputValue = pageInput.value
+          const newPage = this.validatePage(inputValue, this.state.page)
+
+          // Additional validation for page range
+          if (newPage >= 1 && newPage <= totalPages) {
+            this.navigatePage(newPage)
+          } else {
+            // Reset to current page if out of range
+            pageInput.value = this.state.page.toString()
+          }
+        })
+      }
+
+      // Bind navigation links
+      paginationElement.addEventListener('click', e => {
+        if (e.target instanceof HTMLAnchorElement && e.target.dataset.page) {
+          e.preventDefault()
+          this.navigatePage(parseInt(e.target.dataset.page, 10))
+        }
+      })
+    }
+  }
+
+  // Initialize the mods search
+  new ModsSearch()
+</script>
diff --git a/src/components/ModsList.tsx b/src/components/ModsList.tsx
deleted file mode 100644
index d388a76..0000000
--- a/src/components/ModsList.tsx
+++ /dev/null
@@ -1,236 +0,0 @@
-import { icon, library } from '@fortawesome/fontawesome-svg-core'
-import { faSort, faSortDown, faSortUp } from '@fortawesome/free-solid-svg-icons'
-import { useEffect, useState, type FormEvent } from 'react'
-
-import { useModsSearch } from '~/hooks/useModsSearch'
-import { type ZenTheme } from '~/mods'
-import { getUI, type Locale } from '~/utils/i18n'
-
-// Add icons to the library
-library.add(faSort, faSortUp, faSortDown)
-
-// Create icon objects
-const defaultSortIcon = icon({ prefix: 'fas', iconName: 'sort' })
-const ascSortIcon = icon({ prefix: 'fas', iconName: 'sort-up' })
-const descSortIcon = icon({ prefix: 'fas', iconName: 'sort-down' })
-
-type ModsListProps = {
-  allMods: ZenTheme[]
-  locale: Locale
-}
-
-const ModsList = ({ allMods, locale }: ModsListProps) => {
-  const {
-    search,
-    createdSort,
-    updatedSort,
-    page,
-    limit,
-    totalPages,
-    totalItems,
-    setSearch,
-    toggleCreatedSort,
-    toggleUpdatedSort,
-    setPage,
-    setLimit,
-    mods: paginatedMods,
-    // searchParams,
-  } = useModsSearch(allMods)
-
-  const [pageInput, setPageInput] = useState(page.toString())
-
-  // Keep page input in sync with actual page
-  useEffect(() => {
-    setPageInput(page.toString())
-  }, [page])
-
-  function getSortIcon(state: 'default' | 'asc' | 'desc') {
-    if (state === 'asc') return ascSortIcon
-    if (state === 'desc') return descSortIcon
-    return defaultSortIcon
-  }
-
-  function handleSearch(e: FormEvent<HTMLInputElement>) {
-    const target = e.target as HTMLInputElement
-    setSearch(target.value)
-  }
-
-  function handleLimitChange(e: FormEvent<HTMLSelectElement>) {
-    const target = e.target as HTMLSelectElement
-    setLimit(Number.parseInt(target.value, 10))
-  }
-
-  function handlePageSubmit(e: FormEvent<HTMLFormElement>) {
-    e.preventDefault()
-    const newPage = Number.parseInt(pageInput, 10)
-    if (!Number.isNaN(newPage) && newPage >= 1 && newPage <= totalPages) {
-      setPage(newPage)
-      window.scrollTo(0, 0)
-    } else {
-      setPageInput(page.toString())
-    }
-  }
-
-  function handlePageInputChange(e: FormEvent<HTMLInputElement>) {
-    const target = e.target as HTMLInputElement
-    setPageInput(target.value)
-  }
-
-  function navigatePage(pageNum: number) {
-    setPage(pageNum)
-    window.scrollTo(0, 0)
-  }
-
-  const {
-    routes: { mods },
-  } = getUI(locale)
-
-  function renderPagination() {
-    if (totalPages <= 1) return null
-    return (
-      <div className="mx-auto mb-12 flex items-center justify-center gap-4 px-8">
-        <button
-          className={`px-3 py-2 ${page === 1 ? 'pointer-events-none text-gray-400' : 'text-dark hover:text-gray-600'}`}
-          onClick={() => navigatePage(page - 1)}
-          type="button"
-        >
-          &lt;
-        </button>
-        <form className="flex items-center gap-2" onSubmit={handlePageSubmit}>
-          {mods.pagination.pagination.split('{input}').map((value, index) => {
-            if (index === 0) {
-              return (
-                <input
-                  key={index}
-                  aria-label="Page number"
-                  className="w-16 rounded border border-dark bg-transparent px-2 py-1 text-center text-sm"
-                  onInput={handlePageInputChange}
-                  type="text"
-                  value={pageInput}
-                />
-              )
-            }
-            return (
-              <span className="text-sm" key={value}>
-                {value
-                  .replace('{totalPages}', totalPages.toString())
-                  .replace('{totalItems}', totalItems.toString())}
-              </span>
-            )
-          })}
-        </form>
-        <button
-          className={`px-3 py-2 ${page === totalPages ? 'pointer-events-none text-gray-400' : 'text-dark hover:text-gray-600'}`}
-          onClick={() => navigatePage(page + 1)}
-          type="button"
-        >
-          &gt;
-        </button>
-      </div>
-    )
-  }
-
-  return (
-    <div>
-      <div className="flex flex-col items-center gap-4">
-        <div className="flex w-full flex-col items-center justify-center gap-6">
-          <input
-            className="w-full rounded-full border-2 border-dark bg-transparent px-6 py-2 text-lg outline-none"
-            id="search"
-            onInput={handleSearch}
-            placeholder={mods.search}
-            type="text"
-            value={search}
-          />
-        </div>
-
-        <div className="grid w-full grid-cols-2 place-items-center gap-4 sm:grid-cols-3">
-          <div className="flex flex-col items-start gap-2">
-            <button
-              className="text-md flex items-center gap-2 px-4 py-2 font-semibold"
-              onClick={toggleCreatedSort}
-              type="button"
-            >
-              {mods.sort.lastCreated}
-              <span
-                // biome-ignore lint/security/noDangerouslySetInnerHtml: Icons are safe
-                dangerouslySetInnerHTML={{
-                  __html: getSortIcon(createdSort).html[0],
-                }}
-              />
-            </button>
-          </div>
-
-          <div className="flex flex-col items-center gap-2">
-            <button
-              className="text-md flex items-center gap-2 px-4 py-2 font-semibold"
-              onClick={toggleUpdatedSort}
-              type="button"
-            >
-              {mods.sort.lastUpdated}
-              <span
-                // biome-ignore lint/security/noDangerouslySetInnerHtml: Icons are safe
-                dangerouslySetInnerHTML={{
-                  __html: getSortIcon(updatedSort).html[0],
-                }}
-              />
-            </button>
-          </div>
-
-          <div className="flex items-center gap-2 px-4 py-2">
-            <label className="text-md font-semibold" htmlFor="limit">
-              {mods.sort.perPage}
-            </label>
-            <select
-              className="rounded border border-dark bg-transparent px-2 py-1 text-sm [&>option]:text-black"
-              id="limit"
-              onInput={handleLimitChange}
-              value={limit}
-            >
-              <option value="12">12</option>
-              <option value="24">24</option>
-              <option value="48">48</option>
-              <option value="96">96</option>
-            </select>
-          </div>
-        </div>
-      </div>
-
-      <div className="grid w-full grid-cols-1 place-items-start gap-12 py-6 md:grid-cols-2 xl:grid-cols-3">
-        {paginatedMods.length > 0 ? (
-          paginatedMods.map(mod => (
-            <a
-              className="mod-card flex w-full flex-col gap-4 border-transparent transition-colors duration-100 hover:opacity-90"
-              href={`/mods/${mod.id}`}
-              key={mod.id}
-            >
-              <div className="relative mb-0 block aspect-[1.85/1] h-48 overflow-hidden rounded-md border-2 border-dark object-cover shadow-md">
-                <img
-                  alt={mod.name}
-                  className="h-full w-full object-cover transition-transform duration-100 hover:scale-105"
-                  loading="lazy"
-                  src={mod.image}
-                />
-              </div>
-              <div>
-                <h2 className="text-lg font-bold">
-                  {mod.name} <span className="ml-1 text-sm font-normal">by @{mod.author}</span>
-                </h2>
-                <p className="text-sm font-thin">{mod.description}</p>
-              </div>
-            </a>
-          ))
-        ) : (
-          <div className="col-span-4 grid place-items-center gap-4 place-self-center px-8 text-center">
-            <h2 className="text-lg font-bold">{mods.noResults}</h2>
-            <p className="text-sm font-thin">{mods.noResultsDescription}</p>
-          </div>
-        )}
-      </div>
-
-      {renderPagination()}
-    </div>
-  )
-}
-
-export default ModsList
diff --git a/src/components/ReleaseNoteItem.astro b/src/components/ReleaseNoteItem.astro
index 5906dee..3f967d2 100644
--- a/src/components/ReleaseNoteItem.astro
+++ b/src/components/ReleaseNoteItem.astro
@@ -1,6 +1,7 @@
 ---
 import InfoIcon from '~/icons/InfoIcon.astro'
 
+import { getIntlLocale } from '~/constants/i18n'
 import { releaseNotes as releaseNotesData } from '~/release-notes'
 import { getLocale, getPath, getUI } from '~/utils/i18n'
 import { type ReleaseNote, getReleaseNoteFirefoxVersion } from '../release-notes'
@@ -184,7 +185,7 @@ generateItems(props.knownIssues, 'known')
         }
       </div>
       <div class="text-xs font-bold opacity-80">
-        {date && date.toLocaleDateString('en-US', { dateStyle: 'long' })}
+        {date && date.toLocaleDateString(getIntlLocale(locale), { dateStyle: 'long' })}
       </div>
     </div>
     {
diff --git a/src/components/ReleaseNoteListItem.astro b/src/components/ReleaseNoteListItem.astro
index a99c619..342771d 100644
--- a/src/components/ReleaseNoteListItem.astro
+++ b/src/components/ReleaseNoteListItem.astro
@@ -1,7 +1,7 @@
 ---
-import { getLocale, getPath, getUI } from '~/utils/i18n'
+import { getLocale, getUI } from '~/utils/i18n'
 
-const { type, content, link } = Astro.props as {
+interface Props {
   type: 'security' | 'feature' | 'fix' | 'theme' | 'break' | 'known'
   content: string
   link?: {
@@ -10,6 +10,8 @@ const { type, content, link } = Astro.props as {
   } | null
 }
 
+const { type, content, link } = Astro.props
+
 const locale = getLocale(Astro)
 
 const {
diff --git a/src/components/Sponsors.astro b/src/components/Sponsors.astro
index 95b9f19..d54d3d1 100644
--- a/src/components/Sponsors.astro
+++ b/src/components/Sponsors.astro
@@ -21,7 +21,7 @@ const {
 <section id="sponsors" class:list={['py-12', !showSponsors && 'hidden']}>
   <div class="mx-auto flex flex-col text-center">
     <motion.span client:load {...getTitleAnimation(0.2)}>
-      <Description class="mb-2 text-6xl font-bold">Our Sponsors</Description>
+      <Description class="mb-2 text-6xl font-bold">{sponsors.title}</Description>
     </motion.span>
     <motion.span client:load {...getTitleAnimation(0.4)}>
       <Description set:html={sponsors.description} />
diff --git a/src/components/download/ButtonCard.astro b/src/components/download/ButtonCard.astro
index 81df8ec..15b59df 100644
--- a/src/components/download/ButtonCard.astro
+++ b/src/components/download/ButtonCard.astro
@@ -1,4 +1,13 @@
 ---
+import { getLocale, getUI } from '~/utils/i18n'
+
+const locale = getLocale(Astro)
+const {
+  routes: {
+    download: { buttonCard },
+  },
+} = getUI(locale)
+
 interface Props {
   label: string
   href: string
@@ -42,7 +51,7 @@ const { label, href, checksum } = Astro.props
               </svg>
             </button>
             <span class="absolute -top-10 left-1/2 z-50 hidden min-w-[120px] -translate-x-1/2 select-none whitespace-nowrap rounded-md border border-subtle bg-[rgba(255,255,255,0.98)] px-3 py-2 text-xs text-gray-700 opacity-100 shadow transition-opacity duration-150 group-focus-within/checksum:hidden group-hover/checksum:flex group-focus-within/checksum:group-hover/checksum:hidden dark:bg-[rgba(24,24,27,0.98)] dark:text-gray-100">
-              Show SHA-256
+              {buttonCard.showChecksum}
             </span>
             <span class="checksum-tooltip popover absolute -left-14 -top-12 z-50 hidden min-w-[220px] items-center gap-2 whitespace-nowrap rounded-md border border-subtle bg-[rgba(255,255,255,0.98)] px-3 py-2 text-xs text-gray-700 opacity-100 shadow transition-opacity duration-150 group-focus-within/checksum:flex dark:bg-[rgba(24,24,27,0.98)] dark:text-gray-100">
               <span class="font-mono flex-1 truncate text-xs">{checksum}</span>
@@ -50,7 +59,7 @@ const { label, href, checksum } = Astro.props
                 type="button"
                 class="copy-btn rounded bg-coral px-2 py-1 text-xs text-white hover:bg-coral/80 data-[twilight='true']:bg-zen-blue data-[twilight='true']:hover:bg-zen-blue/80"
               >
-                Copy
+                {buttonCard.copy}
               </button>
             </span>
           </span>
@@ -62,7 +71,7 @@ const { label, href, checksum } = Astro.props
         <span
           class="release-type-tag rounded-full bg-coral/10 px-2 py-1 text-xs font-medium text-coral transition-colors duration-200 group-hover:bg-coral/20 data-[twilight='true']:bg-zen-blue/10 data-[twilight='true']:text-zen-blue data-[twilight='true']:group-hover:bg-zen-blue/20"
         >
-          Beta
+          {buttonCard.beta}
         </span>
         <div
           class="download-arrow-icon text-muted-foreground rounded-xl border border-subtle p-2 transition-colors duration-200 group-hover:border-coral group-hover:text-coral data-[twilight='true']:group-hover:border-zen-blue data-[twilight='true']:group-hover:text-zen-blue"
diff --git a/src/components/download/release-data.ts b/src/components/download/release-data.ts
index 72a5c0b..58ab556 100644
--- a/src/components/download/release-data.ts
+++ b/src/components/download/release-data.ts
@@ -1,49 +1,61 @@
+import { getUI } from '~/utils/i18n'
+
 /**
  * Returns the releases object, injecting checksums dynamically.
+ * @param locale The locale to use for labels
  * @param checksums Record<string, string> mapping filenames to SHA-256 hashes
  */
-export function getReleasesWithChecksums(checksums: Record<string, string>) {
-  return {
-    macos: {
-      universal: {
-        link: 'https://github.com/zen-browser/desktop/releases/latest/download/zen.macos-universal.dmg',
-        label: 'Universal',
-        checksum: checksums['zen.macos-universal.dmg'],
+export function getReleasesWithChecksums(locale: string) {
+  const {
+    routes: {
+      download: {
+        links: { macos, windows, linux },
       },
     },
-    windows: {
-      x86_64: {
-        link: 'https://github.com/zen-browser/desktop/releases/latest/download/zen.installer.exe',
-        label: '64-bit (Recommended)',
-        checksum: checksums['zen.installer.exe'],
-      },
-      arm64: {
-        link: 'https://github.com/zen-browser/desktop/releases/latest/download/zen.installer-arm64.exe',
-        label: 'ARM64',
-        checksum: checksums['zen.installer-arm64.exe'],
-      },
-    },
-    linux: {
-      x86_64: {
-        tarball: {
-          link: 'https://github.com/zen-browser/desktop/releases/latest/download/zen.linux-x86_64.tar.xz',
-          label: 'Tarball',
-          checksum: checksums['zen.linux-x86_64.tar.xz'],
+  } = getUI(locale)
+  return (checksums: Record<string, string>) => {
+    return {
+      macos: {
+        universal: {
+          link: 'https://github.com/zen-browser/desktop/releases/latest/download/zen.macos-universal.dmg',
+          label: macos.universal,
+          checksum: checksums['zen.macos-universal.dmg'],
         },
       },
-      aarch64: {
-        tarball: {
-          link: 'https://github.com/zen-browser/desktop/releases/latest/download/zen.linux-aarch64.tar.xz',
-          label: 'Tarball',
-          checksum: checksums['zen.linux-aarch64.tar.xz'],
+      windows: {
+        x86_64: {
+          link: 'https://github.com/zen-browser/desktop/releases/latest/download/zen.installer.exe',
+          label: windows['64bit'],
+          checksum: checksums['zen.installer.exe'],
+        },
+        arm64: {
+          link: 'https://github.com/zen-browser/desktop/releases/latest/download/zen.installer-arm64.exe',
+          label: windows.ARM64,
+          checksum: checksums['zen.installer-arm64.exe'],
         },
       },
-      flathub: {
-        all: {
-          link: 'https://flathub.org/apps/app.zen_browser.zen',
-          label: 'Flathub',
+      linux: {
+        x86_64: {
+          tarball: {
+            link: 'https://github.com/zen-browser/desktop/releases/latest/download/zen.linux-x86_64.tar.xz',
+            label: linux.x86_64,
+            checksum: checksums['zen.linux-x86_64.tar.xz'],
+          },
+        },
+        aarch64: {
+          tarball: {
+            link: 'https://github.com/zen-browser/desktop/releases/latest/download/zen.linux-aarch64.tar.xz',
+            label: linux.aarch64,
+            checksum: checksums['zen.linux-aarch64.tar.xz'],
+          },
+        },
+        flathub: {
+          all: {
+            link: 'https://flathub.org/apps/app.zen_browser.zen',
+            label: linux.flathub,
+          },
         },
       },
-    },
+    }
   }
 }
diff --git a/src/constants/i18n.ts b/src/constants/i18n.ts
index cfb486b..d9fe9d0 100644
--- a/src/constants/i18n.ts
+++ b/src/constants/i18n.ts
@@ -1,4 +1,19 @@
-export const I18N = {
+const UI_EN = (await import('~/i18n/en/translation.json', { with: { type: 'json' } })).default
+const UI_JA = (await import('~/i18n/ja/translation.json', { with: { type: 'json' } })).default
+
+export const i18n = {
   DEFAULT_LOCALE: 'en',
-  LOCALES: [{ label: 'English', value: 'en' }],
-} as const
+  LOCALES: [
+    { label: 'English', value: 'en', ui: UI_EN, intl: 'en-US' },
+    { label: '日本語', value: 'ja', ui: UI_JA, intl: 'ja-JP' },
+  ],
+}
+
+/**
+ * Type definition for UI translations based on the English translation
+ */
+export type UIProps = typeof UI_EN | typeof UI_JA
+
+export const getIntlLocale = (locale: string) => {
+  return i18n.LOCALES.find(l => l.value === locale)?.intl
+}
diff --git a/src/constants/index.ts b/src/constants/index.ts
index e38ca40..717f6c0 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -1,5 +1,5 @@
 import { CHECKSUMS } from './checksum'
-import { I18N } from './i18n'
+import { i18n as I18N } from './i18n'
 
 export const CONSTANT = {
   I18N,
diff --git a/src/hooks/useModsSearch.ts b/src/hooks/useModsSearch.ts
deleted file mode 100644
index 9fd8882..0000000
--- a/src/hooks/useModsSearch.ts
+++ /dev/null
@@ -1,172 +0,0 @@
-import { useEffect, useState } from 'react'
-
-import { type ZenTheme } from '../mods'
-
-type SortOrder = 'default' | 'asc' | 'desc'
-
-type ModsSearchState = {
-  search: string
-  createdSort: SortOrder
-  updatedSort: SortOrder
-  page: number
-  limit: number
-}
-
-const DEFAULT_LIMIT = 12
-
-export function useModsSearch(mods: ZenTheme[]) {
-  const [searchParams, setSearchParams] = useState<URLSearchParams>()
-  const [state, setState] = useState<ModsSearchState>({
-    search: '',
-    createdSort: 'desc',
-    updatedSort: 'default',
-    page: 1,
-    limit: DEFAULT_LIMIT,
-  })
-
-  // Initialize search params
-  useEffect(() => {
-    const params = new URLSearchParams(window.location.search)
-    setSearchParams(params)
-    setState({
-      search: params.get('q') || '',
-      createdSort: (params.get('created') as SortOrder) || 'desc',
-      updatedSort: (params.get('updated') as SortOrder) || 'default',
-      page: Number.parseInt(params.get('page') || '1', 10),
-      limit: Number.parseInt(params.get('limit') || String(DEFAULT_LIMIT), 10),
-    })
-  }, [])
-
-  // Update URL when state changes
-  useEffect(() => {
-    if (!searchParams) return
-
-    if (state.search) {
-      searchParams.set('q', state.search)
-    } else {
-      searchParams.delete('q')
-    }
-
-    if (state.createdSort !== 'default') {
-      searchParams.set('created', state.createdSort)
-    } else {
-      searchParams.delete('created')
-    }
-
-    if (state.updatedSort !== 'default') {
-      searchParams.set('updated', state.updatedSort)
-    } else {
-      searchParams.delete('updated')
-    }
-
-    if (state.page > 1) {
-      searchParams.set('page', state.page.toString())
-    } else {
-      searchParams.delete('page')
-    }
-
-    if (state.limit !== DEFAULT_LIMIT) {
-      searchParams.set('limit', state.limit.toString())
-    } else {
-      searchParams.delete('limit')
-    }
-
-    const newUrl = `${window.location.pathname}${searchParams.toString() ? `?${searchParams.toString()}` : ''}`
-
-    if (state.page > 1) {
-      window.history.pushState({}, '', newUrl)
-    } else {
-      window.history.replaceState({}, '', newUrl)
-    }
-  }, [state, searchParams])
-
-  const filteredMods = (() => {
-    let filtered = [...mods]
-
-    // Filter by search
-    const searchTerm = state.search.toLowerCase()
-    if (searchTerm) {
-      filtered = filtered.filter(
-        mod =>
-          mod.name.toLowerCase().includes(searchTerm) ||
-          mod.description.toLowerCase().includes(searchTerm) ||
-          mod.author.toLowerCase().includes(searchTerm) ||
-          (mod.tags?.some(tag => tag.toLowerCase().includes(searchTerm)) ?? false)
-      )
-    }
-
-    // Sort by createdAt if chosen
-    if (state.createdSort !== 'default') {
-      filtered.sort((a, b) => {
-        const diff = new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
-        return state.createdSort === 'asc' ? diff : -diff
-      })
-    }
-
-    // Sort by updatedAt if chosen
-    if (state.updatedSort !== 'default') {
-      filtered.sort((a, b) => {
-        const diff = new Date(a.updatedAt).getTime() - new Date(b.updatedAt).getTime()
-        return state.updatedSort === 'asc' ? diff : -diff
-      })
-    }
-
-    return filtered
-  })()
-
-  // Calculate pagination
-  const totalPages = Math.ceil(filteredMods.length / state.limit)
-  const startIndex = (state.page - 1) * state.limit
-  const endIndex = startIndex + state.limit
-  const paginatedMods = filteredMods.slice(startIndex, endIndex)
-
-  const setSearch = (search: string) => {
-    setState(prev => ({ ...prev, search, page: 1 })) // Reset page when search changes
-  }
-
-  const toggleCreatedSort = () => {
-    setState(prev => ({
-      ...prev,
-      createdSort:
-        prev.createdSort === 'default' ? 'asc' : prev.createdSort === 'asc' ? 'desc' : 'default',
-      page: 1, // Reset page when sort changes
-    }))
-  }
-
-  const toggleUpdatedSort = () => {
-    setState(prev => ({
-      ...prev,
-      updatedSort:
-        prev.updatedSort === 'default' ? 'asc' : prev.updatedSort === 'asc' ? 'desc' : 'default',
-      page: 1, // Reset page when sort changes
-    }))
-  }
-
-  const setPage = (page: number) => {
-    setState(prev => ({
-      ...prev,
-      page: Math.max(1, Math.min(page, totalPages)),
-    }))
-  }
-
-  const setLimit = (limit: number) => {
-    setState(prev => ({ ...prev, limit, page: 1 })) // Reset page when limit changes
-  }
-
-  return {
-    search: state.search,
-    createdSort: state.createdSort,
-    updatedSort: state.updatedSort,
-    page: state.page,
-    limit: state.limit,
-    totalPages,
-    totalItems: filteredMods.length,
-    setSearch,
-    toggleCreatedSort,
-    toggleUpdatedSort,
-    setPage,
-    setLimit,
-    mods: paginatedMods,
-    searchParams,
-  }
-}
diff --git a/src/i18n/en/translation.json b/src/i18n/en/translation.json
index fa0cda0..e2c4e2e 100644
--- a/src/i18n/en/translation.json
+++ b/src/i18n/en/translation.json
@@ -3,7 +3,14 @@
     "index": {
       "title": "Zen Browser",
       "hero": {
-        "title": ["welcome", "to", "a", "calmer", "internet"],
+        "title": [
+          { "text": "welcome ", "highlight": false },
+          { "text": "to ", "highlight": false },
+          { "text": "\n", "highlight": false },
+          { "text": "a ", "highlight": false },
+          { "text": "calmer ", "highlight": true },
+          { "text": "internet", "highlight": false }
+        ],
         "description": [
           "Beautifully designed, privacy-focused, and packed with features.",
           "We care about your experience, not your data."
@@ -14,10 +21,8 @@
         }
       },
       "features": {
-        "title1": "Productivity",
-        "title2": "at",
-        "title3": "its best",
-        "description": "Zen Browser is packed with features that help you stay productive and focused. Browsers should be tools that help you get things done, not distractions that keep you from your work.",
+        "titles": ["Productivity ", "at ", "its best"],
+        "description": "Zen is packed with features that help you stay productive and focused. Browsers should be tools that help you get things done, not distractions that keep you from your work.",
         "featureTabs": {
           "workspaces": {
             "title": "Workspaces",
@@ -48,7 +53,7 @@
         }
       },
       "community": {
-        "title": ["Our", "Core", "Values"],
+        "title": ["Our ", "Core ", "Values"],
         "description": "We make it not only a priority, but a necessity to ensure that Zen always strikes the right balance between beauty, performance, and privacy. We are committed to making Zen the most beautiful, productive, and privacy-respecting browser out there — without compromising on your experience.",
         "lists": {
           "freeAndOpenSource": {
@@ -78,6 +83,7 @@
         "pagination": "{input} of {totalPages} ({totalItems} items)"
       },
       "search": "Type to search...",
+      "by": "by",
       "sort": {
         "lastCreated": "Last created",
         "lastUpdated": "Last updated",
@@ -92,9 +98,9 @@
           "description": "You need to have Zen Browser installed to install this theme.",
           "button": "Download now!"
         },
-        "createdBy": "Created by <a href={link} class=\"zen-link font-bold\">{author}</a> • <span class=\"font-bold\">v{version}</span>",
-        "creationDate": "Creation date • <b>{createdAt}</b>",
-        "latestUpdate": "Latest update • <b>{updatedAt}</b>",
+        "createdBy": "Created by {author} • <b>v{version}</b>",
+        "creationDate": "Creation date: <b>{createdAt}</b>",
+        "latestUpdate": "Latest update: <b>{updatedAt}</b>",
         "visitModHomepage": "Visit mod homepage",
         "installMod": "Install Mod 🎉",
         "uninstallMod": "Uninstall Mod",
@@ -102,9 +108,8 @@
       }
     },
     "releaseNotes": {
-      "title": "Release notes - Zen Browser",
       "topSection": {
-        "title": "Release Notes",
+        "title": "Changelog",
         "description": "Stay up to date with the latest changes to Zen! Since the <a class=\"zen-link\" href=\"#1.0.0-a.1\">first release</a> till <a class=\"zen-link\" href=\"#{latestVersion}\">{latestVersion}</a>, we've been working hard to make Zen Browser the best it can be. Thanks everyone for your feedback! ❤️"
       },
       "list": {
@@ -256,25 +261,25 @@
       }
     },
     "download": {
-      "title": "Download - Zen Browser",
-      "description": "Download Zen Browser for your platform and experience a more mindful internet browsing experience. All downloads include SHA256 checksums for verification.",
+      "title": "Download Zen",
+      "description": "Download Zen for your platform and experience a more mindful internet browsing experience. All downloads include SHA256 checksums for verification.",
       "twilightInfo": "You're currently in Twilight mode, this means you're downloading the latest experimental features and updates.",
       "alertInfo": {
         "description": "<strong class='font-medium text-zen-blue'>Twilight Mode:</strong> You're currently in Twilight mode, this means you're downloading the latest experimental features and updates."
       },
       "platformSelector": {
         "title": "Platform Selector",
-        "description": "Select your platform to download Zen Browser."
+        "description": "Select your platform to download Zen."
       },
       "additionalResources": {
         "title": "Additional Resources",
         "sourceCode": {
           "title": "Source Code",
-          "description": "Explore Zen Browser's source code on GitHub. Contribute to the project or build your own version."
+          "description": "Explore Zen's source code on GitHub. Contribute to the project or build your own version."
         },
         "documentation": {
           "title": "Documentation",
-          "description": "Access comprehensive documentation, guides, and tutorials for Zen Browser."
+          "description": "Access comprehensive documentation, guides, and tutorials for Zen."
         }
       },
       "securityNotice": {
@@ -293,6 +298,20 @@
         "mac": "Works on both new Apple (M-Series) and older Intel Macs.<br />Requires macOS 11.0 or later.",
         "windows": "Works on Windows 10 and Windows 11.<br />Not sure which version to get? Most people should choose the 64-bit installer.",
         "linux": "Works with many Linux versions.<br />Pick the download that matches your system."
+      },
+      "links": {
+        "macos": { "universal": "Universal" },
+        "windows": { "64bit": "64-bit (Recommended)", "ARM64": "ARM64" },
+        "linux": {
+          "flathub": "Flathub",
+          "x86_64": "Tarball",
+          "aarch64": "Tarball"
+        }
+      },
+      "buttonCard": {
+        "copy": "Copy",
+        "showChecksum": "Show SHA-256",
+        "beta": "Beta"
       }
     },
     "privacyPolicy": {
@@ -301,97 +320,97 @@
       "sections": {
         "introduction": {
           "title": "Introduction",
-          "body": "Welcome to Zen Browser! Your privacy is our priority. This Privacy Policy outlines the types of personal information we collect, how we use it, and the steps we take to protect your data when you use Zen Browser.",
+          "body": "Welcome to Zen! Your privacy is our priority. This Privacy Policy outlines the types of personal information we collect, how we use it, and the steps we take to protect your data when you use Zen.",
           "summary": "We don't sell data - We don't collect data - We don't track you"
         },
         "noCollect": {
           "title": "1. Information We Do Not Collect",
-          "body": "Zen Browser is designed with privacy in mind. We do not collect, store, or share any of your personal data. Here's what that means:"
+          "body": "Zen is designed with privacy in mind. We do not collect, store, or share any of your personal data. Here's what that means:"
         },
         "noTelemetry": {
           "title": "1.1. No Telemetry",
           "body": "We do not collect any telemetry data or crash reports.",
-          "body2": "Zen Browser has stripped out telemetry built into Mozilla Firefox. We have removed all telemetry data collection and crash reports."
+          "body2": "Zen has stripped out telemetry built into Mozilla Firefox. We have removed all telemetry data collection and crash reports."
         },
         "noPersonalData": {
           "title": "1.2. No Personal Data Collection",
-          "body": "Zen Browser does not collect any personal information such as your IP address, browsing history, search queries, or form data."
+          "body": "Zen does not collect any personal information such as your IP address, browsing history, search queries, or form data."
         },
         "noThirdParty": {
           "title": "1.3. No Third-Party Tracking",
-          "body": "We do not allow third-party trackers or analytics tools to operate within Zen Browser. Your browsing activity remains entirely private and is not shared with any third party. Mozilla is not considered a third party as it is the base of Zen Browser."
+          "body": "We do not allow third-party trackers or analytics tools to operate within Zen. Your browsing activity remains entirely private and is not shared with any third party. Mozilla is not considered a third party as it is the base of Zen."
         },
         "externalConnections": {
           "title": "1.4. External connections made at startup",
-          "body": "Zen Browser may make external connections at startup to check for updates and ensure the browser is up to date on plugins, addons, check for connectivity and Geolocation/push notifications services in order to comply with web standards. We, at Zen, do not collect any data from these connections, but they may be logged by third-party services or websites you visit. These connections are necessary for the proper functioning of the browser and are not used for tracking or profiling purposes. They can be disabled through the browser flags (about:config)."
+          "body": "Zen may make external connections at startup to check for updates and ensure the browser is up to date on plugins, addons, check for connectivity and Geolocation/push notifications services in order to comply with web standards. We, at Zen, do not collect any data from these connections, but they may be logged by third-party services or websites you visit. These connections are necessary for the proper functioning of the browser and are not used for tracking or profiling purposes. They can be disabled through the browser flags (about:config)."
         },
         "localStorage": {
           "title": "2. Information Stored Locally on Your Device"
         },
         "browsingData": {
           "title": "2.1. Browsing Data",
-          "body": "Zen Browser stores certain data locally on your device to enhance your browsing experience. This includes:"
+          "body": "Zen stores certain data locally on your device to enhance your browsing experience. This includes:"
         },
         "cookies": {
           "title": "Cookies",
-          "body": "Cookies are stored locally on your device and are not shared with Zen Browser or any third party. You have full control over the management of cookies through the browser's settings."
+          "body": "Cookies are stored locally on your device and are not shared with Zen or any third party. You have full control over the management of cookies through the browser's settings."
         },
         "cache": {
           "title": "Cache and Temporary Files",
-          "body": "Zen Browser may store cache files and other temporary data locally to improve performance. These files can be cleared at any time through the browser's settings."
+          "body": "Zen may store cache files and other temporary data locally to improve performance. These files can be cleared at any time through the browser's settings."
         },
         "settings": {
           "title": "2.2. Settings and Preferences",
-          "body": "Any customizations, settings, and preferences you make within Zen Browser are stored locally on your device. We do not have access to or control over this data."
+          "body": "Any customizations, settings, and preferences you make within Zen are stored locally on your device. We do not have access to or control over this data."
         },
         "sync": {
           "title": "3. Sync Feature",
-          "body": "Zen Browser offers a \"Sync\" feature, which is implemented using Mozilla Firefox's Sync feature. This feature allows you to synchronize your bookmarks, history, passwords, and other data across multiple devices. For this feature to work, your data is encrypted and stored on Mozilla's servers and is treated in accordance with their Privacy Policy. We, at Zen, cannot view any of this data.",
+          "body": "Zen offers a \"Sync\" feature, which is implemented using Mozilla Firefox's Sync feature. This feature allows you to synchronize your bookmarks, history, passwords, and other data across multiple devices. For this feature to work, your data is encrypted and stored on Mozilla's servers and is treated in accordance with their Privacy Policy. We, at Zen, cannot view any of this data.",
           "link1": "Mozilla Firefox Sync",
           "link2": "This is how we store your passwords"
         },
         "addons": {
           "title": "4. Add-ons and \"Mods\"",
-          "body": "You can install Add-ons from addons.mozilla.org. Zen Browser periodically checks for updates to these Add-ons.\nYou can also install \"Mods\" from zen-browser.app/mods. These Mods are hosted by our services and follow the same privacy policy our website. We do not collect any data from these Mods, they are purely static content that is downloaded to your device."
+          "body": "You can install Add-ons from addons.mozilla.org. Zen periodically checks for updates to these Add-ons.\nYou can also install \"Mods\" from zen-browser.app/mods. These Mods are hosted by our services and follow the same privacy policy our website. We do not collect any data from these Mods, they are purely static content that is downloaded to your device."
         },
         "security": {
           "title": "5. Data Security",
-          "body": "Although Zen Browser does not collect your data, we are committed to protecting the information that is stored locally on your device and, if you use the Sync feature, the encrypted data stored on Mozilla's servers. We recommend that you use secure passwords, enable device encryption, and regularly update your software to ensure your data remains safe.",
+          "body": "Although Zen does not collect your data, we are committed to protecting the information that is stored locally on your device and, if you use the Sync feature, the encrypted data stored on Mozilla's servers. We recommend that you use secure passwords, enable device encryption, and regularly update your software to ensure your data remains safe.",
           "note": "Note that most of the security measures are taken care by Mozilla Firefox."
         },
         "control": {
           "title": "6. Your Control",
           "deletionTitle": "6.1. Data Deletion",
-          "deletionBody": "You have full control over all data stored locally on your device by Zen Browser. You can clear your browsing data, cookies, and cache at any time using the browser's settings."
+          "deletionBody": "You have full control over all data stored locally on your device by Zen. You can clear your browsing data, cookies, and cache at any time using the browser's settings."
         },
         "website": {
           "title": "7. Our Website and Services",
-          "body": "Zen Browser's website and services do not use any third-party analytics, tracking, or CDN services. We do not collect any personal information from users visiting our website. The website is hosted on Cloudflare but with analytics and tracking disabled, Cloudflare may collect some analytics data from HTTP requests in order to provide security and performance improvements. However, this data is not linked to any personal information and is not used for tracking purposes.",
+          "body": "Zen's website and services do not use any third-party analytics, tracking, or CDN services. We do not collect any personal information from users visiting our website. The website is hosted on Cloudflare but with analytics and tracking disabled, Cloudflare may collect some analytics data from HTTP requests in order to provide security and performance improvements. However, this data is not linked to any personal information and is not used for tracking purposes.",
           "externalLinksTitle": "7.1. External links",
-          "externalLinksBody": "Zen Browser may contain links to external websites or services that are not owned or operated by us. We are not responsible for the content or privacy practices of these sites. We recommend that you review the privacy policies of these sites before providing them with any personal information."
+          "externalLinksBody": "Zen may contain links to external websites or services that are not owned or operated by us. We are not responsible for the content or privacy practices of these sites. We recommend that you review the privacy policies of these sites before providing them with any personal information."
         },
         "changes": {
           "title": "8. Changes to This Privacy Policy",
-          "body": "We may update this Privacy Policy from time to time to reflect changes in our practices or legal requirements. We will notify you of any significant changes by updating the effective date at the top of this policy. Continued use of Zen Browser after such changes constitutes your acceptance of the new terms."
+          "body": "We may update this Privacy Policy from time to time to reflect changes in our practices or legal requirements. We will notify you of any significant changes by updating the effective date at the top of this policy. Continued use of Zen after such changes constitutes your acceptance of the new terms."
         },
         "otherTelemetry": {
           "title": "9. Other telemetry done by Mozilla Firefox",
-          "body": "We try to disable all telemetry data collection in Zen Browser. But, we may have missed some. Check the below links for more information.",
+          "body": "We try to disable all telemetry data collection in Zen. But, we may have missed some. Check the below links for more information.",
           "firefoxPrivacyNotice": "Firefox Privacy Notice",
           "forMoreInformation": "for more information."
         },
         "contact": {
           "title": "10. Contact Us",
-          "body": "If you have any questions or concerns about this Privacy Policy or Zen Browser, please contact us at:",
+          "body": "If you have any questions or concerns about this Privacy Policy or Zen, please contact us at:",
           "discord": "Discord: ",
-          "discordLink": "Zen Browser's Discord",
+          "discordLink": "Zen's Discord",
           "github": "GitHub: ",
           "githubLink": "Organization"
         }
       }
     },
     "welcome": {
-      "title": ["Welcome", "to", "Zen!"]
+      "title": ["Welcome ", "to ", "Zen!"]
     },
     "whatsNew": {
       "title": "What's New in {latestVersion.version}!",
@@ -412,11 +431,11 @@
     },
     "mods": {
       "title": "Zen Mods",
-      "description": "Browse our diverse collection of Zen Mods, community-made plugins and themes for Zen Browser. Discover a theme to match every mood, and a plugin to fulfill every requirement. Start customizing your browser experience today!"
+      "description": "Browse our diverse collection of Zen Mods, community-made plugins and themes for Zen. Discover a theme to match every mood, and a plugin to fulfill every requirement. Start customizing your browser experience today!"
     },
     "releaseNotes": {
       "title": "Release notes - Zen",
-      "description": "Stay up to date with the latest changes to Zen Browser! Since the first release till {latestVersion}, we've been working hard to make Zen Browser the best it can be. Thanks everyone for your feedback! ❤️"
+      "description": "Stay up to date with the latest changes to Zen! Since the first release till {latestVersion}, we've been working hard to make Zen the best it can be. Thanks everyone for your feedback! ❤️"
     },
     "about": {
       "title": "About Zen",
@@ -428,11 +447,11 @@
     },
     "download": {
       "title": "Download - Zen",
-      "description": "Download Zen Browser for your platform and experience a more mindful internet browsing experience. All downloads include SHA256 checksums for verification."
+      "description": "Download Zen for your platform and experience a more mindful internet browsing experience. All downloads include SHA256 checksums for verification."
     },
     "privacyPolicy": {
       "title": "Privacy Policy - Zen",
-      "description": "Your privacy is our priority. This Privacy Policy outlines the types of personal information we collect, how we use it, and the steps we take to protect your data when you use Zen Browser."
+      "description": "Your privacy is our priority. This Privacy Policy outlines the types of personal information we collect, how we use it, and the steps we take to protect your data when you use Zen."
     },
     "welcome": {
       "title": "Welcome!",
@@ -477,13 +496,13 @@
         "releaseNotesDesc": "Stay up to date with the latest features and improvements.",
         "discordDesc": "Join our community on Discord to chat with other Zen users!",
         "donate": "Donate ❤️",
-        "donateDesc": "Support the development of Zen Browser with a donation.",
+        "donateDesc": "Support the development of Zen with a donation.",
         "aboutUs": "About Us 🌟",
-        "aboutUsDesc": "Learn more about the team behind Zen Browser.",
+        "aboutUsDesc": "Learn more about the team behind Zen.",
         "documentation": "Documentation",
-        "documentationDesc": "Learn how to use Zen Browser with our documentation.",
+        "documentationDesc": "Learn how to use Zen with our documentation.",
         "github": "GitHub",
-        "githubDesc": "Contribute to the development of Zen Browser on GitHub.",
+        "githubDesc": "Contribute to the development of Zen on GitHub.",
         "menu": "Menu"
       }
     }
diff --git a/src/i18n/ja/translation.json b/src/i18n/ja/translation.json
new file mode 100644
index 0000000..9cefcf8
--- /dev/null
+++ b/src/i18n/ja/translation.json
@@ -0,0 +1,515 @@
+{
+  "routes": {
+    "index": {
+      "title": "Zenブラウザー",
+      "hero": {
+        "title": [
+          { "text": "ようこそ", "highlight": false },
+          { "text": "\n", "highlight": false },
+          { "text": "静かな", "highlight": true },
+          { "text": "\n", "highlight": false },
+          { "text": "インターネット", "highlight": false },
+          { "text": "へ", "highlight": false }
+        ],
+        "description": [
+          "美しいデザイン、プライバシー重視、機能満載。",
+          "私たちはあなたの体験を大切にし、データには関心がありません。"
+        ],
+        "buttons": {
+          "beta": "ベータ版が利用可能です！",
+          "support": "サポートする ❤️"
+        }
+      },
+      "features": {
+        "titles": ["生産性", "の", "極み"],
+        "description": "Zenは、生産性と集中力を高める機能が満載です。ブラウザーは作業の妨げではなく、作業を助けるツールであるべきです。",
+        "featureTabs": {
+          "workspaces": {
+            "title": "ワークスペース",
+            "description": "タブをワークスペースごとに整理し、プロジェクトごとに分けて管理。簡単に切り替え可能です。"
+          },
+          "compactMode": {
+            "title": "コンパクトモード",
+            "description": "Zenのコンパクトモードは、必要ないときにタブバーを隠し、必要なときに表示して画面を広く使えます。"
+          },
+          "glance": {
+            "title": "覗き見",
+            "description": "覗き見機能で、よく使うタブを素早く切り替え。履歴をスクロールする必要はありません。"
+          },
+          "splitView": {
+            "title": "画面分割",
+            "description": "画面分割機能で、2つのタブを並べて表示。比較や切り替えが簡単です。"
+          }
+        }
+      },
+      "sponsors": {
+        "title": "スポンサー",
+        "description": "ご支援いただいているスポンサーの皆様に感謝します。<br />あなたも<a href=\"/donate\" class=\"zen-link\">直接寄付</a>でこの旅に参加できます！",
+        "sponsors": {
+          "tuta": {
+            "name": "Tuta",
+            "url": "https://tuta.com/"
+          }
+        }
+      },
+      "community": {
+        "title": ["私たちの", "コア", "バリュー"],
+        "description": "Zenは美しさ、パフォーマンス、プライバシーのバランスを最優先にしています。最高の体験を妥協せずに提供します。",
+        "lists": {
+          "freeAndOpenSource": {
+            "title": "無料・オープンソース",
+            "description": "Zenは無料でオープンソース。誰でも自由に使え、カスタマイズできます。"
+          },
+          "simpleYetPowerful": {
+            "title": "シンプルでパワフル",
+            "description": "Zenは使いやすく、日常の作業も十分にこなせます。"
+          },
+          "privateAndAlwaysUpToDate": {
+            "title": "プライバシー重視・常に最新",
+            "description": "Zenはプライバシーを守り、常に最新。無料で使え、カスタマイズも可能です。"
+          }
+        },
+        "images": {
+          "community": {
+            "alt": "コミュニティ"
+          }
+        }
+      }
+    },
+    "mods": {
+      "title": "Zen Mods",
+      "description": "Zen Browser用の多彩なMod（プラグイン・テーマ）を探そう。気分やニーズに合ったテーマやプラグインで、ブラウザー体験をカスタマイズ！",
+      "pagination": {
+        "pagination": "{input} / {totalPages}（全{totalItems}件）"
+      },
+      "search": "検索ワードを入力...",
+      "by": "作者",
+      "sort": {
+        "lastCreated": "新着順",
+        "lastUpdated": "更新順",
+        "perPage": "表示件数"
+      },
+      "noResults": "結果が見つかりません",
+      "noResultsDescription": "別のキーワードで検索するか、後でもう一度お試しください。",
+      "slug": {
+        "title": "{name} - Zen Mods",
+        "description": "{name} Modの詳細（Zen用）",
+        "alert": {
+          "description": "このテーマをインストールするにはZenが必要です。",
+          "button": "今すぐダウンロード！"
+        },
+        "createdBy": "作者：{author} • <b>v{version}</b>",
+        "creationDate": "作成日：<b>{createdAt}</b>",
+        "latestUpdate": "最終更新：<b>{updatedAt}</b>",
+        "visitModHomepage": "Modのホームページへ",
+        "installMod": "Modをインストール 🎉",
+        "uninstallMod": "Modをアンインストール",
+        "back": "戻る"
+      }
+    },
+    "releaseNotes": {
+      "topSection": {
+        "title": "変更履歴",
+        "description": "Zenの最新情報はこちら！<a class=\"zen-link\" href=\"#1.0.0-a.1\">最初のリリース</a>から<a class=\"zen-link\" href=\"#{latestVersion}\">{latestVersion}</a>まで、最高のブラウザーを目指して努力しています。ご意見ありがとうございます！❤️"
+      },
+      "list": {
+        "support": "応援してください！",
+        "navigateToVersion": "バージョンへ移動..."
+      },
+      "itemType": {
+        "fix": "修正",
+        "feature": "追加",
+        "known": "既知",
+        "break": "重大",
+        "theme": "テーマ",
+        "security": "セキュリティ"
+      },
+      "backToTop": "トップへ戻る",
+      "chooseVersion": "バージョンを選択",
+      "components": {
+        "releaseNoteItem": {
+          "twilight": "Twilight",
+          "twilightChanges": "Twilightの変更点",
+          "releaseChanges": "v{version}",
+          "firefoxVersion": "Firefox {version}",
+          "githubRelease": "GitHubリリース",
+          "workflowRun": "ワークフロー実行",
+          "compareChanges": "変更を比較",
+          "twilightWarning": "TwilightはZen Browserのプレリリース版です。不具合や未完成の機能が含まれる場合があります。",
+          "reportIssues": " 問題が発生した場合は、<a rel=\"noopener noreferrer\" target=\"_blank\" href=\"https://github.com/zen-browser/desktop/issues/\" class=\"zen-link\">issueページ</a>でご報告ください。",
+          "learnMore": "詳細はこちら",
+          "viewIssue": "GitHubのIssue番号{issue}を見る"
+        }
+      },
+      "slug": {
+        "title": "リリースノート",
+        "redirect": "バージョン{version}のリリースノートにリダイレクト中..."
+      }
+    },
+    "about": {
+      "title": "Zenについて",
+      "description": "私たちは、ウェブ体験を大切にする開発者とデザイナーの集まりです。インターネットは、データ収集を心配せずに探索・学習・交流できる場所であるべきだと信じています。",
+      "littleHelp": "応援しませんか？",
+      "mainTeam": {
+        "title": "メインチーム",
+        "description": "最高のブラウジング体験を提供するために努力しているメンバーです。",
+        "subTitle": {
+          "browser": "ブラウザー",
+          "website": "ウェブサイト・ブランディング"
+        },
+        "members": {
+          "browser": {
+            "mauro": {
+              "name": "Mauro B.",
+              "description": "クリエイター・メイン開発者",
+              "link": "https://cheff.dev/"
+            },
+            "jan": {
+              "name": "Jan Heres",
+              "description": "MacOSビルド担当・貢献者",
+              "link": "https://janheres.eu/"
+            },
+            "bryan": {
+              "name": "Bryan Galdámez",
+              "description": "テーマ機能の大貢献者",
+              "link": "https://josuegalre.netlify.app/"
+            },
+            "oscar": {
+              "name": "Oscar Gonzalez",
+              "description": "SRE・コード署名担当",
+              "link": false
+            },
+            "daniel": {
+              "name": "Daniel García",
+              "description": "MacOS証明書・公証管理",
+              "link": false
+            },
+            "brhm": {
+              "name": "BrhmDev",
+              "description": "大きな貢献をしている開発者",
+              "link": "https://github.com/BrhmDev"
+            },
+            "kristijanribaric": {
+              "name": "Kristijan Ribaric",
+              "description": "スプリットビュー・ワークスペース担当",
+              "link": "https://github.com/kristijanribaric"
+            },
+            "larvey": {
+              "name": "Larvey",
+              "description": "AUR管理者",
+              "link": "https://github.com/LarveyOfficial/"
+            },
+            "studio": {
+              "name": "Studio Movie Girl",
+              "description": "グラデーションジェネレーターの貢献者",
+              "link": "https://github.com/neurokitti"
+            }
+          },
+          "website": {
+            "taroj1205": {
+              "name": "Shintaro Jokagi",
+              "description": "コアウェブサイトアーキテクト、リファクタリング・技術強化担当",
+              "link": "https://github.com/taroj1205"
+            },
+            "jace": {
+              "name": "Jace",
+              "description": "ウェブサイトデザイン・ブランディング担当",
+              "link": "https://x.com/JaceThings"
+            },
+            "canoa": {
+              "name": "Canoa",
+              "description": "活発な貢献者・ウェブサイト管理",
+              "link": "https://thatcanoa.org/"
+            },
+            "adam": {
+              "name": "Adam",
+              "description": "ブランディング・デザイン",
+              "link": "https://cybrneon.xyz/"
+            },
+            "n7itro": {
+              "name": "n7itro",
+              "description": "リリースノート執筆・貢献者",
+              "link": "https://github.com/n7itro"
+            },
+            "jafeth": {
+              "name": "Jafeth Garro",
+              "description": "ドキュメント執筆",
+              "link": "https://iamjafeth.com/"
+            }
+          }
+        }
+      },
+      "contributors": {
+        "title": "コントリビューター",
+        "description": "Zenの発展に貢献してくださった皆様です。",
+        "browser": "ブラウザー",
+        "website": "ウェブサイト"
+      }
+    },
+    "donate": {
+      "title": "寄付",
+      "description": "私たちは少人数の開発チームです。ご支援いただけると幸いです。",
+      "patreon": {
+        "title": "Patreon",
+        "description": "Patreonで毎月のご支援が可能です。ご自身に合った支援レベルをお選びください。",
+        "button": "Patreonへ"
+      },
+      "koFi": {
+        "title": "Ko-fi",
+        "description": "Ko-fiで一度きり、または毎月のご支援が可能です。ご希望の金額をお選びください。",
+        "button": "Ko-fiへ"
+      }
+    },
+    "download": {
+      "title": "Zenをダウンロードする",
+      "description": "お使いのプラットフォーム向けにZenをダウンロード。すべてのダウンロードにはSHA256チェックサムが付属しています。",
+      "twilightInfo": "現在Twilightモードです。最新の実験的機能とアップデートをダウンロードしています。",
+      "alertInfo": {
+        "description": "<strong class='font-medium text-zen-blue'>Twilightモード:</strong> 現在Twilightモードで、最新の実験的機能とアップデートをダウンロードしています。"
+      },
+      "platformSelector": {
+        "title": "プラットフォーム選択",
+        "description": "お使いのプラットフォームを選択してZenをダウンロード。"
+      },
+      "additionalResources": {
+        "title": "追加リソース",
+        "sourceCode": {
+          "title": "ソースコード",
+          "description": "GitHubでZenのソースコードを閲覧・貢献・ビルドできます。"
+        },
+        "documentation": {
+          "title": "ドキュメント",
+          "description": "Zenの包括的なドキュメント・ガイド・チュートリアル。"
+        }
+      },
+      "securityNotice": {
+        "title": "検証済み・安全なダウンロード",
+        "description": "すべてのZenダウンロードは署名・検証済みです。公式サイトまたはGitHubからのダウンロードを推奨します。ダウンロードに問題がある場合やウイルス対策で警告が出た場合は、<a href='https://github.com/zen-browser/desktop/issues/new/choose' class='zen-link ml-1'>ご報告ください</a>。"
+      },
+      "platformNames": {
+        "mac": "macOS",
+        "windows": "Windows",
+        "linux": "Linux",
+        "macDownload": "MacOSダウンロード",
+        "windowsDownload": "Windowsダウンロード",
+        "linuxDownload": "Linuxダウンロード"
+      },
+      "platformDescriptions": {
+        "mac": "Apple（Mシリーズ）・Intel両対応。<br />macOS 11.0以降が必要です。",
+        "windows": "Windows 10・11対応。<br />どちらを選ぶか迷った場合は64ビット版を推奨します。",
+        "linux": "多くのLinuxディストリビューションで動作。<br />お使いのシステムに合ったものを選択してください。"
+      },
+      "links": {
+        "macos": {
+          "universal": "ユニバーサル"
+        },
+        "windows": {
+          "64bit": "64-ビット（推奨）",
+          "ARM64": "ARM64"
+        },
+        "linux": {
+          "flathub": "Flathub",
+          "x86_64": "Tarball",
+          "aarch64": "Tarball"
+        }
+      },
+      "buttonCard": {
+        "copy": "コピー",
+        "showChecksum": "SHA-256を表示",
+        "beta": "ベータ"
+      }
+    },
+    "privacyPolicy": {
+      "title": "プライバシーポリシー",
+      "lastUpdated": "最終更新: 2025-02-5",
+      "sections": {
+        "introduction": {
+          "title": "はじめに",
+          "body": "Zenへようこそ！あなたのプライバシーは最優先です。本ポリシーでは、収集する情報の種類、利用方法、保護手段について説明します。",
+          "summary": "データ販売なし - データ収集なし - トラッキングなし"
+        },
+        "noCollect": {
+          "title": "1. 収集しない情報",
+          "body": "Zenはプライバシー重視で設計されています。個人データを収集・保存・共有しません。"
+        },
+        "noTelemetry": {
+          "title": "1.1. テレメトリーなし",
+          "body": "テレメトリーデータやクラッシュレポートは収集しません。",
+          "body2": "Mozilla Firefoxに組み込まれているテレメトリーも削除しています。"
+        },
+        "noPersonalData": {
+          "title": "1.2. 個人データの収集なし",
+          "body": "IPアドレス、閲覧履歴、検索クエリ、フォームデータなどの個人情報は一切収集しません。"
+        },
+        "noThirdParty": {
+          "title": "1.3. サードパーティトラッキングなし",
+          "body": "サードパーティのトラッカーや解析ツールは一切許可していません。Mozillaはベースであり、サードパーティではありません。"
+        },
+        "externalConnections": {
+          "title": "1.4. 起動時の外部接続",
+          "body": "Zenは起動時にアップデート確認や接続性・ジオロケーション/プッシュ通知サービスのため外部接続を行う場合があります。これらの接続は機能上必要で、トラッキングやプロファイリング目的ではありません。about:configで無効化可能です。"
+        },
+        "localStorage": {
+          "title": "2. デバイスに保存される情報"
+        },
+        "browsingData": {
+          "title": "2.1. 閲覧データ",
+          "body": "Zenは体験向上のため、いくつかのデータをローカルに保存します。"
+        },
+        "cookies": {
+          "title": "クッキー",
+          "body": "クッキーはローカルに保存され、Zenや第三者と共有されません。管理はブラウザー設定から可能です。"
+        },
+        "cache": {
+          "title": "キャッシュ・一時ファイル",
+          "body": "パフォーマンス向上のためキャッシュや一時データを保存します。設定からいつでも削除可能です。"
+        },
+        "settings": {
+          "title": "2.2. 設定・プリファレンス",
+          "body": "カスタマイズや設定はすべてローカルに保存され、私たちがアクセスすることはありません。"
+        },
+        "sync": {
+          "title": "3. 同期機能",
+          "body": "ZenはMozilla FirefoxのSync機能を利用しています。データは暗号化されMozillaのサーバーに保存されます。私たちは内容を閲覧できません。",
+          "link1": "Mozilla Firefox Sync",
+          "link2": "パスワードの保存方法"
+        },
+        "addons": {
+          "title": "4. アドオン・Mod",
+          "body": "MozillaのアドオンやZen Modsをインストール可能です。Zen Modsは当社サービスでホストされ、データ収集はありません。"
+        },
+        "security": {
+          "title": "5. データセキュリティ",
+          "body": "Zenはデータを収集しませんが、ローカルやMozillaサーバー上のデータ保護に努めています。安全なパスワードやデバイス暗号化、ソフトウェアの定期更新を推奨します。",
+          "note": "多くのセキュリティ対策はMozilla Firefoxによって提供されています。"
+        },
+        "control": {
+          "title": "6. コントロール",
+          "deletionTitle": "6.1. データ削除",
+          "deletionBody": "Zenが保存するすべてのローカルデータは、設定からいつでも削除できます。"
+        },
+        "website": {
+          "title": "7. ウェブサイト・サービス",
+          "body": "Zenのウェブサイト・サービスはサードパーティの解析やCDNを使用しません。Cloudflareでホストされていますが、解析・トラッキングは無効化されています。",
+          "externalLinksTitle": "7.1. 外部リンク",
+          "externalLinksBody": "Zenには外部サイトへのリンクが含まれる場合があります。内容やプライバシーについては各サイトのポリシーをご確認ください。"
+        },
+        "changes": {
+          "title": "8. ポリシーの変更",
+          "body": "本ポリシーは必要に応じて更新されます。重要な変更時は日付を更新し、継続利用で同意したものとみなします。"
+        },
+        "otherTelemetry": {
+          "title": "9. Mozilla Firefoxによるその他のテレメトリー",
+          "body": "すべてのテレメトリー無効化に努めていますが、見落としがある場合もあります。詳細は下記リンクをご参照ください。",
+          "firefoxPrivacyNotice": "Firefoxプライバシー通知",
+          "forMoreInformation": "詳細はこちら。"
+        },
+        "contact": {
+          "title": "10. お問い合わせ",
+          "body": "本ポリシーやZenに関するご質問は下記までご連絡ください：",
+          "discord": "Discord: ",
+          "discordLink": "ZenのDiscord",
+          "github": "GitHub: ",
+          "githubLink": "Organization"
+        }
+      }
+    },
+    "welcome": {
+      "title": ["ようこそ", "Zenへ", "!"]
+    },
+    "whatsNew": {
+      "title": "{latestVersion.version}の新機能！",
+      "reportIssue": "問題を報告する",
+      "joinDiscord": "Discordに参加",
+      "readFullReleaseNotes": "リリースノート全文を読む"
+    },
+    "notFound": {
+      "title": "ページが見つかりません",
+      "description": "お探しのページは存在しないか、移動されました。",
+      "button": "ホームへ戻る"
+    }
+  },
+  "layout": {
+    "index": {
+      "title": "Zenブラウザー",
+      "description": "美しいデザイン、プライバシー重視、機能満載。"
+    },
+    "mods": {
+      "title": "Zen Mods",
+      "description": "Zen用の多彩なMod（プラグイン・テーマ）を探そう。気分やニーズに合ったテーマやプラグインで、ブラウザ体験をカスタマイズ！"
+    },
+    "releaseNotes": {
+      "title": "リリースノート - Zen",
+      "description": "Zenの最新情報はこちら！最初のリリースから{latestVersion}まで、最高のブラウザを目指して努力しています。ご意見ありがとうございます！❤️"
+    },
+    "about": {
+      "title": "Zenについて",
+      "description": "私たちは、ウェブ体験を大切にする開発者とデザイナーの集まりです。インターネットは、データ収集を心配せずに探索・学習・交流できる場所であるべきだと信じています。"
+    },
+    "donate": {
+      "title": "寄付 - Zen",
+      "description": "私たちは少人数の開発チームです。ご支援いただけると幸いです。"
+    },
+    "download": {
+      "title": "Zenをダウンロードする",
+      "description": "お使いのプラットフォーム向けにZenをダウンロード。すべてのダウンロードにはSHA256チェックサムが付属しています。"
+    },
+    "privacyPolicy": {
+      "title": "プライバシーポリシー - Zen",
+      "description": "あなたのプライバシーは最優先です。本ポリシーでは、収集する情報の種類、利用方法、保護手段について説明します。"
+    },
+    "welcome": {
+      "title": "ようこそ！",
+      "description": "Zenへようこそ！"
+    },
+    "whatsNew": {
+      "title": "{latestVersion.version}の新機能！"
+    }
+  },
+  "components": {
+    "footer": {
+      "title": "Zenブラウザー",
+      "description": "美しいデザイン、プライバシー重視、機能満載。私たちはあなたのデータではなく、体験を大切にします。",
+      "download": "ダウンロード",
+      "followUs": "フォローする",
+      "aboutUs": "私たちについて",
+      "teamAndContributors": "チーム・コントリビューター",
+      "privacyPolicy": "プライバシーポリシー",
+      "getStarted": "はじめに",
+      "documentation": "ドキュメント",
+      "zenMods": "Zen Mods",
+      "releaseNotes": "リリースノート",
+      "getHelp": "ヘルプ",
+      "discord": "Discord",
+      "uptimeStatus": "稼働状況",
+      "reportAnIssue": "問題を報告",
+      "twilight": "Twilight",
+      "madeWith": "<span aria-label='love'>❤️</span>と共に<a href='{link}' class='zen-link inline-block font-bold'>Zenチーム</a>が作りました"
+    },
+    "nav": {
+      "brand": "Zenブラウザー",
+      "menu": {
+        "gettingStarted": "はじめに",
+        "usefulLinks": "便利なリンク",
+        "mods": "Mods",
+        "download": "ダウンロード",
+        "discord": "Discord",
+        "releaseNotes": "リリースノート",
+        "zenMods": "Zen Mods",
+        "tryZenMods": "Zen Modsを試す",
+        "zenModsDesc": "Zen Modsでブラウザ体験をカスタマイズ。",
+        "releaseNotesDesc": "最新機能・改善情報はこちら。",
+        "discordDesc": "Discordコミュニティで他のZenユーザーと交流！",
+        "donate": "寄付 ❤️",
+        "donateDesc": "Zen開発を寄付で応援。",
+        "aboutUs": "私たちについて 🌟",
+        "aboutUsDesc": "Zenのチームについて知る。",
+        "documentation": "ドキュメント",
+        "documentationDesc": "ドキュメントでZenの使い方を学ぶ。",
+        "github": "GitHub",
+        "githubDesc": "GitHubでZen開発に貢献。",
+        "menu": "メニュー"
+      }
+    }
+  }
+}
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 8e56381..cfc0107 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -97,7 +97,9 @@ const locale = getLocale(Astro)
       )
     </script>
   </head>
-  <body class="overflow-x-hidden text-balance bg-paper font-['bricolage-grotesque'] text-dark">
+  <body
+    class="min-h-[max(100dvh,_64rem)] overflow-x-hidden text-balance bg-paper font-['bricolage-grotesque'] text-dark"
+  >
     <NavBar />
     <slot />
     <Footer />
diff --git a/src/pages/[...locale]/download.astro b/src/pages/[...locale]/download.astro
index 8a9775c..5524548 100644
--- a/src/pages/[...locale]/download.astro
+++ b/src/pages/[...locale]/download.astro
@@ -27,7 +27,7 @@ const appleIcon = icon({ prefix: 'fab', iconName: 'apple' })
 const githubIcon = icon({ prefix: 'fab', iconName: 'github' })
 
 const checksums = await getChecksums()
-const releases = getReleasesWithChecksums(checksums)
+const releases = getReleasesWithChecksums(locale)(checksums)
 
 const platformNames = download.platformNames
 const platformDescriptions = download.platformDescriptions
diff --git a/src/pages/[...locale]/mods/[...slug].astro b/src/pages/[...locale]/mods/[...slug].astro
index 445e257..95e32a6 100644
--- a/src/pages/[...locale]/mods/[...slug].astro
+++ b/src/pages/[...locale]/mods/[...slug].astro
@@ -6,7 +6,7 @@ import ArrowRightIcon from '~/icons/ArrowRightIcon.astro'
 import InfoIcon from '~/icons/InfoIcon.astro'
 import Layout from '~/layouts/Layout.astro'
 import { getAllMods, getAuthorLink, getLocalizedDate } from '~/mods'
-import { getUI } from '~/utils/i18n'
+import { getPath, getUI } from '~/utils/i18n'
 import { getLocale, getOtherLocales } from '~/utils/i18n'
 
 export async function getStaticPaths() {
@@ -44,7 +44,9 @@ const dates = {
   updatedAt: getLocalizedDate(mod.updatedAt),
 }
 
-const locale = getLocale(Astro as { params: { locale?: string } })
+const locale = getLocale(Astro)
+
+const getLocalePath = getPath(locale)
 
 const {
   routes: {
@@ -58,8 +60,8 @@ const {
   description={slug.description.replace('{name}', mod.name)}
   ogImage={mod.image}
 >
-  <main class="mt-6 2xl:mt-0">
-    <div class="mx-auto mb-24 mt-12 flex flex-col gap-6 px-8 lg:mt-32 lg:w-1/2">
+  <main class="container mt-6 2xl:mt-0">
+    <div class="mx-auto mb-24 mt-12 flex flex-col gap-6 lg:mt-32">
       <div
         id="install-theme-error"
         class="flex flex-col items-center justify-center gap-2 rounded-xl bg-red-200 p-2 pl-4 md:flex-row md:justify-between dark:bg-red-700"
@@ -79,7 +81,7 @@ const {
           <ArrowRightIcon class="size-4" />
         </Button>
       </div>
-      <BackButton />
+      <BackButton id="back-button" href={getLocalePath('/mods')} />
       <div>
         <Description class="text-6xl font-bold">{mod.name}</Description>
         <Description>{mod.description}</Description>
@@ -93,9 +95,11 @@ const {
         <div class="flex flex-shrink-0 flex-col gap-2 font-normal">
           <p
             set:html={slug.createdBy
-              .replace('{author}', mod.author)
-              .replace('{version}', mod.version)
-              .replace('{link}', getAuthorLink(mod.author))}
+              .replace(
+                '{author}',
+                `<a href="${getAuthorLink(mod.author)}" class="zen-link font-bold">${mod.author}</a>`
+              )
+              .replace('{version}', mod.version)}
           />
           <p set:html={slug.creationDate.replace('{createdAt}', dates.createdAt)} />
           {
@@ -132,3 +136,13 @@ const {
     <div></div>
   </main></Layout
 >
+
+<script>
+  const backButton = document.getElementById('back-button') as HTMLAnchorElement
+  const search = window.location.search
+  if (search.length > 0) {
+    const searchParams = new URLSearchParams(search)
+    const backLink = `${backButton.href}?${searchParams.toString()}`
+    backButton.href = backLink
+  }
+</script>
diff --git a/src/pages/[...locale]/mods/index.astro b/src/pages/[...locale]/mods/index.astro
index 1404c55..bbfd548 100644
--- a/src/pages/[...locale]/mods/index.astro
+++ b/src/pages/[...locale]/mods/index.astro
@@ -1,6 +1,6 @@
 ---
 import Description from '~/components/Description.astro'
-import ModsList from '~/components/ModsList'
+import ModsList from '~/components/ModsList.astro'
 import { CONSTANT } from '~/constants'
 import Layout from '~/layouts/Layout.astro'
 import { getAllMods } from '~/mods'
@@ -27,6 +27,10 @@ const allMods = (await getAllMods()) || []
     </header>
 
     <!-- Importing ModList component -->
-    <ModsList allMods={allMods} locale={locale ?? CONSTANT.I18N.DEFAULT_LOCALE} client:load />
+    <ModsList
+      allMods={allMods}
+      locale={locale ?? CONSTANT.I18N.DEFAULT_LOCALE}
+      translations={mods}
+    />
   </main>
 </Layout>
diff --git a/src/pages/[...locale]/release-notes/index.astro b/src/pages/[...locale]/release-notes/index.astro
index e24900e..77cc542 100644
--- a/src/pages/[...locale]/release-notes/index.astro
+++ b/src/pages/[...locale]/release-notes/index.astro
@@ -22,7 +22,7 @@ const {
     class="container flex h-full min-h-[1000px] flex-1 flex-col items-center justify-center py-4"
   >
     <div id="release-notes" class="py-42 flex min-h-screen w-full flex-col justify-center gap-8">
-      <Description class="mt-48 text-6xl font-bold">Changelog</Description>
+      <Description class="mt-48 text-6xl font-bold">{releaseNotes.topSection.title}</Description>
       <p
         class="text-base opacity-55"
         set:html={releaseNotes.topSection.description.replaceAll(
@@ -34,7 +34,7 @@ const {
         <Button class="flex" isPrimary href="/donate">
           {releaseNotes.list.support}
         </Button>
-        <Button id="navigate-to-version" href="#" class="flex">
+        <Button id="navigate-to-version" href="#" class="flex" localePath={false}>
           {releaseNotes.list.navigateToVersion}
         </Button>
       </div>
@@ -46,7 +46,7 @@ const {
       {releaseNotesData.map(notes => <ReleaseNoteItem {...notes} />)}
     </div>
   </main>
-  <Button href="#" id="scroll-top" isPrimary class="fixed bottom-8 right-8">
+  <Button id="scroll-top" isPrimary class="fixed bottom-8 right-8" onclick="window.scrollTo(0, 0)">
     <p class="hidden items-center gap-2 sm:flex">
       {releaseNotes.backToTop}
       <ArrowUpIcon aria-hidden="true" class="size-4" />
diff --git a/src/pages/[...locale]/welcome.astro b/src/pages/[...locale]/welcome.astro
index 3491ce0..b3ed888 100644
--- a/src/pages/[...locale]/welcome.astro
+++ b/src/pages/[...locale]/welcome.astro
@@ -14,6 +14,6 @@ const {
 
 <Layout title={layout.welcome.title} description={layout.welcome.description}>
   <main class="container">
-    <Features title1={welcome.title[0]} title2={welcome.title[1]} title3={welcome.title[2]} />
+    <Features titles={welcome.title} />
   </main>
 </Layout>
diff --git a/src/tests/components/release-data.test.ts b/src/tests/components/release-data.test.ts
index d8e22ff..f135731 100644
--- a/src/tests/components/release-data.test.ts
+++ b/src/tests/components/release-data.test.ts
@@ -11,7 +11,7 @@ describe('getReleasesWithChecksums', () => {
       'zen.linux-x86_64.tar.xz': 'linx86sum',
       'zen.linux-aarch64.tar.xz': 'linaarchsum',
     }
-    const releases = getReleasesWithChecksums(checksums)
+    const releases = getReleasesWithChecksums('en')(checksums)
     expect(releases.macos.universal.checksum).toBe('macsum')
     expect(releases.windows.x86_64.checksum).toBe('winsum')
     expect(releases.windows.arm64.checksum).toBe('winarmsum')
diff --git a/src/tests/pages/download.spec.ts b/src/tests/pages/download.spec.ts
index 9b6e504..ca8a3ff 100644
--- a/src/tests/pages/download.spec.ts
+++ b/src/tests/pages/download.spec.ts
@@ -11,10 +11,6 @@ const getPlatformSection = (page: Page, platform: string) =>
 const getPlatformButton = (page: Page, platform: string) =>
   page.locator(`button.platform-selector[data-platform='${platform}']`)
 
-// Helper to get the platform download link
-const _ = (page: Page, platform: string, label: string) =>
-  page.locator(`#${platform}-downloads .download-link:has-text('${label}')`)
-
 const platformConfigs: { name: string; userAgent: string; platform: string }[] = [
   {
     name: 'windows',
@@ -79,9 +75,10 @@ test.describe('Download page platform detection and tab switching', () => {
 })
 
 test.describe('Download page download links', () => {
-  const releases = getReleasesWithChecksums(CONSTANT.CHECKSUMS)
+  const releases = getReleasesWithChecksums('en')(CONSTANT.CHECKSUMS)
 
-  function getPlatformLinks(releases: ReturnType<typeof getReleasesWithChecksums>) {
+  type Releases = ReturnType<ReturnType<typeof getReleasesWithChecksums>>
+  function getPlatformLinks(releases: Releases) {
     return {
       mac: [releases.macos.universal],
       windows: [releases.windows.x86_64, releases.windows.arm64],
diff --git a/src/tests/pages/mods.spec.ts b/src/tests/pages/mods.spec.ts
index 7c64698..9174756 100644
--- a/src/tests/pages/mods.spec.ts
+++ b/src/tests/pages/mods.spec.ts
@@ -5,7 +5,8 @@ test('clicking back button navigates to previous page', async ({ page }) => {
   const currentUrl = page.url()
   const modCards = await page.locator('.mod-card').all()
   await modCards[0].click()
-  await page.getByRole('button', { name: 'Back' }).click()
+  await page.waitForURL('/mods/*')
+  await page.getByTestId('back-button').click()
   await page.waitForURL(currentUrl)
   expect(page.url()).toStrictEqual(currentUrl)
 })
diff --git a/src/tests/pages/routes.spec.ts b/src/tests/pages/routes.spec.ts
index 31271ec..d8bac8f 100644
--- a/src/tests/pages/routes.spec.ts
+++ b/src/tests/pages/routes.spec.ts
@@ -3,7 +3,7 @@ import { expect, test } from '@playwright/test'
 test('all routes do not return 404', async ({ page }) => {
   const routes = ['/', '/welcome', '/about', '/privacy-policy', '/download', '/donate', '/whatsnew']
   for (const route of routes) {
-    const response = await page.goto(route)
+    const response = await page.goto(route, { waitUntil: 'domcontentloaded' })
     expect(response?.status()).not.toBe(404)
   }
 })
diff --git a/src/utils/i18n.ts b/src/utils/i18n.ts
index 5d19cb4..9d5864e 100644
--- a/src/utils/i18n.ts
+++ b/src/utils/i18n.ts
@@ -1,11 +1,10 @@
-import { type GetStaticPaths } from 'astro'
+import { type AstroGlobal, type GetStaticPaths } from 'astro'
 
 import { CONSTANT } from '~/constants'
-import UI_EN from '~/i18n/en/translation.json'
+import { type UIProps } from '~/constants/i18n'
 
 /**
  * Represents the available locales in the application
- * @typedef {string} Locale
  */
 export type Locale = (typeof locales)[number]
 
@@ -14,127 +13,121 @@ export type Locale = (typeof locales)[number]
  * @param {Locale} [locale] - The current locale
  * @returns {function(string): string} A function that transforms paths based on the locale
  */
-export const getPath = (locale?: Locale) => (path: string) => {
-  if (locale && locale !== CONSTANT.I18N.DEFAULT_LOCALE && !path.startsWith(`/${locale}`)) {
-    return `/${locale}${path.startsWith('/') ? '' : '/'}${path}`
+export const getPath =
+  (locale?: Locale): ((arg0: string) => string) =>
+  (path: string) => {
+    if (locale && locale !== CONSTANT.I18N.DEFAULT_LOCALE && !path.startsWith(`/${locale}`)) {
+      return `/${locale}${path.startsWith('/') ? '' : '/'}${path}`
+    }
+    return path
   }
-  return path
-}
 
 /**
- * Extracts the current locale from Astro's params, defaulting to the default locale
- * @param {Object} Astro - Astro's context object
- * @param {Object} [Astro.params] - Routing parameters
- * @param {string} [Astro.params.locale] - The current locale parameter
- * @returns {Locale} The determined locale
+ * Retrieves the current locale from the Astro object.
+ *
+ * @param Astro - The Astro object containing the current locale information
+ * @param Astro.currentLocale - The current locale string from Astro
+ * @returns The current locale cast as a Locale type
  */
-export const getLocale = (Astro: { params?: { locale?: string } }) => {
-  if (Astro.params?.locale) {
-    return Astro.params.locale as Locale
-  }
-  return CONSTANT.I18N.DEFAULT_LOCALE as Locale
+export const getLocale = (Astro: AstroGlobal): Locale => {
+  return Astro.currentLocale as Locale
 }
 
 /**
  * List of all supported locales
- * @type {Locale[]}
  */
 export const locales = CONSTANT.I18N.LOCALES.map(({ value }) => value)
 
 /**
  * List of locales excluding the default locale
- * @type {Locale[]}
  */
 const otherLocales = CONSTANT.I18N.LOCALES.filter(
   ({ value }) => value !== CONSTANT.I18N.DEFAULT_LOCALE
-)
+).map(({ value }) => value)
 
 /**
  * Retrieves locales other than the default locale
  * @returns {Locale[]} Array of non-default locales
  */
-export const getOtherLocales = () => otherLocales
-
-/**
- * Type definition for UI translations based on the English translation
- * @typedef {Object} UI
- */
-export type UI = typeof UI_EN
-
-/**
- * Mapping of locales to their UI translation objects
- * @type {Object.<Locale, UI>}
- */
-export const ui = { en: UI_EN }
+export const getOtherLocales = (): Locale[] => otherLocales
 
 /**
  * Retrieves UI translations for a given locale, merging with default translations
  * @param {Locale} [locale] - The target locale for translations
  * @returns {UI} Merged UI translations
  */
-export const getUI = (locale?: Locale | string): UI => {
+export const getUI = (locale?: Locale | string): UIProps => {
   const validLocale = locales.includes(locale as Locale) ? locale : CONSTANT.I18N.DEFAULT_LOCALE
-  const defaultUI = ui[CONSTANT.I18N.DEFAULT_LOCALE]
-  const localeUI = ui[validLocale as Locale]
+  const defaultUI = CONSTANT.I18N.LOCALES.find(
+    ({ value }) => value === CONSTANT.I18N.DEFAULT_LOCALE
+  )?.ui
+  const localeUI = CONSTANT.I18N.LOCALES.find(({ value }) => value === validLocale)?.ui
 
-  /**
-   * Recursively merges two objects, with the override object taking precedence
-   * @template T
-   * @param {T} defaultObj - The default object to merge from
-   * @param {Partial<T>} overrideObj - The object to merge over the default
-   * @returns {T} The deeply merged object
-   */
-  function deepMerge<T extends object>(defaultObj: T, overrideObj: Partial<T>): T {
-    // Handle non-object cases
-    if (typeof defaultObj !== 'object' || defaultObj === null) {
-      return (overrideObj ?? defaultObj) as T
-    }
-    if (typeof overrideObj !== 'object' || overrideObj === null) {
-      return (overrideObj ?? defaultObj) as T
-    }
-
-    // Create a new object or array based on the default object's type
-    const result = Array.isArray(defaultObj) ? [...defaultObj] : { ...defaultObj }
-
-    // Merge properties from the default object
-    for (const key of Object.keys(defaultObj) as (keyof T)[]) {
-      const defaultValue = defaultObj[key]
-      const overrideValue = overrideObj[key]
-
-      // Recursively merge nested objects
-      if (
-        defaultValue !== null &&
-        overrideValue !== null &&
-        typeof defaultValue === 'object' &&
-        typeof overrideValue === 'object'
-      ) {
-        // Type assertion to handle nested merging
-        ;(result as Record<keyof T, unknown>)[key] = deepMerge(
-          defaultValue as object,
-          overrideValue as Partial<object>
+  // Helper to recursively check for missing keys
+  function checkMismatch(
+    defaultObj: UIProps,
+    localeObj: Partial<UIProps> = {},
+    path: string[] = []
+  ): void {
+    if (typeof defaultObj !== 'object' || defaultObj === null) return
+    for (const key of Object.keys(defaultObj) as (keyof UIProps)[]) {
+      if (!(key in localeObj)) {
+        console.error(
+          `[i18n] Missing translation key: ${[...path, key as string].join('.')} in locale '\x1b[1m${validLocale}\x1b[0m'. See src/i18n/${validLocale}/translation.json`
         )
-      } else if (overrideValue !== undefined) {
-        // Override with the new value if it exists
-        ;(result as Record<keyof T, unknown>)[key] = overrideValue
+      } else if (
+        typeof defaultObj[key] === 'object' &&
+        defaultObj[key] !== null &&
+        typeof localeObj[key] === 'object' &&
+        localeObj[key] !== null
+      ) {
+        // @ts-expect-error: recursive structure
+        checkMismatch(defaultObj[key], localeObj[key], [...path, key as string])
       }
     }
-
-    // Add any new properties from overrideObj
-    for (const key of Object.keys(overrideObj) as (keyof T)[]) {
-      if (!(key in defaultObj)) {
-        ;(result as Record<keyof T, unknown>)[key] = overrideObj[key]
-      }
-    }
-
-    return result as T
   }
 
-  return deepMerge(defaultUI, localeUI)
+  // Deep merge: localeUI overrides defaultUI, fallback to defaultUI for missing keys
+  function deepMerge(defaultObj: UIProps, localeObj: Partial<UIProps> = {}): UIProps {
+    if (typeof defaultObj !== 'object' || defaultObj === null) return defaultObj
+    if (typeof localeObj !== 'object' || localeObj === null) return defaultObj
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const result: any = Array.isArray(defaultObj) ? [...defaultObj] : { ...defaultObj }
+    for (const key of Object.keys(defaultObj) as (keyof UIProps)[]) {
+      if (key in localeObj) {
+        if (
+          typeof defaultObj[key] === 'object' &&
+          defaultObj[key] !== null &&
+          typeof localeObj[key] === 'object' &&
+          localeObj[key] !== null
+        ) {
+          // @ts-expect-error: recursive structure
+          result[key] = deepMerge(defaultObj[key], localeObj[key])
+        } else {
+          result[key] = localeObj[key]
+        }
+      } else {
+        result[key] = defaultObj[key]
+      }
+    }
+    return result
+  }
+
+  if (!defaultUI) {
+    throw new Error('Default UI translation is missing!')
+  }
+
+  if (localeUI && validLocale !== CONSTANT.I18N.DEFAULT_LOCALE) {
+    checkMismatch(defaultUI, localeUI)
+    return deepMerge(defaultUI, localeUI) as UIProps
+  }
+
+  // If localeUI is undefined or locale is default, just return defaultUI
+  return defaultUI
 }
 
 /**
  * Generates static paths for internationalization
- * @type {GetStaticPaths}
  * @returns {Array} An array of static paths for different locales
  */
 export const getStaticPaths = (() => {
@@ -158,6 +151,6 @@ export const getStaticPaths = (() => {
  * Retrieves all available locales, including both default and non-default
  * @returns {Locale[]} Combined array of all locales
  */
-export const getLocales = () => {
+export const getLocales = (): Locale[] => {
   return [...locales, ...otherLocales]
 }