diff --git a/app/Livewire/StickerPrintData.php b/app/Livewire/StickerPrintData.php
new file mode 100644
index 0000000..96ccdfa
--- /dev/null
+++ b/app/Livewire/StickerPrintData.php
@@ -0,0 +1,55 @@
+<?php
+
+namespace App\Livewire;
+
+use Livewire\Component;
+use App\Models\StickerPrinting;
+
+class StickerPrintData extends Component
+{
+    public $plantId;
+
+    public $refNumber;
+
+    public $serialNumber;
+
+    public bool $materialInvoice = false;
+
+    public $records = [];
+
+    protected $listeners = [
+        'refreshEmptySticker' => 'loadStickerData',
+        'addStickerToList' => 'loadSticker'
+    ];
+
+    public function loadStickerData($plantId, $refNumber)
+    {
+        $this->plantId = $plantId;
+        $this->refNumber = $refNumber;
+        $this->materialInvoice = true;
+
+        $this->records = StickerPrinting::where('plant_id', $plantId)
+        ->where('reference_number', $refNumber)
+        ->orderBy('created_at', 'asc')
+        ->get(['serial_number', 'created_by']);
+
+    }
+
+    public function loadSticker($plantId, $refNumber, $serialNumber)
+    {
+
+        $this->plantId = $plantId;
+        $this->refNumber = $refNumber;
+        $this->materialInvoice = true;
+
+        $this->records = StickerPrinting::where('plant_id', $plantId)
+        ->where('reference_number', $refNumber)
+        ->orderBy('created_at', 'asc')
+        ->get(['serial_number', 'created_by']);
+    }
+
+    public function render()
+    {
+        return view('livewire.sticker-print-data');
+    }
+}
diff --git a/resources/views/livewire/sticker-print-data.blade.php b/resources/views/livewire/sticker-print-data.blade.php
new file mode 100644
index 0000000..703be25
--- /dev/null
+++ b/resources/views/livewire/sticker-print-data.blade.php
@@ -0,0 +1,79 @@
+
+{{-- <div class="overflow-x-auto overflow-y-visible" style="height: 385px;">
+<table class="table-auto w-full border-collapse border">
+    <thead class="bg-gray-100">
+        <tr>
+            <th class="border p-2">No</th>
+            <th class="border p-2">Reference No</th>
+            <th class="border p-2">Serial Number</th>
+            <th class="border p-2">Created By</th>
+        </tr>
+    </thead>
+    <tbody>
+        @forelse($records as $index => $record)
+            <tr>
+                <td class="border p-2 text-center">{{ $index + 1 }}</td>
+                <td class="border p-2 text-center">{{ $refNumber }}</td>
+                <td class="border p-2 text-center">{{ $record['serial_number'] }}</td>
+                <td class="border p-2 text-center">{{ $record->created_by }}</td>
+            </tr>
+        @empty
+            <tr>
+                <td class="border p-2 text-center" colspan="4">No serial numbers found.</td>
+            </tr>
+        @endforelse
+    </tbody>
+</table>
+</div> --}}
+
+<div>
+    <h3 class="text-lg font-semibold mb-2">Sticker Printing Table</h3>
+
+    <div
+        wire:loading.remove
+        @if(!$materialInvoice) style="display:none" @endif
+        class="overflow-x-auto overflow-y-visible"
+        style="height: 385px;"
+    >
+    <table class="table-auto w-full border-collapse border">
+        <thead class="bg-gray-100">
+            <tr>
+                <th class="border p-2">No</th>
+                <th class="border p-2">Reference No</th>
+                <th class="border p-2">Serial Number</th>
+                <th class="border p-2">Created By</th>
+            </tr>
+        </thead>
+        <tbody>
+            @forelse($records as $index => $record)
+                <tr>
+                    <td class="border p-2 text-center">{{ $index + 1 }}</td>
+                    <td class="border p-2 text-center">{{ $refNumber }}</td>
+                    <td class="border p-2 text-center">{{ $record['serial_number'] }}</td>
+                    <td class="border p-2 text-center">{{ $record->created_by }}</td>
+                </tr>
+            @empty
+                <tr>
+                    <td class="border p-2 text-center" colspan="4">No serial numbers found.</td>
+                </tr>
+            @endforelse
+        </tbody>
+    </table>
+</div>
+
+
+<script>
+    window.addEventListener('focus-serial-number', () => {
+        setTimeout(() => {
+            const container = document.getElementById('serial_number_input');
+            const input = container?.querySelector('input'); // gets the actual input inside
+
+            if (input) {
+                input.focus();
+                input.select();
+            }
+        }, 50);
+    });
+</script>
+
+