diff --git a/src/routes/manual-ctrl/[id]/+page.svelte b/src/routes/manual-ctrl/[id]/+page.svelte
index c01a297..d505e0a 100644
--- a/src/routes/manual-ctrl/[id]/+page.svelte
+++ b/src/routes/manual-ctrl/[id]/+page.svelte
@@ -322,15 +322,14 @@
 							<h3 class="text-xl font-semibold text-blue-900">CSI Camera 1</h3>
 							<!-- <p class="text-xs text-blue-600">{csiStatusMessage}</p> -->
 						</div>
-						<div class="relative flex items-center justify-center bg-black" style="height: 300px;">
+						<div class="relative flex items-center justify-center bg-white" style="height: 300px;">
 							<video
 								id="roverVideoCSI"
 								autoplay
 								playsinline
 								muted
-								width="820"
-								height="616"
-								class="h-full w-full object-contain"
+								style="aspect-ratio: 1/1; object-fit: fill;"
+								class="h-full w-auto"
 							>
 								Your browser does not support the video tag.
 							</video>
@@ -360,14 +359,12 @@
 							<h3 class="text-xl font-semibold text-blue-900">USB Camera (Front)</h3>
 							<!-- <p class="text-xs text-blue-600">{usbStatusMessage}</p> -->
 						</div>
-						<div class="relative flex items-center justify-center bg-black" style="height: 300px;">
+						<div class="relative flex items-center justify-center bg-white" style="height: 300px;">
 							<video
 								id="roverVideoUSB"
 								autoplay
 								playsinline
 								muted
-								width="1280"
-								height="720"
 								class="h-full w-full object-contain"
 							>
 								Your browser does not support the video tag.
@@ -398,15 +395,14 @@
 							<h3 class="text-xl font-semibold text-blue-900">CSI Camera 2</h3>
 							<!-- <p class="text-xs text-blue-600">{csi2StatusMessage}</p> -->
 						</div>
-						<div class="relative flex items-center justify-center bg-black" style="height: 300px;">
+						<div class="relative flex items-center justify-center bg-white" style="height: 300px;">
 							<video
 								id="roverVideoCSI2"
 								autoplay
 								playsinline
 								muted
-								width="820"
-								height="616"
-								class="h-full w-full object-contain"
+								style="aspect-ratio: 1/1; object-fit: fill;"
+								class="h-full w-auto"
 							>
 								Your browser does not support the video tag.
 							</video>
diff --git a/src/routes/rovers/[id]/[pathId]/+page.svelte b/src/routes/rovers/[id]/[pathId]/+page.svelte
index 3403dc1..a7e2e92 100644
--- a/src/routes/rovers/[id]/[pathId]/+page.svelte
+++ b/src/routes/rovers/[id]/[pathId]/+page.svelte
@@ -606,17 +606,17 @@
 					<!-- Camera Feed Display -->
 					<div class="mx-auto mb-4 w-full max-w-2xl" style="aspect-ratio: 820/616;">
 						<div
-							class="relative h-full w-full overflow-hidden rounded-lg border border-blue-200 bg-black"
+							class="relative h-full w-full overflow-hidden rounded-lg border border-blue-200 bg-white flex items-center justify-center"
 						>
 						<!-- Video elements for all three cameras -->
+						<!-- CSI Camera 1 -->
 						<video
 							id="roverVideo1"
 							autoplay
 							playsinline
 							muted
-							width="1280"
-							height="720"
-							class="absolute inset-0 h-full w-full object-contain {currentCamera === 1
+							style="aspect-ratio: 1/1; object-fit: fill;"
+							class="h-full w-auto {currentCamera === 1
 								? 'block'
 								: 'hidden'}"
 						>
@@ -627,22 +627,20 @@
 							autoplay
 							playsinline
 							muted
-							width="1280"
-							height="720"
-							class="absolute inset-0 h-full w-full object-contain {currentCamera === 2
+							class="w-full h-full object-contain {currentCamera === 2
 								? 'block'
 								: 'hidden'}"
 						>
 							Your browser does not support the video tag.
 						</video>
+						<!-- CSI Camera 2 -->
 						<video
 							id="roverVideo3"
 							autoplay
 							playsinline
 							muted
-							width="1280"
-							height="720"
-							class="absolute inset-0 h-full w-full object-contain {currentCamera === 3
+							style="aspect-ratio: 1/1; object-fit: fill;"
+							class="h-full w-auto {currentCamera === 3
 								? 'block'
 								: 'hidden'}"
 						>