diff --git a/LOCALIZATION.md b/LOCALIZATION.md
new file mode 100644
index 00000000..362b0a09
--- /dev/null
+++ b/LOCALIZATION.md
@@ -0,0 +1,273 @@
+# Frontend Localization Guide
+
+This document describes the localization system for the Whisper Money React frontend and the automated tools available.
+
+## Overview
+
+The application now supports multilingual UI text using a simple translation system:
+
+- **Hook**: `useTranslations()` (aliased as `__()`)
+- **Translation Files**: `lang/es.json` (Spanish), with English as fallback
+- **Coverage**: 118+ React components have been localized
+- **Total Strings**: 730+ translatable strings
+
+## How It Works
+
+### Backend (Laravel)
+
+The `HandleInertiaRequests` middleware loads the appropriate translation file (`lang/{locale}.json`) and shares it with all Inertia page props:
+
+```php
+protected function getTranslations(): array
+{
+    $locale = app()->getLocale();
+    $translationFile = lang_path("{$locale}.json");
+    return json_decode(file_get_contents($translationFile), true) ?? [];
+}
+```
+
+### Frontend (React)
+
+Components use the `__()` function directly to translate strings:
+
+```tsx
+import { __ } from '@/utils/i18n';
+
+export default function MyComponent() {
+    return (
+        <div>
+            <h1>{__('Welcome to Whisper Money')}</h1>
+            <Button>{__('Save')}</Button>
+        </div>
+    );
+}
+```
+
+**Note**: The `__()` function uses React's `usePage()` hook internally, so it must be called within React components.
+
+### Frontend (React)
+
+Components use the `__()` hook to translate strings:
+
+```tsx
+import { __ } from '@/utils/i18n';
+
+export default function MyComponent() {
+    const t = __();
+
+    return (
+        <div>
+            <h1>{t('Welcome to Whisper Money')}</h1>
+            <Button>{t('Save')}</Button>
+        </div>
+    );
+}
+```
+
+## Automated Localization Tools
+
+### Main Localization Script (Local Development Only)
+
+**File**: `scripts/localize-frontend.mjs` (not committed to repo)
+
+This script automatically wraps hardcoded strings with the `t()` translation function across all React components.
+
+**What it does**:
+
+- Scans all `.tsx` and `.ts` files in `resources/js/`
+- Wraps JSX text content and specific props (title, placeholder, etc.) with `t()`
+- Auto-imports the `__()` hook and adds `const t = __()` to components
+- Extracts all unique strings to `lang/es.json`
+- Generates a detailed report of changes
+
+**What it skips**:
+
+- Technical identifiers (class names, data-test attributes, etc.)
+- URLs, email addresses
+- Currency codes (USD, EUR, etc.)
+- Brand names (Whisper Money, Discord, etc.)
+- Single-character strings
+- Code-like patterns
+
+**Usage** (local development only):
+
+```bash
+# Run the localization script (safe to run multiple times)
+node scripts/localize-frontend.mjs
+
+# Format the modified files
+bun run format
+
+# Review changes
+git diff resources/js/
+git diff lang/es.json
+cat localization-report.txt
+```
+
+**Note**: The script is for local development only and not committed to the repository. Translations must be added manually to `lang/es.json`.
+
+## Current Status
+
+### Completed (✅)
+
+- ✅ 118 React components localized
+- ✅ 730 strings extracted and wrapped with `t()`
+- ✅ Translation infrastructure in place
+- ✅ Automated extraction tool created
+- ✅ English fallbacks for all strings
+
+### Pending (⏳)
+
+- ⏳ Spanish translations (currently English placeholders - manual translation needed)
+- ⏳ Some files may need manual review for complex JSX patterns
+
+## Adding New Translatable Strings
+
+### Option 1: Manual (Recommended for new code)
+
+```tsx
+import { __ } from '@/utils/i18n';
+
+export default function NewComponent() {
+    return (
+        <div>
+            <h1>{__('My New Title')}</h1>
+            <Input placeholder={__('Enter your name')} />
+        </div>
+    );
+}
+```
+
+Then add the translations to `lang/es.json`:
+
+```json
+{
+    "My New Title": "Mi Nuevo Título",
+    "Enter your name": "Ingresa tu nombre"
+}
+```
+
+Then add the translations to `lang/es.json`:
+
+```json
+{
+    "My New Title": "Mi Nuevo Título",
+    "Enter your name": "Ingresa tu nombre"
+}
+```
+
+### Option 2: Automated (For bulk updates - local development)
+
+1. Write your component with hardcoded English strings
+2. Run `node scripts/localize-frontend.mjs` (if available locally)
+3. Run `bun run format`
+4. Manually translate new entries in `lang/es.json`
+
+## Translation with Placeholders
+
+Support for dynamic values:
+
+```tsx
+// In your component
+const message = __('Hello :name, you have :count unread messages', {
+    name: user.name,
+    count: unreadCount
+});
+
+// In lang/es.json
+{
+    "Hello :name, you have :count unread messages": "Hola :name, tienes :count mensajes sin leer"
+}
+```
+
+## Testing Translations
+
+1. **Change language**: Go to Settings → Language → Select "Español"
+2. **Test UI**: Navigate through the app and verify translations
+3. **Check console**: Look for missing translation warnings (if implemented)
+
+## Translation Guidelines
+
+### For Spanish (es)
+
+- Use informal "tú" form (not formal "usted")
+- Financial terms should be accurate and professional
+- Preserve brand names in English
+- Keep the friendly, approachable tone
+- Use sentence case, not title case
+
+### Examples
+
+- ✅ "Guardar cambios" (Save changes)
+- ❌ "Guardar Cambios" (wrong capitalization)
+- ✅ "Iniciar sesión" (Log in)
+- ❌ "Entrar" (too casual)
+
+## CI/CD Integration
+
+Consider adding translation validation to your CI pipeline in the future to ensure all strings are translated.
+
+## Troubleshooting
+
+### Issue: Translations not showing
+
+**Solution**: Check that:
+
+1. The string exists in `lang/es.json`
+2. User's language setting is "Español" or auto-detected to Spanish
+3. Browser cache is cleared
+
+### Issue: String wrapped incorrectly by script
+
+**Solution**:
+
+1. Revert the file: `git checkout <file>`
+2. Manually wrap the string
+3. Add the string pattern to skip list in `scripts/localize-frontend.mjs`
+
+### Issue: Script breaks complex JSX
+
+**Solution**: The script has limitations with very complex nested JSX. For these files:
+
+1. Revert the auto-changes
+2. Manually localize
+3. Or simplify the JSX structure
+
+## File Structure
+
+```
+lang/
+├── es.json              # Spanish translations
+├── es/                  # Laravel backend translations (PHP)
+│   ├── auth.php
+│   ├── pagination.php
+│   └── ...
+└── en/                  # English backend translations
+
+scripts/
+├── localize-frontend.mjs       # Main localization tool
+└── translate-to-spanish.mjs    # AI translation helper
+
+resources/js/
+├── utils/i18n.ts              # Translation hook
+└── types/index.d.ts           # SharedData type (includes translations)
+```
+
+## Next Steps
+
+1. **Manual translation**: Translate English placeholders in `lang/es.json` to Spanish
+2. **Review translations**: Check accuracy, tone, and proper Spanish conventions
+3. **Test thoroughly**: Test the entire app in Spanish
+4. **Add more languages**: Create `lang/fr.json`, `lang/de.json`, etc.
+
+## Resources
+
+- Translation hook: `resources/js/utils/i18n.ts`
+- Example localized component: `resources/js/pages/auth/login.tsx`
+- Example localized settings: `resources/js/pages/settings/account.tsx`
+- Translation middleware: `app/Http/Middleware/HandleInertiaRequests.php`
+- Spanish translations: `lang/es.json`
+
+## Development Scripts
+
+The localization automation script (`scripts/localize-frontend.mjs`) is available for local development only and is not committed to the repository. It uses Babel to parse and transform React components automatically. If you need to regenerate it, refer to the project's localization implementation history.
diff --git a/app/Actions/CreateDefaultCategories.php b/app/Actions/CreateDefaultCategories.php
index b762de6f..3f69323b 100644
--- a/app/Actions/CreateDefaultCategories.php
+++ b/app/Actions/CreateDefaultCategories.php
@@ -11,7 +11,8 @@ class CreateDefaultCategories
      */
     public function handle(User $user): void
     {
-        $defaultCategories = self::getDefaultCategories();
+        $locale = $user->locale ?? app()->getLocale();
+        $defaultCategories = self::getDefaultCategories($locale);
 
         foreach ($defaultCategories as $category) {
             $user->categories()->firstOrCreate(
@@ -22,11 +23,33 @@ class CreateDefaultCategories
     }
 
     /**
-     * Get the default categories configuration.
+     * Get the default categories configuration for a given locale.
      *
      * @return array<int, array{name: string, icon: string, color: string, type: string}>
      */
-    public static function getDefaultCategories(): array
+    public static function getDefaultCategories(string $locale = 'en'): array
+    {
+        $categories = self::getBaseCategories();
+
+        if ($locale === 'es') {
+            $translations = self::getSpanishTranslations();
+
+            return array_map(function (array $category) use ($translations) {
+                $category['name'] = $translations[$category['name']] ?? $category['name'];
+
+                return $category;
+            }, $categories);
+        }
+
+        return $categories;
+    }
+
+    /**
+     * Get the base (English) categories configuration.
+     *
+     * @return array<int, array{name: string, icon: string, color: string, type: string}>
+     */
+    private static function getBaseCategories(): array
     {
         return [
             [
@@ -409,4 +432,78 @@ class CreateDefaultCategories
             ],
         ];
     }
+
+    /**
+     * Get the Spanish translations for category names.
+     *
+     * @return array<string, string>
+     */
+    private static function getSpanishTranslations(): array
+    {
+        return [
+            'Food' => 'Alimentación',
+            'Cafes, restaurants, bars' => 'Cafeterías, restaurantes, bares',
+            'Groceries' => 'Supermercado',
+            'Tobacco and alcohol' => 'Tabaco y alcohol',
+            'Other groceries' => 'Otras compras de alimentación',
+            'Food delivery' => 'Comida a domicilio',
+            'Utility services' => 'Servicios del hogar',
+            'Electricity' => 'Electricidad',
+            'Natural gas' => 'Gas natural',
+            'Rent and maintanence' => 'Alquiler y mantenimiento',
+            'Telephone, internet, TV, computer' => 'Teléfono, internet, TV, ordenador',
+            'Water' => 'Agua',
+            'Other utility expenses' => 'Otros gastos del hogar',
+            'Household goods' => 'Artículos del hogar',
+            'Transportation' => 'Transporte',
+            'Parking' => 'Aparcamiento',
+            'Fuel' => 'Combustible',
+            'Transportation expenses' => 'Gastos de transporte',
+            'Vehicle purchase, maintenance' => 'Compra y mantenimiento de vehículo',
+            'Clothing and shoes' => 'Ropa y calzado',
+            'Leisure activities, traveling' => 'Ocio y viajes',
+            'Gifts' => 'Regalos',
+            'Books, newspapers, magazines' => 'Libros, periódicos, revistas',
+            'Accommodation, travel expenses' => 'Alojamiento y gastos de viaje',
+            'Sport and sports goods' => 'Deporte y artículos deportivos',
+            'Theatre, music, cinema' => 'Teatro, música, cine',
+            'Hobbies and other leisure time activites' => 'Hobbies y otras actividades de ocio',
+            'Education, health and beauty' => 'Educación, salud y belleza',
+            'Education and courses' => 'Educación y cursos',
+            'Beauty, cosmetics' => 'Belleza y cosmética',
+            'Health and pharmaceuticals' => 'Salud y farmacia',
+            'Online transactions' => 'Transacciones en línea',
+            'Online services' => 'Servicios en línea',
+            'Insurance' => 'Seguros',
+            'Investments' => 'Inversiones',
+            'Savings' => 'Ahorros',
+            'Other investments' => 'Otras inversiones',
+            'Financial services and commission' => 'Servicios financieros y comisiones',
+            'Fines' => 'Multas',
+            'Mortgage' => 'Hipoteca',
+            'Credit card repayment' => 'Pago de tarjeta de crédito',
+            'Cash withdrawal' => 'Retiro de efectivo',
+            'Gambling' => 'Apuestas',
+            'Lottery' => 'Lotería',
+            'Taxes and government fees' => 'Impuestos y tasas',
+            'Invoices' => 'Facturas',
+            'Personal transfers' => 'Transferencias personales',
+            'Other personal transfers' => 'Otras transferencias personales',
+            'Administrative violations' => 'Infracciones administrativas',
+            'Other transfers' => 'Otras transferencias',
+            'Other payments' => 'Otros pagos',
+            'Salary' => 'Salario',
+            'Regular income' => 'Ingresos regulares',
+            'Work on demand' => 'Trabajo por encargo',
+            'Income from rent' => 'Ingresos por alquiler',
+            'Unemployment benefit' => 'Prestación por desempleo',
+            'Tax return' => 'Devolución de impuestos',
+            'Return debit' => 'Devolución de débito',
+            'Own account' => 'Cuenta propia',
+            'From account of relatives' => 'Desde cuenta de familiares',
+            'Returned payments' => 'Pagos devueltos',
+            'Credit cards' => 'Tarjetas de crédito',
+            'Other incoming payments' => 'Otros ingresos',
+        ];
+    }
 }
diff --git a/app/Actions/Fortify/CreateNewUser.php b/app/Actions/Fortify/CreateNewUser.php
index e18b759c..611b3f1d 100644
--- a/app/Actions/Fortify/CreateNewUser.php
+++ b/app/Actions/Fortify/CreateNewUser.php
@@ -34,6 +34,7 @@ class CreateNewUser implements CreatesNewUsers
             'name' => $input['name'],
             'email' => $input['email'],
             'password' => $input['password'],
+            'locale' => $this->detectLocaleFromRequest(),
         ]);
 
         if (! config('mail.email_verification_enabled')) {
@@ -42,4 +43,19 @@ class CreateNewUser implements CreatesNewUsers
 
         return $user;
     }
+
+    /**
+     * Detect locale from Accept-Language header.
+     */
+    protected function detectLocaleFromRequest(): string
+    {
+        $acceptLanguage = request()->header('Accept-Language', '');
+
+        // Check if Spanish is preferred
+        if (preg_match('/^es(-|,|;)/i', $acceptLanguage) || $acceptLanguage === 'es') {
+            return 'es';
+        }
+
+        return 'en';
+    }
 }
diff --git a/app/Http/Controllers/Settings/ProfileController.php b/app/Http/Controllers/Settings/ProfileController.php
index e2c6eb1f..efb296ac 100644
--- a/app/Http/Controllers/Settings/ProfileController.php
+++ b/app/Http/Controllers/Settings/ProfileController.php
@@ -45,7 +45,9 @@ class ProfileController extends Controller
      */
     public function update(ProfileUpdateRequest $request): RedirectResponse
     {
-        $request->user()->fill($request->validated());
+        $data = $request->validated();
+
+        $request->user()->fill($data);
 
         if ($request->user()->isDirty('email')) {
             $request->user()->email_verified_at = null;
diff --git a/app/Http/Middleware/BlockDemoAccountActions.php b/app/Http/Middleware/BlockDemoAccountActions.php
index 119b0074..58acf939 100644
--- a/app/Http/Middleware/BlockDemoAccountActions.php
+++ b/app/Http/Middleware/BlockDemoAccountActions.php
@@ -18,7 +18,7 @@ class BlockDemoAccountActions
 
     public function handle(Request $request, Closure $next, ?string $mode = null): Response
     {
-        if (! $request->user()?->isDemoAccount()) {
+        if (! $request->user()?->isDemoAccount() || app()->environment('local')) {
             return $next($request);
         }
 
diff --git a/app/Http/Middleware/HandleInertiaRequests.php b/app/Http/Middleware/HandleInertiaRequests.php
index c6ac1b6b..ad850346 100644
--- a/app/Http/Middleware/HandleInertiaRequests.php
+++ b/app/Http/Middleware/HandleInertiaRequests.php
@@ -40,7 +40,7 @@ class HandleInertiaRequests extends Middleware
         [$message, $author] = str(Inspiring::quotes()->random())->explode('-');
 
         $user = $request->user();
-        $isDemoAccount = $user?->isDemoAccount() ?? false;
+        $isDemoAccount = $user?->isDemoAccount() && ! app()->environment('local') ?? false;
         $isDemoQuery = $request->query('demo') === '1';
 
         return [
@@ -94,6 +94,25 @@ class HandleInertiaRequests extends Middleware
             'labels' => fn () => $user ? $user->labels()
                 ->orderBy('name')
                 ->get(['id', 'name', 'color']) : [],
+            'locale' => app()->getLocale(),
+            'translations' => $this->getTranslations(),
         ];
     }
+
+    /**
+     * Get all translations for the current locale as a flat key-value array.
+     *
+     * @return array<string, string>
+     */
+    protected function getTranslations(): array
+    {
+        $locale = app()->getLocale();
+        $translationFile = lang_path("{$locale}.json");
+
+        if (! file_exists($translationFile)) {
+            return [];
+        }
+
+        return json_decode(file_get_contents($translationFile), true) ?? [];
+    }
 }
diff --git a/app/Http/Middleware/SetLocale.php b/app/Http/Middleware/SetLocale.php
new file mode 100644
index 00000000..0c8de860
--- /dev/null
+++ b/app/Http/Middleware/SetLocale.php
@@ -0,0 +1,86 @@
+<?php
+
+namespace App\Http\Middleware;
+
+use Closure;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\App;
+use Symfony\Component\HttpFoundation\Response;
+
+class SetLocale
+{
+    /**
+     * Handle an incoming request.
+     *
+     * @param  \Closure(\Illuminate\Http\Request): (\Symfony\Component\HttpFoundation\Response)  $next
+     */
+    public function handle(Request $request, Closure $next): Response
+    {
+        $locale = $this->determineLocale($request);
+
+        App::setLocale($locale);
+
+        return $next($request);
+    }
+
+    /**
+     * Determine the locale for the current request.
+     */
+    protected function determineLocale(Request $request): string
+    {
+        // Priority 1: Check for lang query parameter (user override on welcome page)
+        if ($request->has('lang') && in_array($request->get('lang'), ['en', 'es'])) {
+            $locale = $request->get('lang');
+            // Store in session so subsequent requests remember this choice
+            $request->session()->put('locale', $locale);
+
+            return $locale;
+        }
+
+        // Priority 2: Check authenticated user's locale preference
+        if ($request->user() && $request->user()->locale) {
+            return $request->user()->locale;
+        }
+
+        // Priority 2b: Authenticated user without locale — detect and persist
+        if ($request->user()) {
+            $detected = $this->detectLocaleFromHeader($request);
+
+            if (in_array($request->session()->get('locale'), ['en', 'es'])) {
+                $detected = $request->session()->get('locale');
+            }
+
+            $request->user()->update(['locale' => $detected]);
+
+            return $detected;
+        }
+
+        // Priority 3: Check session for previously detected locale
+        if ($request->session()->has('locale')) {
+            return $request->session()->get('locale');
+        }
+
+        // Priority 4: Detect from Accept-Language header
+        $detected = $this->detectLocaleFromHeader($request);
+
+        // Store in session for subsequent requests
+        $request->session()->put('locale', $detected);
+
+        return $detected;
+    }
+
+    /**
+     * Detect locale from Accept-Language header.
+     */
+    protected function detectLocaleFromHeader(Request $request): string
+    {
+        $acceptLanguage = $request->header('Accept-Language', '');
+
+        // Check if Spanish is preferred
+        if (preg_match('/^es(-|,|;)/i', $acceptLanguage) || $acceptLanguage === 'es') {
+            return 'es';
+        }
+
+        return 'en';
+    }
+}
diff --git a/app/Http/Requests/Settings/ProfileUpdateRequest.php b/app/Http/Requests/Settings/ProfileUpdateRequest.php
index 880e0aa7..8c977ab0 100644
--- a/app/Http/Requests/Settings/ProfileUpdateRequest.php
+++ b/app/Http/Requests/Settings/ProfileUpdateRequest.php
@@ -28,6 +28,7 @@ class ProfileUpdateRequest extends FormRequest
                 Rule::unique(User::class)->ignore($this->user()->id),
             ],
             'currency_code' => ['required', 'string', 'max:3', Rule::in(['USD', 'EUR', 'GBP', 'JPY', 'CHF', 'CAD', 'AUD', 'CNY', 'INR', 'MXN'])],
+            'locale' => ['nullable', 'string', Rule::in(['en', 'es'])],
         ];
     }
 }
diff --git a/app/Mail/Drip/FeedbackEmail.php b/app/Mail/Drip/FeedbackEmail.php
index 255a0274..aaad53e0 100644
--- a/app/Mail/Drip/FeedbackEmail.php
+++ b/app/Mail/Drip/FeedbackEmail.php
@@ -37,7 +37,7 @@ class FeedbackEmail extends Mailable implements ShouldQueue
     public function envelope(): Envelope
     {
         return new Envelope(
-            subject: "How's Your Experience So Far?",
+            subject: __("How's Your Experience So Far?"),
         )->from(config('mail.from.address', 'hello@example.com'), 'Victor');
     }
 
diff --git a/app/Mail/Drip/ImportHelpEmail.php b/app/Mail/Drip/ImportHelpEmail.php
index 5e955090..34c4e250 100644
--- a/app/Mail/Drip/ImportHelpEmail.php
+++ b/app/Mail/Drip/ImportHelpEmail.php
@@ -37,7 +37,7 @@ class ImportHelpEmail extends Mailable implements ShouldQueue
     public function envelope(): Envelope
     {
         return new Envelope(
-            subject: "Let's Import Your Transactions",
+            subject: __("Let's Import Your Transactions"),
         )->from(config('mail.from.address', 'hello@example.com'), 'Victor');
     }
 
diff --git a/app/Mail/Drip/OnboardingReminderEmail.php b/app/Mail/Drip/OnboardingReminderEmail.php
index d2256898..d2beea99 100644
--- a/app/Mail/Drip/OnboardingReminderEmail.php
+++ b/app/Mail/Drip/OnboardingReminderEmail.php
@@ -37,7 +37,7 @@ class OnboardingReminderEmail extends Mailable implements ShouldQueue
     public function envelope(): Envelope
     {
         return new Envelope(
-            subject: 'Need Help Getting Started?',
+            subject: __('Need Help Getting Started?'),
         )->from(config('mail.from.address', 'hello@example.com'), 'Victor');
     }
 
diff --git a/app/Mail/Drip/PromoCodeEmail.php b/app/Mail/Drip/PromoCodeEmail.php
index b388b3c4..14cbb635 100644
--- a/app/Mail/Drip/PromoCodeEmail.php
+++ b/app/Mail/Drip/PromoCodeEmail.php
@@ -37,7 +37,7 @@ class PromoCodeEmail extends Mailable implements ShouldQueue
     public function envelope(): Envelope
     {
         return (new Envelope(
-            subject: 'Your Founder Discount - 80% Off First Period'
+            subject: __('Your Founder Discount - 80% Off First Period')
         ))->from(config('mail.from.address', 'hello@example.com'), 'Victor');
     }
 
diff --git a/app/Mail/Drip/SubscriptionCancelledEmail.php b/app/Mail/Drip/SubscriptionCancelledEmail.php
index f9c7426a..8dd96b92 100644
--- a/app/Mail/Drip/SubscriptionCancelledEmail.php
+++ b/app/Mail/Drip/SubscriptionCancelledEmail.php
@@ -37,7 +37,7 @@ class SubscriptionCancelledEmail extends Mailable implements ShouldQueue
     public function envelope(): Envelope
     {
         return new Envelope(
-            subject: "We're sorry to see you go",
+            subject: __("We're sorry to see you go"),
         )->from(config('mail.from.address', 'hello@example.com'), 'Victor');
     }
 
diff --git a/app/Mail/Drip/WelcomeEmail.php b/app/Mail/Drip/WelcomeEmail.php
index d994e0b5..3de9f5f4 100644
--- a/app/Mail/Drip/WelcomeEmail.php
+++ b/app/Mail/Drip/WelcomeEmail.php
@@ -37,7 +37,7 @@ class WelcomeEmail extends Mailable implements ShouldQueue
     public function envelope(): Envelope
     {
         return new Envelope(
-            subject: 'Welcome to Whisper Money - Your Privacy-First Finance App',
+            subject: __('Welcome to Whisper Money - Your Privacy-First Finance App'),
         )->from(config('mail.from.address', 'hello@example.com'), 'Victor');
     }
 
diff --git a/app/Models/User.php b/app/Models/User.php
index 3e4586a1..2f2ed416 100644
--- a/app/Models/User.php
+++ b/app/Models/User.php
@@ -5,6 +5,7 @@ namespace App\Models;
 use App\Enums\DripEmailType;
 use App\Notifications\VerifyEmailNotification;
 use Illuminate\Contracts\Auth\MustVerifyEmail;
+use Illuminate\Contracts\Translation\HasLocalePreference;
 use Illuminate\Database\Eloquent\Builder;
 use Illuminate\Database\Eloquent\Concerns\HasUuids;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
@@ -16,7 +17,7 @@ use Laravel\Cashier\Billable;
 use Laravel\Fortify\TwoFactorAuthenticatable;
 use Laravel\Pennant\Concerns\HasFeatures;
 
-class User extends Authenticatable implements MustVerifyEmail
+class User extends Authenticatable implements HasLocalePreference, MustVerifyEmail
 {
     /** @use HasFactory<\Database\Factories\UserFactory> */
     use Billable, HasFactory, HasFeatures, HasUuids, Notifiable, TwoFactorAuthenticatable;
@@ -33,6 +34,7 @@ class User extends Authenticatable implements MustVerifyEmail
         'encryption_salt',
         'onboarded_at',
         'currency_code',
+        'locale',
     ];
 
     /**
@@ -135,6 +137,11 @@ class User extends Authenticatable implements MustVerifyEmail
         return $this->email === config('app.demo.email');
     }
 
+    public function preferredLocale(): string
+    {
+        return $this->locale ?? 'en';
+    }
+
     public function sendEmailVerificationNotification(): void
     {
         $this->notify(new VerifyEmailNotification);
diff --git a/app/Notifications/VerifyEmailNotification.php b/app/Notifications/VerifyEmailNotification.php
index 87aa0d50..a0aef5e7 100644
--- a/app/Notifications/VerifyEmailNotification.php
+++ b/app/Notifications/VerifyEmailNotification.php
@@ -13,7 +13,7 @@ class VerifyEmailNotification extends VerifyEmail
 
         return (new MailMessage)
             ->from(config('mail.from.address', 'hello@example.com'), 'Victor')
-            ->subject('Verify Your Email - Whisper Money')
+            ->subject(__('Verify Your Email - Whisper Money'))
             ->markdown('mail.verify-email', [
                 'userName' => $notifiable->name,
                 'verificationUrl' => $verificationUrl,
diff --git a/bootstrap/app.php b/bootstrap/app.php
index be35e9f2..f55756cb 100644
--- a/bootstrap/app.php
+++ b/bootstrap/app.php
@@ -4,6 +4,7 @@ use App\Http\Middleware\EnsureBudgetsFeature;
 use App\Http\Middleware\EnsureUserIsSubscribed;
 use App\Http\Middleware\HandleAppearance;
 use App\Http\Middleware\HandleInertiaRequests;
+use App\Http\Middleware\SetLocale;
 use Illuminate\Foundation\Application;
 use Illuminate\Foundation\Configuration\Exceptions;
 use Illuminate\Foundation\Configuration\Middleware;
@@ -30,6 +31,7 @@ return Application::configure(basePath: dirname(__DIR__))
 
         $middleware->web(append: [
             HandleAppearance::class,
+            SetLocale::class,
             HandleInertiaRequests::class,
             AddLinkHeadersForPreloadedAssets::class,
             \App\Http\Middleware\BlockDemoAccountActions::class.':auto',
diff --git a/database/factories/UserFactory.php b/database/factories/UserFactory.php
index b48fe78d..89130e5e 100644
--- a/database/factories/UserFactory.php
+++ b/database/factories/UserFactory.php
@@ -65,6 +65,7 @@ class UserFactory extends Factory
         return $this->state(fn (array $attributes) => [
             'onboarded_at' => now(),
             'encryption_salt' => 'test-salt',
+            'locale' => 'en',
         ]);
     }
 
diff --git a/database/migrations/2026_01_22_143232_add_locale_to_users_table.php b/database/migrations/2026_01_22_143232_add_locale_to_users_table.php
new file mode 100644
index 00000000..2dd35c61
--- /dev/null
+++ b/database/migrations/2026_01_22_143232_add_locale_to_users_table.php
@@ -0,0 +1,28 @@
+<?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('users', function (Blueprint $table) {
+            $table->string('locale', 2)->nullable()->after('currency_code');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('users', function (Blueprint $table) {
+            $table->dropColumn('locale');
+        });
+    }
+};
diff --git a/lang/en/auth.php b/lang/en/auth.php
new file mode 100644
index 00000000..6598e2c0
--- /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/pagination.php b/lang/en/pagination.php
new file mode 100644
index 00000000..d4814118
--- /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 00000000..fad3a7d7
--- /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 00000000..63ec29a1
--- /dev/null
+++ b/lang/en/validation.php
@@ -0,0 +1,200 @@
+<?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' => [
+        'attribute-name' => [
+            'rule-name' => 'custom-message',
+        ],
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | 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' => [],
+
+];
diff --git a/lang/es.json b/lang/es.json
new file mode 100644
index 00000000..a4c32d3c
--- /dev/null
+++ b/lang/es.json
@@ -0,0 +1,1053 @@
+{
+  "\"? This action cannot be undone.": "\"? Esta acción no se puede deshacer.",
+  "\"? This action cannot be undone. All budget periods, allocations, and transaction assignments will be permanently removed.": "\"? Esta acción no se puede deshacer. Todos los períodos de presupuesto, asignaciones y asignaciones de transacciones serán eliminados permanentemente.",
+  "$KO!F6LMHU1W%TAEQFZMD9": "$KO!F6LMHU1W%TAEQFZMD9",
+  "+ Add another column": "+ Agregar otra columna",
+  "amber": "ámbar",
+  "+ note": "+ nota",
+  ", and press": ", y presiona",
+  "...and 40+ more": "...y más de 40",
+  "/12 min": "/12 min",
+  "1. Data Controller": "1. Controlador de Datos",
+  "10. Children's Privacy": "10. Privacidad de los Niños",
+  "10. Limitation of Liability": "10. Limitación de Responsabilidad",
+  "11. Changes to This Privacy Policy": "11. Cambios a Esta Política de Privacidad",
+  "11. Indemnification": "11. Indemnización",
+  "12. Contact Us": "12. Contáctanos",
+  "12. Governing Law and Dispute Resolution": "12. Ley Aplicable y Resolución de Disputas",
+  "13. Changes to Terms": "13. Cambios a los Términos",
+  "14. Severability": "14. Divisibilidad",
+  "15. Entire Agreement": "15. Acuerdo Completo",
+  "16. Contact Us": "16. Contáctanos",
+  "2. Acceptance of Terms": "2. Aceptación de Términos",
+  "2. Information We Collect": "2. Información que Recopilamos",
+  "2FA Recovery Codes": "Códigos de Recuperación 2FA",
+  "3. How We Use Your Information": "3. Cómo Usamos Tu Información",
+  "3. Service Description": "3. Descripción del Servicio",
+  "4. Data Security and Encryption": "4. Seguridad de Datos y Encriptación",
+  "4. User Accounts and Responsibilities": "4. Cuentas de Usuario y Responsabilidades",
+  "5. Data Ownership and License": "5. Propiedad de Datos y Licencia",
+  "5. Third-Party Services": "5. Servicios de Terceros",
+  "6. Data Retention": "6. Retención de Datos",
+  "6. Intellectual Property Rights": "6. Derechos de Propiedad Intelectual",
+  "7. International Data Transfers": "7. Transferencias Internacionales de Datos",
+  "7. Payment Terms": "7. Términos de Pago",
+  "8. Termination": "8. Cancelación",
+  "8. Your Rights Under GDPR": "8. Tus Derechos Bajo GDPR",
+  "9. Cookies and Tracking": "9. Cookies y Rastreo",
+  "9. Disclaimers and Warranties": "9. Descargos de Responsabilidad y Garantías",
+  "@alext_money": "@alext_money",
+  "@davidk_dev": "@davidk_dev",
+  "@emmalou": "@emmalou",
+  "@jessicap": "@jessicap",
+  "@mike_tech": "@mike_tech",
+  "@sarahm_finance": "@sarahm_finance",
+  "A new verification link has been sent to the email address you provided during registration.": "Se ha enviado un nuevo enlace de verificación a la dirección de correo electrónico que proporcionaste durante el registro.",
+  "A new verification link has been sent to your email address.": "Se ha enviado un nuevo enlace de verificación a tu dirección de correo electrónico.",
+  "A unique encryption key is generated on your device. Only you have access to it—we never see or store it.": "Se genera una clave de encriptación única en tu dispositivo. Solo tú tienes acceso a ella, nosotros nunca la vemos ni la almacenamos.",
+  "AI can't help you with your transactions because they're end-to-end encrypted. This is intentional—we believe your financial data should never be fed into AI systems that you don't control.": "La IA no puede ayudarte con tus transacciones porque están encriptadas de extremo a extremo. Esto es intencional: creemos que tus datos financieros nunca deben ser alimentados a sistemas de IA que no controlas.",
+  "AI requires sending your data to external servers": "La IA requiere enviar tus datos a servidores externos",
+  "Accept responsibility for all activities that occur under your account": "Acepta la responsabilidad de todas las actividades que ocurran en tu cuenta",
+  "Access Controls:": "Controles de Acceso:",
+  "Access your data securely from any device with automatic syncing.": "Accede a tus datos de forma segura desde cualquier dispositivo con sincronización automática.",
+  "Access your data with end-to-end encryption to ensure privacy and security": "Accede a tus datos con encriptación de extremo a extremo para garantizar privacidad y seguridad",
+  "Access your finances on any device, anytime, anywhere.": "Accede a tus finanzas desde cualquier dispositivo, en cualquier momento y lugar.",
+  "Account": "Cuenta",
+  "Account Details": "Detalles de Cuenta",
+  "Account Information:": "Información de Cuenta:",
+  "Account Type": "Tipo de Cuenta",
+  "Account Types": "Tipos de Cuenta",
+  "Account is required": "Se requiere una cuenta",
+  "Account name": "Nombre de cuenta",
+  "Accounts": "Cuentas",
+  "Accounts Created": "Cuentas Creadas",
+  "Actions": "Acciones",
+  "Add Another Account": "Agregar Otra Cuenta",
+  "Add Condition": "Agregar Condición",
+  "Add Group": "Agregar Grupo",
+  "Add Labels": "Agregar Etiquetas",
+  "Add More Accounts": "Agregar Más Cuentas",
+  "Add More Accounts?": "¿Agregar Más Cuentas?",
+  "Add another account to track more of your finances.": "Agrega otra cuenta para rastrear más de tus finanzas.",
+  "All Set!": "¡Todo Listo!",
+  "Add Transaction": "Agregar Transacción",
+  "Add a new bank account to track your transactions.": "Agrega una nueva cuenta bancaria para rastrear tus transacciones.",
+  "Add a new category to organize your transactions.": "Agrega una nueva categoría para organizar tus transacciones.",
+  "Add a new label to tag your transactions.": "Agrega una nueva etiqueta para etiquetar tus transacciones.",
+  "Add labels": "Agregar etiquetas",
+  "Add labels...": "Agregar etiquetas...",
+  "Add note": "Agregar nota",
+  "Add notes...": "Agregar notas...",
+  "Add the app to your home screen for the best experience.": "Añade la app a tu pantalla de inicio para la mejor experiencia.",
+  "Add transaction": "Agregar transacción",
+  "Address:": "Dirección:",
+  "Alex T.": "Alex T.",
+  "All": "Todo",
+  "All Done!": "¡Todo Listo!",
+  "All data is stored on secure servers with encryption at rest": "Todos los datos se almacenan en servidores seguros con encriptación en reposo",
+  "All fees are non-refundable except as required by law or explicitly stated otherwise": "Todas las tarifas no son reembolsables excepto según lo requiera la ley o se indique explícitamente de otra manera",
+  "All transactions appear to be duplicates. No new transactions will be imported.": "Todas las transacciones parecen ser duplicadas. No se importarán transacciones nuevas.",
+  "All your transactions are already categorized.": "Todas tus transacciones ya están categorizadas.",
+  "Allocated Amount": "Cantidad Asignado",
+  "Allocated:": "Asignado:",
+  "Already have an account?": "¿Ya tienes una cuenta?",
+  "Amount": "Valor",
+  "Amount is required": "Se requiere un valor",
+  "Any bugs, viruses, or similar harmful components transmitted through the service": "Cualquier error, virus o componente dañino similar transmitido a través del servicio",
+  "Any errors or omissions in content or any loss or damage incurred from using content": "Cualquier error u omisión en el contenido o cualquier pérdida o daño incurrido por usar el contenido",
+  "Any interruption or cessation of transmission to or from the service": "Cualquier interrupción o cese de transmisión hacia o desde el servicio",
+  "Any unauthorized access to or use of our servers and/or personal information": "Cualquier acceso no autorizado o uso de nuestros servidores y/o información personal",
+  "Appearance": "Apariencia",
+  "Appearance settings": "Configuración de apariencia",
+  "Are you overspending? Know exactly where you stand.": "¿Estás gastando de más? Conoce exactamente dónde estás parado.",
+  "Are you sure you want to delete \"": "¿Estás seguro de que deseas eliminar \"",
+  "Are you sure you want to delete this balance record? This action cannot be undone.": "¿Estás seguro de que deseas eliminar este registro de balance? Esta acción no se puede deshacer.",
+  "Are you sure you want to delete your account?": "¿Estás seguro de que deseas eliminar tu cuenta?",
+  "As a developer, I appreciate the security architecture. This is how finance apps should be built.": "Como desarrollador, aprecio la arquitectura de seguridad. Así es como deberían construirse las apps de finanzas.",
+  "As a user in the European Union, you have the following rights regarding your personal data:": "Como usuario en la Unión Europea, tienes los siguientes derechos con respecto a tus datos personales:",
+  "Assign a new category": "Asignar una nueva categoría",
+  "At least one action is required": "Se requiere al menos una acción",
+  "Auto-detect": "Detectar automáticamente",
+  "Automatically categorize transactions with customizable rules and patterns.": "Categoriza automáticamente las transacciones con reglas y patrones personalizables.",
+  "Automation Rules": "Reglas de Automatización",
+  "Annual": "Anual",
+  "Automation rules": "Reglas de automatización",
+  "Automation rules settings": "Configuración de reglas de automatización",
+  "Available:": "Disponible:",
+  "Back": "Atrás",
+  "Back to Transactions": "Volver a Transacciones",
+  "Balance": "Balance",
+  "Balance (Optional)": "Balance (Opcional)",
+  "Balance Date": "Fecha del Balance",
+  "Balance History": "Historial de Balance",
+  "Balance Tracking": "Seguimiento de Balance",
+  "Balance evolution": "Evolución del balance",
+  "Bi-weekly": "Quincenal",
+  "Bank": "Banco",
+  "Bank accounts": "Cuentas bancarias",
+  "Bank logo preview": "Vista previa del logo del banco",
+  "Bank name": "Nombre del banco",
+  "Beautiful charts and graphs help you understand your spending patterns.": "Gráficos hermosos te ayudan a entender tus patrones de gasto.",
+  "Best Value": "Mejor Valor",
+  "Billed annually at": "Facturado anualmente a",
+  "Billed annually at $": "Facturado anualmente a $",
+  "Billing management is not available on the demo account.": "La gestión de facturación no está disponible en la cuenta demo.",
+  "blue": "azul",
+  "Browse Files": "Explorar Archivos",
+  "Budget Name": "Nombre del Presupuesto",
+  "Budget Spending": "Gasto del Presupuesto",
+  "Budget Tracking": "Seguimiento de Presupuesto",
+  "Budgets": "Presupuestos",
+  "Built for speed with instant sync and smooth interactions.": "Construido para velocidad con sincronización instantánea e interacciones fluidas.",
+  "By creating an account or using Whisper Money, you agree to be bound by these Terms of Service and our Privacy Policy. If you do not agree to these terms, you may not use our service. These terms constitute a legally binding agreement between you and Whisper Money.": "Al crear una cuenta o usar Whisper Money, aceptas estar sujeto a estos Términos de Servicio y nuestra Política de Privacidad. Si no aceptas estos términos, no puedes usar nuestro servicio. Estos términos constituyen un acuerdo legalmente vinculante entre tú y Whisper Money.",
+  "CSV, XLS, XLSX files": "Archivos CSV, XLS, XLSX",
+  "Cancel": "Cancelar",
+  "Cashflow": "Flujo de Efectivo",
+  "Cashflow Trend": "Tendencia del Flujo de Efectivo",
+  "Categories": "Categorías",
+  "Categories below 5% of total": "Categorías por debajo del 5% del total",
+  "Categories settings": "Configuración de categorías",
+  "Categorize": "Categorizar",
+  "Categorize Transactions": "Categorizar Transacciones",
+  "Category": "Categoría",
+  "Category (Optional)": "Categoría (Opcional)",
+  "Category name": "Nombre de categoría",
+  "Change": "Cambiar",
+  "Change category": "Cambiar categoría",
+  "Check Demo": "Ver Demo",
+  "Checking": "Cuenta Corriente",
+  "Choose the plan that works for you": "Elige el plan que funcione para ti",
+  "Clean interface, powerful features, and zero compromise on privacy. What more could you want?": "Interfaz limpia, funciones potentes y cero compromisos con la privacidad. ¿Qué más podrías querer?",
+  "Clear": "Limpiar",
+  "Clear Encryption Key?": "¿Borrar Clave de Encriptación?",
+  "Clear Key": "Borrar Clave",
+  "Clear selection": "Limpiar selección",
+  "Click here to resend the verification email.": "Haz clic aquí para reenviar el correo de verificación.",
+  "Click to lock encryption key": "Haz clic para bloquear la clave de encriptación",
+  "Click to unlock encryption key": "Haz clic para desbloquear la clave de encriptación",
+  "Client-Side Encryption": "Encriptación del Lado del Cliente",
+  "Close": "Cerrar",
+  "Color": "Color",
+  "Columns": "Columnas",
+  "Community": "Comunidad",
+  "Company Name:": "Nombre de la Empresa:",
+  "Conditions": "Condiciones",
+  "Conditions joined by:": "Condiciones unidas por:",
+  "Confirm": "Confirmar",
+  "Confirm Password": "Confirmar Contraseña",
+  "Confirm password": "Confirmar contraseña",
+  "Confirm your encryption password": "Confirma tu contraseña de encriptación",
+  "Confirm your password": "Confirma tu contraseña",
+  "Confirmation": "Confirmación",
+  "Consider saving more if possible.": "Considera ahorrar más si es posible.",
+  "Continue": "Continuar",
+  "Continue Setup": "Continuar Configuración",
+  "Continue to Import": "Continuar con Importación",
+  "Create \"": "Crear \"",
+  "Create Account": "Crear Cuenta",
+  "Create Automation Rule": "Crear Regla de Automatización",
+  "Create Budget": "Crear Presupuesto",
+  "Create Category": "Crear Categoría",
+  "Create Label": "Crear Etiqueta",
+  "Create Rule": "Crear Regla",
+  "Create Transaction": "Crear Transacción",
+  "Create Your Encryption Password": "Crea Tu Contraseña de Encriptación",
+  "Create Your First Account": "Crea Tu Primera Cuenta",
+  "Create an Account": "Crear una Cuenta",
+  "Creating...": "Creando...",
+  "Create a Password": "Crear una Contraseña",
+  "Create a new transaction": "Crea una nueva transacción",
+  "Create a new transaction.": "Crea una nueva transacción.",
+  "Create a rule to automatically categorize transactions and add labels.": "Crea una regla para categorizar automáticamente transacciones y agregar etiquetas.",
+  "Create a strong encryption password to secure your data": "Crea una contraseña de encriptación fuerte para proteger tus datos",
+  "Create account": "Crear cuenta",
+  "Create an account": "Crear una cuenta",
+  "Create budgets that adapt to your spending habits and goals.": "Crea presupuestos que se adaptan a tus hábitos de gasto y metas.",
+  "Create rules like \"If description contains 'AMAZON', categorize as Shopping\"": "Crea reglas como \"Si la descripción contiene 'AMAZON', categorizar como Compras\"",
+  "Create rules to automatically categorize your transactions based on patterns you define.": "Crea reglas para categorizar automáticamente tus transacciones basándote en patrones que definas.",
+  "Create, edit, and delete rules anytime": "Crea, edita y elimina reglas en cualquier momento",
+  "Credit Card": "Tarjeta de Crédito",
+  "Ctrl+B": "Ctrl+B",
+  "Ctrl+N": "Ctrl+N",
+  "Ctrl+R": "Ctrl+R",
+  "cyan": "cian",
+  "Currency": "Moneda",
+  "Current Balance": "Balance Actual",
+  "Current password": "Contraseña actual",
+  "Custom": "Personalizado",
+  "Custom Labels": "Etiquetas Personalizadas",
+  "Customize Categories": "Personalizar Categorías",
+  "Customize Your Categories": "Personaliza Tus Categorías",
+  "DD-MM-YYYY (e.g., 31-12-2024)": "DD-MM-YYYY (ej., 31-12-2024)",
+  "Dark": "Oscuro",
+  "Dashboard": "Panel",
+  "Data Accuracy:": "Precisión de Datos:",
+  "Daily spending and transactions": "Gastos diarios y transacciones",
+  "Data Imported": "Datos Importados",
+  "Data is Encrypted": "Los Datos Están Encriptados",
+  "Date": "Fecha",
+  "Date Format": "Formato de Fecha",
+  "Date is required": "Se requiere una fecha",
+  "David K.": "David K.",
+  "Delete": "Eliminar",
+  "Delete Account": "Eliminar Cuenta",
+  "Delete Automation Rule": "Eliminar Regla de Automatización",
+  "Delete Budget": "Eliminar Presupuesto",
+  "Delete Category": "Eliminar Categoría",
+  "Delete Label": "Eliminar Etiqueta",
+  "Delete Transaction": "Eliminar Transacción",
+  "Delete account": "Eliminar cuenta",
+  "Delete balance": "Eliminar balance",
+  "Delete your account and all of its resources": "Elimina tu cuenta y todos sus recursos",
+  "Deleting...": "Eliminando...",
+  "Demo encryption password:": "Contraseña de encriptación de demo:",
+  "Description": "Descripción",
+  "Description is required": "Se requiere una descripción",
+  "Details": "Detalles",
+  "Details →": "Detalles →",
+  "Disable 2FA": "Desactivar 2FA",
+  "Disable privacy mode": "Desactivar modo privado",
+  "Disabled": "Desactivado",
+  "Discord for 80% off": "Discord con 80% de descuento",
+  "Don't have an account?": "¿No tienes una cuenta?",
+  "Download as CSV or Excel format": "Descargar en formato CSV o Excel",
+  "Drop your file here, or click to browse": "Arrastra tu archivo aquí, o haz clic para explorar",
+  "Duplicate": "Duplicado",
+  "Duplicates": "Duplicados",
+  "E2E Encryption": "Encriptación E2E",
+  "Free & Private": "Gratis y privado",
+  "Each recovery code can be used once to access your account and will be removed after use. If you need more, click": "Cada código de recuperación se puede usar una vez para acceder a tu cuenta y será eliminado después de usarse. Si necesitas más, haz clic",
+  "Edit": "Editar",
+  "Edit Account": "Editar Cuenta",
+  "Edit Automation Rule": "Editar Regla de Automatización",
+  "Edit Balance": "Editar Balance",
+  "Edit Budget": "Editar Presupuesto",
+  "Edit Category": "Editar Categoría",
+  "Edit Label": "Editar Etiqueta",
+  "Edit Transaction": "Editar transacción",
+  "Edit account": "Editar cuenta",
+  "Edit budget": "Editar presupuesto",
+  "Email": "Correo Electrónico",
+  "Email address": "Dirección de correo electrónico",
+  "Email address, name, and password (encrypted)": "Dirección de correo electrónico, nombre y contraseña (encriptados)",
+  "Email password reset link": "Enviar enlace para restablecer contraseña",
+  "Email verification": "Verificación de correo electrónico",
+  "Email:": "Correo:",
+  "Emma L.": "Emma L.",
+  "Enable 2FA": "Activar 2FA",
+  "Enable privacy mode": "Activar modo privado",
+  "Enabled": "Activado",
+  "Encrypted on your device": "Encriptado en tu dispositivo",
+  "Encryption Password": "Contraseña de Encriptación",
+  "Encryption Set": "Encriptación Configurada",
+  "Encryption key not available. Please go back and set up encryption.": "Clave de encriptación no disponible. Por favor, vuelve atrás y configura la encriptación.",
+  "End-to-End Encryption": "Encriptación de Extremo a Extremo",
+  "Entertainment (Movies, Sports, Hobbies)": "Entretenimiento (Películas, Deportes, Hobbies)",
+  "Encryption key not available": "Clave de encriptación no disponible",
+  "End-to-End Encryption:": "Encriptación de Extremo a Extremo:",
+  "End-to-end encryption": "Encriptación de extremo a extremo",
+  "English": "Inglés",
+  "Ensure your account is using a long, random password to stay secure": "Asegúrate de que tu cuenta esté usando una contraseña larga y aleatoria para mantenerse segura",
+  "Ensure your account is using a long, random password to stay secure.": "Asegúrate de que tu cuenta esté usando una contraseña larga y aleatoria para mantenerte seguro.",
+  "Enter a strong encryption password": "Ingresa una contraseña de encriptación fuerte",
+  "Enter a strong password": "Ingresa una contraseña fuerte",
+  "Enter recovery code": "Ingresar código de recuperación",
+  "Enter your details below to create your account": "Ingresa tus datos a continuación para crear tu cuenta",
+  "Enter your email and password below to log in": "Ingresa tu correo electrónico y contraseña a continuación para iniciar sesión",
+  "Enter your email to receive a password reset link": "Ingresa tu correo electrónico para recibir un enlace para restablecer contraseña",
+  "Enter your encryption password": "Ingresa tu contraseña de encriptación",
+  "Enter your encryption password to decrypt transactions information and accounts name.": "Ingresa tu contraseña de encriptación para descifrar la información de transacciones y nombres de cuentas.",
+  "Error": "Error",
+  "Errors (": "Errores (",
+  "Español": "Español",
+  "Even we can't access your data. It's truly private.": "Ni siquiera nosotros podemos acceder a tus datos. Es verdaderamente privado.",
+  "Every transaction belongs to one of three types:": "Cada transacción pertenece a uno de tres tipos:",
+  "Everything you need to manage your finances securely.": "Todo lo que necesitas para gestionar tus finanzas de forma segura.",
+  "Everything you need. Nothing you don't.": "Todo lo que necesitas. Nada que no.",
+  "emerald": "esmeralda",
+  "Expense": "Gasto",
+  "Expense Categories": "Categorías de Gastos",
+  "Expense tracking": "Seguimiento de gastos",
+  "Expenses": "Gastos",
+  "Export": "Exportar",
+  "Export Data": "Exportar Datos",
+  "Export from any bank": "Exporta desde cualquier banco",
+  "Failed to create transaction": "Error al crear la transacción",
+  "Failed to decrypt message. Please check your password and try again.": "Error al descifrar el mensaje. Por favor verifica tu contraseña e inténtalo de nuevo.",
+  "Failed to update transaction": "Error al actualizar la transacción",
+  "Feedback": "Comentarios",
+  "Filter": "Filtrar",
+  "Filter accounts...": "Filtrar cuentas...",
+  "Filter categories...": "Filtrar categorías...",
+  "Filter labels...": "Filtrar etiquetas...",
+  "Filter rules...": "Filtrar reglas...",
+  "Filter rules....": "Filtrar reglas....",
+  "Filters": "Filtros",
+  "Finally, a finance app that respects my privacy. The encryption gives me peace of mind.": "Finalmente, una app de finanzas que respeta mi privacidad. La encriptación me da tranquilidad.",
+  "Financial Advice Disclaimer:": "Descargo de Responsabilidad sobre Asesoramiento Financiero:",
+  "Financial Data:": "Datos Financieros:",
+  "Financial decisions made based on data in the application": "Decisiones financieras tomadas basándose en datos de la aplicación",
+  "Finding historical transactions": "Buscando transacciones históricas",
+  "Finish Setup": "Finalizar Configuración",
+  "Forgot password": "Olvidé mi contraseña",
+  "Forgot password?": "¿Olvidaste tu contraseña?",
+  "From": "Desde",
+  "fuchsia": "fucsia",
+  "Full name": "Nombre completo",
+  "Fully transparent and open source. Review the code yourself.": "Totalmente transparente y de código abierto. Revisa el código tú mismo.",
+  "Get Started": "Comenzar",
+  "Get started quickly with your existing financial data.": "Comienza rápidamente con tus datos financieros existentes.",
+  "Github": "Github",
+  "Go to Dashboard": "Ir al Panel",
+  "Go to your account's transaction history": "Ve al historial de transacciones de tu cuenta",
+  "Good progress on your savings.": "Buen progreso en tus ahorros.",
+  "gray": "gris",
+  "green": "verde",
+  "Great Progress!": "¡Gran Progreso!",
+  "Great job! You're saving well.": "¡Excelente trabajo! Estás ahorrando bien.",
+  "Got it": "Entendido",
+  "Groups joined by:": "Grupos unidos por:",
+  "How End-to-End Encryption Works": "Cómo Funciona la Encriptación de Extremo a Extremo",
+  "How much do you want to budget per period?": "¿Cuánto deseas presupuestar por período?",
+  "How to Export from Your Bank:": "Cómo Exportar desde Tu Banco:",
+  "I Understand, Continue": "Entiendo, Continuar",
+  "I switched from Mint and haven't looked back. The privacy features are unmatched.": "Cambié desde Mint y no he mirado atrás. Las características de privacidad no tienen comparación.",
+  "IP address, browser type, device information, and operating system": "Dirección IP, tipo de navegador, información del dispositivo y sistema operativo",
+  "Icon": "Ícono",
+  "If you have any questions, concerns, or feedback about these Terms of Service, please contact us:": "Si tienes alguna pregunta, inquietud o comentario sobre estos Términos de Servicio, por favor contáctanos:",
+  "If you have any questions, concerns, or requests regarding this Privacy Policy or our data practices, please contact us:": "Si tienes alguna pregunta, inquietud o solicitud con respecto a esta Política de Privacidad o nuestras prácticas de datos, por favor contáctanos:",
+  "Ignore": "Ignorar",
+  "indigo": "índigo",
+  "Install App": "Instalar App",
+  "Install Whisper Money": "Instalar Whisper Money",
+  "Import": "Importar",
+  "Import Transactions": "Importar Transacciones",
+  "Import Your Transactions": "Importa Tus Transacciones",
+  "Import Your Transactions in Seconds": "Importa Tus Transacciones en Segundos",
+  "Import a year's worth of transactions in under 10 seconds. Simply export a CSV or XLS file from your bank and drag it into Whisper Money. All data is encrypted locally before upload.": "Importa transacciones de un año completo en menos de 10 segundos. Simplemente exporta un archivo CSV o XLS desde tu banco y arrástralo a Whisper Money. Todos los datos se encriptan localmente antes de subirse.",
+  "Import balance history from CSV files": "Importar historial de balances desde archivos CSV",
+  "Import balances": "Importar balances",
+  "Import in seconds": "Importa en segundos",
+  "Import transactions": "Importar transacciones",
+  "Import transactions from CSV/Excel": "Importar transacciones desde CSV/Excel",
+  "Income": "Ingresos",
+  "Income Sources": "Fuentes de Ingresos",
+  "Income minus expenses": "Ingresos menos gastos",
+  "Information about how you use our service, including access times and features used": "Información sobre cómo usas nuestro servicio, incluyendo horarios de acceso y funciones utilizadas",
+  "Instant Application": "Aplicación Instantánea",
+  "Intelligent insights": "Análisis inteligentes",
+  "Investment": "Inversión",
+  "Jessica P.": "Jessica P.",
+  "Join our Discord": "Únete a nuestro Discord",
+  "Join thousands of users who have taken control of their finances without compromising their privacy.": "Únete a miles de usuarios que han tomado el control de sus finanzas sin comprometer su privacidad.",
+  "KB max.": "KB máx.",
+  "Keep me logged in": "Mantenerme conectado",
+  "Keep me logged in (convenient)": "Mantenerme conectado (conveniente)",
+  "Keep me logged in (less secure)": "Mantenerme conectado (menos seguro)",
+  "Key Storage": "Almacenamiento de Clave",
+  "Label (Optional)": "Etiqueta (Opcional)",
+  "Label name": "Nombre de etiqueta",
+  "Labels": "Etiquetas",
+  "Labels settings": "Configuración de etiquetas",
+  "Language": "Idioma",
+  "lime": "lima",
+  "Last updated:": "Última actualización:",
+  "Latest transactions in this account": "Últimas transacciones en esta cuenta",
+  "Let's Get Started": "Comencemos",
+  "Lifetime": "De por vida",
+  "Lifetime License": "Licencia de Por Vida",
+  "Lifetime updates": "Actualizaciones de por vida",
+  "Light": "Claro",
+  "Lightning fast": "Ultrarrápido",
+  "Lightning-Fast CSV/XLS Import": "Importación Ultrarrápida de CSV/XLS",
+  "Load more": "Cargar más",
+  "Loading": "Cargando",
+  "Loading last balance...": "Cargando último balance...",
+  "Loading recovery codes": "Cargando códigos de recuperación",
+  "Loading...": "Cargando...",
+  "Loan": "Préstamo",
+  "Lock encryption key": "Bloquear clave de encriptación",
+  "Log in": "Iniciar sesión",
+  "Log in to your account": "Inicia sesión en tu cuenta",
+  "Log in to your bank's website or app": "Inicia sesión en el sitio web o app de tu banco",
+  "Log out": "Cerrar sesión",
+  "Logo": "Logo",
+  "Look for \"Export\" or \"Download\" option": "Busca la opción \"Exportar\" o \"Descargar\"",
+  "Love that my financial data is encrypted. No more worrying about data breaches!": "Me encanta que mis datos financieros estén encriptados. ¡No más preocupaciones por violaciones de datos!",
+  "Love the simplicity. It's powerful but not overwhelming like other apps.": "Me encanta la simplicidad. Es potente pero no abrumadora como otras apps.",
+  "Lower numbers execute first": "Los números más bajos se ejecutan primero",
+  "MM-DD-YYYY (e.g., 12-31-2024)": "MM-DD-YYYY (ej., 12-31-2024)",
+  "Maintain and promptly update your account information": "Mantén y actualiza prontamente tu información de cuenta",
+  "Manage Plan": "Gestionar Plan",
+  "Manage Subscription": "Gestionar Suscripción",
+  "Manage your bank accounts": "Gestiona tus cuentas bancarias",
+  "Manage your profile and account settings": "Gestiona tu perfil y configuración de cuenta",
+  "Manage your subscription, update payment methods, or view invoices through the Stripe billing portal.": "Gestiona tu suscripción, actualiza métodos de pago o consulta facturas a través del portal de facturación de Stripe.",
+  "Manage your transaction automation rules": "Gestiona tus reglas de automatización de transacciones",
+  "Manage your transaction automation rules. Rules will be applied to categorize transactions automatically.": "Gestiona tus reglas de automatización de transacciones. Las reglas se aplicarán para categorizar transacciones automáticamente.",
+  "Manage your transaction categories": "Gestiona tus categorías de transacciones",
+  "Manage your transaction labels": "Gestiona tus etiquetas de transacciones",
+  "Manage your two-factor authentication settings": "Gestiona tu configuración de autenticación de dos factores",
+  "Manually record and track your financial transactions, budgets, and expenses": "Registra y rastrea manualmente tus transacciones financieras, presupuestos y gastos",
+  "Max": "Máx",
+  "Michael R.": "Michael R.",
+  "Min": "Mín",
+  "Money Flow": "Flujo de Dinero",
+  "Month": "Mes",
+  "Monthly": "Mensual",
+  "Monthly income, expenses, and net cashflow over the last 12 months": "Ingresos, gastos y flujo de efectivo neto mensual durante los últimos 12 meses",
+  "More": "Más",
+  "More actions": "Más acciones",
+  "More options": "Más opciones",
+  "Most Popular": "Más Popular",
+  "Multi-Device Sync": "Sincronización Multi-Dispositivo",
+  "Name": "Nombre",
+  "neutral": "neutro",
+  "Net": "Neto",
+  "Net Cashflow": "Flujo de Efectivo Neto",
+  "Net Worth Evolution": "Evolución del Patrimonio Neto",
+  "New": "Nuevo",
+  "New password": "Nueva contraseña",
+  "Next": "Siguiente",
+  "Next month": "Mes siguiente",
+  "No AI Snooping": "Sin Espionaje por IA",
+  "No AI. No bank connections. Your privacy is our priority.": "Sin IA. Sin conexiones bancarias. Tu privacidad es nuestra prioridad.",
+  "No Bank Access Required": "Sin Acceso Bancario Requerido",
+  "No Uncategorized Transactions": "Sin Transacciones Sin Categorizar",
+  "No account data available": "No hay datos de cuentas disponibles",
+  "No accounts found.": "No se encontraron cuentas.",
+  "No accounts found. Add your first account in Settings.": "No se encontraron cuentas. Agrega tu primera cuenta en Configuración.",
+  "No accounts found. Please create an account first.": "No se encontraron cuentas. Por favor crea una cuenta primero.",
+  "No automation rules found.": "No se encontraron reglas de automatización.",
+  "No active period": "Sin periodo activo",
+  "No balance data available": "No hay datos de balance disponibles",
+  "No balance records found.": "No se encontraron registros de balance.",
+  "No cashflow data for this period": "Sin datos de flujo de efectivo para este período",
+  "No categories found.": "No se encontraron categorías.",
+  "No category found.": "No se encontró categoría.",
+  "No expenses this period": "Sin gastos en este período",
+  "No income this period": "Sin ingresos en este período",
+  "No labels found.": "No se encontraron etiquetas.",
+  "No results found": "No se encontraron resultados",
+  "No spending data this month": "Sin datos de gasto este mes",
+  "No transactions found.": "No se encontraron transacciones.",
+  "No tracking": "Sin seguimiento",
+  "None": "Ninguno",
+  "None (Remove)": "Ninguno (Eliminar)",
+  "Notes": "Notas",
+  "Nothing in these Terms excludes or limits our liability for death or personal injury caused by negligence, fraud, or any liability that cannot be excluded or limited under applicable law.": "Nada en estos Términos excluye o limita nuestra responsabilidad por muerte o lesiones personales causadas por negligencia, fraude, o cualquier responsabilidad que no pueda ser excluida o limitada bajo la ley aplicable.",
+  "Notify us immediately of any unauthorized access or security breach": "Notifícanos inmediatamente de cualquier acceso no autorizado o violación de seguridad",
+  "Once your account is deleted, all of its resources and data will also be permanently deleted. Please enter your password to confirm you would like to permanently delete your account.": "Una vez que tu cuenta sea eliminada, todos sus recursos y datos también serán eliminados permanentemente. Por favor ingresa tu contraseña para confirmar que deseas eliminar permanentemente tu cuenta.",
+  "Only you know this password. It never leaves your device.": "Solo tú conoces esta contraseña. Nunca sale de tu dispositivo.",
+  "orange": "naranja",
+  "Open menu": "Abrir menú",
+  "Open source": "Código abierto",
+  "Or, return to": "O, regresar a",
+  "Organize financial data with categories and custom labels": "Organiza datos financieros con categorías y etiquetas personalizadas",
+  "Organize transactions with tags that make sense for your workflow.": "Organiza transacciones con etiquetas que tengan sentido para tu flujo de trabajo.",
+  "Other": "Otros",
+  "Other Categories (": "Otras Categorías (",
+  "Others": "Otros",
+  "Our service is not intended for users under the age of 16. We do not knowingly collect personal information from children. If you believe we have collected information from a child, please contact us immediately, and we will delete it.": "Nuestro servicio no está destinado a usuarios menores de 16 años. No recopilamos intencionalmente información personal de niños. Si crees que hemos recopilado información de un niño, por favor contáctanos inmediatamente y la eliminaremos.",
+  "Overview of your financial health": "Vista general de tu salud financiera",
+  "Page": "Página",
+  "Password": "Contraseña",
+  "pink": "rosa",
+  "purple": "púrpura",
+  "Password changes are disabled on the demo account.": "Los cambios de contraseña están deshabilitados en la cuenta demo.",
+  "Password settings": "Configuración de contraseña",
+  "Passwords match": "Las contraseñas coinciden",
+  "Pattern Matching": "Coincidencia de Patrones",
+  "Payment Processors:": "Procesadores de Pago:",
+  "Payments are processed by third-party payment processors and subject to their terms": "Los pagos son procesados por procesadores de pago de terceros y están sujetos a sus términos",
+  "Percentage of income saved": "Porcentaje de ingresos ahorrados",
+  "Perfect for investment portfolios and retirement accounts": "Perfecto para carteras de inversión y cuentas de jubilación",
+  "Period Duration (days)": "Duración del Período (días)",
+  "Period Type": "Tipo de Período",
+  "Platform": "Plataforma",
+  "Please enter your new password below": "Por favor ingresa tu nueva contraseña a continuación",
+  "Please proceed with caution, this cannot be undone.": "Por favor procede con precaución, esto no se puede deshacer.",
+  "Please unlock your encryption key to import transactions": "Por favor desbloquea tu clave de encriptación para importar transacciones",
+  "Please unlock your encryption key to save transactions": "Por favor desbloquea tu clave de encriptación para guardar transacciones",
+  "Please verify your email address by clicking on the link we just emailed to you.": "Por favor verifica tu dirección de correo electrónico haciendo clic en el enlace que te acabamos de enviar.",
+  "Prev": "Ant",
+  "Preview (first 3 rows)": "Vista previa (primeras 3 filas)",
+  "Preview Balances": "Vista Previa de Balances",
+  "Preview Transactions": "Vista Previa de Transacciones",
+  "Previous": "Anterior",
+  "Previous month": "Mes anterior",
+  "Priority": "Prioridad",
+  "Priority support": "Soporte prioritario",
+  "Privacy Policy": "Política de Privacidad",
+  "Privacy Policy - Whisper Money": "Política de Privacidad - Whisper Money",
+  "Privacy by Design": "Privacidad por Diseño",
+  "Privacy comes first": "La privacidad es lo primero",
+  "Privacy policy for Whisper Money. Learn how we collect, use, and protect your personal information with end-to-end encryption.": "Política de privacidad de Whisper Money. Aprende cómo recopilamos, usamos y protegemos tu información personal con encriptación de extremo a extremo.",
+  "Privacy policy for Whisper Money. Learn how we collect, use, and protect your personal information.": "Política de privacidad de Whisper Money. Aprende cómo recopilamos, usamos y protegemos tu información personal.",
+  "Pro Monthly": "Pro Mensual",
+  "Pro Plan Active": "Plan Pro Activo",
+  "Pro Yearly": "Pro Anual",
+  "Profile Settings": "Configuración del Perfil",
+  "Profile information": "Información del perfil",
+  "Protect your privacy with no tracking or third-party analytics.": "Protege tu privacidad sin rastreo ni análisis de terceros.",
+  "red": "rojo",
+  "Re-evaluate All Expenses": "Reevaluar Todos los Gastos",
+  "Re-evaluate rules": "Reevaluar reglas",
+  "Recovery Codes": "Códigos de Recuperación",
+  "Recovery codes": "Códigos de recuperación",
+  "Recovery codes let you regain access if you lose your 2FA device. Store them in a secure password manager.": "Los códigos de recuperación te permiten recuperar acceso si pierdes tu dispositivo 2FA. Guárdalos en un administrador de contraseñas seguro.",
+  "Regenerate Codes": "Regenerar Códigos",
+  "Register": "Registrarse",
+  "Regular Security Audits:": "Auditorías de Seguridad Regulares:",
+  "Remaining": "Restante",
+  "Remember me": "Recuérdame",
+  "Remove all labels": "Eliminar todas las etiquetas",
+  "Resend verification email": "Reenviar correo de verificación",
+  "Reset password": "Restablecer contraseña",
+  "Retirement / Pension": "Jubilación / Pensión",
+  "Review and contribute to our open-source codebase on GitHub.": "Revisa y contribuye a nuestro código de código abierto en GitHub.",
+  "Right of Access:": "Derecho de Acceso:",
+  "Right to Data Portability:": "Derecho a la Portabilidad de Datos:",
+  "Right to Erasure:": "Derecho al Olvido:",
+  "Right to Lodge a Complaint:": "Derecho a Presentar una Queja:",
+  "Right to Object:": "Derecho a Objetar:",
+  "Right to Rectification:": "Derecho de Rectificación:",
+  "Right to Restriction:": "Derecho de Restricción:",
+  "Right to Withdraw Consent:": "Derecho a Retirar el Consentimiento:",
+  "Roadmap": "Hoja de Ruta",
+  "Rollover Type": "Tipo de Transferencia",
+  "rose": "rosado",
+  "Row": "Fila",
+  "Rule \":rule\" applied": "Regla \":rule\" aplicada",
+  "Rule title": "Título de regla",
+  "Rules": "Reglas",
+  "Rules apply automatically when you import new transactions": "Las reglas se aplican automáticamente cuando importas nuevas transacciones",
+  "STARBUCKS@TEKKA PLC": "STARBUCKS@TEKKA PLC",
+  "Sarah M.": "Sarah M.",
+  "Save": "Guardar",
+  "Save Balance": "Guardar Balance",
+  "Save Changes": "Guardar Cambios",
+  "Save password": "Guardar contraseña",
+  "Saved": "Guardado",
+  "Saving...": "Guardando...",
+  "Savings": "Ahorros",
+  "Savings Rate": "Tasa de Ahorro",
+  "Savings rate": "Tasa de ahorro",
+  "Search": "Buscar",
+  "Search bank...": "Buscar banco...",
+  "Search categories...": "Buscar categorías...",
+  "Search description or notes...": "Buscar descripción o notas...",
+  "Search disabled (encryption key not set)": "Búsqueda deshabilitada (clave de encriptación no configurada)",
+  "Search labels...": "Buscar etiquetas...",
+  "Search or create labels...": "Buscar o crear etiquetas...",
+  "Search, move": "Buscar, mover",
+  "Secure Storage:": "Almacenamiento Seguro:",
+  "See balances": "Ver balances",
+  "Select a category": "Seleccionar una categoría",
+  "Select a category (optional)": "Seleccionar una categoría (opcional)",
+  "Select a color": "Seleccionar un color",
+  "Select a label": "Seleccionar una etiqueta",
+  "Select a type": "Seleccionar un tipo",
+  "Select account": "Seleccionar cuenta",
+  "Select account type": "Seleccionar tipo de cuenta",
+  "Select all": "Seleccionar todo",
+  "Select all transactions": "Seleccionar todas las transacciones",
+  "Select amount column": "Seleccionar columna de valor",
+  "Select an icon": "Seleccionar un icono",
+  "Select at least a category or a label to track.": "Selecciona al menos una categoría o etiqueta para rastrear.",
+  "Select balance column": "Seleccionar columna de balance",
+  "Select balance column (optional)": "Seleccionar columna de balance (opcional)",
+  "Select categories...": "Seleccionar categorías...",
+  "Select currency": "Seleccionar moneda",
+  "Select date column": "Seleccionar columna de fecha",
+  "Select description column": "Seleccionar columna de descripción",
+  "Select labels (optional)": "Seleccionar etiquetas (opcional)",
+  "Select labels...": "Seleccionar etiquetas...",
+  "Select language": "Seleccionar idioma",
+  "Select row": "Seleccionar fila",
+  "Selected": "Seleccionado",
+  "Selected account not found": "Cuenta seleccionada no encontrada",
+  "Service Availability:": "Disponibilidad del Servicio:",
+  "Session only": "Solo sesión",
+  "Session only (more secure)": "Solo sesión (más seguro)",
+  "Set Account Balance": "Establecer Balance de Cuenta",
+  "Set Category": "Establecer Categoría",
+  "Set spending limits and get real-time updates on your financial goals.": "Establece límites de gasto y obtén actualizaciones en tiempo real sobre tus metas financieras.",
+  "Set the balance for this account on a specific date.": "Actualiza el balance de esta cuenta.",
+  "Set up a spending limit for a category or label.": "Configura un límite de gasto para un categoría o etiqueta.",
+  "Setting things up...": "Configurando...",
+  "Settings": "Configuración",
+  "Setup Encryption": "Configura tu encriptación",
+  "Sign up": "Crear cuenta",
+  "Simple, transparent pricing": "Precios simples y transparentes",
+  "Skip": "Saltar",
+  "slate": "pizarra",
+  "Smart Automation Rules": "Reglas automáticas",
+  "Smart Categorization": "Categorización Inteligente",
+  "Smart budgeting": "Presupuestos inteligentes",
+  "Smart categorization": "Categorización inteligente",
+  "Spending exceeds income this period.": "El gasto excede el ingreso en este período.",
+  "Spent": "Gastado",
+  "Spent:": "Gastado:",
+  "Square images only (max": "Solo imágenes cuadradas (máx",
+  "Start My Financial Journey": "Comenzar Mi Viaje Financiero",
+  "Start Your Financial Journey": "Comienza Tu Viaje Financiero",
+  "Status": "Estado",
+  "stone": "piedra",
+  "Storage Preference": "Preferencia de Almacenamiento",
+  "Strict access controls and authentication mechanisms protect against unauthorized access": "Controles de acceso estrictos y mecanismos de autenticación protegen contra acceso no autorizado",
+  "Subscription fees are billed in advance on a recurring basis until cancelled": "Las tarifas de suscripción se facturan por adelantado de forma recurrente hasta que se cancele",
+  "Supported formats": "Formatos soportados",
+  "Supports CSV, XLS, and XLSX files": "Soporta archivos CSV, XLS y XLSX",
+  "Sync now": "Sincronizar ahora",
+  "Sync your encrypted financial data across multiple devices via cloud storage": "Sincroniza tus datos financieros encriptados en múltiples dispositivos a través de almacenamiento en la nube",
+  "System": "Sistema",
+  "Tap": "Toca",
+  "Tap the": "Toca el botón",
+  "Share": "Compartir",
+  "button in your browser toolbar": "en la barra de herramientas de tu navegador",
+  "Add to Home Screen": "Añadir a pantalla de inicio",
+  "Take control of your finances with privacy-first money tracking. Let's set up your account in just a few minutes.": "Toma el control de tus finanzas con seguimiento de dinero que prioriza la privacidad. Configuremos tu cuenta en solo unos minutos.",
+  "teal": "cerceta",
+  "Technical Information:": "Información Técnica:",
+  "Terms of Service": "Términos de Servicio",
+  "Terms of Service - Whisper Money": "Términos de Servicio - Whisper Money",
+  "Terms of service for Whisper Money. Review the rules and regulations for using our platform.": "Términos de servicio de Whisper Money. Revisa las reglas y regulaciones para usar nuestra plataforma.",
+  "Terms of service for Whisper Money. Review the rules and regulations for using our secure personal finance platform.": "Términos de servicio de Whisper Money. Revisa las reglas y regulaciones para usar nuestra plataforma segura de finanzas personales.",
+  "The Whisper Money name and logo are trademarks of Whisper Money. You may not use these trademarks without our prior written consent.": "El nombre y logo de Whisper Money son marcas registradas de Whisper Money. No puedes usar estas marcas sin nuestro consentimiento previo por escrito.",
+  "The Whisper Money platform, including its software, design, text, graphics, logos, and other content (excluding your personal data), is owned by Whisper Money and protected by copyright, trademark, and other intellectual property laws. You may not copy, modify, distribute, sell, or lease any part of our service or software without our explicit written permission.": "La plataforma Whisper Money, incluyendo su software, diseño, texto, gráficos, logos y otro contenido (excluyendo tus datos personales), es propiedad de Whisper Money y está protegida por derechos de autor, marcas registradas y otras leyes de propiedad intelectual. No puedes copiar, modificar, distribuir, vender o arrendar ninguna parte de nuestro servicio o software sin nuestro permiso explícito por escrito.",
+  "The automation rules save me so much time. And knowing my data is private? Priceless.": "Las reglas de automatización me ahorran mucho tiempo. ¿Y saber que mis datos son privados? No tiene precio.",
+  "The budgeting features are intuitive and the dark mode is gorgeous. Best finance app I've used.": "Las funciones de presupuesto son intuitivas y el modo oscuro es hermoso. La mejor app de finanzas que he usado.",
+  "The demo account cannot be deleted.": "La cuenta demo no se puede eliminar.",
+  "The import feature saved me hours. Got all my transactions in seconds.": "La función de importación me ahorró horas. Obtuve todas mis transacciones en segundos.",
+  "The legal basis for processing your data includes: performance of our contract with you, your consent, our legitimate interests in improving the service, and compliance with legal obligations.": "La base legal para procesar tus datos incluye: ejecución de nuestro contrato contigo, tu consentimiento, nuestros intereses legítimos en mejorar el servicio y cumplimiento de obligaciones legales.",
+  "The most secure personal finance app with end-to-end encryption. Track expenses, create budgets, and manage your money privately.": "La app más segura de finanzas personales con encriptación de extremo a extremo. Rastrea gastos, crea presupuestos y administra tu dinero de forma privada.",
+  "The most secure way to understand your finances": "La forma más segura de entender tus finanzas",
+  "All your money in one place. No spreadsheets. Free.": "Todo tu dinero en un solo sitio. Sin Excels. Gratis.",
+  "There are different account types. Some track transactions, others just track balance over time.": "Hay diferentes tipos de cuenta. Algunas rastrean transacciones, otras solo rastrean el balance a lo largo del tiempo.",
+  "These Terms of Service govern your use of the Whisper Money personal finance platform.": "Estos Términos de Servicio rigen tu uso de la plataforma de finanzas personales Whisper Money.",
+  "These Terms, together with our Privacy Policy, constitute the entire agreement between you and Whisper Money regarding the use of our service and supersede any prior agreements or understandings, whether written or oral.": "Estos Términos, junto con nuestra Política de Privacidad, constituyen el acuerdo completo entre tú y Whisper Money con respecto al uso de nuestro servicio y reemplazan cualquier acuerdo o entendimiento previo, ya sea escrito u oral.",
+  "This account type is for balance tracking only and doesn't support transactions.": "Este tipo de cuenta es solo para rastreo de balance y no soporta transacciones.",
+  "This action is irreversible. All transactions in this account will also be permanently deleted.": "Esta acción es irreversible. Todas las transacciones en esta cuenta también serán eliminadas permanentemente.",
+  "This is a secure area of the application. Please confirm your password before continuing.": "Esta es un área segura de la aplicación. Por favor confirma tu contraseña antes de continuar.",
+  "This month's income and expenses": "Ingresos y gastos de este mes",
+  "This password will encrypt all your financial data. Make it strong and memorable — we can't recover it for you.": "Esta contraseña encriptará todos tus datos financieros. Hazla fuerte y memorable: no podemos recuperarla por ti.",
+  "This transaction was imported from a file. The description cannot be modified.": "Esta transacción fue importada de un archivo. La descripción no se puede modificar.",
+  "This will remove your encryption key from this browser session. You'll need to enter your password again to unlock encrypted content.": "Esto eliminará tu clave de encriptación de esta sesión del navegador. Necesitarás ingresar tu contraseña nuevamente para desbloquear el contenido encriptado.",
+  "This will take less than 5 minutes": "Esto tomará menos de 5 minutos",
+  "This will update the allocated amount for the current and future periods.": "Esto actualizará el valor asignado para el período actual y futuro.",
+  "This would break our end-to-end encryption promise": "Esto rompería nuestra promesa de encriptación de extremo a extremo",
+  "Title": "Título",
+  "To": "Para",
+  "To authenticate your access and protect your account security": "Para autenticar tu acceso y proteger la seguridad de tu cuenta",
+  "To comply with legal obligations and enforce our terms": "Para cumplir con obligaciones legales y hacer cumplir nuestros términos",
+  "To enable cloud synchronization of your encrypted financial data across devices": "Para habilitar la sincronización en la nube de tus datos financieros encriptados entre dispositivos",
+  "To exercise any of these rights, please contact us at victor@whisper.money. We will respond to your request within 30 days.": "Para ejercer cualquiera de estos derechos, por favor contáctanos en victor@whisper.money. Responderemos a tu solicitud dentro de 30 días.",
+  "To improve and optimize our service based on usage patterns": "Para mejorar y optimizar nuestro servicio basándonos en patrones de uso",
+  "To process payments for premium features or subscriptions": "Para procesar pagos por funciones premium o suscripciones",
+  "To process subscription payments and transactions. These processors have access only to the information necessary to perform their functions and are obligated to protect your data": "Para procesar pagos de suscripción y transacciones. Estos procesadores tienen acceso solo a la información necesaria para realizar sus funciones y están obligados a proteger tus datos",
+  "To send transactional emails, password resets, and service notifications": "Para enviar correos transaccionales, restablecimientos de contraseña y notificaciones del servicio",
+  "To send you service-related notifications, updates, and security alerts via email": "Para enviarte notificaciones relacionadas con el servicio, actualizaciones y alertas de seguridad por correo electrónico",
+  "Toggle theme": "Cambiar tema",
+  "Top Spending Categories": "Principales Categorías de Gasto",
+  "Top spending categories": "Principales categorías de gasto",
+  "Total": "Total",
+  "Track all your finances in one place — checking, savings, credit cards, investments, and more.": "Rastrea todas tus finanzas en un solo lugar: cuenta corriente, ahorros, tarjetas de crédito, inversiones y más.",
+  "Track your income, expenses, and savings": "Rastrea tus ingresos, gastos y ahorros",
+  "Track your spending with flexible budgets": "Rastrea tus gastos con presupuestos flexibles",
+  "Tracking": "Seguimiento",
+  "Tracking spending for": "Rastreando gastos para",
+  "Tracking:": "Seguimiento:",
+  "Transfer": "Transferencia",
+  "Transaction Date": "Fecha transaccion",
+  "Transaction created successfully": "Transacción creada exitosamente",
+  "Transaction created, but failed to update balance": "Transacción creada, pero no se pudo actualizar el balance",
+  "Transaction description": "Descripción",
+  "Transaction details, budgets, categories, and other financial information you manually enter into the application": "Detalles de transacciones, presupuestos, categorías y otra información financiera que ingresas manualmente en la aplicación",
+  "Transaction updated successfully": "Transacción actualizada exitosamente",
+  "Transactions": "Transacciones",
+  "Transactions in this category will not be counted in top expenses or income. Transfer categories are mainly used for transactions between accounts.": "Estas transacciones no se contará como gasto ni como ingreso.",
+  "Trusted by people who value their privacy": "Confiado por personas que valoran su privacidad",
+  "Trusted by thousands of users": "Confiado por miles de usuarios",
+  "Two-Factor Authentication": "Autenticación en dos pasas",
+  "Two-factor authentication settings cannot be changed on the demo account.": "La configuración de autenticación de dos factores no se puede cambiar en la cuenta demo.",
+  "Type": "Tipo",
+  "Type DELETE": "Escribe ELIMINAR",
+  "Uncategorized": "Sin categorizar",
+  "Understand your spending with beautiful charts and reports.": "Entiende tus gastos con gráficos y reportes hermosos.",
+  "Understanding Categories": "Entendiendo las Categorías",
+  "Unlimited accounts": "Cuentas ilimitadas",
+  "Unlimited transactions": "Transacciones ilimitadas",
+  "Unlock": "Desbloquear",
+  "Unlock Encrypted Data": "Desbloquear Datos Encriptados",
+  "Unlock encryption key": "Desbloquear clave de encriptación",
+  "Unlock encryption to add transactions": "Desbloquea la encriptación crear una transacción",
+  "Unlock encryption to import transactions": "Desbloquea la encriptación para importar transacciones",
+  "User account": "Cuenta de usuario",
+  "Update": "Actualizar",
+  "Update account balance": "Actualizar balance de cuenta",
+  "Update balance": "Actualizar balance",
+  "Update balances periodically to track growth": "Actualiza los balances periódicamente para rastrear el crecimiento",
+  "Update password": "Actualizar contraseña",
+  "Update the account information.": "Actualiza la información de la cuenta.",
+  "Update the balance record.": "Actualiza el registro de balance.",
+  "Update the category and notes for this transaction.": "Actualiza la categoría y notas de esta transacción.",
+  "Update the category information.": "Actualiza la información de la categoría.",
+  "Update the label information.": "Actualiza la información de la etiqueta.",
+  "Update the rule to automatically categorize transactions and add labels.": "Actualiza la regla para categorizar automáticamente transacciones y agregar etiquetas.",
+  "Update your account's appearance settings": "Actualiza la configuración de apariencia de tu cuenta",
+  "Update your budget settings. To change the allocated amount or tracking, use the budget page directly.": "Actualiza la configuración de tu presupuesto. Para cambiar el valor asignado o el seguimiento, usa la página de presupuesto directamente.",
+  "Update your name and email address": "Actualiza tu nombre y dirección de correo electrónico",
+  "Updating...": "Actualizando...",
+  "Upon termination, we will delete your personal data in accordance with our Privacy Policy and applicable law, typically within 30 days.": "Al cancelar, eliminaremos tus datos personales de acuerdo con nuestra Política de Privacidad y la ley aplicable, típicamente dentro de 30 días.",
+  "Usage Information:": "Información de Uso:",
+  "Use Defaults": "Usar Valores Predeterminados",
+  "Use a strong password (minimum 12 characters). This password will encrypt your data.": "Usa una contraseña fuerte (mínimo 12 caracteres). Esta contraseña encriptará tus datos.",
+  "Use the service only for lawful purposes and in compliance with all applicable laws": "Usa el servicio solo para fines legales y en cumplimiento de todas las leyes aplicables",
+  "Value": "Valor",
+  "Verify email": "Verificar correo electrónico",
+  "Version:": "Versión:",
+  "violet": "violeta",
+  "View Details": "Ver Detalles",
+  "View and manage balance records for this account.": "Ver y gestionar registros de balance para esta cuenta.",
+  "View and manage your bank accounts": "Ver y administrar tus cuentas bancarias",
+  "View and manage your transactions": "Ver y gestionar tus transacciones",
+  "View balance evolution over time": "Ver evolución del balance a lo largo del tiempo",
+  "View details": "Ver detalles",
+  "Visual Reports": "Reportes Visuales",
+  "Visual insights": "Análisis visuales",
+  "Visual insights & reports": "Análisis visuales e informes",
+  "Warning": "Advertencia",
+  "We Can't Read It": "No Podemos Leerlo",
+  "We collect the following types of personal information:": "Recopilamos los siguientes tipos de información personal:",
+  "We do not sell, trade, or rent your personal information to third parties for marketing purposes.": "No vendemos, comercializamos ni alquilamos tu información personal a terceros con fines de marketing.",
+  "We don't need direct access to your bank accounts. No sharing credentials, no third-party integrations, no security risks. You stay in complete control of your financial data.": "No necesitamos acceso directo a tus cuentas bancarias. Sin compartir credenciales, sin integraciones de terceros, sin riesgos de seguridad. Mantienes el control total de tus datos financieros.",
+  "We don't track, sell, or share your data. Ever.": "No rastreamos, vendemos ni compartimos tus datos. Nunca.",
+  "We encourage you to contact us directly at victor@whisper.money to resolve any disputes before initiating legal proceedings.": "Te animamos a contactarnos directamente en victor@whisper.money para resolver cualquier disputa antes de iniciar procedimientos legales.",
+  "We implement robust security measures to protect your personal information:": "Implementamos medidas de seguridad robustas para proteger tu información personal:",
+  "We may update this Privacy Policy from time to time to reflect changes in our practices or for legal, operational, or regulatory reasons. When we make material changes, we will notify you by email and/or by posting a notice on our website at least 30 days before the changes take effect. Your continued use of the service after changes become effective constitutes acceptance of the updated policy.": "Podemos actualizar esta Política de Privacidad de vez en cuando para reflejar cambios en nuestras prácticas o por razones legales, operativas o regulatorias. Cuando hagamos cambios materiales, te notificaremos por correo electrónico y/o publicando un aviso en nuestro sitio web al menos 30 días antes de que los cambios entren en vigor. Tu uso continuado del servicio después de que los cambios entren en vigor constituye la aceptación de la política actualizada.",
+  "We never see your transaction descriptions": "Nunca vemos las descripciones de tus transacciones",
+  "We process your personal data for the following purposes:": "Procesamos tus datos personales para los siguientes propósitos:",
+  "We regularly review and update our security practices": "Revisamos y actualizamos regularmente nuestras prácticas de seguridad",
+  "We reserve the right to change our pricing with 30 days advance notice to subscribers": "Nos reservamos el derecho de cambiar nuestros precios con 30 días de aviso previo a los suscriptores",
+  "We reserve the right to modify, suspend, or discontinue any part of the service at any time, with or without notice. We will not be liable to you or any third party for any modification, suspension, or discontinuation of the service.": "Nos reservamos el derecho de modificar, suspender o descontinuar cualquier parte del servicio en cualquier momento, con o sin previo aviso. No seremos responsables ante ti o cualquier tercero por cualquier modificación, suspensión o descontinuación del servicio.",
+  "We see:": "Vemos:",
+  "We store encrypted data we can't read. Even if our servers were compromised, your data stays secure.": "Almacenamos datos encriptados que no podemos leer. Incluso si nuestros servidores fueran comprometidos, tus datos permanecen seguros.",
+  "We use essential cookies to maintain your session and ensure the proper functioning of our service. These cookies are necessary for the service to work and cannot be disabled. We do not use tracking cookies or analytics cookies without your explicit consent.": "Usamos cookies esenciales para mantener tu sesión y asegurar el funcionamiento adecuado de nuestro servicio. Estas cookies son necesarias para que el servicio funcione y no se pueden desactivar. No usamos cookies de seguimiento o análisis sin tu consentimiento explícito.",
+  "We use the following third-party services to operate our platform:": "Usamos los siguientes servicios de terceros para operar nuestra plataforma:",
+  "We're looking through your transaction history to find expenses that match this budget. This usually takes a few seconds.": "Estamos revisando tu historial de transacciones para encontrar gastos que coincidan con este presupuesto. Esto usualmente toma unos segundos.",
+  "We've created a comprehensive set of categories for you. You can customize them now or adjust them later in settings.": "Hemos creado un conjunto completo de categorías para ti. Puedes personalizarlas ahora o ajustarlas más tarde en la configuración.",
+  "Weekly": "Semanal",
+  "Welcome to Pro!": "¡Bienvenido a Pro!",
+  "Welcome to</br>Whisper Money": "Bienvenido a</br>Whisper Money",
+  "What people are saying": "Lo que la gente dice",
+  "When you create an account with Whisper Money, you agree to:": "Cuando creas una cuenta con Whisper Money, aceptas:",
+  "When you enable two-factor authentication, you will be prompted for a secure pin during login. This pin can be retrieved from a TOTP-supported application on your phone.": "Cuando actives la autenticación de dos factores, se te pedirá un pin seguro durante el inicio de sesión. Este pin se puede obtener de una aplicación compatible con TOTP en tu teléfono.",
+  "Where processing is based on consent, you can withdraw it at any time": "Cuando el procesamiento se basa en el consentimiento, puedes retirarlo en cualquier momento",
+  "Where your money comes from": "De dónde viene tu dinero",
+  "Where your money goes": "A dónde va tu dinero",
+  "While we use industry-standard security measures, no method of transmission over the internet or electronic storage is 100% secure. We cannot guarantee absolute security but continuously work to protect your data.": "Aunque usamos medidas de seguridad estándar de la industria, ningún método de transmisión por internet o almacenamiento electrónico es 100% seguro. No podemos garantizar seguridad absoluta pero trabajamos continuamente para proteger tus datos.",
+  "Whisper Money - Secure Personal Finance App": "Whisper Money - App Segura de Finanzas Personales",
+  "Whisper Money - The Most Secure Personal Finance App": "Whisper Money - La App Más Segura de Finanzas Personales",
+  "Whisper Money is a personal finance tracking application that allows you to:": "Whisper Money es una aplicación de seguimiento de finanzas personales que te permite:",
+  "Whisper Money is the data controller responsible for your personal information.": "Whisper Money es el controlador de datos responsable de tu información personal.",
+  "Whisper Money uses end-to-end encryption to protect your financial data. Here's how it works:": "Whisper Money usa encriptación de extremo a extremo para proteger tus datos financieros. Así es como funciona:",
+  "Whisper Money. All rights reserved.": "Whisper Money. Todos los derechos reservados.",
+  "Why No AI Auto-Categorization?": "¿Por Qué No Hay Auto-Categorización por IA?",
+  "With two-factor authentication enabled, you will be prompted for a secure, random pin during login, which you can retrieve from the TOTP-supported application on your phone.": "Con la autenticación de dos factores activada, se te pedirá un pin seguro y aleatorio durante el inicio de sesión, que puedes obtener de la aplicación compatible con TOTP en tu teléfono.",
+  "Works everywhere": "Funciona en todas partes",
+  "YYYY-MM-DD (e.g., 2024-12-31)": "YYYY-MM-DD (ej., 2024-12-31)",
+  "Year": "Año",
+  "yellow": "amarillo",
+  "You agree to indemnify, defend, and hold harmless Whisper Money and its officers, directors, employees, and agents from any claims, liabilities, damages, losses, and expenses, including reasonable legal fees, arising out of or related to your use of the service, violation of these Terms, or violation of any rights of another party.": "Aceptas indemnizar, defender y eximir de responsabilidad a Whisper Money y sus funcionarios, directores, empleados y agentes de cualquier reclamo, responsabilidad, daño, pérdida y gasto, incluidos los honorarios legales razonables, que surjan de o estén relacionados con tu uso del servicio, violación de estos Términos o violación de los derechos de otra parte.",
+  "You agree to pay all applicable fees as described at the time of purchase": "Aceptas pagar todas las tarifas aplicables según se describan en el momento de la compra",
+  "You are responsible for all taxes associated with your purchase": "Eres responsable de todos los impuestos asociados con tu compra",
+  "You are responsible for maintaining backups of your data. While we implement reasonable backup procedures, we recommend you export and save copies of important data regularly.": "Eres responsable de mantener copias de seguridad de tus datos. Aunque implementamos procedimientos razonables de respaldo, recomendamos que exportes y guardes copias de datos importantes regularmente.",
+  "You can always customize categories later in Settings → Categories": "Siempre puedes personalizar las categorías más tarde en Configuración → Categorías",
+  "You can file a complaint with your local data protection authority": "Puedes presentar una queja ante tu autoridad local de protección de datos",
+  "You can object to processing of your data based on legitimate interests": "Puedes objetar el procesamiento de tus datos basándose en intereses legítimos",
+  "You can request a copy of the personal data we hold about you": "Puedes solicitar una copia de los datos personales que tenemos sobre ti",
+  "You can request correction of inaccurate or incomplete data": "Puedes solicitar la corrección de datos inexactos o incompletos",
+  "You can request deletion of your personal data (right to be forgotten)": "Puedes solicitar la eliminación de tus datos personales (derecho al olvido)",
+  "You can request restriction of processing in certain circumstances": "Puedes solicitar la restricción del procesamiento en ciertas circunstancias",
+  "You can request your data in a structured, machine-readable format": "Puedes solicitar tus datos en un formato estructurado y legible por máquina",
+  "You may cancel your subscription at any time. Upon cancellation, you will retain access until the end of your current billing period, after which your subscription will not renew.": "Puedes cancelar tu suscripción en cualquier momento. Al cancelar, mantendrás acceso hasta el final de tu período de facturación actual, después del cual tu suscripción no se renovará.",
+  "You may not use the service to engage in any illegal activity, transmit malicious code, attempt to gain unauthorized access to our systems, or interfere with the proper functioning of the service.": "No puedes usar el servicio para participar en ninguna actividad ilegal, transmitir código malicioso, intentar obtener acceso no autorizado a nuestros sistemas o interferir con el funcionamiento adecuado del servicio.",
+  "You may terminate your account at any time by deleting your account through the application settings or by contacting us. Upon termination, your right to use the service will immediately cease.": "Puedes cancelar tu cuenta en cualquier momento eliminándola a través de la configuración de la aplicación o contactándonos. Al cancelar, tu derecho a usar el servicio cesará inmediatamente.",
+  "You must be at least 16 years old to use this service. By using Whisper Money, you represent and warrant that you meet this age requirement.": "Debes tener al menos 16 años para usar este servicio. Al usar Whisper Money, declaras y garantizas que cumples con este requisito de edad.",
+  "You now have full access to all Whisper Money features. Thank you for supporting us!": "¡Ahora tienes acceso completo a todas las funciones de Whisper Money. Gracias por apoyarnos!",
+  "You retain all ownership rights to the financial data and information you enter into Whisper Money. We do not claim any ownership over your personal financial information.": "Conservas todos los derechos de propiedad sobre los datos financieros e información que ingresas en Whisper Money. No reclamamos ninguna propiedad sobre tu información financiera personal.",
+  "You see:": "Ves:",
+  "You'll receive an exclusive promo code via DM!": "¡Recibirás un código promocional exclusivo por mensaje directo!",
+  "You're All Set!": "¡Estás Todo Listo!",
+  "You're enjoying all the benefits of Whisper Money Pro": "Estás disfrutando de todos los beneficios de Whisper Money Pro",
+  "You're in complete control": "Tienes control completo",
+  "You've categorized all your transactions.": "Has categorizado todas tus transacciones.",
+  "Your Accounts": "Tus Cuentas",
+  "Your Categories Include:": "Tus Categorías Incluyen:",
+  "Your Data, Your Privacy": "Tus Datos, Tu Privacidad",
+  "Your Data:": "Tus Datos:",
+  "Your Private Key": "Tu Clave Privada",
+  "Your Pro Plan": "Tu Plan Pro",
+  "Your accounts are ready and your data is securely encrypted. Welcome to Whisper Money!": "Tus cuentas están listas y tus datos están encriptados de forma segura. ¡Bienvenido a Whisper Money!",
+  "Your continued use of the service after the effective date of revised Terms constitutes your acceptance of the changes. If you do not agree to the new terms, you must stop using the service and may delete your account.": "Tu uso continuado del servicio después de la fecha efectiva de los Términos revisados constituye tu aceptación de los cambios. Si no estás de acuerdo con los nuevos términos, debes dejar de usar el servicio y puedes eliminar tu cuenta.",
+  "Your data is encrypted before it leaves your browser.": "Tus datos se encriptan antes de salir de tu navegador.",
+  "Your data is ready": "Tus datos están listos",
+  "Your data is yours alone. Sign up to get started.": "Tus datos son solo tuyos. Regístrate para comenzar.",
+  "No credit card required. Your data stays private with E2E encryption.": "Sin tarjeta de crédito. Tus datos permanecen privados con encriptación E2E.",
+  "Your data is yours. Export it anytime in standard formats.": "Tus datos son tuyos. Expórtalos en cualquier momento en formatos estándar.",
+  "Your email address is unverified.": "Tu dirección de correo electrónico no está verificada.",
+  "Your financial data is encrypted on your device before being transmitted to our servers, ensuring that only you can access your information": "Tus datos financieros se encriptan en tu dispositivo antes de ser transmitidos a nuestros servidores, asegurando que solo tú puedas acceder a tu información",
+  "Your financial data is encrypted on your device before it ever reaches our servers.": "Tus datos financieros se encriptan en tu dispositivo antes de que lleguen a nuestros servidores.",
+  "Your financial data is encrypted on your device. Only you can access it.": "Tus datos financieros se encriptan en tu dispositivo. Solo tú puedes acceder a ellos.",
+  "Your financial data stays private with end-to-end encryption. The most secure way to manage your personal finances.": "Tus datos financieros permanecen privados con encriptación de extremo a extremo. La forma más segura de gestionar tus finanzas personales.",
+  "Your financial data stays private with end-to-end encryption. Track expenses, create budgets, and achieve your goals—all while keeping your information completely secure.": "Tus datos financieros permanecen privados con encriptación de extremo a extremo. Rastrea gastos, crea presupuestos y alcanza tus metas, todo mientras mantienes tu información completamente segura.",
+  "Understand your finances and make better decisions without the friction. Track expenses, create budgets, and achieve your goals—all in one place.": "Entiende tus finanzas para tomar mejores decisiones sin fricción. Rastrea gastos, crea presupuestos y alcanza tus metas, todo en un solo sitio.",
+  "Your first account must be a": "Tu primera cuenta debe ser una",
+  "Your rules run entirely in your browser": "Tus reglas se ejecutan completamente en tu navegador",
+  "Your transactions, accounts, and budgets are encrypted on your device before syncing to the cloud.": "Tus transacciones, cuentas y presupuestos se encriptan en tu dispositivo antes de sincronizarse con la nube.",
+  "Your use or inability to use the service": "Tu uso o incapacidad para usar el servicio",
+  "Zero tracking": "Sin rastreo",
+  "Zero-Knowledge Architecture": "Arquitectura de Conocimiento Cero",
+  "[Loading...]": "[Cargando...]",
+  "above.": "arriba.",
+  "account.": "cuenta.",
+  "balance record": "registro de balance",
+  "balance records": "registros de balance",
+  "balances imported": "balances importados",
+  "category(ies) total.": "categoría(s) en total.",
+  "e.g., Monthly Budget": "ej., Presupuesto Mensual",
+  "e.g., Padel Budget": "ej., Presupuesto de Pádel",
+  "email@example.com": "email@example.com",
+  "en_US": "es_ES",
+  "finance app, budgeting, expense tracking, end-to-end encryption, secure finance, personal finance, money management, privacy, encrypted finance app": "app de finanzas, presupuestos, seguimiento de gastos, encriptación de extremo a extremo, finanzas seguras, finanzas personales, gestión del dinero, privacidad, app de finanzas encriptada",
+  "for the last 12 months": "en los últimos 12 meses",
+  "index, follow": "index, follow",
+  "label(s) total.": "etiqueta(s) en total.",
+  "log in": "iniciar sesión",
+  "of": "de",
+  "on the last 30 days": "en los últimos 30 días",
+  "one-time": "pago único",
+  "or you can": "o puedes",
+  "or, enter the code manually": "o, ingresa el código manualmente",
+  "per month": "por mes",
+  "per year": "por año",
+  "px) /": "px) /",
+  "row(s) total": "fila(s) en total",
+  "rule(s) total.": "regla(s) en total.",
+  "summary_large_image": "summary_large_image",
+  "this month": "este mes",
+  "to confirm.": "para confirmar.",
+  "transactions imported": "transacciones importadas",
+  "transactions matching current filter": "transacciones que coinciden con el filtro actual",
+  "transactions total": "transacciones en total",
+  "victor@whisper.money": "victor@whisper.money",
+  "vs last month": "vs mes anterior",
+  "vs last period": "vs período anterior",
+  "will be updated or created.": "será actualizado o creado.",
+  "— $9/month": "— $9/month",
+  "← Back to home": "← Volver al inicio",
+  "🎉 Get a founder discount •": "🎉 Obtén un descuento de fundador •",
+  "Choose the account where transactions will be imported": "Elige la cuenta donde se importarán las transacciones",
+  "Drop your CSV or Excel file here, or click to browse": "Arrastra tu archivo CSV o Excel aquí, o haz clic para buscar",
+  "Import transactions from CSV or Excel files": "Importar transacciones desde archivos CSV o Excel",
+  "Importing Transactions": "Importando Transacciones",
+  "Map Columns": "Mapear Columnas",
+  "Match your file columns to transaction fields": "Asocia las columnas de tu archivo con los campos de transacción",
+  "No bank found.": "No se encontró ningún banco.",
+  "Please wait while we import your transactions": "Por favor, espera mientras importamos tus transacciones",
+  "Preview Transactions": "Vista Previa de Transacciones",
+  "Review transactions before importing": "Revisa las transacciones antes de importar",
+  "Searching...": "Buscando...",
+  "Select Account": "Seleccionar Cuenta",
+  "Select bank...": "Seleccionar banco...",
+  "Type at least 3 characters to search": "Escribe al menos 3 caracteres para buscar",
+  "Upload File": "Subir Archivo",
+  "- we never sell your data": "- nunca vendemos tus datos",
+  "100% private": "100% privado",
+  "1,200+ users": "1.200+ usuarios",
+  "15% more savings": "15% más de ahorro",
+  "23% better": "23% mejor",
+  "Saving": "Ahorro",
+  "after 3 months with Whisper Money": "después de 3 meses con Whisper Money",
+  "/month": "/mes",
+  "one-time": "pago único",
+  "spending awareness reported": "conocimiento del gasto reportado",
+  "taking control of their finances": "tomando el control de sus finanzas",
+  "401k, IRA, pension funds": "401k, planes de pensiones",
+  "Failed to create account. Please try again.": "Error al crear la cuenta. Por favor, inténtalo de nuevo.",
+  "Failed to set balance. Please try again.": "Error al establecer el balance. Por favor, inténtalo de nuevo.",
+  "Failed to setup encryption. Please try again.": "Error al configurar la encriptación. Por favor, inténtalo de nuevo.",
+  "Fair": "Aceptable",
+  "Food & Dining (Groceries, Restaurants, Delivery)": "Alimentación (Supermercado, Restaurantes, Delivery)",
+  "Good": "Buena",
+  "Health & Wellness (Medical, Pharmacy, Fitness)": "Salud y Bienestar (Médico, Farmacia, Gimnasio)",
+  "Housing (Rent, Utilities, Maintenance)": "Vivienda (Alquiler, Suministros, Mantenimiento)",
+  "Import transactions for your account. You can export transaction history from your bank's website.": "Importa transacciones para tu cuenta. Puedes exportar el historial de transacciones desde la web de tu banco.",
+  "Import your transaction history to start tracking your finances.": "Importa tu historial de transacciones para empezar a rastrear tus finanzas.",
+  "Income (Salary, Freelance, Investments)": "Ingresos (Salario, Freelance, Inversiones)",
+  "Let's start with your main checking account. You can add more accounts later.": "Empecemos con tu cuenta corriente principal. Puedes agregar más cuentas después.",
+  "Money coming into an account from a source (e.g., salary, refunds, interest). Increases your balance.": "Dinero que entra en una cuenta desde una fuente (ej., salario, reembolsos, intereses). Aumenta tu balance.",
+  "Money going out of an account to pay for something (e.g., groceries, rent, subscriptions). Decreases your balance.": "Dinero que sale de una cuenta para pagar algo (ej., supermercado, alquiler, suscripciones). Disminuye tu balance.",
+  "Mortgages and loans": "Hipotecas y préstamos",
+  "Moving money between accounts. It does not count in expenses or income charts.": "Mover dinero entre cuentas. No cuenta en los gráficos de gastos o ingresos.",
+  "Password must be at least 12 characters": "La contraseña debe tener al menos 12 caracteres",
+  "Passwords do not match": "Las contraseñas no coinciden",
+  "Please enter a balance": "Por favor, ingresa un balance",
+  "Please enter a bank name.": "Por favor, ingresa un nombre de banco.",
+  "Please enter an account name.": "Por favor, ingresa un nombre de cuenta.",
+  "Please fill in all required fields.": "Por favor, completa todos los campos obligatorios.",
+  "Please select a bank.": "Por favor, selecciona un banco.",
+  "Redirecting...": "Redirigiendo...",
+  "Retirement": "Jubilación",
+  "Save money for goals": "Ahorra dinero para tus metas",
+  "Set Balance": "Establecer Balance",
+  "Set the current balance for this account to start tracking.": "Establece el balance actual de esta cuenta para empezar a rastrear.",
+  "Setting up encryption...": "Configurando encriptación...",
+  "Shopping (Clothing, Electronics, Gifts)": "Compras (Ropa, Electrónica, Regalos)",
+  "Smart Rules": "Reglas Inteligentes",
+  "Stocks, ETFs, and portfolios": "Acciones, ETFs y carteras",
+  "Strong": "Fuerte",
+  "Take control of your finances with privacy-first money tracking. Let's set up your account in just a few minutes.": "Toma el control de tus finanzas con un seguimiento privado de tu dinero. Vamos a configurar tu cuenta en pocos minutos.",
+  "This account tracks balance changes over time instead of individual transactions.": "Esta cuenta rastrea cambios de balance a lo largo del tiempo en lugar de transacciones individuales.",
+  "This will take less than 5 minutes": "Esto tomará menos de 5 minutos",
+  "Track credit card spending": "Rastrea los gastos de tarjeta de crédito",
+  "Transactions + Balance": "Transacciones + Balance",
+  "Transportation (Fuel, Public Transit, Parking)": "Transporte (Combustible, Transporte público, Aparcamiento)",
+  "Transfers (Between accounts, Savings)": "Transferencias (Entre cuentas, Ahorros)",
+  "Weak": "Débil",
+  "Welcome": "Bienvenido",
+  "Would you like to add more accounts or continue to the dashboard?": "¿Quieres agregar más cuentas o continuar al panel?",
+  "You already have accounts set up. Let's continue with the onboarding.": "Ya tienes cuentas configuradas. Continuemos con la configuración.",
+  "Your first account must be a checking account.": "Tu primera cuenta debe ser una cuenta corriente.",
+  "Your key will be cleared when you close the browser.": "Tu clave se borrará cuando cierres el navegador.",
+  "Your key will be stored until you log out.": "Tu clave se almacenará hasta que cierres sesión.",
+  "Creating subscription...": "Creando suscripción...",
+  "We are processing your payment...": "Estamos procesando tu pago...",
+  "Your subscription is now active": "Tu suscripción ya está activa",
+  "Verify Your Email - Whisper Money": "Verifica Tu Email - Whisper Money",
+  "Verify your email, :name!": "¡Verifica tu correo, :name!",
+  "Hi! I'm Victor, the founder of Whisper Money. Thanks for signing up — I just need you to verify your email address to get started.": "¡Hola! Soy Víctor, el fundador de Whisper Money. Gracias por registrarte — solo necesito que verifiques tu dirección de correo electrónico para comenzar.",
+  "Once verified, you'll be able to set up your encryption key and start tracking your finances with full privacy.": "Una vez verificado, podrás configurar tu clave de encriptación y empezar a rastrear tus finanzas con total privacidad.",
+  "Verify Email Address": "Verificar Correo Electrónico",
+  "If you didn't create a Whisper Money account, you can safely ignore this email.": "Si no creaste una cuenta en Whisper Money, puedes ignorar este correo.",
+  "If you're having trouble clicking the \"Verify Email Address\" button, copy and paste the URL below into your web browser:": "Si tienes problemas para hacer clic en el botón \"Verificar Correo Electrónico\", copia y pega la URL de abajo en tu navegador web:",
+  "Welcome to Whisper Money - Your Privacy-First Finance App": "Bienvenido a Whisper Money - Tu App de Finanzas con Privacidad",
+  "Welcome to Whisper Money, :name!": "¡Bienvenido a Whisper Money, :name!",
+  "Hi! I'm Victor, the founder of Whisper Money. I wanted to personally welcome you and thank you for joining us.": "¡Hola! Soy Víctor, el fundador de Whisper Money. Quería darte la bienvenida personalmente y agradecerte por unirte.",
+  "When I started building Whisper Money, I was frustrated with finance apps that wanted to mine my data or use AI to analyze my spending. I just wanted a simple, private way to track my finances - and I figured others might too.": "Cuando empecé a construir Whisper Money, estaba frustrado con las apps de finanzas que querían minar mis datos o usar IA para analizar mis gastos. Solo quería una forma simple y privada de rastrear mis finanzas - y pensé que otros también.",
+  "Your Data is Truly Private": "Tus Datos Son Verdaderamente Privados",
+  "I built Whisper Money with **end-to-end encryption** because I believe your financial data should be yours alone:": "Construí Whisper Money con **encriptación de extremo a extremo** porque creo que tus datos financieros deben ser solo tuyos:",
+  "Your financial data is encrypted with a key that only you control": "Tus datos financieros están encriptados con una clave que solo tú controlas",
+  "I cannot read your transactions, balances, or any personal information (and I don't want to!)": "No puedo leer tus transacciones, balances ni ninguna información personal (¡y no quiero!)",
+  "Your encryption key never leaves your device": "Tu clave de encriptación nunca sale de tu dispositivo",
+  "No AI, No Data Mining": "Sin IA, Sin Minería de Datos",
+  "I don't use AI to analyze your spending or sell insights about your habits. Your financial data stays between you and your spreadsheet-loving self.": "No uso IA para analizar tus gastos ni vender información sobre tus hábitos. Tus datos financieros quedan entre tú y tu afición por las hojas de cálculo.",
+  "What's more, even if I wanted to use it, I couldn't, since you're the only one who has the key to read the data.": "Es más, aunque quisiera usarlos, no podría, ya que tú eres el único que tiene la clave para leer los datos.",
+  "If you have any questions or run into any issues, **just reply to this email**. I personally read every message and I'm here to help!": "Si tienes alguna pregunta o problema, **simplemente responde a este correo**. Leo personalmente cada mensaje y estoy aquí para ayudar.",
+  "Thanks for giving Whisper Money a try. It means a lot to me.": "Gracias por probar Whisper Money. Significa mucho para mí.",
+  "How's Your Experience So Far?": "¿Cómo Va Tu Experiencia Hasta Ahora?",
+  "How's it going, :name?": "¿Cómo va todo, :name?",
+  "Hi! It's Victor here, the founder of Whisper Money. You've been using the app for a few days now, and I'd love to hear how it's working for you.": "¡Hola! Soy Víctor, el fundador de Whisper Money. Llevas unos días usando la app y me encantaría saber cómo te está funcionando.",
+  "A Few Quick Questions": "Unas Preguntas Rápidas",
+  "Is the app meeting your expectations?": "¿La app cumple con tus expectativas?",
+  "Is there anything confusing or frustrating?": "¿Hay algo confuso o frustrante?",
+  "What features would make Whisper Money more useful for you?": "¿Qué funciones harían que Whisper Money fuera más útil para ti?",
+  "As a solo founder, your feedback directly shapes what I build next. I personally read every response and take your suggestions seriously. When you subscribe, you're not just supporting some big corporation - you're helping me continue building something I'm passionate about.": "Como fundador en solitario, tus comentarios moldean directamente lo que construyo a continuación. Leo personalmente cada respuesta y tomo tus sugerencias en serio. Cuando te suscribes, no estás apoyando a una gran corporación, estás ayudándome a seguir construyendo algo que me apasiona.",
+  "Help Me Improve": "Ayúdame a Mejorar",
+  "Whether it's a bug you've found, a feature you'd love to see, or just general thoughts - I want to hear it all. This is my project, and I care deeply about making it work well for you.": "Ya sea un error que hayas encontrado, una función que te gustaría ver, o simplemente pensamientos generales, quiero escucharlo todo. Este es mi proyecto y me importa mucho que funcione bien para ti.",
+  "Just reply to this email with your feedback. No surveys, no forms, just a direct conversation with me.": "Simplemente responde a este correo con tus comentarios. Sin encuestas, sin formularios, solo una conversación directa conmigo.",
+  "Thanks for being part of Whisper Money. It really means a lot.": "Gracias por ser parte de Whisper Money. Realmente significa mucho.",
+  "Let's Import Your Transactions": "Importemos Tus Transacciones",
+  "Need help importing your transactions, :name?": "¿Necesitas ayuda para importar tus transacciones, :name?",
+  "Hi! It's Victor, the founder of Whisper Money. I noticed you've completed your setup but haven't imported any transactions yet. Let me help you get started!": "¡Hola! Soy Víctor, el fundador de Whisper Money. Noté que completaste tu configuración pero aún no has importado transacciones. ¡Déjame ayudarte a empezar!",
+  "How to Import Your Transactions": "Cómo Importar Tus Transacciones",
+  "Step 1: Export from your bank": "Paso 1: Exporta desde tu banco",
+  "Log into your bank's website and look for \"Export\" or \"Download transactions\". Choose CSV format if available.": "Inicia sesión en la web de tu banco y busca \"Exportar\" o \"Descargar transacciones\". Elige formato CSV si está disponible.",
+  "Step 2: Upload to Whisper Money": "Paso 2: Sube a Whisper Money",
+  "Go to your dashboard and click \"Import Transactions\". Select your CSV file and I'll map the columns automatically.": "Ve a tu panel y haz clic en \"Importar Transacciones\". Selecciona tu archivo CSV y mapearé las columnas automáticamente.",
+  "Step 3: Review and confirm": "Paso 3: Revisa y confirma",
+  "Check that everything looks correct and click \"Import\". Your transactions will be encrypted and stored securely.": "Verifica que todo se vea correcto y haz clic en \"Importar\". Tus transacciones serán encriptadas y almacenadas de forma segura.",
+  "Prefer to Start Fresh?": "¿Prefieres Empezar de Cero?",
+  "You can also manually add transactions and account balances. Some users prefer to start tracking from today rather than importing history - that's totally fine! Do whatever works best for you.": "También puedes agregar transacciones y balances de cuentas manualmente. Algunos usuarios prefieren empezar a rastrear desde hoy en lugar de importar historial, ¡eso está totalmente bien! Haz lo que funcione mejor para ti.",
+  "If you're having trouble with the import or need help with your specific bank's format, just reply to this email. I personally handle support and I'm happy to help you figure it out.": "Si tienes problemas con la importación o necesitas ayuda con el formato de tu banco, simplemente responde a este correo. Yo personalmente manejo el soporte y estaré encantado de ayudarte.",
+  "Thanks for giving Whisper Money a try!": "¡Gracias por probar Whisper Money!",
+  "Need Help Getting Started?": "¿Necesitas Ayuda para Empezar?",
+  "Hey :name, is everything okay?": "Hey :name, ¿está todo bien?",
+  "Hi! It's Victor, the founder of Whisper Money. I noticed you signed up but haven't completed your setup yet. I wanted to check in personally and see if something went wrong or if you need any help.": "¡Hola! Soy Víctor, el fundador de Whisper Money. Noté que te registraste pero aún no has completado tu configuración. Quería contactarte personalmente para ver si algo salió mal o si necesitas ayuda.",
+  "I know setting up a new app can be overwhelming, and I want to make sure you have everything you need to get started.": "Sé que configurar una nueva app puede ser abrumador, y quiero asegurarme de que tengas todo lo que necesitas para empezar.",
+  "Common Questions": "Preguntas Frecuentes",
+  "Is the encryption confusing?": "¿La encriptación es confusa?",
+  "No worries! Your encryption key is automatically generated and stored securely on your device. You don't need to remember anything - I've made it as simple as possible.": "¡No te preocupes! Tu clave de encriptación se genera automáticamente y se almacena de forma segura en tu dispositivo. No necesitas recordar nada, lo he hecho lo más simple posible.",
+  "Not sure how to import transactions?": "¿No sabes cómo importar transacciones?",
+  "I support CSV imports from most banks. Just export your transactions and upload them - it takes less than a minute. If your bank format is different, just let me know and I can help.": "Soporto importación CSV de la mayoría de bancos. Solo exporta tus transacciones y súbelas, toma menos de un minuto. Si el formato de tu banco es diferente, avísame y te ayudo.",
+  "Something not working?": "¿Algo no funciona?",
+  "Just reply to this email and let me know what's happening. I personally read every response and will help you get started. This is my project, so I care about making sure it works for you.": "Simplemente responde a este correo y cuéntame qué está pasando. Leo personalmente cada respuesta y te ayudaré a empezar. Este es mi proyecto, así que me importa que funcione para ti.",
+  "Looking forward to hearing from you! And if you decide Whisper Money isn't for you, that's totally fine - but I'd love to know why so I can improve.": "¡Espero tus comentarios! Y si decides que Whisper Money no es para ti, está totalmente bien, pero me encantaría saber por qué para poder mejorar.",
+  "Your Founder Discount - 80% Off First Period": "Tu Descuento de Fundador - 80% de Descuento en el Primer Período",
+  "Welcome aboard, :name!": "¡Bienvenido a bordo, :name!",
+  "Hi! It's Victor, the founder of Whisper Money. I see you've already started importing your transactions - that's awesome! You're well on your way to taking control of your finances while keeping your data private.": "¡Hola! Soy Víctor, el fundador de Whisper Money. Veo que ya has empezado a importar tus transacciones, ¡genial! Estás en camino de tomar el control de tus finanzas mientras mantienes tus datos privados.",
+  "A Special Offer for You": "Una Oferta Especial para Ti",
+  "As one of our early users, I want to offer you a special founder's discount. When you subscribe, you're not just getting a great app - you're directly supporting me as I continue building Whisper Money. Every subscription helps me keep the lights on and build features you actually want.": "Como uno de nuestros primeros usuarios, quiero ofrecerte un descuento especial de fundador. Cuando te suscribes, no solo obtienes una gran app, estás apoyándome directamente mientras sigo construyendo Whisper Money. Cada suscripción me ayuda a mantener el proyecto y construir las funciones que realmente quieres.",
+  "Use code **:code** to get **80% off** your first period (monthly or yearly!)": "Usa el código **:code** para obtener **80% de descuento** en tu primer período (¡mensual o anual!)",
+  "This gives you full access to all Whisper Money features:": "Esto te da acceso completo a todas las funciones de Whisper Money:",
+  "Unlimited transaction imports": "Importaciones de transacciones ilimitadas",
+  "Automated categorization rules": "Reglas de categorización automática",
+  "Multiple account tracking": "Seguimiento de múltiples cuentas",
+  "End-to-end encrypted storage": "Almacenamiento con encriptación de extremo a extremo",
+  "Claim Your Discount": "Reclama Tu Descuento",
+  "This code won't last forever, but more importantly, your support means the world to me. As a solo founder, every subscriber helps me continue building something I'm passionate about.": "Este código no durará para siempre, pero lo más importante es que tu apoyo significa mucho para mí. Como fundador en solitario, cada suscriptor me ayuda a seguir construyendo algo que me apasiona.",
+  "Thanks for being part of this journey with me!": "¡Gracias por ser parte de este viaje conmigo!",
+  "We're sorry to see you go": "Lamentamos que te vayas",
+  "We're sorry to see you go, :name": "Lamentamos que te vayas, :name",
+  "Hi! It's Victor, the founder of Whisper Money. I noticed you've cancelled your subscription, and I wanted to reach out personally.": "¡Hola! Soy Víctor, el fundador de Whisper Money. Noté que cancelaste tu suscripción y quería contactarte personalmente.",
+  "First, thank you for giving Whisper Money a try. I hope it helped you get a better handle on your finances while keeping your data private.": "Primero, gracias por probar Whisper Money. Espero que te haya ayudado a manejar mejor tus finanzas mientras mantenías tus datos privados.",
+  "Before you go...": "Antes de irte...",
+  "If there's anything that didn't work well for you, or if you have suggestions for improvement, I'd genuinely love to hear about it. As a solo founder, your feedback is invaluable in making Whisper Money better.": "Si hay algo que no funcionó bien para ti, o si tienes sugerencias para mejorar, me encantaría saberlo. Como fundador en solitario, tus comentarios son invaluables para mejorar Whisper Money.",
+  "If you'd like to come back, here's a special offer just for you:": "Si te gustaría volver, aquí tienes una oferta especial solo para ti:",
+  "Use code **CONTINUE50** to get **50% off** all current and future payments - works for both monthly and yearly subscriptions.": "Usa el código **CONTINUE50** para obtener **50% de descuento** en todos los pagos actuales y futuros, funciona para suscripciones mensuales y anuales.",
+  "Reactivate Your Subscription": "Reactiva Tu Suscripción",
+  "Your data and settings will be preserved, so you can pick up right where you left off.": "Tus datos y configuración se conservarán, así que puedes retomar donde lo dejaste.",
+  "If you have any questions or just want to chat, simply reply to this email. I read and respond to every message personally.": "Si tienes alguna pregunta o simplemente quieres charlar, responde a este correo. Leo y respondo personalmente cada mensaje.",
+  "Thanks again for being part of this journey!": "¡Gracias de nuevo por ser parte de este viaje!"
+}
diff --git a/lang/es/auth.php b/lang/es/auth.php
new file mode 100644
index 00000000..fa22f7bb
--- /dev/null
+++ b/lang/es/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' => 'Estas credenciales no coinciden con nuestros registros.',
+    'password' => 'La contraseña proporcionada es incorrecta.',
+    'throttle' => 'Demasiados intentos de acceso. Por favor intente de nuevo en :seconds segundos.',
+
+];
diff --git a/lang/es/pagination.php b/lang/es/pagination.php
new file mode 100644
index 00000000..f8f044e1
--- /dev/null
+++ b/lang/es/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; Anterior',
+    'next' => 'Siguiente &raquo;',
+
+];
diff --git a/lang/es/passwords.php b/lang/es/passwords.php
new file mode 100644
index 00000000..0dd0d3f3
--- /dev/null
+++ b/lang/es/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' => 'Tu contraseña ha sido restablecida.',
+    'sent' => 'Te hemos enviado por correo electrónico el enlace para restablecer tu contraseña.',
+    'throttled' => 'Por favor espera antes de intentar de nuevo.',
+    'token' => 'Este token de restablecimiento de contraseña es inválido.',
+    'user' => 'No podemos encontrar un usuario con esa dirección de correo electrónico.',
+
+];
diff --git a/lang/es/validation.php b/lang/es/validation.php
new file mode 100644
index 00000000..55479097
--- /dev/null
+++ b/lang/es/validation.php
@@ -0,0 +1,200 @@
+<?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' => 'El campo :attribute debe ser aceptado.',
+    'accepted_if' => 'El campo :attribute debe ser aceptado cuando :other sea :value.',
+    'active_url' => 'El campo :attribute debe ser una URL válida.',
+    'after' => 'El campo :attribute debe ser una fecha posterior a :date.',
+    'after_or_equal' => 'El campo :attribute debe ser una fecha posterior o igual a :date.',
+    'alpha' => 'El campo :attribute solo debe contener letras.',
+    'alpha_dash' => 'El campo :attribute solo debe contener letras, números, guiones y guiones bajos.',
+    'alpha_num' => 'El campo :attribute solo debe contener letras y números.',
+    'any_of' => 'El campo :attribute es inválido.',
+    'array' => 'El campo :attribute debe ser un arreglo.',
+    'ascii' => 'El campo :attribute solo debe contener caracteres alfanuméricos y símbolos de un byte.',
+    'before' => 'El campo :attribute debe ser una fecha anterior a :date.',
+    'before_or_equal' => 'El campo :attribute debe ser una fecha anterior o igual a :date.',
+    'between' => [
+        'array' => 'El campo :attribute debe tener entre :min y :max elementos.',
+        'file' => 'El campo :attribute debe tener entre :min y :max kilobytes.',
+        'numeric' => 'El campo :attribute debe estar entre :min y :max.',
+        'string' => 'El campo :attribute debe tener entre :min y :max caracteres.',
+    ],
+    'boolean' => 'El campo :attribute debe ser verdadero o falso.',
+    'can' => 'El campo :attribute contiene un valor no autorizado.',
+    'confirmed' => 'La confirmación del campo :attribute no coincide.',
+    'contains' => 'El campo :attribute falta un valor requerido.',
+    'current_password' => 'La contraseña es incorrecta.',
+    'date' => 'El campo :attribute debe ser una fecha válida.',
+    'date_equals' => 'El campo :attribute debe ser una fecha igual a :date.',
+    'date_format' => 'El campo :attribute debe coincidir con el formato :format.',
+    'decimal' => 'El campo :attribute debe tener :decimal lugares decimales.',
+    'declined' => 'El campo :attribute debe ser rechazado.',
+    'declined_if' => 'El campo :attribute debe ser rechazado cuando :other sea :value.',
+    'different' => 'El campo :attribute y :other deben ser diferentes.',
+    'digits' => 'El campo :attribute debe tener :digits dígitos.',
+    'digits_between' => 'El campo :attribute debe tener entre :min y :max dígitos.',
+    'dimensions' => 'El campo :attribute tiene dimensiones de imagen inválidas.',
+    'distinct' => 'El campo :attribute tiene un valor duplicado.',
+    'doesnt_contain' => 'El campo :attribute no debe contener ninguno de los siguientes: :values.',
+    'doesnt_end_with' => 'El campo :attribute no debe terminar con ninguno de los siguientes: :values.',
+    'doesnt_start_with' => 'El campo :attribute no debe comenzar con ninguno de los siguientes: :values.',
+    'email' => 'El campo :attribute debe ser una dirección de correo electrónico válida.',
+    'encoding' => 'El campo :attribute debe estar codificado en :encoding.',
+    'ends_with' => 'El campo :attribute debe terminar con uno de los siguientes: :values.',
+    'enum' => 'El :attribute seleccionado es inválido.',
+    'exists' => 'El :attribute seleccionado es inválido.',
+    'extensions' => 'El campo :attribute debe tener una de las siguientes extensiones: :values.',
+    'file' => 'El campo :attribute debe ser un archivo.',
+    'filled' => 'El campo :attribute debe tener un valor.',
+    'gt' => [
+        'array' => 'El campo :attribute debe tener más de :value elementos.',
+        'file' => 'El campo :attribute debe ser mayor que :value kilobytes.',
+        'numeric' => 'El campo :attribute debe ser mayor que :value.',
+        'string' => 'El campo :attribute debe ser mayor que :value caracteres.',
+    ],
+    'gte' => [
+        'array' => 'El campo :attribute debe tener :value elementos o más.',
+        'file' => 'El campo :attribute debe ser mayor o igual a :value kilobytes.',
+        'numeric' => 'El campo :attribute debe ser mayor o igual a :value.',
+        'string' => 'El campo :attribute debe ser mayor o igual a :value caracteres.',
+    ],
+    'hex_color' => 'El campo :attribute debe ser un color hexadecimal válido.',
+    'image' => 'El campo :attribute debe ser una imagen.',
+    'in' => 'El :attribute seleccionado es inválido.',
+    'in_array' => 'El campo :attribute debe existir en :other.',
+    'in_array_keys' => 'El campo :attribute debe contener al menos una de las siguientes claves: :values.',
+    'integer' => 'El campo :attribute debe ser un número entero.',
+    'ip' => 'El campo :attribute debe ser una dirección IP válida.',
+    'ipv4' => 'El campo :attribute debe ser una dirección IPv4 válida.',
+    'ipv6' => 'El campo :attribute debe ser una dirección IPv6 válida.',
+    'json' => 'El campo :attribute debe ser una cadena JSON válida.',
+    'list' => 'El campo :attribute debe ser una lista.',
+    'lowercase' => 'El campo :attribute debe estar en minúsculas.',
+    'lt' => [
+        'array' => 'El campo :attribute debe tener menos de :value elementos.',
+        'file' => 'El campo :attribute debe ser menor que :value kilobytes.',
+        'numeric' => 'El campo :attribute debe ser menor que :value.',
+        'string' => 'El campo :attribute debe ser menor que :value caracteres.',
+    ],
+    'lte' => [
+        'array' => 'El campo :attribute no debe tener más de :value elementos.',
+        'file' => 'El campo :attribute debe ser menor o igual a :value kilobytes.',
+        'numeric' => 'El campo :attribute debe ser menor o igual a :value.',
+        'string' => 'El campo :attribute debe ser menor o igual a :value caracteres.',
+    ],
+    'mac_address' => 'El campo :attribute debe ser una dirección MAC válida.',
+    'max' => [
+        'array' => 'El campo :attribute no debe tener más de :max elementos.',
+        'file' => 'El campo :attribute no debe ser mayor que :max kilobytes.',
+        'numeric' => 'El campo :attribute no debe ser mayor que :max.',
+        'string' => 'El campo :attribute no debe ser mayor que :max caracteres.',
+    ],
+    'max_digits' => 'El campo :attribute no debe tener más de :max dígitos.',
+    'mimes' => 'El campo :attribute debe ser un archivo de tipo: :values.',
+    'mimetypes' => 'El campo :attribute debe ser un archivo de tipo: :values.',
+    'min' => [
+        'array' => 'El campo :attribute debe tener al menos :min elementos.',
+        'file' => 'El campo :attribute debe tener al menos :min kilobytes.',
+        'numeric' => 'El campo :attribute debe ser al menos :min.',
+        'string' => 'El campo :attribute debe tener al menos :min caracteres.',
+    ],
+    'min_digits' => 'El campo :attribute debe tener al menos :min dígitos.',
+    'missing' => 'El campo :attribute debe estar ausente.',
+    'missing_if' => 'El campo :attribute debe estar ausente cuando :other sea :value.',
+    'missing_unless' => 'El campo :attribute debe estar ausente a menos que :other sea :value.',
+    'missing_with' => 'El campo :attribute debe estar ausente cuando :values esté presente.',
+    'missing_with_all' => 'El campo :attribute debe estar ausente cuando :values estén presentes.',
+    'multiple_of' => 'El campo :attribute debe ser un múltiplo de :value.',
+    'not_in' => 'El :attribute seleccionado es inválido.',
+    'not_regex' => 'El formato del campo :attribute es inválido.',
+    'numeric' => 'El campo :attribute debe ser un número.',
+    'password' => [
+        'letters' => 'El campo :attribute debe contener al menos una letra.',
+        'mixed' => 'El campo :attribute debe contener al menos una letra mayúscula y una minúscula.',
+        'numbers' => 'El campo :attribute debe contener al menos un número.',
+        'symbols' => 'El campo :attribute debe contener al menos un símbolo.',
+        'uncompromised' => 'El :attribute proporcionado ha aparecido en una filtración de datos. Por favor elige un :attribute diferente.',
+    ],
+    'present' => 'El campo :attribute debe estar presente.',
+    'present_if' => 'El campo :attribute debe estar presente cuando :other sea :value.',
+    'present_unless' => 'El campo :attribute debe estar presente a menos que :other sea :value.',
+    'present_with' => 'El campo :attribute debe estar presente cuando :values esté presente.',
+    'present_with_all' => 'El campo :attribute debe estar presente cuando :values estén presentes.',
+    'prohibited' => 'El campo :attribute está prohibido.',
+    'prohibited_if' => 'El campo :attribute está prohibido cuando :other sea :value.',
+    'prohibited_if_accepted' => 'El campo :attribute está prohibido cuando :other sea aceptado.',
+    'prohibited_if_declined' => 'El campo :attribute está prohibido cuando :other sea rechazado.',
+    'prohibited_unless' => 'El campo :attribute está prohibido a menos que :other esté en :values.',
+    'prohibits' => 'El campo :attribute prohíbe que :other esté presente.',
+    'regex' => 'El formato del campo :attribute es inválido.',
+    'required' => 'El campo :attribute es obligatorio.',
+    'required_array_keys' => 'El campo :attribute debe contener entradas para: :values.',
+    'required_if' => 'El campo :attribute es obligatorio cuando :other sea :value.',
+    'required_if_accepted' => 'El campo :attribute es obligatorio cuando :other sea aceptado.',
+    'required_if_declined' => 'El campo :attribute es obligatorio cuando :other sea rechazado.',
+    'required_unless' => 'El campo :attribute es obligatorio a menos que :other esté en :values.',
+    'required_with' => 'El campo :attribute es obligatorio cuando :values esté presente.',
+    'required_with_all' => 'El campo :attribute es obligatorio cuando :values estén presentes.',
+    'required_without' => 'El campo :attribute es obligatorio cuando :values no esté presente.',
+    'required_without_all' => 'El campo :attribute es obligatorio cuando ninguno de :values esté presente.',
+    'same' => 'El campo :attribute debe coincidir con :other.',
+    'size' => [
+        'array' => 'El campo :attribute debe contener :size elementos.',
+        'file' => 'El campo :attribute debe tener :size kilobytes.',
+        'numeric' => 'El campo :attribute debe ser :size.',
+        'string' => 'El campo :attribute debe tener :size caracteres.',
+    ],
+    'starts_with' => 'El campo :attribute debe comenzar con uno de los siguientes: :values.',
+    'string' => 'El campo :attribute debe ser una cadena de texto.',
+    'timezone' => 'El campo :attribute debe ser una zona horaria válida.',
+    'unique' => 'El :attribute ya ha sido tomado.',
+    'uploaded' => 'El :attribute falló al subirse.',
+    'uppercase' => 'El campo :attribute debe estar en mayúsculas.',
+    'url' => 'El campo :attribute debe ser una URL válida.',
+    'ulid' => 'El campo :attribute debe ser un ULID válido.',
+    'uuid' => 'El campo :attribute debe ser un UUID válido.',
+
+    /*
+    |--------------------------------------------------------------------------
+    | 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' => [
+        'attribute-name' => [
+            'rule-name' => 'custom-message',
+        ],
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | 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' => [],
+
+];
diff --git a/phpunit.xml b/phpunit.xml
index 2468e95b..5b52d429 100644
--- a/phpunit.xml
+++ b/phpunit.xml
@@ -33,5 +33,6 @@
         <env name="PULSE_ENABLED" value="false"/>
         <env name="TELESCOPE_ENABLED" value="false"/>
         <env name="NIGHTWATCH_ENABLED" value="false"/>
+        <env name="EMAIL_VERIFICATION_ENABLED" value="true"/>
     </php>
 </phpunit>
diff --git a/resources/js/app.tsx b/resources/js/app.tsx
index 695245da..e0e1edba 100644
--- a/resources/js/app.tsx
+++ b/resources/js/app.tsx
@@ -1,6 +1,6 @@
 import '../css/app.css';
 
-import { createInertiaApp } from '@inertiajs/react';
+import { createInertiaApp, router } from '@inertiajs/react';
 import * as Sentry from '@sentry/react';
 import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
 import {
@@ -19,6 +19,7 @@ import { SyncProvider } from './contexts/sync-context';
 import { initializeTheme } from './hooks/use-appearance';
 import { initializePostHog } from './lib/posthog';
 import type { SharedData } from './types';
+import { setTranslations } from './utils/i18n';
 
 Sentry.init({
     dsn: 'https://47f7a823afae4c2f93ab3159ca7c0a3a@bugsink.whisper.money/2',
@@ -56,6 +57,19 @@ createInertiaApp({
         const initialUser = initialPageProps?.auth?.user ?? null;
         const initialIsAuthenticated = Boolean(initialUser);
 
+        // Initialize translations from server-rendered page data
+        setTranslations(
+            (initialPageProps?.translations as Record<string, string>) ?? {},
+        );
+
+        // Keep translations in sync on every Inertia navigation
+        router.on('navigate', (event) => {
+            const pageProps = event.detail.page.props as SharedData;
+            setTranslations(
+                (pageProps?.translations as Record<string, string>) ?? {},
+            );
+        });
+
         root.render(
             <StrictMode>
                 <EncryptionKeyProvider>
diff --git a/resources/js/components/accounts/account-balance-chart.tsx b/resources/js/components/accounts/account-balance-chart.tsx
index 639d8092..6e802cf9 100644
--- a/resources/js/components/accounts/account-balance-chart.tsx
+++ b/resources/js/components/accounts/account-balance-chart.tsx
@@ -23,7 +23,10 @@ import {
     convertSingleAccountData,
     useChartViews,
 } from '@/hooks/use-chart-views';
+import { useLocale } from '@/hooks/use-locale';
 import { Account } from '@/types/account';
+import { formatMonthFromYearMonth } from '@/utils/date';
+import { __ } from '@/utils/i18n';
 import { format, subMonths } from 'date-fns';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { Bar, BarChart, XAxis } from 'recharts';
@@ -52,21 +55,18 @@ interface AccountBalanceChartProps {
     onBalanceClick?: () => void;
 }
 
-function formatXAxisLabel(value: string): string {
-    const [year, month] = value.split('-');
-    const date = new Date(parseInt(year), parseInt(month) - 1);
-    const monthName = date.toLocaleString('en-US', { month: 'short' });
-    const currentYear = new Date().getFullYear();
-
-    if (parseInt(year) === currentYear) {
-        return monthName;
-    }
-
-    return `${monthName} ${year.slice(-2)}`;
+function createXAxisFormatter(locale: string) {
+    return function formatXAxisLabel(value: string): string {
+        return formatMonthFromYearMonth(value, locale);
+    };
 }
 
-function formatCurrency(value: number, currencyCode: string): string {
-    return new Intl.NumberFormat('en-US', {
+function formatChartCurrency(
+    value: number,
+    currencyCode: string,
+    locale: string,
+): string {
+    return new Intl.NumberFormat(locale, {
         style: 'currency',
         currency: currencyCode,
         minimumFractionDigits: 0,
@@ -104,6 +104,7 @@ export function AccountBalanceChart({
     refreshKey,
     onBalanceClick,
 }: AccountBalanceChartProps) {
+    const locale = useLocale();
     const [balanceData, setBalanceData] = useState<AccountBalanceData | null>(
         null,
     );
@@ -181,12 +182,18 @@ export function AccountBalanceChart({
                     length={{ min: 5, max: 20 }}
                 />
             ),
+
             color: 'var(--color-chart-2)',
         },
     };
 
+    const formatXAxisLabel = useMemo(
+        () => createXAxisFormatter(locale),
+        [locale],
+    );
+
     const valueFormatter = (value: number): string => {
-        return formatCurrency(value, account.currency_code);
+        return formatChartCurrency(value, account.currency_code, locale);
     };
 
     const scrollContainerRef = useRef<HTMLDivElement>(null);
@@ -204,7 +211,7 @@ export function AccountBalanceChart({
         return (
             <Card>
                 <CardHeader>
-                    <CardTitle>Balance evolution</CardTitle>
+                    <CardTitle>{__('Balance evolution')}</CardTitle>
                     <CardDescription>
                         <div className="h-4 w-48 animate-pulse rounded bg-gray-200 dark:bg-gray-700" />
                     </CardDescription>
@@ -220,11 +227,11 @@ export function AccountBalanceChart({
         return (
             <Card>
                 <CardHeader>
-                    <CardTitle>Balance evolution</CardTitle>
+                    <CardTitle>{__('Balance evolution')}</CardTitle>
                 </CardHeader>
                 <CardContent>
                     <div className="flex h-[300px] items-center justify-center text-muted-foreground">
-                        No balance data available
+                        {__('No balance data available')}
                     </div>
                 </CardContent>
             </Card>
@@ -236,7 +243,7 @@ export function AccountBalanceChart({
             <CardHeader>
                 <div className="flex flex-row items-start justify-between">
                     <div className="flex flex-col gap-1 sm:gap-2">
-                        <CardTitle>Balance evolution</CardTitle>
+                        <CardTitle>{__('Balance evolution')}</CardTitle>
                         <button
                             type="button"
                             onClick={onBalanceClick}
@@ -252,14 +259,15 @@ export function AccountBalanceChart({
                         <CardDescription className="flex flex-col gap-1 text-sm">
                             <PercentageTrendIndicator
                                 trend={monthlyTrend?.percentage ?? null}
-                                label="this month"
+                                label={__('this month')}
                                 previousAmount={monthlyTrend?.previousValue}
                                 currentAmount={monthlyTrend?.currentValue}
                                 currencyCode={account.currency_code}
                             />
+
                             <PercentageTrendIndicator
                                 trend={yearlyTrend?.percentage ?? null}
-                                label="for the last 12 months"
+                                label={__('for the last 12 months')}
                                 previousAmount={yearlyTrend?.previousValue}
                                 currentAmount={yearlyTrend?.currentValue}
                                 currencyCode={account.currency_code}
@@ -295,6 +303,7 @@ export function AccountBalanceChart({
                                     axisLine={false}
                                     tickFormatter={formatXAxisLabel}
                                 />
+
                                 <ChartTooltip
                                     content={
                                         <ChartTooltipContent
@@ -303,6 +312,7 @@ export function AccountBalanceChart({
                                         />
                                     }
                                 />
+
                                 <Bar
                                     dataKey="value"
                                     fill="var(--color-chart-2)"
diff --git a/resources/js/components/accounts/account-form.tsx b/resources/js/components/accounts/account-form.tsx
index 7b73500d..e9912dff 100644
--- a/resources/js/components/accounts/account-form.tsx
+++ b/resources/js/components/accounts/account-form.tsx
@@ -15,6 +15,7 @@ import {
     type Bank,
     type CurrencyCode,
 } from '@/types/account';
+import { __ } from '@/utils/i18n';
 import { useCallback, useEffect, useState } from 'react';
 import { BankCombobox } from './bank-combobox';
 import { CustomBankData, CustomBankForm } from './custom-bank-form';
@@ -112,20 +113,20 @@ export function AccountForm({
     return (
         <>
             <div className="space-y-2">
-                <Label htmlFor="display_name">Name</Label>
+                <Label htmlFor="display_name">{__('Name')}</Label>
                 <Input
                     id="display_name"
                     className="mt-1"
                     name="display_name"
                     value={displayName}
                     onChange={(e) => setDisplayName(e.target.value)}
-                    placeholder="Account name"
+                    placeholder={__('Account name')}
                     required
                 />
             </div>
 
             <div className="space-y-2">
-                <Label htmlFor="bank_id">Bank</Label>
+                <Label htmlFor="bank_id">{__('Bank')}</Label>
                 <div className="mt-1">
                     {isCreatingCustomBank ? (
                         <CustomBankForm
@@ -142,6 +143,7 @@ export function AccountForm({
                                 value={selectedBankId ?? ''}
                                 required
                             />
+
                             <BankCombobox
                                 value={selectedBankId}
                                 onValueChange={setSelectedBankId}
@@ -154,7 +156,7 @@ export function AccountForm({
             </div>
 
             <div className="space-y-2">
-                <Label htmlFor="type">Account Type</Label>
+                <Label htmlFor="type">{__('Account Type')}</Label>
                 <div className="mt-1">
                     <Select
                         name="type"
@@ -166,7 +168,9 @@ export function AccountForm({
                         required
                     >
                         <SelectTrigger name="type">
-                            <SelectValue placeholder="Select account type" />
+                            <SelectValue
+                                placeholder={__('Select account type')}
+                            />
                         </SelectTrigger>
                         <SelectContent>
                             {ACCOUNT_TYPES.map((type) => (
@@ -180,14 +184,15 @@ export function AccountForm({
                 {(selectedType === 'investment' ||
                     selectedType === 'retirement') && (
                     <p className="pl-1 text-xs text-muted-foreground">
-                        This account type is for balance tracking only and
-                        doesn't support transactions.
+                        {__(
+                            "This account type is for balance tracking only and\n                        doesn't support transactions.",
+                        )}
                     </p>
                 )}
             </div>
 
             <div className="space-y-2">
-                <Label htmlFor="currency_code">Currency</Label>
+                <Label htmlFor="currency_code">{__('Currency')}</Label>
                 <div className="mt-1">
                     <Select
                         name="currency_code"
@@ -198,7 +203,7 @@ export function AccountForm({
                         required
                     >
                         <SelectTrigger name="currency_code">
-                            <SelectValue placeholder="Select currency" />
+                            <SelectValue placeholder={__('Select currency')} />
                         </SelectTrigger>
                         <SelectContent>
                             {CURRENCY_OPTIONS.map((currency) => (
diff --git a/resources/js/components/accounts/account-list-card.tsx b/resources/js/components/accounts/account-list-card.tsx
index 67b4d27f..c948ea27 100644
--- a/resources/js/components/accounts/account-list-card.tsx
+++ b/resources/js/components/accounts/account-list-card.tsx
@@ -4,6 +4,7 @@ import { EncryptedText } from '@/components/encrypted-text';
 import { AmountDisplay } from '@/components/ui/amount-display';
 import { Card, CardContent } from '@/components/ui/card';
 import { AccountWithMetrics } from '@/hooks/use-dashboard-data';
+import { __ } from '@/utils/i18n';
 import { Link } from '@inertiajs/react';
 import { useState } from 'react';
 import { Line, LineChart, ResponsiveContainer, Tooltip } from 'recharts';
@@ -108,7 +109,7 @@ export function AccountListCard({
                             <AmountTrendIndicator
                                 isPositive={isPositive}
                                 trend={Math.abs(account.diff)}
-                                label="vs last month"
+                                label={__('vs last month')}
                                 className="text-sm"
                                 previousAmount={account.previousBalance}
                                 currentAmount={account.currentBalance}
@@ -147,6 +148,7 @@ export function AccountListCard({
                                         );
                                     }}
                                 />
+
                                 <Line
                                     type="monotone"
                                     dataKey="value"
@@ -163,12 +165,12 @@ export function AccountListCard({
                             variant="secondary"
                             onClick={() => setUpdateBalanceOpen(true)}
                         >
-                            Update balance
+                            {__('Update balance')}
                         </Button>
 
                         <Link href={show.url(account.id)}>
                             <Button className="cursor-pointer" variant="ghost">
-                                Details &rarr;
+                                {__('Details')} &rarr;
                             </Button>
                         </Link>
                     </div>
diff --git a/resources/js/components/accounts/balances-modal.tsx b/resources/js/components/accounts/balances-modal.tsx
index d5535342..531cd935 100644
--- a/resources/js/components/accounts/balances-modal.tsx
+++ b/resources/js/components/accounts/balances-modal.tsx
@@ -34,6 +34,7 @@ import {
     TableRow,
 } from '@/components/ui/table';
 import type { Account, AccountBalance } from '@/types/account';
+import { __ } from '@/utils/i18n';
 import { Pencil, Trash2 } from 'lucide-react';
 import { useCallback, useEffect, useState } from 'react';
 
@@ -218,9 +219,11 @@ export function BalancesModal({
             <Dialog open={open} onOpenChange={onOpenChange}>
                 <DialogContent className="sm:max-w-[600px]">
                     <DialogHeader>
-                        <DialogTitle>Balance History</DialogTitle>
+                        <DialogTitle>{__('Balance History')}</DialogTitle>
                         <DialogDescription>
-                            View and manage balance records for this account.
+                            {__(
+                                'View and manage balance records for this account.',
+                            )}
                         </DialogDescription>
                     </DialogHeader>
 
@@ -235,12 +238,12 @@ export function BalancesModal({
                             <Table>
                                 <TableHeader className="sticky top-0 z-10 bg-background">
                                     <TableRow>
-                                        <TableHead>Date</TableHead>
+                                        <TableHead>{__('Date')}</TableHead>
                                         <TableHead className="text-right">
-                                            Balance
+                                            {__('Balance')}
                                         </TableHead>
                                         <TableHead className="w-[100px] text-right">
-                                            Actions
+                                            {__('Actions')}
                                         </TableHead>
                                     </TableRow>
                                 </TableHeader>
@@ -251,7 +254,7 @@ export function BalancesModal({
                                                 colSpan={3}
                                                 className="h-24 text-center"
                                             >
-                                                Loading...
+                                                {__('Loading...')}
                                             </TableCell>
                                         </TableRow>
                                     ) : balances.length === 0 ? (
@@ -260,7 +263,9 @@ export function BalancesModal({
                                                 colSpan={3}
                                                 className="h-24 text-center"
                                             >
-                                                No balance records found.
+                                                {__(
+                                                    'No balance records found.',
+                                                )}
                                             </TableCell>
                                         </TableRow>
                                     ) : (
@@ -313,7 +318,10 @@ export function BalancesModal({
                     {lastPage > 1 && (
                         <div className="flex items-center justify-between">
                             <span className="text-sm text-muted-foreground">
-                                {total} balance record{total !== 1 ? 's' : ''}
+                                {total}{' '}
+                                {total === 1
+                                    ? __('balance record')
+                                    : __('balance records')}
                             </span>
                             <div className="flex items-center gap-2">
                                 <Button
@@ -324,10 +332,11 @@ export function BalancesModal({
                                     }
                                     disabled={currentPage <= 1 || isLoading}
                                 >
-                                    Previous
+                                    {__('Previous')}
                                 </Button>
                                 <span className="text-sm">
-                                    Page {currentPage} of {lastPage}
+                                    {__('Page')} {currentPage} {__('of')}{' '}
+                                    {lastPage}
                                 </span>
                                 <Button
                                     variant="outline"
@@ -339,7 +348,7 @@ export function BalancesModal({
                                         currentPage >= lastPage || isLoading
                                     }
                                 >
-                                    Next
+                                    {__('Next')}
                                 </Button>
                             </div>
                         </div>
@@ -353,15 +362,15 @@ export function BalancesModal({
             >
                 <DialogContent className="sm:max-w-[400px]">
                     <DialogHeader>
-                        <DialogTitle>Edit Balance</DialogTitle>
+                        <DialogTitle>{__('Edit Balance')}</DialogTitle>
                         <DialogDescription>
-                            Update the balance record.
+                            {__('Update the balance record.')}
                         </DialogDescription>
                     </DialogHeader>
 
                     <form onSubmit={handleEditSubmit} className="space-y-4">
                         <div className="space-y-2">
-                            <Label htmlFor="edit-amount">Balance</Label>
+                            <Label htmlFor="edit-amount">{__('Balance')}</Label>
                             <AmountInput
                                 id="edit-amount"
                                 className="mt-1"
@@ -373,7 +382,7 @@ export function BalancesModal({
                         </div>
 
                         <div className="space-y-2">
-                            <Label htmlFor="edit-date">Date</Label>
+                            <Label htmlFor="edit-date">{__('Date')}</Label>
                             <Input
                                 id="edit-date"
                                 className="mt-1"
@@ -391,10 +400,12 @@ export function BalancesModal({
                                 onClick={() => setEditingBalance(null)}
                                 disabled={isEditSubmitting}
                             >
-                                Cancel
+                                {__('Cancel')}
                             </Button>
                             <Button type="submit" disabled={isEditSubmitting}>
-                                {isEditSubmitting ? 'Saving...' : 'Save'}
+                                {isEditSubmitting
+                                    ? __('Saving...')
+                                    : __('Save')}
                             </Button>
                         </DialogFooter>
                     </form>
@@ -407,22 +418,25 @@ export function BalancesModal({
             >
                 <AlertDialogContent>
                     <AlertDialogHeader>
-                        <AlertDialogTitle>Delete balance</AlertDialogTitle>
+                        <AlertDialogTitle>
+                            {__('Delete balance')}
+                        </AlertDialogTitle>
                         <AlertDialogDescription>
-                            Are you sure you want to delete this balance record?
-                            This action cannot be undone.
+                            {__(
+                                'Are you sure you want to delete this balance record? This action cannot be undone.',
+                            )}
                         </AlertDialogDescription>
                     </AlertDialogHeader>
                     <AlertDialogFooter>
                         <AlertDialogCancel disabled={isDeleting}>
-                            Cancel
+                            {__('Cancel')}
                         </AlertDialogCancel>
                         <AlertDialogAction
                             variant={'destructive'}
                             onClick={handleDelete}
                             disabled={isDeleting}
                         >
-                            {isDeleting ? 'Deleting...' : 'Delete'}
+                            {isDeleting ? __('Deleting...') : __('Delete')}
                         </AlertDialogAction>
                     </AlertDialogFooter>
                 </AlertDialogContent>
diff --git a/resources/js/components/accounts/bank-combobox.tsx b/resources/js/components/accounts/bank-combobox.tsx
index 60af7a85..69939892 100644
--- a/resources/js/components/accounts/bank-combobox.tsx
+++ b/resources/js/components/accounts/bank-combobox.tsx
@@ -16,6 +16,7 @@ import {
 } from '@/components/ui/popover';
 import { cn } from '@/lib/utils';
 import { type Bank } from '@/types/account';
+import { __ } from '@/utils/i18n';
 import { Check, ChevronsUpDown, Plus } from 'lucide-react';
 import { useCallback, useEffect, useState } from 'react';
 
@@ -121,7 +122,7 @@ export function BankCombobox({
                             <span>{selectedBank.name}</span>
                         </div>
                     ) : (
-                        'Select bank...'
+                        __('Select bank...')
                     )}
                     <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                 </Button>
@@ -132,17 +133,18 @@ export function BankCombobox({
             >
                 <Command filter={() => 1}>
                     <CommandInput
-                        placeholder="Search bank..."
+                        placeholder={__('Search bank...')}
                         value={searchQuery}
                         onValueChange={setSearchQuery}
                     />
+
                     <CommandList>
                         <CommandEmpty>
                             {isLoading
-                                ? 'Searching...'
+                                ? __('Searching...')
                                 : searchQuery.length < 3
-                                  ? 'Type at least 3 characters to search'
-                                  : 'No bank found.'}
+                                  ? __('Type at least 3 characters to search')
+                                  : __('No bank found.')}
                         </CommandEmpty>
                         <CommandGroup>
                             {banks.map((bank) => (
@@ -190,7 +192,8 @@ export function BankCombobox({
                                         >
                                             <Plus className="mr-2 h-4 w-4" />
                                             <span>
-                                                Create &quot;{searchQuery}&quot;
+                                                {__('Create "')}
+                                                {searchQuery}&quot;
                                             </span>
                                         </CommandItem>
                                     </CommandGroup>
diff --git a/resources/js/components/accounts/create-account-dialog.tsx b/resources/js/components/accounts/create-account-dialog.tsx
index f3ce708d..bdad62e8 100644
--- a/resources/js/components/accounts/create-account-dialog.tsx
+++ b/resources/js/components/accounts/create-account-dialog.tsx
@@ -17,6 +17,7 @@ import {
 } from '@/components/ui/tooltip';
 import { encrypt, importKey } from '@/lib/crypto';
 import { getStoredKey } from '@/lib/key-storage';
+import { __ } from '@/utils/i18n';
 import { router } from '@inertiajs/react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { AccountForm, AccountFormData } from './account-form';
@@ -163,7 +164,7 @@ export function CreateAccountDialog({ onSuccess }: { onSuccess?: () => void }) {
     }
 
     const createButton = (
-        <Button disabled={!isKeyAvailable}>Create Account</Button>
+        <Button disabled={!isKeyAvailable}>{__('Create Account')}</Button>
     );
 
     return (
@@ -189,9 +190,11 @@ export function CreateAccountDialog({ onSuccess }: { onSuccess?: () => void }) {
             </DialogTrigger>
             <DialogContent hasKeyboard className="sm:max-w-[425px]">
                 <DialogHeader>
-                    <DialogTitle>Create Account</DialogTitle>
+                    <DialogTitle>{__('Create Account')}</DialogTitle>
                     <DialogDescription>
-                        Add a new bank account to track your transactions.
+                        {__(
+                            'Add a new bank account to track your transactions.',
+                        )}
                     </DialogDescription>
                 </DialogHeader>
                 <form onSubmit={handleSubmit} className="space-y-2">
@@ -204,7 +207,7 @@ export function CreateAccountDialog({ onSuccess }: { onSuccess?: () => void }) {
                             onClick={() => setOpen(false)}
                             disabled={isSubmitting}
                         >
-                            Cancel
+                            {__('Cancel')}
                         </Button>
                         <Button
                             type="submit"
diff --git a/resources/js/components/accounts/custom-bank-form.tsx b/resources/js/components/accounts/custom-bank-form.tsx
index fc6a80ec..e8a232be 100644
--- a/resources/js/components/accounts/custom-bank-form.tsx
+++ b/resources/js/components/accounts/custom-bank-form.tsx
@@ -1,6 +1,7 @@
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import { __ } from '@/utils/i18n';
 import { ImagePlus, X } from 'lucide-react';
 import { useCallback, useRef, useState } from 'react';
 
@@ -112,10 +113,10 @@ export function CustomBankForm({
 
             <div className="mt-1 space-y-2 rounded-sm border border-border p-3">
                 <div className="space-y-2">
-                    <Label htmlFor="bank_name">Bank name</Label>
+                    <Label htmlFor="bank_name">{__('Bank name')}</Label>
                     <Input
                         id="bank_name"
-                        placeholder="Bank name"
+                        placeholder={__('Bank name')}
                         defaultValue={defaultName}
                         value={value.name}
                         className="mt-1"
@@ -125,7 +126,7 @@ export function CustomBankForm({
                 </div>
 
                 <div className="space-y-2">
-                    <Label htmlFor="bank_logo">Logo</Label>
+                    <Label htmlFor="bank_logo">{__('Logo')}</Label>
                     <div className="mt-1 flex items-center gap-2">
                         <Input
                             ref={fileInputRef}
@@ -134,6 +135,7 @@ export function CustomBankForm({
                             accept="image/png,image/jpeg,image/webp"
                             onChange={handleFileChange}
                         />
+
                         <button
                             type="button"
                             onClick={() => fileInputRef.current?.click()}
@@ -142,7 +144,7 @@ export function CustomBankForm({
                             {value.logoPreview ? (
                                 <img
                                     src={value.logoPreview}
-                                    alt="Bank logo preview"
+                                    alt={__('Bank logo preview')}
                                     className="size-5 rounded-full object-contain"
                                 />
                             ) : (
@@ -152,8 +154,11 @@ export function CustomBankForm({
                     </div>
                     <div className="text-xs text-muted-foreground">
                         <p>
-                            Square images only (max {MAX_DIMENSIONS}x
-                            {MAX_DIMENSIONS}px) / {MAX_FILE_SIZE / 1024}KB max.
+                            {__('Square images only (max')}
+                            {MAX_DIMENSIONS}x{MAX_DIMENSIONS}
+                            {__('px) /')}
+                            {MAX_FILE_SIZE / 1024}
+                            {__('KB max.')}
                         </p>
                     </div>
                     {error && (
diff --git a/resources/js/components/accounts/delete-account-dialog.tsx b/resources/js/components/accounts/delete-account-dialog.tsx
index b587c234..c2c9fcb9 100644
--- a/resources/js/components/accounts/delete-account-dialog.tsx
+++ b/resources/js/components/accounts/delete-account-dialog.tsx
@@ -11,6 +11,7 @@ import {
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { type Account } from '@/types/account';
+import { __ } from '@/utils/i18n';
 import { Form, router } from '@inertiajs/react';
 import { useState } from 'react';
 
@@ -44,28 +45,30 @@ export function DeleteAccountDialog({
         <Dialog open={open} onOpenChange={handleOpenChange}>
             <DialogContent className="sm:max-w-[425px]">
                 <DialogHeader>
-                    <DialogTitle>Delete Account</DialogTitle>
+                    <DialogTitle>{__('Delete Account')}</DialogTitle>
                     <DialogDescription className="space-y-2">
                         <p>
-                            This action is irreversible. All transactions in
-                            this account will also be permanently deleted.
+                            {__(
+                                'This action is irreversible. All transactions in\n                            this account will also be permanently deleted.',
+                            )}
                         </p>
                         <p className="font-semibold">
-                            Type <span className="text-red-600">DELETE</span> to
-                            confirm.
+                            {__('Type')}
+                            <span className="text-red-600">DELETE</span>
+                            {__('to\n                            confirm.')}
                         </p>
                     </DialogDescription>
                 </DialogHeader>
 
                 <div className="space-y-4">
                     <div className="space-y-2">
-                        <Label htmlFor="confirm">Confirmation</Label>
+                        <Label htmlFor="confirm">{__('Confirmation')}</Label>
                         <Input
                             id="confirm"
                             className="mt-1"
                             value={confirmText}
                             onChange={(e) => setConfirmText(e.target.value)}
-                            placeholder="Type DELETE"
+                            placeholder={__('Type DELETE')}
                             autoComplete="off"
                         />
                     </div>
@@ -89,7 +92,7 @@ export function DeleteAccountDialog({
                                     onClick={() => handleOpenChange(false)}
                                     disabled={processing}
                                 >
-                                    Cancel
+                                    {__('Cancel')}
                                 </Button>
                                 <Button
                                     type="submit"
diff --git a/resources/js/components/accounts/edit-account-dialog.tsx b/resources/js/components/accounts/edit-account-dialog.tsx
index f88bce71..d02b32c3 100644
--- a/resources/js/components/accounts/edit-account-dialog.tsx
+++ b/resources/js/components/accounts/edit-account-dialog.tsx
@@ -11,6 +11,7 @@ import {
 import { decrypt, encrypt, importKey } from '@/lib/crypto';
 import { getStoredKey } from '@/lib/key-storage';
 import type { Account } from '@/types/account';
+import { __ } from '@/utils/i18n';
 import { router } from '@inertiajs/react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { AccountForm, AccountFormData } from './account-form';
@@ -202,9 +203,9 @@ export function EditAccountDialog({
         <Dialog open={open} onOpenChange={onOpenChange}>
             <DialogContent hasKeyboard className="sm:max-w-[425px]">
                 <DialogHeader>
-                    <DialogTitle>Edit Account</DialogTitle>
+                    <DialogTitle>{__('Edit Account')}</DialogTitle>
                     <DialogDescription>
-                        Update the account information.
+                        {__('Update the account information.')}
                     </DialogDescription>
                 </DialogHeader>
                 <form onSubmit={handleSubmit} className="space-y-2">
@@ -229,7 +230,7 @@ export function EditAccountDialog({
                             onClick={() => onOpenChange(false)}
                             disabled={isSubmitting}
                         >
-                            Cancel
+                            {__('Cancel')}
                         </Button>
                         <Button
                             type="submit"
diff --git a/resources/js/components/accounts/import-balances-drawer.tsx b/resources/js/components/accounts/import-balances-drawer.tsx
index 343b462e..4dad6d2f 100644
--- a/resources/js/components/accounts/import-balances-drawer.tsx
+++ b/resources/js/components/accounts/import-balances-drawer.tsx
@@ -27,6 +27,7 @@ import {
 } from '@/types/balance-import';
 import { DateFormat } from '@/types/import';
 import type { UUID } from '@/types/uuid';
+import { __ } from '@/utils/i18n';
 import { Check } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { toast } from 'sonner';
@@ -155,6 +156,7 @@ export function ImportBalancesDrawer({
             'balance_date',
             'f. valor',
         ];
+
         const balancePatterns = [
             'balance',
             'saldo',
@@ -554,6 +556,7 @@ export function ImportBalancesDrawer({
                         onNext={() => moveToStep(BalanceImportStep.UploadFile)}
                     />
                 );
+
             case BalanceImportStep.UploadFile:
                 return (
                     <ImportBalanceStepUpload
@@ -563,6 +566,7 @@ export function ImportBalancesDrawer({
                         onBack={handleBack}
                     />
                 );
+
             case BalanceImportStep.MapColumns:
                 return (
                     <ImportBalanceStepMapping
@@ -578,6 +582,7 @@ export function ImportBalancesDrawer({
                         onBack={handleBack}
                     />
                 );
+
             case BalanceImportStep.Preview:
                 return (
                     <ImportBalanceStepPreview
@@ -588,6 +593,7 @@ export function ImportBalancesDrawer({
                         isImporting={isImporting}
                     />
                 );
+
             default:
                 return null;
         }
@@ -602,7 +608,8 @@ export function ImportBalancesDrawer({
                 <div className="space-y-4">
                     <div className="flex items-center justify-between text-sm text-muted-foreground">
                         <span>
-                            {importProgress} of {importTotal} balances imported
+                            {importProgress} of {importTotal}
+                            {__('balances imported')}
                         </span>
                         <span>{Math.round(percentage)}%</span>
                     </div>
@@ -613,7 +620,8 @@ export function ImportBalancesDrawer({
                     <div className="space-y-3">
                         <div className="flex items-center justify-between">
                             <h3 className="text-sm font-medium text-destructive">
-                                Errors ({importErrors.length})
+                                {__('Errors (')}
+                                {importErrors.length})
                             </h3>
                         </div>
                         <div className="max-h-[300px] overflow-y-auto rounded-lg border">
@@ -621,16 +629,16 @@ export function ImportBalancesDrawer({
                                 <thead className="sticky top-0 bg-muted">
                                     <tr className="border-b">
                                         <th className="px-4 py-2 text-left font-medium">
-                                            Row
+                                            {__('Row')}
                                         </th>
                                         <th className="px-4 py-2 text-left font-medium">
-                                            Date
+                                            {__('Date')}
                                         </th>
                                         <th className="px-4 py-2 text-left font-medium">
-                                            Balance
+                                            {__('Balance')}
                                         </th>
                                         <th className="px-4 py-2 text-left font-medium">
-                                            Error
+                                            {__('Error')}
                                         </th>
                                     </tr>
                                 </thead>
diff --git a/resources/js/components/accounts/import-balances/import-balance-step-account.tsx b/resources/js/components/accounts/import-balances/import-balance-step-account.tsx
index 2e515e92..4f813a10 100644
--- a/resources/js/components/accounts/import-balances/import-balance-step-account.tsx
+++ b/resources/js/components/accounts/import-balances/import-balance-step-account.tsx
@@ -4,6 +4,7 @@ import { Label } from '@/components/ui/label';
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
 import { type Account } from '@/types/account';
 import type { UUID } from '@/types/uuid';
+import { __ } from '@/utils/i18n';
 import { Building2 } from 'lucide-react';
 
 interface ImportBalanceStepAccountProps {
@@ -23,7 +24,7 @@ export function ImportBalanceStepAccount({
         return (
             <div className="flex flex-col items-center justify-center py-8 text-center">
                 <p className="text-sm text-muted-foreground">
-                    No accounts found. Please create an account first.
+                    {__('No accounts found. Please create an account first.')}
                 </p>
             </div>
         );
@@ -46,6 +47,7 @@ export function ImportBalanceStepAccount({
                                 value={account.id}
                                 id={`account-${account.id}`}
                             />
+
                             {account.bank.logo ? (
                                 <img
                                     src={account.bank.logo}
@@ -77,7 +79,7 @@ export function ImportBalanceStepAccount({
 
             <div className="flex justify-end">
                 <Button onClick={onNext} disabled={!selectedAccountId}>
-                    Next
+                    {__('Next')}
                 </Button>
             </div>
         </div>
diff --git a/resources/js/components/accounts/import-balances/import-balance-step-mapping.tsx b/resources/js/components/accounts/import-balances/import-balance-step-mapping.tsx
index d9cb02b3..cadd4e16 100644
--- a/resources/js/components/accounts/import-balances/import-balance-step-mapping.tsx
+++ b/resources/js/components/accounts/import-balances/import-balance-step-mapping.tsx
@@ -15,6 +15,7 @@ import type {
     ParsedRow,
 } from '@/types/balance-import';
 import { DateFormat } from '@/types/import';
+import { __ } from '@/utils/i18n';
 
 interface ImportBalanceStepMappingProps {
     columnOptions: ColumnOption[];
@@ -77,7 +78,8 @@ export function ImportBalanceStepMapping({
             <div className="space-y-4">
                 <div className="space-y-2">
                     <Label htmlFor="date-column">
-                        Balance Date <span className="text-destructive">*</span>
+                        {__('Balance Date')}
+                        <span className="text-destructive">*</span>
                     </Label>
                     <Select
                         value={columnMapping.balance_date || ''}
@@ -86,7 +88,9 @@ export function ImportBalanceStepMapping({
                         }
                     >
                         <SelectTrigger id="date-column">
-                            <SelectValue placeholder="Select date column" />
+                            <SelectValue
+                                placeholder={__('Select date column')}
+                            />
                         </SelectTrigger>
                         <SelectContent>
                             {columnOptions.map((option, index) => (
@@ -105,7 +109,8 @@ export function ImportBalanceStepMapping({
 
                 <div className="space-y-2">
                     <Label htmlFor="balance-column">
-                        Balance <span className="text-destructive">*</span>
+                        {__('Balance')}
+                        <span className="text-destructive">*</span>
                     </Label>
                     <Select
                         value={columnMapping.balance || ''}
@@ -114,7 +119,9 @@ export function ImportBalanceStepMapping({
                         }
                     >
                         <SelectTrigger id="balance-column">
-                            <SelectValue placeholder="Select balance column" />
+                            <SelectValue
+                                placeholder={__('Select balance column')}
+                            />
                         </SelectTrigger>
                         <SelectContent>
                             {columnOptions.map((option, index) => (
@@ -132,7 +139,7 @@ export function ImportBalanceStepMapping({
                 {isValid && previewBalances.length > 0 && (
                     <div className="space-y-4 rounded-lg border bg-muted/30 p-4">
                         <Label className="pl-2 text-xs font-light tracking-widest uppercase opacity-50">
-                            Preview (first 3 rows)
+                            {__('Preview (first 3 rows)')}
                         </Label>
                         <div className="space-y-2 pt-2">
                             {previewBalances.map((balance, index) => (
@@ -154,7 +161,7 @@ export function ImportBalanceStepMapping({
 
                 {!dateFormatDetected && (
                     <div className="space-y-3 rounded-lg border p-4">
-                        <Label>Date Format</Label>
+                        <Label>{__('Date Format')}</Label>
                         <RadioGroup
                             value={dateFormat}
                             onValueChange={(value) =>
@@ -166,11 +173,12 @@ export function ImportBalanceStepMapping({
                                     value={DateFormat.YearMonthDay}
                                     id="format-ymd"
                                 />
+
                                 <Label
                                     htmlFor="format-ymd"
                                     className="cursor-pointer font-normal"
                                 >
-                                    YYYY-MM-DD (e.g., 2024-12-31)
+                                    {__('YYYY-MM-DD (e.g., 2024-12-31)')}
                                 </Label>
                             </div>
                             <div className="flex items-center space-x-2">
@@ -178,11 +186,12 @@ export function ImportBalanceStepMapping({
                                     value={DateFormat.MonthDayYear}
                                     id="format-mdy"
                                 />
+
                                 <Label
                                     htmlFor="format-mdy"
                                     className="cursor-pointer font-normal"
                                 >
-                                    MM-DD-YYYY (e.g., 12-31-2024)
+                                    {__('MM-DD-YYYY (e.g., 12-31-2024)')}
                                 </Label>
                             </div>
                             <div className="flex items-center space-x-2">
@@ -190,11 +199,12 @@ export function ImportBalanceStepMapping({
                                     value={DateFormat.DayMonthYear}
                                     id="format-dmy"
                                 />
+
                                 <Label
                                     htmlFor="format-dmy"
                                     className="cursor-pointer font-normal"
                                 >
-                                    DD-MM-YYYY (e.g., 31-12-2024)
+                                    {__('DD-MM-YYYY (e.g., 31-12-2024)')}
                                 </Label>
                             </div>
                         </RadioGroup>
@@ -204,10 +214,10 @@ export function ImportBalanceStepMapping({
 
             <div className="flex justify-between">
                 <Button variant="outline" onClick={onBack}>
-                    Back
+                    {__('Back')}
                 </Button>
                 <Button onClick={onNext} disabled={!isValid}>
-                    Preview Balances
+                    {__('Preview Balances')}
                 </Button>
             </div>
         </div>
diff --git a/resources/js/components/accounts/import-balances/import-balance-step-preview.tsx b/resources/js/components/accounts/import-balances/import-balance-step-preview.tsx
index 686b6a53..5dff6291 100644
--- a/resources/js/components/accounts/import-balances/import-balance-step-preview.tsx
+++ b/resources/js/components/accounts/import-balances/import-balance-step-preview.tsx
@@ -7,7 +7,10 @@ import {
     TableHeader,
     TableRow,
 } from '@/components/ui/table';
+import { useLocale } from '@/hooks/use-locale';
 import { type ParsedBalance } from '@/types/balance-import';
+import { formatDateMedium } from '@/utils/date';
+import { __ } from '@/utils/i18n';
 
 interface ImportBalanceStepPreviewProps {
     balances: ParsedBalance[];
@@ -24,30 +27,22 @@ export function ImportBalanceStepPreview({
     onBack,
     isImporting,
 }: ImportBalanceStepPreviewProps) {
+    const locale = useLocale();
     const total = balances.length;
 
     const formatBalance = (balance: number): string => {
-        return new Intl.NumberFormat('en-US', {
+        return new Intl.NumberFormat(locale, {
             style: 'currency',
             currency: currencyCode,
         }).format(balance / 100);
     };
 
-    const formatDate = (dateStr: string): string => {
-        const date = new Date(dateStr);
-        return date.toLocaleDateString('en-US', {
-            year: 'numeric',
-            month: 'short',
-            day: 'numeric',
-        });
-    };
-
     return (
         <div className="flex flex-col gap-6">
             <div className="rounded-lg border bg-muted/50 p-4">
                 <p className="text-sm text-muted-foreground">
-                    {total} balance{total !== 1 ? 's' : ''} will be updated or
-                    created.
+                    {total} balance{total !== 1 ? 's' : ''}
+                    {__('will be updated or\n                    created.')}
                 </p>
             </div>
 
@@ -55,9 +50,9 @@ export function ImportBalanceStepPreview({
                 <Table>
                     <TableHeader>
                         <TableRow>
-                            <TableHead>Date</TableHead>
+                            <TableHead>{__('Date')}</TableHead>
                             <TableHead className="text-right">
-                                Balance
+                                {__('Balance')}
                             </TableHead>
                         </TableRow>
                     </TableHeader>
@@ -75,7 +70,10 @@ export function ImportBalanceStepPreview({
                             balances.map((balance, index) => (
                                 <TableRow key={index}>
                                     <TableCell className="whitespace-nowrap">
-                                        {formatDate(balance.balance_date)}
+                                        {formatDateMedium(
+                                            balance.balance_date,
+                                            locale,
+                                        )}
                                     </TableCell>
                                     <TableCell className="text-right font-mono">
                                         {formatBalance(balance.balance)}
@@ -93,7 +91,7 @@ export function ImportBalanceStepPreview({
                     onClick={onBack}
                     disabled={isImporting}
                 >
-                    Back
+                    {__('Back')}
                 </Button>
                 <Button
                     onClick={onConfirm}
diff --git a/resources/js/components/accounts/import-balances/import-balance-step-upload.tsx b/resources/js/components/accounts/import-balances/import-balance-step-upload.tsx
index 20fedb62..9e31c3a2 100644
--- a/resources/js/components/accounts/import-balances/import-balance-step-upload.tsx
+++ b/resources/js/components/accounts/import-balances/import-balance-step-upload.tsx
@@ -1,5 +1,6 @@
 import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
+import { __ } from '@/utils/i18n';
 import { FileSpreadsheet, Upload, X } from 'lucide-react';
 import { useCallback, useState } from 'react';
 
@@ -89,14 +90,15 @@ export function ImportBalanceStepUpload({
                     <>
                         <Upload className="mb-4 h-12 w-12 text-muted-foreground" />
                         <p className="mb-2 text-sm font-medium">
-                            Drop your file here, or click to browse
+                            {__('Drop your file here, or click to browse')}
                         </p>
                         <p className="mb-4 text-xs text-muted-foreground">
-                            Supports CSV, XLS, and XLSX files
+                            {__('Supports CSV, XLS, and XLSX files')}
                         </p>
                         <Button asChild variant="secondary">
                             <label className="cursor-pointer">
-                                Browse Files
+                                {__('Browse Files')}
+
                                 <input
                                     type="file"
                                     className="hidden"
@@ -135,10 +137,10 @@ export function ImportBalanceStepUpload({
 
             <div className="flex justify-between">
                 <Button variant="outline" onClick={onBack}>
-                    Back
+                    {__('Back')}
                 </Button>
                 <Button onClick={onNext} disabled={!file}>
-                    Next
+                    {__('Next')}
                 </Button>
             </div>
         </div>
diff --git a/resources/js/components/accounts/update-balance-dialog.tsx b/resources/js/components/accounts/update-balance-dialog.tsx
index 691c4bf1..8d6d8a47 100644
--- a/resources/js/components/accounts/update-balance-dialog.tsx
+++ b/resources/js/components/accounts/update-balance-dialog.tsx
@@ -15,6 +15,7 @@ import {
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import type { Account, AccountBalance } from '@/types/account';
+import { __ } from '@/utils/i18n';
 import { useEffect, useRef, useState } from 'react';
 
 interface UpdateBalanceDialogProps {
@@ -149,18 +150,20 @@ export function UpdateBalanceDialog({
         <Dialog open={open} onOpenChange={handleOpenChange}>
             <DialogContent hasKeyboard className="sm:max-w-[400px]">
                 <DialogHeader>
-                    <DialogTitle>Update balance</DialogTitle>
+                    <DialogTitle>{__('Update balance')}</DialogTitle>
                     <DialogDescription>
-                        Set the balance for this account on a specific date.
+                        {__(
+                            'Set the balance for this account on a specific date.',
+                        )}
                     </DialogDescription>
                 </DialogHeader>
 
                 <form onSubmit={handleSubmit} className="space-y-4">
                     <div className="space-y-2">
-                        <Label htmlFor="balance-amount">Balance</Label>
+                        <Label htmlFor="balance-amount">{__('Balance')}</Label>
                         {isLoadingLastBalance ? (
                             <div className="flex h-10 items-center rounded-md border border-input bg-muted px-3 text-sm text-muted-foreground">
-                                Loading last balance...
+                                {__('Loading last balance...')}
                             </div>
                         ) : (
                             <AmountInput
@@ -176,7 +179,7 @@ export function UpdateBalanceDialog({
                     </div>
 
                     <div className="space-y-2">
-                        <Label htmlFor="balance-date">Date</Label>
+                        <Label htmlFor="balance-date">{__('Date')}</Label>
                         <Input
                             id="balance-date"
                             type="date"
@@ -198,17 +201,17 @@ export function UpdateBalanceDialog({
                             onClick={() => handleOpenChange(false)}
                             disabled={isSubmitting || isLoadingLastBalance}
                         >
-                            Cancel
+                            {__('Cancel')}
                         </Button>
                         <Button
                             type="submit"
                             disabled={isSubmitting || isLoadingLastBalance}
                         >
                             {isSubmitting
-                                ? 'Saving...'
+                                ? __('Saving...')
                                 : isLoadingLastBalance
-                                  ? 'Loading...'
-                                  : 'Save'}
+                                  ? __('Loading...')
+                                  : __('Save')}
                         </Button>
                     </DialogFooter>
                 </form>
diff --git a/resources/js/components/appearance-dropdown.tsx b/resources/js/components/appearance-dropdown.tsx
index da87bb4a..15375fa3 100644
--- a/resources/js/components/appearance-dropdown.tsx
+++ b/resources/js/components/appearance-dropdown.tsx
@@ -6,6 +6,7 @@ import {
     DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { useAppearance } from '@/hooks/use-appearance';
+import { __ } from '@/utils/i18n';
 import { Monitor, Moon, Sun } from 'lucide-react';
 import { HTMLAttributes } from 'react';
 
@@ -36,20 +37,20 @@ export default function AppearanceToggleDropdown({
                         className="h-9 w-9 rounded-md"
                     >
                         {getCurrentIcon()}
-                        <span className="sr-only">Toggle theme</span>
+                        <span className="sr-only">{__('Toggle theme')}</span>
                     </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="end">
                     <DropdownMenuItem onClick={() => updateAppearance('light')}>
                         <span className="flex items-center gap-2">
                             <Sun className="h-5 w-5" />
-                            Light
+                            {__('Light')}
                         </span>
                     </DropdownMenuItem>
                     <DropdownMenuItem onClick={() => updateAppearance('dark')}>
                         <span className="flex items-center gap-2">
                             <Moon className="h-5 w-5" />
-                            Dark
+                            {__('Dark')}
                         </span>
                     </DropdownMenuItem>
                     <DropdownMenuItem
@@ -57,7 +58,7 @@ export default function AppearanceToggleDropdown({
                     >
                         <span className="flex items-center gap-2">
                             <Monitor className="h-5 w-5" />
-                            System
+                            {__('System')}
                         </span>
                     </DropdownMenuItem>
                 </DropdownMenuContent>
diff --git a/resources/js/components/appearance-tabs.tsx b/resources/js/components/appearance-tabs.tsx
index 1a1e271f..f0b7ce64 100644
--- a/resources/js/components/appearance-tabs.tsx
+++ b/resources/js/components/appearance-tabs.tsx
@@ -1,5 +1,6 @@
 import { Appearance, useAppearance } from '@/hooks/use-appearance';
 import { cn } from '@/lib/utils';
+import { __ } from '@/utils/i18n';
 import { LucideIcon, Monitor, Moon, Sun } from 'lucide-react';
 import { HTMLAttributes } from 'react';
 
@@ -10,9 +11,9 @@ export default function AppearanceToggleTab({
     const { appearance, updateAppearance } = useAppearance();
 
     const tabs: { value: Appearance; icon: LucideIcon; label: string }[] = [
-        { value: 'light', icon: Sun, label: 'Light' },
-        { value: 'dark', icon: Moon, label: 'Dark' },
-        { value: 'system', icon: Monitor, label: 'System' },
+        { value: 'light', icon: Sun, label: __('Light') },
+        { value: 'dark', icon: Moon, label: __('Dark') },
+        { value: 'system', icon: Monitor, label: __('System') },
     ];
 
     return (
diff --git a/resources/js/components/automation-rules/automation-rules-dialog.tsx b/resources/js/components/automation-rules/automation-rules-dialog.tsx
index b8c291d1..86dfb91c 100644
--- a/resources/js/components/automation-rules/automation-rules-dialog.tsx
+++ b/resources/js/components/automation-rules/automation-rules-dialog.tsx
@@ -56,6 +56,7 @@ import { useEncryptionKey } from '@/contexts/encryption-key-context';
 import { type AutomationRule, getRuleActions } from '@/types/automation-rule';
 import { type Category, getCategoryColorClasses } from '@/types/category';
 import { type Label } from '@/types/label';
+import { __ } from '@/utils/i18n';
 
 interface AutomationRulesDialogProps {
     open: boolean;
@@ -81,22 +82,22 @@ function AutomationRuleActions({
                     <Button
                         variant="ghost"
                         className="h-8 w-8 p-0"
-                        aria-label="Actions"
+                        aria-label={__('Actions')}
                     >
-                        <span className="sr-only">Open menu</span>
+                        <span className="sr-only">{__('Open menu')}</span>
                         <MoreHorizontal className="h-4 w-4" />
                     </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="end">
-                    <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                    <DropdownMenuLabel>{__('Actions')}</DropdownMenuLabel>
                     <DropdownMenuItem onClick={() => setEditOpen(true)}>
-                        Edit
+                        {__('Edit')}
                     </DropdownMenuItem>
                     <DropdownMenuItem
                         onClick={() => setDeleteOpen(true)}
                         variant="destructive"
                     >
-                        Delete
+                        {__('Delete')}
                     </DropdownMenuItem>
                 </DropdownMenuContent>
             </DropdownMenu>
@@ -154,15 +155,15 @@ function AutomationRuleRow({
                     </TableRow>
                 </ContextMenuTrigger>
                 <ContextMenuContent>
-                    <ContextMenuLabel>Actions</ContextMenuLabel>
+                    <ContextMenuLabel>{__('Actions')}</ContextMenuLabel>
                     <ContextMenuItem onClick={() => setEditOpen(true)}>
-                        Edit
+                        {__('Edit')}
                     </ContextMenuItem>
                     <ContextMenuItem
                         onClick={() => setDeleteOpen(true)}
                         variant="destructive"
                     >
-                        Delete
+                        {__('Delete')}
                     </ContextMenuItem>
                 </ContextMenuContent>
             </ContextMenu>
@@ -220,7 +221,7 @@ export function AutomationRulesDialog({
     const columns: ColumnDef<AutomationRule>[] = [
         {
             accessorKey: 'priority',
-            header: 'Priority',
+            header: __('Priority'),
             cell: ({ row }) => {
                 return (
                     <div className="font-medium">
@@ -231,7 +232,7 @@ export function AutomationRulesDialog({
         },
         {
             accessorKey: 'title',
-            header: 'Title',
+            header: __('Title'),
             cell: ({ row }) => {
                 return (
                     <div className="font-medium">{row.getValue('title')}</div>
@@ -240,7 +241,7 @@ export function AutomationRulesDialog({
         },
         {
             id: 'actions_display',
-            header: 'Actions',
+            header: __('Actions'),
             cell: ({ row }) => {
                 const rule = row.original;
                 const actions = getRuleActions(rule);
@@ -299,7 +300,7 @@ export function AutomationRulesDialog({
 
                 return (
                     <span className="text-sm text-muted-foreground">
-                        Add note
+                        {__('Add note')}
                     </span>
                 );
             },
@@ -337,17 +338,18 @@ export function AutomationRulesDialog({
         <Dialog open={open} onOpenChange={onOpenChange}>
             <DialogContent className="sm:max-w-3xl">
                 <DialogHeader>
-                    <DialogTitle>Automation Rules</DialogTitle>
+                    <DialogTitle>{__('Automation Rules')}</DialogTitle>
                     <DialogDescription>
-                        Manage your transaction automation rules. Rules will be
-                        applied to categorize transactions automatically.
+                        {__(
+                            'Manage your transaction automation rules. Rules will be applied to categorize transactions automatically.',
+                        )}
                     </DialogDescription>
                 </DialogHeader>
 
                 <div className="space-y-4">
                     <div className="flex items-center justify-between">
                         <Input
-                            placeholder="Filter rules...."
+                            placeholder={__('Filter rules...')}
                             value={
                                 (table
                                     .getColumn('title')
@@ -407,7 +409,7 @@ export function AutomationRulesDialog({
                                             colSpan={columns.length}
                                             className="h-24 text-center"
                                         >
-                                            No automation rules found.
+                                            {__('No automation rules found.')}
                                         </TableCell>
                                     </TableRow>
                                 )}
@@ -417,8 +419,8 @@ export function AutomationRulesDialog({
 
                     <div className="flex items-center justify-end">
                         <div className="text-sm text-muted-foreground">
-                            {table.getFilteredRowModel().rows.length} rule(s)
-                            total.
+                            {table.getFilteredRowModel().rows.length}{' '}
+                            {__('rule(s) total.')}
                         </div>
                     </div>
                 </div>
diff --git a/resources/js/components/automation-rules/create-automation-rule-dialog.tsx b/resources/js/components/automation-rules/create-automation-rule-dialog.tsx
index d6ec528f..4fff5a1c 100644
--- a/resources/js/components/automation-rules/create-automation-rule-dialog.tsx
+++ b/resources/js/components/automation-rules/create-automation-rule-dialog.tsx
@@ -21,6 +21,7 @@ import {
 } from '@/lib/rule-builder-utils';
 import type { Category } from '@/types/category';
 import type { Label } from '@/types/label';
+import { __ } from '@/utils/i18n';
 import { router } from '@inertiajs/react';
 import { useState } from 'react';
 
@@ -124,26 +125,28 @@ export function CreateAutomationRuleDialog({
     return (
         <Dialog open={open} onOpenChange={setOpen}>
             <DialogTrigger asChild>
-                <Button disabled={disabled}>Create Rule</Button>
+                <Button disabled={disabled}>{__('Create Rule')}</Button>
             </DialogTrigger>
             <DialogContent className="overflow-x-hidden sm:max-w-[600px]">
                 <DialogHeader>
-                    <DialogTitle>Create Automation Rule</DialogTitle>
+                    <DialogTitle>{__('Create Automation Rule')}</DialogTitle>
                     <DialogDescription>
-                        Create a rule to automatically categorize transactions
-                        and add labels.
+                        {__(
+                            'Create a rule to automatically categorize transactions\n                        and add labels.',
+                        )}
                     </DialogDescription>
                 </DialogHeader>
                 <form onSubmit={handleSubmit} className="space-y-4">
                     <div className="space-y-2">
-                        <FormLabel htmlFor="title">Title</FormLabel>
+                        <FormLabel htmlFor="title">{__('Title')}</FormLabel>
                         <Input
                             id="title"
                             value={title}
                             onChange={(e) => setTitle(e.target.value)}
-                            placeholder="Rule title"
+                            placeholder={__('Rule title')}
                             required
                         />
+
                         {errors.title && (
                             <p className="text-sm text-red-500">
                                 {errors.title}
@@ -152,7 +155,9 @@ export function CreateAutomationRuleDialog({
                     </div>
 
                     <div className="space-y-2">
-                        <FormLabel htmlFor="priority">Priority</FormLabel>
+                        <FormLabel htmlFor="priority">
+                            {__('Priority')}
+                        </FormLabel>
                         <Input
                             id="priority"
                             type="number"
@@ -162,8 +167,9 @@ export function CreateAutomationRuleDialog({
                             placeholder="10"
                             required
                         />
+
                         <p className="text-xs text-muted-foreground">
-                            Lower numbers execute first
+                            {__('Lower numbers execute first')}
                         </p>
                         {errors.priority && (
                             <p className="text-sm text-red-500">
@@ -179,21 +185,23 @@ export function CreateAutomationRuleDialog({
                     />
 
                     <div className="space-y-4 rounded-md border p-4">
-                        <h4 className="font-medium">Actions</h4>
+                        <h4 className="font-medium">{__('Actions')}</h4>
                         <p className="text-sm text-muted-foreground">
-                            At least one action is required
+                            {__('At least one action is required')}
                         </p>
 
                         <div className="space-y-2">
                             <FormLabel htmlFor="category">
-                                Set Category
+                                {__('Set Category')}
                             </FormLabel>
                             <div className="mt-1">
                                 <CategoryCombobox
                                     value={categoryId}
                                     onValueChange={setCategoryId}
                                     categories={categories}
-                                    placeholder="Select a category (optional)"
+                                    placeholder={__(
+                                        'Select a category (optional)',
+                                    )}
                                     showUncategorized={false}
                                     data-testid="action-category-select"
                                 />
@@ -201,13 +209,13 @@ export function CreateAutomationRuleDialog({
                         </div>
 
                         <div className="space-y-2">
-                            <FormLabel>Add Labels</FormLabel>
+                            <FormLabel>{__('Add Labels')}</FormLabel>
                             <div className="mt-1">
                                 <LabelCombobox
                                     value={selectedLabelIds}
                                     onValueChange={setSelectedLabelIds}
                                     labels={labels}
-                                    placeholder="Select labels (optional)"
+                                    placeholder={__('Select labels (optional)')}
                                     allowCreate={true}
                                 />
                             </div>
@@ -234,7 +242,7 @@ export function CreateAutomationRuleDialog({
                             onClick={() => setOpen(false)}
                             disabled={isSubmitting}
                         >
-                            Cancel
+                            {__('Cancel')}
                         </Button>
                         <Button
                             type="submit"
diff --git a/resources/js/components/automation-rules/delete-automation-rule-dialog.tsx b/resources/js/components/automation-rules/delete-automation-rule-dialog.tsx
index 178d6b87..c0917f94 100644
--- a/resources/js/components/automation-rules/delete-automation-rule-dialog.tsx
+++ b/resources/js/components/automation-rules/delete-automation-rule-dialog.tsx
@@ -10,6 +10,7 @@ import {
     AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
 import type { AutomationRule } from '@/types/automation-rule';
+import { __ } from '@/utils/i18n';
 import { router } from '@inertiajs/react';
 import { useState } from 'react';
 
@@ -47,15 +48,20 @@ export function DeleteAutomationRuleDialog({
         <AlertDialog open={open} onOpenChange={onOpenChange}>
             <AlertDialogContent>
                 <AlertDialogHeader>
-                    <AlertDialogTitle>Delete Automation Rule</AlertDialogTitle>
+                    <AlertDialogTitle>
+                        {__('Delete Automation Rule')}
+                    </AlertDialogTitle>
                     <AlertDialogDescription>
-                        Are you sure you want to delete "{rule.title}"? This
-                        action cannot be undone.
+                        {__('Are you sure you want to delete "')}
+                        {rule.title}
+                        {__(
+                            '"? This\n                        action cannot be undone.',
+                        )}
                     </AlertDialogDescription>
                 </AlertDialogHeader>
                 <AlertDialogFooter>
                     <AlertDialogCancel disabled={isDeleting}>
-                        Cancel
+                        {__('Cancel')}
                     </AlertDialogCancel>
                     <AlertDialogAction
                         onClick={handleDelete}
diff --git a/resources/js/components/automation-rules/edit-automation-rule-dialog.tsx b/resources/js/components/automation-rules/edit-automation-rule-dialog.tsx
index 0d0f70b5..ee123f22 100644
--- a/resources/js/components/automation-rules/edit-automation-rule-dialog.tsx
+++ b/resources/js/components/automation-rules/edit-automation-rule-dialog.tsx
@@ -22,6 +22,7 @@ import {
 import type { AutomationRule } from '@/types/automation-rule';
 import type { Category } from '@/types/category';
 import type { Label as LabelType } from '@/types/label';
+import { __ } from '@/utils/i18n';
 import { router } from '@inertiajs/react';
 import { useEffect, useState } from 'react';
 
@@ -133,22 +134,24 @@ export function EditAutomationRuleDialog({
         <Dialog open={open} onOpenChange={onOpenChange}>
             <DialogContent className="overflow-x-hidden sm:max-w-[600px]">
                 <DialogHeader>
-                    <DialogTitle>Edit Automation Rule</DialogTitle>
+                    <DialogTitle>{__('Edit Automation Rule')}</DialogTitle>
                     <DialogDescription>
-                        Update the rule to automatically categorize transactions
-                        and add labels.
+                        {__(
+                            'Update the rule to automatically categorize transactions\n                        and add labels.',
+                        )}
                     </DialogDescription>
                 </DialogHeader>
                 <form onSubmit={handleSubmit} className="space-y-4">
                     <div className="space-y-2">
-                        <Label htmlFor="title">Title</Label>
+                        <Label htmlFor="title">{__('Title')}</Label>
                         <Input
                             id="title"
                             value={title}
                             onChange={(e) => setTitle(e.target.value)}
-                            placeholder="Rule title"
+                            placeholder={__('Rule title')}
                             required
                         />
+
                         {errors.title && (
                             <p className="text-sm text-red-500">
                                 {errors.title}
@@ -157,7 +160,7 @@ export function EditAutomationRuleDialog({
                     </div>
 
                     <div className="space-y-2">
-                        <Label htmlFor="priority">Priority</Label>
+                        <Label htmlFor="priority">{__('Priority')}</Label>
                         <Input
                             id="priority"
                             type="number"
@@ -167,8 +170,9 @@ export function EditAutomationRuleDialog({
                             placeholder="0"
                             required
                         />
+
                         <p className="text-xs text-muted-foreground">
-                            Lower numbers execute first
+                            {__('Lower numbers execute first')}
                         </p>
                         {errors.priority && (
                             <p className="text-sm text-red-500">
@@ -184,30 +188,32 @@ export function EditAutomationRuleDialog({
                     />
 
                     <div className="space-y-4 rounded-md border p-4">
-                        <h4 className="font-medium">Actions</h4>
+                        <h4 className="font-medium">{__('Actions')}</h4>
                         <p className="text-sm text-muted-foreground">
-                            At least one action is required
+                            {__('At least one action is required')}
                         </p>
 
                         <div className="space-y-2">
-                            <Label htmlFor="category">Set Category</Label>
+                            <Label htmlFor="category">
+                                {__('Set Category')}
+                            </Label>
                             <CategoryCombobox
                                 value={categoryId}
                                 onValueChange={setCategoryId}
                                 categories={categories}
-                                placeholder="Select a category (optional)"
+                                placeholder={__('Select a category (optional)')}
                                 showUncategorized={false}
                                 data-testid="action-category-select"
                             />
                         </div>
 
                         <div className="space-y-2">
-                            <Label>Add Labels</Label>
+                            <Label>{__('Add Labels')}</Label>
                             <LabelCombobox
                                 value={selectedLabelIds}
                                 onValueChange={setSelectedLabelIds}
                                 labels={labels}
-                                placeholder="Select labels (optional)"
+                                placeholder={__('Select labels (optional)')}
                                 allowCreate={true}
                             />
                         </div>
@@ -233,7 +239,7 @@ export function EditAutomationRuleDialog({
                             onClick={() => onOpenChange(false)}
                             disabled={isSubmitting}
                         >
-                            Cancel
+                            {__('Cancel')}
                         </Button>
                         <Button
                             type="submit"
diff --git a/resources/js/components/automation-rules/rule-builder.tsx b/resources/js/components/automation-rules/rule-builder.tsx
index 44830401..50366081 100644
--- a/resources/js/components/automation-rules/rule-builder.tsx
+++ b/resources/js/components/automation-rules/rule-builder.tsx
@@ -19,6 +19,7 @@ import {
     OPERATOR_LABELS,
     type RuleStructure,
 } from '@/lib/rule-builder-utils';
+import { __ } from '@/utils/i18n';
 import { ChevronDown, Plus, Trash2, X } from 'lucide-react';
 import { useEffect, useState } from 'react';
 
@@ -76,7 +77,7 @@ export function RuleBuilder({ value, onChange, error }: RuleBuilderProps) {
     return (
         <div className="space-y-4">
             <div className="flex items-center justify-between">
-                <Label>Conditions</Label>
+                <Label>{__('Conditions')}</Label>
                 {structure.groups.length > 1 && (
                     <Button
                         type="button"
@@ -85,7 +86,7 @@ export function RuleBuilder({ value, onChange, error }: RuleBuilderProps) {
                         onClick={toggleGroupOperator}
                         className="px-1.5 py-4"
                     >
-                        Groups joined by:{' '}
+                        {__('Groups joined by:')}{' '}
                         <Badge variant="secondary" className="ml-2">
                             {structure.groupOperator.toUpperCase()}
                             <ChevronDown className="-mr-1 inline-block h-3 w-3" />
@@ -120,7 +121,9 @@ export function RuleBuilder({ value, onChange, error }: RuleBuilderProps) {
                                                 data-testid="toggle-condition-operator"
                                             >
                                                 <span className="text-sm">
-                                                    Conditions joined by:{' '}
+                                                    {__(
+                                                        'Conditions joined by:',
+                                                    )}{' '}
                                                 </span>
                                                 <Badge
                                                     variant="secondary"
@@ -204,7 +207,7 @@ export function RuleBuilder({ value, onChange, error }: RuleBuilderProps) {
                                 }}
                             >
                                 <Plus className="mr-2 h-4 w-4" />
-                                Add Condition
+                                {__('Add Condition')}
                             </Button>
                         </Card>
                     </div>
@@ -219,7 +222,7 @@ export function RuleBuilder({ value, onChange, error }: RuleBuilderProps) {
                 onClick={addGroup}
             >
                 <Plus className="mr-2 h-4 w-4" />
-                Add Group
+                {__('Add Group')}
             </Button>
 
             {error && <p className="text-sm text-red-500">{error}</p>}
@@ -314,7 +317,7 @@ function ConditionRow({
                     onChange={(e) =>
                         onChange({ ...condition, value: e.target.value })
                     }
-                    placeholder="Value"
+                    placeholder={__('Value')}
                     className="w-full sm:flex-1"
                     step={inputType === 'number' ? 'any' : undefined}
                 />
diff --git a/resources/js/components/breadcrumbs.tsx b/resources/js/components/breadcrumbs.tsx
index ef3aeb13..0fda6d12 100644
--- a/resources/js/components/breadcrumbs.tsx
+++ b/resources/js/components/breadcrumbs.tsx
@@ -7,6 +7,7 @@ import {
     BreadcrumbSeparator,
 } from '@/components/ui/breadcrumb';
 import { type BreadcrumbItem as BreadcrumbItemType } from '@/types';
+import { __ } from '@/utils/i18n';
 import { Link } from '@inertiajs/react';
 import { Fragment } from 'react';
 
@@ -27,12 +28,12 @@ export function Breadcrumbs({
                                     <BreadcrumbItem>
                                         {isLast ? (
                                             <BreadcrumbPage>
-                                                {item.title}
+                                                {__(item.title)}
                                             </BreadcrumbPage>
                                         ) : (
                                             <BreadcrumbLink asChild>
                                                 <Link href={item.href}>
-                                                    {item.title}
+                                                    {__(item.title)}
                                                 </Link>
                                             </BreadcrumbLink>
                                         )}
diff --git a/resources/js/components/budgets/budget-list-card.tsx b/resources/js/components/budgets/budget-list-card.tsx
index d59192a8..22f9d404 100644
--- a/resources/js/components/budgets/budget-list-card.tsx
+++ b/resources/js/components/budgets/budget-list-card.tsx
@@ -9,8 +9,11 @@ import {
     CardTitle,
 } from '@/components/ui/card';
 import { Progress } from '@/components/ui/progress';
+import { useLocale } from '@/hooks/use-locale';
 import { Budget, getBudgetPeriodTypeLabel } from '@/types/budget';
 import { formatCurrency } from '@/utils/currency';
+import { formatDate } from '@/utils/date';
+import { __ } from '@/utils/i18n';
 import { Link } from '@inertiajs/react';
 import { ArrowRight, Calendar } from 'lucide-react';
 import { useMemo } from 'react';
@@ -21,6 +24,7 @@ interface Props {
 }
 
 export function BudgetListCard({ budget, currencyCode }: Props) {
+    const locale = useLocale();
     const currentPeriod = budget.periods?.[0];
 
     const stats = useMemo(() => {
@@ -53,19 +57,13 @@ export function BudgetListCard({ budget, currencyCode }: Props) {
     }, [currentPeriod]);
 
     const periodLabel = useMemo(() => {
-        if (!currentPeriod) return 'No active period';
+        if (!currentPeriod) return __('No active period');
 
-        const start = new Date(currentPeriod.start_date).toLocaleDateString(
-            'en-US',
-            { month: 'short', day: 'numeric' },
-        );
-        const end = new Date(currentPeriod.end_date).toLocaleDateString(
-            'en-US',
-            { month: 'short', day: 'numeric' },
-        );
+        const start = formatDate(currentPeriod.start_date, 'MMM d', locale);
+        const end = formatDate(currentPeriod.end_date, 'MMM d', locale);
 
         return `${start} - ${end}`;
-    }, [currentPeriod]);
+    }, [currentPeriod, locale]);
 
     const statusColor = useMemo(() => {
         if (stats.percentageUsed >= 100)
@@ -78,7 +76,7 @@ export function BudgetListCard({ budget, currencyCode }: Props) {
     const trackingLabel = useMemo(() => {
         if (budget.category) return budget.category.name;
         if (budget.label) return budget.label.name;
-        return 'No tracking';
+        return __('No tracking');
     }, [budget]);
 
     return (
@@ -93,16 +91,19 @@ export function BudgetListCard({ budget, currencyCode }: Props) {
                         </CardDescription>
                     </div>
                     <Badge variant="outline">
-                        {getBudgetPeriodTypeLabel(budget.period_type)}
+                        {__(getBudgetPeriodTypeLabel(budget.period_type))}
                     </Badge>
                 </div>
             </CardHeader>
             <CardContent className="space-y-4">
                 <div className="space-y-2">
                     <div className="flex items-center justify-between text-sm">
-                        <span className="text-muted-foreground">Spent</span>
+                        <span className="text-muted-foreground">
+                            {__('Spent')}
+                        </span>
                         <span className={statusColor}>
-                            {formatCurrency(stats.totalSpent, currencyCode)} of{' '}
+                            {formatCurrency(stats.totalSpent, currencyCode)}{' '}
+                            {__('of')}{' '}
                             {formatCurrency(stats.totalAllocated, currencyCode)}
                         </span>
                     </div>
@@ -110,8 +111,11 @@ export function BudgetListCard({ budget, currencyCode }: Props) {
                         value={Math.min(stats.percentageUsed, 100)}
                         className="h-2"
                     />
+
                     <div className="flex items-center justify-between text-sm">
-                        <span className="text-muted-foreground">Remaining</span>
+                        <span className="text-muted-foreground">
+                            {__('Remaining')}
+                        </span>
                         <span className={statusColor}>
                             {formatCurrency(stats.remaining, currencyCode)}
                         </span>
@@ -120,7 +124,8 @@ export function BudgetListCard({ budget, currencyCode }: Props) {
 
                 <div className="flex items-center justify-between border-t pt-4">
                     <span className="text-sm text-muted-foreground">
-                        Tracking: {trackingLabel}
+                        {__('Tracking:')}
+                        {trackingLabel}
                     </span>
                     <Link href={show({ budget: budget.id }).url}>
                         <Button
@@ -128,7 +133,8 @@ export function BudgetListCard({ budget, currencyCode }: Props) {
                             variant="ghost"
                             size="sm"
                         >
-                            View Details
+                            {__('View Details')}
+
                             <ArrowRight className="ml-2 h-4 w-4" />
                         </Button>
                     </Link>
diff --git a/resources/js/components/budgets/budget-spending-chart.tsx b/resources/js/components/budgets/budget-spending-chart.tsx
index aeabd393..bc54e309 100644
--- a/resources/js/components/budgets/budget-spending-chart.tsx
+++ b/resources/js/components/budgets/budget-spending-chart.tsx
@@ -10,8 +10,11 @@ import {
     ChartTooltip,
     type ChartConfig,
 } from '@/components/ui/chart';
+import { useLocale } from '@/hooks/use-locale';
 import { BudgetPeriod } from '@/types/budget';
 import { formatCurrency } from '@/utils/currency';
+import { formatDate } from '@/utils/date';
+import { __ } from '@/utils/i18n';
 import { useMemo } from 'react';
 import { Area, AreaChart, Line, XAxis } from 'recharts';
 
@@ -40,6 +43,7 @@ interface CustomTooltipProps {
     label?: string | number;
     currencyCode: string;
     hasPreviousPeriod: boolean;
+    locale: string;
 }
 
 function CustomTooltip({
@@ -47,6 +51,7 @@ function CustomTooltip({
     payload,
     currencyCode,
     hasPreviousPeriod,
+    locale,
 }: CustomTooltipProps) {
     if (!active || !payload || !payload.length) {
         return null;
@@ -64,21 +69,21 @@ function CustomTooltip({
             <p className="mb-2 text-sm font-medium">
                 {hasPreviousPeriod
                     ? `Day ${data.day}`
-                    : new Date(data.date).toLocaleDateString('en-US', {
-                          month: 'short',
-                          day: 'numeric',
-                          year: 'numeric',
-                      })}
+                    : formatDate(data.date, 'MMM d, yyyy', locale)}
             </p>
             <div className="space-y-1 text-sm">
                 <div className="flex items-center justify-between gap-8">
-                    <span className="text-muted-foreground">Allocated:</span>
+                    <span className="text-muted-foreground">
+                        {__('Allocated:')}
+                    </span>
                     <span className="font-medium">
                         {formatCurrency(allocated, currencyCode)}
                     </span>
                 </div>
                 <div className="flex items-center justify-between gap-8">
-                    <span className="text-muted-foreground">Spent:</span>
+                    <span className="text-muted-foreground">
+                        {__('Spent:')}
+                    </span>
                     <span className="font-medium">
                         {formatCurrency(spent, currencyCode)}
                     </span>
@@ -86,7 +91,7 @@ function CustomTooltip({
                 {hasPreviousPeriod && data.prevSpent !== undefined && (
                     <div className="flex items-center justify-between gap-8">
                         <span className="text-muted-foreground">
-                            Last period:
+                            {__('Last period:')}
                         </span>
                         <span className="font-medium text-muted-foreground">
                             {formatCurrency(data.prevSpent, currencyCode)}
@@ -95,7 +100,7 @@ function CustomTooltip({
                 )}
                 <div className="border-t pt-1">
                     <div className="flex items-center justify-between gap-8">
-                        <span className="font-medium">Available:</span>
+                        <span className="font-medium">{__('Available:')}</span>
                         <div className="flex items-baseline gap-1">
                             <span className="text-xs text-muted-foreground">
                                 {percentage}% /
@@ -135,6 +140,7 @@ export function BudgetSpendingChart({
     budgetName,
     currencyCode,
 }: Props) {
+    const locale = useLocale();
     const hasPreviousPeriod = !!previousPeriod;
 
     const chartData = useMemo(() => {
@@ -212,23 +218,18 @@ export function BudgetSpendingChart({
     } satisfies ChartConfig;
 
     const periodLabel = useMemo(() => {
-        const start = new Date(currentPeriod.start_date).toLocaleDateString(
-            'en-US',
-            { month: 'short', day: 'numeric' },
-        );
-        const end = new Date(currentPeriod.end_date).toLocaleDateString(
-            'en-US',
-            { month: 'short', day: 'numeric', year: 'numeric' },
-        );
+        const start = formatDate(currentPeriod.start_date, 'MMM d', locale);
+        const end = formatDate(currentPeriod.end_date, 'MMM d, yyyy', locale);
         return `${start} - ${end}`;
-    }, [currentPeriod]);
+    }, [currentPeriod, locale]);
 
     return (
         <Card>
             <CardHeader>
-                <CardTitle>Budget Spending</CardTitle>
+                <CardTitle>{__('Budget Spending')}</CardTitle>
                 <CardDescription>
-                    Tracking spending for {budgetName} · {periodLabel}
+                    {__('Tracking spending for')}
+                    {budgetName} · {periodLabel}
                 </CardDescription>
             </CardHeader>
             <CardContent className="px-6 pt-0">
@@ -254,11 +255,13 @@ export function BudgetSpendingChart({
                                     stopColor="var(--color-spent)"
                                     stopOpacity={0.8}
                                 />
+
                                 <stop
                                     offset="50%"
                                     stopColor="var(--color-spent)"
                                     stopOpacity={0.4}
                                 />
+
                                 <stop
                                     offset="100%"
                                     stopColor="var(--color-spent)"
@@ -277,11 +280,13 @@ export function BudgetSpendingChart({
                                     stopColor="var(--color-allocated)"
                                     stopOpacity={0.4}
                                 />
+
                                 <stop
                                     offset="50%"
                                     stopColor="var(--color-allocated)"
                                     stopOpacity={0.2}
                                 />
+
                                 <stop
                                     offset="100%"
                                     stopColor="var(--color-allocated)"
@@ -298,21 +303,20 @@ export function BudgetSpendingChart({
                                 if (hasPreviousPeriod) {
                                     return `Day ${value}`;
                                 }
-                                const date = new Date(value);
-                                return date.toLocaleDateString('en-US', {
-                                    month: 'short',
-                                    day: 'numeric',
-                                });
+                                return formatDate(value, 'MMM d', locale);
                             }}
                         />
+
                         <ChartTooltip
                             content={
                                 <CustomTooltip
                                     currencyCode={currencyCode}
                                     hasPreviousPeriod={hasPreviousPeriod}
+                                    locale={locale}
                                 />
                             }
                         />
+
                         <Area
                             dataKey="allocated"
                             type="basis"
@@ -323,6 +327,7 @@ export function BudgetSpendingChart({
                             activeDot={{ r: 6 }}
                             fillOpacity={1}
                         />
+
                         <Area
                             dataKey="spent"
                             type="basis"
diff --git a/resources/js/components/budgets/create-budget-dialog.tsx b/resources/js/components/budgets/create-budget-dialog.tsx
index 657e62a9..1f3387ca 100644
--- a/resources/js/components/budgets/create-budget-dialog.tsx
+++ b/resources/js/components/budgets/create-budget-dialog.tsx
@@ -31,6 +31,7 @@ import {
 } from '@/types/budget';
 import { Category } from '@/types/category';
 import { Label } from '@/types/label';
+import { __ } from '@/utils/i18n';
 import { router, usePage } from '@inertiajs/react';
 import { Plus, X } from 'lucide-react';
 import { useState } from 'react';
@@ -125,7 +126,7 @@ export function CreateBudgetDialog({
                     <CardContent className="flex h-full items-center justify-center">
                         <div className="flex flex-row items-center justify-center gap-1">
                             <Plus className="mr-2 h-4 w-4" />
-                            Create Budget
+                            {__('Create Budget')}
                         </div>
                     </CardContent>
                 </Card>
@@ -133,26 +134,32 @@ export function CreateBudgetDialog({
             <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-[600px]">
                 <form onSubmit={handleSubmit}>
                     <DialogHeader>
-                        <DialogTitle>Create Budget</DialogTitle>
+                        <DialogTitle>{__('Create Budget')}</DialogTitle>
                         <DialogDescription>
-                            Set up a spending limit for a category or label.
+                            {__(
+                                'Set up a spending limit for a category or label.',
+                            )}
                         </DialogDescription>
                     </DialogHeader>
 
                     <div className="space-y-6 py-4">
                         <div className="space-y-2">
-                            <UILabel htmlFor="name">Budget Name</UILabel>
+                            <UILabel htmlFor="name">
+                                {__('Budget Name')}
+                            </UILabel>
                             <Input
                                 id="name"
                                 value={name}
                                 onChange={(e) => setName(e.target.value)}
-                                placeholder="e.g., Padel Budget"
+                                placeholder={__('e.g., Padel Budget')}
                                 required
                             />
                         </div>
 
                         <div className="space-y-2">
-                            <UILabel htmlFor="period-type">Period Type</UILabel>
+                            <UILabel htmlFor="period-type">
+                                {__('Period Type')}
+                            </UILabel>
                             <Select
                                 value={periodType}
                                 onValueChange={(value) =>
@@ -175,7 +182,7 @@ export function CreateBudgetDialog({
                         {periodType === 'custom' && (
                             <div className="space-y-2">
                                 <UILabel htmlFor="period-duration">
-                                    Period Duration (days)
+                                    {__('Period Duration (days)')}
                                 </UILabel>
                                 <Input
                                     id="period-duration"
@@ -211,6 +218,7 @@ export function CreateBudgetDialog({
                                     setPeriodStartDay(parseInt(e.target.value))
                                 }
                             />
+
                             <p className="text-sm text-muted-foreground">
                                 {periodType === 'monthly'
                                     ? 'Day of the month when the period starts (1-31)'
@@ -230,7 +238,7 @@ export function CreateBudgetDialog({
 
                             <div className="space-y-2">
                                 <UILabel htmlFor="category">
-                                    Category (Optional)
+                                    {__('Category (Optional)')}
                                 </UILabel>
                                 <div className="flex gap-2">
                                     <Select
@@ -241,7 +249,11 @@ export function CreateBudgetDialog({
                                             id="category"
                                             className="flex-1"
                                         >
-                                            <SelectValue placeholder="Select a category" />
+                                            <SelectValue
+                                                placeholder={__(
+                                                    'Select a category',
+                                                )}
+                                            />
                                         </SelectTrigger>
                                         <SelectContent>
                                             {allCategories.map((category) => (
@@ -271,7 +283,7 @@ export function CreateBudgetDialog({
 
                             <div className="space-y-2">
                                 <UILabel htmlFor="label">
-                                    Label (Optional)
+                                    {__('Label (Optional)')}
                                 </UILabel>
                                 <div className="flex gap-2">
                                     <Select
@@ -284,7 +296,11 @@ export function CreateBudgetDialog({
                                             id="label"
                                             className="flex-1"
                                         >
-                                            <SelectValue placeholder="Select a label" />
+                                            <SelectValue
+                                                placeholder={__(
+                                                    'Select a label',
+                                                )}
+                                            />
                                         </SelectTrigger>
                                         <SelectContent>
                                             {allLabels.map((label) => (
@@ -311,14 +327,15 @@ export function CreateBudgetDialog({
                                     )}
                                 </div>
                                 <p className="text-sm text-muted-foreground">
-                                    Select at least a category or a label to
-                                    track.
+                                    {__(
+                                        'Select at least a category or a label to\n                                    track.',
+                                    )}
                                 </p>
                             </div>
 
                             <div className="space-y-2">
                                 <UILabel htmlFor="allocated-amount">
-                                    Allocated Amount
+                                    {__('Allocated Amount')}
                                 </UILabel>
                                 <AmountInput
                                     id="allocated-amount"
@@ -328,14 +345,17 @@ export function CreateBudgetDialog({
                                     placeholder="0.00"
                                     required
                                 />
+
                                 <p className="text-sm text-muted-foreground">
-                                    How much do you want to budget per period?
+                                    {__(
+                                        'How much do you want to budget per period?',
+                                    )}
                                 </p>
                             </div>
 
                             <div className="space-y-2">
                                 <UILabel htmlFor="rollover">
-                                    Rollover Type
+                                    {__('Rollover Type')}
                                 </UILabel>
                                 <Select
                                     value={rolloverType}
@@ -369,7 +389,7 @@ export function CreateBudgetDialog({
                             variant="outline"
                             onClick={() => setOpen(false)}
                         >
-                            Cancel
+                            {__('Cancel')}
                         </Button>
                         <Button
                             type="submit"
diff --git a/resources/js/components/budgets/delete-budget-dialog.tsx b/resources/js/components/budgets/delete-budget-dialog.tsx
index 3eaeb67f..e7c8300d 100644
--- a/resources/js/components/budgets/delete-budget-dialog.tsx
+++ b/resources/js/components/budgets/delete-budget-dialog.tsx
@@ -10,6 +10,7 @@ import {
     AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
 import { Budget } from '@/types/budget';
+import { __ } from '@/utils/i18n';
 import { router } from '@inertiajs/react';
 import { useState } from 'react';
 
@@ -46,17 +47,18 @@ export function DeleteBudgetDialog({
         <AlertDialog open={open} onOpenChange={onOpenChange}>
             <AlertDialogContent>
                 <AlertDialogHeader>
-                    <AlertDialogTitle>Delete Budget</AlertDialogTitle>
+                    <AlertDialogTitle>{__('Delete Budget')}</AlertDialogTitle>
                     <AlertDialogDescription>
-                        Are you sure you want to delete "{budget.name}"? This
-                        action cannot be undone. All budget periods,
-                        allocations, and transaction assignments will be
-                        permanently removed.
+                        {__('Are you sure you want to delete "')}
+                        {budget.name}
+                        {__(
+                            '"? This\n                        action cannot be undone. All budget periods,\n                        allocations, and transaction assignments will be\n                        permanently removed.',
+                        )}
                     </AlertDialogDescription>
                 </AlertDialogHeader>
                 <AlertDialogFooter>
                     <AlertDialogCancel disabled={isDeleting}>
-                        Cancel
+                        {__('Cancel')}
                     </AlertDialogCancel>
                     <AlertDialogAction
                         onClick={handleDelete}
diff --git a/resources/js/components/budgets/edit-budget-dialog.tsx b/resources/js/components/budgets/edit-budget-dialog.tsx
index 31d8deff..768267af 100644
--- a/resources/js/components/budgets/edit-budget-dialog.tsx
+++ b/resources/js/components/budgets/edit-budget-dialog.tsx
@@ -27,6 +27,7 @@ import {
     ROLLOVER_TYPES,
     RolloverType,
 } from '@/types/budget';
+import { __ } from '@/utils/i18n';
 import { router } from '@inertiajs/react';
 import { useEffect, useState } from 'react';
 
@@ -102,28 +103,31 @@ export function EditBudgetDialog({
             <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-[600px]">
                 <form onSubmit={handleSubmit}>
                     <DialogHeader>
-                        <DialogTitle>Edit Budget</DialogTitle>
+                        <DialogTitle>{__('Edit Budget')}</DialogTitle>
                         <DialogDescription>
-                            Update your budget settings. To change the allocated
-                            amount or tracking, use the budget page directly.
+                            {__(
+                                'Update your budget settings. To change the allocated\n                            amount or tracking, use the budget page directly.',
+                            )}
                         </DialogDescription>
                     </DialogHeader>
 
                     <div className="space-y-4 py-4">
                         <div className="space-y-2">
-                            <Label htmlFor="name">Budget Name</Label>
+                            <Label htmlFor="name">{__('Budget Name')}</Label>
                             <Input
                                 id="name"
                                 value={name}
                                 className="mt-1"
                                 onChange={(e) => setName(e.target.value)}
-                                placeholder="e.g., Monthly Budget"
+                                placeholder={__('e.g., Monthly Budget')}
                                 required
                             />
                         </div>
 
                         <div className="space-y-2">
-                            <Label htmlFor="period-type">Period Type</Label>
+                            <Label htmlFor="period-type">
+                                {__('Period Type')}
+                            </Label>
                             <div className="mt-1">
                                 <Select
                                     value={periodType}
@@ -149,7 +153,7 @@ export function EditBudgetDialog({
                         {periodType === 'custom' && (
                             <div className="space-y-2">
                                 <Label htmlFor="period-duration">
-                                    Period Duration (days)
+                                    {__('Period Duration (days)')}
                                 </Label>
                                 <Input
                                     disabled
@@ -189,6 +193,7 @@ export function EditBudgetDialog({
                                     setPeriodStartDay(parseInt(e.target.value))
                                 }
                             />
+
                             <p className="text-sm text-muted-foreground">
                                 {periodType === 'monthly'
                                     ? 'Day of the month when the period starts (1-31)'
@@ -201,7 +206,7 @@ export function EditBudgetDialog({
 
                         <div className="space-y-2">
                             <Label htmlFor="allocated-amount">
-                                Allocated Amount
+                                {__('Allocated Amount')}
                             </Label>
                             <AmountInput
                                 id="allocated-amount"
@@ -211,14 +216,18 @@ export function EditBudgetDialog({
                                 placeholder="0.00"
                                 required
                             />
+
                             <p className="text-sm text-muted-foreground">
-                                This will update the allocated amount for the
-                                current and future periods.
+                                {__(
+                                    'This will update the allocated amount for the\n                                current and future periods.',
+                                )}
                             </p>
                         </div>
 
                         <div className="space-y-2">
-                            <Label htmlFor="rollover">Rollover Type</Label>
+                            <Label htmlFor="rollover">
+                                {__('Rollover Type')}
+                            </Label>
                             <div className="mt-1">
                                 <Select
                                     disabled
@@ -253,7 +262,7 @@ export function EditBudgetDialog({
                             variant="outline"
                             onClick={() => onOpenChange(false)}
                         >
-                            Cancel
+                            {__('Cancel')}
                         </Button>
                         <Button type="submit" disabled={isSubmitting || !name}>
                             {isSubmitting ? 'Saving...' : 'Save Changes'}
diff --git a/resources/js/components/cashflow/breakdown-card.tsx b/resources/js/components/cashflow/breakdown-card.tsx
index 682131f4..d6d39b60 100644
--- a/resources/js/components/cashflow/breakdown-card.tsx
+++ b/resources/js/components/cashflow/breakdown-card.tsx
@@ -11,6 +11,7 @@ import { Progress } from '@/components/ui/progress';
 import { BreakdownData } from '@/hooks/use-cashflow-data';
 import { cn } from '@/lib/utils';
 import { getCategoryColorClasses } from '@/types/category';
+import { __ } from '@/utils/i18n';
 import * as Icons from 'lucide-react';
 import { LucideIcon } from 'lucide-react';
 
@@ -38,13 +39,16 @@ export function BreakdownCard({
     loading,
     currency = 'USD',
 }: BreakdownCardProps) {
-    const title = type === 'income' ? 'Income Sources' : 'Expense Categories';
+    const title =
+        type === 'income' ? __('Income Sources') : __('Expense Categories');
     const description =
         type === 'income'
-            ? 'Where your money comes from'
-            : 'Where your money goes';
+            ? __('Where your money comes from')
+            : __('Where your money goes');
     const emptyMessage =
-        type === 'income' ? 'No income this period' : 'No expenses this period';
+        type === 'income'
+            ? __('No income this period')
+            : __('No expenses this period');
 
     if (loading) {
         return (
diff --git a/resources/js/components/cashflow/net-cashflow-card.tsx b/resources/js/components/cashflow/net-cashflow-card.tsx
index ccad685a..99b60c8c 100644
--- a/resources/js/components/cashflow/net-cashflow-card.tsx
+++ b/resources/js/components/cashflow/net-cashflow-card.tsx
@@ -8,6 +8,7 @@ import {
 } from '@/components/ui/card';
 import { CashflowSummary } from '@/hooks/use-cashflow-data';
 import { cn } from '@/lib/utils';
+import { __ } from '@/utils/i18n';
 import { ArrowDown, ArrowUp, TrendingDown, TrendingUp } from 'lucide-react';
 
 interface NetCashflowCardProps {
@@ -28,7 +29,7 @@ export function NetCashflowCard({
             <Card>
                 <CardHeader className="pb-2">
                     <CardTitle className="text-sm font-medium">
-                        Net Cashflow
+                        {__('Net Cashflow')}
                     </CardTitle>
                 </CardHeader>
                 <CardContent>
@@ -47,9 +48,9 @@ export function NetCashflowCard({
         <Card>
             <CardHeader className="pb-2">
                 <CardTitle className="text-sm font-medium">
-                    Net Cashflow
+                    {__('Net Cashflow')}
                 </CardTitle>
-                <CardDescription>Income minus expenses</CardDescription>
+                <CardDescription>{__('Income minus expenses')}</CardDescription>
             </CardHeader>
             <CardContent>
                 <div className="flex items-baseline gap-2">
@@ -109,13 +110,15 @@ export function NetCashflowCard({
                             />
                         </span>
                         <span className="text-muted-foreground">
-                            vs last period
+                            {__('vs last period')}
                         </span>
                     </div>
                 )}
                 <div className="mt-3 grid grid-cols-2 gap-4 border-t pt-3">
                     <div>
-                        <p className="text-xs text-muted-foreground">Income</p>
+                        <p className="text-xs text-muted-foreground">
+                            {__('Income')}
+                        </p>
                         <AmountDisplay
                             amountInCents={current.income}
                             currencyCode={currency}
@@ -127,7 +130,7 @@ export function NetCashflowCard({
                     </div>
                     <div>
                         <p className="text-xs text-muted-foreground">
-                            Expenses
+                            {__('Expenses')}
                         </p>
                         <AmountDisplay
                             amountInCents={current.expense}
diff --git a/resources/js/components/cashflow/period-navigation.tsx b/resources/js/components/cashflow/period-navigation.tsx
index cf2ddb89..5536269f 100644
--- a/resources/js/components/cashflow/period-navigation.tsx
+++ b/resources/js/components/cashflow/period-navigation.tsx
@@ -1,5 +1,8 @@
 import { Button } from '@/components/ui/button';
-import { addMonths, format, isSameMonth, subMonths } from 'date-fns';
+import { useLocale } from '@/hooks/use-locale';
+import { formatMonthYear } from '@/utils/date';
+import { __ } from '@/utils/i18n';
+import { addMonths, isSameMonth, subMonths } from 'date-fns';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 
 interface PeriodNavigationProps {
@@ -11,6 +14,7 @@ export function PeriodNavigation({
     currentDate,
     onDateChange,
 }: PeriodNavigationProps) {
+    const locale = useLocale();
     const now = new Date();
     const isCurrentMonth = isSameMonth(currentDate, now);
 
@@ -32,7 +36,7 @@ export function PeriodNavigation({
                 variant="outline"
                 size="icon-sm"
                 onClick={handlePrevMonth}
-                aria-label="Previous month"
+                aria-label={__('Previous month')}
             >
                 <ChevronLeft className="size-4" />
             </Button>
@@ -41,7 +45,7 @@ export function PeriodNavigation({
                 onClick={handleCurrentMonth}
                 className="min-w-[140px] rounded-md px-3 py-1.5 text-center text-sm font-medium hover:bg-accent"
             >
-                {format(currentDate, 'MMMM yyyy')}
+                {formatMonthYear(currentDate, locale)}
             </button>
 
             <Button
@@ -49,7 +53,7 @@ export function PeriodNavigation({
                 size="icon-sm"
                 onClick={handleNextMonth}
                 disabled={isCurrentMonth}
-                aria-label="Next month"
+                aria-label={__('Next month')}
             >
                 <ChevronRight className="size-4" />
             </Button>
diff --git a/resources/js/components/cashflow/savings-rate-card.tsx b/resources/js/components/cashflow/savings-rate-card.tsx
index 918dc000..b5938d76 100644
--- a/resources/js/components/cashflow/savings-rate-card.tsx
+++ b/resources/js/components/cashflow/savings-rate-card.tsx
@@ -7,6 +7,7 @@ import {
 } from '@/components/ui/card';
 import { CashflowSummary } from '@/hooks/use-cashflow-data';
 import { cn } from '@/lib/utils';
+import { __ } from '@/utils/i18n';
 import { TrendingDown, TrendingUp } from 'lucide-react';
 
 interface SavingsRateCardProps {
@@ -25,7 +26,7 @@ export function SavingsRateCard({
             <Card>
                 <CardHeader className="pb-2">
                     <CardTitle className="text-sm font-medium">
-                        Savings Rate
+                        {__('Savings Rate')}
                     </CardTitle>
                 </CardHeader>
                 <CardContent>
@@ -53,9 +54,11 @@ export function SavingsRateCard({
         <Card>
             <CardHeader className="pb-2">
                 <CardTitle className="text-sm font-medium">
-                    Savings Rate
+                    {__('Savings Rate')}
                 </CardTitle>
-                <CardDescription>Percentage of income saved</CardDescription>
+                <CardDescription>
+                    {__('Percentage of income saved')}
+                </CardDescription>
             </CardHeader>
             <CardContent>
                 <div className="flex items-baseline gap-2">
@@ -83,12 +86,12 @@ export function SavingsRateCard({
                 </div>
                 <p className="mt-2 text-xs text-muted-foreground">
                     {current.savings_rate >= 20
-                        ? "Great job! You're saving well."
+                        ? __("Great job! You're saving well.")
                         : current.savings_rate >= 10
-                          ? 'Good progress on your savings.'
+                          ? __('Good progress on your savings.')
                           : current.savings_rate >= 0
-                            ? 'Consider saving more if possible.'
-                            : 'Spending exceeds income this period.'}
+                            ? __('Consider saving more if possible.')
+                            : __('Spending exceeds income this period.')}
                 </p>
             </CardContent>
         </Card>
diff --git a/resources/js/components/categories/create-category-dialog.tsx b/resources/js/components/categories/create-category-dialog.tsx
index f5a68610..8a39ebf7 100644
--- a/resources/js/components/categories/create-category-dialog.tsx
+++ b/resources/js/components/categories/create-category-dialog.tsx
@@ -25,6 +25,7 @@ import {
     CATEGORY_TYPES,
     getCategoryColorClasses,
 } from '@/types/category';
+import { __ } from '@/utils/i18n';
 import { Form } from '@inertiajs/react';
 import * as Icons from 'lucide-react';
 import { Info } from 'lucide-react';
@@ -41,13 +42,15 @@ export function CreateCategoryDialog({
     return (
         <Dialog open={open} onOpenChange={setOpen}>
             <DialogTrigger asChild>
-                <Button>Create Category</Button>
+                <Button>{__('Create Category')}</Button>
             </DialogTrigger>
             <DialogContent hasKeyboard className="sm:max-w-[425px]">
                 <DialogHeader>
-                    <DialogTitle>Create Category</DialogTitle>
+                    <DialogTitle>{__('Create Category')}</DialogTitle>
                     <DialogDescription>
-                        Add a new category to organize your transactions.
+                        {__(
+                            'Add a new category to organize your transactions.',
+                        )}
                     </DialogDescription>
                 </DialogHeader>
                 <Form
@@ -61,13 +64,14 @@ export function CreateCategoryDialog({
                     {({ errors, processing }) => (
                         <>
                             <div className="space-y-2">
-                                <Label htmlFor="name">Name</Label>
+                                <Label htmlFor="name">{__('Name')}</Label>
                                 <Input
                                     id="name"
                                     name="name"
-                                    placeholder="Category name"
+                                    placeholder={__('Category name')}
                                     required
                                 />
+
                                 {errors.name && (
                                     <p className="text-sm text-red-500">
                                         {errors.name}
@@ -76,10 +80,12 @@ export function CreateCategoryDialog({
                             </div>
 
                             <div className="space-y-2">
-                                <Label htmlFor="icon">Icon</Label>
+                                <Label htmlFor="icon">{__('Icon')}</Label>
                                 <Select name="icon" required>
                                     <SelectTrigger>
-                                        <SelectValue placeholder="Select an icon" />
+                                        <SelectValue
+                                            placeholder={__('Select an icon')}
+                                        />
                                     </SelectTrigger>
                                     <SelectContent>
                                         {CATEGORY_ICONS.map((iconName) => {
@@ -108,10 +114,12 @@ export function CreateCategoryDialog({
                             </div>
 
                             <div className="space-y-2">
-                                <Label htmlFor="color">Color</Label>
+                                <Label htmlFor="color">{__('Color')}</Label>
                                 <Select name="color" required>
                                     <SelectTrigger>
-                                        <SelectValue placeholder="Select a color" />
+                                        <SelectValue
+                                            placeholder={__('Select a color')}
+                                        />
                                     </SelectTrigger>
                                     <SelectContent>
                                         {CATEGORY_COLORS.map((color) => {
@@ -126,7 +134,7 @@ export function CreateCategoryDialog({
                                                         <Badge
                                                             className={`${colorClasses.bg} ${colorClasses.text}`}
                                                         >
-                                                            {color}
+                                                            {__(color)}
                                                         </Badge>
                                                     </div>
                                                 </SelectItem>
@@ -142,14 +150,16 @@ export function CreateCategoryDialog({
                             </div>
 
                             <div className="space-y-2">
-                                <Label htmlFor="type">Type</Label>
+                                <Label htmlFor="type">{__('Type')}</Label>
                                 <Select
                                     name="type"
                                     required
                                     onValueChange={setSelectedType}
                                 >
                                     <SelectTrigger>
-                                        <SelectValue placeholder="Select a type" />
+                                        <SelectValue
+                                            placeholder={__('Select a type')}
+                                        />
                                     </SelectTrigger>
                                     <SelectContent>
                                         {CATEGORY_TYPES.map((type) => (
@@ -169,11 +179,9 @@ export function CreateCategoryDialog({
                                     <Alert>
                                         <Info className="h-4 w-4 opacity-50" />
                                         <AlertDescription className="text-sm">
-                                            Transactions in this category will
-                                            not be counted in top expenses or
-                                            income. Transfer categories are
-                                            mainly used for transactions between
-                                            accounts.
+                                            {__(
+                                                'Transactions in this category will\n                                            not be counted in top expenses or\n                                            income. Transfer categories are\n                                            mainly used for transactions between\n                                            accounts.',
+                                            )}
                                         </AlertDescription>
                                     </Alert>
                                 )}
@@ -186,7 +194,7 @@ export function CreateCategoryDialog({
                                     onClick={() => setOpen(false)}
                                     disabled={processing}
                                 >
-                                    Cancel
+                                    {__('Cancel')}
                                 </Button>
                                 <Button type="submit" disabled={processing}>
                                     {processing ? 'Creating...' : 'Create'}
diff --git a/resources/js/components/categories/delete-category-dialog.tsx b/resources/js/components/categories/delete-category-dialog.tsx
index fffe97f5..6c7614fd 100644
--- a/resources/js/components/categories/delete-category-dialog.tsx
+++ b/resources/js/components/categories/delete-category-dialog.tsx
@@ -9,6 +9,7 @@ import {
     DialogTitle,
 } from '@/components/ui/dialog';
 import { type Category } from '@/types/category';
+import { __ } from '@/utils/i18n';
 import { Form } from '@inertiajs/react';
 
 interface DeleteCategoryDialogProps {
@@ -28,10 +29,13 @@ export function DeleteCategoryDialog({
         <Dialog open={open} onOpenChange={onOpenChange}>
             <DialogContent className="sm:max-w-[425px]">
                 <DialogHeader>
-                    <DialogTitle>Delete Category</DialogTitle>
+                    <DialogTitle>{__('Delete Category')}</DialogTitle>
                     <DialogDescription>
-                        Are you sure you want to delete "{category.name}"? This
-                        action cannot be undone.
+                        {__('Are you sure you want to delete "')}
+                        {category.name}
+                        {__(
+                            '"? This\n                        action cannot be undone.',
+                        )}
                     </DialogDescription>
                 </DialogHeader>
                 <Form
@@ -49,7 +53,7 @@ export function DeleteCategoryDialog({
                                 onClick={() => onOpenChange(false)}
                                 disabled={processing}
                             >
-                                Cancel
+                                {__('Cancel')}
                             </Button>
                             <Button
                                 type="submit"
diff --git a/resources/js/components/categories/edit-category-dialog.tsx b/resources/js/components/categories/edit-category-dialog.tsx
index 453ecb36..6a3fd3a9 100644
--- a/resources/js/components/categories/edit-category-dialog.tsx
+++ b/resources/js/components/categories/edit-category-dialog.tsx
@@ -25,6 +25,7 @@ import {
     getCategoryColorClasses,
     type Category,
 } from '@/types/category';
+import { __ } from '@/utils/i18n';
 import { Form } from '@inertiajs/react';
 import * as Icons from 'lucide-react';
 import { Info } from 'lucide-react';
@@ -49,9 +50,9 @@ export function EditCategoryDialog({
         <Dialog open={open} onOpenChange={onOpenChange}>
             <DialogContent hasKeyboard className="sm:max-w-[425px]">
                 <DialogHeader>
-                    <DialogTitle>Edit Category</DialogTitle>
+                    <DialogTitle>{__('Edit Category')}</DialogTitle>
                     <DialogDescription>
-                        Update the category information.
+                        {__('Update the category information.')}
                     </DialogDescription>
                 </DialogHeader>
                 <Form
@@ -65,14 +66,15 @@ export function EditCategoryDialog({
                     {({ errors, processing }) => (
                         <>
                             <div className="space-y-2">
-                                <Label htmlFor="name">Name</Label>
+                                <Label htmlFor="name">{__('Name')}</Label>
                                 <Input
                                     id="name"
                                     name="name"
                                     defaultValue={category.name}
-                                    placeholder="Category name"
+                                    placeholder={__('Category name')}
                                     required
                                 />
+
                                 {errors.name && (
                                     <p className="text-sm text-red-500">
                                         {errors.name}
@@ -81,14 +83,16 @@ export function EditCategoryDialog({
                             </div>
 
                             <div className="space-y-2">
-                                <Label htmlFor="icon">Icon</Label>
+                                <Label htmlFor="icon">{__('Icon')}</Label>
                                 <Select
                                     name="icon"
                                     defaultValue={category.icon}
                                     required
                                 >
                                     <SelectTrigger>
-                                        <SelectValue placeholder="Select an icon" />
+                                        <SelectValue
+                                            placeholder={__('Select an icon')}
+                                        />
                                     </SelectTrigger>
                                     <SelectContent>
                                         {CATEGORY_ICONS.map((iconName) => {
@@ -117,14 +121,16 @@ export function EditCategoryDialog({
                             </div>
 
                             <div className="space-y-2">
-                                <Label htmlFor="color">Color</Label>
+                                <Label htmlFor="color">{__('Color')}</Label>
                                 <Select
                                     name="color"
                                     defaultValue={category.color}
                                     required
                                 >
                                     <SelectTrigger>
-                                        <SelectValue placeholder="Select a color" />
+                                        <SelectValue
+                                            placeholder={__('Select a color')}
+                                        />
                                     </SelectTrigger>
                                     <SelectContent>
                                         {CATEGORY_COLORS.map((color) => {
@@ -139,7 +145,7 @@ export function EditCategoryDialog({
                                                         <Badge
                                                             className={`${colorClasses.bg} ${colorClasses.text}`}
                                                         >
-                                                            {color}
+                                                            {__(color)}
                                                         </Badge>
                                                     </div>
                                                 </SelectItem>
@@ -155,7 +161,7 @@ export function EditCategoryDialog({
                             </div>
 
                             <div className="space-y-2">
-                                <Label htmlFor="type">Type</Label>
+                                <Label htmlFor="type">{__('Type')}</Label>
                                 <Select
                                     name="type"
                                     defaultValue={category.type}
@@ -163,7 +169,9 @@ export function EditCategoryDialog({
                                     onValueChange={setSelectedType}
                                 >
                                     <SelectTrigger>
-                                        <SelectValue placeholder="Select a type" />
+                                        <SelectValue
+                                            placeholder={__('Select a type')}
+                                        />
                                     </SelectTrigger>
                                     <SelectContent>
                                         {CATEGORY_TYPES.map((type) => (
@@ -183,11 +191,9 @@ export function EditCategoryDialog({
                                     <Alert>
                                         <Info className="h-4 w-4 opacity-50" />
                                         <AlertDescription className="text-sm">
-                                            Transactions in this category will
-                                            not be counted in top expenses or
-                                            income. Transfer categories are
-                                            mainly used for transactions between
-                                            accounts.
+                                            {__(
+                                                'Transactions in this category will\n                                            not be counted in top expenses or\n                                            income. Transfer categories are\n                                            mainly used for transactions between\n                                            accounts.',
+                                            )}
                                         </AlertDescription>
                                     </Alert>
                                 )}
@@ -200,10 +206,12 @@ export function EditCategoryDialog({
                                     onClick={() => onOpenChange(false)}
                                     disabled={processing}
                                 >
-                                    Cancel
+                                    {__('Cancel')}
                                 </Button>
                                 <Button type="submit" disabled={processing}>
-                                    {processing ? 'Updating...' : 'Update'}
+                                    {processing
+                                        ? __('Updating...')
+                                        : __('Update')}
                                 </Button>
                             </div>
                         </>
diff --git a/resources/js/components/charts/cashflow-trend-chart.tsx b/resources/js/components/charts/cashflow-trend-chart.tsx
index 007ea76e..36678985 100644
--- a/resources/js/components/charts/cashflow-trend-chart.tsx
+++ b/resources/js/components/charts/cashflow-trend-chart.tsx
@@ -8,7 +8,10 @@ import {
 } from '@/components/ui/card';
 import { ChartConfig, ChartContainer } from '@/components/ui/chart';
 import { TrendDataPoint } from '@/hooks/use-cashflow-data';
+import { useLocale } from '@/hooks/use-locale';
 import { cn } from '@/lib/utils';
+import { formatCompactNumber, formatMonthFromYearMonth } from '@/utils/date';
+import { __ } from '@/utils/i18n';
 import { useEffect, useRef } from 'react';
 import {
     Bar,
@@ -28,21 +31,6 @@ interface CashflowTrendChartProps {
     currency?: string;
 }
 
-const chartConfig: ChartConfig = {
-    income: {
-        label: 'Income',
-        color: 'var(--color-chart-2)',
-    },
-    expense: {
-        label: 'Expenses',
-        color: 'var(--color-chart-5)',
-    },
-    net: {
-        label: 'Net',
-        color: 'var(--color-chart-1)',
-    },
-};
-
 interface TooltipPayloadItem {
     dataKey?: string;
     value?: number;
@@ -57,24 +45,13 @@ interface CustomTooltipProps {
     currency?: string;
 }
 
-function formatMonth(yearMonth: string): string {
-    const [year, month] = yearMonth.split('-');
-    const date = new Date(parseInt(year), parseInt(month) - 1);
-    const isCurrentYear = date.getFullYear() === new Date().getFullYear();
-
-    return date.toLocaleDateString(
-        'en-US',
-        isCurrentYear
-            ? { month: 'short' }
-            : { year: '2-digit', month: 'short' },
-    );
-}
-
 function CustomTooltip({
     active,
     payload,
     currency = 'USD',
 }: CustomTooltipProps) {
+    const locale = useLocale();
+
     if (!active || !payload?.length) return null;
 
     const data = payload[0].payload;
@@ -82,12 +59,14 @@ function CustomTooltip({
 
     return (
         <div className="rounded-lg border border-border/50 bg-background px-3 py-2 text-xs shadow-xl">
-            <div className="mb-2 font-medium">{formatMonth(data.month)}</div>
+            <div className="mb-2 font-medium">
+                {formatMonthFromYearMonth(data.month, locale)}
+            </div>
             <div className="space-y-1">
                 <div className="flex items-center justify-between gap-4">
                     <span className="flex items-center gap-2">
                         <span className="size-2 rounded-full bg-[var(--color-chart-2)]" />
-                        Income
+                        {__('Income')}
                     </span>
                     <AmountDisplay
                         amountInCents={data.income}
@@ -100,7 +79,7 @@ function CustomTooltip({
                 <div className="flex items-center justify-between gap-4">
                     <span className="flex items-center gap-2">
                         <span className="size-2 rounded-full bg-[var(--color-chart-5)]" />
-                        Expenses
+                        {__('Expenses')}
                     </span>
                     <AmountDisplay
                         amountInCents={data.expense}
@@ -113,7 +92,7 @@ function CustomTooltip({
                 <div className="flex items-center justify-between gap-4 border-t pt-1">
                     <span className="flex items-center gap-2">
                         <span className="size-2 rounded-full bg-[var(--color-chart-1)]" />
-                        Net
+                        {__('Net')}
                     </span>
                     <AmountDisplay
                         amountInCents={data.net}
@@ -137,9 +116,25 @@ export function CashflowTrendChart({
     className,
     currency = 'USD',
 }: CashflowTrendChartProps) {
+    const locale = useLocale();
     const scrollContainerRef = useRef<HTMLDivElement>(null);
     const minChartWidth = data.length * 60;
 
+    const chartConfig: ChartConfig = {
+        income: {
+            label: __('Income'),
+            color: 'var(--color-chart-2)',
+        },
+        expense: {
+            label: __('Expenses'),
+            color: 'var(--color-chart-5)',
+        },
+        net: {
+            label: __('Net'),
+            color: 'var(--color-chart-1)',
+        },
+    };
+
     useEffect(() => {
         if (scrollContainerRef.current) {
             scrollContainerRef.current.scrollLeft =
@@ -151,7 +146,9 @@ export function CashflowTrendChart({
         return (
             <Card className={className}>
                 <CardHeader>
-                    <CardTitle className="text-base">Cashflow Trend</CardTitle>
+                    <CardTitle className="text-base">
+                        {__('Cashflow Trend')}
+                    </CardTitle>
                 </CardHeader>
                 <CardContent>
                     <div className="h-[250px] animate-pulse rounded bg-gray-200 dark:bg-gray-700" />
@@ -163,10 +160,13 @@ export function CashflowTrendChart({
     return (
         <Card className={className}>
             <CardHeader className="gap-1 pb-4">
-                <CardTitle className="text-base">Cashflow Trend</CardTitle>
+                <CardTitle className="text-base">
+                    {__('Cashflow Trend')}
+                </CardTitle>
                 <CardDescription>
-                    Monthly income, expenses, and net cashflow over the last 12
-                    months
+                    {__(
+                        'Monthly income, expenses, and net cashflow over the last 12 months',
+                    )}
                 </CardDescription>
             </CardHeader>
             <CardContent>
@@ -183,33 +183,36 @@ export function CashflowTrendChart({
                                 stroke="var(--color-border)"
                                 opacity={0.3}
                             />
+
                             <XAxis
                                 dataKey="month"
                                 tickLine={false}
                                 tickMargin={10}
                                 axisLine={false}
-                                tickFormatter={formatMonth}
+                                tickFormatter={(value) =>
+                                    formatMonthFromYearMonth(value, locale)
+                                }
                             />
+
                             <YAxis
                                 tickLine={false}
                                 axisLine={false}
-                                tickFormatter={(value: number) => {
-                                    return new Intl.NumberFormat('en-US', {
-                                        notation: 'compact',
-                                        compactDisplay: 'short',
-                                        style: 'currency',
-                                        currency: currency,
-                                        minimumFractionDigits: 0,
-                                        maximumFractionDigits: 0,
-                                    }).format(value / 100);
-                                }}
+                                tickFormatter={(value: number) =>
+                                    formatCompactNumber(
+                                        value / 100,
+                                        locale,
+                                        currency,
+                                    )
+                                }
                                 width={60}
                             />
+
                             <ReferenceLine
                                 y={0}
                                 stroke="var(--color-border)"
                                 strokeDasharray="3 3"
                             />
+
                             <Tooltip
                                 content={<CustomTooltip currency={currency} />}
                                 cursor={{
@@ -217,6 +220,7 @@ export function CashflowTrendChart({
                                     opacity: 0.3,
                                 }}
                             />
+
                             <Bar
                                 dataKey="income"
                                 fill="var(--color-chart-2)"
@@ -224,6 +228,7 @@ export function CashflowTrendChart({
                                 stackId="a"
                                 name="Income"
                             />
+
                             <Bar
                                 dataKey="expense"
                                 fill="var(--color-chart-5)"
@@ -231,6 +236,7 @@ export function CashflowTrendChart({
                                 stackId="b"
                                 name="Expenses"
                             />
+
                             <Line
                                 type="monotone"
                                 dataKey="net"
@@ -250,15 +256,15 @@ export function CashflowTrendChart({
                 <div className="mt-4 flex items-center justify-center gap-6 text-xs">
                     <div className="flex items-center gap-2">
                         <span className="size-3 rounded bg-[var(--color-chart-2)]" />
-                        <span>Income</span>
+                        <span>{__('Income')}</span>
                     </div>
                     <div className="flex items-center gap-2">
                         <span className="size-3 rounded bg-[var(--color-chart-5)]" />
-                        <span>Expenses</span>
+                        <span>{__('Expenses')}</span>
                     </div>
                     <div className="flex items-center gap-2">
                         <span className="size-3 rounded-full bg-[var(--color-chart-1)]" />
-                        <span>Net</span>
+                        <span>{__('Net')}</span>
                     </div>
                 </div>
             </CardContent>
diff --git a/resources/js/components/charts/mom-chart.tsx b/resources/js/components/charts/mom-chart.tsx
index 843a939b..eac8f20b 100644
--- a/resources/js/components/charts/mom-chart.tsx
+++ b/resources/js/components/charts/mom-chart.tsx
@@ -2,6 +2,7 @@ import { AmountDisplay } from '@/components/ui/amount-display';
 import { ChartConfig, ChartContainer } from '@/components/ui/chart';
 import { ChangeDataPoint } from '@/lib/chart-calculations';
 import { cn } from '@/lib/utils';
+import { __ } from '@/utils/i18n';
 import { useEffect, useRef } from 'react';
 import {
     Bar,
@@ -54,7 +55,7 @@ function CustomTooltip({ active, payload, currencyCode }: CustomTooltipProps) {
         <div className="rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl">
             <div className="font-medium">{data.month}</div>
             <div className="mt-1 flex items-center justify-between gap-4">
-                <span className="text-muted-foreground">Change</span>
+                <span className="text-muted-foreground">{__('Change')}</span>
                 <span
                     className={cn(
                         'font-mono font-medium tabular-nums',
@@ -114,6 +115,7 @@ export function MoMChart({
                         axisLine={false}
                         tickFormatter={xAxisFormatter}
                     />
+
                     <YAxis
                         tickLine={false}
                         axisLine={false}
@@ -125,15 +127,18 @@ export function MoMChart({
                         }}
                         width={50}
                     />
+
                     <ReferenceLine
                         y={0}
                         stroke="var(--color-border)"
                         strokeDasharray="3 3"
                     />
+
                     <Tooltip
                         content={<CustomTooltip currencyCode={currencyCode} />}
                         cursor={{ fill: 'var(--color-muted)', opacity: 0.3 }}
                     />
+
                     <Bar dataKey="displayValue" radius={[4, 4, 0, 0]}>
                         {chartData.map((entry, index) => {
                             const value = entry.displayValue;
diff --git a/resources/js/components/charts/mom-percent-chart.tsx b/resources/js/components/charts/mom-percent-chart.tsx
index 04adeeb1..a90f073a 100644
--- a/resources/js/components/charts/mom-percent-chart.tsx
+++ b/resources/js/components/charts/mom-percent-chart.tsx
@@ -1,6 +1,7 @@
 import { ChartConfig, ChartContainer } from '@/components/ui/chart';
 import { formatPercentValue, PercentDataPoint } from '@/lib/chart-calculations';
 import { cn } from '@/lib/utils';
+import { __ } from '@/utils/i18n';
 import { useEffect, useRef } from 'react';
 import {
     Bar,
@@ -51,7 +52,7 @@ function CustomTooltip({ active, payload }: CustomTooltipProps) {
         <div className="rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl">
             <div className="font-medium">{data.month}</div>
             <div className="mt-1 flex items-center justify-between gap-4">
-                <span className="text-muted-foreground">Change</span>
+                <span className="text-muted-foreground">{__('Change')}</span>
                 <span
                     className={cn(
                         'font-mono font-medium tabular-nums',
@@ -105,6 +106,7 @@ export function MoMPercentChart({
                         axisLine={false}
                         tickFormatter={xAxisFormatter}
                     />
+
                     <YAxis
                         tickLine={false}
                         axisLine={false}
@@ -113,15 +115,18 @@ export function MoMPercentChart({
                         }
                         width={50}
                     />
+
                     <ReferenceLine
                         y={0}
                         stroke="var(--color-border)"
                         strokeDasharray="3 3"
                     />
+
                     <Tooltip
                         content={<CustomTooltip />}
                         cursor={{ fill: 'var(--color-muted)', opacity: 0.3 }}
                     />
+
                     <Bar dataKey="displayValue" radius={[4, 4, 0, 0]}>
                         {chartData.map((entry, index) => {
                             const value = entry.displayValue;
diff --git a/resources/js/components/charts/sankey-chart.tsx b/resources/js/components/charts/sankey-chart.tsx
index 3dd71c6e..63ae061e 100644
--- a/resources/js/components/charts/sankey-chart.tsx
+++ b/resources/js/components/charts/sankey-chart.tsx
@@ -12,6 +12,7 @@ import {
 } from '@/lib/sankey-utils';
 import { cn } from '@/lib/utils';
 import { Category } from '@/types/category';
+import { __ } from '@/utils/i18n';
 import { useMemo, useState } from 'react';
 
 interface SankeyChartProps {
@@ -75,10 +76,11 @@ function OtherCategoriesBreakdown({
             <div className="space-y-3">
                 <div>
                     <h4 className="text-sm font-medium">
-                        Other Categories ({categories.length})
+                        {__('Other Categories (')}
+                        {categories.length})
                     </h4>
                     <p className="text-xs text-muted-foreground">
-                        Categories below 5% of total
+                        {__('Categories below 5% of total')}
                     </p>
                 </div>
 
@@ -102,6 +104,7 @@ function OtherCategoriesBreakdown({
                                                 'var(--color-chart-4)',
                                         }}
                                     />
+
                                     <span className="truncate">
                                         {item.category.name}
                                     </span>
@@ -122,7 +125,7 @@ function OtherCategoriesBreakdown({
                 <Separator />
 
                 <div className="flex items-center justify-between text-sm font-medium">
-                    <span>Total</span>
+                    <span>{__('Total')}</span>
                     <span>{formatAmount(total, currency)}</span>
                 </div>
             </div>
@@ -201,7 +204,7 @@ export function SankeyChart({
             );
             const otherNode: NodeData = {
                 id: 'income-other',
-                label: 'Other',
+                label: __('Other'),
                 value: groupedIncome.other.total,
                 color: 'var(--color-muted)',
                 y: incomeY,
@@ -223,7 +226,7 @@ export function SankeyChart({
         const centerY = (height - centerHeight) / 2;
         const centerNode: NodeData = {
             id: 'center',
-            label: 'Cashflow',
+            label: __('Cashflow'),
             value: total_income - total_expense,
             color: 'var(--color-chart-1)',
             y: centerY,
@@ -267,7 +270,7 @@ export function SankeyChart({
             );
             const otherNode: NodeData = {
                 id: 'expense-other',
-                label: 'Other',
+                label: __('Other'),
                 value: groupedExpense.other.total,
                 color: 'var(--color-muted)',
                 y: expenseY,
@@ -334,7 +337,7 @@ export function SankeyChart({
                 )}
                 style={{ height }}
             >
-                No cashflow data for this period
+                {__('No cashflow data for this period')}
             </div>
         );
     }
@@ -453,6 +456,7 @@ export function SankeyChart({
                                     strokeWidth={isOtherNode ? 1 : 0}
                                     className="transition-all duration-200"
                                 />
+
                                 {/* Label */}
                                 <text
                                     x={
diff --git a/resources/js/components/dashboard/account-balance-card.tsx b/resources/js/components/dashboard/account-balance-card.tsx
index b5e987d1..558b276c 100644
--- a/resources/js/components/dashboard/account-balance-card.tsx
+++ b/resources/js/components/dashboard/account-balance-card.tsx
@@ -4,6 +4,7 @@ import { EncryptedText } from '@/components/encrypted-text';
 import { AmountDisplay } from '@/components/ui/amount-display';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { AccountWithMetrics } from '@/hooks/use-dashboard-data';
+import { __ } from '@/utils/i18n';
 import { Link } from '@inertiajs/react';
 import { useState } from 'react';
 import { Line, LineChart, ResponsiveContainer, Tooltip } from 'recharts';
@@ -27,7 +28,7 @@ export function AccountBalanceCard({
             <Card>
                 <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                     <CardTitle className="text-sm font-medium">
-                        Loading...
+                        {__('Loading...')}
                     </CardTitle>
                 </CardHeader>
                 <CardContent>
@@ -87,7 +88,7 @@ export function AccountBalanceCard({
                         <AmountTrendIndicator
                             isPositive={isPositive}
                             trend={Math.abs(account.diff)}
-                            label="vs last month"
+                            label={__('vs last month')}
                             className="text-sm"
                             previousAmount={account.previousBalance}
                             currentAmount={account.currentBalance}
@@ -125,6 +126,7 @@ export function AccountBalanceCard({
                                         );
                                     }}
                                 />
+
                                 <Line
                                     type="monotone"
                                     dataKey="value"
diff --git a/resources/js/components/dashboard/cashflow-summary-card.tsx b/resources/js/components/dashboard/cashflow-summary-card.tsx
index e0933c85..4d045410 100644
--- a/resources/js/components/dashboard/cashflow-summary-card.tsx
+++ b/resources/js/components/dashboard/cashflow-summary-card.tsx
@@ -9,6 +9,7 @@ import {
 import { cn } from '@/lib/utils';
 import { cashflow } from '@/routes';
 import { SharedData } from '@/types';
+import { __ } from '@/utils/i18n';
 import { Link, usePage } from '@inertiajs/react';
 import { endOfMonth, format, startOfMonth } from 'date-fns';
 import { ArrowRight, TrendingDown, TrendingUp } from 'lucide-react';
@@ -61,7 +62,7 @@ export function CashflowSummaryCard({ loading }: CashflowSummaryCardProps) {
         return (
             <Card className="col-span-3">
                 <CardHeader>
-                    <CardTitle>Cashflow</CardTitle>
+                    <CardTitle>{__('Cashflow')}</CardTitle>
                 </CardHeader>
                 <CardContent>
                     <div className="grid grid-cols-3 gap-4">
@@ -88,24 +89,27 @@ export function CashflowSummaryCard({ loading }: CashflowSummaryCardProps) {
         <Card className="col-span-3">
             <CardHeader className="gap-1">
                 <div className="flex items-center justify-between">
-                    <CardTitle>Cashflow</CardTitle>
+                    <CardTitle>{__('Cashflow')}</CardTitle>
                     <Link
                         href={cashflow().url}
                         className="flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground"
                     >
-                        View details
+                        {__('View details')}
+
                         <ArrowRight className="size-4" />
                     </Link>
                 </div>
                 <CardDescription>
-                    This month's income and expenses
+                    {__("This month's income and expenses")}
                 </CardDescription>
             </CardHeader>
             <CardContent>
                 <div className="grid grid-cols-3 gap-4">
                     {/* Income */}
                     <div>
-                        <p className="text-xs text-muted-foreground">Income</p>
+                        <p className="text-xs text-muted-foreground">
+                            {__('Income')}
+                        </p>
                         <AmountDisplay
                             amountInCents={current.income}
                             currencyCode={auth.user.currency_code}
@@ -119,7 +123,7 @@ export function CashflowSummaryCard({ loading }: CashflowSummaryCardProps) {
                     {/* Expenses */}
                     <div>
                         <p className="text-xs text-muted-foreground">
-                            Expenses
+                            {__('Expenses')}
                         </p>
                         <AmountDisplay
                             amountInCents={current.expense}
@@ -132,7 +136,9 @@ export function CashflowSummaryCard({ loading }: CashflowSummaryCardProps) {
 
                     {/* Net */}
                     <div>
-                        <p className="text-xs text-muted-foreground">Net</p>
+                        <p className="text-xs text-muted-foreground">
+                            {__('Net')}
+                        </p>
                         <div className="flex items-center gap-1">
                             {isPositiveNet ? (
                                 <TrendingUp className="size-4 text-green-600 dark:text-green-400" />
@@ -154,7 +160,7 @@ export function CashflowSummaryCard({ loading }: CashflowSummaryCardProps) {
                 {/* Savings rate footer */}
                 <div className="mt-4 flex items-center justify-between border-t pt-3">
                     <span className="text-xs text-muted-foreground">
-                        Savings rate
+                        {__('Savings rate')}
                     </span>
                     <span
                         className={cn(
diff --git a/resources/js/components/dashboard/net-worth-chart.tsx b/resources/js/components/dashboard/net-worth-chart.tsx
index 1c2f2ccc..59ad0e64 100644
--- a/resources/js/components/dashboard/net-worth-chart.tsx
+++ b/resources/js/components/dashboard/net-worth-chart.tsx
@@ -16,7 +16,9 @@ import { ChartConfig } from '@/components/ui/chart';
 import { StackedBarChart } from '@/components/ui/stacked-bar-chart';
 import { useChartViews } from '@/hooks/use-chart-views';
 import { NetWorthEvolutionData } from '@/hooks/use-dashboard-data';
+import { useLocale } from '@/hooks/use-locale';
 import { AccountInfo } from '@/lib/chart-calculations';
+import { __ } from '@/utils/i18n';
 import { useMemo } from 'react';
 import { PercentageTrendIndicator } from './percentage-trend-indicator';
 
@@ -32,10 +34,10 @@ interface TrendData {
     currentAmount: number;
 }
 
-function formatXAxisLabel(value: string): string {
+function formatXAxisLabel(value: string, locale: string = 'en'): string {
     const [year, month] = value.split('-');
     const date = new Date(parseInt(year), parseInt(month) - 1);
-    const monthName = date.toLocaleString('en-US', { month: 'short' });
+    const monthName = date.toLocaleString(locale, { month: 'short' });
     const currentYear = new Date().getFullYear();
 
     if (parseInt(year) === currentYear) {
@@ -138,6 +140,7 @@ export function NetWorthChart({
     loading,
     showLegend = false,
 }: NetWorthChartProps) {
+    const locale = useLocale();
     const {
         chartData,
         dataKeys,
@@ -240,7 +243,7 @@ export function NetWorthChart({
         return (
             <Card className="col-span-3">
                 <CardHeader>
-                    <CardTitle>Net Worth Evolution</CardTitle>
+                    <CardTitle>{__('Net Worth Evolution')}</CardTitle>
                     <CardDescription>
                         <div className="h-4 w-48 animate-pulse rounded bg-gray-200 dark:bg-gray-700" />
                     </CardDescription>
@@ -256,11 +259,11 @@ export function NetWorthChart({
         return (
             <Card className="col-span-3">
                 <CardHeader>
-                    <CardTitle>Net Worth Evolution</CardTitle>
+                    <CardTitle>{__('Net Worth Evolution')}</CardTitle>
                 </CardHeader>
                 <CardContent>
                     <div className="flex h-[300px] items-center justify-center text-muted-foreground">
-                        No account data available
+                        {__('No account data available')}
                     </div>
                 </CardContent>
             </Card>
@@ -272,21 +275,22 @@ export function NetWorthChart({
             <CardHeader>
                 <div className="flex flex-row items-start justify-between gap-4">
                     <div className="flex min-w-0 flex-col gap-2">
-                        <CardTitle>Net Worth Evolution</CardTitle>
+                        <CardTitle>{__('Net Worth Evolution')}</CardTitle>
                         <CardDescription className="flex flex-col gap-1 text-sm">
                             <div className="text-foreground">
                                 <TotalDisplay totals={currencyTotals} />
                             </div>
                             <PercentageTrendIndicator
                                 trend={monthlyTrend?.percentage ?? null}
-                                label="this month"
+                                label={__('this month')}
                                 previousAmount={monthlyTrend?.previousAmount}
                                 currentAmount={monthlyTrend?.currentAmount}
                                 currencyCode={primaryCurrency}
                             />
+
                             <PercentageTrendIndicator
                                 trend={yearlyTrend?.percentage ?? null}
-                                label="for the last 12 months"
+                                label={__('for the last 12 months')}
                                 previousAmount={yearlyTrend?.previousAmount}
                                 currentAmount={yearlyTrend?.currentAmount}
                                 currencyCode={primaryCurrency}
@@ -308,7 +312,9 @@ export function NetWorthChart({
                         dataKeys={dataKeys}
                         config={chartConfig}
                         xAxisKey="month"
-                        xAxisFormatter={formatXAxisLabel}
+                        xAxisFormatter={(value) =>
+                            formatXAxisLabel(value, locale)
+                        }
                         valueFormatter={valueFormatter}
                         accountCurrencies={accountCurrencies}
                         className="h-[300px] w-full"
@@ -319,14 +325,18 @@ export function NetWorthChart({
                     <MoMChart
                         data={chartViews.deltaSeries}
                         currencyCode={primaryCurrency}
-                        xAxisFormatter={formatXAxisLabel}
+                        xAxisFormatter={(value) =>
+                            formatXAxisLabel(value, locale)
+                        }
                         className="h-[300px] w-full"
                     />
                 )}
                 {chartViews.currentView === 'mom_percent' && (
                     <MoMPercentChart
                         data={chartViews.momPercentSeries}
-                        xAxisFormatter={formatXAxisLabel}
+                        xAxisFormatter={(value) =>
+                            formatXAxisLabel(value, locale)
+                        }
                         className="h-[300px] w-full"
                     />
                 )}
diff --git a/resources/js/components/dashboard/top-categories-card.tsx b/resources/js/components/dashboard/top-categories-card.tsx
index 030eed1c..401be9ae 100644
--- a/resources/js/components/dashboard/top-categories-card.tsx
+++ b/resources/js/components/dashboard/top-categories-card.tsx
@@ -10,6 +10,7 @@ import { Progress } from '@/components/ui/progress';
 import { cn } from '@/lib/utils';
 import { SharedData } from '@/types';
 import { Category, getCategoryColorClasses } from '@/types/category';
+import { __ } from '@/utils/i18n';
 import { usePage } from '@inertiajs/react';
 import * as Icons from 'lucide-react';
 import { LucideIcon } from 'lucide-react';
@@ -50,7 +51,7 @@ export function TopCategoriesCard({
         return (
             <Card className="w-full">
                 <CardHeader>
-                    <CardTitle>Top Spending Categories</CardTitle>
+                    <CardTitle>{__('Top Spending Categories')}</CardTitle>
                 </CardHeader>
                 <CardContent>
                     <div className="space-y-4">
@@ -73,8 +74,8 @@ export function TopCategoriesCard({
     return (
         <Card className="w-full">
             <CardHeader className="gap-2">
-                <CardTitle>Top spending categories</CardTitle>
-                <CardDescription>on the last 30 days</CardDescription>
+                <CardTitle>{__('Top spending categories')}</CardTitle>
+                <CardDescription>{__('on the last 30 days')}</CardDescription>
             </CardHeader>
             <CardContent>
                 <div className="space-y-4">
@@ -147,7 +148,7 @@ export function TopCategoriesCard({
                     })}
                     {categories.length === 0 && (
                         <div className="py-8 text-center text-muted-foreground">
-                            No spending data this month
+                            {__('No spending data this month')}
                         </div>
                     )}
                 </div>
diff --git a/resources/js/components/delete-user.tsx b/resources/js/components/delete-user.tsx
index a60d8e6e..69a808e7 100644
--- a/resources/js/components/delete-user.tsx
+++ b/resources/js/components/delete-user.tsx
@@ -15,6 +15,7 @@ import {
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { type SharedData } from '@/types';
+import { __ } from '@/utils/i18n';
 import { Form, usePage } from '@inertiajs/react';
 import { InfoIcon } from 'lucide-react';
 import { useRef } from 'react';
@@ -28,13 +29,16 @@ export default function DeleteUser() {
         return (
             <div className="space-y-6">
                 <HeadingSmall
-                    title="Delete account"
-                    description="Delete your account and all of its resources"
+                    title={__('Delete account')}
+                    description={__(
+                        'Delete your account and all of its resources',
+                    )}
                 />
+
                 <Alert>
                     <InfoIcon className="h-4 w-4" />
                     <AlertDescription>
-                        The demo account cannot be deleted.
+                        {__('The demo account cannot be deleted.')}
                     </AlertDescription>
                 </Alert>
             </div>
@@ -44,14 +48,17 @@ export default function DeleteUser() {
     return (
         <div className="space-y-6">
             <HeadingSmall
-                title="Delete account"
-                description="Delete your account and all of its resources"
+                title={__('Delete account')}
+                description={__('Delete your account and all of its resources')}
             />
+
             <div className="space-y-4 rounded-lg border border-red-100 bg-red-50 p-4 dark:border-red-200/10 dark:bg-red-700/10">
                 <div className="relative space-y-0.5 text-red-600 dark:text-red-100">
-                    <p className="font-medium">Warning</p>
+                    <p className="font-medium">{__('Warning')}</p>
                     <p className="text-sm">
-                        Please proceed with caution, this cannot be undone.
+                        {__(
+                            'Please proceed with caution, this cannot be undone.',
+                        )}
                     </p>
                 </div>
 
@@ -61,18 +68,19 @@ export default function DeleteUser() {
                             variant="destructive"
                             data-test="delete-user-button"
                         >
-                            Delete account
+                            {__('Delete account')}
                         </Button>
                     </DialogTrigger>
                     <DialogContent>
                         <DialogTitle>
-                            Are you sure you want to delete your account?
+                            {__(
+                                'Are you sure you want to delete your account?',
+                            )}
                         </DialogTitle>
                         <DialogDescription>
-                            Once your account is deleted, all of its resources
-                            and data will also be permanently deleted. Please
-                            enter your password to confirm you would like to
-                            permanently delete your account.
+                            {__(
+                                'Once your account is deleted, all of its resources\n                            and data will also be permanently deleted. Please\n                            enter your password to confirm you would like to\n                            permanently delete your account.',
+                            )}
                         </DialogDescription>
 
                         <Form
@@ -91,7 +99,7 @@ export default function DeleteUser() {
                                             htmlFor="password"
                                             className="sr-only"
                                         >
-                                            Password
+                                            {__('Password')}
                                         </Label>
 
                                         <Input
@@ -99,7 +107,7 @@ export default function DeleteUser() {
                                             type="password"
                                             name="password"
                                             ref={passwordInput}
-                                            placeholder="Password"
+                                            placeholder={__('Password')}
                                             autoComplete="current-password"
                                         />
 
@@ -114,7 +122,7 @@ export default function DeleteUser() {
                                                     resetAndClearErrors()
                                                 }
                                             >
-                                                Cancel
+                                                {__('Cancel')}
                                             </Button>
                                         </DialogClose>
 
@@ -127,7 +135,7 @@ export default function DeleteUser() {
                                                 type="submit"
                                                 data-test="confirm-delete-user-button"
                                             >
-                                                Delete account
+                                                {__('Delete account')}
                                             </button>
                                         </Button>
                                     </DialogFooter>
diff --git a/resources/js/components/encryption-key-button.tsx b/resources/js/components/encryption-key-button.tsx
index 614e25ff..81f3e09d 100644
--- a/resources/js/components/encryption-key-button.tsx
+++ b/resources/js/components/encryption-key-button.tsx
@@ -1,5 +1,6 @@
 import { useEncryptionKey } from '@/contexts/encryption-key-context';
 import { cn } from '@/lib/utils';
+import { __ } from '@/utils/i18n';
 import { LockKeyhole, LockKeyholeOpen } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { Button } from './ui/button';
@@ -70,8 +71,8 @@ export function EncryptionKeyButton() {
                             onClick={handleClick}
                             aria-label={
                                 isKeySet
-                                    ? 'Lock encryption key'
-                                    : 'Unlock encryption key'
+                                    ? __('Lock encryption key')
+                                    : __('Unlock encryption key')
                             }
                         >
                             {isKeySet ? (
@@ -83,8 +84,8 @@ export function EncryptionKeyButton() {
                     </TooltipTrigger>
                     <TooltipContent>
                         {isKeySet
-                            ? 'Click to lock encryption key'
-                            : 'Click to unlock encryption key'}
+                            ? __('Click to lock encryption key')
+                            : __('Click to unlock encryption key')}
                     </TooltipContent>
                 </Tooltip>
             </TooltipProvider>
@@ -103,11 +104,11 @@ export function EncryptionKeyButton() {
             <Dialog open={showClearDialog} onOpenChange={setShowClearDialog}>
                 <DialogContent>
                     <DialogHeader>
-                        <DialogTitle>Clear Encryption Key?</DialogTitle>
+                        <DialogTitle>{__('Clear Encryption Key?')}</DialogTitle>
                         <DialogDescription>
-                            This will remove your encryption key from this
-                            browser session. You'll need to enter your password
-                            again to unlock encrypted content.
+                            {__(
+                                "This will remove your encryption key from this browser session. You'll need to enter your password again to unlock encrypted content.",
+                            )}
                         </DialogDescription>
                     </DialogHeader>
                     <DialogFooter>
@@ -115,9 +116,11 @@ export function EncryptionKeyButton() {
                             variant="outline"
                             onClick={() => setShowClearDialog(false)}
                         >
-                            Cancel
+                            {__('Cancel')}
+                        </Button>
+                        <Button onClick={handleClearKey}>
+                            {__('Clear Key')}
                         </Button>
-                        <Button onClick={handleClearKey}>Clear Key</Button>
                     </DialogFooter>
                 </DialogContent>
             </Dialog>
diff --git a/resources/js/components/labels/create-label-dialog.tsx b/resources/js/components/labels/create-label-dialog.tsx
index 0d8eb0f3..2bcea33a 100644
--- a/resources/js/components/labels/create-label-dialog.tsx
+++ b/resources/js/components/labels/create-label-dialog.tsx
@@ -19,6 +19,7 @@ import {
     SelectValue,
 } from '@/components/ui/select';
 import { getLabelColorClasses, LABEL_COLORS } from '@/types/label';
+import { __ } from '@/utils/i18n';
 import { Form } from '@inertiajs/react';
 import { useState } from 'react';
 
@@ -28,13 +29,13 @@ export function CreateLabelDialog({ onSuccess }: { onSuccess?: () => void }) {
     return (
         <Dialog open={open} onOpenChange={setOpen}>
             <DialogTrigger asChild>
-                <Button>Create Label</Button>
+                <Button>{__('Create Label')}</Button>
             </DialogTrigger>
             <DialogContent hasKeyboard className="sm:max-w-[425px]">
                 <DialogHeader>
-                    <DialogTitle>Create Label</DialogTitle>
+                    <DialogTitle>{__('Create Label')}</DialogTitle>
                     <DialogDescription>
-                        Add a new label to tag your transactions.
+                        {__('Add a new label to tag your transactions.')}
                     </DialogDescription>
                 </DialogHeader>
                 <Form
@@ -48,13 +49,14 @@ export function CreateLabelDialog({ onSuccess }: { onSuccess?: () => void }) {
                     {({ errors, processing }) => (
                         <>
                             <div className="space-y-2">
-                                <Label htmlFor="name">Name</Label>
+                                <Label htmlFor="name">{__('Name')}</Label>
                                 <Input
                                     id="name"
                                     name="name"
-                                    placeholder="Label name"
+                                    placeholder={__('Label name')}
                                     required
                                 />
+
                                 {errors.name && (
                                     <p className="text-sm text-red-500">
                                         {errors.name}
@@ -63,10 +65,12 @@ export function CreateLabelDialog({ onSuccess }: { onSuccess?: () => void }) {
                             </div>
 
                             <div className="space-y-2">
-                                <Label htmlFor="color">Color</Label>
+                                <Label htmlFor="color">{__('Color')}</Label>
                                 <Select name="color" required>
                                     <SelectTrigger>
-                                        <SelectValue placeholder="Select a color" />
+                                        <SelectValue
+                                            placeholder={__('Select a color')}
+                                        />
                                     </SelectTrigger>
                                     <SelectContent>
                                         {LABEL_COLORS.map((color) => {
@@ -81,7 +85,7 @@ export function CreateLabelDialog({ onSuccess }: { onSuccess?: () => void }) {
                                                         <Badge
                                                             className={`${colorClasses.bg} ${colorClasses.text}`}
                                                         >
-                                                            {color}
+                                                            {__(color)}
                                                         </Badge>
                                                     </div>
                                                 </SelectItem>
@@ -103,7 +107,7 @@ export function CreateLabelDialog({ onSuccess }: { onSuccess?: () => void }) {
                                     onClick={() => setOpen(false)}
                                     disabled={processing}
                                 >
-                                    Cancel
+                                    {__('Cancel')}
                                 </Button>
                                 <Button type="submit" disabled={processing}>
                                     {processing ? 'Creating...' : 'Create'}
diff --git a/resources/js/components/labels/delete-label-dialog.tsx b/resources/js/components/labels/delete-label-dialog.tsx
index 06fea46a..4977009d 100644
--- a/resources/js/components/labels/delete-label-dialog.tsx
+++ b/resources/js/components/labels/delete-label-dialog.tsx
@@ -9,6 +9,7 @@ import {
     DialogTitle,
 } from '@/components/ui/dialog';
 import { type Label } from '@/types/label';
+import { __ } from '@/utils/i18n';
 import { Form } from '@inertiajs/react';
 
 interface DeleteLabelDialogProps {
@@ -28,10 +29,13 @@ export function DeleteLabelDialog({
         <Dialog open={open} onOpenChange={onOpenChange}>
             <DialogContent className="sm:max-w-[425px]">
                 <DialogHeader>
-                    <DialogTitle>Delete Label</DialogTitle>
+                    <DialogTitle>{__('Delete Label')}</DialogTitle>
                     <DialogDescription>
-                        Are you sure you want to delete "{label.name}"? This
-                        action cannot be undone.
+                        {__('Are you sure you want to delete "')}
+                        {label.name}
+                        {__(
+                            '"? This\n                        action cannot be undone.',
+                        )}
                     </DialogDescription>
                 </DialogHeader>
                 <Form
@@ -49,7 +53,7 @@ export function DeleteLabelDialog({
                                 onClick={() => onOpenChange(false)}
                                 disabled={processing}
                             >
-                                Cancel
+                                {__('Cancel')}
                             </Button>
                             <Button
                                 type="submit"
diff --git a/resources/js/components/labels/edit-label-dialog.tsx b/resources/js/components/labels/edit-label-dialog.tsx
index 74ed1624..5984d633 100644
--- a/resources/js/components/labels/edit-label-dialog.tsx
+++ b/resources/js/components/labels/edit-label-dialog.tsx
@@ -22,6 +22,7 @@ import {
     LABEL_COLORS,
     type Label as LabelType,
 } from '@/types/label';
+import { __ } from '@/utils/i18n';
 import { Form } from '@inertiajs/react';
 
 interface EditLabelDialogProps {
@@ -41,9 +42,9 @@ export function EditLabelDialog({
         <Dialog open={open} onOpenChange={onOpenChange}>
             <DialogContent hasKeyboard className="sm:max-w-[425px]">
                 <DialogHeader>
-                    <DialogTitle>Edit Label</DialogTitle>
+                    <DialogTitle>{__('Edit Label')}</DialogTitle>
                     <DialogDescription>
-                        Update the label information.
+                        {__('Update the label information.')}
                     </DialogDescription>
                 </DialogHeader>
                 <Form
@@ -57,14 +58,15 @@ export function EditLabelDialog({
                     {({ errors, processing }) => (
                         <>
                             <div className="space-y-2">
-                                <Label htmlFor="name">Name</Label>
+                                <Label htmlFor="name">{__('Name')}</Label>
                                 <Input
                                     id="name"
                                     name="name"
                                     defaultValue={label.name}
-                                    placeholder="Label name"
+                                    placeholder={__('Label name')}
                                     required
                                 />
+
                                 {errors.name && (
                                     <p className="text-sm text-red-500">
                                         {errors.name}
@@ -73,14 +75,16 @@ export function EditLabelDialog({
                             </div>
 
                             <div className="space-y-2">
-                                <Label htmlFor="color">Color</Label>
+                                <Label htmlFor="color">{__('Color')}</Label>
                                 <Select
                                     name="color"
                                     defaultValue={label.color}
                                     required
                                 >
                                     <SelectTrigger>
-                                        <SelectValue placeholder="Select a color" />
+                                        <SelectValue
+                                            placeholder={__('Select a color')}
+                                        />
                                     </SelectTrigger>
                                     <SelectContent>
                                         {LABEL_COLORS.map((color) => {
@@ -95,7 +99,7 @@ export function EditLabelDialog({
                                                         <Badge
                                                             className={`${colorClasses.bg} ${colorClasses.text}`}
                                                         >
-                                                            {color}
+                                                            {__(color)}
                                                         </Badge>
                                                     </div>
                                                 </SelectItem>
@@ -117,7 +121,7 @@ export function EditLabelDialog({
                                     onClick={() => onOpenChange(false)}
                                     disabled={processing}
                                 >
-                                    Cancel
+                                    {__('Cancel')}
                                 </Button>
                                 <Button type="submit" disabled={processing}>
                                     {processing ? 'Updating...' : 'Update'}
diff --git a/resources/js/components/landing/install-app-button.tsx b/resources/js/components/landing/install-app-button.tsx
index 4c0e0846..a78d57d1 100644
--- a/resources/js/components/landing/install-app-button.tsx
+++ b/resources/js/components/landing/install-app-button.tsx
@@ -7,6 +7,7 @@ import {
     DialogTitle,
 } from '@/components/ui/dialog';
 import { usePwaInstall } from '@/hooks/use-pwa-install';
+import { __ } from '@/utils/i18n';
 import { DownloadIcon, PlusSquareIcon, ShareIcon } from 'lucide-react';
 import { useState } from 'react';
 
@@ -26,7 +27,7 @@ export default function InstallAppButton() {
                 className="text-shadow h-14 w-full cursor-pointer bg-gradient-to-t from-zinc-700 to-zinc-900 text-base text-white shadow-sm transition-all hover:from-zinc-800 hover:to-black hover:shadow-md dark:bg-[#eeeeec] dark:from-zinc-200 dark:to-zinc-300 dark:text-[#1C1C1A] dark:hover:bg-white hover:dark:from-zinc-50 dark:hover:shadow-md"
             >
                 <DownloadIcon className="size-5" />
-                Install App
+                {__('Install App')}
             </Button>
         );
     }
@@ -39,16 +40,19 @@ export default function InstallAppButton() {
                     className="text-shadow h-14 w-full cursor-pointer bg-gradient-to-t from-zinc-700 to-zinc-900 text-base text-white shadow-sm transition-all hover:from-zinc-800 hover:to-black hover:shadow-md dark:bg-[#eeeeec] dark:from-zinc-200 dark:to-zinc-300 dark:text-[#1C1C1A] dark:hover:bg-white hover:dark:from-zinc-50 dark:hover:shadow-md"
                 >
                     <DownloadIcon className="size-5" />
-                    Install App
+                    {__('Install App')}
                 </Button>
 
                 <Dialog open={showIosDialog} onOpenChange={setShowIosDialog}>
                     <DialogContent className="max-w-sm">
                         <DialogHeader>
-                            <DialogTitle>Install Whisper Money</DialogTitle>
+                            <DialogTitle>
+                                {__('Install Whisper Money')}
+                            </DialogTitle>
                             <DialogDescription>
-                                Add the app to your home screen for the best
-                                experience.
+                                {__(
+                                    'Add the app to your home screen for the best experience.',
+                                )}
                             </DialogDescription>
                         </DialogHeader>
 
@@ -58,11 +62,11 @@ export default function InstallAppButton() {
                                     <ShareIcon className="size-5 text-zinc-600 dark:text-zinc-400" />
                                 </span>
                                 <span className="text-sm">
-                                    Tap the{' '}
+                                    {__('Tap the')}{' '}
                                     <strong className="font-semibold">
-                                        Share
+                                        {__('Share')}
                                     </strong>{' '}
-                                    button in your browser toolbar
+                                    {__('button in your browser toolbar')}
                                 </span>
                             </li>
                             <li className="flex items-center gap-4">
@@ -70,9 +74,9 @@ export default function InstallAppButton() {
                                     <PlusSquareIcon className="size-5 text-zinc-600 dark:text-zinc-400" />
                                 </span>
                                 <span className="text-sm">
-                                    Tap{' '}
+                                    {__('Tap')}{' '}
                                     <strong className="font-semibold">
-                                        Add to Home Screen
+                                        {__('Add to Home Screen')}
                                     </strong>
                                 </span>
                             </li>
@@ -83,7 +87,7 @@ export default function InstallAppButton() {
                             className="mt-2 w-full"
                             onClick={() => setShowIosDialog(false)}
                         >
-                            Got it
+                            {__('Got it')}
                         </Button>
                     </DialogContent>
                 </Dialog>
diff --git a/resources/js/components/nav-footer.tsx b/resources/js/components/nav-footer.tsx
index affdd3e8..79b0f46e 100644
--- a/resources/js/components/nav-footer.tsx
+++ b/resources/js/components/nav-footer.tsx
@@ -8,6 +8,7 @@ import {
 } from '@/components/ui/sidebar';
 import { resolveUrl } from '@/lib/utils';
 import { type NavItem } from '@/types';
+import { __ } from '@/utils/i18n';
 import { LucideIcon } from 'lucide-react';
 import { isValidElement, type ComponentPropsWithoutRef } from 'react';
 
@@ -37,7 +38,7 @@ export function NavFooter({
                                     rel="noopener noreferrer"
                                 >
                                     <IconOrComponent icon={item.icon} />
-                                    <span>{item.title}</span>
+                                    <span>{__(item.title)}</span>
                                 </a>
                             </SidebarMenuButton>
                         </SidebarMenuItem>
diff --git a/resources/js/components/nav-main.tsx b/resources/js/components/nav-main.tsx
index 61a13423..882d7331 100644
--- a/resources/js/components/nav-main.tsx
+++ b/resources/js/components/nav-main.tsx
@@ -7,13 +7,14 @@ import {
 } from '@/components/ui/sidebar';
 import { resolveUrl } from '@/lib/utils';
 import { type NavItem } from '@/types';
+import { __ } from '@/utils/i18n';
 import { Link, usePage } from '@inertiajs/react';
 
 export function NavMain({ items = [] }: { items: NavItem[] }) {
     const page = usePage();
     return (
         <SidebarGroup className="px-2 py-0">
-            <SidebarGroupLabel>Platform</SidebarGroupLabel>
+            <SidebarGroupLabel>{__('Platform')}</SidebarGroupLabel>
             <SidebarMenu>
                 {items.map((item) => (
                     <SidebarMenuItem key={item.title}>
@@ -22,11 +23,11 @@ export function NavMain({ items = [] }: { items: NavItem[] }) {
                             isActive={page.url.startsWith(
                                 resolveUrl(item.href),
                             )}
-                            tooltip={{ children: item.title }}
+                            tooltip={{ children: __(item.title) }}
                         >
                             <Link href={item.href} prefetch>
                                 {item.icon && <item.icon />}
-                                <span>{item.title}</span>
+                                <span>{__(item.title)}</span>
                             </Link>
                         </SidebarMenuButton>
                     </SidebarMenuItem>
diff --git a/resources/js/components/onboarding/step-account-types.tsx b/resources/js/components/onboarding/step-account-types.tsx
index c95758a4..6bd90e69 100644
--- a/resources/js/components/onboarding/step-account-types.tsx
+++ b/resources/js/components/onboarding/step-account-types.tsx
@@ -1,5 +1,6 @@
 import { StepButton } from '@/components/onboarding/step-button';
 import { StepHeader } from '@/components/onboarding/step-header';
+import { __ } from '@/utils/i18n';
 import {
     Banknote,
     Building2,
@@ -17,44 +18,44 @@ interface StepAccountTypesProps {
 const accountTypes = [
     {
         type: 'checking',
-        name: 'Checking',
+        nameKey: 'Checking',
         icon: Wallet,
-        description: 'Daily spending and transactions',
+        descriptionKey: 'Daily spending and transactions',
         hasTransactions: true,
     },
     {
         type: 'savings',
-        name: 'Savings',
+        nameKey: 'Savings',
         icon: PiggyBank,
-        description: 'Save money for goals',
+        descriptionKey: 'Save money for goals',
         hasTransactions: true,
     },
     {
         type: 'credit_card',
-        name: 'Credit Card',
+        nameKey: 'Credit Card',
         icon: CreditCard,
-        description: 'Track credit card spending',
+        descriptionKey: 'Track credit card spending',
         hasTransactions: true,
     },
     {
         type: 'investment',
-        name: 'Investment',
+        nameKey: 'Investment',
         icon: LineChart,
-        description: 'Stocks, ETFs, and portfolios',
+        descriptionKey: 'Stocks, ETFs, and portfolios',
         hasTransactions: false,
     },
     {
         type: 'retirement',
-        name: 'Retirement',
+        nameKey: 'Retirement',
         icon: TrendingUp,
-        description: '401k, IRA, pension funds',
+        descriptionKey: '401k, IRA, pension funds',
         hasTransactions: false,
     },
     {
         type: 'loan',
-        name: 'Loan',
+        nameKey: 'Loan',
         icon: Building2,
-        description: 'Mortgages and loans',
+        descriptionKey: 'Mortgages and loans',
         hasTransactions: false,
     },
 ];
@@ -65,8 +66,10 @@ export function StepAccountTypes({ onContinue }: StepAccountTypesProps) {
             <StepHeader
                 icon={Banknote}
                 iconContainerClassName="bg-gradient-to-br from-cyan-400 to-blue-500"
-                title="Account Types"
-                description="There are different account types. Some track transactions, others just track balance over time."
+                title={__('Account Types')}
+                description={__(
+                    'There are different account types. Some track transactions, others just track balance over time.',
+                )}
             />
 
             <div className="grid w-full max-w-2xl gap-3 sm:grid-cols-2">
@@ -81,8 +84,9 @@ export function StepAccountTypes({ onContinue }: StepAccountTypesProps) {
                                     <account.icon
                                         className={`size-4 stroke-muted-foreground`}
                                     />
+
                                     <h3 className="font-semibold">
-                                        {account.name}
+                                        {__(account.nameKey)}
                                     </h3>
                                 </div>
 
@@ -94,12 +98,12 @@ export function StepAccountTypes({ onContinue }: StepAccountTypesProps) {
                                     }`}
                                 >
                                     {account.hasTransactions
-                                        ? 'Transactions + Balance'
-                                        : 'Balance'}
+                                        ? __('Transactions + Balance')
+                                        : __('Balance')}
                                 </span>
                             </div>
                             <p className="text-sm text-muted-foreground">
-                                {account.description}
+                                {__(account.descriptionKey)}
                             </p>
                         </div>
                     </div>
@@ -108,7 +112,7 @@ export function StepAccountTypes({ onContinue }: StepAccountTypesProps) {
 
             <div className="mt-8 w-full sm:w-auto">
                 <StepButton
-                    text="Create Your First Account"
+                    text={__('Create Your First Account')}
                     onClick={onContinue}
                 />
             </div>
diff --git a/resources/js/components/onboarding/step-category-types.tsx b/resources/js/components/onboarding/step-category-types.tsx
index b0dadc00..a54f19e8 100644
--- a/resources/js/components/onboarding/step-category-types.tsx
+++ b/resources/js/components/onboarding/step-category-types.tsx
@@ -1,5 +1,6 @@
 import { StepButton } from '@/components/onboarding/step-button';
 import { StepHeader } from '@/components/onboarding/step-header';
+import { __ } from '@/utils/i18n';
 import { ArrowDownLeft, ArrowUpRight, Repeat, Tag } from 'lucide-react';
 
 interface StepCategoryTypesProps {
@@ -9,33 +10,30 @@ interface StepCategoryTypesProps {
 const categoryTypes = [
     {
         type: 'expense',
-        name: 'Expense',
+        nameKey: 'Expense',
         icon: ArrowUpRight,
-        description:
+        descriptionKey:
             'Money going out of an account to pay for something (e.g., groceries, rent, subscriptions). Decreases your balance.',
-        examples: ['Food', 'Rent', 'Entertainment', 'Transport'],
         color: 'from-red-500 to-rose-500',
         bgColor: 'bg-red-50 dark:bg-red-900/20',
         textColor: 'text-red-700 dark:text-red-400',
     },
     {
         type: 'income',
-        name: 'Income',
+        nameKey: 'Income',
         icon: ArrowDownLeft,
-        description:
+        descriptionKey:
             'Money coming into an account from a source (e.g., salary, refunds, interest). Increases your balance.',
-        examples: ['Salary', 'Freelance', 'Investments', 'Refunds'],
         color: 'from-emerald-500 to-green-500',
         bgColor: 'bg-emerald-50 dark:bg-emerald-900/20',
         textColor: 'text-emerald-700 dark:text-emerald-400',
     },
     {
         type: 'transfer',
-        name: 'Transfer',
+        nameKey: 'Transfer',
         icon: Repeat,
-        description:
+        descriptionKey:
             'Moving money between accounts. It does not count in expenses or income charts.',
-        examples: ['To savings', 'Credit card payment', 'Between banks'],
         color: 'from-blue-500 to-cyan-500',
         bgColor: 'bg-blue-50 dark:bg-blue-900/20',
         textColor: 'text-blue-700 dark:text-blue-400',
@@ -48,8 +46,10 @@ export function StepCategoryTypes({ onContinue }: StepCategoryTypesProps) {
             <StepHeader
                 icon={Tag}
                 iconContainerClassName="bg-gradient-to-br from-violet-400 to-purple-500"
-                title="Understanding Categories"
-                description="Every transaction belongs to one of three types:"
+                title={__('Understanding Categories')}
+                description={__(
+                    'Every transaction belongs to one of three types:',
+                )}
             />
 
             <div className="mb-8 grid w-full max-w-3xl gap-4 md:grid-cols-3">
@@ -65,18 +65,18 @@ export function StepCategoryTypes({ onContinue }: StepCategoryTypesProps) {
                                 <category.icon className="size-4 text-white" />
                             </div>
                             <h3 className="text-base font-semibold">
-                                {category.name}
+                                {__(category.nameKey)}
                             </h3>
                         </div>
 
                         <p className="w-full text-left text-muted-foreground/75">
-                            {category.description}
+                            {__(category.descriptionKey)}
                         </p>
                     </div>
                 ))}
             </div>
 
-            <StepButton text="Continue" onClick={onContinue} />
+            <StepButton text={__('Continue')} onClick={onContinue} />
         </div>
     );
 }
diff --git a/resources/js/components/onboarding/step-complete.tsx b/resources/js/components/onboarding/step-complete.tsx
index 2da189e5..285f6bd9 100644
--- a/resources/js/components/onboarding/step-complete.tsx
+++ b/resources/js/components/onboarding/step-complete.tsx
@@ -1,6 +1,7 @@
 import { complete } from '@/actions/App/Http/Controllers/OnboardingController';
 import { StepButton } from '@/components/onboarding/step-button';
 import { dashboard } from '@/routes';
+import { __ } from '@/utils/i18n';
 import { router } from '@inertiajs/react';
 import { PartyPopper } from 'lucide-react';
 import { useState } from 'react';
@@ -34,12 +35,13 @@ export function StepComplete() {
             </div>
 
             <h1 className="mb-2 text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl">
-                You're All Set!
+                {__("You're All Set!")}
             </h1>
 
             <p className="mb-8 max-w-lg text-lg text-balance text-muted-foreground">
-                Your accounts are ready and your data is securely encrypted.
-                Welcome to Whisper Money!
+                {__(
+                    'Your accounts are ready and your data is securely encrypted.\n                Welcome to Whisper Money!',
+                )}
             </p>
 
             <div className="mb-12 flex w-full max-w-md flex-col justify-center gap-4">
@@ -48,7 +50,7 @@ export function StepComplete() {
                         ✓
                     </div>
                     <p className="text-sm text-muted-foreground">
-                        Encryption Set
+                        {__('Encryption Set')}
                     </p>
                 </div>
                 <div className="flex items-center justify-center gap-2 rounded-xl border bg-card p-2">
@@ -56,7 +58,7 @@ export function StepComplete() {
                         ✓
                     </div>
                     <p className="text-sm text-muted-foreground">
-                        Accounts Created
+                        {__('Accounts Created')}
                     </p>
                 </div>
                 <div className="flex items-center justify-center gap-2 rounded-xl border bg-card p-2">
@@ -64,16 +66,16 @@ export function StepComplete() {
                         ✓
                     </div>
                     <p className="text-sm text-muted-foreground">
-                        Data Imported
+                        {__('Data Imported')}
                     </p>
                 </div>
             </div>
 
             <StepButton
-                text="Go to Dashboard"
+                text={__('Go to Dashboard')}
                 onClick={handleComplete}
                 loading={isRedirecting}
-                loadingText="Redirecting..."
+                loadingText={__('Redirecting...')}
             />
         </div>
     );
diff --git a/resources/js/components/onboarding/step-create-account.tsx b/resources/js/components/onboarding/step-create-account.tsx
index 9571c5c6..5810ae0a 100644
--- a/resources/js/components/onboarding/step-create-account.tsx
+++ b/resources/js/components/onboarding/step-create-account.tsx
@@ -10,6 +10,7 @@ import { CreatedAccount } from '@/hooks/use-onboarding-state';
 import { encrypt, importKey } from '@/lib/crypto';
 import { getStoredKey } from '@/lib/key-storage';
 import { type AccountType, formatAccountType } from '@/types/account';
+import { __ } from '@/utils/i18n';
 import { AlertCircle, CheckCircle2, CreditCard } from 'lucide-react';
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { StepButton } from './step-button';
@@ -99,23 +100,25 @@ export function StepCreateAccount({
         const keyString = getStoredKey();
         if (!keyString) {
             setError(
-                'Encryption key not available. Please go back and set up encryption.',
+                __(
+                    'Encryption key not available. Please go back and set up encryption.',
+                ),
             );
             return;
         }
 
         if (!displayName.trim()) {
-            setError('Please enter an account name.');
+            setError(__('Please enter an account name.'));
             return;
         }
 
         if (!type || !currencyCode) {
-            setError('Please fill in all required fields.');
+            setError(__('Please fill in all required fields.'));
             return;
         }
 
         if (isFirstAccount && type !== 'checking') {
-            setError('Your first account must be a checking account.');
+            setError(__('Your first account must be a checking account.'));
             return;
         }
 
@@ -126,7 +129,7 @@ export function StepCreateAccount({
 
             if (customBank) {
                 if (!customBank.name.trim()) {
-                    setError('Please enter a bank name.');
+                    setError(__('Please enter a bank name.'));
                     setIsSubmitting(false);
                     return;
                 }
@@ -137,7 +140,7 @@ export function StepCreateAccount({
                 finalBankId = createdBankId;
             } else {
                 if (!bankId) {
-                    setError('Please select a bank.');
+                    setError(__('Please select a bank.'));
                     setIsSubmitting(false);
                     return;
                 }
@@ -191,7 +194,7 @@ export function StepCreateAccount({
             setError(
                 err instanceof Error
                     ? err.message
-                    : 'Failed to create account. Please try again.',
+                    : __('Failed to create account. Please try again.'),
             );
             setIsSubmitting(false);
         }
@@ -202,21 +205,25 @@ export function StepCreateAccount({
     const { title, description } = useMemo(() => {
         if (hasExistingAccounts) {
             return {
-                title: 'Your Accounts',
-                description:
+                title: __('Your Accounts'),
+                description: __(
                     "You already have accounts set up. Let's continue with the onboarding.",
+                ),
             };
         }
         if (isFirstAccount) {
             return {
-                title: 'Create an Account',
-                description:
+                title: __('Create an Account'),
+                description: __(
                     "Let's start with your main checking account. You can add more accounts later.",
+                ),
             };
         }
         return {
-            title: 'Add Another Account',
-            description: 'Add another account to track more of your finances.',
+            title: __('Add Another Account'),
+            description: __(
+                'Add another account to track more of your finances.',
+            ),
         };
     }, [hasExistingAccounts, isFirstAccount]);
 
@@ -256,7 +263,7 @@ export function StepCreateAccount({
                     </div>
 
                     <StepButton
-                        text="Continue"
+                        text={__('Continue')}
                         className="w-full sm:w-full"
                         onClick={() =>
                             onAccountCreated({
@@ -285,8 +292,9 @@ export function StepCreateAccount({
                     {isFirstAccount && (
                         <div className="rounded-lg border border-blue-100 bg-blue-50 p-3 text-sm dark:border-blue-900/50 dark:bg-blue-900/20">
                             <p className="text-center">
-                                Your first account must be a{' '}
-                                <strong>Checking</strong> account.
+                                {__('Your first account must be a')}{' '}
+                                <strong>{__('Checking')}</strong>{' '}
+                                {__('account.')}
                             </p>
                         </div>
                     )}
@@ -303,8 +311,8 @@ export function StepCreateAccount({
                         className="w-full sm:w-full"
                         disabled={isSubmitting}
                         loading={isSubmitting}
-                        loadingText="Creating..."
-                        text="Create Account"
+                        loadingText={__('Creating...')}
+                        text={__('Create Account')}
                     />
 
                     {!isFirstAccount && onSkip && (
@@ -315,7 +323,7 @@ export function StepCreateAccount({
                             disabled={isSubmitting}
                             onClick={() => onSkip()}
                         >
-                            Ignore
+                            {__('Ignore')}
                         </Button>
                     )}
                 </form>
diff --git a/resources/js/components/onboarding/step-customize-categories.tsx b/resources/js/components/onboarding/step-customize-categories.tsx
index 3280fc7f..111280d8 100644
--- a/resources/js/components/onboarding/step-customize-categories.tsx
+++ b/resources/js/components/onboarding/step-customize-categories.tsx
@@ -1,6 +1,7 @@
 import { StepButton } from '@/components/onboarding/step-button';
 import { StepHeader } from '@/components/onboarding/step-header';
 import { Button } from '@/components/ui/button';
+import { __ } from '@/utils/i18n';
 import { Check, Settings, SkipForward } from 'lucide-react';
 
 interface StepCustomizeCategoriesProps {
@@ -17,22 +18,26 @@ export function StepCustomizeCategories({
             <StepHeader
                 icon={Settings}
                 iconContainerClassName="bg-gradient-to-br from-pink-400 to-rose-500"
-                title="Customize Your Categories"
-                description="We've created a comprehensive set of categories for you. You can customize them now or adjust them later in settings."
+                title={__('Customize Your Categories')}
+                description={__(
+                    "We've created a comprehensive set of categories for you. You can customize them now or adjust them later in settings.",
+                )}
             />
 
             <div className="mb-8 w-full max-w-md rounded-xl border bg-card p-6">
-                <h3 className="mb-4 font-semibold">Your Categories Include:</h3>
+                <h3 className="mb-4 font-semibold">
+                    {__('Your Categories Include:')}
+                </h3>
                 <div className="space-y-2">
                     {[
-                        'Food & Dining (Groceries, Restaurants, Delivery)',
-                        'Housing (Rent, Utilities, Maintenance)',
-                        'Transportation (Fuel, Public Transit, Parking)',
-                        'Shopping (Clothing, Electronics, Gifts)',
-                        'Entertainment (Movies, Sports, Hobbies)',
-                        'Health & Wellness (Medical, Pharmacy, Fitness)',
-                        'Income (Salary, Freelance, Investments)',
-                        'Transfers (Between accounts, Savings)',
+                        __('Food & Dining (Groceries, Restaurants, Delivery)'),
+                        __('Housing (Rent, Utilities, Maintenance)'),
+                        __('Transportation (Fuel, Public Transit, Parking)'),
+                        __('Shopping (Clothing, Electronics, Gifts)'),
+                        __('Entertainment (Movies, Sports, Hobbies)'),
+                        __('Health & Wellness (Medical, Pharmacy, Fitness)'),
+                        __('Income (Salary, Freelance, Investments)'),
+                        __('Transfers (Between accounts, Savings)'),
                     ].map((category) => (
                         <div
                             key={category}
@@ -43,7 +48,7 @@ export function StepCustomizeCategories({
                         </div>
                     ))}
                     <div className="flex items-center gap-2 text-sm text-muted-foreground">
-                        <span className="ml-6">...and 40+ more</span>
+                        <span className="ml-6">{__('...and 40+ more')}</span>
                     </div>
                 </div>
             </div>
@@ -56,14 +61,15 @@ export function StepCustomizeCategories({
                     className="group gap-2"
                 >
                     <SkipForward className="h-4 w-4" />
-                    Use Defaults
+                    {__('Use Defaults')}
                 </Button>
-                <StepButton text="Continue" onClick={onContinue} />
+                <StepButton text={__('Continue')} onClick={onContinue} />
             </div>
 
             <p className="mt-4 text-center text-xs text-muted-foreground">
-                You can always customize categories later in Settings →
-                Categories
+                {__(
+                    'You can always customize categories later in Settings \u2192\n                Categories',
+                )}
             </p>
         </div>
     );
diff --git a/resources/js/components/onboarding/step-encryption-explained.tsx b/resources/js/components/onboarding/step-encryption-explained.tsx
index 97d72c44..47fd886a 100644
--- a/resources/js/components/onboarding/step-encryption-explained.tsx
+++ b/resources/js/components/onboarding/step-encryption-explained.tsx
@@ -1,5 +1,6 @@
 import { StepButton } from '@/components/onboarding/step-button';
 import { StepHeader } from '@/components/onboarding/step-header';
+import { __ } from '@/utils/i18n';
 import { Eye, EyeOff, Lock, Server, Shield, User } from 'lucide-react';
 
 interface StepEncryptionExplainedProps {
@@ -14,30 +15,38 @@ export function StepEncryptionExplained({
             <StepHeader
                 icon={Shield}
                 iconContainerClassName="bg-gradient-to-br from-blue-500 to-indigo-600"
-                title="Your Data, Your Privacy"
-                description="Whisper Money uses end-to-end encryption to protect your financial data. Here's how it works:"
+                title={__('Your Data, Your Privacy')}
+                description={__(
+                    "Whisper Money uses end-to-end encryption to protect your financial data. Here's how it works:",
+                )}
             />
 
             <div className="mb-5 grid w-full max-w-xl gap-4 sm:mb-4">
                 <Item
-                    title="Create a Password"
-                    description="Only you know this password. It never leaves your device."
+                    title={__('Create a Password')}
+                    description={__(
+                        'Only you know this password. It never leaves your device.',
+                    )}
                     icon={
                         <User className="size-4 text-emerald-600 dark:text-emerald-400" />
                     }
                 />
 
                 <Item
-                    title="Data is Encrypted"
-                    description="Your data is encrypted before it leaves your browser."
+                    title={__('Data is Encrypted')}
+                    description={__(
+                        'Your data is encrypted before it leaves your browser.',
+                    )}
                     icon={
                         <Lock className="size-4 text-blue-600 dark:text-blue-400" />
                     }
                 />
 
                 <Item
-                    title="We Can't Read It"
-                    description="Even we can't access your data. It's truly private."
+                    title={__("We Can't Read It")}
+                    description={__(
+                        "Even we can't access your data. It's truly private.",
+                    )}
                     icon={
                         <Server className="size-4 text-violet-600 dark:text-violet-400" />
                     }
@@ -47,22 +56,24 @@ export function StepEncryptionExplained({
             <div className="mb-8 flex w-full max-w-xl flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed border-muted-foreground/20 p-4">
                 <div className="flex items-center gap-2">
                     <Eye className="h-5 w-5 text-muted-foreground" />
-                    <span className="text-sm font-medium">You see:</span>
+                    <span className="text-sm font-medium">
+                        {__('You see:')}
+                    </span>
                     <span className="font-mono text-emerald-600 dark:text-emerald-400">
-                        STARBUCKS@TEKKA PLC
+                        {__('STARBUCKS@TEKKA PLC')}
                     </span>
                 </div>
                 <div className="flex items-center gap-2">
                     <EyeOff className="h-5 w-5 text-muted-foreground" />
-                    <span className="text-sm font-medium">We see:</span>
+                    <span className="text-sm font-medium">{__('We see:')}</span>
                     <span className="font-mono text-muted-foreground">
-                        $KO!F6LMHU1W%TAEQFZMD9
+                        {__('$KO!F6LMHU1W%TAEQFZMD9')}
                     </span>
                 </div>
             </div>
 
             <StepButton
-                text="I Understand, Continue"
+                text={__('I Understand, Continue')}
                 onClick={onContinue}
                 data-testid="encryption-continue-button"
             />
diff --git a/resources/js/components/onboarding/step-encryption-setup.tsx b/resources/js/components/onboarding/step-encryption-setup.tsx
index 24237762..14ab9123 100644
--- a/resources/js/components/onboarding/step-encryption-setup.tsx
+++ b/resources/js/components/onboarding/step-encryption-setup.tsx
@@ -18,6 +18,7 @@ import {
     getKeyFromPassword,
 } from '@/lib/crypto';
 import { storeKey } from '@/lib/key-storage';
+import { __ } from '@/utils/i18n';
 import axios from 'axios';
 import { AlertCircle, CheckCircle2, KeyRound } from 'lucide-react';
 import { useState } from 'react';
@@ -44,12 +45,12 @@ export function StepEncryptionSetup({ onComplete }: StepEncryptionSetupProps) {
         setError(null);
 
         if (password.length < 12) {
-            setError('Password must be at least 12 characters');
+            setError(__('Password must be at least 12 characters'));
             return;
         }
 
         if (password !== confirmPassword) {
-            setError('Passwords do not match');
+            setError(__('Passwords do not match'));
             return;
         }
 
@@ -73,7 +74,7 @@ export function StepEncryptionSetup({ onComplete }: StepEncryptionSetupProps) {
             onComplete();
         } catch (err) {
             console.error('Encryption setup error:', err);
-            setError('Failed to setup encryption. Please try again.');
+            setError(__('Failed to setup encryption. Please try again.'));
             setProcessing(false);
         }
     }
@@ -83,24 +84,29 @@ export function StepEncryptionSetup({ onComplete }: StepEncryptionSetupProps) {
             <StepHeader
                 icon={KeyRound}
                 iconContainerClassName="bg-gradient-to-br from-amber-400 to-orange-500"
-                title="Create Your Encryption Password"
-                description="This password will encrypt all your financial data. Make it strong and memorable — we can't recover it for you."
+                title={__('Create Your Encryption Password')}
+                description={__(
+                    "This password will encrypt all your financial data. Make it strong and memorable \u2014 we can't recover it for you.",
+                )}
             />
 
             <form onSubmit={handleSubmit} className="w-full max-w-md space-y-6">
                 <div className="space-y-2">
-                    <Label htmlFor="password">Encryption Password</Label>
+                    <Label htmlFor="password">
+                        {__('Encryption Password')}
+                    </Label>
                     <Input
                         id="password"
                         type="password"
                         value={password}
                         onChange={(e) => setPassword(e.target.value)}
-                        placeholder="Enter a strong password"
+                        placeholder={__('Enter a strong password')}
                         disabled={processing}
                         autoComplete="new-password"
                         required
                         minLength={12}
                     />
+
                     <div className="flex items-center justify-between gap-2">
                         <div className="flex flex-1 items-center gap-2">
                             <div className="flex flex-1 gap-1">
@@ -116,39 +122,45 @@ export function StepEncryptionSetup({ onComplete }: StepEncryptionSetupProps) {
                                 ))}
                             </div>
                             <span className="text-xs text-muted-foreground">
-                                {passwordStrength.label}
+                                {__(passwordStrength.label)}
                             </span>
                         </div>
                         <span
                             className={`text-xs ${password.length >= 12 ? 'text-emerald-600' : 'text-muted-foreground'}`}
                         >
-                            {password.length}/12 min
+                            {password.length}
+                            {__('/12 min')}
                         </span>
                     </div>
                 </div>
 
                 <div className="space-y-2">
-                    <Label htmlFor="confirmPassword">Confirm Password</Label>
+                    <Label htmlFor="confirmPassword">
+                        {__('Confirm Password')}
+                    </Label>
                     <Input
                         id="confirmPassword"
                         type="password"
                         value={confirmPassword}
                         onChange={(e) => setConfirmPassword(e.target.value)}
-                        placeholder="Confirm your password"
+                        placeholder={__('Confirm your password')}
                         disabled={processing}
                         autoComplete="new-password"
                         required
                     />
+
                     {confirmPassword && password === confirmPassword && (
                         <div className="flex items-center gap-1 text-xs text-emerald-600">
                             <CheckCircle2 className="h-3 w-3" />
-                            Passwords match
+                            {__('Passwords match')}
                         </div>
                     )}
                 </div>
 
                 <div className="space-y-2">
-                    <Label htmlFor="storagePreference">Key Storage</Label>
+                    <Label htmlFor="storagePreference">
+                        {__('Key Storage')}
+                    </Label>
                     <Select
                         value={storagePreference}
                         onValueChange={(value) =>
@@ -163,17 +175,19 @@ export function StepEncryptionSetup({ onComplete }: StepEncryptionSetupProps) {
                         </SelectTrigger>
                         <SelectContent>
                             <SelectItem value="session">
-                                Session only (more secure)
+                                {__('Session only (more secure)')}
                             </SelectItem>
                             <SelectItem value="persistent">
-                                Keep me logged in (convenient)
+                                {__('Keep me logged in (convenient)')}
                             </SelectItem>
                         </SelectContent>
                     </Select>
                     <p className="text-xs text-muted-foreground">
                         {storagePreference === 'session'
-                            ? 'Your key will be cleared when you close the browser.'
-                            : 'Your key will be stored until you log out.'}
+                            ? __(
+                                  'Your key will be cleared when you close the browser.',
+                              )
+                            : __('Your key will be stored until you log out.')}
                     </p>
                 </div>
 
@@ -188,8 +202,8 @@ export function StepEncryptionSetup({ onComplete }: StepEncryptionSetupProps) {
                     type="submit"
                     disabled={processing || password.length < 12}
                     loading={processing}
-                    loadingText="Setting up encryption..."
-                    text={'Setup Encryption'}
+                    loadingText={__('Setting up encryption...')}
+                    text={__('Setup Encryption')}
                     className="w-full sm:w-full"
                 />
             </form>
diff --git a/resources/js/components/onboarding/step-import-balances.tsx b/resources/js/components/onboarding/step-import-balances.tsx
index 79f15f2e..0e615837 100644
--- a/resources/js/components/onboarding/step-import-balances.tsx
+++ b/resources/js/components/onboarding/step-import-balances.tsx
@@ -3,6 +3,7 @@ import { StepHeader } from '@/components/onboarding/step-header';
 import { AmountInput } from '@/components/ui/amount-input';
 import { Label } from '@/components/ui/label';
 import { CreatedAccount } from '@/hooks/use-onboarding-state';
+import { __ } from '@/utils/i18n';
 import { AlertCircle, TrendingUp, Wallet } from 'lucide-react';
 import { useMemo, useState } from 'react';
 
@@ -24,7 +25,7 @@ export function StepImportBalances({
         setError(null);
 
         if (balanceInCents === 0) {
-            setError('Please enter a balance');
+            setError(__('Please enter a balance'));
             return;
         }
 
@@ -35,15 +36,17 @@ export function StepImportBalances({
             onComplete();
         } catch (err) {
             console.error('Failed to set balance:', err);
-            setError('Failed to set balance. Please try again.');
+            setError(__('Failed to set balance. Please try again.'));
             setIsSubmitting(false);
         }
     }
 
     const description = useMemo(() => {
         return account
-            ? `"${account.name}" is a ${account.type} account. These accounts track balance changes over time instead of individual transactions.`
-            : 'Set the current balance for this account to start tracking.';
+            ? __(
+                  'This account tracks balance changes over time instead of individual transactions.',
+              )
+            : __('Set the current balance for this account to start tracking.');
     }, [account]);
 
     return (
@@ -51,7 +54,7 @@ export function StepImportBalances({
             <StepHeader
                 icon={TrendingUp}
                 iconContainerClassName="bg-gradient-to-br from-amber-400 to-orange-500"
-                title="Set Account Balance"
+                title={__('Set Account Balance')}
                 description={description}
             />
 
@@ -61,10 +64,13 @@ export function StepImportBalances({
                         <Wallet className="h-5 w-5 text-amber-600 dark:text-amber-400" />
                     </div>
                     <div>
-                        <h3 className="font-semibold">Balance Tracking</h3>
+                        <h3 className="font-semibold">
+                            {__('Balance Tracking')}
+                        </h3>
                         <p className="text-sm text-muted-foreground">
-                            Perfect for investment portfolios and retirement
-                            accounts
+                            {__(
+                                'Perfect for investment portfolios and retirement\n                            accounts',
+                            )}
                         </p>
                     </div>
                 </div>
@@ -72,22 +78,22 @@ export function StepImportBalances({
                 <ul className="space-y-2 text-sm text-muted-foreground">
                     <li className="flex items-center gap-2">
                         <div className="h-1.5 w-1.5 rounded-full bg-amber-500" />
-                        Update balances periodically to track growth
+                        {__('Update balances periodically to track growth')}
                     </li>
                     <li className="flex items-center gap-2">
                         <div className="h-1.5 w-1.5 rounded-full bg-amber-500" />
-                        Import balance history from CSV files
+                        {__('Import balance history from CSV files')}
                     </li>
                     <li className="flex items-center gap-2">
                         <div className="h-1.5 w-1.5 rounded-full bg-amber-500" />
-                        View balance evolution over time
+                        {__('View balance evolution over time')}
                     </li>
                 </ul>
             </div>
 
             <form onSubmit={handleSubmit} className="w-full max-w-md space-y-4">
                 <div className="space-y-2">
-                    <Label htmlFor="balance">Current Balance</Label>
+                    <Label htmlFor="balance">{__('Current Balance')}</Label>
                     <AmountInput
                         id="balance"
                         value={balanceInCents}
@@ -108,9 +114,9 @@ export function StepImportBalances({
                 <StepButton
                     type="submit"
                     className="w-full sm:w-full"
-                    text="Save Balance"
+                    text={__('Save Balance')}
                     loading={isSubmitting}
-                    loadingText="Saving..."
+                    loadingText={__('Saving...')}
                 />
             </form>
         </div>
diff --git a/resources/js/components/onboarding/step-import-transactions.tsx b/resources/js/components/onboarding/step-import-transactions.tsx
index 9846f267..7cc9a4be 100644
--- a/resources/js/components/onboarding/step-import-transactions.tsx
+++ b/resources/js/components/onboarding/step-import-transactions.tsx
@@ -5,6 +5,7 @@ import { CreatedAccount } from '@/hooks/use-onboarding-state';
 import { type Account, type Bank } from '@/types/account';
 import { type AutomationRule } from '@/types/automation-rule';
 import { type Category } from '@/types/category';
+import { __ } from '@/utils/i18n';
 import { usePage } from '@inertiajs/react';
 import { ArrowRight, FileSpreadsheet, Upload } from 'lucide-react';
 import { useEffect, useMemo, useState } from 'react';
@@ -42,8 +43,12 @@ export function StepImportTransactions({
 
     const description = useMemo(() => {
         return account
-            ? `Import transactions for "${account.name}". You can export transaction history from your bank's website.`
-            : 'Import your transaction history to start tracking your finances.';
+            ? __(
+                  "Import transactions for your account. You can export transaction history from your bank's website.",
+              )
+            : __(
+                  'Import your transaction history to start tracking your finances.',
+              );
     }, [account]);
 
     return (
@@ -51,38 +56,44 @@ export function StepImportTransactions({
             <StepHeader
                 icon={Upload}
                 iconContainerClassName="bg-gradient-to-br from-indigo-400 to-purple-500"
-                title="Import Your Transactions"
+                title={__('Import Your Transactions')}
                 description={description}
             />
 
             <div className="mb-4 w-full max-w-md rounded-xl border bg-card p-6">
                 <h3 className="mb-4 font-semibold">
-                    How to Export from Your Bank:
+                    {__('How to Export from Your Bank:')}
                 </h3>
                 <ol className="space-y-3 text-sm text-muted-foreground">
                     <li className="flex gap-3">
                         <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-semibold text-primary">
                             1
                         </span>
-                        <span>Log in to your bank's website or app</span>
+                        <span>
+                            {__("Log in to your bank's website or app")}
+                        </span>
                     </li>
                     <li className="flex gap-3">
                         <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-semibold text-primary">
                             2
                         </span>
-                        <span>Go to your account's transaction history</span>
+                        <span>
+                            {__("Go to your account's transaction history")}
+                        </span>
                     </li>
                     <li className="flex gap-3">
                         <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-semibold text-primary">
                             3
                         </span>
-                        <span>Look for "Export" or "Download" option</span>
+                        <span>
+                            {__('Look for "Export" or "Download" option')}
+                        </span>
                     </li>
                     <li className="flex gap-3">
                         <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-semibold text-primary">
                             4
                         </span>
-                        <span>Download as CSV or Excel format</span>
+                        <span>{__('Download as CSV or Excel format')}</span>
                     </li>
                 </ol>
             </div>
@@ -90,9 +101,11 @@ export function StepImportTransactions({
             <div className="mb-6 flex w-full max-w-md items-center gap-4 rounded-lg border border-dashed border-muted-foreground/30 p-4">
                 <FileSpreadsheet className="size-10 rounded-full bg-muted p-2.5 text-muted-foreground" />
                 <div className="flex flex-col gap-0.5">
-                    <p className="text-sm font-medium">Supported formats</p>
+                    <p className="text-sm font-medium">
+                        {__('Supported formats')}
+                    </p>
                     <p className="text-xs text-muted-foreground">
-                        CSV, XLS, XLSX files
+                        {__('CSV, XLS, XLSX files')}
                     </p>
                 </div>
             </div>
@@ -104,7 +117,7 @@ export function StepImportTransactions({
                     className="group w-full gap-2 !px-8 py-6 sm:w-auto"
                 >
                     <Upload className="h-4 w-4" />
-                    Import Transactions
+                    {__('Import Transactions')}
                 </Button>
 
                 {hasImported && (
@@ -114,7 +127,8 @@ export function StepImportTransactions({
                         onClick={onComplete}
                         className="group gap-2"
                     >
-                        Continue
+                        {__('Continue')}
+
                         <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
                     </Button>
                 )}
diff --git a/resources/js/components/onboarding/step-more-accounts.tsx b/resources/js/components/onboarding/step-more-accounts.tsx
index cf9cf3ff..4a49b974 100644
--- a/resources/js/components/onboarding/step-more-accounts.tsx
+++ b/resources/js/components/onboarding/step-more-accounts.tsx
@@ -2,8 +2,8 @@ import { StepHeader } from '@/components/onboarding/step-header';
 import { Button } from '@/components/ui/button';
 import { CreatedAccount } from '@/hooks/use-onboarding-state';
 import { formatAccountType } from '@/types/account';
+import { __ } from '@/utils/i18n';
 import { Check, CheckCircle2, Plus, Wallet } from 'lucide-react';
-import { useMemo } from 'react';
 import { StepButton } from './step-button';
 
 interface ExistingAccount {
@@ -33,24 +33,22 @@ export function StepMoreAccounts({
     onAddMore,
     onFinish,
 }: StepMoreAccountsProps) {
-    const totalAccounts = createdAccounts.length + existingAccounts.length;
-
-    const description = useMemo(() => {
-        return `You've set up ${totalAccounts} account${totalAccounts !== 1 ? 's' : ''}. Would you like to add more or continue to the dashboard?`;
-    }, [totalAccounts]);
+    const description = __(
+        'Would you like to add more accounts or continue to the dashboard?',
+    );
 
     return (
         <div className="flex animate-in flex-col items-center duration-500 fade-in slide-in-from-bottom-4">
             <StepHeader
                 icon={Wallet}
                 iconContainerClassName="bg-gradient-to-br from-teal-400 to-cyan-500"
-                title="Great Progress!"
+                title={__('Great Progress!')}
                 description={description}
             />
 
             <div className="mb-8 w-full max-w-md">
                 <h3 className="mb-3 text-sm font-medium text-muted-foreground">
-                    Your Accounts
+                    {__('Your Accounts')}
                 </h3>
                 <div className="space-y-2">
                     {createdAccounts.map((account) => (
@@ -96,10 +94,13 @@ export function StepMoreAccounts({
 
             <div className="mb-6 w-full max-w-md rounded-xl border-2 border-dashed border-muted-foreground/20 p-6">
                 <div className="text-center">
-                    <h3 className="mb-1 font-semibold">Add More Accounts?</h3>
+                    <h3 className="mb-1 font-semibold">
+                        {__('Add More Accounts?')}
+                    </h3>
                     <p className="mb-4 text-sm text-muted-foreground">
-                        Track all your finances in one place — checking,
-                        savings, credit cards, investments, and more.
+                        {__(
+                            'Track all your finances in one place \u2014 checking,\n                        savings, credit cards, investments, and more.',
+                        )}
                     </p>
                     <Button
                         variant="outline"
@@ -107,12 +108,12 @@ export function StepMoreAccounts({
                         className="w-full gap-2 !py-6"
                     >
                         <Plus className="h-4 w-4" />
-                        Add Another Account
+                        {__('Add Another Account')}
                     </Button>
                 </div>
             </div>
 
-            <StepButton text="Finish Setup" onClick={onFinish} />
+            <StepButton text={__('Finish Setup')} onClick={onFinish} />
         </div>
     );
 }
diff --git a/resources/js/components/onboarding/step-smart-rules.tsx b/resources/js/components/onboarding/step-smart-rules.tsx
index efe7d149..8ede7d7e 100644
--- a/resources/js/components/onboarding/step-smart-rules.tsx
+++ b/resources/js/components/onboarding/step-smart-rules.tsx
@@ -1,5 +1,6 @@
 import { StepButton } from '@/components/onboarding/step-button';
 import { StepHeader } from '@/components/onboarding/step-header';
+import { __ } from '@/utils/i18n';
 import { Bot, Eye, EyeOff, Sparkles, Zap } from 'lucide-react';
 
 interface StepSmartRulesProps {
@@ -12,8 +13,10 @@ export function StepSmartRules({ onContinue }: StepSmartRulesProps) {
             <StepHeader
                 icon={Zap}
                 iconContainerClassName="bg-gradient-to-br from-yellow-400 to-amber-500"
-                title="Smart Automation Rules"
-                description="Create rules to automatically categorize your transactions based on patterns you define."
+                title={__('Smart Automation Rules')}
+                description={__(
+                    'Create rules to automatically categorize your transactions based on patterns you define.',
+                )}
             />
 
             <div className="mb-5 grid w-full max-w-2xl gap-4 md:grid-cols-2">
@@ -22,11 +25,14 @@ export function StepSmartRules({ onContinue }: StepSmartRulesProps) {
                         <div className="mb-3 flex size-8 items-center justify-center rounded-lg bg-emerald-100 dark:bg-emerald-900/30">
                             <Sparkles className="size-5 text-emerald-600 dark:text-emerald-400" />
                         </div>
-                        <h3 className="mb-2 font-semibold">Pattern Matching</h3>
+                        <h3 className="mb-2 font-semibold">
+                            {__('Pattern Matching')}
+                        </h3>
                     </div>
                     <p className="text-sm text-muted-foreground">
-                        Create rules like "If description contains 'AMAZON',
-                        categorize as Shopping"
+                        {__(
+                            'Create rules like "If description contains \'AMAZON\',\n                        categorize as Shopping"',
+                        )}
                     </p>
                 </div>
 
@@ -36,12 +42,13 @@ export function StepSmartRules({ onContinue }: StepSmartRulesProps) {
                             <Zap className="size-5 text-blue-600 dark:text-blue-400" />
                         </div>
                         <h3 className="mb-2 font-semibold">
-                            Instant Application
+                            {__('Instant Application')}
                         </h3>
                     </div>
                     <p className="text-sm text-muted-foreground">
-                        Rules apply automatically when you import new
-                        transactions
+                        {__(
+                            'Rules apply automatically when you import new\n                        transactions',
+                        )}
                     </p>
                 </div>
             </div>
@@ -50,10 +57,10 @@ export function StepSmartRules({ onContinue }: StepSmartRulesProps) {
                 <div className="mb-4 flex items-center gap-3">
                     <div>
                         <h3 className="font-semibold text-amber-900 dark:text-amber-100">
-                            Why No AI Auto-Categorization?
+                            {__('Why No AI Auto-Categorization?')}
                         </h3>
                         <p className="text-sm text-amber-800 dark:text-amber-200">
-                            Privacy comes first
+                            {__('Privacy comes first')}
                         </p>
                     </div>
                 </div>
@@ -65,12 +72,14 @@ export function StepSmartRules({ onContinue }: StepSmartRulesProps) {
                         </div>
                         <div>
                             <p className="text-sm font-medium text-amber-900 dark:text-amber-100">
-                                AI requires sending your data to external
-                                servers
+                                {__(
+                                    'AI requires sending your data to external\n                                servers',
+                                )}
                             </p>
                             <p className="text-xs text-amber-700 dark:text-amber-300">
-                                This would break our end-to-end encryption
-                                promise
+                                {__(
+                                    'This would break our end-to-end encryption\n                                promise',
+                                )}
                             </p>
                         </div>
                     </div>
@@ -81,10 +90,12 @@ export function StepSmartRules({ onContinue }: StepSmartRulesProps) {
                         </div>
                         <div>
                             <p className="text-sm font-medium text-amber-900 dark:text-amber-100">
-                                Your rules run entirely in your browser
+                                {__('Your rules run entirely in your browser')}
                             </p>
                             <p className="text-xs text-amber-700 dark:text-amber-300">
-                                We never see your transaction descriptions
+                                {__(
+                                    'We never see your transaction descriptions',
+                                )}
                             </p>
                         </div>
                     </div>
@@ -95,17 +106,17 @@ export function StepSmartRules({ onContinue }: StepSmartRulesProps) {
                         </div>
                         <div>
                             <p className="text-sm font-medium text-amber-900 dark:text-amber-100">
-                                You're in complete control
+                                {__("You're in complete control")}
                             </p>
                             <p className="text-xs text-amber-700 dark:text-amber-300">
-                                Create, edit, and delete rules anytime
+                                {__('Create, edit, and delete rules anytime')}
                             </p>
                         </div>
                     </div>
                 </div>
             </div>
 
-            <StepButton text="Continue to Import" onClick={onContinue} />
+            <StepButton text={__('Continue to Import')} onClick={onContinue} />
         </div>
     );
 }
diff --git a/resources/js/components/onboarding/step-welcome.tsx b/resources/js/components/onboarding/step-welcome.tsx
index e17859f7..66ef3e9a 100644
--- a/resources/js/components/onboarding/step-welcome.tsx
+++ b/resources/js/components/onboarding/step-welcome.tsx
@@ -1,5 +1,6 @@
 import { StepButton } from '@/components/onboarding/step-button';
 import { StepHeader } from '@/components/onboarding/step-header';
+import { __ } from '@/utils/i18n';
 import { Bird } from 'lucide-react';
 
 interface StepWelcomeProps {
@@ -12,16 +13,21 @@ export function StepWelcome({ onContinue }: StepWelcomeProps) {
             <StepHeader
                 icon={Bird}
                 iconContainerClassName="bg-gradient-to-br from-black to-zinc-700"
-                title="Welcome to</br>Whisper Money"
-                description="Take control of your finances with privacy-first money tracking. Let's set up your account in just a few minutes."
+                title={__('Welcome to</br>Whisper Money')}
+                description={__(
+                    "Take control of your finances with privacy-first money tracking. Let's set up your account in just a few minutes.",
+                )}
                 large
             />
 
             <div className="flex w-full flex-col gap-4 sm:w-auto">
-                <StepButton text="Let's Get Started" onClick={onContinue} />
+                <StepButton
+                    text={__("Let's Get Started")}
+                    onClick={onContinue}
+                />
 
                 <p className="text-sm text-muted-foreground">
-                    This will take less than 5 minutes
+                    {__('This will take less than 5 minutes')}
                 </p>
             </div>
         </div>
diff --git a/resources/js/components/partials/header.tsx b/resources/js/components/partials/header.tsx
index cb33bf18..6ad150ec 100644
--- a/resources/js/components/partials/header.tsx
+++ b/resources/js/components/partials/header.tsx
@@ -1,6 +1,7 @@
 import { cn } from '@/lib/utils';
 import { dashboard } from '@/routes';
 import { type SharedData } from '@/types';
+import { __ } from '@/utils/i18n';
 import { Link, usePage } from '@inertiajs/react';
 import { BirdIcon, Github, StarIcon } from 'lucide-react';
 import { useEffect, useState } from 'react';
@@ -50,6 +51,61 @@ export default function Header({
                     <span className="text-sm font-medium">Whisper Money</span>
                 </div>
                 <nav className="flex items-center gap-2">
+                    {!hideExternalButtons && (
+                        <>
+                            <a
+                                href="https://github.com/whisper-money/whisper-money"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                            >
+                                <Button
+                                    variant={'ghost'}
+                                    className={cn([
+                                        'cursor-pointer opacity-70 transition-all duration-200 hover:opacity-100',
+                                        { 'hidden sm:flex': !hideAuthButtons },
+                                    ])}
+                                >
+                                    <Github className="size-5" />
+                                    <span className="hidden sm:inline">
+                                        {__('Github')}
+                                    </span>
+                                    {stars !== null && (
+                                        <span className="flex items-center gap-1 rounded-full bg-muted px-1.5 py-0.5 text-xs font-medium">
+                                            <StarIcon className="size-3 fill-amber-400 text-amber-400" />
+                                            {stars}
+                                        </span>
+                                    )}
+                                </Button>
+                            </a>
+                            <a
+                                href="https://discord.gg/9UQWZECDDv"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                            >
+                                <Button
+                                    variant={'ghost'}
+                                    className={cn([
+                                        'cursor-pointer opacity-70 transition-all duration-200 hover:opacity-100',
+                                        { 'hidden sm:flex': !hideAuthButtons },
+                                    ])}
+                                >
+                                    <DiscordIcon className="size-5" />
+                                    <span className="hidden sm:inline">
+                                        Discord
+                                    </span>
+                                </Button>
+                            </a>
+                        </>
+                    )}
+                    {!hideAuthButtons && !hideExternalButtons && (
+                        <Separator
+                            orientation="vertical"
+                            className={cn([
+                                'data-[orientation=vertical]:h-6 data-[orientation=vertical]:w-[1px] data-[orientation=vertical]:bg-border',
+                                { 'hidden sm:block': !hideAuthButtons },
+                            ])}
+                        />
+                    )}
                     {!hideAuthButtons && (
                         <>
                             {auth.user ? (
@@ -58,7 +114,7 @@ export default function Header({
                                         size="sm"
                                         className="cursor-pointer rounded-full"
                                     >
-                                        Dashboard
+                                        {__('Dashboard')}
                                     </Button>
                                 </Link>
                             ) : (
@@ -69,7 +125,7 @@ export default function Header({
                                             size="sm"
                                             className="cursor-pointer rounded-full"
                                         >
-                                            Log in
+                                            {__('Log in')}
                                         </Button>
                                     </Link>
                                     {canRegister && (
@@ -79,7 +135,7 @@ export default function Header({
                                                 size="sm"
                                                 className="cursor-pointer rounded-full"
                                             >
-                                                Register
+                                                {__('Register')}
                                             </Button>
                                         </Link>
                                     )}
diff --git a/resources/js/components/shared/category-combobox.tsx b/resources/js/components/shared/category-combobox.tsx
index be42670e..8c613f19 100644
--- a/resources/js/components/shared/category-combobox.tsx
+++ b/resources/js/components/shared/category-combobox.tsx
@@ -13,6 +13,7 @@ import {
 } from '@/components/ui/popover';
 import { cn } from '@/lib/utils';
 import { type Category, getCategoryColorClasses } from '@/types/category';
+import { __ } from '@/utils/i18n';
 import * as Icons from 'lucide-react';
 import {
     Check,
@@ -117,7 +118,7 @@ export function CategoryCombobox({
                                 <HelpCircle className="h-3 w-3 text-zinc-500" />
                             </div>
                             <span className="truncate text-zinc-500">
-                                Uncategorized
+                                {__('Uncategorized')}
                             </span>
                         </div>
                     ) : (
@@ -133,12 +134,13 @@ export function CategoryCombobox({
             <PopoverContent className="p-0" align="start">
                 <Command>
                     <CommandInput
-                        placeholder="Search categories..."
+                        placeholder={__('Search categories...')}
                         value={filterValue}
                         onValueChange={setFilterValue}
                     />
+
                     <CommandList ref={listRef}>
-                        <CommandEmpty>No category found.</CommandEmpty>
+                        <CommandEmpty>{__('No category found.')}</CommandEmpty>
                         {showUncategorized && (
                             <CommandItem
                                 value="uncategorized"
@@ -151,7 +153,7 @@ export function CategoryCombobox({
                                     <div className="flex h-6 w-6 items-center justify-center rounded-full bg-zinc-100 dark:bg-zinc-800">
                                         <HelpCircle className="h-3 w-3 text-zinc-500" />
                                     </div>
-                                    <span>Uncategorized</span>
+                                    <span>{__('Uncategorized')}</span>
                                 </div>
                                 <Check
                                     className={cn(
diff --git a/resources/js/components/shared/label-combobox.tsx b/resources/js/components/shared/label-combobox.tsx
index 9d34508b..b322d601 100644
--- a/resources/js/components/shared/label-combobox.tsx
+++ b/resources/js/components/shared/label-combobox.tsx
@@ -15,6 +15,7 @@ import {
 } from '@/components/ui/popover';
 import { cn } from '@/lib/utils';
 import { getLabelColorClasses, LABEL_COLORS, type Label } from '@/types/label';
+import { __ } from '@/utils/i18n';
 import { Check, ChevronsUpDown, Plus, Tag, X } from 'lucide-react';
 import { useState } from 'react';
 
@@ -190,13 +191,16 @@ export function LabelCombobox({
             <PopoverContent className="w-[300px] p-0" align="start">
                 <Command shouldFilter={false}>
                     <CommandInput
-                        placeholder="Search or create labels..."
+                        placeholder={__('Search or create labels...')}
                         value={inputValue}
                         onValueChange={setInputValue}
                     />
+
                     <CommandList>
                         {sortedLabels.length === 0 && !showCreateOption && (
-                            <CommandEmpty>No labels found.</CommandEmpty>
+                            <CommandEmpty>
+                                {__('No labels found.')}
+                            </CommandEmpty>
                         )}
                         {allowRemoveAll && (
                             <CommandItem
@@ -207,7 +211,7 @@ export function LabelCombobox({
                                 className="gap-2"
                             >
                                 <X className="h-4 w-4" />
-                                Remove all labels
+                                {__('Remove all labels')}
                             </CommandItem>
                         )}
                         {showCreateOption && (
diff --git a/resources/js/components/sync-status-button.tsx b/resources/js/components/sync-status-button.tsx
index 72ae698a..2c851698 100644
--- a/resources/js/components/sync-status-button.tsx
+++ b/resources/js/components/sync-status-button.tsx
@@ -8,6 +8,7 @@ import {
     DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { useSyncContext } from '@/contexts/sync-context';
+import { __ } from '@/utils/i18n';
 import { formatDistanceToNow } from 'date-fns';
 import { CloudAlert, CloudCheck, CloudOff, RefreshCw } from 'lucide-react';
 import { useState } from 'react';
@@ -83,7 +84,7 @@ export function SyncStatusButton() {
                     <RefreshCw
                         className={`mr-2 h-4 w-4 ${syncStatus === 'syncing' ? 'animate-spin' : ''}`}
                     />
-                    Sync now
+                    {__('Sync now')}
                 </DropdownMenuItem>
             </DropdownMenuContent>
         </DropdownMenu>
diff --git a/resources/js/components/transactions/bulk-actions-bar.tsx b/resources/js/components/transactions/bulk-actions-bar.tsx
index 05ccab93..94501eb6 100644
--- a/resources/js/components/transactions/bulk-actions-bar.tsx
+++ b/resources/js/components/transactions/bulk-actions-bar.tsx
@@ -18,6 +18,7 @@ import {
 import { isAdmin } from '@/hooks/use-admin';
 import { type Category } from '@/types/category';
 import { type Label } from '@/types/label';
+import { __ } from '@/utils/i18n';
 import {
     CheckCheck,
     MoreHorizontal,
@@ -74,7 +75,8 @@ export function BulkActionsBar({
                 <div className="flex items-center gap-2 pl-2 text-sm">
                     {isSelectingAll ? (
                         <>
-                            All {displayCount} transaction
+                            {__('All')}
+                            {displayCount} transaction
                             {displayCount !== 1 ? 's' : ''} selected
                         </>
                     ) : (
@@ -96,12 +98,15 @@ export function BulkActionsBar({
                                             className="h-auto px-0 py-1 text-xs text-primary hover:text-primary/80"
                                         >
                                             <CheckCheck className="mr-1 h-3 w-3" />
-                                            Select all
+                                            {__('Select all')}
                                         </Button>
                                     </TooltipTrigger>
                                     <TooltipContent>
-                                        Select all {totalFilteredCount}{' '}
-                                        transactions matching current filter
+                                        {__('Select all')}
+                                        {totalFilteredCount}{' '}
+                                        {__(
+                                            'transactions matching current filter',
+                                        )}
                                     </TooltipContent>
                                 </Tooltip>
                             </TooltipProvider>
@@ -129,7 +134,7 @@ export function BulkActionsBar({
                                     variant="outline"
                                     size="icon"
                                     disabled={isUpdating}
-                                    aria-label="More actions"
+                                    aria-label={__('More actions')}
                                 >
                                     <MoreHorizontal className="h-4 w-4" />
                                 </Button>
@@ -141,7 +146,7 @@ export function BulkActionsBar({
                                         disabled={isUpdating}
                                     >
                                         <WandSparkles className="h-4 w-4" />
-                                        Re-evaluate rules
+                                        {__('Re-evaluate rules')}
                                     </DropdownMenuItem>
 
                                     {isDeleteEnabled && (
@@ -150,7 +155,7 @@ export function BulkActionsBar({
                                             onSelect={onDelete}
                                         >
                                             <Trash2 />
-                                            Delete
+                                            {__('Delete')}
                                         </DropdownMenuItem>
                                     )}
                                 </DropdownMenuGroup>
@@ -164,7 +169,7 @@ export function BulkActionsBar({
                             size="icon"
                             onClick={onClear}
                             disabled={isUpdating}
-                            aria-label="Clear selection"
+                            aria-label={__('Clear selection')}
                         >
                             <X className="h-4 w-4" />
                         </Button>
diff --git a/resources/js/components/transactions/bulk-category-select.tsx b/resources/js/components/transactions/bulk-category-select.tsx
index 50fb6ba3..6f31f9e7 100644
--- a/resources/js/components/transactions/bulk-category-select.tsx
+++ b/resources/js/components/transactions/bulk-category-select.tsx
@@ -1,5 +1,6 @@
 import { CategorySelect } from '@/components/transactions/category-select';
 import { type Category } from '@/types/category';
+import { __ } from '@/utils/i18n';
 import { useState } from 'react';
 
 interface BulkCategorySelectProps {
@@ -27,7 +28,7 @@ export function BulkCategorySelect({
             onValueChange={handleChange}
             categories={categories}
             disabled={disabled}
-            placeholder="Change category"
+            placeholder={__('Change category')}
             triggerClassName="h-9 w-[180px]"
             showUncategorized={true}
         />
diff --git a/resources/js/components/transactions/bulk-label-select.tsx b/resources/js/components/transactions/bulk-label-select.tsx
index bb209734..da41acc5 100644
--- a/resources/js/components/transactions/bulk-label-select.tsx
+++ b/resources/js/components/transactions/bulk-label-select.tsx
@@ -1,5 +1,6 @@
 import { LabelCombobox } from '@/components/shared/label-combobox';
 import { type Label } from '@/types/label';
+import { __ } from '@/utils/i18n';
 import { useState } from 'react';
 
 interface BulkLabelSelectProps {
@@ -26,7 +27,7 @@ export function BulkLabelSelect({
             onValueChange={handleChange}
             labels={labels}
             disabled={disabled}
-            placeholder="Add labels"
+            placeholder={__('Add labels')}
             triggerClassName="h-9 w-[180px] min-h-9"
             allowCreate={true}
             allowRemoveAll={true}
diff --git a/resources/js/components/transactions/category-cell.tsx b/resources/js/components/transactions/category-cell.tsx
index 3b982aba..d9987580 100644
--- a/resources/js/components/transactions/category-cell.tsx
+++ b/resources/js/components/transactions/category-cell.tsx
@@ -7,6 +7,7 @@ import { transactionSyncService } from '@/services/transaction-sync';
 import { type Account, type Bank } from '@/types/account';
 import { type Category } from '@/types/category';
 import { type DecryptedTransaction } from '@/types/transaction';
+import { __ } from '@/utils/i18n';
 import { useState } from 'react';
 import { toast } from 'sonner';
 
@@ -102,7 +103,7 @@ export function CategoryCell({
             onValueChange={handleCategoryChange}
             categories={categories}
             disabled={isUpdating}
-            placeholder="Uncategorized"
+            placeholder={__('Uncategorized')}
             triggerClassName={cn(
                 'h-auto w-auto border-0 bg-transparent p-0 shadow-none focus:ring-0',
                 className || '',
diff --git a/resources/js/components/transactions/edit-transaction-dialog.tsx b/resources/js/components/transactions/edit-transaction-dialog.tsx
index 46cf48db..f9d6c35d 100644
--- a/resources/js/components/transactions/edit-transaction-dialog.tsx
+++ b/resources/js/components/transactions/edit-transaction-dialog.tsx
@@ -27,6 +27,7 @@ import {
 import { Textarea } from '@/components/ui/textarea';
 import { useEncryptionKey } from '@/contexts/encryption-key-context';
 import { useSyncContext } from '@/contexts/sync-context';
+import { useLocale } from '@/hooks/use-locale';
 import { decrypt, encrypt, importKey } from '@/lib/crypto';
 import { getStoredKey } from '@/lib/key-storage';
 import { evaluateRulesForNewTransaction } from '@/lib/rule-engine';
@@ -41,7 +42,9 @@ import { type AutomationRule } from '@/types/automation-rule';
 import { type Category } from '@/types/category';
 import { type Label } from '@/types/label';
 import { type DecryptedTransaction } from '@/types/transaction';
-import { format, getYear, parseISO } from 'date-fns';
+import { formatDate } from '@/utils/date';
+import { __ } from '@/utils/i18n';
+import { getYear, parseISO } from 'date-fns';
 import { useEffect, useState } from 'react';
 import { toast } from 'sonner';
 
@@ -70,6 +73,7 @@ export function EditTransactionDialog({
     onSuccess,
     mode,
 }: EditTransactionDialogProps) {
+    const locale = useLocale();
     const STORAGE_KEY_UPDATE_BALANCE =
         'whisper_money_update_balance_on_transaction';
 
@@ -308,7 +312,9 @@ export function EditTransactionDialog({
             }
         } catch (error) {
             console.error('Failed to update account balance:', error);
-            toast.error('Transaction created, but failed to update balance');
+            toast.error(
+                __('Transaction created, but failed to update balance'),
+            );
         }
     }
 
@@ -317,26 +323,26 @@ export function EditTransactionDialog({
 
         if (!isKeySet) {
             toast.error(
-                'Please unlock your encryption key to save transactions',
+                __('Please unlock your encryption key to save transactions'),
             );
             return;
         }
 
         if (mode === 'create') {
             if (!description.trim()) {
-                toast.error('Description is required');
+                toast.error(__('Description is required'));
                 return;
             }
             if (amount === 0) {
-                toast.error('Amount is required');
+                toast.error(__('Amount is required'));
                 return;
             }
             if (!accountId) {
-                toast.error('Account is required');
+                toast.error(__('Account is required'));
                 return;
             }
             if (!transactionDate) {
-                toast.error('Date is required');
+                toast.error(__('Date is required'));
                 return;
             }
         } else if (
@@ -344,7 +350,7 @@ export function EditTransactionDialog({
             transaction?.source === 'manually_created'
         ) {
             if (!description.trim()) {
-                toast.error('Description is required');
+                toast.error(__('Description is required'));
                 return;
             }
         }
@@ -354,7 +360,7 @@ export function EditTransactionDialog({
             const trimmedDescription = description.trim();
             const keyString = getStoredKey();
             if (!keyString) {
-                throw new Error('Encryption key not available');
+                throw new Error(__('Encryption key not available'));
             }
             const key = await importKey(keyString);
 
@@ -396,7 +402,7 @@ export function EditTransactionDialog({
                     (acc) => acc.id === accountId,
                 );
                 if (!selectedAccount) {
-                    throw new Error('Selected account not found');
+                    throw new Error(__('Selected account not found'));
                 }
 
                 const createdTransaction = await transactionSyncService.create({
@@ -446,9 +452,13 @@ export function EditTransactionDialog({
                     );
                 }
 
-                toast.success('Transaction created successfully');
+                toast.success(__('Transaction created successfully'));
                 if (ruleResult.ruleName) {
-                    toast.success(`Rule "${ruleResult.ruleName}" applied`);
+                    toast.success(
+                        __('Rule ":rule" applied', {
+                            rule: ruleResult.ruleName,
+                        }),
+                    );
                 }
 
                 onSuccess(newTransaction);
@@ -538,7 +548,7 @@ export function EditTransactionDialog({
                         updatedRecord?.updated_at ?? transaction.updated_at,
                 };
 
-                toast.success('Transaction updated successfully');
+                toast.success(__('Transaction updated successfully'));
                 onSuccess(updatedTransaction);
                 onOpenChange(false);
 
@@ -548,7 +558,9 @@ export function EditTransactionDialog({
         } catch (error) {
             console.error('Failed to save transaction:', error);
             toast.error(
-                `Failed to ${mode === 'create' ? 'create' : 'update'} transaction`,
+                mode === 'create'
+                    ? __('Failed to create transaction')
+                    : __('Failed to update transaction'),
             );
         } finally {
             setIsSubmitting(false);
@@ -564,13 +576,15 @@ export function EditTransactionDialog({
                 <DialogHeader>
                     <DialogTitle>
                         {mode === 'create'
-                            ? 'Add Transaction'
-                            : 'Edit Transaction'}
+                            ? __('Add Transaction')
+                            : __('Edit Transaction')}
                     </DialogTitle>
                     <DialogDescription>
                         {mode === 'create'
-                            ? 'Create a new transaction.'
-                            : 'Update the category and notes for this transaction.'}
+                            ? __('Create a new transaction.')
+                            : __(
+                                  'Update the category and notes for this transaction.',
+                              )}
                     </DialogDescription>
                 </DialogHeader>
 
@@ -585,7 +599,7 @@ export function EditTransactionDialog({
                                         : ''
                                 }
                             >
-                                Date
+                                {__('Date')}
                             </FormLabel>
                             {mode === 'create' ? (
                                 <Input
@@ -614,7 +628,18 @@ export function EditTransactionDialog({
                                                 transactionYear === currentYear
                                                     ? 'MMMM d'
                                                     : 'MMMM d, yyyy';
-                                            return format(date, formatString);
+                                            const formatted = formatDate(
+                                                date,
+                                                formatString,
+                                                locale,
+                                            );
+                                            // Capitalize first letter
+                                            return (
+                                                formatted
+                                                    .charAt(0)
+                                                    .toUpperCase() +
+                                                formatted.slice(1)
+                                            );
                                         })()}
                                 </div>
                             )}
@@ -630,7 +655,7 @@ export function EditTransactionDialog({
                                         : ''
                                 }
                             >
-                                Description
+                                {__('Description')}
                             </FormLabel>
                             {mode === 'create' ||
                             (mode === 'edit' &&
@@ -641,7 +666,7 @@ export function EditTransactionDialog({
                                     onChange={(e) =>
                                         setDescription(e.target.value)
                                     }
-                                    placeholder="Transaction description"
+                                    placeholder={__('Transaction description')}
                                     disabled={isSubmitting}
                                     required
                                     rows={3}
@@ -658,10 +683,11 @@ export function EditTransactionDialog({
                                         className="bg-muted"
                                         rows={3}
                                     />
+
                                     <p className="text-xs text-muted-foreground">
-                                        This transaction was imported from a
-                                        file. The description cannot be
-                                        modified.
+                                        {__(
+                                            'This transaction was imported from a\n                                        file. The description cannot be\n                                        modified.',
+                                        )}
                                     </p>
                                 </div>
                             )}
@@ -676,7 +702,7 @@ export function EditTransactionDialog({
                                         : ''
                                 }
                             >
-                                Amount
+                                {__('Amount')}
                             </FormLabel>
                             {mode === 'create' ? (
                                 <>
@@ -703,11 +729,12 @@ export function EditTransactionDialog({
                                             }
                                             disabled={isSubmitting}
                                         />
+
                                         <FormLabel
                                             htmlFor="update-balance"
                                             className="cursor-pointer font-normal"
                                         >
-                                            Update account balance
+                                            {__('Update account balance')}
                                         </FormLabel>
                                     </div>
                                 </>
@@ -724,7 +751,9 @@ export function EditTransactionDialog({
 
                         {mode === 'create' && (
                             <div className="space-y-2">
-                                <FormLabel htmlFor="account">Account</FormLabel>
+                                <FormLabel htmlFor="account">
+                                    {__('Account')}
+                                </FormLabel>
                                 <Select
                                     value={accountId}
                                     onValueChange={setAccountId}
@@ -734,7 +763,9 @@ export function EditTransactionDialog({
                                         id="account"
                                         data-testid="account-select"
                                     >
-                                        <SelectValue placeholder="Select account" />
+                                        <SelectValue
+                                            placeholder={__('Select account')}
+                                        />
                                     </SelectTrigger>
                                     <SelectContent>
                                         {transactionalAccounts.map(
@@ -745,7 +776,7 @@ export function EditTransactionDialog({
                                                 >
                                                     {decryptedAccountNames.get(
                                                         account.id,
-                                                    ) || '[Loading...]'}
+                                                    ) || __('[Loading...]')}
                                                 </SelectItem>
                                             ),
                                         )}
@@ -755,13 +786,15 @@ export function EditTransactionDialog({
                         )}
 
                         <div className="space-y-2">
-                            <FormLabel htmlFor="category">Category</FormLabel>
+                            <FormLabel htmlFor="category">
+                                {__('Category')}
+                            </FormLabel>
                             <CategorySelect
                                 value={categoryId}
                                 onValueChange={setCategoryId}
                                 categories={categories}
                                 disabled={isSubmitting}
-                                placeholder="Uncategorized"
+                                placeholder={__('Uncategorized')}
                                 triggerClassName="w-full"
                                 showUncategorized={true}
                                 data-testid="category-select"
@@ -769,22 +802,22 @@ export function EditTransactionDialog({
                         </div>
 
                         <div className="space-y-2">
-                            <FormLabel>Labels</FormLabel>
+                            <FormLabel>{__('Labels')}</FormLabel>
                             <LabelCombobox
                                 value={selectedLabelIds}
                                 onValueChange={setSelectedLabelIds}
                                 labels={labels}
                                 disabled={isSubmitting}
-                                placeholder="Add labels..."
+                                placeholder={__('Add labels...')}
                                 allowCreate={true}
                             />
                         </div>
 
                         <div className="space-y-2">
-                            <FormLabel htmlFor="notes">Notes</FormLabel>
+                            <FormLabel htmlFor="notes">{__('Notes')}</FormLabel>
                             <Textarea
                                 id="notes"
-                                placeholder="Add notes..."
+                                placeholder={__('Add notes...')}
                                 value={notes}
                                 onChange={(e) => setNotes(e.target.value)}
                                 rows={3}
@@ -800,7 +833,7 @@ export function EditTransactionDialog({
                             onClick={() => onOpenChange(false)}
                             disabled={isSubmitting}
                         >
-                            Cancel
+                            {__('Cancel')}
                         </Button>
                         <Button
                             type="submit"
@@ -808,10 +841,10 @@ export function EditTransactionDialog({
                             data-testid="submit-transaction"
                         >
                             {isSubmitting
-                                ? 'Saving...'
+                                ? __('Saving...')
                                 : mode === 'create'
-                                  ? 'Create Transaction'
-                                  : 'Save Changes'}
+                                  ? __('Create Transaction')
+                                  : __('Save Changes')}
                         </Button>
                     </DialogFooter>
                 </form>
diff --git a/resources/js/components/transactions/import-step-account.tsx b/resources/js/components/transactions/import-step-account.tsx
index 92060938..4276f850 100644
--- a/resources/js/components/transactions/import-step-account.tsx
+++ b/resources/js/components/transactions/import-step-account.tsx
@@ -4,6 +4,7 @@ import { Label } from '@/components/ui/label';
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
 import { filterTransactionalAccounts, type Account } from '@/types/account';
 import type { UUID } from '@/types/uuid';
+import { __ } from '@/utils/i18n';
 import { Building2 } from 'lucide-react';
 import { useEffect } from 'react';
 
@@ -34,7 +35,7 @@ export function ImportStepAccount({
         return (
             <div className="flex flex-col items-center justify-center py-8 text-center">
                 <p className="text-sm text-muted-foreground">
-                    No accounts found. Please create an account first.
+                    {__('No accounts found. Please create an account first.')}
                 </p>
             </div>
         );
@@ -57,6 +58,7 @@ export function ImportStepAccount({
                                 value={account.id}
                                 id={`account-${account.id}`}
                             />
+
                             {account.bank.logo ? (
                                 <img
                                     src={account.bank.logo}
@@ -88,7 +90,7 @@ export function ImportStepAccount({
 
             <div className="flex justify-end">
                 <Button onClick={onNext} disabled={!selectedAccountId}>
-                    Next
+                    {__('Next')}
                 </Button>
             </div>
         </div>
diff --git a/resources/js/components/transactions/import-step-mapping.tsx b/resources/js/components/transactions/import-step-mapping.tsx
index 78117c75..f09e6263 100644
--- a/resources/js/components/transactions/import-step-mapping.tsx
+++ b/resources/js/components/transactions/import-step-mapping.tsx
@@ -15,6 +15,7 @@ import {
     type ColumnOption,
     type ParsedRow,
 } from '@/types/import';
+import { __ } from '@/utils/i18n';
 
 interface ImportStepMappingProps {
     columnOptions: ColumnOption[];
@@ -135,7 +136,7 @@ export function ImportStepMapping({
             <div className="space-y-4">
                 <div className="space-y-2">
                     <Label htmlFor="date-column">
-                        Transaction Date{' '}
+                        {__('Transaction Date')}{' '}
                         <span className="text-destructive">*</span>
                     </Label>
                     <Select
@@ -145,7 +146,9 @@ export function ImportStepMapping({
                         }
                     >
                         <SelectTrigger id="date-column">
-                            <SelectValue placeholder="Select date column" />
+                            <SelectValue
+                                placeholder={__('Select date column')}
+                            />
                         </SelectTrigger>
                         <SelectContent>
                             {columnOptions.map((option, index) => (
@@ -164,7 +167,8 @@ export function ImportStepMapping({
 
                 <div className="space-y-2">
                     <Label htmlFor="description-column-0">
-                        Description <span className="text-destructive">*</span>
+                        {__('Description')}
+                        <span className="text-destructive">*</span>
                     </Label>
                     {descriptionColumns.length === 0 ? (
                         <Select
@@ -174,7 +178,11 @@ export function ImportStepMapping({
                             }
                         >
                             <SelectTrigger id="description-column-0">
-                                <SelectValue placeholder="Select description column" />
+                                <SelectValue
+                                    placeholder={__(
+                                        'Select description column',
+                                    )}
+                                />
                             </SelectTrigger>
                             <SelectContent>
                                 {columnOptions.map((option, index) => (
@@ -219,7 +227,7 @@ export function ImportStepMapping({
                                         <SelectContent>
                                             {columnIndex > 0 && (
                                                 <SelectItem value="__none__">
-                                                    None (Remove)
+                                                    {__('None (Remove)')}
                                                 </SelectItem>
                                             )}
                                             {columnOptions.map(
@@ -252,7 +260,7 @@ export function ImportStepMapping({
                                         onClick={addDescriptionColumn}
                                         className="ml-4"
                                     >
-                                        + Add another column
+                                        {__('+ Add another column')}
                                     </Button>
                                 )}
                         </div>
@@ -261,7 +269,8 @@ export function ImportStepMapping({
 
                 <div className="space-y-2">
                     <Label htmlFor="amount-column">
-                        Amount <span className="text-destructive">*</span>
+                        {__('Amount')}
+                        <span className="text-destructive">*</span>
                     </Label>
                     <Select
                         value={columnMapping.amount || ''}
@@ -270,7 +279,9 @@ export function ImportStepMapping({
                         }
                     >
                         <SelectTrigger id="amount-column">
-                            <SelectValue placeholder="Select amount column" />
+                            <SelectValue
+                                placeholder={__('Select amount column')}
+                            />
                         </SelectTrigger>
                         <SelectContent>
                             {columnOptions.map((option, index) => (
@@ -286,7 +297,9 @@ export function ImportStepMapping({
                 </div>
 
                 <div className="space-y-2">
-                    <Label htmlFor="balance-column">Balance (Optional)</Label>
+                    <Label htmlFor="balance-column">
+                        {__('Balance (Optional)')}
+                    </Label>
                     <Select
                         value={columnMapping.balance || '__none__'}
                         onValueChange={(value) =>
@@ -297,10 +310,16 @@ export function ImportStepMapping({
                         }
                     >
                         <SelectTrigger id="balance-column">
-                            <SelectValue placeholder="Select balance column (optional)" />
+                            <SelectValue
+                                placeholder={__(
+                                    'Select balance column (optional)',
+                                )}
+                            />
                         </SelectTrigger>
                         <SelectContent>
-                            <SelectItem value="__none__">None</SelectItem>
+                            <SelectItem value="__none__">
+                                {__('None')}
+                            </SelectItem>
                             {columnOptions.map((option, index) => (
                                 <SelectItem
                                     key={`balance-${option.value}-${index}`}
@@ -316,7 +335,7 @@ export function ImportStepMapping({
                 {isValid && previewTransactions.length > 0 && (
                     <div className="space-y-4 rounded-lg border bg-muted/30 p-4">
                         <Label className="pl-2 text-xs font-light tracking-widest uppercase opacity-50">
-                            Preview (first 3 rows)
+                            {__('Preview (first 3 rows)')}
                         </Label>
                         <div className="space-y-2 pt-2">
                             {previewTransactions.map((transaction, index) => (
@@ -343,7 +362,7 @@ export function ImportStepMapping({
 
                 {!dateFormatDetected && (
                     <div className="space-y-3 rounded-lg border p-4">
-                        <Label>Date Format</Label>
+                        <Label>{__('Date Format')}</Label>
                         <RadioGroup
                             value={dateFormat}
                             onValueChange={(value) =>
@@ -355,11 +374,12 @@ export function ImportStepMapping({
                                     value={DateFormat.YearMonthDay}
                                     id="format-ymd"
                                 />
+
                                 <Label
                                     htmlFor="format-ymd"
                                     className="cursor-pointer font-normal"
                                 >
-                                    YYYY-MM-DD (e.g., 2024-12-31)
+                                    {__('YYYY-MM-DD (e.g., 2024-12-31)')}
                                 </Label>
                             </div>
                             <div className="flex items-center space-x-2">
@@ -367,11 +387,12 @@ export function ImportStepMapping({
                                     value={DateFormat.MonthDayYear}
                                     id="format-mdy"
                                 />
+
                                 <Label
                                     htmlFor="format-mdy"
                                     className="cursor-pointer font-normal"
                                 >
-                                    MM-DD-YYYY (e.g., 12-31-2024)
+                                    {__('MM-DD-YYYY (e.g., 12-31-2024)')}
                                 </Label>
                             </div>
                             <div className="flex items-center space-x-2">
@@ -379,11 +400,12 @@ export function ImportStepMapping({
                                     value={DateFormat.DayMonthYear}
                                     id="format-dmy"
                                 />
+
                                 <Label
                                     htmlFor="format-dmy"
                                     className="cursor-pointer font-normal"
                                 >
-                                    DD-MM-YYYY (e.g., 31-12-2024)
+                                    {__('DD-MM-YYYY (e.g., 31-12-2024)')}
                                 </Label>
                             </div>
                         </RadioGroup>
@@ -393,10 +415,10 @@ export function ImportStepMapping({
 
             <div className="flex justify-between">
                 <Button variant="outline" onClick={onBack}>
-                    Back
+                    {__('Back')}
                 </Button>
                 <Button onClick={onNext} disabled={!isValid}>
-                    Preview Transactions
+                    {__('Preview Transactions')}
                 </Button>
             </div>
         </div>
diff --git a/resources/js/components/transactions/import-step-preview.tsx b/resources/js/components/transactions/import-step-preview.tsx
index 5cf99e2a..68fdbf9b 100644
--- a/resources/js/components/transactions/import-step-preview.tsx
+++ b/resources/js/components/transactions/import-step-preview.tsx
@@ -17,11 +17,14 @@ import {
     TableRow,
 } from '@/components/ui/table';
 import { useEncryptionKey } from '@/contexts/encryption-key-context';
+import { useLocale } from '@/hooks/use-locale';
 import {
     transactionSyncService,
     type Transaction,
 } from '@/services/transaction-sync';
 import { type ParsedTransaction } from '@/types/import';
+import { formatDateMedium } from '@/utils/date';
+import { __ } from '@/utils/i18n';
 import { ChevronDown } from 'lucide-react';
 import { useEffect, useMemo, useState } from 'react';
 
@@ -47,6 +50,7 @@ export function ImportStepPreview({
     isImporting,
 }: ImportStepPreviewProps) {
     const { isKeySet } = useEncryptionKey();
+    const locale = useLocale();
     const [existingTransactions, setExistingTransactions] = useState<
         Transaction[]
     >([]);
@@ -88,15 +92,6 @@ export function ImportStepPreview({
         };
     }, [transactions]);
 
-    const formatDate = (dateStr: string): string => {
-        const date = new Date(dateStr);
-        return date.toLocaleDateString('en-US', {
-            year: 'numeric',
-            month: 'short',
-            day: 'numeric',
-        });
-    };
-
     const handleHeaderCheckboxChange = (checked: boolean) => {
         onSelectAll(checked);
     };
@@ -105,17 +100,23 @@ export function ImportStepPreview({
         <div className="flex flex-col gap-6">
             <div className="flex gap-4 rounded-lg border bg-muted/50 p-4">
                 <div className="flex-1">
-                    <p className="text-sm text-muted-foreground">Total</p>
+                    <p className="text-sm text-muted-foreground">
+                        {__('Total')}
+                    </p>
                     <p className="text-2xl font-bold">{stats.total}</p>
                 </div>
                 <div className="flex-1">
-                    <p className="text-sm text-muted-foreground">Selected</p>
+                    <p className="text-sm text-muted-foreground">
+                        {__('Selected')}
+                    </p>
                     <p className="text-2xl font-bold text-green-600 dark:text-green-400">
                         {stats.selectedCount}
                     </p>
                 </div>
                 <div className="flex-1">
-                    <p className="text-sm text-muted-foreground">Duplicates</p>
+                    <p className="text-sm text-muted-foreground">
+                        {__('Duplicates')}
+                    </p>
                     <p className="text-2xl font-bold text-amber-600 dark:text-amber-400">
                         {stats.duplicateCount}
                     </p>
@@ -125,8 +126,9 @@ export function ImportStepPreview({
             {stats.selectableCount === 0 && stats.duplicateCount > 0 && (
                 <div className="rounded-lg border border-amber-500/20 bg-amber-500/10 p-4">
                     <p className="text-sm text-amber-700 dark:text-amber-300">
-                        All transactions appear to be duplicates. No new
-                        transactions will be imported.
+                        {__(
+                            'All transactions appear to be duplicates. No new\n                        transactions will be imported.',
+                        )}
                     </p>
                 </div>
             )}
@@ -144,15 +146,17 @@ export function ImportStepPreview({
                                     }
                                     onCheckedChange={handleHeaderCheckboxChange}
                                     disabled={stats.selectableCount === 0}
-                                    aria-label="Select all transactions"
+                                    aria-label={__('Select all transactions')}
                                 />
                             </TableHead>
                             <TableHead className="text-center">
-                                Status
+                                {__('Status')}
+                            </TableHead>
+                            <TableHead>{__('Date')}</TableHead>
+                            <TableHead>{__('Description')}</TableHead>
+                            <TableHead className="text-right">
+                                {__('Amount')}
                             </TableHead>
-                            <TableHead>Date</TableHead>
-                            <TableHead>Description</TableHead>
-                            <TableHead className="text-right">Amount</TableHead>
                         </TableRow>
                     </TableHeader>
                     <TableBody>
@@ -193,20 +197,21 @@ export function ImportStepPreview({
                                     <TableCell className="text-center">
                                         {transaction.isDuplicate ? (
                                             <Badge variant="secondary">
-                                                Duplicate
+                                                {__('Duplicate')}
                                             </Badge>
                                         ) : (
                                             <Badge
                                                 variant="secondary"
                                                 className="bg-green-50 text-green-600 dark:bg-green-900 dark:text-green-600"
                                             >
-                                                New
+                                                {__('New')}
                                             </Badge>
                                         )}
                                     </TableCell>
                                     <TableCell className="whitespace-nowrap">
-                                        {formatDate(
+                                        {formatDateMedium(
                                             transaction.transaction_date,
+                                            locale,
                                         )}
                                     </TableCell>
                                     <TableCell className="max-w-[200px] truncate">
@@ -237,7 +242,7 @@ export function ImportStepPreview({
                             className="flex w-full cursor-pointer items-center justify-between hover:bg-transparent"
                         >
                             <span className="text-sm text-muted-foreground">
-                                Latest transactions in this account
+                                {__('Latest transactions in this account')}
                             </span>
                             <ChevronDown
                                 className={`h-4 w-4 text-muted-foreground transition-transform duration-200 ${
@@ -251,10 +256,12 @@ export function ImportStepPreview({
                             <Table>
                                 <TableHeader>
                                     <TableRow>
-                                        <TableHead>Date</TableHead>
-                                        <TableHead>Description</TableHead>
+                                        <TableHead>{__('Date')}</TableHead>
+                                        <TableHead>
+                                            {__('Description')}
+                                        </TableHead>
                                         <TableHead className="text-right">
-                                            Amount
+                                            {__('Amount')}
                                         </TableHead>
                                     </TableRow>
                                 </TableHeader>
@@ -304,7 +311,7 @@ export function ImportStepPreview({
                     onClick={onBack}
                     disabled={isImporting}
                 >
-                    Back
+                    {__('Back')}
                 </Button>
                 <Button
                     onClick={onConfirm}
diff --git a/resources/js/components/transactions/import-step-upload.tsx b/resources/js/components/transactions/import-step-upload.tsx
index 04b0a6b8..f00496ab 100644
--- a/resources/js/components/transactions/import-step-upload.tsx
+++ b/resources/js/components/transactions/import-step-upload.tsx
@@ -1,5 +1,6 @@
 import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
+import { __ } from '@/utils/i18n';
 import { FileSpreadsheet, Upload, X } from 'lucide-react';
 import { useCallback, useState } from 'react';
 
@@ -89,14 +90,15 @@ export function ImportStepUpload({
                     <>
                         <Upload className="mb-4 h-12 w-12 text-muted-foreground" />
                         <p className="mb-2 text-sm font-medium">
-                            Drop your file here, or click to browse
+                            {__('Drop your file here, or click to browse')}
                         </p>
                         <p className="mb-4 text-xs text-muted-foreground">
-                            Supports CSV, XLS, and XLSX files
+                            {__('Supports CSV, XLS, and XLSX files')}
                         </p>
                         <Button asChild variant="secondary">
                             <label className="cursor-pointer">
-                                Browse Files
+                                {__('Browse Files')}
+
                                 <input
                                     type="file"
                                     className="hidden"
@@ -135,10 +137,10 @@ export function ImportStepUpload({
 
             <div className="flex justify-between">
                 <Button variant="outline" onClick={onBack}>
-                    Back
+                    {__('Back')}
                 </Button>
                 <Button onClick={onNext} disabled={!file}>
-                    Next
+                    {__('Next')}
                 </Button>
             </div>
         </div>
diff --git a/resources/js/components/transactions/import-transactions-button.tsx b/resources/js/components/transactions/import-transactions-button.tsx
index fd29683c..543fc4cb 100644
--- a/resources/js/components/transactions/import-transactions-button.tsx
+++ b/resources/js/components/transactions/import-transactions-button.tsx
@@ -9,6 +9,7 @@ import { useEncryptionKey } from '@/contexts/encryption-key-context';
 import { type Account, type Bank } from '@/types/account';
 import { type AutomationRule } from '@/types/automation-rule';
 import { type Category } from '@/types/category';
+import { __ } from '@/utils/i18n';
 import { Upload } from 'lucide-react';
 import { useState } from 'react';
 import { toast } from 'sonner';
@@ -30,7 +31,7 @@ export function ImportTransactionsButton() {
     const handleOpenDrawer = async () => {
         if (!isKeySet) {
             toast.error(
-                'Please unlock your encryption key to import transactions',
+                __('Please unlock your encryption key to import transactions'),
             );
             return;
         }
@@ -63,18 +64,18 @@ export function ImportTransactionsButton() {
                             className={`h-9 ${!isKeySet || loading ? 'cursor-not-allowed opacity-50' : ''}`}
                             onClick={handleOpenDrawer}
                             disabled={loading}
-                            aria-label="Import transactions"
+                            aria-label={__('Import transactions')}
                         >
                             <Upload className="h-5 w-5" />
                             <span className="">
-                                {loading ? 'Loading...' : 'Import'}
+                                {loading ? __('Loading...') : __('Import')}
                             </span>
                         </Button>
                     </TooltipTrigger>
                     <TooltipContent>
                         {!isKeySet
-                            ? `Unlock encryption to import transactions`
-                            : `Import transactions from CSV/Excel`}
+                            ? __('Unlock encryption to import transactions')
+                            : __('Import transactions from CSV/Excel')}
                     </TooltipContent>
                 </Tooltip>
             </TooltipProvider>
diff --git a/resources/js/components/transactions/import-transactions-drawer.tsx b/resources/js/components/transactions/import-transactions-drawer.tsx
index 1d482180..00e3e212 100644
--- a/resources/js/components/transactions/import-transactions-drawer.tsx
+++ b/resources/js/components/transactions/import-transactions-drawer.tsx
@@ -31,6 +31,7 @@ import {
     type ColumnMapping,
     type ImportState,
 } from '@/types/import';
+import { __ } from '@/utils/i18n';
 import { router } from '@inertiajs/react';
 import { useEffect, useState } from 'react';
 import { toast } from 'sonner';
@@ -597,39 +598,45 @@ export function ImportTransactionsDrawer({
         switch (state.step) {
             case ImportStep.SelectAccount:
                 return {
-                    title: 'Select Account',
-                    description:
+                    title: __('Select Account'),
+                    description: __(
                         'Choose the account where transactions will be imported',
+                    ),
                 };
             case ImportStep.UploadFile:
                 return {
-                    title: 'Upload File',
-                    description:
+                    title: __('Upload File'),
+                    description: __(
                         'Drop your CSV or Excel file here, or click to browse',
+                    ),
                 };
             case ImportStep.MapColumns:
                 return {
-                    title: 'Map Columns',
-                    description:
+                    title: __('Map Columns'),
+                    description: __(
                         'Match your file columns to transaction fields',
+                    ),
                 };
             case ImportStep.Preview:
                 return {
-                    title: 'Preview Transactions',
-                    description: 'Review transactions before importing',
+                    title: __('Preview Transactions'),
+                    description: __('Review transactions before importing'),
                 };
             default:
                 if (isImporting) {
                     return {
-                        title: 'Importing Transactions',
-                        description:
+                        title: __('Importing Transactions'),
+                        description: __(
                             'Please wait while we import your transactions',
+                        ),
                     };
                 }
 
                 return {
-                    title: 'Import Transactions',
-                    description: 'Import transactions from CSV or Excel files',
+                    title: __('Import Transactions'),
+                    description: __(
+                        'Import transactions from CSV or Excel files',
+                    ),
                 };
         }
     };
@@ -647,6 +654,7 @@ export function ImportTransactionsDrawer({
                         }}
                     />
                 );
+
             case ImportStep.UploadFile:
                 return (
                     <ImportStepUpload
@@ -658,6 +666,7 @@ export function ImportTransactionsDrawer({
                         onBack={() => moveToStep(ImportStep.SelectAccount)}
                     />
                 );
+
             case ImportStep.MapColumns:
                 return (
                     <ImportStepMapping
@@ -673,6 +682,7 @@ export function ImportTransactionsDrawer({
                         onBack={() => moveToStep(ImportStep.UploadFile)}
                     />
                 );
+
             case ImportStep.Preview:
                 return (
                     <ImportStepPreview
@@ -686,6 +696,7 @@ export function ImportTransactionsDrawer({
                         isImporting={isImporting}
                     />
                 );
+
             default:
                 return null;
         }
@@ -700,8 +711,10 @@ export function ImportTransactionsDrawer({
                 <div className="space-y-4">
                     <div className="flex items-center justify-between text-sm text-muted-foreground">
                         <span>
-                            {importProgress} of {importTotal} transactions
-                            imported
+                            {importProgress} of {importTotal}
+                            {__(
+                                'transactions\n                            imported',
+                            )}
                         </span>
                         <span>{Math.round(percentage)}%</span>
                     </div>
@@ -712,7 +725,8 @@ export function ImportTransactionsDrawer({
                     <div className="space-y-3">
                         <div className="flex items-center justify-between">
                             <h3 className="text-sm font-medium text-destructive">
-                                Errors ({importErrors.length})
+                                {__('Errors (')}
+                                {importErrors.length})
                             </h3>
                         </div>
                         <div className="max-h-[300px] overflow-y-auto rounded-lg border">
@@ -720,19 +734,19 @@ export function ImportTransactionsDrawer({
                                 <thead className="sticky top-0 bg-muted">
                                     <tr className="border-b">
                                         <th className="px-4 py-2 text-left font-medium">
-                                            Row
+                                            {__('Row')}
                                         </th>
                                         <th className="px-4 py-2 text-left font-medium">
-                                            Date
+                                            {__('Date')}
                                         </th>
                                         <th className="px-4 py-2 text-left font-medium">
-                                            Description
+                                            {__('Description')}
                                         </th>
                                         <th className="px-4 py-2 text-left font-medium">
-                                            Amount
+                                            {__('Amount')}
                                         </th>
                                         <th className="px-4 py-2 text-left font-medium">
-                                            Error
+                                            {__('Error')}
                                         </th>
                                     </tr>
                                 </thead>
diff --git a/resources/js/components/transactions/transaction-actions-menu.tsx b/resources/js/components/transactions/transaction-actions-menu.tsx
index 2cce858a..acdd990e 100644
--- a/resources/js/components/transactions/transaction-actions-menu.tsx
+++ b/resources/js/components/transactions/transaction-actions-menu.tsx
@@ -19,6 +19,7 @@ import { type Account, type Bank } from '@/types/account';
 import { type AutomationRule } from '@/types/automation-rule';
 import { type Category } from '@/types/category';
 import { type DecryptedTransaction } from '@/types/transaction';
+import { __ } from '@/utils/i18n';
 import { Link } from '@inertiajs/react';
 import { ChevronDown, Plus, Upload, WandSparkles } from 'lucide-react';
 import { useState } from 'react';
@@ -121,7 +122,8 @@ export function TransactionActionsMenu({
                             >
                                 {isKeySet && uncategorizedCount > 0 ? (
                                     <Link href={categorize.url()}>
-                                        Categorize
+                                        {__('Categorize')}
+
                                         {uncategorizedCount > 0 && (
                                             <span className="ml-1 rounded-full bg-amber-100 px-1.5 py-0.5 text-xs font-medium text-amber-700 dark:bg-amber-900/30 dark:text-amber-400">
                                                 {uncategorizedCount}
@@ -129,7 +131,7 @@ export function TransactionActionsMenu({
                                         )}
                                     </Link>
                                 ) : (
-                                    <>Categorize</>
+                                    <>{__('Categorize')}</>
                                 )}
                             </Button>
                         </TooltipTrigger>
@@ -154,16 +156,16 @@ export function TransactionActionsMenu({
                                         : ''
                                 }
                                 onClick={handleAddTransaction}
-                                aria-label="Add transaction"
+                                aria-label={__('Add transaction')}
                             >
                                 <Plus className="h-5 w-5" />
-                                Add Transaction
+                                {__('Add Transaction')}
                             </Button>
                         </TooltipTrigger>
                         <TooltipContent>
                             {!isKeySet
-                                ? 'Unlock encryption to add transactions'
-                                : 'Create a new transaction'}
+                                ? __('Unlock encryption to add transactions')
+                                : __('Create a new transaction')}
                         </TooltipContent>
                     </Tooltip>
                 </TooltipProvider>
@@ -176,13 +178,15 @@ export function TransactionActionsMenu({
                                     <Button
                                         variant="outline"
                                         size="icon"
-                                        aria-label="More actions"
+                                        aria-label={__('More actions')}
                                     >
                                         <ChevronDown className="h-4 w-4" />
                                     </Button>
                                 </DropdownMenuTrigger>
                             </TooltipTrigger>
-                            <TooltipContent>More actions</TooltipContent>
+                            <TooltipContent>
+                                {__('More actions')}
+                            </TooltipContent>
                         </Tooltip>
                     </TooltipProvider>
                     <DropdownMenuContent align="end">
@@ -191,7 +195,7 @@ export function TransactionActionsMenu({
                             disabled={!isKeySet}
                         >
                             <Upload className="mr-2 h-4 w-4" />
-                            Import Transactions
+                            {__('Import Transactions')}
                         </DropdownMenuItem>
                         <DropdownMenuItem
                             onClick={handleReEvaluateAll}
@@ -202,7 +206,7 @@ export function TransactionActionsMenu({
                             }
                         >
                             <WandSparkles className="mr-2 h-4 w-4" />
-                            Re-evaluate All Expenses
+                            {__('Re-evaluate All Expenses')}
                         </DropdownMenuItem>
                     </DropdownMenuContent>
                 </DropdownMenu>
diff --git a/resources/js/components/transactions/transaction-columns.tsx b/resources/js/components/transactions/transaction-columns.tsx
index 06824c75..51c0d007 100644
--- a/resources/js/components/transactions/transaction-columns.tsx
+++ b/resources/js/components/transactions/transaction-columns.tsx
@@ -1,5 +1,7 @@
+import { formatDate } from '@/utils/date';
+import { __ } from '@/utils/i18n';
 import { ColumnDef } from '@tanstack/react-table';
-import { format, getYear, parseISO } from 'date-fns';
+import { getYear, parseISO } from 'date-fns';
 import { ArrowDown, MoreHorizontal } from 'lucide-react';
 
 import { EncryptedText } from '@/components/encrypted-text';
@@ -26,6 +28,7 @@ interface CreateColumnsOptions {
     accounts: Account[];
     banks: Bank[];
     labels: Label[];
+    locale: string;
     onEdit: (transaction: DecryptedTransaction) => void;
     onDelete: (transaction: DecryptedTransaction) => void;
     onUpdate: (transaction: DecryptedTransaction) => void;
@@ -37,6 +40,7 @@ export function createTransactionColumns({
     accounts,
     banks,
     labels,
+    locale,
     onEdit,
     onDelete,
     onUpdate,
@@ -55,18 +59,20 @@ export function createTransactionColumns({
                     onCheckedChange={(value) =>
                         table.toggleAllPageRowsSelected(!!value)
                     }
-                    aria-label="Select all"
+                    aria-label={__('Select all')}
                 />
             ),
+
             cell: ({ row }) => (
                 <Checkbox
                     checked={row.getIsSelected()}
                     className="ml-2"
                     onCheckedChange={(value) => row.toggleSelected(!!value)}
                     onClick={(e) => e.stopPropagation()}
-                    aria-label="Select row"
+                    aria-label={__('Select row')}
                 />
             ),
+
             enableSorting: false,
             enableHiding: false,
         },
@@ -74,7 +80,7 @@ export function createTransactionColumns({
             id: 'transaction_date',
             accessorKey: 'transaction_date',
             meta: {
-                label: 'Date',
+                label: __('Date'),
                 cellClassName: 'max-w-[95px] whitespace-normal',
             },
             header: ({ column }) => {
@@ -85,7 +91,8 @@ export function createTransactionColumns({
                             column.toggleSorting(column.getIsSorted() === 'asc')
                         }
                     >
-                        Date
+                        {__('Date')}
+
                         <ArrowDown className="h-2 w-2 opacity-25" />
                     </Button>
                 );
@@ -97,10 +104,13 @@ export function createTransactionColumns({
                 const formatString =
                     transactionYear === currentYear ? 'MMM d' : 'MMM d, yy';
 
+                const formatted = formatDate(date, formatString, locale);
+                // Capitalize first letter (important for Spanish dates)
+                const capitalized =
+                    formatted.charAt(0).toUpperCase() + formatted.slice(1);
+
                 return (
-                    <div className="pl-3 whitespace-nowrap">
-                        {format(date, formatString)}
-                    </div>
+                    <div className="pl-3 whitespace-nowrap">{capitalized}</div>
                 );
             },
             enableHiding: true,
@@ -108,11 +118,11 @@ export function createTransactionColumns({
         {
             accessorKey: 'category_id',
             meta: {
-                label: 'Category',
+                label: __('Category'),
                 cellClassName:
                     'max-w-[170px] !sm:max-w-[170px] md:max-w-[190px] !min-w-[170px] whitespace-normal',
             },
-            header: 'Category',
+            header: () => __('Category'),
             cell: ({ row }) => {
                 return (
                     <CategoryCell
@@ -131,9 +141,9 @@ export function createTransactionColumns({
         {
             id: 'account',
             accessorKey: 'account',
-            header: 'Account',
+            header: () => __('Account'),
             meta: {
-                label: 'Account',
+                label: __('Account'),
                 cellClassName: '!min-w-[125px] whitespace-normal',
             },
             cell: ({ row }) => {
@@ -165,11 +175,11 @@ export function createTransactionColumns({
         {
             accessorKey: 'decryptedDescription',
             meta: {
-                label: 'Description',
+                label: __('Description'),
                 cellClassName:
                     'max-w-[200px] sm:max-w-[400px] md:max-w-[400px] lg:max-w-[550px] xl:max-w-full xl:w-full',
             },
-            header: 'Description',
+            header: () => __('Description'),
             cell: ({ row, table }) => {
                 const transaction = row.original;
                 const columnVisibility = table.getState().columnVisibility;
@@ -229,9 +239,9 @@ export function createTransactionColumns({
         },
         {
             accessorKey: 'amount',
-            meta: { label: 'Amount' },
+            meta: { label: __('Amount') },
             header: () => {
-                return <div className="w-full text-right">Amount</div>;
+                return <div className="w-full text-right">{__('Amount')}</div>;
             },
             cell: ({ row }) => {
                 const amountInCents = row.getValue('amount') as number;
@@ -271,29 +281,33 @@ export function createTransactionColumns({
                                     className="h-[24px] w-8 p-0"
                                     onClick={(e) => e.stopPropagation()}
                                 >
-                                    <span className="sr-only">Open menu</span>
+                                    <span className="sr-only">
+                                        {__('Open menu')}
+                                    </span>
                                     <MoreHorizontal className="h-4 w-4" />
                                 </Button>
                             </DropdownMenuTrigger>
                             <DropdownMenuContent align="end">
-                                <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                                <DropdownMenuLabel>
+                                    {__('Actions')}
+                                </DropdownMenuLabel>
                                 <DropdownMenuItem
                                     onClick={() => onEdit(transaction)}
                                 >
-                                    Edit
+                                    {__('Edit')}
                                 </DropdownMenuItem>
                                 <DropdownMenuItem
                                     onClick={() =>
                                         onReEvaluateRules(transaction)
                                     }
                                 >
-                                    Re-evaluate rules
+                                    {__('Re-evaluate rules')}
                                 </DropdownMenuItem>
                                 <DropdownMenuItem
                                     variant="destructive"
                                     onClick={() => onDelete(transaction)}
                                 >
-                                    Delete
+                                    {__('Delete')}
                                 </DropdownMenuItem>
                             </DropdownMenuContent>
                         </DropdownMenu>
@@ -305,7 +319,7 @@ export function createTransactionColumns({
         {
             id: 'labels',
             accessorKey: 'label_ids',
-            meta: { label: 'Labels', isVirtual: true },
+            meta: { label: __('Labels'), isVirtual: true },
             header: () => null,
             cell: () => null,
             enableHiding: true,
@@ -313,7 +327,7 @@ export function createTransactionColumns({
         {
             id: 'notes',
             accessorKey: 'decryptedNotes',
-            meta: { label: 'Notes', isVirtual: true },
+            meta: { label: __('Notes'), isVirtual: true },
             header: () => null,
             cell: () => null,
             enableHiding: true,
diff --git a/resources/js/components/transactions/transaction-filters.tsx b/resources/js/components/transactions/transaction-filters.tsx
index 907fc766..e0b59f72 100644
--- a/resources/js/components/transactions/transaction-filters.tsx
+++ b/resources/js/components/transactions/transaction-filters.tsx
@@ -1,3 +1,4 @@
+import { __ } from '@/utils/i18n';
 import { format } from 'date-fns';
 import * as Icons from 'lucide-react';
 import { Check, ChevronsUpDown, Tag, X } from 'lucide-react';
@@ -133,8 +134,8 @@ export function TransactionFilters({
                     <Input
                         placeholder={
                             isKeySet
-                                ? 'Search description or notes...'
-                                : 'Search disabled (encryption key not set)'
+                                ? __('Search description or notes...')
+                                : __('Search disabled (encryption key not set)')
                         }
                         value={searchText}
                         onChange={(e) => setSearchText(e.target.value)}
@@ -145,7 +146,8 @@ export function TransactionFilters({
                     <Popover open={isOpen} onOpenChange={setIsOpen}>
                         <PopoverTrigger asChild>
                             <Button variant="outline">
-                                Filters
+                                {__('Filters')}
+
                                 {activeFilterCount > 0 && (
                                     <Badge
                                         variant="secondary"
@@ -162,11 +164,13 @@ export function TransactionFilters({
                         >
                             <div className="space-y-4">
                                 <div className="flex items-center justify-between">
-                                    <h4 className="font-medium">Filters</h4>
+                                    <h4 className="font-medium">
+                                        {__('Filters')}
+                                    </h4>
                                 </div>
 
                                 <div className="space-y-2">
-                                    <FormLabel>Date</FormLabel>
+                                    <FormLabel>{__('Date')}</FormLabel>
                                     <div className="grid grid-cols-2 gap-2 pt-2">
                                         <Input
                                             type="date"
@@ -188,8 +192,9 @@ export function TransactionFilters({
                                                         : null,
                                                 })
                                             }
-                                            placeholder="From"
+                                            placeholder={__('From')}
                                         />
+
                                         <Input
                                             type="date"
                                             value={
@@ -210,13 +215,13 @@ export function TransactionFilters({
                                                         : null,
                                                 })
                                             }
-                                            placeholder="To"
+                                            placeholder={__('To')}
                                         />
                                     </div>
                                 </div>
 
                                 <div className="space-y-2">
-                                    <FormLabel>Amount</FormLabel>
+                                    <FormLabel>{__('Amount')}</FormLabel>
                                     <div className="grid grid-cols-2 gap-2 pt-2">
                                         <Input
                                             type="number"
@@ -232,8 +237,9 @@ export function TransactionFilters({
                                                         : null,
                                                 })
                                             }
-                                            placeholder="Min"
+                                            placeholder={__('Min')}
                                         />
+
                                         <Input
                                             type="number"
                                             step="0.01"
@@ -248,13 +254,13 @@ export function TransactionFilters({
                                                         : null,
                                                 })
                                             }
-                                            placeholder="Max"
+                                            placeholder={__('Max')}
                                         />
                                     </div>
                                 </div>
 
                                 <div className="space-y-2">
-                                    <FormLabel>Categories</FormLabel>
+                                    <FormLabel>{__('Categories')}</FormLabel>
                                     <div className="pt-2">
                                         <Popover
                                             open={categoryDropdownOpen}
@@ -280,7 +286,9 @@ export function TransactionFilters({
                                                         </span>
                                                     ) : (
                                                         <span className="text-muted-foreground">
-                                                            Select categories...
+                                                            {__(
+                                                                'Select categories...',
+                                                            )}
                                                         </span>
                                                     )}
                                                     <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
@@ -291,10 +299,16 @@ export function TransactionFilters({
                                                 align="start"
                                             >
                                                 <Command>
-                                                    <CommandInput placeholder="Search categories..." />
+                                                    <CommandInput
+                                                        placeholder={__(
+                                                            'Search categories...',
+                                                        )}
+                                                    />
                                                     <CommandList>
                                                         <CommandEmpty>
-                                                            No category found.
+                                                            {__(
+                                                                'No category found.',
+                                                            )}
                                                         </CommandEmpty>
                                                         <CommandItem
                                                             onSelect={() =>
@@ -317,7 +331,9 @@ export function TransactionFilters({
                                                                 <div className="flex h-5 w-5 items-center justify-center rounded-full bg-zinc-100 dark:bg-zinc-800">
                                                                     <Icons.HelpCircle className="h-3 w-3 text-zinc-500" />
                                                                 </div>
-                                                                Uncategorized
+                                                                {__(
+                                                                    'Uncategorized',
+                                                                )}
                                                             </div>
                                                         </CommandItem>
                                                         {categories.map(
@@ -385,7 +401,7 @@ export function TransactionFilters({
                                 </div>
 
                                 <div className="space-y-2">
-                                    <FormLabel>Labels</FormLabel>
+                                    <FormLabel>{__('Labels')}</FormLabel>
                                     <div className="pt-2">
                                         <Popover
                                             open={labelDropdownOpen}
@@ -408,7 +424,9 @@ export function TransactionFilters({
                                                         </span>
                                                     ) : (
                                                         <span className="text-muted-foreground">
-                                                            Select labels...
+                                                            {__(
+                                                                'Select labels...',
+                                                            )}
                                                         </span>
                                                     )}
                                                     <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
@@ -419,10 +437,16 @@ export function TransactionFilters({
                                                 align="start"
                                             >
                                                 <Command>
-                                                    <CommandInput placeholder="Search labels..." />
+                                                    <CommandInput
+                                                        placeholder={__(
+                                                            'Search labels...',
+                                                        )}
+                                                    />
                                                     <CommandList>
                                                         <CommandEmpty>
-                                                            No labels found.
+                                                            {__(
+                                                                'No labels found.',
+                                                            )}
                                                         </CommandEmpty>
                                                         {labels.map((label) => {
                                                             const isSelected =
@@ -486,7 +510,7 @@ export function TransactionFilters({
 
                                 {!hideAccountFilter && (
                                     <div className="space-y-2">
-                                        <FormLabel>Accounts</FormLabel>
+                                        <FormLabel>{__('Accounts')}</FormLabel>
                                         <div className="flex flex-wrap gap-2 pt-2">
                                             {accounts.map((account) => {
                                                 const isSelected =
@@ -537,7 +561,7 @@ export function TransactionFilters({
                         className="h-9"
                     >
                         <X className="mr-1 h-4 w-4" />
-                        Clear
+                        {__('Clear')}
                     </Button>
                 )}
                 {actions ? <div className="w-full">{actions}</div> : null}
diff --git a/resources/js/components/transactions/transaction-list.tsx b/resources/js/components/transactions/transaction-list.tsx
index 728ee71c..e914368c 100644
--- a/resources/js/components/transactions/transaction-list.tsx
+++ b/resources/js/components/transactions/transaction-list.tsx
@@ -1,3 +1,5 @@
+import { useLocale } from '@/hooks/use-locale';
+import { __ } from '@/utils/i18n';
 import {
     Cell,
     ColumnFiltersState,
@@ -150,18 +152,18 @@ function TransactionRowComponent({
                 </TableRow>
             </ContextMenuTrigger>
             <ContextMenuContent>
-                <ContextMenuLabel>Actions</ContextMenuLabel>
+                <ContextMenuLabel>{__('Actions')}</ContextMenuLabel>
                 <ContextMenuItem onClick={() => onEdit(transaction)}>
-                    Edit
+                    {__('Edit')}
                 </ContextMenuItem>
                 <ContextMenuItem onClick={() => onReEvaluateRules(transaction)}>
-                    Re-evaluate rules
+                    {__('Re-evaluate rules')}
                 </ContextMenuItem>
                 <ContextMenuItem
                     onClick={() => onDelete(transaction)}
                     variant="destructive"
                 >
-                    Delete
+                    {__('Delete')}
                 </ContextMenuItem>
             </ContextMenuContent>
         </ContextMenu>
@@ -244,6 +246,7 @@ export function TransactionList({
     hideColumns = [],
 }: TransactionListProps) {
     const { isKeySet } = useEncryptionKey();
+    const locale = useLocale();
 
     const labels = initialLabels;
 
@@ -1140,6 +1143,7 @@ export function TransactionList({
             accounts,
             banks,
             labels,
+            locale,
             onEdit: setEditTransaction,
             onDelete: setDeleteTransaction,
             onUpdate: updateTransaction,
@@ -1160,6 +1164,7 @@ export function TransactionList({
         banks,
         categories,
         labels,
+        locale,
         updateTransaction,
         handleReEvaluateRules,
         hideColumns,
@@ -1420,7 +1425,7 @@ export function TransactionList({
                         <DataTable
                             table={table}
                             columns={columns}
-                            emptyMessage="No transactions found."
+                            emptyMessage={__('No transactions found.')}
                             renderRow={renderTransactionRow}
                             maxHeight={maxHeight}
                             getRowDate={(row) => row.transaction_date}
@@ -1432,7 +1437,7 @@ export function TransactionList({
                         <DataTablePagination
                             displayedCount={displayedCount}
                             total={sortedTransactions.length}
-                            rowCountLabel="transactions total"
+                            rowCountLabel={__('transactions total')}
                         >
                             {displayedCount < sortedTransactions.length && (
                                 <Button
@@ -1443,10 +1448,10 @@ export function TransactionList({
                                     {isLoadingMore ? (
                                         <>
                                             <Spinner />
-                                            Loading
+                                            {__('Loading')}
                                         </>
                                     ) : (
-                                        <>Load more</>
+                                        <>{__('Load more')}</>
                                     )}
                                 </Button>
                             )}
@@ -1460,6 +1465,8 @@ export function TransactionList({
                 categories={categories}
                 accounts={accounts}
                 banks={banks}
+                labels={labels}
+                automationRules={automationRules}
                 open={!!editTransaction}
                 onOpenChange={(open) => !open && setEditTransaction(null)}
                 onSuccess={updateTransaction}
@@ -1471,6 +1478,8 @@ export function TransactionList({
                 categories={categories}
                 accounts={accounts}
                 banks={banks}
+                labels={labels}
+                automationRules={automationRules}
                 open={createDialogOpen}
                 onOpenChange={setCreateDialogOpen}
                 onSuccess={() => {}}
@@ -1489,7 +1498,8 @@ export function TransactionList({
                 <AlertDialogContent>
                     <AlertDialogHeader>
                         <AlertDialogTitle>
-                            Delete Transaction
+                            {__('Delete Transaction')}
+
                             {isBulkDeleteMode ? 's' : ''}
                         </AlertDialogTitle>
                         <AlertDialogDescription>
@@ -1502,7 +1512,7 @@ export function TransactionList({
                         <AlertDialogCancel
                             disabled={isDeleting || isBulkDeleting}
                         >
-                            Cancel
+                            {__('Cancel')}
                         </AlertDialogCancel>
                         <AlertDialogAction
                             onClick={
diff --git a/resources/js/components/two-factor-recovery-codes.tsx b/resources/js/components/two-factor-recovery-codes.tsx
index 91820811..a894cf2f 100644
--- a/resources/js/components/two-factor-recovery-codes.tsx
+++ b/resources/js/components/two-factor-recovery-codes.tsx
@@ -7,6 +7,7 @@ import {
     CardTitle,
 } from '@/components/ui/card';
 import { regenerateRecoveryCodes } from '@/routes/two-factor';
+import { __ } from '@/utils/i18n';
 import { Form } from '@inertiajs/react';
 import { Eye, EyeOff, LockKeyhole, RefreshCw } from 'lucide-react';
 import { useCallback, useEffect, useRef, useState } from 'react';
@@ -57,11 +58,12 @@ export default function TwoFactorRecoveryCodes({
             <CardHeader>
                 <CardTitle className="flex gap-3">
                     <LockKeyhole className="size-4" aria-hidden="true" />
-                    2FA Recovery Codes
+                    {__('2FA Recovery Codes')}
                 </CardTitle>
                 <CardDescription>
-                    Recovery codes let you regain access if you lose your 2FA
-                    device. Store them in a secure password manager.
+                    {__(
+                        'Recovery codes let you regain access if you lose your 2FA\n                    device. Store them in a secure password manager.',
+                    )}
                 </CardDescription>
             </CardHeader>
             <CardContent>
@@ -76,7 +78,9 @@ export default function TwoFactorRecoveryCodes({
                             className="size-4"
                             aria-hidden="true"
                         />
-                        {codesAreVisible ? 'Hide' : 'View'} Recovery Codes
+
+                        {codesAreVisible ? 'Hide' : 'View'}
+                        {__('Recovery Codes')}
                     </Button>
 
                     {canRegenerateCodes && (
@@ -92,7 +96,8 @@ export default function TwoFactorRecoveryCodes({
                                     disabled={processing}
                                     aria-describedby="regenerate-warning"
                                 >
-                                    <RefreshCw /> Regenerate Codes
+                                    <RefreshCw />
+                                    {__('Regenerate Codes')}
                                 </Button>
                             )}
                         </Form>
@@ -112,7 +117,7 @@ export default function TwoFactorRecoveryCodes({
                                     ref={codesSectionRef}
                                     className="grid gap-1 rounded-lg bg-muted p-4 font-mono text-sm"
                                     role="list"
-                                    aria-label="Recovery codes"
+                                    aria-label={__('Recovery codes')}
                                 >
                                     {recoveryCodesList.length ? (
                                         recoveryCodesList.map((code, index) => (
@@ -127,7 +132,9 @@ export default function TwoFactorRecoveryCodes({
                                     ) : (
                                         <div
                                             className="space-y-2"
-                                            aria-label="Loading recovery codes"
+                                            aria-label={__(
+                                                'Loading recovery codes',
+                                            )}
                                         >
                                             {Array.from(
                                                 { length: 8 },
@@ -145,13 +152,13 @@ export default function TwoFactorRecoveryCodes({
 
                                 <div className="text-xs text-muted-foreground select-none">
                                     <p id="regenerate-warning">
-                                        Each recovery code can be used once to
-                                        access your account and will be removed
-                                        after use. If you need more, click{' '}
+                                        {__(
+                                            'Each recovery code can be used once to\n                                        access your account and will be removed\n                                        after use. If you need more, click',
+                                        )}{' '}
                                         <span className="font-bold">
-                                            Regenerate Codes
+                                            {__('Regenerate Codes')}
                                         </span>{' '}
-                                        above.
+                                        {__('above.')}
                                     </p>
                                 </div>
                             </>
diff --git a/resources/js/components/two-factor-setup-modal.tsx b/resources/js/components/two-factor-setup-modal.tsx
index c0a9d22c..bd5df46f 100644
--- a/resources/js/components/two-factor-setup-modal.tsx
+++ b/resources/js/components/two-factor-setup-modal.tsx
@@ -15,6 +15,7 @@ import {
 import { useClipboard } from '@/hooks/use-clipboard';
 import { OTP_MAX_LENGTH } from '@/hooks/use-two-factor-auth';
 import { confirm } from '@/routes/two-factor';
+import { __ } from '@/utils/i18n';
 import { Form } from '@inertiajs/react';
 import { REGEXP_ONLY_DIGITS } from 'input-otp';
 import { Check, Copy, ScanLine } from 'lucide-react';
@@ -95,7 +96,7 @@ function TwoFactorSetupStep({
                     <div className="relative flex w-full items-center justify-center">
                         <div className="absolute inset-0 top-1/2 h-px w-full bg-border" />
                         <span className="relative bg-card px-2 py-1">
-                            or, enter the code manually
+                            {__('or, enter the code manually')}
                         </span>
                     </div>
 
@@ -113,6 +114,7 @@ function TwoFactorSetupStep({
                                         value={manualSetupKey}
                                         className="h-full w-full bg-background p-3 text-foreground outline-none"
                                     />
+
                                     <button
                                         onClick={() => copy(manualSetupKey)}
                                         className="border-l border-border px-3 hover:bg-muted"
@@ -200,7 +202,7 @@ function TwoFactorVerificationStep({
                                 onClick={onBack}
                                 disabled={processing}
                             >
-                                Back
+                                {__('Back')}
                             </Button>
                             <Button
                                 type="submit"
@@ -209,7 +211,7 @@ function TwoFactorVerificationStep({
                                     processing || code.length < OTP_MAX_LENGTH
                                 }
                             >
-                                Confirm
+                                {__('Confirm')}
                             </Button>
                         </div>
                     </div>
diff --git a/resources/js/components/ui/data-table-pagination.tsx b/resources/js/components/ui/data-table-pagination.tsx
index a44d7df3..11e445fe 100644
--- a/resources/js/components/ui/data-table-pagination.tsx
+++ b/resources/js/components/ui/data-table-pagination.tsx
@@ -1,3 +1,5 @@
+import { __ } from '@/utils/i18n';
+
 interface DataTablePaginationProps {
     rowCountLabel?: string;
     displayedCount?: number;
@@ -8,14 +10,14 @@ interface DataTablePaginationProps {
 export function DataTablePagination({
     displayedCount = undefined,
     total = undefined,
-    rowCountLabel = 'row(s) total',
+    rowCountLabel = __('row(s) total'),
     children,
 }: DataTablePaginationProps) {
     return (
         <div className="flex items-center justify-end space-x-2">
             {displayedCount && total && (
                 <div className="text-muted-foreground flex-1 text-sm">
-                    {Math.min(total, displayedCount)} of {total} {rowCountLabel}
+                    {Math.min(total, displayedCount)} {__('of')} {total} {rowCountLabel}
                 </div>
             )}
             {displayedCount && total === undefined && (
diff --git a/resources/js/components/ui/data-table-view-options.tsx b/resources/js/components/ui/data-table-view-options.tsx
index 9b6eee92..b6bafdc7 100644
--- a/resources/js/components/ui/data-table-view-options.tsx
+++ b/resources/js/components/ui/data-table-view-options.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { type Table as TableType } from '@tanstack/react-table';
 import { SlidersHorizontal } from 'lucide-react';
 
+import { __ } from '@/utils/i18n';
 import { Button } from '@/components/ui/button';
 import {
     DropdownMenu,
@@ -39,7 +40,7 @@ export function DataTableViewOptions<TData>({
         <DropdownMenu>
             <DropdownMenuTrigger asChild>
                 <Button variant="outline" className='flex gap-2'>
-                    <span className={cn({ 'hidden sm:inline': hideColumnTextOnMobile })}>Columns</span>
+                    <span className={cn({ 'hidden sm:inline': hideColumnTextOnMobile })}>{__('Columns')}</span>
                     <SlidersHorizontal className="h-4 w-4" />
                 </Button>
             </DropdownMenuTrigger>
diff --git a/resources/js/components/ui/spinner.tsx b/resources/js/components/ui/spinner.tsx
index a70e713c..d6b401db 100644
--- a/resources/js/components/ui/spinner.tsx
+++ b/resources/js/components/ui/spinner.tsx
@@ -1,16 +1,17 @@
-import { Loader2Icon } from "lucide-react"
+import { Loader2Icon } from 'lucide-react';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
+import { __ } from '@/utils/i18n';
 
-function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
-  return (
-    <Loader2Icon
-      role="status"
-      aria-label="Loading"
-      className={cn("size-4 animate-spin", className)}
-      {...props}
-    />
-  )
+function Spinner({ className, ...props }: React.ComponentProps<'svg'>) {
+    return (
+        <Loader2Icon
+            role="status"
+            aria-label={__('Loading')}
+            className={cn('size-4 animate-spin', className)}
+            {...props}
+        />
+    );
 }
 
-export { Spinner }
+export { Spinner };
diff --git a/resources/js/components/unlock-message-dialog.tsx b/resources/js/components/unlock-message-dialog.tsx
index 8db29809..dc2b0b26 100644
--- a/resources/js/components/unlock-message-dialog.tsx
+++ b/resources/js/components/unlock-message-dialog.tsx
@@ -1,3 +1,4 @@
+import { __ } from '@/utils/i18n';
 import { useEffect, useState } from 'react';
 
 import { Button } from '@/components/ui/button';
@@ -110,17 +111,18 @@ export default function UnlockMessageDialog({
         <Dialog open={open} onOpenChange={onOpenChange}>
             <DialogContent hasKeyboard>
                 <DialogHeader>
-                    <DialogTitle>Unlock Encrypted Data</DialogTitle>
+                    <DialogTitle>{__('Unlock Encrypted Data')}</DialogTitle>
                     <DialogDescription>
-                        Enter your encryption password to decrypt transactions
-                        information and accounts name.
+                        {__(
+                            'Enter your encryption password to decrypt transactions information and accounts name.',
+                        )}
                     </DialogDescription>
                 </DialogHeader>
                 <form onSubmit={handleUnlock}>
                     <div className="grid gap-4 py-4">
                         <div className="grid gap-2">
                             <Label htmlFor="unlock-password">
-                                Encryption Password
+                                {__('Encryption Password')}
                             </Label>
                             <Input
                                 id="unlock-password"
@@ -129,12 +131,17 @@ export default function UnlockMessageDialog({
                                 autoFocus
                                 value={password}
                                 onChange={(e) => setPassword(e.target.value)}
-                                placeholder="Enter your encryption password"
+                                placeholder={__(
+                                    'Enter your encryption password',
+                                )}
                                 disabled={processing}
                             />
+
                             {isDemoAccount && demoEncryptionKey && (
                                 <p className="text-sm text-red-600 dark:text-red-400">
-                                    <span>Demo encryption password:</span>
+                                    <span>
+                                        {__('Demo encryption password:')}
+                                    </span>
                                     <code>{demoEncryptionKey}</code>
                                 </p>
                             )}
@@ -142,7 +149,7 @@ export default function UnlockMessageDialog({
 
                         <div className="grid gap-2">
                             <Label htmlFor="unlock-storage">
-                                Storage Preference
+                                {__('Storage Preference')}
                             </Label>
                             <Select
                                 value={storagePreference}
@@ -158,10 +165,10 @@ export default function UnlockMessageDialog({
                                 </SelectTrigger>
                                 <SelectContent>
                                     <SelectItem value="session">
-                                        Session only
+                                        {__('Session only')}
                                     </SelectItem>
                                     <SelectItem value="persistent">
-                                        Keep me logged in
+                                        {__('Keep me logged in')}
                                     </SelectItem>
                                 </SelectContent>
                             </Select>
@@ -176,7 +183,7 @@ export default function UnlockMessageDialog({
                     <DialogFooter>
                         <Button type="submit" disabled={processing}>
                             {processing && <Spinner />}
-                            Unlock
+                            {__('Unlock')}
                         </Button>
                     </DialogFooter>
                 </form>
diff --git a/resources/js/components/user-menu-content.tsx b/resources/js/components/user-menu-content.tsx
index 3285fd10..5302c20d 100644
--- a/resources/js/components/user-menu-content.tsx
+++ b/resources/js/components/user-menu-content.tsx
@@ -12,6 +12,7 @@ import { clearKey } from '@/lib/key-storage';
 import { logout } from '@/routes';
 import accounts from '@/routes/accounts';
 import { type SharedData, type User } from '@/types';
+import { __ } from '@/utils/i18n';
 import { Link, router, usePage } from '@inertiajs/react';
 import {
     Eye,
@@ -60,8 +61,8 @@ export function UserMenuContent({ user }: UserMenuContentProps) {
                                 <Eye className="mr-2" />
                             )}
                             {isPrivacyModeEnabled
-                                ? 'Disable privacy mode'
-                                : 'Enable privacy mode'}
+                                ? __('Disable privacy mode')
+                                : __('Enable privacy mode')}
                         </DropdownMenuItem>
                     </DropdownMenuGroup>
                 </>
@@ -76,7 +77,7 @@ export function UserMenuContent({ user }: UserMenuContentProps) {
                         onClick={cleanup}
                     >
                         <Settings className="mr-2" />
-                        Settings
+                        {__('Settings')}
                     </Link>
                 </DropdownMenuItem>
             </DropdownMenuGroup>
@@ -91,7 +92,7 @@ export function UserMenuContent({ user }: UserMenuContentProps) {
                         onClick={cleanup}
                     >
                         <MessageSquare className="mr-2" />
-                        Feedback
+                        {__('Feedback')}
                     </a>
                 </DropdownMenuItem>
                 <DropdownMenuItem asChild>
@@ -103,7 +104,7 @@ export function UserMenuContent({ user }: UserMenuContentProps) {
                         onClick={cleanup}
                     >
                         <Map className="mr-2" />
-                        Roadmap
+                        {__('Roadmap')}
                     </a>
                 </DropdownMenuItem>
             </DropdownMenuGroup>
@@ -117,12 +118,12 @@ export function UserMenuContent({ user }: UserMenuContentProps) {
                     data-test="logout-button"
                 >
                     <LogOut className="mr-2" />
-                    Log out
+                    {__('Log out')}
                 </Link>
             </DropdownMenuItem>
             <DropdownMenuSeparator />
             <div className="flex items-center justify-between px-2 py-1.5 text-xs text-muted-foreground">
-                <span>Version:</span>
+                <span>{__('Version:')}</span>
                 <span>{version}</span>
             </div>
         </>
diff --git a/resources/js/hooks/use-locale.ts b/resources/js/hooks/use-locale.ts
new file mode 100644
index 00000000..315343e9
--- /dev/null
+++ b/resources/js/hooks/use-locale.ts
@@ -0,0 +1,9 @@
+import { type SharedData } from '@/types';
+import { usePage } from '@inertiajs/react';
+
+/**
+ * Hook to get the current locale from Inertia shared props
+ */
+export function useLocale(): string {
+    return usePage<SharedData>().props.locale;
+}
diff --git a/resources/js/layouts/settings/layout.tsx b/resources/js/layouts/settings/layout.tsx
index 6ed9f218..084b437c 100644
--- a/resources/js/layouts/settings/layout.tsx
+++ b/resources/js/layouts/settings/layout.tsx
@@ -8,7 +8,6 @@ import { Separator } from '@/components/ui/separator';
 import { cn, isSameUrl, resolveUrl } from '@/lib/utils';
 import { edit as editAccount } from '@/routes/account';
 import { edit as editAppearance } from '@/routes/appearance';
-import { settings as budgetsSettings } from '@/routes/budgets';
 import { edit as editDeleteAccount } from '@/routes/delete-account';
 import { billing } from '@/routes/settings';
 import {
@@ -17,6 +16,7 @@ import {
     SharedData,
     type NavItem,
 } from '@/types';
+import { __ } from '@/utils/i18n';
 import { Link, usePage } from '@inertiajs/react';
 import { type PropsWithChildren } from 'react';
 
@@ -48,12 +48,6 @@ const getNavItems = (
         href: labelsIndex(),
         icon: null,
     },
-    {
-        type: 'nav-item',
-        title: 'Budgets',
-        href: budgetsSettings(),
-        icon: null,
-    },
     { type: 'divider' },
     {
         type: 'section-header',
@@ -113,8 +107,8 @@ export default function SettingsLayout({ children }: PropsWithChildren) {
     return (
         <div className="px-4 py-6">
             <Heading
-                title="Settings"
-                description="Manage your profile and account settings"
+                title={__('Settings')}
+                description={__('Manage your profile and account settings')}
             />
 
             <div className="flex flex-col lg:flex-row lg:space-x-12">
@@ -137,7 +131,7 @@ export default function SettingsLayout({ children }: PropsWithChildren) {
                                         key={`section-header-${index}`}
                                         className="px-3 pt-2 pb-1.5 text-sm font-medium text-muted-foreground"
                                     >
-                                        {item.title}
+                                        {__(item.title)}
                                     </h2>
                                 );
                             }
@@ -159,7 +153,7 @@ export default function SettingsLayout({ children }: PropsWithChildren) {
                                         {item.icon && (
                                             <item.icon className="h-4 w-4" />
                                         )}
-                                        {item.title}
+                                        {__(item.title)}
                                     </Link>
                                 </Button>
                             );
diff --git a/resources/js/pages/Accounts/Index.tsx b/resources/js/pages/Accounts/Index.tsx
index c6a8ea5e..a91a4950 100644
--- a/resources/js/pages/Accounts/Index.tsx
+++ b/resources/js/pages/Accounts/Index.tsx
@@ -5,6 +5,7 @@ import { useDashboardData } from '@/hooks/use-dashboard-data';
 import AppSidebarLayout from '@/layouts/app/app-sidebar-layout';
 import { BreadcrumbItem } from '@/types';
 import { Account, AccountType } from '@/types/account';
+import { __ } from '@/utils/i18n';
 import { Head } from '@inertiajs/react';
 import { useMemo } from 'react';
 
@@ -70,12 +71,12 @@ export default function AccountsIndex({ accounts }: Props) {
 
     return (
         <AppSidebarLayout breadcrumbs={breadcrumbs}>
-            <Head title="Accounts" />
+            <Head title={__('Accounts')} />
 
             <div className="space-y-8 p-6">
                 <HeadingSmall
-                    title="Accounts"
-                    description="View and manage your bank accounts"
+                    title={__('Accounts')}
+                    description={__('View and manage your bank accounts')}
                 />
 
                 <div className="grid gap-4 lg:grid-cols-2">
@@ -96,7 +97,9 @@ export default function AccountsIndex({ accounts }: Props) {
 
                 {accounts.length === 0 && !isLoading && (
                     <div className="flex h-[300px] items-center justify-center text-muted-foreground">
-                        No accounts found. Add your first account in Settings.
+                        {__(
+                            'No accounts found. Add your first account in Settings.',
+                        )}
                     </div>
                 )}
             </div>
diff --git a/resources/js/pages/Accounts/Show.tsx b/resources/js/pages/Accounts/Show.tsx
index 19b21723..1bea101e 100644
--- a/resources/js/pages/Accounts/Show.tsx
+++ b/resources/js/pages/Accounts/Show.tsx
@@ -26,6 +26,7 @@ import {
     isTransactionalAccount,
 } from '@/types/account';
 import { Category } from '@/types/category';
+import { __ } from '@/utils/i18n';
 import { Head } from '@inertiajs/react';
 import { ChevronDown } from 'lucide-react';
 import { useState } from 'react';
@@ -67,13 +68,14 @@ export default function AccountShow({
                     length={{ min: 5, max: 20 }}
                 />
             ),
+
             href: show.url(account.id),
         },
     ];
 
     return (
         <AppSidebarLayout breadcrumbs={breadcrumbs}>
-            <Head title="Account Details" />
+            <Head title={__('Account Details')} />
 
             <div className="space-y-6 p-6">
                 <div className="sm flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
@@ -109,7 +111,7 @@ export default function AccountShow({
                                 variant="outline"
                                 onClick={() => setUpdateBalanceOpen(true)}
                             >
-                                Update balance
+                                {__('Update balance')}
                             </Button>
                         </ButtonGroup>
                         <ButtonGroup>
@@ -117,14 +119,14 @@ export default function AccountShow({
                                 variant="outline"
                                 onClick={() => setImportBalancesOpen(true)}
                             >
-                                Import balances
+                                {__('Import balances')}
                             </Button>
                             <DropdownMenu>
                                 <DropdownMenuTrigger asChild>
                                     <Button
                                         variant="outline"
                                         size="icon"
-                                        aria-label="More options"
+                                        aria-label={__('More options')}
                                     >
                                         <ChevronDown className="h-4 w-4" />
                                     </Button>
@@ -133,19 +135,19 @@ export default function AccountShow({
                                     <DropdownMenuItem
                                         onClick={() => setBalancesOpen(true)}
                                     >
-                                        See balances
+                                        {__('See balances')}
                                     </DropdownMenuItem>
                                     <DropdownMenuItem
                                         onClick={() => setEditOpen(true)}
                                     >
-                                        Edit account
+                                        {__('Edit account')}
                                     </DropdownMenuItem>
                                     <DropdownMenuSeparator />
                                     <DropdownMenuItem
                                         onClick={() => setDeleteOpen(true)}
                                         variant="destructive"
                                     >
-                                        Delete
+                                        {__('Delete')}
                                     </DropdownMenuItem>
                                 </DropdownMenuContent>
                             </DropdownMenu>
diff --git a/resources/js/pages/auth/confirm-password.tsx b/resources/js/pages/auth/confirm-password.tsx
index b9ae2690..76bcc660 100644
--- a/resources/js/pages/auth/confirm-password.tsx
+++ b/resources/js/pages/auth/confirm-password.tsx
@@ -5,26 +5,29 @@ import { Label } from '@/components/ui/label';
 import { Spinner } from '@/components/ui/spinner';
 import AuthLayout from '@/layouts/auth-layout';
 import { store } from '@/routes/password/confirm';
+import { __ } from '@/utils/i18n';
 import { Form, Head } from '@inertiajs/react';
 
 export default function ConfirmPassword() {
     return (
         <AuthLayout
-            title="Confirm your password"
-            description="This is a secure area of the application. Please confirm your password before continuing."
+            title={__('Confirm your password')}
+            description={__(
+                'This is a secure area of the application. Please confirm your password before continuing.',
+            )}
         >
-            <Head title="Confirm password" />
+            <Head title={__('Confirm password')} />
 
             <Form {...store.form()} resetOnSuccess={['password']}>
                 {({ processing, errors }) => (
                     <div className="space-y-6">
                         <div className="grid gap-2">
-                            <Label htmlFor="password">Password</Label>
+                            <Label htmlFor="password">{__('Password')}</Label>
                             <Input
                                 id="password"
                                 type="password"
                                 name="password"
-                                placeholder="Password"
+                                placeholder={__('Password')}
                                 autoComplete="current-password"
                                 autoFocus
                             />
@@ -39,7 +42,7 @@ export default function ConfirmPassword() {
                                 data-test="confirm-password-button"
                             >
                                 {processing && <Spinner />}
-                                Confirm password
+                                {__('Confirm password')}
                             </Button>
                         </div>
                     </div>
diff --git a/resources/js/pages/auth/forgot-password.tsx b/resources/js/pages/auth/forgot-password.tsx
index 3d32f16e..c82d5304 100644
--- a/resources/js/pages/auth/forgot-password.tsx
+++ b/resources/js/pages/auth/forgot-password.tsx
@@ -1,6 +1,6 @@
-// Components
 import { login } from '@/routes';
 import { email } from '@/routes/password';
+import { __ } from '@/utils/i18n'; // Components
 import { Form, Head } from '@inertiajs/react';
 import { LoaderCircle } from 'lucide-react';
 
@@ -14,10 +14,12 @@ import AuthLayout from '@/layouts/auth-layout';
 export default function ForgotPassword({ status }: { status?: string }) {
     return (
         <AuthLayout
-            title="Forgot password"
-            description="Enter your email to receive a password reset link"
+            title={__('Forgot password')}
+            description={__(
+                'Enter your email to receive a password reset link',
+            )}
         >
-            <Head title="Forgot password" />
+            <Head title={__('Forgot password')} />
 
             {status && (
                 <div className="mb-4 text-center text-sm font-medium text-green-600">
@@ -30,14 +32,16 @@ export default function ForgotPassword({ status }: { status?: string }) {
                     {({ processing, errors }) => (
                         <>
                             <div className="grid gap-2">
-                                <Label htmlFor="email">Email address</Label>
+                                <Label htmlFor="email">
+                                    {__('Email address')}
+                                </Label>
                                 <Input
                                     id="email"
                                     type="email"
                                     name="email"
                                     autoComplete="off"
                                     autoFocus
-                                    placeholder="email@example.com"
+                                    placeholder={__('email@example.com')}
                                 />
 
                                 <InputError message={errors.email} />
@@ -52,7 +56,7 @@ export default function ForgotPassword({ status }: { status?: string }) {
                                     {processing && (
                                         <LoaderCircle className="h-4 w-4 animate-spin" />
                                     )}
-                                    Email password reset link
+                                    {__('Email password reset link')}
                                 </Button>
                             </div>
                         </>
@@ -60,8 +64,8 @@ export default function ForgotPassword({ status }: { status?: string }) {
                 </Form>
 
                 <div className="space-x-1 text-center text-sm text-muted-foreground">
-                    <span>Or, return to</span>
-                    <TextLink href={login()}>log in</TextLink>
+                    <span>{__('Or, return to')}</span>
+                    <TextLink href={login()}>{__('log in')}</TextLink>
                 </div>
             </div>
         </AuthLayout>
diff --git a/resources/js/pages/auth/login.tsx b/resources/js/pages/auth/login.tsx
index 832be17d..a60a7145 100644
--- a/resources/js/pages/auth/login.tsx
+++ b/resources/js/pages/auth/login.tsx
@@ -11,6 +11,7 @@ import { register } from '@/routes';
 import { store } from '@/routes/login';
 import { request } from '@/routes/password';
 import { type SharedData } from '@/types';
+import { __ } from '@/utils/i18n';
 import { Form, Head, usePage } from '@inertiajs/react';
 import { useEffect, useState } from 'react';
 
@@ -41,10 +42,10 @@ export default function Login({
 
     return (
         <AuthLayout
-            title="Log in to your account"
-            description="Enter your email and password below to log in"
+            title={__('Log in to your account')}
+            description={__('Enter your email and password below to log in')}
         >
-            <Head title="Log in" />
+            <Head title={__('Log in')} />
 
             <Form
                 {...store.form()}
@@ -56,7 +57,9 @@ export default function Login({
                     <>
                         <div className="grid gap-6">
                             <div className="grid gap-2">
-                                <Label htmlFor="email">Email address</Label>
+                                <Label htmlFor="email">
+                                    {__('Email address')}
+                                </Label>
                                 <Input
                                     id="email"
                                     type="email"
@@ -65,23 +68,26 @@ export default function Login({
                                     autoFocus
                                     tabIndex={1}
                                     autoComplete="email"
-                                    placeholder="email@example.com"
+                                    placeholder={__('email@example.com')}
                                     value={email}
                                     onChange={(e) => setEmail(e.target.value)}
                                 />
+
                                 <InputError message={errors.email} />
                             </div>
 
                             <div className="grid gap-2">
                                 <div className="flex items-center">
-                                    <Label htmlFor="password">Password</Label>
+                                    <Label htmlFor="password">
+                                        {__('Password')}
+                                    </Label>
                                     {canResetPassword && (
                                         <TextLink
                                             href={request()}
                                             className="ml-auto text-sm"
                                             tabIndex={5}
                                         >
-                                            Forgot password?
+                                            {__('Forgot password?')}
                                         </TextLink>
                                     )}
                                 </div>
@@ -92,12 +98,13 @@ export default function Login({
                                     required
                                     tabIndex={2}
                                     autoComplete="current-password"
-                                    placeholder="Password"
+                                    placeholder={__('Password')}
                                     value={password}
                                     onChange={(e) =>
                                         setPassword(e.target.value)
                                     }
                                 />
+
                                 <InputError message={errors.password} />
                             </div>
 
@@ -107,7 +114,10 @@ export default function Login({
                                     name="remember"
                                     tabIndex={3}
                                 />
-                                <Label htmlFor="remember">Remember me</Label>
+
+                                <Label htmlFor="remember">
+                                    {__('Remember me')}
+                                </Label>
                             </div>
 
                             <Button
@@ -118,15 +128,15 @@ export default function Login({
                                 data-test="login-button"
                             >
                                 {processing && <Spinner />}
-                                Log in
+                                {__('Log in')}
                             </Button>
                         </div>
 
                         {canRegister && (
                             <div className="text-center text-sm text-muted-foreground">
-                                Don't have an account?{' '}
+                                {__("Don't have an account?")}{' '}
                                 <TextLink href={register()} tabIndex={5}>
-                                    Sign up
+                                    {__('Sign up')}
                                 </TextLink>
                             </div>
                         )}
diff --git a/resources/js/pages/auth/register.tsx b/resources/js/pages/auth/register.tsx
index 3d5dc4a2..6fc4ee45 100644
--- a/resources/js/pages/auth/register.tsx
+++ b/resources/js/pages/auth/register.tsx
@@ -1,5 +1,6 @@
 import { login } from '@/routes';
 import { store } from '@/routes/register';
+import { __ } from '@/utils/i18n';
 import { Form, Head, router } from '@inertiajs/react';
 import { useCallback, useEffect } from 'react';
 
@@ -34,10 +35,10 @@ export default function Register({ hideAuthButtons = false }: RegisterProps) {
 
     return (
         <AuthLayout
-            title="Create an account"
-            description="Enter your details below to create your account"
+            title={__('Create an account')}
+            description={__('Enter your details below to create your account')}
         >
-            <Head title="Register" />
+            <Head title={__('Register')} />
             <Form
                 {...store.form()}
                 resetOnSuccess={['password', 'password_confirmation']}
@@ -49,7 +50,7 @@ export default function Register({ hideAuthButtons = false }: RegisterProps) {
                     <>
                         <div className="grid gap-6">
                             <div className="grid gap-2">
-                                <Label htmlFor="name">Name</Label>
+                                <Label htmlFor="name">{__('Name')}</Label>
                                 <Input
                                     id="name"
                                     type="text"
@@ -58,8 +59,9 @@ export default function Register({ hideAuthButtons = false }: RegisterProps) {
                                     tabIndex={1}
                                     autoComplete="name"
                                     name="name"
-                                    placeholder="Full name"
+                                    placeholder={__('Full name')}
                                 />
+
                                 <InputError
                                     message={errors.name}
                                     className="mt-2"
@@ -67,7 +69,9 @@ export default function Register({ hideAuthButtons = false }: RegisterProps) {
                             </div>
 
                             <div className="grid gap-2">
-                                <Label htmlFor="email">Email address</Label>
+                                <Label htmlFor="email">
+                                    {__('Email address')}
+                                </Label>
                                 <Input
                                     id="email"
                                     type="email"
@@ -75,13 +79,16 @@ export default function Register({ hideAuthButtons = false }: RegisterProps) {
                                     tabIndex={2}
                                     autoComplete="email"
                                     name="email"
-                                    placeholder="email@example.com"
+                                    placeholder={__('email@example.com')}
                                 />
+
                                 <InputError message={errors.email} />
                             </div>
 
                             <div className="grid gap-2">
-                                <Label htmlFor="password">Password</Label>
+                                <Label htmlFor="password">
+                                    {__('Password')}
+                                </Label>
                                 <Input
                                     id="password"
                                     type="password"
@@ -89,14 +96,15 @@ export default function Register({ hideAuthButtons = false }: RegisterProps) {
                                     tabIndex={3}
                                     autoComplete="new-password"
                                     name="password"
-                                    placeholder="Password"
+                                    placeholder={__('Password')}
                                 />
+
                                 <InputError message={errors.password} />
                             </div>
 
                             <div className="grid gap-2">
                                 <Label htmlFor="password_confirmation">
-                                    Confirm password
+                                    {__('Confirm password')}
                                 </Label>
                                 <Input
                                     id="password_confirmation"
@@ -105,8 +113,9 @@ export default function Register({ hideAuthButtons = false }: RegisterProps) {
                                     tabIndex={4}
                                     autoComplete="new-password"
                                     name="password_confirmation"
-                                    placeholder="Confirm password"
+                                    placeholder={__('Confirm password')}
                                 />
+
                                 <InputError
                                     message={errors.password_confirmation}
                                 />
@@ -119,14 +128,14 @@ export default function Register({ hideAuthButtons = false }: RegisterProps) {
                                 data-test="register-user-button"
                             >
                                 {processing && <Spinner />}
-                                Create account
+                                {__('Create account')}
                             </Button>
                         </div>
 
                         <div className="text-center text-sm text-muted-foreground">
-                            Already have an account?{' '}
+                            {__('Already have an account?')}{' '}
                             <TextLink href={login()} tabIndex={6}>
-                                Log in
+                                {__('Log in')}
                             </TextLink>
                         </div>
                     </>
diff --git a/resources/js/pages/auth/reset-password.tsx b/resources/js/pages/auth/reset-password.tsx
index 142164d9..5ee5a4e0 100644
--- a/resources/js/pages/auth/reset-password.tsx
+++ b/resources/js/pages/auth/reset-password.tsx
@@ -1,4 +1,5 @@
 import { update } from '@/routes/password';
+import { __ } from '@/utils/i18n';
 import { Form, Head } from '@inertiajs/react';
 
 import InputError from '@/components/input-error';
@@ -16,10 +17,10 @@ interface ResetPasswordProps {
 export default function ResetPassword({ token, email }: ResetPasswordProps) {
     return (
         <AuthLayout
-            title="Reset password"
-            description="Please enter your new password below"
+            title={__('Reset password')}
+            description={__('Please enter your new password below')}
         >
-            <Head title="Reset password" />
+            <Head title={__('Reset password')} />
 
             <Form
                 {...update.form()}
@@ -29,7 +30,7 @@ export default function ResetPassword({ token, email }: ResetPasswordProps) {
                 {({ processing, errors }) => (
                     <div className="grid gap-6">
                         <div className="grid gap-2">
-                            <Label htmlFor="email">Email</Label>
+                            <Label htmlFor="email">{__('Email')}</Label>
                             <Input
                                 id="email"
                                 type="email"
@@ -39,6 +40,7 @@ export default function ResetPassword({ token, email }: ResetPasswordProps) {
                                 className="mt-1 block w-full"
                                 readOnly
                             />
+
                             <InputError
                                 message={errors.email}
                                 className="mt-2"
@@ -46,7 +48,7 @@ export default function ResetPassword({ token, email }: ResetPasswordProps) {
                         </div>
 
                         <div className="grid gap-2">
-                            <Label htmlFor="password">Password</Label>
+                            <Label htmlFor="password">{__('Password')}</Label>
                             <Input
                                 id="password"
                                 type="password"
@@ -54,14 +56,15 @@ export default function ResetPassword({ token, email }: ResetPasswordProps) {
                                 autoComplete="new-password"
                                 className="mt-1 block w-full"
                                 autoFocus
-                                placeholder="Password"
+                                placeholder={__('Password')}
                             />
+
                             <InputError message={errors.password} />
                         </div>
 
                         <div className="grid gap-2">
                             <Label htmlFor="password_confirmation">
-                                Confirm password
+                                {__('Confirm password')}
                             </Label>
                             <Input
                                 id="password_confirmation"
@@ -69,8 +72,9 @@ export default function ResetPassword({ token, email }: ResetPasswordProps) {
                                 name="password_confirmation"
                                 autoComplete="new-password"
                                 className="mt-1 block w-full"
-                                placeholder="Confirm password"
+                                placeholder={__('Confirm password')}
                             />
+
                             <InputError
                                 message={errors.password_confirmation}
                                 className="mt-2"
@@ -84,7 +88,7 @@ export default function ResetPassword({ token, email }: ResetPasswordProps) {
                             data-test="reset-password-button"
                         >
                             {processing && <Spinner />}
-                            Reset password
+                            {__('Reset password')}
                         </Button>
                     </div>
                 )}
diff --git a/resources/js/pages/auth/setup-encryption.tsx b/resources/js/pages/auth/setup-encryption.tsx
index cd27ba2a..be742ec5 100644
--- a/resources/js/pages/auth/setup-encryption.tsx
+++ b/resources/js/pages/auth/setup-encryption.tsx
@@ -1,3 +1,4 @@
+import { __ } from '@/utils/i18n';
 import { Head, router } from '@inertiajs/react';
 import axios from 'axios';
 import { useState } from 'react';
@@ -115,14 +116,18 @@ export default function SetupEncryption() {
 
     return (
         <AuthLayout
-            title="Setup Encryption"
-            description="Create a strong encryption password to secure your data"
+            title={__('Setup Encryption')}
+            description={__(
+                'Create a strong encryption password to secure your data',
+            )}
         >
-            <Head title="Setup Encryption" />
+            <Head title={__('Setup Encryption')} />
             <form onSubmit={handleSubmit} className="flex flex-col gap-6">
                 <div className="grid gap-6">
                     <div className="grid gap-2">
-                        <Label htmlFor="password">Encryption Password</Label>
+                        <Label htmlFor="password">
+                            {__('Encryption Password')}
+                        </Label>
                         <Input
                             id="password"
                             type="password"
@@ -132,12 +137,16 @@ export default function SetupEncryption() {
                             autoComplete="new-password"
                             value={password}
                             onChange={(e) => setPassword(e.target.value)}
-                            placeholder="Enter a strong encryption password"
+                            placeholder={__(
+                                'Enter a strong encryption password',
+                            )}
                             disabled={processing}
                         />
+
                         <p className="text-xs text-muted-foreground">
-                            Use a strong password (minimum 12 characters). This
-                            password will encrypt your data.
+                            {__(
+                                'Use a strong password (minimum 12 characters). This\n                            password will encrypt your data.',
+                            )}
                         </p>
                         <InputError
                             message={errors.password}
@@ -147,7 +156,7 @@ export default function SetupEncryption() {
 
                     <div className="grid gap-2">
                         <Label htmlFor="confirmPassword">
-                            Confirm Password
+                            {__('Confirm Password')}
                         </Label>
                         <Input
                             id="confirmPassword"
@@ -157,15 +166,16 @@ export default function SetupEncryption() {
                             autoComplete="new-password"
                             value={confirmPassword}
                             onChange={(e) => setConfirmPassword(e.target.value)}
-                            placeholder="Confirm your encryption password"
+                            placeholder={__('Confirm your encryption password')}
                             disabled={processing}
                         />
+
                         <InputError message={errors.confirmPassword} />
                     </div>
 
                     <div className="grid gap-2">
                         <Label htmlFor="storagePreference">
-                            Storage Preference
+                            {__('Storage Preference')}
                         </Label>
                         <Select
                             value={storagePreference}
@@ -181,10 +191,10 @@ export default function SetupEncryption() {
                             </SelectTrigger>
                             <SelectContent>
                                 <SelectItem value="session">
-                                    Session only (more secure)
+                                    {__('Session only (more secure)')}
                                 </SelectItem>
                                 <SelectItem value="persistent">
-                                    Keep me logged in (less secure)
+                                    {__('Keep me logged in (less secure)')}
                                 </SelectItem>
                             </SelectContent>
                         </Select>
@@ -208,7 +218,7 @@ export default function SetupEncryption() {
                         disabled={processing || !cryptoAvailable}
                     >
                         {processing && <Spinner />}
-                        Setup Encryption
+                        {__('Setup Encryption')}
                     </Button>
                 </div>
             </form>
diff --git a/resources/js/pages/auth/two-factor-challenge.tsx b/resources/js/pages/auth/two-factor-challenge.tsx
index c08724b0..0cd461aa 100644
--- a/resources/js/pages/auth/two-factor-challenge.tsx
+++ b/resources/js/pages/auth/two-factor-challenge.tsx
@@ -9,6 +9,7 @@ import {
 import { OTP_MAX_LENGTH } from '@/hooks/use-two-factor-auth';
 import AuthLayout from '@/layouts/auth-layout';
 import { store } from '@/routes/two-factor/login';
+import { __ } from '@/utils/i18n';
 import { Form, Head } from '@inertiajs/react';
 import { REGEXP_ONLY_DIGITS } from 'input-otp';
 import { useMemo, useState } from 'react';
@@ -50,7 +51,7 @@ export default function TwoFactorChallenge() {
             title={authConfigContent.title}
             description={authConfigContent.description}
         >
-            <Head title="Two-Factor Authentication" />
+            <Head title={__('Two-Factor Authentication')} />
 
             <div className="space-y-6">
                 <Form
@@ -66,10 +67,11 @@ export default function TwoFactorChallenge() {
                                     <Input
                                         name="recovery_code"
                                         type="text"
-                                        placeholder="Enter recovery code"
+                                        placeholder={__('Enter recovery code')}
                                         autoFocus={showRecoveryInput}
                                         required
                                     />
+
                                     <InputError
                                         message={errors.recovery_code}
                                     />
@@ -107,11 +109,11 @@ export default function TwoFactorChallenge() {
                                 className="w-full"
                                 disabled={processing}
                             >
-                                Continue
+                                {__('Continue')}
                             </Button>
 
                             <div className="text-center text-sm text-muted-foreground">
-                                <span>or you can </span>
+                                <span>{__('or you can')}</span>
                                 <button
                                     type="button"
                                     className="cursor-pointer text-foreground underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out hover:decoration-current! dark:decoration-neutral-500"
diff --git a/resources/js/pages/auth/verify-email.tsx b/resources/js/pages/auth/verify-email.tsx
index dd94e18c..55671cba 100644
--- a/resources/js/pages/auth/verify-email.tsx
+++ b/resources/js/pages/auth/verify-email.tsx
@@ -1,10 +1,10 @@
-// Components
 import { Button } from '@/components/ui/button';
 import { Spinner } from '@/components/ui/spinner';
 import AuthLayout from '@/layouts/auth-layout';
 import { clearKey } from '@/lib/key-storage';
 import { logout } from '@/routes';
 import { send } from '@/routes/verification';
+import { __ } from '@/utils/i18n';
 import { Form, Head, Link } from '@inertiajs/react';
 
 export default function VerifyEmail({ status }: { status?: string }) {
@@ -14,15 +14,18 @@ export default function VerifyEmail({ status }: { status?: string }) {
 
     return (
         <AuthLayout
-            title="Verify email"
-            description="Please verify your email address by clicking on the link we just emailed to you."
+            title={__('Verify email')}
+            description={__(
+                'Please verify your email address by clicking on the link we just emailed to you.',
+            )}
         >
-            <Head title="Email verification" />
+            <Head title={__('Email verification')} />
 
             {status === 'verification-link-sent' && (
                 <div className="mb-4 text-center text-sm font-medium text-green-600">
-                    A new verification link has been sent to the email address
-                    you provided during registration.
+                    {__(
+                        'A new verification link has been sent to the email address you provided during registration.',
+                    )}
                 </div>
             )}
 
@@ -31,7 +34,7 @@ export default function VerifyEmail({ status }: { status?: string }) {
                     <>
                         <Button disabled={processing} variant="secondary">
                             {processing && <Spinner />}
-                            Resend verification email
+                            {__('Resend verification email')}
                         </Button>
 
                         <Link
@@ -40,7 +43,7 @@ export default function VerifyEmail({ status }: { status?: string }) {
                             onClick={handleLogout}
                             className="mx-auto block text-sm text-blue-600 underline hover:text-blue-800"
                         >
-                            Log out
+                            {__('Log out')}
                         </Link>
                     </>
                 )}
diff --git a/resources/js/pages/budgets/index.tsx b/resources/js/pages/budgets/index.tsx
index d15e1907..556482b6 100644
--- a/resources/js/pages/budgets/index.tsx
+++ b/resources/js/pages/budgets/index.tsx
@@ -5,6 +5,7 @@ import HeadingSmall from '@/components/heading-small';
 import AppSidebarLayout from '@/layouts/app/app-sidebar-layout';
 import { BreadcrumbItem } from '@/types';
 import { Budget } from '@/types/budget';
+import { __ } from '@/utils/i18n';
 import { Head } from '@inertiajs/react';
 
 const breadcrumbs: BreadcrumbItem[] = [
@@ -22,13 +23,15 @@ interface Props {
 export default function BudgetsIndex({ budgets, currencyCode }: Props) {
     return (
         <AppSidebarLayout breadcrumbs={breadcrumbs}>
-            <Head title="Budgets" />
+            <Head title={__('Budgets')} />
 
             <div className="space-y-8 p-6">
                 <div className="flex items-center justify-between">
                     <HeadingSmall
-                        title="Budgets"
-                        description="Track your spending with flexible budgets"
+                        title={__('Budgets')}
+                        description={__(
+                            'Track your spending with flexible budgets',
+                        )}
                     />
                 </div>
 
diff --git a/resources/js/pages/budgets/show.tsx b/resources/js/pages/budgets/show.tsx
index c67f3134..c5ae9132 100644
--- a/resources/js/pages/budgets/show.tsx
+++ b/resources/js/pages/budgets/show.tsx
@@ -13,11 +13,14 @@ import {
     DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { Skeleton } from '@/components/ui/skeleton';
+import { useLocale } from '@/hooks/use-locale';
 import AppSidebarLayout from '@/layouts/app/app-sidebar-layout';
 import { BreadcrumbItem } from '@/types';
 import { Account, Bank } from '@/types/account';
 import { Budget, BudgetPeriod, getBudgetPeriodTypeLabel } from '@/types/budget';
 import { Category } from '@/types/category';
+import { formatDate } from '@/utils/date';
+import { __ } from '@/utils/i18n';
 import { Head, router } from '@inertiajs/react';
 import { ChevronDown, Loader2 } from 'lucide-react';
 import { useEffect, useMemo, useState } from 'react';
@@ -41,6 +44,7 @@ export default function BudgetShow({
     banks,
     currencyCode,
 }: Props) {
+    const locale = useLocale();
     const [editOpen, setEditOpen] = useState(false);
     const [deleteOpen, setDeleteOpen] = useState(false);
 
@@ -72,16 +76,14 @@ export default function BudgetShow({
     ];
 
     const periodLabel = useMemo(() => {
-        const start = new Date(currentPeriod.start_date).toLocaleDateString(
-            'en-US',
-            { month: 'short', day: 'numeric', year: '2-digit' },
-        );
-        const end = new Date(currentPeriod.end_date).toLocaleDateString(
-            'en-US',
-            { month: 'short', day: 'numeric', year: '2-digit' },
+        const start = formatDate(
+            currentPeriod.start_date,
+            "MMM d, ''yy",
+            locale,
         );
+        const end = formatDate(currentPeriod.end_date, "MMM d, ''yy", locale);
         return `${start} - ${end}`;
-    }, [currentPeriod]);
+    }, [currentPeriod, locale]);
 
     const trackingLabel = useMemo((): string | null => {
         if (budget.category) return budget.category.name;
@@ -112,13 +114,13 @@ export default function BudgetShow({
                                         {trackingLabel !== null ? (
                                             <>
                                                 <span className="opacity-50">
-                                                    Tracking{' '}
+                                                    {__('Tracking')}{' '}
                                                 </span>
                                                 <span>{trackingLabel}</span>
                                             </>
                                         ) : (
                                             <span className="opacity-50">
-                                                No tracking
+                                                {__('No tracking')}
                                             </span>
                                         )}
                                     </div>
@@ -127,8 +129,10 @@ export default function BudgetShow({
                                         <span>{periodLabel} </span>
                                         <span className="opacity-50">
                                             (
-                                            {getBudgetPeriodTypeLabel(
-                                                budget.period_type,
+                                            {__(
+                                                getBudgetPeriodTypeLabel(
+                                                    budget.period_type,
+                                                ),
                                             )}
                                             )
                                         </span>
@@ -143,14 +147,14 @@ export default function BudgetShow({
                             variant="outline"
                             onClick={() => setEditOpen(true)}
                         >
-                            Edit budget
+                            {__('Edit budget')}
                         </Button>
                         <DropdownMenu>
                             <DropdownMenuTrigger asChild>
                                 <Button
                                     variant="outline"
                                     size="icon"
-                                    aria-label="More options"
+                                    aria-label={__('More options')}
                                 >
                                     <ChevronDown className="h-4 w-4" />
                                 </Button>
@@ -160,7 +164,7 @@ export default function BudgetShow({
                                     onClick={() => setDeleteOpen(true)}
                                     variant="destructive"
                                 >
-                                    Delete
+                                    {__('Delete')}
                                 </DropdownMenuItem>
                             </DropdownMenuContent>
                         </DropdownMenu>
@@ -180,12 +184,12 @@ export default function BudgetShow({
                             <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
                             <div>
                                 <h3 className="text-sm font-medium">
-                                    Finding historical transactions
+                                    {__('Finding historical transactions')}
                                 </h3>
                                 <p className="text-sm text-muted-foreground">
-                                    We're looking through your transaction
-                                    history to find expenses that match this
-                                    budget. This usually takes a few seconds.
+                                    {__(
+                                        "We're looking through your transaction\n                                    history to find expenses that match this\n                                    budget. This usually takes a few seconds.",
+                                    )}
                                 </p>
                             </div>
                         </div>
diff --git a/resources/js/pages/cashflow/index.tsx b/resources/js/pages/cashflow/index.tsx
index 7daa22af..13e09265 100644
--- a/resources/js/pages/cashflow/index.tsx
+++ b/resources/js/pages/cashflow/index.tsx
@@ -9,6 +9,7 @@ import { useCashflowData } from '@/hooks/use-cashflow-data';
 import AppSidebarLayout from '@/layouts/app/app-sidebar-layout';
 import { cashflow } from '@/routes';
 import { BreadcrumbItem } from '@/types';
+import { __ } from '@/utils/i18n';
 import { Head, router, usePage } from '@inertiajs/react';
 import { endOfMonth, format, parse, startOfMonth } from 'date-fns';
 import { useEffect, useState } from 'react';
@@ -78,14 +79,17 @@ export default function CashflowPage() {
 
     return (
         <AppSidebarLayout breadcrumbs={breadcrumbs}>
-            <Head title="Cashflow" />
+            <Head title={__('Cashflow')} />
 
             <div className="space-y-6 p-6">
                 <div className="flex items-center justify-between">
                     <HeadingSmall
-                        title="Cashflow"
-                        description="Track your income, expenses, and savings"
+                        title={__('Cashflow')}
+                        description={__(
+                            'Track your income, expenses, and savings',
+                        )}
                     />
+
                     <PeriodNavigation
                         currentDate={currentDate}
                         onDateChange={setCurrentDate}
@@ -100,6 +104,7 @@ export default function CashflowPage() {
                         loading={isLoading}
                         currency={auth.user.currency_code}
                     />
+
                     <SavingsRateCard
                         current={summary.current}
                         previous={summary.previous}
@@ -110,7 +115,9 @@ export default function CashflowPage() {
                 {/* Sankey Diagram */}
                 <Card>
                     <CardHeader className="pb-4">
-                        <CardTitle className="text-base">Money Flow</CardTitle>
+                        <CardTitle className="text-base">
+                            {__('Money Flow')}
+                        </CardTitle>
                     </CardHeader>
                     <CardContent>
                         {isLoading ? (
@@ -133,6 +140,7 @@ export default function CashflowPage() {
                         loading={isLoading}
                         currency={auth.user.currency_code}
                     />
+
                     <BreakdownCard
                         type="expense"
                         data={expenseBreakdown}
diff --git a/resources/js/pages/dashboard.tsx b/resources/js/pages/dashboard.tsx
index e89b753d..4bb1ec2a 100644
--- a/resources/js/pages/dashboard.tsx
+++ b/resources/js/pages/dashboard.tsx
@@ -9,16 +9,10 @@ import { useDashboardData } from '@/hooks/use-dashboard-data';
 import AppSidebarLayout from '@/layouts/app/app-sidebar-layout';
 import { dashboard } from '@/routes';
 import { BreadcrumbItem, SharedData } from '@/types';
+import { __ } from '@/utils/i18n';
 import { Head, usePage } from '@inertiajs/react';
 import { useEffect, useState } from 'react';
 
-const breadcrumbs: BreadcrumbItem[] = [
-    {
-        title: 'Dashboard',
-        href: dashboard().url,
-    },
-];
-
 interface DashboardProps extends SharedData {
     showEncryptionPrompt: boolean;
 }
@@ -36,6 +30,13 @@ export default function Dashboard() {
         useEncryptionKey();
     const [showUnlockDialog, setShowUnlockDialog] = useState(false);
 
+    const breadcrumbs: BreadcrumbItem[] = [
+        {
+            title: __('Dashboard'),
+            href: dashboard().url,
+        },
+    ];
+
     useEffect(() => {
         // Fetch encrypted message data if not already loaded
         if (!encryptedMessageData) {
@@ -62,7 +63,7 @@ export default function Dashboard() {
 
     return (
         <AppSidebarLayout breadcrumbs={breadcrumbs}>
-            <Head title="Dashboard" />
+            <Head title={__('Dashboard')} />
 
             {encryptedMessageData && (
                 <UnlockMessageDialog
@@ -77,8 +78,8 @@ export default function Dashboard() {
 
             <div className="space-y-6 p-6">
                 <HeadingSmall
-                    title="Dashboard"
-                    description="Overview of your financial health"
+                    title={__('Dashboard')}
+                    description={__('Overview of your financial health')}
                 />
 
                 <NetWorthChartComponent
@@ -110,6 +111,7 @@ export default function Dashboard() {
                         categories={topCategories}
                         loading={isLoading}
                     />
+
                     {props.features.cashflow && (
                         <CashflowSummaryCard loading={isLoading} />
                     )}
diff --git a/resources/js/pages/onboarding/index.tsx b/resources/js/pages/onboarding/index.tsx
index e07cdbc9..7c97572b 100644
--- a/resources/js/pages/onboarding/index.tsx
+++ b/resources/js/pages/onboarding/index.tsx
@@ -18,6 +18,7 @@ import {
 } from '@/hooks/use-onboarding-state';
 import OnboardingLayout from '@/layouts/onboarding-layout';
 import { type Bank } from '@/types/account';
+import { __ } from '@/utils/i18n';
 import { Head } from '@inertiajs/react';
 import { useEffect, useRef } from 'react';
 
@@ -190,18 +191,18 @@ export default function Onboarding({
 
     const getStepTitle = (step: OnboardingStep): string => {
         const titles: Record<OnboardingStep, string> = {
-            welcome: 'Welcome',
-            'encryption-explained': 'End-to-End Encryption',
-            'encryption-setup': 'Setup Encryption',
-            'account-types': 'Account Types',
-            'create-account': 'Create Account',
-            'category-types': 'Categories',
-            'customize-categories': 'Customize Categories',
-            'smart-rules': 'Smart Rules',
-            'import-transactions': 'Import Transactions',
-            'import-balances': 'Set Balance',
-            'more-accounts': 'Add More Accounts',
-            complete: 'All Set!',
+            welcome: __('Welcome'),
+            'encryption-explained': __('End-to-End Encryption'),
+            'encryption-setup': __('Setup Encryption'),
+            'account-types': __('Account Types'),
+            'create-account': __('Create Account'),
+            'category-types': __('Categories'),
+            'customize-categories': __('Customize Categories'),
+            'smart-rules': __('Smart Rules'),
+            'import-transactions': __('Import Transactions'),
+            'import-balances': __('Set Balance'),
+            'more-accounts': __('Add More Accounts'),
+            complete: __('All Set!'),
         };
         return titles[step];
     };
diff --git a/resources/js/pages/privacy.tsx b/resources/js/pages/privacy.tsx
index 82c0d28e..28edb331 100644
--- a/resources/js/pages/privacy.tsx
+++ b/resources/js/pages/privacy.tsx
@@ -1,4 +1,5 @@
 import { type SharedData } from '@/types';
+import { __ } from '@/utils/i18n';
 import { Head, Link, usePage } from '@inertiajs/react';
 
 export default function Privacy() {
@@ -6,22 +7,29 @@ export default function Privacy() {
 
     return (
         <>
-            <Head title="Privacy Policy - Whisper Money">
+            <Head title={__('Privacy Policy - Whisper Money')}>
                 <meta
                     name="description"
-                    content="Privacy policy for Whisper Money. Learn how we collect, use, and protect your personal information with end-to-end encryption."
+                    content={__(
+                        'Privacy policy for Whisper Money. Learn how we collect, use, and protect your personal information with end-to-end encryption.',
+                    )}
                 />
+
                 <link rel="canonical" href={`${appUrl}/privacy`} />
-                <meta name="robots" content="index, follow" />
+                <meta name="robots" content={__('index, follow')} />
 
                 <meta
                     property="og:title"
-                    content="Privacy Policy - Whisper Money"
+                    content={__('Privacy Policy - Whisper Money')}
                 />
+
                 <meta
                     property="og:description"
-                    content="Privacy policy for Whisper Money. Learn how we collect, use, and protect your personal information."
+                    content={__(
+                        'Privacy policy for Whisper Money. Learn how we collect, use, and protect your personal information.',
+                    )}
                 />
+
                 <meta property="og:type" content="website" />
                 <meta property="og:url" content={`${appUrl}/privacy`} />
             </Head>
@@ -31,79 +39,93 @@ export default function Privacy() {
                         href="/"
                         className="mb-8 inline-block text-sm text-[#706f6c] hover:text-[#1b1b18] dark:text-[#A1A09A] dark:hover:text-[#EDEDEC]"
                     >
-                        ← Back to home
+                        {__('\u2190 Back to home')}
                     </Link>
 
                     <h1 className="mb-8 text-4xl font-semibold">
-                        Privacy Policy
+                        {__('Privacy Policy')}
                     </h1>
 
                     <div className="prose prose-neutral dark:prose-invert max-w-none">
                         <p className="text-lg text-[#706f6c] dark:text-[#A1A09A]">
-                            Last updated: {new Date().toLocaleDateString()}
+                            {__('Last updated:')}
+                            {new Date().toLocaleDateString()}
                         </p>
 
                         <section className="mt-8">
                             <h2 className="mb-4 text-2xl font-semibold">
-                                1. Data Controller
+                                {__('1. Data Controller')}
                             </h2>
                             <p className="mb-4 text-[#706f6c] dark:text-[#A1A09A]">
-                                Whisper Money is the data controller responsible
-                                for your personal information.
+                                {__(
+                                    'Whisper Money is the data controller responsible\n                                for your personal information.',
+                                )}
                             </p>
                             <div className="mb-4 text-[#706f6c] dark:text-[#A1A09A]">
                                 <p>
-                                    <strong>Company Name:</strong> Whisper Money
+                                    <strong>{__('Company Name:')}</strong>{' '}
+                                    Whisper Money
                                 </p>
                                 <p>
-                                    <strong>Address:</strong> Calle Oca, Madrid
-                                    - 28025, Spain
+                                    <strong>{__('Address:')}</strong> Calle Oca,
+                                    Madrid - 28025, Spain
                                 </p>
                                 <p>
-                                    <strong>Email:</strong> victor@whisper.money
+                                    <strong>{__('Email:')}</strong>
+                                    {__('victor@whisper.money')}
                                 </p>
                             </div>
                         </section>
 
                         <section className="mt-8">
                             <h2 className="mb-4 text-2xl font-semibold">
-                                2. Information We Collect
+                                {__('2. Information We Collect')}
                             </h2>
                             <p className="mb-4 text-[#706f6c] dark:text-[#A1A09A]">
-                                We collect the following types of personal
-                                information:
+                                {__(
+                                    'We collect the following types of personal\n                                information:',
+                                )}
                             </p>
                             <ul className="mb-4 list-disc pl-6 text-[#706f6c] dark:text-[#A1A09A]">
                                 <li>
-                                    <strong>Account Information:</strong> Email
-                                    address, name, and password (encrypted)
+                                    <strong>
+                                        {__('Account Information:')}
+                                    </strong>
+                                    {__(
+                                        'Email\n                                    address, name, and password (encrypted)',
+                                    )}
                                 </li>
                                 <li>
-                                    <strong>Financial Data:</strong> Transaction
-                                    details, budgets, categories, and other
-                                    financial information you manually enter
-                                    into the application
+                                    <strong>{__('Financial Data:')}</strong>
+                                    {__(
+                                        'Transaction\n                                    details, budgets, categories, and other\n                                    financial information you manually enter\n                                    into the application',
+                                    )}
                                 </li>
                                 <li>
-                                    <strong>Usage Information:</strong>{' '}
-                                    Information about how you use our service,
-                                    including access times and features used
+                                    <strong>{__('Usage Information:')}</strong>{' '}
+                                    {__(
+                                        'Information about how you use our service,\n                                    including access times and features used',
+                                    )}
                                 </li>
                                 <li>
-                                    <strong>Technical Information:</strong> IP
-                                    address, browser type, device information,
-                                    and operating system
+                                    <strong>
+                                        {__('Technical Information:')}
+                                    </strong>
+                                    {__(
+                                        'IP\n                                    address, browser type, device information,\n                                    and operating system',
+                                    )}
                                 </li>
                             </ul>
                         </section>
 
                         <section className="mt-8">
                             <h2 className="mb-4 text-2xl font-semibold">
-                                3. How We Use Your Information
+                                {__('3. How We Use Your Information')}
                             </h2>
                             <p className="mb-4 text-[#706f6c] dark:text-[#A1A09A]">
-                                We process your personal data for the following
-                                purposes:
+                                {__(
+                                    'We process your personal data for the following\n                                purposes:',
+                                )}
                             </p>
                             <ul className="mb-4 list-disc pl-6 text-[#706f6c] dark:text-[#A1A09A]">
                                 <li>
@@ -111,114 +133,122 @@ export default function Privacy() {
                                     tracking service
                                 </li>
                                 <li>
-                                    To enable cloud synchronization of your
-                                    encrypted financial data across devices
+                                    {__(
+                                        'To enable cloud synchronization of your\n                                    encrypted financial data across devices',
+                                    )}
                                 </li>
                                 <li>
-                                    To authenticate your access and protect your
-                                    account security
+                                    {__(
+                                        'To authenticate your access and protect your\n                                    account security',
+                                    )}
                                 </li>
                                 <li>
-                                    To process payments for premium features or
-                                    subscriptions
+                                    {__(
+                                        'To process payments for premium features or\n                                    subscriptions',
+                                    )}
                                 </li>
                                 <li>
-                                    To send you service-related notifications,
-                                    updates, and security alerts via email
+                                    {__(
+                                        'To send you service-related notifications,\n                                    updates, and security alerts via email',
+                                    )}
                                 </li>
                                 <li>
-                                    To improve and optimize our service based on
-                                    usage patterns
+                                    {__(
+                                        'To improve and optimize our service based on\n                                    usage patterns',
+                                    )}
                                 </li>
                                 <li>
-                                    To comply with legal obligations and enforce
-                                    our terms
+                                    {__(
+                                        'To comply with legal obligations and enforce\n                                    our terms',
+                                    )}
                                 </li>
                             </ul>
                             <p className="mb-4 text-[#706f6c] dark:text-[#A1A09A]">
-                                The legal basis for processing your data
-                                includes: performance of our contract with you,
-                                your consent, our legitimate interests in
-                                improving the service, and compliance with legal
-                                obligations.
+                                {__(
+                                    'The legal basis for processing your data\n                                includes: performance of our contract with you,\n                                your consent, our legitimate interests in\n                                improving the service, and compliance with legal\n                                obligations.',
+                                )}
                             </p>
                         </section>
 
                         <section className="mt-8">
                             <h2 className="mb-4 text-2xl font-semibold">
-                                4. Data Security and Encryption
+                                {__('4. Data Security and Encryption')}
                             </h2>
                             <p className="mb-4 text-[#706f6c] dark:text-[#A1A09A]">
-                                We implement robust security measures to protect
-                                your personal information:
+                                {__(
+                                    'We implement robust security measures to protect\n                                your personal information:',
+                                )}
                             </p>
                             <ul className="mb-4 list-disc pl-6 text-[#706f6c] dark:text-[#A1A09A]">
                                 <li>
-                                    <strong>End-to-End Encryption:</strong> Your
-                                    financial data is encrypted on your device
-                                    before being transmitted to our servers,
-                                    ensuring that only you can access your
-                                    information
+                                    <strong>
+                                        {__('End-to-End Encryption:')}
+                                    </strong>
+                                    {__(
+                                        'Your\n                                    financial data is encrypted on your device\n                                    before being transmitted to our servers,\n                                    ensuring that only you can access your\n                                    information',
+                                    )}
                                 </li>
                                 <li>
-                                    <strong>Secure Storage:</strong> All data is
-                                    stored on secure servers with encryption at
-                                    rest
+                                    <strong>{__('Secure Storage:')}</strong>
+                                    {__(
+                                        'All data is\n                                    stored on secure servers with encryption at\n                                    rest',
+                                    )}
                                 </li>
                                 <li>
-                                    <strong>Access Controls:</strong> Strict
-                                    access controls and authentication
-                                    mechanisms protect against unauthorized
-                                    access
+                                    <strong>{__('Access Controls:')}</strong>
+                                    {__(
+                                        'Strict\n                                    access controls and authentication\n                                    mechanisms protect against unauthorized\n                                    access',
+                                    )}
                                 </li>
                                 <li>
-                                    <strong>Regular Security Audits:</strong> We
-                                    regularly review and update our security
-                                    practices
+                                    <strong>
+                                        {__('Regular Security Audits:')}
+                                    </strong>
+                                    {__(
+                                        'We\n                                    regularly review and update our security\n                                    practices',
+                                    )}
                                 </li>
                             </ul>
                             <p className="mb-4 text-[#706f6c] dark:text-[#A1A09A]">
-                                While we use industry-standard security
-                                measures, no method of transmission over the
-                                internet or electronic storage is 100% secure.
-                                We cannot guarantee absolute security but
-                                continuously work to protect your data.
+                                {__(
+                                    'While we use industry-standard security\n                                measures, no method of transmission over the\n                                internet or electronic storage is 100% secure.\n                                We cannot guarantee absolute security but\n                                continuously work to protect your data.',
+                                )}
                             </p>
                         </section>
 
                         <section className="mt-8">
                             <h2 className="mb-4 text-2xl font-semibold">
-                                5. Third-Party Services
+                                {__('5. Third-Party Services')}
                             </h2>
                             <p className="mb-4 text-[#706f6c] dark:text-[#A1A09A]">
-                                We use the following third-party services to
-                                operate our platform:
+                                {__(
+                                    'We use the following third-party services to\n                                operate our platform:',
+                                )}
                             </p>
                             <ul className="mb-4 list-disc pl-6 text-[#706f6c] dark:text-[#A1A09A]">
                                 <li>
-                                    <strong>Payment Processors:</strong> To
-                                    process subscription payments and
-                                    transactions. These processors have access
-                                    only to the information necessary to perform
-                                    their functions and are obligated to protect
-                                    your data
+                                    <strong>{__('Payment Processors:')}</strong>
+                                    {__(
+                                        'To\n                                    process subscription payments and\n                                    transactions. These processors have access\n                                    only to the information necessary to perform\n                                    their functions and are obligated to protect\n                                    your data',
+                                    )}
                                 </li>
                                 <li>
-                                    <strong>Email Service Providers:</strong> To
-                                    send transactional emails, password resets,
-                                    and service notifications
+                                    <strong>Email Service Providers:</strong>
+                                    {__(
+                                        'To\n                                    send transactional emails, password resets,\n                                    and service notifications',
+                                    )}
                                 </li>
                             </ul>
                             <p className="mb-4 text-[#706f6c] dark:text-[#A1A09A]">
-                                We do not sell, trade, or rent your personal
-                                information to third parties for marketing
-                                purposes.
+                                {__(
+                                    'We do not sell, trade, or rent your personal\n                                information to third parties for marketing\n                                purposes.',
+                                )}
                             </p>
                         </section>
 
                         <section className="mt-8">
                             <h2 className="mb-4 text-2xl font-semibold">
-                                6. Data Retention
+                                {__('6. Data Retention')}
                             </h2>
                             <p className="mb-4 text-[#706f6c] dark:text-[#A1A09A]">
                                 We retain your personal information for as long
@@ -233,7 +263,7 @@ export default function Privacy() {
 
                         <section className="mt-8">
                             <h2 className="mb-4 text-2xl font-semibold">
-                                7. International Data Transfers
+                                {__('7. International Data Transfers')}
                             </h2>
                             <p className="mb-4 text-[#706f6c] dark:text-[#A1A09A]">
                                 Your data is primarily stored and processed
@@ -248,121 +278,130 @@ export default function Privacy() {
 
                         <section className="mt-8">
                             <h2 className="mb-4 text-2xl font-semibold">
-                                8. Your Rights Under GDPR
+                                {__('8. Your Rights Under GDPR')}
                             </h2>
                             <p className="mb-4 text-[#706f6c] dark:text-[#A1A09A]">
-                                As a user in the European Union, you have the
-                                following rights regarding your personal data:
+                                {__(
+                                    'As a user in the European Union, you have the\n                                following rights regarding your personal data:',
+                                )}
                             </p>
                             <ul className="mb-4 list-disc pl-6 text-[#706f6c] dark:text-[#A1A09A]">
                                 <li>
-                                    <strong>Right of Access:</strong> You can
-                                    request a copy of the personal data we hold
-                                    about you
+                                    <strong>{__('Right of Access:')}</strong>
+                                    {__(
+                                        'You can\n                                    request a copy of the personal data we hold\n                                    about you',
+                                    )}
                                 </li>
                                 <li>
-                                    <strong>Right to Rectification:</strong> You
-                                    can request correction of inaccurate or
-                                    incomplete data
+                                    <strong>
+                                        {__('Right to Rectification:')}
+                                    </strong>
+                                    {__(
+                                        'You\n                                    can request correction of inaccurate or\n                                    incomplete data',
+                                    )}
                                 </li>
                                 <li>
-                                    <strong>Right to Erasure:</strong> You can
-                                    request deletion of your personal data
-                                    (right to be forgotten)
+                                    <strong>{__('Right to Erasure:')}</strong>
+                                    {__(
+                                        'You can\n                                    request deletion of your personal data\n                                    (right to be forgotten)',
+                                    )}
                                 </li>
                                 <li>
-                                    <strong>Right to Data Portability:</strong>{' '}
-                                    You can request your data in a structured,
-                                    machine-readable format
+                                    <strong>
+                                        {__('Right to Data Portability:')}
+                                    </strong>{' '}
+                                    {__(
+                                        'You can request your data in a structured,\n                                    machine-readable format',
+                                    )}
                                 </li>
                                 <li>
-                                    <strong>Right to Restriction:</strong> You
-                                    can request restriction of processing in
-                                    certain circumstances
+                                    <strong>
+                                        {__('Right to Restriction:')}
+                                    </strong>
+                                    {__(
+                                        'You\n                                    can request restriction of processing in\n                                    certain circumstances',
+                                    )}
                                 </li>
                                 <li>
-                                    <strong>Right to Object:</strong> You can
-                                    object to processing of your data based on
-                                    legitimate interests
+                                    <strong>{__('Right to Object:')}</strong>
+                                    {__(
+                                        'You can\n                                    object to processing of your data based on\n                                    legitimate interests',
+                                    )}
                                 </li>
                                 <li>
-                                    <strong>Right to Withdraw Consent:</strong>{' '}
-                                    Where processing is based on consent, you
-                                    can withdraw it at any time
+                                    <strong>
+                                        {__('Right to Withdraw Consent:')}
+                                    </strong>{' '}
+                                    {__(
+                                        'Where processing is based on consent, you\n                                    can withdraw it at any time',
+                                    )}
                                 </li>
                                 <li>
-                                    <strong>Right to Lodge a Complaint:</strong>{' '}
-                                    You can file a complaint with your local
-                                    data protection authority
+                                    <strong>
+                                        {__('Right to Lodge a Complaint:')}
+                                    </strong>{' '}
+                                    {__(
+                                        'You can file a complaint with your local\n                                    data protection authority',
+                                    )}
                                 </li>
                             </ul>
                             <p className="mb-4 text-[#706f6c] dark:text-[#A1A09A]">
-                                To exercise any of these rights, please contact
-                                us at victor@whisper.money. We will respond to
-                                your request within 30 days.
+                                {__(
+                                    'To exercise any of these rights, please contact\n                                us at victor@whisper.money. We will respond to\n                                your request within 30 days.',
+                                )}
                             </p>
                         </section>
 
                         <section className="mt-8">
                             <h2 className="mb-4 text-2xl font-semibold">
-                                9. Cookies and Tracking
+                                {__('9. Cookies and Tracking')}
                             </h2>
                             <p className="mb-4 text-[#706f6c] dark:text-[#A1A09A]">
-                                We use essential cookies to maintain your
-                                session and ensure the proper functioning of our
-                                service. These cookies are necessary for the
-                                service to work and cannot be disabled. We do
-                                not use tracking cookies or analytics cookies
-                                without your explicit consent.
+                                {__(
+                                    'We use essential cookies to maintain your\n                                session and ensure the proper functioning of our\n                                service. These cookies are necessary for the\n                                service to work and cannot be disabled. We do\n                                not use tracking cookies or analytics cookies\n                                without your explicit consent.',
+                                )}
                             </p>
                         </section>
 
                         <section className="mt-8">
                             <h2 className="mb-4 text-2xl font-semibold">
-                                10. Children's Privacy
+                                {__("10. Children's Privacy")}
                             </h2>
                             <p className="mb-4 text-[#706f6c] dark:text-[#A1A09A]">
-                                Our service is not intended for users under the
-                                age of 16. We do not knowingly collect personal
-                                information from children. If you believe we
-                                have collected information from a child, please
-                                contact us immediately, and we will delete it.
+                                {__(
+                                    'Our service is not intended for users under the\n                                age of 16. We do not knowingly collect personal\n                                information from children. If you believe we\n                                have collected information from a child, please\n                                contact us immediately, and we will delete it.',
+                                )}
                             </p>
                         </section>
 
                         <section className="mt-8">
                             <h2 className="mb-4 text-2xl font-semibold">
-                                11. Changes to This Privacy Policy
+                                {__('11. Changes to This Privacy Policy')}
                             </h2>
                             <p className="mb-4 text-[#706f6c] dark:text-[#A1A09A]">
-                                We may update this Privacy Policy from time to
-                                time to reflect changes in our practices or for
-                                legal, operational, or regulatory reasons. When
-                                we make material changes, we will notify you by
-                                email and/or by posting a notice on our website
-                                at least 30 days before the changes take effect.
-                                Your continued use of the service after changes
-                                become effective constitutes acceptance of the
-                                updated policy.
+                                {__(
+                                    'We may update this Privacy Policy from time to\n                                time to reflect changes in our practices or for\n                                legal, operational, or regulatory reasons. When\n                                we make material changes, we will notify you by\n                                email and/or by posting a notice on our website\n                                at least 30 days before the changes take effect.\n                                Your continued use of the service after changes\n                                become effective constitutes acceptance of the\n                                updated policy.',
+                                )}
                             </p>
                         </section>
 
                         <section className="mt-8">
                             <h2 className="mb-4 text-2xl font-semibold">
-                                12. Contact Us
+                                {__('12. Contact Us')}
                             </h2>
                             <p className="mb-4 text-[#706f6c] dark:text-[#A1A09A]">
-                                If you have any questions, concerns, or requests
-                                regarding this Privacy Policy or our data
-                                practices, please contact us:
+                                {__(
+                                    'If you have any questions, concerns, or requests\n                                regarding this Privacy Policy or our data\n                                practices, please contact us:',
+                                )}
                             </p>
                             <div className="mb-4 text-[#706f6c] dark:text-[#A1A09A]">
                                 <p>
-                                    <strong>Email:</strong> victor@whisper.money
+                                    <strong>{__('Email:')}</strong>
+                                    {__('victor@whisper.money')}
                                 </p>
                                 <p>
-                                    <strong>Address:</strong> Whisper Money,
-                                    Calle Oca, Madrid - 28025, Spain
+                                    <strong>{__('Address:')}</strong> Whisper
+                                    Money, Calle Oca, Madrid - 28025, Spain
                                 </p>
                             </div>
                         </section>
diff --git a/resources/js/pages/settings/account.tsx b/resources/js/pages/settings/account.tsx
index 843a39f5..5640795b 100644
--- a/resources/js/pages/settings/account.tsx
+++ b/resources/js/pages/settings/account.tsx
@@ -24,6 +24,8 @@ import { disable, enable } from '@/routes/two-factor';
 import { send } from '@/routes/verification';
 import { type BreadcrumbItem, type SharedData } from '@/types';
 import { CURRENCY_OPTIONS } from '@/types/account';
+import { LANGUAGE_OPTIONS } from '@/types/language';
+import { __ } from '@/utils/i18n';
 import { Transition } from '@headlessui/react';
 import { Form, Head, Link, usePage } from '@inertiajs/react';
 import { ShieldBan, ShieldCheck } from 'lucide-react';
@@ -65,13 +67,13 @@ export default function Account({
 
     return (
         <AppLayout breadcrumbs={breadcrumbs}>
-            <Head title="Bank accounts" />
+            <Head title={__('Bank accounts')} />
 
             <SettingsLayout>
                 <div className="space-y-6">
                     <HeadingSmall
-                        title="Profile information"
-                        description="Update your name and email address"
+                        title={__('Profile information')}
+                        description={__('Update your name and email address')}
                     />
 
                     <Form
@@ -84,7 +86,7 @@ export default function Account({
                         {({ processing, recentlySuccessful, errors }) => (
                             <>
                                 <div className="grid gap-2">
-                                    <Label htmlFor="name">Name</Label>
+                                    <Label htmlFor="name">{__('Name')}</Label>
 
                                     <Input
                                         id="name"
@@ -93,7 +95,7 @@ export default function Account({
                                         name="name"
                                         required
                                         autoComplete="name"
-                                        placeholder="Full name"
+                                        placeholder={__('Name')}
                                     />
 
                                     <InputError
@@ -103,7 +105,9 @@ export default function Account({
                                 </div>
 
                                 <div className="grid gap-2">
-                                    <Label htmlFor="email">Email address</Label>
+                                    <Label htmlFor="email">
+                                        {__('Email address')}
+                                    </Label>
 
                                     <Input
                                         id="email"
@@ -113,7 +117,7 @@ export default function Account({
                                         name="email"
                                         required
                                         autoComplete="username"
-                                        placeholder="Email address"
+                                        placeholder={__('Email address')}
                                     />
 
                                     <InputError
@@ -124,7 +128,7 @@ export default function Account({
 
                                 <div className="grid gap-2">
                                     <Label htmlFor="currency_code">
-                                        Currency
+                                        {__('Currency')}
                                     </Label>
 
                                     <Select
@@ -133,7 +137,11 @@ export default function Account({
                                         required
                                     >
                                         <SelectTrigger className="mt-1 w-full">
-                                            <SelectValue placeholder="Select currency" />
+                                            <SelectValue
+                                                placeholder={__(
+                                                    'Select currency',
+                                                )}
+                                            />
                                         </SelectTrigger>
                                         <SelectContent>
                                             {CURRENCY_OPTIONS.map(
@@ -155,28 +163,66 @@ export default function Account({
                                     />
                                 </div>
 
+                                <div className="grid gap-2">
+                                    <Label htmlFor="locale">
+                                        {__('Language')}
+                                    </Label>
+
+                                    <Select
+                                        name="locale"
+                                        defaultValue={auth.user.locale}
+                                    >
+                                        <SelectTrigger className="mt-1 w-full">
+                                            <SelectValue
+                                                placeholder={__(
+                                                    'Select language',
+                                                )}
+                                            />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            {LANGUAGE_OPTIONS.map(
+                                                (language) => (
+                                                    <SelectItem
+                                                        key={language.code}
+                                                        value={language.code}
+                                                    >
+                                                        {language.label}
+                                                    </SelectItem>
+                                                ),
+                                            )}
+                                        </SelectContent>
+                                    </Select>
+
+                                    <InputError
+                                        className="mt-2"
+                                        message={errors.locale}
+                                    />
+                                </div>
+
                                 {mustVerifyEmail &&
                                     auth.user.email_verified_at === null && (
                                         <div>
                                             <p className="-mt-4 text-sm text-muted-foreground">
-                                                Your email address is
-                                                unverified.{' '}
+                                                {__(
+                                                    'Your email address is unverified.',
+                                                )}{' '}
                                                 <Link
                                                     href={send()}
                                                     as="button"
                                                     className="text-foreground underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out hover:decoration-current! dark:decoration-neutral-500"
                                                 >
-                                                    Click here to resend the
-                                                    verification email.
+                                                    {__(
+                                                        'Click here to resend the\n                                                    verification email.',
+                                                    )}
                                                 </Link>
                                             </p>
 
                                             {status ===
                                                 'verification-link-sent' && (
                                                 <div className="mt-2 text-sm font-medium text-green-600">
-                                                    A new verification link has
-                                                    been sent to your email
-                                                    address.
+                                                    {__(
+                                                        'A new verification link has\n                                                    been sent to your email\n                                                    address.',
+                                                    )}
                                                 </div>
                                             )}
                                         </div>
@@ -187,7 +233,7 @@ export default function Account({
                                         disabled={processing}
                                         data-test="update-profile-button"
                                     >
-                                        Save
+                                        {__('Save')}
                                     </Button>
 
                                     <Transition
@@ -198,7 +244,7 @@ export default function Account({
                                         leaveTo="opacity-0"
                                     >
                                         <p className="text-sm text-neutral-600">
-                                            Saved
+                                            {__('Saved')}
                                         </p>
                                     </Transition>
                                 </div>
@@ -211,8 +257,10 @@ export default function Account({
 
                 <div className="space-y-6">
                     <HeadingSmall
-                        title="Update password"
-                        description="Ensure your account is using a long, random password to stay secure"
+                        title={__('Update password')}
+                        description={__(
+                            'Ensure your account is using a long, random password to stay secure.',
+                        )}
                     />
 
                     <Form
@@ -241,7 +289,7 @@ export default function Account({
                             <>
                                 <div className="grid gap-2">
                                     <Label htmlFor="current_password">
-                                        Current password
+                                        {__('Current password')}
                                     </Label>
 
                                     <Input
@@ -251,7 +299,7 @@ export default function Account({
                                         type="password"
                                         className="mt-1 block w-full"
                                         autoComplete="current-password"
-                                        placeholder="Current password"
+                                        placeholder={__('Current password')}
                                     />
 
                                     <InputError
@@ -261,7 +309,7 @@ export default function Account({
 
                                 <div className="grid gap-2">
                                     <Label htmlFor="password">
-                                        New password
+                                        {__('New password')}
                                     </Label>
 
                                     <Input
@@ -271,7 +319,7 @@ export default function Account({
                                         type="password"
                                         className="mt-1 block w-full"
                                         autoComplete="new-password"
-                                        placeholder="New password"
+                                        placeholder={__('New password')}
                                     />
 
                                     <InputError message={errors.password} />
@@ -279,7 +327,7 @@ export default function Account({
 
                                 <div className="grid gap-2">
                                     <Label htmlFor="password_confirmation">
-                                        Confirm password
+                                        {__('Confirm password')}
                                     </Label>
 
                                     <Input
@@ -288,7 +336,7 @@ export default function Account({
                                         type="password"
                                         className="mt-1 block w-full"
                                         autoComplete="new-password"
-                                        placeholder="Confirm password"
+                                        placeholder={__('Confirm password')}
                                     />
 
                                     <InputError
@@ -301,7 +349,7 @@ export default function Account({
                                         disabled={processing}
                                         data-test="update-password-button"
                                     >
-                                        Save password
+                                        {__('Save password')}
                                     </Button>
 
                                     <Transition
@@ -312,7 +360,7 @@ export default function Account({
                                         leaveTo="opacity-0"
                                     >
                                         <p className="text-sm text-neutral-600">
-                                            Saved
+                                            {__('Saved')}
                                         </p>
                                     </Transition>
                                 </div>
@@ -325,17 +373,19 @@ export default function Account({
 
                 <div className="space-y-6">
                     <HeadingSmall
-                        title="Two-Factor Authentication"
-                        description="Manage your two-factor authentication settings"
+                        title={__('Two-Factor Authentication')}
+                        description={__(
+                            'Manage your two-factor authentication settings',
+                        )}
                     />
+
                     {twoFactorEnabled ? (
                         <div className="flex flex-col items-start justify-start space-y-4">
-                            <Badge variant="default">Enabled</Badge>
+                            <Badge variant="default">{__('Enabled')}</Badge>
                             <p className="text-muted-foreground">
-                                With two-factor authentication enabled, you will
-                                be prompted for a secure, random pin during
-                                login, which you can retrieve from the
-                                TOTP-supported application on your phone.
+                                {__(
+                                    'With two-factor authentication enabled, you will\n                                be prompted for a secure, random pin during\n                                login, which you can retrieve from the\n                                TOTP-supported application on your phone.',
+                                )}
                             </p>
 
                             <TwoFactorRecoveryCodes
@@ -352,7 +402,8 @@ export default function Account({
                                             type="submit"
                                             disabled={processing}
                                         >
-                                            <ShieldBan /> Disable 2FA
+                                            <ShieldBan />
+                                            {__('Disable 2FA')}
                                         </Button>
                                     )}
                                 </Form>
@@ -360,12 +411,13 @@ export default function Account({
                         </div>
                     ) : (
                         <div className="flex flex-col items-start justify-start space-y-4">
-                            <Badge variant="destructive">Disabled</Badge>
+                            <Badge variant="destructive">
+                                {__('Disabled')}
+                            </Badge>
                             <p className="text-muted-foreground">
-                                When you enable two-factor authentication, you
-                                will be prompted for a secure pin during login.
-                                This pin can be retrieved from a TOTP-supported
-                                application on your phone.
+                                {__(
+                                    'When you enable two-factor authentication, you\n                                will be prompted for a secure pin during login.\n                                This pin can be retrieved from a TOTP-supported\n                                application on your phone.',
+                                )}
                             </p>
 
                             <div>
@@ -374,7 +426,7 @@ export default function Account({
                                         onClick={() => setShowSetupModal(true)}
                                     >
                                         <ShieldCheck />
-                                        Continue Setup
+                                        {__('Continue Setup')}
                                     </Button>
                                 ) : (
                                     <Form
@@ -389,7 +441,7 @@ export default function Account({
                                                 disabled={processing}
                                             >
                                                 <ShieldCheck />
-                                                Enable 2FA
+                                                {__('Enable 2FA')}
                                             </Button>
                                         )}
                                     </Form>
diff --git a/resources/js/pages/settings/accounts.tsx b/resources/js/pages/settings/accounts.tsx
index 1fd57a0e..51065706 100644
--- a/resources/js/pages/settings/accounts.tsx
+++ b/resources/js/pages/settings/accounts.tsx
@@ -1,3 +1,4 @@
+import { __ } from '@/utils/i18n';
 import { Head, router } from '@inertiajs/react';
 import {
     Cell,
@@ -52,13 +53,6 @@ import SettingsLayout from '@/layouts/settings/layout';
 import { type BreadcrumbItem } from '@/types';
 import { type Account, formatAccountType } from '@/types/account';
 
-const breadcrumbs: BreadcrumbItem[] = [
-    {
-        title: 'Bank accounts',
-        href: accountsIndex.url(),
-    },
-];
-
 function AccountActions({
     account,
     onSuccess,
@@ -76,22 +70,22 @@ function AccountActions({
                     <Button
                         variant="ghost"
                         className="h-8 w-8 p-0"
-                        aria-label="Open menu"
+                        aria-label={__('Open menu')}
                     >
-                        <span className="sr-only">Open menu</span>
+                        <span className="sr-only">{__('Open menu')}</span>
                         <MoreHorizontal className="h-4 w-4" />
                     </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="end">
-                    <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                    <DropdownMenuLabel>{__('Actions')}</DropdownMenuLabel>
                     <DropdownMenuItem onClick={() => setEditOpen(true)}>
-                        Edit
+                        {__('Edit')}
                     </DropdownMenuItem>
                     <DropdownMenuItem
                         onClick={() => setDeleteOpen(true)}
                         className="text-red-600"
                     >
-                        Delete
+                        {__('Delete')}
                     </DropdownMenuItem>
                 </DropdownMenuContent>
             </DropdownMenu>
@@ -102,6 +96,7 @@ function AccountActions({
                 onOpenChange={setEditOpen}
                 onSuccess={onSuccess}
             />
+
             <DeleteAccountDialog
                 account={account}
                 open={deleteOpen}
@@ -147,15 +142,15 @@ function AccountRow({
                     </TableRow>
                 </ContextMenuTrigger>
                 <ContextMenuContent>
-                    <ContextMenuLabel>Actions</ContextMenuLabel>
+                    <ContextMenuLabel>{__('Actions')}</ContextMenuLabel>
                     <ContextMenuItem onClick={() => setEditOpen(true)}>
-                        Edit
+                        {__('Edit')}
                     </ContextMenuItem>
                     <ContextMenuItem
                         onClick={() => setDeleteOpen(true)}
                         className="text-red-600"
                     >
-                        Delete
+                        {__('Delete')}
                     </ContextMenuItem>
                 </ContextMenuContent>
             </ContextMenu>
@@ -166,6 +161,7 @@ function AccountRow({
                 onOpenChange={setEditOpen}
                 onSuccess={onSuccess}
             />
+
             <DeleteAccountDialog
                 account={account}
                 open={deleteOpen}
@@ -187,6 +183,13 @@ export default function Accounts({ accounts }: AccountsPageProps) {
         {},
     );
 
+    const breadcrumbs: BreadcrumbItem[] = [
+        {
+            title: __('Bank accounts'),
+            href: accountsIndex.url(),
+        },
+    ];
+
     const handleAccountCreated = () => {
         router.reload({ only: ['accounts'] });
     };
@@ -202,7 +205,8 @@ export default function Accounts({ accounts }: AccountsPageProps) {
                             column.toggleSorting(column.getIsSorted() === 'asc')
                         }
                     >
-                        Name
+                        {__('Name')}
+
                         <ArrowUpDown className="ml-2 h-4 w-4" />
                     </Button>
                 );
@@ -221,7 +225,7 @@ export default function Accounts({ accounts }: AccountsPageProps) {
         },
         {
             accessorKey: 'bank',
-            header: 'Bank',
+            header: () => __('Bank'),
             cell: ({ row }) => {
                 const bank = row.original.bank;
                 return (
@@ -242,7 +246,7 @@ export default function Accounts({ accounts }: AccountsPageProps) {
         },
         {
             accessorKey: 'type',
-            header: 'Type',
+            header: () => __('Type'),
             cell: ({ row }) => {
                 return (
                     <Badge variant="outline">
@@ -253,7 +257,7 @@ export default function Accounts({ accounts }: AccountsPageProps) {
         },
         {
             accessorKey: 'currency_code',
-            header: 'Currency',
+            header: () => __('Currency'),
             cell: ({ row }) => {
                 return (
                     <div className="font-medium">
@@ -293,19 +297,19 @@ export default function Accounts({ accounts }: AccountsPageProps) {
 
     return (
         <AppLayout breadcrumbs={breadcrumbs}>
-            <Head title="Bank accounts" />
+            <Head title={__('Bank accounts')} />
 
             <SettingsLayout>
                 <div className="space-y-6">
                     <HeadingSmall
-                        title="Bank accounts"
-                        description="Manage your bank accounts"
+                        title={__('Bank accounts')}
+                        description={__('Manage your bank accounts')}
                     />
 
                     <div className="space-y-4">
                         <div className="flex items-center justify-between">
                             <Input
-                                placeholder="Filter accounts..."
+                                placeholder={__('Filter accounts...')}
                                 value={
                                     (table
                                         .getColumn('name')
@@ -318,6 +322,7 @@ export default function Accounts({ accounts }: AccountsPageProps) {
                                 }
                                 className="max-w-sm"
                             />
+
                             <CreateAccountDialog
                                 onSuccess={handleAccountCreated}
                             />
@@ -371,7 +376,7 @@ export default function Accounts({ accounts }: AccountsPageProps) {
                                                 colSpan={columns.length}
                                                 className="h-24 text-center"
                                             >
-                                                No accounts found.
+                                                {__('No accounts found.')}
                                             </TableCell>
                                         </TableRow>
                                     )}
diff --git a/resources/js/pages/settings/appearance.tsx b/resources/js/pages/settings/appearance.tsx
index d0221f1f..db1dae46 100644
--- a/resources/js/pages/settings/appearance.tsx
+++ b/resources/js/pages/settings/appearance.tsx
@@ -1,3 +1,4 @@
+import { __ } from '@/utils/i18n';
 import { Head } from '@inertiajs/react';
 
 import AppearanceTabs from '@/components/appearance-tabs';
@@ -18,14 +19,17 @@ const breadcrumbs: BreadcrumbItem[] = [
 export default function Appearance() {
     return (
         <AppLayout breadcrumbs={breadcrumbs}>
-            <Head title="Appearance settings" />
+            <Head title={__('Appearance settings')} />
 
             <SettingsLayout>
                 <div className="space-y-6">
                     <HeadingSmall
-                        title="Appearance settings"
-                        description="Update your account's appearance settings"
+                        title={__('Appearance settings')}
+                        description={__(
+                            "Update your account's appearance settings",
+                        )}
                     />
+
                     <AppearanceTabs />
                 </div>
             </SettingsLayout>
diff --git a/resources/js/pages/settings/automation-rules.tsx b/resources/js/pages/settings/automation-rules.tsx
index 088b11d3..92342a72 100644
--- a/resources/js/pages/settings/automation-rules.tsx
+++ b/resources/js/pages/settings/automation-rules.tsx
@@ -54,6 +54,7 @@ import { type BreadcrumbItem } from '@/types';
 import { type AutomationRule, getRuleActions } from '@/types/automation-rule';
 import { type Category, getCategoryColorClasses } from '@/types/category';
 import { type Label } from '@/types/label';
+import { __ } from '@/utils/i18n';
 
 const breadcrumbs: BreadcrumbItem[] = [
     {
@@ -81,22 +82,22 @@ function AutomationRuleActions({
                     <Button
                         variant="ghost"
                         className="h-8 w-8 p-0"
-                        aria-label="Actions"
+                        aria-label={__('Actions')}
                     >
-                        <span className="sr-only">Open menu</span>
+                        <span className="sr-only">{__('Open menu')}</span>
                         <MoreHorizontal className="h-4 w-4" />
                     </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="end">
-                    <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                    <DropdownMenuLabel>{__('Actions')}</DropdownMenuLabel>
                     <DropdownMenuItem onClick={() => setEditOpen(true)}>
-                        Edit
+                        {__('Edit')}
                     </DropdownMenuItem>
                     <DropdownMenuItem
                         onClick={() => setDeleteOpen(true)}
                         variant="destructive"
                     >
-                        Delete
+                        {__('Delete')}
                     </DropdownMenuItem>
                 </DropdownMenuContent>
             </DropdownMenu>
@@ -154,15 +155,15 @@ function AutomationRuleRow({
                     </TableRow>
                 </ContextMenuTrigger>
                 <ContextMenuContent>
-                    <ContextMenuLabel>Actions</ContextMenuLabel>
+                    <ContextMenuLabel>{__('Actions')}</ContextMenuLabel>
                     <ContextMenuItem onClick={() => setEditOpen(true)}>
-                        Edit
+                        {__('Edit')}
                     </ContextMenuItem>
                     <ContextMenuItem
                         onClick={() => setDeleteOpen(true)}
                         variant="destructive"
                     >
-                        Delete
+                        {__('Delete')}
                     </ContextMenuItem>
                 </ContextMenuContent>
             </ContextMenu>
@@ -217,7 +218,7 @@ export default function AutomationRules() {
     const columns: ColumnDef<AutomationRule>[] = [
         {
             accessorKey: 'priority',
-            header: 'Priority',
+            header: __('Priority'),
             cell: ({ row }) => {
                 return (
                     <div className="font-medium">
@@ -228,7 +229,7 @@ export default function AutomationRules() {
         },
         {
             accessorKey: 'title',
-            header: 'Title',
+            header: __('Title'),
             cell: ({ row }) => {
                 return (
                     <div className="font-medium">{row.getValue('title')}</div>
@@ -237,7 +238,7 @@ export default function AutomationRules() {
         },
         {
             id: 'actions_display',
-            header: 'Actions',
+            header: __('Actions'),
             cell: ({ row }) => {
                 const rule = row.original;
                 const actions = getRuleActions(rule);
@@ -296,7 +297,7 @@ export default function AutomationRules() {
 
                 return (
                     <span className="text-sm text-muted-foreground">
-                        Add note
+                        {__('Add note')}
                     </span>
                 );
             },
@@ -332,19 +333,21 @@ export default function AutomationRules() {
 
     return (
         <AppLayout breadcrumbs={breadcrumbs}>
-            <Head title="Automation rules settings" />
+            <Head title={__('Automation rules settings')} />
 
             <SettingsLayout>
                 <div className="space-y-6">
                     <HeadingSmall
-                        title="Automation rules settings"
-                        description="Manage your transaction automation rules"
+                        title={__('Automation rules settings')}
+                        description={__(
+                            'Manage your transaction automation rules',
+                        )}
                     />
 
                     <div className="space-y-4">
                         <div className="flex items-center justify-between gap-4">
                             <Input
-                                placeholder="Filter rules..."
+                                placeholder={__('Filter rules...')}
                                 value={
                                     (table
                                         .getColumn('title')
@@ -411,7 +414,9 @@ export default function AutomationRules() {
                                                 colSpan={columns.length}
                                                 className="h-24 text-center"
                                             >
-                                                No automation rules found.
+                                                {__(
+                                                    'No automation rules found.',
+                                                )}
                                             </TableCell>
                                         </TableRow>
                                     )}
@@ -422,7 +427,7 @@ export default function AutomationRules() {
                         <div className="flex items-center justify-end">
                             <div className="text-sm text-muted-foreground">
                                 {table.getFilteredRowModel().rows.length}{' '}
-                                rule(s) total.
+                                {__('rule(s) total.')}
                             </div>
                         </div>
                     </div>
diff --git a/resources/js/pages/settings/billing.tsx b/resources/js/pages/settings/billing.tsx
index ac23aff3..d4a21bc1 100644
--- a/resources/js/pages/settings/billing.tsx
+++ b/resources/js/pages/settings/billing.tsx
@@ -5,6 +5,7 @@ import AppLayout from '@/layouts/app-layout';
 import SettingsLayout from '@/layouts/settings/layout';
 import { billing } from '@/routes/settings';
 import { type BreadcrumbItem, type SharedData } from '@/types';
+import { __ } from '@/utils/i18n';
 import { Head, usePage } from '@inertiajs/react';
 import {
     CheckIcon,
@@ -53,21 +54,24 @@ export default function Billing() {
 
     return (
         <AppLayout breadcrumbs={breadcrumbs}>
-            <Head title="Manage Plan" />
+            <Head title={__('Manage Plan')} />
 
             <SettingsLayout>
                 <div className="space-y-6">
                     <HeadingSmall
-                        title="Your Pro Plan"
-                        description="You're enjoying all the benefits of Whisper Money Pro"
+                        title={__('Your Pro Plan')}
+                        description={__(
+                            "You're enjoying all the benefits of Whisper Money Pro",
+                        )}
                     />
 
                     {isDemoAccount && (
                         <Alert>
                             <InfoIcon className="h-4 w-4" />
                             <AlertDescription>
-                                Billing management is not available on the demo
-                                account.
+                                {__(
+                                    'Billing management is not available on the demo\n                                account.',
+                                )}
                             </AlertDescription>
                         </Alert>
                     )}
@@ -96,20 +100,23 @@ export default function Billing() {
                     <div className="rounded-lg border bg-card p-5">
                         <div className="flex items-center gap-2">
                             <CheckIcon className="size-5 text-emerald-500" />
-                            <span className="font-medium">Pro Plan Active</span>
+                            <span className="font-medium">
+                                {__('Pro Plan Active')}
+                            </span>
                             <span className="text-muted-foreground">
-                                — $9/month
+                                {__('\u2014 $9/month')}
                             </span>
                         </div>
                         <p className="mt-2 text-sm text-muted-foreground">
-                            Manage your subscription, update payment methods, or
-                            view invoices through the Stripe billing portal.
+                            {__(
+                                'Manage your subscription, update payment methods, or\n                            view invoices through the Stripe billing portal.',
+                            )}
                         </p>
                         {!isDemoAccount && (
                             <a href={billing.portal.url()}>
                                 <Button className="mt-4">
                                     <CreditCardIcon className="size-4" />
-                                    Manage Subscription
+                                    {__('Manage Subscription')}
                                 </Button>
                             </a>
                         )}
diff --git a/resources/js/pages/settings/categories.tsx b/resources/js/pages/settings/categories.tsx
index 6617a1cf..dd08c5fe 100644
--- a/resources/js/pages/settings/categories.tsx
+++ b/resources/js/pages/settings/categories.tsx
@@ -1,3 +1,4 @@
+import { __ } from '@/utils/i18n';
 import { Head, usePage } from '@inertiajs/react';
 import {
     Cell,
@@ -67,20 +68,20 @@ function CategoryActions({ category }: { category: Category }) {
             <DropdownMenu>
                 <DropdownMenuTrigger asChild>
                     <Button variant="ghost" className="h-8 w-8 p-0">
-                        <span className="sr-only">Open menu</span>
+                        <span className="sr-only">{__('Open menu')}</span>
                         <MoreHorizontal className="h-4 w-4" />
                     </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="end">
-                    <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                    <DropdownMenuLabel>{__('Actions')}</DropdownMenuLabel>
                     <DropdownMenuItem onClick={() => setEditOpen(true)}>
-                        Edit
+                        {__('Edit')}
                     </DropdownMenuItem>
                     <DropdownMenuItem
                         onClick={() => setDeleteOpen(true)}
                         variant="destructive"
                     >
-                        Delete
+                        {__('Delete')}
                     </DropdownMenuItem>
                 </DropdownMenuContent>
             </DropdownMenu>
@@ -91,6 +92,7 @@ function CategoryActions({ category }: { category: Category }) {
                 onOpenChange={setEditOpen}
                 onSuccess={() => {}}
             />
+
             <DeleteCategoryDialog
                 category={category}
                 open={deleteOpen}
@@ -130,15 +132,15 @@ function CategoryRow({ row }: { row: Row<Category> }) {
                     </TableRow>
                 </ContextMenuTrigger>
                 <ContextMenuContent>
-                    <ContextMenuLabel>Actions</ContextMenuLabel>
+                    <ContextMenuLabel>{__('Actions')}</ContextMenuLabel>
                     <ContextMenuItem onClick={() => setEditOpen(true)}>
-                        Edit
+                        {__('Edit')}
                     </ContextMenuItem>
                     <ContextMenuItem
                         onClick={() => setDeleteOpen(true)}
                         variant="destructive"
                     >
-                        Delete
+                        {__('Delete')}
                     </ContextMenuItem>
                 </ContextMenuContent>
             </ContextMenu>
@@ -149,6 +151,7 @@ function CategoryRow({ row }: { row: Row<Category> }) {
                 onOpenChange={setEditOpen}
                 onSuccess={() => {}}
             />
+
             <DeleteCategoryDialog
                 category={category}
                 open={deleteOpen}
@@ -180,7 +183,8 @@ export default function Categories() {
                             column.toggleSorting(column.getIsSorted() === 'asc')
                         }
                     >
-                        Name
+                        {__('Name')}
+
                         <ArrowUpDown className="ml-2 h-4 w-4" />
                     </Button>
                 );
@@ -204,7 +208,7 @@ export default function Categories() {
         },
         {
             accessorKey: 'color',
-            header: 'Color',
+            header: __('Color'),
             cell: ({ row }) => {
                 const color = row.getValue('color') as Category['color'];
                 if (!color) {
@@ -218,29 +222,29 @@ export default function Categories() {
                     <Badge
                         className={`${colorClasses.bg} ${colorClasses.text} text-[10px] tracking-widest`}
                     >
-                        {color.toLocaleUpperCase()}
+                        {__(color).toLocaleUpperCase()}
                     </Badge>
                 );
             },
         },
         {
             accessorKey: 'type',
-            header: 'Type',
+            header: __('Type'),
             cell: ({ row }) => {
                 const type = row.getValue('type') as Category['type'];
                 const typeConfig = {
                     income: {
-                        label: 'Income',
+                        label: __('Income'),
                         className:
                             'bg-green-50 text-green-700 dark:bg-green-700 dark:text-green-100',
                     },
                     expense: {
-                        label: 'Expense',
+                        label: __('Expense'),
                         className:
                             'bg-red-50 text-red-700 dark:bg-red-700 dark:text-red-100',
                     },
                     transfer: {
-                        label: 'Transfer',
+                        label: __('Transfer'),
                         className:
                             'bg-zinc-50 text-zinc-700 dark:bg-zinc-700 dark:text-zinc-100',
                     },
@@ -280,19 +284,19 @@ export default function Categories() {
 
     return (
         <AppLayout breadcrumbs={breadcrumbs}>
-            <Head title="Categories settings" />
+            <Head title={__('Categories settings')} />
 
             <SettingsLayout>
                 <div className="space-y-6">
                     <HeadingSmall
-                        title="Categories settings"
-                        description="Manage your transaction categories"
+                        title={__('Categories settings')}
+                        description={__('Manage your transaction categories')}
                     />
 
                     <div className="space-y-4">
                         <div className="flex items-center justify-between">
                             <Input
-                                placeholder="Filter categories..."
+                                placeholder={__('Filter categories...')}
                                 value={
                                     (table
                                         .getColumn('name')
@@ -305,6 +309,7 @@ export default function Categories() {
                                 }
                                 className="max-w-sm"
                             />
+
                             <CreateCategoryDialog onSuccess={() => {}} />
                         </div>
 
@@ -353,7 +358,7 @@ export default function Categories() {
                                                 colSpan={columns.length}
                                                 className="h-24 text-center"
                                             >
-                                                No categories found.
+                                                {__('No categories found.')}
                                             </TableCell>
                                         </TableRow>
                                     )}
@@ -364,7 +369,7 @@ export default function Categories() {
                         <div className="flex items-center justify-end">
                             <div className="text-sm text-muted-foreground">
                                 {table.getFilteredRowModel().rows.length}{' '}
-                                category(ies) total.
+                                {__('category(ies) total.')}
                             </div>
                         </div>
                     </div>
diff --git a/resources/js/pages/settings/delete-account.tsx b/resources/js/pages/settings/delete-account.tsx
index 374ede20..88b3cc85 100644
--- a/resources/js/pages/settings/delete-account.tsx
+++ b/resources/js/pages/settings/delete-account.tsx
@@ -3,6 +3,7 @@ import AppLayout from '@/layouts/app-layout';
 import SettingsLayout from '@/layouts/settings/layout';
 import { edit as deleteAccountEdit } from '@/routes/delete-account';
 import { type BreadcrumbItem } from '@/types';
+import { __ } from '@/utils/i18n';
 import { Head } from '@inertiajs/react';
 
 const breadcrumbs: BreadcrumbItem[] = [
@@ -15,7 +16,7 @@ const breadcrumbs: BreadcrumbItem[] = [
 export default function DeleteAccount() {
     return (
         <AppLayout breadcrumbs={breadcrumbs}>
-            <Head title="Delete account" />
+            <Head title={__('Delete account')} />
 
             <SettingsLayout>
                 <DeleteUser />
diff --git a/resources/js/pages/settings/labels.tsx b/resources/js/pages/settings/labels.tsx
index 78e16a97..4a88438d 100644
--- a/resources/js/pages/settings/labels.tsx
+++ b/resources/js/pages/settings/labels.tsx
@@ -1,3 +1,4 @@
+import { __ } from '@/utils/i18n';
 import { Head, usePage } from '@inertiajs/react';
 import {
     Cell,
@@ -66,20 +67,20 @@ function LabelActions({ label }: { label: Label }) {
             <DropdownMenu>
                 <DropdownMenuTrigger asChild>
                     <Button variant="ghost" className="h-8 w-8 p-0">
-                        <span className="sr-only">Open menu</span>
+                        <span className="sr-only">{__('Open menu')}</span>
                         <MoreHorizontal className="h-4 w-4" />
                     </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="end">
-                    <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                    <DropdownMenuLabel>{__('Actions')}</DropdownMenuLabel>
                     <DropdownMenuItem onClick={() => setEditOpen(true)}>
-                        Edit
+                        {__('Edit')}
                     </DropdownMenuItem>
                     <DropdownMenuItem
                         onClick={() => setDeleteOpen(true)}
                         variant="destructive"
                     >
-                        Delete
+                        {__('Delete')}
                     </DropdownMenuItem>
                 </DropdownMenuContent>
             </DropdownMenu>
@@ -90,6 +91,7 @@ function LabelActions({ label }: { label: Label }) {
                 onOpenChange={setEditOpen}
                 onSuccess={() => {}}
             />
+
             <DeleteLabelDialog
                 label={label}
                 open={deleteOpen}
@@ -129,15 +131,15 @@ function LabelRow({ row }: { row: Row<Label> }) {
                     </TableRow>
                 </ContextMenuTrigger>
                 <ContextMenuContent>
-                    <ContextMenuLabel>Actions</ContextMenuLabel>
+                    <ContextMenuLabel>{__('Actions')}</ContextMenuLabel>
                     <ContextMenuItem onClick={() => setEditOpen(true)}>
-                        Edit
+                        {__('Edit')}
                     </ContextMenuItem>
                     <ContextMenuItem
                         onClick={() => setDeleteOpen(true)}
                         variant="destructive"
                     >
-                        Delete
+                        {__('Delete')}
                     </ContextMenuItem>
                 </ContextMenuContent>
             </ContextMenu>
@@ -148,6 +150,7 @@ function LabelRow({ row }: { row: Row<Label> }) {
                 onOpenChange={setEditOpen}
                 onSuccess={() => {}}
             />
+
             <DeleteLabelDialog
                 label={label}
                 open={deleteOpen}
@@ -179,7 +182,8 @@ export default function Labels() {
                             column.toggleSorting(column.getIsSorted() === 'asc')
                         }
                     >
-                        Name
+                        {__('Name')}
+
                         <ArrowUpDown className="ml-2 h-4 w-4" />
                     </Button>
                 );
@@ -197,7 +201,7 @@ export default function Labels() {
         },
         {
             accessorKey: 'color',
-            header: 'Color',
+            header: __('Color'),
             cell: ({ row }) => {
                 const color = row.getValue('color') as Label['color'];
                 if (!color) {
@@ -208,7 +212,7 @@ export default function Labels() {
                     <Badge
                         className={`${colorClasses.bg} ${colorClasses.text} text-[10px] tracking-widest`}
                     >
-                        {color.toLocaleUpperCase()}
+                        {__(color).toLocaleUpperCase()}
                     </Badge>
                 );
             },
@@ -238,19 +242,19 @@ export default function Labels() {
 
     return (
         <AppLayout breadcrumbs={breadcrumbs}>
-            <Head title="Labels settings" />
+            <Head title={__('Labels settings')} />
 
             <SettingsLayout>
                 <div className="space-y-6">
                     <HeadingSmall
-                        title="Labels settings"
-                        description="Manage your transaction labels"
+                        title={__('Labels settings')}
+                        description={__('Manage your transaction labels')}
                     />
 
                     <div className="space-y-4">
                         <div className="flex items-center justify-between">
                             <Input
-                                placeholder="Filter labels..."
+                                placeholder={__('Filter labels...')}
                                 value={
                                     (table
                                         .getColumn('name')
@@ -263,6 +267,7 @@ export default function Labels() {
                                 }
                                 className="max-w-sm"
                             />
+
                             <CreateLabelDialog onSuccess={() => {}} />
                         </div>
 
@@ -311,7 +316,7 @@ export default function Labels() {
                                                 colSpan={columns.length}
                                                 className="h-24 text-center"
                                             >
-                                                No labels found.
+                                                {__('No labels found.')}
                                             </TableCell>
                                         </TableRow>
                                     )}
@@ -322,7 +327,7 @@ export default function Labels() {
                         <div className="flex items-center justify-end">
                             <div className="text-sm text-muted-foreground">
                                 {table.getFilteredRowModel().rows.length}{' '}
-                                label(s) total.
+                                {__('label(s) total.')}
                             </div>
                         </div>
                     </div>
diff --git a/resources/js/pages/settings/password.tsx b/resources/js/pages/settings/password.tsx
index 893f57dd..61a1a0f6 100644
--- a/resources/js/pages/settings/password.tsx
+++ b/resources/js/pages/settings/password.tsx
@@ -3,6 +3,7 @@ import InputError from '@/components/input-error';
 import AppLayout from '@/layouts/app-layout';
 import SettingsLayout from '@/layouts/settings/layout';
 import { type BreadcrumbItem, type SharedData } from '@/types';
+import { __ } from '@/utils/i18n';
 import { Transition } from '@headlessui/react';
 import { Form, Head, usePage } from '@inertiajs/react';
 import { useRef } from 'react';
@@ -30,21 +31,24 @@ export default function Password() {
 
     return (
         <AppLayout breadcrumbs={breadcrumbs}>
-            <Head title="Password settings" />
+            <Head title={__('Password settings')} />
 
             <SettingsLayout>
                 <div className="space-y-6">
                     <HeadingSmall
-                        title="Update password"
-                        description="Ensure your account is using a long, random password to stay secure"
+                        title={__('Update password')}
+                        description={__(
+                            'Ensure your account is using a long, random password to stay secure',
+                        )}
                     />
 
                     {isDemoAccount && (
                         <Alert>
                             <InfoIcon className="h-4 w-4" />
                             <AlertDescription>
-                                Password changes are disabled on the demo
-                                account.
+                                {__(
+                                    'Password changes are disabled on the demo\n                                account.',
+                                )}
                             </AlertDescription>
                         </Alert>
                     )}
@@ -75,7 +79,7 @@ export default function Password() {
                             <>
                                 <div className="grid gap-2">
                                     <Label htmlFor="current_password">
-                                        Current password
+                                        {__('Current password')}
                                     </Label>
 
                                     <Input
@@ -85,7 +89,7 @@ export default function Password() {
                                         type="password"
                                         className="mt-1 block w-full"
                                         autoComplete="current-password"
-                                        placeholder="Current password"
+                                        placeholder={__('Current password')}
                                     />
 
                                     <InputError
@@ -95,7 +99,7 @@ export default function Password() {
 
                                 <div className="grid gap-2">
                                     <Label htmlFor="password">
-                                        New password
+                                        {__('New password')}
                                     </Label>
 
                                     <Input
@@ -105,7 +109,7 @@ export default function Password() {
                                         type="password"
                                         className="mt-1 block w-full"
                                         autoComplete="new-password"
-                                        placeholder="New password"
+                                        placeholder={__('New password')}
                                     />
 
                                     <InputError message={errors.password} />
@@ -113,7 +117,7 @@ export default function Password() {
 
                                 <div className="grid gap-2">
                                     <Label htmlFor="password_confirmation">
-                                        Confirm password
+                                        {__('Confirm password')}
                                     </Label>
 
                                     <Input
@@ -122,7 +126,7 @@ export default function Password() {
                                         type="password"
                                         className="mt-1 block w-full"
                                         autoComplete="new-password"
-                                        placeholder="Confirm password"
+                                        placeholder={__('Confirm password')}
                                     />
 
                                     <InputError
@@ -135,7 +139,7 @@ export default function Password() {
                                         disabled={processing || isDemoAccount}
                                         data-test="update-password-button"
                                     >
-                                        Save password
+                                        {__('Save password')}
                                     </Button>
 
                                     <Transition
@@ -146,7 +150,7 @@ export default function Password() {
                                         leaveTo="opacity-0"
                                     >
                                         <p className="text-sm text-neutral-600">
-                                            Saved
+                                            {__('Saved')}
                                         </p>
                                     </Transition>
                                 </div>
diff --git a/resources/js/pages/settings/two-factor.tsx b/resources/js/pages/settings/two-factor.tsx
index 407eac6d..77c28ac3 100644
--- a/resources/js/pages/settings/two-factor.tsx
+++ b/resources/js/pages/settings/two-factor.tsx
@@ -9,6 +9,7 @@ import AppLayout from '@/layouts/app-layout';
 import SettingsLayout from '@/layouts/settings/layout';
 import { disable, enable, show } from '@/routes/two-factor';
 import { type BreadcrumbItem, type SharedData } from '@/types';
+import { __ } from '@/utils/i18n';
 import { Form, Head, usePage } from '@inertiajs/react';
 import { InfoIcon, ShieldBan, ShieldCheck } from 'lucide-react';
 import { useState } from 'react';
@@ -45,32 +46,34 @@ export default function TwoFactor({
 
     return (
         <AppLayout breadcrumbs={breadcrumbs}>
-            <Head title="Two-Factor Authentication" />
+            <Head title={__('Two-Factor Authentication')} />
             <SettingsLayout>
                 <div className="space-y-6">
                     <HeadingSmall
-                        title="Two-Factor Authentication"
-                        description="Manage your two-factor authentication settings"
+                        title={__('Two-Factor Authentication')}
+                        description={__(
+                            'Manage your two-factor authentication settings',
+                        )}
                     />
 
                     {isDemoAccount && (
                         <Alert>
                             <InfoIcon className="h-4 w-4" />
                             <AlertDescription>
-                                Two-factor authentication settings cannot be
-                                changed on the demo account.
+                                {__(
+                                    'Two-factor authentication settings cannot be\n                                changed on the demo account.',
+                                )}
                             </AlertDescription>
                         </Alert>
                     )}
 
                     {twoFactorEnabled ? (
                         <div className="flex flex-col items-start justify-start space-y-4">
-                            <Badge variant="default">Enabled</Badge>
+                            <Badge variant="default">{__('Enabled')}</Badge>
                             <p className="text-muted-foreground">
-                                With two-factor authentication enabled, you will
-                                be prompted for a secure, random pin during
-                                login, which you can retrieve from the
-                                TOTP-supported application on your phone.
+                                {__(
+                                    'With two-factor authentication enabled, you will\n                                be prompted for a secure, random pin during\n                                login, which you can retrieve from the\n                                TOTP-supported application on your phone.',
+                                )}
                             </p>
 
                             <TwoFactorRecoveryCodes
@@ -88,7 +91,8 @@ export default function TwoFactor({
                                                 type="submit"
                                                 disabled={processing}
                                             >
-                                                <ShieldBan /> Disable 2FA
+                                                <ShieldBan />
+                                                {__('Disable 2FA')}
                                             </Button>
                                         )}
                                     </Form>
@@ -97,12 +101,13 @@ export default function TwoFactor({
                         </div>
                     ) : (
                         <div className="flex flex-col items-start justify-start space-y-4">
-                            <Badge variant="destructive">Disabled</Badge>
+                            <Badge variant="destructive">
+                                {__('Disabled')}
+                            </Badge>
                             <p className="text-muted-foreground">
-                                When you enable two-factor authentication, you
-                                will be prompted for a secure pin during login.
-                                This pin can be retrieved from a TOTP-supported
-                                application on your phone.
+                                {__(
+                                    'When you enable two-factor authentication, you\n                                will be prompted for a secure pin during login.\n                                This pin can be retrieved from a TOTP-supported\n                                application on your phone.',
+                                )}
                             </p>
 
                             {!isDemoAccount && (
@@ -114,7 +119,7 @@ export default function TwoFactor({
                                             }
                                         >
                                             <ShieldCheck />
-                                            Continue Setup
+                                            {__('Continue Setup')}
                                         </Button>
                                     ) : (
                                         <Form
@@ -129,7 +134,7 @@ export default function TwoFactor({
                                                     disabled={processing}
                                                 >
                                                     <ShieldCheck />
-                                                    Enable 2FA
+                                                    {__('Enable 2FA')}
                                                 </Button>
                                             )}
                                         </Form>
diff --git a/resources/js/pages/subscription/paywall.tsx b/resources/js/pages/subscription/paywall.tsx
index 72245f24..dd3ff84d 100644
--- a/resources/js/pages/subscription/paywall.tsx
+++ b/resources/js/pages/subscription/paywall.tsx
@@ -7,10 +7,12 @@ import {
     TooltipTrigger,
 } from '@/components/ui/tooltip';
 import { useCountUp } from '@/hooks/use-count-up';
+import { useLocale } from '@/hooks/use-locale';
 import { cn } from '@/lib/utils';
 import { checkout } from '@/routes/subscribe';
 import { type SharedData } from '@/types';
 import { Plan } from '@/types/pricing';
+import { __ } from '@/utils/i18n';
 import { Head, usePage } from '@inertiajs/react';
 import {
     CheckIcon,
@@ -36,9 +38,13 @@ interface PaywallPageProps extends SharedData {
     stats: PaywallStats;
 }
 
-function formatCurrency(amount: number, currencyCode: string): string {
+function formatCurrency(
+    amount: number,
+    currencyCode: string,
+    locale: string,
+): string {
     const absAmount = Math.abs(amount) / 100;
-    return new Intl.NumberFormat('en-US', {
+    return new Intl.NumberFormat(locale, {
         style: 'currency',
         currency: currencyCode,
         minimumFractionDigits: 0,
@@ -46,38 +52,41 @@ function formatCurrency(amount: number, currencyCode: string): string {
     }).format(absAmount);
 }
 
-function getEquivalentBillingLabel(billingPeriod: string | null): string {
+function getEquivalentBillingLabel(
+    billingPeriod: string | null,
+    t: typeof __,
+): string {
     if (!billingPeriod) {
-        return 'one-time';
+        return t('one-time');
     }
 
     if (billingPeriod === 'year') {
-        return '/month';
+        return t('/month');
     }
 
-    return `/${billingPeriod}`;
+    return t('/month');
 }
 
 const socialProofs = [
     {
         icon: TrendingUpIcon,
-        highlight: '15% more savings',
-        text: 'after 3 months with Whisper Money',
+        highlightKey: '15% more savings',
+        textKey: 'after 3 months with Whisper Money',
     },
     {
         icon: PiggyBankIcon,
-        highlight: '23% better',
-        text: 'spending awareness reported',
+        highlightKey: '23% better',
+        textKey: 'spending awareness reported',
     },
     {
         icon: LockIcon,
-        highlight: '100% private',
-        text: '- we never sell your data',
+        highlightKey: '100% private',
+        textKey: '- we never sell your data',
     },
     {
         icon: UsersIcon,
-        highlight: '1,200+ users',
-        text: 'taking control of their finances',
+        highlightKey: '1,200+ users',
+        textKey: 'taking control of their finances',
     },
 ];
 
@@ -109,10 +118,10 @@ function SocialProofSlider() {
                     className="animate-in text-lg text-balance duration-500 fade-in slide-in-from-right-4"
                 >
                     <span className="font-semibold text-emerald-600 dark:text-emerald-400">
-                        {currentProof.highlight}
+                        {__(currentProof.highlightKey)}
                     </span>{' '}
                     <span className="text-muted-foreground">
-                        {currentProof.text}
+                        {__(currentProof.textKey)}
                     </span>
                 </p>
             </div>
@@ -163,6 +172,7 @@ function BalanceDisplay({
 }: {
     balancesByCurrency: Record<string, number>;
 }) {
+    const locale = useLocale();
     const entries = Object.entries(balancesByCurrency);
 
     if (entries.length === 0) {
@@ -175,11 +185,13 @@ function BalanceDisplay({
             <div className="flex flex-col items-center">
                 {entries.map(([currency, amount]) => (
                     <span key={currency} className="text-xl font-bold">
-                        {formatCurrency(amount, currency)}
+                        {formatCurrency(amount, currency, locale)}
                     </span>
                 ))}
             </div>
-            <span className="text-xs text-muted-foreground">Balance</span>
+            <span className="text-xs text-muted-foreground">
+                {__('Balance')}
+            </span>
         </div>
     );
 }
@@ -201,7 +213,7 @@ function FinancialSnapshot({ stats }: { stats: PaywallStats }) {
                     <StatItem
                         icon={PiggyBankIcon}
                         value={stats.accountsCount}
-                        label="Accounts"
+                        label={__('Accounts')}
                         delay={100}
                     />
                 )}
@@ -209,7 +221,7 @@ function FinancialSnapshot({ stats }: { stats: PaywallStats }) {
                     <StatItem
                         icon={ReceiptIcon}
                         value={stats.transactionsCount}
-                        label="Transactions"
+                        label={__('Transactions')}
                         delay={200}
                     />
                 )}
@@ -217,7 +229,7 @@ function FinancialSnapshot({ stats }: { stats: PaywallStats }) {
                     <StatItem
                         icon={FolderIcon}
                         value={stats.categoriesCount}
-                        label="Categories"
+                        label={__('Categories')}
                         delay={300}
                     />
                 )}
@@ -262,23 +274,25 @@ function CompactPlanCard({
         >
             <div className="flex items-center gap-2">
                 <span className="text-xs font-medium tracking-wide text-muted-foreground uppercase">
-                    {plan.billing_period === 'year' ? 'Annual' : 'Monthly'}
+                    {plan.billing_period === 'year'
+                        ? __('Annual')
+                        : __('Monthly')}
                 </span>
                 {savingsPercent && savingsPercent > 0 && (
                     <span className="text-xs font-medium text-emerald-600 dark:text-emerald-400">
-                        Save {savingsPercent}%
+                        {__('Saving')} {savingsPercent}%
                     </span>
                 )}
             </div>
             <div className="mt-1 flex items-baseline gap-1">
                 <span className="text-xl font-bold">${monthlyEquivalent}</span>
                 <span className="text-sm text-muted-foreground">
-                    {getEquivalentBillingLabel(plan.billing_period)}
+                    {getEquivalentBillingLabel(plan.billing_period, __)}
                 </span>
             </div>
             {plan.billing_period === 'year' && (
                 <span className="mt-2 text-xs text-muted-foreground">
-                    Billed annually at ${plan.price}
+                    {__('Billed annually at')} ${plan.price}
                 </span>
             )}
         </button>
@@ -315,7 +329,7 @@ function PricingSection({
                     className="w-full bg-emerald-600 py-6 hover:bg-emerald-700 dark:bg-emerald-600 dark:hover:bg-emerald-700"
                     size="lg"
                 >
-                    Start My Financial Journey
+                    {__('Start My Financial Journey')}
                 </Button>
             </a>
 
@@ -325,7 +339,7 @@ function PricingSection({
                         <li key={feature} className="flex items-center gap-1.5">
                             <CheckIcon className="size-3 shrink-0 text-emerald-500" />
                             <span className="text-xs text-muted-foreground">
-                                {feature}
+                                {__(feature)}
                             </span>
                         </li>
                     ))}
@@ -338,7 +352,7 @@ function PricingSection({
 function PromoSection() {
     return (
         <p className="flex items-center justify-center gap-2 text-center text-xs text-muted-foreground">
-            <span>Your data is ready</span>
+            <span>{__('Your data is ready')}</span>
             <span>•</span>
             <TooltipProvider>
                 <Tooltip>
@@ -349,11 +363,11 @@ function PromoSection() {
                             rel="noopener noreferrer"
                             className="font-medium text-[#5865F2] underline-offset-2 hover:underline"
                         >
-                            Discord for 80% off
+                            {__('Discord for 80% off')}
                         </a>
                     </TooltipTrigger>
                     <TooltipContent>
-                        You'll receive an exclusive promo code via DM!
+                        {__("You'll receive an exclusive promo code via DM!")}
                     </TooltipContent>
                 </Tooltip>
             </TooltipProvider>
@@ -371,7 +385,7 @@ export default function Paywall() {
 
     return (
         <>
-            <Head title="Start Your Financial Journey" />
+            <Head title={__('Start Your Financial Journey')} />
 
             <div className="flex min-h-screen flex-col items-center justify-center bg-background px-4 py-8">
                 <div className="flex w-full max-w-md flex-col gap-6">
diff --git a/resources/js/pages/subscription/success.tsx b/resources/js/pages/subscription/success.tsx
index 80e4b1e9..09610ca5 100644
--- a/resources/js/pages/subscription/success.tsx
+++ b/resources/js/pages/subscription/success.tsx
@@ -2,6 +2,7 @@ import { Button } from '@/components/ui/button';
 import { Spinner } from '@/components/ui/spinner';
 import AuthLayout from '@/layouts/auth-layout';
 import { dashboard } from '@/routes';
+import { __ } from '@/utils/i18n';
 import { Head, Link } from '@inertiajs/react';
 import { useState } from 'react';
 
@@ -15,20 +16,23 @@ export default function Success() {
 
     return (
         <AuthLayout
-            title={loading ? 'Creating subscripiton...' : 'Welcome to Pro!'}
+            title={
+                loading ? __('Creating subscription...') : __('Welcome to Pro!')
+            }
             description={
                 loading
-                    ? 'We are proccessing your payment...'
-                    : 'Your subscription is now active'
+                    ? __('We are processing your payment...')
+                    : __('Your subscription is now active')
             }
         >
-            <Head title="Welcome to Pro!" />
+            <Head title={__('Welcome to Pro!')} />
 
             <div className="flex flex-col items-center gap-6">
                 {!loading && (
                     <p className="text-center text-muted-foreground">
-                        You now have full access to all Whisper Money features.
-                        Thank you for supporting us!
+                        {__(
+                            'You now have full access to all Whisper Money features. Thank you for supporting us!',
+                        )}
                     </p>
                 )}
 
@@ -36,10 +40,11 @@ export default function Success() {
                     <Button size="lg" disabled={loading} className="w-full">
                         {loading ? (
                             <>
-                                <Spinner /> Setting things up...
+                                <Spinner />
+                                {__('Setting things up...')}
                             </>
                         ) : (
-                            'Go to Dashboard'
+                            __('Go to Dashboard')
                         )}
                     </Button>
                 </Link>
diff --git a/resources/js/pages/terms.tsx b/resources/js/pages/terms.tsx
index f2816679..d5a9a198 100644
--- a/resources/js/pages/terms.tsx
+++ b/resources/js/pages/terms.tsx
@@ -1,4 +1,5 @@
 import { type SharedData } from '@/types';
+import { __ } from '@/utils/i18n';
 import { Head, Link, usePage } from '@inertiajs/react';
 
 export default function Terms() {
@@ -6,22 +7,29 @@ export default function Terms() {
 
     return (
         <>
-            <Head title="Terms of Service - Whisper Money">
+            <Head title={__('Terms of Service - Whisper Money')}>
                 <meta
                     name="description"
-                    content="Terms of service for Whisper Money. Review the rules and regulations for using our secure personal finance platform."
+                    content={__(
+                        'Terms of service for Whisper Money. Review the rules and regulations for using our secure personal finance platform.',
+                    )}
                 />
+
                 <link rel="canonical" href={`${appUrl}/terms`} />
-                <meta name="robots" content="index, follow" />
+                <meta name="robots" content={__('index, follow')} />
 
                 <meta
                     property="og:title"
-                    content="Terms of Service - Whisper Money"
+                    content={__('Terms of Service - Whisper Money')}
                 />
+
                 <meta
                     property="og:description"
-                    content="Terms of service for Whisper Money. Review the rules and regulations for using our platform."
+                    content={__(
+                        'Terms of service for Whisper Money. Review the rules and regulations for using our platform.',
+                    )}
                 />
+
                 <meta property="og:type" content="website" />
                 <meta property="og:url" content={`${appUrl}/terms`} />
             </Head>
@@ -31,16 +39,17 @@ export default function Terms() {
                         href="/"
                         className="mb-8 inline-block text-sm text-[#706f6c] hover:text-[#1b1b18] dark:text-[#A1A09A] dark:hover:text-[#EDEDEC]"
                     >
-                        ← Back to home
+                        {__('\u2190 Back to home')}
                     </Link>
 
                     <h1 className="mb-8 text-4xl font-semibold">
-                        Terms of Service
+                        {__('Terms of Service')}
                     </h1>
 
                     <div className="prose prose-neutral dark:prose-invert max-w-none">
                         <p className="text-lg text-[#706f6c] dark:text-[#A1A09A]">
-                            Last updated: {new Date().toLocaleDateString()}
+                            {__('Last updated:')}
+                            {new Date().toLocaleDateString()}
                         </p>
 
                         <section className="mt-8">
@@ -48,84 +57,88 @@ export default function Terms() {
                                 1. Service Provider
                             </h2>
                             <p className="mb-4 text-[#706f6c] dark:text-[#A1A09A]">
-                                These Terms of Service govern your use of the
-                                Whisper Money personal finance platform.
+                                {__(
+                                    'These Terms of Service govern your use of the\n                                Whisper Money personal finance platform.',
+                                )}
                             </p>
                             <div className="mb-4 text-[#706f6c] dark:text-[#A1A09A]">
                                 <p>
-                                    <strong>Company Name:</strong> Whisper Money
+                                    <strong>{__('Company Name:')}</strong>{' '}
+                                    Whisper Money
                                 </p>
                                 <p>
-                                    <strong>Address:</strong> Calle Oca, Madrid
-                                    - 28025, Spain
+                                    <strong>{__('Address:')}</strong> Calle Oca,
+                                    Madrid - 28025, Spain
                                 </p>
                                 <p>
-                                    <strong>Email:</strong> victor@whisper.money
+                                    <strong>{__('Email:')}</strong>
+                                    {__('victor@whisper.money')}
                                 </p>
                             </div>
                         </section>
 
                         <section className="mt-8">
                             <h2 className="mb-4 text-2xl font-semibold">
-                                2. Acceptance of Terms
+                                {__('2. Acceptance of Terms')}
                             </h2>
                             <p className="mb-4 text-[#706f6c] dark:text-[#A1A09A]">
-                                By creating an account or using Whisper Money,
-                                you agree to be bound by these Terms of Service
-                                and our Privacy Policy. If you do not agree to
-                                these terms, you may not use our service. These
-                                terms constitute a legally binding agreement
-                                between you and Whisper Money.
+                                {__(
+                                    'By creating an account or using Whisper Money,\n                                you agree to be bound by these Terms of Service\n                                and our Privacy Policy. If you do not agree to\n                                these terms, you may not use our service. These\n                                terms constitute a legally binding agreement\n                                between you and Whisper Money.',
+                                )}
                             </p>
                             <p className="mb-4 text-[#706f6c] dark:text-[#A1A09A]">
-                                You must be at least 16 years old to use this
-                                service. By using Whisper Money, you represent
-                                and warrant that you meet this age requirement.
+                                {__(
+                                    'You must be at least 16 years old to use this\n                                service. By using Whisper Money, you represent\n                                and warrant that you meet this age requirement.',
+                                )}
                             </p>
                         </section>
 
                         <section className="mt-8">
                             <h2 className="mb-4 text-2xl font-semibold">
-                                3. Service Description
+                                {__('3. Service Description')}
                             </h2>
                             <p className="mb-4 text-[#706f6c] dark:text-[#A1A09A]">
-                                Whisper Money is a personal finance tracking
-                                application that allows you to:
+                                {__(
+                                    'Whisper Money is a personal finance tracking\n                                application that allows you to:',
+                                )}
                             </p>
                             <ul className="mb-4 list-disc pl-6 text-[#706f6c] dark:text-[#A1A09A]">
                                 <li>
-                                    Manually record and track your financial
-                                    transactions, budgets, and expenses
+                                    {__(
+                                        'Manually record and track your financial\n                                    transactions, budgets, and expenses',
+                                    )}
                                 </li>
                                 <li>
-                                    Organize financial data with categories and
-                                    custom labels
+                                    {__(
+                                        'Organize financial data with categories and\n                                    custom labels',
+                                    )}
                                 </li>
                                 <li>
-                                    Sync your encrypted financial data across
-                                    multiple devices via cloud storage
+                                    {__(
+                                        'Sync your encrypted financial data across\n                                    multiple devices via cloud storage',
+                                    )}
                                 </li>
                                 <li>
-                                    Access your data with end-to-end encryption
-                                    to ensure privacy and security
+                                    {__(
+                                        'Access your data with end-to-end encryption\n                                    to ensure privacy and security',
+                                    )}
                                 </li>
                             </ul>
                             <p className="mb-4 text-[#706f6c] dark:text-[#A1A09A]">
-                                We reserve the right to modify, suspend, or
-                                discontinue any part of the service at any time,
-                                with or without notice. We will not be liable to
-                                you or any third party for any modification,
-                                suspension, or discontinuation of the service.
+                                {__(
+                                    'We reserve the right to modify, suspend, or\n                                discontinue any part of the service at any time,\n                                with or without notice. We will not be liable to\n                                you or any third party for any modification,\n                                suspension, or discontinuation of the service.',
+                                )}
                             </p>
                         </section>
 
                         <section className="mt-8">
                             <h2 className="mb-4 text-2xl font-semibold">
-                                4. User Accounts and Responsibilities
+                                {__('4. User Accounts and Responsibilities')}
                             </h2>
                             <p className="mb-4 text-[#706f6c] dark:text-[#A1A09A]">
-                                When you create an account with Whisper Money,
-                                you agree to:
+                                {__(
+                                    'When you create an account with Whisper Money,\n                                you agree to:',
+                                )}
                             </p>
                             <ul className="mb-4 list-disc pl-6 text-[#706f6c] dark:text-[#A1A09A]">
                                 <li>
@@ -133,45 +146,46 @@ export default function Terms() {
                                     information during registration
                                 </li>
                                 <li>
-                                    Maintain and promptly update your account
-                                    information
+                                    {__(
+                                        'Maintain and promptly update your account\n                                    information',
+                                    )}
                                 </li>
                                 <li>
                                     Maintain the security and confidentiality of
                                     your account credentials
                                 </li>
                                 <li>
-                                    Accept responsibility for all activities
-                                    that occur under your account
+                                    {__(
+                                        'Accept responsibility for all activities\n                                    that occur under your account',
+                                    )}
                                 </li>
                                 <li>
-                                    Notify us immediately of any unauthorized
-                                    access or security breach
+                                    {__(
+                                        'Notify us immediately of any unauthorized\n                                    access or security breach',
+                                    )}
                                 </li>
                                 <li>
-                                    Use the service only for lawful purposes and
-                                    in compliance with all applicable laws
+                                    {__(
+                                        'Use the service only for lawful purposes and\n                                    in compliance with all applicable laws',
+                                    )}
                                 </li>
                             </ul>
                             <p className="mb-4 text-[#706f6c] dark:text-[#A1A09A]">
-                                You may not use the service to engage in any
-                                illegal activity, transmit malicious code,
-                                attempt to gain unauthorized access to our
-                                systems, or interfere with the proper
-                                functioning of the service.
+                                {__(
+                                    'You may not use the service to engage in any\n                                illegal activity, transmit malicious code,\n                                attempt to gain unauthorized access to our\n                                systems, or interfere with the proper\n                                functioning of the service.',
+                                )}
                             </p>
                         </section>
 
                         <section className="mt-8">
                             <h2 className="mb-4 text-2xl font-semibold">
-                                5. Data Ownership and License
+                                {__('5. Data Ownership and License')}
                             </h2>
                             <p className="mb-4 text-[#706f6c] dark:text-[#A1A09A]">
-                                <strong>Your Data:</strong> You retain all
-                                ownership rights to the financial data and
-                                information you enter into Whisper Money. We do
-                                not claim any ownership over your personal
-                                financial information.
+                                <strong>{__('Your Data:')}</strong>
+                                {__(
+                                    'You retain all\n                                ownership rights to the financial data and\n                                information you enter into Whisper Money. We do\n                                not claim any ownership over your personal\n                                financial information.',
+                                )}
                             </p>
                             <p className="mb-4 text-[#706f6c] dark:text-[#A1A09A]">
                                 By using our service, you grant us a limited
@@ -181,38 +195,31 @@ export default function Terms() {
                                 delete your data or close your account.
                             </p>
                             <p className="mb-4 text-[#706f6c] dark:text-[#A1A09A]">
-                                You are responsible for maintaining backups of
-                                your data. While we implement reasonable backup
-                                procedures, we recommend you export and save
-                                copies of important data regularly.
+                                {__(
+                                    'You are responsible for maintaining backups of\n                                your data. While we implement reasonable backup\n                                procedures, we recommend you export and save\n                                copies of important data regularly.',
+                                )}
                             </p>
                         </section>
 
                         <section className="mt-8">
                             <h2 className="mb-4 text-2xl font-semibold">
-                                6. Intellectual Property Rights
+                                {__('6. Intellectual Property Rights')}
                             </h2>
                             <p className="mb-4 text-[#706f6c] dark:text-[#A1A09A]">
-                                The Whisper Money platform, including its
-                                software, design, text, graphics, logos, and
-                                other content (excluding your personal data), is
-                                owned by Whisper Money and protected by
-                                copyright, trademark, and other intellectual
-                                property laws. You may not copy, modify,
-                                distribute, sell, or lease any part of our
-                                service or software without our explicit written
-                                permission.
+                                {__(
+                                    'The Whisper Money platform, including its\n                                software, design, text, graphics, logos, and\n                                other content (excluding your personal data), is\n                                owned by Whisper Money and protected by\n                                copyright, trademark, and other intellectual\n                                property laws. You may not copy, modify,\n                                distribute, sell, or lease any part of our\n                                service or software without our explicit written\n                                permission.',
+                                )}
                             </p>
                             <p className="mb-4 text-[#706f6c] dark:text-[#A1A09A]">
-                                The Whisper Money name and logo are trademarks
-                                of Whisper Money. You may not use these
-                                trademarks without our prior written consent.
+                                {__(
+                                    'The Whisper Money name and logo are trademarks\n                                of Whisper Money. You may not use these\n                                trademarks without our prior written consent.',
+                                )}
                             </p>
                         </section>
 
                         <section className="mt-8">
                             <h2 className="mb-4 text-2xl font-semibold">
-                                7. Payment Terms
+                                {__('7. Payment Terms')}
                             </h2>
                             <p className="mb-4 text-[#706f6c] dark:text-[#A1A09A]">
                                 If you subscribe to a paid plan or purchase
@@ -220,50 +227,51 @@ export default function Terms() {
                             </p>
                             <ul className="mb-4 list-disc pl-6 text-[#706f6c] dark:text-[#A1A09A]">
                                 <li>
-                                    You agree to pay all applicable fees as
-                                    described at the time of purchase
+                                    {__(
+                                        'You agree to pay all applicable fees as\n                                    described at the time of purchase',
+                                    )}
                                 </li>
                                 <li>
-                                    Payments are processed by third-party
-                                    payment processors and subject to their
-                                    terms
+                                    {__(
+                                        'Payments are processed by third-party\n                                    payment processors and subject to their\n                                    terms',
+                                    )}
                                 </li>
                                 <li>
-                                    Subscription fees are billed in advance on a
-                                    recurring basis until cancelled
+                                    {__(
+                                        'Subscription fees are billed in advance on a\n                                    recurring basis until cancelled',
+                                    )}
                                 </li>
                                 <li>
-                                    All fees are non-refundable except as
-                                    required by law or explicitly stated
-                                    otherwise
+                                    {__(
+                                        'All fees are non-refundable except as\n                                    required by law or explicitly stated\n                                    otherwise',
+                                    )}
                                 </li>
                                 <li>
-                                    We reserve the right to change our pricing
-                                    with 30 days advance notice to subscribers
+                                    {__(
+                                        'We reserve the right to change our pricing\n                                    with 30 days advance notice to subscribers',
+                                    )}
                                 </li>
                                 <li>
-                                    You are responsible for all taxes associated
-                                    with your purchase
+                                    {__(
+                                        'You are responsible for all taxes associated\n                                    with your purchase',
+                                    )}
                                 </li>
                             </ul>
                             <p className="mb-4 text-[#706f6c] dark:text-[#A1A09A]">
-                                You may cancel your subscription at any time.
-                                Upon cancellation, you will retain access until
-                                the end of your current billing period, after
-                                which your subscription will not renew.
+                                {__(
+                                    'You may cancel your subscription at any time.\n                                Upon cancellation, you will retain access until\n                                the end of your current billing period, after\n                                which your subscription will not renew.',
+                                )}
                             </p>
                         </section>
 
                         <section className="mt-8">
                             <h2 className="mb-4 text-2xl font-semibold">
-                                8. Termination
+                                {__('8. Termination')}
                             </h2>
                             <p className="mb-4 text-[#706f6c] dark:text-[#A1A09A]">
-                                You may terminate your account at any time by
-                                deleting your account through the application
-                                settings or by contacting us. Upon termination,
-                                your right to use the service will immediately
-                                cease.
+                                {__(
+                                    'You may terminate your account at any time by\n                                deleting your account through the application\n                                settings or by contacting us. Upon termination,\n                                your right to use the service will immediately\n                                cease.',
+                                )}
                             </p>
                             <p className="mb-4 text-[#706f6c] dark:text-[#A1A09A]">
                                 We may suspend or terminate your account if you
@@ -275,18 +283,20 @@ export default function Terms() {
                                 serious violations or legal requirements.
                             </p>
                             <p className="mb-4 text-[#706f6c] dark:text-[#A1A09A]">
-                                Upon termination, we will delete your personal
-                                data in accordance with our Privacy Policy and
-                                applicable law, typically within 30 days.
+                                {__(
+                                    'Upon termination, we will delete your personal\n                                data in accordance with our Privacy Policy and\n                                applicable law, typically within 30 days.',
+                                )}
                             </p>
                         </section>
 
                         <section className="mt-8">
                             <h2 className="mb-4 text-2xl font-semibold">
-                                9. Disclaimers and Warranties
+                                {__('9. Disclaimers and Warranties')}
                             </h2>
                             <p className="mb-4 text-[#706f6c] dark:text-[#A1A09A]">
-                                <strong>Financial Advice Disclaimer:</strong>{' '}
+                                <strong>
+                                    {__('Financial Advice Disclaimer:')}
+                                </strong>{' '}
                                 Whisper Money is a tool for tracking and
                                 organizing your financial information. It does
                                 not provide financial, investment, tax, or legal
@@ -296,17 +306,17 @@ export default function Terms() {
                                 based on data in the application.
                             </p>
                             <p className="mb-4 text-[#706f6c] dark:text-[#A1A09A]">
-                                <strong>Service Availability:</strong> The
-                                service is provided "as is" and "as available"
-                                without warranties of any kind. We do not
-                                guarantee that the service will be
+                                <strong>{__('Service Availability:')}</strong>{' '}
+                                The service is provided "as is" and "as
+                                available" without warranties of any kind. We do
+                                not guarantee that the service will be
                                 uninterrupted, error-free, or completely secure.
                                 We strive to maintain high availability but do
                                 not warrant that the service will meet your
                                 specific requirements.
                             </p>
                             <p className="mb-4 text-[#706f6c] dark:text-[#A1A09A]">
-                                <strong>Data Accuracy:</strong> You are
+                                <strong>{__('Data Accuracy:')}</strong> You are
                                 responsible for the accuracy of the data you
                                 enter. We do not verify or guarantee the
                                 accuracy of your financial information. Any
@@ -317,7 +327,7 @@ export default function Terms() {
 
                         <section className="mt-8">
                             <h2 className="mb-4 text-2xl font-semibold">
-                                10. Limitation of Liability
+                                {__('10. Limitation of Liability')}
                             </h2>
                             <p className="mb-4 text-[#706f6c] dark:text-[#A1A09A]">
                                 To the maximum extent permitted by applicable
@@ -330,27 +340,34 @@ export default function Terms() {
                             </p>
                             <ul className="mb-4 list-disc pl-6 text-[#706f6c] dark:text-[#A1A09A]">
                                 <li>
-                                    Your use or inability to use the service
+                                    {__(
+                                        'Your use or inability to use the service',
+                                    )}
                                 </li>
                                 <li>
-                                    Any unauthorized access to or use of our
-                                    servers and/or personal information
+                                    {__(
+                                        'Any unauthorized access to or use of our\n                                    servers and/or personal information',
+                                    )}
                                 </li>
                                 <li>
-                                    Any interruption or cessation of
-                                    transmission to or from the service
+                                    {__(
+                                        'Any interruption or cessation of\n                                    transmission to or from the service',
+                                    )}
                                 </li>
                                 <li>
-                                    Any bugs, viruses, or similar harmful
-                                    components transmitted through the service
+                                    {__(
+                                        'Any bugs, viruses, or similar harmful\n                                    components transmitted through the service',
+                                    )}
                                 </li>
                                 <li>
-                                    Any errors or omissions in content or any
-                                    loss or damage incurred from using content
+                                    {__(
+                                        'Any errors or omissions in content or any\n                                    loss or damage incurred from using content',
+                                    )}
                                 </li>
                                 <li>
-                                    Financial decisions made based on data in
-                                    the application
+                                    {__(
+                                        'Financial decisions made based on data in\n                                    the application',
+                                    )}
                                 </li>
                             </ul>
                             <p className="mb-4 text-[#706f6c] dark:text-[#A1A09A]">
@@ -361,32 +378,26 @@ export default function Terms() {
                                 greater.
                             </p>
                             <p className="mb-4 text-[#706f6c] dark:text-[#A1A09A]">
-                                Nothing in these Terms excludes or limits our
-                                liability for death or personal injury caused by
-                                negligence, fraud, or any liability that cannot
-                                be excluded or limited under applicable law.
+                                {__(
+                                    'Nothing in these Terms excludes or limits our\n                                liability for death or personal injury caused by\n                                negligence, fraud, or any liability that cannot\n                                be excluded or limited under applicable law.',
+                                )}
                             </p>
                         </section>
 
                         <section className="mt-8">
                             <h2 className="mb-4 text-2xl font-semibold">
-                                11. Indemnification
+                                {__('11. Indemnification')}
                             </h2>
                             <p className="mb-4 text-[#706f6c] dark:text-[#A1A09A]">
-                                You agree to indemnify, defend, and hold
-                                harmless Whisper Money and its officers,
-                                directors, employees, and agents from any
-                                claims, liabilities, damages, losses, and
-                                expenses, including reasonable legal fees,
-                                arising out of or related to your use of the
-                                service, violation of these Terms, or violation
-                                of any rights of another party.
+                                {__(
+                                    'You agree to indemnify, defend, and hold\n                                harmless Whisper Money and its officers,\n                                directors, employees, and agents from any\n                                claims, liabilities, damages, losses, and\n                                expenses, including reasonable legal fees,\n                                arising out of or related to your use of the\n                                service, violation of these Terms, or violation\n                                of any rights of another party.',
+                                )}
                             </p>
                         </section>
 
                         <section className="mt-8">
                             <h2 className="mb-4 text-2xl font-semibold">
-                                12. Governing Law and Dispute Resolution
+                                {__('12. Governing Law and Dispute Resolution')}
                             </h2>
                             <p className="mb-4 text-[#706f6c] dark:text-[#A1A09A]">
                                 These Terms shall be governed by and construed
@@ -404,15 +415,15 @@ export default function Terms() {
                                 your country of residence.
                             </p>
                             <p className="mb-4 text-[#706f6c] dark:text-[#A1A09A]">
-                                We encourage you to contact us directly at
-                                victor@whisper.money to resolve any disputes
-                                before initiating legal proceedings.
+                                {__(
+                                    'We encourage you to contact us directly at\n                                victor@whisper.money to resolve any disputes\n                                before initiating legal proceedings.',
+                                )}
                             </p>
                         </section>
 
                         <section className="mt-8">
                             <h2 className="mb-4 text-2xl font-semibold">
-                                13. Changes to Terms
+                                {__('13. Changes to Terms')}
                             </h2>
                             <p className="mb-4 text-[#706f6c] dark:text-[#A1A09A]">
                                 We reserve the right to modify or replace these
@@ -423,17 +434,15 @@ export default function Terms() {
                                 our website.
                             </p>
                             <p className="mb-4 text-[#706f6c] dark:text-[#A1A09A]">
-                                Your continued use of the service after the
-                                effective date of revised Terms constitutes your
-                                acceptance of the changes. If you do not agree
-                                to the new terms, you must stop using the
-                                service and may delete your account.
+                                {__(
+                                    'Your continued use of the service after the\n                                effective date of revised Terms constitutes your\n                                acceptance of the changes. If you do not agree\n                                to the new terms, you must stop using the\n                                service and may delete your account.',
+                                )}
                             </p>
                         </section>
 
                         <section className="mt-8">
                             <h2 className="mb-4 text-2xl font-semibold">
-                                14. Severability
+                                {__('14. Severability')}
                             </h2>
                             <p className="mb-4 text-[#706f6c] dark:text-[#A1A09A]">
                                 If any provision of these Terms is found to be
@@ -447,32 +456,32 @@ export default function Terms() {
 
                         <section className="mt-8">
                             <h2 className="mb-4 text-2xl font-semibold">
-                                15. Entire Agreement
+                                {__('15. Entire Agreement')}
                             </h2>
                             <p className="mb-4 text-[#706f6c] dark:text-[#A1A09A]">
-                                These Terms, together with our Privacy Policy,
-                                constitute the entire agreement between you and
-                                Whisper Money regarding the use of our service
-                                and supersede any prior agreements or
-                                understandings, whether written or oral.
+                                {__(
+                                    'These Terms, together with our Privacy Policy,\n                                constitute the entire agreement between you and\n                                Whisper Money regarding the use of our service\n                                and supersede any prior agreements or\n                                understandings, whether written or oral.',
+                                )}
                             </p>
                         </section>
 
                         <section className="mt-8">
                             <h2 className="mb-4 text-2xl font-semibold">
-                                16. Contact Us
+                                {__('16. Contact Us')}
                             </h2>
                             <p className="mb-4 text-[#706f6c] dark:text-[#A1A09A]">
-                                If you have any questions, concerns, or feedback
-                                about these Terms of Service, please contact us:
+                                {__(
+                                    'If you have any questions, concerns, or feedback\n                                about these Terms of Service, please contact us:',
+                                )}
                             </p>
                             <div className="mb-4 text-[#706f6c] dark:text-[#A1A09A]">
                                 <p>
-                                    <strong>Email:</strong> victor@whisper.money
+                                    <strong>{__('Email:')}</strong>
+                                    {__('victor@whisper.money')}
                                 </p>
                                 <p>
-                                    <strong>Address:</strong> Whisper Money,
-                                    Calle Oca, Madrid - 28025, Spain
+                                    <strong>{__('Address:')}</strong> Whisper
+                                    Money, Calle Oca, Madrid - 28025, Spain
                                 </p>
                             </div>
                         </section>
diff --git a/resources/js/pages/transactions/categorize.tsx b/resources/js/pages/transactions/categorize.tsx
index d65934fc..6f305122 100644
--- a/resources/js/pages/transactions/categorize.tsx
+++ b/resources/js/pages/transactions/categorize.tsx
@@ -15,6 +15,7 @@ import {
 import { Kbd } from '@/components/ui/kbd';
 import { Skeleton } from '@/components/ui/skeleton';
 import { useEncryptionKey } from '@/contexts/encryption-key-context';
+import { useLocale } from '@/hooks/use-locale';
 import { decrypt, importKey } from '@/lib/crypto';
 import { db } from '@/lib/dexie-db';
 import { getStoredKey } from '@/lib/key-storage';
@@ -25,6 +26,8 @@ import { type Account, type Bank } from '@/types/account';
 import { type AutomationRule } from '@/types/automation-rule';
 import { type Category, getCategoryColorClasses } from '@/types/category';
 import { type DecryptedTransaction } from '@/types/transaction';
+import { formatDateLong } from '@/utils/date';
+import { __ } from '@/utils/i18n';
 import { Head, Link, router, usePage } from '@inertiajs/react';
 import { parseISO } from 'date-fns';
 import { useLiveQuery } from 'dexie-react-hooks';
@@ -100,6 +103,7 @@ export default function CategorizeTransactions({
     const { automationRules: sharedAutomationRules } = usePage<{
         automationRules: AutomationRule[];
     }>().props;
+    const locale = useLocale();
 
     const transactionIds = useLiveQuery(
         async () => {
@@ -473,20 +477,10 @@ export default function CategorizeTransactions({
         rulesDialogOpen,
     ]);
 
-    const formatDate = (dateStr: string): string => {
-        const date = new Date(dateStr);
-        return date.toLocaleDateString('en-US', {
-            weekday: 'short',
-            year: 'numeric',
-            month: 'short',
-            day: 'numeric',
-        });
-    };
-
     if (isLoading) {
         return (
             <>
-                <Head title="Categorize Transactions" />
+                <Head title={__('Categorize Transactions')} />
                 <div className="flex min-h-screen flex-col items-center justify-center bg-white p-4 dark:bg-zinc-950">
                     <div className="w-full max-w-lg space-y-6">
                         <Skeleton className="mx-auto h-6 w-32" />
@@ -505,7 +499,7 @@ export default function CategorizeTransactions({
     if (isComplete) {
         return (
             <>
-                <Head title="All Done!" />
+                <Head title={__('All Done!')} />
                 <div className="flex min-h-screen flex-col items-center justify-center bg-white p-4 dark:bg-zinc-950">
                     <div className="animate-bounce-in flex flex-col items-center gap-6 text-center">
                         <div className="relative">
@@ -516,10 +510,12 @@ export default function CategorizeTransactions({
                         </div>
                         <div className="space-y-2">
                             <h1 className="text-3xl font-bold text-zinc-900 dark:text-zinc-100">
-                                All Done!
+                                {__('All Done!')}
                             </h1>
                             <p className="text-lg text-zinc-600 dark:text-zinc-400">
-                                You've categorized all your transactions.
+                                {__(
+                                    "You've categorized all your transactions.",
+                                )}
                             </p>
                         </div>
                         <Link
@@ -529,7 +525,7 @@ export default function CategorizeTransactions({
                         >
                             <Button size="lg" className="mt-4">
                                 <ArrowLeft className="mr-2 h-4 w-4" />
-                                Back to Transactions
+                                {__('Back to Transactions')}
                             </Button>
                         </Link>
                     </div>
@@ -541,7 +537,7 @@ export default function CategorizeTransactions({
     if (uncategorizedTransactions.length === 0) {
         return (
             <>
-                <Head title="Categorize Transactions" />
+                <Head title={__('Categorize Transactions')} />
                 <div className="flex min-h-screen flex-col items-center justify-center bg-white p-4 dark:bg-zinc-950">
                     <div className="flex flex-col items-center gap-6 text-center">
                         <div className="flex h-20 w-20 items-center justify-center rounded-full bg-emerald-100 dark:bg-emerald-900/30">
@@ -549,10 +545,12 @@ export default function CategorizeTransactions({
                         </div>
                         <div className="space-y-2">
                             <h1 className="text-2xl font-bold text-zinc-900 dark:text-zinc-100">
-                                No Uncategorized Transactions
+                                {__('No Uncategorized Transactions')}
                             </h1>
                             <p className="text-zinc-600 dark:text-zinc-400">
-                                All your transactions are already categorized.
+                                {__(
+                                    'All your transactions are already categorized.',
+                                )}
                             </p>
                         </div>
                         <Link
@@ -562,7 +560,7 @@ export default function CategorizeTransactions({
                         >
                             <Button>
                                 <ArrowLeft className="mr-2 h-4 w-4" />
-                                Back to Transactions
+                                {__('Back to Transactions')}
                             </Button>
                         </Link>
                     </div>
@@ -573,7 +571,7 @@ export default function CategorizeTransactions({
 
     return (
         <>
-            <Head title="Categorize Transactions" />
+            <Head title={__('Categorize Transactions')} />
 
             <div className="flex min-h-screen flex-col bg-white dark:bg-zinc-950">
                 <header className="flex items-center justify-between gap-6 px-4 py-3 dark:border-zinc-800">
@@ -583,7 +581,7 @@ export default function CategorizeTransactions({
                     >
                         <ArrowLeft className="h-4 w-4" />
                         <div className="hidden text-nowrap sm:block">
-                            Back to Transactions
+                            {__('Back to Transactions')}
                         </div>
                     </Link>
                     <div className="flex w-full items-center justify-end gap-6 sm:justify-center">
@@ -595,8 +593,9 @@ export default function CategorizeTransactions({
                                 className="gap-2 pr-2"
                             >
                                 <Settings2 className="h-4 w-4" />
-                                Rules
-                                <Kbd>Ctrl+R</Kbd>
+                                {__('Rules')}
+
+                                <Kbd>{__('Ctrl+R')}</Kbd>
                             </Button>
                         </div>
                         <div className="flex items-center gap-3">
@@ -611,8 +610,8 @@ export default function CategorizeTransactions({
                                 className="gap-2 pr-2 text-muted-foreground"
                             >
                                 <SkipBack className="h-4 w-4" />
-                                <span className="">Prev</span>
-                                <Kbd>Ctrl+B</Kbd>
+                                <span className="">{__('Prev')}</span>
+                                <Kbd>{__('Ctrl+B')}</Kbd>
                             </Button>
                             <Button
                                 variant="ghost"
@@ -625,8 +624,8 @@ export default function CategorizeTransactions({
                                 className="gap-2 pr-2 text-muted-foreground"
                             >
                                 <SkipForward className="h-4 w-4" />
-                                <span className="">Skip</span>
-                                <Kbd>Ctrl+N</Kbd>
+                                <span className="">{__('Skip')}</span>
+                                <Kbd>{__('Ctrl+N')}</Kbd>
                             </Button>
                         </div>
                     </div>
@@ -687,8 +686,9 @@ export default function CategorizeTransactions({
                                                 <div className="flex items-start justify-between">
                                                     <div className="flex flex-1 flex-col gap-4">
                                                         <p className="text-xs font-medium tracking-wide text-muted-foreground uppercase">
-                                                            {formatDate(
+                                                            {formatDateLong(
                                                                 currentTransaction.transaction_date,
+                                                                locale,
                                                             )}
                                                         </p>
 
@@ -781,17 +781,18 @@ export default function CategorizeTransactions({
                             >
                                 <div className="flex flex-col gap-1">
                                     <h3 className="font-medium">
-                                        Assign a new category
+                                        {__('Assign a new category')}
                                     </h3>
                                     <p className="flex items-center gap-1 text-sm text-muted-foreground">
-                                        Search, move{' '}
+                                        {__('Search, move')}{' '}
                                         <Kbd>
                                             <ArrowUp className="size-3" />
                                         </Kbd>
                                         <Kbd>
                                             <ArrowDown className="size-3" />
                                         </Kbd>
-                                        , and press <Kbd>⏎</Kbd>
+                                        {__(', and press')}
+                                        <Kbd>⏎</Kbd>
                                     </p>
                                 </div>
                                 <Command
@@ -800,14 +801,15 @@ export default function CategorizeTransactions({
                                 >
                                     <CommandInput
                                         ref={commandInputRef}
-                                        placeholder="Search categories..."
+                                        placeholder={__('Search categories...')}
                                         value={searchValue}
                                         onValueChange={setSearchValue}
                                         disabled={animationState !== 'idle'}
                                     />
+
                                     <CommandList className="max-h-64">
                                         <CommandEmpty>
-                                            No categories found.
+                                            {__('No categories found.')}
                                         </CommandEmpty>
                                         <CommandGroup>
                                             {sortedCategories.map(
diff --git a/resources/js/pages/transactions/index.tsx b/resources/js/pages/transactions/index.tsx
index 6891e634..0a234da8 100644
--- a/resources/js/pages/transactions/index.tsx
+++ b/resources/js/pages/transactions/index.tsx
@@ -1,3 +1,5 @@
+import { useLocale } from '@/hooks/use-locale';
+import { __ } from '@/utils/i18n';
 import { Head, router } from '@inertiajs/react';
 import {
     Cell,
@@ -293,18 +295,18 @@ function TransactionRowComponent({
                 </TableRow>
             </ContextMenuTrigger>
             <ContextMenuContent>
-                <ContextMenuLabel>Actions</ContextMenuLabel>
+                <ContextMenuLabel>{__('Actions')}</ContextMenuLabel>
                 <ContextMenuItem onClick={() => onEdit(transaction)}>
-                    Edit
+                    {__('Edit')}
                 </ContextMenuItem>
                 <ContextMenuItem onClick={() => onReEvaluateRules(transaction)}>
-                    Re-evaluate rules
+                    {__('Re-evaluate rules')}
                 </ContextMenuItem>
                 <ContextMenuItem
                     onClick={() => onDelete(transaction)}
                     variant="destructive"
                 >
-                    Delete
+                    {__('Delete')}
                 </ContextMenuItem>
             </ContextMenuContent>
         </ContextMenu>
@@ -364,6 +366,7 @@ export default function Transactions({
 }: Props) {
     const { isKeySet } = useEncryptionKey();
     const { sync } = useSyncContext();
+    const locale = useLocale();
 
     const [transactions, setTransactions] = useState<DecryptedTransaction[]>(
         [],
@@ -1238,6 +1241,7 @@ export default function Transactions({
                 accounts,
                 banks,
                 labels,
+                locale,
                 onEdit: setEditTransaction,
                 onDelete: setDeleteTransaction,
                 onUpdate: updateTransaction,
@@ -1248,6 +1252,7 @@ export default function Transactions({
             banks,
             categories,
             labels,
+            locale,
             updateTransaction,
             handleReEvaluateRules,
         ],
@@ -1585,12 +1590,12 @@ export default function Transactions({
 
     return (
         <AppSidebarLayout breadcrumbs={breadcrumbs}>
-            <Head title="Transactions" />
+            <Head title={__('Transactions')} />
 
             <div className="space-y-6 p-6">
                 <HeadingSmall
-                    title="Transactions"
-                    description="View and manage your transactions"
+                    title={__('Transactions')}
+                    description={__('View and manage your transactions')}
                 />
 
                 <div className="space-y-4">
@@ -1622,6 +1627,7 @@ export default function Transactions({
                                         setRefreshKey((prev) => prev + 1)
                                     }
                                 />
+
                                 <DataTableViewOptions table={table} />
                             </div>
                         }
@@ -1668,7 +1674,7 @@ export default function Transactions({
                             <DataTable
                                 table={table}
                                 columns={columns}
-                                emptyMessage="No transactions found."
+                                emptyMessage={__('No transactions found.')}
                                 renderRow={renderTransactionRow}
                                 getRowDate={(row) => row.transaction_date}
                                 renderDateHeader={(date, colSpan) => (
@@ -1679,7 +1685,7 @@ export default function Transactions({
                             <DataTablePagination
                                 displayedCount={displayedCount}
                                 total={sortedTransactions.length}
-                                rowCountLabel="transactions total"
+                                rowCountLabel={__('transactions total')}
                             >
                                 {displayedCount < sortedTransactions.length && (
                                     <Button
@@ -1690,10 +1696,10 @@ export default function Transactions({
                                         {isLoadingMore ? (
                                             <>
                                                 <Spinner />
-                                                Loading
+                                                {__('Loading')}
                                             </>
                                         ) : (
-                                            <>Load more</>
+                                            <>{__('Load more')}</>
                                         )}
                                     </Button>
                                 )}
@@ -1709,6 +1715,7 @@ export default function Transactions({
                 accounts={accounts}
                 banks={banks}
                 labels={labels}
+                automationRules={automationRules}
                 open={!!editTransaction}
                 onOpenChange={(open) => !open && setEditTransaction(null)}
                 onSuccess={updateTransaction}
@@ -1742,7 +1749,8 @@ export default function Transactions({
                 <AlertDialogContent>
                     <AlertDialogHeader>
                         <AlertDialogTitle>
-                            Delete Transaction
+                            {__('Delete Transaction')}
+
                             {isBulkDeleteMode ? 's' : ''}
                         </AlertDialogTitle>
                         <AlertDialogDescription>
@@ -1755,7 +1763,7 @@ export default function Transactions({
                         <AlertDialogCancel
                             disabled={isDeleting || isBulkDeleting}
                         >
-                            Cancel
+                            {__('Cancel')}
                         </AlertDialogCancel>
                         <AlertDialogAction
                             onClick={
diff --git a/resources/js/pages/welcome.tsx b/resources/js/pages/welcome.tsx
index b6b6dbae..2adce7ea 100644
--- a/resources/js/pages/welcome.tsx
+++ b/resources/js/pages/welcome.tsx
@@ -13,6 +13,7 @@ import { usePwaInstall } from '@/hooks/use-pwa-install';
 import { cn } from '@/lib/utils';
 import { type SharedData } from '@/types';
 import { Plan } from '@/types/pricing';
+import { __ } from '@/utils/i18n';
 import { Head, Link, router, usePage } from '@inertiajs/react';
 import {
     BellIcon,
@@ -84,12 +85,12 @@ function LandingPlanCard({
         >
             {isDefault && (
                 <div className="bg-emerald-500 p-3 text-center text-xs font-semibold text-white uppercase">
-                    Most Popular
+                    {__('Most Popular')}
                 </div>
             )}
             {isBestValue && (
                 <div className="bg-blue-50 p-3 text-center text-xs font-semibold text-blue-500 uppercase">
-                    Best Value
+                    {__('Best Value')}
                 </div>
             )}
             <div
@@ -101,7 +102,7 @@ function LandingPlanCard({
 
             <div className="relative flex flex-1 flex-col p-6">
                 <div className="flex items-center gap-3">
-                    <h3 className="text-xl font-semibold">{plan.name}</h3>
+                    <h3 className="text-xl font-semibold">{__(plan.name)}</h3>
                 </div>
 
                 <div className="mt-4 flex items-baseline gap-2">
@@ -119,14 +120,16 @@ function LandingPlanCard({
                 </div>
 
                 <p className="mt-3 text-sm text-[#706f6c] dark:text-[#A1A09A]">
-                    Everything you need to manage your finances securely.
+                    {__(
+                        'Everything you need to manage your finances securely.',
+                    )}
                 </p>
 
                 <ul className="mt-5 flex-1 space-y-2.5">
                     {plan.features.map((feature) => (
                         <li key={feature} className="flex items-center gap-2.5">
                             <CheckIcon className="size-4 shrink-0 text-emerald-500" />
-                            <span className="text-sm">{feature}</span>
+                            <span className="text-sm">{__(feature)}</span>
                         </li>
                     ))}
                 </ul>
@@ -141,7 +144,7 @@ function LandingPlanCard({
                         )}
                         variant={isDefault ? 'default' : 'outline'}
                     >
-                        Get Started
+                        {__('Get Started')}
                     </Button>
                 </Link>
             </div>
@@ -150,17 +153,44 @@ function LandingPlanCard({
 }
 
 export default function Welcome({
-    canRegister = true,
-    hideAuthButtons = false,
+    canRegister,
+    hideAuthButtons,
 }: {
     canRegister?: boolean;
     hideAuthButtons?: boolean;
 }) {
-    const { appUrl, subscriptionsEnabled, pricing } =
+    const { appUrl, subscriptionsEnabled, pricing, locale } =
         usePage<SharedData>().props;
     const planEntries = Object.entries(pricing.plans);
     const { isMobile } = usePwaInstall();
 
+    // Handle localStorage for language preference
+    useEffect(() => {
+        const urlParams = new URLSearchParams(window.location.search);
+        const langParam = urlParams.get('lang');
+
+        if (langParam && ['en', 'es'].includes(langParam)) {
+            // Store the preference in localStorage
+            localStorage.setItem('whisper_landing_locale', langParam);
+        } else {
+            // No query param - check if we have a stored preference
+            const storedLocale = localStorage.getItem('whisper_landing_locale');
+
+            if (
+                storedLocale &&
+                storedLocale !== locale &&
+                ['en', 'es'].includes(storedLocale)
+            ) {
+                // Redirect to stored preference
+                window.location.href = `/?lang=${storedLocale}`;
+                return;
+            } else if (!storedLocale && locale) {
+                // First visit - store the detected locale from session/header
+                localStorage.setItem('whisper_landing_locale', locale);
+            }
+        }
+    }, [locale]);
+
     const [isPwa] = useState(() => {
         if (typeof window === 'undefined') {
             return false;
@@ -189,56 +219,81 @@ export default function Welcome({
 
     return (
         <>
-            <Head title="Whisper Money - The Most Secure Personal Finance App">
+            <Head
+                title={__(
+                    'Whisper Money - The Most Secure Personal Finance App',
+                )}
+            >
                 <meta
                     name="description"
-                    content="The most secure personal finance app with end-to-end encryption. Track expenses, create budgets, and manage your money privately."
+                    content={__(
+                        'The most secure personal finance app with end-to-end encryption. Track expenses, create budgets, and manage your money privately.',
+                    )}
                 />
+
                 <meta
                     name="keywords"
-                    content="finance app, budgeting, expense tracking, end-to-end encryption, secure finance, personal finance, money management, privacy, encrypted finance app"
+                    content={__(
+                        'finance app, budgeting, expense tracking, end-to-end encryption, secure finance, personal finance, money management, privacy, encrypted finance app',
+                    )}
                 />
+
                 <link rel="canonical" href={appUrl} />
 
                 <meta property="og:site_name" content="Whisper Money" />
                 <meta
                     property="og:title"
-                    content="Whisper Money - The Most Secure Personal Finance App"
+                    content={__(
+                        'Whisper Money - The Most Secure Personal Finance App',
+                    )}
                 />
+
                 <meta
                     property="og:description"
-                    content="Your financial data stays private with end-to-end encryption. The most secure way to manage your personal finances."
+                    content={__(
+                        'Your financial data stays private with end-to-end encryption. The most secure way to manage your personal finances.',
+                    )}
                 />
+
                 <meta property="og:type" content="website" />
                 <meta property="og:url" content={appUrl} />
                 <meta
                     property="og:image"
                     content={`${appUrl}/images/og_whisper_money.png`}
                 />
+
                 <meta property="og:image:width" content="1200" />
                 <meta property="og:image:height" content="630" />
                 <meta
                     property="og:image:alt"
-                    content="Whisper Money - Secure Personal Finance App"
+                    content={__('Whisper Money - Secure Personal Finance App')}
                 />
-                <meta property="og:locale" content="en_US" />
 
-                <meta name="twitter:card" content="summary_large_image" />
+                <meta property="og:locale" content={__('en_US')} />
+
+                <meta name="twitter:card" content={__('summary_large_image')} />
                 <meta
                     name="twitter:title"
-                    content="Whisper Money - The Most Secure Personal Finance App"
+                    content={__(
+                        'Whisper Money - The Most Secure Personal Finance App',
+                    )}
                 />
+
                 <meta
                     name="twitter:description"
-                    content="Your financial data stays private with end-to-end encryption. The most secure way to manage your personal finances."
+                    content={__(
+                        'Your financial data stays private with end-to-end encryption. The most secure way to manage your personal finances.',
+                    )}
                 />
+
                 <meta
                     name="twitter:image"
                     content={`${appUrl}/images/og_whisper_money.png`}
                 />
+
                 <meta
                     name="twitter:image:alt"
-                    content="Whisper Money - Secure Personal Finance App"
+                    content={__('Whisper Money - Secure Personal Finance App')}
                 />
 
                 <script type="application/ld+json">
@@ -279,19 +334,18 @@ export default function Welcome({
                                 <span className="inline-flex items-center gap-2 rounded-full border border-[#e3e3e0] px-2.5 py-1 text-[0.8rem] font-medium dark:border-[#3E3E3A]">
                                     <LockIcon className="size-3.5 opacity-75" />
                                     <span className="text-[#706f6c] dark:text-[#A1A09A]">
-                                        E2E Encryption
+                                        {__('Free & Private')}
                                     </span>
                                 </span>
                                 <h1 className="font-heading max-w-[840px] bg-gradient-to-r from-[#1b1b18] to-[#1b1b18] bg-clip-text text-4xl leading-tight font-semibold text-transparent drop-shadow-2xl sm:text-5xl sm:leading-tight lg:text-6xl lg:leading-tight dark:from-[#EDEDEC] dark:to-[#A1A09A]">
-                                    The most secure way to understand your
-                                    finances
+                                    {__(
+                                        'All your money in one place. No spreadsheets. Free.',
+                                    )}
                                 </h1>
                                 <p className="mb-4 max-w-[840px] text-lg leading-8 font-medium text-[#706f6c] lg:text-xl lg:leading-8 dark:text-[#A1A09A]">
-                                    Your financial data stays private with
-                                    end-to-end encryption. Track expenses,
-                                    create budgets, and achieve your goals—all
-                                    while keeping your information completely
-                                    secure.
+                                    {__(
+                                        'Understand your finances and make better decisions without the friction. Track expenses, create budgets, and achieve your goals\u2014all in one place.',
+                                    )}
                                 </p>
                                 <div className="flex w-full max-w-lg flex-col gap-4">
                                     {isMobile ? (
@@ -303,7 +357,7 @@ export default function Welcome({
                                                 className="w-full"
                                             >
                                                 <Button className="text-shadow duration h-14 w-full cursor-pointer bg-gradient-to-t from-zinc-700 to-zinc-900 text-base text-white shadow-sm transition-all hover:from-zinc-800 hover:to-black hover:shadow-md dark:bg-[#eeeeec] dark:from-zinc-200 dark:to-zinc-300 dark:text-[#1C1C1A] dark:hover:bg-white hover:dark:from-zinc-50 dark:hover:shadow-md">
-                                                    Get Started
+                                                    {__('Get Started')}
                                                 </Button>
                                             </Link>
                                             <Link href="/login?demo=1">
@@ -312,14 +366,15 @@ export default function Welcome({
                                                     size={'lg'}
                                                     className="h-14"
                                                 >
-                                                    Check Demo
+                                                    {__('Check Demo')}
                                                 </Button>
                                             </Link>
                                         </div>
                                     )}
                                     <p className="text-xs text-[#706f6c] dark:text-[#A1A09A]">
-                                        Your data is yours alone. Sign up to get
-                                        started.
+                                        {__(
+                                            'No credit card required. Your data stays private with E2E encryption.',
+                                        )}
                                     </p>
                                 </div>
                             </div>
@@ -345,6 +400,7 @@ export default function Welcome({
                                                         alt={image.alt}
                                                         className="w-full rounded-lg dark:hidden"
                                                     />
+
                                                     <img
                                                         src={image.dark}
                                                         alt={image.alt}
@@ -371,11 +427,12 @@ export default function Welcome({
                         <div className="mx-auto flex max-w-7xl flex-col items-center gap-8 sm:gap-12">
                             <div className="flex flex-col items-center gap-4 text-center">
                                 <h2 className="max-w-[720px] text-3xl leading-tight font-semibold text-balance sm:text-5xl sm:leading-tight">
-                                    How End-to-End Encryption Works
+                                    {__('How End-to-End Encryption Works')}
                                 </h2>
                                 <p className="text-md max-w-[640px] font-medium text-[#706f6c] sm:text-xl dark:text-[#A1A09A]">
-                                    Your financial data is encrypted on your
-                                    device before it ever reaches our servers.
+                                    {__(
+                                        'Your financial data is encrypted on your\n                                    device before it ever reaches our servers.',
+                                    )}
                                 </p>
                             </div>
 
@@ -386,13 +443,14 @@ export default function Welcome({
                                         darkSrc="/images/landing_videos/Whisper Money - Dark - Encryption.mp4"
                                         className="w-full max-w-4xl"
                                     />
+
                                     <h3 className="text-xl font-semibold">
-                                        Your Private Key
+                                        {__('Your Private Key')}
                                     </h3>
                                     <p className="text-sm text-[#706f6c] dark:text-[#A1A09A]">
-                                        A unique encryption key is generated on
-                                        your device. Only you have access to
-                                        it—we never see or store it.
+                                        {__(
+                                            'A unique encryption key is generated on your device. Only you have access to it—we never see or store it.',
+                                        )}
                                     </p>
                                 </div>
 
@@ -400,15 +458,19 @@ export default function Welcome({
                                     {[
                                         {
                                             icon: LockIcon,
-                                            title: 'Client-Side Encryption',
-                                            description:
+                                            title: __('Client-Side Encryption'),
+                                            description: __(
                                                 'Your transactions, accounts, and budgets are encrypted on your device before syncing to the cloud.',
+                                            ),
                                         },
                                         {
                                             icon: ShieldCheckIcon,
-                                            title: 'Zero-Knowledge Architecture',
-                                            description:
+                                            title: __(
+                                                'Zero-Knowledge Architecture',
+                                            ),
+                                            description: __(
                                                 "We store encrypted data we can't read. Even if our servers were compromised, your data stays secure.",
+                                            ),
                                         },
                                     ].map((item) => (
                                         <div
@@ -435,11 +497,12 @@ export default function Welcome({
                         <div className="mx-auto flex max-w-7xl flex-col items-center gap-8 sm:gap-12">
                             <div className="flex flex-col items-center gap-4 text-center">
                                 <h2 className="max-w-[720px] text-3xl leading-tight font-semibold sm:text-5xl sm:leading-tight">
-                                    Privacy by Design
+                                    {__('Privacy by Design')}
                                 </h2>
                                 <p className="text-md max-w-[640px] font-medium text-[#706f6c] sm:text-xl dark:text-[#A1A09A]">
-                                    No AI. No bank connections. Your privacy is
-                                    our priority.
+                                    {__(
+                                        'No AI. No bank connections. Your privacy is\n                                    our priority.',
+                                    )}
                                 </p>
                             </div>
 
@@ -450,15 +513,13 @@ export default function Welcome({
                                             <BrainIcon className="size-6 text-red-600 dark:text-red-400" />
                                         </div>
                                         <h3 className="text-2xl font-semibold">
-                                            No AI Snooping
+                                            {__('No AI Snooping')}
                                         </h3>
                                     </div>
                                     <p className="text-[#706f6c] dark:text-[#A1A09A]">
-                                        AI can't help you with your transactions
-                                        because they're end-to-end encrypted.
-                                        This is intentional—we believe your
-                                        financial data should never be fed into
-                                        AI systems that you don't control.
+                                        {__(
+                                            "AI can't help you with your transactions\n                                        because they're end-to-end encrypted.\n                                        This is intentional\u2014we believe your\n                                        financial data should never be fed into\n                                        AI systems that you don't control.",
+                                        )}
                                     </p>
                                 </div>
 
@@ -468,15 +529,13 @@ export default function Welcome({
                                             <Building2Icon className="size-6 text-red-600 dark:text-red-400" />
                                         </div>
                                         <h3 className="text-2xl font-semibold">
-                                            No Bank Access Required
+                                            {__('No Bank Access Required')}
                                         </h3>
                                     </div>
                                     <p className="text-[#706f6c] dark:text-[#A1A09A]">
-                                        We don't need direct access to your bank
-                                        accounts. No sharing credentials, no
-                                        third-party integrations, no security
-                                        risks. You stay in complete control of
-                                        your financial data.
+                                        {__(
+                                            "We don't need direct access to your bank\n                                        accounts. No sharing credentials, no\n                                        third-party integrations, no security\n                                        risks. You stay in complete control of\n                                        your financial data.",
+                                        )}
                                     </p>
                                 </div>
                             </div>
@@ -487,11 +546,12 @@ export default function Welcome({
                         <div className="mx-auto flex max-w-7xl flex-col items-center gap-8 sm:gap-12">
                             <div className="flex flex-col items-center gap-4 text-center">
                                 <h2 className="max-w-[720px] text-3xl leading-tight font-semibold text-balance sm:text-5xl sm:leading-tight">
-                                    Import Your Transactions in Seconds
+                                    {__('Import Your Transactions in Seconds')}
                                 </h2>
                                 <p className="text-md max-w-[640px] font-medium text-[#706f6c] sm:text-xl dark:text-[#A1A09A]">
-                                    Get started quickly with your existing
-                                    financial data.
+                                    {__(
+                                        'Get started quickly with your existing\n                                    financial data.',
+                                    )}
                                 </p>
                             </div>
 
@@ -502,14 +562,12 @@ export default function Welcome({
 
                                 <div className="flex flex-col gap-6 text-center">
                                     <h3 className="text-2xl font-semibold">
-                                        Lightning-Fast CSV/XLS Import
+                                        {__('Lightning-Fast CSV/XLS Import')}
                                     </h3>
                                     <p className="text-lg text-[#706f6c] dark:text-[#A1A09A]">
-                                        Import a year's worth of transactions in
-                                        under 10 seconds. Simply export a CSV or
-                                        XLS file from your bank and drag it into
-                                        Whisper Money. All data is encrypted
-                                        locally before upload.
+                                        {__(
+                                            "Import a year's worth of transactions in\n                                        under 10 seconds. Simply export a CSV or\n                                        XLS file from your bank and drag it into\n                                        Whisper Money. All data is encrypted\n                                        locally before upload.",
+                                        )}
                                     </p>
                                 </div>
 
@@ -517,19 +575,19 @@ export default function Welcome({
                                     <div className="flex items-center gap-3 rounded-lg border border-[#e3e3e0] bg-background p-4 dark:border-[#3E3E3A]">
                                         <CheckIcon className="size-5 shrink-0 text-emerald-500" />
                                         <span className="text-sm font-medium">
-                                            Export from any bank
+                                            {__('Export from any bank')}
                                         </span>
                                     </div>
                                     <div className="flex items-center gap-3 rounded-lg border border-[#e3e3e0] bg-background p-4 dark:border-[#3E3E3A]">
                                         <CheckIcon className="size-5 shrink-0 text-emerald-500" />
                                         <span className="text-sm font-medium">
-                                            Encrypted on your device
+                                            {__('Encrypted on your device')}
                                         </span>
                                     </div>
                                     <div className="flex items-center gap-3 rounded-lg border border-[#e3e3e0] bg-background p-4 dark:border-[#3E3E3A]">
                                         <CheckIcon className="size-5 shrink-0 text-emerald-500" />
                                         <span className="text-sm font-medium">
-                                            Import in seconds
+                                            {__('Import in seconds')}
                                         </span>
                                     </div>
                                 </div>
@@ -540,7 +598,7 @@ export default function Welcome({
                     <section className="px-4 py-12 sm:py-24 md:py-32 dark:border-[#3E3E3A]">
                         <div className="mx-auto flex max-w-7xl flex-col items-center gap-6 sm:gap-20">
                             <h2 className="max-w-[560px] text-center text-3xl leading-tight font-semibold sm:text-5xl sm:leading-tight">
-                                Everything you need. Nothing you don't.
+                                {__("Everything you need. Nothing you don't.")}
                             </h2>
                             <div className="grid auto-rows-fr grid-cols-2 gap-0 sm:grid-cols-3 sm:gap-4 lg:grid-cols-4">
                                 <div className="flex flex-col gap-4 p-4 text-[#1b1b18] dark:text-[#EDEDEC]">
@@ -548,11 +606,12 @@ export default function Welcome({
                                         <div className="flex items-center self-start">
                                             <ShieldCheckIcon className="size-5 stroke-1 text-[#1b1b18] dark:text-[#EDEDEC]" />
                                         </div>
-                                        End-to-end encryption
+                                        {__('End-to-end encryption')}
                                     </h3>
                                     <div className="flex max-w-[240px] flex-col gap-2 text-sm text-balance text-[#706f6c] dark:text-[#A1A09A]">
-                                        Your financial data is encrypted on your
-                                        device. Only you can access it.
+                                        {__(
+                                            'Your financial data is encrypted on your\n                                        device. Only you can access it.',
+                                        )}
                                     </div>
                                 </div>
                                 <div className="flex flex-col gap-4 p-4 text-[#1b1b18] dark:text-[#EDEDEC]">
@@ -560,11 +619,12 @@ export default function Welcome({
                                         <div className="flex items-center self-start">
                                             <TrendingUpIcon className="size-5 stroke-1 text-[#1b1b18] dark:text-[#EDEDEC]" />
                                         </div>
-                                        Smart budgeting
+                                        {__('Smart budgeting')}
                                     </h3>
                                     <div className="flex max-w-[240px] flex-col gap-2 text-sm text-balance text-[#706f6c] dark:text-[#A1A09A]">
-                                        Create budgets that adapt to your
-                                        spending habits and goals.
+                                        {__(
+                                            'Create budgets that adapt to your\n                                        spending habits and goals.',
+                                        )}
                                     </div>
                                 </div>
                                 <div className="flex flex-col gap-4 p-4 text-[#1b1b18] dark:text-[#EDEDEC]">
@@ -572,11 +632,12 @@ export default function Welcome({
                                         <div className="flex items-center self-start">
                                             <BellIcon className="size-5 stroke-1 text-[#1b1b18] dark:text-[#EDEDEC]" />
                                         </div>
-                                        Intelligent insights
+                                        {__('Intelligent insights')}
                                     </h3>
                                     <div className="flex max-w-[240px] flex-col gap-2 text-sm text-balance text-[#706f6c] dark:text-[#A1A09A]">
-                                        Are you overspending? Know exactly where
-                                        you stand.
+                                        {__(
+                                            'Are you overspending? Know exactly where\n                                        you stand.',
+                                        )}
                                     </div>
                                 </div>
                                 <div className="flex flex-col gap-4 p-4 text-[#1b1b18] dark:text-[#EDEDEC]">
@@ -584,11 +645,12 @@ export default function Welcome({
                                         <div className="flex items-center self-start">
                                             <PieChartIcon className="size-5 stroke-1 text-[#1b1b18] dark:text-[#EDEDEC]" />
                                         </div>
-                                        Visual insights
+                                        {__('Visual insights')}
                                     </h3>
                                     <div className="flex max-w-[240px] flex-col gap-2 text-sm text-balance text-[#706f6c] dark:text-[#A1A09A]">
-                                        Understand your spending with beautiful
-                                        charts and reports.
+                                        {__(
+                                            'Understand your spending with beautiful\n                                        charts and reports.',
+                                        )}
                                     </div>
                                 </div>
                                 <div className="flex flex-col gap-4 p-4 text-[#1b1b18] dark:text-[#EDEDEC]">
@@ -596,11 +658,12 @@ export default function Welcome({
                                         <div className="flex items-center self-start">
                                             <SmartphoneIcon className="size-5 stroke-1 text-[#1b1b18] dark:text-[#EDEDEC]" />
                                         </div>
-                                        Works everywhere
+                                        {__('Works everywhere')}
                                     </h3>
                                     <div className="flex max-w-[240px] flex-col gap-2 text-sm text-balance text-[#706f6c] dark:text-[#A1A09A]">
-                                        Access your finances on any device,
-                                        anytime, anywhere.
+                                        {__(
+                                            'Access your finances on any device,\n                                        anytime, anywhere.',
+                                        )}
                                     </div>
                                 </div>
                                 <div className="flex flex-col gap-4 p-4 text-[#1b1b18] dark:text-[#EDEDEC]">
@@ -608,11 +671,12 @@ export default function Welcome({
                                         <div className="flex items-center self-start">
                                             <ZapIcon className="size-5 stroke-1 text-[#1b1b18] dark:text-[#EDEDEC]" />
                                         </div>
-                                        Lightning fast
+                                        {__('Lightning fast')}
                                     </h3>
                                     <div className="flex max-w-[240px] flex-col gap-2 text-sm text-balance text-[#706f6c] dark:text-[#A1A09A]">
-                                        Built for speed with instant sync and
-                                        smooth interactions.
+                                        {__(
+                                            'Built for speed with instant sync and\n                                        smooth interactions.',
+                                        )}
                                     </div>
                                 </div>
                                 <div className="flex flex-col gap-4 p-4 text-[#1b1b18] dark:text-[#EDEDEC]">
@@ -620,11 +684,12 @@ export default function Welcome({
                                         <div className="flex items-center self-start">
                                             <EyeOffIcon className="size-5 stroke-1 text-[#1b1b18] dark:text-[#EDEDEC]" />
                                         </div>
-                                        Zero tracking
+                                        {__('Zero tracking')}
                                     </h3>
                                     <div className="flex max-w-[240px] flex-col gap-2 text-sm text-balance text-[#706f6c] dark:text-[#A1A09A]">
-                                        We don't track, sell, or share your
-                                        data. Ever.
+                                        {__(
+                                            "We don't track, sell, or share your\n                                        data. Ever.",
+                                        )}
                                     </div>
                                 </div>
                                 <div className="flex flex-col gap-4 p-4 text-[#1b1b18] dark:text-[#EDEDEC]">
@@ -632,11 +697,12 @@ export default function Welcome({
                                         <div className="flex items-center self-start">
                                             <CodeIcon className="size-5 stroke-1 text-[#1b1b18] dark:text-[#EDEDEC]" />
                                         </div>
-                                        Open source
+                                        {__('Open source')}
                                     </h3>
                                     <div className="flex max-w-[240px] flex-col gap-2 text-sm text-balance text-[#706f6c] dark:text-[#A1A09A]">
-                                        Fully transparent and open source.
-                                        Review the code yourself.
+                                        {__(
+                                            'Fully transparent and open source.\n                                        Review the code yourself.',
+                                        )}
                                     </div>
                                 </div>
                             </div>
@@ -653,10 +719,12 @@ export default function Welcome({
                                 <div className="mx-auto flex max-w-6xl flex-col items-center gap-8 sm:gap-12">
                                     <div className="flex flex-col items-center gap-4 text-center">
                                         <p className="max-w-[600px] text-sm tracking-wider text-[#706f6c] uppercase dark:text-[#A1A09A]">
-                                            Choose the plan that works for you
+                                            {__(
+                                                'Choose the plan that works for you',
+                                            )}
                                         </p>
                                         <h2 className="text-2xl leading-tight font-semibold sm:text-4xl sm:leading-tight">
-                                            Simple, transparent pricing
+                                            {__('Simple, transparent pricing')}
                                         </h2>
                                     </div>
 
@@ -692,7 +760,9 @@ export default function Welcome({
 
                                     {pricing.promo.enabled && (
                                         <p className="text-center text-sm text-[#706f6c] dark:text-[#A1A09A]">
-                                            🎉 Get a founder discount •{' '}
+                                            {__(
+                                                '\uD83C\uDF89 Get a founder discount \u2022',
+                                            )}{' '}
                                             <TooltipProvider>
                                                 <Tooltip>
                                                     <TooltipTrigger asChild>
@@ -702,13 +772,15 @@ export default function Welcome({
                                                             rel="noopener noreferrer"
                                                             className="font-semibold text-[#5865F2] underline-offset-2 hover:underline"
                                                         >
-                                                            Join our Discord
+                                                            {__(
+                                                                'Join our Discord',
+                                                            )}
                                                         </a>
                                                     </TooltipTrigger>
                                                     <TooltipContent>
-                                                        You'll receive an
-                                                        exclusive promo code via
-                                                        DM!
+                                                        {__(
+                                                            "You'll receive an\n                                                        exclusive promo code via\n                                                        DM!",
+                                                        )}
                                                     </TooltipContent>
                                                 </Tooltip>
                                             </TooltipProvider>
@@ -722,12 +794,14 @@ export default function Welcome({
                         <div className="mx-auto flex max-w-7xl flex-col items-center gap-4 px-1 text-center sm:gap-16">
                             <div className="flex flex-col items-center gap-4 px-4 sm:gap-4">
                                 <h2 className="max-w-[720px] text-2xl leading-tight font-semibold sm:text-3xl sm:leading-tight">
-                                    Trusted by people who value their privacy
+                                    {__(
+                                        'Trusted by people who value their privacy',
+                                    )}
                                 </h2>
                                 <p className="text-md max-w-[600px] font-medium text-[#706f6c] sm:text-xl dark:text-[#A1A09A]">
-                                    Join thousands of users who have taken
-                                    control of their finances without
-                                    compromising their privacy.
+                                    {__(
+                                        'Join thousands of users who have taken\n                                    control of their finances without\n                                    compromising their privacy.',
+                                    )}
                                 </p>
                             </div>
                             <div className="relative flex w-full flex-col items-center justify-center overflow-hidden">
@@ -737,53 +811,51 @@ export default function Welcome({
                                             <div className="flex items-center gap-3">
                                                 <div className="flex flex-col items-start">
                                                     <h3 className="text-md leading-none font-semibold">
-                                                        Sarah M.
+                                                        {__('Sarah M.')}
                                                     </h3>
                                                     <p className="text-sm text-[#706f6c] dark:text-[#A1A09A]">
-                                                        @sarahm_finance
+                                                        {__('@sarahm_finance')}
                                                     </p>
                                                 </div>
                                             </div>
                                             <p className="sm:text-md mt-4 text-sm text-[#706f6c] dark:text-[#A1A09A]">
-                                                Finally, a finance app that
-                                                respects my privacy. The
-                                                encryption gives me peace of
-                                                mind.
+                                                {__(
+                                                    'Finally, a finance app that\n                                                respects my privacy. The\n                                                encryption gives me peace of\n                                                mind.',
+                                                )}
                                             </p>
                                         </div>
                                         <div className="glass-3 flex max-w-[320px] flex-col rounded-lg p-4 text-start shadow-md sm:max-w-[420px] sm:p-6">
                                             <div className="flex items-center gap-3">
                                                 <div className="flex flex-col items-start">
                                                     <h3 className="text-md leading-none font-semibold">
-                                                        Michael R.
+                                                        {__('Michael R.')}
                                                     </h3>
                                                     <p className="text-sm text-[#706f6c] dark:text-[#A1A09A]">
-                                                        @mike_tech
+                                                        {__('@mike_tech')}
                                                     </p>
                                                 </div>
                                             </div>
                                             <p className="sm:text-md mt-4 text-sm text-[#706f6c] dark:text-[#A1A09A]">
-                                                The budgeting features are
-                                                intuitive and the dark mode is
-                                                gorgeous. Best finance app I've
-                                                used.
+                                                {__(
+                                                    "The budgeting features are\n                                                intuitive and the dark mode is\n                                                gorgeous. Best finance app I've\n                                                used.",
+                                                )}
                                             </p>
                                         </div>
                                         <div className="glass-3 flex max-w-[320px] flex-col rounded-lg p-4 text-start shadow-md sm:max-w-[420px] sm:p-6">
                                             <div className="flex items-center gap-3">
                                                 <div className="flex flex-col items-start">
                                                     <h3 className="text-md leading-none font-semibold">
-                                                        Emma L.
+                                                        {__('Emma L.')}
                                                     </h3>
                                                     <p className="text-sm text-[#706f6c] dark:text-[#A1A09A]">
-                                                        @emmalou
+                                                        {__('@emmalou')}
                                                     </p>
                                                 </div>
                                             </div>
                                             <p className="sm:text-md mt-4 text-sm text-[#706f6c] dark:text-[#A1A09A]">
-                                                Love that my financial data is
-                                                encrypted. No more worrying
-                                                about data breaches!
+                                                {__(
+                                                    'Love that my financial data is\n                                                encrypted. No more worrying\n                                                about data breaches!',
+                                                )}
                                             </p>
                                         </div>
                                     </div>
@@ -792,53 +864,51 @@ export default function Welcome({
                                             <div className="flex items-center gap-3">
                                                 <div className="flex flex-col items-start">
                                                     <h3 className="text-md leading-none font-semibold">
-                                                        Sarah M.
+                                                        {__('Sarah M.')}
                                                     </h3>
                                                     <p className="text-sm text-[#706f6c] dark:text-[#A1A09A]">
-                                                        @sarahm_finance
+                                                        {__('@sarahm_finance')}
                                                     </p>
                                                 </div>
                                             </div>
                                             <p className="sm:text-md mt-4 text-sm text-[#706f6c] dark:text-[#A1A09A]">
-                                                Finally, a finance app that
-                                                respects my privacy. The
-                                                encryption gives me peace of
-                                                mind.
+                                                {__(
+                                                    'Finally, a finance app that\n                                                respects my privacy. The\n                                                encryption gives me peace of\n                                                mind.',
+                                                )}
                                             </p>
                                         </div>
                                         <div className="glass-3 flex max-w-[320px] flex-col rounded-lg p-4 text-start shadow-md sm:max-w-[420px] sm:p-6">
                                             <div className="flex items-center gap-3">
                                                 <div className="flex flex-col items-start">
                                                     <h3 className="text-md leading-none font-semibold">
-                                                        Michael R.
+                                                        {__('Michael R.')}
                                                     </h3>
                                                     <p className="text-sm text-[#706f6c] dark:text-[#A1A09A]">
-                                                        @mike_tech
+                                                        {__('@mike_tech')}
                                                     </p>
                                                 </div>
                                             </div>
                                             <p className="sm:text-md mt-4 text-sm text-[#706f6c] dark:text-[#A1A09A]">
-                                                The budgeting features are
-                                                intuitive and the dark mode is
-                                                gorgeous. Best finance app I've
-                                                used.
+                                                {__(
+                                                    "The budgeting features are\n                                                intuitive and the dark mode is\n                                                gorgeous. Best finance app I've\n                                                used.",
+                                                )}
                                             </p>
                                         </div>
                                         <div className="glass-3 flex max-w-[320px] flex-col rounded-lg p-4 text-start shadow-md sm:max-w-[420px] sm:p-6">
                                             <div className="flex items-center gap-3">
                                                 <div className="flex flex-col items-start">
                                                     <h3 className="text-md leading-none font-semibold">
-                                                        Emma L.
+                                                        {__('Emma L.')}
                                                     </h3>
                                                     <p className="text-sm text-[#706f6c] dark:text-[#A1A09A]">
-                                                        @emmalou
+                                                        {__('@emmalou')}
                                                     </p>
                                                 </div>
                                             </div>
                                             <p className="sm:text-md mt-4 text-sm text-[#706f6c] dark:text-[#A1A09A]">
-                                                Love that my financial data is
-                                                encrypted. No more worrying
-                                                about data breaches!
+                                                {__(
+                                                    'Love that my financial data is\n                                                encrypted. No more worrying\n                                                about data breaches!',
+                                                )}
                                             </p>
                                         </div>
                                     </div>
@@ -847,53 +917,51 @@ export default function Welcome({
                                             <div className="flex items-center gap-3">
                                                 <div className="flex flex-col items-start">
                                                     <h3 className="text-md leading-none font-semibold">
-                                                        Sarah M.
+                                                        {__('Sarah M.')}
                                                     </h3>
                                                     <p className="text-sm text-[#706f6c] dark:text-[#A1A09A]">
-                                                        @sarahm_finance
+                                                        {__('@sarahm_finance')}
                                                     </p>
                                                 </div>
                                             </div>
                                             <p className="sm:text-md mt-4 text-sm text-[#706f6c] dark:text-[#A1A09A]">
-                                                Finally, a finance app that
-                                                respects my privacy. The
-                                                encryption gives me peace of
-                                                mind.
+                                                {__(
+                                                    'Finally, a finance app that\n                                                respects my privacy. The\n                                                encryption gives me peace of\n                                                mind.',
+                                                )}
                                             </p>
                                         </div>
                                         <div className="glass-3 flex max-w-[320px] flex-col rounded-lg p-4 text-start shadow-md sm:max-w-[420px] sm:p-6">
                                             <div className="flex items-center gap-3">
                                                 <div className="flex flex-col items-start">
                                                     <h3 className="text-md leading-none font-semibold">
-                                                        Michael R.
+                                                        {__('Michael R.')}
                                                     </h3>
                                                     <p className="text-sm text-[#706f6c] dark:text-[#A1A09A]">
-                                                        @mike_tech
+                                                        {__('@mike_tech')}
                                                     </p>
                                                 </div>
                                             </div>
                                             <p className="sm:text-md mt-4 text-sm text-[#706f6c] dark:text-[#A1A09A]">
-                                                The budgeting features are
-                                                intuitive and the dark mode is
-                                                gorgeous. Best finance app I've
-                                                used.
+                                                {__(
+                                                    "The budgeting features are\n                                                intuitive and the dark mode is\n                                                gorgeous. Best finance app I've\n                                                used.",
+                                                )}
                                             </p>
                                         </div>
                                         <div className="glass-3 flex max-w-[320px] flex-col rounded-lg p-4 text-start shadow-md sm:max-w-[420px] sm:p-6">
                                             <div className="flex items-center gap-3">
                                                 <div className="flex flex-col items-start">
                                                     <h3 className="text-md leading-none font-semibold">
-                                                        Emma L.
+                                                        {__('Emma L.')}
                                                     </h3>
                                                     <p className="text-sm text-[#706f6c] dark:text-[#A1A09A]">
-                                                        @emmalou
+                                                        {__('@emmalou')}
                                                     </p>
                                                 </div>
                                             </div>
                                             <p className="sm:text-md mt-4 text-sm text-[#706f6c] dark:text-[#A1A09A]">
-                                                Love that my financial data is
-                                                encrypted. No more worrying
-                                                about data breaches!
+                                                {__(
+                                                    'Love that my financial data is\n                                                encrypted. No more worrying\n                                                about data breaches!',
+                                                )}
                                             </p>
                                         </div>
                                     </div>
@@ -902,53 +970,51 @@ export default function Welcome({
                                             <div className="flex items-center gap-3">
                                                 <div className="flex flex-col items-start">
                                                     <h3 className="text-md leading-none font-semibold">
-                                                        Sarah M.
+                                                        {__('Sarah M.')}
                                                     </h3>
                                                     <p className="text-sm text-[#706f6c] dark:text-[#A1A09A]">
-                                                        @sarahm_finance
+                                                        {__('@sarahm_finance')}
                                                     </p>
                                                 </div>
                                             </div>
                                             <p className="sm:text-md mt-4 text-sm text-[#706f6c] dark:text-[#A1A09A]">
-                                                Finally, a finance app that
-                                                respects my privacy. The
-                                                encryption gives me peace of
-                                                mind.
+                                                {__(
+                                                    'Finally, a finance app that\n                                                respects my privacy. The\n                                                encryption gives me peace of\n                                                mind.',
+                                                )}
                                             </p>
                                         </div>
                                         <div className="glass-3 flex max-w-[320px] flex-col rounded-lg p-4 text-start shadow-md sm:max-w-[420px] sm:p-6">
                                             <div className="flex items-center gap-3">
                                                 <div className="flex flex-col items-start">
                                                     <h3 className="text-md leading-none font-semibold">
-                                                        Michael R.
+                                                        {__('Michael R.')}
                                                     </h3>
                                                     <p className="text-sm text-[#706f6c] dark:text-[#A1A09A]">
-                                                        @mike_tech
+                                                        {__('@mike_tech')}
                                                     </p>
                                                 </div>
                                             </div>
                                             <p className="sm:text-md mt-4 text-sm text-[#706f6c] dark:text-[#A1A09A]">
-                                                The budgeting features are
-                                                intuitive and the dark mode is
-                                                gorgeous. Best finance app I've
-                                                used.
+                                                {__(
+                                                    "The budgeting features are\n                                                intuitive and the dark mode is\n                                                gorgeous. Best finance app I've\n                                                used.",
+                                                )}
                                             </p>
                                         </div>
                                         <div className="glass-3 flex max-w-[320px] flex-col rounded-lg p-4 text-start shadow-md sm:max-w-[420px] sm:p-6">
                                             <div className="flex items-center gap-3">
                                                 <div className="flex flex-col items-start">
                                                     <h3 className="text-md leading-none font-semibold">
-                                                        Emma L.
+                                                        {__('Emma L.')}
                                                     </h3>
                                                     <p className="text-sm text-[#706f6c] dark:text-[#A1A09A]">
-                                                        @emmalou
+                                                        {__('@emmalou')}
                                                     </p>
                                                 </div>
                                             </div>
                                             <p className="sm:text-md mt-4 text-sm text-[#706f6c] dark:text-[#A1A09A]">
-                                                Love that my financial data is
-                                                encrypted. No more worrying
-                                                about data breaches!
+                                                {__(
+                                                    'Love that my financial data is\n                                                encrypted. No more worrying\n                                                about data breaches!',
+                                                )}
                                             </p>
                                         </div>
                                     </div>
@@ -967,45 +1033,43 @@ export default function Welcome({
                                                 </div>
                                             </div>
                                             <p className="sm:text-md mt-4 text-sm text-[#706f6c] dark:text-[#A1A09A]">
-                                                As a developer, I appreciate the
-                                                security architecture. This is
-                                                how finance apps should be
-                                                built.
+                                                {__(
+                                                    'As a developer, I appreciate the\n                                                security architecture. This is\n                                                how finance apps should be\n                                                built.',
+                                                )}
                                             </p>
                                         </div>
                                         <div className="glass-3 flex max-w-[320px] flex-col rounded-lg p-4 text-start shadow-md sm:max-w-[420px] sm:p-6">
                                             <div className="flex items-center gap-3">
                                                 <div className="flex flex-col items-start">
                                                     <h3 className="text-md leading-none font-semibold">
-                                                        Jessica P.
+                                                        {__('Jessica P.')}
                                                     </h3>
                                                     <p className="text-sm text-[#706f6c] dark:text-[#A1A09A]">
-                                                        @jessicap
+                                                        {__('@jessicap')}
                                                     </p>
                                                 </div>
                                             </div>
                                             <p className="sm:text-md mt-4 text-sm text-[#706f6c] dark:text-[#A1A09A]">
-                                                The automation rules save me so
-                                                much time. And knowing my data
-                                                is private? Priceless.
+                                                {__(
+                                                    'The automation rules save me so\n                                                much time. And knowing my data\n                                                is private? Priceless.',
+                                                )}
                                             </p>
                                         </div>
                                         <div className="glass-3 flex max-w-[320px] flex-col rounded-lg p-4 text-start shadow-md sm:max-w-[420px] sm:p-6">
                                             <div className="flex items-center gap-3">
                                                 <div className="flex flex-col items-start">
                                                     <h3 className="text-md leading-none font-semibold">
-                                                        Alex T.
+                                                        {__('Alex T.')}
                                                     </h3>
                                                     <p className="text-sm text-[#706f6c] dark:text-[#A1A09A]">
-                                                        @alext_money
+                                                        {__('@alext_money')}
                                                     </p>
                                                 </div>
                                             </div>
                                             <p className="sm:text-md mt-4 text-sm text-[#706f6c] dark:text-[#A1A09A]">
-                                                Clean interface, powerful
-                                                features, and zero compromise on
-                                                privacy. What more could you
-                                                want?
+                                                {__(
+                                                    'Clean interface, powerful\n                                                features, and zero compromise on\n                                                privacy. What more could you\n                                                want?',
+                                                )}
                                             </p>
                                         </div>
                                     </div>
@@ -1022,45 +1086,43 @@ export default function Welcome({
                                                 </div>
                                             </div>
                                             <p className="sm:text-md mt-4 text-sm text-[#706f6c] dark:text-[#A1A09A]">
-                                                As a developer, I appreciate the
-                                                security architecture. This is
-                                                how finance apps should be
-                                                built.
+                                                {__(
+                                                    'As a developer, I appreciate the\n                                                security architecture. This is\n                                                how finance apps should be\n                                                built.',
+                                                )}
                                             </p>
                                         </div>
                                         <div className="glass-3 flex max-w-[320px] flex-col rounded-lg p-4 text-start shadow-md sm:max-w-[420px] sm:p-6">
                                             <div className="flex items-center gap-3">
                                                 <div className="flex flex-col items-start">
                                                     <h3 className="text-md leading-none font-semibold">
-                                                        Jessica P.
+                                                        {__('Jessica P.')}
                                                     </h3>
                                                     <p className="text-sm text-[#706f6c] dark:text-[#A1A09A]">
-                                                        @jessicap
+                                                        {__('@jessicap')}
                                                     </p>
                                                 </div>
                                             </div>
                                             <p className="sm:text-md mt-4 text-sm text-[#706f6c] dark:text-[#A1A09A]">
-                                                The automation rules save me so
-                                                much time. And knowing my data
-                                                is private? Priceless.
+                                                {__(
+                                                    'The automation rules save me so\n                                                much time. And knowing my data\n                                                is private? Priceless.',
+                                                )}
                                             </p>
                                         </div>
                                         <div className="glass-3 flex max-w-[320px] flex-col rounded-lg p-4 text-start shadow-md sm:max-w-[420px] sm:p-6">
                                             <div className="flex items-center gap-3">
                                                 <div className="flex flex-col items-start">
                                                     <h3 className="text-md leading-none font-semibold">
-                                                        Alex T.
+                                                        {__('Alex T.')}
                                                     </h3>
                                                     <p className="text-sm text-[#706f6c] dark:text-[#A1A09A]">
-                                                        @alext_money
+                                                        {__('@alext_money')}
                                                     </p>
                                                 </div>
                                             </div>
                                             <p className="sm:text-md mt-4 text-sm text-[#706f6c] dark:text-[#A1A09A]">
-                                                Clean interface, powerful
-                                                features, and zero compromise on
-                                                privacy. What more could you
-                                                want?
+                                                {__(
+                                                    'Clean interface, powerful\n                                                features, and zero compromise on\n                                                privacy. What more could you\n                                                want?',
+                                                )}
                                             </p>
                                         </div>
                                     </div>
@@ -1077,45 +1139,43 @@ export default function Welcome({
                                                 </div>
                                             </div>
                                             <p className="sm:text-md mt-4 text-sm text-[#706f6c] dark:text-[#A1A09A]">
-                                                As a developer, I appreciate the
-                                                security architecture. This is
-                                                how finance apps should be
-                                                built.
+                                                {__(
+                                                    'As a developer, I appreciate the\n                                                security architecture. This is\n                                                how finance apps should be\n                                                built.',
+                                                )}
                                             </p>
                                         </div>
                                         <div className="glass-3 flex max-w-[320px] flex-col rounded-lg p-4 text-start shadow-md sm:max-w-[420px] sm:p-6">
                                             <div className="flex items-center gap-3">
                                                 <div className="flex flex-col items-start">
                                                     <h3 className="text-md leading-none font-semibold">
-                                                        Jessica P.
+                                                        {__('Jessica P.')}
                                                     </h3>
                                                     <p className="text-sm text-[#706f6c] dark:text-[#A1A09A]">
-                                                        @jessicap
+                                                        {__('@jessicap')}
                                                     </p>
                                                 </div>
                                             </div>
                                             <p className="sm:text-md mt-4 text-sm text-[#706f6c] dark:text-[#A1A09A]">
-                                                The automation rules save me so
-                                                much time. And knowing my data
-                                                is private? Priceless.
+                                                {__(
+                                                    'The automation rules save me so\n                                                much time. And knowing my data\n                                                is private? Priceless.',
+                                                )}
                                             </p>
                                         </div>
                                         <div className="glass-3 flex max-w-[320px] flex-col rounded-lg p-4 text-start shadow-md sm:max-w-[420px] sm:p-6">
                                             <div className="flex items-center gap-3">
                                                 <div className="flex flex-col items-start">
                                                     <h3 className="text-md leading-none font-semibold">
-                                                        Alex T.
+                                                        {__('Alex T.')}
                                                     </h3>
                                                     <p className="text-sm text-[#706f6c] dark:text-[#A1A09A]">
-                                                        @alext_money
+                                                        {__('@alext_money')}
                                                     </p>
                                                 </div>
                                             </div>
                                             <p className="sm:text-md mt-4 text-sm text-[#706f6c] dark:text-[#A1A09A]">
-                                                Clean interface, powerful
-                                                features, and zero compromise on
-                                                privacy. What more could you
-                                                want?
+                                                {__(
+                                                    'Clean interface, powerful\n                                                features, and zero compromise on\n                                                privacy. What more could you\n                                                want?',
+                                                )}
                                             </p>
                                         </div>
                                     </div>
@@ -1132,45 +1192,43 @@ export default function Welcome({
                                                 </div>
                                             </div>
                                             <p className="sm:text-md mt-4 text-sm text-[#706f6c] dark:text-[#A1A09A]">
-                                                As a developer, I appreciate the
-                                                security architecture. This is
-                                                how finance apps should be
-                                                built.
+                                                {__(
+                                                    'As a developer, I appreciate the\n                                                security architecture. This is\n                                                how finance apps should be\n                                                built.',
+                                                )}
                                             </p>
                                         </div>
                                         <div className="glass-3 flex max-w-[320px] flex-col rounded-lg p-4 text-start shadow-md sm:max-w-[420px] sm:p-6">
                                             <div className="flex items-center gap-3">
                                                 <div className="flex flex-col items-start">
                                                     <h3 className="text-md leading-none font-semibold">
-                                                        Jessica P.
+                                                        {__('Jessica P.')}
                                                     </h3>
                                                     <p className="text-sm text-[#706f6c] dark:text-[#A1A09A]">
-                                                        @jessicap
+                                                        {__('@jessicap')}
                                                     </p>
                                                 </div>
                                             </div>
                                             <p className="sm:text-md mt-4 text-sm text-[#706f6c] dark:text-[#A1A09A]">
-                                                The automation rules save me so
-                                                much time. And knowing my data
-                                                is private? Priceless.
+                                                {__(
+                                                    'The automation rules save me so\n                                                much time. And knowing my data\n                                                is private? Priceless.',
+                                                )}
                                             </p>
                                         </div>
                                         <div className="glass-3 flex max-w-[320px] flex-col rounded-lg p-4 text-start shadow-md sm:max-w-[420px] sm:p-6">
                                             <div className="flex items-center gap-3">
                                                 <div className="flex flex-col items-start">
                                                     <h3 className="text-md leading-none font-semibold">
-                                                        Alex T.
+                                                        {__('Alex T.')}
                                                     </h3>
                                                     <p className="text-sm text-[#706f6c] dark:text-[#A1A09A]">
-                                                        @alext_money
+                                                        {__('@alext_money')}
                                                     </p>
                                                 </div>
                                             </div>
                                             <p className="sm:text-md mt-4 text-sm text-[#706f6c] dark:text-[#A1A09A]">
-                                                Clean interface, powerful
-                                                features, and zero compromise on
-                                                privacy. What more could you
-                                                want?
+                                                {__(
+                                                    'Clean interface, powerful\n                                                features, and zero compromise on\n                                                privacy. What more could you\n                                                want?',
+                                                )}
                                             </p>
                                         </div>
                                     </div>
@@ -1185,22 +1243,30 @@ export default function Welcome({
                 <footer className="py-8 dark:border-[#3E3E3A]">
                     <div className="mx-auto flex max-w-5xl flex-col items-center justify-between gap-4 px-6 text-sm text-[#706f6c] sm:flex-row lg:px-8 dark:text-[#A1A09A]">
                         <p>
-                            © {new Date().getFullYear()} Whisper Money. All
-                            rights reserved.
+                            © {new Date().getFullYear()}
+                            {__(
+                                'Whisper Money. All\n                            rights reserved.',
+                            )}
                         </p>
                         <div className="flex gap-6">
                             <Link
                                 href="/privacy"
                                 className="hover:text-[#1b1b18] dark:hover:text-[#EDEDEC]"
                             >
-                                Privacy Policy
+                                {__('Privacy Policy')}
                             </Link>
                             <Link
                                 href="/terms"
                                 className="hover:text-[#1b1b18] dark:hover:text-[#EDEDEC]"
                             >
-                                Terms of Service
+                                {__('Terms of Service')}
                             </Link>
+                            <a
+                                href={`/?lang=${locale === 'es' ? 'en' : 'es'}`}
+                                className="cursor-pointer hover:text-[#1b1b18] dark:hover:text-[#EDEDEC]"
+                            >
+                                {locale === 'es' ? 'English' : 'Español'}
+                            </a>
                         </div>
                     </div>
                 </footer>
diff --git a/resources/js/providers/menu-item-provider.tsx b/resources/js/providers/menu-item-provider.tsx
index 44f307c1..7a89689f 100644
--- a/resources/js/providers/menu-item-provider.tsx
+++ b/resources/js/providers/menu-item-provider.tsx
@@ -6,7 +6,6 @@ import { cashflow, dashboard } from '@/routes';
 import { Features, NavItem } from '@/types';
 import {
     CreditCard,
-    Github,
     LayoutGrid,
     PiggyBank,
     Receipt,
@@ -60,12 +59,6 @@ export function getMainNavItems(features: Features): NavItem[] {
 }
 
 export const footerNavItems: NavItem[] = [
-    {
-        type: 'nav-item',
-        title: 'Github',
-        href: 'https://github.com/whisper-money/whisper-money',
-        icon: Github,
-    },
     {
         type: 'nav-item',
         title: 'Community',
diff --git a/resources/js/types/account.ts b/resources/js/types/account.ts
index b78eadeb..2b17e7c6 100644
--- a/resources/js/types/account.ts
+++ b/resources/js/types/account.ts
@@ -1,3 +1,4 @@
+import { __ } from '@/utils/i18n';
 import { UUID } from './uuid';
 
 export const ACCOUNT_TYPES = [
@@ -54,13 +55,13 @@ export interface AccountBalance {
 
 export function formatAccountType(type: AccountType): string {
     const typeMap: Record<AccountType, string> = {
-        checking: 'Checking',
-        credit_card: 'Credit Card',
-        investment: 'Investment',
-        loan: 'Loan',
-        retirement: 'Retirement / Pension',
-        savings: 'Savings',
-        others: 'Others',
+        checking: __('Checking'),
+        credit_card: __('Credit Card'),
+        investment: __('Investment'),
+        loan: __('Loan'),
+        retirement: __('Retirement / Pension'),
+        savings: __('Savings'),
+        others: __('Others'),
     };
     return typeMap[type] || type;
 }
diff --git a/resources/js/types/index.d.ts b/resources/js/types/index.d.ts
index 5a5e3318..d56127ce 100644
--- a/resources/js/types/index.d.ts
+++ b/resources/js/types/index.d.ts
@@ -53,6 +53,8 @@ export interface SharedData {
     pricing: PricingConfig;
     sidebarOpen: boolean;
     features: Features;
+    locale: string;
+    translations: Record<string, string>;
     [key: string]: unknown;
 }
 
@@ -61,6 +63,7 @@ export interface User {
     name: string;
     email: string;
     currency_code: CurrencyCode;
+    locale: string | null;
     avatar?: string;
     email_verified_at: string | null;
     two_factor_enabled?: boolean;
diff --git a/resources/js/types/language.ts b/resources/js/types/language.ts
new file mode 100644
index 00000000..164b1a94
--- /dev/null
+++ b/resources/js/types/language.ts
@@ -0,0 +1,6 @@
+export const LANGUAGE_OPTIONS = [
+    { code: 'en', label: 'English' },
+    { code: 'es', label: 'Español' },
+] as const;
+
+export type LocaleCode = 'en' | 'es';
diff --git a/resources/js/utils/date.ts b/resources/js/utils/date.ts
new file mode 100644
index 00000000..e0113993
--- /dev/null
+++ b/resources/js/utils/date.ts
@@ -0,0 +1,115 @@
+import { format as dateFnsFormat } from 'date-fns';
+import { es } from 'date-fns/locale';
+
+/**
+ * Get the date-fns locale object based on locale code
+ */
+function getDateFnsLocale(locale: string) {
+    switch (locale) {
+        case 'es':
+            return es;
+        default:
+            return undefined; // Uses English by default
+    }
+}
+
+/**
+ * Format a date using the user's locale
+ */
+export function formatDate(
+    date: Date | string | number,
+    formatStr: string,
+    locale: string = 'en-US',
+): string {
+    const dateObj =
+        typeof date === 'string' || typeof date === 'number'
+            ? new Date(date)
+            : date;
+
+    const dateFnsLocale = getDateFnsLocale(locale);
+
+    return dateFnsFormat(dateObj, formatStr, {
+        locale: dateFnsLocale,
+    });
+}
+
+/**
+ * Format a month from YYYY-MM string
+ * Shows abbreviated month for current year, or "MMM 'YY" for other years
+ */
+export function formatMonthFromYearMonth(
+    yearMonth: string,
+    locale: string = 'en-US',
+): string {
+    const [year, month] = yearMonth.split('-');
+    const date = new Date(parseInt(year), parseInt(month) - 1);
+    const isCurrentYear = date.getFullYear() === new Date().getFullYear();
+
+    const formatStr = isCurrentYear ? 'MMM' : "MMM ''yy";
+
+    return formatDate(date, formatStr, locale);
+}
+
+/**
+ * Format a date to show month and year (e.g., "January 2026" or "Enero 2026")
+ * Capitalizes the first letter
+ */
+export function formatMonthYear(date: Date, locale: string = 'en-US'): string {
+    const formatted = formatDate(date, 'MMMM yyyy', locale);
+
+    // Capitalize first letter (important for Spanish months)
+    return formatted.charAt(0).toUpperCase() + formatted.slice(1);
+}
+
+/**
+ * Format a compact number (for charts, etc.)
+ */
+export function formatCompactNumber(
+    value: number,
+    locale: string = 'en-US',
+    currency?: string,
+): string {
+    const options: Intl.NumberFormatOptions = {
+        notation: 'compact',
+        compactDisplay: 'short',
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 0,
+    };
+
+    if (currency) {
+        options.style = 'currency';
+        options.currency = currency;
+    }
+
+    return new Intl.NumberFormat(locale, options).format(value);
+}
+
+/**
+ * Format a date with day, month, and year (e.g., "Jan 23, 2025" or "23 ene 2025")
+ * Capitalizes the first letter
+ */
+export function formatDateMedium(
+    dateStr: string,
+    locale: string = 'en-US',
+): string {
+    const date = new Date(dateStr);
+    const formatted = formatDate(date, 'MMM d, yyyy', locale);
+
+    // Capitalize first letter (important for Spanish dates)
+    return formatted.charAt(0).toUpperCase() + formatted.slice(1);
+}
+
+/**
+ * Format a date with weekday, day, month, and year (e.g., "Thu, Jan 23, 2025" or "Jue, 23 ene 2025")
+ * Capitalizes the first letter
+ */
+export function formatDateLong(
+    dateStr: string,
+    locale: string = 'en-US',
+): string {
+    const date = new Date(dateStr);
+    const formatted = formatDate(date, 'EEE, MMM d, yyyy', locale);
+
+    // Capitalize first letter (important for Spanish dates)
+    return formatted.charAt(0).toUpperCase() + formatted.slice(1);
+}
diff --git a/resources/js/utils/i18n.ts b/resources/js/utils/i18n.ts
new file mode 100644
index 00000000..2d1ba53d
--- /dev/null
+++ b/resources/js/utils/i18n.ts
@@ -0,0 +1,32 @@
+let currentTranslations: Record<string, string> = {};
+
+/**
+ * Sync translations from Inertia page props.
+ * Called from app.tsx on initial load and on every navigation.
+ */
+export function setTranslations(translations: Record<string, string>): void {
+    currentTranslations = translations;
+}
+
+/**
+ * Translation function - can be used anywhere (components, event handlers, callbacks).
+ *
+ * Usage:
+ * import { __ } from '@/utils/i18n';
+ * return <div>{__('Save')}</div>
+ */
+export function __(
+    key: string,
+    replacements?: Record<string, string | number>,
+): string {
+    let translation = currentTranslations[key] ?? key;
+
+    // Replace :placeholders with values
+    if (replacements) {
+        Object.entries(replacements).forEach(([placeholder, value]) => {
+            translation = translation.replace(`:${placeholder}`, String(value));
+        });
+    }
+
+    return translation;
+}
diff --git a/resources/views/mail/drip/feedback.blade.php b/resources/views/mail/drip/feedback.blade.php
index 5abb545e..f233d308 100644
--- a/resources/views/mail/drip/feedback.blade.php
+++ b/resources/views/mail/drip/feedback.blade.php
@@ -1,23 +1,23 @@
 <x-mail::message>
-# How's it going, {{ $userName }}?
+# {{ __("How's it going, :name?", ['name' => $userName]) }}
 
-Hi! It's Victor here, the founder of Whisper Money. You've been using the app for a few days now, and I'd love to hear how it's working for you.
+{{ __("Hi! It's Victor here, the founder of Whisper Money. You've been using the app for a few days now, and I'd love to hear how it's working for you.") }}
 
-## A Few Quick Questions
+## {{ __('A Few Quick Questions') }}
 
-- Is the app meeting your expectations?
-- Is there anything confusing or frustrating?
-- What features would make Whisper Money more useful for you?
+- {{ __('Is the app meeting your expectations?') }}
+- {{ __('Is there anything confusing or frustrating?') }}
+- {{ __('What features would make Whisper Money more useful for you?') }}
 
-As a solo founder, your feedback directly shapes what I build next. I personally read every response and take your suggestions seriously. When you subscribe, you're not just supporting some big corporation - you're helping me continue building something I'm passionate about.
+{{ __("As a solo founder, your feedback directly shapes what I build next. I personally read every response and take your suggestions seriously. When you subscribe, you're not just supporting some big corporation - you're helping me continue building something I'm passionate about.") }}
 
-## Help Me Improve
+## {{ __('Help Me Improve') }}
 
-Whether it's a bug you've found, a feature you'd love to see, or just general thoughts - I want to hear it all. This is my project, and I care deeply about making it work well for you.
+{{ __("Whether it's a bug you've found, a feature you'd love to see, or just general thoughts - I want to hear it all. This is my project, and I care deeply about making it work well for you.") }}
 
-Just reply to this email with your feedback. No surveys, no forms, just a direct conversation with me.
+{{ __('Just reply to this email with your feedback. No surveys, no forms, just a direct conversation with me.') }}
 
-Thanks for being part of Whisper Money. It really means a lot.
+{{ __('Thanks for being part of Whisper Money. It really means a lot.') }}
 
 Best,<br>
 Víctor F,<br>
diff --git a/resources/views/mail/drip/import-help.blade.php b/resources/views/mail/drip/import-help.blade.php
index e568ef9c..2ae92a57 100644
--- a/resources/views/mail/drip/import-help.blade.php
+++ b/resources/views/mail/drip/import-help.blade.php
@@ -1,30 +1,30 @@
 <x-mail::message>
-# Need help importing your transactions, {{ $userName }}?
+# {{ __('Need help importing your transactions, :name?', ['name' => $userName]) }}
 
-Hi! It's Victor, the founder of Whisper Money. I noticed you've completed your setup but haven't imported any transactions yet. Let me help you get started!
+{{ __("Hi! It's Victor, the founder of Whisper Money. I noticed you've completed your setup but haven't imported any transactions yet. Let me help you get started!") }}
 
-## How to Import Your Transactions
+## {{ __('How to Import Your Transactions') }}
 
-**Step 1: Export from your bank**
-Log into your bank's website and look for "Export" or "Download transactions". Choose CSV format if available.
+**{{ __('Step 1: Export from your bank') }}**
+{{ __('Log into your bank\'s website and look for "Export" or "Download transactions". Choose CSV format if available.') }}
 
-**Step 2: Upload to Whisper Money**
-Go to your dashboard and click "Import Transactions". Select your CSV file and I'll map the columns automatically.
+**{{ __('Step 2: Upload to Whisper Money') }}**
+{{ __('Go to your dashboard and click "Import Transactions". Select your CSV file and I\'ll map the columns automatically.') }}
 
-**Step 3: Review and confirm**
-Check that everything looks correct and click "Import". Your transactions will be encrypted and stored securely.
+**{{ __('Step 3: Review and confirm') }}**
+{{ __('Check that everything looks correct and click "Import". Your transactions will be encrypted and stored securely.') }}
 
-## Prefer to Start Fresh?
+## {{ __('Prefer to Start Fresh?') }}
 
-You can also manually add transactions and account balances. Some users prefer to start tracking from today rather than importing history - that's totally fine! Do whatever works best for you.
+{{ __("You can also manually add transactions and account balances. Some users prefer to start tracking from today rather than importing history - that's totally fine! Do whatever works best for you.") }}
 
 <x-mail::button :url="config('app.url') . '/dashboard'">
-Go to Dashboard
+{{ __('Go to Dashboard') }}
 </x-mail::button>
 
-If you're having trouble with the import or need help with your specific bank's format, just reply to this email. I personally handle support and I'm happy to help you figure it out.
+{{ __("If you're having trouble with the import or need help with your specific bank's format, just reply to this email. I personally handle support and I'm happy to help you figure it out.") }}
 
-Thanks for giving Whisper Money a try!
+{{ __('Thanks for giving Whisper Money a try!') }}
 
 Best,<br>
 Víctor F,<br>
diff --git a/resources/views/mail/drip/onboarding-reminder.blade.php b/resources/views/mail/drip/onboarding-reminder.blade.php
index 4b7e8973..dea5e331 100644
--- a/resources/views/mail/drip/onboarding-reminder.blade.php
+++ b/resources/views/mail/drip/onboarding-reminder.blade.php
@@ -1,26 +1,26 @@
 <x-mail::message>
-# Hey {{ $userName }}, is everything okay?
+# {{ __('Hey :name, is everything okay?', ['name' => $userName]) }}
 
-Hi! It's Victor, the founder of Whisper Money. I noticed you signed up but haven't completed your setup yet. I wanted to check in personally and see if something went wrong or if you need any help.
+{{ __("Hi! It's Victor, the founder of Whisper Money. I noticed you signed up but haven't completed your setup yet. I wanted to check in personally and see if something went wrong or if you need any help.") }}
 
-I know setting up a new app can be overwhelming, and I want to make sure you have everything you need to get started.
+{{ __("I know setting up a new app can be overwhelming, and I want to make sure you have everything you need to get started.") }}
 
-## Common Questions
+## {{ __('Common Questions') }}
 
-**Is the encryption confusing?**
-No worries! Your encryption key is automatically generated and stored securely on your device. You don't need to remember anything - I've made it as simple as possible.
+**{{ __('Is the encryption confusing?') }}**
+{{ __("No worries! Your encryption key is automatically generated and stored securely on your device. You don't need to remember anything - I've made it as simple as possible.") }}
 
-**Not sure how to import transactions?**
-I support CSV imports from most banks. Just export your transactions and upload them - it takes less than a minute. If your bank format is different, just let me know and I can help.
+**{{ __('Not sure how to import transactions?') }}**
+{{ __('I support CSV imports from most banks. Just export your transactions and upload them - it takes less than a minute. If your bank format is different, just let me know and I can help.') }}
 
-**Something not working?**
-Just reply to this email and let me know what's happening. I personally read every response and will help you get started. This is my project, so I care about making sure it works for you.
+**{{ __('Something not working?') }}**
+{{ __("Just reply to this email and let me know what's happening. I personally read every response and will help you get started. This is my project, so I care about making sure it works for you.") }}
 
 <x-mail::button :url="config('app.url') . '/onboarding'">
-Continue Setup
+{{ __('Continue Setup') }}
 </x-mail::button>
 
-Looking forward to hearing from you! And if you decide Whisper Money isn't for you, that's totally fine - but I'd love to know why so I can improve.
+{{ __("Looking forward to hearing from you! And if you decide Whisper Money isn't for you, that's totally fine - but I'd love to know why so I can improve.") }}
 
 Best,<br>
 Víctor F,<br>
diff --git a/resources/views/mail/drip/promo-code.blade.php b/resources/views/mail/drip/promo-code.blade.php
index 245236ad..f23ab6fe 100644
--- a/resources/views/mail/drip/promo-code.blade.php
+++ b/resources/views/mail/drip/promo-code.blade.php
@@ -1,30 +1,30 @@
 <x-mail::message>
-# Welcome aboard, {{ $userName }}!
+# {{ __('Welcome aboard, :name!', ['name' => $userName]) }}
 
-Hi! It's Victor, the founder of Whisper Money. I see you've already started importing your transactions - that's awesome! You're well on your way to taking control of your finances while keeping your data private.
+{{ __("Hi! It's Victor, the founder of Whisper Money. I see you've already started importing your transactions - that's awesome! You're well on your way to taking control of your finances while keeping your data private.") }}
 
-## A Special Offer for You
+## {{ __('A Special Offer for You') }}
 
-As one of our early users, I want to offer you a special founder's discount. When you subscribe, you're not just getting a great app - you're directly supporting me as I continue building Whisper Money. Every subscription helps me keep the lights on and build features you actually want.
+{{ __("As one of our early users, I want to offer you a special founder's discount. When you subscribe, you're not just getting a great app - you're directly supporting me as I continue building Whisper Money. Every subscription helps me keep the lights on and build features you actually want.") }}
 
 <x-mail::panel>
-Use code **{{ $promoCode }}** to get **80% off** your first period (monthly or yearly!)
+{{ __('Use code **:code** to get **80% off** your first period (monthly or yearly!)', ['code' => $promoCode]) }}
 </x-mail::panel>
 
-This gives you full access to all Whisper Money features:
+{{ __('This gives you full access to all Whisper Money features:') }}
 
-- Unlimited transaction imports
-- Automated categorization rules
-- Multiple account tracking
-- End-to-end encrypted storage
+- {{ __('Unlimited transaction imports') }}
+- {{ __('Automated categorization rules') }}
+- {{ __('Multiple account tracking') }}
+- {{ __('End-to-end encrypted storage') }}
 
 <x-mail::button :url="config('app.url') . '/subscribe'">
-Claim Your Discount
+{{ __('Claim Your Discount') }}
 </x-mail::button>
 
-This code won't last forever, but more importantly, your support means the world to me. As a solo founder, every subscriber helps me continue building something I'm passionate about.
+{{ __("This code won't last forever, but more importantly, your support means the world to me. As a solo founder, every subscriber helps me continue building something I'm passionate about.") }}
 
-Thanks for being part of this journey with me!
+{{ __('Thanks for being part of this journey with me!') }}
 
 Best,<br>
 Víctor F,<br>
diff --git a/resources/views/mail/drip/subscription-cancelled.blade.php b/resources/views/mail/drip/subscription-cancelled.blade.php
index d561cc2e..c83d29d6 100644
--- a/resources/views/mail/drip/subscription-cancelled.blade.php
+++ b/resources/views/mail/drip/subscription-cancelled.blade.php
@@ -1,29 +1,29 @@
 <x-mail::message>
-# We're sorry to see you go, {{ $userName }}
+# {{ __("We're sorry to see you go, :name", ['name' => $userName]) }}
 
-Hi! It's Victor, the founder of Whisper Money. I noticed you've cancelled your subscription, and I wanted to reach out personally.
+{{ __("Hi! It's Victor, the founder of Whisper Money. I noticed you've cancelled your subscription, and I wanted to reach out personally.") }}
 
-First, thank you for giving Whisper Money a try. I hope it helped you get a better handle on your finances while keeping your data private.
+{{ __('First, thank you for giving Whisper Money a try. I hope it helped you get a better handle on your finances while keeping your data private.') }}
 
-## Before you go...
+## {{ __('Before you go...') }}
 
-If there's anything that didn't work well for you, or if you have suggestions for improvement, I'd genuinely love to hear about it. As a solo founder, your feedback is invaluable in making Whisper Money better.
+{{ __("If there's anything that didn't work well for you, or if you have suggestions for improvement, I'd genuinely love to hear about it. As a solo founder, your feedback is invaluable in making Whisper Money better.") }}
 
-If you'd like to come back, here's a special offer just for you:
+{{ __("If you'd like to come back, here's a special offer just for you:") }}
 
 <x-mail::panel>
-Use code **CONTINUE50** to get **50% off** all current and future payments - works for both monthly and yearly subscriptions.
+{{ __('Use code **CONTINUE50** to get **50% off** all current and future payments - works for both monthly and yearly subscriptions.') }}
 </x-mail::panel>
 
 <x-mail::button :url="config('app.url') . '/subscribe'">
-Reactivate Your Subscription
+{{ __('Reactivate Your Subscription') }}
 </x-mail::button>
 
-Your data and settings will be preserved, so you can pick up right where you left off.
+{{ __('Your data and settings will be preserved, so you can pick up right where you left off.') }}
 
-If you have any questions or just want to chat, simply reply to this email. I read and respond to every message personally.
+{{ __('If you have any questions or just want to chat, simply reply to this email. I read and respond to every message personally.') }}
 
-Thanks again for being part of this journey!
+{{ __('Thanks again for being part of this journey!') }}
 
 Best,<br>
 Victor F,<br>
diff --git a/resources/views/mail/drip/welcome.blade.php b/resources/views/mail/drip/welcome.blade.php
index e3577c0e..c14edf85 100644
--- a/resources/views/mail/drip/welcome.blade.php
+++ b/resources/views/mail/drip/welcome.blade.php
@@ -1,29 +1,29 @@
 <x-mail::message>
-# Welcome to Whisper Money, {{ $userName }}!
+# {{ __('Welcome to Whisper Money, :name!', ['name' => $userName]) }}
 
-Hi! I'm Victor, the founder of Whisper Money. I wanted to personally welcome you and thank you for joining us.
+{{ __("Hi! I'm Victor, the founder of Whisper Money. I wanted to personally welcome you and thank you for joining us.") }}
 
-When I started building Whisper Money, I was frustrated with finance apps that wanted to mine my data or use AI to analyze my spending. I just wanted a simple, private way to track my finances - and I figured others might too.
+{{ __("When I started building Whisper Money, I was frustrated with finance apps that wanted to mine my data or use AI to analyze my spending. I just wanted a simple, private way to track my finances - and I figured others might too.") }}
 
-## Your Data is Truly Private
+## {{ __('Your Data is Truly Private') }}
 
-I built Whisper Money with **end-to-end encryption** because I believe your financial data should be yours alone:
+{{ __('I built Whisper Money with **end-to-end encryption** because I believe your financial data should be yours alone:') }}
 
-- Your financial data is encrypted with a key that only you control
-- I cannot read your transactions, balances, or any personal information (and I don't want to!)
-- Your encryption key never leaves your device
+- {{ __('Your financial data is encrypted with a key that only you control') }}
+- {{ __('I cannot read your transactions, balances, or any personal information (and I don\'t want to!)') }}
+- {{ __('Your encryption key never leaves your device') }}
 
-## No AI, No Data Mining
+## {{ __('No AI, No Data Mining') }}
 
-I don't use AI to analyze your spending or sell insights about your habits. Your financial data stays between you and your spreadsheet-loving self.
+{{ __("I don't use AI to analyze your spending or sell insights about your habits. Your financial data stays between you and your spreadsheet-loving self.") }}
 
-What's more, even if I wanted to use it, I couldn't, since you're the only one who has the key to read the data.
+{{ __("What's more, even if I wanted to use it, I couldn't, since you're the only one who has the key to read the data.") }}
 
 <div style="height: 40px"></div>
 
-If you have any questions or run into any issues, **just reply to this email**. I personally read every message and I'm here to help!
+{{ __('If you have any questions or run into any issues, **just reply to this email**. I personally read every message and I\'m here to help!') }}
 
-Thanks for giving Whisper Money a try. It means a lot to me.
+{{ __('Thanks for giving Whisper Money a try. It means a lot to me.') }}
 
 Best,<br>
 Víctor F,<br>
diff --git a/resources/views/mail/verify-email.blade.php b/resources/views/mail/verify-email.blade.php
index 96282349..e32f0b33 100644
--- a/resources/views/mail/verify-email.blade.php
+++ b/resources/views/mail/verify-email.blade.php
@@ -1,21 +1,21 @@
 <x-mail::message>
-# Verify your email, {{ $userName }}!
+# {{ __('Verify your email, :name!', ['name' => $userName]) }}
 
-Hi! I'm Victor, the founder of Whisper Money. Thanks for signing up — I just need you to verify your email address to get started.
+{{ __("Hi! I'm Victor, the founder of Whisper Money. Thanks for signing up — I just need you to verify your email address to get started.") }}
 
-Once verified, you'll be able to set up your encryption key and start tracking your finances with full privacy.
+{{ __("Once verified, you'll be able to set up your encryption key and start tracking your finances with full privacy.") }}
 
 <x-mail::button :url="$verificationUrl">
-Verify Email Address
+{{ __('Verify Email Address') }}
 </x-mail::button>
 
-If you didn't create a Whisper Money account, you can safely ignore this email.
+{{ __("If you didn't create a Whisper Money account, you can safely ignore this email.") }}
 
 Best,<br>
 Víctor F,<br>
 Founder of Whisper Money
 
 <x-mail::subcopy>
-If you're having trouble clicking the "Verify Email Address" button, copy and paste the URL below into your web browser: <span class="break-all">[{{ $verificationUrl }}]({{ $verificationUrl }})</span>
+{{ __('If you\'re having trouble clicking the "Verify Email Address" button, copy and paste the URL below into your web browser:') }} <span class="break-all">[{{ $verificationUrl }}]({{ $verificationUrl }})</span>
 </x-mail::subcopy>
 </x-mail::message>
diff --git a/routes/settings.php b/routes/settings.php
index 5cdd2dee..d28e1cec 100644
--- a/routes/settings.php
+++ b/routes/settings.php
@@ -45,10 +45,6 @@ Route::middleware('auth')->group(function () {
     Route::patch('settings/labels/{label}', [LabelController::class, 'update'])->name('labels.update');
     Route::delete('settings/labels/{label}', [LabelController::class, 'destroy'])->name('labels.destroy');
 
-    Route::get('settings/budgets', function () {
-        return Inertia::render('settings/budgets');
-    })->name('budgets.settings');
-
     Route::get('settings/automation-rules', [\App\Http\Controllers\Settings\AutomationRuleController::class, 'index'])->name('automation-rules.index');
     Route::post('settings/automation-rules', [\App\Http\Controllers\Settings\AutomationRuleController::class, 'store'])->name('automation-rules.store');
     Route::patch('settings/automation-rules/{automationRule}', [\App\Http\Controllers\Settings\AutomationRuleController::class, 'update'])->name('automation-rules.update');