diff --git a/app/Http/Controllers/Auth/VerifyEmailController.php b/app/Http/Controllers/Auth/VerifyEmailController.php
new file mode 100644
index 0000000..a300bfa
--- /dev/null
+++ b/app/Http/Controllers/Auth/VerifyEmailController.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Http\Controllers\Auth;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Auth\Events\Verified;
+use Illuminate\Foundation\Auth\EmailVerificationRequest;
+use Illuminate\Http\RedirectResponse;
+
+class VerifyEmailController extends Controller
+{
+    /**
+     * Mark the authenticated user's email address as verified.
+     */
+    public function __invoke(EmailVerificationRequest $request): RedirectResponse
+    {
+        if ($request->user()->hasVerifiedEmail()) {
+            return redirect()->intended(route('dashboard', absolute: false).'?verified=1');
+        }
+
+        if ($request->user()->markEmailAsVerified()) {
+            /** @var \Illuminate\Contracts\Auth\MustVerifyEmail $user */
+            $user = $request->user();
+
+            event(new Verified($user));
+        }
+
+        return redirect()->intended(route('dashboard', absolute: false).'?verified=1');
+    }
+}
diff --git a/app/Livewire/Actions/Logout.php b/app/Livewire/Actions/Logout.php
new file mode 100644
index 0000000..45993bb
--- /dev/null
+++ b/app/Livewire/Actions/Logout.php
@@ -0,0 +1,22 @@
+<?php
+
+namespace App\Livewire\Actions;
+
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Session;
+
+class Logout
+{
+    /**
+     * Log the current user out of the application.
+     */
+    public function __invoke()
+    {
+        Auth::guard('web')->logout();
+
+        Session::invalidate();
+        Session::regenerateToken();
+
+        return redirect('/');
+    }
+}
diff --git a/app/Livewire/Auth/ConfirmPassword.php b/app/Livewire/Auth/ConfirmPassword.php
new file mode 100644
index 0000000..9a89db0
--- /dev/null
+++ b/app/Livewire/Auth/ConfirmPassword.php
@@ -0,0 +1,37 @@
+<?php
+
+namespace App\Livewire\Auth;
+
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\ValidationException;
+use Livewire\Attributes\Layout;
+use Livewire\Component;
+
+#[Layout('components.layouts.auth')]
+class ConfirmPassword extends Component
+{
+    public string $password = '';
+
+    /**
+     * Confirm the current user's password.
+     */
+    public function confirmPassword(): void
+    {
+        $this->validate([
+            'password' => ['required', 'string'],
+        ]);
+
+        if (! Auth::guard('web')->validate([
+            'email' => Auth::user()->email,
+            'password' => $this->password,
+        ])) {
+            throw ValidationException::withMessages([
+                'password' => __('auth.password'),
+            ]);
+        }
+
+        session(['auth.password_confirmed_at' => time()]);
+
+        $this->redirectIntended(default: route('dashboard', absolute: false), navigate: true);
+    }
+}
diff --git a/app/Livewire/Auth/ForgotPassword.php b/app/Livewire/Auth/ForgotPassword.php
new file mode 100644
index 0000000..7f3b681
--- /dev/null
+++ b/app/Livewire/Auth/ForgotPassword.php
@@ -0,0 +1,27 @@
+<?php
+
+namespace App\Livewire\Auth;
+
+use Illuminate\Support\Facades\Password;
+use Livewire\Attributes\Layout;
+use Livewire\Component;
+
+#[Layout('components.layouts.auth')]
+class ForgotPassword extends Component
+{
+    public string $email = '';
+
+    /**
+     * Send a password reset link to the provided email address.
+     */
+    public function sendPasswordResetLink(): void
+    {
+        $this->validate([
+            'email' => ['required', 'string', 'email'],
+        ]);
+
+        Password::sendResetLink($this->only('email'));
+
+        session()->flash('status', __('A reset link will be sent if the account exists.'));
+    }
+}
diff --git a/app/Livewire/Auth/Login.php b/app/Livewire/Auth/Login.php
new file mode 100644
index 0000000..9925f63
--- /dev/null
+++ b/app/Livewire/Auth/Login.php
@@ -0,0 +1,77 @@
+<?php
+
+namespace App\Livewire\Auth;
+
+use Illuminate\Auth\Events\Lockout;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\RateLimiter;
+use Illuminate\Support\Facades\Session;
+use Illuminate\Support\Str;
+use Illuminate\Validation\ValidationException;
+use Livewire\Attributes\Layout;
+use Livewire\Attributes\Validate;
+use Livewire\Component;
+
+#[Layout('components.layouts.auth')]
+class Login extends Component
+{
+    #[Validate('required|string|email')]
+    public string $email = '';
+
+    #[Validate('required|string')]
+    public string $password = '';
+
+    public bool $remember = false;
+
+    /**
+     * Handle an incoming authentication request.
+     */
+    public function login(): void
+    {
+        $this->validate();
+
+        $this->ensureIsNotRateLimited();
+
+        if (! Auth::attempt(['email' => $this->email, 'password' => $this->password], $this->remember)) {
+            RateLimiter::hit($this->throttleKey());
+
+            throw ValidationException::withMessages([
+                'email' => __('auth.failed'),
+            ]);
+        }
+
+        RateLimiter::clear($this->throttleKey());
+        Session::regenerate();
+
+        $this->redirectIntended(default: route('dashboard', absolute: false), navigate: true);
+    }
+
+    /**
+     * Ensure the authentication request is not rate limited.
+     */
+    protected function ensureIsNotRateLimited(): void
+    {
+        if (! RateLimiter::tooManyAttempts($this->throttleKey(), 5)) {
+            return;
+        }
+
+        event(new Lockout(request()));
+
+        $seconds = RateLimiter::availableIn($this->throttleKey());
+
+        throw ValidationException::withMessages([
+            'email' => __('auth.throttle', [
+                'seconds' => $seconds,
+                'minutes' => ceil($seconds / 60),
+            ]),
+        ]);
+    }
+
+    /**
+     * Get the authentication rate limiting throttle key.
+     */
+    protected function throttleKey(): string
+    {
+        return Str::transliterate(Str::lower($this->email).'|'.request()->ip());
+    }
+}
diff --git a/app/Livewire/Auth/Register.php b/app/Livewire/Auth/Register.php
new file mode 100644
index 0000000..8541536
--- /dev/null
+++ b/app/Livewire/Auth/Register.php
@@ -0,0 +1,43 @@
+<?php
+
+namespace App\Livewire\Auth;
+
+use App\Models\User;
+use Illuminate\Auth\Events\Registered;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Hash;
+use Illuminate\Validation\Rules;
+use Livewire\Attributes\Layout;
+use Livewire\Component;
+
+#[Layout('components.layouts.auth')]
+class Register extends Component
+{
+    public string $name = '';
+
+    public string $email = '';
+
+    public string $password = '';
+
+    public string $password_confirmation = '';
+
+    /**
+     * Handle an incoming registration request.
+     */
+    public function register(): void
+    {
+        $validated = $this->validate([
+            'name' => ['required', 'string', 'max:255'],
+            'email' => ['required', 'string', 'lowercase', 'email', 'max:255', 'unique:'.User::class],
+            'password' => ['required', 'string', 'confirmed', Rules\Password::defaults()],
+        ]);
+
+        $validated['password'] = Hash::make($validated['password']);
+
+        event(new Registered(($user = User::create($validated))));
+
+        Auth::login($user);
+
+        $this->redirect(route('dashboard', absolute: false), navigate: true);
+    }
+}
diff --git a/app/Livewire/Auth/ResetPassword.php b/app/Livewire/Auth/ResetPassword.php
new file mode 100644
index 0000000..28b3940
--- /dev/null
+++ b/app/Livewire/Auth/ResetPassword.php
@@ -0,0 +1,76 @@
+<?php
+
+namespace App\Livewire\Auth;
+
+use Illuminate\Auth\Events\PasswordReset;
+use Illuminate\Support\Facades\Hash;
+use Illuminate\Support\Facades\Password;
+use Illuminate\Support\Facades\Session;
+use Illuminate\Support\Str;
+use Illuminate\Validation\Rules;
+use Livewire\Attributes\Layout;
+use Livewire\Attributes\Locked;
+use Livewire\Component;
+
+#[Layout('components.layouts.auth')]
+class ResetPassword extends Component
+{
+    #[Locked]
+    public string $token = '';
+
+    public string $email = '';
+
+    public string $password = '';
+
+    public string $password_confirmation = '';
+
+    /**
+     * Mount the component.
+     */
+    public function mount(string $token): void
+    {
+        $this->token = $token;
+
+        $this->email = request()->string('email');
+    }
+
+    /**
+     * Reset the password for the given user.
+     */
+    public function resetPassword(): void
+    {
+        $this->validate([
+            'token' => ['required'],
+            'email' => ['required', 'string', 'email'],
+            'password' => ['required', 'string', 'confirmed', Rules\Password::defaults()],
+        ]);
+
+        // Here we will attempt to reset the user's password. If it is successful we
+        // will update the password on an actual user model and persist it to the
+        // database. Otherwise we will parse the error and return the response.
+        $status = Password::reset(
+            $this->only('email', 'password', 'password_confirmation', 'token'),
+            function ($user) {
+                $user->forceFill([
+                    'password' => Hash::make($this->password),
+                    'remember_token' => Str::random(60),
+                ])->save();
+
+                event(new PasswordReset($user));
+            }
+        );
+
+        // If the password was successfully reset, we will redirect the user back to
+        // the application's home authenticated view. If there is an error we can
+        // redirect them back to where they came from with their error message.
+        if ($status != Password::PasswordReset) {
+            $this->addError('email', __($status));
+
+            return;
+        }
+
+        Session::flash('status', __($status));
+
+        $this->redirectRoute('login', navigate: true);
+    }
+}
diff --git a/app/Livewire/Auth/VerifyEmail.php b/app/Livewire/Auth/VerifyEmail.php
new file mode 100644
index 0000000..ba11d73
--- /dev/null
+++ b/app/Livewire/Auth/VerifyEmail.php
@@ -0,0 +1,39 @@
+<?php
+
+namespace App\Livewire\Auth;
+
+use App\Livewire\Actions\Logout;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Session;
+use Livewire\Attributes\Layout;
+use Livewire\Component;
+
+#[Layout('components.layouts.auth')]
+class VerifyEmail extends Component
+{
+    /**
+     * Send an email verification notification to the user.
+     */
+    public function sendVerification(): void
+    {
+        if (Auth::user()->hasVerifiedEmail()) {
+            $this->redirectIntended(default: route('dashboard', absolute: false), navigate: true);
+
+            return;
+        }
+
+        Auth::user()->sendEmailVerificationNotification();
+
+        Session::flash('status', 'verification-link-sent');
+    }
+
+    /**
+     * Log the current user out of the application.
+     */
+    public function logout(Logout $logout): void
+    {
+        $logout();
+
+        $this->redirect('/', navigate: true);
+    }
+}
diff --git a/app/Livewire/Dashboard/Dashboard.php b/app/Livewire/Dashboard/Dashboard.php
new file mode 100644
index 0000000..1e0ef9a
--- /dev/null
+++ b/app/Livewire/Dashboard/Dashboard.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Livewire\Dashboard;
+
+use Livewire\Component;
+
+class Dashboard extends Component
+{
+    public function render()
+    {
+        return view('livewire.dashboard.dashboard')->layout('components.layouts.dashboard');
+    }
+}
diff --git a/app/Livewire/Settings/Appearance.php b/app/Livewire/Settings/Appearance.php
new file mode 100644
index 0000000..be0927a
--- /dev/null
+++ b/app/Livewire/Settings/Appearance.php
@@ -0,0 +1,12 @@
+<?php
+
+namespace App\Livewire\Settings;
+
+use Livewire\Attributes\Layout;
+use Livewire\Component;
+#[Layout('components.layouts.dashboard')]
+
+class Appearance extends Component
+{
+    //
+}
diff --git a/app/Livewire/Settings/DeleteUserForm.php b/app/Livewire/Settings/DeleteUserForm.php
new file mode 100644
index 0000000..22c34eb
--- /dev/null
+++ b/app/Livewire/Settings/DeleteUserForm.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Livewire\Settings;
+
+use App\Livewire\Actions\Logout;
+use Illuminate\Support\Facades\Auth;
+use Livewire\Attributes\Layout;
+use Livewire\Component;
+#[Layout('components.layouts.dashboard')]
+
+class DeleteUserForm extends Component
+{
+    public string $password = '';
+
+    /**
+     * Delete the currently authenticated user.
+     */
+    public function deleteUser(Logout $logout): void
+    {
+        $this->validate([
+            'password' => ['required', 'string', 'current_password'],
+        ]);
+
+        tap(Auth::user(), $logout(...))->delete();
+
+        $this->redirect('/', navigate: true);
+    }
+}
diff --git a/app/Livewire/Settings/Password.php b/app/Livewire/Settings/Password.php
new file mode 100644
index 0000000..9fb0d26
--- /dev/null
+++ b/app/Livewire/Settings/Password.php
@@ -0,0 +1,45 @@
+<?php
+
+namespace App\Livewire\Settings;
+
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Hash;
+use Illuminate\Validation\Rules\Password as PasswordRule;
+use Illuminate\Validation\ValidationException;
+use Livewire\Attributes\Layout;
+use Livewire\Component;
+#[Layout('components.layouts.dashboard')]
+
+class Password extends Component
+{
+    public string $current_password = '';
+
+    public string $password = '';
+
+    public string $password_confirmation = '';
+
+    /**
+     * Update the password for the currently authenticated user.
+     */
+    public function updatePassword(): void
+    {
+        try {
+            $validated = $this->validate([
+                'current_password' => ['required', 'string', 'current_password'],
+                'password' => ['required', 'string', PasswordRule::defaults(), 'confirmed'],
+            ]);
+        } catch (ValidationException $e) {
+            $this->reset('current_password', 'password', 'password_confirmation');
+
+            throw $e;
+        }
+
+        Auth::user()->update([
+            'password' => Hash::make($validated['password']),
+        ]);
+
+        $this->reset('current_password', 'password', 'password_confirmation');
+
+        $this->dispatch('password-updated');
+    }
+}
diff --git a/app/Livewire/Settings/Profile.php b/app/Livewire/Settings/Profile.php
new file mode 100644
index 0000000..d114ad2
--- /dev/null
+++ b/app/Livewire/Settings/Profile.php
@@ -0,0 +1,76 @@
+<?php
+
+namespace App\Livewire\Settings;
+
+use App\Models\User;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Session;
+use Illuminate\Validation\Rule;
+use Livewire\Attributes\Layout;
+use Livewire\Component;
+
+#[Layout('components.layouts.dashboard')]
+class Profile extends Component
+{
+    public string $name = '';
+
+    public string $email = '';
+
+    /**
+     * Mount the component.
+     */
+    public function mount(): void
+    {
+        $this->name = Auth::user()->name;
+        $this->email = Auth::user()->email;
+    }
+
+    /**
+     * Update the profile information for the currently authenticated user.
+     */
+    public function updateProfileInformation(): void
+    {
+        $user = Auth::user();
+
+        $validated = $this->validate([
+            'name' => ['required', 'string', 'max:255'],
+
+            'email' => [
+                'required',
+                'string',
+                'lowercase',
+                'email',
+                'max:255',
+                Rule::unique(User::class)->ignore($user->id),
+            ],
+        ]);
+
+        $user->fill($validated);
+
+        if ($user->isDirty('email')) {
+            $user->email_verified_at = null;
+        }
+
+        $user->save();
+
+        $this->dispatch('profile-updated', name: $user->name);
+    }
+
+    /**
+     * Send an email verification notification to the current user.
+     */
+    public function resendVerificationNotification(): void
+    {
+        $user = Auth::user();
+
+        if ($user->hasVerifiedEmail()) {
+            $this->redirectIntended(default: route('dashboard', absolute: false));
+
+            return;
+        }
+
+        $user->sendEmailVerificationNotification();
+
+        Session::flash('status', 'verification-link-sent');
+    }
+}
diff --git a/app/Models/User.php b/app/Models/User.php
index 81e5ffe..3a0508e 100644
--- a/app/Models/User.php
+++ b/app/Models/User.php
@@ -8,8 +8,10 @@ use Filament\Panel;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Foundation\Auth\User as Authenticatable;
 use Illuminate\Notifications\Notifiable;
+use Illuminate\Contracts\Auth\MustVerifyEmail;
+use Illuminate\Support\Str;
 
-class User extends Authenticatable implements FilamentUser
+class User extends Authenticatable implements FilamentUser, MustVerifyEmail
 {
     /** @use HasFactory<\Database\Factories\UserFactory> */
     use HasFactory, Notifiable;
@@ -48,6 +50,14 @@ class User extends Authenticatable implements FilamentUser
         ];
     }
 
+    public function initials(): string
+    {
+        return Str::of($this->name)
+            ->explode(' ')
+            ->map(fn (string $name) => Str::of($name)->substr(0, 1))
+            ->implode('');
+    }
+
     public function canAccessPanel(Panel $panel): bool
     {
         return str_ends_with($this->email, '@zemail.me') && $this->level === 9 && $this->hasVerifiedEmail();
diff --git a/resources/views/components/action-message.blade.php b/resources/views/components/action-message.blade.php
new file mode 100644
index 0000000..d313ee6
--- /dev/null
+++ b/resources/views/components/action-message.blade.php
@@ -0,0 +1,14 @@
+@props([
+    'on',
+])
+
+<div
+    x-data="{ shown: false, timeout: null }"
+    x-init="@this.on('{{ $on }}', () => { clearTimeout(timeout); shown = true; timeout = setTimeout(() => { shown = false }, 2000); })"
+    x-show.transition.out.opacity.duration.1500ms="shown"
+    x-transition:leave.opacity.duration.1500ms
+    style="display: none"
+    {{ $attributes->merge(['class' => 'text-sm']) }}
+>
+    {{ $slot->isEmpty() ? __('Saved.') : $slot }}
+</div>
diff --git a/resources/views/components/app-logo-icon.blade.php b/resources/views/components/app-logo-icon.blade.php
new file mode 100644
index 0000000..a76b040
--- /dev/null
+++ b/resources/views/components/app-logo-icon.blade.php
@@ -0,0 +1 @@
+<img src="{{ asset('images/logo.webp') }}" class="scale-150" alt="logo"/>
diff --git a/resources/views/components/auth-header.blade.php b/resources/views/components/auth-header.blade.php
new file mode 100644
index 0000000..e596a3f
--- /dev/null
+++ b/resources/views/components/auth-header.blade.php
@@ -0,0 +1,9 @@
+@props([
+    'title',
+    'description',
+])
+
+<div class="flex w-full flex-col text-center">
+    <flux:heading size="xl">{{ $title }}</flux:heading>
+    <flux:subheading>{{ $description }}</flux:subheading>
+</div>
diff --git a/resources/views/components/auth-session-status.blade.php b/resources/views/components/auth-session-status.blade.php
new file mode 100644
index 0000000..98e0011
--- /dev/null
+++ b/resources/views/components/auth-session-status.blade.php
@@ -0,0 +1,9 @@
+@props([
+    'status',
+])
+
+@if ($status)
+    <div {{ $attributes->merge(['class' => 'font-medium text-sm text-green-600']) }}>
+        {{ $status }}
+    </div>
+@endif
diff --git a/resources/views/components/layouts/app.blade.php b/resources/views/components/layouts/app.blade.php
index 08b811a..368911d 100644
--- a/resources/views/components/layouts/app.blade.php
+++ b/resources/views/components/layouts/app.blade.php
@@ -212,6 +212,6 @@
         });
     </script>
     {!! config('app.settings.app_footer') !!}
-    @yield('custom_header')
+    @yield('custom_footer')
     </body>
 </html>
diff --git a/resources/views/components/layouts/auth.blade.php b/resources/views/components/layouts/auth.blade.php
new file mode 100644
index 0000000..56d6cb6
--- /dev/null
+++ b/resources/views/components/layouts/auth.blade.php
@@ -0,0 +1,3 @@
+<x-layouts.auth.simple :title="$title ?? null">
+    {{ $slot }}
+</x-layouts.auth.simple>
diff --git a/resources/views/components/layouts/auth/card.blade.php b/resources/views/components/layouts/auth/card.blade.php
new file mode 100644
index 0000000..db94716
--- /dev/null
+++ b/resources/views/components/layouts/auth/card.blade.php
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
+    <head>
+        @include('partials.head')
+    </head>
+    <body class="min-h-screen bg-neutral-100 antialiased dark:bg-linear-to-b dark:from-neutral-950 dark:to-neutral-900">
+        <div class="bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
+            <div class="flex w-full max-w-md flex-col gap-6">
+                <a href="{{ route('home') }}" class="flex flex-col items-center gap-2 font-medium" wire:navigate>
+                    <span class="flex h-9 w-9 items-center justify-center rounded-md">
+                        <x-app-logo-icon class="size-9 fill-current text-black dark:text-white" />
+                    </span>
+
+                    <span class="sr-only">{{ config('app.name', 'Laravel') }}</span>
+                </a>
+
+                <div class="flex flex-col gap-6">
+                    <div class="rounded-xl border bg-white dark:bg-stone-950 dark:border-stone-800 text-stone-800 shadow-xs">
+                        <div class="px-10 py-8">{{ $slot }}</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        @fluxScripts
+    </body>
+</html>
diff --git a/resources/views/components/layouts/auth/simple.blade.php b/resources/views/components/layouts/auth/simple.blade.php
new file mode 100644
index 0000000..6e0d909
--- /dev/null
+++ b/resources/views/components/layouts/auth/simple.blade.php
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
+    <head>
+        @include('partials.head')
+    </head>
+    <body class="min-h-screen bg-white antialiased dark:bg-linear-to-b dark:from-neutral-950 dark:to-neutral-900">
+        <div class="bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
+            <div class="flex w-full max-w-sm flex-col gap-2">
+                <a href="{{ route('home') }}" class="flex flex-col items-center gap-2 font-medium" wire:navigate>
+                    <span class="flex h-9 w-9 mb-1 items-center justify-center rounded-md">
+                        <x-app-logo-icon class="size-9 fill-current text-black dark:text-white" />
+                    </span>
+                    <span class="sr-only">{{ config('app.name', 'Laravel') }}</span>
+                </a>
+                <div class="flex flex-col gap-6">
+                    {{ $slot }}
+                </div>
+            </div>
+        </div>
+        @fluxScripts
+    </body>
+</html>
diff --git a/resources/views/components/layouts/auth/split.blade.php b/resources/views/components/layouts/auth/split.blade.php
new file mode 100644
index 0000000..4e9788b
--- /dev/null
+++ b/resources/views/components/layouts/auth/split.blade.php
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
+    <head>
+        @include('partials.head')
+    </head>
+    <body class="min-h-screen bg-white antialiased dark:bg-linear-to-b dark:from-neutral-950 dark:to-neutral-900">
+        <div class="relative grid h-dvh flex-col items-center justify-center px-8 sm:px-0 lg:max-w-none lg:grid-cols-2 lg:px-0">
+            <div class="bg-muted relative hidden h-full flex-col p-10 text-white lg:flex dark:border-e dark:border-neutral-800">
+                <div class="absolute inset-0 bg-neutral-900"></div>
+                <a href="{{ route('home') }}" class="relative z-20 flex items-center text-lg font-medium" wire:navigate>
+                    <span class="flex h-10 w-10 items-center justify-center rounded-md">
+                        <x-app-logo-icon class="me-2 h-7 fill-current text-white" />
+                    </span>
+                    {{ config('app.name', 'Laravel') }}
+                </a>
+
+                @php
+                    [$message, $author] = str(Illuminate\Foundation\Inspiring::quotes()->random())->explode('-');
+                @endphp
+
+                <div class="relative z-20 mt-auto">
+                    <blockquote class="space-y-2">
+                        <flux:heading size="lg">&ldquo;{{ trim($message) }}&rdquo;</flux:heading>
+                        <footer><flux:heading>{{ trim($author) }}</flux:heading></footer>
+                    </blockquote>
+                </div>
+            </div>
+            <div class="w-full lg:p-8">
+                <div class="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
+                    <a href="{{ route('home') }}" class="z-20 flex flex-col items-center gap-2 font-medium lg:hidden" wire:navigate>
+                        <span class="flex h-9 w-9 items-center justify-center rounded-md">
+                            <x-app-logo-icon class="size-9 fill-current text-black dark:text-white" />
+                        </span>
+
+                        <span class="sr-only">{{ config('app.name', 'Laravel') }}</span>
+                    </a>
+                    {{ $slot }}
+                </div>
+            </div>
+        </div>
+        @fluxScripts
+    </body>
+</html>
diff --git a/resources/views/components/layouts/dashboard.blade.php b/resources/views/components/layouts/dashboard.blade.php
new file mode 100644
index 0000000..782d609
--- /dev/null
+++ b/resources/views/components/layouts/dashboard.blade.php
@@ -0,0 +1,189 @@
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+        <title>@yield('title', config('app.settings.app_title'))</title>
+        <meta name="description" content="@yield('description', config('app.settings.app_description'))">
+        <meta name="keywords" content="@yield('keywords', config('app.settings.app_keyword'))">
+        @forelse (json_decode(config('app.settings.app_meta')) as $key => $value)
+        @if ($value)
+        <meta name="{{ $key }}" content="{{ $value }}">
+        @endif
+        @empty
+        @endforelse
+
+        @yield('metas')
+
+        @if (file_exists(public_path('build/manifest.json')) || file_exists(public_path('hot')))
+            @vite(['resources/css/app.css', 'resources/css/boil.css', 'resources/js/app.js', 'resources/js/boil.js'])
+        @endif
+        <link rel="icon" type="image/png" href="{{ asset('images/logo.webp') }}">
+        @fluxAppearance
+        @yield('custom_header')
+    </head>
+    <body class="min-h-screen bg-white dark:bg-zinc-800">
+    <flux:sidebar sticky stashable class="bg-zinc-50 dark:bg-zinc-900 border-r rtl:border-r-0 rtl:border-l border-zinc-200 dark:border-zinc-700">
+        <flux:sidebar.toggle class="lg:hidden" icon="x-mark" />
+        <a class="flex items-center px-2 py-2 cursor-pointer" href="{{ route('dashboard') }}">
+            <img src="{{ asset('images/zemail-logo-light.webp') }}" class="dark:hidden" alt="logo"/>
+            <img src="{{ asset('images/zemail-logo-dark.webp') }}" class="hidden dark:flex" alt="logo"/>
+        </a>
+
+        <flux:navlist variant="outline">
+            @php
+                $navItems = [
+                    ['label' => 'Dashboard', 'route' => 'dashboard'],
+                    ['label' => 'Generate Premium Email', 'route' => 'dashboard.premium'],
+                    ['label' => '10 Minute Mail', 'route' => 'dashboard.10minute'],
+                    ['label' => 'Bulk Email', 'route' => 'dashboard.bulk'],
+                    ['label' => 'Compose Email', 'route' => 'dashboard.compose'],
+                ];
+
+                $currentRoute = Route::currentRouteName();
+            @endphp
+
+            @foreach ($navItems as $item)
+                <button type="button" x-on:click="window.location.href = '{{ route($item['route']) }}'" class="cursor-pointer h-10 lg:h-10 relative flex items-center gap-3 rounded-lg  py-0 text-start w-full px-3 my-px text-zinc-500 dark:text-white/80 data-current:text-(--color-accent-content) hover:data-current:text-(--color-accent-content) data-current:bg-white dark:data-current:bg-white/[7%] data-current:border data-current:border-zinc-200 dark:data-current:border-transparent hover:text-zinc-800 dark:hover:text-white dark:hover:bg-white/[7%] hover:bg-zinc-800/5  {{ $currentRoute === $item['route'] ? 'border-1 border-dashed border-zinc-500' : '' }}" data-flux-navlist-item="data-flux-navlist-item">
+                    <div class="flex-1 text-sm font-medium leading-none whitespace-nowrap [[data-nav-footer]_&amp;]:hidden [[data-nav-sidebar]_[data-nav-footer]_&amp;]:block" data-content="">
+                        <div class="-ml-2 pl-2 py-2">
+                            <div class="[:where(&amp;)]:text-sm [:where(&amp;)]:text-zinc-500 [:where(&amp;)]:dark:text-white/70 {{ $currentRoute === $item['route'] ? 'accent-zinc-500' : '' }}" data-flux-text="{{ $item['label'] }}">{{ $item['label'] }}</div>
+                        </div>
+                    </div>
+                </button>
+            @endforeach
+
+        </flux:navlist>
+        <flux:spacer />
+        <flux:navlist variant="outline">
+            <flux:separator variant="subtle" />
+        </flux:navlist>
+        <flux:dropdown position="bottom" align="start">
+            <flux:profile
+                :name="auth()->user()->name"
+                :initials="auth()->user()->initials()"
+                icon-trailing="chevrons-up-down"
+            />
+            <flux:menu class="w-[220px]">
+                <flux:menu.radio.group>
+                    <div class="p-0 text-sm font-normal">
+                        <div class="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
+                                <span class="relative flex h-8 w-8 shrink-0 overflow-hidden rounded-lg">
+                                    <span
+                                        class="flex h-full w-full items-center justify-center rounded-lg bg-neutral-200 text-black dark:bg-neutral-700 dark:text-white"
+                                    >
+                                        {{ auth()->user()->initials() }}
+                                    </span>
+                                </span>
+
+                            <div class="grid flex-1 text-start text-sm leading-tight">
+                                <span class="truncate font-semibold">{{ auth()->user()->name }}</span>
+                                <span class="truncate text-xs">{{ auth()->user()->email }}</span>
+                            </div>
+                        </div>
+                    </div>
+                </flux:menu.radio.group>
+
+                <flux:menu.separator />
+
+                <flux:menu.radio.group>
+                    <flux:menu.item :href="route('settings.profile')" icon="cog" wire:navigate>{{ __('Settings') }}</flux:menu.item>
+                </flux:menu.radio.group>
+
+                <flux:menu.separator />
+                <form method="POST" action="{{ route('logout') }}" class="w-full">
+                    @csrf
+                    <flux:menu.item as="button" type="submit" icon="arrow-right-start-on-rectangle" class="w-full">
+                        {{ __('Log Out') }}
+                    </flux:menu.item>
+                </form>
+            </flux:menu>
+        </flux:dropdown>
+        <p class="text-sm font-medium dark:text-white accent-zinc-700">&copy; 2020–{{ date('Y') }} – All Rights Reserved {{ config('app.settings.app_name') }} | Coded with ♥️</p>
+
+    </flux:sidebar>
+
+    <flux:header sticky container class="bg-zinc-50 dark:bg-zinc-900 border-b border-zinc-200 dark:border-zinc-700">
+        <div class="flex items-center w-full gap-4">
+            <div class="flex items-center gap-2 flex-grow overflow-hidden">
+                <flux:sidebar.toggle class="lg:hidden" icon="bars-3-bottom-left" inset="left" />
+            </div>
+            <div class="flex items-center gap-2 flex-shrink-0">
+                <flux:navbar>
+                    <flux:dropdown position="top" align="start">
+                        <flux:tooltip content="Language">
+                            <flux:button x-data x-on:click="" icon="language" variant="subtle" aria-label="Language" />
+                        </flux:tooltip>
+                        <flux:menu>
+                            <span>
+                                @foreach(config('app.locales') as $item => $language)
+                                    <span x-on:click="window.location.href ='{{ route('locale', $language) }}'" role="menuitem" class="cursor-pointer group dark:hover:bg-zinc-600/75 dark:hover:text-gray-300 dark:focus:bg-zinc-600/75 dark:focus:text-gray-300 flex items-center px-4 py-2 dark:text-gray-400 text-gray-700 hover:text-gray-900 focus:text-gray-900 text-sm leading-5 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none truncate">{{ config('app.locales_text')[$item] }}</span>
+                                @endforeach
+                            </span>
+                        </flux:menu>
+                    </flux:dropdown>
+
+                    <flux:tooltip content="Switch Theme">
+                    <flux:button x-on:click="$flux.dark = ! $flux.dark" icon="sun" variant="subtle" aria-label="Toggle dark mode">
+        {{--                <flux:icon.sun x-show="$flux.appearance === 'dark'" variant="mini" />--}}
+        {{--                <flux:icon.moon x-show="$flux.appearance === 'light'" variant="mini" />--}}
+        {{--                <flux:icon.computer-desktop x-show="$flux.appearance === 'system'" variant="mini" />--}}
+                    </flux:button>
+                    </flux:tooltip>
+
+                </flux:navbar>
+            </div>
+        </div>
+
+    </flux:header>
+
+    <flux:main class="dark:bg-gray-900 bg-gray-100">
+    {{ $slot }}
+    </flux:main>
+    <!-- Toast Container -->
+    <div id="toast-container" class="fixed top-5 left-1/2 transform -translate-x-1/2 z-50 space-y-4"></div>
+    <p id="sidebar-magic" class="hidden"></p>
+    <p class="ionize hidden" id="gR7pT9xLwQ" sync="{{ config('app.auto_fetch_mail') }}">{{ csrf_token() }}</p>
+    <p class="hidden" id="copyEmailText">{{ __('Email ID Copied to Clipboard') }}</p>
+    @fluxScripts
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+
+            setTimeout(() => {
+                const email = '{{ App\Models\ZEmail::getEmail(true) }}';
+                const add_mail_in_title = "{{ json_decode(config('app.settings.configuration_settings'))->add_mail_in_title ? 'yes' : 'no' }}"
+                if(add_mail_in_title === 'yes') {
+                    document.title += ` - ${email}`;
+                }
+                Livewire.dispatch('updateEmail');
+            }, 2000);
+
+            document.addEventListener('stopLoader', () => {
+                document.querySelectorAll('#refresh-icon').forEach(el => {
+                    setTimeout(() => {
+                        el.classList.remove('animate-spin');
+                    }, 1000);
+                });
+            });
+
+            let counter = parseInt({{ json_decode(config('app.settings.configuration_settings'))->fetch_seconds }});
+            setInterval(() => {
+                if (counter === 0 && document.getElementById('imap-error') === null && !document.hidden) {
+                    document.querySelectorAll('#refresh-icon').forEach(el => {
+                        el.classList.add('animate-spin');
+                    });
+                    Livewire.dispatch('fetchMessages');
+                    counter = parseInt({{ json_decode(config('app.settings.configuration_settings'))->fetch_seconds }});
+                }
+                counter--;
+                if(document.hidden) {
+                    counter = 1;
+                }
+            }, 1000);
+        });
+    </script>
+    @yield('custom_footer')
+    </body>
+</html>
diff --git a/resources/views/components/placeholder-pattern.blade.php b/resources/views/components/placeholder-pattern.blade.php
new file mode 100644
index 0000000..8a434f0
--- /dev/null
+++ b/resources/views/components/placeholder-pattern.blade.php
@@ -0,0 +1,12 @@
+@props([
+    'id' => uniqid(),
+])
+
+<svg {{ $attributes }} fill="none">
+    <defs>
+        <pattern id="pattern-{{ $id }}" x="0" y="0" width="8" height="8" patternUnits="userSpaceOnUse">
+            <path d="M-1 5L5 -1M3 9L8.5 3.5" stroke-width="0.5"></path>
+        </pattern>
+    </defs>
+    <rect stroke="none" fill="url(#pattern-{{ $id }})" width="100%" height="100%"></rect>
+</svg>
diff --git a/resources/views/components/settings/layout.blade.php b/resources/views/components/settings/layout.blade.php
new file mode 100644
index 0000000..05c0637
--- /dev/null
+++ b/resources/views/components/settings/layout.blade.php
@@ -0,0 +1,20 @@
+<div class="flex items-start max-md:flex-col">
+    <div class="me-10 w-full pb-4 md:w-[220px]">
+        <flux:navlist>
+            <flux:navlist.item :href="route('settings.profile')" wire:navigate>{{ __('Profile') }}</flux:navlist.item>
+            <flux:navlist.item :href="route('settings.password')" wire:navigate>{{ __('Password') }}</flux:navlist.item>
+            <flux:navlist.item :href="route('settings.appearance')" wire:navigate>{{ __('Appearance') }}</flux:navlist.item>
+        </flux:navlist>
+    </div>
+
+    <flux:separator class="md:hidden" />
+
+    <div class="flex-1 self-stretch max-md:pt-6">
+        <flux:heading>{{ $heading ?? '' }}</flux:heading>
+        <flux:subheading>{{ $subheading ?? '' }}</flux:subheading>
+
+        <div class="mt-5 w-full max-w-lg">
+            {{ $slot }}
+        </div>
+    </div>
+</div>
diff --git a/resources/views/flux/icon/chevrons-up-down.blade.php b/resources/views/flux/icon/chevrons-up-down.blade.php
new file mode 100644
index 0000000..b501899
--- /dev/null
+++ b/resources/views/flux/icon/chevrons-up-down.blade.php
@@ -0,0 +1,42 @@
+{{-- Credit: Lucide (https://lucide.dev) --}}
+
+@props([
+    'variant' => 'outline',
+])
+
+@php
+if ($variant === 'solid') {
+    throw new \Exception('The "solid" variant is not supported in Lucide.');
+}
+
+$classes = Flux::classes('shrink-0')
+    ->add(match($variant) {
+        'outline' => '[:where(&)]:size-6',
+        'solid' => '[:where(&)]:size-6',
+        'mini' => '[:where(&)]:size-5',
+        'micro' => '[:where(&)]:size-4',
+    });
+
+$strokeWidth = match ($variant) {
+    'outline' => 2,
+    'mini' => 2.25,
+    'micro' => 2.5,
+};
+@endphp
+
+<svg
+    {{ $attributes->class($classes) }}
+    data-flux-icon
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="{{ $strokeWidth }}"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    data-slot="icon"
+>
+  <path d="m7 15 5 5 5-5" />
+  <path d="m7 9 5-5 5 5" />
+</svg>
diff --git a/resources/views/livewire/auth/confirm-password.blade.php b/resources/views/livewire/auth/confirm-password.blade.php
new file mode 100644
index 0000000..ad8b73b
--- /dev/null
+++ b/resources/views/livewire/auth/confirm-password.blade.php
@@ -0,0 +1,24 @@
+<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.')"
+    />
+
+    <!-- Session Status -->
+    <x-auth-session-status class="text-center" :status="session('status')" />
+
+    <form wire:submit="confirmPassword" class="flex flex-col gap-6">
+        <!-- Password -->
+        <flux:input
+            wire:model="password"
+            :label="__('Password')"
+            type="password"
+            required
+            autocomplete="new-password"
+            :placeholder="__('Password')"
+            viewable
+        />
+
+        <flux:button variant="primary" type="submit" class="w-full">{{ __('Confirm') }}</flux:button>
+    </form>
+</div>
diff --git a/resources/views/livewire/auth/forgot-password.blade.php b/resources/views/livewire/auth/forgot-password.blade.php
new file mode 100644
index 0000000..fcfb566
--- /dev/null
+++ b/resources/views/livewire/auth/forgot-password.blade.php
@@ -0,0 +1,27 @@
+@section('title'){{ __('Forget Password | ') }}@endsection
+ <div class="flex flex-col gap-6">
+    <x-auth-header :title="__('Forgot password')" :description="__('Enter your email to receive a password reset link')" />
+
+    <!-- Session Status -->
+    <x-auth-session-status class="text-center" :status="session('status')" />
+
+    <form wire:submit="sendPasswordResetLink" class="flex flex-col gap-6">
+        <!-- Email Address -->
+        <flux:input
+            wire:model="email"
+            :label="__('Email Address')"
+            type="email"
+            required
+            autofocus
+            placeholder="email@example.com"
+            viewable
+        />
+
+        <flux:button variant="primary" type="submit" class="w-full">{{ __('Email password reset link') }}</flux:button>
+    </form>
+
+    <div class="space-x-1 rtl:space-x-reverse text-center text-sm text-zinc-400">
+        {{ __('Or, return to') }}
+        <flux:link :href="route('login')" wire:navigate>{{ __('log in') }}</flux:link>
+    </div>
+</div>
diff --git a/resources/views/livewire/auth/login.blade.php b/resources/views/livewire/auth/login.blade.php
new file mode 100644
index 0000000..4b33c84
--- /dev/null
+++ b/resources/views/livewire/auth/login.blade.php
@@ -0,0 +1,53 @@
+@section('title'){{ __('Login | ') }}@endsection
+<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')" />
+
+    <!-- Session Status -->
+    <x-auth-session-status class="text-center" :status="session('status')" />
+
+    <form wire:submit="login" class="flex flex-col gap-6">
+        <!-- Email Address -->
+        <flux:input
+            wire:model="email"
+            :label="__('Email address')"
+            type="email"
+            required
+            autofocus
+            autocomplete="email"
+            placeholder="email@example.com"
+        />
+
+        <!-- Password -->
+        <div class="relative">
+            <flux:input
+                wire:model="password"
+                :label="__('Password')"
+                type="password"
+                required
+                autocomplete="current-password"
+                :placeholder="__('Password')"
+                viewable
+            />
+
+            @if (Route::has('password.request'))
+                <flux:link class="absolute end-0 top-0 text-sm" :href="route('password.request')" wire:navigate>
+                    {{ __('Forgot your password?') }}
+                </flux:link>
+            @endif
+        </div>
+
+        <!-- Remember Me -->
+        <flux:checkbox wire:model="remember" :label="__('Remember me')" />
+
+        <div class="flex items-center justify-end">
+            <flux:button variant="primary" type="submit" class="w-full">{{ __('Log in') }}</flux:button>
+        </div>
+    </form>
+
+    @if (Route::has('register'))
+        <div class="space-x-1 rtl:space-x-reverse text-center text-sm text-zinc-600 dark:text-zinc-400">
+            {{ __('Don\'t have an account?') }}
+            <flux:link :href="route('register')" wire:navigate>{{ __('Sign up') }}</flux:link>
+        </div>
+    @endif
+</div>
diff --git a/resources/views/livewire/auth/register.blade.php b/resources/views/livewire/auth/register.blade.php
new file mode 100644
index 0000000..07d31a2
--- /dev/null
+++ b/resources/views/livewire/auth/register.blade.php
@@ -0,0 +1,63 @@
+@section('title'){{ __('Register | ') }}@endsection
+<div class="flex flex-col gap-6">
+    <x-auth-header :title="__('Create an account')" :description="__('Enter your details below to create your account')" />
+
+    <!-- Session Status -->
+    <x-auth-session-status class="text-center" :status="session('status')" />
+
+    <form wire:submit="register" class="flex flex-col gap-6">
+        <!-- Name -->
+        <flux:input
+            wire:model="name"
+            :label="__('Name')"
+            type="text"
+            required
+            autofocus
+            autocomplete="name"
+            :placeholder="__('Full name')"
+        />
+
+        <!-- Email Address -->
+        <flux:input
+            wire:model="email"
+            :label="__('Email address')"
+            type="email"
+            required
+            autocomplete="email"
+            placeholder="email@example.com"
+        />
+
+        <!-- Password -->
+        <flux:input
+            wire:model="password"
+            :label="__('Password')"
+            type="password"
+            required
+            autocomplete="new-password"
+            :placeholder="__('Password')"
+            viewable
+        />
+
+        <!-- Confirm Password -->
+        <flux:input
+            wire:model="password_confirmation"
+            :label="__('Confirm password')"
+            type="password"
+            required
+            autocomplete="new-password"
+            :placeholder="__('Confirm password')"
+            viewable
+        />
+
+        <div class="flex items-center justify-end">
+            <flux:button type="submit" variant="primary" class="w-full">
+                {{ __('Create account') }}
+            </flux:button>
+        </div>
+    </form>
+
+    <div class="space-x-1 rtl:space-x-reverse text-center text-sm text-zinc-600 dark:text-zinc-400">
+        {{ __('Already have an account?') }}
+        <flux:link :href="route('login')" wire:navigate>{{ __('Log in') }}</flux:link>
+    </div>
+</div>
diff --git a/resources/views/livewire/auth/reset-password.blade.php b/resources/views/livewire/auth/reset-password.blade.php
new file mode 100644
index 0000000..e8085c5
--- /dev/null
+++ b/resources/views/livewire/auth/reset-password.blade.php
@@ -0,0 +1,45 @@
+<div class="flex flex-col gap-6">
+    <x-auth-header :title="__('Reset password')" :description="__('Please enter your new password below')" />
+
+    <!-- Session Status -->
+    <x-auth-session-status class="text-center" :status="session('status')" />
+
+    <form wire:submit="resetPassword" class="flex flex-col gap-6">
+        <!-- Email Address -->
+        <flux:input
+            wire:model="email"
+            :label="__('Email')"
+            type="email"
+            required
+            autocomplete="email"
+        />
+
+        <!-- Password -->
+        <flux:input
+            wire:model="password"
+            :label="__('Password')"
+            type="password"
+            required
+            autocomplete="new-password"
+            :placeholder="__('Password')"
+            viewable
+        />
+
+        <!-- Confirm Password -->
+        <flux:input
+            wire:model="password_confirmation"
+            :label="__('Confirm password')"
+            type="password"
+            required
+            autocomplete="new-password"
+            :placeholder="__('Confirm password')"
+            viewable
+        />
+
+        <div class="flex items-center justify-end">
+            <flux:button type="submit" variant="primary" class="w-full">
+                {{ __('Reset password') }}
+            </flux:button>
+        </div>
+    </form>
+</div>
diff --git a/resources/views/livewire/auth/verify-email.blade.php b/resources/views/livewire/auth/verify-email.blade.php
new file mode 100644
index 0000000..ab48ec0
--- /dev/null
+++ b/resources/views/livewire/auth/verify-email.blade.php
@@ -0,0 +1,21 @@
+<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>
+
+    @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="flex flex-col items-center justify-between space-y-3">
+        <flux:button wire:click="sendVerification" variant="primary" class="w-full">
+            {{ __('Resend verification email') }}
+        </flux:button>
+
+        <flux:link class="text-sm cursor-pointer" wire:click="logout">
+            {{ __('Log out') }}
+        </flux:link>
+    </div>
+</div>
diff --git a/resources/views/livewire/dashboard/dashboard.blade.php b/resources/views/livewire/dashboard/dashboard.blade.php
new file mode 100644
index 0000000..82f42dd
--- /dev/null
+++ b/resources/views/livewire/dashboard/dashboard.blade.php
@@ -0,0 +1,17 @@
+@section('title'){{ __('Dashboard') }}@endsection
+<div class="flex h-full w-full flex-1 flex-col gap-4 rounded-xl">
+    <div class="grid auto-rows-min gap-4 md:grid-cols-3">
+        <div class="relative aspect-video overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700">
+            <x-placeholder-pattern class="absolute inset-0 size-full stroke-gray-900/20 dark:stroke-neutral-100/20" />
+        </div>
+        <div class="relative aspect-video overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700">
+            <x-placeholder-pattern class="absolute inset-0 size-full stroke-gray-900/20 dark:stroke-neutral-100/20" />
+        </div>
+        <div class="relative aspect-video overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700">
+            <x-placeholder-pattern class="absolute inset-0 size-full stroke-gray-900/20 dark:stroke-neutral-100/20" />
+        </div>
+    </div>
+    <div class="relative h-full flex-1 overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700">
+        <x-placeholder-pattern class="absolute inset-0 size-full stroke-gray-900/20 dark:stroke-neutral-100/20" />
+    </div>
+</div>
diff --git a/resources/views/livewire/settings/appearance.blade.php b/resources/views/livewire/settings/appearance.blade.php
new file mode 100644
index 0000000..85e8983
--- /dev/null
+++ b/resources/views/livewire/settings/appearance.blade.php
@@ -0,0 +1,11 @@
+<section class="w-full">
+    @include('partials.settings-heading')
+
+    <x-settings.layout :heading="__('Appearance')" :subheading=" __('Update the appearance settings for your account')">
+        <flux:radio.group x-data variant="segmented" x-model="$flux.appearance">
+            <flux:radio value="light" icon="sun">{{ __('Light') }}</flux:radio>
+            <flux:radio value="dark" icon="moon">{{ __('Dark') }}</flux:radio>
+            <flux:radio value="system" icon="computer-desktop">{{ __('System') }}</flux:radio>
+        </flux:radio.group>
+    </x-settings.layout>
+</section>
diff --git a/resources/views/livewire/settings/delete-user-form.blade.php b/resources/views/livewire/settings/delete-user-form.blade.php
new file mode 100644
index 0000000..47c9eb8
--- /dev/null
+++ b/resources/views/livewire/settings/delete-user-form.blade.php
@@ -0,0 +1,34 @@
+<section class="mt-10 space-y-6">
+    <div class="relative mb-5">
+        <flux:heading>{{ __('Delete account') }}</flux:heading>
+        <flux:subheading>{{ __('Delete your account and all of its resources') }}</flux:subheading>
+    </div>
+
+    <flux:modal.trigger name="confirm-user-deletion">
+        <flux:button variant="danger" x-data="" x-on:click.prevent="$dispatch('open-modal', 'confirm-user-deletion')">
+            {{ __('Delete account') }}
+        </flux:button>
+    </flux:modal.trigger>
+
+    <flux:modal name="confirm-user-deletion" :show="$errors->isNotEmpty()" focusable class="max-w-lg">
+        <form wire:submit="deleteUser" class="space-y-6">
+            <div>
+                <flux:heading size="lg">{{ __('Are you sure you want to delete your account?') }}</flux:heading>
+
+                <flux:subheading>
+                    {{ __('Once your account is deleted, all of its resources and data will be permanently deleted. Please enter your password to confirm you would like to permanently delete your account.') }}
+                </flux:subheading>
+            </div>
+
+            <flux:input wire:model="password" :label="__('Password')" type="password" />
+
+            <div class="flex justify-end space-x-2 rtl:space-x-reverse">
+                <flux:modal.close>
+                    <flux:button variant="filled">{{ __('Cancel') }}</flux:button>
+                </flux:modal.close>
+
+                <flux:button variant="danger" type="submit">{{ __('Delete account') }}</flux:button>
+            </div>
+        </form>
+    </flux:modal>
+</section>
diff --git a/resources/views/livewire/settings/password.blade.php b/resources/views/livewire/settings/password.blade.php
new file mode 100644
index 0000000..a55db8b
--- /dev/null
+++ b/resources/views/livewire/settings/password.blade.php
@@ -0,0 +1,39 @@
+<section class="w-full">
+    @include('partials.settings-heading')
+
+    <x-settings.layout :heading="__('Update password')" :subheading="__('Ensure your account is using a long, random password to stay secure')">
+        <form wire:submit="updatePassword" class="mt-6 space-y-6">
+            <flux:input
+                wire:model="current_password"
+                :label="__('Current password')"
+                type="password"
+                required
+                autocomplete="current-password"
+            />
+            <flux:input
+                wire:model="password"
+                :label="__('New password')"
+                type="password"
+                required
+                autocomplete="new-password"
+            />
+            <flux:input
+                wire:model="password_confirmation"
+                :label="__('Confirm Password')"
+                type="password"
+                required
+                autocomplete="new-password"
+            />
+
+            <div class="flex items-center gap-4">
+                <div class="flex items-center justify-end">
+                    <flux:button variant="primary" type="submit" class="w-full">{{ __('Save') }}</flux:button>
+                </div>
+
+                <x-action-message class="me-3" on="password-updated">
+                    {{ __('Saved.') }}
+                </x-action-message>
+            </div>
+        </form>
+    </x-settings.layout>
+</section>
diff --git a/resources/views/livewire/settings/profile.blade.php b/resources/views/livewire/settings/profile.blade.php
new file mode 100644
index 0000000..5fa6cdb
--- /dev/null
+++ b/resources/views/livewire/settings/profile.blade.php
@@ -0,0 +1,43 @@
+<section class="w-full">
+    @include('partials.settings-heading')
+
+    <x-settings.layout :heading="__('Profile')" :subheading="__('Update your name and email address')">
+        <form wire:submit="updateProfileInformation" class="my-6 w-full space-y-6">
+            <flux:input wire:model="name" :label="__('Name')" type="text" required autofocus autocomplete="name" />
+
+            <div>
+                <flux:input wire:model="email" :label="__('Email')" type="email" required autocomplete="email" />
+
+                @if (auth()->user() instanceof \Illuminate\Contracts\Auth\MustVerifyEmail &&! auth()->user()->hasVerifiedEmail())
+                    <div>
+                        <flux:text class="mt-4">
+                            {{ __('Your email address is unverified.') }}
+
+                            <flux:link class="text-sm cursor-pointer" wire:click.prevent="resendVerificationNotification">
+                                {{ __('Click here to re-send the verification email.') }}
+                            </flux:link>
+                        </flux:text>
+
+                        @if (session('status') === 'verification-link-sent')
+                            <flux:text class="mt-2 font-medium !dark:text-green-400 !text-green-600">
+                                {{ __('A new verification link has been sent to your email address.') }}
+                            </flux:text>
+                        @endif
+                    </div>
+                @endif
+            </div>
+
+            <div class="flex items-center gap-4">
+                <div class="flex items-center justify-end">
+                    <flux:button variant="primary" type="submit" class="w-full">{{ __('Save') }}</flux:button>
+                </div>
+
+                <x-action-message class="me-3" on="profile-updated">
+                    {{ __('Saved.') }}
+                </x-action-message>
+            </div>
+        </form>
+
+{{--        <livewire:settings.delete-user-form />--}}
+    </x-settings.layout>
+</section>
diff --git a/resources/views/partials/head.blade.php b/resources/views/partials/head.blade.php
new file mode 100644
index 0000000..6b7c586
--- /dev/null
+++ b/resources/views/partials/head.blade.php
@@ -0,0 +1,11 @@
+<meta charset="utf-8" />
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+<title>@yield('title', ''){{ config('app.settings.app_title') }}</title>
+
+@if (file_exists(public_path('build/manifest.json')) || file_exists(public_path('hot')))
+    @vite(['resources/css/app.css', 'resources/js/app.js'])
+@endif
+<link rel="icon" type="image/png" href="{{ asset('images/logo.webp') }}">
+@fluxAppearance
diff --git a/resources/views/partials/settings-heading.blade.php b/resources/views/partials/settings-heading.blade.php
new file mode 100644
index 0000000..925ace9
--- /dev/null
+++ b/resources/views/partials/settings-heading.blade.php
@@ -0,0 +1,5 @@
+<div class="relative mb-6 w-full">
+    <flux:heading size="xl" level="1">{{ __('Settings') }}</flux:heading>
+    <flux:subheading size="lg" class="mb-6">{{ __('Manage your profile and account settings') }}</flux:subheading>
+    <flux:separator variant="subtle" />
+</div>
diff --git a/resources/views/welcome.blade.php b/resources/views/welcome.blade.php
index a383ca7..885c3ea 100644
--- a/resources/views/welcome.blade.php
+++ b/resources/views/welcome.blade.php
@@ -30,6 +30,12 @@
                         >
                             Dashboard
                         </a>
+                        <form method="POST" action="{{ route('logout') }}" class="w-full">
+                            @csrf
+                            <flux:menu.item as="button" type="submit" icon="arrow-right-start-on-rectangle" class="w-full">
+                                {{ __('Log Out') }}
+                            </flux:menu.item>
+                        </form>
                     @else
                         <a
                             href="{{ route('login') }}"
diff --git a/routes/auth.php b/routes/auth.php
new file mode 100644
index 0000000..031f43c
--- /dev/null
+++ b/routes/auth.php
@@ -0,0 +1,32 @@
+<?php
+
+use App\Http\Controllers\Auth\VerifyEmailController;
+use App\Livewire\Auth\ConfirmPassword;
+use App\Livewire\Auth\ForgotPassword;
+use App\Livewire\Auth\Login;
+use App\Livewire\Auth\Register;
+use App\Livewire\Auth\ResetPassword;
+use App\Livewire\Auth\VerifyEmail;
+use Illuminate\Support\Facades\Route;
+
+Route::middleware('guest')->group(function () {
+    Route::get('login', Login::class)->name('login');
+    Route::get('register', Register::class)->name('register');
+    Route::get('forgot-password', ForgotPassword::class)->name('password.request');
+    Route::get('reset-password/{token}', ResetPassword::class)->name('password.reset');
+});
+
+Route::middleware('auth')->group(function () {
+    Route::get('verify-email', VerifyEmail::class)
+        ->name('verification.notice');
+
+    Route::get('verify-email/{id}/{hash}', VerifyEmailController::class)
+        ->middleware(['signed', 'throttle:6,1'])
+        ->name('verification.verify');
+
+    Route::get('confirm-password', ConfirmPassword::class)
+        ->name('password.confirm');
+});
+
+Route::post('logout', App\Livewire\Actions\Logout::class)
+    ->name('logout');
diff --git a/routes/web.php b/routes/web.php
index 82878e3..b89b755 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -3,11 +3,15 @@
 use App\Http\Controllers\AppController;
 use App\Http\Middleware\CheckPageSlug;
 use App\Livewire\Blog;
+use App\Livewire\Dashboard\Dashboard;
 use App\Livewire\Frontend\Mailbox;
 use App\Livewire\Home;
 use App\Livewire\ListBlog;
 use App\Livewire\Page;
 
+use App\Livewire\Settings\Appearance;
+use App\Livewire\Settings\Password;
+use App\Livewire\Settings\Profile;
 use App\Models\Email;
 use Illuminate\Support\Facades\Route;
 
@@ -35,4 +39,24 @@ Route::post('/sync', function (Request $request) {
     return response()->noContent();
 });
 
+
+Route::middleware(['auth', 'verified'])->group(function () {
+    Route::get('dashboard', Dashboard::class)->name('dashboard');
+    Route::get('dashboard/generate-premium-email', Dashboard::class)->name('dashboard.premium');
+    Route::get('dashboard/generate-10minute-email', Dashboard::class)->name('dashboard.10minute');
+    Route::get('dashboard/bulk-email-generator', Dashboard::class)->name('dashboard.bulk');
+    Route::get('dashboard/compose-email', Dashboard::class)->name('dashboard.compose');
+
+});
+
+Route::middleware(['auth'])->group(function () {
+    Route::redirect('settings', 'settings/profile');
+
+    Route::get('settings/profile', Profile::class)->name('settings.profile');
+    Route::get('settings/password', Password::class)->name('settings.password');
+    Route::get('settings/appearance', Appearance::class)->name('settings.appearance');
+});
+
+require __DIR__.'/auth.php';
+
 Route::get('{slug}', Page::class)->where('slug', '.*')->name('page')->middleware(CheckPageSlug::class);