diff --git a/app/Actions/AttemptToAuthenticateSocialite.php b/app/Actions/AttemptToAuthenticateSocialite.php
new file mode 100644
index 00000000000..f034d4e5670
--- /dev/null
+++ b/app/Actions/AttemptToAuthenticateSocialite.php
@@ -0,0 +1,265 @@
+<?php
+
+namespace App\Actions;
+
+use App\Actions\Fortify\CreateNewUser;
+use App\Models\User;
+use App\Models\UserToken;
+use Illuminate\Auth\Events\Failed;
+use Illuminate\Auth\Events\Registered;
+use Illuminate\Contracts\Auth\StatefulGuard;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\App;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Str;
+use Illuminate\Validation\ValidationException;
+use Laravel\Fortify\Events\TwoFactorAuthenticationChallenged;
+use Laravel\Fortify\LoginRateLimiter;
+use Laravel\Socialite\Contracts\Provider;
+use Laravel\Socialite\Contracts\User as SocialiteUser;
+use Laravel\Socialite\Facades\Socialite;
+use Laravel\Socialite\One\User as OAuth1User;
+use Laravel\Socialite\Two\AbstractProvider;
+use Laravel\Socialite\Two\User as OAuth2User;
+use LaravelWebauthn\Facades\Webauthn;
+
+class AttemptToAuthenticateSocialite
+{
+    /**
+     * The guard implementation.
+     *
+     * @var \Illuminate\Contracts\Auth\StatefulGuard
+     */
+    protected $guard;
+
+    /**
+     * The login rate limiter instance.
+     *
+     * @var \Laravel\Fortify\LoginRateLimiter
+     */
+    protected $limiter;
+
+    /**
+     * Create a new action instance.
+     *
+     * @param  \Illuminate\Contracts\Auth\StatefulGuard  $guard
+     * @param  \Laravel\Fortify\LoginRateLimiter  $limiter
+     * @return void
+     */
+    public function __construct(StatefulGuard $guard, LoginRateLimiter $limiter)
+    {
+        $this->guard = $guard;
+        $this->limiter = $limiter;
+    }
+
+    /**
+     * Handle the incoming request.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @param  callable  $next
+     * @return mixed
+     */
+    public function handle(Request $request, callable $next)
+    {
+        $driver = $request->route()->parameter('driver');
+
+        $provider = $this->getSocialiteProvider($driver);
+        $user = $this->authenticateUser($request, $driver, $provider->user());
+
+        if ((optional($user)->two_factor_secret && ! is_null(optional($user)->two_factor_confirmed_at))
+            || Webauthn::enabled($user)) {
+            return $this->twoFactorChallengeResponse($request, $user);
+        }
+
+        $this->guard->login($user, $request->session()->pull('login.remember', false));
+
+        return $next($request);
+    }
+
+    /**
+     * Get the provider.
+     *
+     * @param  string  $driver
+     * @return \Laravel\Socialite\Contracts\Provider
+     */
+    private function getSocialiteProvider(string $driver): Provider
+    {
+        $provider = Socialite::driver($driver);
+
+        if (App::environment('local') && $provider instanceof AbstractProvider) {
+            $provider->setHttpClient(new \GuzzleHttp\Client(['verify' => false]));
+        }
+
+        return $provider;
+    }
+
+    /**
+     * Authenticate the user.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @param  string  $driver
+     * @param  \Laravel\Socialite\Contracts\User  $socialite
+     * @return User
+     */
+    private function authenticateUser(Request $request, string $driver, SocialiteUser $socialite): User
+    {
+        if ($userToken = UserToken::where([
+            'driver_id' => $socialite->getId(),
+            'driver' => $driver,
+        ])->first()) {
+            // Association already exist
+
+            $user = $userToken->user;
+
+            $this->checkUserAssociation($request, $user, $driver);
+        } else {
+            // New association: create user or add token to existing user
+            $user = tap($this->getUserOrCreate($socialite), function ($user) use ($driver, $socialite) {
+                $this->createUserToken($user, $driver, $socialite);
+            });
+        }
+
+        return $user;
+    }
+
+    /**
+     * Check if the user is logged in and if the user is the same as the one.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @param  \App\Models\User  $user
+     * @param  string  $driver
+     * @return void
+     */
+    private function checkUserAssociation(Request $request, User $user, string $driver)
+    {
+        if (($userId = Auth::id()) && $userId !== $user->id) {
+            $this->throwFailedAuthenticationException($request, $driver, __('This provider is already associated with another account'));
+        }
+    }
+
+    /**
+     * Get authenticated user.
+     *
+     * @param  SocialiteUser  $socialite
+     * @return User
+     */
+    private function getUserOrCreate(SocialiteUser $socialite): User
+    {
+        if ($user = Auth::user()) {
+            return $user;
+        }
+
+        return $this->createUser($socialite);
+    }
+
+    /**
+     * Create new user.
+     *
+     * @param  SocialiteUser  $socialite
+     * @return User
+     */
+    private function createUser(SocialiteUser $socialite): User
+    {
+        $names = Str::of($socialite->getName())->split('/ /', 2);
+        $data = [
+            'email' => $socialite->getEmail(),
+            'first_name' => $names[0],
+            'last_name' => $names[1] ?? $names[0],
+            'locale' => App::getLocale(),
+            'terms' => true,
+        ];
+
+        event(new Registered($user = app(CreateNewUser::class)->create($data)));
+
+        return $user;
+    }
+
+    /**
+     * Create the user token register.
+     *
+     * @param  User  $user
+     * @param  string  $driver
+     * @param  SocialiteUser  $socialite
+     * @return UserToken
+     */
+    private function createUserToken(User $user, string $driver, SocialiteUser $socialite): UserToken
+    {
+        $token = [
+            'driver' => $driver,
+            'driver_id' => $socialite->getId(),
+            'user_id' => $user->id,
+            'email' => $socialite->getEmail(),
+        ];
+
+        if ($socialite instanceof OAuth1User) {
+            $token['token'] = $socialite->token;
+            $token['token_secret'] = $socialite->tokenSecret;
+            $token['format'] = 'oauth1';
+        } elseif ($socialite instanceof OAuth2User) {
+            $token['token'] = $socialite->token;
+            $token['refresh_token'] = $socialite->refreshToken;
+            $token['expires_in'] = $socialite->expiresIn;
+            $token['format'] = 'oauth2';
+        } else {
+            throw new \UnexpectedValueException('authentication format not supported');
+        }
+
+        return UserToken::create($token);
+    }
+
+    /**
+     * Throw a failed authentication validation exception.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @param  string  $driver
+     * @param  string  $message
+     * @return void
+     *
+     * @throws \Illuminate\Validation\ValidationException
+     */
+    protected function throwFailedAuthenticationException(Request $request, string $driver, string $message = null)
+    {
+        $this->fireFailedEvent($request, Auth::user());
+
+        $this->limiter->increment($request);
+
+        throw ValidationException::withMessages([
+            $driver => [empty($message) ? trans('auth.failed') : $message],
+        ]);
+    }
+
+    /**
+     * Fire the failed authentication attempt event with the given arguments.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @param  User|null  $user
+     * @return void
+     */
+    protected function fireFailedEvent(Request $request, ?User $user = null)
+    {
+        event(new Failed('web', $user, [
+            'email' => $request->email,
+        ]));
+    }
+
+    /**
+     * Get the two factor authentication enabled response.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @param  mixed  $user
+     * @return \Symfony\Component\HttpFoundation\Response
+     */
+    protected function twoFactorChallengeResponse($request, $user)
+    {
+        $request->session()->put([
+            'login.id' => $user->getKey(),
+            'login.remember' => $request->session()->pull('login.remember', $request->filled('remember')),
+        ]);
+
+        TwoFactorAuthenticationChallenged::dispatch($user);
+
+        return $request->wantsJson()
+                    ? response()->json(['two_factor' => true])
+                    : redirect()->route('two-factor.login');
+    }
+}
diff --git a/app/Actions/AttemptToAuthenticateWebauthn.php b/app/Actions/AttemptToAuthenticateWebauthn.php
new file mode 100644
index 00000000000..6dfc58ea330
--- /dev/null
+++ b/app/Actions/AttemptToAuthenticateWebauthn.php
@@ -0,0 +1,144 @@
+<?php
+
+namespace App\Actions;
+
+use Illuminate\Auth\Events\Failed;
+use Illuminate\Contracts\Auth\Authenticatable;
+use Illuminate\Contracts\Auth\StatefulGuard;
+use Illuminate\Http\Request;
+use Illuminate\Validation\ValidationException;
+use LaravelWebauthn\Facades\Webauthn as WebauthnFacade;
+use LaravelWebauthn\Services\LoginRateLimiter;
+use LaravelWebauthn\Services\Webauthn;
+
+class AttemptToAuthenticateWebauthn
+{
+    /**
+     * The guard implementation.
+     *
+     * @var \Illuminate\Contracts\Auth\StatefulGuard
+     */
+    protected StatefulGuard $guard;
+
+    /**
+     * The login rate limiter instance.
+     *
+     * @var \LaravelWebauthn\Services\LoginRateLimiter
+     */
+    protected LoginRateLimiter $limiter;
+
+    /**
+     * Create a new controller instance.
+     *
+     * @param  \Illuminate\Contracts\Auth\StatefulGuard  $guard
+     * @param  \LaravelWebauthn\Services\LoginRateLimiter  $limiter
+     * @return void
+     */
+    public function __construct(StatefulGuard $guard, LoginRateLimiter $limiter)
+    {
+        $this->guard = $guard;
+        $this->limiter = $limiter;
+    }
+
+    /**
+     * Handle the incoming request.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @param  callable  $next
+     * @return mixed
+     */
+    public function handle(Request $request, $next)
+    {
+        if ($this->attemptValidateAssertion($request)
+            || $this->attemptLogin($this->filterCredentials($request), $request->boolean('remember'))) {
+            return $next($request);
+        }
+
+        $this->throwFailedAuthenticationException($request);
+
+        return null;
+    }
+
+    /**
+     * Attempt to log the user into the application.
+     *
+     * @param  array  $challenge
+     * @param  bool  $remember
+     * @return bool
+     */
+    protected function attemptLogin(array $challenge, bool $remember = false): bool
+    {
+        return $this->guard->attempt($challenge, $remember);
+    }
+
+    /**
+     * Attempt to validate assertion for authenticated user.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @return bool
+     */
+    protected function attemptValidateAssertion(Request $request): bool
+    {
+        $user = $request->user();
+
+        if ($user === null) {
+            return false;
+        }
+
+        $result = WebauthnFacade::validateAssertion($user, $this->filterCredentials($request));
+
+        if (! $result) {
+            $this->fireFailedEvent($request, $user);
+
+            $this->throwFailedAuthenticationException($request);
+
+            return false; // @codeCoverageIgnore
+        }
+
+        return true;
+    }
+
+    /**
+     * Throw a failed authentication validation exception.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @return void
+     *
+     * @throws \Illuminate\Validation\ValidationException
+     */
+    protected function throwFailedAuthenticationException(Request $request)
+    {
+        $this->limiter->increment($request);
+
+        throw ValidationException::withMessages([
+            Webauthn::username() => [trans('webauthn::errors.login_failed')],
+        ]);
+    }
+
+    /**
+     * Fire the failed authentication attempt event with the given arguments.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @param  \Illuminate\Contracts\Auth\Authenticatable|null  $user
+     * @return void
+     */
+    protected function fireFailedEvent(Request $request, ?Authenticatable $user = null)
+    {
+        event(new Failed(config('webauthn.guard'), $user, [
+            Webauthn::username() => $user !== null
+                ? $user->{Webauthn::username()}
+                : $request->{Webauthn::username()},
+        ]));
+    }
+
+    /**
+     * Get array of webauthn credentials.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @return array
+     */
+    protected function filterCredentials(Request $request): array
+    {
+        return $request->only(['id', 'rawId', 'response', 'type']);
+    }
+}
diff --git a/app/Actions/Fortify/RedirectIfTwoFactorAuthenticatable.php b/app/Actions/Fortify/RedirectIfTwoFactorAuthenticatable.php
new file mode 100644
index 00000000000..2e1c664f6fd
--- /dev/null
+++ b/app/Actions/Fortify/RedirectIfTwoFactorAuthenticatable.php
@@ -0,0 +1,130 @@
+<?php
+
+namespace App\Actions\Fortify;
+
+use App\Models\User;
+use Illuminate\Auth\Events\Failed;
+use Illuminate\Contracts\Auth\StatefulGuard;
+use Illuminate\Validation\ValidationException;
+use Laravel\Fortify\Events\TwoFactorAuthenticationChallenged;
+use Laravel\Fortify\LoginRateLimiter;
+use LaravelWebauthn\Facades\Webauthn;
+
+class RedirectIfTwoFactorAuthenticatable
+{
+    /**
+     * The guard implementation.
+     *
+     * @var \Illuminate\Contracts\Auth\StatefulGuard
+     */
+    protected $guard;
+
+    /**
+     * The login rate limiter instance.
+     *
+     * @var \Laravel\Fortify\LoginRateLimiter
+     */
+    protected $limiter;
+
+    /**
+     * Create a new action instance.
+     *
+     * @param  \Illuminate\Contracts\Auth\StatefulGuard  $guard
+     * @param  \Laravel\Fortify\LoginRateLimiter  $limiter
+     * @return void
+     */
+    public function __construct(StatefulGuard $guard, LoginRateLimiter $limiter)
+    {
+        $this->guard = $guard;
+        $this->limiter = $limiter;
+    }
+
+    /**
+     * Handle the incoming request.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @param  callable  $next
+     * @return mixed
+     */
+    public function handle($request, $next)
+    {
+        $user = $this->validateCredentials($request);
+
+        if ((optional($user)->two_factor_secret && ! is_null(optional($user)->two_factor_confirmed_at))
+            || Webauthn::enabled($user)) {
+            return $this->twoFactorChallengeResponse($request, $user);
+        }
+
+        return $next($request);
+    }
+
+    /**
+     * Attempt to validate the incoming credentials.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @return mixed
+     */
+    protected function validateCredentials($request)
+    {
+        return tap(User::where('email', $request->email)->first(), function ($user) use ($request) {
+            if (! $user || ! $this->guard->getProvider()->validateCredentials($user, ['password' => $request->password])) {
+                $this->fireFailedEvent($request, $user);
+
+                $this->throwFailedAuthenticationException($request);
+            }
+        });
+    }
+
+    /**
+     * Throw a failed authentication validation exception.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @return void
+     *
+     * @throws \Illuminate\Validation\ValidationException
+     */
+    protected function throwFailedAuthenticationException($request)
+    {
+        $this->limiter->increment($request);
+
+        throw ValidationException::withMessages([
+            'email' => [trans('auth.failed')],
+        ]);
+    }
+
+    /**
+     * Fire the failed authentication attempt event with the given arguments.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @param  \Illuminate\Contracts\Auth\Authenticatable|null  $user
+     * @return void
+     */
+    protected function fireFailedEvent($request, $user = null)
+    {
+        event(new Failed(config('fortify.guard'), $user, [
+            'email' => $request->email,
+            'password' => $request->password,
+        ]));
+    }
+
+    /**
+     * Get the two factor authentication enabled response.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @param  mixed  $user
+     * @return \Symfony\Component\HttpFoundation\Response
+     */
+    protected function twoFactorChallengeResponse($request, $user)
+    {
+        $request->session()->put([
+            'login.id' => $user->getKey(),
+            'login.remember' => $request->filled('remember'),
+        ]);
+
+        TwoFactorAuthenticationChallenged::dispatch($user);
+
+        return $request->wantsJson()
+                    ? response()->json(['two_factor' => true])
+                    : redirect()->route('two-factor.login');
+    }
+}
diff --git a/app/Actions/Fortify/TwoFactorChallengeView.php b/app/Actions/Fortify/TwoFactorChallengeView.php
index 2f8931a15cd..e8af5bc2326 100644
--- a/app/Actions/Fortify/TwoFactorChallengeView.php
+++ b/app/Actions/Fortify/TwoFactorChallengeView.php
@@ -5,6 +5,7 @@
 use App\Models\User;
 use Inertia\Inertia;
 use Laravel\Fortify\Contracts\TwoFactorChallengeViewResponse as TwoFactorChallengeViewContract;
+use LaravelWebauthn\Facades\Webauthn;
 
 class TwoFactorChallengeView implements TwoFactorChallengeViewContract
 {
@@ -19,7 +20,12 @@ public function toResponse($request)
         $userId = $request->session()->get('login.id');
         $user = User::find($userId);
 
-        return Inertia::render('Auth/TwoFactorChallenge', [
+        $data = [];
+        if ($user !== null) {
+            $data['publicKey'] = Webauthn::prepareAssertion($user);
+        }
+
+        return Inertia::render('Auth/TwoFactorChallenge', $data + [
             'two_factor' => optional($user)->two_factor_secret && ! is_null(optional($user)->two_factor_confirmed_at),
             'remember' => $request->session()->get('login.remember'),
         ])->toResponse($request);
diff --git a/app/Actions/Fortify/UpdateUserProfileInformation.php b/app/Actions/Fortify/UpdateUserProfileInformation.php
index da4ba348311..af10427ebc6 100644
--- a/app/Actions/Fortify/UpdateUserProfileInformation.php
+++ b/app/Actions/Fortify/UpdateUserProfileInformation.php
@@ -33,7 +33,6 @@ public function update($user, array $input)
                 'first_name' => $input['first_name'],
                 'last_name' => $input['last_name'],
                 'email' => $input['email'],
-                'locale' => $input['locale'],
             ])->save();
             // @codeCoverageIgnoreEnd
         }
diff --git a/app/Actions/Jetstream/UserProfile.php b/app/Actions/Jetstream/UserProfile.php
new file mode 100644
index 00000000000..775392e1b3b
--- /dev/null
+++ b/app/Actions/Jetstream/UserProfile.php
@@ -0,0 +1,52 @@
+<?php
+
+namespace App\Actions\Jetstream;
+
+use App\Vault\ManageVault\Web\ViewHelpers\VaultIndexViewHelper;
+use Illuminate\Http\Request;
+
+class UserProfile
+{
+    /**
+     * Get user profile data.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @param  array  $data
+     * @return array
+     */
+    public function __invoke(Request $request, array $data): array
+    {
+        $providers = collect(config('auth.login_providers'))->filter(fn ($provider) => ! empty($provider));
+        $providersName = $providers->mapWithKeys(function ($provider) {
+            return [
+                $provider => config("services.$provider.name") ?? __("auth.login_provider_{$provider}"),
+            ];
+        });
+
+        $webauthnKeys = $request->user()->webauthnKeys()
+            ->get()
+            ->map(function ($key) {
+                return [
+                    'id' => $key->id,
+                    'name' => $key->name,
+                    'type' => $key->type,
+                    'last_active' => $key->updated_at->diffForHumans(),
+                ];
+            })
+            ->toArray();
+
+        $data['providers'] = $providers;
+        $data['providersName'] = $providersName;
+        $data['userTokens'] = $request->user()->userTokens()->get();
+        $data['webauthnKeys'] = $webauthnKeys;
+
+        $data['locales'] = collect(config('lang-detector.languages'))->map(fn ($locale) => [
+            'id' => $locale,
+            'name' => __('auth.lang', [], $locale),
+        ]);
+
+        $data['layoutData'] = VaultIndexViewHelper::layoutData();
+
+        return $data;
+    }
+}
diff --git a/app/Http/Controllers/Auth/LoginController.php b/app/Http/Controllers/Auth/LoginController.php
index a2ebda406ec..dd0953b6f30 100644
--- a/app/Http/Controllers/Auth/LoginController.php
+++ b/app/Http/Controllers/Auth/LoginController.php
@@ -4,10 +4,13 @@
 
 use App\Helpers\WallpaperHelper;
 use App\Http\Controllers\Controller;
+use App\Models\User;
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Cookie;
 use Illuminate\Support\Facades\Route;
 use Inertia\Inertia;
 use Inertia\Response;
+use LaravelWebauthn\Facades\Webauthn;
 
 class LoginController extends Controller
 {
@@ -19,10 +22,28 @@ class LoginController extends Controller
      */
     public function __invoke(Request $request): Response
     {
-        return Inertia::render('Auth/Login', [
+        $providers = collect(config('auth.login_providers'))->reject(fn ($provider) => empty($provider));
+        $providersName = $providers->mapWithKeys(fn ($provider) => [
+            $provider => config("services.$provider.name") ?? __("auth.login_provider_{$provider}"),
+        ]);
+
+        $data = [];
+
+        if ($webauthnRemember = $request->cookie('webauthn_remember')) {
+            if (($user = User::find($webauthnRemember)) && $user->webauthnKeys()->count() > 0) {
+                $data['publicKey'] = Webauthn::prepareAssertion($user);
+                $data['userName'] = $user->name;
+            } else {
+                Cookie::expire('webauthn_remember');
+            }
+        }
+
+        return Inertia::render('Auth/Login', $data + [
             'canResetPassword' => Route::has('password.request'),
             'status' => session('status'),
             'wallpaperUrl' => WallpaperHelper::getRandomWallpaper(),
+            'providers' => $providers,
+            'providersName' => $providersName,
         ]);
     }
 }
diff --git a/app/Http/Controllers/Auth/SocialiteCallbackController.php b/app/Http/Controllers/Auth/SocialiteCallbackController.php
new file mode 100644
index 00000000000..0aa127b7d1c
--- /dev/null
+++ b/app/Http/Controllers/Auth/SocialiteCallbackController.php
@@ -0,0 +1,106 @@
+<?php
+
+namespace App\Http\Controllers\Auth;
+
+use App\Actions\AttemptToAuthenticateSocialite;
+use App\Http\Controllers\Controller;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Http\Request;
+use Illuminate\Pipeline\Pipeline;
+use Illuminate\Support\Facades\Redirect;
+use Illuminate\Support\Str;
+use Illuminate\Validation\ValidationException;
+use Inertia\Inertia;
+use Laravel\Fortify\Actions\PrepareAuthenticatedSession;
+use Laravel\Socialite\Facades\Socialite;
+
+class SocialiteCallbackController extends Controller
+{
+    /**
+     * Handle socalite login.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @param  string  $driver
+     * @return \Symfony\Component\HttpFoundation\Response
+     */
+    public function login(Request $request, string $driver)
+    {
+        $this->checkProvider($driver);
+
+        $redirect = $request->input('redirect');
+        if ($redirect && Str::of($redirect)->startsWith($request->getSchemeAndHttpHost())) {
+            Redirect::setIntendedUrl($redirect);
+        }
+
+        if ($request->boolean('remember')) {
+            $request->session()->put('login.remember', true);
+        }
+
+        return Inertia::location(Socialite::driver($driver)->redirect());
+    }
+
+    /**
+     * Handle socalite callback.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @param  string  $driver
+     * @return \Illuminate\Http\RedirectResponse
+     */
+    public function callback(Request $request, string $driver): RedirectResponse
+    {
+        try {
+            $this->checkProvider($driver);
+            $this->checkForErrors($request, $driver);
+
+            return $this->loginPipeline($request)->then(function (/*$request*/) {
+                return Redirect::intended(route('vault.index'));
+            });
+        } catch (ValidationException $e) {
+            throw $e->redirectTo(Redirect::intended(route('home'))->getTargetUrl());
+        }
+    }
+
+    /**
+     * Get the authentication pipeline instance.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @return \Illuminate\Pipeline\Pipeline
+     */
+    protected function loginPipeline(Request $request)
+    {
+        return (new Pipeline(app()))->send($request)->through([
+            AttemptToAuthenticateSocialite::class,
+            PrepareAuthenticatedSession::class,
+        ]);
+    }
+
+    /**
+     * Check for errors.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @param  string  $driver
+     * @return void
+     */
+    private function checkForErrors(Request $request, string $driver): void
+    {
+        if ($request->filled('error')) {
+            throw ValidationException::withMessages([
+                $driver => [$request->input('error_description')],
+            ]);
+        }
+    }
+
+    /**
+     * Check if the driver is activated.
+     *
+     * @param  string  $driver
+     */
+    private function checkProvider(string $driver): void
+    {
+        if (! collect(config('auth.login_providers'))->contains($driver)) {
+            throw ValidationException::withMessages([
+                $driver => ['This provider does not exist.'],
+            ]);
+        }
+    }
+}
diff --git a/app/Http/Controllers/Profile/UserTokenController.php b/app/Http/Controllers/Profile/UserTokenController.php
new file mode 100644
index 00000000000..c92157522ca
--- /dev/null
+++ b/app/Http/Controllers/Profile/UserTokenController.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Http\Controllers\Profile;
+
+use Illuminate\Http\Request;
+use Laravel\Jetstream\Http\Controllers\Inertia\UserProfileController as BaseController;
+
+class UserTokenController extends BaseController
+{
+    /**
+     * Destroy user token.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @param  string  $driver
+     * @return \Illuminate\Http\RedirectResponse
+     */
+    public function destroy(Request $request, string $driver)
+    {
+        $request->user()->userTokens()
+            ->where('driver', $driver)
+            ->delete();
+
+        return redirect()->route('profile.show');
+    }
+}
diff --git a/app/Http/Controllers/Profile/WebauthnDestroyResponse.php b/app/Http/Controllers/Profile/WebauthnDestroyResponse.php
new file mode 100644
index 00000000000..0e5d5497909
--- /dev/null
+++ b/app/Http/Controllers/Profile/WebauthnDestroyResponse.php
@@ -0,0 +1,24 @@
+<?php
+
+namespace App\Http\Controllers\Profile;
+
+use Illuminate\Support\Facades\Redirect;
+use Illuminate\Support\Facades\Response;
+use LaravelWebauthn\Contracts\DestroyResponse as DestroyResponseContract;
+use LaravelWebauthn\Facades\Webauthn;
+
+class WebauthnDestroyResponse implements DestroyResponseContract
+{
+    /**
+     * Create an HTTP response that represents the object.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @return \Symfony\Component\HttpFoundation\Response
+     */
+    public function toResponse($request)
+    {
+        return $request->wantsJson()
+            ? Response::noContent()
+            : Redirect::intended(Webauthn::redirects('register'));
+    }
+}
diff --git a/app/Http/Controllers/Profile/WebauthnUpdateResponse.php b/app/Http/Controllers/Profile/WebauthnUpdateResponse.php
new file mode 100644
index 00000000000..8f3476f0cff
--- /dev/null
+++ b/app/Http/Controllers/Profile/WebauthnUpdateResponse.php
@@ -0,0 +1,24 @@
+<?php
+
+namespace App\Http\Controllers\Profile;
+
+use Illuminate\Support\Facades\Redirect;
+use Illuminate\Support\Facades\Response;
+use LaravelWebauthn\Contracts\UpdateResponse as UpdateResponseContract;
+use LaravelWebauthn\Facades\Webauthn;
+
+class WebauthnUpdateResponse implements UpdateResponseContract
+{
+    /**
+     * Create an HTTP response that represents the object.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @return \Symfony\Component\HttpFoundation\Response
+     */
+    public function toResponse($request)
+    {
+        return $request->wantsJson()
+            ? Response::noContent()
+            : Redirect::intended(Webauthn::redirects('register'));
+    }
+}
diff --git a/app/Http/Requests/Auth/LoginRequest.php b/app/Http/Requests/Auth/LoginRequest.php
index a539eb876bc..940a2d4119d 100644
--- a/app/Http/Requests/Auth/LoginRequest.php
+++ b/app/Http/Requests/Auth/LoginRequest.php
@@ -49,7 +49,7 @@ public function authenticate()
             RateLimiter::hit($this->throttleKey());
 
             throw ValidationException::withMessages([
-                'email' => __('auth.failed'),
+                'email' => trans('auth.failed'),
             ]);
         }
 
diff --git a/app/Listeners/LoginListener.php b/app/Listeners/LoginListener.php
new file mode 100644
index 00000000000..c1732a2e638
--- /dev/null
+++ b/app/Listeners/LoginListener.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Listeners;
+
+use Illuminate\Auth\Events\Login;
+use Illuminate\Support\Facades\Cookie;
+use LaravelWebauthn\Facades\Webauthn;
+
+class LoginListener
+{
+    /**
+     * Handle Login webhooks.
+     *
+     * @param  \Illuminate\Auth\Events\Login  $event
+     * @return void
+     */
+    public function handle(Login $event)
+    {
+        if (Webauthn::enabled($event->user) && $event->remember) {
+            Cookie::queue('webauthn_remember', $event->user->getAuthIdentifier(), 60 * 24 * 30);
+        }
+    }
+}
diff --git a/app/Models/User.php b/app/Models/User.php
index fa80b937ce5..dc858047dbe 100644
--- a/app/Models/User.php
+++ b/app/Models/User.php
@@ -13,6 +13,7 @@
 use Illuminate\Support\Facades\DB;
 use Laravel\Fortify\TwoFactorAuthenticatable;
 use Laravel\Sanctum\HasApiTokens;
+use LaravelWebauthn\WebauthnAuthenticatable;
 
 class User extends Authenticatable implements MustVerifyEmail
 {
@@ -20,6 +21,7 @@ class User extends Authenticatable implements MustVerifyEmail
     use HasFactory;
     use HasApiTokens;
     use TwoFactorAuthenticatable;
+    use WebauthnAuthenticatable;
 
     /**
      * Possible number format types.
@@ -175,4 +177,14 @@ public function getContactInVault(Vault $vault): ?Contact
 
         return $contact;
     }
+
+    /**
+     * Get the user tokens for external login providers.
+     *
+     * @return HasMany
+     */
+    public function userTokens()
+    {
+        return $this->hasMany(UserToken::class);
+    }
 }
diff --git a/app/Models/UserToken.php b/app/Models/UserToken.php
new file mode 100644
index 00000000000..188bd00b29e
--- /dev/null
+++ b/app/Models/UserToken.php
@@ -0,0 +1,61 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+
+class UserToken extends Model
+{
+    use HasFactory;
+
+    /**
+     * The attributes that are mass assignable.
+     *
+     * @var array<string>
+     */
+    protected $fillable = [
+        'user_id',
+        'driver',
+        'driver_id',
+        'email',
+        'format',
+        'token',
+        'token_secret',
+        'refresh_token',
+        'expires_in',
+    ];
+
+    /**
+     * The attributes that should be hidden for arrays.
+     *
+     * @var array<int, string>
+     */
+    protected $hidden = [
+        'token',
+        'token_secret',
+        'refresh_token',
+    ];
+
+    /**
+     * The attributes that should be visible in serialization.
+     *
+     * @var array<int, string>
+     */
+    protected $visible = [
+        'driver',
+        'email',
+        'format',
+    ];
+
+    /**
+     * Get the user record associated with the company.
+     *
+     * @return BelongsTo
+     */
+    public function user()
+    {
+        return $this->belongsTo(User::class);
+    }
+}
diff --git a/app/Providers/AppServiceProvider.php b/app/Providers/AppServiceProvider.php
index ee8ca5bcd8f..5fb7e91f933 100644
--- a/app/Providers/AppServiceProvider.php
+++ b/app/Providers/AppServiceProvider.php
@@ -2,7 +2,13 @@
 
 namespace App\Providers;
 
+use App\Http\Controllers\Profile\WebauthnDestroyResponse;
+use App\Http\Controllers\Profile\WebauthnUpdateResponse;
+use Illuminate\Cache\RateLimiting\Limit;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\RateLimiter;
 use Illuminate\Support\ServiceProvider;
+use LaravelWebauthn\Facades\Webauthn;
 
 class AppServiceProvider extends ServiceProvider
 {
@@ -23,6 +29,11 @@ public function register()
      */
     public function boot()
     {
-        //
+        RateLimiter::for('oauth2-socialite', function (Request $request) {
+            return Limit::perMinute(5)->by(optional($request->user())->id ?: $request->ip());
+        });
+
+        Webauthn::updateViewResponseUsing(WebauthnUpdateResponse::class);
+        Webauthn::destroyViewResponseUsing(WebauthnDestroyResponse::class);
     }
 }
diff --git a/app/Providers/EventServiceProvider.php b/app/Providers/EventServiceProvider.php
index 9d2f333ea81..1bc533d730c 100644
--- a/app/Providers/EventServiceProvider.php
+++ b/app/Providers/EventServiceProvider.php
@@ -4,24 +4,34 @@
 
 use App\Contact\ManageDocuments\Events\FileDeleted;
 use App\Contact\ManageDocuments\Listeners\DeleteFileInStorage;
+use App\Listeners\LoginListener;
+use Illuminate\Auth\Events\Login;
 use Illuminate\Auth\Events\Registered;
 use Illuminate\Auth\Listeners\SendEmailVerificationNotification;
 use Illuminate\Foundation\Support\Providers\EventServiceProvider as ServiceProvider;
+use SocialiteProviders\GitHub\GitHubExtendSocialite;
+use SocialiteProviders\Manager\SocialiteWasCalled;
 
 class EventServiceProvider extends ServiceProvider
 {
     /**
      * The event listener mappings for the application.
      *
-     * @var array
+     * @var array<class-string, array<int, class-string>>
      */
     protected $listen = [
-        Registered::class => [
-            SendEmailVerificationNotification::class,
+        Login::class => [
+            LoginListener::class,
         ],
         FileDeleted::class => [
             DeleteFileInStorage::class,
         ],
+        Registered::class => [
+            SendEmailVerificationNotification::class,
+        ],
+        SocialiteWasCalled::class => [
+            GitHubExtendSocialite::class,
+        ],
     ];
 
     /**
diff --git a/app/Providers/FortifyServiceProvider.php b/app/Providers/FortifyServiceProvider.php
index 8ba35368de8..e21cd0bc4c5 100644
--- a/app/Providers/FortifyServiceProvider.php
+++ b/app/Providers/FortifyServiceProvider.php
@@ -3,6 +3,7 @@
 namespace App\Providers;
 
 use App\Actions\Fortify\CreateNewUser;
+use App\Actions\Fortify\RedirectIfTwoFactorAuthenticatable;
 use App\Actions\Fortify\ResetUserPassword;
 use App\Actions\Fortify\TwoFactorChallengeView;
 use App\Actions\Fortify\UpdateUserPassword;
@@ -13,6 +14,8 @@
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\RateLimiter;
 use Illuminate\Support\ServiceProvider;
+use Laravel\Fortify\Actions\AttemptToAuthenticate;
+use Laravel\Fortify\Actions\PrepareAuthenticatedSession;
 use Laravel\Fortify\Fortify;
 
 class FortifyServiceProvider extends ServiceProvider
@@ -34,11 +37,19 @@ public function register()
      */
     public function boot()
     {
+        Fortify::authenticateThrough(fn () => [
+            RedirectIfTwoFactorAuthenticatable::class,
+            AttemptToAuthenticate::class,
+            PrepareAuthenticatedSession::class,
+        ]);
+
         Fortify::loginView(fn ($request) => (new LoginController())($request));
-        Fortify::confirmPasswordsUsing(fn ($user, ?string $password = null) => $user->password ? app(StatefulGuard::class)->validate([
-            'email' => $user->email,
-            'password' => $password,
-        ]) : true
+        Fortify::confirmPasswordsUsing(fn ($user, ?string $password = null) => $user->password
+                ? app(StatefulGuard::class)->validate([
+                    'email' => $user->email,
+                    'password' => $password,
+                ])
+                : true
         );
 
         Fortify::createUsersUsing(CreateNewUser::class);
@@ -53,7 +64,6 @@ public function boot()
             return Limit::perMinute(5)->by($email.$request->ip());
         });
 
-        RateLimiter::for('two-factor', fn (Request $request) => Limit::perMinute(5)->by($request->session()->get('login.id'))
-        );
+        RateLimiter::for('two-factor', fn (Request $request) => Limit::perMinute(5)->by($request->session()->get('login.id')));
     }
 }
diff --git a/app/Providers/JetstreamServiceProvider.php b/app/Providers/JetstreamServiceProvider.php
index f193ba24dda..d10041e257d 100644
--- a/app/Providers/JetstreamServiceProvider.php
+++ b/app/Providers/JetstreamServiceProvider.php
@@ -3,6 +3,7 @@
 namespace App\Providers;
 
 use App\Actions\Jetstream\DeleteUser;
+use App\Actions\Jetstream\UserProfile;
 use Illuminate\Support\ServiceProvider;
 use Laravel\Jetstream\Jetstream;
 
@@ -28,6 +29,7 @@ public function boot()
         $this->configurePermissions();
 
         Jetstream::deleteUsersUsing(DeleteUser::class);
+        Jetstream::inertia()->whenRendering('Profile/Show', new UserProfile());
     }
 
     /**
diff --git a/composer.json b/composer.json
index d8445cb556e..fd2142c797c 100644
--- a/composer.json
+++ b/composer.json
@@ -11,6 +11,7 @@
   "license": "MIT",
   "require": {
     "php": "^8.1",
+    "asbiin/laravel-webauthn": "^3.2",
     "fruitcake/laravel-cors": "^2.2",
     "guzzlehttp/guzzle": "^7.4.5",
     "http-interop/http-factory-guzzle": "^1.2",
@@ -21,10 +22,12 @@
     "laravel/jetstream": "^2.10",
     "laravel/sanctum": "^2.15.1",
     "laravel/scout": "^9.4.10",
+    "laravel/socialite": "^5.5",
     "laravel/tinker": "^2.7.2",
     "meilisearch/meilisearch-php": "^0.23.3",
     "naugrim/laravel-sentry-tunnel": "^1.0",
     "sentry/sentry-laravel": "^2.13",
+    "socialiteproviders/github": "^4.1",
     "tightenco/ziggy": "^1.4.6",
     "uploadcare/uploadcare-php": "^3.2.4",
     "vluzrmos/language-detector": "^2.3.3"
diff --git a/composer.lock b/composer.lock
index 740d05520d4..1c93b5157e7 100644
--- a/composer.lock
+++ b/composer.lock
@@ -4,8 +4,96 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "d122d4dfbaf95c1eca838a2ca0c9595e",
+    "content-hash": "a9e8bc1c5b08157f5d1e071a57050320",
     "packages": [
+        {
+            "name": "asbiin/laravel-webauthn",
+            "version": "3.2.3",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/asbiin/laravel-webauthn.git",
+                "reference": "155ae8cd2fea1cee5dd0fc0f28ca1d539d80392f"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/asbiin/laravel-webauthn/zipball/155ae8cd2fea1cee5dd0fc0f28ca1d539d80392f",
+                "reference": "155ae8cd2fea1cee5dd0fc0f28ca1d539d80392f",
+                "shasum": ""
+            },
+            "require": {
+                "illuminate/support": "^9.0",
+                "php": ">=8.1",
+                "psr/http-factory-implementation": "1.0",
+                "thecodingmachine/safe": "^2.0",
+                "web-auth/cose-lib": "^4.0",
+                "web-auth/webauthn-lib": "^4.0",
+                "web-token/jwt-signature": "^3.0"
+            },
+            "require-dev": {
+                "ext-sqlite3": "*",
+                "guzzlehttp/psr7": "^2.1",
+                "laravel/legacy-factories": "^1.0",
+                "nunomaduro/larastan": "^2.0",
+                "ocramius/package-versions": "^2.0",
+                "orchestra/testbench": "^7.0",
+                "phpstan/phpstan-deprecation-rules": "^1.0",
+                "phpstan/phpstan-phpunit": "^1.0",
+                "phpstan/phpstan-strict-rules": "^1.0",
+                "phpunit/phpunit": "^9.0",
+                "thecodingmachine/phpstan-safe-rule": "^1.0"
+            },
+            "suggest": {
+                "guzzlehttp/psr7": "To provide a psr/http-factory-implementation implementation",
+                "php-http/discovery": "To find a psr/http-factory-implementation implementation",
+                "psr/http-client-implementation": "Required for the AndroidSafetyNet Attestation Statement support",
+                "symfony/psr-http-message-bridge": "To find a psr/http-factory-implementation implementation",
+                "web-token/jwt-key-mgmt": "Required for the AndroidSafetyNet Attestation Statement support",
+                "web-token/jwt-signature-algorithm-ecdsa": "Required for the AndroidSafetyNet Attestation Statement support",
+                "web-token/jwt-signature-algorithm-eddsa": "Required for the AndroidSafetyNet Attestation Statement support",
+                "web-token/jwt-signature-algorithm-rsa": "Required for the AndroidSafetyNet Attestation Statement support"
+            },
+            "type": "library",
+            "extra": {
+                "laravel": {
+                    "providers": [
+                        "LaravelWebauthn\\WebauthnServiceProvider"
+                    ]
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "LaravelWebauthn\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Alexis Saettler",
+                    "email": "alexis@saettler.org"
+                }
+            ],
+            "description": "Laravel Webauthn support",
+            "keywords": [
+                "laravel",
+                "php",
+                "security",
+                "webauthn"
+            ],
+            "support": {
+                "issues": "https://github.com/asbiin/laravel-webauthn/issues",
+                "source": "https://github.com/asbiin/laravel-webauthn"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/asbiin",
+                    "type": "github"
+                }
+            ],
+            "time": "2022-09-06T11:14:30+00:00"
+        },
         {
             "name": "asm89/stack-cors",
             "version": "v2.1.1",
@@ -116,6 +204,73 @@
             },
             "time": "2022-03-14T02:02:36+00:00"
         },
+        {
+            "name": "beberlei/assert",
+            "version": "v3.3.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/beberlei/assert.git",
+                "reference": "cb70015c04be1baee6f5f5c953703347c0ac1655"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/beberlei/assert/zipball/cb70015c04be1baee6f5f5c953703347c0ac1655",
+                "reference": "cb70015c04be1baee6f5f5c953703347c0ac1655",
+                "shasum": ""
+            },
+            "require": {
+                "ext-ctype": "*",
+                "ext-json": "*",
+                "ext-mbstring": "*",
+                "ext-simplexml": "*",
+                "php": "^7.0 || ^8.0"
+            },
+            "require-dev": {
+                "friendsofphp/php-cs-fixer": "*",
+                "phpstan/phpstan": "*",
+                "phpunit/phpunit": ">=6.0.0",
+                "yoast/phpunit-polyfills": "^0.1.0"
+            },
+            "suggest": {
+                "ext-intl": "Needed to allow Assertion::count(), Assertion::isCountable(), Assertion::minCount(), and Assertion::maxCount() to operate on ResourceBundles"
+            },
+            "type": "library",
+            "autoload": {
+                "files": [
+                    "lib/Assert/functions.php"
+                ],
+                "psr-4": {
+                    "Assert\\": "lib/Assert"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "BSD-2-Clause"
+            ],
+            "authors": [
+                {
+                    "name": "Benjamin Eberlei",
+                    "email": "kontakt@beberlei.de",
+                    "role": "Lead Developer"
+                },
+                {
+                    "name": "Richard Quadling",
+                    "email": "rquadling@gmail.com",
+                    "role": "Collaborator"
+                }
+            ],
+            "description": "Thin assertion library for input validation in business models.",
+            "keywords": [
+                "assert",
+                "assertion",
+                "validation"
+            ],
+            "support": {
+                "issues": "https://github.com/beberlei/assert/issues",
+                "source": "https://github.com/beberlei/assert/tree/v3.3.2"
+            },
+            "time": "2021-12-16T21:41:27+00:00"
+        },
         {
             "name": "brick/math",
             "version": "0.10.2",
@@ -656,6 +811,81 @@
             ],
             "time": "2022-06-18T20:57:19+00:00"
         },
+        {
+            "name": "fgrosse/phpasn1",
+            "version": "v2.4.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/fgrosse/PHPASN1.git",
+                "reference": "eef488991d53e58e60c9554b09b1201ca5ba9296"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/fgrosse/PHPASN1/zipball/eef488991d53e58e60c9554b09b1201ca5ba9296",
+                "reference": "eef488991d53e58e60c9554b09b1201ca5ba9296",
+                "shasum": ""
+            },
+            "require": {
+                "php": "~7.1.0 || ~7.2.0 || ~7.3.0 || ~7.4.0 || ~8.0.0 || ~8.1.0"
+            },
+            "require-dev": {
+                "php-coveralls/php-coveralls": "~2.0",
+                "phpunit/phpunit": "^6.3 || ^7.0 || ^8.0"
+            },
+            "suggest": {
+                "ext-bcmath": "BCmath is the fallback extension for big integer calculations",
+                "ext-curl": "For loading OID information from the web if they have not bee defined statically",
+                "ext-gmp": "GMP is the preferred extension for big integer calculations",
+                "phpseclib/bcmath_compat": "BCmath polyfill for servers where neither GMP nor BCmath is available"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "2.0.x-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "FG\\": "lib/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Friedrich Große",
+                    "email": "friedrich.grosse@gmail.com",
+                    "homepage": "https://github.com/FGrosse",
+                    "role": "Author"
+                },
+                {
+                    "name": "All contributors",
+                    "homepage": "https://github.com/FGrosse/PHPASN1/contributors"
+                }
+            ],
+            "description": "A PHP Framework that allows you to encode and decode arbitrary ASN.1 structures using the ITU-T X.690 Encoding Rules.",
+            "homepage": "https://github.com/FGrosse/PHPASN1",
+            "keywords": [
+                "DER",
+                "asn.1",
+                "asn1",
+                "ber",
+                "binary",
+                "decoding",
+                "encoding",
+                "x.509",
+                "x.690",
+                "x509",
+                "x690"
+            ],
+            "support": {
+                "issues": "https://github.com/fgrosse/PHPASN1/issues",
+                "source": "https://github.com/fgrosse/PHPASN1/tree/v2.4.0"
+            },
+            "time": "2021-12-11T12:41:06+00:00"
+        },
         {
             "name": "fruitcake/laravel-cors",
             "version": "v2.2.0",
@@ -2096,6 +2326,75 @@
             },
             "time": "2022-08-26T15:25:27+00:00"
         },
+        {
+            "name": "laravel/socialite",
+            "version": "v5.5.5",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/laravel/socialite.git",
+                "reference": "ce8b2f967eead5a6bae74449e207be6f8046edc3"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/laravel/socialite/zipball/ce8b2f967eead5a6bae74449e207be6f8046edc3",
+                "reference": "ce8b2f967eead5a6bae74449e207be6f8046edc3",
+                "shasum": ""
+            },
+            "require": {
+                "ext-json": "*",
+                "guzzlehttp/guzzle": "^6.0|^7.0",
+                "illuminate/contracts": "^6.0|^7.0|^8.0|^9.0",
+                "illuminate/http": "^6.0|^7.0|^8.0|^9.0",
+                "illuminate/support": "^6.0|^7.0|^8.0|^9.0",
+                "league/oauth1-client": "^1.10.1",
+                "php": "^7.2|^8.0"
+            },
+            "require-dev": {
+                "mockery/mockery": "^1.0",
+                "orchestra/testbench": "^4.0|^5.0|^6.0|^7.0",
+                "phpunit/phpunit": "^8.0|^9.3"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "5.x-dev"
+                },
+                "laravel": {
+                    "providers": [
+                        "Laravel\\Socialite\\SocialiteServiceProvider"
+                    ],
+                    "aliases": {
+                        "Socialite": "Laravel\\Socialite\\Facades\\Socialite"
+                    }
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Laravel\\Socialite\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Taylor Otwell",
+                    "email": "taylor@laravel.com"
+                }
+            ],
+            "description": "Laravel wrapper around OAuth 1 & OAuth 2 libraries.",
+            "homepage": "https://laravel.com",
+            "keywords": [
+                "laravel",
+                "oauth"
+            ],
+            "support": {
+                "issues": "https://github.com/laravel/socialite/issues",
+                "source": "https://github.com/laravel/socialite"
+            },
+            "time": "2022-08-20T21:32:07+00:00"
+        },
         {
             "name": "laravel/tinker",
             "version": "v2.7.2",
@@ -2164,6 +2463,67 @@
             },
             "time": "2022-03-23T12:38:24+00:00"
         },
+        {
+            "name": "lcobucci/clock",
+            "version": "2.2.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/lcobucci/clock.git",
+                "reference": "fb533e093fd61321bfcbac08b131ce805fe183d3"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/lcobucci/clock/zipball/fb533e093fd61321bfcbac08b131ce805fe183d3",
+                "reference": "fb533e093fd61321bfcbac08b131ce805fe183d3",
+                "shasum": ""
+            },
+            "require": {
+                "php": "^8.0",
+                "stella-maris/clock": "^0.1.4"
+            },
+            "require-dev": {
+                "infection/infection": "^0.26",
+                "lcobucci/coding-standard": "^8.0",
+                "phpstan/extension-installer": "^1.1",
+                "phpstan/phpstan": "^0.12",
+                "phpstan/phpstan-deprecation-rules": "^0.12",
+                "phpstan/phpstan-phpunit": "^0.12",
+                "phpstan/phpstan-strict-rules": "^0.12",
+                "phpunit/phpunit": "^9.5"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Lcobucci\\Clock\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Luís Cobucci",
+                    "email": "lcobucci@gmail.com"
+                }
+            ],
+            "description": "Yet another clock abstraction",
+            "support": {
+                "issues": "https://github.com/lcobucci/clock/issues",
+                "source": "https://github.com/lcobucci/clock/tree/2.2.0"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/lcobucci",
+                    "type": "github"
+                },
+                {
+                    "url": "https://www.patreon.com/lcobucci",
+                    "type": "patreon"
+                }
+            ],
+            "time": "2022-04-19T19:34:17+00:00"
+        },
         {
             "name": "league/commonmark",
             "version": "2.3.5",
@@ -2499,39 +2859,115 @@
             "time": "2022-04-17T13:12:02+00:00"
         },
         {
-            "name": "meilisearch/meilisearch-php",
-            "version": "v0.23.3",
+            "name": "league/oauth1-client",
+            "version": "v1.10.1",
             "source": {
                 "type": "git",
-                "url": "https://github.com/meilisearch/meilisearch-php.git",
-                "reference": "e993256ff7c5be7fe760392145830c9defab8214"
+                "url": "https://github.com/thephpleague/oauth1-client.git",
+                "reference": "d6365b901b5c287dd41f143033315e2f777e1167"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/meilisearch/meilisearch-php/zipball/e993256ff7c5be7fe760392145830c9defab8214",
-                "reference": "e993256ff7c5be7fe760392145830c9defab8214",
+                "url": "https://api.github.com/repos/thephpleague/oauth1-client/zipball/d6365b901b5c287dd41f143033315e2f777e1167",
+                "reference": "d6365b901b5c287dd41f143033315e2f777e1167",
                 "shasum": ""
             },
             "require": {
                 "ext-json": "*",
-                "php": "^7.4 || ^8.0",
-                "php-http/client-common": "^2.0",
-                "php-http/discovery": "^1.7",
-                "php-http/httplug": "^2.1"
+                "ext-openssl": "*",
+                "guzzlehttp/guzzle": "^6.0|^7.0",
+                "guzzlehttp/psr7": "^1.7|^2.0",
+                "php": ">=7.1||>=8.0"
             },
             "require-dev": {
-                "friendsofphp/php-cs-fixer": "^3.0",
-                "guzzlehttp/guzzle": "^7.1",
-                "http-interop/http-factory-guzzle": "^1.0",
-                "phpstan/extension-installer": "^1.1",
-                "phpstan/phpstan": "^1.4",
-                "phpstan/phpstan-deprecation-rules": "^1.0",
-                "phpstan/phpstan-phpunit": "^1.0",
-                "phpstan/phpstan-strict-rules": "^1.1",
-                "phpunit/phpunit": "^9.5"
+                "ext-simplexml": "*",
+                "friendsofphp/php-cs-fixer": "^2.17",
+                "mockery/mockery": "^1.3.3",
+                "phpstan/phpstan": "^0.12.42",
+                "phpunit/phpunit": "^7.5||9.5"
             },
             "suggest": {
-                "guzzlehttp/guzzle": "Use Guzzle ^7 as HTTP client",
+                "ext-simplexml": "For decoding XML-based responses."
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "1.0-dev",
+                    "dev-develop": "2.0-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "League\\OAuth1\\Client\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Ben Corlett",
+                    "email": "bencorlett@me.com",
+                    "homepage": "http://www.webcomm.com.au",
+                    "role": "Developer"
+                }
+            ],
+            "description": "OAuth 1.0 Client Library",
+            "keywords": [
+                "Authentication",
+                "SSO",
+                "authorization",
+                "bitbucket",
+                "identity",
+                "idp",
+                "oauth",
+                "oauth1",
+                "single sign on",
+                "trello",
+                "tumblr",
+                "twitter"
+            ],
+            "support": {
+                "issues": "https://github.com/thephpleague/oauth1-client/issues",
+                "source": "https://github.com/thephpleague/oauth1-client/tree/v1.10.1"
+            },
+            "time": "2022-04-15T14:02:14+00:00"
+        },
+        {
+            "name": "meilisearch/meilisearch-php",
+            "version": "v0.23.3",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/meilisearch/meilisearch-php.git",
+                "reference": "e993256ff7c5be7fe760392145830c9defab8214"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/meilisearch/meilisearch-php/zipball/e993256ff7c5be7fe760392145830c9defab8214",
+                "reference": "e993256ff7c5be7fe760392145830c9defab8214",
+                "shasum": ""
+            },
+            "require": {
+                "ext-json": "*",
+                "php": "^7.4 || ^8.0",
+                "php-http/client-common": "^2.0",
+                "php-http/discovery": "^1.7",
+                "php-http/httplug": "^2.1"
+            },
+            "require-dev": {
+                "friendsofphp/php-cs-fixer": "^3.0",
+                "guzzlehttp/guzzle": "^7.1",
+                "http-interop/http-factory-guzzle": "^1.0",
+                "phpstan/extension-installer": "^1.1",
+                "phpstan/phpstan": "^1.4",
+                "phpstan/phpstan-deprecation-rules": "^1.0",
+                "phpstan/phpstan-phpunit": "^1.0",
+                "phpstan/phpstan-strict-rules": "^1.1",
+                "phpunit/phpunit": "^9.5"
+            },
+            "suggest": {
+                "guzzlehttp/guzzle": "Use Guzzle ^7 as HTTP client",
                 "http-interop/http-factory-guzzle": "Factory for guzzlehttp/guzzle"
             },
             "type": "library",
@@ -4735,6 +5171,344 @@
             ],
             "time": "2022-07-15T11:36:23+00:00"
         },
+        {
+            "name": "socialiteproviders/github",
+            "version": "4.1.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/SocialiteProviders/GitHub.git",
+                "reference": "25fc481721d74b829b43bff3519e7103d5339e19"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/SocialiteProviders/GitHub/zipball/25fc481721d74b829b43bff3519e7103d5339e19",
+                "reference": "25fc481721d74b829b43bff3519e7103d5339e19",
+                "shasum": ""
+            },
+            "require": {
+                "ext-json": "*",
+                "php": "^7.2 || ^8.0",
+                "socialiteproviders/manager": "~4.0"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "SocialiteProviders\\GitHub\\": ""
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Anton Komarev",
+                    "email": "ell@cybercog.su"
+                }
+            ],
+            "description": "GitHub OAuth2 Provider for Laravel Socialite",
+            "support": {
+                "source": "https://github.com/SocialiteProviders/GitHub/tree/4.1.0"
+            },
+            "time": "2020-12-01T23:10:59+00:00"
+        },
+        {
+            "name": "socialiteproviders/manager",
+            "version": "v4.2.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/SocialiteProviders/Manager.git",
+                "reference": "738276dfbc2b68a9145db7b3df1588d53db528a1"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/SocialiteProviders/Manager/zipball/738276dfbc2b68a9145db7b3df1588d53db528a1",
+                "reference": "738276dfbc2b68a9145db7b3df1588d53db528a1",
+                "shasum": ""
+            },
+            "require": {
+                "illuminate/support": "^6.0 || ^7.0 || ^8.0 || ^9.0",
+                "laravel/socialite": "~5.0",
+                "php": "^7.4 || ^8.0"
+            },
+            "require-dev": {
+                "mockery/mockery": "^1.2",
+                "phpunit/phpunit": "^6.0 || ^9.0"
+            },
+            "type": "library",
+            "extra": {
+                "laravel": {
+                    "providers": [
+                        "SocialiteProviders\\Manager\\ServiceProvider"
+                    ]
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "SocialiteProviders\\Manager\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Andy Wendt",
+                    "email": "andy@awendt.com"
+                },
+                {
+                    "name": "Anton Komarev",
+                    "email": "a.komarev@cybercog.su"
+                },
+                {
+                    "name": "Miguel Piedrafita",
+                    "email": "soy@miguelpiedrafita.com"
+                },
+                {
+                    "name": "atymic",
+                    "email": "atymicq@gmail.com",
+                    "homepage": "https://atymic.dev"
+                }
+            ],
+            "description": "Easily add new or override built-in providers in Laravel Socialite.",
+            "homepage": "https://socialiteproviders.com",
+            "keywords": [
+                "laravel",
+                "manager",
+                "oauth",
+                "providers",
+                "socialite"
+            ],
+            "support": {
+                "issues": "https://github.com/socialiteproviders/manager/issues",
+                "source": "https://github.com/socialiteproviders/manager"
+            },
+            "time": "2022-09-02T10:20:10+00:00"
+        },
+        {
+            "name": "spomky-labs/cbor-php",
+            "version": "v3.0.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/Spomky-Labs/cbor-php.git",
+                "reference": "de06c1be866bade5270f4cf5ef3b3746ba3f26eb"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/Spomky-Labs/cbor-php/zipball/de06c1be866bade5270f4cf5ef3b3746ba3f26eb",
+                "reference": "de06c1be866bade5270f4cf5ef3b3746ba3f26eb",
+                "shasum": ""
+            },
+            "require": {
+                "brick/math": "^0.9|^0.10",
+                "ext-mbstring": "*",
+                "php": ">=8.0"
+            },
+            "require-dev": {
+                "ekino/phpstan-banned-code": "^1.0",
+                "ext-json": "*",
+                "infection/infection": "^0.26",
+                "phpstan/extension-installer": "^1.1",
+                "phpstan/phpstan": "^1.0",
+                "phpstan/phpstan-beberlei-assert": "^1.0",
+                "phpstan/phpstan-deprecation-rules": "^1.0",
+                "phpstan/phpstan-phpunit": "^1.0",
+                "phpstan/phpstan-strict-rules": "^1.0",
+                "phpunit/phpunit": "^9.5",
+                "rector/rector": "^0.13",
+                "roave/security-advisories": "dev-latest",
+                "symfony/var-dumper": "^6.0",
+                "symplify/easy-coding-standard": "^11.0"
+            },
+            "suggest": {
+                "ext-bcmath": "GMP or BCMath extensions will drastically improve the library performance. BCMath extension needed to handle the Big Float and Decimal Fraction Tags",
+                "ext-gmp": "GMP or BCMath extensions will drastically improve the library performance"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "CBOR\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Florent Morselli",
+                    "homepage": "https://github.com/Spomky"
+                },
+                {
+                    "name": "All contributors",
+                    "homepage": "https://github.com/Spomky-Labs/cbor-php/contributors"
+                }
+            ],
+            "description": "CBOR Encoder/Decoder for PHP",
+            "keywords": [
+                "Concise Binary Object Representation",
+                "RFC7049",
+                "cbor"
+            ],
+            "support": {
+                "issues": "https://github.com/Spomky-Labs/cbor-php/issues",
+                "source": "https://github.com/Spomky-Labs/cbor-php/tree/v3.0.1"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/Spomky",
+                    "type": "github"
+                },
+                {
+                    "url": "https://www.patreon.com/FlorentMorselli",
+                    "type": "patreon"
+                }
+            ],
+            "time": "2022-06-26T07:20:40+00:00"
+        },
+        {
+            "name": "spomky-labs/pki-framework",
+            "version": "1.0.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/Spomky-Labs/pki-framework.git",
+                "reference": "4dc75ffcdaad63b3512c30bdae8a8d862cf1b2cb"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/Spomky-Labs/pki-framework/zipball/4dc75ffcdaad63b3512c30bdae8a8d862cf1b2cb",
+                "reference": "4dc75ffcdaad63b3512c30bdae8a8d862cf1b2cb",
+                "shasum": ""
+            },
+            "require": {
+                "brick/math": "^0.10",
+                "ext-mbstring": "*",
+                "php": ">=8.1"
+            },
+            "require-dev": {
+                "ekino/phpstan-banned-code": "^1.0",
+                "ext-gmp": "*",
+                "infection/infection": "^0.26",
+                "php-parallel-lint/php-parallel-lint": "^1.3",
+                "phpstan/phpstan": "^1.8",
+                "phpstan/phpstan-beberlei-assert": "^1.0",
+                "phpstan/phpstan-deprecation-rules": "^1.0",
+                "phpstan/phpstan-phpunit": "^1.1",
+                "phpstan/phpstan-strict-rules": "^1.3",
+                "phpunit/phpunit": "^9.5.5",
+                "rector/rector": "^0.14",
+                "roave/security-advisories": "dev-latest",
+                "symfony/phpunit-bridge": "^6.1",
+                "symfony/var-dumper": "^6.1",
+                "symplify/easy-coding-standard": "^11.1",
+                "thecodingmachine/phpstan-safe-rule": "^1.2"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "SpomkyLabs\\Pki\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Joni Eskelinen",
+                    "email": "jonieske@gmail.com",
+                    "role": "Original developer"
+                }
+            ],
+            "description": "A PHP framework for managing Public Key Infrastructures. It comprises X.509 public key certificates, attribute certificates, certification requests and certification path validation.",
+            "homepage": "https://github.com/spomky-labs/pki-framework",
+            "keywords": [
+                "DER",
+                "Private Key",
+                "ac",
+                "algorithm identifier",
+                "asn.1",
+                "asn1",
+                "attribute certificate",
+                "certificate",
+                "certification request",
+                "cryptography",
+                "csr",
+                "decrypt",
+                "ec",
+                "encrypt",
+                "pem",
+                "pkcs",
+                "public key",
+                "rsa",
+                "sign",
+                "signature",
+                "verify",
+                "x.509",
+                "x.690",
+                "x509",
+                "x690"
+            ],
+            "support": {
+                "issues": "https://github.com/Spomky-Labs/pki-framework/issues",
+                "source": "https://github.com/Spomky-Labs/pki-framework/tree/1.0.0"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/Spomky",
+                    "type": "github"
+                },
+                {
+                    "url": "https://www.patreon.com/FlorentMorselli",
+                    "type": "patreon"
+                }
+            ],
+            "time": "2022-08-22T11:26:16+00:00"
+        },
+        {
+            "name": "stella-maris/clock",
+            "version": "0.1.5",
+            "source": {
+                "type": "git",
+                "url": "git@gitlab.com:stella-maris/clock.git",
+                "reference": "447879c53ca0b2a762cdbfba5e76ccf4deca9158"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://gitlab.com/api/v4/projects/stella-maris%2Fclock/repository/archive.zip?sha=447879c53ca0b2a762cdbfba5e76ccf4deca9158",
+                "reference": "447879c53ca0b2a762cdbfba5e76ccf4deca9158",
+                "shasum": ""
+            },
+            "require": {
+                "php": "^7.0|^8.0"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "StellaMaris\\Clock\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Andreas Heigl",
+                    "role": "Maintainer"
+                }
+            ],
+            "description": "A pre-release of the proposed PSR-20 Clock-Interface",
+            "homepage": "https://gitlab.com/stella-maris/clock",
+            "keywords": [
+                "clock",
+                "datetime",
+                "point in time",
+                "psr20"
+            ],
+            "time": "2022-08-05T07:21:25+00:00"
+        },
         {
             "name": "symfony/console",
             "version": "v6.1.4",
@@ -7154,11 +7928,85 @@
             "time": "2022-06-27T17:24:16+00:00"
         },
         {
-            "name": "symfony/var-dumper",
+            "name": "symfony/uid",
             "version": "v6.1.3",
             "source": {
                 "type": "git",
-                "url": "https://github.com/symfony/var-dumper.git",
+                "url": "https://github.com/symfony/uid.git",
+                "reference": "ea2ccf0fdb88c83e626105b68e5bab5c132d812b"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/uid/zipball/ea2ccf0fdb88c83e626105b68e5bab5c132d812b",
+                "reference": "ea2ccf0fdb88c83e626105b68e5bab5c132d812b",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.1",
+                "symfony/polyfill-uuid": "^1.15"
+            },
+            "require-dev": {
+                "symfony/console": "^5.4|^6.0"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\Component\\Uid\\": ""
+                },
+                "exclude-from-classmap": [
+                    "/Tests/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Grégoire Pineau",
+                    "email": "lyrixx@lyrixx.info"
+                },
+                {
+                    "name": "Nicolas Grekas",
+                    "email": "p@tchwork.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Provides an object-oriented API to generate and represent UIDs",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "UID",
+                "ulid",
+                "uuid"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/uid/tree/v6.1.3"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2022-07-20T13:46:29+00:00"
+        },
+        {
+            "name": "symfony/var-dumper",
+            "version": "v6.1.3",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/var-dumper.git",
                 "reference": "d5a5e44a2260c5eb5e746bf4f1fbd12ee6ceb427"
             },
             "dist": {
@@ -7241,6 +8089,144 @@
             ],
             "time": "2022-07-20T13:46:29+00:00"
         },
+        {
+            "name": "thecodingmachine/safe",
+            "version": "v2.2.3",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/thecodingmachine/safe.git",
+                "reference": "e454a3142d2197694d1fda291a4462ccd3f66e12"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/thecodingmachine/safe/zipball/e454a3142d2197694d1fda291a4462ccd3f66e12",
+                "reference": "e454a3142d2197694d1fda291a4462ccd3f66e12",
+                "shasum": ""
+            },
+            "require": {
+                "php": "^8.0"
+            },
+            "require-dev": {
+                "phpstan/phpstan": "^1.5",
+                "phpunit/phpunit": "^9.5",
+                "squizlabs/php_codesniffer": "^3.2",
+                "thecodingmachine/phpstan-strict-rules": "^1.0"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "2.2.x-dev"
+                }
+            },
+            "autoload": {
+                "files": [
+                    "deprecated/apc.php",
+                    "deprecated/array.php",
+                    "deprecated/datetime.php",
+                    "deprecated/libevent.php",
+                    "deprecated/password.php",
+                    "deprecated/mssql.php",
+                    "deprecated/stats.php",
+                    "deprecated/strings.php",
+                    "lib/special_cases.php",
+                    "deprecated/mysqli.php",
+                    "generated/apache.php",
+                    "generated/apcu.php",
+                    "generated/array.php",
+                    "generated/bzip2.php",
+                    "generated/calendar.php",
+                    "generated/classobj.php",
+                    "generated/com.php",
+                    "generated/cubrid.php",
+                    "generated/curl.php",
+                    "generated/datetime.php",
+                    "generated/dir.php",
+                    "generated/eio.php",
+                    "generated/errorfunc.php",
+                    "generated/exec.php",
+                    "generated/fileinfo.php",
+                    "generated/filesystem.php",
+                    "generated/filter.php",
+                    "generated/fpm.php",
+                    "generated/ftp.php",
+                    "generated/funchand.php",
+                    "generated/gettext.php",
+                    "generated/gmp.php",
+                    "generated/gnupg.php",
+                    "generated/hash.php",
+                    "generated/ibase.php",
+                    "generated/ibmDb2.php",
+                    "generated/iconv.php",
+                    "generated/image.php",
+                    "generated/imap.php",
+                    "generated/info.php",
+                    "generated/inotify.php",
+                    "generated/json.php",
+                    "generated/ldap.php",
+                    "generated/libxml.php",
+                    "generated/lzf.php",
+                    "generated/mailparse.php",
+                    "generated/mbstring.php",
+                    "generated/misc.php",
+                    "generated/mysql.php",
+                    "generated/network.php",
+                    "generated/oci8.php",
+                    "generated/opcache.php",
+                    "generated/openssl.php",
+                    "generated/outcontrol.php",
+                    "generated/pcntl.php",
+                    "generated/pcre.php",
+                    "generated/pgsql.php",
+                    "generated/posix.php",
+                    "generated/ps.php",
+                    "generated/pspell.php",
+                    "generated/readline.php",
+                    "generated/rpminfo.php",
+                    "generated/rrd.php",
+                    "generated/sem.php",
+                    "generated/session.php",
+                    "generated/shmop.php",
+                    "generated/sockets.php",
+                    "generated/sodium.php",
+                    "generated/solr.php",
+                    "generated/spl.php",
+                    "generated/sqlsrv.php",
+                    "generated/ssdeep.php",
+                    "generated/ssh2.php",
+                    "generated/stream.php",
+                    "generated/strings.php",
+                    "generated/swoole.php",
+                    "generated/uodbc.php",
+                    "generated/uopz.php",
+                    "generated/url.php",
+                    "generated/var.php",
+                    "generated/xdiff.php",
+                    "generated/xml.php",
+                    "generated/xmlrpc.php",
+                    "generated/yaml.php",
+                    "generated/yaz.php",
+                    "generated/zip.php",
+                    "generated/zlib.php"
+                ],
+                "classmap": [
+                    "lib/DateTime.php",
+                    "lib/DateTimeImmutable.php",
+                    "lib/Exceptions/",
+                    "deprecated/Exceptions/",
+                    "generated/Exceptions/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "description": "PHP core functions that throw exceptions instead of returning FALSE on error",
+            "support": {
+                "issues": "https://github.com/thecodingmachine/safe/issues",
+                "source": "https://github.com/thecodingmachine/safe/tree/v2.2.3"
+            },
+            "time": "2022-08-04T14:05:49+00:00"
+        },
         {
             "name": "tightenco/ziggy",
             "version": "v1.4.6",
@@ -7644,6 +8630,398 @@
             ],
             "time": "2022-03-08T17:03:00+00:00"
         },
+        {
+            "name": "web-auth/cose-lib",
+            "version": "v4.0.6",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/web-auth/cose-lib.git",
+                "reference": "d72032843c97ba40edb682dfcec0b787b25cbe6f"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/web-auth/cose-lib/zipball/d72032843c97ba40edb682dfcec0b787b25cbe6f",
+                "reference": "d72032843c97ba40edb682dfcec0b787b25cbe6f",
+                "shasum": ""
+            },
+            "require": {
+                "beberlei/assert": "^3.2",
+                "brick/math": "^0.9|^0.10",
+                "ext-json": "*",
+                "ext-mbstring": "*",
+                "ext-openssl": "*",
+                "fgrosse/phpasn1": "^2.1",
+                "php": ">=8.1",
+                "thecodingmachine/safe": "^1.0|^2.0"
+            },
+            "require-dev": {
+                "ekino/phpstan-banned-code": "^1.0",
+                "infection/infection": "^0.26.12",
+                "php-parallel-lint/php-parallel-lint": "^1.3",
+                "phpstan/phpstan": "^1.7",
+                "phpstan/phpstan-beberlei-assert": "^1.0",
+                "phpstan/phpstan-deprecation-rules": "^1.0",
+                "phpstan/phpstan-phpunit": "^1.1",
+                "phpstan/phpstan-strict-rules": "^1.2",
+                "phpunit/phpunit": "^9.5",
+                "rector/rector": "^0.13.6",
+                "symfony/phpunit-bridge": "^6.1",
+                "symplify/easy-coding-standard": "^11.0",
+                "thecodingmachine/phpstan-safe-rule": "^1.2"
+            },
+            "suggest": {
+                "ext-bcmath": "For better performance, please install either GMP (recommended) or BCMath extension",
+                "ext-gmp": "For better performance, please install either GMP (recommended) or BCMath extension"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Cose\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Florent Morselli",
+                    "homepage": "https://github.com/Spomky"
+                },
+                {
+                    "name": "All contributors",
+                    "homepage": "https://github.com/web-auth/cose/contributors"
+                }
+            ],
+            "description": "CBOR Object Signing and Encryption (COSE) For PHP",
+            "homepage": "https://github.com/web-auth",
+            "keywords": [
+                "COSE",
+                "RFC8152"
+            ],
+            "support": {
+                "issues": "https://github.com/web-auth/cose-lib/issues",
+                "source": "https://github.com/web-auth/cose-lib/tree/v4.0.6"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/Spomky",
+                    "type": "github"
+                },
+                {
+                    "url": "https://www.patreon.com/FlorentMorselli",
+                    "type": "patreon"
+                }
+            ],
+            "time": "2022-08-16T14:04:27+00:00"
+        },
+        {
+            "name": "web-auth/metadata-service",
+            "version": "4.1.4",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/web-auth/webauthn-metadata-service.git",
+                "reference": "a0fee00f92da22d1bb7e01727ff33c8f58192fcd"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/web-auth/webauthn-metadata-service/zipball/a0fee00f92da22d1bb7e01727ff33c8f58192fcd",
+                "reference": "a0fee00f92da22d1bb7e01727ff33c8f58192fcd",
+                "shasum": ""
+            },
+            "require": {
+                "beberlei/assert": "^3.2",
+                "ext-json": "*",
+                "lcobucci/clock": "^2.2",
+                "paragonie/constant_time_encoding": "^2.4",
+                "php": ">=8.1",
+                "psr/http-client": "^1.0",
+                "psr/http-factory": "^1.0",
+                "psr/log": "^2.0|^3.0",
+                "spomky-labs/pki-framework": "^1.0",
+                "thecodingmachine/safe": "^2.0"
+            },
+            "suggest": {
+                "psr/log-implementation": "Recommended to receive logs from the library",
+                "web-token/jwt-key-mgmt": "Mandatory for fetching Metadata Statement from distant sources",
+                "web-token/jwt-signature-algorithm-ecdsa": "Mandatory for fetching Metadata Statement from distant sources"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Webauthn\\MetadataService\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Florent Morselli",
+                    "homepage": "https://github.com/Spomky"
+                },
+                {
+                    "name": "All contributors",
+                    "homepage": "https://github.com/web-auth/metadata-service/contributors"
+                }
+            ],
+            "description": "Metadata Service for FIDO2/Webauthn",
+            "homepage": "https://github.com/web-auth",
+            "keywords": [
+                "FIDO2",
+                "fido",
+                "webauthn"
+            ],
+            "support": {
+                "source": "https://github.com/web-auth/webauthn-metadata-service/tree/4.1.4"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/Spomky",
+                    "type": "github"
+                },
+                {
+                    "url": "https://www.patreon.com/FlorentMorselli",
+                    "type": "patreon"
+                }
+            ],
+            "time": "2022-08-29T17:23:55+00:00"
+        },
+        {
+            "name": "web-auth/webauthn-lib",
+            "version": "4.1.4",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/web-auth/webauthn-lib.git",
+                "reference": "8fad67be1448d4271fce992b7bcca62ae371d3b9"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/web-auth/webauthn-lib/zipball/8fad67be1448d4271fce992b7bcca62ae371d3b9",
+                "reference": "8fad67be1448d4271fce992b7bcca62ae371d3b9",
+                "shasum": ""
+            },
+            "require": {
+                "beberlei/assert": "^3.2",
+                "ext-json": "*",
+                "ext-mbstring": "*",
+                "ext-openssl": "*",
+                "fgrosse/phpasn1": "^2.1",
+                "paragonie/constant_time_encoding": "^2.4",
+                "php": ">=8.1",
+                "psr/http-client": "^1.0",
+                "psr/http-factory": "^1.0",
+                "psr/http-message": "^1.0",
+                "psr/log": "^2.0|^3.0",
+                "spomky-labs/cbor-php": "^3.0",
+                "symfony/uid": "^6.0",
+                "thecodingmachine/safe": "^2.0",
+                "web-auth/cose-lib": "^4.0.6",
+                "web-auth/metadata-service": "self.version"
+            },
+            "suggest": {
+                "psr/log-implementation": "Recommended to receive logs from the library",
+                "web-token/jwt-key-mgmt": "Mandatory for the AndroidSafetyNet Attestation Statement support",
+                "web-token/jwt-signature-algorithm-ecdsa": "Recommended for the AndroidSafetyNet Attestation Statement support",
+                "web-token/jwt-signature-algorithm-eddsa": "Recommended for the AndroidSafetyNet Attestation Statement support",
+                "web-token/jwt-signature-algorithm-rsa": "Mandatory for the AndroidSafetyNet Attestation Statement support"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Webauthn\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Florent Morselli",
+                    "homepage": "https://github.com/Spomky"
+                },
+                {
+                    "name": "All contributors",
+                    "homepage": "https://github.com/web-auth/webauthn-library/contributors"
+                }
+            ],
+            "description": "FIDO2/Webauthn Support For PHP",
+            "homepage": "https://github.com/web-auth",
+            "keywords": [
+                "FIDO2",
+                "fido",
+                "webauthn"
+            ],
+            "support": {
+                "source": "https://github.com/web-auth/webauthn-lib/tree/4.1.4"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/Spomky",
+                    "type": "github"
+                },
+                {
+                    "url": "https://www.patreon.com/FlorentMorselli",
+                    "type": "patreon"
+                }
+            ],
+            "time": "2022-08-29T20:33:38+00:00"
+        },
+        {
+            "name": "web-token/jwt-core",
+            "version": "3.1.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/web-token/jwt-core.git",
+                "reference": "4d956e786a4e35d54c74787ebff840a0311c5e83"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/web-token/jwt-core/zipball/4d956e786a4e35d54c74787ebff840a0311c5e83",
+                "reference": "4d956e786a4e35d54c74787ebff840a0311c5e83",
+                "shasum": ""
+            },
+            "require": {
+                "brick/math": "^0.9|^0.10",
+                "ext-json": "*",
+                "ext-mbstring": "*",
+                "fgrosse/phpasn1": "^2.0",
+                "paragonie/constant_time_encoding": "^2.4",
+                "php": ">=8.1"
+            },
+            "conflict": {
+                "spomky-labs/jose": "*"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Jose\\Component\\Core\\": ""
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Florent Morselli",
+                    "homepage": "https://github.com/Spomky"
+                },
+                {
+                    "name": "All contributors",
+                    "homepage": "https://github.com/web-token/jwt-framework/contributors"
+                }
+            ],
+            "description": "Core component of the JWT Framework.",
+            "homepage": "https://github.com/web-token",
+            "keywords": [
+                "JOSE",
+                "JWE",
+                "JWK",
+                "JWKSet",
+                "JWS",
+                "Jot",
+                "RFC7515",
+                "RFC7516",
+                "RFC7517",
+                "RFC7518",
+                "RFC7519",
+                "RFC7520",
+                "bundle",
+                "jwa",
+                "jwt",
+                "symfony"
+            ],
+            "support": {
+                "source": "https://github.com/web-token/jwt-core/tree/3.1.2"
+            },
+            "funding": [
+                {
+                    "url": "https://www.patreon.com/FlorentMorselli",
+                    "type": "patreon"
+                }
+            ],
+            "time": "2022-08-04T21:04:09+00:00"
+        },
+        {
+            "name": "web-token/jwt-signature",
+            "version": "3.1.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/web-token/jwt-signature.git",
+                "reference": "53dd6c8ad7b2d679721fe0d5b2b0b88c68c3dbce"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/web-token/jwt-signature/zipball/53dd6c8ad7b2d679721fe0d5b2b0b88c68c3dbce",
+                "reference": "53dd6c8ad7b2d679721fe0d5b2b0b88c68c3dbce",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.1",
+                "web-token/jwt-core": "^3.0"
+            },
+            "suggest": {
+                "web-token/jwt-signature-algorithm-ecdsa": "ECDSA Based Signature Algorithms",
+                "web-token/jwt-signature-algorithm-eddsa": "EdDSA Based Signature Algorithms",
+                "web-token/jwt-signature-algorithm-experimental": "Experimental Signature Algorithms",
+                "web-token/jwt-signature-algorithm-hmac": "HMAC Based Signature Algorithms",
+                "web-token/jwt-signature-algorithm-none": "None Signature Algorithm",
+                "web-token/jwt-signature-algorithm-rsa": "RSA Based Signature Algorithms"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Jose\\Component\\Signature\\": ""
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Florent Morselli",
+                    "homepage": "https://github.com/Spomky"
+                },
+                {
+                    "name": "All contributors",
+                    "homepage": "https://github.com/web-token/jwt-signature/contributors"
+                }
+            ],
+            "description": "Signature component of the JWT Framework.",
+            "homepage": "https://github.com/web-token",
+            "keywords": [
+                "JOSE",
+                "JWE",
+                "JWK",
+                "JWKSet",
+                "JWS",
+                "Jot",
+                "RFC7515",
+                "RFC7516",
+                "RFC7517",
+                "RFC7518",
+                "RFC7519",
+                "RFC7520",
+                "bundle",
+                "jwa",
+                "jwt",
+                "symfony"
+            ],
+            "support": {
+                "source": "https://github.com/web-token/jwt-signature/tree/3.1.2"
+            },
+            "funding": [
+                {
+                    "url": "https://www.patreon.com/FlorentMorselli",
+                    "type": "patreon"
+                }
+            ],
+            "time": "2022-08-04T21:04:09+00:00"
+        },
         {
             "name": "webmozart/assert",
             "version": "1.11.0",
diff --git a/config/app.php b/config/app.php
index 2991bbb70cc..e8313177547 100644
--- a/config/app.php
+++ b/config/app.php
@@ -177,6 +177,7 @@
         /*
          * Package Service Providers...
          */
+        SocialiteProviders\Manager\ServiceProvider::class,
 
         /*
          * Application Service Providers...
diff --git a/config/auth.php b/config/auth.php
index e29a3f7dc0b..8709676fd06 100644
--- a/config/auth.php
+++ b/config/auth.php
@@ -61,14 +61,9 @@
 
     'providers' => [
         'users' => [
-            'driver' => 'eloquent',
+            'driver' => 'webauthn',
             'model' => App\Models\User::class,
         ],
-
-        // 'users' => [
-        //     'driver' => 'database',
-        //     'table' => 'users',
-        // ],
     ],
 
     /*
@@ -108,4 +103,18 @@
 
     'password_timeout' => 10800,
 
+    /*
+    |--------------------------------------------------------------------------
+    | Login providers
+    |--------------------------------------------------------------------------
+    |
+    | List of available login providers, coma separated. This uses socialite
+    | packages.
+    |
+    | Supported: azure, github, google, linkedin, monica, saml2, slack, twitter.
+    |
+    */
+
+    'login_providers' => explode(',', env('LOGIN_PROVIDERS', '')),
+
 ];
diff --git a/config/lang-detector.php b/config/lang-detector.php
index 5858b8d67b4..4fdb5af43cf 100644
--- a/config/lang-detector.php
+++ b/config/lang-detector.php
@@ -28,6 +28,7 @@
     'languages' => parse_langs_to_array(
         env('LANG_DETECTOR_LANGUAGES', [
             'en',
+            'fr',
         ])
     ),
 
diff --git a/config/services.php b/config/services.php
index bbac0acbecd..ebd86fb0f44 100644
--- a/config/services.php
+++ b/config/services.php
@@ -35,4 +35,14 @@
         'private_key' => env('UPLOADCARE_PRIVATE_KEY', null),
     ],
 
+    /*
+     * Socialite providers
+     */
+
+    'github' => [
+        'client_id' => env('GITHUB_CLIENT_ID'),
+        'client_secret' => env('GITHUB_CLIENT_SECRET'),
+        'redirect' => env('GITHUB_REDIRECT_URI', '/auth/github/callback'),
+    ],
+
 ];
diff --git a/config/webauthn.php b/config/webauthn.php
new file mode 100644
index 00000000000..91078fe726c
--- /dev/null
+++ b/config/webauthn.php
@@ -0,0 +1,288 @@
+<?php
+
+use LaravelWebauthn\Models\WebauthnKey;
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | LaravelWebauthn Master Switch
+    |--------------------------------------------------------------------------
+    |
+    | This option may be used to disable LaravelWebauthn.
+    |
+    */
+
+    'enable' => true,
+
+    /*
+    |--------------------------------------------------------------------------
+    | Webauthn Guard
+    |--------------------------------------------------------------------------
+    |
+    | Here you may specify which authentication guard Webauthn will use while
+    | authenticating users. This value should correspond with one of your
+    | guards that is already present in your "auth" configuration file.
+    |
+    */
+
+    'guard' => 'web',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Username / Email
+    |--------------------------------------------------------------------------
+    |
+    | This value defines which model attribute should be considered as your
+    | application's "username" field. Typically, this might be the email
+    | address of the users but you are free to change this value here.
+    |
+    */
+
+    'username' => 'email',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Webauthn Routes Prefix / Subdomain
+    |--------------------------------------------------------------------------
+    |
+    | Here you may specify which prefix Webauthn will assign to all the routes
+    | that it registers with the application. If necessary, you may change
+    | subdomain under which all of the Webauthn routes will be available.
+    |
+    */
+
+    'prefix' => 'webauthn',
+
+    'domain' => null,
+
+    /*
+    |--------------------------------------------------------------------------
+    | Webauthn Routes Middleware
+    |--------------------------------------------------------------------------
+    |
+    | Here you may specify which middleware Webauthn will assign to the routes
+    | that it registers with the application. If necessary, you may change
+    | these middleware but typically this provided default is preferred.
+    |
+    */
+
+    'middleware' => ['web'],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Webauthn key model
+    |--------------------------------------------------------------------------
+    |
+    | Here you may specify the model used to create Webauthn keys.
+    |
+    */
+
+    'model' => WebauthnKey::class,
+
+    /*
+    |--------------------------------------------------------------------------
+    | Rate Limiting
+    |--------------------------------------------------------------------------
+    |
+    | By default, Laravel Webauthn will throttle logins to five requests per
+    | minute for every email and IP address combination. However, if you would
+    | like to specify a custom rate limiter to call then you may specify it here.
+    |
+    */
+
+    'limiters' => [
+        'login' => 'login',
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Redirect routes
+    |--------------------------------------------------------------------------
+    |
+    | When using navigation, redirects to these url on success:
+    | - login: after a successfull login.
+    | - register: after a successfull Webauthn key creation.
+    |
+    | Redirects are not used in case of application/json requests.
+    |
+    */
+
+    'redirects' => [
+        'login' => '/vaults',
+        'register' => '/user/profile',
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | View to load after middleware login request.
+    |--------------------------------------------------------------------------
+    |
+    | The name of blade template to load:
+    | - authenticate: when a user login, and has to validate Webauthn 2nd factor.
+    | - register: when a user request to create a Webauthn key.
+    |
+    | If the views are empty or null, then the route will not be registered.
+    |
+    */
+
+    'views' => [
+        'authenticate' => null,
+        'register' => null,
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session name
+    |--------------------------------------------------------------------------
+    |
+    | Name of the session parameter to store the successful login.
+    |
+    */
+
+    'session_name' => 'webauthn_auth',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Webauthn challenge length
+    |--------------------------------------------------------------------------
+    |
+    | Length of the random string used in the challenge request.
+    |
+    */
+
+    'challenge_length' => 32,
+
+    /*
+    |--------------------------------------------------------------------------
+    | Webauthn timeout (milliseconds)
+    |--------------------------------------------------------------------------
+    |
+    | Time that the caller is willing to wait for the call to complete.
+    |
+    */
+
+    'timeout' => 60000,
+
+    /*
+    |--------------------------------------------------------------------------
+    | Webauthn extension client input
+    |--------------------------------------------------------------------------
+    |
+    | Optional authentication extension.
+    | See https://www.w3.org/TR/webauthn/#client-extension-input
+    |
+    */
+
+    'extensions' => [],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Webauthn icon
+    |--------------------------------------------------------------------------
+    |
+    | Url which resolves to an image associated with the entity.
+    | See https://www.w3.org/TR/webauthn/#dom-publickeycredentialentity-icon
+    |
+    */
+
+    'icon' => env('WEBAUTHN_ICON'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Webauthn Attestation Conveyance
+    |--------------------------------------------------------------------------
+    |
+    | This parameter specify the preference regarding the attestation conveyance
+    | during credential generation.
+    | See https://www.w3.org/TR/webauthn/#enum-attestation-convey
+    |
+    | Supported: "none", "indirect", "direct", "enterprise".
+    */
+
+    'attestation_conveyance' => 'none',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Google Safetynet ApiKey
+    |--------------------------------------------------------------------------
+    |
+    | Api key to use Google Safetynet.
+    | See https://developer.android.com/training/safetynet/attestation
+    |
+    */
+
+    'google_safetynet_api_key' => env('GOOGLE_SAFETYNET_API_KEY'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Webauthn Public Key Credential Parameters
+    |--------------------------------------------------------------------------
+    |
+    | List of allowed Cryptographic Algorithm Identifier.
+    | See https://www.w3.org/TR/webauthn/#sctn-alg-identifier
+    |
+    */
+
+    'public_key_credential_parameters' => [
+        \Cose\Algorithms::COSE_ALGORITHM_ES256, // ECDSA with SHA-256
+        \Cose\Algorithms::COSE_ALGORITHM_ES512, // ECDSA with SHA-512
+        \Cose\Algorithms::COSE_ALGORITHM_RS256, // RSASSA-PKCS1-v1_5 with SHA-256
+        \Cose\Algorithms::COSE_ALGORITHM_EdDSA, // EdDSA
+        \Cose\Algorithms::COSE_ALGORITHM_ES384, // ECDSA with SHA-384
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Credentials Attachment.
+    |--------------------------------------------------------------------------
+    |
+    | Authentication can be tied to the current device (like when using Windows
+    | Hello or Touch ID) or a cross-platform device (like USB Key). When this
+    | is "null" the user will decide where to store his authentication info.
+    |
+    | See https://www.w3.org/TR/webauthn/#enum-attachment
+    |
+    | Supported: "null", "cross-platform", "platform".
+    |
+    */
+
+    'attachment_mode' => null,
+
+    /*
+    |--------------------------------------------------------------------------
+    | User presence and verification
+    |--------------------------------------------------------------------------
+    |
+    | Most authenticators and smartphones will ask the user to actively verify
+    | themselves for log in. Use "required" to always ask verify, "preferred"
+    | to ask when possible, and "discouraged" to just ask for user presence.
+    |
+    | See https://www.w3.org/TR/webauthn/#enum-userVerificationRequirement
+    |
+    | Supported: "required", "preferred", "discouraged".
+    |
+    */
+
+    'user_verification' => 'preferred',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Userless (One touch, Typeless) login
+    |--------------------------------------------------------------------------
+    |
+    | By default, users must input their email to receive a list of credentials
+    | ID to use for authentication, but they can also login without specifying
+    | one if the device can remember them, allowing for true one-touch login.
+    |
+    | If required or preferred, login verification will be always required.
+    |
+    | See https://www.w3.org/TR/webauthn/#enum-residentKeyRequirement
+    |
+    | Supported: "null", "required", "preferred", "discouraged".
+    |
+    */
+
+    'userless' => null,
+
+];
diff --git a/database/factories/UserFactory.php b/database/factories/UserFactory.php
index a9e530b008e..1967e3ecc91 100644
--- a/database/factories/UserFactory.php
+++ b/database/factories/UserFactory.php
@@ -9,6 +9,13 @@
 
 class UserFactory extends Factory
 {
+    /**
+     * The name of the factory's corresponding model.
+     *
+     * @var class-string<\Illuminate\Database\Eloquent\Model>
+     */
+    protected $model = User::class;
+
     /**
      * Define the model's default state.
      *
diff --git a/database/factories/UserTokenFactory.php b/database/factories/UserTokenFactory.php
new file mode 100644
index 00000000000..f0b123d32cf
--- /dev/null
+++ b/database/factories/UserTokenFactory.php
@@ -0,0 +1,33 @@
+<?php
+
+namespace Database\Factories;
+
+use App\Models\User;
+use App\Models\UserToken;
+use Illuminate\Database\Eloquent\Factories\Factory;
+
+class UserTokenFactory extends Factory
+{
+    /**
+     * The name of the factory's corresponding model.
+     *
+     * @var class-string<\Illuminate\Database\Eloquent\Model>
+     */
+    protected $model = UserToken::class;
+
+    /**
+     * Define the model's default state.
+     *
+     * @return array
+     */
+    public function definition()
+    {
+        return [
+            'user_id' => User::factory(),
+            'driver' => 'github',
+            'driver_id' => $this->faker->uuid,
+            'format' => 'oauth2',
+            'token' => $this->faker->word,
+        ];
+    }
+}
diff --git a/database/migrations/2019_03_29_163611_add_webauthn.php b/database/migrations/2019_03_29_163611_add_webauthn.php
new file mode 100644
index 00000000000..e3f804f72f2
--- /dev/null
+++ b/database/migrations/2019_03_29_163611_add_webauthn.php
@@ -0,0 +1,45 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('webauthn_keys', function (Blueprint $table) {
+            $table->id();
+            $table->bigInteger('user_id')->unsigned();
+
+            $table->string('name')->default('key');
+            $table->string('credentialId', 768);
+            $table->string('type', 255);
+            $table->text('transports');
+            $table->string('attestationType', 255);
+            $table->text('trustPath');
+            $table->text('aaguid');
+            $table->text('credentialPublicKey');
+            $table->bigInteger('counter')->unsigned();
+            $table->timestamps();
+
+            $table->foreign('user_id')->references('id')->on('users')->onDelete('cascade');
+            $table->index('credentialId');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('webauthn_keys');
+    }
+};
diff --git a/database/migrations/2021_07_06_065356_user_token_socialite.php b/database/migrations/2021_07_06_065356_user_token_socialite.php
new file mode 100644
index 00000000000..9c98892b3da
--- /dev/null
+++ b/database/migrations/2021_07_06_065356_user_token_socialite.php
@@ -0,0 +1,31 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up()
+    {
+        Schema::create('user_tokens', function (Blueprint $table) {
+            $table->id();
+            $table->unsignedBigInteger('user_id');
+            $table->string('driver_id', 256);
+            $table->string('driver', 50);
+            $table->char('format', 6);
+            $table->string('email', 1024)->nullable();
+            $table->string('token', 2048);
+            $table->string('token_secret', 2048)->nullable();
+            $table->string('refresh_token', 2048)->nullable();
+            $table->unsignedBigInteger('expires_in')->nullable();
+            $table->timestamps();
+
+            $table->foreign('user_id')->references('id')->on('users')->onDelete('cascade');
+            $table->index(['driver', 'driver_id']);
+        });
+    }
+};
diff --git a/lang/en/auth.php b/lang/en/auth.php
index f023d2eec4f..ef0272b4c25 100644
--- a/lang/en/auth.php
+++ b/lang/en/auth.php
@@ -14,4 +14,6 @@
     'login_password' => 'Your password',
     'login_cta' => 'Login →',
     'login_invalid_credentials' => '😳 Invalid credentials',
+
+    'login_provider_github' => 'GitHub',
 ];
diff --git a/public/img/auth/github.svg b/public/img/auth/github.svg
new file mode 100644
index 00000000000..7d2cf98ad62
--- /dev/null
+++ b/public/img/auth/github.svg
@@ -0,0 +1 @@
+<svg width="161.03" height="161.03" version="1.1" viewBox="0 0 42.607 42.607" xmlns="http://www.w3.org/2000/svg"><path d="m21.303 0.526c-11.764 0-21.304 9.5377-21.304 21.304 0 9.4125 6.1041 17.398 14.569 20.215 1.0647 0.1972 1.4556-0.46214 1.4556-1.0248 0-0.508-0.01976-2.1862-0.02893-3.9663-5.9267 1.2887-7.1773-2.5135-7.1773-2.5135-0.96908-2.4624-2.3654-3.1171-2.3654-3.1171-1.9329-1.3222 0.1457-1.295 0.1457-1.295 2.1392 0.14993 3.2657 2.1957 3.2657 2.1957 1.9001 3.2565 4.9837 2.3149 6.1994 1.7706 0.1912-1.3769 0.7433-2.317 1.3526-2.8487-4.7318-0.53869-9.706-2.3654-9.706-10.528 0-2.3259 0.8322-4.2263 2.195-5.7182-0.22119-0.53693-0.95038-2.7033 0.20637-5.6377 0 0 1.7889-0.57256 5.86 2.1837 1.6993-0.47202 3.5218-0.70873 5.3322-0.71684 1.8105 0.0081 3.6343 0.24483 5.3368 0.71684 4.0661-2.7563 5.8526-2.1837 5.8526-2.1837 1.1596 2.9344 0.43004 5.1008 0.20884 5.6377 1.366 1.4919 2.1925 3.3923 2.1925 5.7182 0 8.1823-4.9837 9.984-9.7275 10.511 0.76412 0.6611 1.445 1.9576 1.445 3.9451 0 2.8504-0.02469 5.1446-0.02469 5.8462 0 0.56692 0.38347 1.2312 1.4633 1.022 8.46-2.8201 14.556-10.803 14.556-20.212-1.1e-5 -11.766-9.5381-21.304-21.303-21.304" fill="#1b1817" fill-rule="evenodd" stroke-width=".035"/></svg>
diff --git a/resources/js/Components/ApplicationLogo.vue b/resources/js/Components/ApplicationLogo.vue
index e69fb5acc6a..0471496de17 100644
--- a/resources/js/Components/ApplicationLogo.vue
+++ b/resources/js/Components/ApplicationLogo.vue
@@ -1,6 +1,53 @@
 <template>
-  <svg viewBox="0 0 316 316" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    class="h-20 w-20 fill-current text-gray-500"
+    viewBox="0 0 390 353"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
     <path
-      d="M305.8 81.125C305.77 80.995 305.69 80.885 305.65 80.755C305.56 80.525 305.49 80.285 305.37 80.075C305.29 79.935 305.17 79.815 305.07 79.685C304.94 79.515 304.83 79.325 304.68 79.175C304.55 79.045 304.39 78.955 304.25 78.845C304.09 78.715 303.95 78.575 303.77 78.475L251.32 48.275C249.97 47.495 248.31 47.495 246.96 48.275L194.51 78.475C194.33 78.575 194.19 78.725 194.03 78.845C193.89 78.955 193.73 79.045 193.6 79.175C193.45 79.325 193.34 79.515 193.21 79.685C193.11 79.815 192.99 79.935 192.91 80.075C192.79 80.285 192.71 80.525 192.63 80.755C192.58 80.875 192.51 80.995 192.48 81.125C192.38 81.495 192.33 81.875 192.33 82.265V139.625L148.62 164.795V52.575C148.62 52.185 148.57 51.805 148.47 51.435C148.44 51.305 148.36 51.195 148.32 51.065C148.23 50.835 148.16 50.595 148.04 50.385C147.96 50.245 147.84 50.125 147.74 49.995C147.61 49.825 147.5 49.635 147.35 49.485C147.22 49.355 147.06 49.265 146.92 49.155C146.76 49.025 146.62 48.885 146.44 48.785L93.99 18.585C92.64 17.805 90.98 17.805 89.63 18.585L37.18 48.785C37 48.885 36.86 49.035 36.7 49.155C36.56 49.265 36.4 49.355 36.27 49.485C36.12 49.635 36.01 49.825 35.88 49.995C35.78 50.125 35.66 50.245 35.58 50.385C35.46 50.595 35.38 50.835 35.3 51.065C35.25 51.185 35.18 51.305 35.15 51.435C35.05 51.805 35 52.185 35 52.575V232.235C35 233.795 35.84 235.245 37.19 236.025L142.1 296.425C142.33 296.555 142.58 296.635 142.82 296.725C142.93 296.765 143.04 296.835 143.16 296.865C143.53 296.965 143.9 297.015 144.28 297.015C144.66 297.015 145.03 296.965 145.4 296.865C145.5 296.835 145.59 296.775 145.69 296.745C145.95 296.655 146.21 296.565 146.45 296.435L251.36 236.035C252.72 235.255 253.55 233.815 253.55 232.245V174.885L303.81 145.945C305.17 145.165 306 143.725 306 142.155V82.265C305.95 81.875 305.89 81.495 305.8 81.125ZM144.2 227.205L100.57 202.515L146.39 176.135L196.66 147.195L240.33 172.335L208.29 190.625L144.2 227.205ZM244.75 114.995V164.795L226.39 154.225L201.03 139.625V89.825L219.39 100.395L244.75 114.995ZM249.12 57.105L292.81 82.265L249.12 107.425L205.43 82.265L249.12 57.105ZM114.49 184.425L96.13 194.995V85.305L121.49 70.705L139.85 60.135V169.815L114.49 184.425ZM91.76 27.425L135.45 52.585L91.76 77.745L48.07 52.585L91.76 27.425ZM43.67 60.135L62.03 70.705L87.39 85.305V202.545V202.555V202.565C87.39 202.735 87.44 202.895 87.46 203.055C87.49 203.265 87.49 203.485 87.55 203.695V203.705C87.6 203.875 87.69 204.035 87.76 204.195C87.84 204.375 87.89 204.575 87.99 204.745C87.99 204.745 87.99 204.755 88 204.755C88.09 204.905 88.22 205.035 88.33 205.175C88.45 205.335 88.55 205.495 88.69 205.635L88.7 205.645C88.82 205.765 88.98 205.855 89.12 205.965C89.28 206.085 89.42 206.225 89.59 206.325C89.6 206.325 89.6 206.325 89.61 206.335C89.62 206.335 89.62 206.345 89.63 206.345L139.87 234.775V285.065L43.67 229.705V60.135ZM244.75 229.705L148.58 285.075V234.775L219.8 194.115L244.75 179.875V229.705ZM297.2 139.625L253.49 164.795V114.995L278.85 100.395L297.21 89.825V139.625H297.2Z" />
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M198.147 353C289.425 353 390.705 294.334 377.899 181.5C365.093 68.6657 289.425 10 198.147 10C106.869 10 31.794 61.4285 12.2144 181.5C-7.36527 301.571 106.869 353 198.147 353Z"
+      fill="#2C2B29" />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M196.926 320C270.146 320 351.389 272.965 341.117 182.5C330.844 92.0352 270.146 45 196.926 45C123.705 45 63.4825 86.2328 47.7763 182.5C32.0701 278.767 123.705 320 196.926 320Z"
+      fill="white" />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M52.4154 132C62.3371 132.033 66.6473 96.5559 84.3659 80.4033C100.632 65.5752 138 60.4908 138 43.3473C138 7.52904 99.1419 0 64.8295 0C30.517 0 0 36.3305 0 72.1487C0 107.967 33.3855 131.937 52.4154 132Z"
+      fill="#2C2B29" />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M337.585 132C327.663 132.033 323.353 96.5559 305.634 80.4033C289.368 65.5752 252 60.4908 252 43.3473C252 7.52904 290.858 0 325.171 0C359.483 0 390 36.3305 390 72.1487C390 107.967 356.615 131.937 337.585 132Z"
+      fill="#2C2B29" />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M275.651 252.546C301.619 246.357 312.447 235.443 312.447 200.175C312.447 164.907 295.905 129.098 267.423 129.098C238.941 129.098 220.028 154.564 220.028 189.832C220.028 225.1 249.682 258.734 275.651 252.546Z"
+      fill="#2B2A28" />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M266.143 207.804C273.209 207.804 275.311 206.002 278.505 201.954C282.087 197.416 284.758 192.151 283.885 181.278C282.426 163.109 274.764 154.752 259.773 154.752C244.783 154.752 241.859 166.27 241.859 181.278C241.859 196.286 251.152 207.804 266.143 207.804Z"
+      fill="white" />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M115.349 252.546C89.3806 246.357 78.5526 235.443 78.5526 200.175C78.5526 164.907 95.0948 129.098 123.577 129.098C152.059 129.098 170.972 154.564 170.972 189.832C170.972 225.1 141.318 258.734 115.349 252.546Z"
+      fill="#2B2A28" />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M124.857 207.804C117.791 207.804 115.689 206.002 112.495 201.954C108.913 197.416 106.242 192.151 107.115 181.278C108.574 163.109 116.236 154.752 131.227 154.752C146.217 154.752 149.141 166.27 149.141 181.278C149.141 196.286 139.848 207.804 124.857 207.804Z"
+      fill="white" />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M196.204 276C210.316 276 224 255.244 224 246.342C224 237.441 210.112 236 196 236C181.888 236 168 237.441 168 246.342C168 255.244 182.092 276 196.204 276Z"
+      fill="#2C2B29" />
   </svg>
 </template>
diff --git a/resources/js/Components/Jetstream/AuthenticationCardLogo.vue b/resources/js/Components/AuthenticationCardLogo.vue
similarity index 50%
rename from resources/js/Components/Jetstream/AuthenticationCardLogo.vue
rename to resources/js/Components/AuthenticationCardLogo.vue
index d71db97e680..981bddbf1d9 100644
--- a/resources/js/Components/Jetstream/AuthenticationCardLogo.vue
+++ b/resources/js/Components/AuthenticationCardLogo.vue
@@ -1,14 +1,12 @@
 <script setup>
 import { Link } from '@inertiajs/inertia-vue3';
-import MonicaLogo from '@/Layouts/MonicaLogo.vue';
-import OfficeLifeLogo from '@/Layouts/OfficeLifeLogo.vue';
+import ApplicationLogo from '@/Components/ApplicationLogo.vue';
 </script>
 
 <template>
   <Link :href="'/'">
     <div class="flex items-center">
-      <OfficeLifeLogo class="mr-4" />
-      <MonicaLogo />
+      <ApplicationLogo />
     </div>
   </Link>
 </template>
diff --git a/resources/js/Components/Breadcrumb.vue b/resources/js/Components/Breadcrumb.vue
new file mode 100644
index 00000000000..9403a41d383
--- /dev/null
+++ b/resources/js/Components/Breadcrumb.vue
@@ -0,0 +1,36 @@
+<script setup>
+defineProps({
+  items: Array,
+});
+</script>
+
+<template>
+  <div class="flex items-baseline justify-between space-x-6">
+    <ul class="text-sm">
+      <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+        {{ $t('app.breadcrumb_location') }}
+      </li>
+      <template v-for="(item, index) in items" :key="index">
+        <li v-if="index > 0" class="relative ml-2 inline">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="icon-breadcrumb relative inline h-3 w-3"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+          </svg>
+        </li>
+
+        <li class="inline" :class="{ 'ml-2': index > 0 }">
+          <inertia-link v-if="item.url" :href="item.url" class="text-blue-500 hover:underline">
+            {{ item.name }}
+          </inertia-link>
+          <template v-else>
+            {{ item.name }}
+          </template>
+        </li>
+      </template>
+    </ul>
+  </div>
+</template>
diff --git a/resources/js/Components/Button.vue b/resources/js/Components/Button.vue
index d0b20dc8e21..9227a0103ce 100644
--- a/resources/js/Components/Button.vue
+++ b/resources/js/Components/Button.vue
@@ -1,18 +1,16 @@
+<script setup>
+defineProps({
+  type: {
+    type: String,
+    default: 'submit',
+  },
+});
+</script>
+
 <template>
   <button
     :type="type"
-    class="focus:shadow-outline-gray inline-flex items-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-xs font-semibold uppercase tracking-widest text-white transition duration-150 ease-in-out hover:bg-gray-700 focus:border-gray-900 focus:outline-none active:bg-gray-900">
+    class="inline-flex items-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-xs font-semibold uppercase tracking-widest text-white transition hover:bg-gray-700 focus:border-gray-900 focus:outline-none focus:ring focus:ring-gray-300 active:bg-gray-900 disabled:opacity-25 dark:bg-gray-200 dark:text-gray-800 hover:dark:bg-gray-300 focus:dark:border-gray-100 focus:dark:ring-gray-700 active:dark:bg-gray-100">
     <slot />
   </button>
 </template>
-
-<script>
-export default {
-  props: {
-    type: {
-      type: String,
-      default: 'submit',
-    },
-  },
-};
-</script>
diff --git a/resources/js/Components/Checkbox.vue b/resources/js/Components/Checkbox.vue
index 132ed78774a..14507208120 100644
--- a/resources/js/Components/Checkbox.vue
+++ b/resources/js/Components/Checkbox.vue
@@ -1,3 +1,30 @@
+<script setup>
+import { computed } from 'vue';
+
+const emit = defineEmits(['update:checked']);
+
+const props = defineProps({
+  checked: {
+    type: [Array, Boolean],
+    default: false,
+  },
+  value: {
+    type: String,
+    default: null,
+  },
+});
+
+const proxyChecked = computed({
+  get() {
+    return props.checked;
+  },
+
+  set(val) {
+    emit('update:checked', val);
+  },
+});
+</script>
+
 <template>
   <input
     v-model="proxyChecked"
@@ -5,31 +32,3 @@
     :value="value"
     class="focus:dark:ring-opacity-900 rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:border-gray-700 dark:bg-gray-900 dark:text-indigo-400 focus:dark:border-indigo-700 focus:dark:ring-indigo-800" />
 </template>
-
-<script>
-export default {
-  props: {
-    checked: {
-      type: [Array, Boolean],
-      default: false,
-    },
-    value: {
-      type: [String, Number],
-      default: null,
-    },
-  },
-  emits: ['update:checked'],
-
-  computed: {
-    proxyChecked: {
-      get() {
-        return this.checked;
-      },
-
-      set(val) {
-        this.$emit('update:checked', val);
-      },
-    },
-  },
-};
-</script>
diff --git a/resources/js/Components/Dropdown.vue b/resources/js/Components/Dropdown.vue
index df2e9de537b..dfd8567ffbe 100644
--- a/resources/js/Components/Dropdown.vue
+++ b/resources/js/Components/Dropdown.vue
@@ -1,3 +1,51 @@
+<script setup>
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+
+const props = defineProps({
+  align: {
+    type: String,
+    default: 'right',
+  },
+  width: {
+    type: String,
+    default: '48',
+  },
+  contentClasses: {
+    type: Array,
+    default: () => ['py-1', 'bg-white', 'dark:bg-gray-900'],
+  },
+});
+
+const open = ref(false);
+
+const closeOnEscape = (e) => {
+  if (open.value && e.key === 'Escape') {
+    open.value = false;
+  }
+};
+
+onMounted(() => document.addEventListener('keydown', closeOnEscape));
+onUnmounted(() => document.removeEventListener('keydown', closeOnEscape));
+
+const widthClass = computed(() => {
+  return {
+    48: 'w-48',
+  }[props.width.toString()];
+});
+
+const alignmentClasses = computed(() => {
+  if (props.align === 'left') {
+    return 'origin-top-left left-0';
+  }
+
+  if (props.align === 'right') {
+    return 'origin-top-right right-0';
+  }
+
+  return 'origin-top';
+});
+</script>
+
 <template>
   <div class="relative">
     <div @click="open = !open">
@@ -16,7 +64,7 @@
       leave-to-class="transform opacity-0 scale-95">
       <div
         v-show="open"
-        class="absolute z-50 mt-2 rounded-md shadow-lg"
+        class="absolute z-50 mt-2 rounded-md shadow-lg dark:shadow-gray-700"
         :class="[widthClass, alignmentClasses]"
         style="display: none"
         @click="open = false">
@@ -27,59 +75,3 @@
     </transition>
   </div>
 </template>
-
-<script>
-import { onMounted, onUnmounted, ref } from 'vue';
-
-export default {
-  props: {
-    align: {
-      type: String,
-      default: 'right',
-    },
-    width: {
-      type: String,
-      default: '48',
-    },
-    contentClasses: {
-      type: [String, Array],
-      default: () => ['py-1', 'bg-white', 'dark:bg-gray-900'],
-    },
-  },
-
-  setup() {
-    let open = ref(false);
-
-    const closeOnEscape = (e) => {
-      if (open.value && e.keyCode === 27) {
-        open.value = false;
-      }
-    };
-
-    onMounted(() => document.addEventListener('keydown', closeOnEscape));
-    onUnmounted(() => document.removeEventListener('keydown', closeOnEscape));
-
-    return {
-      open,
-    };
-  },
-
-  computed: {
-    widthClass() {
-      return {
-        48: 'w-48',
-      }[this.width.toString()];
-    },
-
-    alignmentClasses() {
-      if (this.align === 'left') {
-        return 'origin-top-left left-0';
-      } else if (this.align === 'right') {
-        return 'origin-top-right right-0';
-      } else {
-        return 'origin-top';
-      }
-    },
-  },
-};
-</script>
diff --git a/resources/js/Components/DropdownLink.vue b/resources/js/Components/DropdownLink.vue
index 59c9e642c34..11ea98de44a 100644
--- a/resources/js/Components/DropdownLink.vue
+++ b/resources/js/Components/DropdownLink.vue
@@ -1,12 +1,33 @@
-<template>
-  <inertia-link
-    class="block w-full px-4 py-2 text-left text-sm leading-5 text-gray-700 transition duration-150 ease-in-out hover:bg-gray-100 focus:bg-gray-100 focus:outline-none dark:text-gray-300 hover:dark:bg-gray-900">
-    <slot />
-  </inertia-link>
-</template>
+<script setup>
+import { Link } from '@inertiajs/inertia-vue3';
 
-<script>
-export default {
-  components: {},
-};
+defineProps({
+  href: String,
+  as: String,
+});
 </script>
+
+<template>
+  <div>
+    <button
+      v-if="as == 'button'"
+      type="submit"
+      class="block w-full px-4 py-2 text-left text-sm leading-5 text-gray-700 transition hover:bg-gray-100 focus:bg-gray-100 focus:outline-none dark:text-gray-300 hover:dark:bg-gray-900">
+      <slot />
+    </button>
+
+    <a
+      v-else-if="as == 'a'"
+      :href="href"
+      class="block px-4 py-2 text-sm leading-5 text-gray-700 transition hover:bg-gray-100 focus:bg-gray-100 focus:outline-none dark:text-gray-300 hover:dark:bg-gray-900">
+      <slot />
+    </a>
+
+    <Link
+      v-else
+      :href="href"
+      class="block px-4 py-2 text-sm leading-5 text-gray-700 transition hover:bg-gray-100 focus:bg-gray-100 focus:outline-none dark:text-gray-300 hover:dark:bg-gray-900">
+      <slot />
+    </Link>
+  </div>
+</template>
diff --git a/resources/js/Components/Input.vue b/resources/js/Components/Input.vue
index a0574358957..6c3e7062a4f 100644
--- a/resources/js/Components/Input.vue
+++ b/resources/js/Components/Input.vue
@@ -1,26 +1,27 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+
+defineProps({
+  modelValue: String,
+});
+
+defineEmits(['update:modelValue']);
+
+const input = ref(null);
+
+onMounted(() => {
+  if (input.value.hasAttribute('autofocus')) {
+    input.value.focus();
+  }
+});
+
+defineExpose({ focus: () => input.value.focus() });
+</script>
+
 <template>
   <input
     ref="input"
-    class="focus:dark:ring-opacity-900 rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:border-gray-700 focus:dark:border-indigo-700 focus:dark:ring-indigo-800"
+    class="rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:border-gray-600 dark:bg-gray-900 dark:shadow-gray-700 focus:dark:border-indigo-700"
     :value="modelValue"
     @input="$emit('update:modelValue', $event.target.value)" />
 </template>
-
-<script>
-export default {
-  props: {
-    modelValue: {
-      type: String,
-      default: '',
-    },
-  },
-
-  emits: ['update:modelValue'],
-
-  methods: {
-    focus() {
-      this.$refs.input.focus();
-    },
-  },
-};
-</script>
diff --git a/resources/js/Components/InputError.vue b/resources/js/Components/InputError.vue
index b9fdb046f4b..4c32b94c03d 100644
--- a/resources/js/Components/InputError.vue
+++ b/resources/js/Components/InputError.vue
@@ -1,3 +1,9 @@
+<script setup>
+defineProps({
+  message: String,
+});
+</script>
+
 <template>
   <div v-show="message">
     <p class="text-sm text-red-600 dark:text-red-400">
@@ -5,14 +11,3 @@
     </p>
   </div>
 </template>
-
-<script>
-export default {
-  props: {
-    message: {
-      type: String,
-      default: '',
-    },
-  },
-};
-</script>
diff --git a/resources/js/Components/Jetstream/ActionSection.vue b/resources/js/Components/Jetstream/ActionSection.vue
index 8e17a950e4e..16d6c42b359 100644
--- a/resources/js/Components/Jetstream/ActionSection.vue
+++ b/resources/js/Components/Jetstream/ActionSection.vue
@@ -1,6 +1,7 @@
 <script setup>
 import JetSectionTitle from './SectionTitle.vue';
 
+defineEmits(['submit']);
 defineProps({
   danger: {
     type: Boolean,
@@ -10,22 +11,24 @@ defineProps({
 </script>
 
 <template>
-  <div class="md:grid md:grid-cols-3 md:gap-6">
-    <JetSectionTitle>
+  <div>
+    <JetSectionTitle :editMode="true">
       <template #title>
         <slot name="title" />
       </template>
       <template #description>
         <slot name="description" />
       </template>
+      <template #icon>
+        <slot name="icon" />
+      </template>
+      <template #help>
+        <slot name="help" />
+      </template>
     </JetSectionTitle>
 
-    <div class="mt-5 md:col-span-2 md:mt-0">
-      <div
-        class="px-4 py-5 shadow dark:shadow-gray-700 sm:rounded-lg sm:p-6"
-        :class="
-          danger ? ['border-red-600 bg-red-50 dark:border-red-400 dark:bg-red-900'] : ['bg-white dark:bg-gray-900']
-        ">
+    <div class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
+      <div class="border-b border-gray-200 px-5 py-4 dark:border-gray-700">
         <slot name="content" />
       </div>
     </div>
diff --git a/resources/js/Components/Jetstream/ApplicationLogo.vue b/resources/js/Components/Jetstream/ApplicationLogo.vue
deleted file mode 100644
index 544698c3aff..00000000000
--- a/resources/js/Components/Jetstream/ApplicationLogo.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup>
-import MonicaLogo from '@/Layouts/MonicaLogo.vue';
-import OfficeLifeLogo from '@/Layouts/OfficeLifeLogo.vue';
-</script>
-
-<template>
-  <div class="flex items-center">
-    <OfficeLifeLogo class="mr-4" />
-    <MonicaLogo />
-  </div>
-</template>
diff --git a/resources/js/Components/Jetstream/ApplicationMark.vue b/resources/js/Components/Jetstream/ApplicationMark.vue
deleted file mode 100644
index 8aa20475c82..00000000000
--- a/resources/js/Components/Jetstream/ApplicationMark.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<template>
-  <svg 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>
-</template>
diff --git a/resources/js/Components/Jetstream/Button.vue b/resources/js/Components/Jetstream/Button.vue
deleted file mode 100644
index 226b645444f..00000000000
--- a/resources/js/Components/Jetstream/Button.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script setup>
-defineProps({
-  type: {
-    type: String,
-    default: 'submit',
-  },
-});
-</script>
-
-<template>
-  <button
-    :type="type"
-    class="inline-flex items-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-xs font-semibold uppercase tracking-widest text-white transition hover:bg-gray-700 focus:border-gray-900 focus:outline-none focus:ring focus:ring-gray-300 active:bg-gray-900 disabled:opacity-25">
-    <slot />
-  </button>
-</template>
diff --git a/resources/js/Components/Jetstream/Checkbox.vue b/resources/js/Components/Jetstream/Checkbox.vue
deleted file mode 100644
index 5541a8c3b7f..00000000000
--- a/resources/js/Components/Jetstream/Checkbox.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-
-const emit = defineEmits(['update:checked']);
-
-const props = defineProps({
-  checked: {
-    type: [Array, Boolean],
-    default: false,
-  },
-  value: {
-    type: String,
-    default: null,
-  },
-});
-
-const proxyChecked = computed({
-  get() {
-    return props.checked;
-  },
-
-  set(val) {
-    emit('update:checked', val);
-  },
-});
-</script>
-
-<template>
-  <input
-    v-model="proxyChecked"
-    type="checkbox"
-    :value="value"
-    class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:shadow-gray-700 dark:shadow-gray-700" />
-</template>
diff --git a/resources/js/Components/Jetstream/ConfirmsPassword.vue b/resources/js/Components/Jetstream/ConfirmsPassword.vue
index e1a99b7b95e..00eb56f1229 100644
--- a/resources/js/Components/Jetstream/ConfirmsPassword.vue
+++ b/resources/js/Components/Jetstream/ConfirmsPassword.vue
@@ -1,25 +1,26 @@
 <script setup>
 import { ref, reactive, nextTick } from 'vue';
-import JetButton from './Button.vue';
-import JetDialogModal from './DialogModal.vue';
-import JetInput from './Input.vue';
-import JetInputError from './InputError.vue';
-import JetSecondaryButton from './SecondaryButton.vue';
+import { trans } from 'laravel-vue-i18n';
+import Button from '@/Components/Button.vue';
+import JetDialogModal from '@/Components/Jetstream/DialogModal.vue';
+import Input from '@/Components/Input.vue';
+import InputError from '@/Components/InputError.vue';
+import JetSecondaryButton from '@/Components/Jetstream/SecondaryButton.vue';
 
 const emit = defineEmits(['confirmed']);
 
 defineProps({
   title: {
     type: String,
-    default: 'Confirm Password',
+    default: trans('Confirm Password'),
   },
   content: {
     type: String,
-    default: 'For your security, please confirm your password to continue.',
+    default: trans('For your security, please confirm your password to continue.'),
   },
   button: {
     type: String,
-    default: 'Confirm',
+    default: trans('Confirm'),
   },
 });
 
@@ -87,15 +88,15 @@ const closeModal = () => {
         {{ content }}
 
         <div class="mt-4">
-          <JetInput
+          <Input
             ref="passwordInput"
             v-model="form.password"
             type="password"
             class="mt-1 block w-3/4"
-            placeholder="Password"
+            :placeholder="$t('Password')"
             @keyup.enter="confirmPassword" />
 
-          <JetInputError :message="form.error" class="mt-2" />
+          <InputError :message="form.error" class="mt-2" />
         </div>
       </template>
 
@@ -104,13 +105,13 @@ const closeModal = () => {
           {{ $t('Cancel') }}
         </JetSecondaryButton>
 
-        <JetButton
+        <Button
           class="ml-3"
           :class="{ 'opacity-25': form.processing }"
           :disabled="form.processing"
           @click="confirmPassword">
           {{ button }}
-        </JetButton>
+        </Button>
       </template>
     </JetDialogModal>
   </span>
diff --git a/resources/js/Components/Jetstream/Dropdown.vue b/resources/js/Components/Jetstream/Dropdown.vue
deleted file mode 100644
index dc0a91ec948..00000000000
--- a/resources/js/Components/Jetstream/Dropdown.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<script setup>
-import { computed, onMounted, onUnmounted, ref } from 'vue';
-
-const props = defineProps({
-  align: {
-    type: String,
-    default: 'right',
-  },
-  width: {
-    type: String,
-    default: '48',
-  },
-  contentClasses: {
-    type: Array,
-    default: () => ['py-1', 'bg-white'],
-  },
-});
-
-const open = ref(false);
-
-const closeOnEscape = (e) => {
-  if (open.value && e.key === 'Escape') {
-    open.value = false;
-  }
-};
-
-onMounted(() => document.addEventListener('keydown', closeOnEscape));
-onUnmounted(() => document.removeEventListener('keydown', closeOnEscape));
-
-const widthClass = computed(() => {
-  return {
-    48: 'w-48',
-  }[props.width.toString()];
-});
-
-const alignmentClasses = computed(() => {
-  if (props.align === 'left') {
-    return 'origin-top-left left-0';
-  }
-
-  if (props.align === 'right') {
-    return 'origin-top-right right-0';
-  }
-
-  return 'origin-top';
-});
-</script>
-
-<template>
-  <div class="relative">
-    <div @click="open = !open">
-      <slot name="trigger" />
-    </div>
-
-    <!-- Full Screen Dropdown Overlay -->
-    <div v-show="open" class="fixed inset-0 z-40" @click="open = false" />
-
-    <transition
-      enter-active-class="transition ease-out duration-200"
-      enter-from-class="transform opacity-0 scale-95"
-      enter-to-class="transform opacity-100 scale-100"
-      leave-active-class="transition ease-in duration-75"
-      leave-from-class="transform opacity-100 scale-100"
-      leave-to-class="transform opacity-0 scale-95">
-      <div
-        v-show="open"
-        class="absolute z-50 mt-2 rounded-md shadow-lg dark:shadow-gray-700 dark:shadow-gray-700"
-        :class="[widthClass, alignmentClasses]"
-        style="display: none"
-        @click="open = false">
-        <div class="rounded-md ring-1 ring-black ring-opacity-5" :class="contentClasses">
-          <slot name="content" />
-        </div>
-      </div>
-    </transition>
-  </div>
-</template>
diff --git a/resources/js/Components/Jetstream/DropdownLink.vue b/resources/js/Components/Jetstream/DropdownLink.vue
deleted file mode 100644
index 64a31a8ba13..00000000000
--- a/resources/js/Components/Jetstream/DropdownLink.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<script setup>
-import { Link } from '@inertiajs/inertia-vue3';
-
-defineProps({
-  href: String,
-  as: String,
-});
-</script>
-
-<template>
-  <div>
-    <button
-      v-if="as == 'button'"
-      type="submit"
-      class="block w-full px-4 py-2 text-left text-sm leading-5 text-gray-700 transition hover:bg-gray-100 focus:bg-gray-100 focus:outline-none">
-      <slot />
-    </button>
-
-    <a
-      v-else-if="as == 'a'"
-      :href="href"
-      class="block px-4 py-2 text-sm leading-5 text-gray-700 transition hover:bg-gray-100 focus:bg-gray-100 focus:outline-none">
-      <slot />
-    </a>
-
-    <Link
-      v-else
-      :href="href"
-      class="block px-4 py-2 text-sm leading-5 text-gray-700 transition hover:bg-gray-100 focus:bg-gray-100 focus:outline-none">
-      <slot />
-    </Link>
-  </div>
-</template>
diff --git a/resources/js/Components/Jetstream/FormSection.vue b/resources/js/Components/Jetstream/FormSection.vue
index 14b02fcff66..5e98a843a8f 100644
--- a/resources/js/Components/Jetstream/FormSection.vue
+++ b/resources/js/Components/Jetstream/FormSection.vue
@@ -1,39 +1,59 @@
 <script setup>
-import { computed, useSlots } from 'vue';
+import { computed, ref, useSlots } from 'vue';
 import JetSectionTitle from './SectionTitle.vue';
 
-defineEmits(['submitted']);
+const emit = defineEmits(['submitted']);
+const props = defineProps({
+  useEditMode: Boolean,
+});
 
 const hasActions = computed(() => !!useSlots().actions);
+const editMode = ref(!props.useEditMode);
+
+const submit = () => {
+  emit('submitted');
+  if (props.useEditMode) {
+    editMode.value = false;
+  }
+};
 </script>
 
 <template>
-  <div class="md:grid md:grid-cols-3 md:gap-6">
-    <JetSectionTitle>
+  <div>
+    <JetSectionTitle :editMode="editMode" @edit="editMode = true">
       <template #title>
         <slot name="title" />
       </template>
       <template #description>
         <slot name="description" />
       </template>
+      <template #icon>
+        <slot name="icon" />
+      </template>
+      <template #help>
+        <slot name="help" />
+      </template>
     </JetSectionTitle>
 
-    <div class="mt-5 md:col-span-2 md:mt-0">
-      <form @submit.prevent="$emit('submitted')">
-        <div
-          class="bg-white px-4 py-5 shadow dark:bg-gray-900 dark:shadow-gray-700 sm:p-6"
-          :class="hasActions ? 'sm:rounded-tl-md sm:rounded-tr-md' : 'sm:rounded-md'">
-          <div class="grid grid-cols-6 gap-6">
-            <slot name="form" />
-          </div>
-        </div>
-
-        <div
-          v-if="hasActions"
-          class="flex items-center justify-end bg-gray-50 px-4 py-3 text-right shadow dark:bg-gray-900 dark:shadow-gray-700 sm:rounded-bl-md sm:rounded-br-md sm:px-6">
-          <slot name="actions" />
-        </div>
-      </form>
+    <!-- normal mode -->
+    <div v-if="!editMode" class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
+      <slot name="content" />
     </div>
+
+    <!-- edit mode -->
+    <form
+      v-if="editMode"
+      class="bg-form mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900"
+      @submit.prevent="submit">
+      <div class="border-b border-gray-200 px-5 py-4 dark:border-gray-700">
+        <slot name="form" />
+      </div>
+
+      <div
+        v-if="hasActions"
+        class="flex items-center justify-end bg-gray-50 px-4 py-3 text-right shadow dark:bg-gray-900 dark:shadow-gray-700 sm:rounded-bl-md sm:rounded-br-md sm:px-6">
+        <slot name="actions" />
+      </div>
+    </form>
   </div>
 </template>
diff --git a/resources/js/Components/Jetstream/Input.vue b/resources/js/Components/Jetstream/Input.vue
deleted file mode 100644
index 6c3e7062a4f..00000000000
--- a/resources/js/Components/Jetstream/Input.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<script setup>
-import { onMounted, ref } from 'vue';
-
-defineProps({
-  modelValue: String,
-});
-
-defineEmits(['update:modelValue']);
-
-const input = ref(null);
-
-onMounted(() => {
-  if (input.value.hasAttribute('autofocus')) {
-    input.value.focus();
-  }
-});
-
-defineExpose({ focus: () => input.value.focus() });
-</script>
-
-<template>
-  <input
-    ref="input"
-    class="rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:border-gray-600 dark:bg-gray-900 dark:shadow-gray-700 focus:dark:border-indigo-700"
-    :value="modelValue"
-    @input="$emit('update:modelValue', $event.target.value)" />
-</template>
diff --git a/resources/js/Components/Jetstream/InputError.vue b/resources/js/Components/Jetstream/InputError.vue
deleted file mode 100644
index 4c32b94c03d..00000000000
--- a/resources/js/Components/Jetstream/InputError.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<script setup>
-defineProps({
-  message: String,
-});
-</script>
-
-<template>
-  <div v-show="message">
-    <p class="text-sm text-red-600 dark:text-red-400">
-      {{ message }}
-    </p>
-  </div>
-</template>
diff --git a/resources/js/Components/Jetstream/Label.vue b/resources/js/Components/Jetstream/Label.vue
deleted file mode 100644
index edd6886671a..00000000000
--- a/resources/js/Components/Jetstream/Label.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script setup>
-defineProps({
-  value: String,
-});
-</script>
-
-<template>
-  <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">
-    <span v-if="value">
-      {{ $t(value) }}
-    </span>
-    <span v-else>
-      <slot />
-    </span>
-  </label>
-</template>
diff --git a/resources/js/Components/Jetstream/NavLink.vue b/resources/js/Components/Jetstream/NavLink.vue
deleted file mode 100644
index 49814156af8..00000000000
--- a/resources/js/Components/Jetstream/NavLink.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { Link } from '@inertiajs/inertia-vue3';
-
-const props = defineProps({
-  href: String,
-  active: Boolean,
-});
-
-const classes = computed(() => {
-  return props.active
-    ? 'inline-flex items-center px-1 pt-1 border-b-2 border-indigo-400 dark:border-indigo-600 text-sm font-medium leading-5 text-gray-900 dark:text-gray-100 focus:outline-none focus:border-indigo-700 focus:dark:border-indigo-300 transition'
-    : '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:dark:text-gray-300 hover:border-gray-300 hover:dark:border-gray-700 focus:outline-none focus:text-gray-700 focus:dark:text-gray-300 focus:border-gray-300 focus:dark:border-gray-700 transition';
-});
-</script>
-
-<template>
-  <Link :href="href" :class="classes">
-    <slot />
-  </Link>
-</template>
diff --git a/resources/js/Components/Jetstream/ResponsiveNavLink.vue b/resources/js/Components/Jetstream/ResponsiveNavLink.vue
deleted file mode 100644
index 30a157ad330..00000000000
--- a/resources/js/Components/Jetstream/ResponsiveNavLink.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { Link } from '@inertiajs/inertia-vue3';
-
-const props = defineProps({
-  active: Boolean,
-  href: String,
-  as: String,
-});
-
-const classes = computed(() => {
-  return props.active
-    ? 'block pl-3 pr-4 py-2 border-l-4 border-indigo-400 text-base font-medium text-indigo-700 dark:text-indigo-300 bg-indigo-50 dark:bg-indigo-900 focus:outline-none focus:text-indigo-800 focus:dark:text-indigo-200 focus:bg-indigo-100 focus:dark:bg-indigo-900 focus:border-indigo-700 focus:dark:border-indigo-300 transition'
-    : 'block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 dark:text-gray-400 hover:text-gray-800 hover:dark:text-gray-200 hover:bg-gray-50 hover:dark:bg-gray-900 hover:border-gray-300 hover:dark:border-gray-700 focus:outline-none focus:text-gray-800 focus:dark:text-gray-200 focus:bg-gray-50 focus:dark:bg-gray-900 focus:border-gray-300 focus:dark:border-gray-700 transition';
-});
-</script>
-
-<template>
-  <div>
-    <button v-if="as == 'button'" :class="classes" class="w-full text-left">
-      <slot />
-    </button>
-
-    <Link v-else :href="href" :class="classes">
-      <slot />
-    </Link>
-  </div>
-</template>
diff --git a/resources/js/Components/Jetstream/SecondaryButton.vue b/resources/js/Components/Jetstream/SecondaryButton.vue
index 8465d0842bc..da18a4d6dd7 100644
--- a/resources/js/Components/Jetstream/SecondaryButton.vue
+++ b/resources/js/Components/Jetstream/SecondaryButton.vue
@@ -10,7 +10,7 @@ defineProps({
 <template>
   <button
     :type="type"
-    class="inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-xs font-semibold uppercase tracking-widest text-gray-700 shadow-sm transition hover:text-gray-500 focus:border-blue-300 focus:outline-none focus:ring focus:ring-blue-200 active:bg-gray-50 active:text-gray-800 disabled:opacity-25 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:shadow-gray-700 focus:dark:border-blue-700 focus:dark:ring-blue-800 active:dark:bg-gray-900 active:dark:text-gray-200">
+    class="inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-xs font-semibold uppercase tracking-widest text-gray-700 shadow-sm transition hover:bg-gray-100 hover:text-gray-500 focus:border-blue-300 focus:outline-none focus:ring focus:ring-blue-200 active:bg-gray-50 active:text-gray-800 disabled:opacity-25 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:shadow-gray-700 hover:dark:bg-gray-700 hover:dark:text-gray-300 focus:dark:border-blue-700 focus:dark:ring-blue-800 active:dark:bg-gray-900 active:dark:text-gray-200">
     <slot />
   </button>
 </template>
diff --git a/resources/js/Components/Jetstream/SectionTitle.vue b/resources/js/Components/Jetstream/SectionTitle.vue
index 35abfabe52e..a9309ea6b88 100644
--- a/resources/js/Components/Jetstream/SectionTitle.vue
+++ b/resources/js/Components/Jetstream/SectionTitle.vue
@@ -1,17 +1,55 @@
+<script setup>
+import PrettyButton from '@/Shared/Form/PrettyButton.vue';
+
+defineEmits(['edit']);
+
+defineProps({
+  editMode: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
+
 <template>
-  <div class="flex justify-between md:col-span-1">
-    <div class="px-4 sm:px-0">
-      <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">
-        <slot name="title" />
+  <div>
+    <div class="mb-3 mt-8 items-center justify-between sm:mt-0 sm:flex">
+      <h3 class="mb-4 flex font-semibold sm:mb-0">
+        <span v-if="$slots.icon" class="mr-1">
+          <slot name="icon" />
+        </span>
+        <span class="mr-2">
+          <slot name="title" />
+        </span>
+
+        <slot name="help" />
       </h3>
 
-      <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
-        <slot name="description" />
-      </p>
+      <PrettyButton v-if="!editMode" :text="$t('app.edit')" @click="$emit('edit')" />
     </div>
 
-    <div class="px-4 sm:px-0">
-      <slot name="aside" />
+    <!-- help text -->
+    <div
+      v-if="$slots.description"
+      class="mb-6 flex items-center rounded border bg-slate-50 px-3 py-2 text-sm dark:border-gray-700 dark:bg-slate-900">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="h-6 flex-none pr-2"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor">
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+      </svg>
+
+      <div class="flex-auto">
+        <p>
+          <slot name="description" />
+        </p>
+      </div>
     </div>
   </div>
 </template>
diff --git a/resources/js/Components/Jetstream/ValidationErrors.vue b/resources/js/Components/Jetstream/ValidationErrors.vue
deleted file mode 100644
index 70ccea10312..00000000000
--- a/resources/js/Components/Jetstream/ValidationErrors.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { usePage } from '@inertiajs/inertia-vue3';
-
-const errors = computed(() => usePage().props.value.errors);
-const hasErrors = computed(() => Object.keys(errors.value).length > 0);
-</script>
-
-<template>
-  <div v-if="hasErrors">
-    <div class="font-medium text-red-600 dark:text-red-400">
-      {{ $t('Whoops! Something went wrong.') }}
-    </div>
-
-    <ul class="mt-3 list-inside list-disc text-sm text-red-600 dark:text-red-400">
-      <li v-for="(error, key) in errors" :key="key">
-        {{ error }}
-      </li>
-    </ul>
-  </div>
-</template>
diff --git a/resources/js/Components/Label.vue b/resources/js/Components/Label.vue
index 9e79436163d..edd6886671a 100644
--- a/resources/js/Components/Label.vue
+++ b/resources/js/Components/Label.vue
@@ -1,21 +1,16 @@
+<script setup>
+defineProps({
+  value: String,
+});
+</script>
+
 <template>
   <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">
     <span v-if="value">
-      {{ value }}
+      {{ $t(value) }}
     </span>
     <span v-else>
       <slot />
     </span>
   </label>
 </template>
-
-<script>
-export default {
-  props: {
-    value: {
-      type: String,
-      default: null,
-    },
-  },
-};
-</script>
diff --git a/resources/js/Components/NavLink.vue b/resources/js/Components/NavLink.vue
index 43c3dffd886..49814156af8 100644
--- a/resources/js/Components/NavLink.vue
+++ b/resources/js/Components/NavLink.vue
@@ -1,28 +1,21 @@
-<template>
-  <inertia-link :href="href" :class="classes">
-    <slot />
-  </inertia-link>
-</template>
+<script setup>
+import { computed } from 'vue';
+import { Link } from '@inertiajs/inertia-vue3';
 
-<script>
-export default {
-  props: {
-    href: {
-      type: String,
-      default: null,
-    },
-    active: {
-      type: Boolean,
-      default: false,
-    },
-  },
+const props = defineProps({
+  href: String,
+  active: Boolean,
+});
 
-  computed: {
-    classes() {
-      return this.active
-        ? 'inline-flex items-center px-1 pt-1 border-b-2 border-indigo-400 dark:border-indigo-600 text-sm font-medium leading-5 text-gray-900 dark:text-gray-100 focus:outline-none focus:border-indigo-700 focus:dark:border-indigo-300 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:dark:text-gray-300 hover:border-gray-300 hover:dark:border-gray-700 focus:outline-none focus:text-gray-700 focus:dark:text-gray-300 focus:border-gray-300 focus:dark:border-gray-700 transition duration-150 ease-in-out';
-    },
-  },
-};
+const classes = computed(() => {
+  return props.active
+    ? 'inline-flex items-center px-1 pt-1 border-b-2 border-indigo-400 dark:border-indigo-600 text-sm font-medium leading-5 text-gray-900 dark:text-gray-100 focus:outline-none focus:border-indigo-700 focus:dark:border-indigo-300 transition'
+    : '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:dark:text-gray-300 hover:border-gray-300 hover:dark:border-gray-700 focus:outline-none focus:text-gray-700 focus:dark:text-gray-300 focus:border-gray-300 focus:dark:border-gray-700 transition';
+});
 </script>
+
+<template>
+  <Link :href="href" :class="classes">
+    <slot />
+  </Link>
+</template>
diff --git a/resources/js/Components/ResponsiveNavLink.vue b/resources/js/Components/ResponsiveNavLink.vue
index c596cb0415d..3c3641efeb4 100644
--- a/resources/js/Components/ResponsiveNavLink.vue
+++ b/resources/js/Components/ResponsiveNavLink.vue
@@ -1,28 +1,28 @@
-<template>
-  <inertia-link :href="href" :class="classes">
-    <slot />
-  </inertia-link>
-</template>
+<script setup>
+import { computed } from 'vue';
+import { Link } from '@inertiajs/inertia-vue3';
 
-<script>
-export default {
-  props: {
-    href: {
-      type: String,
-      default: null,
-    },
-    active: {
-      type: Boolean,
-      default: false,
-    },
-  },
+const props = defineProps({
+  active: Boolean,
+  href: String,
+  as: String,
+});
 
-  computed: {
-    classes() {
-      return this.active
-        ? 'block pl-3 pr-4 py-2 border-l-4 border-indigo-400 dark:border-indigo-600 text-base font-medium text-indigo-700 dark:text-indigo-300 bg-indigo-50 dark:bg-indigo-900 focus:outline-none focus:text-indigo-800 focus:dark:text-indigo-200 focus:bg-indigo-100 focus:dark:bg-indigo-900 focus:border-indigo-700 focus:dark:border-indigo-300 transition duration-150 ease-in-out'
-        : 'block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 dark:text-gray-400 hover:text-gray-800 hover:dark:text-gray-200 hover:bg-gray-50 hover:dark:bg-gray-900 hover:border-gray-300 hover:dark:border-gray-700 focus:outline-none focus:text-gray-800 focus:dark:text-gray-200 focus:bg-gray-50 focus:dark:bg-gray-900 focus:border-gray-300 focus:dark:border-gray-700 transition duration-150 ease-in-out';
-    },
-  },
-};
+const classes = computed(() => {
+  return props.active
+    ? 'block pl-3 pr-4 py-2 border-l-4 border-indigo-400 dark:border-indigo-600 text-base font-medium text-indigo-700 dark:text-indigo-300 bg-indigo-50 dark:bg-indigo-900 focus:outline-none focus:text-indigo-800 focus:dark:text-indigo-200 focus:bg-indigo-100 focus:dark:bg-indigo-900 focus:border-indigo-700 focus:dark:border-indigo-300 transition'
+    : 'block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 dark:text-gray-400 hover:text-gray-800 hover:dark:text-gray-200 hover:bg-gray-50 hover:dark:bg-gray-900 hover:border-gray-300 hover:dark:border-gray-700 focus:outline-none focus:text-gray-800 focus:dark:text-gray-200 focus:bg-gray-50 focus:dark:bg-gray-900 focus:border-gray-300 focus:dark:border-gray-700 transition';
+});
 </script>
+
+<template>
+  <div>
+    <button v-if="as == 'button'" :class="classes" class="w-full text-left">
+      <slot />
+    </button>
+
+    <Link v-else :href="href" :class="classes">
+      <slot />
+    </Link>
+  </div>
+</template>
diff --git a/resources/js/Components/ValidationErrors.vue b/resources/js/Components/ValidationErrors.vue
index 63f3209cea4..70ccea10312 100644
--- a/resources/js/Components/ValidationErrors.vue
+++ b/resources/js/Components/ValidationErrors.vue
@@ -1,6 +1,16 @@
+<script setup>
+import { computed } from 'vue';
+import { usePage } from '@inertiajs/inertia-vue3';
+
+const errors = computed(() => usePage().props.value.errors);
+const hasErrors = computed(() => Object.keys(errors.value).length > 0);
+</script>
+
 <template>
   <div v-if="hasErrors">
-    <div class="font-medium text-red-600 dark:text-red-400">Whoops! Something went wrong.</div>
+    <div class="font-medium text-red-600 dark:text-red-400">
+      {{ $t('Whoops! Something went wrong.') }}
+    </div>
 
     <ul class="mt-3 list-inside list-disc text-sm text-red-600 dark:text-red-400">
       <li v-for="(error, key) in errors" :key="key">
@@ -9,17 +19,3 @@
     </ul>
   </div>
 </template>
-
-<script>
-export default {
-  computed: {
-    errors() {
-      return this.$page.props.errors;
-    },
-
-    hasErrors() {
-      return Object.keys(this.errors).length > 0;
-    },
-  },
-};
-</script>
diff --git a/resources/js/Layouts/AppLayout.vue b/resources/js/Layouts/AppLayout.vue
index 5a947ce67bb..298cfe1f122 100644
--- a/resources/js/Layouts/AppLayout.vue
+++ b/resources/js/Layouts/AppLayout.vue
@@ -3,10 +3,10 @@ import { ref } from 'vue';
 import { Inertia } from '@inertiajs/inertia';
 import { Head } from '@inertiajs/inertia-vue3';
 import JetBanner from '@/Components/Jetstream/Banner.vue';
-import JetDropdown from '@/Components/Jetstream/Dropdown.vue';
-import JetDropdownLink from '@/Components/Jetstream/DropdownLink.vue';
-import JetNavLink from '@/Components/Jetstream/NavLink.vue';
-import JetResponsiveNavLink from '@/Components/Jetstream/ResponsiveNavLink.vue';
+import JetDropdown from '@/Components/Dropdown.vue';
+import JetDropdownLink from '@/Components/DropdownLink.vue';
+import JetNavLink from '@/Components/NavLink.vue';
+import JetResponsiveNavLink from '@/Components/ResponsiveNavLink.vue';
 import Footer from '@/Layouts/Footer.vue';
 
 defineProps({
diff --git a/resources/js/Components/Jetstream/AuthenticationCard.vue b/resources/js/Layouts/AuthenticationCard.vue
similarity index 76%
rename from resources/js/Components/Jetstream/AuthenticationCard.vue
rename to resources/js/Layouts/AuthenticationCard.vue
index 40ab09fcff6..a092edfcf6c 100644
--- a/resources/js/Components/Jetstream/AuthenticationCard.vue
+++ b/resources/js/Layouts/AuthenticationCard.vue
@@ -5,7 +5,7 @@
     </div>
 
     <div
-      class="mt-6 w-full overflow-hidden bg-white px-6 py-4 shadow-md dark:bg-gray-900 dark:shadow-gray-700 dark:shadow-gray-700 sm:max-w-md sm:rounded-lg">
+      class="mt-6 w-full overflow-hidden bg-white px-6 py-4 shadow-md dark:bg-gray-900 dark:shadow-gray-700 sm:max-w-md sm:rounded-lg">
       <slot />
     </div>
   </div>
diff --git a/resources/js/Components/Jetstream/SectionBorder.vue b/resources/js/Layouts/SectionBorder.vue
similarity index 100%
rename from resources/js/Components/Jetstream/SectionBorder.vue
rename to resources/js/Layouts/SectionBorder.vue
diff --git a/resources/js/Pages/Auth/Login.vue b/resources/js/Pages/Auth/Login.vue
index 14b628883dd..257ff038c3a 100644
--- a/resources/js/Pages/Auth/Login.vue
+++ b/resources/js/Pages/Auth/Login.vue
@@ -1,79 +1,127 @@
+<script setup>
+import { ref, watch, onMounted } from 'vue';
+import { Inertia } from '@inertiajs/inertia';
+import { Link, useForm } from '@inertiajs/inertia-vue3';
+import TextInput from '@/Shared/Form/TextInput.vue';
+import BreezeCheckbox from '@/Components/Checkbox.vue';
+import BreezeValidationErrors from '@/Components/ValidationErrors.vue';
+import PrettyButton from '@/Shared/Form/PrettyButton.vue';
+import WebauthnLogin from '@/Pages/Webauthn/WebauthnLogin.vue';
+import JetSecondaryButton from '@/Components/Jetstream/SecondaryButton.vue';
+import AuthenticationCardLogo from '@/Components/AuthenticationCardLogo.vue';
+
+const props = defineProps({
+  canResetPassword: Boolean,
+  status: String,
+  wallpaperUrl: String,
+  providers: Array,
+  providersName: Object,
+  publicKey: Object,
+  userName: String,
+});
+const webauthn = ref(true);
+const publicKeyRef = ref(null);
+
+const form = useForm({
+  email: '',
+  password: '',
+  remember: false,
+});
+const providerForm = useForm();
+
+watch(
+  () => props.publicKey,
+  (value) => {
+    publicKeyRef.value = value;
+  },
+);
+
+onMounted(() => {
+  publicKeyRef.value = props.publicKey;
+});
+
+const submit = () => {
+  form
+    .transform((data) => ({
+      ...data,
+      remember: form.remember ? 'on' : '',
+    }))
+    .post(route('login'), {
+      onFinish: () => form.reset('password'),
+    });
+};
+
+const open = (provider) => {
+  providerForm
+    .transform(() => ({
+      redirect: location.href,
+      remember: form.remember ? 'on' : '',
+    }))
+    .get(route('login.provider', { driver: provider }), {
+      preserveScroll: true,
+      onFinish: () => {
+        providerForm.reset();
+      },
+    });
+};
+
+const reload = () => {
+  publicKeyRef.value = null;
+  webauthn.value = true;
+  Inertia.reload({ only: ['publicKey'] });
+};
+</script>
+
+<style scoped>
+.auth-provider {
+  width: 15px;
+  height: 15px;
+  margin-right: 8px;
+}
+.w-43 {
+  width: 43%;
+}
+</style>
+
 <template>
   <div class="flex min-h-screen flex-col items-center bg-gray-100 pt-6 dark:bg-gray-900 sm:justify-center sm:pt-0">
     <div>
-      <inertia-link href="/">
-        <svg
-          class="h-20 w-20 fill-current text-gray-500"
-          viewBox="0 0 390 353"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg">
-          <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M198.147 353C289.425 353 390.705 294.334 377.899 181.5C365.093 68.6657 289.425 10 198.147 10C106.869 10 31.794 61.4285 12.2144 181.5C-7.36527 301.571 106.869 353 198.147 353Z"
-            fill="#2C2B29" />
-          <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M196.926 320C270.146 320 351.389 272.965 341.117 182.5C330.844 92.0352 270.146 45 196.926 45C123.705 45 63.4825 86.2328 47.7763 182.5C32.0701 278.767 123.705 320 196.926 320Z"
-            fill="white" />
-          <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M52.4154 132C62.3371 132.033 66.6473 96.5559 84.3659 80.4033C100.632 65.5752 138 60.4908 138 43.3473C138 7.52904 99.1419 0 64.8295 0C30.517 0 0 36.3305 0 72.1487C0 107.967 33.3855 131.937 52.4154 132Z"
-            fill="#2C2B29" />
-          <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M337.585 132C327.663 132.033 323.353 96.5559 305.634 80.4033C289.368 65.5752 252 60.4908 252 43.3473C252 7.52904 290.858 0 325.171 0C359.483 0 390 36.3305 390 72.1487C390 107.967 356.615 131.937 337.585 132Z"
-            fill="#2C2B29" />
-          <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M275.651 252.546C301.619 246.357 312.447 235.443 312.447 200.175C312.447 164.907 295.905 129.098 267.423 129.098C238.941 129.098 220.028 154.564 220.028 189.832C220.028 225.1 249.682 258.734 275.651 252.546Z"
-            fill="#2B2A28" />
-          <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M266.143 207.804C273.209 207.804 275.311 206.002 278.505 201.954C282.087 197.416 284.758 192.151 283.885 181.278C282.426 163.109 274.764 154.752 259.773 154.752C244.783 154.752 241.859 166.27 241.859 181.278C241.859 196.286 251.152 207.804 266.143 207.804Z"
-            fill="white" />
-          <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M115.349 252.546C89.3806 246.357 78.5526 235.443 78.5526 200.175C78.5526 164.907 95.0948 129.098 123.577 129.098C152.059 129.098 170.972 154.564 170.972 189.832C170.972 225.1 141.318 258.734 115.349 252.546Z"
-            fill="#2B2A28" />
-          <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M124.857 207.804C117.791 207.804 115.689 206.002 112.495 201.954C108.913 197.416 106.242 192.151 107.115 181.278C108.574 163.109 116.236 154.752 131.227 154.752C146.217 154.752 149.141 166.27 149.141 181.278C149.141 196.286 139.848 207.804 124.857 207.804Z"
-            fill="white" />
-          <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M196.204 276C210.316 276 224 255.244 224 246.342C224 237.441 210.112 236 196 236C181.888 236 168 237.441 168 246.342C168 255.244 182.092 276 196.204 276Z"
-            fill="#2C2B29" />
-        </svg>
-      </inertia-link>
+      <AuthenticationCardLogo />
     </div>
 
     <div class="mt-6 flex w-full overflow-hidden bg-white shadow-md dark:bg-gray-800 sm:max-w-4xl sm:rounded-lg">
       <img :src="wallpaperUrl" class="w-10/12 sm:invisible md:visible" :alt="'Wallpaper'" />
       <div class="w-full">
-        <div class="border-b border-gray-200 px-6 pt-14 pb-10 dark:border-gray-700">
-          <h1 class="mb-6 text-center text-xl text-gray-800 dark:text-gray-200">
+        <div class="border-b border-gray-200 px-6 pt-8 pb-6 dark:border-gray-700">
+          <h1 class="mb-4 text-center text-xl text-gray-800 dark:text-gray-200">
             <span class="mr-2"> 👋 </span>
             Sign in to your account
           </h1>
 
-          <breeze-validation-errors class="mb-4" />
+          <BreezeValidationErrors class="mb-2" />
 
-          <div v-if="status" class="mb-4 text-sm font-medium text-green-600 dark:text-green-400">
+          <div v-if="status" class="mb-2 text-sm font-medium text-green-600 dark:text-green-400">
             {{ status }}
           </div>
 
-          <form @submit.prevent="submit" class="dark:text-gray-800">
-            <div class="mb-4">
-              <text-input
+          <div v-if="publicKey && webauthn">
+            <div class="mb-4 text-center text-lg text-gray-900 dark:text-gray-100">
+              {{ userName }}
+            </div>
+            <div class="mb-4 max-w-xl text-gray-600 dark:text-gray-400">
+              {{ $t('Connect with your security key') }}
+            </div>
+
+            <WebauthnLogin :remember="true" :public-key="publicKeyRef" />
+
+            <JetSecondaryButton class="mr-2 mt-4" @click.prevent="webauthn = false">
+              {{ $t('Use your password') }}
+            </JetSecondaryButton>
+          </div>
+
+          <form v-else @submit.prevent="submit" class="dark:text-gray-800">
+            <div class="mb-3">
+              <TextInput
                 v-model="form.email"
                 :label="'Email'"
                 :type="'email'"
@@ -84,8 +132,8 @@
                 :maxlength="255" />
             </div>
 
-            <div class="mb-4">
-              <text-input
+            <div class="mb-3">
+              <TextInput
                 v-model="form.password"
                 :label="'Password'"
                 :type="'password'"
@@ -96,84 +144,56 @@
                 :maxlength="255" />
             </div>
 
-            <div class="mb-4 block">
+            <div class="mb-3 block">
               <label class="flex items-center">
-                <breeze-checkbox v-model:checked="form.remember" name="remember" />
+                <BreezeCheckbox v-model:checked="form.remember" name="remember" />
                 <span class="ml-2 text-sm text-gray-600 dark:text-gray-400"> Remember me </span>
               </label>
             </div>
 
             <div class="flex items-center justify-end">
-              <inertia-link
+              <Link
                 v-if="canResetPassword"
                 :href="route('password.request')"
                 class="text-sm text-blue-500 hover:underline">
                 Forgot password?
-              </inertia-link>
+              </Link>
+
+              <PrettyButton :text="'Log in'" :state="loadingState" :classes="'save ml-4'" />
+            </div>
+
+            <div class="mt-3 block">
+              <p v-if="providers.length > 0" class="mb-3 block text-sm font-medium text-gray-700 dark:text-gray-300">
+                {{ $t('Login with:') }}
+              </p>
+              <div class="flex flex-wrap">
+                <JetSecondaryButton
+                  v-for="provider in providers"
+                  :key="provider"
+                  class="mr-2 inline align-middle"
+                  :href="route('login.provider', { driver: provider })"
+                  @click.prevent="open(provider)">
+                  <img :src="`/img/auth/${provider}.svg`" alt="" class="relative mr-2 h-4 w-4 align-middle" />
+                  <span class="align-middle">
+                    {{ providersName[provider] }}
+                  </span>
+                </JetSecondaryButton>
+              </div>
+            </div>
 
-              <pretty-button :text="'Log in'" :state="loadingState" :classes="'save ml-4'" />
+            <div v-if="publicKeyRef" class="mt-3 block">
+              <JetSecondaryButton class="mr-2" @click.prevent="reload">
+                {{ $t('Use your security key') }}
+              </JetSecondaryButton>
             </div>
           </form>
         </div>
 
         <div class="px-6 py-6 text-sm dark:text-gray-50">
           New to Monica?
-          <inertia-link :href="route('register')" class="text-blue-500 hover:underline">
-            Create an account
-          </inertia-link>
+          <Link :href="route('register')" class="text-blue-500 hover:underline"> Create an account </Link>
         </div>
       </div>
     </div>
   </div>
 </template>
-
-<script>
-import TextInput from '@/Shared/Form/TextInput.vue';
-import BreezeCheckbox from '@/Components/Checkbox.vue';
-import BreezeValidationErrors from '@/Components/ValidationErrors.vue';
-import PrettyButton from '@/Shared/Form/PrettyButton.vue';
-
-export default {
-  components: {
-    TextInput,
-    PrettyButton,
-    BreezeCheckbox,
-    BreezeValidationErrors,
-  },
-
-  props: {
-    status: {
-      type: String,
-      default: null,
-    },
-    canResetPassword: {
-      type: Boolean,
-      default: false,
-    },
-    wallpaperUrl: {
-      type: String,
-      default: '',
-    },
-  },
-
-  data() {
-    return {
-      form: this.$inertia.form({
-        email: '',
-        password: '',
-        remember: false,
-      }),
-    };
-  },
-
-  methods: {
-    submit() {
-      this.form.post(this.route('login'), {
-        onFinish: () => this.form.reset('password'),
-      });
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/resources/js/Pages/Auth/TwoFactorChallenge.vue b/resources/js/Pages/Auth/TwoFactorChallenge.vue
new file mode 100644
index 00000000000..f488fde0c74
--- /dev/null
+++ b/resources/js/Pages/Auth/TwoFactorChallenge.vue
@@ -0,0 +1,126 @@
+<script setup>
+import { nextTick, ref } from 'vue';
+import { Head, useForm } from '@inertiajs/inertia-vue3';
+import AuthenticationCard from '@/Layouts/AuthenticationCard.vue';
+import AuthenticationCardLogo from '@/Components/AuthenticationCardLogo.vue';
+import JetButton from '@/Components/Button.vue';
+import JetInput from '@/Components/Input.vue';
+import JetLabel from '@/Components/Label.vue';
+import JetValidationErrors from '@/Components/ValidationErrors.vue';
+import WebauthnLogin from '@/Pages/Webauthn/WebauthnLogin.vue';
+
+const recovery = ref(false);
+
+const form = useForm({
+  code: '',
+  recovery_code: '',
+});
+
+const recoveryCodeInput = ref(null);
+const codeInput = ref(null);
+
+const toggleRecovery = async () => {
+  recovery.value ^= true;
+
+  await nextTick();
+
+  if (recovery.value) {
+    recoveryCodeInput.value.focus();
+    form.code = '';
+  } else {
+    codeInput.value.focus();
+    form.recovery_code = '';
+  }
+};
+
+const submit = () => {
+  form.post(route('two-factor.login'));
+};
+
+defineProps({
+  two_factor: Boolean,
+  remember: Boolean,
+  publicKey: Object,
+});
+</script>
+
+<template>
+  <Head :title="$t('Two-factor Confirmation')" />
+
+  <AuthenticationCard>
+    <template #logo>
+      <AuthenticationCardLogo />
+    </template>
+
+    <div v-if="publicKey">
+      <h1 class="mb-4 max-w-xl text-gray-600 dark:text-gray-400">
+        {{ $t('Please confirm access to your account by validating your security key.') }}
+      </h1>
+
+      <WebauthnLogin :remember="remember" :publicKey="publicKey" />
+    </div>
+
+    <div v-if="two_factor">
+      <div class="mb-4 text-sm text-gray-600 dark:text-gray-400">
+        <template v-if="!recovery">
+          {{
+            $t(
+              'Please confirm access to your account by entering the authentication code provided by your authenticator application.',
+            )
+          }}
+        </template>
+
+        <template v-else>
+          {{ $t('Please confirm access to your account by entering one of your emergency recovery codes.') }}
+        </template>
+      </div>
+
+      <JetValidationErrors class="mb-4" />
+
+      <form @submit.prevent="submit">
+        <div v-if="!recovery">
+          <JetLabel for="code" value="Code" />
+          <JetInput
+            id="code"
+            ref="codeInput"
+            v-model="form.code"
+            type="text"
+            inputmode="numeric"
+            class="mt-1 block w-full"
+            autofocus
+            autocomplete="one-time-code" />
+        </div>
+
+        <div v-else>
+          <JetLabel for="recovery_code" value="Recovery Code" />
+          <JetInput
+            id="recovery_code"
+            ref="recoveryCodeInput"
+            v-model="form.recovery_code"
+            type="text"
+            class="mt-1 block w-full"
+            autocomplete="one-time-code" />
+        </div>
+
+        <div class="mt-4 flex items-center justify-end">
+          <button
+            type="button"
+            class="cursor-pointer text-sm text-gray-600 underline hover:text-gray-900 dark:text-gray-400"
+            @click.prevent="toggleRecovery">
+            <template v-if="!recovery">
+              {{ $t('Use a recovery code') }}
+            </template>
+
+            <template v-else>
+              {{ $t('Use an authentication code') }}
+            </template>
+          </button>
+
+          <JetButton class="ml-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
+            {{ $t('Log in') }}
+          </JetButton>
+        </div>
+      </form>
+    </div>
+  </AuthenticationCard>
+</template>
diff --git a/resources/js/Pages/Profile/Partials/DeleteUserForm.vue b/resources/js/Pages/Profile/Partials/DeleteUserForm.vue
index 798a2eeb96d..13ba1f1681e 100644
--- a/resources/js/Pages/Profile/Partials/DeleteUserForm.vue
+++ b/resources/js/Pages/Profile/Partials/DeleteUserForm.vue
@@ -4,8 +4,8 @@ import { useForm } from '@inertiajs/inertia-vue3';
 import JetActionSection from '@/Components/Jetstream/ActionSection.vue';
 import JetDialogModal from '@/Components/Jetstream/DialogModal.vue';
 import JetDangerButton from '@/Components/Jetstream/DangerButton.vue';
-import JetInput from '@/Components/Jetstream/Input.vue';
-import JetInputError from '@/Components/Jetstream/InputError.vue';
+import JetInput from '@/Components/Input.vue';
+import JetInputError from '@/Components/InputError.vue';
 import JetSecondaryButton from '@/Components/Jetstream/SecondaryButton.vue';
 
 const confirmingUserDeletion = ref(false);
diff --git a/resources/js/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue b/resources/js/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue
index b48abb0b710..960c4430880 100644
--- a/resources/js/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue
+++ b/resources/js/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue
@@ -3,10 +3,10 @@ import { ref } from 'vue';
 import { useForm } from '@inertiajs/inertia-vue3';
 import JetActionMessage from '@/Components/Jetstream/ActionMessage.vue';
 import JetActionSection from '@/Components/Jetstream/ActionSection.vue';
-import JetButton from '@/Components/Jetstream/Button.vue';
+import JetButton from '@/Components/Button.vue';
 import JetDialogModal from '@/Components/Jetstream/DialogModal.vue';
-import JetInput from '@/Components/Jetstream/Input.vue';
-import JetInputError from '@/Components/Jetstream/InputError.vue';
+import JetInput from '@/Components/Input.vue';
+import JetInputError from '@/Components/InputError.vue';
 import JetSecondaryButton from '@/Components/Jetstream/SecondaryButton.vue';
 
 defineProps({
diff --git a/resources/js/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue b/resources/js/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue
index c69378e24c3..788f80ec91f 100644
--- a/resources/js/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue
+++ b/resources/js/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue
@@ -3,12 +3,12 @@ import { ref, computed, watch } from 'vue';
 import { Inertia } from '@inertiajs/inertia';
 import { useForm, usePage } from '@inertiajs/inertia-vue3';
 import JetActionSection from '@/Components/Jetstream/ActionSection.vue';
-import JetButton from '@/Components/Jetstream/Button.vue';
+import JetButton from '@/Components/Button.vue';
 import JetConfirmsPassword from '@/Components/Jetstream/ConfirmsPassword.vue';
 import JetDangerButton from '@/Components/Jetstream/DangerButton.vue';
-import JetInput from '@/Components/Jetstream/Input.vue';
-import JetInputError from '@/Components/Jetstream/InputError.vue';
-import JetLabel from '@/Components/Jetstream/Label.vue';
+import JetInput from '@/Components/Input.vue';
+import JetInputError from '@/Components/InputError.vue';
+import JetLabel from '@/Components/Label.vue';
 import JetSecondaryButton from '@/Components/Jetstream/SecondaryButton.vue';
 
 const props = defineProps({
diff --git a/resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue b/resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue
index 29a6543e88e..8f34186d32b 100644
--- a/resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue
+++ b/resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue
@@ -2,11 +2,11 @@
 import { ref } from 'vue';
 import { useForm } from '@inertiajs/inertia-vue3';
 import JetActionMessage from '@/Components/Jetstream/ActionMessage.vue';
-import JetButton from '@/Components/Jetstream/Button.vue';
+import JetButton from '@/Components/Button.vue';
 import JetFormSection from '@/Components/Jetstream/FormSection.vue';
-import JetInput from '@/Components/Jetstream/Input.vue';
-import JetInputError from '@/Components/Jetstream/InputError.vue';
-import JetLabel from '@/Components/Jetstream/Label.vue';
+import JetInput from '@/Components/Input.vue';
+import JetInputError from '@/Components/InputError.vue';
+import JetLabel from '@/Components/Label.vue';
 
 const passwordInput = ref(null);
 const currentPasswordInput = ref(null);
@@ -55,7 +55,7 @@ const updatePassword = () => {
           ref="currentPasswordInput"
           v-model="form.current_password"
           type="password"
-          class="mt-1 block w-full"
+          class="mt-1 mb-4 block w-full"
           autocomplete="current-password" />
         <JetInputError :message="form.errors.current_password" class="mt-2" />
       </div>
@@ -67,7 +67,7 @@ const updatePassword = () => {
           ref="passwordInput"
           v-model="form.password"
           type="password"
-          class="mt-1 block w-full"
+          class="mt-1 mb-4 block w-full"
           autocomplete="new-password" />
         <JetInputError :message="form.errors.password" class="mt-2" />
       </div>
@@ -78,7 +78,7 @@ const updatePassword = () => {
           id="password_confirmation"
           v-model="form.password_confirmation"
           type="password"
-          class="mt-1 block w-full"
+          class="mt-1 mb-4 block w-full"
           autocomplete="new-password" />
         <JetInputError :message="form.errors.password_confirmation" class="mt-2" />
       </div>
diff --git a/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue b/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue
index b4727b7ca32..da948cbb78f 100644
--- a/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue
+++ b/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue
@@ -2,11 +2,11 @@
 import { ref } from 'vue';
 import { Inertia } from '@inertiajs/inertia';
 import { useForm } from '@inertiajs/inertia-vue3';
-import JetButton from '@/Components/Jetstream/Button.vue';
+import JetButton from '@/Components/Button.vue';
 import JetFormSection from '@/Components/Jetstream/FormSection.vue';
-import JetInput from '@/Components/Jetstream/Input.vue';
-import JetInputError from '@/Components/Jetstream/InputError.vue';
-import JetLabel from '@/Components/Jetstream/Label.vue';
+import JetInput from '@/Components/Input.vue';
+import JetInputError from '@/Components/InputError.vue';
+import JetLabel from '@/Components/Label.vue';
 import JetActionMessage from '@/Components/Jetstream/ActionMessage.vue';
 import JetSecondaryButton from '@/Components/Jetstream/SecondaryButton.vue';
 
@@ -16,7 +16,8 @@ const props = defineProps({
 
 const form = useForm({
   _method: 'PUT',
-  name: props.user.name,
+  first_name: props.user.first_name,
+  last_name: props.user.last_name,
   email: props.user.email,
   photo: null,
 });
@@ -114,15 +115,32 @@ const clearPhotoFileInput = () => {
         <JetInputError :message="form.errors.photo" class="mt-2" />
       </div>
 
-      <!-- Name -->
-      <div class="col-span-6 sm:col-span-4">
-        <JetLabel for="name" value="Name" />
-        <JetInput id="name" v-model="form.name" type="text" class="mt-1 block w-full" autocomplete="name" />
-        <JetInputError :message="form.errors.name" class="mt-2" />
+      <!-- First Name -->
+      <div class="col-span-6 mb-4 sm:col-span-4">
+        <JetLabel for="first_name" value="First name" />
+        <JetInput
+          id="first_name"
+          v-model="form.first_name"
+          type="text"
+          class="mt-1 block w-full"
+          autocomplete="firstname" />
+        <JetInputError :message="form.errors.first_name" class="mt-2" />
+      </div>
+
+      <!-- Last Name -->
+      <div class="col-span-6 mb-4 sm:col-span-4">
+        <JetLabel for="last_name" value="Last name" />
+        <JetInput
+          id="last_name"
+          v-model="form.last_name"
+          type="text"
+          class="mt-1 block w-full"
+          autocomplete="lastname" />
+        <JetInputError :message="form.errors.last_name" class="mt-2" />
       </div>
 
       <!-- Email -->
-      <div class="col-span-6 sm:col-span-4">
+      <div class="col-span-6 mb-4 sm:col-span-4">
         <JetLabel for="email" value="Email" />
         <JetInput id="email" v-model="form.email" type="email" class="mt-1 block w-full" autocomplete="email" />
         <JetInputError :message="form.errors.email" class="mt-2" />
diff --git a/resources/js/Pages/Profile/Partials/UpdateProviders.vue b/resources/js/Pages/Profile/Partials/UpdateProviders.vue
new file mode 100644
index 00000000000..39d242a855e
--- /dev/null
+++ b/resources/js/Pages/Profile/Partials/UpdateProviders.vue
@@ -0,0 +1,94 @@
+<script setup>
+import { computed } from 'vue';
+import { useForm, usePage } from '@inertiajs/inertia-vue3';
+import JetButton from '@/Components/Button.vue';
+import JetSecondaryButton from '@/Components/Jetstream/SecondaryButton.vue';
+import JetActionSection from '@/Components/Jetstream/ActionSection.vue';
+import JetInputError from '@/Components/InputError.vue';
+
+const form = useForm();
+const providerForm = useForm();
+const errors = computed(() => usePage().props.value.errors);
+
+const deleteProvider = (provider) => {
+  form.delete(route('provider.delete', { driver: provider }), {
+    errorBag: 'deleteProvider',
+    preserveScroll: true,
+    onSuccess: () => form.reset(),
+  });
+};
+
+const open = (provider) => {
+  providerForm
+    .transform(() => ({
+      redirect: location.href,
+    }))
+    .get(route('login.provider', { driver: provider }), {
+      preserveScroll: true,
+      onFinish: () => {
+        providerForm.reset();
+      },
+    });
+};
+
+defineProps({
+  providers: Array,
+  providersName: Object,
+  userTokens: Array,
+});
+</script>
+
+<style scoped>
+.auth-provider {
+  width: 15px;
+  height: 15px;
+  margin-right: 8px;
+  top: 2px;
+}
+</style>
+
+<template>
+  <JetActionSection id="socialite">
+    <template #title>
+      {{ $t('External connections') }}
+    </template>
+
+    <template #description>
+      {{ $t('Manage accounts you have linked to your Customers account.') }}
+    </template>
+
+    <template #content>
+      <div class="max-w-xl text-sm text-gray-600 dark:text-gray-400">
+        {{ $t('You can add more account to log in to our service with one click.') }}
+      </div>
+
+      <div class="mt-5 space-y-6">
+        <div v-for="provider in providers" :key="provider" class="flex items-center">
+          <img :src="`/img/auth/${provider}.svg`" :alt="provider" class="auth-provider relative" />
+          <span class="mr-3 text-sm text-gray-600 dark:text-gray-400">
+            {{ providersName[provider] }}
+          </span>
+
+          <template v-if="userTokens.findIndex((driver) => driver.driver === provider) > -1">
+            <span class="text-sm text-green-600 dark:text-green-400">
+              {{ $t('Connected') }}
+            </span>
+            <JetSecondaryButton class="ml-3" @click.prevent="deleteProvider(provider)">
+              {{ $t('Disconnect') }}
+            </JetSecondaryButton>
+
+            <JetInputError :message="form.errors[provider]" class="mt-4" />
+          </template>
+
+          <template v-else>
+            <JetButton class="ml-3" @click.prevent="open(provider)">
+              {{ $t('Connect') }}
+            </JetButton>
+
+            <JetInputError v-if="errors[provider]" :message="errors[provider]" class="mt-4" />
+          </template>
+        </div>
+      </div>
+    </template>
+  </JetActionSection>
+</template>
diff --git a/resources/js/Pages/Profile/Show.vue b/resources/js/Pages/Profile/Show.vue
index ea6627a1e68..d3723f5c846 100644
--- a/resources/js/Pages/Profile/Show.vue
+++ b/resources/js/Pages/Profile/Show.vue
@@ -1,52 +1,75 @@
 <script setup>
-import AppLayout from '@/Layouts/AppLayout.vue';
+import Layout from '@/Shared/Layout.vue';
 import DeleteUserForm from '@/Pages/Profile/Partials/DeleteUserForm.vue';
-import JetSectionBorder from '@/Components/Jetstream/SectionBorder.vue';
 import LogoutOtherBrowserSessionsForm from '@/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue';
 import TwoFactorAuthenticationForm from '@/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue';
 import UpdatePasswordForm from '@/Pages/Profile/Partials/UpdatePasswordForm.vue';
 import UpdateProfileInformationForm from '@/Pages/Profile/Partials/UpdateProfileInformationForm.vue';
+import UpdateProviders from '@/Pages/Profile/Partials/UpdateProviders.vue';
+import WebauthnKeys from '@/Pages/Webauthn/WebauthnKeys.vue';
+import Breadcrumb from '@/Components/Breadcrumb.vue';
 
 defineProps({
   confirmsTwoFactorAuthentication: Boolean,
   sessions: Array,
+  providers: Array,
+  providersName: Object,
+  userTokens: Array,
+  locales: Array,
+  webauthnKeys: Array,
+  layoutData: Object,
 });
 </script>
 
 <template>
-  <AppLayout title="Settings">
+  <Layout :layoutData="layoutData">
     <template #header>
-      <h2 class="text-xl font-semibold leading-tight text-gray-800 dark:text-gray-200">Settings</h2>
+      <Breadcrumb
+        :items="[
+          {
+            name: $t('app.breadcrumb_settings'),
+            url: route('settings.index'),
+          },
+          {
+            name: 'Account and security ',
+          },
+        ]" />
     </template>
 
-    <div>
-      <div class="mx-auto max-w-7xl py-10 sm:px-6 lg:px-8">
-        <div v-if="$page.props.jetstream.canUpdateProfileInformation">
+    <div class="relative">
+      <div class="mx-auto max-w-3xl px-2 py-2 sm:py-6 sm:px-6 lg:px-8">
+        <div class="mb-16" v-if="$page.props.jetstream.canUpdateProfileInformation">
           <UpdateProfileInformationForm :user="$page.props.user" />
-
-          <JetSectionBorder />
         </div>
 
-        <div v-if="$page.props.jetstream.canUpdatePassword">
+        <div class="mb-16" v-if="$page.props.jetstream.canUpdatePassword">
           <UpdatePasswordForm class="mt-10 sm:mt-0" />
+        </div>
 
-          <JetSectionBorder />
+        <div class="mb-16" v-if="providers.length > 0">
+          <UpdateProviders
+            :user="$page.props.user"
+            :providers="providers"
+            :providersName="providersName"
+            :userTokens="userTokens" />
         </div>
 
-        <div v-if="$page.props.jetstream.canManageTwoFactorAuthentication">
+        <div class="mb-16" v-if="$page.props.jetstream.canManageTwoFactorAuthentication">
           <TwoFactorAuthenticationForm :requires-confirmation="confirmsTwoFactorAuthentication" class="mt-10 sm:mt-0" />
+        </div>
 
-          <JetSectionBorder />
+        <div class="mb-16">
+          <WebauthnKeys :webauthnKeys="webauthnKeys" />
         </div>
 
-        <LogoutOtherBrowserSessionsForm :sessions="sessions" class="mt-10 sm:mt-0" />
+        <div class="mb-16">
+          <LogoutOtherBrowserSessionsForm :sessions="sessions" class="mt-10 sm:mt-0" />
+        </div>
 
         <template v-if="$page.props.jetstream.hasAccountDeletionFeatures">
-          <JetSectionBorder />
-
           <DeleteUserForm class="mt-10 sm:mt-0" />
         </template>
       </div>
     </div>
-  </AppLayout>
+  </Layout>
 </template>
diff --git a/resources/js/Pages/Settings/Index.vue b/resources/js/Pages/Settings/Index.vue
index 6c7dfd1e3c9..f4b918b6313 100644
--- a/resources/js/Pages/Settings/Index.vue
+++ b/resources/js/Pages/Settings/Index.vue
@@ -45,6 +45,12 @@
           </h2>
           <div class="mb-6 rounded-lg border border-gray-200 bg-white p-5 dark:border-gray-700 dark:bg-gray-900">
             <ul>
+              <li class="mb-2 flex justify-start">
+                <span class="mr-2">🔐</span>
+                <inertia-link :href="route('profile.show')" class="text-blue-500 hover:underline">
+                  Account and security
+                </inertia-link>
+              </li>
               <li class="mb-2 flex justify-start">
                 <span class="mr-2">🥸</span>
                 <inertia-link :href="data.url.users.index" class="text-blue-500 hover:underline">
@@ -91,8 +97,8 @@ export default {
       default: null,
     },
     data: {
-      type: Array,
-      default: () => [],
+      type: Object,
+      default: null,
     },
   },
 };
diff --git a/resources/js/Pages/Settings/Notifications/Index.vue b/resources/js/Pages/Settings/Notifications/Index.vue
index b4ea6b1693e..e319b22fb0d 100644
--- a/resources/js/Pages/Settings/Notifications/Index.vue
+++ b/resources/js/Pages/Settings/Notifications/Index.vue
@@ -42,7 +42,7 @@
         </div>
 
         <!-- help text -->
-        <div class="mb-6 flex rounded border bg-slate-50 px-3 py-2 text-sm dark:bg-slate-900">
+        <div class="mb-6 flex rounded border bg-slate-50 px-3 py-2 text-sm dark:border-gray-700 dark:bg-slate-900">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             class="h-6 grow pr-2"
diff --git a/resources/js/Pages/Settings/Notifications/Logs/Index.vue b/resources/js/Pages/Settings/Notifications/Logs/Index.vue
index bf3a6d4e0b3..916db08798f 100644
--- a/resources/js/Pages/Settings/Notifications/Logs/Index.vue
+++ b/resources/js/Pages/Settings/Notifications/Logs/Index.vue
@@ -66,7 +66,7 @@
         </div>
 
         <!-- help text -->
-        <div class="mb-6 flex rounded border bg-slate-50 px-3 py-2 text-sm dark:bg-slate-900">
+        <div class="mb-6 flex rounded border bg-slate-50 px-3 py-2 text-sm dark:border-gray-700 dark:bg-slate-900">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             class="h-6 grow pr-2"
diff --git a/resources/js/Pages/Settings/Personalize/CallReasons/Index.vue b/resources/js/Pages/Settings/Personalize/CallReasons/Index.vue
index add00285b09..6ac71b98b8f 100644
--- a/resources/js/Pages/Settings/Personalize/CallReasons/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/CallReasons/Index.vue
@@ -60,7 +60,7 @@
         </div>
 
         <!-- help text -->
-        <div class="mb-6 flex rounded border bg-slate-50 px-3 py-2 text-sm dark:bg-slate-900">
+        <div class="mb-6 flex rounded border bg-slate-50 px-3 py-2 text-sm dark:border-gray-700 dark:bg-slate-900">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             class="h-6 pr-2"
diff --git a/resources/js/Pages/Settings/Personalize/Currencies/Index.vue b/resources/js/Pages/Settings/Personalize/Currencies/Index.vue
index 6cdffeac99e..85df50d88bb 100644
--- a/resources/js/Pages/Settings/Personalize/Currencies/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/Currencies/Index.vue
@@ -55,7 +55,7 @@
         </div>
 
         <!-- help text -->
-        <div class="mb-6 flex rounded border bg-slate-50 px-3 py-2 text-sm dark:bg-slate-900">
+        <div class="mb-6 flex rounded border bg-slate-50 px-3 py-2 text-sm dark:border-gray-700 dark:bg-slate-900">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             class="h-6 grow pr-2"
diff --git a/resources/js/Pages/Settings/Personalize/GroupTypes/Index.vue b/resources/js/Pages/Settings/Personalize/GroupTypes/Index.vue
index 4470b05c4f4..b34ef2fd8c6 100644
--- a/resources/js/Pages/Settings/Personalize/GroupTypes/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/GroupTypes/Index.vue
@@ -60,7 +60,7 @@
         </div>
 
         <!-- help text -->
-        <div class="mb-6 flex rounded border bg-slate-50 px-3 py-2 text-sm dark:bg-slate-900">
+        <div class="mb-6 flex rounded border bg-slate-50 px-3 py-2 text-sm dark:border-gray-700 dark:bg-slate-900">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             class="h-6 grow pr-2"
diff --git a/resources/js/Pages/Settings/Personalize/LifeEventCategories/Index.vue b/resources/js/Pages/Settings/Personalize/LifeEventCategories/Index.vue
index 3840ff9e6e0..8b91a1769b8 100644
--- a/resources/js/Pages/Settings/Personalize/LifeEventCategories/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/LifeEventCategories/Index.vue
@@ -60,7 +60,7 @@
         </div>
 
         <!-- help text -->
-        <div class="mb-6 flex rounded border bg-slate-50 px-3 py-2 text-sm dark:bg-slate-900">
+        <div class="mb-6 flex rounded border bg-slate-50 px-3 py-2 text-sm dark:border-gray-700 dark:bg-slate-900">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             class="h-6 grow pr-2"
diff --git a/resources/js/Pages/Settings/Personalize/Modules/Index.vue b/resources/js/Pages/Settings/Personalize/Modules/Index.vue
index f61520e07c6..12a4955d7d9 100644
--- a/resources/js/Pages/Settings/Personalize/Modules/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/Modules/Index.vue
@@ -305,8 +305,8 @@ export default {
       default: null,
     },
     data: {
-      type: Array,
-      default: () => [],
+      type: Object,
+      default: null,
     },
   },
 
diff --git a/resources/js/Pages/Settings/Personalize/Relationships/Index.vue b/resources/js/Pages/Settings/Personalize/Relationships/Index.vue
index 2d815bda4c1..37a13995b60 100644
--- a/resources/js/Pages/Settings/Personalize/Relationships/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/Relationships/Index.vue
@@ -62,7 +62,7 @@
         </div>
 
         <!-- help text -->
-        <div class="mb-6 flex rounded border bg-slate-50 px-3 py-2 text-sm dark:bg-slate-900">
+        <div class="mb-6 flex rounded border bg-slate-50 px-3 py-2 text-sm dark:border-gray-700 dark:bg-slate-900">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             class="h-6 grow pr-2"
diff --git a/resources/js/Pages/Settings/Personalize/Templates/Index.vue b/resources/js/Pages/Settings/Personalize/Templates/Index.vue
index 99311366b15..f667974a06e 100644
--- a/resources/js/Pages/Settings/Personalize/Templates/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/Templates/Index.vue
@@ -62,7 +62,7 @@
         </div>
 
         <!-- help text -->
-        <div class="mb-6 flex rounded border bg-slate-50 px-3 py-2 text-sm dark:bg-slate-900">
+        <div class="mb-6 flex rounded border bg-slate-50 px-3 py-2 text-sm dark:border-gray-700 dark:bg-slate-900">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             class="h-6 grow pr-2"
diff --git a/resources/js/Pages/Settings/Personalize/Templates/Partials/Modules.vue b/resources/js/Pages/Settings/Personalize/Templates/Partials/Modules.vue
index cceeddc8868..0784ca82aae 100644
--- a/resources/js/Pages/Settings/Personalize/Templates/Partials/Modules.vue
+++ b/resources/js/Pages/Settings/Personalize/Templates/Partials/Modules.vue
@@ -120,8 +120,8 @@ export default {
 
   props: {
     data: {
-      type: Array,
-      default: () => [],
+      type: Object,
+      default: null,
     },
   },
 
diff --git a/resources/js/Pages/Settings/Personalize/Templates/Partials/Pages.vue b/resources/js/Pages/Settings/Personalize/Templates/Partials/Pages.vue
index 9808a5affb1..fdd25e5d210 100644
--- a/resources/js/Pages/Settings/Personalize/Templates/Partials/Pages.vue
+++ b/resources/js/Pages/Settings/Personalize/Templates/Partials/Pages.vue
@@ -169,8 +169,8 @@ export default {
 
   props: {
     data: {
-      type: Array,
-      default: () => [],
+      type: Object,
+      default: null,
     },
   },
 
diff --git a/resources/js/Pages/Settings/Personalize/Templates/Show.vue b/resources/js/Pages/Settings/Personalize/Templates/Show.vue
index 58204b86dfb..2509d4c5a37 100644
--- a/resources/js/Pages/Settings/Personalize/Templates/Show.vue
+++ b/resources/js/Pages/Settings/Personalize/Templates/Show.vue
@@ -132,8 +132,8 @@ export default {
       default: null,
     },
     data: {
-      type: Array,
-      default: () => [],
+      type: Object,
+      default: null,
     },
   },
 
diff --git a/resources/js/Pages/Settings/Preferences/Partials/DateFormat.vue b/resources/js/Pages/Settings/Preferences/Partials/DateFormat.vue
index 8c6b9b1a408..6b7b34cc273 100644
--- a/resources/js/Pages/Settings/Preferences/Partials/DateFormat.vue
+++ b/resources/js/Pages/Settings/Preferences/Partials/DateFormat.vue
@@ -14,7 +14,7 @@
     </div>
 
     <!-- help text -->
-    <div class="mb-6 flex rounded border bg-slate-50 px-3 py-2 text-sm dark:bg-slate-900">
+    <div class="mb-6 flex rounded border bg-slate-50 px-3 py-2 text-sm dark:border-gray-700 dark:bg-slate-900">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         class="h-6 w-6 pr-2"
diff --git a/resources/js/Pages/Settings/Preferences/Partials/NameOrder.vue b/resources/js/Pages/Settings/Preferences/Partials/NameOrder.vue
index 1b910e49e51..9a0c01db5d4 100644
--- a/resources/js/Pages/Settings/Preferences/Partials/NameOrder.vue
+++ b/resources/js/Pages/Settings/Preferences/Partials/NameOrder.vue
@@ -14,7 +14,7 @@
     </div>
 
     <!-- help text -->
-    <div class="mb-6 flex rounded border bg-slate-50 px-3 py-2 text-sm dark:bg-slate-900">
+    <div class="mb-6 flex rounded border bg-slate-50 px-3 py-2 text-sm dark:border-gray-700 dark:bg-slate-900">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         class="h-6 grow pr-2"
diff --git a/resources/js/Pages/Settings/Preferences/Partials/Timezone.vue b/resources/js/Pages/Settings/Preferences/Partials/Timezone.vue
index 6343d8afa2e..336441c4510 100644
--- a/resources/js/Pages/Settings/Preferences/Partials/Timezone.vue
+++ b/resources/js/Pages/Settings/Preferences/Partials/Timezone.vue
@@ -14,7 +14,7 @@
     </div>
 
     <!-- help text -->
-    <div class="mb-6 flex rounded border bg-slate-50 px-3 py-2 text-sm dark:bg-slate-900">
+    <div class="mb-6 flex rounded border bg-slate-50 px-3 py-2 text-sm dark:border-gray-700 dark:bg-slate-900">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         class="h-6 w-6 pr-2"
diff --git a/resources/js/Pages/Settings/Storage/Index.vue b/resources/js/Pages/Settings/Storage/Index.vue
index a7275eb7be6..431c3d23c9b 100644
--- a/resources/js/Pages/Settings/Storage/Index.vue
+++ b/resources/js/Pages/Settings/Storage/Index.vue
@@ -113,8 +113,8 @@ export default {
       default: null,
     },
     data: {
-      type: Array,
-      default: () => [],
+      type: Object,
+      default: null,
     },
   },
 };
diff --git a/resources/js/Pages/Settings/Users/Index.vue b/resources/js/Pages/Settings/Users/Index.vue
index 8c9fbcd5b54..6e09a62c0fa 100644
--- a/resources/js/Pages/Settings/Users/Index.vue
+++ b/resources/js/Pages/Settings/Users/Index.vue
@@ -187,8 +187,8 @@ export default {
       default: null,
     },
     data: {
-      type: Array,
-      default: () => [],
+      type: Object,
+      default: null,
     },
   },
 
diff --git a/resources/js/Pages/Vault/Index.vue b/resources/js/Pages/Vault/Index.vue
index e7c07a2272b..24b08024196 100644
--- a/resources/js/Pages/Vault/Index.vue
+++ b/resources/js/Pages/Vault/Index.vue
@@ -149,8 +149,8 @@ export default {
       default: null,
     },
     data: {
-      type: Array,
-      default: () => [],
+      type: Object,
+      default: null,
     },
   },
 
diff --git a/resources/js/Pages/Webauthn/Partials/DeleteKeyModal.vue b/resources/js/Pages/Webauthn/Partials/DeleteKeyModal.vue
new file mode 100644
index 00000000000..03b88439fd9
--- /dev/null
+++ b/resources/js/Pages/Webauthn/Partials/DeleteKeyModal.vue
@@ -0,0 +1,48 @@
+<script setup>
+import { useForm } from '@inertiajs/inertia-vue3';
+import JetConfirmationModal from '@/Components/Jetstream/ConfirmationModal.vue';
+import JetDangerButton from '@/Components/Jetstream/DangerButton.vue';
+import JetSecondaryButton from '@/Components/Jetstream/SecondaryButton.vue';
+
+const form = useForm();
+
+const props = defineProps({
+  keyid: Number,
+});
+
+const emit = defineEmits(['close']);
+
+const deleteKey = () => {
+  form.delete(route('webauthn.destroy', props.keyid), {
+    preserveScroll: true,
+    preserveState: true,
+    onSuccess: () => emit('close'),
+  });
+};
+</script>
+
+<template>
+  <JetConfirmationModal :show="keyid > 0" @close="$emit('close')">
+    <template #title>
+      {{ $t('Delete a new key') }}
+    </template>
+
+    <template #content>
+      {{ $t('Are you sure you would like to delete this key?') }}
+    </template>
+
+    <template #footer>
+      <JetSecondaryButton @click="$emit('close')">
+        {{ $t('Cancel') }}
+      </JetSecondaryButton>
+
+      <JetDangerButton
+        class="ml-2"
+        @click="deleteKey"
+        :class="{ 'opacity-25': form.processing }"
+        :disabled="form.processing">
+        {{ $t('Delete') }}
+      </JetDangerButton>
+    </template>
+  </JetConfirmationModal>
+</template>
diff --git a/resources/js/Pages/Webauthn/Partials/RegisterKey.vue b/resources/js/Pages/Webauthn/Partials/RegisterKey.vue
new file mode 100644
index 00000000000..92404163e53
--- /dev/null
+++ b/resources/js/Pages/Webauthn/Partials/RegisterKey.vue
@@ -0,0 +1,102 @@
+<script setup>
+import { ref, watch, nextTick, computed, onMounted } from 'vue';
+import JetLabel from '@/Components/Label.vue';
+import JetInput from '@/Components/Input.vue';
+import JetInputError from '@/Components/InputError.vue';
+import JetSecondaryButton from '@/Components/Jetstream/SecondaryButton.vue';
+import JetButton from '@/Components/Button.vue';
+import WaitForKey from '@/Pages/Webauthn/Partials/WaitForKey.vue';
+
+const props = defineProps({
+  errorMessage: String,
+  name: String,
+  form: Object,
+});
+
+const emit = defineEmits(['start', 'register', 'update:name']);
+
+const registering = ref(false);
+const error = ref('');
+const nameInput = ref(null);
+
+onMounted(() => {
+  error.value = props.errorMessage;
+  props.form.reset();
+  nameInput.value.focus();
+});
+
+watch(
+  () => props.errorMessage,
+  (value) => {
+    error.value = value;
+  },
+);
+
+const processing = computed(() => registering.value === true || props.form.processing);
+
+const begin = () => {
+  registering.value = true;
+  error.value = '';
+
+  emit('start');
+  axios
+    .post(route('webauthn.store.options'))
+    .then((response) => {
+      if (response.data !== undefined) {
+        registerWaitForKey(response.data.publicKey);
+      } else {
+        nextTick().then(() => registerWaitForKey(response.props.publicKey));
+      }
+    })
+    .catch((e) => {
+      stop();
+      error.value = e.response.data.errors[0];
+    });
+};
+
+const registerWaitForKey = (publicKey) => {
+  if (registering.value === true) {
+    emit('register', publicKey);
+  }
+};
+
+const stop = () => {
+  registering.value = false;
+  emit('stop');
+};
+</script>
+
+<template>
+  <form @submit.prevent="begin">
+    <JetInputError :message="form.errors.register" class="mt-2" />
+
+    <div class="mt-4" v-show="!processing || form.errors.name">
+      <JetLabel for="name" value="Key name" />
+      <JetInput
+        type="text"
+        class="mt-1 block w-3/4"
+        id="name"
+        ref="nameInput"
+        :value="name"
+        @input="$emit('update:name', $event.target.value)"
+        required
+        @keyup.enter="begin()" />
+
+      <JetInputError :message="form.errors.name" class="mt-2" />
+    </div>
+
+    <div class="mt-4" v-show="registering">
+      <WaitForKey :error-message="error" :form="form" @retry="begin()" />
+    </div>
+
+    <div class="mt-5 flex items-center">
+      <JetSecondaryButton @click="stop()">
+        {{ $t('Cancel') }}
+      </JetSecondaryButton>
+
+      <JetButton class="ml-2" :class="{ 'opacity-25': processing }" :disabled="processing">
+        {{ $t('Submit') }}
+      </JetButton>
+    </div>
+  </form>
+</template>
diff --git a/resources/js/Pages/Webauthn/Partials/UpdateKey.vue b/resources/js/Pages/Webauthn/Partials/UpdateKey.vue
new file mode 100644
index 00000000000..e63a5f8dd08
--- /dev/null
+++ b/resources/js/Pages/Webauthn/Partials/UpdateKey.vue
@@ -0,0 +1,72 @@
+<script setup>
+import { ref, watch, nextTick } from 'vue';
+import { useForm } from '@inertiajs/inertia-vue3';
+import JetLabel from '@/Components/Label.vue';
+import JetInput from '@/Components/Input.vue';
+import JetInputError from '@/Components/InputError.vue';
+import JetButton from '@/Components/Button.vue';
+import JetSecondaryButton from '@/Components/Jetstream/SecondaryButton.vue';
+
+const form = useForm({
+  name: '',
+});
+
+const props = defineProps({
+  keyid: Number,
+  nameUpdate: String,
+});
+
+const emit = defineEmits(['close']);
+
+const nameInput = ref(null);
+
+const updateKey = () => {
+  form.put(route('webauthn.update', props.keyid), {
+    preserveScroll: true,
+    preserveState: true,
+    onSuccess: () => {
+      form.reset();
+      nextTick().then(() => emit('close'));
+    },
+  });
+};
+
+watch(
+  () => props.nameUpdate,
+  (value) => {
+    form.name = value;
+    setTimeout(() => (nameInput.value ? nameInput.value.focus() : null), 200);
+  },
+  {
+    immediate: true,
+  },
+);
+</script>
+
+<template>
+  <form @submit.prevent="updateKey">
+    <div class="mt-4">
+      <JetLabel for="keyname" value="Key name" />
+      <JetInput
+        type="text"
+        class="mt-1 block"
+        id="keyname"
+        ref="nameInput"
+        v-model="form.name"
+        required
+        @keyup.enter="updateKey" />
+
+      <JetInputError :message="form.errors.name" class="mt-2" />
+    </div>
+
+    <div class="mt-5">
+      <JetSecondaryButton @click="$emit('close')">
+        {{ $t('Cancel') }}
+      </JetSecondaryButton>
+
+      <JetButton class="ml-2" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
+        {{ $t('Update') }}
+      </JetButton>
+    </div>
+  </form>
+</template>
diff --git a/resources/js/Pages/Webauthn/Partials/WaitForKey.vue b/resources/js/Pages/Webauthn/Partials/WaitForKey.vue
new file mode 100644
index 00000000000..d28f2c5f371
--- /dev/null
+++ b/resources/js/Pages/Webauthn/Partials/WaitForKey.vue
@@ -0,0 +1,82 @@
+<script setup>
+import JetButton from '@/Components/Button.vue';
+
+defineProps({
+  errorMessage: String,
+  form: Object,
+});
+
+defineEmits(['retry']);
+</script>
+
+<template>
+  <div>
+    <div v-if="errorMessage !== ''" class="form-error-message mb3">
+      <div
+        class="relative rounded border border-red-400 bg-red-100 px-4 py-3 dark:border-red-600 dark:bg-red-900"
+        role="alert">
+        <p class="font-bold text-red-700 dark:text-red-300">
+          {{ errorMessage }}
+        </p>
+        <JetButton class="mt-4" @click="$emit('retry')">
+          {{ $t('Retry') }}
+        </JetButton>
+      </div>
+    </div>
+    <template v-else>
+      <div
+        v-if="form.processing"
+        class="mb-4 flex rounded-b border-t-4 border-teal-500 bg-teal-100 px-4 py-8 shadow-md dark:bg-teal-900 dark:shadow-gray-700"
+        role="alert">
+        <div class="mr-2 text-teal-800 dark:text-teal-200">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            stroke="currentColor"
+            class="h-8 w-8"
+            viewBox="-50 0 700 600">
+            <g transform="matrix(42.857142857142854,0,0,42.857142857142854,0,0)">
+              <g>
+                <polyline points="5.62 7.38 11.5 1.5 13.5 3.5"></polyline>
+                <line x1="9.25" y1="3.75" x2="11" y2="5.5"></line>
+                <circle cx="3.5" cy="9.5" r="3"></circle>
+              </g>
+            </g>
+          </svg>
+        </div>
+        <p class="text-2xl font-bold text-teal-900 dark:text-teal-100">
+          {{ $t('Validating key…') }}
+        </p>
+      </div>
+      <div
+        v-else-if="!form.hasErrors"
+        class="mb-4 flex rounded-b border-t-4 border-indigo-500 bg-indigo-100 px-4 py-8 shadow-md dark:bg-indigo-900 dark:shadow-gray-700">
+        <div class="mr-2 text-indigo-800 dark:text-indigo-200">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            stroke="currentColor"
+            class="h-8 w-8"
+            viewBox="-50 0 700 600">
+            <g transform="matrix(42.857142857142854,0,0,42.857142857142854,0,0)">
+              <g>
+                <polyline points="5.62 7.38 11.5 1.5 13.5 3.5"></polyline>
+                <line x1="9.25" y1="3.75" x2="11" y2="5.5"></line>
+                <circle cx="3.5" cy="9.5" r="3"></circle>
+              </g>
+            </g>
+          </svg>
+        </div>
+        <p class="text-2xl font-bold text-indigo-900 dark:text-indigo-100">
+          {{ $t('Waiting for key…') }}
+        </p>
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/resources/js/Pages/Webauthn/WebauthnKeys.vue b/resources/js/Pages/Webauthn/WebauthnKeys.vue
new file mode 100644
index 00000000000..b460dc19256
--- /dev/null
+++ b/resources/js/Pages/Webauthn/WebauthnKeys.vue
@@ -0,0 +1,215 @@
+<script setup>
+import { ref, nextTick, computed, onMounted } from 'vue';
+import { useForm } from '@inertiajs/inertia-vue3';
+import { trans } from 'laravel-vue-i18n';
+import JetActionSection from '@/Components/Jetstream/ActionSection.vue';
+import JetSecondaryButton from '@/Components/Jetstream/SecondaryButton.vue';
+import JetConfirmsPassword from '@/Components/Jetstream/ConfirmsPassword.vue';
+import JetButton from '@/Components/Button.vue';
+import RegisterKey from '@/Pages/Webauthn/Partials/RegisterKey.vue';
+import DeleteKeyModal from '@/Pages/Webauthn/Partials/DeleteKeyModal.vue';
+import UpdateKey from '@/Pages/Webauthn/Partials/UpdateKey.vue';
+import WebAuthn from '@/webauthn.js';
+
+const props = defineProps({
+  webauthnKeys: Array,
+  publicKey: Object,
+});
+
+const isSupported = ref(true);
+const errorMessage = ref('');
+
+const register = ref(false);
+const registerForm = useForm({
+  name: '',
+});
+const keyBeingDeleted = ref(null);
+const keyBeingUpdated = ref(null);
+
+const nameUpdate = computed(() =>
+  keyBeingUpdated.value > 0 ? props.webauthnKeys.find((key) => key.id === keyBeingUpdated.value).name : '',
+);
+
+onMounted(() => {
+  errorMessage.value = '';
+
+  if (!webauthn.webAuthnSupport()) {
+    isSupported.value = false;
+    errorMessage.value = notSupportedMessage();
+  }
+
+  if (props.publicKey) {
+    showRegisterModal();
+    registerWaitForKey(props.publicKey);
+  }
+});
+
+const webauthn = new WebAuthn((name, message) => {
+  errorMessage.value = _errorMessage(name, message);
+});
+
+const _errorMessage = (name, message) => {
+  switch (name) {
+    case 'InvalidStateError':
+      return trans('This key is already registered. It’s not necessary to register it again.');
+    case 'NotAllowedError':
+      return trans('The operation either timed out or was not allowed.');
+    default:
+      return message;
+  }
+};
+
+const notSupportedMessage = () => {
+  switch (webauthn.notSupportedMessage()) {
+    case 'not_supported':
+      return trans('Your browser doesn’t currently support WebAuthn.');
+    case 'not_secured':
+      return trans('WebAuthn only supports secure connections. Please load this page with https scheme.');
+    default:
+      return '';
+  }
+};
+
+const showRegisterModal = () => {
+  errorMessage.value = '';
+  register.value = true;
+};
+
+const start = () => {
+  errorMessage.value = '';
+  registerForm.clearErrors();
+};
+
+const registerWaitForKey = (publicKey) => {
+  nextTick().then(() =>
+    webauthn.register(publicKey, (data) => {
+      webauthnRegisterCallback(data);
+    }),
+  );
+};
+
+const webauthnRegisterCallback = (data) => {
+  registerForm
+    .transform((form) => ({
+      ...form,
+      ...data,
+    }))
+    .post(route('webauthn.store'), {
+      preserveScroll: true,
+      preserveState: true,
+      onSuccess: () => {
+        register.value = false;
+        registerForm.reset();
+      },
+      onError: (error) => {
+        errorMessage.value = error.email ? error.email : error.data.errors.webauthn;
+      },
+    });
+};
+</script>
+
+<template>
+  <JetActionSection>
+    <template #title>
+      {{ $t('Security keys') }}
+    </template>
+
+    <template #description>
+      {{ $t('Add additional security to your account using a security key.') }}
+    </template>
+
+    <template #content>
+      <h3 v-if="keyBeingUpdated > 0" class="text-lg font-medium text-gray-900 dark:text-gray-100">
+        {{ $t('Update a key.') }}
+      </h3>
+      <h3 v-else-if="!register" class="text-lg font-medium text-gray-900 dark:text-gray-100">
+        {{ $t('Use a security key (Webauthn, or FIDO) to increase your account security.') }}
+      </h3>
+      <h3 v-else class="text-lg font-medium text-gray-900 dark:text-gray-100">
+        {{ $t('Register a new key.') }}
+      </h3>
+
+      <div v-if="!isSupported">
+        {{ notSupportedMessage() }}
+      </div>
+
+      <div v-else-if="register">
+        <RegisterKey
+          :errorMessage="errorMessage"
+          :form="registerForm"
+          :name="registerForm.name"
+          @update:name="registerForm.name = $event"
+          @start="start"
+          @stop="register = false"
+          @register="registerWaitForKey" />
+      </div>
+
+      <div v-else-if="keyBeingUpdated > 0">
+        <UpdateKey :keyid="keyBeingUpdated" :name-update="nameUpdate" @close="keyBeingUpdated = null" />
+      </div>
+
+      <div v-else class="mt-5 space-y-6">
+        <div v-if="webauthnKeys.length === 0" class="dark:text-gray-400">
+          {{ $t('No keys registered yet') }}
+        </div>
+        <div v-else v-for="key in webauthnKeys" :key="key.id" class="mb-2 flex items-center">
+          <div class="text-gray-500">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              stroke="currentColor"
+              class="h-8 w-8"
+              viewBox="-50 0 700 600">
+              <g transform="matrix(42.857142857142854,0,0,42.857142857142854,0,0)">
+                <g>
+                  <polyline points="5.62 7.38 11.5 1.5 13.5 3.5"></polyline>
+                  <line x1="9.25" y1="3.75" x2="11" y2="5.5"></line>
+                  <circle cx="3.5" cy="9.5" r="3"></circle>
+                </g>
+              </g>
+            </svg>
+          </div>
+
+          <div class="ml-3 w-48">
+            <div class="text-sm text-gray-600 dark:text-gray-400">
+              {{ key.name }}
+            </div>
+
+            <div class="text-xs text-gray-500">
+              <span>
+                {{ $t('Last active :date', { date: key.last_active }) }}
+              </span>
+            </div>
+          </div>
+
+          <div class="ml-3 text-sm">
+            <JetSecondaryButton
+              class="pointer text-indigo-400 hover:text-indigo-600"
+              href=""
+              @click.prevent="keyBeingUpdated = key.id">
+              {{ $t('Update') }}
+            </JetSecondaryButton>
+            <JetConfirmsPassword @confirmed="keyBeingDeleted = key.id">
+              <JetSecondaryButton class="pointer ml-2 text-indigo-400 hover:text-indigo-600" href="">
+                {{ $t('Delete') }}
+              </JetSecondaryButton>
+            </JetConfirmsPassword>
+          </div>
+        </div>
+
+        <div class="mt-5 flex items-center">
+          <JetConfirmsPassword @confirmed="showRegisterModal">
+            <JetButton type="button">
+              {{ $t('Register a new key') }}
+            </JetButton>
+          </JetConfirmsPassword>
+        </div>
+      </div>
+
+      <DeleteKeyModal :keyid="keyBeingDeleted" @close="keyBeingDeleted = null" />
+    </template>
+  </JetActionSection>
+</template>
diff --git a/resources/js/Pages/Webauthn/WebauthnLogin.vue b/resources/js/Pages/Webauthn/WebauthnLogin.vue
new file mode 100644
index 00000000000..b4cd22fb28a
--- /dev/null
+++ b/resources/js/Pages/Webauthn/WebauthnLogin.vue
@@ -0,0 +1,122 @@
+<script setup>
+import { ref, nextTick, watch, onMounted } from 'vue';
+import { useForm } from '@inertiajs/inertia-vue3';
+import { Inertia } from '@inertiajs/inertia';
+import { trans } from 'laravel-vue-i18n';
+import JetInputError from '@/Components/InputError.vue';
+import JetButton from '@/Components/Button.vue';
+import WaitForKey from '@/Pages/Webauthn/Partials/WaitForKey.vue';
+import WebAuthn from '@/webauthn.js';
+
+const props = defineProps({
+  publicKey: Object,
+  remember: Boolean,
+});
+
+const isSupported = ref(true);
+const errorMessage = ref('');
+const processing = ref(false);
+
+const authForm = useForm();
+
+watch(
+  () => props.publicKey,
+  (value) => {
+    errorMessage.value = '';
+    nextTick().then(() => loginWaitForKey(value));
+  },
+);
+
+onMounted(() => {
+  errorMessage.value = '';
+
+  if (!webauthn.webAuthnSupport()) {
+    isSupported.value = false;
+    errorMessage.value = notSupportedMessage();
+  }
+
+  if (props.publicKey) {
+    loginWaitForKey(props.publicKey);
+  }
+});
+
+const webauthn = new WebAuthn((name, message) => {
+  errorMessage.value = _errorMessage(name, message);
+});
+
+const _errorMessage = (name, message) => {
+  switch (name) {
+    case 'InvalidStateError':
+      return trans('Unexpected error on login.');
+    case 'NotAllowedError':
+      return trans('The operation either timed out or was not allowed.');
+    default:
+      return message;
+  }
+};
+
+const notSupportedMessage = () => {
+  switch (webauthn.notSupportedMessage()) {
+    case 'not_supported':
+      return trans('Your browser doesn’t currently support WebAuthn.');
+    case 'not_secured':
+      return trans('WebAuthn only supports secure connections. Please load this page with https scheme.');
+    default:
+      return '';
+  }
+};
+
+const start = () => {
+  errorMessage.value = '';
+  Inertia.reload({ only: ['publicKey'] });
+};
+
+const stop = () => {
+  processing.value = false;
+};
+
+const loginWaitForKey = (publicKey) => {
+  processing.value = true;
+  nextTick().then(() =>
+    webauthn.sign(publicKey, (data) => {
+      webauthnLoginCallback(data);
+    }),
+  );
+};
+
+const webauthnLoginCallback = (data) => {
+  authForm
+    .transform(() => ({
+      ...data,
+      remember: props.remember ? 'on' : '',
+    }))
+    .post(route('webauthn.auth'), {
+      preserveScroll: true,
+      preserveState: true,
+      onSuccess: () => {
+        stop();
+      },
+      onError: (error) => {
+        errorMessage.value = error.message ? error.message : error.data.errors[0];
+        stop();
+      },
+    });
+};
+</script>
+
+<template>
+  <div>
+    <div v-if="!isSupported">
+      {{ notSupportedMessage() }}
+    </div>
+    <div v-else>
+      <WaitForKey :error-message="errorMessage" :form="authForm" @retry="start()" />
+
+      <JetInputError :message="authForm.errors.data" class="mt-2" />
+
+      <JetButton class="ml-2" @click="start()" v-show="!processing">
+        {{ $t('Retry') }}
+      </JetButton>
+    </div>
+  </div>
+</template>
diff --git a/resources/js/Shared/Form/Dropdown.vue b/resources/js/Shared/Form/Dropdown.vue
index 618e135d24a..bc255596a8c 100644
--- a/resources/js/Shared/Form/Dropdown.vue
+++ b/resources/js/Shared/Form/Dropdown.vue
@@ -34,10 +34,8 @@ export default {
       default: 'dropdown-',
     },
     data: {
-      type: Array,
-      default() {
-        return [];
-      },
+      type: Object,
+      default: null,
     },
     dropdownClass: {
       type: String,
diff --git a/resources/js/Shared/Form/PrettyLink.vue b/resources/js/Shared/Form/PrettyLink.vue
index 85062d060f6..092c2289e28 100644
--- a/resources/js/Shared/Form/PrettyLink.vue
+++ b/resources/js/Shared/Form/PrettyLink.vue
@@ -1,8 +1,8 @@
 <template>
-  <inertia-link :class="linkClasses" :href="href">
+  <inertia-link :class="linkClasses" :href="href" preserve-scroll>
     <!-- + icon -->
     <svg
-      v-if="icon === 'plus' && state != 'loading'"
+      v-if="icon === 'plus'"
       xmlns="http://www.w3.org/2000/svg"
       class="icon relative inline h-5 w-5"
       fill="none"
@@ -13,7 +13,7 @@
 
     <!-- check icon -->
     <svg
-      v-if="icon === 'check' && state != 'loading'"
+      v-else-if="icon === 'check'"
       xmlns="http://www.w3.org/2000/svg"
       class="icon relative inline h-5 w-5"
       fill="none"
diff --git a/resources/js/Shared/Guest.vue b/resources/js/Shared/Guest.vue
index e5725836b74..3a14822ed93 100644
--- a/resources/js/Shared/Guest.vue
+++ b/resources/js/Shared/Guest.vue
@@ -1,9 +1,14 @@
+<script setup>
+import { Link } from '@inertiajs/inertia-vue3';
+import ApplicationLogo from '@/Components/ApplicationLogo.vue';
+</script>
+
 <template>
   <div class="flex min-h-screen flex-col items-center bg-gray-100 pt-6 sm:justify-center sm:pt-0">
     <div>
-      <inertia-link href="/">
-        <breeze-application-logo class="h-20 w-20 fill-current text-gray-500" />
-      </inertia-link>
+      <Link href="/">
+        <ApplicationLogo class="h-20 w-20 fill-current text-gray-500" />
+      </Link>
     </div>
 
     <div class="mt-6 w-full overflow-hidden bg-white px-6 py-6 shadow-md dark:bg-gray-900 sm:max-w-md sm:rounded-lg">
@@ -11,13 +16,3 @@
     </div>
   </div>
 </template>
-
-<script>
-import BreezeApplicationLogo from '@/Components/ApplicationLogo.vue';
-
-export default {
-  components: {
-    BreezeApplicationLogo,
-  },
-};
-</script>
diff --git a/resources/js/Shared/Layout.vue b/resources/js/Shared/Layout.vue
index 859cbb71b34..ce37a42c325 100644
--- a/resources/js/Shared/Layout.vue
+++ b/resources/js/Shared/Layout.vue
@@ -1,299 +1,300 @@
 <template>
-  <main>
-    <div class="min-h-full">
-      <div class="fixed top-0 z-10 w-full">
-        <!-- main nav -->
-        <nav
-          class="max-w-8xl mx-auto flex h-10 items-center justify-between border-b bg-gray-50 px-3 dark:border-slate-600 dark:bg-gray-800 dark:text-slate-200 sm:px-6">
-          <div
-            class="dark:highlight-white/5 items-center rounded-lg border border-gray-200 bg-white px-2 py-1 text-sm dark:border-0 dark:border-gray-700 dark:bg-gray-900 dark:bg-gray-400/20 sm:flex">
-            <inertia-link :href="layoutData.url.vaults" class="flex-shrink-0 dark:text-sky-400">
-              {{ layoutData.user.name }}
-            </inertia-link>
+  <div class="min-h-full">
+    <div class="fixed top-0 z-10 w-full">
+      <!-- main nav -->
+      <nav
+        class="max-w-8xl mx-auto flex h-10 items-center justify-between border-b bg-gray-50 px-3 dark:border-slate-600 dark:bg-gray-800 dark:text-slate-200 sm:px-6">
+        <div
+          class="dark:highlight-white/5 items-center rounded-lg border border-gray-200 bg-white px-2 py-1 text-sm dark:border-0 dark:border-gray-700 dark:bg-gray-900 dark:bg-gray-400/20 sm:flex">
+          <inertia-link :href="layoutData.url.vaults" class="flex-shrink-0 dark:text-sky-400">
+            {{ layoutData.user.name }}
+          </inertia-link>
 
-            <!-- information about the current vault -->
-            <div v-if="layoutData.vault">
-              <span class="relative mr-1 ml-1">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="relative inline h-3 w-3"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
-                </svg>
-              </span>
-              {{ layoutData.vault.name }}
-            </div>
+          <!-- information about the current vault -->
+          <div v-if="layoutData.vault">
+            <span class="relative mr-1 ml-1">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="relative inline h-3 w-3"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+              </svg>
+            </span>
+            {{ layoutData.vault.name }}
           </div>
+        </div>
 
-          <!-- search box -->
-          <div v-if="insideVault" class="flew-grow relative">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="icon-search absolute h-4 w-4 text-gray-400"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor">
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-            </svg>
-            <input
-              type="text"
-              class="dark:highlight-white/5 block w-64 rounded-md border border-gray-300 px-2 py-1 text-center placeholder:text-gray-600 hover:cursor-pointer focus:border-indigo-500 focus:ring-indigo-500 dark:border-0 dark:border-gray-700 dark:bg-slate-900 placeholder:dark:text-gray-400 hover:dark:bg-slate-700 sm:text-sm"
-              :placeholder="$t('app.layout_menu_search')"
-              @focus="goToSearchPage" />
-          </div>
+        <!-- search box -->
+        <div v-if="insideVault" class="flew-grow relative">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="icon-search absolute h-4 w-4 text-gray-400"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor">
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+          </svg>
+          <input
+            type="text"
+            class="dark:highlight-white/5 block w-64 rounded-md border border-gray-300 px-2 py-1 text-center placeholder:text-gray-600 hover:cursor-pointer focus:border-indigo-500 focus:ring-indigo-500 dark:border-0 dark:border-gray-700 dark:bg-slate-900 placeholder:dark:text-gray-400 hover:dark:bg-slate-700 sm:text-sm"
+            :placeholder="$t('app.layout_menu_search')"
+            @focus="goToSearchPage" />
+        </div>
 
-          <!-- icons -->
-          <div class="flew-grow">
-            <ul class="relative">
-              <li class="icon-dark-mode relative mr-4 inline">
-                <label for="default-toggle" class="relative inline-flex cursor-pointer">
-                  <input
-                    id="default-toggle"
-                    v-model="style.checked"
-                    type="checkbox"
-                    class="peer sr-only"
-                    @click="toggleStyle" />
-                  <div
-                    class="peer mr-2 h-4 w-7 rounded-full bg-gray-200 after:absolute after:top-[2px] after:left-[2px] after:h-3 after:w-3 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-800 dark:peer-focus:ring-blue-800" />
-                  <svg
-                    v-if="!style.checked"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 14 14"
-                    height="15"
-                    width="15">
-                    <g>
-                      <circle
-                        cx="7"
-                        cy="7"
-                        r="2.5"
-                        fill="none"
-                        stroke="#4B5563"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"></circle>
-                      <line
-                        x1="7"
-                        y1="0.5"
-                        x2="7"
-                        y2="2.5"
-                        fill="none"
-                        stroke="#4B5563"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"></line>
-                      <line
-                        x1="2.4"
-                        y1="2.4"
-                        x2="3.82"
-                        y2="3.82"
-                        fill="none"
-                        stroke="#4B5563"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"></line>
-                      <line
-                        x1="0.5"
-                        y1="7"
-                        x2="2.5"
-                        y2="7"
-                        fill="none"
-                        stroke="#4B5563"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"></line>
-                      <line
-                        x1="2.4"
-                        y1="11.6"
-                        x2="3.82"
-                        y2="10.18"
-                        fill="none"
-                        stroke="#4B5563"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"></line>
-                      <line
-                        x1="7"
-                        y1="13.5"
-                        x2="7"
-                        y2="11.5"
-                        fill="none"
-                        stroke="#4B5563"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"></line>
-                      <line
-                        x1="11.6"
-                        y1="11.6"
-                        x2="10.18"
-                        y2="10.18"
-                        fill="none"
-                        stroke="#4B5563"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"></line>
-                      <line
-                        x1="13.5"
-                        y1="7"
-                        x2="11.5"
-                        y2="7"
-                        fill="none"
-                        stroke="#4B5563"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"></line>
-                      <line
-                        x1="11.6"
-                        y1="2.4"
-                        x2="10.18"
-                        y2="3.82"
-                        fill="none"
-                        stroke="#4B5563"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"></line>
-                    </g>
-                  </svg>
-                  <svg
-                    v-if="style.checked"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 14 14"
-                    height="15"
-                    width="15">
-                    <path
-                      d="M12,10.48A6.55,6.55,0,0,1,6.46.5a6.55,6.55,0,0,0,1,13A6.46,6.46,0,0,0,13,10.39,6.79,6.79,0,0,1,12,10.48Z"
+        <!-- icons -->
+        <div class="flew-grow">
+          <ul class="relative">
+            <li class="icon-dark-mode relative mr-4 inline">
+              <label for="default-toggle" class="relative inline-flex cursor-pointer">
+                <input
+                  id="default-toggle"
+                  v-model="style.checked"
+                  type="checkbox"
+                  class="peer sr-only"
+                  @click="toggleStyle" />
+                <div
+                  class="peer mr-2 h-4 w-7 rounded-full bg-gray-200 after:absolute after:top-[2px] after:left-[2px] after:h-3 after:w-3 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-800 dark:peer-focus:ring-blue-800" />
+                <svg
+                  v-if="!style.checked"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 14 14"
+                  height="15"
+                  width="15">
+                  <g>
+                    <circle
+                      cx="7"
+                      cy="7"
+                      r="2.5"
                       fill="none"
-                      stroke="#e5e7eb"
+                      stroke="#4B5563"
                       stroke-linecap="round"
-                      stroke-linejoin="round"></path>
-                  </svg>
-                </label>
-              </li>
-              <li class="mr-4 inline">
-                <inertia-link :href="layoutData.url.settings" class="relative inline">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    class="icon-cog relative mr-1 inline-block h-4 w-4 cursor-pointer text-gray-600 dark:text-gray-400 dark:text-gray-300 sm:h-4 sm:w-4"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor">
-                    <path
+                      stroke-linejoin="round"></circle>
+                    <line
+                      x1="7"
+                      y1="0.5"
+                      x2="7"
+                      y2="2.5"
+                      fill="none"
+                      stroke="#4B5563"
                       stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
-                    <path
+                      stroke-linejoin="round"></line>
+                    <line
+                      x1="2.4"
+                      y1="2.4"
+                      x2="3.82"
+                      y2="3.82"
+                      fill="none"
+                      stroke="#4B5563"
                       stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-                  </svg>
-
-                  <span class="text-sm dark:text-sky-400">{{ $t('app.layout_menu_settings') }}</span>
-                </inertia-link>
-              </li>
-              <li class="inline">
-                <inertia-link class="inline" method="post" :href="route('logout')">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    class="mr-1 inline-block h-4 w-4 cursor-pointer text-gray-600 dark:text-gray-400 dark:text-gray-300 sm:h-4 sm:w-4"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor">
-                    <path
+                      stroke-linejoin="round"></line>
+                    <line
+                      x1="0.5"
+                      y1="7"
+                      x2="2.5"
+                      y2="7"
+                      fill="none"
+                      stroke="#4B5563"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"></line>
+                    <line
+                      x1="2.4"
+                      y1="11.6"
+                      x2="3.82"
+                      y2="10.18"
+                      fill="none"
+                      stroke="#4B5563"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"></line>
+                    <line
+                      x1="7"
+                      y1="13.5"
+                      x2="7"
+                      y2="11.5"
+                      fill="none"
+                      stroke="#4B5563"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"></line>
+                    <line
+                      x1="11.6"
+                      y1="11.6"
+                      x2="10.18"
+                      y2="10.18"
+                      fill="none"
+                      stroke="#4B5563"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"></line>
+                    <line
+                      x1="13.5"
+                      y1="7"
+                      x2="11.5"
+                      y2="7"
+                      fill="none"
+                      stroke="#4B5563"
                       stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
-                  </svg>
+                      stroke-linejoin="round"></line>
+                    <line
+                      x1="11.6"
+                      y1="2.4"
+                      x2="10.18"
+                      y2="3.82"
+                      fill="none"
+                      stroke="#4B5563"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"></line>
+                  </g>
+                </svg>
+                <svg v-if="style.checked" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" height="15" width="15">
+                  <path
+                    d="M12,10.48A6.55,6.55,0,0,1,6.46.5a6.55,6.55,0,0,0,1,13A6.46,6.46,0,0,0,13,10.39,6.79,6.79,0,0,1,12,10.48Z"
+                    fill="none"
+                    stroke="#e5e7eb"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"></path>
+                </svg>
+              </label>
+            </li>
+            <li class="mr-4 inline">
+              <inertia-link :href="layoutData.url.settings" class="relative inline">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="icon-cog relative mr-1 inline-block h-4 w-4 cursor-pointer text-gray-600 dark:text-gray-400 dark:text-gray-300 sm:h-4 sm:w-4"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor">
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                </svg>
 
-                  <span class="text-sm dark:text-sky-400">{{ $t('app.layout_menu_logout') }}</span>
-                </inertia-link>
-              </li>
-            </ul>
-          </div>
-        </nav>
+                <span class="text-sm dark:text-sky-400">{{ $t('app.layout_menu_settings') }}</span>
+              </inertia-link>
+            </li>
+            <li class="inline">
+              <inertia-link class="inline" method="post" :href="route('logout')" as="button">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="mr-1 inline-block h-4 w-4 cursor-pointer text-gray-600 dark:text-gray-400 dark:text-gray-300 sm:h-4 sm:w-4"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor">
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
+                </svg>
 
-        <!-- vault sub menu -->
-        <nav v-if="insideVault" class="bg-white dark:border-slate-300/10 dark:bg-gray-900 sm:border-b">
-          <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
-            <div class="flex items-baseline justify-between space-x-6">
-              <div>
-                <inertia-link
-                  :href="layoutData.vault.url.dashboard"
-                  :class="{
-                    'bg-blue-700 text-white dark:bg-blue-300 dark:text-gray-900':
-                      $page.component === 'Vault/Dashboard/Index',
-                  }"
-                  class="mr-2 rounded-md px-2 py-1 text-sm font-medium hover:bg-gray-700 hover:text-white dark:bg-sky-400/20 dark:text-slate-400 dark:hover:text-slate-300">
-                  {{ $t('app.layout_menu_dashboard') }}
-                </inertia-link>
+                <span class="text-sm dark:text-sky-400">{{ $t('app.layout_menu_logout') }}</span>
+              </inertia-link>
+            </li>
+          </ul>
+        </div>
+      </nav>
 
-                <!-- <inertia-link
-                  href=""
-                  class="mr-2 rounded-md px-2 py-1 text-sm font-medium hover:bg-gray-700 hover:text-white dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
-                  {{ $t('app.layout_menu_reports') }}
-                </inertia-link> -->
+      <!-- vault sub menu -->
+      <nav v-if="insideVault" class="bg-white dark:border-slate-300/10 dark:bg-gray-900 sm:border-b">
+        <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
+          <div class="flex items-baseline justify-between space-x-6">
+            <div>
+              <inertia-link
+                :href="layoutData.vault.url.dashboard"
+                :class="{
+                  'bg-blue-700 text-white dark:bg-blue-300 dark:text-gray-900':
+                    $page.component === 'Vault/Dashboard/Index',
+                }"
+                class="mr-2 rounded-md px-2 py-1 text-sm font-medium hover:bg-gray-700 hover:text-white dark:bg-sky-400/20 dark:text-slate-400 dark:hover:text-slate-300">
+                {{ $t('app.layout_menu_dashboard') }}
+              </inertia-link>
 
-                <inertia-link
-                  :href="layoutData.vault.url.contacts"
-                  :class="{ 'bg-blue-700 text-white': $page.component.startsWith('Vault/Contact') }"
-                  class="mr-2 rounded-md px-2 py-1 text-sm font-medium hover:bg-gray-700 hover:text-white dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
-                  {{ $t('app.layout_menu_contacts') }}
-                </inertia-link>
+              <!-- <inertia-link
+                href=""
+                class="mr-2 rounded-md px-2 py-1 text-sm font-medium hover:bg-gray-700 hover:text-white dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
+                {{ $t('app.layout_menu_reports') }}
+              </inertia-link> -->
 
-                <inertia-link
-                  :href="layoutData.vault.url.tasks"
-                  :class="{
-                    'bg-blue-700 text-white dark:bg-blue-300 dark:text-gray-900':
-                      $page.component.startsWith('Vault/Dashboard/Task'),
-                  }"
-                  class="mr-2 rounded-md px-2 py-1 text-sm font-medium hover:bg-gray-700 hover:text-white dark:bg-sky-400/20 dark:text-slate-400 dark:hover:text-slate-300">
-                  {{ $t('app.layout_menu_tasks') }}
-                </inertia-link>
+              <inertia-link
+                :href="layoutData.vault.url.contacts"
+                :class="{ 'bg-blue-700 text-white': $page.component.startsWith('Vault/Contact') }"
+                class="mr-2 rounded-md px-2 py-1 text-sm font-medium hover:bg-gray-700 hover:text-white dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
+                {{ $t('app.layout_menu_contacts') }}
+              </inertia-link>
 
-                <!-- <inertia-link
-                  href=""
-                  class="mr-2 rounded-md px-2 py-1 text-sm font-medium hover:bg-gray-700 hover:text-white dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
-                  {{ $t('app.layout_menu_gift_center') }}
-                </inertia-link> -->
+              <inertia-link
+                :href="layoutData.vault.url.tasks"
+                :class="{
+                  'bg-blue-700 text-white dark:bg-blue-300 dark:text-gray-900':
+                    $page.component.startsWith('Vault/Dashboard/Task'),
+                }"
+                class="mr-2 rounded-md px-2 py-1 text-sm font-medium hover:bg-gray-700 hover:text-white dark:bg-sky-400/20 dark:text-slate-400 dark:hover:text-slate-300">
+                {{ $t('app.layout_menu_tasks') }}
+              </inertia-link>
 
-                <!-- <inertia-link
-                  href=""
-                  class="mr-2 rounded-md px-2 py-1 text-sm font-medium hover:bg-gray-700 hover:text-white dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
-                  {{ $t('app.layout_menu_loans') }}
-                </inertia-link> -->
+              <!-- <inertia-link
+                href=""
+                class="mr-2 rounded-md px-2 py-1 text-sm font-medium hover:bg-gray-700 hover:text-white dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
+                {{ $t('app.layout_menu_gift_center') }}
+              </inertia-link> -->
 
-                <inertia-link
-                  :href="layoutData.vault.url.files"
-                  :class="{ 'bg-blue-700 text-white': $page.component.startsWith('Vault/Files') }"
-                  class="mr-2 rounded-md px-2 py-1 text-sm font-medium hover:bg-gray-700 hover:text-white dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
-                  {{ $t('app.layout_menu_files') }}
-                </inertia-link>
+              <!-- <inertia-link
+                href=""
+                class="mr-2 rounded-md px-2 py-1 text-sm font-medium hover:bg-gray-700 hover:text-white dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
+                {{ $t('app.layout_menu_loans') }}
+              </inertia-link> -->
 
-                <inertia-link
-                  v-if="layoutData.vault.permission.at_least_editor"
-                  :href="layoutData.vault.url.settings"
-                  :class="{ 'bg-blue-700 text-white': $page.component.startsWith('Vault/Settings') }"
-                  class="rounded-md px-2 py-1 text-sm font-medium hover:bg-gray-700 hover:text-white">
-                  {{ $t('app.layout_menu_vault_settings') }}
-                </inertia-link>
-              </div>
+              <inertia-link
+                :href="layoutData.vault.url.files"
+                :class="{ 'bg-blue-700 text-white': $page.component.startsWith('Vault/Files') }"
+                class="mr-2 rounded-md px-2 py-1 text-sm font-medium hover:bg-gray-700 hover:text-white dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
+                {{ $t('app.layout_menu_files') }}
+              </inertia-link>
+
+              <inertia-link
+                v-if="layoutData.vault.permission.at_least_editor"
+                :href="layoutData.vault.url.settings"
+                :class="{ 'bg-blue-700 text-white': $page.component.startsWith('Vault/Settings') }"
+                class="rounded-md px-2 py-1 text-sm font-medium hover:bg-gray-700 hover:text-white">
+                {{ $t('app.layout_menu_vault_settings') }}
+              </inertia-link>
             </div>
           </div>
-        </nav>
+        </div>
+      </nav>
+    </div>
+
+    <!-- Page Heading -->
+    <header v-if="$slots.header" class="relative mt-10 mb-8 bg-white dark:bg-gray-900 sm:border-b">
+      <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
+        <slot name="header" />
       </div>
-      <main class="relative mt-10 mb-8">
-        <slot />
-      </main>
+    </header>
 
-      <footer class="mb-10 text-center text-xs">
-        <ul class="dark:text-gray-300">
-          <li class="mr-4 mb-2 sm:mb-0 sm:inline">
-            {{ $t('app.layout_footer_monica') }}
-          </li>
-        </ul>
-      </footer>
-    </div>
+    <main class="relative mt-10 mb-8">
+      <slot />
+    </main>
+
+    <footer class="mb-10 text-center text-xs">
+      <ul class="dark:text-gray-300">
+        <li class="mr-4 mb-2 sm:mb-0 sm:inline">
+          {{ $t('app.layout_footer_monica') }}
+        </li>
+      </ul>
+    </footer>
+  </div>
 
-    <toaster />
-  </main>
+  <toaster />
 </template>
 
 <script>
diff --git a/resources/js/Shared/Toaster.vue b/resources/js/Shared/Toaster.vue
index ab19790f150..f4ea4b79076 100644
--- a/resources/js/Shared/Toaster.vue
+++ b/resources/js/Shared/Toaster.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flash notification fixed" :class="[levelClass, isOpen ? isVisibleClass : '']">
+  <div class="flash notification fixed" :class="[levelClass, { 'is-visible': isOpen }]">
     <span class="mr-1"> 👋 </span>
     {{ messageText }}
   </div>
diff --git a/resources/js/webauthn.js b/resources/js/webauthn.js
new file mode 100644
index 00000000000..d102a5a4e7d
--- /dev/null
+++ b/resources/js/webauthn.js
@@ -0,0 +1,231 @@
+/**
+ * WebAuthn client.
+ *
+ * This file is part of asbiin/laravel-webauthn project.
+ *
+ * @copyright Alexis SAETTLER © 2019
+ * @license MIT
+ */
+
+'use strict';
+
+/**
+ * Create a new instance of WebAuthn.
+ *
+ * @param {function(string, bool)} notifyCallback
+ * @constructor
+ */
+function WebAuthn(notifyCallback = null) {
+  if (notifyCallback) {
+    this.setNotify(notifyCallback);
+  }
+}
+
+/**
+ * Register a new key.
+ *
+ * @param {PublicKeyCredentialCreationOptions} publicKey  - see https://www.w3.org/TR/webauthn/#dictdef-publickeycredentialcreationoptions
+ * @param {function(PublicKeyCredential)} callback  User callback
+ */
+WebAuthn.prototype.register = function (publicKey, callback) {
+  const publicKeyCredential = Object.assign({}, publicKey);
+  publicKeyCredential.user.id = this._bufferDecode(publicKey.user.id);
+  publicKeyCredential.challenge = this._bufferDecode(this._base64Decode(publicKey.challenge));
+  if (publicKey.excludeCredentials) {
+    publicKeyCredential.excludeCredentials = this._credentialDecode(publicKey.excludeCredentials);
+  }
+
+  const self = this;
+  navigator.credentials
+    .create({
+      publicKey: publicKeyCredential,
+    })
+    .then(
+      (data) => {
+        self._registerCallback(data, callback);
+      },
+      (error) => {
+        self._notify(error.name, error.message, false);
+      },
+    );
+};
+
+/**
+ * Register callback on register key.
+ *
+ * @param {PublicKeyCredential} publicKey @see https://www.w3.org/TR/webauthn/#publickeycredential
+ * @param {function(PublicKeyCredential)} callback  User callback
+ */
+WebAuthn.prototype._registerCallback = function (publicKey, callback) {
+  const publicKeyCredential = {
+    id: publicKey.id,
+    type: publicKey.type,
+    rawId: this._bufferEncode(publicKey.rawId),
+    response: {
+      /** @see https://www.w3.org/TR/webauthn/#authenticatorattestationresponse */
+      clientDataJSON: this._bufferEncode(publicKey.response.clientDataJSON),
+      attestationObject: this._bufferEncode(publicKey.response.attestationObject),
+    },
+  };
+
+  callback(publicKeyCredential);
+};
+
+/**
+ * Authenticate a user.
+ *
+ * @param {PublicKeyCredentialRequestOptions} publicKey  - see https://www.w3.org/TR/webauthn/#dictdef-publickeycredentialrequestoptions
+ * @param {function(PublicKeyCredential)} callback  User callback
+ */
+WebAuthn.prototype.sign = function (publicKey, callback) {
+  const publicKeyCredential = Object.assign({}, publicKey);
+  publicKeyCredential.challenge = this._bufferDecode(this._base64Decode(publicKey.challenge));
+  if (publicKey.allowCredentials) {
+    publicKeyCredential.allowCredentials = this._credentialDecode(publicKey.allowCredentials);
+  }
+
+  const self = this;
+  navigator.credentials
+    .get({
+      publicKey: publicKeyCredential,
+    })
+    .then(
+      (data) => {
+        self._signCallback(data, callback);
+      },
+      (error) => {
+        self._notify(error.name, error.message, false);
+      },
+    );
+};
+
+/**
+ * Sign callback on authenticate.
+ *
+ * @param {PublicKeyCredential} publicKey @see https://www.w3.org/TR/webauthn/#publickeycredential
+ * @param {function(PublicKeyCredential)} callback  User callback
+ */
+WebAuthn.prototype._signCallback = function (publicKey, callback) {
+  const publicKeyCredential = {
+    id: publicKey.id,
+    type: publicKey.type,
+    rawId: this._bufferEncode(publicKey.rawId),
+    response: {
+      /** @see https://www.w3.org/TR/webauthn/#iface-authenticatorassertionresponse */
+      authenticatorData: this._bufferEncode(publicKey.response.authenticatorData),
+      clientDataJSON: this._bufferEncode(publicKey.response.clientDataJSON),
+      signature: this._bufferEncode(publicKey.response.signature),
+      userHandle: publicKey.response.userHandle ? this._bufferEncode(publicKey.response.userHandle) : null,
+    },
+  };
+
+  callback(publicKeyCredential);
+};
+
+/**
+ * Buffer encode.
+ *
+ * @param {ArrayBuffer} value
+ * @return {string}
+ */
+WebAuthn.prototype._bufferEncode = function (value) {
+  return window.btoa(String.fromCharCode.apply(null, new Uint8Array(value)));
+};
+
+/**
+ * Buffer decode.
+ *
+ * @param {ArrayBuffer} value
+ * @return {string}
+ */
+WebAuthn.prototype._bufferDecode = function (value) {
+  const t = window.atob(value);
+  return Uint8Array.from(t, (c) => c.charCodeAt(0));
+};
+
+/**
+ * Convert a base64url to a base64 string.
+ *
+ * @param {string} input
+ * @return {string}
+ */
+WebAuthn.prototype._base64Decode = function (input) {
+  // Replace non-url compatible chars with base64 standard chars
+  input = input.replace(/-/g, '+').replace(/_/g, '/');
+
+  // Pad out with standard base64 required padding characters
+  const pad = input.length % 4;
+  if (pad) {
+    if (pad === 1) {
+      throw new Error('InvalidLengthError: Input base64url string is the wrong length to determine padding');
+    }
+    input += Array.from({ length: 5 - pad }).join('=');
+  }
+
+  return input;
+};
+
+/**
+ * Credential decode.
+ *
+ * @param {PublicKeyCredentialDescriptor} credentials
+ * @return {PublicKeyCredentialDescriptor}
+ */
+WebAuthn.prototype._credentialDecode = function (credentials) {
+  const self = this;
+  return credentials.map(function (data) {
+    return {
+      id: self._bufferDecode(self._base64Decode(data.id)),
+      type: data.type,
+      transports: data.transports,
+    };
+  });
+};
+
+/**
+ * Test is WebAuthn is supported by this navigator.
+ *
+ * @return {bool}
+ */
+WebAuthn.prototype.webAuthnSupport = function () {
+  return !(
+    window.PublicKeyCredential === undefined ||
+    typeof window.PublicKeyCredential !== 'function' ||
+    typeof window.PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable !== 'function'
+  );
+};
+
+/**
+ * Get the message in case WebAuthn is not supported.
+ *
+ * @return {string}
+ */
+WebAuthn.prototype.notSupportedMessage = function () {
+  if (!window.isSecureContext && window.location.hostname !== 'localhost' && window.location.hostname !== '127.0.0.1') {
+    return 'not_secured';
+  }
+  return 'not_supported';
+};
+
+/**
+ * Call the notify callback.
+ *
+ * @param {string} message
+ * @param {bool} isError
+ */
+WebAuthn.prototype._notify = function (message, isError) {
+  if (this._notifyCallback) {
+    this._notifyCallback(message, isError);
+  }
+};
+
+/**
+ * Set the notify callback.
+ *
+ * @param {function(name: string, message: string, isError: bool)} callback
+ */
+WebAuthn.prototype.setNotify = function (callback) {
+  this._notifyCallback = callback;
+};
+
+export default WebAuthn;
diff --git a/routes/web.php b/routes/web.php
index ef3e3a7543b..9977a66c54a 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -32,6 +32,8 @@
 use App\Contact\ManageReminders\Web\Controllers\ContactModuleReminderController;
 use App\Contact\ManageTasks\Web\Controllers\ContactModuleTaskController;
 use App\Http\Controllers\Auth\AcceptInvitationController;
+use App\Http\Controllers\Auth\SocialiteCallbackController;
+use App\Http\Controllers\Profile\UserTokenController;
 use App\Providers\RouteServiceProvider;
 use App\Settings\CancelAccount\Web\Controllers\CancelAccountController;
 use App\Settings\ManageActivityTypes\Web\Controllers\PersonalizeActivitiesController;
@@ -103,6 +105,12 @@
     return Auth::check()
         ? redirect()->intended(RouteServiceProvider::HOME)
         : redirect()->route('login');
+})->name('home');
+
+Route::middleware(['throttle:oauth2-socialite'])->group(function () {
+    Route::get('auth/{driver}', [SocialiteCallbackController::class, 'login'])->name('login.provider');
+    Route::get('auth/{driver}/callback', [SocialiteCallbackController::class, 'callback']);
+    Route::post('auth/{driver}/callback', [SocialiteCallbackController::class, 'callback']);
 });
 
 Route::get('invitation/{code}', [AcceptInvitationController::class, 'show'])->name('invitation.show');
@@ -496,4 +504,7 @@
 
     // General stuff called by everyone/everywhere
     Route::get('currencies', [CurrencyController::class, 'index'])->name('currencies.index');
+
+    // User & Profile...
+    Route::delete('auth/{driver}', [UserTokenController::class, 'destroy'])->name('provider.delete');
 });
diff --git a/tailwind.config.js b/tailwind.config.js
index 614070277c1..738aff9573e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,6 +6,8 @@ module.exports = {
     './storage/framework/views/*.php',
     './resources/views/**/*.blade.php',
     './resources/js/**/*.vue',
+    './lang/**/*.php',
+    './lang/*.json',
   ],
 
   safelist: [
diff --git a/tests/Feature/ApiTokenPermissionsTest.php b/tests/Feature/Auth/ApiTokenPermissionsTest.php
similarity index 97%
rename from tests/Feature/ApiTokenPermissionsTest.php
rename to tests/Feature/Auth/ApiTokenPermissionsTest.php
index b2d4c91c1b2..fb51d9325a0 100644
--- a/tests/Feature/ApiTokenPermissionsTest.php
+++ b/tests/Feature/Auth/ApiTokenPermissionsTest.php
@@ -1,6 +1,6 @@
 <?php
 
-namespace Tests\Feature;
+namespace Tests\Feature\Auth;
 
 use App\Models\User;
 use Illuminate\Foundation\Testing\RefreshDatabase;
diff --git a/tests/Feature/AuthenticationTest.php b/tests/Feature/Auth/AuthenticationTest.php
similarity index 97%
rename from tests/Feature/AuthenticationTest.php
rename to tests/Feature/Auth/AuthenticationTest.php
index 2dbceac2dc5..075a4c2092a 100644
--- a/tests/Feature/AuthenticationTest.php
+++ b/tests/Feature/Auth/AuthenticationTest.php
@@ -1,6 +1,6 @@
 <?php
 
-namespace Tests\Feature;
+namespace Tests\Feature\Auth;
 
 use App\Models\User;
 use App\Providers\RouteServiceProvider;
diff --git a/tests/Feature/BrowserSessionsTest.php b/tests/Feature/Auth/BrowserSessionsTest.php
similarity index 94%
rename from tests/Feature/BrowserSessionsTest.php
rename to tests/Feature/Auth/BrowserSessionsTest.php
index 9ba664e89df..e54c07e411a 100644
--- a/tests/Feature/BrowserSessionsTest.php
+++ b/tests/Feature/Auth/BrowserSessionsTest.php
@@ -1,6 +1,6 @@
 <?php
 
-namespace Tests\Feature;
+namespace Tests\Feature\Auth;
 
 use App\Models\User;
 use Illuminate\Foundation\Testing\RefreshDatabase;
diff --git a/tests/Feature/CreateApiTokenTest.php b/tests/Feature/Auth/CreateApiTokenTest.php
similarity index 96%
rename from tests/Feature/CreateApiTokenTest.php
rename to tests/Feature/Auth/CreateApiTokenTest.php
index 2b7f9129f93..fc68466a653 100644
--- a/tests/Feature/CreateApiTokenTest.php
+++ b/tests/Feature/Auth/CreateApiTokenTest.php
@@ -1,6 +1,6 @@
 <?php
 
-namespace Tests\Feature;
+namespace Tests\Feature\Auth;
 
 use App\Models\User;
 use Illuminate\Foundation\Testing\RefreshDatabase;
diff --git a/tests/Feature/DeleteApiTokenTest.php b/tests/Feature/Auth/DeleteApiTokenTest.php
similarity index 96%
rename from tests/Feature/DeleteApiTokenTest.php
rename to tests/Feature/Auth/DeleteApiTokenTest.php
index c2efc04735f..bbb69425a40 100644
--- a/tests/Feature/DeleteApiTokenTest.php
+++ b/tests/Feature/Auth/DeleteApiTokenTest.php
@@ -1,6 +1,6 @@
 <?php
 
-namespace Tests\Feature;
+namespace Tests\Feature\Auth;
 
 use App\Models\User;
 use Illuminate\Foundation\Testing\RefreshDatabase;
diff --git a/tests/Feature/EmailVerificationTest.php b/tests/Feature/Auth/EmailVerificationTest.php
similarity index 98%
rename from tests/Feature/EmailVerificationTest.php
rename to tests/Feature/Auth/EmailVerificationTest.php
index 13ef9f925e4..f5cc88e7be0 100644
--- a/tests/Feature/EmailVerificationTest.php
+++ b/tests/Feature/Auth/EmailVerificationTest.php
@@ -1,6 +1,6 @@
 <?php
 
-namespace Tests\Feature;
+namespace Tests\Feature\Auth;
 
 use App\Models\User;
 use App\Providers\RouteServiceProvider;
diff --git a/tests/Feature/PasswordConfirmationTest.php b/tests/Feature/Auth/PasswordConfirmationTest.php
similarity index 97%
rename from tests/Feature/PasswordConfirmationTest.php
rename to tests/Feature/Auth/PasswordConfirmationTest.php
index 2143b63104e..8192136f9f6 100644
--- a/tests/Feature/PasswordConfirmationTest.php
+++ b/tests/Feature/Auth/PasswordConfirmationTest.php
@@ -1,6 +1,6 @@
 <?php
 
-namespace Tests\Feature;
+namespace Tests\Feature\Auth;
 
 use App\Models\User;
 use Illuminate\Foundation\Testing\RefreshDatabase;
diff --git a/tests/Feature/PasswordResetTest.php b/tests/Feature/Auth/PasswordResetTest.php
similarity index 94%
rename from tests/Feature/PasswordResetTest.php
rename to tests/Feature/Auth/PasswordResetTest.php
index 13b94b2dac6..4780c1c5dae 100644
--- a/tests/Feature/PasswordResetTest.php
+++ b/tests/Feature/Auth/PasswordResetTest.php
@@ -1,6 +1,6 @@
 <?php
 
-namespace Tests\Feature;
+namespace Tests\Feature\Auth;
 
 use App\Models\User;
 use Illuminate\Auth\Notifications\ResetPassword;
@@ -82,8 +82,8 @@ public function test_password_can_be_reset_with_valid_token()
             $response = $this->post('/reset-password', [
                 'token' => $notification->token,
                 'email' => $user->email,
-                'password' => 'password',
-                'password_confirmation' => 'password',
+                'password' => 'Password$123',
+                'password_confirmation' => 'Password$123',
             ]);
 
             $response->assertSessionHasNoErrors();
diff --git a/tests/Feature/ProfileInformationTest.php b/tests/Feature/Auth/ProfileInformationTest.php
similarity index 95%
rename from tests/Feature/ProfileInformationTest.php
rename to tests/Feature/Auth/ProfileInformationTest.php
index abda03265b9..e63c4ce5c95 100644
--- a/tests/Feature/ProfileInformationTest.php
+++ b/tests/Feature/Auth/ProfileInformationTest.php
@@ -1,6 +1,6 @@
 <?php
 
-namespace Tests\Feature;
+namespace Tests\Feature\Auth;
 
 use App\Models\User;
 use Illuminate\Foundation\Testing\RefreshDatabase;
diff --git a/tests/Feature/RegistrationTest.php b/tests/Feature/Auth/RegistrationTest.php
similarity index 89%
rename from tests/Feature/RegistrationTest.php
rename to tests/Feature/Auth/RegistrationTest.php
index 57dc874688d..09a6c8a2563 100644
--- a/tests/Feature/RegistrationTest.php
+++ b/tests/Feature/Auth/RegistrationTest.php
@@ -1,6 +1,6 @@
 <?php
 
-namespace Tests\Feature;
+namespace Tests\Feature\Auth;
 
 use App\Providers\RouteServiceProvider;
 use Illuminate\Foundation\Testing\RefreshDatabase;
@@ -33,8 +33,8 @@ public function test_new_users_can_register()
             'first_name' => 'Test',
             'last_name' => 'User',
             'email' => 'test@example.com',
-            'password' => 'password',
-            'password_confirmation' => 'password',
+            'password' => 'Password$123',
+            'password_confirmation' => 'Password$123',
             'terms' => Jetstream::hasTermsAndPrivacyPolicyFeature(),
         ]);
 
diff --git a/tests/Feature/TwoFactorAuthenticationSettingsTest.php b/tests/Feature/Auth/TwoFactorAuthenticationSettingsTest.php
similarity index 75%
rename from tests/Feature/TwoFactorAuthenticationSettingsTest.php
rename to tests/Feature/Auth/TwoFactorAuthenticationSettingsTest.php
index 6a0eaf40551..a95d52b7658 100644
--- a/tests/Feature/TwoFactorAuthenticationSettingsTest.php
+++ b/tests/Feature/Auth/TwoFactorAuthenticationSettingsTest.php
@@ -1,10 +1,9 @@
 <?php
 
-namespace Tests\Feature;
+namespace Tests\Feature\Auth;
 
 use App\Models\User;
 use Illuminate\Foundation\Testing\RefreshDatabase;
-use Laravel\Fortify\Features;
 use Tests\TestCase;
 
 class TwoFactorAuthenticationSettingsTest extends TestCase
@@ -13,10 +12,6 @@ class TwoFactorAuthenticationSettingsTest extends TestCase
 
     public function test_two_factor_authentication_can_be_enabled()
     {
-        if (! Features::canManageTwoFactorAuthentication()) {
-            return $this->markTestSkipped('Two factor authentication is not enabled.');
-        }
-
         $this->actingAs($user = User::factory()->create());
 
         $this->withSession(['auth.password_confirmed_at' => time()]);
@@ -29,10 +24,6 @@ public function test_two_factor_authentication_can_be_enabled()
 
     public function test_recovery_codes_can_be_regenerated()
     {
-        if (! Features::canManageTwoFactorAuthentication()) {
-            return $this->markTestSkipped('Two factor authentication is not enabled.');
-        }
-
         $this->actingAs($user = User::factory()->create());
 
         $this->withSession(['auth.password_confirmed_at' => time()]);
@@ -50,10 +41,6 @@ public function test_recovery_codes_can_be_regenerated()
 
     public function test_two_factor_authentication_can_be_disabled()
     {
-        if (! Features::canManageTwoFactorAuthentication()) {
-            return $this->markTestSkipped('Two factor authentication is not enabled.');
-        }
-
         $this->actingAs($user = User::factory()->create());
 
         $this->withSession(['auth.password_confirmed_at' => time()]);
diff --git a/tests/Feature/UpdatePasswordTest.php b/tests/Feature/Auth/UpdatePasswordTest.php
similarity index 87%
rename from tests/Feature/UpdatePasswordTest.php
rename to tests/Feature/Auth/UpdatePasswordTest.php
index 6f4fb4e1c65..ff8b7138bcb 100644
--- a/tests/Feature/UpdatePasswordTest.php
+++ b/tests/Feature/Auth/UpdatePasswordTest.php
@@ -1,6 +1,6 @@
 <?php
 
-namespace Tests\Feature;
+namespace Tests\Feature\Auth;
 
 use App\Models\User;
 use Illuminate\Foundation\Testing\RefreshDatabase;
@@ -17,11 +17,11 @@ public function test_password_can_be_updated()
 
         $response = $this->put('/user/password', [
             'current_password' => 'password',
-            'password' => 'new-password',
-            'password_confirmation' => 'new-password',
+            'password' => 'Password$123',
+            'password_confirmation' => 'Password$123',
         ]);
 
-        $this->assertTrue(Hash::check('new-password', $user->fresh()->password));
+        $this->assertTrue(Hash::check('Password$123', $user->fresh()->password));
     }
 
     public function test_current_password_must_be_correct()
diff --git a/tests/Feature/Controllers/Auth/LoginControllerTest.php b/tests/Feature/Controllers/Auth/LoginControllerTest.php
new file mode 100644
index 00000000000..22699ec93d0
--- /dev/null
+++ b/tests/Feature/Controllers/Auth/LoginControllerTest.php
@@ -0,0 +1,61 @@
+<?php
+
+namespace Tests\Feature\Controllers\Auth;
+
+use App\Http\Middleware\HandleInertiaRequests;
+use App\Models\User;
+use Tests\TestCase;
+
+class LoginControllerTest extends TestCase
+{
+    /** @test */
+    public function it_get_login_page(): void
+    {
+        $response = $this->get('/login');
+
+        $response->assertOk();
+    }
+
+    /** @test */
+    public function it_get_login_without_webauthn(): void
+    {
+        $user = User::factory()->create();
+        $response = $this->get('/login', [
+            'Cookie' => "webauthn_remember={$user->id}",
+            'X-Inertia' => true,
+            'X-Inertia-Version' => (new HandleInertiaRequests)->version(request()) ?? '',
+        ]);
+
+        $response->assertStatus(200);
+        $response->assertSee('Login');
+        $this->assertArrayNotHasKey('publicKey', $response->json()['props']);
+    }
+
+    /** @test */
+    public function it_get_login_with_webauthn(): void
+    {
+        $user = User::factory()->create();
+        $key = $user->webauthnKeys()->create([
+            'name' => 'name',
+            'counter' => 0,
+            'credentialId' => \ParagonIE\ConstantTime\Base64UrlSafe::encode($user->id),
+            'type' => 'public-key',
+            'transports' => [],
+            'attestationType' => 'none',
+            'trustPath' => new \Webauthn\TrustPath\EmptyTrustPath,
+            'aaguid' => \Symfony\Component\Uid\Uuid::fromString('38195f59-0e5b-4ebf-be46-75664177eeee'),
+            'credentialPublicKey' => 'oWNrZXlldmFsdWU=',
+
+        ]);
+
+        $response = $this->withCookie('webauthn_remember', $user->id)
+            ->get('/login', [
+                'X-Inertia' => true,
+                'X-Inertia-Version' => (new HandleInertiaRequests)->version(request()) ?? '',
+            ]);
+
+        $response->assertStatus(200);
+        $response->assertSee('Login');
+        $this->assertArrayHasKey('publicKey', $response->json()['props']);
+    }
+}
diff --git a/tests/Feature/Controllers/Auth/SocialiteCallbackControllerTest.php b/tests/Feature/Controllers/Auth/SocialiteCallbackControllerTest.php
new file mode 100644
index 00000000000..8f37dd21522
--- /dev/null
+++ b/tests/Feature/Controllers/Auth/SocialiteCallbackControllerTest.php
@@ -0,0 +1,194 @@
+<?php
+
+namespace Tests\Feature\Controllers\Auth;
+
+use App\Http\Middleware\HandleInertiaRequests;
+use App\Models\User;
+use App\Models\UserToken;
+use Illuminate\Foundation\Testing\DatabaseTransactions;
+use Laravel\Socialite\Contracts\Factory as SocialiteFactory;
+use Laravel\Socialite\Facades\Socialite;
+use Laravel\Socialite\Two\GithubProvider;
+use Tests\Helpers\GuzzleMock;
+use Tests\TestCase;
+
+class SocialiteCallbackControllerTest extends TestCase
+{
+    use DatabaseTransactions;
+
+    private function mockSocialite($client = null): void
+    {
+        config(['auth.login_providers' => 'test']);
+
+        /** @var \Laravel\Socialite\SocialiteManager $socialite */
+        $socialite = app(SocialiteFactory::class);
+        $socialite->extend(
+            'test',
+            function () use ($client) {
+                $provider = new GithubProvider(app('request'), 'client_id', 'client_secret', 'redirect_url', []);
+                if ($client) {
+                    $provider->setHttpClient($client);
+                }
+
+                return $provider;
+            }
+        );
+    }
+
+    private function getMock(): GuzzleMock
+    {
+        return new GuzzleMock([
+            'https://github.com/login/oauth/access_token' => [
+                'access_token' => 'token',
+            ],
+            'https://api.github.com/user' => [
+                'id' => 12345,
+                'login' => 'customer',
+                'name' => 'Customer Legit',
+                'avatar_url' => '',
+            ],
+            'https://api.github.com/user/emails' => [[
+                'primary' => true,
+                'verified' => true,
+                'email' => 'customer@legit.com',
+            ]],
+        ]);
+    }
+
+    /** @test */
+    public function it_get_redirect_url(): void
+    {
+        $this->mockSocialite();
+        Socialite::driver('test')->stateless();
+
+        $response = $this->get('/auth/test');
+
+        $response->assertStatus(302);
+        $response->assertRedirect('https://github.com/login/oauth/authorize?client_id=client_id&redirect_uri=redirect_url&scope=user%3Aemail&response_type=code');
+    }
+
+    /** @test */
+    public function it_get_redirect_url_inertia(): void
+    {
+        $this->mockSocialite();
+        Socialite::driver('test')->stateless();
+
+        $response = $this->get('/auth/test', [
+            'X-Inertia' => true,
+            'X-Inertia-Version' => (new HandleInertiaRequests)->version(request()) ?? '',
+        ]);
+
+        $response->assertStatus(409);
+        $response->assertHeader('X-Inertia-Location', 'https://github.com/login/oauth/authorize?client_id=client_id&redirect_uri=redirect_url&scope=user%3Aemail&response_type=code');
+    }
+
+    /** @test */
+    public function it_get_user_created(): void
+    {
+        $mock = $this->getMock();
+        $this->mockSocialite($mock->getClient());
+
+        session()->put('state', 'state');
+
+        $response = $this->get('/auth/test/callback?code=thecode&state=state');
+        $response->assertStatus(302);
+        $response->assertRedirect(config('app.url').'/vaults');
+
+        $mock->assertResponses();
+
+        $this->assertDatabaseHas('users', [
+            'email' => 'customer@legit.com',
+        ]);
+        $user = User::where('email', 'customer@legit.com')->first();
+        $this->assertDatabaseHas('user_tokens', [
+            'driver_id' => 12345,
+            'driver' => 'test',
+            'user_id' => $user->id,
+            'email' => 'customer@legit.com',
+            'format' => 'oauth2',
+            'token' => 'token',
+        ]);
+    }
+
+    /** @test */
+    public function it_associate_token_to_logged_user(): void
+    {
+        $mock = $this->getMock();
+        $this->mockSocialite($mock->getClient());
+
+        $user = User::factory()->create(['email' => 'customer@legit.com']);
+        $this->actingAs($user);
+
+        session()->put('state', 'state');
+
+        $response = $this->get('/auth/test/callback?code=thecode&state=state');
+        $response->assertStatus(302);
+        $response->assertRedirect(config('app.url').'/vaults');
+
+        $mock->assertResponses();
+
+        $this->assertDatabaseHas('user_tokens', [
+            'driver_id' => 12345,
+            'driver' => 'test',
+            'user_id' => $user->id,
+            'email' => 'customer@legit.com',
+            'format' => 'oauth2',
+            'token' => 'token',
+        ]);
+    }
+
+    /** @test */
+    public function it_wont_associate_token_if_user_already_exist(): void
+    {
+        $mock = $this->getMock();
+        $this->mockSocialite($mock->getClient());
+
+        $user = User::factory()->create(['email' => 'customer@legit.com']);
+
+        session()->put('state', 'state');
+
+        $response = $this->get('/auth/test/callback?code=thecode&state=state');
+
+        $mock->assertResponses();
+
+        $response->assertStatus(302);
+        $response->assertRedirect(config('app.url'));
+
+        $this->assertDatabaseMissing('user_tokens', [
+            'user_id' => $user->id,
+        ]);
+    }
+
+    /** @test */
+    public function it_wont_associate_token_if_another_user_already_connected(): void
+    {
+        $mock = $this->getMock();
+        $this->mockSocialite($mock->getClient());
+
+        $user1 = User::factory()->create();
+        UserToken::factory()->create([
+            'driver_id' => 12345,
+            'driver' => 'test',
+            'user_id' => $user1->id,
+            'email' => 'customer@legit.com',
+            'format' => 'oauth2',
+            'token' => 'token',
+        ]);
+
+        $user = User::factory()->create();
+        $this->actingAs($user);
+
+        session()->put('state', 'state');
+
+        $response = $this->get('/auth/test/callback?code=thecode&state=state');
+
+        $mock->assertResponses();
+
+        $response->assertStatus(302);
+        $response->assertRedirect(config('app.url'));
+
+        $this->assertDatabaseMissing('user_tokens', [
+            'user_id' => $user->id,
+        ]);
+    }
+}
diff --git a/tests/Feature/Controllers/Profile/UserTokenControllerTest.php b/tests/Feature/Controllers/Profile/UserTokenControllerTest.php
new file mode 100644
index 00000000000..c315d06e8d1
--- /dev/null
+++ b/tests/Feature/Controllers/Profile/UserTokenControllerTest.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace Tests\Feature\Controllers\Profile;
+
+use App\Models\User;
+use App\Models\UserToken;
+use Tests\TestCase;
+
+class UserTokenControllerTest extends TestCase
+{
+    /** @test */
+    public function it_deletes_token(): void
+    {
+        $user = User::factory()->create();
+        $userToken = UserToken::factory([
+            'user_id' => $user->id,
+        ])->create();
+
+        $this->actingAs($user)->delete('/auth/github');
+
+        $this->assertNull($userToken->fresh());
+    }
+}
diff --git a/tests/Helpers/GuzzleMock.php b/tests/Helpers/GuzzleMock.php
new file mode 100644
index 00000000000..4024388342e
--- /dev/null
+++ b/tests/Helpers/GuzzleMock.php
@@ -0,0 +1,57 @@
+<?php
+
+namespace Tests\Helpers;
+
+use GuzzleHttp\Client;
+use GuzzleHttp\Handler\MockHandler;
+use GuzzleHttp\Middleware;
+use GuzzleHttp\Psr7\Response;
+use PHPUnit\Framework\Assert;
+
+class GuzzleMock extends Assert
+{
+    private array $container = [];
+
+    private array $responses = [];
+
+    private Client $client;
+
+    public function __construct($responses)
+    {
+        $this->responses = $responses;
+
+        $history = Middleware::history($this->container);
+        $stack = MockHandler::createWithMiddleware(array_map(function ($item) {
+            if (is_array($item)) {
+                return new Response(200, [], json_encode($item));
+            }
+
+            return $item;
+        }, $responses));
+        $stack->push($history);
+
+        $this->client = new Client(['handler' => $stack]);
+    }
+
+    /**
+     * Get current client.
+     *
+     * @return Client
+     */
+    public function getClient(): Client
+    {
+        return $this->client;
+    }
+
+    public function assertResponses(): void
+    {
+        $nb = count($this->container);
+
+        $this->assertCount($nb, $this->responses);
+        $responses = array_keys($this->responses);
+
+        for ($i = 0; $i < $nb; $i++) {
+            $this->assertEquals($responses[$i], (string) $this->container[$i]['request']->getUri());
+        }
+    }
+}
diff --git a/tests/Unit/Actions/AttemptToAuthenticateWebauthnTest.php b/tests/Unit/Actions/AttemptToAuthenticateWebauthnTest.php
new file mode 100644
index 00000000000..1511ec48b89
--- /dev/null
+++ b/tests/Unit/Actions/AttemptToAuthenticateWebauthnTest.php
@@ -0,0 +1,58 @@
+<?php
+
+namespace Tests\Unit\Actions;
+
+use App\Actions\AttemptToAuthenticateWebauthn;
+use App\Models\User;
+use Illuminate\Http\Request;
+use Illuminate\Validation\ValidationException;
+use LaravelWebauthn\Facades\Webauthn;
+use Tests\TestCase;
+
+class AttemptToAuthenticateWebauthnTest extends TestCase
+{
+    /**
+     * @test
+     */
+    public function it_get_user_request()
+    {
+        $user = User::factory()->create();
+        $request = $this->app->make(Request::class)
+            ->setUserResolver(fn () => $user);
+
+        Webauthn::shouldReceive('validateAssertion')->andReturn(true);
+
+        $result = app(AttemptToAuthenticateWebauthn::class)->handle($request, fn () => 1);
+
+        $this->assertEquals(1, $result);
+    }
+
+    /**
+     * @test
+     */
+    public function it_throw_failed_login_exception()
+    {
+        $request = $this->app->make(Request::class);
+
+        Webauthn::shouldReceive('validateAssertion')->andReturn(false);
+
+        $this->expectException(ValidationException::class);
+
+        app(AttemptToAuthenticateWebauthn::class)->handle($request, fn () => 1);
+    }
+
+    /**
+     * @test
+     */
+    public function it_fails_with_request()
+    {
+        $user = User::factory()->create();
+        $request = $this->app->make(Request::class)
+            ->setUserResolver(fn () => $user);
+
+        Webauthn::shouldReceive('validateAssertion')->andReturn(false);
+
+        $this->expectException(ValidationException::class);
+        app(AttemptToAuthenticateWebauthn::class)->handle($request, fn () => 1);
+    }
+}
diff --git a/tests/Unit/Actions/Jetstream/UserProfileTest.php b/tests/Unit/Actions/Jetstream/UserProfileTest.php
new file mode 100644
index 00000000000..b7ccd7949c7
--- /dev/null
+++ b/tests/Unit/Actions/Jetstream/UserProfileTest.php
@@ -0,0 +1,71 @@
+<?php
+
+namespace Tests\Unit\Actions\Jetstream;
+
+use App\Actions\Jetstream\UserProfile;
+use App\Models\User;
+use Carbon\Carbon;
+use Illuminate\Http\Request;
+use Tests\TestCase;
+
+class UserProfileTest extends TestCase
+{
+    /**
+     * @test
+     */
+    public function it_gets_user_profile()
+    {
+        config(['auth.login_providers' => collect(['provider'])]);
+
+        $user = User::factory()->create();
+        $this->actingAs($user);
+
+        $request = $this->app->make(Request::class)
+            ->setUserResolver(fn () => $user);
+
+        $data = app(UserProfile::class)($request, []);
+
+        $this->assertArrayHasKey('providers', $data);
+        $this->assertEquals(['provider'], $data['providers']->toArray());
+    }
+
+    /**
+     * @test
+     */
+    public function it_gets_user_webauthnkeys()
+    {
+        Carbon::setTestNow(Carbon::create(2020, 1, 1, 0, 0, 0));
+
+        $user = User::factory()->create();
+        $this->actingAs($user);
+
+        $key = $user->webauthnKeys()->create([
+            'name' => 'name',
+            'type' => 'type',
+            'credentialId' => '0',
+            'transports' => '',
+            'attestationType' => '',
+            'trustPath' => '',
+            'aaguid' => '',
+            'credentialPublicKey' => '',
+            'counter' => 0,
+        ]);
+
+        $request = $this->app->make(Request::class)
+            ->setUserResolver(fn () => $user);
+
+        Carbon::setTestNow(Carbon::create(2020, 1, 2, 0, 0, 0));
+
+        $data = app(UserProfile::class)($request, []);
+
+        $this->assertArrayHasKey('webauthnKeys', $data);
+        $this->assertEquals([
+            [
+                'id' => $key->id,
+                'name' => 'name',
+                'type' => 'type',
+                'last_active' => '1 day ago',
+            ],
+        ], $data['webauthnKeys']);
+    }
+}