diff --git a/projects/common/models/section.ts b/projects/common/models/section.ts
index 873a6429a4ae6003fa2b20417a06d36f44f3fd70..0f6ddcfa3909d5a9e7ec5db85e537c43f7ae67f1 100644
--- a/projects/common/models/section.ts
+++ b/projects/common/models/section.ts
@@ -18,14 +18,14 @@ export class Section {
     Object.assign(this, serializedSection);
     this.elements = [];
     if (serializedSection) {
-      serializedSection?.elements.forEach((element: UIElement) => {
-        this.elements.push(ElementFactory.createElement(element));
+      serializedSection?.elements.forEach(async (element: UIElement) => {
+        this.elements.push(await ElementFactory.createElement(element));
       });
     }
   }
 
   async addElement(elementType: string, coordinates: { x: number; y: number } | undefined): Promise<void> {
-    this.elements.push(ElementFactory.createElement({ type: elementType } as UIElement, coordinates));
+    this.elements.push(await ElementFactory.createElement({ type: elementType } as UIElement, coordinates));
   }
 
   deleteElements(elements: UIElement[]): void {
@@ -48,11 +48,11 @@ export class Section {
   }
 
   duplicateElements(elements: UIElement[]): void {
-    elements.forEach((element: UIElement) => {
+    elements.forEach(async (element: UIElement) => {
       const newElementConfig: Record<string, string | number | boolean | string[]> = { ...element } as
         Record<string, string | number | boolean | string[]>;
       delete newElementConfig.id; // remove ID from object, so a new one is created
-      const newElement: UIElement = ElementFactory.createElement(newElementConfig as UIElement);
+      const newElement: UIElement = await ElementFactory.createElement(newElementConfig as UIElement);
       newElement.xPosition += 10;
       newElement.yPosition += 10;
       this.elements.push(newElement);
diff --git a/projects/common/util/element.factory.ts b/projects/common/util/element.factory.ts
index 7e8dabeee5b3a4a3297fc4375391e327234b143f..cdc50369f5caa18399183052108adde4e6d2a82b 100644
--- a/projects/common/util/element.factory.ts
+++ b/projects/common/util/element.factory.ts
@@ -9,8 +9,9 @@ import { RadioButtonGroupElement } from '../models/radio-button-group-element';
 import { ImageElement } from '../models/image-element';
 import { AudioElement } from '../models/audio-element';
 import { VideoElement } from '../models/video-element';
+import { FileService } from '../file.service';
 
-export function createElement(elementModel: UIElement, coordinates?: { x: number; y: number }): UIElement {
+export async function createElement(elementModel: UIElement, coordinates?: { x: number; y: number }): Promise<UIElement> {
   let newElement: UIElement;
   switch (elementModel.type) {
     case 'text':
@@ -35,12 +36,21 @@ export function createElement(elementModel: UIElement, coordinates?: { x: number
       newElement = new RadioButtonGroupElement(elementModel, coordinates);
       break;
     case 'image':
+      if (!elementModel.src) {
+        elementModel.src = await FileService.loadImage();
+      }
       newElement = new ImageElement(elementModel, coordinates);
       break;
     case 'audio':
+      if (!elementModel.src) {
+        elementModel.src = await FileService.loadAudio();
+      }
       newElement = new AudioElement(elementModel, coordinates);
       break;
     case 'video':
+      if (!elementModel.src) {
+        elementModel.src = await FileService.loadVideo();
+      }
       newElement = new VideoElement(elementModel, coordinates);
       break;
     default: