diff --git a/layout-service/src/main/java/io/meeds/layout/model/LayoutModel.java b/layout-service/src/main/java/io/meeds/layout/model/LayoutModel.java
index d5ef7b54d..975c61950 100644
--- a/layout-service/src/main/java/io/meeds/layout/model/LayoutModel.java
+++ b/layout-service/src/main/java/io/meeds/layout/model/LayoutModel.java
@@ -22,6 +22,8 @@
 import java.util.Collections;
 import java.util.List;
 import java.util.Objects;
+import java.util.regex.Matcher;
+import java.util.regex.Pattern;
 import java.util.stream.Collectors;
 import java.util.stream.StreamSupport;
 
@@ -30,6 +32,8 @@
 import com.fasterxml.jackson.annotation.JsonProperty;
 import com.fasterxml.jackson.annotation.JsonProperty.Access;
 
+import org.apache.commons.lang3.StringUtils;
+
 import org.exoplatform.portal.config.model.Application;
 import org.exoplatform.portal.config.model.ApplicationBackgroundStyle;
 import org.exoplatform.portal.config.model.ApplicationState;
@@ -132,6 +136,14 @@ public class LayoutModel {
 
   private String                          appBackgroundAttachment;
 
+  private Integer                         appMarginTop;
+
+  private Integer                         appMarginRight;
+
+  private Integer                         appMarginBottom;
+
+  private Integer                         appMarginLeft;
+
   private String                          textTitleColor;
 
   private String                          textTitleFontSize;
@@ -272,6 +284,42 @@ public LayoutModel(ModelObject model, PortletInstanceService portletInstanceServ
     init(model, portletInstanceService, portletInstanceContext);
   }
 
+  /**
+   * Application margins are custom properties on the platform scale where 20
+   * means "no extra margin". An application whose cssClass still carries
+   * Vuetify spacing tokens in their cssClass, written either by
+   * the editors from a 0-neutral attribute or by ModelStyle at import from a
+   * 20-neutral page-XML attribute: the two attributes disagree, the tokens do
+   * not (mt-n1 rendered -4px in both). The token is therefore the source of a
+   * legacy margin: value = N x 4 + 20, and the tokens are stripped from the
+   * class exposed to every Vue consumer (view-time layout and editors).
+   */
+  private static final Pattern SPACING_TOKEN_PATTERN = Pattern.compile("(^| )(mt|mr|mb|ml|ms|me)-((md|lg|xl)-)?(n?)(\\d{1,2})(?= |$)");
+
+  private static final int     MARGIN_NEUTRAL        = 20;
+
+  private void convertLegacyMarginTokens() {
+    if (StringUtils.isBlank(this.cssClass)) {
+      return;
+    }
+    Matcher matcher = SPACING_TOKEN_PATTERN.matcher(this.cssClass);
+    boolean legacy = false;
+    while (matcher.find()) {
+      legacy = true;
+      int value = Integer.parseInt(matcher.group(6)) * 4 * ("n".equals(matcher.group(5)) ? -1 : 1) + MARGIN_NEUTRAL;
+      switch (matcher.group(2)) {
+      case "mt" -> this.marginTop = value;
+      case "mb" -> this.marginBottom = value;
+      case "me", "mr" -> this.marginRight = value;
+      default -> this.marginLeft = value;
+      }
+    }
+    if (legacy) {
+      String stripped = SPACING_TOKEN_PATTERN.matcher(this.cssClass).replaceAll(" ").replaceAll(" {2,}", " ").trim();
+      this.cssClass = StringUtils.isBlank(stripped) ? null : stripped;
+    }
+  }
+
   private void init(ModelObject model, PortletInstanceService portletInstanceService, PortletInstanceContext portletInstanceContext) { // NOSONAR
     ModelStyle cssStyle = model.getCssStyle();
     if (cssStyle != null) {
@@ -379,6 +427,10 @@ private void init(ModelObject model, PortletInstanceService portletInstanceServi
         this.appBackgroundSize = appCssStyle.getBackgroundSize();
         this.appBackgroundRepeat = appCssStyle.getBackgroundRepeat();
         this.appBackgroundAttachment = appCssStyle.getBackgroundAttachment();
+        this.appMarginTop = appCssStyle.getMarginTop();
+        this.appMarginRight = appCssStyle.getMarginRight();
+        this.appMarginBottom = appCssStyle.getMarginBottom();
+        this.appMarginLeft = appCssStyle.getMarginLeft();
       }
       if (model instanceof Page page) {
         this.editPermission = page.getEditPermission();
@@ -400,6 +452,7 @@ private void init(ModelObject model, PortletInstanceService portletInstanceServi
       this.width = application.getWidth();
       this.height = application.getHeight();
       this.cssClass = application.getCssClass();
+      convertLegacyMarginTokens();
       this.showInfoBar = application.getShowInfoBar();
       this.showApplicationState = application.getShowApplicationState();
       this.showApplicationMode = application.getShowApplicationMode();
diff --git a/layout-service/src/main/java/io/meeds/layout/util/EntityMapper.java b/layout-service/src/main/java/io/meeds/layout/util/EntityMapper.java
index 25db564c8..a2eea0aca 100644
--- a/layout-service/src/main/java/io/meeds/layout/util/EntityMapper.java
+++ b/layout-service/src/main/java/io/meeds/layout/util/EntityMapper.java
@@ -251,7 +251,11 @@ private static ModelStyle mapToStyle(LayoutModel layoutModel) {
   private static ApplicationBackgroundStyle mapToAppStyle(LayoutModel layoutModel) {
     ApplicationBackgroundStyle cssStyle = null;
     if (StringUtils.isNotBlank(layoutModel.getAppBackgroundColor())
-        || StringUtils.isNotBlank(layoutModel.getAppBackgroundImage())) {
+        || StringUtils.isNotBlank(layoutModel.getAppBackgroundImage())
+        || layoutModel.getAppMarginTop() != null
+        || layoutModel.getAppMarginRight() != null
+        || layoutModel.getAppMarginBottom() != null
+        || layoutModel.getAppMarginLeft() != null) {
       cssStyle = new ApplicationBackgroundStyle();
       cssStyle.setBackgroundColor(layoutModel.getAppBackgroundColor());
       cssStyle.setBackgroundImage(layoutModel.getAppBackgroundImage());
@@ -260,6 +264,10 @@ private static ApplicationBackgroundStyle mapToAppStyle(LayoutModel layoutModel)
       cssStyle.setBackgroundSize(layoutModel.getAppBackgroundSize());
       cssStyle.setBackgroundRepeat(layoutModel.getAppBackgroundRepeat());
       cssStyle.setBackgroundAttachment(layoutModel.getAppBackgroundAttachment());
+      cssStyle.setMarginTop(layoutModel.getAppMarginTop());
+      cssStyle.setMarginRight(layoutModel.getAppMarginRight());
+      cssStyle.setMarginBottom(layoutModel.getAppMarginBottom());
+      cssStyle.setMarginLeft(layoutModel.getAppMarginLeft());
     }
     return cssStyle;
   }
diff --git a/layout-service/src/test/java/io/meeds/layout/model/LayoutModelTest.java b/layout-service/src/test/java/io/meeds/layout/model/LayoutModelTest.java
new file mode 100644
index 000000000..7e0d1bcd8
--- /dev/null
+++ b/layout-service/src/test/java/io/meeds/layout/model/LayoutModelTest.java
@@ -0,0 +1,93 @@
+/**
+ * This file is part of the Meeds project (https://meeds.io/).
+ *
+ * Copyright (C) 2020 - 2026 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.
+ */
+package io.meeds.layout.model;
+
+import static org.junit.jupiter.api.Assertions.assertEquals;
+import static org.junit.jupiter.api.Assertions.assertNull;
+
+import org.junit.jupiter.api.Test;
+
+import org.exoplatform.portal.config.model.Application;
+import org.exoplatform.portal.config.model.ModelStyle;
+import org.exoplatform.portal.config.model.TransientApplicationState;
+
+/**
+ * Legacy application margins are read once, server-side, from
+ * the Vuetify spacing tokens still stored in the cssClass (value = N x 4 + 20
+ * on the platform scale), whatever scale the stored attribute used, and the
+ * tokens are stripped from the class exposed to the Vue consumers.
+ */
+public class LayoutModelTest {
+
+  @Test
+  public void shouldReadLegacyMarginsFromXmlImportedApplicationTokens() {
+    // page XML: 20-neutral attribute next to the tokens ModelStyle generated at import (mt-n1 = -4px)
+    LayoutModel model = new LayoutModel(application(16, 8, 4, 0, "mt-n1 mb-n3 me-n4 ms-n5 TEST-class"));
+    assertEquals(16, model.getMarginTop());
+    assertEquals(8, model.getMarginBottom());
+    assertEquals(4, model.getMarginRight());
+    assertEquals(0, model.getMarginLeft());
+    assertEquals("TEST-class", model.getCssClass());
+  }
+
+  @Test
+  public void shouldReadLegacyMarginsFromEditorSavedApplicationTokens() {
+    // editor before 7.3.0.30: 0-neutral attribute next to the tokens the editor wrote for the same -4px
+    LayoutModel model = new LayoutModel(application(-4, -12, -16, -20, "mt-n1 mb-n3 me-n4 ms-n5"));
+    assertEquals(16, model.getMarginTop());
+    assertEquals(8, model.getMarginBottom());
+    assertEquals(4, model.getMarginRight());
+    assertEquals(0, model.getMarginLeft());
+    assertNull(model.getCssClass());
+  }
+
+  @Test
+  public void shouldKeepPlatformScaleMarginsWithoutTokens() {
+    LayoutModel model = new LayoutModel(application(32, 20, null, null, "brtr-2 TEST-class"));
+    assertEquals(32, model.getMarginTop());
+    assertEquals(20, model.getMarginBottom());
+    assertNull(model.getMarginRight());
+    // Application.getCssClass() prefixes the style tokens with a space (pre-existing): only the content matters here
+    assertEquals("brtr-2 TEST-class", model.getCssClass().trim());
+  }
+
+  @Test
+  public void shouldReadPositiveAndBreakpointTokens() {
+    LayoutModel model = new LayoutModel(application(null, null, null, null, "mt-3 mb-0 mr-md-2 ml-1"));
+    assertEquals(32, model.getMarginTop());
+    assertEquals(20, model.getMarginBottom());
+    assertEquals(28, model.getMarginRight());
+    assertEquals(24, model.getMarginLeft());
+    assertNull(model.getCssClass());
+  }
+
+  private Application application(Integer top, Integer bottom, Integer right, Integer left, String cssClass) {
+    Application application = new Application("storageId");
+    application.setState(new TransientApplicationState("layout/Test"));
+    ModelStyle style = new ModelStyle();
+    style.setMarginTop(top);
+    style.setMarginBottom(bottom);
+    style.setMarginRight(right);
+    style.setMarginLeft(left);
+    application.setCssStyle(style);
+    application.setCssClass(cssClass);
+    return application;
+  }
+
+}
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 8d494d351..0f49e6e71 100644
--- a/layout-webapp/src/main/resources/locale/portlet/LayoutEditor_en.properties
+++ b/layout-webapp/src/main/resources/locale/portlet/LayoutEditor_en.properties
@@ -50,26 +50,7 @@ layout.pageDraftSavedSuccessfully=Page draft saved successfully
 layout.pageOutdatedError=The current page version seems to be outdated. Please try again by refreshing the page or check if another session is ongoing (another browser tab) or contact the support services.
 layout.switchToDesktop=Switch to Desktop View
 layout.switchToMobile=Switch to Mobile View
-layout.margins=Margins
-layout.top=Top
-layout.right=Right
-layout.bottom=Bottom
-layout.left=Left
-layout.border=Border
-layout.borderColor=Color
-layout.borderSize=Size
-layout.boxShadow=Shadow
-layout.borderRadius=Radius
-layout.ok=Ok
 layout.view=View
-layout.sameForAllSides=Same for all sides
-layout.differentForEachSide=Different for each side
-layout.sameForAllCorners=Same for all corners
-layout.differentForEachCorner=Different for each corner
-layout.topRight=Top-Right
-layout.topLeft=Top-Left
-layout.bottomRight=Bottom-Right
-layout.bottomLeft=Bottom-Left
 layout.chooseATemplate=Choose a template
 layout.fixedSectionTypeChoice=Fixed Section
 layout.dynamicSectionTypeChoice=Dynamic Section
@@ -397,42 +378,13 @@ portletInstance.label.close=Close
 
 
 layout.editPortletInstance=Edit portlet instance {0}
-layout.uploadBackgroundImageTitle=Upload a background image
-layout.deleteBackgroundImageTitle=Delete the background image
 layout.background=Background
 layout.backgroundColor=Background color
 layout.backgroundImage=Background image
 layout.image=Image
-layout.imageSizeTitle=Size
-layout.imageSizeCover=Fill, cropped
-layout.imageSizeContain=Fit, whole image
-layout.imageRepeatTitle=Repeat
-layout.imageRepeat=Repeat
-layout.imageNoRepeat=No repeat
-layout.imageScrollingTitle=Scrolling
-layout.imageScrollingFixed=Stays fixed
-layout.imageScrollingScroll=Scrolls with page
 layout.editPageProperties=Edit page design
 layout.fullWindow=Full window
-layout.imagePositionTitle=Position
-layout.imagePositionCenter=Center
-layout.imagePositionTopLeft=Top left
-layout.imagePositionTopRight=Top right
-layout.imagePositionBottomLeft=Bottom left
-layout.imagePositionBottomRight=Bottom right
 layout.gradient=Gradient
-layout.gradientFrom=From
-layout.gradientTo=To
-layout.linearGradient=Linear Gradient
-layout.radialGradient=Radial Gradient
-layout.angularGradient=Angular Gradient
-layout.gradientDirectionTopToBottom=Top to Bottom
-layout.gradientDirectionLeftToRight=Left to Right
-layout.gradientCornerTopLeft=Top Left
-layout.gradientCornerTopRight=Top Right
-layout.gradientCornerBottomRight=Bottom Right
-layout.gradientCornerBottomLeft=Bottom Left
-layout.gradientRatio=Ratio
 layout.saveDraft=Save
 layout.saveDraftTooltip=Save page as draft
 layout.saveSiteDraftTooltip=Save site as draft
@@ -449,13 +401,6 @@ layout.draftConfirmQuestion=Do you want to resume the draft?
 layout.draftConfirmOkLabel=Resume Draft
 layout.draftConfirmCancelLabel=Create New
 layout.pageBeingEditedByYouInOther=This version of the page is outdated and has been replaced by another one.
-layout.textStyle=Text
-layout.textColorTitle=Title
-layout.textColorHeader=Header
-layout.textColorBody=Body
-layout.textColorSubtitle=Subtitle
-layout.textBackground=Text Background
-layout.color=Solid Color
 layout.applicationStyling=Application Styling
 layout.globalPageDesign=Global Page Design
 layout.globalPageBackground=Page Background
@@ -665,7 +610,5 @@ layout.adjustPortalPageWidth=Adjust Page width
 layout.editSiteLayout=Edit Site Layout
 layout.editSiteNavigation=Edit Site Navigation
 layout.pageMargins=Page Margins
-layout.scrollTopColor=Top
-layout.scrollMiddleColor=On scroll
 layout.siteDesign=Site Design
 layout.siteBackground=Site Background
diff --git a/layout-webapp/src/main/webapp/WEB-INF/gatein-resources.xml b/layout-webapp/src/main/webapp/WEB-INF/gatein-resources.xml
index 0561a4237..9b6fb0a56 100644
--- a/layout-webapp/src/main/webapp/WEB-INF/gatein-resources.xml
+++ b/layout-webapp/src/main/webapp/WEB-INF/gatein-resources.xml
@@ -34,6 +34,7 @@
     <portlet-name>LayoutEditor</portlet-name>
     <skin-name>Enterprise</skin-name>
     <additional-module>LayoutEditor</additional-module>
+    <additional-module>StylingInputs</additional-module>
   </portlet-skin>
 
   <portlet-skin>
@@ -41,6 +42,7 @@
     <portlet-name>SiteLayoutEditor</portlet-name>
     <skin-name>Enterprise</skin-name>
     <additional-module>LayoutEditor</additional-module>
+    <additional-module>StylingInputs</additional-module>
   </portlet-skin>
 
   <portlet-skin>
@@ -48,6 +50,7 @@
     <portlet-name>SectionEditor</portlet-name>
     <skin-name>Enterprise</skin-name>
     <additional-module>LayoutEditor</additional-module>
+    <additional-module>StylingInputs</additional-module>
   </portlet-skin>
 
   <portlet-skin>
@@ -55,6 +58,28 @@
     <portlet-name>SectionTemplates</portlet-name>
     <skin-name>Enterprise</skin-name>
     <additional-module>LayoutEditor</additional-module>
+    <additional-module>StylingInputs</additional-module>
+  </portlet-skin>
+
+  <portlet-skin>
+    <application-name>layout</application-name>
+    <portlet-name>PageTemplatesManagement</portlet-name>
+    <skin-name>Enterprise</skin-name>
+    <additional-module>StylingInputs</additional-module>
+  </portlet-skin>
+
+  <portlet-skin>
+    <application-name>layout</application-name>
+    <portlet-name>Portlets</portlet-name>
+    <skin-name>Enterprise</skin-name>
+    <additional-module>StylingInputs</additional-module>
+  </portlet-skin>
+
+  <portlet-skin>
+    <application-name>layout</application-name>
+    <portlet-name>PortletEditor</portlet-name>
+    <skin-name>Enterprise</skin-name>
+    <additional-module>StylingInputs</additional-module>
   </portlet-skin>
 
   <module>
@@ -65,6 +90,9 @@
     <depends>
       <module>commonVueComponents</module>
     </depends>
+    <depends>
+      <module>stylingUtils</module>
+    </depends>
     <depends>
       <module>translationField</module>
     </depends>
@@ -200,6 +228,9 @@
       <depends>
         <module>commonLayoutComponents</module>
       </depends>
+      <depends>
+        <module>stylingInputs</module>
+      </depends>
       <depends>
         <module>vueDraggable</module>
       </depends>
@@ -244,6 +275,9 @@
       <depends>
         <module>commonLayoutComponents</module>
       </depends>
+      <depends>
+        <module>stylingInputs</module>
+      </depends>
       <depends>
         <module>vueDraggable</module>
       </depends>
@@ -288,6 +322,9 @@
       <depends>
         <module>commonLayoutComponents</module>
       </depends>
+      <depends>
+        <module>stylingInputs</module>
+      </depends>
       <depends>
         <module>vueDraggable</module>
       </depends>
@@ -395,6 +432,9 @@
       <depends>
         <module>commonLayoutComponents</module>
       </depends>
+      <depends>
+        <module>stylingInputs</module>
+      </depends>
       <depends>
         <module>attachImage</module>
       </depends>
@@ -426,6 +466,9 @@
       <depends>
         <module>commonLayoutComponents</module>
       </depends>
+      <depends>
+        <module>stylingInputs</module>
+      </depends>
       <depends>
         <module>attachImage</module>
       </depends>
@@ -472,6 +515,9 @@
       <depends>
         <module>commonLayoutComponents</module>
       </depends>
+      <depends>
+        <module>stylingInputs</module>
+      </depends>
       <depends>
         <module>attachImage</module>
       </depends>
@@ -541,6 +587,9 @@
       <depends>
         <module>commonLayoutComponents</module>
       </depends>
+      <depends>
+        <module>stylingInputs</module>
+      </depends>
       <depends>
         <module>attachImage</module>
       </depends>
diff --git a/layout-webapp/src/main/webapp/skin/less/editor.less b/layout-webapp/src/main/webapp/skin/less/editor.less
index 723462cd7..5abae746a 100644
--- a/layout-webapp/src/main/webapp/skin/less/editor.less
+++ b/layout-webapp/src/main/webapp/skin/less/editor.less
@@ -117,16 +117,6 @@
   background-size: 4px 4px !important;
 }
 
-.layout-color-picker-swatch {
-  background-image:
-    linear-gradient(45deg, #bbb 25%, transparent 25%),
-    linear-gradient(-45deg, #bbb 25%, transparent 25%),
-    linear-gradient(45deg, transparent 75%, #bbb 75%),
-    linear-gradient(-45deg, transparent 75%, #bbb 75%);
-  background-size: 10px 10px;
-  background-position: 0 0, 0 5px, 5px -5px, -5px 0;
-}
-
 .layout-section {
 
   .layout-section-hover {
diff --git a/layout-webapp/src/main/webapp/vue-app/common-layout/components/content/base/ContainerBase.vue b/layout-webapp/src/main/webapp/vue-app/common-layout/components/content/base/ContainerBase.vue
index e263bbbdd..b04ebd3fa 100644
--- a/layout-webapp/src/main/webapp/vue-app/common-layout/components/content/base/ContainerBase.vue
+++ b/layout-webapp/src/main/webapp/vue-app/common-layout/components/content/base/ContainerBase.vue
@@ -132,6 +132,12 @@ export default {
       type: Boolean,
       default: false,
     },
+    // Page editor: the page container is rendered with the site style but must preview the applications' default
+    // margins set in Edit Page (appMargin*), as the view-time page style does
+    pageAppMargins: {
+      type: Boolean,
+      default: false,
+    },
     pageStyle: {
       type: Boolean,
       default: false,
@@ -199,6 +205,7 @@ export default {
         noBackgroundStyle: this.noBackgroundStyle,
         siteStyle: this.siteStyle,
         pageStyle: this.pageStyle,
+        pageAppMargins: this.pageAppMargins,
         sectionStyle: this.sectionStyle,
         appStyle: !this.noApplicationStyle,
         dynamicWidth: this.dynamicWidth,
diff --git a/layout-webapp/src/main/webapp/vue-app/common-layout/components/content/container/Application.vue b/layout-webapp/src/main/webapp/vue-app/common-layout/components/content/container/Application.vue
index 567010eef..2aa818652 100644
--- a/layout-webapp/src/main/webapp/vue-app/common-layout/components/content/container/Application.vue
+++ b/layout-webapp/src/main/webapp/vue-app/common-layout/components/content/container/Application.vue
@@ -227,6 +227,7 @@ export default {
         isApplicationBackground: true,
         isApplicationScroll: true,
         appStyle: true,
+        applicationMargins: true,
       });
     },
     moveEnd() {
diff --git a/layout-webapp/src/main/webapp/vue-app/common-layout/components/drawer/EditPageDrawer.vue b/layout-webapp/src/main/webapp/vue-app/common-layout/components/drawer/EditPageDrawer.vue
index cfaa90b7d..dc782a350 100644
--- a/layout-webapp/src/main/webapp/vue-app/common-layout/components/drawer/EditPageDrawer.vue
+++ b/layout-webapp/src/main/webapp/vue-app/common-layout/components/drawer/EditPageDrawer.vue
@@ -140,6 +140,13 @@
             {{ $t('layout.applicationStyling') }}
           </div>
         </div>
+        <layout-editor-margin-input
+          ref="appMarginInput"
+          v-model="pageContainer"
+          :min="0"
+          :max="80"
+          field-prefix="app"
+          class="mt-4" />
         <layout-editor-border-input
           ref="appBorderInput"
           v-model="pageContainer"
diff --git a/layout-webapp/src/main/webapp/vue-app/common-layout/components/form/BackgroundImageAttachment.vue b/layout-webapp/src/main/webapp/vue-app/common-layout/components/form/BackgroundImageAttachment.vue
deleted file mode 100644
index 828028490..000000000
--- a/layout-webapp/src/main/webapp/vue-app/common-layout/components/form/BackgroundImageAttachment.vue
+++ /dev/null
@@ -1,172 +0,0 @@
-<!--
-
- This file is part of the Meeds project (https://meeds.io/).
-
- Copyright (C) 2020 - 2024 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 class="pt-4">
-    <div class="d-flex pb-2">
-      <div>
-        <slot name="title"></slot>
-      </div>
-      <v-spacer />
-      <v-tooltip :disabled="disableTooltip" bottom>
-        <template #activator="{on, attrs}">
-          <div
-            v-on="on"
-            v-bind="attrs">
-            <v-btn
-              v-if="value || sendingImage"
-              id="deleteImageFileInput"
-              :loading="sendingImage"
-              :aria-label="$t('layout.deleteBackgroundImageTitle')"
-              icon
-              dense
-              @click="reset">
-              <v-icon color="error" dense>fa-trash</v-icon>
-            </v-btn>
-            <v-file-input
-              v-else
-              id="imageFileInput"
-              :loading="sendingImage"
-              ref="uploadInput"
-              accept="image/*"
-              prepend-icon="fas fa-camera z-index-two rounded-circle primary-border-color white py-1 ms-3"
-              class="file-selector pa-0 ma-0"
-              rounded
-              clearable
-              dense
-              @change="uploadFile" />
-          </div>
-        </template>
-        <span>{{ value && $t('layout.deleteBackgroundImageTitle') || $t('layout.uploadBackgroundImageTitle') }}</span>
-      </v-tooltip>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    value: {
-      type: String,
-      default: null,
-    },
-    storageId: {
-      type: String,
-      default: null,
-    },
-    immediateSave: {
-      type: Boolean,
-      default: false,
-    },
-    objectType: {
-      type: String,
-      default: 'containerBackground',
-    },
-  },
-  data: () => ({
-    changed: false,
-    sendingImage: false,
-    uploadId: null,
-    disableTooltip: false,
-    attachments: null,
-  }),
-  computed: {
-    illustrationId() {
-      return this.attachments?.[0]?.id;
-    },
-    remoteIllustrationSrc() {
-      return this.illustrationId && `${eXo.env.portal.context}/${eXo.env.portal.rest}/v1/social/attachments/${this.objectType}/${this.storageId}/${this.illustrationId}` || null;
-    },
-  },
-  watch: {
-    sendingImage() {
-      this.$emit('sending', this.sendingImage);
-    },
-    value() {
-      this.disableTooltip = true;
-      window.setTimeout(() => this.disableTooltip = false, 50);
-    },
-  },
-  methods: {
-    uploadFile(file) {
-      if (file && file.size) {
-        if (file.size > this.maxUploadSize) {
-          this.$root.$emit('alert-message', this.$t(this.$uploadService.avatarExcceedsLimitError), 'error');
-          return;
-        }
-        this.sendingImage = true;
-        const thiss = this;
-        return this.$uploadService.upload(file)
-          .then(uploadId => {
-            const reader = new FileReader();
-            reader.onload = (e) => {
-              if (thiss.immediateSave) {
-                thiss.save();
-              } else {
-                thiss.$emit('input', e.target.result);
-                thiss.$forceUpdate();
-              }
-            };
-            reader.readAsDataURL(file);
-            this.uploadId = uploadId;
-            this.changed = true;
-          })
-          .then(() => this.$emit('refresh'))
-          .catch(() => this.$root.$emit('alert-message', this.$t('layout.errorUploadingPreview'), 'error'))
-          .finally(() => this.sendingImage = false);
-      }
-    },
-    reset() {
-      this.uploadId = null;
-      this.$emit('input', null);
-      this.changed = true;
-    },
-    save() {
-      if (this.changed) {
-        return this.$fileAttachmentService.saveAttachments({
-          objectType: this.objectType,
-          objectId: this.storageId,
-          uploadedFiles: this.uploadId && [{uploadId: this.uploadId}] || [],
-          attachedFiles: [],
-        }).then((report) => {
-          if (report?.errorByUploadId?.length) {
-            const attachmentHtmlError = Object.values(report.errorByUploadId).join('<br>');
-            this.$root.$emit('alert-message-html', attachmentHtmlError, 'error');
-          } else {
-            return this.getAttachments()
-              .then(() => {
-                if (this.$refs.uploadInput) {
-                  this.$refs.uploadInput.reset();
-                }
-                if (this.immediateSave) {
-                  this.$emit('input', this.remoteIllustrationSrc);
-                }
-                return this.remoteIllustrationSrc;
-              });
-          }
-        });
-      }
-    },
-    async getAttachments() {
-      return await this.$fileAttachmentService.getAttachments(this.objectType, this.storageId)
-        .then(data => this.attachments = data?.attachments || []);
-    },
-  },
-};
-</script>
\ No newline at end of file
diff --git a/layout-webapp/src/main/webapp/vue-app/common-layout/components/form/BackgroundInput.vue b/layout-webapp/src/main/webapp/vue-app/common-layout/components/form/BackgroundInput.vue
deleted file mode 100644
index 189edc383..000000000
--- a/layout-webapp/src/main/webapp/vue-app/common-layout/components/form/BackgroundInput.vue
+++ /dev/null
@@ -1,605 +0,0 @@
-<!--
-
- This file is part of the Meeds project (https://meeds.io/).
-
- Copyright (C) 2020 - 2024 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>
-    <div class="d-flex align-center">
-      <slot v-if="$slots.title" name="title"></slot>
-      <div
-        v-else
-        :class="textBold && 'font-weight-bold' || 'text-header'"
-        class="me-auto">
-        {{ $t('layout.background') }}
-      </div>
-      <v-switch
-        v-model="enabled"
-        class="ms-auto my-auto me-n2" />
-    </div>
-    <v-list-item
-      v-if="enabled"
-      class="pa-0"
-      dense>
-      <v-list-item-content class="my-auto align-start">
-        <v-radio-group
-          v-model="choice"
-          class="my-auto text-no-wrap flex-grow-1 flex-shrink-0"
-          mandatory>
-          <v-radio
-            value="color"
-            class="mx-0">
-            <template #label>
-              <span>{{ $t('layout.color') }}</span>
-            </template>
-          </v-radio>
-          <v-radio
-            value="linear"
-            class="mx-0">
-            <template #label>
-              <span>{{ $t('layout.linearGradient') }}</span>
-            </template>
-          </v-radio>
-          <v-radio-group
-            v-if="choice === 'linear'"
-            v-model="gradientDirection"
-            class="my-0 ms-8 text-no-wrap"
-            mandatory>
-            <v-radio
-              value="to bottom"
-              class="mx-0">
-              <template #label>
-                <span>{{ $t('layout.gradientDirectionTopToBottom') }}</span>
-              </template>
-            </v-radio>
-            <v-radio
-              value="to right"
-              class="mx-0">
-              <template #label>
-                <span>{{ $t('layout.gradientDirectionLeftToRight') }}</span>
-              </template>
-            </v-radio>
-          </v-radio-group>
-          <v-radio
-            value="radial"
-            class="mx-0">
-            <template #label>
-              <span>{{ $t('layout.radialGradient') }}</span>
-            </template>
-          </v-radio>
-          <v-radio
-            value="angular"
-            class="mx-0">
-            <template #label>
-              <span>{{ $t('layout.angularGradient') }}</span>
-            </template>
-          </v-radio>
-          <v-radio-group
-            v-if="choice === 'angular'"
-            v-model="gradientCorner"
-            class="my-0 ms-8 text-no-wrap"
-            mandatory>
-            <v-radio
-              value="top left"
-              class="mx-0">
-              <template #label>
-                <span>{{ $t('layout.gradientCornerTopLeft') }}</span>
-              </template>
-            </v-radio>
-            <v-radio
-              value="top right"
-              class="mx-0">
-              <template #label>
-                <span>{{ $t('layout.gradientCornerTopRight') }}</span>
-              </template>
-            </v-radio>
-            <v-radio
-              value="bottom right"
-              class="mx-0">
-              <template #label>
-                <span>{{ $t('layout.gradientCornerBottomRight') }}</span>
-              </template>
-            </v-radio>
-            <v-radio
-              value="bottom left"
-              class="mx-0">
-              <template #label>
-                <span>{{ $t('layout.gradientCornerBottomLeft') }}</span>
-              </template>
-            </v-radio>
-          </v-radio-group>
-        </v-radio-group>
-      </v-list-item-content>
-      <v-list-item-action
-        :class="choice === 'color' && !scrollColor && 'mb-auto' || 'my-auto'"
-        class="me-0 ms-auto">
-        <layout-editor-color-picker
-          v-if="choice === 'color' && !scrollColor"
-          v-model="container.backgroundColor"
-          class="my-auto" />
-        <div v-else-if="choice === 'color' && scrollColor">
-          <layout-editor-color-picker
-            v-model="backgroundScrollTop"
-            :label="$t('layout.scrollTopColor')"
-            class="my-auto" />
-          <layout-editor-color-picker
-            v-model="backgroundScrollMiddle"
-            :label="$t('layout.scrollMiddleColor')"
-            class="my-auto" />
-        </div>
-        <div v-else-if="isGradient">
-          <layout-editor-color-picker
-            v-model="backgroundGradientFrom"
-            :label="$t('layout.gradientFrom')"
-            class="my-auto" />
-          <layout-editor-color-picker
-            v-model="backgroundGradientTo"
-            :label="$t('layout.gradientTo')"
-            class="my-auto" />
-        </div>
-      </v-list-item-action>
-    </v-list-item>
-
-    <v-list-item
-      v-if="isGradient"
-      class="pa-0"
-      dense>
-      <v-list-item-content class="my-auto">
-        {{ $t('layout.gradientRatio') }}
-      </v-list-item-content>
-      <v-list-item-action class="my-auto me-0 ms-auto">
-        {{ gradientRatio }}/{{ 100 - gradientRatio }}
-      </v-list-item-action>
-    </v-list-item>
-    <div
-      v-if="isGradient"
-      class="d-flex align-center px-1 pb-2">
-      <span class="text-subtitle me-2">{{ $t('layout.gradientFrom') }}</span>
-      <v-slider
-        v-model="gradientRatio"
-        min="0"
-        max="100"
-        hide-details
-        class="flex-grow-1 mt-0" />
-      <span class="text-subtitle ms-2">{{ $t('layout.gradientTo') }}</span>
-    </div>
-
-    <v-list-item
-      v-if="enabled"
-      class="pa-0"
-      dense>
-      <v-list-item-content class="my-auto">
-        {{ $t('layout.image') }}
-      </v-list-item-content>
-      <v-list-item-action class="my-auto me-0 ms-auto">
-        <layout-editor-background-image-attachment
-          v-model="container.backgroundImage"
-          ref="backgroundImage"
-          :storage-id="objectId"
-          :immediate-save="immediateSave"
-          class="my-auto" />
-      </v-list-item-action>
-    </v-list-item>
-    <template v-if="container.backgroundImage">
-      <div class="text-subtitle mt-1">{{ $t('layout.imageSizeTitle') }}</div>
-      <v-radio-group
-        v-model="container.backgroundSize"
-        class="my-0 text-no-wrap"
-        mandatory
-        hide-details>
-        <div class="d-flex flex-wrap">
-          <v-radio
-            value="cover"
-            class="col-6 pa-0 mx-0 my-1">
-            <template #label>
-              <span>{{ $t('layout.imageSizeCover') }}</span>
-            </template>
-          </v-radio>
-          <v-radio
-            value="contain"
-            class="col-6 pa-0 mx-0 my-1">
-            <template #label>
-              <span>{{ $t('layout.imageSizeContain') }}</span>
-            </template>
-          </v-radio>
-        </div>
-      </v-radio-group>
-
-      <div class="text-subtitle mt-2">{{ $t('layout.imagePositionTitle') }}</div>
-      <v-radio-group
-        v-model="container.backgroundPosition"
-        class="my-0 text-no-wrap"
-        mandatory
-        hide-details>
-        <div class="d-flex flex-wrap">
-          <v-radio
-            value="center"
-            class="col-12 pa-0 mx-0 my-1">
-            <template #label>
-              <span>{{ $t('layout.imagePositionCenter') }}</span>
-            </template>
-          </v-radio>
-          <v-radio
-            value="top right"
-            class="col-6 pa-0 mx-0 my-1">
-            <template #label>
-              <span>{{ $t('layout.imagePositionTopRight') }}</span>
-            </template>
-          </v-radio>
-          <v-radio
-            value="top left"
-            class="col-6 pa-0 mx-0 my-1">
-            <template #label>
-              <span>{{ $t('layout.imagePositionTopLeft') }}</span>
-            </template>
-          </v-radio>
-          <v-radio
-            value="bottom right"
-            class="col-6 pa-0 mx-0 my-1">
-            <template #label>
-              <span>{{ $t('layout.imagePositionBottomRight') }}</span>
-            </template>
-          </v-radio>
-          <v-radio
-            value="bottom left"
-            class="col-6 pa-0 mx-0 my-1">
-            <template #label>
-              <span>{{ $t('layout.imagePositionBottomLeft') }}</span>
-            </template>
-          </v-radio>
-        </div>
-      </v-radio-group>
-
-      <div class="text-subtitle mt-2">{{ $t('layout.imageScrollingTitle') }}</div>
-      <v-radio-group
-        v-model="container.backgroundAttachment"
-        class="my-0 text-no-wrap"
-        mandatory
-        hide-details>
-        <div class="d-flex flex-wrap">
-          <v-radio
-            value="fixed"
-            class="col-6 pa-0 mx-0 my-1">
-            <template #label>
-              <span>{{ $t('layout.imageScrollingFixed') }}</span>
-            </template>
-          </v-radio>
-          <v-radio
-            value="scroll"
-            class="col-6 pa-0 mx-0 my-1">
-            <template #label>
-              <span>{{ $t('layout.imageScrollingScroll') }}</span>
-            </template>
-          </v-radio>
-        </div>
-      </v-radio-group>
-
-      <div class="text-subtitle mt-2">{{ $t('layout.imageRepeatTitle') }}</div>
-      <v-radio-group
-        v-model="container.backgroundRepeat"
-        class="my-0 text-no-wrap"
-        mandatory
-        hide-details>
-        <div class="d-flex flex-wrap">
-          <v-radio
-            value="no-repeat"
-            class="col-6 pa-0 mx-0 my-1">
-            <template #label>
-              <span>{{ $t('layout.imageNoRepeat') }}</span>
-            </template>
-          </v-radio>
-          <v-radio
-            value="repeat"
-            class="col-6 pa-0 mx-0 my-1">
-            <template #label>
-              <span>{{ $t('layout.imageRepeat') }}</span>
-            </template>
-          </v-radio>
-        </div>
-      </v-radio-group>
-    </template>
-    <layout-editor-background-margin-input
-      v-if="enabled"
-      :value="container"
-      class="my-auto" />
-    <layout-editor-background-radius-input
-      v-if="enabled"
-      :value="container"
-      class="my-auto" />
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    value: {
-      type: Object,
-      default: null,
-    },
-    defaultBackgroundColor: {
-      type: String,
-      default: () => '#FFFFFFFF',
-    },
-    immediateSave: {
-      type: Boolean,
-      default: false,
-    },
-    scrollColor: {
-      type: Boolean,
-      default: false,
-    },
-    textBold: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data: () => ({
-    container: null,
-    enabled: false,
-    choice: null,
-    backgroundScrollTop: null,
-    backgroundScrollMiddle: null,
-    backgroundGradientFrom: null,
-    backgroundGradientTo: null,
-    gradientDirection: null,
-    gradientCorner: null,
-    gradientRatio: null,
-    initialized: false,
-  }),
-  computed: {
-    isGradient() {
-      return this.choice === 'linear' || this.choice === 'radial' || this.choice === 'angular';
-    },
-    id() {
-      return this.container.storageId || this.container.id;
-    },
-    objectId() {
-      return this.$root.isSiteLayout ? `site_${this.$root.siteId}_${this.id}` : `page_${this.$root.pageId}_${this.id}`;
-    },
-    backgroundColor() {
-      return this.container.backgroundColor;
-    },
-    backgroundColorChoice() {
-      if (!this.enabled) {
-        return null;
-      } else if (this.choice === 'color'
-        && !this.scrollColor) {
-        return this.backgroundColor?.includes?.('@') ? this.backgroundColor.split('@')[0] : this.backgroundColor;
-      } else if (this.choice === 'color'
-        && this.scrollColor) {
-        return `${this.backgroundScrollTop}@${this.backgroundScrollMiddle}`;
-      } else {
-        return '#FFFFFF00';
-      }
-    },
-    angularStartAngle() {
-      return {
-        'top left': '90deg',
-        'top right': '180deg',
-        'bottom right': '270deg',
-        'bottom left': '0deg',
-      }[this.gradientCorner] || '0deg';
-    },
-    angularReversed() {
-      // The gradient line always sweeps clockwise from angularStartAngle. For
-      // these 2 corners, that start angle lands on the edge opposite to the
-      // corner's own name (e.g. "top right" starts at its right edge), so the
-      // From/To colors must be swapped for From to appear next to that edge.
-      return this.gradientCorner === 'top right' || this.gradientCorner === 'bottom left';
-    },
-    backgroundEffect() {
-      if (!this.backgroundGradientFrom || !this.backgroundGradientTo) {
-        return null;
-      }
-      const ratio = this.gradientRatio ?? 50;
-      if (this.choice === 'linear') {
-        const stops = `${this.backgroundGradientFrom} 0%, ${this.backgroundGradientFrom} ${ratio}%, ${this.backgroundGradientTo} 100%`;
-        return this.gradientDirection === 'to right' ?
-          `linear-gradient(to right, ${stops})` :
-          `linear-gradient(${stops})`;
-      } else if (this.choice === 'radial') {
-        return `radial-gradient(${this.backgroundGradientFrom} 0%, ${this.backgroundGradientFrom} ${ratio}%, ${this.backgroundGradientTo} 100%)`;
-      } else if (this.choice === 'angular') {
-        const edgeColor = this.angularReversed ? this.backgroundGradientTo : this.backgroundGradientFrom;
-        const farColor = this.angularReversed ? this.backgroundGradientFrom : this.backgroundGradientTo;
-        // The plateau (ratio-sized block of solid color) always sits next
-        // to From's own edge, whichever end of the stop list that is.
-        const midPercent = this.angularReversed ? (100 - ratio) : ratio;
-        const midAngle = (midPercent / 100 * 90).toFixed(2);
-        return this.angularReversed ?
-          `conic-gradient(from ${this.angularStartAngle} at ${this.gradientCorner}, ${edgeColor} 0deg, ${farColor} ${midAngle}deg, ${farColor} 90deg)` :
-          `conic-gradient(from ${this.angularStartAngle} at ${this.gradientCorner}, ${edgeColor} 0deg, ${edgeColor} ${midAngle}deg, ${farColor} 90deg)`;
-      } else {
-        return null;
-      }
-    },
-  },
-  watch: {
-    container: {
-      deep: true,
-      handler() {
-        if (this.container) {
-          this.$emit('input', this.container);
-        }
-      },
-    },
-    scrollColor() {
-      if (this.initialized) {
-        this.container.backgroundColor = this.enabled && this.defaultBackgroundColor || null;
-        this.backgroundScrollTop = this.enabled && this.scrollColor && this.defaultBackgroundColor || null;
-        this.backgroundScrollMiddle = this.enabled && this.scrollColor && this.defaultBackgroundColor || null;
-      }
-    },
-    enabled() {
-      if (this.initialized) {
-        this.container.backgroundImage = null;
-        this.resetImageOptions();
-
-        this.container.backgroundColor = this.enabled && this.defaultBackgroundColor || null;
-        this.backgroundScrollTop = this.enabled && this.scrollColor && this.defaultBackgroundColor || null;
-        this.backgroundScrollMiddle = this.enabled && this.scrollColor && this.defaultBackgroundColor || null;
-        this.backgroundGradientFrom = null;
-        this.backgroundGradientTo = null;
-        this.gradientDirection = null;
-        this.gradientCorner = null;
-        this.gradientRatio = null;
-      }
-    },
-    'container.backgroundImage'(newVal) {
-      if (this.initialized && !newVal) {
-        // The 4 image options below are meaningless without an image, and a
-        // stale 'fixed'/'repeat' left behind would be re-applied as soon as
-        // another image is picked.
-        this.resetImageOptions();
-      }
-    },
-    backgroundColorChoice: {
-      immediate: true,
-      handler(newVal, oldVal) {
-        if (this.initialized && newVal !== oldVal) {
-          this.container.backgroundColor = this.backgroundColorChoice;
-        }
-      },
-    },
-    backgroundEffect: {
-      immediate: true,
-      handler(newVal, oldVal) {
-        if (this.initialized && newVal !== oldVal) {
-          this.container.backgroundEffect = this.backgroundEffect;
-        }
-      },
-    },
-    choice() {
-      if (this.initialized) {
-        if (this.choice === 'color') {
-          this.backgroundGradientFrom = null;
-          this.backgroundGradientTo = null;
-          this.gradientDirection = null;
-          this.gradientCorner = null;
-          this.gradientRatio = null;
-          this.container.backgroundColor = this.enabled && this.defaultBackgroundColor || null;
-          this.backgroundScrollTop = this.enabled && this.scrollColor && this.defaultBackgroundColor || null;
-          this.backgroundScrollMiddle = this.enabled && this.scrollColor && this.defaultBackgroundColor || null;
-        } else {
-          this.backgroundGradientFrom = this.backgroundGradientFrom || this.defaultBackgroundColor;
-          this.backgroundGradientTo = this.backgroundGradientTo || '#999999FF';
-          this.gradientRatio = this.gradientRatio ?? 50;
-          if (this.choice === 'linear') {
-            this.gradientDirection = this.gradientDirection || 'to bottom';
-          } else if (this.choice === 'angular') {
-            this.gradientCorner = this.gradientCorner || 'top left';
-          }
-          this.container.backgroundColor = '#FFFFFF00';
-          this.backgroundScrollTop = null;
-          this.backgroundScrollMiddle = null;
-        }
-      }
-    },
-  },
-  created() {
-    this.container = this.value;
-    if (this.container.backgroundEffect?.startsWith('radial-gradient(')) {
-      this.choice = 'radial';
-      const stops = this.container.backgroundEffect.replace('radial-gradient(', '').replace(/\)$/, '').split(',').map(s => s.trim());
-      this.backgroundGradientFrom = stops[0].split(' ')[0];
-      if (stops.length === 3) {
-        this.gradientRatio = parseFloat(stops[1].split(' ')[1]);
-        this.backgroundGradientTo = stops[2].split(' ')[0];
-      } else {
-        this.gradientRatio = 50;
-        this.backgroundGradientTo = stops[stops.length - 1].split(' ')[0];
-      }
-    } else if (this.container.backgroundEffect?.startsWith('conic-gradient(')) {
-      this.choice = 'angular';
-      const inner = this.container.backgroundEffect.replace('conic-gradient(', '').replace(/\)$/, '');
-      const cornerMatch = inner.match(/at (top left|top right|bottom left|bottom right)/);
-      this.gradientCorner = cornerMatch ? cornerMatch[1] : 'top left';
-      const reversed = this.gradientCorner === 'top right' || this.gradientCorner === 'bottom left';
-      const stops = inner.substring(inner.indexOf(',') + 1).split(',').map(s => s.trim());
-      const firstColor = stops[0].split(' ')[0];
-      const lastColor = stops[stops.length - 1].split(' ')[0];
-      this.backgroundGradientFrom = reversed ? lastColor : firstColor;
-      this.backgroundGradientTo = reversed ? firstColor : lastColor;
-      if (stops.length === 3) {
-        const midPercent = Math.round(parseFloat(stops[1].split(' ')[1]) / 90 * 100);
-        this.gradientRatio = reversed ? (100 - midPercent) : midPercent;
-      } else {
-        this.gradientRatio = 50;
-      }
-    } else if (this.container.backgroundEffect?.startsWith('linear-gradient(')) {
-      this.choice = 'linear';
-      const inner = this.container.backgroundEffect.replace('linear-gradient(', '').replace(/\)$/, '');
-      const parts = inner.split(',').map(s => s.trim());
-      let stops = parts;
-      if (parts[0].startsWith('to ')) {
-        this.gradientDirection = parts[0];
-        stops = parts.slice(1);
-      } else {
-        this.gradientDirection = 'to bottom';
-      }
-      this.backgroundGradientFrom = stops[0].split(' ')[0];
-      if (stops.length === 3) {
-        this.gradientRatio = parseFloat(stops[1].split(' ')[1]);
-        this.backgroundGradientTo = stops[2].split(' ')[0];
-      } else {
-        this.gradientRatio = 50;
-        this.backgroundGradientTo = stops[stops.length - 1].split(' ')[0];
-      }
-    } else {
-      this.choice = 'color';
-    }
-
-    this.enabled = !!this.container.backgroundColor || !!this.container.backgroundImage;
-    if (this.enabled) {
-      if (!this.container.backgroundColor) {
-        this.container.backgroundColor = this.defaultBackgroundColor;
-      } else if (this.scrollColor) {
-        if (this.backgroundColor?.includes?.('@')) {
-          this.backgroundScrollTop = this.container.backgroundColor.split('@')[0];
-          this.backgroundScrollMiddle = this.container.backgroundColor.split('@')[1];
-        } else {
-          this.backgroundScrollTop = this.container.backgroundColor;
-          this.backgroundScrollMiddle = this.container.backgroundColor;
-        }
-      } else {
-        this.backgroundScrollTop = null;
-        this.backgroundScrollMiddle = null;
-      }
-    }
-    this.$nextTick().then(() => this.initialized = true);
-  },
-  methods: {
-    resetImageOptions() {
-      this.container.backgroundSize = null;
-      this.container.backgroundPosition = null;
-      this.container.backgroundAttachment = null;
-      this.container.backgroundRepeat = null;
-    },
-    async apply() {
-      if (this.enabled && this.$refs.backgroundImage) {
-        const backgroundImage = await this.$refs.backgroundImage.save();
-        if (backgroundImage) {
-          this.container.backgroundImage = backgroundImage;
-        }
-      } else {
-        this.container.backgroundImage = null;
-      }
-      return this.container;
-    },
-  },
-};
-</script>
\ No newline at end of file
diff --git a/layout-webapp/src/main/webapp/vue-app/common-layout/components/form/BackgroundMarginInput.vue b/layout-webapp/src/main/webapp/vue-app/common-layout/components/form/BackgroundMarginInput.vue
deleted file mode 100644
index ad25db563..000000000
--- a/layout-webapp/src/main/webapp/vue-app/common-layout/components/form/BackgroundMarginInput.vue
+++ /dev/null
@@ -1,227 +0,0 @@
-<!--
-
- This file is part of the Meeds project (https://meeds.io/).
-
- Copyright (C) 2020 - 2024 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>
-    <div class="d-flex align-center mb-2">
-      <div
-        :class="textBold && 'font-weight-bold'"
-        class="me-auto">
-        {{ $t('layout.margins') }}
-      </div>
-      <v-switch
-        v-model="enabled"
-        class="ms-auto my-auto me-n2" />
-    </div>
-    <div
-      v-if="enabled"
-      :class="marginChoice === 'same' && 'flex-row' || 'flex-column'"
-      class="d-flex">
-      <v-radio-group v-model="marginChoice" class="my-auto text-no-wrap ms-n1">
-        <v-radio
-          :label="$t('layout.sameForAllSides')"
-          value="same"
-          class="mx-0" />
-        <v-radio
-          :label="$t('layout.differentForEachSide')"
-          value="different"
-          class="mx-0" />
-      </v-radio-group>
-      <v-list-item class="pe-0 ps-7 py-0" dense>
-        <v-list-item-content
-          v-if="marginChoice === 'different'"
-          class="my-auto">
-          {{ $t('layout.top') }}
-        </v-list-item-content>
-        <number-input
-          v-model="marginTop"
-          :max="max"
-          :min="min"
-          :class="marginChoice === 'different' && 'my-auto' || 'mb-auto ms-auto'"
-          class="me-n3" />
-      </v-list-item>
-      <v-list-item
-        v-if="marginChoice === 'different'"
-        class="pe-0 ps-7 py-0"
-        dense>
-        <v-list-item-content class="my-auto">
-          {{ $t('layout.right') }}
-        </v-list-item-content>
-        <number-input
-          v-model="marginRight"
-          :max="max"
-          :min="min"
-          class="my-auto me-n3" />
-      </v-list-item>
-      <v-list-item
-        v-if="marginChoice === 'different'"
-        class="pe-0 ps-7 py-0"
-        dense>
-        <v-list-item-content class="my-auto">
-          {{ $t('layout.bottom') }}
-        </v-list-item-content>
-        <number-input
-          v-model="marginBottom"
-          :max="max"
-          :min="min"
-          class="my-auto me-n3" />
-      </v-list-item>
-      <v-list-item
-        v-if="marginChoice === 'different'"
-        class="pe-0 ps-7 py-0"
-        dense>
-        <v-list-item-content class="my-auto">
-          {{ $t('layout.left') }}
-        </v-list-item-content>
-        <number-input
-          v-model="marginLeft"
-          :max="max"
-          :min="min"
-          class="my-auto me-n3" />
-      </v-list-item>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    value: {
-      type: Object,
-      default: null,
-    },
-    max: {
-      type: Number,
-      default: () => 400,
-    },
-    min: {
-      type: Number,
-      default: () => 0,
-    },
-    textBold: {
-      type: Boolean,
-      default: false,
-    },
-    // When set, margin is read/written as a plain "T R B L" CSS shorthand
-    // string on container[field] instead of an opaque cssClass token
-    // (used for per-text-type backgrounds, which don't need the separate
-    // background-layer positioning that the opaque tokens exist for).
-    field: {
-      type: String,
-      default: null,
-    },
-  },
-  data: () => ({
-    container: null,
-    initialized: false,
-    enabled: false,
-    marginChoice: 'same',
-    marginTop: 0,
-    marginRight: 0,
-    marginBottom: 0,
-    marginLeft: 0,
-  }),
-  watch: {
-    marginTop() {
-      if (this.initialized) {
-        if (this.marginChoice === 'same') {
-          this.marginRight = this.marginTop;
-          this.marginBottom = this.marginTop;
-          this.marginLeft = this.marginTop;
-        }
-        this.save();
-      }
-    },
-    marginRight() {
-      if (this.initialized) {
-        this.save();
-      }
-    },
-    marginBottom() {
-      if (this.initialized) {
-        this.save();
-      }
-    },
-    marginLeft() {
-      if (this.initialized) {
-        this.save();
-      }
-    },
-    enabled() {
-      if (this.initialized) {
-        this.marginChoice = 'same';
-        this.marginTop = this.enabled ? 0 : null;
-        this.marginRight = this.enabled ? 0 : null;
-        this.marginBottom = this.enabled ? 0 : null;
-        this.marginLeft = this.enabled ? 0 : null;
-        this.save();
-      }
-    },
-    marginChoice() {
-      if (this.initialized && this.marginChoice === 'same') {
-        this.marginRight = this.marginTop;
-        this.marginBottom = this.marginTop;
-        this.marginLeft = this.marginTop;
-      }
-    },
-  },
-  created() {
-    this.container = this.value;
-    let values;
-    if (this.field) {
-      const parts = (this.container[this.field] || '').trim().split(/\s+/).map(v => parseInt(v) || 0);
-      values = {
-        marginTop: parts[0] || 0,
-        marginRight: parts[1] || 0,
-        marginBottom: parts[2] || 0,
-        marginLeft: parts[3] || 0,
-      };
-    } else {
-      values = this.$applicationUtils.parseBackgroundLayerValues(this.container.cssClass) || {};
-    }
-    this.marginTop = values.marginTop || 0;
-    this.marginRight = values.marginRight || 0;
-    this.marginBottom = values.marginBottom || 0;
-    this.marginLeft = values.marginLeft || 0;
-    this.marginChoice =
-      this.marginTop === this.marginRight
-      && this.marginRight === this.marginLeft
-      && this.marginLeft === this.marginBottom ? 'same' : 'different';
-    this.enabled = this.field ? !!this.container[this.field] : (this.marginChoice !== 'same' || this.marginTop !== 0);
-    this.$nextTick().then(() => this.initialized = true);
-  },
-  methods: {
-    save() {
-      if (this.field) {
-        this.$set(this.container, this.field, this.enabled
-          ? `${this.marginTop || 0}px ${this.marginRight || 0}px ${this.marginBottom || 0}px ${this.marginLeft || 0}px`
-          : null);
-      } else {
-        this.$applicationUtils.setBackgroundLayerValues(this.container, {
-          marginTop: this.enabled ? (this.marginTop || 0) : null,
-          marginRight: this.enabled ? (this.marginRight || 0) : null,
-          marginBottom: this.enabled ? (this.marginBottom || 0) : null,
-          marginLeft: this.enabled ? (this.marginLeft || 0) : null,
-        });
-      }
-      this.$emit('refresh');
-    },
-  },
-};
-</script>
diff --git a/layout-webapp/src/main/webapp/vue-app/common-layout/components/form/BackgroundRadiusInput.vue b/layout-webapp/src/main/webapp/vue-app/common-layout/components/form/BackgroundRadiusInput.vue
deleted file mode 100644
index ae2475136..000000000
--- a/layout-webapp/src/main/webapp/vue-app/common-layout/components/form/BackgroundRadiusInput.vue
+++ /dev/null
@@ -1,227 +0,0 @@
-<!--
-
- This file is part of the Meeds project (https://meeds.io/).
-
- Copyright (C) 2020 - 2024 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>
-    <div class="d-flex align-center mb-2">
-      <div
-        :class="textBold && 'font-weight-bold'"
-        class="me-auto">
-        {{ $t('layout.borderRadius') }}
-      </div>
-      <v-switch
-        v-model="enabled"
-        class="ms-auto my-auto me-n2" />
-    </div>
-    <div
-      v-if="enabled"
-      :class="choice === 'same' && 'flex-row' || 'flex-column'"
-      class="d-flex">
-      <v-radio-group v-model="choice" class="my-auto text-no-wrap ms-n1">
-        <v-radio
-          :label="$t('layout.sameForAllCorners')"
-          value="same"
-          class="mx-0" />
-        <v-radio
-          :label="$t('layout.differentForEachCorner')"
-          value="different"
-          class="mx-0" />
-      </v-radio-group>
-      <v-list-item class="pe-0 ps-7 py-0" dense>
-        <v-list-item-content v-if="choice === 'different'" class="my-auto">
-          {{ $t('layout.topRight') }}
-        </v-list-item-content>
-        <number-input
-          v-model="radiusTopRight"
-          :max="max"
-          :min="min"
-          :class="choice === 'different' && 'my-auto' || 'mb-auto ms-auto'"
-          class="me-n3" />
-      </v-list-item>
-      <v-list-item
-        v-if="choice === 'different'"
-        class="pe-0 ps-7 py-0"
-        dense>
-        <v-list-item-content class="my-auto">
-          {{ $t('layout.topLeft') }}
-        </v-list-item-content>
-        <number-input
-          v-model="radiusTopLeft"
-          :max="max"
-          :min="min"
-          class="my-auto me-n3" />
-      </v-list-item>
-      <v-list-item
-        v-if="choice === 'different'"
-        class="pe-0 ps-7 py-0"
-        dense>
-        <v-list-item-content class="my-auto">
-          {{ $t('layout.bottomRight') }}
-        </v-list-item-content>
-        <number-input
-          v-model="radiusBottomRight"
-          :max="max"
-          :min="min"
-          class="my-auto me-n3" />
-      </v-list-item>
-      <v-list-item
-        v-if="choice === 'different'"
-        class="pe-0 ps-7 py-0"
-        dense>
-        <v-list-item-content class="my-auto">
-          {{ $t('layout.bottomLeft') }}
-        </v-list-item-content>
-        <number-input
-          v-model="radiusBottomLeft"
-          :max="max"
-          :min="min"
-          class="my-auto me-n3" />
-      </v-list-item>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    value: {
-      type: Object,
-      default: null,
-    },
-    max: {
-      type: Number,
-      default: () => 120,
-    },
-    min: {
-      type: Number,
-      default: () => 0,
-    },
-    textBold: {
-      type: Boolean,
-      default: false,
-    },
-    // When set, radius is read/written as a plain CSS border-radius shorthand
-    // string ("top-left top-right bottom-right bottom-left") on
-    // container[field] instead of an opaque cssClass token (used for
-    // per-text-type backgrounds, which don't need the separate
-    // background-layer positioning that the opaque tokens exist for).
-    field: {
-      type: String,
-      default: null,
-    },
-  },
-  data: () => ({
-    container: null,
-    initialized: false,
-    enabled: false,
-    choice: 'same',
-    radiusTopRight: 0,
-    radiusTopLeft: 0,
-    radiusBottomRight: 0,
-    radiusBottomLeft: 0,
-  }),
-  watch: {
-    radiusTopRight() {
-      if (this.initialized) {
-        if (this.choice === 'same') {
-          this.radiusTopLeft = this.radiusTopRight;
-          this.radiusBottomRight = this.radiusTopRight;
-          this.radiusBottomLeft = this.radiusTopRight;
-        }
-        this.save();
-      }
-    },
-    radiusTopLeft() {
-      if (this.initialized) {
-        this.save();
-      }
-    },
-    radiusBottomRight() {
-      if (this.initialized) {
-        this.save();
-      }
-    },
-    radiusBottomLeft() {
-      if (this.initialized) {
-        this.save();
-      }
-    },
-    enabled() {
-      if (this.initialized) {
-        this.choice = 'same';
-        this.radiusTopRight = this.enabled ? 0 : null;
-        this.radiusTopLeft = this.enabled ? 0 : null;
-        this.radiusBottomRight = this.enabled ? 0 : null;
-        this.radiusBottomLeft = this.enabled ? 0 : null;
-        this.save();
-      }
-    },
-    choice() {
-      if (this.initialized && this.choice === 'same') {
-        this.radiusTopLeft = this.radiusTopRight;
-        this.radiusBottomRight = this.radiusTopRight;
-        this.radiusBottomLeft = this.radiusTopRight;
-      }
-    },
-  },
-  created() {
-    this.container = this.value;
-    let values;
-    if (this.field) {
-      // CSS border-radius shorthand order: top-left top-right bottom-right bottom-left
-      const parts = (this.container[this.field] || '').trim().split(/\s+/).map(v => parseInt(v) || 0);
-      values = {
-        radiusTopLeft: parts[0] || 0,
-        radiusTopRight: parts[1] || 0,
-        radiusBottomRight: parts[2] || 0,
-        radiusBottomLeft: parts[3] || 0,
-      };
-    } else {
-      values = this.$applicationUtils.parseBackgroundLayerValues(this.container.cssClass) || {};
-    }
-    this.radiusTopRight = values.radiusTopRight || 0;
-    this.radiusTopLeft = values.radiusTopLeft || 0;
-    this.radiusBottomRight = values.radiusBottomRight || 0;
-    this.radiusBottomLeft = values.radiusBottomLeft || 0;
-    this.choice =
-      this.radiusTopRight === this.radiusTopLeft
-      && this.radiusBottomRight === this.radiusTopLeft
-      && this.radiusTopLeft === this.radiusBottomLeft ? 'same' : 'different';
-    this.enabled = this.field ? !!this.container[this.field] : (this.choice !== 'same' || this.radiusTopRight !== 0);
-    this.$nextTick().then(() => this.initialized = true);
-  },
-  methods: {
-    save() {
-      if (this.field) {
-        this.$set(this.container, this.field, this.enabled
-          ? `${this.radiusTopLeft || 0}px ${this.radiusTopRight || 0}px ${this.radiusBottomRight || 0}px ${this.radiusBottomLeft || 0}px`
-          : null);
-      } else {
-        this.$applicationUtils.setBackgroundLayerValues(this.container, {
-          radiusTopRight: this.enabled ? (this.radiusTopRight || 0) : null,
-          radiusTopLeft: this.enabled ? (this.radiusTopLeft || 0) : null,
-          radiusBottomRight: this.enabled ? (this.radiusBottomRight || 0) : null,
-          radiusBottomLeft: this.enabled ? (this.radiusBottomLeft || 0) : null,
-        });
-      }
-      this.$emit('refresh');
-    },
-  },
-};
-</script>
diff --git a/layout-webapp/src/main/webapp/vue-app/common-layout/components/form/BorderInput.vue b/layout-webapp/src/main/webapp/vue-app/common-layout/components/form/BorderInput.vue
deleted file mode 100644
index c3d4fee13..000000000
--- a/layout-webapp/src/main/webapp/vue-app/common-layout/components/form/BorderInput.vue
+++ /dev/null
@@ -1,135 +0,0 @@
-<!--
-
- This file is part of the Meeds project (https://meeds.io/).
-
- Copyright (C) 2020 - 2024 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>
-    <div class="d-flex align-center">
-      <div
-        class="text-header me-auto">
-        {{ $t('layout.border') }}
-      </div>
-      <v-switch
-        v-model="enabled"
-        class="ms-auto my-auto me-n2" />
-    </div>
-    <v-list-item
-      v-if="enabled"
-      class="pa-0"
-      dense>
-      <v-list-item-content class="my-auto">
-        {{ $t('layout.borderColor') }}
-      </v-list-item-content>
-      <v-list-item-action class="my-auto me-0 ms-auto">
-        <layout-editor-color-picker
-          v-model="borderColor"
-          class="my-auto" />
-      </v-list-item-action>
-    </v-list-item>
-    <v-list-item
-      v-if="enabled"
-      class="pa-0"
-      dense>
-      <v-list-item-content class="my-auto">
-        {{ $t('layout.borderSize') }}
-      </v-list-item-content>
-      <v-list-item-action class="my-auto me-0 ms-auto">
-        <number-input
-          v-model="borderSize"
-          :step="1"
-          :min="0"
-          :max="8"
-          class="me-n3" />
-      </v-list-item-action>
-    </v-list-item>
-    <v-list-item
-      v-if="enabled"
-      class="pa-0"
-      dense>
-      <v-list-item-content class="my-auto">
-        {{ $t('layout.boxShadow') }}
-      </v-list-item-content>
-      <v-list-item-action class="my-auto me-0 ms-auto">
-        <v-checkbox v-model="boxShadow" />
-      </v-list-item-action>
-    </v-list-item>
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    value: {
-      type: Object,
-      default: null,
-    },
-    pageStyle: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data: () => ({
-    container: null,
-    initialized: false,
-    enabled: true,
-    borderColor: '#FFFFFF',
-    borderSize: 1,
-    boxShadow: false,
-  }),
-  watch: {
-    borderColor() {
-      if (this.initialized) {
-        this.$set(this.container, 'borderColor', this.borderColor);
-        this.$emit('refresh');
-      }
-    },
-    borderSize() {
-      if (this.initialized) {
-        this.$set(this.container, 'borderSize', this.borderSize);
-        this.$emit('refresh');
-      }
-    },
-    boxShadow() {
-      if (this.initialized) {
-        this.$set(this.container, 'boxShadow', this.boxShadow);
-        this.$emit('refresh');
-      }
-    },
-    enabled(val) {
-      if (val) {
-        if (!this.borderColor) {
-          this.borderColor = '#FFFFFF';
-          this.borderSize = 1;
-        }
-      } else {
-        this.boxShadow = null;
-        this.borderColor = null;
-        this.borderSize = 0;
-      }
-    },
-  },
-  created() {
-    this.container = this.value;
-    this.borderColor = this.container.borderColor;
-    this.borderSize = this.container.borderSize || 0;
-    this.boxShadow = this.container.boxShadow === 'true';
-    this.enabled = !!this.borderColor;
-    this.$nextTick().then(() => this.initialized = true);
-  },
-};
-</script>
\ No newline at end of file
diff --git a/layout-webapp/src/main/webapp/vue-app/common-layout/components/form/BorderRadiusInput.vue b/layout-webapp/src/main/webapp/vue-app/common-layout/components/form/BorderRadiusInput.vue
deleted file mode 100644
index 7b194dc47..000000000
--- a/layout-webapp/src/main/webapp/vue-app/common-layout/components/form/BorderRadiusInput.vue
+++ /dev/null
@@ -1,176 +0,0 @@
-<!--
-
- This file is part of the Meeds project (https://meeds.io/).
-
- Copyright (C) 2020 - 2024 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>
-    <div class="d-flex align-center">
-      <div
-        class="text-header me-auto">
-        {{ $t('layout.borderRadius') }}
-      </div>
-      <v-switch
-        v-model="enabled"
-        class="ms-auto my-auto me-n2" />
-    </div>
-    <div
-      v-if="enabled"
-      :class="choice === 'same' && 'flex-row' || 'flex-column'"
-      class="d-flex">
-      <v-radio-group v-model="choice" class="my-auto text-no-wrap ms-n1">
-        <v-radio
-          :label="$t('layout.sameForAllCorners')"
-          value="same"
-          class="mx-0" />
-        <v-radio
-          :label="$t('layout.differentForEachCorner')"
-          value="different"
-          class="mx-0" />
-      </v-radio-group>
-      <v-list-item class="pe-0 ps-7 py-0" dense>
-        <v-list-item-content v-if="choice === 'different'" class="my-auto">
-          {{ $t('layout.topRight') }}
-        </v-list-item-content>
-        <number-input
-          v-model="radiusTopRight"
-          :class="choice === 'different' && 'my-auto' || 'mb-auto ms-auto'"
-          class="me-n3" />
-      </v-list-item>
-      <v-list-item
-        v-if="choice === 'different'"
-        class="pe-0 ps-7 py-0"
-        dense>
-        <v-list-item-content class="my-auto">
-          {{ $t('layout.topLeft') }}
-        </v-list-item-content>
-        <number-input
-          v-model="radiusTopLeft"
-          class="my-auto me-n3" />
-      </v-list-item>
-      <v-list-item
-        v-if="choice === 'different'"
-        class="pe-0 ps-7 py-0"
-        dense>
-        <v-list-item-content class="my-auto">
-          {{ $t('layout.bottomRight') }}
-        </v-list-item-content>
-        <number-input
-          v-model="radiusBottomRight"
-          class="my-auto me-n3" />
-      </v-list-item>
-      <v-list-item
-        v-if="choice === 'different'"
-        class="pe-0 ps-7 py-0"
-        dense>
-        <v-list-item-content class="my-auto">
-          {{ $t('layout.bottomLeft') }}
-        </v-list-item-content>
-        <number-input
-          v-model="radiusBottomLeft"
-          class="my-auto me-n3" />
-      </v-list-item>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    value: {
-      type: Object,
-      default: null,
-    },
-    pageStyle: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data: () => ({
-    container: null,
-    initialized: false,
-    enabled: true,
-    choice: 'same',
-    radiusTopRight: null,
-    radiusTopLeft: null,
-    radiusBottomRight: null,
-    radiusBottomLeft: null,
-  }),
-  watch: {
-    radiusTopRight() {
-      if (this.initialized) {
-        this.$set(this.container, 'radiusTopRight', this.radiusTopRight);
-        this.$emit('refresh');
-        if (this.choice === 'same') {
-          this.radiusTopLeft = this.radiusTopRight;
-          this.radiusBottomRight = this.radiusTopRight;
-          this.radiusBottomLeft = this.radiusTopRight;
-        }
-      }
-    },
-    radiusTopLeft() {
-      if (this.initialized) {
-        this.$set(this.container, 'radiusTopLeft', this.radiusTopLeft);
-        this.$emit('refresh');
-      }
-    },
-    radiusBottomRight() {
-      if (this.initialized) {
-        this.$set(this.container, 'radiusBottomRight', this.radiusBottomRight);
-        this.$emit('refresh');
-      }
-    },
-    radiusBottomLeft() {
-      if (this.initialized) {
-        this.$set(this.container, 'radiusBottomLeft', this.radiusBottomLeft);
-        this.$emit('refresh');
-      }
-    },
-    enabled() {
-      if (this.initialized) {
-        const defaultBorderRadius = parseInt(this.$root.branding?.themeStyle?.borderRadius?.replace?.('px', '') || '4');
-        this.choice = 'same';
-        this.radiusTopRight = this.enabled && defaultBorderRadius || null;
-        this.radiusTopLeft = this.radiusTopRight;
-        this.radiusBottomRight = this.radiusTopRight;
-        this.radiusBottomLeft = this.radiusTopRight;
-      }
-    },
-    choice() {
-      if (this.choice === 'same') {
-        this.radiusTopLeft = this.radiusTopRight;
-        this.radiusBottomRight = this.radiusTopRight;
-        this.radiusBottomLeft = this.radiusTopRight;
-      }
-    },
-  },
-  created() {
-    this.container = this.value;
-    this.radiusTopRight = this.container.radiusTopRight;
-    this.radiusTopLeft = this.container.radiusTopLeft;
-    this.radiusBottomRight = this.container.radiusBottomRight;
-    this.radiusBottomLeft = this.container.radiusBottomLeft;
-    this.enabled = this.radiusBottomLeft === 0 || !!this.radiusBottomLeft;
-    this.choice =
-      this.radiusTopRight === this.radiusTopLeft
-      && this.radiusBottomRight === this.radiusTopLeft
-      && this.radiusTopLeft === this.radiusBottomLeft
-      && this.radiusBottomLeft === this.radiusTopRight ? 'same' : 'different';
-    this.$nextTick().then(() => this.initialized = true);
-  },
-};
-</script>
\ No newline at end of file
diff --git a/layout-webapp/src/main/webapp/vue-app/common-layout/components/form/BorderRadiusSelector.vue b/layout-webapp/src/main/webapp/vue-app/common-layout/components/form/BorderRadiusSelector.vue
deleted file mode 100644
index 9c1844b5b..000000000
--- a/layout-webapp/src/main/webapp/vue-app/common-layout/components/form/BorderRadiusSelector.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<!--
-
- This file is part of the Meeds project (https://meeds.io/).
-
- Copyright (C) 2020 - 2024 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 class="d-flex">
-    <v-btn 
-      text
-      small
-      class="ms-n3"
-      @click="bordeRadius = 0">
-      {{ $t('layout.square') }}
-    </v-btn>
-    <v-slider
-      v-model="bordeRadius"
-      :thumb-size="24"
-      :max="maxBorderRadius"
-      tick-size="2"
-      thumb-label="always"
-      ticks
-      min="0"
-      step="4"
-      color="primary" />
-    <v-btn
-      text
-      small
-      class="me-n3"
-      @click="bordeRadius = maxBorderRadius"> 
-      {{ $t('layout.rounded') }} 
-    </v-btn>
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    value: {
-      type: String,
-      default: null,
-    },
-  },
-  data: () => ({
-    bordeRadius: 8,
-    maxBorderRadius: 20
-  }),
-  watch: {
-    bordeRadius() {
-      this.$emit('input', this.bordeRadius);
-    },
-  },
-  created() {
-    this.bordeRadius = this.value;
-  },
-};
-</script>
diff --git a/layout-webapp/src/main/webapp/vue-app/common-layout/components/form/ColorPicker.vue b/layout-webapp/src/main/webapp/vue-app/common-layout/components/form/ColorPicker.vue
deleted file mode 100644
index f4fd462f4..000000000
--- a/layout-webapp/src/main/webapp/vue-app/common-layout/components/form/ColorPicker.vue
+++ /dev/null
@@ -1,133 +0,0 @@
-<!--
-
- This file is part of the Meeds project (https://meeds.io/).
- 
- Copyright (C) 2020 - 2024 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>
-  <v-dialog
-    ref="dialog"
-    v-model="modal"
-    color="white"
-    width="290px">
-    <template #activator="{ on }">
-      <v-list-item
-        class="pa-0"
-        dense>
-        <v-list-item-action class="my-0 me-2 layout-color-picker-swatch">
-          <v-card
-            :color="value"
-            height="36px"
-            width="36px"
-            v-on="on" />
-        </v-list-item-action>
-        <v-list-item-content class="my-auto">
-          <v-card
-            v-if="label"
-            :min-width="minTextWidth"
-            flat>
-            <div class="text-body">{{ label }}</div>
-            <div class="text-subtitle">{{ value }}</div>
-          </v-card>
-          <v-card
-            v-else
-            :min-width="minTextWidth"
-            class="text-body text-end"
-            flat>
-            {{ value }}
-          </v-card>
-        </v-list-item-content>
-      </v-list-item>
-    </template>
-    <v-color-picker
-      v-model="color"
-      :swatches="swatches"
-      mode="hexa"
-      show-swatches />
-    <v-row class="mx-0 white">
-      <v-col class="center">
-        <v-btn
-          text
-          color="primary"
-          @click="cancel">
-          {{ $t('layout.cancel') }}
-        </v-btn>
-      </v-col>
-      <v-col class="center">
-        <v-btn
-          text
-          color="primary"
-          @click="save">
-          {{ $t('layout.ok') }}
-        </v-btn>
-      </v-col>
-    </v-row>
-  </v-dialog>
-</template>
-<script>
-export default {
-  props: {
-    value: {
-      type: String,
-      default: null,
-    },
-    label: {
-      type: String,
-      default: null,
-    },
-    minTextWidth: {
-      type: String,
-      default: () => 'auto',
-    },
-  },
-  data: () => ({
-    modal: false,
-    color: null,
-    originalValue: null,
-    swatches: [
-      ['#FF0000', '#319ab3', '#f97575'],
-      ['#98cc81', '#4273c8', '#cea6ac'],
-      ['#bc99e7', '#9ee4f5', '#774ea9'],
-      ['#ffa500', '#bed67e', '#0E100F'],
-      ['#ffaacc', '#0000AA', '#000055'],
-    ],
-  }),
-  watch: {
-    modal() {
-      if (this.modal) {
-        this.originalValue = this.value;
-      }
-    },
-    value() {
-      this.color = this.value;
-    },
-  },
-  created() {
-    this.color = this.value;
-  },
-  methods: {
-    cancel() {
-      this.$emit('input', this.originalValue);
-      this.modal = false;
-    },
-    save() {
-      this.$emit('input', this.color);
-      this.modal = false;
-    }
-  }
-};
-</script>
diff --git a/layout-webapp/src/main/webapp/vue-app/common-layout/components/form/MarginInput.vue b/layout-webapp/src/main/webapp/vue-app/common-layout/components/form/MarginInput.vue
deleted file mode 100644
index 9335d47e3..000000000
--- a/layout-webapp/src/main/webapp/vue-app/common-layout/components/form/MarginInput.vue
+++ /dev/null
@@ -1,204 +0,0 @@
-<!--
-
- This file is part of the Meeds project (https://meeds.io/).
-
- Copyright (C) 2020 - 2024 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>
-    <div class="d-flex align-center mb-2">
-      <div
-        :class="textBold && 'font-weight-bold' || 'text-header'"
-        class="me-auto">
-        {{ $t('layout.margins') }}
-      </div>
-      <v-switch
-        v-model="enabled"
-        class="ms-auto my-auto me-n2" />
-    </div>
-    <div
-      v-if="enabled"
-      :class="marginChoice === 'same' && 'flex-row' || 'flex-column'"
-      class="d-flex">
-      <v-radio-group v-model="marginChoice" class="my-auto text-no-wrap ms-n1">
-        <v-radio
-          :label="$t('layout.sameForAllSides')"
-          value="same"
-          class="mx-0" />
-        <v-radio
-          :label="$t('layout.differentForEachSide')"
-          value="different"
-          class="mx-0" />
-      </v-radio-group>
-      <v-list-item class="pe-0 ps-7 py-0" dense>
-        <v-list-item-content
-          v-if="marginChoice === 'different'"
-          class="my-auto">
-          {{ $t('layout.top') }}
-        </v-list-item-content>
-        <number-input
-          v-model="marginTop"
-          :diff="diff"
-          :max="max"
-          :min="min"
-          :class="marginChoice === 'different' && 'my-auto' || 'mb-auto ms-auto'"
-          class="me-n3" />
-      </v-list-item>
-      <v-list-item
-        v-if="marginChoice === 'different'"
-        class="pe-0 ps-7 py-0"
-        dense>
-        <v-list-item-content class="my-auto">
-          {{ $t('layout.right') }}
-        </v-list-item-content>
-        <number-input
-          v-model="marginRight"
-          :diff="diff"
-          :max="max"
-          :min="min"
-          class="my-auto me-n3" />
-      </v-list-item>
-      <v-list-item
-        v-if="marginChoice === 'different'"
-        class="pe-0 ps-7 py-0"
-        dense>
-        <v-list-item-content class="my-auto">
-          {{ $t('layout.bottom') }}
-        </v-list-item-content>
-        <number-input
-          v-model="marginBottom"
-          :diff="diff"
-          :max="max"
-          :min="min"
-          class="my-auto me-n3" />
-      </v-list-item>
-      <v-list-item
-        v-if="marginChoice === 'different'"
-        class="pe-0 ps-7 py-0"
-        dense>
-        <v-list-item-content class="my-auto">
-          {{ $t('layout.left') }}
-        </v-list-item-content>
-        <number-input
-          v-model="marginLeft"
-          :diff="diff"
-          :max="max"
-          :min="min"
-          class="my-auto me-n3" />
-      </v-list-item>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    value: {
-      type: Object,
-      default: null,
-    },
-    diff: {
-      type: Number,
-      default: () => -20,
-    },
-    max: {
-      type: Number,
-      default: () => 80,
-    },
-    min: {
-      type: Number,
-      default: () => -40,
-    },
-    textBold: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data: () => ({
-    container: null,
-    initialized: false,
-    enabled: true,
-    marginChoice: 'same',
-    marginTop: 20,
-    marginRight: 20,
-    marginBottom: 20,
-    marginLeft: 20,
-  }),
-  watch: {
-    marginTop() {
-      if (this.initialized) {
-        this.$set(this.container, 'marginTop', this.enabled ? this.marginTop || 0 : null);
-        this.$emit('refresh');
-        if (this.enabled && this.marginChoice === 'same') {
-          this.marginRight = this.marginTop;
-          this.marginBottom = this.marginTop;
-          this.marginLeft = this.marginTop;
-        }
-      }
-    },
-    marginRight() {
-      if (this.initialized) {
-        this.$set(this.container, 'marginRight', this.enabled ? this.marginRight || 0 : null);
-        this.$emit('refresh');
-      }
-    },
-    marginBottom() {
-      if (this.initialized) {
-        this.$set(this.container, 'marginBottom', this.enabled ? this.marginBottom || 0 : null);
-        this.$emit('refresh');
-      }
-    },
-    marginLeft() {
-      if (this.initialized) {
-        this.$set(this.container, 'marginLeft', this.enabled ? this.marginLeft || 0 : null);
-        this.$emit('refresh');
-      }
-    },
-    enabled() {
-      if (this.initialized) {
-        this.marginChoice = 'same';
-        this.marginTop = this.enabled ? 0 : null;
-        this.marginRight = this.enabled ? 0 : null;
-        this.marginBottom = this.enabled ? 0 : null;
-        this.marginLeft = this.enabled ? 0 : null;
-        this.$emit('refresh');
-      }
-    },
-    marginChoice() {
-      if (this.initialized && this.enabled) {
-        this.marginTop = this.marginTop || 0;
-        this.marginRight = this.marginTop;
-        this.marginBottom = this.marginTop;
-        this.marginLeft = this.marginTop;
-        this.container.marginTop = this.marginTop;
-      }
-    },
-  },
-  created() {
-    this.container = this.value;
-    this.marginTop = this.container.marginTop || 0;
-    this.marginRight = this.container.marginRight || 0;
-    this.marginBottom = this.container.marginBottom || 0;
-    this.marginLeft = this.container.marginLeft || 0;
-    this.marginChoice =
-      this.marginTop === this.marginRight
-      && this.marginRight === this.marginLeft
-      && this.marginLeft === this.marginBottom ? 'same' : 'different';
-    this.enabled = this.marginChoice !== 'same' || this.marginRight !== 0;
-    this.$nextTick().then(() => this.initialized = true);
-  },
-};
-</script>
\ No newline at end of file
diff --git a/layout-webapp/src/main/webapp/vue-app/common-layout/components/form/SectionMarginInput.vue b/layout-webapp/src/main/webapp/vue-app/common-layout/components/form/SectionMarginInput.vue
deleted file mode 100644
index 1b0d5cb8a..000000000
--- a/layout-webapp/src/main/webapp/vue-app/common-layout/components/form/SectionMarginInput.vue
+++ /dev/null
@@ -1,198 +0,0 @@
-<!--
-
- This file is part of the Meeds project (https://meeds.io/).
-
- Copyright (C) 2020 - 2024 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>
-    <slot name="title"></slot>
-    <div v-if="!$slots.title" class="d-flex align-center mb-2">
-      <div
-        :class="textBold && 'font-weight-bold' || 'text-header'"
-        class="me-auto">
-        {{ $t('layout.margins') }}
-      </div>
-      <v-switch
-        v-model="enabled"
-        class="ms-auto my-auto me-n2" />
-    </div>
-    <div
-      v-if="canUpdateValue"
-      class="d-flex flex-column">
-      <v-list-item
-        v-if="top"
-        class="pa-0"
-        dense>
-        <v-list-item-content class="my-auto">
-          {{ $t('layout.top') }}
-        </v-list-item-content>
-        <number-input
-          v-model="marginTop"
-          :max="max"
-          :min="min"
-          class="my-auto"
-          editable />
-      </v-list-item>
-      <v-list-item
-        v-if="right"
-        class="pa-0"
-        dense>
-        <v-list-item-content class="my-auto">
-          {{ $t('layout.right') }}
-        </v-list-item-content>
-        <number-input
-          v-model="marginRight"
-          :max="max"
-          :min="min"
-          class="my-auto"
-          editable />
-      </v-list-item>
-      <v-list-item
-        v-if="bottom"
-        class="pa-0"
-        dense>
-        <v-list-item-content class="my-auto">
-          {{ $t('layout.bottom') }}
-        </v-list-item-content>
-        <number-input
-          v-model="marginBottom"
-          :max="max"
-          :min="min"
-          class="my-auto"
-          editable />
-      </v-list-item>
-      <v-list-item
-        v-if="left"
-        class="pa-0"
-        dense>
-        <v-list-item-content class="my-auto">
-          {{ $t('layout.left') }}
-        </v-list-item-content>
-        <number-input
-          v-model="marginLeft"
-          :max="max"
-          :min="min"
-          class="my-auto"
-          editable />
-      </v-list-item>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    value: {
-      type: Object,
-      default: null,
-    },
-    max: {
-      type: Number,
-      default: () => 60,
-    },
-    min: {
-      type: Number,
-      default: () => -60,
-    },
-    top: {
-      type: Boolean,
-      default: true,
-    },
-    right: {
-      type: Boolean,
-      default: false,
-    },
-    bottom: {
-      type: Boolean,
-      default: true,
-    },
-    left: {
-      type: Boolean,
-      default: false,
-    },
-    textBold: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data: () => ({
-    container: null,
-    initialized: false,
-    enabled: true,
-    marginTop: null,
-    marginRight: null,
-    marginBottom: null,
-    marginLeft: null,
-  }),
-  computed: {
-    canUpdateValue() {
-      return this.enabled || this.$slots.title;
-    },
-  },
-  watch: {
-    value() {
-      if (!this.container) {
-        this.container = this.value;
-      }
-    },
-    marginTop() {
-      if (this.initialized) {
-        this.$set(this.container, 'marginTop', this.canUpdateValue ? this.marginTop || 0 : null);
-        this.$emit('refresh');
-      }
-    },
-    marginRight() {
-      if (this.initialized && this.right) {
-        this.$set(this.container, 'marginRight', this.canUpdateValue ? this.marginRight || 0 : null);
-        this.$emit('refresh');
-      }
-    },
-    marginBottom() {
-      if (this.initialized) {
-        this.$set(this.container, 'marginBottom', this.canUpdateValue ? this.marginBottom || 0 : null);
-        this.$emit('refresh');
-      }
-    },
-    marginLeft() {
-      if (this.initialized && this.left) {
-        this.$set(this.container, 'marginLeft', this.canUpdateValue ? this.marginLeft || 0 : null);
-        this.$emit('refresh');
-      }
-    },
-    canUpdateValue() {
-      if (this.initialized) {
-        this.marginTop = this.canUpdateValue ? 0 : null;
-        this.marginRight = this.canUpdateValue ? 0 : null;
-        this.marginBottom = this.canUpdateValue ? 0 : null;
-        this.marginLeft = this.canUpdateValue ? 0 : null;
-      }
-    },
-  },
-  created() {
-    this.container = this.value;
-    this.marginTop = this.container.marginTop;
-    this.marginRight = this.right && this.container.marginRight || 0;
-    this.marginBottom = this.container.marginBottom;
-    this.marginLeft = this.left && this.container.marginLeft || 0;
-    this.enabled = (this.marginTop || this.container.marginTop === 0)
-      || (this.marginBottom || this.container.marginBottom === 0)
-      || (this.marginLeft || this.container.marginLeft === 0)
-      || (this.marginRight || this.container.marginRight === 0) ? true : false;
-    this.$nextTick().then(() => this.initialized = true);
-  },
-};
-</script>
\ No newline at end of file
diff --git a/layout-webapp/src/main/webapp/vue-app/common-layout/components/form/TextBackgroundInput.vue b/layout-webapp/src/main/webapp/vue-app/common-layout/components/form/TextBackgroundInput.vue
deleted file mode 100644
index ae5c94b88..000000000
--- a/layout-webapp/src/main/webapp/vue-app/common-layout/components/form/TextBackgroundInput.vue
+++ /dev/null
@@ -1,505 +0,0 @@
-<!--
-
- This file is part of the Meeds project (https://meeds.io/).
-
- Copyright (C) 2020 - 2024 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>
-    <div class="d-flex align-center">
-      <div class="me-auto">
-        {{ $t('layout.textBackground') }}
-      </div>
-      <v-switch
-        v-model="enabled"
-        class="ms-auto my-auto me-n2" />
-    </div>
-    <v-list-item
-      v-if="enabled"
-      class="pa-0"
-      dense>
-      <v-list-item-content class="my-auto align-start">
-        <v-radio-group
-          v-model="choice"
-          class="my-auto text-no-wrap flex-grow-1 flex-shrink-0"
-          mandatory>
-          <v-radio
-            value="color"
-            class="mx-0">
-            <template #label>
-              <span>{{ $t('layout.color') }}</span>
-            </template>
-          </v-radio>
-          <v-radio
-            value="linear"
-            class="mx-0">
-            <template #label>
-              <span>{{ $t('layout.linearGradient') }}</span>
-            </template>
-          </v-radio>
-          <v-radio-group
-            v-if="choice === 'linear'"
-            v-model="gradientDirection"
-            class="my-0 ms-8 text-no-wrap"
-            mandatory>
-            <v-radio
-              value="to bottom"
-              class="mx-0">
-              <template #label>
-                <span>{{ $t('layout.gradientDirectionTopToBottom') }}</span>
-              </template>
-            </v-radio>
-            <v-radio
-              value="to right"
-              class="mx-0">
-              <template #label>
-                <span>{{ $t('layout.gradientDirectionLeftToRight') }}</span>
-              </template>
-            </v-radio>
-          </v-radio-group>
-          <v-radio
-            value="radial"
-            class="mx-0">
-            <template #label>
-              <span>{{ $t('layout.radialGradient') }}</span>
-            </template>
-          </v-radio>
-          <v-radio
-            value="angular"
-            class="mx-0">
-            <template #label>
-              <span>{{ $t('layout.angularGradient') }}</span>
-            </template>
-          </v-radio>
-          <v-radio-group
-            v-if="choice === 'angular'"
-            v-model="gradientCorner"
-            class="my-0 ms-8 text-no-wrap"
-            mandatory>
-            <v-radio
-              value="top left"
-              class="mx-0">
-              <template #label>
-                <span>{{ $t('layout.gradientCornerTopLeft') }}</span>
-              </template>
-            </v-radio>
-            <v-radio
-              value="top right"
-              class="mx-0">
-              <template #label>
-                <span>{{ $t('layout.gradientCornerTopRight') }}</span>
-              </template>
-            </v-radio>
-            <v-radio
-              value="bottom right"
-              class="mx-0">
-              <template #label>
-                <span>{{ $t('layout.gradientCornerBottomRight') }}</span>
-              </template>
-            </v-radio>
-            <v-radio
-              value="bottom left"
-              class="mx-0">
-              <template #label>
-                <span>{{ $t('layout.gradientCornerBottomLeft') }}</span>
-              </template>
-            </v-radio>
-          </v-radio-group>
-        </v-radio-group>
-      </v-list-item-content>
-      <v-list-item-action
-        :class="choice === 'color' && 'mb-auto' || 'my-auto'"
-        class="me-0 ms-auto">
-        <layout-editor-color-picker
-          v-if="choice === 'color'"
-          v-model="color"
-          class="my-auto" />
-        <div v-else-if="isGradient">
-          <layout-editor-color-picker
-            v-model="gradientFrom"
-            :label="$t('layout.gradientFrom')"
-            class="my-auto" />
-          <layout-editor-color-picker
-            v-model="gradientTo"
-            :label="$t('layout.gradientTo')"
-            class="my-auto" />
-        </div>
-      </v-list-item-action>
-    </v-list-item>
-
-    <v-list-item
-      v-if="isGradient"
-      class="pa-0"
-      dense>
-      <v-list-item-content class="my-auto">
-        {{ $t('layout.gradientRatio') }}
-      </v-list-item-content>
-      <v-list-item-action class="my-auto me-0 ms-auto">
-        {{ gradientRatio }}/{{ 100 - gradientRatio }}
-      </v-list-item-action>
-    </v-list-item>
-    <div
-      v-if="isGradient"
-      class="d-flex align-center px-1 pb-2">
-      <span class="text-subtitle me-2">{{ $t('layout.gradientFrom') }}</span>
-      <v-slider
-        v-model="gradientRatio"
-        min="0"
-        max="100"
-        hide-details
-        class="flex-grow-1 mt-0" />
-      <span class="text-subtitle ms-2">{{ $t('layout.gradientTo') }}</span>
-    </div>
-
-    <v-list-item
-      v-if="enabled"
-      class="pa-0"
-      dense>
-      <v-list-item-content class="my-auto">
-        {{ $t('layout.image') }}
-      </v-list-item-content>
-      <v-list-item-action class="my-auto me-0 ms-auto">
-        <layout-editor-background-image-attachment
-          v-model="container[imageField]"
-          ref="backgroundImage"
-          :storage-id="objectId"
-          :object-type="objectType"
-          immediate-save
-          class="my-auto" />
-      </v-list-item-action>
-    </v-list-item>
-    <div v-if="container[imageField]" class="d-flex">
-      <v-radio-group
-        v-model="imageStyle"
-        class="my-auto text-no-wrap flex-grow-1 flex-shrink-0"
-        mandatory>
-        <v-radio
-          value="cover"
-          class="mx-0">
-          <template #label>
-            <span>{{ $t('layout.imageSizeCover') }}</span>
-          </template>
-        </v-radio>
-        <v-radio
-          value="contain"
-          class="mx-0">
-          <template #label>
-            <span>{{ $t('layout.imageSizeContain') }}</span>
-          </template>
-        </v-radio>
-        <v-radio
-          value="repeat"
-          class="mx-0">
-          <template #label>
-            <span>{{ $t('layout.imageRepeat') }}</span>
-          </template>
-        </v-radio>
-        <v-radio
-          value="no-repeat"
-          class="mx-0">
-          <template #label>
-            <span>{{ $t('layout.imageNoRepeat') }}</span>
-          </template>
-        </v-radio>
-      </v-radio-group>
-      <v-radio-group
-        v-model="container[positionField]"
-        class="my-auto text-no-wrap flex-grow-1 flex-shrink-0"
-        mandatory>
-        <v-radio
-          value="top left"
-          class="mx-0">
-          <template #label>
-            <span>{{ $t('layout.imagePositionTopLeft') }}</span>
-          </template>
-        </v-radio>
-        <v-radio
-          value="top right"
-          class="mx-0">
-          <template #label>
-            <span>{{ $t('layout.imagePositionTopRight') }}</span>
-          </template>
-        </v-radio>
-        <v-radio
-          value="bottom left"
-          class="mx-0">
-          <template #label>
-            <span>{{ $t('layout.imagePositionBottomLeft') }}</span>
-          </template>
-        </v-radio>
-        <v-radio
-          value="bottom right"
-          class="mx-0">
-          <template #label>
-            <span>{{ $t('layout.imagePositionBottomRight') }}</span>
-          </template>
-        </v-radio>
-      </v-radio-group>
-    </div>
-    <layout-editor-background-margin-input
-      v-if="enabled"
-      :value="container"
-      :field="paddingField"
-      :min="-400"
-      class="my-auto" />
-    <layout-editor-background-radius-input
-      v-if="enabled"
-      :value="container"
-      :field="radiusField"
-      class="my-auto" />
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    value: {
-      type: Object,
-      default: null,
-    },
-    // 'Title' | 'Header' | '' (Body) | 'Subtitle'
-    typePrefix: {
-      type: String,
-      default: '',
-    },
-  },
-  data: () => ({
-    container: null,
-    enabled: false,
-    choice: null,
-    imageStyle: null,
-    color: null,
-    gradientFrom: null,
-    gradientTo: null,
-    gradientDirection: null,
-    gradientCorner: null,
-    gradientRatio: null,
-    initialized: false,
-  }),
-  computed: {
-    colorField() {
-      return `text${this.typePrefix}BackgroundColor`;
-    },
-    imageField() {
-      return `text${this.typePrefix}BackgroundImage`;
-    },
-    effectField() {
-      return `text${this.typePrefix}BackgroundEffect`;
-    },
-    positionField() {
-      return `text${this.typePrefix}BackgroundPosition`;
-    },
-    sizeField() {
-      return `text${this.typePrefix}BackgroundSize`;
-    },
-    repeatField() {
-      return `text${this.typePrefix}BackgroundRepeat`;
-    },
-    paddingField() {
-      return `text${this.typePrefix}BackgroundPadding`;
-    },
-    radiusField() {
-      return `text${this.typePrefix}BackgroundRadius`;
-    },
-    objectType() {
-      return `containerText${this.typePrefix || 'Body'}Background`;
-    },
-    isGradient() {
-      return this.choice === 'linear' || this.choice === 'radial' || this.choice === 'angular';
-    },
-    objectId() {
-      const id = this.container.storageId || this.container.id;
-      return this.$root.isSiteLayout ? `site_${this.$root.siteId}_${id}` : `page_${this.$root.pageId}_${id}`;
-    },
-    angularStartAngle() {
-      return {
-        'top left': '90deg',
-        'top right': '180deg',
-        'bottom right': '270deg',
-        'bottom left': '0deg',
-      }[this.gradientCorner] || '0deg';
-    },
-    angularReversed() {
-      return this.gradientCorner === 'top right' || this.gradientCorner === 'bottom left';
-    },
-    backgroundEffect() {
-      if (!this.gradientFrom || !this.gradientTo) {
-        return null;
-      }
-      const ratio = this.gradientRatio ?? 50;
-      if (this.choice === 'linear') {
-        const stops = `${this.gradientFrom} 0%, ${this.gradientFrom} ${ratio}%, ${this.gradientTo} 100%`;
-        return this.gradientDirection === 'to right' ?
-          `linear-gradient(to right, ${stops})` :
-          `linear-gradient(${stops})`;
-      } else if (this.choice === 'radial') {
-        return `radial-gradient(${this.gradientFrom} 0%, ${this.gradientFrom} ${ratio}%, ${this.gradientTo} 100%)`;
-      } else if (this.choice === 'angular') {
-        const edgeColor = this.angularReversed ? this.gradientTo : this.gradientFrom;
-        const farColor = this.angularReversed ? this.gradientFrom : this.gradientTo;
-        const midPercent = this.angularReversed ? (100 - ratio) : ratio;
-        const midAngle = (midPercent / 100 * 90).toFixed(2);
-        return this.angularReversed ?
-          `conic-gradient(from ${this.angularStartAngle} at ${this.gradientCorner}, ${edgeColor} 0deg, ${farColor} ${midAngle}deg, ${farColor} 90deg)` :
-          `conic-gradient(from ${this.angularStartAngle} at ${this.gradientCorner}, ${edgeColor} 0deg, ${edgeColor} ${midAngle}deg, ${farColor} 90deg)`;
-      } else {
-        return null;
-      }
-    },
-  },
-  watch: {
-    container: {
-      deep: true,
-      handler() {
-        if (this.container) {
-          this.$emit('input', this.container);
-        }
-      },
-    },
-    enabled() {
-      if (this.initialized) {
-        this.container[this.imageField] = null;
-        this.imageStyle = null;
-        this.color = this.enabled ? '#FFFFFFFF' : null;
-        this.gradientFrom = null;
-        this.gradientTo = null;
-        this.gradientDirection = null;
-        this.gradientCorner = null;
-        this.gradientRatio = null;
-      }
-    },
-    imageStyle() {
-      if (this.initialized) {
-        if (this.imageStyle === 'cover' || this.imageStyle === 'contain') {
-          this.container[this.sizeField] = this.imageStyle;
-          this.container[this.repeatField] = null;
-        } else {
-          this.container[this.sizeField] = null;
-          this.container[this.repeatField] = this.imageStyle;
-        }
-      }
-    },
-    color: {
-      immediate: true,
-      handler(newVal, oldVal) {
-        if (this.initialized && newVal !== oldVal) {
-          this.container[this.colorField] = this.enabled && this.choice === 'color' ? this.color : (this.enabled ? '#FFFFFF00' : null);
-        }
-      },
-    },
-    backgroundEffect: {
-      immediate: true,
-      handler(newVal, oldVal) {
-        if (this.initialized && newVal !== oldVal) {
-          this.container[this.effectField] = this.backgroundEffect;
-        }
-      },
-    },
-    choice() {
-      if (this.initialized) {
-        if (this.choice === 'color') {
-          this.gradientFrom = null;
-          this.gradientTo = null;
-          this.gradientDirection = null;
-          this.gradientCorner = null;
-          this.gradientRatio = null;
-          this.container[this.colorField] = this.enabled ? (this.color || '#FFFFFFFF') : null;
-          this.container[this.effectField] = null;
-        } else {
-          this.gradientFrom = this.gradientFrom || this.color || '#FFFFFFFF';
-          this.gradientTo = this.gradientTo || '#999999FF';
-          this.gradientRatio = this.gradientRatio ?? 50;
-          if (this.choice === 'linear') {
-            this.gradientDirection = this.gradientDirection || 'to bottom';
-          } else if (this.choice === 'angular') {
-            this.gradientCorner = this.gradientCorner || 'top left';
-          }
-          this.container[this.colorField] = '#FFFFFF00';
-        }
-      }
-    },
-  },
-  created() {
-    this.container = this.value;
-    if (this.container[this.sizeField] || this.container[this.repeatField]) {
-      if (this.container[this.sizeField] === 'cover'
-          || this.container[this.sizeField] === 'contain') {
-        this.imageStyle = this.container[this.sizeField];
-      } else {
-        this.imageStyle = this.container[this.repeatField];
-      }
-    }
-    const effect = this.container[this.effectField];
-    if (effect?.startsWith('radial-gradient(')) {
-      this.choice = 'radial';
-      const stops = effect.replace('radial-gradient(', '').replace(/\)$/, '').split(',').map(s => s.trim());
-      this.gradientFrom = stops[0].split(' ')[0];
-      if (stops.length === 3) {
-        this.gradientRatio = parseFloat(stops[1].split(' ')[1]);
-        this.gradientTo = stops[2].split(' ')[0];
-      } else {
-        this.gradientRatio = 50;
-        this.gradientTo = stops[stops.length - 1].split(' ')[0];
-      }
-    } else if (effect?.startsWith('conic-gradient(')) {
-      this.choice = 'angular';
-      const inner = effect.replace('conic-gradient(', '').replace(/\)$/, '');
-      const cornerMatch = inner.match(/at (top left|top right|bottom left|bottom right)/);
-      this.gradientCorner = cornerMatch ? cornerMatch[1] : 'top left';
-      const reversed = this.gradientCorner === 'top right' || this.gradientCorner === 'bottom left';
-      const stops = inner.substring(inner.indexOf(',') + 1).split(',').map(s => s.trim());
-      const firstColor = stops[0].split(' ')[0];
-      const lastColor = stops[stops.length - 1].split(' ')[0];
-      this.gradientFrom = reversed ? lastColor : firstColor;
-      this.gradientTo = reversed ? firstColor : lastColor;
-      if (stops.length === 3) {
-        const midPercent = Math.round(parseFloat(stops[1].split(' ')[1]) / 90 * 100);
-        this.gradientRatio = reversed ? (100 - midPercent) : midPercent;
-      } else {
-        this.gradientRatio = 50;
-      }
-    } else if (effect?.startsWith('linear-gradient(')) {
-      this.choice = 'linear';
-      const inner = effect.replace('linear-gradient(', '').replace(/\)$/, '');
-      const parts = inner.split(',').map(s => s.trim());
-      let stops = parts;
-      if (parts[0].startsWith('to ')) {
-        this.gradientDirection = parts[0];
-        stops = parts.slice(1);
-      } else {
-        this.gradientDirection = 'to bottom';
-      }
-      this.gradientFrom = stops[0].split(' ')[0];
-      if (stops.length === 3) {
-        this.gradientRatio = parseFloat(stops[1].split(' ')[1]);
-        this.gradientTo = stops[2].split(' ')[0];
-      } else {
-        this.gradientRatio = 50;
-        this.gradientTo = stops[stops.length - 1].split(' ')[0];
-      }
-    } else {
-      this.choice = 'color';
-    }
-
-    this.color = this.container[this.colorField];
-    this.enabled = !!this.container[this.colorField] || !!this.container[this.imageField];
-    if (this.enabled && !this.color && this.choice === 'color') {
-      this.color = '#FFFFFFFF';
-    }
-    this.$nextTick().then(() => this.initialized = true);
-  },
-};
-</script>
diff --git a/layout-webapp/src/main/webapp/vue-app/common-layout/components/form/TextInput.vue b/layout-webapp/src/main/webapp/vue-app/common-layout/components/form/TextInput.vue
deleted file mode 100644
index b79aa8c8d..000000000
--- a/layout-webapp/src/main/webapp/vue-app/common-layout/components/form/TextInput.vue
+++ /dev/null
@@ -1,395 +0,0 @@
-<!--
-
- This file is part of the Meeds project (https://meeds.io/).
-
- Copyright (C) 2020 - 2024 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>
-    <div class="d-flex align-center">
-      <div
-        :class="textBold && 'font-weight-bold' || 'text-header'"
-        class="me-auto">
-        {{ $t('layout.textStyle') }}
-      </div>
-      <v-switch
-        v-model="enabled"
-        class="ms-auto my-auto me-n2" />
-    </div>
-    <v-list-item
-      v-if="enabled"
-      class="pa-0"
-      dense>
-      <v-list-item-content class="my-auto text-body font-weight-bold">
-        {{ $t('layout.textColorTitle') }}
-      </v-list-item-content>
-      <v-list-item-action
-        v-if="textTitleStyle"
-        class="me-0 my-auto ms-auto">
-        <v-btn-toggle v-model="textTitleStyle" multiple>
-          <v-btn value="bold" small>
-            <v-icon size="18">fa-bold</v-icon>
-          </v-btn>
-          <v-btn value="italic" small>
-            <v-icon size="18">fa-italic</v-icon>
-          </v-btn>
-        </v-btn-toggle>
-      </v-list-item-action>
-      <v-list-item-action
-        class="me-0 my-auto">
-        <number-input
-          v-if="textTitleFontSize"
-          v-model="textTitleFontSize"
-          :min="1"
-          :max="60"
-          :step="1" />
-      </v-list-item-action>
-      <v-list-item-action
-        class="me-0 my-auto">
-        <layout-editor-color-picker
-          v-model="textTitleColor"
-          min-text-width="64"
-          class="my-auto" />
-      </v-list-item-action>
-    </v-list-item>
-    <layout-editor-text-background-input
-      v-if="enabled"
-      v-model="container"
-      type-prefix="Title"
-      class="mb-4" />
-    <v-list-item
-      v-if="enabled"
-      class="pa-0"
-      dense>
-      <v-list-item-content class="my-auto text-body font-weight-bold">
-        {{ $t('layout.textColorHeader') }}
-      </v-list-item-content>
-      <v-list-item-action
-        class="me-0 my-auto ms-auto">
-        <v-btn-toggle v-model="textHeaderStyle" multiple>
-          <v-btn value="bold" small>
-            <v-icon size="18">fa-bold</v-icon>
-          </v-btn>
-          <v-btn value="italic" small>
-            <v-icon size="18">fa-italic</v-icon>
-          </v-btn>
-        </v-btn-toggle>
-      </v-list-item-action>
-      <v-list-item-action
-        class="me-0 my-auto">
-        <number-input
-          v-if="textHeaderFontSize"
-          v-model="textHeaderFontSize"
-          :min="1"
-          :max="60"
-          :step="1" />
-      </v-list-item-action>
-      <v-list-item-action
-        class="me-0 my-auto">
-        <layout-editor-color-picker
-          v-model="textHeaderColor"
-          min-text-width="64"
-          class="my-auto" />
-      </v-list-item-action>
-    </v-list-item>
-    <layout-editor-text-background-input
-      v-if="enabled"
-      v-model="container"
-      type-prefix="Header"
-      class="mb-4" />
-    <v-list-item
-      v-if="enabled"
-      class="pa-0"
-      dense>
-      <v-list-item-content class="my-auto text-body font-weight-bold">
-        {{ $t('layout.textColorBody') }}
-      </v-list-item-content>
-      <v-list-item-action
-        class="me-0 my-auto ms-auto">
-        <v-btn-toggle v-model="textStyle" multiple>
-          <v-btn value="bold" small>
-            <v-icon size="18">fa-bold</v-icon>
-          </v-btn>
-          <v-btn value="italic" small>
-            <v-icon size="18">fa-italic</v-icon>
-          </v-btn>
-        </v-btn-toggle>
-      </v-list-item-action>
-      <v-list-item-action
-        class="me-0 my-auto">
-        <number-input
-          v-if="textFontSize"
-          v-model="textFontSize"
-          :min="1"
-          :max="60"
-          :step="1" />
-      </v-list-item-action>
-      <v-list-item-action
-        class="me-0 my-auto">
-        <layout-editor-color-picker
-          v-model="textColor"
-          min-text-width="64"
-          class="my-auto" />
-      </v-list-item-action>
-    </v-list-item>
-    <v-list-item
-      v-if="enabled"
-      class="pa-0"
-      dense>
-      <v-list-item-content class="my-auto text-body font-weight-bold">
-        {{ $t('layout.textColorSubtitle') }}
-      </v-list-item-content>
-      <v-list-item-action
-        class="me-0 my-auto ms-auto">
-        <v-btn-toggle v-model="textSubtitleStyle" multiple>
-          <v-btn value="bold" small>
-            <v-icon size="18">fa-bold</v-icon>
-          </v-btn>
-          <v-btn value="italic" small>
-            <v-icon size="18">fa-italic</v-icon>
-          </v-btn>
-        </v-btn-toggle>
-      </v-list-item-action>
-      <v-list-item-action
-        class="me-0 my-auto">
-        <number-input
-          v-if="textSubtitleFontSize"
-          v-model="textSubtitleFontSize"
-          :min="1"
-          :max="60"
-          :step="1" />
-      </v-list-item-action>
-      <v-list-item-action
-        class="me-0 my-auto">
-        <layout-editor-color-picker
-          v-model="textSubtitleColor"
-          min-text-width="64"
-          class="my-auto" />
-      </v-list-item-action>
-    </v-list-item>
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    value: {
-      type: Object,
-      default: null,
-    },
-    pageStyle: {
-      type: Boolean,
-      default: false,
-    },
-    textBold: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data: () => ({
-    container: null,
-    enabled: false,
-    textTitleColor: null,
-    textTitleFontSize: 0,
-    textTitleStyle: ['bold'],
-    textHeaderColor: null,
-    textHeaderFontSize: 0,
-    textHeaderStyle: [],
-    textColor: null,
-    textFontSize: 0,
-    textStyle: [],
-    textSubtitleColor: null,
-    textSubtitleFontSize: 0,
-    textSubtitleStyle: [],
-    initialized: false,
-  }),
-  watch: {
-    container: {
-      deep: true,
-      handler() {
-        if (this.container) {
-          this.$emit('input', this.container);
-        }
-      },
-    },
-    textTitleColor() {
-      if (this.initialized) {
-        this.$set(this.container, 'textTitleColor', this.textTitleColor);
-        this.$emit('refresh');
-      }
-    },
-    textTitleFontSize() {
-      if (this.initialized) {
-        this.$set(this.container, 'textTitleFontSize', this.textTitleFontSize && `${this.textTitleFontSize}px`);
-        this.$emit('refresh');
-      }
-    },
-    textTitleStyle: {
-      deep: true,
-      handler() {
-        if (this.initialized) {
-          this.$set(this.container, 'textTitleFontWeight', this.textTitleStyle?.find?.(s => s === 'bold') && 'bold' || 'normal');
-          this.$set(this.container, 'textTitleFontStyle', this.textTitleStyle?.find?.(s => s === 'italic') && 'italic' || 'normal');
-          this.$emit('refresh');
-        }
-      },
-    },
-    textHeaderColor() {
-      if (this.initialized) {
-        this.$set(this.container, 'textHeaderColor', this.textHeaderColor);
-        this.$emit('refresh');
-      }
-    },
-    textHeaderFontSize() {
-      if (this.initialized) {
-        this.$set(this.container, 'textHeaderFontSize', this.textHeaderFontSize && `${this.textHeaderFontSize}px`);
-        this.$emit('refresh');
-      }
-    },
-    textHeaderStyle: {
-      deep: true,
-      handler() {
-        if (this.initialized) {
-          this.$set(this.container, 'textHeaderFontWeight', this.textHeaderStyle?.find?.(s => s === 'bold') && 'bold' || 'normal');
-          this.$set(this.container, 'textHeaderFontStyle', this.textHeaderStyle?.find?.(s => s === 'italic') && 'italic' || 'normal');
-          this.$emit('refresh');
-        }
-      }
-    },
-    textColor() {
-      if (this.initialized) {
-        this.$set(this.container, 'textColor', this.textColor);
-        this.$emit('refresh');
-      }
-    },
-    textFontSize() {
-      if (this.initialized) {
-        this.$set(this.container, 'textFontSize', this.textFontSize && `${this.textFontSize}px`);
-        this.$emit('refresh');
-      }
-    },
-    textStyle: {
-      deep: true,
-      handler() {
-        if (this.initialized) {
-          this.$set(this.container, 'textFontWeight', this.textStyle?.find?.(s => s === 'bold') && 'bold' || 'normal');
-          this.$set(this.container, 'textFontStyle', this.textStyle?.find?.(s => s === 'italic') && 'italic' || 'normal');
-          this.$emit('refresh');
-        }
-      }
-    },
-    textSubtitleColor() {
-      if (this.initialized) {
-        this.$set(this.container, 'textSubtitleColor', this.textSubtitleColor);
-        this.$emit('refresh');
-      }
-    },
-    textSubtitleFontSize() {
-      if (this.initialized) {
-        this.$set(this.container, 'textSubtitleFontSize', this.textSubtitleFontSize && `${this.textSubtitleFontSize}px`);
-        this.$emit('refresh');
-      }
-    },
-    textSubtitleStyle: {
-      deep: true,
-      handler() {
-        if (this.initialized) {
-          this.$set(this.container, 'textSubtitleFontWeight', this.textSubtitleStyle?.find?.(s => s === 'bold') && 'bold' || 'normal');
-          this.$set(this.container, 'textSubtitleFontStyle', this.textSubtitleStyle?.find?.(s => s === 'italic') && 'italic' || 'normal');
-          this.$emit('refresh');
-        }
-      }
-    },
-    enabled() {
-      if (this.initialized) {
-        if (this.enabled) {
-          this.textTitleColor =  '#20282C';
-          this.textTitleFontSize = 20;
-          this.textTitleStyle = ['bold'];
-          this.textHeaderColor = '#707070';
-          this.textHeaderStyle = [];
-          this.textHeaderFontSize = 18;
-          this.textColor = '#20282C';
-          this.textStyle = [];
-          this.textFontSize = 16;
-          this.textSubtitleColor = '#707070';
-          this.textSubtitleStyle = [];
-          this.textSubtitleFontSize = 12;
-        } else {
-          this.textTitleColor = null;
-          this.textTitleFontSize = null;
-          this.textTitleStyle = null;
-          this.textHeaderColor = null;
-          this.textHeaderStyle = null;
-          this.textHeaderFontSize = null;
-          this.textColor = null;
-          this.textStyle = null;
-          this.textFontSize = null;
-          this.textSubtitleColor = null;
-          this.textSubtitleStyle = null;
-          this.textSubtitleFontSize = null;
-        }
-      }
-    },
-  },
-  created() {
-    this.container = this.value;
-
-    this.textTitleColor = this.container.textTitleColor;
-    this.textTitleFontSize = this.container.textTitleFontSize?.replace?.('px', '');
-    this.textTitleStyle = (this.container.textTitleFontWeight || this.container.textTitleFontStyle) && [] || null;
-    if (this.container.textTitleFontWeight === 'bold') {
-      this.textTitleStyle.push('bold');
-    }
-    if (this.container.textTitleFontStyle === 'italic') {
-      this.textTitleStyle.push('italic');
-    }
-
-    this.textHeaderColor = this.container.textHeaderColor;
-    this.textHeaderFontSize = this.container.textHeaderFontSize?.replace?.('px', '');
-    this.textHeaderStyle = (this.container.textHeaderFontWeight || this.container.textHeaderFontStyle) && [] || null;
-    if (this.container.textHeaderFontWeight === 'bold') {
-      this.textHeaderStyle.push('bold');
-    }
-    if (this.container.textHeaderFontStyle === 'italic') {
-      this.textHeaderStyle.push('italic');
-    }
-
-    this.textColor = this.container.textColor;
-    this.textFontSize = this.container.textFontSize?.replace?.('px', '');
-    this.textStyle = (this.container.textFontWeight || this.container.textFontStyle) && [] || null;
-    if (this.container.textFontWeight === 'bold') {
-      this.textStyle.push('bold');
-    }
-    if (this.container.textFontStyle === 'italic') {
-      this.textStyle.push('italic');
-    }
-
-    this.textSubtitleColor = this.container.textSubtitleColor;
-    this.textSubtitleFontSize = this.container.textSubtitleFontSize?.replace?.('px', '');
-    this.textSubtitleStyle = (this.container.textSubtitleFontWeight || this.container.textSubtitleFontStyle) && [] || null;
-    if (this.container.textSubtitleFontWeight === 'bold') {
-      this.textSubtitleStyle.push('bold');
-    }
-    if (this.container.textSubtitleFontStyle === 'italic') {
-      this.textSubtitleStyle.push('italic');
-    }
-
-    this.enabled = !!this.textTitleColor || !!this.textHeaderColor || !!this.textColor || !!this.textSubtitleColor;
-    this.$nextTick().then(() => this.initialized = true);
-  },
-};
-</script>
\ No newline at end of file
diff --git a/layout-webapp/src/main/webapp/vue-app/common-layout/initComponents.js b/layout-webapp/src/main/webapp/vue-app/common-layout/initComponents.js
index a628a6a9c..100d3e787 100644
--- a/layout-webapp/src/main/webapp/vue-app/common-layout/initComponents.js
+++ b/layout-webapp/src/main/webapp/vue-app/common-layout/initComponents.js
@@ -18,18 +18,6 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 
-import BorderRadiusSelector from './components/form/BorderRadiusSelector.vue';
-import ColorPicker from './components/form/ColorPicker.vue';
-import BackgroundImageAttachment from './components/form/BackgroundImageAttachment.vue';
-import BackgroundInput from './components/form/BackgroundInput.vue';
-import BackgroundMarginInput from './components/form/BackgroundMarginInput.vue';
-import BackgroundRadiusInput from './components/form/BackgroundRadiusInput.vue';
-import TextInput from './components/form/TextInput.vue';
-import TextBackgroundInput from './components/form/TextBackgroundInput.vue';
-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 ContainerExtension from './components/content/base/ContainerExtension.vue';
@@ -62,9 +50,23 @@ import EditSectionDrawer from './components/drawer/EditSectionDrawer.vue';
 
 import EditPortletDialog from './components/dialog/EditPortletDialog.vue';
 
+// The styling inputs live in social's shared 'stylingInputs' module, a dependency of the editor
+// portlets only (the view-time page renderer loads this module too and must not download them). They stay
+// reachable under their historical layout-editor-* tags through async components resolved at first mount.
+function sharedStylingInput(tag) {
+  return (resolve, reject) => {
+    const component = Vue.options.components[tag];
+    if (component) {
+      resolve(component);
+    } else {
+      reject(new Error(`Shared styling input '${tag}' is not registered: the stylingInputs module must be loaded by this portlet`));
+    }
+  };
+}
+
 const components = {
-  'layout-editor-color-picker': ColorPicker,
-  'layout-editor-border-radius-selector': BorderRadiusSelector,
+  'layout-editor-color-picker': sharedStylingInput('styling-color-picker'),
+  'layout-editor-border-radius-selector': sharedStylingInput('styling-border-radius-selector'),
   'layout-editor-container': Container,
   'layout-editor-container-extension': ContainerExtension,
   'layout-editor-container-base': ContainerBase,
@@ -85,16 +87,16 @@ const components = {
   'layout-editor-page-edit-drawer': EditPageDrawer,
   'layout-editor-section-edit-drawer': EditSectionDrawer,
   'layout-editor-portlet-edit-dialog': EditPortletDialog,
-  'layout-editor-background-image-attachment': BackgroundImageAttachment,
-  'layout-editor-background-input': BackgroundInput,
-  'layout-editor-background-margin-input': BackgroundMarginInput,
-  'layout-editor-background-radius-input': BackgroundRadiusInput,
-  'layout-editor-text-input': TextInput,
-  'layout-editor-text-background-input': TextBackgroundInput,
-  'layout-editor-margin-input': MarginInput,
-  'layout-editor-section-margin-input': SectionMarginInput,
-  'layout-editor-border-input': BorderInput,
-  'layout-editor-border-radius-input': BorderRadiusInput,
+  'layout-editor-background-image-attachment': sharedStylingInput('styling-background-image-attachment'),
+  'layout-editor-background-input': sharedStylingInput('styling-background-input'),
+  'layout-editor-background-margin-input': sharedStylingInput('styling-background-margin-input'),
+  'layout-editor-background-radius-input': sharedStylingInput('styling-background-radius-input'),
+  'layout-editor-text-input': sharedStylingInput('styling-text-input'),
+  'layout-editor-text-background-input': sharedStylingInput('styling-text-background-input'),
+  'layout-editor-margin-input': sharedStylingInput('styling-margin-input'),
+  'layout-editor-section-margin-input': sharedStylingInput('styling-section-margin-input'),
+  'layout-editor-border-input': sharedStylingInput('styling-border-input'),
+  'layout-editor-border-radius-input': sharedStylingInput('styling-border-radius-input'),
   'layout-editor-application-card': ApplicationCard,
   'layout-editor-application-category-card': ApplicationCategoryCard,
   'layout-editor-application-menu': ApplicationMenu,
diff --git a/layout-webapp/src/main/webapp/vue-app/common-layout/js/LayoutUtils.js b/layout-webapp/src/main/webapp/vue-app/common-layout/js/LayoutUtils.js
index 728e79a7d..758d6aac6 100644
--- a/layout-webapp/src/main/webapp/vue-app/common-layout/js/LayoutUtils.js
+++ b/layout-webapp/src/main/webapp/vue-app/common-layout/js/LayoutUtils.js
@@ -95,6 +95,10 @@ export const containerModel = {
   appBackgroundSize: null,
   appBackgroundRepeat: null,
   appBackgroundAttachment: null,
+  appMarginTop: null,
+  appMarginRight: null,
+  appMarginBottom: null,
+  appMarginLeft: null,
   textTitleColor: null,
   textTitleFontSize: null,
   textTitleFontWeight: null,
@@ -354,15 +358,10 @@ export function applyContainerStyle(container, containerStyle) {
     Vue.set(container, 'marginBottom', containerStyle.marginBottom === 0 || containerStyle.marginBottom ? containerStyle.marginBottom : null);
     Vue.set(container, 'marginLeft', containerStyle.marginLeft === 0 || containerStyle.marginLeft ? containerStyle.marginLeft : null);
   } else {
+    // margins are rendered through --appMargin* custom properties from the stored margin attributes;
+    // the Vuetify spacing classes older layouts carry are stripped (and never written again)
     container.cssClass = container.cssClass.replace(new RegExp('(^| )(mt|mr|mb|ml|ms|me)-((md|lg|xl)-)?n?[0-9]{1,2}', 'g'), '').replace(/  +/g, ' ');
-    if (containerStyle.marginTop === 0 || containerStyle.marginTop) {
-      container.cssClass += ` mt-${containerStyle.marginTop >= 0 ? '' : 'n'}${Math.abs(parseInt(Math.max(-64, Math.min(containerStyle.marginTop || 0, 64)) / 4))}`;
-      container.cssClass += ` me-${containerStyle.marginRight >= 0 ? '' : 'n'}${Math.abs(parseInt(Math.max(-64, Math.min(containerStyle.marginRight || 0, 64)) / 4))}`;
-      container.cssClass += ` mb-${containerStyle.marginBottom >= 0 ? '' : 'n'}${Math.abs(parseInt(Math.max(-64, Math.min(containerStyle.marginBottom || 0, 64)) / 4))}`;
-      container.cssClass += ` ms-${containerStyle.marginLeft >= 0 ? '' : 'n'}${Math.abs(parseInt(Math.max(-64, Math.min(containerStyle.marginLeft || 0, 64)) / 4))}`;
-    }
   }
-
   container.cssClass = container.cssClass.replace(new RegExp('(^| )(brtr|brtl|brbr|brbl)-[0-9]', 'g'), '').replace(/  +/g, ' ');
   Vue.set(container, 'cssClass', container.cssClass);
 
@@ -432,6 +431,10 @@ export function applyContainerStyle(container, containerStyle) {
   Vue.set(container, 'appBackgroundSize', containerStyle.appBackgroundSize || null);
   Vue.set(container, 'appBackgroundRepeat', containerStyle.appBackgroundRepeat || null);
   Vue.set(container, 'appBackgroundAttachment', containerStyle.appBackgroundAttachment || null);
+  Vue.set(container, 'appMarginTop', containerStyle.appMarginTop === 0 ? 0 : containerStyle.appMarginTop || null);
+  Vue.set(container, 'appMarginRight', containerStyle.appMarginRight === 0 ? 0 : containerStyle.appMarginRight || null);
+  Vue.set(container, 'appMarginBottom', containerStyle.appMarginBottom === 0 ? 0 : containerStyle.appMarginBottom || null);
+  Vue.set(container, 'appMarginLeft', containerStyle.appMarginLeft === 0 ? 0 : containerStyle.appMarginLeft || null);
   Vue.set(container, 'backgroundColor', containerStyle.backgroundColor || null);
   Vue.set(container, 'backgroundImage', containerStyle.backgroundImage || null);
   Vue.set(container, 'backgroundEffect', containerStyle.backgroundEffect || null);
@@ -1025,18 +1028,8 @@ export function parseContainerStyle(container) {
     && container.template !== sidebarTemplate
     && container.template !== pageBodyTemplate
     && container.template !== sectionsParentTemplate) {
-    const marginMatches = container?.cssClass?.match?.(new RegExp('(^| )(mt|mr|mb|ml|ms|me)-((md|lg|xl)-)?n?[0-9]{1,2}', 'g')) || [];
-    if (marginMatches?.length) {
-      container.marginTop = parseInt(marginMatches.find(c => c.search(/mt-n?\d+/) >= 0)?.replace?.('mt-n', '-')?.replace?.('mt-', '') || 0) * 4;
-      container.marginRight = parseInt(marginMatches.find(c => c.search(/me-n?\d+/) >= 0)?.replace?.('me-n', '-')?.replace?.('me-', '') || 0) * 4;
-      container.marginBottom = parseInt(marginMatches.find(c => c.search(/mb-n?\d+/) >= 0)?.replace?.('mb-n', '-')?.replace?.('mb-', '') || 0) * 4;
-      container.marginLeft = parseInt(marginMatches.find(c => c.search(/ms-n?\d+/) >= 0)?.replace?.('ms-n', '-')?.replace?.('ms-', '') || 0) * 4;
-    } else {
-      container.marginTop = null;
-      container.marginRight = null;
-      container.marginBottom = null;
-      container.marginLeft = null;
-    }
+    // margins live in the margin attributes only, on the platform scale (20 = no extra margin);
+    // a legacy application is converted once, server-side, by LayoutModel, so the attributes are the source of truth
   }
 
   const radiusMatches = container?.cssClass?.match?.(new RegExp('(^| )(brtr|brtl|brbr|brbl)-[0-9]', 'g')) || [];
diff --git a/layout-webapp/src/main/webapp/vue-app/common/js/ApplicationUtils.js b/layout-webapp/src/main/webapp/vue-app/common/js/ApplicationUtils.js
index 3536c1477..4810860f3 100644
--- a/layout-webapp/src/main/webapp/vue-app/common/js/ApplicationUtils.js
+++ b/layout-webapp/src/main/webapp/vue-app/common/js/ApplicationUtils.js
@@ -27,6 +27,24 @@ export function installApplication(navUri, applicationStorageId, applicationElem
     .then(applicationContent => handleApplicationContent(applicationContent, applicationElement, applicationMode));
 }
 
+const GRADIENT_COLOR_PATTERN = /#[0-9a-fA-F]{3,8}|rgba?\([^)]*\)/;
+
+export function isTopBanner(container) {
+  return !!container?.cssClass?.includes?.('layout-banner-top-section');
+}
+
+export function firstGradientColor(effect) {
+  const match = effect?.match?.(GRADIENT_COLOR_PATTERN);
+  return match ? match[0] : null;
+}
+
+export function isTransparentColor(color) {
+  return color === 'transparent' || (color?.length === 9 && color.toUpperCase().endsWith('00'));
+}
+
+// Margins are rendered through --appMargin* custom properties (getStyle); the Vuetify spacing classes that
+// older layouts stored for the same margins are dropped at render time so that they do not apply twice
+
 export function getStyle(container, options) {
   const style = {};
   const backgroundLayerValues = !options.noBackgroundStyle && parseBackgroundLayerValues(container.cssClass);
@@ -298,14 +316,17 @@ export function getStyle(container, options) {
         style['--appWidthScroll'] = 'auto';
       }
     }
+    // Application and page levels write the applications' border variables (a page's "Application styling > Border"
+    // is the default of its applications, inherited by custom property); sections paint their own border
+    const applicationBorder = options.appStyle || options.pageStyle;
     if (container.borderColor) {
-      style[options.appStyle && '--appBorderColor' || 'border-color'] = container.borderColor;
+      style[applicationBorder && '--appBorderColor' || 'border-color'] = container.borderColor;
       if (container.borderSize) {
-        style[options.appStyle && '--appBorderSize' || 'border-size'] = `${container.borderSize}px`;
+        style[applicationBorder && '--appBorderSize' || 'border-size'] = `${container.borderSize}px`;
       }
     }
     if (container.boxShadow === 'true') {
-      style[options.appStyle && '--appBoxShadow' || 'box-shadow'] = '0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12)';
+      style[applicationBorder && '--appBoxShadow' || 'box-shadow'] = '0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12)';
     }
   }
   if (!options.noBackgroundStyle
@@ -330,9 +351,18 @@ export function getStyle(container, options) {
           style['--sectionBackgroundColorScroll'] = colors[1];
         } else {
           style['background-color'] = container.backgroundColor;
-          if (container.cssClass?.includes?.('layout-sticky-section')) {
-            style['--sectionBackgroundColorScroll'] = container.backgroundColor;
-          }
+          // Colour kept once the section is fixed on scroll: the section's own, whether it is fixed by its
+          // own option or by the platform-wide Topbar default (body.topbar-sticky); a no-op when nothing is sticky
+          style['--sectionBackgroundColorScroll'] = container.backgroundColor;
+        }
+        if (isTopBanner(container) && container.backgroundEffect) {
+          // The Topbar background offers no gradient option. A stored gradient is ignored, never
+          // rewritten: its first colour is shown, otherwise the platform Topbar colour
+          const fallbackColor = firstGradientColor(container.backgroundEffect)
+            || (container.backgroundColor && !isTransparentColor(container.backgroundColor) && container.backgroundColor)
+            || 'var(--allPagesTopBarBackgroundColor)';
+          style['background-color'] = fallbackColor;
+          style['--sectionBackgroundColorScroll'] = fallbackColor;
         }
       }
     } else if (container.backgroundEffect || container.backgroundImage) {
@@ -347,8 +377,9 @@ export function getStyle(container, options) {
       }
     }
 
-    if (container.backgroundEffect && container.backgroundImage) {
-      style[options.isApplicationBackground && '--appBackgroundImage' || 'background-image'] = `url(${container.backgroundImage}),${container.backgroundEffect}`;
+    const backgroundEffect = isTopBanner(container) ? null : container.backgroundEffect;
+    if (backgroundEffect && container.backgroundImage) {
+      style[options.isApplicationBackground && '--appBackgroundImage' || 'background-image'] = `url(${container.backgroundImage}),${backgroundEffect}`;
     } else if (container.backgroundImage) {
       if (options.siteStyle) {
         document.body.style.setProperty('--allPagesBackgroundImage', `url(${container.backgroundImage})`);
@@ -357,7 +388,7 @@ export function getStyle(container, options) {
       } else {
         style[options.isApplicationBackground && '--appBackgroundImage' || 'background-image'] = `url(${container.backgroundImage})`;
       }
-    } else if (container.backgroundEffect) {
+    } else if (backgroundEffect) {
       if (options.siteStyle) {
         document.body.style.setProperty('--allPagesBackgroundImage', container.backgroundEffect);
       } else if (options.pageStyle) {
@@ -451,6 +482,23 @@ export function getStyle(container, options) {
     document.body.style.removeProperty('--allPagesBackgroundAttachment');
     siteBackgroundOverridden = false;
   }
+  // Margins are custom properties at every level, on the platform scale (20 = no extra margin), rendered by one
+  // skin rule: calc(var(--appMargin*, var(--allPagesAppMargin*, 20px)) - 20px). The stored attribute travels as is:
+  // a legacy application (spacing tokens) is converted once, server-side, by LayoutModel before it reaches here.
+  // Page level (pageStyle): default margins of the applications of the page (appMargin*), inherited by every
+  // application below. Application level (applicationMargins, set by the application renderers only): its own
+  // margins (margin*), on its own element. Sections, cells and the site container carry margin* fields of their
+  // own scale and must not write --appMargin*, which their applications would inherit.
+  // pageAppMargins: the page editor renders the page container with the site style and passes this option so that
+  // the Edit Page margins preview there as they render at view time (pageStyle).
+  if (options.applicationMargins || options.pageStyle || options.pageAppMargins) {
+    ['Top', 'Right', 'Bottom', 'Left'].forEach(side => {
+      const margin = options.applicationMargins ? container[`margin${side}`] : container[`appMargin${side}`];
+      if (margin === 0 || margin) {
+        style[`--appMargin${side}`] = `${Number(margin)}px`;
+      }
+    });
+  }
   if (container.appBackgroundColor) {
     style['--appBackgroundColor'] = container.appBackgroundColor;
   }
@@ -490,51 +538,14 @@ export function getStyle(container, options) {
   return style;
 }
 
-// Background margin/radius (EXIP-88427) can't be stored as dedicated ModelStyle
-// fields since ModelStyle is an external org.exoplatform.portal class we can't
-// extend from this repo, so the 8 values are opaquely encoded as cssClass tokens
-// (same pattern already used to mirror marginTop/radiusTopRight into mt-/brtr-
-// classes, under a prefix that can't collide with those).
-const BACKGROUND_LAYER_TOKEN_PREFIXES = {
-  marginTop: 'layout-bg-margin-top',
-  marginRight: 'layout-bg-margin-right',
-  marginBottom: 'layout-bg-margin-bottom',
-  marginLeft: 'layout-bg-margin-left',
-  radiusTopRight: 'layout-bg-radius-tr',
-  radiusTopLeft: 'layout-bg-radius-tl',
-  radiusBottomRight: 'layout-bg-radius-br',
-  radiusBottomLeft: 'layout-bg-radius-bl',
-};
-
+// The cssClass token helpers of the background layer (EXIP-88427) live in social's shared 'stylingUtils'
+// module (Vue.prototype.$stylingUtils), consumed by the styling inputs and by this renderer
 export function parseBackgroundLayerValues(cssClass) {
-  if (!cssClass) {
-    return null;
-  }
-  const values = {};
-  let found = false;
-  Object.entries(BACKGROUND_LAYER_TOKEN_PREFIXES).forEach(([key, prefix]) => {
-    const match = cssClass.match(new RegExp(`(?:^| )${prefix}-([0-9]+)(?: |$)`));
-    if (match) {
-      values[key] = parseInt(match[1]);
-      found = true;
-    }
-  });
-  return found ? values : null;
+  return Vue.prototype.$stylingUtils.parseBackgroundLayerValues(cssClass);
 }
 
 export function setBackgroundLayerValues(container, partialValues) {
-  // Merge with whatever's already encoded so that the margin component's
-  // writes never clobber the radius component's tokens (and vice-versa) -
-  // each only knows about its own 4 values, not the other's.
-  const values = { ...parseBackgroundLayerValues(container.cssClass), ...partialValues };
-  const prefixesPattern = Object.values(BACKGROUND_LAYER_TOKEN_PREFIXES).join('|');
-  let cssClass = (container.cssClass || '').replace(new RegExp(`(^| )(${prefixesPattern})-[0-9]+`, 'g'), '').replace(/ {2,}/g, ' ').trim();
-  Object.entries(BACKGROUND_LAYER_TOKEN_PREFIXES).forEach(([key, prefix]) => {
-    if (values[key] || values[key] === 0) {
-      cssClass += ` ${prefix}-${values[key]}`;
-    }
-  });
-  container.cssClass = cssClass.trim();
+  return Vue.prototype.$stylingUtils.setBackgroundLayerValues(container, partialValues);
 }
 
 // The site background paints on the scroll container itself (see the
diff --git a/layout-webapp/src/main/webapp/vue-app/layout-editor/components/content/container/PageBody.vue b/layout-webapp/src/main/webapp/vue-app/layout-editor/components/content/container/PageBody.vue
index 845b4fa52..c5f115fed 100644
--- a/layout-webapp/src/main/webapp/vue-app/layout-editor/components/content/container/PageBody.vue
+++ b/layout-webapp/src/main/webapp/vue-app/layout-editor/components/content/container/PageBody.vue
@@ -26,7 +26,8 @@
     :index="index"
     :length="childrenSize"
     :draggable="childrenSize > 1"
-    site-style />
+    site-style
+    page-app-margins />
 </template>
 <script>
 export default {
diff --git a/layout-webapp/src/main/webapp/vue-app/layout-editor/main.js b/layout-webapp/src/main/webapp/vue-app/layout-editor/main.js
index de986dcf6..b7b6315d2 100644
--- a/layout-webapp/src/main/webapp/vue-app/layout-editor/main.js
+++ b/layout-webapp/src/main/webapp/vue-app/layout-editor/main.js
@@ -46,7 +46,8 @@ const lang = eXo?.env.portal.language || 'en';
 const url = `/layout/i18n/locale.portlet.LayoutEditor?lang=${lang}`;
 
 export function init() {
-  exoi18n.loadLanguageAsync(lang, url)
+  // the shared styling inputs (social stylingInputs module) load their own labels: wait for both bundles
+  Promise.all([exoi18n.loadLanguageAsync(lang, url), window.stylingInputsI18n]).then(([i18n]) => i18n)
     .then(i18n => {
       // init Vue app when locale ressources are ready
       Vue.createApp({
diff --git a/layout-webapp/src/main/webapp/vue-app/page-layout/components/container/Application.vue b/layout-webapp/src/main/webapp/vue-app/page-layout/components/container/Application.vue
index c77627c43..cc40c3913 100644
--- a/layout-webapp/src/main/webapp/vue-app/page-layout/components/container/Application.vue
+++ b/layout-webapp/src/main/webapp/vue-app/page-layout/components/container/Application.vue
@@ -68,6 +68,7 @@ export default {
         isApplicationBackground: true,
         isApplicationScroll: true,
         appStyle: true,
+        applicationMargins: true,
       });
     },
     backgroundLayerStyle() {
diff --git a/layout-webapp/src/main/webapp/vue-app/page-template/main.js b/layout-webapp/src/main/webapp/vue-app/page-template/main.js
index 339d3532d..4608f5c7b 100644
--- a/layout-webapp/src/main/webapp/vue-app/page-template/main.js
+++ b/layout-webapp/src/main/webapp/vue-app/page-template/main.js
@@ -36,7 +36,8 @@ const url = `/layout/i18n/locale.portlet.LayoutEditor?lang=${lang}`;
 
 const appId = 'pageTemplatesManagement';
 export function init() {
-  exoi18n.loadLanguageAsync(lang, url)
+  // the shared styling inputs (social stylingInputs module) load their own labels: wait for both bundles
+  Promise.all([exoi18n.loadLanguageAsync(lang, url), window.stylingInputsI18n]).then(([i18n]) => i18n)
     .then(i18n =>
       Vue.createApp({
         template: `<page-templates-management id="${appId}"/>`,
diff --git a/layout-webapp/src/main/webapp/vue-app/portlet-editor/main.js b/layout-webapp/src/main/webapp/vue-app/portlet-editor/main.js
index 350c7e42e..083d16f01 100644
--- a/layout-webapp/src/main/webapp/vue-app/portlet-editor/main.js
+++ b/layout-webapp/src/main/webapp/vue-app/portlet-editor/main.js
@@ -39,7 +39,8 @@ const lang = eXo?.env.portal.language || 'en';
 const url = `/layout/i18n/locale.portlet.LayoutEditor?lang=${lang}`;
 
 export function init() {
-  exoi18n.loadLanguageAsync(lang, url)
+  // the shared styling inputs (social stylingInputs module) load their own labels: wait for both bundles
+  Promise.all([exoi18n.loadLanguageAsync(lang, url), window.stylingInputsI18n]).then(([i18n]) => i18n)
     .then(i18n => {
       // init Vue app when locale ressources are ready
       Vue.createApp({
diff --git a/layout-webapp/src/main/webapp/vue-app/portlets/main.js b/layout-webapp/src/main/webapp/vue-app/portlets/main.js
index 054132bd1..baa8b2466 100644
--- a/layout-webapp/src/main/webapp/vue-app/portlets/main.js
+++ b/layout-webapp/src/main/webapp/vue-app/portlets/main.js
@@ -36,7 +36,8 @@ const url = `/layout/i18n/locale.portlet.LayoutEditor?lang=${lang}`;
 
 const appId = 'portletsManagement';
 export function init() {
-  exoi18n.loadLanguageAsync(lang, url)
+  // the shared styling inputs (social stylingInputs module) load their own labels: wait for both bundles
+  Promise.all([exoi18n.loadLanguageAsync(lang, url), window.stylingInputsI18n]).then(([i18n]) => i18n)
     .then(i18n =>
       Vue.createApp({
         template: `<portlets-management id="${appId}"/>`,
diff --git a/layout-webapp/src/main/webapp/vue-app/section-editor/main.js b/layout-webapp/src/main/webapp/vue-app/section-editor/main.js
index 7239dfd99..2f49982b4 100644
--- a/layout-webapp/src/main/webapp/vue-app/section-editor/main.js
+++ b/layout-webapp/src/main/webapp/vue-app/section-editor/main.js
@@ -46,7 +46,8 @@ const lang = eXo?.env.portal.language || 'en';
 const url = `/layout/i18n/locale.portlet.LayoutEditor?lang=${lang}`;
 
 export function init() {
-  exoi18n.loadLanguageAsync(lang, url)
+  // the shared styling inputs (social stylingInputs module) load their own labels: wait for both bundles
+  Promise.all([exoi18n.loadLanguageAsync(lang, url), window.stylingInputsI18n]).then(([i18n]) => i18n)
     .then(i18n => {
       // init Vue app when locale ressources are ready
       Vue.createApp({
diff --git a/layout-webapp/src/main/webapp/vue-app/section-template/main.js b/layout-webapp/src/main/webapp/vue-app/section-template/main.js
index 6a7a236cb..516e730e2 100644
--- a/layout-webapp/src/main/webapp/vue-app/section-template/main.js
+++ b/layout-webapp/src/main/webapp/vue-app/section-template/main.js
@@ -37,7 +37,8 @@ const url = `/layout/i18n/locale.portlet.LayoutEditor?lang=${lang}`;
 
 const appId = 'sectionTemplateManagement';
 export function init() {
-  exoi18n.loadLanguageAsync(lang, url)
+  // the shared styling inputs (social stylingInputs module) load their own labels: wait for both bundles
+  Promise.all([exoi18n.loadLanguageAsync(lang, url), window.stylingInputsI18n]).then(([i18n]) => i18n)
     .then(i18n =>
       Vue.createApp({
         template: `<section-template-management id="${appId}"/>`,
diff --git a/layout-webapp/src/main/webapp/vue-app/site-layout-editor/components/drawer/EditSiteBannerDrawer.vue b/layout-webapp/src/main/webapp/vue-app/site-layout-editor/components/drawer/EditSiteBannerDrawer.vue
index 0187c96ac..26629288e 100644
--- a/layout-webapp/src/main/webapp/vue-app/site-layout-editor/components/drawer/EditSiteBannerDrawer.vue
+++ b/layout-webapp/src/main/webapp/vue-app/site-layout-editor/components/drawer/EditSiteBannerDrawer.vue
@@ -136,20 +136,38 @@
         <div class="text-header mb-4">
           {{ $t('layout.editSiteSidebarSection.label.updateStyle') }}
         </div>
-        <div v-if="isTopContainer" class="d-flex align-center mb-2">
-          <div class="me-auto mb-2">
+        <layout-editor-background-input
+          ref="backgroundInput"
+          v-model="container"
+          :scroll-color="stickySection"
+          :no-gradient="isTopContainer"
+          class="mb-2"
+          text-bold>
+          <template v-if="isTopContainer" #after-color>
+            <v-list-item
+              class="pa-0"
+              dense>
+              <v-list-item-content class="my-auto">
+                {{ $t('layout.fixPositionWhenScrolling') }}
+              </v-list-item-content>
+              <v-list-item-action class="my-auto me-0 ms-auto">
+                <v-switch
+                  v-model="stickySection"
+                  class="my-auto me-n2" />
+              </v-list-item-action>
+            </v-list-item>
+          </template>
+        </layout-editor-background-input>
+        <div
+          v-if="isTopContainer && !backgroundEnabled"
+          class="d-flex align-center mb-2">
+          <div class="me-auto">
             {{ $t('layout.fixPositionWhenScrolling') }}
           </div>
           <v-switch
             v-model="stickySection"
             class="ms-auto my-auto me-n2" />
         </div>
-        <layout-editor-background-input
-          ref="backgroundInput"
-          v-model="container"
-          :scroll-color="stickySection"
-          class="mb-2"
-          text-bold />
         <layout-editor-text-input
           ref="textInput"
           v-model="container"
@@ -207,6 +225,11 @@ export default {
     saving: false,
   }),
   computed: {
+    // The shared background input renders its after-colour slot only while a background is set: the fix-position
+    // option then sits under the Colour field as in Branding and Theme; without background it stays reachable below
+    backgroundEnabled() {
+      return !!this.container?.backgroundColor || !!this.container?.backgroundImage;
+    },
     isTopContainer() {
       return this.container?.cssClass?.includes?.('layout-banner-top-section');
     },
diff --git a/layout-webapp/src/main/webapp/vue-app/site-layout-editor/main.js b/layout-webapp/src/main/webapp/vue-app/site-layout-editor/main.js
index d5da82c81..4f1b92ca9 100644
--- a/layout-webapp/src/main/webapp/vue-app/site-layout-editor/main.js
+++ b/layout-webapp/src/main/webapp/vue-app/site-layout-editor/main.js
@@ -46,7 +46,8 @@ const lang = eXo?.env.portal.language || 'en';
 const url = `/layout/i18n/locale.portlet.LayoutEditor?lang=${lang}`;
 
 export function init() {
-  exoi18n.loadLanguageAsync(lang, url)
+  // the shared styling inputs (social stylingInputs module) load their own labels: wait for both bundles
+  Promise.all([exoi18n.loadLanguageAsync(lang, url), window.stylingInputsI18n]).then(([i18n]) => i18n)
     .then(i18n => {
       // init Vue app when locale ressources are ready
       Vue.createApp({