diff --git a/app/Actions/Fortify/CreateNewUserWithTeams.php b/app/Actions/Fortify/CreateNewUserWithTeams.php
new file mode 100644
index 0000000..9788471
--- /dev/null
+++ b/app/Actions/Fortify/CreateNewUserWithTeams.php
@@ -0,0 +1,53 @@
+<?php
+
+namespace App\Actions\Fortify;
+
+use App\Models\Team;
+use App\Models\User;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Facades\Hash;
+use Illuminate\Support\Facades\Validator;
+use Laravel\Fortify\Contracts\CreatesNewUsers;
+use Laravel\Jetstream\Jetstream;
+
+class CreateNewUser implements CreatesNewUsers
+{
+    use PasswordValidationRules;
+
+    /**
+     * Create a newly registered user.
+     *
+     * @param array<string, string> $input
+     */
+    public function create(array $input): User
+    {
+        Validator::make($input, [
+            'name'     => ['required', 'string', 'max:255'],
+            'email'    => ['required', 'string', 'email', 'max:255', 'unique:users'],
+            'password' => $this->passwordRules(),
+            'terms'    => Jetstream::hasTermsAndPrivacyPolicyFeature() ? ['accepted', 'required'] : '',
+        ])->validate();
+
+        return DB::transaction(function () use ($input) {
+            return tap(User::create([
+                'name'     => $input['name'],
+                'email'    => $input['email'],
+                'password' => Hash::make($input['password']),
+            ]), function (User $user) {
+                $this->createTeam($user);
+            });
+        });
+    }
+
+    /**
+     * Create a personal team for the user.
+     */
+    protected function createTeam(User $user): void
+    {
+        $user->ownedTeams()->save(Team::forceCreate([
+            'user_id'       => $user->id,
+            'name'          => explode(' ', $user->name, 2)[0]."'s Team",
+            'personal_team' => true,
+        ]));
+    }
+}
diff --git a/app/Actions/Jetstream/AddTeamMember.php b/app/Actions/Jetstream/AddTeamMember.php
new file mode 100644
index 0000000..c3d91bc
--- /dev/null
+++ b/app/Actions/Jetstream/AddTeamMember.php
@@ -0,0 +1,82 @@
+<?php
+
+namespace App\Actions\Jetstream;
+
+use App\Models\Team;
+use App\Models\User;
+use Closure;
+use Illuminate\Support\Facades\Gate;
+use Illuminate\Support\Facades\Validator;
+use Laravel\Jetstream\Contracts\AddsTeamMembers;
+use Laravel\Jetstream\Events\AddingTeamMember;
+use Laravel\Jetstream\Events\TeamMemberAdded;
+use Laravel\Jetstream\Jetstream;
+use Laravel\Jetstream\Rules\Role;
+
+class AddTeamMember implements AddsTeamMembers
+{
+    /**
+     * Add a new team member to the given team.
+     */
+    public function add(User $user, Team $team, string $email, string $role = null): void
+    {
+        Gate::forUser($user)->authorize('addTeamMember', $team);
+
+        $this->validate($team, $email, $role);
+
+        $newTeamMember = Jetstream::findUserByEmailOrFail($email);
+
+        AddingTeamMember::dispatch($team, $newTeamMember);
+
+        $team->users()->attach(
+            $newTeamMember,
+            ['role' => $role]
+        );
+
+        TeamMemberAdded::dispatch($team, $newTeamMember);
+    }
+
+    /**
+     * Validate the add member operation.
+     */
+    protected function validate(Team $team, string $email, ?string $role): void
+    {
+        Validator::make([
+            'email' => $email,
+            'role'  => $role,
+        ], $this->rules(), [
+            'email.exists' => __('We were unable to find a registered user with this email address.'),
+        ])->after(
+            $this->ensureUserIsNotAlreadyOnTeam($team, $email)
+        )->validateWithBag('addTeamMember');
+    }
+
+    /**
+     * Get the validation rules for adding a team member.
+     *
+     * @return array<string, \Illuminate\Contracts\Validation\Rule|array|string>
+     */
+    protected function rules(): array
+    {
+        return array_filter([
+            'email' => ['required', 'email', 'exists:users'],
+            'role'  => Jetstream::hasRoles()
+                            ? ['required', 'string', new Role()]
+                            : null,
+        ]);
+    }
+
+    /**
+     * Ensure that the user is not already on the team.
+     */
+    protected function ensureUserIsNotAlreadyOnTeam(Team $team, string $email): Closure
+    {
+        return function ($validator) use ($team, $email) {
+            $validator->errors()->addIf(
+                $team->hasUserWithEmail($email),
+                'email',
+                __('This user already belongs to the team.')
+            );
+        };
+    }
+}
diff --git a/app/Actions/Jetstream/CreateTeam.php b/app/Actions/Jetstream/CreateTeam.php
new file mode 100644
index 0000000..6e6020c
--- /dev/null
+++ b/app/Actions/Jetstream/CreateTeam.php
@@ -0,0 +1,37 @@
+<?php
+
+namespace App\Actions\Jetstream;
+
+use App\Models\Team;
+use App\Models\User;
+use Illuminate\Support\Facades\Gate;
+use Illuminate\Support\Facades\Validator;
+use Laravel\Jetstream\Contracts\CreatesTeams;
+use Laravel\Jetstream\Events\AddingTeam;
+use Laravel\Jetstream\Jetstream;
+
+class CreateTeam implements CreatesTeams
+{
+    /**
+     * Validate and create a new team for the given user.
+     *
+     * @param array<string, string> $input
+     */
+    public function create(User $user, array $input): Team
+    {
+        Gate::forUser($user)->authorize('create', Jetstream::newTeamModel());
+
+        Validator::make($input, [
+            'name' => ['required', 'string', 'max:255'],
+        ])->validateWithBag('createTeam');
+
+        AddingTeam::dispatch($user);
+
+        $user->switchTeam($team = $user->ownedTeams()->create([
+            'name'          => $input['name'],
+            'personal_team' => true,
+        ]));
+
+        return $team;
+    }
+}
diff --git a/app/Actions/Jetstream/DeleteTeam.php b/app/Actions/Jetstream/DeleteTeam.php
new file mode 100644
index 0000000..680dc36
--- /dev/null
+++ b/app/Actions/Jetstream/DeleteTeam.php
@@ -0,0 +1,17 @@
+<?php
+
+namespace App\Actions\Jetstream;
+
+use App\Models\Team;
+use Laravel\Jetstream\Contracts\DeletesTeams;
+
+class DeleteTeam implements DeletesTeams
+{
+    /**
+     * Delete the given team.
+     */
+    public function delete(Team $team): void
+    {
+        $team->purge();
+    }
+}
diff --git a/app/Actions/Jetstream/DeleteUserWithTeams.php b/app/Actions/Jetstream/DeleteUserWithTeams.php
new file mode 100644
index 0000000..4b051af
--- /dev/null
+++ b/app/Actions/Jetstream/DeleteUserWithTeams.php
@@ -0,0 +1,44 @@
+<?php
+
+namespace App\Actions\Jetstream;
+
+use App\Models\Team;
+use App\Models\User;
+use Illuminate\Support\Facades\DB;
+use Laravel\Jetstream\Contracts\DeletesTeams;
+use Laravel\Jetstream\Contracts\DeletesUsers;
+
+class DeleteUser implements DeletesUsers
+{
+    /**
+     * Create a new action instance.
+     */
+    public function __construct(protected DeletesTeams $deletesTeams)
+    {
+    }
+
+    /**
+     * Delete the given user.
+     */
+    public function delete(User $user): void
+    {
+        DB::transaction(function () use ($user) {
+            $this->deleteTeams($user);
+            $user->deleteProfilePhoto();
+            $user->tokens->each->delete();
+            $user->delete();
+        });
+    }
+
+    /**
+     * Delete the teams and team associations attached to the user.
+     */
+    protected function deleteTeams(User $user): void
+    {
+        $user->teams()->detach();
+
+        $user->ownedTeams->each(function (Team $team) {
+            $this->deletesTeams->delete($team);
+        });
+    }
+}
diff --git a/app/Actions/Jetstream/InviteTeamMember.php b/app/Actions/Jetstream/InviteTeamMember.php
new file mode 100644
index 0000000..4d74abe
--- /dev/null
+++ b/app/Actions/Jetstream/InviteTeamMember.php
@@ -0,0 +1,88 @@
+<?php
+
+namespace App\Actions\Jetstream;
+
+use App\Models\Team;
+use App\Models\User;
+use Closure;
+use Illuminate\Database\Query\Builder;
+use Illuminate\Support\Facades\Gate;
+use Illuminate\Support\Facades\Mail;
+use Illuminate\Support\Facades\Validator;
+use Illuminate\Validation\Rule;
+use Laravel\Jetstream\Contracts\InvitesTeamMembers;
+use Laravel\Jetstream\Events\InvitingTeamMember;
+use Laravel\Jetstream\Jetstream;
+use Laravel\Jetstream\Mail\TeamInvitation;
+use Laravel\Jetstream\Rules\Role;
+
+class InviteTeamMember implements InvitesTeamMembers
+{
+    /**
+     * Invite a new team member to the given team.
+     */
+    public function invite(User $user, Team $team, string $email, string $role = null): void
+    {
+        Gate::forUser($user)->authorize('addTeamMember', $team);
+
+        $this->validate($team, $email, $role);
+
+        InvitingTeamMember::dispatch($team, $email, $role);
+
+        $invitation = $team->teamInvitations()->create([
+            'email' => $email,
+            'role'  => $role,
+        ]);
+
+        Mail::to($email)->send(new TeamInvitation($invitation));
+    }
+
+    /**
+     * Validate the invite member operation.
+     */
+    protected function validate(Team $team, string $email, ?string $role): void
+    {
+        Validator::make([
+            'email' => $email,
+            'role'  => $role,
+        ], $this->rules($team), [
+            'email.unique' => __('This user has already been invited to the team.'),
+        ])->after(
+            $this->ensureUserIsNotAlreadyOnTeam($team, $email)
+        )->validateWithBag('addTeamMember');
+    }
+
+    /**
+     * Get the validation rules for inviting a team member.
+     *
+     * @return array<string, \Illuminate\Contracts\Validation\Rule|array|string>
+     */
+    protected function rules(Team $team): array
+    {
+        return array_filter([
+            'email' => [
+                'required', 'email',
+                Rule::unique(Jetstream::teamInvitationModel())->where(function (Builder $query) use ($team) {
+                    $query->where('team_id', $team->id);
+                }),
+            ],
+            'role' => Jetstream::hasRoles()
+                            ? ['required', 'string', new Role()]
+                            : null,
+        ]);
+    }
+
+    /**
+     * Ensure that the user is not already on the team.
+     */
+    protected function ensureUserIsNotAlreadyOnTeam(Team $team, string $email): Closure
+    {
+        return function ($validator) use ($team, $email) {
+            $validator->errors()->addIf(
+                $team->hasUserWithEmail($email),
+                'email',
+                __('This user already belongs to the team.')
+            );
+        };
+    }
+}
diff --git a/app/Actions/Jetstream/RemoveTeamMember.php b/app/Actions/Jetstream/RemoveTeamMember.php
new file mode 100644
index 0000000..2b354ef
--- /dev/null
+++ b/app/Actions/Jetstream/RemoveTeamMember.php
@@ -0,0 +1,51 @@
+<?php
+
+namespace App\Actions\Jetstream;
+
+use App\Models\Team;
+use App\Models\User;
+use Illuminate\Auth\Access\AuthorizationException;
+use Illuminate\Support\Facades\Gate;
+use Illuminate\Validation\ValidationException;
+use Laravel\Jetstream\Contracts\RemovesTeamMembers;
+use Laravel\Jetstream\Events\TeamMemberRemoved;
+
+class RemoveTeamMember implements RemovesTeamMembers
+{
+    /**
+     * Remove the team member from the given team.
+     */
+    public function remove(User $user, Team $team, User $teamMember): void
+    {
+        $this->authorize($user, $team, $teamMember);
+
+        $this->ensureUserDoesNotOwnTeam($teamMember, $team);
+
+        $team->removeUser($teamMember);
+
+        TeamMemberRemoved::dispatch($team, $teamMember);
+    }
+
+    /**
+     * Authorize that the user can remove the team member.
+     */
+    protected function authorize(User $user, Team $team, User $teamMember): void
+    {
+        if (!Gate::forUser($user)->check('removeTeamMember', $team) &&
+            $user->id !== $teamMember->id) {
+            throw new AuthorizationException();
+        }
+    }
+
+    /**
+     * Ensure that the currently authenticated user does not own the team.
+     */
+    protected function ensureUserDoesNotOwnTeam(User $teamMember, Team $team): void
+    {
+        if ($teamMember->id === $team->owner->id) {
+            throw ValidationException::withMessages([
+                'team' => [__('You may not leave a team that you created.')],
+            ])->errorBag('removeTeamMember');
+        }
+    }
+}
diff --git a/app/Actions/Jetstream/UpdateTeamName.php b/app/Actions/Jetstream/UpdateTeamName.php
new file mode 100644
index 0000000..e0dadb8
--- /dev/null
+++ b/app/Actions/Jetstream/UpdateTeamName.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Actions\Jetstream;
+
+use App\Models\Team;
+use App\Models\User;
+use Illuminate\Support\Facades\Gate;
+use Illuminate\Support\Facades\Validator;
+use Laravel\Jetstream\Contracts\UpdatesTeamNames;
+
+class UpdateTeamName implements UpdatesTeamNames
+{
+    /**
+     * Validate and update the given team's name.
+     *
+     * @param array<string, string> $input
+     */
+    public function update(User $user, Team $team, array $input): void
+    {
+        Gate::forUser($user)->authorize('update', $team);
+
+        Validator::make($input, [
+            'name' => ['required', 'string', 'max:255'],
+        ])->validateWithBag('updateTeamName');
+
+        $team->forceFill([
+            'name' => $input['name'],
+        ])->save();
+    }
+}
diff --git a/app/Actions/Socialstream/CreateUserWithTeamsFromProvider.php b/app/Actions/Socialstream/CreateUserWithTeamsFromProvider.php
new file mode 100644
index 0000000..0dc5b9e
--- /dev/null
+++ b/app/Actions/Socialstream/CreateUserWithTeamsFromProvider.php
@@ -0,0 +1,62 @@
+<?php
+
+namespace App\Actions\Socialstream;
+
+use App\Models\Team;
+use App\Models\User;
+use Illuminate\Support\Facades\DB;
+use JoelButcher\Socialstream\Contracts\CreatesConnectedAccounts;
+use JoelButcher\Socialstream\Contracts\CreatesUserFromProvider;
+use JoelButcher\Socialstream\Socialstream;
+use Laravel\Socialite\Contracts\User as ProviderUserContract;
+
+class CreateUserFromProvider implements CreatesUserFromProvider
+{
+    /**
+     * The creates connected accounts instance.
+     */
+    public CreatesConnectedAccounts $createsConnectedAccounts;
+
+    /**
+     * Create a new action instance.
+     */
+    public function __construct(CreatesConnectedAccounts $createsConnectedAccounts)
+    {
+        $this->createsConnectedAccounts = $createsConnectedAccounts;
+    }
+
+    /**
+     * Create a new user from a social provider user.
+     */
+    public function create(string $provider, ProviderUserContract $providerUser): User
+    {
+        return DB::transaction(function () use ($provider, $providerUser) {
+            return tap(User::create([
+                'name' => $providerUser->getName(),
+                'email' => $providerUser->getEmail(),
+            ]), function (User $user) use ($provider, $providerUser) {
+                $user->markEmailAsVerified();
+
+                if (Socialstream::hasProviderAvatarsFeature() && $providerUser->getAvatar()) {
+                    $user->setProfilePhotoFromUrl($providerUser->getAvatar());
+                }
+
+                $this->createsConnectedAccounts->create($user, $provider, $providerUser);
+
+                $this->createTeam($user);
+            });
+        });
+    }
+
+    /**
+     * Create a personal team for the user.
+     */
+    protected function createTeam(User $user): void
+    {
+        $user->ownedTeams()->save(Team::forceCreate([
+            'user_id' => $user->id,
+            'name' => explode(' ', $user->name, 2)[0]."'s Team",
+            'personal_team' => true,
+        ]));
+    }
+}
diff --git a/app/Http/Controllers/ForgotPasswordController.php b/app/Http/Controllers/ForgotPasswordController.php
new file mode 100644
index 0000000..4517a24
--- /dev/null
+++ b/app/Http/Controllers/ForgotPasswordController.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Password;
+use Laravel\Jetstream\Http\Controllers\AuthenticatedSessionController;
+
+class AdminForgotPasswordController extends AuthenticatedSessionController
+{
+    public function showLinkRequestForm()
+    {
+        return view('admin.auth.forgot-password');
+    }
+
+    public function sendResetLinkEmail(Request $request)
+    {
+        $request->validate(['email' => 'required|email']);
+
+        $status = Password::broker('admins')->sendResetLink(
+            $request->only('email')
+        );
+
+        return $status === Password::RESET_LINK_SENT
+            ? back()->with(['status' => __($status)])
+            : back()->withErrors(['email' => __($status)]);
+    }
+}
diff --git a/app/Http/Controllers/LoginController.php b/app/Http/Controllers/LoginController.php
new file mode 100644
index 0000000..3cfdaa5
--- /dev/null
+++ b/app/Http/Controllers/LoginController.php
@@ -0,0 +1,41 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+
+class AdminLoginController extends Controller
+{
+    public function showLoginForm()
+    {
+        return view('loginv');
+    }
+
+    public function login(Request $request)
+    {
+        $credentials = $request->validate([
+            'email'    => ['required', 'email'],
+            'password' => ['required'],
+        ]);
+
+        if (Auth::guard('admin')->attempt($credentials)) {
+            $request->session()->regenerate();
+
+            return redirect()->intended('/admin');
+        }
+
+        return back()->withErrors([
+            'email' => 'The provided credentials do not match our records.',
+        ]);
+    }
+
+    public function logout(Request $request)
+    {
+        Auth::guard('admin')->logout();
+        $request->session()->invalidate();
+        $request->session()->regenerateToken();
+
+        return redirect('/admin/login');
+    }
+}
diff --git a/app/Http/Controllers/ResetPasswordController.php b/app/Http/Controllers/ResetPasswordController.php
new file mode 100644
index 0000000..6919be2
--- /dev/null
+++ b/app/Http/Controllers/ResetPasswordController.php
@@ -0,0 +1,44 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Auth\Events\PasswordReset;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Hash;
+use Illuminate\Support\Facades\Password;
+use Illuminate\Support\Str;
+use Laravel\Jetstream\Http\Controllers\AuthenticatedSessionController;
+
+class AdminResetPasswordController extends AuthenticatedSessionController
+{
+    public function showResetForm(Request $request, $token = null)
+    {
+        return view('admin.auth.reset-password', ['token' => $token, 'email' => $request->email]);
+    }
+
+    public function reset(Request $request)
+    {
+        $request->validate([
+            'token'    => 'required',
+            'email'    => 'required|email',
+            'password' => 'required|min:8|confirmed',
+        ]);
+
+        $status = Password::broker('admins')->reset(
+            $request->only('email', 'password', 'password_confirmation', 'token'),
+            function ($user, $password) {
+                $user->forceFill([
+                    'password' => Hash::make($password),
+                ])->setRememberToken(Str::random(60));
+
+                $user->save();
+
+                event(new PasswordReset($user));
+            }
+        );
+
+        return $status === Password::PASSWORD_RESET
+            ? redirect()->route('admin.login')->with('status', __($status))
+            : back()->withErrors(['email' => [__($status)]]);
+    }
+}
diff --git a/app/Http/Controllers/TeamInvitationController.php b/app/Http/Controllers/TeamInvitationController.php
new file mode 100644
index 0000000..d445b7c
--- /dev/null
+++ b/app/Http/Controllers/TeamInvitationController.php
@@ -0,0 +1,49 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Mail\TeamInvitation;
+use App\Models\Team;
+use App\Models\User;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Mail;
+use Illuminate\Support\Str;
+
+class TeamInvitationController extends Controller
+{
+    public function sendInvitation(Request $request)
+    {
+        $request->validate([
+            'email'   => 'required|email',
+            'team_id' => 'required|exists:teams,id',
+        ]);
+
+        $user = User::firstOrCreate(['email' => $request->email], ['password' => bcrypt(Str::random(10))]);
+        $team = Team::findOrFail($request->team_id);
+
+        $invitationToken = Str::random(32);
+        $user->invitations()->create([
+            'team_id' => $team->id,
+            'token'   => $invitationToken,
+        ]);
+
+        Mail::to($request->email)->send(new TeamInvitation($user, $team, $invitationToken));
+
+        return response()->json(['message' => 'Invitation sent successfully.']);
+    }
+
+    public function acceptInvitation(Request $request)
+    {
+        $request->validate([
+            'token' => 'required|exists:invitations,token',
+        ]);
+
+        $invitation = Invitation::where('token', $request->token)->firstOrFail();
+        $team = Team::findOrFail($invitation->team_id);
+        $team->members()->attach($invitation->user_id);
+
+        $invitation->update(['accepted' => true]);
+
+        return response()->json(['message' => 'Invitation accepted successfully.']);
+    }
+}
diff --git a/app/Listeners/CreatePersonalTeam.php b/app/Listeners/CreatePersonalTeam.php
new file mode 100644
index 0000000..c2e36e3
--- /dev/null
+++ b/app/Listeners/CreatePersonalTeam.php
@@ -0,0 +1,22 @@
+<?php
+
+namespace App\Listeners;
+
+class CreatePersonalTeam
+{
+    /**
+     * Create the event listener.
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Handle the event.
+     */
+    public function handle(object $event): void
+    {
+        //
+    }
+}
diff --git a/app/Listeners/SwitchTeam.php b/app/Listeners/SwitchTeam.php
new file mode 100644
index 0000000..d82205a
--- /dev/null
+++ b/app/Listeners/SwitchTeam.php
@@ -0,0 +1,22 @@
+<?php
+
+namespace App\Listeners;
+
+class SwitchTeam
+{
+    /**
+     * Create the event listener.
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Handle the event.
+     */
+    public function handle(object $event): void
+    {
+        // dd($event);
+    }
+}
diff --git a/resources/views/api/api-token-manager.blade.php b/resources/views/api/api-token-manager.blade.php
new file mode 100644
index 0000000..68ed51d
--- /dev/null
+++ b/resources/views/api/api-token-manager.blade.php
@@ -0,0 +1,169 @@
+<div>
+    <!-- Generate API Token -->
+    <x-form-section submit="createApiToken">
+        <x-slot name="title">
+            {{ __('Create API Token') }}
+        </x-slot>
+
+        <x-slot name="description">
+            {{ __('API tokens allow third-party services to authenticate with our application on your behalf.') }}
+        </x-slot>
+
+        <x-slot name="form">
+            <!-- Token Name -->
+            <div class="col-span-6 sm:col-span-4">
+                <x-label for="name" value="{{ __('Token Name') }}" />
+                <x-input id="name" type="text" class="mt-1 block w-full" wire:model="createApiTokenForm.name" autofocus />
+                <x-input-error for="name" class="mt-2" />
+            </div>
+
+            <!-- Token Permissions -->
+            @if (Laravel\Jetstream\Jetstream::hasPermissions())
+                <div class="col-span-6">
+                    <x-label for="permissions" value="{{ __('Permissions') }}" />
+
+                    <div class="mt-2 grid grid-cols-1 md:grid-cols-2 gap-4">
+                        @foreach (Laravel\Jetstream\Jetstream::$permissions as $permission)
+                            <label class="flex items-center">
+                                <x-checkbox wire:model="createApiTokenForm.permissions" :value="$permission"/>
+                                <span class="ms-2 text-sm text-gray-600">{{ $permission }}</span>
+                            </label>
+                        @endforeach
+                    </div>
+                </div>
+            @endif
+        </x-slot>
+
+        <x-slot name="actions">
+            <x-action-message class="me-3" on="created">
+                {{ __('Created.') }}
+            </x-action-message>
+
+            <x-button>
+                {{ __('Create') }}
+            </x-button>
+        </x-slot>
+    </x-form-section>
+
+    @if ($this->user->tokens->isNotEmpty())
+        <x-section-border />
+
+        <!-- Manage API Tokens -->
+        <div class="mt-10 sm:mt-0">
+            <x-action-section>
+                <x-slot name="title">
+                    {{ __('Manage API Tokens') }}
+                </x-slot>
+
+                <x-slot name="description">
+                    {{ __('You may delete any of your existing tokens if they are no longer needed.') }}
+                </x-slot>
+
+                <!-- API Token List -->
+                <x-slot name="content">
+                    <div class="space-y-6">
+                        @foreach ($this->user->tokens->sortBy('name') as $token)
+                            <div class="flex items-center justify-between">
+                                <div class="break-all">
+                                    {{ $token->name }}
+                                </div>
+
+                                <div class="flex items-center ms-2">
+                                    @if ($token->last_used_at)
+                                        <div class="text-sm text-gray-400">
+                                            {{ __('Last used') }} {{ $token->last_used_at->diffForHumans() }}
+                                        </div>
+                                    @endif
+
+                                    @if (Laravel\Jetstream\Jetstream::hasPermissions())
+                                        <button class="cursor-pointer ms-6 text-sm text-gray-400 underline" wire:click="manageApiTokenPermissions({{ $token->id }})">
+                                            {{ __('Permissions') }}
+                                        </button>
+                                    @endif
+
+                                    <button class="cursor-pointer ms-6 text-sm text-red-500" wire:click="confirmApiTokenDeletion({{ $token->id }})">
+                                        {{ __('Delete') }}
+                                    </button>
+                                </div>
+                            </div>
+                        @endforeach
+                    </div>
+                </x-slot>
+            </x-action-section>
+        </div>
+    @endif
+
+    <!-- Token Value Modal -->
+    <x-dialog-modal wire:model.live="displayingToken">
+        <x-slot name="title">
+            {{ __('API Token') }}
+        </x-slot>
+
+        <x-slot name="content">
+            <div>
+                {{ __('Please copy your new API token. For your security, it won\'t be shown again.') }}
+            </div>
+
+            <x-input x-ref="plaintextToken" type="text" readonly :value="$plainTextToken"
+                class="mt-4 bg-gray-100 px-4 py-2 rounded font-mono text-sm text-gray-500 w-full break-all"
+                autofocus autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
+                @showing-token-modal.window="setTimeout(() => $refs.plaintextToken.select(), 250)"
+            />
+        </x-slot>
+
+        <x-slot name="footer">
+            <x-secondary-button wire:click="$set('displayingToken', false)" wire:loading.attr="disabled">
+                {{ __('Close') }}
+            </x-secondary-button>
+        </x-slot>
+    </x-dialog-modal>
+
+    <!-- API Token Permissions Modal -->
+    <x-dialog-modal wire:model.live="managingApiTokenPermissions">
+        <x-slot name="title">
+            {{ __('API Token Permissions') }}
+        </x-slot>
+
+        <x-slot name="content">
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                @foreach (Laravel\Jetstream\Jetstream::$permissions as $permission)
+                    <label class="flex items-center">
+                        <x-checkbox wire:model="updateApiTokenForm.permissions" :value="$permission"/>
+                        <span class="ms-2 text-sm text-gray-600">{{ $permission }}</span>
+                    </label>
+                @endforeach
+            </div>
+        </x-slot>
+
+        <x-slot name="footer">
+            <x-secondary-button wire:click="$set('managingApiTokenPermissions', false)" wire:loading.attr="disabled">
+                {{ __('Cancel') }}
+            </x-secondary-button>
+
+            <x-button class="ms-3" wire:click="updateApiToken" wire:loading.attr="disabled">
+                {{ __('Save') }}
+            </x-button>
+        </x-slot>
+    </x-dialog-modal>
+
+    <!-- Delete Token Confirmation Modal -->
+    <x-confirmation-modal wire:model.live="confirmingApiTokenDeletion">
+        <x-slot name="title">
+            {{ __('Delete API Token') }}
+        </x-slot>
+
+        <x-slot name="content">
+            {{ __('Are you sure you would like to delete this API token?') }}
+        </x-slot>
+
+        <x-slot name="footer">
+            <x-secondary-button wire:click="$toggle('confirmingApiTokenDeletion')" wire:loading.attr="disabled">
+                {{ __('Cancel') }}
+            </x-secondary-button>
+
+            <x-danger-button class="ms-3" wire:click="deleteApiToken" wire:loading.attr="disabled">
+                {{ __('Delete') }}
+            </x-danger-button>
+        </x-slot>
+    </x-confirmation-modal>
+</div>
diff --git a/resources/views/api/index.blade.php b/resources/views/api/index.blade.php
new file mode 100644
index 0000000..d15b6a3
--- /dev/null
+++ b/resources/views/api/index.blade.php
@@ -0,0 +1,13 @@
+<x-app-layout>
+    <x-slot name="header">
+        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
+            {{ __('API Tokens') }}
+        </h2>
+    </x-slot>
+
+    <div>
+        <div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
+            @livewire('api.api-token-manager')
+        </div>
+    </div>
+</x-app-layout>
diff --git a/resources/views/auth/confirm-password.blade.php b/resources/views/auth/confirm-password.blade.php
new file mode 100644
index 0000000..0a109b8
--- /dev/null
+++ b/resources/views/auth/confirm-password.blade.php
@@ -0,0 +1,28 @@
+<x-guest-layout>
+    <x-authentication-card>
+        <x-slot name="logo">
+            <x-authentication-card-logo />
+        </x-slot>
+
+        <div class="mb-4 text-sm text-gray-600">
+            {{ __('This is a secure area of the application. Please confirm your password before continuing.') }}
+        </div>
+
+        <x-validation-errors class="mb-4" />
+
+        <form method="POST" action="{{ route('password.confirm') }}">
+            @csrf
+
+            <div>
+                <x-label for="password" value="{{ __('Password') }}" />
+                <x-input id="password" class="block mt-1 w-full" type="password" name="password" required autocomplete="current-password" autofocus />
+            </div>
+
+            <div class="flex justify-end mt-4">
+                <x-button class="ms-4">
+                    {{ __('Confirm') }}
+                </x-button>
+            </div>
+        </form>
+    </x-authentication-card>
+</x-guest-layout>
diff --git a/resources/views/auth/forgot-password.blade.php b/resources/views/auth/forgot-password.blade.php
new file mode 100644
index 0000000..15235f4
--- /dev/null
+++ b/resources/views/auth/forgot-password.blade.php
@@ -0,0 +1,34 @@
+<x-guest-layout>
+    <x-authentication-card>
+        <x-slot name="logo">
+            <x-authentication-card-logo />
+        </x-slot>
+
+        <div class="mb-4 text-sm text-gray-600">
+            {{ __('Forgot your password? No problem. Just let us know your email address and we will email you a password reset link that will allow you to choose a new one.') }}
+        </div>
+
+        @session('status')
+            <div class="mb-4 font-medium text-sm text-green-600">
+                {{ $value }}
+            </div>
+        @endsession
+
+        <x-validation-errors class="mb-4" />
+
+        <form method="POST" action="{{ route('password.email') }}">
+            @csrf
+
+            <div class="block">
+                <x-label for="email" value="{{ __('Email') }}" />
+                <x-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autofocus autocomplete="username" />
+            </div>
+
+            <div class="flex items-center justify-end mt-4">
+                <x-button>
+                    {{ __('Email Password Reset Link') }}
+                </x-button>
+            </div>
+        </form>
+    </x-authentication-card>
+</x-guest-layout>
diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
index 8689ce2..8866b11 100644
--- a/resources/views/auth/login.blade.php
+++ b/resources/views/auth/login.blade.php
@@ -1,52 +1,42 @@
-<x-guest-layout>
-    <x-authentication-card>
-        <x-slot name="logo">
-            <x-authentication-card-logo />
-        </x-slot>
-
-        <x-validation-errors class="mb-4" />
-
-        @if (session('status'))
-            <div class="mb-4 font-medium text-sm text-green-600">
-                {{ session('status') }}
-            </div>
-        @endif
-
-        <form method="POST" action="{{ route('login') }}">
-            @csrf
-
-            <div>
-                <x-label for="email" value="{{ __('Email') }}" />
-                <x-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autofocus />
-            </div>
-
-            <div class="mt-4">
-                <x-label for="password" value="{{ __('Password') }}" />
-                <x-input id="password" class="block mt-1 w-full" type="password" name="password" required autocomplete="current-password" />
-            </div>
-
-            <div class="block mt-4">
-                <label for="remember_me" class="flex items-center">
-                    <x-checkbox id="remember_me" name="remember" />
-                    <span class="ml-2 text-sm text-gray-600">{{ __('Remember me') }}</span>
-                </label>
-            </div>
-
-            <div class="flex items-center justify-end mt-4">
-                @if (Route::has('password.request'))
-                    <a class="underline text-sm text-gray-600 hover:text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" href="{{ route('password.request') }}">
-                        {{ __('Forgot your password?') }}
-                    </a>
-                @endif
-
-                <x-button class="ml-4">
-                    {{ __('Login') }}
-                </x-button>
-            </div>
-        </form>
-
-        @if (JoelButcher\Socialstream\Socialstream::show())
-            <x-socialstream />
-        @endif
-    </x-authentication-card>
-</x-guest-layout>
+@extends('layouts.home')
+
+@section('content')
+    <div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0">
+        <div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg">
+            <div class="mb-4 text-sm text-gray-600">
+                {{ __('Please sign in to access the admin panel.') }}
+            </div> 
+
+            <form method="POST" action="{{ route('login') }}">
+                @csrf
+
+                <div>
+                    <label class="block font-medium text-sm text-gray-700" for="email">
+                        {{ __('Email') }}
+                    </label>
+                    <input class="border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm block mt-1 w-full" id="email" type="email" name="email" required="required" autofocus="autofocus">
+                </div>
+
+                <div class="mt-4">
+                    <label class="block font-medium text-sm text-gray-700" for="password">
+                        {{ __('Password') }}
+                    </label>
+                    <input class="border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm block mt-1 w-full" id="password" type="password" name="password" required="required" autocomplete="current-password">
+                </div>
+
+                <div class="block mt-4">
+                    <label for="remember_me" class="flex items-center">
+                        <input type="checkbox" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" id="remember_me" name="remember">
+                        <span class="ml-2 text-sm text-gray-600">{{ __('Remember me') }}</span>
+                    </label>
+                </div>
+
+                <div class="flex items-center justify-end mt-4">
+                    <button type="submit" class="inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:ring ring-gray-300 disabled:opacity-25 transition ease-in-out duration-150 ml-4">
+                        {{ __('Log in') }}
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+@endsection
diff --git a/resources/views/auth/register.blade.php b/resources/views/auth/register.blade.php
index 526eeff..c3a252a 100644
--- a/resources/views/auth/register.blade.php
+++ b/resources/views/auth/register.blade.php
@@ -1,64 +1,47 @@
-<x-guest-layout>
-    <x-authentication-card>
-        <x-slot name="logo">
-            <x-authentication-card-logo />
-        </x-slot>
-
-        <x-validation-errors class="mb-4" />
-
-        <form method="POST" action="{{ route('register') }}">
-            @csrf
-
-            <div>
-                <x-label for="name" value="{{ __('Name') }}" />
-                <x-input id="name" class="block mt-1 w-full" type="text" name="name" :value="old('name')" required autofocus autocomplete="name" />
-            </div>
-
-            <div class="mt-4">
-                <x-label for="email" value="{{ __('Email') }}" />
-                <x-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autocomplete="username" />
-            </div>
-
-            <div class="mt-4">
-                <x-label for="password" value="{{ __('Password') }}" />
-                <x-input id="password" class="block mt-1 w-full" type="password" name="password" required autocomplete="new-password" />
-            </div>
-
-            <div class="mt-4">
-                <x-label for="password_confirmation" value="{{ __('Confirm Password') }}" />
-                <x-input id="password_confirmation" class="block mt-1 w-full" type="password" name="password_confirmation" required autocomplete="new-password" />
-            </div>
+@extends('layouts.home')
+
+@section('content')
+    <div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0">
+        <div>
+            <a href="/">
+                <x-application-logo class="w-20 h-20 fill-current text-gray-500" />
+            </a>
+        </div>
+
+        <div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg">
+            <form method="POST" action="{{ route('register') }}">
+                @csrf
+
+                <div>
+                    <x-label for="name" value="{{ __('Name') }}" />
+                    <x-input id="name" class="block mt-1 w-full" type="text" name="name" :value="old('name')" required autofocus />
+                </div>
 
-            @if (Laravel\Jetstream\Jetstream::hasTermsAndPrivacyPolicyFeature())
                 <div class="mt-4">
-                    <x-label for="terms">
-                        <div class="flex items-center">
-                            <x-checkbox name="terms" id="terms" required />
+                    <x-label for="email" value="{{ __('Email') }}" />
+                    <x-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required />
+                </div>
 
-                            <div class="ml-2">
-                                {!! __('I agree to the :terms_of_service and :privacy_policy', [
-                                        'terms_of_service' => '<a target="_blank" href="'.route('terms.show').'" class="underline text-sm text-gray-600 hover:text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">'.__('Terms of Service').'</a>',
-                                        'privacy_policy' => '<a target="_blank" href="'.route('policy.show').'" class="underline text-sm text-gray-600 hover:text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">'.__('Privacy Policy').'</a>',
-                                ]) !!}
-                            </div>
-                        </div>
-                    </x-label>
+                <div class="mt-4">
+                    <x-label for="password" value="{{ __('Password') }}" />
+                    <x-input id="password" class="block mt-1 w-full" type="password" name="password" required autocomplete="new-password" />
                 </div>
-            @endif
 
-            <div class="flex items-center justify-end mt-4">
-                <a class="underline text-sm text-gray-600 hover:text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" href="{{ route('login') }}">
-                    {{ __('Already registered?') }}
-                </a>
+                <div class="mt-4">
+                    <x-label for="password_confirmation" value="{{ __('Confirm Password') }}" />
+                    <x-input id="password_confirmation" class="block mt-1 w-full" type="password" name="password_confirmation" required />
+                </div>
 
-                <x-button class="ml-4">
-                    {{ __('Register') }}
-                </x-button>
-            </div>
-        </form>
+                <div class="flex items-center justify-end mt-4">
+                    <a class="underline text-sm text-gray-600 hover:text-gray-900" href="{{ route('login') }}">
+                        {{ __('Already registered?') }}
+                    </a>
 
-        @if (JoelButcher\Socialstream\Socialstream::show())
-            <x-socialstream />
-        @endif
-    </x-authentication-card>
-</x-guest-layout>
+                    <x-button class="ml-4">
+                        {{ __('Register') }}
+                    </x-button>
+                </div>
+            </form>
+        </div>
+    </div>
+@endsection
diff --git a/resources/views/auth/reset-password.blade.php b/resources/views/auth/reset-password.blade.php
new file mode 100644
index 0000000..5991e3e
--- /dev/null
+++ b/resources/views/auth/reset-password.blade.php
@@ -0,0 +1,36 @@
+<x-guest-layout>
+    <x-authentication-card>
+        <x-slot name="logo">
+            <x-authentication-card-logo />
+        </x-slot>
+
+        <x-validation-errors class="mb-4" />
+
+        <form method="POST" action="{{ route('password.update') }}">
+            @csrf
+
+            <input type="hidden" name="token" value="{{ $request->route('token') }}">
+
+            <div class="block">
+                <x-label for="email" value="{{ __('Email') }}" />
+                <x-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email', $request->email)" required autofocus autocomplete="username" />
+            </div>
+
+            <div class="mt-4">
+                <x-label for="password" value="{{ __('Password') }}" />
+                <x-input id="password" class="block mt-1 w-full" type="password" name="password" required autocomplete="new-password" />
+            </div>
+
+            <div class="mt-4">
+                <x-label for="password_confirmation" value="{{ __('Confirm Password') }}" />
+                <x-input id="password_confirmation" class="block mt-1 w-full" type="password" name="password_confirmation" required autocomplete="new-password" />
+            </div>
+
+            <div class="flex items-center justify-end mt-4">
+                <x-button>
+                    {{ __('Reset Password') }}
+                </x-button>
+            </div>
+        </form>
+    </x-authentication-card>
+</x-guest-layout>
diff --git a/resources/views/auth/two-factor-challenge.blade.php b/resources/views/auth/two-factor-challenge.blade.php
new file mode 100644
index 0000000..57e0347
--- /dev/null
+++ b/resources/views/auth/two-factor-challenge.blade.php
@@ -0,0 +1,58 @@
+<x-guest-layout>
+    <x-authentication-card>
+        <x-slot name="logo">
+            <x-authentication-card-logo />
+        </x-slot>
+
+        <div x-data="{ recovery: false }">
+            <div class="mb-4 text-sm text-gray-600" x-show="! recovery">
+                {{ __('Please confirm access to your account by entering the authentication code provided by your authenticator application.') }}
+            </div>
+
+            <div class="mb-4 text-sm text-gray-600" x-cloak x-show="recovery">
+                {{ __('Please confirm access to your account by entering one of your emergency recovery codes.') }}
+            </div>
+
+            <x-validation-errors class="mb-4" />
+
+            <form method="POST" action="{{ route('two-factor.login') }}">
+                @csrf
+
+                <div class="mt-4" x-show="! recovery">
+                    <x-label for="code" value="{{ __('Code') }}" />
+                    <x-input id="code" class="block mt-1 w-full" type="text" inputmode="numeric" name="code" autofocus x-ref="code" autocomplete="one-time-code" />
+                </div>
+
+                <div class="mt-4" x-cloak x-show="recovery">
+                    <x-label for="recovery_code" value="{{ __('Recovery Code') }}" />
+                    <x-input id="recovery_code" class="block mt-1 w-full" type="text" name="recovery_code" x-ref="recovery_code" autocomplete="one-time-code" />
+                </div>
+
+                <div class="flex items-center justify-end mt-4">
+                    <button type="button" class="text-sm text-gray-600 hover:text-gray-900 underline cursor-pointer"
+                                    x-show="! recovery"
+                                    x-on:click="
+                                        recovery = true;
+                                        $nextTick(() => { $refs.recovery_code.focus() })
+                                    ">
+                        {{ __('Use a recovery code') }}
+                    </button>
+
+                    <button type="button" class="text-sm text-gray-600 hover:text-gray-900 underline cursor-pointer"
+                                    x-cloak
+                                    x-show="recovery"
+                                    x-on:click="
+                                        recovery = false;
+                                        $nextTick(() => { $refs.code.focus() })
+                                    ">
+                        {{ __('Use an authentication code') }}
+                    </button>
+
+                    <x-button class="ms-4">
+                        {{ __('Log in') }}
+                    </x-button>
+                </div>
+            </form>
+        </div>
+    </x-authentication-card>
+</x-guest-layout>
diff --git a/resources/views/auth/verify-email.blade.php b/resources/views/auth/verify-email.blade.php
new file mode 100644
index 0000000..0572853
--- /dev/null
+++ b/resources/views/auth/verify-email.blade.php
@@ -0,0 +1,45 @@
+<x-guest-layout>
+    <x-authentication-card>
+        <x-slot name="logo">
+            <x-authentication-card-logo />
+        </x-slot>
+
+        <div class="mb-4 text-sm text-gray-600">
+            {{ __('Before continuing, could you verify your email address by clicking on the link we just emailed to you? If you didn\'t receive the email, we will gladly send you another.') }}
+        </div>
+
+        @if (session('status') == 'verification-link-sent')
+            <div class="mb-4 font-medium text-sm text-green-600">
+                {{ __('A new verification link has been sent to the email address you provided in your profile settings.') }}
+            </div>
+        @endif
+
+        <div class="mt-4 flex items-center justify-between">
+            <form method="POST" action="{{ route('verification.send') }}">
+                @csrf
+
+                <div>
+                    <x-button type="submit">
+                        {{ __('Resend Verification Email') }}
+                    </x-button>
+                </div>
+            </form>
+
+            <div>
+                <a
+                    href="{{ route('profile.show') }}"
+                    class="underline text-sm text-gray-600 hover:text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+                >
+                    {{ __('Edit Profile') }}</a>
+
+                <form method="POST" action="{{ route('logout') }}" class="inline">
+                    @csrf
+
+                    <button type="submit" class="underline text-sm text-gray-600 hover:text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 ms-2">
+                        {{ __('Log Out') }}
+                    </button>
+                </form>
+            </div>
+        </div>
+    </x-authentication-card>
+</x-guest-layout>
diff --git a/resources/views/components/action-message.blade.php b/resources/views/components/action-message.blade.php
new file mode 100644
index 0000000..a8a95f9
--- /dev/null
+++ b/resources/views/components/action-message.blade.php
@@ -0,0 +1,10 @@
+@props(['on'])
+
+<div x-data="{ shown: false, timeout: null }"
+    x-init="@this.on('{{ $on }}', () => { clearTimeout(timeout); shown = true; timeout = setTimeout(() => { shown = false }, 2000); })"
+    x-show.transition.out.opacity.duration.1500ms="shown"
+    x-transition:leave.opacity.duration.1500ms
+    style="display: none;"
+    {{ $attributes->merge(['class' => 'text-sm text-gray-600']) }}>
+    {{ $slot->isEmpty() ? 'Saved.' : $slot }}
+</div>
diff --git a/resources/views/components/action-section.blade.php b/resources/views/components/action-section.blade.php
new file mode 100644
index 0000000..93e2434
--- /dev/null
+++ b/resources/views/components/action-section.blade.php
@@ -0,0 +1,12 @@
+<div {{ $attributes->merge(['class' => 'md:grid md:grid-cols-3 md:gap-6']) }}>
+    <x-section-title>
+        <x-slot name="title">{{ $title }}</x-slot>
+        <x-slot name="description">{{ $description }}</x-slot>
+    </x-section-title>
+
+    <div class="mt-5 md:mt-0 md:col-span-2">
+        <div class="px-4 py-5 sm:p-6 bg-white shadow sm:rounded-lg">
+            {{ $content }}
+        </div>
+    </div>
+</div>
diff --git a/resources/views/components/application-logo.blade.php b/resources/views/components/application-logo.blade.php
new file mode 100644
index 0000000..b9725e6
--- /dev/null
+++ b/resources/views/components/application-logo.blade.php
@@ -0,0 +1,5 @@
+<svg viewBox="0 0 317 48" fill="none" xmlns="http://www.w3.org/2000/svg" {{ $attributes }}>
+  <path d="M74.09 30.04V13h-4.14v21H82.1v-3.96h-8.01zM95.379 19v1.77c-1.08-1.35-2.7-2.19-4.89-2.19-3.99 0-7.29 3.45-7.29 7.92s3.3 7.92 7.29 7.92c2.19 0 3.81-.84 4.89-2.19V34h3.87V19h-3.87zm-4.17 11.73c-2.37 0-4.14-1.71-4.14-4.23 0-2.52 1.77-4.23 4.14-4.23 2.4 0 4.17 1.71 4.17 4.23 0 2.52-1.77 4.23-4.17 4.23zM106.628 21.58V19h-3.87v15h3.87v-7.17c0-3.15 2.55-4.05 4.56-3.81V18.7c-1.89 0-3.78.84-4.56 2.88zM124.295 19v1.77c-1.08-1.35-2.7-2.19-4.89-2.19-3.99 0-7.29 3.45-7.29 7.92s3.3 7.92 7.29 7.92c2.19 0 3.81-.84 4.89-2.19V34h3.87V19h-3.87zm-4.17 11.73c-2.37 0-4.14-1.71-4.14-4.23 0-2.52 1.77-4.23 4.14-4.23 2.4 0 4.17 1.71 4.17 4.23 0 2.52-1.77 4.23-4.17 4.23zM141.544 19l-3.66 10.5-3.63-10.5h-4.26l5.7 15h4.41l5.7-15h-4.26zM150.354 28.09h11.31c.09-.51.15-1.02.15-1.59 0-4.41-3.15-7.92-7.59-7.92-4.71 0-7.92 3.45-7.92 7.92s3.18 7.92 8.22 7.92c2.88 0 5.13-1.17 6.54-3.21l-3.12-1.8c-.66.87-1.86 1.5-3.36 1.5-2.04 0-3.69-.84-4.23-2.82zm-.06-3c.45-1.92 1.86-3.03 3.93-3.03 1.62 0 3.24.87 3.72 3.03h-7.65zM164.516 34h3.87V12.1h-3.87V34zM185.248 34.36c3.69 0 6.9-2.01 6.9-6.3V13h-2.1v15.06c0 3.03-2.07 4.26-4.8 4.26-2.19 0-3.93-.78-4.62-2.61l-1.77 1.05c1.05 2.43 3.57 3.6 6.39 3.6zM203.124 18.64c-4.65 0-7.83 3.45-7.83 7.86 0 4.53 3.24 7.86 7.98 7.86 3.03 0 5.34-1.41 6.6-3.45l-1.74-1.02c-.81 1.44-2.46 2.55-4.83 2.55-3.18 0-5.55-1.89-5.97-4.95h13.17c.03-.3.06-.63.06-.93 0-4.11-2.85-7.92-7.44-7.92zm0 1.92c2.58 0 4.98 1.71 5.4 5.01h-11.19c.39-2.94 2.64-5.01 5.79-5.01zM221.224 20.92V19h-4.32v-4.2l-1.98.6V19h-3.15v1.92h3.15v9.09c0 3.6 2.25 4.59 6.3 3.99v-1.74c-2.91.12-4.32.33-4.32-2.25v-9.09h4.32zM225.176 22.93c0-1.62 1.59-2.37 3.15-2.37 1.44 0 2.97.57 3.6 2.1l1.65-.96c-.87-1.86-2.79-3.06-5.25-3.06-3 0-5.13 1.89-5.13 4.29 0 5.52 8.76 3.39 8.76 7.11 0 1.77-1.68 2.4-3.45 2.4-2.01 0-3.57-.99-4.11-2.52l-1.68.99c.75 1.92 2.79 3.45 5.79 3.45 3.21 0 5.43-1.77 5.43-4.32 0-5.52-8.76-3.39-8.76-7.11zM244.603 20.92V19h-4.32v-4.2l-1.98.6V19h-3.15v1.92h3.15v9.09c0 3.6 2.25 4.59 6.3 3.99v-1.74c-2.91.12-4.32.33-4.32-2.25v-9.09h4.32zM249.883 21.49V19h-1.98v15h1.98v-8.34c0-3.72 2.34-4.98 4.74-4.98v-1.92c-1.92 0-3.69.63-4.74 2.73zM263.358 18.64c-4.65 0-7.83 3.45-7.83 7.86 0 4.53 3.24 7.86 7.98 7.86 3.03 0 5.34-1.41 6.6-3.45l-1.74-1.02c-.81 1.44-2.46 2.55-4.83 2.55-3.18 0-5.55-1.89-5.97-4.95h13.17c.03-.3.06-.63.06-.93 0-4.11-2.85-7.92-7.44-7.92zm0 1.92c2.58 0 4.98 1.71 5.4 5.01h-11.19c.39-2.94 2.64-5.01 5.79-5.01zM286.848 19v2.94c-1.26-2.01-3.39-3.3-6.06-3.3-4.23 0-7.74 3.42-7.74 7.86s3.51 7.86 7.74 7.86c2.67 0 4.8-1.29 6.06-3.3V34h1.98V19h-1.98zm-5.91 13.44c-3.33 0-5.91-2.61-5.91-5.94 0-3.33 2.58-5.94 5.91-5.94s5.91 2.61 5.91 5.94c0 3.33-2.58 5.94-5.91 5.94zM309.01 18.64c-1.92 0-3.75.87-4.86 2.73-.84-1.74-2.46-2.73-4.56-2.73-1.8 0-3.42.72-4.59 2.55V19h-1.98v15H295v-8.31c0-3.72 2.16-5.13 4.32-5.13 2.13 0 3.51 1.41 3.51 4.08V34h1.98v-8.31c0-3.72 1.86-5.13 4.17-5.13 2.13 0 3.66 1.41 3.66 4.08V34h1.98v-9.36c0-3.75-2.31-6-5.61-6z" class="fill-black"/>
+  <path d="M11.395 44.428C4.557 40.198 0 32.632 0 24 0 10.745 10.745 0 24 0a23.891 23.891 0 0113.997 4.502c-.2 17.907-11.097 33.245-26.602 39.926z" fill="#6875F5"/>
+  <path d="M14.134 45.885A23.914 23.914 0 0024 48c13.255 0 24-10.745 24-24 0-3.516-.756-6.856-2.115-9.866-4.659 15.143-16.608 27.092-31.75 31.751z" fill="#6875F5"/>
+</svg>
diff --git a/resources/views/components/application-mark.blade.php b/resources/views/components/application-mark.blade.php
new file mode 100644
index 0000000..182054e
--- /dev/null
+++ b/resources/views/components/application-mark.blade.php
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" {{ $attributes }}>
+  <path d="M11.395 44.428C4.557 40.198 0 32.632 0 24 0 10.745 10.745 0 24 0a23.891 23.891 0 0113.997 4.502c-.2 17.907-11.097 33.245-26.602 39.926z" fill="#6875F5"/>
+  <path d="M14.134 45.885A23.914 23.914 0 0024 48c13.255 0 24-10.745 24-24 0-3.516-.756-6.856-2.115-9.866-4.659 15.143-16.608 27.092-31.75 31.751z" fill="#6875F5"/>
+</svg>
diff --git a/resources/views/components/authentication-card-logo.blade.php b/resources/views/components/authentication-card-logo.blade.php
new file mode 100644
index 0000000..0b59654
--- /dev/null
+++ b/resources/views/components/authentication-card-logo.blade.php
@@ -0,0 +1,6 @@
+<a href="/">
+    <svg class="w-16 h-16" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M11.395 44.428C4.557 40.198 0 32.632 0 24 0 10.745 10.745 0 24 0a23.891 23.891 0 0113.997 4.502c-.2 17.907-11.097 33.245-26.602 39.926z" fill="#6875F5"/>
+        <path d="M14.134 45.885A23.914 23.914 0 0024 48c13.255 0 24-10.745 24-24 0-3.516-.756-6.856-2.115-9.866-4.659 15.143-16.608 27.092-31.75 31.751z" fill="#6875F5"/>
+    </svg>
+</a>
diff --git a/resources/views/components/authentication-card.blade.php b/resources/views/components/authentication-card.blade.php
new file mode 100644
index 0000000..71235cf
--- /dev/null
+++ b/resources/views/components/authentication-card.blade.php
@@ -0,0 +1,9 @@
+<div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100">
+    <div>
+        {{ $logo }}
+    </div>
+
+    <div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg">
+        {{ $slot }}
+    </div>
+</div>
diff --git a/resources/views/components/banner.blade.php b/resources/views/components/banner.blade.php
new file mode 100644
index 0000000..b45c25d
--- /dev/null
+++ b/resources/views/components/banner.blade.php
@@ -0,0 +1,48 @@
+@props(['style' => session('flash.bannerStyle', 'success'), 'message' => session('flash.banner')])
+
+<div x-data="{{ json_encode(['show' => true, 'style' => $style, 'message' => $message]) }}"
+    :class="{ 'bg-indigo-500': style == 'success', 'bg-red-700': style == 'danger', 'bg-yellow-500': style == 'warning', 'bg-gray-500': style != 'success' && style != 'danger' && style != 'warning'}"
+            style="display: none;"
+            x-show="show && message"
+            x-on:banner-message.window="
+                style = event.detail.style;
+                message = event.detail.message;
+                show = true;
+            ">
+    <div class="max-w-screen-xl mx-auto py-2 px-3 sm:px-6 lg:px-8">
+        <div class="flex items-center justify-between flex-wrap">
+            <div class="w-0 flex-1 flex items-center min-w-0">
+                <span class="flex p-2 rounded-lg" :class="{ 'bg-indigo-600': style == 'success', 'bg-red-600': style == 'danger', 'bg-yellow-600': style == 'warning' }">
+                    <svg x-show="style == 'success'" class="h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                    <svg x-show="style == 'danger'" class="h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
+                    </svg>
+                    <svg x-show="style != 'success' && style != 'danger'" class="h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
+                    </svg>
+                    <svg x-show="style == 'warning'" class="h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5" fill="none" />
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4m0 4v.01 0 0 " />
+                    </svg>
+                </span>
+
+                <p class="ms-3 font-medium text-sm text-white truncate" x-text="message"></p>
+            </div>
+
+            <div class="shrink-0 sm:ms-3">
+                <button
+                    type="button"
+                    class="-me-1 flex p-2 rounded-md focus:outline-none sm:-me-2 transition"
+                    :class="{ 'hover:bg-indigo-600 focus:bg-indigo-600': style == 'success', 'hover:bg-red-600 focus:bg-red-600': style == 'danger', 'hover:bg-yellow-600 focus:bg-yellow-600': style == 'warning'}"
+                    aria-label="Dismiss"
+                    x-on:click="show = false">
+                    <svg class="h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/resources/views/components/button.blade.php b/resources/views/components/button.blade.php
new file mode 100644
index 0000000..232734c
--- /dev/null
+++ b/resources/views/components/button.blade.php
@@ -0,0 +1,3 @@
+<button {{ $attributes->merge(['type' => 'submit', 'class' => 'inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 focus:bg-gray-700 active:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:opacity-50 transition ease-in-out duration-150']) }}>
+    {{ $slot }}
+</button>
diff --git a/resources/views/components/buttons.blade.php b/resources/views/components/buttons.blade.php
new file mode 100644
index 0000000..ce6babc
--- /dev/null
+++ b/resources/views/components/buttons.blade.php
@@ -0,0 +1,10 @@
+<div class="ml-10 space-x-4">
+    <button href="/login" class="bg-gray-500">Log in</<button>
+    <button href="/register" class="bg-blue-500">Register</<button>
+    <button href="/contact" class="bg-green-500">Contact</<button>
+    <button href="/about" class="bg-yellow-500">About</<button>
+</div>
+<button href="/login" class="bg-gray-500">Log in</<button>
+<button href="/register" class="bg-blue-500">Register</<button>
+<button href="/contact" class="bg-green-500">Contact</<button>
+<button href="/about" class="bg-yellow-500">About</<button>
diff --git a/resources/views/components/checkbox.blade.php b/resources/views/components/checkbox.blade.php
new file mode 100644
index 0000000..ae71a8a
--- /dev/null
+++ b/resources/views/components/checkbox.blade.php
@@ -0,0 +1 @@
+<input type="checkbox" {!! $attributes->merge(['class' => 'rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500']) !!}>
diff --git a/resources/views/components/confirmation-modal.blade.php b/resources/views/components/confirmation-modal.blade.php
new file mode 100644
index 0000000..8967111
--- /dev/null
+++ b/resources/views/components/confirmation-modal.blade.php
@@ -0,0 +1,27 @@
+@props(['id' => null, 'maxWidth' => null])
+
+<x-modal :id="$id" :maxWidth="$maxWidth" {{ $attributes }}>
+    <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div class="sm:flex sm:items-start">
+            <div class="mx-auto shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
+                <svg class="h-6 w-6 text-red-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
+                </svg>
+            </div>
+
+            <div class="mt-3 text-center sm:mt-0 sm:ms-4 sm:text-start">
+                <h3 class="text-lg font-medium text-gray-900">
+                    {{ $title }}
+                </h3>
+
+                <div class="mt-4 text-sm text-gray-600">
+                    {{ $content }}
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="flex flex-row justify-end px-6 py-4 bg-gray-100 text-end">
+        {{ $footer }}
+    </div>
+</x-modal>
diff --git a/resources/views/components/confirms-password.blade.php b/resources/views/components/confirms-password.blade.php
new file mode 100644
index 0000000..6be56db
--- /dev/null
+++ b/resources/views/components/confirms-password.blade.php
@@ -0,0 +1,46 @@
+@props(['title' => __('Confirm Password'), 'content' => __('For your security, please confirm your password to continue.'), 'button' => __('Confirm')])
+
+@php
+    $confirmableId = md5($attributes->wire('then'));
+@endphp
+
+<span
+    {{ $attributes->wire('then') }}
+    x-data
+    x-ref="span"
+    x-on:click="$wire.startConfirmingPassword('{{ $confirmableId }}')"
+    x-on:password-confirmed.window="setTimeout(() => $event.detail.id === '{{ $confirmableId }}' && $refs.span.dispatchEvent(new CustomEvent('then', { bubbles: false })), 250);"
+>
+    {{ $slot }}
+</span>
+
+@once
+<x-dialog-modal wire:model.live="confirmingPassword">
+    <x-slot name="title">
+        {{ $title }}
+    </x-slot>
+
+    <x-slot name="content">
+        {{ $content }}
+
+        <div class="mt-4" x-data="{}" x-on:confirming-password.window="setTimeout(() => $refs.confirmable_password.focus(), 250)">
+            <x-input type="password" class="mt-1 block w-3/4" placeholder="{{ __('Password') }}" autocomplete="current-password"
+                        x-ref="confirmable_password"
+                        wire:model="confirmablePassword"
+                        wire:keydown.enter="confirmPassword" />
+
+            <x-input-error for="confirmable_password" class="mt-2" />
+        </div>
+    </x-slot>
+
+    <x-slot name="footer">
+        <x-secondary-button wire:click="stopConfirmingPassword" wire:loading.attr="disabled">
+            {{ __('Cancel') }}
+        </x-secondary-button>
+
+        <x-button class="ms-3" dusk="confirm-password-button" wire:click="confirmPassword" wire:loading.attr="disabled">
+            {{ $button }}
+        </x-button>
+    </x-slot>
+</x-dialog-modal>
+@endonce
diff --git a/resources/views/components/contact-form.blade.php b/resources/views/components/contact-form.blade.php
new file mode 100644
index 0000000..a2ac851
--- /dev/null
+++ b/resources/views/components/contact-form.blade.php
@@ -0,0 +1,27 @@
+<div>
+    <form action="/contact/send" method="POST">
+        @csrf
+        <div class="mb-4">
+            <label for="name" class="block text-gray-700 text-sm font-bold mb-2">Name:</label>
+            <input type="text" class="form-input rounded-md shadow-sm w-full" id="name" name="name" value="{{ old('name') }}" required>
+            @error('name')
+                <div class="text-red-500">{{ $message }}</div>
+            @enderror
+        </div>
+        <div class="mb-4">
+            <label for="email" class="block text-gray-700 text-sm font-bold mb-2">Email:</label>
+            <input type="email" class="form-input rounded-md shadow-sm w-full" id="email" name="email" value="{{ old('email') }}" required>
+            @error('email')
+                <div class="text-red-500">{{ $message }}</div>
+            @enderror
+        </div>
+        <div class="mb-4">
+            <label for="message" class="block text-gray-700 text-sm font-bold mb-2">Message:</label>
+            <textarea class="form-textarea rounded-md shadow-sm w-full" id="message" name="message" rows="5" required>{{ old('message') }}</textarea>
+            @error('message')
+                <div class="text-red-500">{{ $message }}</div>
+            @enderror
+        </div>
+        <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Send Message</button>
+    </form>
+</div>
diff --git a/resources/views/components/danger-button.blade.php b/resources/views/components/danger-button.blade.php
new file mode 100644
index 0000000..55831ff
--- /dev/null
+++ b/resources/views/components/danger-button.blade.php
@@ -0,0 +1,3 @@
+<button {{ $attributes->merge(['type' => 'button', 'class' => 'inline-flex items-center justify-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 transition ease-in-out duration-150']) }}>
+    {{ $slot }}
+</button>
diff --git a/resources/views/components/dialog-modal.blade.php b/resources/views/components/dialog-modal.blade.php
new file mode 100644
index 0000000..00e3581
--- /dev/null
+++ b/resources/views/components/dialog-modal.blade.php
@@ -0,0 +1,17 @@
+@props(['id' => null, 'maxWidth' => null])
+
+<x-modal :id="$id" :maxWidth="$maxWidth" {{ $attributes }}>
+    <div class="px-6 py-4">
+        <div class="text-lg font-medium text-gray-900">
+            {{ $title }}
+        </div>
+
+        <div class="mt-4 text-sm text-gray-600">
+            {{ $content }}
+        </div>
+    </div>
+
+    <div class="flex flex-row justify-end px-6 py-4 bg-gray-100 text-end">
+        {{ $footer }}
+    </div>
+</x-modal>
diff --git a/resources/views/components/dropdown-link.blade.php b/resources/views/components/dropdown-link.blade.php
new file mode 100644
index 0000000..e0f8ce1
--- /dev/null
+++ b/resources/views/components/dropdown-link.blade.php
@@ -0,0 +1 @@
+<a {{ $attributes->merge(['class' => 'block w-full px-4 py-2 text-start text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out']) }}>{{ $slot }}</a>
diff --git a/resources/views/components/dropdown.blade.php b/resources/views/components/dropdown.blade.php
new file mode 100644
index 0000000..29409e3
--- /dev/null
+++ b/resources/views/components/dropdown.blade.php
@@ -0,0 +1,47 @@
+@props(['align' => 'right', 'width' => '48', 'contentClasses' => 'py-1 bg-white', 'dropdownClasses' => ''])
+
+@php
+switch ($align) {
+    case 'left':
+        $alignmentClasses = 'ltr:origin-top-left rtl:origin-top-right start-0';
+        break;
+    case 'top':
+        $alignmentClasses = 'origin-top';
+        break;
+    case 'none':
+    case 'false':
+        $alignmentClasses = '';
+        break;
+    case 'right':
+    default:
+        $alignmentClasses = 'ltr:origin-top-right rtl:origin-top-left end-0';
+        break;
+}
+
+switch ($width) {
+    case '48':
+        $width = 'w-48';
+        break;
+}
+@endphp
+
+<div class="relative" x-data="{ open: false }" @click.away="open = false" @close.stop="open = false">
+    <div @click="open = ! open">
+        {{ $trigger }}
+    </div>
+
+    <div x-show="open"
+            x-transition:enter="transition ease-out duration-200"
+            x-transition:enter-start="transform opacity-0 scale-95"
+            x-transition:enter-end="transform opacity-100 scale-100"
+            x-transition:leave="transition ease-in duration-75"
+            x-transition:leave-start="transform opacity-100 scale-100"
+            x-transition:leave-end="transform opacity-0 scale-95"
+            class="absolute z-50 mt-2 {{ $width }} rounded-md shadow-lg {{ $alignmentClasses }} {{ $dropdownClasses }}"
+            style="display: none;"
+            @click="open = false">
+        <div class="rounded-md ring-1 ring-black ring-opacity-5 {{ $contentClasses }}">
+            {{ $content }}
+        </div>
+    </div>
+</div>
diff --git a/resources/views/components/footer.blade.php b/resources/views/components/footer.blade.php
new file mode 100644
index 0000000..3a73e81
--- /dev/null
+++ b/resources/views/components/footer.blade.php
@@ -0,0 +1,20 @@
+<footer class="bg-opacity-70">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 bg-opacity-80">
+        <div class="flex justify-between items-center bg-opacity-80">
+            <div>
+                <a href="/" class="text-lg font-semibold">{{ config('app.name') }}</a>
+            </div>
+            <nav>
+                <ul class="flex space-x-4">
+	            <li><a href="/about" class="hover:text-gray-300">About Us</a></li>
+                    <li><a href="/privacy" class="hover:text-gray-300">Privacy</a></li>
+                    <li><a href="/terms-and-conditions" class="hover:text-gray-300">Terms &amp; Conditions</a></li>
+                    <li><a href="https://wa.me/447706007407" class="hover:text-gray-300">Contact on WhatsApp</a></li>
+                </ul>
+            </nav>
+        </div>
+        <div class="text-center">
+            <p>&copy; {{ date('Y') }} {{ config('app.name') }}. All rights reserved.</p>
+        </div>
+    </div>
+</footer>
diff --git a/resources/views/components/form-section.blade.php b/resources/views/components/form-section.blade.php
new file mode 100644
index 0000000..9dd4e0e
--- /dev/null
+++ b/resources/views/components/form-section.blade.php
@@ -0,0 +1,24 @@
+@props(['submit'])
+
+<div {{ $attributes->merge(['class' => 'md:grid md:grid-cols-3 md:gap-6']) }}>
+    <x-section-title>
+        <x-slot name="title">{{ $title }}</x-slot>
+        <x-slot name="description">{{ $description }}</x-slot>
+    </x-section-title>
+
+    <div class="mt-5 md:mt-0 md:col-span-2">
+        <form wire:submit="{{ $submit }}">
+            <div class="px-4 py-5 bg-white sm:p-6 shadow {{ isset($actions) ? 'sm:rounded-tl-md sm:rounded-tr-md' : 'sm:rounded-md' }}">
+                <div class="grid grid-cols-6 gap-6">
+                    {{ $form }}
+                </div>
+            </div>
+
+            @if (isset($actions))
+                <div class="flex items-center justify-end px-4 py-3 bg-gray-50 text-end sm:px-6 shadow sm:rounded-bl-md sm:rounded-br-md">
+                    {{ $actions }}
+                </div>
+            @endif
+        </form>
+    </div>
+</div>
diff --git a/resources/views/components/header.blade.php b/resources/views/components/header.blade.php
new file mode 100644
index 0000000..6a79b8d
--- /dev/null
+++ b/resources/views/components/header.blade.php
@@ -0,0 +1,27 @@
+<div class="bg-gray-800">
+    <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" aria-label="Top">
+        <div class="w-full py-6 flex items-center justify-between border-b border-gray-500 lg:border-none">
+            <div class="flex items-center">
+                <a href="/">
+                    <img class="h-10 w-auto" src="{{ asset('images/logo.svg') }}" alt="Liberu Genealogy">
+                </a>
+                <div class="hidden ml-10 space-x-8 lg:block">
+                    <a href="/about" class="text-base font-medium text-white hover:text-gray-300">About</a>
+                    <a href="/services" class="text-base font-medium text-white hover:text-gray-300">Services</a>
+                    <a href="/contact" class="text-base font-medium text-white hover:text-gray-300">Contact</a>
+                </div>
+            </div>
+            <div class="ml-10 space-x-4">
+                <a href="/login" class="inline-block bg-gray-500 py-2 px-4 border border-transparent rounded-md text-base font-medium text-white hover:bg-opacity-75">Log in</a>
+                <a href="/register" class="inline-block bg-blue-500 py-2 px-4 border border-transparent rounded-md text-base font-medium text-white hover:bg-opacity-75">Register</a>
+            </div>
+        </div>
+        <div class="py-4 flex flex-wrap justify-center space-x-6 lg:hidden">
+            <a href="/about" class="text-base font-medium text-white hover:text-gray-300">About</a>
+            <a href="/services" class="text-base font-medium text-white hover:text-gray-300">Services</a>
+            <a href="/contact" class="text-base font-medium text-white hover:text-gray-300">Contact</a>
+        </div>
+    </nav>
+</div>
+@include('components.buttons')
+@include('components.buttons')
diff --git a/resources/views/components/home-header.blade.php b/resources/views/components/home-header.blade.php
new file mode 100644
index 0000000..4ae6481
--- /dev/null
+++ b/resources/views/components/home-header.blade.php
@@ -0,0 +1,25 @@
+    <header>
+    <nav class="navbar navbar-expand-lg navbar-light bg-light mb-8">
+        <div class="container-fluid">
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav">
+                    <li class="nav-item">
+                        <a class="nav-link active" aria-current="page" href="#">Home</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#">Features</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#">Pricing</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#">About</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+</header>
diff --git a/resources/views/components/home-navbar.blade.php b/resources/views/components/home-navbar.blade.php
new file mode 100644
index 0000000..674d1c3
--- /dev/null
+++ b/resources/views/components/home-navbar.blade.php
@@ -0,0 +1,78 @@
+<style>
+    .btn-nav:hover {
+        color: #f7f7f7; /* Couleur du texte au survol */
+    }
+</style>
+
+    <nav class="bg-green-900 fixed w-full z-10"  x-data="{ isOpen: false }">
+        <div class="container mx-auto flex justify-between items-center py-4">
+            <a class="navbar-brand flex items-center" href="/">
+                <img src="{{ asset('/build/images/logo1.svg') }}" alt="Logo" class="h-8">
+            </a>
+            <button onclick="toggleMenu()" class="lg:hidden text-white focus:outline-none">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="h-6 w-6 fill-current">
+                    <path fill-rule="evenodd" d="M4 6h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 5h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 5h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
+                </svg>
+            </button>
+            <div class="hidden lg:flex lg:items-center lg:w-auto">
+                <a href="/" class="btn-nav">Home</a>
+                <span class="mx-2"></span>
+                <a href="/contact" class="btn-nav">Contact</a>
+                <span class="mx-2"></span>
+                <a href="/about" class="btn-nav">About</a>
+                <span class="mx-2"></span>
+                @if(auth()->check())
+                    <div class="relative inline-block text-left">
+                        <button onclick="toggleDropdown()" class="btn-nav">
+                            <span class="text-white">
+                                <strong>Welcome, {{ auth()->user()->name }}</strong>
+                            </span>
+                        </button>
+                        <div class="ml-3 absolute hidden" id="moreDropdown">
+                            <a href="{{ route('filament.admin.tenant')}}" class="btn-nav">Dashboard</a>
+                        </div>
+                    </div>
+                @else
+                    <a href="/login" class="btn-nav">Login</a>
+                    <span class="mx-2"></span>
+                    <a href="/register" class="btn-nav">Register</a>
+                @endif
+            </div>
+            <div id="mobile-menu" class="mobile-menu-container fixed bg-green-700 hidden" x-show="isOpen" @click.away="isOpen = false">
+                <div class="mobile-menu-content">
+                    <!-- Navigation Links -->
+                    <a href="/home" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out">Home</a>
+                    @if(auth()->check())
+                    <div class="relative inline-block text-left">
+                        <button onclick="toggleDropdown()" class="btn-nav">
+                            <span class="text-white">
+                                <strong>Welcome, {{ auth()->user()->name }}</strong>
+                            </span>
+                        </button>
+                        <div class="ml-3 absolute hidden" id="moreDropdown">
+                            <a href="{{ route('filament.admin.tenant')}}" class="btn-nav">Dashboard</a>
+                        </div>
+                    </div>
+                @else
+                    <a href="/login" class="btn-nav">Login</a>
+                    <span class="mx-2"></span>
+                    <a href="/register" class="btn-nav">Register</a>
+                @endif
+                    <a href="/about" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out">About</a>
+                    <a href="/contact" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out">Contact</a>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <script>
+        function toggleDropdown() {
+            var dropdownMenu = document.getElementById("moreDropdown");
+            dropdownMenu.classList.toggle("hidden");
+        }
+
+        function toggleMenu() {
+            var dropdownMenu = document.getElementById("mobile-menu");
+            dropdownMenu.classList.toggle("hidden");
+        }
+    </script>
diff --git a/resources/views/components/input-error.blade.php b/resources/views/components/input-error.blade.php
new file mode 100644
index 0000000..b5ad968
--- /dev/null
+++ b/resources/views/components/input-error.blade.php
@@ -0,0 +1,5 @@
+@props(['for'])
+
+@error($for)
+    <p {{ $attributes->merge(['class' => 'text-sm text-red-600']) }}>{{ $message }}</p>
+@enderror
diff --git a/resources/views/components/input.blade.php b/resources/views/components/input.blade.php
new file mode 100644
index 0000000..18c4b31
--- /dev/null
+++ b/resources/views/components/input.blade.php
@@ -0,0 +1,3 @@
+@props(['disabled' => false])
+
+<input {{ $disabled ? 'disabled' : '' }} {!! $attributes->merge(['class' => 'border-gray-300 focus:border-indigo-500 text-gray-700 focus:ring-indigo-500 rounded-md shadow-sm']) !!}>
diff --git a/resources/views/components/label.blade.php b/resources/views/components/label.blade.php
new file mode 100644
index 0000000..1cc65e2
--- /dev/null
+++ b/resources/views/components/label.blade.php
@@ -0,0 +1,5 @@
+@props(['value'])
+
+<label {{ $attributes->merge(['class' => 'block font-medium text-sm text-gray-700']) }}>
+    {{ $value ?? $slot }}
+</label>
diff --git a/resources/views/components/manage_section.blade.php b/resources/views/components/manage_section.blade.php
new file mode 100644
index 0000000..f2f7f34
--- /dev/null
+++ b/resources/views/components/manage_section.blade.php
@@ -0,0 +1,24 @@
+<div class="container mx-auto mt-2">
+    <h2 class="text-2xl font-bold mb-4">Manage Your Genealogy</h2>
+    <p class="mb-8">Explore and manage your family tree with ease.</p>
+    <div class="manage-section grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div class="card bg-white shadow-md hover:shadow-lg rounded-lg cursor-pointer transition transform hover:-translate-y-1" wire:click="navigateToFamilyTree">
+            <div class="card-body p-4">
+                <h5 class="text-lg font-bold mb-2">Family Tree</h5>
+                <p class="text-gray-700">View and edit your family tree.</p>
+            </div>
+        </div>
+        <div class="card bg-white shadow-md hover:shadow-lg rounded-lg cursor-pointer transition transform hover:-translate-y-1" wire:click="navigateToRecords">
+            <div class="card-body p-4">
+                <h5 class="text-lg font-bold mb-2">Records</h5>
+                <p class="text-gray-700">Access and manage historical records.</p>
+            </div>
+        </div>
+        <div class="card bg-white shadow-md hover:shadow-lg rounded-lg cursor-pointer transition transform hover:-translate-y-1" wire:click="navigateToSettings">
+            <div class="card-body p-4">
+                <h5 class="text-lg font-bold mb-2">Settings</h5>
+                <p class="text-gray-700">Configure your account and preferences.</p>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/resources/views/components/modal.blade.php b/resources/views/components/modal.blade.php
new file mode 100644
index 0000000..b1c1e68
--- /dev/null
+++ b/resources/views/components/modal.blade.php
@@ -0,0 +1,43 @@
+@props(['id', 'maxWidth'])
+
+@php
+$id = $id ?? md5($attributes->wire('model'));
+
+$maxWidth = [
+    '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',
+][$maxWidth ?? '2xl'];
+@endphp
+
+<div
+    x-data="{ show: @entangle($attributes->wire('model')) }"
+    x-on:close.stop="show = false"
+    x-on:keydown.escape.window="show = false"
+    x-show="show"
+    id="{{ $id }}"
+    class="jetstream-modal fixed inset-0 overflow-y-auto px-4 py-6 sm:px-0 z-50"
+    style="display: none;"
+>
+    <div x-show="show" class="fixed inset-0 transform transition-all" x-on:click="show = false" x-transition:enter="ease-out duration-300"
+                    x-transition:enter-start="opacity-0"
+                    x-transition:enter-end="opacity-100"
+                    x-transition:leave="ease-in duration-200"
+                    x-transition:leave-start="opacity-100"
+                    x-transition:leave-end="opacity-0">
+        <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
+    </div>
+
+    <div x-show="show" class="mb-6 bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full {{ $maxWidth }} sm:mx-auto"
+                    x-trap.inert.noscroll="show"
+                    x-transition:enter="ease-out duration-300"
+                    x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                    x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
+                    x-transition:leave="ease-in duration-200"
+                    x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
+                    x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
+        {{ $slot }}
+    </div>
+</div>
diff --git a/resources/views/components/nav-link.blade.php b/resources/views/components/nav-link.blade.php
new file mode 100644
index 0000000..5c101a2
--- /dev/null
+++ b/resources/views/components/nav-link.blade.php
@@ -0,0 +1,11 @@
+@props(['active'])
+
+@php
+$classes = ($active ?? false)
+            ? 'inline-flex items-center px-1 pt-1 border-b-2 border-indigo-400 text-sm font-medium leading-5 text-gray-900 focus:outline-none focus:border-indigo-700 transition duration-150 ease-in-out'
+            : 'inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out';
+@endphp
+
+<a {{ $attributes->merge(['class' => $classes]) }}>
+    {{ $slot }}
+</a>
diff --git a/resources/views/components/products_section.blade.php b/resources/views/components/products_section.blade.php
new file mode 100644
index 0000000..9bc9d3f
--- /dev/null
+++ b/resources/views/components/products_section.blade.php
@@ -0,0 +1,18 @@
+<div>
+    <section class="products-section">
+        <h2>Our Products</h2>
+        <p>Discover our range of genealogy tools designed to help you explore your ancestry.</p>
+        <div class="products-grid">
+            @foreach($products as $product)
+                <div class="product-card">
+                    <img src="{{ $product->image }}" alt="{{ $product->name }}">
+                    <div class="product-info">
+                        <h3>{{ $product->name }}</h3>
+                        <p>{{ $product->description }}</p>
+                        <button wire:click="addToCart('{{ $product->id }}')">Add to Cart</button>
+                    </div>
+                </div>
+            @endforeach
+        </div>
+    </section>
+</div>
diff --git a/resources/views/components/responsive-nav-link.blade.php b/resources/views/components/responsive-nav-link.blade.php
new file mode 100644
index 0000000..43b91e7
--- /dev/null
+++ b/resources/views/components/responsive-nav-link.blade.php
@@ -0,0 +1,11 @@
+@props(['active'])
+
+@php
+$classes = ($active ?? false)
+            ? 'block w-full ps-3 pe-4 py-2 border-l-4 border-indigo-400 text-start text-base font-medium text-indigo-700 bg-indigo-50 focus:outline-none focus:text-indigo-800 focus:bg-indigo-100 focus:border-indigo-700 transition duration-150 ease-in-out'
+            : 'block w-full ps-3 pe-4 py-2 border-l-4 border-transparent text-start text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300 transition duration-150 ease-in-out';
+@endphp
+
+<a {{ $attributes->merge(['class' => $classes]) }}>
+    {{ $slot }}
+</a>
diff --git a/resources/views/components/secondary-button.blade.php b/resources/views/components/secondary-button.blade.php
new file mode 100644
index 0000000..b32b69f
--- /dev/null
+++ b/resources/views/components/secondary-button.blade.php
@@ -0,0 +1,3 @@
+<button {{ $attributes->merge(['type' => 'button', 'class' => 'inline-flex items-center px-4 py-2 bg-white border border-gray-300 rounded-md font-semibold text-xs text-gray-700 uppercase tracking-widest shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:opacity-25 transition ease-in-out duration-150']) }}>
+    {{ $slot }}
+</button>
diff --git a/resources/views/components/section-border.blade.php b/resources/views/components/section-border.blade.php
new file mode 100644
index 0000000..414ade6
--- /dev/null
+++ b/resources/views/components/section-border.blade.php
@@ -0,0 +1,5 @@
+<div class="hidden sm:block">
+    <div class="py-8">
+        <div class="border-t border-gray-200"></div>
+    </div>
+</div>
diff --git a/resources/views/components/section-title.blade.php b/resources/views/components/section-title.blade.php
new file mode 100644
index 0000000..72e5193
--- /dev/null
+++ b/resources/views/components/section-title.blade.php
@@ -0,0 +1,13 @@
+<div class="md:col-span-1 flex justify-between">
+    <div class="px-4 sm:px-0">
+        <h3 class="text-lg font-medium text-gray-900">{{ $title }}</h3>
+
+        <p class="mt-1 text-sm text-gray-600">
+            {{ $description }}
+        </p>
+    </div>
+
+    <div class="px-4 sm:px-0">
+        {{ $aside ?? '' }}
+    </div>
+</div>
diff --git a/resources/views/components/switchable-team.blade.php b/resources/views/components/switchable-team.blade.php
new file mode 100644
index 0000000..881bd83
--- /dev/null
+++ b/resources/views/components/switchable-team.blade.php
@@ -0,0 +1,21 @@
+@props(['team', 'component' => 'dropdown-link'])
+
+<form method="POST" action="{{ route('current-team.update') }}" x-data>
+    @method('PUT')
+    @csrf
+
+    <!-- Hidden Team ID -->
+    <input type="hidden" name="team_id" value="{{ $team->id }}">
+
+    <x-dynamic-component :component="$component" href="#" x-on:click.prevent="$root.submit();">
+        <div class="flex items-center">
+            @if (Auth::user()->isCurrentTeam($team))
+                <svg class="me-2 h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+            @endif
+
+            <div class="truncate">{{ $team->name }}</div>
+        </div>
+    </x-dynamic-component>
+</form>
diff --git a/resources/views/components/validation-errors.blade.php b/resources/views/components/validation-errors.blade.php
index a62b46e..ef753f5 100644
--- a/resources/views/components/validation-errors.blade.php
+++ b/resources/views/components/validation-errors.blade.php
@@ -1,5 +1,4 @@
-@if ($errors->has('socialstream'))
-@elseif ($errors->any())
+@if ($errors->any())
     <div {{ $attributes }}>
         <div class="font-medium text-red-600">{{ __('Whoops! Something went wrong.') }}</div>
 
diff --git a/resources/views/components/welcome.blade.php b/resources/views/components/welcome.blade.php
new file mode 100644
index 0000000..298e56e
--- /dev/null
+++ b/resources/views/components/welcome.blade.php
@@ -0,0 +1,96 @@
+<div class="p-6 lg:p-8 bg-white border-b border-gray-200">
+    <x-application-logo class="block h-12 w-auto" />
+
+    <h1 class="mt-8 text-2xl font-medium text-gray-900">
+        Welcome to your Jetstream application!
+    </h1>
+
+    <p class="mt-6 text-gray-500 leading-relaxed">
+        Laravel Jetstream provides a beautiful, robust starting point for your next Laravel application. Laravel is designed
+        to help you build your application using a development environment that is simple, powerful, and enjoyable. We believe
+        you should love expressing your creativity through programming, so we have spent time carefully crafting the Laravel
+        ecosystem to be a breath of fresh air. We hope you love it.
+    </p>
+</div>
+
+<div class="bg-gray-200 bg-opacity-25 grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8 p-6 lg:p-8">
+    <div>
+        <div class="flex items-center">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="w-6 h-6 stroke-gray-400">
+                <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>
+            <h2 class="ms-3 text-xl font-semibold text-gray-900">
+                <a href="https://laravel.com/docs">Documentation</a>
+            </h2>
+        </div>
+
+        <p class="mt-4 text-gray-500 text-sm leading-relaxed">
+            Laravel has wonderful documentation covering every aspect of the framework. Whether you're new to the framework or have previous experience, we recommend reading all of the documentation from beginning to end.
+        </p>
+
+        <p class="mt-4 text-sm">
+            <a href="https://laravel.com/docs" class="inline-flex items-center font-semibold text-indigo-700">
+                Explore the documentation
+
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="ms-1 w-5 h-5 fill-indigo-500">
+                    <path fill-rule="evenodd" d="M5 10a.75.75 0 01.75-.75h6.638L10.23 7.29a.75.75 0 111.04-1.08l3.5 3.25a.75.75 0 010 1.08l-3.5 3.25a.75.75 0 11-1.04-1.08l2.158-1.96H5.75A.75.75 0 015 10z" clip-rule="evenodd" />
+                </svg>
+            </a>
+        </p>
+    </div>
+
+    <div>
+        <div class="flex items-center">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="w-6 h-6 stroke-gray-400">
+                <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>
+            <h2 class="ms-3 text-xl font-semibold text-gray-900">
+                <a href="https://laracasts.com">Laracasts</a>
+            </h2>
+        </div>
+
+        <p class="mt-4 text-gray-500 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>
+
+        <p class="mt-4 text-sm">
+            <a href="https://laracasts.com" class="inline-flex items-center font-semibold text-indigo-700">
+                Start watching Laracasts
+
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="ms-1 w-5 h-5 fill-indigo-500">
+                    <path fill-rule="evenodd" d="M5 10a.75.75 0 01.75-.75h6.638L10.23 7.29a.75.75 0 111.04-1.08l3.5 3.25a.75.75 0 010 1.08l-3.5 3.25a.75.75 0 11-1.04-1.08l2.158-1.96H5.75A.75.75 0 015 10z" clip-rule="evenodd" />
+                </svg>
+            </a>
+        </p>
+    </div>
+
+    <div>
+        <div class="flex items-center">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="w-6 h-6 stroke-gray-400">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
+            </svg>
+            <h2 class="ms-3 text-xl font-semibold text-gray-900">
+                <a href="https://tailwindcss.com/">Tailwind</a>
+            </h2>
+        </div>
+
+        <p class="mt-4 text-gray-500 text-sm leading-relaxed">
+            Laravel Jetstream is built with Tailwind, an amazing utility first CSS framework that doesn't get in your way. You'll be amazed how easily you can build and maintain fresh, modern designs with this wonderful framework at your fingertips.
+        </p>
+    </div>
+
+    <div>
+        <div class="flex items-center">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="w-6 h-6 stroke-gray-400">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
+            </svg>
+            <h2 class="ms-3 text-xl font-semibold text-gray-900">
+                Authentication
+            </h2>
+        </div>
+
+        <p class="mt-4 text-gray-500 text-sm leading-relaxed">
+            Authentication and registration views are included with Laravel Jetstream, as well as support for user email verification and resetting forgotten passwords. So, you're free to get started with what matters most: building your application.
+        </p>
+    </div>
+</div>
diff --git a/resources/views/components/why_us_section.blade.php b/resources/views/components/why_us_section.blade.php
new file mode 100644
index 0000000..82d3001
--- /dev/null
+++ b/resources/views/components/why_us_section.blade.php
@@ -0,0 +1,17 @@
+<div>
+    <section class="why-us-section">
+        <h2>{{ $title }}</h2>
+        <p>{{ $description }}</p>
+        <div class="features">
+            @foreach($features as $feature)
+                <div class="feature-card">
+                    <img src="{{ $feature['image'] }}" alt="{{ $feature['title'] }}">
+                    <div class="feature-content">
+                        <h3>{{ $feature['title'] }}</h3>
+                        <p>{{ $feature['description'] }}</p>
+                    </div>
+                </div>
+            @endforeach
+        </div>
+    </section>
+</div>