diff --git a/resources/views/fields/camera-capture.blade.php b/resources/views/fields/camera-capture.blade.php
index 17818a8..583bdf3 100644
--- a/resources/views/fields/camera-capture.blade.php
+++ b/resources/views/fields/camera-capture.blade.php
@@ -276,7 +276,11 @@ document.addEventListener('DOMContentLoaded', () => {
 
     <canvas x-ref="canvas" class="hidden"></canvas>
 
-    <img x-ref="snapshot" class="hidden border rounded max-w-full">
+    {{-- <img x-ref="snapshot" class="hidden border rounded max-w-full"> --}}
+    <img x-ref="snapshot"
+     class="hidden border rounded"
+     style="width: 100%; max-width: 350px; height: auto;">
+
 
     <div class="flex space-x-4 mt-2">
         <x-filament::button color="primary" @click="capturePhoto" x-show="!photoTaken">Capture</x-filament::button>
@@ -324,41 +328,42 @@ function cameraCapture() {
         },
 
 
-       async capturePhoto() {
-            const video = this.$refs.video;
-            const canvas = this.$refs.canvas;
-            const ctx = canvas.getContext('2d');
+     async capturePhoto() {
+    const video = this.$refs.video;
+    const canvas = this.$refs.canvas;
+    const ctx = canvas.getContext('2d');
 
-            canvas.width = video.videoWidth;
-            canvas.height = video.videoHeight;
-            ctx.drawImage(video, 0, 0);
+    canvas.width = video.videoWidth;
+    canvas.height = video.videoHeight;
+    ctx.drawImage(video, 0, 0);
 
-            const snapshot = this.$refs.snapshot;
+    const snapshot = this.$refs.snapshot;
+    snapshot.src = canvas.toDataURL('image/png');
 
-            snapshot.src = canvas.toDataURL('image/png');
+    // ✅ Wait until the SNAPSHOT image loads before cropper!
+    snapshot.onload = () => {
+        snapshot.classList.remove('hidden');
+        video.classList.add('hidden');
 
-            // ✅ Show cropped image view first
-            snapshot.onload = () => {
-                snapshot.classList.remove('hidden');
-                video.classList.add('hidden');
-                this.photoTaken = true;
-                this.stopCamera();
+        this.photoTaken = true;
+        this.stopCamera(); // ✅ Now camera turns off immediately
+
+        // ✅ Ensure previous cropper destroyed
+        if (this.cropper) {
+            this.cropper.destroy();
+        }
+
+        // ✅ Start Cropper only after image rendered
+        this.cropper = new Cropper(snapshot, {
+            aspectRatio: NaN,
+            dragMode: 'crop',
+            viewMode: 1,
+            autoCropArea: 1,
+            background: false,
+        });
+    };
+},
 
-                // ✅ Now start Cropper (only after image becomes visible)
-                // this.cropper?.destroy();
-                // this.cropper = new Cropper(snapshot, {
-                //     aspectRatio: NaN, // free crop
-                //     dragMode: 'crop',
-                //     viewMode: 1,
-                //     autoCropArea: 0.8,
-                //     background: false,
-                // });
-                this.cropper = new Cropper(snapshot, {
-                    aspectRatio: NaN, // User free crop area
-                    viewMode: 1
-                });
-            };
-        },
 
         //
         async uploadCroppedImage() {