From aa0df45ed605f4d8240693d02b4c4997d7af54d1 Mon Sep 17 00:00:00 2001
From: Chengahao <cli203@aucklanduni.ac.nz>
Date: Mon, 3 Aug 2026 21:18:55 +0800
Subject: [PATCH] feat(i18n): multi-language support with header language
 switcher

Add full internationalization using react-i18next:
- Language switcher in the top-right corner of the header
- Fully translated locales: English, Simplified Chinese, Traditional
  Chinese (Taiwan); Japanese, Korean, French, German, Spanish are
  selectable placeholders that fall back to English
- Docker-configurable default language via the DEFAULT_LANGUAGE
  environment variable, served from GET /config
- Language preference persists in localStorage; browser locale is used
  when no preference is set
- All pages, navigation, tables, charts and shared UI components are
  translated

Also:
- Add .gitignore entries for pnpm-generated artifacts
  (.pnpm-store/, pnpm-lock.yaml, .pytest_cache/)
- Add pnpm-workspace.yaml to allow the esbuild postinstall under pnpm 11

Testing:
- New pytest suite (server/tests): locale key parity between en/zh-CN/
  zh-TW, placeholder locales, and DEFAULT_LANGUAGE in GET /config
- tsc --noEmit and vite build pass; live server smoke test passed
  (login, /config, /api/flights)

AI-generated parts:
- i18n infrastructure and locale files (client/i18n.ts, client/locales/)
- language switcher component and the translation pass across pages and
  components
- DEFAULT_LANGUAGE wiring (server/environment.py, server/main.py,
  client/api.ts, Dockerfile, README)
- locale/config test suite (server/tests/)
---
 .gitignore                                    |   3 +
 Dockerfile                                    |   1 +
 README.md                                     |   9 +-
 client/api.ts                                 |   7 +-
 client/components/Toast.tsx                   |   5 +-
 client/components/flights/FlightDetail.tsx    | 109 +++----
 client/components/flights/FlightFilters.tsx   |  30 +-
 client/components/flights/FlightsTable.tsx    |   6 +-
 client/components/settings/ColumnsManager.tsx |  22 +-
 client/components/shell/AppShell.tsx          |  38 +--
 client/components/shell/BoardClock.tsx        |   4 +-
 client/components/shell/LanguageSwitcher.tsx  |  29 ++
 client/components/shell/NavSheet.tsx          |  32 ++-
 client/components/stats/Charts.tsx            |  25 +-
 client/components/ui/Combobox.tsx             |  20 +-
 client/components/ui/Dialog.tsx               |   5 +-
 client/components/ui/Sheet.tsx                |   4 +-
 client/components/ui/Spinner.tsx              |   5 +-
 client/i18n.ts                                |  68 +++++
 client/lib/flightColumns.ts                   |  44 +--
 client/locales/de.json                        |   1 +
 client/locales/en.json                        | 265 ++++++++++++++++++
 client/locales/es.json                        |   1 +
 client/locales/fr.json                        |   1 +
 client/locales/index.ts                       |  33 +++
 client/locales/ja.json                        |   1 +
 client/locales/ko.json                        |   1 +
 client/locales/zh-CN.json                     | 265 ++++++++++++++++++
 client/locales/zh-TW.json                     | 265 ++++++++++++++++++
 client/main.tsx                               |   1 +
 client/pages/AllFlights.tsx                   |  18 +-
 client/pages/Home.tsx                         |  31 +-
 client/pages/Login.tsx                        |  14 +-
 client/pages/New.tsx                          |  88 +++---
 client/pages/Settings.tsx                     | 177 ++++++------
 client/pages/Statistics.tsx                   |  81 +++---
 package.json                                  |   2 +
 pnpm-workspace.yaml                           |   2 +
 server/environment.py                         |   1 +
 server/main.py                                |   5 +-
 server/tests/__init__.py                      |   1 +
 server/tests/conftest.py                      |  51 ++++
 server/tests/test_config.py                   |   7 +
 server/tests/test_locales.py                  |  51 ++++
 44 files changed, 1494 insertions(+), 335 deletions(-)
 create mode 100644 client/components/shell/LanguageSwitcher.tsx
 create mode 100644 client/i18n.ts
 create mode 100644 client/locales/de.json
 create mode 100644 client/locales/en.json
 create mode 100644 client/locales/es.json
 create mode 100644 client/locales/fr.json
 create mode 100644 client/locales/index.ts
 create mode 100644 client/locales/ja.json
 create mode 100644 client/locales/ko.json
 create mode 100644 client/locales/zh-CN.json
 create mode 100644 client/locales/zh-TW.json
 create mode 100644 pnpm-workspace.yaml
 create mode 100644 server/tests/__init__.py
 create mode 100644 server/tests/conftest.py
 create mode 100644 server/tests/test_config.py
 create mode 100644 server/tests/test_locales.py

diff --git a/.gitignore b/.gitignore
index 2938463..1331fcd 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,6 +4,9 @@ dist
 __pycache__
 package-lock.json
 .parcel-cache
+.pnpm-store/
+pnpm-lock.yaml
+.pytest_cache/
 *.old
 
 data/*.db*
diff --git a/Dockerfile b/Dockerfile
index 4ce9fa5..095aa68 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -32,6 +32,7 @@ ENV DATA_PATH=/data
 ENV JETLOG_PORT=3000
 ENV TOKEN_DURATION=7
 ENV ENABLE_EXTERNAL_APIS=true
+ENV DEFAULT_LANGUAGE=en
 ENV USE_IPV6=false
 
 RUN mkdir -p ${APP_PATH}
diff --git a/README.md b/README.md
index 490944d..44a8ef0 100644
--- a/README.md
+++ b/README.md
@@ -40,10 +40,11 @@ services:
     image: pbogre/jetlog:latest
     volumes:
       - /your/data/path:/data
-    environment:
-        JETLOG_PORT: 3000 # optional, default is 3000
-        SECRET_KEY: yourLongAndRandomStringOfCharacters123!
-    restart: unless-stopped
+    environment:
+        JETLOG_PORT: 3000 # optional, default is 3000
+        SECRET_KEY: yourLongAndRandomStringOfCharacters123!
+        DEFAULT_LANGUAGE: en # optional default UI language: en, zh-CN, zh-TW, ja, ko, fr, de, es
+    restart: unless-stopped
     ports:
       - 3000:3000
 ```
diff --git a/client/api.ts b/client/api.ts
index 0d17656..9510817 100644
--- a/client/api.ts
+++ b/client/api.ts
@@ -3,10 +3,15 @@ import TokenStorage from './storage/tokenStorage';
 import { showToast } from './components/Toast';
 
 const config = await fetch('./config').then((response) => response.json())
-                                      .catch(() => ({ BASE_URL: '/', ENABLE_EXTERNAL_APIS: true }));
+                                      .catch(() => ({
+                                          BASE_URL: '/',
+                                          ENABLE_EXTERNAL_APIS: true,
+                                          DEFAULT_LANGUAGE: undefined,
+                                      }));
 
 export const BASE_URL = config.BASE_URL == '/' ? '' : config.BASE_URL;
 export const ENABLE_EXTERNAL_APIS = config.ENABLE_EXTERNAL_APIS;
+export const DEFAULT_LANGUAGE: string | undefined = config.DEFAULT_LANGUAGE ?? undefined;
 
 // TODO improve this because there's a lot of repetition (get, post, delete are pretty much exactly the same)
 // perhaps one method for each endpoint? i.e. API.getFlights(), ...
diff --git a/client/components/Toast.tsx b/client/components/Toast.tsx
index 76a3fec..7e63202 100644
--- a/client/components/Toast.tsx
+++ b/client/components/Toast.tsx
@@ -1,4 +1,5 @@
 import React, { createContext, useContext, useState, useCallback, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 
 export type ToastType = 'success' | 'error' | 'info';
 
@@ -38,6 +39,8 @@ interface ToastItemProps {
 }
 
 function ToastItem({ toast, onRemove }: ToastItemProps) {
+    const { t } = useTranslation();
+
     useEffect(() => {
         const timer = setTimeout(() => {
             onRemove(toast.id);
@@ -67,7 +70,7 @@ function ToastItem({ toast, onRemove }: ToastItemProps) {
             <button
                 onClick={() => onRemove(toast.id)}
                 className="text-white hover:text-gray-200 font-bold text-lg leading-none ml-2"
-                aria-label="Close"
+                aria-label={t('common.close')}
             >
                 &times;
             </button>
diff --git a/client/components/flights/FlightDetail.tsx b/client/components/flights/FlightDetail.tsx
index 1baf558..9e9080b 100644
--- a/client/components/flights/FlightDetail.tsx
+++ b/client/components/flights/FlightDetail.tsx
@@ -2,6 +2,7 @@ import { useState, type FormEvent, lazy, Suspense } from 'react'
 import { Link, useNavigate } from 'react-router-dom'
 import { ArrowLeft, ArrowRight, Pencil, Trash2, X, Check } from 'lucide-react'
 import { useQueryClient } from '@tanstack/react-query'
+import { useTranslation } from 'react-i18next'
 
 import API from '@/api'
 import {
@@ -40,6 +41,7 @@ const PURPOSES = ['', 'leisure', 'business', 'crew', 'other']
 
 export function FlightDetail({ flightId }: FlightDetailProps) {
     const navigate = useNavigate()
+    const { t } = useTranslation()
     const metric = ConfigStorage.getSetting('metricUnits') !== 'false'
     const localAirportTime = ConfigStorage.getSetting('localAirportTime') === 'true'
     const { data: flight, isLoading } = useFlight(flightId)
@@ -113,7 +115,7 @@ export function FlightDetail({ flightId }: FlightDetailProps) {
     }
 
     const handleDelete = () => {
-        if (!confirm('Delete this flight?')) return
+        if (!confirm(t('flightDetail.deleteConfirm'))) return
         deleteMut.mutate(flightId, {
             onSuccess: () => navigate('/flights'),
         })
@@ -127,13 +129,13 @@ export function FlightDetail({ flightId }: FlightDetailProps) {
                     to="/flights"
                     className="board-label flex items-center gap-1.5 text-ink-muted hover:text-ink"
                 >
-                    <ArrowLeft size={14} /> All flights
+                    <ArrowLeft size={14} /> {t('flightDetail.allFlights')}
                 </Link>
                 <div className="flex items-center gap-2">
                     {isOwner && !editing && (
                         <>
                             <Button type="button" variant="outline" size="sm" onClick={enterEdit}>
-                                <Pencil size={13} /> Edit
+                                <Pencil size={13} /> {t('common.edit')}
                             </Button>
                             <Button
                                 type="button"
@@ -142,7 +144,7 @@ export function FlightDetail({ flightId }: FlightDetailProps) {
                                 onClick={handleDelete}
                                 disabled={deleteMut.isPending}
                             >
-                                <Trash2 size={13} /> Delete
+                                <Trash2 size={13} /> {t('common.delete')}
                             </Button>
                         </>
                     )}
@@ -154,7 +156,7 @@ export function FlightDetail({ flightId }: FlightDetailProps) {
                                 size="sm"
                                 onClick={() => setEditing(false)}
                             >
-                                <X size={13} /> Cancel
+                                <X size={13} /> {t('common.cancel')}
                             </Button>
                             <Button
                                 type="submit"
@@ -162,7 +164,7 @@ export function FlightDetail({ flightId }: FlightDetailProps) {
                                 size="sm"
                                 disabled={saving}
                             >
-                                <Check size={13} /> {saving ? 'Saving…' : 'Save'}
+                                <Check size={13} /> {saving ? t('common.saving') : t('common.save')}
                             </Button>
                         </>
                     )}
@@ -196,17 +198,17 @@ export function FlightDetail({ flightId }: FlightDetailProps) {
                     </div>
                     <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-5 pt-4 border-t border-rule">
                         <DataBlock
-                            label="Departure"
+                            label={t('newFlight.departure')}
                             value={formatTime(flight.departureTime)}
                             sub={flight.origin?.timezone}
                         />
                         <DataBlock
-                            label="Arrival"
+                            label={t('newFlight.arrival')}
                             value={formatTime(flight.arrivalTime)}
                             sub={flight.arrivalDate || flight.destination?.timezone}
                         />
                         <DataBlock
-                            label="Airline"
+                            label={t('newFlight.airline')}
                             value={
                                 flight.airline
                                     ? flight.airline.iata || flight.airline.icao
@@ -215,7 +217,7 @@ export function FlightDetail({ flightId }: FlightDetailProps) {
                             sub={flight.airline?.name}
                         />
                         <DataBlock
-                            label="Aircraft"
+                            label={t('newFlight.airplane')}
                             value={flight.airplane || '—'}
                             sub={flight.tailNumber || undefined}
                         />
@@ -225,14 +227,14 @@ export function FlightDetail({ flightId }: FlightDetailProps) {
 
             {/* Airports */}
             <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                <AirportPanel title="Departure airport" airport={flight.origin} />
-                <AirportPanel title="Arrival airport" airport={flight.destination} />
+                <AirportPanel title={t('flightDetail.departureAirport')} airport={flight.origin} />
+                <AirportPanel title={t('flightDetail.arrivalAirport')} airport={flight.destination} />
             </div>
 
             <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
                 <Panel>
                     <PanelHeader>
-                        <PanelTitle>Route</PanelTitle>
+                        <PanelTitle>{t('newFlight.route')}</PanelTitle>
                     </PanelHeader>
                     {flight.distance ? (
                         <Suspense
@@ -249,13 +251,17 @@ export function FlightDetail({ flightId }: FlightDetailProps) {
                             />
                         </Suspense>
                     ) : (
-                        <PanelBody className="text-center text-ink-muted text-sm">No route data</PanelBody>
+                        <PanelBody className="text-center text-ink-muted text-sm">
+                            {t('flightDetail.noRouteData')}
+                        </PanelBody>
                     )}
                 </Panel>
 
                 <Panel>
                     <PanelHeader>
-                        <PanelTitle>{editing ? 'Edit details' : 'Details'}</PanelTitle>
+                        <PanelTitle>
+                            {editing ? t('flightDetail.editDetails') : t('flightDetail.details')}
+                        </PanelTitle>
                     </PanelHeader>
                     <PanelBody className="space-y-3">
                         {editing ? (
@@ -270,7 +276,7 @@ export function FlightDetail({ flightId }: FlightDetailProps) {
             {flight.notes && !editing && (
                 <Panel>
                     <PanelHeader>
-                        <PanelTitle>Notes</PanelTitle>
+                        <PanelTitle>{t('newFlight.notes')}</PanelTitle>
                     </PanelHeader>
                     <PanelBody>
                         <p className="font-mono text-sm whitespace-pre-line text-ink-soft">
@@ -284,6 +290,8 @@ export function FlightDetail({ flightId }: FlightDetailProps) {
 }
 
 function AirportPanel({ title, airport }: { title: string; airport: any }) {
+    const { t } = useTranslation()
+
     if (!airport || typeof airport === 'string') {
         return (
             <Panel>
@@ -291,7 +299,7 @@ function AirportPanel({ title, airport }: { title: string; airport: any }) {
                     <PanelTitle>{title}</PanelTitle>
                 </PanelHeader>
                 <PanelBody className="text-sm font-mono text-ink-muted">
-                    {typeof airport === 'string' ? airport : 'No airport data'}
+                    {typeof airport === 'string' ? airport : t('flightDetail.noAirportData')}
                 </PanelBody>
             </Panel>
         )
@@ -305,39 +313,41 @@ function AirportPanel({ title, airport }: { title: string; airport: any }) {
                 </span>
             </PanelHeader>
             <PanelBody className="grid grid-cols-2 gap-3">
-                <DataBlock label="Name" value={airport.name || '—'} className="col-span-2" />
-                <DataBlock label="City" value={airport.municipality || '—'} />
-                <DataBlock label="Country" value={airport.country || '—'} />
-                <DataBlock label="Region" value={airport.region || '—'} />
-                <DataBlock label="Continent" value={airport.continent || '—'} />
-                <DataBlock label="ICAO / IATA" value={`${airport.icao || '—'} / ${airport.iata || '—'}`} />
-                <DataBlock label="Timezone" value={airport.timezone || '—'} />
+                <DataBlock label={t('flightDetail.name')} value={airport.name || '—'} className="col-span-2" />
+                <DataBlock label={t('flightDetail.city')} value={airport.municipality || '—'} />
+                <DataBlock label={t('flightDetail.country')} value={airport.country || '—'} />
+                <DataBlock label={t('flightDetail.region')} value={airport.region || '—'} />
+                <DataBlock label={t('flightDetail.continent')} value={airport.continent || '—'} />
+                <DataBlock label={t('flightDetail.icaoIata')} value={`${airport.icao || '—'} / ${airport.iata || '—'}`} />
+                <DataBlock label={t('flightDetail.timezone')} value={airport.timezone || '—'} />
             </PanelBody>
         </Panel>
     )
 }
 
 function ReadFields({ flight }: { flight: Flight }) {
+    const { t } = useTranslation()
+
     return (
         <div className="grid grid-cols-2 gap-3">
-            <DataBlock label="Seat" value={flight.seat || '—'} valueClassName="capitalize" />
+            <DataBlock label={t('newFlight.seat')} value={flight.seat || '—'} valueClassName="capitalize" />
             <DataBlock
-                label="Side"
+                label={t('newFlight.side')}
                 value={flight.aircraftSide || '—'}
                 valueClassName="capitalize"
             />
-            <DataBlock label="Class" value={flight.ticketClass || '—'} valueClassName="capitalize" />
-            <DataBlock label="Purpose" value={flight.purpose || '—'} valueClassName="capitalize" />
-            <DataBlock label="Tail number" value={flight.tailNumber || '—'} />
-            <DataBlock label="Flight number" value={flight.flightNumber || '—'} />
+            <DataBlock label={t('newFlight.class')} value={flight.ticketClass || '—'} valueClassName="capitalize" />
+            <DataBlock label={t('newFlight.purpose')} value={flight.purpose || '—'} valueClassName="capitalize" />
+            <DataBlock label={t('newFlight.tailNumber')} value={flight.tailNumber || '—'} />
+            <DataBlock label={t('newFlight.flightNumber')} value={flight.flightNumber || '—'} />
             {flight.connection && (
                 <div className="col-span-2">
-                    <span className="board-label">Connection</span>
+                    <span className="board-label">{t('flightDetail.connection')}</span>
                     <Link
                         to={`/flights?id=${flight.connection}`}
                         className="block font-mono text-sm text-accent-deep underline mt-1"
                     >
-                        Linked flight #{flight.connection}
+                        {t('flightDetail.linkedFlight', { id: flight.connection })}
                     </Link>
                 </div>
             )}
@@ -351,6 +361,7 @@ interface EditFieldsProps {
 }
 
 function EditFields({ draft, setDraft }: EditFieldsProps) {
+    const { t } = useTranslation()
     const set = <K extends keyof Flight>(k: K, v: Flight[K] | undefined) =>
         setDraft({ ...draft, [k]: v as any })
 
@@ -375,7 +386,7 @@ function EditFields({ draft, setDraft }: EditFieldsProps) {
     return (
         <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
             <div className="col-span-2">
-                <Label>Date</Label>
+                <Label>{t('newFlight.date')}</Label>
                 <Input
                     type="date"
                     value={draft.date ?? ''}
@@ -384,7 +395,7 @@ function EditFields({ draft, setDraft }: EditFieldsProps) {
             </div>
 
             <div>
-                <Label>Origin</Label>
+                <Label>{t('newFlight.origin')}</Label>
                 <Combobox<Airport>
                     displayValue={
                         draft.origin
@@ -396,7 +407,7 @@ function EditFields({ draft, setDraft }: EditFieldsProps) {
                 />
             </div>
             <div>
-                <Label>Destination</Label>
+                <Label>{t('newFlight.destination')}</Label>
                 <Combobox<Airport>
                     displayValue={
                         draft.destination
@@ -409,7 +420,7 @@ function EditFields({ draft, setDraft }: EditFieldsProps) {
             </div>
 
             <div>
-                <Label>Departure time</Label>
+                <Label>{t('flightDetail.departureTime')}</Label>
                 <Input
                     type="time"
                     value={draft.departureTime ?? ''}
@@ -417,7 +428,7 @@ function EditFields({ draft, setDraft }: EditFieldsProps) {
                 />
             </div>
             <div>
-                <Label>Arrival time</Label>
+                <Label>{t('flightDetail.arrivalTime')}</Label>
                 <Input
                     type="time"
                     value={draft.arrivalTime ?? ''}
@@ -426,7 +437,7 @@ function EditFields({ draft, setDraft }: EditFieldsProps) {
             </div>
 
             <div>
-                <Label>Arrival date</Label>
+                <Label>{t('newFlight.arrivalDate')}</Label>
                 <Input
                     type="date"
                     value={draft.arrivalDate ?? ''}
@@ -434,7 +445,7 @@ function EditFields({ draft, setDraft }: EditFieldsProps) {
                 />
             </div>
             <div>
-                <Label>Duration (min)</Label>
+                <Label>{t('flightDetail.durationMin')}</Label>
                 <Input
                     type="number"
                     value={draft.duration ?? ''}
@@ -445,7 +456,7 @@ function EditFields({ draft, setDraft }: EditFieldsProps) {
             </div>
 
             <div>
-                <Label>Distance</Label>
+                <Label>{t('flightDetail.distance')}</Label>
                 <Input
                     type="number"
                     value={draft.distance ?? ''}
@@ -455,7 +466,7 @@ function EditFields({ draft, setDraft }: EditFieldsProps) {
                 />
             </div>
             <div>
-                <Label>Airline</Label>
+                <Label>{t('newFlight.airline')}</Label>
                 <Combobox<Airline>
                     displayValue={
                         draft.airline
@@ -468,7 +479,7 @@ function EditFields({ draft, setDraft }: EditFieldsProps) {
             </div>
 
             <div>
-                <Label>Seat</Label>
+                <Label>{t('newFlight.seat')}</Label>
                 <Select value={draft.seat ?? ''} onChange={(e) => set('seat', e.target.value)}>
                     {SEAT_OPTIONS.map((o) => (
                         <option key={o} value={o}>
@@ -478,7 +489,7 @@ function EditFields({ draft, setDraft }: EditFieldsProps) {
                 </Select>
             </div>
             <div>
-                <Label>Side</Label>
+                <Label>{t('newFlight.side')}</Label>
                 <Select
                     value={draft.aircraftSide ?? ''}
                     onChange={(e) => set('aircraftSide', e.target.value)}
@@ -492,7 +503,7 @@ function EditFields({ draft, setDraft }: EditFieldsProps) {
             </div>
 
             <div>
-                <Label>Class</Label>
+                <Label>{t('newFlight.class')}</Label>
                 <Select
                     value={draft.ticketClass ?? ''}
                     onChange={(e) => set('ticketClass', e.target.value)}
@@ -505,7 +516,7 @@ function EditFields({ draft, setDraft }: EditFieldsProps) {
                 </Select>
             </div>
             <div>
-                <Label>Purpose</Label>
+                <Label>{t('newFlight.purpose')}</Label>
                 <Select value={draft.purpose ?? ''} onChange={(e) => set('purpose', e.target.value)}>
                     {PURPOSES.map((o) => (
                         <option key={o} value={o}>
@@ -516,14 +527,14 @@ function EditFields({ draft, setDraft }: EditFieldsProps) {
             </div>
 
             <div>
-                <Label>Airplane</Label>
+                <Label>{t('newFlight.airplane')}</Label>
                 <Input
                     value={draft.airplane ?? ''}
                     onChange={(e) => set('airplane', e.target.value)}
                 />
             </div>
             <div>
-                <Label>Tail number</Label>
+                <Label>{t('newFlight.tailNumber')}</Label>
                 <Input
                     value={draft.tailNumber ?? ''}
                     onChange={(e) => set('tailNumber', e.target.value)}
@@ -531,7 +542,7 @@ function EditFields({ draft, setDraft }: EditFieldsProps) {
             </div>
 
             <div className="col-span-2">
-                <Label>Flight number</Label>
+                <Label>{t('newFlight.flightNumber')}</Label>
                 <Input
                     value={draft.flightNumber ?? ''}
                     onChange={(e) => set('flightNumber', e.target.value)}
@@ -539,7 +550,7 @@ function EditFields({ draft, setDraft }: EditFieldsProps) {
             </div>
 
             <div className="col-span-2">
-                <Label>Notes</Label>
+                <Label>{t('newFlight.notes')}</Label>
                 <textarea
                     rows={3}
                     value={draft.notes ?? ''}
diff --git a/client/components/flights/FlightFilters.tsx b/client/components/flights/FlightFilters.tsx
index 6d2d939..87ac946 100644
--- a/client/components/flights/FlightFilters.tsx
+++ b/client/components/flights/FlightFilters.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react'
 import { Filter, X } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
 import { Sheet } from '@/components/ui/Sheet'
 import { Button } from '@/components/ui/Button'
 import { Input } from '@/components/ui/Input'
@@ -19,6 +20,7 @@ export function FlightFiltersBar({ filters, onChange }: FlightFiltersProps) {
     const [open, setOpen] = useState(false)
     const { data: usernames } = useUsernames()
     const [draft, setDraft] = useState<FlightsFilters>(filters)
+    const { t } = useTranslation()
 
     const activeCount = ACTIVE_KEYS.filter((k) => filters[k] !== undefined && filters[k] !== '').length
 
@@ -44,24 +46,24 @@ export function FlightFiltersBar({ filters, onChange }: FlightFiltersProps) {
                 <div className="flex items-center gap-2 flex-wrap">
                     {filters.start && (
                         <FilterChip
-                            label={`From ${filters.start}`}
+                            label={t('allFlights.from', { date: filters.start })}
                             onClear={() => onChange({ ...filters, start: undefined })}
                         />
                     )}
                     {filters.end && (
                         <FilterChip
-                            label={`To ${filters.end}`}
+                            label={t('allFlights.to', { date: filters.end })}
                             onClear={() => onChange({ ...filters, end: undefined })}
                         />
                     )}
                     {filters.username && (
                         <FilterChip
-                            label={`User ${filters.username}`}
+                            label={t('allFlights.userFilter', { username: filters.username })}
                             onClear={() => onChange({ ...filters, username: undefined })}
                         />
                     )}
                     {activeCount === 0 && (
-                        <span className="board-label text-ink-muted">All flights</span>
+                        <span className="board-label text-ink-muted">{t('allFlights.title')}</span>
                     )}
                 </div>
                 <Button
@@ -73,7 +75,7 @@ export function FlightFiltersBar({ filters, onChange }: FlightFiltersProps) {
                     }}
                 >
                     <Filter size={13} />
-                    Filters
+                    {t('allFlights.filters')}
                     {activeCount > 0 && (
                         <span className="ml-1 bg-accent text-ink px-1.5 text-[10px] font-bold">
                             {activeCount}
@@ -82,10 +84,10 @@ export function FlightFiltersBar({ filters, onChange }: FlightFiltersProps) {
                 </Button>
             </div>
 
-            <Sheet open={open} onOpenChange={setOpen} title="Filters">
+            <Sheet open={open} onOpenChange={setOpen} title={t('allFlights.filters')}>
                 <div className="space-y-4">
                     <div>
-                        <Label>Start date</Label>
+                        <Label>{t('allFlights.startDate')}</Label>
                         <Input
                             type="date"
                             value={draft.start ?? ''}
@@ -93,7 +95,7 @@ export function FlightFiltersBar({ filters, onChange }: FlightFiltersProps) {
                         />
                     </div>
                     <div>
-                        <Label>End date</Label>
+                        <Label>{t('allFlights.endDate')}</Label>
                         <Input
                             type="date"
                             value={draft.end ?? ''}
@@ -101,14 +103,14 @@ export function FlightFiltersBar({ filters, onChange }: FlightFiltersProps) {
                         />
                     </div>
                     <div>
-                        <Label>User</Label>
+                        <Label>{t('allFlights.user')}</Label>
                         <Select
                             value={draft.username ?? ''}
                             onChange={(e) =>
                                 setDraft({ ...draft, username: e.target.value || undefined })
                             }
                         >
-                            <option value="">Any user</option>
+                            <option value="">{t('allFlights.anyUser')}</option>
                             {usernames?.map((u) => (
                                 <option key={u} value={u}>
                                     {u}
@@ -119,10 +121,10 @@ export function FlightFiltersBar({ filters, onChange }: FlightFiltersProps) {
 
                     <div className="flex gap-2 pt-4 border-t border-rule">
                         <Button variant="outline" onClick={clear} className="flex-1">
-                            Clear all
+                            {t('allFlights.clearAll')}
                         </Button>
                         <Button variant="accent" onClick={apply} className="flex-1">
-                            Apply
+                            {t('allFlights.apply')}
                         </Button>
                     </div>
                 </div>
@@ -132,12 +134,14 @@ export function FlightFiltersBar({ filters, onChange }: FlightFiltersProps) {
 }
 
 function FilterChip({ label, onClear }: { label: string; onClear: () => void }) {
+    const { t } = useTranslation()
+
     return (
         <Badge variant="accent" className="gap-1.5 pl-2 pr-1 py-1">
             {label}
             <button
                 onClick={onClear}
-                aria-label="Remove filter"
+                aria-label={t('allFlights.removeFilter')}
                 className="hover:text-danger"
             >
                 <X size={11} />
diff --git a/client/components/flights/FlightsTable.tsx b/client/components/flights/FlightsTable.tsx
index 7265015..39f845e 100644
--- a/client/components/flights/FlightsTable.tsx
+++ b/client/components/flights/FlightsTable.tsx
@@ -1,6 +1,7 @@
 import { useMemo } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { ArrowRight, ArrowUpDown, ArrowUp, ArrowDown } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
 import type { SortingState } from '@tanstack/react-table'
 
 import type { Flight } from '@/models'
@@ -33,6 +34,7 @@ export function FlightsTable({
     columnPrefs,
 }: FlightsTableProps) {
     const navigate = useNavigate()
+    const { t } = useTranslation()
 
     const visibleColumns = useMemo<FlightColumnDef[]>(() => {
         // Use prefs order, fall back to registry order for unknowns.
@@ -62,7 +64,7 @@ export function FlightsTable({
     if (!flights || flights.length === 0) {
         return (
             <div className="text-center text-ink-muted text-sm font-mono py-16">
-                No flights found.
+                {t('allFlights.noFlightsFound')}
             </div>
         )
     }
@@ -98,7 +100,7 @@ export function FlightsTable({
                                                 col.numeric && 'justify-end w-full',
                                             )}
                                         >
-                                            {col.label}
+                                            {col.label(t)}
                                             {sortable && sortedDesc === undefined && (
                                                 <ArrowUpDown size={11} className="opacity-40" />
                                             )}
diff --git a/client/components/settings/ColumnsManager.tsx b/client/components/settings/ColumnsManager.tsx
index 49ecb31..c7e5399 100644
--- a/client/components/settings/ColumnsManager.tsx
+++ b/client/components/settings/ColumnsManager.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import {
     DndContext,
     closestCenter,
@@ -35,6 +36,7 @@ function emitChanged() {
 
 export function ColumnsManager() {
     const [prefs, setPrefs] = useState<ColumnPref[]>(() => loadColumnPrefs())
+    const { t } = useTranslation()
 
     const update = (next: ColumnPref[]) => {
         setPrefs(next)
@@ -85,15 +87,14 @@ export function ColumnsManager() {
             <div className="flex items-center justify-between gap-3 flex-wrap">
                 <div>
                     <p className="board-label text-ink-muted">
-                        {visibleCount} of {prefs.length} columns visible
+                        {t('columns.visibleOf', { visible: visibleCount, total: prefs.length })}
                     </p>
                     <p className="text-xs text-ink-muted font-mono mt-0.5">
-                        Drag rows to reorder · toggle to show/hide · origin and
-                        destination are required.
+                        {t('columns.hint')}
                     </p>
                 </div>
                 <Button variant="outline" size="sm" onClick={resetAll}>
-                    <RotateCcw size={13} /> Reset
+                    <RotateCcw size={13} /> {t('common.reset')}
                 </Button>
             </div>
 
@@ -127,6 +128,7 @@ interface ColumnRowProps {
 }
 
 function ColumnRow({ pref, onToggle }: ColumnRowProps) {
+    const { t } = useTranslation()
     const def = COLUMN_INDEX[pref.id]
     const {
         attributes,
@@ -155,14 +157,14 @@ function ColumnRow({ pref, onToggle }: ColumnRowProps) {
                 type="button"
                 {...attributes}
                 {...listeners}
-                aria-label="Drag to reorder"
+                aria-label={t('columns.dragToReorder')}
                 className="cursor-grab active:cursor-grabbing text-ink-faint hover:text-ink touch-none"
             >
                 <GripVertical size={16} />
             </button>
             <div className="flex-1 min-w-0">
                 <div className="font-mono text-sm text-ink truncate">
-                    {def?.label ?? pref.id}
+                    {def?.label ? def.label(t) : pref.id}
                 </div>
                 <div className="text-[10px] font-mono uppercase tracking-board text-ink-faint">
                     {pref.id}
@@ -170,10 +172,10 @@ function ColumnRow({ pref, onToggle }: ColumnRowProps) {
             </div>
             {required ? (
                 <span
-                    title="Required column"
+                    title={t('columns.requiredColumn')}
                     className="flex items-center gap-1 board-label text-ink-muted"
                 >
-                    <Lock size={12} /> Required
+                    <Lock size={12} /> {t('columns.required')}
                 </span>
             ) : pref.visible ? (
                 <Eye size={14} className="text-ink-muted" />
@@ -184,7 +186,9 @@ function ColumnRow({ pref, onToggle }: ColumnRowProps) {
                 checked={pref.visible}
                 onCheckedChange={onToggle}
                 disabled={required}
-                aria-label={`Show ${def?.label ?? pref.id}`}
+                aria-label={t('columns.showColumn', {
+                    label: def?.label ? def.label(t) : pref.id,
+                })}
             />
         </div>
     )
diff --git a/client/components/shell/AppShell.tsx b/client/components/shell/AppShell.tsx
index bdbb0e2..65eb794 100644
--- a/client/components/shell/AppShell.tsx
+++ b/client/components/shell/AppShell.tsx
@@ -1,28 +1,31 @@
 import { useState } from 'react'
 import { Link, Outlet, useLocation } from 'react-router-dom'
 import { Menu } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
 import { NavSheet } from './NavSheet'
 import { BoardClock } from './BoardClock'
-
-const TITLES: Record<string, string> = {
-    '/': 'Dashboard',
-    '/flights': 'Flights',
-    '/new': 'New Flight',
-    '/statistics': 'Statistics',
-    '/settings': 'Settings',
-}
-
-function pageTitle(pathname: string) {
-    if (TITLES[pathname]) return TITLES[pathname]
-    const match = Object.keys(TITLES)
-        .filter((p) => p !== '/')
-        .find((p) => pathname.startsWith(p))
-    return match ? TITLES[match] : 'Jetlog'
-}
+import { LanguageSwitcher } from './LanguageSwitcher'
 
 export function AppShell() {
     const [menuOpen, setMenuOpen] = useState(false)
     const location = useLocation()
+    const { t } = useTranslation()
+
+    const titles: Record<string, string> = {
+        '/': t('nav.dashboard'),
+        '/flights': t('nav.flights'),
+        '/new': t('nav.newFlight'),
+        '/statistics': t('nav.statistics'),
+        '/settings': t('nav.settings'),
+    }
+
+    const pageTitle = (pathname: string) => {
+        if (titles[pathname]) return titles[pathname]
+        const match = Object.keys(titles)
+            .filter((p) => p !== '/')
+            .find((p) => pathname.startsWith(p))
+        return match ? titles[match] : 'Jetlog'
+    }
 
     return (
         <div className="min-h-full flex flex-col">
@@ -42,10 +45,11 @@ export function AppShell() {
                     </div>
 
                     <div className="flex items-center gap-4">
+                        <LanguageSwitcher />
                         <BoardClock />
                         <button
                             onClick={() => setMenuOpen(true)}
-                            aria-label="Open menu"
+                            aria-label={t('common.openMenu')}
                             className="p-1.5 -mr-1.5 text-ink hover:text-accent-deep"
                         >
                             <Menu size={22} strokeWidth={1.75} />
diff --git a/client/components/shell/BoardClock.tsx b/client/components/shell/BoardClock.tsx
index 2f0bf93..cb30a84 100644
--- a/client/components/shell/BoardClock.tsx
+++ b/client/components/shell/BoardClock.tsx
@@ -1,7 +1,9 @@
 import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 
 export function BoardClock() {
     const [now, setNow] = useState(() => new Date())
+    const { t } = useTranslation()
 
     useEffect(() => {
         const t = window.setInterval(() => setNow(new Date()), 1000)
@@ -14,7 +16,7 @@ export function BoardClock() {
 
     return (
         <div className="hidden md:flex items-baseline gap-2">
-            <span className="board-label">UTC</span>
+            <span className="board-label">{t('common.utc')}</span>
             <span className="board-value text-sm tracking-board">
                 {hh}:{mm}
                 <span className="text-ink-faint">:{ss}</span>
diff --git a/client/components/shell/LanguageSwitcher.tsx b/client/components/shell/LanguageSwitcher.tsx
new file mode 100644
index 0000000..9f48c36
--- /dev/null
+++ b/client/components/shell/LanguageSwitcher.tsx
@@ -0,0 +1,29 @@
+import { useTranslation } from 'react-i18next'
+import { Globe } from 'lucide-react'
+
+import { Select } from '@/components/ui/Select'
+import { LANGUAGES } from '@/locales'
+import { setLanguage } from '@/i18n'
+
+export function LanguageSwitcher() {
+    const { i18n } = useTranslation()
+
+    return (
+        <div className="flex items-center gap-1.5">
+            <Globe size={14} className="text-ink-muted shrink-0" aria-hidden />
+            <Select
+                aria-label="Language"
+                value={i18n.resolvedLanguage || i18n.language}
+                onChange={(e) => setLanguage(e.target.value)}
+                className="h-8 w-auto min-w-[92px] text-xs"
+            >
+                {LANGUAGES.map((lang) => (
+                    <option key={lang.code} value={lang.code}>
+                        {lang.name}
+                        {lang.complete ? '' : ' · WIP'}
+                    </option>
+                ))}
+            </Select>
+        </div>
+    )
+}
diff --git a/client/components/shell/NavSheet.tsx b/client/components/shell/NavSheet.tsx
index 5500d15..0c8f1e2 100644
--- a/client/components/shell/NavSheet.tsx
+++ b/client/components/shell/NavSheet.tsx
@@ -2,6 +2,7 @@ import { useEffect } from 'react'
 import { Link, useLocation, useNavigate } from 'react-router-dom'
 import { useQueryClient } from '@tanstack/react-query'
 import { Home, PlaneTakeoff, Plus, BarChart3, Settings as Cog, LogOut, X, UserRound } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
 import { cn } from '@/lib/cn'
 import TokenStorage from '@/storage/tokenStorage'
 import { useCurrentUser } from '@/lib/queries'
@@ -11,19 +12,20 @@ interface NavSheetProps {
     onClose: () => void
 }
 
-const NAV_ITEMS = [
-    { to: '/', label: 'Home', icon: Home },
-    { to: '/flights', label: 'Flights', icon: PlaneTakeoff },
-    { to: '/new', label: 'New Flight', icon: Plus },
-    { to: '/statistics', label: 'Statistics', icon: BarChart3 },
-    { to: '/settings', label: 'Settings', icon: Cog },
-]
-
 export function NavSheet({ open, onClose }: NavSheetProps) {
     const location = useLocation()
     const navigate = useNavigate()
     const qc = useQueryClient()
     const { data: me } = useCurrentUser()
+    const { t } = useTranslation()
+
+    const NAV_ITEMS = [
+        { to: '/', label: t('nav.home'), icon: Home },
+        { to: '/flights', label: t('nav.flights'), icon: PlaneTakeoff },
+        { to: '/new', label: t('nav.newFlight'), icon: Plus },
+        { to: '/statistics', label: t('nav.statistics'), icon: BarChart3 },
+        { to: '/settings', label: t('nav.settings'), icon: Cog },
+    ]
 
     useEffect(() => {
         if (!open) return
@@ -56,14 +58,14 @@ export function NavSheet({ open, onClose }: NavSheetProps) {
             />
             <aside
                 role="dialog"
-                aria-label="Navigation"
+                aria-label={t('common.navigation')}
                 className="absolute right-0 top-0 h-full w-[86%] max-w-[360px] bg-paper border-l border-rule shadow-paper animate-slide-in-right flex flex-col"
             >
                 <div className="flex items-center justify-between px-5 h-14 border-b border-rule">
-                    <span className="board-label">Menu</span>
+                    <span className="board-label">{t('common.menu')}</span>
                     <button
                         onClick={onClose}
-                        aria-label="Close menu"
+                        aria-label={t('common.closeMenu')}
                         className="p-1 -mr-1 hover:text-accent-deep"
                     >
                         <X size={20} />
@@ -105,13 +107,13 @@ export function NavSheet({ open, onClose }: NavSheetProps) {
                             </div>
                             <div className="min-w-0">
                                 <div className="board-label text-ink-muted leading-none">
-                                    Signed in as
+                                    {t('common.signedInAs')}
                                 </div>
                                 <div className="font-mono text-sm text-ink truncate">
                                     {me.username}
                                     {me.isAdmin && (
                                         <span className="ml-2 text-[10px] uppercase tracking-board text-accent-deep">
-                                            admin
+                                            {t('common.admin')}
                                         </span>
                                     )}
                                 </div>
@@ -123,7 +125,9 @@ export function NavSheet({ open, onClose }: NavSheetProps) {
                         className="w-full flex items-center gap-3 px-2 py-2.5 text-ink-soft hover:text-danger transition-colors"
                     >
                         <LogOut size={18} strokeWidth={1.75} />
-                        <span className="font-mono uppercase tracking-board text-sm">Logout</span>
+                        <span className="font-mono uppercase tracking-board text-sm">
+                            {t('common.logout')}
+                        </span>
                     </button>
                 </div>
             </aside>
diff --git a/client/components/stats/Charts.tsx b/client/components/stats/Charts.tsx
index ddc45a9..c7c0818 100644
--- a/client/components/stats/Charts.tsx
+++ b/client/components/stats/Charts.tsx
@@ -12,6 +12,7 @@ import {
     XAxis,
     YAxis,
 } from 'recharts'
+import { useTranslation } from 'react-i18next'
 
 import { Panel, PanelHeader, PanelTitle, PanelBody } from '@/components/ui/Panel'
 
@@ -38,6 +39,7 @@ interface FrequencyChartProps {
 }
 
 export function FrequencyBarChart({ title, data, label = 'count' }: FrequencyChartProps) {
+    const { t } = useTranslation()
     const entries = Object.entries(data ?? {})
         .map(([name, value]) => ({ name, value }))
         .slice(0, 8)
@@ -50,7 +52,7 @@ export function FrequencyBarChart({ title, data, label = 'count' }: FrequencyCha
             <PanelBody className="pt-2">
                 {entries.length === 0 ? (
                     <p className="text-center text-ink-muted text-sm py-8 font-mono">
-                        No data
+                        {t('common.noData')}
                     </p>
                 ) : (
                     <ResponsiveContainer width="100%" height={Math.max(220, entries.length * 32)}>
@@ -94,6 +96,7 @@ export function FrequencyBarChart({ title, data, label = 'count' }: FrequencyCha
 }
 
 export function FrequencyDonut({ title, data }: FrequencyChartProps) {
+    const { t } = useTranslation()
     const entries = Object.entries(data ?? {}).map(([name, value]) => ({ name, value }))
     const total = entries.reduce((sum, e) => sum + e.value, 0)
 
@@ -105,7 +108,7 @@ export function FrequencyDonut({ title, data }: FrequencyChartProps) {
             <PanelBody>
                 {entries.length === 0 ? (
                     <p className="text-center text-ink-muted text-sm py-8 font-mono">
-                        No data
+                        {t('common.noData')}
                     </p>
                 ) : (
                     <div className="flex items-center gap-6">
@@ -170,6 +173,8 @@ interface TimelineChartProps {
 }
 
 export function FlightsPerMonthChart({ title, data }: { title: string; data: TimelinePoint[] }) {
+    const { t } = useTranslation()
+
     return (
         <Panel>
             <PanelHeader>
@@ -177,7 +182,9 @@ export function FlightsPerMonthChart({ title, data }: { title: string; data: Tim
             </PanelHeader>
             <PanelBody>
                 {data.length === 0 ? (
-                    <p className="text-center text-ink-muted text-sm py-8 font-mono">No data</p>
+                    <p className="text-center text-ink-muted text-sm py-8 font-mono">
+                        {t('common.noData')}
+                    </p>
                 ) : (
                     <ResponsiveContainer width="100%" height={240}>
                         <BarChart data={data} margin={{ top: 8, right: 12, left: -16, bottom: 0 }}>
@@ -202,7 +209,7 @@ export function FlightsPerMonthChart({ title, data }: { title: string; data: Tim
                                 labelStyle={labelStyle}
                                 itemStyle={itemStyle}
                                 separator=""
-                                formatter={(v: number) => [`${v} flights`, '']}
+                                formatter={(v: number) => [`${v} ${t('statistics.flights')}`, '']}
                             />
                             <Bar dataKey="flights" fill={ACCENT} stroke={INK} strokeWidth={1} />
                         </BarChart>
@@ -214,15 +221,21 @@ export function FlightsPerMonthChart({ title, data }: { title: string; data: Tim
 }
 
 export function CumulativeDistanceChart({ title, data, metric }: TimelineChartProps) {
+    const { t } = useTranslation()
+
     return (
         <Panel>
             <PanelHeader>
                 <PanelTitle>{title}</PanelTitle>
-                <span className="board-label text-ink-muted">{metric ? 'km' : 'mi'}</span>
+                <span className="board-label text-ink-muted">
+                    {metric ? t('statistics.km') : t('statistics.mi')}
+                </span>
             </PanelHeader>
             <PanelBody>
                 {data.length === 0 ? (
-                    <p className="text-center text-ink-muted text-sm py-8 font-mono">No data</p>
+                    <p className="text-center text-ink-muted text-sm py-8 font-mono">
+                        {t('common.noData')}
+                    </p>
                 ) : (
                     <ResponsiveContainer width="100%" height={240}>
                         <LineChart data={data} margin={{ top: 8, right: 12, left: -8, bottom: 0 }}>
diff --git a/client/components/ui/Combobox.tsx b/client/components/ui/Combobox.tsx
index 10e8a27..a3b0358 100644
--- a/client/components/ui/Combobox.tsx
+++ b/client/components/ui/Combobox.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from 'react'
 import * as Popover from '@radix-ui/react-popover'
 import { ChevronDown, Search } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
 import { cn } from '@/lib/cn'
 
 export interface ComboboxOption<T = unknown> {
@@ -22,7 +23,7 @@ interface ComboboxProps<T> {
 }
 
 export function Combobox<T>({
-    placeholder = 'Search...',
+    placeholder,
     onSearch,
     onSelect,
     displayValue,
@@ -30,6 +31,7 @@ export function Combobox<T>({
     minChars = 2,
     className,
 }: ComboboxProps<T>) {
+    const { t } = useTranslation()
     const [open, setOpen] = useState(false)
     const [query, setQuery] = useState('')
     const [options, setOptions] = useState<ComboboxOption<T>[]>([])
@@ -69,8 +71,8 @@ export function Combobox<T>({
                         className,
                     )}
                 >
-                    <span className={cn(displayValue ? 'text-ink truncate' : 'text-ink-faint')}>
-                        {displayValue || placeholder}
+                <span className={cn(displayValue ? 'text-ink truncate' : 'text-ink-faint')}>
+                    {displayValue || placeholder || t('common.search')}
                     </span>
                     <ChevronDown size={14} className="text-ink-muted shrink-0" />
                 </button>
@@ -87,21 +89,25 @@ export function Combobox<T>({
                             autoFocus
                             value={query}
                             onChange={(e) => setQuery(e.target.value)}
-                            placeholder={placeholder}
+                            placeholder={placeholder || t('common.search')}
                             className="flex-1 bg-transparent font-mono text-sm focus:outline-none"
                         />
                     </div>
                     <div className="max-h-64 overflow-y-auto">
                         {query.length < minChars && (
                             <p className="px-3 py-3 text-xs text-ink-muted">
-                                Type at least {minChars} characters
+                                {t('common.minChars', { count: minChars })}
                             </p>
                         )}
                         {loading && (
-                            <p className="px-3 py-3 text-xs text-ink-muted">Searching...</p>
+                            <p className="px-3 py-3 text-xs text-ink-muted">
+                                {t('common.searching')}
+                            </p>
                         )}
                         {!loading && query.length >= minChars && options.length === 0 && (
-                            <p className="px-3 py-3 text-xs text-ink-muted">No results</p>
+                            <p className="px-3 py-3 text-xs text-ink-muted">
+                                {t('common.noResults')}
+                            </p>
                         )}
                         {options.map((opt) => (
                             <button
diff --git a/client/components/ui/Dialog.tsx b/client/components/ui/Dialog.tsx
index ff72b1c..6d4fc13 100644
--- a/client/components/ui/Dialog.tsx
+++ b/client/components/ui/Dialog.tsx
@@ -1,6 +1,7 @@
 import * as RDialog from '@radix-ui/react-dialog'
 import { X } from 'lucide-react'
 import type { ReactNode } from 'react'
+import { useTranslation } from 'react-i18next'
 import { cn } from '@/lib/cn'
 
 interface DialogProps {
@@ -13,6 +14,8 @@ interface DialogProps {
 }
 
 export function Dialog({ open, onOpenChange, title, description, children, className }: DialogProps) {
+    const { t } = useTranslation()
+
     return (
         <RDialog.Root open={open} onOpenChange={onOpenChange}>
             <RDialog.Portal>
@@ -29,7 +32,7 @@ export function Dialog({ open, onOpenChange, title, description, children, class
                     <div className="flex items-center justify-between gap-4 px-4 h-11 border-b border-rule">
                         <RDialog.Title className="board-label text-ink">{title}</RDialog.Title>
                         <RDialog.Close
-                            aria-label="Close"
+                            aria-label={t('common.close')}
                             className="p-1 -mr-1 hover:text-accent-deep"
                         >
                             <X size={18} />
diff --git a/client/components/ui/Sheet.tsx b/client/components/ui/Sheet.tsx
index a53551a..94d239e 100644
--- a/client/components/ui/Sheet.tsx
+++ b/client/components/ui/Sheet.tsx
@@ -1,6 +1,7 @@
 import * as RDialog from '@radix-ui/react-dialog'
 import { X } from 'lucide-react'
 import type { ReactNode } from 'react'
+import { useTranslation } from 'react-i18next'
 import { cn } from '@/lib/cn'
 
 interface SheetProps {
@@ -13,6 +14,7 @@ interface SheetProps {
 }
 
 export function Sheet({ open, onOpenChange, title, side = 'right', children, className }: SheetProps) {
+    const { t } = useTranslation()
     const sideClasses =
         side === 'right'
             ? 'right-0 top-0 h-full w-[92%] max-w-md border-l animate-slide-in-right'
@@ -31,7 +33,7 @@ export function Sheet({ open, onOpenChange, title, side = 'right', children, cla
                 >
                     <div className="flex items-center justify-between gap-4 px-4 h-12 border-b border-rule shrink-0">
                         <RDialog.Title className="board-label text-ink">{title}</RDialog.Title>
-                        <RDialog.Close aria-label="Close" className="p-1 -mr-1 hover:text-accent-deep">
+                        <RDialog.Close aria-label={t('common.close')} className="p-1 -mr-1 hover:text-accent-deep">
                             <X size={18} />
                         </RDialog.Close>
                     </div>
diff --git a/client/components/ui/Spinner.tsx b/client/components/ui/Spinner.tsx
index 77d9c7a..0b38a3f 100644
--- a/client/components/ui/Spinner.tsx
+++ b/client/components/ui/Spinner.tsx
@@ -1,6 +1,9 @@
 import { cn } from '@/lib/cn'
+import { useTranslation } from 'react-i18next'
 
 export function Spinner({ className }: { className?: string }) {
+    const { t } = useTranslation()
+
     return (
         <span
             className={cn(
@@ -8,7 +11,7 @@ export function Spinner({ className }: { className?: string }) {
                 className,
             )}
             role="status"
-            aria-label="Loading"
+            aria-label={t('common.loading')}
         />
     )
 }
diff --git a/client/i18n.ts b/client/i18n.ts
new file mode 100644
index 0000000..3734bcb
--- /dev/null
+++ b/client/i18n.ts
@@ -0,0 +1,68 @@
+import i18n from 'i18next'
+import { initReactI18next } from 'react-i18next'
+
+import en from './locales/en.json'
+import zhCN from './locales/zh-CN.json'
+import zhTW from './locales/zh-TW.json'
+import ja from './locales/ja.json'
+import ko from './locales/ko.json'
+import fr from './locales/fr.json'
+import de from './locales/de.json'
+import es from './locales/es.json'
+import {
+    DEFAULT_LANGUAGE,
+    isSupportedLanguage,
+    LANGUAGE_STORAGE_KEY,
+    LANGUAGES,
+} from './locales'
+import { DEFAULT_LANGUAGE as CONFIGURED_LANGUAGE } from './api'
+
+function detectLanguage(): string {
+    const stored = localStorage.getItem(LANGUAGE_STORAGE_KEY)
+    if (isSupportedLanguage(stored)) return stored
+
+    // Docker deployments can configure the default via the DEFAULT_LANGUAGE
+    // environment variable (served from GET /config).
+    if (isSupportedLanguage(CONFIGURED_LANGUAGE)) return CONFIGURED_LANGUAGE
+
+    const browser = (navigator.language || DEFAULT_LANGUAGE).toLowerCase()
+    if (browser.startsWith('zh')) {
+        // Traditional variants (Taiwan/HK/Hant) default to zh-TW, everything
+        // else Chinese defaults to Simplified (zh-CN).
+        if (/tw|hk|hant|mo/.test(browser)) return 'zh-TW'
+        return 'zh-CN'
+    }
+    if (browser.startsWith('ja')) return 'ja'
+    if (browser.startsWith('ko')) return 'ko'
+    if (browser.startsWith('fr')) return 'fr'
+    if (browser.startsWith('de')) return 'de'
+    if (browser.startsWith('es')) return 'es'
+    return DEFAULT_LANGUAGE
+}
+
+export function setLanguage(code: string) {
+    if (!isSupportedLanguage(code)) return
+    localStorage.setItem(LANGUAGE_STORAGE_KEY, code)
+    i18n.changeLanguage(code)
+}
+
+i18n.use(initReactI18next).init({
+    resources: {
+        en: { translation: en },
+        'zh-CN': { translation: zhCN },
+        'zh-TW': { translation: zhTW },
+        ja: { translation: ja },
+        ko: { translation: ko },
+        fr: { translation: fr },
+        de: { translation: de },
+        es: { translation: es },
+    },
+    lng: detectLanguage(),
+    fallbackLng: DEFAULT_LANGUAGE,
+    supportedLngs: LANGUAGES.map((l) => l.code),
+    interpolation: {
+        escapeValue: false,
+    },
+})
+
+export default i18n
diff --git a/client/lib/flightColumns.ts b/client/lib/flightColumns.ts
index 7cbceb0..2c73822 100644
--- a/client/lib/flightColumns.ts
+++ b/client/lib/flightColumns.ts
@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react'
+import type { TFunction } from 'i18next'
 import type { Flight } from '@/models'
 import { formatDistance, formatDuration, formatTime, airportCode } from '@/lib/format'
 
@@ -6,7 +7,8 @@ export type FlightSortKey = 'date' | 'duration' | 'distance' | 'seat'
 
 export interface FlightColumnDef {
     id: string
-    label: string
+    /** Column header label; receives the i18n `t` function so it translates live. */
+    label: (t: TFunction) => string
     sortable?: FlightSortKey
     required?: boolean
     defaultVisible: boolean
@@ -20,7 +22,7 @@ const dash = '—'
 export const FLIGHT_COLUMNS: FlightColumnDef[] = [
     {
         id: 'date',
-        label: 'Date',
+        label: (t) => t('columns.date'),
         sortable: 'date',
         required: true,
         defaultVisible: true,
@@ -28,39 +30,39 @@ export const FLIGHT_COLUMNS: FlightColumnDef[] = [
     },
     {
         id: 'origin',
-        label: 'Origin',
+        label: (t) => t('columns.origin'),
         required: true,
         defaultVisible: true,
         render: (f) => airportCode(f.origin),
     },
     {
         id: 'destination',
-        label: 'Destination',
+        label: (t) => t('columns.destination'),
         required: true,
         defaultVisible: true,
         render: (f) => airportCode(f.destination),
     },
     {
         id: 'departureTime',
-        label: 'Departure',
+        label: (t) => t('columns.departure'),
         defaultVisible: true,
         render: (f) => formatTime(f.departureTime),
     },
     {
         id: 'arrivalTime',
-        label: 'Arrival',
+        label: (t) => t('columns.arrival'),
         defaultVisible: true,
         render: (f) => formatTime(f.arrivalTime),
     },
     {
         id: 'arrivalDate',
-        label: 'Arrival date',
+        label: (t) => t('columns.arrivalDate'),
         defaultVisible: false,
         render: (f) => f.arrivalDate || dash,
     },
     {
         id: 'duration',
-        label: 'Duration',
+        label: (t) => t('columns.duration'),
         sortable: 'duration',
         defaultVisible: true,
         numeric: true,
@@ -68,7 +70,7 @@ export const FLIGHT_COLUMNS: FlightColumnDef[] = [
     },
     {
         id: 'distance',
-        label: 'Distance',
+        label: (t) => t('columns.distance'),
         sortable: 'distance',
         defaultVisible: true,
         numeric: true,
@@ -76,75 +78,75 @@ export const FLIGHT_COLUMNS: FlightColumnDef[] = [
     },
     {
         id: 'seat',
-        label: 'Seat',
+        label: (t) => t('columns.seat'),
         sortable: 'seat',
         defaultVisible: true,
         render: (f) => f.seat || dash,
     },
     {
         id: 'aircraftSide',
-        label: 'Side',
+        label: (t) => t('columns.side'),
         defaultVisible: false,
         render: (f) => f.aircraftSide || dash,
     },
     {
         id: 'ticketClass',
-        label: 'Class',
+        label: (t) => t('columns.class'),
         defaultVisible: true,
         render: (f) => f.ticketClass || dash,
     },
     {
         id: 'purpose',
-        label: 'Purpose',
+        label: (t) => t('columns.purpose'),
         defaultVisible: false,
         render: (f) => f.purpose || dash,
     },
     {
         id: 'airline',
-        label: 'Airline',
+        label: (t) => t('columns.airline'),
         defaultVisible: true,
         render: (f) => (f.airline ? f.airline.iata || f.airline.icao : dash),
     },
     {
         id: 'airplane',
-        label: 'Airplane',
+        label: (t) => t('columns.airplane'),
         defaultVisible: false,
         render: (f) => f.airplane || dash,
     },
     {
         id: 'tailNumber',
-        label: 'Tail number',
+        label: (t) => t('columns.tailNumber'),
         defaultVisible: false,
         render: (f) => f.tailNumber || dash,
     },
     {
         id: 'flightNumber',
-        label: 'Flight number',
+        label: (t) => t('columns.flightNumber'),
         defaultVisible: false,
         render: (f) => f.flightNumber || dash,
     },
     {
         id: 'username',
-        label: 'User',
+        label: (t) => t('columns.user'),
         defaultVisible: false,
         render: (f) => f.username || dash,
     },
     {
         id: 'notes',
-        label: 'Notes',
+        label: (t) => t('columns.notes'),
         defaultVisible: false,
         render: (f) => f.notes || dash,
     },
     {
         id: 'connection',
-        label: 'Connection',
+        label: (t) => t('columns.connection'),
         defaultVisible: false,
         numeric: true,
         render: (f) => (f.connection ? `#${f.connection}` : dash),
     },
     {
         id: 'id',
-        label: 'Flight ID',
+        label: (t) => t('columns.flightId'),
         defaultVisible: false,
         numeric: true,
         render: (f) => `#${f.id}`,
diff --git a/client/locales/de.json b/client/locales/de.json
new file mode 100644
index 0000000..0967ef4
--- /dev/null
+++ b/client/locales/de.json
@@ -0,0 +1 @@
+{}
diff --git a/client/locales/en.json b/client/locales/en.json
new file mode 100644
index 0000000..522d470
--- /dev/null
+++ b/client/locales/en.json
@@ -0,0 +1,265 @@
+{
+  "common": {
+    "loading": "Loading",
+    "close": "Close",
+    "cancel": "Cancel",
+    "save": "Save",
+    "saving": "Saving…",
+    "create": "Create",
+    "edit": "Edit",
+    "delete": "Delete",
+    "reset": "Reset",
+    "apply": "Apply",
+    "run": "Run",
+    "running": "Running…",
+    "yes": "Yes",
+    "no": "No",
+    "search": "Search...",
+    "searching": "Searching...",
+    "noResults": "No results",
+    "minChars": "Type at least {{count}} characters",
+    "required": "Required",
+    "admin": "Admin",
+    "remove": "Remove",
+    "back": "Back",
+    "menu": "Menu",
+    "navigation": "Navigation",
+    "logout": "Logout",
+    "signedInAs": "Signed in as",
+    "utc": "UTC",
+    "openMenu": "Open menu",
+    "closeMenu": "Close menu",
+    "noData": "No data"
+  },
+  "nav": {
+    "home": "Home",
+    "flights": "Flights",
+    "newFlight": "New Flight",
+    "statistics": "Statistics",
+    "settings": "Settings",
+    "dashboard": "Dashboard"
+  },
+  "login": {
+    "username": "Username",
+    "password": "Password",
+    "rememberMe": "Remember me",
+    "signIn": "Sign in",
+    "signingIn": "Signing in…",
+    "incorrect": "Incorrect username or password",
+    "unable": "Unable to log in. Please try again."
+  },
+  "home": {
+    "flights": "Flights",
+    "airports": "Airports",
+    "hours": "Hours",
+    "distance": "Distance",
+    "countries": "Countries",
+    "recentFlights": "Recent flights",
+    "allFlights": "All flights",
+    "worldMap": "World map",
+    "mapSubtitle": "Visited airports & routes",
+    "noFlights": "No flights yet.",
+    "addFirstFlight": "Add your first flight",
+    "km": "km",
+    "mi": "mi"
+  },
+  "settings": {
+    "title": "Settings",
+    "tabPreferences": "Preferences",
+    "tabTable": "Flights table",
+    "tabData": "Import / Export",
+    "tabAccount": "Account",
+    "tabUsers": "Users",
+    "tabJobs": "Jobs",
+    "language": "Language",
+    "languageDescription": "Choose the language used across the app. Languages marked WIP fall back to English.",
+    "metricUnits": "Metric units",
+    "metricUnitsDesc": "Use kilometers instead of miles for distance.",
+    "localAirportTime": "Local airport timezone",
+    "localAirportTimeDesc": "Compute flight duration using each airport's local time.",
+    "showVisitedCountries": "Highlight visited countries",
+    "showVisitedCountriesDesc": "Fill visited countries on the world map.",
+    "frequencyBasedMarker": "Frequency-based markers",
+    "frequencyBasedMarkerDesc": "Scale airport markers on the map by visit count.",
+    "frequencyBasedLine": "Frequency-based flight lines",
+    "frequencyBasedLineDesc": "Scale flight path thickness by trip frequency.",
+    "columnsOnAllFlights": "Columns on All Flights",
+    "importFlights": "Import flights",
+    "myFlightradar24": "MyFlightRadar24",
+    "flighty": "Flighty",
+    "customCsv": "Custom CSV",
+    "importing": "Importing…",
+    "import": "Import",
+    "pleaseChooseFile": "Please choose at least one file.",
+    "exportFlights": "Export flights",
+    "exportDescription": "Download all your logged flights in one of the formats below.",
+    "exportCsv": "Export CSV",
+    "exportIcal": "Export iCal",
+    "yourAccount": "Your account",
+    "username": "Username",
+    "lastLogin": "Last login",
+    "created": "Created",
+    "actions": "Actions",
+    "editAccount": "Edit account",
+    "logOut": "Log out",
+    "newUser": "New user",
+    "otherUsers": "{{count}} other users",
+    "noOtherUsers": "No other users.",
+    "editUser": "Edit {{username}}",
+    "newUsername": "New username",
+    "newPassword": "New password",
+    "leaveBlank": "Leave blank to keep current",
+    "createUser": "Create user",
+    "deleteUserConfirm": "Delete user \"{{username}}\" and all their flights?",
+    "maintenanceJobs": "Maintenance jobs",
+    "computeConnections": "Compute flight connections",
+    "computeConnectionsDesc": "Find return/onward connections between existing flights.",
+    "fetchMissingAirlines": "Fetch missing airlines",
+    "fetchMissingAirlinesDesc": "Look up airlines for flights with a callsign but no airline.",
+    "jobResult": "{{label}}: {{updated}} updated, {{skipped}} skipped",
+    "connections": "Connections",
+    "airlines": "Airlines",
+    "languageName": "Language"
+  },
+  "allFlights": {
+    "title": "All flights",
+    "noFlightsFound": "No flights found.",
+    "newFlight": "New flight",
+    "filters": "Filters",
+    "noResults": "No results",
+    "perPage": "Per page",
+    "showing": "Showing {{start}}–{{end}}",
+    "page": "Page {{page}}",
+    "prev": "Prev",
+    "next": "Next",
+    "startDate": "Start date",
+    "endDate": "End date",
+    "user": "User",
+    "anyUser": "Any user",
+    "clearAll": "Clear all",
+    "from": "From {{date}}",
+    "to": "To {{date}}",
+    "userFilter": "User {{username}}",
+    "removeFilter": "Remove filter"
+  },
+  "newFlight": {
+    "title": "New flight",
+    "manualEntry": "Manual entry",
+    "flightNumber": "Flight number",
+    "fetchPlaceholder": "e.g. FR2460",
+    "fetch": "Fetch",
+    "fetching": "Fetching…",
+    "fetchHint": "Enter a callsign and we'll pre-fill origin, destination & airline.",
+    "noRoute": "No route found for that flight number.",
+    "fetchFailed": "Failed to fetch flight info.",
+    "route": "Route",
+    "origin": "Origin",
+    "destination": "Destination",
+    "airline": "Airline",
+    "searchAirports": "Search airports...",
+    "searchAirlines": "Search airlines...",
+    "scheduleAircraft": "Schedule & aircraft",
+    "date": "Date",
+    "departure": "Departure",
+    "arrival": "Arrival",
+    "arrivalDate": "Arrival date",
+    "airplane": "Airplane",
+    "tailNumber": "Tail number",
+    "travelers": "Travelers",
+    "yourDetails": "Your details",
+    "selected": "{{count}} selected",
+    "logFor": "Log this flight for",
+    "you": "(you)",
+    "traveler": "Traveler:",
+    "seat": "Seat",
+    "side": "Side",
+    "class": "Class",
+    "purpose": "Purpose",
+    "notes": "Notes",
+    "choose": "Choose",
+    "typeHere": "Type here...",
+    "originRequired": "Origin and destination are required.",
+    "travelerRequired": "At least one traveler is required.",
+    "saveFailed": "Failed to save flight.",
+    "cancel": "Cancel",
+    "saveFlight": "Save flight",
+    "saving": "Saving…"
+  },
+  "flightDetail": {
+    "allFlights": "All flights",
+    "deleteConfirm": "Delete this flight?",
+    "departureAirport": "Departure airport",
+    "arrivalAirport": "Arrival airport",
+    "noAirportData": "No airport data",
+    "noRouteData": "No route data",
+    "editDetails": "Edit details",
+    "details": "Details",
+    "name": "Name",
+    "city": "City",
+    "country": "Country",
+    "region": "Region",
+    "continent": "Continent",
+    "icaoIata": "ICAO / IATA",
+    "timezone": "Timezone",
+    "connection": "Connection",
+    "linkedFlight": "Linked flight #{{id}}",
+    "departureTime": "Departure time",
+    "arrivalTime": "Arrival time",
+    "durationMin": "Duration (min)",
+    "distance": "Distance"
+  },
+  "columns": {
+    "visibleOf": "{{visible}} of {{total}} columns visible",
+    "hint": "Drag rows to reorder · toggle to show/hide · origin and destination are required.",
+    "required": "Required",
+    "requiredColumn": "Required column",
+    "dragToReorder": "Drag to reorder",
+    "showColumn": "Show {{label}}",
+    "date": "Date",
+    "origin": "Origin",
+    "destination": "Destination",
+    "departure": "Departure",
+    "arrival": "Arrival",
+    "arrivalDate": "Arrival date",
+    "duration": "Duration",
+    "distance": "Distance",
+    "seat": "Seat",
+    "side": "Side",
+    "class": "Class",
+    "purpose": "Purpose",
+    "airline": "Airline",
+    "airplane": "Airplane",
+    "tailNumber": "Tail number",
+    "flightNumber": "Flight number",
+    "user": "User",
+    "notes": "Notes",
+    "connection": "Connection",
+    "flightId": "Flight ID"
+  },
+  "statistics": {
+    "title": "Statistics",
+    "filter": "Filter statistics",
+    "last": "Last",
+    "allTime": "all time",
+    "days": "days",
+    "weeks": "weeks",
+    "months": "months",
+    "years": "years",
+    "flights": "Flights",
+    "airports": "Airports",
+    "hours": "Hours",
+    "distance": "Distance",
+    "countries": "Countries",
+    "km": "km",
+    "mi": "mi",
+    "dayRange": "Day range",
+    "flightsPerMonth": "Flights per month",
+    "cumulativeDistance": "Cumulative distance",
+    "seat": "Seat",
+    "ticketClass": "Ticket class",
+    "mostVisitedAirports": "Most visited airports",
+    "mostCommonCountries": "Most common countries",
+    "mostCommonAirlines": "Most common airlines",
+    "visits": "visits"
+  }
+}
diff --git a/client/locales/es.json b/client/locales/es.json
new file mode 100644
index 0000000..0967ef4
--- /dev/null
+++ b/client/locales/es.json
@@ -0,0 +1 @@
+{}
diff --git a/client/locales/fr.json b/client/locales/fr.json
new file mode 100644
index 0000000..0967ef4
--- /dev/null
+++ b/client/locales/fr.json
@@ -0,0 +1 @@
+{}
diff --git a/client/locales/index.ts b/client/locales/index.ts
new file mode 100644
index 0000000..54d0ab2
--- /dev/null
+++ b/client/locales/index.ts
@@ -0,0 +1,33 @@
+/**
+ * Supported languages.
+ *
+ * `complete: false` languages are selectable placeholders that currently
+ * fall back to English. To translate one, add keys to its JSON file in
+ * `client/locales/` and flip `complete` to `true`.
+ */
+export interface LanguageDef {
+    code: string
+    /** Name shown in the language switcher, written in its own script. */
+    name: string
+    /** True when the locale file contains a full translation. */
+    complete: boolean
+}
+
+export const LANGUAGES: LanguageDef[] = [
+    { code: 'en', name: 'English', complete: true },
+    { code: 'zh-CN', name: '简体中文', complete: true },
+    { code: 'zh-TW', name: '繁體中文', complete: true },
+    { code: 'ja', name: '日本語', complete: false },
+    { code: 'ko', name: '한국어', complete: false },
+    { code: 'fr', name: 'Français', complete: false },
+    { code: 'de', name: 'Deutsch', complete: false },
+    { code: 'es', name: 'Español', complete: false },
+]
+
+export const DEFAULT_LANGUAGE = 'en'
+
+export const LANGUAGE_STORAGE_KEY = 'jetlog-language'
+
+export function isSupportedLanguage(code: string | null | undefined): code is string {
+    return !!code && LANGUAGES.some((l) => l.code === code)
+}
diff --git a/client/locales/ja.json b/client/locales/ja.json
new file mode 100644
index 0000000..0967ef4
--- /dev/null
+++ b/client/locales/ja.json
@@ -0,0 +1 @@
+{}
diff --git a/client/locales/ko.json b/client/locales/ko.json
new file mode 100644
index 0000000..0967ef4
--- /dev/null
+++ b/client/locales/ko.json
@@ -0,0 +1 @@
+{}
diff --git a/client/locales/zh-CN.json b/client/locales/zh-CN.json
new file mode 100644
index 0000000..a9a8cc9
--- /dev/null
+++ b/client/locales/zh-CN.json
@@ -0,0 +1,265 @@
+{
+  "common": {
+    "loading": "加载中",
+    "close": "关闭",
+    "cancel": "取消",
+    "save": "保存",
+    "saving": "保存中…",
+    "create": "创建",
+    "edit": "编辑",
+    "delete": "删除",
+    "reset": "重置",
+    "apply": "应用",
+    "run": "运行",
+    "running": "运行中…",
+    "yes": "是",
+    "no": "否",
+    "search": "搜索...",
+    "searching": "搜索中...",
+    "noResults": "无结果",
+    "minChars": "至少输入 {{count}} 个字符",
+    "required": "必填",
+    "admin": "管理员",
+    "remove": "移除",
+    "back": "返回",
+    "menu": "菜单",
+    "navigation": "导航",
+    "logout": "退出登录",
+    "signedInAs": "已登录为",
+    "utc": "UTC",
+    "openMenu": "打开菜单",
+    "closeMenu": "关闭菜单",
+    "noData": "暂无数据"
+  },
+  "nav": {
+    "home": "首页",
+    "flights": "航班",
+    "newFlight": "新建航班",
+    "statistics": "统计",
+    "settings": "设置",
+    "dashboard": "仪表盘"
+  },
+  "login": {
+    "username": "用户名",
+    "password": "密码",
+    "rememberMe": "记住我",
+    "signIn": "登录",
+    "signingIn": "登录中…",
+    "incorrect": "用户名或密码错误",
+    "unable": "无法登录，请重试。"
+  },
+  "home": {
+    "flights": "航班",
+    "airports": "机场",
+    "hours": "小时",
+    "distance": "距离",
+    "countries": "国家/地区",
+    "recentFlights": "最近航班",
+    "allFlights": "全部航班",
+    "worldMap": "世界地图",
+    "mapSubtitle": "已访问机场与航线",
+    "noFlights": "还没有航班。",
+    "addFirstFlight": "添加第一个航班",
+    "km": "公里",
+    "mi": "英里"
+  },
+  "settings": {
+    "title": "设置",
+    "tabPreferences": "偏好",
+    "tabTable": "航班表格",
+    "tabData": "导入 / 导出",
+    "tabAccount": "账户",
+    "tabUsers": "用户",
+    "tabJobs": "任务",
+    "language": "语言",
+    "languageDescription": "选择应用使用的语言。标记为 WIP 的语言会回退到英语。",
+    "metricUnits": "公制单位",
+    "metricUnitsDesc": "距离使用公里而不是英里。",
+    "localAirportTime": "本地机场时区",
+    "localAirportTimeDesc": "使用每个机场的当地时间计算航班时长。",
+    "showVisitedCountries": "高亮已访问国家",
+    "showVisitedCountriesDesc": "在世界地图上填充已访问的国家。",
+    "frequencyBasedMarker": "基于频率的标记",
+    "frequencyBasedMarkerDesc": "根据访问次数缩放地图上的机场标记。",
+    "frequencyBasedLine": "基于频率的航线",
+    "frequencyBasedLineDesc": "根据飞行频率缩放航线粗细。",
+    "columnsOnAllFlights": "全部航班列",
+    "importFlights": "导入航班",
+    "myFlightradar24": "MyFlightRadar24",
+    "flighty": "Flighty",
+    "customCsv": "自定义 CSV",
+    "importing": "导入中…",
+    "import": "导入",
+    "pleaseChooseFile": "请至少选择一个文件。",
+    "exportFlights": "导出航班",
+    "exportDescription": "以下列格式之一下载您记录的所有航班。",
+    "exportCsv": "导出 CSV",
+    "exportIcal": "导出 iCal",
+    "yourAccount": "您的账户",
+    "username": "用户名",
+    "lastLogin": "最后登录",
+    "created": "创建时间",
+    "actions": "操作",
+    "editAccount": "编辑账户",
+    "logOut": "退出登录",
+    "newUser": "新用户",
+    "otherUsers": "{{count}} 个其他用户",
+    "noOtherUsers": "暂无其他用户。",
+    "editUser": "编辑 {{username}}",
+    "newUsername": "新用户名",
+    "newPassword": "新密码",
+    "leaveBlank": "留空以保持当前密码",
+    "createUser": "创建用户",
+    "deleteUserConfirm": "删除用户“{{username}}”及其所有航班？",
+    "maintenanceJobs": "维护任务",
+    "computeConnections": "计算航班衔接",
+    "computeConnectionsDesc": "查找现有航班之间的返程/后续衔接。",
+    "fetchMissingAirlines": "获取缺失的航司",
+    "fetchMissingAirlinesDesc": "为有机组编号但没有航司的航班查询航司。",
+    "jobResult": "{{label}}：更新 {{updated}}，跳过 {{skipped}}",
+    "connections": "衔接",
+    "airlines": "航司",
+    "languageName": "语言"
+  },
+  "allFlights": {
+    "title": "全部航班",
+    "noFlightsFound": "没有找到航班。",
+    "newFlight": "新建航班",
+    "filters": "筛选",
+    "noResults": "无结果",
+    "perPage": "每页",
+    "showing": "显示 {{start}}–{{end}}",
+    "page": "第 {{page}} 页",
+    "prev": "上一页",
+    "next": "下一页",
+    "startDate": "开始日期",
+    "endDate": "结束日期",
+    "user": "用户",
+    "anyUser": "任意用户",
+    "clearAll": "清除全部",
+    "from": "从 {{date}}",
+    "to": "至 {{date}}",
+    "userFilter": "用户 {{username}}",
+    "removeFilter": "移除筛选"
+  },
+  "newFlight": {
+    "title": "新建航班",
+    "manualEntry": "手动录入",
+    "flightNumber": "航班号",
+    "fetchPlaceholder": "例如 FR2460",
+    "fetch": "获取",
+    "fetching": "获取中…",
+    "fetchHint": "输入机组编号，我们将自动填充出发地、目的地和航司。",
+    "noRoute": "未找到该航班号的航线。",
+    "fetchFailed": "获取航班信息失败。",
+    "route": "航线",
+    "origin": "出发地",
+    "destination": "目的地",
+    "airline": "航司",
+    "searchAirports": "搜索机场...",
+    "searchAirlines": "搜索航司...",
+    "scheduleAircraft": "时刻与机型",
+    "date": "日期",
+    "departure": "出发",
+    "arrival": "到达",
+    "arrivalDate": "到达日期",
+    "airplane": "机型",
+    "tailNumber": "机尾编号",
+    "travelers": "同行人",
+    "yourDetails": "你的信息",
+    "selected": "已选 {{count}} 人",
+    "logFor": "为谁记录此航班",
+    "you": "（你）",
+    "traveler": "同行人：",
+    "seat": "座位",
+    "side": "座位侧",
+    "class": "舱位",
+    "purpose": "目的",
+    "notes": "备注",
+    "choose": "请选择",
+    "typeHere": "在此输入...",
+    "originRequired": "必须填写出发地和目的地。",
+    "travelerRequired": "至少需要一名同行人。",
+    "saveFailed": "保存航班失败。",
+    "cancel": "取消",
+    "saveFlight": "保存航班",
+    "saving": "保存中…"
+  },
+  "flightDetail": {
+    "allFlights": "全部航班",
+    "deleteConfirm": "删除此航班？",
+    "departureAirport": "出发机场",
+    "arrivalAirport": "到达机场",
+    "noAirportData": "无机场数据",
+    "noRouteData": "无航线数据",
+    "editDetails": "编辑详情",
+    "details": "详情",
+    "name": "名称",
+    "city": "城市",
+    "country": "国家",
+    "region": "地区",
+    "continent": "大洲",
+    "icaoIata": "ICAO / IATA",
+    "timezone": "时区",
+    "connection": "衔接航班",
+    "linkedFlight": "关联航班 #{{id}}",
+    "departureTime": "出发时间",
+    "arrivalTime": "到达时间",
+    "durationMin": "时长（分钟）",
+    "distance": "距离"
+  },
+  "columns": {
+    "visibleOf": "可见 {{visible}}/{{total}} 列",
+    "hint": "拖动行可排序 · 开关控制显示/隐藏 · 出发地和目的地为必填。",
+    "required": "必填",
+    "requiredColumn": "必填列",
+    "dragToReorder": "拖动排序",
+    "showColumn": "显示 {{label}}",
+    "date": "日期",
+    "origin": "出发地",
+    "destination": "目的地",
+    "departure": "出发",
+    "arrival": "到达",
+    "arrivalDate": "到达日期",
+    "duration": "时长",
+    "distance": "距离",
+    "seat": "座位",
+    "side": "座位侧",
+    "class": "舱位",
+    "purpose": "目的",
+    "airline": "航司",
+    "airplane": "机型",
+    "tailNumber": "机尾编号",
+    "flightNumber": "航班号",
+    "user": "用户",
+    "notes": "备注",
+    "connection": "衔接",
+    "flightId": "航班 ID"
+  },
+  "statistics": {
+    "title": "统计",
+    "filter": "筛选统计",
+    "last": "最近",
+    "allTime": "全部时间",
+    "days": "天",
+    "weeks": "周",
+    "months": "月",
+    "years": "年",
+    "flights": "航班",
+    "airports": "机场",
+    "hours": "小时",
+    "distance": "距离",
+    "countries": "国家/地区",
+    "km": "公里",
+    "mi": "英里",
+    "dayRange": "日期范围",
+    "flightsPerMonth": "每月航班",
+    "cumulativeDistance": "累计距离",
+    "seat": "座位",
+    "ticketClass": "舱位",
+    "mostVisitedAirports": "最常访问的机场",
+    "mostCommonCountries": "最常去的国家/地区",
+    "mostCommonAirlines": "最常乘坐的航司",
+    "visits": "次"
+  }
+}
diff --git a/client/locales/zh-TW.json b/client/locales/zh-TW.json
new file mode 100644
index 0000000..902af88
--- /dev/null
+++ b/client/locales/zh-TW.json
@@ -0,0 +1,265 @@
+{
+  "common": {
+    "loading": "載入中",
+    "close": "關閉",
+    "cancel": "取消",
+    "save": "儲存",
+    "saving": "儲存中…",
+    "create": "建立",
+    "edit": "編輯",
+    "delete": "刪除",
+    "reset": "重設",
+    "apply": "套用",
+    "run": "執行",
+    "running": "執行中…",
+    "yes": "是",
+    "no": "否",
+    "search": "搜尋...",
+    "searching": "搜尋中...",
+    "noResults": "無結果",
+    "minChars": "至少輸入 {{count}} 個字元",
+    "required": "必填",
+    "admin": "管理員",
+    "remove": "移除",
+    "back": "返回",
+    "menu": "選單",
+    "navigation": "導覽",
+    "logout": "登出",
+    "signedInAs": "已登入為",
+    "utc": "UTC",
+    "openMenu": "開啟選單",
+    "closeMenu": "關閉選單",
+    "noData": "暫無資料"
+  },
+  "nav": {
+    "home": "首頁",
+    "flights": "航班",
+    "newFlight": "新增航班",
+    "statistics": "統計",
+    "settings": "設定",
+    "dashboard": "儀表板"
+  },
+  "login": {
+    "username": "使用者名稱",
+    "password": "密碼",
+    "rememberMe": "記住我",
+    "signIn": "登入",
+    "signingIn": "登入中…",
+    "incorrect": "使用者名稱或密碼錯誤",
+    "unable": "無法登入，請重試。"
+  },
+  "home": {
+    "flights": "航班",
+    "airports": "機場",
+    "hours": "小時",
+    "distance": "距離",
+    "countries": "國家/地區",
+    "recentFlights": "最近航班",
+    "allFlights": "全部航班",
+    "worldMap": "世界地圖",
+    "mapSubtitle": "已造訪機場與航線",
+    "noFlights": "尚無航班。",
+    "addFirstFlight": "新增第一筆航班",
+    "km": "公里",
+    "mi": "英里"
+  },
+  "settings": {
+    "title": "設定",
+    "tabPreferences": "偏好",
+    "tabTable": "航班表格",
+    "tabData": "匯入 / 匯出",
+    "tabAccount": "帳戶",
+    "tabUsers": "使用者",
+    "tabJobs": "任務",
+    "language": "語言",
+    "languageDescription": "選擇應用程式使用的語言。標記為 WIP 的語言會回退到英文。",
+    "metricUnits": "公制單位",
+    "metricUnitsDesc": "距離使用公里而非英里。",
+    "localAirportTime": "本地機場時區",
+    "localAirportTimeDesc": "使用每個機場的當地時間計算航班時長。",
+    "showVisitedCountries": "標示已造訪國家",
+    "showVisitedCountriesDesc": "在世界地圖上填滿已造訪的國家。",
+    "frequencyBasedMarker": "依頻率縮放標記",
+    "frequencyBasedMarkerDesc": "依造訪次數縮放地圖上的機場標記。",
+    "frequencyBasedLine": "依頻率縮放航線",
+    "frequencyBasedLineDesc": "依飛行頻率調整航線粗細。",
+    "columnsOnAllFlights": "全部航班欄位",
+    "importFlights": "匯入航班",
+    "myFlightradar24": "MyFlightRadar24",
+    "flighty": "Flighty",
+    "customCsv": "自訂 CSV",
+    "importing": "匯入中…",
+    "import": "匯入",
+    "pleaseChooseFile": "請至少選擇一個檔案。",
+    "exportFlights": "匯出航班",
+    "exportDescription": "以下列格式之一下載您記錄的所有航班。",
+    "exportCsv": "匯出 CSV",
+    "exportIcal": "匯出 iCal",
+    "yourAccount": "您的帳戶",
+    "username": "使用者名稱",
+    "lastLogin": "最後登入",
+    "created": "建立時間",
+    "actions": "操作",
+    "editAccount": "編輯帳戶",
+    "logOut": "登出",
+    "newUser": "新增使用者",
+    "otherUsers": "{{count}} 個其他使用者",
+    "noOtherUsers": "尚無其他使用者。",
+    "editUser": "編輯 {{username}}",
+    "newUsername": "新使用者名稱",
+    "newPassword": "新密碼",
+    "leaveBlank": "留空以維持目前密碼",
+    "createUser": "建立使用者",
+    "deleteUserConfirm": "刪除使用者「{{username}}」及其所有航班？",
+    "maintenanceJobs": "維護任務",
+    "computeConnections": "計算航班銜接",
+    "computeConnectionsDesc": "尋找現有航班之間的返程/後續銜接。",
+    "fetchMissingAirlines": "取得遺漏的航空公司",
+    "fetchMissingAirlinesDesc": "為有機組編號但沒有航空公司的航班查詢航空公司。",
+    "jobResult": "{{label}}：已更新 {{updated}}，已略過 {{skipped}}",
+    "connections": "銜接",
+    "airlines": "航空公司",
+    "languageName": "語言"
+  },
+  "allFlights": {
+    "title": "全部航班",
+    "noFlightsFound": "找不到航班。",
+    "newFlight": "新增航班",
+    "filters": "篩選",
+    "noResults": "無結果",
+    "perPage": "每頁",
+    "showing": "顯示 {{start}}–{{end}}",
+    "page": "第 {{page}} 頁",
+    "prev": "上一頁",
+    "next": "下一頁",
+    "startDate": "開始日期",
+    "endDate": "結束日期",
+    "user": "使用者",
+    "anyUser": "任何使用者",
+    "clearAll": "全部清除",
+    "from": "從 {{date}}",
+    "to": "至 {{date}}",
+    "userFilter": "使用者 {{username}}",
+    "removeFilter": "移除篩選"
+  },
+  "newFlight": {
+    "title": "新增航班",
+    "manualEntry": "手動輸入",
+    "flightNumber": "航班號碼",
+    "fetchPlaceholder": "例如 FR2460",
+    "fetch": "取得",
+    "fetching": "取得中…",
+    "fetchHint": "輸入機組編號，我們會自動填入出發地、目的地與航空公司。",
+    "noRoute": "找不到該航班號碼的航線。",
+    "fetchFailed": "取得航班資訊失敗。",
+    "route": "航線",
+    "origin": "出發地",
+    "destination": "目的地",
+    "airline": "航空公司",
+    "searchAirports": "搜尋機場...",
+    "searchAirlines": "搜尋航空公司...",
+    "scheduleAircraft": "時刻與機型",
+    "date": "日期",
+    "departure": "出發",
+    "arrival": "到達",
+    "arrivalDate": "到達日期",
+    "airplane": "機型",
+    "tailNumber": "機尾編號",
+    "travelers": "同行者",
+    "yourDetails": "您的資料",
+    "selected": "已選 {{count}} 人",
+    "logFor": "為誰記錄此航班",
+    "you": "（您）",
+    "traveler": "同行者：",
+    "seat": "座位",
+    "side": "座位側",
+    "class": "艙等",
+    "purpose": "目的",
+    "notes": "備註",
+    "choose": "請選擇",
+    "typeHere": "在此輸入...",
+    "originRequired": "必須填寫出發地與目的地。",
+    "travelerRequired": "至少需要一名同行者。",
+    "saveFailed": "儲存航班失敗。",
+    "cancel": "取消",
+    "saveFlight": "儲存航班",
+    "saving": "儲存中…"
+  },
+  "flightDetail": {
+    "allFlights": "全部航班",
+    "deleteConfirm": "刪除此航班？",
+    "departureAirport": "出發機場",
+    "arrivalAirport": "到達機場",
+    "noAirportData": "無機場資料",
+    "noRouteData": "無航線資料",
+    "editDetails": "編輯詳細資料",
+    "details": "詳細資料",
+    "name": "名稱",
+    "city": "城市",
+    "country": "國家",
+    "region": "地區",
+    "continent": "洲",
+    "icaoIata": "ICAO / IATA",
+    "timezone": "時區",
+    "connection": "銜接航班",
+    "linkedFlight": "關聯航班 #{{id}}",
+    "departureTime": "出發時間",
+    "arrivalTime": "到達時間",
+    "durationMin": "時長（分鐘）",
+    "distance": "距離"
+  },
+  "columns": {
+    "visibleOf": "可見 {{visible}}/{{total}} 欄",
+    "hint": "拖曳列可排序 · 開關控制顯示/隱藏 · 出發地與目的地為必填。",
+    "required": "必填",
+    "requiredColumn": "必填欄位",
+    "dragToReorder": "拖曳排序",
+    "showColumn": "顯示 {{label}}",
+    "date": "日期",
+    "origin": "出發地",
+    "destination": "目的地",
+    "departure": "出發",
+    "arrival": "到達",
+    "arrivalDate": "到達日期",
+    "duration": "時長",
+    "distance": "距離",
+    "seat": "座位",
+    "side": "座位側",
+    "class": "艙等",
+    "purpose": "目的",
+    "airline": "航空公司",
+    "airplane": "機型",
+    "tailNumber": "機尾編號",
+    "flightNumber": "航班號碼",
+    "user": "使用者",
+    "notes": "備註",
+    "connection": "銜接",
+    "flightId": "航班 ID"
+  },
+  "statistics": {
+    "title": "統計",
+    "filter": "篩選統計",
+    "last": "最近",
+    "allTime": "全部時間",
+    "days": "天",
+    "weeks": "週",
+    "months": "月",
+    "years": "年",
+    "flights": "航班",
+    "airports": "機場",
+    "hours": "小時",
+    "distance": "距離",
+    "countries": "國家/地區",
+    "km": "公里",
+    "mi": "英里",
+    "dayRange": "日期範圍",
+    "flightsPerMonth": "每月航班",
+    "cumulativeDistance": "累計距離",
+    "seat": "座位",
+    "ticketClass": "艙等",
+    "mostVisitedAirports": "最常造訪的機場",
+    "mostCommonCountries": "最常前往的國家/地區",
+    "mostCommonAirlines": "最常搭乘的航空公司",
+    "visits": "次"
+  }
+}
diff --git a/client/main.tsx b/client/main.tsx
index a09d43b..a825dfa 100644
--- a/client/main.tsx
+++ b/client/main.tsx
@@ -5,6 +5,7 @@ import { App } from './App'
 import TokenStorage from './storage/tokenStorage'
 import './style.css'
 import './fonts.css'
+import './i18n'
 
 TokenStorage.loadStoredToken()
 
diff --git a/client/pages/AllFlights.tsx b/client/pages/AllFlights.tsx
index 15cc7d2..755eaff 100644
--- a/client/pages/AllFlights.tsx
+++ b/client/pages/AllFlights.tsx
@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react'
 import { Link, useSearchParams } from 'react-router-dom'
 import { Plus, ChevronLeft, ChevronRight } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
 import type { SortingState } from '@tanstack/react-table'
 
 import { FlightsTable } from '@/components/flights/FlightsTable'
@@ -28,6 +29,7 @@ export default function AllFlights() {
 
 function FlightsListPage() {
     const metric = ConfigStorage.getSetting('metricUnits') !== 'false'
+    const { t } = useTranslation()
     const [filters, setFilters] = useState<FlightsFilters>({})
     const [sorting, setSorting] = useState<SortingState>([{ id: 'date', desc: true }])
     const [pageSize, setPageSize] = useState(20)
@@ -70,10 +72,10 @@ function FlightsListPage() {
     return (
         <div className="max-w-7xl mx-auto p-4 md:p-6">
             <div className="flex items-center justify-between mb-4">
-                <h1 className="font-mono uppercase tracking-board text-base">All flights</h1>
+                <h1 className="font-mono uppercase tracking-board text-base">{t('allFlights.title')}</h1>
                 <Button asChild variant="accent" size="sm">
                     <Link to="/new">
-                        <Plus size={13} /> New flight
+                        <Plus size={13} /> {t('allFlights.newFlight')}
                     </Link>
                 </Button>
             </div>
@@ -93,7 +95,7 @@ function FlightsListPage() {
 
             <div className="flex items-center justify-between gap-3 mt-3 flex-wrap">
                 <div className="flex items-center gap-2">
-                    <label className="board-label text-ink-muted">Per page</label>
+                    <label className="board-label text-ink-muted">{t('allFlights.perPage')}</label>
                     <Select
                         value={pageSize}
                         onChange={(e) => setPageSize(Number(e.target.value))}
@@ -108,7 +110,9 @@ function FlightsListPage() {
                 </div>
 
                 <p className="text-xs font-mono text-ink-muted tabular-nums">
-                    {showingCount > 0 ? `Showing ${start}–${end}` : 'No results'}
+                    {showingCount > 0
+                        ? t('allFlights.showing', { start, end })
+                        : t('allFlights.noResults')}
                 </p>
 
                 <div className="flex items-center gap-2">
@@ -118,10 +122,10 @@ function FlightsListPage() {
                         onClick={() => setPage((p) => Math.max(0, p - 1))}
                         disabled={page === 0 || isFetching}
                     >
-                        <ChevronLeft size={13} /> Prev
+                        <ChevronLeft size={13} /> {t('allFlights.prev')}
                     </Button>
                     <span className="board-label text-ink-muted tabular-nums px-2">
-                        Page {page + 1}
+                        {t('allFlights.page', { page: page + 1 })}
                     </span>
                     <Button
                         variant="outline"
@@ -129,7 +133,7 @@ function FlightsListPage() {
                         onClick={() => setPage((p) => p + 1)}
                         disabled={!hasNext || isFetching}
                     >
-                        Next <ChevronRight size={13} />
+                        {t('allFlights.next')} <ChevronRight size={13} />
                     </Button>
                 </div>
             </div>
diff --git a/client/pages/Home.tsx b/client/pages/Home.tsx
index 52bd3d7..3d5f8c2 100644
--- a/client/pages/Home.tsx
+++ b/client/pages/Home.tsx
@@ -1,6 +1,7 @@
 import { lazy, Suspense } from 'react'
 import { Link } from 'react-router-dom'
 import { ArrowRight, Plane } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
 
 import { useCurrentUser, useFlights, useStatistics } from '@/lib/queries'
 
@@ -41,6 +42,7 @@ function StatCell({ label, value, unit, delay = 0 }: StatCellProps) {
 
 function CountersStrip() {
     const metric = ConfigStorage.getSetting('metricUnits') !== 'false'
+    const { t } = useTranslation()
     const { data: me } = useCurrentUser()
     const { data: stats, isLoading } = useStatistics(
         { metric, username: me?.username },
@@ -58,21 +60,21 @@ function CountersStrip() {
     return (
         <Panel className="overflow-x-auto">
             <div className="flex divide-x divide-rule min-w-max">
-                <StatCell label="Flights" value={formatNumber(stats.totalFlights)} delay={0} />
-                <StatCell label="Airports" value={formatNumber(stats.totalUniqueAirports)} delay={80} />
+                <StatCell label={t('home.flights')} value={formatNumber(stats.totalFlights)} delay={0} />
+                <StatCell label={t('home.airports')} value={formatNumber(stats.totalUniqueAirports)} delay={80} />
                 <StatCell
-                    label="Hours"
+                    label={t('home.hours')}
                     value={formatNumber(Math.round(stats.totalDuration / 60))}
                     delay={160}
                 />
                 <StatCell
-                    label="Distance"
+                    label={t('home.distance')}
                     value={formatNumber(stats.totalDistance)}
-                    unit={metric ? 'km' : 'mi'}
+                    unit={metric ? t('home.km') : t('home.mi')}
                     delay={240}
                 />
                 <StatCell
-                    label="Countries"
+                    label={t('home.countries')}
                     value={formatNumber(stats.visitedCountries)}
                     delay={320}
                 />
@@ -112,6 +114,7 @@ function RecentFlightRow({ flight }: { flight: Flight }) {
 
 function RecentFlights() {
     const { data: me } = useCurrentUser()
+    const { t } = useTranslation()
     const { data: flights, isLoading } = useFlights({
         limit: 5,
         sort: 'date',
@@ -122,12 +125,12 @@ function RecentFlights() {
     return (
         <Panel>
             <PanelHeader>
-                <PanelTitle>Recent flights</PanelTitle>
+                <PanelTitle>{t('home.recentFlights')}</PanelTitle>
                 <Link
                     to="/flights"
                     className="board-label text-ink-muted hover:text-ink flex items-center gap-1"
                 >
-                    All flights <ArrowRight size={12} />
+                    {t('home.allFlights')} <ArrowRight size={12} />
                 </Link>
             </PanelHeader>
             {isLoading ? (
@@ -143,7 +146,11 @@ function RecentFlights() {
             ) : (
                 <PanelBody className="text-center text-ink-muted text-sm py-10">
                     <Plane className="mx-auto mb-2 text-ink-faint" size={28} strokeWidth={1.5} />
-                    No flights yet. <Link to="/new" className="text-accent-deep underline">Add your first flight</Link>.
+                    {t('home.noFlights')}{' '}
+                    <Link to="/new" className="text-accent-deep underline">
+                        {t('home.addFirstFlight')}
+                    </Link>
+                    .
                 </PanelBody>
             )}
         </Panel>
@@ -151,15 +158,17 @@ function RecentFlights() {
 }
 
 export default function Home() {
+    const { t } = useTranslation()
+
     return (
         <div className="p-4 md:p-6 space-y-4 md:space-y-6 max-w-7xl mx-auto">
             <CountersStrip />
 
             <Panel>
                 <PanelHeader>
-                    <PanelTitle>World map</PanelTitle>
+                    <PanelTitle>{t('home.worldMap')}</PanelTitle>
                     <span className="board-label text-ink-muted hidden sm:inline">
-                        Visited airports & routes
+                        {t('home.mapSubtitle')}
                     </span>
                 </PanelHeader>
                 <Suspense
diff --git a/client/pages/Login.tsx b/client/pages/Login.tsx
index b31fa5d..8e97cc8 100644
--- a/client/pages/Login.tsx
+++ b/client/pages/Login.tsx
@@ -1,6 +1,7 @@
 import { useState, type FormEvent } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { useTranslation } from 'react-i18next'
 
 import API from '@/api'
 import TokenStorage from '@/storage/tokenStorage'
@@ -12,6 +13,7 @@ import { Switch } from '@/components/ui/Switch'
 export default function Login() {
     const navigate = useNavigate()
     const qc = useQueryClient()
+    const { t } = useTranslation()
     const [remember, setRemember] = useState(false)
     const [error, setError] = useState<string | null>(null)
 
@@ -24,9 +26,9 @@ export default function Login() {
         },
         onError: (err: any) => {
             if (err?.response?.status === 401) {
-                setError('Incorrect username or password')
+                setError(t('login.incorrect'))
             } else {
-                setError('Unable to log in. Please try again.')
+                setError(t('login.unable'))
             }
         },
     })
@@ -46,7 +48,7 @@ export default function Login() {
 
                 <form onSubmit={handleSubmit} className="space-y-4">
                     <div>
-                        <Label htmlFor="username">Username</Label>
+                        <Label htmlFor="username">{t('login.username')}</Label>
                         <Input
                             id="username"
                             name="username"
@@ -58,7 +60,7 @@ export default function Login() {
                     </div>
 
                     <div>
-                        <Label htmlFor="password">Password</Label>
+                        <Label htmlFor="password">{t('login.password')}</Label>
                         <Input
                             id="password"
                             name="password"
@@ -77,7 +79,7 @@ export default function Login() {
                             checked={remember}
                             onCheckedChange={setRemember}
                         />
-                        Remember me
+                        {t('login.rememberMe')}
                     </label>
 
                     {error && (
@@ -93,7 +95,7 @@ export default function Login() {
                         className="w-full"
                         disabled={login.isPending}
                     >
-                        {login.isPending ? 'Signing in…' : 'Sign in'}
+                        {login.isPending ? t('login.signingIn') : t('login.signIn')}
                     </Button>
                 </form>
             </div>
diff --git a/client/pages/New.tsx b/client/pages/New.tsx
index 300b6d7..2472553 100644
--- a/client/pages/New.tsx
+++ b/client/pages/New.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState, type FormEvent } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { useQueryClient } from '@tanstack/react-query'
 import { Plane, Radio, Loader2 } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
 
 import API, { ENABLE_EXTERNAL_APIS } from '@/api'
 import {
@@ -57,6 +58,7 @@ interface SharedFields {
 export default function NewFlight() {
     const navigate = useNavigate()
     const qc = useQueryClient()
+    const { t } = useTranslation()
     const localAirportTime = ConfigStorage.getSetting('localAirportTime') === 'true'
 
     const { data: me } = useCurrentUser()
@@ -135,7 +137,7 @@ export default function NewFlight() {
             )
             const route = data?.response?.flightroute
             if (!route) {
-                setError('No route found for that flight number.')
+                setError(t('newFlight.noRoute'))
                 return
             }
             const [origin, destination, airline] = await Promise.all([
@@ -145,7 +147,7 @@ export default function NewFlight() {
             ])
             setShared((s) => ({ ...s, origin, destination, airline }))
         } catch {
-            setError('Failed to fetch flight info.')
+            setError(t('newFlight.fetchFailed'))
         } finally {
             setFetching(false)
         }
@@ -156,12 +158,12 @@ export default function NewFlight() {
         setError(null)
 
         if (!shared.origin || !shared.destination) {
-            setError('Origin and destination are required.')
+            setError(t('newFlight.originRequired'))
             return
         }
         const usernames = Object.keys(travelers)
         if (usernames.length === 0) {
-            setError('At least one traveler is required.')
+            setError(t('newFlight.travelerRequired'))
             return
         }
 
@@ -198,7 +200,7 @@ export default function NewFlight() {
             qc.invalidateQueries({ queryKey: ['flights'] })
             navigate(`/flights?id=${flightId}`)
         } catch {
-            setError('Failed to save flight.')
+            setError(t('newFlight.saveFailed'))
         } finally {
             setSubmitting(false)
         }
@@ -210,10 +212,10 @@ export default function NewFlight() {
     return (
         <form onSubmit={handleSubmit} className="max-w-5xl mx-auto p-4 md:p-6 space-y-4 md:space-y-6">
             <div className="flex items-center justify-between">
-                <h1 className="font-mono uppercase tracking-board text-base">New flight</h1>
+                <h1 className="font-mono uppercase tracking-board text-base">{t('newFlight.title')}</h1>
                 <Badge variant="muted">
                     <Plane size={11} className="mr-1" />
-                    Manual entry
+                    {t('newFlight.manualEntry')}
                 </Badge>
             </div>
 
@@ -221,10 +223,10 @@ export default function NewFlight() {
             {ENABLE_EXTERNAL_APIS && (
                 <Panel className="border-ink/20">
                     <PanelBody className="!py-4">
-                        <Label>Flight number</Label>
+                        <Label>{t('newFlight.flightNumber')}</Label>
                         <div className="flex gap-2">
                             <Input
-                                placeholder="e.g. FR2460"
+                                placeholder={t('newFlight.fetchPlaceholder')}
                                 value={shared.flightNumber}
                                 maxLength={7}
                                 onChange={(e) =>
@@ -244,11 +246,11 @@ export default function NewFlight() {
                                 ) : (
                                     <Radio size={14} />
                                 )}
-                                {fetching ? 'Fetching…' : 'Fetch'}
+                                {fetching ? t('newFlight.fetching') : t('newFlight.fetch')}
                             </Button>
                         </div>
                         <p className="text-xs text-ink-muted font-mono mt-1.5">
-                            Enter a callsign and we'll pre-fill origin, destination & airline.
+                            {t('newFlight.fetchHint')}
                         </p>
                     </PanelBody>
                 </Panel>
@@ -258,13 +260,13 @@ export default function NewFlight() {
                 {/* Route */}
                 <Panel>
                     <PanelHeader>
-                        <PanelTitle>Route</PanelTitle>
+                        <PanelTitle>{t('newFlight.route')}</PanelTitle>
                     </PanelHeader>
                     <PanelBody className="space-y-3">
                         <div>
-                            <Label required>Origin</Label>
+                            <Label required>{t('newFlight.origin')}</Label>
                             <Combobox<Airport>
-                                placeholder="Search airports..."
+                                placeholder={t('newFlight.searchAirports')}
                                 displayValue={
                                     shared.origin
                                         ? `${shared.origin.iata || shared.origin.icao} · ${shared.origin.municipality}`
@@ -275,9 +277,9 @@ export default function NewFlight() {
                             />
                         </div>
                         <div>
-                            <Label required>Destination</Label>
+                            <Label required>{t('newFlight.destination')}</Label>
                             <Combobox<Airport>
-                                placeholder="Search airports..."
+                                placeholder={t('newFlight.searchAirports')}
                                 displayValue={
                                     shared.destination
                                         ? `${shared.destination.iata || shared.destination.icao} · ${shared.destination.municipality}`
@@ -288,9 +290,9 @@ export default function NewFlight() {
                             />
                         </div>
                         <div>
-                            <Label>Airline</Label>
+                            <Label>{t('newFlight.airline')}</Label>
                             <Combobox<Airline>
-                                placeholder="Search airlines..."
+                                placeholder={t('newFlight.searchAirlines')}
                                 displayValue={
                                     shared.airline
                                         ? `${shared.airline.iata || shared.airline.icao} · ${shared.airline.name}`
@@ -306,11 +308,11 @@ export default function NewFlight() {
                 {/* Schedule + aircraft */}
                 <Panel>
                     <PanelHeader>
-                        <PanelTitle>Schedule & aircraft</PanelTitle>
+                        <PanelTitle>{t('newFlight.scheduleAircraft')}</PanelTitle>
                     </PanelHeader>
                     <PanelBody className="space-y-3">
                         <div>
-                            <Label required>Date</Label>
+                            <Label required>{t('newFlight.date')}</Label>
                             <Input
                                 type="date"
                                 value={shared.date}
@@ -320,7 +322,7 @@ export default function NewFlight() {
                         </div>
                         <div className="grid grid-cols-2 gap-3">
                             <div>
-                                <Label>Departure</Label>
+                                <Label>{t('newFlight.departure')}</Label>
                                 <Input
                                     type="time"
                                     value={shared.departureTime}
@@ -328,7 +330,7 @@ export default function NewFlight() {
                                 />
                             </div>
                             <div>
-                                <Label>Arrival</Label>
+                                <Label>{t('newFlight.arrival')}</Label>
                                 <Input
                                     type="time"
                                     value={shared.arrivalTime}
@@ -337,7 +339,7 @@ export default function NewFlight() {
                             </div>
                         </div>
                         <div>
-                            <Label>Arrival date</Label>
+                            <Label>{t('newFlight.arrivalDate')}</Label>
                             <Input
                                 type="date"
                                 value={shared.arrivalDate}
@@ -346,7 +348,7 @@ export default function NewFlight() {
                         </div>
                         <div className="grid grid-cols-2 gap-3">
                             <div>
-                                <Label>Airplane</Label>
+                                <Label>{t('newFlight.airplane')}</Label>
                                 <Input
                                     placeholder="B738"
                                     maxLength={16}
@@ -355,7 +357,7 @@ export default function NewFlight() {
                                 />
                             </div>
                             <div>
-                                <Label>Tail number</Label>
+                                <Label>{t('newFlight.tailNumber')}</Label>
                                 <Input
                                     placeholder="EI-DCL"
                                     maxLength={16}
@@ -372,22 +374,22 @@ export default function NewFlight() {
             <Panel>
                 <PanelHeader>
                     <PanelTitle>
-                        {isAdmin ? 'Travelers' : 'Your details'}
+                        {isAdmin ? t('newFlight.travelers') : t('newFlight.yourDetails')}
                     </PanelTitle>
                     {isAdmin && (
                         <span className="board-label text-ink-muted">
-                            {Object.keys(travelers).length} selected
+                            {t('newFlight.selected', { count: Object.keys(travelers).length })}
                         </span>
                     )}
                 </PanelHeader>
                 <PanelBody className="space-y-4">
                     {isAdmin && otherUsers.length > 0 && (
                         <div>
-                            <Label>Log this flight for</Label>
+                            <Label>{t('newFlight.logFor')}</Label>
                             <div className="flex flex-wrap gap-2 mt-1">
                                 {me && (
                                     <Badge variant="accent">
-                                        {me.username} (you)
+                                        {me.username} {t('newFlight.you')}
                                     </Badge>
                                 )}
                                 {otherUsers.map((u) => {
@@ -415,7 +417,7 @@ export default function NewFlight() {
                         {Object.entries(travelers).map(([username, extras]) => (
                             <div key={username} className="border border-rule p-4">
                                 <div className="board-label mb-3">
-                                    Traveler: <span className="text-ink">{username}</span>
+                                    {t('newFlight.traveler')} <span className="text-ink">{username}</span>
                                 </div>
                                 <TravelerForm
                                     extras={extras}
@@ -440,10 +442,10 @@ export default function NewFlight() {
                     onClick={() => navigate(-1)}
                     disabled={submitting}
                 >
-                    Cancel
+                    {t('newFlight.cancel')}
                 </Button>
                 <Button type="submit" variant="accent" size="lg" disabled={submitting}>
-                    {submitting ? 'Saving…' : 'Save flight'}
+                    {submitting ? t('newFlight.saving') : t('newFlight.saveFlight')}
                 </Button>
             </div>
         </form>
@@ -457,68 +459,70 @@ function TravelerForm({
     extras: TravelerExtras
     onChange: (p: Partial<TravelerExtras>) => void
 }) {
+    const { t } = useTranslation()
+
     return (
         <div className="space-y-3">
             <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
                 <div>
-                    <Label>Seat</Label>
+                    <Label>{t('newFlight.seat')}</Label>
                     <Select
                         value={extras.seat}
                         onChange={(e) => onChange({ seat: e.target.value })}
                     >
                         {SEAT_OPTIONS.map((o) => (
                             <option key={o} value={o}>
-                                {o || 'Choose'}
+                                {o || t('newFlight.choose')}
                             </option>
                         ))}
                     </Select>
                 </div>
                 <div>
-                    <Label>Side</Label>
+                    <Label>{t('newFlight.side')}</Label>
                     <Select
                         value={extras.aircraftSide}
                         onChange={(e) => onChange({ aircraftSide: e.target.value })}
                     >
                         {AIRCRAFT_SIDES.map((o) => (
                             <option key={o} value={o}>
-                                {o || 'Choose'}
+                                {o || t('newFlight.choose')}
                             </option>
                         ))}
                     </Select>
                 </div>
                 <div>
-                    <Label>Class</Label>
+                    <Label>{t('newFlight.class')}</Label>
                     <Select
                         value={extras.ticketClass}
                         onChange={(e) => onChange({ ticketClass: e.target.value })}
                     >
                         {CLASSES.map((o) => (
                             <option key={o} value={o}>
-                                {o || 'Choose'}
+                                {o || t('newFlight.choose')}
                             </option>
                         ))}
                     </Select>
                 </div>
                 <div>
-                    <Label>Purpose</Label>
+                    <Label>{t('newFlight.purpose')}</Label>
                     <Select
                         value={extras.purpose}
                         onChange={(e) => onChange({ purpose: e.target.value })}
                     >
                         {PURPOSES.map((o) => (
                             <option key={o} value={o}>
-                                {o || 'Choose'}
+                                {o || t('newFlight.choose')}
                             </option>
                         ))}
                     </Select>
                 </div>
             </div>
             <div>
-                <Label>Notes</Label>
+                <Label>{t('newFlight.notes')}</Label>
                 <textarea
                     rows={2}
                     maxLength={150}
-                    placeholder="Type here..."
+                    placeholder={t('newFlight.typeHere')}
                     value={extras.notes}
                     onChange={(e) => onChange({ notes: e.target.value })}
                     className="w-full bg-paper border border-rule px-3 py-2 font-mono text-sm focus:border-ink focus:outline-none"
diff --git a/client/pages/Settings.tsx b/client/pages/Settings.tsx
index f8d45f3..39348e6 100644
--- a/client/pages/Settings.tsx
+++ b/client/pages/Settings.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState, type FormEvent } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { useTranslation } from 'react-i18next'
 import {
     LogOut,
     Trash2,
@@ -32,55 +33,56 @@ import { Spinner } from '@/components/ui/Spinner'
 
 interface PrefDef {
     key: keyof ConfigInterface
-    label: string
-    description: string
+    labelKey: string
+    descriptionKey: string
 }
 
 const PREFS: PrefDef[] = [
     {
         key: 'metricUnits',
-        label: 'Metric units',
-        description: 'Use kilometers instead of miles for distance.',
+        labelKey: 'settings.metricUnits',
+        descriptionKey: 'settings.metricUnitsDesc',
     },
     {
         key: 'localAirportTime',
-        label: 'Local airport timezone',
-        description: 'Compute flight duration using each airport\'s local time.',
+        labelKey: 'settings.localAirportTime',
+        descriptionKey: 'settings.localAirportTimeDesc',
     },
     {
         key: 'showVisitedCountries',
-        label: 'Highlight visited countries',
-        description: 'Fill visited countries on the world map.',
+        labelKey: 'settings.showVisitedCountries',
+        descriptionKey: 'settings.showVisitedCountriesDesc',
     },
     {
         key: 'frequencyBasedMarker',
-        label: 'Frequency-based markers',
-        description: 'Scale airport markers on the map by visit count.',
+        labelKey: 'settings.frequencyBasedMarker',
+        descriptionKey: 'settings.frequencyBasedMarkerDesc',
     },
     {
         key: 'frequencyBasedLine',
-        label: 'Frequency-based flight lines',
-        description: 'Scale flight path thickness by trip frequency.',
+        labelKey: 'settings.frequencyBasedLine',
+        descriptionKey: 'settings.frequencyBasedLineDesc',
     },
 ]
 
 export default function Settings() {
     const { data: me } = useCurrentUser()
+    const { t } = useTranslation()
 
     return (
         <div className="max-w-5xl mx-auto p-4 md:p-6">
-            <h1 className="font-mono uppercase tracking-board text-base mb-4">Settings</h1>
+            <h1 className="font-mono uppercase tracking-board text-base mb-4">{t('settings.title')}</h1>
 
             <Tabs defaultValue="preferences">
                 <TabsList>
-                    <TabsTrigger value="preferences">Preferences</TabsTrigger>
-                    <TabsTrigger value="table">Flights table</TabsTrigger>
-                    <TabsTrigger value="data">Import / Export</TabsTrigger>
-                    <TabsTrigger value="account">Account</TabsTrigger>
+                    <TabsTrigger value="preferences">{t('settings.tabPreferences')}</TabsTrigger>
+                    <TabsTrigger value="table">{t('settings.tabTable')}</TabsTrigger>
+                    <TabsTrigger value="data">{t('settings.tabData')}</TabsTrigger>
+                    <TabsTrigger value="account">{t('settings.tabAccount')}</TabsTrigger>
                     {me?.isAdmin && (
                         <>
-                            <TabsTrigger value="users">Users</TabsTrigger>
-                            <TabsTrigger value="jobs">Jobs</TabsTrigger>
+                            <TabsTrigger value="users">{t('settings.tabUsers')}</TabsTrigger>
+                            <TabsTrigger value="jobs">{t('settings.tabJobs')}</TabsTrigger>
                         </>
                     )}
                 </TabsList>
@@ -91,7 +93,7 @@ export default function Settings() {
                 <TabsContent value="table">
                     <Panel>
                         <PanelHeader>
-                            <PanelTitle>Columns on All Flights</PanelTitle>
+                            <PanelTitle>{t('settings.columnsOnAllFlights')}</PanelTitle>
                         </PanelHeader>
                         <PanelBody>
                             <ColumnsManager />
@@ -123,6 +125,7 @@ export default function Settings() {
 
 function PreferencesPanel() {
     const [opts, setOpts] = useState<ConfigInterface>(() => ConfigStorage.getAllSettings())
+    const { t } = useTranslation()
 
     const toggle = (key: keyof ConfigInterface, value: boolean) => {
         const v = value.toString()
@@ -139,15 +142,15 @@ function PreferencesPanel() {
                         className="flex items-start justify-between gap-4 px-4 py-4"
                     >
                         <div className="min-w-0">
-                            <Label className="mb-0.5">{p.label}</Label>
+                            <Label className="mb-0.5">{t(p.labelKey)}</Label>
                             <p className="text-xs text-ink-muted font-mono">
-                                {p.description}
+                                {t(p.descriptionKey)}
                             </p>
                         </div>
                         <Switch
                             checked={opts[p.key] === 'true'}
                             onCheckedChange={(v) => toggle(p.key, v)}
-                            aria-label={p.label}
+                            aria-label={t(p.labelKey)}
                         />
                     </div>
                 ))}
@@ -162,6 +165,7 @@ function DataPanel() {
     const navigate = useNavigate()
     const [importing, setImporting] = useState(false)
     const [error, setError] = useState<string | null>(null)
+    const { t } = useTranslation()
 
     const handleImport = async (e: FormEvent<HTMLFormElement>) => {
         e.preventDefault()
@@ -171,7 +175,7 @@ function DataPanel() {
             ([, v]) => v instanceof Blob && (v as Blob).size > 0,
         )
         if (entries.length === 0) {
-            setError('Please choose at least one file.')
+            setError(t('settings.pleaseChooseFile'))
             return
         }
         setImporting(true)
@@ -191,20 +195,20 @@ function DataPanel() {
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
             <Panel>
                 <PanelHeader>
-                    <PanelTitle>Import flights</PanelTitle>
+                    <PanelTitle>{t('settings.importFlights')}</PanelTitle>
                 </PanelHeader>
                 <PanelBody>
                     <form onSubmit={handleImport} className="space-y-4">
                         <div>
-                            <Label>MyFlightRadar24</Label>
+                            <Label>{t('settings.myFlightradar24')}</Label>
                             <Input type="file" name="myflightradar24" accept=".csv" />
                         </div>
                         <div>
-                            <Label>Flighty</Label>
+                            <Label>{t('settings.flighty')}</Label>
                             <Input type="file" name="flighty" accept=".csv" />
                         </div>
                         <div>
-                            <Label>Custom CSV</Label>
+                            <Label>{t('settings.customCsv')}</Label>
                             <Input type="file" name="custom" accept=".csv" />
                         </div>
                         {error && (
@@ -212,7 +216,7 @@ function DataPanel() {
                         )}
                         <Button type="submit" variant="accent" disabled={importing}>
                             <Upload size={13} />
-                            {importing ? 'Importing…' : 'Import'}
+                            {importing ? t('settings.importing') : t('settings.import')}
                         </Button>
                     </form>
                 </PanelBody>
@@ -220,11 +224,11 @@ function DataPanel() {
 
             <Panel>
                 <PanelHeader>
-                    <PanelTitle>Export flights</PanelTitle>
+                    <PanelTitle>{t('settings.exportFlights')}</PanelTitle>
                 </PanelHeader>
                 <PanelBody className="space-y-3">
                     <p className="text-xs text-ink-muted font-mono">
-                        Download all your logged flights in one of the formats below.
+                        {t('settings.exportDescription')}
                     </p>
                     <div className="flex flex-col sm:flex-row gap-2">
                         <Button
@@ -232,14 +236,14 @@ function DataPanel() {
                             onClick={() => API.post('/exporting/csv', {}, true)}
                             className="flex-1"
                         >
-                            <Download size={13} /> Export CSV
+                            <Download size={13} /> {t('settings.exportCsv')}
                         </Button>
                         <Button
                             variant="outline"
                             onClick={() => API.post('/exporting/ical', {}, true)}
                             className="flex-1"
                         >
-                            <Download size={13} /> Export iCal
+                            <Download size={13} /> {t('settings.exportIcal')}
                         </Button>
                     </div>
                 </PanelBody>
@@ -252,6 +256,7 @@ function DataPanel() {
 
 function AccountPanel({ me }: { me?: User }) {
     const [editOpen, setEditOpen] = useState(false)
+    const { t } = useTranslation()
     if (!me) return <Spinner />
 
     const logout = () => {
@@ -263,20 +268,20 @@ function AccountPanel({ me }: { me?: User }) {
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
             <Panel>
                 <PanelHeader>
-                    <PanelTitle>Your account</PanelTitle>
-                    {me.isAdmin && <Badge variant="accent">Admin</Badge>}
+                    <PanelTitle>{t('settings.yourAccount')}</PanelTitle>
+                    {me.isAdmin && <Badge variant="accent">{t('common.admin')}</Badge>}
                 </PanelHeader>
                 <PanelBody className="grid grid-cols-2 gap-4">
-                    <DataBlock label="Username" value={me.username} />
-                    <DataBlock label="Admin" value={me.isAdmin ? 'Yes' : 'No'} />
-                    <DataBlock label="Last login" value={me.lastLogin || '—'} />
-                    <DataBlock label="Created" value={me.createdOn || '—'} />
+                    <DataBlock label={t('settings.username')} value={me.username} />
+                    <DataBlock label={t('common.admin')} value={me.isAdmin ? t('common.yes') : t('common.no')} />
+                    <DataBlock label={t('settings.lastLogin')} value={me.lastLogin || '—'} />
+                    <DataBlock label={t('settings.created')} value={me.createdOn || '—'} />
                 </PanelBody>
             </Panel>
 
             <Panel>
                 <PanelHeader>
-                    <PanelTitle>Actions</PanelTitle>
+                    <PanelTitle>{t('settings.actions')}</PanelTitle>
                 </PanelHeader>
                 <PanelBody className="space-y-2">
                     <Button
@@ -284,14 +289,14 @@ function AccountPanel({ me }: { me?: User }) {
                         className="w-full justify-start"
                         onClick={() => setEditOpen(true)}
                     >
-                        <Pencil size={13} /> Edit account
+                        <Pencil size={13} /> {t('settings.editAccount')}
                     </Button>
                     <Button
                         variant="danger"
                         className="w-full justify-start"
                         onClick={logout}
                     >
-                        <LogOut size={13} /> Log out
+                        <LogOut size={13} /> {t('settings.logOut')}
                     </Button>
                 </PanelBody>
             </Panel>
@@ -324,15 +329,16 @@ function UsersPanel({ me }: { me: User }) {
     const { data: usernames } = useUsernames()
     const { data: users, isLoading } = useAllUserDetails(usernames, me.username)
     const [createOpen, setCreateOpen] = useState(false)
+    const { t } = useTranslation()
 
     return (
         <div className="space-y-4">
             <div className="flex items-center justify-between">
                 <p className="board-label text-ink-muted">
-                    {users?.length ?? 0} other users
+                    {t('settings.otherUsers', { count: users?.length ?? 0 })}
                 </p>
                 <Button variant="accent" size="sm" onClick={() => setCreateOpen(true)}>
-                    <Plus size={13} /> New user
+                    <Plus size={13} /> {t('settings.newUser')}
                 </Button>
             </div>
 
@@ -343,7 +349,7 @@ function UsersPanel({ me }: { me: User }) {
             ) : !users || users.length === 0 ? (
                 <Panel>
                     <PanelBody className="text-center text-ink-muted text-sm py-10 font-mono">
-                        No other users.
+                        {t('settings.noOtherUsers')}
                     </PanelBody>
                 </Panel>
             ) : (
@@ -362,9 +368,10 @@ function UsersPanel({ me }: { me: User }) {
 function UserCard({ user }: { user: User }) {
     const qc = useQueryClient()
     const [editOpen, setEditOpen] = useState(false)
+    const { t } = useTranslation()
 
     const handleDelete = async () => {
-        if (!confirm(`Delete user "${user.username}" and all their flights?`)) return
+        if (!confirm(t('settings.deleteUserConfirm', { username: user.username }))) return
         await API.delete(`/users/${user.username}`)
         qc.invalidateQueries({ queryKey: ['users'] })
     }
@@ -373,12 +380,12 @@ function UserCard({ user }: { user: User }) {
         <Panel>
             <PanelHeader>
                 <PanelTitle>{user.username}</PanelTitle>
-                {user.isAdmin && <Badge variant="accent">Admin</Badge>}
+                {user.isAdmin && <Badge variant="accent">{t('common.admin')}</Badge>}
             </PanelHeader>
             <PanelBody className="space-y-3">
                 <div className="grid grid-cols-2 gap-3">
-                    <DataBlock label="Last login" value={user.lastLogin || '—'} />
-                    <DataBlock label="Created" value={user.createdOn || '—'} />
+                    <DataBlock label={t('settings.lastLogin')} value={user.lastLogin || '—'} />
+                    <DataBlock label={t('settings.created')} value={user.createdOn || '—'} />
                 </div>
                 <div className="flex gap-2 pt-2 border-t border-rule">
                     <Button
@@ -387,7 +394,7 @@ function UserCard({ user }: { user: User }) {
                         className="flex-1"
                         onClick={() => setEditOpen(true)}
                     >
-                        <Pencil size={13} /> Edit
+                        <Pencil size={13} /> {t('common.edit')}
                     </Button>
                     <Button
                         variant="danger"
@@ -395,7 +402,7 @@ function UserCard({ user }: { user: User }) {
                         className="flex-1"
                         onClick={handleDelete}
                     >
-                        <Trash2 size={13} /> Delete
+                        <Trash2 size={13} /> {t('common.delete')}
                     </Button>
                 </div>
             </PanelBody>
@@ -412,6 +419,8 @@ interface EditUserDialogProps {
 }
 
 function EditUserDialog({ user, open, onOpenChange, isSelf }: EditUserDialogProps) {
+    const { t } = useTranslation()
+
     const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
         e.preventDefault()
         const fd = Object.fromEntries(new FormData(e.currentTarget))
@@ -430,24 +439,24 @@ function EditUserDialog({ user, open, onOpenChange, isSelf }: EditUserDialogProp
     }
 
     return (
-        <Dialog open={open} onOpenChange={onOpenChange} title={`Edit ${user.username}`}>
+        <Dialog open={open} onOpenChange={onOpenChange} title={t('settings.editUser', { username: user.username })}>
             <form onSubmit={handleSubmit} className="space-y-3">
                 <div>
-                    <Label>New username</Label>
+                    <Label>{t('settings.newUsername')}</Label>
                     <Input name="username" placeholder={user.username} />
                 </div>
                 {!isSelf && (
                     <div>
-                        <Label>Admin</Label>
+                        <Label>{t('common.admin')}</Label>
                         <Select name="isAdmin" defaultValue={user.isAdmin.toString()}>
-                            <option value="false">No</option>
-                            <option value="true">Yes</option>
+                            <option value="false">{t('common.no')}</option>
+                            <option value="true">{t('common.yes')}</option>
                         </Select>
                     </div>
                 )}
                 <div>
-                    <Label>New password</Label>
-                    <Input name="password" type="password" placeholder="Leave blank to keep current" />
+                    <Label>{t('settings.newPassword')}</Label>
+                    <Input name="password" type="password" placeholder={t('settings.leaveBlank')} />
                 </div>
                 <div className="flex justify-end gap-2 pt-3 border-t border-rule">
                     <Button
@@ -456,10 +465,10 @@ function EditUserDialog({ user, open, onOpenChange, isSelf }: EditUserDialogProp
                         size="sm"
                         onClick={() => onOpenChange(false)}
                     >
-                        Cancel
+                        {t('common.cancel')}
                     </Button>
                     <Button type="submit" variant="accent" size="sm">
-                        Save
+                        {t('common.save')}
                     </Button>
                 </div>
             </form>
@@ -475,6 +484,7 @@ function CreateUserDialog({
     onOpenChange: (o: boolean) => void
 }) {
     const qc = useQueryClient()
+    const { t } = useTranslation()
     const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
         e.preventDefault()
         const data = Object.fromEntries(new FormData(e.currentTarget))
@@ -484,21 +494,21 @@ function CreateUserDialog({
     }
 
     return (
-        <Dialog open={open} onOpenChange={onOpenChange} title="Create user">
+        <Dialog open={open} onOpenChange={onOpenChange} title={t('settings.createUser')}>
             <form onSubmit={handleSubmit} className="space-y-3">
                 <div>
-                    <Label required>Username</Label>
+                    <Label required>{t('settings.username')}</Label>
                     <Input name="username" required />
                 </div>
                 <div>
-                    <Label required>Admin</Label>
+                    <Label required>{t('common.admin')}</Label>
                     <Select name="isAdmin" defaultValue="false">
-                        <option value="false">No</option>
-                        <option value="true">Yes</option>
+                        <option value="false">{t('common.no')}</option>
+                        <option value="true">{t('common.yes')}</option>
                     </Select>
                 </div>
                 <div>
-                    <Label required>Password</Label>
+                    <Label required>{t('login.password')}</Label>
                     <Input name="password" type="password" required />
                 </div>
                 <div className="flex justify-end gap-2 pt-3 border-t border-rule">
@@ -508,10 +518,10 @@ function CreateUserDialog({
                         size="sm"
                         onClick={() => onOpenChange(false)}
                     >
-                        Cancel
+                        {t('common.cancel')}
                     </Button>
                     <Button type="submit" variant="accent" size="sm">
-                        Create
+                        {t('common.create')}
                     </Button>
                 </div>
             </form>
@@ -524,6 +534,7 @@ function CreateUserDialog({
 function JobsPanel() {
     const [running, setRunning] = useState<string | null>(null)
     const [result, setResult] = useState<string | null>(null)
+    const { t } = useTranslation()
 
     const run = async (job: 'connections' | 'airlines', label: string) => {
         setRunning(label)
@@ -535,9 +546,11 @@ function JobsPanel() {
                     : '/flights/airlines_from_callsigns'
             const data = await API.post(endpoint, {})
             setResult(
-                `${label}: ${data?.amountUpdated ?? 0} updated, ${
-                    data?.amountSkipped ?? 0
-                } skipped`,
+                t('settings.jobResult', {
+                    label,
+                    updated: data?.amountUpdated ?? 0,
+                    skipped: data?.amountSkipped ?? 0,
+                }),
             )
         } finally {
             setRunning(null)
@@ -547,22 +560,22 @@ function JobsPanel() {
     return (
         <Panel>
             <PanelHeader>
-                <PanelTitle>Maintenance jobs</PanelTitle>
+                <PanelTitle>{t('settings.maintenanceJobs')}</PanelTitle>
             </PanelHeader>
             <PanelBody className="space-y-3">
                 <JobRow
-                    label="Compute flight connections"
-                    description="Find return/onward connections between existing flights."
-                    onRun={() => run('connections', 'Connections')}
-                    running={running === 'Connections'}
+                    label={t('settings.computeConnections')}
+                    description={t('settings.computeConnectionsDesc')}
+                    onRun={() => run('connections', t('settings.connections'))}
+                    running={running === t('settings.connections')}
                     disabled={!!running}
                 />
                 {ENABLE_EXTERNAL_APIS && (
                     <JobRow
-                        label="Fetch missing airlines"
-                        description="Look up airlines for flights with a callsign but no airline."
-                        onRun={() => run('airlines', 'Airlines')}
-                        running={running === 'Airlines'}
+                        label={t('settings.fetchMissingAirlines')}
+                        description={t('settings.fetchMissingAirlinesDesc')}
+                        onRun={() => run('airlines', t('settings.airlines'))}
+                        running={running === t('settings.airlines')}
                         disabled={!!running}
                     />
                 )}
@@ -584,6 +597,8 @@ interface JobRowProps {
     disabled: boolean
 }
 function JobRow({ label, description, onRun, running, disabled }: JobRowProps) {
+    const { t } = useTranslation()
+
     return (
         <div className="flex items-start justify-between gap-4 py-3 border-b border-rule last:border-b-0">
             <div className="min-w-0 flex-1">
@@ -597,7 +612,7 @@ function JobRow({ label, description, onRun, running, disabled }: JobRowProps) {
                 disabled={disabled}
             >
                 <PlayCircle size={13} />
-                {running ? 'Running…' : 'Run'}
+                {running ? t('common.running') : t('common.run')}
             </Button>
         </div>
     )
diff --git a/client/pages/Statistics.tsx b/client/pages/Statistics.tsx
index c632217..0a1d3d8 100644
--- a/client/pages/Statistics.tsx
+++ b/client/pages/Statistics.tsx
@@ -1,5 +1,6 @@
 import { useMemo, useState } from 'react'
 import { Filter, X } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
 
 import {
     useCurrentUser,
@@ -64,12 +65,13 @@ function FiltersSheet({
 }: FiltersSheetProps) {
     const { data: usernames } = useUsernames()
     const [draft, setDraft] = useState<StatsFilters>(filters)
+    const { t } = useTranslation()
 
     return (
-        <Sheet open={open} onOpenChange={onOpenChange} title="Filter statistics">
+        <Sheet open={open} onOpenChange={onOpenChange} title={t('statistics.filter')}>
             <div className="space-y-4">
                 <div>
-                    <Label>Start date</Label>
+                    <Label>{t('allFlights.startDate')}</Label>
                     <Input
                         type="date"
                         value={draft.start ?? ''}
@@ -77,7 +79,7 @@ function FiltersSheet({
                     />
                 </div>
                 <div>
-                    <Label>End date</Label>
+                    <Label>{t('allFlights.endDate')}</Label>
                     <Input
                         type="date"
                         value={draft.end ?? ''}
@@ -86,7 +88,7 @@ function FiltersSheet({
                 </div>
                 {isAdmin && (
                     <div>
-                        <Label>User</Label>
+                        <Label>{t('allFlights.user')}</Label>
                         <Select
                             value={draft.username ?? selfUsername ?? ''}
                             onChange={(e) =>
@@ -95,7 +97,7 @@ function FiltersSheet({
                         >
                             {usernames?.map((u) => (
                                 <option key={u} value={u}>
-                                    {u === selfUsername ? `${u} (you)` : u}
+                                    {u === selfUsername ? `${u} ${t('newFlight.you')}` : u}
                                 </option>
                             ))}
                         </Select>
@@ -111,7 +113,7 @@ function FiltersSheet({
                             onOpenChange(false)
                         }}
                     >
-                        Clear
+                        {t('allFlights.clearAll')}
                     </Button>
                     <Button
                         variant="accent"
@@ -125,7 +127,7 @@ function FiltersSheet({
                             onOpenChange(false)
                         }}
                     >
-                        Apply
+                        {t('allFlights.apply')}
                     </Button>
                 </div>
             </div>
@@ -191,9 +193,11 @@ function RecentSpanFilter({
     unit: RecentUnit
     onChange: (amount: string, unit: RecentUnit) => void
 }) {
+    const { t } = useTranslation()
+
     return (
         <div className="flex items-center gap-2 flex-wrap">
-            <span className="board-label text-ink-muted shrink-0">Last</span>
+            <span className="board-label text-ink-muted shrink-0">{t('statistics.last')}</span>
             <Input
                 type="number"
                 min={1}
@@ -208,14 +212,14 @@ function RecentSpanFilter({
                 className="h-8 w-auto min-w-[100px]"
             >
                 <option value="">—</option>
-                <option value="days">days</option>
-                <option value="weeks">weeks</option>
-                <option value="months">months</option>
-                <option value="years">years</option>
+                <option value="days">{t('statistics.days')}</option>
+                <option value="weeks">{t('statistics.weeks')}</option>
+                <option value="months">{t('statistics.months')}</option>
+                <option value="years">{t('statistics.years')}</option>
             </Select>
             {(!amount || !unit) && (
                 <span className="text-xs font-mono text-ink-faint hidden sm:inline">
-                    all time
+                    {t('statistics.allTime')}
                 </span>
             )}
         </div>
@@ -225,6 +229,7 @@ function RecentSpanFilter({
 export default function Statistics() {
     const metric = ConfigStorage.getSetting('metricUnits') !== 'false'
     const { data: me } = useCurrentUser()
+    const { t } = useTranslation()
     const [filters, setFilters] = useState<StatsFilters>({})
     const [filtersOpen, setFiltersOpen] = useState(false)
     const [recentAmount, setRecentAmount] = useState('')
@@ -257,7 +262,7 @@ export default function Statistics() {
         <div className="max-w-7xl mx-auto p-4 md:p-6 space-y-4 md:space-y-6">
             <div className="flex items-center justify-between gap-3 flex-wrap">
                 <div className="flex items-center gap-4 flex-wrap">
-                    <h1 className="font-mono uppercase tracking-board text-base">Statistics</h1>
+                    <h1 className="font-mono uppercase tracking-board text-base">{t('statistics.title')}</h1>
                     <RecentSpanFilter
                         amount={recentAmount}
                         unit={recentUnit}
@@ -267,10 +272,10 @@ export default function Statistics() {
                 <div className="flex items-center gap-2 flex-wrap">
                     {filters.start && (
                         <Badge variant="accent" className="gap-1.5 pl-2 pr-1 py-1">
-                            From {filters.start}
+                            {t('allFlights.from', { date: filters.start })}
                             <button
                                 onClick={() => setFilters({ ...filters, start: undefined })}
-                                aria-label="Remove"
+                                aria-label={t('common.remove')}
                             >
                                 <X size={11} />
                             </button>
@@ -278,10 +283,10 @@ export default function Statistics() {
                     )}
                     {filters.end && (
                         <Badge variant="accent" className="gap-1.5 pl-2 pr-1 py-1">
-                            To {filters.end}
+                            {t('allFlights.to', { date: filters.end })}
                             <button
                                 onClick={() => setFilters({ ...filters, end: undefined })}
-                                aria-label="Remove"
+                                aria-label={t('common.remove')}
                             >
                                 <X size={11} />
                             </button>
@@ -289,10 +294,10 @@ export default function Statistics() {
                     )}
                     {filters.username && filters.username !== me?.username && (
                         <Badge variant="accent" className="gap-1.5 pl-2 pr-1 py-1">
-                            User {filters.username}
+                            {t('allFlights.userFilter', { username: filters.username })}
                             <button
                                 onClick={() => setFilters({ ...filters, username: undefined })}
-                                aria-label="Remove"
+                                aria-label={t('common.remove')}
                             >
                                 <X size={11} />
                             </button>
@@ -300,7 +305,7 @@ export default function Statistics() {
                     )}
                     <Button variant="outline" size="sm" onClick={() => setFiltersOpen(true)}>
                         <Filter size={13} />
-                        Filters
+                        {t('allFlights.filters')}
                         {activeCount > 0 && (
                             <span className="ml-1 bg-accent text-ink px-1.5 text-[10px] font-bold">
                                 {activeCount}
@@ -319,28 +324,28 @@ export default function Statistics() {
                     {/* Top counters */}
                     <Panel className="overflow-x-auto">
                         <div className="flex divide-x divide-rule min-w-max">
-                            <StatCell label="Flights" value={formatNum(stats.totalFlights)} delay={0} />
-                            <StatCell label="Airports" value={formatNum(stats.totalUniqueAirports)} delay={80} />
+                            <StatCell label={t('statistics.flights')} value={formatNum(stats.totalFlights)} delay={0} />
+                            <StatCell label={t('statistics.airports')} value={formatNum(stats.totalUniqueAirports)} delay={80} />
                             <StatCell
-                                label="Hours"
+                                label={t('statistics.hours')}
                                 value={formatNum(Math.round(stats.totalDuration / 60))}
                                 delay={160}
                             />
                             <StatCell
-                                label="Distance"
+                                label={t('statistics.distance')}
                                 value={formatNum(stats.totalDistance)}
-                                unit={metric ? 'km' : 'mi'}
+                                unit={metric ? t('statistics.km') : t('statistics.mi')}
                                 delay={240}
                             />
-                            <StatCell label="Countries" value={formatNum(stats.visitedCountries)} delay={320} />
-                            <StatCell label="Day range" value={formatNum(stats.daysRange)} unit="days" delay={400} />
+                            <StatCell label={t('statistics.countries')} value={formatNum(stats.visitedCountries)} delay={320} />
+                            <StatCell label={t('statistics.dayRange')} value={formatNum(stats.daysRange)} unit={t('statistics.days')} delay={400} />
                         </div>
                     </Panel>
 
                     <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-6">
-                        <FlightsPerMonthChart title="Flights per month" data={timeline} />
+                        <FlightsPerMonthChart title={t('statistics.flightsPerMonth')} data={timeline} />
                         <CumulativeDistanceChart
-                            title="Cumulative distance"
+                            title={t('statistics.cumulativeDistance')}
                             data={timeline}
                             metric={metric}
                         />
@@ -348,29 +353,29 @@ export default function Statistics() {
 
                     <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-6">
                         <FrequencyBarChart
-                            title="Most visited airports"
+                            title={t('statistics.mostVisitedAirports')}
                             data={stats.mostVisitedAirports as any}
-                            label="visits"
+                            label={t('statistics.visits')}
                         />
                         <FrequencyBarChart
-                            title="Most common airlines"
+                            title={t('statistics.mostCommonAirlines')}
                             data={stats.mostCommonAirlines as any}
-                            label="flights"
+                            label={t('statistics.flights')}
                         />
                     </div>
 
                     <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-6">
                         <FrequencyDonut
-                            title="Ticket class"
+                            title={t('statistics.ticketClass')}
                             data={stats.ticketClassFrequency as any}
                         />
-                        <FrequencyDonut title="Seat" data={stats.seatFrequency as any} />
+                        <FrequencyDonut title={t('statistics.seat')} data={stats.seatFrequency as any} />
                     </div>
 
                     <FrequencyBarChart
-                        title="Most common countries"
+                        title={t('statistics.mostCommonCountries')}
                         data={stats.mostCommonCountries as any}
-                        label="flights"
+                        label={t('statistics.flights')}
                     />
                 </>
             )}
diff --git a/package.json b/package.json
index c62f095..ade03a3 100644
--- a/package.json
+++ b/package.json
@@ -22,10 +22,12 @@
         "axios": "^1.7.2",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
+        "i18next": "^26.3.6",
         "lucide-react": "^0.451.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-hook-form": "^7.53.0",
+        "react-i18next": "^17.0.11",
         "react-router-dom": "^6.24.0",
         "react-simple-maps": "^3.0.0",
         "recharts": "^2.13.0",
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
new file mode 100644
index 0000000..5ed0b5a
--- /dev/null
+++ b/pnpm-workspace.yaml
@@ -0,0 +1,2 @@
+allowBuilds:
+  esbuild: true
diff --git a/server/environment.py b/server/environment.py
index 788d747..2538fa9 100644
--- a/server/environment.py
+++ b/server/environment.py
@@ -24,3 +24,4 @@ def _get_environment_variable(key: str, cast_int: bool = False, cast_str: bool =
 AUTH_HEADER = _get_environment_variable("AUTH_HEADER", required=False)
 TOKEN_DURATION = _get_environment_variable("TOKEN_DURATION", cast_int=True)
 ENABLE_EXTERNAL_APIS = str(_get_environment_variable("ENABLE_EXTERNAL_APIS")).lower() == "true"
+DEFAULT_LANGUAGE = _get_environment_variable("DEFAULT_LANGUAGE", required=False)
diff --git a/server/main.py b/server/main.py
index 45c16eb..efdab6e 100644
--- a/server/main.py
+++ b/server/main.py
@@ -1,6 +1,6 @@
 from server.routers import flights, airports, airlines, statistics, geography, importing, exporting
 from server.auth import users, auth
-from server.environment import ENABLE_EXTERNAL_APIS
+from server.environment import DEFAULT_LANGUAGE, ENABLE_EXTERNAL_APIS
 from fastapi import FastAPI, Depends, Request
 from fastapi.responses import HTMLResponse, JSONResponse
 from fastapi.staticfiles import StaticFiles
@@ -37,7 +37,8 @@
 async def get_config(request: Request):
     config = {
             "BASE_URL": request.scope.get("root_path", "/"),
-            "ENABLE_EXTERNAL_APIS": ENABLE_EXTERNAL_APIS
+            "ENABLE_EXTERNAL_APIS": ENABLE_EXTERNAL_APIS,
+            "DEFAULT_LANGUAGE": DEFAULT_LANGUAGE
     }
     return JSONResponse(config)
 
diff --git a/server/tests/__init__.py b/server/tests/__init__.py
new file mode 100644
index 0000000..8b13789
--- /dev/null
+++ b/server/tests/__init__.py
@@ -0,0 +1 @@
+
diff --git a/server/tests/conftest.py b/server/tests/conftest.py
new file mode 100644
index 0000000..3826020
--- /dev/null
+++ b/server/tests/conftest.py
@@ -0,0 +1,51 @@
+"""Test configuration.
+
+The server reads DATA_PATH / SECRET_KEY / TOKEN_DURATION / AUTH_HEADER from the
+environment at import time, so they are set here (before any server module is
+imported) and point at a throwaway database created for the test run.
+"""
+import os
+import sqlite3
+import sys
+import tempfile
+from pathlib import Path
+
+TEST_DATA_DIR = tempfile.mkdtemp(prefix="jetlog-test-")
+os.environ["DATA_PATH"] = TEST_DATA_DIR
+os.environ["SECRET_KEY"] = "test-secret-key"
+os.environ["TOKEN_DURATION"] = "1440"
+os.environ["AUTH_HEADER"] = "X-Test-User"
+os.environ["ENABLE_EXTERNAL_APIS"] = "false"
+os.environ["DEFAULT_LANGUAGE"] = "zh-CN"
+
+REPO_ROOT = Path(__file__).resolve().parent.parent.parent
+sys.path.insert(0, str(REPO_ROOT))
+
+import pytest
+from fastapi.testclient import TestClient
+
+from server.database import database
+
+# TestClient serves requests from a different thread than the one that created
+# the module-level sqlite connection, so allow cross-thread use for tests.
+database.connection = sqlite3.connect(
+    os.path.join(TEST_DATA_DIR, "jetlog.db"), check_same_thread=False
+)
+database.connection.execute("PRAGMA foreign_keys = ON;")
+
+AUTH_HEADERS = {"X-Test-User": "admin"}
+
+
+@pytest.fixture()
+def client():
+    from server.main import app
+
+    with TestClient(app) as test_client:
+        yield test_client
+
+
+@pytest.fixture(autouse=True)
+def _clean_flights():
+    """Keep the shared test database isolated between tests."""
+    yield
+    database.execute_query("DELETE FROM flights;")
diff --git a/server/tests/test_config.py b/server/tests/test_config.py
new file mode 100644
index 0000000..e1a0ad0
--- /dev/null
+++ b/server/tests/test_config.py
@@ -0,0 +1,7 @@
+def test_config_exposes_default_language(client):
+    res = client.get("/config")
+    assert res.status_code == 200
+    body = res.json()
+    assert body["DEFAULT_LANGUAGE"] == "zh-CN"
+    assert body["BASE_URL"] == ""
+    assert body["ENABLE_EXTERNAL_APIS"] is False
diff --git a/server/tests/test_locales.py b/server/tests/test_locales.py
new file mode 100644
index 0000000..7a60aed
--- /dev/null
+++ b/server/tests/test_locales.py
@@ -0,0 +1,51 @@
+"""Keep the translation files consistent.
+
+Every locale that claims to be complete must contain exactly the same keys as
+English, and placeholder locales must stay empty until a contributor fills them
+(they fall back to English at runtime).
+"""
+import json
+from pathlib import Path
+
+LOCALES_DIR = Path(__file__).resolve().parent.parent.parent / "client" / "locales"
+
+COMPLETE = ["en", "zh-CN", "zh-TW"]
+PLACEHOLDERS = ["ja", "ko", "fr", "de", "es"]
+
+
+def _keys(obj, prefix=""):
+    keys = set()
+    for k, v in obj.items():
+        full = f"{prefix}.{k}" if prefix else k
+        if isinstance(v, dict):
+            keys |= _keys(v, full)
+        else:
+            keys.add(full)
+    return keys
+
+
+def _load(lang: str) -> dict:
+    return json.loads((LOCALES_DIR / f"{lang}.json").read_text(encoding="utf-8"))
+
+
+def test_complete_locales_have_all_english_keys():
+    en_keys = _keys(_load("en"))
+
+    for lang in COMPLETE:
+        assert _keys(_load(lang)) == en_keys, f"{lang}.json is missing or has extra keys"
+
+
+def test_complete_locales_have_no_missing_values():
+    for lang in COMPLETE:
+        data = _load(lang)
+        missing = [
+            key
+            for key, value in data.items()
+            if isinstance(value, dict) and not value
+        ]
+        assert not missing, f"{lang}.json has empty sections: {missing}"
+
+
+def test_placeholder_locales_are_empty():
+    for lang in PLACEHOLDERS:
+        assert _load(lang) == {}, f"{lang}.json should stay empty until translated"