diff --git a/backend/src/common/services/remotion/constants/constants.ts b/backend/src/common/services/remotion/constants/constants.ts
index 521dbfa94..ed24a7ca1 100644
--- a/backend/src/common/services/remotion/constants/constants.ts
+++ b/backend/src/common/services/remotion/constants/constants.ts
@@ -1,3 +1,5 @@
 export { CODEC } from './codec.constant.js';
 export { COMPOSITION_ID } from './composition-id.constant.js';
+export { DOWNLOAD_BEHAVIOR } from './download-behavior.constant.js';
+export { DOWNLOADED_FILE_NAME } from './downloaded-file-name.constant.js';
 export { REQUEST_DELAY } from './request-delay.constant.js';
diff --git a/backend/src/common/services/remotion/constants/download-behavior.constant.ts b/backend/src/common/services/remotion/constants/download-behavior.constant.ts
new file mode 100644
index 000000000..918e023a3
--- /dev/null
+++ b/backend/src/common/services/remotion/constants/download-behavior.constant.ts
@@ -0,0 +1,3 @@
+const DOWNLOAD_BEHAVIOR = 'download';
+
+export { DOWNLOAD_BEHAVIOR };
diff --git a/backend/src/common/services/remotion/constants/downloaded-file-name.constant.ts b/backend/src/common/services/remotion/constants/downloaded-file-name.constant.ts
new file mode 100644
index 000000000..78f4a343a
--- /dev/null
+++ b/backend/src/common/services/remotion/constants/downloaded-file-name.constant.ts
@@ -0,0 +1,3 @@
+const DOWNLOADED_FILE_NAME = 'download.mp4';
+
+export { DOWNLOADED_FILE_NAME };
diff --git a/backend/src/common/services/remotion/remotion.service.ts b/backend/src/common/services/remotion/remotion.service.ts
index 2a264362d..f600b5405 100644
--- a/backend/src/common/services/remotion/remotion.service.ts
+++ b/backend/src/common/services/remotion/remotion.service.ts
@@ -8,7 +8,13 @@ import { HTTPCode, HttpError } from 'shared';
 import { RenderVideoErrorMessage } from '~/bundles/avatar-videos/enums/enums.js';
 import { type BaseConfig } from '~/common/config/base-config.package.js';
 
-import { CODEC, COMPOSITION_ID, REQUEST_DELAY } from './constants/constants.js';
+import {
+    CODEC,
+    COMPOSITION_ID,
+    DOWNLOAD_BEHAVIOR,
+    DOWNLOADED_FILE_NAME,
+    REQUEST_DELAY,
+} from './constants/constants.js';
 import { type InputProps as InputProperties } from './type/types.js';
 
 class RemotionService {
@@ -25,6 +31,10 @@ class RemotionService {
         inputProperties: InputProperties,
     ): Promise<string> {
         const { renderId } = await renderMediaOnLambda({
+            downloadBehavior: {
+                type: DOWNLOAD_BEHAVIOR,
+                fileName: DOWNLOADED_FILE_NAME,
+            },
             region: this.config.ENV.AWS.S3.REGION as AwsRegion,
             functionName: this.config.ENV.REMOTION.LAMBDA_FUNCTION_NAME,
             composition: COMPOSITION_ID,
diff --git a/frontend/src/assets/img/photo.png b/frontend/src/assets/img/photo.png
deleted file mode 100644
index 42e23655f..000000000
Binary files a/frontend/src/assets/img/photo.png and /dev/null differ
diff --git a/frontend/src/assets/img/placeholder.png b/frontend/src/assets/img/placeholder.png
new file mode 100644
index 000000000..7aa33e654
Binary files /dev/null and b/frontend/src/assets/img/placeholder.png differ
diff --git a/frontend/src/bundles/auth/components/common/components.ts b/frontend/src/bundles/auth/components/common/components.ts
index 22726d9a9..ecda37021 100644
--- a/frontend/src/bundles/auth/components/common/components.ts
+++ b/frontend/src/bundles/auth/components/common/components.ts
@@ -1,3 +1,2 @@
-export { FormError } from './form-error/form-error.js';
 export { FormHeader } from './form-header/form-header.js';
 export { PasswordInput } from './password-input/password-input.js';
diff --git a/frontend/src/bundles/auth/components/common/form-error/form-error.tsx b/frontend/src/bundles/auth/components/common/form-error/form-error.tsx
deleted file mode 100644
index 965799129..000000000
--- a/frontend/src/bundles/auth/components/common/form-error/form-error.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import {
-    FormControl,
-    FormErrorMessage,
-} from '~/bundles/common/components/components.js';
-
-type Properties = {
-    isVisible: boolean;
-    message: string;
-};
-
-const FormError: React.FC<Properties> = ({ isVisible, message }) => {
-    return (
-        <FormControl isInvalid={isVisible}>
-            <FormErrorMessage>{message}</FormErrorMessage>
-        </FormControl>
-    );
-};
-
-export { FormError };
diff --git a/frontend/src/bundles/auth/components/sign-in-form/sign-in-form.tsx b/frontend/src/bundles/auth/components/sign-in-form/sign-in-form.tsx
index 78ca1cc6d..5ee59c091 100644
--- a/frontend/src/bundles/auth/components/sign-in-form/sign-in-form.tsx
+++ b/frontend/src/bundles/auth/components/sign-in-form/sign-in-form.tsx
@@ -1,5 +1,4 @@
 import {
-    FormError,
     FormHeader,
     PasswordInput,
 } from '~/bundles/auth/components/common/components.js';
@@ -12,16 +11,8 @@ import {
     VStack,
 } from '~/bundles/common/components/components.js';
 import { EMPTY_VALUE } from '~/bundles/common/constants/constants.js';
-import {
-    AppRoute,
-    DataStatus,
-    UserValidationMessage,
-} from '~/bundles/common/enums/enums.js';
-import {
-    useAppForm,
-    useAppSelector,
-    useMemo,
-} from '~/bundles/common/hooks/hooks.js';
+import { AppRoute } from '~/bundles/common/enums/enums.js';
+import { useAppForm, useMemo } from '~/bundles/common/hooks/hooks.js';
 import {
     type UserSignInRequestDto,
     userSignInValidationSchema,
@@ -34,9 +25,6 @@ type Properties = {
 };
 
 const SignInForm: React.FC<Properties> = ({ onSubmit }) => {
-    const { dataStatus } = useAppSelector(({ auth }) => ({
-        dataStatus: auth.dataStatus,
-    }));
     const form = useAppForm<UserSignInRequestDto>({
         initialValues: DEFAULT_SIGN_IN_PAYLOAD,
         validationSchema: userSignInValidationSchema,
@@ -82,10 +70,6 @@ const SignInForm: React.FC<Properties> = ({ onSubmit }) => {
                             hasError={Boolean(errors.password)}
                             required
                         />
-                        <FormError
-                            isVisible={dataStatus === DataStatus.REJECTED}
-                            message={UserValidationMessage.INVALID_DATA}
-                        />
                         <Button
                             type="submit"
                             label="Sign in"
diff --git a/frontend/src/bundles/auth/components/sign-up-form/sign-up-form.tsx b/frontend/src/bundles/auth/components/sign-up-form/sign-up-form.tsx
index 7eadc0f83..03c16a7b2 100644
--- a/frontend/src/bundles/auth/components/sign-up-form/sign-up-form.tsx
+++ b/frontend/src/bundles/auth/components/sign-up-form/sign-up-form.tsx
@@ -1,5 +1,3 @@
-import { UserValidationMessage } from 'shared/src/bundles/users/users.js';
-
 import {
     Box,
     Button,
@@ -9,18 +7,14 @@ import {
     VStack,
 } from '~/bundles/common/components/components.js';
 import { EMPTY_VALUE } from '~/bundles/common/constants/constants.js';
-import { AppRoute, DataStatus } from '~/bundles/common/enums/enums.js';
-import {
-    useAppForm,
-    useAppSelector,
-    useMemo,
-} from '~/bundles/common/hooks/hooks.js';
+import { AppRoute } from '~/bundles/common/enums/enums.js';
+import { useAppForm, useMemo } from '~/bundles/common/hooks/hooks.js';
 import {
     type UserSignUpRequestDto,
     userSignUpValidationSchema,
 } from '~/bundles/users/users.js';
 
-import { FormError, FormHeader, PasswordInput } from '../common/components.js';
+import { FormHeader, PasswordInput } from '../common/components.js';
 import { DEFAULT_SIGN_UP_PAYLOAD } from './constants/constants.js';
 
 type Properties = {
@@ -28,9 +22,6 @@ type Properties = {
 };
 
 const SignUpForm: React.FC<Properties> = ({ onSubmit }) => {
-    const { dataStatus } = useAppSelector(({ auth }) => ({
-        dataStatus: auth.dataStatus,
-    }));
     const form = useAppForm<UserSignUpRequestDto>({
         initialValues: DEFAULT_SIGN_UP_PAYLOAD,
         validationSchema: userSignUpValidationSchema,
@@ -89,12 +80,6 @@ const SignUpForm: React.FC<Properties> = ({ onSubmit }) => {
                             hasError={Boolean(errors.confirmPassword)}
                             required
                         />
-                        <FormError
-                            isVisible={dataStatus === DataStatus.REJECTED}
-                            message={
-                                UserValidationMessage.USER_IS_NOT_AVAILABLE
-                            }
-                        />
                         <Button
                             type="submit"
                             label="Sign up"
diff --git a/frontend/src/bundles/common/components/player/constants/constants.ts b/frontend/src/bundles/common/components/player/constants/constants.ts
index 77e0d0996..9a4e2b15c 100644
--- a/frontend/src/bundles/common/components/player/constants/constants.ts
+++ b/frontend/src/bundles/common/components/player/constants/constants.ts
@@ -1,3 +1,4 @@
 export { ASPECT_RATIO_LANDSCAPE } from './aspect-ratio-landscape.constant.js';
 export { ASPECT_RATIO_PORTRAIT } from './aspect-ratio-portrait.constant.js';
+export { FPS } from './fps.constant.js';
 export { MIN_DURATION_IN_FRAMES } from './min-duration-in-frames.js';
diff --git a/frontend/src/bundles/common/components/player/constants/fps.constant.ts b/frontend/src/bundles/common/components/player/constants/fps.constant.ts
new file mode 100644
index 000000000..8d67fab57
--- /dev/null
+++ b/frontend/src/bundles/common/components/player/constants/fps.constant.ts
@@ -0,0 +1,3 @@
+const FPS = 30;
+
+export { FPS };
diff --git a/frontend/src/bundles/common/components/player/player.tsx b/frontend/src/bundles/common/components/player/player.tsx
index c1dc8f39b..7757fa597 100644
--- a/frontend/src/bundles/common/components/player/player.tsx
+++ b/frontend/src/bundles/common/components/player/player.tsx
@@ -9,6 +9,7 @@ import { VideoComponent } from '~/bundles/studio/components/components.js';
 import {
     ASPECT_RATIO_LANDSCAPE,
     ASPECT_RATIO_PORTRAIT,
+    FPS,
     MIN_DURATION_IN_FRAMES,
 } from './constants/constants.js';
 import { LandscapeStyle, PortraitStyle } from './styles/styles.js';
@@ -34,8 +35,8 @@ const Player: React.FC<Properties> = ({ playerRef }) => {
         };
     }, [scenes, scripts]);
 
-    const durationInFrames = scenes.reduce(
-        (sum, scene) => sum + scene.duration,
+    const durationInFrames = scripts.reduce(
+        (sum, script) => sum + Math.round(script.duration),
         0,
     );
 
@@ -59,7 +60,7 @@ const Player: React.FC<Properties> = ({ playerRef }) => {
                 component={VideoComponent}
                 inputProps={inputProperties}
                 durationInFrames={
-                    durationInFrames * 30 || MIN_DURATION_IN_FRAMES
+                    durationInFrames * FPS || MIN_DURATION_IN_FRAMES
                 }
                 compositionWidth={size.width}
                 compositionHeight={size.height}
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
index c4fc948f7..c11e8c7e7 100644
--- 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
@@ -22,7 +22,11 @@ import {
 } from './libs/enums/enums.js';
 import styles from './styles.module.css';
 
-const VideoPreview: React.FC = () => {
+type Properties = {
+    onClose: () => void;
+};
+
+const VideoPreview: React.FC<Properties> = ({ onClose }) => {
     const dispatch = useAppDispatch();
     const [view, setView] = useState<VideoPreviewT>(
         VideoPreviewValues.PORTRAIT,
@@ -38,7 +42,8 @@ const VideoPreview: React.FC = () => {
 
     const handleClick = useCallback((): void => {
         dispatch(studioActions.setVideoSize(view));
-    }, [dispatch, view]);
+        onClose();
+    }, [dispatch, onClose, view]);
 
     return (
         <Flex className={styles['preview-container']}>
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
index 3ea758fa7..5525bb3f9 100644
--- 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
@@ -15,7 +15,11 @@ import {
     VideoPreview,
 } from './components/components.js';
 
-const VideoModalContent: React.FC = () => {
+type Properties = {
+    onClose: () => void;
+};
+
+const VideoModalContent: React.FC<Properties> = ({ onClose }) => {
     return (
         <Tabs orientation="vertical" variant="unstyled" height="full">
             <VStack gap={0}>
@@ -48,7 +52,7 @@ const VideoModalContent: React.FC = () => {
                     alignItems="center"
                     justifyContent="center"
                 >
-                    <VideoPreview />
+                    <VideoPreview onClose={onClose} />
                 </TabPanel>
                 <TabPanel p="0px 24px">
                     <GenerateScriptView />
diff --git a/frontend/src/bundles/common/components/video-modal/video-modal.tsx b/frontend/src/bundles/common/components/video-modal/video-modal.tsx
index cbc13e08d..18444360b 100644
--- a/frontend/src/bundles/common/components/video-modal/video-modal.tsx
+++ b/frontend/src/bundles/common/components/video-modal/video-modal.tsx
@@ -15,7 +15,7 @@ const VideoModal: React.FC<Properties> = ({ isOpen, onClose }) => {
 
     return (
         <Modal isOpen={isOpen} onClose={handleCloseChat}>
-            <VideoModalContent />
+            <VideoModalContent onClose={handleCloseChat} />
         </Modal>
     );
 };
diff --git a/frontend/src/bundles/common/icons/helper/icon-conversion.helper.ts b/frontend/src/bundles/common/icons/helper/icon-conversion.helper.ts
index 8b24d8759..d4345bd27 100644
--- a/frontend/src/bundles/common/icons/helper/icon-conversion.helper.ts
+++ b/frontend/src/bundles/common/icons/helper/icon-conversion.helper.ts
@@ -8,6 +8,7 @@ import {
     faFont,
     faForwardStep,
     faHouse,
+    faImage,
     faPause,
     faPen,
     faPlay,
@@ -16,6 +17,7 @@ import {
     faStop,
     faT,
     faTableColumns,
+    faVideoCamera,
     faVolumeHigh,
     faVolumeOff,
 } from '@fortawesome/free-solid-svg-icons';
@@ -41,6 +43,8 @@ const CloudArrowDown = convertIcon(faCloudArrowDown);
 const VolumeHigh = convertIcon(faVolumeHigh);
 const VolumeOff = convertIcon(faVolumeOff);
 const Stop = convertIcon(faStop);
+const VideoCamera = convertIcon(faVideoCamera);
+const Image = convertIcon(faImage);
 
 export {
     BackwardStep,
@@ -52,6 +56,7 @@ export {
     Font,
     ForwardStep,
     House,
+    Image,
     Pause,
     Pen,
     Play,
@@ -60,6 +65,7 @@ export {
     Stop,
     T,
     TableColumns,
+    VideoCamera,
     VolumeHigh,
     VolumeOff,
 };
diff --git a/frontend/src/bundles/common/icons/icon-name.ts b/frontend/src/bundles/common/icons/icon-name.ts
index 953788739..729172418 100644
--- a/frontend/src/bundles/common/icons/icon-name.ts
+++ b/frontend/src/bundles/common/icons/icon-name.ts
@@ -23,6 +23,7 @@ import {
     Font,
     ForwardStep,
     House,
+    Image,
     Pause,
     Pen,
     Play,
@@ -31,6 +32,7 @@ import {
     Stop,
     T,
     TableColumns,
+    VideoCamera,
     VolumeHigh,
     VolumeOff,
 } from './helper/icon-conversion.helper.js';
@@ -69,6 +71,8 @@ const IconName = {
     LOGO_TEXT: LogoText,
     DELETE: DeleteIcon,
     WARNING: WarningIcon,
+    VIDEO_CAMERA: VideoCamera,
+    IMAGE: Image,
 } as const;
 
 export { IconName };
diff --git a/frontend/src/bundles/create-avatar/components/consent/consent.tsx b/frontend/src/bundles/create-avatar/components/consent/consent.tsx
new file mode 100644
index 000000000..b1d02e096
--- /dev/null
+++ b/frontend/src/bundles/create-avatar/components/consent/consent.tsx
@@ -0,0 +1,38 @@
+import {
+    Box,
+    Button,
+    Flex,
+    Icon,
+    Text,
+} from '~/bundles/common/components/components.js';
+import { IconName } from '~/bundles/common/icons/icons.js';
+
+import styles from './styles.module.css';
+
+const Consent: React.FC = () => {
+    return (
+        <Flex className={styles['flex-container']}>
+            <Text variant={'title'} color={'background.600'} marginTop={'2vh'}>
+                Concent
+            </Text>
+            <Text variant={'body1'} color="typography.600" mb={3}>
+                To prevent misuse of technology, we just need to confirm the
+                person in the video is you.
+            </Text>
+            <Box
+                className={styles['recordSection']}
+                borderColor={'background.50'}
+            >
+                <Icon
+                    as={IconName.VIDEO_CAMERA}
+                    boxSize={100}
+                    color={'background.600'}
+                />
+                <Button label="Record a consent" width="220px" />
+            </Box>
+            <Button label="Generate Avatar" width="220px" />
+        </Flex>
+    );
+};
+
+export { Consent };
diff --git a/frontend/src/bundles/create-avatar/components/consent/styles.module.css b/frontend/src/bundles/create-avatar/components/consent/styles.module.css
new file mode 100644
index 000000000..86d9e8bc5
--- /dev/null
+++ b/frontend/src/bundles/create-avatar/components/consent/styles.module.css
@@ -0,0 +1,32 @@
+.flex-container {
+    flex-direction: column;
+    background-color: white;
+    padding: 30px;
+    border-radius: 10px;
+    align-items: center;
+    padding-bottom: 80px;
+}
+
+.inner-flex {
+    color: var(--chakra-colors-typography-600);
+    font-size: 14px;
+    justify-content: center;
+    gap: 40px;
+}
+
+.recordSection {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    border-width: 2px;
+    border-radius: 11px;
+    padding: 8vh;
+    padding-left: 20vh;
+    padding-right: 20vh;
+    justify-content: center;
+    margin-bottom: 5vh;
+}
+
+.icon {
+    margin-bottom: 16px;
+}
diff --git a/frontend/src/bundles/home/components/main-content/main-content.tsx b/frontend/src/bundles/home/components/main-content/main-content.tsx
index 71402f8f0..99ac4a842 100644
--- a/frontend/src/bundles/home/components/main-content/main-content.tsx
+++ b/frontend/src/bundles/home/components/main-content/main-content.tsx
@@ -3,12 +3,14 @@ import {
     Loader,
     Overlay,
 } from '~/bundles/common/components/components.js';
+import { useCollapse } from '~/bundles/common/components/sidebar/hooks/use-collapse.hook.js';
 import { DataStatus } from '~/bundles/common/enums/enums.js';
 import {
     useAppDispatch,
     useAppSelector,
     useEffect,
 } from '~/bundles/common/hooks/hooks.js';
+import { VideoGallery } from '~/bundles/home/enums/video-gallery.js';
 import { actions as homeActions } from '~/bundles/home/store/home.js';
 
 import { VideoSection } from '../components.js';
@@ -16,6 +18,7 @@ import styles from './styles.module.css';
 
 const MainContent: React.FC = () => {
     const dispatch = useAppDispatch();
+    const { isCollapsed } = useCollapse();
 
     const { videos, dataStatus } = useAppSelector(({ home }) => home);
 
@@ -26,13 +29,16 @@ const MainContent: React.FC = () => {
     }, [dispatch]);
 
     return (
-        <Box className={styles['main-content']}>
+        <Box
+            className={styles['main-content']}
+            w={isCollapsed ? 'calc(100vw - 60px)' : 'calc(100vw - 270px)'}
+        >
             <Overlay isOpen={dataStatus === DataStatus.PENDING}>
                 <Loader />
             </Overlay>
 
-            <VideoSection videos={videos} title="Recent videos" />
-            <VideoSection videos={videos} title="Videos" />
+            <VideoSection videos={videos} title={VideoGallery.RECENT_VIDEOS} />
+            <VideoSection videos={videos} title={VideoGallery.VIDEOS} />
         </Box>
     );
 };
diff --git a/frontend/src/bundles/home/components/video-section/styles.module.css b/frontend/src/bundles/home/components/video-section/styles.module.css
new file mode 100644
index 000000000..64d222997
--- /dev/null
+++ b/frontend/src/bundles/home/components/video-section/styles.module.css
@@ -0,0 +1,6 @@
+.horizontal {
+    display: flex;
+    overflow-x: auto;
+    scrollbar-width: thin;
+    scrollbar-color: #c1c1c1 #f1f1f1;
+}
diff --git a/frontend/src/bundles/home/components/video-section/video-section.tsx b/frontend/src/bundles/home/components/video-section/video-section.tsx
index f65803267..68df2a31c 100644
--- a/frontend/src/bundles/home/components/video-section/video-section.tsx
+++ b/frontend/src/bundles/home/components/video-section/video-section.tsx
@@ -8,7 +8,9 @@ import {
 } from '~/bundles/common/components/components.js';
 import { type VideoGetAllItemResponseDto } from '~/bundles/home/types/types.js';
 
+import { VideoGallery } from '../../enums/video-gallery.js';
 import { VideoCard } from '../components.js';
+import styles from './styles.module.css';
 
 type Properties = {
     videos: Array<VideoGetAllItemResponseDto> | [];
@@ -33,11 +35,29 @@ const VideoSection: React.FC<Properties> = ({ videos, title }) => {
             </Flex>
 
             {videos.length > 0 ? (
-                <SimpleGrid columns={{ sm: 2, md: 3, lg: 4 }} spacing="20px">
-                    {videos.map(({ id, ...video }) => (
-                        <VideoCard key={id} id={id} {...video} />
-                    ))}
-                </SimpleGrid>
+                title === VideoGallery.RECENT_VIDEOS ? (
+                    <Box className={styles['horizontal']}>
+                        {videos.map(({ id, ...video }) => (
+                            <Box
+                                key={id}
+                                flex="0 0 auto"
+                                marginRight="20px"
+                                width="250px"
+                            >
+                                <VideoCard id={id} {...video} />
+                            </Box>
+                        ))}
+                    </Box>
+                ) : (
+                    <SimpleGrid
+                        columns={{ sm: 2, md: 3, lg: 4 }}
+                        spacing="20px"
+                    >
+                        {videos.map(({ id, ...video }) => (
+                            <VideoCard key={id} id={id} {...video} />
+                        ))}
+                    </SimpleGrid>
+                )
             ) : (
                 <Text color="typography.600" variant="body1">
                     You have no videos right now.
diff --git a/frontend/src/bundles/home/enums/video-gallery.ts b/frontend/src/bundles/home/enums/video-gallery.ts
new file mode 100644
index 000000000..cf4d0c320
--- /dev/null
+++ b/frontend/src/bundles/home/enums/video-gallery.ts
@@ -0,0 +1,6 @@
+const VideoGallery = {
+    VIDEOS: 'Videos',
+    RECENT_VIDEOS: 'Recent videos',
+} as const;
+
+export { VideoGallery };
diff --git a/frontend/src/bundles/home/pages/home.tsx b/frontend/src/bundles/home/pages/home.tsx
index 6b4381356..360c907d2 100644
--- a/frontend/src/bundles/home/pages/home.tsx
+++ b/frontend/src/bundles/home/pages/home.tsx
@@ -8,7 +8,7 @@ import { MainContent } from '../components/components.js';
 
 const Home: React.FC = () => {
     return (
-        <Box bg="background.900" minHeight="100vh" overflow="auto">
+        <Box bg="background.900" minHeight="100vh">
             <Header />
             <Sidebar>
                 <MainContent />
diff --git a/frontend/src/bundles/studio/components/timeline/rows/scenes-row.tsx b/frontend/src/bundles/studio/components/timeline/rows/scenes-row.tsx
index 94d2b4f87..f8d429603 100644
--- a/frontend/src/bundles/studio/components/timeline/rows/scenes-row.tsx
+++ b/frontend/src/bundles/studio/components/timeline/rows/scenes-row.tsx
@@ -1,7 +1,7 @@
 import {
     Badge,
+    Box,
     CloseButton,
-    Image,
 } from '~/bundles/common/components/components.js';
 import {
     useAppDispatch,
@@ -91,12 +91,20 @@ const ScenesRow: React.FC = () => {
                     >
                         {index + 1}
                     </Badge>
-                    {item.avatar && (
-                        <Image
-                            src={item.avatar.url}
-                            alt="Video preview"
+                    {(item.background || item.avatar) && (
+                        <Box
+                            background={`${item.background?.color ?? ''} url(${item.background?.url})`}
+                            backgroundSize="contain"
                             height="100%"
-                        />
+                            width="100%"
+                        >
+                            <Box
+                                backgroundImage={item.avatar?.url ?? ''}
+                                backgroundSize="contain"
+                                height="100%"
+                                width="100%"
+                            ></Box>
+                        </Box>
                     )}
                     {isDeleteAvailable && (
                         <CloseButton
diff --git a/frontend/src/bundles/studio/components/video-menu/components/menu-content/backgrounds-content/backgrounds-content.tsx b/frontend/src/bundles/studio/components/video-menu/components/menu-content/backgrounds-content/backgrounds-content.tsx
new file mode 100644
index 000000000..e4c0fe3f5
--- /dev/null
+++ b/frontend/src/bundles/studio/components/video-menu/components/menu-content/backgrounds-content/backgrounds-content.tsx
@@ -0,0 +1,48 @@
+import {
+    SimpleGrid,
+    Tab,
+    TabList,
+    TabPanel,
+    TabPanels,
+    Tabs,
+} from '~/bundles/common/components/components.js';
+// TODO: Make endpoint for this
+import backgroundColors from '~/bundles/studio/data/bg-colors.json';
+import backgroundImages from '~/bundles/studio/data/bg-images.json';
+
+import { ColorCard, ImageCard } from './components/components.js';
+
+const BackgroundsContent: React.FC = () => {
+    return (
+        <>
+            <Tabs>
+                <TabList>
+                    <Tab>Images</Tab>
+                    <Tab>Colors</Tab>
+                </TabList>
+
+                <TabPanels>
+                    <TabPanel>
+                        <SimpleGrid columns={2} spacingX="13px" spacingY="10px">
+                            {backgroundImages.map((imageSource, index) => (
+                                <ImageCard
+                                    key={index}
+                                    imageSource={imageSource}
+                                />
+                            ))}
+                        </SimpleGrid>
+                    </TabPanel>
+                    <TabPanel>
+                        <SimpleGrid columns={3} spacingX="13px" spacingY="10px">
+                            {backgroundColors.map((color, index) => (
+                                <ColorCard key={index} color={color} />
+                            ))}
+                        </SimpleGrid>
+                    </TabPanel>
+                </TabPanels>
+            </Tabs>
+        </>
+    );
+};
+
+export { BackgroundsContent };
diff --git a/frontend/src/bundles/studio/components/video-menu/components/menu-content/backgrounds-content/components/color-card.tsx b/frontend/src/bundles/studio/components/video-menu/components/menu-content/backgrounds-content/components/color-card.tsx
new file mode 100644
index 000000000..5ceaabb4a
--- /dev/null
+++ b/frontend/src/bundles/studio/components/video-menu/components/menu-content/backgrounds-content/components/color-card.tsx
@@ -0,0 +1,30 @@
+import { Box } from '~/bundles/common/components/components.js';
+import { useAppDispatch, useCallback } from '~/bundles/common/hooks/hooks.js';
+import { actions as studioActions } from '~/bundles/studio/store/studio.js';
+
+type Properties = {
+    color: string;
+};
+
+const ColorCard: React.FC<Properties> = ({ color }) => {
+    const dispatch = useAppDispatch();
+
+    const handleColorClick = useCallback((): void => {
+        void dispatch(
+            studioActions.addBackgroundToScene({
+                isValueImage: false,
+                value: color,
+            }),
+        );
+    }, [dispatch, color]);
+
+    return (
+        <Box
+            backgroundColor={color}
+            height="80px"
+            onClick={handleColorClick}
+        ></Box>
+    );
+};
+
+export { ColorCard };
diff --git a/frontend/src/bundles/studio/components/video-menu/components/menu-content/backgrounds-content/components/components.ts b/frontend/src/bundles/studio/components/video-menu/components/menu-content/backgrounds-content/components/components.ts
new file mode 100644
index 000000000..f699b1c2e
--- /dev/null
+++ b/frontend/src/bundles/studio/components/video-menu/components/menu-content/backgrounds-content/components/components.ts
@@ -0,0 +1,2 @@
+export { ColorCard } from './color-card.js';
+export { ImageCard } from './image-card.js';
diff --git a/frontend/src/bundles/studio/components/video-menu/components/menu-content/backgrounds-content/components/image-card.tsx b/frontend/src/bundles/studio/components/video-menu/components/menu-content/backgrounds-content/components/image-card.tsx
new file mode 100644
index 000000000..bc8348e52
--- /dev/null
+++ b/frontend/src/bundles/studio/components/video-menu/components/menu-content/backgrounds-content/components/image-card.tsx
@@ -0,0 +1,35 @@
+import { Box, Image } from '~/bundles/common/components/components.js';
+import { useAppDispatch, useCallback } from '~/bundles/common/hooks/hooks.js';
+import { actions as studioActions } from '~/bundles/studio/store/studio.js';
+
+import styles from './styles.module.css';
+
+type Properties = {
+    imageSource: string;
+};
+
+const ImageCard: React.FC<Properties> = ({ imageSource }) => {
+    const dispatch = useAppDispatch();
+
+    const handleImageClick = useCallback((): void => {
+        void dispatch(
+            studioActions.addBackgroundToScene({
+                isValueImage: true,
+                value: imageSource,
+            }),
+        );
+    }, [dispatch, imageSource]);
+
+    return (
+        <Box className={styles['image-item']} onClick={handleImageClick}>
+            <Image
+                src={imageSource}
+                objectFit="contain"
+                width="100%"
+                height="100%"
+            ></Image>
+        </Box>
+    );
+};
+
+export { ImageCard };
diff --git a/frontend/src/bundles/studio/components/video-menu/components/menu-content/backgrounds-content/components/styles.module.css b/frontend/src/bundles/studio/components/video-menu/components/menu-content/backgrounds-content/components/styles.module.css
new file mode 100644
index 000000000..4416b5f25
--- /dev/null
+++ b/frontend/src/bundles/studio/components/video-menu/components/menu-content/backgrounds-content/components/styles.module.css
@@ -0,0 +1,14 @@
+.image-item {
+    height: 100px;
+    background-color: var(--chakra-colors-background-700);
+    border-radius: 7px;
+    border-width: 1px;
+    border-color: transparent;
+    transition: all 0.3s ease;
+}
+
+.image-item:hover {
+    background-color: var(--chakra-colors-background-600);
+    border-color: var(--chakra-colors-brand-secondary-300);
+    cursor: 'pointer';
+}
diff --git a/frontend/src/bundles/studio/components/video-menu/components/menu-content/content.ts b/frontend/src/bundles/studio/components/video-menu/components/menu-content/content.ts
index 1741210ea..fee93901e 100644
--- a/frontend/src/bundles/studio/components/video-menu/components/menu-content/content.ts
+++ b/frontend/src/bundles/studio/components/video-menu/components/menu-content/content.ts
@@ -1,2 +1,3 @@
 export { AvatarsContent } from './avatars-content/avatars-content.js';
+export { BackgroundsContent } from './backgrounds-content/backgrounds-content.js';
 export { ScriptContent } from './script-content/script-content.js';
diff --git a/frontend/src/bundles/studio/components/video-menu/video-menu.tsx b/frontend/src/bundles/studio/components/video-menu/video-menu.tsx
index 469af8838..652226737 100644
--- a/frontend/src/bundles/studio/components/video-menu/video-menu.tsx
+++ b/frontend/src/bundles/studio/components/video-menu/video-menu.tsx
@@ -17,6 +17,7 @@ import { actions as studioActions } from '~/bundles/studio/store/studio.js';
 import { Menu, MenuBody } from './components/components.js';
 import {
     AvatarsContent,
+    BackgroundsContent,
     ScriptContent,
 } from './components/menu-content/content.js';
 // import {
@@ -90,6 +91,11 @@ const VideoMenu: React.FC = () => {
         //     icon: <Icon as={IconName.UPLOAD} />,
         //     getContent: () => <AssetsContent />,
         // },
+        backgrounds: {
+            label: 'Backgrounds',
+            icon: <Icon as={IconName.IMAGE} />,
+            getContent: () => <BackgroundsContent />,
+        },
     };
 
     const activeMenuItem = activeItem && menuItems[activeItem];
diff --git a/frontend/src/bundles/studio/components/video/styles.module.css b/frontend/src/bundles/studio/components/video/styles.module.css
index 888594498..b7ed47c9e 100644
--- a/frontend/src/bundles/studio/components/video/styles.module.css
+++ b/frontend/src/bundles/studio/components/video/styles.module.css
@@ -4,6 +4,13 @@
     justify-content: center;
 }
 
+.background {
+    background-size: cover;
+    height: 100%;
+    width: 100%;
+    justify-content: center;
+}
+
 .image {
     position: absolute;
     object-fit: contain;
diff --git a/frontend/src/bundles/studio/components/video/video.tsx b/frontend/src/bundles/studio/components/video/video.tsx
index 8bdc0c5d8..be50b93e5 100644
--- a/frontend/src/bundles/studio/components/video/video.tsx
+++ b/frontend/src/bundles/studio/components/video/video.tsx
@@ -1,6 +1,7 @@
 import {
     AbsoluteFill,
     Audio,
+    Flex,
     RemotionImg,
     Series,
 } from '~/bundles/common/components/components.js';
@@ -37,11 +38,16 @@ const VideoComponent: React.FC<Properties> = ({ scenes, scripts }) => {
                             durationInFrames={scene.duration * FPS}
                             className={styles['sequence'] as string}
                         >
-                            {scene?.avatar?.url ? (
-                                <RemotionImg
-                                    className={styles['image']}
-                                    src={scene?.avatar.url}
-                                />
+                            {scene?.avatar?.url || scene.background ? (
+                                <Flex
+                                    background={`${scene.background?.color ?? ''} url(${scene.background?.url ?? ''}) no-repeat`}
+                                    className={styles['background']}
+                                >
+                                    <RemotionImg
+                                        className={styles['image']}
+                                        src={scene?.avatar?.url ?? ''}
+                                    />
+                                </Flex>
                             ) : (
                                 <></>
                             )}
diff --git a/frontend/src/bundles/studio/data/bg-colors.json b/frontend/src/bundles/studio/data/bg-colors.json
new file mode 100644
index 000000000..9f4b1a666
--- /dev/null
+++ b/frontend/src/bundles/studio/data/bg-colors.json
@@ -0,0 +1,10 @@
+[
+    "#FFE9D0",
+    "#FFFED3",
+    "#BBE9FF",
+    "#B1AFFF",
+    "#91DDCF",
+    "#F7F9F2",
+    "#E8C5E5",
+    "#F19ED2"
+]
diff --git a/frontend/src/bundles/studio/data/bg-images.json b/frontend/src/bundles/studio/data/bg-images.json
new file mode 100644
index 000000000..3f6ab14cd
--- /dev/null
+++ b/frontend/src/bundles/studio/data/bg-images.json
@@ -0,0 +1,8 @@
+[
+    "https://d2tm5q3cg1nlwf.cloudfront.net/city.webp",
+    "https://d2tm5q3cg1nlwf.cloudfront.net/wall_2.jfif",
+    "https://d2tm5q3cg1nlwf.cloudfront.net/wall.jpg",
+    "https://d2tm5q3cg1nlwf.cloudfront.net/sea.jfif",
+    "https://d2tm5q3cg1nlwf.cloudfront.net/school.jpg",
+    "https://d2tm5q3cg1nlwf.cloudfront.net/library.jfif"
+]
diff --git a/frontend/src/bundles/studio/enums/menu-items.enum.ts b/frontend/src/bundles/studio/enums/menu-items.enum.ts
index 810856f5a..f64cda74d 100644
--- a/frontend/src/bundles/studio/enums/menu-items.enum.ts
+++ b/frontend/src/bundles/studio/enums/menu-items.enum.ts
@@ -5,6 +5,7 @@ const MenuItems = {
     SCRIPT: 'script',
     // TEXT: 'text',
     // ASSETS: 'assets',
+    BACKGROUNDS: 'backgrounds',
 } as const;
 
 export { MenuItems };
diff --git a/frontend/src/bundles/studio/helpers/helpers.ts b/frontend/src/bundles/studio/helpers/helpers.ts
index df8630b95..ab1113d36 100644
--- a/frontend/src/bundles/studio/helpers/helpers.ts
+++ b/frontend/src/bundles/studio/helpers/helpers.ts
@@ -4,4 +4,5 @@ export { getNewItemIndexBySpan } from './get-new-item-index.js';
 export { calculateTotalMilliseconds } from './get-total-time.js';
 export { getVoicesConfigs } from './get-voices-configs.helper.js';
 export { reorderItemsByIndexes } from './reorder-items.js';
+export { scenesExceedScripts } from './scenes-exceed-scripts.js';
 export { setItemsSpan } from './set-items-span.js';
diff --git a/frontend/src/bundles/studio/helpers/scenes-exceed-scripts.ts b/frontend/src/bundles/studio/helpers/scenes-exceed-scripts.ts
new file mode 100644
index 000000000..06621a128
--- /dev/null
+++ b/frontend/src/bundles/studio/helpers/scenes-exceed-scripts.ts
@@ -0,0 +1,18 @@
+import { type Scene, type Script } from '../types/types.js';
+
+const INITIAL_DURATION = 0;
+
+const scenesExceedScripts = (scenes: Scene[], scripts: Script[]): boolean => {
+    const totalScenesDuration = scenes.reduce(
+        (accumulator, scene) => accumulator + scene.duration,
+        INITIAL_DURATION,
+    );
+    const totalScriptsDuration = scripts.reduce(
+        (accumulator, script) => accumulator + script.duration,
+        INITIAL_DURATION,
+    );
+
+    return totalScenesDuration > totalScriptsDuration;
+};
+
+export { scenesExceedScripts };
diff --git a/frontend/src/bundles/studio/pages/studio.tsx b/frontend/src/bundles/studio/pages/studio.tsx
index 0761c0880..2ae012f91 100644
--- a/frontend/src/bundles/studio/pages/studio.tsx
+++ b/frontend/src/bundles/studio/pages/studio.tsx
@@ -23,6 +23,7 @@ import {
     useLocation,
     useNavigate,
     useRef,
+    useState,
 } from '~/bundles/common/hooks/hooks.js';
 import { IconName } from '~/bundles/common/icons/icons.js';
 import { notificationService } from '~/bundles/common/services/services.js';
@@ -33,6 +34,7 @@ import {
     Timeline,
     VideoMenu,
     VideoNameInput,
+    WarningModal,
 } from '../components/components.js';
 import {
     SCRIPT_AND_AVATAR_ARE_REQUIRED,
@@ -42,12 +44,13 @@ import {
     VIDEO_SUBMIT_NOTIFICATION_ID,
 } from '../constants/constants.js';
 import { NotificationMessage, NotificationTitle } from '../enums/enums.js';
-import { getVoicesConfigs } from '../helpers/helpers.js';
+import { getVoicesConfigs, scenesExceedScripts } from '../helpers/helpers.js';
 import { selectVideoDataById } from '../store/selectors.js';
 import { actions as studioActions } from '../store/studio.js';
 
 const Studio: React.FC = () => {
     const { state: locationState } = useLocation();
+    const [isModalOpen, setIsModalOpen] = useState(false);
 
     const videoData = useAppSelector((state) =>
         selectVideoDataById(state, locationState?.id),
@@ -60,6 +63,14 @@ const Studio: React.FC = () => {
     const dispatch = useAppDispatch();
     const navigate = useNavigate();
 
+    const handleOpenModal = useCallback(() => {
+        setIsModalOpen(true);
+    }, []);
+
+    const handleCloseModal = useCallback(() => {
+        setIsModalOpen(false);
+    }, []);
+
     useEffect((): void => {
         if (videoData) {
             void dispatch(studioActions.loadVideoData(videoData));
@@ -70,10 +81,10 @@ const Studio: React.FC = () => {
         dispatch(studioActions.changeVideoSize());
     }, [dispatch]);
 
-    const handleSubmit = useCallback(() => {
+    const handleConfirmSubmit = useCallback(() => {
+        // TODO: REPLACE LOGIC WITH MULTIPLE SCENES
         const scene = scenes[0];
         const script = scripts[0];
-
         if (!scene?.avatar || !script) {
             notificationService.warn({
                 id: SCRIPT_AND_AVATAR_ARE_REQUIRED,
@@ -105,6 +116,14 @@ const Studio: React.FC = () => {
             });
     }, [dispatch, navigate, scenes, scripts]);
 
+    const handleSubmit = useCallback(() => {
+        if (scenesExceedScripts(scenes, scripts)) {
+            handleOpenModal();
+        } else {
+            handleConfirmSubmit();
+        }
+    }, [handleConfirmSubmit, handleOpenModal, scenes, scripts]);
+
     useEffect(() => {
         return () => {
             dispatch(studioActions.resetStudio());
@@ -172,6 +191,11 @@ const Studio: React.FC = () => {
             display="flex"
             flexDirection="column"
         >
+            <WarningModal
+                isOpen={isModalOpen}
+                onClose={handleCloseModal}
+                onSubmit={handleConfirmSubmit}
+            />
             <Header
                 center={
                     <Button
diff --git a/frontend/src/bundles/studio/store/slice.ts b/frontend/src/bundles/studio/store/slice.ts
index f24a1a25b..8755b58fe 100644
--- a/frontend/src/bundles/studio/store/slice.ts
+++ b/frontend/src/bundles/studio/store/slice.ts
@@ -59,6 +59,11 @@ type DestinationPointerActionPayload = ItemActionPayload & {
     type: RowType;
 };
 
+type BackgroundPayload = {
+    value: string;
+    isValueImage: boolean;
+};
+
 type ScriptPlayer = {
     isPlaying: boolean;
     url: string | null;
@@ -318,6 +323,29 @@ const { reducer, actions, name } = createSlice({
                 };
             });
         },
+        addBackgroundToScene(state, action: PayloadAction<BackgroundPayload>) {
+            const selectedItem = state.ui.selectedItem;
+            if (!selectedItem || selectedItem.type !== RowNames.SCENE) {
+                return;
+            }
+
+            state.scenes = state.scenes.map((scene) => {
+                if (scene.id !== selectedItem.id) {
+                    return scene;
+                }
+
+                const { isValueImage, value } = action.payload;
+
+                const newBackground = isValueImage
+                    ? { url: value }
+                    : { color: value };
+
+                return {
+                    ...scene,
+                    background: newBackground,
+                };
+            });
+        },
         setMenuActiveItem(
             state,
             action: PayloadAction<ValueOf<typeof MenuItems> | null>,
diff --git a/frontend/src/framework/theme/styles/components.styles.ts b/frontend/src/framework/theme/styles/components.styles.ts
index 11587e602..3b19e00b7 100644
--- a/frontend/src/framework/theme/styles/components.styles.ts
+++ b/frontend/src/framework/theme/styles/components.styles.ts
@@ -263,13 +263,6 @@ const components = {
             fontSize: 'sm',
         },
     },
-    FormError: {
-        baseStyle: {
-            text: {
-                color: colors.brand.secondary[900],
-            },
-        },
-    },
     Card: {
         variants: {
             outline: {