diff --git a/resources/assets/v3/js/pages/auth/auth.js b/resources/assets/v3/js/pages/auth/auth.js
new file mode 100644
index 0000000000..b52fae3398
--- /dev/null
+++ b/resources/assets/v3/js/pages/auth/auth.js
@@ -0,0 +1,21 @@
+/*
+ * auth.js
+ * Copyright (c) 2026 james@firefly-iii.org
+ *
+ * This file is part of Firefly III (https://github.com/firefly-iii).
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import '../../boot/bootstrap.js';
diff --git a/resources/assets/v3/vite.config.js b/resources/assets/v3/vite.config.js
index d549e78244..071e166137 100644
--- a/resources/assets/v3/vite.config.js
+++ b/resources/assets/v3/vite.config.js
@@ -40,6 +40,9 @@ export default defineConfig(({command, mode, isSsrBuild, isPreview}) => {
                     // CSS for entire app
                     'sass/app.scss',
 
+                    // auth pages (login etc)
+                    'js/pages/auth/auth.js',
+
                     // dashboard
                     'js/pages/dashboard/boxes.js',
                     'js/pages/dashboard/dashboard.js',
diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
index 31dccb88a4..8d09b4c647 100644
--- a/resources/views/auth/login.blade.php
+++ b/resources/views/auth/login.blade.php
@@ -4,7 +4,7 @@
     @if(true===$IS_DEMO_SITE)
     <div class="card mb-3">
         <div class="card-body">
-            <p class="">
+            <p>
                 Welcome to the Firefly III demo!<br/>
                 <br/>
                 To log in, please use email address <strong>{{ $DEMO_USERNAME }}</strong> with password
@@ -49,18 +49,18 @@
                 <input type="hidden" name="_token" value="{{ csrf_token() }}"/>
                 @if(config('firefly.authentication_guard') === 'web')
                 <div class="input-group mb-3"> <input type="email" name="email" autofocus required class="form-control" placeholder="{{ trans('form.email') }}" value="@if(true===$IS_DEMO_SITE){{ $DEMO_USERNAME }}@else{{ $email }}@endif">
-                    <div class="input-group-text"> <em class="fa-solid fa-envelope"></em> </div>
+                    <div class="input-group-text"> <em class="bi bi-envelope"></em> </div>
                 </div>
                 @else
                 <div class="input-group mb-3"> <input type="text" autocomplete="username" autofocus required name="{{ $usernameField }}" class="form-control" placeholder="{{ trans('form.login_name') }}" value="{{ $email }}">
-                    <div class="input-group-text"> <em class="fa-solid fa-user"></em> </div>
+                    <div class="input-group-text"> <em class="bi bi-person"></em> </div>
                 </div>
                 @endif
                 <div class="input-group mb-3">
                     <input type="password" id="password" name="password" class="form-control" placeholder="{{ trans('form.password') }}" @if(true===$IS_DEMO_SITE)value="{{ $DEMO_PASSWORD }}"@endif autocomplete="current-password">
                     <div class="input-group-text">
-                        <em class="fa-solid fa-lock"></em>
-                        <i class="fa-solid fa-eye-slash fa-eye" id="togglePassword"></i>
+                        <em class="bi bi-lock"></em>
+                        <em class="bi bi-eye-slash" id="togglePassword"></em>
                     </div>
                 </div> <!--begin::Row-->
                 <div class="row">
@@ -91,12 +91,12 @@
     togglePassword.addEventListener('click', () => {
         const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
         if('text' === type) {
-            togglePassword.classList.add('fa-eye');
-            togglePassword.classList.remove('fa-eye-slash');
+            togglePassword.classList.add('bi-eye');
+            togglePassword.classList.remove('bi-eye-slash');
         }
         if('password' === type) {
-            togglePassword.classList.add('fa-eye-slash');
-            togglePassword.classList.remove('fa-eye');
+            togglePassword.classList.add('bi-eye-slash');
+            togglePassword.classList.remove('bi-eye');
         }
         password.setAttribute('type', type);
     });
diff --git a/resources/views/auth/oauth/authorize.blade.php b/resources/views/auth/oauth/authorize.blade.php
index ca86a9b76a..1e2e27cfce 100644
--- a/resources/views/auth/oauth/authorize.blade.php
+++ b/resources/views/auth/oauth/authorize.blade.php
@@ -1,79 +1,50 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+@extends('layout.v3.auth')
+@section('content')
+    <div class="card card-default">
+        <div class="card-header">
+            Authorization Request
+        </div>
+        <div class="card-body">
+            <p>
+                Application <strong>"{{ $client->name }}"</strong> is requesting permission to access your account and financial data.
+            </p>
+            <p>
+                Access to the API is not scoped. All data will be accessible. Please proceed with caution and only authorize applications you trust.
+            </p>
+            @if('' !== $client->redirect_uris[0] ?? '')
+            <p>
+                You will be redirected to <code>{{ $client->redirect_uris[0] }}</code> after you authorize or cancel this request.
+            </p>
+            @endif
 
-    <title>Firefly III - Authorization</title>
+            <!-- Scope List -->
+            @if (count($scopes) > 0)
+                <div class="scopes">
+                    <p><strong>This application will be able to:</strong></p>
 
-    <!-- Styles -->
-    <link href="/v1/lib/bs/css/bootstrap.min.css?v=x" rel="stylesheet" type="text/css" nonce="y">
-    <link href="/v1/lib/fa/css/font-awesome.min.css?v=x" rel="stylesheet" type="text/css" nonce="y">
-
-    <style>
-        .passport-authorize .container {
-            margin-top: 30px;
-        }
-
-        .passport-authorize .scopes {
-            margin-top: 20px;
-        }
-
-        .passport-authorize .buttons {
-            margin-top: 25px;
-            text-align: center;
-        }
-
-        .passport-authorize .btn {
-            width: 125px;
-        }
-
-        .passport-authorize .btn-approve {
-            margin-right: 15px;
-        }
-
-        .passport-authorize form {
-            display: inline;
-        }
-    </style>
-</head>
-<body class="passport-authorize">
-<div class="container">
-    <div class="row justify-content-center">
-        <div class="col-md-6">
-            <div class="card card-default">
-                <div class="card-header">
-                    Authorization Request
+                    <ul>
+                        @foreach ($scopes as $scope)
+                            <li>{{ $scope->description }}</li>
+                        @endforeach
+                    </ul>
                 </div>
-                <div class="card-body">
-                    <!-- Introduction -->
-                    <p><strong>{{ $client->name }}</strong> is requesting permission to access your account.</p>
+            @endif
 
-                    <!-- Scope List -->
-                    @if (count($scopes) > 0)
-                        <div class="scopes">
-                            <p><strong>This application will be able to:</strong></p>
-
-                            <ul>
-                                @foreach ($scopes as $scope)
-                                    <li>{{ $scope->description }}</li>
-                                @endforeach
-                            </ul>
-                        </div>
-                    @endif
-
-                    <div class="buttons">
+            <div class="buttons">
+                <div class="row">
+                    <div class="col">
                         <!-- Authorize Button -->
-                        <form method="post" action="{{ route('passport.authorizations.approve') }}">
+                        <form method="post" class="form-inline" action="{{ route('passport.authorizations.approve') }}">
                             @csrf
-
                             <input type="hidden" name="state" value="{{ $request->state }}">
                             <input type="hidden" name="client_id" value="{{ $client->getKey() }}">
                             <input type="hidden" name="auth_token" value="{{ $authToken }}">
-                            <button type="submit" class="btn btn-success btn-approve">Authorize</button>
+                            <div class="d-grid gap-2">
+                                <button type="submit" class="btn btn-success btn-block btn-approve">Authorize</button>
+                            </div>
                         </form>
-
+                    </div>
+                    <div class="col">
                         <!-- Cancel Button -->
                         <form method="post" action="{{ route('passport.authorizations.deny') }}">
                             @csrf
@@ -82,13 +53,15 @@
                             <input type="hidden" name="state" value="{{ $request->state }}">
                             <input type="hidden" name="client_id" value="{{ $client->getKey() }}">
                             <input type="hidden" name="auth_token" value="{{ $authToken }}">
+                            <div class="d-grid gap-2">
                             <button class="btn btn-danger">Cancel</button>
+                            </div>
                         </form>
+
                     </div>
                 </div>
             </div>
         </div>
     </div>
-</div>
-</body>
-</html>
+
+@endsection
diff --git a/resources/views/auth/passwords/email.blade.php b/resources/views/auth/passwords/email.blade.php
index 601b7a3ad8..4db388f96f 100644
--- a/resources/views/auth/passwords/email.blade.php
+++ b/resources/views/auth/passwords/email.blade.php
@@ -1,4 +1,4 @@
-@extends('layout.v2.session')
+@extends('layout.v3.auth')
 @section('content')
 
     {{-- SUCCESS MESSAGE (ALWAYS SINGULAR) --}}
@@ -35,7 +35,7 @@
                 <div class="input-group mb-3">
                     <input type="email" autofocus required class="form-control" name="email"
                            placeholder="{{ trans('form.email') }}"/>
-                    <div class="input-group-text"> <em class="fa-solid fa-envelope"></em> </div>
+                    <div class="input-group-text"> <em class="bi bi-envelope"></em> </div>
                 </div>
                 <div class="row">
                     <div class="col-12">
diff --git a/resources/views/auth/passwords/reset.blade.php b/resources/views/auth/passwords/reset.blade.php
index a90693ed6c..2b80fe8453 100644
--- a/resources/views/auth/passwords/reset.blade.php
+++ b/resources/views/auth/passwords/reset.blade.php
@@ -1,4 +1,4 @@
-@extends('layout.v2.session')
+@extends('layout.v3.auth')
 @section('content')
 
     @if($errors->any())
@@ -30,17 +30,17 @@
                 <div class="input-group mb-3">
                     <input type="email" name="email" required autofocus class="form-control" value="{{ old('email') }}"
                            placeholder="{{ trans('form.email') }}"/>
-                    <div class="input-group-text"> <em class="fa-solid fa-envelope"></em> </div>
+                    <div class="input-group-text"> <em class="bi bi-envelope"></em> </div>
                 </div>
                 <div class="input-group mb-3">
                     <input type="password" class="form-control" required placeholder="{{ trans('form.password') }}"
                            name="password"/>
-                    <div class="input-group-text"> <em class="fa-solid fa-lock"></em> </div>
+                    <div class="input-group-text"> <em class="bi bi-lock"></em> </div>
                 </div>
                 <div class="input-group mb-3">
                     <input type="password" class="form-control" required placeholder="{{ trans('form.password_confirmation') }}"
                            name="password_confirmation"/>
-                    <div class="input-group-text"> <em class="fa-solid fa-lock"></em> </div>
+                    <div class="input-group-text"> <em class="bi bi-lock"></em> </div>
                 </div>
                 <div class="row">
                     <div class="col-12">
@@ -50,7 +50,7 @@
                             <a href="#"
                                data-bs-toggle="modal" data-bs-target="#passwordModal"
                             ><span
-                                    class="fa fa-fw fa-question-circle"></span></a>
+                                    class="bi bi-question-circle"></span></a>
                         </label>
                     </div>
                 </div>
diff --git a/resources/views/auth/register.blade.php b/resources/views/auth/register.blade.php
index be0cb4224d..43690d5980 100644
--- a/resources/views/auth/register.blade.php
+++ b/resources/views/auth/register.blade.php
@@ -1,4 +1,4 @@
-@extends('layout.v2.session')
+@extends('layout.v3.auth')
 @section('content')
 
 
@@ -35,17 +35,17 @@
                 <div class="input-group mb-3">
                     <input type="email" name="email" autofocus required value="{{ $email }}" class="form-control"
                            placeholder="{{ trans('form.email') }}"/>
-                    <div class="input-group-text"> <em class="fa-solid fa-envelope"></em> </div>
+                    <div class="input-group-text"> <em class="bi bi-envelope"></em> </div>
                 </div>
                 <div class="input-group mb-3">
                     <input type="password" autocomplete="new-password" required class="form-control"
                            placeholder="{{ trans('form.password') }}" minlength="16" name="password"/>
-                    <div class="input-group-text"> <em class="fa-solid fa-lock"></em> </div>
+                    <div class="input-group-text"> <em class="bi bi-lock"></em> </div>
                 </div>
                 <div class="input-group mb-3">
                     <input type="password" autocomplete="new-password" minlength="16" required class="form-control"
                            placeholder="{{ trans('form.password_confirmation') }}" name="password_confirmation"/>
-                    <div class="input-group-text"> <em class="fa-solid fa-lock"></em> </div>
+                    <div class="input-group-text"> <em class="bi bi-lock"></em> </div>
                 </div>
                 <div class="row">
                     <div class="col-12">
@@ -55,7 +55,7 @@
                                 <a href="#"
                                     data-bs-toggle="modal" data-bs-target="#passwordModal"
                                 ><span
-                                        class="fa fa-fw fa-question-circle"></span></a>
+                                        class="bi bi-question-circle"></span></a>
                             </label>
                     </div>
                 </div>
diff --git a/resources/views/errors/404.blade.php b/resources/views/errors/404.blade.php
index 43a559888f..6bbda60cfb 100644
--- a/resources/views/errors/404.blade.php
+++ b/resources/views/errors/404.blade.php
@@ -1,4 +1,4 @@
-@extends('layout.v2.error')
+@extends('layout.v3.blank')
 @section('status_code','404')
 @section('status','Not Found')
 @section('sub_title', trans('errors.404_header'))
@@ -21,8 +21,4 @@
         </p>
     </div>
 </div>
-
-
-</body>
-</html>
 @endsection
diff --git a/resources/views/errors/500.blade.php b/resources/views/errors/500.blade.php
index f47617549f..00c8f9e998 100644
--- a/resources/views/errors/500.blade.php
+++ b/resources/views/errors/500.blade.php
@@ -1,4 +1,4 @@
-@extends('layout.v2.error')
+@extends('layout.v3.blank')
 @section('status_code','500')
 @section('status','Internal Server Error')
 @section('sub_title', trans('errors.error_occurred'))
diff --git a/resources/views/errors/503.blade.php b/resources/views/errors/503.blade.php
index 1b5333553a..642768fb14 100644
--- a/resources/views/errors/503.blade.php
+++ b/resources/views/errors/503.blade.php
@@ -1,4 +1,4 @@
-@extends('layout.v2.error')
+@extends('layout.v3.blank')
 @section('status_code','503')
 @section('status','Service Unavailable')
 @section('sub_title', trans('errors.maintenance_mode'))
@@ -13,9 +13,6 @@
         </p>
     </div>
 </div>
-</body>
-</html>
-
 
 @endsection
 
diff --git a/resources/views/errors/DatabaseException.blade.php b/resources/views/errors/DatabaseException.blade.php
index de6e334de2..60acc72bf7 100644
--- a/resources/views/errors/DatabaseException.blade.php
+++ b/resources/views/errors/DatabaseException.blade.php
@@ -1,4 +1,4 @@
-@extends('layout.v2.error')
+@extends('layout.v3.blank')
 @section('status_code','500')
 @section('status','Internal Server Error')
 @section('sub_title', trans('errors.db_error_occurred'))
diff --git a/resources/views/errors/FireflyException.blade.php b/resources/views/errors/FireflyException.blade.php
index 0ba68826ae..2328c00295 100644
--- a/resources/views/errors/FireflyException.blade.php
+++ b/resources/views/errors/FireflyException.blade.php
@@ -1,4 +1,4 @@
-@extends('layout.v2.error')
+@extends('layout.v3.blank')
 @section('status_code','500')
 @section('status','Internal Server Error')
 @section('sub_title', trans('errors.error_occurred'))
@@ -66,7 +66,7 @@
                 <h4>
                     {{ trans('errors.stacktrace') }}
                 </h4>
-                <div class="monospace">
+                <div class="font-monospace small">
                     {!!  nl2br($exception->getTraceAsString())  !!}
                 </div>
             </div>
diff --git a/resources/views/errors/error.blade.php b/resources/views/errors/error.blade.php
index 12a061bfce..bb3dad4c43 100644
--- a/resources/views/errors/error.blade.php
+++ b/resources/views/errors/error.blade.php
@@ -1,4 +1,4 @@
-@extends('layout.v2.error')
+@extends('layout.v3.blank')
 @section('status_code','')
 @section('status','Error message')
 @section('sub_title', trans('errors.error_occurred'))
diff --git a/resources/views/layout/v3/auth.blade.php b/resources/views/layout/v3/auth.blade.php
index 80ca01ce77..d982973635 100644
--- a/resources/views/layout/v3/auth.blade.php
+++ b/resources/views/layout/v3/auth.blade.php
@@ -14,53 +14,29 @@
     -->
     <base href="{{ route('index', null, true) }}/">
     <title>{{ __('firefly.login_page_title')  }}</title>
-
-    <!--begin::Theme Init (prevents flash of incorrect theme on load, #6043)-->
-    <!--end::Theme Init-->
-
-    <!--begin::Accessibility Meta Tags-->
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"/>
     <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)"/>
     <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)"/>
-    <!--end::Accessibility Meta Tags-->
-
-    <!--begin::Accessibility Features-->
-    <!-- Skip links will be dynamically added by accessibility.js -->
     <meta name="color-scheme" content="light dark">
-
+    @vite(['sass/app.scss'])
     <x-layout.fav-icons/>
-    <!--end::Accessibility Features-->
-
+    <script nonce="{{ $JS_NONCE }}">
+        (() => {
+            'use strict'
+            document.documentElement.setAttribute('data-bs-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'))
+        })()
+    </script>
 </head>
-<!--end::Head-->
-<!--begin::Body-->
 <body class="login-page bg-body-secondary">
 <div class="login-box">
-    <div class="card card-outline card-primary">
-        <div class="card-header">
-            <a
-                href="../index2.html"
-                class="link-dark text-center link-offset-2 link-opacity-100 link-opacity-50-hover"
-            >
-                <h1 class="mb-0"><b>Admin</b>LTE</h1>
-            </a>
-        </div>
-        <div class="card-body login-card-body">
-            <p class="login-box-msg">Sign in to start your sessionXXX</p>
-
-
-
-                @yield('content')
-
-
-            <!-- begin niuwe code  -->
-        </div>
-        <!-- /.login-box -->
+    <div class="login-logo">
+        <img src="images/logo-session.png" width="68" height="100" alt="Firefly III Logo" title="Firefly III"/><br>
+        <a href='https://demo.firefly-iii.org'><b>Firefly</b> III</a>
     </div>
+    @yield('content')
 </div>
-
+@vite(['js/pages/auth/auth.js'])
 @yield('scripts')
 
 </body>
-<!--end::Body-->
 </html>
diff --git a/resources/views/layout/v3/blank.blade.php b/resources/views/layout/v3/blank.blade.php
new file mode 100644
index 0000000000..2af6446d13
--- /dev/null
+++ b/resources/views/layout/v3/blank.blade.php
@@ -0,0 +1,48 @@
+<!doctype html>
+<html lang="{{ __('config.html_language') }}">
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="csrf-token" content="{{ csrf_token() }}">
+    <meta name="robots" content="noindex, nofollow, noarchive, noodp, NoImageIndex, noydir">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="mobile-web-app-capable" content="yes">
+    <!--
+    If the base href URL begins with "http://" but you are sure it should start with "https://",
+    please visit the following page: https://bit.ly/FF3-broken-base-href
+    -->
+    <base href="{{ route('index', null, true) }}/">
+    <title>{{ __('firefly.login_page_title')  }}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"/>
+    <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)"/>
+    <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)"/>
+    <meta name="color-scheme" content="light dark">
+    @vite(['sass/app.scss'])
+    <x-layout.fav-icons/>
+    <script nonce="{{ $JS_NONCE ?? '' }}">
+        (() => {
+            'use strict'
+            document.documentElement.setAttribute('data-bs-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'))
+        })()
+    </script>
+</head>
+<body class="bg-body-tertiary">
+<main class="align-items-center min-vh-100 py-5">
+    <div class="container">
+        <div class="row justify-content-center">
+            <div class="col-md-12 col-lg-8 col-xl-8">
+                <p class="text-center">
+                    <img src="images/logo-session.png" width="68" height="100" alt="Firefly III Logo" title="Firefly III"/><br>
+                </p>
+                <h1><strong>Firefly</strong> III - @yield('status_code') @yield('status') :(</h1>
+                <h2 class="text-danger">@yield('sub_title')</h2>
+                @yield('content')
+            </div>
+        </div>
+    </div>
+</main>
+@vite(['js/pages/auth/auth.js'])
+
+</body>
+</html>