diff --git a/Modules/Helpdesk/Resources/views/livewire/settings-manager.blade.php b/Modules/Helpdesk/Resources/views/livewire/settings-manager.blade.php
index 97e69fa4..06e7ebcf 100644
--- a/Modules/Helpdesk/Resources/views/livewire/settings-manager.blade.php
+++ b/Modules/Helpdesk/Resources/views/livewire/settings-manager.blade.php
@@ -32,8 +32,8 @@
 
                 <div class="flex flex-wrap gap-2">
                     <a href="{{ route('helpdesk.index') }}" wire:navigate class="hd-btn hd-btn-blue">
-                        <i class="fa-solid fa-arrow-left" aria-hidden="true"></i>
-                        <span>Helpdesk</span>
+                        <i class="fa-solid fa-gauge-high" aria-hidden="true"></i>
+                        <span>Dashboard</span>
                     </a>
                 </div>
             </div>
diff --git a/resources/views/livewire/auth/confirm-password.blade.php b/resources/views/livewire/auth/confirm-password.blade.php
index dc8748ab..62c3b80d 100644
--- a/resources/views/livewire/auth/confirm-password.blade.php
+++ b/resources/views/livewire/auth/confirm-password.blade.php
@@ -1,36 +1,48 @@
 <x-layouts::auth :title="__('Confirm password')">
-    <div class="flex flex-col gap-6">
-        <x-auth-header
-            :title="__('Confirm password')"
-            :description="__('This is a secure area of the application. Please confirm your password before continuing.')"
-        />
+    <section class="mx-auto w-full max-w-md overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-xl shadow-zinc-900/10 dark:border-zinc-800 dark:bg-zinc-950">
+        <div class="h-1.5 bg-gradient-to-r from-emerald-500 via-sky-500 to-blue-600"></div>
 
-        <x-auth-session-status class="text-center" :status="session('status')" />
+        <div class="space-y-7 p-6 sm:p-8">
+            <div class="space-y-5 text-center">
+                <div class="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-zinc-950 text-sm font-black text-white dark:bg-white dark:text-zinc-950">WMS</div>
+                <div class="space-y-2">
+                    <p class="text-xs font-semibold uppercase tracking-[0.24em] text-sky-700 dark:text-sky-300">{{ __('Protected area') }}</p>
+                    <h1 class="text-2xl font-bold tracking-tight text-zinc-950 dark:text-white">{{ __('Confirm password') }}</h1>
+                    <p class="text-sm leading-6 text-zinc-600 dark:text-zinc-400">{{ __('Confirm your identity before continuing to this secure WMS workflow.') }}</p>
+                </div>
+            </div>
 
-        <x-passkey-verify
-            options-route="passkey.confirm-options"
-            submit-route="passkey.confirm"
-            :label="__('Confirm with passkey')"
-            :loading-label="__('Confirming...')"
-            :separator="__('Or confirm with password')"
-        />
+            <div class="rounded-2xl border border-zinc-200 bg-zinc-50 p-5 dark:border-zinc-800 dark:bg-zinc-900/60">
+                <x-auth-session-status class="mb-5 rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-center text-sm text-emerald-800 dark:border-emerald-900/60 dark:bg-emerald-950/40 dark:text-emerald-200" :status="session('status')" />
 
-        <form method="POST" action="{{ route('password.confirm.store') }}" class="flex flex-col gap-6">
-            @csrf
+                <div class="mb-5">
+                    <x-passkey-verify
+                        options-route="passkey.confirm-options"
+                        submit-route="passkey.confirm"
+                        :label="__('Confirm with passkey')"
+                        :loading-label="__('Confirming...')"
+                        :separator="__('Or confirm with password')"
+                    />
+                </div>
 
-            <flux:input
-                name="password"
-                :label="__('Password')"
-                type="password"
-                required
-                autocomplete="current-password"
-                :placeholder="__('Password')"
-                viewable
-            />
+                <form method="POST" action="{{ route('password.confirm.store') }}" class="flex flex-col gap-5">
+                    @csrf
 
-            <flux:button variant="primary" type="submit" class="w-full" data-test="confirm-password-button">
-                {{ __('Confirm') }}
-            </flux:button>
-        </form>
-    </div>
+                    <flux:input
+                        name="password"
+                        :label="__('Password')"
+                        type="password"
+                        required
+                        autocomplete="current-password"
+                        :placeholder="__('Password')"
+                        viewable
+                    />
+
+                    <flux:button variant="primary" type="submit" class="w-full" data-test="confirm-password-button">
+                        {{ __('Confirm') }}
+                    </flux:button>
+                </form>
+            </div>
+        </div>
+    </section>
 </x-layouts::auth>
diff --git a/resources/views/livewire/auth/forgot-password.blade.php b/resources/views/livewire/auth/forgot-password.blade.php
index 5f1cdad6..58fd2820 100644
--- a/resources/views/livewire/auth/forgot-password.blade.php
+++ b/resources/views/livewire/auth/forgot-password.blade.php
@@ -1,31 +1,44 @@
 <x-layouts::auth :title="__('Forgot password')">
-    <div class="flex flex-col gap-6">
-        <x-auth-header :title="__('Forgot password')" :description="__('Enter your email to receive a password reset link')" />
+    <section class="mx-auto w-full max-w-md overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-xl shadow-zinc-900/10 dark:border-zinc-800 dark:bg-zinc-950">
+        <div class="h-1.5 bg-gradient-to-r from-emerald-500 via-sky-500 to-blue-600"></div>
 
-        <!-- Session Status -->
-        <x-auth-session-status class="text-center" :status="session('status')" />
+        <div class="space-y-7 p-6 sm:p-8">
+            <div class="space-y-5 text-center">
+                <div class="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-zinc-950 text-sm font-black text-white dark:bg-white dark:text-zinc-950">WMS</div>
+                <div class="space-y-2">
+                    <p class="text-xs font-semibold uppercase tracking-[0.24em] text-sky-700 dark:text-sky-300">{{ __('Account recovery') }}</p>
+                    <h1 class="text-2xl font-bold tracking-tight text-zinc-950 dark:text-white">{{ __('Warehouse Management System') }}</h1>
+                    <p class="text-sm leading-6 text-zinc-600 dark:text-zinc-400">{{ __('Request a secure reset link for your WMS account.') }}</p>
+                </div>
+            </div>
 
-        <form method="POST" action="{{ route('password.email') }}" class="flex flex-col gap-6">
-            @csrf
+            <div class="rounded-2xl border border-zinc-200 bg-zinc-50 p-5 dark:border-zinc-800 dark:bg-zinc-900/60">
+                <x-auth-header :title="__('Forgot password')" :description="__('Enter your email address and we will send you a password reset link.')" />
 
-            <!-- Email Address -->
-            <flux:input
-                name="email"
-                :label="__('Email address')"
-                type="email"
-                required
-                autofocus
-                placeholder="email@example.com"
-            />
+                <x-auth-session-status class="mt-5 rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-center text-sm text-emerald-800 dark:border-emerald-900/60 dark:bg-emerald-950/40 dark:text-emerald-200" :status="session('status')" />
 
-            <flux:button variant="primary" type="submit" class="w-full" data-test="email-password-reset-link-button">
-                {{ __('Email password reset link') }}
-            </flux:button>
-        </form>
+                <form method="POST" action="{{ route('password.email') }}" class="mt-6 flex flex-col gap-5">
+                    @csrf
 
-        <div class="space-x-1 rtl:space-x-reverse text-center text-sm text-zinc-400">
-            <span>{{ __('Or, return to') }}</span>
-            <flux:link :href="route('login')" wire:navigate>{{ __('log in') }}</flux:link>
+                    <flux:input
+                        name="email"
+                        :label="__('Email address')"
+                        type="email"
+                        required
+                        autofocus
+                        placeholder="email@example.com"
+                    />
+
+                    <flux:button variant="primary" type="submit" class="w-full" data-test="email-password-reset-link-button">
+                        {{ __('Email password reset link') }}
+                    </flux:button>
+                </form>
+            </div>
+
+            <div class="text-center text-sm text-zinc-600 dark:text-zinc-400">
+                <span>{{ __('Remember your password?') }}</span>
+                <flux:link :href="route('login')" wire:navigate>{{ __('Log in') }}</flux:link>
+            </div>
         </div>
-    </div>
+    </section>
 </x-layouts::auth>
diff --git a/resources/views/livewire/auth/login.blade.php b/resources/views/livewire/auth/login.blade.php
index 52424d21..96a77a7c 100644
--- a/resources/views/livewire/auth/login.blade.php
+++ b/resources/views/livewire/auth/login.blade.php
@@ -1,44 +1,68 @@
 <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')" />
+    <section class="mx-auto w-full max-w-md overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-xl shadow-zinc-900/10 dark:border-zinc-800 dark:bg-zinc-950">
+        <div class="h-1.5 bg-gradient-to-r from-emerald-500 via-sky-500 to-blue-600"></div>
 
-        <x-auth-session-status class="text-center" :status="session('status')" />
-
-        <x-passkey-verify />
-
-        <form method="POST" action="{{ route('login.store') }}" class="flex flex-col gap-6">
-            @csrf
-
-            <div class="grid gap-2">
-                <label for="email" class="text-sm font-medium text-zinc-800 dark:text-zinc-200">{{ __('Email address') }}</label>
-                <input id="email" name="email" type="email" value="{{ old('email') }}" required autofocus autocomplete="email" placeholder="email@example.com" class="w-full rounded-xl border border-zinc-300 bg-white px-3 py-2.5 text-sm text-zinc-900 shadow-sm outline-none transition placeholder:text-zinc-400 focus:border-cyan-500 focus:ring-2 focus:ring-cyan-200 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white dark:placeholder:text-zinc-500 dark:focus:border-cyan-400 dark:focus:ring-cyan-900" />
-                @error('email')<p class="text-sm text-red-600 dark:text-red-400">{{ $message }}</p>@enderror
-            </div>
-
-            <div class="grid gap-2">
-                <div class="flex items-center justify-between gap-3">
-                    <label for="password" class="text-sm font-medium text-zinc-800 dark:text-zinc-200">{{ __('Password') }}</label>
-                    @if (Route::has('password.request'))
-                        <a class="text-sm font-medium text-cyan-700 underline underline-offset-4 hover:text-cyan-900 dark:text-cyan-300" href="{{ route('password.request') }}" wire:navigate>{{ __('Forgot your password?') }}</a>
-                    @endif
+        <div class="space-y-7 p-6 sm:p-8">
+            <div class="space-y-5 text-center">
+                <div class="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-zinc-950 text-sm font-black tracking-tight text-white shadow-lg shadow-zinc-900/20 dark:bg-white dark:text-zinc-950">
+                    WMS
+                </div>
+
+                <div class="space-y-2">
+                    <p class="text-xs font-semibold uppercase tracking-[0.24em] text-sky-700 dark:text-sky-300">MPBA Limited</p>
+                    <h1 class="text-2xl font-bold tracking-tight text-zinc-950 dark:text-white">{{ __('Warehouse Management System') }}</h1>
+                    <p class="text-sm leading-6 text-zinc-600 dark:text-zinc-400">{{ __('Secure access for tenant workspaces, warehouse operations, support, licences, and dashboards.') }}</p>
                 </div>
-                <input id="password" name="password" type="password" required autocomplete="current-password" placeholder="{{ __('Password') }}" class="w-full rounded-xl border border-zinc-300 bg-white px-3 py-2.5 text-sm text-zinc-900 shadow-sm outline-none transition placeholder:text-zinc-400 focus:border-cyan-500 focus:ring-2 focus:ring-cyan-200 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white dark:placeholder:text-zinc-500 dark:focus:border-cyan-400 dark:focus:ring-cyan-900" />
-                @error('password')<p class="text-sm text-red-600 dark:text-red-400">{{ $message }}</p>@enderror
             </div>
 
-            <label class="flex items-center gap-2 text-sm text-zinc-700 dark:text-zinc-300">
-                <input name="remember" type="checkbox" value="1" @checked(old('remember')) class="rounded border-zinc-300 text-cyan-600 focus:ring-cyan-500 dark:border-zinc-700 dark:bg-zinc-950" />
-                <span>{{ __('Remember me') }}</span>
-            </label>
+            <div class="rounded-2xl border border-zinc-200 bg-zinc-50 p-5 dark:border-zinc-800 dark:bg-zinc-900/60">
+                <div class="mb-6 space-y-1 text-center">
+                    <p class="text-xs font-semibold uppercase tracking-[0.22em] text-sky-700 dark:text-sky-300">{{ __('Secure sign in') }}</p>
+                    <h2 class="text-xl font-bold text-zinc-950 dark:text-white">{{ __('Log in to your account') }}</h2>
+                    <p class="text-sm text-zinc-600 dark:text-zinc-400">{{ __('Enter your email and password to continue.') }}</p>
+                </div>
 
-            <button type="submit" class="w-full rounded-xl bg-zinc-950 px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-zinc-800 focus:outline-none focus:ring-2 focus:ring-cyan-400 dark:bg-white dark:text-zinc-950 dark:hover:bg-zinc-200" data-test="login-button">
-                {{ __('Log in') }}
-            </button>
-        </form>
+                <x-auth-session-status class="mb-5 rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-center text-sm text-emerald-800 dark:border-emerald-900/60 dark:bg-emerald-950/40 dark:text-emerald-200" :status="session('status')" />
 
-        <div class="space-x-1 text-center text-sm text-zinc-600 rtl:space-x-reverse dark:text-zinc-400">
-            <span>{{ __('Don\'t have an account?') }}</span>
-            <a href="{{ route('register') }}" wire:navigate class="font-medium text-cyan-700 underline underline-offset-4 hover:text-cyan-900 dark:text-cyan-300">{{ __('Sign up') }}</a>
+                <div class="mb-5">
+                    <x-passkey-verify />
+                </div>
+
+                <form method="POST" action="{{ route('login.store') }}" class="flex flex-col gap-5">
+                    @csrf
+
+                    <div class="grid gap-2">
+                        <label for="email" class="text-sm font-semibold text-zinc-800 dark:text-zinc-200">{{ __('Email address') }}</label>
+                        <input id="email" name="email" type="email" value="{{ old('email') }}" required autofocus autocomplete="email" placeholder="email@example.com" class="w-full rounded-xl border border-zinc-300 bg-white px-4 py-3 text-sm text-zinc-950 shadow-sm outline-none transition placeholder:text-zinc-400 focus:border-sky-500 focus:ring-4 focus:ring-sky-100 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white dark:placeholder:text-zinc-500 dark:focus:border-sky-400 dark:focus:ring-sky-950" />
+                        @error('email')<p class="text-sm font-medium text-red-600 dark:text-red-400">{{ $message }}</p>@enderror
+                    </div>
+
+                    <div class="grid gap-2">
+                        <div class="flex items-center justify-between gap-3">
+                            <label for="password" class="text-sm font-semibold text-zinc-800 dark:text-zinc-200">{{ __('Password') }}</label>
+                            @if (Route::has('password.request'))
+                                <a class="text-sm font-semibold text-sky-700 underline underline-offset-4 hover:text-sky-900 dark:text-sky-300" href="{{ route('password.request') }}" wire:navigate>{{ __('Forgot password?') }}</a>
+                            @endif
+                        </div>
+                        <input id="password" name="password" type="password" required autocomplete="current-password" placeholder="{{ __('Password') }}" class="w-full rounded-xl border border-zinc-300 bg-white px-4 py-3 text-sm text-zinc-950 shadow-sm outline-none transition placeholder:text-zinc-400 focus:border-sky-500 focus:ring-4 focus:ring-sky-100 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white dark:placeholder:text-zinc-500 dark:focus:border-sky-400 dark:focus:ring-sky-950" />
+                        @error('password')<p class="text-sm font-medium text-red-600 dark:text-red-400">{{ $message }}</p>@enderror
+                    </div>
+
+                    <label class="flex items-center gap-3 rounded-xl border border-zinc-200 bg-white px-4 py-3 text-sm text-zinc-700 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-300">
+                        <input name="remember" type="checkbox" value="1" @checked(old('remember')) class="rounded border-zinc-300 text-sky-600 focus:ring-sky-500 dark:border-zinc-700 dark:bg-zinc-950" />
+                        <span>{{ __('Remember this device') }}</span>
+                    </label>
+
+                    <button type="submit" class="w-full rounded-xl bg-zinc-950 px-4 py-3 text-sm font-bold text-white shadow-sm transition hover:bg-zinc-800 focus:outline-none focus:ring-4 focus:ring-sky-200 dark:bg-white dark:text-zinc-950 dark:hover:bg-zinc-200 dark:focus:ring-sky-950" data-test="login-button">
+                        {{ __('Log in') }}
+                    </button>
+                </form>
+            </div>
+
+            <div class="text-center text-sm text-zinc-600 dark:text-zinc-400">
+                <span>{{ __('Need access?') }}</span>
+                <a href="{{ route('register') }}" wire:navigate class="font-semibold text-sky-700 underline underline-offset-4 hover:text-sky-900 dark:text-sky-300">{{ __('Create an account') }}</a>
+            </div>
         </div>
-    </div>
+    </section>
 </x-layouts::auth>
diff --git a/resources/views/livewire/auth/register.blade.php b/resources/views/livewire/auth/register.blade.php
index 6a581eb7..ad694fdd 100644
--- a/resources/views/livewire/auth/register.blade.php
+++ b/resources/views/livewire/auth/register.blade.php
@@ -1,43 +1,59 @@
 <x-layouts::auth :title="__('Register')">
-    <div class="flex flex-col gap-6">
-        <x-auth-header :title="__('Create an account')" :description="__('Enter your details below to create your account')" />
+    <section class="mx-auto w-full max-w-md overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-xl shadow-zinc-900/10 dark:border-zinc-800 dark:bg-zinc-950">
+        <div class="h-1.5 bg-gradient-to-r from-emerald-500 via-sky-500 to-blue-600"></div>
 
-        <x-auth-session-status class="text-center" :status="session('status')" />
+        <div class="space-y-7 p-6 sm:p-8">
+            <div class="space-y-5 text-center">
+                <div class="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-zinc-950 text-sm font-black tracking-tight text-white shadow-lg shadow-zinc-900/20 dark:bg-white dark:text-zinc-950">
+                    WMS
+                </div>
 
-        <form method="POST" action="{{ route('register.store') }}" class="flex flex-col gap-6">
-            @csrf
-
-            <div class="grid gap-2">
-                <label for="name" class="text-sm font-medium text-zinc-800 dark:text-zinc-200">{{ __('Name') }}</label>
-                <input id="name" name="name" type="text" value="{{ old('name') }}" required autofocus autocomplete="name" placeholder="{{ __('Full name') }}" class="w-full rounded-xl border border-zinc-300 bg-white px-3 py-2.5 text-sm text-zinc-900 shadow-sm outline-none transition placeholder:text-zinc-400 focus:border-cyan-500 focus:ring-2 focus:ring-cyan-200 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white dark:placeholder:text-zinc-500 dark:focus:border-cyan-400 dark:focus:ring-cyan-900" />
-                @error('name')<p class="text-sm text-red-600 dark:text-red-400">{{ $message }}</p>@enderror
+                <div class="space-y-2">
+                    <p class="text-xs font-semibold uppercase tracking-[0.24em] text-sky-700 dark:text-sky-300">{{ __('MPBA Limited') }}</p>
+                    <h1 class="text-2xl font-bold tracking-tight text-zinc-950 dark:text-white">{{ __('Create your WMS account') }}</h1>
+                    <p class="text-sm leading-6 text-zinc-600 dark:text-zinc-400">{{ __('Register for secure access to your company workspace and warehouse operations.') }}</p>
+                </div>
             </div>
 
-            <div class="grid gap-2">
-                <label for="email" class="text-sm font-medium text-zinc-800 dark:text-zinc-200">{{ __('Email address') }}</label>
-                <input id="email" name="email" type="email" value="{{ old('email') }}" required autocomplete="email" placeholder="email@example.com" class="w-full rounded-xl border border-zinc-300 bg-white px-3 py-2.5 text-sm text-zinc-900 shadow-sm outline-none transition placeholder:text-zinc-400 focus:border-cyan-500 focus:ring-2 focus:ring-cyan-200 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white dark:placeholder:text-zinc-500 dark:focus:border-cyan-400 dark:focus:ring-cyan-900" />
-                @error('email')<p class="text-sm text-red-600 dark:text-red-400">{{ $message }}</p>@enderror
+            <div class="rounded-2xl border border-zinc-200 bg-zinc-50 p-5 dark:border-zinc-800 dark:bg-zinc-900/60">
+                <x-auth-session-status class="mb-5 rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-center text-sm text-emerald-800 dark:border-emerald-900/60 dark:bg-emerald-950/40 dark:text-emerald-200" :status="session('status')" />
+
+                <form method="POST" action="{{ route('register.store') }}" class="flex flex-col gap-5">
+                    @csrf
+
+                    <div class="grid gap-2">
+                        <label for="name" class="text-sm font-semibold text-zinc-800 dark:text-zinc-200">{{ __('Name') }}</label>
+                        <input id="name" name="name" type="text" value="{{ old('name') }}" required autofocus autocomplete="name" placeholder="{{ __('Full name') }}" class="w-full rounded-xl border border-zinc-300 bg-white px-4 py-3 text-sm text-zinc-950 shadow-sm outline-none transition placeholder:text-zinc-400 focus:border-sky-500 focus:ring-4 focus:ring-sky-100 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white dark:placeholder:text-zinc-500 dark:focus:border-sky-400 dark:focus:ring-sky-950" />
+                        @error('name')<p class="text-sm font-medium text-red-600 dark:text-red-400">{{ $message }}</p>@enderror
+                    </div>
+
+                    <div class="grid gap-2">
+                        <label for="email" class="text-sm font-semibold text-zinc-800 dark:text-zinc-200">{{ __('Email address') }}</label>
+                        <input id="email" name="email" type="email" value="{{ old('email') }}" required autocomplete="email" placeholder="email@example.com" class="w-full rounded-xl border border-zinc-300 bg-white px-4 py-3 text-sm text-zinc-950 shadow-sm outline-none transition placeholder:text-zinc-400 focus:border-sky-500 focus:ring-4 focus:ring-sky-100 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white dark:placeholder:text-zinc-500 dark:focus:border-sky-400 dark:focus:ring-sky-950" />
+                        @error('email')<p class="text-sm font-medium text-red-600 dark:text-red-400">{{ $message }}</p>@enderror
+                    </div>
+
+                    <div class="grid gap-2">
+                        <label for="password" class="text-sm font-semibold text-zinc-800 dark:text-zinc-200">{{ __('Password') }}</label>
+                        <input id="password" name="password" type="password" required autocomplete="new-password" placeholder="{{ __('Password') }}" class="w-full rounded-xl border border-zinc-300 bg-white px-4 py-3 text-sm text-zinc-950 shadow-sm outline-none transition placeholder:text-zinc-400 focus:border-sky-500 focus:ring-4 focus:ring-sky-100 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white dark:placeholder:text-zinc-500 dark:focus:border-sky-400 dark:focus:ring-sky-950" />
+                        @error('password')<p class="text-sm font-medium text-red-600 dark:text-red-400">{{ $message }}</p>@enderror
+                    </div>
+
+                    <div class="grid gap-2">
+                        <label for="password_confirmation" class="text-sm font-semibold text-zinc-800 dark:text-zinc-200">{{ __('Confirm password') }}</label>
+                        <input id="password_confirmation" name="password_confirmation" type="password" required autocomplete="new-password" placeholder="{{ __('Confirm password') }}" class="w-full rounded-xl border border-zinc-300 bg-white px-4 py-3 text-sm text-zinc-950 shadow-sm outline-none transition placeholder:text-zinc-400 focus:border-sky-500 focus:ring-4 focus:ring-sky-100 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white dark:placeholder:text-zinc-500 dark:focus:border-sky-400 dark:focus:ring-sky-950" />
+                    </div>
+
+                    <button type="submit" class="w-full rounded-xl bg-zinc-950 px-4 py-3 text-sm font-bold text-white shadow-sm transition hover:bg-zinc-800 focus:outline-none focus:ring-4 focus:ring-sky-200 dark:bg-white dark:text-zinc-950 dark:hover:bg-zinc-200 dark:focus:ring-sky-950" data-test="register-user-button">
+                        {{ __('Create account') }}
+                    </button>
+                </form>
             </div>
 
-            <div class="grid gap-2">
-                <label for="password" class="text-sm font-medium text-zinc-800 dark:text-zinc-200">{{ __('Password') }}</label>
-                <input id="password" name="password" type="password" required autocomplete="new-password" placeholder="{{ __('Password') }}" class="w-full rounded-xl border border-zinc-300 bg-white px-3 py-2.5 text-sm text-zinc-900 shadow-sm outline-none transition placeholder:text-zinc-400 focus:border-cyan-500 focus:ring-2 focus:ring-cyan-200 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white dark:placeholder:text-zinc-500 dark:focus:border-cyan-400 dark:focus:ring-cyan-900" />
-                @error('password')<p class="text-sm text-red-600 dark:text-red-400">{{ $message }}</p>@enderror
+            <div class="text-center text-sm text-zinc-600 dark:text-zinc-400">
+                <span>{{ __('Already have access?') }}</span>
+                <a href="{{ route('login') }}" wire:navigate class="font-semibold text-sky-700 underline underline-offset-4 hover:text-sky-900 dark:text-sky-300">{{ __('Log in') }}</a>
             </div>
-
-            <div class="grid gap-2">
-                <label for="password_confirmation" class="text-sm font-medium text-zinc-800 dark:text-zinc-200">{{ __('Confirm password') }}</label>
-                <input id="password_confirmation" name="password_confirmation" type="password" required autocomplete="new-password" placeholder="{{ __('Confirm password') }}" class="w-full rounded-xl border border-zinc-300 bg-white px-3 py-2.5 text-sm text-zinc-900 shadow-sm outline-none transition placeholder:text-zinc-400 focus:border-cyan-500 focus:ring-2 focus:ring-cyan-200 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white dark:placeholder:text-zinc-500 dark:focus:border-cyan-400 dark:focus:ring-cyan-900" />
-            </div>
-
-            <button type="submit" class="w-full rounded-xl bg-zinc-950 px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-zinc-800 focus:outline-none focus:ring-2 focus:ring-cyan-400 dark:bg-white dark:text-zinc-950 dark:hover:bg-zinc-200" data-test="register-user-button">
-                {{ __('Create account') }}
-            </button>
-        </form>
-
-        <div class="space-x-1 text-center text-sm text-zinc-600 rtl:space-x-reverse dark:text-zinc-400">
-            <span>{{ __('Already have an account?') }}</span>
-            <a href="{{ route('login') }}" wire:navigate class="font-medium text-cyan-700 underline underline-offset-4 hover:text-cyan-900 dark:text-cyan-300">{{ __('Log in') }}</a>
         </div>
-    </div>
+    </section>
 </x-layouts::auth>
diff --git a/resources/views/livewire/auth/reset-password.blade.php b/resources/views/livewire/auth/reset-password.blade.php
index 86001bdd..019aafdf 100644
--- a/resources/views/livewire/auth/reset-password.blade.php
+++ b/resources/views/livewire/auth/reset-password.blade.php
@@ -1,54 +1,60 @@
 <x-layouts::auth :title="__('Reset password')">
-    <div class="flex flex-col gap-6">
-        <x-auth-header :title="__('Reset password')" :description="__('Please enter your new password below')" />
+    <section class="mx-auto w-full max-w-md overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-xl shadow-zinc-900/10 dark:border-zinc-800 dark:bg-zinc-950">
+        <div class="h-1.5 bg-gradient-to-r from-emerald-500 via-sky-500 to-blue-600"></div>
 
-        <!-- Session Status -->
-        <x-auth-session-status class="text-center" :status="session('status')" />
-
-        <form method="POST" action="{{ route('password.update') }}" class="flex flex-col gap-6">
-            @csrf
-            <!-- Token -->
-            <input type="hidden" name="token" value="{{ request()->route('token') }}">
-
-            <!-- Email Address -->
-            <flux:input
-                name="email"
-                value="{{ request('email') }}"
-                :label="__('Email')"
-                type="email"
-                required
-                autocomplete="email"
-            />
-
-            <!-- Password -->
-            <flux:input
-                name="password"
-                :label="__('Password')"
-                type="password"
-                required
-                autocomplete="new-password"
-                :placeholder="__('Password')"
-                passwordrules="{{ \Illuminate\Validation\Rules\Password::defaults()->toPasswordRulesString() }}"
-                viewable
-            />
-
-            <!-- Confirm Password -->
-            <flux:input
-                name="password_confirmation"
-                :label="__('Confirm password')"
-                type="password"
-                required
-                autocomplete="new-password"
-                :placeholder="__('Confirm password')"
-                passwordrules="{{ \Illuminate\Validation\Rules\Password::defaults()->toPasswordRulesString() }}"
-                viewable
-            />
-
-            <div class="flex items-center justify-end">
-                <flux:button type="submit" variant="primary" class="w-full" data-test="reset-password-button">
-                    {{ __('Reset password') }}
-                </flux:button>
+        <div class="space-y-7 p-6 sm:p-8">
+            <div class="space-y-5 text-center">
+                <div class="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-zinc-950 text-sm font-black text-white dark:bg-white dark:text-zinc-950">WMS</div>
+                <div class="space-y-2">
+                    <p class="text-xs font-semibold uppercase tracking-[0.24em] text-sky-700 dark:text-sky-300">{{ __('Password reset') }}</p>
+                    <h1 class="text-2xl font-bold tracking-tight text-zinc-950 dark:text-white">{{ __('Secure account recovery') }}</h1>
+                    <p class="text-sm leading-6 text-zinc-600 dark:text-zinc-400">{{ __('Create a new password for your WMS account.') }}</p>
+                </div>
             </div>
-        </form>
-    </div>
+
+            <div class="rounded-2xl border border-zinc-200 bg-zinc-50 p-5 dark:border-zinc-800 dark:bg-zinc-900/60">
+                <x-auth-session-status class="mb-5 rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-center text-sm text-emerald-800 dark:border-emerald-900/60 dark:bg-emerald-950/40 dark:text-emerald-200" :status="session('status')" />
+
+                <form method="POST" action="{{ route('password.update') }}" class="flex flex-col gap-5">
+                    @csrf
+                    <input type="hidden" name="token" value="{{ request()->route('token') }}">
+
+                    <flux:input
+                        name="email"
+                        value="{{ request('email') }}"
+                        :label="__('Email')"
+                        type="email"
+                        required
+                        autocomplete="email"
+                    />
+
+                    <flux:input
+                        name="password"
+                        :label="__('Password')"
+                        type="password"
+                        required
+                        autocomplete="new-password"
+                        :placeholder="__('Password')"
+                        passwordrules="{{ \Illuminate\Validation\Rules\Password::defaults()->toPasswordRulesString() }}"
+                        viewable
+                    />
+
+                    <flux:input
+                        name="password_confirmation"
+                        :label="__('Confirm password')"
+                        type="password"
+                        required
+                        autocomplete="new-password"
+                        :placeholder="__('Confirm password')"
+                        passwordrules="{{ \Illuminate\Validation\Rules\Password::defaults()->toPasswordRulesString() }}"
+                        viewable
+                    />
+
+                    <flux:button type="submit" variant="primary" class="w-full" data-test="reset-password-button">
+                        {{ __('Reset password') }}
+                    </flux:button>
+                </form>
+            </div>
+        </div>
+    </section>
 </x-layouts::auth>
diff --git a/resources/views/livewire/auth/two-factor-challenge.blade.php b/resources/views/livewire/auth/two-factor-challenge.blade.php
index febe7d57..e5b1cf88 100644
--- a/resources/views/livewire/auth/two-factor-challenge.blade.php
+++ b/resources/views/livewire/auth/two-factor-challenge.blade.php
@@ -1,101 +1,116 @@
 <x-layouts::auth :title="__('Two-factor authentication')">
-    <div class="flex flex-col gap-6">
-        <div
-            class="relative w-full h-auto"
-            x-cloak
-            x-data="{
-                showRecoveryInput: @js($errors->has('recovery_code')),
-                code: '',
-                recovery_code: '',
-                focusOtp() {
-                    this.$nextTick(() => this.$refs.otp?.querySelector('input')?.focus());
-                },
-                init() {
-                    if (! this.showRecoveryInput) {
-                        this.focusOtp();
-                    }
-                },
-                toggleInput() {
-                    this.showRecoveryInput = !this.showRecoveryInput;
+    <section class="mx-auto w-full max-w-md overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-xl shadow-zinc-900/10 dark:border-zinc-800 dark:bg-zinc-950">
+        <div class="h-1.5 bg-gradient-to-r from-emerald-500 via-sky-500 to-blue-600"></div>
 
-                    this.code = '';
-                    this.recovery_code = '';
-
-                    $nextTick(() => {
-                        this.showRecoveryInput
-                            ? this.$refs.recovery_code?.focus()
-                            : this.focusOtp();
-                    });
-                },
-            }"
-        >
-            <div x-show="!showRecoveryInput">
-                <x-auth-header
-                    :title="__('Authentication code')"
-                    :description="__('Enter the authentication code provided by your authenticator application.')"
-                />
+        <div class="space-y-7 p-6 sm:p-8">
+            <div class="space-y-5 text-center">
+                <div class="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-zinc-950 text-sm font-black text-white dark:bg-white dark:text-zinc-950">WMS</div>
+                <div class="space-y-2">
+                    <p class="text-xs font-semibold uppercase tracking-[0.24em] text-sky-700 dark:text-sky-300">{{ __('Multi-factor security') }}</p>
+                    <h1 class="text-2xl font-bold tracking-tight text-zinc-950 dark:text-white">{{ __('Verify your sign in') }}</h1>
+                    <p class="text-sm leading-6 text-zinc-600 dark:text-zinc-400">{{ __('Complete the security challenge to continue into WMS.') }}</p>
+                </div>
             </div>
 
-            <div x-show="showRecoveryInput">
-                <x-auth-header
-                    :title="__('Recovery code')"
-                    :description="__('Please confirm access to your account by entering one of your emergency recovery codes.')"
-                />
-            </div>
+            <div class="rounded-2xl border border-zinc-200 bg-zinc-50 p-5 dark:border-zinc-800 dark:bg-zinc-900/60">
+                <div
+                    class="relative w-full h-auto"
+                    x-cloak
+                    x-data="{
+                        showRecoveryInput: @js($errors->has('recovery_code')),
+                        code: '',
+                        recovery_code: '',
+                        focusOtp() {
+                            this.$nextTick(() => this.$refs.otp?.querySelector('input')?.focus());
+                        },
+                        init() {
+                            if (! this.showRecoveryInput) {
+                                this.focusOtp();
+                            }
+                        },
+                        toggleInput() {
+                            this.showRecoveryInput = !this.showRecoveryInput;
 
-            <form method="POST" action="{{ route('two-factor.login.store') }}">
-                @csrf
+                            this.code = '';
+                            this.recovery_code = '';
 
-                <div class="space-y-5 text-center">
+                            $nextTick(() => {
+                                this.showRecoveryInput
+                                    ? this.$refs.recovery_code?.focus()
+                                    : this.focusOtp();
+                            });
+                        },
+                    }"
+                >
                     <div x-show="!showRecoveryInput">
-                        <div class="flex items-center justify-center my-5" x-ref="otp">
-                            <flux:otp
-                                x-model="code"
-                                length="6"
-                                name="code"
-                                label="OTP Code"
-                                label:sr-only
-                                class="mx-auto"
-                             />
-                        </div>
+                        <x-auth-header
+                            :title="__('Authentication code')"
+                            :description="__('Enter the authentication code provided by your authenticator application.')"
+                        />
                     </div>
 
                     <div x-show="showRecoveryInput">
-                        <div class="my-5">
-                            <flux:input
-                                type="text"
-                                name="recovery_code"
-                                x-ref="recovery_code"
-                                x-bind:required="showRecoveryInput"
-                                autocomplete="one-time-code"
-                                x-model="recovery_code"
-                            />
+                        <x-auth-header
+                            :title="__('Recovery code')"
+                            :description="__('Please confirm access to your account by entering one of your emergency recovery codes.')"
+                        />
+                    </div>
+
+                    <form method="POST" action="{{ route('two-factor.login.store') }}" class="mt-6">
+                        @csrf
+
+                        <div class="space-y-5 text-center">
+                            <div x-show="!showRecoveryInput">
+                                <div class="my-5 flex items-center justify-center" x-ref="otp">
+                                    <flux:otp
+                                        x-model="code"
+                                        length="6"
+                                        name="code"
+                                        label="OTP Code"
+                                        label:sr-only
+                                        class="mx-auto"
+                                    />
+                                </div>
+                            </div>
+
+                            <div x-show="showRecoveryInput">
+                                <div class="my-5">
+                                    <flux:input
+                                        type="text"
+                                        name="recovery_code"
+                                        x-ref="recovery_code"
+                                        x-bind:required="showRecoveryInput"
+                                        autocomplete="one-time-code"
+                                        x-model="recovery_code"
+                                    />
+                                </div>
+
+                                @error('recovery_code')
+                                    <flux:text color="red">
+                                        {{ $message }}
+                                    </flux:text>
+                                @enderror
+                            </div>
+
+                            <flux:button
+                                variant="primary"
+                                type="submit"
+                                class="w-full"
+                            >
+                                {{ __('Continue') }}
+                            </flux:button>
                         </div>
 
-                        @error('recovery_code')
-                            <flux:text color="red">
-                                {{ $message }}
-                            </flux:text>
-                        @enderror
-                    </div>
-
-                    <flux:button
-                        variant="primary"
-                        type="submit"
-                        class="w-full"
-                    >
-                        {{ __('Continue') }}
-                    </flux:button>
+                        <div class="mt-5 text-center text-sm leading-5 text-zinc-600 dark:text-zinc-400">
+                            <span>{{ __('or you can') }}</span>
+                            <button type="button" class="inline font-semibold text-sky-700 underline underline-offset-4 hover:text-sky-900 dark:text-sky-300" @click="toggleInput()">
+                                <span x-show="!showRecoveryInput">{{ __('login using a recovery code') }}</span>
+                                <span x-show="showRecoveryInput">{{ __('login using an authentication code') }}</span>
+                            </button>
+                        </div>
+                    </form>
                 </div>
-
-                <div class="mt-5 space-x-0.5 text-sm leading-5 text-center">
-                    <span class="opacity-50">{{ __('or you can') }}</span>
-                    <div class="inline font-medium underline cursor-pointer opacity-80">
-                        <span x-show="!showRecoveryInput" @click="toggleInput()">{{ __('login using a recovery code') }}</span>
-                        <span x-show="showRecoveryInput" @click="toggleInput()">{{ __('login using an authentication code') }}</span>
-                    </div>
-                </div>
-            </form>
+            </div>
         </div>
-    </div>
+    </section>
 </x-layouts::auth>
diff --git a/resources/views/livewire/auth/verify-email.blade.php b/resources/views/livewire/auth/verify-email.blade.php
index 50e7b440..c73227fd 100644
--- a/resources/views/livewire/auth/verify-email.blade.php
+++ b/resources/views/livewire/auth/verify-email.blade.php
@@ -1,29 +1,44 @@
 <x-layouts::auth :title="__('Email verification')">
-    <div class="mt-4 flex flex-col gap-6">
-        <flux:text class="text-center">
-            {{ __('Please verify your email address by clicking on the link we just emailed to you.') }}
-        </flux:text>
+    <section class="mx-auto w-full max-w-md overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-xl shadow-zinc-900/10 dark:border-zinc-800 dark:bg-zinc-950">
+        <div class="h-1.5 bg-gradient-to-r from-emerald-500 via-sky-500 to-blue-600"></div>
 
-        @if (session('status') == 'verification-link-sent')
-            <flux:text class="text-center font-medium !dark:text-green-400 !text-green-600">
-                {{ __('A new verification link has been sent to the email address you provided during registration.') }}
-            </flux:text>
-        @endif
+        <div class="space-y-7 p-6 sm:p-8">
+            <div class="space-y-5 text-center">
+                <div class="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-zinc-950 text-sm font-black text-white dark:bg-white dark:text-zinc-950">WMS</div>
+                <div class="space-y-2">
+                    <p class="text-xs font-semibold uppercase tracking-[0.24em] text-sky-700 dark:text-sky-300">{{ __('Email verification') }}</p>
+                    <h1 class="text-2xl font-bold tracking-tight text-zinc-950 dark:text-white">{{ __('Confirm your account') }}</h1>
+                    <p class="text-sm leading-6 text-zinc-600 dark:text-zinc-400">{{ __('Verify your email address before accessing the WMS dashboard.') }}</p>
+                </div>
+            </div>
 
-        <div class="flex flex-col items-center justify-between space-y-3">
-            <form method="POST" action="{{ route('verification.send') }}">
-                @csrf
-                <flux:button type="submit" variant="primary" class="w-full">
-                    {{ __('Resend verification email') }}
-                </flux:button>
-            </form>
+            <div class="rounded-2xl border border-zinc-200 bg-zinc-50 p-5 dark:border-zinc-800 dark:bg-zinc-900/60">
+                <flux:text class="text-center leading-6">
+                    {{ __('Please verify your email address by clicking on the link we just emailed to you.') }}
+                </flux:text>
 
-            <form method="POST" action="{{ route('logout') }}">
-                @csrf
-                <flux:button variant="ghost" type="submit" class="text-sm cursor-pointer" data-test="logout-button">
-                    {{ __('Log out') }}
-                </flux:button>
-            </form>
+                @if (session('status') == 'verification-link-sent')
+                    <div class="mt-5 rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-center text-sm font-semibold text-emerald-800 dark:border-emerald-900/60 dark:bg-emerald-950/40 dark:text-emerald-200">
+                        {{ __('A new verification link has been sent to the email address you provided during registration.') }}
+                    </div>
+                @endif
+
+                <div class="mt-6 flex flex-col gap-3">
+                    <form method="POST" action="{{ route('verification.send') }}">
+                        @csrf
+                        <flux:button type="submit" variant="primary" class="w-full">
+                            {{ __('Resend verification email') }}
+                        </flux:button>
+                    </form>
+
+                    <form method="POST" action="{{ route('logout') }}">
+                        @csrf
+                        <flux:button variant="ghost" type="submit" class="w-full cursor-pointer text-sm" data-test="logout-button">
+                            {{ __('Log out') }}
+                        </flux:button>
+                    </form>
+                </div>
+            </div>
         </div>
-    </div>
+    </section>
 </x-layouts::auth>
diff --git a/tests/Browser/Auth/AuthBrandingLayoutBrowserTest.php b/tests/Browser/Auth/AuthBrandingLayoutBrowserTest.php
new file mode 100644
index 00000000..5c12ba28
--- /dev/null
+++ b/tests/Browser/Auth/AuthBrandingLayoutBrowserTest.php
@@ -0,0 +1,31 @@
+<?php
+
+namespace Tests\Browser\Auth;
+
+use Laravel\Dusk\Browser;
+use Tests\DuskTestCase;
+
+class AuthBrandingLayoutBrowserTest extends DuskTestCase
+{
+    /**
+     * Ensure guest authentication pages keep the professional WMS branding and do not overflow horizontally.
+     */
+    public function test_guest_authentication_pages_are_branded_and_do_not_overflow(): void
+    {
+        $pages = [
+            route('login'),
+            route('register'),
+            route('password.request'),
+        ];
+
+        foreach ($pages as $page) {
+            $this->browse(function (Browser $browser) use ($page): void {
+                $browser->resize(1280, 900)
+                    ->visit($page)
+                    ->assertSee('WMS')
+                    ->assertSee('Warehouse Management System')
+                    ->assertScript('document.documentElement.scrollWidth <= document.documentElement.clientWidth + 1');
+            });
+        }
+    }
+}