diff --git a/resources/views/fields/camera-capture.blade.php b/resources/views/fields/camera-capture.blade.php
index b322dfe..667e3f8 100644
--- a/resources/views/fields/camera-capture.blade.php
+++ b/resources/views/fields/camera-capture.blade.php
@@ -41,7 +41,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
 {{-- logic --}}
 
-<div x-data="cameraCapture()" x-init="initCamera()" class="space-y-2">
+{{-- <div x-data="cameraCapture()" x-init="initCamera()" class="space-y-2">
     <video x-ref="video" width="320" height="240" autoplay playsinline class="border rounded"></video>
     <canvas x-ref="canvas" width="320" height="240" class="hidden"></canvas>
     <img x-ref="snapshot" class="hidden border rounded max-w-full">
@@ -53,9 +53,23 @@ document.addEventListener('DOMContentLoaded', () => {
     </div>
 
     {{-- <input type="hidden" name="{{ $getName() }}" x-ref="hiddenInput"> --}}
+    {{-- <input type="hidden" x-ref="hiddenInput" x-model="photo1">
+</div>  --}}
+
+<div x-data="cameraCapture()" x-init="initCamera()" class="space-y-2">
+    <video x-ref="video" width="320" height="240" autoplay playsinline class="border rounded"></video>
+    <canvas x-ref="canvas" width="320" height="240" class="hidden border rounded"></canvas>
+
+    <div class="flex space-x-4 mt-2">
+        <x-filament::button color="primary" @click="capturePhoto" x-show="!photoTaken">Capture</x-filament::button>
+        <x-filament::button color="secondary" @click="retakePhoto" x-show="photoTaken">Retake</x-filament::button>
+        <x-filament::button color="gray" @click="switchCamera" x-show="!photoTaken">Switch Camera</x-filament::button>
+    </div>
+
     <input type="hidden" x-ref="hiddenInput" x-model="photo1">
 </div>
 
+
 <script>
 function cameraCapture() {
     return {
@@ -86,28 +100,55 @@ function cameraCapture() {
             await this.initCamera();
         },
 
+        // capturePhoto() {
+        //     const video = this.$refs.video;
+        //     const canvas = this.$refs.canvas;
+        //     const snapshot = this.$refs.snapshot;
+        //     const context = canvas.getContext('2d');
+
+        //     context.drawImage(video, 0, 0, canvas.width, canvas.height);
+        //     const dataUrl = canvas.toDataURL('image/png');
+
+        //     // stop camera stream after capture
+        //     if (this.stream) {
+        //         this.stream.getTracks().forEach(track => track.stop());
+        //     }
+
+        //     snapshot.src = dataUrl;
+        //     snapshot.classList.remove('hidden');
+        //     this.photoTaken = true;
+
+        //     this.$refs.hiddenInput.value = dataUrl;
+        //      //@this.set('photo1', dataUrl);
+        // },
         capturePhoto() {
             const video = this.$refs.video;
             const canvas = this.$refs.canvas;
-            const snapshot = this.$refs.snapshot;
             const context = canvas.getContext('2d');
 
+            // draw video frame to canvas
             context.drawImage(video, 0, 0, canvas.width, canvas.height);
+
+            // convert to data URL
             const dataUrl = canvas.toDataURL('image/png');
 
-            // stop camera stream after capture
+            // store to Livewire
+            @this.set('photo1', dataUrl);
+
+            // stop camera
             if (this.stream) {
                 this.stream.getTracks().forEach(track => track.stop());
+                this.stream = null;
             }
 
-            snapshot.src = dataUrl;
-            snapshot.classList.remove('hidden');
             this.photoTaken = true;
 
-            this.$refs.hiddenInput.value = dataUrl;
-             //@this.set('photo1', dataUrl);
+            // hide video and show canvas in the same place
+            video.classList.add('hidden');
+            canvas.classList.remove('hidden');
         },
 
+
         async retakePhoto() {
             this.photoTaken = false;
             this.$refs.snapshot.classList.add('hidden');