diff --git a/frontend/src/bundles/auth/components/common/form-header/form-header.module.css b/frontend/src/bundles/auth/components/common/form-header/form-header.module.css
new file mode 100644
index 000000000..c4f581cf5
--- /dev/null
+++ b/frontend/src/bundles/auth/components/common/form-header/form-header.module.css
@@ -0,0 +1,14 @@
+.logo {
+    margin-bottom: 50px;
+}
+
+.heading {
+    color: white;
+    margin-bottom: 6px;
+    font-size: 30px;
+}
+
+.text {
+    margin-bottom: 24px;
+    font-size: 14px;
+}
diff --git a/frontend/src/bundles/common/components/components.ts b/frontend/src/bundles/common/components/components.ts
index 8a84da077..627bb0220 100644
--- a/frontend/src/bundles/common/components/components.ts
+++ b/frontend/src/bundles/common/components/components.ts
@@ -44,6 +44,7 @@ export {
     Input as LibraryInput,
     Link as LibraryLink,
     Modal as LibraryModal,
+    ListItem,
     Menu,
     MenuButton,
     MenuItem,
@@ -67,6 +68,7 @@ export {
     Tabs,
     Text,
     Tooltip,
+    UnorderedList,
     VStack,
 } from '@chakra-ui/react';
 export { Player as LibraryPlayer } from '@remotion/player';
diff --git a/frontend/src/bundles/common/components/header/header.module.css b/frontend/src/bundles/common/components/header/header.module.css
new file mode 100644
index 000000000..7319f2acb
--- /dev/null
+++ b/frontend/src/bundles/common/components/header/header.module.css
@@ -0,0 +1,19 @@
+.header {
+    height: 75px;
+    position: sticky;
+    top: 0;
+    left: 0;
+    width: 100%;
+    background-color: var(--chakra-colors-background-900);
+    box-shadow: var(--chakra-shadows-md);
+    z-index: 100;
+    padding: var(--chakra-space-4);
+    align-items: center;
+    justify-content: space-between;
+}
+
+.logoText {
+    font-size: var(--chakra-fontSizes-xl);
+    font-weight: var(--chakra-fontWeights-lighter);
+    color: var(--chakra-colors-white);
+}
diff --git a/frontend/src/bundles/common/components/sidebar/sidebar.module.css b/frontend/src/bundles/common/components/sidebar/sidebar.module.css
new file mode 100644
index 000000000..3b7d97da8
--- /dev/null
+++ b/frontend/src/bundles/common/components/sidebar/sidebar.module.css
@@ -0,0 +1,38 @@
+.sidebarContainer {
+    background-color: var(--chakra-colors-background-900);
+    height: calc(100vh - 75px);
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding: 10px;
+    padding-bottom: 20px;
+}
+
+.userBox {
+    margin-bottom: 30px;
+}
+
+.contentBox {
+    flex: 1;
+}
+
+.sidebarItem {
+    width: 100%;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 1rem;
+    font-weight: bold;
+    border-radius: 10px;
+    padding: 10px;
+}
+
+.itemJustifyCenter {
+    justify-content: center;
+}
+
+.itemJustifyStart {
+    justify-content: flex-start;
+}
diff --git a/frontend/src/bundles/common/components/upload-video/components/video-player/components/control/libs/hooks/hooks.ts b/frontend/src/bundles/common/components/upload-video/components/video-player/components/control/libs/hooks/hooks.ts
new file mode 100644
index 000000000..fac0b689c
--- /dev/null
+++ b/frontend/src/bundles/common/components/upload-video/components/video-player/components/control/libs/hooks/hooks.ts
@@ -0,0 +1 @@
+export { useAnimationFrame } from './use-animation-frame.js';
diff --git a/frontend/src/bundles/common/components/upload-video/components/video-player/components/control/libs/hooks/use-animation-frame.ts b/frontend/src/bundles/common/components/upload-video/components/video-player/components/control/libs/hooks/use-animation-frame.ts
new file mode 100644
index 000000000..fef569486
--- /dev/null
+++ b/frontend/src/bundles/common/components/upload-video/components/video-player/components/control/libs/hooks/use-animation-frame.ts
@@ -0,0 +1,29 @@
+import {
+    useCallback,
+    useEffect,
+    useRef,
+} from '~/bundles/common/hooks/hooks.js';
+
+const useAnimationFrame = (
+    nextAnimationFrameHandler: () => void,
+    shouldAnimate = true,
+): void => {
+    const frame = useRef(0);
+
+    const animate = useCallback((): void => {
+        nextAnimationFrameHandler();
+        frame.current = requestAnimationFrame(animate);
+    }, [nextAnimationFrameHandler]);
+
+    useEffect(() => {
+        if (shouldAnimate) {
+            frame.current = requestAnimationFrame(animate);
+        } else {
+            cancelAnimationFrame(frame.current);
+        }
+
+        return (): void => cancelAnimationFrame(frame.current);
+    }, [animate, shouldAnimate]);
+};
+
+export { useAnimationFrame };
diff --git a/frontend/src/bundles/common/components/video-modal/video-modal.module.css b/frontend/src/bundles/common/components/video-modal/video-modal.module.css
new file mode 100644
index 000000000..ae2b90bc1
--- /dev/null
+++ b/frontend/src/bundles/common/components/video-modal/video-modal.module.css
@@ -0,0 +1,108 @@
+.previewContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.previewBox {
+    height: 444px;
+    border-width: 1px;
+    border-color: var(--chakra-colors-gray-300);
+    border-radius: var(--chakra-radii-md);
+    justify-content: center;
+    align-items: center;
+    margin-bottom: var(--chakra-space-4);
+}
+
+.previewInnerBox {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: var(--chakra-colors-gray-400);
+}
+
+.previewIcon {
+    padding: 5px;
+    height: 16px;
+}
+
+.previewText {
+    color: var(--chakra-colors-gray-400);
+}
+
+.previewButtonContainer {
+    display: flex;
+    justify-content: center;
+    gap: var(--chakra-space-4);
+}
+
+.previewButton {
+    background-color: var(--chakra-colors-brand-secondary-300);
+    color: white;
+}
+
+.previewButton:hover {
+    background-color: var(--chakra-colors-brand-secondary-600);
+}
+
+.scriptFormContainer {
+    width: 256px;
+    margin-top: 20px;
+}
+
+.scriptFormTextareaTopic {
+    height: 84px;
+}
+
+.scriptFormTextareaAdditionalInfo {
+    height: 64px;
+}
+
+.scriptPlaceholderContainer {
+    width: 100%;
+    padding: 40px;
+    gap: 10px;
+}
+
+.scriptPlaceholderIcon {
+    color: var(--chakra-colors-brand-secondary-300);
+    opacity: 0.5;
+    font-size: 2rem;
+}
+
+.scriptPlaceholderText {
+    color: var(--chakra-colors-gray-400);
+    width: 40%;
+    min-width: 175px;
+    text-align: center;
+    font-style: italic;
+}
+.scriptViewHeading {
+    color: var(--chakra-colors-typography-900);
+    padding: 33px 0px 20px;
+}
+
+.scriptViewTabList {
+    width: max-content;
+    background-color: var(--chakra-colors-gray-100);
+    border-width: 1px;
+    border-radius: var(--chakra-radii-md);
+    padding: var(--chakra-space-1);
+    gap: 10px;
+}
+
+.scriptViewTab {
+    border-radius: var(--chakra-radii-md);
+    padding-left: var(--chakra-space-4);
+    padding-right: var(--chakra-space-4);
+    padding-top: var(--chakra-space-1);
+    padding-bottom: var(--chakra-space-1);
+}
+
+.scriptViewTabPanel {
+    padding: 0;
+}
+
+.scriptViewHStack {
+    justify-content: space-between;
+}
diff --git a/frontend/src/bundles/common/enums/app-route.enum.ts b/frontend/src/bundles/common/enums/app-route.enum.ts
index 21140bf1e..d6526128a 100644
--- a/frontend/src/bundles/common/enums/app-route.enum.ts
+++ b/frontend/src/bundles/common/enums/app-route.enum.ts
@@ -5,6 +5,7 @@ const AppRoute = {
     STUDIO: '/studio',
     MY_AVATAR: '/my-avatar',
     ANY: '*',
+    CREATE_AVATAR: '/create-avatar',
 } as const;
 
 export { AppRoute };
diff --git a/frontend/src/bundles/common/icons/icon-name.ts b/frontend/src/bundles/common/icons/icon-name.ts
index d7129229a..c0a541f54 100644
--- a/frontend/src/bundles/common/icons/icon-name.ts
+++ b/frontend/src/bundles/common/icons/icon-name.ts
@@ -2,6 +2,7 @@ import {
     AddIcon,
     ArrowLeftIcon,
     ArrowRightIcon,
+    CheckCircleIcon,
     CloseIcon,
     DownloadIcon,
     ViewIcon,
@@ -58,6 +59,7 @@ const IconName = {
     TEXT: T,
     ADD: AddIcon,
     CLOSE: CloseIcon,
+    CHECK_CIRCLE: CheckCircleIcon,
     OPEN_AI: OpenAi,
     LOGO: Logo,
     LOGO_TEXT: LogoText,
diff --git a/frontend/src/bundles/create-avatar/components/components.ts b/frontend/src/bundles/create-avatar/components/components.ts
new file mode 100644
index 000000000..db0a242a4
--- /dev/null
+++ b/frontend/src/bundles/create-avatar/components/components.ts
@@ -0,0 +1 @@
+export { Instruction } from './instruction/instruction.js';
diff --git a/frontend/src/bundles/create-avatar/components/instruction-list/instruction-list.tsx b/frontend/src/bundles/create-avatar/components/instruction-list/instruction-list.tsx
new file mode 100644
index 000000000..e44f88cf3
--- /dev/null
+++ b/frontend/src/bundles/create-avatar/components/instruction-list/instruction-list.tsx
@@ -0,0 +1,44 @@
+import {
+    Box,
+    Flex,
+    Icon,
+    ListItem,
+    Text,
+    UnorderedList,
+} from '~/bundles/common/components/components.js';
+import { IconName } from '~/bundles/common/icons/icons.js';
+
+import styles from './styles.module.css';
+
+interface InstructionListProperties {
+    color: string;
+    listItems: string[];
+    title: string;
+}
+
+const InstructionList: React.FC<InstructionListProperties> = ({
+    color,
+    listItems,
+    title,
+}) => (
+    <Box>
+        <Flex gap="5px" marginBottom="30px">
+            <Icon
+                className={styles['icon']}
+                boxSize={5}
+                as={IconName.CHECK_CIRCLE}
+                color={color}
+            />
+            <Text as="span" color={color} variant="bodySmall">
+                {title}
+            </Text>
+        </Flex>
+        <UnorderedList maxWidth="300px">
+            {listItems.map((item, index) => (
+                <ListItem key={index}>{item}</ListItem>
+            ))}
+        </UnorderedList>
+    </Box>
+);
+
+export { InstructionList };
diff --git a/frontend/src/bundles/create-avatar/components/instruction-list/styles.module.css b/frontend/src/bundles/create-avatar/components/instruction-list/styles.module.css
new file mode 100644
index 000000000..fef68f410
--- /dev/null
+++ b/frontend/src/bundles/create-avatar/components/instruction-list/styles.module.css
@@ -0,0 +1,4 @@
+.icon {
+    border-radius: 50%;
+    background-color: white;
+}
diff --git a/frontend/src/bundles/create-avatar/components/instruction/instruction.tsx b/frontend/src/bundles/create-avatar/components/instruction/instruction.tsx
new file mode 100644
index 000000000..bd8675bd8
--- /dev/null
+++ b/frontend/src/bundles/create-avatar/components/instruction/instruction.tsx
@@ -0,0 +1,45 @@
+import { Button, Flex } from '~/bundles/common/components/components.js';
+
+import { InstructionList } from '../instruction-list/instruction-list.js';
+import styles from './styles.module.css';
+
+const screenshotListItems = [
+    'At least 5 minutes of footage',
+    'High resolution camera',
+    'Well-lit quiet environment',
+    'Keep your head centered in the frame',
+    'Ensure face visibility; do not cover your mouth',
+    'Use a tripod or stabilize your phone to avoid shaking',
+];
+
+const avoidListItems = [
+    'Stitches or cuts of your footage',
+    'Talking without pauses',
+    'Fast head movements',
+    'Loud background noise like music',
+    'Shadows or overexposure on your face',
+    'Diverting your gaze or looking around',
+    'Hand gestures above the chest or pointing gestures',
+];
+
+const Instruction: React.FC = () => {
+    return (
+        <Flex className={styles['flex-container']}>
+            <Flex className={styles['inner-flex']}>
+                <InstructionList
+                    color="brand.secondary.50"
+                    listItems={screenshotListItems}
+                    title={'Screenshots'}
+                />
+                <InstructionList
+                    color="brand.secondary.900"
+                    listItems={avoidListItems}
+                    title={'Things to avoid'}
+                />
+            </Flex>
+            <Button label="Next step" width="220px" />
+        </Flex>
+    );
+};
+
+export { Instruction };
diff --git a/frontend/src/bundles/create-avatar/components/instruction/styles.module.css b/frontend/src/bundles/create-avatar/components/instruction/styles.module.css
new file mode 100644
index 000000000..8df595397
--- /dev/null
+++ b/frontend/src/bundles/create-avatar/components/instruction/styles.module.css
@@ -0,0 +1,16 @@
+.flex-container {
+    flex-direction: column;
+    background-color: white;
+    padding: 30px;
+    border-radius: 10px;
+    align-items: center;
+    gap: 50px;
+    padding-bottom: 80px;
+}
+
+.inner-flex {
+    color: var(--chakra-colors-typography-600);
+    font-size: 14px;
+    justify-content: center;
+    gap: 40px;
+}
diff --git a/frontend/src/bundles/create-avatar/pages/create-avatar.tsx b/frontend/src/bundles/create-avatar/pages/create-avatar.tsx
new file mode 100644
index 000000000..13200ba99
--- /dev/null
+++ b/frontend/src/bundles/create-avatar/pages/create-avatar.tsx
@@ -0,0 +1,16 @@
+import { Box } from '~/bundles/common/components/components.js';
+
+import { Instruction } from '../components/components.js';
+import styles from './styles.module.css';
+
+const CreateAvatar: React.FC = () => {
+    return (
+        <Box className={styles['container']}>
+            <Box className={styles['inner-container']}>
+                <Instruction />
+            </Box>
+        </Box>
+    );
+};
+
+export { CreateAvatar };
diff --git a/frontend/src/bundles/create-avatar/pages/styles.module.css b/frontend/src/bundles/create-avatar/pages/styles.module.css
new file mode 100644
index 000000000..a3372b450
--- /dev/null
+++ b/frontend/src/bundles/create-avatar/pages/styles.module.css
@@ -0,0 +1,11 @@
+.container {
+    background-color: var(--chakra-colors-background-50);
+    height: calc(100vh - 75px);
+    padding: 50px;
+}
+
+.inner-container {
+    max-width: 870px;
+    margin-left: auto;
+    margin-right: auto;
+}
diff --git a/frontend/src/bundles/my-avatar/components/create-avatar/create-avatar.tsx b/frontend/src/bundles/my-avatar/components/create-avatar/create-avatar.tsx
index 13214ad99..319c59e37 100644
--- a/frontend/src/bundles/my-avatar/components/create-avatar/create-avatar.tsx
+++ b/frontend/src/bundles/my-avatar/components/create-avatar/create-avatar.tsx
@@ -1,8 +1,18 @@
+import { useNavigate } from 'react-router-dom';
+
 import { Box, Button, Flex } from '~/bundles/common/components/components.js';
+import { AppRoute } from '~/bundles/common/enums/enums.js';
+import { useCallback } from '~/bundles/common/hooks/hooks.js';
 
 import { Circles, Dots } from '../components.js';
 
 const CreateAvatar = (): JSX.Element => {
+    const navigate = useNavigate();
+
+    const handleClick = useCallback(() => {
+        navigate(AppRoute.CREATE_AVATAR);
+    }, [navigate]);
+
     return (
         <Flex
             bg="white"
@@ -15,7 +25,7 @@ const CreateAvatar = (): JSX.Element => {
             <Box w={{ base: '122px', sm: '222px' }} position="relative">
                 <Circles />
                 <Dots />
-                <Button label="Create Avatar" />
+                <Button label="Create Avatar" onClick={handleClick} />
             </Box>
         </Flex>
     );
diff --git a/frontend/src/bundles/studio/components/player-controls/components/control/control.tsx b/frontend/src/bundles/studio/components/player-controls/components/control/control.tsx
new file mode 100644
index 000000000..fac88d065
--- /dev/null
+++ b/frontend/src/bundles/studio/components/player-controls/components/control/control.tsx
@@ -0,0 +1,37 @@
+import { type ElementType } from 'react';
+
+import {
+    Icon,
+    IconButton,
+    Tooltip,
+} from '~/bundles/common/components/components.js';
+import { type IconSizeT } from '~/bundles/common/icons/icons.js';
+
+type Properties = {
+    label: string;
+    size: IconSizeT;
+    icon: ElementType;
+    onClick?: () => void;
+};
+
+const Control: React.FC<Properties> = ({
+    label,
+    size,
+    icon,
+    onClick = (): void => {},
+}) => {
+    return (
+        <Tooltip hasArrow label={label} placement="top">
+            <IconButton
+                aria-label={label}
+                isRound={true}
+                size={size}
+                variant="gray"
+                icon={<Icon as={icon} />}
+                onClick={onClick}
+            />
+        </Tooltip>
+    );
+};
+
+export { Control };
diff --git a/frontend/src/bundles/studio/components/video-menu/components/menu/menu.module.css b/frontend/src/bundles/studio/components/video-menu/components/menu/menu.module.css
new file mode 100644
index 000000000..db012002a
--- /dev/null
+++ b/frontend/src/bundles/studio/components/video-menu/components/menu/menu.module.css
@@ -0,0 +1,45 @@
+.menuContainer {
+    position: fixed;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    height: auto;
+    width: 84px;
+    background-color: var(--chakra-colors-background-900);
+    color: white;
+    border-top-right-radius: var(--chakra-radii-xl);
+    border-bottom-right-radius: var(--chakra-radii-xl);
+}
+
+.vStack {
+    width: 100%;
+    padding: 8px;
+}
+
+.menuItem {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 8px;
+    width: 66px;
+    gap: 4px;
+    cursor: pointer;
+    border-radius: 8px;
+    background-color: transparent;
+}
+
+.menuItemActive {
+    background-color: var(--chakra-colors-background-600);
+}
+
+.menuItem:hover {
+    background-color: var(--chakra-colors-background-600);
+}
+
+.icon {
+    font-size: var(--chakra-fontSizes-xl);
+}
+
+.label {
+    font-size: 12px;
+}
diff --git a/frontend/src/routes/routes.tsx b/frontend/src/routes/routes.tsx
index 5293210aa..1a6e2e18d 100644
--- a/frontend/src/routes/routes.tsx
+++ b/frontend/src/routes/routes.tsx
@@ -3,6 +3,7 @@ import { Auth } from '~/bundles/auth/pages/auth.js';
 import { ProtectedRoute } from '~/bundles/common/components/components.js';
 import { AppRoute } from '~/bundles/common/enums/enums.js';
 import { NotFound } from '~/bundles/common/pages/not-found/not-found.js';
+import { CreateAvatar } from '~/bundles/create-avatar/pages/create-avatar.js';
 import { Home } from '~/bundles/home/pages/home.js';
 import { MyAvatar } from '~/bundles/my-avatar/pages/my-avatar.js';
 import { Studio } from '~/bundles/studio/pages/studio.js';
@@ -44,6 +45,14 @@ const routes = [
                     </ProtectedRoute>
                 ),
             },
+            {
+                path: AppRoute.CREATE_AVATAR,
+                element: (
+                    <ProtectedRoute>
+                        <CreateAvatar />
+                    </ProtectedRoute>
+                ),
+            },
             {
                 path: AppRoute.ANY,
                 element: <NotFound />,