diff --git a/assets/js/editor.js b/assets/js/editor.js
index ee1de98..cdf287b 100644
--- a/assets/js/editor.js
+++ b/assets/js/editor.js
@@ -82,59 +82,69 @@ function startCreateElement(event) {
   document.getElementById("resetButton").style = "display: none;";
   document.getElementById("buttons").style = "display: block;";
 
-  document.getElementById("resourcetype").addEventListener("change", function () {
-    var selectedType = document.getElementById("resourcetype").value;
-
-    if (selectedType == "MarkerElement") {
-      createMarkerElement(event, thetaStart);
-    } else if (selectedType == "ImageElement") {
-      createImageElement(event, thetaStart);
-    } else if (selectedType == "TeleportElement") {
-      createTeleportElement(event, thetaStart);
-    }
-  });
+  document
+    .getElementById("resourcetype")
+    .addEventListener("change", function () {
+      var selectedType = document.getElementById("resourcetype").value;
+      createElementPropertiesForm(selectedType, event, thetaStart);
+    });
 }
 
-function createMarkerElement(event, thetaStart) {
-  var elementProperties = document.getElementById("elementProperties");
-  elementProperties.innerHTML = `
-    <div class="mb-2">
-      <label for="title" class="form-label">Title</label>
-      <input type="text" class="form-control" id="title" placeholder="Title">
-    </div>
-    <div class="mb-2">
-      <label for="elementUpload" class="form-label">Text</label>
-      <input type="text" class="form-control" id="text" placeholder="Text">
-    </div>
-  `;
-}
+function createElementPropertiesForm(elementType, event, thetaStart) {
+  const elementProperties = document.getElementById("elementProperties");
+  let inputFields = "";
 
-function createImageElement(event, thetaStart) {
-  var elementProperties = document.getElementById("elementProperties");
-  elementProperties.innerHTML = `
-    <div class="mb-2">
-      <label for="title" class="form-label">Title</label>
-      <input type="text" class="form-control" id="title" placeholder="Title">
-    </div>
-    <div class="mb-2">
-      <label for="elementUpload" class="form-label">Image</label>
-      <input id="elementUpload" type="file" class="form-control">
-    </div>
-  `;
-}
+  switch (elementType) {
+    case "MarkerElement":
+    case "ImageElement":
+    case "TeleportElement":
+      inputFields = `
+        <div class="mb-2">
+          <label for="title" class="form-label">Title</label>
+          <input type="text" class="form-control" id="title" placeholder="Title">
+        </div>`;
+      if (elementType !== "MarkerElement") {
+        inputFields += `
+          <div class="mb-2">
+            <label for="elementUpload" class="form-label">Image</label>
+            <input id="elementUpload" type="file" class="form-control">
+          </div>`;
+      }
+      if (elementType === "TeleportElement") {
+        inputFields += `
+        <div class="dropdown mb-2">
+          <label for="destinationDropdownSearch" class="form-label">Teleport Destination</label>
+          <input class="form-control" autocomplete="off" id="destinationDropdownSearch" type="text" placeholder="Search...">
+          <input type="hidden" id="destination">
+          <div class="dropdown-menu" id="destinationDropdownMenu">
+            <!-- Dropdown items will be populated here by JavaScript -->
+          </div>
+        </div>
 
-function createTeleportElement(event, thetaStart) {
-  var elementProperties = document.getElementById("elementProperties");
-  elementProperties.innerHTML = `
-    <div class="mb-2">
-      <label for="title" class="form-label">Title</label>
-      <input type="text" class="form-control" id="title" placeholder="Title">
-    </div>
-    <div class="mb-2">
-    </div>
-    `;
-}
+        <div class="mb-2">
+          <label for="destination_x" class="form-label">Destination X/Y/Z Rotation</label>
+            <div class="row g-2">
+              <div class="col">
+                <input type="number" class="form-control" id="destination_x" name="input1" min="0" max="360" placeholder="X">
+              </div>
+              <div class="col">
+                <input type="number" class="form-control" id="destination_y" name="input2" min="0" max="360" placeholder="Y">
+              </div>
+              <div class="col">
+                <input type="number" class="form-control" id="destination_z" name="input3" min="0" max="360" placeholder="Z">
+              </div>
+            </div>
+          </div>
+        </div>
+        `;
+      }
+      break;
+    default:
+    // Handle unknown element type
+  }
 
+  elementProperties.innerHTML = inputFields;
+}
 
 function startModifyElement(event) {
   // Make the element draggable for positioning
@@ -170,39 +180,16 @@ function startModifyElement(event) {
         "csrftoken"
       )}">
       <input type="hidden" id="id" value="${event.target.getAttribute("id")}">
-      <div class="dropdown mb-2">
-        <label for="destinationDropdownSearch" class="form-label">Teleport Destination</label>
-        <input class="form-control" autocomplete="off" id="destinationDropdownSearch" type="text" placeholder="Search...">
-        <input type="hidden" id="destination">
-        <div class="dropdown-menu" id="destinationDropdownMenu">
-          <!-- Dropdown items will be populated here by JavaScript -->
-        </div>
-      </div>
-
-      <div class="mb-2">
-        <label for="destination_x" class="form-label">Destination X/Y/Z Rotation</label>
-          <div class="row g-2">
-            <div class="col">
-              <input type="number" class="form-control" id="destination_x" name="input1" min="0" max="360" placeholder="X">
-            </div>
-            <div class="col">
-              <input type="number" class="form-control" id="destination_y" name="input2" min="0" max="360" placeholder="Y">
-            </div>
-            <div class="col">
-              <input type="number" class="form-control" id="destination_z" name="input3" min="0" max="360" placeholder="Z">
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="mb-2">
-        <label for="elementUpload" class="form-label">Marker image</label>
-        <input id="elementUpload" type="file" class="form-control">
-      </div>
-
+      <div id="elementProperties"></div>
     </form>
     `;
 
+    createElementPropertiesForm(
+      element_data.obj.resourcetype,
+      event,
+      element_data.obj.thetaStart
+    );
+
     var scene_data_request = getScene(scene.getAttribute("id"));
     scene_data_request.then((scene_data) => {
       var category_data_request = getCategory(scene_data.obj.category);