diff --git a/components/pages/style/work-flow.css b/components/pages/style/work-flow.css
index 20c859b..de416bb 100644
--- a/components/pages/style/work-flow.css
+++ b/components/pages/style/work-flow.css
@@ -165,6 +165,7 @@
   min-height: 0;
   display: flex;
   position: relative;
+  justify-content: center;
 }
 .heroVideo-FIzuK1 {
   object-fit: cover;
diff --git a/components/pages/work-flow/media-viewer.tsx b/components/pages/work-flow/media-viewer.tsx
index bebbd6f..f3630d4 100644
--- a/components/pages/work-flow/media-viewer.tsx
+++ b/components/pages/work-flow/media-viewer.tsx
@@ -149,7 +149,7 @@ export const MediaViewer = React.memo(function MediaViewer({
     return (
       <video
         ref={finalVideoRef}
-        className="w-full h-full object-cover rounded-lg"
+        className="w-[auto] h-full object-cover rounded-lg"
         src={taskObject.final.url}
         autoPlay={isFinalVideoPlaying}
         loop
@@ -317,7 +317,7 @@ export const MediaViewer = React.memo(function MediaViewer({
             transition={{ duration: 0.8, ease: "easeInOut" }}
           >
             <video
-              className="w-full h-full rounded-lg object-cover object-center"
+              className="w-[auto] h-full rounded-lg object-cover object-center"
               src={taskObject.final.url}
               loop
               playsInline
diff --git a/components/ui/replace-panel.tsx b/components/ui/replace-panel.tsx
index 7fa5e26..2ebff54 100644
--- a/components/ui/replace-panel.tsx
+++ b/components/ui/replace-panel.tsx
@@ -163,7 +163,7 @@ export function ReplacePanel({
                   ref={el => {
                     if (el) videoRefs.current[shot.id] = el;
                   }}
-                  src={shot.videoUrl[0].video_url}
+                  src={shot.videoUrl[0]}
                   className="w-full h-full object-cover"
                   loop
                   muted
diff --git a/components/ui/shot-editor/ShotsEditor.tsx b/components/ui/shot-editor/ShotsEditor.tsx
index dfdc50d..170feec 100644
--- a/components/ui/shot-editor/ShotsEditor.tsx
+++ b/components/ui/shot-editor/ShotsEditor.tsx
@@ -45,7 +45,7 @@ interface ShotsEditorProps {
   style?: React.CSSProperties;
 }
 
-export const ShotsEditor = forwardRef<any, ShotsEditorProps>(({ roles, shotInfo, style }, ref) => {
+export const ShotsEditor = forwardRef<any, ShotsEditorProps>(function ShotsEditor({ roles, shotInfo, style }, ref) {
   const [currentShotIndex, setCurrentShotIndex] = useState(0);
   const [shots, setShots] = useState<Shot[]>([]);
   const descEditorRef = useRef<any>(null);