diff --git a/README.md b/README.md
index 637aa8b..6094aef 100644
--- a/README.md
+++ b/README.md
@@ -37,6 +37,10 @@ traveling-around-the-world/
 - 改為 `mode="api"` 並設定 `apiBaseUrl` 後，就會改用 `VisitApiClient` 透過 REST API 存取。
 - Vite `proxy` 已轉發 `/api` 至 `http://localhost:4000`，未來後端啟動後無需改動前端呼叫。
 
+### 多語系支援
+- 透過 `react-i18next` 提供繁體中文與英文，語系檔位於 `client/src/locales/`。
+- 右上角的語言選單 (`LanguageSwitcher`) 可即時切換語言，並記錄在 LocalStorage 方便下次載入。
+
 ### 開發啟動
 1. 安裝相依套件：`cd client && npm install`
 2. 啟動開發伺服器：`npm run dev`
diff --git a/client/package-lock.json b/client/package-lock.json
index 351fa13..ba56764 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -10,11 +10,13 @@
       "dependencies": {
         "@hookform/resolvers": "^3.3.4",
         "@tanstack/react-query": "^5.29.0",
+        "i18next": "^23.11.5",
         "leaflet": "^1.9.4",
         "nanoid": "^5.0.7",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-hook-form": "^7.51.3",
+        "react-i18next": "^14.1.1",
         "react-leaflet": "^4.2.1",
         "react-router-dom": "^6.22.3",
         "zod": "^3.22.4",
@@ -52,6 +54,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz",
+      "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
@@ -3260,6 +3270,36 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/html-parse-stringify": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+      "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+      "dependencies": {
+        "void-elements": "3.1.0"
+      }
+    },
+    "node_modules/i18next": {
+      "version": "23.16.8",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-23.16.8.tgz",
+      "integrity": "sha512-06r/TitrM88Mg5FdUXAKL96dJMzgqLE5dv3ryBAra4KCwD9mJ4ndOTS95ZuymIGoE+2hzfdaMak2X11/es7ZWg==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://locize.com"
+        },
+        {
+          "type": "individual",
+          "url": "https://locize.com/i18next.html"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+        }
+      ],
+      "dependencies": {
+        "@babel/runtime": "^7.23.2"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -4619,6 +4659,27 @@
         "react": "^16.8.0 || ^17 || ^18 || ^19"
       }
     },
+    "node_modules/react-i18next": {
+      "version": "14.1.3",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-14.1.3.tgz",
+      "integrity": "sha512-wZnpfunU6UIAiJ+bxwOiTmBOAaB14ha97MjOEnLGac2RJ+h/maIYXZuTHlmyqQVX1UVHmU1YDTQ5vxLmwfXTjw==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "html-parse-stringify": "^3.0.1"
+      },
+      "peerDependencies": {
+        "i18next": ">= 23.2.3",
+        "react": ">= 16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -5738,6 +5799,14 @@
         }
       }
     },
+    "node_modules/void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/client/package.json b/client/package.json
index e2f2b81..997821e 100644
--- a/client/package.json
+++ b/client/package.json
@@ -20,7 +20,9 @@
     "zustand": "^4.5.2",
     "zod": "^3.22.4",
     "nanoid": "^5.0.7",
-    "@hookform/resolvers": "^3.3.4"
+    "@hookform/resolvers": "^3.3.4",
+    "i18next": "^23.11.5",
+    "react-i18next": "^14.1.1"
   },
   "devDependencies": {
     "@types/leaflet": "^1.9.12",
diff --git a/client/src/components/layout/LanguageSwitcher.tsx b/client/src/components/layout/LanguageSwitcher.tsx
new file mode 100644
index 0000000..86962a1
--- /dev/null
+++ b/client/src/components/layout/LanguageSwitcher.tsx
@@ -0,0 +1,34 @@
+import { useTranslation } from 'react-i18next';
+import { SUPPORTED_LANGUAGES, type SupportedLanguage } from '../../i18n';
+
+const LABEL_LOOKUP: Record<SupportedLanguage, string> = {
+  'zh-Hant': 'language.zhHant',
+  en: 'language.en'
+};
+
+export function LanguageSwitcher() {
+  const { t, i18n } = useTranslation();
+
+  const currentLanguage =
+    SUPPORTED_LANGUAGES.find((language) => i18n.language.startsWith(language)) ?? 'zh-Hant';
+
+  return (
+    <label className="flex items-center gap-2 text-sm text-slate-500">
+      <span>{t('language.label')}</span>
+      <select
+        className="rounded border border-slate-300 bg-white px-2 py-1 text-sm"
+        value={currentLanguage}
+        onChange={(event) => {
+          const selected = event.target.value as SupportedLanguage;
+          void i18n.changeLanguage(selected);
+        }}
+      >
+        {SUPPORTED_LANGUAGES.map((language) => (
+          <option key={language} value={language}>
+            {t(LABEL_LOOKUP[language])}
+          </option>
+        ))}
+      </select>
+    </label>
+  );
+}
diff --git a/client/src/components/layout/PrimaryLayout.tsx b/client/src/components/layout/PrimaryLayout.tsx
index 74477cc..0d20068 100644
--- a/client/src/components/layout/PrimaryLayout.tsx
+++ b/client/src/components/layout/PrimaryLayout.tsx
@@ -1,4 +1,6 @@
 import type { ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+import { LanguageSwitcher } from './LanguageSwitcher';
 
 interface PrimaryLayoutProps {
   sidebar: ReactNode;
@@ -6,22 +8,27 @@ interface PrimaryLayoutProps {
 }
 
 export function PrimaryLayout({ sidebar, content }: PrimaryLayoutProps) {
+  const { t } = useTranslation();
+
   return (
     <div className="flex h-screen flex-col">
       <header className="border-b border-slate-200 bg-white">
         <div className="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
           <div>
-            <h1 className="text-2xl font-bold">Traveling Around The World</h1>
-            <p className="text-sm text-slate-500">紀錄你走過的每一步足跡</p>
+            <h1 className="text-2xl font-bold">{t('common.appName')}</h1>
+            <p className="text-sm text-slate-500">{t('common.tagline')}</p>
+          </div>
+          <div className="flex items-center gap-4">
+            <nav className="flex items-center gap-3 text-sm text-slate-500">
+              <a href="https://www.openstreetmap.org/" target="_blank" rel="noreferrer" className="hover:text-primary">
+                {t('nav.openStreetMap')}
+              </a>
+              <a href="https://react-leaflet.js.org/" target="_blank" rel="noreferrer" className="hover:text-primary">
+                {t('nav.reactLeaflet')}
+              </a>
+            </nav>
+            <LanguageSwitcher />
           </div>
-          <nav className="flex items-center gap-3 text-sm text-slate-500">
-            <a href="https://www.openstreetmap.org/" target="_blank" rel="noreferrer" className="hover:text-primary">
-              OpenStreetMap
-            </a>
-            <a href="https://react-leaflet.js.org/" target="_blank" rel="noreferrer" className="hover:text-primary">
-              React Leaflet
-            </a>
-          </nav>
         </div>
       </header>
       <main className="flex flex-1 overflow-hidden">
diff --git a/client/src/components/layout/VisitSidebar.tsx b/client/src/components/layout/VisitSidebar.tsx
index 5537731..de135ab 100644
--- a/client/src/components/layout/VisitSidebar.tsx
+++ b/client/src/components/layout/VisitSidebar.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import type { Visit } from '../../features/visits/types';
 import { VisitList } from '../../features/visits/components/VisitList';
 import { VisitForm } from '../../features/visits/components/VisitForm';
@@ -8,6 +9,7 @@ import { useVisitDrawerStore } from '../../state/useVisitDrawerStore';
 export function VisitSidebar() {
   const { isOpen, initialLocation, open, close } = useVisitDrawerStore();
   const [editingVisit, setEditingVisit] = useState<Visit | null>(null);
+  const { t } = useTranslation();
 
   useEffect(() => {
     if (!isOpen) {
@@ -19,15 +21,15 @@ export function VisitSidebar() {
     <aside className="flex h-full w-full flex-col gap-4 overflow-y-auto bg-slate-50 p-4">
       <header className="flex items-center justify-between">
         <div>
-          <h2 className="text-xl font-semibold">我的旅程</h2>
-          <p className="text-sm text-slate-500">點擊地圖任意位置開始記錄</p>
+          <h2 className="text-xl font-semibold">{t('sidebar.title')}</h2>
+          <p className="text-sm text-slate-500">{t('sidebar.subtitle')}</p>
         </div>
         <button
           type="button"
           className="rounded bg-primary px-3 py-1.5 text-sm font-semibold text-white hover:bg-primary/90"
           onClick={() => open(initialLocation)}
         >
-          新增足跡
+          {t('sidebar.add')}
         </button>
       </header>
 
@@ -45,7 +47,9 @@ export function VisitSidebar() {
       {isOpen ? (
         <section className="rounded-lg bg-white p-4 shadow-md">
           <div className="mb-3 flex items-center justify-between">
-            <h3 className="text-lg font-semibold">{editingVisit ? '編輯足跡' : '新增足跡'}</h3>
+            <h3 className="text-lg font-semibold">
+              {t(editingVisit ? 'sidebar.drawerTitleEdit' : 'sidebar.drawerTitleCreate')}
+            </h3>
             <button
               type="button"
               className="rounded px-2 py-1 text-sm text-slate-500 hover:bg-slate-100"
@@ -54,7 +58,7 @@ export function VisitSidebar() {
                 close();
               }}
             >
-              關閉
+              {t('sidebar.close')}
             </button>
           </div>
           <VisitForm
diff --git a/client/src/features/visits/components/VisitForm.tsx b/client/src/features/visits/components/VisitForm.tsx
index fd04063..8557295 100644
--- a/client/src/features/visits/components/VisitForm.tsx
+++ b/client/src/features/visits/components/VisitForm.tsx
@@ -5,12 +5,13 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import type { Visit, VisitCreateInput } from '../types';
 import { useCreateVisitMutation, useUpdateVisitMutation } from '../hooks/useVisitQueries';
 import { useVisitDrawerStore } from '../../../state/useVisitDrawerStore';
+import { useTranslation } from 'react-i18next';
 
 const visitFormSchema = z
   .object({
-    country: z.string().min(1, '請填寫國家'),
+    country: z.string().min(1, 'validation.countryRequired'),
     city: z.string().optional(),
-    start: z.string().min(1, '請選擇開始日期'),
+    start: z.string().min(1, 'validation.startDateRequired'),
     end: z.string().optional(),
     notes: z.string().optional(),
     lat: z.number(),
@@ -21,7 +22,7 @@ const visitFormSchema = z
       if (!data.end) return true;
       return new Date(data.end) >= new Date(data.start);
     },
-    { message: '結束日期需晚於開始日期', path: ['end'] }
+    { message: 'validation.endAfterStart', path: ['end'] }
   );
 
 type VisitFormSchema = z.infer<typeof visitFormSchema>;
@@ -34,6 +35,7 @@ interface VisitFormProps {
 export function VisitForm({ editingVisit, onCompleted }: VisitFormProps) {
   const closeDrawer = useVisitDrawerStore((state) => state.close);
   const initialLocation = useVisitDrawerStore((state) => state.initialLocation);
+  const { t } = useTranslation();
 
   const createMutation = useCreateVisitMutation();
   const updateMutation = useUpdateVisitMutation();
@@ -104,63 +106,65 @@ export function VisitForm({ editingVisit, onCompleted }: VisitFormProps) {
     <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
       <div className="grid gap-2">
         <label className="text-sm font-medium" htmlFor="country">
-          國家
+          {t('form.country')}
         </label>
         <input
           id="country"
           className="rounded border border-slate-300 px-3 py-2"
-          placeholder="例如：日本"
+          placeholder={t('form.countryPlaceholder')}
           {...register('country')}
         />
-        {errors.country ? <p className="text-sm text-rose-500">{errors.country.message}</p> : null}
+        {errors.country ? (
+          <p className="text-sm text-rose-500">{t(errors.country.message ?? '')}</p>
+        ) : null}
       </div>
 
       <div className="grid gap-2">
         <label className="text-sm font-medium" htmlFor="city">
-          城市
+          {t('form.city')}
         </label>
         <input
           id="city"
           className="rounded border border-slate-300 px-3 py-2"
-          placeholder="例如：東京"
+          placeholder={t('form.cityPlaceholder')}
           {...register('city')}
         />
-        {errors.city ? <p className="text-sm text-rose-500">{errors.city.message}</p> : null}
+        {errors.city ? <p className="text-sm text-rose-500">{t(errors.city.message ?? '')}</p> : null}
       </div>
 
       <div className="grid gap-2">
         <label className="text-sm font-medium" htmlFor="start">
-          開始日期
+          {t('form.startDate')}
         </label>
         <input id="start" type="date" className="rounded border border-slate-300 px-3 py-2" {...register('start')} />
-        {errors.start ? <p className="text-sm text-rose-500">{errors.start.message}</p> : null}
+        {errors.start ? <p className="text-sm text-rose-500">{t(errors.start.message ?? '')}</p> : null}
       </div>
 
       <div className="grid gap-2">
         <label className="text-sm font-medium" htmlFor="end">
-          結束日期
+          {t('form.endDate')}
         </label>
         <input id="end" type="date" className="rounded border border-slate-300 px-3 py-2" {...register('end')} />
-        {errors.end ? <p className="text-sm text-rose-500">{errors.end.message}</p> : null}
+        {errors.end ? <p className="text-sm text-rose-500">{t(errors.end.message ?? '')}</p> : null}
       </div>
 
       <div className="grid gap-2">
         <label className="text-sm font-medium" htmlFor="notes">
-          備註
+          {t('form.notes')}
         </label>
         <textarea
           id="notes"
           className="min-h-[96px] rounded border border-slate-300 px-3 py-2"
-          placeholder="留下旅程的感想或提醒"
+          placeholder={t('form.notesPlaceholder')}
           {...register('notes')}
         />
-        {errors.notes ? <p className="text-sm text-rose-500">{errors.notes.message}</p> : null}
+        {errors.notes ? <p className="text-sm text-rose-500">{t(errors.notes.message ?? '')}</p> : null}
       </div>
 
       <div className="grid gap-2 md:grid-cols-2">
         <div>
           <label className="text-sm font-medium" htmlFor="lat">
-            緯度
+            {t('form.latitude')}
           </label>
           <input
             id="lat"
@@ -169,11 +173,11 @@ export function VisitForm({ editingVisit, onCompleted }: VisitFormProps) {
             className="w-full rounded border border-slate-300 px-3 py-2"
             {...register('lat', { valueAsNumber: true })}
           />
-          {errors.lat ? <p className="text-sm text-rose-500">{errors.lat.message}</p> : null}
+          {errors.lat ? <p className="text-sm text-rose-500">{t(errors.lat.message ?? '')}</p> : null}
         </div>
         <div>
           <label className="text-sm font-medium" htmlFor="lng">
-            經度
+            {t('form.longitude')}
           </label>
           <input
             id="lng"
@@ -182,7 +186,7 @@ export function VisitForm({ editingVisit, onCompleted }: VisitFormProps) {
             className="w-full rounded border border-slate-300 px-3 py-2"
             {...register('lng', { valueAsNumber: true })}
           />
-          {errors.lng ? <p className="text-sm text-rose-500">{errors.lng.message}</p> : null}
+          {errors.lng ? <p className="text-sm text-rose-500">{t(errors.lng.message ?? '')}</p> : null}
         </div>
       </div>
 
@@ -192,14 +196,14 @@ export function VisitForm({ editingVisit, onCompleted }: VisitFormProps) {
           className="rounded border border-slate-300 px-4 py-2"
           onClick={() => closeDrawer()}
         >
-          取消
+          {t('form.cancel')}
         </button>
         <button
           type="submit"
           disabled={isSubmitting}
           className="rounded bg-primary px-4 py-2 font-semibold text-white hover:bg-primary/90 disabled:opacity-60"
         >
-          {editingVisit ? '儲存變更' : '新增足跡'}
+          {editingVisit ? t('form.update') : t('form.create')}
         </button>
       </div>
     </form>
diff --git a/client/src/features/visits/components/VisitList.tsx b/client/src/features/visits/components/VisitList.tsx
index 0a00d99..56e0eb9 100644
--- a/client/src/features/visits/components/VisitList.tsx
+++ b/client/src/features/visits/components/VisitList.tsx
@@ -1,7 +1,5 @@
-import {
-  useDeleteVisitMutation,
-  useVisitsQuery
-} from '../hooks/useVisitQueries';
+import { useTranslation } from 'react-i18next';
+import { useDeleteVisitMutation, useVisitsQuery } from '../hooks/useVisitQueries';
 import type { Visit } from '../types';
 
 interface VisitListProps {
@@ -11,13 +9,14 @@ interface VisitListProps {
 export function VisitList({ onEdit }: VisitListProps) {
   const { data: visits = [], isLoading } = useVisitsQuery();
   const deleteMutation = useDeleteVisitMutation();
+  const { t } = useTranslation();
 
   if (isLoading) {
-    return <p className="text-sm text-slate-500">讀取中...</p>;
+    return <p className="text-sm text-slate-500">{t('list.loading')}</p>;
   }
 
   if (!visits.length) {
-    return <p className="text-sm text-slate-500">目前尚未新增任何旅遊記錄。</p>;
+    return <p className="text-sm text-slate-500">{t('list.empty')}</p>;
   }
 
   return (
@@ -42,14 +41,14 @@ export function VisitList({ onEdit }: VisitListProps) {
                 className="rounded bg-slate-100 px-2 py-1 hover:bg-slate-200"
                 onClick={() => onEdit(visit)}
               >
-                編輯
+                {t('list.edit')}
               </button>
               <button
                 type="button"
                 className="rounded bg-rose-100 px-2 py-1 text-rose-600 hover:bg-rose-200"
                 onClick={() => deleteMutation.mutate(visit.id)}
               >
-                刪除
+                {t('list.delete')}
               </button>
             </div>
           </div>
diff --git a/client/src/features/visits/components/VisitSummary.tsx b/client/src/features/visits/components/VisitSummary.tsx
index 446b57a..99779f7 100644
--- a/client/src/features/visits/components/VisitSummary.tsx
+++ b/client/src/features/visits/components/VisitSummary.tsx
@@ -1,8 +1,10 @@
 import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useVisitsQuery } from '../hooks/useVisitQueries';
 
 export function VisitSummary() {
   const { data: visits = [] } = useVisitsQuery();
+  const { t } = useTranslation();
 
   const stats = useMemo(() => {
     const countries = new Set<string>();
@@ -15,14 +17,14 @@ export function VisitSummary() {
 
   return (
     <div className="rounded-lg bg-white p-4 shadow-sm">
-      <h3 className="text-sm font-semibold text-slate-500">統計</h3>
+      <h3 className="text-sm font-semibold text-slate-500">{t('summary.title')}</h3>
       <dl className="mt-3 grid grid-cols-2 gap-3 text-center">
         <div className="rounded bg-slate-100 p-3">
-          <dt className="text-xs uppercase tracking-wide text-slate-500">旅程數</dt>
+          <dt className="text-xs uppercase tracking-wide text-slate-500">{t('summary.totalVisits')}</dt>
           <dd className="text-xl font-bold">{stats.totalVisits}</dd>
         </div>
         <div className="rounded bg-slate-100 p-3">
-          <dt className="text-xs uppercase tracking-wide text-slate-500">國家數</dt>
+          <dt className="text-xs uppercase tracking-wide text-slate-500">{t('summary.countries')}</dt>
           <dd className="text-xl font-bold">{stats.uniqueCountries}</dd>
         </div>
       </dl>
diff --git a/client/src/i18n.ts b/client/src/i18n.ts
new file mode 100644
index 0000000..08d5d31
--- /dev/null
+++ b/client/src/i18n.ts
@@ -0,0 +1,60 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import enTranslation from './locales/en/translation.json';
+import zhHantTranslation from './locales/zh-Hant/translation.json';
+
+export const SUPPORTED_LANGUAGES = ['zh-Hant', 'en'] as const;
+export type SupportedLanguage = (typeof SUPPORTED_LANGUAGES)[number];
+
+const STORAGE_KEY = 'traveling-around-the-world::language';
+const resources = {
+  'zh-Hant': { translation: zhHantTranslation },
+  en: { translation: enTranslation }
+} as const;
+
+function isSupportedLanguage(language: string): language is SupportedLanguage {
+  return (SUPPORTED_LANGUAGES as readonly string[]).includes(language);
+}
+
+function getInitialLanguage(): SupportedLanguage {
+  if (typeof window === 'undefined') {
+    return 'zh-Hant';
+  }
+
+  const stored = window.localStorage.getItem(STORAGE_KEY);
+  if (stored && isSupportedLanguage(stored)) {
+    return stored;
+  }
+
+  const browserLanguage = window.navigator.language.toLowerCase();
+  if (browserLanguage.startsWith('zh')) {
+    return 'zh-Hant';
+  }
+
+  return 'en';
+}
+
+void i18n
+  .use(initReactI18next)
+  .init({
+    resources,
+    lng: getInitialLanguage(),
+    fallbackLng: 'zh-Hant',
+    supportedLngs: [...SUPPORTED_LANGUAGES],
+    interpolation: {
+      escapeValue: false
+    }
+  })
+  .catch((error) => {
+    console.error('Failed to initialize i18n', error);
+  });
+
+if (typeof window !== 'undefined') {
+  i18n.on('languageChanged', (language) => {
+    if (isSupportedLanguage(language)) {
+      window.localStorage.setItem(STORAGE_KEY, language);
+    }
+  });
+}
+
+export default i18n;
diff --git a/client/src/locales/en/translation.json b/client/src/locales/en/translation.json
new file mode 100644
index 0000000..a5b1915
--- /dev/null
+++ b/client/src/locales/en/translation.json
@@ -0,0 +1,54 @@
+{
+  "common": {
+    "appName": "Traveling Around The World",
+    "tagline": "Track every place you have been"
+  },
+  "nav": {
+    "openStreetMap": "OpenStreetMap",
+    "reactLeaflet": "React Leaflet"
+  },
+  "language": {
+    "label": "Language",
+    "zhHant": "繁體中文",
+    "en": "English"
+  },
+  "sidebar": {
+    "title": "My Journeys",
+    "subtitle": "Click anywhere on the map to start recording",
+    "add": "Add Visit",
+    "drawerTitleCreate": "Add Visit",
+    "drawerTitleEdit": "Edit Visit",
+    "close": "Close"
+  },
+  "summary": {
+    "title": "Stats",
+    "totalVisits": "Trips",
+    "countries": "Countries"
+  },
+  "list": {
+    "loading": "Loading...",
+    "empty": "No trips recorded yet.",
+    "edit": "Edit",
+    "delete": "Delete"
+  },
+  "form": {
+    "country": "Country",
+    "countryPlaceholder": "e.g. Japan",
+    "city": "City",
+    "cityPlaceholder": "e.g. Tokyo",
+    "startDate": "Start Date",
+    "endDate": "End Date",
+    "notes": "Notes",
+    "notesPlaceholder": "Capture thoughts or reminders about the trip",
+    "latitude": "Latitude",
+    "longitude": "Longitude",
+    "cancel": "Cancel",
+    "create": "Add Visit",
+    "update": "Save Changes"
+  },
+  "validation": {
+    "countryRequired": "Country is required",
+    "startDateRequired": "Please choose a start date",
+    "endAfterStart": "End date must be after the start date"
+  }
+}
diff --git a/client/src/locales/zh-Hant/translation.json b/client/src/locales/zh-Hant/translation.json
new file mode 100644
index 0000000..3e94b8d
--- /dev/null
+++ b/client/src/locales/zh-Hant/translation.json
@@ -0,0 +1,54 @@
+{
+  "common": {
+    "appName": "Traveling Around The World",
+    "tagline": "紀錄你走過的每一步足跡"
+  },
+  "nav": {
+    "openStreetMap": "OpenStreetMap",
+    "reactLeaflet": "React Leaflet"
+  },
+  "language": {
+    "label": "語言",
+    "zhHant": "繁體中文",
+    "en": "English"
+  },
+  "sidebar": {
+    "title": "我的旅程",
+    "subtitle": "點擊地圖任意位置開始記錄",
+    "add": "新增足跡",
+    "drawerTitleCreate": "新增足跡",
+    "drawerTitleEdit": "編輯足跡",
+    "close": "關閉"
+  },
+  "summary": {
+    "title": "統計",
+    "totalVisits": "旅程數",
+    "countries": "國家數"
+  },
+  "list": {
+    "loading": "讀取中...",
+    "empty": "目前尚未新增任何旅遊記錄。",
+    "edit": "編輯",
+    "delete": "刪除"
+  },
+  "form": {
+    "country": "國家",
+    "countryPlaceholder": "例如：日本",
+    "city": "城市",
+    "cityPlaceholder": "例如：東京",
+    "startDate": "開始日期",
+    "endDate": "結束日期",
+    "notes": "備註",
+    "notesPlaceholder": "留下旅程的感想或提醒",
+    "latitude": "緯度",
+    "longitude": "經度",
+    "cancel": "取消",
+    "create": "新增足跡",
+    "update": "儲存變更"
+  },
+  "validation": {
+    "countryRequired": "請填寫國家",
+    "startDateRequired": "請選擇開始日期",
+    "endAfterStart": "結束日期需晚於開始日期"
+  }
+}
diff --git a/client/src/main.tsx b/client/src/main.tsx
index cf1068b..7c1c459 100644
--- a/client/src/main.tsx
+++ b/client/src/main.tsx
@@ -1,6 +1,7 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { App } from './app/App';
+import './i18n';
 import './styles/global.css';
 
 const container = document.getElementById('root');