diff --git a/src/main/webapp/lib.js b/src/main/webapp/lib.js
index 06662fd..97afd94 100644
--- a/src/main/webapp/lib.js
+++ b/src/main/webapp/lib.js
@@ -1,7 +1,11 @@
 const lib = new function () {
 
     let ghbase = ""
-    let planningMode = "classic";
+    let planningMode = "modern";
+    const modeContext = {
+        "classic": '<button id="btn-feat">feature</button></br><button id="btn-start">start</button></br><button id="btn-via">via</button></br><button id="btn-finish">finish</button>',
+        "modern": '<button id="btn-feat">feature</button></br><button id="btn-waypoint">waypoint</button>' 
+    };
 
     /**
      * Initialize Map etc
@@ -48,49 +52,72 @@ const lib = new function () {
 
         const contextmenu = new maplibregl.Popup()
           .setLngLat(coordinates)
-          .setHTML('<button id="btn-feat">feature</button></br><button id="btn-start">start</button></br><button id="btn-via">via</button></br><button id="btn-finish">finish</button>')
+          .setHTML(modeContext[planningMode])
           .addTo(map);
 
-        let featbtn = document.getElementById("btn-feat");
-        featbtn.onclick = function () {
-            contextmenu.remove();
-            const features = map.queryRenderedFeatures(e.point);
-            const prop = features.map(function (feat) {
-                return feat["properties"];
-            });
-            const featPopup = new maplibregl.Popup()
-                .setLngLat(coordinates)
-                .setHTML(JSON.stringify(prop))
-                .addTo(map);
-        };
-        let startbtn = document.getElementById("btn-start");
-        startbtn.onclick = function () {
-            contextmenu.remove();
-            startMarker.setLngLat([coordinates.lng, coordinates.lat]).addTo(map);
-            startMarker.onMap = true;
-            if (finishMarker.onMap) {
-                lib.doRouting(map, coordinates, finishMarker.getLngLat(), viaMarkers);
-            }
-        };
-        let finishbtn = document.getElementById("btn-finish");
-        finishbtn.onclick = function () {
-            contextmenu.remove();
-            finishMarker.setLngLat([coordinates.lng, coordinates.lat]).addTo(map);
-            finishMarker.onMap = true;
-            if (startMarker.onMap) {
-                lib.doRouting(map, startMarker.getLngLat(), coordinates, viaMarkers);
-            }
-        };
-        let viabtn = document.getElementById("btn-via");
-        viabtn.onclick = function () {
-            contextmenu.remove();
-            const marker = new maplibregl.Marker({color: "#0000FF", draggable: true}).setLngLat([coordinates.lng, coordinates.lat]);
-            marker.on("dragend", function() {lib.doRouting(map, startMarker.getLngLat(), finishMarker.getLngLat(), viaMarkers);});
-            marker.addTo(map);
-            marker.onMap = true;
-            viaMarkers.push(marker);
-            if (startMarker.onMap && finishMarker.onMap) {
-                lib.doRouting(map, startMarker.getLngLat(), finishMarker.getLngLat(), viaMarkers);
+        if (planningMode === 'classic') {
+            let featbtn = document.getElementById("btn-feat");
+            featbtn.onclick = function () {
+                contextmenu.remove();
+                const features = map.queryRenderedFeatures(e.point);
+                const prop = features.map(function (feat) {
+                    return feat["properties"];
+                });
+                const featPopup = new maplibregl.Popup()
+                    .setLngLat(coordinates)
+                    .setHTML(JSON.stringify(prop))
+                    .addTo(map);
+            };
+            let startbtn = document.getElementById("btn-start");
+            startbtn.onclick = function () {
+                contextmenu.remove();
+                startMarker.setLngLat([coordinates.lng, coordinates.lat]).addTo(map);
+                startMarker.onMap = true;
+                if (finishMarker.onMap) {
+                    lib.doRouting(map, coordinates, finishMarker.getLngLat(), viaMarkers);
+                }
+            };
+            let finishbtn = document.getElementById("btn-finish");
+            finishbtn.onclick = function () {
+                contextmenu.remove();
+                finishMarker.setLngLat([coordinates.lng, coordinates.lat]).addTo(map);
+                finishMarker.onMap = true;
+                if (startMarker.onMap) {
+                    lib.doRouting(map, startMarker.getLngLat(), coordinates, viaMarkers);
+                }
+            };
+            let viabtn = document.getElementById("btn-via");
+            viabtn.onclick = function () {
+                contextmenu.remove();
+                const marker = new maplibregl.Marker({color: "#0000FF", draggable: true}).setLngLat([coordinates.lng, coordinates.lat]);
+                marker.on("dragend", function() {lib.doRouting(map, startMarker.getLngLat(), finishMarker.getLngLat(), viaMarkers);});
+                marker.addTo(map);
+                marker.onMap = true;
+                viaMarkers.push(marker);
+                if (startMarker.onMap && finishMarker.onMap) {
+                    lib.doRouting(map, startMarker.getLngLat(), finishMarker.getLngLat(), viaMarkers);
+                }
+            };
+        } else if (planningMode === 'modern') {
+            let waypointbtn = document.getElementById("btn-waypoint");
+            waypointbtn.onclick = function () {
+                contextmenu.remove();
+                if (!startMarker.onMap) {
+                    startMarker.setLngLat([coordinates.lng, coordinates.lat]).addTo(map);
+                    startMarker.onMap = true;
+                } else if (!finishMarker.onMap) {
+                    finishMarker.setLngLat([coordinates.lng, coordinates.lat]).addTo(map);
+                    finishMarker.onMap = true;
+                    lib.doRouting(map, startMarker.getLngLat(), coordinates);
+                } else {
+                    const oldFinishMarker = new maplibregl.Marker({color: "#0000FF", draggable: true}).setLngLat(finishMarker.getLngLat());
+                    finishMarker.setLngLat([coordinates.lng, coordinates.lat]);
+                    oldFinishMarker.on("dragend", function() {lib.doRouting(map, startMarker.getLngLat(), finishMarker.getLngLat(), viaMarkers);});
+                    oldFinishMarker.addTo(map);
+                    oldFinishMarker.onMap = true;
+                    viaMarkers.push(oldFinishMarker);
+                    lib.doRouting(map, startMarker.getLngLat(), finishMarker.getLngLat(), viaMarkers);
+                }
             }
         };
       });