diff --git a/resources/assets/js/pages-auth.js b/resources/assets/js/pages-auth.js
index 2b374fe..5765f35 100644
--- a/resources/assets/js/pages-auth.js
+++ b/resources/assets/js/pages-auth.js
@@ -38,8 +38,8 @@ document.addEventListener('DOMContentLoaded', function (e) {
                                 message: 'Please enter email / username'
                             },
                             stringLength: {
-                                min: 6,
-                                message: 'Username must be more than 6 characters'
+                                min: 4,
+                                message: 'Username must be more than 4 characters'
                             }
                         }
                     },
diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
index dcea515..b44b0b3 100644
--- a/resources/views/auth/login.blade.php
+++ b/resources/views/auth/login.blade.php
@@ -1,5 +1,4 @@
 @php
-    use Illuminate\Support\Facades\Route;
     $configData = App\Services\ThemeHelper::appClasses();
     $customizerHidden = 'customizer-hide';
 @endphp
@@ -8,132 +7,106 @@
 
 @section('title', 'Login')
 
+@section('vendor-style')
+    @vite([
+      'resources/assets/vendor/libs/@form-validation/form-validation.scss'
+    ])
+@endsection
+
 @section('page-style')
-    {{-- Page Css files --}}
-    @vite('resources/assets/vendor/scss/pages/page-auth.scss')
+    @vite([
+      'resources/assets/vendor/scss/pages/page-auth.scss'
+    ])
+@endsection
+
+@section('vendor-script')
+    @vite([
+      'resources/assets/vendor/libs/@form-validation/popular.js',
+      'resources/assets/vendor/libs/@form-validation/bootstrap5.js',
+      'resources/assets/vendor/libs/@form-validation/auto-focus.js'
+    ])
+@endsection
+
+@section('page-script')
+    @vite([
+      'resources/assets/js/pages-auth.js'
+    ])
 @endsection
 
 @section('content')
-    <div class="authentication-wrapper authentication-cover">
-        <!-- Logo -->
-        <a href="{{ url('/') }}" class="auth-cover-brand d-flex align-items-center gap-2">
-            <span
-                class="app-brand-logo demo">@include('_partials.macros',["width"=>25,"withbg"=>'var(--bs-primary)'])</span>
-            <span class="app-brand-text demo text-heading fw-semibold">{{ config('variables.templateName') }}</span>
-        </a>
-        <!-- /Logo -->
-        <div class="authentication-inner row m-0">
-            <!-- /Left Section -->
-            <div class="d-none d-lg-flex col-lg-7 col-xl-8 align-items-center justify-content-center p-12 pb-2">
-                <img src="{{ asset('assets/img/illustrations/auth-login-illustration-'.$configData['style'].'.png') }}"
-                     class="auth-cover-illustration w-100" alt="auth-illustration"
-                     data-app-light-img="illustrations/auth-login-illustration-light.png"
-                     data-app-dark-img="illustrations/auth-login-illustration-dark.png"/>
-                <img src="{{ asset('assets/img/illustrations/auth-cover-login-mask-'.$configData['style'].'.png') }}"
-                     class="authentication-image" alt="mask"
-                     data-app-light-img="illustrations/auth-cover-login-mask-light.png"
-                     data-app-dark-img="illustrations/auth-cover-login-mask-dark.png"/>
-            </div>
-            <!-- /Left Section -->
+    <div class="position-relative">
+        <div class="authentication-wrapper authentication-basic container-p-y p-4 p-sm-0">
+            <div class="authentication-inner py-6">
 
-            <!-- Login -->
-            <div
-                class="d-flex col-12 col-lg-5 col-xl-4 align-items-center authentication-bg position-relative py-sm-12 px-12 py-6">
-                <div class="w-px-400 mx-auto pt-5 pt-lg-0">
-                    <h4 class="mb-1">Welcome to {{ config('variables.templateName') }}! 👋</h4>
-                    <p class="mb-5">Please sign-in to your account and start the adventure</p>
+                <!-- Login -->
+                <div class="card p-md-7 p-1">
+                    <!-- Logo -->
+                    <div class="app-brand justify-content-center mt-5">
+                        <a href="{{url('/')}}" class="app-brand-link gap-2">
+                            <span class="app-brand-logo demo">@include('_partials.macros',["width"=>25,"withbg"=>'var(--bs-primary)'])</span>
+                            <span class="app-brand-text demo text-heading fw-semibold">{{config('variables.templateName')}}</span>
+                        </a>
+                    </div>
+                    <!-- /Logo -->
 
-                    @if (session('status'))
-                        <div class="alert alert-success mb-3" role="alert">
-                            <div class="alert-body">
-                                {{ session('status') }}
+                    <div class="card-body mt-1">
+                        <h4 class="mb-2">Welcome to {{config('variables.templateName')}}! 👋</h4>
+                        <p class="mb-8">Please sign-in to your account and start the adventure</p>
+
+                        <form id="formAuthentication" class="mb-5" action="{{ route('login.store') }}" method="POST">
+                            @csrf
+                            <div class="form-floating form-floating-outline mb-5">
+                                <input type="text" class="form-control" id="username" name="username" placeholder="Enter your username" autofocus>
+                                <label for="username">Username</label>
                             </div>
-                        </div>
-                    @endif
-                    <form id="formAuthentication" class="mb-5" action="{{ route('login') }}" method="POST">
-                        @csrf
-                        <div class="form-floating form-floating-outline mb-5">
-                            <input type="text" class="form-control @error('username') is-invalid @enderror"
-                                   id="login-username" name="username" autofocus
-                                   value="{{ old('username') }}">
-                            <label for="login-username">Username</label>
-                            @error('username')
-                            <span class="invalid-feedback" role="alert">
-                                <span class="fw-medium">{{ $message }}</span>
-                            </span>
-                            @enderror
-                        </div>
-                        <div class="mb-5">
-                            <div class="form-password-toggle">
-                                <div class="input-group input-group-merge @error('password') is-invalid @enderror">
-                                    <div class="form-floating form-floating-outline">
-                                        <input type="password" id="login-password"
-                                               class="form-control @error('password') is-invalid @enderror"
-                                               name="password"
-                                               placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
-                                               aria-describedby="password"/>
-                                        <label for="login-password">Password</label>
+                            <div class="mb-5">
+                                <div class="form-password-toggle">
+                                    <div class="input-group input-group-merge">
+                                        <div class="form-floating form-floating-outline">
+                                            <input type="password" id="password" class="form-control" name="password" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" aria-describedby="password" />
+                                            <label for="password">Password</label>
+                                        </div>
+                                        <span class="input-group-text cursor-pointer"><i class="ri-eye-off-line"></i></span>
                                     </div>
-                                    <span class="input-group-text cursor-pointer"><i class="ri-eye-off-line"></i></span>
                                 </div>
-                                @error('password')
-                                <span class="invalid-feedback" role="alert">
-                                  <span class="fw-medium">{{ $message }}</span>
-                                </span>
-                                @enderror
                             </div>
-                        </div>
-                        <div class="mb-5 d-flex justify-content-between mt-5">
-                            <div class="form-check mt-2">
-                                <input class="form-check-input" type="checkbox" id="remember-me">
-                                <label class="form-check-label" for="remember-me">
-                                    Remember Me
-                                </label>
-                            </div>
-                            @if (Route::has('password.request'))
-                                <a href="{{ route('password.request') }}" class="float-end mb-1 mt-2">
+                            <div class="mb-5 d-flex justify-content-between mt-5">
+                                <div class="form-check mt-2">
+                                    <input class="form-check-input" type="checkbox" id="remember-me">
+                                    <label class="form-check-label" for="remember-me">
+                                        Remember Me
+                                    </label>
+                                </div>
+                                <a href="{{url('auth/forgot-password-basic')}}" class="float-end mb-1 mt-2">
                                     <span>Forgot Password?</span>
                                 </a>
-                            @endif
+                            </div>
+                            <div class="mb-5">
+                                <button class="btn btn-primary d-grid w-100" type="submit">Sign in</button>
+                            </div>
+                        </form>
+
+                        <div class="divider my-5">
+                            <div class="divider-text">or</div>
                         </div>
-                        <button class="btn btn-primary d-grid w-100">
-                            Sign in
-                        </button>
-                    </form>
 
-                    <p class="text-center">
-                        <span>New on our platform?</span>
-                        @if (Route::has('register'))
-                            <a href="{{ route('register') }}">
-                                <span>Create an account</span>
+                        <div class="d-flex justify-content-center gap-2">
+                            <a href="javascript:;" class="btn btn-icon rounded-circle btn-text-facebook">
+                                <i class="tf-icons ri-facebook-fill"></i>
                             </a>
-                        @endif
-                    </p>
 
-                    <div class="divider my-5">
-                        <div class="divider-text">or</div>
-                    </div>
+                            <a href="javascript:;" class="btn btn-icon rounded-circle btn-text-twitter">
+                                <i class="tf-icons ri-twitter-fill"></i>
+                            </a>
 
-                    <div class="d-flex justify-content-center gap-2">
-                        <a href="javascript:;" class="btn btn-icon rounded-circle btn-text-facebook">
-                            <i class="tf-icons ri-facebook-fill"></i>
-                        </a>
-
-                        <a href="javascript:;" class="btn btn-icon rounded-circle btn-text-twitter">
-                            <i class="tf-icons ri-twitter-fill"></i>
-                        </a>
-
-                        <a href="javascript:;" class="btn btn-icon rounded-circle btn-text-github">
-                            <i class="tf-icons ri-github-fill"></i>
-                        </a>
-
-                        <a href="javascript:;" class="btn btn-icon rounded-circle btn-text-google-plus">
-                            <i class="tf-icons ri-google-fill"></i>
-                        </a>
+                            <a href="javascript:;" class="btn btn-icon rounded-circle btn-text-google-plus">
+                                <i class="tf-icons ri-google-fill"></i>
+                            </a>
+                        </div>
                     </div>
                 </div>
+                <!-- /Login -->
             </div>
-            <!-- /Login -->
         </div>
     </div>
 @endsection