diff --git a/frontend/common/map.js b/frontend/common/map.js
new file mode 100644
index 0000000..f065954
--- /dev/null
+++ b/frontend/common/map.js
@@ -0,0 +1,154 @@
+
+const rules = new Array;
+const l = new Array;
+var legend = L.control({position: 'bottomleft'});
+legend.onAdd = function (map) {
+		var div = L.DomUtil.create('div', 'legend');
+		for (var i = 0; i < l.length; i++) {
+			  div.innerHTML += '<span class="dot" style="background: ' + l[i]["color"] + '" ></span>' + l[i]["name"] + "<br>";
+		}
+		return div;
+};
+
+
+const map = L.map("map", {  center: [52,13], zoom: 3, minZoom: 0 });
+
+function update_hash() {
+		const {lat, lng} = this.getCenter();
+		const zoom = this.getZoom();
+		const digits = 4;
+		window.history.replaceState(null, '', `#map=${zoom}/${lat.toFixed(digits)}/${lng.toFixed(digits)}`);
+}
+
+function onHashChange() {
+		const hash = document.location.hash;
+		const coords = decodeURIComponent(hash.slice(5)).split("/") // strip off the #map= part
+		const latLng = L.latLng(parseFloat(coords[1]), parseFloat(coords[2]));
+		map.setView(latLng, parseInt(coords[0]));
+}
+
+map.on("moveend", update_hash);
+map.on("zoomend", update_hash);
+
+fetch("layers.json")
+		.then((response) => response.json())
+		.then((data) => {
+				document.title = data["name"]
+				layers = data["layers"]
+				for (let key in layers) {
+						l.push({ name: layers[key]["humanname"], color: layers[key]["color"] });
+						rules.push({
+								dataLayer: key,
+								symbolizer: new protomapsL.LineSymbolizer(layers[key])
+						});
+				}
+				const tiles = data["tilelayer"]
+				var osm = L.tileLayer(
+						tiles["url_template"],
+						{
+								maxZoom: 19,
+								attribution: tiles["attribution"]
+						}
+				);
+				var strecken = protomapsL.leafletLayer({
+						url: "strecken.pmtiles",
+						maxDataZoom: data["maxZoom"] ?? 10,
+						maxZoom: 19,
+						paintRules: rules,	
+				});
+
+				osm.addTo(map);
+				legend.addTo(map);
+				strecken.addTo(map);
+		})
+
+let dirHandle;
+let editMode = false;
+let markers = [];
+let geojsons = [];
+let geojson;
+
+async function updateBrouter () {
+		if (markers.length < 1) {
+				return;
+		}
+		geojsons = [];
+		for (let i = 0; i < markers.length - 1 ; i++) {
+				const marker1 = markers[i].getLatLng();
+				const marker2 = markers[i+1].getLatLng();
+				const url = `https://brouter.de/brouter?lonlats=${marker1.lng},${marker1.lat}|${marker2.lng},${marker2.lat}&profile=rail&alternativeidx=0&format=geojson`;
+				fetch(url).then((response) => response.json())
+						.then((data) => {
+								if (geojson != undefined) {
+										map.removeLayer(geojson);
+								}
+								geojsons.push(data.features[0]);
+								const dat = {type: "FeatureCollection", features: geojsons};
+								geojson = L.geoJSON(dat);
+								geojson.addTo(map);
+						})
+		}
+}
+
+map.on('click', function(e) {
+		// if (!editMode) {
+		// 		return;
+		// }
+		marker = new L.marker(e.latlng, {draggable: true}) ;
+		markers.push(marker);
+		updateBrouter();
+		marker.on("click", function(e) {
+				map.removeLayer(this);
+				markers = markers.filter(item => item != this);
+				updateBrouter();
+				console.log(markers);
+		})
+		marker.addTo(map);
+});
+
+
+async function pickDirectory(){
+		if (!editMode) {
+				dirHandle = await window.showDirectoryPicker();
+				document.getElementById("edit-mode").style.color = "red";
+				document.getElementById("edit-mode").innerHTML = "save";
+				editMode = true;
+		} else {
+				const filename = window.prompt("Enter filename:", "test");
+				const dat = {type: "FeatureCollection", features: geojsons};
+				const file = await dirHandle.getFileHandle(`${filename}.geojson`, {
+						create: true
+				});
+				const blob = new Blob([JSON.stringify(dat)]);
+				const writableStream = await file.createWritable();
+				await writableStream.write(blob);
+				await writableStream.close();
+				alert("Saved file!");
+		}
+}
+
+const customButton = L.control({ position: 'topright' });
+customButton.onAdd = () => {
+    const buttonDiv = L.DomUtil.create('div', 'button-wrapper');
+
+    buttonDiv.innerHTML = `<button id="edit-mode" >Edit</button>`;
+    buttonDiv.addEventListener('click', () => pickDirectory())
+    return buttonDiv;
+};
+customButton.addTo(map)
+
+
+
+function resize() {
+	document.getElementById("map").style.height = window.innerHeight + 'px';
+}
+resize();
+window.addEventListener('resize', () => {
+	resize();
+});
+
+window.addEventListener("hashchange", onHashChange);
+onHashChange();
+
+
+
diff --git a/frontend/styles.css b/frontend/common/styles.css
similarity index 100%
rename from frontend/styles.css
rename to frontend/common/styles.css
diff --git a/frontend/map.js b/frontend/map.js
deleted file mode 100644
index 413d285..0000000
--- a/frontend/map.js
+++ /dev/null
@@ -1,75 +0,0 @@
-
-const rules = new Array;
-const l = new Array;
-var legend = L.control({position: 'bottomleft'});
-legend.onAdd = function (map) {
-		var div = L.DomUtil.create('div', 'legend');
-		for (var i = 0; i < l.length; i++) {
-			  div.innerHTML += '<span class="dot" style="background: ' + l[i]["color"] + '" ></span>' + l[i]["name"] + "<br>";
-		}
-		return div;
-};
-
-
-const map = L.map("map", {  center: [52,13], zoom: 3, minZoom: 0 });
-
-function update_hash() {
-		const {lat, lng} = this.getCenter();
-		const zoom = this.getZoom();
-		const digits = 4;
-		window.history.replaceState(null, '', `#map=${zoom}/${lat.toFixed(digits)}/${lng.toFixed(digits)}`);
-}
-
-function onHashChange() {
-		const hash = document.location.hash;
-		const coords = decodeURIComponent(hash.slice(5)).split("/") // strip off the #map= part
-		const latLng = L.latLng(parseFloat(coords[1]), parseFloat(coords[2]));
-		map.setView(latLng, parseInt(coords[0]));
-}
-
-map.on("moveend", update_hash);
-map.on("zoomend", update_hash);
-
-fetch("layers.json")
-		.then((response) => response.json())
-		.then((data) => {
-				document.title = data["name"]
-				layers = data["layers"]
-				for (let key in layers) {
-						l.push({ name: layers[key]["humanname"], color: layers[key]["color"] });
-						rules.push({
-								dataLayer: key,
-								symbolizer: new protomapsL.LineSymbolizer(layers[key])
-						});
-				}
-				const tiles = data["tilelayer"]
-				var osm = L.tileLayer(
-						tiles["url_template"],
-						{
-								maxZoom: 19,
-								attribution: tiles["attribution"]
-						}
-				);
-				var strecken = protomapsL.leafletLayer({
-						url: "strecken.pmtiles",
-						maxDataZoom: data["maxZoom"] ?? 10,
-						maxZoom: 19,
-						paintRules: rules,	
-				});
-
-				osm.addTo(map);
-				legend.addTo(map);
-				strecken.addTo(map);
-		})
-
-function resize() {
-	document.getElementById("map").style.height = window.innerHeight + 'px';
-}
-resize();
-window.addEventListener('resize', () => {
-	resize();
-});
-
-window.addEventListener("hashchange", onHashChange);
-onHashChange();
-