diff --git a/.gitattributes b/.gitattributes
index f50f803ba..863769453 100644
--- a/.gitattributes
+++ b/.gitattributes
@@ -8,3 +8,4 @@
 
 CHANGELOG.md export-ignore
 README.md export-ignore
+.github/workflows/browser-test.yml export-ignore
diff --git a/.github/workflows/browser-tests.yml b/.github/workflows/browser-tests.yml
new file mode 100644
index 000000000..9eac81085
--- /dev/null
+++ b/.github/workflows/browser-tests.yml
@@ -0,0 +1,71 @@
+name: browser-tests
+
+on:
+  push:
+    branches:
+      - pest-ci
+      - develop
+      - main
+  pull_request:
+    branches:
+      - pest-ci
+      - develop
+      - main
+
+jobs:
+  ci:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup PHP
+        uses: shivammathur/setup-php@v2
+        with:
+          php-version: 8.4
+          tools: composer:v2
+          coverage: xdebug
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+          cache: 'npm'
+
+      - name: Install Node Dependencies
+        run: npm ci
+
+      - name: Install Playwright Dependencies
+        run: npm install playwright@latest
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+
+      - name: Add `laravel-labs/starter-kit-browser-tests` Repository
+        run: |
+          composer config repositories.browser-tests '{"type": "vcs", "url": "https://github.com/laravel-labs/starter-kit-browser-tests"}' --file composer.json
+          composer remove "phpunit/phpunit" --dev --no-update
+          composer require "laravel-labs/starter-kit-browser-tests:dev-main@dev" --dev --no-update
+
+      - name: Install Dependencies
+        run: composer install --no-interaction --prefer-dist --optimize-autoloader
+
+      - name: Copy Environment File
+        run: cp .env.example .env
+
+      - name: Generate Application Key
+        run: php artisan key:generate
+
+      - name: Setup Test Environment
+        run: |
+           cp vendor/laravel-labs/starter-kit-browser-tests/phpunit.xml.dist .
+           rm phpunit.xml
+           rm -Rf tests/
+           cp -rf vendor/laravel-labs/starter-kit-browser-tests/tests/ tests/
+
+      - name: Build Assets
+        run: npm run build
+
+      - name: Tests
+        run: php vendor/bin/pest
diff --git a/resources/js/components/delete-user.tsx b/resources/js/components/delete-user.tsx
index 7c4b73aad..17f4df976 100644
--- a/resources/js/components/delete-user.tsx
+++ b/resources/js/components/delete-user.tsx
@@ -22,7 +22,7 @@ export default function DeleteUser() {
 
                 <Dialog>
                     <DialogTrigger asChild>
-                        <Button variant="destructive">Delete account</Button>
+                        <Button variant="destructive" data-test="delete-user-button">Delete account</Button>
                     </DialogTrigger>
                     <DialogContent>
                         <DialogTitle>Are you sure you want to delete your account?</DialogTitle>
@@ -67,7 +67,7 @@ export default function DeleteUser() {
                                         </DialogClose>
 
                                         <Button variant="destructive" disabled={processing} asChild>
-                                            <button type="submit">Delete account</button>
+                                            <button type="submit" data-test="confirm-delete-user-button">Delete account</button>
                                         </Button>
                                     </DialogFooter>
                                 </>
diff --git a/resources/js/components/user-menu-content.tsx b/resources/js/components/user-menu-content.tsx
index 0f198a52d..684991c64 100644
--- a/resources/js/components/user-menu-content.tsx
+++ b/resources/js/components/user-menu-content.tsx
@@ -37,7 +37,7 @@ export function UserMenuContent({ user }: UserMenuContentProps) {
             </DropdownMenuGroup>
             <DropdownMenuSeparator />
             <DropdownMenuItem asChild>
-                <Link className="block w-full" href={logout()} as="button" onClick={handleLogout}>
+                <Link className="block w-full" href={logout()} as="button" onClick={handleLogout} data-test="logout-button">
                     <LogOut className="mr-2" />
                     Log out
                 </Link>
diff --git a/resources/js/layouts/settings/layout.tsx b/resources/js/layouts/settings/layout.tsx
index 14f0a861c..e6698071e 100644
--- a/resources/js/layouts/settings/layout.tsx
+++ b/resources/js/layouts/settings/layout.tsx
@@ -2,7 +2,7 @@ import Heading from '@/components/heading';
 import { Button } from '@/components/ui/button';
 import { Separator } from '@/components/ui/separator';
 import { cn } from '@/lib/utils';
-import { appearance } from '@/routes';
+import { edit as editAppearance } from '@/routes/appearance';
 import { edit as editPassword } from '@/routes/password';
 import { edit } from '@/routes/profile';
 import { type NavItem } from '@/types';
@@ -22,7 +22,7 @@ const sidebarNavItems: NavItem[] = [
     },
     {
         title: 'Appearance',
-        href: appearance(),
+        href: editAppearance(),
         icon: null,
     },
 ];
diff --git a/resources/js/pages/auth/confirm-password.tsx b/resources/js/pages/auth/confirm-password.tsx
index dd6102eb4..ff6461657 100644
--- a/resources/js/pages/auth/confirm-password.tsx
+++ b/resources/js/pages/auth/confirm-password.tsx
@@ -26,7 +26,7 @@ export default function ConfirmPassword() {
                         </div>
 
                         <div className="flex items-center">
-                            <Button className="w-full" disabled={processing}>
+                            <Button className="w-full" disabled={processing} data-test="confirm-password-button">
                                 {processing && <LoaderCircle className="h-4 w-4 animate-spin" />}
                                 Confirm password
                             </Button>
diff --git a/resources/js/pages/auth/forgot-password.tsx b/resources/js/pages/auth/forgot-password.tsx
index c81458c9b..16a56ac2e 100644
--- a/resources/js/pages/auth/forgot-password.tsx
+++ b/resources/js/pages/auth/forgot-password.tsx
@@ -30,7 +30,7 @@ export default function ForgotPassword({ status }: { status?: string }) {
                             </div>
 
                             <div className="my-6 flex items-center justify-start">
-                                <Button className="w-full" disabled={processing}>
+                                <Button className="w-full" disabled={processing} data-test="email-password-reset-link-button">
                                     {processing && <LoaderCircle className="h-4 w-4 animate-spin" />}
                                     Email password reset link
                                 </Button>
diff --git a/resources/js/pages/auth/login.tsx b/resources/js/pages/auth/login.tsx
index 802abcb90..93f5d9064 100644
--- a/resources/js/pages/auth/login.tsx
+++ b/resources/js/pages/auth/login.tsx
@@ -66,7 +66,7 @@ export default function Login({ status, canResetPassword }: LoginProps) {
                                 <Label htmlFor="remember">Remember me</Label>
                             </div>
 
-                            <Button type="submit" className="mt-4 w-full" tabIndex={4} disabled={processing}>
+                            <Button type="submit" className="mt-4 w-full" tabIndex={4} disabled={processing} data-test="login-button">
                                 {processing && <LoaderCircle className="h-4 w-4 animate-spin" />}
                                 Log in
                             </Button>
diff --git a/resources/js/pages/auth/register.tsx b/resources/js/pages/auth/register.tsx
index bcb16f1b9..2e66f0ab7 100644
--- a/resources/js/pages/auth/register.tsx
+++ b/resources/js/pages/auth/register.tsx
@@ -80,7 +80,7 @@ export default function Register() {
                                 <InputError message={errors.password_confirmation} />
                             </div>
 
-                            <Button type="submit" className="mt-2 w-full" tabIndex={5}>
+                            <Button type="submit" className="mt-2 w-full" tabIndex={5} data-test="register-user-button">
                                 {processing && <LoaderCircle className="h-4 w-4 animate-spin" />}
                                 Create account
                             </Button>
diff --git a/resources/js/pages/auth/reset-password.tsx b/resources/js/pages/auth/reset-password.tsx
index b36a7524c..c47803e1a 100644
--- a/resources/js/pages/auth/reset-password.tsx
+++ b/resources/js/pages/auth/reset-password.tsx
@@ -58,7 +58,7 @@ export default function ResetPassword({ token, email }: ResetPasswordProps) {
                             <InputError message={errors.password_confirmation} className="mt-2" />
                         </div>
 
-                        <Button type="submit" className="mt-4 w-full" disabled={processing}>
+                        <Button type="submit" className="mt-4 w-full" disabled={processing} data-test="reset-password-button">
                             {processing && <LoaderCircle className="h-4 w-4 animate-spin" />}
                             Reset password
                         </Button>
diff --git a/resources/js/pages/settings/appearance.tsx b/resources/js/pages/settings/appearance.tsx
index 2d286a11b..058e66548 100644
--- a/resources/js/pages/settings/appearance.tsx
+++ b/resources/js/pages/settings/appearance.tsx
@@ -6,12 +6,12 @@ import { type BreadcrumbItem } from '@/types';
 
 import AppLayout from '@/layouts/app-layout';
 import SettingsLayout from '@/layouts/settings/layout';
-import { appearance } from '@/routes';
+import { edit as editAppearance } from '@/routes/appearance';
 
 const breadcrumbs: BreadcrumbItem[] = [
     {
         title: 'Appearance settings',
-        href: appearance().url,
+        href: editAppearance().url,
     },
 ];
 
diff --git a/resources/js/pages/settings/password.tsx b/resources/js/pages/settings/password.tsx
index c5045c637..495be9118 100644
--- a/resources/js/pages/settings/password.tsx
+++ b/resources/js/pages/settings/password.tsx
@@ -100,7 +100,7 @@ export default function Password() {
                                 </div>
 
                                 <div className="flex items-center gap-4">
-                                    <Button disabled={processing}>Save password</Button>
+                                    <Button disabled={processing} data-test="update-password-button">Save password</Button>
 
                                     <Transition
                                         show={recentlySuccessful}
diff --git a/resources/js/pages/settings/profile.tsx b/resources/js/pages/settings/profile.tsx
index 77e5d8c79..1069a27e3 100644
--- a/resources/js/pages/settings/profile.tsx
+++ b/resources/js/pages/settings/profile.tsx
@@ -96,7 +96,7 @@ export default function Profile({ mustVerifyEmail, status }: { mustVerifyEmail:
                                 )}
 
                                 <div className="flex items-center gap-4">
-                                    <Button disabled={processing}>Save</Button>
+                                    <Button disabled={processing} data-test="update-profile-button">Save</Button>
 
                                     <Transition
                                         show={recentlySuccessful}
diff --git a/routes/settings.php b/routes/settings.php
index 203b7cded..67bb6bbe8 100644
--- a/routes/settings.php
+++ b/routes/settings.php
@@ -20,5 +20,5 @@
 
     Route::get('settings/appearance', function () {
         return Inertia::render('settings/appearance');
-    })->name('appearance');
+    })->name('appearance.edit');
 });