diff --git a/resources/views/fields/camera-capture.blade.php b/resources/views/fields/camera-capture.blade.php
index 6657a38..5051b16 100644
--- a/resources/views/fields/camera-capture.blade.php
+++ b/resources/views/fields/camera-capture.blade.php
@@ -41,17 +41,43 @@ document.addEventListener('DOMContentLoaded', () => {
 
 
 
-<div x-data="cameraCapture()" x-init="initCamera()" class="space-y-2" wire:ignore class="space-y-2">
+{{-- <div x-data="cameraCapture()" x-init="initCamera()" class="space-y-2" wire:ignore 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"> --}}
+
+    <div x-data="cameraCapture()" x-init="initCamera()" wire:ignore class="space-y-2">
+    <video
+        x-ref="video"
+        autoplay
+        playsinline
+        class="border rounded w-80 h-auto"
+    ></video>
+
+    <!-- no need to fix width/height here either -->
+    <canvas x-ref="canvas" class="hidden"></canvas>
+
     <img x-ref="snapshot" class="hidden border rounded max-w-full">
 
-    <div class="flex space-x-2 mt-2">
+
+{{--
+    <div class="flex space-x-8 mt-2">
         <x-filament::button color="primary" @click="capturePhoto" x-show="!photoTaken">Capture</x-filament::button>
         <x-filament::button color="primary" @click="retakePhoto" x-show="photoTaken">Retake</x-filament::button>
         <x-filament::button color="primary" @click="switchCamera" x-show="!photoTaken">Switch Camera</x-filament::button>
         <x-filament::button color="primary" @click="verify" x-show="photoTaken">Verify</x-filament::button>
-    </div>
+    </div> --}}
+    <div class="flex space-x-2 mt-2">
+    <x-filament::button color="primary" @click="capturePhoto" x-show="!photoTaken" class="inline-flex w-auto">Capture</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="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>
+</div>
+
+
+
+
+
 
     {{-- <input type="hidden" name="{{ $getName() }}" x-ref="hiddenInput"> --}}
     {{-- <input type="hidden" x-ref="hiddenInput" name="camera_capture"> --}}
@@ -185,8 +211,13 @@ document.addEventListener('DOMContentLoaded', () => {
             const snapshot = this.$refs.snapshot;
             const context = canvas.getContext('2d');
 
+            canvas.width = video.videoWidth;
+            canvas.height = video.videoHeight;
+
             context.drawImage(video, 0, 0, canvas.width, canvas.height);
-            const dataUrl = canvas.toDataURL('image/png');
+
+            //const dataUrl = canvas.toDataURL('image/png');
+            const dataUrl = canvas.toDataURL('image/png', 1.0);
 
             if (this.stream) this.stream.getTracks().forEach(track => track.stop());
 
@@ -230,9 +261,6 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     }
 }
-
-
-
 </script>