diff --git a/resources/themes/backend/assets/css/auth.css b/resources/themes/backend/assets/css/auth.css
new file mode 100644
index 0000000..c6e68f8
--- /dev/null
+++ b/resources/themes/backend/assets/css/auth.css
@@ -0,0 +1 @@
+:root{color-scheme:light dark;font-family:Instrument Sans,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#f8fafc;color:#18181b}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:#f8fafc;color:#18181b;-webkit-font-smoothing:antialiased}.auth-main{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}.auth-wrap{width:100%;max-width:390px}.auth-brand{display:flex;justify-content:center;margin-bottom:20px}.auth-brand img{width:48px;height:48px}.auth-card{background:#fff;border:1px solid #e4e4e7;border-radius:16px;padding:30px;box-shadow:0 10px 30px rgba(15,23,42,.06)}h1{font-size:24px;line-height:1.2;margin:0 0 8px;text-align:center}p{margin:0}.auth-subtitle{text-align:center;color:#71717a;font-size:14px;margin-bottom:24px}.field{margin-bottom:18px}.field-row{display:flex;align-items:center;justify-content:space-between;gap:12px}label{display:block;font-size:14px;font-weight:600;margin-bottom:7px}input[type=email],input[type=password]{width:100%;height:44px;border:1px solid #d4d4d8;border-radius:9px;padding:0 12px;background:#fff;color:#18181b;font:inherit;outline:none}input:focus{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.14)}.remember{display:flex;align-items:center;gap:8px;font-size:14px;color:#52525b}.remember input{width:16px;height:16px}.btn{width:100%;min-height:44px;border:0;border-radius:9px;padding:10px 14px;font:inherit;font-weight:600;cursor:pointer}.btn-primary{background:#2563eb;color:#fff}.btn-primary:hover{background:#1d4ed8}.btn-passkey{background:#fff;color:#18181b;border:1px solid #d4d4d8;margin-bottom:18px}.divider{display:flex;align-items:center;gap:12px;color:#71717a;font-size:11px;text-transform:uppercase;margin:2px 0 20px}.divider:before,.divider:after{content:"";height:1px;background:#e4e4e7;flex:1}.link{color:#2563eb;text-decoration:none;font-size:14px}.link:hover{text-decoration:underline}.signup{text-align:center;color:#71717a;font-size:14px;margin-top:22px}.status{padding:10px 12px;border-radius:8px;background:#ecfdf5;color:#047857;font-size:14px;margin-bottom:18px}.error{color:#dc2626;font-size:13px;margin-top:6px}.passkey-error{text-align:center;margin:-8px 0 16px}[hidden]{display:none!important}@media(max-width:480px){.auth-main{padding:16px}.auth-card{padding:24px 20px;border-radius:13px}}@media(prefers-color-scheme:dark){:root{background:#09090b;color:#fafafa}body{background:#09090b;color:#fafafa}.auth-card{background:#18181b;border-color:#27272a;box-shadow:none}.auth-subtitle,.signup,.remember,.divider{color:#a1a1aa}input[type=email],input[type=password]{background:#09090b;border-color:#3f3f46;color:#fafafa}.btn-passkey{background:#18181b;border-color:#3f3f46;color:#fafafa}.divider:before,.divider:after{background:#3f3f46}.status{background:#052e24;color:#6ee7b7}}
diff --git a/resources/themes/backend/views/livewire/auth/login.blade.php b/resources/themes/backend/views/livewire/auth/login.blade.php
old mode 100755
new mode 100644
index c80bf19..655cdd4
--- a/resources/themes/backend/views/livewire/auth/login.blade.php
+++ b/resources/themes/backend/views/livewire/auth/login.blade.php
@@ -1,63 +1,95 @@
-<x-layouts::auth :title="__('Log in')">
-    <div class="flex flex-col gap-6">
-        <x-auth-header :title="__('Log in to your account')" :description="__('Enter your email and password below to log in')" />
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="Sign in to {{ config('app.name', 'Systems Helpdesk') }} to manage helpdesk tickets and support requests.">
+    <meta name="theme-color" content="#0b1220">
+    <title>{{ __('Log in') }} - {{ config('app.name', 'Systems Helpdesk') }}</title>
+    <link rel="icon" type="image/png" sizes="32x32" href="{{ asset('favicon-32x32.png') }}">
+    <link rel="apple-touch-icon" sizes="180x180" href="{{ asset('apple-touch-icon.png') }}">
+    @vite('resources/themes/backend/assets/css/auth.css')
+</head>
+<body>
+<main class="auth-main">
+    <div class="auth-wrap">
+        <a class="auth-brand" href="{{ route('home') }}" aria-label="{{ config('app.name', 'Systems Helpdesk') }}">
+            <img src="{{ asset('favicon-96x96.png') }}" width="48" height="48" alt="">
+        </a>
 
-        <!-- Session Status -->
-        <x-auth-session-status class="text-center" :status="session('status')" />
+        <section class="auth-card" aria-labelledby="login-heading">
+            <h1 id="login-heading">{{ __('Log in to your account') }}</h1>
+            <p class="auth-subtitle">{{ __('Enter your email and password below to log in') }}</p>
 
-        <div class="hd-auth-passkey">
-            <x-passkey-verify />
-        </div>
+            @if (session('status'))
+                <div class="status" role="status">{{ session('status') }}</div>
+            @endif
 
-        <form method="POST" action="{{ route('login.store') }}" class="flex flex-col gap-6">
-            @csrf
-
-            <!-- Email Address -->
-            <flux:input
-                name="email"
-                :label="__('Email address')"
-                :value="old('email')"
-                type="email"
-                required
-                autofocus
-                autocomplete="email"
-                placeholder="email@example.com"
-            />
-
-            <!-- Password -->
-            <div class="relative">
-                <flux:input
-                    name="password"
-                    :label="__('Password')"
-                    type="password"
-                    required
-                    autocomplete="current-password"
-                    :placeholder="__('Password')"
-                    viewable
-                />
-
-                @if (Route::has('password.request'))
-                    <flux:link class="absolute top-0 text-sm end-0" :href="route('password.request')" wire:navigate>
-                        {{ __('Forgot your password?') }}
-                    </flux:link>
-                @endif
+            <div id="passkey-area" hidden>
+                <button id="passkey-button" class="btn btn-passkey" type="button">{{ __('Sign in with a passkey') }}</button>
+                <p id="passkey-error" class="error passkey-error" role="alert" hidden></p>
+                <div class="divider"><span>{{ __('Or continue with email') }}</span></div>
             </div>
 
-            <!-- Remember Me -->
-            <div class="hd-auth-checkbox">
-                <flux:checkbox name="remember" :label="__('Remember me')" :checked="old('remember')" />
-            </div>
+            <form method="POST" action="{{ route('login.store') }}">
+                @csrf
+                <div class="field">
+                    <label for="email">{{ __('Email address') }}</label>
+                    <input id="email" name="email" value="{{ old('email') }}" type="email" required autofocus autocomplete="email" inputmode="email">
+                    @error('email')<p class="error">{{ $message }}</p>@enderror
+                </div>
 
-            <div class="flex items-center justify-end">
-                <flux:button variant="primary" type="submit" class="hd-auth-primary w-full" data-test="login-button">
-                    {{ __('Log in') }}
-                </flux:button>
-            </div>
-        </form>
+                <div class="field">
+                    <div class="field-row">
+                        <label for="password">{{ __('Password') }}</label>
+                        @if (Route::has('password.request'))
+                            <a class="link" href="{{ route('password.request') }}">{{ __('Forgot your password?') }}</a>
+                        @endif
+                    </div>
+                    <input id="password" name="password" type="password" required autocomplete="current-password">
+                    @error('password')<p class="error">{{ $message }}</p>@enderror
+                </div>
 
-        <div class="space-x-1 text-sm text-center rtl:space-x-reverse text-zinc-600 dark:text-zinc-400">
-            <span>{{ __('Don\'t have an account?') }}</span>
-            <flux:link :href="route('register')" wire:navigate>{{ __('Sign up') }}</flux:link>
-        </div>
+                <div class="field">
+                    <label class="remember"><input name="remember" type="checkbox" value="1" @checked(old('remember'))> <span>{{ __('Remember me') }}</span></label>
+                </div>
+
+                <button class="btn btn-primary" type="submit" data-test="login-button">{{ __('Log in') }}</button>
+            </form>
+
+            @if (Route::has('register'))
+                <p class="signup">{{ __('Don\'t have an account?') }} <a class="link" href="{{ route('register') }}">{{ __('Sign up') }}</a></p>
+            @endif
+        </section>
     </div>
-</x-layouts::auth>
+</main>
+
+@vite('resources/themes/backend/assets/js/passkeys.js')
+<script>
+window.addEventListener('passkeys:ready', () => {
+    const area = document.getElementById('passkey-area');
+    const button = document.getElementById('passkey-button');
+    const error = document.getElementById('passkey-error');
+    if (!window.Passkeys?.isSupported?.()) return;
+    area.hidden = false;
+    button.addEventListener('click', async () => {
+        button.disabled = true;
+        button.textContent = @json(__('Authenticating...'));
+        error.hidden = true;
+        try {
+            const response = await window.Passkeys.verify({routes:{options:@json(route('passkey.login-options')),submit:@json(route('passkey.login'))}});
+            window.location.assign(response.redirect || @json(route('dashboard')));
+        } catch (e) {
+            if (e?.constructor?.name !== 'UserCancelledError') {
+                error.textContent = e?.message || @json(__('Passkey authentication failed.'));
+                error.hidden = false;
+            }
+        } finally {
+            button.disabled = false;
+            button.textContent = @json(__('Sign in with a passkey'));
+        }
+    });
+});
+</script>
+</body>
+</html>
diff --git a/vite.config.js b/vite.config.js
index 477e230..bacaf65 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -32,6 +32,7 @@ export default defineConfig({
         laravel({
             input:[
                 backendCssEntry,
+                'resources/themes/backend/assets/css/auth.css',
                 'resources/themes/backend/assets/js/passkeys.js',
                 'resources/themes/backend/assets/js/layout.js',
                 ...moduleInputs,