diff --git a/resources/views/fields/camera-capture.blade.php b/resources/views/fields/camera-capture.blade.php
index f64f1bf..5dfd84f 100644
--- a/resources/views/fields/camera-capture.blade.php
+++ b/resources/views/fields/camera-capture.blade.php
@@ -340,35 +340,39 @@ function cameraCapture() {
             const snapshot = this.$refs.snapshot;
             snapshot.src = canvas.toDataURL('image/png');
 
-          snapshot.onload = () => {
-                snapshot.classList.remove('hidden');
-                video.classList.add('hidden');
 
-                this.stopCamera();
+// ✅ Wait until image is loaded
+snapshot.onload = () => {
 
-                // Destroy old cropper if exists
-                if (this.cropper) this.cropper.destroy();
+    // ✅ Make snapshot visible for Cropper
+    snapshot.classList.remove('hidden');
+    video.classList.add('hidden');
 
-                // Initialize cropper
-                requestAnimationFrame(() => {
-                    this.cropper = new Cropper(snapshot, {
-                        aspectRatio: NaN,
-                        dragMode: 'crop',
-                        viewMode: 1,
-                        autoCropArea: 0.9,
-                        background: true,
-                        responsive: true,
-                        movable: true,
-                        zoomable: true,
-                    });
-                    console.log("✅ Cropper initialized");
+    // ✅ Alpine reactive update inside nextTick
+    this.$nextTick(() => {
+        this.photoTaken = true;
 
-                    // ✅ Update Alpine reactivity so buttons show
-                    this.$nextTick(() => {
-                        this.photoTaken = true;
-                    });
-                });
-            };
+        // ✅ 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
+    });
+};
 
         },