diff --git a/web/src/routes/Camera.jsx b/web/src/routes/Camera.jsx
index 5e301631f..503bf55d5 100644
--- a/web/src/routes/Camera.jsx
+++ b/web/src/routes/Camera.jsx
@@ -21,6 +21,7 @@ export default function Camera({ camera }) {
   const [viewMode, setViewMode] = useState('live');
 
   const cameraConfig = config?.cameras[camera];
+  const liveWidth = Math.round(cameraConfig.live.height * (cameraConfig.detect.width / cameraConfig.detect.height))
   const [options, setOptions] = usePersistence(`${camera}-feed`, emptyObject);
 
   const handleSetOption = useCallback(
@@ -87,7 +88,7 @@ export default function Camera({ camera }) {
     player = (
       <Fragment>
         <div>
-          <JSMpegPlayer camera={camera} width={cameraConfig.detect.width} height={cameraConfig.detect.height} />
+          <JSMpegPlayer camera={camera} width={liveWidth} height={cameraConfig.live.height} />
         </div>
       </Fragment>
     );
diff --git a/web/src/routes/__tests__/Camera.test.jsx b/web/src/routes/__tests__/Camera.test.jsx
index 78be9f940..5840affef 100644
--- a/web/src/routes/__tests__/Camera.test.jsx
+++ b/web/src/routes/__tests__/Camera.test.jsx
@@ -13,7 +13,7 @@ describe('Camera Route', () => {
     mockSetOptions = jest.fn();
     mockUsePersistence = jest.spyOn(Context, 'usePersistence').mockImplementation(() => [{}, mockSetOptions]);
     jest.spyOn(Api, 'useConfig').mockImplementation(() => ({
-      data: { cameras: { front: { name: 'front', detect: {width: 1280, height: 720}, objects: { track: ['taco', 'cat', 'dog'] } } } },
+      data: { cameras: { front: { name: 'front', detect: {width: 1280, height: 720}, live: {height: 720}, objects: { track: ['taco', 'cat', 'dog'] } } } },
     }));
     jest.spyOn(Api, 'useApiHost').mockImplementation(() => 'http://base-url.local:5000');
     jest.spyOn(AutoUpdatingCameraImage, 'default').mockImplementation(({ searchParams }) => {