diff --git a/app/Http/Controllers/Settings/LanguageController.php b/app/Http/Controllers/Settings/LanguageController.php
new file mode 100644
index 00000000..b879c9d4
--- /dev/null
+++ b/app/Http/Controllers/Settings/LanguageController.php
@@ -0,0 +1,31 @@
+<?php
+
+namespace App\Http\Controllers\Settings;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Http\Request;
+use Illuminate\Validation\Rule;
+
+class LanguageController extends Controller
+{
+    /**
+     * Update the user's language preference.
+     */
+    public function update(Request $request): RedirectResponse
+    {
+        $validated = $request->validate([
+            'locale' => ['required', 'string', Rule::in(config('app.available_locales'))],
+        ]);
+
+        if ($request->user()) {
+            $request->user()->update([
+                'locale' => $validated['locale'],
+            ]);
+        }
+
+        $request->session()->put('locale', $validated['locale']);
+
+        return back()->with('status', __('messages.language_updated'));
+    }
+}
diff --git a/app/Http/Controllers/Settings/PasswordController.php b/app/Http/Controllers/Settings/PasswordController.php
index 33d5a605..2ee73748 100644
--- a/app/Http/Controllers/Settings/PasswordController.php
+++ b/app/Http/Controllers/Settings/PasswordController.php
@@ -34,6 +34,6 @@ public function update(Request $request): RedirectResponse
             'password' => Hash::make($validated['password']),
         ]);
 
-        return back();
+        return back()->with('status', __('messages.password_updated'));
     }
 }
diff --git a/app/Http/Controllers/Settings/ProfileController.php b/app/Http/Controllers/Settings/ProfileController.php
index 10f3d224..76540aa8 100644
--- a/app/Http/Controllers/Settings/ProfileController.php
+++ b/app/Http/Controllers/Settings/ProfileController.php
@@ -37,7 +37,7 @@ public function update(ProfileUpdateRequest $request): RedirectResponse
 
         $request->user()->save();
 
-        return to_route('profile.edit');
+        return to_route('profile.edit')->with('status', __('messages.profile_updated'));
     }
 
     /**
diff --git a/app/Http/Middleware/HandleInertiaRequests.php b/app/Http/Middleware/HandleInertiaRequests.php
index 62b69f31..7c61fea6 100644
--- a/app/Http/Middleware/HandleInertiaRequests.php
+++ b/app/Http/Middleware/HandleInertiaRequests.php
@@ -4,6 +4,7 @@
 
 use Illuminate\Foundation\Inspiring;
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\App;
 use Inertia\Middleware;
 use Tighten\Ziggy\Ziggy;
 
@@ -51,6 +52,11 @@ public function share(Request $request): array
                 'location' => $request->url(),
             ],
             'sidebarOpen' => ! $request->hasCookie('sidebar_state') || $request->cookie('sidebar_state') === 'true',
+            'locale' => [
+                'current' => App::getLocale(),
+                'available' => config('app.available_locales'),
+                'user_preference' => $request->user()?->locale,
+            ],
         ];
     }
 }
diff --git a/app/Http/Middleware/SetUserLocale.php b/app/Http/Middleware/SetUserLocale.php
new file mode 100644
index 00000000..2f07146e
--- /dev/null
+++ b/app/Http/Middleware/SetUserLocale.php
@@ -0,0 +1,82 @@
+<?php
+
+namespace App\Http\Middleware;
+
+use Closure;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\App;
+use Symfony\Component\HttpFoundation\Response;
+
+class SetUserLocale
+{
+    /**
+     * Handle an incoming request.
+     *
+     * @param  \Closure(Request): (Response)  $next
+     */
+    public function handle(Request $request, Closure $next): Response
+    {
+        if ($userLocale = $request->user()?->locale) {
+            App::setLocale($userLocale);
+
+            return $next($request);
+        }
+
+        if ($sessionLocale = $request->session()->get('locale')) {
+            if (in_array($sessionLocale, $this->getSupportedLocales())) {
+                App::setLocale($sessionLocale);
+
+                return $next($request);
+            }
+        }
+
+        $this->setLocaleFromBrowser($request);
+
+        return $next($request);
+    }
+
+    /**
+     * Set locale based on browser language preferences
+     */
+    private function setLocaleFromBrowser(Request $request): void
+    {
+        $browserLocales = $request->getLanguages();
+        $supportedLocales = $this->getSupportedLocales();
+
+        foreach ($browserLocales as $browserLocale) {
+            $normalizedLocale = str_replace('_', '-', strtolower($browserLocale));
+
+            if (in_array($normalizedLocale, $supportedLocales)) {
+                App::setLocale($normalizedLocale);
+
+                return;
+            }
+
+            $languageCode = strtolower(substr($browserLocale, 0, 2));
+
+            if (in_array($languageCode, $supportedLocales)) {
+                App::setLocale($languageCode);
+
+                return;
+            }
+
+            foreach ($supportedLocales as $supportedLocale) {
+                if (str_starts_with($supportedLocale, $languageCode.'-')) {
+                    App::setLocale($supportedLocale);
+
+                    return;
+                }
+            }
+        }
+
+        App::setLocale(config('app.locale'));
+    }
+
+    /**
+     * Get supported locales from config
+     */
+    private function getSupportedLocales(): array
+    {
+        return config('app.available_locales');
+    }
+}
diff --git a/app/Models/User.php b/app/Models/User.php
index 749c7b77..c38962f9 100644
--- a/app/Models/User.php
+++ b/app/Models/User.php
@@ -20,6 +20,7 @@ class User extends Authenticatable
     protected $fillable = [
         'name',
         'email',
+        'locale',
         'password',
     ];
 
diff --git a/bootstrap/app.php b/bootstrap/app.php
index 134581ab..a7f54199 100644
--- a/bootstrap/app.php
+++ b/bootstrap/app.php
@@ -2,6 +2,7 @@
 
 use App\Http\Middleware\HandleAppearance;
 use App\Http\Middleware\HandleInertiaRequests;
+use App\Http\Middleware\SetUserLocale;
 use Illuminate\Foundation\Application;
 use Illuminate\Foundation\Configuration\Exceptions;
 use Illuminate\Foundation\Configuration\Middleware;
@@ -18,6 +19,7 @@
 
         $middleware->web(append: [
             HandleAppearance::class,
+            SetUserLocale::class,
             HandleInertiaRequests::class,
             AddLinkHeadersForPreloadedAssets::class,
         ]);
diff --git a/config/app.php b/config/app.php
index 324b513a..023b68ab 100644
--- a/config/app.php
+++ b/config/app.php
@@ -123,4 +123,20 @@
         'store' => env('APP_MAINTENANCE_STORE', 'database'),
     ],
 
+    /*
+    |--------------------------------------------------------------------------
+    | Available Locales
+    |--------------------------------------------------------------------------
+    |
+    | This array defines the list of supported locales for your application.
+    | These will be used to validate user preferences, detect browser languages,
+    | and limit localization to only approved languages.
+    |
+    */
+
+    'available_locales' => [
+        'en',
+        'fr',
+    ],
+
 ];
diff --git a/database/migrations/0001_01_01_000000_create_users_table.php b/database/migrations/0001_01_01_000000_create_users_table.php
index 05fb5d9e..a2f1eb0a 100644
--- a/database/migrations/0001_01_01_000000_create_users_table.php
+++ b/database/migrations/0001_01_01_000000_create_users_table.php
@@ -15,6 +15,7 @@ public function up(): void
             $table->id();
             $table->string('name');
             $table->string('email')->unique();
+            $table->string('locale', 5)->default('en');
             $table->timestamp('email_verified_at')->nullable();
             $table->string('password');
             $table->rememberToken();
diff --git a/package-lock.json b/package-lock.json
index e74ef58c..8e9eebd1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,6 +6,7 @@
         "": {
             "dependencies": {
                 "@inertiajs/vue3": "^2.0.0",
+                "@radix-ui/react-select": "^2.2.5",
                 "@tailwindcss/vite": "^4.1.11",
                 "@vitejs/plugin-vue": "^6.0.0",
                 "@vueuse/core": "^12.8.2",
@@ -14,13 +15,14 @@
                 "concurrently": "^9.0.1",
                 "laravel-vite-plugin": "^2.0.0",
                 "lucide-vue-next": "^0.468.0",
-                "reka-ui": "^2.2.0",
-                "tailwind-merge": "^3.2.0",
+                "reka-ui": "^2.4.1",
+                "tailwind-merge": "^3.3.1",
                 "tailwindcss": "^4.1.1",
-                "tw-animate-css": "^1.2.5",
+                "tw-animate-css": "^1.3.6",
                 "typescript": "^5.2.2",
                 "vite": "^7.0.4",
                 "vue": "^3.5.13",
+                "vue-i18n": "^12.0.0-alpha.3",
                 "ziggy-js": "^2.4.2"
             },
             "devDependencies": {
@@ -694,24 +696,37 @@
             }
         },
         "node_modules/@floating-ui/core": {
-            "version": "1.7.2",
-            "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.2.tgz",
-            "integrity": "sha512-wNB5ooIKHQc+Kui96jE/n69rHFWAVoxn5CAzL1Xdd8FG03cgY3MLO+GF9U3W737fYDSgPWA6MReKhBQBop6Pcw==",
+            "version": "1.7.3",
+            "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.3.tgz",
+            "integrity": "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==",
             "license": "MIT",
             "dependencies": {
                 "@floating-ui/utils": "^0.2.10"
             }
         },
         "node_modules/@floating-ui/dom": {
-            "version": "1.7.2",
-            "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.2.tgz",
-            "integrity": "sha512-7cfaOQuCS27HD7DX+6ib2OrnW+b4ZBwDNnCcT0uTyidcmyWb03FnQqJybDBoCnpdxwBSfA94UAYlRCt7mV+TbA==",
+            "version": "1.7.3",
+            "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.3.tgz",
+            "integrity": "sha512-uZA413QEpNuhtb3/iIKoYMSK07keHPYeXF02Zhd6e213j+d1NamLix/mCLxBUDW/Gx52sPH2m+chlUsyaBs/Ag==",
             "license": "MIT",
             "dependencies": {
-                "@floating-ui/core": "^1.7.2",
+                "@floating-ui/core": "^1.7.3",
                 "@floating-ui/utils": "^0.2.10"
             }
         },
+        "node_modules/@floating-ui/react-dom": {
+            "version": "2.1.5",
+            "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.5.tgz",
+            "integrity": "sha512-HDO/1/1oH9fjj4eLgegrlH3dklZpHtUYYFiVwMUwfGvk9jWDRWqkklA2/NFScknrcNSspbV868WjXORvreDX+Q==",
+            "license": "MIT",
+            "dependencies": {
+                "@floating-ui/dom": "^1.7.3"
+            },
+            "peerDependencies": {
+                "react": ">=16.8.0",
+                "react-dom": ">=16.8.0"
+            }
+        },
         "node_modules/@floating-ui/utils": {
             "version": "0.2.10",
             "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz",
@@ -863,6 +878,67 @@
                 "@swc/helpers": "^0.5.0"
             }
         },
+        "node_modules/@intlify/core-base": {
+            "version": "12.0.0-alpha.3",
+            "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-12.0.0-alpha.3.tgz",
+            "integrity": "sha512-LEvBHBUbiOOtIBkp4IIQENVC5Fg2YHsvdXN1+WRIxQ8hzHbHSBiqZ2l68B/yg8sE1a4S7dqhkaAedunShWPH+Q==",
+            "license": "MIT",
+            "dependencies": {
+                "@intlify/message-compiler": "12.0.0-alpha.3",
+                "@intlify/shared": "12.0.0-alpha.3"
+            },
+            "engines": {
+                "node": ">= 16"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/kazupon"
+            }
+        },
+        "node_modules/@intlify/message-compiler": {
+            "version": "12.0.0-alpha.3",
+            "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-12.0.0-alpha.3.tgz",
+            "integrity": "sha512-mDDTN3gfYOHhBnpnlby19UHyvMaOnzdlpsIrxUfs44R/vCATfn8pMOkE8PXD2t410xkocEj3FpDcC9XC/0v4Dg==",
+            "license": "MIT",
+            "dependencies": {
+                "@intlify/shared": "12.0.0-alpha.3",
+                "source-map-js": "^1.0.2"
+            },
+            "engines": {
+                "node": ">= 16"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/kazupon"
+            }
+        },
+        "node_modules/@intlify/shared": {
+            "version": "12.0.0-alpha.3",
+            "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-12.0.0-alpha.3.tgz",
+            "integrity": "sha512-ryaNYBvxQjyJUmVuBBg+HHUsmGnfxcEUPR0NCeG4/K9N2qtyFE35C80S15IN6iYFE2MGWLN7HfOSyg0MXZIc9w==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 16"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/kazupon"
+            }
+        },
+        "node_modules/@intlify/vue-i18n-core": {
+            "version": "12.0.0-alpha.3",
+            "resolved": "https://registry.npmjs.org/@intlify/vue-i18n-core/-/vue-i18n-core-12.0.0-alpha.3.tgz",
+            "integrity": "sha512-YwAfTQILHN+VoK0P/Yv47GbKnEf1lhfbliyVyW3knAL1EmT8m0m3rwffXJnwyQhYw8Jpx85CpL49WkSgyi6d/g==",
+            "license": "MIT",
+            "dependencies": {
+                "@intlify/core-base": "12.0.0-alpha.3",
+                "@intlify/shared": "12.0.0-alpha.3",
+                "@vue/devtools-api": "^6.5.0"
+            },
+            "engines": {
+                "node": ">= 16"
+            },
+            "peerDependencies": {
+                "vue": "^3.0.0"
+            }
+        },
         "node_modules/@isaacs/fs-minipass": {
             "version": "4.0.1",
             "resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz",
@@ -948,6 +1024,502 @@
                 "node": ">= 8"
             }
         },
+        "node_modules/@radix-ui/number": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.1.tgz",
+            "integrity": "sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==",
+            "license": "MIT"
+        },
+        "node_modules/@radix-ui/primitive": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.2.tgz",
+            "integrity": "sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==",
+            "license": "MIT"
+        },
+        "node_modules/@radix-ui/react-arrow": {
+            "version": "1.1.7",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz",
+            "integrity": "sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-primitive": "2.1.3"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-collection": {
+            "version": "1.1.7",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
+            "integrity": "sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-compose-refs": "1.1.2",
+                "@radix-ui/react-context": "1.1.2",
+                "@radix-ui/react-primitive": "2.1.3",
+                "@radix-ui/react-slot": "1.2.3"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-compose-refs": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
+            "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
+            "license": "MIT",
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-context": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+            "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+            "license": "MIT",
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-direction": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.1.tgz",
+            "integrity": "sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==",
+            "license": "MIT",
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-dismissable-layer": {
+            "version": "1.1.10",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.10.tgz",
+            "integrity": "sha512-IM1zzRV4W3HtVgftdQiiOmA0AdJlCtMLe00FXaHwgt3rAnNsIyDqshvkIW3hj/iu5hu8ERP7KIYki6NkqDxAwQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/primitive": "1.1.2",
+                "@radix-ui/react-compose-refs": "1.1.2",
+                "@radix-ui/react-primitive": "2.1.3",
+                "@radix-ui/react-use-callback-ref": "1.1.1",
+                "@radix-ui/react-use-escape-keydown": "1.1.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-focus-guards": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.2.tgz",
+            "integrity": "sha512-fyjAACV62oPV925xFCrH8DR5xWhg9KYtJT4s3u54jxp+L/hbpTY2kIeEFFbFe+a/HCE94zGQMZLIpVTPVZDhaA==",
+            "license": "MIT",
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-focus-scope": {
+            "version": "1.1.7",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.7.tgz",
+            "integrity": "sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-compose-refs": "1.1.2",
+                "@radix-ui/react-primitive": "2.1.3",
+                "@radix-ui/react-use-callback-ref": "1.1.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-id": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz",
+            "integrity": "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-use-layout-effect": "1.1.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-popper": {
+            "version": "1.2.7",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.7.tgz",
+            "integrity": "sha512-IUFAccz1JyKcf/RjB552PlWwxjeCJB8/4KxT7EhBHOJM+mN7LdW+B3kacJXILm32xawcMMjb2i0cIZpo+f9kiQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@floating-ui/react-dom": "^2.0.0",
+                "@radix-ui/react-arrow": "1.1.7",
+                "@radix-ui/react-compose-refs": "1.1.2",
+                "@radix-ui/react-context": "1.1.2",
+                "@radix-ui/react-primitive": "2.1.3",
+                "@radix-ui/react-use-callback-ref": "1.1.1",
+                "@radix-ui/react-use-layout-effect": "1.1.1",
+                "@radix-ui/react-use-rect": "1.1.1",
+                "@radix-ui/react-use-size": "1.1.1",
+                "@radix-ui/rect": "1.1.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-portal": {
+            "version": "1.1.9",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.9.tgz",
+            "integrity": "sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-primitive": "2.1.3",
+                "@radix-ui/react-use-layout-effect": "1.1.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-primitive": {
+            "version": "2.1.3",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+            "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-slot": "1.2.3"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-select": {
+            "version": "2.2.5",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.2.5.tgz",
+            "integrity": "sha512-HnMTdXEVuuyzx63ME0ut4+sEMYW6oouHWNGUZc7ddvUWIcfCva/AMoqEW/3wnEllriMWBa0RHspCYnfCWJQYmA==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/number": "1.1.1",
+                "@radix-ui/primitive": "1.1.2",
+                "@radix-ui/react-collection": "1.1.7",
+                "@radix-ui/react-compose-refs": "1.1.2",
+                "@radix-ui/react-context": "1.1.2",
+                "@radix-ui/react-direction": "1.1.1",
+                "@radix-ui/react-dismissable-layer": "1.1.10",
+                "@radix-ui/react-focus-guards": "1.1.2",
+                "@radix-ui/react-focus-scope": "1.1.7",
+                "@radix-ui/react-id": "1.1.1",
+                "@radix-ui/react-popper": "1.2.7",
+                "@radix-ui/react-portal": "1.1.9",
+                "@radix-ui/react-primitive": "2.1.3",
+                "@radix-ui/react-slot": "1.2.3",
+                "@radix-ui/react-use-callback-ref": "1.1.1",
+                "@radix-ui/react-use-controllable-state": "1.2.2",
+                "@radix-ui/react-use-layout-effect": "1.1.1",
+                "@radix-ui/react-use-previous": "1.1.1",
+                "@radix-ui/react-visually-hidden": "1.2.3",
+                "aria-hidden": "^1.2.4",
+                "react-remove-scroll": "^2.6.3"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-slot": {
+            "version": "1.2.3",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+            "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-compose-refs": "1.1.2"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-use-callback-ref": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
+            "integrity": "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==",
+            "license": "MIT",
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-use-controllable-state": {
+            "version": "1.2.2",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz",
+            "integrity": "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-use-effect-event": "0.0.2",
+                "@radix-ui/react-use-layout-effect": "1.1.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-use-effect-event": {
+            "version": "0.0.2",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.2.tgz",
+            "integrity": "sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-use-layout-effect": "1.1.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-use-escape-keydown": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.1.tgz",
+            "integrity": "sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-use-callback-ref": "1.1.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-use-layout-effect": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
+            "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
+            "license": "MIT",
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-use-previous": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.1.tgz",
+            "integrity": "sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==",
+            "license": "MIT",
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-use-rect": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.1.tgz",
+            "integrity": "sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/rect": "1.1.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-use-size": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.1.tgz",
+            "integrity": "sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-use-layout-effect": "1.1.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-visually-hidden": {
+            "version": "1.2.3",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.2.3.tgz",
+            "integrity": "sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-primitive": "2.1.3"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/rect": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.1.tgz",
+            "integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==",
+            "license": "MIT"
+        },
         "node_modules/@rolldown/pluginutils": {
             "version": "1.0.0-beta.19",
             "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.19.tgz",
@@ -1897,6 +2469,12 @@
                 "he": "^1.2.0"
             }
         },
+        "node_modules/@vue/devtools-api": {
+            "version": "6.6.4",
+            "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+            "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
+            "license": "MIT"
+        },
         "node_modules/@vue/eslint-config-typescript": {
             "version": "14.6.0",
             "resolved": "https://registry.npmjs.org/@vue/eslint-config-typescript/-/eslint-config-typescript-14.6.0.tgz",
@@ -2441,6 +3019,12 @@
                 "node": ">=8"
             }
         },
+        "node_modules/detect-node-es": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+            "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
+            "license": "MIT"
+        },
         "node_modules/dunder-proto": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -3147,6 +3731,15 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/get-nonce": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+            "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=6"
+            }
+        },
         "node_modules/get-proto": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
@@ -4224,10 +4817,102 @@
             ],
             "license": "MIT"
         },
+        "node_modules/react": {
+            "version": "19.1.1",
+            "resolved": "https://registry.npmjs.org/react/-/react-19.1.1.tgz",
+            "integrity": "sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==",
+            "license": "MIT",
+            "peer": true,
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/react-dom": {
+            "version": "19.1.1",
+            "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.1.tgz",
+            "integrity": "sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==",
+            "license": "MIT",
+            "peer": true,
+            "dependencies": {
+                "scheduler": "^0.26.0"
+            },
+            "peerDependencies": {
+                "react": "^19.1.1"
+            }
+        },
+        "node_modules/react-remove-scroll": {
+            "version": "2.7.1",
+            "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.1.tgz",
+            "integrity": "sha512-HpMh8+oahmIdOuS5aFKKY6Pyog+FNaZV/XyJOq7b4YFwsFHe5yYfdbIalI4k3vU2nSDql7YskmUseHsRrJqIPA==",
+            "license": "MIT",
+            "dependencies": {
+                "react-remove-scroll-bar": "^2.3.7",
+                "react-style-singleton": "^2.2.3",
+                "tslib": "^2.1.0",
+                "use-callback-ref": "^1.3.3",
+                "use-sidecar": "^1.1.3"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/react-remove-scroll-bar": {
+            "version": "2.3.8",
+            "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.8.tgz",
+            "integrity": "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==",
+            "license": "MIT",
+            "dependencies": {
+                "react-style-singleton": "^2.2.2",
+                "tslib": "^2.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/react-style-singleton": {
+            "version": "2.2.3",
+            "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
+            "integrity": "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==",
+            "license": "MIT",
+            "dependencies": {
+                "get-nonce": "^1.0.0",
+                "tslib": "^2.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/reka-ui": {
-            "version": "2.4.0",
-            "resolved": "https://registry.npmjs.org/reka-ui/-/reka-ui-2.4.0.tgz",
-            "integrity": "sha512-5WHLEquWI5W67NnjH9F+RhpzRAcwjAEQHtHZMa5wYdhClcYDr59q0RAAcymcnfndFqv0MiBxyFfzbGSRyIZG5g==",
+            "version": "2.4.1",
+            "resolved": "https://registry.npmjs.org/reka-ui/-/reka-ui-2.4.1.tgz",
+            "integrity": "sha512-NB7DrCsODN8MH02BWtgiExygfFcuuZ5/PTn6fMgjppmFHqePvNhmSn1LEuF35nel6PFbA4v+gdj0IoGN1yZ+vw==",
             "license": "MIT",
             "dependencies": {
                 "@floating-ui/dom": "^1.6.13",
@@ -4360,6 +5045,13 @@
                 "tslib": "^2.1.0"
             }
         },
+        "node_modules/scheduler": {
+            "version": "0.26.0",
+            "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",
+            "integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==",
+            "license": "MIT",
+            "peer": true
+        },
         "node_modules/semver": {
             "version": "7.7.2",
             "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
@@ -4669,9 +5361,9 @@
             "license": "0BSD"
         },
         "node_modules/tw-animate-css": {
-            "version": "1.3.5",
-            "resolved": "https://registry.npmjs.org/tw-animate-css/-/tw-animate-css-1.3.5.tgz",
-            "integrity": "sha512-t3u+0YNoloIhj1mMXs779P6MO9q3p3mvGn4k1n3nJPqJw/glZcuijG2qTSN4z4mgNRfW5ZC3aXJFLwDtiipZXA==",
+            "version": "1.3.6",
+            "resolved": "https://registry.npmjs.org/tw-animate-css/-/tw-animate-css-1.3.6.tgz",
+            "integrity": "sha512-9dy0R9UsYEGmgf26L8UcHiLmSFTHa9+D7+dAt/G/sF5dCnPePZbfgDYinc7/UzAM7g/baVrmS6m9yEpU46d+LA==",
             "license": "MIT",
             "funding": {
                 "url": "https://github.com/sponsors/Wombosvideo"
@@ -4757,6 +5449,49 @@
                 "punycode": "^2.1.0"
             }
         },
+        "node_modules/use-callback-ref": {
+            "version": "1.3.3",
+            "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.3.tgz",
+            "integrity": "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==",
+            "license": "MIT",
+            "dependencies": {
+                "tslib": "^2.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/use-sidecar": {
+            "version": "1.1.3",
+            "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.3.tgz",
+            "integrity": "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==",
+            "license": "MIT",
+            "dependencies": {
+                "detect-node-es": "^1.1.0",
+                "tslib": "^2.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/util-deprecate": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -4939,6 +5674,27 @@
                 "url": "https://opencollective.com/eslint"
             }
         },
+        "node_modules/vue-i18n": {
+            "version": "12.0.0-alpha.3",
+            "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-12.0.0-alpha.3.tgz",
+            "integrity": "sha512-+KQgD9LJoHfGCdJh3gaLdVS/Sps1n860+6wsjyeNLWJeEofjdVH7KPjz4rAeBlTAUaIDlIjHoXQY0Lk+8B6S9w==",
+            "license": "MIT",
+            "dependencies": {
+                "@intlify/core-base": "12.0.0-alpha.3",
+                "@intlify/shared": "12.0.0-alpha.3",
+                "@intlify/vue-i18n-core": "12.0.0-alpha.3",
+                "@vue/devtools-api": "^6.5.0"
+            },
+            "engines": {
+                "node": ">= 16"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/kazupon"
+            },
+            "peerDependencies": {
+                "vue": "^3.0.0"
+            }
+        },
         "node_modules/vue-tsc": {
             "version": "2.2.12",
             "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.2.12.tgz",
diff --git a/package.json b/package.json
index 65a98817..9b21ccb2 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     },
     "dependencies": {
         "@inertiajs/vue3": "^2.0.0",
+        "@radix-ui/react-select": "^2.2.5",
         "@tailwindcss/vite": "^4.1.11",
         "@vitejs/plugin-vue": "^6.0.0",
         "@vueuse/core": "^12.8.2",
@@ -32,13 +33,14 @@
         "concurrently": "^9.0.1",
         "laravel-vite-plugin": "^2.0.0",
         "lucide-vue-next": "^0.468.0",
-        "reka-ui": "^2.2.0",
-        "tailwind-merge": "^3.2.0",
+        "reka-ui": "^2.4.1",
+        "tailwind-merge": "^3.3.1",
         "tailwindcss": "^4.1.1",
-        "tw-animate-css": "^1.2.5",
+        "tw-animate-css": "^1.3.6",
         "typescript": "^5.2.2",
         "vite": "^7.0.4",
         "vue": "^3.5.13",
+        "vue-i18n": "^12.0.0-alpha.3",
         "ziggy-js": "^2.4.2"
     },
     "optionalDependencies": {
diff --git a/resources/js/app.ts b/resources/js/app.ts
index 792a46cf..6fd9e10e 100644
--- a/resources/js/app.ts
+++ b/resources/js/app.ts
@@ -6,6 +6,7 @@ import type { DefineComponent } from 'vue';
 import { createApp, h } from 'vue';
 import { ZiggyVue } from 'ziggy-js';
 import { initializeTheme } from './composables/useAppearance';
+import i18n from './i18n';
 
 const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
 
@@ -13,10 +14,16 @@ createInertiaApp({
     title: (title) => (title ? `${title} - ${appName}` : appName),
     resolve: (name) => resolvePageComponent(`./pages/${name}.vue`, import.meta.glob<DefineComponent>('./pages/**/*.vue')),
     setup({ el, App, props, plugin }) {
-        createApp({ render: () => h(App, props) })
-            .use(plugin)
-            .use(ZiggyVue)
-            .mount(el);
+        const app = createApp({ render: () => h(App, props) });
+
+        // Handle the new locale structure where locale is an object with 'current' property
+        const localeData = (props.initialPage.props as any)?.locale;
+        const currentLocale =
+            typeof localeData === 'object' && localeData?.current ? localeData.current : typeof localeData === 'string' ? localeData : 'en';
+
+        i18n.global.locale.value = currentLocale;
+
+        app.use(plugin).use(ZiggyVue).use(i18n).mount(el);
     },
     progress: {
         color: '#4B5563',
diff --git a/resources/js/components/AppHeader.vue b/resources/js/components/AppHeader.vue
index 51296fdd..82856ab4 100644
--- a/resources/js/components/AppHeader.vue
+++ b/resources/js/components/AppHeader.vue
@@ -14,6 +14,7 @@ import type { BreadcrumbItem, NavItem } from '@/types';
 import { Link, usePage } from '@inertiajs/vue3';
 import { BookOpen, Folder, LayoutGrid, Menu, Search } from 'lucide-vue-next';
 import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 interface Props {
     breadcrumbs?: BreadcrumbItem[];
@@ -25,6 +26,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const page = usePage();
 const auth = computed(() => page.props.auth);
+const { t } = useI18n();
 
 const isCurrentRoute = computed(() => (url: string) => page.url === url);
 
@@ -32,26 +34,26 @@ const activeItemStyles = computed(
     () => (url: string) => (isCurrentRoute.value(url) ? 'text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100' : ''),
 );
 
-const mainNavItems: NavItem[] = [
+const mainNavItems = computed<NavItem[]>(() => [
     {
-        title: 'Dashboard',
+        title: t('nav.dashboard'),
         href: '/dashboard',
         icon: LayoutGrid,
     },
-];
+]);
 
-const rightNavItems: NavItem[] = [
+const rightNavItems = computed<NavItem[]>(() => [
     {
         title: 'Repository',
         href: 'https://github.com/laravel/vue-starter-kit',
         icon: Folder,
     },
     {
-        title: 'Documentation',
+        title: t('welcome.documentation'),
         href: 'https://laravel.com/docs/starter-kits#vue',
         icon: BookOpen,
     },
-];
+]);
 </script>
 
 <template>
@@ -67,7 +69,7 @@ const rightNavItems: NavItem[] = [
                             </Button>
                         </SheetTrigger>
                         <SheetContent side="left" class="w-[300px] p-6">
-                            <SheetTitle class="sr-only">Navigation Menu</SheetTitle>
+                            <SheetTitle class="sr-only">{{ t('nav.navigationMenu') }}</SheetTitle>
                             <SheetHeader class="flex justify-start text-left">
                                 <AppLogoIcon class="size-6 fill-current text-black dark:text-white" />
                             </SheetHeader>
diff --git a/resources/js/components/AppLogo.vue b/resources/js/components/AppLogo.vue
index 01723b42..6b99d88d 100644
--- a/resources/js/components/AppLogo.vue
+++ b/resources/js/components/AppLogo.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import AppLogoIcon from '@/components/AppLogoIcon.vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 </script>
 
 <template>
@@ -7,6 +10,6 @@ import AppLogoIcon from '@/components/AppLogoIcon.vue';
         <AppLogoIcon class="size-5 fill-current text-white dark:text-black" />
     </div>
     <div class="ml-1 grid flex-1 text-left text-sm">
-        <span class="mb-0.5 truncate leading-tight font-semibold">Laravel Starter Kit</span>
+        <span class="mb-0.5 truncate leading-tight font-semibold">{{ t('app.name') }}</span>
     </div>
 </template>
diff --git a/resources/js/components/AppSidebar.vue b/resources/js/components/AppSidebar.vue
index 98442720..2425d9a0 100644
--- a/resources/js/components/AppSidebar.vue
+++ b/resources/js/components/AppSidebar.vue
@@ -6,28 +6,32 @@ import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarMenu, Sid
 import { type NavItem } from '@/types';
 import { Link } from '@inertiajs/vue3';
 import { BookOpen, Folder, LayoutGrid } from 'lucide-vue-next';
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
 import AppLogo from './AppLogo.vue';
 
-const mainNavItems: NavItem[] = [
+const { t } = useI18n();
+
+const mainNavItems = computed<NavItem[]>(() => [
     {
-        title: 'Dashboard',
+        title: t('nav.dashboard'),
         href: '/dashboard',
         icon: LayoutGrid,
     },
-];
+]);
 
-const footerNavItems: NavItem[] = [
+const footerNavItems = computed<NavItem[]>(() => [
     {
         title: 'Github Repo',
         href: 'https://github.com/laravel/vue-starter-kit',
         icon: Folder,
     },
     {
-        title: 'Documentation',
+        title: t('welcome.documentation'),
         href: 'https://laravel.com/docs/starter-kits#vue',
         icon: BookOpen,
     },
-];
+]);
 </script>
 
 <template>
diff --git a/resources/js/components/AppearanceTabs.vue b/resources/js/components/AppearanceTabs.vue
index 43578fb1..acbf7aca 100644
--- a/resources/js/components/AppearanceTabs.vue
+++ b/resources/js/components/AppearanceTabs.vue
@@ -1,13 +1,15 @@
 <script setup lang="ts">
 import { useAppearance } from '@/composables/useAppearance';
 import { Monitor, Moon, Sun } from 'lucide-vue-next';
+import { useI18n } from 'vue-i18n';
 
 const { appearance, updateAppearance } = useAppearance();
+const { t } = useI18n();
 
 const tabs = [
-    { value: 'light', Icon: Sun, label: 'Light' },
-    { value: 'dark', Icon: Moon, label: 'Dark' },
-    { value: 'system', Icon: Monitor, label: 'System' },
+    { value: 'light', Icon: Sun, label: t('settings.appearance.light') },
+    { value: 'dark', Icon: Moon, label: t('settings.appearance.dark') },
+    { value: 'system', Icon: Monitor, label: t('settings.appearance.system') },
 ] as const;
 </script>
 
diff --git a/resources/js/components/DeleteUser.vue b/resources/js/components/DeleteUser.vue
index fc17f0a2..d7f46391 100644
--- a/resources/js/components/DeleteUser.vue
+++ b/resources/js/components/DeleteUser.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useForm } from '@inertiajs/vue3';
 import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 // Components
 import HeadingSmall from '@/components/HeadingSmall.vue';
@@ -19,6 +20,7 @@ import {
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 
+const { t } = useI18n();
 const passwordInput = ref<HTMLInputElement | null>(null);
 
 const form = useForm({
@@ -44,38 +46,44 @@ const closeModal = () => {
 
 <template>
     <div class="space-y-6">
-        <HeadingSmall title="Delete account" description="Delete your account and all of its resources" />
+        <HeadingSmall :title="t('user.deleteAccount')" :description="t('user.deleteAccountDescription')" />
         <div class="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 class="relative space-y-0.5 text-red-600 dark:text-red-100">
-                <p class="font-medium">Warning</p>
-                <p class="text-sm">Please proceed with caution, this cannot be undone.</p>
+                <p class="font-medium">{{ t('common.warning') }}</p>
+                <p class="text-sm">{{ t('user.deleteAccountWarning') }}</p>
             </div>
             <Dialog>
                 <DialogTrigger as-child>
-                    <Button variant="destructive">Delete account</Button>
+                    <Button variant="destructive">{{ t('user.deleteAccount') }}</Button>
                 </DialogTrigger>
                 <DialogContent>
                     <form class="space-y-6" @submit="deleteUser">
                         <DialogHeader class="space-y-3">
-                            <DialogTitle>Are you sure you want to delete your account?</DialogTitle>
+                            <DialogTitle>{{ t('user.deleteAccountConfirm') }}</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.
+                                {{ t('user.deleteAccountDialogDescription') }}
                             </DialogDescription>
                         </DialogHeader>
 
                         <div class="grid gap-2">
-                            <Label for="password" class="sr-only">Password</Label>
-                            <Input id="password" type="password" name="password" ref="passwordInput" v-model="form.password" placeholder="Password" />
+                            <Label for="password" class="sr-only">{{ t('auth.password') }}</Label>
+                            <Input
+                                id="password"
+                                type="password"
+                                name="password"
+                                ref="passwordInput"
+                                v-model="form.password"
+                                :placeholder="t('auth.password')"
+                            />
                             <InputError :message="form.errors.password" />
                         </div>
 
                         <DialogFooter class="gap-2">
                             <DialogClose as-child>
-                                <Button variant="secondary" @click="closeModal"> Cancel </Button>
+                                <Button variant="secondary" @click="closeModal"> {{ t('common.cancel') }} </Button>
                             </DialogClose>
 
-                            <Button type="submit" variant="destructive" :disabled="form.processing"> Delete account </Button>
+                            <Button type="submit" variant="destructive" :disabled="form.processing"> {{ t('user.deleteAccount') }} </Button>
                         </DialogFooter>
                     </form>
                 </DialogContent>
diff --git a/resources/js/components/LanguageSwitcher.vue b/resources/js/components/LanguageSwitcher.vue
new file mode 100644
index 00000000..d2aef607
--- /dev/null
+++ b/resources/js/components/LanguageSwitcher.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { useLocale } from '@/composables/useLocale';
+import { router, usePage } from '@inertiajs/vue3';
+import { computed, defineAsyncComponent, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+interface Props {
+    display?: 'dropdown' | 'select' | 'cards';
+}
+
+const { locale } = useI18n();
+const page = usePage();
+const { initializeLocale } = useLocale();
+
+const availableLocales = (page.props.locale as any).available;
+
+const capitalize = (s: string) => (s ? s.charAt(0).toUpperCase() + s.slice(1) : s);
+
+const languages = availableLocales.map((code: string) => {
+    const name = new Intl.DisplayNames([code], { type: 'language' }).of(code);
+    return { code, name: capitalize(name || code) };
+});
+
+const currentLanguage = computed(() => {
+    return languages.find((lang: any) => lang.code === locale.value) || languages[0];
+});
+
+watch(locale, async (newLocale, oldLocale) => {
+    if (newLocale !== oldLocale && oldLocale) {
+        await syncLocaleWithBackend(newLocale);
+    }
+});
+
+const syncLocaleWithBackend = async (langCode: string) => {
+    const isAuthenticated = (page.props as any)?.auth?.user;
+    const routeName = isAuthenticated ? 'language.update' : 'language.update.guest';
+
+    try {
+        await router.patch(
+            route(routeName),
+            { locale: langCode },
+            {
+                preserveState: true,
+                preserveScroll: true,
+                onSuccess: () => {},
+                onError: () => {
+                    initializeLocale();
+                },
+            },
+        );
+    } catch {
+        initializeLocale();
+    }
+};
+
+const switchLanguage = async (langCode: string) => {
+    locale.value = langCode;
+};
+
+// Dynamic component mapping
+const componentMap = {
+    dropdown: defineAsyncComponent(() => import('./LanguageSwitcherDropdown.vue')),
+    select: defineAsyncComponent(() => import('./LanguageSwitcherSelect.vue')),
+    cards: defineAsyncComponent(() => import('./LanguageSwitcherCards.vue')),
+};
+
+const props = withDefaults(defineProps<Props>(), {
+    display: 'dropdown',
+});
+
+const currentComponent = computed(() => {
+    return componentMap[props.display as keyof typeof componentMap] || componentMap.dropdown;
+});
+</script>
+
+<template>
+    <component :is="currentComponent" :languages="languages" :current-language="currentLanguage" :locale="locale" @switch-language="switchLanguage" />
+</template>
diff --git a/resources/js/components/LanguageSwitcherCards.vue b/resources/js/components/LanguageSwitcherCards.vue
new file mode 100644
index 00000000..49b62e8e
--- /dev/null
+++ b/resources/js/components/LanguageSwitcherCards.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Globe } from 'lucide-vue-next';
+import { useI18n } from 'vue-i18n';
+
+interface Props {
+    languages: Array<{ code: string; name: string }>;
+    currentLanguage: { code: string; name: string };
+    locale: string;
+}
+
+defineProps<Props>();
+
+const emit = defineEmits<{
+    switchLanguage: [langCode: string];
+}>();
+
+const { t } = useI18n();
+
+const handleLanguageSwitch = (langCode: string) => {
+    emit('switchLanguage', langCode);
+};
+</script>
+
+<template>
+    <Card>
+        <CardHeader>
+            <CardTitle class="flex items-center gap-2">
+                <Globe class="h-5 w-5" />
+                {{ t('settings.language.title') }}
+            </CardTitle>
+            <CardDescription>
+                {{ t('settings.language.description') }}
+            </CardDescription>
+        </CardHeader>
+        <CardContent>
+            <div class="grid gap-3">
+                <Button
+                    v-for="language in languages"
+                    :key="language.code"
+                    @click="handleLanguageSwitch(language.code)"
+                    variant="outline"
+                    :class="['justify-start', language.code === currentLanguage.code ? 'border-primary bg-primary/5' : 'hover:bg-muted']"
+                >
+                    <div class="flex w-full items-center justify-between">
+                        <span class="font-medium">{{ language.name }}</span>
+                        <span v-if="language.code === currentLanguage.code" class="text-xs text-muted-foreground">
+                            {{ t('settings.language.currentLanguage') }}
+                        </span>
+                    </div>
+                </Button>
+            </div>
+        </CardContent>
+    </Card>
+</template>
diff --git a/resources/js/components/LanguageSwitcherDropdown.vue b/resources/js/components/LanguageSwitcherDropdown.vue
new file mode 100644
index 00000000..447148c4
--- /dev/null
+++ b/resources/js/components/LanguageSwitcherDropdown.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { Button } from '@/components/ui/button';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
+import { Globe } from 'lucide-vue-next';
+import { useI18n } from 'vue-i18n';
+
+interface Props {
+    languages: Array<{ code: string; name: string }>;
+    currentLanguage: { code: string; name: string };
+    locale: string;
+}
+
+defineProps<Props>();
+
+const emit = defineEmits<{
+    switchLanguage: [langCode: string];
+}>();
+
+const { t } = useI18n();
+
+const handleLanguageSwitch = (langCode: string) => {
+    emit('switchLanguage', langCode);
+};
+</script>
+
+<template>
+    <DropdownMenu>
+        <DropdownMenuTrigger as-child>
+            <Button variant="ghost" size="icon" class="h-8 w-8 p-0">
+                <Globe class="h-4 w-4 text-foreground" />
+                <span class="sr-only">{{ t('common.switchLanguage') }}</span>
+            </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+            <DropdownMenuItem
+                v-for="language in languages"
+                :key="language.code"
+                @click="handleLanguageSwitch(language.code)"
+                :class="{ 'bg-accent': language.code === currentLanguage.code }"
+            >
+                {{ language.name }}
+            </DropdownMenuItem>
+        </DropdownMenuContent>
+    </DropdownMenu>
+</template>
diff --git a/resources/js/components/LanguageSwitcherSelect.vue b/resources/js/components/LanguageSwitcherSelect.vue
new file mode 100644
index 00000000..22423e75
--- /dev/null
+++ b/resources/js/components/LanguageSwitcherSelect.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+
+interface Props {
+    languages: Array<{ code: string; name: string }>;
+    currentLanguage: { code: string; name: string };
+    locale: string;
+}
+
+defineProps<Props>();
+
+const emit = defineEmits<{
+    'update:locale': [value: string];
+    switchLanguage: [langCode: string];
+}>();
+
+const handleLanguageChange = (langCode: string) => {
+    emit('update:locale', langCode);
+    emit('switchLanguage', langCode);
+};
+</script>
+
+<template>
+    <Select :model-value="locale" @update:model-value="handleLanguageChange">
+        <SelectTrigger class="w-[180px]">
+            <SelectValue class="text-foreground">
+                <span class="flex items-center gap-2">
+                    <span class="text-foreground">{{ currentLanguage.name }}</span>
+                </span>
+            </SelectValue>
+        </SelectTrigger>
+        <SelectContent>
+            <SelectItem v-for="language in languages" :key="language.code" :value="language.code">
+                <span class="flex items-center gap-2">
+                    <span>{{ language.name }}</span>
+                </span>
+            </SelectItem>
+        </SelectContent>
+    </Select>
+</template>
diff --git a/resources/js/components/LanguageTab.vue b/resources/js/components/LanguageTab.vue
new file mode 100644
index 00000000..794fe0b1
--- /dev/null
+++ b/resources/js/components/LanguageTab.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import LanguageSwitcher from '@/components/LanguageSwitcher.vue';
+</script>
+
+<template>
+    <LanguageSwitcher display="cards" />
+</template>
diff --git a/resources/js/components/NavMain.vue b/resources/js/components/NavMain.vue
index ccf68cb2..c90199ce 100644
--- a/resources/js/components/NavMain.vue
+++ b/resources/js/components/NavMain.vue
@@ -2,17 +2,19 @@
 import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
 import { type NavItem } from '@/types';
 import { Link, usePage } from '@inertiajs/vue3';
+import { useI18n } from 'vue-i18n';
 
 defineProps<{
     items: NavItem[];
 }>();
 
 const page = usePage();
+const { t } = useI18n();
 </script>
 
 <template>
     <SidebarGroup class="px-2 py-0">
-        <SidebarGroupLabel>Platform</SidebarGroupLabel>
+        <SidebarGroupLabel>{{ t('nav.platform') }}</SidebarGroupLabel>
         <SidebarMenu>
             <SidebarMenuItem v-for="item in items" :key="item.title">
                 <SidebarMenuButton as-child :is-active="item.href === page.url" :tooltip="item.title">
diff --git a/resources/js/components/UserMenuContent.vue b/resources/js/components/UserMenuContent.vue
index 78184442..5eb003ab 100644
--- a/resources/js/components/UserMenuContent.vue
+++ b/resources/js/components/UserMenuContent.vue
@@ -4,11 +4,14 @@ import { DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSep
 import type { User } from '@/types';
 import { Link, router } from '@inertiajs/vue3';
 import { LogOut, Settings } from 'lucide-vue-next';
+import { useI18n } from 'vue-i18n';
 
 interface Props {
     user: User;
 }
 
+const { t } = useI18n();
+
 const handleLogout = () => {
     router.flushAll();
 };
@@ -27,7 +30,7 @@ defineProps<Props>();
         <DropdownMenuItem :as-child="true">
             <Link class="block w-full" :href="route('profile.edit')" prefetch as="button">
                 <Settings class="mr-2 h-4 w-4" />
-                Settings
+                {{ t('nav.settings') }}
             </Link>
         </DropdownMenuItem>
     </DropdownMenuGroup>
@@ -35,7 +38,7 @@ defineProps<Props>();
     <DropdownMenuItem :as-child="true">
         <Link class="block w-full" method="post" :href="route('logout')" @click="handleLogout" as="button">
             <LogOut class="mr-2 h-4 w-4" />
-            Log out
+            {{ t('auth.logout') }}
         </Link>
     </DropdownMenuItem>
 </template>
diff --git a/resources/js/components/ui/select/Select.vue b/resources/js/components/ui/select/Select.vue
new file mode 100644
index 00000000..dc1f83db
--- /dev/null
+++ b/resources/js/components/ui/select/Select.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { SelectRootEmits, SelectRootProps } from 'reka-ui'
+import { SelectRoot, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<SelectRootProps>()
+const emits = defineEmits<SelectRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <SelectRoot
+    data-slot="select"
+    v-bind="forwarded"
+  >
+    <slot />
+  </SelectRoot>
+</template>
diff --git a/resources/js/components/ui/select/SelectContent.vue b/resources/js/components/ui/select/SelectContent.vue
new file mode 100644
index 00000000..71a6061a
--- /dev/null
+++ b/resources/js/components/ui/select/SelectContent.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import {
+  SelectContent,
+  type SelectContentEmits,
+  type SelectContentProps,
+  SelectPortal,
+  SelectViewport,
+  useForwardPropsEmits,
+} from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { SelectScrollDownButton, SelectScrollUpButton } from '.'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    position: 'popper',
+  },
+)
+const emits = defineEmits<SelectContentEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SelectPortal>
+    <SelectContent
+      data-slot="select-content"
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="cn(
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--reka-select-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
+        position === 'popper'
+          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        props.class,
+      )
+      "
+    >
+      <SelectScrollUpButton />
+      <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[var(--reka-select-trigger-height)] w-full min-w-[var(--reka-select-trigger-width)] scroll-my-1')">
+        <slot />
+      </SelectViewport>
+      <SelectScrollDownButton />
+    </SelectContent>
+  </SelectPortal>
+</template>
diff --git a/resources/js/components/ui/select/SelectGroup.vue b/resources/js/components/ui/select/SelectGroup.vue
new file mode 100644
index 00000000..4f36d925
--- /dev/null
+++ b/resources/js/components/ui/select/SelectGroup.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { SelectGroup, type SelectGroupProps } from 'reka-ui'
+
+const props = defineProps<SelectGroupProps>()
+</script>
+
+<template>
+  <SelectGroup
+    data-slot="select-group"
+    v-bind="props"
+  >
+    <slot />
+  </SelectGroup>
+</template>
diff --git a/resources/js/components/ui/select/SelectItem.vue b/resources/js/components/ui/select/SelectItem.vue
new file mode 100644
index 00000000..1cdfa634
--- /dev/null
+++ b/resources/js/components/ui/select/SelectItem.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { Check } from 'lucide-vue-next'
+import {
+  SelectItem,
+  SelectItemIndicator,
+  type SelectItemProps,
+  SelectItemText,
+  useForwardProps,
+} from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectItem
+    data-slot="select-item"
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        `focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2`,
+        props.class,
+      )
+    "
+  >
+    <span class="absolute right-2 flex size-3.5 items-center justify-center">
+      <SelectItemIndicator>
+        <Check class="size-4" />
+      </SelectItemIndicator>
+    </span>
+
+    <SelectItemText>
+      <slot />
+    </SelectItemText>
+  </SelectItem>
+</template>
diff --git a/resources/js/components/ui/select/SelectItemText.vue b/resources/js/components/ui/select/SelectItemText.vue
new file mode 100644
index 00000000..cff32ac3
--- /dev/null
+++ b/resources/js/components/ui/select/SelectItemText.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { SelectItemText, type SelectItemTextProps } from 'reka-ui'
+
+const props = defineProps<SelectItemTextProps>()
+</script>
+
+<template>
+  <SelectItemText
+    data-slot="select-item-text"
+    v-bind="props"
+  >
+    <slot />
+  </SelectItemText>
+</template>
diff --git a/resources/js/components/ui/select/SelectLabel.vue b/resources/js/components/ui/select/SelectLabel.vue
new file mode 100644
index 00000000..37a84ddd
--- /dev/null
+++ b/resources/js/components/ui/select/SelectLabel.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { SelectLabel, type SelectLabelProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <SelectLabel
+    data-slot="select-label"
+    :class="cn('px-2 py-1.5 text-sm font-medium', props.class)"
+  >
+    <slot />
+  </SelectLabel>
+</template>
diff --git a/resources/js/components/ui/select/SelectScrollDownButton.vue b/resources/js/components/ui/select/SelectScrollDownButton.vue
new file mode 100644
index 00000000..f03ff40e
--- /dev/null
+++ b/resources/js/components/ui/select/SelectScrollDownButton.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { ChevronDown } from 'lucide-vue-next'
+import { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectScrollDownButton
+    data-slot="select-scroll-down-button"
+    v-bind="forwardedProps"
+    :class="cn('flex cursor-default items-center justify-center py-1', props.class)"
+  >
+    <slot>
+      <ChevronDown class="size-4" />
+    </slot>
+  </SelectScrollDownButton>
+</template>
diff --git a/resources/js/components/ui/select/SelectScrollUpButton.vue b/resources/js/components/ui/select/SelectScrollUpButton.vue
new file mode 100644
index 00000000..078331ba
--- /dev/null
+++ b/resources/js/components/ui/select/SelectScrollUpButton.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { ChevronUp } from 'lucide-vue-next'
+import { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectScrollUpButton
+    data-slot="select-scroll-up-button"
+    v-bind="forwardedProps"
+    :class="cn('flex cursor-default items-center justify-center py-1', props.class)"
+  >
+    <slot>
+      <ChevronUp class="size-4" />
+    </slot>
+  </SelectScrollUpButton>
+</template>
diff --git a/resources/js/components/ui/select/SelectSeparator.vue b/resources/js/components/ui/select/SelectSeparator.vue
new file mode 100644
index 00000000..5ec71554
--- /dev/null
+++ b/resources/js/components/ui/select/SelectSeparator.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { SelectSeparator, type SelectSeparatorProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <SelectSeparator
+    data-slot="select-separator"
+    v-bind="delegatedProps"
+    :class="cn('bg-border pointer-events-none -mx-1 my-1 h-px', props.class)"
+  />
+</template>
diff --git a/resources/js/components/ui/select/SelectTrigger.vue b/resources/js/components/ui/select/SelectTrigger.vue
new file mode 100644
index 00000000..5ffd488c
--- /dev/null
+++ b/resources/js/components/ui/select/SelectTrigger.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { ChevronDown } from 'lucide-vue-next'
+import { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(
+  defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'], size?: 'sm' | 'default' }>(),
+  { size: 'default' },
+)
+
+const delegatedProps = reactiveOmit(props, 'class', 'size')
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectTrigger
+    data-slot="select-trigger"
+    :data-size="size"
+    v-bind="forwardedProps"
+    :class="cn(
+      `border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
+      props.class,
+    )"
+  >
+    <slot />
+    <SelectIcon as-child>
+      <ChevronDown class="size-4 opacity-50" />
+    </SelectIcon>
+  </SelectTrigger>
+</template>
diff --git a/resources/js/components/ui/select/SelectValue.vue b/resources/js/components/ui/select/SelectValue.vue
new file mode 100644
index 00000000..f198b965
--- /dev/null
+++ b/resources/js/components/ui/select/SelectValue.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { SelectValue, type SelectValueProps } from 'reka-ui'
+
+const props = defineProps<SelectValueProps>()
+</script>
+
+<template>
+  <SelectValue
+    data-slot="select-value"
+    v-bind="props"
+  >
+    <slot />
+  </SelectValue>
+</template>
diff --git a/resources/js/components/ui/select/index.ts b/resources/js/components/ui/select/index.ts
new file mode 100644
index 00000000..31b92946
--- /dev/null
+++ b/resources/js/components/ui/select/index.ts
@@ -0,0 +1,11 @@
+export { default as Select } from './Select.vue'
+export { default as SelectContent } from './SelectContent.vue'
+export { default as SelectGroup } from './SelectGroup.vue'
+export { default as SelectItem } from './SelectItem.vue'
+export { default as SelectItemText } from './SelectItemText.vue'
+export { default as SelectLabel } from './SelectLabel.vue'
+export { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'
+export { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'
+export { default as SelectSeparator } from './SelectSeparator.vue'
+export { default as SelectTrigger } from './SelectTrigger.vue'
+export { default as SelectValue } from './SelectValue.vue'
diff --git a/resources/js/components/ui/sidebar/Sidebar.vue b/resources/js/components/ui/sidebar/Sidebar.vue
index c75db5d8..78d19de5 100644
--- a/resources/js/components/ui/sidebar/Sidebar.vue
+++ b/resources/js/components/ui/sidebar/Sidebar.vue
@@ -6,6 +6,7 @@ import SheetDescription from '@/components/ui/sheet/SheetDescription.vue'
 import SheetHeader from '@/components/ui/sheet/SheetHeader.vue'
 import SheetTitle from '@/components/ui/sheet/SheetTitle.vue'
 import { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'
+import { useI18n } from 'vue-i18n'
 
 defineOptions({
   inheritAttrs: false,
@@ -18,6 +19,7 @@ const props = withDefaults(defineProps<SidebarProps>(), {
 })
 
 const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+const { t } = useI18n()
 </script>
 
 <template>
@@ -42,7 +44,7 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
       }"
     >
       <SheetHeader class="sr-only">
-        <SheetTitle>Sidebar</SheetTitle>
+        <SheetTitle>{{ t('nav.sidebar') }}</SheetTitle>
         <SheetDescription>Displays the mobile sidebar.</SheetDescription>
       </SheetHeader>
       <div class="flex h-full w-full flex-col">
diff --git a/resources/js/components/ui/sidebar/SidebarTrigger.vue b/resources/js/components/ui/sidebar/SidebarTrigger.vue
index 0e4fcbcc..f8becb9a 100644
--- a/resources/js/components/ui/sidebar/SidebarTrigger.vue
+++ b/resources/js/components/ui/sidebar/SidebarTrigger.vue
@@ -4,12 +4,14 @@ import { cn } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
 import { PanelLeft } from 'lucide-vue-next'
 import { useSidebar } from './utils'
+import { useI18n } from 'vue-i18n'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']
 }>()
 
 const { toggleSidebar } = useSidebar()
+const { t } = useI18n()
 </script>
 
 <template>
@@ -22,6 +24,6 @@ const { toggleSidebar } = useSidebar()
     @click="toggleSidebar"
   >
     <PanelLeft />
-    <span class="sr-only">Toggle Sidebar</span>
+    <span class="sr-only">{{ t('nav.toggleSidebar') }}</span>
   </Button>
 </template>
diff --git a/resources/js/composables/useLocale.ts b/resources/js/composables/useLocale.ts
new file mode 100644
index 00000000..3b4a757b
--- /dev/null
+++ b/resources/js/composables/useLocale.ts
@@ -0,0 +1,45 @@
+import { usePage } from '@inertiajs/vue3';
+import { watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+export function useLocale() {
+    const { locale } = useI18n();
+    const page = usePage();
+
+    // Helper function to extract current locale from the new structure
+    const getCurrentLocale = (localeData: any): string => {
+        if (typeof localeData === 'object' && localeData?.current) {
+            return localeData.current;
+        }
+        if (typeof localeData === 'string') {
+            return localeData;
+        }
+        return 'en';
+    };
+
+    // Initialize locale from page props
+    const initializeLocale = () => {
+        const localeData = (page.props as any)?.locale;
+        const userLocale = getCurrentLocale(localeData);
+        if (locale.value !== userLocale) {
+            locale.value = userLocale;
+        }
+    };
+
+    // Watch for page changes and update locale accordingly
+    watch(
+        () => (page.props as any)?.locale,
+        (newLocaleData) => {
+            const newLocale = getCurrentLocale(newLocaleData);
+            if (newLocale && newLocale !== locale.value) {
+                locale.value = newLocale;
+            }
+        },
+        { immediate: true },
+    );
+
+    return {
+        locale,
+        initializeLocale,
+    };
+}
diff --git a/resources/js/i18n/index.ts b/resources/js/i18n/index.ts
new file mode 100644
index 00000000..a295bd5c
--- /dev/null
+++ b/resources/js/i18n/index.ts
@@ -0,0 +1,13 @@
+import { createI18n } from 'vue-i18n';
+import en from './locales/en';
+import fr from './locales/fr';
+
+export default createI18n({
+    legacy: false,
+    locale: 'en', // Default locale, will be updated when app is ready
+    fallbackLocale: 'en',
+    messages: {
+        en,
+        fr,
+    },
+});
diff --git a/resources/js/i18n/locales/en.ts b/resources/js/i18n/locales/en.ts
new file mode 100644
index 00000000..4a17eba3
--- /dev/null
+++ b/resources/js/i18n/locales/en.ts
@@ -0,0 +1,137 @@
+export default {
+    // Common
+    common: {
+        save: 'Save',
+        cancel: 'Cancel',
+        delete: 'Delete',
+        edit: 'Edit',
+        close: 'Close',
+        loading: 'Loading...',
+        saved: 'Saved.',
+        warning: 'Warning',
+        more: 'More',
+        switchLanguage: 'Switch language',
+    },
+
+    // Navigation
+    nav: {
+        platform: 'Platform',
+        navigationMenu: 'Navigation Menu',
+        sidebar: 'Sidebar',
+        toggleSidebar: 'Toggle Sidebar',
+        settings: 'Settings',
+        dashboard: 'Dashboard',
+    },
+
+    // Auth
+    auth: {
+        login: 'Log in',
+        register: 'Sign up',
+        logout: 'Log out',
+        email: 'Email address',
+        password: 'Password',
+        confirmPassword: 'Confirm password',
+        currentPassword: 'Current password',
+        newPassword: 'New password',
+        name: 'Name',
+        rememberMe: 'Remember me',
+        forgotPassword: 'Forgot password?',
+        resetPassword: 'Reset password',
+        verifyEmail: 'Verify email',
+        confirmPasswordRequired: 'Please confirm your password before continuing.',
+        orReturnTo: 'Or, return to',
+        signUp: 'Sign up',
+        createAccount: 'Create an account',
+        createAccountDescription: 'Enter your details below to create your account',
+        forgotPasswordTitle: 'Forgot password',
+        forgotPasswordDescription: 'Enter your email to receive a password reset link',
+        resetPasswordTitle: 'Reset password',
+        resetPasswordDescription: 'Please enter your new password below',
+        confirmPasswordTitle: 'Confirm your password',
+        confirmPasswordDescription: 'This is a secure area of the application. Please confirm your password before continuing.',
+        logIn: 'Log in',
+        loginDescription: 'Enter your email and password below to log in',
+        alreadyHaveAccount: 'Already have an account?',
+        dontHaveAccount: "Don't have an account?",
+        verifyEmailDescription: 'Please verify your email address by clicking on the link we just emailed to you.',
+        verificationLinkSent: 'A new verification link has been sent to the email address you provided during registration.',
+        resendVerificationEmail: 'Resend verification email',
+    },
+
+    // Settings
+    settings: {
+        appearance: {
+            title: 'Appearance',
+            description: "Update your account's appearance settings",
+            light: 'Light',
+            dark: 'Dark',
+            system: 'System',
+        },
+        language: {
+            title: 'Language',
+            description: 'Choose your preferred language for the application interface',
+            currentLanguage: 'Current language',
+        },
+        profile: {
+            title: 'Profile',
+            description: "Update your account's profile information",
+            profileInformation: 'Profile information',
+            profileInformationDescription: 'Update your name and email address',
+        },
+        password: {
+            title: 'Password',
+            description: 'Ensure your account is using a long, random password to stay secure',
+            updatePassword: 'Update password',
+            savePassword: 'Save password',
+        },
+        manageSettings: 'Manage your profile and account settings',
+    },
+
+    // User
+    user: {
+        deleteAccount: 'Delete account',
+        deleteAccountConfirm: 'Are you sure you want to delete your account?',
+        deleteAccountWarning: 'Please proceed with caution, this cannot be undone.',
+        deleteAccountDescription: 'Delete your account and all of its resources',
+        deleteAccountDialogDescription:
+            '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.',
+    },
+
+    // Welcome page
+    welcome: {
+        title: "Let's get started",
+        description:
+            'Laravel has wonderful documentation covering every aspect of the framework. Whether you are new to the framework or have previous experience with Laravel, we recommend reading all of the documentation from beginning to end.',
+        documentation: 'Documentation',
+        laracasts: 'Laracasts',
+        laravelCloud: 'Laravel Cloud',
+        readThe: 'Read the',
+        watchVideoTutorials: 'Watch video tutorials at',
+    },
+
+    // App
+    app: {
+        name: 'Laravel Starter Kit',
+    },
+
+    // Form labels
+    form: {
+        name: 'Name',
+        email: 'Email address',
+        password: 'Password',
+        confirmPassword: 'Confirm password',
+        currentPassword: 'Current password',
+        newPassword: 'New password',
+    },
+
+    // Placeholders
+    placeholder: {
+        currentPassword: 'Current password',
+        newPassword: 'New password',
+        confirmPassword: 'Confirm password',
+        fullName: 'Full name',
+        emailAddress: 'Enter your email address',
+        password: 'Password',
+        confirmPasswordPlaceholder: 'Confirm password',
+    },
+};
diff --git a/resources/js/i18n/locales/fr.ts b/resources/js/i18n/locales/fr.ts
new file mode 100644
index 00000000..70bd57d5
--- /dev/null
+++ b/resources/js/i18n/locales/fr.ts
@@ -0,0 +1,137 @@
+export default {
+    // Common
+    common: {
+        save: 'Enregistrer',
+        cancel: 'Annuler',
+        delete: 'Supprimer',
+        edit: 'Modifier',
+        close: 'Fermer',
+        loading: 'Chargement...',
+        saved: 'Enregistré.',
+        warning: 'Avertissement',
+        more: 'Plus',
+        switchLanguage: 'Changer de langue',
+    },
+
+    // Navigation
+    nav: {
+        platform: 'Plateforme',
+        navigationMenu: 'Menu de navigation',
+        sidebar: 'Barre latérale',
+        toggleSidebar: 'Basculer la barre latérale',
+        settings: 'Paramètres',
+        dashboard: 'Tableau de bord',
+    },
+
+    // Auth
+    auth: {
+        login: 'Se connecter',
+        register: "S'inscrire",
+        logout: 'Se déconnecter',
+        email: 'Adresse e-mail',
+        password: 'Mot de passe',
+        confirmPassword: 'Confirmer le mot de passe',
+        currentPassword: 'Mot de passe actuel',
+        newPassword: 'Nouveau mot de passe',
+        name: 'Nom',
+        rememberMe: 'Se souvenir de moi',
+        forgotPassword: 'Mot de passe oublié ?',
+        resetPassword: 'Réinitialiser le mot de passe',
+        verifyEmail: "Vérifier l'e-mail",
+        confirmPasswordRequired: 'Veuillez confirmer votre mot de passe avant de continuer.',
+        orReturnTo: 'Ou, retourner à',
+        signUp: "S'inscrire",
+        createAccount: 'Créer un compte',
+        createAccountDescription: 'Entrez vos détails ci-dessous pour créer votre compte',
+        forgotPasswordTitle: 'Mot de passe oublié',
+        forgotPasswordDescription: 'Entrez votre e-mail pour recevoir un lien de réinitialisation',
+        resetPasswordTitle: 'Réinitialiser le mot de passe',
+        resetPasswordDescription: 'Veuillez entrer votre nouveau mot de passe ci-dessous',
+        confirmPasswordTitle: 'Confirmez votre mot de passe',
+        confirmPasswordDescription: "Ceci est une zone sécurisée de l'application. Veuillez confirmer votre mot de passe avant de continuer.",
+        logIn: 'Se connecter',
+        loginDescription: 'Entrez votre e-mail et votre mot de passe ci-dessous pour vous connecter',
+        alreadyHaveAccount: 'Vous avez déjà un compte ?',
+        dontHaveAccount: "Vous n'avez pas de compte ?",
+        verifyEmailDescription: 'Veuillez vérifier votre adresse e-mail en cliquant sur le lien que nous venons de vous envoyer.',
+        verificationLinkSent: "Un nouveau lien de vérification a été envoyé à l'adresse e-mail que vous avez fournie lors de l'inscription.",
+        resendVerificationEmail: "Renvoyer l'e-mail de vérification",
+    },
+
+    // Settings
+    settings: {
+        appearance: {
+            title: 'Apparence',
+            description: "Mettez à jour les paramètres d'apparence de votre compte",
+            light: 'Clair',
+            dark: 'Sombre',
+            system: 'Système',
+        },
+        language: {
+            title: 'Langue',
+            description: "Choisissez votre langue préférée pour l'interface de l'application",
+            currentLanguage: 'Langue actuelle',
+        },
+        profile: {
+            title: 'Profil',
+            description: 'Mettez à jour les informations de profil de votre compte',
+            profileInformation: 'Informations du profil',
+            profileInformationDescription: 'Mettez à jour votre nom et votre adresse e-mail',
+        },
+        password: {
+            title: 'Mot de passe',
+            description: 'Assurez-vous que votre compte utilise un mot de passe long et aléatoire pour rester sécurisé',
+            updatePassword: 'Mettre à jour le mot de passe',
+            savePassword: 'Enregistrer le mot de passe',
+        },
+        manageSettings: 'Gérez votre profil et les paramètres de votre compte',
+    },
+
+    // User
+    user: {
+        deleteAccount: 'Supprimer le compte',
+        deleteAccountConfirm: 'Êtes-vous sûr de vouloir supprimer votre compte ?',
+        deleteAccountWarning: 'Veuillez procéder avec prudence, cette action ne peut pas être annulée.',
+        deleteAccountDescription: 'Supprimer votre compte et toutes ses ressources',
+        deleteAccountDialogDescription:
+            'Une fois votre compte supprimé, toutes ses ressources et données seront également supprimées définitivement. Veuillez entrer votre mot de passe pour confirmer que vous souhaitez supprimer définitivement votre compte.',
+    },
+
+    // Welcome page
+    welcome: {
+        title: 'Commençons',
+        description:
+            "Laravel dispose d'une documentation merveilleuse couvrant tous les aspects du framework. Que vous soyez nouveau dans le framework ou que vous ayez une expérience antérieure avec Laravel, nous recommandons de lire toute la documentation du début à la fin.",
+        documentation: 'Documentation',
+        laracasts: 'Laracasts',
+        laravelCloud: 'Laravel Cloud',
+        readThe: 'Lisez la',
+        watchVideoTutorials: 'Regardez les tutoriels vidéo sur',
+    },
+
+    // App
+    app: {
+        name: 'Kit de démarrage Laravel',
+    },
+
+    // Form labels
+    form: {
+        name: 'Nom',
+        email: 'Adresse e-mail',
+        password: 'Mot de passe',
+        confirmPassword: 'Confirmer le mot de passe',
+        currentPassword: 'Mot de passe actuel',
+        newPassword: 'Nouveau mot de passe',
+    },
+
+    // Placeholders
+    placeholder: {
+        currentPassword: 'Mot de passe actuel',
+        newPassword: 'Nouveau mot de passe',
+        confirmPassword: 'Confirmer le mot de passe',
+        fullName: 'Nom complet',
+        emailAddress: 'Entrez votre adresse e-mail',
+        password: 'Mot de passe',
+        confirmPasswordPlaceholder: 'Confirmer le mot de passe',
+    },
+};
diff --git a/resources/js/layouts/settings/Layout.vue b/resources/js/layouts/settings/Layout.vue
index 7d0feefb..17f4a489 100644
--- a/resources/js/layouts/settings/Layout.vue
+++ b/resources/js/layouts/settings/Layout.vue
@@ -4,30 +4,37 @@ import { Button } from '@/components/ui/button';
 import { Separator } from '@/components/ui/separator';
 import { type NavItem } from '@/types';
 import { Link, usePage } from '@inertiajs/vue3';
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
 
-const sidebarNavItems: NavItem[] = [
+const sidebarNavItems = computed<NavItem[]>(() => [
     {
-        title: 'Profile',
+        title: t('settings.profile.title'),
         href: '/settings/profile',
     },
     {
-        title: 'Password',
+        title: t('settings.password.title'),
         href: '/settings/password',
     },
     {
-        title: 'Appearance',
+        title: t('settings.appearance.title'),
         href: '/settings/appearance',
     },
-];
+    {
+        title: t('settings.language.title'),
+        href: '/settings/language',
+    },
+]);
 
 const page = usePage();
+const { t } = useI18n();
 
 const currentPath = page.props.ziggy?.location ? new URL(page.props.ziggy.location).pathname : '';
 </script>
 
 <template>
     <div class="px-4 py-6">
-        <Heading title="Settings" description="Manage your profile and account settings" />
+        <Heading :title="t('nav.settings')" :description="t('settings.manageSettings')" />
 
         <div class="flex flex-col lg:flex-row lg:space-x-12">
             <aside class="w-full max-w-xl lg:w-48">
diff --git a/resources/js/lib/utils.ts b/resources/js/lib/utils.ts
index 3877c89f..dd53ea89 100644
--- a/resources/js/lib/utils.ts
+++ b/resources/js/lib/utils.ts
@@ -1,4 +1,4 @@
-import { clsx, type ClassValue } from 'clsx';
+import { type ClassValue, clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 
 export function cn(...inputs: ClassValue[]) {
diff --git a/resources/js/pages/Dashboard.vue b/resources/js/pages/Dashboard.vue
index 8be0635e..6f49c2af 100644
--- a/resources/js/pages/Dashboard.vue
+++ b/resources/js/pages/Dashboard.vue
@@ -2,21 +2,25 @@
 import AppLayout from '@/layouts/AppLayout.vue';
 import { type BreadcrumbItem } from '@/types';
 import { Head } from '@inertiajs/vue3';
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
 import PlaceholderPattern from '../components/PlaceholderPattern.vue';
 
-const breadcrumbs: BreadcrumbItem[] = [
+const { t } = useI18n();
+
+const breadcrumbs = computed<BreadcrumbItem[]>(() => [
     {
-        title: 'Dashboard',
+        title: t('nav.dashboard'),
         href: '/dashboard',
     },
-];
+]);
 </script>
 
 <template>
-    <Head title="Dashboard" />
+    <Head :title="t('nav.dashboard')" />
 
     <AppLayout :breadcrumbs="breadcrumbs">
-        <div class="flex h-full flex-1 flex-col gap-4 rounded-xl p-4 overflow-x-auto">
+        <div class="flex h-full flex-1 flex-col gap-4 overflow-x-auto rounded-xl p-4">
             <div class="grid auto-rows-min gap-4 md:grid-cols-3">
                 <div class="relative aspect-video overflow-hidden rounded-xl border border-sidebar-border/70 dark:border-sidebar-border">
                     <PlaceholderPattern />
diff --git a/resources/js/pages/Welcome.vue b/resources/js/pages/Welcome.vue
index 2152d731..c0addd79 100644
--- a/resources/js/pages/Welcome.vue
+++ b/resources/js/pages/Welcome.vue
@@ -1,9 +1,13 @@
 <script setup lang="ts">
+import LanguageSwitcher from '@/components/LanguageSwitcher.vue';
 import { Head, Link } from '@inertiajs/vue3';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 </script>
 
 <template>
-    <Head title="Welcome">
+    <Head :title="t('welcome.title')">
         <link rel="preconnect" href="https://rsms.me/" />
         <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
     </Head>
@@ -15,22 +19,23 @@ import { Head, Link } from '@inertiajs/vue3';
                     :href="route('dashboard')"
                     class="inline-block rounded-sm border border-[#19140035] px-5 py-1.5 text-sm leading-normal text-[#1b1b18] hover:border-[#1915014a] dark:border-[#3E3E3A] dark:text-[#EDEDEC] dark:hover:border-[#62605b]"
                 >
-                    Dashboard
+                    {{ t('nav.dashboard') }}
                 </Link>
                 <template v-else>
                     <Link
                         :href="route('login')"
                         class="inline-block rounded-sm border border-transparent px-5 py-1.5 text-sm leading-normal text-[#1b1b18] hover:border-[#19140035] dark:text-[#EDEDEC] dark:hover:border-[#3E3E3A]"
                     >
-                        Log in
+                        {{ t('auth.login') }}
                     </Link>
                     <Link
                         :href="route('register')"
                         class="inline-block rounded-sm border border-[#19140035] px-5 py-1.5 text-sm leading-normal text-[#1b1b18] hover:border-[#1915014a] dark:border-[#3E3E3A] dark:text-[#EDEDEC] dark:hover:border-[#62605b]"
                     >
-                        Register
+                        {{ t('auth.register') }}
                     </Link>
                 </template>
+                <LanguageSwitcher />
             </nav>
         </header>
         <div class="flex w-full items-center justify-center opacity-100 transition-opacity duration-750 lg:grow starting:opacity-0">
@@ -38,9 +43,9 @@ import { Head, Link } from '@inertiajs/vue3';
                 <div
                     class="flex-1 rounded-br-lg rounded-bl-lg bg-white p-6 pb-12 text-[13px] leading-[20px] shadow-[inset_0px_0px_0px_1px_rgba(26,26,0,0.16)] lg:rounded-tl-lg lg:rounded-br-none lg:p-20 dark:bg-[#161615] dark:text-[#EDEDEC] dark:shadow-[inset_0px_0px_0px_1px_#fffaed2d]"
                 >
-                    <h1 class="mb-1 font-medium">Let's get started</h1>
+                    <h1 class="mb-1 font-medium">{{ t('welcome.title') }}</h1>
                     <p class="mb-2 text-[#706f6c] dark:text-[#A1A09A]">
-                        Laravel has an incredibly rich ecosystem. <br />We suggest starting with the following.
+                        {{ t('welcome.description') }}
                     </p>
                     <ul class="mb-4 flex flex-col lg:mb-6">
                         <li
@@ -54,13 +59,13 @@ import { Head, Link } from '@inertiajs/vue3';
                                 </span>
                             </span>
                             <span>
-                                Read the
+                                {{ t('welcome.readThe') }}
                                 <a
                                     href="https://laravel.com/docs"
                                     target="_blank"
                                     class="ml-1 inline-flex items-center space-x-1 font-medium text-[#f53003] underline underline-offset-4 dark:text-[#FF4433]"
                                 >
-                                    <span>Documentation</span>
+                                    <span>{{ t('welcome.documentation') }}</span>
                                     <svg
                                         width="{10}"
                                         height="{11}"
@@ -85,13 +90,13 @@ import { Head, Link } from '@inertiajs/vue3';
                                 </span>
                             </span>
                             <span>
-                                Watch video tutorials at
+                                {{ t('welcome.watchVideoTutorials') }}
                                 <a
                                     href="https://laracasts.com"
                                     target="_blank"
                                     class="ml-1 inline-flex items-center space-x-1 font-medium text-[#f53003] underline underline-offset-4 dark:text-[#FF4433]"
                                 >
-                                    <span>Laracasts</span>
+                                    <span>{{ t('welcome.laracasts') }}</span>
                                     <svg
                                         width="{10}"
                                         height="{11}"
@@ -113,7 +118,7 @@ import { Head, Link } from '@inertiajs/vue3';
                                 target="_blank"
                                 class="inline-block rounded-sm border border-black bg-[#1b1b18] px-5 py-1.5 text-sm leading-normal text-white hover:border-black hover:bg-black dark:border-[#eeeeec] dark:bg-[#eeeeec] dark:text-[#1C1C1A] dark:hover:border-white dark:hover:bg-white"
                             >
-                                Deploy now
+                                {{ t('welcome.laravelCloud') }}
                             </a>
                         </li>
                     </ul>
diff --git a/resources/js/pages/auth/ConfirmPassword.vue b/resources/js/pages/auth/ConfirmPassword.vue
index 6d538023..4e4235f6 100644
--- a/resources/js/pages/auth/ConfirmPassword.vue
+++ b/resources/js/pages/auth/ConfirmPassword.vue
@@ -6,6 +6,9 @@ import { Label } from '@/components/ui/label';
 import AuthLayout from '@/layouts/AuthLayout.vue';
 import { Head, useForm } from '@inertiajs/vue3';
 import { LoaderCircle } from 'lucide-vue-next';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 const form = useForm({
     password: '',
@@ -21,13 +24,13 @@ const submit = () => {
 </script>
 
 <template>
-    <AuthLayout title="Confirm your password" description="This is a secure area of the application. Please confirm your password before continuing.">
-        <Head title="Confirm password" />
+    <AuthLayout :title="t('auth.confirmPasswordTitle')" :description="t('auth.confirmPasswordDescription')">
+        <Head :title="t('auth.confirmPasswordTitle')" />
 
         <form @submit.prevent="submit">
             <div class="space-y-6">
                 <div class="grid gap-2">
-                    <Label htmlFor="password">Password</Label>
+                    <Label htmlFor="password">{{ t('auth.password') }}</Label>
                     <Input
                         id="password"
                         type="password"
@@ -44,7 +47,7 @@ const submit = () => {
                 <div class="flex items-center">
                     <Button class="w-full" :disabled="form.processing">
                         <LoaderCircle v-if="form.processing" class="h-4 w-4 animate-spin" />
-                        Confirm Password
+                        {{ t('auth.confirmPasswordTitle') }}
                     </Button>
                 </div>
             </div>
diff --git a/resources/js/pages/auth/ForgotPassword.vue b/resources/js/pages/auth/ForgotPassword.vue
index e992a14f..1292f463 100644
--- a/resources/js/pages/auth/ForgotPassword.vue
+++ b/resources/js/pages/auth/ForgotPassword.vue
@@ -7,11 +7,14 @@ import { Label } from '@/components/ui/label';
 import AuthLayout from '@/layouts/AuthLayout.vue';
 import { Head, useForm } from '@inertiajs/vue3';
 import { LoaderCircle } from 'lucide-vue-next';
+import { useI18n } from 'vue-i18n';
 
 defineProps<{
     status?: string;
 }>();
 
+const { t } = useI18n();
+
 const form = useForm({
     email: '',
 });
@@ -22,8 +25,8 @@ const submit = () => {
 </script>
 
 <template>
-    <AuthLayout title="Forgot password" description="Enter your email to receive a password reset link">
-        <Head title="Forgot password" />
+    <AuthLayout :title="t('auth.forgotPasswordTitle')" :description="t('auth.forgotPasswordDescription')">
+        <Head :title="t('auth.forgotPasswordTitle')" />
 
         <div v-if="status" class="mb-4 text-center text-sm font-medium text-green-600">
             {{ status }}
@@ -32,22 +35,30 @@ const submit = () => {
         <div class="space-y-6">
             <form @submit.prevent="submit">
                 <div class="grid gap-2">
-                    <Label for="email">Email address</Label>
-                    <Input id="email" type="email" name="email" autocomplete="off" v-model="form.email" autofocus placeholder="email@example.com" />
+                    <Label for="email">{{ t('auth.email') }}</Label>
+                    <Input
+                        id="email"
+                        type="email"
+                        name="email"
+                        autocomplete="off"
+                        v-model="form.email"
+                        autofocus
+                        :placeholder="t('placeholder.emailAddress')"
+                    />
                     <InputError :message="form.errors.email" />
                 </div>
 
                 <div class="my-6 flex items-center justify-start">
                     <Button class="w-full" :disabled="form.processing">
                         <LoaderCircle v-if="form.processing" class="h-4 w-4 animate-spin" />
-                        Email password reset link
+                        {{ t('auth.resetPassword') }}
                     </Button>
                 </div>
             </form>
 
             <div class="space-x-1 text-center text-sm text-muted-foreground">
-                <span>Or, return to</span>
-                <TextLink :href="route('login')">log in</TextLink>
+                <span>{{ t('auth.orReturnTo') }}</span>
+                <TextLink :href="route('login')">{{ t('auth.logIn') }}</TextLink>
             </div>
         </div>
     </AuthLayout>
diff --git a/resources/js/pages/auth/Login.vue b/resources/js/pages/auth/Login.vue
index 02aff22b..3b22d333 100644
--- a/resources/js/pages/auth/Login.vue
+++ b/resources/js/pages/auth/Login.vue
@@ -8,12 +8,15 @@ import { Label } from '@/components/ui/label';
 import AuthBase from '@/layouts/AuthLayout.vue';
 import { Head, useForm } from '@inertiajs/vue3';
 import { LoaderCircle } from 'lucide-vue-next';
+import { useI18n } from 'vue-i18n';
 
 defineProps<{
     status?: string;
     canResetPassword: boolean;
 }>();
 
+const { t } = useI18n();
+
 const form = useForm({
     email: '',
     password: '',
@@ -28,8 +31,8 @@ const submit = () => {
 </script>
 
 <template>
-    <AuthBase title="Log in to your account" description="Enter your email and password below to log in">
-        <Head title="Log in" />
+    <AuthBase :title="t('auth.login')" :description="t('auth.loginDescription')">
+        <Head :title="t('auth.login')" />
 
         <div v-if="status" class="mb-4 text-center text-sm font-medium text-green-600">
             {{ status }}
@@ -38,7 +41,7 @@ const submit = () => {
         <form @submit.prevent="submit" class="flex flex-col gap-6">
             <div class="grid gap-6">
                 <div class="grid gap-2">
-                    <Label for="email">Email address</Label>
+                    <Label for="email">{{ t('auth.email') }}</Label>
                     <Input
                         id="email"
                         type="email"
@@ -54,9 +57,9 @@ const submit = () => {
 
                 <div class="grid gap-2">
                     <div class="flex items-center justify-between">
-                        <Label for="password">Password</Label>
+                        <Label for="password">{{ t('auth.password') }}</Label>
                         <TextLink v-if="canResetPassword" :href="route('password.request')" class="text-sm" :tabindex="5">
-                            Forgot password?
+                            {{ t('auth.forgotPassword') }}
                         </TextLink>
                     </div>
                     <Input
@@ -66,7 +69,7 @@ const submit = () => {
                         :tabindex="2"
                         autocomplete="current-password"
                         v-model="form.password"
-                        placeholder="Password"
+                        :placeholder="t('auth.password')"
                     />
                     <InputError :message="form.errors.password" />
                 </div>
@@ -74,19 +77,19 @@ const submit = () => {
                 <div class="flex items-center justify-between">
                     <Label for="remember" class="flex items-center space-x-3">
                         <Checkbox id="remember" v-model="form.remember" :tabindex="3" />
-                        <span>Remember me</span>
+                        <span>{{ t('auth.rememberMe') }}</span>
                     </Label>
                 </div>
 
                 <Button type="submit" class="mt-4 w-full" :tabindex="4" :disabled="form.processing">
                     <LoaderCircle v-if="form.processing" class="h-4 w-4 animate-spin" />
-                    Log in
+                    {{ t('auth.login') }}
                 </Button>
             </div>
 
             <div class="text-center text-sm text-muted-foreground">
-                Don't have an account?
-                <TextLink :href="route('register')" :tabindex="5">Sign up</TextLink>
+                {{ t('auth.dontHaveAccount') }}
+                <TextLink :href="route('register')" :tabindex="5">{{ t('auth.register') }}</TextLink>
             </div>
         </form>
     </AuthBase>
diff --git a/resources/js/pages/auth/Register.vue b/resources/js/pages/auth/Register.vue
index c0a757d0..95c0155b 100644
--- a/resources/js/pages/auth/Register.vue
+++ b/resources/js/pages/auth/Register.vue
@@ -7,6 +7,9 @@ import { Label } from '@/components/ui/label';
 import AuthBase from '@/layouts/AuthLayout.vue';
 import { Head, useForm } from '@inertiajs/vue3';
 import { LoaderCircle } from 'lucide-vue-next';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 const form = useForm({
     name: '',
@@ -23,25 +26,42 @@ const submit = () => {
 </script>
 
 <template>
-    <AuthBase title="Create an account" description="Enter your details below to create your account">
-        <Head title="Register" />
+    <AuthBase :title="t('auth.createAccount')" :description="t('auth.createAccountDescription')">
+        <Head :title="t('auth.register')" />
 
         <form @submit.prevent="submit" class="flex flex-col gap-6">
             <div class="grid gap-6">
                 <div class="grid gap-2">
-                    <Label for="name">Name</Label>
-                    <Input id="name" type="text" required autofocus :tabindex="1" autocomplete="name" v-model="form.name" placeholder="Full name" />
+                    <Label for="name">{{ t('form.name') }}</Label>
+                    <Input
+                        id="name"
+                        type="text"
+                        required
+                        autofocus
+                        :tabindex="1"
+                        autocomplete="name"
+                        v-model="form.name"
+                        :placeholder="t('placeholder.fullName')"
+                    />
                     <InputError :message="form.errors.name" />
                 </div>
 
                 <div class="grid gap-2">
-                    <Label for="email">Email address</Label>
-                    <Input id="email" type="email" required :tabindex="2" autocomplete="email" v-model="form.email" placeholder="email@example.com" />
+                    <Label for="email">{{ t('auth.email') }}</Label>
+                    <Input
+                        id="email"
+                        type="email"
+                        required
+                        :tabindex="2"
+                        autocomplete="email"
+                        v-model="form.email"
+                        :placeholder="t('placeholder.emailAddress')"
+                    />
                     <InputError :message="form.errors.email" />
                 </div>
 
                 <div class="grid gap-2">
-                    <Label for="password">Password</Label>
+                    <Label for="password">{{ t('auth.password') }}</Label>
                     <Input
                         id="password"
                         type="password"
@@ -49,13 +69,13 @@ const submit = () => {
                         :tabindex="3"
                         autocomplete="new-password"
                         v-model="form.password"
-                        placeholder="Password"
+                        :placeholder="t('placeholder.password')"
                     />
                     <InputError :message="form.errors.password" />
                 </div>
 
                 <div class="grid gap-2">
-                    <Label for="password_confirmation">Confirm password</Label>
+                    <Label for="password_confirmation">{{ t('auth.confirmPassword') }}</Label>
                     <Input
                         id="password_confirmation"
                         type="password"
@@ -63,20 +83,20 @@ const submit = () => {
                         :tabindex="4"
                         autocomplete="new-password"
                         v-model="form.password_confirmation"
-                        placeholder="Confirm password"
+                        :placeholder="t('placeholder.confirmPasswordPlaceholder')"
                     />
                     <InputError :message="form.errors.password_confirmation" />
                 </div>
 
                 <Button type="submit" class="mt-2 w-full" tabindex="5" :disabled="form.processing">
                     <LoaderCircle v-if="form.processing" class="h-4 w-4 animate-spin" />
-                    Create account
+                    {{ t('auth.createAccount') }}
                 </Button>
             </div>
 
             <div class="text-center text-sm text-muted-foreground">
-                Already have an account?
-                <TextLink :href="route('login')" class="underline underline-offset-4" :tabindex="6">Log in</TextLink>
+                {{ t('auth.alreadyHaveAccount') }}
+                <TextLink :href="route('login')" class="underline underline-offset-4" :tabindex="6">{{ t('auth.logIn') }}</TextLink>
             </div>
         </form>
     </AuthBase>
diff --git a/resources/js/pages/auth/ResetPassword.vue b/resources/js/pages/auth/ResetPassword.vue
index 1bca6974..02aa62ae 100644
--- a/resources/js/pages/auth/ResetPassword.vue
+++ b/resources/js/pages/auth/ResetPassword.vue
@@ -6,6 +6,7 @@ import { Label } from '@/components/ui/label';
 import AuthLayout from '@/layouts/AuthLayout.vue';
 import { Head, useForm } from '@inertiajs/vue3';
 import { LoaderCircle } from 'lucide-vue-next';
+import { useI18n } from 'vue-i18n';
 
 interface Props {
     token: string;
@@ -14,6 +15,8 @@ interface Props {
 
 const props = defineProps<Props>();
 
+const { t } = useI18n();
+
 const form = useForm({
     token: props.token,
     email: props.email,
@@ -31,19 +34,19 @@ const submit = () => {
 </script>
 
 <template>
-    <AuthLayout title="Reset password" description="Please enter your new password below">
-        <Head title="Reset password" />
+    <AuthLayout :title="t('auth.resetPasswordTitle')" :description="t('auth.resetPasswordDescription')">
+        <Head :title="t('auth.resetPasswordTitle')" />
 
         <form @submit.prevent="submit">
             <div class="grid gap-6">
                 <div class="grid gap-2">
-                    <Label for="email">Email</Label>
+                    <Label for="email">{{ t('auth.email') }}</Label>
                     <Input id="email" type="email" name="email" autocomplete="email" v-model="form.email" class="mt-1 block w-full" readonly />
                     <InputError :message="form.errors.email" class="mt-2" />
                 </div>
 
                 <div class="grid gap-2">
-                    <Label for="password">Password</Label>
+                    <Label for="password">{{ t('auth.password') }}</Label>
                     <Input
                         id="password"
                         type="password"
@@ -52,13 +55,13 @@ const submit = () => {
                         v-model="form.password"
                         class="mt-1 block w-full"
                         autofocus
-                        placeholder="Password"
+                        :placeholder="t('placeholder.password')"
                     />
                     <InputError :message="form.errors.password" />
                 </div>
 
                 <div class="grid gap-2">
-                    <Label for="password_confirmation"> Confirm Password </Label>
+                    <Label for="password_confirmation"> {{ t('auth.confirmPassword') }} </Label>
                     <Input
                         id="password_confirmation"
                         type="password"
@@ -66,14 +69,14 @@ const submit = () => {
                         autocomplete="new-password"
                         v-model="form.password_confirmation"
                         class="mt-1 block w-full"
-                        placeholder="Confirm password"
+                        :placeholder="t('placeholder.confirmPasswordPlaceholder')"
                     />
                     <InputError :message="form.errors.password_confirmation" />
                 </div>
 
                 <Button type="submit" class="mt-4 w-full" :disabled="form.processing">
                     <LoaderCircle v-if="form.processing" class="h-4 w-4 animate-spin" />
-                    Reset password
+                    {{ t('auth.resetPassword') }}
                 </Button>
             </div>
         </form>
diff --git a/resources/js/pages/auth/VerifyEmail.vue b/resources/js/pages/auth/VerifyEmail.vue
index dad75f73..38ba7b2e 100644
--- a/resources/js/pages/auth/VerifyEmail.vue
+++ b/resources/js/pages/auth/VerifyEmail.vue
@@ -4,11 +4,14 @@ import { Button } from '@/components/ui/button';
 import AuthLayout from '@/layouts/AuthLayout.vue';
 import { Head, useForm } from '@inertiajs/vue3';
 import { LoaderCircle } from 'lucide-vue-next';
+import { useI18n } from 'vue-i18n';
 
 defineProps<{
     status?: string;
 }>();
 
+const { t } = useI18n();
+
 const form = useForm({});
 
 const submit = () => {
@@ -17,20 +20,20 @@ const submit = () => {
 </script>
 
 <template>
-    <AuthLayout title="Verify email" description="Please verify your email address by clicking on the link we just emailed to you.">
-        <Head title="Email verification" />
+    <AuthLayout :title="t('auth.verifyEmail')" :description="t('auth.verifyEmailDescription')">
+        <Head :title="t('auth.verifyEmail')" />
 
         <div v-if="status === 'verification-link-sent'" class="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.
+            {{ t('auth.verificationLinkSent') }}
         </div>
 
         <form @submit.prevent="submit" class="space-y-6 text-center">
             <Button :disabled="form.processing" variant="secondary">
                 <LoaderCircle v-if="form.processing" class="h-4 w-4 animate-spin" />
-                Resend verification email
+                {{ t('auth.resendVerificationEmail') }}
             </Button>
 
-            <TextLink :href="route('logout')" method="post" as="button" class="mx-auto block text-sm"> Log out </TextLink>
+            <TextLink :href="route('logout')" method="post" as="button" class="mx-auto block text-sm"> {{ t('auth.logout') }} </TextLink>
         </form>
     </AuthLayout>
 </template>
diff --git a/resources/js/pages/settings/Appearance.vue b/resources/js/pages/settings/Appearance.vue
index 7dacd589..5187b5f1 100644
--- a/resources/js/pages/settings/Appearance.vue
+++ b/resources/js/pages/settings/Appearance.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { Head } from '@inertiajs/vue3';
+import { useI18n } from 'vue-i18n';
 
 import AppearanceTabs from '@/components/AppearanceTabs.vue';
 import HeadingSmall from '@/components/HeadingSmall.vue';
@@ -8,9 +9,11 @@ import { type BreadcrumbItem } from '@/types';
 import AppLayout from '@/layouts/AppLayout.vue';
 import SettingsLayout from '@/layouts/settings/Layout.vue';
 
+const { t } = useI18n();
+
 const breadcrumbItems: BreadcrumbItem[] = [
     {
-        title: 'Appearance settings',
+        title: t('settings.appearance.title'),
         href: '/settings/appearance',
     },
 ];
@@ -18,12 +21,17 @@ const breadcrumbItems: BreadcrumbItem[] = [
 
 <template>
     <AppLayout :breadcrumbs="breadcrumbItems">
-        <Head title="Appearance settings" />
+        <Head :title="t('settings.appearance.title')" />
 
         <SettingsLayout>
             <div class="space-y-6">
-                <HeadingSmall title="Appearance settings" description="Update your account's appearance settings" />
+                <HeadingSmall :title="t('settings.appearance.title')" :description="t('settings.appearance.description')" />
                 <AppearanceTabs />
+
+                <!-- Theme preview or additional appearance settings can go here -->
+                <div class="text-sm text-muted-foreground">
+                    {{ t('settings.appearance.description') }}
+                </div>
             </div>
         </SettingsLayout>
     </AppLayout>
diff --git a/resources/js/pages/settings/Language.vue b/resources/js/pages/settings/Language.vue
new file mode 100644
index 00000000..4c64dff6
--- /dev/null
+++ b/resources/js/pages/settings/Language.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { Head } from '@inertiajs/vue3';
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import HeadingSmall from '@/components/HeadingSmall.vue';
+import LanguageTab from '@/components/LanguageTab.vue';
+import { type BreadcrumbItem } from '@/types';
+
+import AppLayout from '@/layouts/AppLayout.vue';
+import SettingsLayout from '@/layouts/settings/Layout.vue';
+
+const { t } = useI18n();
+
+const breadcrumbItems = computed<BreadcrumbItem[]>(() => [
+    {
+        title: t('settings.language.title'),
+        href: '/settings/language',
+    },
+]);
+</script>
+
+<template>
+    <AppLayout :breadcrumbs="breadcrumbItems">
+        <Head :title="t('settings.language.title')" />
+
+        <SettingsLayout>
+            <div class="space-y-6">
+                <HeadingSmall :title="t('settings.language.title')" :description="t('settings.language.description')" />
+                <LanguageTab />
+            </div>
+        </SettingsLayout>
+    </AppLayout>
+</template>
diff --git a/resources/js/pages/settings/Password.vue b/resources/js/pages/settings/Password.vue
index f4c35c11..381c9756 100644
--- a/resources/js/pages/settings/Password.vue
+++ b/resources/js/pages/settings/Password.vue
@@ -3,7 +3,8 @@ import InputError from '@/components/InputError.vue';
 import AppLayout from '@/layouts/AppLayout.vue';
 import SettingsLayout from '@/layouts/settings/Layout.vue';
 import { Head, useForm } from '@inertiajs/vue3';
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 import HeadingSmall from '@/components/HeadingSmall.vue';
 import { Button } from '@/components/ui/button';
@@ -11,12 +12,14 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { type BreadcrumbItem } from '@/types';
 
-const breadcrumbItems: BreadcrumbItem[] = [
+const { t } = useI18n();
+
+const breadcrumbItems = computed<BreadcrumbItem[]>(() => [
     {
-        title: 'Password settings',
+        title: t('settings.password.title'),
         href: '/settings/password',
     },
-];
+]);
 
 const passwordInput = ref<HTMLInputElement | null>(null);
 const currentPasswordInput = ref<HTMLInputElement | null>(null);
@@ -52,15 +55,15 @@ const updatePassword = () => {
 
 <template>
     <AppLayout :breadcrumbs="breadcrumbItems">
-        <Head title="Password settings" />
+        <Head :title="t('settings.password.title')" />
 
         <SettingsLayout>
             <div class="space-y-6">
-                <HeadingSmall title="Update password" description="Ensure your account is using a long, random password to stay secure" />
+                <HeadingSmall :title="t('settings.password.updatePassword')" :description="t('settings.password.description')" />
 
                 <form @submit.prevent="updatePassword" class="space-y-6">
                     <div class="grid gap-2">
-                        <Label for="current_password">Current password</Label>
+                        <Label for="current_password">{{ t('auth.currentPassword') }}</Label>
                         <Input
                             id="current_password"
                             ref="currentPasswordInput"
@@ -68,13 +71,13 @@ const updatePassword = () => {
                             type="password"
                             class="mt-1 block w-full"
                             autocomplete="current-password"
-                            placeholder="Current password"
+                            :placeholder="t('placeholder.currentPassword')"
                         />
                         <InputError :message="form.errors.current_password" />
                     </div>
 
                     <div class="grid gap-2">
-                        <Label for="password">New password</Label>
+                        <Label for="password">{{ t('auth.newPassword') }}</Label>
                         <Input
                             id="password"
                             ref="passwordInput"
@@ -82,26 +85,26 @@ const updatePassword = () => {
                             type="password"
                             class="mt-1 block w-full"
                             autocomplete="new-password"
-                            placeholder="New password"
+                            :placeholder="t('placeholder.newPassword')"
                         />
                         <InputError :message="form.errors.password" />
                     </div>
 
                     <div class="grid gap-2">
-                        <Label for="password_confirmation">Confirm password</Label>
+                        <Label for="password_confirmation">{{ t('auth.confirmPassword') }}</Label>
                         <Input
                             id="password_confirmation"
                             v-model="form.password_confirmation"
                             type="password"
                             class="mt-1 block w-full"
                             autocomplete="new-password"
-                            placeholder="Confirm password"
+                            :placeholder="t('placeholder.confirmPassword')"
                         />
                         <InputError :message="form.errors.password_confirmation" />
                     </div>
 
                     <div class="flex items-center gap-4">
-                        <Button :disabled="form.processing">Save password</Button>
+                        <Button :disabled="form.processing">{{ t('settings.password.savePassword') }}</Button>
 
                         <Transition
                             enter-active-class="transition ease-in-out"
@@ -109,7 +112,7 @@ const updatePassword = () => {
                             leave-active-class="transition ease-in-out"
                             leave-to-class="opacity-0"
                         >
-                            <p v-show="form.recentlySuccessful" class="text-sm text-neutral-600">Saved.</p>
+                            <p v-show="form.recentlySuccessful" class="text-sm text-neutral-600">{{ t('common.saved') }}</p>
                         </Transition>
                     </div>
                 </form>
diff --git a/resources/js/pages/settings/Profile.vue b/resources/js/pages/settings/Profile.vue
index d923c9e4..b8fb64ef 100644
--- a/resources/js/pages/settings/Profile.vue
+++ b/resources/js/pages/settings/Profile.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { Head, Link, useForm, usePage } from '@inertiajs/vue3';
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 import DeleteUser from '@/components/DeleteUser.vue';
 import HeadingSmall from '@/components/HeadingSmall.vue';
@@ -18,12 +20,14 @@ interface Props {
 
 defineProps<Props>();
 
-const breadcrumbItems: BreadcrumbItem[] = [
+const { t } = useI18n();
+
+const breadcrumbItems = computed<BreadcrumbItem[]>(() => [
     {
-        title: 'Profile settings',
+        title: t('settings.profile.title'),
         href: '/settings/profile',
     },
-];
+]);
 
 const page = usePage();
 const user = page.props.auth.user as User;
@@ -42,21 +46,28 @@ const submit = () => {
 
 <template>
     <AppLayout :breadcrumbs="breadcrumbItems">
-        <Head title="Profile settings" />
+        <Head :title="t('settings.profile.title')" />
 
         <SettingsLayout>
             <div class="flex flex-col space-y-6">
-                <HeadingSmall title="Profile information" description="Update your name and email address" />
+                <HeadingSmall :title="t('settings.profile.profileInformation')" :description="t('settings.profile.profileInformationDescription')" />
 
                 <form @submit.prevent="submit" class="space-y-6">
                     <div class="grid gap-2">
-                        <Label for="name">Name</Label>
-                        <Input id="name" class="mt-1 block w-full" v-model="form.name" required autocomplete="name" placeholder="Full name" />
+                        <Label for="name">{{ t('form.name') }}</Label>
+                        <Input
+                            id="name"
+                            class="mt-1 block w-full"
+                            v-model="form.name"
+                            required
+                            autocomplete="name"
+                            :placeholder="t('placeholder.fullName')"
+                        />
                         <InputError class="mt-2" :message="form.errors.name" />
                     </div>
 
                     <div class="grid gap-2">
-                        <Label for="email">Email address</Label>
+                        <Label for="email">{{ t('auth.email') }}</Label>
                         <Input
                             id="email"
                             type="email"
@@ -64,7 +75,7 @@ const submit = () => {
                             v-model="form.email"
                             required
                             autocomplete="username"
-                            placeholder="Email address"
+                            :placeholder="t('placeholder.emailAddress')"
                         />
                         <InputError class="mt-2" :message="form.errors.email" />
                     </div>
@@ -88,7 +99,7 @@ const submit = () => {
                     </div>
 
                     <div class="flex items-center gap-4">
-                        <Button :disabled="form.processing">Save</Button>
+                        <Button :disabled="form.processing">{{ t('common.save') }}</Button>
 
                         <Transition
                             enter-active-class="transition ease-in-out"
@@ -96,7 +107,7 @@ const submit = () => {
                             leave-active-class="transition ease-in-out"
                             leave-to-class="opacity-0"
                         >
-                            <p v-show="form.recentlySuccessful" class="text-sm text-neutral-600">Saved.</p>
+                            <p v-show="form.recentlySuccessful" class="text-sm text-neutral-600">{{ t('common.saved') }}</p>
                         </Transition>
                     </div>
                 </form>
diff --git a/resources/js/ssr.ts b/resources/js/ssr.ts
index 8fcdebea..14448028 100644
--- a/resources/js/ssr.ts
+++ b/resources/js/ssr.ts
@@ -1,26 +1,27 @@
 import { createInertiaApp } from '@inertiajs/vue3';
 import createServer from '@inertiajs/vue3/server';
-import { renderToString } from 'vue/server-renderer';
 import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
 import { createSSRApp, DefineComponent, h } from 'vue';
+import { renderToString } from 'vue/server-renderer';
 import { ZiggyVue } from 'ziggy-js';
 
 const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
 
-createServer((page) =>
-    createInertiaApp({
-        page,
-        render: renderToString,
-        title: (title) => title ? `${title} - ${appName}` : appName,
-        resolve: resolvePage,
-        setup: ({ App, props, plugin }) =>
-            createSSRApp({ render: () => h(App, props) })
-                .use(plugin)
-                .use(ZiggyVue, {
-                    ...page.props.ziggy,
-                    location: new URL(page.props.ziggy.location),
-                }),
-    }),
+createServer(
+    (page) =>
+        createInertiaApp({
+            page,
+            render: renderToString,
+            title: (title) => (title ? `${title} - ${appName}` : appName),
+            resolve: resolvePage,
+            setup: ({ App, props, plugin }) =>
+                createSSRApp({ render: () => h(App, props) })
+                    .use(plugin)
+                    .use(ZiggyVue, {
+                        ...page.props.ziggy,
+                        location: new URL(page.props.ziggy.location),
+                    }),
+        }),
     { cluster: true },
 );
 
diff --git a/resources/js/types/index.d.ts b/resources/js/types/index.d.ts
index 0da9567c..186bc818 100644
--- a/resources/js/types/index.d.ts
+++ b/resources/js/types/index.d.ts
@@ -23,12 +23,14 @@ export type AppPageProps<T extends Record<string, unknown> = Record<string, unkn
     auth: Auth;
     ziggy: Config & { location: string };
     sidebarOpen: boolean;
+    locale: string;
 };
 
 export interface User {
     id: number;
     name: string;
     email: string;
+    locale?: string;
     avatar?: string;
     email_verified_at: string | null;
     created_at: string;
diff --git a/resources/js/types/vue.d.ts b/resources/js/types/vue.d.ts
new file mode 100644
index 00000000..524f5934
--- /dev/null
+++ b/resources/js/types/vue.d.ts
@@ -0,0 +1,5 @@
+declare module '*.vue' {
+    import type { DefineComponent } from 'vue';
+    const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, any>;
+    export default component;
+}
diff --git a/resources/lang/en/auth.php b/resources/lang/en/auth.php
new file mode 100644
index 00000000..6598e2c0
--- /dev/null
+++ b/resources/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/resources/lang/en/messages.php b/resources/lang/en/messages.php
new file mode 100644
index 00000000..62956110
--- /dev/null
+++ b/resources/lang/en/messages.php
@@ -0,0 +1,19 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | General Application Messages
+    |--------------------------------------------------------------------------
+    |
+    | The following language lines are used for general application messages
+    | such as success messages, status updates, and other notifications.
+    |
+    */
+
+    'language_updated' => 'Language updated successfully.',
+    'profile_updated' => 'Profile updated successfully.',
+    'password_updated' => 'Password updated successfully.',
+
+];
diff --git a/resources/lang/en/passwords.php b/resources/lang/en/passwords.php
new file mode 100644
index 00000000..b7acfc1f
--- /dev/null
+++ b/resources/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
+    | has failed, such as for an invalid token or invalid new password.
+    |
+    */
+
+    '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/resources/lang/en/validation.php b/resources/lang/en/validation.php
new file mode 100644
index 00000000..fad7f77c
--- /dev/null
+++ b/resources/lang/en/validation.php
@@ -0,0 +1,196 @@
+<?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 must be accepted.',
+    'accepted_if' => 'The :attribute must be accepted when :other is :value.',
+    'active_url' => 'The :attribute is not a valid URL.',
+    'after' => 'The :attribute must be a date after :date.',
+    'after_or_equal' => 'The :attribute must be a date after or equal to :date.',
+    'alpha' => 'The :attribute must only contain letters.',
+    'alpha_dash' => 'The :attribute must only contain letters, numbers, dashes and underscores.',
+    'alpha_num' => 'The :attribute must only contain letters and numbers.',
+    'array' => 'The :attribute must be an array.',
+    'ascii' => 'The :attribute must only contain single-byte alphanumeric characters and symbols.',
+    'before' => 'The :attribute must be a date before :date.',
+    'before_or_equal' => 'The :attribute must be a date before or equal to :date.',
+    'between' => [
+        'array' => 'The :attribute must have between :min and :max items.',
+        'file' => 'The :attribute must be between :min and :max kilobytes.',
+        'numeric' => 'The :attribute must be between :min and :max.',
+        'string' => 'The :attribute 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 confirmation does not match.',
+    'current_password' => 'The password is incorrect.',
+    'date' => 'The :attribute is not a valid date.',
+    'date_equals' => 'The :attribute must be a date equal to :date.',
+    'date_format' => 'The :attribute does not match the format :format.',
+    'decimal' => 'The :attribute must have :decimal decimal places.',
+    'declined' => 'The :attribute must be declined.',
+    'declined_if' => 'The :attribute must be declined when :other is :value.',
+    'different' => 'The :attribute and :other must be different.',
+    'digits' => 'The :attribute must be :digits digits.',
+    'digits_between' => 'The :attribute must be between :min and :max digits.',
+    'dimensions' => 'The :attribute has invalid image dimensions.',
+    'distinct' => 'The :attribute field has a duplicate value.',
+    'doesnt_end_with' => 'The :attribute may not end with one of the following: :values.',
+    'doesnt_start_with' => 'The :attribute may not start with one of the following: :values.',
+    'email' => 'The :attribute must be a valid email address.',
+    'ends_with' => 'The :attribute must end with one of the following: :values.',
+    'enum' => 'The selected :attribute is invalid.',
+    'exists' => 'The selected :attribute is invalid.',
+    'extensions' => 'The :attribute must have one of the following extensions: :values.',
+    'file' => 'The :attribute must be a file.',
+    'filled' => 'The :attribute field must have a value.',
+    'gt' => [
+        'array' => 'The :attribute must have more than :value items.',
+        'file' => 'The :attribute must be greater than :value kilobytes.',
+        'numeric' => 'The :attribute must be greater than :value.',
+        'string' => 'The :attribute must be greater than :value characters.',
+    ],
+    'gte' => [
+        'array' => 'The :attribute must have :value items or more.',
+        'file' => 'The :attribute must be greater than or equal to :value kilobytes.',
+        'numeric' => 'The :attribute must be greater than or equal to :value.',
+        'string' => 'The :attribute must be greater than or equal to :value characters.',
+    ],
+    'hex_color' => 'The :attribute field must be a valid hexadecimal color.',
+    'image' => 'The :attribute must be an image.',
+    'in' => 'The selected :attribute is invalid.',
+    'in_array' => 'The :attribute field does not exist in :other.',
+    'integer' => 'The :attribute must be an integer.',
+    'ip' => 'The :attribute must be a valid IP address.',
+    'ipv4' => 'The :attribute must be a valid IPv4 address.',
+    'ipv6' => 'The :attribute must be a valid IPv6 address.',
+    'json' => 'The :attribute must be a valid JSON string.',
+    'lowercase' => 'The :attribute must be lowercase.',
+    'lt' => [
+        'array' => 'The :attribute must have less than :value items.',
+        'file' => 'The :attribute must be less than :value kilobytes.',
+        'numeric' => 'The :attribute must be less than :value.',
+        'string' => 'The :attribute must be less than :value characters.',
+    ],
+    'lte' => [
+        'array' => 'The :attribute must not have more than :value items.',
+        'file' => 'The :attribute must be less than or equal to :value kilobytes.',
+        'numeric' => 'The :attribute must be less than or equal to :value.',
+        'string' => 'The :attribute must be less than or equal to :value characters.',
+    ],
+    'mac_address' => 'The :attribute must be a valid MAC address.',
+    'max' => [
+        'array' => 'The :attribute must not have more than :max items.',
+        'file' => 'The :attribute must not be greater than :max kilobytes.',
+        'numeric' => 'The :attribute must not be greater than :max.',
+        'string' => 'The :attribute must not be greater than :max characters.',
+    ],
+    'max_digits' => 'The :attribute must not have more than :max digits.',
+    'mimes' => 'The :attribute must be a file of type: :values.',
+    'mimetypes' => 'The :attribute must be a file of type: :values.',
+    'min' => [
+        'array' => 'The :attribute must have at least :min items.',
+        'file' => 'The :attribute must be at least :min kilobytes.',
+        'numeric' => 'The :attribute must be at least :min.',
+        'string' => 'The :attribute must be at least :min characters.',
+    ],
+    'min_digits' => 'The :attribute must have at least :min digits.',
+    'missing' => 'The :attribute must be missing.',
+    'missing_if' => 'The :attribute must be missing when :other is :value.',
+    'missing_unless' => 'The :attribute must be missing unless :other is :value.',
+    'missing_with' => 'The :attribute must be missing when :values is present.',
+    'missing_with_all' => 'The :attribute must be missing when :values are present.',
+    'multiple_of' => 'The :attribute must be a multiple of :value.',
+    'not_in' => 'The selected :attribute is invalid.',
+    'not_regex' => 'The :attribute format is invalid.',
+    'numeric' => 'The :attribute must be a number.',
+    'password' => [
+        'letters' => 'The :attribute must contain at least one letter.',
+        'mixed' => 'The :attribute must contain at least one uppercase and one lowercase letter.',
+        'numbers' => 'The :attribute must contain at least one number.',
+        'symbols' => 'The :attribute 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_unless' => 'The :attribute field is prohibited unless :other is in :values.',
+    'prohibits' => 'The :attribute field prohibits :other from being present.',
+    'regex' => 'The :attribute 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_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 and :other must match.',
+    'size' => [
+        'array' => 'The :attribute must contain :size items.',
+        'file' => 'The :attribute must be :size kilobytes.',
+        'numeric' => 'The :attribute must be :size.',
+        'string' => 'The :attribute must be :size characters.',
+    ],
+    'starts_with' => 'The :attribute must start with one of the following: :values.',
+    'string' => 'The :attribute must be a string.',
+    'timezone' => 'The :attribute must be a valid timezone.',
+    'unique' => 'The :attribute has already been taken.',
+    'uploaded' => 'The :attribute failed to upload.',
+    'uppercase' => 'The :attribute must be uppercase.',
+    'url' => 'The :attribute must be a valid URL.',
+    'ulid' => 'The :attribute must be a valid ULID.',
+    'uuid' => 'The :attribute must be a valid UUID.',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Custom Validation Language Lines
+    |--------------------------------------------------------------------------
+    |
+    | Here you may specify custom validation messages for attributes using the
+    | convention "rule.attribute" 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' => [
+        'name' => 'name',
+        'email' => 'email address',
+        'password' => 'password',
+        'password_confirmation' => 'password confirmation',
+    ],
+
+];
diff --git a/resources/lang/fr/auth.php b/resources/lang/fr/auth.php
new file mode 100644
index 00000000..c1a529c3
--- /dev/null
+++ b/resources/lang/fr/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' => 'Ces identifiants ne correspondent pas à nos enregistrements.',
+    'password' => 'Le mot de passe fourni est incorrect.',
+    'throttle' => 'Trop de tentatives de connexion. Veuillez réessayer dans :seconds secondes.',
+
+];
diff --git a/resources/lang/fr/messages.php b/resources/lang/fr/messages.php
new file mode 100644
index 00000000..382b37b8
--- /dev/null
+++ b/resources/lang/fr/messages.php
@@ -0,0 +1,19 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | General Application Messages
+    |--------------------------------------------------------------------------
+    |
+    | The following language lines are used for general application messages
+    | such as success messages, status updates, and other notifications.
+    |
+    */
+
+    'language_updated' => 'Langue mise à jour avec succès.',
+    'profile_updated' => 'Profil mis à jour avec succès.',
+    'password_updated' => 'Mot de passe mis à jour avec succès.',
+
+];
diff --git a/resources/lang/fr/passwords.php b/resources/lang/fr/passwords.php
new file mode 100644
index 00000000..09e1c35c
--- /dev/null
+++ b/resources/lang/fr/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
+    | has failed, such as for an invalid token or invalid new password.
+    |
+    */
+
+    'reset' => 'Votre mot de passe a été réinitialisé.',
+    'sent' => 'Nous avons envoyé votre lien de réinitialisation de mot de passe par e-mail.',
+    'throttled' => 'Veuillez patienter avant de réessayer.',
+    'token' => 'Ce jeton de réinitialisation de mot de passe est invalide.',
+    'user' => 'Nous ne trouvons pas d\'utilisateur avec cette adresse e-mail.',
+
+];
diff --git a/resources/lang/fr/validation.php b/resources/lang/fr/validation.php
new file mode 100644
index 00000000..22c1b46f
--- /dev/null
+++ b/resources/lang/fr/validation.php
@@ -0,0 +1,196 @@
+<?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' => 'Le champ :attribute doit être accepté.',
+    'accepted_if' => 'Le champ :attribute doit être accepté quand :other est :value.',
+    'active_url' => 'Le champ :attribute n\'est pas une URL valide.',
+    'after' => 'Le champ :attribute doit être une date postérieure au :date.',
+    'after_or_equal' => 'Le champ :attribute doit être une date postérieure ou égale au :date.',
+    'alpha' => 'Le champ :attribute doit contenir uniquement des lettres.',
+    'alpha_dash' => 'Le champ :attribute doit contenir uniquement des lettres, des chiffres et des tirets.',
+    'alpha_num' => 'Le champ :attribute doit contenir uniquement des chiffres et des lettres.',
+    'array' => 'Le champ :attribute doit être un tableau.',
+    'ascii' => 'Le champ :attribute ne doit contenir que des caractères alphanumériques et des symboles sur un seul octet.',
+    'before' => 'Le champ :attribute doit être une date antérieure au :date.',
+    'before_or_equal' => 'Le champ :attribute doit être une date antérieure ou égale au :date.',
+    'between' => [
+        'array' => 'Le tableau :attribute doit contenir entre :min et :max éléments.',
+        'file' => 'La taille du fichier de :attribute doit être comprise entre :min et :max kilo-octets.',
+        'numeric' => 'La valeur de :attribute doit être comprise entre :min et :max.',
+        'string' => 'Le texte :attribute doit contenir entre :min et :max caractères.',
+    ],
+    'boolean' => 'Le champ :attribute doit être vrai ou faux.',
+    'can' => 'Le champ :attribute contient une valeur non autorisée.',
+    'confirmed' => 'La confirmation du champ :attribute ne correspond pas.',
+    'current_password' => 'Le mot de passe est incorrect.',
+    'date' => 'Le champ :attribute n\'est pas une date valide.',
+    'date_equals' => 'Le champ :attribute doit être une date égale à :date.',
+    'date_format' => 'Le champ :attribute ne correspond pas au format :format.',
+    'decimal' => 'Le champ :attribute doit avoir :decimal décimales.',
+    'declined' => 'Le champ :attribute doit être refusé.',
+    'declined_if' => 'Le champ :attribute doit être refusé quand :other est :value.',
+    'different' => 'Les champs :attribute et :other doivent être différents.',
+    'digits' => 'Le champ :attribute doit contenir :digits chiffres.',
+    'digits_between' => 'Le champ :attribute doit contenir entre :min et :max chiffres.',
+    'dimensions' => 'La taille de l\'image :attribute n\'est pas valide.',
+    'distinct' => 'Le champ :attribute a une valeur en double.',
+    'doesnt_end_with' => 'Le champ :attribute ne doit pas se terminer par l\'un des éléments suivants : :values.',
+    'doesnt_start_with' => 'Le champ :attribute ne doit pas commencer par l\'un des éléments suivants : :values.',
+    'email' => 'Le champ :attribute doit être une adresse e-mail valide.',
+    'ends_with' => 'Le champ :attribute doit se terminer par l\'un des éléments suivants : :values.',
+    'enum' => 'La valeur sélectionnée :attribute est invalide.',
+    'exists' => 'La valeur sélectionnée :attribute est invalide.',
+    'extensions' => 'Le champ :attribute doit avoir l\'une des extensions suivantes : :values.',
+    'file' => 'Le champ :attribute doit être un fichier.',
+    'filled' => 'Le champ :attribute doit avoir une valeur.',
+    'gt' => [
+        'array' => 'Le tableau :attribute doit contenir plus de :value éléments.',
+        'file' => 'La taille du fichier de :attribute doit être supérieure à :value kilo-octets.',
+        'numeric' => 'La valeur de :attribute doit être supérieure à :value.',
+        'string' => 'Le texte :attribute doit contenir plus de :value caractères.',
+    ],
+    'gte' => [
+        'array' => 'Le tableau :attribute doit contenir au moins :value éléments.',
+        'file' => 'La taille du fichier de :attribute doit être supérieure ou égale à :value kilo-octets.',
+        'numeric' => 'La valeur de :attribute doit être supérieure ou égale à :value.',
+        'string' => 'Le texte :attribute doit contenir au moins :value caractères.',
+    ],
+    'hex_color' => 'Le champ :attribute doit être une couleur hexadécimale valide.',
+    'image' => 'Le champ :attribute doit être une image.',
+    'in' => 'La valeur sélectionnée :attribute est invalide.',
+    'in_array' => 'Le champ :attribute n\'existe pas dans :other.',
+    'integer' => 'Le champ :attribute doit être un entier.',
+    'ip' => 'Le champ :attribute doit être une adresse IP valide.',
+    'ipv4' => 'Le champ :attribute doit être une adresse IPv4 valide.',
+    'ipv6' => 'Le champ :attribute doit être une adresse IPv6 valide.',
+    'json' => 'Le champ :attribute doit être un document JSON valide.',
+    'lowercase' => 'Le champ :attribute doit être en minuscules.',
+    'lt' => [
+        'array' => 'Le tableau :attribute doit contenir moins de :value éléments.',
+        'file' => 'La taille du fichier de :attribute doit être inférieure à :value kilo-octets.',
+        'numeric' => 'La valeur de :attribute doit être inférieure à :value.',
+        'string' => 'Le texte :attribute doit contenir moins de :value caractères.',
+    ],
+    'lte' => [
+        'array' => 'Le tableau :attribute doit contenir au plus :value éléments.',
+        'file' => 'La taille du fichier de :attribute doit être inférieure ou égale à :value kilo-octets.',
+        'numeric' => 'La valeur de :attribute doit être inférieure ou égale à :value.',
+        'string' => 'Le texte :attribute doit contenir au plus :value caractères.',
+    ],
+    'mac_address' => 'Le champ :attribute doit être une adresse MAC valide.',
+    'max' => [
+        'array' => 'Le tableau :attribute ne peut contenir plus de :max éléments.',
+        'file' => 'La taille du fichier de :attribute ne peut pas dépasser :max kilo-octets.',
+        'numeric' => 'La valeur de :attribute ne peut être supérieure à :max.',
+        'string' => 'Le texte de :attribute ne peut contenir plus de :max caractères.',
+    ],
+    'max_digits' => 'Le champ :attribute ne doit pas avoir plus de :max chiffres.',
+    'mimes' => 'Le champ :attribute doit être un fichier de type : :values.',
+    'mimetypes' => 'Le champ :attribute doit être un fichier de type : :values.',
+    'min' => [
+        'array' => 'Le tableau :attribute doit contenir au moins :min éléments.',
+        'file' => 'La taille du fichier de :attribute doit être supérieure à :min kilo-octets.',
+        'numeric' => 'La valeur de :attribute doit être supérieure ou égale à :min.',
+        'string' => 'Le texte de :attribute doit contenir au moins :min caractères.',
+    ],
+    'min_digits' => 'Le champ :attribute doit avoir au moins :min chiffres.',
+    'missing' => 'Le champ :attribute doit être manquant.',
+    'missing_if' => 'Le champ :attribute doit être manquant quand :other est :value.',
+    'missing_unless' => 'Le champ :attribute doit être manquant sauf si :other est :value.',
+    'missing_with' => 'Le champ :attribute doit être manquant quand :values est présent.',
+    'missing_with_all' => 'Le champ :attribute doit être manquant quand :values sont présents.',
+    'multiple_of' => 'La valeur de :attribute doit être un multiple de :value.',
+    'not_in' => 'La valeur sélectionnée :attribute est invalide.',
+    'not_regex' => 'Le format du champ :attribute n\'est pas valide.',
+    'numeric' => 'Le champ :attribute doit contenir un nombre.',
+    'password' => [
+        'letters' => 'Le champ :attribute doit contenir au moins une lettre.',
+        'mixed' => 'Le champ :attribute doit contenir au moins une lettre majuscule et une lettre minuscule.',
+        'numbers' => 'Le champ :attribute doit contenir au moins un chiffre.',
+        'symbols' => 'Le champ :attribute doit contenir au moins un symbole.',
+        'uncompromised' => 'Le champ :attribute donné est apparu dans une fuite de données. Veuillez choisir un autre :attribute.',
+    ],
+    'present' => 'Le champ :attribute doit être présent.',
+    'present_if' => 'Le champ :attribute doit être présent quand :other est :value.',
+    'present_unless' => 'Le champ :attribute doit être présent sauf si :other est :value.',
+    'present_with' => 'Le champ :attribute doit être présent quand :values est présent.',
+    'present_with_all' => 'Le champ :attribute doit être présent quand :values sont présents.',
+    'prohibited' => 'Le champ :attribute est interdit.',
+    'prohibited_if' => 'Le champ :attribute est interdit quand :other est :value.',
+    'prohibited_unless' => 'Le champ :attribute est interdit sauf si :other est dans :values.',
+    'prohibits' => 'Le champ :attribute interdit :other d\'être présent.',
+    'regex' => 'Le format du champ :attribute n\'est pas valide.',
+    'required' => 'Le champ :attribute est obligatoire.',
+    'required_array_keys' => 'Le champ :attribute doit contenir des entrées pour : :values.',
+    'required_if' => 'Le champ :attribute est obligatoire quand la valeur de :other est :value.',
+    'required_if_accepted' => 'Le champ :attribute est obligatoire quand :other est accepté.',
+    'required_unless' => 'Le champ :attribute est obligatoire sauf si :other est :values.',
+    'required_with' => 'Le champ :attribute est obligatoire quand :values est présent.',
+    'required_with_all' => 'Le champ :attribute est obligatoire quand :values sont présents.',
+    'required_without' => 'Le champ :attribute est obligatoire quand :values n\'est pas présent.',
+    'required_without_all' => 'Le champ :attribute est obligatoire quand aucune de :values n\'est présente.',
+    'same' => 'Les champs :attribute et :other doivent être identiques.',
+    'size' => [
+        'array' => 'Le tableau :attribute doit contenir :size éléments.',
+        'file' => 'La taille du fichier de :attribute doit être de :size kilo-octets.',
+        'numeric' => 'La valeur de :attribute doit être :size.',
+        'string' => 'Le texte de :attribute doit contenir :size caractères.',
+    ],
+    'starts_with' => 'Le champ :attribute doit commencer avec une des valeurs suivantes : :values.',
+    'string' => 'Le champ :attribute doit être une chaîne de caractères.',
+    'timezone' => 'Le champ :attribute doit être un fuseau horaire valide.',
+    'unique' => 'La valeur du champ :attribute est déjà utilisée.',
+    'uploaded' => 'Le fichier du champ :attribute n\'a pu être téléversé.',
+    'uppercase' => 'Le champ :attribute doit être en majuscules.',
+    'url' => 'Le format de l\'URL de :attribute n\'est pas valide.',
+    'ulid' => 'Le champ :attribute doit être un ULID valide.',
+    'uuid' => 'Le champ :attribute doit être un UUID valide.',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Custom Validation Language Lines
+    |--------------------------------------------------------------------------
+    |
+    | Here you may specify custom validation messages for attributes using the
+    | convention "rule.attribute" 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' => [
+        'name' => 'nom',
+        'email' => 'adresse e-mail',
+        'password' => 'mot de passe',
+        'password_confirmation' => 'confirmation du mot de passe',
+    ],
+
+];
diff --git a/routes/settings.php b/routes/settings.php
index e4a3f794..8ffd6adb 100644
--- a/routes/settings.php
+++ b/routes/settings.php
@@ -1,5 +1,6 @@
 <?php
 
+use App\Http\Controllers\Settings\LanguageController;
 use App\Http\Controllers\Settings\PasswordController;
 use App\Http\Controllers\Settings\ProfileController;
 use Illuminate\Support\Facades\Route;
@@ -21,4 +22,13 @@
     Route::get('settings/appearance', function () {
         return Inertia::render('settings/Appearance');
     })->name('appearance');
+
+    Route::get('settings/language', function () {
+        return Inertia::render('settings/Language');
+    })->name('language.edit');
+
+    Route::patch('settings/language', [LanguageController::class, 'update'])->name('language.update');
 });
+
+// Guest language update route
+Route::patch('language', [LanguageController::class, 'update'])->name('language.update.guest');
diff --git a/tests/Feature/Auth/GuestLanguageTest.php b/tests/Feature/Auth/GuestLanguageTest.php
new file mode 100644
index 00000000..36bddcc1
--- /dev/null
+++ b/tests/Feature/Auth/GuestLanguageTest.php
@@ -0,0 +1,46 @@
+<?php
+
+namespace Tests\Feature\Auth;
+
+use Illuminate\Foundation\Testing\RefreshDatabase;
+use Tests\TestCase;
+
+class GuestLanguageTest extends TestCase
+{
+    use RefreshDatabase;
+
+    public function test_guest_user_can_update_language_preference()
+    {
+        $response = $this->patch('/language', [
+            'locale' => 'fr',
+        ]);
+
+        $response->assertRedirect();
+        $this->assertEquals('fr', session('locale'));
+    }
+
+    public function test_guest_user_language_preference_is_respected()
+    {
+        // Set session locale to French
+        $this->withSession(['locale' => 'fr']);
+
+        // Test that the locale is applied
+        $this->get('/login');
+
+        // The middleware should have set the application locale
+        $this->assertEquals('fr', app()->getLocale());
+    }
+
+    public function test_authenticated_user_language_preference_takes_priority()
+    {
+        $user = \App\Models\User::factory()->create(['locale' => 'en']);
+
+        // Set session locale to French
+        $this->withSession(['locale' => 'fr']);
+
+        $response = $this->actingAs($user)->get('/login');
+
+        // User's locale preference should take priority over session
+        $this->assertEquals('en', app()->getLocale());
+    }
+}
diff --git a/tests/Feature/Auth/LocalizedAuthenticationTest.php b/tests/Feature/Auth/LocalizedAuthenticationTest.php
new file mode 100644
index 00000000..e2968df1
--- /dev/null
+++ b/tests/Feature/Auth/LocalizedAuthenticationTest.php
@@ -0,0 +1,187 @@
+<?php
+
+namespace Tests\Feature\Auth;
+
+use Illuminate\Foundation\Testing\RefreshDatabase;
+use Tests\TestCase;
+
+class LocalizedAuthenticationTest extends TestCase
+{
+    use RefreshDatabase;
+
+    public function test_authentication_translations_work_in_french()
+    {
+        // Set the application locale to French
+        app()->setLocale('fr');
+
+        // Test authentication translations
+        $this->assertEquals(
+            'Ces identifiants ne correspondent pas à nos enregistrements.',
+            trans('auth.failed')
+        );
+
+        $this->assertEquals(
+            'Le mot de passe fourni est incorrect.',
+            trans('auth.password')
+        );
+
+        $this->assertEquals(
+            'Trop de tentatives de connexion. Veuillez réessayer dans 60 secondes.',
+            trans('auth.throttle', ['seconds' => 60])
+        );
+    }
+
+    public function test_authentication_translations_work_in_english()
+    {
+        // Set the application locale to English
+        app()->setLocale('en');
+
+        // Test authentication translations
+        $this->assertEquals(
+            'These credentials do not match our records.',
+            trans('auth.failed')
+        );
+
+        $this->assertEquals(
+            'The provided password is incorrect.',
+            trans('auth.password')
+        );
+
+        $this->assertEquals(
+            'Too many login attempts. Please try again in 60 seconds.',
+            trans('auth.throttle', ['seconds' => 60])
+        );
+    }
+
+    public function test_validation_translations_work_in_french()
+    {
+        // Set the application locale to French
+        app()->setLocale('fr');
+
+        // Test validation translations
+        $this->assertEquals(
+            'Le champ adresse e-mail est obligatoire.',
+            trans('validation.required', ['attribute' => 'adresse e-mail'])
+        );
+
+        $this->assertEquals(
+            'Le champ adresse e-mail doit être une adresse e-mail valide.',
+            trans('validation.email', ['attribute' => 'adresse e-mail'])
+        );
+
+        $this->assertEquals(
+            'La confirmation du champ mot de passe ne correspond pas.',
+            trans('validation.confirmed', ['attribute' => 'mot de passe'])
+        );
+    }
+
+    public function test_validation_translations_work_in_english()
+    {
+        // Set the application locale to English
+        app()->setLocale('en');
+
+        // Test validation translations
+        $this->assertEquals(
+            'The email address field is required.',
+            trans('validation.required', ['attribute' => 'email address'])
+        );
+
+        $this->assertEquals(
+            'The email address must be a valid email address.',
+            trans('validation.email', ['attribute' => 'email address'])
+        );
+
+        $this->assertEquals(
+            'The password confirmation does not match.',
+            trans('validation.confirmed', ['attribute' => 'password'])
+        );
+    }
+
+    public function test_password_reset_translations_work_in_french()
+    {
+        // Set the application locale to French
+        app()->setLocale('fr');
+
+        // Test password reset translations
+        $this->assertEquals(
+            'Votre mot de passe a été réinitialisé.',
+            trans('passwords.reset')
+        );
+
+        $this->assertEquals(
+            'Nous avons envoyé votre lien de réinitialisation de mot de passe par e-mail.',
+            trans('passwords.sent')
+        );
+
+        $this->assertEquals(
+            'Ce jeton de réinitialisation de mot de passe est invalide.',
+            trans('passwords.token')
+        );
+    }
+
+    public function test_password_reset_translations_work_in_english()
+    {
+        // Set the application locale to English
+        app()->setLocale('en');
+
+        // Test password reset translations
+        $this->assertEquals(
+            'Your password has been reset.',
+            trans('passwords.reset')
+        );
+
+        $this->assertEquals(
+            'We have emailed your password reset link.',
+            trans('passwords.sent')
+        );
+
+        $this->assertEquals(
+            'This password reset token is invalid.',
+            trans('passwords.token')
+        );
+    }
+
+    public function test_general_messages_translations_work_in_french()
+    {
+        // Set the application locale to French
+        app()->setLocale('fr');
+
+        // Test general messages translations
+        $this->assertEquals(
+            'Langue mise à jour avec succès.',
+            trans('messages.language_updated')
+        );
+
+        $this->assertEquals(
+            'Profil mis à jour avec succès.',
+            trans('messages.profile_updated')
+        );
+
+        $this->assertEquals(
+            'Mot de passe mis à jour avec succès.',
+            trans('messages.password_updated')
+        );
+    }
+
+    public function test_general_messages_translations_work_in_english()
+    {
+        // Set the application locale to English
+        app()->setLocale('en');
+
+        // Test general messages translations
+        $this->assertEquals(
+            'Language updated successfully.',
+            trans('messages.language_updated')
+        );
+
+        $this->assertEquals(
+            'Profile updated successfully.',
+            trans('messages.profile_updated')
+        );
+
+        $this->assertEquals(
+            'Password updated successfully.',
+            trans('messages.password_updated')
+        );
+    }
+}
diff --git a/tests/Feature/Auth/LocalizedAuthenticationWithSessionTest.php b/tests/Feature/Auth/LocalizedAuthenticationWithSessionTest.php
new file mode 100644
index 00000000..05ac7689
--- /dev/null
+++ b/tests/Feature/Auth/LocalizedAuthenticationWithSessionTest.php
@@ -0,0 +1,94 @@
+<?php
+
+namespace Tests\Feature\Auth;
+
+use App\Models\User;
+use Illuminate\Foundation\Testing\RefreshDatabase;
+use Tests\TestCase;
+
+class LocalizedAuthenticationWithSessionTest extends TestCase
+{
+    use RefreshDatabase;
+
+    public function test_authentication_error_messages_are_localized_with_session_locale()
+    {
+        // Set session locale to French
+        $this->withSession(['locale' => 'fr']);
+
+        $user = User::factory()->create();
+
+        $response = $this->post('/login', [
+            'email' => $user->email,
+            'password' => 'wrong-password',
+        ]);
+
+        $response->assertSessionHasErrors('email');
+
+        // Check that the error message is in French
+        $this->assertStringContainsString(
+            'Ces identifiants ne correspondent pas à nos enregistrements',
+            $response->getSession()->get('errors')->first('email')
+        );
+    }
+
+    public function test_validation_error_messages_are_localized_with_session_locale()
+    {
+        // Set session locale to French
+        $this->withSession(['locale' => 'fr']);
+
+        $response = $this->post('/login', [
+            'email' => 'invalid-email',
+            'password' => '',
+        ]);
+
+        $response->assertSessionHasErrors(['email', 'password']);
+
+        // Check that validation error messages are in French
+        $this->assertStringContainsString(
+            'adresse e-mail',
+            $response->getSession()->get('errors')->first('email')
+        );
+
+        $this->assertStringContainsString(
+            'obligatoire',
+            $response->getSession()->get('errors')->first('password')
+        );
+    }
+
+    public function test_authentication_error_messages_use_session_locale_for_guest_users()
+    {
+        // Create a user with French locale preference
+        $user = User::factory()->create(['locale' => 'fr']);
+
+        // Set session locale to English (this should take priority for guest users)
+        $this->withSession(['locale' => 'en']);
+
+        $response = $this->post('/login', [
+            'email' => $user->email,
+            'password' => 'wrong-password',
+        ]);
+
+        $response->assertSessionHasErrors('email');
+
+        // Check that the error message is in English (session locale takes priority for guest users)
+        $this->assertStringContainsString(
+            'These credentials do not match our records',
+            $response->getSession()->get('errors')->first('email')
+        );
+    }
+
+    public function test_user_locale_is_applied_after_successful_authentication()
+    {
+        // Create a user with French locale preference
+        $user = User::factory()->create(['locale' => 'fr']);
+
+        // Set session locale to English
+        $this->withSession(['locale' => 'en']);
+
+        // First, try to access a protected route (should use session locale)
+        $response = $this->actingAs($user)->get('/dashboard');
+
+        // After authentication, the user's locale preference should be applied
+        $this->assertEquals('fr', app()->getLocale());
+    }
+}
diff --git a/tsconfig.json b/tsconfig.json
index 93d12bcd..91a45d40 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -40,7 +40,8 @@
         // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
         "types": [
             "vite/client",
-            "./resources/js/types"
+            "./resources/js/types",
+            "./resources/js/types/vue"
         ] /* Specify type package names to be included without being referenced in a source file. */,
         // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
         // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */