diff --git a/index.php b/index.php
index f0ed187..ac64a41 100644
--- a/index.php
+++ b/index.php
@@ -145,12 +145,12 @@ $project_image_url = htmlspecialchars($_SERVER['PROJECT_IMAGE_URL'] ?? '');
                                                         <i data-feather="edit" style="width: 16px; height: 16px;"></i>
                                                     </button>
                                                 </form>
-                                                <form action="delete_process.php" method="POST" onsubmit="return confirm('Are you sure you want to delete this process?');">
+                                                <form id="deleteForm-<?php echo $process['id']; ?>" action="delete_process.php" method="POST" style="display:none;">
                                                     <input type="hidden" name="id" value="<?php echo $process['id']; ?>">
-                                                    <button type="submit" class="btn btn-sm btn-outline-danger" title="Delete Process">
-                                                        <i data-feather="trash-2" style="width: 16px; height: 16px;"></i>
-                                                    </button>
                                                 </form>
+                                                <button type="button" class="btn btn-sm btn-outline-danger" title="Delete Process" data-bs-toggle="modal" data-bs-target="#confirmDeleteModal" data-bs-id="<?php echo $process['id']; ?>">
+                                                    <i data-feather="trash-2" style="width: 16px; height: 16px;"></i>
+                                                </button>
                                             </div>
                                         </div>
                                         <p class="mb-1 text-muted"><?php echo htmlspecialchars($process['description']); ?></p>
@@ -168,6 +168,24 @@ $project_image_url = htmlspecialchars($_SERVER['PROJECT_IMAGE_URL'] ?? '');
         <p>&copy; <?php echo date("Y"); ?> <?php echo $project_name; ?>. All rights reserved.</p>
     </footer>
 
+    <div class="modal fade" id="confirmDeleteModal" tabindex="-1" aria-labelledby="confirmDeleteModalLabel" aria-hidden="true">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="confirmDeleteModalLabel">Confirm Deletion</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    Are you sure you want to delete this process? This action cannot be undone.
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+                    <button type="button" class="btn btn-danger" id="confirmDeleteBtn">Delete</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
     <script>
       // Client-side validation for the Add Process form
@@ -223,5 +241,24 @@ $project_image_url = htmlspecialchars($_SERVER['PROJECT_IMAGE_URL'] ?? '');
           });
       }
     </script>
+    <script>
+        // JavaScript for handling the delete confirmation modal
+        document.addEventListener('DOMContentLoaded', function() {
+            var confirmDeleteModal = document.getElementById('confirmDeleteModal');
+            var confirmDeleteBtn = document.getElementById('confirmDeleteBtn');
+
+            confirmDeleteModal.addEventListener('show.bs.modal', function (event) {
+                // Button that triggered the modal
+                var button = event.relatedTarget;
+                // Extract info from data-bs-id attributes
+                var processId = button.getAttribute('data-bs-id');
+
+                // Update the modal's delete button to point to the correct delete_process.php with the processId
+                confirmDeleteBtn.onclick = function() {
+                    document.getElementById('deleteForm-' + processId).submit();
+                };
+            });
+        });
+    </script>
 </body>
 </html>
\ No newline at end of file