diff --git a/src/delete-sale.php b/src/delete-sale.php
new file mode 100644
index 00000000..484f7508
--- /dev/null
+++ b/src/delete-sale.php
@@ -0,0 +1,26 @@
+<?php
+// Include the database connection file
+require_once 'includes/db-connector.php';
+// Check if account IDs are provided
+if (isset($_POST['saleIds']) && is_array($_POST['saleIds'])) {
+    // Get the account IDs from the POST data
+    $saleIds = $_POST['saleIds'];
+
+    // Prepare and execute the SQL query to delete selected accounts
+    $sql = "DELETE FROM user WHERE id IN (" . implode(',', array_fill(0, count($saleIds), '?')) . ")";
+    $sql = "DELETE FROM transaction WHERE id IN (" . implode(',', array_fill(0, count($saleIds), '?')) . ")";
+    $stmt = $db->prepare($sql);
+    $types = str_repeat('i', count($saleIds));
+    $stmt->bind_param($types, ...$saleIds);
+    if ($stmt->execute()) {
+        // If the deletion is successful, return a success response
+        echo 'success';
+    } else {
+        // If an error occurs, return an error response
+        echo 'error';
+    }
+} else {
+    // If account IDs are not provided, return an error response
+    echo 'error';
+}
+?>
\ No newline at end of file
diff --git a/src/sales.php b/src/sales.php
index b78aafe9..dd5713b4 100644
--- a/src/sales.php
+++ b/src/sales.php
@@ -21,6 +21,7 @@
     <link rel="stylesheet" href="https://cdn.datatables.net/2.0.3/css/dataTables.bootstrap5.css">
     <!--Site Icon-->
     <link rel="icon" href="images/sweet-avenue-logo.png" type="image/png"/>
+
 </head>
   
   <body class="bg-timberwolf">
@@ -48,12 +49,11 @@
                           <div class="col-md-4 text-center">
                             <br>
                             <div class="container p-2">
-                              <button id="selectAll"  class="btn btn-tiger-orange text-white">Select All</button>
                               <button id="deselectAll" style="display: none; cursor: pointer;"   class="btn btn-tiger-orange text-white">Deselect All</button>
-                              <button type="button" class="btn btn-tiger-orange text-white" style="cursor: pointer;"
-                              onclick="viewSelected()">View</button>
-                              <button type="button" class="btn btn-tiger-orange text-white" style="cursor: pointer;"
-                              onclick="confirmDelete()">Delete</button>
+                              <button type="button" class="btn btn-carbon-grey fw-semibold px-3 py-2 view-sale"
+                              >View</button>
+                              <button class="btn btn-danger fw-semibold px-3 py-2 delete-sale"
+                                data-sale-id="<?php echo $row['id']; ?>">Delete</button>
                             </div>
                           </div>
                         </div>
@@ -62,6 +62,7 @@
                       <table id="example" class="table">
                           <thead>
                               <tr>
+                                  <th></th>
                                   <th>Date</th>
                                   <th>Time</th>
                                   <th>Processed by</th>
@@ -83,7 +84,8 @@
 
                           while($row = $result->fetch_assoc()) {
                               echo '
-                              <tr>
+                              <tr data-id="'.$row['id'].'" class="selectable">
+                                  <td><input type="checkbox" class="sale-checkbox" data-sale-id="'.$row['id'].'"></td>
                                   <td>'.$row['transaction_date'].'</td>
                                   <td>'.$row['transaction_time'].'</td>
                                   <td>'.$row['full_name'].'</td>
@@ -97,7 +99,7 @@
                           <tfoot>
                             <tr>
                                 <td colspan="3"><strong>Total Sales:</strong></td>
-                                <td colspan="5"><strong>1000.00</strong></td> 
+                                <td colspan="5"><strong>0.00</strong></td> 
                             </tr>
                         </tfoot>
                       </table>
@@ -109,44 +111,27 @@
           </div>
         </div>   
       </div>
-    </div>
-    
-
-    <!-- Modal -->
-  <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
-    <div class="modal-dialog">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h1 class="modal-title fs-5" id="staticBackdropLabel">Sale Details</h1>
-        </div>
-        <div class="modal-body">
-          <!-- Modal body content -->
-        </div>
-        <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+    </div> 
+
+    <div class="modal fade" id="deleteConfirmationModal" tabindex="-1" aria-labelledby="deleteConfirmationModalLabel"
+      aria-hidden="true">
+      <div class="modal-dialog">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" id="deleteConfirmationModalLabel">Confirmation</h5>
+          </div>
+          <div class="modal-body">
+            Are you sure you want to delete this sale permanently?
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+            <button type="button" class="btn btn-tiger-orange text-white delete-selected-sales"
+              id="confirmDeleteBtn">Continue</button>
+            <input type="hidden" id="saleIdToDelete">
+          </div>
         </div>
       </div>
     </div>
-  </div>
-
-
-<!-- Confirmation Modal -->
-<div class="modal fade" id="deleteConfirmationModal" tabindex="-1" aria-labelledby="deleteConfirmationModalLabel" aria-hidden="true">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 class="modal-title" id="deleteConfirmationModalLabel">Confirm Deletion</h5>
-      </div>
-      <div class="modal-body">
-        Are you sure you want to delete the sales permanently?
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
-        <button type="button" class="btn btn-tiger-orange text-white" onclick="deleteSelectedRows()">Continue</button>
-      </div>
-    </div>
-  </div>
-</div>
 
 <!-- Success Modal -->
 <div class="modal fade" id="successModal" tabindex="-1" aria-labelledby="successModalLabel" aria-hidden="true">
@@ -165,6 +150,31 @@
   </div>
 </div>
 
+<!-- Sale Details Modal -->
+<div class="modal fade" id="saleDetailsModal" tabindex="-1" aria-labelledby="saleDetailsModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-md">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="saleDetailsModalLabel">Sale Details</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <!-- Sale details will be populated here -->
+                <div id="saleDetailsContent">
+                    <!-- Sale details will be dynamically populated here -->
+                    <p><strong>Date:</strong> <span id="saleDate"></span></p>
+                    <p><strong>Time:</strong> <span id="saleTime"></span></p>
+                    <p><strong>Processed By:</strong> <span id="processedBy"></span></p>
+                    <p><strong>Total:</strong> <span id="saleTotal"></span></p>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+            </div>
+        </div>
+    </div>
+</div>
+
 
 
 
@@ -173,118 +183,166 @@
     <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="Select_Deselect.js"></script>
+    
 
     <script>
       new DataTable('#example', {
         responsive: true
       });
-  
-      function viewSelected() {
-  // Get all selected rows
-  var selectedRows = $('#example').DataTable().rows('.selected').data();
-  // Get the modal body element
-  var modalBody = document.querySelector('.modal-body');
-  
-  // Clear previous content
-  modalBody.innerHTML = '';
+    </script>
+    <!-- Deleting of Sales -->
+    <script>
+        $(document).ready(function() {
+            // Disable delete button by default
+            $('.delete-sale').prop('disabled', true);
+
+            // Add event listener to table rows for row selection
+            $('.selectable').click(function(event) {
+                // Check if the click occurred on the checkbox
+                if (!$(event.target).is('input[type="checkbox"]')) {
+                    // Toggle checkbox when clicking anywhere on the row (except the checkbox)
+                    $(this).find('.sale-checkbox').prop('checked', !$(this).find('.sale-checkbox').prop('checked'));
+                }
+                // Check if at least one checkbox is checked
+                var anyChecked = $('.sale-checkbox:checked').length > 0;
+                // Enable or disable the delete button based on checkbox status
+                $('.delete-sale').prop('disabled', !anyChecked);
+            });
+
+
+            // Add event listener to delete buttons
+            $('.delete-sale').click(function() {
+                // Show the confirmation modal
+                $('#deleteConfirmationModal').modal('show');
+                // Set the data-account-id attribute of the continue button in the modal
+                $('#confirmDeleteBtn').attr('data-sale-id', $(this).data('sale-id'));
+            });
+
+
+            // Function to handle single account deletion
+            $('#confirmDeleteBtn').click(function() {
+                var saleId = $('#deleteConfirmationModal').data('sale-id');
+
+                // Send an AJAX request to delete the selected account
+                $.ajax({
+                    url: 'delete-sale.php',
+                    method: 'POST',
+                    data: {saleIds: [saleId]},
+                    success: function(response) {
+                        if (response === 'success') {
+                            // Hide the confirmation modal
+                            $('#deleteConfirmationModal').modal('hide');
+                            // Show the success modal
+                            $('#successModal').modal('show');
+                            // Remove the deleted row from the table
+                            $('tr[data-id="' + saleId + '"]').remove();
+                        }
+                    },
+                    error: function() {
+                        alert('Failed to delete the sale. Please try again later.');
+                    }
+                });
+            });
+
+            // Function to handle batch deletion
+            $('.delete-selected-sales').click(function() {
+                var selectedSales = [];
+                // Iterate over each checked checkbox
+                $('.sale-checkbox:checked').each(function() {
+                    selectedSales.push($(this).data('sale-id'));
+                });
+
+                // Send an AJAX request to delete the selected accounts
+                $.ajax({
+                    url: 'delete-sale.php',
+                    method: 'POST',
+                    data: {saleIds: selectedSales},
+                    success: function(response) {
+                        if (response === 'success') {
+                            // Hide the confirmation modal
+                            $('#deleteConfirmationModal').modal('hide');
+                            // Show the success modal
+                            $('#successModal').modal('show');
+                            // Remove the deleted rows from the table
+                            selectedSales.forEach(function(saleId) {
+                                $('tr[data-id="' + saleId + '"]').remove();
+                            });
+                        } else {
+                            alert('Failed to delete the selected sales.');
+                        }
+                    },
+                    error: function() {
+                        alert('Failed to delete the selected sales. Please try again later.');
+                    }
+                });
+            });
+        });
+    </script>
 
-  // Check if there are no selected rows
-  if (selectedRows.length === 0) {
-    // If no rows are selected, display a message in the modal
-    modalBody.innerText = "No sales selected.";
-  } else {
-    // Loop through selected rows and populate modal body
-    selectedRows.each(function(rowData, index) {
-      // Create a div for each row
-      var rowDiv = document.createElement('div');
-
-      // Create elements for each piece of data
-      var dateParagraph = document.createElement('p');
-      var timeParagraph = document.createElement('p');
-      var processedByParagraph = document.createElement('p');
-      var totalParagraph = document.createElement('p');
-
-      // Set the inner text of the paragraphs to the row data
-      dateParagraph.innerText = "Date: " + rowData[0];
-      timeParagraph.innerText = "Time: " + rowData[1];
-      processedByParagraph.innerText = "Processed by: " + rowData[2];
-      totalParagraph.innerText = "Total: " + rowData[3];
-
-      // Append the paragraphs to the row div
-      rowDiv.appendChild(dateParagraph);
-      rowDiv.appendChild(timeParagraph);
-      rowDiv.appendChild(processedByParagraph);
-      rowDiv.appendChild(totalParagraph);
-
-      // Append the row div to the modal body
-      modalBody.appendChild(rowDiv);
-
-      // Add a horizontal line after each row except for the last one
-      if (index < selectedRows.length - 1) {
-        modalBody.appendChild(document.createElement('hr'));
-      }
+<script>
+    $(document).ready(function() {
+        // Disable view button by default
+        $('.view-sale').prop('disabled', true);
+
+        // Function to enable or disable the "View" button based on selection
+        function updateViewButton() {
+            var anyChecked = $('.sale-checkbox:checked').length > 0;
+            $('.view-sale').prop('disabled', !anyChecked);
+        }
+
+        // Add event listener to table rows for row selection
+        $('.selectable').click(function(event) {
+            if (!$(event.target).is('input[type="checkbox"]')) {
+                $(this).find('.sale-checkbox').prop('checked', !$(this).find('.sale-checkbox').prop('checked'));
+            }
+            updateViewButton(); // Update button state
+        });
+
+        // Add event listener to checkboxes for selection
+        $('.sale-checkbox').change(function() {
+            updateViewButton(); // Update button state
+        });
+
+        // Function to handle "View" button click
+        $('.view-sale').click(function() {
+            var selectedSales = []; // Array to store selected sale IDs
+            $('.sale-checkbox:checked').each(function() {
+                selectedSales.push($(this).attr('data-sale-id')); // Push the sale ID of each checked checkbox into the array
+            });
+
+            if (selectedSales.length > 0) {
+                // Clear the modal content before appending the details of each selected sale
+                $('#saleDetailsContent').html('');
+                
+                // Send an AJAX request to fetch sale details for each selected sale
+                selectedSales.forEach(function(saleId) {
+                    $.ajax({
+                        url: 'view-sales.php', // Update with your PHP script to fetch sale details
+                        method: 'GET',
+                        data: { saleId: saleId },
+                        success: function(response) {
+                            // Populate the modal with sale details for each selected sale
+                            // Here, you need to ensure that only relevant sale details are displayed
+                            // For example, assuming your response contains JSON data with sale details
+                            var saleDetails = JSON.parse(response);
+                            $('#saleDetailsModal').modal('show'); // Show the modal
+                            // Append the sale details to the modal content
+                            $('#saleDetailsContent').append('<p><strong>Date:</strong> ' + saleDetails.transaction_date + '</p>');
+                            $('#saleDetailsContent').append('<p><strong>Time:</strong> ' + saleDetails.transaction_time + '</p>');
+                            $('#saleDetailsContent').append('<p><strong>Processed By:</strong> ' + saleDetails.full_name + '</p>');
+                            $('#saleDetailsContent').append('<p><strong>Total:</strong> ' + saleDetails.total_amount + '</p>');
+                        },
+                        error: function() {
+                            alert('Failed to fetch sale details. Please try again later.');
+                        }
+                    });
+                });
+            } else {
+                alert("Please select at least one sale to view.");
+            }
+        });
     });
-  }
-
-  // Display the modal
-  var modal = new bootstrap.Modal(document.getElementById('staticBackdrop'));
-  modal.show();
-}
-
-$(document).ready(function() {
-  // Bind event handler to reset modal content on close
-  $('#deleteConfirmationModal').on('hidden.bs.modal', function () {
-    // Reset modal content to default message
-    $('#deleteConfirmationModal .modal-body').text('Are you sure you want to delete the sales permanently?');
-  });
-});
-
-function confirmDelete() {
-  // Get all selected rows
-  var selectedRows = $('#example').DataTable().rows('.selected');
-
-  // Check if any rows are selected
-  if (selectedRows.any()) {
-    // Show the confirmation modal with the Continue button
-    $('#deleteConfirmationModal .modal-body').text('Are you sure you want to delete the sales permanently?');
-    $('#deleteConfirmationModal .btn-tiger-orange').show();
-    $('#deleteConfirmationModal').modal('show');
-  } else {
-    // No rows are selected, show a message indicating that no rows are selected
-    $('#deleteConfirmationModal .modal-body').text('No sales selected.');
-    
-    // Hide the Continue button
-    $('#deleteConfirmationModal .btn-tiger-orange').hide();
-
-    // Show the confirmation modal without the Continue button
-    $('#deleteConfirmationModal').modal('show');
-  }
-}
-
-function deleteSelectedRows() {
-  // Get all selected rows
-  var selectedRows = $('#example').DataTable().rows('.selected');
-
-  // Check if any rows are selected
-  if (selectedRows.any()) {
-    // Remove the selected rows from the DataTable
-    selectedRows.remove().draw();
-
-    // Hide the confirmation modal
-    $('#deleteConfirmationModal').modal('hide');
-
-    // Show the success modal
-    $('#successModal').modal('show');
-  } else {
-    // If no rows are selected, directly show the confirmation modal
-    confirmDelete();
-  }
-}
-
-
-
-    </script>
+</script>
   </body>
 </html>
 <?php 
diff --git a/src/view-sales.php b/src/view-sales.php
new file mode 100644
index 00000000..b019fae2
--- /dev/null
+++ b/src/view-sales.php
@@ -0,0 +1,44 @@
+<?php
+// Include necessary files and initialize database connection
+require_once 'includes/db-connector.php';
+
+// Check if sale ID is provided
+if (isset($_GET['saleId'])) {
+    // Sanitize the input to prevent SQL injection
+    $saleId = mysqli_real_escape_string($db, $_GET['saleId']);
+
+    // Query to fetch sale details based on sale ID
+    $sql = "SELECT 
+                transaction.*,
+                CONCAT(user.first_name, ' ', user.middle_name, ' ', user.last_name) AS full_name,
+                DATE(transaction.timestamp) AS transaction_date,
+                TIME_FORMAT(transaction.timestamp, '%h:%i %p') AS transaction_time
+            FROM 
+                transaction
+            JOIN 
+                user ON transaction.user_id = user.id
+            WHERE
+                transaction.id = '$saleId'";
+    $result = $db->query($sql);
+
+    // Check if the query was successful
+    if ($result) {
+        // Check if sale details are found
+        if ($result->num_rows > 0) {
+            // Fetch sale details as an associative array
+            $saleDetails = $result->fetch_assoc();
+            // Output sale details as JSON (you can modify this as per your requirements)
+            echo json_encode($saleDetails);
+        } else {
+            // Sale details not found
+            echo "Sale details not found.";
+        }
+    } else {
+        // Query execution failed
+        echo "Failed to fetch sale details. Please try again later.";
+    }
+} else {
+    // Sale ID not provided
+    echo "Sale ID not provided.";
+}
+?>

	Date	Time	Processed by
	'.$row['transaction_date'].'	'.$row['transaction_time'].'	'.$row['full_name'].'
Total Sales:			1000.00					0.00