diff --git a/layout-webapp/src/main/resources/locale/portlet/LayoutEditor_en.properties b/layout-webapp/src/main/resources/locale/portlet/LayoutEditor_en.properties
index 74b2fbbf5..091f3b892 100644
--- a/layout-webapp/src/main/resources/locale/portlet/LayoutEditor_en.properties
+++ b/layout-webapp/src/main/resources/locale/portlet/LayoutEditor_en.properties
@@ -61,7 +61,7 @@ layout.topRight=Top-Right
 layout.topLeft=Top-Left
 layout.bottomRight=Bottom-Right
 layout.bottomLeft=Bottom-Left
-layout.selectSectionType=Select Section Type
+layout.chooseATemplate=Choose a template
 layout.fixedSectionTypeChoice=Fixed Section
 layout.dynamicSectionTypeChoice=Dynamic Section
 layout.addApplicationButton=Add Application
@@ -196,6 +196,8 @@ portlets.label.category.system.noDelete=Product categories cannot be deleted
 portlets.label.openIllustrationPreview=Open Preview
 
 layout.add=Add
+layout.create=Create
+layout.use=Use
 layout.preview=Preview
 layout.previewDraftPage=Save draft and preview page
 layout.portletInstance.MembersPortlet.name=Members
@@ -400,3 +402,6 @@ sectionTemplates.label.category.blank=Blank
 sectionTemplates.label.category.custom=Custom
 layout.editSectionTemplate=Edit Template
 sectionTemplates.label.duplicate=Duplicate
+layout.section.category.blank=Blank Templates
+layout.section.category.default=Default Templates
+layout.section.category.custom=Customized Templates
diff --git a/layout-webapp/src/main/webapp/vue-app/layout-editor/components/content/Content.vue b/layout-webapp/src/main/webapp/vue-app/layout-editor/components/content/Content.vue
index 1eec81c2b..a089799d9 100644
--- a/layout-webapp/src/main/webapp/vue-app/layout-editor/components/content/Content.vue
+++ b/layout-webapp/src/main/webapp/vue-app/layout-editor/components/content/Content.vue
@@ -337,6 +337,8 @@ export default {
       const parentContainer = this.$layoutUtils.getParentContainer(this.layoutToEdit);
       this.addSectionVersion(section.storageId);
       parentContainer.children.splice(index || 0, 0, section);
+      this.$layoutUtils.parseSections(this.layoutToEdit);
+      this.saveDraft();
     },
     handleRemoveSection(index) {
       const parentContainer = this.$layoutUtils.getParentContainer(this.layoutToEdit);
diff --git a/layout-webapp/src/main/webapp/vue-app/layout-editor/components/drawer/AddSectionDrawer.vue b/layout-webapp/src/main/webapp/vue-app/layout-editor/components/drawer/AddSectionDrawer.vue
index 2547c8382..882a2fec8 100644
--- a/layout-webapp/src/main/webapp/vue-app/layout-editor/components/drawer/AddSectionDrawer.vue
+++ b/layout-webapp/src/main/webapp/vue-app/layout-editor/components/drawer/AddSectionDrawer.vue
@@ -8,6 +8,7 @@
  modify it under the terms of the GNU Lesser General Public
  License as published by the Free Software Foundation; either
  version 3 of the License, or (at your option) any later version.
+
  This program is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
@@ -23,39 +24,59 @@
     ref="drawer"
     id="addSectionDrawer"
     v-model="drawer"
+    :loading="loading"
     right
     disable-pull-to-refresh>
     <template #title>
       {{ $t('layout.addSectionTitle') }}
     </template>
-    <template v-if="drawer && cols" #content>
+    <template v-if="drawer && sectionTemplates" #content>
       <v-card class="pa-4" flat>
-        <div class="text-header mb-2">
-          {{ $t('layout.selectSectionType') }}
+        <div class="text-header">
+          {{ $t('layout.chooseATemplate') }}
         </div>
-        <v-radio-group v-model="sectionType" class="my-auto text-no-wrap ms-n1">
-          <v-radio
-            :label="$t('layout.dynamicSectionTypeChoice')"
-            value="FlexContainer"
-            class="mx-0" />
-          <v-radio
-            :label="$t('layout.fixedSectionTypeChoice')"
-            value="GridContainer"
-            class="mx-0" />
-        </v-radio-group>
-
-        <layout-editor-section-grid-editor
-          v-if="sectionType === $layoutUtils.gridTemplate"
-          :rows-count="rows"
-          :cols-count="cols"
-          class="mt-4"
-          @rows-updated="rows = $event"
-          @cols-updated="cols = $event" />
-        <layout-editor-section-flex-editor
-          v-else-if="sectionType === $layoutUtils.flexTemplate"
-          :cols-count="cols"
-          class="mt-4"
-          @cols-updated="cols = $event" />
+        <template v-if="blankSectionTemplates?.length">
+          <div class="font-weight-bold mt-4">
+            {{ $t('layout.section.category.blank') }}
+          </div>
+          <div class="d-flex flex-wrap me-n4">
+            <layout-editor-section-template
+              v-for="t in blankSectionTemplates"
+              :key="t.id"
+              :section-template="t"
+              :selected="t.id === selectedSectionTemplate?.id"
+              class="col-6 ps-0 pe-4"
+              @select="selectedSectionTemplate = t" />
+          </div>
+        </template>
+        <template v-if="defaultSectionTemplates?.length">
+          <div class="font-weight-bold mt-4">
+            {{ $t('layout.section.category.default') }}
+          </div>
+          <div class="d-flex flex-wrap me-n4">
+            <layout-editor-section-template
+              v-for="t in defaultSectionTemplates"
+              :key="t.id"
+              :section-template="t"
+              :selected="t.id === selectedSectionTemplate?.id"
+              class="col-6 ps-0 pe-4"
+              @select="selectedSectionTemplate = t" />
+          </div>
+        </template>
+        <template v-if="customSectionTemplates?.length">
+          <div class="font-weight-bold mt-4">
+            {{ $t('layout.section.category.custom') }}
+          </div>
+          <div class="d-flex flex-wrap me-n4">
+            <layout-editor-section-template
+              v-for="t in customSectionTemplates"
+              :key="t.id"
+              :section-template="t"
+              :selected="t.id === selectedSectionTemplate?.id"
+              class="col-6 ps-0 pe-4"
+              @select="selectedSectionTemplate = t" />
+          </div>
+        </template>
       </v-card>
     </template>
     <template #footer>
@@ -67,9 +88,10 @@
           <span class="text-none">{{ $t('layout.cancel') }}</span>
         </v-btn>
         <v-btn
+          :disabled="!selectedSectionTemplate"
           class="btn btn-primary ms-4"
           @click="apply">
-          <span class="text-none">{{ $t('layout.apply') }}</span>
+          <span class="text-none">{{ $t('layout.create') }}</span>
         </v-btn>
       </div>
     </template>
@@ -78,34 +100,41 @@
 <script>
 export default {
   data: () => ({
+    selectedSectionTemplate: null,
     parentContainer: null,
-    section: null,
-    sectionType: null,
+    sectionTemplates: null,
+    loading: false,
     drawer: false,
     index: null,
-    rows: 0,
-    cols: 0,
   }),
-  watch: {
-    sectionType() {
-      if (this.sectionType === this.$layoutUtils.gridTemplate) {
-        this.rows = 3;
-        this.cols = 12;
-      } else if (this.sectionType === this.$layoutUtils.flexTemplate) {
-        this.rows = 1;
-        this.cols = 3;
-      }
+  computed: {
+    blankSectionTemplates() {
+      return this.sectionTemplates?.filter?.(t => t.category === 'blank' && t.name && !t.disabled);
+    },
+    defaultSectionTemplates() {
+      return this.sectionTemplates?.filter?.(t => t.category === 'default' && t.name && !t.disabled);
+    },
+    customSectionTemplates() {
+      return this.sectionTemplates?.filter?.(t => t.category === 'custom' && t.name && !t.disabled);
     },
   },
   methods: {
-    open(parentContainer, index) {
-      this.sectionType = this.$layoutUtils.flexTemplate;
+    async open(parentContainer, index) {
       this.parentContainer = parentContainer;
       this.index = index;
+      this.selectedSectionTemplate = null;
       this.$nextTick().then(() => this.$refs.drawer.open());
+      if (!this.sectionTemplates) {
+        this.loading = true;
+        try {
+          this.sectionTemplates = await this.$sectionTemplateService.getSectionTemplates();
+        } finally {
+          this.loading = false;
+        }
+      }
     },
     apply() {
-      this.section = this.$layoutUtils.newSection(null, null, this.rows, this.cols, this.sectionType);
+      this.section = JSON.parse(this.selectedSectionTemplate.content);
       this.$root.$emit('layout-add-section', this.section, this.index);
       this.close();
     },
diff --git a/layout-webapp/src/main/webapp/vue-app/layout-editor/components/form/SectionTemplate.vue b/layout-webapp/src/main/webapp/vue-app/layout-editor/components/form/SectionTemplate.vue
new file mode 100644
index 000000000..dbeb3ba0a
--- /dev/null
+++ b/layout-webapp/src/main/webapp/vue-app/layout-editor/components/form/SectionTemplate.vue
@@ -0,0 +1,125 @@
+<!--
+
+ This file is part of the Meeds project (https://meeds.io/).
+
+ Copyright (C) 2020 - 2025 Meeds Association contact@meeds.io
+
+ This program is free software; you can redistribute it and/or
+ modify it under the terms of the GNU Lesser General Public
+ License as published by the Free Software Foundation; either
+ version 3 of the License, or (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ Lesser General Public License for more details.
+
+ You should have received a copy of the GNU Lesser General Public License
+ along with this program; if not, write to the Free Software Foundation,
+ Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+
+-->
+<template>
+  <div>
+    <v-hover
+      v-model="hover">
+      <v-card
+        :class="{
+          'primary-border-color': selected,
+          'border-color': !selected,
+        }"
+        class="d-flex flex-column pa-2 hover-elevation overflow-hidden position-relative"
+        min-height="150"
+        max-height="150"
+        flat
+        @click="$root.$emit('layout-illustration-preview', illustrationSrc, illustrationAction)">
+        <p
+          v-if="title"
+          v-sanitized-html="title"
+          class="mb-0 font-weight-regular text-truncate-2"></p>
+        <div class="d-flex flex-grow-1 align-center">
+          <v-img
+            :src="illustrationSrc"
+            :alt="title"
+            min-height="100%"
+            min-width="100%"
+            max-width="100%"
+            contain
+            class="align-center ma-auto" />
+        </div>
+        <div
+          v-if="hover"
+          class="position-absolute full-height full-width t-0 l-0 mask-color z-index-drawer d-flex flex-column pa-2 overflow-hidden">
+          <p
+            v-if="title"
+            v-sanitized-html="title"
+            class="white--text mb-1 font-weight-regular text-truncate-2"></p>
+          <p
+            v-if="description"
+            v-sanitized-html="description"
+            class="white--text mb-0 text-subtitle text-truncate-3"></p>
+          <div class="d-flex flex-grow-1 align-end justify-end">
+            <v-btn
+              small
+              class="btn btn-primary me-2"
+              @click.prevent.stop="$emit('select')">
+              {{ $t('layout.use') }}
+            </v-btn>
+            <v-btn
+              small
+              class="btn"
+              color="white"
+              @click="$root.$emit('layout-illustration-preview', illustrationSrc, illustrationAction)">
+              {{ $t('layout.preview') }}
+            </v-btn>
+          </div>
+        </div>
+      </v-card>
+    </v-hover>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    expand: {
+      type: Boolean,
+      default: false
+    },
+    sectionTemplate: {
+      type: Object,
+      default: null
+    },
+    selected: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data: () => ({
+    hover: false,
+  }),
+  computed: {
+    title() {
+      return this.sectionTemplate?.name;
+    },
+    description() {
+      return this.sectionTemplate?.description;
+    },
+    illustrationId() {
+      return this.sectionTemplate?.illustrationId;
+    },
+    sectionTemplateId() {
+      return this.sectionTemplate?.id;
+    },
+    illustrationSrc() {
+      return this.illustrationId && `${eXo.env.portal.context}/${eXo.env.portal.rest}/v1/social/attachments/sectionTemplate/${this.sectionTemplateId}/${this.illustrationId}` ||  '/layout/images/page-templates/DefaultPreview.webp';
+    },
+    illustrationAction() {
+      return {
+        label: this.$t('layout.use'),
+        closeOnClick: true,
+        click: () => this.$emit('select'),
+      };
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/layout-webapp/src/main/webapp/vue-app/layout-editor/initComponents.js b/layout-webapp/src/main/webapp/vue-app/layout-editor/initComponents.js
index 3a82436b3..fea9e8713 100644
--- a/layout-webapp/src/main/webapp/vue-app/layout-editor/initComponents.js
+++ b/layout-webapp/src/main/webapp/vue-app/layout-editor/initComponents.js
@@ -39,6 +39,7 @@ import MarginInput from './components/form/MarginInput.vue';
 import SectionMarginInput from './components/form/SectionMarginInput.vue';
 import BorderInput from './components/form/BorderInput.vue';
 import BorderRadiusInput from './components/form/BorderRadiusInput.vue';
+import SectionTemplate from './components/form/SectionTemplate.vue';
 
 import Content from './components/content/Content.vue';
 
@@ -92,6 +93,7 @@ const components = {
   'layout-editor-container-extension': ContainerExtension,
   'layout-editor-container-base': ContainerBase,
   'layout-editor-container-section': Section,
+  'layout-editor-section-template': SectionTemplate,
   'layout-editor-container-cell': Cell,
   'layout-editor-container-application': Application,
   'layout-editor-section-selection-grid': SectionSelectionGrid,