diff --git a/app/Livewire/InvoiceDataTable.php b/app/Livewire/InvoiceDataTable.php
index 99ee2f8..3566887 100644
--- a/app/Livewire/InvoiceDataTable.php
+++ b/app/Livewire/InvoiceDataTable.php
@@ -8,9 +8,15 @@ use Filament\Facades\Filament;
 use Filament\Notifications\Notification;
 use Livewire\Component;
 use Str;
+use Livewire\Attributes\On;
+use Livewire\WithPagination;
 
 class InvoiceDataTable extends Component
 {
+
+    use WithPagination;
+
+    protected $paginationTheme = 'tailwind';
     public $invoiceData = [];
 
     public $plantId = 0;
@@ -176,10 +182,13 @@ class InvoiceDataTable extends Component
     //     }
     // }
 
+    // #[On('refreshInvoiceData')]
+
     public function loadData($invoiceNumber, $plantId, $onCapFocus = false)
     {
-        $this->plantId = $plantId;
         $this->invoiceNumber = $invoiceNumber;
+        $this->plantId = $plantId;
+
         $this->completedInvoice = false;
         $this->isSerial = true;
         $this->onCapFocus = $onCapFocus;
@@ -187,78 +196,144 @@ class InvoiceDataTable extends Component
         $this->hasSearched = true;
         $this->materialInvoice = false;
 
-        // Eager load stickerMasterRelation and item
-        $invoiceRecords = InvoiceValidation::with('stickerMasterRelation.item')
-            ->where('invoice_number', $invoiceNumber)
-            ->where('plant_id', $plantId)
-            ->whereNull('scanned_status')
-            ->get();
+        $this->resetPage();
 
-        $this->invoiceData = [];
-        $this->packageCount = 0;
+        $this->packageCount = InvoiceValidation::with('stickerMasterRelation')
+            ->where('invoice_number', $this->invoiceNumber)
+            ->where('plant_id', $this->plantId)
+            ->get()
+            ->sum(function ($record) {
+                $sm = $record->stickerMasterRelation;
 
-        foreach ($invoiceRecords as $record) {
-            $sm = $record->stickerMasterRelation;
+                $stickCount = 0;
+                $scannedCount = 0;
 
-            // Compute code
-            $rowCode = $sm?->item?->code ?? 'N/A';
+                if ($sm) {
+                    // Panel box
+                    if (strlen($sm->panel_box_code) > 0) $stickCount++;
 
-            $stickCount = 0;
-            $scannedCount = 0;
-
-            if ($sm) {
-                // Panel box code
-                if (Str::length($sm->panel_box_code) > 0) {
-                    $stickCount++;
+                    // Tube stickers
+                    if ($sm->tube_sticker_motor || $sm->tube_sticker_pump || $sm->tube_sticker_pumpset) {
+                        $stickCount += $sm->tube_sticker_motor ? 1 : 0;
+                        $stickCount += ($sm->tube_sticker_pump || ($sm->tube_sticker_pumpset != 1 && !$sm->tube_sticker_pump && $sm->pack_slip_pump)) ? 1 : 0;
+                        $stickCount += $sm->tube_sticker_pumpset ? 1 : 0;
+                    }
+                    // Pack slips (only if tube stickers not applied)
+                    elseif ($sm->pack_slip_motor || $sm->pack_slip_pump || $sm->pack_slip_pumpset) {
+                        $stickCount += $sm->pack_slip_motor ? 1 : 0;
+                        $stickCount += $sm->pack_slip_pump ? 1 : 0;
+                        $stickCount += $sm->pack_slip_pumpset ? 1 : 0;
+                    }
                 }
 
-                // Tube stickers logic
-                if ($sm->tube_sticker_motor == 1 || $sm->tube_sticker_pump == 1 || $sm->tube_sticker_pumpset == 1) {
-                    if ($sm->tube_sticker_motor == 1) $stickCount++;
-                    if ($sm->tube_sticker_pump == 1 || ($sm->tube_sticker_pumpset != 1 && $sm->tube_sticker_pump != 1 && $sm->pack_slip_pump == 1)) $stickCount++;
-                    if ($sm->tube_sticker_pumpset == 1) $stickCount++;
-                }
-                // Pack slip logic (only if tube sticker block didn't apply)
-                elseif ($sm->pack_slip_motor == 1 || $sm->pack_slip_pump == 1 || $sm->pack_slip_pumpset == 1) {
-                    if ($sm->pack_slip_motor == 1) $stickCount++;
-                    if ($sm->pack_slip_pump == 1) $stickCount++;
-                    if ($sm->pack_slip_pumpset == 1) $stickCount++;
-                }
-            }
+                // Already scanned
+                $scannedCount += $record->motor_scanned_status == 1 ? 1 : 0;
+                $scannedCount += $record->pump_scanned_status == 1 ? 1 : 0;
+                $scannedCount += $record->capacitor_scanned_status == 1 ? 1 : 0;
+                $scannedCount += $record->scanned_status_set == 1 ? 1 : 0;
 
-            // Count already scanned
-            $scannedCount += ($record->motor_scanned_status == 1) ? 1 : 0;
-            $scannedCount += ($record->pump_scanned_status == 1) ? 1 : 0;
-            $scannedCount += ($record->capacitor_scanned_status == 1) ? 1 : 0;
-            $scannedCount += ($record->scanned_status_set == 1) ? 1 : 0;
+                return max($stickCount - $scannedCount, 0);
+            });
 
-            // Increment packageCount
-            $this->packageCount += max($stickCount - $scannedCount, 0);
-
-            $this->invoiceData[] = [
-                'sticker_master_id' => $record->sticker_master_id,
-                'serial_number' => $record->serial_number,
-                'motor_scanned_status' => $record->motor_scanned_status ?? '',
-                'pump_scanned_status' => $record->pump_scanned_status ?? '',
-                'capacitor_scanned_status' => $record->capacitor_scanned_status ?? '',
-                'scanned_status_set' => $record->scanned_status_set ?? '',
-                'scanned_status' => $record->scanned_status ?? '',
-                'panel_box_supplier' => $record->panel_box_supplier ?? '',
-                'panel_box_serial_number' => $record->panel_box_serial_number ?? '',
-                'created_at' => $record->created_at,
-                'operator_id' => $record->operator_id,
-                'code' => $rowCode,
-                'stickCount' => $stickCount,
-            ];
-        }
-
-        if ($onCapFocus) {
-            $this->dispatch('focus-capacitor-input');
-        } else {
-            $this->dispatch('focus-serial-number');
-        }
+        $this->dispatch($onCapFocus ? 'focus-capacitor-input' : 'focus-serial-number');
     }
 
+    public function getInvoiceRecordsProperty()
+    {
+        if (! $this->hasSearched) {
+            return collect();
+        }
+
+        return InvoiceValidation::with('stickerMasterRelation.item')
+            ->where('invoice_number', $this->invoiceNumber)
+            ->where('plant_id', $this->plantId)
+            ->whereNull('scanned_status')
+            ->paginate(7);
+    }
+
+    // public function loadData($invoiceNumber, $plantId, $onCapFocus = false)
+    // {
+    //     $this->plantId = $plantId;
+    //     $this->invoiceNumber = $invoiceNumber;
+    //     $this->completedInvoice = false;
+    //     $this->isSerial = true;
+    //     $this->onCapFocus = $onCapFocus;
+    //     $this->emptyInvoice = false;
+    //     $this->hasSearched = true;
+    //     $this->materialInvoice = false;
+
+    //     // Eager load stickerMasterRelation and item
+    //     $invoiceRecords = InvoiceValidation::with('stickerMasterRelation.item')
+    //         ->where('invoice_number', $invoiceNumber)
+    //         ->where('plant_id', $plantId)
+    //         ->whereNull('scanned_status')
+    //         ->get();
+
+    //     $this->invoiceData = [];
+    //     $this->packageCount = 0;
+
+    //     foreach ($invoiceRecords as $record) {
+    //         $sm = $record->stickerMasterRelation;
+
+    //         // Compute code
+    //         $rowCode = $sm?->item?->code ?? 'N/A';
+
+    //         $stickCount = 0;
+    //         $scannedCount = 0;
+
+    //         if ($sm) {
+    //             // Panel box code
+    //             if (Str::length($sm->panel_box_code) > 0) {
+    //                 $stickCount++;
+    //             }
+    //             // Tube stickers logic
+    //             if ($sm->tube_sticker_motor == 1 || $sm->tube_sticker_pump == 1 || $sm->tube_sticker_pumpset == 1) {
+    //                 if ($sm->tube_sticker_motor == 1) $stickCount++;
+    //                 if ($sm->tube_sticker_pump == 1 || ($sm->tube_sticker_pumpset != 1 && $sm->tube_sticker_pump != 1 && $sm->pack_slip_pump == 1)) $stickCount++;
+    //                 if ($sm->tube_sticker_pumpset == 1) $stickCount++;
+    //             }
+    //             // Pack slip logic (only if tube sticker block didn't apply)
+    //             elseif ($sm->pack_slip_motor == 1 || $sm->pack_slip_pump == 1 || $sm->pack_slip_pumpset == 1) {
+    //                 if ($sm->pack_slip_motor == 1) $stickCount++;
+    //                 if ($sm->pack_slip_pump == 1) $stickCount++;
+    //                 if ($sm->pack_slip_pumpset == 1) $stickCount++;
+    //             }
+    //         }
+
+    //         // Count already scanned
+    //         $scannedCount += ($record->motor_scanned_status == 1) ? 1 : 0;
+    //         $scannedCount += ($record->pump_scanned_status == 1) ? 1 : 0;
+    //         $scannedCount += ($record->capacitor_scanned_status == 1) ? 1 : 0;
+    //         $scannedCount += ($record->scanned_status_set == 1) ? 1 : 0;
+
+    //         // Increment packageCount
+    //         $this->packageCount += max($stickCount - $scannedCount, 0);
+
+    //         $this->invoiceData[] = [
+    //             'sticker_master_id' => $record->sticker_master_id,
+    //             'serial_number' => $record->serial_number,
+    //             'motor_scanned_status' => $record->motor_scanned_status ?? '',
+    //             'pump_scanned_status' => $record->pump_scanned_status ?? '',
+    //             'capacitor_scanned_status' => $record->capacitor_scanned_status ?? '',
+    //             'scanned_status_set' => $record->scanned_status_set ?? '',
+    //             'scanned_status' => $record->scanned_status ?? '',
+    //             'panel_box_supplier' => $record->panel_box_supplier ?? '',
+    //             'panel_box_serial_number' => $record->panel_box_serial_number ?? '',
+    //             'created_at' => $record->created_at,
+    //             'operator_id' => $record->operator_id,
+    //             'code' => $rowCode,
+    //             'stickCount' => $stickCount,
+    //         ];
+    //     }
+
+    //     if ($onCapFocus) {
+    //         $this->dispatch('focus-capacitor-input');
+    //     } else {
+    //         $this->dispatch('focus-serial-number');
+    //     }
+    // }
+
+
     public function loadMaterialData($invoiceNumber, $plantId)
     {
         $this->plantId = $plantId;
@@ -480,8 +555,15 @@ class InvoiceDataTable extends Component
         $this->dispatch('focus-serial-number');
     }
 
+    // public function render()
+    // {
+    //     return view('livewire.invoice-data-table');
+    // }
+
     public function render()
     {
-        return view('livewire.invoice-data-table');
+        return view('livewire.invoice-data-table', [
+            'records' => $this->invoiceRecords,
+        ]);
     }
 }
diff --git a/resources/views/livewire/invoice-data-table.blade.php b/resources/views/livewire/invoice-data-table.blade.php
index baa23be..09dacf7 100644
--- a/resources/views/livewire/invoice-data-table.blade.php
+++ b/resources/views/livewire/invoice-data-table.blade.php
@@ -18,9 +18,29 @@
                 @endif
             @endif
         </h2>
-        <div class="mt-2">
+
+        <!-- Serial Number Search Bar -->
+
+        {{-- <div class="flex items-center space-x-2">
+        <input
+            type="text"
+            wire:model.debounce.500ms="serialSearch"
+            placeholder="Check Serial Number..."
+            class="border border-gray-300 rounded px-3 py-1 focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500"
+        />
+        <button
+            wire:click="checkSerialNumber"
+            class="bg-indigo-600 text-white px-3 py-1 rounded hover:bg-indigo-700"
+        >
+            Search
+        </button>
+    </div> --}}
+
+
+    </div>
+
+    <div class="mt-2">
             <hr class="border-t-2 border-gray-300">
-        </div>
     </div>
 
     {{-- Modal for completed invoice--}}
@@ -44,11 +64,11 @@
     @endif
 
     {{-- Modal for serial invoice--}}
-    @if ($hasSearched)
+    {{-- @if ($hasSearched)
         <div class="overflow-x-auto overflow-y-visible" style="height: 385px;">
-            {{-- <table class="min-w-[1500px] text-sm text-center border border-gray-300"> --}}
-                {{-- <table class="table-fixed min-w-[1500px] text-sm text-center border border-gray-300"> --}}
-            <table class="min-w-full text-sm text-center border border-gray-300">
+            <table class="min-w-[1500px] text-sm text-center border border-gray-300">
+            <table class="table-fixed min-w-[1500px] text-sm text-center border border-gray-300">
+             <table class="min-w-full text-sm text-center border border-gray-300">
                 <thead class="bg-gray-100 font-bold">
                     <tr>
                         <th class="border px-4 py-2">No</th>
@@ -91,6 +111,59 @@
                 </tbody>
             </table>
         </div>
+    @endif --}}
+
+
+
+    @if ($hasSearched)
+    <div class="overflow-x-auto" style="height: 385px;">
+        <table class="min-w-full text-sm text-center border border-gray-300">
+            <thead class="bg-gray-100 font-bold sticky top-0 z-10">
+                <tr>
+                    <th class="border px-4 py-2">No</th>
+                    <th class="border px-4 py-2">Material Code</th>
+                    <th class="border px-4 py-2">Serial Number</th>
+                    <th class="border px-4 py-2">Motor Scanned Status</th>
+                    <th class="border px-4 py-2">Pump Scanned Status</th>
+                    <th class="border px-4 py-2">Capacitor Scanned Status</th>
+                    <th class="border px-4 py-2">Scanned Status Set</th>
+                    <th class="border px-4 py-2">Scanned Status</th>
+                    <th class="border px-4 py-2 w-[300px] whitespace-nowrap">Time Stamp</th>
+                    <th class="border px-4 py-2">Operator ID</th>
+                    <th class="border px-4 py-2">Panel Box Supplier</th>
+                    <th class="border px-4 py-2">Panel Box Serial Number</th>
+                </tr>
+            </thead>
+
+            <tbody>
+                @forelse ($records as $index => $record)
+                    <tr wire:key="inv-{{ $record->id }}" class="border-t">
+                        <td class="border px-2 py-2">{{ $records->firstItem() + $index }}</td>
+                        <td class="border px-2 py-2">{{ $record->stickerMasterRelation?->item?->code ?? 'N/A' }}</td>
+                        <td class="border px-2 py-2">{{ $record->serial_number ?? 'N/A' }}</td>
+                        <td class="border px-2 py-2">{{ $record->motor_scanned_status ? '1' : '' }}</td>
+                        <td class="border px-2 py-2">{{ $record->pump_scanned_status ? '1' : '' }}</td>
+                        <td class="border px-2 py-2">{{ $record->capacitor_scanned_status ? '1' : '' }}</td>
+                        <td class="border px-2 py-2">{{ $record->scanned_status_set ? '1' : '' }}</td>
+                        <td class="border px-2 py-2">{{ $record->scanned_status ?? '' }}</td>
+                        <td class="border px-2 py-2 whitespace-nowrap">{{ optional($record->created_at)->format('d-m-Y H:i:s') }}</td>
+                        <td class="border px-2 py-2">{{ $record->operator_id ?? '' }}</td>
+                        <td class="border px-2 py-2">{{ $record->panel_box_supplier ?? '' }}</td>
+                        <td class="border px-2 py-2">{{ $record->panel_box_serial_number ?? '' }}</td>
+                    </tr>
+                @empty
+                    <tr>
+                        <td colspan="12" class="py-4 text-gray-500">
+                            No data found for invoice <strong>{{ $invoiceNumber }}</strong>
+                        </td>
+                    </tr>
+                @endforelse
+            </tbody>
+        </table>
+        <div class="mt-3 flex justify-center">
+            {{ $records->onEachSide(3)->links() }}
+        </div>
+    </div>
     @endif
 
     {{-- Modal for Capacitor Input --}}