diff --git a/resources/views/online/billplz-transaction-summary/index.blade.php b/resources/views/online/billplz-transaction-summary/index.blade.php
index 7a1ea18..5ad5286 100644
--- a/resources/views/online/billplz-transaction-summary/index.blade.php
+++ b/resources/views/online/billplz-transaction-summary/index.blade.php
@@ -9,21 +9,30 @@
     ]">
 </breadcrumb>
 
-<div class="container mx-auto p-4 bg-yellow-50">
+<div class="flex mb-4 border-b border-gray-200">
+        <button class="flex items-center tab-button active" data-tab="pkb-transactions-summary">
+            <span>PKB (v2)</span>
+        </button>
+        <button class="flex items-center tab-button" data-tab="kopkb-transactions-summary">
+            <span>KOPKB (v3)</span>
+        </button>
+</div>
+<div>
+<div id="pkb-transactions-summary" class="container p-4 mx-auto bg-yellow-50 tab-content active">
     <x-filter-date-card title="Billplz Transaction Summary"
         action="{{ route('transaction.online.billplz-transaction-summary.index') }}" :selectedDate="$date" />
 
-    <div class="container mx-auto px-4">
+    <div class="container px-4 mx-auto">
         <div class="flex flex-col items-center">
-            <div class="flex flex-row space-x-4 mt-6">
+            <div class="flex flex-row mt-6 space-x-4">
                 <x-card title="Sum of Billplz Transactions" subtitle="{{ $sumOfBillplzTransactions }}"></x-card>
                 <div class="flex items-center"><span class="text-5xl font-bold">-</span></div>
                 <x-card title="Sum of Arrahn Transactions" subtitle="{{ $sumOfArrahnTransactions }}"></x-card>
                 <div class="flex items-center"><span class="text-5xl font-bold"> = </span></div>
                 <x-card title="Payment Gateway Cost" subtitle="{{ $paymentGatewayCost }}"></x-card>
             </div>
-            <hr class="border-b-2 border-gray-300 border-solid my-4 w-full">
-            <div class="flex flex-row space-x-4 mb-6">
+            <hr class="w-full my-4 border-b-2 border-gray-300 border-solid">
+            <div class="flex flex-row mb-6 space-x-4">
                 <x-card title="No of Arrahn Transactions" subtitle="{{ $numberOfArrahnTransactions }}"></x-card>
                 <div class="flex items-center"><span class="text-5xl font-bold">x</span></div>
                 <x-card title="Charge Per Transaction" subtitle="RM 1.00"></x-card>
@@ -45,7 +54,7 @@
                 <tr>
                     <x-table.data :content="$loop->iteration" />
                     <x-table.data :content="$data['billplz_bill']['id']" />
-                    <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                    <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
                         @foreach ($data['arrahn_transactions'] as $arrahn_transaction)
                             <div class="flex items-center">
                                 <div class="ml-3 text-gray-900 whitespace-no-wrap">
@@ -72,7 +81,7 @@
                             </div>
                         @endforeach
                     </td>
-                    <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                    <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
                         <div class="flex items-center">
                             <div class="ml-3 text-gray-900 whitespace-no-wrap">
                                 <div class="flex items-center">
@@ -100,4 +109,149 @@
         </x-slot>
     </x-table>
 </div>
+<div id="kopkb-transactions-summary" class="container hidden p-4 mx-auto bg-yellow-50 tab-content">
+    <x-filter-date-card title="Billplz Transaction Summary"
+        action="{{ route('transaction.online.billplz-transaction-summary.index') }}" :selectedDate="$date" />
+
+    <div class="container px-4 mx-auto">
+        <div class="flex flex-col items-center">
+            <div class="flex flex-row mt-6 space-x-4">
+                <x-card title="Sum of Billplz Transactions" subtitle="{{ $sumOfBillplzTransactions }}"></x-card>
+                <div class="flex items-center"><span class="text-5xl font-bold">-</span></div>
+                <x-card title="Sum of Arrahn Transactions" subtitle="{{ $sumOfArrahnTransactions }}"></x-card>
+                <div class="flex items-center"><span class="text-5xl font-bold"> = </span></div>
+                <x-card title="Payment Gateway Cost" subtitle="{{ $paymentGatewayCost }}"></x-card>
+            </div>
+            <hr class="w-full my-4 border-b-2 border-gray-300 border-solid">
+            <div class="flex flex-row mb-6 space-x-4">
+                <x-card title="No of Arrahn Transactions" subtitle="{{ $numberOfArrahnTransactions }}"></x-card>
+                <div class="flex items-center"><span class="text-5xl font-bold">x</span></div>
+                <x-card title="Charge Per Transaction" subtitle="RM 1.00"></x-card>
+                <div class="flex items-center"><span class="text-5xl font-bold"> = </span></div>
+                <x-card title="Payment Gateway Cost"
+                    subtitle="RM {{ number_format(($numberOfArrahnTransactions * 100) / 100, 2) }}"></x-card>
+            </div>
+        </div>
+    </div>
+    <x-table>
+        <x-slot name="header">
+            <x-table.header content="No." />
+            <x-table.header content="billplz_id" />
+            <x-table.header content="Transaction Arrahn" />
+            <x-table.header content="Transaction Billplz" />
+        </x-slot>
+        <x-slot name="body">
+            @forelse ($billPlzTransactionSummary as $data)
+                <tr>
+                    <x-table.data :content="$loop->iteration" />
+                    <x-table.data :content="$data['billplz_bill']['id']" />
+                    <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
+                        @foreach ($data['arrahn_transactions'] as $arrahn_transaction)
+                            <div class="flex items-center">
+                                <div class="ml-3 text-gray-900 whitespace-no-wrap">
+                                    <div class="flex items-center">
+                                        <div class="ml-3">
+                                            <p class="text-gray-900 whitespace-no-wrap">
+                                                status : <span
+                                                    class="inline-block bg-green-600 text-white px-2 py-0.5 rounded text-xs font-medium">{{ $arrahn_transaction['status'] }}</span>
+                                                <br>
+                                                total_payment:
+                                                {{ number_format((float) $arrahn_transaction['total_payment'], 2, '.', '') }}<br>
+                                                norujukan: {{ $arrahn_transaction['norujukan'] }}
+
+                                            </p>
+                                            <br>
+                                            <p class="text-gray-900 whitespace-no-wrap">
+                                                kodcaw: {{ $arrahn_transaction['kodcaw'] }} <br>
+                                                customer_name: {{ $arrahn_transaction['customer_name'] }} <br>
+                                            </p>
+                                        </div>
+                                    </div>
+                                    <br>
+                                </div>
+                            </div>
+                        @endforeach
+                    </td>
+                    <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
+                        <div class="flex items-center">
+                            <div class="ml-3 text-gray-900 whitespace-no-wrap">
+                                <div class="flex items-center">
+                                    <div class="ml-3">
+                                        <p class="text-gray-900 whitespace-no-wrap">
+                                            billplz_status : <span
+                                                class="inline-block bg-green-600 text-white px-2 py-0.5 rounded text-xs font-medium">{{ $data['billplz_bill']['state'] ?? '' }}</span>
+                                            <br>
+                                            billplz_paid_amount:
+                                            {{ number_format($data['billplz_bill']['paid_amount']['amount'] / 100, 2, '.', '') }}
+                                            <br>
+                                        </p>
+                                    </div>
+                                </div>
+                                <br>
+                            </div>
+                        </div>
+                    </td>
+                </tr>
+            @empty
+                <tr>
+                    <x-table.data colspan="3" class="text-center" content="No data available" />
+                </tr>
+            @endforelse
+        </x-slot>
+    </x-table>
+</div>
+</div>
 @endsection
+@push('additional_scripts')
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const tabButtons = document.querySelectorAll('.tab-button');
+            const tabContents = document.querySelectorAll('.tab-content');
+
+            tabButtons.forEach(button => {
+                button.addEventListener('click', () => {
+                    const tabId = button.getAttribute('data-tab');
+
+                    // Deactivate all tabs
+                    tabButtons.forEach(btn => btn.classList.remove('active'));
+                    tabContents.forEach(content => content.classList.remove('active'));
+
+                    // Activate the clicked tab
+                    button.classList.add('active');
+                    console.log(tabId)
+                    document.getElementById(tabId).classList.add('active');
+                });
+            });
+        });
+    </script>
+@endpush
+
+@push('additional_styles')
+    <style>
+        .tab-button {
+            padding: 10px 15px;
+            background-color: #f3f4f6;
+            border: none;
+            cursor: pointer;
+            transition: background-color 0.3s;
+        }
+        
+        .tab-button.active {
+            background-color: #ffffff;
+            border-bottom: 2px solid #3b82f6;
+        }
+        
+        .tab-button-diff.active {
+            background-color: #f87171;
+        }
+
+        .tab-content {
+            display: none;
+        }
+
+        .tab-content.active {
+            display: block;
+        }
+
+    </style>
+@endpush