diff --git a/.github/workflows/server-and-client-tests.yml b/.github/workflows/server-and-client-tests.yml
index 8e112f8..c2afdcf 100644
--- a/.github/workflows/server-and-client-tests.yml
+++ b/.github/workflows/server-and-client-tests.yml
@@ -61,6 +61,9 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
+      - name: Check for hardcoded i18n strings
+        run: npm run check:i18n
+
       - name: Run tests
         run: npm test
 
diff --git a/README.md b/README.md
index 5fb9f75..3aeda4a 100644
--- a/README.md
+++ b/README.md
@@ -99,6 +99,14 @@ A Laravel 12 API server + Angular 21 client for processing PDF documents using A
 - **Personalisation Page** — `/profile/personalisation`, a third sub-page alongside Info and Security. Hosts the layout picker (6 cards), palette picker (6 swatches), and theme-mode segmented control. Selections take effect instantly with no reload.
 - **Console-only `/` Command Palette** — when on the Console layout, pressing `/` opens a centred terminal-style overlay for keyboard-driven navigation (autocomplete on routes, ↑↓ to move, Enter to navigate, Esc to close). The listener is scoped so typing `/` inside an `<input>`, `<textarea>`, or `[contenteditable]` doesn't hijack — same pattern as GitHub / Linear / Notion.
 
+### Localization
+- **English & Romanian** — The entire UI ships in English (default) and Romanian. Users switch language from two medieval swallowtail flags on the guest landing page, or from the segmented control in the profile dropdown and on `/profile/personalisation`.
+- **Cross-Device Persistence** — The chosen locale is stored in `localStorage` (`wk:locale`) and on the server (`user_preferences.locale`). A language picked pre-login is adopted on first login when the account has no saved locale yet; otherwise the server value wins.
+- **Localized Backend** — API validation errors, authentication messages, and all six transactional emails arrive in the user's language. The frontend sends `Accept-Language`; a `SetLocale` middleware applies it per request, and queued mail localizes per-recipient via `HasLocalePreference`.
+- **Regional Formats** — Dates and numbers follow regional convention per locale: Romanian renders `28.05.2026` and `1.234,56`; English renders `28/05/2026` and `1,234.56`.
+- **Locale-Aware Charter** — The landing charter keeps its Latin layer untouched; its hover/tap translation layer swaps between English and Romanian with the active locale.
+- **Built on Transloco** — Runtime translations with per-feature lazy scopes (`wordkeep-client/public/assets/i18n/`). A CI guard (`npm run check:i18n`) blocks new hardcoded user-facing strings.
+
 ### Page Linking
 - **Consecutive Page Pairs** — View two adjacent pages side-by-side to determine how text flows between them
 - **New Row / Continue Row** — Tag each boundary as a new paragraph row or a continuation of the previous page
@@ -457,6 +465,25 @@ These all default to behavior-preserving values — set them only if you want to
 | `BULK_OCR_ENABLED` | `true` | `ProcessBulkOcr` job exits early — keeps the document at `pending` so a cancel call can win the race during testing. |
 | `QUEUE_WORKER_MANAGED` | _(unset)_ | When set truthy, the auto-spawn `EnsureQueueWorkerIsRunning` listener short-circuits — set this if a separate process supervisor (e.g. supervisord) is already running the worker, to avoid duplicate workers. |
 
+## Localization
+
+The UI and backend messages ship in English (`en`, default) and Romanian (`ro`).
+
+- **Frontend translations** live in `wordkeep-client/public/assets/i18n/` — a global `en.json`/`ro.json` plus one folder per lazy feature scope (`charter/`, `profile/`, …). They are loaded at runtime by Transloco; scopes are attached per route in `src/app/app.routes.ts`.
+- **Backend translations** live in `lang/{en,ro}/` (`auth`, `validation`, `passwords`, `pagination`, and `emails`). Locale is resolved per request from `Accept-Language` by `app/Http/Middleware/SetLocale.php`; queued mail uses the recipient's `User::preferredLocale()`.
+- **No hardcoded strings** — `npm run check:i18n` (run in CI) flags visible template text that isn't wrapped in a Transloco binding. Templates pending migration are listed in `wordkeep-client/scripts/i18n-allowlist.txt`.
+
+### Adding a new locale
+
+1. Add the locale code to `availableLangs` in `wordkeep-client/src/app/app.config.ts`, and `registerLocaleData` for its Angular date/number formats. Add it to the `LOCALE_VALUES`/`LOCALE_IDS` in `src/app/services/user-preferences.service.ts` and the `in:en,ro` rule in `app/Http/Requests/UpdateUserPreferencesRequest.php` + the `SetLocale` supported list.
+2. Seed translation files from English with Gemini, passing the target locale code (e.g. `fr`):
+   ```bash
+   GEMINI_API_KEY=… node scripts/translate-i18n.mjs <lang>        # creates <lang>.json siblings
+   # or: npm run i18n:translate -- <lang>
+   ```
+   `<lang>` is required and must be one of the codes in the script's `LANG_NAMES` map (run with no args to list them). Add `--dry-run` to preview without writing. The script preserves placeholders, adapts ICU plural categories to the target language's CLDR rules, and merges on re-run (reviewed strings are never overwritten). Then mirror `lang/en/` to `lang/<locale>/`.
+3. Review and fix the generated copy, then add the locale to the language switchers (profile dropdown, personalisation page, and — if desired — the landing flags).
+
 ## API Endpoints
 
 Interactive API documentation is available at `/docs/api` (served by [Scramble](https://scramble.dedoc.co)).
diff --git a/app/Http/Controllers/Api/AuthController.php b/app/Http/Controllers/Api/AuthController.php
index 99aadb9..6696341 100644
--- a/app/Http/Controllers/Api/AuthController.php
+++ b/app/Http/Controllers/Api/AuthController.php
@@ -41,10 +41,10 @@ public function register(Request $request): JsonResponse
         $token = $user->generateVerificationToken();
         $verificationUrl = config('app.frontend_url') . '/verify-email?token=' . $token;
 
-        Mail::to($user)->queue(new VerifyEmail($user, $verificationUrl));
+        Mail::to($user)->locale(app()->getLocale())->queue(new VerifyEmail($user, $verificationUrl));
 
         return response()->json([
-            'message' => 'Registration successful. Please check your email to verify your account.',
+            'message' => __('messages.auth.registered'),
             'requires_verification' => true,
         ], 201);
     }
@@ -67,14 +67,14 @@ public function login(Request $request): JsonResponse
 
         if (!$user || !Hash::check($validated['password'], $user->password)) {
             throw ValidationException::withMessages([
-                'email' => ['The provided credentials are incorrect.'],
+                'email' => [__('auth.failed')],
             ]);
         }
 
         if (!$user->isVerified()) {
             return response()->json([
                 'error' => 'email_not_verified',
-                'message' => 'Please verify your email before logging in. Check your inbox for the verification link.',
+                'message' => __('messages.auth.email_not_verified'),
             ], 403);
         }
 
@@ -115,12 +115,12 @@ public function loginWithTwoFactor(Request $request): JsonResponse
         $user = User::where('two_factor_challenge_token', $validated['challenge_token'])->first();
 
         if (!$user) {
-            return response()->json(['message' => 'Invalid or expired challenge.'], 400);
+            return response()->json(['message' => __('messages.auth.challenge_invalid')], 400);
         }
 
         if ($user->two_factor_challenge_expires_at->isPast()) {
             $user->update(['two_factor_challenge_token' => null, 'two_factor_challenge_expires_at' => null]);
-            return response()->json(['message' => 'Challenge expired. Please log in again.'], 400);
+            return response()->json(['message' => __('messages.auth.challenge_expired')], 400);
         }
 
         $google2fa = new \PragmaRX\Google2FA\Google2FA();
@@ -129,7 +129,7 @@ public function loginWithTwoFactor(Request $request): JsonResponse
 
         if (!$validTotp && !$validRecovery) {
             return response()->json([
-                'errors' => ['code' => ['Invalid code.']],
+                'errors' => ['code' => [__('messages.auth.code_invalid')]],
             ], 422);
         }
 
@@ -160,7 +160,7 @@ public function verify(Request $request): JsonResponse
         if (!$user) {
             return response()->json([
                 'error' => 'invalid_token',
-                'message' => 'Invalid or expired verification token.',
+                'message' => __('messages.auth.verification_token_invalid'),
             ], 400);
         }
 
@@ -169,7 +169,7 @@ public function verify(Request $request): JsonResponse
         $token = $user->createToken('auth-token')->plainTextToken;
 
         return response()->json([
-            'message' => 'Email verified successfully.',
+            'message' => __('messages.auth.email_verified'),
             'user' => $this->userPayload($user),
             'token' => $token,
         ]);
@@ -195,11 +195,11 @@ public function resendVerification(Request $request): JsonResponse
         if ($user) {
             $token = $user->generateVerificationToken();
             $verificationUrl = config('app.frontend_url') . '/verify-email?token=' . $token;
-            Mail::to($user)->queue(new VerifyEmail($user, $verificationUrl));
+            Mail::to($user)->locale(app()->getLocale())->queue(new VerifyEmail($user, $verificationUrl));
         }
 
         return response()->json([
-            'message' => 'If an unverified account exists, a verification email has been sent.',
+            'message' => __('messages.auth.verification_resent'),
         ]);
     }
 
@@ -229,11 +229,11 @@ public function forgotPassword(Request $request): JsonResponse
             ]);
 
             $resetUrl = config('app.frontend_url') . '/reset-password?token=' . $token . '&email=' . urlencode($user->email);
-            Mail::to($user)->queue(new PasswordReset($user, $resetUrl));
+            Mail::to($user)->locale(app()->getLocale())->queue(new PasswordReset($user, $resetUrl));
         }
 
         return response()->json([
-            'message' => 'If an account exists, a password reset link has been sent.',
+            'message' => __('messages.auth.reset_link_sent'),
         ]);
     }
 
@@ -259,14 +259,14 @@ public function resetPassword(Request $request): JsonResponse
         if (!$record) {
             return response()->json([
                 'error' => 'invalid_token',
-                'message' => 'Invalid or expired reset token.',
+                'message' => __('messages.auth.reset_token_invalid'),
             ], 400);
         }
 
         if (!Hash::check($validated['token'], $record->token)) {
             return response()->json([
                 'error' => 'invalid_token',
-                'message' => 'Invalid or expired reset token.',
+                'message' => __('messages.auth.reset_token_invalid'),
             ], 400);
         }
 
@@ -275,7 +275,7 @@ public function resetPassword(Request $request): JsonResponse
             DB::table('password_reset_tokens')->where('email', $validated['email'])->delete();
             return response()->json([
                 'error' => 'token_expired',
-                'message' => 'Reset link has expired. Please request a new one.',
+                'message' => __('messages.auth.reset_link_expired'),
             ], 400);
         }
 
@@ -287,7 +287,7 @@ public function resetPassword(Request $request): JsonResponse
         $token = $user->createToken('auth-token')->plainTextToken;
 
         return response()->json([
-            'message' => 'Password reset successful.',
+            'message' => __('messages.auth.password_reset'),
             'user' => $this->userPayload($user),
             'token' => $token,
         ]);
@@ -307,7 +307,7 @@ public function logout(Request $request): JsonResponse
         }
 
         return response()->json([
-            'message' => 'Successfully logged out',
+            'message' => __('messages.auth.logged_out'),
         ]);
     }
 
diff --git a/app/Http/Controllers/Api/BulkOcrController.php b/app/Http/Controllers/Api/BulkOcrController.php
index e18dee3..df1eb17 100644
--- a/app/Http/Controllers/Api/BulkOcrController.php
+++ b/app/Http/Controllers/Api/BulkOcrController.php
@@ -26,14 +26,14 @@ public function start(Document $document): JsonResponse
         if (!$document->isReady()) {
             return response()->json([
                 'error' => 'document_not_ready',
-                'message' => 'Document is not ready for OCR processing.',
+                'message' => __('messages.bulk_ocr.not_ready'),
             ], 400);
         }
 
         if ($document->bulk_ocr_status === 'running') {
             return response()->json([
                 'error' => 'already_running',
-                'message' => 'Bulk OCR is already running for this document.',
+                'message' => __('messages.bulk_ocr.already_running'),
             ], 400);
         }
 
@@ -54,7 +54,7 @@ public function start(Document $document): JsonResponse
                 'bulk_ocr_completed' => 0,
                 'page_count' => $document->page_count,
             ],
-            'message' => 'Bulk OCR job queued successfully.',
+            'message' => __('messages.bulk_ocr.queued'),
         ]);
     }
 
@@ -72,7 +72,7 @@ public function cancel(Document $document): JsonResponse
         if (!in_array($document->bulk_ocr_status, ['pending', 'running'])) {
             return response()->json([
                 'error' => 'not_running',
-                'message' => 'No bulk OCR job is running for this document.',
+                'message' => __('messages.bulk_ocr.no_running_job'),
             ], 400);
         }
 
@@ -85,7 +85,7 @@ public function cancel(Document $document): JsonResponse
                 'document_id' => $document->id,
                 'bulk_ocr_status' => 'cancelled',
             ],
-            'message' => 'Bulk OCR job cancelled.',
+            'message' => __('messages.bulk_ocr.cancelled'),
         ]);
     }
 }
diff --git a/app/Http/Controllers/Api/DocumentController.php b/app/Http/Controllers/Api/DocumentController.php
index 1bd012b..2f40352 100644
--- a/app/Http/Controllers/Api/DocumentController.php
+++ b/app/Http/Controllers/Api/DocumentController.php
@@ -135,7 +135,7 @@ public function retry(Document $document): DocumentResource|JsonResponse
         }
 
         if ($document->status !== 'failed') {
-            return response()->json(['error' => 'Only failed documents can be retried'], 422);
+            return response()->json(['error' => __('messages.documents.retry_only_failed')], 422);
         }
 
         $document = $this->pdfService->retry($document);
diff --git a/app/Http/Controllers/Api/FootnoteController.php b/app/Http/Controllers/Api/FootnoteController.php
index 26dedbd..8850b0e 100644
--- a/app/Http/Controllers/Api/FootnoteController.php
+++ b/app/Http/Controllers/Api/FootnoteController.php
@@ -172,7 +172,7 @@ public function unlink(Document $document, DocumentFootnote $footnote): JsonResp
         }
 
         if (!$footnote->page_number) {
-            return response()->json(['error' => 'Footnote is not linked to a page'], 422);
+            return response()->json(['error' => __('messages.footnotes.not_linked')], 422);
         }
 
         $this->removeRefsFromPageTexts($document, $footnote->number);
diff --git a/app/Http/Controllers/Api/OcrController.php b/app/Http/Controllers/Api/OcrController.php
index f3a2204..d2e73dc 100644
--- a/app/Http/Controllers/Api/OcrController.php
+++ b/app/Http/Controllers/Api/OcrController.php
@@ -154,7 +154,7 @@ public function updatePage(Document $document, int $page): JsonResponse
         if (!$documentPage) {
             return response()->json([
                 'error' => 'page_not_found',
-                'message' => "Page {$page} not found.",
+                'message' => __('messages.pages.not_found', ['page' => $page]),
             ], 404);
         }
 
@@ -185,7 +185,7 @@ public function updatePage(Document $document, int $page): JsonResponse
                     if (!$footnote || $footnote->page_number !== $page) {
                         return response()->json([
                             'error' => 'invalid_footnote_ref',
-                            'message' => 'Use the insert button to add footnote references.',
+                            'message' => __('messages.ocr.footnote_use_insert'),
                         ], 422);
                     }
                 }
@@ -196,7 +196,7 @@ public function updatePage(Document $document, int $page): JsonResponse
             if (!empty($removedNumbers)) {
                 return response()->json([
                     'error' => 'invalid_footnote_ref',
-                    'message' => 'Use the unlink button to remove footnote references.',
+                    'message' => __('messages.ocr.footnote_use_unlink'),
                 ], 422);
             }
         }
@@ -302,7 +302,7 @@ public function setIgnored(Document $document, int $page): JsonResponse
         $pageModel = $document->pages()->where('page_number', $page)->first();
 
         if (!$pageModel) {
-            return response()->json(['error' => 'Page not found'], 404);
+            return response()->json(['error' => __('messages.pages.not_found_plain')], 404);
         }
 
         $ignore = $validated['ignored'];
diff --git a/app/Http/Controllers/Api/PageController.php b/app/Http/Controllers/Api/PageController.php
index 0d3d6b0..639c353 100644
--- a/app/Http/Controllers/Api/PageController.php
+++ b/app/Http/Controllers/Api/PageController.php
@@ -36,7 +36,7 @@ public function image(Document $document, int $page): BinaryFileResponse|Respons
         } catch (\Exception $e) {
             return response()->json([
                 'error' => 'image_not_found',
-                'message' => 'Page image could not be generated.',
+                'message' => __('messages.pages.image_unavailable'),
             ], 500);
         }
 
diff --git a/app/Http/Controllers/Api/PageLinkingController.php b/app/Http/Controllers/Api/PageLinkingController.php
index 617006d..f2ba8bf 100644
--- a/app/Http/Controllers/Api/PageLinkingController.php
+++ b/app/Http/Controllers/Api/PageLinkingController.php
@@ -62,7 +62,7 @@ public function show(Document $document, int $page): JsonResponse
         }
 
         if ($page < 1 || $page >= $document->page_count) {
-            return response()->json(['error' => 'Invalid page'], 422);
+            return response()->json(['error' => __('messages.page_linking.invalid_page')], 422);
         }
 
         $pageA = DocumentPage::firstOrCreate(['document_id' => $document->id, 'page_number' => $page]);
@@ -102,11 +102,11 @@ public function saveLink(Document $document, int $page): JsonResponse
         $pageB = DocumentPage::firstOrCreate(['document_id' => $document->id, 'page_number' => $page + 1]);
 
         if ($pageA->link_to_next_page === DocumentPage::LINK_DOCUMENT_END) {
-            return response()->json(['error' => 'Invalid page'], 422);
+            return response()->json(['error' => __('messages.page_linking.invalid_page')], 422);
         }
 
         if ($pageA->ignored || ($pageB && $pageB->ignored)) {
-            return response()->json(['error' => 'Cannot set link for ignored page'], 422);
+            return response()->json(['error' => __('messages.page_linking.ignored_page')], 422);
         }
 
         DB::transaction(function () use ($pageA, $pageB, $decision) {
diff --git a/app/Http/Controllers/Api/ProfileController.php b/app/Http/Controllers/Api/ProfileController.php
index 47a5684..11bdb8c 100644
--- a/app/Http/Controllers/Api/ProfileController.php
+++ b/app/Http/Controllers/Api/ProfileController.php
@@ -62,11 +62,11 @@ public function verifyPassword(Request $request): JsonResponse
 
         if (!Hash::check($request->password, $request->user()->password)) {
             return response()->json([
-                'errors' => ['password' => ['The password is incorrect.']],
+                'errors' => ['password' => [__('validation.current_password')]],
             ], 422);
         }
 
-        return response()->json(['message' => 'Password verified.']);
+        return response()->json(['message' => __('messages.profile.password_verified')]);
     }
 
     /**
@@ -91,17 +91,17 @@ public function requestEmailChange(Request $request): JsonResponse
 
         if (!Hash::check($request->password, $user->password)) {
             return response()->json([
-                'errors' => ['password' => ['The password is incorrect.']],
+                'errors' => ['password' => [__('validation.current_password')]],
             ], 422);
         }
 
         $token = $user->generateEmailChangeToken($request->new_email);
         $verificationUrl = config('app.frontend_url') . '/verify-email-change?token=' . $token;
 
-        Mail::to($request->new_email)->queue(new VerifyEmailChange($user, $verificationUrl));
+        Mail::to($request->new_email)->locale(app()->getLocale())->queue(new VerifyEmailChange($user, $verificationUrl));
 
         return response()->json([
-            'message' => 'Verification email sent to ' . $request->new_email . '.',
+            'message' => __('messages.profile.email_change_sent', ['email' => $request->new_email]),
         ]);
     }
 
@@ -128,15 +128,15 @@ public function resendEmailChangeVerification(Request $request): JsonResponse
         $user = $request->user();
 
         if (!$user->hasPendingEmailChange()) {
-            return response()->json(['message' => 'No pending email change.'], 400);
+            return response()->json(['message' => __('messages.profile.no_pending_email_change')], 400);
         }
 
         $token = $user->generateEmailChangeToken($user->pending_email);
         $verificationUrl = config('app.frontend_url') . '/verify-email-change?token=' . $token;
 
-        Mail::to($user->pending_email)->queue(new VerifyEmailChange($user, $verificationUrl));
+        Mail::to($user->pending_email)->locale(app()->getLocale())->queue(new VerifyEmailChange($user, $verificationUrl));
 
-        return response()->json(['message' => 'Verification email resent.']);
+        return response()->json(['message' => __('messages.profile.verification_resent')]);
     }
 
     /**
@@ -198,7 +198,7 @@ public function verifyEmailChange(Request $request): JsonResponse
         if (!$user) {
             return response()->json([
                 'error' => 'invalid_token',
-                'message' => 'Invalid or expired token.',
+                'message' => __('messages.profile.email_change_token_invalid'),
             ], 400);
         }
 
@@ -206,14 +206,14 @@ public function verifyEmailChange(Request $request): JsonResponse
             $user->cancelEmailChange();
             return response()->json([
                 'error' => 'token_expired',
-                'message' => 'This link has expired. Please request a new email change.',
+                'message' => __('messages.profile.email_change_expired'),
             ], 400);
         }
 
         $user->confirmEmailChange();
 
         return response()->json([
-            'message' => 'Email updated successfully.',
+            'message' => __('messages.profile.email_updated'),
             'user' => $this->userPayload($user->fresh()),
         ]);
     }
@@ -234,14 +234,14 @@ public function changePassword(Request $request): JsonResponse
 
         if (!Hash::check($request->current_password, $user->password)) {
             return response()->json([
-                'errors' => ['current_password' => ['The password is incorrect.']],
+                'errors' => ['current_password' => [__('validation.current_password')]],
             ], 422);
         }
 
         $user->update(['password' => Hash::make($request->new_password)]);
-        Mail::to($user->email)->queue(new PasswordChanged($user));
+        Mail::to($user)->locale(app()->getLocale())->queue(new PasswordChanged($user));
 
-        return response()->json(['message' => 'Password updated.']);
+        return response()->json(['message' => __('messages.profile.password_updated')]);
     }
 
     /**
@@ -257,7 +257,7 @@ public function setupTwoFactor(Request $request): JsonResponse
 
         if (!Hash::check($request->password, $user->password)) {
             return response()->json([
-                'errors' => ['password' => ['The password is incorrect.']],
+                'errors' => ['password' => [__('validation.current_password')]],
             ], 422);
         }
 
@@ -293,19 +293,19 @@ public function confirmTwoFactor(Request $request): JsonResponse
         $user = $request->user();
 
         if (!$user->two_factor_secret) {
-            return response()->json(['message' => 'Two-factor setup not initiated.'], 400);
+            return response()->json(['message' => __('messages.profile.two_factor_not_initiated')], 400);
         }
 
         $google2fa = new Google2FA();
         if (!$google2fa->verifyKey($user->two_factor_secret, $request->code)) {
             return response()->json([
-                'errors' => ['code' => ['Invalid verification code.']],
+                'errors' => ['code' => [__('messages.profile.two_factor_code_invalid')]],
             ], 422);
         }
 
         $recoveryCodes = $user->generateRecoveryCodes();
         $user->update(['two_factor_confirmed_at' => now()]);
-        Mail::to($user->email)->queue(new TwoFactorEnabled($user));
+        Mail::to($user)->locale(app()->getLocale())->queue(new TwoFactorEnabled($user));
 
         return response()->json([
             'user' => $this->userPayload($user->fresh()),
@@ -326,7 +326,7 @@ public function disableTwoFactor(Request $request): JsonResponse
 
         if (!Hash::check($request->password, $user->password)) {
             return response()->json([
-                'errors' => ['password' => ['The password is incorrect.']],
+                'errors' => ['password' => [__('validation.current_password')]],
             ], 422);
         }
 
@@ -336,7 +336,7 @@ public function disableTwoFactor(Request $request): JsonResponse
             'two_factor_confirmed_at' => null,
         ]);
 
-        Mail::to($user->email)->queue(new TwoFactorDisabled($user));
+        Mail::to($user)->locale(app()->getLocale())->queue(new TwoFactorDisabled($user));
 
         return response()->json($this->userPayload($user->fresh()));
     }
diff --git a/app/Http/Controllers/Api/TranslationController.php b/app/Http/Controllers/Api/TranslationController.php
index 8ffa09f..3f840c2 100644
--- a/app/Http/Controllers/Api/TranslationController.php
+++ b/app/Http/Controllers/Api/TranslationController.php
@@ -95,13 +95,13 @@ public function translatePage(TranslatePageRequest $request, Document $document,
         $documentPage = $document->pages()->where('page_number', $page)->first();
 
         if (!$documentPage) {
-            return response()->json(['error' => 'page_not_found', 'message' => "Page {$page} not found."], 404);
+            return response()->json(['error' => 'page_not_found', 'message' => __('messages.pages.not_found', ['page' => $page])], 404);
         }
 
         if (empty(trim($documentPage->ocr_text ?? ''))) {
             return response()->json([
                 'error'   => 'no_ocr_text',
-                'message' => 'Page has no OCR text to translate.',
+                'message' => __('messages.translation.page_no_ocr'),
             ], 422);
         }
 
@@ -157,7 +157,7 @@ public function translatePage(TranslatePageRequest $request, Document $document,
                 } catch (\Exception $e) {
                     return response()->json([
                         'error'   => 'footnote_translation_failed',
-                        'message' => "Page translated, but footnote [^{$footnote->number}] failed: {$e->getMessage()}",
+                        'message' => __('messages.translation.footnote_failed', ['number' => $footnote->number, 'error' => $e->getMessage()]),
                         'data'    => new DocumentPageTranslationResource($result),
                         'meta'    => [
                             'page_linking_incomplete' => $pageLinkingIncomplete,
@@ -193,7 +193,7 @@ public function showPageTranslation(Document $document, int $page, string $langu
         $documentPage = $document->pages()->where('page_number', $page)->first();
 
         if (!$documentPage) {
-            return response()->json(['error' => 'page_not_found', 'message' => "Page {$page} not found."], 404);
+            return response()->json(['error' => 'page_not_found', 'message' => __('messages.pages.not_found', ['page' => $page])], 404);
         }
 
         $translation = DocumentPageTranslation::where([
@@ -202,7 +202,7 @@ public function showPageTranslation(Document $document, int $page, string $langu
         ])->first();
 
         if (!$translation) {
-            return response()->json(['error' => 'not_found', 'message' => 'No translation found for this page and language.'], 404);
+            return response()->json(['error' => 'not_found', 'message' => __('messages.translation.not_found_for_page')], 404);
         }
 
         return (new DocumentPageTranslationResource($translation))->response();
@@ -222,7 +222,7 @@ public function store(StartBulkTranslationRequest $request, Document $document):
         if (!$document->isReady()) {
             return response()->json([
                 'error'   => 'document_not_ready',
-                'message' => 'Document is not ready.',
+                'message' => __('messages.translation.document_not_ready'),
             ], 400);
         }
 
@@ -236,7 +236,7 @@ public function store(StartBulkTranslationRequest $request, Document $document):
         if ($existing && $existing->isProcessing()) {
             return response()->json([
                 'error'   => 'already_running',
-                'message' => 'A translation job for this language is already running.',
+                'message' => __('messages.translation.job_already_running'),
             ], 400);
         }
 
@@ -265,7 +265,7 @@ public function run(Request $request, Document $document, DocumentTranslation $t
         if ($translation->isProcessing()) {
             return response()->json([
                 'error'   => 'already_running',
-                'message' => 'A translation job for this language is already running.',
+                'message' => __('messages.translation.job_already_running'),
             ], 400);
         }
 
@@ -298,7 +298,7 @@ public function cancel(Document $document, DocumentTranslation $translation): Js
         if (!$translation->isProcessing()) {
             return response()->json([
                 'error'   => 'not_running',
-                'message' => 'No running translation job to cancel.',
+                'message' => __('messages.translation.no_running_job'),
             ], 400);
         }
 
@@ -353,7 +353,7 @@ public function savePageTranslationSplits(Request $request, Document $document,
         $documentPage = $document->pages()->where('page_number', $page)->first();
 
         if (!$documentPage) {
-            return response()->json(['error' => 'page_not_found', 'message' => "Page {$page} not found."], 404);
+            return response()->json(['error' => 'page_not_found', 'message' => __('messages.pages.not_found', ['page' => $page])], 404);
         }
 
         $validated = $request->validate([
@@ -393,7 +393,7 @@ public function updatePageTranslation(UpdatePageTranslationRequest $request, Doc
         $documentPage = $document->pages()->where('page_number', $page)->first();
 
         if (!$documentPage) {
-            return response()->json(['error' => 'page_not_found', 'message' => "Page {$page} not found."], 404);
+            return response()->json(['error' => 'page_not_found', 'message' => __('messages.pages.not_found', ['page' => $page])], 404);
         }
 
         $validated = $request->validated();
@@ -430,7 +430,7 @@ public function deletePageTranslation(Document $document, int $page, string $lan
         $documentPage = $document->pages()->where('page_number', $page)->first();
 
         if (!$documentPage) {
-            return response()->json(['error' => 'page_not_found', 'message' => "Page {$page} not found."], 404);
+            return response()->json(['error' => 'page_not_found', 'message' => __('messages.pages.not_found', ['page' => $page])], 404);
         }
 
         DocumentPageTranslation::where([
@@ -440,7 +440,7 @@ public function deletePageTranslation(Document $document, int $page, string $lan
 
         $this->touchTranslationStatus($document, $page, $language);
 
-        return response()->json(['message' => 'Translation deleted.']);
+        return response()->json(['message' => __('messages.translation.deleted')]);
     }
 
     /**
@@ -588,7 +588,7 @@ public function translateFootnoteItem(Request $request, Document $document, Docu
         } catch (\Exception $e) {
             return response()->json([
                 'error'   => 'translation_failed',
-                'message' => "Footnote [^{$footnote->number}] failed to translate: {$e->getMessage()}",
+                'message' => __('messages.translation.footnote_failed_short', ['number' => $footnote->number, 'error' => $e->getMessage()]),
             ], 422);
         }
 
@@ -660,7 +660,7 @@ public function destroy(Document $document, DocumentTranslation $translation): J
 
         $translation->delete();
 
-        return response()->json(['message' => 'Translation deleted.']);
+        return response()->json(['message' => __('messages.translation.deleted')]);
     }
 
     /**
@@ -699,7 +699,7 @@ public function dismissWrongLanguage(Document $document, int $page, string $lang
         $documentPage = $document->pages()->where('page_number', $page)->first();
 
         if (!$documentPage) {
-            return response()->json(['error' => 'Page not found'], 404);
+            return response()->json(['error' => __('messages.pages.not_found_plain')], 404);
         }
 
         $translation = DocumentPageTranslation::where([
@@ -708,7 +708,7 @@ public function dismissWrongLanguage(Document $document, int $page, string $lang
         ])->first();
 
         if (!$translation) {
-            return response()->json(['error' => 'Translation not found'], 404);
+            return response()->json(['error' => __('messages.translation.not_found_plain')], 404);
         }
 
         $translation->update(['wrong_language' => false]);
diff --git a/app/Http/Middleware/SetLocale.php b/app/Http/Middleware/SetLocale.php
new file mode 100644
index 0000000..54dc033
--- /dev/null
+++ b/app/Http/Middleware/SetLocale.php
@@ -0,0 +1,41 @@
+<?php
+
+namespace App\Http\Middleware;
+
+use Closure;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\App;
+use Symfony\Component\HttpFoundation\Response;
+
+class SetLocale
+{
+    /** Locales the application ships translations for. */
+    private const SUPPORTED = ['en', 'ro'];
+
+    /**
+     * Handle an incoming request.
+     *
+     * Resolves the request locale from the Accept-Language header (set by the
+     * frontend from the user's preference), clamps it to a supported locale,
+     * and applies it so controllers, validation, and emails localize correctly.
+     *
+     * @param  \Closure(\Illuminate\Http\Request): (\Symfony\Component\HttpFoundation\Response)  $next
+     */
+    public function handle(Request $request, Closure $next): Response
+    {
+        $locale = $this->resolveLocale($request);
+        App::setLocale($locale);
+
+        return $next($request);
+    }
+
+    private function resolveLocale(Request $request): string
+    {
+        // Take the primary language subtag (e.g. "ro-RO,ro;q=0.9" -> "ro").
+        $header = (string) $request->header('Accept-Language', '');
+        $primary = strtolower(trim(explode(',', $header)[0] ?? ''));
+        $primary = explode('-', explode(';', $primary)[0])[0];
+
+        return in_array($primary, self::SUPPORTED, true) ? $primary : config('app.locale', 'en');
+    }
+}
diff --git a/app/Http/Requests/StoreDocumentRequest.php b/app/Http/Requests/StoreDocumentRequest.php
index 23967c8..2f0b9d7 100644
--- a/app/Http/Requests/StoreDocumentRequest.php
+++ b/app/Http/Requests/StoreDocumentRequest.php
@@ -23,12 +23,6 @@ public function rules(): array
         ];
     }
 
-    public function messages(): array
-    {
-        return [
-            'file.required' => 'A PDF file is required.',
-            'file.mimes' => 'The file must be a PDF document.',
-            'file.max' => 'The PDF file must not exceed 100MB.',
-        ];
-    }
+    // Custom messages live in lang/{locale}/validation.php under `custom.file.*`
+    // so they localize with the request locale (see SetLocale middleware).
 }
diff --git a/app/Http/Requests/UpdateUserPreferencesRequest.php b/app/Http/Requests/UpdateUserPreferencesRequest.php
index b813976..df68656 100644
--- a/app/Http/Requests/UpdateUserPreferencesRequest.php
+++ b/app/Http/Requests/UpdateUserPreferencesRequest.php
@@ -17,6 +17,7 @@ public function rules(): array
             'theme_mode' => ['sometimes', 'string', 'in:auto,light,dark'],
             'palette'    => ['sometimes', 'string', 'in:reading-room,cobalt,monastic,grove,ferrous,plum'],
             'layout'     => ['sometimes', 'string', 'in:reading-room,workbench,compendium,glass,scriptorium,console'],
+            'locale'     => ['sometimes', 'string', 'in:en,ro'],
         ];
     }
 }
diff --git a/app/Http/Resources/UserPreferenceResource.php b/app/Http/Resources/UserPreferenceResource.php
index 2e68596..a80ddc2 100644
--- a/app/Http/Resources/UserPreferenceResource.php
+++ b/app/Http/Resources/UserPreferenceResource.php
@@ -13,6 +13,7 @@ public function toArray(Request $request): array
             'theme_mode' => $this->theme_mode,
             'palette'    => $this->palette,
             'layout'     => $this->layout,
+            'locale'     => $this->locale,
         ];
     }
 }
diff --git a/app/Mail/PasswordChanged.php b/app/Mail/PasswordChanged.php
index 081eb06..441d105 100644
--- a/app/Mail/PasswordChanged.php
+++ b/app/Mail/PasswordChanged.php
@@ -17,7 +17,7 @@ public function __construct(public User $user) {}
 
     public function envelope(): Envelope
     {
-        return new Envelope(subject: 'Your WordKeep Password Was Changed');
+        return new Envelope(subject: __('emails.changed.subject'));
     }
 
     public function content(): Content
diff --git a/app/Mail/PasswordReset.php b/app/Mail/PasswordReset.php
index 5cb4192..eb2736d 100644
--- a/app/Mail/PasswordReset.php
+++ b/app/Mail/PasswordReset.php
@@ -21,7 +21,7 @@ public function __construct(
     public function envelope(): Envelope
     {
         return new Envelope(
-            subject: 'Reset Your WordKeep Password',
+            subject: __('emails.reset.subject'),
         );
     }
 
diff --git a/app/Mail/TwoFactorDisabled.php b/app/Mail/TwoFactorDisabled.php
index a3934bf..14174b6 100644
--- a/app/Mail/TwoFactorDisabled.php
+++ b/app/Mail/TwoFactorDisabled.php
@@ -17,7 +17,7 @@ public function __construct(public User $user) {}
 
     public function envelope(): Envelope
     {
-        return new Envelope(subject: 'Two-Factor Authentication Disabled');
+        return new Envelope(subject: __('emails.two_factor_disabled.subject'));
     }
 
     public function content(): Content
diff --git a/app/Mail/TwoFactorEnabled.php b/app/Mail/TwoFactorEnabled.php
index 58d7332..b79067b 100644
--- a/app/Mail/TwoFactorEnabled.php
+++ b/app/Mail/TwoFactorEnabled.php
@@ -17,7 +17,7 @@ public function __construct(public User $user) {}
 
     public function envelope(): Envelope
     {
-        return new Envelope(subject: 'Two-Factor Authentication Enabled');
+        return new Envelope(subject: __('emails.two_factor_enabled.subject'));
     }
 
     public function content(): Content
diff --git a/app/Mail/VerifyEmail.php b/app/Mail/VerifyEmail.php
index 8e4187e..725483d 100644
--- a/app/Mail/VerifyEmail.php
+++ b/app/Mail/VerifyEmail.php
@@ -21,7 +21,7 @@ public function __construct(
     public function envelope(): Envelope
     {
         return new Envelope(
-            subject: 'Verify Your WordKeep Email',
+            subject: __('emails.verify.subject'),
         );
     }
 
diff --git a/app/Mail/VerifyEmailChange.php b/app/Mail/VerifyEmailChange.php
index 6f846ee..d2e0d53 100644
--- a/app/Mail/VerifyEmailChange.php
+++ b/app/Mail/VerifyEmailChange.php
@@ -21,7 +21,7 @@ public function __construct(
     public function envelope(): Envelope
     {
         return new Envelope(
-            subject: 'Verify Your New WordKeep Email',
+            subject: __('emails.verify_change.subject'),
         );
     }
 
diff --git a/app/Models/User.php b/app/Models/User.php
index 13f64fa..9c3ba8f 100644
--- a/app/Models/User.php
+++ b/app/Models/User.php
@@ -2,6 +2,7 @@
 
 namespace App\Models;
 
+use Illuminate\Contracts\Translation\HasLocalePreference;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Relations\HasMany;
 use Illuminate\Database\Eloquent\Relations\HasOne;
@@ -11,10 +12,20 @@
 use Illuminate\Support\Str;
 use Laravel\Sanctum\HasApiTokens;
 
-class User extends Authenticatable
+class User extends Authenticatable implements HasLocalePreference
 {
     use HasApiTokens, HasFactory, Notifiable;
 
+    /**
+     * The locale the user should receive queued mail/notifications in.
+     * Lets Laravel localize emails per-recipient at send time, even from a
+     * queue worker with no request context. Null falls back to the app locale.
+     */
+    public function preferredLocale(): ?string
+    {
+        return $this->preference?->locale;
+    }
+
     public function documents(): HasMany
     {
         return $this->hasMany(Document::class);
diff --git a/app/Models/UserPreference.php b/app/Models/UserPreference.php
index de49a5f..50419cc 100644
--- a/app/Models/UserPreference.php
+++ b/app/Models/UserPreference.php
@@ -10,7 +10,7 @@ class UserPreference extends Model
 {
     use HasFactory;
 
-    protected $fillable = ['user_id', 'theme_mode', 'palette', 'layout'];
+    protected $fillable = ['user_id', 'theme_mode', 'palette', 'layout', 'locale'];
 
     public function user(): BelongsTo
     {
diff --git a/bootstrap/app.php b/bootstrap/app.php
index 9ae15ff..5de5ee0 100644
--- a/bootstrap/app.php
+++ b/bootstrap/app.php
@@ -18,6 +18,10 @@
         $middleware->api(prepend: [
             \Illuminate\Http\Middleware\HandleCors::class,
         ]);
+
+        $middleware->api(append: [
+            \App\Http\Middleware\SetLocale::class,
+        ]);
     })
     ->withEvents()
     ->withExceptions(function (Exceptions $exceptions): void {
diff --git a/database/migrations/2026_06_02_092335_add_locale_to_user_preferences_table.php b/database/migrations/2026_06_02_092335_add_locale_to_user_preferences_table.php
new file mode 100644
index 0000000..eafa5a5
--- /dev/null
+++ b/database/migrations/2026_06_02_092335_add_locale_to_user_preferences_table.php
@@ -0,0 +1,30 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('user_preferences', function (Blueprint $table) {
+            // Nullable with no default: NULL means "no server-side opinion yet",
+            // which lets a pre-login language choice be adopted on first login.
+            $table->string('locale', 5)->nullable()->after('layout');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('user_preferences', function (Blueprint $table) {
+            $table->dropColumn('locale');
+        });
+    }
+};
diff --git a/docs/claude-code-memories/MEMORY.md b/docs/claude-code-memories/MEMORY.md
index 585cbd4..aebd130 100644
--- a/docs/claude-code-memories/MEMORY.md
+++ b/docs/claude-code-memories/MEMORY.md
@@ -6,7 +6,7 @@
 - [SQLite-compatible migrations](sqlite-compatible-migrations.md) — `Schema::table()` + Blueprint only, no raw `ALTER TABLE MODIFY`
 - [Mirror memories to docs](mirror-memories-to-docs.md) — copy every memory into `docs/claude-code-memories/`
 - [Modal viewport clipping](modal-viewport-clipping.md) — measure-then-position floating modals/tooltips
-- [Numeric date format](numeric-date-format.md) — DD/MM/YYYY zero-padded for numeric dates
+- [Numeric date format](numeric-date-format.md) — locale-aware: en DD/MM/YYYY, ro DD.MM.YYYY (zero-padded)
 - [PHPDoc on controller methods](phpdoc-on-controller-methods.md) — title + description on every API controller method for scramble
 - [Request/Resource controllers](request-resource-controllers.md) — Form Request validation + API Resource formatting
 - [Commit message prefix](commit-message-prefix.md) — prefix commits with `[WKP-N]` from branch name
@@ -19,3 +19,6 @@
 - [AuthService spec mocks](auth-service-spec-mocks.md) — mock `user` as `vi.fn()` in LayoutComponent specs
 - [Ask plan open questions before exit](ask-plan-open-questions-before-exit.md) — resolve every open question via AskUserQuestion before ExitPlanMode
 - [Never migrate:fresh without approval](never-migrate-fresh-without-approval.md) — destructive DB commands require explicit approval
+- [Frontend tests use npm test](frontend-tests-use-npm-test.md) — run via `npm test`, not `npx vitest` directly
+- [i18n Transloco architecture](i18n-transloco-architecture.md) — asset path, no TranslocoService in shared services, scope resolution, test setup
+- [Standalone scripts self-sufficient](standalone-scripts-self-sufficient.md) — embed reference data in tooling scripts, don't read app/client assets
diff --git a/docs/claude-code-memories/frontend-tests-use-npm-test.md b/docs/claude-code-memories/frontend-tests-use-npm-test.md
new file mode 100644
index 0000000..5234839
--- /dev/null
+++ b/docs/claude-code-memories/frontend-tests-use-npm-test.md
@@ -0,0 +1,12 @@
+---
+name: frontend-tests-use-npm-test
+description: Run frontend unit tests via `npm test`, not `npx vitest` directly
+metadata:
+  type: feedback
+---
+
+In wordkeep-client, run unit tests with `npm test` (`ng test --watch=false`), never `npx vitest run ...` directly.
+
+**Why:** the Angular `@angular/build:unit-test` builder wires up the test environment (setupFiles like `src/test-setup/local-storage.ts`, Angular/Vitest integration) that invoking vitest directly bypasses, giving misleading results.
+
+**How to apply:** to run the whole suite use `npm test`. Avoid `npx vitest run <file>` for targeted runs. See [[auth-service-spec-mocks]], [[use-edit-tool-for-large-files]].
diff --git a/docs/claude-code-memories/i18n-transloco-architecture.md b/docs/claude-code-memories/i18n-transloco-architecture.md
new file mode 100644
index 0000000..43b60eb
--- /dev/null
+++ b/docs/claude-code-memories/i18n-transloco-architecture.md
@@ -0,0 +1,26 @@
+---
+name: i18n-transloco-architecture
+description: WordKeep i18n conventions and Transloco gotchas (asset path, no service injection, scope resolution, test setup)
+metadata:
+  type: project
+---
+
+Localization (WKP-36) uses **@jsverse/transloco** (frontend) + Laravel `lang/` (backend). Locales: `en` (default), `ro`. Four non-obvious conventions/traps:
+
+1. **i18n JSON lives in `wordkeep-client/public/assets/i18n/`, NOT `src/assets/i18n/`.** `angular.json` globs `public/**/*` to the asset root, so the loader fetches `/assets/i18n/<lang>.json` and `/assets/i18n/<scope>/<lang>.json` from there. Putting files under `src/assets` (as Transloco docs assume) means they won't be served.
+
+2. **Never inject `TranslocoService` into a widely-depended-on service** (e.g. `UserPreferencesService`). It makes Transloco a transitive DI dependency of half the app and breaks ~20 unrelated specs with `No provider for TRANSLOCO_TRANSPILER`. The locale→Transloco bridge lives in `app.config.ts` via `provideAppInitializer` (an `effect` linking `prefs.locale()` → `transloco.setActiveLang()`). The active locale itself is a signal on `UserPreferencesService` (`locale()`, `setLocale()`, `localeId()`), persisted to `wk:locale` + `/api/preferences`.
+
+3. **Scoped resolution gotcha:** inside a route with `provideTranslocoScope('x')`, the pipe/directive default to scope `x` and do NOT fall back to global keys. Shared labels must be duplicated into each scope that needs them (or accessed only from non-scoped/global components). Lazy scopes are attached per-route in `app.routes.ts`.
+
+4. **Spec setup:** any component using the `transloco` pipe/`*transloco` directive needs `getTranslocoTestingModule()` (from `src/app/transloco/transloco-testing.ts`) in its TestBed `imports`; register every new scope's JSON there. Run unit tests with [[frontend-tests-use-npm-test]].
+
+5. **Plurals use ICU + MessageFormat.** `@jsverse/transloco-messageformat` is installed and `provideTranslocoMessageformat()` is in `app.config.ts`. Write counts as `{count, plural, one {# x} few {# y} other {# de z}}` — Romanian needs the `few` form (2–19) and `de` for 20+. Do NOT use an English `{{plural}}` `''`/`'s'` suffix. (The testing module can't register the transpiler via `forRoot`, so ICU renders literally in unit tests — fine unless a spec asserts plural text, in which case add `provideTranslocoMessageformat()` to that spec's providers.)
+
+6. **Language names live in the GLOBAL `languages.<code>` map** (`public/assets/i18n/{en,ro}.json`). Resolve them with `this.transloco.translate('languages.' + code)` (programmatic `translate()` reads the root, unaffected by a component's ambient scope), falling back to the code when the returned value equals the key. Don't reintroduce per-component English language maps.
+
+7. **Backend (Laravel) localization.** User-facing API messages live in `lang/{en,ro}/messages.php` (domain-grouped: `auth, profile, documents, pages, ocr, translation, page_linking, footnotes, bulk_ocr`); controllers return `__('messages.<group>.<key>')`, never hardcoded literals. EN values are kept verbatim-identical to the old literals so PHPUnit assertions (which run under default `en`) stay green. Generic `['error' => 'Not found']` 404s and `app/Exceptions`+`app/Jobs` messages are intentionally NOT localized. Validation field names come from the `attributes` array in `lang/{en,ro}/validation.php`; wrong-password replies reuse `validation.current_password`. The frontend shows `err.error?.message ?? translate('<fallback>')`, so any English `message` overrides the RO fallback — that's why backend messages must be localized.
+
+8. **Queued mail must stamp the locale.** Mailables are queued (`QUEUE_CONNECTION=database`); the worker has no request context (defaults to `en`), and `HasLocalePreference` is useless when mail is sent to a string address or before the prefs row exists (registration). Always queue with `Mail::to($x)->locale(app()->getLocale())->queue(...)` so the request locale (from the `Accept-Language` interceptor) is serialized onto the job.
+
+See [[numeric-date-format]] for locale-aware dates/numbers (`en-GB`/`ro` registered in `app.config.ts`).
diff --git a/docs/claude-code-memories/numeric-date-format.md b/docs/claude-code-memories/numeric-date-format.md
index 133c145..d90662d 100644
--- a/docs/claude-code-memories/numeric-date-format.md
+++ b/docs/claude-code-memories/numeric-date-format.md
@@ -6,11 +6,11 @@ metadata:
   originSessionId: dc94a6e7-98a6-4b48-9a29-a68b76e2eca0
 ---
 
-Whenever a date is displayed in numeric form (slash- or dash-separated digits), use **DD/MM/YYYY** with zero-padding on day and month — e.g. `12/04/2026`, not `4/12/2026` and not `12/4/2026`.
+Numeric dates are now **locale-aware** (WKP-36): day-first with zero-padding in both locales, only the separator changes — `en` → **DD/MM/YYYY** (`28/05/2026`), `ro` → **DD.MM.YYYY** (`28.05.2026`). Never `M/D/YYYY` or unpadded.
 
-**Why:** User preference. The default `toLocaleDateString()` returns locale-dependent formats (often `M/D/YYYY` in en-US), which is ambiguous and inconsistent. User wants a deterministic, unambiguous, day-first format.
+**Why:** User preference for a deterministic day-first format; RO follows its regional dot-separator convention. Default `toLocaleDateString()` returns ambiguous locale-dependent output.
 
 **How to apply:**
-- Don't call `toLocaleDateString()` without options for numeric output. Instead use a shared helper or `toLocaleDateString('en-GB', { day: '2-digit', month: '2-digit', year: 'numeric' })` (en-GB happens to match) — or a manual formatter that always pads to 2 digits.
-- Recommended utility: `wordkeep-client/src/app/utils/date-format.ts` → `formatNumericDate(iso: string): string`.
-- Only applies to numeric dates. Where the UI uses month names ("Jan 15, 2024"), leave existing locale-aware formatting alone.
+- Use `wordkeep-client/src/app/utils/date-format.ts` → `formatNumericDate(input, locale?)`. `locale` defaults to `'en'`; pass the active locale from `UserPreferencesService.locale()` for locale-correct output.
+- For Angular pipes (`DatePipe`/`DecimalPipe`), pass the locale id from `UserPreferencesService.localeId()` (`ro` or `en-GB`) — both registered via `registerLocaleData` in `app.config.ts`. RO numbers render `1.234,56`, en-GB `1,234.56`.
+- Only applies to numeric dates. Where the UI uses month names, leave locale-aware month formatting alone.
diff --git a/docs/claude-code-memories/standalone-scripts-self-sufficient.md b/docs/claude-code-memories/standalone-scripts-self-sufficient.md
new file mode 100644
index 0000000..e805319
--- /dev/null
+++ b/docs/claude-code-memories/standalone-scripts-self-sufficient.md
@@ -0,0 +1,16 @@
+---
+name: standalone-scripts-self-sufficient
+description: Build/tooling scripts must be self-contained, not read data from app/client assets
+metadata:
+  type: feedback
+---
+
+Standalone tooling scripts (e.g. `scripts/translate-i18n.mjs`) should embed their
+own reference data (e.g. a code→language-name map) rather than reading it from the
+client app's assets (e.g. `wordkeep-client/public/assets/i18n/en.json`).
+
+**Why:** keeps the script independent of app structure; it shouldn't break if
+client assets move or change shape.
+
+**How to apply:** when a script needs a lookup table, define it as a const in the
+script. Don't couple tooling to runtime/client JSON. Relates to [[i18n-transloco-architecture]].
diff --git a/lang/en/auth.php b/lang/en/auth.php
new file mode 100644
index 0000000..6598e2c
--- /dev/null
+++ b/lang/en/auth.php
@@ -0,0 +1,20 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Authentication Language Lines
+    |--------------------------------------------------------------------------
+    |
+    | The following language lines are used during authentication for various
+    | messages that we need to display to the user. You are free to modify
+    | these language lines according to your application's requirements.
+    |
+    */
+
+    'failed' => 'These credentials do not match our records.',
+    'password' => 'The provided password is incorrect.',
+    'throttle' => 'Too many login attempts. Please try again in :seconds seconds.',
+
+];
diff --git a/lang/en/emails.php b/lang/en/emails.php
new file mode 100644
index 0000000..808e298
--- /dev/null
+++ b/lang/en/emails.php
@@ -0,0 +1,59 @@
+<?php
+
+return [
+
+    'common' => [
+        'fallback'        => "If the button doesn't work, copy and paste this link into your browser:",
+        'security_footer' => 'This is an automated security notification from WordKeep.',
+    ],
+
+    'verify' => [
+        'subject' => 'Verify Your WordKeep Email',
+        'title'   => 'Welcome, :name!',
+        'intro'   => 'Thanks for signing up for WordKeep. To complete your registration and activate your account, please verify your email address by clicking the button below.',
+        'button'  => 'Verify Email Address',
+        'expiry'  => "This link will expire in :days days. If you don't verify your email within this time, your account will be automatically deleted.",
+        'ignore'  => "If you didn't create an account with WordKeep, you can safely ignore this email.",
+    ],
+
+    'reset' => [
+        'subject' => 'Reset Your WordKeep Password',
+        'title'   => 'Reset Your Password',
+        'intro'   => 'Hi :name, we received a request to reset your WordKeep password. Click the button below to choose a new password.',
+        'button'  => 'Reset Password',
+        'expiry'  => 'This link will expire in :minutes minutes.',
+        'ignore'  => "If you didn't request a password reset, you can safely ignore this email.",
+    ],
+
+    'changed' => [
+        'subject' => 'Your WordKeep Password Was Changed',
+        'title'   => 'Password changed, :name',
+        'intro'   => 'Your WordKeep password was just changed. If you made this change, no further action is needed.',
+        'warning' => 'If you did not change your password, please reset it immediately using the "Forgot password?" link on the login page.',
+    ],
+
+    'two_factor_enabled' => [
+        'subject'  => 'Two-Factor Authentication Enabled',
+        'title'    => 'Two-factor authentication enabled, :name',
+        'intro'    => 'Two-factor authentication has been enabled on your WordKeep account. You will now be asked for a 6-digit code from your authenticator app each time you sign in.',
+        'recovery' => 'Make sure to keep your recovery codes in a safe place — they are the only way to access your account if you lose your authenticator device.',
+        'warning'  => 'If you did not make this change, please contact us immediately.',
+    ],
+
+    'two_factor_disabled' => [
+        'subject' => 'Two-Factor Authentication Disabled',
+        'title'   => 'Two-factor authentication disabled, :name',
+        'intro'   => 'Two-factor authentication has been disabled on your WordKeep account. You will no longer be asked for a code when signing in.',
+        'warning' => 'If you did not make this change, your account may be compromised. Please change your password immediately and re-enable two-factor authentication.',
+    ],
+
+    'verify_change' => [
+        'subject' => 'Verify Your New WordKeep Email',
+        'title'   => 'Confirm your new email, :name',
+        'intro'   => 'You requested to change your WordKeep email address to this one. Click the button below to confirm the change.',
+        'button'  => 'Confirm New Email',
+        'expiry'  => 'This link will expire in :days days. If not confirmed, your email address will remain unchanged.',
+        'ignore'  => "If you didn't request this email change, you can safely ignore this email. Your current email address remains active.",
+    ],
+
+];
diff --git a/lang/en/messages.php b/lang/en/messages.php
new file mode 100644
index 0000000..783be87
--- /dev/null
+++ b/lang/en/messages.php
@@ -0,0 +1,89 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | API Response Messages
+    |--------------------------------------------------------------------------
+    |
+    | User-facing messages returned by API controllers. Generic "Not found"
+    | authorization responses and technical exception/job messages are kept
+    | as-is (not localized) on purpose.
+    |
+    */
+
+    'auth' => [
+        'registered' => 'Registration successful. Please check your email to verify your account.',
+        'email_not_verified' => 'Please verify your email before logging in. Check your inbox for the verification link.',
+        'challenge_invalid' => 'Invalid or expired challenge.',
+        'challenge_expired' => 'Challenge expired. Please log in again.',
+        'code_invalid' => 'Invalid code.',
+        'verification_token_invalid' => 'Invalid or expired verification token.',
+        'email_verified' => 'Email verified successfully.',
+        'verification_resent' => 'If an unverified account exists, a verification email has been sent.',
+        'reset_link_sent' => 'If an account exists, a password reset link has been sent.',
+        'reset_token_invalid' => 'Invalid or expired reset token.',
+        'reset_link_expired' => 'Reset link has expired. Please request a new one.',
+        'password_reset' => 'Password reset successful.',
+        'logged_out' => 'Successfully logged out',
+    ],
+
+    'profile' => [
+        'password_verified' => 'Password verified.',
+        'email_change_sent' => 'Verification email sent to :email.',
+        'no_pending_email_change' => 'No pending email change.',
+        'verification_resent' => 'Verification email resent.',
+        'email_change_token_invalid' => 'Invalid or expired token.',
+        'email_change_expired' => 'This link has expired. Please request a new email change.',
+        'email_updated' => 'Email updated successfully.',
+        'password_updated' => 'Password updated.',
+        'two_factor_not_initiated' => 'Two-factor setup not initiated.',
+        'two_factor_code_invalid' => 'Invalid verification code.',
+    ],
+
+    'documents' => [
+        'retry_only_failed' => 'Only failed documents can be retried',
+    ],
+
+    'pages' => [
+        'image_unavailable' => 'Page image could not be generated.',
+        'not_found' => 'Page :page not found.',
+        'not_found_plain' => 'Page not found',
+    ],
+
+    'ocr' => [
+        'footnote_use_insert' => 'Use the insert button to add footnote references.',
+        'footnote_use_unlink' => 'Use the unlink button to remove footnote references.',
+    ],
+
+    'translation' => [
+        'page_no_ocr' => 'Page has no OCR text to translate.',
+        'not_found_for_page' => 'No translation found for this page and language.',
+        'not_found_plain' => 'Translation not found',
+        'document_not_ready' => 'Document is not ready.',
+        'job_already_running' => 'A translation job for this language is already running.',
+        'no_running_job' => 'No running translation job to cancel.',
+        'deleted' => 'Translation deleted.',
+        'footnote_failed' => 'Page translated, but footnote [^:number] failed: :error',
+        'footnote_failed_short' => 'Footnote [^:number] failed to translate: :error',
+    ],
+
+    'page_linking' => [
+        'invalid_page' => 'Invalid page',
+        'ignored_page' => 'Cannot set link for ignored page',
+    ],
+
+    'footnotes' => [
+        'not_linked' => 'Footnote is not linked to a page',
+    ],
+
+    'bulk_ocr' => [
+        'not_ready' => 'Document is not ready for OCR processing.',
+        'already_running' => 'Bulk OCR is already running for this document.',
+        'queued' => 'Bulk OCR job queued successfully.',
+        'no_running_job' => 'No bulk OCR job is running for this document.',
+        'cancelled' => 'Bulk OCR job cancelled.',
+    ],
+
+];
diff --git a/lang/en/pagination.php b/lang/en/pagination.php
new file mode 100644
index 0000000..d481411
--- /dev/null
+++ b/lang/en/pagination.php
@@ -0,0 +1,19 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Pagination Language Lines
+    |--------------------------------------------------------------------------
+    |
+    | The following language lines are used by the paginator library to build
+    | the simple pagination links. You are free to change them to anything
+    | you want to customize your views to better match your application.
+    |
+    */
+
+    'previous' => '&laquo; Previous',
+    'next' => 'Next &raquo;',
+
+];
diff --git a/lang/en/passwords.php b/lang/en/passwords.php
new file mode 100644
index 0000000..fad3a7d
--- /dev/null
+++ b/lang/en/passwords.php
@@ -0,0 +1,22 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Password Reset Language Lines
+    |--------------------------------------------------------------------------
+    |
+    | The following language lines are the default lines which match reasons
+    | that are given by the password broker for a password update attempt
+    | outcome such as failure due to an invalid password / reset token.
+    |
+    */
+
+    'reset' => 'Your password has been reset.',
+    'sent' => 'We have emailed your password reset link.',
+    'throttled' => 'Please wait before retrying.',
+    'token' => 'This password reset token is invalid.',
+    'user' => "We can't find a user with that email address.",
+
+];
diff --git a/lang/en/validation.php b/lang/en/validation.php
new file mode 100644
index 0000000..244a33f
--- /dev/null
+++ b/lang/en/validation.php
@@ -0,0 +1,210 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Validation Language Lines
+    |--------------------------------------------------------------------------
+    |
+    | The following language lines contain the default error messages used by
+    | the validator class. Some of these rules have multiple versions such
+    | as the size rules. Feel free to tweak each of these messages here.
+    |
+    */
+
+    'accepted' => 'The :attribute field must be accepted.',
+    'accepted_if' => 'The :attribute field must be accepted when :other is :value.',
+    'active_url' => 'The :attribute field must be a valid URL.',
+    'after' => 'The :attribute field must be a date after :date.',
+    'after_or_equal' => 'The :attribute field must be a date after or equal to :date.',
+    'alpha' => 'The :attribute field must only contain letters.',
+    'alpha_dash' => 'The :attribute field must only contain letters, numbers, dashes, and underscores.',
+    'alpha_num' => 'The :attribute field must only contain letters and numbers.',
+    'any_of' => 'The :attribute field is invalid.',
+    'array' => 'The :attribute field must be an array.',
+    'ascii' => 'The :attribute field must only contain single-byte alphanumeric characters and symbols.',
+    'before' => 'The :attribute field must be a date before :date.',
+    'before_or_equal' => 'The :attribute field must be a date before or equal to :date.',
+    'between' => [
+        'array' => 'The :attribute field must have between :min and :max items.',
+        'file' => 'The :attribute field must be between :min and :max kilobytes.',
+        'numeric' => 'The :attribute field must be between :min and :max.',
+        'string' => 'The :attribute field must be between :min and :max characters.',
+    ],
+    'boolean' => 'The :attribute field must be true or false.',
+    'can' => 'The :attribute field contains an unauthorized value.',
+    'confirmed' => 'The :attribute field confirmation does not match.',
+    'contains' => 'The :attribute field is missing a required value.',
+    'current_password' => 'The password is incorrect.',
+    'date' => 'The :attribute field must be a valid date.',
+    'date_equals' => 'The :attribute field must be a date equal to :date.',
+    'date_format' => 'The :attribute field must match the format :format.',
+    'decimal' => 'The :attribute field must have :decimal decimal places.',
+    'declined' => 'The :attribute field must be declined.',
+    'declined_if' => 'The :attribute field must be declined when :other is :value.',
+    'different' => 'The :attribute field and :other must be different.',
+    'digits' => 'The :attribute field must be :digits digits.',
+    'digits_between' => 'The :attribute field must be between :min and :max digits.',
+    'dimensions' => 'The :attribute field has invalid image dimensions.',
+    'distinct' => 'The :attribute field has a duplicate value.',
+    'doesnt_contain' => 'The :attribute field must not contain any of the following: :values.',
+    'doesnt_end_with' => 'The :attribute field must not end with one of the following: :values.',
+    'doesnt_start_with' => 'The :attribute field must not start with one of the following: :values.',
+    'email' => 'The :attribute field must be a valid email address.',
+    'encoding' => 'The :attribute field must be encoded in :encoding.',
+    'ends_with' => 'The :attribute field must end with one of the following: :values.',
+    'enum' => 'The selected :attribute is invalid.',
+    'exists' => 'The selected :attribute is invalid.',
+    'extensions' => 'The :attribute field must have one of the following extensions: :values.',
+    'file' => 'The :attribute field must be a file.',
+    'filled' => 'The :attribute field must have a value.',
+    'gt' => [
+        'array' => 'The :attribute field must have more than :value items.',
+        'file' => 'The :attribute field must be greater than :value kilobytes.',
+        'numeric' => 'The :attribute field must be greater than :value.',
+        'string' => 'The :attribute field must be greater than :value characters.',
+    ],
+    'gte' => [
+        'array' => 'The :attribute field must have :value items or more.',
+        'file' => 'The :attribute field must be greater than or equal to :value kilobytes.',
+        'numeric' => 'The :attribute field must be greater than or equal to :value.',
+        'string' => 'The :attribute field must be greater than or equal to :value characters.',
+    ],
+    'hex_color' => 'The :attribute field must be a valid hexadecimal color.',
+    'image' => 'The :attribute field must be an image.',
+    'in' => 'The selected :attribute is invalid.',
+    'in_array' => 'The :attribute field must exist in :other.',
+    'in_array_keys' => 'The :attribute field must contain at least one of the following keys: :values.',
+    'integer' => 'The :attribute field must be an integer.',
+    'ip' => 'The :attribute field must be a valid IP address.',
+    'ipv4' => 'The :attribute field must be a valid IPv4 address.',
+    'ipv6' => 'The :attribute field must be a valid IPv6 address.',
+    'json' => 'The :attribute field must be a valid JSON string.',
+    'list' => 'The :attribute field must be a list.',
+    'lowercase' => 'The :attribute field must be lowercase.',
+    'lt' => [
+        'array' => 'The :attribute field must have less than :value items.',
+        'file' => 'The :attribute field must be less than :value kilobytes.',
+        'numeric' => 'The :attribute field must be less than :value.',
+        'string' => 'The :attribute field must be less than :value characters.',
+    ],
+    'lte' => [
+        'array' => 'The :attribute field must not have more than :value items.',
+        'file' => 'The :attribute field must be less than or equal to :value kilobytes.',
+        'numeric' => 'The :attribute field must be less than or equal to :value.',
+        'string' => 'The :attribute field must be less than or equal to :value characters.',
+    ],
+    'mac_address' => 'The :attribute field must be a valid MAC address.',
+    'max' => [
+        'array' => 'The :attribute field must not have more than :max items.',
+        'file' => 'The :attribute field must not be greater than :max kilobytes.',
+        'numeric' => 'The :attribute field must not be greater than :max.',
+        'string' => 'The :attribute field must not be greater than :max characters.',
+    ],
+    'max_digits' => 'The :attribute field must not have more than :max digits.',
+    'mimes' => 'The :attribute field must be a file of type: :values.',
+    'mimetypes' => 'The :attribute field must be a file of type: :values.',
+    'min' => [
+        'array' => 'The :attribute field must have at least :min items.',
+        'file' => 'The :attribute field must be at least :min kilobytes.',
+        'numeric' => 'The :attribute field must be at least :min.',
+        'string' => 'The :attribute field must be at least :min characters.',
+    ],
+    'min_digits' => 'The :attribute field must have at least :min digits.',
+    'missing' => 'The :attribute field must be missing.',
+    'missing_if' => 'The :attribute field must be missing when :other is :value.',
+    'missing_unless' => 'The :attribute field must be missing unless :other is :value.',
+    'missing_with' => 'The :attribute field must be missing when :values is present.',
+    'missing_with_all' => 'The :attribute field must be missing when :values are present.',
+    'multiple_of' => 'The :attribute field must be a multiple of :value.',
+    'not_in' => 'The selected :attribute is invalid.',
+    'not_regex' => 'The :attribute field format is invalid.',
+    'numeric' => 'The :attribute field must be a number.',
+    'password' => [
+        'letters' => 'The :attribute field must contain at least one letter.',
+        'mixed' => 'The :attribute field must contain at least one uppercase and one lowercase letter.',
+        'numbers' => 'The :attribute field must contain at least one number.',
+        'symbols' => 'The :attribute field must contain at least one symbol.',
+        'uncompromised' => 'The given :attribute has appeared in a data leak. Please choose a different :attribute.',
+    ],
+    'present' => 'The :attribute field must be present.',
+    'present_if' => 'The :attribute field must be present when :other is :value.',
+    'present_unless' => 'The :attribute field must be present unless :other is :value.',
+    'present_with' => 'The :attribute field must be present when :values is present.',
+    'present_with_all' => 'The :attribute field must be present when :values are present.',
+    'prohibited' => 'The :attribute field is prohibited.',
+    'prohibited_if' => 'The :attribute field is prohibited when :other is :value.',
+    'prohibited_if_accepted' => 'The :attribute field is prohibited when :other is accepted.',
+    'prohibited_if_declined' => 'The :attribute field is prohibited when :other is declined.',
+    'prohibited_unless' => 'The :attribute field is prohibited unless :other is in :values.',
+    'prohibits' => 'The :attribute field prohibits :other from being present.',
+    'regex' => 'The :attribute field format is invalid.',
+    'required' => 'The :attribute field is required.',
+    'required_array_keys' => 'The :attribute field must contain entries for: :values.',
+    'required_if' => 'The :attribute field is required when :other is :value.',
+    'required_if_accepted' => 'The :attribute field is required when :other is accepted.',
+    'required_if_declined' => 'The :attribute field is required when :other is declined.',
+    'required_unless' => 'The :attribute field is required unless :other is in :values.',
+    'required_with' => 'The :attribute field is required when :values is present.',
+    'required_with_all' => 'The :attribute field is required when :values are present.',
+    'required_without' => 'The :attribute field is required when :values is not present.',
+    'required_without_all' => 'The :attribute field is required when none of :values are present.',
+    'same' => 'The :attribute field must match :other.',
+    'size' => [
+        'array' => 'The :attribute field must contain :size items.',
+        'file' => 'The :attribute field must be :size kilobytes.',
+        'numeric' => 'The :attribute field must be :size.',
+        'string' => 'The :attribute field must be :size characters.',
+    ],
+    'starts_with' => 'The :attribute field must start with one of the following: :values.',
+    'string' => 'The :attribute field must be a string.',
+    'timezone' => 'The :attribute field must be a valid timezone.',
+    'unique' => 'The :attribute has already been taken.',
+    'uploaded' => 'The :attribute failed to upload.',
+    'uppercase' => 'The :attribute field must be uppercase.',
+    'url' => 'The :attribute field must be a valid URL.',
+    'ulid' => 'The :attribute field must be a valid ULID.',
+    'uuid' => 'The :attribute field must be a valid UUID.',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Custom Validation Language Lines
+    |--------------------------------------------------------------------------
+    |
+    | Here you may specify custom validation messages for attributes using the
+    | convention "attribute.rule" to name the lines. This makes it quick to
+    | specify a specific custom language line for a given attribute rule.
+    |
+    */
+
+    'custom' => [
+        'file' => [
+            'required' => 'A PDF file is required.',
+            'mimes' => 'The file must be a PDF document.',
+            'max' => 'The PDF file must not exceed 100MB.',
+        ],
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Custom Validation Attributes
+    |--------------------------------------------------------------------------
+    |
+    | The following language lines are used to swap our attribute placeholder
+    | with something more reader friendly such as "E-Mail Address" instead
+    | of "email". This simply helps us make our message more expressive.
+    |
+    */
+
+    'attributes' => [
+        'name' => 'name',
+        'email' => 'email address',
+        'new_email' => 'new email address',
+        'password' => 'password',
+        'current_password' => 'current password',
+        'new_password' => 'new password',
+        'file' => 'file',
+    ],
+
+];
diff --git a/lang/ro/auth.php b/lang/ro/auth.php
new file mode 100644
index 0000000..bbf1115
--- /dev/null
+++ b/lang/ro/auth.php
@@ -0,0 +1,15 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Linii de limbă pentru autentificare
+    |--------------------------------------------------------------------------
+    */
+
+    'failed' => 'Aceste date de autentificare nu corespund înregistrărilor noastre.',
+    'password' => 'Parola furnizată este incorectă.',
+    'throttle' => 'Prea multe încercări de autentificare. Te rugăm să încerci din nou peste :seconds secunde.',
+
+];
diff --git a/lang/ro/emails.php b/lang/ro/emails.php
new file mode 100644
index 0000000..9045268
--- /dev/null
+++ b/lang/ro/emails.php
@@ -0,0 +1,59 @@
+<?php
+
+return [
+
+    'common' => [
+        'fallback'        => 'Dacă butonul nu funcționează, copiază și lipește acest link în browser:',
+        'security_footer' => 'Aceasta este o notificare de securitate automată de la WordKeep.',
+    ],
+
+    'verify' => [
+        'subject' => 'Confirmă-ți adresa de e-mail WordKeep',
+        'title'   => 'Bun venit, :name!',
+        'intro'   => 'Îți mulțumim că te-ai înscris pe WordKeep. Pentru a finaliza înregistrarea și a-ți activa contul, te rugăm să-ți confirmi adresa de e-mail apăsând butonul de mai jos.',
+        'button'  => 'Confirmă adresa de e-mail',
+        'expiry'  => 'Acest link va expira în :days zile. Dacă nu îți confirmi e-mailul în acest interval, contul tău va fi șters automat.',
+        'ignore'  => 'Dacă nu ți-ai creat un cont pe WordKeep, poți ignora în siguranță acest e-mail.',
+    ],
+
+    'reset' => [
+        'subject' => 'Resetează-ți parola WordKeep',
+        'title'   => 'Resetează-ți parola',
+        'intro'   => 'Salut :name, am primit o solicitare de resetare a parolei tale WordKeep. Apasă butonul de mai jos pentru a alege o parolă nouă.',
+        'button'  => 'Resetează parola',
+        'expiry'  => 'Acest link va expira în :minutes minute.',
+        'ignore'  => 'Dacă nu ai cerut o resetare a parolei, poți ignora în siguranță acest e-mail.',
+    ],
+
+    'changed' => [
+        'subject' => 'Parola ta WordKeep a fost schimbată',
+        'title'   => 'Parolă schimbată, :name',
+        'intro'   => 'Parola ta WordKeep tocmai a fost schimbată. Dacă tu ai făcut această modificare, nu este nevoie de nicio altă acțiune.',
+        'warning' => 'Dacă nu ți-ai schimbat parola, te rugăm să o resetezi imediat folosind linkul „Ai uitat parola?” de pe pagina de autentificare.',
+    ],
+
+    'two_factor_enabled' => [
+        'subject'  => 'Autentificarea în doi pași a fost activată',
+        'title'    => 'Autentificare în doi pași activată, :name',
+        'intro'    => 'Autentificarea în doi pași a fost activată pe contul tău WordKeep. De acum, ți se va cere un cod din 6 cifre din aplicația ta de autentificare la fiecare conectare.',
+        'recovery' => 'Asigură-te că păstrezi codurile de recuperare într-un loc sigur — sunt singura cale de a-ți accesa contul dacă îți pierzi dispozitivul de autentificare.',
+        'warning'  => 'Dacă nu tu ai făcut această modificare, te rugăm să ne contactezi imediat.',
+    ],
+
+    'two_factor_disabled' => [
+        'subject' => 'Autentificarea în doi pași a fost dezactivată',
+        'title'   => 'Autentificare în doi pași dezactivată, :name',
+        'intro'   => 'Autentificarea în doi pași a fost dezactivată pe contul tău WordKeep. Nu ți se va mai cere un cod la conectare.',
+        'warning' => 'Dacă nu tu ai făcut această modificare, contul tău ar putea fi compromis. Te rugăm să îți schimbi parola imediat și să reactivezi autentificarea în doi pași.',
+    ],
+
+    'verify_change' => [
+        'subject' => 'Confirmă noua adresă de e-mail WordKeep',
+        'title'   => 'Confirmă noua ta adresă de e-mail, :name',
+        'intro'   => 'Ai solicitat schimbarea adresei tale de e-mail WordKeep cu aceasta. Apasă butonul de mai jos pentru a confirma modificarea.',
+        'button'  => 'Confirmă noul e-mail',
+        'expiry'  => 'Acest link va expira în :days zile. Dacă nu este confirmat, adresa ta de e-mail va rămâne neschimbată.',
+        'ignore'  => 'Dacă nu ai cerut această schimbare de e-mail, poți ignora în siguranță acest e-mail. Adresa ta de e-mail actuală rămâne activă.',
+    ],
+
+];
diff --git a/lang/ro/messages.php b/lang/ro/messages.php
new file mode 100644
index 0000000..f23ee94
--- /dev/null
+++ b/lang/ro/messages.php
@@ -0,0 +1,89 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Mesaje pentru răspunsurile API
+    |--------------------------------------------------------------------------
+    |
+    | Mesaje vizibile utilizatorului, returnate de controllerele API. Răspunsurile
+    | generice „Not found” și mesajele tehnice din excepții/joburi rămân
+    | intenționat netraduse.
+    |
+    */
+
+    'auth' => [
+        'registered' => 'Înregistrare reușită. Verifică-ți e-mailul pentru a-ți confirma contul.',
+        'email_not_verified' => 'Confirmă-ți adresa de e-mail înainte de autentificare. Verifică-ți inboxul pentru linkul de confirmare.',
+        'challenge_invalid' => 'Verificare invalidă sau expirată.',
+        'challenge_expired' => 'Verificarea a expirat. Te rugăm să te autentifici din nou.',
+        'code_invalid' => 'Cod invalid.',
+        'verification_token_invalid' => 'Token de confirmare invalid sau expirat.',
+        'email_verified' => 'Adresa de e-mail a fost confirmată cu succes.',
+        'verification_resent' => 'Dacă există un cont neconfirmat, a fost trimis un e-mail de confirmare.',
+        'reset_link_sent' => 'Dacă există un cont, a fost trimis un link de resetare a parolei.',
+        'reset_token_invalid' => 'Token de resetare invalid sau expirat.',
+        'reset_link_expired' => 'Linkul de resetare a expirat. Te rugăm să soliciți unul nou.',
+        'password_reset' => 'Parolă resetată cu succes.',
+        'logged_out' => 'Deconectare reușită',
+    ],
+
+    'profile' => [
+        'password_verified' => 'Parolă verificată.',
+        'email_change_sent' => 'E-mail de confirmare trimis către :email.',
+        'no_pending_email_change' => 'Nicio schimbare de e-mail în așteptare.',
+        'verification_resent' => 'E-mail de confirmare retrimis.',
+        'email_change_token_invalid' => 'Token invalid sau expirat.',
+        'email_change_expired' => 'Acest link a expirat. Te rugăm să soliciți o nouă schimbare de e-mail.',
+        'email_updated' => 'Adresa de e-mail a fost actualizată cu succes.',
+        'password_updated' => 'Parolă actualizată.',
+        'two_factor_not_initiated' => 'Configurarea autentificării în doi pași nu a fost inițiată.',
+        'two_factor_code_invalid' => 'Cod de verificare invalid.',
+    ],
+
+    'documents' => [
+        'retry_only_failed' => 'Doar documentele eșuate pot fi reîncercate',
+    ],
+
+    'pages' => [
+        'image_unavailable' => 'Imaginea paginii nu a putut fi generată.',
+        'not_found' => 'Pagina :page nu a fost găsită.',
+        'not_found_plain' => 'Pagina nu a fost găsită',
+    ],
+
+    'ocr' => [
+        'footnote_use_insert' => 'Folosește butonul de inserare pentru a adăuga referințe la note de subsol.',
+        'footnote_use_unlink' => 'Folosește butonul de dezlegare pentru a elimina referințe la note de subsol.',
+    ],
+
+    'translation' => [
+        'page_no_ocr' => 'Pagina nu are text OCR de tradus.',
+        'not_found_for_page' => 'Nu s-a găsit nicio traducere pentru această pagină și limbă.',
+        'not_found_plain' => 'Traducere negăsită',
+        'document_not_ready' => 'Documentul nu este pregătit.',
+        'job_already_running' => 'O sarcină de traducere pentru această limbă este deja în curs.',
+        'no_running_job' => 'Nicio sarcină de traducere în curs de anulat.',
+        'deleted' => 'Traducere ștearsă.',
+        'footnote_failed' => 'Pagina a fost tradusă, dar nota de subsol [^:number] a eșuat: :error',
+        'footnote_failed_short' => 'Nota de subsol [^:number] nu a putut fi tradusă: :error',
+    ],
+
+    'page_linking' => [
+        'invalid_page' => 'Pagină invalidă',
+        'ignored_page' => 'Nu se poate seta legătura pentru o pagină ignorată',
+    ],
+
+    'footnotes' => [
+        'not_linked' => 'Nota de subsol nu este legată de o pagină',
+    ],
+
+    'bulk_ocr' => [
+        'not_ready' => 'Documentul nu este pregătit pentru procesare OCR.',
+        'already_running' => 'OCR în masă rulează deja pentru acest document.',
+        'queued' => 'Sarcina OCR în masă a fost pusă în coadă cu succes.',
+        'no_running_job' => 'Nicio sarcină OCR în masă nu rulează pentru acest document.',
+        'cancelled' => 'Sarcina OCR în masă a fost anulată.',
+    ],
+
+];
diff --git a/lang/ro/pagination.php b/lang/ro/pagination.php
new file mode 100644
index 0000000..ecc091a
--- /dev/null
+++ b/lang/ro/pagination.php
@@ -0,0 +1,14 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Linii de limbă pentru paginare
+    |--------------------------------------------------------------------------
+    */
+
+    'previous' => '&laquo; Anterior',
+    'next' => 'Următor &raquo;',
+
+];
diff --git a/lang/ro/passwords.php b/lang/ro/passwords.php
new file mode 100644
index 0000000..3a901a7
--- /dev/null
+++ b/lang/ro/passwords.php
@@ -0,0 +1,17 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Linii de limbă pentru resetarea parolei
+    |--------------------------------------------------------------------------
+    */
+
+    'reset' => 'Parola ta a fost resetată.',
+    'sent' => 'Ți-am trimis prin e-mail linkul de resetare a parolei.',
+    'throttled' => 'Te rugăm să aștepți înainte de a încerca din nou.',
+    'token' => 'Acest token de resetare a parolei este invalid.',
+    'user' => 'Nu găsim niciun utilizator cu această adresă de e-mail.',
+
+];
diff --git a/lang/ro/validation.php b/lang/ro/validation.php
new file mode 100644
index 0000000..22e8db6
--- /dev/null
+++ b/lang/ro/validation.php
@@ -0,0 +1,183 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Linii de limbă pentru validare
+    |--------------------------------------------------------------------------
+    */
+
+    'accepted' => 'Câmpul :attribute trebuie acceptat.',
+    'accepted_if' => 'Câmpul :attribute trebuie acceptat când :other este :value.',
+    'active_url' => 'Câmpul :attribute trebuie să fie o adresă URL validă.',
+    'after' => 'Câmpul :attribute trebuie să fie o dată după :date.',
+    'after_or_equal' => 'Câmpul :attribute trebuie să fie o dată după sau egală cu :date.',
+    'alpha' => 'Câmpul :attribute trebuie să conțină doar litere.',
+    'alpha_dash' => 'Câmpul :attribute trebuie să conțină doar litere, cifre, liniuțe și liniuțe de subliniere.',
+    'alpha_num' => 'Câmpul :attribute trebuie să conțină doar litere și cifre.',
+    'any_of' => 'Câmpul :attribute este invalid.',
+    'array' => 'Câmpul :attribute trebuie să fie o listă.',
+    'ascii' => 'Câmpul :attribute trebuie să conțină doar caractere alfanumerice și simboluri pe un singur octet.',
+    'before' => 'Câmpul :attribute trebuie să fie o dată înainte de :date.',
+    'before_or_equal' => 'Câmpul :attribute trebuie să fie o dată înainte sau egală cu :date.',
+    'between' => [
+        'array' => 'Câmpul :attribute trebuie să aibă între :min și :max elemente.',
+        'file' => 'Câmpul :attribute trebuie să aibă între :min și :max kiloocteți.',
+        'numeric' => 'Câmpul :attribute trebuie să fie între :min și :max.',
+        'string' => 'Câmpul :attribute trebuie să aibă între :min și :max caractere.',
+    ],
+    'boolean' => 'Câmpul :attribute trebuie să fie adevărat sau fals.',
+    'can' => 'Câmpul :attribute conține o valoare neautorizată.',
+    'confirmed' => 'Confirmarea câmpului :attribute nu se potrivește.',
+    'contains' => 'Câmpului :attribute îi lipsește o valoare obligatorie.',
+    'current_password' => 'Parola este incorectă.',
+    'date' => 'Câmpul :attribute trebuie să fie o dată validă.',
+    'date_equals' => 'Câmpul :attribute trebuie să fie o dată egală cu :date.',
+    'date_format' => 'Câmpul :attribute trebuie să corespundă formatului :format.',
+    'decimal' => 'Câmpul :attribute trebuie să aibă :decimal zecimale.',
+    'declined' => 'Câmpul :attribute trebuie refuzat.',
+    'declined_if' => 'Câmpul :attribute trebuie refuzat când :other este :value.',
+    'different' => 'Câmpurile :attribute și :other trebuie să fie diferite.',
+    'digits' => 'Câmpul :attribute trebuie să aibă :digits cifre.',
+    'digits_between' => 'Câmpul :attribute trebuie să aibă între :min și :max cifre.',
+    'dimensions' => 'Câmpul :attribute are dimensiuni de imagine invalide.',
+    'distinct' => 'Câmpul :attribute are o valoare duplicată.',
+    'doesnt_contain' => 'Câmpul :attribute nu trebuie să conțină niciuna dintre următoarele: :values.',
+    'doesnt_end_with' => 'Câmpul :attribute nu trebuie să se termine cu una dintre următoarele: :values.',
+    'doesnt_start_with' => 'Câmpul :attribute nu trebuie să înceapă cu una dintre următoarele: :values.',
+    'email' => 'Câmpul :attribute trebuie să fie o adresă de e-mail validă.',
+    'encoding' => 'Câmpul :attribute trebuie să fie codificat în :encoding.',
+    'ends_with' => 'Câmpul :attribute trebuie să se termine cu una dintre următoarele: :values.',
+    'enum' => 'Valoarea selectată pentru :attribute este invalidă.',
+    'exists' => 'Valoarea selectată pentru :attribute este invalidă.',
+    'extensions' => 'Câmpul :attribute trebuie să aibă una dintre extensiile: :values.',
+    'file' => 'Câmpul :attribute trebuie să fie un fișier.',
+    'filled' => 'Câmpul :attribute trebuie să aibă o valoare.',
+    'gt' => [
+        'array' => 'Câmpul :attribute trebuie să aibă mai mult de :value elemente.',
+        'file' => 'Câmpul :attribute trebuie să fie mai mare de :value kiloocteți.',
+        'numeric' => 'Câmpul :attribute trebuie să fie mai mare de :value.',
+        'string' => 'Câmpul :attribute trebuie să aibă mai mult de :value caractere.',
+    ],
+    'gte' => [
+        'array' => 'Câmpul :attribute trebuie să aibă :value elemente sau mai multe.',
+        'file' => 'Câmpul :attribute trebuie să fie mai mare sau egal cu :value kiloocteți.',
+        'numeric' => 'Câmpul :attribute trebuie să fie mai mare sau egal cu :value.',
+        'string' => 'Câmpul :attribute trebuie să aibă cel puțin :value caractere.',
+    ],
+    'hex_color' => 'Câmpul :attribute trebuie să fie o culoare hexazecimală validă.',
+    'image' => 'Câmpul :attribute trebuie să fie o imagine.',
+    'in' => 'Valoarea selectată pentru :attribute este invalidă.',
+    'in_array' => 'Câmpul :attribute trebuie să existe în :other.',
+    'in_array_keys' => 'Câmpul :attribute trebuie să conțină cel puțin una dintre cheile: :values.',
+    'integer' => 'Câmpul :attribute trebuie să fie un număr întreg.',
+    'ip' => 'Câmpul :attribute trebuie să fie o adresă IP validă.',
+    'ipv4' => 'Câmpul :attribute trebuie să fie o adresă IPv4 validă.',
+    'ipv6' => 'Câmpul :attribute trebuie să fie o adresă IPv6 validă.',
+    'json' => 'Câmpul :attribute trebuie să fie un șir JSON valid.',
+    'list' => 'Câmpul :attribute trebuie să fie o listă.',
+    'lowercase' => 'Câmpul :attribute trebuie să fie cu litere mici.',
+    'lt' => [
+        'array' => 'Câmpul :attribute trebuie să aibă mai puțin de :value elemente.',
+        'file' => 'Câmpul :attribute trebuie să fie mai mic de :value kiloocteți.',
+        'numeric' => 'Câmpul :attribute trebuie să fie mai mic de :value.',
+        'string' => 'Câmpul :attribute trebuie să aibă mai puțin de :value caractere.',
+    ],
+    'lte' => [
+        'array' => 'Câmpul :attribute nu trebuie să aibă mai mult de :value elemente.',
+        'file' => 'Câmpul :attribute trebuie să fie mai mic sau egal cu :value kiloocteți.',
+        'numeric' => 'Câmpul :attribute trebuie să fie mai mic sau egal cu :value.',
+        'string' => 'Câmpul :attribute trebuie să aibă cel mult :value caractere.',
+    ],
+    'mac_address' => 'Câmpul :attribute trebuie să fie o adresă MAC validă.',
+    'max' => [
+        'array' => 'Câmpul :attribute nu trebuie să aibă mai mult de :max elemente.',
+        'file' => 'Câmpul :attribute nu trebuie să fie mai mare de :max kiloocteți.',
+        'numeric' => 'Câmpul :attribute nu trebuie să fie mai mare de :max.',
+        'string' => 'Câmpul :attribute nu trebuie să aibă mai mult de :max caractere.',
+    ],
+    'max_digits' => 'Câmpul :attribute nu trebuie să aibă mai mult de :max cifre.',
+    'mimes' => 'Câmpul :attribute trebuie să fie un fișier de tip: :values.',
+    'mimetypes' => 'Câmpul :attribute trebuie să fie un fișier de tip: :values.',
+    'min' => [
+        'array' => 'Câmpul :attribute trebuie să aibă cel puțin :min elemente.',
+        'file' => 'Câmpul :attribute trebuie să aibă cel puțin :min kiloocteți.',
+        'numeric' => 'Câmpul :attribute trebuie să fie cel puțin :min.',
+        'string' => 'Câmpul :attribute trebuie să aibă cel puțin :min caractere.',
+    ],
+    'min_digits' => 'Câmpul :attribute trebuie să aibă cel puțin :min cifre.',
+    'missing' => 'Câmpul :attribute trebuie să lipsească.',
+    'missing_if' => 'Câmpul :attribute trebuie să lipsească când :other este :value.',
+    'missing_unless' => 'Câmpul :attribute trebuie să lipsească dacă :other nu este :value.',
+    'missing_with' => 'Câmpul :attribute trebuie să lipsească când :values este prezent.',
+    'missing_with_all' => 'Câmpul :attribute trebuie să lipsească când :values sunt prezente.',
+    'multiple_of' => 'Câmpul :attribute trebuie să fie un multiplu de :value.',
+    'not_in' => 'Valoarea selectată pentru :attribute este invalidă.',
+    'not_regex' => 'Formatul câmpului :attribute este invalid.',
+    'numeric' => 'Câmpul :attribute trebuie să fie un număr.',
+    'password' => [
+        'letters' => 'Câmpul :attribute trebuie să conțină cel puțin o literă.',
+        'mixed' => 'Câmpul :attribute trebuie să conțină cel puțin o literă mare și una mică.',
+        'numbers' => 'Câmpul :attribute trebuie să conțină cel puțin o cifră.',
+        'symbols' => 'Câmpul :attribute trebuie să conțină cel puțin un simbol.',
+        'uncompromised' => 'Valoarea :attribute a apărut într-o scurgere de date. Te rugăm să alegi o altă valoare pentru :attribute.',
+    ],
+    'present' => 'Câmpul :attribute trebuie să fie prezent.',
+    'present_if' => 'Câmpul :attribute trebuie să fie prezent când :other este :value.',
+    'present_unless' => 'Câmpul :attribute trebuie să fie prezent dacă :other nu este :value.',
+    'present_with' => 'Câmpul :attribute trebuie să fie prezent când :values este prezent.',
+    'present_with_all' => 'Câmpul :attribute trebuie să fie prezent când :values sunt prezente.',
+    'prohibited' => 'Câmpul :attribute este interzis.',
+    'prohibited_if' => 'Câmpul :attribute este interzis când :other este :value.',
+    'prohibited_if_accepted' => 'Câmpul :attribute este interzis când :other este acceptat.',
+    'prohibited_if_declined' => 'Câmpul :attribute este interzis când :other este refuzat.',
+    'prohibited_unless' => 'Câmpul :attribute este interzis dacă :other nu este în :values.',
+    'prohibits' => 'Câmpul :attribute interzice prezența :other.',
+    'regex' => 'Formatul câmpului :attribute este invalid.',
+    'required' => 'Câmpul :attribute este obligatoriu.',
+    'required_array_keys' => 'Câmpul :attribute trebuie să conțină intrări pentru: :values.',
+    'required_if' => 'Câmpul :attribute este obligatoriu când :other este :value.',
+    'required_if_accepted' => 'Câmpul :attribute este obligatoriu când :other este acceptat.',
+    'required_if_declined' => 'Câmpul :attribute este obligatoriu când :other este refuzat.',
+    'required_unless' => 'Câmpul :attribute este obligatoriu dacă :other nu este în :values.',
+    'required_with' => 'Câmpul :attribute este obligatoriu când :values este prezent.',
+    'required_with_all' => 'Câmpul :attribute este obligatoriu când :values sunt prezente.',
+    'required_without' => 'Câmpul :attribute este obligatoriu când :values nu este prezent.',
+    'required_without_all' => 'Câmpul :attribute este obligatoriu când niciuna dintre :values nu este prezentă.',
+    'same' => 'Câmpul :attribute trebuie să corespundă cu :other.',
+    'size' => [
+        'array' => 'Câmpul :attribute trebuie să conțină :size elemente.',
+        'file' => 'Câmpul :attribute trebuie să aibă :size kiloocteți.',
+        'numeric' => 'Câmpul :attribute trebuie să fie :size.',
+        'string' => 'Câmpul :attribute trebuie să aibă :size caractere.',
+    ],
+    'starts_with' => 'Câmpul :attribute trebuie să înceapă cu una dintre următoarele: :values.',
+    'string' => 'Câmpul :attribute trebuie să fie un șir de caractere.',
+    'timezone' => 'Câmpul :attribute trebuie să fie un fus orar valid.',
+    'unique' => 'Valoarea :attribute este deja folosită.',
+    'uploaded' => 'Încărcarea :attribute a eșuat.',
+    'uppercase' => 'Câmpul :attribute trebuie să fie cu litere mari.',
+    'url' => 'Câmpul :attribute trebuie să fie o adresă URL validă.',
+    'ulid' => 'Câmpul :attribute trebuie să fie un ULID valid.',
+    'uuid' => 'Câmpul :attribute trebuie să fie un UUID valid.',
+
+    'custom' => [
+        'file' => [
+            'required' => 'Este necesar un fișier PDF.',
+            'mimes' => 'Fișierul trebuie să fie un document PDF.',
+            'max' => 'Fișierul PDF nu trebuie să depășească 100 MB.',
+        ],
+    ],
+
+    'attributes' => [
+        'name' => 'nume',
+        'email' => 'adresă de e-mail',
+        'new_email' => 'adresă de e-mail nouă',
+        'password' => 'parolă',
+        'current_password' => 'parola curentă',
+        'new_password' => 'parola nouă',
+        'file' => 'fișier',
+    ],
+
+];
diff --git a/package.json b/package.json
index 7686b29..a127fc7 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,8 @@
     "type": "module",
     "scripts": {
         "build": "vite build",
-        "dev": "vite"
+        "dev": "vite",
+        "i18n:translate": "node scripts/translate-i18n.mjs"
     },
     "devDependencies": {
         "@tailwindcss/vite": "^4.0.0",
diff --git a/resources/views/emails/password-changed.blade.php b/resources/views/emails/password-changed.blade.php
index 8fa2cf7..7d1eba9 100644
--- a/resources/views/emails/password-changed.blade.php
+++ b/resources/views/emails/password-changed.blade.php
@@ -21,15 +21,15 @@
                     <tr>
                         <td style="background-color: #ffffff; padding: 40px 30px;">
                             <h2 style="margin: 0 0 20px; color: #333333; font-size: 24px; font-weight: 600;">
-                                Password changed, {{ $user->name }}
+                                {{ __('emails.changed.title', ['name' => $user->name]) }}
                             </h2>
 
                             <p style="margin: 0 0 20px; color: #555555; font-size: 16px; line-height: 1.6;">
-                                Your WordKeep password was just changed. If you made this change, no further action is needed.
+                                {{ __('emails.changed.intro') }}
                             </p>
 
                             <p style="margin: 0; color: #555555; font-size: 16px; line-height: 1.6;">
-                                If you did not change your password, please reset it immediately using the "Forgot password?" link on the login page.
+                                {{ __('emails.changed.warning') }}
                             </p>
                         </td>
                     </tr>
@@ -38,7 +38,7 @@
                     <tr>
                         <td style="background-color: #f9f9f9; padding: 20px 30px; text-align: center; border-radius: 0 0 8px 8px; border-top: 1px solid #eeeeee;">
                             <p style="margin: 0; color: #999999; font-size: 13px;">
-                                This is an automated security notification from WordKeep.
+                                {{ __('emails.common.security_footer') }}
                             </p>
                         </td>
                     </tr>
diff --git a/resources/views/emails/password-reset.blade.php b/resources/views/emails/password-reset.blade.php
index 03040d8..d6a37fe 100644
--- a/resources/views/emails/password-reset.blade.php
+++ b/resources/views/emails/password-reset.blade.php
@@ -21,11 +21,11 @@
                     <tr>
                         <td style="background-color: #ffffff; padding: 40px 30px;">
                             <h2 style="margin: 0 0 20px; color: #333333; font-size: 24px; font-weight: 600;">
-                                Reset Your Password
+                                {{ __('emails.reset.title') }}
                             </h2>
 
                             <p style="margin: 0 0 20px; color: #555555; font-size: 16px; line-height: 1.6;">
-                                Hi {{ $user->name }}, we received a request to reset your WordKeep password. Click the button below to choose a new password.
+                                {{ __('emails.reset.intro', ['name' => $user->name]) }}
                             </p>
 
                             <!-- Button -->
@@ -33,20 +33,20 @@
                                 <tr>
                                     <td align="center">
                                         <a href="{{ $resetUrl }}" style="display: inline-block; padding: 16px 40px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #ffffff; text-decoration: none; font-size: 16px; font-weight: 600; border-radius: 8px;">
-                                            Reset Password
+                                            {{ __('emails.reset.button') }}
                                         </a>
                                     </td>
                                 </tr>
                             </table>
 
                             <p style="margin: 20px 0 0; color: #888888; font-size: 14px; line-height: 1.6;">
-                                This link will expire in <strong>60 minutes</strong>.
+                                {!! __('emails.reset.expiry', ['minutes' => '<strong>60</strong>']) !!}
                             </p>
 
                             <hr style="margin: 30px 0; border: none; border-top: 1px solid #eeeeee;">
 
                             <p style="margin: 0; color: #888888; font-size: 13px; line-height: 1.6;">
-                                If the button doesn't work, copy and paste this link into your browser:
+                                {{ __('emails.common.fallback') }}
                             </p>
                             <p style="margin: 10px 0 0; color: #667eea; font-size: 13px; word-break: break-all;">
                                 {{ $resetUrl }}
@@ -58,7 +58,7 @@
                     <tr>
                         <td style="background-color: #f9f9f9; padding: 20px 30px; text-align: center; border-radius: 0 0 8px 8px; border-top: 1px solid #eeeeee;">
                             <p style="margin: 0; color: #999999; font-size: 13px;">
-                                If you didn't request a password reset, you can safely ignore this email.
+                                {{ __('emails.reset.ignore') }}
                             </p>
                         </td>
                     </tr>
diff --git a/resources/views/emails/two-factor-disabled.blade.php b/resources/views/emails/two-factor-disabled.blade.php
index e9feee1..3b16c7f 100644
--- a/resources/views/emails/two-factor-disabled.blade.php
+++ b/resources/views/emails/two-factor-disabled.blade.php
@@ -21,15 +21,15 @@
                     <tr>
                         <td style="background-color: #ffffff; padding: 40px 30px;">
                             <h2 style="margin: 0 0 20px; color: #333333; font-size: 24px; font-weight: 600;">
-                                Two-factor authentication disabled, {{ $user->name }}
+                                {{ __('emails.two_factor_disabled.title', ['name' => $user->name]) }}
                             </h2>
 
                             <p style="margin: 0 0 20px; color: #555555; font-size: 16px; line-height: 1.6;">
-                                Two-factor authentication has been disabled on your WordKeep account. You will no longer be asked for a code when signing in.
+                                {{ __('emails.two_factor_disabled.intro') }}
                             </p>
 
                             <p style="margin: 0; color: #e53e3e; font-size: 16px; line-height: 1.6; font-weight: 500;">
-                                If you did not make this change, your account may be compromised. Please change your password immediately and re-enable two-factor authentication.
+                                {{ __('emails.two_factor_disabled.warning') }}
                             </p>
                         </td>
                     </tr>
@@ -38,7 +38,7 @@
                     <tr>
                         <td style="background-color: #f9f9f9; padding: 20px 30px; text-align: center; border-radius: 0 0 8px 8px; border-top: 1px solid #eeeeee;">
                             <p style="margin: 0; color: #999999; font-size: 13px;">
-                                This is an automated security notification from WordKeep.
+                                {{ __('emails.common.security_footer') }}
                             </p>
                         </td>
                     </tr>
diff --git a/resources/views/emails/two-factor-enabled.blade.php b/resources/views/emails/two-factor-enabled.blade.php
index 59444cf..28274f8 100644
--- a/resources/views/emails/two-factor-enabled.blade.php
+++ b/resources/views/emails/two-factor-enabled.blade.php
@@ -21,19 +21,19 @@
                     <tr>
                         <td style="background-color: #ffffff; padding: 40px 30px;">
                             <h2 style="margin: 0 0 20px; color: #333333; font-size: 24px; font-weight: 600;">
-                                Two-factor authentication enabled, {{ $user->name }}
+                                {{ __('emails.two_factor_enabled.title', ['name' => $user->name]) }}
                             </h2>
 
                             <p style="margin: 0 0 20px; color: #555555; font-size: 16px; line-height: 1.6;">
-                                Two-factor authentication has been enabled on your WordKeep account. You will now be asked for a 6-digit code from your authenticator app each time you sign in.
+                                {{ __('emails.two_factor_enabled.intro') }}
                             </p>
 
                             <p style="margin: 0 0 20px; color: #555555; font-size: 16px; line-height: 1.6;">
-                                Make sure to keep your recovery codes in a safe place — they are the only way to access your account if you lose your authenticator device.
+                                {{ __('emails.two_factor_enabled.recovery') }}
                             </p>
 
                             <p style="margin: 0; color: #555555; font-size: 16px; line-height: 1.6;">
-                                If you did not make this change, please contact us immediately.
+                                {{ __('emails.two_factor_enabled.warning') }}
                             </p>
                         </td>
                     </tr>
@@ -42,7 +42,7 @@
                     <tr>
                         <td style="background-color: #f9f9f9; padding: 20px 30px; text-align: center; border-radius: 0 0 8px 8px; border-top: 1px solid #eeeeee;">
                             <p style="margin: 0; color: #999999; font-size: 13px;">
-                                This is an automated security notification from WordKeep.
+                                {{ __('emails.common.security_footer') }}
                             </p>
                         </td>
                     </tr>
diff --git a/resources/views/emails/verify-email-change.blade.php b/resources/views/emails/verify-email-change.blade.php
index d67ed75..89f37fb 100644
--- a/resources/views/emails/verify-email-change.blade.php
+++ b/resources/views/emails/verify-email-change.blade.php
@@ -21,11 +21,11 @@
                     <tr>
                         <td style="background-color: #ffffff; padding: 40px 30px;">
                             <h2 style="margin: 0 0 20px; color: #333333; font-size: 24px; font-weight: 600;">
-                                Confirm your new email, {{ $user->name }}
+                                {{ __('emails.verify_change.title', ['name' => $user->name]) }}
                             </h2>
 
                             <p style="margin: 0 0 20px; color: #555555; font-size: 16px; line-height: 1.6;">
-                                You requested to change your WordKeep email address to this one. Click the button below to confirm the change.
+                                {{ __('emails.verify_change.intro') }}
                             </p>
 
                             <!-- Button -->
@@ -33,20 +33,20 @@
                                 <tr>
                                     <td align="center">
                                         <a href="{{ $verificationUrl }}" style="display: inline-block; padding: 16px 40px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #ffffff; text-decoration: none; font-size: 16px; font-weight: 600; border-radius: 8px;">
-                                            Confirm New Email
+                                            {{ __('emails.verify_change.button') }}
                                         </a>
                                     </td>
                                 </tr>
                             </table>
 
                             <p style="margin: 20px 0 0; color: #888888; font-size: 14px; line-height: 1.6;">
-                                This link will expire in <strong>5 days</strong>. If not confirmed, your email address will remain unchanged.
+                                {!! __('emails.verify_change.expiry', ['days' => '<strong>5</strong>']) !!}
                             </p>
 
                             <hr style="margin: 30px 0; border: none; border-top: 1px solid #eeeeee;">
 
                             <p style="margin: 0; color: #888888; font-size: 13px; line-height: 1.6;">
-                                If the button doesn't work, copy and paste this link into your browser:
+                                {{ __('emails.common.fallback') }}
                             </p>
                             <p style="margin: 10px 0 0; color: #667eea; font-size: 13px; word-break: break-all;">
                                 {{ $verificationUrl }}
@@ -58,7 +58,7 @@
                     <tr>
                         <td style="background-color: #f9f9f9; padding: 20px 30px; text-align: center; border-radius: 0 0 8px 8px; border-top: 1px solid #eeeeee;">
                             <p style="margin: 0; color: #999999; font-size: 13px;">
-                                If you didn't request this email change, you can safely ignore this email. Your current email address remains active.
+                                {{ __('emails.verify_change.ignore') }}
                             </p>
                         </td>
                     </tr>
diff --git a/resources/views/emails/verify-email.blade.php b/resources/views/emails/verify-email.blade.php
index d452b86..2a1d1da 100644
--- a/resources/views/emails/verify-email.blade.php
+++ b/resources/views/emails/verify-email.blade.php
@@ -21,11 +21,11 @@
                     <tr>
                         <td style="background-color: #ffffff; padding: 40px 30px;">
                             <h2 style="margin: 0 0 20px; color: #333333; font-size: 24px; font-weight: 600;">
-                                Welcome, {{ $user->name }}!
+                                {{ __('emails.verify.title', ['name' => $user->name]) }}
                             </h2>
 
                             <p style="margin: 0 0 20px; color: #555555; font-size: 16px; line-height: 1.6;">
-                                Thanks for signing up for WordKeep. To complete your registration and activate your account, please verify your email address by clicking the button below.
+                                {{ __('emails.verify.intro') }}
                             </p>
 
                             <!-- Button -->
@@ -33,20 +33,20 @@
                                 <tr>
                                     <td align="center">
                                         <a href="{{ $verificationUrl }}" style="display: inline-block; padding: 16px 40px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #ffffff; text-decoration: none; font-size: 16px; font-weight: 600; border-radius: 8px;">
-                                            Verify Email Address
+                                            {{ __('emails.verify.button') }}
                                         </a>
                                     </td>
                                 </tr>
                             </table>
 
                             <p style="margin: 20px 0 0; color: #888888; font-size: 14px; line-height: 1.6;">
-                                This link will expire in <strong>5 days</strong>. If you don't verify your email within this time, your account will be automatically deleted.
+                                {!! __('emails.verify.expiry', ['days' => '<strong>5</strong>']) !!}
                             </p>
 
                             <hr style="margin: 30px 0; border: none; border-top: 1px solid #eeeeee;">
 
                             <p style="margin: 0; color: #888888; font-size: 13px; line-height: 1.6;">
-                                If the button doesn't work, copy and paste this link into your browser:
+                                {{ __('emails.common.fallback') }}
                             </p>
                             <p style="margin: 10px 0 0; color: #667eea; font-size: 13px; word-break: break-all;">
                                 {{ $verificationUrl }}
@@ -58,7 +58,7 @@
                     <tr>
                         <td style="background-color: #f9f9f9; padding: 20px 30px; text-align: center; border-radius: 0 0 8px 8px; border-top: 1px solid #eeeeee;">
                             <p style="margin: 0; color: #999999; font-size: 13px;">
-                                If you didn't create an account with WordKeep, you can safely ignore this email.
+                                {{ __('emails.verify.ignore') }}
                             </p>
                         </td>
                     </tr>
diff --git a/scripts/translate-i18n.mjs b/scripts/translate-i18n.mjs
new file mode 100644
index 0000000..ab6db34
--- /dev/null
+++ b/scripts/translate-i18n.mjs
@@ -0,0 +1,306 @@
+/**
+ * Seeds / updates <lang>.json translation files from their English (en.json)
+ * siblings using Google Gemini 2.5 Flash. The target language is a required CLI
+ * argument (its locale code, e.g. ro, fr) — see LANG_NAMES for supported codes.
+ *
+ * For every en.json under wordkeep-client/public/assets/i18n/ (the global file
+ * and each lazy-scope folder), it:
+ *   1. Loads en.json and the existing <lang>.json (if any).
+ *   2. Finds keys present in en but MISSING from <lang> (merge mode — reviewed
+ *      translations are never overwritten).
+ *   3. Asks Gemini to translate only those values, preserving JSON shape,
+ *      {{placeholders}} and adapting ICU plural categories to the target language.
+ *   4. Validates placeholder parity, then writes a merged <lang>.json whose key
+ *      order mirrors en.json.
+ *
+ * Usage (from repo root):
+ *   node scripts/translate-i18n.mjs <lang>            # translate missing keys only
+ *   node scripts/translate-i18n.mjs <lang> --all      # retranslate every key (overwrite)
+ *   node scripts/translate-i18n.mjs <lang> --dry-run  # report what would change, write nothing
+ *
+ * <lang> must be one of the codes in the LANG_NAMES map below.
+ * Requires GEMINI_API_KEY (read from the repo .env or the environment).
+ * Review the generated <lang>.json diff and fix terminology before committing.
+ */
+
+import { readFileSync, writeFileSync, existsSync, readdirSync } from 'fs';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const repoRoot = join(__dirname, '..');
+const i18nDir = join(repoRoot, 'wordkeep-client/public/assets/i18n');
+
+// ── supported target languages (code → English name) ────────────────
+// Self-contained so the script doesn't depend on the client's i18n assets.
+const LANG_NAMES = {
+  ar: 'Arabic', bg: 'Bulgarian', zh: 'Chinese', hr: 'Croatian', cs: 'Czech',
+  da: 'Danish', nl: 'Dutch', fi: 'Finnish', fr: 'French', de: 'German',
+  el: 'Greek', he: 'Hebrew', hi: 'Hindi', hu: 'Hungarian', id: 'Indonesian',
+  it: 'Italian', ja: 'Japanese', ko: 'Korean', la: 'Latin', ms: 'Malay',
+  no: 'Norwegian', pl: 'Polish', pt: 'Portuguese', ro: 'Romanian', ru: 'Russian',
+  sr: 'Serbian', sk: 'Slovak', sl: 'Slovenian', es: 'Spanish', sv: 'Swedish',
+  th: 'Thai', tr: 'Turkish', uk: 'Ukrainian', vi: 'Vietnamese',
+};
+
+// ── CLI args ─────────────────────────────────────────────────────────
+const argv = process.argv.slice(2);
+const RETRANSLATE_ALL = argv.includes('--all');
+const DRY_RUN = argv.includes('--dry-run');
+const TARGET = argv.find(a => !a.startsWith('--'));
+const TARGET_NAME = TARGET ? LANG_NAMES[TARGET] : undefined;
+
+if (!TARGET_NAME || TARGET === 'en') {
+  const reason = !TARGET
+    ? 'No target language given.'
+    : `Unsupported language code "${TARGET}".`;
+  console.error(`✗ ${reason}`);
+  console.error('\nUsage: node scripts/translate-i18n.mjs <lang> [--all] [--dry-run]');
+  console.error(`Supported codes: ${Object.keys(LANG_NAMES).sort().join(', ')}`);
+  process.exit(1);
+}
+
+// ── env ──────────────────────────────────────────────────────────────
+function loadEnv() {
+  const env = { ...process.env };
+  const envPath = join(repoRoot, '.env');
+  if (existsSync(envPath)) {
+    for (const line of readFileSync(envPath, 'utf8').split('\n')) {
+      const m = line.match(/^\s*([A-Z0-9_]+)\s*=\s*(.*)\s*$/);
+      if (m && env[m[1]] === undefined) {
+        env[m[1]] = m[2].replace(/^["']|["']$/g, '');
+      }
+    }
+  }
+  return env;
+}
+
+const env = loadEnv();
+const API_KEY = env.GEMINI_API_KEY;
+const MODEL = env.GEMINI_MODEL || 'gemini-2.5-flash';
+const BASE_URL = env.GEMINI_BASE_URL || 'https://generativelanguage.googleapis.com/v1beta';
+
+// Transient-failure retry config (Gemini 429/5xx + network blips). Override via env.
+const MAX_RETRIES = Number(env.GEMINI_MAX_RETRIES) || 5;
+const RETRY_BASE_MS = Number(env.GEMINI_RETRY_BASE_MS) || 2000;
+const RETRY_STATUSES = new Set([429, 500, 502, 503, 504]);
+
+const sleep = ms => new Promise(r => setTimeout(r, ms));
+
+if (!API_KEY && !DRY_RUN) {
+  console.error('✗ GEMINI_API_KEY is not set (checked .env and environment).');
+  process.exit(1);
+}
+
+// ── flatten / unflatten nested JSON to dot-keyed leaves ──────────────
+function flatten(obj, prefix = '', out = {}) {
+  for (const [k, v] of Object.entries(obj)) {
+    const key = prefix ? `${prefix}.${k}` : k;
+    if (v && typeof v === 'object' && !Array.isArray(v)) flatten(v, key, out);
+    else out[key] = v;
+  }
+  return out;
+}
+
+function setDeep(obj, dotKey, value) {
+  const parts = dotKey.split('.');
+  let node = obj;
+  for (let i = 0; i < parts.length - 1; i++) {
+    node[parts[i]] ??= {};
+    node = node[parts[i]];
+  }
+  node[parts[parts.length - 1]] = value;
+}
+
+/** Rebuild a nested object mirroring en's key order, pulling values from a flat map. */
+function rebuildLike(enObj, flatValues, prefix = '') {
+  const out = Array.isArray(enObj) ? [] : {};
+  for (const [k, v] of Object.entries(enObj)) {
+    const key = prefix ? `${prefix}.${k}` : k;
+    if (v && typeof v === 'object' && !Array.isArray(v)) {
+      out[k] = rebuildLike(v, flatValues, key);
+    } else {
+      out[k] = flatValues[key] ?? v;
+    }
+  }
+  return out;
+}
+
+// ── placeholder parity check ─────────────────────────────────────────
+// Only the invariants that must hold across languages are compared: the
+// {{...}} interpolations and the ICU argument names (the `{name, plural|select`
+// heads). Plural keyword sets and sub-message bodies legitimately differ per
+// language, so they are intentionally excluded.
+function placeholders(s) {
+  const str = String(s);
+  const interpolations = (str.match(/\{\{\s*[^{}]+?\s*\}\}/g) || []).map(t => t.replace(/\s+/g, ''));
+  const icuArgs = (str.match(/\{\s*([A-Za-z0-9_]+)\s*,\s*(?:plural|select|selectordinal)\b/g) || [])
+    .map(t => t.replace(/\s+/g, ''));
+  return [...interpolations, ...icuArgs].sort();
+}
+function samePlaceholders(a, b) {
+  const pa = placeholders(a), pb = placeholders(b);
+  return pa.length === pb.length && pa.every((t, i) => t === pb[i]);
+}
+
+// ── Gemini call ──────────────────────────────────────────────────────
+async function translateBatch(pairs) {
+  // pairs: { dotKey: englishValue }
+  const prompt = [
+    `You are translating UI strings for the WordKeep app from English to ${TARGET_NAME}.`,
+    'Translate ONLY the string values of the JSON object below. Keep every key exactly as-is.',
+    'Rules:',
+    '- Preserve ALL placeholders verbatim, e.g. {{name}}, {{count}} — do not translate or reorder them.',
+    `- Adapt ICU plural/select categories to ${TARGET_NAME}'s CLDR rules: add, rename or remove`,
+    '  categories (zero, one, two, few, many, other) as the language requires, while keeping the',
+    '  {var, plural, ...} / {var, select, ...} structure and the variable name unchanged.',
+    '- Preserve any inline HTML tags (e.g. <em>, <span class="...">) and HTML entities (e.g. &mdash;).',
+    `- Use natural, concise ${TARGET_NAME} appropriate for a literary document-keeping app.`,
+    '- Do NOT translate proper nouns: WordKeep, Sibiu, roman numerals (MMXXVI).',
+    `Return ONLY a JSON object mapping the same keys to the translated ${TARGET_NAME} strings.`,
+    '',
+    JSON.stringify(pairs, null, 2),
+  ].join('\n');
+
+  return requestWithRetry({
+    contents: [{ parts: [{ text: prompt }] }],
+    generationConfig: { temperature: 0.2, responseMimeType: 'application/json' },
+  });
+}
+
+/**
+ * POST to Gemini and return the parsed translation map, retrying transient
+ * failures with exponential backoff so a temporary problem doesn't skip the
+ * whole file. Retryable: 429/5xx, network errors, and a malformed/truncated
+ * response body (empty candidate or unparseable JSON — common under load).
+ * Honors a Retry-After header when present. Non-transient errors throw at once.
+ */
+async function requestWithRetry(body) {
+  const url = `${BASE_URL}/models/${MODEL}:generateContent?key=${API_KEY}`;
+  let attempt = 0;
+  for (;;) {
+    let res;
+    try {
+      res = await fetch(url, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      });
+    } catch (e) {
+      // Network-level failure (DNS, socket reset, timeout): retryable.
+      if (attempt >= MAX_RETRIES) throw new Error(`Gemini network error after ${attempt} retries: ${e.message}`);
+      await backoff(attempt++, `network error (${e.message})`);
+      continue;
+    }
+
+    if (!res.ok) {
+      const detail = await res.text();
+      if (!RETRY_STATUSES.has(res.status) || attempt >= MAX_RETRIES) {
+        throw new Error(`Gemini HTTP ${res.status}: ${detail}`);
+      }
+      const retryAfter = Number(res.headers.get('retry-after')) * 1000 || 0;
+      await backoff(attempt++, `HTTP ${res.status}`, retryAfter);
+      continue;
+    }
+
+    // 2xx but the body can still be empty or truncated JSON — treat as retryable.
+    try {
+      const data = await res.json();
+      const text = data?.candidates?.[0]?.content?.parts?.[0]?.text;
+      if (!text) throw new Error('empty candidate text');
+      return JSON.parse(text);
+    } catch (e) {
+      if (attempt >= MAX_RETRIES) throw new Error(`Gemini unparseable response after ${attempt} retries: ${e.message}`);
+      await backoff(attempt++, `bad response (${e.message})`);
+    }
+  }
+}
+
+/** Wait before the next attempt: max(Retry-After, exponential base) + jitter. */
+async function backoff(attempt, why, retryAfterMs = 0) {
+  const expo = RETRY_BASE_MS * 2 ** attempt;
+  const jitter = Math.floor(Math.random() * RETRY_BASE_MS);
+  const wait = Math.max(retryAfterMs, expo) + jitter;
+  console.warn(`    ⟳ ${why}; retry ${attempt + 1}/${MAX_RETRIES} in ${Math.round(wait / 1000)}s`);
+  await sleep(wait);
+}
+
+// ── per-file processing ──────────────────────────────────────────────
+function findEnFiles() {
+  const files = [];
+  const rootEn = join(i18nDir, 'en.json');
+  if (existsSync(rootEn)) files.push(rootEn);
+  for (const entry of readdirSync(i18nDir, { withFileTypes: true })) {
+    if (entry.isDirectory()) {
+      const scopeEn = join(i18nDir, entry.name, 'en.json');
+      if (existsSync(scopeEn)) files.push(scopeEn);
+    }
+  }
+  return files;
+}
+
+async function processFile(enPath) {
+  const targetPath = enPath.replace(/en\.json$/, `${TARGET}.json`);
+  const rel = enPath.slice(i18nDir.length + 1);
+  const en = JSON.parse(readFileSync(enPath, 'utf8'));
+  const existing = existsSync(targetPath) ? JSON.parse(readFileSync(targetPath, 'utf8')) : {};
+
+  const enFlat = flatten(en);
+  const targetFlat = flatten(existing);
+
+  const todo = {};
+  for (const [k, v] of Object.entries(enFlat)) {
+    if (typeof v !== 'string') continue;
+    if (RETRANSLATE_ALL || !(k in targetFlat) || targetFlat[k] === undefined || targetFlat[k] === '') {
+      todo[k] = v;
+    }
+  }
+
+  const todoCount = Object.keys(todo).length;
+  if (todoCount === 0) {
+    console.log(`• ${rel}: up to date`);
+    return;
+  }
+  console.log(`• ${rel}: ${todoCount} key(s) to translate${DRY_RUN ? ' (dry-run)' : ''}`);
+  if (DRY_RUN) {
+    for (const k of Object.keys(todo)) console.log(`    + ${k}`);
+    return;
+  }
+
+  const translated = await translateBatch(todo);
+
+  // Start from existing target (reviewed values kept), apply translations.
+  const mergedFlat = { ...targetFlat };
+  for (const [k, en] of Object.entries(todo)) {
+    const t = translated[k];
+    if (typeof t !== 'string') {
+      console.warn(`    ! ${k}: missing in Gemini response — keeping English`);
+      mergedFlat[k] = en;
+      continue;
+    }
+    if (!samePlaceholders(en, t)) {
+      console.warn(`    ! ${k}: placeholder mismatch — keeping English ("${t}")`);
+      mergedFlat[k] = en;
+      continue;
+    }
+    mergedFlat[k] = t;
+  }
+
+  const merged = rebuildLike(en, mergedFlat);
+  writeFileSync(targetPath, JSON.stringify(merged, null, 2) + '\n', 'utf8');
+  console.log(`    → wrote ${rel.replace(/en\.json$/, `${TARGET}.json`)}`);
+}
+
+// ── main ─────────────────────────────────────────────────────────────
+const enFiles = findEnFiles();
+console.log(`Translating to ${TARGET_NAME} (${TARGET}).`);
+console.log(`Found ${enFiles.length} en.json file(s) under ${i18nDir}\n`);
+for (const f of enFiles) {
+  try {
+    await processFile(f);
+  } catch (e) {
+    console.error(`✗ ${f.slice(i18nDir.length + 1)}: ${e.message}`);
+    process.exitCode = 1;
+  }
+}
+console.log(`\nDone. Review the ${TARGET}.json diffs and fix terminology before committing.`);
diff --git a/tests/Feature/BulkTranslateDocumentJobTest.php b/tests/Feature/BulkTranslateDocumentJobTest.php
index d0714d9..f9e7eb6 100644
--- a/tests/Feature/BulkTranslateDocumentJobTest.php
+++ b/tests/Feature/BulkTranslateDocumentJobTest.php
@@ -154,7 +154,10 @@ public function test_job_retranslates_completed_pages_when_override_true(): void
 
     public function test_job_sets_page_linking_incomplete_flag_when_pages_unlinked(): void
     {
-        $document = $this->makeDocument();
+        // page_count > 1 so the DocumentPage `creating` hook doesn't treat the
+        // lone page 1 as the last page and auto-stamp DOCUMENT_END (which would
+        // make link_to_next_page non-null and flake this assertion).
+        $document = $this->makeDocument(['page_count' => 2]);
         // Page with null link_to_next_page = unlinked
         DocumentPage::factory()->completed('Text.')->create([
             'document_id'           => $document->id,
diff --git a/tests/Feature/LocalizationTest.php b/tests/Feature/LocalizationTest.php
new file mode 100644
index 0000000..3bab99f
--- /dev/null
+++ b/tests/Feature/LocalizationTest.php
@@ -0,0 +1,100 @@
+<?php
+
+namespace Tests\Feature;
+
+use App\Mail\VerifyEmail;
+use App\Models\User;
+use Illuminate\Foundation\Testing\RefreshDatabase;
+use Illuminate\Support\Facades\App;
+use Illuminate\Support\Facades\Hash;
+use Tests\TestCase;
+
+class LocalizationTest extends TestCase
+{
+    use RefreshDatabase;
+
+    public function test_validation_errors_are_localized_to_romanian(): void
+    {
+        $user = User::factory()->create([
+            'password'          => Hash::make('correct-password'),
+            'email_verified_at' => now(),
+        ]);
+
+        $this->withHeader('Accept-Language', 'ro')
+            ->postJson('/api/login', [
+                'email'    => $user->email,
+                'password' => 'wrong-password',
+            ])
+            ->assertStatus(422)
+            ->assertJsonPath('errors.email.0', 'Aceste date de autentificare nu corespund înregistrărilor noastre.');
+    }
+
+    public function test_validation_errors_default_to_english(): void
+    {
+        $user = User::factory()->create([
+            'password'          => Hash::make('correct-password'),
+            'email_verified_at' => now(),
+        ]);
+
+        $this->postJson('/api/login', [
+            'email'    => $user->email,
+            'password' => 'wrong-password',
+        ])
+            ->assertStatus(422)
+            ->assertJsonPath('errors.email.0', 'These credentials do not match our records.');
+    }
+
+    public function test_unsupported_accept_language_falls_back_to_english(): void
+    {
+        $user = User::factory()->create([
+            'password'          => Hash::make('correct-password'),
+            'email_verified_at' => now(),
+        ]);
+
+        $this->withHeader('Accept-Language', 'de-DE,de;q=0.9')
+            ->postJson('/api/login', [
+                'email'    => $user->email,
+                'password' => 'wrong-password',
+            ])
+            ->assertStatus(422)
+            ->assertJsonPath('errors.email.0', 'These credentials do not match our records.');
+    }
+
+    public function test_accept_language_with_region_and_quality_resolves_primary_tag(): void
+    {
+        $user = User::factory()->create([
+            'password'          => Hash::make('correct-password'),
+            'email_verified_at' => now(),
+        ]);
+
+        $this->withHeader('Accept-Language', 'ro-RO,ro;q=0.9,en;q=0.8')
+            ->postJson('/api/login', [
+                'email'    => $user->email,
+                'password' => 'wrong-password',
+            ])
+            ->assertStatus(422)
+            ->assertJsonPath('errors.email.0', 'Aceste date de autentificare nu corespund înregistrărilor noastre.');
+    }
+
+    public function test_transactional_email_renders_in_romanian(): void
+    {
+        $user = User::factory()->create(['name' => 'Ana']);
+
+        App::setLocale('ro');
+        $mailable = new VerifyEmail($user, 'https://wordkeep.test/verify');
+
+        $this->assertSame('Confirmă-ți adresa de e-mail WordKeep', $mailable->envelope()->subject);
+        $this->assertStringContainsString('Bun venit, Ana!', $mailable->render());
+    }
+
+    public function test_transactional_email_renders_in_english_by_default(): void
+    {
+        $user = User::factory()->create(['name' => 'John']);
+
+        App::setLocale('en');
+        $mailable = new VerifyEmail($user, 'https://wordkeep.test/verify');
+
+        $this->assertSame('Verify Your WordKeep Email', $mailable->envelope()->subject);
+        $this->assertStringContainsString('Welcome, John!', $mailable->render());
+    }
+}
diff --git a/tests/Feature/UserPreferencesControllerTest.php b/tests/Feature/UserPreferencesControllerTest.php
index dea2326..7fc011b 100644
--- a/tests/Feature/UserPreferencesControllerTest.php
+++ b/tests/Feature/UserPreferencesControllerTest.php
@@ -138,6 +138,42 @@ public function test_update_rejects_invalid_layout(): void
             ->assertJsonValidationErrors(['layout']);
     }
 
+    public function test_update_persists_locale(): void
+    {
+        $user = User::factory()->create();
+
+        $this->actingAs($user)
+            ->patchJson('/api/preferences', ['locale' => 'ro'])
+            ->assertOk()
+            ->assertJsonPath('data.locale', 'ro');
+
+        $this->assertDatabaseHas('user_preferences', [
+            'user_id' => $user->id,
+            'locale'  => 'ro',
+        ]);
+    }
+
+    public function test_update_rejects_invalid_locale(): void
+    {
+        $user = User::factory()->create();
+
+        $this->actingAs($user)
+            ->patchJson('/api/preferences', ['locale' => 'fr'])
+            ->assertStatus(422)
+            ->assertJsonValidationErrors(['locale']);
+    }
+
+    public function test_show_returns_null_locale_when_unset(): void
+    {
+        $user = User::factory()->create();
+        UserPreference::create(['user_id' => $user->id, 'theme_mode' => 'dark']);
+
+        $this->actingAs($user)
+            ->getJson('/api/preferences')
+            ->assertOk()
+            ->assertJsonPath('data.locale', null);
+    }
+
     public function test_update_accepts_empty_payload(): void
     {
         $user = User::factory()->create();
diff --git a/wordkeep-client/e2e/landing.spec.ts b/wordkeep-client/e2e/landing.spec.ts
index 9acd167..67e5b91 100644
--- a/wordkeep-client/e2e/landing.spec.ts
+++ b/wordkeep-client/e2e/landing.spec.ts
@@ -24,6 +24,26 @@ test.describe('landing (guest)', () => {
     await expect(page).toHaveURL('/login');
   });
 
+  test('language pennants toggle the charter living language and persist it', async ({ page }) => {
+    await page.goto('/');
+    const en = page.locator('.charter__flags .pennant--en');
+    const ro = page.locator('.charter__flags .pennant--ro');
+    await expect(en).toHaveAttribute('aria-pressed', 'true');
+
+    await ro.click();
+    await expect(ro).toHaveAttribute('aria-pressed', 'true');
+
+    // The English layer now carries Romanian copy and lang="ro".
+    const roLayer = page.locator('main.charter .charter__opening > .translatable__en');
+    await expect(roLayer).toHaveAttribute('lang', 'ro');
+
+    expect(await page.evaluate(() => localStorage.getItem('wk:locale'))).toBe('ro');
+
+    // Choice survives a reload (read back from localStorage pre-login).
+    await page.reload();
+    await expect(page.locator('.charter__flags .pennant--ro')).toHaveAttribute('aria-pressed', 'true');
+  });
+
   test('hovering a Latin block fades Latin out and English in', async ({ page }) => {
     await page.goto('/');
     const block = page.locator('main.charter .charter__opening.translatable');
diff --git a/wordkeep-client/e2e/locale-switch.spec.ts b/wordkeep-client/e2e/locale-switch.spec.ts
new file mode 100644
index 0000000..9b03add
--- /dev/null
+++ b/wordkeep-client/e2e/locale-switch.spec.ts
@@ -0,0 +1,34 @@
+import { test, expect } from './fixtures';
+
+// The locale switcher on the Personalisation page is the in-app entry point for
+// changing language while signed in. Switching persists to the server (and
+// localStorage), and localized UI strings update immediately.
+test.describe('locale switching (signed in)', () => {
+  test.afterEach(async ({ page }) => {
+    // Leave the account back on English so other specs are unaffected.
+    await page.goto('/profile/personalisation');
+    await page.locator('.lang-button').first().click();
+    await expect(page.locator('.settings-section', { hasText: 'Language' })).toBeVisible();
+  });
+
+  test('switching to Romanian localizes the UI and persists across reload', async ({ page }) => {
+    await page.goto('/profile/personalisation');
+
+    // EN is active to begin with.
+    const enBtn = page.locator('.lang-button').first();
+    const roBtn = page.locator('.lang-button').nth(1);
+    await expect(enBtn).toHaveAttribute('aria-pressed', 'true');
+
+    await roBtn.click();
+    await expect(roBtn).toHaveAttribute('aria-pressed', 'true');
+
+    // The language section heading is now Romanian.
+    await expect(page.getByRole('heading', { name: 'Limbă' })).toBeVisible();
+    expect(await page.evaluate(() => localStorage.getItem('wk:locale'))).toBe('ro');
+
+    // Reload: the server-persisted choice is reapplied after login.
+    await page.reload();
+    await expect(page.getByRole('heading', { name: 'Limbă' })).toBeVisible();
+    await expect(page.locator('.lang-button').nth(1)).toHaveAttribute('aria-pressed', 'true');
+  });
+});
diff --git a/wordkeep-client/package-lock.json b/wordkeep-client/package-lock.json
index 21cd413..7051a96 100644
--- a/wordkeep-client/package-lock.json
+++ b/wordkeep-client/package-lock.json
@@ -14,6 +14,8 @@
         "@angular/forms": "^21.1.0",
         "@angular/platform-browser": "^21.1.0",
         "@angular/router": "^21.1.0",
+        "@jsverse/transloco": "^8.3.0",
+        "@jsverse/transloco-messageformat": "^8.3.0",
         "@types/turndown": "^5.0.6",
         "dictionary-de": "^3.0.0",
         "dictionary-en": "^4.0.0",
@@ -34,7 +36,7 @@
         "@angular/build": "^21.1.0",
         "@angular/cli": "^21.1.0",
         "@angular/compiler-cli": "^21.1.0",
-        "@playwright/test": "^1.58.2",
+        "@playwright/test": "^1.60.0",
         "jsdom": "^27.1.0",
         "typescript": "~5.9.2",
         "vitest": "^4.0.8"
@@ -676,7 +678,6 @@
       "version": "7.28.6",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.28.6.tgz",
       "integrity": "sha512-JYgintcMjRiCvS8mMECzaEn+m3PfoQiyqukOMCCVQtoJGYJw8j/8LBJEiqkHLkfwCcs74E3pbAUFNg7d9VNJ+Q==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.28.5",
@@ -871,7 +872,6 @@
       "version": "7.28.5",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
       "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -2078,6 +2078,56 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@jsverse/transloco": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/@jsverse/transloco/-/transloco-8.3.0.tgz",
+      "integrity": "sha512-p69/MhhAsTabDAffaiMALx4u9AwAqx24CjdECaCkUKSpCGbiYQUJPCsV4OsWjaSOxDNm9HuIX6NmqbfNZ0S3KA==",
+      "license": "MIT",
+      "dependencies": {
+        "@jsverse/transloco-utils": "^8.2.1",
+        "@jsverse/utils": "1.0.0-beta.5",
+        "tslib": "^2.2.0"
+      },
+      "peerDependencies": {
+        "@angular/core": ">=16.0.0",
+        "rxjs": ">=6.0.0"
+      }
+    },
+    "node_modules/@jsverse/transloco-messageformat": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/@jsverse/transloco-messageformat/-/transloco-messageformat-8.3.0.tgz",
+      "integrity": "sha512-Mz0OiYaNeMXFkRSWNEjOcEwqyOzi/v7D71tlaJDdWQagJqvFyw20DcHtv3xq5p+MvOLUjq7rtZYQiExlwo4NsQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@messageformat/core": "^3.4.0",
+        "tslib": "^2.2.0"
+      },
+      "peerDependencies": {
+        "@angular/core": ">=16.0.0",
+        "@jsverse/transloco": ">=8.0.0",
+        "@jsverse/utils": "1.0.0-beta.5",
+        "rxjs": ">=6.0.0"
+      }
+    },
+    "node_modules/@jsverse/transloco-utils": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/@jsverse/transloco-utils/-/transloco-utils-8.3.0.tgz",
+      "integrity": "sha512-HZPDKadKiL3l4iZ51PF7gv7txBgrR7gQB6crdfLSrXsCvCTGDnnhd3y5qO02pBWbWMDKRXKU0clv2dd3jeTSFA==",
+      "license": "MIT",
+      "dependencies": {
+        "cosmiconfig": "^8.1.3",
+        "tslib": "^2.3.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@jsverse/utils": {
+      "version": "1.0.0-beta.5",
+      "resolved": "https://registry.npmjs.org/@jsverse/utils/-/utils-1.0.0-beta.5.tgz",
+      "integrity": "sha512-z7IdlV6BdSeF3Veii8Yyk64KuyTjNIQnFaW5PAhmDx0wN29lB2BFp8WO6+tJPLPjtlz2yKeNrjkp1XqnMPaeHA==",
+      "license": "MIT"
+    },
     "node_modules/@listr2/prompt-adapter-inquirer": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/@listr2/prompt-adapter-inquirer/-/prompt-adapter-inquirer-3.0.5.tgz",
@@ -2193,6 +2243,50 @@
         "win32"
       ]
     },
+    "node_modules/@messageformat/core": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@messageformat/core/-/core-3.4.0.tgz",
+      "integrity": "sha512-NgCFubFFIdMWJGN5WuQhHCNmzk7QgiVfrViFxcS99j7F5dDS5EP6raR54I+2ydhe4+5/XTn/YIEppFaqqVWHsw==",
+      "license": "MIT",
+      "dependencies": {
+        "@messageformat/date-skeleton": "^1.0.0",
+        "@messageformat/number-skeleton": "^1.0.0",
+        "@messageformat/parser": "^5.1.0",
+        "@messageformat/runtime": "^3.0.1",
+        "make-plural": "^7.0.0",
+        "safe-identifier": "^0.4.1"
+      }
+    },
+    "node_modules/@messageformat/date-skeleton": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@messageformat/date-skeleton/-/date-skeleton-1.1.0.tgz",
+      "integrity": "sha512-rmGAfB1tIPER+gh3p/RgA+PVeRE/gxuQ2w4snFWPF5xtb5mbWR7Cbw7wCOftcUypbD6HVoxrVdyyghPm3WzP5A==",
+      "license": "MIT"
+    },
+    "node_modules/@messageformat/number-skeleton": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@messageformat/number-skeleton/-/number-skeleton-1.2.0.tgz",
+      "integrity": "sha512-xsgwcL7J7WhlHJ3RNbaVgssaIwcEyFkBqxHdcdaiJzwTZAWEOD8BuUFxnxV9k5S0qHN3v/KzUpq0IUpjH1seRg==",
+      "license": "MIT"
+    },
+    "node_modules/@messageformat/parser": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/@messageformat/parser/-/parser-5.1.1.tgz",
+      "integrity": "sha512-3p0YRGCcTUCYvBKLIxtDDyrJ0YijGIwrTRu1DT8gIviIDZru8H23+FkY6MJBzM1n9n20CiM4VeDYuBsrrwnLjg==",
+      "license": "MIT",
+      "dependencies": {
+        "moo": "^0.5.1"
+      }
+    },
+    "node_modules/@messageformat/runtime": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@messageformat/runtime/-/runtime-3.0.2.tgz",
+      "integrity": "sha512-dkIPDCjXcfhSHgNE1/qV6TeczQZR59Yx0xXeafVKgK3QVWoxc38ljwpksUpnzCGvN151KUbCJTDZVmahtf1YZw==",
+      "license": "MIT",
+      "dependencies": {
+        "make-plural": "^7.0.0"
+      }
+    },
     "node_modules/@mixmark-io/domino": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/@mixmark-io/domino/-/domino-2.2.0.tgz",
@@ -3227,13 +3321,13 @@
       "optional": true
     },
     "node_modules/@playwright/test": {
-      "version": "1.58.2",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.58.2.tgz",
-      "integrity": "sha512-akea+6bHYBBfA9uQqSYmlJXn61cTa+jbO87xVLCWbTqbWadRVmhxlXATaOjOgcBaWU4ePo0wB41KMFv3o35IXA==",
+      "version": "1.60.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.60.0.tgz",
+      "integrity": "sha512-O71yZIbAh/PxDMNGns37GHBIfrVkEVyn+AXyIa5dOTfb4/xNvRWV+Vv/NMbNCtODB/pO7vLlF2OTmMVLhmr7Ag==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "playwright": "1.58.2"
+        "playwright": "1.60.0"
       },
       "bin": {
         "playwright": "cli.js"
@@ -4263,6 +4357,12 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "license": "Python-2.0"
+    },
     "node_modules/assertion-error": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
@@ -4460,6 +4560,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001764",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001764.tgz",
@@ -4736,6 +4845,32 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/cosmiconfig": {
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.6.tgz",
+      "integrity": "sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==",
+      "license": "MIT",
+      "dependencies": {
+        "import-fresh": "^3.3.0",
+        "js-yaml": "^4.1.0",
+        "parse-json": "^5.2.0",
+        "path-type": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/d-fischer"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.9.5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -5124,6 +5259,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/error-ex": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.4.tgz",
+      "integrity": "sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==",
+      "license": "MIT",
+      "dependencies": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
     "node_modules/es-define-property": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
@@ -5788,6 +5932,22 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/import-fresh": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
+      "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
+      "license": "MIT",
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/imurmurhash": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
@@ -5835,6 +5995,12 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
+      "license": "MIT"
+    },
     "node_modules/is-buffer": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz",
@@ -6003,9 +6169,30 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "dev": true,
       "license": "MIT"
     },
+    "node_modules/js-yaml": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.2.0.tgz",
+      "integrity": "sha512-ePWsvanv0DWuDRsW8dnt+R4jQ31SCRCQ7hhNcPXZPsoBZiemuZNYGf7adZdqX2D86j6rvKp3RpCxVTSb8WQlOw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/puzrin"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/nodeca"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
     "node_modules/jsdom": {
       "version": "27.4.0",
       "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-27.4.0.tgz",
@@ -6113,6 +6300,12 @@
       ],
       "license": "MIT"
     },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "license": "MIT"
+    },
     "node_modules/listr2": {
       "version": "9.0.5",
       "resolved": "https://registry.npmjs.org/listr2/-/listr2-9.0.5.tgz",
@@ -6311,6 +6504,12 @@
         "node": "^20.17.0 || >=22.9.0"
       }
     },
+    "node_modules/make-plural": {
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/make-plural/-/make-plural-7.5.0.tgz",
+      "integrity": "sha512-0booA+aVYyVFoR67JBHdfVk0U08HmrBH2FrtmBqBa+NldlqXv/G2Z9VQuQq6Wgp2jDWdybEWGfBkk1cq5264WA==",
+      "license": "Unicode-DFS-2016"
+    },
     "node_modules/marked": {
       "version": "17.0.1",
       "resolved": "https://registry.npmjs.org/marked/-/marked-17.0.1.tgz",
@@ -6572,6 +6771,12 @@
         "node": ">= 18"
       }
     },
+    "node_modules/moo": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/moo/-/moo-0.5.3.tgz",
+      "integrity": "sha512-m2fmM2dDm7GZQsY7KK2cme8agi+AAljILjQnof7p1ZMDe6dQ4bdnSMx0cPppudoeNv5hEFQirN6u+O4fDE0IWA==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/mrmime": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz",
@@ -7080,6 +7285,42 @@
         "node": "^20.17.0 || >=22.9.0"
       }
     },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "license": "MIT",
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/parse-json/node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "license": "MIT"
+    },
     "node_modules/parse5": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-8.0.0.tgz",
@@ -7212,6 +7453,15 @@
         "url": "https://opencollective.com/express"
       }
     },
+    "node_modules/path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/pathe": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
@@ -7223,7 +7473,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
       "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/picomatch": {
@@ -7263,13 +7512,13 @@
       }
     },
     "node_modules/playwright": {
-      "version": "1.58.2",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.58.2.tgz",
-      "integrity": "sha512-vA30H8Nvkq/cPBnNw4Q8TWz1EJyqgpuinBcHET0YVJVFldr8JDNiU9LaWAE1KqSkRYazuaBhTpB5ZzShOezQ6A==",
+      "version": "1.60.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.60.0.tgz",
+      "integrity": "sha512-hheHdokM8cdqCb0lcE3s+zT4t4W+vvjpGxsZlDnikarzx8tSzMebh3UiFtgqwFwnTnjYQcsyMF8ei2mCO/tpeA==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "playwright-core": "1.58.2"
+        "playwright-core": "1.60.0"
       },
       "bin": {
         "playwright": "cli.js"
@@ -7282,9 +7531,9 @@
       }
     },
     "node_modules/playwright-core": {
-      "version": "1.58.2",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.58.2.tgz",
-      "integrity": "sha512-yZkEtftgwS8CsfYo7nm0KE8jsvm6i/PTgVtB8DL726wNf6H2IMsDuxCpJj59KDaxCtSnrWan2AeDqM7JBaultg==",
+      "version": "1.60.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.60.0.tgz",
+      "integrity": "sha512-9bW6zvX/m0lEbgTKJ6YppOKx8H3VOPBMOCFh2irXFOT4BbHgrx5hPjwJYLT40Lu+4qtD36qKc/Hn56StUW57IA==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
@@ -7581,6 +7830,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/restore-cursor": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-5.1.0.tgz",
@@ -7724,6 +7982,12 @@
         "tslib": "^2.1.0"
       }
     },
+    "node_modules/safe-identifier": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/safe-identifier/-/safe-identifier-0.4.2.tgz",
+      "integrity": "sha512-6pNbSMW6OhAi9j+N8V+U715yBQsaWJ7eyEUaOrawX+isg5ZxhUlV1NipNtgaKHmFGiABwt+ZF04Ii+3Xjkg+8w==",
+      "license": "ISC"
+    },
     "node_modules/safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
@@ -8413,7 +8677,7 @@
       "version": "5.9.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
-      "dev": true,
+      "devOptional": true,
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
diff --git a/wordkeep-client/package.json b/wordkeep-client/package.json
index a9980a7..ef056fa 100644
--- a/wordkeep-client/package.json
+++ b/wordkeep-client/package.json
@@ -7,7 +7,8 @@
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
     "test": "ng test --watch=false",
-    "test:e2e": "npx playwright test"
+    "test:e2e": "npx playwright test",
+    "check:i18n": "node scripts/check-i18n.mjs"
   },
   "prettier": {
     "printWidth": 100,
@@ -30,6 +31,8 @@
     "@angular/forms": "^21.1.0",
     "@angular/platform-browser": "^21.1.0",
     "@angular/router": "^21.1.0",
+    "@jsverse/transloco": "^8.3.0",
+    "@jsverse/transloco-messageformat": "^8.3.0",
     "@types/turndown": "^5.0.6",
     "dictionary-de": "^3.0.0",
     "dictionary-en": "^4.0.0",
@@ -50,7 +53,7 @@
     "@angular/build": "^21.1.0",
     "@angular/cli": "^21.1.0",
     "@angular/compiler-cli": "^21.1.0",
-    "@playwright/test": "^1.58.2",
+    "@playwright/test": "^1.60.0",
     "jsdom": "^27.1.0",
     "typescript": "~5.9.2",
     "vitest": "^4.0.8"
diff --git a/wordkeep-client/public/assets/i18n/auth/en.json b/wordkeep-client/public/assets/i18n/auth/en.json
new file mode 100644
index 0000000..b4f803b
--- /dev/null
+++ b/wordkeep-client/public/assets/i18n/auth/en.json
@@ -0,0 +1,102 @@
+{
+  "common": {
+    "brand": "WordKeep",
+    "brandReturn": "WordKeep — return to landing page",
+    "email": "Email",
+    "emailPlaceholder": "Enter your email",
+    "password": "Password",
+    "backToLogin": "Back to login",
+    "signIn": "Sign in",
+    "rememberPassword": "Remember your password?",
+    "genericError": "An error occurred. Please try again.",
+    "fillAllFields": "Please fill in all fields",
+    "passwordsNoMatch": "Passwords do not match",
+    "passwordTooShort": "Password must be at least 8 characters"
+  },
+  "login": {
+    "welcomeBack": "Welcome back",
+    "subtitle": "Sign in to your WordKeep account",
+    "twoFactorTitle": "Two-factor authentication",
+    "twoFactorSubtitle": "Enter the 6-digit code from your authenticator app",
+    "verificationSent": "Verification email sent. Please check your inbox.",
+    "resend": "Resend verification email",
+    "sending": "Sending...",
+    "passwordPlaceholder": "Enter your password",
+    "forgotPassword": "Forgot password?",
+    "signingIn": "Signing in...",
+    "noAccount": "Don't have an account?",
+    "createOne": "Create one",
+    "authCode": "Authenticator code",
+    "codePlaceholder": "000000",
+    "recoveryHint": "Or enter a recovery code if you've lost your device.",
+    "verify": "Verify",
+    "verifying": "Verifying...",
+    "invalidCredentials": "Invalid credentials",
+    "enterCode": "Please enter your code.",
+    "invalidCode": "Invalid code. Try again.",
+    "resendFailed": "Failed to resend verification email. Please try again."
+  },
+  "register": {
+    "checkEmailTitle": "Check your email",
+    "checkEmailBody": "We've sent a verification link to <strong>{{email}}</strong>. Click the link to activate your account.",
+    "linkExpires": "Link expires in 5 days.",
+    "title": "Create account",
+    "subtitle": "Get started with WordKeep",
+    "name": "Name",
+    "namePlaceholder": "Enter your name",
+    "passwordCreatePlaceholder": "Create a password",
+    "passwordHint": "Must be at least 8 characters",
+    "confirmPassword": "Confirm Password",
+    "confirmPlaceholder": "Confirm your password",
+    "creatingAccount": "Creating account...",
+    "createAccount": "Create account",
+    "haveAccount": "Already have an account?",
+    "validationFailed": "Validation failed. Please check your input."
+  },
+  "forgot": {
+    "title": "Forgot password?",
+    "subtitle": "Enter your email and we'll send you a reset link",
+    "checkEmailTitle": "Check your email",
+    "checkEmailBody": "If an account exists for <strong>{{email}}</strong>, you'll receive a password reset link.",
+    "spamNote": "Didn't receive the email? Check your spam folder.",
+    "sendReset": "Send reset link",
+    "sending": "Sending...",
+    "enterEmail": "Please enter your email"
+  },
+  "reset": {
+    "title": "Reset password",
+    "subtitle": "Choose a new password for your account",
+    "invalidTitle": "Invalid reset link",
+    "invalidBody": "This password reset link is invalid or has expired.",
+    "requestNew": "Request new link",
+    "successTitle": "Password reset!",
+    "successBody": "Your password has been changed. Redirecting...",
+    "newPassword": "New password",
+    "newPlaceholder": "Enter new password",
+    "passwordHint": "Minimum 8 characters",
+    "confirmPassword": "Confirm password",
+    "confirmPlaceholder": "Confirm new password",
+    "resetting": "Resetting...",
+    "resetButton": "Reset password",
+    "resetFailed": "Reset failed. The link may be invalid or expired."
+  },
+  "verifyEmail": {
+    "verifyingTitle": "Verifying your email...",
+    "verifyingBody": "Please wait while we verify your email address.",
+    "successTitle": "Email verified!",
+    "successBody": "Your account has been activated. Redirecting to dashboard...",
+    "failedTitle": "Verification failed",
+    "noToken": "No verification token provided.",
+    "verifyFailed": "Verification failed. The link may be invalid or expired."
+  },
+  "verifyChange": {
+    "verifyingTitle": "Verifying your new email...",
+    "verifyingBody": "Please wait while we confirm your email change.",
+    "successTitle": "Email updated!",
+    "successBody": "Your email address has been changed successfully. Redirecting...",
+    "failedTitle": "Verification failed",
+    "backToProfile": "Back to Profile",
+    "noToken": "No verification token provided.",
+    "verifyFailed": "Verification failed. The link may be invalid or expired."
+  }
+}
diff --git a/wordkeep-client/public/assets/i18n/auth/ro.json b/wordkeep-client/public/assets/i18n/auth/ro.json
new file mode 100644
index 0000000..a146fb7
--- /dev/null
+++ b/wordkeep-client/public/assets/i18n/auth/ro.json
@@ -0,0 +1,102 @@
+{
+  "common": {
+    "brand": "WordKeep",
+    "brandReturn": "WordKeep — înapoi la pagina principală",
+    "email": "E-mail",
+    "emailPlaceholder": "Introdu adresa de e-mail",
+    "password": "Parolă",
+    "backToLogin": "Înapoi la autentificare",
+    "signIn": "Autentifică-te",
+    "rememberPassword": "Ți-ai amintit parola?",
+    "genericError": "A apărut o eroare. Te rugăm să încerci din nou.",
+    "fillAllFields": "Te rugăm să completezi toate câmpurile",
+    "passwordsNoMatch": "Parolele nu se potrivesc",
+    "passwordTooShort": "Parola trebuie să aibă cel puțin 8 caractere"
+  },
+  "login": {
+    "welcomeBack": "Bine ai revenit",
+    "subtitle": "Autentifică-te în contul tău WordKeep",
+    "twoFactorTitle": "Autentificare în doi pași",
+    "twoFactorSubtitle": "Introdu codul din 6 cifre din aplicația ta de autentificare",
+    "verificationSent": "E-mailul de confirmare a fost trimis. Verifică-ți căsuța de e-mail.",
+    "resend": "Retrimite e-mailul de confirmare",
+    "sending": "Se trimite...",
+    "passwordPlaceholder": "Introdu parola",
+    "forgotPassword": "Ai uitat parola?",
+    "signingIn": "Se autentifică...",
+    "noAccount": "Nu ai un cont?",
+    "createOne": "Creează unul",
+    "authCode": "Cod de autentificare",
+    "codePlaceholder": "000000",
+    "recoveryHint": "Sau introdu un cod de recuperare dacă ți-ai pierdut dispozitivul.",
+    "verify": "Verifică",
+    "verifying": "Se verifică...",
+    "invalidCredentials": "Date de autentificare invalide",
+    "enterCode": "Te rugăm să introduci codul.",
+    "invalidCode": "Cod invalid. Încearcă din nou.",
+    "resendFailed": "Retrimiterea e-mailului de confirmare a eșuat. Te rugăm să încerci din nou."
+  },
+  "register": {
+    "checkEmailTitle": "Verifică-ți e-mailul",
+    "checkEmailBody": "Am trimis un link de confirmare către <strong>{{email}}</strong>. Apasă pe link pentru a-ți activa contul.",
+    "linkExpires": "Linkul expiră în 5 zile.",
+    "title": "Creează cont",
+    "subtitle": "Începe cu WordKeep",
+    "name": "Nume",
+    "namePlaceholder": "Introdu numele tău",
+    "passwordCreatePlaceholder": "Creează o parolă",
+    "passwordHint": "Trebuie să aibă cel puțin 8 caractere",
+    "confirmPassword": "Confirmă parola",
+    "confirmPlaceholder": "Confirmă parola",
+    "creatingAccount": "Se creează contul...",
+    "createAccount": "Creează cont",
+    "haveAccount": "Ai deja un cont?",
+    "validationFailed": "Validarea a eșuat. Verifică datele introduse."
+  },
+  "forgot": {
+    "title": "Ai uitat parola?",
+    "subtitle": "Introdu adresa de e-mail și îți vom trimite un link de resetare",
+    "checkEmailTitle": "Verifică-ți e-mailul",
+    "checkEmailBody": "Dacă există un cont pentru <strong>{{email}}</strong>, vei primi un link de resetare a parolei.",
+    "spamNote": "Nu ai primit e-mailul? Verifică folderul de spam.",
+    "sendReset": "Trimite linkul de resetare",
+    "sending": "Se trimite...",
+    "enterEmail": "Te rugăm să introduci adresa de e-mail"
+  },
+  "reset": {
+    "title": "Resetează parola",
+    "subtitle": "Alege o parolă nouă pentru contul tău",
+    "invalidTitle": "Link de resetare invalid",
+    "invalidBody": "Acest link de resetare a parolei este invalid sau a expirat.",
+    "requestNew": "Solicită un link nou",
+    "successTitle": "Parolă resetată!",
+    "successBody": "Parola ta a fost schimbată. Se redirecționează...",
+    "newPassword": "Parolă nouă",
+    "newPlaceholder": "Introdu parola nouă",
+    "passwordHint": "Minimum 8 caractere",
+    "confirmPassword": "Confirmă parola",
+    "confirmPlaceholder": "Confirmă parola nouă",
+    "resetting": "Se resetează...",
+    "resetButton": "Resetează parola",
+    "resetFailed": "Resetarea a eșuat. Linkul ar putea fi invalid sau expirat."
+  },
+  "verifyEmail": {
+    "verifyingTitle": "Se verifică e-mailul tău...",
+    "verifyingBody": "Te rugăm să aștepți cât îți verificăm adresa de e-mail.",
+    "successTitle": "E-mail confirmat!",
+    "successBody": "Contul tău a fost activat. Se redirecționează către panou...",
+    "failedTitle": "Verificarea a eșuat",
+    "noToken": "Nu a fost furnizat niciun token de verificare.",
+    "verifyFailed": "Verificarea a eșuat. Linkul ar putea fi invalid sau expirat."
+  },
+  "verifyChange": {
+    "verifyingTitle": "Se verifică noua ta adresă de e-mail...",
+    "verifyingBody": "Te rugăm să aștepți cât confirmăm schimbarea adresei de e-mail.",
+    "successTitle": "E-mail actualizat!",
+    "successBody": "Adresa ta de e-mail a fost schimbată cu succes. Se redirecționează...",
+    "failedTitle": "Verificarea a eșuat",
+    "backToProfile": "Înapoi la profil",
+    "noToken": "Nu a fost furnizat niciun token de verificare.",
+    "verifyFailed": "Verificarea a eșuat. Linkul ar putea fi invalid sau expirat."
+  }
+}
diff --git a/wordkeep-client/public/assets/i18n/bookView/en.json b/wordkeep-client/public/assets/i18n/bookView/en.json
new file mode 100644
index 0000000..24e3778
--- /dev/null
+++ b/wordkeep-client/public/assets/i18n/bookView/en.json
@@ -0,0 +1,63 @@
+{
+  "list": {
+    "title": "Document View",
+    "subtitle": "Read your documents as assembled text or export as Markdown.",
+    "loadError": "Failed to load documents",
+    "exportError": "Failed to export document",
+    "yourDocuments": "Your Documents",
+    "documentCount": "{count, plural, one {# document} other {# documents}}",
+    "loading": "Loading documents...",
+    "emptyTitle": "No documents ready",
+    "emptySubtitle": "Only ready documents appear here",
+    "renamed": "renamed",
+    "originalName": "Original: {{name}}",
+    "pageCount": "{count, plural, one {# page} other {# pages}}",
+    "extracted": "{{completed}}/{{total}} extracted ({{percent}}%)",
+    "linked": "{{completed}}/{{total}} linked ({{percent}}%)",
+    "detecting": "Detecting...",
+    "noLanguageSet": "No language set",
+    "view": "View",
+    "exporting": "Exporting...",
+    "export": "Export",
+    "exportMd": ".md (Markdown)",
+    "previous": "Previous",
+    "next": "Next",
+    "pageOf": "Page {{current}} of {{total}}",
+    "workIncompleteTitle": "Work incomplete",
+    "viewAnyway": "View anyway",
+    "exportAnyway": "Export anyway",
+    "issueOcr": "text extraction is not complete for all pages",
+    "issueLinks": "page linking is not complete",
+    "issueTrans": "translation is incomplete — untranslated pages will show as placeholders",
+    "incompleteMessage": "This document has issues: {{issues}}. Missing text will show as placeholders and missing links will default to new row.",
+    "issuesJoiner": " and "
+  },
+  "reader": {
+    "loading": "Loading document...",
+    "documentView": "Document View",
+    "noLanguageSet": "No language set",
+    "exporting": "Exporting...",
+    "exportMd": "Export .md",
+    "switchToSinglePage": "Switch to single page",
+    "switchToTwoPages": "Switch to two pages",
+    "onePage": "1 page",
+    "twoPages": "2 pages",
+    "prev": "Prev",
+    "next": "Next",
+    "page": "Page",
+    "pageOf": "of {{total}}",
+    "decreaseFontSize": "Decrease font size",
+    "increaseFontSize": "Increase font size",
+    "loadingContent": "Loading content...",
+    "pagePanelLabel": "Page {{current}} of {{total}}",
+    "endOfDocument": "End of document",
+    "backToDocumentView": "Back to Document View",
+    "loadError": "Failed to load document",
+    "loadPagesError": "Failed to load page content",
+    "noTranslationAvailable": "*No translation available.*",
+    "incompleteTranslationTitle": "Incomplete translation",
+    "incompleteTranslationMessage": "The translation to {{language}} is not complete ({{completed}}/{{total}} pages). Untranslated pages will show as placeholders.",
+    "viewAnyway": "View anyway",
+    "cancel": "Cancel"
+  }
+}
diff --git a/wordkeep-client/public/assets/i18n/bookView/ro.json b/wordkeep-client/public/assets/i18n/bookView/ro.json
new file mode 100644
index 0000000..276b305
--- /dev/null
+++ b/wordkeep-client/public/assets/i18n/bookView/ro.json
@@ -0,0 +1,63 @@
+{
+  "list": {
+    "title": "Vizualizare document",
+    "subtitle": "Citește documentele ca text asamblat sau exportă-le ca Markdown.",
+    "loadError": "Încărcarea documentelor a eșuat",
+    "exportError": "Exportul documentului a eșuat",
+    "yourDocuments": "Documentele tale",
+    "documentCount": "{count, plural, one {# document} few {# documente} other {# de documente}}",
+    "loading": "Se încarcă documentele...",
+    "emptyTitle": "Niciun document pregătit",
+    "emptySubtitle": "Aici apar doar documentele pregătite",
+    "renamed": "redenumit",
+    "originalName": "Original: {{name}}",
+    "pageCount": "{count, plural, one {# pagină} few {# pagini} other {# de pagini}}",
+    "extracted": "{{completed}}/{{total}} extrase ({{percent}}%)",
+    "linked": "{{completed}}/{{total}} legate ({{percent}}%)",
+    "detecting": "Se detectează...",
+    "noLanguageSet": "Nicio limbă setată",
+    "view": "Vizualizează",
+    "exporting": "Se exportă...",
+    "export": "Exportă",
+    "exportMd": ".md (Markdown)",
+    "previous": "Anterioara",
+    "next": "Următoarea",
+    "pageOf": "Pagina {{current}} din {{total}}",
+    "workIncompleteTitle": "Procesare incompletă",
+    "viewAnyway": "Vizualizează oricum",
+    "exportAnyway": "Exportă oricum",
+    "issueOcr": "extragerea textului nu este completă pentru toate paginile",
+    "issueLinks": "legarea paginilor nu este completă",
+    "issueTrans": "traducerea este incompletă — paginile netraduse vor apărea ca substituenți",
+    "incompleteMessage": "Acest document are probleme: {{issues}}. Textul lipsă va apărea ca substituenți, iar legăturile lipsă vor fi tratate implicit ca rând nou.",
+    "issuesJoiner": " și "
+  },
+  "reader": {
+    "loading": "Se încarcă documentul...",
+    "documentView": "Vizualizare document",
+    "noLanguageSet": "Nicio limbă setată",
+    "exporting": "Se exportă...",
+    "exportMd": "Exportă .md",
+    "switchToSinglePage": "Comută la o singură pagină",
+    "switchToTwoPages": "Comută la două pagini",
+    "onePage": "1 pagină",
+    "twoPages": "2 pagini",
+    "prev": "Anterioara",
+    "next": "Următoarea",
+    "page": "Pagina",
+    "pageOf": "din {{total}}",
+    "decreaseFontSize": "Micșorează dimensiunea textului",
+    "increaseFontSize": "Mărește dimensiunea textului",
+    "loadingContent": "Se încarcă conținutul...",
+    "pagePanelLabel": "Pagina {{current}} din {{total}}",
+    "endOfDocument": "Sfârșitul documentului",
+    "backToDocumentView": "Înapoi la vizualizarea documentelor",
+    "loadError": "Încărcarea documentului a eșuat",
+    "loadPagesError": "Încărcarea conținutului paginii a eșuat",
+    "noTranslationAvailable": "*Nicio traducere disponibilă.*",
+    "incompleteTranslationTitle": "Traducere incompletă",
+    "incompleteTranslationMessage": "Traducerea în {{language}} nu este completă ({{completed}}/{{total}} pagini). Paginile netraduse vor apărea ca substituenți.",
+    "viewAnyway": "Vizualizează oricum",
+    "cancel": "Anulează"
+  }
+}
diff --git a/wordkeep-client/public/assets/i18n/charter/en.json b/wordkeep-client/public/assets/i18n/charter/en.json
new file mode 100644
index 0000000..e520a16
--- /dev/null
+++ b/wordkeep-client/public/assets/i18n/charter/en.json
@@ -0,0 +1,44 @@
+{
+  "flags": {
+    "en": "English",
+    "ro": "Romanian",
+    "ariaEn": "Switch the charter to English",
+    "ariaRo": "Switch the charter to Romanian"
+  },
+  "subLegend": "Granted by the Order of the Steadfast Knight, in the year of grace MMXXVI.",
+  "cta": {
+    "subscribe": "Subscribe to the charter",
+    "resume": "Resume the office"
+  },
+  "colophon": "Granted at Sibiu &middot; A. D. MMXXVI &middot; A Steadfast Knight imprint",
+  "heading": {
+    "translation": "Founding Charter"
+  },
+  "opening": {
+    "translation": "<span class=\"charter__init\" aria-hidden=\"true\">L</span><span class=\"charter__sr-only\">L</span>et those present and to come know that we, <span class=\"charter__order\">Master of the Order of the Steadfast Knight</span>, in honor of the keeping of books, have granted, established, and by this present charter confirmed the workshop called <em>WordKeep</em>, for the guarding of words, the joining of leaves, and the turning of tongues, for as long as books shall be."
+  },
+  "call": {
+    "translation": "Moreover, these three offices have been appointed, under one seal:"
+  },
+  "article1": {
+    "title": "Of the Reading of the Page",
+    "body": "That pages already written, by pen or by type, shall be returned in faithful reading; the rubrics, the hands, and the marginalia shall be preserved inviolate, nothing omitted.",
+    "sign": "&mdash; by my own hand"
+  },
+  "article2": {
+    "title": "Of the Joining of the Leaves",
+    "body": "That facing pages shall be sewn together, sentences divided across leaves reconciled, and notes placed below restored to their own words.",
+    "sign": "&mdash; by my own hand"
+  },
+  "article3": {
+    "title": "Of the Turning of the Tongue",
+    "body": "That the volume shall be turned into another tongue, page with page and note with note, the text itself standing fast. The reader shall pay only for the leaves he turns, and not before.",
+    "sign": "&mdash; by my own hand"
+  },
+  "closing": {
+    "translation": "Given at Sibiu, on the 8th day of the month of May, in the year of grace <span>2026</span>. This charter, under our seals, we ratify in perpetuity."
+  },
+  "signed": {
+    "translation": "&mdash; Master of the Order of the Steadfast Knight"
+  }
+}
diff --git a/wordkeep-client/public/assets/i18n/charter/ro.json b/wordkeep-client/public/assets/i18n/charter/ro.json
new file mode 100644
index 0000000..355f02a
--- /dev/null
+++ b/wordkeep-client/public/assets/i18n/charter/ro.json
@@ -0,0 +1,44 @@
+{
+  "flags": {
+    "en": "Engleză",
+    "ro": "Română",
+    "ariaEn": "Comută carta în engleză",
+    "ariaRo": "Comută carta în română"
+  },
+  "subLegend": "Hărăzită de Ordinul Cavalerului Statornic, în anul de grație MMXXVI.",
+  "cta": {
+    "subscribe": "Subscrie la cartă",
+    "resume": "Reia slujba"
+  },
+  "colophon": "Hărăzită la Sibiu &middot; A. D. MMXXVI &middot; O emblemă a Cavalerului Statornic",
+  "heading": {
+    "translation": "Carta de întemeiere"
+  },
+  "opening": {
+    "translation": "<span class=\"charter__init\" aria-hidden=\"true\">S</span><span class=\"charter__sr-only\">S</span>ă știe cei de față și cei ce vor veni că noi, <span class=\"charter__order\">Magistru al Ordinului Cavalerului Statornic</span>, întru cinstea păstrării cărților, am hărăzit, am rânduit și prin această carte de față am întărit atelierul numit <em>WordKeep</em>, spre paza cuvintelor, împreunarea filelor și întoarcerea limbilor, atâta vreme cât vor fi cărți."
+  },
+  "call": {
+    "translation": "Mai mult, s-au rânduit aceste trei slujbe, sub o singură pecete:"
+  },
+  "article1": {
+    "title": "Despre citirea paginii",
+    "body": "Ca filele deja scrise, cu pana ori cu tiparul, să fie redate într-o citire credincioasă; rubricile, scrisul de mână și însemnările de pe margine să fie păstrate neatinse, nimic să nu fie lăsat afară.",
+    "sign": "&mdash; cu mâna mea"
+  },
+  "article2": {
+    "title": "Despre împreunarea filelor",
+    "body": "Ca paginile alăturate să fie cusute laolaltă, propozițiile despărțite peste file să fie împăcate, iar notele așezate dedesubt să fie întoarse la cuvintele lor.",
+    "sign": "&mdash; cu mâna mea"
+  },
+  "article3": {
+    "title": "Despre întoarcerea limbii",
+    "body": "Ca volumul să fie întors într-o altă limbă, pagină cu pagină și notă cu notă, însuși textul rămânând neclintit. Cititorul va plăti numai pentru filele pe care le întoarce, și nu mai înainte.",
+    "sign": "&mdash; cu mâna mea"
+  },
+  "closing": {
+    "translation": "Dat la Sibiu, în ziua a opta a lunii mai, în anul de grație <span>2026</span>. Această carte, sub pecețile noastre, o întărim în veci."
+  },
+  "signed": {
+    "translation": "&mdash; Magistru al Ordinului Cavalerului Statornic"
+  }
+}
diff --git a/wordkeep-client/public/assets/i18n/dictionary/en.json b/wordkeep-client/public/assets/i18n/dictionary/en.json
new file mode 100644
index 0000000..c5fbf7a
--- /dev/null
+++ b/wordkeep-client/public/assets/i18n/dictionary/en.json
@@ -0,0 +1,15 @@
+{
+  "header": {
+    "title": "My Dictionary",
+    "subtitle": "Custom words recognised by the spell checker."
+  },
+  "form": {
+    "placeholder": "Add a word…",
+    "add": "Add"
+  },
+  "emptyState": "No custom words yet. Add words above to skip spell-check errors for them.",
+  "remove": "Remove",
+  "errors": {
+    "addFailed": "Failed to add word. Please try again."
+  }
+}
diff --git a/wordkeep-client/public/assets/i18n/dictionary/ro.json b/wordkeep-client/public/assets/i18n/dictionary/ro.json
new file mode 100644
index 0000000..bf5ea94
--- /dev/null
+++ b/wordkeep-client/public/assets/i18n/dictionary/ro.json
@@ -0,0 +1,15 @@
+{
+  "header": {
+    "title": "Dicționarul meu",
+    "subtitle": "Cuvinte personalizate recunoscute de corectorul ortografic."
+  },
+  "form": {
+    "placeholder": "Adaugă un cuvânt…",
+    "add": "Adaugă"
+  },
+  "emptyState": "Niciun cuvânt personalizat încă. Adaugă cuvinte mai sus pentru a evita erorile de corectare ortografică pentru ele.",
+  "remove": "Elimină",
+  "errors": {
+    "addFailed": "Adăugarea cuvântului a eșuat. Încearcă din nou."
+  }
+}
diff --git a/wordkeep-client/public/assets/i18n/documents/en.json b/wordkeep-client/public/assets/i18n/documents/en.json
new file mode 100644
index 0000000..4f348c3
--- /dev/null
+++ b/wordkeep-client/public/assets/i18n/documents/en.json
@@ -0,0 +1,134 @@
+{
+  "list": {
+    "title": "Documents",
+    "subtitle": "Upload and manage your PDF documents",
+    "upload": {
+      "uploading": "Uploading document...",
+      "dragDrop": "Drag and drop a PDF file here, or",
+      "browse": "Browse Files",
+      "maxSize": "Maximum file size: 100MB"
+    },
+    "section": {
+      "heading": "Your Documents",
+      "count": "{{count}} document",
+      "countPlural": "{{count}} documents"
+    },
+    "loading": "Loading documents...",
+    "empty": {
+      "title": "No documents yet",
+      "subtitle": "Upload your first PDF to get started"
+    },
+    "status": {
+      "uploaded": "Uploaded",
+      "processing": "Processing",
+      "ready": "Ready",
+      "failed": "Failed"
+    },
+    "card": {
+      "renamed": "renamed",
+      "originalTitle": "Original: {{name}}",
+      "page": "{{count}} page",
+      "pagePlural": "{{count}} pages",
+      "retryTitle": "Retry processing",
+      "renameTitle": "Rename document",
+      "deleteTitle": "Delete document"
+    },
+    "pagination": {
+      "previous": "Previous",
+      "next": "Next",
+      "pageInfo": "Page {{current}} of {{last}}"
+    },
+    "errors": {
+      "load": "Failed to load documents",
+      "onlyPdf": "Only PDF files are allowed",
+      "upload": "Failed to upload document",
+      "retry": "Failed to retry document",
+      "delete": "Failed to delete document",
+      "rename": "Failed to rename document"
+    }
+  },
+  "detail": {
+    "loading": "Loading document...",
+    "notDetected": "Not detected",
+    "genres": {
+      "Fiction": "Fiction",
+      "Non-Fiction": "Non-Fiction",
+      "Technical": "Technical",
+      "Academic": "Academic",
+      "Legal": "Legal",
+      "Business": "Business",
+      "Personal": "Personal",
+      "Other": "Other"
+    },
+    "notFound": {
+      "title": "Document not found",
+      "back": "Back to Documents"
+    },
+    "backToDocuments": "Back to Documents",
+    "title": "Document Details",
+    "cover": {
+      "alt": "Document cover"
+    },
+    "actions": {
+      "openExtraction": "Open Text Extraction",
+      "openPageLinking": "Open Page Linking",
+      "openTranslation": "Open Translation",
+      "viewAsDocument": "View as Document",
+      "exporting": "Exporting...",
+      "exportMd": "Export .md"
+    },
+    "form": {
+      "nameLabel": "Name",
+      "namePlaceholder": "Document name",
+      "original": "Original: {{name}}",
+      "authorLabel": "Author",
+      "authorPlaceholder": "Author name",
+      "genreLabel": "Genre",
+      "genrePlaceholder": "Select genre...",
+      "languageLabel": "Language",
+      "languageTooltip": "Language is used for spell checking during text extraction",
+      "languageNotSet": "Not set",
+      "descriptionLabel": "Description",
+      "descriptionPlaceholder": "Add a description...",
+      "cancel": "Cancel",
+      "saving": "Saving...",
+      "save": "Save Changes"
+    },
+    "view": {
+      "renamed": "renamed",
+      "originalTitle": "Original: {{name}}",
+      "author": "Author",
+      "genre": "Genre",
+      "pages": "Pages",
+      "size": "Size",
+      "format": "Format",
+      "language": "Language",
+      "languageTooltip": "Language is used for spell checking during text extraction",
+      "detectionFailed": "Detection failed",
+      "retry": "Retry",
+      "detecting": "Detecting...",
+      "added": "Added",
+      "description": "Description",
+      "edit": "Edit",
+      "delete": "Delete"
+    },
+    "errors": {
+      "load": "Failed to load document",
+      "save": "Failed to save changes",
+      "delete": "Failed to delete document",
+      "detect": "Failed to detect language",
+      "export": "Failed to export document"
+    },
+    "incomplete": {
+      "title": "Work incomplete",
+      "missingText": "{{count}} page without extracted text",
+      "missingTextPlural": "{{count}} pages without extracted text",
+      "missingLinks": "{{count}} unlinked page pair",
+      "missingLinksPlural": "{{count}} unlinked page pairs",
+      "joiner": " and ",
+      "message": "This document has: {{issues}}. Missing text will show as placeholders and missing links will default to new row.",
+      "viewAnyway": "View anyway",
+      "exportAnyway": "Export anyway"
+    }
+  }
+}
diff --git a/wordkeep-client/public/assets/i18n/documents/ro.json b/wordkeep-client/public/assets/i18n/documents/ro.json
new file mode 100644
index 0000000..32f6c6f
--- /dev/null
+++ b/wordkeep-client/public/assets/i18n/documents/ro.json
@@ -0,0 +1,134 @@
+{
+  "list": {
+    "title": "Documente",
+    "subtitle": "Încarcă și gestionează documentele tale PDF",
+    "upload": {
+      "uploading": "Se încarcă documentul...",
+      "dragDrop": "Trage și plasează un fișier PDF aici sau",
+      "browse": "Răsfoiește fișiere",
+      "maxSize": "Dimensiune maximă a fișierului: 100MB"
+    },
+    "section": {
+      "heading": "Documentele tale",
+      "count": "{{count}} document",
+      "countPlural": "{{count}} documente"
+    },
+    "loading": "Se încarcă documentele...",
+    "empty": {
+      "title": "Niciun document încă",
+      "subtitle": "Încarcă primul tău PDF pentru a începe"
+    },
+    "status": {
+      "uploaded": "Încărcat",
+      "processing": "Se procesează",
+      "ready": "Gata",
+      "failed": "Eșuat"
+    },
+    "card": {
+      "renamed": "redenumit",
+      "originalTitle": "Original: {{name}}",
+      "page": "{{count}} pagină",
+      "pagePlural": "{{count}} pagini",
+      "retryTitle": "Reîncearcă procesarea",
+      "renameTitle": "Redenumește documentul",
+      "deleteTitle": "Șterge documentul"
+    },
+    "pagination": {
+      "previous": "Anterioara",
+      "next": "Următoarea",
+      "pageInfo": "Pagina {{current}} din {{last}}"
+    },
+    "errors": {
+      "load": "Încărcarea documentelor a eșuat",
+      "onlyPdf": "Sunt permise doar fișiere PDF",
+      "upload": "Încărcarea documentului a eșuat",
+      "retry": "Reîncercarea documentului a eșuat",
+      "delete": "Ștergerea documentului a eșuat",
+      "rename": "Redenumirea documentului a eșuat"
+    }
+  },
+  "detail": {
+    "loading": "Se încarcă documentul...",
+    "notDetected": "Nedetectată",
+    "genres": {
+      "Fiction": "Ficțiune",
+      "Non-Fiction": "Non-ficțiune",
+      "Technical": "Tehnic",
+      "Academic": "Academic",
+      "Legal": "Juridic",
+      "Business": "Afaceri",
+      "Personal": "Personal",
+      "Other": "Altele"
+    },
+    "notFound": {
+      "title": "Document negăsit",
+      "back": "Înapoi la Documente"
+    },
+    "backToDocuments": "Înapoi la Documente",
+    "title": "Detalii document",
+    "cover": {
+      "alt": "Coperta documentului"
+    },
+    "actions": {
+      "openExtraction": "Deschide extragerea textului",
+      "openPageLinking": "Deschide legarea paginilor",
+      "openTranslation": "Deschide traducerea",
+      "viewAsDocument": "Vezi ca document",
+      "exporting": "Se exportă...",
+      "exportMd": "Exportă .md"
+    },
+    "form": {
+      "nameLabel": "Nume",
+      "namePlaceholder": "Numele documentului",
+      "original": "Original: {{name}}",
+      "authorLabel": "Autor",
+      "authorPlaceholder": "Numele autorului",
+      "genreLabel": "Gen",
+      "genrePlaceholder": "Selectează genul...",
+      "languageLabel": "Limbă",
+      "languageTooltip": "Limba este folosită pentru verificarea ortografică în timpul extragerii textului",
+      "languageNotSet": "Nesetată",
+      "descriptionLabel": "Descriere",
+      "descriptionPlaceholder": "Adaugă o descriere...",
+      "cancel": "Anulează",
+      "saving": "Se salvează...",
+      "save": "Salvează modificările"
+    },
+    "view": {
+      "renamed": "redenumit",
+      "originalTitle": "Original: {{name}}",
+      "author": "Autor",
+      "genre": "Gen",
+      "pages": "Pagini",
+      "size": "Dimensiune",
+      "format": "Format",
+      "language": "Limbă",
+      "languageTooltip": "Limba este folosită pentru verificarea ortografică în timpul extragerii textului",
+      "detectionFailed": "Detectarea a eșuat",
+      "retry": "Reîncearcă",
+      "detecting": "Se detectează...",
+      "added": "Adăugat",
+      "description": "Descriere",
+      "edit": "Editează",
+      "delete": "Șterge"
+    },
+    "errors": {
+      "load": "Încărcarea documentului a eșuat",
+      "save": "Salvarea modificărilor a eșuat",
+      "delete": "Ștergerea documentului a eșuat",
+      "detect": "Detectarea limbii a eșuat",
+      "export": "Exportarea documentului a eșuat"
+    },
+    "incomplete": {
+      "title": "Lucrare incompletă",
+      "missingText": "{{count}} pagină fără text extras",
+      "missingTextPlural": "{{count}} pagini fără text extras",
+      "missingLinks": "{{count}} pereche de pagini nelegată",
+      "missingLinksPlural": "{{count}} perechi de pagini nelegate",
+      "joiner": " și ",
+      "message": "Acest document are: {{issues}}. Textul lipsă va apărea ca substituent, iar legăturile lipsă vor folosi implicit un rând nou.",
+      "viewAnyway": "Vezi oricum",
+      "exportAnyway": "Exportă oricum"
+    }
+  }
+}
diff --git a/wordkeep-client/public/assets/i18n/en.json b/wordkeep-client/public/assets/i18n/en.json
new file mode 100644
index 0000000..d491a24
--- /dev/null
+++ b/wordkeep-client/public/assets/i18n/en.json
@@ -0,0 +1,60 @@
+{
+  "language": {
+    "label": "Language",
+    "en": "EN",
+    "ro": "RO",
+    "enName": "English",
+    "roName": "Romanian",
+    "switch": "Switch language"
+  },
+  "userMenu": {
+    "profileInfo": "Profile Info",
+    "accountSecurity": "Account Security",
+    "personalisation": "Personalisation",
+    "dictionary": "My Dictionary",
+    "logout": "Logout"
+  },
+  "common": {
+    "save": "Save",
+    "cancel": "Cancel",
+    "close": "Close",
+    "delete": "Delete",
+    "edit": "Edit",
+    "loading": "Loading…"
+  },
+  "confirmations": {
+    "deleteDocument": {
+      "title": "Delete Document",
+      "message": "Are you sure you want to delete \"{{name}}\"? This cannot be undone.",
+      "confirm": "Delete"
+    },
+    "overrideOcrSingle": {
+      "title": "Override OCR Processing",
+      "message": "This will re-process this page with OCR.",
+      "warning": "Any manual text edits or formatting changes on this page will be lost.",
+      "confirm": "Run OCR"
+    },
+    "overrideExtractTextSingle": {
+      "title": "Re-extract Text",
+      "message": "This will re-extract text from this page.",
+      "warning": "Any manual text edits or formatting changes on this page will be lost.",
+      "confirm": "Extract Text"
+    },
+    "overrideOcrBulk": {
+      "title": "Override OCR Processing",
+      "message": "This will re-process all pages with OCR.",
+      "warning": "Any manual text edits or formatting changes on all pages will be lost.",
+      "confirm": "Run OCR"
+    }
+  },
+  "languages": {
+    "ar": "Arabic", "bg": "Bulgarian", "zh": "Chinese", "hr": "Croatian", "cs": "Czech",
+    "da": "Danish", "nl": "Dutch", "en": "English", "fi": "Finnish", "fr": "French",
+    "de": "German", "el": "Greek", "he": "Hebrew", "hi": "Hindi", "hu": "Hungarian",
+    "id": "Indonesian", "it": "Italian", "ja": "Japanese", "ko": "Korean", "la": "Latin",
+    "ms": "Malay", "no": "Norwegian", "pl": "Polish", "pt": "Portuguese", "ro": "Romanian",
+    "ru": "Russian", "sr": "Serbian", "sk": "Slovak", "sl": "Slovenian", "es": "Spanish",
+    "sv": "Swedish", "th": "Thai", "tr": "Turkish", "uk": "Ukrainian", "vi": "Vietnamese",
+    "unknown": "Unknown"
+  }
+}
diff --git a/wordkeep-client/public/assets/i18n/extraction/en.json b/wordkeep-client/public/assets/i18n/extraction/en.json
new file mode 100644
index 0000000..7bd69fb
--- /dev/null
+++ b/wordkeep-client/public/assets/i18n/extraction/en.json
@@ -0,0 +1,178 @@
+{
+  "list": {
+    "title": "Text Extraction",
+    "subtitle": "Extract text from your PDF documents using OCR",
+    "yourDocuments": "Your Documents",
+    "docCount": "{count, plural, one {# document} other {# documents}}",
+    "loading": "Loading documents...",
+    "emptyTitle": "No documents yet",
+    "emptySubtitle": "Upload documents in the Documents section first",
+    "renamed": "renamed",
+    "originalTitle": "Original: {name}",
+    "pageCount": "{count, plural, one {# page} other {# pages}}",
+    "ocrProgress": "{completed}/{total} extracted ({percent}%)",
+    "cancelOcr": "Cancel OCR",
+    "overrideTitle": "Re-run OCR on pages that have already been processed",
+    "override": "Override",
+    "runAllTitle": "Run AI OCR on all pages",
+    "runAll": "AI OCR All",
+    "previous": "Previous",
+    "pageOf": "Page {current} of {last}",
+    "next": "Next",
+    "errors": {
+      "loadFailed": "Failed to load documents"
+    }
+  },
+  "reader": {
+    "loading": "Loading document...",
+    "notFoundTitle": "Document not found",
+    "backToExtraction": "Back to Text Extraction",
+    "renamed": "renamed",
+    "originalTitle": "Original: {name}",
+    "pages": "{count} pages",
+    "detecting": "Detecting...",
+    "languageInfo": "Language is used for spell checking during text extraction",
+    "pageHeader": "Page {current} of {total}",
+    "ignoredBadge": "Ignored",
+    "ignoredBadgeTitle": "This page is ignored. It will not be included in the exported document.",
+    "unignoreTitle": "Un-ignore this page",
+    "ignoreTitle": "Ignore this page (exclude from exported document)",
+    "unignore": "Un-ignore",
+    "ignore": "Ignore",
+    "firstUnprocessed": "First Unprocessed",
+    "firstUnprocessedTitle": "Go to first page with no text",
+    "nextUnprocessed": "Next Unprocessed",
+    "nextUnprocessedTitle": "Go to next page with no text from current",
+    "pageAlt": "Page {page}",
+    "loadingPage": "Loading page...",
+    "imageError": "Failed to load page image",
+    "extractedText": "Extracted Text",
+    "edit": "Edit",
+    "clear": "Clear",
+    "extracting": "Extracting...",
+    "extractText": "Extract Text",
+    "processing": "Processing...",
+    "aiOcr": "AI OCR",
+    "transcribe": "Transcribe",
+    "cancel": "Cancel",
+    "saving": "Saving...",
+    "save": "Save",
+    "ignoredHeading": "This page is ignored",
+    "ignoredHint": "It will not appear in the exported document. Click \"Un-ignore\" to re-enable text extraction.",
+    "editorPlaceholder": "Enter text...",
+    "processingHeading": "Processing page with AI OCR...",
+    "processingHint": "This may take a moment",
+    "extractingHeading": "Extracting text from PDF...",
+    "extractingHint": "This should be quick",
+    "cached": "Cached result",
+    "ocrFailed": "OCR processing failed",
+    "noText": "No text available",
+    "noTextHint": "Use the buttons above or transcribe manually",
+    "transcribeManually": "Transcribe manually",
+    "footnotes": "Footnotes",
+    "footnotesCounter": "of {total}",
+    "deleteFootnote": "Delete",
+    "unlink": "Unlink",
+    "addFootnote": "Add Footnote",
+    "footnotePlaceholder": "Enter footnote text...",
+    "loadingFootnotes": "Loading footnotes...",
+    "footnoteOnPage": "This footnote is on page {page}",
+    "goToPage": "Go to page {page}",
+    "footnotePageBadge": "Page {page}",
+    "footnoteUnlinked": "Unlinked",
+    "noFootnotes": "No footnotes yet",
+    "noFootnotesHint": "Click \"Add Footnote\" to create one",
+    "contentType": {
+      "text": "Text",
+      "image": "Scanned",
+      "hybrid": "Mixed",
+      "unknown": "Unknown"
+    },
+    "contentTypeTooltip": {
+      "text": "Text page. \"Extract Text\" = fast, plain text. \"AI OCR\" = slower, formatted Markdown.",
+      "image": "Scanned page. Use \"AI OCR\" to extract text using AI vision.",
+      "hybrid": "Mixed page (text + images). \"Extract Text\" = fast, plain text. \"AI OCR\" = formatted with image content."
+    },
+    "extractionMethod": {
+      "text_extraction": "Direct",
+      "ocr": "OCR",
+      "manual": "Manual"
+    },
+    "extractionMethodTooltip": {
+      "text_extraction": "Extracted directly from PDF (fast, plain text only)",
+      "ocr": "Extracted using AI vision (preserves formatting: bold, headings, paragraphs)",
+      "manual": "Manually transcribed by user"
+    },
+    "insertFootnoteTooltip": {
+      "enterEditFirst": "Enter edit mode first",
+      "noFootnotes": "No footnotes exist yet",
+      "allReferenced": "All footnotes already referenced",
+      "insert": "Insert footnote reference"
+    },
+    "language": {
+      "notDetected": "Not detected",
+      "en": "English",
+      "es": "Spanish",
+      "fr": "French",
+      "de": "German",
+      "it": "Italian",
+      "pt": "Portuguese",
+      "ru": "Russian",
+      "zh": "Chinese",
+      "ja": "Japanese",
+      "ko": "Korean",
+      "ar": "Arabic",
+      "hi": "Hindi",
+      "ro": "Romanian",
+      "nl": "Dutch",
+      "pl": "Polish",
+      "sv": "Swedish",
+      "da": "Danish",
+      "no": "Norwegian",
+      "fi": "Finnish",
+      "cs": "Czech",
+      "el": "Greek",
+      "tr": "Turkish",
+      "he": "Hebrew",
+      "th": "Thai",
+      "vi": "Vietnamese",
+      "id": "Indonesian",
+      "ms": "Malay",
+      "la": "Latin",
+      "uk": "Ukrainian",
+      "hu": "Hungarian",
+      "bg": "Bulgarian",
+      "hr": "Croatian",
+      "sk": "Slovak",
+      "sl": "Slovenian",
+      "sr": "Serbian",
+      "unknown": "Unknown"
+    },
+    "confirm": {
+      "clearTitle": "Clear text",
+      "clearMessage": "Delete extracted text for this page?",
+      "clearConfirm": "Clear",
+      "deleteFootnoteTitle": "Delete footnote",
+      "deleteFootnoteMessage": "Delete footnote [^{number}]? References will be removed from page texts.",
+      "deleteFootnoteConfirm": "Delete",
+      "unlinkFootnoteTitle": "Unlink footnote",
+      "unlinkFootnoteMessage": "Remove [^{number}] reference from page {page} text?",
+      "unlinkFootnoteConfirm": "Unlink"
+    },
+    "errors": {
+      "saveFailed": "Failed to save changes",
+      "unlinkOrphanFailed": "Failed to unlink orphaned footnotes",
+      "ignoreStatusFailed": "Failed to update page ignore status",
+      "clearFailed": "Failed to clear text",
+      "loadImageFailed": "Failed to load page image",
+      "loadDocumentFailed": "Failed to load document",
+      "processOcrFailed": "Failed to process OCR",
+      "extractTextFailed": "Failed to extract text",
+      "footnoteEmpty": "Footnote text cannot be empty",
+      "createFootnoteFailed": "Failed to create footnote",
+      "updateFootnoteFailed": "Failed to update footnote",
+      "deleteFootnoteFailed": "Failed to delete footnote",
+      "unlinkFootnoteFailed": "Failed to unlink footnote"
+    }
+  }
+}
diff --git a/wordkeep-client/public/assets/i18n/extraction/ro.json b/wordkeep-client/public/assets/i18n/extraction/ro.json
new file mode 100644
index 0000000..78de651
--- /dev/null
+++ b/wordkeep-client/public/assets/i18n/extraction/ro.json
@@ -0,0 +1,178 @@
+{
+  "list": {
+    "title": "Extragere text",
+    "subtitle": "Extrage text din documentele tale PDF folosind OCR",
+    "yourDocuments": "Documentele tale",
+    "docCount": "{count, plural, one {# document} few {# documente} other {# de documente}}",
+    "loading": "Se încarcă documentele...",
+    "emptyTitle": "Niciun document încă",
+    "emptySubtitle": "Încarcă mai întâi documente în secțiunea Documente",
+    "renamed": "redenumit",
+    "originalTitle": "Original: {name}",
+    "pageCount": "{count, plural, one {# pagină} few {# pagini} other {# de pagini}}",
+    "ocrProgress": "{completed}/{total} extrase ({percent}%)",
+    "cancelOcr": "Anulează OCR",
+    "overrideTitle": "Rulează din nou OCR pe paginile deja procesate",
+    "override": "Suprascrie",
+    "runAllTitle": "Rulează AI OCR pe toate paginile",
+    "runAll": "AI OCR pe tot",
+    "previous": "Anterioara",
+    "pageOf": "Pagina {current} din {last}",
+    "next": "Următoarea",
+    "errors": {
+      "loadFailed": "Încărcarea documentelor a eșuat"
+    }
+  },
+  "reader": {
+    "loading": "Se încarcă documentul...",
+    "notFoundTitle": "Documentul nu a fost găsit",
+    "backToExtraction": "Înapoi la Extragere text",
+    "renamed": "redenumit",
+    "originalTitle": "Original: {name}",
+    "pages": "{count} pagini",
+    "detecting": "Se detectează...",
+    "languageInfo": "Limba este folosită pentru verificarea ortografică în timpul extragerii textului",
+    "pageHeader": "Pagina {current} din {total}",
+    "ignoredBadge": "Ignorată",
+    "ignoredBadgeTitle": "Această pagină este ignorată. Nu va fi inclusă în documentul exportat.",
+    "unignoreTitle": "Nu mai ignora această pagină",
+    "ignoreTitle": "Ignoră această pagină (exclude din documentul exportat)",
+    "unignore": "Nu mai ignora",
+    "ignore": "Ignoră",
+    "firstUnprocessed": "Prima neprocesată",
+    "firstUnprocessedTitle": "Mergi la prima pagină fără text",
+    "nextUnprocessed": "Următoarea neprocesată",
+    "nextUnprocessedTitle": "Mergi la următoarea pagină fără text de la cea curentă",
+    "pageAlt": "Pagina {page}",
+    "loadingPage": "Se încarcă pagina...",
+    "imageError": "Încărcarea imaginii paginii a eșuat",
+    "extractedText": "Text extras",
+    "edit": "Editează",
+    "clear": "Șterge",
+    "extracting": "Se extrage...",
+    "extractText": "Extrage text",
+    "processing": "Se procesează...",
+    "aiOcr": "AI OCR",
+    "transcribe": "Transcrie",
+    "cancel": "Anulează",
+    "saving": "Se salvează...",
+    "save": "Salvează",
+    "ignoredHeading": "Această pagină este ignorată",
+    "ignoredHint": "Nu va apărea în documentul exportat. Apasă „Nu mai ignora” pentru a reactiva extragerea textului.",
+    "editorPlaceholder": "Introdu text...",
+    "processingHeading": "Se procesează pagina cu AI OCR...",
+    "processingHint": "Poate dura un moment",
+    "extractingHeading": "Se extrage textul din PDF...",
+    "extractingHint": "Ar trebui să dureze puțin",
+    "cached": "Rezultat din cache",
+    "ocrFailed": "Procesarea OCR a eșuat",
+    "noText": "Niciun text disponibil",
+    "noTextHint": "Folosește butoanele de mai sus sau transcrie manual",
+    "transcribeManually": "Transcrie manual",
+    "footnotes": "Note de subsol",
+    "footnotesCounter": "din {total}",
+    "deleteFootnote": "Șterge",
+    "unlink": "Dezleagă",
+    "addFootnote": "Adaugă notă",
+    "footnotePlaceholder": "Introdu textul notei...",
+    "loadingFootnotes": "Se încarcă notele...",
+    "footnoteOnPage": "Această notă este pe pagina {page}",
+    "goToPage": "Mergi la pagina {page}",
+    "footnotePageBadge": "Pagina {page}",
+    "footnoteUnlinked": "Nelegată",
+    "noFootnotes": "Nicio notă încă",
+    "noFootnotesHint": "Apasă „Adaugă notă” pentru a crea una",
+    "contentType": {
+      "text": "Text",
+      "image": "Scanată",
+      "hybrid": "Mixtă",
+      "unknown": "Necunoscut"
+    },
+    "contentTypeTooltip": {
+      "text": "Pagină text. „Extrage text” = rapid, text simplu. „AI OCR” = mai lent, Markdown formatat.",
+      "image": "Pagină scanată. Folosește „AI OCR” pentru a extrage text cu viziune AI.",
+      "hybrid": "Pagină mixtă (text + imagini). „Extrage text” = rapid, text simplu. „AI OCR” = formatat cu conținut din imagini."
+    },
+    "extractionMethod": {
+      "text_extraction": "Direct",
+      "ocr": "OCR",
+      "manual": "Manual"
+    },
+    "extractionMethodTooltip": {
+      "text_extraction": "Extras direct din PDF (rapid, doar text simplu)",
+      "ocr": "Extras cu viziune AI (păstrează formatarea: îngroșat, titluri, paragrafe)",
+      "manual": "Transcris manual de utilizator"
+    },
+    "insertFootnoteTooltip": {
+      "enterEditFirst": "Intră mai întâi în modul editare",
+      "noFootnotes": "Nu există încă note de subsol",
+      "allReferenced": "Toate notele sunt deja referite",
+      "insert": "Inserează referință la notă"
+    },
+    "language": {
+      "notDetected": "Nedetectată",
+      "en": "Engleză",
+      "es": "Spaniolă",
+      "fr": "Franceză",
+      "de": "Germană",
+      "it": "Italiană",
+      "pt": "Portugheză",
+      "ru": "Rusă",
+      "zh": "Chineză",
+      "ja": "Japoneză",
+      "ko": "Coreeană",
+      "ar": "Arabă",
+      "hi": "Hindi",
+      "ro": "Română",
+      "nl": "Olandeză",
+      "pl": "Poloneză",
+      "sv": "Suedeză",
+      "da": "Daneză",
+      "no": "Norvegiană",
+      "fi": "Finlandeză",
+      "cs": "Cehă",
+      "el": "Greacă",
+      "tr": "Turcă",
+      "he": "Ebraică",
+      "th": "Thailandeză",
+      "vi": "Vietnameză",
+      "id": "Indoneziană",
+      "ms": "Malaeză",
+      "la": "Latină",
+      "uk": "Ucraineană",
+      "hu": "Maghiară",
+      "bg": "Bulgară",
+      "hr": "Croată",
+      "sk": "Slovacă",
+      "sl": "Slovenă",
+      "sr": "Sârbă",
+      "unknown": "Necunoscut"
+    },
+    "confirm": {
+      "clearTitle": "Șterge textul",
+      "clearMessage": "Ștergi textul extras pentru această pagină?",
+      "clearConfirm": "Șterge",
+      "deleteFootnoteTitle": "Șterge nota",
+      "deleteFootnoteMessage": "Ștergi nota [^{number}]? Referințele vor fi eliminate din textele paginilor.",
+      "deleteFootnoteConfirm": "Șterge",
+      "unlinkFootnoteTitle": "Dezleagă nota",
+      "unlinkFootnoteMessage": "Elimini referința [^{number}] din textul paginii {page}?",
+      "unlinkFootnoteConfirm": "Dezleagă"
+    },
+    "errors": {
+      "saveFailed": "Salvarea modificărilor a eșuat",
+      "unlinkOrphanFailed": "Dezlegarea notelor orfane a eșuat",
+      "ignoreStatusFailed": "Actualizarea stării de ignorare a paginii a eșuat",
+      "clearFailed": "Ștergerea textului a eșuat",
+      "loadImageFailed": "Încărcarea imaginii paginii a eșuat",
+      "loadDocumentFailed": "Încărcarea documentului a eșuat",
+      "processOcrFailed": "Procesarea OCR a eșuat",
+      "extractTextFailed": "Extragerea textului a eșuat",
+      "footnoteEmpty": "Textul notei nu poate fi gol",
+      "createFootnoteFailed": "Crearea notei a eșuat",
+      "updateFootnoteFailed": "Actualizarea notei a eșuat",
+      "deleteFootnoteFailed": "Ștergerea notei a eșuat",
+      "unlinkFootnoteFailed": "Dezlegarea notei a eșuat"
+    }
+  }
+}
diff --git a/wordkeep-client/public/assets/i18n/home/en.json b/wordkeep-client/public/assets/i18n/home/en.json
new file mode 100644
index 0000000..825d061
--- /dev/null
+++ b/wordkeep-client/public/assets/i18n/home/en.json
@@ -0,0 +1,119 @@
+{
+  "brand": "WordKeep",
+  "hero": {
+    "eyebrow": "The library",
+    "greeting": "Welcome back, {{name}}",
+    "subtitle": "Pick up where you left off, or open a new chapter."
+  },
+  "tools": {
+    "eyebrow": "The tools",
+    "hint": "scroll &rarr;"
+  },
+  "cards": {
+    "documents": {
+      "title": "Documents",
+      "lede": "Upload, organise and curate the PDFs you keep.",
+      "cue": "Open the stacks &rarr;"
+    },
+    "extraction": {
+      "title": "Text extraction",
+      "lede": "Lift words off the page with OCR.",
+      "cue": "Extract &rarr;"
+    },
+    "pageLinking": {
+      "title": "Page linking",
+      "lede": "Stitch text across consecutive pages.",
+      "cue": "Link &rarr;"
+    },
+    "documentView": {
+      "title": "Document view",
+      "lede": "Read assembled text and export as Markdown.",
+      "cue": "Read &rarr;"
+    },
+    "translation": {
+      "title": "Translation",
+      "lede": "Carry your documents into another language.",
+      "cue": "Translate &rarr;"
+    }
+  },
+  "compendium": {
+    "bulletin": "Today's bulletin",
+    "fromEditor": "From the editor",
+    "inThisIssue": "In this issue",
+    "wireRecent": "Wire — Recent",
+    "cards": {
+      "documents": {
+        "section": "Circulation",
+        "lede": "Upload, organise and curate the PDFs you keep — the daily files that fund the editorial.",
+        "cue": "page 02 &rarr;"
+      },
+      "extraction": {
+        "section": "Press Room",
+        "lede": "OCR engines lift words from scanned plates; verified columns ready for the next desk.",
+        "cue": "page 03 &rarr;"
+      },
+      "pageLinking": {
+        "section": "Bindery",
+        "lede": "Stitch text across consecutive pages so paragraphs run unbroken from leaf to leaf.",
+        "cue": "page 04 &rarr;"
+      },
+      "documentView": {
+        "section": "Reading Room",
+        "lede": "Read assembled text and export as Markdown — the finished page, fit for syndication.",
+        "cue": "page 05 &rarr;"
+      },
+      "translation": {
+        "section": "Translation Desk",
+        "lede": "Carry your documents into another language; the translation desk files the foreign edition.",
+        "cue": "page 06 &rarr;"
+      }
+    }
+  },
+  "scriptorium": {
+    "rubricFolio": "Folium primum &middot; the library",
+    "salutation": "Welcome back, {{name}} &mdash; pick up where the quill last left off, or open a fresh leaf and begin a new chapter.",
+    "rubricCapitula": "Capitula &middot; tools at hand",
+    "rubricChronicle": "Chronicon &middot; recently entered",
+    "cards": {
+      "documents": {
+        "title": "On the keeping of <em>Documents</em>",
+        "lede": "Upload, organise &amp; curate the PDFs you keep."
+      },
+      "extraction": {
+        "title": "On the lifting of <em>Words</em>",
+        "lede": "The OCR scribe takes them off the page."
+      },
+      "pageLinking": {
+        "title": "On the binding of <em>Pages</em>",
+        "lede": "Stitch text across consecutive folios."
+      },
+      "documentView": {
+        "title": "On the reading of the <em>Codex</em>",
+        "lede": "Read the assembled text and export as Markdown."
+      },
+      "translation": {
+        "title": "On <em>Translation</em> &amp; the carrying-over",
+        "lede": "Carry your documents into another tongue."
+      }
+    }
+  },
+  "console": {
+    "meta": "{{today}} &middot; uid:{{name}}",
+    "name": "NAME",
+    "nameBody": "    wordkeep &mdash; keep the words you read",
+    "synopsis": "SYNOPSIS",
+    "description": "DESCRIPTION",
+    "descriptionBody": "    A vocabulary &amp; OCR workbench for the readers who want\n    every word they meet to be kept. Upload PDFs, lift text\n    with OCR, stitch consecutive pages, translate, look up.\n\n    Press <kbd>/</kbd> at any time to jump between sections.",
+    "open": "open &rsaquo;",
+    "cards": {
+      "documents": "Upload, organise, curate the PDFs you keep.",
+      "extraction": "Lift words off the page with the OCR scribe.",
+      "pageLinking": "Bind text across consecutive pages.",
+      "documentView": "Read assembled text and export Markdown.",
+      "translation": "Carry your documents into another tongue."
+    }
+  },
+  "activity": {
+    "eyebrow": "Recent"
+  }
+}
diff --git a/wordkeep-client/public/assets/i18n/home/ro.json b/wordkeep-client/public/assets/i18n/home/ro.json
new file mode 100644
index 0000000..34162fe
--- /dev/null
+++ b/wordkeep-client/public/assets/i18n/home/ro.json
@@ -0,0 +1,119 @@
+{
+  "brand": "WordKeep",
+  "hero": {
+    "eyebrow": "Biblioteca",
+    "greeting": "Bine ai revenit, {{name}}",
+    "subtitle": "Continuă de unde ai rămas sau deschide un nou capitol."
+  },
+  "tools": {
+    "eyebrow": "Uneltele",
+    "hint": "derulează &rarr;"
+  },
+  "cards": {
+    "documents": {
+      "title": "Documente",
+      "lede": "Încarcă, organizează și îngrijește PDF-urile pe care le păstrezi.",
+      "cue": "Deschide rafturile &rarr;"
+    },
+    "extraction": {
+      "title": "Extragere de text",
+      "lede": "Ridică cuvintele de pe pagină cu OCR.",
+      "cue": "Extrage &rarr;"
+    },
+    "pageLinking": {
+      "title": "Legare de pagini",
+      "lede": "Coase textul de-a lungul paginilor consecutive.",
+      "cue": "Leagă &rarr;"
+    },
+    "documentView": {
+      "title": "Vizualizare document",
+      "lede": "Citește textul asamblat și exportă-l ca Markdown.",
+      "cue": "Citește &rarr;"
+    },
+    "translation": {
+      "title": "Traducere",
+      "lede": "Du-ți documentele într-o altă limbă.",
+      "cue": "Tradu &rarr;"
+    }
+  },
+  "compendium": {
+    "bulletin": "Buletinul de azi",
+    "fromEditor": "De la redactor",
+    "inThisIssue": "În acest număr",
+    "wireRecent": "Flux — Recent",
+    "cards": {
+      "documents": {
+        "section": "Circulație",
+        "lede": "Încarcă, organizează și îngrijește PDF-urile pe care le păstrezi — fișierele zilnice care susțin editorialul.",
+        "cue": "pagina 02 &rarr;"
+      },
+      "extraction": {
+        "section": "Tipografia",
+        "lede": "Motoarele OCR ridică cuvintele de pe plăcile scanate; coloane verificate, gata pentru următorul birou.",
+        "cue": "pagina 03 &rarr;"
+      },
+      "pageLinking": {
+        "section": "Legătoria",
+        "lede": "Coase textul de-a lungul paginilor consecutive, ca paragrafele să curgă neîntrerupt de la o filă la alta.",
+        "cue": "pagina 04 &rarr;"
+      },
+      "documentView": {
+        "section": "Sala de lectură",
+        "lede": "Citește textul asamblat și exportă-l ca Markdown — pagina finită, gata de difuzare.",
+        "cue": "pagina 05 &rarr;"
+      },
+      "translation": {
+        "section": "Biroul de traduceri",
+        "lede": "Du-ți documentele într-o altă limbă; biroul de traduceri depune ediția străină.",
+        "cue": "pagina 06 &rarr;"
+      }
+    }
+  },
+  "scriptorium": {
+    "rubricFolio": "Folium primum &middot; biblioteca",
+    "salutation": "Bine ai revenit, {{name}} &mdash; continuă de unde a rămas ultima oară pana, sau deschide o filă nouă și începe un nou capitol.",
+    "rubricCapitula": "Capitula &middot; uneltele la îndemână",
+    "rubricChronicle": "Chronicon &middot; intrate recent",
+    "cards": {
+      "documents": {
+        "title": "Despre păstrarea <em>Documentelor</em>",
+        "lede": "Încarcă, organizează &amp; îngrijește PDF-urile pe care le păstrezi."
+      },
+      "extraction": {
+        "title": "Despre ridicarea <em>Cuvintelor</em>",
+        "lede": "Scribul OCR le ridică de pe pagină."
+      },
+      "pageLinking": {
+        "title": "Despre legarea <em>Paginilor</em>",
+        "lede": "Coase textul de-a lungul foilor consecutive."
+      },
+      "documentView": {
+        "title": "Despre citirea <em>Codexului</em>",
+        "lede": "Citește textul asamblat și exportă-l ca Markdown."
+      },
+      "translation": {
+        "title": "Despre <em>Traducere</em> &amp; trecerea dintr-o limbă în alta",
+        "lede": "Du-ți documentele într-o altă limbă."
+      }
+    }
+  },
+  "console": {
+    "meta": "{{today}} &middot; uid:{{name}}",
+    "name": "NUME",
+    "nameBody": "    wordkeep &mdash; păstrează cuvintele pe care le citești",
+    "synopsis": "REZUMAT",
+    "description": "DESCRIERE",
+    "descriptionBody": "    Un atelier de vocabular &amp; OCR pentru cititorii care vor\n    ca fiecare cuvânt întâlnit să fie păstrat. Încarcă PDF-uri, ridică text\n    cu OCR, coase pagini consecutive, tradu, caută.\n\n    Apasă <kbd>/</kbd> oricând pentru a sări între secțiuni.",
+    "open": "deschide &rsaquo;",
+    "cards": {
+      "documents": "Încarcă, organizează, îngrijește PDF-urile pe care le păstrezi.",
+      "extraction": "Ridică cuvintele de pe pagină cu scribul OCR.",
+      "pageLinking": "Leagă textul de-a lungul paginilor consecutive.",
+      "documentView": "Citește textul asamblat și exportă Markdown.",
+      "translation": "Du-ți documentele într-o altă limbă."
+    }
+  },
+  "activity": {
+    "eyebrow": "Recent"
+  }
+}
diff --git a/wordkeep-client/public/assets/i18n/pageLinking/en.json b/wordkeep-client/public/assets/i18n/pageLinking/en.json
new file mode 100644
index 0000000..b9012e2
--- /dev/null
+++ b/wordkeep-client/public/assets/i18n/pageLinking/en.json
@@ -0,0 +1,50 @@
+{
+  "list": {
+    "title": "Page Linking",
+    "subtitle": "Link consecutive pages to define how text flows between them",
+    "errorLoad": "Failed to load documents",
+    "documentsHeading": "Your Documents",
+    "docCount": "{{count}} document",
+    "docCountPlural": "{{count}} documents",
+    "loading": "Loading documents...",
+    "emptyTitle": "No documents ready",
+    "emptySubtitle": "Only ready documents with more than one page appear here",
+    "renamedBadge": "renamed",
+    "originalTitle": "Original: {{name}}",
+    "pages": "{{count}} pages",
+    "progressText": "{{completed}} / {{total}} pages linked",
+    "linkAction": "Link",
+    "previous": "Previous",
+    "next": "Next",
+    "pageInfo": "Page {{current}} of {{last}}"
+  },
+  "reader": {
+    "loading": "Loading document...",
+    "backLink": "Page Linking",
+    "pairIndicator": "Pair {{current}} / {{total}}",
+    "errorLoadDocument": "Failed to load document",
+    "errorLoadPageData": "Failed to load page data",
+    "errorSave": "Failed to save. Please try again.",
+    "errorIgnore": "Failed to update page ignore status",
+    "prev": "Prev",
+    "next": "Next",
+    "firstUnprocessed": "First Unprocessed",
+    "nextUnprocessed": "Next Unprocessed",
+    "allDone": "All done! All page pairs have been linked.",
+    "pageLabel": "Page {{page}}",
+    "ignore": "Ignore",
+    "unignore": "Un-ignore",
+    "ignorePage": "Ignore page {{page}}",
+    "unignorePage": "Un-ignore page {{page}}",
+    "pageAlt": "Page {{page}}",
+    "ignoredOverlay": "Ignored",
+    "imageUnavailable": "Image unavailable",
+    "ignoredPairTooltip": "One or more pages in this pair are ignored. Un-ignore the page to set a link decision.",
+    "ignoredLabel": "IGNORED",
+    "newRow": "New Row",
+    "continueRow": "Continue Row",
+    "noSelectionHint": "No selection — pair will remain unlinked",
+    "saving": "Saving...",
+    "saveAndContinue": "Save & Continue"
+  }
+}
diff --git a/wordkeep-client/public/assets/i18n/pageLinking/ro.json b/wordkeep-client/public/assets/i18n/pageLinking/ro.json
new file mode 100644
index 0000000..5cb9900
--- /dev/null
+++ b/wordkeep-client/public/assets/i18n/pageLinking/ro.json
@@ -0,0 +1,50 @@
+{
+  "list": {
+    "title": "Legarea paginilor",
+    "subtitle": "Leagă paginile consecutive pentru a defini cum se continuă textul între ele",
+    "errorLoad": "Încărcarea documentelor a eșuat",
+    "documentsHeading": "Documentele tale",
+    "docCount": "{{count}} document",
+    "docCountPlural": "{{count}} documente",
+    "loading": "Se încarcă documentele...",
+    "emptyTitle": "Niciun document pregătit",
+    "emptySubtitle": "Aici apar doar documentele pregătite cu mai mult de o pagină",
+    "renamedBadge": "redenumit",
+    "originalTitle": "Original: {{name}}",
+    "pages": "{{count}} pagini",
+    "progressText": "{{completed}} / {{total}} pagini legate",
+    "linkAction": "Leagă",
+    "previous": "Anterior",
+    "next": "Următor",
+    "pageInfo": "Pagina {{current}} din {{last}}"
+  },
+  "reader": {
+    "loading": "Se încarcă documentul...",
+    "backLink": "Legarea paginilor",
+    "pairIndicator": "Perechea {{current}} / {{total}}",
+    "errorLoadDocument": "Încărcarea documentului a eșuat",
+    "errorLoadPageData": "Încărcarea datelor paginii a eșuat",
+    "errorSave": "Salvarea a eșuat. Încearcă din nou.",
+    "errorIgnore": "Actualizarea stării de ignorare a paginii a eșuat",
+    "prev": "Anterior",
+    "next": "Următor",
+    "firstUnprocessed": "Prima neprocesată",
+    "nextUnprocessed": "Următoarea neprocesată",
+    "allDone": "Gata! Toate perechile de pagini au fost legate.",
+    "pageLabel": "Pagina {{page}}",
+    "ignore": "Ignoră",
+    "unignore": "Nu ignora",
+    "ignorePage": "Ignoră pagina {{page}}",
+    "unignorePage": "Nu ignora pagina {{page}}",
+    "pageAlt": "Pagina {{page}}",
+    "ignoredOverlay": "Ignorată",
+    "imageUnavailable": "Imagine indisponibilă",
+    "ignoredPairTooltip": "Una sau mai multe pagini din această pereche sunt ignorate. Nu mai ignora pagina pentru a stabili o decizie de legare.",
+    "ignoredLabel": "IGNORATĂ",
+    "newRow": "Rând nou",
+    "continueRow": "Continuă rândul",
+    "noSelectionHint": "Nicio selecție — perechea va rămâne nelegată",
+    "saving": "Se salvează...",
+    "saveAndContinue": "Salvează & continuă"
+  }
+}
diff --git a/wordkeep-client/public/assets/i18n/profile/en.json b/wordkeep-client/public/assets/i18n/profile/en.json
new file mode 100644
index 0000000..28bba79
--- /dev/null
+++ b/wordkeep-client/public/assets/i18n/profile/en.json
@@ -0,0 +1,167 @@
+{
+  "nav": {
+    "account": "Account",
+    "info": "Profile Info",
+    "security": "Account Security",
+    "personalisation": "Personalisation"
+  },
+  "personalisation": {
+    "title": "Personalisation",
+    "subtitle": "Pick a layout, a palette, a colour mode, and a language.",
+    "layoutHeading": "Layout",
+    "paletteHeading": "Palette",
+    "modeHeading": "Colour mode",
+    "resolvedPrefix": "resolved",
+    "mode": {
+      "auto": "Auto",
+      "light": "Light",
+      "dark": "Dark"
+    },
+    "layouts": {
+      "reading-room": { "label": "Reading Room", "blurb": "Editorial baseline — top header, gentle shelves." },
+      "workbench": { "label": "Workbench", "blurb": "Slim top bar, bottom dock — a pro tool." },
+      "compendium": { "label": "Compendium", "blurb": "Tall masthead, newspaper composition." },
+      "glass": { "label": "Glass", "blurb": "Floating capsule, content owns the canvas." },
+      "scriptorium": { "label": "Scriptorium", "blurb": "Manuscript folio — drop cap, ruled vellum, rubric." },
+      "console": { "label": "Console", "blurb": "Terminal — prompt line, mono rows, slash palette." }
+    },
+    "palettes": {
+      "reading-room": { "label": "Reading Room", "blurb": "Cream + wine + brass" },
+      "cobalt": { "label": "Cobalt", "blurb": "Bone + cobalt + vermilion" },
+      "monastic": { "label": "Monastic", "blurb": "Vellum + lapis + sepia" },
+      "grove": { "label": "Grove", "blurb": "Birch + moss + ochre" },
+      "ferrous": { "label": "Ferrous", "blurb": "Ash + rust + steel" },
+      "plum": { "label": "Plum", "blurb": "Alabaster + plum + gilt" }
+    },
+    "language": {
+      "title": "Language",
+      "description": "Choose the language for the WordKeep interface.",
+      "name": {
+        "en": "English",
+        "ro": "Romanian"
+      }
+    }
+  },
+  "info": {
+    "title": "Profile Info",
+    "avatar": {
+      "alt": "Profile photo",
+      "hintUpdate": "Update your profile photo.",
+      "hintAdd": "Add a profile photo.",
+      "changePhoto": "Change Photo",
+      "uploadPhoto": "Upload Photo",
+      "removing": "Removing…",
+      "remove": "Remove"
+    },
+    "name": {
+      "label": "Name",
+      "edit": "Edit",
+      "placeholder": "Your name",
+      "saving": "Saving…",
+      "save": "Save",
+      "cancel": "Cancel",
+      "required": "Name is required.",
+      "saveFailed": "Failed to save. Try again."
+    },
+    "email": {
+      "label": "Email",
+      "change": "Change",
+      "pending": "Pending change to <strong>{{email}}</strong>",
+      "pendingHint": "Check your new inbox for the verification link. Expires {{date}}.",
+      "resent": "Verification email resent.",
+      "sending": "Sending…",
+      "resend": "Resend",
+      "cancelling": "Cancelling…",
+      "cancel": "Cancel"
+    },
+    "emailModal": {
+      "title": "Change Email",
+      "passwordDesc": "Enter your current password to confirm your identity.",
+      "currentPasswordLabel": "Current Password",
+      "currentPasswordPlaceholder": "Your current password",
+      "emailDesc": "Enter the new email address. A verification link will be sent to it.",
+      "newEmailLabel": "New Email",
+      "newEmailPlaceholder": "new@example.com",
+      "cancel": "Cancel",
+      "checking": "Checking…",
+      "continue": "Continue",
+      "sending": "Sending…",
+      "sendVerification": "Send Verification",
+      "passwordRequired": "Password is required.",
+      "incorrectPassword": "Incorrect password.",
+      "newEmailRequired": "New email is required.",
+      "requestFailed": "Failed to request email change. Try again."
+    }
+  },
+  "security": {
+    "title": "Account Security",
+    "passwordUpdated": "Password updated successfully.",
+    "password": {
+      "label": "Password",
+      "change": "Change"
+    },
+    "twoFactor": {
+      "label": "Two-Factor Authentication",
+      "enabled": "Enabled",
+      "disabled": "Disabled",
+      "desc": "Use an authenticator app (Google Authenticator, 1Password, etc.) to add an extra layer of security.",
+      "disable": "Disable",
+      "enable": "Enable"
+    },
+    "passwordModal": {
+      "title": "Change Password",
+      "currentDesc": "Enter your current password to confirm your identity.",
+      "currentLabel": "Current Password",
+      "currentPlaceholder": "Your current password",
+      "newDesc": "Choose a new password. It must be at least 8 characters.",
+      "newLabel": "New Password",
+      "newPlaceholder": "New password",
+      "confirmLabel": "Confirm New Password",
+      "confirmPlaceholder": "Confirm new password",
+      "cancel": "Cancel",
+      "checking": "Checking…",
+      "continue": "Continue",
+      "saving": "Saving…",
+      "savePassword": "Save Password",
+      "passwordRequired": "Password is required.",
+      "incorrectPassword": "Incorrect password.",
+      "newRequired": "New password is required.",
+      "noMatch": "Passwords do not match.",
+      "changeFailed": "Failed to change password. Try again."
+    },
+    "enable2fa": {
+      "title": "Enable Two-Factor Authentication",
+      "passwordDesc": "Enter your current password to confirm your identity.",
+      "passwordLabel": "Current Password",
+      "passwordPlaceholder": "Your current password",
+      "scanDesc": "Scan this QR code with your authenticator app, then enter the 6-digit code to confirm.",
+      "manualSummary": "Can't scan? Enter manually",
+      "codeLabel": "Verification Code",
+      "codePlaceholder": "000000",
+      "enabledTitle": "Two-factor authentication enabled!",
+      "recoveryDesc": "Save these recovery codes somewhere safe. Each code can only be used once if you lose access to your authenticator app.",
+      "copyAll": "Copy all codes",
+      "cancel": "Cancel",
+      "checking": "Checking…",
+      "continue": "Continue",
+      "verifying": "Verifying…",
+      "confirm": "Confirm",
+      "done": "Done",
+      "passwordRequired": "Password is required.",
+      "incorrectPassword": "Incorrect password.",
+      "codeRequired": "Verification code is required.",
+      "invalidCode": "Invalid code."
+    },
+    "disable2fa": {
+      "title": "Disable Two-Factor Authentication",
+      "desc": "Enter your password to disable two-factor authentication. This will make your account less secure.",
+      "passwordLabel": "Current Password",
+      "passwordPlaceholder": "Your current password",
+      "cancel": "Cancel",
+      "disabling": "Disabling…",
+      "disable": "Disable 2FA",
+      "passwordRequired": "Password is required.",
+      "incorrectPassword": "Incorrect password."
+    }
+  }
+}
diff --git a/wordkeep-client/public/assets/i18n/profile/ro.json b/wordkeep-client/public/assets/i18n/profile/ro.json
new file mode 100644
index 0000000..cd186fd
--- /dev/null
+++ b/wordkeep-client/public/assets/i18n/profile/ro.json
@@ -0,0 +1,167 @@
+{
+  "nav": {
+    "account": "Cont",
+    "info": "Profil",
+    "security": "Securitatea contului",
+    "personalisation": "Personalizare"
+  },
+  "personalisation": {
+    "title": "Personalizare",
+    "subtitle": "Alege un aspect, o paletă, un mod de culoare și o limbă.",
+    "layoutHeading": "Aspect",
+    "paletteHeading": "Paletă",
+    "modeHeading": "Mod de culoare",
+    "resolvedPrefix": "rezolvat",
+    "mode": {
+      "auto": "Automat",
+      "light": "Luminos",
+      "dark": "Întunecat"
+    },
+    "layouts": {
+      "reading-room": { "label": "Sala de lectură", "blurb": "Bază editorială — antet sus, rafturi domoale." },
+      "workbench": { "label": "Banc de lucru", "blurb": "Bară subțire sus, doc jos — un instrument profesionist." },
+      "compendium": { "label": "Compendiu", "blurb": "Frontispiciu înalt, compoziție de ziar." },
+      "glass": { "label": "Sticlă", "blurb": "Capsulă plutitoare, conținutul stăpânește pânza." },
+      "scriptorium": { "label": "Scriptorium", "blurb": "Folio de manuscris — inițială ornată, velin liniat, rubrică." },
+      "console": { "label": "Consolă", "blurb": "Terminal — linie de comandă, rânduri mono, paletă slash." }
+    },
+    "palettes": {
+      "reading-room": { "label": "Sala de lectură", "blurb": "Crem + vin + alamă" },
+      "cobalt": { "label": "Cobalt", "blurb": "Os + cobalt + vermillon" },
+      "monastic": { "label": "Monahală", "blurb": "Velin + lapis + sepia" },
+      "grove": { "label": "Crâng", "blurb": "Mesteacăn + mușchi + ocru" },
+      "ferrous": { "label": "Feruginos", "blurb": "Cenușă + rugină + oțel" },
+      "plum": { "label": "Prună", "blurb": "Alabastru + prună + auriu" }
+    },
+    "language": {
+      "title": "Limbă",
+      "description": "Alege limba pentru interfața WordKeep.",
+      "name": {
+        "en": "Engleză",
+        "ro": "Română"
+      }
+    }
+  },
+  "info": {
+    "title": "Profil",
+    "avatar": {
+      "alt": "Fotografie de profil",
+      "hintUpdate": "Actualizează-ți fotografia de profil.",
+      "hintAdd": "Adaugă o fotografie de profil.",
+      "changePhoto": "Schimbă fotografia",
+      "uploadPhoto": "Încarcă fotografie",
+      "removing": "Se elimină…",
+      "remove": "Elimină"
+    },
+    "name": {
+      "label": "Nume",
+      "edit": "Editează",
+      "placeholder": "Numele tău",
+      "saving": "Se salvează…",
+      "save": "Salvează",
+      "cancel": "Anulează",
+      "required": "Numele este obligatoriu.",
+      "saveFailed": "Salvarea a eșuat. Încearcă din nou."
+    },
+    "email": {
+      "label": "E-mail",
+      "change": "Schimbă",
+      "pending": "Modificare în așteptare către <strong>{{email}}</strong>",
+      "pendingHint": "Verifică noua căsuță de e-mail pentru linkul de verificare. Expiră {{date}}.",
+      "resent": "E-mailul de verificare a fost retrimis.",
+      "sending": "Se trimite…",
+      "resend": "Retrimite",
+      "cancelling": "Se anulează…",
+      "cancel": "Anulează"
+    },
+    "emailModal": {
+      "title": "Schimbă e-mailul",
+      "passwordDesc": "Introdu parola curentă pentru a-ți confirma identitatea.",
+      "currentPasswordLabel": "Parola curentă",
+      "currentPasswordPlaceholder": "Parola ta curentă",
+      "emailDesc": "Introdu noua adresă de e-mail. Un link de verificare va fi trimis la aceasta.",
+      "newEmailLabel": "E-mail nou",
+      "newEmailPlaceholder": "nou@exemplu.com",
+      "cancel": "Anulează",
+      "checking": "Se verifică…",
+      "continue": "Continuă",
+      "sending": "Se trimite…",
+      "sendVerification": "Trimite verificarea",
+      "passwordRequired": "Parola este obligatorie.",
+      "incorrectPassword": "Parolă incorectă.",
+      "newEmailRequired": "E-mailul nou este obligatoriu.",
+      "requestFailed": "Solicitarea de schimbare a e-mailului a eșuat. Încearcă din nou."
+    }
+  },
+  "security": {
+    "title": "Securitatea contului",
+    "passwordUpdated": "Parola a fost actualizată cu succes.",
+    "password": {
+      "label": "Parolă",
+      "change": "Schimbă"
+    },
+    "twoFactor": {
+      "label": "Autentificare în doi pași",
+      "enabled": "Activată",
+      "disabled": "Dezactivată",
+      "desc": "Folosește o aplicație de autentificare (Google Authenticator, 1Password etc.) pentru a adăuga un nivel suplimentar de securitate.",
+      "disable": "Dezactivează",
+      "enable": "Activează"
+    },
+    "passwordModal": {
+      "title": "Schimbă parola",
+      "currentDesc": "Introdu parola curentă pentru a-ți confirma identitatea.",
+      "currentLabel": "Parola curentă",
+      "currentPlaceholder": "Parola ta curentă",
+      "newDesc": "Alege o parolă nouă. Trebuie să aibă cel puțin 8 caractere.",
+      "newLabel": "Parolă nouă",
+      "newPlaceholder": "Parolă nouă",
+      "confirmLabel": "Confirmă parola nouă",
+      "confirmPlaceholder": "Confirmă parola nouă",
+      "cancel": "Anulează",
+      "checking": "Se verifică…",
+      "continue": "Continuă",
+      "saving": "Se salvează…",
+      "savePassword": "Salvează parola",
+      "passwordRequired": "Parola este obligatorie.",
+      "incorrectPassword": "Parolă incorectă.",
+      "newRequired": "Parola nouă este obligatorie.",
+      "noMatch": "Parolele nu se potrivesc.",
+      "changeFailed": "Schimbarea parolei a eșuat. Încearcă din nou."
+    },
+    "enable2fa": {
+      "title": "Activează autentificarea în doi pași",
+      "passwordDesc": "Introdu parola curentă pentru a-ți confirma identitatea.",
+      "passwordLabel": "Parola curentă",
+      "passwordPlaceholder": "Parola ta curentă",
+      "scanDesc": "Scanează acest cod QR cu aplicația de autentificare, apoi introdu codul din 6 cifre pentru a confirma.",
+      "manualSummary": "Nu poți scana? Introdu manual",
+      "codeLabel": "Cod de verificare",
+      "codePlaceholder": "000000",
+      "enabledTitle": "Autentificarea în doi pași a fost activată!",
+      "recoveryDesc": "Păstrează aceste coduri de recuperare într-un loc sigur. Fiecare cod poate fi folosit o singură dată dacă pierzi accesul la aplicația de autentificare.",
+      "copyAll": "Copiază toate codurile",
+      "cancel": "Anulează",
+      "checking": "Se verifică…",
+      "continue": "Continuă",
+      "verifying": "Se verifică…",
+      "confirm": "Confirmă",
+      "done": "Gata",
+      "passwordRequired": "Parola este obligatorie.",
+      "incorrectPassword": "Parolă incorectă.",
+      "codeRequired": "Codul de verificare este obligatoriu.",
+      "invalidCode": "Cod invalid."
+    },
+    "disable2fa": {
+      "title": "Dezactivează autentificarea în doi pași",
+      "desc": "Introdu parola pentru a dezactiva autentificarea în doi pași. Acest lucru îți va face contul mai puțin sigur.",
+      "passwordLabel": "Parola curentă",
+      "passwordPlaceholder": "Parola ta curentă",
+      "cancel": "Anulează",
+      "disabling": "Se dezactivează…",
+      "disable": "Dezactivează 2FA",
+      "passwordRequired": "Parola este obligatorie.",
+      "incorrectPassword": "Parolă incorectă."
+    }
+  }
+}
diff --git a/wordkeep-client/public/assets/i18n/ro.json b/wordkeep-client/public/assets/i18n/ro.json
new file mode 100644
index 0000000..f3ae828
--- /dev/null
+++ b/wordkeep-client/public/assets/i18n/ro.json
@@ -0,0 +1,60 @@
+{
+  "language": {
+    "label": "Limbă",
+    "en": "EN",
+    "ro": "RO",
+    "enName": "Engleză",
+    "roName": "Română",
+    "switch": "Schimbă limba"
+  },
+  "userMenu": {
+    "profileInfo": "Profil",
+    "accountSecurity": "Securitatea contului",
+    "personalisation": "Personalizare",
+    "dictionary": "Dicționarul meu",
+    "logout": "Deconectare"
+  },
+  "common": {
+    "save": "Salvează",
+    "cancel": "Anulează",
+    "close": "Închide",
+    "delete": "Șterge",
+    "edit": "Editează",
+    "loading": "Se încarcă…"
+  },
+  "confirmations": {
+    "deleteDocument": {
+      "title": "Șterge documentul",
+      "message": "Sigur vrei să ștergi „{{name}}”? Această acțiune nu poate fi anulată.",
+      "confirm": "Șterge"
+    },
+    "overrideOcrSingle": {
+      "title": "Reprocesează OCR",
+      "message": "Această pagină va fi reprocesată cu OCR.",
+      "warning": "Orice modificări manuale ale textului sau ale formatării de pe această pagină vor fi pierdute.",
+      "confirm": "Rulează OCR"
+    },
+    "overrideExtractTextSingle": {
+      "title": "Reextrage textul",
+      "message": "Textul va fi reextras de pe această pagină.",
+      "warning": "Orice modificări manuale ale textului sau ale formatării de pe această pagină vor fi pierdute.",
+      "confirm": "Extrage textul"
+    },
+    "overrideOcrBulk": {
+      "title": "Reprocesează OCR",
+      "message": "Toate paginile vor fi reprocesate cu OCR.",
+      "warning": "Orice modificări manuale ale textului sau ale formatării de pe toate paginile vor fi pierdute.",
+      "confirm": "Rulează OCR"
+    }
+  },
+  "languages": {
+    "ar": "Arabă", "bg": "Bulgară", "zh": "Chineză", "hr": "Croată", "cs": "Cehă",
+    "da": "Daneză", "nl": "Neerlandeză", "en": "Engleză", "fi": "Finlandeză", "fr": "Franceză",
+    "de": "Germană", "el": "Greacă", "he": "Ebraică", "hi": "Hindi", "hu": "Maghiară",
+    "id": "Indoneziană", "it": "Italiană", "ja": "Japoneză", "ko": "Coreeană", "la": "Latină",
+    "ms": "Malaeză", "no": "Norvegiană", "pl": "Poloneză", "pt": "Portugheză", "ro": "Română",
+    "ru": "Rusă", "sr": "Sârbă", "sk": "Slovacă", "sl": "Slovenă", "es": "Spaniolă",
+    "sv": "Suedeză", "th": "Thailandeză", "tr": "Turcă", "uk": "Ucraineană", "vi": "Vietnameză",
+    "unknown": "Necunoscută"
+  }
+}
diff --git a/wordkeep-client/public/assets/i18n/shared/en.json b/wordkeep-client/public/assets/i18n/shared/en.json
new file mode 100644
index 0000000..335b9f0
--- /dev/null
+++ b/wordkeep-client/public/assets/i18n/shared/en.json
@@ -0,0 +1,74 @@
+{
+  "common": {
+    "cancel": "Cancel",
+    "save": "Save"
+  },
+  "sort": {
+    "label": "Sort:",
+    "lastModified": "Last modified",
+    "titleAsc": "Title (A→Z)",
+    "titleDesc": "Title (Z→A)"
+  },
+  "renameDialog": {
+    "title": "Rename Document",
+    "name": "Name",
+    "original": "Original: {{name}}",
+    "restore": "Restore Original"
+  },
+  "recentActivity": {
+    "title": "Recent Activity",
+    "loading": "Loading…",
+    "loadError": "Failed to load recent activity",
+    "empty": "No recent activity yet — open a document to get started.",
+    "page": "Page {{n}} / {{total}}",
+    "badge": {
+      "ocr": "OCR",
+      "pageLinking": "Page Linking",
+      "bookView": "Book View",
+      "translation": "Translation — {{lang}}"
+    },
+    "time": {
+      "justNow": "just now",
+      "minutes": "{{n}}m ago",
+      "hours": "{{n}}h ago",
+      "days": "{{n}}d ago"
+    }
+  },
+  "avatarCrop": {
+    "title": "Update Profile Photo",
+    "close": "Close",
+    "choosePhoto": "Click to choose a photo",
+    "fileHint": "JPEG, PNG or WEBP — max 5 MB",
+    "chooseDifferent": "Choose a different photo",
+    "save": "Save Photo",
+    "saving": "Saving…",
+    "errorTooLarge": "Image must be under 5 MB.",
+    "errorSave": "Failed to save avatar. Please try again."
+  },
+  "commandPalette": {
+    "ariaLabel": "Command palette",
+    "placeholder": "goto",
+    "enter": "enter",
+    "esc": "esc",
+    "empty": "no matches · esc to close",
+    "move": "move",
+    "open": "open",
+    "close": "close"
+  },
+  "newTranslation": {
+    "title": "New Translation",
+    "document": "Document",
+    "loadingDocuments": "Loading documents...",
+    "noDocuments": "No ready documents available.",
+    "selectDocument": "Select a document...",
+    "targetLanguage": "Target Language",
+    "selectLanguage": "Select a language...",
+    "add": "Add Translation"
+  },
+  "spellCheck": {
+    "showMore": "show {{n}} more",
+    "noSuggestions": "No suggestions",
+    "ignore": "Ignore",
+    "addToDictionary": "Add to dictionary"
+  }
+}
diff --git a/wordkeep-client/public/assets/i18n/shared/ro.json b/wordkeep-client/public/assets/i18n/shared/ro.json
new file mode 100644
index 0000000..70a0d4e
--- /dev/null
+++ b/wordkeep-client/public/assets/i18n/shared/ro.json
@@ -0,0 +1,74 @@
+{
+  "common": {
+    "cancel": "Anulează",
+    "save": "Salvează"
+  },
+  "sort": {
+    "label": "Sortează:",
+    "lastModified": "Ultima modificare",
+    "titleAsc": "Titlu (A→Z)",
+    "titleDesc": "Titlu (Z→A)"
+  },
+  "renameDialog": {
+    "title": "Redenumește documentul",
+    "name": "Nume",
+    "original": "Original: {{name}}",
+    "restore": "Restaurează originalul"
+  },
+  "recentActivity": {
+    "title": "Activitate recentă",
+    "loading": "Se încarcă…",
+    "loadError": "Încărcarea activității recente a eșuat",
+    "empty": "Nicio activitate recentă încă — deschide un document pentru a începe.",
+    "page": "Pagina {{n}} / {{total}}",
+    "badge": {
+      "ocr": "OCR",
+      "pageLinking": "Legare pagini",
+      "bookView": "Vizualizare carte",
+      "translation": "Traducere — {{lang}}"
+    },
+    "time": {
+      "justNow": "chiar acum",
+      "minutes": "acum {{n}}m",
+      "hours": "acum {{n}}h",
+      "days": "acum {{n}}z"
+    }
+  },
+  "avatarCrop": {
+    "title": "Actualizează fotografia de profil",
+    "close": "Închide",
+    "choosePhoto": "Apasă pentru a alege o fotografie",
+    "fileHint": "JPEG, PNG sau WEBP — maxim 5 MB",
+    "chooseDifferent": "Alege altă fotografie",
+    "save": "Salvează fotografia",
+    "saving": "Se salvează…",
+    "errorTooLarge": "Imaginea trebuie să fie sub 5 MB.",
+    "errorSave": "Salvarea avatarului a eșuat. Încearcă din nou."
+  },
+  "commandPalette": {
+    "ariaLabel": "Paletă de comenzi",
+    "placeholder": "mergi la",
+    "enter": "enter",
+    "esc": "esc",
+    "empty": "nicio potrivire · esc pentru a închide",
+    "move": "navighează",
+    "open": "deschide",
+    "close": "închide"
+  },
+  "newTranslation": {
+    "title": "Traducere nouă",
+    "document": "Document",
+    "loadingDocuments": "Se încarcă documentele...",
+    "noDocuments": "Niciun document disponibil.",
+    "selectDocument": "Selectează un document...",
+    "targetLanguage": "Limba țintă",
+    "selectLanguage": "Selectează o limbă...",
+    "add": "Adaugă traducere"
+  },
+  "spellCheck": {
+    "showMore": "afișează încă {{n}}",
+    "noSuggestions": "Nicio sugestie",
+    "ignore": "Ignoră",
+    "addToDictionary": "Adaugă în dicționar"
+  }
+}
diff --git a/wordkeep-client/public/assets/i18n/shell/en.json b/wordkeep-client/public/assets/i18n/shell/en.json
new file mode 100644
index 0000000..d301eb1
--- /dev/null
+++ b/wordkeep-client/public/assets/i18n/shell/en.json
@@ -0,0 +1,50 @@
+{
+  "brand": "WordKeep",
+  "ariaHome": "WordKeep home",
+  "nav": {
+    "ariaPrimary": "Primary",
+    "dashboard": "Dashboard",
+    "documents": "Documents",
+    "textExtraction": "Text Extraction",
+    "extraction": "Extraction",
+    "pageLinking": "Page Linking",
+    "linking": "Linking",
+    "documentView": "Document View",
+    "view": "View",
+    "translation": "Translation"
+  },
+  "compendium": {
+    "edition": "Vol. I — Daily Edition",
+    "price": "No. 35",
+    "frontPage": "Front Page",
+    "circulation": "Circulation",
+    "pressRoom": "Press Room",
+    "bindery": "Bindery",
+    "readingRoom": "Reading Room",
+    "translationDesk": "Translation Desk"
+  },
+  "console": {
+    "promptUser": "wordkeep",
+    "docs": "docs",
+    "extr": "extr",
+    "link": "link",
+    "viewNav": "view",
+    "trsl": "trsl",
+    "dict": "dict",
+    "openPalette": "Open command palette",
+    "statusBrand": "[wordkeep]",
+    "navHint": "press <kbd>/</kbd> to navigate",
+    "palette": {
+      "reading-room": "Reading Room",
+      "cobalt": "Cobalt",
+      "monastic": "Monastic",
+      "grove": "Grove",
+      "ferrous": "Ferrous",
+      "plum": "Plum"
+    },
+    "theme": {
+      "light": "Light",
+      "dark": "Dark"
+    }
+  }
+}
diff --git a/wordkeep-client/public/assets/i18n/shell/ro.json b/wordkeep-client/public/assets/i18n/shell/ro.json
new file mode 100644
index 0000000..976a0e2
--- /dev/null
+++ b/wordkeep-client/public/assets/i18n/shell/ro.json
@@ -0,0 +1,50 @@
+{
+  "brand": "WordKeep",
+  "ariaHome": "Pagina principală WordKeep",
+  "nav": {
+    "ariaPrimary": "Principal",
+    "dashboard": "Panou",
+    "documents": "Documente",
+    "textExtraction": "Extragere text",
+    "extraction": "Extragere",
+    "pageLinking": "Asociere pagini",
+    "linking": "Asociere",
+    "documentView": "Vizualizare document",
+    "view": "Vizualizare",
+    "translation": "Traducere"
+  },
+  "compendium": {
+    "edition": "Vol. I — Ediția zilnică",
+    "price": "Nr. 35",
+    "frontPage": "Prima pagină",
+    "circulation": "Difuzare",
+    "pressRoom": "Tipografie",
+    "bindery": "Legătorie",
+    "readingRoom": "Sala de lectură",
+    "translationDesk": "Biroul de traduceri"
+  },
+  "console": {
+    "promptUser": "wordkeep",
+    "docs": "doc",
+    "extr": "extr",
+    "link": "leg",
+    "viewNav": "viz",
+    "trsl": "trad",
+    "dict": "dicț",
+    "openPalette": "Deschide paleta de comenzi",
+    "statusBrand": "[wordkeep]",
+    "navHint": "apăsați <kbd>/</kbd> pentru a naviga",
+    "palette": {
+      "reading-room": "Sala de lectură",
+      "cobalt": "Cobalt",
+      "monastic": "Monahală",
+      "grove": "Crâng",
+      "ferrous": "Feruginos",
+      "plum": "Prună"
+    },
+    "theme": {
+      "light": "Luminos",
+      "dark": "Întunecat"
+    }
+  }
+}
diff --git a/wordkeep-client/public/assets/i18n/translation/en.json b/wordkeep-client/public/assets/i18n/translation/en.json
new file mode 100644
index 0000000..f1893cc
--- /dev/null
+++ b/wordkeep-client/public/assets/i18n/translation/en.json
@@ -0,0 +1,160 @@
+{
+  "list": {
+    "title": "Translation",
+    "subtitle": "Translate your documents using AI.",
+    "newTranslation": "New Translation",
+    "yourTranslations": "Your Translations",
+    "count": "{{count}} translation",
+    "countPlural": "{{count}} translations",
+    "loading": "Loading translations...",
+    "emptyTitle": "No translations yet",
+    "emptyBody": "Click \"New Translation\" to translate a document",
+    "documentFallback": "Document #{{id}}",
+    "wrongLangPages": "{{count}} pages with wrong language",
+    "wrongLangFootnotes": "{{count}} footnotes with wrong language",
+    "page": "{{count}} page",
+    "pagePlural": "{{count}} pages",
+    "translatedProgress": "{{done}}/{{total}} translated ({{percent}}%)",
+    "overrideTitle": "Re-translate pages that have already been translated",
+    "override": "Override",
+    "translateAllTitle": "Translate all pages",
+    "translateAll": "Translate All",
+    "cancelTranslationTitle": "Cancel translation",
+    "deleteTranslationTitle": "Delete translation",
+    "previous": "Previous",
+    "next": "Next",
+    "pageInfo": "Page {{current}} of {{last}}",
+    "errors": {
+      "load": "Failed to load translations",
+      "create": "Failed to create translation",
+      "start": "Failed to start translation",
+      "estimate": "Failed to fetch translation estimate",
+      "cancel": "Failed to cancel translation",
+      "delete": "Failed to delete translation"
+    },
+    "confirm": {
+      "noPagesMessage": "All pages are already translated. Nothing will be billed.",
+      "ok": "OK",
+      "cancel": "Cancel",
+      "costLine": "Estimated cost: ~{{total}} (~{{avg}}/page on average). Canceling mid-run won't bill you for the full amount.",
+      "pageLabel": "1 page",
+      "pageLabelPlural": "{{count}} pages",
+      "messageReTranslate": "{{pageLabel}} will be re-translated. {{costLine}}",
+      "message": "{{pageLabel}} will be translated. {{costLine}}",
+      "overrideWarning": "All existing translations for this document and language will be replaced.",
+      "reTranslate": "Re-translate",
+      "translate": "Translate",
+      "titleOverride": "Override Re-translate All?",
+      "title": "Translate All?",
+      "deleteTitle": "Delete Translation",
+      "deleteMessage": "Are you sure you want to delete the translation \"{{name}}\"? This cannot be undone.",
+      "deleteName": "{{filename}} ({{language}})",
+      "documentFallback": "document",
+      "delete": "Delete"
+    }
+  },
+  "reader": {
+    "loadingDocument": "Loading document...",
+    "documentNotFound": "Document not found",
+    "backToTranslation": "Back to Translation",
+    "ofPages": "of {{count}}",
+    "syncScroll": "Sync Scroll",
+    "syncScrollTitle": "Sync scroll between panes",
+    "firstUntranslated": "First Untranslated",
+    "firstUntranslatedTitle": "Jump to first untranslated page",
+    "nextUntranslated": "Next Untranslated",
+    "nextUntranslatedTitle": "Jump to next untranslated page from here",
+    "wrongLanguage": "Wrong Language",
+    "prevWrongLangTitle": "Previous wrong-language page",
+    "nextWrongLangTitle": "Next wrong-language page",
+    "loadingPage": "Loading page...",
+    "beginningHidden": "Beginning of page hidden",
+    "beginningHiddenTitle": "The beginning of this page was included in the previous page's translation. It has been hidden here.",
+    "exitSplitMode": "Exit split mode",
+    "editSplits": "Edit splits",
+    "addSplits": "Add splits",
+    "noPageData": "No page data loaded.",
+    "pageIgnored": "This page is ignored",
+    "noExtractedText": "No extracted text",
+    "words": "{{count}} words",
+    "splitHint": "{{count}} chunk still too long — click in the red segment to add more splits",
+    "splitHintPlural": "{{count}} chunks still too long — click in the red segment to add more splits",
+    "removeSplitTitle": "Remove split",
+    "saving": "Saving...",
+    "translateWithSplits": "Translate with splits ({{count}} chunk)",
+    "translateWithSplitsPlural": "Translate with splits ({{count}} chunks)",
+    "needsSplitBanner": "This page has a paragraph that's too long to translate automatically. Use <strong>Add splits</strong> above to divide it into smaller chunks.",
+    "appendedFromNext": "Appended from next page",
+    "appendedFromNextTitle": "This text from the next page was appended here for translation continuity",
+    "edit": "Edit",
+    "clear": "Clear",
+    "manualTranslate": "Manual Translate",
+    "translating": "Translating...",
+    "aiTranslate": "AI Translate",
+    "aiTranslateNeedsSplitTitle": "Use Add splits to handle this page",
+    "cancel": "Cancel",
+    "save": "Save",
+    "translationUnavailable": "Translation unavailable",
+    "notOcrd": "This page hasn't been OCR'd yet.",
+    "openInExtraction": "Open in Text Extraction →",
+    "pageReferences": "This page references:",
+    "reAddRefHint": "to re-add a ref, type <code>[^N]</code> where N is the footnote number",
+    "editorPlaceholder": "Enter translation...",
+    "translatingWithAi": "Translating with AI...",
+    "translatingHint": "This may take a moment",
+    "wrongLangPage": "Translation returned in the source language instead of {{language}}.",
+    "wrongLangFootnote": "Footnote [^{{number}}] returned in the source language instead of {{language}}.",
+    "solve": "Solve",
+    "dismiss": "Dismiss",
+    "show": "Show",
+    "noTranslationYet": "No translation yet",
+    "noTranslationHint": "Use the buttons above to translate this page",
+    "originalLabel": "Original",
+    "fnNoTranslation": "No translation yet",
+    "retryTranslation": "Retry Translation",
+    "reTranslate": "Re-translate",
+    "translate": "Translate",
+    "errors": {
+      "loadDocument": "Failed to load document",
+      "loadPage": "Failed to load page data",
+      "allTranslated": "All available pages have been translated.",
+      "noMoreUntranslated": "No more untranslated pages after this one.",
+      "dismiss": "Failed to dismiss.",
+      "save": "Failed to save.",
+      "clear": "Failed to clear translation.",
+      "translationFailed": "Translation failed.",
+      "footnoteFailed": "Footnote translation failed.",
+      "saveSplits": "Failed to save splits."
+    },
+    "confirm": {
+      "cancel": "Cancel",
+      "keep": "Keep",
+      "retry": "Retry",
+      "retryTitle": "Retry with stronger instructions?",
+      "retryMessage": "Retry translating to {{language}} with a stronger prompt. Estimated cost: ~{{cost}}",
+      "reTranslatePageTitle": "Re-translate page?",
+      "translatePageTitle": "Translate page with AI?",
+      "translatePageReplace": "Existing translation will be replaced. ",
+      "translatePageMessage": "{{replace}}Estimated cost: ~{{cost}} (rough estimate based on character count)",
+      "translate": "Translate",
+      "wrongLangTitle": "Translation returned wrong language",
+      "wrongLangMessage": "Gemini returned the text in {{source}} instead of {{target}}. Retry with stronger instructions? Estimated cost: ~{{cost}} (rough estimate)",
+      "clearTitle": "Clear translation?",
+      "clearMessage": "The translation for this page will be permanently deleted.",
+      "clear": "Clear",
+      "splitsTooLongTitle": "Some chunks are still too long",
+      "splitsTooLongMessageOne": "{{count}} chunk is over 3000 words and may produce incomplete translations. Send anyway?",
+      "splitsTooLongMessageMany": "{{count}} chunks are over 3000 words and may produce incomplete translations. Send anyway?",
+      "sendAnyway": "Send anyway",
+      "goBack": "Go back",
+      "fnRetryTitle": "Retry footnote [^{{number}}] with stronger instructions?",
+      "fnRetryMessage": "Gemini returned this footnote in the source language instead of {{language}}. Retry with a stronger prompt? Estimated cost: ~{{cost}}",
+      "fnReTranslateTitle": "Re-translate footnote [^{{number}}]?",
+      "fnTranslateTitle": "Translate footnote [^{{number}}]?",
+      "fnReplace": "The existing footnote translation will be replaced. ",
+      "fnMessage": "{{replace}}Estimated cost: ~{{cost}} (rough estimate based on character count)",
+      "fnWrongLangTitle": "Footnote [^{{number}}] returned wrong language",
+      "fnWrongLangMessage": "Gemini returned this footnote in the source language instead of {{language}}. Retry with stronger instructions? Estimated cost: ~{{cost}}"
+    }
+  }
+}
diff --git a/wordkeep-client/public/assets/i18n/translation/ro.json b/wordkeep-client/public/assets/i18n/translation/ro.json
new file mode 100644
index 0000000..00ba090
--- /dev/null
+++ b/wordkeep-client/public/assets/i18n/translation/ro.json
@@ -0,0 +1,160 @@
+{
+  "list": {
+    "title": "Traducere",
+    "subtitle": "Traduceți documentele folosind AI.",
+    "newTranslation": "Traducere nouă",
+    "yourTranslations": "Traducerile tale",
+    "count": "{{count}} traducere",
+    "countPlural": "{{count}} traduceri",
+    "loading": "Se încarcă traducerile...",
+    "emptyTitle": "Încă nu există traduceri",
+    "emptyBody": "Apăsați „Traducere nouă” pentru a traduce un document",
+    "documentFallback": "Document #{{id}}",
+    "wrongLangPages": "{{count}} pagini cu limbă greșită",
+    "wrongLangFootnotes": "{{count}} note de subsol cu limbă greșită",
+    "page": "{{count}} pagină",
+    "pagePlural": "{{count}} pagini",
+    "translatedProgress": "{{done}}/{{total}} traduse ({{percent}}%)",
+    "overrideTitle": "Re-traduceți paginile deja traduse",
+    "override": "Suprascrie",
+    "translateAllTitle": "Traduceți toate paginile",
+    "translateAll": "Traduceți tot",
+    "cancelTranslationTitle": "Anulați traducerea",
+    "deleteTranslationTitle": "Ștergeți traducerea",
+    "previous": "Anterioara",
+    "next": "Următoarea",
+    "pageInfo": "Pagina {{current}} din {{last}}",
+    "errors": {
+      "load": "Încărcarea traducerilor a eșuat",
+      "create": "Crearea traducerii a eșuat",
+      "start": "Pornirea traducerii a eșuat",
+      "estimate": "Obținerea estimării traducerii a eșuat",
+      "cancel": "Anularea traducerii a eșuat",
+      "delete": "Ștergerea traducerii a eșuat"
+    },
+    "confirm": {
+      "noPagesMessage": "Toate paginile sunt deja traduse. Nu se va factura nimic.",
+      "ok": "OK",
+      "cancel": "Anulare",
+      "costLine": "Cost estimat: ~{{total}} (~{{avg}}/pagină în medie). Anularea la jumătate nu vă va factura suma integrală.",
+      "pageLabel": "1 pagină",
+      "pageLabelPlural": "{{count}} pagini",
+      "messageReTranslate": "{{pageLabel}} va fi re-tradusă. {{costLine}}",
+      "message": "{{pageLabel}} va fi tradusă. {{costLine}}",
+      "overrideWarning": "Toate traducerile existente pentru acest document și această limbă vor fi înlocuite.",
+      "reTranslate": "Re-traduceți",
+      "translate": "Traduceți",
+      "titleOverride": "Re-traduceți tot cu suprascriere?",
+      "title": "Traduceți tot?",
+      "deleteTitle": "Ștergeți traducerea",
+      "deleteMessage": "Sigur doriți să ștergeți traducerea „{{name}}”? Această acțiune nu poate fi anulată.",
+      "deleteName": "{{filename}} ({{language}})",
+      "documentFallback": "document",
+      "delete": "Ștergeți"
+    }
+  },
+  "reader": {
+    "loadingDocument": "Se încarcă documentul...",
+    "documentNotFound": "Documentul nu a fost găsit",
+    "backToTranslation": "Înapoi la Traducere",
+    "ofPages": "din {{count}}",
+    "syncScroll": "Sincronizare derulare",
+    "syncScrollTitle": "Sincronizați derularea între panouri",
+    "firstUntranslated": "Prima netradusă",
+    "firstUntranslatedTitle": "Salt la prima pagină netradusă",
+    "nextUntranslated": "Următoarea netradusă",
+    "nextUntranslatedTitle": "Salt la următoarea pagină netradusă de aici",
+    "wrongLanguage": "Limbă greșită",
+    "prevWrongLangTitle": "Pagina anterioară cu limbă greșită",
+    "nextWrongLangTitle": "Pagina următoare cu limbă greșită",
+    "loadingPage": "Se încarcă pagina...",
+    "beginningHidden": "Începutul paginii ascuns",
+    "beginningHiddenTitle": "Începutul acestei pagini a fost inclus în traducerea paginii anterioare. A fost ascuns aici.",
+    "exitSplitMode": "Ieșiți din modul divizare",
+    "editSplits": "Editați diviziunile",
+    "addSplits": "Adăugați diviziuni",
+    "noPageData": "Nicio dată de pagină încărcată.",
+    "pageIgnored": "Această pagină este ignorată",
+    "noExtractedText": "Niciun text extras",
+    "words": "{{count}} cuvinte",
+    "splitHint": "{{count}} fragment încă prea lung — apăsați în segmentul roșu pentru a adăuga mai multe diviziuni",
+    "splitHintPlural": "{{count}} fragmente încă prea lungi — apăsați în segmentul roșu pentru a adăuga mai multe diviziuni",
+    "removeSplitTitle": "Eliminați diviziunea",
+    "saving": "Se salvează...",
+    "translateWithSplits": "Traduceți cu diviziuni ({{count}} fragment)",
+    "translateWithSplitsPlural": "Traduceți cu diviziuni ({{count}} fragmente)",
+    "needsSplitBanner": "Această pagină are un paragraf prea lung pentru a fi tradus automat. Folosiți <strong>Adăugați diviziuni</strong> mai sus pentru a-l împărți în fragmente mai mici.",
+    "appendedFromNext": "Adăugat din pagina următoare",
+    "appendedFromNextTitle": "Acest text din pagina următoare a fost adăugat aici pentru continuitatea traducerii",
+    "edit": "Editați",
+    "clear": "Ștergeți",
+    "manualTranslate": "Traducere manuală",
+    "translating": "Se traduce...",
+    "aiTranslate": "Traducere AI",
+    "aiTranslateNeedsSplitTitle": "Folosiți Adăugați diviziuni pentru această pagină",
+    "cancel": "Anulare",
+    "save": "Salvați",
+    "translationUnavailable": "Traducere indisponibilă",
+    "notOcrd": "Această pagină nu a fost încă procesată OCR.",
+    "openInExtraction": "Deschideți în Extragere text →",
+    "pageReferences": "Această pagină face referire la:",
+    "reAddRefHint": "pentru a re-adăuga o referință, tastați <code>[^N]</code> unde N este numărul notei de subsol",
+    "editorPlaceholder": "Introduceți traducerea...",
+    "translatingWithAi": "Se traduce cu AI...",
+    "translatingHint": "Acest lucru poate dura un moment",
+    "wrongLangPage": "Traducerea a fost returnată în limba sursă în loc de {{language}}.",
+    "wrongLangFootnote": "Nota de subsol [^{{number}}] a fost returnată în limba sursă în loc de {{language}}.",
+    "solve": "Rezolvați",
+    "dismiss": "Respingeți",
+    "show": "Arătați",
+    "noTranslationYet": "Încă nicio traducere",
+    "noTranslationHint": "Folosiți butoanele de mai sus pentru a traduce această pagină",
+    "originalLabel": "Original",
+    "fnNoTranslation": "Încă nicio traducere",
+    "retryTranslation": "Reîncercați traducerea",
+    "reTranslate": "Re-traduceți",
+    "translate": "Traduceți",
+    "errors": {
+      "loadDocument": "Încărcarea documentului a eșuat",
+      "loadPage": "Încărcarea datelor paginii a eșuat",
+      "allTranslated": "Toate paginile disponibile au fost traduse.",
+      "noMoreUntranslated": "Nu mai există pagini netraduse după aceasta.",
+      "dismiss": "Respingerea a eșuat.",
+      "save": "Salvarea a eșuat.",
+      "clear": "Ștergerea traducerii a eșuat.",
+      "translationFailed": "Traducerea a eșuat.",
+      "footnoteFailed": "Traducerea notei de subsol a eșuat.",
+      "saveSplits": "Salvarea diviziunilor a eșuat."
+    },
+    "confirm": {
+      "cancel": "Anulare",
+      "keep": "Păstrați",
+      "retry": "Reîncercați",
+      "retryTitle": "Reîncercați cu instrucțiuni mai puternice?",
+      "retryMessage": "Reîncercați traducerea în {{language}} cu un prompt mai puternic. Cost estimat: ~{{cost}}",
+      "reTranslatePageTitle": "Re-traduceți pagina?",
+      "translatePageTitle": "Traduceți pagina cu AI?",
+      "translatePageReplace": "Traducerea existentă va fi înlocuită. ",
+      "translatePageMessage": "{{replace}}Cost estimat: ~{{cost}} (estimare aproximativă pe baza numărului de caractere)",
+      "translate": "Traduceți",
+      "wrongLangTitle": "Traducerea a returnat o limbă greșită",
+      "wrongLangMessage": "Gemini a returnat textul în {{source}} în loc de {{target}}. Reîncercați cu instrucțiuni mai puternice? Cost estimat: ~{{cost}} (estimare aproximativă)",
+      "clearTitle": "Ștergeți traducerea?",
+      "clearMessage": "Traducerea pentru această pagină va fi ștearsă definitiv.",
+      "clear": "Ștergeți",
+      "splitsTooLongTitle": "Unele fragmente sunt încă prea lungi",
+      "splitsTooLongMessageOne": "{{count}} fragment are peste 3000 de cuvinte și poate produce traduceri incomplete. Trimiteți oricum?",
+      "splitsTooLongMessageMany": "{{count}} fragmente au peste 3000 de cuvinte și pot produce traduceri incomplete. Trimiteți oricum?",
+      "sendAnyway": "Trimiteți oricum",
+      "goBack": "Înapoi",
+      "fnRetryTitle": "Reîncercați nota de subsol [^{{number}}] cu instrucțiuni mai puternice?",
+      "fnRetryMessage": "Gemini a returnat această notă de subsol în limba sursă în loc de {{language}}. Reîncercați cu un prompt mai puternic? Cost estimat: ~{{cost}}",
+      "fnReTranslateTitle": "Re-traduceți nota de subsol [^{{number}}]?",
+      "fnTranslateTitle": "Traduceți nota de subsol [^{{number}}]?",
+      "fnReplace": "Traducerea existentă a notei de subsol va fi înlocuită. ",
+      "fnMessage": "{{replace}}Cost estimat: ~{{cost}} (estimare aproximativă pe baza numărului de caractere)",
+      "fnWrongLangTitle": "Nota de subsol [^{{number}}] a returnat o limbă greșită",
+      "fnWrongLangMessage": "Gemini a returnat această notă de subsol în limba sursă în loc de {{language}}. Reîncercați cu instrucțiuni mai puternice? Cost estimat: ~{{cost}}"
+    }
+  }
+}
diff --git a/wordkeep-client/scripts/check-i18n.mjs b/wordkeep-client/scripts/check-i18n.mjs
new file mode 100644
index 0000000..74cf4af
--- /dev/null
+++ b/wordkeep-client/scripts/check-i18n.mjs
@@ -0,0 +1,123 @@
+/**
+ * CI guard against hardcoded user-facing strings in component templates.
+ *
+ * Heuristically scans every component .html under src/app for visible text
+ * nodes that are NOT wrapped in a Transloco binding. It deliberately ignores:
+ *   - pure interpolations ({{ ... }}), which are dynamic
+ *   - <svg> contents and HTML comments
+ *   - elements marked lang="la" (the charter's intentional Latin)
+ *   - punctuation / entities / numbers only
+ *
+ * Templates that still contain un-extracted strings are listed in
+ * scripts/i18n-allowlist.txt (one repo-relative path per line). A file NOT on
+ * the allowlist must be clean — otherwise the check fails. As templates are
+ * migrated to Transloco, remove them from the allowlist; new components are
+ * enforced by default, so fresh hardcoded strings fail CI.
+ *
+ * Run from wordkeep-client/: node scripts/check-i18n.mjs
+ */
+
+import { readFileSync, existsSync, readdirSync, statSync } from 'fs';
+import { fileURLToPath } from 'url';
+import { dirname, join, relative, sep } from 'path';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const clientRoot = join(__dirname, '..');
+const appDir = join(clientRoot, 'src/app');
+const allowlistPath = join(__dirname, 'i18n-allowlist.txt');
+
+// ── allowlist ────────────────────────────────────────────────────────
+const allowlist = new Set(
+  existsSync(allowlistPath)
+    ? readFileSync(allowlistPath, 'utf8')
+        .split('\n')
+        .map(l => l.trim())
+        .filter(l => l && !l.startsWith('#'))
+        .map(l => l.split('/').join(sep))
+    : []
+);
+
+// ── find component templates ─────────────────────────────────────────
+function walk(dir, out = []) {
+  for (const entry of readdirSync(dir, { withFileTypes: true })) {
+    const full = join(dir, entry.name);
+    if (entry.isDirectory()) walk(full, out);
+    else if (entry.name.endsWith('.html')) out.push(full);
+  }
+  return out;
+}
+
+// ── heuristic scan of one template ───────────────────────────────────
+function scan(html) {
+  let s = html;
+  // Drop comments, <svg> blocks (icons/seals), <style> blocks.
+  s = s.replace(/<!--[\s\S]*?-->/g, '');
+  s = s.replace(/<svg[\s\S]*?<\/svg>/gi, '');
+  s = s.replace(/<style[\s\S]*?<\/style>/gi, '');
+  // Drop elements explicitly marked as Latin (intentionally untranslated).
+  s = s.replace(/<([a-zA-Z0-9-]+)([^>]*\blang="la"[^>]*)>[\s\S]*?<\/\1>/g, '');
+  // Remove {{ interpolations }} FIRST so their braces aren't mistaken for
+  // Angular control-flow braces below.
+  s = s.replace(/\{\{[\s\S]*?\}\}/g, ' ');
+  // Then drop Angular control-flow control statements (@if/@else/@for/@switch/
+  // @case/@default/@empty/@defer…) with their conditions (which may contain
+  // < or > comparison operators), plus any stray braces.
+  s = s.replace(/@[a-zA-Z]+(\s+[a-zA-Z]+)?\s*(\([^{}]*\))?\s*\{/g, ' ');
+  s = s.replace(/[{}]/g, ' ');
+
+  const findings = [];
+  // Match text between a '>' and the next '<'.
+  const re = />([^<]+)</g;
+  let m;
+  while ((m = re.exec(s)) !== null) {
+    const withoutInterp = m[1].trim();
+    if (!withoutInterp) continue;
+    // Skip code-like fragments leaked by `>=`/`<=` or `>` inside an attribute
+    // binding (e.g. `[disabled]="x >= y"`) — these contain attribute/expression
+    // syntax that never appears in real visible copy.
+    if (/["]|=>|\(\)|\|\||&&/.test(withoutInterp)) continue;
+    // Ignore entities, punctuation, digits and control tokens only.
+    const meaningful = withoutInterp
+      .replace(/&[a-zA-Z]+;|&#\d+;/g, '')
+      .replace(/[^A-Za-zÀ-ÿ]/g, '')
+      .trim();
+    if (meaningful.length < 2) continue;
+    findings.push(withoutInterp.replace(/\s+/g, ' ').slice(0, 60));
+  }
+  return findings;
+}
+
+// ── run ──────────────────────────────────────────────────────────────
+const templates = existsSync(appDir) ? walk(appDir) : [];
+const violations = [];
+const staleAllow = [];
+
+for (const file of templates) {
+  const rel = relative(clientRoot, file);
+  const findings = scan(readFileSync(file, 'utf8'));
+  const allowed = allowlist.has(rel);
+  if (findings.length && !allowed) {
+    violations.push({ rel, findings });
+  } else if (!findings.length && allowed) {
+    staleAllow.push(rel);
+  }
+}
+
+if (staleAllow.length) {
+  console.log('ℹ Allowlisted templates that are now clean (remove from i18n-allowlist.txt):');
+  for (const r of staleAllow) console.log(`    ${r.split(sep).join('/')}`);
+  console.log('');
+}
+
+if (violations.length) {
+  console.error('✗ Hardcoded user-facing strings found in enforced templates:\n');
+  for (const v of violations) {
+    console.error(`  ${v.rel.split(sep).join('/')}`);
+    for (const f of v.findings.slice(0, 8)) console.error(`      “${f}”`);
+    if (v.findings.length > 8) console.error(`      … and ${v.findings.length - 8} more`);
+  }
+  console.error('\nWrap these in a transloco pipe/directive, or (if intentional) add the file to scripts/i18n-allowlist.txt.');
+  process.exit(1);
+}
+
+console.log(`✓ i18n check passed (${templates.length} templates scanned, ${allowlist.size} allowlisted).`);
diff --git a/wordkeep-client/scripts/i18n-allowlist.txt b/wordkeep-client/scripts/i18n-allowlist.txt
new file mode 100644
index 0000000..81b79e4
--- /dev/null
+++ b/wordkeep-client/scripts/i18n-allowlist.txt
@@ -0,0 +1,14 @@
+# Templates allowed to contain hardcoded user-facing strings.
+# One repo-relative path per line. Checked by scripts/check-i18n.mjs.
+#
+# Templates NOT listed are enforced — new hardcoded strings fail CI.
+#
+# Permanent: landing.html is a bilingual charter; its remaining visible text is
+# intentional Latin (seal captions) and proper nouns (WordKeep, roman numerals).
+src/app/pages/landing/landing.html
+# Permanent: the console home/dashboard variant is a terminal pastiche — its
+# remaining literals are intentional CLI jargon (e.g. `wordkeep --tools`, tool ids).
+src/app/pages/home/variants/home-console/home-console.html
+# Permanent: the scriptorium home variant keeps intentional Latin scribal marks
+# (folio numbers "f. i · recto", roman numerals, "explicit primae paginae").
+src/app/pages/home/variants/home-scriptorium/home-scriptorium.html
diff --git a/wordkeep-client/src/app/app.config.ts b/wordkeep-client/src/app/app.config.ts
index 9cf95ac..a62c593 100644
--- a/wordkeep-client/src/app/app.config.ts
+++ b/wordkeep-client/src/app/app.config.ts
@@ -1,14 +1,56 @@
-import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
+import {
+  ApplicationConfig,
+  effect,
+  inject,
+  isDevMode,
+  provideAppInitializer,
+  provideBrowserGlobalErrorListeners,
+} from '@angular/core';
 import { provideRouter } from '@angular/router';
 import { provideHttpClient, withInterceptors } from '@angular/common/http';
+import { registerLocaleData } from '@angular/common';
+import localeRo from '@angular/common/locales/ro';
+import localeEnGb from '@angular/common/locales/en-GB';
+import { provideTransloco, TranslocoService } from '@jsverse/transloco';
+import { provideTranslocoMessageformat } from '@jsverse/transloco-messageformat';
 
 import { routes } from './app.routes';
 import { authInterceptor } from './interceptors/auth.interceptor';
+import { TranslocoHttpLoader } from './transloco/transloco-loader';
+import { UserPreferencesService } from './services/user-preferences.service';
+
+// Register locale data so DatePipe/DecimalPipe render regional formats:
+// ro → DD.MM.YYYY + 1.234,56, en-GB → DD/MM/YYYY + 1,234.56.
+registerLocaleData(localeRo, 'ro');
+registerLocaleData(localeEnGb, 'en-GB');
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideBrowserGlobalErrorListeners(),
     provideRouter(routes),
-    provideHttpClient(withInterceptors([authInterceptor]))
+    provideHttpClient(withInterceptors([authInterceptor])),
+    provideTransloco({
+      config: {
+        availableLangs: ['en', 'ro'],
+        defaultLang: 'en',
+        fallbackLang: 'en',
+        reRenderOnLangChange: true,
+        missingHandler: { useFallbackTranslation: true },
+        prodMode: !isDevMode(),
+      },
+      loader: TranslocoHttpLoader,
+    }),
+    // ICU MessageFormat transpiler — enables {count, plural, one {…} few {…}
+    // other {…}} syntax, needed for correct Romanian plural forms.
+    provideTranslocoMessageformat(),
+    // Bridge the persisted locale signal to Transloco's active language. Kept
+    // here (not in UserPreferencesService) so the service stays free of a
+    // Transloco dependency — otherwise every spec touching preferences would
+    // need Transloco providers.
+    provideAppInitializer(() => {
+      const prefs = inject(UserPreferencesService);
+      const transloco = inject(TranslocoService);
+      effect(() => transloco.setActiveLang(prefs.locale()));
+    }),
   ]
 };
diff --git a/wordkeep-client/src/app/app.routes.ts b/wordkeep-client/src/app/app.routes.ts
index 00a7995..e1df8d3 100644
--- a/wordkeep-client/src/app/app.routes.ts
+++ b/wordkeep-client/src/app/app.routes.ts
@@ -1,11 +1,13 @@
 import { Routes } from '@angular/router';
+import { provideTranslocoScope } from '@jsverse/transloco';
 import { authGuard, guestGuard, landingRedirectGuard } from './guards/auth.guard';
 
 export const routes: Routes = [
   {
     path: '',
     loadComponent: () => import('./pages/landing/landing').then(m => m.LandingComponent),
-    canActivate: [landingRedirectGuard]
+    canActivate: [landingRedirectGuard],
+    providers: [provideTranslocoScope('charter')]
   },
   {
     path: 'dashboard',
@@ -65,27 +67,32 @@ export const routes: Routes = [
   {
     path: 'login',
     loadComponent: () => import('./pages/login/login').then(m => m.LoginComponent),
-    canActivate: [guestGuard]
+    canActivate: [guestGuard],
+    providers: [provideTranslocoScope('auth')]
   },
   {
     path: 'register',
     loadComponent: () => import('./pages/register/register').then(m => m.RegisterComponent),
-    canActivate: [guestGuard]
+    canActivate: [guestGuard],
+    providers: [provideTranslocoScope('auth')]
   },
   {
     path: 'verify-email',
     loadComponent: () => import('./pages/verify-email/verify-email').then(m => m.VerifyEmailComponent),
-    canActivate: [guestGuard]
+    canActivate: [guestGuard],
+    providers: [provideTranslocoScope('auth')]
   },
   {
     path: 'forgot-password',
     loadComponent: () => import('./pages/forgot-password/forgot-password').then(m => m.ForgotPasswordComponent),
-    canActivate: [guestGuard]
+    canActivate: [guestGuard],
+    providers: [provideTranslocoScope('auth')]
   },
   {
     path: 'reset-password',
     loadComponent: () => import('./pages/reset-password/reset-password').then(m => m.ResetPasswordComponent),
-    canActivate: [guestGuard]
+    canActivate: [guestGuard],
+    providers: [provideTranslocoScope('auth')]
   },
   {
     path: 'dictionary',
@@ -96,6 +103,7 @@ export const routes: Routes = [
     path: 'profile',
     loadComponent: () => import('./pages/profile/profile').then(m => m.ProfileComponent),
     canActivate: [authGuard],
+    providers: [provideTranslocoScope('profile')],
     children: [
       { path: '', redirectTo: 'info', pathMatch: 'full' },
       {
@@ -114,7 +122,8 @@ export const routes: Routes = [
   },
   {
     path: 'verify-email-change',
-    loadComponent: () => import('./pages/verify-email-change/verify-email-change').then(m => m.VerifyEmailChangeComponent)
+    loadComponent: () => import('./pages/verify-email-change/verify-email-change').then(m => m.VerifyEmailChangeComponent),
+    providers: [provideTranslocoScope('auth')]
   },
   {
     path: '**',
diff --git a/wordkeep-client/src/app/components/avatar-crop-dialog/avatar-crop-dialog.html b/wordkeep-client/src/app/components/avatar-crop-dialog/avatar-crop-dialog.html
index 1d04202..b273bc4 100644
--- a/wordkeep-client/src/app/components/avatar-crop-dialog/avatar-crop-dialog.html
+++ b/wordkeep-client/src/app/components/avatar-crop-dialog/avatar-crop-dialog.html
@@ -1,8 +1,8 @@
-<div class="dialog-backdrop" (click)="close()">
+<div class="dialog-backdrop" (click)="close()" *transloco="let t; read: 'shared'">
   <div class="dialog" (click)="$event.stopPropagation()">
     <div class="dialog-header">
-      <h3>Update Profile Photo</h3>
-      <button class="close-btn" (click)="close()">
+      <h3>{{ t('avatarCrop.title') }}</h3>
+      <button class="close-btn" (click)="close()" [attr.aria-label]="t('avatarCrop.close')">
         <svg viewBox="0 0 24 24" fill="none"><line x1="18" y1="6" x2="6" y2="18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><line x1="6" y1="6" x2="18" y2="18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
       </button>
     </div>
@@ -12,8 +12,8 @@ <h3>Update Profile Photo</h3>
         <div class="upload-area">
           <label class="upload-label" for="avatar-file-input">
             <svg viewBox="0 0 24 24" fill="none"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><polyline points="17,8 12,3 7,8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><line x1="12" y1="3" x2="12" y2="15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
-            <span>Click to choose a photo</span>
-            <small>JPEG, PNG or WEBP — max 5 MB</small>
+            <span>{{ t('avatarCrop.choosePhoto') }}</span>
+            <small>{{ t('avatarCrop.fileHint') }}</small>
           </label>
           <input id="avatar-file-input" type="file" accept="image/jpeg,image/png,image/webp" (change)="onFileSelected($event)" hidden />
         </div>
@@ -30,7 +30,7 @@ <h3>Update Profile Photo</h3>
             (imageLoaded)="onImageLoaded($event)"
           ></image-cropper>
         </div>
-        <button class="change-photo-link" (click)="imageFile.set(null)">Choose a different photo</button>
+        <button class="change-photo-link" (click)="imageFile.set(null)">{{ t('avatarCrop.chooseDifferent') }}</button>
       }
 
       @if (error()) {
@@ -39,13 +39,13 @@ <h3>Update Profile Photo</h3>
     </div>
 
     <div class="dialog-footer">
-      <button class="btn-secondary" (click)="close()">Cancel</button>
+      <button class="btn-secondary" (click)="close()">{{ t('common.cancel') }}</button>
       <button
         class="btn-primary"
         [disabled]="!croppedBlob() || saving()"
         (click)="save()"
       >
-        {{ saving() ? 'Saving…' : 'Save Photo' }}
+        {{ saving() ? t('avatarCrop.saving') : t('avatarCrop.save') }}
       </button>
     </div>
   </div>
diff --git a/wordkeep-client/src/app/components/avatar-crop-dialog/avatar-crop-dialog.scss b/wordkeep-client/src/app/components/avatar-crop-dialog/avatar-crop-dialog.scss
index 2a11955..bcc05d7 100644
--- a/wordkeep-client/src/app/components/avatar-crop-dialog/avatar-crop-dialog.scss
+++ b/wordkeep-client/src/app/components/avatar-crop-dialog/avatar-crop-dialog.scss
@@ -144,6 +144,10 @@
 
 .btn-secondary {
   padding: 0.5rem 1.125rem;
+  // Reset the global auth `.btn-secondary` rules (uppercase / letter-spacing)
+  // that leak in via the shared class name.
+  text-transform: none;
+  letter-spacing: normal;
   background: transparent;
   border: 1.5px solid var(--color-rule);
   border-radius: 8px;
@@ -158,6 +162,12 @@
 
 .btn-primary {
   padding: 0.5rem 1.25rem;
+  // Reset the global auth `.btn-primary` rules (uppercase / letter-spacing /
+  // top margin / full width) that leak in via the shared class name.
+  text-transform: none;
+  letter-spacing: normal;
+  margin-top: 0;
+  width: auto;
   background: var(--color-accent);
   border: none;
   border-radius: 8px;
diff --git a/wordkeep-client/src/app/components/avatar-crop-dialog/avatar-crop-dialog.spec.ts b/wordkeep-client/src/app/components/avatar-crop-dialog/avatar-crop-dialog.spec.ts
index 87b7d7d..54435f7 100644
--- a/wordkeep-client/src/app/components/avatar-crop-dialog/avatar-crop-dialog.spec.ts
+++ b/wordkeep-client/src/app/components/avatar-crop-dialog/avatar-crop-dialog.spec.ts
@@ -7,7 +7,9 @@ import { AvatarCropDialogComponent } from './avatar-crop-dialog';
 import { ProfileService } from '../../services/profile.service';
 import { AuthService } from '../../services/auth.service';
 import { DomSanitizer } from '@angular/platform-browser';
+import { TranslocoDirective } from '@jsverse/transloco';
 import { mockUser } from '../../test-utils';
+import { getTranslocoTestingModule } from '../../transloco/transloco-testing';
 
 // Stub the image cropper to avoid canvas/DOM issues in tests
 @Component({ selector: 'image-cropper', template: '', standalone: true })
@@ -40,7 +42,7 @@ describe('AvatarCropDialogComponent', () => {
     };
 
     await TestBed.configureTestingModule({
-      imports: [AvatarCropDialogComponent],
+      imports: [AvatarCropDialogComponent, getTranslocoTestingModule()],
       providers: [
         { provide: ProfileService, useValue: mockProfileService },
         { provide: AuthService, useValue: mockAuthService },
@@ -48,7 +50,7 @@ describe('AvatarCropDialogComponent', () => {
       ],
     })
       .overrideComponent(AvatarCropDialogComponent, {
-        set: { imports: [CommonModule, StubImageCropperComponent] },
+        set: { imports: [CommonModule, StubImageCropperComponent, TranslocoDirective] },
       })
       .compileComponents();
 
diff --git a/wordkeep-client/src/app/components/avatar-crop-dialog/avatar-crop-dialog.ts b/wordkeep-client/src/app/components/avatar-crop-dialog/avatar-crop-dialog.ts
index 5efbec3..c7cc545 100644
--- a/wordkeep-client/src/app/components/avatar-crop-dialog/avatar-crop-dialog.ts
+++ b/wordkeep-client/src/app/components/avatar-crop-dialog/avatar-crop-dialog.ts
@@ -1,5 +1,6 @@
-import { Component, EventEmitter, Output, signal } from '@angular/core';
+import { Component, EventEmitter, Output, inject, signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { provideTranslocoScope, TranslocoDirective, TranslocoService } from '@jsverse/transloco';
 import { ImageCropperComponent, ImageCroppedEvent, LoadedImage } from 'ngx-image-cropper';
 import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
 import { ProfileService } from '../../services/profile.service';
@@ -8,11 +9,14 @@ import { AuthService } from '../../services/auth.service';
 @Component({
   selector: 'app-avatar-crop-dialog',
   standalone: true,
-  imports: [CommonModule, ImageCropperComponent],
+  imports: [CommonModule, ImageCropperComponent, TranslocoDirective],
+  providers: [provideTranslocoScope('shared')],
   templateUrl: './avatar-crop-dialog.html',
   styleUrl: './avatar-crop-dialog.scss'
 })
 export class AvatarCropDialogComponent {
+  private transloco = inject(TranslocoService);
+
   @Output() closed = new EventEmitter<void>();
   @Output() avatarUpdated = new EventEmitter<string>();
 
@@ -35,7 +39,7 @@ export class AvatarCropDialogComponent {
     if (!file) return;
 
     if (file.size > 5 * 1024 * 1024) {
-      this.error.set('Image must be under 5 MB.');
+      this.error.set(this.transloco.translate('shared.avatarCrop.errorTooLarge'));
       return;
     }
 
@@ -77,7 +81,7 @@ export class AvatarCropDialogComponent {
       },
       error: () => {
         this.saving.set(false);
-        this.error.set('Failed to save avatar. Please try again.');
+        this.error.set(this.transloco.translate('shared.avatarCrop.errorSave'));
       }
     });
   }
diff --git a/wordkeep-client/src/app/components/command-palette/command-palette.html b/wordkeep-client/src/app/components/command-palette/command-palette.html
index 9416f75..48962eb 100644
--- a/wordkeep-client/src/app/components/command-palette/command-palette.html
+++ b/wordkeep-client/src/app/components/command-palette/command-palette.html
@@ -1,5 +1,5 @@
 @if (open()) {
-  <div class="cmd-palette__backdrop" (click)="onBackdropClick($event)" role="dialog" aria-modal="true" aria-label="Command palette">
+  <div class="cmd-palette__backdrop" (click)="onBackdropClick($event)" role="dialog" aria-modal="true" [attr.aria-label]="t('commandPalette.ariaLabel')" *transloco="let t; read: 'shared'">
     <div class="cmd-palette">
       <div class="cmd-palette__prompt">
         <span class="cmd-palette__caret">&rsaquo;</span>
@@ -8,16 +8,16 @@
           type="text"
           autocomplete="off"
           spellcheck="false"
-          placeholder="goto"
+          [placeholder]="t('commandPalette.placeholder')"
           [value]="query()"
           (input)="onQueryInput($event)"
           (keydown)="onInputKeydown($event)"
         />
-        <span class="cmd-palette__hint">enter</span>
+        <span class="cmd-palette__hint">{{ t('commandPalette.enter') }}</span>
       </div>
 
       @if (filtered().length === 0) {
-        <p class="cmd-palette__empty">no matches &middot; esc to close</p>
+        <p class="cmd-palette__empty">{{ t('commandPalette.empty') }}</p>
       } @else {
         <ul class="cmd-palette__list" role="listbox">
           @for (item of filtered(); track item.path; let i = $index) {
@@ -40,9 +40,9 @@
       }
 
       <div class="cmd-palette__footer">
-        <span><kbd>&uarr;&darr;</kbd> move</span>
-        <span><kbd>&crarr;</kbd> open</span>
-        <span><kbd>esc</kbd> close</span>
+        <span><kbd>&uarr;&darr;</kbd> {{ t('commandPalette.move') }}</span>
+        <span><kbd>&crarr;</kbd> {{ t('commandPalette.open') }}</span>
+        <span><kbd>{{ t('commandPalette.esc') }}</kbd> {{ t('commandPalette.close') }}</span>
       </div>
     </div>
   </div>
diff --git a/wordkeep-client/src/app/components/command-palette/command-palette.spec.ts b/wordkeep-client/src/app/components/command-palette/command-palette.spec.ts
index 16fc801..975d67c 100644
--- a/wordkeep-client/src/app/components/command-palette/command-palette.spec.ts
+++ b/wordkeep-client/src/app/components/command-palette/command-palette.spec.ts
@@ -2,6 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { provideRouter, Router } from '@angular/router';
 import { describe, it, expect, beforeEach, vi } from 'vitest';
 import { CommandPaletteComponent } from './command-palette';
+import { getTranslocoTestingModule } from '../../transloco/transloco-testing';
 
 describe('CommandPaletteComponent', () => {
   let fixture: ComponentFixture<CommandPaletteComponent>;
@@ -9,7 +10,7 @@ describe('CommandPaletteComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [CommandPaletteComponent],
+      imports: [CommandPaletteComponent, getTranslocoTestingModule()],
       providers: [provideRouter([])]
     }).compileComponents();
 
diff --git a/wordkeep-client/src/app/components/command-palette/command-palette.ts b/wordkeep-client/src/app/components/command-palette/command-palette.ts
index 0009de6..4ddfd23 100644
--- a/wordkeep-client/src/app/components/command-palette/command-palette.ts
+++ b/wordkeep-client/src/app/components/command-palette/command-palette.ts
@@ -1,6 +1,7 @@
 import { Component, HostListener, computed, inject, signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Router } from '@angular/router';
+import { provideTranslocoScope, TranslocoDirective } from '@jsverse/transloco';
 
 interface Route {
   label: string;
@@ -11,7 +12,8 @@ interface Route {
 @Component({
   selector: 'app-command-palette',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, TranslocoDirective],
+  providers: [provideTranslocoScope('shared')],
   templateUrl: './command-palette.html',
   styleUrl: './command-palette.scss'
 })
diff --git a/wordkeep-client/src/app/components/confirmation-dialog/confirmation-dialog.scss b/wordkeep-client/src/app/components/confirmation-dialog/confirmation-dialog.scss
index 9bfe6db..7f8c21c 100644
--- a/wordkeep-client/src/app/components/confirmation-dialog/confirmation-dialog.scss
+++ b/wordkeep-client/src/app/components/confirmation-dialog/confirmation-dialog.scss
@@ -137,6 +137,12 @@
 
 .btn-confirm {
   padding: 0.625rem 1.25rem;
+  // Reset the global auth `.btn-primary` rules (uppercase / letter-spacing /
+  // top margin / full width) that leak in via the shared class name.
+  text-transform: none;
+  letter-spacing: normal;
+  margin-top: 0;
+  width: auto;
   border: none;
   border-radius: 8px;
   font-size: 0.875rem;
diff --git a/wordkeep-client/src/app/components/layout/layout.spec.ts b/wordkeep-client/src/app/components/layout/layout.spec.ts
index 6b82aa7..abfa41c 100644
--- a/wordkeep-client/src/app/components/layout/layout.spec.ts
+++ b/wordkeep-client/src/app/components/layout/layout.spec.ts
@@ -5,6 +5,7 @@ import { describe, it, expect, beforeEach, vi } from 'vitest';
 import { LayoutComponent } from './layout';
 import { AuthService } from '../../services/auth.service';
 import { LayoutService } from '../../services/layout.service';
+import { getTranslocoTestingModule } from '../../transloco/transloco-testing';
 
 describe('LayoutComponent (dispatcher)', () => {
   let component: LayoutComponent;
@@ -32,7 +33,7 @@ describe('LayoutComponent (dispatcher)', () => {
     };
 
     await TestBed.configureTestingModule({
-      imports: [LayoutComponent],
+      imports: [LayoutComponent, getTranslocoTestingModule()],
       providers: [
         provideRouter([]),
         { provide: AuthService, useValue: mockAuthService }
diff --git a/wordkeep-client/src/app/components/layout/variants/layout-compendium/layout-compendium.html b/wordkeep-client/src/app/components/layout/variants/layout-compendium/layout-compendium.html
index d66752a..69786ff 100644
--- a/wordkeep-client/src/app/components/layout/variants/layout-compendium/layout-compendium.html
+++ b/wordkeep-client/src/app/components/layout/variants/layout-compendium/layout-compendium.html
@@ -1,12 +1,13 @@
+<ng-container *transloco="let t; read: 'shell'">
 <div class="app-layout">
   <header class="masthead">
     <div class="masthead__meta">
-      <span class="masthead__edition">Vol. I — Daily Edition</span>
+      <span class="masthead__edition">{{ t('compendium.edition') }}</span>
       <span class="masthead__date">{{ today }}</span>
-      <span class="masthead__price">No. 35</span>
+      <span class="masthead__price">{{ t('compendium.price') }}</span>
     </div>
 
-    <a routerLink="/dashboard" class="masthead__brand" aria-label="WordKeep home">
+    <a routerLink="/dashboard" class="masthead__brand" [attr.aria-label]="t('ariaHome')">
       <span class="masthead__keep" aria-hidden="true">
         <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M6 20 V5 H9 V7 H10.5 V5 H13.5 V7 H15 V5 H18 V20 Z" stroke="currentColor" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round"/>
@@ -15,17 +16,17 @@
           <line x1="4" y1="20" x2="20" y2="20" stroke="currentColor" stroke-width="1.0" stroke-linecap="round"/>
         </svg>
       </span>
-      <span class="masthead__wordmark">WordKeep</span>
+      <span class="masthead__wordmark">{{ t('brand') }}</span>
     </a>
 
-    <nav class="masthead__nav" aria-label="Primary">
+    <nav class="masthead__nav" [attr.aria-label]="t('nav.ariaPrimary')">
       <span class="masthead__rule masthead__rule--top" aria-hidden="true"></span>
-      <a routerLink="/dashboard" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Front Page</a>
-      <a routerLink="/documents" routerLinkActive="active">Circulation</a>
-      <a routerLink="/extraction" routerLinkActive="active">Press Room</a>
-      <a routerLink="/page-linking" routerLinkActive="active">Bindery</a>
-      <a routerLink="/book-view" routerLinkActive="active">Reading Room</a>
-      <a routerLink="/translation" routerLinkActive="active">Translation Desk</a>
+      <a routerLink="/dashboard" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">{{ t('compendium.frontPage') }}</a>
+      <a routerLink="/documents" routerLinkActive="active">{{ t('compendium.circulation') }}</a>
+      <a routerLink="/extraction" routerLinkActive="active">{{ t('compendium.pressRoom') }}</a>
+      <a routerLink="/page-linking" routerLinkActive="active">{{ t('compendium.bindery') }}</a>
+      <a routerLink="/book-view" routerLinkActive="active">{{ t('compendium.readingRoom') }}</a>
+      <a routerLink="/translation" routerLinkActive="active">{{ t('compendium.translationDesk') }}</a>
       <span class="masthead__rule masthead__rule--bottom" aria-hidden="true"></span>
     </nav>
 
@@ -57,3 +58,4 @@
     }
   </main>
 </div>
+</ng-container>
diff --git a/wordkeep-client/src/app/components/layout/variants/layout-compendium/layout-compendium.ts b/wordkeep-client/src/app/components/layout/variants/layout-compendium/layout-compendium.ts
index 769ad39..095e222 100644
--- a/wordkeep-client/src/app/components/layout/variants/layout-compendium/layout-compendium.ts
+++ b/wordkeep-client/src/app/components/layout/variants/layout-compendium/layout-compendium.ts
@@ -1,6 +1,8 @@
 import { Component, HostListener, Input, TemplateRef, computed, inject, signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterLink, RouterLinkActive } from '@angular/router';
+import { provideTranslocoScope, TranslocoDirective, TranslocoService } from '@jsverse/transloco';
+import { formatLocaleDate } from '../../../../utils/date-format';
 import { AuthService } from '../../../../services/auth.service';
 import { ThemeToggleComponent } from '../../../theme-toggle/theme-toggle';
 import { UserMenuDropdownComponent } from '../../../user-menu-dropdown/user-menu-dropdown';
@@ -8,18 +10,20 @@ import { UserMenuDropdownComponent } from '../../../user-menu-dropdown/user-menu
 @Component({
   selector: 'app-layout-compendium',
   standalone: true,
-  imports: [CommonModule, RouterLink, RouterLinkActive, ThemeToggleComponent, UserMenuDropdownComponent],
+  imports: [CommonModule, RouterLink, RouterLinkActive, ThemeToggleComponent, UserMenuDropdownComponent, TranslocoDirective],
+  providers: [provideTranslocoScope('shell')],
   templateUrl: './layout-compendium.html',
   styleUrl: './layout-compendium.scss'
 })
 export class LayoutCompendiumComponent {
   authService = inject(AuthService);
+  private transloco = inject(TranslocoService);
   menuOpen = signal(false);
 
   @Input() contentTpl: TemplateRef<unknown> | null = null;
 
   readonly today = computed(() =>
-    new Date().toLocaleDateString(undefined, {
+    formatLocaleDate(new Date(), this.transloco.getActiveLang(), {
       weekday: 'long',
       year: 'numeric',
       month: 'long',
diff --git a/wordkeep-client/src/app/components/layout/variants/layout-console/layout-console.html b/wordkeep-client/src/app/components/layout/variants/layout-console/layout-console.html
index 29c8202..0adc0ee 100644
--- a/wordkeep-client/src/app/components/layout/variants/layout-console/layout-console.html
+++ b/wordkeep-client/src/app/components/layout/variants/layout-console/layout-console.html
@@ -1,28 +1,29 @@
+<ng-container *transloco="let t; read: 'shell'">
 <div class="app-layout">
   <header class="app-header">
     <div class="header-content">
-      <a routerLink="/dashboard" class="prompt" aria-label="WordKeep home">
-        <span class="prompt__user">wordkeep</span>
+      <a routerLink="/dashboard" class="prompt" [attr.aria-label]="t('ariaHome')">
+        <span class="prompt__user">{{ t('console.promptUser') }}</span>
         <span class="prompt__path">~{{ currentPath() }}</span>
         <span class="prompt__caret" aria-hidden="true">&rsaquo;</span>
       </a>
 
-      <nav class="cli-nav" aria-label="Primary">
-        <a routerLink="/documents" routerLinkActive="active">docs</a>
+      <nav class="cli-nav" [attr.aria-label]="t('nav.ariaPrimary')">
+        <a routerLink="/documents" routerLinkActive="active">{{ t('console.docs') }}</a>
         <span class="cli-nav__sep" aria-hidden="true">&middot;</span>
-        <a routerLink="/extraction" routerLinkActive="active">extr</a>
+        <a routerLink="/extraction" routerLinkActive="active">{{ t('console.extr') }}</a>
         <span class="cli-nav__sep" aria-hidden="true">&middot;</span>
-        <a routerLink="/page-linking" routerLinkActive="active">link</a>
+        <a routerLink="/page-linking" routerLinkActive="active">{{ t('console.link') }}</a>
         <span class="cli-nav__sep" aria-hidden="true">&middot;</span>
-        <a routerLink="/book-view" routerLinkActive="active">view</a>
+        <a routerLink="/book-view" routerLinkActive="active">{{ t('console.viewNav') }}</a>
         <span class="cli-nav__sep" aria-hidden="true">&middot;</span>
-        <a routerLink="/translation" routerLinkActive="active">trsl</a>
+        <a routerLink="/translation" routerLinkActive="active">{{ t('console.trsl') }}</a>
         <span class="cli-nav__sep" aria-hidden="true">&middot;</span>
-        <a routerLink="/dictionary" routerLinkActive="active">dict</a>
+        <a routerLink="/dictionary" routerLinkActive="active">{{ t('console.dict') }}</a>
       </nav>
 
       <div class="header-right">
-        <button class="cli-slash" type="button" (click)="openPalette()" aria-label="Open command palette">/</button>
+        <button class="cli-slash" type="button" (click)="openPalette()" [attr.aria-label]="t('console.openPalette')">/</button>
         <app-theme-toggle></app-theme-toggle>
         <div class="user-menu-wrapper">
           <button class="user-menu-trigger" (click)="toggleMenu()" [class.open]="menuOpen()">
@@ -53,17 +54,18 @@
   </main>
 
   <footer class="status-bar" aria-hidden="true">
-    <span class="status-bar__seg status-bar__seg--accent">[wordkeep]</span>
+    <span class="status-bar__seg status-bar__seg--accent">{{ t('console.statusBrand') }}</span>
     <span class="status-bar__seg">{{ currentPath() }}</span>
     <span class="status-bar__spacer"></span>
-    <span class="status-bar__seg">{{ themeService.palette() }}</span>
+    <span class="status-bar__seg">{{ t('console.palette.' + themeService.palette()) }}</span>
     <span class="status-bar__sep">&middot;</span>
-    <span class="status-bar__seg">{{ themeService.resolved() }}</span>
+    <span class="status-bar__seg">{{ t('console.theme.' + themeService.resolved()) }}</span>
     <span class="status-bar__sep">&middot;</span>
     <span class="status-bar__seg">{{ authService.userName() }}</span>
     <span class="status-bar__sep">&middot;</span>
-    <span class="status-bar__seg status-bar__seg--hint">press <kbd>/</kbd> to navigate</span>
+    <span class="status-bar__seg status-bar__seg--hint" [innerHTML]="t('console.navHint')"></span>
   </footer>
 
   <app-command-palette #palette></app-command-palette>
 </div>
+</ng-container>
diff --git a/wordkeep-client/src/app/components/layout/variants/layout-console/layout-console.ts b/wordkeep-client/src/app/components/layout/variants/layout-console/layout-console.ts
index af02cd4..560afef 100644
--- a/wordkeep-client/src/app/components/layout/variants/layout-console/layout-console.ts
+++ b/wordkeep-client/src/app/components/layout/variants/layout-console/layout-console.ts
@@ -2,6 +2,7 @@ import { Component, HostListener, Input, TemplateRef, ViewChild, computed, injec
 import { CommonModule } from '@angular/common';
 import { NavigationEnd, Router, RouterLink, RouterLinkActive } from '@angular/router';
 import { filter } from 'rxjs/operators';
+import { provideTranslocoScope, TranslocoDirective } from '@jsverse/transloco';
 import { AuthService } from '../../../../services/auth.service';
 import { ThemeService } from '../../../../services/theme.service';
 import { ThemeToggleComponent } from '../../../theme-toggle/theme-toggle';
@@ -18,7 +19,9 @@ import { CommandPaletteComponent } from '../../../command-palette/command-palett
     ThemeToggleComponent,
     UserMenuDropdownComponent,
     CommandPaletteComponent,
+    TranslocoDirective,
   ],
+  providers: [provideTranslocoScope('shell')],
   templateUrl: './layout-console.html',
   styleUrl: './layout-console.scss'
 })
diff --git a/wordkeep-client/src/app/components/layout/variants/layout-glass/layout-glass.html b/wordkeep-client/src/app/components/layout/variants/layout-glass/layout-glass.html
index bfbefd7..7454c10 100644
--- a/wordkeep-client/src/app/components/layout/variants/layout-glass/layout-glass.html
+++ b/wordkeep-client/src/app/components/layout/variants/layout-glass/layout-glass.html
@@ -1,23 +1,24 @@
+<ng-container *transloco="let t; read: 'shell'">
 <div class="app-layout">
   <header class="capsule" [class.shrunk]="capsuleShrunk()">
     <span class="capsule__glow" aria-hidden="true"></span>
-    <a routerLink="/dashboard" class="capsule__brand" aria-label="WordKeep home">
+    <a routerLink="/dashboard" class="capsule__brand" [attr.aria-label]="t('ariaHome')">
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M6 20 V5 H9 V7 H10.5 V5 H13.5 V7 H15 V5 H18 V20 Z" stroke="currentColor" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round"/>
         <line x1="12" y1="10" x2="12" y2="13" stroke="currentColor" stroke-width="1.0" stroke-linecap="round"/>
         <path d="M10 20 V17 a2 2 0 0 1 4 0 V20" stroke="currentColor" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round"/>
         <line x1="4" y1="20" x2="20" y2="20" stroke="currentColor" stroke-width="1.0" stroke-linecap="round"/>
       </svg>
-      <span class="capsule__wordmark">WordKeep</span>
+      <span class="capsule__wordmark">{{ t('brand') }}</span>
     </a>
 
-    <nav class="capsule__nav" aria-label="Primary">
-      <a routerLink="/dashboard" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Dashboard</a>
-      <a routerLink="/documents" routerLinkActive="active">Documents</a>
-      <a routerLink="/extraction" routerLinkActive="active">Extraction</a>
-      <a routerLink="/page-linking" routerLinkActive="active">Linking</a>
-      <a routerLink="/book-view" routerLinkActive="active">View</a>
-      <a routerLink="/translation" routerLinkActive="active">Translation</a>
+    <nav class="capsule__nav" [attr.aria-label]="t('nav.ariaPrimary')">
+      <a routerLink="/dashboard" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">{{ t('nav.dashboard') }}</a>
+      <a routerLink="/documents" routerLinkActive="active">{{ t('nav.documents') }}</a>
+      <a routerLink="/extraction" routerLinkActive="active">{{ t('nav.extraction') }}</a>
+      <a routerLink="/page-linking" routerLinkActive="active">{{ t('nav.linking') }}</a>
+      <a routerLink="/book-view" routerLinkActive="active">{{ t('nav.view') }}</a>
+      <a routerLink="/translation" routerLinkActive="active">{{ t('nav.translation') }}</a>
     </nav>
 
     <div class="capsule__right">
@@ -48,3 +49,4 @@
     }
   </main>
 </div>
+</ng-container>
diff --git a/wordkeep-client/src/app/components/layout/variants/layout-glass/layout-glass.ts b/wordkeep-client/src/app/components/layout/variants/layout-glass/layout-glass.ts
index ef9e364..2ee57fc 100644
--- a/wordkeep-client/src/app/components/layout/variants/layout-glass/layout-glass.ts
+++ b/wordkeep-client/src/app/components/layout/variants/layout-glass/layout-glass.ts
@@ -1,6 +1,7 @@
 import { Component, HostListener, Input, TemplateRef, inject, signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterLink, RouterLinkActive } from '@angular/router';
+import { provideTranslocoScope, TranslocoDirective } from '@jsverse/transloco';
 import { AuthService } from '../../../../services/auth.service';
 import { ThemeToggleComponent } from '../../../theme-toggle/theme-toggle';
 import { UserMenuDropdownComponent } from '../../../user-menu-dropdown/user-menu-dropdown';
@@ -8,7 +9,8 @@ import { UserMenuDropdownComponent } from '../../../user-menu-dropdown/user-menu
 @Component({
   selector: 'app-layout-glass',
   standalone: true,
-  imports: [CommonModule, RouterLink, RouterLinkActive, ThemeToggleComponent, UserMenuDropdownComponent],
+  imports: [CommonModule, RouterLink, RouterLinkActive, ThemeToggleComponent, UserMenuDropdownComponent, TranslocoDirective],
+  providers: [provideTranslocoScope('shell')],
   templateUrl: './layout-glass.html',
   styleUrl: './layout-glass.scss'
 })
diff --git a/wordkeep-client/src/app/components/layout/variants/layout-reading-room/layout-reading-room.html b/wordkeep-client/src/app/components/layout/variants/layout-reading-room/layout-reading-room.html
index 62cc2ae..41d6aa4 100644
--- a/wordkeep-client/src/app/components/layout/variants/layout-reading-room/layout-reading-room.html
+++ b/wordkeep-client/src/app/components/layout/variants/layout-reading-room/layout-reading-room.html
@@ -1,3 +1,4 @@
+<ng-container *transloco="let t; read: 'shell'">
 <div class="app-layout">
   <header class="app-header">
     <div class="header-content">
@@ -9,15 +10,15 @@
             <path d="M10 20 V17 a2 2 0 0 1 4 0 V20" stroke="currentColor" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round"/>
             <line x1="4" y1="20" x2="20" y2="20" stroke="currentColor" stroke-width="1.0" stroke-linecap="round"/>
           </svg>
-          <span class="logo__wordmark">WordKeep</span>
+          <span class="logo__wordmark">{{ t('brand') }}</span>
         </a>
         <nav class="main-nav">
-          <a routerLink="/dashboard" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Dashboard</a>
-          <a routerLink="/documents" routerLinkActive="active">Documents</a>
-          <a routerLink="/extraction" routerLinkActive="active">Text Extraction</a>
-          <a routerLink="/page-linking" routerLinkActive="active">Page Linking</a>
-          <a routerLink="/book-view" routerLinkActive="active">Document View</a>
-          <a routerLink="/translation" routerLinkActive="active">Translation</a>
+          <a routerLink="/dashboard" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">{{ t('nav.dashboard') }}</a>
+          <a routerLink="/documents" routerLinkActive="active">{{ t('nav.documents') }}</a>
+          <a routerLink="/extraction" routerLinkActive="active">{{ t('nav.textExtraction') }}</a>
+          <a routerLink="/page-linking" routerLinkActive="active">{{ t('nav.pageLinking') }}</a>
+          <a routerLink="/book-view" routerLinkActive="active">{{ t('nav.documentView') }}</a>
+          <a routerLink="/translation" routerLinkActive="active">{{ t('nav.translation') }}</a>
         </nav>
       </div>
 
@@ -54,3 +55,4 @@
     }
   </main>
 </div>
+</ng-container>
diff --git a/wordkeep-client/src/app/components/layout/variants/layout-reading-room/layout-reading-room.ts b/wordkeep-client/src/app/components/layout/variants/layout-reading-room/layout-reading-room.ts
index f03acb6..14d6cc6 100644
--- a/wordkeep-client/src/app/components/layout/variants/layout-reading-room/layout-reading-room.ts
+++ b/wordkeep-client/src/app/components/layout/variants/layout-reading-room/layout-reading-room.ts
@@ -1,6 +1,7 @@
 import { Component, HostListener, Input, TemplateRef, inject, signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterLink, RouterLinkActive } from '@angular/router';
+import { provideTranslocoScope, TranslocoDirective } from '@jsverse/transloco';
 import { AuthService } from '../../../../services/auth.service';
 import { ThemeToggleComponent } from '../../../theme-toggle/theme-toggle';
 import { UserMenuDropdownComponent } from '../../../user-menu-dropdown/user-menu-dropdown';
@@ -8,7 +9,8 @@ import { UserMenuDropdownComponent } from '../../../user-menu-dropdown/user-menu
 @Component({
   selector: 'app-layout-reading-room',
   standalone: true,
-  imports: [CommonModule, RouterLink, RouterLinkActive, ThemeToggleComponent, UserMenuDropdownComponent],
+  imports: [CommonModule, RouterLink, RouterLinkActive, ThemeToggleComponent, UserMenuDropdownComponent, TranslocoDirective],
+  providers: [provideTranslocoScope('shell')],
   templateUrl: './layout-reading-room.html',
   styleUrl: './layout-reading-room.scss'
 })
diff --git a/wordkeep-client/src/app/components/layout/variants/layout-scriptorium/layout-scriptorium.html b/wordkeep-client/src/app/components/layout/variants/layout-scriptorium/layout-scriptorium.html
index effa8da..5b7cc16 100644
--- a/wordkeep-client/src/app/components/layout/variants/layout-scriptorium/layout-scriptorium.html
+++ b/wordkeep-client/src/app/components/layout/variants/layout-scriptorium/layout-scriptorium.html
@@ -1,3 +1,4 @@
+<ng-container *transloco="let t; read: 'shell'">
 <div class="app-layout">
   <header class="app-header">
     <div class="header-content">
@@ -9,17 +10,17 @@
             <path d="M10 20 V17 a2 2 0 0 1 4 0 V20" stroke="currentColor" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round"/>
             <line x1="4" y1="20" x2="20" y2="20" stroke="currentColor" stroke-width="1.0" stroke-linecap="round"/>
           </svg>
-          <span class="logo__wordmark">
-            <span class="logo__versal" aria-hidden="true">W</span><span class="logo__rest">ordKeep</span>
+          <span class="logo__wordmark" [attr.aria-label]="t('brand')">
+            <span class="logo__versal" aria-hidden="true">{{ t('brand').charAt(0) }}</span><span class="logo__rest" aria-hidden="true">{{ t('brand').slice(1) }}</span>
           </span>
         </a>
         <nav class="main-nav">
-          <a routerLink="/dashboard" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Dashboard</a>
-          <a routerLink="/documents" routerLinkActive="active">Documents</a>
-          <a routerLink="/extraction" routerLinkActive="active">Text Extraction</a>
-          <a routerLink="/page-linking" routerLinkActive="active">Page Linking</a>
-          <a routerLink="/book-view" routerLinkActive="active">Document View</a>
-          <a routerLink="/translation" routerLinkActive="active">Translation</a>
+          <a routerLink="/dashboard" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">{{ t('nav.dashboard') }}</a>
+          <a routerLink="/documents" routerLinkActive="active">{{ t('nav.documents') }}</a>
+          <a routerLink="/extraction" routerLinkActive="active">{{ t('nav.textExtraction') }}</a>
+          <a routerLink="/page-linking" routerLinkActive="active">{{ t('nav.pageLinking') }}</a>
+          <a routerLink="/book-view" routerLinkActive="active">{{ t('nav.documentView') }}</a>
+          <a routerLink="/translation" routerLinkActive="active">{{ t('nav.translation') }}</a>
         </nav>
       </div>
 
@@ -56,3 +57,4 @@
     }
   </main>
 </div>
+</ng-container>
diff --git a/wordkeep-client/src/app/components/layout/variants/layout-scriptorium/layout-scriptorium.ts b/wordkeep-client/src/app/components/layout/variants/layout-scriptorium/layout-scriptorium.ts
index 93849fc..a497804 100644
--- a/wordkeep-client/src/app/components/layout/variants/layout-scriptorium/layout-scriptorium.ts
+++ b/wordkeep-client/src/app/components/layout/variants/layout-scriptorium/layout-scriptorium.ts
@@ -2,6 +2,7 @@ import { Component, HostListener, Input, TemplateRef, computed, inject, signal }
 import { CommonModule } from '@angular/common';
 import { NavigationEnd, Router, RouterLink, RouterLinkActive } from '@angular/router';
 import { filter } from 'rxjs/operators';
+import { provideTranslocoScope, TranslocoDirective } from '@jsverse/transloco';
 import { AuthService } from '../../../../services/auth.service';
 import { ThemeToggleComponent } from '../../../theme-toggle/theme-toggle';
 import { UserMenuDropdownComponent } from '../../../user-menu-dropdown/user-menu-dropdown';
@@ -25,7 +26,8 @@ const LIST_ROUTES = new Set<string>([
 @Component({
   selector: 'app-layout-scriptorium',
   standalone: true,
-  imports: [CommonModule, RouterLink, RouterLinkActive, ThemeToggleComponent, UserMenuDropdownComponent],
+  imports: [CommonModule, RouterLink, RouterLinkActive, ThemeToggleComponent, UserMenuDropdownComponent, TranslocoDirective],
+  providers: [provideTranslocoScope('shell')],
   templateUrl: './layout-scriptorium.html',
   styleUrl: './layout-scriptorium.scss'
 })
diff --git a/wordkeep-client/src/app/components/layout/variants/layout-workbench/layout-workbench.html b/wordkeep-client/src/app/components/layout/variants/layout-workbench/layout-workbench.html
index 4608dbb..eeab779 100644
--- a/wordkeep-client/src/app/components/layout/variants/layout-workbench/layout-workbench.html
+++ b/wordkeep-client/src/app/components/layout/variants/layout-workbench/layout-workbench.html
@@ -1,13 +1,14 @@
+<ng-container *transloco="let t; read: 'shell'">
 <div class="app-layout">
   <header class="topbar">
-    <a routerLink="/dashboard" class="topbar__brand" aria-label="WordKeep home">
+    <a routerLink="/dashboard" class="topbar__brand" [attr.aria-label]="t('ariaHome')">
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M6 20 V5 H9 V7 H10.5 V5 H13.5 V7 H15 V5 H18 V20 Z" stroke="currentColor" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round"/>
         <line x1="12" y1="10" x2="12" y2="13" stroke="currentColor" stroke-width="1.0" stroke-linecap="round"/>
         <path d="M10 20 V17 a2 2 0 0 1 4 0 V20" stroke="currentColor" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round"/>
         <line x1="4" y1="20" x2="20" y2="20" stroke="currentColor" stroke-width="1.0" stroke-linecap="round"/>
       </svg>
-      <span class="topbar__wordmark">WordKeep</span>
+      <span class="topbar__wordmark">{{ t('brand') }}</span>
     </a>
 
     <div class="topbar__right">
@@ -38,8 +39,8 @@
     }
   </main>
 
-  <nav class="dock" aria-label="Primary">
-    <a routerLink="/dashboard" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" class="dock__item" data-label="Dashboard">
+  <nav class="dock" [attr.aria-label]="t('nav.ariaPrimary')">
+    <a routerLink="/dashboard" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" class="dock__item" [attr.data-label]="t('nav.dashboard')">
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <rect x="3" y="3" width="7" height="7" rx="1.5" stroke="currentColor" stroke-width="1.0"/>
         <rect x="14" y="3" width="7" height="7" rx="1.5" stroke="currentColor" stroke-width="1.0"/>
@@ -47,33 +48,34 @@
         <rect x="14" y="14" width="7" height="7" rx="1.5" stroke="currentColor" stroke-width="1.0"/>
       </svg>
     </a>
-    <a routerLink="/documents" routerLinkActive="active" class="dock__item" data-label="Documents">
+    <a routerLink="/documents" routerLinkActive="active" class="dock__item" [attr.data-label]="t('nav.documents')">
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" stroke="currentColor" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round"/>
         <polyline points="14 2 14 8 20 8" stroke="currentColor" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round"/>
       </svg>
     </a>
-    <a routerLink="/extraction" routerLinkActive="active" class="dock__item" data-label="Extraction">
+    <a routerLink="/extraction" routerLinkActive="active" class="dock__item" [attr.data-label]="t('nav.extraction')">
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25" stroke="currentColor" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round"/>
       </svg>
     </a>
-    <a routerLink="/page-linking" routerLinkActive="active" class="dock__item" data-label="Page Linking">
+    <a routerLink="/page-linking" routerLinkActive="active" class="dock__item" [attr.data-label]="t('nav.pageLinking')">
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" stroke="currentColor" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round"/>
         <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" stroke="currentColor" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round"/>
       </svg>
     </a>
-    <a routerLink="/book-view" routerLinkActive="active" class="dock__item" data-label="Document View">
+    <a routerLink="/book-view" routerLinkActive="active" class="dock__item" [attr.data-label]="t('nav.documentView')">
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z" stroke="currentColor" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round"/>
         <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="1.0"/>
       </svg>
     </a>
-    <a routerLink="/translation" routerLinkActive="active" class="dock__item" data-label="Translation">
+    <a routerLink="/translation" routerLinkActive="active" class="dock__item" [attr.data-label]="t('nav.translation')">
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 0 1 6.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129" stroke="currentColor" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round"/>
       </svg>
     </a>
   </nav>
 </div>
+</ng-container>
diff --git a/wordkeep-client/src/app/components/layout/variants/layout-workbench/layout-workbench.ts b/wordkeep-client/src/app/components/layout/variants/layout-workbench/layout-workbench.ts
index 9d9b215..beea223 100644
--- a/wordkeep-client/src/app/components/layout/variants/layout-workbench/layout-workbench.ts
+++ b/wordkeep-client/src/app/components/layout/variants/layout-workbench/layout-workbench.ts
@@ -1,6 +1,7 @@
 import { Component, HostListener, Input, TemplateRef, inject, signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterLink, RouterLinkActive } from '@angular/router';
+import { provideTranslocoScope, TranslocoDirective } from '@jsverse/transloco';
 import { AuthService } from '../../../../services/auth.service';
 import { ThemeToggleComponent } from '../../../theme-toggle/theme-toggle';
 import { UserMenuDropdownComponent } from '../../../user-menu-dropdown/user-menu-dropdown';
@@ -8,7 +9,8 @@ import { UserMenuDropdownComponent } from '../../../user-menu-dropdown/user-menu
 @Component({
   selector: 'app-layout-workbench',
   standalone: true,
-  imports: [CommonModule, RouterLink, RouterLinkActive, ThemeToggleComponent, UserMenuDropdownComponent],
+  imports: [CommonModule, RouterLink, RouterLinkActive, ThemeToggleComponent, UserMenuDropdownComponent, TranslocoDirective],
+  providers: [provideTranslocoScope('shell')],
   templateUrl: './layout-workbench.html',
   styleUrl: './layout-workbench.scss'
 })
diff --git a/wordkeep-client/src/app/components/new-translation-dialog/new-translation-dialog.html b/wordkeep-client/src/app/components/new-translation-dialog/new-translation-dialog.html
index 8f555ad..8687013 100644
--- a/wordkeep-client/src/app/components/new-translation-dialog/new-translation-dialog.html
+++ b/wordkeep-client/src/app/components/new-translation-dialog/new-translation-dialog.html
@@ -6,25 +6,26 @@
     role="dialog"
     aria-modal="true"
     aria-labelledby="dialog-title"
+    *transloco="let t; read: 'shared'"
   >
     <div class="dialog-card" [class.closing]="closing()">
       <div class="dialog-header">
-        <h2 id="dialog-title">New Translation</h2>
+        <h2 id="dialog-title">{{ t('newTranslation.title') }}</h2>
       </div>
 
       <div class="dialog-body">
         <div class="form-group">
-          <label for="doc-select">Document</label>
+          <label for="doc-select">{{ t('newTranslation.document') }}</label>
           @if (loadingDocs()) {
             <div class="loading-inline">
               <div class="spinner-sm"></div>
-              <span>Loading documents...</span>
+              <span>{{ t('newTranslation.loadingDocuments') }}</span>
             </div>
           } @else if (documents().length === 0) {
-            <p class="empty-hint">No ready documents available.</p>
+            <p class="empty-hint">{{ t('newTranslation.noDocuments') }}</p>
           } @else {
             <select id="doc-select" (change)="selectedDocId.set(+$any($event.target).value || null)">
-              <option value="">Select a document...</option>
+              <option value="">{{ t('newTranslation.selectDocument') }}</option>
               @for (doc of documents(); track doc.id) {
                 <option [value]="doc.id">{{ doc.effective_filename }}</option>
               }
@@ -33,24 +34,24 @@ <h2 id="dialog-title">New Translation</h2>
         </div>
 
         <div class="form-group">
-          <label for="lang-select">Target Language</label>
+          <label for="lang-select">{{ t('newTranslation.targetLanguage') }}</label>
           <select id="lang-select" (change)="selectedLanguage.set($any($event.target).value)">
-            <option value="">Select a language...</option>
+            <option value="">{{ t('newTranslation.selectLanguage') }}</option>
             @for (lang of languages; track lang.code) {
-              <option [value]="lang.code">{{ lang.flag }} {{ lang.name }}</option>
+              <option [value]="lang.code">{{ lang.flag }} {{ getLanguageName(lang.code) }}</option>
             }
           </select>
         </div>
       </div>
 
       <div class="dialog-footer">
-        <button class="btn-cancel" (click)="cancel()">Cancel</button>
+        <button class="btn-cancel" (click)="cancel()">{{ t('common.cancel') }}</button>
         <button
           class="btn-confirm btn-primary"
           [disabled]="!isValid()"
           (click)="confirm()"
         >
-          Add Translation
+          {{ t('newTranslation.add') }}
         </button>
       </div>
     </div>
diff --git a/wordkeep-client/src/app/components/new-translation-dialog/new-translation-dialog.scss b/wordkeep-client/src/app/components/new-translation-dialog/new-translation-dialog.scss
index 279eae3..afa3011 100644
--- a/wordkeep-client/src/app/components/new-translation-dialog/new-translation-dialog.scss
+++ b/wordkeep-client/src/app/components/new-translation-dialog/new-translation-dialog.scss
@@ -148,6 +148,12 @@
 
 .btn-confirm {
   padding: 0.625rem 1.25rem;
+  // Reset the global auth `.btn-primary` rules (uppercase / letter-spacing /
+  // top margin / full width) that leak in via the shared class name.
+  text-transform: none;
+  letter-spacing: normal;
+  margin-top: 0;
+  width: auto;
   border: none;
   border-radius: 8px;
   font-size: 0.875rem;
diff --git a/wordkeep-client/src/app/components/new-translation-dialog/new-translation-dialog.spec.ts b/wordkeep-client/src/app/components/new-translation-dialog/new-translation-dialog.spec.ts
index 3d1824d..b0822c1 100644
--- a/wordkeep-client/src/app/components/new-translation-dialog/new-translation-dialog.spec.ts
+++ b/wordkeep-client/src/app/components/new-translation-dialog/new-translation-dialog.spec.ts
@@ -2,6 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { of } from 'rxjs';
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import { NewTranslationDialogComponent } from './new-translation-dialog';
+import { getTranslocoTestingModule } from '../../transloco/transloco-testing';
 import { DocumentService } from '../../services/document.service';
 import { Document } from '../../models/document.model';
 
@@ -28,7 +29,7 @@ describe('NewTranslationDialogComponent', () => {
 
     TestBed.resetTestingModule();
     TestBed.configureTestingModule({
-      imports: [NewTranslationDialogComponent],
+      imports: [NewTranslationDialogComponent, getTranslocoTestingModule()],
       providers: [
         { provide: DocumentService, useValue: mockDocumentService },
       ],
diff --git a/wordkeep-client/src/app/components/new-translation-dialog/new-translation-dialog.ts b/wordkeep-client/src/app/components/new-translation-dialog/new-translation-dialog.ts
index 06281a8..4c06bfb 100644
--- a/wordkeep-client/src/app/components/new-translation-dialog/new-translation-dialog.ts
+++ b/wordkeep-client/src/app/components/new-translation-dialog/new-translation-dialog.ts
@@ -1,6 +1,7 @@
 import { Component, signal, HostListener, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
+import { provideTranslocoScope, TranslocoDirective, TranslocoService } from '@jsverse/transloco';
 import { DocumentService } from '../../services/document.service';
 import { Document } from '../../models/document.model';
 
@@ -50,12 +51,14 @@ const LANGUAGES = [
 @Component({
   selector: 'app-new-translation-dialog',
   standalone: true,
-  imports: [CommonModule, FormsModule],
+  imports: [CommonModule, FormsModule, TranslocoDirective],
+  providers: [provideTranslocoScope('shared')],
   templateUrl: './new-translation-dialog.html',
   styleUrl: './new-translation-dialog.scss'
 })
 export class NewTranslationDialogComponent {
   private documentService = inject(DocumentService);
+  private transloco = inject(TranslocoService);
 
   visible = signal(false);
   closing = signal(false);
@@ -66,6 +69,13 @@ export class NewTranslationDialogComponent {
   selectedLanguage = signal('');
   languages = LANGUAGES;
 
+  /** Translated language name for display; falls back to the code. */
+  getLanguageName(code: string): string {
+    const key = `languages.${code}`;
+    const name = this.transloco.translate(key);
+    return name === key ? code : name;
+  }
+
   private resolvePromise: ((result: NewTranslationResult | null) => void) | null = null;
 
   @HostListener('document:keydown', ['$event'])
diff --git a/wordkeep-client/src/app/components/recent-activity/recent-activity.html b/wordkeep-client/src/app/components/recent-activity/recent-activity.html
index 5c0be0b..846b116 100644
--- a/wordkeep-client/src/app/components/recent-activity/recent-activity.html
+++ b/wordkeep-client/src/app/components/recent-activity/recent-activity.html
@@ -1,19 +1,19 @@
-<section class="recent-activity">
+<section class="recent-activity" *transloco="let t; read: 'shared'">
   <div class="section-header">
-    <h2>Recent Activity</h2>
+    <h2>{{ t('recentActivity.title') }}</h2>
   </div>
 
   @if (loading()) {
     <div class="state-row">
       <div class="spinner"></div>
-      <p>Loading…</p>
+      <p>{{ t('recentActivity.loading') }}</p>
     </div>
   } @else if (error()) {
     <div class="state-row error">
       <p>{{ error() }}</p>
     </div>
   } @else if (items().length === 0) {
-    <p class="empty-helper">No recent activity yet — open a document to get started.</p>
+    <p class="empty-helper">{{ t('recentActivity.empty') }}</p>
   } @else {
     <div class="activity-grid">
       @for (item of items(); track item.id) {
@@ -31,7 +31,7 @@ <h2>Recent Activity</h2>
             }
             <div class="doc-meta">
               <span class="type-badge" [ngClass]="badge(item.type).cssClass">{{ badge(item.type).label }}</span>
-              <span class="page-info">Page {{ item.page_number }} / {{ item.document.page_count }}</span>
+              <span class="page-info">{{ t('recentActivity.page', { n: item.page_number, total: item.document.page_count }) }}</span>
             </div>
             <div class="progress-bar">
               <div class="progress-fill" [style.width.%]="progressPercent(item)"></div>
diff --git a/wordkeep-client/src/app/components/recent-activity/recent-activity.spec.ts b/wordkeep-client/src/app/components/recent-activity/recent-activity.spec.ts
index af8b9c7..531fe6f 100644
--- a/wordkeep-client/src/app/components/recent-activity/recent-activity.spec.ts
+++ b/wordkeep-client/src/app/components/recent-activity/recent-activity.spec.ts
@@ -1,4 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideHttpClient } from '@angular/common/http';
 import { describe, it, expect, beforeEach, vi } from 'vitest';
 import { of, throwError } from 'rxjs';
 import { Router } from '@angular/router';
@@ -6,6 +7,7 @@ import { RecentActivityComponent } from './recent-activity';
 import { WorkStatusService } from '../../services/work-status.service';
 import { mockDocument } from '../../test-utils';
 import { RecentActivityItem } from '../../models/document.model';
+import { getTranslocoTestingModule } from '../../transloco/transloco-testing';
 
 function makeItem(overrides: Partial<RecentActivityItem> = {}): RecentActivityItem {
   return {
@@ -31,8 +33,9 @@ describe('RecentActivityComponent', () => {
     mockRouter = { navigate: vi.fn() };
 
     await TestBed.configureTestingModule({
-      imports: [RecentActivityComponent],
+      imports: [RecentActivityComponent, getTranslocoTestingModule()],
       providers: [
+        provideHttpClient(),
         { provide: WorkStatusService, useValue: mockWorkStatusService },
         { provide: Router, useValue: mockRouter },
       ]
diff --git a/wordkeep-client/src/app/components/recent-activity/recent-activity.ts b/wordkeep-client/src/app/components/recent-activity/recent-activity.ts
index 654f7d4..6694f00 100644
--- a/wordkeep-client/src/app/components/recent-activity/recent-activity.ts
+++ b/wordkeep-client/src/app/components/recent-activity/recent-activity.ts
@@ -1,9 +1,10 @@
 import { Component, OnInit, inject, signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Router } from '@angular/router';
+import { provideTranslocoScope, TranslocoDirective, TranslocoService } from '@jsverse/transloco';
 import { WorkStatusService } from '../../services/work-status.service';
+import { UserPreferencesService } from '../../services/user-preferences.service';
 import { RecentActivityItem } from '../../models/document.model';
-import { languageDisplayName } from '../../utils/language-names';
 import { formatNumericDate } from '../../utils/date-format';
 
 interface BadgeMeta {
@@ -14,13 +15,16 @@ interface BadgeMeta {
 @Component({
   selector: 'app-recent-activity',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, TranslocoDirective],
+  providers: [provideTranslocoScope('shared')],
   templateUrl: './recent-activity.html',
   styleUrl: './recent-activity.scss'
 })
 export class RecentActivityComponent implements OnInit {
   private workStatusService = inject(WorkStatusService);
   private router = inject(Router);
+  private prefs = inject(UserPreferencesService);
+  private transloco = inject(TranslocoService);
 
   items = signal<RecentActivityItem[]>([]);
   loading = signal(true);
@@ -33,19 +37,22 @@ export class RecentActivityComponent implements OnInit {
         this.loading.set(false);
       },
       error: () => {
-        this.error.set('Failed to load recent activity');
+        this.error.set(this.transloco.translate('shared.recentActivity.loadError'));
         this.loading.set(false);
       }
     });
   }
 
   badge(type: string): BadgeMeta {
-    if (type === 'ocr') return { label: 'OCR', cssClass: 'badge-ocr' };
-    if (type === 'page_linking') return { label: 'Page Linking', cssClass: 'badge-page-linking' };
-    if (type === 'book_view') return { label: 'Book View', cssClass: 'badge-book-view' };
+    const t = (key: string, params?: object) => this.transloco.translate(`shared.recentActivity.badge.${key}`, params);
+    if (type === 'ocr') return { label: t('ocr'), cssClass: 'badge-ocr' };
+    if (type === 'page_linking') return { label: t('pageLinking'), cssClass: 'badge-page-linking' };
+    if (type === 'book_view') return { label: t('bookView'), cssClass: 'badge-book-view' };
     if (type.startsWith('translation_')) {
       const lang = type.slice('translation_'.length);
-      return { label: `Translation — ${languageDisplayName(lang)}`, cssClass: 'badge-translation' };
+      const langKey = `languages.${lang}`;
+      const langName = this.transloco.translate(langKey);
+      return { label: t('translation', { lang: langName === langKey ? lang : langName }), cssClass: 'badge-translation' };
     }
     return { label: type, cssClass: 'badge-generic' };
   }
@@ -78,14 +85,15 @@ export class RecentActivityComponent implements OnInit {
   }
 
   relativeTime(iso: string): string {
+    const t = (key: string, params?: object) => this.transloco.translate(`shared.recentActivity.time.${key}`, params);
     const diffMs = Date.now() - new Date(iso).getTime();
     const min = Math.round(diffMs / 60_000);
-    if (min < 1) return 'just now';
-    if (min < 60) return `${min}m ago`;
+    if (min < 1) return t('justNow');
+    if (min < 60) return t('minutes', { n: min });
     const hr = Math.round(min / 60);
-    if (hr < 24) return `${hr}h ago`;
+    if (hr < 24) return t('hours', { n: hr });
     const day = Math.round(hr / 24);
-    if (day < 7) return `${day}d ago`;
-    return formatNumericDate(iso);
+    if (day < 7) return t('days', { n: day });
+    return formatNumericDate(iso, this.prefs.locale());
   }
 }
diff --git a/wordkeep-client/src/app/components/rename-dialog/rename-dialog.html b/wordkeep-client/src/app/components/rename-dialog/rename-dialog.html
index cbf02d8..e8ca1b5 100644
--- a/wordkeep-client/src/app/components/rename-dialog/rename-dialog.html
+++ b/wordkeep-client/src/app/components/rename-dialog/rename-dialog.html
@@ -6,16 +6,17 @@
     role="dialog"
     aria-modal="true"
     aria-labelledby="dialog-title"
+    *transloco="let t; read: 'shared'"
   >
     <div class="dialog-card" [class.closing]="closing()">
       @if (config(); as cfg) {
         <div class="dialog-header">
-          <h2 id="dialog-title">Rename Document</h2>
+          <h2 id="dialog-title">{{ t('renameDialog.title') }}</h2>
         </div>
 
         <div class="dialog-body">
           <div class="input-group">
-            <label for="rename-input">Name</label>
+            <label for="rename-input">{{ t('renameDialog.name') }}</label>
             <input
               id="rename-input"
               type="text"
@@ -27,27 +28,28 @@ <h2 id="dialog-title">Rename Document</h2>
           </div>
 
           @if (cfg.hasCustomName) {
-            <p class="original-hint">Original: {{ cfg.originalName }}</p>
+            <p class="original-hint">{{ t('renameDialog.original', { name: cfg.originalName }) }}</p>
           }
         </div>
 
         <div class="dialog-footer">
           @if (cfg.hasCustomName) {
             <button class="btn-restore" (click)="restore()">
-              Restore Original
+              {{ t('renameDialog.restore') }}
             </button>
           }
-          <div class="spacer"></div>
-          <button class="btn-cancel" (click)="cancel()">
-            Cancel
-          </button>
-          <button
-            class="btn-confirm btn-primary"
-            (click)="save()"
-            [disabled]="!newName().trim()"
-          >
-            Save
-          </button>
+          <div class="dialog-footer__actions">
+            <button class="btn-cancel" (click)="cancel()">
+              {{ t('common.cancel') }}
+            </button>
+            <button
+              class="btn-confirm btn-primary"
+              (click)="save()"
+              [disabled]="!newName().trim()"
+            >
+              {{ t('common.save') }}
+            </button>
+          </div>
         </div>
       }
     </div>
diff --git a/wordkeep-client/src/app/components/rename-dialog/rename-dialog.scss b/wordkeep-client/src/app/components/rename-dialog/rename-dialog.scss
index be0e594..1b153d8 100644
--- a/wordkeep-client/src/app/components/rename-dialog/rename-dialog.scss
+++ b/wordkeep-client/src/app/components/rename-dialog/rename-dialog.scss
@@ -28,7 +28,9 @@
   background: var(--color-surface);
   border-radius: 12px;
   box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-  max-width: 420px;
+  // Wider than the other dialogs so the restore + cancel + save trio fits on a
+  // single row (the localized "Restaurează originalul" label is long).
+  max-width: 480px;
   width: 100%;
   animation: slideIn 0.15s ease-out;
 
@@ -113,17 +115,24 @@
 
 .dialog-footer {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
+  justify-content: flex-end;
   gap: 0.75rem;
   padding: 0 1.5rem 1.5rem;
 }
 
-.spacer {
-  flex: 1;
+// keep cancel + save together; restore is pushed left and drops to its own
+// row when the long (localized) label leaves no room on a single line.
+.dialog-footer__actions {
+  display: flex;
+  gap: 0.75rem;
 }
 
 .btn-restore {
-  padding: 0.625rem 1rem;
+  margin-right: auto;
+  padding: 0.625rem 1.25rem;
+  white-space: nowrap;
   background: var(--color-surface);
   border: 1.5px solid color-mix(in oklab, var(--color-warning) 35%, transparent);
   border-radius: 8px;
@@ -146,6 +155,7 @@
 
 .btn-cancel {
   padding: 0.625rem 1.25rem;
+  white-space: nowrap;
   background: var(--color-surface);
   border: 1.5px solid var(--color-rule);
   border-radius: 8px;
@@ -169,6 +179,13 @@
 
 .btn-confirm {
   padding: 0.625rem 1.25rem;
+  white-space: nowrap;
+  // Reset the global auth `.btn-primary` rules (uppercase / letter-spacing /
+  // top margin / full width) that leak in via the shared class name.
+  text-transform: none;
+  letter-spacing: normal;
+  margin-top: 0;
+  width: auto;
   border: none;
   border-radius: 8px;
   font-size: 0.875rem;
diff --git a/wordkeep-client/src/app/components/rename-dialog/rename-dialog.spec.ts b/wordkeep-client/src/app/components/rename-dialog/rename-dialog.spec.ts
index 2eda2f3..a6d2cf3 100644
--- a/wordkeep-client/src/app/components/rename-dialog/rename-dialog.spec.ts
+++ b/wordkeep-client/src/app/components/rename-dialog/rename-dialog.spec.ts
@@ -1,6 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { describe, it, expect, beforeEach, vi } from 'vitest';
 import { RenameDialogComponent, RenameDialogConfig } from './rename-dialog';
+import { getTranslocoTestingModule } from '../../transloco/transloco-testing';
 
 describe('RenameDialogComponent', () => {
   let component: RenameDialogComponent;
@@ -8,7 +9,7 @@ describe('RenameDialogComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [RenameDialogComponent]
+      imports: [RenameDialogComponent, getTranslocoTestingModule()]
     }).compileComponents();
 
     fixture = TestBed.createComponent(RenameDialogComponent);
diff --git a/wordkeep-client/src/app/components/rename-dialog/rename-dialog.ts b/wordkeep-client/src/app/components/rename-dialog/rename-dialog.ts
index 0edf227..60bdffa 100644
--- a/wordkeep-client/src/app/components/rename-dialog/rename-dialog.ts
+++ b/wordkeep-client/src/app/components/rename-dialog/rename-dialog.ts
@@ -1,6 +1,7 @@
 import { Component, signal, HostListener } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
+import { provideTranslocoScope, TranslocoDirective } from '@jsverse/transloco';
 
 export interface RenameDialogConfig {
   currentName: string;
@@ -16,7 +17,8 @@ export type RenameDialogResult =
 @Component({
   selector: 'app-rename-dialog',
   standalone: true,
-  imports: [CommonModule, FormsModule],
+  imports: [CommonModule, FormsModule, TranslocoDirective],
+  providers: [provideTranslocoScope('shared')],
   templateUrl: './rename-dialog.html',
   styleUrl: './rename-dialog.scss'
 })
diff --git a/wordkeep-client/src/app/components/sort-dropdown/sort-dropdown.html b/wordkeep-client/src/app/components/sort-dropdown/sort-dropdown.html
index 998c99f..189cca3 100644
--- a/wordkeep-client/src/app/components/sort-dropdown/sort-dropdown.html
+++ b/wordkeep-client/src/app/components/sort-dropdown/sort-dropdown.html
@@ -1,12 +1,12 @@
-<label class="sort-dropdown">
-  <span class="sort-label">Sort:</span>
+<label class="sort-dropdown" *transloco="let t; read: 'shared'">
+  <span class="sort-label">{{ t('sort.label') }}</span>
   <select
     class="sort-select"
     [ngModel]="serialize(value())"
     (ngModelChange)="onChange($event)"
   >
-    @for (choice of choices; track choice.label) {
-      <option [value]="serialize(choice.value)">{{ choice.label }}</option>
+    @for (choice of choices; track choice.labelKey) {
+      <option [value]="serialize(choice.value)">{{ t(choice.labelKey) }}</option>
     }
   </select>
 </label>
diff --git a/wordkeep-client/src/app/components/sort-dropdown/sort-dropdown.spec.ts b/wordkeep-client/src/app/components/sort-dropdown/sort-dropdown.spec.ts
index b05de11..8a27fbf 100644
--- a/wordkeep-client/src/app/components/sort-dropdown/sort-dropdown.spec.ts
+++ b/wordkeep-client/src/app/components/sort-dropdown/sort-dropdown.spec.ts
@@ -2,6 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { describe, it, expect, beforeEach } from 'vitest';
 import { SortDropdownComponent } from './sort-dropdown';
 import { SortOptions } from '../../models/document.model';
+import { getTranslocoTestingModule } from '../../transloco/transloco-testing';
 
 describe('SortDropdownComponent', () => {
   let component: SortDropdownComponent;
@@ -9,7 +10,7 @@ describe('SortDropdownComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [SortDropdownComponent]
+      imports: [SortDropdownComponent, getTranslocoTestingModule()]
     }).compileComponents();
 
     fixture = TestBed.createComponent(SortDropdownComponent);
diff --git a/wordkeep-client/src/app/components/sort-dropdown/sort-dropdown.ts b/wordkeep-client/src/app/components/sort-dropdown/sort-dropdown.ts
index eebcb4d..540bfd4 100644
--- a/wordkeep-client/src/app/components/sort-dropdown/sort-dropdown.ts
+++ b/wordkeep-client/src/app/components/sort-dropdown/sort-dropdown.ts
@@ -1,17 +1,19 @@
 import { Component, input, output } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
+import { provideTranslocoScope, TranslocoDirective } from '@jsverse/transloco';
 import { SortOptions } from '../../models/document.model';
 
 interface SortChoice {
-  label: string;
+  labelKey: string;
   value: SortOptions;
 }
 
 @Component({
   selector: 'app-sort-dropdown',
   standalone: true,
-  imports: [CommonModule, FormsModule],
+  imports: [CommonModule, FormsModule, TranslocoDirective],
+  providers: [provideTranslocoScope('shared')],
   templateUrl: './sort-dropdown.html',
   styleUrl: './sort-dropdown.scss'
 })
@@ -20,9 +22,9 @@ export class SortDropdownComponent {
   valueChange = output<SortOptions>();
 
   choices: SortChoice[] = [
-    { label: 'Last modified', value: { sort: 'updated_at', dir: 'desc' } },
-    { label: 'Title (A→Z)',   value: { sort: 'title', dir: 'asc' } },
-    { label: 'Title (Z→A)',   value: { sort: 'title', dir: 'desc' } },
+    { labelKey: 'sort.lastModified', value: { sort: 'updated_at', dir: 'desc' } },
+    { labelKey: 'sort.titleAsc',     value: { sort: 'title', dir: 'asc' } },
+    { labelKey: 'sort.titleDesc',    value: { sort: 'title', dir: 'desc' } },
   ];
 
   serialize(opts: SortOptions): string {
diff --git a/wordkeep-client/src/app/components/spell-check-popup/spell-check-popup.component.html b/wordkeep-client/src/app/components/spell-check-popup/spell-check-popup.component.html
index 2b606bb..c98d897 100644
--- a/wordkeep-client/src/app/components/spell-check-popup/spell-check-popup.component.html
+++ b/wordkeep-client/src/app/components/spell-check-popup/spell-check-popup.component.html
@@ -3,6 +3,7 @@
     class="spell-popup"
     [style.left.px]="posX()"
     [style.top.px]="posY()"
+    *transloco="let t; read: 'shared'"
   >
     <div class="spell-popup-header">
       <span class="misspelled-word">{{ d.word }}</span>
@@ -19,16 +20,16 @@
       </ul>
       @if (!expanded() && d.suggestions.length > 4) {
         <button class="btn-show-more" (click)="showMore()">
-          show {{ d.suggestions.length - 4 }} more
+          {{ t('spellCheck.showMore', { n: d.suggestions.length - 4 }) }}
         </button>
       }
     } @else {
-      <p class="no-suggestions">No suggestions</p>
+      <p class="no-suggestions">{{ t('spellCheck.noSuggestions') }}</p>
     }
 
     <div class="spell-popup-actions">
-      <button class="btn-ignore" (click)="ignore()">Ignore</button>
-      <button class="btn-add" (click)="addToDictionary()">Add to dictionary</button>
+      <button class="btn-ignore" (click)="ignore()">{{ t('spellCheck.ignore') }}</button>
+      <button class="btn-add" (click)="addToDictionary()">{{ t('spellCheck.addToDictionary') }}</button>
     </div>
   </div>
 }
diff --git a/wordkeep-client/src/app/components/spell-check-popup/spell-check-popup.component.ts b/wordkeep-client/src/app/components/spell-check-popup/spell-check-popup.component.ts
index 2d7e99f..c24909c 100644
--- a/wordkeep-client/src/app/components/spell-check-popup/spell-check-popup.component.ts
+++ b/wordkeep-client/src/app/components/spell-check-popup/spell-check-popup.component.ts
@@ -1,5 +1,6 @@
 import { Component, signal, HostListener } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { provideTranslocoScope, TranslocoDirective } from '@jsverse/transloco';
 
 export interface SpellCheckPopupData {
   word: string;
@@ -16,7 +17,8 @@ export interface SpellCheckPopupData {
 @Component({
   selector: 'app-spell-check-popup',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, TranslocoDirective],
+  providers: [provideTranslocoScope('shared')],
   templateUrl: './spell-check-popup.component.html',
   styleUrl: './spell-check-popup.component.scss'
 })
diff --git a/wordkeep-client/src/app/components/user-menu-dropdown/user-menu-dropdown.html b/wordkeep-client/src/app/components/user-menu-dropdown/user-menu-dropdown.html
index fee8eed..879bd6c 100644
--- a/wordkeep-client/src/app/components/user-menu-dropdown/user-menu-dropdown.html
+++ b/wordkeep-client/src/app/components/user-menu-dropdown/user-menu-dropdown.html
@@ -17,14 +17,14 @@
       <circle cx="12" cy="8" r="4" stroke="currentColor" stroke-width="2"/>
       <path d="M4 20c0-4 3.6-7 8-7s8 3 8 7" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
     </svg>
-    Profile Info
+    {{ 'userMenu.profileInfo' | transloco }}
   </a>
   <a routerLink="/profile/security" class="dropdown-item" (click)="closeMenu()">
     <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
       <rect x="3" y="11" width="18" height="11" rx="2" stroke="currentColor" stroke-width="2"/>
       <path d="M7 11V7a5 5 0 0 1 10 0v4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
     </svg>
-    Account Security
+    {{ 'userMenu.accountSecurity' | transloco }}
   </a>
   <a routerLink="/profile/personalisation" class="dropdown-item" (click)="closeMenu()">
     <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -33,22 +33,39 @@
       <circle cx="13.5" cy="17.5" r="2.5" stroke="currentColor" stroke-width="2"/>
       <circle cx="19"   cy="11.5" r="1.6" stroke="currentColor" stroke-width="2"/>
     </svg>
-    Personalisation
+    {{ 'userMenu.personalisation' | transloco }}
   </a>
   <a routerLink="/dictionary" class="dropdown-item" (click)="closeMenu()">
     <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
       <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" stroke="currentColor" stroke-width="2"/>
     </svg>
-    My Dictionary
+    {{ 'userMenu.dictionary' | transloco }}
   </a>
   <div class="dropdown-divider"></div>
+  <div class="dropdown-language" role="group" [attr.aria-label]="'language.switch' | transloco">
+    <span class="dropdown-language__label">{{ 'language.label' | transloco }}</span>
+    <div class="dropdown-language__options">
+      @for (l of locales; track l) {
+        <button
+          type="button"
+          class="dropdown-language__option"
+          [class.active]="prefs.locale() === l"
+          (click)="setLocale(l)"
+          [attr.aria-pressed]="prefs.locale() === l"
+        >
+          {{ 'language.' + l | transloco }}
+        </button>
+      }
+    </div>
+  </div>
+  <div class="dropdown-divider"></div>
   <button class="dropdown-item logout-item" (click)="logout()">
     <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
       <polyline points="16,17 21,12 16,7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
       <line x1="21" y1="12" x2="9" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
     </svg>
-    Logout
+    {{ 'userMenu.logout' | transloco }}
   </button>
 </div>
diff --git a/wordkeep-client/src/app/components/user-menu-dropdown/user-menu-dropdown.scss b/wordkeep-client/src/app/components/user-menu-dropdown/user-menu-dropdown.scss
index b31d9e0..b5baaa2 100644
--- a/wordkeep-client/src/app/components/user-menu-dropdown/user-menu-dropdown.scss
+++ b/wordkeep-client/src/app/components/user-menu-dropdown/user-menu-dropdown.scss
@@ -111,6 +111,56 @@
   }
 }
 
+.dropdown-language {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+}
+
+.dropdown-language__label {
+  font-family: var(--font-body);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--color-fg-muted);
+}
+
+.dropdown-language__options {
+  display: inline-flex;
+  border: 1px solid var(--color-rule);
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+}
+
+.dropdown-language__option {
+  padding: 0.25rem 0.625rem;
+  background: transparent;
+  border: none;
+  color: var(--color-fg-muted);
+  font-family: var(--font-body);
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  cursor: pointer;
+  transition: background-color var(--dur-fast) var(--ease-out),
+              color var(--dur-fast) var(--ease-out);
+
+  & + & {
+    border-left: 1px solid var(--color-rule);
+  }
+
+  &:hover {
+    background: var(--color-accent-soft);
+    color: var(--color-fg);
+  }
+
+  &.active {
+    background: var(--color-accent);
+    color: var(--color-bg);
+  }
+}
+
 .logout-item {
   color: var(--color-danger);
   svg { color: var(--color-danger); }
diff --git a/wordkeep-client/src/app/components/user-menu-dropdown/user-menu-dropdown.spec.ts b/wordkeep-client/src/app/components/user-menu-dropdown/user-menu-dropdown.spec.ts
index 2e930f9..155384b 100644
--- a/wordkeep-client/src/app/components/user-menu-dropdown/user-menu-dropdown.spec.ts
+++ b/wordkeep-client/src/app/components/user-menu-dropdown/user-menu-dropdown.spec.ts
@@ -4,6 +4,8 @@ import { of } from 'rxjs';
 import { describe, it, expect, beforeEach, vi } from 'vitest';
 import { UserMenuDropdownComponent } from './user-menu-dropdown';
 import { AuthService } from '../../services/auth.service';
+import { UserPreferencesService } from '../../services/user-preferences.service';
+import { getTranslocoTestingModule } from '../../transloco/transloco-testing';
 
 describe('UserMenuDropdownComponent', () => {
   let component: UserMenuDropdownComponent;
@@ -14,6 +16,7 @@ describe('UserMenuDropdownComponent', () => {
     user: ReturnType<typeof vi.fn>;
     authenticated: ReturnType<typeof vi.fn>;
   };
+  let mockPrefs: { locale: () => string; setLocale: ReturnType<typeof vi.fn> };
 
   beforeEach(async () => {
     mockAuthService = {
@@ -22,12 +25,14 @@ describe('UserMenuDropdownComponent', () => {
       user: vi.fn().mockReturnValue(null),
       authenticated: vi.fn().mockReturnValue(true),
     };
+    mockPrefs = { locale: () => 'en', setLocale: vi.fn() };
 
     await TestBed.configureTestingModule({
-      imports: [UserMenuDropdownComponent],
+      imports: [UserMenuDropdownComponent, getTranslocoTestingModule()],
       providers: [
         provideRouter([]),
         { provide: AuthService, useValue: mockAuthService },
+        { provide: UserPreferencesService, useValue: mockPrefs },
       ],
     }).compileComponents();
 
diff --git a/wordkeep-client/src/app/components/user-menu-dropdown/user-menu-dropdown.ts b/wordkeep-client/src/app/components/user-menu-dropdown/user-menu-dropdown.ts
index 2fba41b..c616fa9 100644
--- a/wordkeep-client/src/app/components/user-menu-dropdown/user-menu-dropdown.ts
+++ b/wordkeep-client/src/app/components/user-menu-dropdown/user-menu-dropdown.ts
@@ -1,21 +1,28 @@
 import { Component, inject, output } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterLink } from '@angular/router';
+import { TranslocoPipe } from '@jsverse/transloco';
 import { AuthService } from '../../services/auth.service';
+import { UserPreferencesService, Locale } from '../../services/user-preferences.service';
 
 @Component({
   selector: 'app-user-menu-dropdown',
   standalone: true,
-  imports: [CommonModule, RouterLink],
+  imports: [CommonModule, RouterLink, TranslocoPipe],
   templateUrl: './user-menu-dropdown.html',
   styleUrl: './user-menu-dropdown.scss'
 })
 export class UserMenuDropdownComponent {
   authService = inject(AuthService);
+  prefs = inject(UserPreferencesService);
   closed = output<void>();
 
+  readonly locales: ReadonlyArray<Locale> = ['en', 'ro'];
+
   closeMenu(): void { this.closed.emit(); }
 
+  setLocale(l: Locale): void { this.prefs.setLocale(l); }
+
   logout(): void {
     this.authService.logout().subscribe();
     this.closed.emit();
diff --git a/wordkeep-client/src/app/interceptors/auth.interceptor.spec.ts b/wordkeep-client/src/app/interceptors/auth.interceptor.spec.ts
index 917210a..092935b 100644
--- a/wordkeep-client/src/app/interceptors/auth.interceptor.spec.ts
+++ b/wordkeep-client/src/app/interceptors/auth.interceptor.spec.ts
@@ -10,7 +10,7 @@ import { setupLocalStorageMock, createMockRouter } from '../test-utils';
 describe('authInterceptor', () => {
   let httpClient: HttpClient;
   let httpMock: HttpTestingController;
-  let mockAuthService: { getToken: ReturnType<typeof vi.fn> };
+  let mockAuthService: { getToken: ReturnType<typeof vi.fn>; authenticated: ReturnType<typeof vi.fn> };
   let mockRouter: ReturnType<typeof createMockRouter>;
   let localStorageMock: ReturnType<typeof setupLocalStorageMock>;
 
@@ -18,7 +18,8 @@ describe('authInterceptor', () => {
     localStorageMock = setupLocalStorageMock();
     mockRouter = createMockRouter();
     mockAuthService = {
-      getToken: vi.fn()
+      getToken: vi.fn(),
+      authenticated: vi.fn().mockReturnValue(false),
     };
 
     TestBed.configureTestingModule({
@@ -72,6 +73,27 @@ describe('authInterceptor', () => {
       expect(req.request.headers.get('Accept')).toBe('application/json');
       req.flush({});
     });
+
+    it('should_add_accept_language_from_active_locale', () => {
+      localStorageMock.setItem('wk:locale', 'ro');
+      mockAuthService.getToken.mockReturnValue(null);
+
+      httpClient.get('/api/test').subscribe();
+
+      const req = httpMock.expectOne('/api/test');
+      expect(req.request.headers.get('Accept-Language')).toBe('ro');
+      req.flush({});
+    });
+
+    it('should_default_accept_language_to_en', () => {
+      mockAuthService.getToken.mockReturnValue(null);
+
+      httpClient.get('/api/test').subscribe();
+
+      const req = httpMock.expectOne('/api/test');
+      expect(req.request.headers.get('Accept-Language')).toBe('en');
+      req.flush({});
+    });
   });
 
   // ==================== 401 Handling Tests ====================
diff --git a/wordkeep-client/src/app/interceptors/auth.interceptor.ts b/wordkeep-client/src/app/interceptors/auth.interceptor.ts
index 22f9853..099da4d 100644
--- a/wordkeep-client/src/app/interceptors/auth.interceptor.ts
+++ b/wordkeep-client/src/app/interceptors/auth.interceptor.ts
@@ -3,26 +3,24 @@ import { inject } from '@angular/core';
 import { Router } from '@angular/router';
 import { catchError, throwError } from 'rxjs';
 import { AuthService } from '../services/auth.service';
+import { UserPreferencesService } from '../services/user-preferences.service';
 
 export const authInterceptor: HttpInterceptorFn = (req, next) => {
   const authService = inject(AuthService);
   const router = inject(Router);
   const token = authService.getToken();
+  // Read the active locale from the in-memory signal (never from Transloco,
+  // which may not be initialised yet) so the backend localizes its responses.
+  const locale = inject(UserPreferencesService).locale();
 
+  const headers: Record<string, string> = {
+    Accept: 'application/json',
+    'Accept-Language': locale,
+  };
   if (token) {
-    req = req.clone({
-      setHeaders: {
-        Authorization: `Bearer ${token}`,
-        Accept: 'application/json'
-      }
-    });
-  } else {
-    req = req.clone({
-      setHeaders: {
-        Accept: 'application/json'
-      }
-    });
+    headers['Authorization'] = `Bearer ${token}`;
   }
+  req = req.clone({ setHeaders: headers });
 
   return next(req).pipe(
     catchError((error: HttpErrorResponse) => {
diff --git a/wordkeep-client/src/app/pages/book-view-reader/book-view-reader.html b/wordkeep-client/src/app/pages/book-view-reader/book-view-reader.html
index cfc4bc0..a43a294 100644
--- a/wordkeep-client/src/app/pages/book-view-reader/book-view-reader.html
+++ b/wordkeep-client/src/app/pages/book-view-reader/book-view-reader.html
@@ -1,10 +1,11 @@
 <app-layout>
+  <ng-container *transloco="let t; read: 'bookView'">
   <div class="book-reader-container">
 
     @if (loading()) {
       <div class="loading-state">
         <div class="spinner"></div>
-        <p>Loading document...</p>
+        <p>{{ t('reader.loading') }}</p>
       </div>
     } @else if (document(); as doc) {
 
@@ -14,7 +15,7 @@
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
             <path fill-rule="evenodd" d="M17 10a.75.75 0 01-.75.75H5.612l4.158 3.96a.75.75 0 11-1.04 1.08l-5.5-5.25a.75.75 0 010-1.08l5.5-5.25a.75.75 0 111.04 1.08L5.612 9.25H16.25A.75.75 0 0117 10z" clip-rule="evenodd" />
           </svg>
-          Document View
+          {{ t('reader.documentView') }}
         </a>
 
         <div class="header-center">
@@ -25,12 +26,12 @@ <h1 class="doc-title">{{ doc.effective_filename }}</h1>
           <!-- Language dropdown -->
           @if (availableLanguages().length === 0) {
             <select class="language-select" disabled>
-              <option value="">No language set</option>
+              <option value="">{{ t('reader.noLanguageSet') }}</option>
             </select>
           } @else {
             <select class="language-select" [ngModel]="selectedLanguage()" (ngModelChange)="onLanguageChange($event)">
               @for (lang of availableLanguages(); track lang.code) {
-                <option [value]="lang.code">{{ lang.name }}</option>
+                <option [value]="lang.code">{{ getLanguageName(lang.code) }}</option>
               }
             </select>
           }
@@ -39,27 +40,27 @@ <h1 class="doc-title">{{ doc.effective_filename }}</h1>
           <button class="btn-export" [disabled]="exporting() || loadingPages()" (click)="exportMarkdown()">
             @if (exporting()) {
               <div class="spinner-sm"></div>
-              Exporting...
+              {{ t('reader.exporting') }}
             } @else {
               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
               </svg>
-              Export .md
+              {{ t('reader.exportMd') }}
             }
           </button>
 
           <!-- 1/2-page toggle -->
-          <button class="btn-mode-toggle" (click)="togglePageMode()" [title]="twoPageMode() ? 'Switch to single page' : 'Switch to two pages'">
+          <button class="btn-mode-toggle" (click)="togglePageMode()" [title]="twoPageMode() ? t('reader.switchToSinglePage') : t('reader.switchToTwoPages')">
             @if (twoPageMode()) {
               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12" />
               </svg>
-              1 page
+              {{ t('reader.onePage') }}
             } @else {
               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M9 4.5v15m6-15v15m-10.875 0h15.75c.621 0 1.125-.504 1.125-1.125V5.625c0-.621-.504-1.125-1.125-1.125H4.125C3.504 4.5 3 5.004 3 5.625v12.75c0 .621.504 1.125 1.125 1.125z" />
               </svg>
-              2 pages
+              {{ t('reader.twoPages') }}
             }
           </button>
         </div>
@@ -79,11 +80,11 @@ <h1 class="doc-title">{{ doc.effective_filename }}</h1>
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
             <path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clip-rule="evenodd" />
           </svg>
-          Prev
+          {{ t('reader.prev') }}
         </button>
 
         <div class="page-indicator">
-          <span class="page-label-text">Page</span>
+          <span class="page-label-text">{{ t('reader.page') }}</span>
           <input
             type="number"
             class="page-input"
@@ -92,11 +93,11 @@ <h1 class="doc-title">{{ doc.effective_filename }}</h1>
             [max]="totalVirtualPages()"
             (change)="goToPage(+$any($event.target).value)"
           >
-          <span class="page-label-text">of {{ totalVirtualPages() }}</span>
+          <span class="page-label-text">{{ t('reader.pageOf', { total: totalVirtualPages() }) }}</span>
         </div>
 
         <button class="btn-nav" [disabled]="!canGoNext()" (click)="nextPage()">
-          Next
+          {{ t('reader.next') }}
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
             <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
           </svg>
@@ -104,23 +105,23 @@ <h1 class="doc-title">{{ doc.effective_filename }}</h1>
 
         <div class="nav-separator"></div>
 
-        <button class="btn-font" (click)="decreaseFontSize()" [disabled]="fontSize() <= 0.7" title="Decrease font size">A−</button>
+        <button class="btn-font" (click)="decreaseFontSize()" [disabled]="fontSize() <= 0.7" [title]="t('reader.decreaseFontSize')">A−</button>
         <span class="font-size-label">{{ (fontSize() * 100).toFixed(0) }}%</span>
-        <button class="btn-font" (click)="increaseFontSize()" [disabled]="fontSize() >= 1.6" title="Increase font size">A+</button>
+        <button class="btn-font" (click)="increaseFontSize()" [disabled]="fontSize() >= 1.6" [title]="t('reader.increaseFontSize')">A+</button>
       </div>
 
       <!-- Pages area -->
       @if (loadingPages()) {
         <div class="pages-loading">
           <div class="spinner"></div>
-          <p>Loading content...</p>
+          <p>{{ t('reader.loadingContent') }}</p>
         </div>
       } @else {
         <div class="pages-container" [class.single-page]="!twoPageMode()" (click)="onContentClick($event)">
 
           <!-- Left panel -->
           <div class="page-panel">
-            <div class="page-panel-label">Page {{ currentPage() }} of {{ totalVirtualPages() }}</div>
+            <div class="page-panel-label">{{ t('reader.pagePanelLabel', { current: currentPage(), total: totalVirtualPages() }) }}</div>
             <div class="page-body" [style.height.px]="PAGE_HEIGHT">
               <div class="page-viewport" [style.height.px]="leftHeight()">
                 <div class="page-inner"
@@ -137,7 +138,7 @@ <h1 class="doc-title">{{ doc.effective_filename }}</h1>
           @if (twoPageMode()) {
             <div class="page-panel">
               @if (hasRightPage()) {
-                <div class="page-panel-label">Page {{ currentPage() + 1 }} of {{ totalVirtualPages() }}</div>
+                <div class="page-panel-label">{{ t('reader.pagePanelLabel', { current: currentPage() + 1, total: totalVirtualPages() }) }}</div>
                 <div class="page-body" [style.height.px]="PAGE_HEIGHT">
                   <div class="page-viewport" [style.height.px]="rightHeight()">
                     <div class="page-inner"
@@ -153,7 +154,7 @@ <h1 class="doc-title">{{ doc.effective_filename }}</h1>
                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                       <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                     </svg>
-                    <span>End of document</span>
+                    <span>{{ t('reader.endOfDocument') }}</span>
                   </div>
                 </div>
               }
@@ -166,7 +167,7 @@ <h1 class="doc-title">{{ doc.effective_filename }}</h1>
     } @else if (error()) {
       <div class="error-state">
         <p>{{ error() }}</p>
-        <a routerLink="/book-view" class="back-link">Back to Document View</a>
+        <a routerLink="/book-view" class="back-link">{{ t('reader.backToDocumentView') }}</a>
       </div>
     }
 
@@ -187,4 +188,5 @@ <h1 class="doc-title">{{ doc.effective_filename }}</h1>
       <div class="fn-tooltip-body" [innerHTML]="activeFootnoteHtml()"></div>
     </div>
   }
+  </ng-container>
 </app-layout>
diff --git a/wordkeep-client/src/app/pages/book-view-reader/book-view-reader.spec.ts b/wordkeep-client/src/app/pages/book-view-reader/book-view-reader.spec.ts
index 7946825..86c281e 100644
--- a/wordkeep-client/src/app/pages/book-view-reader/book-view-reader.spec.ts
+++ b/wordkeep-client/src/app/pages/book-view-reader/book-view-reader.spec.ts
@@ -6,6 +6,7 @@ import { BookViewReaderComponent } from './book-view-reader';
 import { DocumentService } from '../../services/document.service';
 import { BookViewService } from '../../services/book-view.service';
 import { AuthService } from '../../services/auth.service';
+import { getTranslocoTestingModule } from '../../transloco/transloco-testing';
 import { mockBookViewDocument, mockBookViewPages } from '../../test-utils';
 import { Footnote } from '../../models/document.model';
 
@@ -53,7 +54,7 @@ describe('BookViewReaderComponent', () => {
 
     TestBed.resetTestingModule();
     TestBed.configureTestingModule({
-      imports: [BookViewReaderComponent],
+      imports: [BookViewReaderComponent, getTranslocoTestingModule()],
       providers: [
         provideRouter([]),
         { provide: DocumentService, useValue: mockDocumentService },
diff --git a/wordkeep-client/src/app/pages/book-view-reader/book-view-reader.ts b/wordkeep-client/src/app/pages/book-view-reader/book-view-reader.ts
index 74abbba..109c2b3 100644
--- a/wordkeep-client/src/app/pages/book-view-reader/book-view-reader.ts
+++ b/wordkeep-client/src/app/pages/book-view-reader/book-view-reader.ts
@@ -2,6 +2,7 @@ import { Component, OnInit, ElementRef, ViewChild, inject, signal, computed, eff
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { ActivatedRoute, RouterLink } from '@angular/router';
+import { provideTranslocoScope, TranslocoDirective, TranslocoService } from '@jsverse/transloco';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { marked } from 'marked';
 import { DocumentService } from '../../services/document.service';
@@ -23,9 +24,10 @@ const LANGUAGES: Record<string, string> = {
 @Component({
   selector: 'app-book-view-reader',
   standalone: true,
-  imports: [CommonModule, FormsModule, RouterLink, LayoutComponent],
+  imports: [CommonModule, FormsModule, RouterLink, LayoutComponent, TranslocoDirective],
   templateUrl: './book-view-reader.html',
-  styleUrl: './book-view-reader.scss'
+  styleUrl: './book-view-reader.scss',
+  providers: [provideTranslocoScope('bookView')]
 })
 export class BookViewReaderComponent implements OnInit {
   private route = inject(ActivatedRoute);
@@ -33,6 +35,7 @@ export class BookViewReaderComponent implements OnInit {
   private bookViewService = inject(BookViewService);
   private confirmationService = inject(ConfirmationService);
   private sanitizer = inject(DomSanitizer);
+  private transloco = inject(TranslocoService);
 
   @ViewChild('contentInner') contentInner!: ElementRef<HTMLDivElement>;
   private _savedElement: HTMLElement | null = null;
@@ -81,10 +84,10 @@ export class BookViewReaderComponent implements OnInit {
     if (!fn) return this.sanitizer.bypassSecurityTrustHtml('');
     const fnWithTrans = fn as FootnoteWithTranslation;
     const text = fnWithTrans.translated_text !== undefined
-      ? (fnWithTrans.translated_text ?? '*No translation available.*')
+      ? (fnWithTrans.translated_text ?? this.transloco.translate('bookView.reader.noTranslationAvailable'))
       : fn.text;
     return this.sanitizer.bypassSecurityTrustHtml(
-      marked.parse(text, { async: false }) as string
+      marked.parse(text ?? '', { async: false }) as string
     );
   });
 
@@ -180,7 +183,7 @@ export class BookViewReaderComponent implements OnInit {
         this.loadFootnotes(id, isTranslation ? lang : undefined);
       },
       error: () => {
-        this.error.set('Failed to load document');
+        this.error.set(this.transloco.translate('bookView.reader.loadError'));
         this.loading.set(false);
       }
     });
@@ -209,7 +212,7 @@ export class BookViewReaderComponent implements OnInit {
         this.loadingPages.set(false);
       },
       error: () => {
-        this.error.set('Failed to load page content');
+        this.error.set(this.transloco.translate('bookView.reader.loadPagesError'));
         this.loadingPages.set(false);
       }
     });
@@ -225,10 +228,14 @@ export class BookViewReaderComponent implements OnInit {
       const t = doc.translation_summaries?.find(s => s.target_language === lang);
       if (t && t.status !== 'completed') {
         const confirmed = await this.confirmationService.confirm({
-          title: 'Incomplete translation',
-          message: `The translation to ${LANGUAGES[lang] ?? lang} is not complete (${t.pages_completed}/${t.pages_total} pages). Untranslated pages will show as placeholders.`,
-          confirmText: 'View anyway',
-          cancelText: 'Cancel',
+          title: this.transloco.translate('bookView.reader.incompleteTranslationTitle'),
+          message: this.transloco.translate('bookView.reader.incompleteTranslationMessage', {
+            language: this.getLanguageName(lang),
+            completed: t.pages_completed,
+            total: t.pages_total,
+          }),
+          confirmText: this.transloco.translate('bookView.reader.viewAnyway'),
+          cancelText: this.transloco.translate('bookView.reader.cancel'),
         });
         if (!confirmed) {
           this.selectedLanguage.set(doc.main_language);
@@ -397,7 +404,9 @@ export class BookViewReaderComponent implements OnInit {
   }
 
   getLanguageName(code: string | null): string {
-    if (!code) return 'No language';
-    return LANGUAGES[code] ?? code;
+    if (!code) return this.transloco.translate('bookView.reader.noLanguageSet');
+    const key = `languages.${code}`;
+    const name = this.transloco.translate(key);
+    return name === key ? code : name;
   }
 }
diff --git a/wordkeep-client/src/app/pages/book-view/book-view.html b/wordkeep-client/src/app/pages/book-view/book-view.html
index 1520787..52621fb 100644
--- a/wordkeep-client/src/app/pages/book-view/book-view.html
+++ b/wordkeep-client/src/app/pages/book-view/book-view.html
@@ -1,9 +1,9 @@
 <app-layout>
-<div class="book-view-container" (click)="closeExportDropdown()">
+<div class="book-view-container" (click)="closeExportDropdown()" *transloco="let t; read: 'bookView'">
   <header class="page-header">
     <div class="header-content">
-      <h1>Document View</h1>
-      <p>Read your documents as assembled text or export as Markdown.</p>
+      <h1>{{ t('list.title') }}</h1>
+      <p>{{ t('list.subtitle') }}</p>
     </div>
   </header>
 
@@ -25,10 +25,10 @@ <h1>Document View</h1>
   <!-- Documents List -->
   <div class="documents-section">
     <div class="section-header">
-      <h2>Your Documents</h2>
+      <h2>{{ t('list.yourDocuments') }}</h2>
       <div class="header-actions">
         @if (total() > 0) {
-          <span class="doc-count">{{ total() }} document{{ total() === 1 ? '' : 's' }}</span>
+          <span class="doc-count">{{ t('list.documentCount', { count: total() }) }}</span>
         }
         <app-sort-dropdown [value]="sort()" (valueChange)="onSortChange($event)"></app-sort-dropdown>
       </div>
@@ -37,7 +37,7 @@ <h2>Your Documents</h2>
     @if (loading()) {
       <div class="loading-state">
         <div class="spinner"></div>
-        <p>Loading documents...</p>
+        <p>{{ t('list.loading') }}</p>
       </div>
     } @else if (documents().length === 0) {
       <div class="empty-state">
@@ -46,8 +46,8 @@ <h2>Your Documents</h2>
             <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
           </svg>
         </div>
-        <h3>No documents ready</h3>
-        <p>Only ready documents appear here</p>
+        <h3>{{ t('list.emptyTitle') }}</h3>
+        <p>{{ t('list.emptySubtitle') }}</p>
       </div>
     } @else {
       <div class="documents-grid">
@@ -63,11 +63,11 @@ <h3>No documents ready</h3>
               <div class="doc-name-row">
                 <h3 class="doc-name">{{ doc.effective_filename }}</h3>
                 @if (doc.has_custom_name) {
-                  <span class="renamed-badge" [title]="'Original: ' + doc.original_filename">renamed</span>
+                  <span class="renamed-badge" [title]="t('list.originalName', { name: doc.original_filename })">{{ t('list.renamed') }}</span>
                 }
               </div>
               <div class="doc-meta">
-                <span>{{ doc.page_count }} page{{ doc.page_count === 1 ? '' : 's' }}</span>
+                <span>{{ t('list.pageCount', { count: doc.page_count }) }}</span>
                 <span class="separator">•</span>
                 <span>{{ formatFileSize(doc.file_size) }}</span>
                 <span class="separator">•</span>
@@ -79,7 +79,7 @@ <h3 class="doc-name">{{ doc.effective_filename }}</h3>
                     <div class="progress-bar">
                       <div class="progress-fill" [style.width.%]="doc.ocr_progress.percent"></div>
                     </div>
-                    <span class="progress-text">{{ doc.ocr_progress.completed }}/{{ doc.ocr_progress.total }} extracted ({{ doc.ocr_progress.percent }}%)</span>
+                    <span class="progress-text">{{ t('list.extracted', { completed: doc.ocr_progress.completed, total: doc.ocr_progress.total, percent: doc.ocr_progress.percent }) }}</span>
                   </div>
                 }
                 @if (doc.links_progress && doc.page_count > 1) {
@@ -87,7 +87,7 @@ <h3 class="doc-name">{{ doc.effective_filename }}</h3>
                     <div class="progress-bar">
                       <div class="progress-fill links" [style.width.%]="doc.links_progress.percent"></div>
                     </div>
-                    <span class="progress-text">{{ doc.links_progress.completed }}/{{ doc.links_progress.total }} linked ({{ doc.links_progress.percent }}%)</span>
+                    <span class="progress-text">{{ t('list.linked', { completed: doc.links_progress.completed, total: doc.links_progress.total, percent: doc.links_progress.percent }) }}</span>
                   </div>
                 }
               </div>
@@ -97,16 +97,16 @@ <h3 class="doc-name">{{ doc.effective_filename }}</h3>
               @if (getAvailableLanguages(doc).length > 0) {
                 <select class="language-select" [value]="getSelectedLanguage(doc)" (change)="setSelectedLanguage(doc, $any($event.target).value)">
                   @for (lang of getAvailableLanguages(doc); track lang.code) {
-                    <option [value]="lang.code">{{ lang.name }}</option>
+                    <option [value]="lang.code">{{ getLanguageName(lang.code) }}</option>
                   }
                 </select>
               } @else if (doc.language_detection_status === 'pending' || doc.language_detection_status === 'processing') {
                 <select class="language-select" disabled>
-                  <option value="">Detecting...</option>
+                  <option value="">{{ t('list.detecting') }}</option>
                 </select>
               } @else {
                 <select class="language-select" disabled>
-                  <option value="">No language set</option>
+                  <option value="">{{ t('list.noLanguageSet') }}</option>
                 </select>
               }
 
@@ -115,7 +115,7 @@ <h3 class="doc-name">{{ doc.effective_filename }}</h3>
                   <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.641 0-8.573-3.007-9.964-7.178z" />
                   <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                 </svg>
-                View
+                {{ t('list.view') }}
               </button>
 
               <div class="export-wrapper">
@@ -126,12 +126,12 @@ <h3 class="doc-name">{{ doc.effective_filename }}</h3>
                 >
                   @if (isExporting(doc.id)) {
                     <div class="btn-spinner"></div>
-                    Exporting...
+                    {{ t('list.exporting') }}
                   } @else {
                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                       <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
                     </svg>
-                    Export
+                    {{ t('list.export') }}
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="chevron">
                       <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
                     </svg>
@@ -143,7 +143,7 @@ <h3 class="doc-name">{{ doc.effective_filename }}</h3>
                       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
                       </svg>
-                      .md (Markdown)
+                      {{ t('list.exportMd') }}
                     </button>
                   </div>
                 }
@@ -160,11 +160,11 @@ <h3 class="doc-name">{{ doc.effective_filename }}</h3>
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
               <path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clip-rule="evenodd" />
             </svg>
-            Previous
+            {{ t('list.previous') }}
           </button>
-          <span class="page-info">Page {{ currentPage() }} of {{ lastPage() }}</span>
+          <span class="page-info">{{ t('list.pageOf', { current: currentPage(), total: lastPage() }) }}</span>
           <button class="btn-page" [disabled]="currentPage() === lastPage()" (click)="goToPage(currentPage() + 1)">
-            Next
+            {{ t('list.next') }}
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
               <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
             </svg>
diff --git a/wordkeep-client/src/app/pages/book-view/book-view.spec.ts b/wordkeep-client/src/app/pages/book-view/book-view.spec.ts
index 1693389..2682f7e 100644
--- a/wordkeep-client/src/app/pages/book-view/book-view.spec.ts
+++ b/wordkeep-client/src/app/pages/book-view/book-view.spec.ts
@@ -10,6 +10,7 @@ import { AuthService } from '../../services/auth.service';
 import { ConfirmationService } from '../../services/confirmation.service';
 import { UserViewStatesService } from '../../services/user-view-states.service';
 import { SortOptions } from '../../models/document.model';
+import { getTranslocoTestingModule } from '../../transloco/transloco-testing';
 import { mockBookViewDocument, mockBookViewPages } from '../../test-utils';
 
 const mockPaginated = {
@@ -58,7 +59,7 @@ describe('BookViewComponent', () => {
 
     TestBed.resetTestingModule();
     TestBed.configureTestingModule({
-      imports: [BookViewComponent],
+      imports: [BookViewComponent, getTranslocoTestingModule()],
       providers: [
         provideRouter([]),
         { provide: DocumentService, useValue: mockDocumentService },
diff --git a/wordkeep-client/src/app/pages/book-view/book-view.ts b/wordkeep-client/src/app/pages/book-view/book-view.ts
index dffb6aa..df2aa60 100644
--- a/wordkeep-client/src/app/pages/book-view/book-view.ts
+++ b/wordkeep-client/src/app/pages/book-view/book-view.ts
@@ -2,7 +2,9 @@ import { Component, OnInit, OnDestroy, inject, signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { Router } from '@angular/router';
+import { provideTranslocoScope, TranslocoDirective, TranslocoService } from '@jsverse/transloco';
 import { forkJoin, interval, Subscription } from 'rxjs';
+import { formatDateTime } from '../../utils/date-format';
 import { DocumentService } from '../../services/document.service';
 import { BookViewService } from '../../services/book-view.service';
 import { ConfirmationService } from '../../services/confirmation.service';
@@ -15,9 +17,10 @@ import { UserViewStatesService } from '../../services/user-view-states.service';
 @Component({
   selector: 'app-book-view',
   standalone: true,
-  imports: [CommonModule, FormsModule, LayoutComponent, SortDropdownComponent],
+  imports: [CommonModule, FormsModule, LayoutComponent, SortDropdownComponent, TranslocoDirective],
   templateUrl: './book-view.html',
-  styleUrl: './book-view.scss'
+  styleUrl: './book-view.scss',
+  providers: [provideTranslocoScope('bookView')]
 })
 export class BookViewComponent implements OnInit, OnDestroy {
   private documentService = inject(DocumentService);
@@ -25,6 +28,7 @@ export class BookViewComponent implements OnInit, OnDestroy {
   private confirmationService = inject(ConfirmationService);
   private router = inject(Router);
   private viewStates = inject(UserViewStatesService);
+  private transloco = inject(TranslocoService);
 
   documents = signal<Document[]>([]);
   loading = signal(true);
@@ -66,7 +70,7 @@ export class BookViewComponent implements OnInit, OnDestroy {
         this.checkAndStartPolling();
       },
       error: () => {
-        this.error.set('Failed to load documents');
+        this.error.set(this.transloco.translate('bookView.list.loadError'));
         this.loading.set(false);
       }
     });
@@ -108,8 +112,10 @@ export class BookViewComponent implements OnInit, OnDestroy {
   }
 
   getLanguageName(code: string | null): string {
-    if (!code) return 'No language set';
-    return LANGUAGES[code] ?? code;
+    if (!code) return this.transloco.translate('bookView.list.noLanguageSet');
+    const key = `languages.${code}`;
+    const name = this.transloco.translate(key);
+    return name === key ? code : name;
   }
 
   getSelectedLanguage(doc: Document): string {
@@ -151,9 +157,9 @@ export class BookViewComponent implements OnInit, OnDestroy {
     const inc = this.isIncomplete(doc);
     if (inc.ocr || inc.links || inc.trans) {
       const confirmed = await this.confirmationService.confirm({
-        title: 'Work incomplete',
+        title: this.transloco.translate('bookView.list.workIncompleteTitle'),
         message: this.buildIncompleteMessage(inc),
-        confirmText: 'View anyway',
+        confirmText: this.transloco.translate('bookView.list.viewAnyway'),
       });
       if (!confirmed) return;
     }
@@ -174,9 +180,9 @@ export class BookViewComponent implements OnInit, OnDestroy {
     const inc = this.isIncomplete(doc);
     if (inc.ocr || inc.links) {
       const confirmed = await this.confirmationService.confirm({
-        title: 'Work incomplete',
+        title: this.transloco.translate('bookView.list.workIncompleteTitle'),
         message: this.buildIncompleteMessage(inc),
-        confirmText: 'Export anyway',
+        confirmText: this.transloco.translate('bookView.list.exportAnyway'),
       });
       if (!confirmed) return;
     }
@@ -199,7 +205,7 @@ export class BookViewComponent implements OnInit, OnDestroy {
         this.exportingDocs.delete(doc.id);
       },
       error: () => {
-        this.error.set('Failed to export document');
+        this.error.set(this.transloco.translate('bookView.list.exportError'));
         this.exportingDocs.delete(doc.id);
       }
     });
@@ -215,10 +221,12 @@ export class BookViewComponent implements OnInit, OnDestroy {
 
   private buildIncompleteMessage(inc: { ocr: boolean; links: boolean; trans: boolean }): string {
     const issues: string[] = [];
-    if (inc.ocr) issues.push('text extraction is not complete for all pages');
-    if (inc.links) issues.push('page linking is not complete');
-    if (inc.trans) issues.push('translation is incomplete — untranslated pages will show as placeholders');
-    return `This document has issues: ${issues.join(' and ')}. Missing text will show as placeholders and missing links will default to new row.`;
+    if (inc.ocr) issues.push(this.transloco.translate('bookView.list.issueOcr'));
+    if (inc.links) issues.push(this.transloco.translate('bookView.list.issueLinks'));
+    if (inc.trans) issues.push(this.transloco.translate('bookView.list.issueTrans'));
+    return this.transloco.translate('bookView.list.incompleteMessage', {
+      issues: issues.join(this.transloco.translate('bookView.list.issuesJoiner')),
+    });
   }
 
   formatFileSize(bytes: number): string {
@@ -230,9 +238,6 @@ export class BookViewComponent implements OnInit, OnDestroy {
   }
 
   formatDate(dateString: string): string {
-    return new Date(dateString).toLocaleDateString('en-US', {
-      year: 'numeric', month: 'short', day: 'numeric',
-      hour: '2-digit', minute: '2-digit'
-    });
+    return formatDateTime(dateString, this.transloco.getActiveLang());
   }
 }
diff --git a/wordkeep-client/src/app/pages/dictionary/dictionary.html b/wordkeep-client/src/app/pages/dictionary/dictionary.html
index 9cd88c5..4168ed6 100644
--- a/wordkeep-client/src/app/pages/dictionary/dictionary.html
+++ b/wordkeep-client/src/app/pages/dictionary/dictionary.html
@@ -1,8 +1,8 @@
-<app-layout>
+<app-layout *transloco="let t; read: 'dictionary'">
   <div class="dictionary-container">
     <div class="page-header">
-      <h1>My Dictionary</h1>
-      <p>Custom words recognised by the spell checker.</p>
+      <h1>{{ t('header.title') }}</h1>
+      <p>{{ t('header.subtitle') }}</p>
     </div>
 
     <div class="add-section">
@@ -12,7 +12,7 @@ <h1>My Dictionary</h1>
           class="add-input"
           [(ngModel)]="newWord"
           name="newWord"
-          placeholder="Add a word…"
+          [placeholder]="t('form.placeholder')"
           [disabled]="adding()"
           autocomplete="off"
           autocorrect="off"
@@ -34,7 +34,7 @@ <h1>My Dictionary</h1>
           @if (adding()) {
             <span class="spinner-small"></span>
           } @else {
-            Add
+            {{ t('form.add') }}
           }
         </button>
       </form>
@@ -46,7 +46,7 @@ <h1>My Dictionary</h1>
     <div class="words-section">
       @if (words().length === 0) {
         <div class="empty-state">
-          <p>No custom words yet. Add words above to skip spell-check errors for them.</p>
+          <p>{{ t('emptyState') }}</p>
         </div>
       } @else {
         <ul class="word-list">
@@ -58,7 +58,7 @@ <h1>My Dictionary</h1>
                 class="btn-delete"
                 (click)="removeWord(entry)"
                 [disabled]="deletingId() === entry.id"
-                title="Remove"
+                [title]="t('remove')"
               >
                 @if (deletingId() === entry.id) {
                   <span class="spinner-small"></span>
diff --git a/wordkeep-client/src/app/pages/dictionary/dictionary.scss b/wordkeep-client/src/app/pages/dictionary/dictionary.scss
index da649b0..e4c1ff8 100644
--- a/wordkeep-client/src/app/pages/dictionary/dictionary.scss
+++ b/wordkeep-client/src/app/pages/dictionary/dictionary.scss
@@ -147,7 +147,7 @@
 
 .word-item {
   display: flex;
-  align-items: baseline;
+  align-items: center;
   justify-content: space-between;
   gap: 0.75rem;
   padding: 1rem 1.25rem;
diff --git a/wordkeep-client/src/app/pages/dictionary/dictionary.spec.ts b/wordkeep-client/src/app/pages/dictionary/dictionary.spec.ts
index 18f4ab3..2d3f377 100644
--- a/wordkeep-client/src/app/pages/dictionary/dictionary.spec.ts
+++ b/wordkeep-client/src/app/pages/dictionary/dictionary.spec.ts
@@ -8,6 +8,7 @@ import { UserDictionaryService, DictionaryWord } from '../../services/user-dicti
 import { SpellCheckService } from '../../services/spell-check.service';
 import { mockDictionaryWord } from '../../test-utils';
 import { provideRouter } from '@angular/router';
+import { getTranslocoTestingModule } from '../../transloco/transloco-testing';
 
 // Stub <app-layout> to avoid AuthService/router deps
 @Component({ selector: 'app-layout', standalone: true, template: '<ng-content />' })
@@ -40,7 +41,7 @@ describe('DictionaryComponent', () => {
     };
 
     TestBed.configureTestingModule({
-      imports: [DictionaryComponent],
+      imports: [DictionaryComponent, getTranslocoTestingModule()],
       providers: [
         provideRouter([]),
         { provide: UserDictionaryService, useValue: mockDictService },
diff --git a/wordkeep-client/src/app/pages/dictionary/dictionary.ts b/wordkeep-client/src/app/pages/dictionary/dictionary.ts
index f079a7a..635cbcb 100644
--- a/wordkeep-client/src/app/pages/dictionary/dictionary.ts
+++ b/wordkeep-client/src/app/pages/dictionary/dictionary.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit, inject, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { provideTranslocoScope, TranslocoDirective, TranslocoService } from '@jsverse/transloco';
 import { LayoutComponent } from '../../components/layout/layout';
 import { UserDictionaryService, DictionaryWord } from '../../services/user-dictionary.service';
 import { SpellCheckService } from '../../services/spell-check.service';
@@ -7,13 +8,15 @@ import { SpellCheckService } from '../../services/spell-check.service';
 @Component({
   selector: 'app-dictionary',
   standalone: true,
-  imports: [LayoutComponent, FormsModule],
+  imports: [LayoutComponent, FormsModule, TranslocoDirective],
+  providers: [provideTranslocoScope('dictionary')],
   templateUrl: './dictionary.html',
   styleUrl: './dictionary.scss',
 })
 export class DictionaryComponent implements OnInit {
   private dictService = inject(UserDictionaryService);
   private spellService = inject(SpellCheckService);
+  private transloco = inject(TranslocoService);
 
   readonly words = this.dictService.words;
 
@@ -42,7 +45,7 @@ export class DictionaryComponent implements OnInit {
         this.adding.set(false);
       },
       error: () => {
-        this.addError.set('Failed to add word. Please try again.');
+        this.addError.set(this.transloco.translate('dictionary.errors.addFailed'));
         this.adding.set(false);
       },
     });
diff --git a/wordkeep-client/src/app/pages/document-detail/document-detail.html b/wordkeep-client/src/app/pages/document-detail/document-detail.html
index 8b5c28c..2350ccb 100644
--- a/wordkeep-client/src/app/pages/document-detail/document-detail.html
+++ b/wordkeep-client/src/app/pages/document-detail/document-detail.html
@@ -1,9 +1,9 @@
 <app-layout>
-<div class="detail-container">
+<div class="detail-container" *transloco="let t; read: 'documents'">
   @if (loading()) {
     <div class="loading-state">
       <div class="spinner"></div>
-      <p>Loading document...</p>
+      <p>{{ t('detail.loading') }}</p>
     </div>
   } @else if (error() && !document()) {
     <div class="error-state">
@@ -12,9 +12,9 @@
           <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
         </svg>
       </div>
-      <h2>Document not found</h2>
+      <h2>{{ t('detail.notFound.title') }}</h2>
       <p>{{ error() }}</p>
-      <a routerLink="/documents" class="btn-back">Back to Documents</a>
+      <a routerLink="/documents" class="btn-back">{{ t('detail.notFound.back') }}</a>
     </div>
   } @else if (document(); as doc) {
     <!-- Header -->
@@ -23,9 +23,9 @@ <h2>Document not found</h2>
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
           <path fill-rule="evenodd" d="M17 10a.75.75 0 01-.75.75H5.612l4.158 3.96a.75.75 0 11-1.04 1.08l-5.5-5.25a.75.75 0 010-1.08l5.5-5.25a.75.75 0 111.04 1.08L5.612 9.25H16.25A.75.75 0 0117 10z" clip-rule="evenodd" />
         </svg>
-        Back to Documents
+        {{ t('detail.backToDocuments') }}
       </a>
-      <h1>Document Details</h1>
+      <h1>{{ t('detail.title') }}</h1>
     </header>
 
     <!-- Error Banner -->
@@ -53,7 +53,7 @@ <h1>Document Details</h1>
               <div class="spinner"></div>
             </div>
           } @else if (coverImageUrl()) {
-            <img [src]="coverImageUrl()" alt="Document cover" class="cover-image">
+            <img [src]="coverImageUrl()" [alt]="t('detail.cover.alt')" class="cover-image">
           } @else {
             <div class="cover-placeholder">
               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
@@ -66,21 +66,21 @@ <h1>Document Details</h1>
           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
             <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" />
           </svg>
-          Open Text Extraction
+          {{ t('detail.actions.openExtraction') }}
         </a>
         @if (doc.page_count > 1) {
           <a [routerLink]="['/page-linking', doc.id]" class="btn-open-reader">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
               <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
             </svg>
-            Open Page Linking
+            {{ t('detail.actions.openPageLinking') }}
           </a>
         }
         <a routerLink="/translation" class="btn-open-reader">
           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
             <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 21l5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 016-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 01-3.827-5.802" />
           </svg>
-          Open Translation
+          {{ t('detail.actions.openTranslation') }}
         </a>
         <div class="book-view-section">
           @if (doc.main_language || (doc.translation_summaries && doc.translation_summaries.length > 0)) {
@@ -99,17 +99,17 @@ <h1>Document Details</h1>
                 <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.641 0-8.573-3.007-9.964-7.178z" />
                 <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
               </svg>
-              View as Document
+              {{ t('detail.actions.viewAsDocument') }}
             </button>
             <button class="btn-open-reader btn-export-md" [disabled]="exportingBook()" (click)="exportBook()">
               @if (exportingBook()) {
                 <div class="btn-spinner-sm"></div>
-                Exporting...
+                {{ t('detail.actions.exporting') }}
               } @else {
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                   <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
                 </svg>
-                Export .md
+                {{ t('detail.actions.exportMd') }}
               }
             </button>
           </div>
@@ -122,68 +122,68 @@ <h1>Document Details</h1>
           <!-- Edit Form -->
           <div class="edit-form">
             <div class="form-group">
-              <label for="filename">Name</label>
+              <label for="filename">{{ t('detail.form.nameLabel') }}</label>
               <input
                 type="text"
                 id="filename"
                 [(ngModel)]="editForm.display_filename"
-                placeholder="Document name"
+                [placeholder]="t('detail.form.namePlaceholder')"
               >
               @if (doc.has_custom_name) {
-                <span class="original-name">Original: {{ doc.original_filename }}</span>
+                <span class="original-name">{{ t('detail.form.original', { name: doc.original_filename }) }}</span>
               }
             </div>
 
             <div class="form-group">
-              <label for="author">Author</label>
+              <label for="author">{{ t('detail.form.authorLabel') }}</label>
               <input
                 type="text"
                 id="author"
                 [(ngModel)]="editForm.author"
-                placeholder="Author name"
+                [placeholder]="t('detail.form.authorPlaceholder')"
               >
             </div>
 
             <div class="form-group">
-              <label for="genre">Genre</label>
+              <label for="genre">{{ t('detail.form.genreLabel') }}</label>
               <select id="genre" [(ngModel)]="editForm.genre">
-                <option value="">Select genre...</option>
+                <option value="">{{ t('detail.form.genrePlaceholder') }}</option>
                 @for (genre of genres; track genre) {
-                  <option [value]="genre">{{ genre }}</option>
+                  <option [value]="genre">{{ genreLabel(genre) }}</option>
                 }
               </select>
             </div>
 
             <div class="form-group">
-              <label for="language">Language <span class="info-icon-wrap"><span class="info-icon">ⓘ</span><span class="tooltip-box">Language is used for spell checking during text extraction</span></span></label>
+              <label for="language">{{ t('detail.form.languageLabel') }} <span class="info-icon-wrap"><span class="info-icon">ⓘ</span><span class="tooltip-box">{{ t('detail.form.languageTooltip') }}</span></span></label>
               <select id="language" [(ngModel)]="editForm.main_language">
-                <option value="">Not set</option>
+                <option value="">{{ t('detail.form.languageNotSet') }}</option>
                 @for (lang of languages; track lang.code) {
-                  <option [value]="lang.code">{{ lang.flag }} {{ lang.name }}</option>
+                  <option [value]="lang.code">{{ lang.flag }} {{ getLanguageDisplayName(lang.code) }}</option>
                 }
               </select>
             </div>
 
             <div class="form-group">
-              <label for="description">Description</label>
+              <label for="description">{{ t('detail.form.descriptionLabel') }}</label>
               <textarea
                 id="description"
                 [(ngModel)]="editForm.description"
-                placeholder="Add a description..."
+                [placeholder]="t('detail.form.descriptionPlaceholder')"
                 rows="4"
               ></textarea>
             </div>
 
             <div class="form-actions">
               <button class="btn-cancel" (click)="cancelEdit()" [disabled]="saving()">
-                Cancel
+                {{ t('detail.form.cancel') }}
               </button>
               <button class="btn-save" (click)="saveEdit()" [disabled]="saving()">
                 @if (saving()) {
                   <div class="btn-spinner"></div>
-                  Saving...
+                  {{ t('detail.form.saving') }}
                 } @else {
-                  Save Changes
+                  {{ t('detail.form.save') }}
                 }
               </button>
             </div>
@@ -194,69 +194,69 @@ <h1>Document Details</h1>
             <div class="metadata-header">
               <h2>{{ doc.effective_filename }}</h2>
               @if (doc.has_custom_name) {
-                <span class="renamed-badge" [title]="'Original: ' + doc.original_filename">renamed</span>
+                <span class="renamed-badge" [title]="t('detail.view.originalTitle', { name: doc.original_filename })">{{ t('detail.view.renamed') }}</span>
               }
             </div>
 
             <div class="metadata-grid">
               @if (doc.author) {
                 <div class="metadata-item">
-                  <span class="label">Author</span>
+                  <span class="label">{{ t('detail.view.author') }}</span>
                   <span class="value">{{ doc.author }}</span>
                 </div>
               }
 
               @if (doc.genre) {
                 <div class="metadata-item">
-                  <span class="label">Genre</span>
-                  <span class="value">{{ doc.genre }}</span>
+                  <span class="label">{{ t('detail.view.genre') }}</span>
+                  <span class="value">{{ genreLabel(doc.genre) }}</span>
                 </div>
               }
 
               <div class="metadata-item">
-                <span class="label">Pages</span>
+                <span class="label">{{ t('detail.view.pages') }}</span>
                 <span class="value">{{ doc.page_count }}</span>
               </div>
 
               <div class="metadata-item">
-                <span class="label">Size</span>
+                <span class="label">{{ t('detail.view.size') }}</span>
                 <span class="value">{{ formatFileSize(doc.file_size) }}</span>
               </div>
 
               <div class="metadata-item">
-                <span class="label">Format</span>
+                <span class="label">{{ t('detail.view.format') }}</span>
                 <span class="value">{{ getMimeTypeLabel(doc.mime_type) }}</span>
               </div>
 
               <div class="metadata-item">
-                <span class="label">Language <span class="info-icon-wrap"><span class="info-icon">ⓘ</span><span class="tooltip-box">Language is used for spell checking during text extraction</span></span></span>
+                <span class="label">{{ t('detail.view.language') }} <span class="info-icon-wrap"><span class="info-icon">ⓘ</span><span class="tooltip-box">{{ t('detail.view.languageTooltip') }}</span></span></span>
                 @if (doc.language_detection_status === 'failed') {
                   <span class="value language-failed">
-                    Detection failed
+                    {{ t('detail.view.detectionFailed') }}
                     <button class="btn-retry-lang" (click)="detectLanguage()" [disabled]="detectingLanguage()">
                       @if (detectingLanguage()) {
                         <div class="btn-spinner-sm"></div>
                       } @else {
-                        Retry
+                        {{ t('detail.view.retry') }}
                       }
                     </button>
                   </span>
                 } @else if (doc.language_detection_status === 'pending' || doc.language_detection_status === 'processing') {
-                  <span class="value language-detecting"><div class="btn-spinner-sm"></div> Detecting...</span>
+                  <span class="value language-detecting"><div class="btn-spinner-sm"></div> {{ t('detail.view.detecting') }}</span>
                 } @else {
                   <span class="value">{{ getLanguageDisplayName(doc.main_language) }}</span>
                 }
               </div>
 
               <div class="metadata-item">
-                <span class="label">Added</span>
+                <span class="label">{{ t('detail.view.added') }}</span>
                 <span class="value">{{ formatDate(doc.created_at) }}</span>
               </div>
             </div>
 
             @if (doc.description) {
               <div class="description-section">
-                <span class="label">Description</span>
+                <span class="label">{{ t('detail.view.description') }}</span>
                 <p class="description-text">{{ doc.description }}</p>
               </div>
             }
@@ -266,13 +266,13 @@ <h2>{{ doc.effective_filename }}</h2>
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                   <path d="M2.695 14.763l-1.262 3.154a.5.5 0 00.65.65l3.155-1.262a4 4 0 001.343-.885L17.5 5.5a2.121 2.121 0 00-3-3L3.58 13.42a4 4 0 00-.885 1.343z" />
                 </svg>
-                Edit
+                {{ t('detail.view.edit') }}
               </button>
               <button class="btn-delete" (click)="deleteDocument()">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                   <path fill-rule="evenodd" d="M8.75 1A2.75 2.75 0 006 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 10.23 1.482l.149-.022.841 10.518A2.75 2.75 0 007.596 19h4.807a2.75 2.75 0 002.742-2.53l.841-10.519.149.023a.75.75 0 00.23-1.482A41.03 41.03 0 0014 4.193V3.75A2.75 2.75 0 0011.25 1h-2.5zM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4zM8.58 7.72a.75.75 0 00-1.5.06l.3 7.5a.75.75 0 101.5-.06l-.3-7.5zm4.34.06a.75.75 0 10-1.5-.06l-.3 7.5a.75.75 0 101.5.06l.3-7.5z" clip-rule="evenodd" />
                 </svg>
-                Delete
+                {{ t('detail.view.delete') }}
               </button>
             </div>
           </div>
diff --git a/wordkeep-client/src/app/pages/document-detail/document-detail.spec.ts b/wordkeep-client/src/app/pages/document-detail/document-detail.spec.ts
index e3e0367..8a50055 100644
--- a/wordkeep-client/src/app/pages/document-detail/document-detail.spec.ts
+++ b/wordkeep-client/src/app/pages/document-detail/document-detail.spec.ts
@@ -7,6 +7,7 @@ import { DocumentService } from '../../services/document.service';
 import { AuthService } from '../../services/auth.service';
 import { ConfirmationService } from '../../services/confirmation.service';
 import { mockDocument, mockFailedDocument, mockLanguageDetectionResult } from '../../test-utils';
+import { getTranslocoTestingModule } from '../../transloco/transloco-testing';
 
 describe('DocumentDetailComponent', () => {
   let component: DocumentDetailComponent;
@@ -57,7 +58,7 @@ describe('DocumentDetailComponent', () => {
 
     TestBed.resetTestingModule();
     TestBed.configureTestingModule({
-      imports: [DocumentDetailComponent],
+      imports: [DocumentDetailComponent, getTranslocoTestingModule()],
       providers: [
         provideRouter([]),
         { provide: DocumentService, useValue: mockDocumentService },
diff --git a/wordkeep-client/src/app/pages/document-detail/document-detail.ts b/wordkeep-client/src/app/pages/document-detail/document-detail.ts
index 01e255d..6e57ebd 100644
--- a/wordkeep-client/src/app/pages/document-detail/document-detail.ts
+++ b/wordkeep-client/src/app/pages/document-detail/document-detail.ts
@@ -3,6 +3,8 @@ import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { interval, Subscription } from 'rxjs';
+import { provideTranslocoScope, TranslocoDirective, TranslocoService } from '@jsverse/transloco';
+import { formatDateTime } from '../../utils/date-format';
 import { DocumentService } from '../../services/document.service';
 import { BookViewService } from '../../services/book-view.service';
 import { ConfirmationService } from '../../services/confirmation.service';
@@ -12,7 +14,8 @@ import { LayoutComponent } from '../../components/layout/layout';
 @Component({
   selector: 'app-document-detail',
   standalone: true,
-  imports: [CommonModule, FormsModule, RouterLink, LayoutComponent],
+  imports: [CommonModule, FormsModule, RouterLink, LayoutComponent, TranslocoDirective],
+  providers: [provideTranslocoScope('documents')],
   templateUrl: './document-detail.html',
   styleUrl: './document-detail.scss'
 })
@@ -22,6 +25,7 @@ export class DocumentDetailComponent implements OnInit, OnDestroy {
   private documentService = inject(DocumentService);
   private bookViewService = inject(BookViewService);
   private confirmationService = inject(ConfirmationService);
+  private transloco = inject(TranslocoService);
 
   document = signal<Document | null>(null);
   loading = signal(true);
@@ -134,7 +138,7 @@ export class DocumentDetailComponent implements OnInit, OnDestroy {
         this.checkAndStartPolling();
       },
       error: () => {
-        this.error.set('Failed to load document');
+        this.error.set(this.transloco.translate('documents.detail.errors.load'));
         this.loading.set(false);
       }
     });
@@ -244,7 +248,7 @@ export class DocumentDetailComponent implements OnInit, OnDestroy {
         this.saving.set(false);
       },
       error: () => {
-        this.error.set('Failed to save changes');
+        this.error.set(this.transloco.translate('documents.detail.errors.save'));
         this.saving.set(false);
       }
     });
@@ -262,7 +266,7 @@ export class DocumentDetailComponent implements OnInit, OnDestroy {
         this.router.navigate(['/documents']);
       },
       error: () => {
-        this.error.set('Failed to delete document');
+        this.error.set(this.transloco.translate('documents.detail.errors.delete'));
       }
     });
   }
@@ -283,7 +287,7 @@ export class DocumentDetailComponent implements OnInit, OnDestroy {
         this.detectingLanguage.set(false);
       },
       error: () => {
-        this.error.set('Failed to detect language');
+        this.error.set(this.transloco.translate('documents.detail.errors.detect'));
         this.detectingLanguage.set(false);
       }
     });
@@ -317,7 +321,7 @@ export class DocumentDetailComponent implements OnInit, OnDestroy {
         this.exportingBook.set(false);
       },
       error: () => {
-        this.error.set('Failed to export document');
+        this.error.set(this.transloco.translate('documents.detail.errors.export'));
         this.exportingBook.set(false);
       }
     });
@@ -336,14 +340,28 @@ export class DocumentDetailComponent implements OnInit, OnDestroy {
 
     if (missingText > 0 || missingLinks > 0) {
       const issues: string[] = [];
-      if (missingText > 0) issues.push(`${missingText} page${missingText > 1 ? 's' : ''} without extracted text`);
-      if (missingLinks > 0) issues.push(`${missingLinks} unlinked page pair${missingLinks > 1 ? 's' : ''}`);
-      const message = `This document has: ${issues.join(' and ')}. Missing text will show as placeholders and missing links will default to new row.`;
+      if (missingText > 0) {
+        issues.push(this.transloco.translate(
+          missingText > 1 ? 'documents.detail.incomplete.missingTextPlural' : 'documents.detail.incomplete.missingText',
+          { count: missingText }
+        ));
+      }
+      if (missingLinks > 0) {
+        issues.push(this.transloco.translate(
+          missingLinks > 1 ? 'documents.detail.incomplete.missingLinksPlural' : 'documents.detail.incomplete.missingLinks',
+          { count: missingLinks }
+        ));
+      }
+      const message = this.transloco.translate('documents.detail.incomplete.message', {
+        issues: issues.join(this.transloco.translate('documents.detail.incomplete.joiner'))
+      });
 
       return this.confirmationService.confirm({
-        title: 'Work incomplete',
+        title: this.transloco.translate('documents.detail.incomplete.title'),
         message,
-        confirmText: action === 'view' ? 'View anyway' : 'Export anyway',
+        confirmText: this.transloco.translate(
+          action === 'view' ? 'documents.detail.incomplete.viewAnyway' : 'documents.detail.incomplete.exportAnyway'
+        ),
       });
     }
 
@@ -359,13 +377,7 @@ export class DocumentDetailComponent implements OnInit, OnDestroy {
   }
 
   formatDate(dateString: string): string {
-    return new Date(dateString).toLocaleDateString('en-US', {
-      year: 'numeric',
-      month: 'long',
-      day: 'numeric',
-      hour: '2-digit',
-      minute: '2-digit'
-    });
+    return formatDateTime(dateString, this.transloco.getActiveLang(), 'long');
   }
 
   getMimeTypeLabel(mimeType: string): string {
@@ -376,45 +388,17 @@ export class DocumentDetailComponent implements OnInit, OnDestroy {
   }
 
   getLanguageDisplayName(code: string | null): string {
-    if (!code) return 'Not detected';
-    const languages: Record<string, string> = {
-      en: 'English',
-      es: 'Spanish',
-      fr: 'French',
-      de: 'German',
-      it: 'Italian',
-      pt: 'Portuguese',
-      ru: 'Russian',
-      zh: 'Chinese',
-      ja: 'Japanese',
-      ko: 'Korean',
-      ar: 'Arabic',
-      hi: 'Hindi',
-      ro: 'Romanian',
-      nl: 'Dutch',
-      pl: 'Polish',
-      sv: 'Swedish',
-      da: 'Danish',
-      no: 'Norwegian',
-      fi: 'Finnish',
-      cs: 'Czech',
-      el: 'Greek',
-      tr: 'Turkish',
-      he: 'Hebrew',
-      th: 'Thai',
-      vi: 'Vietnamese',
-      id: 'Indonesian',
-      ms: 'Malay',
-      la: 'Latin',
-      uk: 'Ukrainian',
-      hu: 'Hungarian',
-      bg: 'Bulgarian',
-      hr: 'Croatian',
-      sk: 'Slovak',
-      sl: 'Slovenian',
-      sr: 'Serbian',
-      unknown: 'Unknown'
-    };
-    return languages[code] || code.toUpperCase();
+    if (!code) return this.transloco.translate('documents.detail.notDetected');
+    const key = `languages.${code}`;
+    const name = this.transloco.translate(key);
+    return name === key ? code.toUpperCase() : name;
+  }
+
+  /** Translated label for a stored (English) genre value; falls back to the value. */
+  genreLabel(value: string): string {
+    if (!value) return '';
+    const key = `documents.detail.genres.${value}`;
+    const label = this.transloco.translate(key);
+    return label === key ? value : label;
   }
 }
diff --git a/wordkeep-client/src/app/pages/documents/documents.html b/wordkeep-client/src/app/pages/documents/documents.html
index 61ab8fc..ac85aa4 100644
--- a/wordkeep-client/src/app/pages/documents/documents.html
+++ b/wordkeep-client/src/app/pages/documents/documents.html
@@ -1,9 +1,9 @@
 <app-layout>
-<div class="documents-container">
+<div class="documents-container" *transloco="let t; read: 'documents'">
   <header class="page-header">
     <div class="header-content">
-      <h1>Documents</h1>
-      <p>Upload and manage your PDF documents</p>
+      <h1>{{ t('list.title') }}</h1>
+      <p>{{ t('list.subtitle') }}</p>
     </div>
   </header>
 
@@ -19,7 +19,7 @@ <h1>Documents</h1>
     @if (uploading()) {
       <div class="upload-progress">
         <div class="spinner"></div>
-        <p>Uploading document...</p>
+        <p>{{ t('list.upload.uploading') }}</p>
       </div>
     } @else {
       <div class="upload-content">
@@ -28,12 +28,12 @@ <h1>Documents</h1>
             <path stroke-linecap="round" stroke-linejoin="round" d="M12 16.5V9.75m0 0l3 3m-3-3l-3 3M6.75 19.5a4.5 4.5 0 01-1.41-8.775 5.25 5.25 0 0110.233-2.33 3 3 0 013.758 3.848A3.752 3.752 0 0118 19.5H6.75z" />
           </svg>
         </div>
-        <p class="upload-text">Drag and drop a PDF file here, or</p>
+        <p class="upload-text">{{ t('list.upload.dragDrop') }}</p>
         <label class="btn-upload">
           <input type="file" accept=".pdf,application/pdf" (change)="onFileSelect($event)" hidden>
-          Browse Files
+          {{ t('list.upload.browse') }}
         </label>
-        <p class="upload-hint">Maximum file size: 100MB</p>
+        <p class="upload-hint">{{ t('list.upload.maxSize') }}</p>
       </div>
     }
   </div>
@@ -56,10 +56,10 @@ <h1>Documents</h1>
   <!-- Documents List -->
   <div class="documents-section">
     <div class="section-header">
-      <h2>Your Documents</h2>
+      <h2>{{ t('list.section.heading') }}</h2>
       <div class="header-actions">
         @if (total() > 0) {
-          <span class="doc-count">{{ total() }} document{{ total() === 1 ? '' : 's' }}</span>
+          <span class="doc-count">{{ total() === 1 ? t('list.section.count', { count: total() }) : t('list.section.countPlural', { count: total() }) }}</span>
         }
         <app-sort-dropdown [value]="sort()" (valueChange)="onSortChange($event)"></app-sort-dropdown>
       </div>
@@ -68,7 +68,7 @@ <h2>Your Documents</h2>
     @if (loading()) {
       <div class="loading-state">
         <div class="spinner"></div>
-        <p>Loading documents...</p>
+        <p>{{ t('list.loading') }}</p>
       </div>
     } @else if (documents().length === 0) {
       <div class="empty-state">
@@ -77,8 +77,8 @@ <h2>Your Documents</h2>
             <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
           </svg>
         </div>
-        <h3>No documents yet</h3>
-        <p>Upload your first PDF to get started</p>
+        <h3>{{ t('list.empty.title') }}</h3>
+        <p>{{ t('list.empty.subtitle') }}</p>
       </div>
     } @else {
       <div class="documents-grid">
@@ -100,7 +100,7 @@ <h3 class="doc-name">{{ doc.effective_filename }}</h3>
                   </div>
                   <div class="doc-footer">
                     <span class="doc-status status-failed">
-                      {{ doc.status }}
+                      {{ t('list.status.' + doc.status) }}
                     </span>
                   </div>
                   @if (doc.error_message) {
@@ -119,20 +119,20 @@ <h3 class="doc-name">{{ doc.effective_filename }}</h3>
                   <div class="doc-name-row">
                     <h3 class="doc-name">{{ doc.effective_filename }}</h3>
                     @if (doc.has_custom_name) {
-                      <span class="renamed-badge" [title]="'Original: ' + doc.original_filename">renamed</span>
+                      <span class="renamed-badge" [title]="t('list.card.originalTitle', { name: doc.original_filename })">{{ t('list.card.renamed') }}</span>
                     }
                   </div>
                   @if (doc.author) {
                     <div class="doc-author">{{ doc.author }}</div>
                   }
                   <div class="doc-meta">
-                    <span>{{ doc.page_count }} page{{ doc.page_count === 1 ? '' : 's' }}</span>
+                    <span>{{ doc.page_count === 1 ? t('list.card.page', { count: doc.page_count }) : t('list.card.pagePlural', { count: doc.page_count }) }}</span>
                     <span class="separator">•</span>
                     <span>{{ formatFileSize(doc.file_size) }}</span>
                   </div>
                   <div class="doc-footer">
                     <span class="doc-status" [class]="getStatusClass(doc.status)">
-                      {{ doc.status }}
+                      {{ t('list.status.' + doc.status) }}
                     </span>
                   </div>
                 </div>
@@ -143,7 +143,7 @@ <h3 class="doc-name">{{ doc.effective_filename }}</h3>
             }
             <div class="doc-actions">
               @if (doc.status === 'failed') {
-                <button class="btn-retry" (click)="retryDocument(doc, $event)" title="Retry processing" [disabled]="retryingDocId() === doc.id">
+                <button class="btn-retry" (click)="retryDocument(doc, $event)" [title]="t('list.card.retryTitle')" [disabled]="retryingDocId() === doc.id">
                   @if (retryingDocId() === doc.id) {
                     <div class="spinner-small"></div>
                   } @else {
@@ -153,12 +153,12 @@ <h3 class="doc-name">{{ doc.effective_filename }}</h3>
                   }
                 </button>
               }
-              <button class="btn-rename" (click)="renameDocument(doc, $event)" title="Rename document">
+              <button class="btn-rename" (click)="renameDocument(doc, $event)" [title]="t('list.card.renameTitle')">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                   <path d="M2.695 14.763l-1.262 3.154a.5.5 0 00.65.65l3.155-1.262a4 4 0 001.343-.885L17.5 5.5a2.121 2.121 0 00-3-3L3.58 13.42a4 4 0 00-.885 1.343z" />
                 </svg>
               </button>
-              <button class="btn-delete" (click)="deleteDocument(doc, $event)" title="Delete document">
+              <button class="btn-delete" (click)="deleteDocument(doc, $event)" [title]="t('list.card.deleteTitle')">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                   <path fill-rule="evenodd" d="M8.75 1A2.75 2.75 0 006 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 10.23 1.482l.149-.022.841 10.518A2.75 2.75 0 007.596 19h4.807a2.75 2.75 0 002.742-2.53l.841-10.519.149.023a.75.75 0 00.23-1.482A41.03 41.03 0 0014 4.193V3.75A2.75 2.75 0 0011.25 1h-2.5zM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4zM8.58 7.72a.75.75 0 00-1.5.06l.3 7.5a.75.75 0 101.5-.06l-.3-7.5zm4.34.06a.75.75 0 10-1.5-.06l-.3 7.5a.75.75 0 101.5.06l.3-7.5z" clip-rule="evenodd" />
                 </svg>
@@ -179,15 +179,15 @@ <h3 class="doc-name">{{ doc.effective_filename }}</h3>
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
               <path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clip-rule="evenodd" />
             </svg>
-            Previous
+            {{ t('list.pagination.previous') }}
           </button>
-          <span class="page-info">Page {{ currentPage() }} of {{ lastPage() }}</span>
+          <span class="page-info">{{ t('list.pagination.pageInfo', { current: currentPage(), last: lastPage() }) }}</span>
           <button
             class="btn-page"
             [disabled]="currentPage() === lastPage()"
             (click)="goToPage(currentPage() + 1)"
           >
-            Next
+            {{ t('list.pagination.next') }}
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
               <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
             </svg>
diff --git a/wordkeep-client/src/app/pages/documents/documents.spec.ts b/wordkeep-client/src/app/pages/documents/documents.spec.ts
index a36ec50..81ec858 100644
--- a/wordkeep-client/src/app/pages/documents/documents.spec.ts
+++ b/wordkeep-client/src/app/pages/documents/documents.spec.ts
@@ -8,6 +8,7 @@ import { AuthService } from '../../services/auth.service';
 import { ConfirmationService } from '../../services/confirmation.service';
 import { RenameService } from '../../services/rename.service';
 import { mockDocument, mockFailedDocument, mockPaginatedDocuments } from '../../test-utils';
+import { getTranslocoTestingModule } from '../../transloco/transloco-testing';
 
 describe('DocumentsComponent', () => {
   let component: DocumentsComponent;
@@ -56,7 +57,7 @@ describe('DocumentsComponent', () => {
     };
 
     await TestBed.configureTestingModule({
-      imports: [DocumentsComponent],
+      imports: [DocumentsComponent, getTranslocoTestingModule()],
       providers: [
         provideRouter([]),
         { provide: DocumentService, useValue: mockDocumentService },
@@ -482,7 +483,7 @@ describe('DocumentsComponent', () => {
       // Re-create the component so the constructor re-reads localStorage.
       TestBed.resetTestingModule();
       await TestBed.configureTestingModule({
-        imports: [DocumentsComponent],
+        imports: [DocumentsComponent, getTranslocoTestingModule()],
         providers: [
           provideRouter([]),
           { provide: DocumentService, useValue: mockDocumentService },
diff --git a/wordkeep-client/src/app/pages/documents/documents.ts b/wordkeep-client/src/app/pages/documents/documents.ts
index 5dc14ac..556f598 100644
--- a/wordkeep-client/src/app/pages/documents/documents.ts
+++ b/wordkeep-client/src/app/pages/documents/documents.ts
@@ -1,7 +1,9 @@
 import { Component, OnInit, inject, signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterLink } from '@angular/router';
+import { formatDateTime } from '../../utils/date-format';
 import { FormsModule } from '@angular/forms';
+import { provideTranslocoScope, TranslocoDirective, TranslocoService } from '@jsverse/transloco';
 import { DocumentService } from '../../services/document.service';
 import { ConfirmationService } from '../../services/confirmation.service';
 import { RenameService } from '../../services/rename.service';
@@ -13,7 +15,8 @@ import { UserViewStatesService } from '../../services/user-view-states.service';
 @Component({
   selector: 'app-documents',
   standalone: true,
-  imports: [CommonModule, RouterLink, FormsModule, LayoutComponent, SortDropdownComponent],
+  imports: [CommonModule, RouterLink, FormsModule, LayoutComponent, SortDropdownComponent, TranslocoDirective],
+  providers: [provideTranslocoScope('documents')],
   templateUrl: './documents.html',
   styleUrl: './documents.scss'
 })
@@ -22,6 +25,7 @@ export class DocumentsComponent implements OnInit {
   private confirmationService = inject(ConfirmationService);
   private renameService = inject(RenameService);
   private viewStates = inject(UserViewStatesService);
+  private transloco = inject(TranslocoService);
 
   documents = signal<Document[]>([]);
   loading = signal(true);
@@ -58,7 +62,7 @@ export class DocumentsComponent implements OnInit {
         this.loading.set(false);
       },
       error: () => {
-        this.error.set('Failed to load documents');
+        this.error.set(this.transloco.translate('documents.list.errors.load'));
         this.loading.set(false);
       }
     });
@@ -97,7 +101,7 @@ export class DocumentsComponent implements OnInit {
 
   uploadFile(file: File) {
     if (file.type !== 'application/pdf') {
-      this.error.set('Only PDF files are allowed');
+      this.error.set(this.transloco.translate('documents.list.errors.onlyPdf'));
       return;
     }
 
@@ -113,7 +117,7 @@ export class DocumentsComponent implements OnInit {
       },
       error: (err) => {
         this.uploading.set(false);
-        this.error.set(err.error?.message || 'Failed to upload document');
+        this.error.set(err.error?.message || this.transloco.translate('documents.list.errors.upload'));
       }
     });
   }
@@ -133,7 +137,7 @@ export class DocumentsComponent implements OnInit {
         this.retryingDocId.set(null);
       },
       error: () => {
-        this.error.set('Failed to retry document');
+        this.error.set(this.transloco.translate('documents.list.errors.retry'));
         this.retryingDocId.set(null);
       }
     });
@@ -151,7 +155,7 @@ export class DocumentsComponent implements OnInit {
         this.loadDocuments(this.currentPage());
       },
       error: () => {
-        this.error.set('Failed to delete document');
+        this.error.set(this.transloco.translate('documents.list.errors.delete'));
       }
     });
   }
@@ -177,7 +181,7 @@ export class DocumentsComponent implements OnInit {
         );
       },
       error: () => {
-        this.error.set('Failed to rename document');
+        this.error.set(this.transloco.translate('documents.list.errors.rename'));
       }
     });
   }
@@ -191,13 +195,7 @@ export class DocumentsComponent implements OnInit {
   }
 
   formatDate(dateString: string): string {
-    return new Date(dateString).toLocaleDateString('en-US', {
-      year: 'numeric',
-      month: 'short',
-      day: 'numeric',
-      hour: '2-digit',
-      minute: '2-digit'
-    });
+    return formatDateTime(dateString, this.transloco.getActiveLang());
   }
 
   getStatusClass(status: string): string {
diff --git a/wordkeep-client/src/app/pages/extraction-reader/extraction-reader.html b/wordkeep-client/src/app/pages/extraction-reader/extraction-reader.html
index 45cf871..17c54be 100644
--- a/wordkeep-client/src/app/pages/extraction-reader/extraction-reader.html
+++ b/wordkeep-client/src/app/pages/extraction-reader/extraction-reader.html
@@ -1,9 +1,10 @@
 <app-layout>
+<ng-container *transloco="let t; read: 'extraction.reader'">
 <div class="detail-container">
   @if (loading()) {
     <div class="loading-state">
       <div class="spinner"></div>
-      <p>Loading document...</p>
+      <p>{{ t('loading') }}</p>
     </div>
   } @else if (error() && !document()) {
     <div class="error-state">
@@ -12,9 +13,9 @@
           <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
         </svg>
       </div>
-      <h2>Document not found</h2>
+      <h2>{{ t('notFoundTitle') }}</h2>
       <p>{{ error() }}</p>
-      <a routerLink="/extraction" class="btn-back">Back to Text Extraction</a>
+      <a routerLink="/extraction" class="btn-back">{{ t('backToExtraction') }}</a>
     </div>
   } @else if (document(); as doc) {
     <!-- Header -->
@@ -23,26 +24,26 @@ <h2>Document not found</h2>
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
           <path fill-rule="evenodd" d="M17 10a.75.75 0 01-.75.75H5.612l4.158 3.96a.75.75 0 11-1.04 1.08l-5.5-5.25a.75.75 0 010-1.08l5.5-5.25a.75.75 0 111.04 1.08L5.612 9.25H16.25A.75.75 0 0117 10z" clip-rule="evenodd" />
         </svg>
-        Back to Text Extraction
+        {{ t('backToExtraction') }}
       </a>
       <div class="header-info">
         <div class="title-row">
           <h1>{{ doc.effective_filename }}</h1>
           @if (doc.has_custom_name) {
-            <span class="renamed-badge" [title]="'Original: ' + doc.original_filename">renamed</span>
+            <span class="renamed-badge" [title]="t('originalTitle', { name: doc.original_filename })">{{ t('renamed') }}</span>
           }
         </div>
         <div class="doc-meta">
-          <span>{{ doc.page_count }} pages</span>
+          <span>{{ t('pages', { count: doc.page_count }) }}</span>
           <span class="separator">•</span>
           <span>{{ formatFileSize(doc.file_size) }}</span>
           <span class="separator">•</span>
           @if (doc.language_detection_status === 'pending' || doc.language_detection_status === 'processing') {
-            <span class="language">Detecting...</span>
+            <span class="language">{{ t('detecting') }}</span>
           } @else {
             <span class="language">{{ getLanguageDisplayName(doc.main_language) }}</span>
           }
-          <span class="info-icon-wrap"><span class="info-icon">ⓘ</span><span class="tooltip-box">Language is used for spell checking during text extraction</span></span>
+          <span class="info-icon-wrap"><span class="info-icon">ⓘ</span><span class="tooltip-box">{{ t('languageInfo') }}</span></span>
         </div>
       </div>
       <div class="header-actions">
@@ -69,14 +70,14 @@ <h1>{{ doc.effective_filename }}</h1>
       <!-- Page Viewer -->
       <div class="viewer-panel">
         <div class="viewer-header">
-          <h2>Page {{ currentPage() }} of {{ doc.page_count }}</h2>
+          <h2>{{ t('pageHeader', { current: currentPage(), total: doc.page_count }) }}</h2>
           @if (loadingPageInfo()) {
             <span class="content-type-badge badge-loading">
               <div class="btn-spinner"></div>
             </span>
           } @else if (isCurrentPageIgnored()) {
-            <span class="content-type-badge badge-ignored" title="This page is ignored. It will not be included in the exported document.">
-              Ignored
+            <span class="content-type-badge badge-ignored" [title]="t('ignoredBadgeTitle')">
+              {{ t('ignoredBadge') }}
             </span>
           } @else if (currentContentType()) {
             <span
@@ -91,7 +92,7 @@ <h2>Page {{ currentPage() }} of {{ doc.page_count }}</h2>
             class="btn-ignore"
             [class.active]="isCurrentPageIgnored()"
             [disabled]="togglingIgnore()"
-            [title]="isCurrentPageIgnored() ? 'Un-ignore this page' : 'Ignore this page (exclude from exported document)'"
+            [title]="isCurrentPageIgnored() ? t('unignoreTitle') : t('ignoreTitle')"
             (click)="toggleIgnorePage()"
           >
             @if (togglingIgnore()) {
@@ -101,7 +102,7 @@ <h2>Page {{ currentPage() }} of {{ doc.page_count }}</h2>
                 <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" />
               </svg>
             }
-            {{ isCurrentPageIgnored() ? 'Un-ignore' : 'Ignore' }}
+            {{ isCurrentPageIgnored() ? t('unignore') : t('ignore') }}
           </button>
           <div class="page-nav">
             <button
@@ -131,18 +132,18 @@ <h2>Page {{ currentPage() }} of {{ doc.page_count }}</h2>
               </svg>
             </button>
           </div>
-          <button class="btn-nav btn-unprocessed" title="Go to first page with no text" (click)="goToFirstUnextracted()">
-            First Unprocessed
+          <button class="btn-nav btn-unprocessed" [title]="t('firstUnprocessedTitle')" (click)="goToFirstUnextracted()">
+            {{ t('firstUnprocessed') }}
           </button>
-          <button class="btn-nav btn-unprocessed" title="Go to next page with no text from current" (click)="goToNextUnextracted()">
-            Next Unprocessed
+          <button class="btn-nav btn-unprocessed" [title]="t('nextUnprocessedTitle')" (click)="goToNextUnextracted()">
+            {{ t('nextUnprocessed') }}
           </button>
         </div>
         <div class="page-image-container">
           @if (pageImageUrl()) {
             <img
               [src]="pageImageUrl()"
-              [alt]="'Page ' + currentPage()"
+              [alt]="t('pageAlt', { page: currentPage() })"
               class="page-image"
               [class.loading]="loadingImage()"
             >
@@ -152,16 +153,16 @@ <h2>Page {{ currentPage() }} of {{ doc.page_count }}</h2>
               </div>
             }
             @if (isCurrentPageIgnored()) {
-              <div class="ignored-overlay">Ignored</div>
+              <div class="ignored-overlay"><span class="ignored-overlay__badge">{{ t('ignoredBadge') }}</span></div>
             }
           } @else if (loadingImage()) {
             <div class="image-loading">
               <div class="spinner"></div>
-              <p>Loading page...</p>
+              <p>{{ t('loadingPage') }}</p>
             </div>
           } @else {
             <div class="image-error">
-              <p>Failed to load page image</p>
+              <p>{{ t('imageError') }}</p>
             </div>
           }
         </div>
@@ -171,7 +172,7 @@ <h2>Page {{ currentPage() }} of {{ doc.page_count }}</h2>
       <div class="ocr-panel">
         <div class="ocr-header">
           <div class="ocr-title">
-            <h2>Extracted Text</h2>
+            <h2>{{ t('extractedText') }}</h2>
             @if (currentOcr()?.extraction_method) {
               <span
                 class="extraction-method-badge"
@@ -189,7 +190,7 @@ <h2>Extracted Text</h2>
                   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                     <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
                   </svg>
-                  Edit
+                  {{ t('edit') }}
                 </button>
                 <button class="btn-clear" (click)="clearPageText()" [disabled]="clearing()">
                   @if (clearing()) {
@@ -199,7 +200,7 @@ <h2>Extracted Text</h2>
                       <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
                     </svg>
                   }
-                  Clear
+                  {{ t('clear') }}
                 </button>
               }
               <!-- Extract Text button (for text and hybrid pages) -->
@@ -211,12 +212,12 @@ <h2>Extracted Text</h2>
                 >
                   @if (isExtractingCurrentPage()) {
                     <div class="btn-spinner"></div>
-                    Extracting...
+                    {{ t('extracting') }}
                   } @else {
                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                       <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
                     </svg>
-                    Extract Text
+                    {{ t('extractText') }}
                   }
                 </button>
               }
@@ -228,17 +229,17 @@ <h2>Extracted Text</h2>
               >
                 @if (isProcessingCurrentPage()) {
                   <div class="btn-spinner"></div>
-                  Processing...
+                  {{ t('processing') }}
                 } @else if (currentOcr()?.ocr_status === 'completed') {
                   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                     <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
                   </svg>
-                  AI OCR
+                  {{ t('aiOcr') }}
                 } @else {
                   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                     <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 00-1.883 2.542l.857 6a2.25 2.25 0 002.227 1.932H19.05a2.25 2.25 0 002.227-1.932l.857-6a2.25 2.25 0 00-1.883-2.542m-16.5 0V6A2.25 2.25 0 016 3.75h3.879a1.5 1.5 0 011.06.44l2.122 2.12a1.5 1.5 0 001.06.44H18A2.25 2.25 0 0120.25 9v.776" />
                   </svg>
-                  AI OCR
+                  {{ t('aiOcr') }}
                 }
               </button>
               <!-- Transcribe button (when no text exists) -->
@@ -251,7 +252,7 @@ <h2>Extracted Text</h2>
                   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                     <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
                   </svg>
-                  Transcribe
+                  {{ t('transcribe') }}
                 </button>
               }
               } <!-- end @if (!isCurrentPageIgnored()) -->
@@ -280,17 +281,17 @@ <h2>Extracted Text</h2>
                 }
               </div>
               <button class="btn-cancel" (click)="cancelEdit()" [disabled]="saving()">
-                Cancel
+                {{ t('cancel') }}
               </button>
               <button class="btn-save" (click)="saveEdit()" [disabled]="saving()">
                 @if (saving()) {
                   <div class="btn-spinner"></div>
-                  Saving...
+                  {{ t('saving') }}
                 } @else {
                   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                     <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                   </svg>
-                  Save
+                  {{ t('save') }}
                 }
               </button>
             }
@@ -302,8 +303,8 @@ <h2>Extracted Text</h2>
               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" />
               </svg>
-              <p>This page is ignored</p>
-              <p class="hint">It will not appear in the exported document. Click "Un-ignore" to re-enable text extraction.</p>
+              <p>{{ t('ignoredHeading') }}</p>
+              <p class="hint">{{ t('ignoredHint') }}</p>
             </div>
           } @else if (editMode()) {
             <div class="editor-container">
@@ -312,45 +313,45 @@ <h2>Extracted Text</h2>
                 [editor]="editor"
                 [(ngModel)]="editorContent"
                 (ngModelChange)="onEditorContentChange()"
-                [placeholder]="'Enter text...'"
+                [placeholder]="t('editorPlaceholder')"
               ></ngx-editor>
             </div>
           } @else if (isProcessingCurrentPage()) {
             <div class="ocr-loading">
               <div class="spinner"></div>
-              <p>Processing page with AI OCR...</p>
-              <p class="hint">This may take a moment</p>
+              <p>{{ t('processingHeading') }}</p>
+              <p class="hint">{{ t('processingHint') }}</p>
             </div>
           } @else if (isExtractingCurrentPage()) {
             <div class="ocr-loading">
               <div class="spinner"></div>
-              <p>Extracting text from PDF...</p>
-              <p class="hint">This should be quick</p>
+              <p>{{ t('extractingHeading') }}</p>
+              <p class="hint">{{ t('extractingHint') }}</p>
             </div>
           } @else if (currentOcr()?.ocr_text) {
             <div class="ocr-text markdown-content" [innerHTML]="renderedOcrHtml()" (click)="onOcrTextClick($event)"></div>
             @if (currentOcr()?.cached) {
-              <div class="ocr-cached">Cached result</div>
+              <div class="ocr-cached">{{ t('cached') }}</div>
             }
           } @else if (currentOcr()?.ocr_status === 'failed') {
             <div class="ocr-error">
               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
               </svg>
-              <p>OCR processing failed</p>
+              <p>{{ t('ocrFailed') }}</p>
             </div>
           } @else {
             <div class="ocr-empty">
               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
               </svg>
-              <p>No text available</p>
-              <p class="hint">Use the buttons above or transcribe manually</p>
+              <p>{{ t('noText') }}</p>
+              <p class="hint">{{ t('noTextHint') }}</p>
               <button class="btn-transcribe-cta" (click)="enterManualTranscription()">
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                   <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
                 </svg>
-                Transcribe manually
+                {{ t('transcribeManually') }}
               </button>
             </div>
           }
@@ -359,7 +360,7 @@ <h2>Extracted Text</h2>
     <!-- Footnotes Panel -->
     <div class="footnotes-panel">
       <div class="footnotes-header">
-        <h2>Footnotes</h2>
+        <h2>{{ t('footnotes') }}</h2>
         <div class="footnote-nav">
           <button
             class="btn-nav"
@@ -379,7 +380,7 @@ <h2>Footnotes</h2>
             [disabled]="totalFootnotes() === 0 || isNewFootnote()"
             (change)="goToFootnoteByNumber(+$any($event.target).value)"
           >
-          <span class="footnote-counter">of {{ totalFootnotes() }}</span>
+          <span class="footnote-counter">{{ t('footnotesCounter', { total: totalFootnotes() }) }}</span>
           <button
             class="btn-nav"
             [disabled]="currentFootnoteIndex() === null || currentFootnoteIndex()! >= totalFootnotes() - 1 || isNewFootnote()"
@@ -397,7 +398,7 @@ <h2>Footnotes</h2>
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                   <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
                 </svg>
-                Edit
+                {{ t('edit') }}
               </button>
               @if (currentFootnote()?.page_number !== null && currentFootnote()?.page_number !== undefined) {
                 <button class="btn-clear" (click)="unlinkFootnote()" [disabled]="unlinkingFootnote()">
@@ -408,7 +409,7 @@ <h2>Footnotes</h2>
                       <path stroke-linecap="round" stroke-linejoin="round" d="M13.181 8.68a4.503 4.503 0 011.903 6.405m-9.768-2.782L3.56 14.06a4.5 4.5 0 006.364 6.365l3.129-3.129m5.614-5.615l1.757-1.757a4.5 4.5 0 00-6.364-6.365l-3.129 3.129m0 0a4.503 4.503 0 00-1.903 6.405" />
                     </svg>
                   }
-                  Unlink
+                  {{ t('unlink') }}
                 </button>
               }
               <button class="btn-clear" (click)="deleteFootnote()" [disabled]="deletingFootnote()">
@@ -419,28 +420,28 @@ <h2>Footnotes</h2>
                     <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
                   </svg>
                 }
-                Delete
+                {{ t('deleteFootnote') }}
               </button>
             }
             <button class="btn-secondary-sm" (click)="addNewFootnote()">
               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
               </svg>
-              Add Footnote
+              {{ t('addFootnote') }}
             </button>
           } @else {
             <button class="btn-cancel" (click)="cancelFootnoteEdit()" [disabled]="savingFootnote()">
-              Cancel
+              {{ t('cancel') }}
             </button>
             <button class="btn-save" (click)="saveFootnote()" [disabled]="savingFootnote()">
               @if (savingFootnote()) {
                 <div class="btn-spinner"></div>
-                Saving...
+                {{ t('saving') }}
               } @else {
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                   <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                 </svg>
-                Save
+                {{ t('save') }}
               }
             </button>
           }
@@ -450,7 +451,7 @@ <h2>Footnotes</h2>
         @if (loadingFootnotes()) {
           <div class="ocr-loading">
             <div class="spinner"></div>
-            <p>Loading footnotes...</p>
+            <p>{{ t('loadingFootnotes') }}</p>
           </div>
         } @else if (footnoteEditMode()) {
           <div class="editor-container">
@@ -458,7 +459,7 @@ <h2>Footnotes</h2>
             <ngx-editor
               [editor]="footnoteEditor"
               [(ngModel)]="footnoteEditorContent"
-              [placeholder]="'Enter footnote text...'"
+              [placeholder]="t('footnotePlaceholder')"
             ></ngx-editor>
           </div>
         } @else if (currentFootnote(); as fn) {
@@ -467,18 +468,18 @@ <h2>Footnotes</h2>
               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
               </svg>
-              <span>This footnote is on page {{ fn.page_number }}</span>
+              <span>{{ t('footnoteOnPage', { page: fn.page_number }) }}</span>
               <button class="btn-go-to-page" (click)="goToPage(fn.page_number!)">
-                Go to page {{ fn.page_number }}
+                {{ t('goToPage', { page: fn.page_number }) }}
               </button>
             </div>
           }
           <div class="footnote-display">
             <span class="fn-label">[^{{ fn.number }}]</span>
             @if (fn.page_number) {
-              <span class="fn-page-badge">Page {{ fn.page_number }}</span>
+              <span class="fn-page-badge">{{ t('footnotePageBadge', { page: fn.page_number }) }}</span>
             } @else {
-              <span class="fn-page-badge fn-unlinked">Unlinked</span>
+              <span class="fn-page-badge fn-unlinked">{{ t('footnoteUnlinked') }}</span>
             }
           </div>
           <div class="ocr-text markdown-content" [innerHTML]="renderedFootnoteHtml()"></div>
@@ -487,8 +488,8 @@ <h2>Footnotes</h2>
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
               <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.076-4.076a1.526 1.526 0 011.037-.443 48.282 48.282 0 005.68-.494c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z" />
             </svg>
-            <p>No footnotes yet</p>
-            <p class="hint">Click "Add Footnote" to create one</p>
+            <p>{{ t('noFootnotes') }}</p>
+            <p class="hint">{{ t('noFootnotesHint') }}</p>
           </div>
         }
       </div>
@@ -496,4 +497,5 @@ <h2>Footnotes</h2>
     </div>
   }
 </div>
+</ng-container>
 </app-layout>
diff --git a/wordkeep-client/src/app/pages/extraction-reader/extraction-reader.scss b/wordkeep-client/src/app/pages/extraction-reader/extraction-reader.scss
index 972a429..38c415b 100644
--- a/wordkeep-client/src/app/pages/extraction-reader/extraction-reader.scss
+++ b/wordkeep-client/src/app/pages/extraction-reader/extraction-reader.scss
@@ -412,13 +412,12 @@
   justify-content: center;
   pointer-events: none;
   border-radius: 4px;
-  font-size: 0;
 
-  &::after {
-    content: 'IGNORED';
+  &__badge {
     font-size: 0.875rem;
     font-weight: 700;
     letter-spacing: 0.1em;
+    text-transform: uppercase;
     padding: 0.25rem 0.75rem;
     background: var(--color-fg-muted);
     color: var(--color-surface-2);
diff --git a/wordkeep-client/src/app/pages/extraction-reader/extraction-reader.spec.ts b/wordkeep-client/src/app/pages/extraction-reader/extraction-reader.spec.ts
index 5349b49..d921595 100644
--- a/wordkeep-client/src/app/pages/extraction-reader/extraction-reader.spec.ts
+++ b/wordkeep-client/src/app/pages/extraction-reader/extraction-reader.spec.ts
@@ -8,6 +8,7 @@ import { AuthService } from '../../services/auth.service';
 import { ConfirmationService } from '../../services/confirmation.service';
 import { mockDocument, mockFailedDocument, mockOcrResult, mockPageInfoText, mockPageInfoImage, mockPageInfoHybrid, mockTextExtractionResult, mockFootnote, mockLinkedFootnote } from '../../test-utils';
 import { Footnote } from '../../models/document.model';
+import { getTranslocoTestingModule } from '../../transloco/transloco-testing';
 
 describe('ExtractionReaderComponent', () => {
   let component: ExtractionReaderComponent;
@@ -81,7 +82,7 @@ describe('ExtractionReaderComponent', () => {
 
     TestBed.resetTestingModule();
     TestBed.configureTestingModule({
-      imports: [ExtractionReaderComponent],
+      imports: [ExtractionReaderComponent, getTranslocoTestingModule()],
       providers: [
         provideRouter([]),
         { provide: DocumentService, useValue: mockDocumentService },
diff --git a/wordkeep-client/src/app/pages/extraction-reader/extraction-reader.ts b/wordkeep-client/src/app/pages/extraction-reader/extraction-reader.ts
index 1980453..1c4396f 100644
--- a/wordkeep-client/src/app/pages/extraction-reader/extraction-reader.ts
+++ b/wordkeep-client/src/app/pages/extraction-reader/extraction-reader.ts
@@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { provideTranslocoScope, TranslocoDirective, TranslocoService } from '@jsverse/transloco';
 import { DocumentService, PageInfoResult } from '../../services/document.service';
 import { ConfirmationService } from '../../services/confirmation.service';
 import { SpellCheckService, NspellChecker } from '../../services/spell-check.service';
@@ -20,9 +21,10 @@ import TurndownService from 'turndown';
 @Component({
   selector: 'app-extraction-reader',
   standalone: true,
-  imports: [CommonModule, FormsModule, RouterLink, LayoutComponent, NgxEditorModule],
+  imports: [CommonModule, FormsModule, RouterLink, LayoutComponent, NgxEditorModule, TranslocoDirective],
   templateUrl: './extraction-reader.html',
-  styleUrl: './extraction-reader.scss'
+  styleUrl: './extraction-reader.scss',
+  providers: [provideTranslocoScope('extraction')]
 })
 export class ExtractionReaderComponent implements OnInit, OnDestroy {
   private route = inject(ActivatedRoute);
@@ -35,6 +37,7 @@ export class ExtractionReaderComponent implements OnInit, OnDestroy {
   private destroyRef = inject(DestroyRef);
   private elementRef = inject(ElementRef);
   private sanitizer = inject(DomSanitizer);
+  private transloco = inject(TranslocoService);
 
   private spellClickSubject = new Subject<SpellErrorClick>();
   private currentChecker: NspellChecker | null = null;
@@ -193,10 +196,10 @@ export class ExtractionReaderComponent implements OnInit, OnDestroy {
   });
 
   insertFootnoteTooltip = computed((): string => {
-    if (!this.editMode()) return 'Enter edit mode first';
-    if (this.footnotes().length === 0) return 'No footnotes exist yet';
-    if (!this.canInsertFootnoteRef()) return 'All footnotes already referenced';
-    return 'Insert footnote reference';
+    if (!this.editMode()) return this.transloco.translate('extraction.reader.insertFootnoteTooltip.enterEditFirst');
+    if (this.footnotes().length === 0) return this.transloco.translate('extraction.reader.insertFootnoteTooltip.noFootnotes');
+    if (!this.canInsertFootnoteRef()) return this.transloco.translate('extraction.reader.insertFootnoteTooltip.allReferenced');
+    return this.transloco.translate('extraction.reader.insertFootnoteTooltip.insert');
   });
 
   footnotePageMismatch = computed((): boolean => {
@@ -356,7 +359,7 @@ export class ExtractionReaderComponent implements OnInit, OnDestroy {
               this.loadFootnotes();
             },
             error: () => {
-              this.error.set('Failed to unlink orphaned footnotes');
+              this.error.set(this.transloco.translate('extraction.reader.errors.unlinkOrphanFailed'));
               this.saving.set(false);
               this.loadFootnotes();
             }
@@ -367,7 +370,7 @@ export class ExtractionReaderComponent implements OnInit, OnDestroy {
         }
       },
       error: (err: any) => {
-        const msg = err?.error?.message || 'Failed to save changes';
+        const msg = err?.error?.message || this.transloco.translate('extraction.reader.errors.saveFailed');
         this.error.set(msg);
         this.saving.set(false);
       }
@@ -405,7 +408,7 @@ export class ExtractionReaderComponent implements OnInit, OnDestroy {
         this.loadOcrForCurrentPage();
       },
       error: () => {
-        this.error.set('Failed to update page ignore status');
+        this.error.set(this.transloco.translate('extraction.reader.errors.ignoreStatusFailed'));
         this.togglingIgnore.set(false);
       }
     });
@@ -416,9 +419,9 @@ export class ExtractionReaderComponent implements OnInit, OnDestroy {
     if (!doc) return;
 
     const confirmed = await this.confirmationService.confirm({
-      title: 'Clear text',
-      message: 'Delete extracted text for this page?',
-      confirmText: 'Clear',
+      title: this.transloco.translate('extraction.reader.confirm.clearTitle'),
+      message: this.transloco.translate('extraction.reader.confirm.clearMessage'),
+      confirmText: this.transloco.translate('extraction.reader.confirm.clearConfirm'),
       isDanger: true
     });
     if (!confirmed) return;
@@ -434,7 +437,7 @@ export class ExtractionReaderComponent implements OnInit, OnDestroy {
         this.loadFootnotes();
       },
       error: () => {
-        this.error.set('Failed to clear text');
+        this.error.set(this.transloco.translate('extraction.reader.errors.clearFailed'));
         this.clearing.set(false);
       }
     });
@@ -460,7 +463,7 @@ export class ExtractionReaderComponent implements OnInit, OnDestroy {
         }
         this.pageImageUrl.set(null);
         this.loadingImage.set(false);
-        this.error.set('Failed to load page image');
+        this.error.set(this.transloco.translate('extraction.reader.errors.loadImageFailed'));
       }
     });
   }
@@ -502,7 +505,7 @@ export class ExtractionReaderComponent implements OnInit, OnDestroy {
         this.checkAndStartLangPolling();
       },
       error: (err) => {
-        this.error.set('Failed to load document');
+        this.error.set(this.transloco.translate('extraction.reader.errors.loadDocumentFailed'));
         this.loading.set(false);
       }
     });
@@ -625,7 +628,7 @@ export class ExtractionReaderComponent implements OnInit, OnDestroy {
         const updatedProcessing = new Set(this.processingOcr());
         updatedProcessing.delete(pageNum);
         this.processingOcr.set(updatedProcessing);
-        this.error.set('Failed to process OCR');
+        this.error.set(this.transloco.translate('extraction.reader.errors.processOcrFailed'));
       }
     });
   }
@@ -658,7 +661,7 @@ export class ExtractionReaderComponent implements OnInit, OnDestroy {
         const updatedExtracting = new Set(this.extractingText());
         updatedExtracting.delete(pageNum);
         this.extractingText.set(updatedExtracting);
-        this.error.set('Failed to extract text');
+        this.error.set(this.transloco.translate('extraction.reader.errors.extractTextFailed'));
       }
     });
   }
@@ -733,7 +736,7 @@ export class ExtractionReaderComponent implements OnInit, OnDestroy {
 
     const markdown = this.turndownService.turndown(this.footnoteEditorContent);
     if (!markdown.trim()) {
-      this.error.set('Footnote text cannot be empty');
+      this.error.set(this.transloco.translate('extraction.reader.errors.footnoteEmpty'));
       return;
     }
 
@@ -750,7 +753,7 @@ export class ExtractionReaderComponent implements OnInit, OnDestroy {
           this.savingFootnote.set(false);
         },
         error: () => {
-          this.error.set('Failed to create footnote');
+          this.error.set(this.transloco.translate('extraction.reader.errors.createFootnoteFailed'));
           this.savingFootnote.set(false);
         }
       });
@@ -768,7 +771,7 @@ export class ExtractionReaderComponent implements OnInit, OnDestroy {
           this.savingFootnote.set(false);
         },
         error: () => {
-          this.error.set('Failed to update footnote');
+          this.error.set(this.transloco.translate('extraction.reader.errors.updateFootnoteFailed'));
           this.savingFootnote.set(false);
         }
       });
@@ -781,9 +784,9 @@ export class ExtractionReaderComponent implements OnInit, OnDestroy {
     if (!doc || !fn) return;
 
     const confirmed = await this.confirmationService.confirm({
-      title: 'Delete footnote',
-      message: `Delete footnote [^${fn.number}]? References will be removed from page texts.`,
-      confirmText: 'Delete',
+      title: this.transloco.translate('extraction.reader.confirm.deleteFootnoteTitle'),
+      message: this.transloco.translate('extraction.reader.confirm.deleteFootnoteMessage', { number: fn.number }),
+      confirmText: this.transloco.translate('extraction.reader.confirm.deleteFootnoteConfirm'),
       isDanger: true
     });
     if (!confirmed) return;
@@ -808,7 +811,7 @@ export class ExtractionReaderComponent implements OnInit, OnDestroy {
         this.loadOcrForCurrentPage();
       },
       error: () => {
-        this.error.set('Failed to delete footnote');
+        this.error.set(this.transloco.translate('extraction.reader.errors.deleteFootnoteFailed'));
         this.deletingFootnote.set(false);
       }
     });
@@ -820,9 +823,9 @@ export class ExtractionReaderComponent implements OnInit, OnDestroy {
     if (!doc || !fn || fn.page_number === null) return;
 
     const confirmed = await this.confirmationService.confirm({
-      title: 'Unlink footnote',
-      message: `Remove [^${fn.number}] reference from page ${fn.page_number} text?`,
-      confirmText: 'Unlink',
+      title: this.transloco.translate('extraction.reader.confirm.unlinkFootnoteTitle'),
+      message: this.transloco.translate('extraction.reader.confirm.unlinkFootnoteMessage', { number: fn.number, page: fn.page_number }),
+      confirmText: this.transloco.translate('extraction.reader.confirm.unlinkFootnoteConfirm'),
       isDanger: true
     });
     if (!confirmed) return;
@@ -839,7 +842,7 @@ export class ExtractionReaderComponent implements OnInit, OnDestroy {
         this.loadOcrForCurrentPage();
       },
       error: () => {
-        this.error.set('Failed to unlink footnote');
+        this.error.set(this.transloco.translate('extraction.reader.errors.unlinkFootnoteFailed'));
         this.unlinkingFootnote.set(false);
       }
     });
@@ -964,10 +967,10 @@ export class ExtractionReaderComponent implements OnInit, OnDestroy {
 
   getContentTypeLabel(contentType: ContentType | null): string {
     switch (contentType) {
-      case 'text': return 'Text';
-      case 'image': return 'Scanned';
-      case 'hybrid': return 'Mixed';
-      default: return 'Unknown';
+      case 'text': return this.transloco.translate('extraction.reader.contentType.text');
+      case 'image': return this.transloco.translate('extraction.reader.contentType.image');
+      case 'hybrid': return this.transloco.translate('extraction.reader.contentType.hybrid');
+      default: return this.transloco.translate('extraction.reader.contentType.unknown');
     }
   }
 
@@ -982,27 +985,27 @@ export class ExtractionReaderComponent implements OnInit, OnDestroy {
 
   getContentTypeTooltip(contentType: ContentType | null): string {
     switch (contentType) {
-      case 'text': return 'Text page. "Extract Text" = fast, plain text. "AI OCR" = slower, formatted Markdown.';
-      case 'image': return 'Scanned page. Use "AI OCR" to extract text using AI vision.';
-      case 'hybrid': return 'Mixed page (text + images). "Extract Text" = fast, plain text. "AI OCR" = formatted with image content.';
+      case 'text': return this.transloco.translate('extraction.reader.contentTypeTooltip.text');
+      case 'image': return this.transloco.translate('extraction.reader.contentTypeTooltip.image');
+      case 'hybrid': return this.transloco.translate('extraction.reader.contentTypeTooltip.hybrid');
       default: return '';
     }
   }
 
   getExtractionMethodLabel(method: string | null | undefined): string {
     switch (method) {
-      case 'text_extraction': return 'Direct';
-      case 'ocr': return 'OCR';
-      case 'manual': return 'Manual';
+      case 'text_extraction': return this.transloco.translate('extraction.reader.extractionMethod.text_extraction');
+      case 'ocr': return this.transloco.translate('extraction.reader.extractionMethod.ocr');
+      case 'manual': return this.transloco.translate('extraction.reader.extractionMethod.manual');
       default: return '';
     }
   }
 
   getExtractionMethodTooltip(method: string | null | undefined): string {
     switch (method) {
-      case 'text_extraction': return 'Extracted directly from PDF (fast, plain text only)';
-      case 'ocr': return 'Extracted using AI vision (preserves formatting: bold, headings, paragraphs)';
-      case 'manual': return 'Manually transcribed by user';
+      case 'text_extraction': return this.transloco.translate('extraction.reader.extractionMethodTooltip.text_extraction');
+      case 'ocr': return this.transloco.translate('extraction.reader.extractionMethodTooltip.ocr');
+      case 'manual': return this.transloco.translate('extraction.reader.extractionMethodTooltip.manual');
       default: return '';
     }
   }
@@ -1016,45 +1019,15 @@ export class ExtractionReaderComponent implements OnInit, OnDestroy {
   }
 
   getLanguageDisplayName(code: string | null): string {
-    if (!code) return 'Not detected';
-    const languages: Record<string, string> = {
-      en: 'English',
-      es: 'Spanish',
-      fr: 'French',
-      de: 'German',
-      it: 'Italian',
-      pt: 'Portuguese',
-      ru: 'Russian',
-      zh: 'Chinese',
-      ja: 'Japanese',
-      ko: 'Korean',
-      ar: 'Arabic',
-      hi: 'Hindi',
-      ro: 'Romanian',
-      nl: 'Dutch',
-      pl: 'Polish',
-      sv: 'Swedish',
-      da: 'Danish',
-      no: 'Norwegian',
-      fi: 'Finnish',
-      cs: 'Czech',
-      el: 'Greek',
-      tr: 'Turkish',
-      he: 'Hebrew',
-      th: 'Thai',
-      vi: 'Vietnamese',
-      id: 'Indonesian',
-      ms: 'Malay',
-      la: 'Latin',
-      uk: 'Ukrainian',
-      hu: 'Hungarian',
-      bg: 'Bulgarian',
-      hr: 'Croatian',
-      sk: 'Slovak',
-      sl: 'Slovenian',
-      sr: 'Serbian',
-      unknown: 'Unknown'
-    };
-    return languages[code] || code.toUpperCase();
+    if (!code) return this.transloco.translate('extraction.reader.language.notDetected');
+    const knownCodes = [
+      'en', 'es', 'fr', 'de', 'it', 'pt', 'ru', 'zh', 'ja', 'ko', 'ar', 'hi',
+      'ro', 'nl', 'pl', 'sv', 'da', 'no', 'fi', 'cs', 'el', 'tr', 'he', 'th',
+      'vi', 'id', 'ms', 'la', 'uk', 'hu', 'bg', 'hr', 'sk', 'sl', 'sr', 'unknown'
+    ];
+    if (knownCodes.includes(code)) {
+      return this.transloco.translate(`extraction.reader.language.${code}`);
+    }
+    return code.toUpperCase();
   }
 }
diff --git a/wordkeep-client/src/app/pages/extraction/extraction.html b/wordkeep-client/src/app/pages/extraction/extraction.html
index f1f1239..15722e9 100644
--- a/wordkeep-client/src/app/pages/extraction/extraction.html
+++ b/wordkeep-client/src/app/pages/extraction/extraction.html
@@ -1,9 +1,10 @@
 <app-layout>
+<ng-container *transloco="let t; read: 'extraction.list'">
 <div class="extraction-container">
   <header class="page-header">
     <div class="header-content">
-      <h1>Text Extraction</h1>
-      <p>Extract text from your PDF documents using OCR</p>
+      <h1>{{ t('title') }}</h1>
+      <p>{{ t('subtitle') }}</p>
     </div>
   </header>
 
@@ -25,10 +26,10 @@ <h1>Text Extraction</h1>
   <!-- Documents List -->
   <div class="documents-section">
     <div class="section-header">
-      <h2>Your Documents</h2>
+      <h2>{{ t('yourDocuments') }}</h2>
       <div class="header-actions">
         @if (total() > 0) {
-          <span class="doc-count">{{ total() }} document{{ total() === 1 ? '' : 's' }}</span>
+          <span class="doc-count">{{ t('docCount', { count: total() }) }}</span>
         }
         <app-sort-dropdown [value]="sort()" (valueChange)="onSortChange($event)"></app-sort-dropdown>
       </div>
@@ -37,7 +38,7 @@ <h2>Your Documents</h2>
     @if (loading()) {
       <div class="loading-state">
         <div class="spinner"></div>
-        <p>Loading documents...</p>
+        <p>{{ t('loading') }}</p>
       </div>
     } @else if (documents().length === 0) {
       <div class="empty-state">
@@ -46,8 +47,8 @@ <h2>Your Documents</h2>
             <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
           </svg>
         </div>
-        <h3>No documents yet</h3>
-        <p>Upload documents in the Documents section first</p>
+        <h3>{{ t('emptyTitle') }}</h3>
+        <p>{{ t('emptySubtitle') }}</p>
       </div>
     } @else {
       <div class="documents-grid">
@@ -63,11 +64,11 @@ <h3>No documents yet</h3>
                 <div class="doc-name-row">
                   <h3 class="doc-name">{{ doc.effective_filename }}</h3>
                   @if (doc.has_custom_name) {
-                    <span class="renamed-badge" [title]="'Original: ' + doc.original_filename">renamed</span>
+                    <span class="renamed-badge" [title]="t('originalTitle', { name: doc.original_filename })">{{ t('renamed') }}</span>
                   }
                 </div>
                 <div class="doc-meta">
-                  <span>{{ doc.page_count }} page{{ doc.page_count === 1 ? '' : 's' }}</span>
+                  <span>{{ t('pageCount', { count: doc.page_count }) }}</span>
                   <span class="separator">•</span>
                   <span>{{ formatFileSize(doc.file_size) }}</span>
                 </div>
@@ -75,7 +76,7 @@ <h3 class="doc-name">{{ doc.effective_filename }}</h3>
                   <div class="progress-bar">
                     <div class="progress-fill" [style.width.%]="doc.ocr_progress?.percent ?? 0"></div>
                   </div>
-                  <span class="ocr-progress-text">{{ doc.ocr_progress?.completed ?? 0 }}/{{ doc.page_count }} extracted ({{ doc.ocr_progress?.percent ?? 0 }}%)</span>
+                  <span class="ocr-progress-text">{{ t('ocrProgress', { completed: doc.ocr_progress?.completed ?? 0, total: doc.page_count, percent: doc.ocr_progress?.percent ?? 0 }) }}</span>
                 </div>
               </div>
             </a>
@@ -89,7 +90,7 @@ <h3 class="doc-name">{{ doc.effective_filename }}</h3>
                   <div class="progress-bar">
                     <div class="progress-fill" [style.width.%]="getBulkOcrPercent(doc)"></div>
                   </div>
-                  <button class="btn-cancel" (click)="cancelBulkOcr(doc, $event)" title="Cancel OCR">
+                  <button class="btn-cancel" (click)="cancelBulkOcr(doc, $event)" [title]="t('cancelOcr')">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                       <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd" />
                     </svg>
@@ -97,16 +98,16 @@ <h3 class="doc-name">{{ doc.effective_filename }}</h3>
                 </div>
               } @else if (doc.status === 'ready') {
                 <div class="bulk-ocr-controls">
-                  <label class="override-checkbox" title="Re-run OCR on pages that have already been processed">
+                  <label class="override-checkbox" [title]="t('overrideTitle')">
                     <input type="checkbox" #overrideCheckbox>
-                    <span>Override</span>
+                    <span>{{ t('override') }}</span>
                   </label>
-                  <button class="btn-bulk-ocr" (click)="startBulkOcr(doc, overrideCheckbox.checked, $event)" title="Run AI OCR on all pages">
+                  <button class="btn-bulk-ocr" (click)="startBulkOcr(doc, overrideCheckbox.checked, $event)" [title]="t('runAllTitle')">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                       <path d="M10 12.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5z" />
                       <path fill-rule="evenodd" d="M.664 10.59a1.651 1.651 0 010-1.186A10.004 10.004 0 0110 3c4.257 0 7.893 2.66 9.336 6.41.147.381.146.804 0 1.186A10.004 10.004 0 0110 17c-4.257 0-7.893-2.66-9.336-6.41zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd" />
                     </svg>
-                    AI OCR All
+                    {{ t('runAll') }}
                   </button>
                 </div>
               }
@@ -126,15 +127,15 @@ <h3 class="doc-name">{{ doc.effective_filename }}</h3>
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
               <path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clip-rule="evenodd" />
             </svg>
-            Previous
+            {{ t('previous') }}
           </button>
-          <span class="page-info">Page {{ currentPage() }} of {{ lastPage() }}</span>
+          <span class="page-info">{{ t('pageOf', { current: currentPage(), last: lastPage() }) }}</span>
           <button
             class="btn-page"
             [disabled]="currentPage() === lastPage()"
             (click)="goToPage(currentPage() + 1)"
           >
-            Next
+            {{ t('next') }}
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
               <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
             </svg>
@@ -144,4 +145,5 @@ <h3 class="doc-name">{{ doc.effective_filename }}</h3>
     }
   </div>
 </div>
+</ng-container>
 </app-layout>
diff --git a/wordkeep-client/src/app/pages/extraction/extraction.spec.ts b/wordkeep-client/src/app/pages/extraction/extraction.spec.ts
index e6f1125..71606ea 100644
--- a/wordkeep-client/src/app/pages/extraction/extraction.spec.ts
+++ b/wordkeep-client/src/app/pages/extraction/extraction.spec.ts
@@ -9,6 +9,7 @@ import { AuthService } from '../../services/auth.service';
 import { ConfirmationService } from '../../services/confirmation.service';
 import { mockDocument, mockPaginatedDocuments } from '../../test-utils';
 import { Document } from '../../models/document.model';
+import { getTranslocoTestingModule } from '../../transloco/transloco-testing';
 
 describe('ExtractionComponent', () => {
   let component: ExtractionComponent;
@@ -51,7 +52,7 @@ describe('ExtractionComponent', () => {
     };
 
     await TestBed.configureTestingModule({
-      imports: [ExtractionComponent],
+      imports: [ExtractionComponent, getTranslocoTestingModule()],
       providers: [
         provideRouter([]),
         { provide: DocumentService, useValue: mockDocumentService },
@@ -262,7 +263,7 @@ describe('ExtractionComponent', () => {
 
       TestBed.resetTestingModule();
       await TestBed.configureTestingModule({
-        imports: [ExtractionComponent],
+        imports: [ExtractionComponent, getTranslocoTestingModule()],
         providers: [
           provideRouter([]),
           { provide: DocumentService, useValue: mockDocumentService },
diff --git a/wordkeep-client/src/app/pages/extraction/extraction.ts b/wordkeep-client/src/app/pages/extraction/extraction.ts
index 640e314..34f3424 100644
--- a/wordkeep-client/src/app/pages/extraction/extraction.ts
+++ b/wordkeep-client/src/app/pages/extraction/extraction.ts
@@ -2,7 +2,9 @@ import { Component, OnInit, OnDestroy, inject, signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterLink } from '@angular/router';
 import { FormsModule } from '@angular/forms';
+import { provideTranslocoScope, TranslocoDirective, TranslocoService } from '@jsverse/transloco';
 import { interval, Subscription } from 'rxjs';
+import { formatDateTime } from '../../utils/date-format';
 import { DocumentService } from '../../services/document.service';
 import { BulkOcrService } from '../../services/bulk-ocr.service';
 import { ConfirmationService } from '../../services/confirmation.service';
@@ -14,15 +16,17 @@ import { UserViewStatesService } from '../../services/user-view-states.service';
 @Component({
   selector: 'app-extraction',
   standalone: true,
-  imports: [CommonModule, RouterLink, FormsModule, LayoutComponent, SortDropdownComponent],
+  imports: [CommonModule, RouterLink, FormsModule, LayoutComponent, SortDropdownComponent, TranslocoDirective],
   templateUrl: './extraction.html',
-  styleUrl: './extraction.scss'
+  styleUrl: './extraction.scss',
+  providers: [provideTranslocoScope('extraction')]
 })
 export class ExtractionComponent implements OnInit, OnDestroy {
   private documentService = inject(DocumentService);
   private bulkOcrService = inject(BulkOcrService);
   private confirmationService = inject(ConfirmationService);
   private viewStates = inject(UserViewStatesService);
+  private transloco = inject(TranslocoService);
   private pollSubscription?: Subscription;
 
   documents = signal<Document[]>([]);
@@ -61,7 +65,7 @@ export class ExtractionComponent implements OnInit, OnDestroy {
         this.checkAndStartPolling();
       },
       error: () => {
-        this.error.set('Failed to load documents');
+        this.error.set(this.transloco.translate('extraction.list.errors.loadFailed'));
         this.loading.set(false);
       }
     });
@@ -104,13 +108,7 @@ export class ExtractionComponent implements OnInit, OnDestroy {
   }
 
   formatDate(dateString: string): string {
-    return new Date(dateString).toLocaleDateString('en-US', {
-      year: 'numeric',
-      month: 'short',
-      day: 'numeric',
-      hour: '2-digit',
-      minute: '2-digit'
-    });
+    return formatDateTime(dateString, this.transloco.getActiveLang());
   }
 
 goToPage(page: number) {
diff --git a/wordkeep-client/src/app/pages/forgot-password/forgot-password.html b/wordkeep-client/src/app/pages/forgot-password/forgot-password.html
index a24e16f..fc00688 100644
--- a/wordkeep-client/src/app/pages/forgot-password/forgot-password.html
+++ b/wordkeep-client/src/app/pages/forgot-password/forgot-password.html
@@ -1,6 +1,6 @@
-<div class="auth-container">
+<div class="auth-container" *transloco="let t; read: 'auth'">
   <aside class="auth-brand">
-    <a class="auth-brand__link" routerLink="/" aria-label="WordKeep — return to landing page">
+    <a class="auth-brand__link" routerLink="/" [attr.aria-label]="t('common.brandReturn')">
       <div class="auth-brand__logo">
         <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M6 20 V5 H9 V7 H10.5 V5 H13.5 V7 H15 V5 H18 V20 Z" stroke="currentColor" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round"/>
@@ -9,13 +9,13 @@
           <line x1="4" y1="20" x2="20" y2="20" stroke="currentColor" stroke-width="1.0" stroke-linecap="round"/>
         </svg>
       </div>
-      <span class="auth-brand__wordmark">WordKeep</span>
+      <span class="auth-brand__wordmark">{{ t('common.brand') }}</span>
     </a>
   </aside>
   <div class="auth-card">
     <div class="auth-header">
-      <h1>Forgot password?</h1>
-      <p>Enter your email and we'll send you a reset link</p>
+      <h1>{{ t('forgot.title') }}</h1>
+      <p>{{ t('forgot.subtitle') }}</p>
     </div>
 
     @if (emailSent()) {
@@ -25,10 +25,10 @@ <h1>Forgot password?</h1>
             <path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
           </svg>
         </div>
-        <h2>Check your email</h2>
-        <p>If an account exists for <strong>{{ email }}</strong>, you'll receive a password reset link.</p>
-        <p class="note">Didn't receive the email? Check your spam folder.</p>
-        <a routerLink="/login" class="btn-secondary">Back to login</a>
+        <h2>{{ t('forgot.checkEmailTitle') }}</h2>
+        <p [innerHTML]="t('forgot.checkEmailBody', { email: email })"></p>
+        <p class="note">{{ t('forgot.spamNote') }}</p>
+        <a routerLink="/login" class="btn-secondary">{{ t('common.backToLogin') }}</a>
       </div>
     } @else {
       @if (error()) {
@@ -43,13 +43,13 @@ <h2>Check your email</h2>
 
       <form (ngSubmit)="onSubmit()" class="auth-form">
         <div class="form-group">
-          <label for="email">Email</label>
+          <label for="email">{{ t('common.email') }}</label>
           <input
             type="email"
             id="email"
             name="email"
             [(ngModel)]="email"
-            placeholder="Enter your email"
+            [placeholder]="t('common.emailPlaceholder')"
             autocomplete="email"
             required
           />
@@ -58,15 +58,15 @@ <h2>Check your email</h2>
         <button type="submit" class="btn-primary" [disabled]="loading()">
           @if (loading()) {
             <span class="spinner"></span>
-            Sending...
+            {{ t('forgot.sending') }}
           } @else {
-            Send reset link
+            {{ t('forgot.sendReset') }}
           }
         </button>
       </form>
 
       <div class="auth-footer">
-        <p>Remember your password? <a routerLink="/login">Sign in</a></p>
+        <p>{{ t('common.rememberPassword') }} <a routerLink="/login">{{ t('common.signIn') }}</a></p>
       </div>
     }
   </div>
diff --git a/wordkeep-client/src/app/pages/forgot-password/forgot-password.spec.ts b/wordkeep-client/src/app/pages/forgot-password/forgot-password.spec.ts
index ed4814f..2d7e445 100644
--- a/wordkeep-client/src/app/pages/forgot-password/forgot-password.spec.ts
+++ b/wordkeep-client/src/app/pages/forgot-password/forgot-password.spec.ts
@@ -4,6 +4,7 @@ import { of, throwError } from 'rxjs';
 import { describe, it, expect, beforeEach, vi } from 'vitest';
 import { ForgotPasswordComponent } from './forgot-password';
 import { AuthService } from '../../services/auth.service';
+import { getTranslocoTestingModule } from '../../transloco/transloco-testing';
 
 describe('ForgotPasswordComponent', () => {
   let component: ForgotPasswordComponent;
@@ -14,7 +15,7 @@ describe('ForgotPasswordComponent', () => {
     mockAuthService = { forgotPassword: vi.fn() };
 
     await TestBed.configureTestingModule({
-      imports: [ForgotPasswordComponent],
+      imports: [ForgotPasswordComponent, getTranslocoTestingModule()],
       providers: [
         provideRouter([]),
         { provide: AuthService, useValue: mockAuthService }
diff --git a/wordkeep-client/src/app/pages/forgot-password/forgot-password.ts b/wordkeep-client/src/app/pages/forgot-password/forgot-password.ts
index 27ad9eb..daa6268 100644
--- a/wordkeep-client/src/app/pages/forgot-password/forgot-password.ts
+++ b/wordkeep-client/src/app/pages/forgot-password/forgot-password.ts
@@ -1,17 +1,19 @@
-import { Component, signal } from '@angular/core';
+import { Component, inject, signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { RouterLink } from '@angular/router';
+import { TranslocoDirective, TranslocoService } from '@jsverse/transloco';
 import { AuthService } from '../../services/auth.service';
 
 @Component({
   selector: 'app-forgot-password',
   standalone: true,
-  imports: [CommonModule, FormsModule, RouterLink],
+  imports: [CommonModule, FormsModule, RouterLink, TranslocoDirective],
   templateUrl: './forgot-password.html',
   styleUrl: './forgot-password.scss'
 })
 export class ForgotPasswordComponent {
+  private transloco = inject(TranslocoService);
   email = '';
   error = signal<string | null>(null);
   loading = signal(false);
@@ -23,7 +25,7 @@ export class ForgotPasswordComponent {
     this.error.set(null);
 
     if (!this.email) {
-      this.error.set('Please enter your email');
+      this.error.set(this.transloco.translate('auth.forgot.enterEmail'));
       return;
     }
 
@@ -36,7 +38,7 @@ export class ForgotPasswordComponent {
       },
       error: () => {
         this.loading.set(false);
-        this.error.set('An error occurred. Please try again.');
+        this.error.set(this.transloco.translate('auth.common.genericError'));
       }
     });
   }
diff --git a/wordkeep-client/src/app/pages/home/home.spec.ts b/wordkeep-client/src/app/pages/home/home.spec.ts
index 44e3bd8..3b247e3 100644
--- a/wordkeep-client/src/app/pages/home/home.spec.ts
+++ b/wordkeep-client/src/app/pages/home/home.spec.ts
@@ -6,6 +6,7 @@ import { HomeComponent } from './home';
 import { AuthService } from '../../services/auth.service';
 import { LayoutService } from '../../services/layout.service';
 import { WorkStatusService } from '../../services/work-status.service';
+import { getTranslocoTestingModule } from '../../transloco/transloco-testing';
 
 describe('HomeComponent (dispatcher)', () => {
   let fixture: ComponentFixture<HomeComponent>;
@@ -29,7 +30,7 @@ describe('HomeComponent (dispatcher)', () => {
     };
 
     await TestBed.configureTestingModule({
-      imports: [HomeComponent],
+      imports: [HomeComponent, getTranslocoTestingModule()],
       providers: [
         provideRouter([]),
         { provide: AuthService, useValue: mockAuthService },
diff --git a/wordkeep-client/src/app/pages/home/variants/home-compendium/home-compendium.html b/wordkeep-client/src/app/pages/home/variants/home-compendium/home-compendium.html
index dc8a9c8..02062c7 100644
--- a/wordkeep-client/src/app/pages/home/variants/home-compendium/home-compendium.html
+++ b/wordkeep-client/src/app/pages/home/variants/home-compendium/home-compendium.html
@@ -1,50 +1,50 @@
-<div class="home">
-  <span class="home__bulletin">Today's bulletin</span>
+<div class="home" *transloco="let t; read: 'home'">
+  <span class="home__bulletin">{{ t('compendium.bulletin') }}</span>
 
   <div class="home__body">
     <section class="home__hero">
-      <span class="eyebrow">From the editor</span>
-      <h1 class="home__greeting has-drop-cap">Welcome back, {{ authService.userName() }}</h1>
-      <p class="home__subtitle">Pick up where you left off, or open a new chapter.</p>
+      <span class="eyebrow">{{ t('compendium.fromEditor') }}</span>
+      <h1 class="home__greeting has-drop-cap">{{ t('hero.greeting', { name: authService.userName() }) }}</h1>
+      <p class="home__subtitle">{{ t('hero.subtitle') }}</p>
     </section>
 
-    <section class="home__tools" aria-label="The tools">
-      <span class="eyebrow">In this issue</span>
+    <section class="home__tools" [attr.aria-label]="t('tools.eyebrow')">
+      <span class="eyebrow">{{ t('compendium.inThisIssue') }}</span>
 
       <div class="dashboard-grid">
         <a routerLink="/documents" class="dashboard-card">
-          <span class="dashboard-card__section">Circulation</span>
-          <h3 class="dashboard-card__title">Documents</h3>
-          <p class="dashboard-card__lede">Upload, organise and curate the PDFs you keep — the daily files that fund the editorial.</p>
-          <span class="dashboard-card__cue">page 02 &rarr;</span>
+          <span class="dashboard-card__section">{{ t('compendium.cards.documents.section') }}</span>
+          <h3 class="dashboard-card__title">{{ t('cards.documents.title') }}</h3>
+          <p class="dashboard-card__lede">{{ t('compendium.cards.documents.lede') }}</p>
+          <span class="dashboard-card__cue" [innerHTML]="t('compendium.cards.documents.cue')"></span>
         </a>
 
         <a routerLink="/extraction" class="dashboard-card">
-          <span class="dashboard-card__section">Press Room</span>
-          <h3 class="dashboard-card__title">Text extraction</h3>
-          <p class="dashboard-card__lede">OCR engines lift words from scanned plates; verified columns ready for the next desk.</p>
-          <span class="dashboard-card__cue">page 03 &rarr;</span>
+          <span class="dashboard-card__section">{{ t('compendium.cards.extraction.section') }}</span>
+          <h3 class="dashboard-card__title">{{ t('cards.extraction.title') }}</h3>
+          <p class="dashboard-card__lede">{{ t('compendium.cards.extraction.lede') }}</p>
+          <span class="dashboard-card__cue" [innerHTML]="t('compendium.cards.extraction.cue')"></span>
         </a>
 
         <a routerLink="/page-linking" class="dashboard-card">
-          <span class="dashboard-card__section">Bindery</span>
-          <h3 class="dashboard-card__title">Page linking</h3>
-          <p class="dashboard-card__lede">Stitch text across consecutive pages so paragraphs run unbroken from leaf to leaf.</p>
-          <span class="dashboard-card__cue">page 04 &rarr;</span>
+          <span class="dashboard-card__section">{{ t('compendium.cards.pageLinking.section') }}</span>
+          <h3 class="dashboard-card__title">{{ t('cards.pageLinking.title') }}</h3>
+          <p class="dashboard-card__lede">{{ t('compendium.cards.pageLinking.lede') }}</p>
+          <span class="dashboard-card__cue" [innerHTML]="t('compendium.cards.pageLinking.cue')"></span>
         </a>
 
         <a routerLink="/book-view" class="dashboard-card">
-          <span class="dashboard-card__section">Reading Room</span>
-          <h3 class="dashboard-card__title">Document view</h3>
-          <p class="dashboard-card__lede">Read assembled text and export as Markdown — the finished page, fit for syndication.</p>
-          <span class="dashboard-card__cue">page 05 &rarr;</span>
+          <span class="dashboard-card__section">{{ t('compendium.cards.documentView.section') }}</span>
+          <h3 class="dashboard-card__title">{{ t('cards.documentView.title') }}</h3>
+          <p class="dashboard-card__lede">{{ t('compendium.cards.documentView.lede') }}</p>
+          <span class="dashboard-card__cue" [innerHTML]="t('compendium.cards.documentView.cue')"></span>
         </a>
 
         <a routerLink="/translation" class="dashboard-card">
-          <span class="dashboard-card__section">Translation Desk</span>
-          <h3 class="dashboard-card__title">Translation</h3>
-          <p class="dashboard-card__lede">Carry your documents into another language; the translation desk files the foreign edition.</p>
-          <span class="dashboard-card__cue">page 06 &rarr;</span>
+          <span class="dashboard-card__section">{{ t('compendium.cards.translation.section') }}</span>
+          <h3 class="dashboard-card__title">{{ t('cards.translation.title') }}</h3>
+          <p class="dashboard-card__lede">{{ t('compendium.cards.translation.lede') }}</p>
+          <span class="dashboard-card__cue" [innerHTML]="t('compendium.cards.translation.cue')"></span>
         </a>
       </div>
     </section>
@@ -53,7 +53,7 @@ <h3 class="dashboard-card__title">Translation</h3>
   <hr class="home__rule" aria-hidden="true">
 
   <section class="home__activity">
-    <span class="eyebrow">Wire — Recent</span>
+    <span class="eyebrow">{{ t('compendium.wireRecent') }}</span>
     <app-recent-activity></app-recent-activity>
   </section>
 </div>
diff --git a/wordkeep-client/src/app/pages/home/variants/home-compendium/home-compendium.ts b/wordkeep-client/src/app/pages/home/variants/home-compendium/home-compendium.ts
index 2196660..7f59007 100644
--- a/wordkeep-client/src/app/pages/home/variants/home-compendium/home-compendium.ts
+++ b/wordkeep-client/src/app/pages/home/variants/home-compendium/home-compendium.ts
@@ -3,11 +3,13 @@ import { CommonModule } from '@angular/common';
 import { RouterLink } from '@angular/router';
 import { AuthService } from '../../../../services/auth.service';
 import { RecentActivityComponent } from '../../../../components/recent-activity/recent-activity';
+import { provideTranslocoScope, TranslocoDirective } from '@jsverse/transloco';
 
 @Component({
   selector: 'app-home-compendium',
   standalone: true,
-  imports: [CommonModule, RouterLink, RecentActivityComponent],
+  imports: [CommonModule, RouterLink, RecentActivityComponent, TranslocoDirective],
+  providers: [provideTranslocoScope('home')],
   templateUrl: './home-compendium.html',
   styleUrl: './home-compendium.scss'
 })
diff --git a/wordkeep-client/src/app/pages/home/variants/home-console/home-console.html b/wordkeep-client/src/app/pages/home/variants/home-console/home-console.html
index 729bb98..297c573 100644
--- a/wordkeep-client/src/app/pages/home/variants/home-console/home-console.html
+++ b/wordkeep-client/src/app/pages/home/variants/home-console/home-console.html
@@ -1,25 +1,21 @@
-<div class="console-home">
+<div class="console-home" *transloco="let t; read: 'home'">
   <header class="con-header">
     <span class="con-cmd"><span class="con-prompt">&dollar;</span> wordkeep --hello</span>
-    <span class="con-meta">{{ today }} &middot; uid:{{ authService.userName() }}</span>
+    <span class="con-meta" [innerHTML]="t('console.meta', { today: today, name: authService.userName() })"></span>
   </header>
 
   <hr class="con-rule" />
 
   <section class="manblock">
-    <h2 class="manblock__h">NAME</h2>
-    <pre class="manblock__b">    wordkeep &mdash; keep the words you read</pre>
+    <h2 class="manblock__h">{{ t('console.name') }}</h2>
+    <pre class="manblock__b" [innerHTML]="t('console.nameBody')"></pre>
 
-    <h2 class="manblock__h">SYNOPSIS</h2>
+    <h2 class="manblock__h">{{ t('console.synopsis') }}</h2>
     <pre class="manblock__b">    wordkeep <span class="muted">&lt;tool&gt;</span> <span class="muted">[options]</span>
     wordkeep tail -f activity</pre>
 
-    <h2 class="manblock__h">DESCRIPTION</h2>
-    <pre class="manblock__b">    A vocabulary &amp; OCR workbench for the readers who want
-    every word they meet to be kept. Upload PDFs, lift text
-    with OCR, stitch consecutive pages, translate, look up.
-
-    Press <kbd>/</kbd> at any time to jump between sections.</pre>
+    <h2 class="manblock__h">{{ t('console.description') }}</h2>
+    <pre class="manblock__b" [innerHTML]="t('console.descriptionBody')"></pre>
   </section>
 
   <hr class="con-rule" />
@@ -31,36 +27,36 @@ <h2 class="manblock__h">DESCRIPTION</h2>
       <li>
         <a routerLink="/documents" class="tools-row">
           <span class="tools-row__cmd">documents</span>
-          <span class="tools-row__desc">Upload, organise, curate the PDFs you keep.</span>
-          <span class="tools-row__meta">open &rsaquo;</span>
+          <span class="tools-row__desc">{{ t('console.cards.documents') }}</span>
+          <span class="tools-row__meta" [innerHTML]="t('console.open')"></span>
         </a>
       </li>
       <li>
         <a routerLink="/extraction" class="tools-row">
           <span class="tools-row__cmd">extraction</span>
-          <span class="tools-row__desc">Lift words off the page with the OCR scribe.</span>
-          <span class="tools-row__meta">open &rsaquo;</span>
+          <span class="tools-row__desc">{{ t('console.cards.extraction') }}</span>
+          <span class="tools-row__meta" [innerHTML]="t('console.open')"></span>
         </a>
       </li>
       <li>
         <a routerLink="/page-linking" class="tools-row">
           <span class="tools-row__cmd">page-linking</span>
-          <span class="tools-row__desc">Bind text across consecutive pages.</span>
-          <span class="tools-row__meta">open &rsaquo;</span>
+          <span class="tools-row__desc">{{ t('console.cards.pageLinking') }}</span>
+          <span class="tools-row__meta" [innerHTML]="t('console.open')"></span>
         </a>
       </li>
       <li>
         <a routerLink="/book-view" class="tools-row">
           <span class="tools-row__cmd">book-view</span>
-          <span class="tools-row__desc">Read assembled text and export Markdown.</span>
-          <span class="tools-row__meta">open &rsaquo;</span>
+          <span class="tools-row__desc">{{ t('console.cards.documentView') }}</span>
+          <span class="tools-row__meta" [innerHTML]="t('console.open')"></span>
         </a>
       </li>
       <li>
         <a routerLink="/translation" class="tools-row">
           <span class="tools-row__cmd">translation</span>
-          <span class="tools-row__desc">Carry your documents into another tongue.</span>
-          <span class="tools-row__meta">open &rsaquo;</span>
+          <span class="tools-row__desc">{{ t('console.cards.translation') }}</span>
+          <span class="tools-row__meta" [innerHTML]="t('console.open')"></span>
         </a>
       </li>
     </ul>
diff --git a/wordkeep-client/src/app/pages/home/variants/home-console/home-console.ts b/wordkeep-client/src/app/pages/home/variants/home-console/home-console.ts
index 77f478a..b433171 100644
--- a/wordkeep-client/src/app/pages/home/variants/home-console/home-console.ts
+++ b/wordkeep-client/src/app/pages/home/variants/home-console/home-console.ts
@@ -3,11 +3,13 @@ import { CommonModule } from '@angular/common';
 import { RouterLink } from '@angular/router';
 import { AuthService } from '../../../../services/auth.service';
 import { RecentActivityComponent } from '../../../../components/recent-activity/recent-activity';
+import { provideTranslocoScope, TranslocoDirective } from '@jsverse/transloco';
 
 @Component({
   selector: 'app-home-console',
   standalone: true,
-  imports: [CommonModule, RouterLink, RecentActivityComponent],
+  imports: [CommonModule, RouterLink, RecentActivityComponent, TranslocoDirective],
+  providers: [provideTranslocoScope('home')],
   templateUrl: './home-console.html',
   styleUrl: './home-console.scss'
 })
diff --git a/wordkeep-client/src/app/pages/home/variants/home-glass/home-glass.html b/wordkeep-client/src/app/pages/home/variants/home-glass/home-glass.html
index 63b0a5e..e20683b 100644
--- a/wordkeep-client/src/app/pages/home/variants/home-glass/home-glass.html
+++ b/wordkeep-client/src/app/pages/home/variants/home-glass/home-glass.html
@@ -1,8 +1,8 @@
-<div class="home">
+<div class="home" *transloco="let t; read: 'home'">
   <section class="home__hero">
-    <span class="eyebrow">The library</span>
-    <h1 class="home__greeting has-drop-cap">Welcome back, {{ authService.userName() }}</h1>
-    <p class="home__subtitle">Pick up where you left off, or open a new chapter.</p>
+    <span class="eyebrow">{{ t('hero.eyebrow') }}</span>
+    <h1 class="home__greeting has-drop-cap">{{ t('hero.greeting', { name: authService.userName() }) }}</h1>
+    <p class="home__subtitle">{{ t('hero.subtitle') }}</p>
   </section>
 
   <div class="fleuron-rule" aria-hidden="true">
@@ -10,7 +10,7 @@ <h1 class="home__greeting has-drop-cap">Welcome back, {{ authService.userName()
   </div>
 
   <section class="home__tools">
-    <span class="eyebrow">The tools</span>
+    <span class="eyebrow">{{ t('tools.eyebrow') }}</span>
 
     <div class="dashboard-grid">
       <a routerLink="/documents" class="dashboard-card dashboard-card--feature">
@@ -23,9 +23,9 @@ <h1 class="home__greeting has-drop-cap">Welcome back, {{ authService.userName()
             <polyline points="10,9 9,9 8,9" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
           </svg>
         </div>
-        <h3 class="dashboard-card__title">Documents</h3>
-        <p class="dashboard-card__lede">Upload, organise and curate the PDFs you keep.</p>
-        <span class="dashboard-card__cue">Open the stacks &rarr;</span>
+        <h3 class="dashboard-card__title">{{ t('cards.documents.title') }}</h3>
+        <p class="dashboard-card__lede">{{ t('cards.documents.lede') }}</p>
+        <span class="dashboard-card__cue" [innerHTML]="t('cards.documents.cue')"></span>
       </a>
 
       <a routerLink="/extraction" class="dashboard-card">
@@ -34,9 +34,9 @@ <h3 class="dashboard-card__title">Documents</h3>
             <path d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
           </svg>
         </div>
-        <h3 class="dashboard-card__title">Text extraction</h3>
-        <p class="dashboard-card__lede">Lift words off the page with OCR.</p>
-        <span class="dashboard-card__cue">Extract &rarr;</span>
+        <h3 class="dashboard-card__title">{{ t('cards.extraction.title') }}</h3>
+        <p class="dashboard-card__lede">{{ t('cards.extraction.lede') }}</p>
+        <span class="dashboard-card__cue" [innerHTML]="t('cards.extraction.cue')"></span>
       </a>
 
       <a routerLink="/page-linking" class="dashboard-card">
@@ -46,9 +46,9 @@ <h3 class="dashboard-card__title">Text extraction</h3>
             <path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
           </svg>
         </div>
-        <h3 class="dashboard-card__title">Page linking</h3>
-        <p class="dashboard-card__lede">Stitch text across consecutive pages.</p>
-        <span class="dashboard-card__cue">Link &rarr;</span>
+        <h3 class="dashboard-card__title">{{ t('cards.pageLinking.title') }}</h3>
+        <p class="dashboard-card__lede">{{ t('cards.pageLinking.lede') }}</p>
+        <span class="dashboard-card__cue" [innerHTML]="t('cards.pageLinking.cue')"></span>
       </a>
 
       <a routerLink="/book-view" class="dashboard-card">
@@ -58,9 +58,9 @@ <h3 class="dashboard-card__title">Page linking</h3>
             <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="1.6"/>
           </svg>
         </div>
-        <h3 class="dashboard-card__title">Document view</h3>
-        <p class="dashboard-card__lede">Read assembled text and export as Markdown.</p>
-        <span class="dashboard-card__cue">Read &rarr;</span>
+        <h3 class="dashboard-card__title">{{ t('cards.documentView.title') }}</h3>
+        <p class="dashboard-card__lede">{{ t('cards.documentView.lede') }}</p>
+        <span class="dashboard-card__cue" [innerHTML]="t('cards.documentView.cue')"></span>
       </a>
 
       <a routerLink="/translation" class="dashboard-card">
@@ -69,9 +69,9 @@ <h3 class="dashboard-card__title">Document view</h3>
             <path d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
           </svg>
         </div>
-        <h3 class="dashboard-card__title">Translation</h3>
-        <p class="dashboard-card__lede">Carry your documents into another language.</p>
-        <span class="dashboard-card__cue">Translate &rarr;</span>
+        <h3 class="dashboard-card__title">{{ t('cards.translation.title') }}</h3>
+        <p class="dashboard-card__lede">{{ t('cards.translation.lede') }}</p>
+        <span class="dashboard-card__cue" [innerHTML]="t('cards.translation.cue')"></span>
       </a>
     </div>
   </section>
diff --git a/wordkeep-client/src/app/pages/home/variants/home-glass/home-glass.ts b/wordkeep-client/src/app/pages/home/variants/home-glass/home-glass.ts
index a410f34..ca48e28 100644
--- a/wordkeep-client/src/app/pages/home/variants/home-glass/home-glass.ts
+++ b/wordkeep-client/src/app/pages/home/variants/home-glass/home-glass.ts
@@ -3,11 +3,13 @@ import { CommonModule } from '@angular/common';
 import { RouterLink } from '@angular/router';
 import { AuthService } from '../../../../services/auth.service';
 import { RecentActivityComponent } from '../../../../components/recent-activity/recent-activity';
+import { provideTranslocoScope, TranslocoDirective } from '@jsverse/transloco';
 
 @Component({
   selector: 'app-home-glass',
   standalone: true,
-  imports: [CommonModule, RouterLink, RecentActivityComponent],
+  imports: [CommonModule, RouterLink, RecentActivityComponent, TranslocoDirective],
+  providers: [provideTranslocoScope('home')],
   templateUrl: './home-glass.html',
   styleUrl: './home-glass.scss'
 })
diff --git a/wordkeep-client/src/app/pages/home/variants/home-reading-room/home-reading-room.html b/wordkeep-client/src/app/pages/home/variants/home-reading-room/home-reading-room.html
index 63b0a5e..e20683b 100644
--- a/wordkeep-client/src/app/pages/home/variants/home-reading-room/home-reading-room.html
+++ b/wordkeep-client/src/app/pages/home/variants/home-reading-room/home-reading-room.html
@@ -1,8 +1,8 @@
-<div class="home">
+<div class="home" *transloco="let t; read: 'home'">
   <section class="home__hero">
-    <span class="eyebrow">The library</span>
-    <h1 class="home__greeting has-drop-cap">Welcome back, {{ authService.userName() }}</h1>
-    <p class="home__subtitle">Pick up where you left off, or open a new chapter.</p>
+    <span class="eyebrow">{{ t('hero.eyebrow') }}</span>
+    <h1 class="home__greeting has-drop-cap">{{ t('hero.greeting', { name: authService.userName() }) }}</h1>
+    <p class="home__subtitle">{{ t('hero.subtitle') }}</p>
   </section>
 
   <div class="fleuron-rule" aria-hidden="true">
@@ -10,7 +10,7 @@ <h1 class="home__greeting has-drop-cap">Welcome back, {{ authService.userName()
   </div>
 
   <section class="home__tools">
-    <span class="eyebrow">The tools</span>
+    <span class="eyebrow">{{ t('tools.eyebrow') }}</span>
 
     <div class="dashboard-grid">
       <a routerLink="/documents" class="dashboard-card dashboard-card--feature">
@@ -23,9 +23,9 @@ <h1 class="home__greeting has-drop-cap">Welcome back, {{ authService.userName()
             <polyline points="10,9 9,9 8,9" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
           </svg>
         </div>
-        <h3 class="dashboard-card__title">Documents</h3>
-        <p class="dashboard-card__lede">Upload, organise and curate the PDFs you keep.</p>
-        <span class="dashboard-card__cue">Open the stacks &rarr;</span>
+        <h3 class="dashboard-card__title">{{ t('cards.documents.title') }}</h3>
+        <p class="dashboard-card__lede">{{ t('cards.documents.lede') }}</p>
+        <span class="dashboard-card__cue" [innerHTML]="t('cards.documents.cue')"></span>
       </a>
 
       <a routerLink="/extraction" class="dashboard-card">
@@ -34,9 +34,9 @@ <h3 class="dashboard-card__title">Documents</h3>
             <path d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
           </svg>
         </div>
-        <h3 class="dashboard-card__title">Text extraction</h3>
-        <p class="dashboard-card__lede">Lift words off the page with OCR.</p>
-        <span class="dashboard-card__cue">Extract &rarr;</span>
+        <h3 class="dashboard-card__title">{{ t('cards.extraction.title') }}</h3>
+        <p class="dashboard-card__lede">{{ t('cards.extraction.lede') }}</p>
+        <span class="dashboard-card__cue" [innerHTML]="t('cards.extraction.cue')"></span>
       </a>
 
       <a routerLink="/page-linking" class="dashboard-card">
@@ -46,9 +46,9 @@ <h3 class="dashboard-card__title">Text extraction</h3>
             <path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
           </svg>
         </div>
-        <h3 class="dashboard-card__title">Page linking</h3>
-        <p class="dashboard-card__lede">Stitch text across consecutive pages.</p>
-        <span class="dashboard-card__cue">Link &rarr;</span>
+        <h3 class="dashboard-card__title">{{ t('cards.pageLinking.title') }}</h3>
+        <p class="dashboard-card__lede">{{ t('cards.pageLinking.lede') }}</p>
+        <span class="dashboard-card__cue" [innerHTML]="t('cards.pageLinking.cue')"></span>
       </a>
 
       <a routerLink="/book-view" class="dashboard-card">
@@ -58,9 +58,9 @@ <h3 class="dashboard-card__title">Page linking</h3>
             <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="1.6"/>
           </svg>
         </div>
-        <h3 class="dashboard-card__title">Document view</h3>
-        <p class="dashboard-card__lede">Read assembled text and export as Markdown.</p>
-        <span class="dashboard-card__cue">Read &rarr;</span>
+        <h3 class="dashboard-card__title">{{ t('cards.documentView.title') }}</h3>
+        <p class="dashboard-card__lede">{{ t('cards.documentView.lede') }}</p>
+        <span class="dashboard-card__cue" [innerHTML]="t('cards.documentView.cue')"></span>
       </a>
 
       <a routerLink="/translation" class="dashboard-card">
@@ -69,9 +69,9 @@ <h3 class="dashboard-card__title">Document view</h3>
             <path d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
           </svg>
         </div>
-        <h3 class="dashboard-card__title">Translation</h3>
-        <p class="dashboard-card__lede">Carry your documents into another language.</p>
-        <span class="dashboard-card__cue">Translate &rarr;</span>
+        <h3 class="dashboard-card__title">{{ t('cards.translation.title') }}</h3>
+        <p class="dashboard-card__lede">{{ t('cards.translation.lede') }}</p>
+        <span class="dashboard-card__cue" [innerHTML]="t('cards.translation.cue')"></span>
       </a>
     </div>
   </section>
diff --git a/wordkeep-client/src/app/pages/home/variants/home-reading-room/home-reading-room.ts b/wordkeep-client/src/app/pages/home/variants/home-reading-room/home-reading-room.ts
index cfc95bb..1a6f914 100644
--- a/wordkeep-client/src/app/pages/home/variants/home-reading-room/home-reading-room.ts
+++ b/wordkeep-client/src/app/pages/home/variants/home-reading-room/home-reading-room.ts
@@ -3,11 +3,13 @@ import { CommonModule } from '@angular/common';
 import { RouterLink } from '@angular/router';
 import { AuthService } from '../../../../services/auth.service';
 import { RecentActivityComponent } from '../../../../components/recent-activity/recent-activity';
+import { provideTranslocoScope, TranslocoDirective } from '@jsverse/transloco';
 
 @Component({
   selector: 'app-home-reading-room',
   standalone: true,
-  imports: [CommonModule, RouterLink, RecentActivityComponent],
+  imports: [CommonModule, RouterLink, RecentActivityComponent, TranslocoDirective],
+  providers: [provideTranslocoScope('home')],
   templateUrl: './home-reading-room.html',
   styleUrl: './home-reading-room.scss'
 })
diff --git a/wordkeep-client/src/app/pages/home/variants/home-scriptorium/home-scriptorium.html b/wordkeep-client/src/app/pages/home/variants/home-scriptorium/home-scriptorium.html
index 687dc42..9f91955 100644
--- a/wordkeep-client/src/app/pages/home/variants/home-scriptorium/home-scriptorium.html
+++ b/wordkeep-client/src/app/pages/home/variants/home-scriptorium/home-scriptorium.html
@@ -1,25 +1,25 @@
-<article class="folio">
+<article class="folio" *transloco="let t; read: 'home'">
   <header class="folio__head">
-    <span class="rubric">Folium primum &middot; the library</span>
+    <span class="rubric" [innerHTML]="t('scriptorium.rubricFolio')"></span>
     <span class="folio__num" aria-hidden="true">f. i &middot; recto</span>
   </header>
 
   <section class="incipit">
-    <h1 class="salutation">Welcome back, {{ authService.userName() }} &mdash; pick up where the quill last left off, or open a fresh leaf and begin a new chapter.</h1>
+    <h1 class="salutation" [innerHTML]="t('scriptorium.salutation', { name: authService.userName() })"></h1>
   </section>
 
   <hr class="fleuron" aria-hidden="true" data-glyph="&#10086;" />
 
   <section class="capitula">
-    <span class="rubric">Capitula &middot; tools at hand</span>
+    <span class="rubric" [innerHTML]="t('scriptorium.rubricCapitula')"></span>
 
     <ol class="capitula__list">
       <li class="capitulum">
         <a routerLink="/documents" class="capitulum__link">
           <span class="capitulum__num" aria-hidden="true">i</span>
           <span class="capitulum__body">
-            <span class="capitulum__title">On the keeping of <em>Documents</em></span>
-            <span class="capitulum__lede">Upload, organise &amp; curate the PDFs you keep.</span>
+            <span class="capitulum__title" [innerHTML]="t('scriptorium.cards.documents.title')"></span>
+            <span class="capitulum__lede" [innerHTML]="t('scriptorium.cards.documents.lede')"></span>
           </span>
           <span class="capitulum__manicule" aria-hidden="true">&#9758;</span>
         </a>
@@ -28,8 +28,8 @@ <h1 class="salutation">Welcome back, {{ authService.userName() }} &mdash; pick u
         <a routerLink="/extraction" class="capitulum__link">
           <span class="capitulum__num" aria-hidden="true">ii</span>
           <span class="capitulum__body">
-            <span class="capitulum__title">On the lifting of <em>Words</em></span>
-            <span class="capitulum__lede">The OCR scribe takes them off the page.</span>
+            <span class="capitulum__title" [innerHTML]="t('scriptorium.cards.extraction.title')"></span>
+            <span class="capitulum__lede" [innerHTML]="t('scriptorium.cards.extraction.lede')"></span>
           </span>
           <span class="capitulum__manicule" aria-hidden="true">&#9758;</span>
         </a>
@@ -38,8 +38,8 @@ <h1 class="salutation">Welcome back, {{ authService.userName() }} &mdash; pick u
         <a routerLink="/page-linking" class="capitulum__link">
           <span class="capitulum__num" aria-hidden="true">iii</span>
           <span class="capitulum__body">
-            <span class="capitulum__title">On the binding of <em>Pages</em></span>
-            <span class="capitulum__lede">Stitch text across consecutive folios.</span>
+            <span class="capitulum__title" [innerHTML]="t('scriptorium.cards.pageLinking.title')"></span>
+            <span class="capitulum__lede" [innerHTML]="t('scriptorium.cards.pageLinking.lede')"></span>
           </span>
           <span class="capitulum__manicule" aria-hidden="true">&#9758;</span>
         </a>
@@ -48,8 +48,8 @@ <h1 class="salutation">Welcome back, {{ authService.userName() }} &mdash; pick u
         <a routerLink="/book-view" class="capitulum__link">
           <span class="capitulum__num" aria-hidden="true">iv</span>
           <span class="capitulum__body">
-            <span class="capitulum__title">On the reading of the <em>Codex</em></span>
-            <span class="capitulum__lede">Read the assembled text and export as Markdown.</span>
+            <span class="capitulum__title" [innerHTML]="t('scriptorium.cards.documentView.title')"></span>
+            <span class="capitulum__lede" [innerHTML]="t('scriptorium.cards.documentView.lede')"></span>
           </span>
           <span class="capitulum__manicule" aria-hidden="true">&#9758;</span>
         </a>
@@ -58,8 +58,8 @@ <h1 class="salutation">Welcome back, {{ authService.userName() }} &mdash; pick u
         <a routerLink="/translation" class="capitulum__link">
           <span class="capitulum__num" aria-hidden="true">v</span>
           <span class="capitulum__body">
-            <span class="capitulum__title">On <em>Translation</em> &amp; the carrying-over</span>
-            <span class="capitulum__lede">Carry your documents into another tongue.</span>
+            <span class="capitulum__title" [innerHTML]="t('scriptorium.cards.translation.title')"></span>
+            <span class="capitulum__lede" [innerHTML]="t('scriptorium.cards.translation.lede')"></span>
           </span>
           <span class="capitulum__manicule" aria-hidden="true">&#9758;</span>
         </a>
@@ -70,7 +70,7 @@ <h1 class="salutation">Welcome back, {{ authService.userName() }} &mdash; pick u
   <hr class="fleuron" aria-hidden="true" data-glyph="&#10086;" />
 
   <section class="chronicle">
-    <span class="rubric">Chronicon &middot; recently entered</span>
+    <span class="rubric" [innerHTML]="t('scriptorium.rubricChronicle')"></span>
     <app-recent-activity></app-recent-activity>
   </section>
 
diff --git a/wordkeep-client/src/app/pages/home/variants/home-scriptorium/home-scriptorium.ts b/wordkeep-client/src/app/pages/home/variants/home-scriptorium/home-scriptorium.ts
index 9b5cc5b..5c95261 100644
--- a/wordkeep-client/src/app/pages/home/variants/home-scriptorium/home-scriptorium.ts
+++ b/wordkeep-client/src/app/pages/home/variants/home-scriptorium/home-scriptorium.ts
@@ -3,11 +3,13 @@ import { CommonModule } from '@angular/common';
 import { RouterLink } from '@angular/router';
 import { AuthService } from '../../../../services/auth.service';
 import { RecentActivityComponent } from '../../../../components/recent-activity/recent-activity';
+import { provideTranslocoScope, TranslocoDirective } from '@jsverse/transloco';
 
 @Component({
   selector: 'app-home-scriptorium',
   standalone: true,
-  imports: [CommonModule, RouterLink, RecentActivityComponent],
+  imports: [CommonModule, RouterLink, RecentActivityComponent, TranslocoDirective],
+  providers: [provideTranslocoScope('home')],
   templateUrl: './home-scriptorium.html',
   styleUrl: './home-scriptorium.scss'
 })
diff --git a/wordkeep-client/src/app/pages/home/variants/home-workbench/home-workbench.html b/wordkeep-client/src/app/pages/home/variants/home-workbench/home-workbench.html
index f461691..c082335 100644
--- a/wordkeep-client/src/app/pages/home/variants/home-workbench/home-workbench.html
+++ b/wordkeep-client/src/app/pages/home/variants/home-workbench/home-workbench.html
@@ -1,14 +1,14 @@
-<div class="home">
+<div class="home" *transloco="let t; read: 'home'">
   <section class="home__hero">
-    <span class="eyebrow">The library</span>
-    <h1 class="home__greeting has-drop-cap">Welcome back, {{ authService.userName() }}</h1>
-    <p class="home__subtitle">Pick up where you left off, or open a new chapter.</p>
+    <span class="eyebrow">{{ t('hero.eyebrow') }}</span>
+    <h1 class="home__greeting has-drop-cap">{{ t('hero.greeting', { name: authService.userName() }) }}</h1>
+    <p class="home__subtitle">{{ t('hero.subtitle') }}</p>
   </section>
 
-  <section class="home__tools" aria-label="The tools">
+  <section class="home__tools" [attr.aria-label]="t('tools.eyebrow')">
     <div class="home__tools-head">
-      <span class="eyebrow">The tools</span>
-      <span class="home__tools-hint">scroll &rarr;</span>
+      <span class="eyebrow">{{ t('tools.eyebrow') }}</span>
+      <span class="home__tools-hint" [innerHTML]="t('tools.hint')"></span>
     </div>
 
     <div class="dashboard-grid">
@@ -22,9 +22,9 @@ <h1 class="home__greeting has-drop-cap">Welcome back, {{ authService.userName()
             <line x1="16" y1="17" x2="8" y2="17" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
           </svg>
         </div>
-        <h3 class="dashboard-card__title">Documents</h3>
-        <p class="dashboard-card__lede">Upload, organise and curate the PDFs you keep.</p>
-        <span class="dashboard-card__cue">Open the stacks &rarr;</span>
+        <h3 class="dashboard-card__title">{{ t('cards.documents.title') }}</h3>
+        <p class="dashboard-card__lede">{{ t('cards.documents.lede') }}</p>
+        <span class="dashboard-card__cue" [innerHTML]="t('cards.documents.cue')"></span>
       </a>
 
       <a routerLink="/extraction" class="dashboard-card">
@@ -34,9 +34,9 @@ <h3 class="dashboard-card__title">Documents</h3>
             <path d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
           </svg>
         </div>
-        <h3 class="dashboard-card__title">Text extraction</h3>
-        <p class="dashboard-card__lede">Lift words off the page with OCR.</p>
-        <span class="dashboard-card__cue">Extract &rarr;</span>
+        <h3 class="dashboard-card__title">{{ t('cards.extraction.title') }}</h3>
+        <p class="dashboard-card__lede">{{ t('cards.extraction.lede') }}</p>
+        <span class="dashboard-card__cue" [innerHTML]="t('cards.extraction.cue')"></span>
       </a>
 
       <a routerLink="/page-linking" class="dashboard-card">
@@ -47,9 +47,9 @@ <h3 class="dashboard-card__title">Text extraction</h3>
             <path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
           </svg>
         </div>
-        <h3 class="dashboard-card__title">Page linking</h3>
-        <p class="dashboard-card__lede">Stitch text across consecutive pages.</p>
-        <span class="dashboard-card__cue">Link &rarr;</span>
+        <h3 class="dashboard-card__title">{{ t('cards.pageLinking.title') }}</h3>
+        <p class="dashboard-card__lede">{{ t('cards.pageLinking.lede') }}</p>
+        <span class="dashboard-card__cue" [innerHTML]="t('cards.pageLinking.cue')"></span>
       </a>
 
       <a routerLink="/book-view" class="dashboard-card">
@@ -60,9 +60,9 @@ <h3 class="dashboard-card__title">Page linking</h3>
             <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="1.4"/>
           </svg>
         </div>
-        <h3 class="dashboard-card__title">Document view</h3>
-        <p class="dashboard-card__lede">Read assembled text and export as Markdown.</p>
-        <span class="dashboard-card__cue">Read &rarr;</span>
+        <h3 class="dashboard-card__title">{{ t('cards.documentView.title') }}</h3>
+        <p class="dashboard-card__lede">{{ t('cards.documentView.lede') }}</p>
+        <span class="dashboard-card__cue" [innerHTML]="t('cards.documentView.cue')"></span>
       </a>
 
       <a routerLink="/translation" class="dashboard-card">
@@ -72,15 +72,15 @@ <h3 class="dashboard-card__title">Document view</h3>
             <path d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
           </svg>
         </div>
-        <h3 class="dashboard-card__title">Translation</h3>
-        <p class="dashboard-card__lede">Carry your documents into another language.</p>
-        <span class="dashboard-card__cue">Translate &rarr;</span>
+        <h3 class="dashboard-card__title">{{ t('cards.translation.title') }}</h3>
+        <p class="dashboard-card__lede">{{ t('cards.translation.lede') }}</p>
+        <span class="dashboard-card__cue" [innerHTML]="t('cards.translation.cue')"></span>
       </a>
     </div>
   </section>
 
   <section class="home__activity">
-    <span class="eyebrow">Recent</span>
+    <span class="eyebrow">{{ t('activity.eyebrow') }}</span>
     <app-recent-activity></app-recent-activity>
   </section>
 </div>
diff --git a/wordkeep-client/src/app/pages/home/variants/home-workbench/home-workbench.ts b/wordkeep-client/src/app/pages/home/variants/home-workbench/home-workbench.ts
index 2a4fa18..97fb845 100644
--- a/wordkeep-client/src/app/pages/home/variants/home-workbench/home-workbench.ts
+++ b/wordkeep-client/src/app/pages/home/variants/home-workbench/home-workbench.ts
@@ -3,11 +3,13 @@ import { CommonModule } from '@angular/common';
 import { RouterLink } from '@angular/router';
 import { AuthService } from '../../../../services/auth.service';
 import { RecentActivityComponent } from '../../../../components/recent-activity/recent-activity';
+import { provideTranslocoScope, TranslocoDirective } from '@jsverse/transloco';
 
 @Component({
   selector: 'app-home-workbench',
   standalone: true,
-  imports: [CommonModule, RouterLink, RecentActivityComponent],
+  imports: [CommonModule, RouterLink, RecentActivityComponent, TranslocoDirective],
+  providers: [provideTranslocoScope('home')],
   templateUrl: './home-workbench.html',
   styleUrl: './home-workbench.scss'
 })
diff --git a/wordkeep-client/src/app/pages/landing/landing.html b/wordkeep-client/src/app/pages/landing/landing.html
index 6d66784..8820f38 100644
--- a/wordkeep-client/src/app/pages/landing/landing.html
+++ b/wordkeep-client/src/app/pages/landing/landing.html
@@ -1,4 +1,24 @@
-<main class="charter" aria-labelledby="charter-title">
+<main class="charter" aria-labelledby="charter-title" *transloco="let t; read: 'charter'">
+
+  <!-- Language pennants — swallowtail banners, upper-right. Toggle the
+       charter's living language (and the whole app locale) pre-login. -->
+  <nav class="charter__flags" aria-label="Language">
+    @for (l of locales; track l) {
+      <button
+        type="button"
+        class="pennant"
+        [class.pennant--en]="l === 'en'"
+        [class.pennant--ro]="l === 'ro'"
+        [class.pennant--active]="locale() === l"
+        (click)="setLocale(l)"
+        [attr.aria-pressed]="locale() === l"
+        [attr.aria-label]="l === 'ro' ? t('flags.ariaRo') : t('flags.ariaEn')"
+      >
+        <span class="pennant__staff" aria-hidden="true"></span>
+        <span class="pennant__cloth" aria-hidden="true"></span>
+      </button>
+    }
+  </nav>
 
   <a class="charter__crest" routerLink="/" aria-label="Steadfast Knight imprint">
     <img src="/assets/landing/_steadfast/medallion.png" alt="" />
@@ -10,18 +30,15 @@
     <header class="charter__head">
       <p class="charter__legend translatable" translatableToggle>
         <span class="translatable__la" lang="la">Carta Constitutionis</span>
-        <span class="translatable__en" lang="en">Founding Charter</span>
+        <span class="translatable__en" [attr.lang]="locale()" [innerHTML]="t('heading.translation')"></span>
       </p>
       <h1 id="charter-title" class="charter__title">WordKeep</h1>
-      <p class="charter__legend charter__legend--lo">
-        Granted by the Order of the Steadfast Knight,
-        in the year of grace MMXXVI.
-      </p>
+      <p class="charter__legend charter__legend--lo" [attr.lang]="locale()" [innerHTML]="t('subLegend')"></p>
     </header>
 
     <hr class="charter__rule" aria-hidden="true">
 
-    <!-- Body: real medieval-charter Latin opening, with English on hover -->
+    <!-- Body: real medieval-charter Latin opening, with the living language on hover -->
     <section class="charter__body" aria-label="Charter body">
       <p class="charter__opening translatable" translatableToggle>
         <span class="translatable__la" lang="la">
@@ -33,24 +50,14 @@ <h1 id="charter-title" class="charter__title">WordKeep</h1>
           quae <em>WordKeep</em> nominatur, ad verba tuenda, folia
           iungenda, et linguam vertendam, quamdiu libri fuerint.
         </span>
-        <span class="translatable__en" lang="en">
-          <span class="charter__init" aria-hidden="true">L</span><span class="charter__sr-only">L</span>et
-          those present and to come know that we,
-          <span class="charter__order">Master of the Order of the Steadfast Knight</span>,
-          in honor of the keeping of books, have granted, established,
-          and by this present charter confirmed the workshop called
-          <em>WordKeep</em>, for the guarding of words, the joining of
-          leaves, and the turning of tongues, for as long as books shall be.
-        </span>
+        <span class="translatable__en" [attr.lang]="locale()" [innerHTML]="t('opening.translation')"></span>
       </p>
 
       <p class="charter__call translatable" translatableToggle>
         <span class="translatable__la" lang="la">
           Praeterea statutum est haec tria officia, sub uno sigillo:
         </span>
-        <span class="translatable__en" lang="en">
-          Moreover, these three offices have been appointed, under one seal:
-        </span>
+        <span class="translatable__en" [attr.lang]="locale()" [innerHTML]="t('call.translation')"></span>
       </p>
     </section>
 
@@ -62,7 +69,7 @@ <h1 id="charter-title" class="charter__title">WordKeep</h1>
         <div class="article__copy">
           <h2 class="article__title translatable" translatableToggle>
             <span class="translatable__la" lang="la">De Lectione Paginae</span>
-            <span class="translatable__en" lang="en">Of the Reading of the Page</span>
+            <span class="translatable__en" [attr.lang]="locale()" [innerHTML]="t('article1.title')"></span>
           </h2>
           <p class="article__body translatable" translatableToggle>
             <span class="translatable__la" lang="la">
@@ -70,15 +77,11 @@ <h2 class="article__title translatable" translatableToggle>
               reddantur; rubricationes, manus, et marginalia inviolata
               servabuntur, nihil omittendo.
             </span>
-            <span class="translatable__en" lang="en">
-              That pages already written, by pen or by type, shall be
-              returned in faithful reading; the rubrics, the hands, and
-              the marginalia shall be preserved inviolate, nothing omitted.
-            </span>
+            <span class="translatable__en" [attr.lang]="locale()" [innerHTML]="t('article1.body')"></span>
           </p>
           <span class="article__sign translatable" translatableToggle>
             <span class="translatable__la" lang="la">&mdash; manu propria</span>
-            <span class="translatable__en" lang="en">&mdash; by my own hand</span>
+            <span class="translatable__en" [attr.lang]="locale()" [innerHTML]="t('article1.sign')"></span>
           </span>
         </div>
       </li>
@@ -88,7 +91,7 @@ <h2 class="article__title translatable" translatableToggle>
         <div class="article__copy">
           <h2 class="article__title translatable" translatableToggle>
             <span class="translatable__la" lang="la">De Iunctione Foliorum</span>
-            <span class="translatable__en" lang="en">Of the Joining of the Leaves</span>
+            <span class="translatable__en" [attr.lang]="locale()" [innerHTML]="t('article2.title')"></span>
           </h2>
           <p class="article__body translatable" translatableToggle>
             <span class="translatable__la" lang="la">
@@ -96,15 +99,11 @@ <h2 class="article__title translatable" translatableToggle>
               divisae reconcilientur, notae infra positae ad verba sua
               redeant.
             </span>
-            <span class="translatable__en" lang="en">
-              That facing pages shall be sewn together, sentences divided
-              across leaves reconciled, and notes placed below restored to
-              their own words.
-            </span>
+            <span class="translatable__en" [attr.lang]="locale()" [innerHTML]="t('article2.body')"></span>
           </p>
           <span class="article__sign translatable" translatableToggle>
             <span class="translatable__la" lang="la">&mdash; manu propria</span>
-            <span class="translatable__en" lang="en">&mdash; by my own hand</span>
+            <span class="translatable__en" [attr.lang]="locale()" [innerHTML]="t('article2.sign')"></span>
           </span>
         </div>
       </li>
@@ -114,7 +113,7 @@ <h2 class="article__title translatable" translatableToggle>
         <div class="article__copy">
           <h2 class="article__title translatable" translatableToggle>
             <span class="translatable__la" lang="la">De Versione Linguae</span>
-            <span class="translatable__en" lang="en">Of the Turning of the Tongue</span>
+            <span class="translatable__en" [attr.lang]="locale()" [innerHTML]="t('article3.title')"></span>
           </h2>
           <p class="article__body translatable" translatableToggle>
             <span class="translatable__la" lang="la">
@@ -122,15 +121,11 @@ <h2 class="article__title translatable" translatableToggle>
               pagina et nota cum nota, ipso textu adstante.
               Solvet lector pro foliis quae verterit, neque ante.
             </span>
-            <span class="translatable__en" lang="en">
-              That the volume shall be turned into another tongue, page
-              with page and note with note, the text itself standing fast.
-              The reader shall pay only for the leaves he turns, and not before.
-            </span>
+            <span class="translatable__en" [attr.lang]="locale()" [innerHTML]="t('article3.body')"></span>
           </p>
           <span class="article__sign translatable" translatableToggle>
             <span class="translatable__la" lang="la">&mdash; manu propria</span>
-            <span class="translatable__en" lang="en">&mdash; by my own hand</span>
+            <span class="translatable__en" [attr.lang]="locale()" [innerHTML]="t('article3.sign')"></span>
           </span>
         </div>
       </li>
@@ -145,16 +140,12 @@ <h2 class="article__title translatable" translatableToggle>
           <span>MMXXVI</span>.
           Hanc cartam, sub sigillis nostris, ratam habemus in perpetuum.
         </span>
-        <span class="translatable__en" lang="en">
-          Given at Sibiu, on the 8th day of the month of May, in the year
-          of grace <span>2026</span>.
-          This charter, under our seals, we ratify in perpetuity.
-        </span>
+        <span class="translatable__en" [attr.lang]="locale()" [innerHTML]="t('closing.translation')"></span>
       </p>
       <p class="charter__signed">
         <em class="translatable" translatableToggle>
           <span class="translatable__la" lang="la">&mdash; Magister Ordinis Constantis Equitis</span>
-          <span class="translatable__en" lang="en">&mdash; Master of the Order of the Steadfast Knight</span>
+          <span class="translatable__en" [attr.lang]="locale()" [innerHTML]="t('signed.translation')"></span>
         </em>
       </p>
     </section>
@@ -264,12 +255,10 @@ <h2 class="article__title translatable" translatableToggle>
     <!-- CTA -->
     <footer class="charter__foot">
       <nav class="charter__cta" aria-label="Begin">
-        <a routerLink="/register" class="cta cta--primary">Subscribe to the charter</a>
-        <a routerLink="/login" class="cta cta--secondary">Resume the office</a>
+        <a routerLink="/register" class="cta cta--primary" [attr.lang]="locale()">{{ t('cta.subscribe') }}</a>
+        <a routerLink="/login" class="cta cta--secondary" [attr.lang]="locale()">{{ t('cta.resume') }}</a>
       </nav>
-      <p class="charter__colophon">
-        Granted at Sibiu &middot; A. D. MMXXVI &middot; A Steadfast Knight imprint
-      </p>
+      <p class="charter__colophon" [attr.lang]="locale()" [innerHTML]="t('colophon')"></p>
     </footer>
 
   </article>
diff --git a/wordkeep-client/src/app/pages/landing/landing.scss b/wordkeep-client/src/app/pages/landing/landing.scss
index 981219e..14fa016 100644
--- a/wordkeep-client/src/app/pages/landing/landing.scss
+++ b/wordkeep-client/src/app/pages/landing/landing.scss
@@ -116,7 +116,11 @@
   text-align: justify;
 }
 
-.charter__init {
+/* These three live inside the opening paragraph, whose English/Romanian layer
+   is injected via [innerHTML]. Angular's view encapsulation would not reach
+   that injected markup, so pierce it with ::ng-deep (scoped to :host). The
+   static Latin spans match these too. */
+:host ::ng-deep .charter__init {
   font-family: var(--textura);
   font-weight: 700;
   font-size: 4.6em;
@@ -134,7 +138,7 @@
   100% { opacity: 1; transform: scale(1); filter: blur(0); }
 }
 
-.charter__sr-only {
+:host ::ng-deep .charter__sr-only {
   position: absolute;
   width: 1px; height: 1px;
   margin: -1px; padding: 0; overflow: hidden;
@@ -142,7 +146,7 @@
   white-space: nowrap;
 }
 
-.charter__order {
+:host ::ng-deep .charter__order {
   font-style: italic;
   color: var(--gules-deep);
 }
@@ -476,8 +480,110 @@ em.translatable {
   color: var(--ink-soft);
 }
 
+/* LANGUAGE PENNANTS ================================================ */
+.charter__flags {
+  position: absolute;
+  top: 0;
+  right: clamp(0.9rem, 3vw, 2.2rem);
+  z-index: 5;
+  display: flex;
+  gap: clamp(0.45rem, 1.2vw, 0.8rem);
+}
+
+.pennant {
+  --cloth-h: clamp(6.5rem, 13vw, 9.5rem);
+  --cloth-w: clamp(2.5rem, 4.5vw, 3.3rem);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  opacity: 0.82;
+  transform: scale(0.94);
+  transform-origin: top center;
+  filter: drop-shadow(0 3px 5px rgba(15, 16, 20, 0.16));
+  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
+}
+
+/* the rod the banner hangs from */
+.pennant__staff {
+  width: calc(var(--cloth-w) + 0.45rem);
+  height: 3px;
+  border-radius: 2px;
+  background: linear-gradient(180deg, #6a4a26, #3a2a14);
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
+}
+
+.pennant__cloth {
+  position: relative;
+  width: var(--cloth-w);
+  height: var(--cloth-h);
+  /* swallowtail / sparrow-tail notch at the foot of the banner */
+  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%);
+  display: flex;
+  justify-content: center;
+  padding-top: 0.45rem;
+  overflow: hidden;
+  box-shadow: inset -2px 0 5px rgba(0, 0, 0, 0.08), inset 3px 0 6px rgba(255, 255, 255, 0.18);
+}
+
+/* a soft sheen over the cloth */
+.pennant__cloth::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(105deg, rgba(255, 255, 255, 0.22) 0 14%, transparent 26% 100%);
+  pointer-events: none;
+}
+
+/* England — St George: bright gules cross on argent */
+.pennant--en .pennant__cloth {
+  background:
+    linear-gradient(#bb2f2c, #bb2f2c) center / 30% 100% no-repeat,
+    linear-gradient(#bb2f2c, #bb2f2c) center / 100% 26% no-repeat,
+    #f8f3e8;
+}
+
+/* Romania — vertical tricolour */
+.pennant--ro .pennant__cloth {
+  background: linear-gradient(90deg,
+    #27408b 0 33.33%,
+    #e3bf42 33.33% 66.66%,
+    #bb2f2c 66.66% 100%);
+}
+
+.pennant:hover,
+.pennant:focus-visible {
+  opacity: 1;
+  transform: scale(0.94) translateY(2px) rotate(-1.5deg);
+  outline: none;
+}
+
+.pennant--active {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.pennant--active .pennant__cloth {
+  box-shadow:
+    inset -2px 0 5px rgba(0, 0, 0, 0.08),
+    inset 3px 0 6px rgba(255, 255, 255, 0.18),
+    0 0 0 1.5px var(--gold);
+}
+
+.pennant:focus-visible .pennant__cloth {
+  outline: 2px solid var(--gold);
+  outline-offset: 2px;
+}
+
 @media (prefers-reduced-motion: reduce) {
-  .charter__init { animation: none; }
+  :host ::ng-deep .charter__init { animation: none; }
   .seal__stamp   { animation: none; opacity: 1; transform: rotate(var(--rot, 0deg)); }
   .seal__caption { animation: none; opacity: 1; }
+  .pennant,
+  .pennant:hover,
+  .pennant:focus-visible,
+  .pennant--active { transition: none; transform: none; }
 }
diff --git a/wordkeep-client/src/app/pages/landing/landing.spec.ts b/wordkeep-client/src/app/pages/landing/landing.spec.ts
index 2ce6e56..f343e67 100644
--- a/wordkeep-client/src/app/pages/landing/landing.spec.ts
+++ b/wordkeep-client/src/app/pages/landing/landing.spec.ts
@@ -1,7 +1,9 @@
 import { TestBed } from '@angular/core/testing';
 import { provideRouter } from '@angular/router';
+import { provideHttpClient } from '@angular/common/http';
 import { describe, it, expect, beforeEach, vi } from 'vitest';
 import { LandingComponent } from './landing';
+import { getTranslocoTestingModule } from '../../transloco/transloco-testing';
 
 function mockHoverMedia(hoverCapable: boolean): void {
   const impl = (query: string): MediaQueryList => ({
@@ -24,8 +26,8 @@ function mockHoverMedia(hoverCapable: boolean): void {
 describe('LandingComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [LandingComponent],
-      providers: [provideRouter([])],
+      imports: [LandingComponent, getTranslocoTestingModule()],
+      providers: [provideRouter([]), provideHttpClient()],
     }).compileComponents();
   });
 
diff --git a/wordkeep-client/src/app/pages/landing/landing.ts b/wordkeep-client/src/app/pages/landing/landing.ts
index 9f5f018..cde41e5 100644
--- a/wordkeep-client/src/app/pages/landing/landing.ts
+++ b/wordkeep-client/src/app/pages/landing/landing.ts
@@ -10,6 +10,8 @@ import {
 } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 import { RouterLink } from '@angular/router';
+import { TranslocoDirective } from '@jsverse/transloco';
+import { UserPreferencesService, Locale } from '../../services/user-preferences.service';
 
 @Directive({
   selector: '[translatableToggle]',
@@ -54,7 +56,7 @@ export class TranslatableToggleDirective {
 @Component({
   selector: 'app-landing',
   standalone: true,
-  imports: [RouterLink, TranslatableToggleDirective],
+  imports: [RouterLink, TranslatableToggleDirective, TranslocoDirective],
   templateUrl: './landing.html',
   styleUrl: './landing.scss'
 })
@@ -63,8 +65,17 @@ export class LandingComponent implements OnInit, OnDestroy {
   private static readonly LINK_ID = 'landing-charter-fonts';
 
   private readonly document = inject(DOCUMENT);
+  private readonly prefs = inject(UserPreferencesService);
   private linkEl: HTMLLinkElement | null = null;
 
+  /** Active locale — drives the charter's English-layer language and the flags. */
+  readonly locale = this.prefs.locale;
+  readonly locales: ReadonlyArray<Locale> = ['en', 'ro'];
+
+  setLocale(l: Locale): void {
+    this.prefs.setLocale(l);
+  }
+
   ngOnInit(): void {
     if (this.document.getElementById(LandingComponent.LINK_ID)) {
       return;
diff --git a/wordkeep-client/src/app/pages/login/login.html b/wordkeep-client/src/app/pages/login/login.html
index f7d22f2..7cc225c 100644
--- a/wordkeep-client/src/app/pages/login/login.html
+++ b/wordkeep-client/src/app/pages/login/login.html
@@ -1,6 +1,6 @@
-<div class="auth-container">
+<div class="auth-container" *transloco="let t; read: 'auth'">
   <aside class="auth-brand">
-    <a class="auth-brand__link" routerLink="/" aria-label="WordKeep — return to landing page">
+    <a class="auth-brand__link" routerLink="/" [attr.aria-label]="t('common.brandReturn')">
       <div class="auth-brand__logo">
         <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M6 20 V5 H9 V7 H10.5 V5 H13.5 V7 H15 V5 H18 V20 Z" stroke="currentColor" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round"/>
@@ -9,17 +9,17 @@
           <line x1="4" y1="20" x2="20" y2="20" stroke="currentColor" stroke-width="1.0" stroke-linecap="round"/>
         </svg>
       </div>
-      <span class="auth-brand__wordmark">WordKeep</span>
+      <span class="auth-brand__wordmark">{{ t('common.brand') }}</span>
     </a>
   </aside>
   <div class="auth-card">
     <div class="auth-header">
       @if (!twoFactorRequired()) {
-        <h1>Welcome back</h1>
-        <p>Sign in to your WordKeep account</p>
+        <h1>{{ t('login.welcomeBack') }}</h1>
+        <p>{{ t('login.subtitle') }}</p>
       } @else {
-        <h1>Two-factor authentication</h1>
-        <p>Enter the 6-digit code from your authenticator app</p>
+        <h1>{{ t('login.twoFactorTitle') }}</h1>
+        <p>{{ t('login.twoFactorSubtitle') }}</p>
       }
     </div>
 
@@ -31,7 +31,7 @@ <h1>Two-factor authentication</h1>
             <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
             <path d="M8 12L11 15L16 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
           </svg>
-          <span>Verification email sent. Please check your inbox.</span>
+          <span>{{ t('login.verificationSent') }}</span>
         </div>
       }
 
@@ -48,9 +48,9 @@ <h1>Two-factor authentication</h1>
           <button type="button" class="btn-resend" (click)="resendVerification()" [disabled]="resendLoading()">
             @if (resendLoading()) {
               <span class="spinner-small"></span>
-              Sending...
+              {{ t('login.sending') }}
             } @else {
-              Resend verification email
+              {{ t('login.resend') }}
             }
           </button>
         }
@@ -58,47 +58,47 @@ <h1>Two-factor authentication</h1>
 
       <form (ngSubmit)="onSubmit()" class="auth-form">
         <div class="form-group">
-          <label for="email">Email</label>
+          <label for="email">{{ t('common.email') }}</label>
           <input
             type="email"
             id="email"
             name="email"
             [(ngModel)]="email"
-            placeholder="Enter your email"
+            [placeholder]="t('common.emailPlaceholder')"
             autocomplete="email"
             required
           />
         </div>
 
         <div class="form-group">
-          <label for="password">Password</label>
+          <label for="password">{{ t('common.password') }}</label>
           <input
             type="password"
             id="password"
             name="password"
             [(ngModel)]="password"
-            placeholder="Enter your password"
+            [placeholder]="t('login.passwordPlaceholder')"
             autocomplete="current-password"
             required
           />
         </div>
 
         <div class="forgot-password-link">
-          <a routerLink="/forgot-password">Forgot password?</a>
+          <a routerLink="/forgot-password">{{ t('login.forgotPassword') }}</a>
         </div>
 
         <button type="submit" class="btn-primary" [disabled]="loading()">
           @if (loading()) {
             <span class="spinner"></span>
-            Signing in...
+            {{ t('login.signingIn') }}
           } @else {
-            Sign in
+            {{ t('common.signIn') }}
           }
         </button>
       </form>
 
       <div class="auth-footer">
-        <p>Don't have an account? <a routerLink="/register">Create one</a></p>
+        <p>{{ t('login.noAccount') }} <a routerLink="/register">{{ t('login.createOne') }}</a></p>
       </div>
 
     } @else {
@@ -115,27 +115,27 @@ <h1>Two-factor authentication</h1>
 
       <form (ngSubmit)="submitTwoFactor()" class="auth-form">
         <div class="form-group">
-          <label for="twoFactorCode">Authenticator code</label>
+          <label for="twoFactorCode">{{ t('login.authCode') }}</label>
           <input
             type="text"
             id="twoFactorCode"
             name="twoFactorCode"
             [(ngModel)]="twoFactorCode"
-            placeholder="000000"
+            [placeholder]="t('login.codePlaceholder')"
             autocomplete="one-time-code"
             inputmode="numeric"
             maxlength="20"
             autofocus
           />
-          <small class="field-hint">Or enter a recovery code if you've lost your device.</small>
+          <small class="field-hint">{{ t('login.recoveryHint') }}</small>
         </div>
 
         <button type="submit" class="btn-primary" [disabled]="twoFactorLoading()">
           @if (twoFactorLoading()) {
             <span class="spinner"></span>
-            Verifying...
+            {{ t('login.verifying') }}
           } @else {
-            Verify
+            {{ t('login.verify') }}
           }
         </button>
       </form>
diff --git a/wordkeep-client/src/app/pages/login/login.spec.ts b/wordkeep-client/src/app/pages/login/login.spec.ts
index 12438cc..2fc9cf4 100644
--- a/wordkeep-client/src/app/pages/login/login.spec.ts
+++ b/wordkeep-client/src/app/pages/login/login.spec.ts
@@ -6,6 +6,7 @@ import { describe, it, expect, beforeEach, vi } from 'vitest';
 import { LoginComponent } from './login';
 import { AuthService } from '../../services/auth.service';
 import { mockAuthResponse } from '../../test-utils';
+import { getTranslocoTestingModule } from '../../transloco/transloco-testing';
 
 describe('LoginComponent', () => {
   let component: LoginComponent;
@@ -25,7 +26,7 @@ describe('LoginComponent', () => {
     };
 
     await TestBed.configureTestingModule({
-      imports: [LoginComponent],
+      imports: [LoginComponent, getTranslocoTestingModule()],
       providers: [
         provideRouter([]),
         { provide: AuthService, useValue: mockAuthService }
diff --git a/wordkeep-client/src/app/pages/login/login.ts b/wordkeep-client/src/app/pages/login/login.ts
index 1340afc..d0060a1 100644
--- a/wordkeep-client/src/app/pages/login/login.ts
+++ b/wordkeep-client/src/app/pages/login/login.ts
@@ -1,17 +1,19 @@
-import { Component, signal } from '@angular/core';
+import { Component, inject, signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { Router, RouterLink } from '@angular/router';
+import { TranslocoDirective, TranslocoService } from '@jsverse/transloco';
 import { AuthService } from '../../services/auth.service';
 
 @Component({
   selector: 'app-login',
   standalone: true,
-  imports: [CommonModule, FormsModule, RouterLink],
+  imports: [CommonModule, FormsModule, RouterLink, TranslocoDirective],
   templateUrl: './login.html',
   styleUrl: './login.scss'
 })
 export class LoginComponent {
+  private transloco = inject(TranslocoService);
   email = '';
   password = '';
   error = signal<string | null>(null);
@@ -33,7 +35,7 @@ export class LoginComponent {
 
   onSubmit(): void {
     if (!this.email || !this.password) {
-      this.error.set('Please fill in all fields');
+      this.error.set(this.transloco.translate('auth.common.fillAllFields'));
       return;
     }
 
@@ -58,10 +60,10 @@ export class LoginComponent {
           this.error.set(err.error.message);
           this.showResendOption.set(true);
         } else if (err.status === 422) {
-          const message = err.error?.message || err.error?.errors?.email?.[0] || 'Invalid credentials';
+          const message = err.error?.message || err.error?.errors?.email?.[0] || this.transloco.translate('auth.login.invalidCredentials');
           this.error.set(message);
         } else {
-          this.error.set('An error occurred. Please try again.');
+          this.error.set(this.transloco.translate('auth.common.genericError'));
         }
       }
     });
@@ -69,7 +71,7 @@ export class LoginComponent {
 
   submitTwoFactor(): void {
     if (!this.twoFactorCode) {
-      this.twoFactorError.set('Please enter your code.');
+      this.twoFactorError.set(this.transloco.translate('auth.login.enterCode'));
       return;
     }
 
@@ -83,7 +85,7 @@ export class LoginComponent {
       error: (err) => {
         this.twoFactorLoading.set(false);
         this.twoFactorError.set(
-          err.error?.errors?.code?.[0] ?? err.error?.message ?? 'Invalid code. Try again.'
+          err.error?.errors?.code?.[0] ?? err.error?.message ?? this.transloco.translate('auth.login.invalidCode')
         );
       }
     });
@@ -99,7 +101,7 @@ export class LoginComponent {
       },
       error: () => {
         this.resendLoading.set(false);
-        this.error.set('Failed to resend verification email. Please try again.');
+        this.error.set(this.transloco.translate('auth.login.resendFailed'));
       }
     });
   }
diff --git a/wordkeep-client/src/app/pages/page-linking-reader/page-linking-reader.html b/wordkeep-client/src/app/pages/page-linking-reader/page-linking-reader.html
index fba291d..a1e2e67 100644
--- a/wordkeep-client/src/app/pages/page-linking-reader/page-linking-reader.html
+++ b/wordkeep-client/src/app/pages/page-linking-reader/page-linking-reader.html
@@ -1,10 +1,11 @@
 <app-layout>
+  <ng-container *transloco="let t; read: 'pageLinking'">
   <div class="linking-reader-container">
 
     @if (loading()) {
       <div class="loading-state">
         <div class="spinner"></div>
-        <p>Loading document...</p>
+        <p>{{ t('reader.loading') }}</p>
       </div>
     } @else if (document()) {
 
@@ -14,11 +15,11 @@
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
             <path fill-rule="evenodd" d="M17 10a.75.75 0 01-.75.75H5.612l4.158 3.96a.75.75 0 11-1.04 1.08l-5.5-5.25a.75.75 0 010-1.08l5.5-5.25a.75.75 0 111.04 1.08L5.612 9.25H16.25A.75.75 0 0117 10z" clip-rule="evenodd" />
           </svg>
-          Page Linking
+          {{ t('reader.backLink') }}
         </a>
         <div class="header-center">
           <h1 class="doc-title">{{ document()!.effective_filename }}</h1>
-          <span class="pair-indicator">Pair {{ currentPair() }} / {{ totalPairs() }}</span>
+          <span class="pair-indicator">{{ t('reader.pairIndicator', { current: currentPair(), total: totalPairs() }) }}</span>
         </div>
       </div>
 
@@ -36,20 +37,20 @@ <h1 class="doc-title">{{ document()!.effective_filename }}</h1>
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
             <path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clip-rule="evenodd" />
           </svg>
-          Prev
+          {{ t('reader.prev') }}
         </button>
         <button class="btn-nav" [disabled]="!canGoNext()" (click)="nextPair()">
-          Next
+          {{ t('reader.next') }}
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
             <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
           </svg>
         </button>
         <div class="nav-separator"></div>
         <button class="btn-nav-unprocessed" [disabled]="navigatingUnlinked()" (click)="goToFirstUnlinked()">
-          First Unprocessed
+          {{ t('reader.firstUnprocessed') }}
         </button>
         <button class="btn-nav-unprocessed" [disabled]="navigatingUnlinked()" (click)="goToNextUnlinked()">
-          Next Unprocessed
+          {{ t('reader.nextUnprocessed') }}
         </button>
       </div>
 
@@ -59,7 +60,7 @@ <h1 class="doc-title">{{ document()!.effective_filename }}</h1>
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
             <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
           </svg>
-          All done! All page pairs have been linked.
+          {{ t('reader.allDone') }}
         </div>
       }
 
@@ -73,12 +74,12 @@ <h1 class="doc-title">{{ document()!.effective_filename }}</h1>
           <!-- Page A -->
           <div class="page-col">
             <div class="page-header">
-              <div class="page-label">Page {{ currentPair() }}</div>
+              <div class="page-label">{{ t('reader.pageLabel', { page: currentPair() }) }}</div>
               <button
                 class="btn-ignore"
                 [class.active]="isPageAIgnored()"
                 [disabled]="togglingIgnoreA()"
-                [title]="isPageAIgnored() ? 'Un-ignore page ' + currentPair() : 'Ignore page ' + currentPair()"
+                [title]="isPageAIgnored() ? t('reader.unignorePage', { page: currentPair() }) : t('reader.ignorePage', { page: currentPair() })"
                 (click)="toggleIgnore('a')"
               >
                 @if (togglingIgnoreA()) {
@@ -88,7 +89,7 @@ <h1 class="doc-title">{{ document()!.effective_filename }}</h1>
                     <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" />
                   </svg>
                 }
-                {{ isPageAIgnored() ? 'Un-ignore' : 'Ignore' }}
+                {{ isPageAIgnored() ? t('reader.unignore') : t('reader.ignore') }}
               </button>
             </div>
             <div class="page-image-wrapper">
@@ -97,12 +98,12 @@ <h1 class="doc-title">{{ document()!.effective_filename }}</h1>
                   <div class="spinner"></div>
                 </div>
               } @else if (imageUrlA()) {
-                <img [src]="imageUrlA()!" alt="Page {{ currentPair() }}" class="page-img" />
+                <img [src]="imageUrlA()!" [alt]="t('reader.pageAlt', { page: currentPair() })" class="page-img" />
                 @if (isPageAIgnored()) {
-                  <div class="ignored-overlay">Ignored</div>
+                  <div class="ignored-overlay"><span class="ignored-overlay__badge">{{ t('reader.ignoredOverlay') }}</span></div>
                 }
               } @else {
-                <div class="image-placeholder image-error">Image unavailable</div>
+                <div class="image-placeholder image-error">{{ t('reader.imageUnavailable') }}</div>
               }
             </div>
           </div>
@@ -117,14 +118,14 @@ <h1 class="doc-title">{{ document()!.effective_filename }}</h1>
             </div>
             <div class="link-controls">
               @if (isPairAffectedByIgnore()) {
-                <div class="ignored-pair-indicator" title="One or more pages in this pair are ignored. Un-ignore the page to set a link decision.">
+                <div class="ignored-pair-indicator" [title]="t('reader.ignoredPairTooltip')">
                   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                     <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" />
                   </svg>
-                  <span>IGNORED</span>
+                  <span>{{ t('reader.ignoredLabel') }}</span>
                 </div>
                 <button class="btn-save" [disabled]="!canGoNext()" (click)="nextPair()">
-                  Next
+                  {{ t('reader.next') }}
                 </button>
               } @else {
                 <button
@@ -135,7 +136,7 @@ <h1 class="doc-title">{{ document()!.effective_filename }}</h1>
                   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                     <path fill-rule="evenodd" d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z" clip-rule="evenodd" />
                   </svg>
-                  New Row
+                  {{ t('reader.newRow') }}
                 </button>
                 <button
                   class="btn-toggle"
@@ -146,17 +147,17 @@ <h1 class="doc-title">{{ document()!.effective_filename }}</h1>
                     <path d="M3.505 2.365A41.369 41.369 0 019 2c1.863 0 3.697.124 5.495.365 1.247.167 2.18 1.108 2.435 2.268a4.45 4.45 0 00-.577-.069 43.141 43.141 0 00-4.706 0C9.229 4.696 7.5 6.727 7.5 8.998v2.24c0 1.413.67 2.735 1.76 3.562l-2.98 2.98A.75.75 0 015 17.25v-3.443c-.501-.048-1-.106-1.495-.172C2.033 13.438 1 12.162 1 10.72V5.28c0-1.441 1.033-2.717 2.505-2.914z" />
                     <path d="M14 6c-.762 0-1.52.02-2.271.062C10.157 6.148 9 7.472 9 8.998v2.24c0 1.519 1.147 2.839 2.71 2.935.214.013.428.024.642.034.2.009.385.09.518.224l2.35 2.35a.75.75 0 001.28-.531v-2.07c1.453-.195 2.5-1.463 2.5-2.915V8.998c0-1.526-1.157-2.85-2.729-2.936A41.645 41.645 0 0014 6z" />
                   </svg>
-                  Continue Row
+                  {{ t('reader.continueRow') }}
                 </button>
                 @if (!selectedDecision()) {
-                  <span class="no-selection-hint">No selection — pair will remain unlinked</span>
+                  <span class="no-selection-hint">{{ t('reader.noSelectionHint') }}</span>
                 }
                 <button class="btn-save" [disabled]="saving()" (click)="saveAndContinue()">
                   @if (saving()) {
                     <div class="spinner-sm"></div>
-                    Saving...
+                    {{ t('reader.saving') }}
                   } @else {
-                    Save &amp; Continue
+                    {{ t('reader.saveAndContinue') }}
                   }
                 </button>
               }
@@ -167,12 +168,12 @@ <h1 class="doc-title">{{ document()!.effective_filename }}</h1>
           <!-- Page B -->
           <div class="page-col">
             <div class="page-header">
-              <div class="page-label">Page {{ currentPair() + 1 }}</div>
+              <div class="page-label">{{ t('reader.pageLabel', { page: currentPair() + 1 }) }}</div>
               <button
                 class="btn-ignore"
                 [class.active]="isPageBIgnored()"
                 [disabled]="togglingIgnoreB()"
-                [title]="isPageBIgnored() ? 'Un-ignore page ' + (currentPair() + 1) : 'Ignore page ' + (currentPair() + 1)"
+                [title]="isPageBIgnored() ? t('reader.unignorePage', { page: currentPair() + 1 }) : t('reader.ignorePage', { page: currentPair() + 1 })"
                 (click)="toggleIgnore('b')"
               >
                 @if (togglingIgnoreB()) {
@@ -182,7 +183,7 @@ <h1 class="doc-title">{{ document()!.effective_filename }}</h1>
                     <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" />
                   </svg>
                 }
-                {{ isPageBIgnored() ? 'Un-ignore' : 'Ignore' }}
+                {{ isPageBIgnored() ? t('reader.unignore') : t('reader.ignore') }}
               </button>
             </div>
             <div class="page-image-wrapper">
@@ -191,12 +192,12 @@ <h1 class="doc-title">{{ document()!.effective_filename }}</h1>
                   <div class="spinner"></div>
                 </div>
               } @else if (imageUrlB()) {
-                <img [src]="imageUrlB()!" alt="Page {{ currentPair() + 1 }}" class="page-img" />
+                <img [src]="imageUrlB()!" [alt]="t('reader.pageAlt', { page: currentPair() + 1 })" class="page-img" />
                 @if (isPageBIgnored()) {
-                  <div class="ignored-overlay">Ignored</div>
+                  <div class="ignored-overlay"><span class="ignored-overlay__badge">{{ t('reader.ignoredOverlay') }}</span></div>
                 }
               } @else {
-                <div class="image-placeholder image-error">Image unavailable</div>
+                <div class="image-placeholder image-error">{{ t('reader.imageUnavailable') }}</div>
               }
             </div>
           </div>
@@ -206,4 +207,5 @@ <h1 class="doc-title">{{ document()!.effective_filename }}</h1>
 
     }
   </div>
+  </ng-container>
 </app-layout>
diff --git a/wordkeep-client/src/app/pages/page-linking-reader/page-linking-reader.scss b/wordkeep-client/src/app/pages/page-linking-reader/page-linking-reader.scss
index 157b816..450902d 100644
--- a/wordkeep-client/src/app/pages/page-linking-reader/page-linking-reader.scss
+++ b/wordkeep-client/src/app/pages/page-linking-reader/page-linking-reader.scss
@@ -229,13 +229,12 @@
   align-items: center;
   justify-content: center;
   pointer-events: none;
-  font-size: 0;
 
-  &::after {
-    content: 'IGNORED';
+  &__badge {
     font-size: 1rem;
     font-weight: 700;
     letter-spacing: 0.1em;
+    text-transform: uppercase;
     padding: 0.25rem 0.75rem;
     background: var(--color-fg-muted);
     color: var(--color-surface-2);
diff --git a/wordkeep-client/src/app/pages/page-linking-reader/page-linking-reader.spec.ts b/wordkeep-client/src/app/pages/page-linking-reader/page-linking-reader.spec.ts
index 044dab0..57656b5 100644
--- a/wordkeep-client/src/app/pages/page-linking-reader/page-linking-reader.spec.ts
+++ b/wordkeep-client/src/app/pages/page-linking-reader/page-linking-reader.spec.ts
@@ -6,6 +6,7 @@ import { PageLinkingReaderComponent } from './page-linking-reader';
 import { DocumentService } from '../../services/document.service';
 import { AuthService } from '../../services/auth.service';
 import { mockDocument, mockPageLinkPair } from '../../test-utils';
+import { getTranslocoTestingModule } from '../../transloco/transloco-testing';
 
 describe('PageLinkingReaderComponent', () => {
   let component: PageLinkingReaderComponent;
@@ -54,7 +55,7 @@ describe('PageLinkingReaderComponent', () => {
     };
 
     await TestBed.configureTestingModule({
-      imports: [PageLinkingReaderComponent],
+      imports: [PageLinkingReaderComponent, getTranslocoTestingModule()],
       providers: [
         provideRouter([]),
         { provide: DocumentService, useValue: mockDocumentService },
diff --git a/wordkeep-client/src/app/pages/page-linking-reader/page-linking-reader.ts b/wordkeep-client/src/app/pages/page-linking-reader/page-linking-reader.ts
index 04baf40..5a26a15 100644
--- a/wordkeep-client/src/app/pages/page-linking-reader/page-linking-reader.ts
+++ b/wordkeep-client/src/app/pages/page-linking-reader/page-linking-reader.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit, OnDestroy, inject, signal, computed, effect, DestroyRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ActivatedRoute, RouterLink } from '@angular/router';
+import { provideTranslocoScope, TranslocoDirective, TranslocoService } from '@jsverse/transloco';
 import { DocumentService } from '../../services/document.service';
 import { Document, PageLinkPair, PageLinkDecision } from '../../models/document.model';
 import { LayoutComponent } from '../../components/layout/layout';
@@ -8,7 +9,8 @@ import { LayoutComponent } from '../../components/layout/layout';
 @Component({
   selector: 'app-page-linking-reader',
   standalone: true,
-  imports: [CommonModule, RouterLink, LayoutComponent],
+  imports: [CommonModule, RouterLink, LayoutComponent, TranslocoDirective],
+  providers: [provideTranslocoScope('pageLinking')],
   templateUrl: './page-linking-reader.html',
   styleUrl: './page-linking-reader.scss'
 })
@@ -16,6 +18,7 @@ export class PageLinkingReaderComponent implements OnInit, OnDestroy {
   private route = inject(ActivatedRoute);
   private documentService = inject(DocumentService);
   private destroyRef = inject(DestroyRef);
+  private transloco = inject(TranslocoService);
 
   document = signal<Document | null>(null);
   loading = signal(true);
@@ -96,7 +99,7 @@ export class PageLinkingReaderComponent implements OnInit, OnDestroy {
         this.loading.set(false);
       },
       error: () => {
-        this.error.set('Failed to load document');
+        this.error.set(this.transloco.translate('pageLinking.reader.errorLoadDocument'));
         this.loading.set(false);
       }
     });
@@ -120,7 +123,7 @@ export class PageLinkingReaderComponent implements OnInit, OnDestroy {
         this.loadingPair.set(false);
       },
       error: () => {
-        this.error.set('Failed to load page data');
+        this.error.set(this.transloco.translate('pageLinking.reader.errorLoadPageData'));
         this.loadingPair.set(false);
       }
     });
@@ -181,7 +184,7 @@ export class PageLinkingReaderComponent implements OnInit, OnDestroy {
         }
       },
       error: () => {
-        this.error.set('Failed to save. Please try again.');
+        this.error.set(this.transloco.translate('pageLinking.reader.errorSave'));
         this.saving.set(false);
       }
     });
@@ -240,7 +243,7 @@ export class PageLinkingReaderComponent implements OnInit, OnDestroy {
         this.loadPairData(doc.id, this.currentPair());
       },
       error: () => {
-        this.error.set('Failed to update page ignore status');
+        this.error.set(this.transloco.translate('pageLinking.reader.errorIgnore'));
         if (side === 'a') {
           this.togglingIgnoreA.set(false);
         } else {
diff --git a/wordkeep-client/src/app/pages/page-linking/page-linking.html b/wordkeep-client/src/app/pages/page-linking/page-linking.html
index 331ac20..862c050 100644
--- a/wordkeep-client/src/app/pages/page-linking/page-linking.html
+++ b/wordkeep-client/src/app/pages/page-linking/page-linking.html
@@ -1,9 +1,10 @@
 <app-layout>
+<ng-container *transloco="let t; read: 'pageLinking'">
 <div class="page-linking-container">
   <header class="page-header">
     <div class="header-content">
-      <h1>Page Linking</h1>
-      <p>Link consecutive pages to define how text flows between them</p>
+      <h1>{{ t('list.title') }}</h1>
+      <p>{{ t('list.subtitle') }}</p>
     </div>
   </header>
 
@@ -25,10 +26,10 @@ <h1>Page Linking</h1>
   <!-- Documents List -->
   <div class="documents-section">
     <div class="section-header">
-      <h2>Your Documents</h2>
+      <h2>{{ t('list.documentsHeading') }}</h2>
       <div class="header-actions">
         @if (total() > 0) {
-          <span class="doc-count">{{ total() }} document{{ total() === 1 ? '' : 's' }}</span>
+          <span class="doc-count">{{ total() === 1 ? t('list.docCount', { count: total() }) : t('list.docCountPlural', { count: total() }) }}</span>
         }
         <app-sort-dropdown [value]="sort()" (valueChange)="onSortChange($event)"></app-sort-dropdown>
       </div>
@@ -37,7 +38,7 @@ <h2>Your Documents</h2>
     @if (loading()) {
       <div class="loading-state">
         <div class="spinner"></div>
-        <p>Loading documents...</p>
+        <p>{{ t('list.loading') }}</p>
       </div>
     } @else if (documents().length === 0) {
       <div class="empty-state">
@@ -46,8 +47,8 @@ <h2>Your Documents</h2>
             <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
           </svg>
         </div>
-        <h3>No documents ready</h3>
-        <p>Only ready documents with more than one page appear here</p>
+        <h3>{{ t('list.emptyTitle') }}</h3>
+        <p>{{ t('list.emptySubtitle') }}</p>
       </div>
     } @else {
       <div class="documents-grid">
@@ -63,11 +64,11 @@ <h3>No documents ready</h3>
                 <div class="doc-name-row">
                   <h3 class="doc-name">{{ doc.effective_filename }}</h3>
                   @if (doc.has_custom_name) {
-                    <span class="renamed-badge" [title]="'Original: ' + doc.original_filename">renamed</span>
+                    <span class="renamed-badge" [title]="t('list.originalTitle', { name: doc.original_filename })">{{ t('list.renamedBadge') }}</span>
                   }
                 </div>
                 <div class="doc-meta">
-                  <span>{{ doc.page_count }} pages</span>
+                  <span>{{ t('list.pages', { count: doc.page_count }) }}</span>
                   <span class="separator">•</span>
                   <span>{{ formatFileSize(doc.file_size) }}</span>
                 </div>
@@ -88,7 +89,7 @@ <h3 class="doc-name">{{ doc.effective_filename }}</h3>
                 [routerLink]="['/page-linking', doc.id]"
                 [queryParams]="{ page: getResumePage(doc) }"
               >
-                Link
+                {{ t('list.linkAction') }}
               </a>
             </div>
           </div>
@@ -106,15 +107,15 @@ <h3 class="doc-name">{{ doc.effective_filename }}</h3>
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
               <path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clip-rule="evenodd" />
             </svg>
-            Previous
+            {{ t('list.previous') }}
           </button>
-          <span class="page-info">Page {{ currentPage() }} of {{ lastPage() }}</span>
+          <span class="page-info">{{ t('list.pageInfo', { current: currentPage(), last: lastPage() }) }}</span>
           <button
             class="btn-page"
             [disabled]="currentPage() === lastPage()"
             (click)="goToPage(currentPage() + 1)"
           >
-            Next
+            {{ t('list.next') }}
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
               <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
             </svg>
@@ -124,4 +125,5 @@ <h3 class="doc-name">{{ doc.effective_filename }}</h3>
     }
   </div>
 </div>
+</ng-container>
 </app-layout>
diff --git a/wordkeep-client/src/app/pages/page-linking/page-linking.spec.ts b/wordkeep-client/src/app/pages/page-linking/page-linking.spec.ts
index 2f60fc4..008d062 100644
--- a/wordkeep-client/src/app/pages/page-linking/page-linking.spec.ts
+++ b/wordkeep-client/src/app/pages/page-linking/page-linking.spec.ts
@@ -7,6 +7,7 @@ import { DocumentService } from '../../services/document.service';
 import { AuthService } from '../../services/auth.service';
 import { mockDocument, mockDocumentForLinking, mockPaginatedDocuments } from '../../test-utils';
 import { Document } from '../../models/document.model';
+import { getTranslocoTestingModule } from '../../transloco/transloco-testing';
 
 describe('PageLinkingComponent', () => {
   let component: PageLinkingComponent;
@@ -33,7 +34,7 @@ describe('PageLinkingComponent', () => {
     };
 
     await TestBed.configureTestingModule({
-      imports: [PageLinkingComponent],
+      imports: [PageLinkingComponent, getTranslocoTestingModule()],
       providers: [
         provideRouter([]),
         { provide: DocumentService, useValue: mockDocumentService },
@@ -174,7 +175,7 @@ describe('PageLinkingComponent', () => {
 
       TestBed.resetTestingModule();
       await TestBed.configureTestingModule({
-        imports: [PageLinkingComponent],
+        imports: [PageLinkingComponent, getTranslocoTestingModule()],
         providers: [
           provideRouter([]),
           { provide: DocumentService, useValue: mockDocumentService },
diff --git a/wordkeep-client/src/app/pages/page-linking/page-linking.ts b/wordkeep-client/src/app/pages/page-linking/page-linking.ts
index a7041aa..bc90cf8 100644
--- a/wordkeep-client/src/app/pages/page-linking/page-linking.ts
+++ b/wordkeep-client/src/app/pages/page-linking/page-linking.ts
@@ -1,6 +1,8 @@
 import { Component, OnInit, inject, signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterLink } from '@angular/router';
+import { provideTranslocoScope, TranslocoDirective, TranslocoService } from '@jsverse/transloco';
+import { formatDateTime } from '../../utils/date-format';
 import { DocumentService } from '../../services/document.service';
 import { Document, SortOptions } from '../../models/document.model';
 import { LayoutComponent } from '../../components/layout/layout';
@@ -10,13 +12,15 @@ import { UserViewStatesService } from '../../services/user-view-states.service';
 @Component({
   selector: 'app-page-linking',
   standalone: true,
-  imports: [CommonModule, RouterLink, LayoutComponent, SortDropdownComponent],
+  imports: [CommonModule, RouterLink, LayoutComponent, SortDropdownComponent, TranslocoDirective],
+  providers: [provideTranslocoScope('pageLinking')],
   templateUrl: './page-linking.html',
   styleUrl: './page-linking.scss'
 })
 export class PageLinkingComponent implements OnInit {
   private documentService = inject(DocumentService);
   private viewStates = inject(UserViewStatesService);
+  private transloco = inject(TranslocoService);
 
   documents = signal<Document[]>([]);
   loading = signal(true);
@@ -49,7 +53,7 @@ export class PageLinkingComponent implements OnInit {
         this.loading.set(false);
       },
       error: () => {
-        this.error.set('Failed to load documents');
+        this.error.set(this.transloco.translate('pageLinking.list.errorLoad'));
         this.loading.set(false);
       }
     });
@@ -70,13 +74,7 @@ export class PageLinkingComponent implements OnInit {
   }
 
   formatDate(dateString: string): string {
-    return new Date(dateString).toLocaleDateString('en-US', {
-      year: 'numeric',
-      month: 'short',
-      day: 'numeric',
-      hour: '2-digit',
-      minute: '2-digit'
-    });
+    return formatDateTime(dateString, this.transloco.getActiveLang());
   }
 
   getResumePage(doc: Document): number {
@@ -86,7 +84,7 @@ export class PageLinkingComponent implements OnInit {
   getLinksProgressText(doc: Document): string {
     const p = doc.links_progress;
     if (!p) return '';
-    return `${p.completed} / ${p.total} pages linked`;
+    return this.transloco.translate('pageLinking.list.progressText', { completed: p.completed, total: p.total });
   }
 
   getLinksPercent(doc: Document): number {
diff --git a/wordkeep-client/src/app/pages/profile/info/profile-info.html b/wordkeep-client/src/app/pages/profile/info/profile-info.html
index 1104783..47f67c2 100644
--- a/wordkeep-client/src/app/pages/profile/info/profile-info.html
+++ b/wordkeep-client/src/app/pages/profile/info/profile-info.html
@@ -1,27 +1,28 @@
+<ng-container *transloco="let t; read: 'profile'">
 <div class="profile-info">
-  <h2 class="section-title">Profile Info</h2>
+  <h2 class="section-title">{{ t('info.title') }}</h2>
 
   <!-- ── Avatar ───────────────────────────────────── -->
   <div class="card">
     <div class="card-row avatar-row">
       <div class="avatar-preview">
         @if (user()?.avatar_url) {
-          <img [src]="user()!.avatar_url" alt="Profile photo" />
+          <img [src]="user()!.avatar_url" [alt]="t('info.avatar.alt')" />
         } @else {
           <span class="avatar-initials">{{ (user()?.name ?? '').charAt(0).toUpperCase() }}</span>
         }
       </div>
       <div class="avatar-actions">
         <p class="avatar-hint">
-          {{ user()?.avatar_url ? 'Update your profile photo.' : 'Add a profile photo.' }}
+          {{ user()?.avatar_url ? t('info.avatar.hintUpdate') : t('info.avatar.hintAdd') }}
         </p>
         <div class="action-row">
           <button class="btn-outline" (click)="openCropDialog()">
-            {{ user()?.avatar_url ? 'Change Photo' : 'Upload Photo' }}
+            {{ user()?.avatar_url ? t('info.avatar.changePhoto') : t('info.avatar.uploadPhoto') }}
           </button>
           @if (user()?.avatar_url) {
             <button class="btn-ghost-danger" [disabled]="removingAvatar()" (click)="removeAvatar()">
-              {{ removingAvatar() ? 'Removing…' : 'Remove' }}
+              {{ removingAvatar() ? t('info.avatar.removing') : t('info.avatar.remove') }}
             </button>
           }
         </div>
@@ -31,13 +32,13 @@ <h2 class="section-title">Profile Info</h2>
 
   <!-- ── Name ─────────────────────────────────────── -->
   <div class="card">
-    <div class="card-label">Name</div>
+    <div class="card-label">{{ t('info.name.label') }}</div>
     @if (!editingName()) {
       <div class="card-row">
         <span class="field-value">{{ user()?.name }}</span>
         <button class="btn-edit" (click)="startEditingName()">
           <svg viewBox="0 0 24 24" fill="none"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
-          Edit
+          {{ t('info.name.edit') }}
         </button>
       </div>
     } @else {
@@ -48,7 +49,7 @@ <h2 class="section-title">Profile Info</h2>
           [(ngModel)]="nameValue"
           [ngModel]="nameValue()"
           (ngModelChange)="nameValue.set($event)"
-          placeholder="Your name"
+          [placeholder]="t('info.name.placeholder')"
           maxlength="255"
           (keyup.enter)="saveName()"
           (keyup.escape)="cancelEditingName()"
@@ -59,9 +60,9 @@ <h2 class="section-title">Profile Info</h2>
         }
         <div class="edit-actions">
           <button class="btn-primary-sm" [disabled]="savingName()" (click)="saveName()">
-            {{ savingName() ? 'Saving…' : 'Save' }}
+            {{ savingName() ? t('info.name.saving') : t('info.name.save') }}
           </button>
-          <button class="btn-ghost" (click)="cancelEditingName()">Cancel</button>
+          <button class="btn-ghost" (click)="cancelEditingName()">{{ t('info.name.cancel') }}</button>
         </div>
       </div>
     }
@@ -69,13 +70,13 @@ <h2 class="section-title">Profile Info</h2>
 
   <!-- ── Email ─────────────────────────────────────── -->
   <div class="card">
-    <div class="card-label">Email</div>
+    <div class="card-label">{{ t('info.email.label') }}</div>
     <div class="card-row">
       <span class="field-value">{{ user()?.email }}</span>
       @if (!user()?.pending_email) {
         <button class="btn-edit" (click)="openEmailModal()">
           <svg viewBox="0 0 24 24" fill="none"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
-          Change
+          {{ t('info.email.change') }}
         </button>
       }
     </div>
@@ -84,18 +85,18 @@ <h2 class="section-title">Profile Info</h2>
       <div class="pending-banner">
         <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/><path d="M12 8v4m0 4h.01" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
         <div class="pending-text">
-          <span>Pending change to <strong>{{ user()!.pending_email }}</strong></span>
-          <small>Check your new inbox for the verification link. Expires {{ formatExpiry(user()!.pending_email_expires_at) }}.</small>
+          <span [innerHTML]="t('info.email.pending', { email: user()!.pending_email })"></span>
+          <small>{{ t('info.email.pendingHint', { date: formatExpiry(user()!.pending_email_expires_at) }) }}</small>
           @if (resendSuccess()) {
-            <small class="resend-ok">Verification email resent.</small>
+            <small class="resend-ok">{{ t('info.email.resent') }}</small>
           }
         </div>
         <div class="pending-actions">
           <button class="btn-ghost-sm" [disabled]="resendingEmail()" (click)="resendEmailVerification()">
-            {{ resendingEmail() ? 'Sending…' : 'Resend' }}
+            {{ resendingEmail() ? t('info.email.sending') : t('info.email.resend') }}
           </button>
           <button class="btn-ghost-danger-sm" [disabled]="cancellingEmail()" (click)="cancelEmailChange()">
-            {{ cancellingEmail() ? 'Cancelling…' : 'Cancel' }}
+            {{ cancellingEmail() ? t('info.email.cancelling') : t('info.email.cancel') }}
           </button>
         </div>
       </div>
@@ -116,7 +117,7 @@ <h2 class="section-title">Profile Info</h2>
   <div class="modal-backdrop" (click)="closeEmailModal()">
     <div class="modal" (click)="$event.stopPropagation()">
       <div class="modal-header">
-        <h3>Change Email</h3>
+        <h3>{{ t('info.emailModal.title') }}</h3>
         <button class="close-btn" (click)="closeEmailModal()">
           <svg viewBox="0 0 24 24" fill="none"><line x1="18" y1="6" x2="6" y2="18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><line x1="6" y1="6" x2="18" y2="18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
         </button>
@@ -124,13 +125,13 @@ <h3>Change Email</h3>
 
       <div class="modal-body">
         @if (emailModalStep() === 1) {
-          <p class="modal-desc">Enter your current password to confirm your identity.</p>
-          <label class="form-label">Current Password</label>
+          <p class="modal-desc">{{ t('info.emailModal.passwordDesc') }}</p>
+          <label class="form-label">{{ t('info.emailModal.currentPasswordLabel') }}</label>
           <input
             class="text-input"
             type="password"
             [(ngModel)]="emailPasswordValue"
-            placeholder="Your current password"
+            [placeholder]="t('info.emailModal.currentPasswordPlaceholder')"
             (keyup.enter)="proceedToEmailStep()"
             autofocus
           />
@@ -138,13 +139,13 @@ <h3>Change Email</h3>
             <p class="field-error">{{ emailModalError() }}</p>
           }
         } @else if (emailModalStep() === 2) {
-          <p class="modal-desc">Enter the new email address. A verification link will be sent to it.</p>
-          <label class="form-label">New Email</label>
+          <p class="modal-desc">{{ t('info.emailModal.emailDesc') }}</p>
+          <label class="form-label">{{ t('info.emailModal.newEmailLabel') }}</label>
           <input
             class="text-input"
             type="email"
             [(ngModel)]="emailNewValue"
-            placeholder="new@example.com"
+            [placeholder]="t('info.emailModal.newEmailPlaceholder')"
             (keyup.enter)="submitEmailChange()"
             autofocus
           />
@@ -155,17 +156,18 @@ <h3>Change Email</h3>
       </div>
 
       <div class="modal-footer">
-        <button class="btn-secondary" (click)="closeEmailModal()">Cancel</button>
+        <button class="btn-secondary" (click)="closeEmailModal()">{{ t('info.emailModal.cancel') }}</button>
         @if (emailModalStep() === 1) {
           <button class="btn-primary-modal" [disabled]="verifyingPassword()" (click)="proceedToEmailStep()">
-            {{ verifyingPassword() ? 'Checking…' : 'Continue' }}
+            {{ verifyingPassword() ? t('info.emailModal.checking') : t('info.emailModal.continue') }}
           </button>
         } @else {
           <button class="btn-primary-modal" [disabled]="submittingEmail()" (click)="submitEmailChange()">
-            {{ submittingEmail() ? 'Sending…' : 'Send Verification' }}
+            {{ submittingEmail() ? t('info.emailModal.sending') : t('info.emailModal.sendVerification') }}
           </button>
         }
       </div>
     </div>
   </div>
 }
+</ng-container>
diff --git a/wordkeep-client/src/app/pages/profile/info/profile-info.spec.ts b/wordkeep-client/src/app/pages/profile/info/profile-info.spec.ts
index 2d8972d..21752c3 100644
--- a/wordkeep-client/src/app/pages/profile/info/profile-info.spec.ts
+++ b/wordkeep-client/src/app/pages/profile/info/profile-info.spec.ts
@@ -4,10 +4,12 @@ import { FormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 import { of, throwError } from 'rxjs';
 import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { TranslocoDirective } from '@jsverse/transloco';
 import { ProfileInfoComponent } from './profile-info';
 import { AuthService } from '../../../services/auth.service';
 import { ProfileService } from '../../../services/profile.service';
 import { mockUser } from '../../../test-utils';
+import { getTranslocoTestingModule } from '../../../transloco/transloco-testing';
 
 // Stub out the avatar crop dialog so ngx-image-cropper is not loaded in tests
 @Component({ selector: 'app-avatar-crop-dialog', template: '', standalone: true })
@@ -54,14 +56,14 @@ describe('ProfileInfoComponent', () => {
     };
 
     await TestBed.configureTestingModule({
-      imports: [ProfileInfoComponent],
+      imports: [ProfileInfoComponent, getTranslocoTestingModule()],
       providers: [
         { provide: AuthService, useValue: mockAuthService },
         { provide: ProfileService, useValue: mockProfileService },
       ],
     })
       .overrideComponent(ProfileInfoComponent, {
-        set: { imports: [CommonModule, FormsModule, StubAvatarCropDialogComponent] },
+        set: { imports: [CommonModule, FormsModule, StubAvatarCropDialogComponent, TranslocoDirective] },
       })
       .compileComponents();
 
diff --git a/wordkeep-client/src/app/pages/profile/info/profile-info.ts b/wordkeep-client/src/app/pages/profile/info/profile-info.ts
index cee3e01..a113a23 100644
--- a/wordkeep-client/src/app/pages/profile/info/profile-info.ts
+++ b/wordkeep-client/src/app/pages/profile/info/profile-info.ts
@@ -1,6 +1,8 @@
 import { Component, OnInit, inject, signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
+import { provideTranslocoScope, TranslocoDirective, TranslocoService } from '@jsverse/transloco';
+import { formatLocaleDate } from '../../../utils/date-format';
 import { AuthService } from '../../../services/auth.service';
 import { ProfileService } from '../../../services/profile.service';
 import { AvatarCropDialogComponent } from '../../../components/avatar-crop-dialog/avatar-crop-dialog';
@@ -8,13 +10,15 @@ import { AvatarCropDialogComponent } from '../../../components/avatar-crop-dialo
 @Component({
   selector: 'app-profile-info',
   standalone: true,
-  imports: [CommonModule, FormsModule, AvatarCropDialogComponent],
+  imports: [CommonModule, FormsModule, AvatarCropDialogComponent, TranslocoDirective],
   templateUrl: './profile-info.html',
-  styleUrl: './profile-info.scss'
+  styleUrl: './profile-info.scss',
+  providers: [provideTranslocoScope('profile')]
 })
 export class ProfileInfoComponent implements OnInit {
   private authService = inject(AuthService);
   private profileService = inject(ProfileService);
+  private transloco = inject(TranslocoService);
 
   readonly user = this.authService.user;
 
@@ -82,7 +86,7 @@ export class ProfileInfoComponent implements OnInit {
 
   saveName(): void {
     const name = this.nameValue().trim();
-    if (!name) { this.nameError.set('Name is required.'); return; }
+    if (!name) { this.nameError.set(this.transloco.translate('profile.info.name.required')); return; }
 
     this.savingName.set(true);
     this.nameError.set(null);
@@ -94,7 +98,7 @@ export class ProfileInfoComponent implements OnInit {
         this.savingName.set(false);
       },
       error: (err) => {
-        this.nameError.set(err.error?.errors?.name?.[0] ?? 'Failed to save. Try again.');
+        this.nameError.set(err.error?.errors?.name?.[0] ?? this.transloco.translate('profile.info.name.saveFailed'));
         this.savingName.set(false);
       }
     });
@@ -115,7 +119,7 @@ export class ProfileInfoComponent implements OnInit {
 
   proceedToEmailStep(): void {
     if (!this.emailPasswordValue) {
-      this.emailModalError.set('Password is required.');
+      this.emailModalError.set(this.transloco.translate('profile.info.emailModal.passwordRequired'));
       return;
     }
     this.emailModalError.set(null);
@@ -128,7 +132,7 @@ export class ProfileInfoComponent implements OnInit {
       error: (err) => {
         this.verifyingPassword.set(false);
         this.emailModalError.set(
-          err?.error?.errors?.password?.[0] ?? err?.error?.message ?? 'Incorrect password.'
+          err?.error?.errors?.password?.[0] ?? err?.error?.message ?? this.transloco.translate('profile.info.emailModal.incorrectPassword')
         );
       },
     });
@@ -136,7 +140,7 @@ export class ProfileInfoComponent implements OnInit {
 
   submitEmailChange(): void {
     if (!this.emailNewValue) {
-      this.emailModalError.set('New email is required.');
+      this.emailModalError.set(this.transloco.translate('profile.info.emailModal.newEmailRequired'));
       return;
     }
 
@@ -161,7 +165,7 @@ export class ProfileInfoComponent implements OnInit {
         } else if (errors?.new_email) {
           this.emailModalError.set(errors.new_email[0]);
         } else {
-          this.emailModalError.set(err.error?.message ?? 'Failed to request email change. Try again.');
+          this.emailModalError.set(err.error?.message ?? this.transloco.translate('profile.info.emailModal.requestFailed'));
         }
       }
     });
@@ -194,6 +198,6 @@ export class ProfileInfoComponent implements OnInit {
 
   formatExpiry(iso: string | null | undefined): string {
     if (!iso) return '';
-    return new Date(iso).toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' });
+    return formatLocaleDate(iso, this.transloco.getActiveLang(), { month: 'short', day: 'numeric', year: 'numeric' });
   }
 }
diff --git a/wordkeep-client/src/app/pages/profile/personalisation/profile-personalisation.html b/wordkeep-client/src/app/pages/profile/personalisation/profile-personalisation.html
index b3846be..f22863c 100644
--- a/wordkeep-client/src/app/pages/profile/personalisation/profile-personalisation.html
+++ b/wordkeep-client/src/app/pages/profile/personalisation/profile-personalisation.html
@@ -1,12 +1,13 @@
+<ng-container *transloco="let t; read: 'profile'">
 <header class="page-header">
-  <h1>Personalisation</h1>
-  <p>Pick a layout, a palette, and a colour mode.</p>
+  <h1>{{ t('personalisation.title') }}</h1>
+  <p>{{ t('personalisation.subtitle') }}</p>
 </header>
 
 <section class="settings-section">
   <div class="section-header">
-    <h2>Layout</h2>
-    <span class="active-name">{{ layoutService.layout() }}</span>
+    <h2>{{ t('personalisation.layoutHeading') }}</h2>
+    <span class="active-name">{{ t('personalisation.layouts.' + layoutService.layout() + '.label') }}</span>
   </div>
 
   <div class="layout-grid">
@@ -18,8 +19,8 @@ <h2>Layout</h2>
         (click)="setLayout(l.id)"
         [attr.aria-pressed]="layoutService.layout() === l.id"
       >
-        <span class="layout-card__name">{{ l.label }}</span>
-        <span class="layout-card__blurb">{{ l.blurb }}</span>
+        <span class="layout-card__name">{{ t('personalisation.layouts.' + l.id + '.label') }}</span>
+        <span class="layout-card__blurb">{{ t('personalisation.layouts.' + l.id + '.blurb') }}</span>
         @if (layoutService.layout() === l.id) {
           <svg class="layout-card__check" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
             <path d="M3 8.5L6.5 12L13 5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
@@ -32,8 +33,8 @@ <h2>Layout</h2>
 
 <section class="settings-section">
   <div class="section-header">
-    <h2>Palette</h2>
-    <span class="active-name">{{ themeService.palette() }}</span>
+    <h2>{{ t('personalisation.paletteHeading') }}</h2>
+    <span class="active-name">{{ t('personalisation.palettes.' + themeService.palette() + '.label') }}</span>
   </div>
 
   <div class="palette-grid">
@@ -51,8 +52,8 @@ <h2>Palette</h2>
           <span class="palette-card__chip" [style.background]="p.swatch.detail"></span>
         </span>
         <span class="palette-card__body">
-          <span class="palette-card__name">{{ p.label }}</span>
-          <span class="palette-card__blurb">{{ p.blurb }}</span>
+          <span class="palette-card__name">{{ t('personalisation.palettes.' + p.id + '.label') }}</span>
+          <span class="palette-card__blurb">{{ t('personalisation.palettes.' + p.id + '.blurb') }}</span>
         </span>
         @if (themeService.palette() === p.id) {
           <svg class="palette-card__check" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
@@ -66,8 +67,8 @@ <h2>Palette</h2>
 
 <section class="settings-section">
   <div class="section-header">
-    <h2>Colour mode</h2>
-    <span class="active-name">{{ themeService.mode() }} &middot; resolved {{ themeService.resolved() }}</span>
+    <h2>{{ t('personalisation.modeHeading') }}</h2>
+    <span class="active-name">{{ t('personalisation.mode.' + themeService.mode()) }} &middot; {{ t('personalisation.resolvedPrefix') }} {{ t('personalisation.mode.' + themeService.resolved()) }}</span>
   </div>
 
   <div class="mode-row">
@@ -79,8 +80,32 @@ <h2>Colour mode</h2>
         (click)="setMode(m.id)"
         [attr.aria-pressed]="themeService.mode() === m.id"
       >
-        {{ m.label }}
+        {{ t('personalisation.mode.' + m.id) }}
       </button>
     }
   </div>
 </section>
+
+<section class="settings-section">
+  <div class="section-header">
+    <h2>{{ t('personalisation.language.title') }}</h2>
+    <span class="active-name">{{ t('personalisation.language.name.' + prefs.locale()) }}</span>
+  </div>
+
+  <p class="section-blurb">{{ t('personalisation.language.description') }}</p>
+
+  <div class="mode-row" role="group" [attr.aria-label]="t('personalisation.language.title')">
+    @for (l of locales; track l) {
+      <button
+        type="button"
+        class="lang-button"
+        [class.active]="prefs.locale() === l"
+        (click)="setLocale(l)"
+        [attr.aria-pressed]="prefs.locale() === l"
+      >
+        {{ t('personalisation.language.name.' + l) }}
+      </button>
+    }
+  </div>
+</section>
+</ng-container>
diff --git a/wordkeep-client/src/app/pages/profile/personalisation/profile-personalisation.scss b/wordkeep-client/src/app/pages/profile/personalisation/profile-personalisation.scss
index 0510eab..35fed49 100644
--- a/wordkeep-client/src/app/pages/profile/personalisation/profile-personalisation.scss
+++ b/wordkeep-client/src/app/pages/profile/personalisation/profile-personalisation.scss
@@ -50,6 +50,13 @@
   }
 }
 
+.section-blurb {
+  margin: 0 0 1rem;
+  font-size: 0.875rem;
+  color: var(--color-fg-muted);
+  line-height: 1.5;
+}
+
 // ── Layout grid ───────────────────────────────────────────
 
 .layout-grid {
@@ -209,7 +216,8 @@
   overflow: hidden;
 }
 
-.mode-button {
+.mode-button,
+.lang-button {
   padding: 0.5rem 1.25rem;
   background: var(--color-surface);
   border: none;
diff --git a/wordkeep-client/src/app/pages/profile/personalisation/profile-personalisation.spec.ts b/wordkeep-client/src/app/pages/profile/personalisation/profile-personalisation.spec.ts
index 6cd4fca..dd2e2e0 100644
--- a/wordkeep-client/src/app/pages/profile/personalisation/profile-personalisation.spec.ts
+++ b/wordkeep-client/src/app/pages/profile/personalisation/profile-personalisation.spec.ts
@@ -1,8 +1,10 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideHttpClient } from '@angular/common/http';
 import { describe, it, expect, beforeEach, vi } from 'vitest';
 import { ProfilePersonalisationComponent } from './profile-personalisation';
 import { LayoutService, LAYOUTS } from '../../../services/layout.service';
 import { ThemeService, PALETTES } from '../../../services/theme.service';
+import { getTranslocoTestingModule } from '../../../transloco/transloco-testing';
 
 describe('ProfilePersonalisationComponent', () => {
   let fixture: ComponentFixture<ProfilePersonalisationComponent>;
@@ -20,7 +22,8 @@ describe('ProfilePersonalisationComponent', () => {
     document.documentElement.removeAttribute('data-theme');
 
     await TestBed.configureTestingModule({
-      imports: [ProfilePersonalisationComponent],
+      imports: [ProfilePersonalisationComponent, getTranslocoTestingModule()],
+      providers: [provideHttpClient()],
     }).compileComponents();
 
     fixture = TestBed.createComponent(ProfilePersonalisationComponent);
diff --git a/wordkeep-client/src/app/pages/profile/personalisation/profile-personalisation.ts b/wordkeep-client/src/app/pages/profile/personalisation/profile-personalisation.ts
index 8704d91..3d7603e 100644
--- a/wordkeep-client/src/app/pages/profile/personalisation/profile-personalisation.ts
+++ b/wordkeep-client/src/app/pages/profile/personalisation/profile-personalisation.ts
@@ -1,18 +1,21 @@
 import { Component, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { TranslocoDirective } from '@jsverse/transloco';
 import { LayoutService, LAYOUTS, Layout } from '../../../services/layout.service';
 import { ThemeService, PALETTES, Palette, ThemeMode } from '../../../services/theme.service';
+import { UserPreferencesService, Locale } from '../../../services/user-preferences.service';
 
 @Component({
   selector: 'app-profile-personalisation',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, TranslocoDirective],
   templateUrl: './profile-personalisation.html',
   styleUrl: './profile-personalisation.scss'
 })
 export class ProfilePersonalisationComponent {
   layoutService = inject(LayoutService);
   themeService = inject(ThemeService);
+  prefs = inject(UserPreferencesService);
 
   readonly layouts = LAYOUTS;
   readonly palettes = PALETTES;
@@ -21,8 +24,10 @@ export class ProfilePersonalisationComponent {
     { id: 'light', label: 'Light' },
     { id: 'dark',  label: 'Dark'  },
   ];
+  readonly locales: ReadonlyArray<Locale> = ['en', 'ro'];
 
   setLayout(l: Layout): void { this.layoutService.setLayout(l); }
   setPalette(p: Palette): void { this.themeService.setPalette(p); }
   setMode(m: ThemeMode): void { this.themeService.setMode(m); }
+  setLocale(l: Locale): void { this.prefs.setLocale(l); }
 }
diff --git a/wordkeep-client/src/app/pages/profile/profile.html b/wordkeep-client/src/app/pages/profile/profile.html
index aa45942..025fd44 100644
--- a/wordkeep-client/src/app/pages/profile/profile.html
+++ b/wordkeep-client/src/app/pages/profile/profile.html
@@ -1,21 +1,21 @@
 <app-layout>
-  <div class="profile-page">
+  <div class="profile-page" *transloco="let t; read: 'profile'">
     <aside class="profile-sidebar">
-      <h2 class="sidebar-title">Account</h2>
+      <h2 class="sidebar-title">{{ t('nav.account') }}</h2>
       <nav class="sidebar-nav">
         <a routerLink="info" routerLinkActive="active" class="sidebar-link">
           <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
             <circle cx="12" cy="8" r="4" stroke="currentColor" stroke-width="2"/>
             <path d="M4 20c0-4 3.6-7 8-7s8 3 8 7" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
           </svg>
-          Profile Info
+          {{ t('nav.info') }}
         </a>
         <a routerLink="security" routerLinkActive="active" class="sidebar-link">
           <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
             <rect x="3" y="11" width="18" height="11" rx="2" stroke="currentColor" stroke-width="2"/>
             <path d="M7 11V7a5 5 0 0 1 10 0v4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
           </svg>
-          Account Security
+          {{ t('nav.security') }}
         </a>
         <a routerLink="personalisation" routerLinkActive="active" class="sidebar-link">
           <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -24,7 +24,7 @@ <h2 class="sidebar-title">Account</h2>
             <circle cx="13.5" cy="17.5" r="2.5" stroke="currentColor" stroke-width="2"/>
             <circle cx="19"   cy="11.5" r="1.6" stroke="currentColor" stroke-width="2"/>
           </svg>
-          Personalisation
+          {{ t('nav.personalisation') }}
         </a>
       </nav>
     </aside>
diff --git a/wordkeep-client/src/app/pages/profile/profile.spec.ts b/wordkeep-client/src/app/pages/profile/profile.spec.ts
index 4accb19..1d09fc6 100644
--- a/wordkeep-client/src/app/pages/profile/profile.spec.ts
+++ b/wordkeep-client/src/app/pages/profile/profile.spec.ts
@@ -4,6 +4,7 @@ import { of } from 'rxjs';
 import { describe, it, expect, beforeEach, vi } from 'vitest';
 import { ProfileComponent } from './profile';
 import { AuthService } from '../../services/auth.service';
+import { getTranslocoTestingModule } from '../../transloco/transloco-testing';
 
 describe('ProfileComponent', () => {
   let component: ProfileComponent;
@@ -18,7 +19,7 @@ describe('ProfileComponent', () => {
     };
 
     await TestBed.configureTestingModule({
-      imports: [ProfileComponent],
+      imports: [ProfileComponent, getTranslocoTestingModule()],
       providers: [
         provideRouter([]),
         { provide: AuthService, useValue: mockAuthService },
diff --git a/wordkeep-client/src/app/pages/profile/profile.ts b/wordkeep-client/src/app/pages/profile/profile.ts
index 8879f7f..57a8b11 100644
--- a/wordkeep-client/src/app/pages/profile/profile.ts
+++ b/wordkeep-client/src/app/pages/profile/profile.ts
@@ -1,11 +1,12 @@
 import { Component } from '@angular/core';
 import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
+import { TranslocoDirective } from '@jsverse/transloco';
 import { LayoutComponent } from '../../components/layout/layout';
 
 @Component({
   selector: 'app-profile',
   standalone: true,
-  imports: [LayoutComponent, RouterOutlet, RouterLink, RouterLinkActive],
+  imports: [LayoutComponent, RouterOutlet, RouterLink, RouterLinkActive, TranslocoDirective],
   templateUrl: './profile.html',
   styleUrl: './profile.scss'
 })
diff --git a/wordkeep-client/src/app/pages/profile/security/profile-security.html b/wordkeep-client/src/app/pages/profile/security/profile-security.html
index ac3bd4e..eda465f 100644
--- a/wordkeep-client/src/app/pages/profile/security/profile-security.html
+++ b/wordkeep-client/src/app/pages/profile/security/profile-security.html
@@ -1,41 +1,42 @@
+<ng-container *transloco="let t; read: 'profile'">
 <div class="profile-security">
-  <h2 class="section-title">Account Security</h2>
+  <h2 class="section-title">{{ t('security.title') }}</h2>
 
   @if (passwordChangeSuccess()) {
     <div class="success-banner">
       <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/><path d="M8 12l3 3 5-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
-      Password updated successfully.
+      {{ t('security.passwordUpdated') }}
     </div>
   }
 
   <!-- ── Password ──────────────────────────────────────── -->
   <div class="card">
-    <div class="card-label">Password</div>
+    <div class="card-label">{{ t('security.password.label') }}</div>
     <div class="card-row">
       <span class="field-value">••••••••</span>
       <button class="btn-edit" (click)="openPasswordModal()">
         <svg viewBox="0 0 24 24" fill="none"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
-        Change
+        {{ t('security.password.change') }}
       </button>
     </div>
   </div>
 
   <!-- ── Two-Factor Authentication ─────────────────────── -->
   <div class="card">
-    <div class="card-label">Two-Factor Authentication</div>
+    <div class="card-label">{{ t('security.twoFactor.label') }}</div>
     <div class="card-row">
       <div class="two-fa-info">
         @if (user()?.two_factor_enabled) {
-          <span class="badge badge-enabled">Enabled</span>
+          <span class="badge badge-enabled">{{ t('security.twoFactor.enabled') }}</span>
         } @else {
-          <span class="badge badge-disabled">Disabled</span>
+          <span class="badge badge-disabled">{{ t('security.twoFactor.disabled') }}</span>
         }
-        <p class="two-fa-desc">Use an authenticator app (Google Authenticator, 1Password, etc.) to add an extra layer of security.</p>
+        <p class="two-fa-desc">{{ t('security.twoFactor.desc') }}</p>
       </div>
       @if (user()?.two_factor_enabled) {
-        <button class="btn-danger-outline" (click)="openDisableTwoFactorModal()">Disable</button>
+        <button class="btn-danger-outline" (click)="openDisableTwoFactorModal()">{{ t('security.twoFactor.disable') }}</button>
       } @else {
-        <button class="btn-outline" (click)="openTwoFactorModal()">Enable</button>
+        <button class="btn-outline" (click)="openTwoFactorModal()">{{ t('security.twoFactor.enable') }}</button>
       }
     </div>
   </div>
@@ -46,7 +47,7 @@ <h2 class="section-title">Account Security</h2>
   <div class="modal-backdrop" (click)="closePasswordModal()">
     <div class="modal" (click)="$event.stopPropagation()">
       <div class="modal-header">
-        <h3>Change Password</h3>
+        <h3>{{ t('security.passwordModal.title') }}</h3>
         <button class="close-btn" (click)="closePasswordModal()">
           <svg viewBox="0 0 24 24" fill="none"><line x1="18" y1="6" x2="6" y2="18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><line x1="6" y1="6" x2="18" y2="18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
         </button>
@@ -54,18 +55,18 @@ <h3>Change Password</h3>
 
       <div class="modal-body">
         @if (passwordModalStep() === 1) {
-          <p class="modal-desc">Enter your current password to confirm your identity.</p>
-          <label class="form-label">Current Password</label>
-          <input class="text-input" type="password" [(ngModel)]="passwordCurrentValue" placeholder="Your current password" (keyup.enter)="proceedToNewPasswordStep()" autofocus />
+          <p class="modal-desc">{{ t('security.passwordModal.currentDesc') }}</p>
+          <label class="form-label">{{ t('security.passwordModal.currentLabel') }}</label>
+          <input class="text-input" type="password" [(ngModel)]="passwordCurrentValue" [placeholder]="t('security.passwordModal.currentPlaceholder')" (keyup.enter)="proceedToNewPasswordStep()" autofocus />
           @if (passwordModalError()) {
             <p class="field-error">{{ passwordModalError() }}</p>
           }
         } @else if (passwordModalStep() === 2) {
-          <p class="modal-desc">Choose a new password. It must be at least 8 characters.</p>
-          <label class="form-label">New Password</label>
-          <input class="text-input" type="password" [(ngModel)]="passwordNewValue" placeholder="New password" autofocus />
-          <label class="form-label">Confirm New Password</label>
-          <input class="text-input" type="password" [(ngModel)]="passwordConfirmValue" placeholder="Confirm new password" (keyup.enter)="submitPasswordChange()" />
+          <p class="modal-desc">{{ t('security.passwordModal.newDesc') }}</p>
+          <label class="form-label">{{ t('security.passwordModal.newLabel') }}</label>
+          <input class="text-input" type="password" [(ngModel)]="passwordNewValue" [placeholder]="t('security.passwordModal.newPlaceholder')" autofocus />
+          <label class="form-label">{{ t('security.passwordModal.confirmLabel') }}</label>
+          <input class="text-input" type="password" [(ngModel)]="passwordConfirmValue" [placeholder]="t('security.passwordModal.confirmPlaceholder')" (keyup.enter)="submitPasswordChange()" />
           @if (passwordModalError()) {
             <p class="field-error">{{ passwordModalError() }}</p>
           }
@@ -73,14 +74,14 @@ <h3>Change Password</h3>
       </div>
 
       <div class="modal-footer">
-        <button class="btn-secondary" (click)="closePasswordModal()">Cancel</button>
+        <button class="btn-secondary" (click)="closePasswordModal()">{{ t('security.passwordModal.cancel') }}</button>
         @if (passwordModalStep() === 1) {
           <button class="btn-primary-modal" [disabled]="verifyingPasswordChange()" (click)="proceedToNewPasswordStep()">
-            {{ verifyingPasswordChange() ? 'Checking…' : 'Continue' }}
+            {{ verifyingPasswordChange() ? t('security.passwordModal.checking') : t('security.passwordModal.continue') }}
           </button>
         } @else {
           <button class="btn-primary-modal" [disabled]="submittingPasswordChange()" (click)="submitPasswordChange()">
-            {{ submittingPasswordChange() ? 'Saving…' : 'Save Password' }}
+            {{ submittingPasswordChange() ? t('security.passwordModal.saving') : t('security.passwordModal.savePassword') }}
           </button>
         }
       </div>
@@ -93,7 +94,7 @@ <h3>Change Password</h3>
   <div class="modal-backdrop" (click)="twoFactorModalStep() < 3 && closeTwoFactorModal()">
     <div class="modal modal-wide" (click)="$event.stopPropagation()">
       <div class="modal-header">
-        <h3>Enable Two-Factor Authentication</h3>
+        <h3>{{ t('security.enable2fa.title') }}</h3>
         @if (twoFactorModalStep() < 3) {
           <button class="close-btn" (click)="closeTwoFactorModal()">
             <svg viewBox="0 0 24 24" fill="none"><line x1="18" y1="6" x2="6" y2="18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><line x1="6" y1="6" x2="18" y2="18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
@@ -103,23 +104,23 @@ <h3>Enable Two-Factor Authentication</h3>
 
       <div class="modal-body">
         @if (twoFactorModalStep() === 1) {
-          <p class="modal-desc">Enter your current password to confirm your identity.</p>
-          <label class="form-label">Current Password</label>
-          <input class="text-input" type="password" [(ngModel)]="twoFactorPasswordValue" placeholder="Your current password" (keyup.enter)="proceedToQrStep()" autofocus />
+          <p class="modal-desc">{{ t('security.enable2fa.passwordDesc') }}</p>
+          <label class="form-label">{{ t('security.enable2fa.passwordLabel') }}</label>
+          <input class="text-input" type="password" [(ngModel)]="twoFactorPasswordValue" [placeholder]="t('security.enable2fa.passwordPlaceholder')" (keyup.enter)="proceedToQrStep()" autofocus />
           @if (twoFactorModalError()) {
             <p class="field-error">{{ twoFactorModalError() }}</p>
           }
         } @else if (twoFactorModalStep() === 2) {
-          <p class="modal-desc">Scan this QR code with your authenticator app, then enter the 6-digit code to confirm.</p>
+          <p class="modal-desc">{{ t('security.enable2fa.scanDesc') }}</p>
           <div class="qr-container">
             <div class="qr-code" [innerHTML]="twoFactorQrSvg()"></div>
           </div>
           <details class="manual-secret">
-            <summary>Can't scan? Enter manually</summary>
+            <summary>{{ t('security.enable2fa.manualSummary') }}</summary>
             <code class="secret-code">{{ twoFactorSecret() }}</code>
           </details>
-          <label class="form-label">Verification Code</label>
-          <input class="text-input" type="text" [(ngModel)]="twoFactorCodeValue" placeholder="000000" inputmode="numeric" maxlength="6" (keyup.enter)="submitEnableTwoFactor()" autofocus />
+          <label class="form-label">{{ t('security.enable2fa.codeLabel') }}</label>
+          <input class="text-input" type="text" [(ngModel)]="twoFactorCodeValue" [placeholder]="t('security.enable2fa.codePlaceholder')" inputmode="numeric" maxlength="6" (keyup.enter)="submitEnableTwoFactor()" autofocus />
           @if (twoFactorModalError()) {
             <p class="field-error">{{ twoFactorModalError() }}</p>
           }
@@ -127,8 +128,8 @@ <h3>Enable Two-Factor Authentication</h3>
           <div class="recovery-intro">
             <svg viewBox="0 0 24 24" fill="none"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke="#059669" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
             <div>
-              <strong>Two-factor authentication enabled!</strong>
-              <p>Save these recovery codes somewhere safe. Each code can only be used once if you lose access to your authenticator app.</p>
+              <strong>{{ t('security.enable2fa.enabledTitle') }}</strong>
+              <p>{{ t('security.enable2fa.recoveryDesc') }}</p>
             </div>
           </div>
           <div class="recovery-codes">
@@ -136,23 +137,23 @@ <h3>Enable Two-Factor Authentication</h3>
               <code class="recovery-code">{{ code }}</code>
             }
           </div>
-          <button class="btn-copy" (click)="copyRecoveryCodes()">Copy all codes</button>
+          <button class="btn-copy" (click)="copyRecoveryCodes()">{{ t('security.enable2fa.copyAll') }}</button>
         }
       </div>
 
       <div class="modal-footer">
         @if (twoFactorModalStep() === 1) {
-          <button class="btn-secondary" (click)="closeTwoFactorModal()">Cancel</button>
+          <button class="btn-secondary" (click)="closeTwoFactorModal()">{{ t('security.enable2fa.cancel') }}</button>
           <button class="btn-primary-modal" [disabled]="settingUpTwoFactor()" (click)="proceedToQrStep()">
-            {{ settingUpTwoFactor() ? 'Checking…' : 'Continue' }}
+            {{ settingUpTwoFactor() ? t('security.enable2fa.checking') : t('security.enable2fa.continue') }}
           </button>
         } @else if (twoFactorModalStep() === 2) {
-          <button class="btn-secondary" (click)="closeTwoFactorModal()">Cancel</button>
+          <button class="btn-secondary" (click)="closeTwoFactorModal()">{{ t('security.enable2fa.cancel') }}</button>
           <button class="btn-primary-modal" [disabled]="confirmingTwoFactor()" (click)="submitEnableTwoFactor()">
-            {{ confirmingTwoFactor() ? 'Verifying…' : 'Confirm' }}
+            {{ confirmingTwoFactor() ? t('security.enable2fa.verifying') : t('security.enable2fa.confirm') }}
           </button>
         } @else {
-          <button class="btn-primary-modal" (click)="closeTwoFactorModal()">Done</button>
+          <button class="btn-primary-modal" (click)="closeTwoFactorModal()">{{ t('security.enable2fa.done') }}</button>
         }
       </div>
     </div>
@@ -164,27 +165,28 @@ <h3>Enable Two-Factor Authentication</h3>
   <div class="modal-backdrop" (click)="closeDisableTwoFactorModal()">
     <div class="modal" (click)="$event.stopPropagation()">
       <div class="modal-header">
-        <h3>Disable Two-Factor Authentication</h3>
+        <h3>{{ t('security.disable2fa.title') }}</h3>
         <button class="close-btn" (click)="closeDisableTwoFactorModal()">
           <svg viewBox="0 0 24 24" fill="none"><line x1="18" y1="6" x2="6" y2="18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><line x1="6" y1="6" x2="18" y2="18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
         </button>
       </div>
 
       <div class="modal-body">
-        <p class="modal-desc">Enter your password to disable two-factor authentication. This will make your account less secure.</p>
-        <label class="form-label">Current Password</label>
-        <input class="text-input" type="password" [(ngModel)]="disablePasswordValue" placeholder="Your current password" (keyup.enter)="submitDisableTwoFactor()" autofocus />
+        <p class="modal-desc">{{ t('security.disable2fa.desc') }}</p>
+        <label class="form-label">{{ t('security.disable2fa.passwordLabel') }}</label>
+        <input class="text-input" type="password" [(ngModel)]="disablePasswordValue" [placeholder]="t('security.disable2fa.passwordPlaceholder')" (keyup.enter)="submitDisableTwoFactor()" autofocus />
         @if (disableTwoFactorError()) {
           <p class="field-error">{{ disableTwoFactorError() }}</p>
         }
       </div>
 
       <div class="modal-footer">
-        <button class="btn-secondary" (click)="closeDisableTwoFactorModal()">Cancel</button>
+        <button class="btn-secondary" (click)="closeDisableTwoFactorModal()">{{ t('security.disable2fa.cancel') }}</button>
         <button class="btn-danger-modal" [disabled]="disablingTwoFactor()" (click)="submitDisableTwoFactor()">
-          {{ disablingTwoFactor() ? 'Disabling…' : 'Disable 2FA' }}
+          {{ disablingTwoFactor() ? t('security.disable2fa.disabling') : t('security.disable2fa.disable') }}
         </button>
       </div>
     </div>
   </div>
 }
+</ng-container>
diff --git a/wordkeep-client/src/app/pages/profile/security/profile-security.spec.ts b/wordkeep-client/src/app/pages/profile/security/profile-security.spec.ts
index ee60680..e61fa8d 100644
--- a/wordkeep-client/src/app/pages/profile/security/profile-security.spec.ts
+++ b/wordkeep-client/src/app/pages/profile/security/profile-security.spec.ts
@@ -7,6 +7,7 @@ import { ProfileSecurityComponent } from './profile-security';
 import { AuthService } from '../../../services/auth.service';
 import { ProfileService } from '../../../services/profile.service';
 import { mockUser } from '../../../test-utils';
+import { getTranslocoTestingModule } from '../../../transloco/transloco-testing';
 
 describe('ProfileSecurityComponent', () => {
   let component: ProfileSecurityComponent;
@@ -48,7 +49,7 @@ describe('ProfileSecurityComponent', () => {
     };
 
     await TestBed.configureTestingModule({
-      imports: [ProfileSecurityComponent],
+      imports: [ProfileSecurityComponent, getTranslocoTestingModule()],
       providers: [
         { provide: AuthService, useValue: mockAuthService },
         { provide: ProfileService, useValue: mockProfileService },
diff --git a/wordkeep-client/src/app/pages/profile/security/profile-security.ts b/wordkeep-client/src/app/pages/profile/security/profile-security.ts
index 6de6902..147b76c 100644
--- a/wordkeep-client/src/app/pages/profile/security/profile-security.ts
+++ b/wordkeep-client/src/app/pages/profile/security/profile-security.ts
@@ -2,20 +2,23 @@ import { Component, OnInit, inject, signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { provideTranslocoScope, TranslocoDirective, TranslocoService } from '@jsverse/transloco';
 import { AuthService } from '../../../services/auth.service';
 import { ProfileService } from '../../../services/profile.service';
 
 @Component({
   selector: 'app-profile-security',
   standalone: true,
-  imports: [CommonModule, FormsModule],
+  imports: [CommonModule, FormsModule, TranslocoDirective],
   templateUrl: './profile-security.html',
-  styleUrl: './profile-security.scss'
+  styleUrl: './profile-security.scss',
+  providers: [provideTranslocoScope('profile')]
 })
 export class ProfileSecurityComponent {
   private authService = inject(AuthService);
   private profileService = inject(ProfileService);
   private sanitizer = inject(DomSanitizer);
+  private transloco = inject(TranslocoService);
 
   readonly user = this.authService.user;
 
@@ -45,7 +48,7 @@ export class ProfileSecurityComponent {
 
   proceedToNewPasswordStep(): void {
     if (!this.passwordCurrentValue) {
-      this.passwordModalError.set('Password is required.');
+      this.passwordModalError.set(this.transloco.translate('profile.security.passwordModal.passwordRequired'));
       return;
     }
     this.passwordModalError.set(null);
@@ -58,7 +61,7 @@ export class ProfileSecurityComponent {
       error: (err) => {
         this.verifyingPasswordChange.set(false);
         this.passwordModalError.set(
-          err?.error?.errors?.password?.[0] ?? err?.error?.message ?? 'Incorrect password.'
+          err?.error?.errors?.password?.[0] ?? err?.error?.message ?? this.transloco.translate('profile.security.passwordModal.incorrectPassword')
         );
       },
     });
@@ -66,11 +69,11 @@ export class ProfileSecurityComponent {
 
   submitPasswordChange(): void {
     if (!this.passwordNewValue) {
-      this.passwordModalError.set('New password is required.');
+      this.passwordModalError.set(this.transloco.translate('profile.security.passwordModal.newRequired'));
       return;
     }
     if (this.passwordNewValue !== this.passwordConfirmValue) {
-      this.passwordModalError.set('Passwords do not match.');
+      this.passwordModalError.set(this.transloco.translate('profile.security.passwordModal.noMatch'));
       return;
     }
 
@@ -96,7 +99,7 @@ export class ProfileSecurityComponent {
         } else if (errors?.new_password) {
           this.passwordModalError.set(errors.new_password[0]);
         } else {
-          this.passwordModalError.set(err.error?.message ?? 'Failed to change password. Try again.');
+          this.passwordModalError.set(err.error?.message ?? this.transloco.translate('profile.security.passwordModal.changeFailed'));
         }
       }
     });
@@ -130,7 +133,7 @@ export class ProfileSecurityComponent {
 
   proceedToQrStep(): void {
     if (!this.twoFactorPasswordValue) {
-      this.twoFactorModalError.set('Password is required.');
+      this.twoFactorModalError.set(this.transloco.translate('profile.security.enable2fa.passwordRequired'));
       return;
     }
     this.twoFactorModalError.set(null);
@@ -146,7 +149,7 @@ export class ProfileSecurityComponent {
       error: (err) => {
         this.settingUpTwoFactor.set(false);
         this.twoFactorModalError.set(
-          err?.error?.errors?.password?.[0] ?? err?.error?.message ?? 'Incorrect password.'
+          err?.error?.errors?.password?.[0] ?? err?.error?.message ?? this.transloco.translate('profile.security.enable2fa.incorrectPassword')
         );
       },
     });
@@ -154,7 +157,7 @@ export class ProfileSecurityComponent {
 
   submitEnableTwoFactor(): void {
     if (!this.twoFactorCodeValue) {
-      this.twoFactorModalError.set('Verification code is required.');
+      this.twoFactorModalError.set(this.transloco.translate('profile.security.enable2fa.codeRequired'));
       return;
     }
     this.twoFactorModalError.set(null);
@@ -170,7 +173,7 @@ export class ProfileSecurityComponent {
       error: (err) => {
         this.confirmingTwoFactor.set(false);
         this.twoFactorModalError.set(
-          err?.error?.errors?.code?.[0] ?? err?.error?.message ?? 'Invalid code.'
+          err?.error?.errors?.code?.[0] ?? err?.error?.message ?? this.transloco.translate('profile.security.enable2fa.invalidCode')
         );
       },
     });
@@ -199,7 +202,7 @@ export class ProfileSecurityComponent {
 
   submitDisableTwoFactor(): void {
     if (!this.disablePasswordValue) {
-      this.disableTwoFactorError.set('Password is required.');
+      this.disableTwoFactorError.set(this.transloco.translate('profile.security.disable2fa.passwordRequired'));
       return;
     }
     this.disableTwoFactorError.set(null);
@@ -214,7 +217,7 @@ export class ProfileSecurityComponent {
       error: (err) => {
         this.disablingTwoFactor.set(false);
         this.disableTwoFactorError.set(
-          err?.error?.errors?.password?.[0] ?? err?.error?.message ?? 'Incorrect password.'
+          err?.error?.errors?.password?.[0] ?? err?.error?.message ?? this.transloco.translate('profile.security.disable2fa.incorrectPassword')
         );
       },
     });
diff --git a/wordkeep-client/src/app/pages/register/register.html b/wordkeep-client/src/app/pages/register/register.html
index 30b4a87..516853e 100644
--- a/wordkeep-client/src/app/pages/register/register.html
+++ b/wordkeep-client/src/app/pages/register/register.html
@@ -1,6 +1,6 @@
-<div class="auth-container">
+<div class="auth-container" *transloco="let t; read: 'auth'">
   <aside class="auth-brand">
-    <a class="auth-brand__link" routerLink="/" aria-label="WordKeep — return to landing page">
+    <a class="auth-brand__link" routerLink="/" [attr.aria-label]="t('common.brandReturn')">
       <div class="auth-brand__logo">
         <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M6 20 V5 H9 V7 H10.5 V5 H13.5 V7 H15 V5 H18 V20 Z" stroke="currentColor" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round"/>
@@ -9,7 +9,7 @@
           <line x1="4" y1="20" x2="20" y2="20" stroke="currentColor" stroke-width="1.0" stroke-linecap="round"/>
         </svg>
       </div>
-      <span class="auth-brand__wordmark">WordKeep</span>
+      <span class="auth-brand__wordmark">{{ t('common.brand') }}</span>
     </a>
   </aside>
   <div class="auth-card">
@@ -21,15 +21,15 @@
             <path d="M8 12L11 15L16 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
           </svg>
         </div>
-        <h2>Check your email</h2>
-        <p>We've sent a verification link to <strong>{{ email }}</strong>. Click the link to activate your account.</p>
-        <p class="note">Link expires in 5 days.</p>
-        <a routerLink="/login" class="btn-secondary">Back to login</a>
+        <h2>{{ t('register.checkEmailTitle') }}</h2>
+        <p [innerHTML]="t('register.checkEmailBody', { email: email })"></p>
+        <p class="note">{{ t('register.linkExpires') }}</p>
+        <a routerLink="/login" class="btn-secondary">{{ t('common.backToLogin') }}</a>
       </div>
     } @else {
       <div class="auth-header">
-        <h1>Create account</h1>
-        <p>Get started with WordKeep</p>
+        <h1>{{ t('register.title') }}</h1>
+        <p>{{ t('register.subtitle') }}</p>
       </div>
 
       @if (error()) {
@@ -44,13 +44,13 @@ <h1>Create account</h1>
 
       <form (ngSubmit)="onSubmit()" class="auth-form">
         <div class="form-group" [class.has-error]="getFieldError('name')">
-          <label for="name">Name</label>
+          <label for="name">{{ t('register.name') }}</label>
           <input
             type="text"
             id="name"
             name="name"
             [(ngModel)]="name"
-            placeholder="Enter your name"
+            [placeholder]="t('register.namePlaceholder')"
             autocomplete="name"
             required
           />
@@ -60,13 +60,13 @@ <h1>Create account</h1>
         </div>
 
         <div class="form-group" [class.has-error]="getFieldError('email')">
-          <label for="email">Email</label>
+          <label for="email">{{ t('common.email') }}</label>
           <input
             type="email"
             id="email"
             name="email"
             [(ngModel)]="email"
-            placeholder="Enter your email"
+            [placeholder]="t('common.emailPlaceholder')"
             autocomplete="email"
             required
           />
@@ -76,30 +76,30 @@ <h1>Create account</h1>
         </div>
 
         <div class="form-group" [class.has-error]="getFieldError('password')">
-          <label for="password">Password</label>
+          <label for="password">{{ t('common.password') }}</label>
           <input
             type="password"
             id="password"
             name="password"
             [(ngModel)]="password"
-            placeholder="Create a password"
+            [placeholder]="t('register.passwordCreatePlaceholder')"
             autocomplete="new-password"
             required
           />
           @if (getFieldError('password')) {
             <span class="field-error">{{ getFieldError('password') }}</span>
           }
-          <span class="field-hint">Must be at least 8 characters</span>
+          <span class="field-hint">{{ t('register.passwordHint') }}</span>
         </div>
 
         <div class="form-group">
-          <label for="passwordConfirmation">Confirm Password</label>
+          <label for="passwordConfirmation">{{ t('register.confirmPassword') }}</label>
           <input
             type="password"
             id="passwordConfirmation"
             name="passwordConfirmation"
             [(ngModel)]="passwordConfirmation"
-            placeholder="Confirm your password"
+            [placeholder]="t('register.confirmPlaceholder')"
             autocomplete="new-password"
             required
           />
@@ -108,15 +108,15 @@ <h1>Create account</h1>
         <button type="submit" class="btn-primary" [disabled]="loading()">
           @if (loading()) {
             <span class="spinner"></span>
-            Creating account...
+            {{ t('register.creatingAccount') }}
           } @else {
-            Create account
+            {{ t('register.createAccount') }}
           }
         </button>
       </form>
 
       <div class="auth-footer">
-        <p>Already have an account? <a routerLink="/login">Sign in</a></p>
+        <p>{{ t('register.haveAccount') }} <a routerLink="/login">{{ t('common.signIn') }}</a></p>
       </div>
     }
   </div>
diff --git a/wordkeep-client/src/app/pages/register/register.spec.ts b/wordkeep-client/src/app/pages/register/register.spec.ts
index 2cffb2b..08f8795 100644
--- a/wordkeep-client/src/app/pages/register/register.spec.ts
+++ b/wordkeep-client/src/app/pages/register/register.spec.ts
@@ -5,6 +5,7 @@ import { describe, it, expect, beforeEach, vi } from 'vitest';
 import { RegisterComponent } from './register';
 import { AuthService } from '../../services/auth.service';
 import { mockRegisterResponse } from '../../test-utils';
+import { getTranslocoTestingModule } from '../../transloco/transloco-testing';
 
 describe('RegisterComponent', () => {
   let component: RegisterComponent;
@@ -17,7 +18,7 @@ describe('RegisterComponent', () => {
     };
 
     await TestBed.configureTestingModule({
-      imports: [RegisterComponent],
+      imports: [RegisterComponent, getTranslocoTestingModule()],
       providers: [
         provideRouter([]),
         { provide: AuthService, useValue: mockAuthService }
diff --git a/wordkeep-client/src/app/pages/register/register.ts b/wordkeep-client/src/app/pages/register/register.ts
index 9270c77..836afcd 100644
--- a/wordkeep-client/src/app/pages/register/register.ts
+++ b/wordkeep-client/src/app/pages/register/register.ts
@@ -1,17 +1,19 @@
-import { Component, signal } from '@angular/core';
+import { Component, inject, signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { Router, RouterLink } from '@angular/router';
+import { TranslocoDirective, TranslocoService } from '@jsverse/transloco';
 import { AuthService } from '../../services/auth.service';
 
 @Component({
   selector: 'app-register',
   standalone: true,
-  imports: [CommonModule, FormsModule, RouterLink],
+  imports: [CommonModule, FormsModule, RouterLink, TranslocoDirective],
   templateUrl: './register.html',
   styleUrl: './register.scss'
 })
 export class RegisterComponent {
+  private transloco = inject(TranslocoService);
   name = '';
   email = '';
   password = '';
@@ -31,17 +33,17 @@ export class RegisterComponent {
     this.errors.set({});
 
     if (!this.name || !this.email || !this.password || !this.passwordConfirmation) {
-      this.error.set('Please fill in all fields');
+      this.error.set(this.transloco.translate('auth.common.fillAllFields'));
       return;
     }
 
     if (this.password !== this.passwordConfirmation) {
-      this.error.set('Passwords do not match');
+      this.error.set(this.transloco.translate('auth.common.passwordsNoMatch'));
       return;
     }
 
     if (this.password.length < 8) {
-      this.error.set('Password must be at least 8 characters');
+      this.error.set(this.transloco.translate('auth.common.passwordTooShort'));
       return;
     }
 
@@ -65,10 +67,10 @@ export class RegisterComponent {
           } else if (err.error?.message) {
             this.error.set(err.error.message);
           } else {
-            this.error.set('Validation failed. Please check your input.');
+            this.error.set(this.transloco.translate('auth.register.validationFailed'));
           }
         } else {
-          this.error.set('An error occurred. Please try again.');
+          this.error.set(this.transloco.translate('auth.common.genericError'));
         }
       }
     });
diff --git a/wordkeep-client/src/app/pages/reset-password/reset-password.html b/wordkeep-client/src/app/pages/reset-password/reset-password.html
index 09f8dab..0716418 100644
--- a/wordkeep-client/src/app/pages/reset-password/reset-password.html
+++ b/wordkeep-client/src/app/pages/reset-password/reset-password.html
@@ -1,6 +1,6 @@
-<div class="auth-container">
+<div class="auth-container" *transloco="let t; read: 'auth'">
   <aside class="auth-brand">
-    <a class="auth-brand__link" routerLink="/" aria-label="WordKeep — return to landing page">
+    <a class="auth-brand__link" routerLink="/" [attr.aria-label]="t('common.brandReturn')">
       <div class="auth-brand__logo">
         <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M6 20 V5 H9 V7 H10.5 V5 H13.5 V7 H15 V5 H18 V20 Z" stroke="currentColor" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round"/>
@@ -9,13 +9,13 @@
           <line x1="4" y1="20" x2="20" y2="20" stroke="currentColor" stroke-width="1.0" stroke-linecap="round"/>
         </svg>
       </div>
-      <span class="auth-brand__wordmark">WordKeep</span>
+      <span class="auth-brand__wordmark">{{ t('common.brand') }}</span>
     </a>
   </aside>
   <div class="auth-card">
     <div class="auth-header">
-      <h1>Reset password</h1>
-      <p>Choose a new password for your account</p>
+      <h1>{{ t('reset.title') }}</h1>
+      <p>{{ t('reset.subtitle') }}</p>
     </div>
 
     @if (invalidLink()) {
@@ -26,9 +26,9 @@ <h1>Reset password</h1>
             <path d="M15 9L9 15M9 9L15 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
           </svg>
         </div>
-        <h2>Invalid reset link</h2>
-        <p>This password reset link is invalid or has expired.</p>
-        <a routerLink="/forgot-password" class="btn-secondary">Request new link</a>
+        <h2>{{ t('reset.invalidTitle') }}</h2>
+        <p>{{ t('reset.invalidBody') }}</p>
+        <a routerLink="/forgot-password" class="btn-secondary">{{ t('reset.requestNew') }}</a>
       </div>
     } @else if (success()) {
       <div class="success-state">
@@ -37,8 +37,8 @@ <h2>Invalid reset link</h2>
             <path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
           </svg>
         </div>
-        <h2>Password reset!</h2>
-        <p>Your password has been changed. Redirecting...</p>
+        <h2>{{ t('reset.successTitle') }}</h2>
+        <p>{{ t('reset.successBody') }}</p>
       </div>
     } @else {
       @if (error()) {
@@ -53,27 +53,27 @@ <h2>Password reset!</h2>
 
       <form (ngSubmit)="onSubmit()" class="auth-form">
         <div class="form-group">
-          <label for="password">New password</label>
+          <label for="password">{{ t('reset.newPassword') }}</label>
           <input
             type="password"
             id="password"
             name="password"
             [(ngModel)]="password"
-            placeholder="Enter new password"
+            [placeholder]="t('reset.newPlaceholder')"
             autocomplete="new-password"
             required
           />
-          <span class="field-hint">Minimum 8 characters</span>
+          <span class="field-hint">{{ t('reset.passwordHint') }}</span>
         </div>
 
         <div class="form-group">
-          <label for="passwordConfirmation">Confirm password</label>
+          <label for="passwordConfirmation">{{ t('reset.confirmPassword') }}</label>
           <input
             type="password"
             id="passwordConfirmation"
             name="passwordConfirmation"
             [(ngModel)]="passwordConfirmation"
-            placeholder="Confirm new password"
+            [placeholder]="t('reset.confirmPlaceholder')"
             autocomplete="new-password"
             required
           />
@@ -82,15 +82,15 @@ <h2>Password reset!</h2>
         <button type="submit" class="btn-primary" [disabled]="loading()">
           @if (loading()) {
             <span class="spinner"></span>
-            Resetting...
+            {{ t('reset.resetting') }}
           } @else {
-            Reset password
+            {{ t('reset.resetButton') }}
           }
         </button>
       </form>
 
       <div class="auth-footer">
-        <p>Remember your password? <a routerLink="/login">Sign in</a></p>
+        <p>{{ t('common.rememberPassword') }} <a routerLink="/login">{{ t('common.signIn') }}</a></p>
       </div>
     }
   </div>
diff --git a/wordkeep-client/src/app/pages/reset-password/reset-password.spec.ts b/wordkeep-client/src/app/pages/reset-password/reset-password.spec.ts
index a3a209f..ef270bc 100644
--- a/wordkeep-client/src/app/pages/reset-password/reset-password.spec.ts
+++ b/wordkeep-client/src/app/pages/reset-password/reset-password.spec.ts
@@ -5,6 +5,7 @@ import { describe, it, expect, beforeEach, vi } from 'vitest';
 import { ResetPasswordComponent } from './reset-password';
 import { AuthService } from '../../services/auth.service';
 import { mockAuthResponse } from '../../test-utils';
+import { getTranslocoTestingModule } from '../../transloco/transloco-testing';
 
 describe('ResetPasswordComponent', () => {
   let component: ResetPasswordComponent;
@@ -29,7 +30,7 @@ describe('ResetPasswordComponent', () => {
 
     TestBed.resetTestingModule();
     TestBed.configureTestingModule({
-      imports: [ResetPasswordComponent],
+      imports: [ResetPasswordComponent, getTranslocoTestingModule()],
       providers: [
         provideRouter([]),
         { provide: AuthService, useValue: mockAuthService },
diff --git a/wordkeep-client/src/app/pages/reset-password/reset-password.ts b/wordkeep-client/src/app/pages/reset-password/reset-password.ts
index 39eecf7..ee7ba64 100644
--- a/wordkeep-client/src/app/pages/reset-password/reset-password.ts
+++ b/wordkeep-client/src/app/pages/reset-password/reset-password.ts
@@ -1,17 +1,19 @@
-import { Component, OnInit, signal } from '@angular/core';
+import { Component, OnInit, inject, signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { TranslocoDirective, TranslocoService } from '@jsverse/transloco';
 import { AuthService } from '../../services/auth.service';
 
 @Component({
   selector: 'app-reset-password',
   standalone: true,
-  imports: [CommonModule, FormsModule, RouterLink],
+  imports: [CommonModule, FormsModule, RouterLink, TranslocoDirective],
   templateUrl: './reset-password.html',
   styleUrl: './reset-password.scss'
 })
 export class ResetPasswordComponent implements OnInit {
+  private transloco = inject(TranslocoService);
   password = '';
   passwordConfirmation = '';
   token = '';
@@ -41,17 +43,17 @@ export class ResetPasswordComponent implements OnInit {
     this.error.set(null);
 
     if (!this.password || !this.passwordConfirmation) {
-      this.error.set('Please fill in all fields');
+      this.error.set(this.transloco.translate('auth.common.fillAllFields'));
       return;
     }
 
     if (this.password !== this.passwordConfirmation) {
-      this.error.set('Passwords do not match');
+      this.error.set(this.transloco.translate('auth.common.passwordsNoMatch'));
       return;
     }
 
     if (this.password.length < 8) {
-      this.error.set('Password must be at least 8 characters');
+      this.error.set(this.transloco.translate('auth.common.passwordTooShort'));
       return;
     }
 
@@ -70,7 +72,7 @@ export class ResetPasswordComponent implements OnInit {
       },
       error: (err) => {
         this.loading.set(false);
-        this.error.set(err.error?.message || 'Reset failed. The link may be invalid or expired.');
+        this.error.set(err.error?.message || this.transloco.translate('auth.reset.resetFailed'));
       }
     });
   }
diff --git a/wordkeep-client/src/app/pages/translation-reader/translation-reader.html b/wordkeep-client/src/app/pages/translation-reader/translation-reader.html
index dc7e884..9d0351c 100644
--- a/wordkeep-client/src/app/pages/translation-reader/translation-reader.html
+++ b/wordkeep-client/src/app/pages/translation-reader/translation-reader.html
@@ -1,9 +1,10 @@
 <app-layout>
+<ng-container *transloco="let t; read: 'translation'">
 <div class="detail-container">
   @if (loading()) {
     <div class="loading-state">
       <div class="spinner"></div>
-      <p>Loading document...</p>
+      <p>{{ t('reader.loadingDocument') }}</p>
     </div>
   } @else if (error() && !document()) {
     <div class="error-state">
@@ -12,9 +13,9 @@
           <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
         </svg>
       </div>
-      <h2>Document not found</h2>
+      <h2>{{ t('reader.documentNotFound') }}</h2>
       <p>{{ error() }}</p>
-      <a routerLink="/translation" class="btn-back">Back to Translation</a>
+      <a routerLink="/translation" class="btn-back">{{ t('reader.backToTranslation') }}</a>
     </div>
   } @else if (document(); as doc) {
 
@@ -24,7 +25,7 @@ <h2>Document not found</h2>
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
           <path fill-rule="evenodd" d="M17 10a.75.75 0 01-.75.75H5.612l4.158 3.96a.75.75 0 11-1.04 1.08l-5.5-5.25a.75.75 0 010-1.08l5.5-5.25a.75.75 0 111.04 1.08L5.612 9.25H16.25A.75.75 0 0117 10z" clip-rule="evenodd" />
         </svg>
-        Back to Translation
+        {{ t('reader.backToTranslation') }}
       </a>
       <div class="header-info">
         <h1>{{ doc.effective_filename }}</h1>
@@ -62,7 +63,7 @@ <h1>{{ doc.effective_filename }}</h1>
           [max]="doc.page_count"
           (change)="goToPage(+$any($event.target).value)"
         >
-        <span class="page-label">of {{ doc.page_count }}</span>
+        <span class="page-label">{{ t('reader.ofPages', { count: doc.page_count }) }}</span>
         <button class="btn-nav" [disabled]="!canGoNext()" (click)="nextPage()">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
             <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
@@ -78,12 +79,12 @@ <h1>{{ doc.effective_filename }}</h1>
         class="btn-nav btn-scroll-sync"
         [class.active]="scrollSync()"
         (click)="toggleScrollSync()"
-        title="Sync scroll between panes"
+        [title]="t('reader.syncScrollTitle')"
       >
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
           <path stroke-linecap="round" stroke-linejoin="round" d="M3 7.5 7.5 3m0 0L12 7.5M7.5 3v13.5m13.5 0L16.5 21m0 0L12 16.5m4.5 4.5V7.5" />
         </svg>
-        Sync Scroll
+        {{ t('reader.syncScroll') }}
       </button>
 
       <div class="nav-separator"></div>
@@ -92,20 +93,20 @@ <h1>{{ doc.effective_filename }}</h1>
         class="btn-nav btn-untranslated"
         [disabled]="navigatingUntranslated()"
         (click)="goToFirstUntranslated()"
-        title="Jump to first untranslated page"
+        [title]="t('reader.firstUntranslatedTitle')"
       >
         @if (navigatingUntranslated()) {
           <div class="btn-spinner-sm"></div>
         }
-        First Untranslated
+        {{ t('reader.firstUntranslated') }}
       </button>
       <button
         class="btn-nav btn-untranslated"
         [disabled]="navigatingUntranslated()"
         (click)="goToNextUntranslated()"
-        title="Jump to next untranslated page from here"
+        [title]="t('reader.nextUntranslatedTitle')"
       >
-        Next Untranslated
+        {{ t('reader.nextUntranslated') }}
       </button>
     </div>
 
@@ -115,9 +116,9 @@ <h1>{{ doc.effective_filename }}</h1>
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
           <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
         </svg>
-        <span class="wrong-lang-nav-label">Wrong Language</span>
+        <span class="wrong-lang-nav-label">{{ t('reader.wrongLanguage') }}</span>
         <div class="wrong-lang-nav-controls">
-          <button class="btn-nav" (click)="goToPrevWrongLanguagePage()" title="Previous wrong-language page">
+          <button class="btn-nav" (click)="goToPrevWrongLanguagePage()" [title]="t('reader.prevWrongLangTitle')">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
               <path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clip-rule="evenodd" />
             </svg>
@@ -130,7 +131,7 @@ <h1>{{ doc.effective_filename }}</h1>
             }
             / {{ allFailurePages().length }}
           </span>
-          <button class="btn-nav" (click)="goToNextWrongLanguagePage()" title="Next wrong-language page">
+          <button class="btn-nav" (click)="goToNextWrongLanguagePage()" [title]="t('reader.nextWrongLangTitle')">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
               <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
             </svg>
@@ -143,7 +144,7 @@ <h1>{{ doc.effective_filename }}</h1>
     @if (loadingPage()) {
       <div class="page-loading">
         <div class="spinner"></div>
-        <p>Loading page...</p>
+        <p>{{ t('reader.loadingPage') }}</p>
       </div>
     } @else {
       <div class="content-grid">
@@ -153,39 +154,39 @@ <h1>{{ doc.effective_filename }}</h1>
           <div class="panel-header">
             <h2>{{ getLanguageName(doc.main_language) }}</h2>
             @if (hasPreviousSpilloverWarning()) {
-              <span class="spillover-warning" title="The beginning of this page was included in the previous page's translation. It has been hidden here.">
+              <span class="spillover-warning" [title]="t('reader.beginningHiddenTitle')">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                   <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
                 </svg>
-                Beginning of page hidden
+                {{ t('reader.beginningHidden') }}
               </span>
             }
             @if (splitMode()) {
-              <button class="btn-exit-split-mode" (click)="exitSplitMode()">Exit split mode</button>
+              <button class="btn-exit-split-mode" (click)="exitSplitMode()">{{ t('reader.exitSplitMode') }}</button>
             } @else if (needsSplit()) {
               <button class="btn-add-splits" (click)="enterSplitMode()">
-                {{ currentTranslation()?.manual_splits?.length ? 'Edit splits' : 'Add splits' }}
+                {{ currentTranslation()?.manual_splits?.length ? t('reader.editSplits') : t('reader.addSplits') }}
               </button>
             }
           </div>
           <div class="panel-content" #leftPane (scroll)="onLeftScroll()">
             @if (!currentOcr()) {
               <div class="panel-empty">
-                <p>No page data loaded.</p>
+                <p>{{ t('reader.noPageData') }}</p>
               </div>
             } @else if (currentOcr()!.ignored) {
               <div class="panel-ignored">
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                   <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" />
                 </svg>
-                <p>This page is ignored</p>
+                <p>{{ t('reader.pageIgnored') }}</p>
               </div>
             } @else if (!hasOcrText()) {
               <div class="panel-empty">
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                   <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
                 </svg>
-                <p>No extracted text</p>
+                <p>{{ t('reader.noExtractedText') }}</p>
               </div>
             } @else if (splitMode()) {
               <div class="split-editor">
@@ -196,7 +197,7 @@ <h2>{{ getLanguageName(doc.main_language) }}</h2>
                             [class.badge-ok]="segment.wordCount <= 2700"
                             [class.badge-warn]="segment.wordCount > 2700 && segment.wordCount <= 3000"
                             [class.badge-over]="segment.wordCount > 3000">
-                        {{ segment.wordCount }} words
+                        {{ t('reader.words', { count: segment.wordCount }) }}
                         @if (segment.wordCount <= 2700) { ✓ }
                         @else if (segment.wordCount > 3000) { ✗ }
                       </span>
@@ -205,7 +206,7 @@ <h2>{{ getLanguageName(doc.main_language) }}</h2>
                     @if (!last) {
                       <div class="split-divider">
                         <div class="split-divider-line"></div>
-                        <button class="btn-remove-split" (click)="removeSplit(splitPointsSorted()[idx])" title="Remove split">×</button>
+                        <button class="btn-remove-split" (click)="removeSplit(splitPointsSorted()[idx])" [title]="t('reader.removeSplitTitle')">×</button>
                         <div class="split-divider-line"></div>
                       </div>
                     }
@@ -214,16 +215,16 @@ <h2>{{ getLanguageName(doc.main_language) }}</h2>
               </div>
               <div class="split-cta">
                 @if (oversizedSegmentsCount() > 0) {
-                  <span class="split-cta-hint">{{ oversizedSegmentsCount() }} chunk{{ oversizedSegmentsCount() > 1 ? 's' : '' }} still too long — click in the red segment to add more splits</span>
+                  <span class="split-cta-hint">{{ oversizedSegmentsCount() > 1 ? t('reader.splitHintPlural', { count: oversizedSegmentsCount() }) : t('reader.splitHint', { count: oversizedSegmentsCount() }) }}</span>
                 }
                 <button class="btn-translate-splits"
                         [disabled]="savingSplits()"
                         (click)="translateWithSplits()">
                   @if (savingSplits()) {
                     <div class="btn-spinner-sm"></div>
-                    Saving...
+                    {{ t('reader.saving') }}
                   } @else {
-                    Translate with splits ({{ splitSegments().length }} chunk{{ splitSegments().length !== 1 ? 's' : '' }})
+                    {{ splitSegments().length !== 1 ? t('reader.translateWithSplitsPlural', { count: splitSegments().length }) : t('reader.translateWithSplits', { count: splitSegments().length }) }}
                   }
                 </button>
               </div>
@@ -233,17 +234,17 @@ <h2>{{ getLanguageName(doc.main_language) }}</h2>
                   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                     <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
                   </svg>
-                  <span>This page has a paragraph that's too long to translate automatically. Use <strong>Add splits</strong> above to divide it into smaller chunks.</span>
+                  <span [innerHTML]="t('reader.needsSplitBanner')"></span>
                 </div>
               }
               <div class="ocr-text markdown-content" [innerHTML]="renderedOcrHtml()"></div>
               @if (spilloverAppendedText()) {
                 <div class="spillover-divider">
-                  <span class="spillover-warning-inline" title="This text from the next page was appended here for translation continuity">
+                  <span class="spillover-warning-inline" [title]="t('reader.appendedFromNextTitle')">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                       <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
                     </svg>
-                    Appended from next page
+                    {{ t('reader.appendedFromNext') }}
                   </span>
                 </div>
                 <div class="ocr-text markdown-content spillover-text" [innerHTML]="renderedSpilloverHtml()"></div>
@@ -267,7 +268,7 @@ <h2>{{ getLanguageName(targetLanguage()) }}</h2>
                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                       <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
                     </svg>
-                    Edit
+                    {{ t('reader.edit') }}
                   </button>
                   <button class="btn-clear" (click)="clearTranslation()" [disabled]="clearing() || translating()">
                     @if (clearing()) {
@@ -277,48 +278,48 @@ <h2>{{ getLanguageName(targetLanguage()) }}</h2>
                         <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
                       </svg>
                     }
-                    Clear
+                    {{ t('reader.clear') }}
                   </button>
                 } @else {
                   <button class="btn-secondary-sm btn-transcribe" (click)="enterManualTranslation()" [disabled]="translating()">
                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                       <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
                     </svg>
-                    Manual Translate
+                    {{ t('reader.manualTranslate') }}
                   </button>
                 }
                 <button
                   class="btn-primary-sm"
                   (click)="aiTranslate()"
                   [disabled]="translating() || needsSplit()"
-                  [title]="needsSplit() ? 'Use Add splits to handle this page' : ''"
+                  [title]="needsSplit() ? t('reader.aiTranslateNeedsSplitTitle') : ''"
                 >
                   @if (translating()) {
                     <div class="btn-spinner"></div>
-                    Translating...
+                    {{ t('reader.translating') }}
                   } @else if (currentTranslation()) {
                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                       <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
                     </svg>
-                    AI Translate
+                    {{ t('reader.aiTranslate') }}
                   } @else {
                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                       <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 21l5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 016-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 01-3.827-5.802" />
                     </svg>
-                    AI Translate
+                    {{ t('reader.aiTranslate') }}
                   }
                 </button>
               } @else {
-                <button class="btn-cancel" (click)="cancelEdit()" [disabled]="saving()">Cancel</button>
+                <button class="btn-cancel" (click)="cancelEdit()" [disabled]="saving()">{{ t('reader.cancel') }}</button>
                 <button class="btn-save" (click)="saveEdit()" [disabled]="saving()">
                   @if (saving()) {
                     <div class="btn-spinner"></div>
-                    Saving...
+                    {{ t('reader.saving') }}
                   } @else {
                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                       <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                     </svg>
-                    Save
+                    {{ t('reader.save') }}
                   }
                 </button>
               }
@@ -331,21 +332,21 @@ <h2>{{ getLanguageName(targetLanguage()) }}</h2>
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                   <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 00-1.883 2.542l.857 6a2.25 2.25 0 002.227 1.932H19.05a2.25 2.25 0 002.227-1.932l.857-6a2.25 2.25 0 00-1.883-2.542m-16.5 0V6A2.25 2.25 0 016 3.75h3.879a1.5 1.5 0 011.06.44l2.122 2.12a1.5 1.5 0 001.06.44H18A2.25 2.25 0 0120.25 9v.776" />
                 </svg>
-                <p>Translation unavailable</p>
-                <p class="hint">This page hasn't been OCR'd yet.</p>
+                <p>{{ t('reader.translationUnavailable') }}</p>
+                <p class="hint">{{ t('reader.notOcrd') }}</p>
                 <a [routerLink]="['/extraction', doc.id]" [queryParams]="{ page: currentPage() }" class="btn-secondary-sm">
-                  Open in Text Extraction →
+                  {{ t('reader.openInExtraction') }}
                 </a>
               </div>
             } @else if (editMode()) {
               @if (currentPageFootnoteRefs().length > 0) {
                 <div class="footnote-edit-hint">
-                  <span>This page references:</span>
+                  <span>{{ t('reader.pageReferences') }}</span>
                   @for (n of currentPageFootnoteRefs(); track n) {
                     <code>[^{{ n }}]</code>
                   }
                   <span class="hint-sep">—</span>
-                  <span class="hint-text">to re-add a ref, type <code>[^N]</code> where N is the footnote number</span>
+                  <span class="hint-text" [innerHTML]="t('reader.reAddRefHint')"></span>
                 </div>
               }
               <div class="editor-container">
@@ -353,14 +354,14 @@ <h2>{{ getLanguageName(targetLanguage()) }}</h2>
                 <ngx-editor
                   [editor]="editor"
                   [(ngModel)]="editorContent"
-                  [placeholder]="'Enter translation...'"
+                  [placeholder]="t('reader.editorPlaceholder')"
                 ></ngx-editor>
               </div>
             } @else if (translating()) {
               <div class="ocr-loading">
                 <div class="spinner"></div>
-                <p>Translating with AI...</p>
-                <p class="hint">This may take a moment</p>
+                <p>{{ t('reader.translatingWithAi') }}</p>
+                <p class="hint">{{ t('reader.translatingHint') }}</p>
               </div>
             } @else if (currentTranslation()?.translated_text) {
               @if (currentTranslation()?.wrong_language) {
@@ -369,11 +370,11 @@ <h2>{{ getLanguageName(targetLanguage()) }}</h2>
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                       <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
                     </svg>
-                    <span>Translation returned in the source language instead of {{ getLanguageName(targetLanguage()) }}.</span>
+                    <span>{{ t('reader.wrongLangPage', { language: getLanguageName(targetLanguage()) }) }}</span>
                   </div>
                   <div class="wrong-lang-banner-actions">
-                    <button class="btn-wrong-lang-solve" (click)="retryWrongLanguage()" [disabled]="translating()">Solve</button>
-                    <button class="btn-wrong-lang-dismiss" (click)="dismissWrongLanguage()" [disabled]="translating()">Dismiss</button>
+                    <button class="btn-wrong-lang-solve" (click)="retryWrongLanguage()" [disabled]="translating()">{{ t('reader.solve') }}</button>
+                    <button class="btn-wrong-lang-dismiss" (click)="dismissWrongLanguage()" [disabled]="translating()">{{ t('reader.dismiss') }}</button>
                   </div>
                 </div>
               }
@@ -383,11 +384,11 @@ <h2>{{ getLanguageName(targetLanguage()) }}</h2>
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                       <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
                     </svg>
-                    <span>Footnote [^{{ currentPageWrongLanguageFootnote()!.number }}] returned in the source language instead of {{ getLanguageName(targetLanguage()) }}.</span>
+                    <span>{{ t('reader.wrongLangFootnote', { number: currentPageWrongLanguageFootnote()!.number, language: getLanguageName(targetLanguage()) }) }}</span>
                   </div>
                   <div class="wrong-lang-banner-actions">
-                    <button class="btn-wrong-lang-solve" (click)="showWrongLanguageFootnote(currentPageWrongLanguageFootnote()!)" [disabled]="translatingFootnote()">Show</button>
-                    <button class="btn-wrong-lang-dismiss" (click)="dismissWrongLanguageFootnote(currentPageWrongLanguageFootnote()!)" [disabled]="translatingFootnote()">Dismiss</button>
+                    <button class="btn-wrong-lang-solve" (click)="showWrongLanguageFootnote(currentPageWrongLanguageFootnote()!)" [disabled]="translatingFootnote()">{{ t('reader.show') }}</button>
+                    <button class="btn-wrong-lang-dismiss" (click)="dismissWrongLanguageFootnote(currentPageWrongLanguageFootnote()!)" [disabled]="translatingFootnote()">{{ t('reader.dismiss') }}</button>
                   </div>
                 </div>
               }
@@ -397,8 +398,8 @@ <h2>{{ getLanguageName(targetLanguage()) }}</h2>
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                   <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 21l5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 016-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 01-3.827-5.802" />
                 </svg>
-                <p>No translation yet</p>
-                <p class="hint">Use the buttons above to translate this page</p>
+                <p>{{ t('reader.noTranslationYet') }}</p>
+                <p class="hint">{{ t('reader.noTranslationHint') }}</p>
               </div>
             }
           </div>
@@ -422,7 +423,7 @@ <h2>{{ getLanguageName(targetLanguage()) }}</h2>
       <button class="fn-tooltip-close" (click)="closeFootnoteTooltip()">×</button>
     </div>
     <div class="fn-tooltip-section">
-      <div class="fn-tooltip-label">Original</div>
+      <div class="fn-tooltip-label">{{ t('reader.originalLabel') }}</div>
       <div class="fn-tooltip-body" [innerHTML]="activeFootnoteOriginalHtml()"></div>
     </div>
     @if (activeFootnote()!.translated_text) {
@@ -431,7 +432,7 @@ <h2>{{ getLanguageName(targetLanguage()) }}</h2>
         <div class="fn-tooltip-body" [innerHTML]="activeFootnoteTranslatedHtml()"></div>
       </div>
     } @else {
-      <div class="fn-tooltip-no-translation">No translation yet</div>
+      <div class="fn-tooltip-no-translation">{{ t('reader.fnNoTranslation') }}</div>
     }
     <div class="fn-tooltip-footer">
       <button
@@ -442,20 +443,21 @@ <h2>{{ getLanguageName(targetLanguage()) }}</h2>
       >
         @if (translatingFootnote()) {
           <div class="btn-spinner-sm"></div>
-          Translating...
+          {{ t('reader.translating') }}
         } @else if (activeFootnote()!.wrong_language) {
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
             <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
           </svg>
-          Retry Translation
+          {{ t('reader.retryTranslation') }}
         } @else {
           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
             <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 21l5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 016-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 01-3.827-5.802" />
           </svg>
-          {{ activeFootnote()!.translated_text ? 'Re-translate' : 'Translate' }}
+          {{ activeFootnote()!.translated_text ? t('reader.reTranslate') : t('reader.translate') }}
         }
       </button>
     </div>
   </div>
 }
+</ng-container>
 </app-layout>
diff --git a/wordkeep-client/src/app/pages/translation-reader/translation-reader.spec.ts b/wordkeep-client/src/app/pages/translation-reader/translation-reader.spec.ts
index a8c2638..44ef0dd 100644
--- a/wordkeep-client/src/app/pages/translation-reader/translation-reader.spec.ts
+++ b/wordkeep-client/src/app/pages/translation-reader/translation-reader.spec.ts
@@ -10,6 +10,7 @@ import { ConfirmationService } from '../../services/confirmation.service';
 import { SpellCheckService } from '../../services/spell-check.service';
 import { AuthService } from '../../services/auth.service';
 import { Document, OcrResult, PageTranslation, FootnoteWithTranslation } from '../../models/document.model';
+import { getTranslocoTestingModule } from '../../transloco/transloco-testing';
 
 const makeFootnote = (overrides: any = {}): FootnoteWithTranslation => ({
   id: 1,
@@ -116,7 +117,7 @@ describe('TranslationReaderComponent', () => {
 
     TestBed.resetTestingModule();
     TestBed.configureTestingModule({
-      imports: [TranslationReaderComponent],
+      imports: [TranslationReaderComponent, getTranslocoTestingModule()],
       providers: [
         provideRouter([]),
         {
diff --git a/wordkeep-client/src/app/pages/translation-reader/translation-reader.ts b/wordkeep-client/src/app/pages/translation-reader/translation-reader.ts
index 786bc29..0120249 100644
--- a/wordkeep-client/src/app/pages/translation-reader/translation-reader.ts
+++ b/wordkeep-client/src/app/pages/translation-reader/translation-reader.ts
@@ -2,6 +2,7 @@ import { Component, OnInit, OnDestroy, HostListener, inject, signal, computed, e
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { provideTranslocoScope, TranslocoDirective, TranslocoService } from '@jsverse/transloco';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { DocumentService } from '../../services/document.service';
 import { TranslationService } from '../../services/translation.service';
@@ -45,7 +46,8 @@ interface SplitSegment {
 @Component({
   selector: 'app-translation-reader',
   standalone: true,
-  imports: [CommonModule, FormsModule, RouterLink, LayoutComponent, NgxEditorModule],
+  imports: [CommonModule, FormsModule, RouterLink, LayoutComponent, NgxEditorModule, TranslocoDirective],
+  providers: [provideTranslocoScope('translation')],
   templateUrl: './translation-reader.html',
   styleUrl: './translation-reader.scss'
 })
@@ -60,6 +62,7 @@ export class TranslationReaderComponent implements OnInit, OnDestroy {
   private injector = inject(EnvironmentInjector);
   private destroyRef = inject(DestroyRef);
   private sanitizer = inject(DomSanitizer);
+  private transloco = inject(TranslocoService);
 
   private spellClickSubject = new Subject<SpellErrorClick>();
   private currentChecker: NspellChecker | null = null;
@@ -370,7 +373,7 @@ export class TranslationReaderComponent implements OnInit, OnDestroy {
         this.currentPage.set(wsPage);
       },
       error: () => {
-        this.error.set('Failed to load document');
+        this.error.set(this.transloco.translate('translation.reader.errors.loadDocument'));
         this.loading.set(false);
       }
     });
@@ -405,7 +408,7 @@ export class TranslationReaderComponent implements OnInit, OnDestroy {
         this.documentService.updateWorkStatus(doc.id, 'translation_' + this.targetLanguage(), page).subscribe();
       },
       error: () => {
-        this.error.set('Failed to load page data');
+        this.error.set(this.transloco.translate('translation.reader.errors.loadPage'));
         this.loadingPage.set(false);
       }
     });
@@ -444,7 +447,7 @@ export class TranslationReaderComponent implements OnInit, OnDestroy {
       next: (page) => {
         this.navigatingUntranslated.set(false);
         if (page !== null) this.goToPage(page);
-        else this.error.set('All available pages have been translated.');
+        else this.error.set(this.transloco.translate('translation.reader.errors.allTranslated'));
       },
       error: () => this.navigatingUntranslated.set(false)
     });
@@ -458,7 +461,7 @@ export class TranslationReaderComponent implements OnInit, OnDestroy {
       next: (page) => {
         this.navigatingUntranslated.set(false);
         if (page !== null) this.goToPage(page);
-        else this.error.set('No more untranslated pages after this one.');
+        else this.error.set(this.transloco.translate('translation.reader.errors.noMoreUntranslated'));
       },
       error: () => this.navigatingUntranslated.set(false)
     });
@@ -487,7 +490,7 @@ export class TranslationReaderComponent implements OnInit, OnDestroy {
         this.updateCachedTranslation(page, result);
         this.wrongLanguagePages.update(pages => pages.filter(p => p !== page));
       },
-      error: () => this.error.set('Failed to dismiss.')
+      error: () => this.error.set(this.transloco.translate('translation.reader.errors.dismiss'))
     });
   }
 
@@ -506,10 +509,10 @@ export class TranslationReaderComponent implements OnInit, OnDestroy {
 
     const targetLang = this.getLanguageName(this.targetLanguage());
     const confirmed = await this.confirmationService.confirm({
-      title: 'Retry with stronger instructions?',
-      message: `Retry translating to ${targetLang} with a stronger prompt. Estimated cost: ~${costStr}`,
-      confirmText: 'Retry',
-      cancelText: 'Cancel',
+      title: this.transloco.translate('translation.reader.confirm.retryTitle'),
+      message: this.transloco.translate('translation.reader.confirm.retryMessage', { language: targetLang, cost: costStr }),
+      confirmText: this.transloco.translate('translation.reader.confirm.retry'),
+      cancelText: this.transloco.translate('translation.reader.confirm.cancel'),
     });
     if (!confirmed) return;
 
@@ -544,10 +547,13 @@ export class TranslationReaderComponent implements OnInit, OnDestroy {
 
     const hasExisting = !!data.translation;
     const confirmed = await this.confirmationService.confirm({
-      title: hasExisting ? 'Re-translate page?' : 'Translate page with AI?',
-      message: (hasExisting ? 'Existing translation will be replaced. ' : '') + `Estimated cost: ~${costStr} (rough estimate based on character count)`,
-      confirmText: 'Translate',
-      cancelText: 'Cancel',
+      title: this.transloco.translate(hasExisting ? 'translation.reader.confirm.reTranslatePageTitle' : 'translation.reader.confirm.translatePageTitle'),
+      message: this.transloco.translate('translation.reader.confirm.translatePageMessage', {
+        replace: hasExisting ? this.transloco.translate('translation.reader.confirm.translatePageReplace') : '',
+        cost: costStr,
+      }),
+      confirmText: this.transloco.translate('translation.reader.confirm.translate'),
+      cancelText: this.transloco.translate('translation.reader.confirm.cancel'),
     });
 
     if (!confirmed) return;
@@ -587,10 +593,10 @@ export class TranslationReaderComponent implements OnInit, OnDestroy {
           const sourceLang = this.getLanguageName(doc.main_language ?? null);
           const targetLang = this.getLanguageName(this.targetLanguage());
           const retryConfirmed = await this.confirmationService.confirm({
-            title: 'Translation returned wrong language',
-            message: `Gemini returned the text in ${sourceLang} instead of ${targetLang}. Retry with stronger instructions? Estimated cost: ~${costStr} (rough estimate)`,
-            confirmText: 'Retry',
-            cancelText: 'Keep',
+            title: this.transloco.translate('translation.reader.confirm.wrongLangTitle'),
+            message: this.transloco.translate('translation.reader.confirm.wrongLangMessage', { source: sourceLang, target: targetLang, cost: costStr }),
+            confirmText: this.transloco.translate('translation.reader.confirm.retry'),
+            cancelText: this.transloco.translate('translation.reader.confirm.keep'),
           });
           if (!retryConfirmed) return;
 
@@ -622,7 +628,7 @@ export class TranslationReaderComponent implements OnInit, OnDestroy {
       this.updateCachedTranslation(page, err.error.data);
       this.reloadFootnotes();
     }
-    this.error.set(err.error?.message ?? 'Translation failed.');
+    this.error.set(err.error?.message ?? this.transloco.translate('translation.reader.errors.translationFailed'));
     this.translating.set(false);
   }
 
@@ -667,7 +673,7 @@ export class TranslationReaderComponent implements OnInit, OnDestroy {
         this.saving.set(false);
       },
       error: (err) => {
-        this.error.set(err.error?.message ?? 'Failed to save.');
+        this.error.set(err.error?.message ?? this.transloco.translate('translation.reader.errors.save'));
         this.saving.set(false);
       }
     });
@@ -675,10 +681,10 @@ export class TranslationReaderComponent implements OnInit, OnDestroy {
 
   async clearTranslation() {
     const confirmed = await this.confirmationService.confirm({
-      title: 'Clear translation?',
-      message: 'The translation for this page will be permanently deleted.',
-      confirmText: 'Clear',
-      cancelText: 'Cancel',
+      title: this.transloco.translate('translation.reader.confirm.clearTitle'),
+      message: this.transloco.translate('translation.reader.confirm.clearMessage'),
+      confirmText: this.transloco.translate('translation.reader.confirm.clear'),
+      cancelText: this.transloco.translate('translation.reader.confirm.cancel'),
     });
     if (!confirmed) return;
 
@@ -691,7 +697,7 @@ export class TranslationReaderComponent implements OnInit, OnDestroy {
         this.clearing.set(false);
       },
       error: () => {
-        this.error.set('Failed to clear translation.');
+        this.error.set(this.transloco.translate('translation.reader.errors.clear'));
         this.clearing.set(false);
       }
     });
@@ -781,10 +787,13 @@ export class TranslationReaderComponent implements OnInit, OnDestroy {
     if (!this.allSegmentsOk()) {
       const n = this.oversizedSegmentsCount();
       const confirmed = await this.confirmationService.confirm({
-        title: 'Some chunks are still too long',
-        message: `${n} chunk${n > 1 ? 's are' : ' is'} over 3000 words and may produce incomplete translations. Send anyway?`,
-        confirmText: 'Send anyway',
-        cancelText: 'Go back',
+        title: this.transloco.translate('translation.reader.confirm.splitsTooLongTitle'),
+        message: this.transloco.translate(
+          n > 1 ? 'translation.reader.confirm.splitsTooLongMessageMany' : 'translation.reader.confirm.splitsTooLongMessageOne',
+          { count: n }
+        ),
+        confirmText: this.transloco.translate('translation.reader.confirm.sendAnyway'),
+        cancelText: this.transloco.translate('translation.reader.confirm.goBack'),
       });
       if (!confirmed) return;
     }
@@ -799,7 +808,7 @@ export class TranslationReaderComponent implements OnInit, OnDestroy {
         void this.executeTranslation();
       },
       error: (err) => {
-        this.error.set(err.error?.message ?? 'Failed to save splits.');
+        this.error.set(err.error?.message ?? this.transloco.translate('translation.reader.errors.saveSplits'));
         this.savingSplits.set(false);
       }
     });
@@ -810,8 +819,10 @@ export class TranslationReaderComponent implements OnInit, OnDestroy {
   }
 
   getLanguageName(code: string | null): string {
-    if (!code) return 'Original';
-    return LANGUAGE_NAMES[code] ?? code;
+    if (!code) return this.transloco.translate('translation.reader.originalLabel');
+    const key = `languages.${code}`;
+    const name = this.transloco.translate(key);
+    return name === key ? code : name;
   }
 
   closeFootnoteTooltip() {
@@ -828,10 +839,10 @@ export class TranslationReaderComponent implements OnInit, OnDestroy {
     if (fn.wrong_language && !forceRetry) {
       // Wrong language detected — go straight to retry confirmation
       const retryConfirmed = await this.confirmationService.confirm({
-        title: `Retry footnote [^${fn.number}] with stronger instructions?`,
-        message: `Gemini returned this footnote in the source language instead of ${this.getLanguageName(this.targetLanguage())}. Retry with a stronger prompt? Estimated cost: ~${costStr}`,
-        confirmText: 'Retry',
-        cancelText: 'Keep',
+        title: this.transloco.translate('translation.reader.confirm.fnRetryTitle', { number: fn.number }),
+        message: this.transloco.translate('translation.reader.confirm.fnRetryMessage', { language: this.getLanguageName(this.targetLanguage()), cost: costStr }),
+        confirmText: this.transloco.translate('translation.reader.confirm.retry'),
+        cancelText: this.transloco.translate('translation.reader.confirm.keep'),
       });
       if (!retryConfirmed) return;
       void this.executeFootnoteTranslation(doc.id, fn, true);
@@ -839,10 +850,13 @@ export class TranslationReaderComponent implements OnInit, OnDestroy {
     }
 
     const confirmed = await this.confirmationService.confirm({
-      title: fn.translated_text ? `Re-translate footnote [^${fn.number}]?` : `Translate footnote [^${fn.number}]?`,
-      message: (fn.translated_text ? 'The existing footnote translation will be replaced. ' : '') + `Estimated cost: ~${costStr} (rough estimate based on character count)`,
-      confirmText: 'Translate',
-      cancelText: 'Cancel',
+      title: this.transloco.translate(fn.translated_text ? 'translation.reader.confirm.fnReTranslateTitle' : 'translation.reader.confirm.fnTranslateTitle', { number: fn.number }),
+      message: this.transloco.translate('translation.reader.confirm.fnMessage', {
+        replace: fn.translated_text ? this.transloco.translate('translation.reader.confirm.fnReplace') : '',
+        cost: costStr,
+      }),
+      confirmText: this.transloco.translate('translation.reader.confirm.translate'),
+      cancelText: this.transloco.translate('translation.reader.confirm.cancel'),
     });
     if (!confirmed) return;
 
@@ -862,17 +876,17 @@ export class TranslationReaderComponent implements OnInit, OnDestroy {
 
         if (updated.wrong_language) {
           const retryConfirmed = await this.confirmationService.confirm({
-            title: `Footnote [^${fn.number}] returned wrong language`,
-            message: `Gemini returned this footnote in the source language instead of ${this.getLanguageName(this.targetLanguage())}. Retry with stronger instructions? Estimated cost: ~${costStr}`,
-            confirmText: 'Retry',
-            cancelText: 'Keep',
+            title: this.transloco.translate('translation.reader.confirm.fnWrongLangTitle', { number: fn.number }),
+            message: this.transloco.translate('translation.reader.confirm.fnWrongLangMessage', { language: this.getLanguageName(this.targetLanguage()), cost: costStr }),
+            confirmText: this.transloco.translate('translation.reader.confirm.retry'),
+            cancelText: this.transloco.translate('translation.reader.confirm.keep'),
           });
           if (!retryConfirmed) return;
           void this.executeFootnoteTranslation(docId, fn, true);
         }
       },
       error: (err) => {
-        this.error.set(err.error?.message ?? 'Footnote translation failed.');
+        this.error.set(err.error?.message ?? this.transloco.translate('translation.reader.errors.footnoteFailed'));
         this.translatingFootnote.set(false);
       }
     });
@@ -886,7 +900,7 @@ export class TranslationReaderComponent implements OnInit, OnDestroy {
         this.footnotes.update(fns => fns.map(f => f.id === updated.id ? updated : f));
         if (this.activeFootnote()?.id === updated.id) this.activeFootnote.set(updated);
       },
-      error: () => this.error.set('Failed to dismiss.')
+      error: () => this.error.set(this.transloco.translate('translation.reader.errors.dismiss'))
     });
   }
 
diff --git a/wordkeep-client/src/app/pages/translation/translation.html b/wordkeep-client/src/app/pages/translation/translation.html
index 3934489..a95e00c 100644
--- a/wordkeep-client/src/app/pages/translation/translation.html
+++ b/wordkeep-client/src/app/pages/translation/translation.html
@@ -1,15 +1,16 @@
 <app-layout>
+<ng-container *transloco="let t; read: 'translation'">
 <div class="translation-container">
   <header class="page-header">
     <div class="header-content">
-      <h1>Translation</h1>
-      <p>Translate your documents using AI.</p>
+      <h1>{{ t('list.title') }}</h1>
+      <p>{{ t('list.subtitle') }}</p>
     </div>
     <button class="btn-new" (click)="openNewTranslationDialog()">
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
         <path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
       </svg>
-      New Translation
+      {{ t('list.newTranslation') }}
     </button>
   </header>
 
@@ -29,10 +30,10 @@ <h1>Translation</h1>
 
   <div class="translations-section">
     <div class="section-header">
-      <h2>Your Translations</h2>
+      <h2>{{ t('list.yourTranslations') }}</h2>
       <div class="header-actions">
         @if (total() > 0) {
-          <span class="count">{{ total() }} translation{{ total() === 1 ? '' : 's' }}</span>
+          <span class="count">{{ total() === 1 ? t('list.count', { count: total() }) : t('list.countPlural', { count: total() }) }}</span>
         }
         <app-sort-dropdown [value]="sort()" (valueChange)="onSortChange($event)"></app-sort-dropdown>
       </div>
@@ -41,7 +42,7 @@ <h2>Your Translations</h2>
     @if (loading()) {
       <div class="loading-state">
         <div class="spinner"></div>
-        <p>Loading translations...</p>
+        <p>{{ t('list.loading') }}</p>
       </div>
     } @else if (translations().length === 0) {
       <div class="empty-state">
@@ -50,13 +51,13 @@ <h2>Your Translations</h2>
             <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 21l5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 016-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 01-3.827-5.802" />
           </svg>
         </div>
-        <h3>No translations yet</h3>
-        <p>Click "New Translation" to translate a document</p>
+        <h3>{{ t('list.emptyTitle') }}</h3>
+        <p>{{ t('list.emptyBody') }}</p>
       </div>
     } @else {
       <div class="translations-grid">
-        @for (t of translations(); track t.id) {
-          <div class="translation-card" [class.disabled]="isRunning(t)" (click)="openReader(t)">
+        @for (tr of translations(); track tr.id) {
+          <div class="translation-card" [class.disabled]="isRunning(tr)" (click)="openReader(tr)">
             <div class="card-main">
               <div class="card-icon">
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
@@ -65,47 +66,47 @@ <h3>No translations yet</h3>
               </div>
               <div class="card-info">
                 <div class="card-name-row">
-                  <h3 class="card-name">{{ t.document?.effective_filename ?? 'Document #' + t.document_id }}</h3>
-                  <span class="lang-badge">{{ getLanguageName(t.target_language) }}</span>
-                  @if ((t.wrong_language_count ?? 0) > 0) {
-                    <span class="wrong-lang-badge">{{ t.wrong_language_count }} pages with wrong language</span>
+                  <h3 class="card-name">{{ tr.document?.effective_filename ?? t('list.documentFallback', { id: tr.document_id }) }}</h3>
+                  <span class="lang-badge">{{ getLanguageName(tr.target_language) }}</span>
+                  @if ((tr.wrong_language_count ?? 0) > 0) {
+                    <span class="wrong-lang-badge">{{ t('list.wrongLangPages', { count: tr.wrong_language_count }) }}</span>
                   }
-                  @if ((t.wrong_language_footnote_count ?? 0) > 0) {
-                    <span class="wrong-lang-badge">{{ t.wrong_language_footnote_count }} footnotes with wrong language</span>
+                  @if ((tr.wrong_language_footnote_count ?? 0) > 0) {
+                    <span class="wrong-lang-badge">{{ t('list.wrongLangFootnotes', { count: tr.wrong_language_footnote_count }) }}</span>
                   }
                 </div>
                 <div class="card-meta">
-                  <span>{{ formatDate(t.created_at) }}</span>
-                  @if (t.document) {
+                  <span>{{ formatDate(tr.created_at) }}</span>
+                  @if (tr.document) {
                     <span class="separator">•</span>
-                    <span>{{ t.document.page_count }} page{{ t.document.page_count === 1 ? '' : 's' }}</span>
+                    <span>{{ tr.document.page_count === 1 ? t('list.page', { count: tr.document.page_count }) : t('list.pagePlural', { count: tr.document.page_count }) }}</span>
                   }
                 </div>
                 <div class="translation-progress-bar">
                   <div class="progress-bar">
-                    <div class="progress-fill" [style.width.%]="getIdleProgress(t)"></div>
+                    <div class="progress-fill" [style.width.%]="getIdleProgress(tr)"></div>
                   </div>
-                  <span class="translation-progress-text">{{ t.pages_translated_actual ?? 0 }}/{{ t.document?.page_count ?? 0 }} translated ({{ getIdleProgress(t) }}%)</span>
+                  <span class="translation-progress-text">{{ t('list.translatedProgress', { done: tr.pages_translated_actual ?? 0, total: tr.document?.page_count ?? 0, percent: getIdleProgress(tr) }) }}</span>
                 </div>
-                @if (t.status === 'failed' && t.error_message) {
-                  <p class="error-text">{{ t.error_message }}</p>
+                @if (tr.status === 'failed' && tr.error_message) {
+                  <p class="error-text">{{ tr.error_message }}</p>
                 }
               </div>
             </div>
 
-            @if (!isRunning(t)) {
-              <span class="card-date">{{ formatDate(t.updated_at) }}</span>
+            @if (!isRunning(tr)) {
+              <span class="card-date">{{ formatDate(tr.updated_at) }}</span>
             }
 
             <div class="card-actions">
-              @if (isRunning(t)) {
+              @if (isRunning(tr)) {
                 <div class="translation-progress">
-                  <span class="progress-text">{{ t.pages_completed }}/{{ t.pages_total }}</span>
+                  <span class="progress-text">{{ tr.pages_completed }}/{{ tr.pages_total }}</span>
                   <div class="progress-bar">
-                    <div class="progress-fill" [style.width.%]="getProgress(t)"></div>
+                    <div class="progress-fill" [style.width.%]="getProgress(tr)"></div>
                   </div>
-                  @if (t.status === 'processing') {
-                    <button class="btn-cancel" (click)="cancelTranslation(t, $event)" title="Cancel translation">
+                  @if (tr.status === 'processing') {
+                    <button class="btn-cancel" (click)="cancelTranslation(tr, $event)" [title]="t('list.cancelTranslationTitle')">
                       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                         <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd" />
                       </svg>
@@ -114,22 +115,22 @@ <h3 class="card-name">{{ t.document?.effective_filename ?? 'Document #' + t.docu
                 </div>
               } @else {
                 <div class="bulk-translate-controls">
-                  <label class="override-checkbox" title="Re-translate pages that have already been translated" (click)="$event.stopPropagation()">
+                  <label class="override-checkbox" [title]="t('list.overrideTitle')" (click)="$event.stopPropagation()">
                     <input type="checkbox" #overrideCheckbox>
-                    <span>Override</span>
+                    <span>{{ t('list.override') }}</span>
                   </label>
-                  <button class="btn-bulk-translate" (click)="startTranslation(t, overrideCheckbox.checked, $event)" [disabled]="estimatingIds().has(t.id)" title="Translate all pages">
-                    @if (estimatingIds().has(t.id)) {
+                  <button class="btn-bulk-translate" (click)="startTranslation(tr, overrideCheckbox.checked, $event)" [disabled]="estimatingIds().has(tr.id)" [title]="t('list.translateAllTitle')">
+                    @if (estimatingIds().has(tr.id)) {
                       <span class="btn-spinner-sm"></span>
                     } @else {
                       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                         <path fill-rule="evenodd" d="M7 2a1 1 0 011 1v1h3a1 1 0 110 2H9.578a18.87 18.87 0 01-1.724 4.78c.29.354.596.696.914 1.026a1 1 0 11-1.44 1.389c-.188-.196-.373-.396-.554-.6a19.098 19.098 0 01-3.107 3.567 1 1 0 01-1.334-1.49 17.087 17.087 0 003.13-3.733 18.992 18.992 0 01-1.487-3.754 1 1 0 111.934-.516c.34 1.2.757 2.348 1.242 3.423.441-.974.808-1.98 1.094-3.01H3a1 1 0 110-2h3V3a1 1 0 011-1zm6 6a1 1 0 01.894.553l2.991 5.992a.869.869 0 01.02.037l.99 1.98a1 1 0 11-1.79.895L15.383 16h-4.764l-.724 1.447a1 1 0 11-1.788-.894l.99-1.98.019-.038 2.99-5.99A1 1 0 0113 8zm-1.382 6h2.764L13 11.236 11.618 14z" clip-rule="evenodd" />
                       </svg>
                     }
-                    Translate All
+                    {{ t('list.translateAll') }}
                   </button>
                 </div>
-                <button class="btn-delete" (click)="deleteTranslation(t, $event)" title="Delete translation">
+                <button class="btn-delete" (click)="deleteTranslation(tr, $event)" [title]="t('list.deleteTranslationTitle')">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                   <path fill-rule="evenodd" d="M8.75 1A2.75 2.75 0 006 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 10.23 1.482l.149-.022.841 10.518A2.75 2.75 0 007.596 19h4.807a2.75 2.75 0 002.742-2.53l.841-10.52.149.023a.75.75 0 00.23-1.482A41.03 41.03 0 0014 4.193V3.75A2.75 2.75 0 0011.25 1h-2.5zM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4zM8.58 7.72a.75.75 0 00-1.5.06l.3 7.5a.75.75 0 101.5-.06l-.3-7.5zm4.34.06a.75.75 0 10-1.5-.06l-.3 7.5a.75.75 0 101.5.06l.3-7.5z" clip-rule="evenodd" />
                 </svg>
@@ -146,11 +147,11 @@ <h3 class="card-name">{{ t.document?.effective_filename ?? 'Document #' + t.docu
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
               <path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clip-rule="evenodd" />
             </svg>
-            Previous
+            {{ t('list.previous') }}
           </button>
-          <span class="page-info">Page {{ currentPage() }} of {{ lastPage() }}</span>
+          <span class="page-info">{{ t('list.pageInfo', { current: currentPage(), last: lastPage() }) }}</span>
           <button class="btn-page" [disabled]="currentPage() === lastPage()" (click)="goToPage(currentPage() + 1)">
-            Next
+            {{ t('list.next') }}
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
               <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
             </svg>
@@ -160,4 +161,5 @@ <h3 class="card-name">{{ t.document?.effective_filename ?? 'Document #' + t.docu
     }
   </div>
 </div>
+</ng-container>
 </app-layout>
diff --git a/wordkeep-client/src/app/pages/translation/translation.spec.ts b/wordkeep-client/src/app/pages/translation/translation.spec.ts
index d192d05..c9d91a1 100644
--- a/wordkeep-client/src/app/pages/translation/translation.spec.ts
+++ b/wordkeep-client/src/app/pages/translation/translation.spec.ts
@@ -10,6 +10,7 @@ import { NewTranslationDialogService } from '../../services/new-translation-dial
 import { AuthService } from '../../services/auth.service';
 import { UserViewStatesService } from '../../services/user-view-states.service';
 import { DocumentTranslation, SortOptions } from '../../models/document.model';
+import { getTranslocoTestingModule } from '../../transloco/transloco-testing';
 
 const makeTranslation = (overrides: Partial<DocumentTranslation> = {}): DocumentTranslation => ({
   id: 1,
@@ -79,7 +80,7 @@ describe('TranslationComponent', () => {
 
     TestBed.resetTestingModule();
     TestBed.configureTestingModule({
-      imports: [TranslationComponent],
+      imports: [TranslationComponent, getTranslocoTestingModule()],
       providers: [
         provideRouter([]),
         { provide: TranslationService, useValue: mockTranslationService },
diff --git a/wordkeep-client/src/app/pages/translation/translation.ts b/wordkeep-client/src/app/pages/translation/translation.ts
index 4aedc98..e36752b 100644
--- a/wordkeep-client/src/app/pages/translation/translation.ts
+++ b/wordkeep-client/src/app/pages/translation/translation.ts
@@ -1,7 +1,9 @@
 import { Component, OnInit, OnDestroy, inject, signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Router } from '@angular/router';
+import { provideTranslocoScope, TranslocoDirective, TranslocoService } from '@jsverse/transloco';
 import { interval, Subscription } from 'rxjs';
+import { formatDateTime } from '../../utils/date-format';
 import { TranslationService } from '../../services/translation.service';
 import { ConfirmationService } from '../../services/confirmation.service';
 import { NewTranslationDialogService } from '../../services/new-translation-dialog.service';
@@ -9,13 +11,13 @@ import { DocumentTranslation, SortOptions } from '../../models/document.model';
 import { LayoutComponent } from '../../components/layout/layout';
 import { SortDropdownComponent } from '../../components/sort-dropdown/sort-dropdown';
 import { estimateTranslationCost } from '../../utils/translation-cost';
-import { languageDisplayName } from '../../utils/language-names';
 import { UserViewStatesService } from '../../services/user-view-states.service';
 
 @Component({
   selector: 'app-translation',
   standalone: true,
-  imports: [CommonModule, LayoutComponent, SortDropdownComponent],
+  imports: [CommonModule, LayoutComponent, SortDropdownComponent, TranslocoDirective],
+  providers: [provideTranslocoScope('translation')],
   templateUrl: './translation.html',
   styleUrl: './translation.scss'
 })
@@ -25,6 +27,7 @@ export class TranslationComponent implements OnInit, OnDestroy {
   private newTranslationDialog = inject(NewTranslationDialogService);
   private router = inject(Router);
   private viewStates = inject(UserViewStatesService);
+  private transloco = inject(TranslocoService);
   private pollSubscription?: Subscription;
   private dispatchedIds = new Set<number>();
 
@@ -65,7 +68,7 @@ export class TranslationComponent implements OnInit, OnDestroy {
         this.checkAndStartPolling();
       },
       error: () => {
-        this.error.set('Failed to load translations');
+        this.error.set(this.transloco.translate('translation.list.errors.load'));
         this.loading.set(false);
       }
     });
@@ -108,7 +111,7 @@ export class TranslationComponent implements OnInit, OnDestroy {
         this.loadTranslations(this.currentPage());
       },
       error: () => {
-        this.error.set('Failed to create translation');
+        this.error.set(this.transloco.translate('translation.list.errors.create'));
       }
     });
   }
@@ -128,29 +131,37 @@ export class TranslationComponent implements OnInit, OnDestroy {
         let confirmOptions: object;
 
         if (pages_to_translate === 0) {
-          message = 'All pages are already translated. Nothing will be billed.';
-          confirmOptions = { confirmText: 'OK', cancelText: 'Cancel' };
+          message = this.transloco.translate('translation.list.confirm.noPagesMessage');
+          confirmOptions = {
+            confirmText: this.transloco.translate('translation.list.confirm.ok'),
+            cancelText: this.transloco.translate('translation.list.confirm.cancel'),
+          };
         } else {
           const pricing = this.translationService.pricingRules();
           const totalCostStr = pricing ? estimateTranslationCost(total_chars, pricing) : '~';
           const avgCostStr = pricing && pages_to_translate > 0
             ? estimateTranslationCost(Math.round(total_chars / pages_to_translate), pricing)
             : '~';
-          const pageLabel = pages_to_translate === 1 ? '1 page' : `${pages_to_translate} pages`;
-          const costLine = `Estimated cost: ~${totalCostStr} (~${avgCostStr}/page on average). Canceling mid-run won't bill you for the full amount.`;
-          message = `${pageLabel} will be ${override ? 're-' : ''}translated. ${costLine}`;
+          const pageLabel = pages_to_translate === 1
+            ? this.transloco.translate('translation.list.confirm.pageLabel')
+            : this.transloco.translate('translation.list.confirm.pageLabelPlural', { count: pages_to_translate });
+          const costLine = this.transloco.translate('translation.list.confirm.costLine', { total: totalCostStr, avg: avgCostStr });
+          message = this.transloco.translate(
+            override ? 'translation.list.confirm.messageReTranslate' : 'translation.list.confirm.message',
+            { pageLabel, costLine }
+          );
           confirmOptions = override ? {
-            warningText: 'All existing translations for this document and language will be replaced.',
+            warningText: this.transloco.translate('translation.list.confirm.overrideWarning'),
             isDanger: true,
-            confirmText: 'Re-translate',
-          } : { confirmText: 'Translate' };
+            confirmText: this.transloco.translate('translation.list.confirm.reTranslate'),
+          } : { confirmText: this.transloco.translate('translation.list.confirm.translate') };
         }
 
         const confirmed = await this.confirmationService.confirm({
-          title: override ? 'Override Re-translate All?' : 'Translate All?',
+          title: this.transloco.translate(override ? 'translation.list.confirm.titleOverride' : 'translation.list.confirm.title'),
           message,
           ...confirmOptions,
-          cancelText: 'Cancel',
+          cancelText: this.transloco.translate('translation.list.confirm.cancel'),
         } as any);
 
         if (!confirmed) return;
@@ -170,13 +181,13 @@ export class TranslationComponent implements OnInit, OnDestroy {
             this.translations.update(list =>
               list.map(item => item.id === t.id ? { ...item, status: t.status } : item)
             );
-            this.error.set('Failed to start translation');
+            this.error.set(this.transloco.translate('translation.list.errors.start'));
           }
         });
       },
       error: () => {
         this.estimatingIds.update(s => { const n = new Set(s); n.delete(t.id); return n; });
-        this.error.set('Failed to fetch translation estimate');
+        this.error.set(this.transloco.translate('translation.list.errors.estimate'));
       }
     });
   }
@@ -187,7 +198,7 @@ export class TranslationComponent implements OnInit, OnDestroy {
 
     this.translationService.cancelTranslation(t.document_id, t.id).subscribe({
       next: () => this.loadTranslations(this.currentPage()),
-      error: () => this.error.set('Failed to cancel translation')
+      error: () => this.error.set(this.transloco.translate('translation.list.errors.cancel'))
     });
   }
 
@@ -195,19 +206,22 @@ export class TranslationComponent implements OnInit, OnDestroy {
     event.preventDefault();
     event.stopPropagation();
 
-    const name = `${t.document?.effective_filename ?? 'document'} (${this.getLanguageName(t.target_language)})`;
+    const name = this.transloco.translate('translation.list.confirm.deleteName', {
+      filename: t.document?.effective_filename ?? this.transloco.translate('translation.list.confirm.documentFallback'),
+      language: this.getLanguageName(t.target_language),
+    });
     const confirmed = await this.confirmationService.confirm({
-      title: 'Delete Translation',
-      message: `Are you sure you want to delete the translation "${name}"? This cannot be undone.`,
-      confirmText: 'Delete',
-      cancelText: 'Cancel',
+      title: this.transloco.translate('translation.list.confirm.deleteTitle'),
+      message: this.transloco.translate('translation.list.confirm.deleteMessage', { name }),
+      confirmText: this.transloco.translate('translation.list.confirm.delete'),
+      cancelText: this.transloco.translate('translation.list.confirm.cancel'),
       isDanger: true
     });
     if (!confirmed) return;
 
     this.translationService.deleteTranslation(t.document_id, t.id).subscribe({
       next: () => this.loadTranslations(this.currentPage()),
-      error: () => this.error.set('Failed to delete translation')
+      error: () => this.error.set(this.transloco.translate('translation.list.errors.delete'))
     });
   }
 
@@ -233,14 +247,13 @@ export class TranslationComponent implements OnInit, OnDestroy {
   }
 
   getLanguageName(code: string): string {
-    return languageDisplayName(code);
+    const key = `languages.${code}`;
+    const name = this.transloco.translate(key);
+    return name === key ? code : name;
   }
 
 formatDate(dateString: string): string {
-    return new Date(dateString).toLocaleDateString('en-US', {
-      year: 'numeric', month: 'short', day: 'numeric',
-      hour: '2-digit', minute: '2-digit'
-    });
+    return formatDateTime(dateString, this.transloco.getActiveLang());
   }
 
   goToPage(page: number) {
diff --git a/wordkeep-client/src/app/pages/verify-email-change/verify-email-change.html b/wordkeep-client/src/app/pages/verify-email-change/verify-email-change.html
index 9b7aa1a..5860392 100644
--- a/wordkeep-client/src/app/pages/verify-email-change/verify-email-change.html
+++ b/wordkeep-client/src/app/pages/verify-email-change/verify-email-change.html
@@ -1,6 +1,6 @@
-<div class="auth-container">
+<div class="auth-container" *transloco="let t; read: 'auth'">
   <aside class="auth-brand">
-    <a class="auth-brand__link" routerLink="/" aria-label="WordKeep — return to landing page">
+    <a class="auth-brand__link" routerLink="/" [attr.aria-label]="t('common.brandReturn')">
       <div class="auth-brand__logo">
         <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M6 20 V5 H9 V7 H10.5 V5 H13.5 V7 H15 V5 H18 V20 Z" stroke="currentColor" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round"/>
@@ -9,7 +9,7 @@
           <line x1="4" y1="20" x2="20" y2="20" stroke="currentColor" stroke-width="1.0" stroke-linecap="round"/>
         </svg>
       </div>
-      <span class="auth-brand__wordmark">WordKeep</span>
+      <span class="auth-brand__wordmark">{{ t('common.brand') }}</span>
     </a>
   </aside>
   <div class="auth-card">
@@ -17,8 +17,8 @@
       @case ('verifying') {
         <div class="status-state">
           <div class="spinner-large"></div>
-          <h2>Verifying your new email...</h2>
-          <p>Please wait while we confirm your email change.</p>
+          <h2>{{ t('verifyChange.verifyingTitle') }}</h2>
+          <p>{{ t('verifyChange.verifyingBody') }}</p>
         </div>
       }
       @case ('success') {
@@ -29,8 +29,8 @@ <h2>Verifying your new email...</h2>
               <path d="M8 12L11 15L16 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
             </svg>
           </div>
-          <h2>Email updated!</h2>
-          <p>Your email address has been changed successfully. Redirecting...</p>
+          <h2>{{ t('verifyChange.successTitle') }}</h2>
+          <p>{{ t('verifyChange.successBody') }}</p>
         </div>
       }
       @case ('error') {
@@ -41,9 +41,9 @@ <h2>Email updated!</h2>
               <path d="M15 9L9 15M9 9L15 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
             </svg>
           </div>
-          <h2>Verification failed</h2>
-          <p>{{ errorMessage() }}</p>
-          <a routerLink="/profile/info" class="btn-secondary">Back to Profile</a>
+          <h2>{{ t('verifyChange.failedTitle') }}</h2>
+          <p>{{ serverError() || t(errorKey()) }}</p>
+          <a routerLink="/profile/info" class="btn-secondary">{{ t('verifyChange.backToProfile') }}</a>
         </div>
       }
     }
diff --git a/wordkeep-client/src/app/pages/verify-email-change/verify-email-change.spec.ts b/wordkeep-client/src/app/pages/verify-email-change/verify-email-change.spec.ts
index 81655ff..bf5e4da 100644
--- a/wordkeep-client/src/app/pages/verify-email-change/verify-email-change.spec.ts
+++ b/wordkeep-client/src/app/pages/verify-email-change/verify-email-change.spec.ts
@@ -5,6 +5,7 @@ import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import { VerifyEmailChangeComponent } from './verify-email-change';
 import { AuthService } from '../../services/auth.service';
 import { mockUser } from '../../test-utils';
+import { getTranslocoTestingModule } from '../../transloco/transloco-testing';
 
 describe('VerifyEmailChangeComponent', () => {
   let component: VerifyEmailChangeComponent;
@@ -27,7 +28,7 @@ describe('VerifyEmailChangeComponent', () => {
 
     TestBed.resetTestingModule();
     TestBed.configureTestingModule({
-      imports: [VerifyEmailChangeComponent],
+      imports: [VerifyEmailChangeComponent, getTranslocoTestingModule()],
       providers: [
         provideRouter([]),
         { provide: AuthService, useValue: mockAuthService },
@@ -52,7 +53,7 @@ describe('VerifyEmailChangeComponent', () => {
     fixture.detectChanges();
 
     expect(component.status()).toBe('error');
-    expect(component.errorMessage()).toBeTruthy();
+    expect(component.errorKey()).toBe('verifyChange.noToken');
     expect(mockAuthService.verifyEmailChange).not.toHaveBeenCalled();
   });
 
@@ -101,7 +102,7 @@ describe('VerifyEmailChangeComponent', () => {
     fixture.detectChanges();
 
     expect(component.status()).toBe('error');
-    expect(component.errorMessage()).toBe('Token expired.');
+    expect(component.serverError()).toBe('Token expired.');
   });
 
   it('should_show_fallback_error_when_no_message_in_response', () => {
@@ -111,6 +112,7 @@ describe('VerifyEmailChangeComponent', () => {
     fixture.detectChanges();
 
     expect(component.status()).toBe('error');
-    expect(component.errorMessage()).toBeTruthy();
+    expect(component.errorKey()).toBe('verifyChange.verifyFailed');
+    expect(component.serverError()).toBeNull();
   });
 });
diff --git a/wordkeep-client/src/app/pages/verify-email-change/verify-email-change.ts b/wordkeep-client/src/app/pages/verify-email-change/verify-email-change.ts
index aeecb74..a624427 100644
--- a/wordkeep-client/src/app/pages/verify-email-change/verify-email-change.ts
+++ b/wordkeep-client/src/app/pages/verify-email-change/verify-email-change.ts
@@ -1,12 +1,13 @@
 import { Component, OnInit, inject, signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { TranslocoDirective } from '@jsverse/transloco';
 import { AuthService } from '../../services/auth.service';
 
 @Component({
   selector: 'app-verify-email-change',
   standalone: true,
-  imports: [CommonModule, RouterLink],
+  imports: [CommonModule, RouterLink, TranslocoDirective],
   templateUrl: './verify-email-change.html',
   styleUrl: './verify-email-change.scss'
 })
@@ -16,14 +17,15 @@ export class VerifyEmailChangeComponent implements OnInit {
   private router = inject(Router);
 
   status = signal<'verifying' | 'success' | 'error'>('verifying');
-  errorMessage = signal<string | null>(null);
+  errorKey = signal<'verifyChange.noToken' | 'verifyChange.verifyFailed'>('verifyChange.verifyFailed');
+  serverError = signal<string | null>(null);
 
   ngOnInit(): void {
     const token = this.route.snapshot.queryParamMap.get('token');
 
     if (!token) {
+      this.errorKey.set('verifyChange.noToken');
       this.status.set('error');
-      this.errorMessage.set('No verification token provided.');
       return;
     }
 
@@ -34,8 +36,9 @@ export class VerifyEmailChangeComponent implements OnInit {
         setTimeout(() => this.router.navigate([dest]), 3000);
       },
       error: (err) => {
+        this.errorKey.set('verifyChange.verifyFailed');
+        this.serverError.set(err.error?.message ?? null);
         this.status.set('error');
-        this.errorMessage.set(err.error?.message || 'Verification failed. The link may be invalid or expired.');
       }
     });
   }
diff --git a/wordkeep-client/src/app/pages/verify-email/verify-email.html b/wordkeep-client/src/app/pages/verify-email/verify-email.html
index 2ceac73..d7ba526 100644
--- a/wordkeep-client/src/app/pages/verify-email/verify-email.html
+++ b/wordkeep-client/src/app/pages/verify-email/verify-email.html
@@ -1,6 +1,6 @@
-<div class="auth-container">
+<div class="auth-container" *transloco="let t; read: 'auth'">
   <aside class="auth-brand">
-    <a class="auth-brand__link" routerLink="/" aria-label="WordKeep — return to landing page">
+    <a class="auth-brand__link" routerLink="/" [attr.aria-label]="t('common.brandReturn')">
       <div class="auth-brand__logo">
         <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M6 20 V5 H9 V7 H10.5 V5 H13.5 V7 H15 V5 H18 V20 Z" stroke="currentColor" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round"/>
@@ -9,7 +9,7 @@
           <line x1="4" y1="20" x2="20" y2="20" stroke="currentColor" stroke-width="1.0" stroke-linecap="round"/>
         </svg>
       </div>
-      <span class="auth-brand__wordmark">WordKeep</span>
+      <span class="auth-brand__wordmark">{{ t('common.brand') }}</span>
     </a>
   </aside>
   <div class="auth-card">
@@ -17,8 +17,8 @@
       @case ('verifying') {
         <div class="status-state">
           <div class="spinner-large"></div>
-          <h2>Verifying your email...</h2>
-          <p>Please wait while we verify your email address.</p>
+          <h2>{{ t('verifyEmail.verifyingTitle') }}</h2>
+          <p>{{ t('verifyEmail.verifyingBody') }}</p>
         </div>
       }
       @case ('success') {
@@ -29,8 +29,8 @@ <h2>Verifying your email...</h2>
               <path d="M8 12L11 15L16 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
             </svg>
           </div>
-          <h2>Email verified!</h2>
-          <p>Your account has been activated. Redirecting to dashboard...</p>
+          <h2>{{ t('verifyEmail.successTitle') }}</h2>
+          <p>{{ t('verifyEmail.successBody') }}</p>
         </div>
       }
       @case ('error') {
@@ -41,9 +41,9 @@ <h2>Email verified!</h2>
               <path d="M15 9L9 15M9 9L15 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
             </svg>
           </div>
-          <h2>Verification failed</h2>
-          <p>{{ errorMessage() }}</p>
-          <a routerLink="/login" class="btn-secondary">Back to login</a>
+          <h2>{{ t('verifyEmail.failedTitle') }}</h2>
+          <p>{{ serverError() || t(errorKey()) }}</p>
+          <a routerLink="/login" class="btn-secondary">{{ t('common.backToLogin') }}</a>
         </div>
       }
     }
diff --git a/wordkeep-client/src/app/pages/verify-email/verify-email.spec.ts b/wordkeep-client/src/app/pages/verify-email/verify-email.spec.ts
index f4e5a94..0587ac1 100644
--- a/wordkeep-client/src/app/pages/verify-email/verify-email.spec.ts
+++ b/wordkeep-client/src/app/pages/verify-email/verify-email.spec.ts
@@ -5,6 +5,7 @@ import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import { VerifyEmailComponent } from './verify-email';
 import { AuthService } from '../../services/auth.service';
 import { mockVerifyEmailResponse } from '../../test-utils';
+import { getTranslocoTestingModule } from '../../transloco/transloco-testing';
 
 describe('VerifyEmailComponent', () => {
   let component: VerifyEmailComponent;
@@ -25,7 +26,7 @@ describe('VerifyEmailComponent', () => {
 
     TestBed.resetTestingModule();
     TestBed.configureTestingModule({
-      imports: [VerifyEmailComponent],
+      imports: [VerifyEmailComponent, getTranslocoTestingModule()],
       providers: [
         provideRouter([]),
         { provide: AuthService, useValue: mockAuthService },
@@ -78,7 +79,7 @@ describe('VerifyEmailComponent', () => {
       fixture.detectChanges();
 
       expect(component.status()).toBe('error');
-      expect(component.errorMessage()).toBe('Invalid token');
+      expect(component.serverError()).toBe('Invalid token');
     });
 
     it('should_display_default_error_message', () => {
@@ -86,7 +87,8 @@ describe('VerifyEmailComponent', () => {
 
       fixture.detectChanges();
 
-      expect(component.errorMessage()).toBe('Verification failed. The link may be invalid or expired.');
+      expect(component.serverError()).toBeNull();
+      expect(component.errorKey()).toBe('verifyEmail.verifyFailed');
     });
   });
 
@@ -99,7 +101,7 @@ describe('VerifyEmailComponent', () => {
       fixture.detectChanges();
 
       expect(component.status()).toBe('error');
-      expect(component.errorMessage()).toBe('No verification token provided.');
+      expect(component.errorKey()).toBe('verifyEmail.noToken');
       expect(mockAuthService.verifyEmail).not.toHaveBeenCalled();
     });
   });
diff --git a/wordkeep-client/src/app/pages/verify-email/verify-email.ts b/wordkeep-client/src/app/pages/verify-email/verify-email.ts
index 5870882..1c1971e 100644
--- a/wordkeep-client/src/app/pages/verify-email/verify-email.ts
+++ b/wordkeep-client/src/app/pages/verify-email/verify-email.ts
@@ -1,18 +1,23 @@
 import { Component, OnInit, signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { TranslocoDirective } from '@jsverse/transloco';
 import { AuthService } from '../../services/auth.service';
 
 @Component({
   selector: 'app-verify-email',
   standalone: true,
-  imports: [CommonModule, RouterLink],
+  imports: [CommonModule, RouterLink, TranslocoDirective],
   templateUrl: './verify-email.html',
   styleUrl: './verify-email.scss'
 })
 export class VerifyEmailComponent implements OnInit {
   status = signal<'verifying' | 'success' | 'error'>('verifying');
-  errorMessage = signal<string | null>(null);
+  // Fallback translation key for the error state; the template renders it via
+  // the scoped t() so it resolves once the lazy auth scope has loaded.
+  errorKey = signal<'verifyEmail.noToken' | 'verifyEmail.verifyFailed'>('verifyEmail.verifyFailed');
+  // A server-provided (already-localized) message, when present, takes priority.
+  serverError = signal<string | null>(null);
 
   constructor(
     private route: ActivatedRoute,
@@ -24,8 +29,8 @@ export class VerifyEmailComponent implements OnInit {
     const token = this.route.snapshot.queryParamMap.get('token');
 
     if (!token) {
+      this.errorKey.set('verifyEmail.noToken');
       this.status.set('error');
-      this.errorMessage.set('No verification token provided.');
       return;
     }
 
@@ -35,8 +40,9 @@ export class VerifyEmailComponent implements OnInit {
         setTimeout(() => this.router.navigate(['/dashboard']), 3000);
       },
       error: (err) => {
+        this.errorKey.set('verifyEmail.verifyFailed');
+        this.serverError.set(err.error?.message ?? null);
         this.status.set('error');
-        this.errorMessage.set(err.error?.message || 'Verification failed. The link may be invalid or expired.');
       }
     });
   }
diff --git a/wordkeep-client/src/app/services/confirmation.service.spec.ts b/wordkeep-client/src/app/services/confirmation.service.spec.ts
index 8527595..3f08251 100644
--- a/wordkeep-client/src/app/services/confirmation.service.spec.ts
+++ b/wordkeep-client/src/app/services/confirmation.service.spec.ts
@@ -1,13 +1,24 @@
 import { TestBed } from '@angular/core/testing';
 import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { TranslocoService } from '@jsverse/transloco';
 import { ConfirmationService } from './confirmation.service';
 
 describe('ConfirmationService', () => {
   let service: ConfirmationService;
 
+  // Echo keys (with params appended) so assertions can verify the right
+  // translation key + interpolation reach the dialog config.
+  const translocoStub = {
+    translate: (key: string, params?: Record<string, unknown>) =>
+      params ? `${key} ${JSON.stringify(params)}` : key
+  };
+
   beforeEach(() => {
     TestBed.configureTestingModule({
-      providers: [ConfirmationService]
+      providers: [
+        ConfirmationService,
+        { provide: TranslocoService, useValue: translocoStub }
+      ]
     });
     service = TestBed.inject(ConfirmationService);
   });
@@ -24,7 +35,7 @@ describe('ConfirmationService', () => {
 
       expect(confirmSpy).toHaveBeenCalledWith(
         expect.objectContaining({
-          title: 'Delete Document'
+          title: 'confirmations.deleteDocument.title'
         })
       );
     });
@@ -48,7 +59,7 @@ describe('ConfirmationService', () => {
 
       expect(confirmSpy).toHaveBeenCalledWith(
         expect.objectContaining({
-          confirmText: 'Delete'
+          confirmText: 'confirmations.deleteDocument.confirm'
         })
       );
     });
@@ -90,7 +101,7 @@ describe('ConfirmationService', () => {
 
       expect(confirmSpy).toHaveBeenCalledWith(
         expect.objectContaining({
-          title: 'Override OCR Processing'
+          title: 'confirmations.overrideOcrSingle.title'
         })
       );
     });
@@ -102,7 +113,7 @@ describe('ConfirmationService', () => {
 
       expect(confirmSpy).toHaveBeenCalledWith(
         expect.objectContaining({
-          message: expect.stringContaining('this page')
+          message: 'confirmations.overrideOcrSingle.message'
         })
       );
     });
@@ -114,7 +125,7 @@ describe('ConfirmationService', () => {
 
       expect(confirmSpy).toHaveBeenCalledWith(
         expect.objectContaining({
-          warningText: expect.stringContaining('this page')
+          warningText: 'confirmations.overrideOcrSingle.warning'
         })
       );
     });
@@ -126,7 +137,7 @@ describe('ConfirmationService', () => {
 
       expect(confirmSpy).toHaveBeenCalledWith(
         expect.objectContaining({
-          confirmText: 'Run OCR'
+          confirmText: 'confirmations.overrideOcrSingle.confirm'
         })
       );
     });
@@ -168,7 +179,7 @@ describe('ConfirmationService', () => {
 
       expect(confirmSpy).toHaveBeenCalledWith(
         expect.objectContaining({
-          title: 'Override OCR Processing'
+          title: 'confirmations.overrideOcrBulk.title'
         })
       );
     });
@@ -180,7 +191,7 @@ describe('ConfirmationService', () => {
 
       expect(confirmSpy).toHaveBeenCalledWith(
         expect.objectContaining({
-          message: expect.stringContaining('all pages')
+          message: 'confirmations.overrideOcrBulk.message'
         })
       );
     });
@@ -192,7 +203,7 @@ describe('ConfirmationService', () => {
 
       expect(confirmSpy).toHaveBeenCalledWith(
         expect.objectContaining({
-          warningText: expect.stringContaining('all pages')
+          warningText: 'confirmations.overrideOcrBulk.warning'
         })
       );
     });
@@ -204,7 +215,7 @@ describe('ConfirmationService', () => {
 
       expect(confirmSpy).toHaveBeenCalledWith(
         expect.objectContaining({
-          confirmText: 'Run OCR'
+          confirmText: 'confirmations.overrideOcrBulk.confirm'
         })
       );
     });
@@ -238,6 +249,37 @@ describe('ConfirmationService', () => {
     });
   });
 
+  // Guard: every helper must feed the dialog translation keys, never raw
+  // English literals. Catches a regression the .html i18n check can't see
+  // (the strings originate in this service, not a template).
+  describe('localization guard', () => {
+    const helpers: Array<[string, () => Promise<boolean>]> = [
+      ['confirmDelete', () => service.confirmDelete('doc.pdf')],
+      ['confirmOverrideOcrSingle', () => service.confirmOverrideOcrSingle()],
+      ['confirmOverrideExtractTextSingle', () => service.confirmOverrideExtractTextSingle()],
+      ['confirmOverrideOcrBulk', () => service.confirmOverrideOcrBulk()]
+    ];
+
+    for (const [name, call] of helpers) {
+      it(`${name}_passes_only_translation_keys`, async () => {
+        const translateSpy = vi.spyOn(translocoStub, 'translate');
+        const confirmSpy = vi.spyOn(service, 'confirm').mockResolvedValue(true);
+
+        await call();
+
+        expect(translateSpy).toHaveBeenCalled();
+        const cfg = confirmSpy.mock.calls[0][0];
+        expect(cfg.title).toMatch(/^confirmations\./);
+        expect(cfg.confirmText).toMatch(/^confirmations\./);
+        expect(cfg.cancelText).toBe('common.cancel');
+        if (cfg.message) expect(cfg.message).toMatch(/^confirmations\./);
+        if (cfg.warningText) expect(cfg.warningText).toMatch(/^confirmations\./);
+
+        translateSpy.mockRestore();
+      });
+    }
+  });
+
   describe('confirm method structure', () => {
     it('should_return_promise', () => {
       // Mock to prevent actual DOM manipulation
diff --git a/wordkeep-client/src/app/services/confirmation.service.ts b/wordkeep-client/src/app/services/confirmation.service.ts
index d7ff6d9..096ad28 100644
--- a/wordkeep-client/src/app/services/confirmation.service.ts
+++ b/wordkeep-client/src/app/services/confirmation.service.ts
@@ -1,4 +1,5 @@
 import { Injectable, ApplicationRef, createComponent, EnvironmentInjector, inject } from '@angular/core';
+import { TranslocoService } from '@jsverse/transloco';
 import { ConfirmationDialogComponent, ConfirmationDialogConfig } from '../components/confirmation-dialog/confirmation-dialog';
 
 @Injectable({
@@ -7,6 +8,7 @@ import { ConfirmationDialogComponent, ConfirmationDialogConfig } from '../compon
 export class ConfirmationService {
   private appRef = inject(ApplicationRef);
   private injector = inject(EnvironmentInjector);
+  private transloco = inject(TranslocoService);
   private dialogComponentRef: any = null;
 
   async confirm(config: ConfirmationDialogConfig): Promise<boolean> {
@@ -23,43 +25,43 @@ export class ConfirmationService {
 
   async confirmDelete(itemName: string): Promise<boolean> {
     return this.confirm({
-      title: 'Delete Document',
-      message: `Are you sure you want to delete "${itemName}"? This cannot be undone.`,
-      confirmText: 'Delete',
-      cancelText: 'Cancel',
+      title: this.transloco.translate('confirmations.deleteDocument.title'),
+      message: this.transloco.translate('confirmations.deleteDocument.message', { name: itemName }),
+      confirmText: this.transloco.translate('confirmations.deleteDocument.confirm'),
+      cancelText: this.transloco.translate('common.cancel'),
       isDanger: true
     });
   }
 
   async confirmOverrideOcrSingle(): Promise<boolean> {
     return this.confirm({
-      title: 'Override OCR Processing',
-      message: 'This will re-process this page with OCR.',
-      warningText: 'Any manual text edits or formatting changes on this page will be lost.',
-      confirmText: 'Run OCR',
-      cancelText: 'Cancel',
+      title: this.transloco.translate('confirmations.overrideOcrSingle.title'),
+      message: this.transloco.translate('confirmations.overrideOcrSingle.message'),
+      warningText: this.transloco.translate('confirmations.overrideOcrSingle.warning'),
+      confirmText: this.transloco.translate('confirmations.overrideOcrSingle.confirm'),
+      cancelText: this.transloco.translate('common.cancel'),
       isDanger: true
     });
   }
 
   async confirmOverrideExtractTextSingle(): Promise<boolean> {
     return this.confirm({
-      title: 'Re-extract Text',
-      message: 'This will re-extract text from this page.',
-      warningText: 'Any manual text edits or formatting changes on this page will be lost.',
-      confirmText: 'Extract Text',
-      cancelText: 'Cancel',
+      title: this.transloco.translate('confirmations.overrideExtractTextSingle.title'),
+      message: this.transloco.translate('confirmations.overrideExtractTextSingle.message'),
+      warningText: this.transloco.translate('confirmations.overrideExtractTextSingle.warning'),
+      confirmText: this.transloco.translate('confirmations.overrideExtractTextSingle.confirm'),
+      cancelText: this.transloco.translate('common.cancel'),
       isDanger: true
     });
   }
 
   async confirmOverrideOcrBulk(): Promise<boolean> {
     return this.confirm({
-      title: 'Override OCR Processing',
-      message: 'This will re-process all pages with OCR.',
-      warningText: 'Any manual text edits or formatting changes on all pages will be lost.',
-      confirmText: 'Run OCR',
-      cancelText: 'Cancel',
+      title: this.transloco.translate('confirmations.overrideOcrBulk.title'),
+      message: this.transloco.translate('confirmations.overrideOcrBulk.message'),
+      warningText: this.transloco.translate('confirmations.overrideOcrBulk.warning'),
+      confirmText: this.transloco.translate('confirmations.overrideOcrBulk.confirm'),
+      cancelText: this.transloco.translate('common.cancel'),
       isDanger: true
     });
   }
diff --git a/wordkeep-client/src/app/services/user-preferences.service.spec.ts b/wordkeep-client/src/app/services/user-preferences.service.spec.ts
index f44be8e..2e5bb88 100644
--- a/wordkeep-client/src/app/services/user-preferences.service.spec.ts
+++ b/wordkeep-client/src/app/services/user-preferences.service.spec.ts
@@ -205,6 +205,96 @@ describe('UserPreferencesService', () => {
     });
   });
 
+  // ==================== locale ====================
+
+  describe('locale', () => {
+    function authenticateAndConsume(): void {
+      auth['storeAuth']?.(mockAuthResponse.token, mockAuthResponse.user);
+      TestBed.tick();
+      httpMock.match(API_URL).forEach(req => req.flush({ data: null }));
+    }
+
+    it('initializes locale from localStorage', () => {
+      storage.setItem('wk:locale', 'ro');
+      service = TestBed.inject(UserPreferencesService);
+      expect(service.locale()).toBe('ro');
+    });
+
+    it('falls back to en when localStorage empty', () => {
+      service = TestBed.inject(UserPreferencesService);
+      expect(service.locale()).toBe('en');
+    });
+
+    it('ignores invalid stored locale', () => {
+      storage.setItem('wk:locale', 'fr');
+      service = TestBed.inject(UserPreferencesService);
+      expect(service.locale()).toBe('en');
+    });
+
+    it('localeId maps to Angular locale ids', () => {
+      storage.setItem('wk:locale', 'ro');
+      service = TestBed.inject(UserPreferencesService);
+      expect(service.localeId()).toBe('ro');
+      service.setLocale('en');
+      expect(service.localeId()).toBe('en-GB');
+    });
+
+    it('setLocale updates signal, storage and PATCHes when authenticated', () => {
+      service = TestBed.inject(UserPreferencesService);
+      authenticateAndConsume();
+
+      service.setLocale('ro');
+
+      expect(service.locale()).toBe('ro');
+      expect(localStorage.getItem('wk:locale')).toBe('ro');
+      const req = httpMock.expectOne(API_URL);
+      expect(req.request.body).toEqual({ locale: 'ro' });
+      req.flush({ data: { theme_mode: null, palette: null, layout: null, locale: 'ro' } });
+    });
+
+    it('adopts server locale when present', () => {
+      service = TestBed.inject(UserPreferencesService);
+      auth['storeAuth']?.(mockAuthResponse.token, mockAuthResponse.user);
+      TestBed.tick();
+
+      httpMock.expectOne(API_URL).flush({ data: { theme_mode: null, palette: null, layout: null, locale: 'ro' } });
+
+      expect(service.locale()).toBe('ro');
+      expect(localStorage.getItem('wk:locale')).toBe('ro');
+    });
+
+    it('persists the pre-login choice when the server has no locale yet', () => {
+      storage.setItem('wk:locale', 'ro');
+      service = TestBed.inject(UserPreferencesService);
+      auth['storeAuth']?.(mockAuthResponse.token, mockAuthResponse.user);
+      TestBed.tick();
+
+      // GET resolves with no server-side locale.
+      httpMock.expectOne(API_URL).flush({ data: { theme_mode: null, palette: null, layout: null, locale: null } });
+
+      // The reconciliation PATCH saves the local choice.
+      const patch = httpMock.expectOne(API_URL);
+      expect(patch.request.method).toBe('PATCH');
+      expect(patch.request.body).toEqual({ locale: 'ro' });
+      patch.flush({ data: { theme_mode: null, palette: null, layout: null, locale: 'ro' } });
+    });
+
+    it('does not reconcile when the local locale is the default en', () => {
+      service = TestBed.inject(UserPreferencesService);
+      auth['storeAuth']?.(mockAuthResponse.token, mockAuthResponse.user);
+      TestBed.tick();
+
+      httpMock.expectOne(API_URL).flush({ data: { theme_mode: null, palette: null, layout: null, locale: null } });
+      // No follow-up PATCH expected (afterEach verify() asserts this).
+    });
+
+    it('re-hydrates locale signal on cross-tab storage event', () => {
+      service = TestBed.inject(UserPreferencesService);
+      window.dispatchEvent(new StorageEvent('storage', { key: 'wk:locale', newValue: 'ro' }));
+      expect(service.locale()).toBe('ro');
+    });
+  });
+
   // ==================== cross-tab storage event ====================
 
   describe('cross-tab storage event', () => {
diff --git a/wordkeep-client/src/app/services/user-preferences.service.ts b/wordkeep-client/src/app/services/user-preferences.service.ts
index e6adfbd..8e2aaed 100644
--- a/wordkeep-client/src/app/services/user-preferences.service.ts
+++ b/wordkeep-client/src/app/services/user-preferences.service.ts
@@ -6,18 +6,26 @@ import { AuthService } from './auth.service';
 import type { ThemeMode, Palette } from './theme.service';
 import type { Layout } from './layout.service';
 
+export type Locale = 'en' | 'ro';
+
 const THEME_KEY = 'wk:theme';
 const PALETTE_KEY = 'wk:palette';
 const LAYOUT_KEY = 'wk:layout';
+const LOCALE_KEY = 'wk:locale';
 
 const THEME_VALUES = new Set<ThemeMode>(['auto', 'light', 'dark']);
 const PALETTE_VALUES = new Set<Palette>(['reading-room', 'cobalt', 'monastic', 'grove', 'ferrous', 'plum']);
 const LAYOUT_VALUES = new Set<Layout>(['reading-room', 'workbench', 'compendium', 'glass', 'scriptorium', 'console']);
+const LOCALE_VALUES = new Set<Locale>(['en', 'ro']);
+
+/** Angular locale id used by date/number pipes for each app locale. */
+const LOCALE_IDS: Record<Locale, string> = { en: 'en-GB', ro: 'ro' };
 
 interface UserPreferencesData {
   theme_mode: ThemeMode | null;
   palette: Palette | null;
   layout: Layout | null;
+  locale: Locale | null;
 }
 
 @Injectable({ providedIn: 'root' })
@@ -29,10 +37,12 @@ export class UserPreferencesService {
   private _themeMode = signal<ThemeMode>(readStorage(THEME_KEY, THEME_VALUES, 'auto'));
   private _palette = signal<Palette>(readStorage(PALETTE_KEY, PALETTE_VALUES, 'reading-room'));
   private _layout = signal<Layout>(readStorage(LAYOUT_KEY, LAYOUT_VALUES, 'reading-room'));
+  private _locale = signal<Locale>(readStorage(LOCALE_KEY, LOCALE_VALUES, 'en'));
 
   readonly themeMode = this._themeMode.asReadonly();
   readonly palette = this._palette.asReadonly();
   readonly layout = this._layout.asReadonly();
+  readonly locale = this._locale.asReadonly();
 
   constructor() {
     if (typeof window !== 'undefined') {
@@ -47,10 +57,22 @@ export class UserPreferencesService {
   setThemeMode(m: ThemeMode): void { this.applyAndPatch({ theme_mode: m }); }
   setPalette(p: Palette): void { this.applyAndPatch({ palette: p }); }
   setLayout(l: Layout): void { this.applyAndPatch({ layout: l }); }
+  setLocale(l: Locale): void { this.applyAndPatch({ locale: l }); }
+
+  /** Angular locale id (e.g. 'ro', 'en-GB') for the active locale, for date/number pipes. */
+  localeId(): string { return LOCALE_IDS[this._locale()]; }
 
   load(): void {
     this.http.get<{ data: UserPreferencesData | null }>(this.apiUrl).pipe(
-      tap(res => { if (res.data) this.applyFromServer(res.data); }),
+      tap(res => {
+        if (res.data) this.applyFromServer(res.data);
+        // When the server has no locale opinion yet (null), adopt the local
+        // pre-login choice so it persists across devices. Only a non-default
+        // choice needs saving — null is already treated as 'en' server-side.
+        if (!res.data?.locale && this._locale() !== 'en') {
+          this.patch({ locale: this._locale() });
+        }
+      }),
       catchError(() => of(null)),
     ).subscribe();
   }
@@ -68,11 +90,18 @@ export class UserPreferencesService {
       this._layout.set(partial.layout);
       writeStorage(LAYOUT_KEY, partial.layout);
     }
-    if (this.auth.authenticated()) {
-      this.http.patch<{ data: UserPreferencesData }>(this.apiUrl, partial).pipe(
-        catchError(() => of(null)),
-      ).subscribe();
+    if (partial.locale !== undefined && partial.locale !== null) {
+      this._locale.set(partial.locale);
+      writeStorage(LOCALE_KEY, partial.locale);
     }
+    this.patch(partial);
+  }
+
+  private patch(partial: Partial<UserPreferencesData>): void {
+    if (!this.auth.authenticated()) return;
+    this.http.patch<{ data: UserPreferencesData }>(this.apiUrl, partial).pipe(
+      catchError(() => of(null)),
+    ).subscribe();
   }
 
   private applyFromServer(data: UserPreferencesData): void {
@@ -88,6 +117,10 @@ export class UserPreferencesService {
       this._layout.set(data.layout);
       writeStorage(LAYOUT_KEY, data.layout);
     }
+    if (data.locale && LOCALE_VALUES.has(data.locale)) {
+      this._locale.set(data.locale);
+      writeStorage(LOCALE_KEY, data.locale);
+    }
   }
 
   private handleStorageEvent(e: StorageEvent): void {
@@ -97,6 +130,8 @@ export class UserPreferencesService {
       this._palette.set(e.newValue as Palette);
     } else if (e.key === LAYOUT_KEY && e.newValue && LAYOUT_VALUES.has(e.newValue as Layout)) {
       this._layout.set(e.newValue as Layout);
+    } else if (e.key === LOCALE_KEY && e.newValue && LOCALE_VALUES.has(e.newValue as Locale)) {
+      this._locale.set(e.newValue as Locale);
     }
   }
 }
diff --git a/wordkeep-client/src/app/transloco/transloco-loader.ts b/wordkeep-client/src/app/transloco/transloco-loader.ts
new file mode 100644
index 0000000..977ccd8
--- /dev/null
+++ b/wordkeep-client/src/app/transloco/transloco-loader.ts
@@ -0,0 +1,19 @@
+import { inject, Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Translation, TranslocoLoader } from '@jsverse/transloco';
+
+/**
+ * Loads translation files from the static assets folder.
+ *
+ * Root translations live at `/assets/i18n/<lang>.json`; lazy feature scopes are
+ * requested by Transloco as `<scope>/<lang>` and resolve to
+ * `/assets/i18n/<scope>/<lang>.json`. Both shapes are handled by the same path.
+ */
+@Injectable({ providedIn: 'root' })
+export class TranslocoHttpLoader implements TranslocoLoader {
+  private readonly http = inject(HttpClient);
+
+  getTranslation(path: string) {
+    return this.http.get<Translation>(`/assets/i18n/${path}.json`);
+  }
+}
diff --git a/wordkeep-client/src/app/transloco/transloco-testing.ts b/wordkeep-client/src/app/transloco/transloco-testing.ts
new file mode 100644
index 0000000..e001016
--- /dev/null
+++ b/wordkeep-client/src/app/transloco/transloco-testing.ts
@@ -0,0 +1,72 @@
+import { TranslocoTestingModule, TranslocoTestingOptions } from '@jsverse/transloco';
+
+import en from '../../../public/assets/i18n/en.json';
+import ro from '../../../public/assets/i18n/ro.json';
+import charterEn from '../../../public/assets/i18n/charter/en.json';
+import charterRo from '../../../public/assets/i18n/charter/ro.json';
+import profileEn from '../../../public/assets/i18n/profile/en.json';
+import profileRo from '../../../public/assets/i18n/profile/ro.json';
+import authEn from '../../../public/assets/i18n/auth/en.json';
+import authRo from '../../../public/assets/i18n/auth/ro.json';
+import sharedEn from '../../../public/assets/i18n/shared/en.json';
+import sharedRo from '../../../public/assets/i18n/shared/ro.json';
+import documentsEn from '../../../public/assets/i18n/documents/en.json';
+import documentsRo from '../../../public/assets/i18n/documents/ro.json';
+import extractionEn from '../../../public/assets/i18n/extraction/en.json';
+import extractionRo from '../../../public/assets/i18n/extraction/ro.json';
+import pageLinkingEn from '../../../public/assets/i18n/pageLinking/en.json';
+import pageLinkingRo from '../../../public/assets/i18n/pageLinking/ro.json';
+import bookViewEn from '../../../public/assets/i18n/bookView/en.json';
+import bookViewRo from '../../../public/assets/i18n/bookView/ro.json';
+import translationEn from '../../../public/assets/i18n/translation/en.json';
+import translationRo from '../../../public/assets/i18n/translation/ro.json';
+import dictionaryEn from '../../../public/assets/i18n/dictionary/en.json';
+import dictionaryRo from '../../../public/assets/i18n/dictionary/ro.json';
+import shellEn from '../../../public/assets/i18n/shell/en.json';
+import shellRo from '../../../public/assets/i18n/shell/ro.json';
+import homeEn from '../../../public/assets/i18n/home/en.json';
+import homeRo from '../../../public/assets/i18n/home/ro.json';
+
+/**
+ * Transloco module preconfigured for unit tests. Add it to a TestBed's
+ * `imports` so components using the `transloco` pipe/directive resolve keys.
+ * Register new lazy scopes here (as `<scope>/<lang>`) when they are added.
+ */
+export function getTranslocoTestingModule(options: TranslocoTestingOptions = {}) {
+  return TranslocoTestingModule.forRoot({
+    langs: {
+      en,
+      ro,
+      'charter/en': charterEn,
+      'charter/ro': charterRo,
+      'profile/en': profileEn,
+      'profile/ro': profileRo,
+      'auth/en': authEn,
+      'auth/ro': authRo,
+      'shared/en': sharedEn,
+      'shared/ro': sharedRo,
+      'documents/en': documentsEn,
+      'documents/ro': documentsRo,
+      'extraction/en': extractionEn,
+      'extraction/ro': extractionRo,
+      'pageLinking/en': pageLinkingEn,
+      'pageLinking/ro': pageLinkingRo,
+      'bookView/en': bookViewEn,
+      'bookView/ro': bookViewRo,
+      'translation/en': translationEn,
+      'translation/ro': translationRo,
+      'dictionary/en': dictionaryEn,
+      'dictionary/ro': dictionaryRo,
+      'shell/en': shellEn,
+      'shell/ro': shellRo,
+      'home/en': homeEn,
+      'home/ro': homeRo,
+    },
+    translocoConfig: {
+      availableLangs: ['en', 'ro'],
+      defaultLang: 'en',
+    },
+    preloadLangs: true,
+    ...options,
+  });
+}
diff --git a/wordkeep-client/src/app/utils/date-format.spec.ts b/wordkeep-client/src/app/utils/date-format.spec.ts
index dcdbbf8..7994985 100644
--- a/wordkeep-client/src/app/utils/date-format.spec.ts
+++ b/wordkeep-client/src/app/utils/date-format.spec.ts
@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { formatNumericDate } from './date-format';
+import { formatNumericDate, formatDateTime, formatLocaleDate } from './date-format';
 
 describe('formatNumericDate', () => {
   it('should_format_as_DD_MM_YYYY', () => {
@@ -14,4 +14,47 @@ describe('formatNumericDate', () => {
     const result = formatNumericDate(new Date(2026, 11, 31).toISOString());
     expect(result).toBe('31/12/2026');
   });
+
+  it('should_default_to_en_slash_separator', () => {
+    expect(formatNumericDate(new Date(2026, 4, 28), 'en')).toBe('28/05/2026');
+  });
+
+  it('should_use_dot_separator_for_ro', () => {
+    expect(formatNumericDate(new Date(2026, 4, 28), 'ro')).toBe('28.05.2026');
+  });
+});
+
+describe('formatDateTime', () => {
+  // Fixed local time so output is timezone-stable across CI.
+  const dt = new Date(2024, 0, 15, 14, 30);
+
+  it('should_render_english_with_am_pm', () => {
+    const result = formatDateTime(dt, 'en');
+    expect(result).toContain('Jan');
+    expect(result).toContain('2024');
+    expect(result).toMatch(/[AP]M/);
+  });
+
+  it('should_render_romanian_24h_without_am_pm', () => {
+    const result = formatDateTime(dt, 'ro');
+    expect(result).toContain('ian.');
+    expect(result).toContain('14:30');
+    expect(result).not.toMatch(/[AP]M/);
+  });
+
+  it('should_support_long_month', () => {
+    expect(formatDateTime(dt, 'en', 'long')).toContain('January');
+  });
+
+  it('should_default_unknown_locale_to_english', () => {
+    expect(formatDateTime(dt, 'fr')).toMatch(/[AP]M/);
+  });
+});
+
+describe('formatLocaleDate', () => {
+  it('should_format_date_only_per_locale', () => {
+    const d = new Date(2024, 0, 15);
+    expect(formatLocaleDate(d, 'en')).toContain('Jan');
+    expect(formatLocaleDate(d, 'ro')).toContain('ian.');
+  });
 });
diff --git a/wordkeep-client/src/app/utils/date-format.ts b/wordkeep-client/src/app/utils/date-format.ts
index c8d8d84..8103905 100644
--- a/wordkeep-client/src/app/utils/date-format.ts
+++ b/wordkeep-client/src/app/utils/date-format.ts
@@ -1,11 +1,44 @@
+export type NumericDateLocale = 'en' | 'ro';
+
 /**
- * Format a date as DD/MM/YYYY with zero-padded day and month.
- * Use this for any numeric date display so the format is unambiguous and locale-independent.
+ * Format a date with a zero-padded day and month, following regional convention:
+ * `en` → DD/MM/YYYY (slash), `ro` → DD.MM.YYYY (dot). Day/month order is the
+ * same in both, so only the separator changes. Defaults to `en`.
  */
-export function formatNumericDate(input: string | Date): string {
+export function formatNumericDate(input: string | Date, locale: NumericDateLocale = 'en'): string {
   const d = input instanceof Date ? input : new Date(input);
   const day = String(d.getDate()).padStart(2, '0');
   const month = String(d.getMonth() + 1).padStart(2, '0');
   const year = d.getFullYear();
-  return `${day}/${month}/${year}`;
+  const sep = locale === 'ro' ? '.' : '/';
+  return `${day}${sep}${month}${sep}${year}`;
+}
+
+// Locale tags for Intl date/time: en keeps US (AM/PM, month-first) per spec;
+// ro uses 24h + RO month/ordering.
+const DATETIME_TAGS: Record<NumericDateLocale, string> = { en: 'en-US', ro: 'ro-RO' };
+
+/** Locale-aware date/time format. Pass Intl options to control what's shown. */
+export function formatLocaleDate(
+  input: string | Date,
+  locale: string = 'en',
+  options: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'short', day: 'numeric' }
+): string {
+  const tag = DATETIME_TAGS[(locale as NumericDateLocale)] ?? 'en-US';
+  return new Date(input).toLocaleString(tag, options);
+}
+
+/**
+ * Document-card timestamp (date + time). Thin wrapper so the card sites stay
+ * one-liners and don't duplicate the options object.
+ * en → "Jan 15, 2024, 10:30 AM"; ro → "15 ian. 2024, 12:30" (24h).
+ */
+export function formatDateTime(
+  input: string | Date,
+  locale: string = 'en',
+  month: 'short' | 'long' = 'short'
+): string {
+  return formatLocaleDate(input, locale, {
+    year: 'numeric', month, day: 'numeric', hour: '2-digit', minute: '2-digit'
+  });
 }
diff --git a/wordkeep-client/src/styles.scss b/wordkeep-client/src/styles.scss
index 3744534..1fcb390 100644
--- a/wordkeep-client/src/styles.scss
+++ b/wordkeep-client/src/styles.scss
@@ -183,21 +183,43 @@ select {
 // titles drop to mono with a leading $/# prompt.
 
 [data-layout='console'] {
+  // Badges become borderless "ANSI" tokens: a leading dot in the badge's own
+  // colour + a lowercase mono label. The dot inherits `currentColor`, so each
+  // badge keeps its semantic colour (status, language, type…) with no per-type
+  // rules. Deliberately unlike scriptorium's uppercase tilted double-border
+  // cartouche.
   .doc-status,
-  .renamed-badge {
+  .renamed-badge,
+  .type-badge,
+  .lang-badge,
+  .wrong-lang-badge {
+    display: inline-flex !important;
+    align-items: center;
+    gap: 0.4em;
     background: transparent !important;
-    border: 1px solid currentColor !important;
+    border: none !important;
+    box-shadow: none !important;
+    transform: none !important;
     border-radius: 0 !important;
-    padding: 0.05rem 0.35rem !important;
+    padding: 0 !important;
     font-family: var(--font-mono) !important;
-    font-size: 0.62rem !important;
-    font-weight: 600 !important;
-    letter-spacing: 0.08em !important;
-    text-transform: uppercase;
+    font-size: 0.8rem !important;
+    font-weight: 500 !important;
+    letter-spacing: 0.01em !important;
+    text-transform: lowercase !important;
     position: relative;
 
-    &::before { content: '['; margin-right: 0.1rem; opacity: 0.5; }
-    &::after  { content: ']'; margin-left: 0.1rem;  opacity: 0.5; }
+    &::before {
+      content: '' !important;
+      flex-shrink: 0;
+      width: 0.5em;
+      height: 0.5em;
+      margin: 0 !important;
+      border-radius: 50%;
+      background: currentColor;
+      opacity: 1;
+    }
+    &::after { content: none !important; }
   }
 
   // Section H1/H2: command-style header, mono, with leading prompt.