diff --git a/resources/views/fields/camera-capture.blade.php b/resources/views/fields/camera-capture.blade.php
index 415a0bb..5071431 100644
--- a/resources/views/fields/camera-capture.blade.php
+++ b/resources/views/fields/camera-capture.blade.php
@@ -729,7 +729,6 @@ function cameraCapture() {
 
     <div class="flex space-x-4 mt-2">
         <x-filament::button color="primary" @click="switchCamera">Switch Camera</x-filament::button>
-        <x-filament::button color="primary" @click="retakePhoto" x-show="photoTaken" class="inline-flex w-auto">Retake</x-filament::button>
         <x-filament::button color="success" @click="capturePhoto">Capture Photo</x-filament::button>
         <x-filament::button color="warning" @click="verifyPhoto">Verify</x-filament::button>
     </div>
@@ -757,49 +756,32 @@ function cameraCapture() {
         capturedPhoto: null, // store captured image
         serialNumbers: [],
 
-        // async initCamera() {
-        //     try {
-        //         if (this.stream) this.stream.getTracks().forEach(track => track.stop());
-
-        //         const video = this.$refs.video;
-        //         this.stream = await navigator.mediaDevices.getUserMedia({
-        //             video: { facingMode: this.currentFacingMode }
-        //         });
-
-        //         video.srcObject = this.stream;
-        //         await new Promise(resolve => video.onloadedmetadata = resolve);
-        //         video.play();
-
-        //         // Overlay size matches video
-        //         const overlay = this.$refs.overlay;
-        //         overlay.width = video.videoWidth;
-        //         overlay.height = video.videoHeight;
-
-        //         this.startDetection();
-        //     } catch (err) {
-        //         console.error("Camera error:", err);
-        //         alert("Camera error:\n" + (err.message || err));
-        //         this.stopDetection();
-        //     }
-        // },
-
         async initCamera() {
             try {
                 if (this.stream) this.stream.getTracks().forEach(track => track.stop());
 
+                const video = this.$refs.video;
                 this.stream = await navigator.mediaDevices.getUserMedia({
                     video: { facingMode: this.currentFacingMode }
                 });
 
-                this.$refs.video.srcObject = this.stream;
+                video.srcObject = this.stream;
+                await new Promise(resolve => video.onloadedmetadata = resolve);
+                video.play();
+
+                // Overlay size matches video
+                const overlay = this.$refs.overlay;
+                overlay.width = video.videoWidth;
+                overlay.height = video.videoHeight;
+
                 this.startDetection();
             } catch (err) {
                 console.error("Camera error:", err);
-                alert("Cannot access camera. Enable permissions or use HTTPS.");
+                alert("Camera error:\n" + (err.message || err));
+                this.stopDetection();
             }
         },
 
-
         async switchCamera() {
             this.currentFacingMode = this.currentFacingMode === 'user' ? 'environment' : 'user';
             await this.initCamera();
@@ -840,30 +822,36 @@ function cameraCapture() {
         //     this.stopDetection();
         // },
 
-        capturePhoto() {
-            const video = this.$refs.video;
-            const canvas = this.$refs.canvas;
-            const snapshot = this.$refs.snapshot;
-            const context = canvas.getContext('2d');
 
-            canvas.width = video.videoWidth;
-            canvas.height = video.videoHeight;
+        async capturePhoto() {
+    const video = this.$refs.video;
+    const canvas = this.$refs.canvas;
+    const overlay = this.$refs.overlay;
+    const snapshot = this.$refs.snapshot; // ✅ Fix: define snapshot reference
+    const ctx = canvas.getContext('2d');
 
-            context.drawImage(video, 0, 0, canvas.width, canvas.height);
+    canvas.width = video.videoWidth;
+    canvas.height = video.videoHeight;
+    ctx.drawImage(video, 0, 0);
 
-            //const dataUrl = canvas.toDataURL('image/png');
-            const dataUrl = canvas.toDataURL('image/jpeg', 0.95);
+    const snapshotData = canvas.toDataURL('image/png'); // ✅ Correct data var
+    this.$refs.hiddenInput.value = snapshotData;
+    this.capturedPhoto = snapshotData;
 
-            if (this.stream) this.stream.getTracks().forEach(track => track.stop());
+    // ✅ Stop camera
+    if (this.stream) this.stream.getTracks().forEach(track => track.stop());
 
-            snapshot.src = dataUrl;
-            snapshot.classList.remove('hidden');
-            video.classList.add('hidden');
-            this.photoTaken = true;
+    // ✅ Hide video + overlay
+    video.classList.add('hidden');
+    overlay.classList.add('hidden');
 
-            this.$refs.hiddenInput.value = dataUrl;
-            console.log('Captured Image:', dataUrl);
-        },
+    // ✅ Show captured image
+    snapshot.src = snapshotData; // ✅ Correct variable
+    snapshot.classList.remove('hidden');
+
+    alert("Photo captured!");
+    this.stopDetection();
+},
 
         async verifyPhoto() {
             if (!this.capturedPhoto) {
@@ -933,14 +921,6 @@ function cameraCapture() {
             }
         },
 
-
-        async retakePhoto() {
-            this.photoTaken = false;
-            this.$refs.snapshot.classList.add('hidden');
-            this.$refs.video.classList.remove('hidden');
-            await this.initCamera();
-        },
-
         startDetection() {
             if (this.textDetectionInterval) clearInterval(this.textDetectionInterval);
             this.textDetectionInterval = setInterval(() => this.detectText(), 1000);