diff --git a/resources/views/fields/camera-capture.blade.php b/resources/views/fields/camera-capture.blade.php
index 5dfd84f..b9627a1 100644
--- a/resources/views/fields/camera-capture.blade.php
+++ b/resources/views/fields/camera-capture.blade.php
@@ -288,6 +288,7 @@ document.addEventListener('DOMContentLoaded', () => {
         <x-filament::button color="primary" @click="switchCamera" x-show="!photoTaken" class="inline-flex w-auto">Switch Camera</x-filament::button>
         <x-filament::button color="primary" @click="verify" x-show="photoTaken" class="inline-flex w-auto">Verify</x-filament::button>
         <x-filament::button color="success" @click="uploadCroppedImage" x-show="photoTaken">OK ✔ Upload Cropped</x-filament::button>
+        <x-filament::button color="success" @click="uploadOcr" x-show="photoTaken">Upload OCR</x-filament::button>
     </div>
 
     <input type="hidden" x-ref="hiddenInput" x-model="photo1" name="camera_capture_file">
@@ -340,43 +341,39 @@ function cameraCapture() {
             const snapshot = this.$refs.snapshot;
             snapshot.src = canvas.toDataURL('image/png');
 
+            //Wait until image is loaded
+            snapshot.onload = () => {
+                snapshot.classList.remove('hidden');
+                video.classList.add('hidden');
 
-// ✅ Wait until image is loaded
-snapshot.onload = () => {
+                //Alpine reactive update inside nextTick
+                this.$nextTick(() => {
+                    this.photoTaken = true;
 
-    // ✅ Make snapshot visible for Cropper
-    snapshot.classList.remove('hidden');
-    video.classList.add('hidden');
+                    //Destroy old cropper if exists
+                    if (this.cropper) this.cropper.destroy();
 
-    // ✅ Alpine reactive update inside nextTick
-    this.$nextTick(() => {
-        this.photoTaken = true;
+                    // ✅ Use requestAnimationFrame to ensure browser painted the image
+                    requestAnimationFrame(() => {
+                        this.cropper = new Cropper(snapshot, {
+                            aspectRatio: NaN,
+                            dragMode: 'crop',
+                            viewMode: 1,
+                            autoCropArea: 0.8,
+                            background: true,
+                            movable: true,
+                            zoomable: true,
+                            responsive: true,
+                        });
+                        console.log("✅ Cropper initialized");
+                    });
 
-        // ✅ Destroy old cropper if exists
-        if (this.cropper) this.cropper.destroy();
-
-        // ✅ Use requestAnimationFrame to ensure browser painted the image
-        requestAnimationFrame(() => {
-            this.cropper = new Cropper(snapshot, {
-                aspectRatio: NaN,
-                dragMode: 'crop',
-                viewMode: 1,
-                autoCropArea: 0.8,
-                background: true,
-                movable: true,
-                zoomable: true,
-                responsive: true,
-            });
-            console.log("✅ Cropper initialized");
-        });
-
-        this.stopCamera(); // stop camera after Cropper starts
-    });
-};
+                    this.stopCamera(); // stop camera after Cropper starts
+                });
+            };
 
         },
 
-
         //
         async uploadCroppedImage() {
 
@@ -436,9 +433,17 @@ snapshot.onload = () => {
                 //     console.error(data.text);
                 // }
                 if (data.success) {
-                    const serials = Array.isArray(data.text) ? data.text.join("\n") : data.text;
-                    alert("OCR Result:\n" + serials);
-                    console.log(serials);
+                    // const serials = Array.isArray(data.text) ? data.text.join("\n") : data.text;
+                    // alert("OCR Result:\n" + serials);
+                    // console.log(serials);
+                    const serials = Array.isArray(data.text) ? data.text : [data.text];
+                    const firstFour = serials.slice(0, 4);
+
+                    // Emit Livewire event to Resource Page
+                    Livewire.emit('fillSerialNumbers', firstFour);
+
+                    alert("OCR Result:\n" + firstFour.join("\n"));
+                    console.log("Serials sent to Resource Page:", firstFour);
                 }
                 else {
                     alert("OCR Failed: " + data.error);