diff --git a/app/Http/Controllers/Admin/MenuItemController.php b/app/Http/Controllers/Admin/MenuItemController.php
index e00e4d8..ec60810 100644
--- a/app/Http/Controllers/Admin/MenuItemController.php
+++ b/app/Http/Controllers/Admin/MenuItemController.php
@@ -64,7 +64,9 @@ public function store(StoreMenuItemRequest $request, Menu $menu)
         $menu->menuItems()->create($request->except(['roles']));
 
         $roles = $request->roles ?? [];
-        $menu->assignRole($roles);
+        if(!empty($roles)) {
+            $menu->assignRole($roles);
+        }
 
         return redirect()->route('admin.menu.item.index', $menu->id)
             ->with('message', 'Menu created successfully.');
diff --git a/app/Http/Controllers/Auth/AuthenticatedSessionController.php b/app/Http/Controllers/Auth/AuthenticatedSessionController.php
index 0d36b02..d44fe97 100644
--- a/app/Http/Controllers/Auth/AuthenticatedSessionController.php
+++ b/app/Http/Controllers/Auth/AuthenticatedSessionController.php
@@ -4,20 +4,19 @@
 
 use App\Http\Controllers\Controller;
 use App\Http\Requests\Auth\LoginRequest;
-use App\Providers\RouteServiceProvider;
+use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Facades\Route;
 use Inertia\Inertia;
+use Inertia\Response;
 
 class AuthenticatedSessionController extends Controller
 {
     /**
      * Display the login view.
-     *
-     * @return \Inertia\Response
      */
-    public function create()
+    public function create(): Response
     {
         return Inertia::render('Auth/Login', [
             'canResetPassword' => Route::has('password.request'),
@@ -27,24 +26,20 @@ public function create()
 
     /**
      * Handle an incoming authentication request.
-     *
-     * @return \Illuminate\Http\RedirectResponse
      */
-    public function store(LoginRequest $request)
+    public function store(LoginRequest $request): RedirectResponse
     {
         $request->authenticate();
 
         $request->session()->regenerate();
 
-        return redirect()->intended(RouteServiceProvider::HOME);
+        return redirect()->intended(route('dashboard', absolute: false));
     }
 
     /**
      * Destroy an authenticated session.
-     *
-     * @return \Illuminate\Http\RedirectResponse
      */
-    public function destroy(Request $request)
+    public function destroy(Request $request): RedirectResponse
     {
         Auth::guard('web')->logout();
 
diff --git a/app/Http/Controllers/Auth/ConfirmablePasswordController.php b/app/Http/Controllers/Auth/ConfirmablePasswordController.php
index f1e72f3..d2b1f14 100644
--- a/app/Http/Controllers/Auth/ConfirmablePasswordController.php
+++ b/app/Http/Controllers/Auth/ConfirmablePasswordController.php
@@ -3,30 +3,27 @@
 namespace App\Http\Controllers\Auth;
 
 use App\Http\Controllers\Controller;
-use App\Providers\RouteServiceProvider;
+use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Auth;
 use Illuminate\Validation\ValidationException;
 use Inertia\Inertia;
+use Inertia\Response;
 
 class ConfirmablePasswordController extends Controller
 {
     /**
      * Show the confirm password view.
-     *
-     * @return \Inertia\Response
      */
-    public function show()
+    public function show(): Response
     {
         return Inertia::render('Auth/ConfirmPassword');
     }
 
     /**
      * Confirm the user's password.
-     *
-     * @return mixed
      */
-    public function store(Request $request)
+    public function store(Request $request): RedirectResponse
     {
         if (! Auth::guard('web')->validate([
             'email' => $request->user()->email,
@@ -39,6 +36,6 @@ public function store(Request $request)
 
         $request->session()->put('auth.password_confirmed_at', time());
 
-        return redirect()->intended(RouteServiceProvider::HOME);
+        return redirect()->intended(route('dashboard', absolute: false));
     }
 }
diff --git a/app/Http/Controllers/Auth/EmailVerificationNotificationController.php b/app/Http/Controllers/Auth/EmailVerificationNotificationController.php
index 6c7fa80..f64fa9b 100644
--- a/app/Http/Controllers/Auth/EmailVerificationNotificationController.php
+++ b/app/Http/Controllers/Auth/EmailVerificationNotificationController.php
@@ -3,20 +3,18 @@
 namespace App\Http\Controllers\Auth;
 
 use App\Http\Controllers\Controller;
-use App\Providers\RouteServiceProvider;
+use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Request;
 
 class EmailVerificationNotificationController extends Controller
 {
     /**
      * Send a new email verification notification.
-     *
-     * @return \Illuminate\Http\RedirectResponse
      */
-    public function store(Request $request)
+    public function store(Request $request): RedirectResponse
     {
         if ($request->user()->hasVerifiedEmail()) {
-            return redirect()->intended(RouteServiceProvider::HOME);
+            return redirect()->intended(route('dashboard', absolute: false));
         }
 
         $request->user()->sendEmailVerificationNotification();
diff --git a/app/Http/Controllers/Auth/EmailVerificationPromptController.php b/app/Http/Controllers/Auth/EmailVerificationPromptController.php
index b02dd81..b42e0d5 100644
--- a/app/Http/Controllers/Auth/EmailVerificationPromptController.php
+++ b/app/Http/Controllers/Auth/EmailVerificationPromptController.php
@@ -3,21 +3,20 @@
 namespace App\Http\Controllers\Auth;
 
 use App\Http\Controllers\Controller;
-use App\Providers\RouteServiceProvider;
+use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Request;
 use Inertia\Inertia;
+use Inertia\Response;
 
 class EmailVerificationPromptController extends Controller
 {
     /**
      * Display the email verification prompt.
-     *
-     * @return mixed
      */
-    public function __invoke(Request $request)
+    public function __invoke(Request $request): RedirectResponse|Response
     {
         return $request->user()->hasVerifiedEmail()
-                    ? redirect()->intended(RouteServiceProvider::HOME)
+                    ? redirect()->intended(route('dashboard', absolute: false))
                     : Inertia::render('Auth/VerifyEmail', ['status' => session('status')]);
     }
 }
diff --git a/app/Http/Controllers/Auth/NewPasswordController.php b/app/Http/Controllers/Auth/NewPasswordController.php
index c34f27b..394cc4a 100644
--- a/app/Http/Controllers/Auth/NewPasswordController.php
+++ b/app/Http/Controllers/Auth/NewPasswordController.php
@@ -4,6 +4,7 @@
 
 use App\Http\Controllers\Controller;
 use Illuminate\Auth\Events\PasswordReset;
+use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Hash;
 use Illuminate\Support\Facades\Password;
@@ -11,15 +12,14 @@
 use Illuminate\Validation\Rules;
 use Illuminate\Validation\ValidationException;
 use Inertia\Inertia;
+use Inertia\Response;
 
 class NewPasswordController extends Controller
 {
     /**
      * Display the password reset view.
-     *
-     * @return \Inertia\Response
      */
-    public function create(Request $request)
+    public function create(Request $request): Response
     {
         return Inertia::render('Auth/ResetPassword', [
             'email' => $request->email,
@@ -30,11 +30,9 @@ public function create(Request $request)
     /**
      * Handle an incoming new password request.
      *
-     * @return \Illuminate\Http\RedirectResponse
-     *
      * @throws \Illuminate\Validation\ValidationException
      */
-    public function store(Request $request)
+    public function store(Request $request): RedirectResponse
     {
         $request->validate([
             'token' => 'required',
diff --git a/app/Http/Controllers/Auth/PasswordController.php b/app/Http/Controllers/Auth/PasswordController.php
new file mode 100644
index 0000000..57a82b5
--- /dev/null
+++ b/app/Http/Controllers/Auth/PasswordController.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Http\Controllers\Auth;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Hash;
+use Illuminate\Validation\Rules\Password;
+
+class PasswordController extends Controller
+{
+    /**
+     * Update the user's password.
+     */
+    public function update(Request $request): RedirectResponse
+    {
+        $validated = $request->validate([
+            'current_password' => ['required', 'current_password'],
+            'password' => ['required', Password::defaults(), 'confirmed'],
+        ]);
+
+        $request->user()->update([
+            'password' => Hash::make($validated['password']),
+        ]);
+
+        return back();
+    }
+}
diff --git a/app/Http/Controllers/Auth/PasswordResetLinkController.php b/app/Http/Controllers/Auth/PasswordResetLinkController.php
index 790c44a..b22c544 100644
--- a/app/Http/Controllers/Auth/PasswordResetLinkController.php
+++ b/app/Http/Controllers/Auth/PasswordResetLinkController.php
@@ -3,19 +3,19 @@
 namespace App\Http\Controllers\Auth;
 
 use App\Http\Controllers\Controller;
+use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Password;
 use Illuminate\Validation\ValidationException;
 use Inertia\Inertia;
+use Inertia\Response;
 
 class PasswordResetLinkController extends Controller
 {
     /**
      * Display the password reset link request view.
-     *
-     * @return \Inertia\Response
      */
-    public function create()
+    public function create(): Response
     {
         return Inertia::render('Auth/ForgotPassword', [
             'status' => session('status'),
@@ -25,11 +25,9 @@ public function create()
     /**
      * Handle an incoming password reset link request.
      *
-     * @return \Illuminate\Http\RedirectResponse
-     *
      * @throws \Illuminate\Validation\ValidationException
      */
-    public function store(Request $request)
+    public function store(Request $request): RedirectResponse
     {
         $request->validate([
             'email' => 'required|email',
diff --git a/app/Http/Controllers/Auth/RegisteredUserController.php b/app/Http/Controllers/Auth/RegisteredUserController.php
index e074f08..53a546b 100644
--- a/app/Http/Controllers/Auth/RegisteredUserController.php
+++ b/app/Http/Controllers/Auth/RegisteredUserController.php
@@ -4,22 +4,21 @@
 
 use App\Http\Controllers\Controller;
 use App\Models\User;
-use App\Providers\RouteServiceProvider;
 use Illuminate\Auth\Events\Registered;
+use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Facades\Hash;
 use Illuminate\Validation\Rules;
 use Inertia\Inertia;
+use Inertia\Response;
 
 class RegisteredUserController extends Controller
 {
     /**
      * Display the registration view.
-     *
-     * @return \Inertia\Response
      */
-    public function create()
+    public function create(): Response
     {
         return Inertia::render('Auth/Register');
     }
@@ -27,15 +26,13 @@ public function create()
     /**
      * Handle an incoming registration request.
      *
-     * @return \Illuminate\Http\RedirectResponse
-     *
      * @throws \Illuminate\Validation\ValidationException
      */
-    public function store(Request $request)
+    public function store(Request $request): RedirectResponse
     {
         $request->validate([
             'name' => 'required|string|max:255',
-            'email' => 'required|string|email|max:255|unique:users',
+            'email' => 'required|string|lowercase|email|max:255|unique:'.User::class,
             'password' => ['required', 'confirmed', Rules\Password::defaults()],
         ]);
 
@@ -49,6 +46,6 @@ public function store(Request $request)
 
         Auth::login($user);
 
-        return redirect(RouteServiceProvider::HOME);
+        return redirect(route('dashboard', absolute: false));
     }
 }
diff --git a/app/Http/Controllers/Auth/VerifyEmailController.php b/app/Http/Controllers/Auth/VerifyEmailController.php
index 7729a5f..784765e 100644
--- a/app/Http/Controllers/Auth/VerifyEmailController.php
+++ b/app/Http/Controllers/Auth/VerifyEmailController.php
@@ -3,27 +3,25 @@
 namespace App\Http\Controllers\Auth;
 
 use App\Http\Controllers\Controller;
-use App\Providers\RouteServiceProvider;
 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.
-     *
-     * @return \Illuminate\Http\RedirectResponse
      */
-    public function __invoke(EmailVerificationRequest $request)
+    public function __invoke(EmailVerificationRequest $request): RedirectResponse
     {
         if ($request->user()->hasVerifiedEmail()) {
-            return redirect()->intended(RouteServiceProvider::HOME.'?verified=1');
+            return redirect()->intended(route('dashboard', absolute: false).'?verified=1');
         }
 
         if ($request->user()->markEmailAsVerified()) {
             event(new Verified($request->user()));
         }
 
-        return redirect()->intended(RouteServiceProvider::HOME.'?verified=1');
+        return redirect()->intended(route('dashboard', absolute: false).'?verified=1');
     }
 }
diff --git a/app/Http/Controllers/ProfileController.php b/app/Http/Controllers/ProfileController.php
new file mode 100644
index 0000000..873b4f7
--- /dev/null
+++ b/app/Http/Controllers/ProfileController.php
@@ -0,0 +1,63 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Http\Requests\ProfileUpdateRequest;
+use Illuminate\Contracts\Auth\MustVerifyEmail;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Redirect;
+use Inertia\Inertia;
+use Inertia\Response;
+
+class ProfileController extends Controller
+{
+    /**
+     * Display the user's profile form.
+     */
+    public function edit(Request $request): Response
+    {
+        return Inertia::render('Profile/Edit', [
+            'mustVerifyEmail' => $request->user() instanceof MustVerifyEmail,
+            'status' => session('status'),
+        ]);
+    }
+
+    /**
+     * Update the user's profile information.
+     */
+    public function update(ProfileUpdateRequest $request): RedirectResponse
+    {
+        $request->user()->fill($request->validated());
+
+        if ($request->user()->isDirty('email')) {
+            $request->user()->email_verified_at = null;
+        }
+
+        $request->user()->save();
+
+        return Redirect::route('profile.edit');
+    }
+
+    /**
+     * Delete the user's account.
+     */
+    public function destroy(Request $request): RedirectResponse
+    {
+        $request->validate([
+            'password' => ['required', 'current_password'],
+        ]);
+
+        $user = $request->user();
+
+        Auth::logout();
+
+        $user->delete();
+
+        $request->session()->invalidate();
+        $request->session()->regenerateToken();
+
+        return Redirect::to('/');
+    }
+}
diff --git a/app/Http/Middleware/HandleInertiaRequests.php b/app/Http/Middleware/HandleInertiaRequests.php
index 4c4f01f..0c5b182 100644
--- a/app/Http/Middleware/HandleInertiaRequests.php
+++ b/app/Http/Middleware/HandleInertiaRequests.php
@@ -5,7 +5,6 @@
 use BalajiDharma\LaravelMenu\Models\Menu;
 use Illuminate\Http\Request;
 use Inertia\Middleware;
-use Tightenco\Ziggy\Ziggy;
 
 class HandleInertiaRequests extends Middleware
 {
@@ -18,10 +17,8 @@ class HandleInertiaRequests extends Middleware
 
     /**
      * Determine the current asset version.
-     *
-     * @return string|null
      */
-    public function version(Request $request)
+    public function version(Request $request): string|null
     {
         return parent::version($request);
     }
@@ -29,25 +26,21 @@ public function version(Request $request)
     /**
      * Define the props that are shared by default.
      *
-     * @return array
+     * @return array<string, mixed>
      */
-    public function share(Request $request)
+    public function share(Request $request): array
     {
-        return array_merge(parent::share($request), [
+        return [
+            ...parent::share($request),
             'auth' => [
                 'user' => $request->user(),
             ],
-            'ziggy' => function () use ($request) {
-                return array_merge((new Ziggy)->toArray(), [
-                    'location' => $request->url(),
-                ]);
-            },
             'flash' => [
                 'message' => fn () => $request->session()->get('message'),
             ],
             'navigation' => [
                 'menu' => Menu::getMenuTree('admin', false, true),
             ],
-        ]);
+        ];
     }
 }
diff --git a/app/Http/Requests/Auth/LoginRequest.php b/app/Http/Requests/Auth/LoginRequest.php
index 940a2d4..2b92f65 100644
--- a/app/Http/Requests/Auth/LoginRequest.php
+++ b/app/Http/Requests/Auth/LoginRequest.php
@@ -13,10 +13,8 @@ class LoginRequest extends FormRequest
 {
     /**
      * Determine if the user is authorized to make this request.
-     *
-     * @return bool
      */
-    public function authorize()
+    public function authorize(): bool
     {
         return true;
     }
@@ -24,9 +22,9 @@ public function authorize()
     /**
      * Get the validation rules that apply to the request.
      *
-     * @return array
+     * @return array<string, \Illuminate\Contracts\Validation\Rule|array|string>
      */
-    public function rules()
+    public function rules(): array
     {
         return [
             'email' => ['required', 'string', 'email'],
@@ -37,11 +35,9 @@ public function rules()
     /**
      * Attempt to authenticate the request's credentials.
      *
-     * @return void
-     *
      * @throws \Illuminate\Validation\ValidationException
      */
-    public function authenticate()
+    public function authenticate(): void
     {
         $this->ensureIsNotRateLimited();
 
@@ -59,11 +55,9 @@ public function authenticate()
     /**
      * Ensure the login request is not rate limited.
      *
-     * @return void
-     *
      * @throws \Illuminate\Validation\ValidationException
      */
-    public function ensureIsNotRateLimited()
+    public function ensureIsNotRateLimited(): void
     {
         if (! RateLimiter::tooManyAttempts($this->throttleKey(), 5)) {
             return;
@@ -83,11 +77,9 @@ public function ensureIsNotRateLimited()
 
     /**
      * Get the rate limiting throttle key for the request.
-     *
-     * @return string
      */
-    public function throttleKey()
+    public function throttleKey(): string
     {
-        return Str::lower($this->input('email')).'|'.$this->ip();
+        return Str::transliterate(Str::lower($this->string('email')).'|'.$this->ip());
     }
 }
diff --git a/app/Http/Requests/ProfileUpdateRequest.php b/app/Http/Requests/ProfileUpdateRequest.php
new file mode 100644
index 0000000..93b0022
--- /dev/null
+++ b/app/Http/Requests/ProfileUpdateRequest.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Http\Requests;
+
+use App\Models\User;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Validation\Rule;
+
+class ProfileUpdateRequest extends FormRequest
+{
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array<string, \Illuminate\Contracts\Validation\Rule|array|string>
+     */
+    public function rules(): array
+    {
+        return [
+            'name' => ['required', 'string', 'max:255'],
+            'email' => ['required', 'string', 'lowercase', 'email', 'max:255', Rule::unique(User::class)->ignore($this->user()->id)],
+        ];
+    }
+}
diff --git a/app/Providers/BroadcastServiceProvider.php b/app/Providers/BroadcastServiceProvider.php
deleted file mode 100644
index 395c518..0000000
--- a/app/Providers/BroadcastServiceProvider.php
+++ /dev/null
@@ -1,21 +0,0 @@
-<?php
-
-namespace App\Providers;
-
-use Illuminate\Support\Facades\Broadcast;
-use Illuminate\Support\ServiceProvider;
-
-class BroadcastServiceProvider extends ServiceProvider
-{
-    /**
-     * Bootstrap any application services.
-     *
-     * @return void
-     */
-    public function boot()
-    {
-        Broadcast::routes();
-
-        require base_path('routes/channels.php');
-    }
-}
diff --git a/app/Providers/RouteServiceProvider.php b/app/Providers/RouteServiceProvider.php
deleted file mode 100644
index be24fc8..0000000
--- a/app/Providers/RouteServiceProvider.php
+++ /dev/null
@@ -1,56 +0,0 @@
-<?php
-
-namespace App\Providers;
-
-use Illuminate\Cache\RateLimiting\Limit;
-use Illuminate\Foundation\Support\Providers\RouteServiceProvider as ServiceProvider;
-use Illuminate\Http\Request;
-use Illuminate\Support\Facades\RateLimiter;
-use Illuminate\Support\Facades\Route;
-
-class RouteServiceProvider extends ServiceProvider
-{
-    /**
-     * The path to the "home" route for your application.
-     *
-     * Typically, users are redirected here after authentication.
-     *
-     * @var string
-     */
-    public const HOME = '/';
-
-    /**
-     * Define your route model bindings, pattern filters, and other route configuration.
-     *
-     * @return void
-     */
-    public function boot()
-    {
-        $this->configureRateLimiting();
-
-        $this->routes(function () {
-            Route::middleware('api')
-                ->prefix('api')
-                ->group(base_path('routes/api.php'));
-
-            Route::middleware('web')
-                ->group(base_path('routes/web.php'));
-
-            Route::middleware('web')
-                ->namespace($this->namespace)
-                ->group(base_path('routes/admin.php'));
-        });
-    }
-
-    /**
-     * Configure the rate limiters for the application.
-     *
-     * @return void
-     */
-    protected function configureRateLimiting()
-    {
-        RateLimiter::for('api', function (Request $request) {
-            return Limit::perMinute(60)->by($request->user()?->id ?: $request->ip());
-        });
-    }
-}
diff --git a/bootstrap/app.php b/bootstrap/app.php
index 037e17d..b5e4d4e 100644
--- a/bootstrap/app.php
+++ b/bootstrap/app.php
@@ -1,55 +1,28 @@
 <?php
 
-/*
-|--------------------------------------------------------------------------
-| Create The Application
-|--------------------------------------------------------------------------
-|
-| The first thing we will do is create a new Laravel application instance
-| which serves as the "glue" for all the components of Laravel, and is
-| the IoC container for the system binding all of the various parts.
-|
-*/
-
-$app = new Illuminate\Foundation\Application(
-    $_ENV['APP_BASE_PATH'] ?? dirname(__DIR__)
-);
-
-/*
-|--------------------------------------------------------------------------
-| Bind Important Interfaces
-|--------------------------------------------------------------------------
-|
-| Next, we need to bind some important interfaces into the container so
-| we will be able to resolve them when needed. The kernels serve the
-| incoming requests to this application from both the web and CLI.
-|
-*/
-
-$app->singleton(
-    Illuminate\Contracts\Http\Kernel::class,
-    App\Http\Kernel::class
-);
-
-$app->singleton(
-    Illuminate\Contracts\Console\Kernel::class,
-    App\Console\Kernel::class
-);
-
-$app->singleton(
-    Illuminate\Contracts\Debug\ExceptionHandler::class,
-    App\Exceptions\Handler::class
-);
-
-/*
-|--------------------------------------------------------------------------
-| Return The Application
-|--------------------------------------------------------------------------
-|
-| This script returns the application instance. The instance is given to
-| the calling script so we can separate the building of the instances
-| from the actual running of the application and sending responses.
-|
-*/
-
-return $app;
+use Illuminate\Foundation\Application;
+use Illuminate\Foundation\Configuration\Exceptions;
+use Illuminate\Foundation\Configuration\Middleware;
+use Illuminate\Support\Facades\Route;
+
+return Application::configure(basePath: dirname(__DIR__))
+    ->withRouting(
+        web: __DIR__.'/../routes/web.php',
+        commands: __DIR__.'/../routes/console.php',
+        health: '/up',
+        then: function () {
+            Route::middleware('web')
+                ->group(base_path('routes/admin.php'));
+        },
+    )
+    ->withMiddleware(function (Middleware $middleware) {
+        $middleware->web(append: [
+            \App\Http\Middleware\HandleInertiaRequests::class,
+            \Illuminate\Http\Middleware\AddLinkHeadersForPreloadedAssets::class,
+        ]);
+
+        //
+    })
+    ->withExceptions(function (Exceptions $exceptions) {
+        //
+    })->create();
diff --git a/bootstrap/providers.php b/bootstrap/providers.php
new file mode 100644
index 0000000..3943ffe
--- /dev/null
+++ b/bootstrap/providers.php
@@ -0,0 +1,8 @@
+<?php
+
+return [
+    App\Providers\AppServiceProvider::class,
+    App\Providers\AuthServiceProvider::class,
+    App\Providers\EventServiceProvider::class,
+    App\Providers\ViewServiceProvider::class,
+];
diff --git a/composer.json b/composer.json
index c7d4f50..129c594 100644
--- a/composer.json
+++ b/composer.json
@@ -9,8 +9,9 @@
         "balajidharma/laravel-admin-core": "^1.0",
         "inertiajs/inertia-laravel": "^1.0",
         "laravel/framework": "^11.0",
+        "laravel/sanctum": "^4.0",
         "laravel/tinker": "^2.9",
-        "tightenco/ziggy": "^1.0"
+        "tightenco/ziggy": "^2.0"
     },
     "require-dev": {
         "fakerphp/faker": "^1.23",
diff --git a/config/app.php b/config/app.php
index ef76a7e..f467267 100644
--- a/config/app.php
+++ b/config/app.php
@@ -1,7 +1,5 @@
 <?php
 
-use Illuminate\Support\Facades\Facade;
-
 return [
 
     /*
@@ -9,9 +7,9 @@
     | Application Name
     |--------------------------------------------------------------------------
     |
-    | This value is the name of your application. This value is used when the
+    | This value is the name of your application, which will be used when the
     | framework needs to place the application's name in a notification or
-    | any other location as required by the application or its packages.
+    | other UI elements where an application name needs to be displayed.
     |
     */
 
@@ -50,26 +48,24 @@
     |
     | This URL is used by the console to properly generate URLs when using
     | the Artisan command line tool. You should set this to the root of
-    | your application so that it is used when running Artisan tasks.
+    | the application so that it's available within Artisan commands.
     |
     */
 
     'url' => env('APP_URL', 'http://localhost'),
 
-    'asset_url' => env('ASSET_URL'),
-
     /*
     |--------------------------------------------------------------------------
     | Application Timezone
     |--------------------------------------------------------------------------
     |
     | Here you may specify the default timezone for your application, which
-    | will be used by the PHP date and date-time functions. We have gone
-    | ahead and set this to a sensible default for you out of the box.
+    | will be used by the PHP date and date-time functions. The timezone
+    | is set to "UTC" by default as it is suitable for most use cases.
     |
     */
 
-    'timezone' => 'UTC',
+    'timezone' => env('APP_TIMEZONE', 'UTC'),
 
     /*
     |--------------------------------------------------------------------------
@@ -77,53 +73,37 @@
     |--------------------------------------------------------------------------
     |
     | The application locale determines the default locale that will be used
-    | by the translation service provider. You are free to set this value
-    | to any of the locales which will be supported by the application.
+    | by Laravel's translation / localization methods. This option can be
+    | set to any locale for which you plan to have translation strings.
     |
     */
 
-    'locale' => 'en',
+    'locale' => env('APP_LOCALE', 'en'),
 
-    /*
-    |--------------------------------------------------------------------------
-    | Application Fallback Locale
-    |--------------------------------------------------------------------------
-    |
-    | The fallback locale determines the locale to use when the current one
-    | is not available. You may change the value to correspond to any of
-    | the language folders that are provided through your application.
-    |
-    */
+    'fallback_locale' => env('APP_FALLBACK_LOCALE', 'en'),
 
-    'fallback_locale' => 'en',
-
-    /*
-    |--------------------------------------------------------------------------
-    | Faker Locale
-    |--------------------------------------------------------------------------
-    |
-    | This locale will be used by the Faker PHP library when generating fake
-    | data for your database seeds. For example, this will be used to get
-    | localized telephone numbers, street address information and more.
-    |
-    */
-
-    'faker_locale' => 'en_US',
+    'faker_locale' => env('APP_FAKER_LOCALE', 'en_US'),
 
     /*
     |--------------------------------------------------------------------------
     | Encryption Key
     |--------------------------------------------------------------------------
     |
-    | This key is used by the Illuminate encrypter service and should be set
-    | to a random, 32 character string, otherwise these encrypted strings
-    | will not be safe. Please do this before deploying an application!
+    | This key is utilized by Laravel's encryption services and should be set
+    | to a random, 32 character string to ensure that all encrypted values
+    | are secure. You should do this prior to deploying the application.
     |
     */
 
+    'cipher' => 'AES-256-CBC',
+
     'key' => env('APP_KEY'),
 
-    'cipher' => 'AES-256-CBC',
+    'previous_keys' => [
+        ...array_filter(
+            explode(',', env('APP_PREVIOUS_KEYS', ''))
+        ),
+    ],
 
     /*
     |--------------------------------------------------------------------------
@@ -139,77 +119,8 @@
     */
 
     'maintenance' => [
-        'driver' => 'file',
-        // 'store'  => 'redis',
+        'driver' => env('APP_MAINTENANCE_DRIVER', 'file'),
+        'store' => env('APP_MAINTENANCE_STORE', 'database'),
     ],
 
-    /*
-    |--------------------------------------------------------------------------
-    | Autoloaded Service Providers
-    |--------------------------------------------------------------------------
-    |
-    | The service providers listed here will be automatically loaded on the
-    | request to your application. Feel free to add your own services to
-    | this array to grant expanded functionality to your applications.
-    |
-    */
-
-    'providers' => [
-
-        /*
-         * Laravel Framework Service Providers...
-         */
-        Illuminate\Auth\AuthServiceProvider::class,
-        Illuminate\Broadcasting\BroadcastServiceProvider::class,
-        Illuminate\Bus\BusServiceProvider::class,
-        Illuminate\Cache\CacheServiceProvider::class,
-        Illuminate\Foundation\Providers\ConsoleSupportServiceProvider::class,
-        Illuminate\Cookie\CookieServiceProvider::class,
-        Illuminate\Database\DatabaseServiceProvider::class,
-        Illuminate\Encryption\EncryptionServiceProvider::class,
-        Illuminate\Filesystem\FilesystemServiceProvider::class,
-        Illuminate\Foundation\Providers\FoundationServiceProvider::class,
-        Illuminate\Hashing\HashServiceProvider::class,
-        Illuminate\Mail\MailServiceProvider::class,
-        Illuminate\Notifications\NotificationServiceProvider::class,
-        Illuminate\Pagination\PaginationServiceProvider::class,
-        Illuminate\Pipeline\PipelineServiceProvider::class,
-        Illuminate\Queue\QueueServiceProvider::class,
-        Illuminate\Redis\RedisServiceProvider::class,
-        Illuminate\Auth\Passwords\PasswordResetServiceProvider::class,
-        Illuminate\Session\SessionServiceProvider::class,
-        Illuminate\Translation\TranslationServiceProvider::class,
-        Illuminate\Validation\ValidationServiceProvider::class,
-        Illuminate\View\ViewServiceProvider::class,
-
-        /*
-         * Package Service Providers...
-         */
-
-        /*
-         * Application Service Providers...
-         */
-        App\Providers\AppServiceProvider::class,
-        App\Providers\AuthServiceProvider::class,
-        // App\Providers\BroadcastServiceProvider::class,
-        App\Providers\EventServiceProvider::class,
-        App\Providers\RouteServiceProvider::class,
-
-    ],
-
-    /*
-    |--------------------------------------------------------------------------
-    | Class Aliases
-    |--------------------------------------------------------------------------
-    |
-    | This array of class aliases will be registered when this application
-    | is started. However, feel free to register as many as you wish as
-    | the aliases are "lazy" loaded so they don't hinder performance.
-    |
-    */
-
-    'aliases' => Facade::defaultAliases()->merge([
-        // 'ExampleClass' => App\Example\ExampleClass::class,
-    ])->toArray(),
-
 ];
diff --git a/jsconfig.json b/jsconfig.json
index 97921a9..6269354 100644
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -2,7 +2,8 @@
     "compilerOptions": {
         "baseUrl": ".",
         "paths": {
-            "@/*": ["resources/js/*"]
+            "@/*": ["resources/js/*"],
+            "ziggy-js": ["./vendor/tightenco/ziggy"]
         }
     },
     "exclude": ["node_modules", "public"]
diff --git a/package.json b/package.json
index 6f58c40..1663b47 100644
--- a/package.json
+++ b/package.json
@@ -1,27 +1,26 @@
 {
     "private": true,
+    "type": "module",
     "scripts": {
         "dev": "vite",
         "build": "vite build"
     },
     "devDependencies": {
+        "@inertiajs/vue3": "^1.0.0",
         "@mdi/js": "^7.0.96",
-        "@tailwindcss/forms": "^0.5.2",
+        "@tailwindcss/forms": "^0.5.3",
         "@tailwindcss/line-clamp": "^0.4.0",
-        "@vitejs/plugin-vue": "^3.0.1",
-        "autoprefixer": "^10.4.2",
-        "axios": "^0.27",
+        "@vitejs/plugin-vue": "^5.0.0",
+        "autoprefixer": "^10.4.12",
+        "axios": "^1.6.4",
         "chart.js": "^3.9.1",
-        "laravel-vite-plugin": "^0.5.0",
+        "laravel-vite-plugin": "^1.0",
         "lodash": "^4.17.19",
         "numeral": "^2.0.6",
         "pinia": "^2.0.17",
-        "postcss": "^8.4.6",
-        "tailwindcss": "^3.1.0",
-        "vite": "^3.0.0",
-        "vue": "^3.2.31"
-    },
-    "dependencies": {
-        "@inertiajs/vue3": "^1.0.0"
+        "postcss": "^8.4.31",
+        "tailwindcss": "^3.2.1",
+        "vite": "^5.0",
+        "vue": "^3.4.0"
     }
 }
diff --git a/postcss.config.js b/postcss.config.js
index 67cdf1a..49c0612 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,4 +1,4 @@
-module.exports = {
+export default {
     plugins: {
         tailwindcss: {},
         autoprefixer: {},
diff --git a/resources/css/_checkbox-radio-switch.css b/resources/css/_checkbox-radio-switch.css
index 5d5ef37..7509581 100644
--- a/resources/css/_checkbox-radio-switch.css
+++ b/resources/css/_checkbox-radio-switch.css
@@ -1,61 +1,73 @@
-.checkbox, .radio, .switch {
-  @apply inline-flex items-center cursor-pointer relative;
-}
-
-.checkbox input[type=checkbox], .radio input[type=radio], .switch input[type=checkbox] {
-  @apply absolute left-0 opacity-0 -z-1;
-}
-
-.checkbox input[type=checkbox]+.check, .radio input[type=radio]+.check, .switch input[type=checkbox]+.check {
-  @apply border-gray-700 border transition-colors duration-200 dark:bg-slate-800;
-}
-
-.checkbox input[type=checkbox]:focus+.check, .radio input[type=radio]:focus+.check, .switch input[type=checkbox]:focus+.check {
-  @apply ring ring-blue-700;
-}
-
-.checkbox input[type=checkbox]+.check, .radio input[type=radio]+.check {
-  @apply block w-5 h-5;
-}
-
-.checkbox input[type=checkbox]+.check {
-  @apply rounded;
-}
-
-.switch input[type=checkbox]+.check {
-  @apply flex items-center shrink-0 w-12 h-6 p-0.5 bg-gray-200;
-}
-
-.radio input[type=radio]+.check, .switch input[type=checkbox]+.check, .switch input[type=checkbox]+.check:before {
-  @apply rounded-full;
-}
-
-.checkbox input[type=checkbox]:checked+.check, .radio input[type=radio]:checked+.check {
-  @apply bg-no-repeat bg-center bg-blue-600 border-blue-600 border-4;
-}
-
-.checkbox input[type=checkbox]:checked+.check {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E");
-}
-
-.radio input[type=radio]:checked+.check {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z' /%3E%3C/svg%3E");
-}
-
-.switch input[type=checkbox]:checked+.check {
-  @apply bg-blue-600 border-blue-600;
-}
-
-.switch input[type=checkbox]+.check:before {
-  content: '';
-  @apply block w-5 h-5 bg-white border border-gray-700;
-}
-
-.switch input[type=checkbox]:checked+.check:before {
-  transform: translate3d(110%, 0 ,0);
-  @apply border-blue-600;
-}
-
-.checkbox .control-label, .radio .control-label, .switch .control-label {
-  @apply pl-2;
-}
+@layer components {
+  .checkbox,
+  .radio,
+  .switch {
+    @apply inline-flex items-center cursor-pointer relative;
+  }
+
+  .checkbox input[type='checkbox'],
+  .radio input[type='radio'],
+  .switch input[type='checkbox'] {
+    @apply absolute left-0 opacity-0 -z-1;
+  }
+
+  .checkbox input[type='checkbox'] + .check,
+  .radio input[type='radio'] + .check,
+  .switch input[type='checkbox'] + .check {
+    @apply border-gray-700 border transition-colors duration-200 dark:bg-slate-800;
+  }
+
+  .checkbox input[type='checkbox']:focus + .check,
+  .radio input[type='radio']:focus + .check,
+  .switch input[type='checkbox']:focus + .check {
+    @apply ring ring-blue-700;
+  }
+
+  .checkbox input[type='checkbox'] + .check,
+  .radio input[type='radio'] + .check {
+    @apply block w-5 h-5;
+  }
+
+  .checkbox input[type='checkbox'] + .check {
+    @apply rounded;
+  }
+
+  .switch input[type='checkbox'] + .check {
+    @apply flex items-center shrink-0 w-12 h-6 p-0.5 bg-gray-200;
+  }
+
+  .radio input[type='radio'] + .check,
+  .switch input[type='checkbox'] + .check,
+  .switch input[type='checkbox'] + .check:before {
+    @apply rounded-full;
+  }
+
+  .checkbox input[type='checkbox']:checked + .check,
+  .radio input[type='radio']:checked + .check {
+    @apply bg-no-repeat bg-center border-4;
+  }
+
+  .checkbox input[type='checkbox']:checked + .check {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E");
+  }
+
+  .radio input[type='radio']:checked + .check {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z' /%3E%3C/svg%3E");
+  }
+
+  .switch input[type='checkbox']:checked + .check,
+  .checkbox input[type='checkbox']:checked + .check,
+  .radio input[type='radio']:checked + .check {
+    @apply bg-blue-600 border-blue-600;
+  }
+
+  .switch input[type='checkbox'] + .check:before {
+    content: '';
+    @apply block w-5 h-5 bg-white border border-gray-700;
+  }
+
+  .switch input[type='checkbox']:checked + .check:before {
+    transform: translate3d(110%, 0, 0);
+    @apply border-blue-600;
+  }
+}
\ No newline at end of file
diff --git a/resources/css/_progress.css b/resources/css/_progress.css
index 33bb821..fba9e16 100644
--- a/resources/css/_progress.css
+++ b/resources/css/_progress.css
@@ -1,19 +1,21 @@
-progress {
-  @apply h-3 rounded-full overflow-hidden;
-}
+@layer base {
+  progress {
+    @apply h-3 rounded-full overflow-hidden;
+  }
 
-progress::-webkit-progress-bar {
-  @apply bg-blue-200;
-}
+  progress::-webkit-progress-bar {
+    @apply bg-blue-200;
+  }
 
-progress::-webkit-progress-value {
-  @apply bg-blue-500;
-}
+  progress::-webkit-progress-value {
+    @apply bg-blue-500;
+  }
 
-progress::-moz-progress-bar {
-  @apply bg-blue-500;
-}
+  progress::-moz-progress-bar {
+    @apply bg-blue-500;
+  }
 
-progress::-ms-fill {
-  @apply bg-blue-500 border-0;
-}
+  progress::-ms-fill {
+    @apply bg-blue-500 border-0;
+  }
+}
\ No newline at end of file
diff --git a/resources/css/_scrollbars.css b/resources/css/_scrollbars.css
index 43ad367..dbcca7a 100644
--- a/resources/css/_scrollbars.css
+++ b/resources/css/_scrollbars.css
@@ -1,37 +1,41 @@
-html {
-  scrollbar-width: thin;
-  scrollbar-color: #9ca3af #e5e7eb;
-}
-
-html::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-html::-webkit-scrollbar-track {
-  @apply bg-gray-200;
-}
-
-html::-webkit-scrollbar-thumb {
-  @apply bg-gray-400 rounded;
-}
-
-html::-webkit-scrollbar-thumb:hover {
-  @apply bg-gray-500;
-}
-
-html.dark-scrollbars {
-  scrollbar-color: #374151 #111827;
-}
-
-html.dark-scrollbars::-webkit-scrollbar-track {
-  @apply bg-gray-900;
-}
-
-html.dark-scrollbars::-webkit-scrollbar-thumb {
-  @apply bg-gray-700;
-}
-
-html.dark-scrollbars::-webkit-scrollbar-thumb:hover {
-  @apply bg-gray-600;
-}
+@layer base {
+  html {
+    scrollbar-width: thin;
+    scrollbar-color: rgb(156, 163, 175) rgb(249, 250, 251);
+  }
+
+  body::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  body::-webkit-scrollbar-track {
+    @apply bg-gray-50;
+  }
+
+  body::-webkit-scrollbar-thumb {
+    @apply bg-gray-400 rounded;
+  }
+
+  body::-webkit-scrollbar-thumb:hover {
+    @apply bg-gray-500;
+  }
+}
+
+@layer utilities {
+  .dark-scrollbars-compat {
+    scrollbar-color: rgb(71, 85, 105) rgb(30, 41, 59);
+  }
+
+  .dark-scrollbars::-webkit-scrollbar-track {
+    @apply bg-slate-800;
+  }
+
+  .dark-scrollbars::-webkit-scrollbar-thumb {
+    @apply bg-slate-600;
+  }
+
+  .dark-scrollbars::-webkit-scrollbar-thumb:hover {
+    @apply bg-slate-500;
+  }
+}
\ No newline at end of file
diff --git a/resources/css/_table.css b/resources/css/_table.css
index 6a1a8b4..9787b57 100644
--- a/resources/css/_table.css
+++ b/resources/css/_table.css
@@ -1,46 +1,49 @@
-table {
-  @apply w-full;
-}
-
-thead {
-  @apply hidden lg:table-header-group;
-}
-
-tr {
-  @apply max-w-full block relative border-b-4 border-gray-100
-    lg:table-row lg:border-b-0 dark:border-slate-800;
-}
-
-tr:last-child {
-  @apply border-b-0;
-}
-
-td:not(:first-child) {
-  @apply lg:border-l lg:border-t-0 lg:border-r-0 lg:border-b-0 lg:border-gray-100 lg:dark:border-slate-700;
-}
-
-th {
-  @apply lg:text-left lg:p-3;
-}
-
-td {
-  @apply flex justify-between text-right py-3 px-4 align-top border-b border-gray-100
-    lg:table-cell lg:text-left lg:p-3 lg:align-middle lg:border-b-0 dark:border-slate-800;
-}
-
-td:last-child {
-  @apply border-b-0;
-}
-
-tbody tr, tbody tr:nth-child(odd) {
-  @apply lg:hover:bg-gray-100 lg:dark:hover:bg-slate-700/70;
-}
-
-tbody tr:nth-child(odd) {
-  @apply lg:bg-gray-50 lg:dark:bg-slate-800;
-}
-
-td:before {
-  content: attr(data-label);
-  @apply font-semibold pr-3 text-left lg:hidden;
-}
+@layer base {
+  table {
+    @apply w-full;
+  }
+
+  thead {
+    @apply hidden lg:table-header-group;
+  }
+
+  tr {
+    @apply max-w-full block relative border-b-4 border-gray-100
+      lg:table-row lg:border-b-0 dark:border-slate-800;
+  }
+
+  tr:last-child {
+    @apply border-b-0;
+  }
+
+  td:not(:first-child) {
+    @apply lg:border-l lg:border-t-0 lg:border-r-0 lg:border-b-0 lg:border-gray-100 lg:dark:border-slate-700;
+  }
+
+  th {
+    @apply lg:text-left lg:p-3;
+  }
+
+  td {
+    @apply flex justify-between text-right py-3 px-4 align-top border-b border-gray-100
+      lg:table-cell lg:text-left lg:p-3 lg:align-middle lg:border-b-0 dark:border-slate-800;
+  }
+
+  td:last-child {
+    @apply border-b-0;
+  }
+
+  tbody tr,
+  tbody tr:nth-child(odd) {
+    @apply lg:hover:bg-gray-100 lg:dark:hover:bg-slate-700/70;
+  }
+
+  tbody tr:nth-child(odd) {
+    @apply lg:bg-gray-100/50 lg:dark:bg-slate-800/50;
+  }
+
+  td:before {
+    content: attr(data-label);
+    @apply font-semibold pr-3 text-left lg:hidden;
+  }
+}
\ No newline at end of file
diff --git a/resources/css/app.css b/resources/css/app.css
new file mode 100644
index 0000000..5153810
--- /dev/null
+++ b/resources/css/app.css
@@ -0,0 +1,11 @@
+@import 'tailwind/_base.css';
+@import 'tailwind/_components.css';
+@import 'tailwind/_utilities.css';
+
+@import '_checkbox-radio-switch.css';
+@import '_progress.css';
+@import '_scrollbars.css';
+@import '_table.css';
+
+@import 'styles/_basic.css';
+@import 'styles/_white.css';
\ No newline at end of file
diff --git a/resources/css/styles/_basic.css b/resources/css/styles/_basic.css
new file mode 100644
index 0000000..4ee2296
--- /dev/null
+++ b/resources/css/styles/_basic.css
@@ -0,0 +1,31 @@
+@layer components {
+    .style-basic:not(.dark) {
+      .aside {
+        @apply bg-gray-800;
+      }
+      .aside-scrollbars {
+        @apply aside-scrollbars-gray;
+      }
+      .aside-brand {
+        @apply bg-gray-900 text-white;
+      }
+      .aside-menu-item {
+        @apply text-gray-300 hover:text-white;
+      }
+      .aside-menu-item-active {
+        @apply text-white;
+      }
+      .aside-menu-dropdown {
+        @apply bg-gray-700/50;
+      }
+      .navbar-item-label {
+        @apply text-black hover:text-blue-500;
+      }
+      .navbar-item-label-active {
+        @apply text-blue-600;
+      }
+      .overlay {
+        @apply from-gray-700 via-gray-900 to-gray-700;
+      }
+    }
+  }
\ No newline at end of file
diff --git a/resources/css/styles/_white.css b/resources/css/styles/_white.css
new file mode 100644
index 0000000..0bc40a3
--- /dev/null
+++ b/resources/css/styles/_white.css
@@ -0,0 +1,31 @@
+@layer components {
+    .style-white:not(.dark) {
+      .aside {
+        @apply bg-white;
+      }
+      .aside-scrollbars {
+        @apply aside-scrollbars-light;
+      }
+      .aside-menu-item {
+        @apply text-blue-600 hover:text-black;
+      }
+      .aside-menu-item-active {
+        @apply text-black;
+      }
+      .aside-menu-dropdown {
+        @apply bg-gray-100/75;
+      }
+      .navbar-item-label {
+        @apply text-blue-600;
+      }
+      .navbar-item-label-hover {
+        @apply hover:text-black;
+      }
+      .navbar-item-label-active {
+        @apply text-black;
+      }
+      .overlay {
+        @apply from-white via-gray-100 to-white;
+      }
+    }
+  }
\ No newline at end of file
diff --git a/resources/js/Components/Admin/MenuItemList.vue b/resources/js/Components/Admin/MenuItemList.vue
index 2f587ab..86c3a86 100644
--- a/resources/js/Components/Admin/MenuItemList.vue
+++ b/resources/js/Components/Admin/MenuItemList.vue
@@ -37,7 +37,6 @@ const props = defineProps({
                 :path="item.icon"
                 class="flex-none"
                 :class="activeInactiveStyle"
-                w="w-16"
                 :size="18"
               />
               {{ item.name }}
diff --git a/resources/js/Components/AsideMenu.vue b/resources/js/Components/AsideMenu.vue
index 53741df..8375e59 100644
--- a/resources/js/Components/AsideMenu.vue
+++ b/resources/js/Components/AsideMenu.vue
@@ -1,26 +1,39 @@
 <script setup>
 import { reactive, computed } from 'vue'
 import { usePage } from '@inertiajs/vue3'
-import { useLayoutStore } from '@/Stores/layout.js'
 //import menu from '@/menu.js'
 import AsideMenuLayer from '@/Components/AsideMenuLayer.vue'
 import OverlayLayer from '@/Components/OverlayLayer.vue'
 
-let menu = reactive({})
-menu = computed(() => usePage().props.navigation.menu)
+defineProps({
+  menu: {
+    type: Array,
+    required: true
+  },
+  isAsideMobileExpanded: Boolean,
+  isAsideLgActive: Boolean
+})
 
-const layoutStore = useLayoutStore()
+const emit = defineEmits(['menu-click', 'aside-lg-close-click'])
+
+const menuClick = (event, item) => {
+  emit('menu-click', event, item)
+}
+
+const asideLgCloseClick = (event) => {
+  emit('aside-lg-close-click', event)
+}
 </script>
 
 <template>
   <AsideMenuLayer
-    v-if="Object.keys(menu).length"
     :menu="menu"
-    :class="[layoutStore.isAsideMobileExpanded ? 'left-0' : '-left-60 lg:left-0', {'lg:hidden xl:flex': !layoutStore.isAsideLgActive}]"
-  />
-  <OverlayLayer
-    v-show="layoutStore.isAsideLgActive"
-    z-index="z-30"
-    @overlay-click="layoutStore.isAsideLgActive = false"
+    :class="[
+      isAsideMobileExpanded ? 'left-0' : '-left-60 lg:left-0',
+      { 'lg:hidden xl:flex': !isAsideLgActive }
+    ]"
+    @menu-click="menuClick"
+    @aside-lg-close-click="asideLgCloseClick"
   />
-</template>
+  <OverlayLayer v-show="isAsideLgActive" z-index="z-30" @overlay-click="asideLgCloseClick" />
+</template>
\ No newline at end of file
diff --git a/resources/js/Components/AsideMenuItem.vue b/resources/js/Components/AsideMenuItem.vue
index ba37bf1..5f13c9c 100644
--- a/resources/js/Components/AsideMenuItem.vue
+++ b/resources/js/Components/AsideMenuItem.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { ref, computed } from 'vue'
 import { Link, usePage } from '@inertiajs/vue3'
-import { useStyleStore } from '@/Stores/style.js'
 import { mdiMinus, mdiPlus } from '@mdi/js'
 import { getButtonColor } from '@/colors.js'
 import BaseIcon from '@/Components/BaseIcon.vue'
@@ -21,22 +20,20 @@ const itemHref = computed(() => (props.item && props.item.link) ? props.item.lin
 
 const emit = defineEmits(['menu-click', 'dropdown-active'])
 
-const styleStore = useStyleStore()
-
 const hasColor = computed(() => props.item && props.item.color)
 
-const asideMenuItemActiveStyle = computed(() => hasColor.value ? '' : styleStore.asideMenuItemActiveStyle)
+const asideMenuItemActiveStyle = computed(() =>
+  hasColor.value ? '' : 'aside-menu-item-active font-bold'
+)
 
 const isDropdownActive = ref(false)
 
-const componentClass = computed(() => (
-  [
-    props.isDropdownList ? 'py-3 px-6 text-sm' : 'py-3 px-6',
-    hasColor.value
-      ? getButtonColor(props.item.color, false, true)
-      : styleStore.asideMenuItemStyle
-  ]
-))
+const componentClass = computed(() => [
+  props.isDropdownList ? 'py-3 px-6 text-sm' : 'py-3',
+  hasColor.value
+    ? getButtonColor(props.item.color, false, true)
+    : `aside-menu-item dark:text-slate-300 dark:hover:text-white`
+])
 
 const hasDropdown = computed(() => props.item.children && props.item.children.length)
 
@@ -56,7 +53,7 @@ const activeInactiveStyle = computed(
   () => {
     if(props.item.link && url === props.item.link) {
       emit('dropdown-active', true)
-      return styleStore.asideMenuItemActiveStyle
+      return asideMenuItemActiveStyle.value
     }
     else {
       return ''
@@ -71,7 +68,7 @@ const activeInactiveStyle = computed(
       :is="itemHref ? Link : 'div'"
       :href="itemHref"
       :target="item.target ?? null"
-      class="flex cursor-pointer dark:text-slate-300 dark:hover:text-white"
+      class="flex cursor-pointer"
       :class="componentClass"
       @click="menuClick"
     >
@@ -85,7 +82,7 @@ const activeInactiveStyle = computed(
       />
       <span
         class="grow text-ellipsis line-clamp-1"
-        :class="activeInactiveStyle"
+        :class="[{ 'pr-12': !hasDropdown }, activeInactiveStyle]"
       >{{ item.name }}</span>
       <BaseIcon
         v-if="hasDropdown"
@@ -98,7 +95,7 @@ const activeInactiveStyle = computed(
     <AsideMenuList
       v-if="hasDropdown"
       :menu="item.children"
-      :class="[ styleStore.asideMenuDropdownStyle, isDropdownActive ? 'block dark:bg-slate-800/50' : 'hidden' ]"
+      :class="['aside-menu-dropdown', isDropdownActive ? 'block dark:bg-slate-800/50' : 'hidden']"
       is-dropdown-list
       @dropdown-active="dropdownActive"
     />
diff --git a/resources/js/Components/AsideMenuLayer.vue b/resources/js/Components/AsideMenuLayer.vue
index 2aff701..b50be4b 100644
--- a/resources/js/Components/AsideMenuLayer.vue
+++ b/resources/js/Components/AsideMenuLayer.vue
@@ -1,40 +1,36 @@
 <script setup>
-import { router } from '@inertiajs/vue3'
 import { mdiLogout, mdiClose } from '@mdi/js'
 import { computed } from 'vue'
-import { useLayoutStore } from '@/Stores/layout.js'
-import { useStyleStore } from '@/Stores/style.js'
 import AsideMenuList from '@/Components/AsideMenuList.vue'
 import AsideMenuItem from '@/Components/AsideMenuItem.vue'
 import BaseIcon from '@/Components/BaseIcon.vue'
 
 defineProps({
   menu: {
-    type: Object,
-    default: () => {}
+    type: Array,
+    required: true
   }
 })
 
-const emit = defineEmits(['menu-click'])
-
-const layoutStore = useLayoutStore()
-
-const styleStore = useStyleStore()
+const emit = defineEmits(['menu-click', 'aside-lg-close-click'])
 
 const logoutItem = computed(() => ({
   name: 'Logout',
   icon: mdiLogout,
   color: 'info',
-  link: '#'
+  isLogout: true
 }))
 
-const logoutItemClick = () => {
-  router.post(route('logout'))
-}
-
 const menuClick = (event, item) => {
   emit('menu-click', event, item)
 }
+
+const asideLgCloseClick = (event) => {
+  emit('aside-lg-close-click', event)
+}
+
+const appName = import.meta.env.VITE_APP_NAME || 'Vue Admin';
+
 </script>
 
 <template>
@@ -42,42 +38,24 @@ const menuClick = (event, item) => {
     id="aside"
     class="lg:py-2 lg:pl-2 w-60 fixed flex z-40 top-0 h-screen transition-position overflow-hidden"
   >
-    <div
-      :class="styleStore.asideStyle"
-      class="lg:rounded-xl flex-1 flex flex-col overflow-hidden dark:bg-slate-900"
-    >
-      <div
-        :class="styleStore.asideBrandStyle"
-        class="flex flex-row h-14 items-center justify-between dark:bg-slate-900"
-      >
+    <div class="aside lg:rounded-2xl flex-1 flex flex-col overflow-hidden dark:bg-slate-900">
+      <div class="aside-brand flex flex-row h-14 items-center justify-between dark:bg-slate-900">
         <div class="text-center flex-1 lg:text-left lg:pl-6 xl:text-center xl:pl-0">
-          <b class="font-black">One</b>
+          <b class="font-black">{{appName}}</b>
         </div>
-        <button 
-          class="hidden lg:inline-block xl:hidden p-3"
-          @click.prevent="layoutStore.isAsideLgActive = false"
-        >
-          <BaseIcon
-            :path="mdiClose"
-          />
+        <button class="hidden lg:inline-block xl:hidden p-3" @click.prevent="asideLgCloseClick">
+          <BaseIcon :path="mdiClose" />
         </button>
       </div>
       <div
-        :class="styleStore.darkMode ? 'aside-scrollbars-[slate]' : styleStore.asideScrollbarsStyle" 
-        class="flex-1 overflow-y-auto overflow-x-hidden"
+        class="flex-1 overflow-y-auto overflow-x-hidden aside-scrollbars dark:aside-scrollbars-[slate]"
       >
-        <AsideMenuList
-          :menu="menu"
-          @menu-click="menuClick"
-        />
+        <AsideMenuList :menu="menu" @menu-click="menuClick" />
       </div>
 
       <ul>
-        <AsideMenuItem
-          :item="logoutItem"
-          @menu-click="logoutItemClick"
-        />
+        <AsideMenuItem :item="logoutItem" @menu-click="menuClick" />
       </ul>
     </div>
   </aside>
-</template>
+</template>
\ No newline at end of file
diff --git a/resources/js/Components/DangerButton.vue b/resources/js/Components/DangerButton.vue
new file mode 100644
index 0000000..55a5c88
--- /dev/null
+++ b/resources/js/Components/DangerButton.vue
@@ -0,0 +1,7 @@
+<template>
+    <button
+        class="inline-flex items-center px-4 py-2 bg-red-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-red-500 active:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150"
+    >
+        <slot />
+    </button>
+</template>
diff --git a/resources/js/Components/InputLabel.vue b/resources/js/Components/InputLabel.vue
new file mode 100644
index 0000000..c47ccff
--- /dev/null
+++ b/resources/js/Components/InputLabel.vue
@@ -0,0 +1,14 @@
+<script setup>
+defineProps({
+    value: {
+        type: String,
+    },
+});
+</script>
+
+<template>
+    <label class="block font-medium text-sm text-gray-700 dark:text-gray-300">
+        <span v-if="value">{{ value }}</span>
+        <span v-else><slot /></span>
+    </label>
+</template>
diff --git a/resources/js/Components/Modal.vue b/resources/js/Components/Modal.vue
new file mode 100644
index 0000000..ae2be41
--- /dev/null
+++ b/resources/js/Components/Modal.vue
@@ -0,0 +1,98 @@
+<script setup>
+import { computed, onMounted, onUnmounted, watch } from 'vue';
+
+const props = defineProps({
+    show: {
+        type: Boolean,
+        default: false,
+    },
+    maxWidth: {
+        type: String,
+        default: '2xl',
+    },
+    closeable: {
+        type: Boolean,
+        default: true,
+    },
+});
+
+const emit = defineEmits(['close']);
+
+watch(
+    () => props.show,
+    () => {
+        if (props.show) {
+            document.body.style.overflow = 'hidden';
+        } else {
+            document.body.style.overflow = null;
+        }
+    }
+);
+
+const close = () => {
+    if (props.closeable) {
+        emit('close');
+    }
+};
+
+const closeOnEscape = (e) => {
+    if (e.key === 'Escape' && props.show) {
+        close();
+    }
+};
+
+onMounted(() => document.addEventListener('keydown', closeOnEscape));
+
+onUnmounted(() => {
+    document.removeEventListener('keydown', closeOnEscape);
+    document.body.style.overflow = null;
+});
+
+const maxWidthClass = computed(() => {
+    return {
+        sm: 'sm:max-w-sm',
+        md: 'sm:max-w-md',
+        lg: 'sm:max-w-lg',
+        xl: 'sm:max-w-xl',
+        '2xl': 'sm:max-w-2xl',
+    }[props.maxWidth];
+});
+</script>
+
+<template>
+    <Teleport to="body">
+        <Transition leave-active-class="duration-200">
+            <div v-show="show" class="fixed inset-0 overflow-y-auto px-4 py-6 sm:px-0 z-50" scroll-region>
+                <Transition
+                    enter-active-class="ease-out duration-300"
+                    enter-from-class="opacity-0"
+                    enter-to-class="opacity-100"
+                    leave-active-class="ease-in duration-200"
+                    leave-from-class="opacity-100"
+                    leave-to-class="opacity-0"
+                >
+                    <div v-show="show" class="fixed inset-0 transform transition-all" @click="close">
+                        <div class="absolute inset-0 bg-gray-500 dark:bg-gray-900 opacity-75" />
+                    </div>
+                </Transition>
+
+                <Transition
+                    enter-active-class="ease-out duration-300"
+                    enter-from-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                    enter-to-class="opacity-100 translate-y-0 sm:scale-100"
+                    leave-active-class="ease-in duration-200"
+                    leave-from-class="opacity-100 translate-y-0 sm:scale-100"
+                    leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                >
+                    <div
+                        v-show="show"
+                        class="mb-6 bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full sm:mx-auto"
+                        :class="maxWidthClass"
+                    >
+                        <slot v-if="show" />
+                    </div>
+                </Transition>
+            </div>
+        </Transition>
+    </Teleport>
+</template>
diff --git a/resources/js/Components/NavBar.vue b/resources/js/Components/NavBar.vue
index 2402a77..30b12fa 100644
--- a/resources/js/Components/NavBar.vue
+++ b/resources/js/Components/NavBar.vue
@@ -1,201 +1,46 @@
 <script setup>
-import { usePage, router } from '@inertiajs/vue3'
-import { computed, ref } from 'vue'
+import { ref } from 'vue'
+import { mdiClose, mdiDotsVertical } from '@mdi/js'
 import { containerMaxW } from '@/config.js'
-import { useMainStore } from '@/Stores/main.js'
-import { useStyleStore } from '@/Stores/style.js'
-import { useLayoutStore } from '@/Stores/layout.js'
-import {
-  mdiForwardburger,
-  mdiBackburger,
-  mdiClose,
-  mdiDotsVertical,
-  mdiMenu,
-  mdiClockOutline,
-  mdiCloud,
-  mdiCrop,
-  mdiAccount,
-  mdiCogOutline,
-  mdiEmail,
-  mdiLogout,
-  mdiGithub,
-  mdiThemeLightDark
-} from '@mdi/js'
-import NavBarItem from '@/Components/NavBarItem.vue'
-import NavBarItemLabel from '@/Components/NavBarItemLabel.vue'
-import NavBarMenu from '@/Components/NavBarMenu.vue'
-import BaseDivider from '@/Components/BaseDivider.vue'
-import UserAvatarCurrentUser from '@/Components/UserAvatarCurrentUser.vue'
 import BaseIcon from '@/Components/BaseIcon.vue'
-import NavBarSearch from '@/Components/NavBarSearch.vue'
+import NavBarMenuList from '@/Components/NavBarMenuList.vue'
+import NavBarItemPlain from '@/Components/NavBarItemPlain.vue'
 
-const mainStore = useMainStore()
+defineProps({
+  menu: {
+    type: Array,
+    required: true
+  }
+})
 
-const userName = computed(() => usePage().props.auth.user.name)
+const emit = defineEmits(['menu-click'])
 
-const styleStore = useStyleStore()
-
-const toggleLightDark = () => {
-  styleStore.setDarkMode()
+const menuClick = (event, item) => {
+  emit('menu-click', event, item)
 }
 
-const layoutStore = useLayoutStore()
-
 const isMenuNavBarActive = ref(false)
-
-const menuNavBarToggle = () => {
-  isMenuNavBarActive.value = !isMenuNavBarActive.value
-}
-
-const menuOpenLg = () => {
-  layoutStore.isAsideLgActive = true
-}
-
-const logout = () => {
-  router.post(route('logout'))
-}
 </script>
 
 <template>
   <nav
-    class="top-0 left-0 right-0 fixed bg-gray-50 h-14 z-30 w-screen transition-position xl:pl-60 lg:w-auto dark:bg-slate-800"
+    class="top-0 inset-x-0 fixed bg-gray-50 h-14 z-30 transition-position w-screen lg:w-auto dark:bg-slate-800"
   >
-    <div
-      class="flex lg:items-stretch"
-      :class="containerMaxW"
-    >
-      <div class="flex-1 items-stretch flex h-14">
-        <NavBarItem
-          type="flex lg:hidden"
-          @click.prevent="layoutStore.asideMobileToggle()"
-        >
-          <BaseIcon
-            :path="layoutStore.isAsideMobileExpanded ? mdiBackburger : mdiForwardburger"
-            size="24"
-          />
-        </NavBarItem>
-        <NavBarItem
-          type="hidden lg:flex xl:hidden"
-          @click.prevent="menuOpenLg"
-        >
-          <BaseIcon
-            :path="mdiMenu"
-            size="24"
-          />
-        </NavBarItem>
-        <NavBarItem>
-          <NavBarSearch />
-        </NavBarItem>
+    <div class="flex lg:items-stretch" :class="containerMaxW">
+      <div class="flex flex-1 items-stretch h-14">
+        <slot />
       </div>
       <div class="flex-none items-stretch flex h-14 lg:hidden">
-        <NavBarItem @click.prevent="menuNavBarToggle">
-          <BaseIcon
-            :path="isMenuNavBarActive ? mdiClose : mdiDotsVertical"
-            size="24"
-          />
-        </NavBarItem>
+        <NavBarItemPlain @click.prevent="isMenuNavBarActive = !isMenuNavBarActive">
+          <BaseIcon :path="isMenuNavBarActive ? mdiClose : mdiDotsVertical" size="24" />
+        </NavBarItemPlain>
       </div>
       <div
-        class="absolute w-screen top-14 left-0 bg-gray-50 shadow
-          lg:w-auto lg:items-stretch lg:flex lg:grow lg:static lg:border-b-0 lg:overflow-visible lg:shadow-none dark:bg-slate-800"
+        class="max-h-screen-menu overflow-y-auto lg:overflow-visible absolute w-screen top-14 left-0 bg-gray-50 shadow-lg lg:w-auto lg:flex lg:static lg:shadow-none dark:bg-slate-800"
         :class="[isMenuNavBarActive ? 'block' : 'hidden']"
       >
-        <div
-          class="max-h-screen-menu overflow-y-auto lg:overflow-visible lg:flex lg:items-stretch lg:justify-end lg:ml-auto"
-        >
-          <NavBarMenu>
-            <NavBarItemLabel
-              :icon="mdiMenu"
-              label="Sample menu"
-            />
-
-            <template #dropdown>
-              <NavBarItem>
-                <NavBarItemLabel
-                  :icon="mdiClockOutline"
-                  label="Item One"
-                />
-              </NavBarItem>
-              <NavBarItem>
-                <NavBarItemLabel
-                  :icon="mdiCloud"
-                  label="Item Two"
-                />
-              </NavBarItem>
-              <BaseDivider nav-bar />
-              <NavBarItem>
-                <NavBarItemLabel
-                  :icon="mdiCrop"
-                  label="Item Last"
-                />
-              </NavBarItem>
-            </template>
-          </NavBarMenu>
-          <NavBarMenu>
-            <NavBarItemLabel :label="userName">
-              <UserAvatarCurrentUser class="w-6 h-6 mr-3 inline-flex" />
-            </NavBarItemLabel>
-
-            <template #dropdown>
-              <NavBarItem route-name="admin.account.info">
-                <NavBarItemLabel
-                  :icon="mdiAccount"
-                  label="My Profile"
-                />
-              </NavBarItem>
-              <NavBarItem>
-                <NavBarItemLabel
-                  :icon="mdiCogOutline"
-                  label="Settings"
-                />
-              </NavBarItem>
-              <NavBarItem>
-                <NavBarItemLabel
-                  :icon="mdiEmail"
-                  label="Messages"
-                />
-              </NavBarItem>
-              <BaseDivider nav-bar />
-              <NavBarItem>
-                <NavBarItemLabel
-                  :icon="mdiLogout"
-                  label="Log Out"
-                />
-              </NavBarItem>
-            </template>
-          </NavBarMenu>
-          <NavBarItem
-            is-desktop-icon-only
-            @click.prevent="toggleLightDark"
-          >
-            <NavBarItemLabel
-              :icon="mdiThemeLightDark"
-              label="Light/Dark"
-              is-desktop-icon-only
-            />
-          </NavBarItem>
-          <NavBarItem
-            href="https://github.com/balajidharma/laravel-vue-admin-panel"
-            is-desktop-icon-only
-          >
-            <NavBarItemLabel
-              :icon="mdiGithub"
-              label="GitHub"
-              is-desktop-icon-only
-            />
-          </NavBarItem>
-          <NavBarItem
-            is-desktop-icon-only
-            @click="logout"
-          >
-            <NavBarItemLabel
-              :icon="mdiLogout"
-              label="Log out"
-              is-desktop-icon-only
-            />
-          </NavBarItem>
-        </div>
+        <NavBarMenuList :menu="menu" @menu-click="menuClick" />
       </div>
     </div>
   </nav>
-</template>
+</template>
\ No newline at end of file
diff --git a/resources/js/Components/NavBarItem.vue b/resources/js/Components/NavBarItem.vue
index 218a753..d01d07b 100644
--- a/resources/js/Components/NavBarItem.vue
+++ b/resources/js/Components/NavBarItem.vue
@@ -1,83 +1,132 @@
 <script setup>
-import { useStyleStore } from '@/Stores/style.js'
-import { Link } from '@inertiajs/vue3'
-import { computed } from 'vue'
+import { usePage } from '@inertiajs/vue3'
+import { mdiChevronUp, mdiChevronDown } from '@mdi/js'
+import { Link, router } from '@inertiajs/vue3'
+import { computed, ref, onMounted, onBeforeUnmount } from 'vue'
+import { useMainStore } from '@/Stores/main.js'
+import BaseIcon from '@/Components/BaseIcon.vue'
+import UserAvatarCurrentUser from '@/Components/UserAvatarCurrentUser.vue'
+import NavBarMenuList from '@/Components/NavBarMenuList.vue'
+import BaseDivider from '@/Components/BaseDivider.vue'
 
 const props = defineProps({
-  href: {
-    type: String,
-    default: null
-  },
-  routeName: {
-    type: String,
-    default: null
-  },
-  type: {
-    type: String,
-    default: 'flex'
-  },
-  activeColor: {
-    type: String,
-    default: null
-  },
-  isDesktopIconOnly: Boolean,
-  dropdown: Boolean,
-  active: Boolean
+  item: {
+    type: Object,
+    required: true
+  }
 })
 
+const emit = defineEmits(['menu-click'])
+
 const is = computed(() => {
-  if (props.href) {
+  if (props.item.href) {
     return 'a'
   }
 
-  if (props.routeName) {
+  if (props.item.to) {
     return Link
   }
 
   return 'div'
 })
 
-const styleStore = useStyleStore()
+const componentClass = computed(() => {
+  const base = [
+    isDropdownActive.value
+      ? `navbar-item-label-active dark:text-slate-400`
+      : `navbar-item-label dark:text-white dark:hover:text-slate-400`,
+    props.item.menu ? 'lg:py-2 lg:px-3' : 'py-2 px-3'
+  ]
 
-const activeColor = props.activeColor ?? `${styleStore.navBarItemLabelActiveColorStyle} dark:text-slate-400`
+  if (props.item.isDesktopNoLabel) {
+    base.push('lg:w-16', 'lg:justify-center')
+  }
 
-const activeClass = computed(
-  () => props.routeName && route().current(props.routeName) ? props.activeColor : null
+  return base
+})
+
+const itemLabel = computed(() =>
+  props.item.isCurrentUser ? usePage().props.auth.user.name : props.item.label
 )
 
-const componentClass = computed(() => {
-  const base = [
-    props.type,
-    props.active
-      ? activeColor
-      : `${styleStore.navBarItemLabelStyle} dark:text-white dark:hover:text-slate-400 ${styleStore.navBarItemLabelHoverStyle}`
-  ]
+const isDropdownActive = ref(false)
+
+const menuClick = (event) => {
+  emit('menu-click', event, props.item)
 
-  if (props.type === 'block') {
-    base.push('lg:flex')
+  if (props.item.menu) {
+    isDropdownActive.value = !isDropdownActive.value
   }
+}
+
+const logoutItemClick = () => {
+  router.post(route('logout'))
+}
+
+
+const menuClickDropdown = (event, item) => {
+  emit('menu-click', event, item)
+}
 
-  if (!props.dropdown) {
-    base.push('py-2', 'px-3')
-  } else {
-    base.push('p-0', 'lg:py-2', 'lg:px-3')
+const root = ref(null)
+
+const forceClose = (event) => {
+  if (root.value && !root.value.contains(event.target)) {
+    isDropdownActive.value = false
   }
+}
 
-  if (props.isDesktopIconOnly) {
-    base.push('lg:w-16', 'lg:justify-center')
+onMounted(() => {
+  if (props.item.menu) {
+    window.addEventListener('click', forceClose)
   }
+})
 
-  return base
+onBeforeUnmount(() => {
+  if (props.item.menu) {
+    window.removeEventListener('click', forceClose)
+  }
 })
 </script>
 
 <template>
+  <BaseDivider v-if="item.isDivider" nav-bar />
   <component
     :is="is"
-    class="items-center grow-0 shrink-0 relative cursor-pointer"
-    :class="[componentClass, activeClass]"
-    :href="routeName ? route(routeName) : href"
+    v-else
+    ref="root"
+    class="block lg:flex items-center relative cursor-pointer"
+    :class="componentClass"
+    :href="item.href ?? (item.to ?? null)"
+    :target="item.target ?? null"
+    @click="menuClick"
   >
-    <slot />
+    <div
+      class="flex items-center"
+      :class="{
+        'bg-gray-100 dark:bg-slate-800 lg:bg-transparent lg:dark:bg-transparent p-3 lg:p-0':
+          item.menu
+      }"
+    >
+      <UserAvatarCurrentUser v-if="item.isCurrentUser" class="w-6 h-6 mr-3 inline-flex" />
+      <BaseIcon v-if="item.icon" :path="item.icon" class="transition-colors" />
+      <span
+        class="px-2 transition-colors"
+        :class="{ 'lg:hidden': item.isDesktopNoLabel && item.icon }"
+        >{{ itemLabel }}</span
+      >
+      <BaseIcon
+        v-if="item.menu"
+        :path="isDropdownActive ? mdiChevronUp : mdiChevronDown"
+        class="hidden lg:inline-flex transition-colors"
+      />
+    </div>
+    <div
+      v-if="item.menu"
+      class="text-sm border-b border-gray-100 lg:border lg:bg-white lg:absolute lg:top-full lg:left-0 lg:min-w-full lg:z-20 lg:rounded-lg lg:shadow-lg lg:dark:bg-slate-800 dark:border-slate-700"
+      :class="{ 'lg:hidden': !isDropdownActive }"
+    >
+      <NavBarMenuList :menu="item.menu" @menu-click="menuClickDropdown" />
+    </div>
   </component>
-</template>
+</template>
\ No newline at end of file
diff --git a/resources/js/Components/NavBarItemPlain.vue b/resources/js/Components/NavBarItemPlain.vue
new file mode 100644
index 0000000..e4f2142
--- /dev/null
+++ b/resources/js/Components/NavBarItemPlain.vue
@@ -0,0 +1,18 @@
+<script setup>
+defineProps({
+  display: {
+    type: String,
+    default: 'flex'
+  },
+  useMargin: Boolean
+})
+</script>
+
+<template>
+  <div
+    :class="[display, useMargin ? 'my-2 mx-3' : 'py-2 px-3']"
+    class="navbar-item-label items-center cursor-pointer dark:text-white dark:hover:text-slate-400"
+  >
+    <slot />
+  </div>
+</template>
\ No newline at end of file
diff --git a/resources/js/Components/NavBarMenuList.vue b/resources/js/Components/NavBarMenuList.vue
new file mode 100644
index 0000000..3e4e52f
--- /dev/null
+++ b/resources/js/Components/NavBarMenuList.vue
@@ -0,0 +1,20 @@
+<script setup>
+import NavBarItem from '@/Components/NavBarItem.vue'
+
+defineProps({
+  menu: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const emit = defineEmits(['menu-click'])
+
+const menuClick = (event, item) => {
+  emit('menu-click', event, item)
+}
+</script>
+
+<template>
+  <NavBarItem v-for="(item, index) in menu" :key="index" :item="item" @menu-click="menuClick" />
+</template>
\ No newline at end of file
diff --git a/resources/js/Components/OverlayLayer.vue b/resources/js/Components/OverlayLayer.vue
index 030b4c8..f15bff9 100644
--- a/resources/js/Components/OverlayLayer.vue
+++ b/resources/js/Components/OverlayLayer.vue
@@ -1,26 +1,26 @@
 <script setup>
-import { useStyleStore } from '@/Stores/style.js'
-
 defineProps({
   zIndex: {
     type: String,
     default: 'z-50'
+  },
+  type: {
+    type: String,
+    default: 'flex'
   }
 })
 
 const emit = defineEmits(['overlay-click'])
 
-const overlayClick = event => {
+const overlayClick = (event) => {
   emit('overlay-click', event)
 }
-
-const styleStore = useStyleStore()
 </script>
 
 <template>
   <div
-    class="flex items-center flex-col justify-center overflow-hidden fixed inset-0"
-    :class="zIndex"
+    :class="[type, zIndex]"
+    class="items-center flex-col justify-center overflow-hidden fixed inset-0"
   >
     <transition
       enter-active-class="transition duration-150 ease-in"
@@ -31,8 +31,7 @@ const styleStore = useStyleStore()
       leave-to-class="opacity-0"
     >
       <div
-        class="absolute inset-0 bg-gradient-to-tr opacity-90 dark:from-gray-700 dark:via-gray-900 dark:to-gray-700"
-        :class="styleStore.overlayStyle"
+        class="overlay absolute inset-0 bg-gradient-to-tr opacity-90 dark:from-gray-700 dark:via-gray-900 dark:to-gray-700"
         @click="overlayClick"
       />
     </transition>
@@ -45,4 +44,4 @@ const styleStore = useStyleStore()
       <slot />
     </transition>
   </div>
-</template>
+</template>
\ No newline at end of file
diff --git a/resources/js/Components/PrimaryButton.vue b/resources/js/Components/PrimaryButton.vue
new file mode 100644
index 0000000..bda4c34
--- /dev/null
+++ b/resources/js/Components/PrimaryButton.vue
@@ -0,0 +1,7 @@
+<template>
+    <button
+        class="inline-flex items-center px-4 py-2 bg-gray-800 dark:bg-gray-200 border border-transparent rounded-md font-semibold text-xs text-white dark:text-gray-800 uppercase tracking-widest hover:bg-gray-700 dark:hover:bg-white focus:bg-gray-700 dark:focus:bg-white active:bg-gray-900 dark:active:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150"
+    >
+        <slot />
+    </button>
+</template>
diff --git a/resources/js/Components/SecondaryButton.vue b/resources/js/Components/SecondaryButton.vue
new file mode 100644
index 0000000..567be02
--- /dev/null
+++ b/resources/js/Components/SecondaryButton.vue
@@ -0,0 +1,17 @@
+<script setup>
+defineProps({
+    type: {
+        type: String,
+        default: 'button',
+    },
+});
+</script>
+
+<template>
+    <button
+        :type="type"
+        class="inline-flex items-center px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-500 rounded-md font-semibold text-xs text-gray-700 dark:text-gray-300 uppercase tracking-widest shadow-sm hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 disabled:opacity-25 transition ease-in-out duration-150"
+    >
+        <slot />
+    </button>
+</template>
diff --git a/resources/js/Components/SectionFullScreen.vue b/resources/js/Components/SectionFullScreen.vue
index a097a6a..73e102c 100644
--- a/resources/js/Components/SectionFullScreen.vue
+++ b/resources/js/Components/SectionFullScreen.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { computed } from 'vue'
-import { useStyleStore } from '@/Stores/style'
+import { useDarkModeStore } from '@/Stores/darkMode.js'
 import { gradientBgPurplePink, gradientBgDark, gradientBgPinkRed } from '@/colors'
 
 const props = defineProps({
@@ -12,7 +12,7 @@ const props = defineProps({
 })
 
 const colorClass = computed(() => {
-  if (useStyleStore().darkMode) {
+  if (useDarkModeStore().isEnabled) {
     return gradientBgDark
   }
 
diff --git a/resources/js/Components/TableSampleClients.vue b/resources/js/Components/TableSampleClients.vue
index d5c2d24..ed7da0f 100644
--- a/resources/js/Components/TableSampleClients.vue
+++ b/resources/js/Components/TableSampleClients.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { computed, ref } from 'vue'
 import { useMainStore } from '@/Stores/main'
-import { useStyleStore } from '@/Stores/style'
 import { mdiEye, mdiTrashCan } from '@mdi/js'
 import CardBoxModal from '@/Components/CardBoxModal.vue'
 import TableCheckboxCell from '@/Components/TableCheckboxCell.vue'
@@ -14,8 +13,6 @@ defineProps({
   checkable: Boolean
 })
 
-const styleStore = useStyleStore()
-
 const mainStore = useMainStore()
 
 const items = computed(() => mainStore.clients)
@@ -191,8 +188,8 @@ const checked = (isChecked, client) => {
           :key="page"
           :active="page === currentPage"
           :label="page + 1"
+          :color="page === currentPage ? 'lightDark' : 'whiteDark'"
           small
-          :outline="styleStore.darkMode"
           @click="currentPage = page"
         />
       </BaseButtons>
diff --git a/resources/js/Components/TextInput.vue b/resources/js/Components/TextInput.vue
new file mode 100644
index 0000000..053703c
--- /dev/null
+++ b/resources/js/Components/TextInput.vue
@@ -0,0 +1,26 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+
+const model = defineModel({
+    type: String,
+    required: true,
+});
+
+const input = ref(null);
+
+onMounted(() => {
+    if (input.value.hasAttribute('autofocus')) {
+        input.value.focus();
+    }
+});
+
+defineExpose({ focus: () => input.value.focus() });
+</script>
+
+<template>
+    <input
+        class="border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm"
+        v-model="model"
+        ref="input"
+    />
+</template>
diff --git a/resources/js/Layouts/AuthenticatedLayout.vue b/resources/js/Layouts/AuthenticatedLayout.vue
new file mode 100644
index 0000000..e3e5100
--- /dev/null
+++ b/resources/js/Layouts/AuthenticatedLayout.vue
@@ -0,0 +1,152 @@
+<script setup>
+import { ref } from 'vue';
+import ApplicationLogo from '@/Components/ApplicationLogo.vue';
+import Dropdown from '@/Components/Dropdown.vue';
+import DropdownLink from '@/Components/DropdownLink.vue';
+import NavLink from '@/Components/NavLink.vue';
+import ResponsiveNavLink from '@/Components/ResponsiveNavLink.vue';
+import { Link } from '@inertiajs/vue3';
+
+const showingNavigationDropdown = ref(false);
+</script>
+
+<template>
+    <div>
+        <div class="min-h-screen bg-gray-100 dark:bg-gray-900">
+            <nav class="bg-white dark:bg-gray-800 border-b border-gray-100 dark:border-gray-700">
+                <!-- Primary Navigation Menu -->
+                <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                    <div class="flex justify-between h-16">
+                        <div class="flex">
+                            <!-- Logo -->
+                            <div class="shrink-0 flex items-center">
+                                <Link :href="route('dashboard')">
+                                    <ApplicationLogo
+                                        class="block h-9 w-auto fill-current text-gray-800 dark:text-gray-200"
+                                    />
+                                </Link>
+                            </div>
+
+                            <!-- Navigation Links -->
+                            <div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex">
+                                <NavLink :href="route('dashboard')" :active="route().current('dashboard')">
+                                    Dashboard
+                                </NavLink>
+                            </div>
+                        </div>
+
+                        <div class="hidden sm:flex sm:items-center sm:ms-6">
+                            <!-- Settings Dropdown -->
+                            <div class="ms-3 relative">
+                                <Dropdown align="right" width="48">
+                                    <template #trigger>
+                                        <span class="inline-flex rounded-md">
+                                            <button
+                                                type="button"
+                                                class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none transition ease-in-out duration-150"
+                                            >
+                                                {{ $page.props.auth.user.name }}
+
+                                                <svg
+                                                    class="ms-2 -me-0.5 h-4 w-4"
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                    viewBox="0 0 20 20"
+                                                    fill="currentColor"
+                                                >
+                                                    <path
+                                                        fill-rule="evenodd"
+                                                        d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                                                        clip-rule="evenodd"
+                                                    />
+                                                </svg>
+                                            </button>
+                                        </span>
+                                    </template>
+
+                                    <template #content>
+                                        <DropdownLink :href="route('profile.edit')"> Profile </DropdownLink>
+                                        <DropdownLink :href="route('logout')" method="post" as="button">
+                                            Log Out
+                                        </DropdownLink>
+                                    </template>
+                                </Dropdown>
+                            </div>
+                        </div>
+
+                        <!-- Hamburger -->
+                        <div class="-me-2 flex items-center sm:hidden">
+                            <button
+                                @click="showingNavigationDropdown = !showingNavigationDropdown"
+                                class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-900 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-900 focus:text-gray-500 dark:focus:text-gray-400 transition duration-150 ease-in-out"
+                            >
+                                <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
+                                    <path
+                                        :class="{
+                                            hidden: showingNavigationDropdown,
+                                            'inline-flex': !showingNavigationDropdown,
+                                        }"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                        stroke-width="2"
+                                        d="M4 6h16M4 12h16M4 18h16"
+                                    />
+                                    <path
+                                        :class="{
+                                            hidden: !showingNavigationDropdown,
+                                            'inline-flex': showingNavigationDropdown,
+                                        }"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                        stroke-width="2"
+                                        d="M6 18L18 6M6 6l12 12"
+                                    />
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Responsive Navigation Menu -->
+                <div
+                    :class="{ block: showingNavigationDropdown, hidden: !showingNavigationDropdown }"
+                    class="sm:hidden"
+                >
+                    <div class="pt-2 pb-3 space-y-1">
+                        <ResponsiveNavLink :href="route('dashboard')" :active="route().current('dashboard')">
+                            Dashboard
+                        </ResponsiveNavLink>
+                    </div>
+
+                    <!-- Responsive Settings Options -->
+                    <div class="pt-4 pb-1 border-t border-gray-200 dark:border-gray-600">
+                        <div class="px-4">
+                            <div class="font-medium text-base text-gray-800 dark:text-gray-200">
+                                {{ $page.props.auth.user.name }}
+                            </div>
+                            <div class="font-medium text-sm text-gray-500">{{ $page.props.auth.user.email }}</div>
+                        </div>
+
+                        <div class="mt-3 space-y-1">
+                            <ResponsiveNavLink :href="route('profile.edit')"> Profile </ResponsiveNavLink>
+                            <ResponsiveNavLink :href="route('logout')" method="post" as="button">
+                                Log Out
+                            </ResponsiveNavLink>
+                        </div>
+                    </div>
+                </div>
+            </nav>
+
+            <!-- Page Heading -->
+            <header class="bg-white dark:bg-gray-800 shadow" v-if="$slots.header">
+                <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
+                    <slot name="header" />
+                </div>
+            </header>
+
+            <!-- Page Content -->
+            <main>
+                <slot />
+            </main>
+        </div>
+    </div>
+</template>
diff --git a/resources/js/Layouts/GuestLayout.vue b/resources/js/Layouts/GuestLayout.vue
new file mode 100644
index 0000000..943dc86
--- /dev/null
+++ b/resources/js/Layouts/GuestLayout.vue
@@ -0,0 +1,20 @@
+<script setup>
+import ApplicationLogo from '@/Components/ApplicationLogo.vue';
+import { Link } from '@inertiajs/vue3';
+</script>
+
+<template>
+    <div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100 dark:bg-gray-900">
+        <div>
+            <Link href="/">
+                <ApplicationLogo class="w-20 h-20 fill-current text-gray-500" />
+            </Link>
+        </div>
+
+        <div
+            class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white dark:bg-gray-800 shadow-md overflow-hidden sm:rounded-lg"
+        >
+            <slot />
+        </div>
+    </div>
+</template>
diff --git a/resources/js/Layouts/LayoutAuthenticated.vue b/resources/js/Layouts/LayoutAuthenticated.vue
index 5ddb3e7..497e690 100644
--- a/resources/js/Layouts/LayoutAuthenticated.vue
+++ b/resources/js/Layouts/LayoutAuthenticated.vue
@@ -1,25 +1,74 @@
 <script setup>
-import { useLayoutStore } from '@/Stores/layout.js'
-import { useStyleStore } from '@/Stores/style.js'
+import { mdiForwardburger, mdiBackburger, mdiMenu } from '@mdi/js'
+import { computed, reactive, ref } from 'vue'
+import { usePage, router } from '@inertiajs/vue3'
+import menuNavBar from '@/menuNavBar.js'
+import { useDarkModeStore } from '@/Stores/darkMode.js'
+import BaseIcon from '@/Components/BaseIcon.vue'
+import FormControl from '@/Components/FormControl.vue'
 import NavBar from '@/Components/NavBar.vue'
+import NavBarItemPlain from '@/Components/NavBarItemPlain.vue'
 import AsideMenu from '@/Components/AsideMenu.vue'
 import FooterBar from '@/Components/FooterBar.vue'
 
-const styleStore = useStyleStore()
+const layoutAsidePadding = 'xl:pl-60'
 
-const layoutStore = useLayoutStore()
+const darkModeStore = useDarkModeStore()
+
+const isAsideMobileExpanded = ref(false)
+const isAsideLgActive = ref(false)
+
+let menuAside = reactive({})
+menuAside = computed(() => usePage().props.navigation.menu)
+
+const menuClick = (event, item) => {
+  if (item.isToggleLightDark) {
+    darkModeStore.set()
+  }
+
+  if (item.isLogout) {
+    router.post(route('logout'))
+  }
+}
 </script>
 
 <template>
-  <div :class="{ 'dark': styleStore.darkMode, 'overflow-hidden lg:overflow-visible': layoutStore.isAsideMobileExpanded }">
+  <div
+    :class="{
+      'overflow-hidden lg:overflow-visible': isAsideMobileExpanded
+    }"
+  >
     <div
-      :class="{ 'ml-60 lg:ml-0': layoutStore.isAsideMobileExpanded }"
-      class="pt-14 xl:pl-60 min-h-screen w-screen transition-position lg:w-auto bg-gray-50 dark:bg-slate-800 dark:text-slate-100"
+      :class="[layoutAsidePadding, { 'ml-60 lg:ml-0': isAsideMobileExpanded }]"
+      class="pt-14 min-h-screen w-screen transition-position lg:w-auto bg-gray-50 dark:bg-slate-800 dark:text-slate-100"
     >
-      <NavBar :class="{ 'ml-60 lg:ml-0': layoutStore.isAsideMobileExpanded }" />
-      <AsideMenu />
+      <NavBar
+        :menu="menuNavBar"
+        :class="[layoutAsidePadding, { 'ml-60 lg:ml-0': isAsideMobileExpanded }]"
+        @menu-click="menuClick"
+      >
+        <NavBarItemPlain
+          display="flex lg:hidden"
+          @click.prevent="isAsideMobileExpanded = !isAsideMobileExpanded"
+        >
+          <BaseIcon :path="isAsideMobileExpanded ? mdiBackburger : mdiForwardburger" size="24" />
+        </NavBarItemPlain>
+        <NavBarItemPlain display="hidden lg:flex xl:hidden" @click.prevent="isAsideLgActive = true">
+          <BaseIcon :path="mdiMenu" size="24" />
+        </NavBarItemPlain>
+        <NavBarItemPlain use-margin>
+          <FormControl placeholder="Search (ctrl+k)" ctrl-k-focus transparent borderless />
+        </NavBarItemPlain>
+      </NavBar>
+      <AsideMenu
+        :is-aside-mobile-expanded="isAsideMobileExpanded"
+        :is-aside-lg-active="isAsideLgActive"
+        :menu="menuAside"
+        @menu-click="menuClick"
+        @aside-lg-close-click="isAsideLgActive = false"
+      />
       <slot />
       <FooterBar />
     </div>
   </div>
-</template>
+</template>
\ No newline at end of file
diff --git a/resources/js/Layouts/LayoutGuest.vue b/resources/js/Layouts/LayoutGuest.vue
index 1fe1661..3147513 100644
--- a/resources/js/Layouts/LayoutGuest.vue
+++ b/resources/js/Layouts/LayoutGuest.vue
@@ -1,13 +1,5 @@
-<script setup>
-import { useStyleStore } from '@/Stores/style.js'
-
-const styleStore = useStyleStore()
-</script>
-
 <template>
-  <div :class="{ 'dark': styleStore.darkMode }">
-    <div class="bg-gray-50 dark:bg-slate-800 dark:text-slate-100">
-      <slot />
-    </div>
+  <div class="bg-gray-50 dark:bg-slate-800 dark:text-slate-100">
+    <slot />
   </div>
-</template>
+</template>
\ No newline at end of file
diff --git a/resources/js/Pages/Admin/Dashboard.vue b/resources/js/Pages/Admin/Dashboard.vue
new file mode 100644
index 0000000..37f1aae
--- /dev/null
+++ b/resources/js/Pages/Admin/Dashboard.vue
@@ -0,0 +1,162 @@
+<script setup>
+import { Head } from '@inertiajs/vue3'
+import { computed, ref, onMounted } from 'vue'
+import { useMainStore } from '@/Stores/main'
+import {
+  mdiAccountMultiple,
+  mdiCartOutline,
+  mdiChartTimelineVariant,
+  mdiFinance,
+  mdiMonitorCellphone,
+  mdiReload,
+  mdiGithub,
+  mdiChartPie
+} from '@mdi/js'
+import * as chartConfig from '@/Components/Charts/chart.config.js'
+import LineChart from '@/Components/Charts/LineChart.vue'
+import SectionMain from '@/Components/SectionMain.vue'
+import CardBoxWidget from '@/Components/CardBoxWidget.vue'
+import CardBox from '@/Components/CardBox.vue'
+import TableSampleClients from '@/Components/TableSampleClients.vue'
+import NotificationBar from '@/Components/NotificationBar.vue'
+import BaseButton from '@/Components/BaseButton.vue'
+import CardBoxTransaction from '@/Components/CardBoxTransaction.vue'
+import CardBoxClient from '@/Components/CardBoxClient.vue'
+import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue'
+import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue'
+import SectionBannerStarOnGitHub from '@/Components/SectionBannerStarOnGitHub.vue'
+const chartData = ref(null)
+const fillChartData = () => {
+  chartData.value = chartConfig.sampleChartData()
+}
+onMounted(() => {
+  fillChartData()
+})
+const mainStore = useMainStore()
+
+/* Fetch sample data */
+mainStore.fetchSampleClients()
+mainStore.fetchSampleHistory()
+
+const clientBarItems = computed(() => mainStore.clients.slice(0, 4))
+const transactionBarItems = computed(() => mainStore.history)
+</script>
+
+<template>
+  <LayoutAuthenticated>
+    <Head title="Dashboard" />
+    <SectionMain>
+      <SectionTitleLineWithButton
+        :icon="mdiChartTimelineVariant"
+        title="Overview"
+        main
+      >
+        <BaseButton
+          href="https://github.com/balajidharma/laravel-vue-admin-panel"
+          target="_blank"
+          :icon="mdiGithub"
+          label="Star on GitHub"
+          color="contrast"
+          rounded-full
+          small
+        />
+      </SectionTitleLineWithButton>
+      
+      <div class="grid grid-cols-1 gap-6 lg:grid-cols-3 mb-6">
+        <CardBoxWidget
+          trend="12%"
+          trend-type="up"
+          color="text-emerald-500"
+          :icon="mdiAccountMultiple"
+          :number="512"
+          label="Clients"
+        />
+        <CardBoxWidget
+          trend="12%"
+          trend-type="down"
+          color="text-blue-500"
+          :icon="mdiCartOutline"
+          :number="7770"
+          prefix="$"
+          label="Sales"
+        />
+        <CardBoxWidget
+          trend="Overflow"
+          trend-type="alert"
+          color="text-red-500"
+          :icon="mdiChartTimelineVariant"
+          :number="256"
+          suffix="%"
+          label="Performance"
+        />
+      </div>
+
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+        <div class="flex flex-col justify-between">
+          <CardBoxTransaction
+            v-for="(transaction,index) in transactionBarItems"
+            :key="index"
+            :amount="transaction.amount"
+            :date="transaction.date"
+            :business="transaction.business"
+            :type="transaction.type"
+            :name="transaction.name"
+            :account="transaction.account"
+          />
+        </div>
+        <div class="flex flex-col justify-between">
+          <CardBoxClient
+            v-for="client in clientBarItems"
+            :key="client.id"
+            :name="client.name"
+            :login="client.login"
+            :date="client.created"
+            :progress="client.progress"
+          />
+        </div>
+      </div>
+
+      <SectionBannerStarOnGitHub />
+
+      <SectionTitleLineWithButton
+        :icon="mdiChartPie"
+        title="Trends overview"
+      />
+
+      <CardBox
+        title="Performance"
+        :icon="mdiFinance"
+        :header-icon="mdiReload"
+        class="mb-6"
+        @header-icon-click="fillChartData"
+      >
+        <div v-if="chartData">
+          <line-chart
+            :data="chartData"
+            class="h-96"
+          />
+        </div>
+      </CardBox>
+
+      <SectionTitleLineWithButton
+        :icon="mdiAccountMultiple"
+        title="Clients"
+      />
+
+      <NotificationBar
+        color="info"
+        :icon="mdiMonitorCellphone"
+      >
+        <b>Responsive table.</b> Collapses on mobile
+      </NotificationBar>
+
+      <CardBox
+        :icon="mdiMonitorCellphone"
+        title="Responsive table"
+        has-table
+      >
+        <TableSampleClients />
+      </CardBox>
+    </SectionMain>
+  </LayoutAuthenticated>
+</template>
\ No newline at end of file
diff --git a/resources/js/Pages/Dashboard.vue b/resources/js/Pages/Dashboard.vue
index dc886e9..718c55e 100644
--- a/resources/js/Pages/Dashboard.vue
+++ b/resources/js/Pages/Dashboard.vue
@@ -1,162 +1,22 @@
 <script setup>
-import { Head } from '@inertiajs/vue3'
-import { computed, ref, onMounted } from 'vue'
-import { useMainStore } from '@/Stores/main'
-import {
-  mdiAccountMultiple,
-  mdiCartOutline,
-  mdiChartTimelineVariant,
-  mdiFinance,
-  mdiMonitorCellphone,
-  mdiReload,
-  mdiGithub,
-  mdiChartPie
-} from '@mdi/js'
-import * as chartConfig from '@/Components/Charts/chart.config.js'
-import LineChart from '@/Components/Charts/LineChart.vue'
-import SectionMain from '@/Components/SectionMain.vue'
-import CardBoxWidget from '@/Components/CardBoxWidget.vue'
-import CardBox from '@/Components/CardBox.vue'
-import TableSampleClients from '@/Components/TableSampleClients.vue'
-import NotificationBar from '@/Components/NotificationBar.vue'
-import BaseButton from '@/Components/BaseButton.vue'
-import CardBoxTransaction from '@/Components/CardBoxTransaction.vue'
-import CardBoxClient from '@/Components/CardBoxClient.vue'
-import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue'
-import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue'
-import SectionBannerStarOnGitHub from '@/Components/SectionBannerStarOnGitHub.vue'
-const chartData = ref(null)
-const fillChartData = () => {
-  chartData.value = chartConfig.sampleChartData()
-}
-onMounted(() => {
-  fillChartData()
-})
-const mainStore = useMainStore()
-
-/* Fetch sample data */
-mainStore.fetch('clients')
-mainStore.fetch('history')
-
-const clientBarItems = computed(() => mainStore.clients.slice(0, 4))
-const transactionBarItems = computed(() => mainStore.history)
+import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
+import { Head } from '@inertiajs/vue3';
 </script>
 
 <template>
-  <LayoutAuthenticated>
     <Head title="Dashboard" />
-    <SectionMain>
-      <SectionTitleLineWithButton
-        :icon="mdiChartTimelineVariant"
-        title="Overview"
-        main
-      >
-        <BaseButton
-          href="https://github.com/balajidharma/laravel-vue-admin-panel"
-          target="_blank"
-          :icon="mdiGithub"
-          label="Star on GitHub"
-          color="contrast"
-          rounded-full
-          small
-        />
-      </SectionTitleLineWithButton>
-      
-      <div class="grid grid-cols-1 gap-6 lg:grid-cols-3 mb-6">
-        <CardBoxWidget
-          trend="12%"
-          trend-type="up"
-          color="text-emerald-500"
-          :icon="mdiAccountMultiple"
-          :number="512"
-          label="Clients"
-        />
-        <CardBoxWidget
-          trend="12%"
-          trend-type="down"
-          color="text-blue-500"
-          :icon="mdiCartOutline"
-          :number="7770"
-          prefix="$"
-          label="Sales"
-        />
-        <CardBoxWidget
-          trend="Overflow"
-          trend-type="alert"
-          color="text-red-500"
-          :icon="mdiChartTimelineVariant"
-          :number="256"
-          suffix="%"
-          label="Performance"
-        />
-      </div>
-
-      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
-        <div class="flex flex-col justify-between">
-          <CardBoxTransaction
-            v-for="(transaction,index) in transactionBarItems"
-            :key="index"
-            :amount="transaction.amount"
-            :date="transaction.date"
-            :business="transaction.business"
-            :type="transaction.type"
-            :name="transaction.name"
-            :account="transaction.account"
-          />
-        </div>
-        <div class="flex flex-col justify-between">
-          <CardBoxClient
-            v-for="client in clientBarItems"
-            :key="client.id"
-            :name="client.name"
-            :login="client.login"
-            :date="client.created"
-            :progress="client.progress"
-          />
-        </div>
-      </div>
 
-      <SectionBannerStarOnGitHub />
-
-      <SectionTitleLineWithButton
-        :icon="mdiChartPie"
-        title="Trends overview"
-      />
-
-      <CardBox
-        title="Performance"
-        :icon="mdiFinance"
-        :header-icon="mdiReload"
-        class="mb-6"
-        @header-icon-click="fillChartData"
-      >
-        <div v-if="chartData">
-          <line-chart
-            :data="chartData"
-            class="h-96"
-          />
+    <AuthenticatedLayout>
+        <template #header>
+            <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">Dashboard</h2>
+        </template>
+
+        <div class="py-12">
+            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+                <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
+                    <div class="p-6 text-gray-900 dark:text-gray-100">You're logged in!</div>
+                </div>
+            </div>
         </div>
-      </CardBox>
-
-      <SectionTitleLineWithButton
-        :icon="mdiAccountMultiple"
-        title="Clients"
-      />
-
-      <NotificationBar
-        color="info"
-        :icon="mdiMonitorCellphone"
-      >
-        <b>Responsive table.</b> Collapses on mobile
-      </NotificationBar>
-
-      <CardBox
-        :icon="mdiMonitorCellphone"
-        title="Responsive table"
-        has-table
-      >
-        <TableSampleClients />
-      </CardBox>
-    </SectionMain>
-  </LayoutAuthenticated>
+    </AuthenticatedLayout>
 </template>
\ No newline at end of file
diff --git a/resources/js/Pages/Profile/Edit.vue b/resources/js/Pages/Profile/Edit.vue
new file mode 100644
index 0000000..5ce984d
--- /dev/null
+++ b/resources/js/Pages/Profile/Edit.vue
@@ -0,0 +1,46 @@
+<script setup>
+import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
+import DeleteUserForm from './Partials/DeleteUserForm.vue';
+import UpdatePasswordForm from './Partials/UpdatePasswordForm.vue';
+import UpdateProfileInformationForm from './Partials/UpdateProfileInformationForm.vue';
+import { Head } from '@inertiajs/vue3';
+
+defineProps({
+    mustVerifyEmail: {
+        type: Boolean,
+    },
+    status: {
+        type: String,
+    },
+});
+</script>
+
+<template>
+    <Head title="Profile" />
+
+    <AuthenticatedLayout>
+        <template #header>
+            <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">Profile</h2>
+        </template>
+
+        <div class="py-12">
+            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
+                <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
+                    <UpdateProfileInformationForm
+                        :must-verify-email="mustVerifyEmail"
+                        :status="status"
+                        class="max-w-xl"
+                    />
+                </div>
+
+                <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
+                    <UpdatePasswordForm class="max-w-xl" />
+                </div>
+
+                <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
+                    <DeleteUserForm class="max-w-xl" />
+                </div>
+            </div>
+        </div>
+    </AuthenticatedLayout>
+</template>
diff --git a/resources/js/Pages/Profile/Partials/DeleteUserForm.vue b/resources/js/Pages/Profile/Partials/DeleteUserForm.vue
new file mode 100644
index 0000000..9cd0be3
--- /dev/null
+++ b/resources/js/Pages/Profile/Partials/DeleteUserForm.vue
@@ -0,0 +1,95 @@
+<script setup>
+import DangerButton from '@/Components/DangerButton.vue';
+import InputError from '@/Components/InputError.vue';
+import InputLabel from '@/Components/InputLabel.vue';
+import Modal from '@/Components/Modal.vue';
+import SecondaryButton from '@/Components/SecondaryButton.vue';
+import TextInput from '@/Components/TextInput.vue';
+import { useForm } from '@inertiajs/vue3';
+import { nextTick, ref } from 'vue';
+
+const confirmingUserDeletion = ref(false);
+const passwordInput = ref(null);
+
+const form = useForm({
+    password: '',
+});
+
+const confirmUserDeletion = () => {
+    confirmingUserDeletion.value = true;
+
+    nextTick(() => passwordInput.value.focus());
+};
+
+const deleteUser = () => {
+    form.delete(route('profile.destroy'), {
+        preserveScroll: true,
+        onSuccess: () => closeModal(),
+        onError: () => passwordInput.value.focus(),
+        onFinish: () => form.reset(),
+    });
+};
+
+const closeModal = () => {
+    confirmingUserDeletion.value = false;
+
+    form.reset();
+};
+</script>
+
+<template>
+    <section class="space-y-6">
+        <header>
+            <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">Delete Account</h2>
+
+            <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
+                Once your account is deleted, all of its resources and data will be permanently deleted. Before deleting
+                your account, please download any data or information that you wish to retain.
+            </p>
+        </header>
+
+        <DangerButton @click="confirmUserDeletion">Delete Account</DangerButton>
+
+        <Modal :show="confirmingUserDeletion" @close="closeModal">
+            <div class="p-6">
+                <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
+                    Are you sure you want to delete your account?
+                </h2>
+
+                <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
+                    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.
+                </p>
+
+                <div class="mt-6">
+                    <InputLabel for="password" value="Password" class="sr-only" />
+
+                    <TextInput
+                        id="password"
+                        ref="passwordInput"
+                        v-model="form.password"
+                        type="password"
+                        class="mt-1 block w-3/4"
+                        placeholder="Password"
+                        @keyup.enter="deleteUser"
+                    />
+
+                    <InputError :message="form.errors.password" class="mt-2" />
+                </div>
+
+                <div class="mt-6 flex justify-end">
+                    <SecondaryButton @click="closeModal"> Cancel </SecondaryButton>
+
+                    <DangerButton
+                        class="ms-3"
+                        :class="{ 'opacity-25': form.processing }"
+                        :disabled="form.processing"
+                        @click="deleteUser"
+                    >
+                        Delete Account
+                    </DangerButton>
+                </div>
+            </div>
+        </Modal>
+    </section>
+</template>
diff --git a/resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue b/resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue
new file mode 100644
index 0000000..4451539
--- /dev/null
+++ b/resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue
@@ -0,0 +1,105 @@
+<script setup>
+import InputError from '@/Components/InputError.vue';
+import InputLabel from '@/Components/InputLabel.vue';
+import PrimaryButton from '@/Components/PrimaryButton.vue';
+import TextInput from '@/Components/TextInput.vue';
+import { useForm } from '@inertiajs/vue3';
+import { ref } from 'vue';
+
+const passwordInput = ref(null);
+const currentPasswordInput = ref(null);
+
+const form = useForm({
+    current_password: '',
+    password: '',
+    password_confirmation: '',
+});
+
+const updatePassword = () => {
+    form.put(route('password.update'), {
+        preserveScroll: true,
+        onSuccess: () => form.reset(),
+        onError: () => {
+            if (form.errors.password) {
+                form.reset('password', 'password_confirmation');
+                passwordInput.value.focus();
+            }
+            if (form.errors.current_password) {
+                form.reset('current_password');
+                currentPasswordInput.value.focus();
+            }
+        },
+    });
+};
+</script>
+
+<template>
+    <section>
+        <header>
+            <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">Update Password</h2>
+
+            <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
+                Ensure your account is using a long, random password to stay secure.
+            </p>
+        </header>
+
+        <form @submit.prevent="updatePassword" class="mt-6 space-y-6">
+            <div>
+                <InputLabel for="current_password" value="Current Password" />
+
+                <TextInput
+                    id="current_password"
+                    ref="currentPasswordInput"
+                    v-model="form.current_password"
+                    type="password"
+                    class="mt-1 block w-full"
+                    autocomplete="current-password"
+                />
+
+                <InputError :message="form.errors.current_password" class="mt-2" />
+            </div>
+
+            <div>
+                <InputLabel for="password" value="New Password" />
+
+                <TextInput
+                    id="password"
+                    ref="passwordInput"
+                    v-model="form.password"
+                    type="password"
+                    class="mt-1 block w-full"
+                    autocomplete="new-password"
+                />
+
+                <InputError :message="form.errors.password" class="mt-2" />
+            </div>
+
+            <div>
+                <InputLabel for="password_confirmation" value="Confirm Password" />
+
+                <TextInput
+                    id="password_confirmation"
+                    v-model="form.password_confirmation"
+                    type="password"
+                    class="mt-1 block w-full"
+                    autocomplete="new-password"
+                />
+
+                <InputError :message="form.errors.password_confirmation" class="mt-2" />
+            </div>
+
+            <div class="flex items-center gap-4">
+                <PrimaryButton :disabled="form.processing">Save</PrimaryButton>
+
+                <Transition
+                    enter-active-class="transition ease-in-out"
+                    enter-from-class="opacity-0"
+                    leave-active-class="transition ease-in-out"
+                    leave-to-class="opacity-0"
+                >
+                    <p v-if="form.recentlySuccessful" class="text-sm text-gray-600 dark:text-gray-400">Saved.</p>
+                </Transition>
+            </div>
+        </form>
+    </section>
+</template>
diff --git a/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue b/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue
new file mode 100644
index 0000000..8a99859
--- /dev/null
+++ b/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue
@@ -0,0 +1,102 @@
+<script setup>
+import InputError from '@/Components/InputError.vue';
+import InputLabel from '@/Components/InputLabel.vue';
+import PrimaryButton from '@/Components/PrimaryButton.vue';
+import TextInput from '@/Components/TextInput.vue';
+import { Link, useForm, usePage } from '@inertiajs/vue3';
+
+defineProps({
+    mustVerifyEmail: {
+        type: Boolean,
+    },
+    status: {
+        type: String,
+    },
+});
+
+const user = usePage().props.auth.user;
+
+const form = useForm({
+    name: user.name,
+    email: user.email,
+});
+</script>
+
+<template>
+    <section>
+        <header>
+            <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">Profile Information</h2>
+
+            <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
+                Update your account's profile information and email address.
+            </p>
+        </header>
+
+        <form @submit.prevent="form.patch(route('profile.update'))" class="mt-6 space-y-6">
+            <div>
+                <InputLabel for="name" value="Name" />
+
+                <TextInput
+                    id="name"
+                    type="text"
+                    class="mt-1 block w-full"
+                    v-model="form.name"
+                    required
+                    autofocus
+                    autocomplete="name"
+                />
+
+                <InputError class="mt-2" :message="form.errors.name" />
+            </div>
+
+            <div>
+                <InputLabel for="email" value="Email" />
+
+                <TextInput
+                    id="email"
+                    type="email"
+                    class="mt-1 block w-full"
+                    v-model="form.email"
+                    required
+                    autocomplete="username"
+                />
+
+                <InputError class="mt-2" :message="form.errors.email" />
+            </div>
+
+            <div v-if="mustVerifyEmail && user.email_verified_at === null">
+                <p class="text-sm mt-2 text-gray-800 dark:text-gray-200">
+                    Your email address is unverified.
+                    <Link
+                        :href="route('verification.send')"
+                        method="post"
+                        as="button"
+                        class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800"
+                    >
+                        Click here to re-send the verification email.
+                    </Link>
+                </p>
+
+                <div
+                    v-show="status === 'verification-link-sent'"
+                    class="mt-2 font-medium text-sm text-green-600 dark:text-green-400"
+                >
+                    A new verification link has been sent to your email address.
+                </div>
+            </div>
+
+            <div class="flex items-center gap-4">
+                <PrimaryButton :disabled="form.processing">Save</PrimaryButton>
+
+                <Transition
+                    enter-active-class="transition ease-in-out"
+                    enter-from-class="opacity-0"
+                    leave-active-class="transition ease-in-out"
+                    leave-to-class="opacity-0"
+                >
+                    <p v-if="form.recentlySuccessful" class="text-sm text-gray-600 dark:text-gray-400">Saved.</p>
+                </Transition>
+            </div>
+        </form>
+    </section>
+</template>
diff --git a/resources/js/Pages/Welcome.vue b/resources/js/Pages/Welcome.vue
index 54d1e01..866635d 100644
--- a/resources/js/Pages/Welcome.vue
+++ b/resources/js/Pages/Welcome.vue
@@ -18,7 +18,7 @@ defineProps({
         <div v-if="canLogin" class="sm:fixed sm:top-0 sm:right-0 p-6 text-right">
             <Link
                 v-if="$page.props.auth.user"
-                :href="route('admin.dashboard')"
+                :href="route('dashboard')"
                 class="font-semibold text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white focus:outline focus:outline-2 focus:rounded-sm focus:outline-red-500"
                 >Dashboard</Link
             >
diff --git a/resources/js/Stores/darkMode.js b/resources/js/Stores/darkMode.js
new file mode 100644
index 0000000..2059840
--- /dev/null
+++ b/resources/js/Stores/darkMode.js
@@ -0,0 +1,29 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useDarkModeStore = defineStore('darkMode', () => {
+  const isEnabled = ref(false)
+
+  function set(payload = null) {
+    isEnabled.value = payload !== null ? payload : !isEnabled.value
+
+    if (typeof document !== 'undefined') {
+      document.body.classList[isEnabled.value ? 'add' : 'remove']('dark-scrollbars')
+
+      document.documentElement.classList[isEnabled.value ? 'add' : 'remove'](
+        'dark',
+        'dark-scrollbars-compat'
+      )
+    }
+
+    // You can persist dark mode setting
+    if (typeof localStorage !== 'undefined') {
+       localStorage.setItem('darkMode', this.darkMode ? '1' : '0')
+    }
+  }
+
+  return {
+    isEnabled,
+    set
+  }
+})
\ No newline at end of file
diff --git a/resources/js/Stores/layout.js b/resources/js/Stores/layout.js
deleted file mode 100644
index 2af97e0..0000000
--- a/resources/js/Stores/layout.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { defineStore } from 'pinia'
-
-export const useLayoutStore = defineStore('layout', {
-  state: () => ({
-    isAsideMobileExpanded: false,
-    isAsideLgActive: false
-  }),
-
-  actions: {
-    asideMobileToggle () {
-      this.isAsideMobileExpanded = !this.isAsideMobileExpanded
-    }
-  }
-})
diff --git a/resources/js/Stores/main.js b/resources/js/Stores/main.js
index b07e30b..f42943f 100644
--- a/resources/js/Stores/main.js
+++ b/resources/js/Stores/main.js
@@ -1,44 +1,64 @@
 import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
 import axios from 'axios'
 
-export const useMainStore = defineStore('main', {
-  state: () => ({
-    /* User */
-    userName: null,
-    userEmail: null,
-    userAvatar: null,
-
-    /* Field focus with ctrl+k (to register only once) */
-    isFieldFocusRegistered: false,
-
-    /* Sample data (commonly used) */
-    clients: [],
-    history: []
-  }),
-  actions: {
-    setUser (payload) {
-      if (payload.name) {
-        this.userName = payload.name
-      }
-      if (payload.email) {
-        this.userEmail = payload.email
-      }
-      if (payload.avatar) {
-        this.userAvatar = payload.avatar
-      }
-    },
-
-    fetch (sampleDataKey) {
-      axios
-        .get(`/data-sources/${sampleDataKey}.json`)
-        .then(r => {
-          if (r.data && r.data.data) {
-            this[sampleDataKey] = r.data.data
-          }
-        })
-        .catch(error => {
-          alert(error.message)
-        })
+export const useMainStore = defineStore('main', () => {
+  const userName = ref('John Doe')
+  const userEmail = ref('doe.doe.doe@example.com')
+
+  const userAvatar = computed(
+    () =>
+      `https://api.dicebear.com/7.x/avataaars/svg?seed=${userEmail.value.replace(
+        /[^a-z0-9]+/gi,
+        '-'
+      )}`
+  )
+
+  const isFieldFocusRegistered = ref(false)
+
+  const clients = ref([])
+  const history = ref([])
+
+  function setUser(payload) {
+    if (payload.name) {
+      userName.value = payload.name
+    }
+    if (payload.email) {
+      userEmail.value = payload.email
     }
   }
-})
+
+  function fetchSampleClients() {
+    axios
+      .get(`data-sources/clients.json?v=3`)
+      .then((result) => {
+        clients.value = result?.data?.data
+      })
+      .catch((error) => {
+        alert(error.message)
+      })
+  }
+
+  function fetchSampleHistory() {
+    axios
+      .get(`data-sources/history.json`)
+      .then((result) => {
+        history.value = result?.data?.data
+      })
+      .catch((error) => {
+        alert(error.message)
+      })
+  }
+
+  return {
+    userName,
+    userEmail,
+    userAvatar,
+    isFieldFocusRegistered,
+    clients,
+    history,
+    setUser,
+    fetchSampleClients,
+    fetchSampleHistory
+  }
+})
\ No newline at end of file
diff --git a/resources/js/Stores/style.js b/resources/js/Stores/style.js
deleted file mode 100644
index adff227..0000000
--- a/resources/js/Stores/style.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import { defineStore } from 'pinia'
-import * as styles from '@/styles'
-import { darkModeKey, styleKey } from '@/config'
-
-export const useStyleStore = defineStore('style', {
-  state: () => ({
-    /* Styles */
-    asideStyle: '',
-    asideBrandStyle: '',
-    asideMenuItemStyle: '',
-    asideMenuItemActiveStyle: '',
-    asideMenuDropdownStyle: '',
-    navBarItemLabelStyle: '',
-    navBarItemLabelHoverStyle: '',
-    navBarItemLabelActiveColorStyle: '',
-    navBarMenuListUpperLabelStyle: '',
-    overlayStyle: '',
-
-    /* Dark mode */
-    darkMode: false,
-  }),
-  actions: {
-    setStyle (payload) {
-      if (!styles[payload]) {
-        return
-      }
-
-      if (typeof localStorage !== 'undefined') {
-        localStorage.setItem(styleKey, payload)
-      }
-
-      const style = styles[payload]
-
-      for (const key in style) {
-        this[`${key}Style`] = style[key]
-      }
-    },
-
-    setDarkMode (payload = null) {
-      this.darkMode = payload !== null ? payload : !this.darkMode
-
-      if (typeof localStorage !== 'undefined') {
-        localStorage.setItem(darkModeKey, this.darkMode ? '1' : '0')
-      }
-
-      if (typeof document !== 'undefined') {
-        document.documentElement.classList[this.darkMode ? 'add' : 'remove']('dark-scrollbars')
-      }
-    }
-  }
-})
diff --git a/resources/js/app.js b/resources/js/app.js
index 334a0ae..0ca35ad 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -1,48 +1,40 @@
-import '../css/main.css';
-
-import { createPinia } from 'pinia'
-import { useStyleStore } from '@/Stores/style.js'
-import { useLayoutStore } from '@/Stores/layout.js'
-
-import { darkModeKey, styleKey } from '@/config.js'
+import './bootstrap';
+import '../css/app.css';
 
 import { createApp, h } from 'vue';
 import { createInertiaApp, router } from '@inertiajs/vue3';
+import { createPinia } from 'pinia'
+import { useDarkModeStore } from '@/Stores/darkMode.js'
+import { useMainStore } from '@/Stores/main.js'
 import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
-import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';
+import { ZiggyVue } from '../../vendor/tightenco/ziggy';
 
-const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';
+const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
 
-const pinia = createPinia()
+const pinia = createPinia();
 
 createInertiaApp({
-    progress: {
-      color: '#4B5563',
-    },
     title: (title) => `${title} - ${appName}`,
     resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
     setup({ el, App, props, plugin }) {
         return createApp({ render: () => h(App, props) })
-            .use(plugin)
-            .use(pinia)
+            .use(plugin)    
             .use(ZiggyVue, Ziggy)
             .mount(el);
     },
+    progress: {
+        color: '#4B5563',
+    },
 });
 
-const styleStore = useStyleStore(pinia)
-const layoutStore = useLayoutStore(pinia)
-
-/* App style */
-styleStore.setStyle(localStorage[styleKey] ?? 'basic')
+// Init main store
+const mainStore = useMainStore(pinia)
 
-/* Dark mode */
-if ((!localStorage[darkModeKey] && window.matchMedia('(prefers-color-scheme: dark)').matches) || localStorage[darkModeKey] === '1') {
-  styleStore.setDarkMode(true)
-}
+const darkModeStore = useDarkModeStore(pinia)
 
-/* Collapse mobile aside menu on route change */
-router.on('navigate', (event) => {
-  layoutStore.isAsideMobileExpanded = false
-  layoutStore.isAsideLgActive = false
-})
+if (
+   (!localStorage['darkMode'] && window.matchMedia('(prefers-color-scheme: dark)').matches) ||
+   localStorage['darkMode'] === '1'
+ ) {
+   darkModeStore.set(true)
+}
\ No newline at end of file
diff --git a/resources/js/colors.js b/resources/js/colors.js
index 384d8b2..cf924d4 100644
--- a/resources/js/colors.js
+++ b/resources/js/colors.js
@@ -1,4 +1,4 @@
-const gradientBgBase = 'bg-gradient-to-tr'
+export const gradientBgBase = 'bg-gradient-to-tr'
 export const gradientBgPurplePink = `${gradientBgBase} from-purple-400 via-pink-500 to-red-500`
 export const gradientBgDark = `${gradientBgBase} from-slate-700 via-slate-900 to-slate-800`
 export const gradientBgPinkRed = `${gradientBgBase} from-pink-400 via-red-500 to-yellow-500`
@@ -33,51 +33,77 @@ export const colorsOutline = {
   info: [colorsText.info, 'border-blue-500']
 }
 
-export const getButtonColor = (color, isOutlined, hasHover) => {
+export const getButtonColor = (color, isOutlined, hasHover, isActive = false) => {
   const colors = {
+    ring: {
+      white: 'ring-gray-200 dark:ring-gray-500',
+      whiteDark: 'ring-gray-200 dark:ring-gray-500',
+      lightDark: 'ring-gray-200 dark:ring-gray-500',
+      contrast: 'ring-gray-300 dark:ring-gray-400',
+      success: 'ring-emerald-300 dark:ring-emerald-700',
+      danger: 'ring-red-300 dark:ring-red-700',
+      warning: 'ring-yellow-300 dark:ring-yellow-700',
+      info: 'ring-blue-300 dark:ring-blue-700'
+    },
+    active: {
+      white: 'bg-gray-100',
+      whiteDark: 'bg-gray-100 dark:bg-slate-800',
+      lightDark: 'bg-gray-200 dark:bg-slate-700',
+      contrast: 'bg-gray-700 dark:bg-slate-100',
+      success: 'bg-emerald-700 dark:bg-emerald-600',
+      danger: 'bg-red-700 dark:bg-red-600',
+      warning: 'bg-yellow-700 dark:bg-yellow-600',
+      info: 'bg-blue-700 dark:bg-blue-600'
+    },
     bg: {
       white: 'bg-white text-black',
+      whiteDark: 'bg-white text-black dark:bg-slate-900 dark:text-white',
+      lightDark: 'bg-gray-100 text-black dark:bg-slate-800 dark:text-white',
       contrast: 'bg-gray-800 text-white dark:bg-white dark:text-black',
-      light: 'bg-gray-50 text-black',
       success: 'bg-emerald-600 dark:bg-emerald-500 text-white',
       danger: 'bg-red-600 dark:bg-red-500 text-white',
       warning: 'bg-yellow-600 dark:bg-yellow-500 text-white',
       info: 'bg-blue-600 dark:bg-blue-500 text-white'
     },
     bgHover: {
-      white: 'hover:bg-gray-50',
-      contrast: 'hover:bg-gray-900 hover:dark:bg-slate-100',
-      light: 'hover:bg-gray-200',
-      success: 'hover:bg-emerald-700 hover:border-emerald-700 hover:dark:bg-emerald-600 hover:dark:border-emerald-600',
-      danger: 'hover:bg-red-700 hover:border-red-700 hover:dark:bg-red-600 hover:dark:border-red-600',
-      warning: 'hover:bg-yellow-700 hover:border-yellow-700 hover:dark:bg-yellow-600 hover:dark:border-yellow-600',
+      white: 'hover:bg-gray-100',
+      whiteDark: 'hover:bg-gray-100 hover:dark:bg-slate-800',
+      lightDark: 'hover:bg-gray-200 hover:dark:bg-slate-700',
+      contrast: 'hover:bg-gray-700 hover:dark:bg-slate-100',
+      success:
+        'hover:bg-emerald-700 hover:border-emerald-700 hover:dark:bg-emerald-600 hover:dark:border-emerald-600',
+      danger:
+        'hover:bg-red-700 hover:border-red-700 hover:dark:bg-red-600 hover:dark:border-red-600',
+      warning:
+        'hover:bg-yellow-700 hover:border-yellow-700 hover:dark:bg-yellow-600 hover:dark:border-yellow-600',
       info: 'hover:bg-blue-700 hover:border-blue-700 hover:dark:bg-blue-600 hover:dark:border-blue-600'
     },
     borders: {
-      white: 'border-gray-100',
-      contrast: 'border-gray-900 dark:border-slate-100',
-      light: 'border-gray-100 dark:border-slate-700',
+      white: 'border-white',
+      whiteDark: 'border-white dark:border-slate-900',
+      lightDark: 'border-gray-100 dark:border-slate-800',
+      contrast: 'border-gray-800 dark:border-white',
       success: 'border-emerald-600 dark:border-emerald-500',
       danger: 'border-red-600 dark:border-red-500',
       warning: 'border-yellow-600 dark:border-yellow-500',
       info: 'border-blue-600 dark:border-blue-500'
     },
     text: {
-      white: 'text-black dark:text-slate-100',
       contrast: 'dark:text-slate-100',
-      light: 'text-gray-700 dark:text-slate-400',
       success: 'text-emerald-600 dark:text-emerald-500',
       danger: 'text-red-600 dark:text-red-500',
       warning: 'text-yellow-600 dark:text-yellow-500',
       info: 'text-blue-600 dark:text-blue-500'
     },
     outlineHover: {
-      white: 'hover:bg-gray-100 hover:text-gray-900 dark:hover:text-slate-900',
-      contrast: 'hover:bg-gray-800 hover:text-gray-100 hover:dark:bg-slate-100 hover:dark:text-black',
-      light: 'hover:bg-gray-100 hover:text-gray-900 dark:hover:text-slate-900',
-      success: 'hover:bg-emerald-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-emerald-600',
-      danger: 'hover:bg-red-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-red-600',
-      warning: 'hover:bg-yellow-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-yellow-600',
+      contrast:
+        'hover:bg-gray-800 hover:text-gray-100 hover:dark:bg-slate-100 hover:dark:text-black',
+      success:
+        'hover:bg-emerald-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-emerald-600',
+      danger:
+        'hover:bg-red-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-red-600',
+      warning:
+        'hover:bg-yellow-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-yellow-600',
       info: 'hover:bg-blue-600 hover:text-white hover:dark:text-white hover:dark:border-blue-600'
     }
   }
@@ -86,14 +112,19 @@ export const getButtonColor = (color, isOutlined, hasHover) => {
     return color
   }
 
-  const base = [
-    isOutlined ? colors.text[color] : colors.bg[color],
-    colors.borders[color]
-  ]
+  const isOutlinedProcessed = isOutlined && ['white', 'whiteDark', 'lightDark'].indexOf(color) < 0
+
+  const base = [colors.borders[color], colors.ring[color]]
+
+  if (isActive) {
+    base.push(colors.active[color])
+  } else {
+    base.push(isOutlinedProcessed ? colors.text[color] : colors.bg[color])
+  }
 
   if (hasHover) {
-    base.push(isOutlined ? colors.outlineHover[color] : colors.bgHover[color])
+    base.push(isOutlinedProcessed ? colors.outlineHover[color] : colors.bgHover[color])
   }
 
   return base
-}
+}
\ No newline at end of file
diff --git a/resources/js/config.js b/resources/js/config.js
index 3c5a9cb..1c815a7 100644
--- a/resources/js/config.js
+++ b/resources/js/config.js
@@ -1,5 +1 @@
-export const darkModeKey = 'darkMode'
-
-export const styleKey = 'style'
-
 export const containerMaxW = 'xl:max-w-6xl xl:mx-auto'
\ No newline at end of file
diff --git a/resources/js/menu.js b/resources/js/menu.js
deleted file mode 100644
index f565c20..0000000
--- a/resources/js/menu.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import {
-  mdiAccountCircle,
-  mdiMonitor,
-  mdiGithub,
-  mdiAccountKey,
-  mdiAccountEye,
-  mdiAccountGroup,
-  mdiPalette
-} from '@mdi/js'
-
-export default [
-  {
-    route: 'dashboard',
-    icon: mdiMonitor,
-    label: 'Dashboard'
-  },
-  {
-    route: 'permission.index',
-    icon: mdiAccountKey,
-    label: 'Permissions'
-  },
-  {
-    route: 'role.index',
-    icon: mdiAccountEye,
-    label: 'Roles'
-  },
-  {
-    route: 'user.index',
-    icon: mdiAccountGroup,
-    label: 'Users'
-  },
-  {
-    href: 'https://github.com/balajidharma/laravel-vue-admin-panel',
-    label: 'GitHub',
-    icon: mdiGithub,
-    target: '_blank'
-  }
-]
diff --git a/resources/js/menuNavBar.js b/resources/js/menuNavBar.js
new file mode 100644
index 0000000..a930315
--- /dev/null
+++ b/resources/js/menuNavBar.js
@@ -0,0 +1,81 @@
+import {
+    mdiMenu,
+    mdiClockOutline,
+    mdiCloud,
+    mdiCrop,
+    mdiAccount,
+    mdiCogOutline,
+    mdiEmail,
+    mdiLogout,
+    mdiThemeLightDark,
+    mdiGithub
+  } from '@mdi/js'
+  
+  export default [
+    {
+      icon: mdiMenu,
+      label: 'Sample menu',
+      menu: [
+        {
+          icon: mdiClockOutline,
+          label: 'Item One'
+        },
+        {
+          icon: mdiCloud,
+          label: 'Item Two'
+        },
+        {
+          isDivider: true
+        },
+        {
+          icon: mdiCrop,
+          label: 'Item Last'
+        }
+      ]
+    },
+    {
+      isCurrentUser: true,
+      menu: [
+        {
+          icon: mdiAccount,
+          label: 'My Profile',
+          to: '/admin/edit-account-info'
+        },
+        {
+          icon: mdiCogOutline,
+          label: 'Settings'
+        },
+        {
+          icon: mdiEmail,
+          label: 'Messages'
+        },
+        {
+          isDivider: true
+        },
+        {
+          icon: mdiLogout,
+          label: 'Log Out',
+          isLogout: true
+        }
+      ]
+    },
+    {
+      icon: mdiThemeLightDark,
+      label: 'Light/Dark',
+      isDesktopNoLabel: true,
+      isToggleLightDark: true
+    },
+    {
+      icon: mdiGithub,
+      label: 'GitHub',
+      isDesktopNoLabel: true,
+      href: 'https://github.com/balajidharma/laravel-vue-admin-panel',
+      target: '_blank'
+    },
+    {
+      icon: mdiLogout,
+      label: 'Log out',
+      isDesktopNoLabel: true,
+      isLogout: true
+    }
+  ]
\ No newline at end of file
diff --git a/resources/js/styles.js b/resources/js/styles.js
deleted file mode 100644
index 21b7004..0000000
--- a/resources/js/styles.js
+++ /dev/null
@@ -1,27 +0,0 @@
-export const basic = {
-  aside: 'bg-gray-800',
-  asideScrollbars: 'aside-scrollbars-gray',
-  asideBrand: 'bg-gray-900 text-white',
-  asideMenuItem: 'text-gray-300 hover:text-white',
-  asideMenuItemActive: 'font-bold text-white',
-  asideMenuDropdown: 'bg-gray-700/50',
-  navBarItemLabel: 'text-black',
-  navBarItemLabelHover: 'hover:text-blue-500',
-  navBarItemLabelActiveColor: 'text-blue-600',
-  navBarMenuListUpperLabel: 'bg-gray-100',
-  overlay: 'from-gray-700 via-gray-900 to-gray-700'
-}
-
-export const white = {
-  aside: 'bg-white',
-  asideScrollbars: 'aside-scrollbars-light',
-  asideBrand: '',
-  asideMenuItem: 'text-blue-600 hover:text-black dark:text-white',
-  asideMenuItemActive: 'font-bold text-black dark:text-white',
-  asideMenuDropdown: 'bg-gray-100/75',
-  navBarItemLabel: 'text-blue-600',
-  navBarItemLabelHover: 'hover:text-black',
-  navBarItemLabelActiveColor: 'text-black',
-  navBarMenuListUpperLabel: 'bg-gray-50',
-  overlay: 'from-white via-gray-100 to-white'
-}
diff --git a/resources/views/app.blade.php b/resources/views/app.blade.php
index 4041198..6810aeb 100644
--- a/resources/views/app.blade.php
+++ b/resources/views/app.blade.php
@@ -1,14 +1,18 @@
 <!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="style-basic">
     <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
 
         <title inertia>{{ config('app.name', 'Laravel') }}</title>
 
+        <!-- Fonts -->
+        <link rel="preconnect" href="https://fonts.bunny.net">
+        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
+
         <!-- Scripts -->
         @routes
-        @vite('resources/js/app.js')
+        @vite(['resources/js/app.js', "resources/js/Pages/{$page['component']}.vue"])
         @inertiaHead
     </head>
     <body class="font-sans antialiased">
diff --git a/resources/views/welcome.blade.php b/resources/views/welcome.blade.php
index 007d5a2..7b626b1 100644
--- a/resources/views/welcome.blade.php
+++ b/resources/views/welcome.blade.php
@@ -12,129 +12,161 @@
 
         <!-- Styles -->
         <style>
-            /* ! tailwindcss v3.2.4 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:Figtree, sans-serif;font-feature-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::-webkit-backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.relative{position:relative}.mx-auto{margin-left:auto;margin-right:auto}.mx-6{margin-left:1.5rem;margin-right:1.5rem}.ml-4{margin-left:1rem}.mt-16{margin-top:4rem}.mt-6{margin-top:1.5rem}.mt-4{margin-top:1rem}.-mt-px{margin-top:-1px}.mr-1{margin-right:0.25rem}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.h-16{height:4rem}.h-7{height:1.75rem}.h-6{height:1.5rem}.h-5{height:1.25rem}.min-h-screen{min-height:100vh}.w-auto{width:auto}.w-16{width:4rem}.w-7{width:1.75rem}.w-6{width:1.5rem}.w-5{width:1.25rem}.max-w-7xl{max-width:80rem}.shrink-0{flex-shrink:0}.scale-100{--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}.items-center{align-items:center}.justify-center{justify-content:center}.gap-6{gap:1.5rem}.gap-4{gap:1rem}.self-center{align-self:center}.rounded-lg{border-radius:0.5rem}.rounded-full{border-radius:9999px}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.bg-red-50{--tw-bg-opacity:1;background-color:rgb(254 242 242 / var(--tw-bg-opacity))}.bg-dots-darker{background-image:url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.22676 0C1.91374 0 2.45351 0.539773 2.45351 1.22676C2.45351 1.91374 1.91374 2.45351 1.22676 2.45351C0.539773 2.45351 0 1.91374 0 1.22676C0 0.539773 0.539773 0 1.22676 0Z' fill='rgba(0,0,0,0.07)'/%3E%3C/svg%3E")}.from-gray-700\/50{--tw-gradient-from:rgb(55 65 81 / 0.5);--tw-gradient-to:rgb(55 65 81 / 0);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.via-transparent{--tw-gradient-to:rgb(0 0 0 / 0);--tw-gradient-stops:var(--tw-gradient-from), transparent, var(--tw-gradient-to)}.bg-center{background-position:center}.stroke-red-500{stroke:#ef4444}.stroke-gray-400{stroke:#9ca3af}.p-6{padding:1.5rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.text-center{text-align:center}.text-right{text-align:right}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.font-semibold{font-weight:600}.leading-relaxed{line-height:1.625}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39 / var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity))}.underline{-webkit-text-decoration-line:underline;text-decoration-line:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgb(0 0 0 / 0.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-gray-500\/20{--tw-shadow-color:rgb(107 114 128 / 0.2);--tw-shadow:var(--tw-shadow-colored)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.selection\:bg-red-500 *::selection{--tw-bg-opacity:1;background-color:rgb(239 68 68 / var(--tw-bg-opacity))}.selection\:text-white *::selection{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.selection\:bg-red-500::selection{--tw-bg-opacity:1;background-color:rgb(239 68 68 / var(--tw-bg-opacity))}.selection\:text-white::selection{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.hover\:text-gray-900:hover{--tw-text-opacity:1;color:rgb(17 24 39 / var(--tw-text-opacity))}.hover\:text-gray-700:hover{--tw-text-opacity:1;color:rgb(55 65 81 / var(--tw-text-opacity))}.focus\:rounded-sm:focus{border-radius:0.125rem}.focus\:outline:focus{outline-style:solid}.focus\:outline-2:focus{outline-width:2px}.focus\:outline-red-500:focus{outline-color:#ef4444}.group:hover .group-hover\:stroke-gray-600{stroke:#4b5563}@media (prefers-reduced-motion: no-preference){.motion-safe\:hover\:scale-\[1\.01\]:hover{--tw-scale-x:1.01;--tw-scale-y:1.01;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}}@media (prefers-color-scheme: dark){.dark\:bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39 / var(--tw-bg-opacity))}.dark\:bg-gray-800\/50{background-color:rgb(31 41 55 / 0.5)}.dark\:bg-red-800\/20{background-color:rgb(153 27 27 / 0.2)}.dark\:bg-dots-lighter{background-image:url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.22676 0C1.91374 0 2.45351 0.539773 2.45351 1.22676C2.45351 1.91374 1.91374 2.45351 1.22676 2.45351C0.539773 2.45351 0 1.91374 0 1.22676C0 0.539773 0.539773 0 1.22676 0Z' fill='rgba(255,255,255,0.07)'/%3E%3C/svg%3E")}.dark\:bg-gradient-to-bl{background-image:linear-gradient(to bottom left, var(--tw-gradient-stops))}.dark\:stroke-gray-600{stroke:#4b5563}.dark\:text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity))}.dark\:text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.dark\:shadow-none{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.dark\:ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.dark\:ring-inset{--tw-ring-inset:inset}.dark\:ring-white\/5{--tw-ring-color:rgb(255 255 255 / 0.05)}.dark\:hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.group:hover .dark\:group-hover\:stroke-gray-400{stroke:#9ca3af}}@media (min-width: 640px){.sm\:fixed{position:fixed}.sm\:top-0{top:0px}.sm\:right-0{right:0px}.sm\:ml-0{margin-left:0px}.sm\:flex{display:flex}.sm\:items-center{align-items:center}.sm\:justify-center{justify-content:center}.sm\:justify-between{justify-content:space-between}.sm\:text-left{text-align:left}.sm\:text-right{text-align:right}}@media (min-width: 768px){.md\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}}@media (min-width: 1024px){.lg\:gap-8{gap:2rem}.lg\:p-8{padding:2rem}}
+            /* ! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:Figtree, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.absolute{position:absolute}.relative{position:relative}.-left-20{left:-5rem}.top-0{top:0px}.-bottom-16{bottom:-4rem}.-left-16{left:-4rem}.-mx-3{margin-left:-0.75rem;margin-right:-0.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.flex{display:flex}.grid{display:grid}.hidden{display:none}.aspect-video{aspect-ratio:16 / 9}.size-12{width:3rem;height:3rem}.size-5{width:1.25rem;height:1.25rem}.size-6{width:1.5rem;height:1.5rem}.h-12{height:3rem}.h-40{height:10rem}.h-full{height:100%}.min-h-screen{min-height:100vh}.w-full{width:100%}.w-\[calc\(100\%\+8rem\)\]{width:calc(100% + 8rem)}.w-auto{width:auto}.max-w-\[877px\]{max-width:877px}.max-w-2xl{max-width:42rem}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.gap-2{gap:0.5rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.self-center{align-self:center}.overflow-hidden{overflow:hidden}.rounded-\[10px\]{border-radius:10px}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:0.5rem}.rounded-md{border-radius:0.375rem}.rounded-sm{border-radius:0.125rem}.bg-\[\#FF2D20\]\/10{background-color:rgb(255 45 32 / 0.1)}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.bg-gradient-to-b{background-image:linear-gradient(to bottom, var(--tw-gradient-stops))}.from-transparent{--tw-gradient-from:transparent var(--tw-gradient-from-position);--tw-gradient-to:rgb(0 0 0 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.via-white{--tw-gradient-to:rgb(255 255 255 / 0)  var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), #fff var(--tw-gradient-via-position), var(--tw-gradient-to)}.to-white{--tw-gradient-to:#fff var(--tw-gradient-to-position)}.stroke-\[\#FF2D20\]{stroke:#FF2D20}.object-cover{object-fit:cover}.object-top{object-position:top}.p-6{padding:1.5rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.px-3{padding-left:0.75rem;padding-right:0.75rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.pt-3{padding-top:0.75rem}.text-center{text-align:center}.font-sans{font-family:Figtree, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-sm\/relaxed{font-size:0.875rem;line-height:1.625}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-semibold{font-weight:600}.text-black{--tw-text-opacity:1;color:rgb(0 0 0 / var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.underline{-webkit-text-decoration-line:underline;text-decoration-line:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.shadow-\[0px_14px_34px_0px_rgba\(0\2c 0\2c 0\2c 0\.08\)\]{--tw-shadow:0px 14px 34px 0px rgba(0,0,0,0.08);--tw-shadow-colored:0px 14px 34px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.ring-transparent{--tw-ring-color:transparent}.ring-white\/\[0\.05\]{--tw-ring-color:rgb(255 255 255 / 0.05)}.drop-shadow-\[0px_4px_34px_rgba\(0\2c 0\2c 0\2c 0\.06\)\]{--tw-drop-shadow:drop-shadow(0px 4px 34px rgba(0,0,0,0.06));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow-\[0px_4px_34px_rgba\(0\2c 0\2c 0\2c 0\.25\)\]{--tw-drop-shadow:drop-shadow(0px 4px 34px rgba(0,0,0,0.25));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-300{transition-duration:300ms}.selection\:bg-\[\#FF2D20\] *::selection{--tw-bg-opacity:1;background-color:rgb(255 45 32 / var(--tw-bg-opacity))}.selection\:text-white *::selection{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.selection\:bg-\[\#FF2D20\]::selection{--tw-bg-opacity:1;background-color:rgb(255 45 32 / var(--tw-bg-opacity))}.selection\:text-white::selection{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.hover\:text-black:hover{--tw-text-opacity:1;color:rgb(0 0 0 / var(--tw-text-opacity))}.hover\:text-black\/70:hover{color:rgb(0 0 0 / 0.7)}.hover\:ring-black\/20:hover{--tw-ring-color:rgb(0 0 0 / 0.2)}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus-visible\:ring-1:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.focus-visible\:ring-\[\#FF2D20\]:focus-visible{--tw-ring-opacity:1;--tw-ring-color:rgb(255 45 32 / var(--tw-ring-opacity))}@media (min-width: 640px){.sm\:size-16{width:4rem;height:4rem}.sm\:size-6{width:1.5rem;height:1.5rem}.sm\:pt-5{padding-top:1.25rem}}@media (min-width: 768px){.md\:row-span-3{grid-row:span 3 / span 3}}@media (min-width: 1024px){.lg\:col-start-2{grid-column-start:2}.lg\:h-16{height:4rem}.lg\:max-w-7xl{max-width:80rem}.lg\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.lg\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.lg\:flex-col{flex-direction:column}.lg\:items-end{align-items:flex-end}.lg\:justify-center{justify-content:center}.lg\:gap-8{gap:2rem}.lg\:p-10{padding:2.5rem}.lg\:pb-10{padding-bottom:2.5rem}.lg\:pt-0{padding-top:0px}.lg\:text-\[\#FF2D20\]{--tw-text-opacity:1;color:rgb(255 45 32 / var(--tw-text-opacity))}}@media (prefers-color-scheme: dark){.dark\:block{display:block}.dark\:hidden{display:none}.dark\:bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0 / var(--tw-bg-opacity))}.dark\:bg-zinc-900{--tw-bg-opacity:1;background-color:rgb(24 24 27 / var(--tw-bg-opacity))}.dark\:via-zinc-900{--tw-gradient-to:rgb(24 24 27 / 0)  var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), #18181b var(--tw-gradient-via-position), var(--tw-gradient-to)}.dark\:to-zinc-900{--tw-gradient-to:#18181b var(--tw-gradient-to-position)}.dark\:text-white\/50{color:rgb(255 255 255 / 0.5)}.dark\:text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.dark\:text-white\/70{color:rgb(255 255 255 / 0.7)}.dark\:ring-zinc-800{--tw-ring-opacity:1;--tw-ring-color:rgb(39 39 42 / var(--tw-ring-opacity))}.dark\:hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.dark\:hover\:text-white\/70:hover{color:rgb(255 255 255 / 0.7)}.dark\:hover\:text-white\/80:hover{color:rgb(255 255 255 / 0.8)}.dark\:hover\:ring-zinc-700:hover{--tw-ring-opacity:1;--tw-ring-color:rgb(63 63 70 / var(--tw-ring-opacity))}.dark\:focus-visible\:ring-\[\#FF2D20\]:focus-visible{--tw-ring-opacity:1;--tw-ring-color:rgb(255 45 32 / var(--tw-ring-opacity))}.dark\:focus-visible\:ring-white:focus-visible{--tw-ring-opacity:1;--tw-ring-color:rgb(255 255 255 / var(--tw-ring-opacity))}}
         </style>
     </head>
-    <body class="antialiased">
-        <div class="relative sm:flex sm:justify-center sm:items-center min-h-screen bg-dots-darker bg-center bg-gray-100 dark:bg-dots-lighter dark:bg-gray-900 selection:bg-red-500 selection:text-white">
-            @if (Route::has('login'))
-                <div class="sm:fixed sm:top-0 sm:right-0 p-6 text-right">
-                    @auth
-                        <a href="{{ url('/dashboard') }}" class="font-semibold text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white focus:outline focus:outline-2 focus:rounded-sm focus:outline-red-500">Home</a>
-                    @else
-                        <a href="{{ route('login') }}" class="font-semibold text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white focus:outline focus:outline-2 focus:rounded-sm focus:outline-red-500">Log in</a>
-
-                        @if (Route::has('register'))
-                            <a href="{{ route('register') }}" class="ml-4 font-semibold text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white focus:outline focus:outline-2 focus:rounded-sm focus:outline-red-500">Register</a>
+    <body class="font-sans antialiased dark:bg-black dark:text-white/50">
+        <div className="bg-gray-50 text-black/50 dark:bg-black dark:text-white/50">
+            <img id="background" class="absolute -left-20 top-0 max-w-[877px]" src="https://laravel.com/assets/img/welcome/background.svg" />
+            <div class="relative min-h-screen flex flex-col items-center justify-center selection:bg-[#FF2D20] selection:text-white">
+                <div class="relative w-full max-w-2xl px-6 lg:max-w-7xl">
+                    <header class="grid grid-cols-2 items-center gap-2 py-10 lg:grid-cols-3">
+                        <div class="flex lg:justify-center lg:col-start-2">
+                            <svg class="h-12 w-auto text-white lg:h-16 lg:text-[#FF2D20]" viewBox="0 0 62 65" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M61.8548 14.6253C61.8778 14.7102 61.8895 14.7978 61.8897 14.8858V28.5615C61.8898 28.737 61.8434 28.9095 61.7554 29.0614C61.6675 29.2132 61.5409 29.3392 61.3887 29.4265L49.9104 36.0351V49.1337C49.9104 49.4902 49.7209 49.8192 49.4118 49.9987L25.4519 63.7916C25.3971 63.8227 25.3372 63.8427 25.2774 63.8639C25.255 63.8714 25.2338 63.8851 25.2101 63.8913C25.0426 63.9354 24.8666 63.9354 24.6991 63.8913C24.6716 63.8838 24.6467 63.8689 24.6205 63.8589C24.5657 63.8389 24.5084 63.8215 24.456 63.7916L0.501061 49.9987C0.348882 49.9113 0.222437 49.7853 0.134469 49.6334C0.0465019 49.4816 0.000120578 49.3092 0 49.1337L0 8.10652C0 8.01678 0.0124642 7.92953 0.0348998 7.84477C0.0423783 7.8161 0.0598282 7.78993 0.0697995 7.76126C0.0884958 7.70891 0.105946 7.65531 0.133367 7.6067C0.152063 7.5743 0.179485 7.54812 0.20192 7.51821C0.230588 7.47832 0.256763 7.43719 0.290416 7.40229C0.319084 7.37362 0.356476 7.35243 0.388883 7.32751C0.425029 7.29759 0.457436 7.26518 0.498568 7.2415L12.4779 0.345059C12.6296 0.257786 12.8015 0.211853 12.9765 0.211853C13.1515 0.211853 13.3234 0.257786 13.475 0.345059L25.4531 7.2415H25.4556C25.4955 7.26643 25.5292 7.29759 25.5653 7.32626C25.5977 7.35119 25.6339 7.37362 25.6625 7.40104C25.6974 7.43719 25.7224 7.47832 25.7523 7.51821C25.7735 7.54812 25.8021 7.5743 25.8196 7.6067C25.8483 7.65656 25.8645 7.70891 25.8844 7.76126C25.8944 7.78993 25.9118 7.8161 25.9193 7.84602C25.9423 7.93096 25.954 8.01853 25.9542 8.10652V33.7317L35.9355 27.9844V14.8846C35.9355 14.7973 35.948 14.7088 35.9704 14.6253C35.9792 14.5954 35.9954 14.5692 36.0053 14.5405C36.0253 14.4882 36.0427 14.4346 36.0702 14.386C36.0888 14.3536 36.1163 14.3274 36.1375 14.2975C36.1674 14.2576 36.1923 14.2165 36.2272 14.1816C36.2559 14.1529 36.292 14.1317 36.3244 14.1068C36.3618 14.0769 36.3942 14.0445 36.4341 14.0208L48.4147 7.12434C48.5663 7.03694 48.7383 6.99094 48.9133 6.99094C49.0883 6.99094 49.2602 7.03694 49.4118 7.12434L61.3899 14.0208C61.4323 14.0457 61.4647 14.0769 61.5021 14.1055C61.5333 14.1305 61.5694 14.1529 61.5981 14.1803C61.633 14.2165 61.6579 14.2576 61.6878 14.2975C61.7103 14.3274 61.7377 14.3536 61.7551 14.386C61.7838 14.4346 61.8 14.4882 61.8199 14.5405C61.8312 14.5692 61.8474 14.5954 61.8548 14.6253ZM59.893 27.9844V16.6121L55.7013 19.0252L49.9104 22.3593V33.7317L59.8942 27.9844H59.893ZM47.9149 48.5566V37.1768L42.2187 40.4299L25.953 49.7133V61.2003L47.9149 48.5566ZM1.99677 9.83281V48.5566L23.9562 61.199V49.7145L12.4841 43.2219L12.4804 43.2194L12.4754 43.2169C12.4368 43.1945 12.4044 43.1621 12.3682 43.1347C12.3371 43.1097 12.3009 43.0898 12.2735 43.0624L12.271 43.0586C12.2386 43.0275 12.2162 42.9888 12.1887 42.9539C12.1638 42.9203 12.1339 42.8916 12.114 42.8567L12.1127 42.853C12.0903 42.8156 12.0766 42.7707 12.0604 42.7283C12.0442 42.6909 12.023 42.656 12.013 42.6161C12.0005 42.5688 11.998 42.5177 11.9931 42.4691C11.9881 42.4317 11.9781 42.3943 11.9781 42.3569V15.5801L6.18848 12.2446L1.99677 9.83281ZM12.9777 2.36177L2.99764 8.10652L12.9752 13.8513L22.9541 8.10527L12.9752 2.36177H12.9777ZM18.1678 38.2138L23.9574 34.8809V9.83281L19.7657 12.2459L13.9749 15.5801V40.6281L18.1678 38.2138ZM48.9133 9.14105L38.9344 14.8858L48.9133 20.6305L58.8909 14.8846L48.9133 9.14105ZM47.9149 22.3593L42.124 19.0252L37.9323 16.6121V27.9844L43.7219 31.3174L47.9149 33.7317V22.3593ZM24.9533 47.987L39.59 39.631L46.9065 35.4555L36.9352 29.7145L25.4544 36.3242L14.9907 42.3482L24.9533 47.987Z" fill="currentColor"/></svg>
+                        </div>
+                        @if (Route::has('login'))
+                            <nav class="-mx-3 flex flex-1 justify-end">
+                                @auth
+                                    <a
+                                        href="{{ url('/dashboard') }}"
+                                        class="rounded-md px-3 py-2 text-black ring-1 ring-transparent transition hover:text-black/70 focus:outline-none focus-visible:ring-[#FF2D20] dark:text-white dark:hover:text-white/80 dark:focus-visible:ring-white"
+                                    >
+                                        Dashboard
+                                    </a>
+                                @else
+                                    <a
+                                        href="{{ route('login') }}"
+                                        class="rounded-md px-3 py-2 text-black ring-1 ring-transparent transition hover:text-black/70 focus:outline-none focus-visible:ring-[#FF2D20] dark:text-white dark:hover:text-white/80 dark:focus-visible:ring-white"
+                                    >
+                                        Log in
+                                    </a>
+
+                                    @if (Route::has('register'))
+                                        <a
+                                            href="{{ route('register') }}"
+                                            class="rounded-md px-3 py-2 text-black ring-1 ring-transparent transition hover:text-black/70 focus:outline-none focus-visible:ring-[#FF2D20] dark:text-white dark:hover:text-white/80 dark:focus-visible:ring-white"
+                                        >
+                                            Register
+                                        </a>
+                                    @endif
+                                @endauth
+                            </nav>
                         @endif
-                    @endauth
-                </div>
-            @endif
-
-            <div class="max-w-7xl mx-auto p-6 lg:p-8">
-                <div class="flex justify-center">
-                    <svg viewBox="0 0 62 65" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-16 w-auto bg-gray-100 dark:bg-gray-900">
-                        <path d="M61.8548 14.6253C61.8778 14.7102 61.8895 14.7978 61.8897 14.8858V28.5615C61.8898 28.737 61.8434 28.9095 61.7554 29.0614C61.6675 29.2132 61.5409 29.3392 61.3887 29.4265L49.9104 36.0351V49.1337C49.9104 49.4902 49.7209 49.8192 49.4118 49.9987L25.4519 63.7916C25.3971 63.8227 25.3372 63.8427 25.2774 63.8639C25.255 63.8714 25.2338 63.8851 25.2101 63.8913C25.0426 63.9354 24.8666 63.9354 24.6991 63.8913C24.6716 63.8838 24.6467 63.8689 24.6205 63.8589C24.5657 63.8389 24.5084 63.8215 24.456 63.7916L0.501061 49.9987C0.348882 49.9113 0.222437 49.7853 0.134469 49.6334C0.0465019 49.4816 0.000120578 49.3092 0 49.1337L0 8.10652C0 8.01678 0.0124642 7.92953 0.0348998 7.84477C0.0423783 7.8161 0.0598282 7.78993 0.0697995 7.76126C0.0884958 7.70891 0.105946 7.65531 0.133367 7.6067C0.152063 7.5743 0.179485 7.54812 0.20192 7.51821C0.230588 7.47832 0.256763 7.43719 0.290416 7.40229C0.319084 7.37362 0.356476 7.35243 0.388883 7.32751C0.425029 7.29759 0.457436 7.26518 0.498568 7.2415L12.4779 0.345059C12.6296 0.257786 12.8015 0.211853 12.9765 0.211853C13.1515 0.211853 13.3234 0.257786 13.475 0.345059L25.4531 7.2415H25.4556C25.4955 7.26643 25.5292 7.29759 25.5653 7.32626C25.5977 7.35119 25.6339 7.37362 25.6625 7.40104C25.6974 7.43719 25.7224 7.47832 25.7523 7.51821C25.7735 7.54812 25.8021 7.5743 25.8196 7.6067C25.8483 7.65656 25.8645 7.70891 25.8844 7.76126C25.8944 7.78993 25.9118 7.8161 25.9193 7.84602C25.9423 7.93096 25.954 8.01853 25.9542 8.10652V33.7317L35.9355 27.9844V14.8846C35.9355 14.7973 35.948 14.7088 35.9704 14.6253C35.9792 14.5954 35.9954 14.5692 36.0053 14.5405C36.0253 14.4882 36.0427 14.4346 36.0702 14.386C36.0888 14.3536 36.1163 14.3274 36.1375 14.2975C36.1674 14.2576 36.1923 14.2165 36.2272 14.1816C36.2559 14.1529 36.292 14.1317 36.3244 14.1068C36.3618 14.0769 36.3942 14.0445 36.4341 14.0208L48.4147 7.12434C48.5663 7.03694 48.7383 6.99094 48.9133 6.99094C49.0883 6.99094 49.2602 7.03694 49.4118 7.12434L61.3899 14.0208C61.4323 14.0457 61.4647 14.0769 61.5021 14.1055C61.5333 14.1305 61.5694 14.1529 61.5981 14.1803C61.633 14.2165 61.6579 14.2576 61.6878 14.2975C61.7103 14.3274 61.7377 14.3536 61.7551 14.386C61.7838 14.4346 61.8 14.4882 61.8199 14.5405C61.8312 14.5692 61.8474 14.5954 61.8548 14.6253ZM59.893 27.9844V16.6121L55.7013 19.0252L49.9104 22.3593V33.7317L59.8942 27.9844H59.893ZM47.9149 48.5566V37.1768L42.2187 40.4299L25.953 49.7133V61.2003L47.9149 48.5566ZM1.99677 9.83281V48.5566L23.9562 61.199V49.7145L12.4841 43.2219L12.4804 43.2194L12.4754 43.2169C12.4368 43.1945 12.4044 43.1621 12.3682 43.1347C12.3371 43.1097 12.3009 43.0898 12.2735 43.0624L12.271 43.0586C12.2386 43.0275 12.2162 42.9888 12.1887 42.9539C12.1638 42.9203 12.1339 42.8916 12.114 42.8567L12.1127 42.853C12.0903 42.8156 12.0766 42.7707 12.0604 42.7283C12.0442 42.6909 12.023 42.656 12.013 42.6161C12.0005 42.5688 11.998 42.5177 11.9931 42.4691C11.9881 42.4317 11.9781 42.3943 11.9781 42.3569V15.5801L6.18848 12.2446L1.99677 9.83281ZM12.9777 2.36177L2.99764 8.10652L12.9752 13.8513L22.9541 8.10527L12.9752 2.36177H12.9777ZM18.1678 38.2138L23.9574 34.8809V9.83281L19.7657 12.2459L13.9749 15.5801V40.6281L18.1678 38.2138ZM48.9133 9.14105L38.9344 14.8858L48.9133 20.6305L58.8909 14.8846L48.9133 9.14105ZM47.9149 22.3593L42.124 19.0252L37.9323 16.6121V27.9844L43.7219 31.3174L47.9149 33.7317V22.3593ZM24.9533 47.987L39.59 39.631L46.9065 35.4555L36.9352 29.7145L25.4544 36.3242L14.9907 42.3482L24.9533 47.987Z" fill="#FF2D20"/>
-                    </svg>
-                </div>
-
-                <div class="mt-16">
-                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
-                        <a href="https://laravel.com/docs" class="scale-100 p-6 bg-white dark:bg-gray-800/50 dark:bg-gradient-to-bl from-gray-700/50 via-transparent dark:ring-1 dark:ring-inset dark:ring-white/5 rounded-lg shadow-2xl shadow-gray-500/20 dark:shadow-none flex motion-safe:hover:scale-[1.01] transition-all duration-250 focus:outline focus:outline-2 focus:outline-red-500">
-                            <div>
-                                <div class="h-16 w-16 bg-red-50 dark:bg-red-800/20 flex items-center justify-center rounded-full">
-                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="w-7 h-7 stroke-red-500">
-                                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" />
-                                    </svg>
+                    </header>
+
+                    <main class="mt-6">
+                        <div class="grid gap-6 lg:grid-cols-2 lg:gap-8">
+                            <a
+                                href="https://laravel.com/docs"
+                                id="docs-card"
+                                class="flex flex-col items-start gap-6 overflow-hidden rounded-lg bg-white p-6 shadow-[0px_14px_34px_0px_rgba(0,0,0,0.08)] ring-1 ring-white/[0.05] transition duration-300 hover:text-black/70 hover:ring-black/20 focus:outline-none focus-visible:ring-[#FF2D20] md:row-span-3 lg:p-10 lg:pb-10 dark:bg-zinc-900 dark:ring-zinc-800 dark:hover:text-white/70 dark:hover:ring-zinc-700 dark:focus-visible:ring-[#FF2D20]"
+                            >
+                                <div id="screenshot-container" class="relative flex w-full flex-1 items-stretch">
+                                    <img
+                                        src="https://laravel.com/assets/img/welcome/docs-light.svg"
+                                        alt="Laravel documentation screenshot"
+                                        class="aspect-video h-full w-full flex-1 rounded-[10px] object-top object-cover drop-shadow-[0px_4px_34px_rgba(0,0,0,0.06)] dark:hidden"
+                                        onerror="
+                                            document.getElementById('screenshot-container').classList.add('!hidden');
+                                            document.getElementById('docs-card').classList.add('!row-span-1');
+                                            document.getElementById('docs-card-content').classList.add('!flex-row');
+                                            document.getElementById('background').classList.add('!hidden');
+                                        "
+                                    />
+                                    <img
+                                        src="https://laravel.com/assets/img/welcome/docs-dark.svg"
+                                        alt="Laravel documentation screenshot"
+                                        class="hidden aspect-video h-full w-full flex-1 rounded-[10px] object-top object-cover drop-shadow-[0px_4px_34px_rgba(0,0,0,0.25)] dark:block"
+                                    />
+                                    <div
+                                        class="absolute -bottom-16 -left-16 h-40 w-[calc(100%+8rem)] bg-gradient-to-b from-transparent via-white to-white dark:via-zinc-900 dark:to-zinc-900"
+                                    ></div>
                                 </div>
 
-                                <h2 class="mt-6 text-xl font-semibold text-gray-900 dark:text-white">Documentation</h2>
+                                <div class="relative flex items-center gap-6 lg:items-end">
+                                    <div id="docs-card-content" class="flex items-start gap-6 lg:flex-col">
+                                        <div class="flex size-12 shrink-0 items-center justify-center rounded-full bg-[#FF2D20]/10 sm:size-16">
+                                            <svg class="size-5 sm:size-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#FF2D20" d="M23 4a1 1 0 0 0-1.447-.894L12.224 7.77a.5.5 0 0 1-.448 0L2.447 3.106A1 1 0 0 0 1 4v13.382a1.99 1.99 0 0 0 1.105 1.79l9.448 4.728c.14.065.293.1.447.1.154-.005.306-.04.447-.105l9.453-4.724a1.99 1.99 0 0 0 1.1-1.789V4ZM3 6.023a.25.25 0 0 1 .362-.223l7.5 3.75a.251.251 0 0 1 .138.223v11.2a.25.25 0 0 1-.362.224l-7.5-3.75a.25.25 0 0 1-.138-.22V6.023Zm18 11.2a.25.25 0 0 1-.138.224l-7.5 3.75a.249.249 0 0 1-.329-.099.249.249 0 0 1-.033-.12V9.772a.251.251 0 0 1 .138-.224l7.5-3.75a.25.25 0 0 1 .362.224v11.2Z"/><path fill="#FF2D20" d="m3.55 1.893 8 4.048a1.008 1.008 0 0 0 .9 0l8-4.048a1 1 0 0 0-.9-1.785l-7.322 3.706a.506.506 0 0 1-.452 0L4.454.108a1 1 0 0 0-.9 1.785H3.55Z"/></svg>
+                                        </div>
 
-                                <p class="mt-4 text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
-                                    Laravel has wonderful documentation covering every aspect of the framework. Whether you are a newcomer or have prior experience with Laravel, we recommend reading our documentation from beginning to end.
-                                </p>
-                            </div>
+                                        <div class="pt-3 sm:pt-5 lg:pt-0">
+                                            <h2 class="text-xl font-semibold text-black dark:text-white">Documentation</h2>
 
-                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="self-center shrink-0 stroke-red-500 w-6 h-6 mx-6">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
-                            </svg>
-                        </a>
+                                            <p class="mt-4 text-sm/relaxed">
+                                                Laravel has wonderful documentation covering every aspect of the framework. Whether you are a newcomer or have prior experience with Laravel, we recommend reading our documentation from beginning to end.
+                                            </p>
+                                        </div>
+                                    </div>
 
-                        <a href="https://laracasts.com" class="scale-100 p-6 bg-white dark:bg-gray-800/50 dark:bg-gradient-to-bl from-gray-700/50 via-transparent dark:ring-1 dark:ring-inset dark:ring-white/5 rounded-lg shadow-2xl shadow-gray-500/20 dark:shadow-none flex motion-safe:hover:scale-[1.01] transition-all duration-250 focus:outline focus:outline-2 focus:outline-red-500">
-                            <div>
-                                <div class="h-16 w-16 bg-red-50 dark:bg-red-800/20 flex items-center justify-center rounded-full">
-                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="w-7 h-7 stroke-red-500">
-                                        <path stroke-linecap="round" d="M15.75 10.5l4.72-4.72a.75.75 0 011.28.53v11.38a.75.75 0 01-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25h-9A2.25 2.25 0 002.25 7.5v9a2.25 2.25 0 002.25 2.25z" />
-                                    </svg>
+                                    <svg class="size-6 shrink-0 stroke-[#FF2D20]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75"/></svg>
                                 </div>
+                            </a>
 
-                                <h2 class="mt-6 text-xl font-semibold text-gray-900 dark:text-white">Laracasts</h2>
+                            <a
+                                href="https://laracasts.com"
+                                class="flex items-start gap-4 rounded-lg bg-white p-6 shadow-[0px_14px_34px_0px_rgba(0,0,0,0.08)] ring-1 ring-white/[0.05] transition duration-300 hover:text-black/70 hover:ring-black/20 focus:outline-none focus-visible:ring-[#FF2D20] lg:pb-10 dark:bg-zinc-900 dark:ring-zinc-800 dark:hover:text-white/70 dark:hover:ring-zinc-700 dark:focus-visible:ring-[#FF2D20]"
+                            >
+                                <div class="flex size-12 shrink-0 items-center justify-center rounded-full bg-[#FF2D20]/10 sm:size-16">
+                                    <svg class="size-5 sm:size-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="#FF2D20"><path d="M24 8.25a.5.5 0 0 0-.5-.5H.5a.5.5 0 0 0-.5.5v12a2.5 2.5 0 0 0 2.5 2.5h19a2.5 2.5 0 0 0 2.5-2.5v-12Zm-7.765 5.868a1.221 1.221 0 0 1 0 2.264l-6.626 2.776A1.153 1.153 0 0 1 8 18.123v-5.746a1.151 1.151 0 0 1 1.609-1.035l6.626 2.776ZM19.564 1.677a.25.25 0 0 0-.177-.427H15.6a.106.106 0 0 0-.072.03l-4.54 4.543a.25.25 0 0 0 .177.427h3.783c.027 0 .054-.01.073-.03l4.543-4.543ZM22.071 1.318a.047.047 0 0 0-.045.013l-4.492 4.492a.249.249 0 0 0 .038.385.25.25 0 0 0 .14.042h5.784a.5.5 0 0 0 .5-.5v-2a2.5 2.5 0 0 0-1.925-2.432ZM13.014 1.677a.25.25 0 0 0-.178-.427H9.101a.106.106 0 0 0-.073.03l-4.54 4.543a.25.25 0 0 0 .177.427H8.4a.106.106 0 0 0 .073-.03l4.54-4.543ZM6.513 1.677a.25.25 0 0 0-.177-.427H2.5A2.5 2.5 0 0 0 0 3.75v2a.5.5 0 0 0 .5.5h1.4a.106.106 0 0 0 .073-.03l4.54-4.543Z"/></g></svg>
+                                </div>
 
-                                <p class="mt-4 text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
-                                    Laracasts offers thousands of video tutorials on Laravel, PHP, and JavaScript development. Check them out, see for yourself, and massively level up your development skills in the process.
-                                </p>
-                            </div>
+                                <div class="pt-3 sm:pt-5">
+                                    <h2 class="text-xl font-semibold text-black dark:text-white">Laracasts</h2>
 
-                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="self-center shrink-0 stroke-red-500 w-6 h-6 mx-6">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
-                            </svg>
-                        </a>
+                                    <p class="mt-4 text-sm/relaxed">
+                                        Laracasts offers thousands of video tutorials on Laravel, PHP, and JavaScript development. Check them out, see for yourself, and massively level up your development skills in the process.
+                                    </p>
+                                </div>
 
-                        <a href="https://laravel-news.com" class="scale-100 p-6 bg-white dark:bg-gray-800/50 dark:bg-gradient-to-bl from-gray-700/50 via-transparent dark:ring-1 dark:ring-inset dark:ring-white/5 rounded-lg shadow-2xl shadow-gray-500/20 dark:shadow-none flex motion-safe:hover:scale-[1.01] transition-all duration-250 focus:outline focus:outline-2 focus:outline-red-500">
-                            <div>
-                                <div class="h-16 w-16 bg-red-50 dark:bg-red-800/20 flex items-center justify-center rounded-full">
-                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="w-7 h-7 stroke-red-500">
-                                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 01-2.25 2.25M16.5 7.5V18a2.25 2.25 0 002.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 002.25 2.25h13.5M6 7.5h3v3H6v-3z" />
-                                    </svg>
+                                <svg class="size-6 shrink-0 self-center stroke-[#FF2D20]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75"/></svg>
+                            </a>
+
+                            <a
+                                href="https://laravel-news.com"
+                                class="flex items-start gap-4 rounded-lg bg-white p-6 shadow-[0px_14px_34px_0px_rgba(0,0,0,0.08)] ring-1 ring-white/[0.05] transition duration-300 hover:text-black/70 hover:ring-black/20 focus:outline-none focus-visible:ring-[#FF2D20] lg:pb-10 dark:bg-zinc-900 dark:ring-zinc-800 dark:hover:text-white/70 dark:hover:ring-zinc-700 dark:focus-visible:ring-[#FF2D20]"
+                            >
+                                <div class="flex size-12 shrink-0 items-center justify-center rounded-full bg-[#FF2D20]/10 sm:size-16">
+                                    <svg class="size-5 sm:size-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="#FF2D20"><path d="M8.75 4.5H5.5c-.69 0-1.25.56-1.25 1.25v4.75c0 .69.56 1.25 1.25 1.25h3.25c.69 0 1.25-.56 1.25-1.25V5.75c0-.69-.56-1.25-1.25-1.25Z"/><path d="M24 10a3 3 0 0 0-3-3h-2V2.5a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2V20a3.5 3.5 0 0 0 3.5 3.5h17A3.5 3.5 0 0 0 24 20V10ZM3.5 21.5A1.5 1.5 0 0 1 2 20V3a.5.5 0 0 1 .5-.5h14a.5.5 0 0 1 .5.5v17c0 .295.037.588.11.874a.5.5 0 0 1-.484.625L3.5 21.5ZM22 20a1.5 1.5 0 1 1-3 0V9.5a.5.5 0 0 1 .5-.5H21a1 1 0 0 1 1 1v10Z"/><path d="M12.751 6.047h2a.75.75 0 0 1 .75.75v.5a.75.75 0 0 1-.75.75h-2A.75.75 0 0 1 12 7.3v-.5a.75.75 0 0 1 .751-.753ZM12.751 10.047h2a.75.75 0 0 1 .75.75v.5a.75.75 0 0 1-.75.75h-2A.75.75 0 0 1 12 11.3v-.5a.75.75 0 0 1 .751-.753ZM4.751 14.047h10a.75.75 0 0 1 .75.75v.5a.75.75 0 0 1-.75.75h-10A.75.75 0 0 1 4 15.3v-.5a.75.75 0 0 1 .751-.753ZM4.75 18.047h7.5a.75.75 0 0 1 .75.75v.5a.75.75 0 0 1-.75.75h-7.5A.75.75 0 0 1 4 19.3v-.5a.75.75 0 0 1 .75-.753Z"/></g></svg>
                                 </div>
 
-                                <h2 class="mt-6 text-xl font-semibold text-gray-900 dark:text-white">Laravel News</h2>
+                                <div class="pt-3 sm:pt-5">
+                                    <h2 class="text-xl font-semibold text-black dark:text-white">Laravel News</h2>
 
-                                <p class="mt-4 text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
-                                    Laravel News is a community driven portal and newsletter aggregating all of the latest and most important news in the Laravel ecosystem, including new package releases and tutorials.
-                                </p>
-                            </div>
+                                    <p class="mt-4 text-sm/relaxed">
+                                        Laravel News is a community driven portal and newsletter aggregating all of the latest and most important news in the Laravel ecosystem, including new package releases and tutorials.
+                                    </p>
+                                </div>
 
-                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="self-center shrink-0 stroke-red-500 w-6 h-6 mx-6">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
-                            </svg>
-                        </a>
+                                <svg class="size-6 shrink-0 self-center stroke-[#FF2D20]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75"/></svg>
+                            </a>
 
-                        <div class="scale-100 p-6 bg-white dark:bg-gray-800/50 dark:bg-gradient-to-bl from-gray-700/50 via-transparent dark:ring-1 dark:ring-inset dark:ring-white/5 rounded-lg shadow-2xl shadow-gray-500/20 dark:shadow-none flex motion-safe:hover:scale-[1.01] transition-all duration-250 focus:outline focus:outline-2 focus:outline-red-500">
-                            <div>
-                                <div class="h-16 w-16 bg-red-50 dark:bg-red-800/20 flex items-center justify-center rounded-full">
-                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="w-7 h-7 stroke-red-500">
-                                        <path stroke-linecap="round" stroke-linejoin="round" d="M6.115 5.19l.319 1.913A6 6 0 008.11 10.36L9.75 12l-.387.775c-.217.433-.132.956.21 1.298l1.348 1.348c.21.21.329.497.329.795v1.089c0 .426.24.815.622 1.006l.153.076c.433.217.956.132 1.298-.21l.723-.723a8.7 8.7 0 002.288-4.042 1.087 1.087 0 00-.358-1.099l-1.33-1.108c-.251-.21-.582-.299-.905-.245l-1.17.195a1.125 1.125 0 01-.98-.314l-.295-.295a1.125 1.125 0 010-1.591l.13-.132a1.125 1.125 0 011.3-.21l.603.302a.809.809 0 001.086-1.086L14.25 7.5l1.256-.837a4.5 4.5 0 001.528-1.732l.146-.292M6.115 5.19A9 9 0 1017.18 4.64M6.115 5.19A8.965 8.965 0 0112 3c1.929 0 3.716.607 5.18 1.64" />
+                            <div class="flex items-start gap-4 rounded-lg bg-white p-6 shadow-[0px_14px_34px_0px_rgba(0,0,0,0.08)] ring-1 ring-white/[0.05] lg:pb-10 dark:bg-zinc-900 dark:ring-zinc-800">
+                                <div class="flex size-12 shrink-0 items-center justify-center rounded-full bg-[#FF2D20]/10 sm:size-16">
+                                    <svg class="size-5 sm:size-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                                        <g fill="#FF2D20">
+                                            <path
+                                                d="M16.597 12.635a.247.247 0 0 0-.08-.237 2.234 2.234 0 0 1-.769-1.68c.001-.195.03-.39.084-.578a.25.25 0 0 0-.09-.267 8.8 8.8 0 0 0-4.826-1.66.25.25 0 0 0-.268.181 2.5 2.5 0 0 1-2.4 1.824.045.045 0 0 0-.045.037 12.255 12.255 0 0 0-.093 3.86.251.251 0 0 0 .208.214c2.22.366 4.367 1.08 6.362 2.118a.252.252 0 0 0 .32-.079 10.09 10.09 0 0 0 1.597-3.733ZM13.616 17.968a.25.25 0 0 0-.063-.407A19.697 19.697 0 0 0 8.91 15.98a.25.25 0 0 0-.287.325c.151.455.334.898.548 1.328.437.827.981 1.594 1.619 2.28a.249.249 0 0 0 .32.044 29.13 29.13 0 0 0 2.506-1.99ZM6.303 14.105a.25.25 0 0 0 .265-.274 13.048 13.048 0 0 1 .205-4.045.062.062 0 0 0-.022-.07 2.5 2.5 0 0 1-.777-.982.25.25 0 0 0-.271-.149 11 11 0 0 0-5.6 2.815.255.255 0 0 0-.075.163c-.008.135-.02.27-.02.406.002.8.084 1.598.246 2.381a.25.25 0 0 0 .303.193 19.924 19.924 0 0 1 5.746-.438ZM9.228 20.914a.25.25 0 0 0 .1-.393 11.53 11.53 0 0 1-1.5-2.22 12.238 12.238 0 0 1-.91-2.465.248.248 0 0 0-.22-.187 18.876 18.876 0 0 0-5.69.33.249.249 0 0 0-.179.336c.838 2.142 2.272 4 4.132 5.353a.254.254 0 0 0 .15.048c1.41-.01 2.807-.282 4.117-.802ZM18.93 12.957l-.005-.008a.25.25 0 0 0-.268-.082 2.21 2.21 0 0 1-.41.081.25.25 0 0 0-.217.2c-.582 2.66-2.127 5.35-5.75 7.843a.248.248 0 0 0-.09.299.25.25 0 0 0 .065.091 28.703 28.703 0 0 0 2.662 2.12.246.246 0 0 0 .209.037c2.579-.701 4.85-2.242 6.456-4.378a.25.25 0 0 0 .048-.189 13.51 13.51 0 0 0-2.7-6.014ZM5.702 7.058a.254.254 0 0 0 .2-.165A2.488 2.488 0 0 1 7.98 5.245a.093.093 0 0 0 .078-.062 19.734 19.734 0 0 1 3.055-4.74.25.25 0 0 0-.21-.41 12.009 12.009 0 0 0-10.4 8.558.25.25 0 0 0 .373.281 12.912 12.912 0 0 1 4.826-1.814ZM10.773 22.052a.25.25 0 0 0-.28-.046c-.758.356-1.55.635-2.365.833a.25.25 0 0 0-.022.48c1.252.43 2.568.65 3.893.65.1 0 .2 0 .3-.008a.25.25 0 0 0 .147-.444c-.526-.424-1.1-.917-1.673-1.465ZM18.744 8.436a.249.249 0 0 0 .15.228 2.246 2.246 0 0 1 1.352 2.054c0 .337-.08.67-.23.972a.25.25 0 0 0 .042.28l.007.009a15.016 15.016 0 0 1 2.52 4.6.25.25 0 0 0 .37.132.25.25 0 0 0 .096-.114c.623-1.464.944-3.039.945-4.63a12.005 12.005 0 0 0-5.78-10.258.25.25 0 0 0-.373.274c.547 2.109.85 4.274.901 6.453ZM9.61 5.38a.25.25 0 0 0 .08.31c.34.24.616.561.8.935a.25.25 0 0 0 .3.127.631.631 0 0 1 .206-.034c2.054.078 4.036.772 5.69 1.991a.251.251 0 0 0 .267.024c.046-.024.093-.047.141-.067a.25.25 0 0 0 .151-.23A29.98 29.98 0 0 0 15.957.764a.25.25 0 0 0-.16-.164 11.924 11.924 0 0 0-2.21-.518.252.252 0 0 0-.215.076A22.456 22.456 0 0 0 9.61 5.38Z"
+                                            />
+                                        </g>
                                     </svg>
                                 </div>
 
-                                <h2 class="mt-6 text-xl font-semibold text-gray-900 dark:text-white">Vibrant Ecosystem</h2>
+                                <div class="pt-3 sm:pt-5">
+                                    <h2 class="text-xl font-semibold text-black dark:text-white">Vibrant Ecosystem</h2>
 
-                                <p class="mt-4 text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
-                                    Laravel's robust library of first-party tools and libraries, such as <a href="https://forge.laravel.com" class="underline hover:text-gray-700 dark:hover:text-white focus:outline focus:outline-2 focus:rounded-sm focus:outline-red-500">Forge</a>, <a href="https://vapor.laravel.com" class="underline hover:text-gray-700 dark:hover:text-white focus:outline focus:outline-2 focus:rounded-sm focus:outline-red-500">Vapor</a>, <a href="https://nova.laravel.com" class="underline hover:text-gray-700 dark:hover:text-white focus:outline focus:outline-2 focus:rounded-sm focus:outline-red-500">Nova</a>, and <a href="https://envoyer.io" class="underline hover:text-gray-700 dark:hover:text-white focus:outline focus:outline-2 focus:rounded-sm focus:outline-red-500">Envoyer</a> help you take your projects to the next level. Pair them with powerful open source libraries like <a href="https://laravel.com/docs/billing" class="underline hover:text-gray-700 dark:hover:text-white focus:outline focus:outline-2 focus:rounded-sm focus:outline-red-500">Cashier</a>, <a href="https://laravel.com/docs/dusk" class="underline hover:text-gray-700 dark:hover:text-white focus:outline focus:outline-2 focus:rounded-sm focus:outline-red-500">Dusk</a>, <a href="https://laravel.com/docs/broadcasting" class="underline hover:text-gray-700 dark:hover:text-white focus:outline focus:outline-2 focus:rounded-sm focus:outline-red-500">Echo</a>, <a href="https://laravel.com/docs/horizon" class="underline hover:text-gray-700 dark:hover:text-white focus:outline focus:outline-2 focus:rounded-sm focus:outline-red-500">Horizon</a>, <a href="https://laravel.com/docs/sanctum" class="underline hover:text-gray-700 dark:hover:text-white focus:outline focus:outline-2 focus:rounded-sm focus:outline-red-500">Sanctum</a>, <a href="https://laravel.com/docs/telescope" class="underline hover:text-gray-700 dark:hover:text-white focus:outline focus:outline-2 focus:rounded-sm focus:outline-red-500">Telescope</a>, and more.
-                                </p>
+                                    <p class="mt-4 text-sm/relaxed">
+                                        Laravel's robust library of first-party tools and libraries, such as <a href="https://forge.laravel.com" class="rounded-sm underline hover:text-black focus:outline-none focus-visible:ring-1 focus-visible:ring-[#FF2D20] dark:hover:text-white dark:focus-visible:ring-[#FF2D20]">Forge</a>, <a href="https://vapor.laravel.com" class="rounded-sm underline hover:text-black focus:outline-none focus-visible:ring-1 focus-visible:ring-[#FF2D20] dark:hover:text-white">Vapor</a>, <a href="https://nova.laravel.com" class="rounded-sm underline hover:text-black focus:outline-none focus-visible:ring-1 focus-visible:ring-[#FF2D20] dark:hover:text-white">Nova</a>, <a href="https://envoyer.io" class="rounded-sm underline hover:text-black focus:outline-none focus-visible:ring-1 focus-visible:ring-[#FF2D20] dark:hover:text-white">Envoyer</a>, and <a href="https://herd.laravel.com" class="rounded-sm underline hover:text-black focus:outline-none focus-visible:ring-1 focus-visible:ring-[#FF2D20] dark:hover:text-white">Herd</a> help you take your projects to the next level. Pair them with powerful open source libraries like <a href="https://laravel.com/docs/billing" class="rounded-sm underline hover:text-black focus:outline-none focus-visible:ring-1 focus-visible:ring-[#FF2D20] dark:hover:text-white">Cashier</a>, <a href="https://laravel.com/docs/dusk" class="rounded-sm underline hover:text-black focus:outline-none focus-visible:ring-1 focus-visible:ring-[#FF2D20] dark:hover:text-white">Dusk</a>, <a href="https://laravel.com/docs/broadcasting" class="rounded-sm underline hover:text-black focus:outline-none focus-visible:ring-1 focus-visible:ring-[#FF2D20] dark:hover:text-white">Echo</a>, <a href="https://laravel.com/docs/horizon" class="rounded-sm underline hover:text-black focus:outline-none focus-visible:ring-1 focus-visible:ring-[#FF2D20] dark:hover:text-white">Horizon</a>, <a href="https://laravel.com/docs/sanctum" class="rounded-sm underline hover:text-black focus:outline-none focus-visible:ring-1 focus-visible:ring-[#FF2D20] dark:hover:text-white">Sanctum</a>, <a href="https://laravel.com/docs/telescope" class="rounded-sm underline hover:text-black focus:outline-none focus-visible:ring-1 focus-visible:ring-[#FF2D20] dark:hover:text-white">Telescope</a>, and more.
+                                    </p>
+                                </div>
                             </div>
                         </div>
-                    </div>
-                </div>
-
-                <div class="flex justify-center mt-16 px-0 sm:items-center sm:justify-between">
-                    <div class="text-center text-sm text-gray-500 dark:text-gray-400 sm:text-left">
-                        <div class="flex items-center gap-4">
-                            <a href="https://github.com/sponsors/taylorotwell" class="group inline-flex items-center hover:text-gray-700 dark:hover:text-white focus:outline focus:outline-2 focus:rounded-sm focus:outline-red-500">
-                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="-mt-px mr-1 w-5 h-5 stroke-gray-400 dark:stroke-gray-600 group-hover:stroke-gray-600 dark:group-hover:stroke-gray-400">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
-                                </svg>
-                                Sponsor
-                            </a>
-                        </div>
-                    </div>
+                    </main>
 
-                    <div class="ml-4 text-center text-sm text-gray-500 dark:text-gray-400 sm:text-right sm:ml-0">
+                    <footer class="py-16 text-center text-sm text-black dark:text-white/70">
                         Laravel v{{ Illuminate\Foundation\Application::VERSION }} (PHP v{{ PHP_VERSION }})
-                    </div>
+                    </footer>
                 </div>
             </div>
         </div>
     </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/routes/admin.php b/routes/admin.php
index d5ac457..68f2f1c 100644
--- a/routes/admin.php
+++ b/routes/admin.php
@@ -9,7 +9,7 @@
     'as' => 'admin.',
 ], function () {
     Route::get('/', function () {
-        return Inertia::render('Dashboard');
+        return Inertia::render('Admin/Dashboard');
     })->name('dashboard');    
     Route::resource('user', 'UserController');
     Route::resource('role', 'RoleController');
diff --git a/routes/api.php b/routes/api.php
index eb6fa48..03c4e31 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -3,17 +3,6 @@
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Route;
 
-/*
-|--------------------------------------------------------------------------
-| API Routes
-|--------------------------------------------------------------------------
-|
-| Here is where you can register API routes for your application. These
-| routes are loaded by the RouteServiceProvider within a group which
-| is assigned the "api" middleware group. Enjoy building your API!
-|
-*/
-
-Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
+Route::middleware(['auth:sanctum'])->get('/user', function (Request $request) {
     return $request->user();
-});
+});
\ No newline at end of file
diff --git a/routes/auth.php b/routes/auth.php
index e11fb1a..1040b51 100644
--- a/routes/auth.php
+++ b/routes/auth.php
@@ -5,6 +5,7 @@
 use App\Http\Controllers\Auth\EmailVerificationNotificationController;
 use App\Http\Controllers\Auth\EmailVerificationPromptController;
 use App\Http\Controllers\Auth\NewPasswordController;
+use App\Http\Controllers\Auth\PasswordController;
 use App\Http\Controllers\Auth\PasswordResetLinkController;
 use App\Http\Controllers\Auth\RegisteredUserController;
 use App\Http\Controllers\Auth\VerifyEmailController;
@@ -12,45 +13,47 @@
 
 Route::middleware('guest')->group(function () {
     Route::get('register', [RegisteredUserController::class, 'create'])
-        ->name('register');
+                ->name('register');
 
     Route::post('register', [RegisteredUserController::class, 'store']);
 
     Route::get('login', [AuthenticatedSessionController::class, 'create'])
-        ->name('login');
+                ->name('login');
 
     Route::post('login', [AuthenticatedSessionController::class, 'store']);
 
     Route::get('forgot-password', [PasswordResetLinkController::class, 'create'])
-        ->name('password.request');
+                ->name('password.request');
 
     Route::post('forgot-password', [PasswordResetLinkController::class, 'store'])
-        ->name('password.email');
+                ->name('password.email');
 
     Route::get('reset-password/{token}', [NewPasswordController::class, 'create'])
-        ->name('password.reset');
+                ->name('password.reset');
 
     Route::post('reset-password', [NewPasswordController::class, 'store'])
-        ->name('password.update');
+                ->name('password.store');
 });
 
 Route::middleware('auth')->group(function () {
-    Route::get('verify-email', [EmailVerificationPromptController::class, '__invoke'])
-        ->name('verification.notice');
+    Route::get('verify-email', EmailVerificationPromptController::class)
+                ->name('verification.notice');
 
-    Route::get('verify-email/{id}/{hash}', [VerifyEmailController::class, '__invoke'])
-        ->middleware(['signed', 'throttle:6,1'])
-        ->name('verification.verify');
+    Route::get('verify-email/{id}/{hash}', VerifyEmailController::class)
+                ->middleware(['signed', 'throttle:6,1'])
+                ->name('verification.verify');
 
     Route::post('email/verification-notification', [EmailVerificationNotificationController::class, 'store'])
-        ->middleware('throttle:6,1')
-        ->name('verification.send');
+                ->middleware('throttle:6,1')
+                ->name('verification.send');
 
     Route::get('confirm-password', [ConfirmablePasswordController::class, 'show'])
-        ->name('password.confirm');
+                ->name('password.confirm');
 
     Route::post('confirm-password', [ConfirmablePasswordController::class, 'store']);
 
+    Route::put('password', [PasswordController::class, 'update'])->name('password.update');
+
     Route::post('logout', [AuthenticatedSessionController::class, 'destroy'])
-        ->name('logout');
+                ->name('logout');
 });
diff --git a/routes/channels.php b/routes/channels.php
deleted file mode 100644
index 5d451e1..0000000
--- a/routes/channels.php
+++ /dev/null
@@ -1,18 +0,0 @@
-<?php
-
-use Illuminate\Support\Facades\Broadcast;
-
-/*
-|--------------------------------------------------------------------------
-| Broadcast Channels
-|--------------------------------------------------------------------------
-|
-| Here you may register all of the event broadcasting channels that your
-| application supports. The given channel authorization callbacks are
-| used to check if an authenticated user can listen to the channel.
-|
-*/
-
-Broadcast::channel('App.Models.User.{id}', function ($user, $id) {
-    return (int) $user->id === (int) $id;
-});
diff --git a/routes/web.php b/routes/web.php
index 9add5d7..067c4f5 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -1,20 +1,10 @@
 <?php
 
+use App\Http\Controllers\ProfileController;
 use Illuminate\Foundation\Application;
 use Illuminate\Support\Facades\Route;
 use Inertia\Inertia;
 
-/*
-|--------------------------------------------------------------------------
-| Web Routes
-|--------------------------------------------------------------------------
-|
-| Here is where you can register web routes for your application. These
-| routes are loaded by the RouteServiceProvider within a group which
-| contains the "web" middleware group. Now create something great!
-|
-*/
-
 Route::get('/', function () {
     return Inertia::render('Welcome', [
         'canLogin' => Route::has('login'),
@@ -24,4 +14,14 @@
     ]);
 });
 
+Route::get('/dashboard', function () {
+    return Inertia::render('Dashboard');
+})->middleware(['auth', 'verified'])->name('dashboard');
+
+Route::middleware('auth')->group(function () {
+    Route::get('/profile', [ProfileController::class, 'edit'])->name('profile.edit');
+    Route::patch('/profile', [ProfileController::class, 'update'])->name('profile.update');
+    Route::delete('/profile', [ProfileController::class, 'destroy'])->name('profile.destroy');
+});
+
 require __DIR__.'/auth.php';
diff --git a/tailwind.config.js b/tailwind.config.js
index 5e370b6..177cdc8 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,7 +1,7 @@
 const plugin = require('tailwindcss/plugin')
 
 /** @type {import('tailwindcss').Config} */
-module.exports = {
+export default {
   content: [
     './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
     './storage/framework/views/*.php',
@@ -75,7 +75,6 @@ module.exports = {
         },
         { values: theme('asideScrollbars') }
       )
-    }),
-    require('@tailwindcss/line-clamp')
+    })
   ]
 }
diff --git a/tests/Feature/Auth/AuthenticationTest.php b/tests/Feature/Auth/AuthenticationTest.php
index 075a4c2..13dcb7c 100644
--- a/tests/Feature/Auth/AuthenticationTest.php
+++ b/tests/Feature/Auth/AuthenticationTest.php
@@ -3,7 +3,6 @@
 namespace Tests\Feature\Auth;
 
 use App\Models\User;
-use App\Providers\RouteServiceProvider;
 use Illuminate\Foundation\Testing\RefreshDatabase;
 use Tests\TestCase;
 
@@ -11,14 +10,14 @@ class AuthenticationTest extends TestCase
 {
     use RefreshDatabase;
 
-    public function test_login_screen_can_be_rendered()
+    public function test_login_screen_can_be_rendered(): void
     {
         $response = $this->get('/login');
 
         $response->assertStatus(200);
     }
 
-    public function test_users_can_authenticate_using_the_login_screen()
+    public function test_users_can_authenticate_using_the_login_screen(): void
     {
         $user = User::factory()->create();
 
@@ -28,10 +27,10 @@ public function test_users_can_authenticate_using_the_login_screen()
         ]);
 
         $this->assertAuthenticated();
-        $response->assertRedirect(RouteServiceProvider::HOME);
+        $response->assertRedirect(route('dashboard', absolute: false));
     }
 
-    public function test_users_can_not_authenticate_with_invalid_password()
+    public function test_users_can_not_authenticate_with_invalid_password(): void
     {
         $user = User::factory()->create();
 
@@ -42,4 +41,14 @@ public function test_users_can_not_authenticate_with_invalid_password()
 
         $this->assertGuest();
     }
+
+    public function test_users_can_logout(): void
+    {
+        $user = User::factory()->create();
+
+        $response = $this->actingAs($user)->post('/logout');
+
+        $this->assertGuest();
+        $response->assertRedirect('/');
+    }
 }
diff --git a/tests/Feature/Auth/EmailVerificationTest.php b/tests/Feature/Auth/EmailVerificationTest.php
index e61810e..31671bd 100644
--- a/tests/Feature/Auth/EmailVerificationTest.php
+++ b/tests/Feature/Auth/EmailVerificationTest.php
@@ -3,7 +3,6 @@
 namespace Tests\Feature\Auth;
 
 use App\Models\User;
-use App\Providers\RouteServiceProvider;
 use Illuminate\Auth\Events\Verified;
 use Illuminate\Foundation\Testing\RefreshDatabase;
 use Illuminate\Support\Facades\Event;
@@ -14,7 +13,7 @@ class EmailVerificationTest extends TestCase
 {
     use RefreshDatabase;
 
-    public function test_email_verification_screen_can_be_rendered()
+    public function test_email_verification_screen_can_be_rendered(): void
     {
         $user = User::factory()->create([
             'email_verified_at' => null,
@@ -25,7 +24,7 @@ public function test_email_verification_screen_can_be_rendered()
         $response->assertStatus(200);
     }
 
-    public function test_email_can_be_verified()
+    public function test_email_can_be_verified(): void
     {
         $user = User::factory()->create([
             'email_verified_at' => null,
@@ -43,10 +42,10 @@ public function test_email_can_be_verified()
 
         Event::assertDispatched(Verified::class);
         $this->assertTrue($user->fresh()->hasVerifiedEmail());
-        $response->assertRedirect(RouteServiceProvider::HOME.'?verified=1');
+        $response->assertRedirect(route('dashboard', absolute: false).'?verified=1');
     }
 
-    public function test_email_is_not_verified_with_invalid_hash()
+    public function test_email_is_not_verified_with_invalid_hash(): void
     {
         $user = User::factory()->create([
             'email_verified_at' => null,
diff --git a/tests/Feature/Auth/PasswordConfirmationTest.php b/tests/Feature/Auth/PasswordConfirmationTest.php
index d2072ff..ff85721 100644
--- a/tests/Feature/Auth/PasswordConfirmationTest.php
+++ b/tests/Feature/Auth/PasswordConfirmationTest.php
@@ -10,7 +10,7 @@ class PasswordConfirmationTest extends TestCase
 {
     use RefreshDatabase;
 
-    public function test_confirm_password_screen_can_be_rendered()
+    public function test_confirm_password_screen_can_be_rendered(): void
     {
         $user = User::factory()->create();
 
@@ -19,7 +19,7 @@ public function test_confirm_password_screen_can_be_rendered()
         $response->assertStatus(200);
     }
 
-    public function test_password_can_be_confirmed()
+    public function test_password_can_be_confirmed(): void
     {
         $user = User::factory()->create();
 
@@ -31,7 +31,7 @@ public function test_password_can_be_confirmed()
         $response->assertSessionHasNoErrors();
     }
 
-    public function test_password_is_not_confirmed_with_invalid_password()
+    public function test_password_is_not_confirmed_with_invalid_password(): void
     {
         $user = User::factory()->create();
 
diff --git a/tests/Feature/Auth/PasswordResetTest.php b/tests/Feature/Auth/PasswordResetTest.php
index b2cd77a..aa50350 100644
--- a/tests/Feature/Auth/PasswordResetTest.php
+++ b/tests/Feature/Auth/PasswordResetTest.php
@@ -12,14 +12,14 @@ class PasswordResetTest extends TestCase
 {
     use RefreshDatabase;
 
-    public function test_reset_password_link_screen_can_be_rendered()
+    public function test_reset_password_link_screen_can_be_rendered(): void
     {
         $response = $this->get('/forgot-password');
 
         $response->assertStatus(200);
     }
 
-    public function test_reset_password_link_can_be_requested()
+    public function test_reset_password_link_can_be_requested(): void
     {
         Notification::fake();
 
@@ -30,7 +30,7 @@ public function test_reset_password_link_can_be_requested()
         Notification::assertSentTo($user, ResetPassword::class);
     }
 
-    public function test_reset_password_screen_can_be_rendered()
+    public function test_reset_password_screen_can_be_rendered(): void
     {
         Notification::fake();
 
@@ -47,7 +47,7 @@ public function test_reset_password_screen_can_be_rendered()
         });
     }
 
-    public function test_password_can_be_reset_with_valid_token()
+    public function test_password_can_be_reset_with_valid_token(): void
     {
         Notification::fake();
 
@@ -63,7 +63,9 @@ public function test_password_can_be_reset_with_valid_token()
                 'password_confirmation' => 'password',
             ]);
 
-            $response->assertSessionHasNoErrors();
+            $response
+                ->assertSessionHasNoErrors()
+                ->assertRedirect(route('login'));
 
             return true;
         });
diff --git a/tests/Feature/Auth/PasswordUpdateTest.php b/tests/Feature/Auth/PasswordUpdateTest.php
new file mode 100644
index 0000000..bbf079d
--- /dev/null
+++ b/tests/Feature/Auth/PasswordUpdateTest.php
@@ -0,0 +1,51 @@
+<?php
+
+namespace Tests\Feature\Auth;
+
+use App\Models\User;
+use Illuminate\Foundation\Testing\RefreshDatabase;
+use Illuminate\Support\Facades\Hash;
+use Tests\TestCase;
+
+class PasswordUpdateTest extends TestCase
+{
+    use RefreshDatabase;
+
+    public function test_password_can_be_updated(): void
+    {
+        $user = User::factory()->create();
+
+        $response = $this
+            ->actingAs($user)
+            ->from('/profile')
+            ->put('/password', [
+                'current_password' => 'password',
+                'password' => 'new-password',
+                'password_confirmation' => 'new-password',
+            ]);
+
+        $response
+            ->assertSessionHasNoErrors()
+            ->assertRedirect('/profile');
+
+        $this->assertTrue(Hash::check('new-password', $user->refresh()->password));
+    }
+
+    public function test_correct_password_must_be_provided_to_update_password(): void
+    {
+        $user = User::factory()->create();
+
+        $response = $this
+            ->actingAs($user)
+            ->from('/profile')
+            ->put('/password', [
+                'current_password' => 'wrong-password',
+                'password' => 'new-password',
+                'password_confirmation' => 'new-password',
+            ]);
+
+        $response
+            ->assertSessionHasErrors('current_password')
+            ->assertRedirect('/profile');
+    }
+}
diff --git a/tests/Feature/Auth/RegistrationTest.php b/tests/Feature/Auth/RegistrationTest.php
index 317a827..1489d0e 100644
--- a/tests/Feature/Auth/RegistrationTest.php
+++ b/tests/Feature/Auth/RegistrationTest.php
@@ -2,7 +2,6 @@
 
 namespace Tests\Feature\Auth;
 
-use App\Providers\RouteServiceProvider;
 use Illuminate\Foundation\Testing\RefreshDatabase;
 use Tests\TestCase;
 
@@ -10,14 +9,14 @@ class RegistrationTest extends TestCase
 {
     use RefreshDatabase;
 
-    public function test_registration_screen_can_be_rendered()
+    public function test_registration_screen_can_be_rendered(): void
     {
         $response = $this->get('/register');
 
         $response->assertStatus(200);
     }
 
-    public function test_new_users_can_register()
+    public function test_new_users_can_register(): void
     {
         $response = $this->post('/register', [
             'name' => 'Test User',
@@ -27,6 +26,6 @@ public function test_new_users_can_register()
         ]);
 
         $this->assertAuthenticated();
-        $response->assertRedirect(RouteServiceProvider::HOME);
+        $response->assertRedirect(route('dashboard', absolute: false));
     }
 }
diff --git a/tests/Feature/ProfileTest.php b/tests/Feature/ProfileTest.php
new file mode 100644
index 0000000..49886c3
--- /dev/null
+++ b/tests/Feature/ProfileTest.php
@@ -0,0 +1,99 @@
+<?php
+
+namespace Tests\Feature;
+
+use App\Models\User;
+use Illuminate\Foundation\Testing\RefreshDatabase;
+use Tests\TestCase;
+
+class ProfileTest extends TestCase
+{
+    use RefreshDatabase;
+
+    public function test_profile_page_is_displayed(): void
+    {
+        $user = User::factory()->create();
+
+        $response = $this
+            ->actingAs($user)
+            ->get('/profile');
+
+        $response->assertOk();
+    }
+
+    public function test_profile_information_can_be_updated(): void
+    {
+        $user = User::factory()->create();
+
+        $response = $this
+            ->actingAs($user)
+            ->patch('/profile', [
+                'name' => 'Test User',
+                'email' => 'test@example.com',
+            ]);
+
+        $response
+            ->assertSessionHasNoErrors()
+            ->assertRedirect('/profile');
+
+        $user->refresh();
+
+        $this->assertSame('Test User', $user->name);
+        $this->assertSame('test@example.com', $user->email);
+        $this->assertNull($user->email_verified_at);
+    }
+
+    public function test_email_verification_status_is_unchanged_when_the_email_address_is_unchanged(): void
+    {
+        $user = User::factory()->create();
+
+        $response = $this
+            ->actingAs($user)
+            ->patch('/profile', [
+                'name' => 'Test User',
+                'email' => $user->email,
+            ]);
+
+        $response
+            ->assertSessionHasNoErrors()
+            ->assertRedirect('/profile');
+
+        $this->assertNotNull($user->refresh()->email_verified_at);
+    }
+
+    public function test_user_can_delete_their_account(): void
+    {
+        $user = User::factory()->create();
+
+        $response = $this
+            ->actingAs($user)
+            ->delete('/profile', [
+                'password' => 'password',
+            ]);
+
+        $response
+            ->assertSessionHasNoErrors()
+            ->assertRedirect('/');
+
+        $this->assertGuest();
+        $this->assertNull($user->fresh());
+    }
+
+    public function test_correct_password_must_be_provided_to_delete_account(): void
+    {
+        $user = User::factory()->create();
+
+        $response = $this
+            ->actingAs($user)
+            ->from('/profile')
+            ->delete('/profile', [
+                'password' => 'wrong-password',
+            ]);
+
+        $response
+            ->assertSessionHasErrors('password')
+            ->assertRedirect('/profile');
+
+        $this->assertNotNull($user->fresh());
+    }
+}
diff --git a/vite.config.js b/vite.config.js
index b8aed82..20de738 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -3,11 +3,6 @@ import laravel from 'laravel-vite-plugin';
 import vue from '@vitejs/plugin-vue';
 
 export default defineConfig({
-    server: {
-        hmr: {
-            host: 'localhost',
-        },
-    },
     plugins: [
         laravel({
             input: 'resources/js/app.js',