diff --git a/assets/js/editor.js b/assets/js/editor.js
index 7abf96b..7a61a76 100644
--- a/assets/js/editor.js
+++ b/assets/js/editor.js
@@ -42,7 +42,7 @@ function addEventListeners(element) {
 // Open a modal for creating a new Element
 function startCreateElement(event) {
   var propertiesTitle = document.getElementById("propertiesTitle");
-  modalLabel.textContent = "Create Element";
+  propertiesTitle.textContent = "Create Element";
 
   var propertiesContent = document.getElementById("propertiesContent");
 
@@ -51,7 +51,7 @@ function startCreateElement(event) {
     event.detail.intersection.point.z
   );
 
-  modalContent.innerHTML = `<b>Creating element at:</b><br/>
+  propertiesContent.innerHTML = `<b>Creating element at:</b><br/>
   X: ${event.detail.intersection.point.x}<br/>
   Y: ${event.detail.intersection.point.y}<br/>
   Z: ${event.detail.intersection.point.z}<br/>
@@ -68,8 +68,26 @@ function startCreateElement(event) {
       <option value="ImageElement">Image</option>
       <option value="ImageElement">Teleport</option>
     </select>
+    <input type="hidden" id="csrfmiddlewaretoken" value="${getCookie(
+      "csrftoken"
+    )}">
   </form>
   `;
+
+  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);
+    }
+  });
 }
 
 function startModifyElement(event) {