diff --git a/dashboard.php b/dashboard.php
index d3b5995..d21e56e 100644
--- a/dashboard.php
+++ b/dashboard.php
@@ -1,10 +1,11 @@
 <?php
 require "includes/database_connect.php";
 session_start();
-if(!isset($_SESSION['user_id'])){
-header("location: home.php");
+if (!isset($_SESSION['user_id'])) {
+    header("location: index.php");
 }
 ?>
+
 <!DOCTYPE html>
 <html lang="en">
 
@@ -19,197 +20,255 @@
 </head>
 
 <body class="bg-gray-300">
-   <?php
-   include "includes/header.php";
-   ?>
-  <div class="content pt-[8rem] h-100 bg-[url('../img/bg2.jpg')] bg-cover bg-centre fixed-bg">
-    <h1 class="font-bold text-gray-600 text-center">Welcome, <?= $_SESSION['name']?>!</h1>
-  
-<?php
-$user_id = $_SESSION['user_id'];
-$sql = "SELECT * FROM subjects where user_id = '$user_id'";
-$result = mysqli_query($conn, $sql);
-if(!$result){
-echo "Something went wrong!!";
-return;
-}
-$row_count = mysqli_num_rows($result);
-if($row_count==0){
-?>
-<div class="button-container">
-<button type="button" data-modal-target="subjects-modal" data-modal-toggle="subjects-modal" class=" transition ease-in-out delay-150 bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300 border text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2">Set up your subjects</button>
-</div>
-<?php
-} else {
-  ?>
-  <div id="content" class="flex mt-10">
-    <?php
-    $sql_2 = "SELECT * FROM classes where user_id = '$user_id'";
-    $result_2 = mysqli_query($conn, $sql_2);
-    $count = mysqli_num_rows($result_2);
-    if($count > 0){
-?>
- <div id="chart" class="mt-10 w-1/2">
     <?php
-     include "chart.php";
-     ?>
-  </div>
-  <div class="w-1/2">
-  <div class="button-container">
-<button type="button" data-modal-target="attendance_form-modal" data-modal-toggle="attendance_form-modal" class=" transition ease-in-out delay-150 bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300 border text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2">Mark your attendance</button>
-<a href="attendance.php"><button type="button" class=" transition ease-in-out delay-150 bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300 border text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2">See your attendance</button></a>
-</div>
-<div id="calendar_button" class="flex justify-center mt-10">
-    <a href="calendar.php" class=" transition ease-in-out delay-150 bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300 border text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2" ><button type="button">Calendar</button></a>
-</div>
-  </div>
-  </div>
-  <?php
-    } else {
+    include "includes/header.php";
     ?>
-  <div class="w-full">
-  <div class="button-container">
-<button type="button" data-modal-target="attendance_form-modal" data-modal-toggle="attendance_form-modal" class=" transition ease-in-out delay-150 bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300 border text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2">Mark your attendance</button>
-<a href="attendance.php"><button type="button" class=" transition ease-in-out delay-150 bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300 border text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2">See your attendance</button></a>
-</div>
-<div id="calendar_button" class="flex justify-center mt-10">
-    <a href="calendar.php" class=" transition ease-in-out delay-150 bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300 border text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2" ><button type="button">Calendar</button></a>
-</div>
-  </div>
-  </div>
+    <div class="content pt-[12rem] h-100 bg-[url('../img/bg2.jpg')] bg-cover bg-centre fixed-bg">
+        <h1 class="font-bold text-gray-600 text-center">Welcome, <?= $_SESSION['name'] ?>!</h1>
 
-<?php
-}}
-?>
-  
-  </div>
-  <?php
-$sql_2 = "SELECT * from subjects where user_id = '$user_id'";
-$result_2 = mysqli_query($conn, $sql_2);
-if(!$result_2){
-echo json_encode(array("success"=> false, "message"=> "Something went wrong!"));
-exit;
-}
-$subjects = mysqli_fetch_all($result_2, MYSQLI_ASSOC);
-mysqli_close($conn);
-  ?>
- <!-- Marking attendance form modal -->
- <div id="attendance_form-modal" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full bg-black bg-opacity-50 backdrop-blur-sm">
-    <div class="relative p-4 w-full max-w-md max-h-full">
-        <div class="relative bg-white/95 rounded-2xl shadow-xl dark:bg-gray-900/95 border border-gray-100 dark:border-gray-800">
-            <div class="flex items-center justify-between p-6 border-b border-gray-200/70 rounded-t-2xl dark:border-gray-700/70">
-                <h3 class="text-3xl font-extrabold text-gray-900 dark:text-white leading-tight flex items-center gap-3">
-                    <svg class="w-8 h-8 text-amber-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path>
-                        <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path>
-                    </svg>
-                    Mark Attendance
-                </h3>
-                <button type="button" class="text-gray-600 bg-transparent hover:bg-gray-100/70 hover:text-gray-900 rounded-full text-lg p-2 flex justify-center items-center transition-all duration-300 dark:hover:bg-gray-700/70 dark:hover:text-white" data-modal-hide="attendance_form-modal">
-                    <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
-                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
-                    </svg>
-                    <span class="sr-only">Close modal</span>
-                </button>
+        <?php
+        $user_id = $_SESSION['user_id'];
+        $sql = "SELECT * FROM subjects where user_id = '$user_id'";
+        $result = mysqli_query($conn, $sql);
+        if (!$result) {
+            echo "Something went wrong!!";
+            return;
+        }
+        $row_count = mysqli_num_rows($result);
+        if ($row_count == 0) {
+            ?>
+            <div class="button-container">
+                <button type="button" data-modal-target="subjects-modal" data-modal-toggle="subjects-modal"
+                    class=" transition ease-in-out delay-150 bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300 border text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2">Set
+                    up your subjects</button>
             </div>
-            <div class="p-8">
-                <form class="space-y-6" action="includes/mark_attendance.php" method="post">
-                    <div>
-                        <label for="subject_name_select" class="block mb-2 text-sm font-semibold text-gray-800 dark:text-gray-200">Subject</label>
-                        <select id="subject_name_select" name="subject_id" class="bg-white/70 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-amber-500 focus:border-amber-500 block w-full p-2.5 dark:bg-gray-700/70 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white/90 transition-all duration-200" required>
-                            <option selected disabled>Choose a subject</option>
-                            <?php
-                            // Ensure $subjects is defined before this loop
-                            // It should be passed from your PHP logic
-                            if (isset($subjects) && is_array($subjects)) {
-                                foreach ($subjects as $subject) {
-                                ?>
-                                    <option value="<?= $subject['id'] ?>"><?= $subject['subject_name'] ?></option>
-                                <?php
-                                }
-                            }
-                            ?>
-                        </select>
+            <?php
+        } else {
+            ?>
+            <div id="content" class="flex mt-10">
+                <?php
+                $sql_2 = "SELECT * FROM classes where user_id = '$user_id'";
+                $result_2 = mysqli_query($conn, $sql_2);
+                $count = mysqli_num_rows($result_2);
+                if ($count == 5) {
+                    ?>
+                    <div id="chart" class="mt-10 w-1/2">
+                        <?php
+                        include "chart.php";
+                        ?>
                     </div>
-                    <div>
-                        <label for="date" class="block mb-2 text-sm font-semibold text-gray-800 dark:text-gray-200">Date</label>
-                        <input type="date" name="date" id="date" class="bg-white/70 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-amber-500 focus:border-amber-500 block w-full p-2.5 dark:bg-gray-700/70 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white/90 transition-all duration-200" required />
+                    <div class="w-1/2">
+                        <div class="button-container">
+                            <button type="button" data-modal-target="attendance_form-modal"
+                                data-modal-toggle="attendance_form-modal"
+                                class=" transition ease-in-out delay-150 bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300 border text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2">Mark
+                                your attendance</button>
+                            <a href="attendance.php"><button type="button"
+                                    class=" transition ease-in-out delay-150 bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300 border text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2">See
+                                    your attendance</button></a>
+                        </div>
+                        <div id="calendar_button" class="flex justify-center mt-10">
+                            <a href="calendar.php"
+                                class=" transition ease-in-out delay-150 bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300 border text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2"><button
+                                    type="button">Calendar</button></a>
+                        </div>
                     </div>
-                    <div>
-                        <label for="status" class="block mb-2 text-sm font-semibold text-gray-800 dark:text-gray-200">Your Status</label>
-                        <select id="status" name="status" class="bg-white/70 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-amber-500 focus:border-amber-500 block w-full p-2.5 dark:bg-gray-700/70 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white/90 transition-all duration-200" required>
-                            <option selected disabled>Select Status</option>
-                            <option value="present">Present</option>
-                            <option value="absent">Absent</option>
-                            <option value="no class">No class</option>
-                        </select>
+                </div>
+                <?php
+                } else {
+                    ?>
+                <div class="w-full">
+                    <div class="button-container">
+                        <button type="button" data-modal-target="attendance_form-modal"
+                            data-modal-toggle="attendance_form-modal"
+                            class=" transition ease-in-out delay-150 bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300 border text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2">Mark
+                            your attendance</button>
+                        <a href="attendance.php"><button type="button"
+                                class=" transition ease-in-out delay-150 bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300 border text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2">See
+                                your attendance</button></a>
+                    </div>
+                    <div id="calendar_button" class="flex justify-center mt-10">
+                        <a href="calendar.php"
+                            class=" transition ease-in-out delay-150 bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300 border text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2"><button
+                                type="button">Calendar</button></a>
                     </div>
+                </div>
+            </div>
 
-                    <button type="submit" class="w-full text-white bg-amber-500 hover:bg-amber-600 focus:ring-4 focus:outline-none focus:ring-amber-300 font-bold rounded-lg text-lg px-6 py-3.5 text-center dark:bg-amber-400 dark:hover:bg-amber-500 dark:focus:ring-amber-800 transition transform hover:scale-105 duration-300 ease-in-out shadow-lg hover:shadow-xl flex items-center justify-center gap-2">
-                        <svg class="w-5 h-5 -ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-                            <path fill-rule="evenodd" d="M6.267 15.408a13.935 13.935 0 011.042-2.827c.18-.535.28-.636.368-1.258l.102-.635a1.867 1.867 0 011.048-1.048l.635-.102c.622-.088.723-.188 1.258-.368a13.936 13.936 0 012.827-1.042c.535-.18.636-.28 1.258-.368l.635-.102a1.867 1.867 0 011.048-1.048l.102-.635c.088-.622.188-.723.368-1.258a13.936 13.936 0 011.042-2.827c.18-.535.28-.636.368-1.258l.102-.635a1.867 1.867 0 011.048-1.048l.635-.102c.622-.088.723-.188 1.258-.368a13.936 13.936 0 012.827-1.042z" clip-rule="evenodd"></path>
-                            <path d="M10 2a8 8 0 100 16 8 8 0 000-16zM8 9a1 1 0 00-1 1v2a1 1 0 102 0v-2a1 1 0 00-1-1z" />
+            <?php
+                }
+        }
+        ?>
+
+    </div>
+    <?php
+    $sql_2 = "SELECT * from subjects where user_id = '$user_id'";
+    $result_2 = mysqli_query($conn, $sql_2);
+    if (!$result_2) {
+        echo json_encode(array("success" => false, "message" => "Something went wrong!"));
+        exit;
+    }
+    $subjects = mysqli_fetch_all($result_2, MYSQLI_ASSOC);
+    mysqli_close($conn);
+    ?>
+    <!-- Marking attendance form modal -->
+    <div id="attendance_form-modal" tabindex="-1" aria-hidden="true"
+        class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full bg-black bg-opacity-50 backdrop-blur-sm">
+        <div class="relative p-4 w-full max-w-md max-h-full">
+            <div
+                class="relative bg-white/95 rounded-2xl shadow-xl dark:bg-gray-900/95 border border-gray-100 dark:border-gray-800">
+                <div
+                    class="flex items-center justify-between p-6 border-b border-gray-200/70 rounded-t-2xl dark:border-gray-700/70">
+                    <h3
+                        class="text-3xl font-extrabold text-gray-900 dark:text-white leading-tight flex items-center gap-3">
+                        <svg class="w-8 h-8 text-amber-500" fill="currentColor" viewBox="0 0 20 20"
+                            xmlns="http://www.w3.org/2000/svg">
+                            <path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path>
+                            <path fill-rule="evenodd"
+                                d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z"
+                                clip-rule="evenodd"></path>
                         </svg>
                         Mark Attendance
+                    </h3>
+                    <button type="button"
+                        class="text-gray-600 bg-transparent hover:bg-gray-100/70 hover:text-gray-900 rounded-full text-lg p-2 flex justify-center items-center transition-all duration-300 dark:hover:bg-gray-700/70 dark:hover:text-white"
+                        data-modal-hide="attendance_form-modal">
+                        <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+                            viewBox="0 0 14 14">
+                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
+                        </svg>
+                        <span class="sr-only">Close modal</span>
                     </button>
-                </form>
+                </div>
+                <div class="p-8">
+                    <form class="space-y-6" action="includes/mark_attendance.php" method="post">
+                        <div>
+                            <label for="subject_name_select"
+                                class="block mb-2 text-sm font-semibold text-gray-800 dark:text-gray-200">Subject</label>
+                            <select id="subject_name_select" name="subject_id"
+                                class="bg-white/70 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-amber-500 focus:border-amber-500 block w-full p-2.5 dark:bg-gray-700/70 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white/90 transition-all duration-200"
+                                required>
+                                <option selected disabled>Choose a subject</option>
+                                <?php
+                                // Ensure $subjects is defined before this loop
+                                // It should be passed from your PHP logic
+                                if (isset($subjects) && is_array($subjects)) {
+                                    foreach ($subjects as $subject) {
+                                        ?>
+                                        <option value="<?= $subject['id'] ?>"><?= $subject['subject_name'] ?></option>
+                                        <?php
+                                    }
+                                }
+                                ?>
+                            </select>
+                        </div>
+                        <div>
+                            <label for="date"
+                                class="block mb-2 text-sm font-semibold text-gray-800 dark:text-gray-200">Date</label>
+                            <input type="date" name="date" id="date"
+                                class="bg-white/70 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-amber-500 focus:border-amber-500 block w-full p-2.5 dark:bg-gray-700/70 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white/90 transition-all duration-200"
+                                required />
+                        </div>
+                        <div>
+                            <label for="status"
+                                class="block mb-2 text-sm font-semibold text-gray-800 dark:text-gray-200">Your
+                                Status</label>
+                            <select id="status" name="status"
+                                class="bg-white/70 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-amber-500 focus:border-amber-500 block w-full p-2.5 dark:bg-gray-700/70 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white/90 transition-all duration-200"
+                                required>
+                                <option selected disabled>Select Status</option>
+                                <option value="present">Present</option>
+                                <option value="absent">Absent</option>
+                                <option value="no class">No class</option>
+                            </select>
+                        </div>
+
+                        <button type="submit"
+                            class="w-full text-white bg-amber-500 hover:bg-amber-600 focus:ring-4 focus:outline-none focus:ring-amber-300 font-bold rounded-lg text-lg px-6 py-3.5 text-center dark:bg-amber-400 dark:hover:bg-amber-500 dark:focus:ring-amber-800 transition transform hover:scale-105 duration-300 ease-in-out shadow-lg hover:shadow-xl flex items-center justify-center gap-2">
+                            <svg class="w-5 h-5 -ml-1" fill="currentColor" viewBox="0 0 20 20"
+                                xmlns="http://www.w3.org/2000/svg">
+                                <path fill-rule="evenodd"
+                                    d="M6.267 15.408a13.935 13.935 0 011.042-2.827c.18-.535.28-.636.368-1.258l.102-.635a1.867 1.867 0 011.048-1.048l.635-.102c.622-.088.723-.188 1.258-.368a13.936 13.936 0 012.827-1.042c.535-.18.636-.28 1.258-.368l.635-.102a1.867 1.867 0 011.048-1.048l.102-.635c.088-.622.188-.723.368-1.258a13.936 13.936 0 011.042-2.827c.18-.535.28-.636.368-1.258l.102-.635a1.867 1.867 0 011.048-1.048l.635-.102c.622-.088.723-.188 1.258-.368a13.936 13.936 0 012.827-1.042z"
+                                    clip-rule="evenodd"></path>
+                                <path
+                                    d="M10 2a8 8 0 100 16 8 8 0 000-16zM8 9a1 1 0 00-1 1v2a1 1 0 102 0v-2a1 1 0 00-1-1z" />
+                            </svg>
+                            Mark Attendance
+                        </button>
+                    </form>
+                </div>
             </div>
         </div>
     </div>
-</div>
-
-<!-- Subject setting form -->
-<div id="subjects-modal" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full bg-black bg-opacity-50 backdrop-blur-sm">
-    <div class="relative p-4 w-full max-w-lg max-h-full">
-        <div class="relative bg-white/95 rounded-2xl shadow-xl dark:bg-gray-900/95 border border-gray-100 dark:border-gray-800">
-            <div class="flex items-center justify-between p-6 border-b border-gray-200/70 rounded-t-2xl dark:border-gray-700/70">
-                <h3 class="text-3xl font-extrabold text-gray-900 dark:text-white leading-tight flex items-center gap-3">
-                    <svg class="w-8 h-8 text-amber-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-                        <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.414L14.586 5A2 2 0 0115 5.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 10a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1-3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path>
-                    </svg>
-                    Manage Subjects
-                </h3>
-                <button type="button" class="text-gray-600 bg-transparent hover:bg-gray-100/70 hover:text-gray-900 rounded-full text-lg p-2 flex justify-center items-center transition-all duration-300 dark:hover:bg-gray-700/70 dark:hover:text-white" data-modal-hide="subjects-modal">
-                    <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
-                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
-                    </svg>
-                    <span class="sr-only">Close modal</span>
-                </button>
-            </div>
-            <div class="p-8 pb-4">
-                <form id="subject_form" class="space-y-6" action="includes/setting_subjects.php" method="post">
-                    <div id="subject-fields-container" class="space-y-4 max-h-80 overflow-y-auto pr-2 custom-scrollbar">
-                        <!-- Subject fields will be dynamically added here -->
-                    </div>
 
-                    <button type="button" id="add-subject-btn" class="w-full border border-amber-500 text-amber-600 hover:bg-amber-50 focus:ring-4 focus:outline-none focus:ring-amber-200 font-semibold rounded-lg text-md px-5 py-2.5 text-center dark:border-amber-400 dark:text-amber-400 dark:hover:bg-gray-800 transition transform hover:scale-105 duration-300 ease-in-out flex items-center justify-center gap-2">
-                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
+  <!-- Subject setting form -->
+    <div id="subjects-modal" tabindex="-1" aria-hidden="true"
+        class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full bg-black bg-opacity-50 backdrop-blur-sm">
+        <div class="relative p-4 w-full max-w-lg max-h-full">
+            <div
+                class="relative bg-white/95 rounded-2xl shadow-xl dark:bg-gray-900/95 border border-gray-100 dark:border-gray-800">
+                <div
+                    class="flex items-center justify-between p-6 border-b border-gray-200/70 rounded-t-2xl dark:border-gray-700/70">
+                    <h3
+                        class="text-3xl font-extrabold text-gray-900 dark:text-white leading-tight flex items-center gap-3">
+                        <svg class="w-8 h-8 text-amber-500" fill="currentColor" viewBox="0 0 20 20"
+                            xmlns="http://www.w3.org/2000/svg">
+                            <path fill-rule="evenodd"
+                                d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.414L14.586 5A2 2 0 0115 5.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 10a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1-3a1 1 0 100 2h6a1 1 0 100-2H7z"
+                                clip-rule="evenodd"></path>
                         </svg>
-                        Add New Subject
+                        Manage Subjects
+                    </h3>
+                    <button type="button"
+                        class="text-gray-600 bg-transparent hover:bg-gray-100/70 hover:text-gray-900 rounded-full text-lg p-2 flex justify-center items-center transition-all duration-300 dark:hover:bg-gray-700/70 dark:hover:text-white"
+                        data-modal-hide="subjects-modal">
+                        <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+                            viewBox="0 0 14 14">
+                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+ 
+                        </svg>
+                        <span class="sr-only">Close modal</span>
                     </button>
+                </div>
+                <div class="p-8 pb-4">
+                    <form id="subject_form" class="space-y-6" action="includes/setting_subjects.php" method="post">
+                        <div id="subject-fields-container"
+                            class="space-y-4 max-h-80 overflow-y-auto pr-2 custom-scrollbar">
+                        </div>
 
-                    <button type="submit" class="w-full text-white bg-amber-500 hover:bg-amber-600 focus:ring-4 focus:outline-none focus:ring-amber-300 font-bold rounded-lg text-lg px-6 py-3.5 text-center dark:bg-amber-400 dark:hover:bg-amber-500 dark:focus:ring-amber-800 transition transform hover:scale-105 duration-300 ease-in-out shadow-lg hover:shadow-xl mt-6">
-                        Save Subjects
-                    </button>
-                </form>
+                        <button type="button" id="add-subject-btn"
+                            class="w-full border border-amber-500 text-amber-600 hover:bg-amber-50 focus:ring-4 focus:outline-none focus:ring-amber-200 font-semibold rounded-lg text-md px-5 py-2.5 text-center dark:border-amber-400 dark:text-amber-400 dark:hover:bg-gray-800 transition transform hover:scale-105 duration-300 ease-in-out flex items-center justify-center gap-2">
+                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+                                xmlns="http://www.w3.org/2000/svg">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
+                            </svg>
+                            Add New Subject
+                        </button>
+
+                        <button type="submit"
+                            class="w-full text-white bg-amber-500 hover:bg-amber-600 focus:ring-4 focus:outline-none focus:ring-amber-300 font-bold rounded-lg text-lg px-6 py-3.5 text-center dark:bg-amber-400 dark:hover:bg-amber-500 dark:focus:ring-amber-800 transition transform hover:scale-105 duration-300 ease-in-out shadow-lg hover:shadow-xl mt-6">
+                            Save Subjects
+                        </button>
+                    </form>
+                </div>
             </div>
         </div>
-    </div>
 
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const subjectContainer = document.getElementById('subject-fields-container');
-            const addSubjectBtn = document.getElementById('add-subject-btn');
-            let subjectCount = 0; // Start count for unique names/IDs
+        <script>
+            document.addEventListener('DOMContentLoaded', function () {
+                const subjectContainer = document.getElementById('subject-fields-container');
+                const addSubjectBtn = document.getElementById('add-subject-btn');
+                let subjectCount = 0; // Start count for unique names/IDs
 
-            // Function to create a new subject field group
-            function createSubjectField(subjectName = '', numberOfClasses = '') {
-                subjectCount++;
-                const div = document.createElement('div');
-                div.classList.add('flex', 'flex-col', 'gap-2', 'p-4', 'border', 'border-gray-200', 'rounded-lg', 'bg-white/60', 'dark:bg-gray-800/60', 'relative', 'shadow-sm');
+                // Function to create a new subject field group
+                function createSubjectField(subjectName = '', numberOfClasses = '') {
+                    subjectCount++;
+                    const div = document.createElement('div');
+                    div.classList.add('flex', 'flex-col', 'gap-2', 'p-4', 'border', 'border-gray-200', 'rounded-lg', 'bg-white/60', 'dark:bg-gray-800/60', 'relative', 'shadow-sm');
 
-                div.innerHTML = `
+                    div.innerHTML = `
                     <button type="button" class="remove-subject-btn absolute top-2 right-2 text-gray-400 hover:text-red-600 transition-colors duration-200" title="Remove subject">
                         <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
@@ -225,15 +284,22 @@ function createSubjectField(subjectName = '', numberOfClasses = '') {
                         <input type="number" name="subjects[${subjectCount}][classes]" id="classes_${subjectCount}" placeholder="e.g. 60" value="${numberOfClasses}" class="bg-white/70 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-amber-500 focus:border-amber-500 block w-full p-2.5 dark:bg-gray-700/70 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white/90 placeholder:text-gray-500/80 transition-all duration-200" min="1" required />
                     </div>
                 `;
-                subjectContainer.appendChild(div);
+                    subjectContainer.appendChild(div);
+
 
+                    // Add event listener for the new remove button
+                    div.querySelector('.remove-subject-btn').addEventListener('click', function () {
+                        div.remove();
+                    });
+                }
+              
                 // Add event listener for the new remove button
                 div.querySelector('.remove-subject-btn').addEventListener('click', function() {
                     div.remove();
                     updateFormValidation();
+
                 });
             }
-
             // Make sure there's at least one subject field at all times
             function updateFormValidation() {
                 // If there are no fields, add one automatically
@@ -294,13 +360,10 @@ function updateFormValidation() {
     </style>
 </div>
 
-  
     <?php
     include "includes/script.php";
     ?>
 
-
-      </body>
-
-
- </html>
\ No newline at end of file
+</body>
+    
+</html>
diff --git a/includes/header.php b/includes/header.php
index 847f4ab..6ebb102 100644
--- a/includes/header.php
+++ b/includes/header.php
@@ -1,74 +1,83 @@
+<nav id="header" class="fixed top-0 left-0 w-full border-gray-200">
+  <div class="max-w-full flex flex-wrap items-center justify-between mx-auto p-4">
+    <a href="index.php">
+      <span class="text-white self-center text-2xl font-semibold whitespace-nowrap dark:text-white flex">
+        <div id="img-container">
+          <img src="img/logo.png" />
+        </div>
 
- <nav id="header" class="fixed top-0 left-0 w-full bg-yellow-400 border-gray-200">
- <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
-     <a href="home.php">
-     <span class="text-white self-center text-2xl font-semibold whitespace-nowrap dark:text-white flex">
-      <div id="img-container">
-      <img src="img/logo.png"/>
-      </div>
-      <div id="name">
-      Attendance Tracker
-      </div>
-    </span>
-     </a>
-     <button data-collapse-toggle="navbar-default" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm  rounded-lg md:hidden hover:bg-yellow-600 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-red-700 dark:hover:bg-yellow-600 dark:focus:ring-gray-600" aria-controls="navbar-default" aria-expanded="false">
-         <span class="sr-only">Open main menu</span>
-         <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
-             <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
-         </svg>
-     </button>
-     <div class="hidden w-full md:block md:w-auto" id="navbar-default">
-        <?php
-        //if the USER is logged in
-        if(isset($_SESSION['user_id'])){ 
-          ?>
-          <ul class="bg-yellow-500 font-medium flex flex-col p-2 md:p-0 mt-1 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-yellow-500 dark:bg-yellow-500 md:dark:bg-yellow-500">
-              <li class="flex items-center justify-center">
-               Hi, <?= $_SESSION['name']?>
-              </li>
-              <li>
-                <a href="logout.php" class="block py-2 px-3 text-white rounded hover:bg-yellow-700 md:hover:bg-yellow-700 md:border-0 md:hover:text-white md:p-0 dark:text-white md:dark:hover:text-white dark:hover:bg-yellow-700 dark:hover:text-white md:dark:hover:bg-yellow-700"><i class="fas fa-sign-out-alt"></i> Logout</a>
-              </li>
-            </ul>
-  
-              <?php
-        }
-        //check if the ADMIN is logged in
-        elseif(isset($_SESSION['admin_id'])){
-          ?>
-          <ul class="font-medium flex flex-col p-2 md:p-0 mt-1 border border-gray-100 rounded-lg bg-yellow-500 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-yellow-500 dark:bg-yellow-500 md:dark:bg-yellow-500">
-              <li class="flex items-center justify-center">
-               <i class="fa fa-unlock-alt"></i> <?= $_SESSION['admin_name']?>
-              </li>
-              <li>
-                <a href="logout.php" class="block py-2 px-3 text-white rounded hover:bg-yellow-700 md:hover:bg-yellow-700 md:border-0 md:hover:text-white md:p-0 dark:text-white md:dark:hover:text-white dark:hover:bg-yellow-700 dark:hover:text-white md:dark:hover:bg-yellow-700"><i class="fas fa-sign-out-alt"></i> Logout</a>
-              </li>
-            </ul>
-  
-              <?php
-        }
+        <div id="name" class="text-3xl">
+          Attendance Tracker
+        </div>
+      </span>
+    </a>
+    <button data-collapse-toggle="navbar-default" type="button"
+      class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm  rounded-lg md:hidden focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-red-700  dark:focus:ring-gray-600"
+      aria-controls="navbar-default" aria-expanded="false">
+      <span class="sr-only">Open main menu</span>
+      <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
+        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+          d="M1 1h15M1 7h15M1 13h15" />
+      </svg>
+    </button>
 
-        else {
-          ?>
-          <ul class="font-medium flex flex-col p-2 md:p-0 mt-1 border border-gray-100 rounded-lg bg-yellow-500 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-yellow-500 dark:bg-yellow-500 md:dark:bg-yellow-500">
+    <div class="hidden w-full md:block md:w-auto" id="navbar-default">
+      <?php
+      //if the USER is logged in
+      if (isset($_SESSION['user_id'])) {
+        ?>
+        <ul
+          class="font-medium flex flex-col p-2 md:p-0 mt-1 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0">
+          <li class="text-xl flex items-center justify-center">
+            Hi, <?= $_SESSION['name'] ?>
+          </li>
           <li>
-            <a data-modal-target="signup-modal" data-modal-toggle="signup-modal" href="#" class="block py-2 px-3 text-white rounded hover:bg-yellow-700 md:bg-transparent md:text-blue-500 md:p-0 dark:text-white md:dark:text-blue-500"><i class="fas fa-user"></i> Signup</a>
+            <a href="logout.php" class="text-xl block py-2 px-3 text-black md:border-0 md:p-0"><i
+                class="fas fa-sign-out-alt"></i> Logout</a>
+          </li>
+        </ul>
+
+        <?php
+      }
+      //check if the ADMIN is logged in
+      elseif (isset($_SESSION['admin_id'])) {
+        ?>
+        <ul
+          class="font-medium flex flex-col p-2 md:p-0 mt-1 border border-gray-100 rounded-lg md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0">
+          <li class="text-2xl flex items-center justify-center">
+            <i class="fa fa-unlock-alt"></i> <?= $_SESSION['admin_name'] ?>
           </li>
           <li>
-            <a data-modal-target="authentication-modal" data-modal-toggle="authentication-modal" href="#" class="block py-2 px-3 text-white rounded hover:bg-yellow-700 md:hover:bg-yellow-700 md:border-0 md:hover:text-white md:p-0 dark:text-white md:dark:hover:text-white dark:hover:bg-yellow-700 dark:hover:text-white md:dark:hover:bg-yellow-700"><i class="fas fa-sign-in-alt"></i> Login</a>
+            <a href="logout.php"
+              class="text-2xl  block py-2 px-3 text-white rounded md:border-0 md:hover:text-white md:p-0 dark:text-white md:dark:hover:text-white dark:hover:text-white "><i
+                class="fas fa-sign-out-alt"></i> Logout</a>
           </li>
         </ul>
+
         <?php
-        }
+      } else {
         ?>
-       </div>
- </div>
+        <ul
+          class="font-medium flex flex-col p-2 md:p-0 mt-1 md:flex-row md:space-x-4 rtl:space-x-reverse md:mt-0 md:border-0">
+          <li>
+            <a data-modal-target="signup-modal" data-modal-toggle="signup-modal" href="#"
+              class="text-2xl block py-2 px-3 hover:underline decoration-white decoration-solid text-white rounded md:bg-transparent md:text-blue-500 md:p-0 dark:text-white"><i
+                class="fas fa-user"></i> Signup</a>
+          </li>
+          <li>
+            <a data-modal-target="authentication-modal" data-modal-toggle="authentication-modal" href="#"
+              class="text-2xl block py-2 px-3 text-white hover:underline decoration-white decoration-solid md:border-0 md:hover:text-white md:p-0 dark:text-white md:dark:hover:text-white  dark:hover:text-white"><i
+                class="fas fa-sign-in-alt"></i> Login</a>
+          </li>
+        </ul>
+        <?php
+      }
+      ?>
+    </div>
+  </div>
 
 </nav>
 
-
 <?php
 include "script.php";
 ?>
-
-
diff --git a/includes/login.php b/includes/login.php
index cba8dae..123821c 100644
--- a/includes/login.php
+++ b/includes/login.php
@@ -1,28 +1,36 @@
 <?php
+header('Content-Type: application/json');
 session_start();
-require "../includes/database_connect.php";
+require "./database_connect.php";
 
-$email = $_POST['email'];
-$password = $_POST['password'];
-$password = sha1($password);
-$sql = "SELECT * FROM users where email = '$email' AND password = '$password'";
+$email = trim($_POST['email'] ?? '');
+$password = trim($_POST['password'] ?? '');
+
+if (empty($email) || empty($password)) {
+    echo json_encode(["success" => false, "message" => "Please enter both email and password."]);
+    exit;
+}
+
+$password_hashed = sha1($password);
+
+$sql = "SELECT * FROM users WHERE email = '$email' AND password = '$password_hashed'";
 $result = mysqli_query($conn, $sql);
-if(!$result){
-$response = array("success"=> false, "message"=> "Something went wrong!");
-echo json_encode($response);
-return;
+
+if (!$result) {
+    echo json_encode(["success" => false, "message" => "Something went wrong. Please try again later."]);
+    exit;
 }
-$row_count = mysqli_num_rows($result);
-if($row_count==0){
-echo json_encode(array("success"=> false, "message"=> "Login failed! Invalid email or password"));
-return;
+
+if (mysqli_num_rows($result) === 0) {
+    echo json_encode(["success" => false, "message" => "Invalid email or password. Please try again."]);
+    exit;
 }
+
 $data = mysqli_fetch_assoc($result);
 $_SESSION['user_id'] = $data['id'];
 $_SESSION['name'] = $data['name'];
 $_SESSION['email'] = $data['email'];
 
-header("location: ../dashboard.php");
+echo json_encode(["success" => true, "message" => "Login successful! Redirecting..."]);
 mysqli_close($conn);
-
-?>
\ No newline at end of file
+?>
diff --git a/includes/signup.php b/includes/signup.php
index 3ada93d..93578ca 100644
--- a/includes/signup.php
+++ b/includes/signup.php
@@ -5,36 +5,37 @@
 $email = $_POST['email'];
 $password = $_POST['password'];
 $re_password = $_POST['confirm-password'];
+
 if($password != $re_password){
 echo json_encode(array("success"=> false, "message"=> "Password not matched!"));
 exit;
 }
 else {
     $password = sha1($password);
-$sql = "SELECT * FROM users where email = '$email'";
-$result = mysqli_query($conn, $sql);
-if(!$result){
-    $response = array("success"=> false, "message"=> "Something went wrong!");
+    $sql = "SELECT * FROM users where email = '$email'";
+    $result = mysqli_query($conn, $sql);
+    if (!$result) {
+        $response = array("success" => false, "message" => "Something went wrong!");
+        echo json_encode($response);
+        return;
+    }
+    $row_count = mysqli_num_rows($result);
+    if ($row_count != 0) {
+        $response = array("success" => false, "message" => "This email is already registered with us!");
+        echo json_encode($response);
+        return;
+    }
+    $sql_2 = "INSERT INTO users (name, email, password) values ('$name', '$email', '$password')";
+    $result_2 = mysqli_query($conn, $sql_2);
+    if (!$result_2) {
+        $response = array("success" => false, "message" => "Something went wrong!");
+        echo json_encode($response);
+        return;
+    }
+    $response = array("success" => true, "message" => "Your account has been created successfully! You can now log in to get started.");
     echo json_encode($response);
-    return;
-}
-$row_count = mysqli_num_rows($result);
-if($row_count!=0){
-$response = array("success"=> false, "message"=> "This email is already registered with us!");
-echo json_encode($response);
-return;
-}
-$sql_2 = "INSERT INTO users (name, email, password) values ('$name', '$email', '$password')";
-$result_2 = mysqli_query($conn, $sql_2);
-if(!$result_2){
-$response = array("success"=> false, "message"=> "Something went wrong!");
-echo json_encode($response);
-return;
-}
-$response = array("success"=> true, "message"=> "Your account has been created successfully!");
-echo json_encode($response);
 }
 
 mysqli_close($conn);
 
-?>
\ No newline at end of file
+?>
diff --git a/index.php b/index.php
index d9ba295..43ba410 100644
--- a/index.php
+++ b/index.php
@@ -12,7 +12,8 @@
 ?>
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+
+<head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <?php
@@ -20,51 +21,62 @@
     ?>
     <link rel="stylesheet" href="css/home.css" />
     <title>Attendance Tracker</title>
-  </head>
 
-  <body>
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+
+    <!-- Toastr CSS -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
+
+    <!-- jQuery (must be loaded before toastr.js) -->
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+
+    <!-- Toastr JS -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
+
+
+</head>
+
+<body>
     <?php
     include "includes/header.php";
     ?>
 
     <div id="bg" class="bg-[url('../img/bg.avif')] bg-cover bg-center fixed-bg">
-      <div id="box" class="h-screen flex items-center justify-center">
-        <span class="overline text-4xl text-white font-bold mb-10"
-          >Effortless Attendance Management at Your Fingertips</span
-        >
-        <div id="login_buttons" class="flex justify-center">
-          <button
-            data-modal-target="authentication-modal"
-            data-modal-toggle="authentication-modal"
-            type="button"
-            class="text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
-          >
-            <i class="fa fa-user-circle"></i> Login as User
-          </button>
-          <button
-            data-modal-target="admin-modal"
-            data-modal-toggle="admin-modal"
-            type="button"
-            class="text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
-          >
-            <i class="fa fa-lock"></i> Admin Login
-          </button>
+        <div id="box" class="h-screen flex items-center justify-center">
+            <span class="overline text-4xl text-white font-bold mb-10">Effortless Attendance Management at Your
+                Fingertips</span>
+            <div id="login_buttons" class="flex justify-center">
+                <button data-modal-target="authentication-modal" data-modal-toggle="authentication-modal" type="button"
+                    class="text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">
+                    <i class="fa fa-user-circle"></i> Login as User
+                </button>
+                <button data-modal-target="admin-modal" data-modal-toggle="admin-modal" type="button"
+                    class="text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">
+                    <i class="fa fa-lock"></i> Admin Login
+                </button>
+            </div>
         </div>
-      </div>
     </div>
 
     <?php include "includes/modals.php"; ?>
 
-    <div id="authentication-modal" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full bg-black bg-opacity-50 backdrop-blur-sm">
+    <div id="authentication-modal" tabindex="-1" aria-hidden="true"
+        class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full bg-black bg-opacity-50 backdrop-blur-sm">
         <div class="relative p-4 w-full max-w-md max-h-full">
-            <div class="relative bg-white/95 rounded-2xl shadow-xl dark:bg-gray-900/95 border border-gray-100 dark:border-gray-800">
-                <div class="flex items-center justify-between p-6 border-b border-gray-200/70 rounded-t-2xl dark:border-gray-700/70">
+            <div
+                class="relative bg-white/95 rounded-2xl shadow-xl dark:bg-gray-900/95 border border-gray-100 dark:border-gray-800">
+                <div
+                    class="flex items-center justify-between p-6 border-b border-gray-200/70 rounded-t-2xl dark:border-gray-700/70">
                     <h3 class="text-3xl font-extrabold text-gray-900 dark:text-white leading-tight">
                         Welcome Back!
                     </h3>
-                    <button type="button" class="text-gray-600 bg-transparent hover:bg-gray-100/70 hover:text-gray-900 rounded-full text-lg p-2 flex justify-center items-center transition-all duration-300 dark:hover:bg-gray-700/70 dark:hover:text-white" data-modal-hide="authentication-modal">
-                        <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
-                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
+                    <button type="button"
+                        class="text-gray-600 bg-transparent hover:bg-gray-100/70 hover:text-gray-900 rounded-full text-lg p-2 flex justify-center items-center transition-all duration-300 dark:hover:bg-gray-700/70 dark:hover:text-white"
+                        data-modal-hide="authentication-modal">
+                        <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+                            viewBox="0 0 14 14">
+                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
                         </svg>
                         <span class="sr-only">Close modal</span>
                     </button>
@@ -72,47 +84,54 @@ class="text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-300
                 <div class="p-8">
                     <form id="login_form" class="space-y-6" action="includes/login.php" method="post">
                         <div>
-                            <label for="email" class="block mb-2 text-sm font-semibold text-gray-800 dark:text-gray-200">Your Email</label>
-                            <input type="email" name="email" id="email" class="bg-white/70 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-amber-500 focus:border-amber-500 block w-full p-3 dark:bg-gray-800/70 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white/90 placeholder:text-gray-500/80 transition-all duration-200" placeholder="name@example.com" required />
+                            <label for="email"
+                                class="block mb-2 text-sm font-semibold text-gray-800 dark:text-gray-200">Your
+                                Email</label>
+                            <input type="email" name="email" id="email"
+                                class="bg-white/70 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-amber-500 focus:border-amber-500 block w-full p-3 dark:bg-gray-800/70 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white/90 placeholder:text-gray-500/80 transition-all duration-200"
+                                placeholder="name@example.com" required />
                         </div>
                         <div>
-                            <label for="password" class="block mb-2 text-sm font-semibold text-gray-800 dark:text-gray-200">Your Password</label>
+                            <label for="password"
+                                class="block mb-2 text-sm font-semibold text-gray-800 dark:text-gray-200">Your
+                                Password</label>
                             <div class="relative">
-                                <input type="password" name="password" id="password" placeholder="••••••••" class="password-input bg-white/70 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-amber-500 focus:border-amber-500 block w-full p-3 dark:bg-gray-800/70 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white/90 placeholder:text-gray-500/80 transition-all duration-200" required />
-                                <svg
-                                    class="toggle-password absolute right-3 top-3 cursor-pointer w-5 h-5 text-gray-600 dark:text-gray-400"
-                                    xmlns="http://www.w3.org/2000/svg"
-                                    viewBox="0 0 24 24"
-                                    fill="none"
-                                    stroke="currentColor"
-                                >
-                                    <path
-                                    stroke-linecap="round"
-                                    stroke-linejoin="round"
-                                    stroke-width="2"
-                                    d="M15 12a3 3 0 11-6 0 3 3 0 016 0z
+                                <input type="password" name="password" id="password" placeholder="••••••••"
+                                    class="password-input bg-white/70 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-amber-500 focus:border-amber-500 block w-full p-3 dark:bg-gray-800/70 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white/90 placeholder:text-gray-500/80 transition-all duration-200"
+                                    required />
+                                <svg class="toggle-password absolute right-3 top-3 cursor-pointer w-5 h-5 text-gray-600 dark:text-gray-400"
+                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
+                                    stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z
                                     M2.458 12C3.732 7.943 7.523 5 12 5
                                     c4.478 0 8.268 2.943 9.542 7
                                     c-1.274 4.057-5.064 7-9.542 7
-                                    c-4.478 0-8.268-2.943-9.542-7z"
-                                    />
+                                    c-4.478 0-8.268-2.943-9.542-7z" />
                                 </svg>
                             </div>
                         </div>
 
                         <div class="flex justify-end">
-                            <a href="#" class="text-sm text-amber-600 hover:text-amber-700 hover:underline dark:text-amber-500 dark:hover:text-amber-600 transition-colors duration-200">Forgot password?</a>
+                            <a href="#"
+                                class="text-sm text-amber-600 hover:text-amber-700 hover:underline dark:text-amber-500 dark:hover:text-amber-600 transition-colors duration-200">Forgot
+                                password?</a>
                         </div>
 
-                        <button type="submit" class="w-full text-white bg-amber-500 hover:bg-amber-600 focus:ring-4 focus:outline-none focus:ring-amber-300 font-bold rounded-lg text-lg px-6 py-3.5 text-center dark:bg-amber-400 dark:hover:bg-amber-500 dark:focus:ring-amber-800 transition transform hover:scale-105 duration-300 ease-in-out shadow-lg hover:shadow-xl flex items-center justify-center gap-2">
-                            <svg class="w-5 h-5 -ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-                                <path fill-rule="evenodd" d="M10 2a5 0 00-5 5v2a2 2 0 00-2 2v5a2 2 0 002 2h10a2 2 0 002-2v-5a2 2 0 00-2-2V7a5 5 0 00-5-5zm-3 7v2h6V9a3 3 0 00-6 0z" clip-rule="evenodd"></path>
+                        <button type="submit"
+                            class="w-full text-white bg-amber-500 hover:bg-amber-600 focus:ring-4 focus:outline-none focus:ring-amber-300 font-bold rounded-lg text-lg px-6 py-3.5 text-center dark:bg-amber-400 dark:hover:bg-amber-500 dark:focus:ring-amber-800 transition transform hover:scale-105 duration-300 ease-in-out shadow-lg hover:shadow-xl flex items-center justify-center gap-2">
+                            <svg class="w-5 h-5 -ml-1" fill="currentColor" viewBox="0 0 20 20"
+                                xmlns="http://www.w3.org/2000/svg">
+                                <path fill-rule="evenodd"
+                                    d="M10 2a5 0 00-5 5v2a2 2 0 00-2 2v5a2 2 0 002 2h10a2 2 0 002-2v-5a2 2 0 00-2-2V7a5 5 0 00-5-5zm-3 7v2h6V9a3 3 0 00-6 0z"
+                                    clip-rule="evenodd"></path>
                             </svg>
                             Log In
                         </button>
 
                         <p class="text-sm font-medium text-gray-600 dark:text-gray-400 text-center mt-6">
-                            Not registered? <a href="#" class="font-bold text-amber-600 hover:text-amber-700 hover:underline dark:text-amber-500 dark:hover:text-amber-600 transition-colors duration-200">Create account</a>
+                            Not registered? <a href="#"
+                                class="font-bold text-amber-600 hover:text-amber-700 hover:underline dark:text-amber-500 dark:hover:text-amber-600 transition-colors duration-200">Create
+                                account</a>
                         </p>
                     </form>
                 </div>
@@ -120,16 +139,23 @@ class="toggle-password absolute right-3 top-3 cursor-pointer w-5 h-5 text-gray-6
         </div>
     </div>
 
-    <div id="admin-modal" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full bg-black bg-opacity-50 backdrop-blur-sm">
+    <div id="admin-modal" tabindex="-1" aria-hidden="true"
+        class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full bg-black bg-opacity-50 backdrop-blur-sm">
         <div class="relative p-4 w-full max-w-md max-h-full">
-            <div class="relative bg-white/95 rounded-2xl shadow-xl dark:bg-gray-900/95 border border-gray-100 dark:border-gray-800">
-                <div class="flex items-center justify-between p-6 border-b border-gray-200/70 rounded-t-2xl dark:border-gray-700/70">
+            <div
+                class="relative bg-white/95 rounded-2xl shadow-xl dark:bg-gray-900/95 border border-gray-100 dark:border-gray-800">
+                <div
+                    class="flex items-center justify-between p-6 border-b border-gray-200/70 rounded-t-2xl dark:border-gray-700/70">
                     <h3 class="text-3xl font-extrabold text-gray-900 dark:text-white leading-tight">
                         Admin Login
                     </h3>
-                    <button type="button" class="text-gray-600 bg-transparent hover:bg-gray-100/70 hover:text-gray-900 rounded-full text-lg p-2 flex justify-center items-center transition-all duration-300 dark:hover:bg-gray-700/70 dark:hover:text-white" data-modal-hide="admin-modal">
-                        <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
-                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
+                    <button type="button"
+                        class="text-gray-600 bg-transparent hover:bg-gray-100/70 hover:text-gray-900 rounded-full text-lg p-2 flex justify-center items-center transition-all duration-300 dark:hover:bg-gray-700/70 dark:hover:text-white"
+                        data-modal-hide="admin-modal">
+                        <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+                            viewBox="0 0 14 14">
+                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
                         </svg>
                         <span class="sr-only">Close modal</span>
                     </button>
@@ -137,37 +163,40 @@ class="toggle-password absolute right-3 top-3 cursor-pointer w-5 h-5 text-gray-6
                 <div class="p-8">
                     <form id="admin_form" class="space-y-6" action="includes/admin_login.php" method="post">
                         <div>
-                            <label for="admin_email" class="block mb-2 text-sm font-semibold text-gray-800 dark:text-gray-200">Admin Email</label>
-                            <input type="email" name="admin_email" id="admin_email" class="bg-white/70 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-amber-500 focus:border-amber-500 block w-full p-3 dark:bg-gray-800/70 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white/90 placeholder:text-gray-500/80 transition-all duration-200" placeholder="admin@example.com" required />
+                            <label for="admin_email"
+                                class="block mb-2 text-sm font-semibold text-gray-800 dark:text-gray-200">Admin
+                                Email</label>
+                            <input type="email" name="admin_email" id="admin_email"
+                                class="bg-white/70 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-amber-500 focus:border-amber-500 block w-full p-3 dark:bg-gray-800/70 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white/90 placeholder:text-gray-500/80 transition-all duration-200"
+                                placeholder="admin@example.com" required />
                         </div>
                         <div>
-                            <label for="admin_password" class="block mb-2 text-sm font-semibold text-gray-800 dark:text-gray-200">Admin Password</label>
+                            <label for="admin_password"
+                                class="block mb-2 text-sm font-semibold text-gray-800 dark:text-gray-200">Admin
+                                Password</label>
                             <div class="relative">
-                                <input type="password" name="admin_password" id="admin_password" placeholder="••••••••" class="password-input bg-white/70 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-amber-500 focus:border-amber-500 block w-full p-3 dark:bg-gray-800/70 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white/90 placeholder:text-gray-500/80 transition-all duration-200" required />
-                                <svg
-                                    class="toggle-password absolute right-3 top-3 cursor-pointer w-5 h-5 text-gray-600 dark:text-gray-400"
-                                    xmlns="http://www.w3.org/2000/svg"
-                                    viewBox="0 0 24 24"
-                                    fill="none"
-                                    stroke="currentColor"
-                                >
-                                    <path
-                                    stroke-linecap="round"
-                                    stroke-linejoin="round"
-                                    stroke-width="2"
-                                    d="M15 12a3 3 0 11-6 0 3 3 0 016 0z
+                                <input type="password" name="admin_password" id="admin_password" placeholder="••••••••"
+                                    class="password-input bg-white/70 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-amber-500 focus:border-amber-500 block w-full p-3 dark:bg-gray-800/70 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white/90 placeholder:text-gray-500/80 transition-all duration-200"
+                                    required />
+                                <svg class="toggle-password absolute right-3 top-3 cursor-pointer w-5 h-5 text-gray-600 dark:text-gray-400"
+                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
+                                    stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z
                                     M2.458 12C3.732 7.943 7.523 5 12 5
                                     c4.478 0 8.268 2.943 9.542 7
                                     c-1.274 4.057-5.064 7-9.542 7
-                                    c-4.478 0-8.268-2.943-9.542-7z"
-                                    />
+                                    c-4.478 0-8.268-2.943-9.542-7z" />
                                 </svg>
                             </div>
                         </div>
 
-                        <button type="submit" class="w-full text-white bg-amber-500 hover:bg-amber-600 focus:ring-4 focus:outline-none focus:ring-amber-300 font-bold rounded-lg text-lg px-6 py-3.5 text-center dark:bg-amber-400 dark:hover:bg-amber-500 dark:focus:ring-amber-800 transition transform hover:scale-105 duration-300 ease-in-out shadow-lg hover:shadow-xl flex items-center justify-center gap-2">
-                            <svg class="w-5 h-5 -ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-                                <path fill-rule="evenodd" d="M10 2a5 0 00-5 5v2a2 2 0 00-2 2v5a2 2 0 002 2h10a2 2 0 002-2v-5a2 2 0 00-2-2V7a5 5 0 00-5-5zm-3 7v2h6V9a3 3 0 00-6 0z" clip-rule="evenodd"></path>
+                        <button type="submit"
+                            class="w-full text-white bg-amber-500 hover:bg-amber-600 focus:ring-4 focus:outline-none focus:ring-amber-300 font-bold rounded-lg text-lg px-6 py-3.5 text-center dark:bg-amber-400 dark:hover:bg-amber-500 dark:focus:ring-amber-800 transition transform hover:scale-105 duration-300 ease-in-out shadow-lg hover:shadow-xl flex items-center justify-center gap-2">
+                            <svg class="w-5 h-5 -ml-1" fill="currentColor" viewBox="0 0 20 20"
+                                xmlns="http://www.w3.org/2000/svg">
+                                <path fill-rule="evenodd"
+                                    d="M10 2a5 0 00-5 5v2a2 2 0 00-2 2v5a2 2 0 002 2h10a2 2 0 002-2v-5a2 2 0 00-2-2V7a5 5 0 00-5-5zm-3 7v2h6V9a3 3 0 00-6 0z"
+                                    clip-rule="evenodd"></path>
                             </svg>
                             Admin Log In
                         </button>
@@ -177,16 +206,23 @@ class="toggle-password absolute right-3 top-3 cursor-pointer w-5 h-5 text-gray-6
         </div>
     </div>
 
-    <div id="signup-modal" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full bg-black bg-opacity-50 backdrop-blur-sm">
+    <div id="signup-modal" tabindex="-1" aria-hidden="true"
+        class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full bg-black bg-opacity-50 backdrop-blur-sm">
         <div class="relative p-4 w-full max-w-md max-h-full">
-            <div class="relative bg-white/95 rounded-2xl shadow-xl dark:bg-gray-900/95 border border-gray-100 dark:border-gray-800">
-                <div class="flex items-center justify-between p-6 border-b border-gray-200/70 rounded-t-2xl dark:border-gray-700/70">
+            <div
+                class="relative bg-white/95 rounded-2xl shadow-xl dark:bg-gray-900/95 border border-gray-100 dark:border-gray-800">
+                <div
+                    class="flex items-center justify-between p-6 border-b border-gray-200/70 rounded-t-2xl dark:border-gray-700/70">
                     <h3 class="text-3xl font-extrabold text-gray-900 dark:text-white leading-tight">
                         Join Our Community
                     </h3>
-                    <button type="button" class="text-gray-600 bg-transparent hover:bg-gray-100/70 hover:text-gray-900 rounded-full text-lg p-2 flex justify-center items-center transition-all duration-300 dark:hover:bg-gray-700/70 dark:hover:text-white" data-modal-hide="signup-modal">
-                        <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
-                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
+                    <button type="button"
+                        class="text-gray-600 bg-transparent hover:bg-gray-100/70 hover:text-gray-900 rounded-full text-lg p-2 flex justify-center items-center transition-all duration-300 dark:hover:bg-gray-700/70 dark:hover:text-white"
+                        data-modal-hide="signup-modal">
+                        <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+                            viewBox="0 0 14 14">
+                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
                         </svg>
                         <span class="sr-only">Close modal</span>
                     </button>
@@ -194,71 +230,74 @@ class="toggle-password absolute right-3 top-3 cursor-pointer w-5 h-5 text-gray-6
                 <div class="p-8">
                     <form id="signup_form" class="space-y-6" action="includes/signup.php" method="post">
                         <div>
-                            <label for="name" class="block mb-2 text-sm font-semibold text-gray-800 dark:text-gray-200">Your Name</label>
-                            <input type="text" name="name" id="name" class="bg-white/70 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-amber-500 focus:border-amber-500 block w-full p-3 dark:bg-gray-800/70 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white/90 placeholder:text-gray-500/80 transition-all duration-200" placeholder="John Doe" required />
+                            <label for="name"
+                                class="block mb-2 text-sm font-semibold text-gray-800 dark:text-gray-200">Your
+                                Name</label>
+                            <input type="text" name="name" id="name"
+                                class="bg-white/70 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-amber-500 focus:border-amber-500 block w-full p-3 dark:bg-gray-800/70 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white/90 placeholder:text-gray-500/80 transition-all duration-200"
+                                placeholder="John Doe" required />
                         </div>
                         <div>
-                            <label for="email" class="block mb-2 text-sm font-semibold text-gray-800 dark:text-gray-200">Your Email</label>
-                            <input type="email" name="email" id="email" class="bg-white/70 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-amber-500 focus:border-amber-500 block w-full p-3 dark:bg-gray-800/70 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white/90 placeholder:text-gray-500/80 transition-all duration-200" placeholder="name@example.com" required />
+                            <label for="email"
+                                class="block mb-2 text-sm font-semibold text-gray-800 dark:text-gray-200">Your
+                                Email</label>
+                            <input type="email" name="email" id="email"
+                                class="bg-white/70 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-amber-500 focus:border-amber-500 block w-full p-3 dark:bg-gray-800/70 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white/90 placeholder:text-gray-500/80 transition-all duration-200"
+                                placeholder="name@example.com" required />
                         </div>
                         <div>
-                            <label for="password" class="block mb-2 text-sm font-semibold text-gray-800 dark:text-gray-200">Your Password</label>
+                            <label for="password"
+                                class="block mb-2 text-sm font-semibold text-gray-800 dark:text-gray-200">Your
+                                Password</label>
                             <div class="relative">
-                                <input type="password" name="password" id="password" placeholder="••••••••" class="password-input bg-white/70 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-amber-500 focus:border-amber-500 block w-full p-3 dark:bg-gray-800/70 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white/90 placeholder:text-gray-500/80 transition-all duration-200" required />
-                                <svg
-                                    class="toggle-password absolute right-3 top-3 cursor-pointer w-5 h-5 text-gray-600 dark:text-gray-400"
-                                    xmlns="http://www.w3.org/2000/svg"
-                                    viewBox="0 0 24 24"
-                                    fill="none"
-                                    stroke="currentColor"
-                                >
-                                    <path
-                                    stroke-linecap="round"
-                                    stroke-linejoin="round"
-                                    stroke-width="2"
-                                    d="M15 12a3 3 0 11-6 0 3 3 0 016 0z
+                                <input type="password" name="password" id="password" placeholder="••••••••"
+                                    class="password-input bg-white/70 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-amber-500 focus:border-amber-500 block w-full p-3 dark:bg-gray-800/70 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white/90 placeholder:text-gray-500/80 transition-all duration-200"
+                                    required />
+                                <svg class="toggle-password absolute right-3 top-3 cursor-pointer w-5 h-5 text-gray-600 dark:text-gray-400"
+                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
+                                    stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z
                                     M2.458 12C3.732 7.943 7.523 5 12 5
                                     c4.478 0 8.268 2.943 9.542 7
                                     c-1.274 4.057-5.064 7-9.542 7
-                                    c-4.478 0-8.268-2.943-9.542-7z"
-                                    />
+                                    c-4.478 0-8.268-2.943-9.542-7z" />
                                 </svg>
                             </div>
                         </div>
                         <div>
-                            <label for="confirm-password" class="block mb-2 text-sm font-semibold text-gray-800 dark:text-gray-200">Confirm Password</label>
+                            <label for="confirm-password"
+                                class="block mb-2 text-sm font-semibold text-gray-800 dark:text-gray-200">Confirm
+                                Password</label>
                             <div class="relative">
-                                <input type="password" name="confirm-password" id="confirm-password" placeholder="••••••••" class="password-input bg-white/70 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-amber-500 focus:border-amber-500 block w-full p-3 dark:bg-gray-800/70 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white/90 placeholder:text-gray-500/80 transition-all duration-200" required />
-                                <svg
-                                    class="toggle-password absolute right-3 top-3 cursor-pointer w-5 h-5 text-gray-600 dark:text-gray-400"
-                                    xmlns="http://www.w3.org/2000/svg"
-                                    viewBox="0 0 24 24"
-                                    fill="none"
-                                    stroke="currentColor"
-                                >
-                                    <path
-                                    stroke-linecap="round"
-                                    stroke-linejoin="round"
-                                    stroke-width="2"
-                                    d="M15 12a3 3 0 11-6 0 3 3 0 016 0z
+                                <input type="password" name="confirm-password" id="confirm-password" placeholder="••••••••"
+                                    class="password-input bg-white/70 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-amber-500 focus:border-amber-500 block w-full p-3 dark:bg-gray-800/70 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white/90 placeholder:text-gray-500/80 transition-all duration-200"
+                                    required />
+                                <svg class="toggle-password absolute right-3 top-3 cursor-pointer w-5 h-5 text-gray-600 dark:text-gray-400"
+                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
+                                    stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z
                                     M2.458 12C3.732 7.943 7.523 5 12 5
                                     c4.478 0 8.268 2.943 9.542 7
                                     c-1.274 4.057-5.064 7-9.542 7
-                                    c-4.478 0-8.268-2.943-9.542-7z"
-                                    />
+                                    c-4.478 0-8.268-2.943-9.542-7z" />
                                 </svg>
                             </div>
                         </div>
 
-                        <button type="submit" class="w-full text-white bg-amber-500 hover:bg-amber-600 focus:ring-4 focus:outline-none focus:ring-amber-300 font-bold rounded-lg text-lg px-6 py-3.5 text-center dark:bg-amber-400 dark:hover:bg-amber-500 dark:focus:ring-amber-800 transition transform hover:scale-105 duration-300 ease-in-out shadow-lg hover:shadow-xl flex items-center justify-center gap-2">
-                            <svg class="w-5 h-5 -ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-                                <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
+                        <button type="submit"
+                            class="w-full text-white bg-amber-500 hover:bg-amber-600 focus:ring-4 focus:outline-none focus:ring-amber-300 font-bold rounded-lg text-lg px-6 py-3.5 text-center dark:bg-amber-400 dark:hover:bg-amber-500 dark:focus:ring-amber-800 transition transform hover:scale-105 duration-300 ease-in-out shadow-lg hover:shadow-xl flex items-center justify-center gap-2">
+                            <svg class="w-5 h-5 -ml-1" fill="currentColor" viewBox="0 0 20 20"
+                                xmlns="http://www.w3.org/2000/svg">
+                                <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
+                                    clip-rule="evenodd"></path>
                             </svg>
                             Sign Up Now
                         </button>
 
                         <p class="text-sm font-medium text-gray-600 dark:text-gray-400 text-center mt-6">
-                            Already a member? <a href="#" class="font-bold text-amber-600 hover:text-amber-700 hover:underline dark:text-amber-500 dark:hover:text-amber-600 transition-colors duration-200">Log in</a>
+                            Already a member? <a href="#"
+                                class="font-bold text-amber-600 hover:text-amber-700 hover:underline dark:text-amber-500 dark:hover:text-amber-600 transition-colors duration-200">Log
+                                in</a>
                         </p>
                     </form>
                 </div>
@@ -267,14 +306,14 @@ class="toggle-password absolute right-3 top-3 cursor-pointer w-5 h-5 text-gray-6
     </div>
 
     <script>
-      document.querySelectorAll(".toggle-password").forEach((icon) => {
-        icon.addEventListener("click", () => {
-          const input = icon.previousElementSibling; // Gets the input field right before the icon
-
-          if (input.type === "password") {
-            input.type = "text";
-            // Update the SVG icon to show "eye-slash" (password visible)
-            icon.innerHTML = `
+        document.querySelectorAll(".toggle-password").forEach((icon) => {
+            icon.addEventListener("click", () => {
+                const input = icon.previousElementSibling; // Gets the input field right before the icon
+
+                if (input.type === "password") {
+                    input.type = "text";
+                    // Update the SVG icon to show "eye-slash" (password visible)
+                    icon.innerHTML = `
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                   d="M3 3l18 18M9.88 9.88A3 3 0 0012 15
                     a3 3 0 002.12-.88m2.681-2.681
@@ -283,10 +322,10 @@ class="toggle-password absolute right-3 top-3 cursor-pointer w-5 h-5 text-gray-6
                     a8.963 8.963 0 01-6.34-2.659
                     M6.623 6.623A8.963 8.963 0 013.458 12" />
             `;
-          } else {
-            input.type = "password";
-            // Update the SVG icon to show "eye" (password hidden)
-            icon.innerHTML = `
+                } else {
+                    input.type = "password";
+                    // Update the SVG icon to show "eye" (password hidden)
+                    icon.innerHTML = `
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                   d="M15 12a3 3 0 11-6 0 3 3 0 016 0z
                   M2.458 12C3.732 7.943 7.523 5 12 5
@@ -295,10 +334,82 @@ class="toggle-password absolute right-3 top-3 cursor-pointer w-5 h-5 text-gray-6
                   c-4.478 0-8.268-2.943-9.542-7z"
                   />
             `;
-          }
+                }
+            });
         });
-      });
     </script>
     <?php include "includes/script.php"; ?>
-  </body>
-</html>
\ No newline at end of file
+
+    <script>
+        $('#login_form').submit(function (e) {
+            e.preventDefault();
+
+            const formData = $(this).serialize();
+
+            $.ajax({
+                url: 'includes/login.php',
+                type: 'POST',
+                data: formData,
+                dataType: 'json',
+                success: function (response) {
+                    if (response.success) {
+                        toastr.success(response.message || "Login successful!");
+                        setTimeout(() => {
+                            window.location.href = "dashboard.php";
+                        }, 1200);
+                    } else {
+                        toastr.error(response.message || "Login failed. Please try again.");
+                    }
+                },
+                error: function (xhr, status, error) {
+                    console.error("AJAX Error:", error);
+                    console.log("Server response:", xhr.responseText);
+                    toastr.error("An error occurred: " + error);
+                }
+            });
+        });
+    </script>
+
+
+    <script>
+        $('#signup_form').submit(function (e) {
+            e.preventDefault();
+
+            const password = $('#signup-password').val();
+            const confirmPassword = $('#confirm-password').val();
+
+            if (password !== confirmPassword) {
+                toastr.error("Passwords do not match. Please try again.");
+                return;
+            }
+
+            const formData = $(this).serialize();
+
+            $.ajax({
+                url: 'includes/signup.php',
+                type: 'POST',
+                data: formData,
+                dataType: 'json',
+                success: function (response) {
+                    if (response.success) {
+                        toastr.success(response.message || "Signup successful!");
+                        setTimeout(() => {
+                            window.location.href = "index.php";
+                        }, 1500);
+                    } else {
+                        toastr.error(response.message || "Signup failed. Please try again.");
+                    }
+                },
+                error: function (xhr, status, error) {
+                    console.error("AJAX Error:", error);
+                    console.log("Server response:", xhr.responseText);
+                    toastr.error("An error occurred: " + error);
+                }
+            });
+        });
+
+    </script>
+
+</body>
+
+</html>
diff --git a/logout.php b/logout.php
index b3c5df4..c345a5d 100644
--- a/logout.php
+++ b/logout.php
@@ -1,6 +1,6 @@
 <?php
 session_start();
 session_destroy();
-header("location: home.php");
+header("location: index.php");
 
-?>
\ No newline at end of file
+?>
