diff --git a/vendor-settings.php b/vendor-settings.php
index 1f3a2b3..82c986c 100644
--- a/vendor-settings.php
+++ b/vendor-settings.php
@@ -295,13 +295,13 @@ if ($_SESSION["isCustomer"] == true) {
                                                 </div>
                                             </div>
                                         </div>
-                                         <!-- 03-19-24 Jun Jihad Bank Information -->
-                                         <div class="col-md-12 col-sm-12" style="display:flex; justify-content: space-between">
-                                         <h5>Bank Information </h5>
-                                         <button type="button" class="btn btn-primary" id="vendorBankModalBtn" data-bs-toggle="modal" data-bs-target="#vendorBankModal">My Banks</button>
-                                         </div>
+                                        <!-- 03-19-24 Jun Jihad Bank Information -->
+                                        <div class="col-md-12 col-sm-12" style="display:flex; justify-content: space-between">
+                                        <h5>Bank Information </h5>
+                                        <button type="button" class="btn btn-primary" id="vendorBankModalBtn" data-bs-toggle="modal" data-bs-target="#vendorBankModal">My Banks</button>
+                                        </div>
                                             <div class="row">
-                                                <div class="col-md-12 col-sm-12">
+                                                <div class="py-3 col-md-12 col-sm-12">
                                                 <?php foreach ($vendorData['bank_acount_details'] as $bank_acount_details) : ?>
                                                             <?php if ($bank_acount_details['bank_payout']) : ?>
                                                     <table style="width:100%; border-collapse: collapse;">
@@ -544,7 +544,6 @@ if ($_SESSION["isCustomer"] == true) {
             </div>
         </div>
 
-
         <!-- Bank -->
         <div class="modal fade" id="vendorBankModal" tabindex="-1" role="dialog" aria-hidden="true">
             <div class="modal-dialog modal-dialog-centered modal-sm" role="document" style="max-width: 800px;">
@@ -561,19 +560,34 @@ if ($_SESSION["isCustomer"] == true) {
                                         <div class="card-body">
                                             <div class="container">
                                                 <div class="row">
-                                                <div class="col-md-12 mx-auto">
-    <div class="form-check" style="display: flex; align-items: center;">
-        <label class="form-check-label" for="address_<?php echo $vendor_index; ?>_<?php echo $bank_index; ?>">
-            <strong style="font-weight: bold;">Bank Name: </strong><?php echo $bank['bank_name']; ?> <br>
-            <strong style="font-weight: bold;">Bank Account Number: </strong><?php echo $bank['bank_account_number']; ?> <br>
-            <strong style="font-weight: bold;">Bank Account Name: </strong><?php echo $bank['bank_account_name']; ?>                              
-        </label>
-        <div class="selectWrap" style="margin-left: auto; display: flex; align-items: center;">
-    <input type="radio" style="height:15px !important; width: 15px !important;" name="payout_bank" id="payout_bank_<?php echo $vendor_index; ?>_<?php echo $bank_index; ?>" value="<?php echo $vendor_index; ?>_<?php echo $bank_index; ?>" onchange="setPayoutBank('<?php echo $vendor['_id']; ?>', <?php echo $bank_index; ?>, true)" <?php echo $bank['bank_payout'] ? 'checked' : ''; ?>>
-    <label for="payout_bank_<?php echo $vendor_index; ?>_<?php echo $bank_index; ?>" style="margin-bottom: 0; margin-left: 5px;">Set as Payout Bank</label>
-</div>
-    </div>
-</div>
+                                                    <div class="col-md-10 mx-auto">
+                                                        <div class="form-check" style="display: flex; align-items: center;">
+                                                            <label class="form-check-label" for="address_<?php echo $vendor_index; ?>_<?php echo $bank_index; ?>">
+                                                                <strong style="font-weight: bold;">Bank Name: </strong><?php echo $bank['bank_name']; ?> <br>
+                                                                <strong style="font-weight: bold;">Bank Account Number: </strong><?php echo $bank['bank_account_number']; ?> <br>
+                                                                <strong style="font-weight: bold;">Bank Account Name: </strong><?php echo $bank['bank_account_name']; ?>                              
+                                                            </label>
+                                                            <div class="selectWrap" style="margin-left: auto; display: flex; align-items: center;">
+                                                                <input type="radio" style="height:15px !important; width: 15px !important;" name="payout_bank" id="payout_bank_<?php echo $vendor_index; ?>_<?php echo $bank_index; ?>" value="<?php echo $vendor_index; ?>_<?php echo $bank_index; ?>" onchange="setPayoutBank('<?php echo $vendor['_id']; ?>', <?php echo $bank_index; ?>, true)" <?php echo $bank['bank_payout'] ? 'checked' : ''; ?>>
+                                                                <label for="payout_bank_<?php echo $vendor_index; ?>_<?php echo $bank_index; ?>" style="margin-bottom: 0; margin-left: 5px;">Set as Payout Bank</label>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                    <div class="col-md-2 mx-auto">
+                                                        <div id="editDelete" style="display:flex; float:right; width:20px; margin-right:-10px;" > 
+                                                        <?php
+                                                        $bank['id'] =$bank_index;
+                                                        $jsonBank = json_encode($bank)?>
+                                                            <a href="javascript:0" data-bs-toggle="modal" data-value=' <?php echo $jsonBank; ?>' data-bs-target="#editBankModal">
+                                                            <i class="fa-regular fa-pen-to-square" style="font-size:15px; float:right;"></i></a>
+                                                            <!-- <i class="fa-regular fa-trash-can" style="font-size:15px; float:right;"></i> -->
+                                                        </div>
+                                                        <div id="editDelete" style="display:flex; float:right; width:20px; margin-top:20px; margin-right:-20px; margin-top:30px;"> 
+                                                            <!-- <i class="fa-solid fa-pen" style="font-size:15px; float:right;"></i></a> -->
+                                                            <i onclick="deleteBank('<?php echo $vendor['_id']; ?>', <?php echo $bank_index; ?>, true)"
+                                                                class="fa-regular fa-trash-can" style="font-size:15px; float:right;"></i>
+                                                        </div>
+                                                    </div>
                                                 </div>
                                             </div>
 
@@ -603,7 +617,6 @@ if ($_SESSION["isCustomer"] == true) {
                                 <label for="bankAccountName" class="text-dark font-weight-medium pt-3 mb-2">Bank Account Name</label>
                                 <input type="text" class="form-control" id="bankAccountName">
                             </div>
-                          
                             <button type="button" class="btn btn-primary mt-4" id="submitBankBtn">Add Bank</button>
 
                         </form>
@@ -613,6 +626,45 @@ if ($_SESSION["isCustomer"] == true) {
             </div>
         </div>
 
+        <!-- Louie Added Edit Bank Modal -->
+        <div class="modal fade" id="editBankModal" tabindex="-1" role="dialog" aria-hidden="true">
+            <div class="modal-dialog modal-dialog-centered modal-sm" role="document" style="max-width: 800px;">
+                <div class="modal-content">
+                    <div class="modal-body" style="overflow-y: auto; max-height: 90vh;">
+                    <form>
+                            <div class="form-group">
+                                <label for="bankName" class="text-dark font-weight-medium pt-3 mb-2">Bank Name</label>
+                                <input type="text" class="form-control" 
+                                id="bankName2" 
+                                value="<?php echo $bank['bank_name']; ?>">
+                                <!-- <label for="addressFirstName" class="text-dark font-weight-medium pt-3 mb-2">First Name</label>-->
+                                <input type="hidden" class="form-control" id="bankId" >
+                                <input type="hidden" class="form-control" id="bankPayoutStatus" >
+
+                            </div>
+                            <div class="form-group">
+                                <label for="bankAccNum" class="text-dark font-weight-medium pt-3 mb-2">Bank Account Number</label>
+                                <input min="0" type="number" class="form-control" id="bankAccNum" value="<?php echo $bank['bank_account_number']; ?>">
+                                <!-- <label for="addressLastName" class="text-dark font-weight-medium pt-3 mb-2">Last Name</label>
+                                <input type="text" class="form-control" id="addressLastName"> -->
+                            </div>
+                            <div class="form-group">
+                                <label for="bankAccName" class="text-dark font-weight-medium pt-3 mb-2">Bank Account Name</label>
+                                <input type="text" class="form-control" id="bankAccName" value="<?php echo $bank['bank_account_name']; ?>" >
+                                <!-- <label for="addressContact" class="text-dark font-weight-medium pt-3 mb-2">Contact Number</label>
+                                <input type="number" class="form-control" id="addressContact"> -->
+                            </div>
+                            
+                            <button type="button" class="btn btn-primary mt-4" id="editBankBtn">Submit</button>
+                            
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        
+
         <script>
             function preventErasePrefix(input) { /* secondmodal */
 
@@ -915,6 +967,8 @@ if ($_SESSION["isCustomer"] == true) {
             });
         </script>
 
+        
+
         <script>
             const vendorid = `<?php echo $_SESSION["LoggedInVendorId"]; ?>`;
             document.addEventListener('DOMContentLoaded', function() {
@@ -947,7 +1001,6 @@ if ($_SESSION["isCustomer"] == true) {
                         }
                     })
                     .then(provincesData => {
-                       
                         provincesData.forEach(province => {
                             const option = new Option(province.name, province.code);
                             provinceSelect.append(option);
@@ -1185,7 +1238,6 @@ if ($_SESSION["isCustomer"] == true) {
                             const bankName = $('#bankName').val();
                             const bankAccountNumber = $('#bankAccountNumber').val();
                             const bankAccountName = $('#bankAccountName').val();
-                         
                             const newBank = {
                                 bank_name: bankName,
                                 bank_account_number: bankAccountNumber,
@@ -1218,7 +1270,7 @@ if ($_SESSION["isCustomer"] == true) {
                         });
                 });
         </script>
-          <script>
+        <script>
             async function updateAddressBilling(vendorid, addressIndex, isBilling) {
                 try {
                     const apiUrl = `https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/vendors/${vendorid}`;
@@ -1417,6 +1469,129 @@ if ($_SESSION["isCustomer"] == true) {
             }
 
         </script>
+
+
+        <!-- Script added by Louie for Dynamic Edit Modal Box. May 08, 2024 -->
+        <script>
+            const vendorid = `<?php echo $_SESSION["LoggedInVendorId"]; ?>`;
+            $('#editBankModal').on('shown.bs.modal', function (event) {
+            var jsonString = $(event.relatedTarget).data('value');
+            var jsonObject = JSON.parse(jsonString);
+            console.log("This is the data", jsonObject)
+            // shows inputed data by the vendor
+            document.querySelector('input[id="bankName2"]').value = jsonObject.bank_name;
+            document.querySelector('input[id="bankAccNum"]').value = jsonObject.bank_account_number;
+            document.querySelector('input[id="bankAccName"]').value = jsonObject.bank_account_name;
+            document.querySelector('input[id="bankPayoutStatus"]').value = jsonObject.bank_payout;
+            document.querySelector('input[id="bankId"]').value = jsonObject.id;
+            })
+
+            $('#editBankBtn').on('click', function() {
+
+            console.log(vendorid)
+            // function updateAddress(){
+            // Retrieve existing addresses from the API
+            // fetch('https://api.obanana.shop/api/v1/customers/65482e8d209ff8d348bd30fd')
+            fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/vendors/' + vendorid)
+                .then(response => response.json())
+                .then(data => {
+                    // Get the existing addresses array
+                    const existingBankDetails = data.bank_acount_details || [];
+                    
+                    
+                    console.log("This is the existing data", existingBankDetails)
+                    // Get the new bank details
+                    const editedbankName = $('#bankName2').val();
+                    const editedAccNum = $('#bankAccNum').val();
+                    const editedAccName = $('#bankAccName').val();
+                    const editedPayout = $('#bankPayoutStatus').val() === "true"; 
+                    const id = $('#bankId').val();
+                    console.log('this is the bank id '+ id)
+                    console.log(typeof editedPayout);
+                    console.log(editedPayout);
+
+                    // Create a new address object
+                    let bankDetails = existingBankDetails
+
+                    bankDetails[id]={
+                        bank_name: editedbankName,
+                        bank_account_number: editedAccNum,
+                        bank_account_name: editedAccName,
+                        bank_payout: editedPayout,
+                    };
+                    console.log( bankDetails[id])
+                    // Make a PATCH request to update the addresses array
+                    return fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/vendors/' + vendorid, {
+                        method: 'PATCH',
+                        headers: {
+                            'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify({
+                            bank_acount_details: bankDetails
+                        }),
+                    });
+                })
+                .then(response => {
+                    if (response.ok) {
+                        // Handle success (e.g., show a success message)
+                        location.reload();
+                    } else {
+                        // Handle error
+                        console.error('Failed to submit data');
+                        alert('Failed to submit data');
+                    }
+                })
+                .catch(error => {
+                    // Handle network or other errors
+                    console.error('Error:', error);
+                    alert('Error submitting data');
+                });
+            });
+        </script>
+
+        <!-- Script added by Louie for Deleting Bank Information. May 08, 2024 -->
+        <script>
+            const vendorid = `<?php echo $_SESSION["LoggedInVendorId"]; ?>`;
+            function deleteBank(vendorid, bankIndex) {
+                fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/vendors/' + vendorid)
+                .then(response => response.json())
+                .then(data => {
+                    let existingBank = data.bank_acount_details || [];
+                    if (bankIndex >= 0 && bankIndex < existingBank.length) {
+                        existingBank.splice(bankIndex, 1);
+                        fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/vendors/' + vendorid, {
+                            method: 'PATCH',
+                            headers: {
+                                'Content-Type': 'application/json'
+                            },
+                            body: JSON.stringify({
+                                bank_acount_details: existingBank
+                            }),
+                        })
+                        .then(response => {
+                            if (response.ok) {
+                                location.reload();
+                                // filter the delete action
+                                document.getElementById('form-check-' + bankIndex).remove();
+                            } else {
+                                console.error('Failed to submit data');
+                                alert('Failed to submit data');
+                            }
+                        })
+                        .catch(error => {
+                            console.error('Error:', error);
+                            alert('Error submitting data');
+                        });
+                    } else {
+                        console.log("Invalid address index.");
+                    }
+                })
+                .catch(error => {
+                    console.error('Error:', error);
+                    alert('Error fetching vendor data');
+                });
+            }
+        </script>
     </section>
     <!-- End Vendor setting section -->