diff --git a/resources/views/fields/camera-capture.blade.php b/resources/views/fields/camera-capture.blade.php
index b8271d9..5207213 100644
--- a/resources/views/fields/camera-capture.blade.php
+++ b/resources/views/fields/camera-capture.blade.php
@@ -283,6 +283,7 @@ document.addEventListener('DOMContentLoaded', () => {
         <x-filament::button color="primary" @click="retakePhoto" x-show="photoTaken">Retake</x-filament::button>
         <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>
     </div>
 
     <input type="hidden" x-ref="hiddenInput" x-model="photo1" name="camera_capture_file">
@@ -322,55 +323,55 @@ function cameraCapture() {
             await this.initCamera();
         },
 
-        async capturePhoto() {
-            const video = this.$refs.video;
-            const canvas = this.$refs.canvas;
-            const context = canvas.getContext('2d');
+        // async capturePhoto() {
+        //     const video = this.$refs.video;
+        //     const canvas = this.$refs.canvas;
+        //     const context = canvas.getContext('2d');
 
-            canvas.width = video.videoWidth;
-            canvas.height = video.videoHeight;
-            context.drawImage(video, 0, 0, canvas.width, canvas.height);
+        //     canvas.width = video.videoWidth;
+        //     canvas.height = video.videoHeight;
+        //     context.drawImage(video, 0, 0, canvas.width, canvas.height);
 
-            // Show snapshot
-            const snapshot = this.$refs.snapshot;
-            snapshot.src = canvas.toDataURL('image/png');
-            snapshot.classList.remove('hidden');
-            video.classList.add('hidden');
+        //     // Show snapshot
+        //     const snapshot = this.$refs.snapshot;
+        //     snapshot.src = canvas.toDataURL('image/png');
+        //     snapshot.classList.remove('hidden');
+        //     video.classList.add('hidden');
 
-            // Convert canvas to file
-            canvas.toBlob(async blob => {
-                const file = new File([blob], 'capture.png', { type: 'image/png' });
-                console.log("File ready for upload:", file);
+        //     // Convert canvas to file
+        //     canvas.toBlob(async blob => {
+        //         const file = new File([blob], 'capture.png', { type: 'image/png' });
+        //         console.log("File ready for upload:", file);
 
-                // Upload to temp folder
-                const formData = new FormData();
-                formData.append('photo', file);
+        //         // Upload to temp folder
+        //         const formData = new FormData();
+        //         formData.append('photo', file);
 
-                const response = await fetch('/temp-upload', {
-                    method: 'POST',
-                    headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
-                    body: formData
-                });
+        //         const response = await fetch('/temp-upload', {
+        //             method: 'POST',
+        //             headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
+        //             body: formData
+        //         });
 
-                const data = await response.json();
-                if (data.success) {
-                    this.$refs.hiddenInput.value = data.path; // Filament form hidden input
-                    console.log("Saved to temp:", data.path);
-                } else {
-                    alert('Failed to save image.');
-                }
-            }, 'image/png', 1.0); // 1.0 = highest quality
+        //         const data = await response.json();
+        //         if (data.success) {
+        //             this.$refs.hiddenInput.value = data.path; // Filament form hidden input
+        //             console.log("Saved to temp:", data.path);
+        //         } else {
+        //             alert('Failed to save image.');
+        //         }
+        //     }, 'image/png', 1.0); // 1.0 = highest quality
 
-            this.photoTaken = true;
+        //     this.photoTaken = true;
 
-              // Create cropper on image
-            this.cropper = new Cropper(snapshot, {
-                aspectRatio: NaN, // User free crop area
-                viewMode: 1
-            });
+        //       // Create cropper on image
+        //     // this.cropper = new Cropper(snapshot, {
+        //     //     aspectRatio: NaN, // User free crop area
+        //     //     viewMode: 1
+        //     // });
 
-            if (this.stream) this.stream.getTracks().forEach(track => track.stop());
-        },
+        //     if (this.stream) this.stream.getTracks().forEach(track => track.stop());
+        // },
 
 
         // async verifyOCR(dataUrl) {
@@ -396,6 +397,64 @@ function cameraCapture() {
         //     await this.verifyOCR(dataUrl);
         // },
 
+
+        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);
+
+            const snapshot = this.$refs.snapshot;
+            snapshot.src = canvas.toDataURL('image/png');
+            snapshot.classList.remove('hidden');
+            video.classList.add('hidden');
+
+            this.photoTaken = true;
+            this.stopCamera();
+
+            // ✅ Enable Cropper now
+            this.cropper = new Cropper(snapshot, {
+                aspectRatio: NaN,
+                viewMode: 1,
+                dragMode: 'crop'
+            });
+        },
+
+        //
+        async uploadCroppedImage() {
+
+            if (!this.cropper) {
+                alert("Crop the image before upload!");
+                return;
+            }
+
+            const croppedCanvas = this.cropper.getCroppedCanvas();
+
+            croppedCanvas.toBlob(async blob => {
+
+                const formData = new FormData();
+                formData.append('photo', blob, 'cropped.png');
+
+                const response = await fetch('/temp-upload', {
+                    method: 'POST',
+                    headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
+                    body: formData
+                });
+
+                const data = await response.json();
+
+                if (data.success) {
+                    this.$refs.hiddenInput.value = data.path;
+                    alert("✅ Cropped image uploaded!");
+                } else {
+                    alert("Upload failed!");
+                }
+            }, "image/png");
+        },
+
         async verify() {
             const filePath = this.$refs.hiddenInput.value; // e.g., "temp/capture_1760764396.jpeg"
 
@@ -441,6 +500,7 @@ function cameraCapture() {
             this.photoTaken = false;
             this.$refs.snapshot.classList.add('hidden');
             this.$refs.video.classList.remove('hidden');
+            this.cropper?.destroy();
             await this.initCamera();
         }
     }