diff --git a/backend/src/bundles/templates/enums/enums.ts b/backend/src/bundles/templates/enums/enums.ts
index f85dd91b5..161821e35 100644
--- a/backend/src/bundles/templates/enums/enums.ts
+++ b/backend/src/bundles/templates/enums/enums.ts
@@ -1,2 +1,2 @@
 export { templateErrorMessage } from './template-error-message.enum.js';
-export { templateApiPath } from './templates-api-path.enum.js';
+export { TemplateApiPath } from 'shared';
diff --git a/backend/src/bundles/templates/templates.controller.ts b/backend/src/bundles/templates/templates.controller.ts
index c52672322..0d539a5f2 100644
--- a/backend/src/bundles/templates/templates.controller.ts
+++ b/backend/src/bundles/templates/templates.controller.ts
@@ -7,7 +7,7 @@ import { ApiPath } from '~/common/enums/enums.js';
 import { HTTPCode, HTTPMethod } from '~/common/http/http.js';
 import { type Logger } from '~/common/logger/logger.js';
 
-import { templateApiPath } from './enums/enums.js';
+import { TemplateApiPath } from './enums/enums.js';
 import { type TemplateService } from './templates.service.js';
 import {
     type CreateTemplateRequestDto,
@@ -111,7 +111,7 @@ class TemplateController extends BaseController {
         this.templateService = templateService;
 
         this.addRoute({
-            path: templateApiPath.USER,
+            path: TemplateApiPath.USER,
             method: HTTPMethod.GET,
             handler: (options) =>
                 this.findAllByUser(
@@ -122,7 +122,7 @@ class TemplateController extends BaseController {
         });
 
         this.addRoute({
-            path: templateApiPath.PUBLIC,
+            path: TemplateApiPath.PUBLIC,
             method: HTTPMethod.GET,
             handler: () => {
                 return this.findPublicTemplates();
@@ -130,7 +130,7 @@ class TemplateController extends BaseController {
         });
 
         this.addRoute({
-            path: templateApiPath.ID,
+            path: TemplateApiPath.ID,
             method: HTTPMethod.GET,
             handler: (options) => {
                 return this.findById(
@@ -142,7 +142,7 @@ class TemplateController extends BaseController {
         });
 
         this.addRoute({
-            path: templateApiPath.ROOT,
+            path: TemplateApiPath.ROOT,
             method: HTTPMethod.POST,
             validation: {
                 body: createTemplateValidationSchema,
@@ -156,7 +156,7 @@ class TemplateController extends BaseController {
         });
 
         this.addRoute({
-            path: templateApiPath.ID,
+            path: TemplateApiPath.ID,
             method: HTTPMethod.PATCH,
             validation: {
                 body: updateTemplateValidationSchema,
@@ -172,7 +172,7 @@ class TemplateController extends BaseController {
         });
 
         this.addRoute({
-            path: templateApiPath.ID,
+            path: TemplateApiPath.ID,
             method: HTTPMethod.DELETE,
             handler: (options) =>
                 this.delete(
diff --git a/frontend/src/bundles/common/middlewares/draft.middleware.ts b/frontend/src/bundles/common/middlewares/draft.middleware.ts
index f1c2d9995..59e8f712b 100644
--- a/frontend/src/bundles/common/middlewares/draft.middleware.ts
+++ b/frontend/src/bundles/common/middlewares/draft.middleware.ts
@@ -14,6 +14,8 @@ const CHANGE_DRAFT_ACTIONS = new Set<string>([
     studioActions.resizeScene.type,
     studioActions.setVideoName.type,
     studioActions.setVideoSize.type,
+    studioActions.addBackgroundToScene.type,
+    studioActions.loadTemplate.type,
 ]);
 
 const isChangeDraftAction = (action: Action): boolean => {
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
index b0cc6af44..c780726e1 100644
--- 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
@@ -14,7 +14,7 @@ import backgroundColors from '~/bundles/studio/data/bg-colors.json';
 import backgroundImages from '~/bundles/studio/data/bg-images.json';
 import { actions as studioActions } from '~/bundles/studio/store/studio.js';
 
-import { ColorCard, ImageCard } from './components/components.js';
+import { BackgroundImageCard, ColorCard } from './components/components.js';
 import styles from './styles.module.css';
 
 const BackgroundsContent: React.FC = () => {
@@ -43,7 +43,7 @@ const BackgroundsContent: React.FC = () => {
                             </Flex>
 
                             {backgroundImages.map((imageSource, index) => (
-                                <ImageCard
+                                <BackgroundImageCard
                                     key={index}
                                     imageSource={imageSource}
                                 />
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
index f699b1c2e..f4a76ce49 100644
--- 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
@@ -1,2 +1,2 @@
 export { ColorCard } from './color-card.js';
-export { ImageCard } from './image-card.js';
+export { BackgroundImageCard } 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
index bc8348e52..9bf020cd8 100644
--- 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
@@ -1,14 +1,12 @@
-import { Box, Image } from '~/bundles/common/components/components.js';
 import { useAppDispatch, useCallback } from '~/bundles/common/hooks/hooks.js';
+import { ImageCard } from '~/bundles/studio/components/video-menu/components/menu-content/components/components.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 BackgroundImageCard: React.FC<Properties> = ({ imageSource }) => {
     const dispatch = useAppDispatch();
 
     const handleImageClick = useCallback((): void => {
@@ -20,16 +18,7 @@ const ImageCard: React.FC<Properties> = ({ imageSource }) => {
         );
     }, [dispatch, imageSource]);
 
-    return (
-        <Box className={styles['image-item']} onClick={handleImageClick}>
-            <Image
-                src={imageSource}
-                objectFit="contain"
-                width="100%"
-                height="100%"
-            ></Image>
-        </Box>
-    );
+    return <ImageCard imageSource={imageSource} onClick={handleImageClick} />;
 };
 
-export { ImageCard };
+export { BackgroundImageCard };
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
index add5f9567..fe90fe7cf 100644
--- 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
@@ -1,12 +1,3 @@
-.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;
-}
-
 .color-item {
     border-radius: 7px;
     height: 80px;
@@ -15,12 +6,6 @@
     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;
-}
-
 .color-item:hover {
     border-color: var(--chakra-colors-brand-secondary-300);
     cursor: pointer;
diff --git a/frontend/src/bundles/studio/components/video-menu/components/menu-content/components/components.ts b/frontend/src/bundles/studio/components/video-menu/components/menu-content/components/components.ts
new file mode 100644
index 000000000..53d3191ca
--- /dev/null
+++ b/frontend/src/bundles/studio/components/video-menu/components/menu-content/components/components.ts
@@ -0,0 +1 @@
+export { ImageCard } from './image-card/image-card.js';
diff --git a/frontend/src/bundles/studio/components/video-menu/components/menu-content/components/image-card/image-card.tsx b/frontend/src/bundles/studio/components/video-menu/components/menu-content/components/image-card/image-card.tsx
new file mode 100644
index 000000000..1960c610a
--- /dev/null
+++ b/frontend/src/bundles/studio/components/video-menu/components/menu-content/components/image-card/image-card.tsx
@@ -0,0 +1,23 @@
+import { Box, Image } from '~/bundles/common/components/components.js';
+
+import styles from './styles.module.css';
+
+type Properties = {
+    imageSource: string;
+    onClick?: () => void;
+};
+
+const ImageCard: React.FC<Properties> = ({ imageSource, onClick }) => {
+    return (
+        <Box className={styles['image-item']} onClick={onClick}>
+            <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/components/image-card/styles.module.css b/frontend/src/bundles/studio/components/video-menu/components/menu-content/components/image-card/styles.module.css
new file mode 100644
index 000000000..e6407a873
--- /dev/null
+++ b/frontend/src/bundles/studio/components/video-menu/components/menu-content/components/image-card/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 fee93901e..ad57e9cdd 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,3 +1,4 @@
 export { AvatarsContent } from './avatars-content/avatars-content.js';
 export { BackgroundsContent } from './backgrounds-content/backgrounds-content.js';
 export { ScriptContent } from './script-content/script-content.js';
+export { TemplatesContent } from './templates-content/templates-content.js';
diff --git a/frontend/src/bundles/studio/components/video-menu/components/menu-content/templates-content/components/components.ts b/frontend/src/bundles/studio/components/video-menu/components/menu-content/templates-content/components/components.ts
new file mode 100644
index 000000000..a302af5fc
--- /dev/null
+++ b/frontend/src/bundles/studio/components/video-menu/components/menu-content/templates-content/components/components.ts
@@ -0,0 +1 @@
+export { TemplateCard } from './template-card.js';
diff --git a/frontend/src/bundles/studio/components/video-menu/components/menu-content/templates-content/components/template-card.tsx b/frontend/src/bundles/studio/components/video-menu/components/menu-content/templates-content/components/template-card.tsx
new file mode 100644
index 000000000..a100d8fb2
--- /dev/null
+++ b/frontend/src/bundles/studio/components/video-menu/components/menu-content/templates-content/components/template-card.tsx
@@ -0,0 +1,22 @@
+import { useAppDispatch, useCallback } from '~/bundles/common/hooks/hooks.js';
+import { ImageCard } from '~/bundles/studio/components/video-menu/components/menu-content/components/components.js';
+import { actions as studioActions } from '~/bundles/studio/store/studio.js';
+import { type Template } from '~/bundles/studio/types/types.js';
+
+type Properties = {
+    template: Template;
+};
+
+const TemplateCard: React.FC<Properties> = ({ template }) => {
+    const dispatch = useAppDispatch();
+
+    const handleClick = useCallback((): void => {
+        void dispatch(studioActions.loadTemplate(template));
+    }, [dispatch, template]);
+
+    return (
+        <ImageCard imageSource={template.previewUrl} onClick={handleClick} />
+    );
+};
+
+export { TemplateCard };
diff --git a/frontend/src/bundles/studio/components/video-menu/components/menu-content/templates-content/templates-content.tsx b/frontend/src/bundles/studio/components/video-menu/components/menu-content/templates-content/templates-content.tsx
new file mode 100644
index 000000000..5f3879918
--- /dev/null
+++ b/frontend/src/bundles/studio/components/video-menu/components/menu-content/templates-content/templates-content.tsx
@@ -0,0 +1,86 @@
+import {
+    Box,
+    Loader,
+    SimpleGrid,
+    Tab,
+    TabList,
+    TabPanel,
+    TabPanels,
+    Tabs,
+    Text,
+} from '~/bundles/common/components/components.js';
+import { EMPTY_VALUE } from '~/bundles/common/constants/constants.js';
+import { DataStatus } from '~/bundles/common/enums/data-status.enum.js';
+import {
+    useAppDispatch,
+    useAppSelector,
+    useEffect,
+} from '~/bundles/common/hooks/hooks.js';
+import { actions as studioActions } from '~/bundles/studio/store/studio.js';
+
+import { TemplateCard } from './components/components.js';
+
+const TemplatesContent: React.FC = () => {
+    const dispatch = useAppDispatch();
+
+    const { templates, dataStatus } = useAppSelector(({ studio }) => studio);
+
+    useEffect(() => {
+        if (templates.public.length === EMPTY_VALUE) {
+            void dispatch(studioActions.loadPublicTemplates());
+        }
+        if (!templates.isUserLoaded) {
+            void dispatch(studioActions.loadUserTemplates());
+        }
+    }, [dispatch, templates]);
+
+    return (
+        <Tabs>
+            <TabList>
+                <Tab>Templates</Tab>
+                <Tab>My templates</Tab>
+            </TabList>
+
+            {dataStatus === DataStatus.PENDING ? (
+                <Box mt="100px">
+                    <Loader />
+                </Box>
+            ) : (
+                <TabPanels>
+                    <TabPanel>
+                        <SimpleGrid columns={2} spacingX="13px" spacingY="10px">
+                            {templates.public.map((template) => (
+                                <TemplateCard
+                                    key={template.id}
+                                    template={template}
+                                />
+                            ))}
+                        </SimpleGrid>
+                    </TabPanel>
+                    <TabPanel>
+                        {templates.user.length > EMPTY_VALUE ? (
+                            <SimpleGrid
+                                columns={2}
+                                spacingX="13px"
+                                spacingY="10px"
+                            >
+                                {templates.user.map((template) => (
+                                    <TemplateCard
+                                        key={template.id}
+                                        template={template}
+                                    />
+                                ))}
+                            </SimpleGrid>
+                        ) : (
+                            <Text color="typography.600" variant="body1">
+                                You have no templates yet.
+                            </Text>
+                        )}
+                    </TabPanel>
+                </TabPanels>
+            )}
+        </Tabs>
+    );
+};
+
+export { TemplatesContent };
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 ff30bed1c..021dbe1e7 100644
--- a/frontend/src/bundles/studio/components/video-menu/video-menu.tsx
+++ b/frontend/src/bundles/studio/components/video-menu/video-menu.tsx
@@ -19,6 +19,7 @@ import {
     AvatarsContent,
     BackgroundsContent,
     ScriptContent,
+    TemplatesContent,
 } from './components/menu-content/content.js';
 // import {
 //     AssetsContent,
@@ -66,11 +67,11 @@ const VideoMenu: React.FC = () => {
 
     // TODO: Uncomment menu items after demo
     const menuItems: Record<ValueOf<typeof MenuItems>, MenuItem> = {
-        // templates: {
-        //     label: 'Templates',
-        //     icon: <Icon as={IconName.TEMPLATE} />,
-        //     getContent: () => <TemplatesContent />,
-        // },
+        templates: {
+            label: 'Templates',
+            icon: <Icon as={IconName.TEMPLATE} />,
+            getContent: () => <TemplatesContent />,
+        },
         avatars: {
             label: 'Avatars',
             icon: <Icon as={IconName.AVATAR} />,
diff --git a/frontend/src/bundles/studio/constants/constants.ts b/frontend/src/bundles/studio/constants/constants.ts
index 31bc043be..e673e7175 100644
--- a/frontend/src/bundles/studio/constants/constants.ts
+++ b/frontend/src/bundles/studio/constants/constants.ts
@@ -10,6 +10,8 @@ export { MIN_SCENE_DURATION } from './min-scene-duration.constant.js';
 export { NEW_SCRIPT_TEXT } from './new-script-text.constant.js';
 export { SCRIPT_AND_AVATAR_ARE_REQUIRED } from './script-and-avatar-are-required.constant.js';
 export { SKIP_TO_PREV_SCENE_THRESHOLD } from './skip-to-previous-scene-threshold.constant.js';
+export { TEMPLATE_SAVE_FAILED_NOTOFICATION_ID } from './template-save-failed-notification-id.js';
+export { TEMPLATE_SAVE_NOTOFICATION_ID } from './template-save-notification-id.js';
 export { VIDEO_SAVE_FAILED_NOTIFICATION_ID } from './video-save-failed-notification-id.js';
 export { VIDEO_SAVE_NOTIFICATION_ID } from './video-save-notification-id.js';
 export { VIDEO_SUBMIT_FAILED_NOTIFICATION_ID } from './video-submit-failed-id.constant.js';
diff --git a/frontend/src/bundles/studio/constants/template-save-failed-notification-id.ts b/frontend/src/bundles/studio/constants/template-save-failed-notification-id.ts
new file mode 100644
index 000000000..c0549068e
--- /dev/null
+++ b/frontend/src/bundles/studio/constants/template-save-failed-notification-id.ts
@@ -0,0 +1,3 @@
+const TEMPLATE_SAVE_FAILED_NOTOFICATION_ID = 'template-save-failed';
+
+export { TEMPLATE_SAVE_FAILED_NOTOFICATION_ID };
diff --git a/frontend/src/bundles/studio/constants/template-save-notification-id.ts b/frontend/src/bundles/studio/constants/template-save-notification-id.ts
new file mode 100644
index 000000000..3b3bef74a
--- /dev/null
+++ b/frontend/src/bundles/studio/constants/template-save-notification-id.ts
@@ -0,0 +1,3 @@
+const TEMPLATE_SAVE_NOTOFICATION_ID = 'template-save';
+
+export { TEMPLATE_SAVE_NOTOFICATION_ID };
diff --git a/frontend/src/bundles/studio/enums/enums.ts b/frontend/src/bundles/studio/enums/enums.ts
index 7787da3d4..f2fc60aff 100644
--- a/frontend/src/bundles/studio/enums/enums.ts
+++ b/frontend/src/bundles/studio/enums/enums.ts
@@ -3,4 +3,4 @@ export { NotificationMessage } from './notification-message.enum.js';
 export { NotificationTitle } from './notification-title.enum.js';
 export { PlayIconNames } from './play-icon-names.enum.js';
 export { RowNames } from './row-names.enum.js';
-export { AvatarsApiPath, SpeechApiPath } from 'shared';
+export { AvatarsApiPath, SpeechApiPath, TemplateApiPath } from 'shared';
diff --git a/frontend/src/bundles/studio/enums/menu-items.enum.ts b/frontend/src/bundles/studio/enums/menu-items.enum.ts
index f64cda74d..ccbfe0e73 100644
--- a/frontend/src/bundles/studio/enums/menu-items.enum.ts
+++ b/frontend/src/bundles/studio/enums/menu-items.enum.ts
@@ -1,6 +1,6 @@
 // TODO: Uncomment menu items after demo
 const MenuItems = {
-    // TEMPLATES: 'templates',
+    TEMPLATES: 'templates',
     AVATARS: 'avatars',
     SCRIPT: 'script',
     // TEXT: 'text',
diff --git a/frontend/src/bundles/studio/enums/notification-message.enum.ts b/frontend/src/bundles/studio/enums/notification-message.enum.ts
index ce2c28620..78c9518e9 100644
--- a/frontend/src/bundles/studio/enums/notification-message.enum.ts
+++ b/frontend/src/bundles/studio/enums/notification-message.enum.ts
@@ -5,6 +5,8 @@ const NotificationMessage = {
         'To create a video, you need to have an avatar and a script.',
     VIDEO_SAVE: 'Video saved successfully',
     VIDEO_SAVE_FAILED: 'Video save failed',
+    TEMPLATE_SAVE: 'Template saved successfully',
+    TEMPLATE_SAVE_FAILED: 'Template save failed',
 } as const;
 
 export { NotificationMessage };
diff --git a/frontend/src/bundles/studio/enums/notification-title.enum.ts b/frontend/src/bundles/studio/enums/notification-title.enum.ts
index cf73f0ea2..0e7b5f6cb 100644
--- a/frontend/src/bundles/studio/enums/notification-title.enum.ts
+++ b/frontend/src/bundles/studio/enums/notification-title.enum.ts
@@ -4,6 +4,8 @@ const NotificationTitle = {
     SCRIPT_AND_AVATAR_ARE_REQUIRED: 'Script and avatar are required',
     VIDEO_SAVED: 'Video saved',
     VIDEO_SAVE_FAILED: 'Video save failed',
+    TEMPLATE_SAVED: 'Template saved',
+    TEMPLATE_SAVE_FAILED: 'Template save failed',
 } as const;
 
 export { NotificationTitle };
diff --git a/frontend/src/bundles/studio/pages/studio.tsx b/frontend/src/bundles/studio/pages/studio.tsx
index 15dd38ece..1bcc59757 100644
--- a/frontend/src/bundles/studio/pages/studio.tsx
+++ b/frontend/src/bundles/studio/pages/studio.tsx
@@ -40,6 +40,8 @@ import {
 } from '../components/components.js';
 import {
     SCRIPT_AND_AVATAR_ARE_REQUIRED,
+    TEMPLATE_SAVE_FAILED_NOTOFICATION_ID,
+    TEMPLATE_SAVE_NOTOFICATION_ID,
     VIDEO_SAVE_FAILED_NOTIFICATION_ID,
     VIDEO_SAVE_NOTIFICATION_ID,
     VIDEO_SUBMIT_FAILED_NOTIFICATION_ID,
@@ -51,7 +53,10 @@ import {
     getVoicesConfigs,
     scenesExceedScripts,
 } from '../helpers/helpers.js';
-import { selectVideoDataById } from '../store/selectors.js';
+import {
+    selectTemplateDataById,
+    selectVideoDataById,
+} from '../store/selectors.js';
 import { actions as studioActions } from '../store/studio.js';
 
 const Studio: React.FC = () => {
@@ -62,6 +67,10 @@ const Studio: React.FC = () => {
         selectVideoDataById(state, locationState?.id),
     );
 
+    const templateData = useAppSelector((state) =>
+        selectTemplateDataById(state, locationState?.templateId),
+    );
+
     const {
         scenes,
         scripts,
@@ -89,7 +98,10 @@ const Studio: React.FC = () => {
         if (videoData) {
             void dispatch(studioActions.loadVideoData(videoData));
         }
-    }, [dispatch, videoData]);
+        if (templateData) {
+            void dispatch(studioActions.loadTemplate(templateData));
+        }
+    }, [dispatch, templateData, videoData]);
 
     const handleResize = useCallback(() => {
         dispatch(studioActions.changeVideoSize());
@@ -193,6 +205,24 @@ const Studio: React.FC = () => {
         [dispatch],
     );
 
+    const handleSaveTemplate = useCallback((): void => {
+        void dispatch(studioActions.createTemplate())
+            .then(() => {
+                notificationService.success({
+                    id: TEMPLATE_SAVE_NOTOFICATION_ID,
+                    message: NotificationMessage.TEMPLATE_SAVE,
+                    title: NotificationTitle.TEMPLATE_SAVED,
+                });
+            })
+            .catch(() => {
+                notificationService.error({
+                    id: TEMPLATE_SAVE_FAILED_NOTOFICATION_ID,
+                    message: NotificationMessage.TEMPLATE_SAVE_FAILED,
+                    title: NotificationTitle.TEMPLATE_SAVE_FAILED,
+                });
+            });
+    }, [dispatch]);
+
     useEffect(() => {
         if (isVideoScriptsGenerationReady) {
             dispatch(studioActions.setVideoScriptToPending());
@@ -258,6 +288,9 @@ const Studio: React.FC = () => {
                                     <MenuItem onClick={handleSubmit}>
                                         Submit to render
                                     </MenuItem>
+                                    <MenuItem onClick={handleSaveTemplate}>
+                                        Save as template
+                                    </MenuItem>
                                 </MenuList>
                             </Menu>
                         </Flex>
diff --git a/frontend/src/bundles/studio/store/actions.ts b/frontend/src/bundles/studio/store/actions.ts
index 05c79464b..9c9559a60 100644
--- a/frontend/src/bundles/studio/store/actions.ts
+++ b/frontend/src/bundles/studio/store/actions.ts
@@ -5,9 +5,11 @@ import { type UpdateVideoRequestDto } from 'shared';
 import { type AsyncThunkConfig } from '~/bundles/common/types/types.js';
 import {
     type AvatarGetAllResponseDto,
+    type CreateTemplateResponseDto,
     type CreateVideoRequestDto,
     type GenerateSpeechRequestDto,
     type GenerateSpeechResponseDto,
+    type GetTemplatesResponseDto,
     type GetVoicesResponseDto,
     type RenderAvatarResponseDto,
     type Script,
@@ -131,11 +133,52 @@ const updateVideo = createAsyncThunk<
     return videosApi.updateVideo(payload, videoId as string);
 });
 
+const loadPublicTemplates = createAsyncThunk<
+    GetTemplatesResponseDto,
+    undefined,
+    AsyncThunkConfig
+>(`${sliceName}/load-public-templates`, (_, { extra }) => {
+    const { templatesApi } = extra;
+
+    return templatesApi.loadPublicTemplates();
+});
+
+const loadUserTemplates = createAsyncThunk<
+    GetTemplatesResponseDto,
+    undefined,
+    AsyncThunkConfig
+>(`${sliceName}/load-user-templates`, (_, { extra }) => {
+    const { templatesApi } = extra;
+
+    return templatesApi.loadUserTemplates();
+});
+
+const createTemplate = createAsyncThunk<
+    CreateTemplateResponseDto,
+    undefined,
+    AsyncThunkConfig
+>(`${sliceName}/create-template`, (_, { extra, getState }) => {
+    const { templatesApi } = extra;
+    const { scripts, scenes, videoName, videoSize } = getState().studio;
+
+    return templatesApi.createTemplate({
+        composition: {
+            scenes,
+            scripts: getVoicesConfigs(scripts),
+            videoOrientation: videoSize,
+        },
+        name: videoName,
+    });
+});
+
 export {
+    createTemplate,
     generateAllScriptsSpeech,
     generateScriptSpeech,
     generateScriptSpeechPreview,
     loadAvatars,
+    loadPublicTemplates,
+    loadUserTemplates,
     loadVoices,
     renderAvatar,
     saveVideo,
diff --git a/frontend/src/bundles/studio/store/selectors.ts b/frontend/src/bundles/studio/store/selectors.ts
index 751ca05e7..af87aaaa3 100644
--- a/frontend/src/bundles/studio/store/selectors.ts
+++ b/frontend/src/bundles/studio/store/selectors.ts
@@ -5,6 +5,7 @@ import { type RootState } from '~/bundles/common/types/types.js';
 
 import {
     type Script,
+    type Template,
     type VideoGetAllItemResponseDto,
 } from '../types/types.js';
 
@@ -13,6 +14,12 @@ const selectScrips = (state: RootState): Script[] => state.studio.scripts;
 const selectVideos = (state: RootState): VideoGetAllItemResponseDto[] =>
     state.home.videos;
 
+const selectPublicTemplates = (state: RootState): Template[] =>
+    state.studio.templates.public;
+
+const selectUserTemplates = (state: RootState): Template[] =>
+    state.studio.templates.user;
+
 const selectTotalDuration = createSelector([selectScrips], (scripts) => {
     const totalDuration = scripts.reduce(
         (total, script) => total + script.duration,
@@ -29,4 +36,17 @@ const selectVideoDataById = createSelector(
     },
 );
 
-export { selectTotalDuration, selectVideoDataById };
+const selectTemplateDataById = createSelector(
+    [selectPublicTemplates, selectUserTemplates, (_, id: string): string => id],
+    (publicTemplates, userTemplates, id) => {
+        const publicTemplate = publicTemplates.find(
+            (template) => template.id === id,
+        );
+        if (!publicTemplate) {
+            return userTemplates.find((template) => template.id === id);
+        }
+        return publicTemplate;
+    },
+);
+
+export { selectTemplateDataById, selectTotalDuration, selectVideoDataById };
diff --git a/frontend/src/bundles/studio/store/slice.ts b/frontend/src/bundles/studio/store/slice.ts
index c3b635479..710cd2016 100644
--- a/frontend/src/bundles/studio/store/slice.ts
+++ b/frontend/src/bundles/studio/store/slice.ts
@@ -40,15 +40,19 @@ import {
     type Scene,
     type SceneAvatar,
     type SelectedItem,
+    type Template,
     type TimelineItemWithSpan,
     type VideoGetAllItemResponseDto,
     type Voice,
 } from '../types/types.js';
 import {
+    createTemplate,
     generateAllScriptsSpeech,
     generateScriptSpeech,
     generateScriptSpeechPreview,
     loadAvatars,
+    loadPublicTemplates,
+    loadUserTemplates,
     loadVoices,
     renderAvatar,
     saveVideo,
@@ -93,6 +97,11 @@ type State = {
     isDraftSaved: boolean;
     videoId: string | null;
     voices: Voice[];
+    templates: {
+        public: Template[] | [];
+        user: Template[] | [];
+        isUserLoaded: boolean;
+    };
     ui: {
         destinationPointer: DestinationPointer | null;
         selectedItem: SelectedItem | null;
@@ -119,6 +128,11 @@ const initialState: State = {
     isDraftSaved: true,
     videoId: null,
     voices: [],
+    templates: {
+        public: [],
+        user: [],
+        isUserLoaded: false,
+    },
     ui: {
         destinationPointer: null,
         selectedItem: null,
@@ -422,6 +436,7 @@ const { reducer, actions, name } = createSlice({
 
             state.videoName = name;
             state.videoId = id;
+            state.videoSize = composition.videoOrientation;
             state.scenes = composition.scenes;
             state.scripts = composition.scripts.map(
                 (script: CompositionScript) => {
@@ -438,6 +453,27 @@ const { reducer, actions, name } = createSlice({
                 },
             );
         },
+        loadTemplate(state, action: PayloadAction<Template>) {
+            const { composition, name } = action.payload;
+
+            (state.videoName = name),
+                (state.videoSize = composition.videoOrientation),
+                (state.scenes = composition.scenes),
+                (state.scripts = composition.scripts.map(
+                    (script: CompositionScript) => {
+                        const voice = state.voices.find(
+                            (voice) => voice.name === script.voiceName,
+                        );
+
+                        return {
+                            ...script,
+                            iconName: PlayIconNames.READY,
+                            voice: voice ?? DEFAULT_VOICE,
+                            url: null,
+                        };
+                    },
+                ));
+        },
         addGeneratedVideoScript(
             state,
             action: PayloadAction<Array<VideoScript>>,
@@ -616,6 +652,40 @@ const { reducer, actions, name } = createSlice({
             state.dataStatus = DataStatus.REJECTED;
             state.isDraftSaved = false;
         });
+        builder.addCase(loadPublicTemplates.pending, (state) => {
+            state.dataStatus = DataStatus.PENDING;
+        });
+        builder.addCase(loadPublicTemplates.fulfilled, (state, action) => {
+            state.dataStatus = DataStatus.FULFILLED;
+            state.templates.public = action.payload.items;
+        });
+        builder.addCase(loadPublicTemplates.rejected, (state) => {
+            state.dataStatus = DataStatus.REJECTED;
+            state.templates.public = [];
+        });
+        builder.addCase(loadUserTemplates.pending, (state) => {
+            state.dataStatus = DataStatus.PENDING;
+        });
+        builder.addCase(loadUserTemplates.fulfilled, (state, action) => {
+            state.dataStatus = DataStatus.FULFILLED;
+            state.templates.user = action.payload.items;
+            state.templates.isUserLoaded = true;
+        });
+        builder.addCase(loadUserTemplates.rejected, (state) => {
+            state.dataStatus = DataStatus.REJECTED;
+            state.templates.user = [];
+            state.templates.isUserLoaded = false;
+        });
+        builder.addCase(createTemplate.pending, (state) => {
+            state.dataStatus = DataStatus.PENDING;
+        });
+        builder.addCase(createTemplate.fulfilled, (state, action) => {
+            state.dataStatus = DataStatus.FULFILLED;
+            state.templates.user = [...state.templates.user, action.payload];
+        });
+        builder.addCase(createTemplate.rejected, (state) => {
+            state.dataStatus = DataStatus.REJECTED;
+        });
     },
 });
 
diff --git a/frontend/src/bundles/studio/store/studio.ts b/frontend/src/bundles/studio/store/studio.ts
index 1ed89e8bc..e8244baed 100644
--- a/frontend/src/bundles/studio/store/studio.ts
+++ b/frontend/src/bundles/studio/store/studio.ts
@@ -1,8 +1,11 @@
 import {
+    createTemplate,
     generateAllScriptsSpeech,
     generateScriptSpeech,
     generateScriptSpeechPreview,
     loadAvatars,
+    loadPublicTemplates,
+    loadUserTemplates,
     loadVoices,
     renderAvatar,
     saveVideo,
@@ -20,6 +23,9 @@ const allActions = {
     renderAvatar,
     saveVideo,
     updateVideo,
+    loadPublicTemplates,
+    loadUserTemplates,
+    createTemplate,
 };
 
 export { allActions as actions };
diff --git a/frontend/src/bundles/studio/studio.ts b/frontend/src/bundles/studio/studio.ts
index cce31381f..67b15511c 100644
--- a/frontend/src/bundles/studio/studio.ts
+++ b/frontend/src/bundles/studio/studio.ts
@@ -5,6 +5,7 @@ import { storage } from '~/framework/storage/storage.js';
 import { AvatarVideosApi } from './avatar-videos-api.js';
 import { AvatarsApi } from './avatars-api.js';
 import { SpeechApi } from './speech-api.js';
+import { TemplatesApi } from './templates-api.js';
 
 const avatarVideosApi = new AvatarVideosApi({
     baseUrl: config.ENV.API.ORIGIN_URL,
@@ -24,4 +25,10 @@ const speechApi = new SpeechApi({
     http,
 });
 
-export { avatarsApi, avatarVideosApi, speechApi };
+const templatesApi = new TemplatesApi({
+    baseUrl: config.ENV.API.ORIGIN_URL,
+    storage,
+    http,
+});
+
+export { avatarsApi, avatarVideosApi, speechApi, templatesApi };
diff --git a/frontend/src/bundles/studio/templates-api.ts b/frontend/src/bundles/studio/templates-api.ts
new file mode 100644
index 000000000..49c6babd7
--- /dev/null
+++ b/frontend/src/bundles/studio/templates-api.ts
@@ -0,0 +1,67 @@
+import { ApiPath, ContentType } from '~/bundles/common/enums/enums.js';
+import { type Http, HTTPMethod } from '~/framework/http/http.js';
+import { BaseHttpApi } from '~/framework/http-api/http-api.js';
+import { type Storage } from '~/framework/storage/storage.js';
+
+import { TemplateApiPath } from './enums/enums.js';
+import {
+    type CreateTemplateRequestDto,
+    type CreateTemplateResponseDto,
+    type GetTemplatesResponseDto,
+} from './types/types.js';
+
+type Constructor = {
+    baseUrl: string;
+    http: Http;
+    storage: Storage;
+};
+
+class TemplatesApi extends BaseHttpApi {
+    public constructor({ baseUrl, http, storage }: Constructor) {
+        super({ path: ApiPath.TEMPLATES, baseUrl, http, storage });
+    }
+
+    public async loadPublicTemplates(): Promise<GetTemplatesResponseDto> {
+        const response = await this.load(
+            this.getFullEndpoint(TemplateApiPath.PUBLIC, {}),
+            {
+                method: HTTPMethod.GET,
+                contentType: ContentType.JSON,
+                hasAuth: true,
+            },
+        );
+
+        return response.json<GetTemplatesResponseDto>();
+    }
+
+    public async loadUserTemplates(): Promise<GetTemplatesResponseDto> {
+        const response = await this.load(
+            this.getFullEndpoint(TemplateApiPath.USER, {}),
+            {
+                method: HTTPMethod.GET,
+                contentType: ContentType.JSON,
+                hasAuth: true,
+            },
+        );
+
+        return response.json<GetTemplatesResponseDto>();
+    }
+
+    public async createTemplate(
+        payload: CreateTemplateRequestDto,
+    ): Promise<CreateTemplateResponseDto> {
+        const response = await this.load(
+            this.getFullEndpoint(TemplateApiPath.ROOT, {}),
+            {
+                method: HTTPMethod.POST,
+                contentType: ContentType.JSON,
+                payload: JSON.stringify(payload),
+                hasAuth: true,
+            },
+        );
+
+        return response.json<CreateTemplateResponseDto>();
+    }
+}
+
+export { TemplatesApi };
diff --git a/frontend/src/bundles/studio/types/types.ts b/frontend/src/bundles/studio/types/types.ts
index 6ea63b8ae..c07e22666 100644
--- a/frontend/src/bundles/studio/types/types.ts
+++ b/frontend/src/bundles/studio/types/types.ts
@@ -18,14 +18,18 @@ export {
 export {
     type Composition,
     type Script as CompositionScript,
+    type CreateTemplateRequestDto,
+    type CreateTemplateResponseDto,
     type CreateVideoRequestDto,
     type GenerateSpeechRequestDto,
     type GenerateSpeechResponseDto,
+    type GetTemplatesResponseDto,
     type GetVoicesResponseDto,
     type RenderAvatarResponseDto,
     type RenderAvatarVideoRequestDto,
     type Scene,
     type SceneAvatar,
+    type Template,
     type VideoGetAllItemResponseDto,
     type Voice,
 } from 'shared';
diff --git a/frontend/src/bundles/template/components/creations-section/creations-section.tsx b/frontend/src/bundles/template/components/creations-section/creations-section.tsx
index 8c71bb984..53cd0fbca 100644
--- a/frontend/src/bundles/template/components/creations-section/creations-section.tsx
+++ b/frontend/src/bundles/template/components/creations-section/creations-section.tsx
@@ -10,14 +10,12 @@ 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;
+    templates: Template[];
 };
 
-const CreationsSection: React.FC<Properties> = ({ onClick }) => {
+const CreationsSection: React.FC<Properties> = ({ onClick, templates }) => {
     return (
         <Box padding="17px 0">
             <Flex alignItems="center" marginBottom="9px">
@@ -35,7 +33,7 @@ const CreationsSection: React.FC<Properties> = ({ onClick }) => {
                             marginRight="20px"
                             width="250px"
                         >
-                            <TemplateCard {...template} />
+                            <TemplateCard {...template} id={id} />
                         </Box>
                     ))}
                 </Box>
diff --git a/frontend/src/bundles/template/components/template-card/template-card.tsx b/frontend/src/bundles/template/components/template-card/template-card.tsx
index a6e8cb657..cefef1c7e 100644
--- a/frontend/src/bundles/template/components/template-card/template-card.tsx
+++ b/frontend/src/bundles/template/components/template-card/template-card.tsx
@@ -6,32 +6,34 @@ import {
     Image,
     Text,
 } from '~/bundles/common/components/components.js';
-import { useCallback, useState } from '~/bundles/common/hooks/hooks.js';
+import { AppRoute } from '~/bundles/common/enums/enums.js';
+import {
+    useCallback,
+    useNavigate,
+    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 = {
+    id: string;
     name: string;
-    url: string | null;
     previewUrl: string;
 };
 
-const TemplateCard: React.FC<Properties> = ({ name, url, previewUrl }) => {
-    const [isVideoModalOpen, setIsVideoModalOpen] = useState(false);
+const TemplateCard: React.FC<Properties> = ({ id, name, previewUrl }) => {
+    const navigate = useNavigate();
     const [isWarningModalOpen, setIsWarningModalOpen] = useState(false);
 
-    const handleIconClick = useCallback(() => {
-        if (url) {
-            return setIsVideoModalOpen(true);
-        }
-    }, [url]);
-
-    const handleVideoModalClose = useCallback(() => {
-        setIsVideoModalOpen(false);
-    }, []);
+    const handleIconClick = useCallback((): void => {
+        navigate(AppRoute.STUDIO, {
+            state: {
+                templateId: id,
+            },
+        });
+    }, [id, navigate]);
 
     const handleWarningModalClose = useCallback(() => {
         setIsWarningModalOpen(false);
@@ -57,16 +59,11 @@ const TemplateCard: React.FC<Properties> = ({ name, url, previewUrl }) => {
 
                 <IconButton
                     size="xs"
-                    aria-label={url ? 'Play video' : 'Edit video'}
+                    aria-label={'Edit template'}
                     _groupHover={{ opacity: 1 }}
                     onClick={handleIconClick}
                     className={styles['play-button']}
-                    icon={
-                        <Icon
-                            as={url ? IconName.PLAY : IconName.PEN}
-                            color="background.600"
-                        />
-                    }
+                    icon={<Icon as={IconName.PEN} color="background.600" />}
                 />
             </Box>
 
@@ -87,14 +84,6 @@ const TemplateCard: React.FC<Properties> = ({ name, url, previewUrl }) => {
                 Advertisement
             </Badge>
 
-            {url && (
-                <PlayerModal
-                    videoUrl={url}
-                    isOpen={isVideoModalOpen}
-                    onClose={handleVideoModalClose}
-                />
-            )}
-
             <DeleteWarning
                 isOpen={isWarningModalOpen}
                 onClose={handleWarningModalClose}
diff --git a/frontend/src/bundles/template/components/templates-section/templates-section.tsx b/frontend/src/bundles/template/components/templates-section/templates-section.tsx
index c9b6c3801..a19604e39 100644
--- a/frontend/src/bundles/template/components/templates-section/templates-section.tsx
+++ b/frontend/src/bundles/template/components/templates-section/templates-section.tsx
@@ -17,23 +17,16 @@ import {
     useState,
 } from '~/bundles/common/hooks/hooks.js';
 import { IconName } from '~/bundles/common/icons/icons.js';
+import { type Template } from '~/bundles/template/types/types.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__',
-    },
-];
+type Properties = {
+    templates: Template[];
+};
 
-const TemplatesSection: React.FC = () => {
+const TemplatesSection: React.FC<Properties> = ({ templates }) => {
     const [selectedFormat, setSelectedFormat] = useState<
         'landscape' | 'portrait' | null
     >(null);
@@ -122,7 +115,7 @@ const TemplatesSection: React.FC = () => {
             </Flex>
             <SimpleGrid columns={{ sm: 2, md: 3, lg: 4 }} spacing="20px">
                 {templates.map(({ id, ...template }) => (
-                    <TemplateCard key={id} {...template} />
+                    <TemplateCard key={id} {...template} id={id} />
                 ))}
             </SimpleGrid>
         </Box>
diff --git a/frontend/src/bundles/template/pages/templates.tsx b/frontend/src/bundles/template/pages/templates.tsx
index 9e326cb35..4a52c8739 100644
--- a/frontend/src/bundles/template/pages/templates.tsx
+++ b/frontend/src/bundles/template/pages/templates.tsx
@@ -4,13 +4,24 @@ import {
     Flex,
     Header,
     Icon,
+    Loader,
+    Overlay,
     Sidebar,
     Text,
 } from '~/bundles/common/components/components.js';
 import { useCollapse } from '~/bundles/common/components/sidebar/hooks/use-collapse.hook.js';
+import { EMPTY_VALUE } from '~/bundles/common/constants/constants.js';
+import { DataStatus } from '~/bundles/common/enums/data-status.enum.js';
 import { AppRoute } from '~/bundles/common/enums/enums.js';
-import { useCallback, useNavigate } from '~/bundles/common/hooks/hooks.js';
+import {
+    useAppDispatch,
+    useAppSelector,
+    useCallback,
+    useEffect,
+    useNavigate,
+} from '~/bundles/common/hooks/hooks.js';
 import { IconName } from '~/bundles/common/icons/icons.js';
+import { actions as studioActions } from '~/bundles/studio/store/studio.js';
 import {
     CreationsSection,
     TemplatesSection,
@@ -19,9 +30,21 @@ import {
 import styles from './styles.module.css';
 
 const Templates: React.FC = () => {
-    const { isCollapsed } = useCollapse();
-
     const navigate = useNavigate();
+    const dispatch = useAppDispatch();
+
+    const { templates, dataStatus } = useAppSelector(({ studio }) => studio);
+
+    useEffect(() => {
+        if (templates.public.length === EMPTY_VALUE) {
+            void dispatch(studioActions.loadPublicTemplates());
+        }
+        if (!templates.isUserLoaded) {
+            void dispatch(studioActions.loadUserTemplates());
+        }
+    }, [dispatch, templates]);
+
+    const { isCollapsed } = useCollapse();
 
     const handleClick = useCallback(() => {
         navigate(AppRoute.STUDIO);
@@ -29,6 +52,10 @@ const Templates: React.FC = () => {
 
     return (
         <Box bg="background.900" minHeight="100vh">
+            <Overlay isOpen={dataStatus === DataStatus.PENDING}>
+                <Loader />
+            </Overlay>
+
             <Header />
             <Sidebar>
                 <Box
@@ -56,8 +83,11 @@ const Templates: React.FC = () => {
                             ></Button>
                         </Flex>
 
-                        <CreationsSection onClick={handleClick} />
-                        <TemplatesSection />
+                        <CreationsSection
+                            templates={templates.user}
+                            onClick={handleClick}
+                        />
+                        <TemplatesSection templates={templates.public} />
                     </Flex>
                 </Box>
             </Sidebar>
diff --git a/frontend/src/bundles/template/types/template.type.ts b/frontend/src/bundles/template/types/template.type.ts
index 5bf45cdc3..bc3f2eca2 100644
--- a/frontend/src/bundles/template/types/template.type.ts
+++ b/frontend/src/bundles/template/types/template.type.ts
@@ -1,8 +1 @@
-type Template = {
-    id: string;
-    name: string;
-    url: string | null;
-    previewUrl: string;
-};
-
-export { type Template };
+export { type Template } from 'shared';
diff --git a/frontend/src/framework/store/store.package.ts b/frontend/src/framework/store/store.package.ts
index 33e2f8f29..8b8ef4504 100644
--- a/frontend/src/framework/store/store.package.ts
+++ b/frontend/src/framework/store/store.package.ts
@@ -21,6 +21,7 @@ import {
     avatarsApi,
     avatarVideosApi,
     speechApi,
+    templatesApi,
 } from '~/bundles/studio/studio.js';
 import { userApi } from '~/bundles/users/users.js';
 import { type Config } from '~/framework/config/config.js';
@@ -41,6 +42,7 @@ type ExtraArguments = {
     speechApi: typeof speechApi;
     avatarVideosApi: typeof avatarVideosApi;
     chatApi: typeof chatApi;
+    templatesApi: typeof templatesApi;
     storage: typeof storage;
 };
 
@@ -86,6 +88,7 @@ class Store {
             speechApi,
             avatarVideosApi,
             chatApi,
+            templatesApi,
             storage,
         };
     }
diff --git a/shared/src/bundles/templates/enums/enums.ts b/shared/src/bundles/templates/enums/enums.ts
index 3aecae376..79e9ce080 100644
--- a/shared/src/bundles/templates/enums/enums.ts
+++ b/shared/src/bundles/templates/enums/enums.ts
@@ -1 +1,2 @@
 export { TemplateValidationErrorMessage } from './template-validation-error-message.enum.js';
+export { TemplateApiPath } from './templates-api-path.enum.js';
diff --git a/backend/src/bundles/templates/enums/templates-api-path.enum.ts b/shared/src/bundles/templates/enums/templates-api-path.enum.ts
similarity index 61%
rename from backend/src/bundles/templates/enums/templates-api-path.enum.ts
rename to shared/src/bundles/templates/enums/templates-api-path.enum.ts
index 7b12bd25a..f3af6a0de 100644
--- a/backend/src/bundles/templates/enums/templates-api-path.enum.ts
+++ b/shared/src/bundles/templates/enums/templates-api-path.enum.ts
@@ -1,8 +1,8 @@
-const templateApiPath = {
+const TemplateApiPath = {
     ROOT: '/',
     ID: '/:id',
     PUBLIC: '/public',
     USER: '/user',
 } as const;
 
-export { templateApiPath };
+export { TemplateApiPath };
diff --git a/shared/src/bundles/templates/templates.ts b/shared/src/bundles/templates/templates.ts
index 8e2c4700e..65fd81cad 100644
--- a/shared/src/bundles/templates/templates.ts
+++ b/shared/src/bundles/templates/templates.ts
@@ -1,4 +1,7 @@
-export { TemplateValidationErrorMessage } from './enums/enums.js';
+export {
+    TemplateApiPath,
+    TemplateValidationErrorMessage,
+} from './enums/enums.js';
 export {
     type CreateTemplateRequestDto,
     type CreateTemplateResponseDto,
diff --git a/shared/src/index.ts b/shared/src/index.ts
index 24275cd53..93e97cb1f 100644
--- a/shared/src/index.ts
+++ b/shared/src/index.ts
@@ -57,6 +57,7 @@ export {
     type Template,
     type UpdateTemplateRequestDto,
     createTemplateValidationSchema,
+    TemplateApiPath,
     TemplateValidationErrorMessage,
     updateTemplateValidationSchema,
 } from './bundles/templates/templates.js';