diff --git a/forgot-password.html b/forgot-password.html
index 5f198c15f..49cf4f715 100644
--- a/forgot-password.html
+++ b/forgot-password.html
@@ -9,7 +9,7 @@
     <meta name="description" content="">
     <meta name="author" content="">
 
-    <title>SB Admin 2 - Forgot Password</title>
+    <title>SB Admin 2 - Login</title>
 
     <!-- Custom fonts for this template-->
     <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
@@ -20,6 +20,63 @@
     <!-- Custom styles for this template-->
     <link href="css/sb-admin-2.min.css" rel="stylesheet">
 
+    <!-- Custom Styles for UI/UX Enhancements -->
+    <style>
+        .form-control:focus {
+            border-color: #4e73df;
+            box-shadow: 0 0 5px rgba(78, 115, 223, 0.75);
+        }
+
+        .card {
+            border-radius: 10px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            transition: box-shadow 0.3s ease;
+        }
+
+        .card:hover {
+            box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
+        }
+
+        .btn-user {
+            transition: background-color 0.3s ease, transform 0.3s ease;
+        }
+
+        .btn-user:hover {
+            background-color: #3e8e41;
+            transform: scale(1.05);
+        }
+
+        .btn-google:hover {
+            background-color: #db4437;
+            transform: scale(1.05);
+        }
+
+        .btn-facebook:hover {
+            background-color: #3b5998;
+            transform: scale(1.05);
+        }
+
+        .bg-gradient-primary {
+            background: linear-gradient(90deg, rgba(233, 162, 44, 1) 0%, rgba(116, 70, 198, 1) 100%);
+        }
+
+        .text-gray-900 {
+            color: #3a3a3a;
+        }
+
+        .form-group {
+            margin-bottom: 1.5rem;
+        }
+
+        .p-5 {
+            padding: 3rem;
+        }
+
+        .container {
+            max-width: 1200px;
+        }
+    </style>
+
 </head>
 
 <body class="bg-gradient-primary">
@@ -35,30 +92,46 @@
                     <div class="card-body p-0">
                         <!-- Nested Row within Card Body -->
                         <div class="row">
-                            <div class="col-lg-6 d-none d-lg-block bg-password-image"></div>
+                            <div class="col-lg-6 d-none d-lg-block bg-login-image"></div>
                             <div class="col-lg-6">
                                 <div class="p-5">
                                     <div class="text-center">
-                                        <h1 class="h4 text-gray-900 mb-2">Forgot Your Password?</h1>
-                                        <p class="mb-4">We get it, stuff happens. Just enter your email address below
-                                            and we'll send you a link to reset your password!</p>
+                                        <h1 class="h4 text-gray-900 mb-4">Welcome Back!</h1>
                                     </div>
                                     <form class="user">
                                         <div class="form-group">
                                             <input type="email" class="form-control form-control-user"
                                                 id="exampleInputEmail" aria-describedby="emailHelp"
-                                                placeholder="Enter Email Address...">
+                                                placeholder="Enter Email Address..." required>
+                                        </div>
+                                        <div class="form-group">
+                                            <input type="password" class="form-control form-control-user"
+                                                id="exampleInputPassword" placeholder="Password" required>
+                                        </div>
+                                        <div class="form-group">
+                                            <div class="custom-control custom-checkbox small">
+                                                <input type="checkbox" class="custom-control-input" id="customCheck">
+                                                <label class="custom-control-label" for="customCheck">Remember
+                                                    Me</label>
+                                            </div>
                                         </div>
-                                        <a href="login.html" class="btn btn-primary btn-user btn-block">
-                                            Reset Password
+                                        <a href="index.html" class="btn btn-primary btn-user btn-block">
+                                            Login
+                                        </a>
+                                        <hr>
+                                        <a href="index.html" class="btn btn-google btn-user btn-block">
+                                            <i class="fab fa-google fa-fw"></i> Login with Google
+                                        </a>
+                                        <a href="index.html" class="btn btn-facebook btn-user btn-block">
+                                            <i class="fab fa-facebook-f fa-fw"></i> Login with Facebook
                                         </a>
                                     </form>
                                     <hr>
                                     <div class="text-center">
-                                        <a class="small" href="register.html">Create an Account!</a>
+                                        <a class="small" href="forgot-password.html">Forgot Password?</a>
                                     </div>
                                     <div class="text-center">
-                                        <a class="small" href="login.html">Already have an account? Login!</a>
+                                        <a class="small" href="register.html">Create an Account!</a>
                                     </div>
                                 </div>
                             </div>
@@ -84,4 +157,4 @@ <h1 class="h4 text-gray-900 mb-2">Forgot Your Password?</h1>
 
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/login.html b/login.html
index f4fa58e6c..c76037d60 100644
--- a/login.html
+++ b/login.html
@@ -2,11 +2,10 @@
 <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, shrink-to-fit=no">
-    <meta name="description" content="">
+    <meta name="description" content="SB Admin 2 - Login Portal">
     <meta name="author" content="">
 
     <title>SB Admin 2 - Login</title>
@@ -20,9 +19,57 @@
     <!-- Custom styles for this template-->
     <link href="css/sb-admin-2.min.css" rel="stylesheet">
 
+    <!-- Additional custom styles -->
+    <style>
+        .bg-gradient-custom {
+            background: linear-gradient(135deg, #4e73df 0%, #224abe 100%);
+        }
+        .card-custom {
+            border-radius: 1rem;
+        }
+        .remember-me-text {
+            color: #858796;
+        }
+        .login-heading {
+            font-weight: 700;
+        }
+        .social-btn {
+            transition: all 0.3s;
+        }
+        .social-btn:hover {
+            transform: translateY(-2px);
+        }
+        .login-divider {
+            position: relative;
+            text-align: center;
+            margin: 1.5rem 0;
+        }
+        .login-divider:before {
+            content: "";
+            position: absolute;
+            top: 50%;
+            left: 0;
+            right: 0;
+            height: 1px;
+            background-color: #eaecf4;
+        }
+        .login-divider-text {
+            position: relative;
+            display: inline-block;
+            padding: 0 1rem;
+            background-color: #fff;
+            font-size: 0.85rem;
+            color: #858796;
+        }
+        .brand-logo {
+            width: 80px;
+            height: auto;
+            margin-bottom: 1.5rem;
+        }
+    </style>
 </head>
 
-<body class="bg-gradient-primary">
+<body class="bg-gradient-custom">
 
     <div class="container">
 
@@ -31,43 +78,78 @@
 
             <div class="col-xl-10 col-lg-12 col-md-9">
 
-                <div class="card o-hidden border-0 shadow-lg my-5">
+                <div class="card o-hidden border-0 shadow-lg my-5 card-custom">
                     <div class="card-body p-0">
                         <!-- Nested Row within Card Body -->
                         <div class="row">
-                            <div class="col-lg-6 d-none d-lg-block bg-login-image"></div>
+                            <div class="col-lg-6 d-none d-lg-block">
+                                <div class="d-flex align-items-center justify-content-center h-100 bg-login-image">
+                                    <!-- Optional: Add an overlay with text -->
+                                    <div class="text-center p-5 text-white">
+                                        <h2 class="mb-4">Welcome Back!</h2>
+                                        <p class="mb-0">Access your dashboard and manage your business.</p>
+                                    </div>
+                                </div>
+                            </div>
                             <div class="col-lg-6">
                                 <div class="p-5">
                                     <div class="text-center">
-                                        <h1 class="h4 text-gray-900 mb-4">Welcome Back!</h1>
+                                        <!-- Optional: Add a logo -->
+                                        <img class="brand-logo" src="img/logo.png" alt="Company Logo">
+                                        <h1 class="h4 text-gray-900 mb-4 login-heading">Welcome Back!</h1>
+                                    </div>
+                                    
+                                    <!-- Social Login -->
+                                    <div class="mb-3">
+                                        <button class="btn btn-google btn-user btn-block social-btn mb-2">
+                                            <i class="fab fa-google fa-fw"></i> Sign in with Google
+                                        </button>
+                                        <button class="btn btn-facebook btn-user btn-block social-btn">
+                                            <i class="fab fa-facebook-f fa-fw"></i> Sign in with Facebook
+                                        </button>
+                                    </div>
+                                    
+                                    <div class="login-divider">
+                                        <span class="login-divider-text">OR</span>
                                     </div>
-                                    <form class="user">
+                                    
+                                    <form class="user" id="loginForm" method="POST" action="process-login.php">
+                                        <!-- Security token -->
+                                        <input type="hidden" name="security_token" value="<?php echo generateToken(); ?>">
+                                        
                                         <div class="form-group">
                                             <input type="email" class="form-control form-control-user"
-                                                id="exampleInputEmail" aria-describedby="emailHelp"
-                                                placeholder="Enter Email Address...">
+                                                id="emailInput" name="email" aria-describedby="emailHelp"
+                                                placeholder="Enter Email Address..." required autocomplete="email">
+                                            <div class="invalid-feedback">Please enter a valid email address</div>
                                         </div>
                                         <div class="form-group">
-                                            <input type="password" class="form-control form-control-user"
-                                                id="exampleInputPassword" placeholder="Password">
+                                            <div class="input-group">
+                                                <input type="password" class="form-control form-control-user"
+                                                    id="passwordInput" name="password" placeholder="Password" required
+                                                    autocomplete="current-password">
+                                                <div class="input-group-append">
+                                                    <button class="btn btn-outline-secondary" type="button" id="togglePassword">
+                                                        <i class="fas fa-eye" id="toggleIcon"></i>
+                                                    </button>
+                                                </div>
+                                            </div>
+                                            <div class="invalid-feedback">Please enter your password</div>
                                         </div>
                                         <div class="form-group">
                                             <div class="custom-control custom-checkbox small">
-                                                <input type="checkbox" class="custom-control-input" id="customCheck">
-                                                <label class="custom-control-label" for="customCheck">Remember
+                                                <input type="checkbox" class="custom-control-input" id="rememberCheck" name="remember">
+                                                <label class="custom-control-label remember-me-text" for="rememberCheck">Remember
                                                     Me</label>
                                             </div>
                                         </div>
-                                        <a href="index.html" class="btn btn-primary btn-user btn-block">
+                                        
+                                        <!-- Error message area -->
+                                        <div class="alert alert-danger d-none" id="loginError" role="alert"></div>
+                                        
+                                        <button type="submit" class="btn btn-primary btn-user btn-block">
                                             Login
-                                        </a>
-                                        <hr>
-                                        <a href="index.html" class="btn btn-google btn-user btn-block">
-                                            <i class="fab fa-google fa-fw"></i> Login with Google
-                                        </a>
-                                        <a href="index.html" class="btn btn-facebook btn-user btn-block">
-                                            <i class="fab fa-facebook-f fa-fw"></i> Login with Facebook
-                                        </a>
+                                        </button>
                                     </form>
                                     <hr>
                                     <div class="text-center">
@@ -81,11 +163,8 @@ <h1 class="h4 text-gray-900 mb-4">Welcome Back!</h1>
                         </div>
                     </div>
                 </div>
-
             </div>
-
         </div>
-
     </div>
 
     <!-- Bootstrap core JavaScript-->
@@ -97,7 +176,74 @@ <h1 class="h4 text-gray-900 mb-4">Welcome Back!</h1>
 
     <!-- Custom scripts for all pages-->
     <script src="js/sb-admin-2.min.js"></script>
-
+    
+    <!-- Form validation script -->
+    <script>
+    $(document).ready(function() {
+        // Toggle password visibility
+        $('#togglePassword').click(function() {
+            const passwordInput = $('#passwordInput');
+            const toggleIcon = $('#toggleIcon');
+            
+            if (passwordInput.attr('type') === 'password') {
+                passwordInput.attr('type', 'text');
+                toggleIcon.removeClass('fa-eye').addClass('fa-eye-slash');
+            } else {
+                passwordInput.attr('type', 'password');
+                toggleIcon.removeClass('fa-eye-slash').addClass('fa-eye');
+            }
+        });
+        
+        // Form validation and submission
+        $('#loginForm').on('submit', function(e) {
+            e.preventDefault();
+            let isValid = true;
+            
+            // Validate email
+            const email = $('#emailInput').val().trim();
+            if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+                $('#emailInput').addClass('is-invalid');
+                isValid = false;
+            } else {
+                $('#emailInput').removeClass('is-invalid');
+            }
+            
+            // Validate password
+            const password = $('#passwordInput').val();
+            if (!password) {
+                $('#passwordInput').addClass('is-invalid');
+                isValid = false;
+            } else {
+                $('#passwordInput').removeClass('is-invalid');
+            }
+            
+            if (isValid) {
+                // Show loading state
+                const submitBtn = $(this).find('button[type="submit"]');
+                const originalText = submitBtn.text();
+                submitBtn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Logging in...');
+                
+                // Submit form via AJAX
+                $.ajax({
+                    type: 'POST',
+                    url: $(this).attr('action'),
+                    data: $(this).serialize(),
+                    success: function(response) {
+                        // Redirect on successful login
+                        window.location.href = 'index.html';
+                    },
+                    error: function(xhr) {
+                        // Show error message
+                        $('#loginError').removeClass('d-none').text(xhr.responseJSON?.message || 'Invalid email or password. Please try again.');
+                        
+                        // Reset button state
+                        submitBtn.prop('disabled', false).text(originalText);
+                    }
+                });
+            }
+        });
+    });
+    </script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/startbootstrap-sb-admin-2 b/startbootstrap-sb-admin-2
new file mode 160000
index 000000000..f0309881e
--- /dev/null
+++ b/startbootstrap-sb-admin-2
@@ -0,0 +1 @@
+Subproject commit f0309881ef82794a1bd6257cd321801bc38a0f3d
diff --git a/vendor/bootstrap/js/bootstrap.bundle.js b/vendor/bootstrap/js/bootstrap.bundle.js
index d5c19832a..94ef4efe9 100644
--- a/vendor/bootstrap/js/bootstrap.bundle.js
+++ b/vendor/bootstrap/js/bootstrap.bundle.js
@@ -428,44 +428,46 @@
       var triggerChangeEvent = true;
       var addAriaPressed = true;
       var rootElement = $__default['default'](this._element).closest(SELECTOR_DATA_TOGGLES)[0];
-
+    
       if (rootElement) {
         var input = this._element.querySelector(SELECTOR_INPUT);
-
+    
         if (input) {
           if (input.type === 'radio') {
             if (input.checked && this._element.classList.contains(CLASS_NAME_ACTIVE)) {
               triggerChangeEvent = false;
             } else {
               var activeElement = rootElement.querySelector(SELECTOR_ACTIVE);
-
+    
               if (activeElement) {
                 $__default['default'](activeElement).removeClass(CLASS_NAME_ACTIVE);
               }
             }
           }
-
+    
           if (triggerChangeEvent) {
             // if it's not a radio button or checkbox don't add a pointless/invalid checked property to the input
             if (input.type === 'checkbox' || input.type === 'radio') {
               input.checked = !this._element.classList.contains(CLASS_NAME_ACTIVE);
             }
-
-            if (!this.shouldAvoidTriggerChange) {
+    
+            // Only trigger change if shouldAvoidTriggerChange is explicitly false
+            // This fixes the bug where change is always triggered regardless of shouldAvoidTriggerChange value
+            if (this.shouldAvoidTriggerChange === false) {
               $__default['default'](input).trigger('change');
             }
           }
-
+    
           input.focus();
           addAriaPressed = false;
         }
       }
-
+    
       if (!(this._element.hasAttribute('disabled') || this._element.classList.contains('disabled'))) {
         if (addAriaPressed) {
           this._element.setAttribute('aria-pressed', !this._element.classList.contains(CLASS_NAME_ACTIVE));
         }
-
+    
         if (triggerChangeEvent) {
           $__default['default'](this._element).toggleClass(CLASS_NAME_ACTIVE);
         }
