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 5f2eda727..aff14a5df 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
@@ -202,7 +202,10 @@ export default {
   }),
   computed: {
     cssStyle() {
-      return this.$applicationUtils.getStyle(this.pageContainer, {
+      return this.$applicationUtils.getStyle({
+        ...this.pageContainer,
+        backgroundColor: this.pageContainer?.backgroundColor || this.defaultBackgroundColor,
+      }, {
         onlyBackgroundStyle: true,
       });
     },
@@ -219,8 +222,11 @@ export default {
   },
   created() {
     this.$root.$on('layout-page-properties-open', this.open);
-    if (document.body.computedStyleMap && document.body.computedStyleMap().get('--allPagesLightGrey')) {
-      this.defaultBackgroundColor = document.body.computedStyleMap().get('--allPagesLightGrey')[0] || this.defaultBackgroundColor;
+    if (document.body.computedStyleMap && document.body.computedStyleMap().get('--allPagesBackgroundColor')) {
+      const backgroundColor = document.body.computedStyleMap().get('--allPagesBackgroundColor')[0]?.trim?.();
+      if (backgroundColor) {
+        this.defaultBackgroundColor = backgroundColor.length === 7 ? `${backgroundColor}FF` : backgroundColor;
+      }
     }
   },
   beforeDestroy() {