diff --git a/.gitignore b/.gitignore
index 59e1fc7..603d4ff 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,5 @@
 # Ignore
 src/includes/error-logs.txt
 src/sales-prediction-algorithm/sales_prediction.json
-
-.phpunit.result.cache
+src/includes/charts/weekly_sales_data.json
+.phpunit.result.cache
\ No newline at end of file
diff --git a/src/accounts.php b/src/accounts.php
index 4f8bf14..411a67f 100644
--- a/src/accounts.php
+++ b/src/accounts.php
@@ -36,6 +36,16 @@
   <!--Site Icon-->
   <link rel="icon" href="images/sweet-avenue-logo.png" type="image/png" />
 
+    <!-- Bootstrap JavaScript -->
+    <script src="../vendor/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+    <!-- CDN Scripts -->
+    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
+    <script src="https://cdn.datatables.net/2.0.3/js/dataTables.js"></script>
+    <script src="https://cdn.datatables.net/2.0.3/js/dataTables.bootstrap5.js"></script>
+    <!-- Custom JavacScript -->
+    <script src="javascript/preloader.js" defer></script>
+    <script src="javascript/accounts.js" defer></script>
+
   <script>
     // This will be used to check if an email or username is already taken
     const takenEmails = <?php echo json_encode($emails); ?>;
@@ -287,17 +297,6 @@ class="btn fw-medium btn-medium-brown text-capitalize py-2 px-4">add account</bu
       </div>
     </div>
 
-
-    <!-- Bootstrap JavaScript -->
-    <script src="../vendor/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-    <!-- CDN Scripts -->
-    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
-    <script src="https://cdn.datatables.net/2.0.3/js/dataTables.js"></script>
-    <script src="https://cdn.datatables.net/2.0.3/js/dataTables.bootstrap5.js"></script>
-    <!-- Custom JavacScript -->
-    <script src="javascript/preloader.js"></script>
-    <script src="javascript/accounts.js"></script>
-
   </body>
 </html>
 <?php 
diff --git a/src/get-products.php b/src/get-products.php
index 19ed929..fceb5f7 100644
--- a/src/get-products.php
+++ b/src/get-products.php
@@ -66,14 +66,14 @@
                 echo '<span class="badge text-bg-carbon-grey rounded-1 text-wrap">' . $row['flavor'] . '</span><br> ';
             }
             echo '</div>';
-            echo '<div class="col pt-1 ps-4 pe-4">';
+            echo '<div class="col px-4">';
             echo '<img src="' . $image . '" alt="Product Image" class="pt-2 card-img-top rounded-circle">';
             echo '</div>';
             echo '<div class="pt-1 card-body">';
             echo '<div class="card-text text-capitalize">';
 
             echo '<div class="text-center text-carbon-grey text-truncate text-capitalize">';
-            echo '<span class="fw-medium " style="font-size: 15px;"> ' . $row['item_name'] . ' </span><br>';
+            echo '<span class="fw-medium font-14"> ' . $row['item_name'] . ' </span><br>';
             echo '<span class="fw-bold">' . $row['price'] . '</span>';
             
             echo '</div>';
@@ -106,14 +106,14 @@
                     echo '<span class="badge text-bg-carbon-grey rounded-1 text-wrap">' . $row['size'] . 'oz' . '</span><br> ';
                 }
             echo '</div>';
-            echo '<div class="col pt-1 ps-4 pe-4">';
+            echo '<div class="col px-4">';
             echo '<img src="' . $image . '" alt="Product Image" class="pt-2 card-img-top rounded-circle">';
             echo '</div>';
             echo '<div class="pt-1 card-body">';
             echo '<div class="card-text text-capitalize">';
 
             echo '<div class="text-center text-carbon-grey text-truncate text-capitalize">';
-            echo '<span class="fw-medium " style="font-size: 15px;"> ' . $row['item_name'] . ' </span><br>';
+            echo '<span class="fw-medium font-14"> ' . $row['item_name'] . ' </span><br>';
             echo '<span class="fw-bold">' . $row['price'] . '</span>';
             
             echo '</div>';
@@ -149,12 +149,12 @@
 </style>
 
 <!-- Modal for Product Variations -->
-<div class="modal fade" id="product" tabindex="-1" aria-labelledby="productName" aria-hidden="true">
+<div class="modal fade" id="product" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
     <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content">
             <form id="orderForm" method="post">
-                <div class="modal-header">
-                    <h1 class="modal-title fs-6 fw-semibold text-carbon-grey text-capitalize" id="productName"><!-- Product name will be loaded here --></h1>
+                <div class="modal-header bg-medium-brown">
+                    <h1 class="modal-title fs-6 fw-semibold text-light text-uppercase" id="productName"><!-- Product name will be loaded here --></h1>
                 </div>
                 <div class="modal-body" id="productVariation">
                     <input type="hidden" name="product_id" id="product_id">
@@ -188,7 +188,7 @@
                                     <path fill-rule="evenodd" d="M2 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11A.5.5 0 0 1 2 8"/>
                                 </svg>
                             </button>
-                            <input type="number" id="quantityInput" name="quantity" class="form-control text-center border border-carbon-grey bg-white text-carbon-grey fw-medium py-3" value="1" min="1">
+                            <input type="number" id="quantityInput" name="quantity" class="form-control text-center border border-carbon-grey bg-white text-carbon-grey fw-medium py-3 shadow-sm" value="1" min="1">
                             <button class="btn btn-lg btn-outline-carbon-grey input-group-text fw-bold py-3 px-5" type="button" id="quantityPlus">
                                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-lg" viewBox="0 0 16 16">
                                     <path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2"/>
@@ -198,7 +198,7 @@
                     </div>
                     <div class="col-md mb-2">
                         <div class="form-floating py-3">
-                            <input type="text" readonly class="form-control fw-bold fs-5 text-carbon-grey border border-carbon-grey bg-white" id="priceDisplay" name="price">
+                            <input type="text" readonly class="form-control fw-bold fs-5 text-carbon-grey border border-carbon-grey bg-white shadow-sm" id="priceDisplay" name="price">
                             <label for="priceDisplay" class="text-carbon-grey fw-medium fs-5">Price</label>
                         </div>
                     </div>
@@ -260,7 +260,7 @@
                             $('#servingOrTypeGroup').append('<button type="button" class="btn btn-sm btn-outline-product text-capitalize fw-semibold rounded-4">' + servingOrType + '</button>');
                         });
                     } else {
-                        $('#servingOrTypeGroup').append('<span class="text-carbon-grey font-12 fst-italic">No variations available</span>');
+                        $('#servingOrTypeGroup').append('<span class="text-carbon-grey font-13 fst-italic">No variations available</span>');
                     }
 
                     if (flavorOrSizeSet.size > 0) {
@@ -268,7 +268,7 @@
                             $('#flavorOrSizeGroup').append('<button type="button" class="btn btn-sm btn-outline-product text-capitalize fw-semibold rounded-4">' + flavorOrSize + '</button>');
                         });
                     } else {
-                        $('#flavorOrSizeGroup').append('<span class="text-carbon-grey font-12 fst-italic">No variations available</span>');
+                        $('#flavorOrSizeGroup').append('<span class="text-carbon-grey font-13 fst-italic">No variations available</span>');
                     }
 
                     $('#defaultServingOrType').val(defaultServingOrType);
diff --git a/src/includes/charts/weekly-sales.php b/src/includes/charts/weekly-sales.php
index b42569f..2b7852c 100644
--- a/src/includes/charts/weekly-sales.php
+++ b/src/includes/charts/weekly-sales.php
@@ -1,23 +1,22 @@
 <?php
 
 include_once str_replace('/', DIRECTORY_SEPARATOR, __DIR__ . '/../file-utilities.php');
+require_once FileUtils::normalizeFilePath(__DIR__ . '/../db-connector.php');
 include_once FileUtils::normalizeFilePath(__DIR__ . '/../error-reporting.php');
 include_once FileUtils::normalizeFilePath(__DIR__ . '/../default-timezone.php');
 
-$sales_data = array();
-$weekly_sales = 0;
+function fetchAndProcessSalesData($db) {
+  $prev_week_start = date('Y-m-d', strtotime('monday last week'));
+  $prev_week_end = date('Y-m-d', strtotime('sunday last week'));
 
-if(date('N') == 7) {
-
-  $prev_week_start = date('Y-m-d', strtotime('last Monday'));
-  $prev_week_end = date('Y-m-d', strtotime('last Saturday'));
-
-  // Fetching sales data from the database
   $sql = "SELECT DATE(timestamp) AS date, SUM(total_amount) AS total_sales 
           FROM transaction 
-          WHERE timestamp >= '$prev_week_start' AND timestamp <= '$prev_week_end'
+          WHERE timestamp >= ? AND timestamp <= ?
           GROUP BY DATE(timestamp)";
-  $result = $db->query($sql);
+  $stmt = $db->prepare($sql);
+  $stmt->bind_param('ss', $prev_week_start, $prev_week_end);
+  $stmt->execute();
+  $result = $stmt->get_result();
 
   $sales_data = array();
   $weekly_sales = 0;
@@ -25,23 +24,33 @@
   // Process the query result
   if ($result->num_rows > 0) {
       while($row = $result->fetch_assoc()) {
-          // Extract date and total sales from the row
           $date = $row['date'];
-          $total_sales = $row['total_sales'];
-          
-          // Update sales data for the corresponding day
+          $total_sales = floatval($row['total_sales']);
+
           $sales_data[] = [
               'date' => $date,
-              'total_sales' => floatval($total_sales)
+              'total_sales' => $total_sales
           ];
           $weekly_sales += $total_sales;
       }
   }
 
+  $stmt->close();
+
+  $json_sales_data = json_encode($sales_data); 
+  $json_file = __DIR__ . '/weekly_sales_data.json';
+  file_put_contents($json_file, $json_sales_data);
+
+  return $json_sales_data;
 }
 
-// Encode the data as JSON
-$json_sales_data = json_encode($sales_data); 
+// Check if today is monday
+if(date('N') == 1) {
+  $json_sales_data = fetchAndProcessSalesData($db);
+} else {
+  $json_file = __DIR__ . '/weekly_sales_data.json';
+  $json_sales_data = file_get_contents($json_file);
+}
 
 ?>
 
diff --git a/src/includes/charts/weekly_sales_data.json b/src/includes/charts/weekly_sales_data.json
new file mode 100644
index 0000000..ce01a23
--- /dev/null
+++ b/src/includes/charts/weekly_sales_data.json
@@ -0,0 +1 @@
+[{"date":"2024-06-24","total_sales":2800},{"date":"2024-06-25","total_sales":2100},{"date":"2024-06-26","total_sales":2710},{"date":"2024-06-27","total_sales":1500},{"date":"2024-06-28","total_sales":1600}]
\ No newline at end of file
diff --git a/src/includes/login-authenticator.php b/src/includes/login-authenticator.php
index 8e3d847..5364a1f 100644
--- a/src/includes/login-authenticator.php
+++ b/src/includes/login-authenticator.php
@@ -41,7 +41,7 @@
     }
     // If there is no user with the username, display this
     else {
-        $_SESSION['error_message'] = 'User with this username does not exist.';
+        $_SESSION['error_message'] = 'Username and password mismatched.';
         header("Location: ../login.php");
         exit();
     }
diff --git a/src/index.php b/src/index.php
index b076bfa..893a2a3 100644
--- a/src/index.php
+++ b/src/index.php
@@ -11,64 +11,40 @@
   exit();
 }
 
-// Get the first name of the logged-in user
-$sql = "SELECT first_name FROM user WHERE id = ?";
-$stmt = $db->prepare($sql);
-$stmt->bind_param('i', $_SESSION['id']);
-$stmt->execute();
-$result = $stmt->get_result();
-$row = $result->fetch_assoc();
-
-$user = $row['first_name'];
-$stmt->close();
-
-// Get total sales for today
 $today = date("Y-m-d");
-$sql = "SELECT SUM(total_amount) AS today_sale FROM transaction WHERE DATE(timestamp) = ?";
-$stmt = $db->prepare($sql);
-$stmt->bind_param('s', $today);
-$stmt->execute();
-$stmt->bind_result($today_sale);
-$stmt->fetch();
-$stmt->close();
 
-$sql = "SELECT COUNT(timestamp) AS today_order FROM transaction WHERE DATE(timestamp) = ?";
-$stmt = $db->prepare($sql);
-$stmt->bind_param('s', $today);
-$stmt->execute();
-$stmt->bind_result($order_today);
-$stmt->fetch();
-$stmt->close();
+$sql = "
+    SELECT 
+        SUM(CASE WHEN DATE(timestamp) = ? THEN total_amount ELSE 0 END) AS today_sale,
+        COUNT(CASE WHEN DATE(timestamp) = ? THEN 1 ELSE NULL END) AS today_order,
+        SUM(CASE WHEN YEAR(timestamp) = YEAR(CURRENT_DATE()) AND MONTH(timestamp) = MONTH(CURRENT_DATE()) AND DAY(timestamp) <= DAY(CURRENT_DATE()) THEN total_amount ELSE 0 END) AS monthly_sale
+    FROM transaction";
 
-$sql = "SELECT SUM(total_amount) AS monthly_sale FROM transaction WHERE YEAR(timestamp) = YEAR(CURRENT_DATE()) AND MONTH(timestamp) = MONTH(CURRENT_DATE()) AND DAY(timestamp) <= DAY(CURRENT_DATE())";
 $stmt = $db->prepare($sql);
+$stmt->bind_param('ss', $today, $today);
 $stmt->execute();
-$stmt->bind_result($monthly_sale);
+$stmt->bind_result($today_sale, $today_order, $monthly_sale);
 $stmt->fetch();
 $stmt->close();
 
+// Proper format and checking if value is not null
+$today_sale_formatted = ($today_sale !== NULL) ? number_format($today_sale, 2) : 0.00;
+$monthly_sale_formatted = ($monthly_sale !== NULL) ? number_format($monthly_sale, 2) : 0.00;
+$today_order_count = ($today_order !== NULL) ? $today_order : 0;
+
 $start_of_month = date('F 01');
 $current_day = date('F d, Y');
 $date_range = $start_of_month . ' - ' . $current_day;
 
-// Weekly Sale
-$current_day_of_week = date('N');
-
 // Calculate the start and end dates of the current week
-if ($current_day_of_week == 1) {
-    // If today is Monday, start from today (Monday) and end on Saturday
-    $start_of_week = date('Y-m-d');
-    $end_of_week = date('Y-m-d', strtotime('next Saturday'));
-} else {
-    // If today is not Monday, start from last Monday and end on next Saturday
-    $start_of_week = date('Y-m-d', strtotime('last Monday'));
-    $end_of_week = date('Y-m-d', strtotime('next Saturday'));
-}
+$start_of_week = date('Y-m-d', strtotime('last Monday', strtotime('next Sunday')));
+$end_of_week = date('Y-m-d', strtotime('next Saturday'));
 
-// SQL query to get the sum of total_amount for the current week
-$sql = "SELECT SUM(total_amount) AS weekly_sale 
-        FROM transaction 
-        WHERE timestamp >= ? AND timestamp <= ?";
+// Get the sum of total_amount for the current week
+$sql = "
+    SELECT SUM(total_amount) AS weekly_sale 
+    FROM transaction 
+    WHERE timestamp >= ? AND timestamp <= ?";
 $stmt = $db->prepare($sql);
 $stmt->bind_param("ss", $start_of_week, $end_of_week);
 $stmt->execute();
@@ -76,6 +52,8 @@
 $stmt->fetch();
 $stmt->close();
 
+$weekly_sale_formatted = ($weekly_sale !== NULL) ? number_format($weekly_sale, 2) : 0.00;
+
 $start_of_week_formatted = date('F d', strtotime($start_of_week));
 $end_of_week_formatted = date('F d, Y', strtotime($end_of_week));
 $week_duration = $start_of_week_formatted . ' - ' . $end_of_week_formatted;
@@ -103,9 +81,27 @@
       </style>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.13/jspdf.plugin.autotable.min.js"></script>
+    
+    <!-- Bootstrap JavaScript -->
+    <script src="../vendor/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+    <!-- jQuery -->
+    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
 
+    <!-- CDN  -->
+    <script src="https://cdn.datatables.net/2.0.3/js/dataTables.js"></script>
+    <script src="https://cdn.datatables.net/2.0.3/js/dataTables.bootstrap5.js"></script>
+    <script src="https://cdn.datatables.net/buttons/3.0.2/js/dataTables.buttons.js"></script>
+    <script src="https://cdn.datatables.net/buttons/3.0.2/js/buttons.dataTables.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
+    <script src="https://cdn.datatables.net/buttons/3.0.2/js/buttons.html5.min.js"></script>
+    <script src="https://cdn.datatables.net/buttons/3.0.2/js/buttons.print.min.js"></script>
 
-
+    <!-- Custom JavaScript -->
+    <script src="javascript/index.js" defer></script>
+    <script src="javascript/preloader.js" defer></script>
+    <script src="javascript/reports.js" defer></script>
   </head>
 
   <body class="bg-gainsboro">
@@ -132,7 +128,7 @@
                   <div class="col-md-auto">
                     <div class="mx-3">
                       <div class="fw-semibold text-carbon-grey fs-3 pb-1 pt-2">
-                        Hello there, <span class="text-medium-brown fw-bold text-capitalize"><?php echo htmlspecialchars($user) . '!'; ?></span>
+                        Hello there, <span class="text-medium-brown fw-bold text-capitalize"><?php echo htmlspecialchars($current_user['first_name']) . '!'; ?></span>
                       </div>
                       <div class="text-carbon-grey fw-medium">Here's what's happening with the store.</div>
                     </div>                    
@@ -167,14 +163,7 @@
                     <span class="fw-semibold fs-5">Sales Today</span>
                     <div class="font-12"><?php echo htmlspecialchars($current_day); ?></div>
                     <div class="pb-4 pt-2 d-flex justify-content-center fw-semibold" style="font-size: 31px;">
-                      <?php
-                      if ($today_sale !== NULL) {
-                        echo number_format($today_sale, 2); 
-                      }
-                      else {
-                        echo "0.00";
-                      } 
-                      ?>
+                      <?php echo htmlspecialchars($today_sale_formatted); ?>
                     </div> 
                   </div>
                 </div>
@@ -186,14 +175,7 @@
                     <span class="fw-semibold fs-5">Orders Today</span>
                     <div class="font-12"><?php echo htmlspecialchars($current_day); ?></div>
                     <div class="pb-4 pt-2 d-flex justify-content-center fw-semibold" style="font-size: 31px;">
-                      <?php 
-                      if ($order_today !== NULL) {
-                        echo $order_today; 
-                      }
-                      else {
-                        echo "No order.";
-                      }
-                      ?>
+                      <?php echo htmlspecialchars($today_order_count); ?>
                     </div> 
                   </div>
                 </div>
@@ -207,14 +189,7 @@
                     <span class="fw-semibold fs-5">Weekly Sales</span>
                     <div class="font-12"><?php echo htmlspecialchars($week_duration); ?></div>
                     <div class="pb-4 pt-2 d-flex justify-content-center fw-semibold" style="font-size: 31px;">
-                      <?php
-                      if ($weekly_sale !== NULL) {
-                        echo number_format($weekly_sale, 2); 
-                      }
-                      else {
-                        echo "0.00";
-                      }
-                      ?>
+                      <?php echo htmlspecialchars($weekly_sale_formatted); ?>
                     </div> 
                   </div>
               </div>
@@ -226,14 +201,7 @@
                     <span class="fw-semibold fs-5">Monthly Sales</span>
                     <div class="font-12"><?php echo htmlspecialchars($date_range); ?></div>
                     <div class="pb-4 pt-2 d-flex justify-content-center fw-semibold" style="font-size: 31px;">
-                      <?php
-                      if ($monthly_sale !== NULL) {
-                        echo number_format($monthly_sale, 2);
-                      } 
-                      else {
-                          echo "0.00";
-                      }
-                      ?>
+                      <?php echo htmlspecialchars($monthly_sale_formatted) ?>
                     </div> 
                   </div>
                 </div>
@@ -246,7 +214,7 @@
               <div class="col-md-12 bg-white mb-3 rounded-3 p-4" style="box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4); height: 410px;"> <!-- Added box-shadow style for drop shadow -->
                   <!-- Larger Container 3 -->
                   <div class="p-2 fw-semibold text-carbon-grey">
-                    WEEKLY SALE
+                    FROM PREVIOUS WEEK
                   </div>
                   <div id="weeklySales"></div>
               </div>
@@ -317,7 +285,15 @@
                                               </td>
                                             </tr>";
                                   }
-                                  $jsonTopPickData = json_encode($topPickData);
+                                  // Fetch the all the items from the database
+                                  $sql = "SELECT antecedent, consequent FROM frequent_items";
+                                  $result = $db->query($sql);
+
+                                  $topPickDatas = [];
+                                  if ($result->num_rows > 0) {
+                                    while ($row = $result->fetch_assoc()) {
+                                      $topPickDatas[] = [addslashes($row["antecedent"]), '+', addslashes($row["consequent"])];}}
+                                  $jsonTopPickData = json_encode($topPickDatas);
                               ?>
                           </tbody>
                       </table>
@@ -344,34 +320,18 @@
     </div>
     </div>
 
-    <!-- Data used for generating reports -->
     <script>
+      // Data used for generating reports
       const user = <?php echo json_encode($full_name); ?>;
-      const todaySale = <?php echo json_encode(number_format($today_sale, 2)); ?>;
-      const orderToday = <?php echo json_encode($order_today); ?>;
-      const weeklySale = <?php echo json_encode(number_format($weekly_sale, 2)); ?>;
+      const todaySale = <?php echo json_encode($today_sale_formatted); ?>;
+      const orderToday = <?php echo json_encode($today_order); ?>;
+      const weeklySale = <?php echo json_encode($weekly_sale_formatted); ?>;
       const weekDuration = <?php echo json_encode($week_duration); ?>;
-      const monthlySale = <?php echo json_encode(number_format($monthly_sale, 2)); ?>;
+      const monthlySale = <?php echo json_encode($monthly_sale_formatted); ?>;
       const dateRange = <?php echo json_encode($date_range); ?>;
       const weeklySalesData = <?php echo $json_sales_data; ?>;
       const topPickData = <?php echo $jsonTopPickData; ?>;
     </script>
 
-    <!--Bootstrap JavaScript-->
-    <script src="../vendor/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="javascript/index.js"></script>
-    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
-    <script src="https://cdn.datatables.net/2.0.3/js/dataTables.js"></script>
-    <script src="https://cdn.datatables.net/2.0.3/js/dataTables.bootstrap5.js"></script>
-    <script src="https://cdn.datatables.net/buttons/3.0.2/js/dataTables.buttons.js"></script>
-    <script src="https://cdn.datatables.net/buttons/3.0.2/js/buttons.dataTables.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
-    <script src="https://cdn.datatables.net/buttons/3.0.2/js/buttons.html5.min.js"></script>
-    <script src="https://cdn.datatables.net/buttons/3.0.2/js/buttons.print.min.js"></script>
-    <script src="javascript/preloader.js"></script>
-    <script src="javascript/reports.js"></script>
-
   </body>
 </html>
\ No newline at end of file
diff --git a/src/javascript/accounts.js b/src/javascript/accounts.js
index 6d58963..a866192 100644
--- a/src/javascript/accounts.js
+++ b/src/javascript/accounts.js
@@ -82,13 +82,52 @@ $(document).ready(function () {
     $(input).val(value);
   };
 
-  $("#lastName, #firstName, #middleName").on("input", function (event) {
-    preventLeadingSpace(event);
-  });
+  function truncateExceedingCharacters() {
+    let lastName = $("#lastName").val();
+    let firstName = $("#firstName").val();
+    let middleName = $("#middleName").val();
+    let username = $("#username").val();
+    let email = $("#email").val();
+    let password = $("#password").val();
+
+    if (lastName.length > 100) {
+      lastName = lastName.slice(0, 100);
+      $("#lastName").val(lastName);
+    }
 
-  $("#username, #email, #password").on("input", function (event) {
-    preventSpace(event);
-  });
+    if (firstName.length > 100) {
+      firstName = firstName.slice(0, 100);
+      $("#firstName").val(firstName);
+    }
+
+    if (middleName.length > 100) {
+      middleName = middleName.slice(0, 100);
+      $("#middleName").val(middleName);
+    }
+
+    if (username.length > 50) {
+      username = username.slice(0, 50);
+      $("#username").val(username);
+    }
+
+    if (email.length > 100) {
+      email = email.slice(0, 100);
+      $("#email").val(email);
+    }
+
+    if (password.length > 20) {
+      password = password.slice(0, 20);
+      $("#password").val(password);
+    }
+  }
+
+  $("#lastName, #firstName, #middleName, #username, #email, #password").on(
+    "input",
+    function (event) {
+      preventLeadingSpace(event);
+      truncateExceedingCharacters();
+    }
+  );
 
   // Function to check if all input fields are valid
   function areAllInputsValid() {
@@ -117,8 +156,8 @@ $(document).ready(function () {
     regex,
     errorMessage,
     errorContainer,
-    validMessage,
-    validContainer,
+    // validMessage,
+    // validContainer,
     isTaken = false,
     takenMessage = "",
     takenErrorContainer = null
@@ -139,19 +178,19 @@ $(document).ready(function () {
       input.classList.remove("was-validated");
       input.classList.remove("is-valid");
       errorContainer.textContent = errorMessage;
-      validContainer.textContent = "";
+      // validContainer.textContent = "";
     } else if (isTaken) {
       input.classList.add("is-invalid");
       input.classList.remove("was-validated");
       input.classList.remove("is-valid");
       takenErrorContainer.textContent = takenMessage;
-      validContainer.textContent = "";
+      // validContainer.textContent = "";
     } else {
       input.classList.remove("is-invalid");
       input.classList.add("is-valid");
       input.classList.remove("was-validated");
       errorContainer.textContent = "";
-      validContainer.textContent = validMessage;
+      // validContainer.textContent = validMessage;
     }
 
     // Check if all inputs are valid and enable/disable button accordingly
@@ -169,9 +208,9 @@ $(document).ready(function () {
       this,
       /^(?!\s)[^\d]+$/,
       "Please use a valid last name.",
-      document.getElementById("errorLastName"),
-      "Last name looks good!",
-      document.getElementById("validLastName")
+      document.getElementById("errorLastName")
+      // "Last name looks good!",
+      // document.getElementById("validLastName")
     );
   });
 
@@ -180,9 +219,9 @@ $(document).ready(function () {
       this,
       /^(?!\s)[^\d]+$/,
       "Please use a valid first name.",
-      document.getElementById("errorFirstName"),
-      "First name looks good!",
-      document.getElementById("validFirstName")
+      document.getElementById("errorFirstName")
+      // "First name looks good!",
+      // document.getElementById("validFirstName")
     );
   });
 
@@ -203,9 +242,9 @@ $(document).ready(function () {
         this,
         /^(?!\s)[^\d]+$/,
         "Please use a valid middle name.",
-        document.getElementById("errorMiddleName"),
-        "Middle name looks good!",
-        document.getElementById("validMiddleName")
+        document.getElementById("errorMiddleName")
+        // "Middle name looks good!",
+        // document.getElementById("validMiddleName")
       );
     }
   });
@@ -216,10 +255,10 @@ $(document).ready(function () {
     validateInput(
       this,
       /^[^\s]{1,50}$/,
-      "Please provide a valid username.",
+      "Please provide a valid username (50 characters max).",
       document.getElementById("errorUsername"),
-      "Username looks good!",
-      document.getElementById("validUsername"),
+      // "Username looks good!",
+      // document.getElementById("validUsername"),
       isUsernameTaken,
       "This username is already taken.",
       document.getElementById("errorUsername")
@@ -234,8 +273,8 @@ $(document).ready(function () {
       /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/,
       "Please provide a valid email address.",
       document.getElementById("errorEmailAddress"),
-      "Email address looks good!",
-      document.getElementById("validEmailAddress"),
+      // "Email address looks good!",
+      // document.getElementById("validEmailAddress"),
       isEmailTaken,
       "This email address is already taken.",
       document.getElementById("errorEmailAddress")
@@ -247,9 +286,9 @@ $(document).ready(function () {
       this,
       /^[^\s]{8,20}$/,
       "Password must range 8-20 characters.",
-      document.getElementById("errorPassword"),
-      "Password looks good!",
-      document.getElementById("validPassword")
+      document.getElementById("errorPassword")
+      // "Password looks good!",
+      // document.getElementById("validPassword")
     );
   });
 
diff --git a/src/javascript/login.js b/src/javascript/login.js
index 8a0c58a..88751e0 100644
--- a/src/javascript/login.js
+++ b/src/javascript/login.js
@@ -1,5 +1,5 @@
 (() => {
-  ("use strict");
+  "use strict";
 
   // Fetch all the forms we want to apply custom Bootstrap validation styles to
   const forms = document.querySelectorAll(".needs-validation");
@@ -37,11 +37,35 @@ function togglePassword() {
 }
 
 document.addEventListener("DOMContentLoaded", function () {
-  const sendButton = document.querySelector("#sendEmailBtn");
-  const emailInput = document.querySelector("#email");
+  const sendButton = $("#sendEmailBtn");
+  const emailInput = $("#email");
+  const usernameInput = $("#username");
+  const passwordInput = $("#password");
+
+  function truncateExceedingCharacters() {
+    let emailValue = emailInput.val();
+    let usernameValue = usernameInput.val();
+    let passwordValue = passwordInput.val();
+
+    if (emailValue.length > 100) {
+      emailValue = emailValue.slice(0, 100);
+      emailInput.val(emailValue);
+    }
+
+    if (usernameValue.length > 50) {
+      usernameValue = usernameValue.slice(0, 50);
+      usernameInput.val(usernameValue);
+    }
+
+    if (passwordValue.length > 20) {
+      passwordValue = passwordValue.slice(0, 20);
+      passwordInput.val(passwordValue);
+    }
+  }
 
   $("#username, #password, #email").on("input", function (event) {
     preventSpaces(event);
+    truncateExceedingCharacters();
   });
 
   // Clear server-side error message
@@ -67,10 +91,10 @@ document.addEventListener("DOMContentLoaded", function () {
   });
 
   // Initially disable the Send button
-  sendButton.disabled = true;
+  sendButton.prop("disabled", true);
 
   const validateEmail = () => {
-    const email = emailInput.value;
+    const email = emailInput.val();
     const isExistingEmail = existingEmails.includes(email);
     // Email format validation
     const isValid = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/.test(
@@ -78,49 +102,42 @@ document.addEventListener("DOMContentLoaded", function () {
     );
 
     if (!isValid) {
-      emailInput.classList.add("is-invalid");
-      emailInput.classList.remove("was-validated");
-      emailInput.classList.remove("is-valid");
-      document.querySelector("#email-error").textContent =
-        "Please provide a valid email address.";
-      document.querySelector("#email-valid").textContent = "";
+      emailInput.addClass("is-invalid").removeClass("was-validated is-valid");
+      $("#email-error").text("Please provide a valid email address.");
+      $("#email-valid").text("");
     } else if (!isExistingEmail) {
-      emailInput.classList.add("is-invalid");
-      emailInput.classList.remove("was-validated");
-      emailInput.classList.remove("is-valid");
-      document.querySelector("#email-error").textContent =
-        "User with this email cannot be found.";
-      document.querySelector("#email-valid").textContent = "";
+      emailInput.addClass("is-invalid").removeClass("was-validated is-valid");
+      $("#email-error").text("We couldn't find your email address.");
+      $("#email-valid").text("");
     } else {
-      emailInput.classList.remove("is-invalid");
-      emailInput.classList.add("is-valid");
-      emailInput.classList.add("was-validated");
-      document.querySelector("#email-error").textContent = "";
-      document.querySelector("#email-valid").textContent = "Looks right!";
+      emailInput.removeClass("is-invalid").addClass("is-valid was-validated");
+      $("#email-error").text("");
+      // $("#email-valid").text("Looks right!");
     }
 
-    sendButton.disabled = !isValid || !isExistingEmail;
+    sendButton.prop("disabled", !isValid || !isExistingEmail);
   };
 
   // Validate the email input on input and change events
-  emailInput.addEventListener("input", validateEmail);
-  emailInput.addEventListener("change", validateEmail);
+  emailInput.on("input change", validateEmail);
 
   // Password Reset Link
   $("#sendEmailBtn").click(function (event) {
     event.preventDefault();
-    const email = $("#email").val();
+    const email = emailInput.val();
     if (!/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/.test(email)) {
       // Basic email format validation
-      const emailError = document.querySelector("#email-error");
-      emailError.textContent = "Please provide a valid email address.";
-      emailInput.classList.add("is-invalid");
+      $("#email-error").text("Please provide a valid email address.");
+      emailInput.addClass("is-invalid");
       return;
     }
 
     // Disable the button while the request is being processed
-    sendButton.disabled = true;
-    sendButton.innerHTML = `<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>Sending...`;
+    sendButton
+      .prop("disabled", true)
+      .html(
+        `<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>Sending...`
+      );
 
     $.ajax({
       url: "includes/send-password-reset.php",
@@ -140,10 +157,8 @@ document.addEventListener("DOMContentLoaded", function () {
             location.reload();
           });
         } else {
-          const emailError = document.querySelector("#email-error");
-          emailError.textContent = response.message;
-          emailInput.classList.remove("is-valid");
-          emailInput.classList.add("is-invalid");
+          $("#email-error").text(response.message);
+          emailInput.removeClass("is-valid").addClass("is-invalid");
         }
       },
       error: function (xhr, status, error) {
@@ -151,8 +166,7 @@ document.addEventListener("DOMContentLoaded", function () {
       },
       complete: function () {
         // Reset the button content and enable it after the request is complete (whether success or error)
-        sendButton.innerHTML = "Send Link";
-        sendButton.disabled = false;
+        sendButton.html("Send Link").prop("disabled", false);
       },
     });
   });
diff --git a/src/login.php b/src/login.php
index 87d78c5..9a02d44 100644
--- a/src/login.php
+++ b/src/login.php
@@ -44,6 +44,13 @@
     <!--Site Icon-->
     <link rel="icon" href="images/sweet-avenue-logo.png" type="image/png"/>
 
+    <script src="../vendor/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+    <!-- Custom JavaScript -->
+    <script src="javascript/login.js" defer></script>
+    <script src="javascript/preloader.js" defer></script>
+
     <script>
         const existingEmails = <?php echo json_encode($emails); ?>;
     </script>
@@ -86,7 +93,7 @@
 
     <div class="container-fluid position-absolute top-50 start-50 translate-middle">
         <div class="row justify-content-center align-items-center">
-            <div class="col-sm-10 col-md-7 col-lg-4">
+            <div class="col-sm-10 col-md-7 col-lg-5 col-xl-4">
                 <div class="text-center login-form-gradient shadow-lg">
                     <div class="d-flex align-items-center justify-content-center">
                         <!-- Shop Logo and Name -->
@@ -154,13 +161,6 @@
             </div>
         </div>
     </div>
-    
-    <script src="../vendor/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
-    <!-- Custom JavaScript -->
-    <script src="javascript/login.js"></script>
-    <script src="javascript/preloader.js"></script>
 
 </body>
 
diff --git a/src/sales-prediction-algorithm/regression-model.py b/src/sales-prediction-algorithm/regression-model.py
index 8f823b2..4f68a74 100644
--- a/src/sales-prediction-algorithm/regression-model.py
+++ b/src/sales-prediction-algorithm/regression-model.py
@@ -135,16 +135,16 @@ def main():
     output_directory = 'src/sales-prediction-algorithm/'
     store_predictions(next_week_sales_pred, next_week_timestamps, output_directory)
     
-    # # Calculate Absolute Percentage Error (APE)
-    # ape = np.abs((regressor.predict(X_test) - y_test.values) / y_test.values) * 100
+    # Calculate Absolute Percentage Error (APE)
+    ape = np.abs((regressor.predict(X_test) - y_test.values) / y_test.values) * 100
     
-    # # Format MAPE to two decimal points only
-    # mape = np.mean(ape)
+    # Format MAPE to two decimal points only
+    mape = np.mean(ape)
     
-    # print(f"Mean Absolute Error of the model is : {metrics.mean_absolute_error(y_test, regressor.predict(X_test))}")
-    # print(f"Mean Squared Error of the model is : {metrics.mean_squared_error(y_test, regressor.predict(X_test))}") 
-    # print(f"Root Mean Squared Error of the model is : {np.sqrt(metrics.mean_squared_error(y_test, regressor.predict(X_test)))}") 
-    # print(f"Mean Absolute Percentage Error of the model is : {mape: .2f}%") 
+    print(f"Mean Absolute Error of the model is : {metrics.mean_absolute_error(y_test, regressor.predict(X_test))}")
+    print(f"Mean Squared Error of the model is : {metrics.mean_squared_error(y_test, regressor.predict(X_test))}") 
+    print(f"Root Mean Squared Error of the model is : {np.sqrt(metrics.mean_squared_error(y_test, regressor.predict(X_test)))}") 
+    print(f"Mean Absolute Percentage Error of the model is : {mape: .2f}%") 
     
     # # Visualising the Training and Testing set results
     # plt.scatter(X_train, y_train, color='green', label='Training points')
diff --git a/src/sales.php b/src/sales.php
index c8e8e45..e9a396f 100644
--- a/src/sales.php
+++ b/src/sales.php
@@ -165,7 +165,7 @@
 
 <!-- Sale Details Modal -->
 <div class="modal fade" id="saleDetailsModal" tabindex="-1" aria-labelledby="saleDetailsModalLabel" aria-hidden="true">
-    <div class="modal-dialog modal-dialog-centered modal-md">
+    <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title" id="saleDetailsModalLabel">Sale Details</h5>