diff --git a/frontend/package.json b/frontend/package.json
index 881769413..25983088a 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -27,9 +27,12 @@
         "vite": "5.4.0"
     },
     "dependencies": {
+        "@chakra-ui/icons": "2.1.1",
         "@chakra-ui/react": "2.8.2",
         "@emotion/react": "11.13.0",
         "@emotion/styled": "11.13.0",
+        "@fortawesome/free-solid-svg-icons": "6.6.0",
+        "@fortawesome/react-fontawesome": "0.2.2",
         "@reduxjs/toolkit": "2.2.7",
         "formik": "2.4.6",
         "framer-motion": "11.3.24",
diff --git a/frontend/src/bundles/common/components/components.ts b/frontend/src/bundles/common/components/components.ts
index 45422fab3..2c6def68e 100644
--- a/frontend/src/bundles/common/components/components.ts
+++ b/frontend/src/bundles/common/components/components.ts
@@ -5,6 +5,7 @@ export { Link } from './link/link.js';
 export { Loader } from './loader/loader.js';
 export { Overlay } from './overlay/overlay.js';
 export { RouterProvider } from './router-provider/router-provider.js';
+export { VideoModal } from './video-modal/video-modal.js';
 export {
     Box,
     Circle,
diff --git a/frontend/src/bundles/common/components/video-modal/components/components.ts b/frontend/src/bundles/common/components/video-modal/components/components.ts
new file mode 100644
index 000000000..9ba9d1e9d
--- /dev/null
+++ b/frontend/src/bundles/common/components/video-modal/components/components.ts
@@ -0,0 +1 @@
+export { VideoModalContent } from './video-modal-content/video-modal-content.js';
diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/components.ts b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/components.ts
new file mode 100644
index 000000000..d179bd19c
--- /dev/null
+++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/components.ts
@@ -0,0 +1,2 @@
+export { Tab } from './tab/tab.js';
+export { VideoPreview } from './video-preview/video-preview.js';
diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/tab/tab.tsx b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/tab/tab.tsx
new file mode 100644
index 000000000..ea8761154
--- /dev/null
+++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/tab/tab.tsx
@@ -0,0 +1,29 @@
+import { Icon, Tab as ChakraTab } from '@chakra-ui/react';
+import { type IconDefinition } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+type Properties = {
+    label: string;
+    icon: IconDefinition;
+};
+
+const Tab = ({ label, icon }: Properties): JSX.Element => {
+    return (
+        <ChakraTab
+            justifyContent="stretch"
+            borderRadius="10px"
+            textAlign="left"
+            _selected={{ backgroundColor: 'gray.300' }}
+        >
+            <Icon
+                as={FontAwesomeIcon}
+                icon={icon}
+                padding="5px"
+                height="16px"
+            />{' '}
+            {label}
+        </ChakraTab>
+    );
+};
+
+export { Tab };
diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/video-preview/libs/enums/enums.ts b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/video-preview/libs/enums/enums.ts
new file mode 100644
index 000000000..9a2f32d26
--- /dev/null
+++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/video-preview/libs/enums/enums.ts
@@ -0,0 +1,2 @@
+export { VideoPreview } from './video-preview.enum.js';
+export { VideoSizeLabel } from './video-sizes.enum.js';
diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/video-preview/libs/enums/video-preview.enum.ts b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/video-preview/libs/enums/video-preview.enum.ts
new file mode 100644
index 000000000..55e124bb8
--- /dev/null
+++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/video-preview/libs/enums/video-preview.enum.ts
@@ -0,0 +1,6 @@
+const VideoPreview = {
+    PORTRAIT: 'portrait',
+    LANDSCAPE: 'landscape',
+} as const;
+
+export { VideoPreview };
diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/video-preview/libs/enums/video-sizes.enum.ts b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/video-preview/libs/enums/video-sizes.enum.ts
new file mode 100644
index 000000000..8be9ed814
--- /dev/null
+++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/video-preview/libs/enums/video-sizes.enum.ts
@@ -0,0 +1,6 @@
+const VideoSizeLabel = {
+    PORTRAIT: '1080 x 1920',
+    LANDSCAPE: '1920 x 1080',
+} as const;
+
+export { VideoSizeLabel };
diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/video-preview/libs/types/types.ts b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/video-preview/libs/types/types.ts
new file mode 100644
index 000000000..be952c440
--- /dev/null
+++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/video-preview/libs/types/types.ts
@@ -0,0 +1 @@
+export { type VideoPreview } from './video-preview.type.js';
diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/video-preview/libs/types/video-preview.type.ts b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/video-preview/libs/types/video-preview.type.ts
new file mode 100644
index 000000000..5ba129e47
--- /dev/null
+++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/video-preview/libs/types/video-preview.type.ts
@@ -0,0 +1,3 @@
+type VideoPreview = 'portrait' | 'landscape';
+
+export { type VideoPreview };
diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/video-preview/video-preview.tsx b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/video-preview/video-preview.tsx
new file mode 100644
index 000000000..c3a4a6308
--- /dev/null
+++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/video-preview/video-preview.tsx
@@ -0,0 +1,78 @@
+import { Button, Flex, Icon, Text } from '@chakra-ui/react';
+import { faPlay } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useCallback, useState } from 'react';
+
+import {
+    VideoPreview as VideoPreviewValues,
+    VideoSizeLabel,
+} from './libs/enums/enums.js';
+import { type VideoPreview as VideoPreviewType } from './libs/types/types.js';
+
+const VideoPreview = (): JSX.Element => {
+    const [view, setView] = useState<VideoPreviewType>(
+        VideoPreviewValues.PORTRAIT,
+    );
+
+    const handleSetPortraitView = useCallback((): void => {
+        setView(VideoPreviewValues.PORTRAIT);
+    }, []);
+
+    const handleSetLandscapeView = useCallback((): void => {
+        setView(VideoPreviewValues.LANDSCAPE);
+    }, []);
+
+    return (
+        <Flex flexDirection="column" alignItems="center">
+            <Flex
+                width={view === VideoPreviewValues.PORTRAIT ? '250px' : '720px'}
+                height="444px"
+                borderWidth="1px"
+                borderColor="gray.300"
+                borderRadius="md"
+                justifyContent="center"
+                alignItems="center"
+                mb={4}
+            >
+                <Flex
+                    flexDirection="column"
+                    alignItems="center"
+                    color="gray.400"
+                >
+                    <Icon
+                        as={FontAwesomeIcon}
+                        icon={faPlay}
+                        padding="5px"
+                        height="16px"
+                    />
+                    <Text color="gray.400">
+                        {view === VideoPreviewValues.PORTRAIT
+                            ? VideoSizeLabel.PORTRAIT
+                            : VideoSizeLabel.LANDSCAPE}
+                    </Text>
+                </Flex>
+            </Flex>
+
+            <Flex justifyContent="center" gap={4}>
+                <Button
+                    backgroundColor="brand.secondary.300"
+                    color="white"
+                    onMouseEnter={handleSetLandscapeView}
+                    _hover={{ bg: 'brand.secondary.600' }}
+                >
+                    Use landscape
+                </Button>
+                <Button
+                    backgroundColor="brand.secondary.300"
+                    color="white"
+                    onMouseEnter={handleSetPortraitView}
+                    _hover={{ bg: 'brand.secondary.600' }}
+                >
+                    Use portrait
+                </Button>
+            </Flex>
+        </Flex>
+    );
+};
+
+export { VideoPreview };
diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/video-modal-content.tsx b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/video-modal-content.tsx
new file mode 100644
index 000000000..737d6bb2e
--- /dev/null
+++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/video-modal-content.tsx
@@ -0,0 +1,29 @@
+import { TabList, TabPanel, TabPanels, Tabs } from '@chakra-ui/react';
+import { faPlay } from '@fortawesome/free-solid-svg-icons/faPlay';
+
+import { Tab, VideoPreview } from './components/components.js';
+
+const VideoModalContent = (): JSX.Element => {
+    return (
+        <Tabs orientation="vertical" variant="unstyled" height="full">
+            <TabList
+                backgroundColor="gray.100"
+                padding="20px 20px 20px"
+                minWidth="290px"
+            >
+                <Tab icon={faPlay} label="Start from scratch" />
+            </TabList>
+            <TabPanels
+                display="flex"
+                alignItems="center"
+                justifyContent="center"
+            >
+                <TabPanel>
+                    <VideoPreview />
+                </TabPanel>
+            </TabPanels>
+        </Tabs>
+    );
+};
+
+export { VideoModalContent };
diff --git a/frontend/src/bundles/common/components/video-modal/video-modal.tsx b/frontend/src/bundles/common/components/video-modal/video-modal.tsx
new file mode 100644
index 000000000..dfcd36a13
--- /dev/null
+++ b/frontend/src/bundles/common/components/video-modal/video-modal.tsx
@@ -0,0 +1,44 @@
+import {
+    Modal,
+    ModalBody,
+    ModalCloseButton,
+    ModalContent,
+    ModalHeader,
+    ModalOverlay,
+} from '@chakra-ui/react';
+
+import { VideoModalContent } from './components/components.js';
+
+type Properties = {
+    isOpen: boolean;
+    onModalClose: () => void;
+};
+
+const VideoModal = ({ isOpen, onModalClose }: Properties): JSX.Element => {
+    return (
+        <Modal isOpen={isOpen} onClose={onModalClose} isCentered>
+            <ModalOverlay />
+            <ModalContent
+                borderRadius="17px"
+                maxWidth="90%"
+                maxHeight="90%"
+                height="full"
+                overflow="auto"
+            >
+                <ModalHeader
+                    backgroundColor="gray.100"
+                    width="290px"
+                    padding="33px 44px 0px"
+                >
+                    Create video
+                </ModalHeader>
+                <ModalCloseButton margin="20px" />
+                <ModalBody padding="0px">
+                    <VideoModalContent />
+                </ModalBody>
+            </ModalContent>
+        </Modal>
+    );
+};
+
+export { VideoModal };
diff --git a/package-lock.json b/package-lock.json
index 711edfde0..7f75e979e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -71,9 +71,12 @@
         "frontend": {
             "version": "1.0.0",
             "dependencies": {
+                "@chakra-ui/icons": "2.1.1",
                 "@chakra-ui/react": "2.8.2",
                 "@emotion/react": "11.13.0",
                 "@emotion/styled": "11.13.0",
+                "@fortawesome/free-solid-svg-icons": "6.6.0",
+                "@fortawesome/react-fontawesome": "0.2.2",
                 "@reduxjs/toolkit": "2.2.7",
                 "formik": "2.4.6",
                 "framer-motion": "11.3.24",
@@ -803,6 +806,18 @@
                 "react": ">=18"
             }
         },
+        "node_modules/@chakra-ui/icons": {
+            "version": "2.1.1",
+            "resolved": "https://registry.npmjs.org/@chakra-ui/icons/-/icons-2.1.1.tgz",
+            "integrity": "sha512-3p30hdo4LlRZTT5CwoAJq3G9fHI0wDc0pBaMHj4SUn0yomO+RcDRlzhdXqdr5cVnzax44sqXJVnf3oQG0eI+4g==",
+            "dependencies": {
+                "@chakra-ui/icon": "3.2.0"
+            },
+            "peerDependencies": {
+                "@chakra-ui/system": ">=2.0.0",
+                "react": ">=18"
+            }
+        },
         "node_modules/@chakra-ui/image": {
             "version": "2.1.0",
             "resolved": "https://registry.npmjs.org/@chakra-ui/image/-/image-2.1.0.tgz",
@@ -2786,6 +2801,49 @@
                 "yaml": "^2.2.2"
             }
         },
+        "node_modules/@fortawesome/fontawesome-common-types": {
+            "version": "6.6.0",
+            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.6.0.tgz",
+            "integrity": "sha512-xyX0X9mc0kyz9plIyryrRbl7ngsA9jz77mCZJsUkLl+ZKs0KWObgaEBoSgQiYWAsSmjz/yjl0F++Got0Mdp4Rw==",
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/@fortawesome/fontawesome-svg-core": {
+            "version": "6.6.0",
+            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.6.0.tgz",
+            "integrity": "sha512-KHwPkCk6oRT4HADE7smhfsKudt9N/9lm6EJ5BVg0tD1yPA5hht837fB87F8pn15D8JfTqQOjhKTktwmLMiD7Kg==",
+            "peer": true,
+            "dependencies": {
+                "@fortawesome/fontawesome-common-types": "6.6.0"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/@fortawesome/free-solid-svg-icons": {
+            "version": "6.6.0",
+            "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.6.0.tgz",
+            "integrity": "sha512-IYv/2skhEDFc2WGUcqvFJkeK39Q+HyPf5GHUrT/l2pKbtgEIv1al1TKd6qStR5OIwQdN1GZP54ci3y4mroJWjA==",
+            "dependencies": {
+                "@fortawesome/fontawesome-common-types": "6.6.0"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/@fortawesome/react-fontawesome": {
+            "version": "0.2.2",
+            "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz",
+            "integrity": "sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==",
+            "dependencies": {
+                "prop-types": "^15.8.1"
+            },
+            "peerDependencies": {
+                "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+                "react": ">=16.3"
+            }
+        },
         "node_modules/@gitbeaker/core": {
             "version": "38.12.1",
             "resolved": "https://registry.npmjs.org/@gitbeaker/core/-/core-38.12.1.tgz",