diff --git a/frontend/package.json b/frontend/package.json
index 881769413..904ffcd1d 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -31,12 +31,14 @@
         "@emotion/react": "11.13.0",
         "@emotion/styled": "11.13.0",
         "@reduxjs/toolkit": "2.2.7",
+        "@remotion/player": "4.0.201",
         "formik": "2.4.6",
         "framer-motion": "11.3.24",
         "react": "18.3.1",
         "react-dom": "18.3.1",
         "react-redux": "9.1.2",
         "react-router-dom": "6.26.0",
+        "remotion": "4.0.201",
         "shared": "*",
         "zod-formik-adapter": "1.3.0"
     }
diff --git a/frontend/src/bundles/common/components/components.ts b/frontend/src/bundles/common/components/components.ts
index 71c774689..357991179 100644
--- a/frontend/src/bundles/common/components/components.ts
+++ b/frontend/src/bundles/common/components/components.ts
@@ -3,6 +3,7 @@ export { Input } from './input/input.js';
 export { Link } from './link/link.js';
 export { Loader } from './loader/loader.js';
 export { Overlay } from './overlay/overlay.js';
+export { Player } from './player/player.js';
 export { RouterProvider } from './router-provider/router-provider.js';
 export {
     Box,
diff --git a/frontend/src/bundles/common/components/player/player.tsx b/frontend/src/bundles/common/components/player/player.tsx
new file mode 100644
index 000000000..1f5e41425
--- /dev/null
+++ b/frontend/src/bundles/common/components/player/player.tsx
@@ -0,0 +1,48 @@
+import { type PlayerRef, Player as LibraryPlayer } from '@remotion/player';
+import { type RefObject } from 'react';
+
+import { Box } from '~/bundles/common/components/components.js';
+
+type Properties = {
+    orientation: 'landscape' | 'portrait';
+    durationInFrames: number;
+    playerRef: RefObject<PlayerRef>;
+    VideoComponent: React.FC;
+};
+
+const Player = ({
+    orientation,
+    durationInFrames,
+    playerRef,
+    VideoComponent,
+}: Properties): JSX.Element => {
+    const size =
+        orientation === 'landscape'
+            ? { width: 1920, height: 1080 }
+            : { width: 1080, height: 1920 };
+
+    return (
+        <Box
+            height="720px"
+            width="fit-content"
+            maxWidth="100%"
+            overflow="hidden"
+            border="1px solid #FDFDFD"
+        >
+            <LibraryPlayer
+                ref={playerRef}
+                component={VideoComponent}
+                durationInFrames={durationInFrames}
+                compositionWidth={size.width}
+                compositionHeight={size.height}
+                fps={30}
+                style={{
+                    height: '100%',
+                    maxWidth: '100%',
+                }}
+            />
+        </Box>
+    );
+};
+
+export { Player };
diff --git a/package-lock.json b/package-lock.json
index 711edfde0..9eada82ee 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -75,12 +75,14 @@
                 "@emotion/react": "11.13.0",
                 "@emotion/styled": "11.13.0",
                 "@reduxjs/toolkit": "2.2.7",
+                "@remotion/player": "4.0.201",
                 "formik": "2.4.6",
                 "framer-motion": "11.3.24",
                 "react": "18.3.1",
                 "react-dom": "18.3.1",
                 "react-redux": "9.1.2",
                 "react-router-dom": "6.26.0",
+                "remotion": "4.0.201",
                 "shared": "*",
                 "zod-formik-adapter": "1.3.0"
             },
@@ -3271,6 +3273,18 @@
                 "node": ">=14.0.0"
             }
         },
+        "node_modules/@remotion/player": {
+            "version": "4.0.201",
+            "resolved": "https://registry.npmjs.org/@remotion/player/-/player-4.0.201.tgz",
+            "integrity": "sha512-9pqr71LiM5HN0lPtfxEnYTwL0T7WiKmLlGFMcsbwPhuxTibiDelecZPbfuxm6CWkH3RaY5BoZTF72DQwy/0KGA==",
+            "dependencies": {
+                "remotion": "4.0.201"
+            },
+            "peerDependencies": {
+                "react": ">=16.8.0",
+                "react-dom": ">=16.8.0"
+            }
+        },
         "node_modules/@rollup/rollup-android-arm-eabi": {
             "version": "4.20.0",
             "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.20.0.tgz",
@@ -10901,6 +10915,15 @@
                 "jsesc": "bin/jsesc"
             }
         },
+        "node_modules/remotion": {
+            "version": "4.0.201",
+            "resolved": "https://registry.npmjs.org/remotion/-/remotion-4.0.201.tgz",
+            "integrity": "sha512-QzkyjTY03HHekC7DVFqBpGfkLylxoDu4Awr9mbn5XvQpMFP9NV31g8luyVxH5lzJ3A+WiJzn0oYfTc4PPP8cgw==",
+            "peerDependencies": {
+                "react": ">=16.8.0",
+                "react-dom": ">=16.8.0"
+            }
+        },
         "node_modules/require-directory": {
             "version": "2.1.1",
             "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",