diff --git a/vendor-payouts.php b/vendor-payouts.php
index 96f269b..e1780a8 100644
--- a/vendor-payouts.php
+++ b/vendor-payouts.php
@@ -15,7 +15,8 @@ if ($_SESSION["userId"] <> "") {
     // // var_dump($vendor);
     // $array = json_decode($vendor,true);
     // var_dump($array);
-    $response = getAllPayout($_SESSION['token']);
+    $authToken = $_SESSION['token'];
+    $response = getAllPayout($authToken);
     $vendorPayoutData = json_decode($response, true);
 } else {
     $_SESSION["isLoggedIn"] = false;
@@ -241,7 +242,8 @@ if ($_SESSION["userId"] <> "") {
                                                 <?php
                                                 foreach ($vendorPayoutData as $x => $val) {
                                                     $vendorIdCheck = $val['vendor_details'][0]['vendor_id'];
-                                                    if ((empty($vendorIdCheck) == false) && ($vendorIdCheck == $vendorId) && ($val['status'] == "DEPOSITED")) { ?>
+                                                    if ((empty($vendorIdCheck) == false) && ($vendorIdCheck == $vendorId) && ($val['status'] == "DEPOSITED")) {
+                                                        $payoutId = $val['_id'] ?>
                                                         <tr>
                                                             <td> <?php echo "₱ " . $val['net_amount'] ?> </td>
                                                             <?php if (empty($val['bank_information'][0]['bank_name']) == false) {
@@ -261,9 +263,10 @@ if ($_SESSION["userId"] <> "") {
                                                             <td> December 08, 2023 </td>
                                                             <td> <?php echo $val['status'] ?> </td>
                                                             <td>
-                                                                <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#payoutModal">
+                                                                <button type="button" class="btn btn-primary showSinglePayoutBtn" data-order-id="<?php echo $payoutId; ?>" data-bs-toggle="modal" data-bs-target="#payoutsModal">View</button>
+                                                                <!-- <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#payoutModal">
                                                                     Details
-                                                                </button>
+                                                                </button> -->
                                                             </td>
                                                         </tr>
                                                 <?php
@@ -280,7 +283,27 @@ if ($_SESSION["userId"] <> "") {
             </div>
         </div>
     </section>
-    <div class="modal fade" id="payoutModal" tabindex="-1" aria-labelledby="payoutModalLabel" aria-hidden="true">
+
+    <div class="modal fade" id="payoutsModal" tabindex="-1" aria-labelledby="payoutsModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-xl" style="min-width: 90%;">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title fs-5" id="payoutsModalLabel">Payment ID: <span id="payoutIdSpan"></span></h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <div class="container-fluid" id="payoutDetailsContainer">
+                        <!-- Dynamic content will be inserted here -->
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- <div class="modal fade" id="payoutModal" tabindex="-1" aria-labelledby="payoutModalLabel" aria-hidden="true">
         <div class="modal-dialog modal-xl" style="min-width: 90%;">
             <div class="modal-content">
                 <div class="modal-header">
@@ -296,12 +319,7 @@ if ($_SESSION["userId"] <> "") {
                                         <div>
                                             <h6><strong>Payout Information</strong></h6>
                                         </div>
-                                        <!-- <php
-                                        if ($_SESSION['status'] == "DEPOSITED")
-                                            $className = "fw-bold border border-success border-2 rounded-pill btn-outline-success btn-sm";
-                                        else if ($_SESSION['statis'] == "PENDING")
-                                            $className = "fw-bold border border-warning border-2 rounded-pill btn-outline-warning btn-sm";
-                                    ?> -->
+
                                         <button class="fw-bold border border-success border-2 btn-outline-success btn-sm" disabled>DEPOSITED</button>
                                     </div>
                                     <div class="d-flex justify-content-between p-2">
@@ -310,9 +328,7 @@ if ($_SESSION["userId"] <> "") {
                                     </div>
                                     <div class="d-flex justify-content-between p-2" style="border-bottom: 1px solid #000;">
                                         <div class="fw-bold"> Fees, Deductions, Adjustments
-                                            <!-- <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="custom-tooltip" data-bs-title="Insert fee information here">
-                                                <i class="fi fi-rr-info"></i>
-                                            </span> -->
+
                                         </div>
                                         <div>- ₱ 35.00</div>
                                     </div>
@@ -378,7 +394,7 @@ if ($_SESSION["userId"] <> "") {
                 </div>
             </div>
         </div>
-    </div>
+    </div> -->
     <!-- End Vendor setting section -->
 
     <!-- Footer Start -->
@@ -612,14 +628,129 @@ if ($_SESSION["userId"] <> "") {
     <script src="assets/js/vendor/jquery.magnific-popup.min.js"></script>
     <script src="assets/js/plugins/jquery.sticky-sidebar.js"></script>
     <script src="assets/js/plugins/nouislider.js"></script>
-    <script>
+    <!-- <script>
         const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
         const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
-    </script>
+    </script> -->
 
     <!-- Main Js -->
     <script src="assets/js/vendor/index.js"></script>
     <script src="assets/js/main.js"></script>
+    <script>
+        $(document).ready(function() {
+            $('.showSinglePayoutBtn').click(function() {
+                var payoutId = $(this).data('order-id');
+                var token = "<?php echo $authToken; ?>";
+                $('#payoutIdSpan').text(payoutId);
+                $.ajax({
+                    url: 'https://api.obanana.shop/api/v1/payouts/' + payoutId,
+                    type: 'GET',
+                    headers: {
+                        'Authorization': 'Bearer ' + token
+                    },
+                    success: function(response) {
+                        // Handle successful response
+                        console.log(response);
+                        var grossAmount = response.gross_amount;
+                        var totalFees = response.fees_deduction_adjustment;
+                        var netAmount = response.net_amount;
+                        var payoutStatus = response.status;
+                        var bankName = response.bank_information[0].bank_name;
+                        var bankNum = response.bank_information[0].bank_account_number;
+                        var bankAccName = response.bank_information[0].bank_account_name;
+                        var paymentType = response.transaction_logs[0].Type;
+                        // var transDate = response.transaction_logs[0].Transaction + " " + date;
+                        // var transGrossAmt = response.transaction_logs[0].Gross + " " + amount;
+                        var transFee = response.transaction_logs[0].Fee;
+                        // var transNetAmt = response.transaction_logs[0].Net + " " + amount;
+                        var transDesc = response.transaction_logs[0].Description;
+
+                        // Populate data dynamically using the response
+                        var payoutDetailsHtml = `                    
+                        <div class="row">
+                            <div class="col-md-7 mb-4">
+                                <div class="d-flex flex-column">
+                                    <div class="d-flex justify-content-between p-2">
+                                        <div>
+                                            <h6><strong>Payout Information</strong></h6>
+                                        </div>
+
+                                        <button class="fw-bold border border-success border-2 btn-outline-success btn-sm" disabled>${payoutStatus}</button>
+                                    </div>
+                                    <div class="d-flex justify-content-between p-2">
+                                        <div class="fw-bold">Gross Amount</div>
+                                        <div>₱ ${grossAmount}</div>
+                                    </div>
+                                    <div class="d-flex justify-content-between p-2" style="border-bottom: 1px solid #000;">
+                                        <div class="fw-bold"> Fees, Deductions, Adjustments
+
+                                        </div>
+                                        <div>- ₱ ${totalFees}</div>
+                                    </div>
+                                    <div class="d-flex justify-content-between p-2">
+                                        <div class="fw-bold"> Net Amount</div>
+                                        <div>₱ ${netAmount}</div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-md-5 mb-4">
+                                <div class="d-flex flex-column" style="border-bottom: 1px solid #000;">
+                                    <div class="d-flex justify-content-between p-2">
+                                        <h6><strong>Bank Information</strong></h6>
+                                    </div>
+                                    <div class="d-flex justify-content-between p-2">
+                                        <div class="fw-bold">Bank</div>
+                                        <div>${bankName}</div>
+                                    </div>
+                                    <div class="d-flex justify-content-between p-2">
+                                        <div class="fw-bold">Account Name</div>
+                                        <div>${bankAccName}</div>
+                                    </div>
+                                    <div class="d-flex justify-content-between p-2">
+                                        <div class="fw-bold">Account Number</div>
+                                        <div>${bankNum}</div>
+                                    </div>
+
+                                </div>
+                            </div>
+                            <div class="col-12">
+                                <div class="mt-5">
+                                    <h6><strong>Transaction Logs</strong></h6>
+                                    <div class="table-responsive">
+                                        <table id="example" class="table ec-table">
+                                            <thead>
+                                                <tr>
+                                                    <th>Type</th>
+                                                    <th>Transaction Date</th>
+                                                    <th>Gross Amount</th>
+                                                    <th>Fee</th>
+                                                    <th>Net Amount</th>
+                                                    <th>Description</th>
+
+                                                </tr>
+                                            </thead>
+                                            <tbody>
+                                                <td> ${paymentType} </td>
+                                                <td> December 08, 2024 </td>
+                                                <td> ₱ 350</td>
+                                                <td> - ₱ ${transFee}</td>
+                                                <td> ₱ 300</td>
+                                                <td> ${transDesc} </td>
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>`;
+                        $('#payoutDetailsContainer').html(payoutDetailsHtml);
+
+                    },
+                })
+
+            });
+        });
+    </script>
+
 
 
 </body>