diff --git a/frontend/src/bundles/ai-avatars/components/avatar-card/avatar-card.tsx b/frontend/src/bundles/ai-avatars/components/avatar-card/avatar-card.tsx
new file mode 100644
index 000000000..a3bebefbc
--- /dev/null
+++ b/frontend/src/bundles/ai-avatars/components/avatar-card/avatar-card.tsx
@@ -0,0 +1,76 @@
+import {
+    Box,
+    Card,
+    CardBody,
+    Flex,
+    Icon,
+    IconButton,
+    Image,
+    Tag,
+    Text,
+} from '~/bundles/common/components/components.js';
+import { useAppDispatch, useCallback } from '~/bundles/common/hooks/hooks.js';
+import { IconName } from '~/bundles/common/icons/icon-name.js';
+import { actions as studioActions } from '~/bundles/studio/store/slice.js';
+
+type Properties = {
+    id: string;
+    image: string;
+    name: string;
+    tag: string;
+    isLiked: boolean | undefined;
+};
+
+const AvatarCard: React.FC<Properties> = ({
+    id,
+    image,
+    name,
+    tag,
+    isLiked,
+}) => {
+    const dispatch = useAppDispatch();
+
+    const handleLike = useCallback(() => {
+        dispatch(
+            studioActions.avatarLikeToggle({
+                avatarId: id,
+                image,
+            }),
+        );
+    }, [dispatch, id, image]);
+
+    return (
+        <Card size="sm" borderRadius="lg" boxShadow="none" maxW="500px">
+            <CardBody>
+                <Box bg="background.50" borderRadius="md" position="relative">
+                    <Image src={image} alt="AI generated avatar image" />
+                    <IconButton
+                        aria-label="favorite button"
+                        icon={<Icon as={IconName.HEART} boxSize={5} />}
+                        color={isLiked ? 'brand.secondary.300' : 'white'}
+                        variant="icon"
+                        position="absolute"
+                        top="0"
+                        right="0"
+                        onClick={handleLike}
+                    />
+                </Box>
+                <Box p="5px 0">
+                    <Text color="typography.900" fontWeight="600">
+                        {name}
+                    </Text>
+                    <Flex gap="5px">
+                        <Tag bg="background.330" borderRadius="full">
+                            {tag}
+                        </Tag>
+                        <Tag bg="background.330" borderRadius="full">
+                            4K
+                        </Tag>
+                    </Flex>
+                </Box>
+            </CardBody>
+        </Card>
+    );
+};
+
+export { AvatarCard };
diff --git a/frontend/src/bundles/ai-avatars/components/avatars-section/avatars-section.tsx b/frontend/src/bundles/ai-avatars/components/avatars-section/avatars-section.tsx
new file mode 100644
index 000000000..884a1f52c
--- /dev/null
+++ b/frontend/src/bundles/ai-avatars/components/avatars-section/avatars-section.tsx
@@ -0,0 +1,86 @@
+import { type FormikProps } from 'formik';
+
+import { EMPTY_LENGTH } from '~/bundles/ai-avatars/constants/constants.js';
+import { type AvatarMapped } from '~/bundles/ai-avatars/types/types.js';
+import {
+    Badge,
+    Box,
+    Flex,
+    FormProvider,
+    Heading,
+    Select,
+    SimpleGrid,
+    Text,
+} from '~/bundles/common/components/components.js';
+
+import { AvatarCard } from '../components.js';
+
+type Properties = {
+    subtitle: string;
+    avatars: AvatarMapped[];
+    form?: FormikProps<{ style: string }>;
+};
+
+const AvatarsSection: React.FC<Properties> = ({ subtitle, avatars, form }) => {
+    return (
+        <Box p="10px 0">
+            <Flex justify="space-between" align="center" mb="10px">
+                <Flex>
+                    <Heading
+                        color="typography.900"
+                        variant="H4"
+                        marginRight="11px"
+                    >
+                        {subtitle}
+                    </Heading>
+                    <Badge
+                        color="background.600"
+                        bg="#D1D4DB"
+                        fontWeight="400"
+                        padding="2px 10px"
+                    >
+                        {avatars.length}
+                    </Badge>
+                </Flex>
+                {form && (
+                    <FormProvider value={form}>
+                        <Box>
+                            <Select name="style" placeholder="All styles">
+                                <option value="business">Business</option>
+                                <option value="casual">Casual</option>
+                                <option value="formal">Formal</option>
+                                <option value="youthful">Youthful</option>
+                                <option value="graceful">Graceful</option>
+                                <option value="technical">Technical</option>
+                            </Select>
+                        </Box>
+                    </FormProvider>
+                )}
+            </Flex>
+            {avatars.length === EMPTY_LENGTH && !form ? (
+                <Text color="typography.600" variant="body1">
+                    Pick your favorites avatars to show them here!
+                </Text>
+            ) : (
+                <SimpleGrid
+                    minChildWidth="300px"
+                    justifyItems="center"
+                    spacing="40px"
+                >
+                    {avatars.map(({ id, imgUrl, name, style, isLiked }) => (
+                        <AvatarCard
+                            key={`${id}-${style}`}
+                            id={id}
+                            name={name}
+                            tag={style}
+                            image={imgUrl}
+                            isLiked={isLiked}
+                        />
+                    ))}
+                </SimpleGrid>
+            )}
+        </Box>
+    );
+};
+
+export { AvatarsSection };
diff --git a/frontend/src/bundles/ai-avatars/components/avatars/avatars.tsx b/frontend/src/bundles/ai-avatars/components/avatars/avatars.tsx
new file mode 100644
index 000000000..37c204347
--- /dev/null
+++ b/frontend/src/bundles/ai-avatars/components/avatars/avatars.tsx
@@ -0,0 +1,74 @@
+import { EMPTY_LENGTH } from '~/bundles/ai-avatars/constants/constants.js';
+import { avatarsMapper } from '~/bundles/ai-avatars/helpers/helpers.js';
+import { useFilterAvatarStyle } from '~/bundles/ai-avatars/hooks/use-filter-avatar-style.hook.js';
+import {
+    Box,
+    Heading,
+    Loader,
+    Overlay,
+} from '~/bundles/common/components/components.js';
+import { DataStatus } from '~/bundles/common/enums/data-status.enum.js';
+import {
+    useAppDispatch,
+    useAppForm,
+    useAppSelector,
+    useEffect,
+    useMemo,
+} from '~/bundles/common/hooks/hooks.js';
+import { actions as studioActions } from '~/bundles/studio/store/studio.js';
+
+import { AvatarsSection } from '../components.js';
+
+const Avatars: React.FC = () => {
+    const dispatch = useAppDispatch();
+    const { avatars, dataStatus } = useAppSelector(({ studio }) => studio);
+
+    const form = useAppForm<{ style: string }>({
+        initialValues: { style: '' },
+    });
+    const {
+        values: { style },
+    } = form;
+
+    const styledAvatars = useFilterAvatarStyle(style);
+    const mappedAvatars = useMemo(() => avatarsMapper(avatars), [avatars]);
+    const favoriteAvatars = useMemo(
+        () => mappedAvatars.filter(({ isLiked }) => isLiked),
+        [mappedAvatars],
+    );
+
+    useEffect(() => {
+        if (avatars.length === EMPTY_LENGTH) {
+            void dispatch(studioActions.loadAvatars());
+        }
+    }, [dispatch, avatars.length]);
+
+    return (
+        <Box bg="background.900" pr="25px">
+            <Box
+                bg="background.50"
+                borderTopRadius="xl"
+                p="25px"
+                minH="calc(100vh - 75px)"
+            >
+                <Overlay isOpen={dataStatus === DataStatus.PENDING}>
+                    <Loader />
+                </Overlay>
+                <Heading color="typography.900" variant="H3">
+                    AI Avatars
+                </Heading>
+                <AvatarsSection
+                    avatars={favoriteAvatars}
+                    subtitle="My Avatars"
+                />
+                <AvatarsSection
+                    avatars={styledAvatars}
+                    subtitle="OutreachVids Library"
+                    form={form}
+                />
+            </Box>
+        </Box>
+    );
+};
+
+export { Avatars };
diff --git a/frontend/src/bundles/ai-avatars/components/components.ts b/frontend/src/bundles/ai-avatars/components/components.ts
new file mode 100644
index 000000000..c38154090
--- /dev/null
+++ b/frontend/src/bundles/ai-avatars/components/components.ts
@@ -0,0 +1,3 @@
+export { AvatarCard } from './avatar-card/avatar-card.js';
+export { Avatars } from './avatars/avatars.js';
+export { AvatarsSection } from './avatars-section/avatars-section.js';
diff --git a/frontend/src/bundles/ai-avatars/constants/constants.ts b/frontend/src/bundles/ai-avatars/constants/constants.ts
new file mode 100644
index 000000000..3e9ba6bd7
--- /dev/null
+++ b/frontend/src/bundles/ai-avatars/constants/constants.ts
@@ -0,0 +1,3 @@
+const EMPTY_LENGTH = 0;
+
+export { EMPTY_LENGTH };
diff --git a/frontend/src/bundles/ai-avatars/helpers/avatars-mapper.helper.ts b/frontend/src/bundles/ai-avatars/helpers/avatars-mapper.helper.ts
new file mode 100644
index 000000000..efc4286e1
--- /dev/null
+++ b/frontend/src/bundles/ai-avatars/helpers/avatars-mapper.helper.ts
@@ -0,0 +1,21 @@
+import {
+    type AvatarGetResponseDto,
+    type AvatarMapped,
+} from '../types/types.js';
+import { capitalCase } from './helpers.js';
+
+const avatarsMapper = (avatars: AvatarGetResponseDto[]): AvatarMapped[] => {
+    return avatars.flatMap(({ id, name, styles }) => {
+        return styles.map(({ imgUrl, style, isLiked }) => {
+            return {
+                id,
+                name: capitalCase(name),
+                style: style.split('-')[0] as string,
+                imgUrl,
+                isLiked,
+            };
+        });
+    });
+};
+
+export { avatarsMapper };
diff --git a/frontend/src/bundles/ai-avatars/helpers/capital-case.helper.ts b/frontend/src/bundles/ai-avatars/helpers/capital-case.helper.ts
new file mode 100644
index 000000000..f3971c304
--- /dev/null
+++ b/frontend/src/bundles/ai-avatars/helpers/capital-case.helper.ts
@@ -0,0 +1,5 @@
+const capitalCase = (name: string): string => {
+    return name.charAt(0).toUpperCase() + name.slice(1);
+};
+
+export { capitalCase };
diff --git a/frontend/src/bundles/ai-avatars/helpers/helpers.ts b/frontend/src/bundles/ai-avatars/helpers/helpers.ts
new file mode 100644
index 000000000..99e94d192
--- /dev/null
+++ b/frontend/src/bundles/ai-avatars/helpers/helpers.ts
@@ -0,0 +1,2 @@
+export { avatarsMapper } from './avatars-mapper.helper.js';
+export { capitalCase } from './capital-case.helper.js';
diff --git a/frontend/src/bundles/ai-avatars/hooks/use-filter-avatar-style.hook.ts b/frontend/src/bundles/ai-avatars/hooks/use-filter-avatar-style.hook.ts
new file mode 100644
index 000000000..7010635be
--- /dev/null
+++ b/frontend/src/bundles/ai-avatars/hooks/use-filter-avatar-style.hook.ts
@@ -0,0 +1,30 @@
+import {
+    useAppSelector,
+    useEffect,
+    useState,
+} from '~/bundles/common/hooks/hooks.js';
+
+import { avatarsMapper } from '../helpers/helpers.js';
+import { type AvatarMapped } from '../types/types.js';
+
+const useFilterAvatarStyle = (style: string): AvatarMapped[] => {
+    const { avatars } = useAppSelector(({ studio }) => studio);
+    const [avatarFiltered, setAvatarFiltered] = useState<AvatarMapped[]>([]);
+
+    useEffect(() => {
+        const avatarsMapped = avatarsMapper(avatars);
+
+        const filterAvatars = (): AvatarMapped[] =>
+            avatarsMapped.filter(
+                ({ style: avatarStyle }) => !style || avatarStyle === style,
+            );
+
+        const filteredAvatars = filterAvatars();
+
+        setAvatarFiltered(filteredAvatars);
+    }, [avatars, style]);
+
+    return avatarFiltered;
+};
+
+export { useFilterAvatarStyle };
diff --git a/frontend/src/bundles/ai-avatars/pages/ai-avatars.tsx b/frontend/src/bundles/ai-avatars/pages/ai-avatars.tsx
new file mode 100644
index 000000000..363bdebfc
--- /dev/null
+++ b/frontend/src/bundles/ai-avatars/pages/ai-avatars.tsx
@@ -0,0 +1,16 @@
+import { Header, Sidebar } from '~/bundles/common/components/components.js';
+
+import { Avatars } from '../components/components.js';
+
+const AIAvatars: React.FC = () => {
+    return (
+        <>
+            <Header />
+            <Sidebar>
+                <Avatars />
+            </Sidebar>
+        </>
+    );
+};
+
+export { AIAvatars };
diff --git a/frontend/src/bundles/ai-avatars/types/avatar-mapped.ts b/frontend/src/bundles/ai-avatars/types/avatar-mapped.ts
new file mode 100644
index 000000000..b5868d916
--- /dev/null
+++ b/frontend/src/bundles/ai-avatars/types/avatar-mapped.ts
@@ -0,0 +1,9 @@
+type AvatarMapped = {
+    id: string;
+    name: string;
+    style: string;
+    imgUrl: string;
+    isLiked: boolean | undefined;
+};
+
+export { type AvatarMapped };
diff --git a/frontend/src/bundles/ai-avatars/types/types.ts b/frontend/src/bundles/ai-avatars/types/types.ts
new file mode 100644
index 000000000..ee0907f40
--- /dev/null
+++ b/frontend/src/bundles/ai-avatars/types/types.ts
@@ -0,0 +1,2 @@
+export { type AvatarMapped } from './avatar-mapped.js';
+export { type AvatarGetResponseDto } from 'shared';
diff --git a/frontend/src/bundles/common/components/components.ts b/frontend/src/bundles/common/components/components.ts
index 9d938499a..b63f6f056 100644
--- a/frontend/src/bundles/common/components/components.ts
+++ b/frontend/src/bundles/common/components/components.ts
@@ -82,6 +82,7 @@ export {
     TabPanel,
     TabPanels,
     Tabs,
+    Tag,
     Text,
     Tooltip,
     UnorderedList,
diff --git a/frontend/src/bundles/common/components/select/select.tsx b/frontend/src/bundles/common/components/select/select.tsx
index a0114ffdf..d1eb0b7fd 100644
--- a/frontend/src/bundles/common/components/select/select.tsx
+++ b/frontend/src/bundles/common/components/select/select.tsx
@@ -13,9 +13,9 @@ import {
 import { useFormField } from '~/bundles/common/hooks/hooks.js';
 
 type Properties<T extends FormValues> = {
-    label?: string;
     name: FieldInputProps<T>['name'];
     children: React.ReactNode;
+    label?: string;
     isRequired?: boolean;
     placeholder?: string;
 };
diff --git a/frontend/src/bundles/common/components/sidebar/sidebar.tsx b/frontend/src/bundles/common/components/sidebar/sidebar.tsx
index cef1e94df..f140dad58 100644
--- a/frontend/src/bundles/common/components/sidebar/sidebar.tsx
+++ b/frontend/src/bundles/common/components/sidebar/sidebar.tsx
@@ -144,6 +144,24 @@ const Sidebar: React.FC<Properties> = ({ children }) => {
                         />
                     </Link>
                 </Box>
+
+                <Box>
+                    <Link to={AppRoute.AI_AVATARS}>
+                        <SidebarItem
+                            bg={activeButtonPage(AppRoute.AI_AVATARS)}
+                            icon={
+                                <Icon
+                                    as={IconName.AI_AVATARS}
+                                    boxSize={4}
+                                    color={activeIconPage(AppRoute.AI_AVATARS)}
+                                />
+                            }
+                            isCollapsed={isCollapsed}
+                            label="AI Avatars"
+                        />
+                    </Link>
+                </Box>
+
                 <Spacer />
                 <SidebarItem
                     color="brand.secondary.600"
diff --git a/frontend/src/bundles/common/enums/app-route.enum.ts b/frontend/src/bundles/common/enums/app-route.enum.ts
index defc6e8ab..e3f3dd0dd 100644
--- a/frontend/src/bundles/common/enums/app-route.enum.ts
+++ b/frontend/src/bundles/common/enums/app-route.enum.ts
@@ -6,6 +6,7 @@ const AppRoute = {
     MY_AVATAR: '/my-avatar',
     ANY: '*',
     CREATE_AVATAR: '/create-avatar',
+    AI_AVATARS: '/ai-avatars',
     PREVIEW: '/preview',
     VOICES: '/voices',
     TEMPLATES: '/templates',
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 a060212db..9b56f8661 100644
--- a/frontend/src/bundles/common/icons/helper/icon-conversion.helper.ts
+++ b/frontend/src/bundles/common/icons/helper/icon-conversion.helper.ts
@@ -22,6 +22,7 @@ import {
     faStop,
     faT,
     faTableColumns,
+    faUserLarge,
     faVideoCamera,
     faVolumeHigh,
     faVolumeOff,
@@ -50,6 +51,8 @@ const VolumeOff = convertIcon(faVolumeOff);
 const Stop = convertIcon(faStop);
 const VideoCamera = convertIcon(faVideoCamera);
 const Image = convertIcon(faImage);
+const AIAvatars = convertIcon(faUserLarge);
+const Heart = convertIcon(faHeart);
 const Circle = convertIcon(faCircle);
 const Copy = convertIcon(faCopy);
 const HeartFill = convertIcon(faHeart);
@@ -57,6 +60,7 @@ const HeartOutline = convertIcon(faHeartRegular);
 const Magnifying = convertIcon(faMagnifyingGlass);
 
 export {
+    AIAvatars,
     BackwardStep,
     Circle,
     CircleUser,
@@ -67,6 +71,7 @@ export {
     FileLines,
     Font,
     ForwardStep,
+    Heart,
     HeartFill,
     HeartOutline,
     House,
diff --git a/frontend/src/bundles/common/icons/icon-name.ts b/frontend/src/bundles/common/icons/icon-name.ts
index fd1f311f2..a156ff206 100644
--- a/frontend/src/bundles/common/icons/icon-name.ts
+++ b/frontend/src/bundles/common/icons/icon-name.ts
@@ -15,6 +15,7 @@ import {
 
 import { Logo, LogoText, OpenAi, Voice } from './custom-icons/custom-icons.js';
 import {
+    AIAvatars,
     BackwardStep,
     Circle,
     CircleUser,
@@ -25,6 +26,7 @@ import {
     FileLines,
     Font,
     ForwardStep,
+    Heart,
     HeartFill,
     HeartOutline,
     House,
@@ -44,6 +46,7 @@ import {
 } from './helper/icon-conversion.helper.js';
 
 const IconName = {
+    AI_AVATARS: AIAvatars,
     CHEVRON_DOWN: ChevronDownIcon,
     PEN: Pen,
     HOME: House,
@@ -79,6 +82,7 @@ const IconName = {
     WARNING: WarningIcon,
     VIDEO_CAMERA: VideoCamera,
     IMAGE: Image,
+    HEART: Heart,
     CIRCLE: Circle,
     ARROW_BACK: ArrowBackIcon,
     COPY: Copy,
diff --git a/frontend/src/bundles/studio/store/slice.ts b/frontend/src/bundles/studio/store/slice.ts
index 038418de3..c9612479b 100644
--- a/frontend/src/bundles/studio/store/slice.ts
+++ b/frontend/src/bundles/studio/store/slice.ts
@@ -455,6 +455,26 @@ const { reducer, actions, name } = createSlice({
                 },
             );
         },
+        avatarLikeToggle(
+            state,
+            action: PayloadAction<{ avatarId: string; image: string }>,
+        ) {
+            const { avatarId, image } = action.payload;
+
+            const avatar = state.avatars.find(({ id }) => id === avatarId);
+
+            if (!avatar) {
+                return;
+            }
+
+            const style = avatar.styles.find(({ imgUrl }) => imgUrl === image);
+
+            if (!style) {
+                return;
+            }
+
+            style.isLiked = !style.isLiked;
+        },
         loadTemplate(state, action: PayloadAction<Template>) {
             const { composition, name } = action.payload;
 
diff --git a/frontend/src/framework/theme/styles/colors.styles.ts b/frontend/src/framework/theme/styles/colors.styles.ts
index 95d090632..8ad91a57c 100644
--- a/frontend/src/framework/theme/styles/colors.styles.ts
+++ b/frontend/src/framework/theme/styles/colors.styles.ts
@@ -6,6 +6,7 @@ const colors = {
         700: '#231B59',
         600: '#35399a',
         300: '#3c9cf5',
+        330: '#3c9cf530',
         50: '#e2e1ec',
     },
     brand: {
diff --git a/frontend/src/routes/routes.tsx b/frontend/src/routes/routes.tsx
index 1da9e0f15..7bacaccc7 100644
--- a/frontend/src/routes/routes.tsx
+++ b/frontend/src/routes/routes.tsx
@@ -1,4 +1,5 @@
 import { App } from '~/app/app.js';
+import { AIAvatars } from '~/bundles/ai-avatars/pages/ai-avatars.js';
 import { Auth } from '~/bundles/auth/pages/auth.js';
 import { ProtectedRoute } from '~/bundles/common/components/components.js';
 import { AppRoute } from '~/bundles/common/enums/enums.js';
@@ -64,6 +65,14 @@ const routes = [
                     </ProtectedRoute>
                 ),
             },
+            {
+                path: AppRoute.AI_AVATARS,
+                element: (
+                    <ProtectedRoute>
+                        <AIAvatars />
+                    </ProtectedRoute>
+                ),
+            },
             {
                 path: AppRoute.TEMPLATES,
                 element: (
diff --git a/shared/src/bundles/avatars/types/avatar-get-response-dto.type.ts b/shared/src/bundles/avatars/types/avatar-get-response-dto.type.ts
index e9dcadceb..6a9579850 100644
--- a/shared/src/bundles/avatars/types/avatar-get-response-dto.type.ts
+++ b/shared/src/bundles/avatars/types/avatar-get-response-dto.type.ts
@@ -7,6 +7,7 @@ type AvatarGetResponseDto = {
         imgUrl: string;
         style: string;
         gestures: string[];
+        isLiked?: boolean;
     }[];
 };