diff --git a/web/src/components/player/MsePlayer.tsx b/web/src/components/player/MsePlayer.tsx
index 0dfd480dd..716817407 100644
--- a/web/src/components/player/MsePlayer.tsx
+++ b/web/src/components/player/MsePlayer.tsx
@@ -803,6 +803,10 @@ function MSEPlayer({
       style={{
         objectFit:
           "var(--frigate-mse-object-fit, fill)" as CSSProperties["objectFit"],
+        transform:
+          "var(--frigate-mse-grid-rotation, none)" as CSSProperties["transform"],
+        transformOrigin:
+          "var(--frigate-mse-grid-rotation-origin, center center)" as CSSProperties["transformOrigin"],
       }}
       playsInline
       preload="auto"
diff --git a/web/src/views/live/DraggableGridLayout.tsx b/web/src/views/live/DraggableGridLayout.tsx
index 43c64ee3e..0d4eb9374 100644
--- a/web/src/views/live/DraggableGridLayout.tsx
+++ b/web/src/views/live/DraggableGridLayout.tsx
@@ -670,6 +670,8 @@ export default function DraggableGridLayout({
                     cameraRef={cameraRef}
                     className={cn(
                       "draggable-live-grid-mse-cover size-full rounded-lg bg-black md:rounded-2xl",
+                      camera.ui?.rotate &&
+                        "draggable-live-grid-rotated [--frigate-mse-grid-rotation:90deg]",
                       isEditMode &&
                         showCircles &&
                         "outline-2 outline-muted-foreground hover:cursor-grab hover:outline-4 active:cursor-grabbing",