diff --git a/app/Views/insurer_statement_list.php b/app/Views/insurer_statement_list.php
index 6c5d67bb..8e89fcb2 100644
--- a/app/Views/insurer_statement_list.php
+++ b/app/Views/insurer_statement_list.php
@@ -508,7 +508,7 @@
                             </table> -->
                             <!-- <button type="button" id="add_row_btn" class="btn btn-secondary float-right mt-2"><i class="fa fa-plus"></i></button> -->
 
-                            <div class="payment-card">
+                            <div class="payment-card" id="default_payment_card">
                                 <input type="hidden" class="form-control" name="pk[]" placeholder="Enter Amount">
                                 <div class="row">
                                     <div class="col">
@@ -964,14 +964,32 @@
         var modal_received_amt_div = document.getElementById('modal_received_amt_div');
         modal_received_amt_div.style.display = 'none';
         // alert();
-        // console.log(event.target.data)
-        var dataId = event.target.getAttribute('data-id');
+       // make sure event exists
+        event = event || window.event;
+
+        // the element actually clicked
+        const clicked = event.target;
+
+        // find the nearest ancestor <a> (or element) that has data-id
+        const anchor = clicked.closest('a[data-id], .btnEdit');
+
+        if (!anchor) {
+            console.warn('Could not find element with data-id');
+            return;
+        }
+
+        const dataId = anchor.getAttribute('data-id');
+        const expAmt = anchor.getAttribute('data-exp-amt');
+        const receivedAmt = anchor.getAttribute('data-received-amt');
+
+        console.log('stmt id :', dataId, expAmt, receivedAmt);
+
         var dataExpAmt = event.target.getAttribute('data-exp-amt');
         var dataReceivedAmt = event.target.getAttribute('data-received-amt');
         // Set the value to a hidden input field in the modal
         document.getElementById('hidden_statement_id').value = dataId;
         // document.getElementById('modal_exp_amt').value = dataExpAmt; 
-        document.getElementById('modal_received_amt').value = dataReceivedAmt;
+        document.getElementById('modal_received_amt').value = receivedAmt;
 
         $('.loader').fadeIn();
         $('.loader-mask').fadeIn();
@@ -981,10 +999,78 @@
             method: 'get',
             // data: { id: dataId },
             // dataType: 'json',
+            // success: function(response) {
+            //     $('.loader').fadeOut();
+            //     $('.loader-mask').delay(10).fadeOut('slow');
+            //     console.log(response);
+            //     // Assuming response contains the necessary data
+            //     if (response.dataStatus === true && response.code === 200) {
+            //         // Populate modal fields
+            //         if (response.data.invoice_status !== null) {
+            //             var inv_status_element = document.getElementById('invoice_status');
+            //             inv_status_element.value = response.data.invoice_status;
+            //             var event = new Event('change');
+            //             inv_status_element.dispatchEvent(event);
+            //         }
+
+            //         document.getElementById('invoice_no_modal').value = response.data.invoice_no;
+            //         document.getElementById('invoice_date_modal').value = response.data.invoice_date === '' ? <?php echo date('d-m-Y') ?> : response.data.invoice_date;
+            //         document.getElementById('invoice_amount_no_modal').value = response.data.invoice_amount;
+
+            //         document.getElementById('invoice_value_modal').value = response.data.invoice_value;
+            //         document.getElementById('gst_per_modal').value = response.data.gst_per;
+            //         document.getElementById('gst_value_modal').value = response.data.gst_value;
+            //         console.log('response.data.gst_value - ' + response.data.gst_value);
+            //         if (response.data.gst_value == 0 || response.data.gst_value == '' || response.data.gst_value == null) {
+            //             calcGSTValue();
+            //         }
+
+            //         if (!$('#invoice_date_modal').val()) {
+            //             // alert('nope');
+            //             // Set today's date as the default date
+            //             $('#invoice_date_modal').datepicker('setDate', new Date());
+            //         }
+            //         // Clear existing rows in the payment table
+            //         var paymentTableBody = document.querySelector('#payment_table_modal tbody');
+            //         // var paymentTableBody = document.getElementById('payment_card_container');
+
+            //         console.log('response.data.payments.length', response.data.payments.length)
+            //         // Populate payment table rows
+            //         if (response.data.payments.length) {
+            //             paymentTableBody.innerHTML = '';
+            //             response.data.payments.forEach(function(payment) {
+            //                 var row = paymentTableBody.insertRow();
+
+            //                 row.innerHTML = `
+            //                     <td style="display: none;"><input type="hidden" class="form-control" name="pk[]" value="${payment.id}"></td>
+            //                     <td><input type="number" class="form-control" name="received_amount[]" placeholder="Enter Amount" value="${payment.inv_amt}" onchange="checkInvAmont(event)" required step="0.01"></td>
+            //                      <td><input type="number" class="form-control" name="gst_amount[]" placeholder="Enter Amount" value="${payment.gst}" onchange="checkInvAmont(event)" required step="0.01"></td>
+            //                     <td><input type="number" class="form-control" name="tds[]" placeholder="Enter Amount" value="${payment.tds}" onchange="checkInvAmont(event)" required></td>
+            //                     <td><input type="text" class="form-control" name="utr_no[]" placeholder="Enter UTR No" value="${payment.utr_no}" required></td>
+            //                     <td><input type="text" class="form-control payment_date" name="payment_date[]" value="${formatDateToDMY(payment.received_date)}" required readonly></td>
+            //                     <td><i class="mdi mdi-delete mr-2 font-18 vertical-middle text-danger remove-row" style="text-align: center;"></i></td>
+            //                 `;
+            //             });
+            //         }
+            //         $('.payment_date').datepicker({
+            //             format: 'dd/mm/yyyy',
+            //             autoclose: true
+            //         });
+            //         // Show the modal
+            //         var myModal = new bootstrap.Modal(document.getElementById('invoice_modal'));
+            //         myModal.show();
+            //     } else {
+            //         // Handle error if the response is not successful
+            //         console.error('Failed to fetch data:', response);
+            //         alert("Something went wrong! Couldn't get data");
+            //     }
+            // },
+
             success: function(response) {
                 $('.loader').fadeOut();
                 $('.loader-mask').delay(10).fadeOut('slow');
                 console.log(response);
+                
                 // Assuming response contains the necessary data
                 if (response.dataStatus === true && response.code === 200) {
                     // Populate modal fields
@@ -996,46 +1082,79 @@
                     }
 
                     document.getElementById('invoice_no_modal').value = response.data.invoice_no;
-                    document.getElementById('invoice_date_modal').value = response.data.invoice_date === '' ? <?php echo date('d-m-Y') ?> : response.data.invoice_date;
+                    document.getElementById('invoice_date_modal').value = response.data.invoice_date === '' ? '<?php echo date('d-m-Y') ?>' : response.data.invoice_date;
                     document.getElementById('invoice_amount_no_modal').value = response.data.invoice_amount;
 
                     document.getElementById('invoice_value_modal').value = response.data.invoice_value;
                     document.getElementById('gst_per_modal').value = response.data.gst_per;
                     document.getElementById('gst_value_modal').value = response.data.gst_value;
                     console.log('response.data.gst_value - ' + response.data.gst_value);
+                    
                     if (response.data.gst_value == 0 || response.data.gst_value == '' || response.data.gst_value == null) {
                         calcGSTValue();
                     }
 
                     if (!$('#invoice_date_modal').val()) {
-                        // alert('nope');
                         // Set today's date as the default date
                         $('#invoice_date_modal').datepicker('setDate', new Date());
                     }
-                    // Clear existing rows in the payment table
-                    var paymentTableBody = document.querySelector('#payment_table_modal tbody');
+                    
+                    // Clear existing payment cards in the container
+                    var defaultPaymentCardContainer = document.getElementById('default_payment_card');
+                    defaultPaymentCardContainer.style.display = 'block';
+                    var paymentCardContainer = document.getElementById('payment_card_container');
+                    paymentCardContainer.innerHTML = '';
 
-                    console.log('response.data.payments.length', response.data.payments.length)
-                    // Populate payment table rows
+                    console.log('response.data.payments.length', response.data.payments.length);
+                    
+                    // Populate payment cards
                     if (response.data.payments.length) {
-                        paymentTableBody.innerHTML = '';
-                        response.data.payments.forEach(function(payment) {
-                            var row = paymentTableBody.insertRow();
-                            row.innerHTML = `
-                                <td style="display: none;"><input type="hidden" class="form-control" name="pk[]" value="${payment.id}"></td>
-                                <td><input type="number" class="form-control" name="received_amount[]" placeholder="Enter Amount" value="${payment.inv_amt}" onchange="checkInvAmont(event)" required step="0.01"></td>
-                                 <td><input type="number" class="form-control" name="gst_amount[]" placeholder="Enter Amount" value="${payment.gst}" onchange="checkInvAmont(event)" required step="0.01"></td>
-                                <td><input type="number" class="form-control" name="tds[]" placeholder="Enter Amount" value="${payment.tds}" onchange="checkInvAmont(event)" required></td>
-                                <td><input type="text" class="form-control" name="utr_no[]" placeholder="Enter UTR No" value="${payment.utr_no}" required></td>
-                                <td><input type="text" class="form-control payment_date" name="payment_date[]" value="${formatDateToDMY(payment.received_date)}" required readonly></td>
-                                <td><i class="mdi mdi-delete mr-2 font-18 vertical-middle text-danger remove-row" style="text-align: center;"></i></td>
+                        defaultPaymentCardContainer.style.display = 'none';
+                        response.data.payments.forEach(function(payment, index) {
+                            var paymentCard = document.createElement('div');
+                            paymentCard.className = 'payment-card';
+                            
+                            paymentCard.innerHTML = `
+                                <input type="hidden" class="form-control" name="pk[]" value="${payment.id}">
+                                <div class="row">
+                                    <div class="col">
+                                        <label>Invoice value</label>
+                                        <input type="number" class="form-control" name="received_amount[]" placeholder="Enter Amount" value="${payment.inv_amt}" required step="0.01" onchange="checkInvAmont(event)">
+                                    </div>
+                                    <div class="col">
+                                        <label>GST</label>
+                                        <input type="number" class="form-control" name="gst_amount[]" placeholder="Enter GST" value="${payment.gst}" required step="0.01" onchange="checkInvAmont(event)">
+                                    </div>
+                                    <div class="col">
+                                        <label>TDS</label>
+                                        <input type="number" class="form-control" name="tds[]" placeholder="Enter TDS" value="${payment.tds}" onchange="checkInvAmont(event)" required>
+                                    </div>
+                                    <div class="col">
+                                        <label>UTR Number</label>
+                                        <input type="text" class="form-control" name="utr_no[]" placeholder="Enter UTR No" value="${payment.utr_no}" required>
+                                    </div>
+                                    <div class="col">
+                                        <label>Date</label>
+                                        <input type="text" class="form-control payment_date" name="payment_date[]" value="${formatDateToDMY(payment.received_date)}" placeholder="dd/mm/yyyy" required readonly>
+                                    </div>
+                                    <div class="col-auto d-flex align-items-end">
+                                        <button type="button" class="btn btn-danger btn-sm remove-row">
+                                            <i class="mdi mdi-delete"></i>
+                                        </button>
+                                    </div>
+                                </div>
                             `;
+                            
+                            paymentCardContainer.appendChild(paymentCard);
                         });
                     }
+                    
+                    // Initialize datepicker for all payment date fields
                     $('.payment_date').datepicker({
                         format: 'dd/mm/yyyy',
                         autoclose: true
                     });
+                    
                     // Show the modal
                     var myModal = new bootstrap.Modal(document.getElementById('invoice_modal'));
                     myModal.show();