diff --git a/frontend/src/bundles/common/components/button/button.tsx b/frontend/src/bundles/common/components/button/button.tsx
index 5cc794ede..ec9afd898 100644
--- a/frontend/src/bundles/common/components/button/button.tsx
+++ b/frontend/src/bundles/common/components/button/button.tsx
@@ -11,6 +11,7 @@ type Properties = {
     isDisabled?: boolean;
     className?: string | undefined;
     onClick?: () => void;
+    leftIcon?: React.ReactElement;
 } & ChakraProperties;
 
 const Button: React.FC<Properties> = ({
@@ -20,6 +21,7 @@ const Button: React.FC<Properties> = ({
     size = 'md',
     isDisabled = false,
     className,
+    leftIcon,
     onClick,
     ...ChakraProperties
 }) => (
@@ -31,6 +33,7 @@ const Button: React.FC<Properties> = ({
         isDisabled={isDisabled}
         className={className}
         onClick={onClick}
+        {...(leftIcon ? { leftIcon } : {})}
         {...ChakraProperties}
     >
         {label}
diff --git a/frontend/src/bundles/common/components/components.ts b/frontend/src/bundles/common/components/components.ts
index 0d391b786..3f948daf2 100644
--- a/frontend/src/bundles/common/components/components.ts
+++ b/frontend/src/bundles/common/components/components.ts
@@ -47,6 +47,7 @@ export {
     IconButton,
     Image,
     InputGroup,
+    InputLeftElement,
     InputRightElement,
     Button as LibraryButton,
     Input as LibraryInput,
diff --git a/frontend/src/bundles/common/components/input/input.tsx b/frontend/src/bundles/common/components/input/input.tsx
index a27a862be..451e1aea5 100644
--- a/frontend/src/bundles/common/components/input/input.tsx
+++ b/frontend/src/bundles/common/components/input/input.tsx
@@ -14,7 +14,7 @@ import {
 import { useFormField } from '~/bundles/common/hooks/hooks.js';
 
 type Properties<T extends FormValues> = {
-    label: string;
+    label?: string;
     name: FieldInputProps<T>['name'];
     type?: 'text' | 'email' | 'number' | 'password';
     isRequired?: boolean;
diff --git a/frontend/src/bundles/common/components/select/select.tsx b/frontend/src/bundles/common/components/select/select.tsx
index 20cce289c..a0114ffdf 100644
--- a/frontend/src/bundles/common/components/select/select.tsx
+++ b/frontend/src/bundles/common/components/select/select.tsx
@@ -13,7 +13,7 @@ import {
 import { useFormField } from '~/bundles/common/hooks/hooks.js';
 
 type Properties<T extends FormValues> = {
-    label: string;
+    label?: string;
     name: FieldInputProps<T>['name'];
     children: React.ReactNode;
     isRequired?: boolean;
@@ -31,7 +31,7 @@ const Select: React.FC<Properties<FormValues>> = ({
 
     return (
         <FormControl isInvalid={!isValid} isRequired={isRequired}>
-            <FormLabel htmlFor={name}>{label}</FormLabel>
+            {label && <FormLabel htmlFor={name}>{label}</FormLabel>}
             <Field
                 {...field}
                 id={name}
diff --git a/frontend/src/bundles/common/components/sidebar/sidebar.tsx b/frontend/src/bundles/common/components/sidebar/sidebar.tsx
index 5b16eceb9..92c8eb02e 100644
--- a/frontend/src/bundles/common/components/sidebar/sidebar.tsx
+++ b/frontend/src/bundles/common/components/sidebar/sidebar.tsx
@@ -105,6 +105,20 @@ const Sidebar: React.FC<Properties> = ({ children }) => {
                             label="My Avatar"
                         />
                     </Link>
+                    <Link to={AppRoute.TEMPLATES}>
+                        <SidebarItem
+                            bg={activeButtonPage(AppRoute.TEMPLATES)}
+                            icon={
+                                <Icon
+                                    as={IconName.TEMPLATE}
+                                    boxSize={5}
+                                    color={activeIconPage(AppRoute.TEMPLATES)}
+                                />
+                            }
+                            isCollapsed={isCollapsed}
+                            label="Templates"
+                        />
+                    </Link>
                 </Box>
                 <Spacer />
                 <SidebarItem
diff --git a/frontend/src/bundles/common/enums/app-route.enum.ts b/frontend/src/bundles/common/enums/app-route.enum.ts
index d6526128a..118261fc0 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',
+    TEMPLATES: '/templates',
 } as const;
 
 export { AppRoute };
diff --git a/frontend/src/bundles/common/hooks/use-app-form/use-app-form.hook.ts b/frontend/src/bundles/common/hooks/use-app-form/use-app-form.hook.ts
index 827d9e176..d7f8a0653 100644
--- a/frontend/src/bundles/common/hooks/use-app-form/use-app-form.hook.ts
+++ b/frontend/src/bundles/common/hooks/use-app-form/use-app-form.hook.ts
@@ -21,7 +21,7 @@ type Parameters<T extends FormValues = FormValues> = {
     initialValues: T;
     mode?: ValueOf<typeof ValidationMode>;
     validationSchema?: ValidationSchema;
-    onSubmit: FormConfig<T>['onSubmit'];
+    onSubmit?: FormConfig<T>['onSubmit'];
 };
 
 type ReturnValue<T extends FormValues = FormValues> = ReturnType<
@@ -32,7 +32,9 @@ const useAppForm = <T extends FormValues = FormValues>({
     initialValues,
     mode = 'onSubmit',
     validationSchema,
-    onSubmit,
+    onSubmit = (values: T): void => {
+        values;
+    },
 }: Parameters<T>): ReturnValue<T> => {
     const validateOnBlur =
         mode === ValidationMode.ALL ? true : mode === ValidationMode.ON_BLUR;
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 8d5c65d5d..75d8c3b94 100644
--- a/frontend/src/bundles/common/icons/helper/icon-conversion.helper.ts
+++ b/frontend/src/bundles/common/icons/helper/icon-conversion.helper.ts
@@ -10,6 +10,7 @@ import {
     faForwardStep,
     faHouse,
     faImage,
+    faMagnifyingGlass,
     faPause,
     faPen,
     faPlay,
@@ -47,6 +48,7 @@ const Stop = convertIcon(faStop);
 const VideoCamera = convertIcon(faVideoCamera);
 const Image = convertIcon(faImage);
 const Circle = convertIcon(faCircle);
+const Magnifying = convertIcon(faMagnifyingGlass);
 
 export {
     BackwardStep,
@@ -60,6 +62,7 @@ export {
     ForwardStep,
     House,
     Image,
+    Magnifying,
     Pause,
     Pen,
     Play,
diff --git a/frontend/src/bundles/common/icons/icon-name.ts b/frontend/src/bundles/common/icons/icon-name.ts
index d18d9936f..644059bf9 100644
--- a/frontend/src/bundles/common/icons/icon-name.ts
+++ b/frontend/src/bundles/common/icons/icon-name.ts
@@ -26,6 +26,7 @@ import {
     ForwardStep,
     House,
     Image,
+    Magnifying,
     Pause,
     Pen,
     Play,
@@ -77,6 +78,7 @@ const IconName = {
     IMAGE: Image,
     CIRCLE: Circle,
     ARROW_BACK: ArrowBackIcon,
+    MAGNIFYING: Magnifying,
 } as const;
 
 export { IconName };
diff --git a/frontend/src/bundles/template/components/components.ts b/frontend/src/bundles/template/components/components.ts
new file mode 100644
index 000000000..7b03e2032
--- /dev/null
+++ b/frontend/src/bundles/template/components/components.ts
@@ -0,0 +1,2 @@
+export { CreationsSection } from './creations-section/creations-section.js';
+export { TemplatesSection } from './templates-section/templates-section.js';
diff --git a/frontend/src/bundles/template/components/creations-section/creations-section.tsx b/frontend/src/bundles/template/components/creations-section/creations-section.tsx
new file mode 100644
index 000000000..8c71bb984
--- /dev/null
+++ b/frontend/src/bundles/template/components/creations-section/creations-section.tsx
@@ -0,0 +1,67 @@
+import {
+    Box,
+    Button,
+    Flex,
+    Heading,
+} from '~/bundles/common/components/components.js';
+import { Circles, Dots } from '~/bundles/my-avatar/components/components.js';
+import { type Template } from '~/bundles/template/types/types.js';
+
+import { TemplateCard } from '../template-card/template-card.js';
+import styles from './styles.module.css';
+
+//TODO: Change with the backend information
+const templates: Template[] = [];
+
+type Properties = {
+    onClick: () => void;
+};
+
+const CreationsSection: React.FC<Properties> = ({ onClick }) => {
+    return (
+        <Box padding="17px 0">
+            <Flex alignItems="center" marginBottom="9px">
+                <Heading color="typography.900" variant="H3" marginRight="11px">
+                    Recent Creations
+                </Heading>
+            </Flex>
+
+            {templates.length > 0 ? (
+                <Box className={styles['horizontal']}>
+                    {templates.map(({ id, ...template }) => (
+                        <Box
+                            key={id}
+                            flex="0 0 auto"
+                            marginRight="20px"
+                            width="250px"
+                        >
+                            <TemplateCard {...template} />
+                        </Box>
+                    ))}
+                </Box>
+            ) : (
+                <Flex
+                    bg="white"
+                    h="140px"
+                    borderRadius="lg"
+                    justify="center"
+                    align="center"
+                    overflow="hidden"
+                    maxWidth="340px"
+                >
+                    <Box w={{ base: '222px', sm: '222px' }} position="relative">
+                        <Circles />
+                        <Dots />
+                        <Button
+                            label="Create Your First Template"
+                            variant="outlined"
+                            onClick={onClick}
+                        />
+                    </Box>
+                </Flex>
+            )}
+        </Box>
+    );
+};
+
+export { CreationsSection };
diff --git a/frontend/src/bundles/template/components/creations-section/styles.module.css b/frontend/src/bundles/template/components/creations-section/styles.module.css
new file mode 100644
index 000000000..64d222997
--- /dev/null
+++ b/frontend/src/bundles/template/components/creations-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/template/components/template-card/styles.module.css b/frontend/src/bundles/template/components/template-card/styles.module.css
new file mode 100644
index 000000000..fca3db35f
--- /dev/null
+++ b/frontend/src/bundles/template/components/template-card/styles.module.css
@@ -0,0 +1,14 @@
+.play-button {
+    position: absolute;
+    background-color: white;
+    top: 5px;
+    right: 5px;
+}
+
+.preview-image {
+    border-radius: 5px;
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+    object-position: top;
+}
diff --git a/frontend/src/bundles/template/components/template-card/template-card.tsx b/frontend/src/bundles/template/components/template-card/template-card.tsx
new file mode 100644
index 000000000..a6e8cb657
--- /dev/null
+++ b/frontend/src/bundles/template/components/template-card/template-card.tsx
@@ -0,0 +1,107 @@
+import {
+    Badge,
+    Box,
+    Icon,
+    IconButton,
+    Image,
+    Text,
+} from '~/bundles/common/components/components.js';
+import { useCallback, useState } from '~/bundles/common/hooks/hooks.js';
+import { IconName } from '~/bundles/common/icons/icons.js';
+import { PlayerModal } from '~/bundles/home/components/player-modal/player-modal.js';
+import { DeleteWarning } from '~/bundles/home/components/video-card/components/delete-warning.js';
+
+import styles from './styles.module.css';
+
+type Properties = {
+    name: string;
+    url: string | null;
+    previewUrl: string;
+};
+
+const TemplateCard: React.FC<Properties> = ({ name, url, previewUrl }) => {
+    const [isVideoModalOpen, setIsVideoModalOpen] = useState(false);
+    const [isWarningModalOpen, setIsWarningModalOpen] = useState(false);
+
+    const handleIconClick = useCallback(() => {
+        if (url) {
+            return setIsVideoModalOpen(true);
+        }
+    }, [url]);
+
+    const handleVideoModalClose = useCallback(() => {
+        setIsVideoModalOpen(false);
+    }, []);
+
+    const handleWarningModalClose = useCallback(() => {
+        setIsWarningModalOpen(false);
+    }, []);
+
+    const handleDelete = useCallback(() => {
+        handleWarningModalClose();
+    }, [handleWarningModalClose]);
+
+    return (
+        <Box borderRadius="8px" bg="white" padding="7px">
+            <Box
+                position="relative"
+                role="group"
+                height="115px"
+                overflow="hidden"
+            >
+                <Image
+                    src={previewUrl}
+                    alt="Video preview"
+                    className={styles['preview-image']}
+                />
+
+                <IconButton
+                    size="xs"
+                    aria-label={url ? 'Play video' : 'Edit video'}
+                    _groupHover={{ opacity: 1 }}
+                    onClick={handleIconClick}
+                    className={styles['play-button']}
+                    icon={
+                        <Icon
+                            as={url ? IconName.PLAY : IconName.PEN}
+                            color="background.600"
+                        />
+                    }
+                />
+            </Box>
+
+            <Box padding="7px 10px 5px 5px">
+                <Text variant="button" color="typography.900">
+                    {name}
+                </Text>
+            </Box>
+
+            <Badge
+                color="typography.900"
+                textTransform="none"
+                bg="background.300"
+                fontWeight="400"
+                padding="0 8px"
+                borderRadius="24px"
+            >
+                Advertisement
+            </Badge>
+
+            {url && (
+                <PlayerModal
+                    videoUrl={url}
+                    isOpen={isVideoModalOpen}
+                    onClose={handleVideoModalClose}
+                />
+            )}
+
+            <DeleteWarning
+                isOpen={isWarningModalOpen}
+                onClose={handleWarningModalClose}
+                onDelete={handleDelete}
+            />
+        </Box>
+    );
+};
+
+export { TemplateCard };
diff --git a/frontend/src/bundles/template/components/templates-section/constants.ts b/frontend/src/bundles/template/components/templates-section/constants.ts
new file mode 100644
index 000000000..d4ecb4109
--- /dev/null
+++ b/frontend/src/bundles/template/components/templates-section/constants.ts
@@ -0,0 +1,7 @@
+const DEFAULT_TEMPLATE_PAYLOAD = {
+    category: '',
+    search: '',
+    format: '',
+};
+
+export { DEFAULT_TEMPLATE_PAYLOAD };
diff --git a/frontend/src/bundles/template/components/templates-section/styles.module.css b/frontend/src/bundles/template/components/templates-section/styles.module.css
new file mode 100644
index 000000000..f0654b1b6
--- /dev/null
+++ b/frontend/src/bundles/template/components/templates-section/styles.module.css
@@ -0,0 +1,11 @@
+.button {
+    width: 100%;
+    border-radius: 20px;
+    background-color: #f6f5fa;
+    color: #6b6b6b;
+}
+
+.button.selected {
+    background-color: white;
+    color: #4a4a4a;
+}
diff --git a/frontend/src/bundles/template/components/templates-section/templates-section.tsx b/frontend/src/bundles/template/components/templates-section/templates-section.tsx
new file mode 100644
index 000000000..c9b6c3801
--- /dev/null
+++ b/frontend/src/bundles/template/components/templates-section/templates-section.tsx
@@ -0,0 +1,132 @@
+import {
+    Box,
+    Button,
+    Flex,
+    FormProvider,
+    Heading,
+    Icon,
+    Input,
+    InputGroup,
+    InputLeftElement,
+    Select,
+    SimpleGrid,
+} from '~/bundles/common/components/components.js';
+import {
+    useAppForm,
+    useCallback,
+    useState,
+} from '~/bundles/common/hooks/hooks.js';
+import { IconName } from '~/bundles/common/icons/icons.js';
+
+import { type Template } from '../../types/template.type.js';
+import { TemplateCard } from '../template-card/template-card.js';
+import { DEFAULT_TEMPLATE_PAYLOAD } from './constants.js';
+
+//TODO Change with the backend information
+const templates: Template[] = [
+    {
+        id: '1',
+        name: 'My first avatar video',
+        url: 'https://d19jw8gcwb6nqj.cloudfront.net/renders/2ymzogrn5a/out.mp4',
+        previewUrl:
+            'https://s3-alpha-sig.figma.com/img/f5bc/ae04/08301b8c7727dcf6209bc655b0dd7133?Expires=1728259200&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=n5c0QxXVFRbXTmwIakB5EoU6FRSafJV4WqXFLHI6hp3XlikD8TfwCzovoEAxxj4WYBrm2k371A-NaX1PWZdVQbEYKzVT0ZtcXR8eRO39vQ0ZBFQL8J4Vdqps-XJc3Dau4im97u3wb-mrweKhwlDHiI9xN-~3-7Gk7nM6EYjfaVQU9T5j9-zP5RSqE3PBDTjZlpnIgCDhkTVFmWb6n2O3XZ3X85uKVl-6R0dLYkhv2qux~r1gespYmw3KQJesUpix5P3hsxpzk~WkiANM6dudib9Yapk2wG6u6ULIE1rtgjPNm6myG1bWV0dX0jEAsabMNn95WmelSEK6Pq3Q4fGrRg__',
+    },
+];
+
+const TemplatesSection: React.FC = () => {
+    const [selectedFormat, setSelectedFormat] = useState<
+        'landscape' | 'portrait' | null
+    >(null);
+
+    const handleLandscapeClick = useCallback((): void => {
+        setSelectedFormat('landscape');
+    }, []);
+
+    const handlePortraitClick = useCallback((): void => {
+        setSelectedFormat('portrait');
+    }, []);
+
+    const form = useAppForm({
+        initialValues: DEFAULT_TEMPLATE_PAYLOAD,
+    });
+
+    return (
+        <Box padding="17px 0">
+            <Flex
+                alignItems="center"
+                marginBottom="9px"
+                justifyContent="space-between"
+            >
+                <Heading color="typography.900" variant="H3" marginRight="11px">
+                    OutreachVids Template
+                </Heading>
+                <Flex flexDirection="row" gap="3" alignItems="center">
+                    <FormProvider value={form}>
+                        <Select placeholder="Categories" name="language">
+                            <option value="option1">All Categories</option>
+                        </Select>
+                        <InputGroup>
+                            <InputLeftElement pointerEvents="none">
+                                <Icon
+                                    as={IconName.MAGNIFYING}
+                                    color="background.600"
+                                />
+                            </InputLeftElement>
+                            <Input
+                                name="name"
+                                type="text"
+                                placeholder="Search templates"
+                                paddingLeft="30px"
+                            />
+                        </InputGroup>
+                        <Flex
+                            flexDirection="row"
+                            backgroundColor="#F6F5FA"
+                            borderRadius="20px"
+                        >
+                            <Button
+                                label="Landscape"
+                                w="100%"
+                                borderRadius="20px"
+                                bg={
+                                    selectedFormat === 'landscape'
+                                        ? 'white'
+                                        : '#F6F5FA'
+                                }
+                                color={
+                                    selectedFormat === 'landscape'
+                                        ? 'background.600'
+                                        : 'typography.600'
+                                }
+                                onClick={handleLandscapeClick}
+                            />
+                            <Button
+                                label="Portrait"
+                                w="100%"
+                                borderRadius="20px"
+                                bg={
+                                    selectedFormat === 'portrait'
+                                        ? 'white'
+                                        : '#F6F5FA'
+                                }
+                                color={
+                                    selectedFormat === 'portrait'
+                                        ? 'background.600'
+                                        : 'typography.600'
+                                }
+                                onClick={handlePortraitClick}
+                            ></Button>
+                        </Flex>
+                    </FormProvider>
+                </Flex>
+            </Flex>
+            <SimpleGrid columns={{ sm: 2, md: 3, lg: 4 }} spacing="20px">
+                {templates.map(({ id, ...template }) => (
+                    <TemplateCard key={id} {...template} />
+                ))}
+            </SimpleGrid>
+        </Box>
+    );
+};
+
+export { TemplatesSection };
diff --git a/frontend/src/bundles/template/pages/styles.module.css b/frontend/src/bundles/template/pages/styles.module.css
new file mode 100644
index 000000000..a781376f5
--- /dev/null
+++ b/frontend/src/bundles/template/pages/styles.module.css
@@ -0,0 +1,8 @@
+.container {
+    height: calc(100vh - 75px);
+    padding: 25px;
+    flex-direction: column;
+    overflow: auto;
+    scrollbar-width: thin;
+    clip-path: inset(0 round 0 0.75rem 0 0);
+}
diff --git a/frontend/src/bundles/template/pages/templates.tsx b/frontend/src/bundles/template/pages/templates.tsx
new file mode 100644
index 000000000..9e326cb35
--- /dev/null
+++ b/frontend/src/bundles/template/pages/templates.tsx
@@ -0,0 +1,68 @@
+import {
+    Box,
+    Button,
+    Flex,
+    Header,
+    Icon,
+    Sidebar,
+    Text,
+} from '~/bundles/common/components/components.js';
+import { useCollapse } from '~/bundles/common/components/sidebar/hooks/use-collapse.hook.js';
+import { AppRoute } from '~/bundles/common/enums/enums.js';
+import { useCallback, useNavigate } from '~/bundles/common/hooks/hooks.js';
+import { IconName } from '~/bundles/common/icons/icons.js';
+import {
+    CreationsSection,
+    TemplatesSection,
+} from '~/bundles/template/components/components.js';
+
+import styles from './styles.module.css';
+
+const Templates: React.FC = () => {
+    const { isCollapsed } = useCollapse();
+
+    const navigate = useNavigate();
+
+    const handleClick = useCallback(() => {
+        navigate(AppRoute.STUDIO);
+    }, [navigate]);
+
+    return (
+        <Box bg="background.900" minHeight="100vh">
+            <Header />
+            <Sidebar>
+                <Box
+                    bg="background.900"
+                    pr="25px"
+                    w={
+                        isCollapsed
+                            ? 'calc(100vw - 60px)'
+                            : 'calc(100vw - 270px)'
+                    }
+                >
+                    <Flex
+                        bg="background.50"
+                        borderTopRadius="xl"
+                        className={styles['container']}
+                    >
+                        <Flex justifyContent="space-between">
+                            <Text variant="title">Templates</Text>
+                            <Button
+                                leftIcon={<Icon as={IconName.ADD} />}
+                                label="Create Template"
+                                variant="outlined"
+                                width="auto"
+                                onClick={handleClick}
+                            ></Button>
+                        </Flex>
+
+                        <CreationsSection onClick={handleClick} />
+                        <TemplatesSection />
+                    </Flex>
+                </Box>
+            </Sidebar>
+        </Box>
+    );
+};
+
+export { Templates };
diff --git a/frontend/src/bundles/template/types/template.type.ts b/frontend/src/bundles/template/types/template.type.ts
new file mode 100644
index 000000000..5bf45cdc3
--- /dev/null
+++ b/frontend/src/bundles/template/types/template.type.ts
@@ -0,0 +1,8 @@
+type Template = {
+    id: string;
+    name: string;
+    url: string | null;
+    previewUrl: string;
+};
+
+export { type Template };
diff --git a/frontend/src/bundles/template/types/types.ts b/frontend/src/bundles/template/types/types.ts
new file mode 100644
index 000000000..58b953e07
--- /dev/null
+++ b/frontend/src/bundles/template/types/types.ts
@@ -0,0 +1 @@
+export { type Template } from './template.type.js';
diff --git a/frontend/src/routes/routes.tsx b/frontend/src/routes/routes.tsx
index 1a6e2e18d..6db4541bb 100644
--- a/frontend/src/routes/routes.tsx
+++ b/frontend/src/routes/routes.tsx
@@ -7,6 +7,7 @@ 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';
+import { Templates } from '~/bundles/template/pages/templates.js';
 
 const routes = [
     {
@@ -53,6 +54,14 @@ const routes = [
                     </ProtectedRoute>
                 ),
             },
+            {
+                path: AppRoute.TEMPLATES,
+                element: (
+                    <ProtectedRoute>
+                        <Templates />
+                    </ProtectedRoute>
+                ),
+            },
             {
                 path: AppRoute.ANY,
                 element: <NotFound />,