diff --git a/app/pages/PageEnigma/PageEnigma.tsx b/app/pages/PageEnigma/PageEnigma.tsx
index eadc47ed8f..2f5d57134a 100644
--- a/app/pages/PageEnigma/PageEnigma.tsx
+++ b/app/pages/PageEnigma/PageEnigma.tsx
@@ -9,6 +9,7 @@ import { SidePanel } from "~/modules/SidePanel";
 import { Controls3D } from "./comps/Controls3D";
 import { ControlsTopButtons } from "./comps/ControlsTopButtons";
 import { ControlsVideo } from "./comps/ControlsVideo";
+import { PreviewWindow } from "./comps/PreviewWindow";
 import { Timeline } from "./comps/Timeline";
 import { SidePanelTabs } from "./comps/SidePanelTabs";
 
@@ -74,6 +75,7 @@ export const PageEnigma = () => {
 
               {/* Bottom controls */}
               <div className="absolute bottom-0 left-0 w-full">
+                <PreviewWindow />
                 <ControlsVideo />
               </div>
             </div>
diff --git a/app/pages/PageEnigma/comps/ControlsVideo/ControlsVideo.tsx b/app/pages/PageEnigma/comps/ControlsVideo/ControlsVideo.tsx
index ade68ff1be..5b1ad21ffe 100644
--- a/app/pages/PageEnigma/comps/ControlsVideo/ControlsVideo.tsx
+++ b/app/pages/PageEnigma/comps/ControlsVideo/ControlsVideo.tsx
@@ -24,16 +24,14 @@ export const ControlsVideo = () => {
     console.log("Controls Video: Forward-Fast clicked");
   };
   return (
-    <div>
-      <div className="flex justify-center">
-        <div className="rounded-t-lg border-x border-t border-ui-panel-border bg-ui-controls p-2 text-white">
-          <div className="flex content-center gap-2">
-            <ButtonIcon icon={faBackwardFast} onClick={handleBackwardFast} />
-            <ButtonIcon icon={faBackwardStep} onClick={handleBackwardStep} />
-            <ButtonIcon icon={faPlay} onClick={handlePlay} />
-            <ButtonIcon icon={faForwardStep} onClick={handleForwardStep} />
-            <ButtonIcon icon={faForwardFast} onClick={handleForwardFast} />
-          </div>
+    <div className="flex justify-center">
+      <div className="rounded-t-lg border-x border-t border-ui-panel-border bg-ui-controls p-2 text-white">
+        <div className="flex content-center gap-2">
+          <ButtonIcon icon={faBackwardFast} onClick={handleBackwardFast} />
+          <ButtonIcon icon={faBackwardStep} onClick={handleBackwardStep} />
+          <ButtonIcon icon={faPlay} onClick={handlePlay} />
+          <ButtonIcon icon={faForwardStep} onClick={handleForwardStep} />
+          <ButtonIcon icon={faForwardFast} onClick={handleForwardFast} />
         </div>
       </div>
     </div>
diff --git a/app/pages/PageEnigma/comps/PreviewWindow/index.tsx b/app/pages/PageEnigma/comps/PreviewWindow/index.tsx
new file mode 100644
index 0000000000..92accbd2d2
--- /dev/null
+++ b/app/pages/PageEnigma/comps/PreviewWindow/index.tsx
@@ -0,0 +1,30 @@
+import { useContext } from "react"
+import { EngineContext } from "~/contexts/EngineContext"
+
+export const PreviewWindow = ()=>{
+  const editorEngine = useContext(EngineContext);
+  //take data from egine context
+
+  return (
+    <div
+      id="preview-window"
+      className="absolute bottom-0 w-30 m-4"
+    >
+      <div className="relative">
+        <div
+          id="preview-window-label"
+          className="text-white bg-ui-panel pt-1 px-2 pb-3 -z-10 rounded-t-lg -mb-2 w-fit"
+        >
+          <p>Camera View</p>
+        </div>
+        <div className="rounded-lg border border-white box overflow-hidden">
+          <img
+            //shoot that datat from engine context to this image
+            className="aspect-video max-h-40" 
+            src="/resources/uiAssets/video_player_placeholder.gif"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/public/resources/uiAssets/video_player_placeholder.gif b/public/resources/uiAssets/video_player_placeholder.gif
new file mode 100644
index 0000000000..b6a8dea036
Binary files /dev/null and b/public/resources/uiAssets/video_player_placeholder.gif differ