diff --git a/modules/ui/markers-editor.js b/modules/ui/markers-editor.js
index 3f13b117..bf63a685 100644
--- a/modules/ui/markers-editor.js
+++ b/modules/ui/markers-editor.js
@@ -212,6 +212,7 @@ function editMarker() {
   }
 
   function toggleAddMarker() {
+    markerAdd.classList.toggle("pressed");
     addMarker.click();
   }
 
@@ -235,8 +236,8 @@ function editMarker() {
     listeners.forEach(removeListener => removeListener());
 
     unselect();
-    if (addMarker.classList.contains("pressed")) addMarker.classList.remove("pressed");
-    if (markerAdd.classList.contains("pressed")) markerAdd.classList.remove("pressed");
+    addMarker.classList.remove("pressed");
+    markerAdd.classList.remove("pressed");
     restoreDefaultEvents();
     clearMainTip();
   }
diff --git a/modules/ui/tools.js b/modules/ui/tools.js
index 893d85db..15ff2ee4 100644
--- a/modules/ui/tools.js
+++ b/modules/ui/tools.js
@@ -688,7 +688,7 @@ function addRouteOnClick() {
 }
 
 function toggleAddMarker() {
-  const pressed = document.getElementById("addMarker").classList.contains("pressed");
+  const pressed = document.getElementById("addMarker")?.classList.contains("pressed");
   if (pressed) {
     unpressClickToAddButton();
     return;
@@ -696,46 +696,33 @@ function toggleAddMarker() {
 
   addFeature.querySelectorAll("button.pressed").forEach(b => b.classList.remove("pressed"));
   addMarker.classList.add("pressed");
-  closeDialogs(".stable");
+
   viewbox.style("cursor", "crosshair").on("click", addMarkerOnClick);
   tip("Click on map to add a marker. Hold Shift to add multiple", true);
   if (!layerIsOn("toggleMarkers")) toggleMarkers();
 }
 
 function addMarkerOnClick() {
-  // TODO: rework for new markers system
+  const {markers} = pack;
   const point = d3.mouse(this);
   const x = rn(point[0], 2);
   const y = rn(point[1], 2);
-  const id = getNextId("marker");
+  const i = last(markers).i + 1;
 
-  const selected = markerSelectGroup.value;
-  const valid =
-    selected &&
-    d3
-      .select("#defs-markers")
-      .select("#" + selected)
-      .size();
-  const symbol = valid ? "#" + selected : "#marker0";
-  const added = markers.select("[data-id='" + symbol + "']").size();
-  let desired = valid && added ? markers.select("[data-id='" + symbol + "']").attr("data-size") : 1;
-  if (isNaN(desired)) desired = 1;
-  const size = desired * 5 + 25 / scale;
+  const isMarkerSelected = elSelected?.node()?.parentElement?.id === "markers";
+  const selectedMarker = isMarkerSelected ? markers.find(marker => marker.i === +elSelected.attr("id").slice(6)) : null;
+  const baseMarker = selectedMarker || {icon: "❓"};
+  const marker = {...baseMarker, i, x, y};
 
-  markers
-    .append("use")
-    .attr("id", id)
-    .attr("xlink:href", symbol)
-    .attr("data-id", symbol)
-    .attr("data-x", x)
-    .attr("data-y", y)
-    .attr("x", x - size / 2)
-    .attr("y", y - size)
-    .attr("data-size", desired)
-    .attr("width", size)
-    .attr("height", size);
+  markers.push(marker);
+  const markersElement = document.getElementById("markers");
+  const rescale = +markersElement.getAttribute("rescale");
+  markersElement.insertAdjacentHTML("beforeend", drawMarker(marker, rescale));
 
-  if (d3.event.shiftKey === false) unpressClickToAddButton();
+  if (d3.event.shiftKey === false) {
+    document.getElementById("markerAdd").classList.remove("pressed");
+    unpressClickToAddButton();
+  }
 }
 
 function viewCellDetails() {