diff --git a/src/backend/core/api/serializers.py b/src/backend/core/api/serializers.py
index e6b9b99a9..a947702fd 100644
--- a/src/backend/core/api/serializers.py
+++ b/src/backend/core/api/serializers.py
@@ -145,9 +145,19 @@ class TemplateSerializer(BaseResourceSerializer):
 
     class Meta:
         model = models.Template
-        fields = ["id", "title", "accesses", "abilities"]
+        fields = ["id", "title", "code_editor", "accesses", "abilities", "css", "code"]
         read_only_fields = ["id", "accesses", "abilities"]
 
+    def to_representation(self, instance):
+        """
+        Modify the output of serialization.
+        """
+        representation = super().to_representation(instance)
+        # Remove 'css' and 'code' from the representation
+        representation.pop("css", None)
+        representation.pop("code", None)
+        return representation
+
 
 # pylint: disable=abstract-method
 class DocumentGenerationSerializer(serializers.Serializer):
diff --git a/src/backend/core/migrations/0001_initial.py b/src/backend/core/migrations/0001_initial.py
index c7a572dda..4044bf772 100644
--- a/src/backend/core/migrations/0001_initial.py
+++ b/src/backend/core/migrations/0001_initial.py
@@ -42,6 +42,7 @@ class Migration(migrations.Migration):
                 ('updated_at', models.DateTimeField(auto_now=True, help_text='date and time at which a record was last updated', verbose_name='updated on')),
                 ('title', models.CharField(max_length=255, verbose_name='title')),
                 ('description', models.TextField(blank=True, verbose_name='description')),
+                ('code_editor', models.JSONField(blank=True, default=dict, help_text='A JSON object with all the editor information', verbose_name='code editor')),
                 ('code', models.TextField(blank=True, verbose_name='code')),
                 ('css', models.TextField(blank=True, verbose_name='css')),
                 ('is_public', models.BooleanField(default=False, help_text='Whether this template is public for anyone to use.', verbose_name='public')),
diff --git a/src/backend/core/models.py b/src/backend/core/models.py
index 887a2d551..6711668cc 100644
--- a/src/backend/core/models.py
+++ b/src/backend/core/models.py
@@ -272,6 +272,7 @@ def get_abilities(self, user):
             "destroy": RoleChoices.OWNER in roles,
             "manage_accesses": is_owner_or_admin,
             "update": is_owner_or_admin,
+            "partial_update": is_owner_or_admin,
             "retrieve": can_get,
         }
 
@@ -326,6 +327,12 @@ class Template(BaseModel):
 
     title = models.CharField(_("title"), max_length=255)
     description = models.TextField(_("description"), blank=True)
+    code_editor = models.JSONField(
+        _("code editor"),
+        help_text=_("A JSON object with all the editor information"),
+        blank=True,
+        default=dict,
+    )
     code = models.TextField(_("code"), blank=True)
     css = models.TextField(_("css"), blank=True)
     is_public = models.BooleanField(
@@ -358,6 +365,7 @@ def get_abilities(self, user):
             "generate_document": can_get,
             "manage_accesses": is_owner_or_admin,
             "update": is_owner_or_admin,
+            "partial_update": is_owner_or_admin,
             "retrieve": can_get,
         }
 
diff --git a/src/backend/core/tests/documents/test_api_documents_retrieve.py b/src/backend/core/tests/documents/test_api_documents_retrieve.py
index 078945db4..1cbafb3f5 100644
--- a/src/backend/core/tests/documents/test_api_documents_retrieve.py
+++ b/src/backend/core/tests/documents/test_api_documents_retrieve.py
@@ -21,6 +21,7 @@ def test_api_documents_retrieve_anonymous_public():
         "abilities": {
             "destroy": False,
             "manage_accesses": False,
+            "partial_update": False,
             "retrieve": True,
             "update": False,
         },
@@ -60,6 +61,7 @@ def test_api_documents_retrieve_authenticated_unrelated_public():
         "abilities": {
             "destroy": False,
             "manage_accesses": False,
+            "partial_update": False,
             "retrieve": True,
             "update": False,
         },
diff --git a/src/backend/core/tests/templates/test_api_templates_retrieve.py b/src/backend/core/tests/templates/test_api_templates_retrieve.py
index 8ed186dd4..8a298ddba 100644
--- a/src/backend/core/tests/templates/test_api_templates_retrieve.py
+++ b/src/backend/core/tests/templates/test_api_templates_retrieve.py
@@ -22,11 +22,13 @@ def test_api_templates_retrieve_anonymous_public():
             "destroy": False,
             "generate_document": True,
             "manage_accesses": False,
+            "partial_update": False,
             "retrieve": True,
             "update": False,
         },
         "accesses": [],
         "title": template.title,
+        "code_editor": {},
     }
 
 
@@ -62,11 +64,13 @@ def test_api_templates_retrieve_authenticated_unrelated_public():
             "destroy": False,
             "generate_document": True,
             "manage_accesses": False,
+            "partial_update": False,
             "retrieve": True,
             "update": False,
         },
         "accesses": [],
         "title": template.title,
+        "code_editor": {},
     }
 
 
@@ -131,6 +135,7 @@ def test_api_templates_retrieve_authenticated_related_direct():
         "id": str(template.id),
         "title": template.title,
         "abilities": template.get_abilities(user),
+        "code_editor": {},
     }
 
 
@@ -244,6 +249,7 @@ def test_api_templates_retrieve_authenticated_related_team_members(
         "id": str(template.id),
         "title": template.title,
         "abilities": template.get_abilities(user),
+        "code_editor": {},
     }
 
 
@@ -339,6 +345,7 @@ def test_api_templates_retrieve_authenticated_related_team_administrators(
         "id": str(template.id),
         "title": template.title,
         "abilities": template.get_abilities(user),
+        "code_editor": {},
     }
 
 
@@ -438,4 +445,5 @@ def test_api_templates_retrieve_authenticated_related_team_owners(
         "id": str(template.id),
         "title": template.title,
         "abilities": template.get_abilities(user),
+        "code_editor": {},
     }
diff --git a/src/backend/core/tests/test_models_documents.py b/src/backend/core/tests/test_models_documents.py
index 3544d4a0c..b4c1f5543 100644
--- a/src/backend/core/tests/test_models_documents.py
+++ b/src/backend/core/tests/test_models_documents.py
@@ -58,6 +58,7 @@ def test_models_documents_get_abilities_anonymous_public():
         "retrieve": True,
         "update": False,
         "manage_accesses": False,
+        "partial_update": False,
     }
 
 
@@ -70,6 +71,7 @@ def test_models_documents_get_abilities_anonymous_not_public():
         "retrieve": False,
         "update": False,
         "manage_accesses": False,
+        "partial_update": False,
     }
 
 
@@ -82,6 +84,7 @@ def test_models_documents_get_abilities_authenticated_public():
         "retrieve": True,
         "update": False,
         "manage_accesses": False,
+        "partial_update": False,
     }
 
 
@@ -94,6 +97,7 @@ def test_models_documents_get_abilities_authenticated_not_public():
         "retrieve": False,
         "update": False,
         "manage_accesses": False,
+        "partial_update": False,
     }
 
 
@@ -107,6 +111,7 @@ def test_models_documents_get_abilities_owner():
         "retrieve": True,
         "update": True,
         "manage_accesses": True,
+        "partial_update": True,
     }
 
 
@@ -119,6 +124,7 @@ def test_models_documents_get_abilities_administrator():
         "retrieve": True,
         "update": True,
         "manage_accesses": True,
+        "partial_update": True,
     }
 
 
@@ -134,6 +140,7 @@ def test_models_documents_get_abilities_member_user(django_assert_num_queries):
         "retrieve": True,
         "update": False,
         "manage_accesses": False,
+        "partial_update": False,
     }
 
 
@@ -150,4 +157,5 @@ def test_models_documents_get_abilities_preset_role(django_assert_num_queries):
         "retrieve": True,
         "update": False,
         "manage_accesses": False,
+        "partial_update": False,
     }
diff --git a/src/backend/core/tests/test_models_templates.py b/src/backend/core/tests/test_models_templates.py
index dc295bc71..87d9f8d23 100644
--- a/src/backend/core/tests/test_models_templates.py
+++ b/src/backend/core/tests/test_models_templates.py
@@ -58,6 +58,7 @@ def test_models_templates_get_abilities_anonymous_public():
         "retrieve": True,
         "update": False,
         "manage_accesses": False,
+        "partial_update": False,
         "generate_document": True,
     }
 
@@ -71,6 +72,7 @@ def test_models_templates_get_abilities_anonymous_not_public():
         "retrieve": False,
         "update": False,
         "manage_accesses": False,
+        "partial_update": False,
         "generate_document": False,
     }
 
@@ -84,6 +86,7 @@ def test_models_templates_get_abilities_authenticated_public():
         "retrieve": True,
         "update": False,
         "manage_accesses": False,
+        "partial_update": False,
         "generate_document": True,
     }
 
@@ -97,6 +100,7 @@ def test_models_templates_get_abilities_authenticated_not_public():
         "retrieve": False,
         "update": False,
         "manage_accesses": False,
+        "partial_update": False,
         "generate_document": False,
     }
 
@@ -111,6 +115,7 @@ def test_models_templates_get_abilities_owner():
         "retrieve": True,
         "update": True,
         "manage_accesses": True,
+        "partial_update": True,
         "generate_document": True,
     }
 
@@ -124,6 +129,7 @@ def test_models_templates_get_abilities_administrator():
         "retrieve": True,
         "update": True,
         "manage_accesses": True,
+        "partial_update": True,
         "generate_document": True,
     }
 
@@ -140,6 +146,7 @@ def test_models_templates_get_abilities_member_user(django_assert_num_queries):
         "retrieve": True,
         "update": False,
         "manage_accesses": False,
+        "partial_update": False,
         "generate_document": True,
     }
 
@@ -157,5 +164,12 @@ def test_models_templates_get_abilities_preset_role(django_assert_num_queries):
         "retrieve": True,
         "update": False,
         "manage_accesses": False,
+        "partial_update": False,
         "generate_document": True,
     }
+
+
+def test_models_templates_get_code_editor():
+    """Check code_editor in the template model"""
+    template = factories.TemplateFactory(code_editor={"test": "ok"})
+    assert template.code_editor == {"test": "ok"}
diff --git a/src/frontend/apps/e2e/__tests__/app-impress/common.ts b/src/frontend/apps/e2e/__tests__/app-impress/common.ts
index 542638ccf..0aea93c5e 100644
--- a/src/frontend/apps/e2e/__tests__/app-impress/common.ts
+++ b/src/frontend/apps/e2e/__tests__/app-impress/common.ts
@@ -45,6 +45,35 @@ export const createPad = async (
   return randomPads;
 };
 
+export const createTemplate = async (
+  page: Page,
+  templateName: string,
+  browserName: string,
+  length: number,
+) => {
+  const menu = page.locator('menu').first();
+  await menu.getByLabel(`Template button`).click();
+
+  const panel = page.getByLabel('Templates panel').first();
+  const buttonCreate = page.getByRole('button', {
+    name: 'Create the template',
+  });
+
+  const randomTemplates = randomName(templateName, browserName, length);
+
+  for (let i = 0; i < randomTemplates.length; i++) {
+    await panel.getByRole('button', { name: 'Add a template' }).click();
+    await page.getByText('Template name').fill(randomTemplates[i]);
+    await expect(buttonCreate).toBeEnabled();
+    await buttonCreate.click();
+    await expect(
+      panel.locator('li').getByText(randomTemplates[i]),
+    ).toBeVisible();
+  }
+
+  return randomTemplates;
+};
+
 export const addNewMember = async (
   page: Page,
   index: number,
diff --git a/src/frontend/apps/e2e/__tests__/app-impress/menu.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/menu.spec.ts
index 4bd738521..1eafa55a3 100644
--- a/src/frontend/apps/e2e/__tests__/app-impress/menu.spec.ts
+++ b/src/frontend/apps/e2e/__tests__/app-impress/menu.spec.ts
@@ -10,6 +10,7 @@ test.beforeEach(async ({ page, browserName }) => {
 test.describe('Menu', () => {
   const menuItems = [
     { name: 'Search', isDefault: true },
+    { name: 'Template', isDefault: false },
     { name: 'Favorite', isDefault: false },
     { name: 'Recent', isDefault: false },
     { name: 'Contacts', isDefault: false },
diff --git a/src/frontend/apps/e2e/__tests__/app-impress/pad-editor.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/pad-editor.spec.ts
index e2bd07e5b..fa3d31e88 100644
--- a/src/frontend/apps/e2e/__tests__/app-impress/pad-editor.spec.ts
+++ b/src/frontend/apps/e2e/__tests__/app-impress/pad-editor.spec.ts
@@ -94,11 +94,7 @@ test.describe('Pad Editor', () => {
     await expect(page.getByText('[test markdown]')).toBeVisible();
 
     await page.getByText('[test markdown]').dblclick();
-    await page
-      .getByRole('button', {
-        name: 'M',
-      })
-      .click();
+    await page.locator('button[data-test="convertMarkdown"]').click();
 
     await expect(page.getByText('[test markdown]')).toBeHidden();
     await expect(
diff --git a/src/frontend/apps/e2e/__tests__/app-impress/template-editor.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/template-editor.spec.ts
new file mode 100644
index 000000000..da0fed690
--- /dev/null
+++ b/src/frontend/apps/e2e/__tests__/app-impress/template-editor.spec.ts
@@ -0,0 +1,139 @@
+import { expect, test } from '@playwright/test';
+
+import { createTemplate, keyCloakSignIn } from './common';
+
+test.beforeEach(async ({ page, browserName }) => {
+  await page.goto('/');
+  await keyCloakSignIn(page, browserName);
+});
+
+test.describe('Template Editor', () => {
+  test('checks the template editor interact correctly', async ({
+    page,
+    browserName,
+  }) => {
+    const randomTemplate = await createTemplate(
+      page,
+      'template-editor',
+      browserName,
+      1,
+    );
+
+    await expect(page.locator('h2').getByText(randomTemplate[0])).toBeVisible();
+
+    await page.getByTitle('Open Blocks').click();
+    await expect(
+      page.locator('.gjs-editor .gjs-block[title="Text"]'),
+    ).toBeVisible();
+  });
+
+  test('checks the template editor save on changed', async ({
+    page,
+    browserName,
+  }) => {
+    // eslint-disable-next-line playwright/no-skipped-test
+    test.skip(
+      browserName !== 'chromium',
+      'This test failed with safary because of the dragNdrop',
+    );
+
+    const randomTemplate = await createTemplate(
+      page,
+      'template-editor',
+      browserName,
+      1,
+    );
+
+    await expect(page.locator('h2').getByText(randomTemplate[0])).toBeVisible();
+
+    const iframe = page.frameLocator('iFrame.gjs-frame');
+
+    await page.getByTitle('Open Blocks').click();
+    await page
+      .locator('.gjs-editor .gjs-block[title="Text"]')
+      .dragTo(iframe.locator('body.gjs-dashed'));
+
+    await iframe.getByText('Insert your text here').fill('Hello World');
+    await iframe.locator('body.gjs-dashed').click();
+
+    // Come on the page again to check the changes are saved
+    await page.locator('menu').first().getByLabel(`Template button`).click();
+    const panel = page.getByLabel('Templates panel').first();
+    await panel.locator('li').getByText(randomTemplate[0]).click();
+
+    await expect(iframe.getByText('Hello World')).toBeVisible({
+      timeout: 5000,
+    });
+  });
+
+  test('it saves the html generated by the template', async ({
+    page,
+    browserName,
+  }) => {
+    // eslint-disable-next-line playwright/no-skipped-test
+    test.skip(
+      browserName !== 'chromium',
+      'This test failed with safary because of the dragNdrop',
+    );
+
+    const randomTemplate = await createTemplate(
+      page,
+      'template-html',
+      browserName,
+      1,
+    );
+
+    await expect(page.locator('h2').getByText(randomTemplate[0])).toBeVisible();
+
+    const iframe = page.frameLocator('iFrame.gjs-frame');
+
+    await page.getByTitle('Open Blocks').click();
+    await page
+      .locator('.gjs-editor .gjs-block[title="Text"]')
+      .dragTo(iframe.locator('body.gjs-dashed'));
+
+    await iframe.getByText('Insert your text here').fill('Hello World');
+    await iframe.locator('body.gjs-dashed').click();
+
+    await page.getByText('Save template').click();
+    await expect(page.getByText('Template save successfully')).toBeVisible();
+  });
+
+  test('it shows a warning if body tag not present', async ({
+    page,
+    browserName,
+  }) => {
+    // eslint-disable-next-line playwright/no-skipped-test
+    test.skip(
+      browserName !== 'chromium',
+      'This test failed with safary because of the dragNdrop',
+    );
+
+    const randomTemplate = await createTemplate(
+      page,
+      'template-html',
+      browserName,
+      1,
+    );
+
+    await expect(page.locator('h2').getByText(randomTemplate[0])).toBeVisible();
+
+    await expect(
+      page.getByText('The {{body}} tag is necessary to works with the pads.'),
+    ).toBeVisible();
+
+    const iframe = page.frameLocator('iFrame.gjs-frame');
+
+    await page.getByTitle('Open Blocks').click();
+    await page
+      .locator('.gjs-editor .gjs-block[title="Text"]')
+      .dragTo(iframe.locator('body.gjs-dashed'));
+
+    await iframe.getByText('Insert your text here').fill('{{body}}');
+    await iframe.locator('body.gjs-dashed').click();
+
+    await expect(
+      page.getByText('The {{body}} tag is necessary to works with the pads.'),
+    ).toBeHidden();
+  });
+});
diff --git a/src/frontend/apps/impress/package.json b/src/frontend/apps/impress/package.json
index a8d9eb9d5..70951af3a 100644
--- a/src/frontend/apps/impress/package.json
+++ b/src/frontend/apps/impress/package.json
@@ -19,6 +19,7 @@
     "@blocknote/react": "0.12.4",
     "@openfun/cunningham-react": "2.7.0",
     "@tanstack/react-query": "5.28.14",
+    "grapesjs-blocks-basic": "1.0.2",
     "i18next": "23.10.1",
     "lodash": "4.17.21",
     "luxon": "3.4.4",
@@ -34,6 +35,7 @@
     "zustand": "4.5.2"
   },
   "devDependencies": {
+    "@grapesjs/react": "1.0.0",
     "@svgr/webpack": "8.1.0",
     "@tanstack/react-query-devtools": "5.28.14",
     "@testing-library/jest-dom": "6.4.2",
@@ -48,6 +50,7 @@
     "dotenv": "16.4.5",
     "eslint-config-impress": "*",
     "fetch-mock": "9.11.0",
+    "grapesjs": "0.21.10",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "node-fetch": "2.7.0",
diff --git a/src/frontend/apps/impress/src/components/Box.tsx b/src/frontend/apps/impress/src/components/Box.tsx
index dd82c5f7c..7d8b0e952 100644
--- a/src/frontend/apps/impress/src/components/Box.tsx
+++ b/src/frontend/apps/impress/src/components/Box.tsx
@@ -2,6 +2,8 @@ import { ComponentPropsWithRef, ReactHTML } from 'react';
 import styled from 'styled-components';
 import { CSSProperties } from 'styled-components/dist/types';
 
+import { hideEffect, showEffect } from './Effect';
+
 export interface BoxProps {
   as?: keyof ReactHTML;
   $align?: CSSProperties['alignItems'];
@@ -10,6 +12,7 @@ export interface BoxProps {
   $css?: string;
   $direction?: CSSProperties['flexDirection'];
   $display?: CSSProperties['display'];
+  $effect?: 'show' | 'hide';
   $flex?: boolean;
   $gap?: CSSProperties['gap'];
   $height?: CSSProperties['height'];
@@ -43,4 +46,12 @@ export const Box = styled('div')<BoxProps>`
   ${({ $maxWidth }) => $maxWidth && `max-width: ${$maxWidth};`}
   ${({ $minWidth }) => $minWidth && `min-width: ${$minWidth};`}
   ${({ $css }) => $css && `${$css};`}
+  ${({ $effect }) => {
+    switch ($effect) {
+      case 'show':
+        return showEffect;
+      case 'hide':
+        return hideEffect;
+    }
+  }}
 `;
diff --git a/src/frontend/apps/impress/src/components/Effect.tsx b/src/frontend/apps/impress/src/components/Effect.tsx
new file mode 100644
index 000000000..40983550b
--- /dev/null
+++ b/src/frontend/apps/impress/src/components/Effect.tsx
@@ -0,0 +1,20 @@
+import { css, keyframes } from 'styled-components';
+
+const show = keyframes`
+ 0% { transform: scaleY(0); opacity: 0; max-height: 0; }
+ 100% { transform: scaleY(1); opacity: 1; max-height: 150px;}
+`;
+
+const hide = keyframes`
+ 0% { transform: scaleY(1); opacity: 1; max-height: 150px;}
+ 100% { display:none; transform: scaleY(0); opacity: 0; max-height: 0;  }
+`;
+
+export const showEffect = css`
+  animation: ${show} 0.3s ease-in-out;
+`;
+
+export const hideEffect = css`
+  animation: ${hide} 0.3s ease-in-out;
+  animation-fill-mode: forwards;
+`;
diff --git a/src/frontend/apps/impress/src/features/menu/Menu.tsx b/src/frontend/apps/impress/src/features/menu/Menu.tsx
index 79f1eda54..571c73045 100644
--- a/src/frontend/apps/impress/src/features/menu/Menu.tsx
+++ b/src/frontend/apps/impress/src/features/menu/Menu.tsx
@@ -10,6 +10,7 @@ import IconRecent from './assets/icon-clock.svg';
 import IconContacts from './assets/icon-contacts.svg';
 import IconSearch from './assets/icon-search.svg';
 import IconFavorite from './assets/icon-stars.svg';
+import IconTemplate from './assets/icon-template.svg';
 
 export const Menu = () => {
   const { colorsTokens } = useCunninghamTheme();
@@ -25,6 +26,7 @@ export const Menu = () => {
     >
       <Box className="pt-l" $direction="column" $gap="0.8rem">
         <MenuItem Icon={IconSearch} label={t('Search')} href="/" />
+        <MenuItem Icon={IconTemplate} label={t('Template')} href="/templates" />
         <MenuItem Icon={IconFavorite} label={t('Favorite')} href="/favorite" />
         <MenuItem Icon={IconRecent} label={t('Recent')} href="/recent" />
         <MenuItem Icon={IconContacts} label={t('Contacts')} href="/contacts" />
diff --git a/src/frontend/apps/impress/src/features/menu/assets/icon-template.svg b/src/frontend/apps/impress/src/features/menu/assets/icon-template.svg
new file mode 100644
index 000000000..1871d9c40
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/menu/assets/icon-template.svg
@@ -0,0 +1,6 @@
+<svg viewBox="0 0 23 24">
+  <path
+    fill="currentColor"
+    d="M2 20h4V4H2v16Zm-1 0V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1ZM17 20h4V4h-4v16Zm-1 0V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1ZM9.5 20h4V4h-4v16Zm-1 0V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1Z"
+  ></path>
+</svg>
diff --git a/src/frontend/apps/impress/src/features/templates/index.ts b/src/frontend/apps/impress/src/features/templates/index.ts
new file mode 100644
index 000000000..2abeb7e5b
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/templates/index.ts
@@ -0,0 +1,3 @@
+export * from './template';
+export * from './template-create';
+export * from './template-panel';
diff --git a/src/frontend/apps/impress/src/features/templates/template-create/api/useCreateTemplate.tsx b/src/frontend/apps/impress/src/features/templates/template-create/api/useCreateTemplate.tsx
new file mode 100644
index 000000000..a4da27411
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/templates/template-create/api/useCreateTemplate.tsx
@@ -0,0 +1,46 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { APIError, errorCauses, fetchAPI } from '@/api';
+import { KEY_LIST_TEMPLATE } from '@/features/templates';
+
+type CreateTemplateResponse = {
+  id: string;
+  title: string;
+};
+
+export const createTemplate = async (
+  title: string,
+): Promise<CreateTemplateResponse> => {
+  const response = await fetchAPI(`templates/`, {
+    method: 'POST',
+    body: JSON.stringify({
+      title,
+    }),
+  });
+
+  if (!response.ok) {
+    throw new APIError(
+      'Failed to create the template',
+      await errorCauses(response),
+    );
+  }
+
+  return response.json() as Promise<CreateTemplateResponse>;
+};
+
+interface CreateTemplateProps {
+  onSuccess: (data: CreateTemplateResponse) => void;
+}
+
+export function useCreateTemplate({ onSuccess }: CreateTemplateProps) {
+  const queryClient = useQueryClient();
+  return useMutation<CreateTemplateResponse, APIError, string>({
+    mutationFn: createTemplate,
+    onSuccess: (data) => {
+      void queryClient.invalidateQueries({
+        queryKey: [KEY_LIST_TEMPLATE],
+      });
+      onSuccess(data);
+    },
+  });
+}
diff --git a/src/frontend/apps/impress/src/features/templates/template-create/components/CardCreateTemplate.tsx b/src/frontend/apps/impress/src/features/templates/template-create/components/CardCreateTemplate.tsx
new file mode 100644
index 000000000..7599ff663
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/templates/template-create/components/CardCreateTemplate.tsx
@@ -0,0 +1,69 @@
+import { Button } from '@openfun/cunningham-react';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import IconGroup from '@/assets/icons/icon-group2.svg';
+import { Box, Card, StyledLink, Text } from '@/components';
+import { useCunninghamTheme } from '@/cunningham';
+
+import { useCreateTemplate } from '../api/useCreateTemplate';
+
+import { InputTemplateName } from './InputTemplateName';
+
+export const CardCreateTemplate = () => {
+  const { t } = useTranslation();
+  const router = useRouter();
+  const {
+    mutate: createTemplate,
+    isError,
+    isPending,
+    error,
+  } = useCreateTemplate({
+    onSuccess: (pad) => {
+      router.push(`/templates/${pad.id}`);
+    },
+  });
+  const [templateName, setTemplateName] = useState('');
+  const { colorsTokens } = useCunninghamTheme();
+
+  return (
+    <Card
+      className="p-b"
+      $height="70%"
+      $justify="space-between"
+      $width="100%"
+      $maxWidth="24rem"
+      $minWidth="22rem"
+      aria-label={t('Create new template card')}
+    >
+      <Box $gap="1rem">
+        <Box $align="center">
+          <IconGroup
+            width={44}
+            color={colorsTokens()['primary-text']}
+            aria-label={t('icon group')}
+          />
+          <Text as="h3" $textAlign="center">
+            {t('Name the template')}
+          </Text>
+        </Box>
+        <InputTemplateName
+          label={t('Template name')}
+          {...{ error, isError, isPending, setTemplateName }}
+        />
+      </Box>
+      <Box $justify="space-between" $direction="row" $align="center">
+        <StyledLink href="/">
+          <Button color="secondary">{t('Cancel')}</Button>
+        </StyledLink>
+        <Button
+          onClick={() => createTemplate(templateName)}
+          disabled={!templateName}
+        >
+          {t('Create the template')}
+        </Button>
+      </Box>
+    </Card>
+  );
+};
diff --git a/src/frontend/apps/impress/src/features/templates/template-create/components/InputTemplateName.tsx b/src/frontend/apps/impress/src/features/templates/template-create/components/InputTemplateName.tsx
new file mode 100644
index 000000000..71d80b382
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/templates/template-create/components/InputTemplateName.tsx
@@ -0,0 +1,54 @@
+import { Input, Loader } from '@openfun/cunningham-react';
+import { useEffect, useState } from 'react';
+
+import { APIError } from '@/api';
+import { Box, TextErrors } from '@/components';
+
+interface InputTemplateNameProps {
+  error: APIError | null;
+  isError: boolean;
+  isPending: boolean;
+  label: string;
+  setTemplateName: (newTemplateName: string) => void;
+  defaultValue?: string;
+}
+
+export const InputTemplateName = ({
+  defaultValue,
+  error,
+  isError,
+  isPending,
+  label,
+  setTemplateName,
+}: InputTemplateNameProps) => {
+  const [isInputError, setIsInputError] = useState(isError);
+
+  useEffect(() => {
+    if (isError) {
+      setIsInputError(true);
+    }
+  }, [isError]);
+
+  return (
+    <>
+      <Input
+        fullWidth
+        type="text"
+        label={label}
+        defaultValue={defaultValue}
+        onChange={(e) => {
+          setTemplateName(e.target.value);
+          setIsInputError(false);
+        }}
+        rightIcon={<span className="material-icons">edit</span>}
+        state={isInputError ? 'error' : 'default'}
+      />
+      {isError && error && <TextErrors causes={error.cause} />}
+      {isPending && (
+        <Box $align="center">
+          <Loader />
+        </Box>
+      )}
+    </>
+  );
+};
diff --git a/src/frontend/apps/impress/src/features/templates/template-create/components/index.ts b/src/frontend/apps/impress/src/features/templates/template-create/components/index.ts
new file mode 100644
index 000000000..8a738338c
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/templates/template-create/components/index.ts
@@ -0,0 +1 @@
+export * from './CardCreateTemplate';
diff --git a/src/frontend/apps/impress/src/features/templates/template-create/index.ts b/src/frontend/apps/impress/src/features/templates/template-create/index.ts
new file mode 100644
index 000000000..07635cbbc
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/templates/template-create/index.ts
@@ -0,0 +1 @@
+export * from './components';
diff --git a/src/frontend/apps/impress/src/features/templates/template-panel/__tests__/PanelTemplates.test.tsx b/src/frontend/apps/impress/src/features/templates/template-panel/__tests__/PanelTemplates.test.tsx
new file mode 100644
index 000000000..443449d1d
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/templates/template-panel/__tests__/PanelTemplates.test.tsx
@@ -0,0 +1,174 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import fetchMock from 'fetch-mock';
+
+import { AppWrapper } from '@/tests/utils';
+
+import { Panel } from '../components/Panel';
+import { TemplateList } from '../components/TemplateList';
+
+window.HTMLElement.prototype.scroll = function () {};
+
+jest.mock('next/router', () => ({
+  ...jest.requireActual('next/router'),
+  useRouter: () => ({
+    query: {},
+  }),
+}));
+
+describe('PanelTemplates', () => {
+  afterEach(() => {
+    fetchMock.restore();
+  });
+
+  it('renders with no template to display', async () => {
+    fetchMock.mock(`/api/templates/?page=1&ordering=-created_at`, {
+      count: 0,
+      results: [],
+    });
+
+    render(<TemplateList />, { wrapper: AppWrapper });
+
+    expect(screen.getByRole('status')).toBeInTheDocument();
+
+    expect(
+      await screen.findByText(
+        'Create your first template by clicking on the "Create a new template" button.',
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it('renders an empty template', async () => {
+    fetchMock.mock(`/api/templates/?page=1&ordering=-created_at`, {
+      count: 1,
+      results: [
+        {
+          id: '1',
+          name: 'Template 1',
+          accesses: [],
+        },
+      ],
+    });
+
+    render(<TemplateList />, { wrapper: AppWrapper });
+
+    expect(screen.getByRole('status')).toBeInTheDocument();
+
+    expect(
+      await screen.findByLabelText('Empty templates icon'),
+    ).toBeInTheDocument();
+  });
+
+  it('renders a template with only 1 member', async () => {
+    fetchMock.mock(`/api/templates/?page=1&ordering=-created_at`, {
+      count: 1,
+      results: [
+        {
+          id: '1',
+          name: 'Template 1',
+          accesses: [
+            {
+              id: '1',
+              role: 'owner',
+            },
+          ],
+        },
+      ],
+    });
+
+    render(<TemplateList />, { wrapper: AppWrapper });
+
+    expect(screen.getByRole('status')).toBeInTheDocument();
+
+    expect(
+      await screen.findByLabelText('Empty templates icon'),
+    ).toBeInTheDocument();
+  });
+
+  it('renders a non-empty template', async () => {
+    fetchMock.mock(`/api/templates/?page=1&ordering=-created_at`, {
+      count: 1,
+      results: [
+        {
+          id: '1',
+          name: 'Template 1',
+          accesses: [
+            {
+              id: '1',
+              role: 'admin',
+            },
+            {
+              id: '2',
+              role: 'member',
+            },
+          ],
+        },
+      ],
+    });
+
+    render(<TemplateList />, { wrapper: AppWrapper });
+
+    expect(screen.getByRole('status')).toBeInTheDocument();
+
+    expect(await screen.findByLabelText('Templates icon')).toBeInTheDocument();
+  });
+
+  it('renders the error', async () => {
+    fetchMock.mock(`/api/templates/?page=1&ordering=-created_at`, {
+      status: 500,
+    });
+
+    render(<TemplateList />, { wrapper: AppWrapper });
+
+    expect(screen.getByRole('status')).toBeInTheDocument();
+
+    expect(
+      await screen.findByText(
+        'Something bad happens, please refresh the page.',
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it('renders with template panel open', async () => {
+    fetchMock.mock(`/api/templates/?page=1&ordering=-created_at`, {
+      count: 1,
+      results: [],
+    });
+
+    render(<Panel />, { wrapper: AppWrapper });
+
+    expect(
+      screen.getByRole('button', { name: 'Close the templates panel' }),
+    ).toBeVisible();
+
+    expect(await screen.findByText('Recents')).toBeVisible();
+  });
+
+  it('closes and opens the template panel', async () => {
+    fetchMock.mock(`/api/templates/?page=1&ordering=-created_at`, {
+      count: 1,
+      results: [],
+    });
+
+    render(<Panel />, { wrapper: AppWrapper });
+
+    expect(await screen.findByText('Recents')).toBeVisible();
+
+    await userEvent.click(
+      screen.getByRole('button', {
+        name: 'Close the templates panel',
+      }),
+    );
+
+    expect(await screen.findByText('Recents')).not.toBeVisible();
+
+    await userEvent.click(
+      screen.getByRole('button', {
+        name: 'Open the templates panel',
+      }),
+    );
+
+    expect(await screen.findByText('Recents')).toBeVisible();
+  });
+});
diff --git a/src/frontend/apps/impress/src/features/templates/template-panel/api/index.ts b/src/frontend/apps/impress/src/features/templates/template-panel/api/index.ts
new file mode 100644
index 000000000..ba0d606e8
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/templates/template-panel/api/index.ts
@@ -0,0 +1 @@
+export * from './useTemplates';
diff --git a/src/frontend/apps/impress/src/features/templates/template-panel/api/useTemplates.tsx b/src/frontend/apps/impress/src/features/templates/template-panel/api/useTemplates.tsx
new file mode 100644
index 000000000..2f08036d0
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/templates/template-panel/api/useTemplates.tsx
@@ -0,0 +1,73 @@
+import {
+  DefinedInitialDataInfiniteOptions,
+  InfiniteData,
+  QueryKey,
+  useInfiniteQuery,
+} from '@tanstack/react-query';
+
+import { APIError, APIList, errorCauses, fetchAPI } from '@/api';
+import { Template } from '@/features/templates/template';
+
+export enum TemplatesOrdering {
+  BY_CREATED_ON = 'created_at',
+  BY_CREATED_ON_DESC = '-created_at',
+}
+
+export type TemplatesParams = {
+  ordering: TemplatesOrdering;
+};
+type TemplatesAPIParams = TemplatesParams & {
+  page: number;
+};
+
+type TemplatesResponse = APIList<Template>;
+
+export const getTemplates = async ({
+  ordering,
+  page,
+}: TemplatesAPIParams): Promise<TemplatesResponse> => {
+  const orderingQuery = ordering ? `&ordering=${ordering}` : '';
+  const response = await fetchAPI(`templates/?page=${page}${orderingQuery}`);
+
+  if (!response.ok) {
+    throw new APIError(
+      'Failed to get the templates',
+      await errorCauses(response),
+    );
+  }
+
+  return response.json() as Promise<TemplatesResponse>;
+};
+
+export const KEY_LIST_TEMPLATE = 'templates';
+
+export function useTemplates(
+  param: TemplatesParams,
+  queryConfig?: DefinedInitialDataInfiniteOptions<
+    TemplatesResponse,
+    APIError,
+    InfiniteData<TemplatesResponse>,
+    QueryKey,
+    number
+  >,
+) {
+  return useInfiniteQuery<
+    TemplatesResponse,
+    APIError,
+    InfiniteData<TemplatesResponse>,
+    QueryKey,
+    number
+  >({
+    initialPageParam: 1,
+    queryKey: [KEY_LIST_TEMPLATE, param],
+    queryFn: ({ pageParam }) =>
+      getTemplates({
+        ...param,
+        page: pageParam,
+      }),
+    getNextPageParam(lastPage, allPages) {
+      return lastPage.next ? allPages.length + 1 : undefined;
+    },
+    ...queryConfig,
+  });
+}
diff --git a/src/frontend/apps/impress/src/features/templates/template-panel/assets/icon-add.svg b/src/frontend/apps/impress/src/features/templates/template-panel/assets/icon-add.svg
new file mode 100644
index 000000000..a198da2b3
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/templates/template-panel/assets/icon-add.svg
@@ -0,0 +1,6 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M20.75 0.75H3.25C1.8625 0.75 0.75 1.875 0.75 3.25V20.75C0.75 22.125 1.8625 23.25 3.25 23.25H20.75C22.125 23.25 23.25 22.125 23.25 20.75V3.25C23.25 1.875 22.125 0.75 20.75 0.75ZM17 13.25H13.25V17C13.25 17.6875 12.6875 18.25 12 18.25C11.3125 18.25 10.75 17.6875 10.75 17V13.25H7C6.3125 13.25 5.75 12.6875 5.75 12C5.75 11.3125 6.3125 10.75 7 10.75H10.75V7C10.75 6.3125 11.3125 5.75 12 5.75C12.6875 5.75 13.25 6.3125 13.25 7V10.75H17C17.6875 10.75 18.25 11.3125 18.25 12C18.25 12.6875 17.6875 13.25 17 13.25Z"
+    fill="currentColor"
+  />
+</svg>
diff --git a/src/frontend/apps/impress/src/features/templates/template-panel/assets/icon-none.svg b/src/frontend/apps/impress/src/features/templates/template-panel/assets/icon-none.svg
new file mode 100644
index 000000000..9f80850e6
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/templates/template-panel/assets/icon-none.svg
@@ -0,0 +1,13 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_508_5524)">
+    <path
+      d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM4 12C4 7.58 7.58 4 12 4C13.85 4 15.55 4.63 16.9 5.69L5.69 16.9C4.63 15.55 4 13.85 4 12ZM12 20C10.15 20 8.45 19.37 7.1 18.31L18.31 7.1C19.37 8.45 20 10.15 20 12C20 16.42 16.42 20 12 20Z"
+      fill="currentColor"
+    />
+  </g>
+  <defs>
+    <clipPath id="clip0_508_5524">
+      <rect width="24" height="24" fill="white" />
+    </clipPath>
+  </defs>
+</svg>
diff --git a/src/frontend/apps/impress/src/features/templates/template-panel/assets/icon-open-close.svg b/src/frontend/apps/impress/src/features/templates/template-panel/assets/icon-open-close.svg
new file mode 100644
index 000000000..b894e4955
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/templates/template-panel/assets/icon-open-close.svg
@@ -0,0 +1,14 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle
+    cx="12"
+    cy="12"
+    r="11.5"
+    transform="rotate(-180 12 12)"
+    fill="white"
+    stroke="currentColor"
+  />
+  <path
+    d="M14.1683 16.232C14.4803 15.92 14.4803 15.416 14.1683 15.104L11.0643 12L14.1683 8.896C14.4803 8.584 14.4803 8.08 14.1683 7.768C13.8563 7.456 13.3523 7.456 13.0403 7.768L9.36834 11.44C9.05634 11.752 9.05634 12.256 9.36834 12.568L13.0403 16.24C13.3443 16.544 13.8563 16.544 14.1683 16.232Z"
+    fill="currentColor"
+  />
+</svg>
diff --git a/src/frontend/apps/impress/src/features/templates/template-panel/assets/icon-sort.svg b/src/frontend/apps/impress/src/features/templates/template-panel/assets/icon-sort.svg
new file mode 100644
index 000000000..ac4565d3f
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/templates/template-panel/assets/icon-sort.svg
@@ -0,0 +1,13 @@
+<svg viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_178_17837)">
+    <path
+      d="M11.25 3.75L6.25 8.7375H10V17.5H12.5V8.7375H16.25L11.25 3.75ZM20 21.2625V12.5H17.5V21.2625H13.75L18.75 26.25L23.75 21.2625H20Z"
+      fill="currentColor"
+    />
+  </g>
+  <defs>
+    <clipPath id="clip0_178_17837">
+      <rect width="30" height="30" fill="white" />
+    </clipPath>
+  </defs>
+</svg>
diff --git a/src/frontend/apps/impress/src/features/templates/template-panel/components/Panel.tsx b/src/frontend/apps/impress/src/features/templates/template-panel/components/Panel.tsx
new file mode 100644
index 000000000..0b88a2802
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/templates/template-panel/components/Panel.tsx
@@ -0,0 +1,83 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Box, BoxButton, Text } from '@/components';
+import { useCunninghamTheme } from '@/cunningham';
+
+import IconOpenClose from '../assets/icon-open-close.svg';
+
+import { PanelActions } from './PanelActions';
+import { TemplateList } from './TemplateList';
+
+export const Panel = () => {
+  const { t } = useTranslation();
+  const { colorsTokens } = useCunninghamTheme();
+
+  const [isOpen, setIsOpen] = useState(true);
+
+  const closedOverridingStyles = !isOpen && {
+    $width: '0',
+    $maxWidth: '0',
+    $minWidth: '0',
+  };
+
+  const transition = 'all 0.5s ease-in-out';
+
+  return (
+    <Box
+      $width="100%"
+      $maxWidth="20rem"
+      $minWidth="14rem"
+      $css={`
+        position: relative;
+        border-right: 1px solid ${colorsTokens()['primary-300']};
+        transition: ${transition};
+      `}
+      $height="inherit"
+      aria-label="Templates panel"
+      {...closedOverridingStyles}
+    >
+      <BoxButton
+        aria-label={
+          isOpen
+            ? t('Close the templates panel')
+            : t('Open the templates panel')
+        }
+        $color={colorsTokens()['primary-600']}
+        $css={`
+          position: absolute;
+          right: -1.2rem;
+          top: 1.03rem;
+          transform: rotate(${isOpen ? '0' : '180'}deg);
+          transition: ${transition};
+        `}
+        onClick={() => setIsOpen(!isOpen)}
+      >
+        <IconOpenClose width={24} height={24} />
+      </BoxButton>
+      <Box
+        $css={`
+          overflow: hidden;
+          opacity: ${isOpen ? '1' : '0'};
+          transition: ${transition};
+        `}
+      >
+        <Box
+          className="pr-l pl-s pt-s pb-s"
+          $direction="row"
+          $align="center"
+          $justify="space-between"
+          $css={`
+            border-bottom: 1px solid ${colorsTokens()['primary-300']};
+          `}
+        >
+          <Text $weight="bold" $size="1.25rem">
+            {t('Recents')}
+          </Text>
+          <PanelActions />
+        </Box>
+        <TemplateList />
+      </Box>
+    </Box>
+  );
+};
diff --git a/src/frontend/apps/impress/src/features/templates/template-panel/components/PanelActions.tsx b/src/frontend/apps/impress/src/features/templates/template-panel/components/PanelActions.tsx
new file mode 100644
index 000000000..fe24234b8
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/templates/template-panel/components/PanelActions.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Box, BoxButton, StyledLink } from '@/components';
+import { useCunninghamTheme } from '@/cunningham';
+
+import { TemplatesOrdering } from '../api';
+import IconAdd from '../assets/icon-add.svg';
+import IconSort from '../assets/icon-sort.svg';
+import { useTemplatePanelStore } from '../store';
+
+export const PanelActions = () => {
+  const { t } = useTranslation();
+  const { changeOrdering, ordering } = useTemplatePanelStore();
+  const { colorsTokens } = useCunninghamTheme();
+
+  const isSortAsc = ordering === TemplatesOrdering.BY_CREATED_ON;
+
+  return (
+    <Box
+      $direction="row"
+      $gap="1rem"
+      $css={`
+        & button {
+          padding: 0;
+
+          svg {
+            padding: 0.1rem;
+          }
+        }
+      `}
+    >
+      <BoxButton
+        aria-label={
+          isSortAsc
+            ? t('Sort the templates by creation date descendent')
+            : t('Sort the templates by creation date ascendent')
+        }
+        onClick={changeOrdering}
+        $radius="100%"
+        $background={isSortAsc ? colorsTokens()['primary-200'] : 'transparent'}
+        $color={colorsTokens()['primary-600']}
+      >
+        <IconSort
+          width={30}
+          height={30}
+          aria-label={t('Sort templates icon')}
+        />
+      </BoxButton>
+      <StyledLink href="/templates/create">
+        <BoxButton
+          aria-label={t('Add a template')}
+          $color={colorsTokens()['primary-600']}
+        >
+          <IconAdd width={30} height={30} aria-label={t('Add template icon')} />
+        </BoxButton>
+      </StyledLink>
+    </Box>
+  );
+};
diff --git a/src/frontend/apps/impress/src/features/templates/template-panel/components/TemplateItem.tsx b/src/frontend/apps/impress/src/features/templates/template-panel/components/TemplateItem.tsx
new file mode 100644
index 000000000..048650a10
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/templates/template-panel/components/TemplateItem.tsx
@@ -0,0 +1,102 @@
+import { useRouter } from 'next/router';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import IconGroup from '@/assets/icons/icon-group.svg';
+import { Box, StyledLink, Text } from '@/components';
+import { useCunninghamTheme } from '@/cunningham';
+import { Template } from '@/features/templates/template';
+
+import IconNone from '../assets/icon-none.svg';
+
+interface TemplateItemProps {
+  template: Template;
+}
+
+export const TemplateItem = ({ template }: TemplateItemProps) => {
+  const { t } = useTranslation();
+  const { colorsTokens } = useCunninghamTheme();
+  const {
+    query: { id },
+  } = useRouter();
+
+  // There is at least 1 owner in the team
+  const hasMembers = template.accesses.length > 1;
+  const isActive = template.id === id;
+
+  const commonProps = {
+    className: 'p-t',
+    width: 52,
+    style: {
+      borderRadius: '10px',
+      flexShrink: 0,
+      background: '#fff',
+    },
+  };
+
+  const activeStyle = `
+    border-right: 4px solid ${colorsTokens()['primary-600']};
+    background: ${colorsTokens()['primary-400']};
+    span{
+      color: ${colorsTokens()['primary-text']};
+    }
+  `;
+
+  const hoverStyle = `
+    &:hover{
+      border-right: 4px solid ${colorsTokens()['primary-400']};
+      background: ${colorsTokens()['primary-300']};
+      
+      span{
+        color: ${colorsTokens()['primary-text']};
+      }
+    }
+  `;
+
+  return (
+    <Box
+      className="m-0"
+      as="li"
+      $css={`
+        transition: all 0.2s ease-in; 
+        border-right: 4px solid transparent;
+        ${isActive ? activeStyle : hoverStyle}
+      `}
+    >
+      <StyledLink className="p-s pt-t pb-t" href={`/templates/${template.id}`}>
+        <Box $align="center" $direction="row" $gap="0.5rem">
+          {hasMembers ? (
+            <IconGroup
+              aria-label={t(`Templates icon`)}
+              color={colorsTokens()['primary-500']}
+              {...commonProps}
+              style={{
+                ...commonProps.style,
+                border: `1px solid ${colorsTokens()['primary-300']}`,
+              }}
+            />
+          ) : (
+            <IconNone
+              aria-label={t(`Empty templates icon`)}
+              color={colorsTokens()['greyscale-500']}
+              {...commonProps}
+              style={{
+                ...commonProps.style,
+                border: `1px solid ${colorsTokens()['greyscale-300']}`,
+              }}
+            />
+          )}
+          <Text
+            $weight="bold"
+            $color={!hasMembers ? colorsTokens()['greyscale-600'] : undefined}
+            $css={`
+              min-width: 14rem;
+            `}
+          >
+            {template.title}
+          </Text>
+        </Box>
+      </StyledLink>
+    </Box>
+  );
+};
diff --git a/src/frontend/apps/impress/src/features/templates/template-panel/components/TemplateList.tsx b/src/frontend/apps/impress/src/features/templates/template-panel/components/TemplateList.tsx
new file mode 100644
index 000000000..05e512246
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/templates/template-panel/components/TemplateList.tsx
@@ -0,0 +1,105 @@
+import { Loader } from '@openfun/cunningham-react';
+import React, { useMemo, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Box, Text } from '@/components';
+import { InfiniteScroll } from '@/components/InfiniteScroll';
+import { Template } from '@/features/templates/template';
+
+import { useTemplates } from '../api';
+import { useTemplatePanelStore } from '../store';
+
+import { TemplateItem } from './TemplateItem';
+
+interface PanelTeamsStateProps {
+  isLoading: boolean;
+  isError: boolean;
+  templates?: Template[];
+}
+
+const TemplateListState = ({
+  isLoading,
+  isError,
+  templates,
+}: PanelTeamsStateProps) => {
+  const { t } = useTranslation();
+
+  if (isError) {
+    return (
+      <Box $justify="center" className="mb-b">
+        <Text $theme="danger" $align="center" $textAlign="center">
+          {t('Something bad happens, please refresh the page.')}
+        </Text>
+      </Box>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <Box $align="center" className="m-l">
+        <Loader />
+      </Box>
+    );
+  }
+
+  if (!templates?.length) {
+    return (
+      <Box $justify="center" className="m-s">
+        <Text as="p" className="mb-0 mt-0" $theme="greyscale" $variation="500">
+          {t('0 group to display.')}
+        </Text>
+        <Text as="p" $theme="greyscale" $variation="500">
+          {t(
+            'Create your first template by clicking on the "Create a new template" button.',
+          )}
+        </Text>
+      </Box>
+    );
+  }
+
+  return templates.map((template) => (
+    <TemplateItem template={template} key={template.id} />
+  ));
+};
+
+export const TemplateList = () => {
+  const ordering = useTemplatePanelStore((state) => state.ordering);
+  const {
+    data,
+    isError,
+    isLoading,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+  } = useTemplates({
+    ordering,
+  });
+  const containerRef = useRef<HTMLDivElement>(null);
+  const templates = useMemo(() => {
+    return data?.pages.reduce((acc, page) => {
+      return acc.concat(page.results);
+    }, [] as Template[]);
+  }, [data?.pages]);
+
+  return (
+    <Box $css="overflow-y: auto; overflow-x: hidden;" ref={containerRef}>
+      <InfiniteScroll
+        hasMore={hasNextPage}
+        isLoading={isFetchingNextPage}
+        next={() => {
+          void fetchNextPage();
+        }}
+        scrollContainer={containerRef.current}
+        as="ul"
+        className="p-0 mt-0"
+        role="listbox"
+      >
+        <TemplateListState
+          isLoading={isLoading}
+          isError={isError}
+          templates={templates}
+        />
+      </InfiniteScroll>
+    </Box>
+  );
+};
diff --git a/src/frontend/apps/impress/src/features/templates/template-panel/components/index.ts b/src/frontend/apps/impress/src/features/templates/template-panel/components/index.ts
new file mode 100644
index 000000000..8960d84f6
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/templates/template-panel/components/index.ts
@@ -0,0 +1 @@
+export * from './Panel';
diff --git a/src/frontend/apps/impress/src/features/templates/template-panel/index.ts b/src/frontend/apps/impress/src/features/templates/template-panel/index.ts
new file mode 100644
index 000000000..0ef464305
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/templates/template-panel/index.ts
@@ -0,0 +1,2 @@
+export * from './api';
+export * from './components';
diff --git a/src/frontend/apps/impress/src/features/templates/template-panel/store/index.ts b/src/frontend/apps/impress/src/features/templates/template-panel/store/index.ts
new file mode 100644
index 000000000..6763d4ded
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/templates/template-panel/store/index.ts
@@ -0,0 +1 @@
+export * from './useTemplatePanelStore';
diff --git a/src/frontend/apps/impress/src/features/templates/template-panel/store/useTemplatePanelStore.tsx b/src/frontend/apps/impress/src/features/templates/template-panel/store/useTemplatePanelStore.tsx
new file mode 100644
index 000000000..93bca4bd5
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/templates/template-panel/store/useTemplatePanelStore.tsx
@@ -0,0 +1,19 @@
+import { create } from 'zustand';
+
+import { TemplatesOrdering } from '../api/useTemplates';
+
+interface TemplatePanelStore {
+  ordering: TemplatesOrdering;
+  changeOrdering: () => void;
+}
+
+export const useTemplatePanelStore = create<TemplatePanelStore>((set) => ({
+  ordering: TemplatesOrdering.BY_CREATED_ON_DESC,
+  changeOrdering: () =>
+    set(({ ordering }) => ({
+      ordering:
+        ordering === TemplatesOrdering.BY_CREATED_ON
+          ? TemplatesOrdering.BY_CREATED_ON_DESC
+          : TemplatesOrdering.BY_CREATED_ON,
+    })),
+}));
diff --git a/src/frontend/apps/impress/src/features/templates/template/api/index.ts b/src/frontend/apps/impress/src/features/templates/template/api/index.ts
new file mode 100644
index 000000000..a46362ffe
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/templates/template/api/index.ts
@@ -0,0 +1 @@
+export * from './useTemplate';
diff --git a/src/frontend/apps/impress/src/features/templates/template/api/useTemplate.tsx b/src/frontend/apps/impress/src/features/templates/template/api/useTemplate.tsx
new file mode 100644
index 000000000..79434d4f6
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/templates/template/api/useTemplate.tsx
@@ -0,0 +1,37 @@
+import { UseQueryOptions, useQuery } from '@tanstack/react-query';
+
+import { APIError, errorCauses, fetchAPI } from '@/api';
+
+import { Template } from '../types';
+
+export type TemplateParams = {
+  id: string;
+};
+
+export const getTemplate = async ({
+  id,
+}: TemplateParams): Promise<Template> => {
+  const response = await fetchAPI(`templates/${id}`);
+
+  if (!response.ok) {
+    throw new APIError(
+      'Failed to get the template',
+      await errorCauses(response),
+    );
+  }
+
+  return response.json() as Promise<Template>;
+};
+
+export const KEY_TEMPLATE = 'template';
+
+export function useTemplate(
+  param: TemplateParams,
+  queryConfig?: UseQueryOptions<Template, APIError, Template>,
+) {
+  return useQuery<Template, APIError, Template>({
+    queryKey: [KEY_TEMPLATE, param],
+    queryFn: () => getTemplate(param),
+    ...queryConfig,
+  });
+}
diff --git a/src/frontend/apps/impress/src/features/templates/template/api/useUpdateTemplate.tsx b/src/frontend/apps/impress/src/features/templates/template/api/useUpdateTemplate.tsx
new file mode 100644
index 000000000..8e8334100
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/templates/template/api/useUpdateTemplate.tsx
@@ -0,0 +1,60 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { APIError, errorCauses, fetchAPI } from '@/api';
+
+import { KEY_LIST_TEMPLATE } from '../../template-panel';
+import { Template } from '../types';
+
+import { KEY_TEMPLATE } from './useTemplate';
+
+type UpdateTemplateProps = {
+  id: Template['id'];
+  css?: string;
+  html?: string;
+  title?: Template['title'];
+};
+
+export const updateTemplate = async ({
+  id,
+  title,
+  css,
+  html,
+}: UpdateTemplateProps): Promise<Template> => {
+  const response = await fetchAPI(`templates/${id}/`, {
+    method: 'PATCH',
+    body: JSON.stringify({
+      title,
+      css,
+      code: html,
+    }),
+  });
+
+  if (!response.ok) {
+    throw new APIError(
+      'Failed to update the template',
+      await errorCauses(response),
+    );
+  }
+
+  return response.json() as Promise<Template>;
+};
+
+interface UseUpdateTemplateProps {
+  onSuccess: (data: Template) => void;
+}
+
+export function useUpdateTemplate({ onSuccess }: UseUpdateTemplateProps) {
+  const queryClient = useQueryClient();
+  return useMutation<Template, APIError, UpdateTemplateProps>({
+    mutationFn: updateTemplate,
+    onSuccess: (data) => {
+      void queryClient.invalidateQueries({
+        queryKey: [KEY_LIST_TEMPLATE],
+      });
+      void queryClient.invalidateQueries({
+        queryKey: [KEY_TEMPLATE],
+      });
+      onSuccess(data);
+    },
+  });
+}
diff --git a/src/frontend/apps/impress/src/features/templates/template/api/useUpdateTemplateCodeEditor.tsx b/src/frontend/apps/impress/src/features/templates/template/api/useUpdateTemplateCodeEditor.tsx
new file mode 100644
index 000000000..520ae8eb1
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/templates/template/api/useUpdateTemplateCodeEditor.tsx
@@ -0,0 +1,39 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { APIError, errorCauses, fetchAPI } from '@/api';
+
+import { Template } from '../types';
+
+type UpdateTemplateProps = Pick<Template, 'code_editor' | 'id'>;
+
+export const updateTemplateCodeEditor = async ({
+  code_editor,
+  id,
+}: UpdateTemplateProps): Promise<Template> => {
+  const response = await fetchAPI(`templates/${id}/`, {
+    method: 'PATCH',
+    body: JSON.stringify({
+      code_editor,
+    }),
+  });
+
+  if (!response.ok) {
+    throw new APIError(
+      'Failed to update the template',
+      await errorCauses(response),
+    );
+  }
+
+  return response.json() as Promise<Template>;
+};
+
+export function useUpdateTemplateCodeEditor(
+  onSuccess?: (data: Template) => void,
+) {
+  return useMutation<Template, APIError, UpdateTemplateProps>({
+    mutationFn: updateTemplateCodeEditor,
+    onSuccess: (data) => {
+      onSuccess?.(data);
+    },
+  });
+}
diff --git a/src/frontend/apps/impress/src/features/templates/template/components/TemplateEditor.tsx b/src/frontend/apps/impress/src/features/templates/template/components/TemplateEditor.tsx
new file mode 100644
index 000000000..13fe9f6df
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/templates/template/components/TemplateEditor.tsx
@@ -0,0 +1,133 @@
+import GjsEditor from '@grapesjs/react';
+import {
+  Alert,
+  Button,
+  VariantType,
+  useToastProvider,
+} from '@openfun/cunningham-react';
+import grapesjs, { Editor, ProjectData } from 'grapesjs';
+import 'grapesjs/dist/css/grapes.min.css';
+import pluginBlocksBasic from 'grapesjs-blocks-basic';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Box, Text } from '@/components';
+
+import { useUpdateTemplate } from '../api/useUpdateTemplate';
+import { useUpdateTemplateCodeEditor } from '../api/useUpdateTemplateCodeEditor';
+import { Template } from '../types';
+
+interface TemplateEditorProps {
+  template: Template;
+}
+
+export const TemplateEditor = ({ template }: TemplateEditorProps) => {
+  const { t } = useTranslation();
+  const { toast } = useToastProvider();
+  const { mutate: updateCodeEditor } = useUpdateTemplateCodeEditor();
+  const { mutate: updateTemplate } = useUpdateTemplate({
+    onSuccess: () => {
+      toast(t('Template save successfully'), VariantType.SUCCESS);
+    },
+  });
+  const [editor, setEditor] = useState<Editor>();
+  const [showWarning, setShowWarning] = useState(false);
+
+  const html = editor?.getHtml();
+
+  useEffect(() => {
+    if (showWarning || !html) {
+      return;
+    }
+
+    setShowWarning(html.includes('{{body}}') === false);
+  }, [html, showWarning]);
+
+  useEffect(() => {
+    if (!editor?.loadProjectData) {
+      return;
+    }
+
+    editor.loadProjectData(template.code_editor);
+  }, [template.code_editor, editor]);
+
+  useEffect(() => {
+    editor?.Storage.add('remote', {
+      load() {
+        return Promise.resolve(template.code_editor);
+      },
+      store(data: ProjectData) {
+        updateCodeEditor({
+          code_editor: data,
+          id: template.id,
+        });
+        return Promise.resolve();
+      },
+    });
+  }, [editor, template.code_editor, template.id, updateCodeEditor]);
+
+  const onEditor = (editor: Editor) => {
+    setEditor(editor);
+
+    editor?.Storage.add('remote', {
+      load() {
+        return Promise.resolve(template.code_editor);
+      },
+      store() {
+        return Promise.resolve();
+      },
+    });
+  };
+
+  return (
+    <>
+      <Box
+        className="m-b mb-t mt-t"
+        $direction="row"
+        $align="center"
+        $justify="space-between"
+      >
+        <Text as="h2" $align="center">
+          {template.title}
+        </Text>
+        <Button
+          onClick={() => {
+            if (editor) {
+              updateTemplate({
+                id: template.id,
+                css: editor.getCss(),
+                html,
+              });
+            }
+          }}
+        >
+          {t('Save template')}
+        </Button>
+      </Box>
+      {showWarning && html && (
+        <Box
+          className="m-b"
+          $css="margin-top:0;"
+          $effect={html.includes('{{body}}') ? 'hide' : 'show'}
+        >
+          <Alert
+            type={VariantType.WARNING}
+          >{`The {{body}} tag is necessary to works with the pads.`}</Alert>
+        </Box>
+      )}
+
+      <Box className="m-b" $css="margin-top:0;flex:1;" $overflow="auto">
+        <GjsEditor
+          grapesjs={grapesjs}
+          options={{
+            storageManager: {
+              type: 'remote',
+            },
+          }}
+          plugins={[(editor) => pluginBlocksBasic(editor, {})]}
+          onEditor={onEditor}
+        />
+      </Box>
+    </>
+  );
+};
diff --git a/src/frontend/apps/impress/src/features/templates/template/components/index.ts b/src/frontend/apps/impress/src/features/templates/template/components/index.ts
new file mode 100644
index 000000000..7159c1e3b
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/templates/template/components/index.ts
@@ -0,0 +1 @@
+export * from './TemplateEditor';
diff --git a/src/frontend/apps/impress/src/features/templates/template/index.tsx b/src/frontend/apps/impress/src/features/templates/template/index.tsx
new file mode 100644
index 000000000..314dad0cd
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/templates/template/index.tsx
@@ -0,0 +1,3 @@
+export * from './api';
+export * from './components';
+export * from './types';
diff --git a/src/frontend/apps/impress/src/features/templates/template/types.tsx b/src/frontend/apps/impress/src/features/templates/template/types.tsx
new file mode 100644
index 000000000..9fb581ba8
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/templates/template/types.tsx
@@ -0,0 +1,34 @@
+import { ProjectData } from 'grapesjs';
+
+export enum Role {
+  MEMBER = 'member',
+  ADMIN = 'administrator',
+  OWNER = 'owner',
+}
+
+export interface Access {
+  id: string;
+  abilities: {
+    destroy: boolean;
+    retrieve: boolean;
+    set_role_to: Role[];
+    update: boolean;
+  };
+  role: Role;
+  team: string;
+  user: string;
+}
+
+export interface Template {
+  id: string;
+  abilities: {
+    destroy: boolean;
+    generate_document: boolean;
+    manage_accesses: boolean;
+    retrieve: boolean;
+    update: boolean;
+  };
+  accesses: Access[];
+  code_editor: ProjectData;
+  title: string;
+}
diff --git a/src/frontend/apps/impress/src/layouts/TemplateLayout.tsx b/src/frontend/apps/impress/src/layouts/TemplateLayout.tsx
new file mode 100644
index 000000000..30a0215ca
--- /dev/null
+++ b/src/frontend/apps/impress/src/layouts/TemplateLayout.tsx
@@ -0,0 +1,26 @@
+import { PropsWithChildren } from 'react';
+
+import { Box } from '@/components';
+import { useCunninghamTheme } from '@/cunningham';
+import { Panel } from '@/features/templates/template-panel';
+
+import { MainLayout } from './MainLayout';
+
+export function TemplateLayout({ children }: PropsWithChildren) {
+  const { colorsTokens } = useCunninghamTheme();
+
+  return (
+    <MainLayout>
+      <Box $height="inherit" $direction="row">
+        <Panel />
+        <Box
+          $background={colorsTokens()['primary-bg']}
+          $width="100%"
+          $height="inherit"
+        >
+          {children}
+        </Box>
+      </Box>
+    </MainLayout>
+  );
+}
diff --git a/src/frontend/apps/impress/src/layouts/index.ts b/src/frontend/apps/impress/src/layouts/index.ts
index 456e8e9ef..6b909bd67 100644
--- a/src/frontend/apps/impress/src/layouts/index.ts
+++ b/src/frontend/apps/impress/src/layouts/index.ts
@@ -1,2 +1,3 @@
 export * from './MainLayout';
 export * from './PadLayout';
+export * from './TemplateLayout';
diff --git a/src/frontend/apps/impress/src/pages/templates/[id].tsx b/src/frontend/apps/impress/src/pages/templates/[id].tsx
new file mode 100644
index 000000000..65adab07e
--- /dev/null
+++ b/src/frontend/apps/impress/src/pages/templates/[id].tsx
@@ -0,0 +1,67 @@
+import { Loader } from '@openfun/cunningham-react';
+import { useRouter as useNavigate } from 'next/navigation';
+import { useRouter } from 'next/router';
+import { ReactElement } from 'react';
+
+import { Box } from '@/components';
+import { TextErrors } from '@/components/TextErrors';
+import { TemplateEditor, useTemplate } from '@/features/templates/template';
+import { TemplateLayout } from '@/layouts';
+import { NextPageWithLayout } from '@/types/next';
+
+const Page: NextPageWithLayout = () => {
+  const {
+    query: { id },
+  } = useRouter();
+
+  if (typeof id !== 'string') {
+    throw new Error('Invalid template id');
+  }
+
+  return <Template id={id} />;
+};
+
+interface TemplateProps {
+  id: string;
+}
+
+const Template = ({ id }: TemplateProps) => {
+  const {
+    data: template,
+    isLoading,
+    isError,
+    error,
+  } = useTemplate(
+    { id },
+    {
+      queryKey: ['template', { id }],
+      staleTime: 0,
+    },
+  );
+  const navigate = useNavigate();
+
+  if (isError && error) {
+    if (error.status === 404) {
+      navigate.replace(`/404`);
+      return null;
+    }
+
+    return <TextErrors causes={error.cause} />;
+  }
+
+  if (isLoading || !template) {
+    return (
+      <Box $align="center" $justify="center" $height="100%">
+        <Loader />
+      </Box>
+    );
+  }
+
+  return <TemplateEditor template={template} />;
+};
+
+Page.getLayout = function getLayout(page: ReactElement) {
+  return <TemplateLayout>{page}</TemplateLayout>;
+};
+
+export default Page;
diff --git a/src/frontend/apps/impress/src/pages/templates/create.tsx b/src/frontend/apps/impress/src/pages/templates/create.tsx
new file mode 100644
index 000000000..3797b600a
--- /dev/null
+++ b/src/frontend/apps/impress/src/pages/templates/create.tsx
@@ -0,0 +1,20 @@
+import { ReactElement } from 'react';
+
+import { Box } from '@/components';
+import { CardCreateTemplate } from '@/features/templates/';
+import { TemplateLayout } from '@/layouts';
+import { NextPageWithLayout } from '@/types/next';
+
+const Page: NextPageWithLayout = () => {
+  return (
+    <Box className="p-l" $justify="center" $align="start" $height="inherit">
+      <CardCreateTemplate />
+    </Box>
+  );
+};
+
+Page.getLayout = function getLayout(page: ReactElement) {
+  return <TemplateLayout>{page}</TemplateLayout>;
+};
+
+export default Page;
diff --git a/src/frontend/apps/impress/src/pages/templates/index.tsx b/src/frontend/apps/impress/src/pages/templates/index.tsx
new file mode 100644
index 000000000..a0f64ebbf
--- /dev/null
+++ b/src/frontend/apps/impress/src/pages/templates/index.tsx
@@ -0,0 +1,30 @@
+import { Button } from '@openfun/cunningham-react';
+import type { ReactElement } from 'react';
+import { useTranslation } from 'react-i18next';
+import styled from 'styled-components';
+
+import { Box, StyledLink } from '@/components';
+import { TemplateLayout } from '@/layouts';
+import { NextPageWithLayout } from '@/types/next';
+
+const StyledButton = styled(Button)`
+  width: fit-content;
+`;
+
+const Page: NextPageWithLayout = () => {
+  const { t } = useTranslation();
+
+  return (
+    <Box $align="center" $justify="center" $height="inherit">
+      <StyledLink href="/templates/create">
+        <StyledButton>{t('Create a new template')}</StyledButton>
+      </StyledLink>
+    </Box>
+  );
+};
+
+Page.getLayout = function getLayout(page: ReactElement) {
+  return <TemplateLayout>{page}</TemplateLayout>;
+};
+
+export default Page;
diff --git a/src/frontend/yarn.lock b/src/frontend/yarn.lock
index 292c72e1e..ecd89d015 100644
--- a/src/frontend/yarn.lock
+++ b/src/frontend/yarn.lock
@@ -1485,6 +1485,11 @@
   dependencies:
     tslib "^2.4.0"
 
+"@grapesjs/react@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@grapesjs/react/-/react-1.0.0.tgz#bfa938128db7b69ca1c23439b66decf4eaa0ca9a"
+  integrity sha512-HHttzxwgvhbxQqqsiiQzb+OJtKFl8yWI9Yp3IgPgiKXqwY19lEJWSkCukvfqxugbYRxi0M1uERLAt209AmY5vQ==
+
 "@humanwhocodes/config-array@^0.11.14":
   version "0.11.14"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.14.tgz#d78e481a039f7566ecc9660b4ea7fe6b1fec442b"
@@ -3428,6 +3433,14 @@
   dependencies:
     "@babel/types" "^7.20.7"
 
+"@types/backbone@^1.4.15":
+  version "1.4.19"
+  resolved "https://registry.yarnpkg.com/@types/backbone/-/backbone-1.4.19.tgz#f6e8406fed40ca3fe224f6e59115142b62be76d6"
+  integrity sha512-byyn236JymGByOajKA7mi1k+/jKn162TIvArOB4SHgOGbVlFj8CSfJH4jekP0qo0vJwW5khrrsiiO1Jsos6ZvA==
+  dependencies:
+    "@types/jquery" "*"
+    "@types/underscore" "*"
+
 "@types/debug@^4.0.0":
   version "4.1.12"
   resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.12.tgz#a155f21690871953410df4b6b6f53187f0500917"
@@ -3488,6 +3501,13 @@
     expect "^29.0.0"
     pretty-format "^29.0.0"
 
+"@types/jquery@*":
+  version "3.5.29"
+  resolved "https://registry.yarnpkg.com/@types/jquery/-/jquery-3.5.29.tgz#3c06a1f519cd5fc3a7a108971436c00685b5dcea"
+  integrity sha512-oXQQC9X9MOPRrMhPHHOsXqeQDnWeCDT3PelUIg/Oy8FAbzSZtFHRjc7IpbfFVmpLtJ+UOoywpRsuO5Jxjybyeg==
+  dependencies:
+    "@types/sizzle" "*"
+
 "@types/jsdom@^20.0.0":
   version "20.0.1"
   resolved "https://registry.yarnpkg.com/@types/jsdom/-/jsdom-20.0.1.tgz#07c14bc19bd2f918c1929541cdaacae894744808"
@@ -3588,6 +3608,11 @@
   resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.8.tgz#8268a8c57a3e4abd25c165ecd36237db7948a55e"
   integrity sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==
 
+"@types/sizzle@*":
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/@types/sizzle/-/sizzle-2.3.8.tgz#518609aefb797da19bf222feb199e8f653ff7627"
+  integrity sha512-0vWLNK2D5MT9dg0iOo8GlKguPAU02QjmZitPEsXRuJXU/OGIOt9vT9Fc26wtYuavLxtO45v9PGleoL9Z0k1LHg==
+
 "@types/stack-utils@^2.0.0":
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.3.tgz#6209321eb2c1712a7e7466422b8cb1fc0d9dd5d8"
@@ -3608,6 +3633,11 @@
   resolved "https://registry.yarnpkg.com/@types/tough-cookie/-/tough-cookie-4.0.5.tgz#cb6e2a691b70cb177c6e3ae9c1d2e8b2ea8cd304"
   integrity sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==
 
+"@types/underscore@*":
+  version "1.11.15"
+  resolved "https://registry.yarnpkg.com/@types/underscore/-/underscore-1.11.15.tgz#29c776daecf6f1935da9adda17509686bf979947"
+  integrity sha512-HP38xE+GuWGlbSRq9WrZkousaQ7dragtZCruBVMi0oX1migFZavZ3OROKHSkNp/9ouq82zrWtZpg18jFnVN96g==
+
 "@types/unist@*", "@types/unist@^3.0.0":
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-3.0.2.tgz#6dd61e43ef60b34086287f83683a5c1b2dc53d20"
@@ -4202,6 +4232,28 @@ babel-preset-jest@^29.6.3:
     babel-plugin-jest-hoist "^29.6.3"
     babel-preset-current-node-syntax "^1.0.0"
 
+backbone-undo@^0.2.5:
+  version "0.2.6"
+  resolved "https://registry.yarnpkg.com/backbone-undo/-/backbone-undo-0.2.6.tgz#00c4d78ab2425c18a76f2a96a1eee181560a5d8d"
+  integrity sha512-AsfpNiljLXlk7TcffDUu3EAUq7CxWbyTNwARWrql5XTzN4vh6WzEEBZYaKK4kTTz+iW1tSzqUooaGRIwO83kWA==
+  dependencies:
+    backbone ">=1.0.0"
+    underscore ">=1.4.4"
+
+backbone@1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/backbone/-/backbone-1.4.1.tgz#099a78184bc07b034048a8332229c2ccca1e3e62"
+  integrity sha512-ADy1ztN074YkWbHi8ojJVFe3vAanO/lrzMGZWUClIP7oDD/Pjy2vrASraUP+2EVCfIiTtCW4FChVow01XneivA==
+  dependencies:
+    underscore ">=1.8.3"
+
+backbone@>=1.0.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/backbone/-/backbone-1.6.0.tgz#5cdfa25257819b223109a77a74dde26d38995930"
+  integrity sha512-13PUjmsgw/49EowNcQvfG4gmczz1ximTMhUktj0Jfrjth0MVaTxehpU+qYYX4MxnuIuhmvBLC6/ayxuAGnOhbA==
+  dependencies:
+    underscore ">=1.8.3"
+
 bail@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/bail/-/bail-2.0.2.tgz#d26f5cd8fe5d6f832a31517b9f7c356040ba6d5d"
@@ -4539,6 +4591,16 @@ co@^4.6.0:
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
   integrity sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==
 
+codemirror-formatting@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/codemirror-formatting/-/codemirror-formatting-1.0.0.tgz#879cc1fdd9018343c1d5511769ce5360d705ebf2"
+  integrity sha512-br9yM6eJI3pJHekEnoyHaBEb1B7XxxDjju+vRyBe8QGLp5saTIXXkZ+eFCTqXSAtI8QEZDFVEX2/SOjH2sVWRQ==
+
+codemirror@^5.63.0:
+  version "5.65.16"
+  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.65.16.tgz#efc0661be6bf4988a6a1c2fe6893294638cdb334"
+  integrity sha512-br21LjYmSlVL0vFCPWPfhzUCT34FM/pAdK7rRIZwa0rrtrIdotvP4Oh4GUHsu2E3IrQMCfRkL/fN3ytMNxVQvg==
+
 collect-v8-coverage@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/collect-v8-coverage/-/collect-v8-coverage-1.0.2.tgz#c0b29bcd33bcd0779a1344c2136051e6afd3d9e9"
@@ -6094,6 +6156,24 @@ graceful-fs@^4.0.0, graceful-fs@^4.1.11, graceful-fs@^4.1.6, graceful-fs@^4.2.0,
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
   integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
 
+grapesjs-blocks-basic@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/grapesjs-blocks-basic/-/grapesjs-blocks-basic-1.0.2.tgz#d7e4cc44a2ad1f41d6622ca337668e3fd5945191"
+  integrity sha512-SsPKf/CvQkZ+kABOsN01auAPHXh/2J20g0AWYF7fHR3Gw3TZLtdIxT1mk90Qzi76u/7sUYi3CTI+i3ZaTtXHRA==
+
+grapesjs@0.21.10:
+  version "0.21.10"
+  resolved "https://registry.yarnpkg.com/grapesjs/-/grapesjs-0.21.10.tgz#f64c7eeac17412555b523249f80ae0ce3297a9c0"
+  integrity sha512-wvOBa8kjBLDeH006p4/krSzGNze2H7Rsncv37LxvDzC6QCQucEjQ7Lb+Fd50jDSWNnxavRRJLJPnXyPTGZYGuQ==
+  dependencies:
+    "@types/backbone" "^1.4.15"
+    backbone "1.4.1"
+    backbone-undo "^0.2.5"
+    codemirror "^5.63.0"
+    codemirror-formatting "^1.0.0"
+    promise-polyfill "^8.1.3"
+    underscore "^1.13.1"
+
 graphemer@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/graphemer/-/graphemer-1.4.0.tgz#fb2f1d55e0e3a1849aeffc90c4fa0dd53a0e66c6"
@@ -8730,6 +8810,11 @@ promise-map-series@^0.3.0:
   resolved "https://registry.yarnpkg.com/promise-map-series/-/promise-map-series-0.3.0.tgz#41873ca3652bb7a042b387d538552da9b576f8a1"
   integrity sha512-3npG2NGhTc8BWBolLLf8l/92OxMGaRLbqvIh9wjCHhDXNvk4zsxaTaCpiCunW09qWPrN2zeNSNwRLVBrQQtutA==
 
+promise-polyfill@^8.1.3:
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/promise-polyfill/-/promise-polyfill-8.3.0.tgz#9284810268138d103807b11f4e23d5e945a4db63"
+  integrity sha512-H5oELycFml5yto/atYqmjyigJoAo3+OXwolYiH7OfQuYlAqhxNvTfiNMbV9hsC6Yp83yE5r2KTVmtrG6R9i6Pg==
+
 prompts@^2.0.1:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.4.2.tgz#7b57e73b3a48029ad10ebd44f74b01722a4cb069"
@@ -10424,6 +10509,11 @@ underscore.string@~3.3.4:
     sprintf-js "^1.1.1"
     util-deprecate "^1.0.2"
 
+underscore@>=1.4.4, underscore@>=1.8.3, underscore@^1.13.1:
+  version "1.13.6"
+  resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.13.6.tgz#04786a1f589dc6c09f761fc5f45b89e935136441"
+  integrity sha512-+A5Sja4HP1M08MaXya7p5LvjuM7K6q/2EaC0+iovj/wOcMsTzMvDFbasi/oSapiwOlt252IqsKqPjCl7huKS0A==
+
 undici-types@~5.26.4:
   version "5.26.5"
   resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.26.5.tgz#bcd539893d00b56e964fd2657a4866b221a65617"