diff --git a/projects/common/models/button-element.ts b/projects/common/models/button-element.ts
index 70d1e4376b2c639558db6aa304b5a744016c02bf..c988c4e2b7ba818ea4d508994856722e03c73c3c 100644
--- a/projects/common/models/button-element.ts
+++ b/projects/common/models/button-element.ts
@@ -20,7 +20,7 @@ export class ButtonElement extends UIElement implements FontElement, SurfaceUIEl
   constructor(serializedElement: UIElement, coordinates?: { x: number; y: number }) {
     super(serializedElement, coordinates);
     Object.assign(this, serializedElement);
-    Object.assign(this, initFontElement());
-    Object.assign(this, initSurfaceElement());
+    Object.assign(this, initFontElement(serializedElement));
+    Object.assign(this, initSurfaceElement(serializedElement));
   }
 }
diff --git a/projects/common/models/checkbox-element.ts b/projects/common/models/checkbox-element.ts
index 62122fc41a19d66ffd6a37fde4378c03e5bff1c9..b9cfb3a726234ffbbcba045f228e2121ef34b7a8 100644
--- a/projects/common/models/checkbox-element.ts
+++ b/projects/common/models/checkbox-element.ts
@@ -15,8 +15,8 @@ export class CheckboxElement extends InputElement implements FontElement, Surfac
   constructor(serializedElement: UIElement, coordinates?: { x: number; y: number }) {
     super(serializedElement, coordinates);
     Object.assign(this, serializedElement);
-    Object.assign(this, initFontElement());
-    Object.assign(this, initSurfaceElement());
+    Object.assign(this, initFontElement(serializedElement));
+    Object.assign(this, initSurfaceElement(serializedElement));
 
     this.value = serializedElement.value as boolean || false; // booleans are always initialized false
 
diff --git a/projects/common/models/dropdown-element.ts b/projects/common/models/dropdown-element.ts
index 45833bba4ec04f2f8e4d946d60cc44eb89006062..3aa5578ae6f246ccf21bb6cf2fc82a98e9149385 100644
--- a/projects/common/models/dropdown-element.ts
+++ b/projects/common/models/dropdown-element.ts
@@ -18,8 +18,8 @@ export class DropdownElement extends InputElement implements FontElement, Surfac
   constructor(serializedElement: UIElement, coordinates?: { x: number; y: number }) {
     super(serializedElement, coordinates);
     Object.assign(this, serializedElement);
-    Object.assign(this, initFontElement());
-    Object.assign(this, initSurfaceElement());
+    Object.assign(this, initFontElement(serializedElement));
+    Object.assign(this, initSurfaceElement(serializedElement));
 
     this.height = serializedElement.height || 83;
   }
diff --git a/projects/common/models/radio-button-group-element.ts b/projects/common/models/radio-button-group-element.ts
index 0047de1a07508f3044ce270081678ccdab9a8175..96d7321866189f409c01deebe6cd93f8f6e1f212 100644
--- a/projects/common/models/radio-button-group-element.ts
+++ b/projects/common/models/radio-button-group-element.ts
@@ -18,8 +18,8 @@ export class RadioButtonGroupElement extends InputElement implements FontElement
   constructor(serializedElement: UIElement, coordinates?: { x: number; y: number }) {
     super(serializedElement, coordinates);
     Object.assign(this, serializedElement);
-    Object.assign(this, initFontElement());
-    Object.assign(this, initSurfaceElement());
+    Object.assign(this, initFontElement(serializedElement));
+    Object.assign(this, initSurfaceElement(serializedElement));
 
     this.height = serializedElement.height || 85;
     this.backgroundColor = serializedElement.backgroundColor as string || 'transparent';
diff --git a/projects/common/models/text-area-element.ts b/projects/common/models/text-area-element.ts
index 3571580e565501aea7ab3c191c4fcc727576f9c0..63dd5641bdda8306f235966e2ad9786144224fb4 100644
--- a/projects/common/models/text-area-element.ts
+++ b/projects/common/models/text-area-element.ts
@@ -20,8 +20,8 @@ export class TextAreaElement extends InputElement implements FontElement, Surfac
   constructor(serializedElement: UIElement, coordinates?: { x: number; y: number }) {
     super(serializedElement, coordinates);
     Object.assign(this, serializedElement);
-    Object.assign(this, initFontElement());
-    Object.assign(this, initSurfaceElement());
+    Object.assign(this, initFontElement(serializedElement));
+    Object.assign(this, initSurfaceElement(serializedElement));
 
     this.height = serializedElement.height || 132;
     this.backgroundColor = serializedElement.backgroundColor as string || 'transparent';
diff --git a/projects/common/models/text-element.ts b/projects/common/models/text-element.ts
index 225823c1f9016124994be5a126a2c79217c3d258..39723339821303a27d1bbf45ec86922f7e670258 100644
--- a/projects/common/models/text-element.ts
+++ b/projects/common/models/text-element.ts
@@ -16,7 +16,7 @@ export class TextElement extends UIElement implements SurfaceUIElement {
   constructor(serializedElement: UIElement, coordinates?: { x: number; y: number }) {
     super(serializedElement, coordinates);
     Object.assign(this, serializedElement);
-    Object.assign(this, initSurfaceElement());
+    Object.assign(this, initSurfaceElement(serializedElement));
     this.fontColor = serializedElement.fontColor as string || 'black';
     this.font = serializedElement.font as string || 'Roboto';
     this.bold = serializedElement.bold as boolean || false;
diff --git a/projects/common/models/text-field-element.ts b/projects/common/models/text-field-element.ts
index 50bd8deb2adf35ae26fa009db51fdca0b9191646..a1c9b4506ebc68e4eb2d65d1c6d603ffa219730a 100644
--- a/projects/common/models/text-field-element.ts
+++ b/projects/common/models/text-field-element.ts
@@ -27,8 +27,8 @@ export class TextFieldElement extends InputElement implements FontElement, Surfa
   constructor(serializedElement: UIElement, coordinates?: { x: number; y: number }) {
     super(serializedElement, coordinates);
     Object.assign(this, serializedElement);
-    Object.assign(this, initFontElement());
-    Object.assign(this, initSurfaceElement());
+    Object.assign(this, initFontElement(serializedElement));
+    Object.assign(this, initSurfaceElement(serializedElement));
 
     this.height = serializedElement.height || 100;
     this.backgroundColor = serializedElement.backgroundColor as string || 'transparent';
diff --git a/projects/common/util/unit-interface-initializer.ts b/projects/common/util/unit-interface-initializer.ts
index 24e3f4241ffdf09a5b8a19ff948d6175c4e43a7e..f3db614b773a4e2e6d61e2f256bc769fecbb5fee 100644
--- a/projects/common/util/unit-interface-initializer.ts
+++ b/projects/common/util/unit-interface-initializer.ts
@@ -1,16 +1,17 @@
 import { FontElement, SurfaceUIElement } from '../interfaces/UIElementInterfaces';
+import { UIElement } from '../models/uI-element';
 
-export function initFontElement(): FontElement {
+export function initFontElement(serializedElement: UIElement): FontElement {
   return {
-    fontColor: 'black',
-    font: 'Roboto',
-    fontSize: 18,
-    bold: false,
-    italic: false,
-    underline: false
+    fontColor: serializedElement.fontColor as string || 'black',
+    font: serializedElement.font as string || 'Roboto',
+    fontSize: serializedElement.fontSize as number || 18,
+    bold: serializedElement.bold as boolean || false,
+    italic: serializedElement.italic as boolean || false,
+    underline: serializedElement.underline as boolean || false
   };
 }
 
-export function initSurfaceElement(): SurfaceUIElement {
-  return { backgroundColor: 'lightgrey' };
+export function initSurfaceElement(serializedElement: UIElement): SurfaceUIElement {
+  return { backgroundColor: serializedElement.backgroundColor as string || 'lightgrey' };
 }