diff --git a/README.md b/README.md
index 2ca0754..fa4a767 100644
--- a/README.md
+++ b/README.md
@@ -78,3 +78,16 @@ As for why a typical database is not used, this is because:
 Post route in the url is directly mapped to the filesystem, eg:
 
 `https://<domain>/post/path/to/post` -> `cec/path/to/post.md`
+
+### Internationalization (i18n)
+
+This project uses [inlang](https://inlang.com/) with `paraglide.js` for i18n.
+Translation files are stored in `src/messages/[lang].json`, where `lang` is the target language.
+
+Currently supported languages: `zh-tw`, `en`, `ja`
+
+To add a translation, follow the steps below:
+1. Add your target language in `tnfshcec.inlang/settings.json`, under the `languageTags` array (ex:`de`).
+2. Copy one of the translation files in `src/messages/[lang].json`, renaming it to your target language.
+3. Do the translations in the file you copied.
+4. Update the languages listed above (the README).
diff --git a/package-lock.json b/package-lock.json
index 52bbe00..9116355 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,7 @@
     "": {
       "name": "tnfshcec-web",
       "version": "0.0.1",
+      "hasInstallScript": true,
       "dependencies": {
         "@auth/sveltekit": "^0.3.6",
         "@cartamd/plugin-code": "^3.0.1",
@@ -24,6 +25,8 @@
       },
       "devDependencies": {
         "@iconify-json/mdi": "^1.1.54",
+        "@inlang/paraglide-js": "1.0.0-prerelease.17",
+        "@inlang/paraglide-js-adapter-vite": "^1.0.1",
         "@melt-ui/pp": "^0.1.2",
         "@melt-ui/svelte": "^0.61.1",
         "@sveltejs/adapter-node": "^1.3.1",
@@ -694,6 +697,226 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/@inlang/detect-json-formatting": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@inlang/detect-json-formatting/-/detect-json-formatting-1.0.0.tgz",
+      "integrity": "sha512-o0jeI8U4TgNlsPwI0y92jld8/18Loh2KEgHCYCJ42rCOdxFrA8R60cydlEd2/6jkdHFn5DxKj8rOyiKv3z9uOw==",
+      "dev": true,
+      "dependencies": {
+        "guess-json-indent": "2.0.0"
+      }
+    },
+    "node_modules/@inlang/json-types": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@inlang/json-types/-/json-types-1.1.0.tgz",
+      "integrity": "sha512-n6vS6AqETsCFbV4TdBvR/EH57waVXzKsMqeUQ+eH2Q6NUATfKhfLabgNms2A+QV3aedH/hLtb1pRmjl2ykBVZg==",
+      "dev": true,
+      "peerDependencies": {
+        "@sinclair/typebox": "^0.31.0"
+      }
+    },
+    "node_modules/@inlang/language-tag": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@inlang/language-tag/-/language-tag-1.2.0.tgz",
+      "integrity": "sha512-AwKNPYPgJrhM9ebEYQvcG5PGM4v79jMPlsv2bUYEhEZzMpwIJKQo4t7P7EekMhO086sXOmeTu410Lm8abX/2Yw==",
+      "dev": true,
+      "peerDependencies": {
+        "@sinclair/typebox": "^0.31.0"
+      }
+    },
+    "node_modules/@inlang/message": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@inlang/message/-/message-2.0.0.tgz",
+      "integrity": "sha512-RPFcbega2Cnxi78d08O7SbuXyuhEqsB819QjgloNTXWtlBFwVDkF87xAMIZN37hpM6JZzMaYv2O1ipyncU3Ccg==",
+      "dev": true,
+      "dependencies": {
+        "@inlang/language-tag": "*"
+      },
+      "peerDependencies": {
+        "@sinclair/typebox": "^0.31.0"
+      }
+    },
+    "node_modules/@inlang/message-lint-rule": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@inlang/message-lint-rule/-/message-lint-rule-1.4.0.tgz",
+      "integrity": "sha512-imOvpxKFP2ESaWTI5W5aQiW1ukvXMvGa4KhVknssfA1ZkCkVu2EDM4aGxw11U5Rli4QQ70bxztUvfLVhd3J84A==",
+      "dev": true,
+      "dependencies": {
+        "@inlang/json-types": "*",
+        "@inlang/language-tag": "*",
+        "@inlang/message": "*",
+        "@inlang/project-settings": "*",
+        "@inlang/translatable": "*"
+      },
+      "peerDependencies": {
+        "@sinclair/typebox": "^0.31.17"
+      }
+    },
+    "node_modules/@inlang/module": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@inlang/module/-/module-1.2.0.tgz",
+      "integrity": "sha512-Z91zJUgliX+ddfRK+Ce4aZYlMjeNwZJOMmJ2dEUgg2cfqIFRB+gDsC5gLEY5LTkZspf/XUHoECTpK8ErVVYF5w==",
+      "dev": true,
+      "dependencies": {
+        "@inlang/message-lint-rule": "*",
+        "@inlang/plugin": "*"
+      },
+      "peerDependencies": {
+        "@sinclair/typebox": "^0.31.17"
+      }
+    },
+    "node_modules/@inlang/paraglide-js": {
+      "version": "1.0.0-prerelease.17",
+      "resolved": "https://registry.npmjs.org/@inlang/paraglide-js/-/paraglide-js-1.0.0-prerelease.17.tgz",
+      "integrity": "sha512-m3RaPFB9KMTIvXeHPq58w4u6gHFmNtlQmJOuyKAdYjZEvh3xNx8aUuPbgnjZ1dg2GrJ2w64lNK4LlYWrHRGOFA==",
+      "dev": true,
+      "dependencies": {
+        "@inlang/detect-json-formatting": "1.0.0",
+        "@inlang/sdk": "0.19.0",
+        "@lix-js/fs": "0.4.0",
+        "commander": "11.1.0",
+        "consola": "3.2.3",
+        "dedent": "1.5.1",
+        "isomorphic-git": "1.24.5",
+        "json5": "2.2.3",
+        "posthog-node": "3.1.3"
+      },
+      "bin": {
+        "paraglide-js": "bin/run.js"
+      }
+    },
+    "node_modules/@inlang/paraglide-js-adapter-unplugin": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@inlang/paraglide-js-adapter-unplugin/-/paraglide-js-adapter-unplugin-1.0.1.tgz",
+      "integrity": "sha512-Ana7ysAf/dAhtLOnJuasWhwjkMCPoK7ccVyd3YkI+3Ee3qMLJ+3jSWYKn3C/ZkE+wf9oJubiBbGqpYqGFerd6Q==",
+      "dev": true,
+      "dependencies": {
+        "@inlang/paraglide-js": "1.0.0-prerelease.14",
+        "@inlang/sdk": "0.19.0",
+        "unplugin": "1.5.1"
+      }
+    },
+    "node_modules/@inlang/paraglide-js-adapter-unplugin/node_modules/@inlang/paraglide-js": {
+      "version": "1.0.0-prerelease.14",
+      "resolved": "https://registry.npmjs.org/@inlang/paraglide-js/-/paraglide-js-1.0.0-prerelease.14.tgz",
+      "integrity": "sha512-hnxy9bc3SPISH03ZKvB+Ttg4Mh48fN+dReX3dSbmCBYCaz9wtg/6m+kxJXmQAuHdUkapvNeaFUdiLDNUneFsUw==",
+      "dev": true,
+      "dependencies": {
+        "@inlang/detect-json-formatting": "1.0.0",
+        "@inlang/sdk": "0.19.0",
+        "@lix-js/fs": "0.4.0",
+        "commander": "11.1.0",
+        "consola": "3.2.3",
+        "dedent": "1.5.1",
+        "isomorphic-git": "1.24.5",
+        "json5": "2.2.3",
+        "posthog-node": "3.1.3"
+      },
+      "bin": {
+        "paraglide-js": "bin/run.js"
+      }
+    },
+    "node_modules/@inlang/paraglide-js-adapter-unplugin/node_modules/commander": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-11.1.0.tgz",
+      "integrity": "sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/@inlang/paraglide-js-adapter-vite": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@inlang/paraglide-js-adapter-vite/-/paraglide-js-adapter-vite-1.0.1.tgz",
+      "integrity": "sha512-Hxn+fiyBPXyiaoQw9Zuv/fGrfnyjoaz2ONLg90OH3K+8rl3uOqPVRWck3uKP4W9BWVMkNQlQVBXcPIfIKpzJdg==",
+      "dev": true,
+      "dependencies": {
+        "@inlang/paraglide-js-adapter-unplugin": "1.0.1"
+      }
+    },
+    "node_modules/@inlang/paraglide-js/node_modules/commander": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-11.1.0.tgz",
+      "integrity": "sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/@inlang/plugin": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@inlang/plugin/-/plugin-2.4.0.tgz",
+      "integrity": "sha512-4+T7ZfuqcW4GFp3G+Vb+RTlYF8kKPY/BH0BcvOV2HX5B9UzgyC+dpXiI3TRQTUj7vz0yqp4K+onsaehPb2NGvw==",
+      "dev": true,
+      "dependencies": {
+        "@inlang/json-types": "*",
+        "@inlang/language-tag": "*",
+        "@inlang/message": "*",
+        "@inlang/project-settings": "*",
+        "@inlang/translatable": "*",
+        "@lix-js/fs": "*"
+      },
+      "peerDependencies": {
+        "@sinclair/typebox": "^0.31.17"
+      }
+    },
+    "node_modules/@inlang/project-settings": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@inlang/project-settings/-/project-settings-2.2.0.tgz",
+      "integrity": "sha512-M1D150KYiYoyiHhQp627zhvo/w/M1B11ROEu2u7Jn9005mKEWZS1DDlEOsLuNRl5doHSPHfkGa9qItMtrqr0dA==",
+      "dev": true,
+      "dependencies": {
+        "@inlang/json-types": "*",
+        "@inlang/language-tag": "*"
+      },
+      "peerDependencies": {
+        "@sinclair/typebox": "^0.31.0"
+      }
+    },
+    "node_modules/@inlang/result": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@inlang/result/-/result-1.1.0.tgz",
+      "integrity": "sha512-zLGroi9EUiHuOjUOaglUVTFO7EWdo2OARMJLBO1Q5Ga/xJmSQb6XS1lhqEXBFAjgFarfEMX5YEJWWALogYV3wA==",
+      "dev": true
+    },
+    "node_modules/@inlang/sdk": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/@inlang/sdk/-/sdk-0.19.0.tgz",
+      "integrity": "sha512-8dS7MJt1RfvejkIW4OzSkenCTiH7XRHvmQgMtzWQBvS/BMmEVTWtt2W+5uLV4t6HYjqedf+lHwBAgdiOHp7/Yg==",
+      "dev": true,
+      "dependencies": {
+        "@inlang/json-types": "1.1.0",
+        "@inlang/language-tag": "1.2.0",
+        "@inlang/message": "2.0.0",
+        "@inlang/message-lint-rule": "1.4.0",
+        "@inlang/module": "1.2.0",
+        "@inlang/plugin": "2.4.0",
+        "@inlang/project-settings": "2.2.0",
+        "@inlang/result": "1.1.0",
+        "@inlang/translatable": "1.2.0",
+        "@lix-js/fs": "0.4.0",
+        "@sinclair/typebox": "^0.31.17",
+        "dedent": "1.5.1",
+        "deepmerge-ts": "^5.1.0",
+        "solid-js": "1.6.12",
+        "throttle-debounce": "5.0.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@inlang/translatable": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@inlang/translatable/-/translatable-1.2.0.tgz",
+      "integrity": "sha512-Od/nBm3qigfSpYJKu/Isg0rb34ohZApNk+fOtmZ0vBZXsTBzKaYFW0SeBVqwociRCr1tj40N659Ky+RoyLcv8A==",
+      "dev": true,
+      "dependencies": {
+        "@inlang/language-tag": "*"
+      },
+      "peerDependencies": {
+        "@sinclair/typebox": "^0.31.0"
+      }
+    },
     "node_modules/@internationalized/date": {
       "version": "3.5.0",
       "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.5.0.tgz",
@@ -751,6 +974,15 @@
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
       "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw=="
     },
+    "node_modules/@lix-js/fs": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@lix-js/fs/-/fs-0.4.0.tgz",
+      "integrity": "sha512-IOno98FwY+TPinwXzg5dx6xkCwyBCvkv6DMAQjI1Us4rvI9zObfjXd4E2VIGyT7vfUhpXIs4KXmne+onkCDzsg==",
+      "dev": true,
+      "dependencies": {
+        "js-base64": "^3.7.5"
+      }
+    },
     "node_modules/@melt-ui/pp": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/@melt-ui/pp/-/pp-0.1.2.tgz",
@@ -967,6 +1199,12 @@
         }
       }
     },
+    "node_modules/@sinclair/typebox": {
+      "version": "0.31.28",
+      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.31.28.tgz",
+      "integrity": "sha512-/s55Jujywdw/Jpan+vsy6JZs1z2ZTGxTmbZTPiuSL2wz9mfzA2gN1zzaqmvfi4pq+uOt7Du85fkiwv5ymW84aQ==",
+      "dev": true
+    },
     "node_modules/@speed-highlight/core": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/@speed-highlight/core/-/core-1.2.2.tgz",
@@ -1391,9 +1629,9 @@
       "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ=="
     },
     "node_modules/acorn": {
-      "version": "8.10.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
-      "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==",
+      "version": "8.11.2",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.2.tgz",
+      "integrity": "sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==",
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -1497,6 +1735,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/async-lock": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/async-lock/-/async-lock-1.4.0.tgz",
+      "integrity": "sha512-coglx5yIWuetakm3/1dsX9hxCNox22h7+V80RQOu2XUUMidtArxKoZoOtHUPuR84SycKTXzgGzAUR5hJxujyJQ==",
+      "dev": true
+    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "dev": true
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.14",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.14.tgz",
@@ -1530,6 +1780,17 @@
         "postcss": "^8.1.0"
       }
     },
+    "node_modules/axios": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.2.tgz",
+      "integrity": "sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==",
+      "dev": true,
+      "dependencies": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz",
@@ -1742,6 +2003,12 @@
         "node": ">= 6"
       }
     },
+    "node_modules/clean-git-ref": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/clean-git-ref/-/clean-git-ref-2.0.1.tgz",
+      "integrity": "sha512-bLSptAy2P0s6hU4PzuIMKmMJJSE6gLXGH1cntDu7bWJUksvuM+7ReOK61mozULErYvP6a15rnYl0zFDef+pyPw==",
+      "dev": true
+    },
     "node_modules/code-red": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz",
@@ -1780,6 +2047,18 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "dev": true
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dev": true,
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/comma-separated-tokens": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
@@ -1810,6 +2089,15 @@
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
       "dev": true
     },
+    "node_modules/consola": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/consola/-/consola-3.2.3.tgz",
+      "integrity": "sha512-I5qxpzLv+sJhTVEoLYNcTW+bThDCPsit0vLNKShZx6rLtpilNpmmeTPaeqJb9ZE9dV3DGaeby6Vuhrw38WjeyQ==",
+      "dev": true,
+      "engines": {
+        "node": "^14.18.0 || >=16.10.0"
+      }
+    },
     "node_modules/cookie": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
@@ -1818,6 +2106,18 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/crc-32": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
+      "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==",
+      "dev": true,
+      "bin": {
+        "crc32": "bin/crc32.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -1856,6 +2156,12 @@
         "node": ">=4"
       }
     },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "dev": true
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -1872,6 +2178,35 @@
         }
       }
     },
+    "node_modules/decompress-response": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
+      "integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
+      "dev": true,
+      "dependencies": {
+        "mimic-response": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/dedent": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/dedent/-/dedent-1.5.1.tgz",
+      "integrity": "sha512-+LxW+KLWxu3HW3M2w2ympwtqPrqYRzU8fqi6Fhd18fBALe15blJPI/I4+UHveMVG6lJqB4JNd4UG0S5cnVHwIg==",
+      "dev": true,
+      "peerDependencies": {
+        "babel-plugin-macros": "^3.1.0"
+      },
+      "peerDependenciesMeta": {
+        "babel-plugin-macros": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -1886,6 +2221,24 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/deepmerge-ts": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/deepmerge-ts/-/deepmerge-ts-5.1.0.tgz",
+      "integrity": "sha512-eS8dRJOckyo9maw9Tu5O5RUi/4inFLrnoLkBe3cPfDMx3WZioXtmOew4TXQaxq7Rhl4xjDtR7c6x8nNTxOvbFw==",
+      "dev": true,
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/dequal": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
@@ -1926,6 +2279,12 @@
       "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
       "dev": true
     },
+    "node_modules/diff3": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/diff3/-/diff3-0.0.3.tgz",
+      "integrity": "sha512-iSq8ngPOt0K53A6eVr4d5Kn6GNrM2nQZtC740pzIriHtn4pOQ2lyzEXQMBeVcWERN0ye7fhBsk9PbLLQOnUx/g==",
+      "dev": true
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -2462,6 +2821,40 @@
         "tabbable": "^6.2.0"
       }
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.3",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz",
+      "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dev": true,
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fraction.js": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
@@ -2628,6 +3021,15 @@
       "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
       "dev": true
     },
+    "node_modules/guess-json-indent": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/guess-json-indent/-/guess-json-indent-2.0.0.tgz",
+      "integrity": "sha512-3Tm6R43KhtZWEVSHZnFmYMV9+gf3Vu0HXNNYtPVk2s7o8eGwYlJPHrjLtYw/7HBc10YxV+bfzKMuOf24z5qFng==",
+      "dev": true,
+      "engines": {
+        "node": ">=16.17.0"
+      }
+    },
     "node_modules/has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -2946,6 +3348,40 @@
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
       "dev": true
     },
+    "node_modules/isomorphic-git": {
+      "version": "1.24.5",
+      "resolved": "https://registry.npmjs.org/isomorphic-git/-/isomorphic-git-1.24.5.tgz",
+      "integrity": "sha512-07M4YscftHZJIuw7xZhgWkdFvVjHSBJBsIwWXkxgFCivhb0l8mGNchM7nO2hU27EKSIf0sT4gJivEgLGohWbzA==",
+      "dev": true,
+      "dependencies": {
+        "async-lock": "^1.1.0",
+        "clean-git-ref": "^2.0.1",
+        "crc-32": "^1.2.0",
+        "diff3": "0.0.3",
+        "ignore": "^5.1.4",
+        "minimisted": "^2.0.0",
+        "pako": "^1.0.10",
+        "pify": "^4.0.1",
+        "readable-stream": "^3.4.0",
+        "sha.js": "^2.4.9",
+        "simple-get": "^4.0.1"
+      },
+      "bin": {
+        "isogit": "cli.cjs"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/isomorphic-git/node_modules/pify": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/jiti": {
       "version": "1.19.1",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.19.1.tgz",
@@ -2963,6 +3399,12 @@
         "url": "https://github.com/sponsors/panva"
       }
     },
+    "node_modules/js-base64": {
+      "version": "3.7.5",
+      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-3.7.5.tgz",
+      "integrity": "sha512-3MEt5DTINKqfScXKfJFrRbxkrnk2AxPWGBL/ycjz4dK8iqiSJ06UxD8jh8xuh6p10TX4t2+7FsBYVxxQbMg+qA==",
+      "dev": true
+    },
     "node_modules/js-yaml": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
@@ -2986,6 +3428,18 @@
       "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
       "dev": true
     },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/jsonc-parser": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
@@ -3274,6 +3728,27 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dev": true,
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/mimic-fn": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
@@ -3283,6 +3758,18 @@
         "node": ">=6"
       }
     },
+    "node_modules/mimic-response": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
+      "integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/min-indent": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
@@ -3322,6 +3809,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/minimisted": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/minimisted/-/minimisted-2.0.1.tgz",
+      "integrity": "sha512-1oPjfuLQa2caorJUM8HV8lGgWCc0qqAO1MNv/k05G4qslmsndV/5WdNZrqCiyqiz3wohia2Ij2B7w2Dr7/IyrA==",
+      "dev": true,
+      "dependencies": {
+        "minimist": "^1.2.5"
+      }
+    },
     "node_modules/mkdirp": {
       "version": "0.5.6",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
@@ -3534,6 +4030,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
+      "dev": true
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -3848,6 +4350,19 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "dev": true
     },
+    "node_modules/posthog-node": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/posthog-node/-/posthog-node-3.1.3.tgz",
+      "integrity": "sha512-UaOOoWEUYTcaaDe1w0fgHW/sXvFr3RO0l7yI7RUDzkZNZCfwXNO9r3pc14d1EtNppF/SHBrV5hNiZZATpf/vUw==",
+      "dev": true,
+      "dependencies": {
+        "axios": "^1.6.0",
+        "rusha": "^0.8.14"
+      },
+      "engines": {
+        "node": ">=15.0.0"
+      }
+    },
     "node_modules/preact": {
       "version": "10.11.3",
       "resolved": "https://registry.npmjs.org/preact/-/preact-10.11.3.tgz",
@@ -3988,6 +4503,12 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "dev": true
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -4068,6 +4589,20 @@
         "pify": "^2.3.0"
       }
     },
+    "node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "dev": true,
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -4197,6 +4732,12 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/rusha": {
+      "version": "0.8.14",
+      "resolved": "https://registry.npmjs.org/rusha/-/rusha-0.8.14.tgz",
+      "integrity": "sha512-cLgakCUf6PedEu15t8kbsjnwIFFR2D4RfL+W3iWFJ4iac7z4B0ZI8fxy4R3J956kAI68HclCFGL8MPoUVC3qVA==",
+      "dev": true
+    },
     "node_modules/sade": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
@@ -4208,6 +4749,26 @@
         "node": ">=6"
       }
     },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
     "node_modules/sander": {
       "version": "0.5.1",
       "resolved": "https://registry.npmjs.org/sander/-/sander-0.5.1.tgz",
@@ -4264,6 +4825,19 @@
       "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.6.0.tgz",
       "integrity": "sha512-RVnVQxTXuerk653XfuliOxBP81Sf0+qfQE73LIYKcyMYHG94AuH0kgrQpRDuTZnSmjpysHmzxJXKNfa6PjFhyQ=="
     },
+    "node_modules/sha.js": {
+      "version": "2.4.11",
+      "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
+      "integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==",
+      "dev": true,
+      "dependencies": {
+        "inherits": "^2.0.1",
+        "safe-buffer": "^5.0.1"
+      },
+      "bin": {
+        "sha.js": "bin.js"
+      }
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -4291,6 +4865,51 @@
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
       "dev": true
     },
+    "node_modules/simple-concat": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz",
+      "integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/simple-get": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-4.0.1.tgz",
+      "integrity": "sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "decompress-response": "^6.0.0",
+        "once": "^1.3.1",
+        "simple-concat": "^1.0.0"
+      }
+    },
     "node_modules/sirv": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.3.tgz",
@@ -4313,6 +4932,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/solid-js": {
+      "version": "1.6.12",
+      "resolved": "https://registry.npmjs.org/solid-js/-/solid-js-1.6.12.tgz",
+      "integrity": "sha512-JFqRobfG3q5r1l4RYVOAukk6+FWtHpXGIjgh/GEsHKweN/kK+iHOtzUALE6+P5t/jIcSNeGiVitX8gmJg+cYvQ==",
+      "dev": true,
+      "dependencies": {
+        "csstype": "^3.1.0"
+      }
+    },
     "node_modules/sorcery": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/sorcery/-/sorcery-0.11.0.tgz",
@@ -4350,6 +4978,15 @@
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
       "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g=="
     },
+    "node_modules/string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "dev": true,
+      "dependencies": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
     "node_modules/strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -4739,6 +5376,15 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/throttle-debounce": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-5.0.0.tgz",
+      "integrity": "sha512-2iQTSgkkc1Zyk0MeVrt/3BvuOXYPl/R8Z0U2xxo9rjwNciaHDG3R+Lm6dh4EeUci49DanvBnuqI6jshoQQRGEg==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.22"
+      }
+    },
     "node_modules/thunky": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
@@ -4929,15 +5575,15 @@
       }
     },
     "node_modules/unplugin": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.5.0.tgz",
-      "integrity": "sha512-9ZdRwbh/4gcm1JTOkp9lAkIDrtOyOxgHmY7cjuwI8L/2RTikMcVG25GsZwNAgRuap3iDw2jeq7eoqtAsz5rW3A==",
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.5.1.tgz",
+      "integrity": "sha512-0QkvG13z6RD+1L1FoibQqnvTwVBXvS4XSPwAyinVgoOCl2jAgwzdUKmEj05o4Lt8xwQI85Hb6mSyYkcAGwZPew==",
       "dev": true,
       "dependencies": {
-        "acorn": "^8.10.0",
+        "acorn": "^8.11.2",
         "chokidar": "^3.5.3",
         "webpack-sources": "^3.2.3",
-        "webpack-virtual-modules": "^0.5.0"
+        "webpack-virtual-modules": "^0.6.0"
       }
     },
     "node_modules/unplugin-icons": {
@@ -5175,9 +5821,9 @@
       }
     },
     "node_modules/webpack-virtual-modules": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.5.0.tgz",
-      "integrity": "sha512-kyDivFZ7ZM0BVOUteVbDFhlRt7Ah/CSPwJdi8hBpkK7QLumUqdLtVfm/PX/hkcnrvr0i77fO5+TjZ94Pe+C9iw==",
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.1.tgz",
+      "integrity": "sha512-poXpCylU7ExuvZK8z+On3kX+S8o/2dQ/SVYueKA0D4WEMXROXgY8Ez50/bQEUmvoSMMrWcrJqCHuhAbsiwg7Dg==",
       "dev": true
     },
     "node_modules/which": {
diff --git a/package.json b/package.json
index cb57386..99f55be 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,8 @@
   "private": true,
   "scripts": {
     "dev": "vite dev",
-    "build": "vite build",
+    "build": "npm run build:i18n && vite build",
+    "build:i18n": "paraglide-js compile --project ./tnfshcec.inlang",
     "preview": "vite preview",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
@@ -28,6 +29,8 @@
   },
   "devDependencies": {
     "@iconify-json/mdi": "^1.1.54",
+    "@inlang/paraglide-js": "1.0.0-prerelease.17",
+    "@inlang/paraglide-js-adapter-vite": "^1.0.1",
     "@melt-ui/pp": "^0.1.2",
     "@melt-ui/svelte": "^0.61.1",
     "@sveltejs/adapter-node": "^1.3.1",
diff --git a/src/app.d.ts b/src/app.d.ts
index a71c5f4..55d11cf 100644
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -1,12 +1,15 @@
 import "unplugin-icons/types/svelte";
 import { DefaultSession } from "@auth/core";
+import type { AvailableLanguageTag } from "$paraglide/runtime";
 
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
 declare global {
   namespace App {
     // interface Error {}
-    // interface Locals {}
+    interface Locals {
+      lang: AvailableLanguageTag;
+    }
     // interface PageData {}
     // interface Platform {}
     interface PostData {
diff --git a/src/app.html b/src/app.html
index 771d084..290162e 100644
--- a/src/app.html
+++ b/src/app.html
@@ -1,5 +1,5 @@
-<!DOCTYPE html>
-<html lang="en" class="dark">
+<!doctype html>
+<html lang="%lang%" class="dark">
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%sveltekit.assets%/favicon.ico" />
diff --git a/src/hooks.server.ts b/src/hooks.server.ts
index b4e61b4..415b8a8 100644
--- a/src/hooks.server.ts
+++ b/src/hooks.server.ts
@@ -1,12 +1,15 @@
 import { SvelteKitAuth } from "@auth/sveltekit";
 import GitHub from "@auth/core/providers/github";
 import { env } from "$env/dynamic/private";
+import { detectLanguage } from "$lib/stores/i18n";
+import { sequence } from "@sveltejs/kit/hooks";
+import type { Handle } from "@sveltejs/kit";
 
 const admins = env.ADMINS?.split(",")
   .map((s) => s.trim())
   .filter((s) => s);
 
-export const handle = SvelteKitAuth({
+const auth = SvelteKitAuth({
   providers: [
     GitHub({
       clientId: env.GITHUB_ID,
@@ -33,3 +36,20 @@ export const handle = SvelteKitAuth({
     }
   }
 });
+
+const locale: Handle = async ({ event, resolve }) => {
+  const lang = detectLanguage(event.url, event.request);
+
+  event.locals.lang = lang;
+
+  return resolve(event, {
+    transformPageChunk({ done, html }) {
+      // Only do it at the very end of the rendering process
+      if (done) {
+        return html.replace("%lang%", lang);
+      }
+    }
+  });
+};
+
+export const handle = sequence(auth, locale);
diff --git a/src/lib/components/TableOfContents/TableOfContents.svelte b/src/lib/components/TableOfContents/TableOfContents.svelte
index 0e5d482..6cfba37 100644
--- a/src/lib/components/TableOfContents/TableOfContents.svelte
+++ b/src/lib/components/TableOfContents/TableOfContents.svelte
@@ -1,10 +1,14 @@
 <script lang="ts">
+  import { getContext } from "svelte";
+  import { createTableOfContents } from "@melt-ui/svelte";
   import TocItem from "./TableOfContentsItem.svelte";
   import { scrollOffset } from "$lib/utils/scrollOffset";
-  import { createTableOfContents } from "@melt-ui/svelte";
+  import type { I18nStores } from "$lib/stores/i18n";
 
   export let selector: string;
 
+  const { m } = getContext<I18nStores>("i18n");
+
   const {
     elements: { item },
     states: { activeHeadingIdxs, headingsTree }
@@ -17,7 +21,7 @@
   });
 </script>
 
-<p class="font-bold">On This Page</p>
+<p class="font-bold">{$m.post_tableOfContents()}</p>
 <nav>
   {#key $headingsTree}
     <TocItem tree={$headingsTree} activeHeadingIdxs={$activeHeadingIdxs} {item} />
diff --git a/src/lib/components/actions.ts b/src/lib/components/actions.ts
index 3610214..d0739da 100644
--- a/src/lib/components/actions.ts
+++ b/src/lib/components/actions.ts
@@ -27,11 +27,23 @@ export const editField: Action<
   node.id = id;
   node.name = id;
 
-  fs.className = className ?? ""; 
+  fs.className = className ?? "";
   label.setAttribute("for", id);
   label.innerText = labelText;
 
   node.replaceWith(fs);
   fs.appendChild(label);
   fs.appendChild(node);
+
+  return {
+    update: ({ id, label: labelText, className }) => {
+      node.placeholder = labelText;
+      node.id = id;
+      node.name = id;
+
+      fs.className = className ?? "";
+      label.setAttribute("for", id);
+      label.innerText = labelText;
+    }
+  };
 };
diff --git a/src/lib/stores/i18n.ts b/src/lib/stores/i18n.ts
new file mode 100644
index 0000000..8692241
--- /dev/null
+++ b/src/lib/stores/i18n.ts
@@ -0,0 +1,66 @@
+import { writable, type Readable, type Writable } from "svelte/store";
+import { browser } from "$app/environment";
+import {
+  isAvailableLanguageTag,
+  setLanguageTag,
+  sourceLanguageTag,
+  type AvailableLanguageTag
+} from "$paraglide/runtime";
+import * as m from "$paraglide/messages";
+
+export type I18nStores = {
+  lang: Omit<Writable<AvailableLanguageTag>, "update">;
+  m: Readable<typeof m>;
+};
+
+export function langUrl(url: URL, lang: AvailableLanguageTag): string {
+  url.searchParams.set("lang", lang);
+  return url.toString();
+}
+
+export function i18nStores(lang: AvailableLanguageTag): I18nStores {
+  const { set, subscribe } = writable<AvailableLanguageTag>(lang);
+  const { subscribe: subscribeM, update: updateM } = writable<typeof m>(m);
+
+  subscribe((lang) => {
+    setLanguageTag(lang);
+
+    // INFO: basicly abusing svelte stores for reactive updates
+    updateM((m) => m);
+
+    if (browser) {
+      document.documentElement.lang = lang;
+      window.localStorage.setItem("lang", lang);
+    }
+  });
+
+  return { lang: { set, subscribe }, m: { subscribe: subscribeM } };
+}
+
+export function detectLanguage(url?: URL, request?: Request): AvailableLanguageTag {
+  const requestLang = requestLanguage(request);
+  const browserLang = browser ? window.localStorage.getItem("lang") : undefined;
+
+  return getLang(url?.searchParams.get("lang") ?? browserLang ?? requestLang ?? "");
+}
+
+function requestLanguage(request?: Request): AvailableLanguageTag | undefined {
+  type LanguageWeight = { tag: AvailableLanguageTag; weight: number };
+
+  return (request?.headers.get("Accept-Language") ?? "")
+    .split(",")
+    .map((lang) => {
+      const [tag, weight] = lang.split(";");
+
+      if (!isAvailableLanguageTag(tag)) return undefined;
+
+      return { tag, weight: parseFloat(weight.substring(2)) } as LanguageWeight;
+    })
+    .filter((e): e is LanguageWeight => Boolean(e))
+    .toSorted((a, b) => b.weight - a.weight)[0]?.tag;
+  // INFO: accessing [0] of the array might be `undefined`
+}
+
+function getLang(lang: string): AvailableLanguageTag {
+  return isAvailableLanguageTag(lang) ? lang : sourceLanguageTag;
+}
diff --git a/src/messages/en.json b/src/messages/en.json
new file mode 100644
index 0000000..3097cff
--- /dev/null
+++ b/src/messages/en.json
@@ -0,0 +1,50 @@
+{
+  "lang": "English",
+  "title": "National Tainan First Senior High School",
+  "name": "Computer Engineering Club",
+  "lightTheme": "Light Theme",
+  "darkTheme": "Dark Theme",
+  "language": "Language",
+  "signIn": "Sign In",
+  "signOut": "Sign Out",
+  "signedInAs": "Signed in as {user}",
+  "dialogCancel": "Cancel",
+  "dialogConfirm": "Confirm",
+  "home_title": "CE🐔",
+  "home_description": "你說得對，但是電機社的常住人口有十幾人，同時，僅澳大利亞就有4700萬隻袋鼠。如果袋鼠決定入侵403，那麼每一個電機社員要打3百萬只袋鼠，你不知道，你不在乎，你只關心你自己。",
+  "home_quote": "電機社！啟動！嘻嘻嘻嘻嘻！我最喜歡玩機器了，我是 Arduino 玩家！你看這是我新買的模組～蜂鳴器！！蹦蹦喇叭～",
+  "home_moreInfo": "更多資訊",
+  "home_newsTitle": "最新消息",
+  "home_newsDescription": "你好，我是狒狒，目前在中国台湾桃园市六福村附近山区，刚刚突然开始下大雷雨，我急需钱买雨具，若我日后逃脱成功，必有钜额回报，你可以帮帮我吗？请加Line：87878787monkey，谢谢！",
+  "home_newsMore": "查看其他",
+  "home_interestsTitle": "Club Activities",
+  "home_interestsDescription": "應該永遠不會去玩了😡😡\n好歹我也是Google地圖6級在地導覽📌\n專業攝影師📷專業評論家👨‍🍳😳😳😳\n剛剛發現社團的態度是這樣😫😫\n人家沒混成😭😭😭還想得星星😅😅\n還放在粉絲團公審😂🤬\n難怪我們社課的時候看地圖評論覺得很納悶😱😰\n為什麼評論會這麼兩極化🥺😒",
+  "home_interestsRobot": "Robot",
+  "home_interestsRobotDescription": "區區幾個人類…我一個一個ㄅㄧㄢˇ",
+  "home_interestsHardware": "Hardware",
+  "home_interestsHardwareDescription": "It is said that the Computer Engineering Club lacks batteries!?",
+  "home_interestsSoftware": "Software / Website",
+  "home_interestsSoftwareDescription": "JS IS THE BEST! (X",
+  "home_interestsOthers": "Your interest!",
+  "home_interestsOthersDescription": "We depleted your enthusiasm to near-exhaustion~ (in a positive sense)",
+  "home_commentsTitle": "Everyone says...",
+  "post_postList": "Post List",
+  "post_postListDescription": "I encountered a girl;\nshe gave me a brief smile and pressed the eighth floor button.\nQuite suggestive, she has 80% has some interest in me,\nbut I won't be easily deceived (ゝ∀･)⌒☆",
+  "post_newPost": "Create New Post",
+  "post_pinned": "Pinned",
+  "post_postedBy": "By {user}",
+  "post_tableOfContents": "On This Page",
+  "post_editPost": "Edit",
+  "post_savePost": "Save",
+  "post_deletePost": "Delete",
+  "post_deleteConfirmation": "You're deleting this post, confirm with caution!\nThe post ain't coming back after this!",
+  "post_saveMessage": "Post is Saved",
+  "post_deleteMessage": "Post Deleted",
+  "post_fieldUrl": "URL",
+  "post_fieldTitle": "Title",
+  "post_fieldAuthor": "Author",
+  "post_fieldDate": "Date",
+  "post_fieldImage": "Image",
+  "post_fieldDescription": "Description",
+  "post_fieldPinned": "Pinned"
+}
diff --git a/src/messages/ja.json b/src/messages/ja.json
new file mode 100644
index 0000000..a02d2e1
--- /dev/null
+++ b/src/messages/ja.json
@@ -0,0 +1,50 @@
+{
+  "lang": "日本語",
+  "title": "国立台南第一高級中学",
+  "name": "電機工学部",
+  "lightTheme": "ライトテーマ",
+  "darkTheme": "ダークテーマ",
+  "language": "言語",
+  "signIn": "ログイン",
+  "signOut": "ログアウト",
+  "signedInAs": "{user}, おかえり！",
+  "dialogCancel": "キャンセル",
+  "dialogConfirm": "確認",
+  "home_title": "CE🐔",
+  "home_description": "你說得對，但是電機社的常住人口有十幾人，同時，僅澳大利亞就有4700萬隻袋鼠。如果袋鼠決定入侵403，那麼每一個電機社員要打3百萬只袋鼠，你不知道，你不在乎，你只關心你自己。",
+  "home_quote": "電機社！啟動！嘻嘻嘻嘻嘻！我最喜歡玩機器了，我是 Arduino 玩家！你看這是我新買的模組～蜂鳴器！！蹦蹦喇叭～",
+  "home_moreInfo": "詳細な情報",
+  "home_newsTitle": "最新情報",
+  "home_newsDescription": "你好，我是狒狒，目前在中国台湾桃园市六福村附近山区，刚刚突然开始下大雷雨，我急需钱买雨具，若我日后逃脱成功，必有钜额回报，你可以帮帮我吗？请加Line：87878787monkey，谢谢！",
+  "home_newsMore": "他を確認",
+  "home_interestsTitle": "部活動",
+  "home_interestsDescription": "應該永遠不會去玩了😡😡\n好歹我也是Google地圖6級在地導覽📌\n專業攝影師📷專業評論家👨‍🍳😳😳😳\n剛剛發現社團的態度是這樣😫😫\n人家沒混成😭😭😭還想得星星😅😅\n還放在粉絲團公審😂🤬\n難怪我們社課的時候看地圖評論覺得很納悶😱😰\n為什麼評論會這麼兩極化🥺😒",
+  "home_interestsRobot": "ロボット",
+  "home_interestsRobotDescription": "區區幾個人類…我一個一個ㄅㄧㄢˇ",
+  "home_interestsHardware": "ハードウェア",
+  "home_interestsHardwareDescription": "據說社部沒有電池？",
+  "home_interestsSoftware": "ソフトウェア / ウェブページ",
+  "home_interestsSoftwareDescription": "それなら、やはりJavaScriptが最高です。！（X",
+  "home_interestsOthers": "あなたの興味！",
+  "home_interestsOthersDescription": "私たちはあなたに情熱を使い果たさせました~（良い側面）",
+  "home_commentsTitle": "皆が言っている",
+  "post_postList": "最新のニュース",
+  "post_postListDescription": "エレベーターで女の子に出会った。\n彼女は微笑んで、8階を押した。\nふふ、確かに何かを示唆している。\nでも、8階が好きになるほど私は軽い男じゃないよ。(ゝ∀･)⌒☆",
+  "post_newPost": "新しい投稿を作成",
+  "post_pinned": "ピン留め",
+  "post_postedBy": "作者： {user}",
+  "post_tableOfContents": "このページで",
+  "post_editPost": "編集",
+  "post_savePost": "保存",
+  "post_deletePost": "削除",
+  "post_deleteConfirmation": "この投稿を削除します。慎重に確認してください。\nこの投稿は削除後に復元できません：（",
+  "post_saveMessage": "記事は保存されました。",
+  "post_deleteMessage": "記事は削除されました。",
+  "post_fieldUrl": "URL",
+  "post_fieldTitle": "タイトル",
+  "post_fieldAuthor": "作者",
+  "post_fieldDate": "日付",
+  "post_fieldImage": "画像",
+  "post_fieldDescription": "説明",
+  "post_fieldPinned": "ピン留め"
+}
diff --git a/src/messages/zh-tw.json b/src/messages/zh-tw.json
new file mode 100644
index 0000000..8b982e4
--- /dev/null
+++ b/src/messages/zh-tw.json
@@ -0,0 +1,50 @@
+{
+  "lang": "繁體中文（臺灣）",
+  "title": "新樓醫院心臟科附屬",
+  "name": "臺南一中電機社",
+  "lightTheme": "淺色主題",
+  "darkTheme": "深色主題",
+  "language": "語言",
+  "signIn": "登入",
+  "signOut": "登出",
+  "signedInAs": "{user} 傻逼成功登陸",
+  "dialogCancel": "取消",
+  "dialogConfirm": "確認",
+  "home_title": "電🐔社",
+  "home_description": "你說得對，但是電機社的常住人口有十幾人，同時，僅澳大利亞就有4700萬隻袋鼠。如果袋鼠決定入侵403，那麼每一個電機社員要打3百萬只袋鼠，你不知道，你不在乎，你只關心你自己。",
+  "home_quote": "電機社！啟動！嘻嘻嘻嘻嘻！我最喜歡玩機器了，我是 Arduino 玩家！你看這是我新買的模組～蜂鳴器！！蹦蹦喇叭～",
+  "home_moreInfo": "更多資訊",
+  "home_newsTitle": "最新消息",
+  "home_newsDescription": "你好，我是狒狒，目前在中国台湾桃园市六福村附近山区，刚刚突然开始下大雷雨，我急需钱买雨具，若我日后逃脱成功，必有钜额回报，你可以帮帮我吗？请加Line：87878787monkey，谢谢！",
+  "home_newsMore": "查看其他",
+  "home_interestsTitle": "社團活動",
+  "home_interestsDescription": "應該永遠不會去玩了😡😡\n好歹我也是Google地圖6級在地導覽📌\n專業攝影師📷專業評論家👨‍🍳😳😳😳\n剛剛發現社團的態度是這樣😫😫\n人家沒混成😭😭😭還想得星星😅😅\n還放在粉絲團公審😂🤬\n難怪我們社課的時候看地圖評論覺得很納悶😱😰\n為什麼評論會這麼兩極化🥺😒",
+  "home_interestsRobot": "機器人",
+  "home_interestsRobotDescription": "區區幾個人類…我一個一個ㄅㄧㄢˇ",
+  "home_interestsHardware": "硬體",
+  "home_interestsHardwareDescription": "據說社部沒有電池？",
+  "home_interestsSoftware": "軟體 / 網頁",
+  "home_interestsSoftwareDescription": "還是 JS 最棒了！（X",
+  "home_interestsOthers": "你的興趣！",
+  "home_interestsOthersDescription": "我們讓你將熱情消耗殆盡~（好的方面）",
+  "home_commentsTitle": "大家都說…",
+  "post_postList": "最新消息",
+  "post_postListDescription": "在電梯遇到了一個女生\n她對我笑了一下\n按下了第8層\n呵 真會暗示\n她8層有點喜歡我吧\n但我是不會暈的 (ゝ∀･)⌒☆",
+  "post_newPost": "創建新文章",
+  "post_pinned": "釘選",
+  "post_postedBy": "作者： {user}",
+  "post_tableOfContents": "在此頁面",
+  "post_editPost": "編輯",
+  "post_savePost": "儲存",
+  "post_deletePost": "刪除",
+  "post_deleteConfirmation": "你正在刪除這篇文章，請三思而後行！\n刪掉之後美好的過去就一去不復返了：（",
+  "post_saveMessage": "文章已儲存",
+  "post_deleteMessage": "文章已刪除",
+  "post_fieldUrl": "連結",
+  "post_fieldTitle": "標題",
+  "post_fieldAuthor": "作者",
+  "post_fieldDate": "日期",
+  "post_fieldImage": "圖片",
+  "post_fieldDescription": "介紹",
+  "post_fieldPinned": "釘選"
+}
diff --git a/src/routes/+layout.server.ts b/src/routes/+layout.server.ts
index e0635ca..7943f4b 100644
--- a/src/routes/+layout.server.ts
+++ b/src/routes/+layout.server.ts
@@ -4,6 +4,7 @@ import type { LayoutServerLoad } from "./$types";
 
 export const load: LayoutServerLoad = async (event) => {
   return {
-    session: await event.locals.getSession()
+    session: await event.locals.getSession(),
+    lang: event.locals.lang
   };
 };
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 286af4b..ccfcf1e 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -5,24 +5,42 @@
   import { createDropdownMenu, melt } from "@melt-ui/svelte";
   import { fly } from "svelte/transition";
   import { base } from "$app/paths";
+  import { page } from "$app/stores";
   import { themeStore } from "$lib/stores/theme";
+  import { detectLanguage, langUrl } from "$lib/stores/i18n";
+  import { availableLanguageTags } from "$paraglide/runtime";
 
   // Icon
   import Toaster from "$lib/components/Toaster.svelte";
   import Menu from "~icons/mdi/menu";
   import Brightness from "~icons/mdi/brightness-5";
   import Moon from "~icons/mdi/moon-waning-crescent";
+  import Earth from "~icons/mdi/earth";
+  import ChevronRight from "~icons/mdi/chevron-right";
   import logo from "$lib/assets/logo.svg";
+  import { setContext } from "svelte";
 
   export let data;
-  const { session } = data;
+
+  const { session, i18n } = data;
+
+  $: i18n.lang.set(detectLanguage($page.url));
+  const m = i18n.m;
+
+  setContext("i18n", i18n);
 
   // TODO: scroll detection & changing title
 
   const {
     elements: { menu, item, trigger, separator },
+    builders: { createSubmenu },
     states: { open }
   } = createDropdownMenu({ forceVisible: true, preventScroll: false });
+
+  const {
+    elements: { subMenu, subTrigger },
+    states: { subOpen }
+  } = createSubmenu();
 </script>
 
 <!--nav-bar-->
@@ -30,12 +48,12 @@
   class="sticky top-0 z-50 h-20 w-full border-b border-text/10 bg-background/60 px-8 py-2 backdrop-blur"
 >
   <div class="mx-auto flex w-full max-w-6xl items-center justify-between">
-    <a href="{base}/" class="flex items-center gap-2">
+    <a href="{base}/" class="flex items-center gap-2 overflow-hidden">
       <img src={logo} class="h-12 w-12" alt="TNFSHCEC icon" />
       <div>
-        <span class="font-bold">新樓醫院心臟科附屬</span>
+        <span class="font-bold whitespace-nowrap">{$m.title()}</span>
         <br />
-        <span class="text-xl font-bold">臺南一中電機社</span>
+        <span class="text-xl font-bold whitespace-nowrap">{$m.name()}</span>
       </div>
     </a>
     <button
@@ -51,36 +69,65 @@
     {#if $open}
       <div
         use:melt={$menu}
-        class="z-top max-w-xs overflow-hidden rounded border border-primary/60 bg-background/60 backdrop-blur"
+        class="z-top max-w-xs rounded border border-primary/60 bg-background/60 backdrop-blur"
         transition:fly={{ duration: 150, y: -10 }}
       >
+        <!-- TODO: maybe extract item classes (especially the `first:rounded-t` and `last:rounded-b`)-->
         <div
           use:melt={$item}
-          class="icon-flex px-4 py-2 transition-colors hover:bg-primary/20"
+          class="icon-flex rounded-t px-4 py-2 transition-colors hover:bg-primary/20"
           on:m-click={() => themeStore.toggle()}
         >
           {#if $themeStore === "light"}
             <Brightness class="h-4 w-4" />
-            <span>Light Theme</span>
+            <span>{$m.lightTheme()}</span>
           {:else}
             <Moon class="h-4 w-4" />
-            <span>Dark Theme</span>
+            <span>{$m.darkTheme()}</span>
           {/if}
         </div>
 
+        <div
+          use:melt={$subTrigger}
+          class="icon-flex px-4 py-2 transition-colors hover:bg-primary/20"
+        >
+          <Earth class="h-4 w-4" />
+          <span>{$m.language()}</span>
+          <ChevronRight class="ml-auto h-4 w-4" />
+        </div>
+
+        {#if $subOpen}
+          <div
+            class="z-top max-w-xs rounded border border-primary/60 bg-background/60 backdrop-blur"
+            use:melt={$subMenu}
+            transition:fly={{ duration: 150, y: -10 }}
+          >
+            {#each availableLanguageTags as tag}
+              <a
+                use:melt={$item}
+                class="block whitespace-nowrap px-4 py-2 transition-colors first:rounded-t last:rounded-b hover:bg-primary/20"
+                href={langUrl($page.url, tag)}
+                hreflang={tag}
+              >
+                {$m.lang({}, { languageTag: tag }) || tag}
+              </a>
+            {/each}
+          </div>
+        {/if}
+
         <div use:melt={$separator} class="h-[1px] bg-text/20" />
 
         {#if session?.user === undefined}
           <a
             use:melt={$item}
-            class="block px-4 py-2 transition-colors hover:bg-primary/20"
+            class="block rounded-b px-4 py-2 transition-colors hover:bg-primary/20"
             href="{base}/auth/signin"
           >
-            Sign In
+            {$m.signIn()}
           </a>
         {:else}
-          <span class="px-4 text-sm">
-            Signed in as <span class="font-bold">{session.user.name ?? session.user.email}</span>
+          <span class="px-4 text-sm font-bold">
+            {$m.signedInAs({ user: session.user.name ?? session.user.email ?? "Unknown" })}
           </span>
           {#if session.user.role === "admin"}
             <a
@@ -88,7 +135,7 @@
               class="block px-4 py-2 transition-colors hover:bg-primary/20"
               href="{base}/newpost"
             >
-              New Post
+              {$m.post_newPost()}
             </a>
           {/if}
           <!-- <div -->
@@ -100,10 +147,10 @@
           <!-- </div> -->
           <a
             use:melt={$item}
-            class="block px-4 py-2 transition-colors hover:bg-primary/20"
+            class="block rounded-b px-4 py-2 transition-colors hover:bg-primary/20"
             href="{base}/auth/signout"
           >
-            Sign Out
+            {$m.signOut()}
           </a>
         {/if}
       </div>
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
new file mode 100644
index 0000000..f525bab
--- /dev/null
+++ b/src/routes/+layout.ts
@@ -0,0 +1,9 @@
+import { i18nStores } from "$lib/stores/i18n";
+import type { LayoutLoad } from "./$types";
+
+export const load = (({ data }) => {
+  return {
+    ...data,
+    i18n: i18nStores(data.lang)
+  };
+}) satisfies LayoutLoad;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 7d6ef8e..0309ba8 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -20,6 +20,7 @@
   import { anchorScroll } from "$lib/components/actions";
 
   export let data;
+  const m = data.i18n.m;
 
   // comments
   const comments: ComponentProps<Comment>[][] = [
@@ -54,10 +55,8 @@
       class="absolute left-0 top-1/2 z-10 flex max-w-lg -translate-y-1/2 flex-col items-start gap-4"
     >
       <div class="space-y-4">
-        <header class="text-4xl font-bold">電🐔社</header>
-        <section class="text-xl">
-          你說得對，但是電機社的常住人口有十幾人，同時，僅澳大利亞就有4700萬隻袋鼠。如果袋鼠決定入侵403，那麼每一個電機社員要打3百萬只袋鼠，你不知道，你不在乎，你只關心你自己。
-        </section>
+        <header class="text-4xl font-bold">{$m.home_title()}</header>
+        <section class="text-xl">{$m.home_description()}</section>
       </div>
       <div class="flex items-center justify-center gap-2">
         <a
@@ -97,13 +96,10 @@
 
 <!-- more -->
 <section class="flex h-72 w-full flex-col items-center gap-4 px-16 py-24">
-  <div class="max-w-4xl text-lg">
-    電機社！啟動！嘻嘻嘻嘻嘻！我最喜歡玩機器了，我是 Arduino
-    玩家！你看這是我新買的模組～蜂鳴器！！蹦蹦喇叭～
-  </div>
+  <div class="max-w-4xl text-lg">{$m.home_quote()}</div>
   <a class="icon-flex transition-colors hover:text-accent" href="#news" use:anchorScroll>
     <ArrowDown class="h-4 w-4" />
-    <span>更多資訊</span>
+    <span>{$m.home_moreInfo()}</span>
   </a>
 </section>
 
@@ -113,13 +109,11 @@
     class="mx-auto flex h-full max-w-screen-xl flex-col items-center justify-center gap-4 md:flex-row"
   >
     <div class="max-w-lg flex-grow basis-80 space-y-4">
-      <header class="text-center text-2xl font-bold">最新消息</header>
-      <div class="text-lg">
-        你好，我是狒狒，目前在中国台湾桃园市六福村附近山区，刚刚突然开始下大雷雨，我急需钱买雨具，若我日后逃脱成功，必有钜额回报，你可以帮帮我吗？请加Line：87878787monkey，谢谢！
-      </div>
+      <header class="text-center text-2xl font-bold">{$m.home_newsTitle()}</header>
+      <div class="text-lg">{$m.home_newsDescription()}</div>
       <a class="btn-accent icon-flex mx-auto w-fit" href="{base}/post">
         <ArrowRight class="h-6 w-6" />
-        <span>查看其他</span>
+        <span>{$m.home_newsMore()}</span>
       </a>
     </div>
     <div class="flex-grow" />
@@ -137,43 +131,34 @@
     class="mx-auto flex h-full max-w-screen-xl flex-col items-center justify-center gap-4 md:flex-row"
   >
     <div class="max-w-lg flex-grow basis-80 space-y-4">
-      <header class="text-center text-2xl font-bold">社團活動</header>
-      <div class="text-lg">
-        應該永遠不會去玩了😡😡<br />
-        好歹我也是Google地圖6級在地導覽📌<br />
-        專業攝影師📷專業評論家👨‍🍳😳😳😳<br />
-        剛剛發現社團的態度是這樣😫😫<br />
-        人家沒混成😭😭😭還想得星星😅😅<br />
-        還放在粉絲團公審😂🤬<br />
-        難怪我們社課的時候看地圖評論覺得很納悶😱😰<br />
-        為什麼評論會這麼兩極化🥺😒
-      </div>
+      <header class="text-center text-2xl font-bold">{$m.home_interestsTitle()}</header>
+      <div class="whitespace-pre-wrap text-lg">{$m.home_interestsDescription()}</div>
     </div>
     <div class="flex-grow" />
     <div class="grid grid-cols-2 grid-rows-2 gap-2">
       <div
         class="aspect-square max-h-52 rounded-lg border border-primary/80 p-4 transition-all hover:border-primary hover:shadow-glow-sm hover:shadow-primary"
       >
-        <header class="text-xl font-bold">機器人</header>
-        <div class="text-lg text-text/80">區區幾個人類…我一個一個ㄅㄧㄢˇ</div>
+        <header class="text-xl font-bold">{$m.home_interestsRobot()}</header>
+        <div class="text-lg text-text/80">{$m.home_interestsRobotDescription()}</div>
       </div>
       <div
         class="aspect-square max-h-52 rounded-lg border border-primary/80 p-4 transition-all hover:border-primary hover:shadow-glow-sm hover:shadow-primary"
       >
-        <header class="text-xl font-bold">硬體</header>
-        <div class="text-lg text-text/80">據說社部沒有電池？</div>
+        <header class="text-xl font-bold">{$m.home_interestsHardware()}</header>
+        <div class="text-lg text-text/80">{$m.home_interestsHardwareDescription()}</div>
       </div>
       <div
         class="aspect-square max-h-52 rounded-lg border border-primary/80 p-4 transition-all hover:border-primary hover:shadow-glow-sm hover:shadow-primary"
       >
-        <header class="text-xl font-bold">軟體 / 網頁</header>
-        <div class="text-lg text-text/80">還是 JS 最棒了！（X</div>
+        <header class="text-xl font-bold">{$m.home_interestsSoftware()}</header>
+        <div class="text-lg text-text/80">{$m.home_interestsSoftwareDescription()}</div>
       </div>
       <div
         class="aspect-square max-h-52 rounded-lg border border-primary/80 p-4 transition-all hover:border-primary hover:shadow-glow-sm hover:shadow-primary"
       >
-        <header class="text-xl font-bold">你的興趣！</header>
-        <div class="text-lg text-text/80">我們讓你將熱情消耗殆盡~（好的方面）</div>
+        <header class="text-xl font-bold">{$m.home_interestsOthers()}</header>
+        <div class="text-lg text-text/80">{$m.home_interestsOthersDescription()}</div>
       </div>
     </div>
   </div>
@@ -181,7 +166,7 @@
 
 <section class="w-full px-4 py-16" id="comments">
   <div class="mx-auto flex h-full max-w-screen-xl flex-col items-center gap-4">
-    <div class="text-2xl font-bold">大家都說…</div>
+    <div class="text-2xl font-bold">{$m.home_commentsTitle()}</div>
     <div class="flex max-w-full snap-x snap-proximity gap-4 overflow-x-auto">
       {#each comments as comList}
         <div class="flex snap-start flex-col gap-4">
diff --git a/src/routes/post/+page.svelte b/src/routes/post/+page.svelte
index 448084f..3f7167e 100644
--- a/src/routes/post/+page.svelte
+++ b/src/routes/post/+page.svelte
@@ -4,19 +4,15 @@
   import PostCard from "$lib/components/PostCard.svelte";
 
   export let data;
+  const m = data.i18n.m;
 </script>
 
 <div class="w-full p-4">
   <div class="mx-auto flex max-w-screen-xl flex-col gap-4">
     <PageTitle current="postList" />
 
-    <div class="text-xl">
-      在電梯遇到了一個女生<br />
-      她對我笑了一下<br />
-      按下了第8層<br />
-      呵 真會暗示<br />
-      她8層有點喜歡我吧<br />
-      但我是不會暈的 (ゝ∀･)⌒☆
+    <div class="whitespace-pre-wrap text-xl">
+      {$m.post_postListDescription()}
     </div>
 
     <div class="flex flex-col gap-4 py-4">
diff --git a/src/routes/post/[...post]/+page.svelte b/src/routes/post/[...post]/+page.svelte
index 9b91b9b..89c488e 100644
--- a/src/routes/post/[...post]/+page.svelte
+++ b/src/routes/post/[...post]/+page.svelte
@@ -11,12 +11,12 @@
   import Pencil from "~icons/mdi/pencil-circle";
 
   // other
-  import { rawPlugin, slugPlugin, componentsPlugin } from "$lib/utils/exmarkdown-plugins";
   import { localeDateFromString } from "$lib/utils/date";
   import { base } from "$app/paths";
   import { fade, fly } from "svelte/transition";
 
   export let data;
+  const m = data.i18n.m;
 
   // extract data
   let {
@@ -45,8 +45,8 @@
           <Pin class="h-4 w-4 text-primary" />
         {/if}
         <span>
-          {pinned && !author && !date ? "Pinned" : ""}
-          {author ? `By ${author}` : ""}
+          {pinned && !author && !date ? $m.post_pinned() : ""}
+          {author ? $m.post_postedBy({ user: author }) : ""}
           {author && date ? "/" : ""}
           {localeDate}
         </span>
@@ -55,12 +55,12 @@
       <div slot="title" class="flex flex-grow basis-0 flex-wrap justify-end gap-2">
         <button class="btn-text icon-flex md:hidden" use:melt={$trigger}>
           <List class="h-4 w-4" />
-          <span>Contents</span>
+          <span>{$m.post_tableOfContents()}</span>
         </button>
         {#if data.session?.user?.role === "admin"}
           <a class="btn-accent icon-flex" href="{base}/post/{url}/edit">
             <Pencil class="h-4 w-4" />
-            <span>Edit</span>
+            <span>{$m.post_editPost()}</span>
           </a>
         {/if}
       </div>
diff --git a/src/routes/post/[...post]/edit/+page.svelte b/src/routes/post/[...post]/edit/+page.svelte
index 3e77cf8..97d78c3 100644
--- a/src/routes/post/[...post]/edit/+page.svelte
+++ b/src/routes/post/[...post]/edit/+page.svelte
@@ -20,7 +20,8 @@
 
   export let data;
 
-  let { md, data: postData } = data;
+  let { md, data: postData, i18n } = data;
+  const m = i18n.m;
   $: localeDate = localeDateFromString(postData.date ?? "");
 
   let editUrl = postData.url;
@@ -49,7 +50,7 @@
   async function savePost() {
     await formAction("?/save");
 
-    addToast({ data: { title: "Post is Saved" } });
+    addToast({ data: { title: $m.post_saveMessage() } });
   }
 
   async function deletePost() {
@@ -58,7 +59,7 @@
 
     await formAction("?/delete");
 
-    addToast({ data: { title: "Post Deleted" } });
+    addToast({ data: { title: $m.post_deleteMessage() } });
 
     goto(`${base}/post`);
   }
@@ -72,8 +73,8 @@
           <Pin class="h-4 w-4 text-primary" />
         {/if}
         <span>
-          {postData.pinned && !postData.author && !postData.date ? "Pinned" : ""}
-          {postData.author ? `By ${postData.author}` : ""}
+          {postData.pinned && !postData.author && !postData.date ? $m.post_pinned() : ""}
+          {postData.author ? $m.post_postedBy({ user: postData.author }) : ""}
           {postData.author && postData.date ? "/" : ""}
           {localeDate}
         </span>
@@ -82,11 +83,11 @@
       <div slot="title" class="flex flex-grow basis-0 flex-wrap justify-end gap-2">
         <button class="icon-flex icon btn-accent" on:click={savePost}>
           <Save class="h-4 w-4" />
-          Save
+          {$m.post_savePost()}
         </button>
         <button class="icon-flex btn-text" on:click={deletePost}>
           <Alert class="h-4 w-4" />
-          Delete
+          {$m.post_deletePost()}
         </button>
       </div>
     </PageTitle>
@@ -106,18 +107,21 @@
           transition:fly={{ duration: 150, y: 10 }}
         >
           <h2 use:melt={$title} class="text-lg font-bold">DELETE POST</h2>
-          <p use:melt={$description} class="leading-normal text-text/80">
-            You're deleting this post, confirm with caution!<br />
-            The post ain't coming back after this!
+          <p use:melt={$description} class="whitespace-pre-wrap leading-normal text-text/80">
+            {$m.post_deleteConfirmation()}
           </p>
 
           <div class="mt-6 flex justify-end gap-4">
-            <button use:melt={$close} class="btn-text opacity-80">Cancel</button>
+            <button use:melt={$close} class="btn-text opacity-80">
+              {$m.dialogCancel()}
+            </button>
             <button
               use:melt={$close}
               class="btn-accent"
-              on:m-click={() => ($confirmedDelete = true)}>Confirm</button
+              on:m-click={() => ($confirmedDelete = true)}
             >
+              {$m.dialogConfirm()}
+            </button>
           </div>
         </div>
       {/if}
@@ -126,38 +130,38 @@
     <form id="post-edit" class="space-y-4" bind:this={form}>
       <section class="grid grid-cols-2 gap-6">
         <input
-          use:editField={{ id: "url", label: "URL", className: "col-span-2" }}
+          use:editField={{ id: "url", label: $m.post_fieldUrl(), className: "col-span-2" }}
           class="block w-full border-0 border-b border-text/60 bg-transparent px-2 transition-colors focus:border-accent focus:ring-0"
           bind:value={editUrl}
         />
         <input
-          use:editField={{ id: "title", label: "Title" }}
+          use:editField={{ id: "title", label: $m.post_fieldTitle() }}
           class="block w-full border-0 border-b border-text/60 bg-transparent px-2 transition-colors focus:border-accent focus:ring-0"
           bind:value={postData.title}
         />
         <input
-          use:editField={{ id: "author", label: "Author" }}
+          use:editField={{ id: "author", label: $m.post_fieldAuthor() }}
           class="block w-full border-0 border-b border-text/60 bg-transparent px-2 transition-colors focus:border-accent focus:ring-0"
           bind:value={postData.author}
         />
         <input
-          use:editField={{ id: "date", label: "Date" }}
+          use:editField={{ id: "date", label: $m.post_fieldDate() }}
           class="block w-full border-0 border-b border-text/60 bg-transparent px-2 transition-colors focus:border-accent focus:ring-0"
           type="date"
           bind:value={postData.date}
         />
         <input
-          use:editField={{ id: "image", label: "Image" }}
+          use:editField={{ id: "image", label: $m.post_fieldImage() }}
           class="block w-full border-0 border-b border-text/60 bg-transparent px-2 transition-colors focus:border-accent focus:ring-0"
           bind:value={postData.image}
         />
         <input
-          use:editField={{ id: "desc", label: "Description" }}
+          use:editField={{ id: "desc", label: $m.post_fieldDescription() }}
           class="block w-full border-0 border-b border-text/60 bg-transparent px-2 transition-colors focus:border-accent focus:ring-0"
           bind:value={postData.desc}
         />
         <input
-          use:editField={{ id: "pinned", label: "Pinned" }}
+          use:editField={{ id: "pinned", label: $m.post_fieldPinned() }}
           class="block h-4 w-4 rounded border-text/60 bg-transparent text-primary focus:ring-accent/60"
           type="checkbox"
           bind:checked={postData.pinned}
diff --git a/svelte.config.js b/svelte.config.js
index f5d8481..7e977fe 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -29,6 +29,9 @@ const config = {
     adapter: adapter(),
     paths: {
       base
+    },
+    alias: {
+      $paraglide: "./src/lib/paraglide"
     }
   }
 };
diff --git a/tnfshcec.inlang/settings.json b/tnfshcec.inlang/settings.json
new file mode 100644
index 0000000..bbad971
--- /dev/null
+++ b/tnfshcec.inlang/settings.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://inlang.com/schema/project-settings",
+  "sourceLanguageTag": "zh-tw",
+  "languageTags": [
+    "en",
+    "zh-tw",
+    "ja"
+  ],
+  "modules": [
+    "https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-empty-pattern@latest/dist/index.js",
+    "https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-identical-pattern@latest/dist/index.js",
+    "https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-missing-translation@latest/dist/index.js",
+    "https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-without-source@latest/dist/index.js",
+    "https://cdn.jsdelivr.net/npm/@inlang/plugin-message-format@latest/dist/index.js",
+    "https://cdn.jsdelivr.net/npm/@inlang/plugin-m-function-matcher@latest/dist/index.js"
+  ],
+  "plugin.inlang.messageFormat": {
+    "pathPattern": "./src/messages/{languageTag}.json"
+  }
+}
diff --git a/tsconfig.json b/tsconfig.json
index 794b95b..78d0dca 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -8,7 +8,8 @@
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "sourceMap": true,
-    "strict": true
+    "strict": true,
+    "moduleResolution": "Bundler"
   }
   // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
   //
diff --git a/vite.config.ts b/vite.config.ts
index b1c63dd..2a06471 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,4 +1,5 @@
 import { sveltekit } from "@sveltejs/kit/vite";
+import { paraglide } from "@inlang/paraglide-js-adapter-vite";
 import { defineConfig } from "vite";
 import { purgeCss } from "vite-plugin-tailwind-purgecss";
 import Icons from "unplugin-icons/vite";
@@ -6,6 +7,10 @@ import Icons from "unplugin-icons/vite";
 export default defineConfig({
   plugins: [
     sveltekit(),
+    paraglide({
+      project: "./tnfshcec.inlang",
+      outdir: "./src/lib/paraglide"
+    }),
     Icons({
       compiler: "svelte"
     }),