diff --git a/index.php b/index.php
index 3edbfcc..a2571fe 100644
--- a/index.php
+++ b/index.php
@@ -85,7 +85,7 @@
   </div>
 
   <!-- Edit Modal -->
-  <div id="editModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
+  <div id="editModal" class="fixed inset-0 bg-black bg-opacity-50 items-center justify-center hidden">
     <div class="bg-white p-6 rounded-lg shadow-lg w-96">
       <h2 class="text-xl font-bold mb-4">Edit Payment</h2>
       <form id="editForm" class="space-y-4">
diff --git a/js/app.js b/js/app.js
index 56561e4..e4bacd0 100644
--- a/js/app.js
+++ b/js/app.js
@@ -111,6 +111,7 @@ document.addEventListener('DOMContentLoaded', () => {
     document.getElementById('editFormBillName').value  = bill.billName;
 
     // Open the modal
+    document.getElementById('editModal').classList.add('flex');
     document.getElementById('editModal').classList.remove('hidden');
   }
 
@@ -191,11 +192,12 @@ document.addEventListener('DOMContentLoaded', () => {
 
   // Event listener for close button in the modal
   document.getElementById('editFormCancel').addEventListener('click', () => {
-    // Close the modal
-    document.getElementById('editModal').classList.add('hidden');
-
     // Clear modal fields
     document.getElementById('editForm').reset();
+
+    // Close the modal
+    document.getElementById('editModal').classList.add('hidden');
+    document.getElementById('editModal').classList.remove('flex');
   });
 
   // On page load