diff --git a/application/assets/css/main.css b/application/assets/css/main.css
index 79a8cd93..9d927dc0 100644
--- a/application/assets/css/main.css
+++ b/application/assets/css/main.css
@@ -787,16 +787,12 @@ div#files-option {
   display: none;
 }
 
-div#files-option ul {
-  padding: 5px;
-  display: block;
-}
-
 div#files-option div {
   color: white;
   margin: 0 0 10px 0;
   padding: 5px;
   background: gray;
+  display: block;
 }
 
 div#files-option div:focus {
diff --git a/application/assets/js/module.js b/application/assets/js/module.js
index 23f20961..019e24f2 100644
--- a/application/assets/js/module.js
+++ b/application/assets/js/module.js
@@ -185,108 +185,96 @@ const module = (() => {
   //select marker
   ////////////////////
   // Flag to keep track of the need
-  // of generating the new marker lis
+  // of generating the new marker list
   var f_upd_markers_list = true;
   let set_f_upd_markers = function () {
     f_upd_markers_list = true;
   };
 
-  contained = []; //makers in map boundingbox
+  let markers_collection = []; //makers in map boundingbox
   let l = [];
   let index = -1;
   let select_marker = function () {
     if (f_upd_markers_list) {
       // Reset contained list
-      contained = [];
+      markers_collection = [];
 
       //merge markers in viewport
       if (overpass_group != "") {
         overpass_group.eachLayer(function (l) {
-          if (l instanceof L.Marker && map.getBounds().contains(l.getLatLng()))
-            contained.push(l);
+          markers_collection.push(l);
+          if (
+            l instanceof L.Marker &&
+            map.getBounds().contains(l.getLatLng())
+          ) {
+          }
+          //markers_collection.push(l);
         });
       }
 
       markers_group.eachLayer(function (l) {
-        if (l instanceof L.Marker && map.getBounds().contains(l.getLatLng()))
-          contained.push(l);
+        markers_collection.push(l);
+        if (l instanceof L.Marker && map.getBounds().contains(l.getLatLng())) {
+        }
+        // markers_collection.push(l);
       });
 
       // Clear flag
       f_upd_markers_list = false;
     }
 
-    l = contained;
+    //l = contained;
 
     status.marker_selection = true;
     status.windowOpen = "marker";
 
     index++;
 
-    if (index >= l.length) index = 0;
+    if (index >= markers_collection.length) index = 0;
     bottom_bar("cancel", "option", "");
 
     //reset icons and close popus
-    for (let t = 0; t < l.length; t++) {
-      let p = l[t].getIcon();
+    for (let t = 0; t < markers_collection.length; t++) {
+      let p = markers_collection[t].getIcon();
 
       if (
         p.options.className != "follow-marker" &&
         p.options.className != "goal-marker"
       ) {
-        //l[t].setIcon(maps.default_icon);
+        markers_collection[t].setIcon(maps.default_icon);
       }
-
-      setTimeout(function () {
-        l[index].closePopup();
-      }, 3000);
+      markers_collection[index].closePopup();
     }
-    let p = l[index].getIcon();
+
+    //show selected marker
+    let p = markers_collection[index].getIcon();
     if (
       p.options.className != "follow-marker" &&
       p.options.className != "goal-marker"
     ) {
-      //l[index].setIcon(maps.select_icon);
+      markers_collection[index].setIcon(maps.select_icon);
     }
 
     //popup
     document.querySelector("textarea#popup").value = "";
-    let pu = l[index].getPopup();
+    let pu = markers_collection[index].getPopup();
 
     if (pu != undefined && pu._content != undefined) {
       //get popup content
       document.querySelector("textarea#popup").value = pu._content;
       //show popup
-      l[index].bindPopup(pu._content, popup_option).openPopup();
+      markers_collection[index]
+        .bindPopup(pu._content, popup_option)
+        .openPopup();
       //close popup
       setTimeout(function () {
-        l[index].closePopup();
+        markers_collection[index].closePopup();
       }, 3000);
     }
 
-    //check if marker set as startup marker
-
-    for (let i = 0; i < mainmarker.startup_markers.length; i++) {
-      if (
-        l[index]._latlng.lng == mainmarker.startup_markers[i].latlng.lng &&
-        l[index]._latlng.lat == mainmarker.startup_markers[i].latlng.lat
-      ) {
-        mainmarker.startup_marker_toggle = true;
-        document.querySelector(
-          "div#markers-option div[data-action='set_startup_marker']"
-        ).innerText = "unset startup marker";
-        i = mainmarker.startup_markers.length;
-      } else {
-        document.querySelector(
-          "div#markers-option div[data-action='set_startup_marker']"
-        ).innerText = "set startup marker";
-        mainmarker.startup_marker_toggle = false;
-      }
-    }
-
-    map.setView(l[index]._latlng, map.getZoom());
+    map.setView(markers_collection[index]._latlng, map.getZoom());
 
-    return l[index];
+    return markers_collection[index];
   };
 
   //SELECT GPX
diff --git a/application/assets/js/route-service.js b/application/assets/js/route-service.js
new file mode 100644
index 00000000..ac72d716
--- /dev/null
+++ b/application/assets/js/route-service.js
@@ -0,0 +1,61 @@
+const rs = ((_) => {
+  let request = function (from, to, apikey, profile, callback) {
+    let xhr = new XMLHttpRequest({
+      mozSystem: true,
+      "Content-Type": "application/json",
+    });
+    xhr.open(
+      "GET",
+      "https://api.openrouteservice.org/v2/directions/" +
+        profile +
+        "?api_key=" +
+        apikey +
+        "&" +
+        "start=" +
+        from +
+        "&" +
+        "end=" +
+        to
+    );
+
+    xhr.timeout = 4000;
+
+    xhr.ontimeout = function (e) {};
+
+    xhr.onload = function () {
+      if (xhr.status == 200) {
+        callback(JSON.parse(xhr.responseText));
+      }
+      if (xhr.status == 403) {
+        console.log("access forbidden");
+      }
+      // analyze HTTP status of the response
+      if (xhr.status != 200) {
+        console.log(xhr.status);
+        helper.side_toaster("the route could not be loaded.", 2000);
+      }
+    };
+
+    xhr.onerror = function (err) {
+      console.log(err);
+    };
+    xhr.send(null);
+  };
+
+  let addPoint = function (type, action, latlng) {
+    if (action == "add") {
+      if (type == "start") {
+        routing.start = latlng.lng + "," + latlng.lat;
+      }
+
+      if (type == "end") {
+        routing.end = latlng.lng + "," + latlng.lat;
+      }
+    }
+  };
+
+  return {
+    request,
+    addPoint,
+  };
+})();
diff --git a/application/assets/js/settings.js b/application/assets/js/settings.js
index a6f61584..5ce55e28 100644
--- a/application/assets/js/settings.js
+++ b/application/assets/js/settings.js
@@ -6,6 +6,13 @@ const settings = ((_) => {
       document.getElementById("ipbase-key").value
     );
 
+    localStorage.setItem(
+      "routing_profil",
+      document.getElementById("routing-profil").value
+    );
+
+    localStorage.setItem("ors-key", document.getElementById("ors-key").value);
+
     localStorage.setItem(
       "cache-time",
       document.getElementById("cache-time").value
@@ -50,13 +57,55 @@ const settings = ((_) => {
   };
 
   let load_settings = function () {
-    document.getElementById("owm-key").value = setting.openweather_api;
-    document.getElementById("ipbase-key").value = setting.ipbase_api;
-
-    document.getElementById("cache-time").value = setting.cache_time;
-    document.getElementById("cache-zoom").value = setting.cache_zoom;
-    document.getElementById("export-path").value = setting.export_path;
-    document.getElementById("osm-tag").value = setting.osm_tag;
+    setting = {
+      export_path:
+        localStorage.getItem("export-path") != null
+          ? localStorage.getItem("export-path")
+          : "",
+      osm_tag: localStorage.getItem("osm-tag"),
+
+      cache_time: localStorage["cache-time"] || "10",
+      cache_zoom: localStorage["cache-zoom"] || "12",
+      openweather_api: localStorage.getItem("owm-key"),
+      ipbase_api: localStorage.getItem("ipbase-key"),
+      ors_api: localStorage.getItem("ors-key"),
+      routing_profil: localStorage.getItem("routing_profil")
+        ? localStorage.getItem("routing_profil")
+        : "foot-hiking",
+
+      useOnlyCache:
+        localStorage.getItem("useOnlyCache") != null
+          ? JSON.parse(localStorage.getItem("useOnlyCache"))
+          : true,
+
+      crosshair:
+        localStorage.getItem("crosshair") != null
+          ? JSON.parse(localStorage.getItem("crosshair"))
+          : true,
+      scale:
+        localStorage.getItem("scale") != null
+          ? JSON.parse(localStorage.getItem("scale"))
+          : true,
+      tracking_screenlock:
+        localStorage.getItem("tracking_screenlock") != null
+          ? JSON.parse(localStorage.getItem("tracking_screenlock"))
+          : true,
+
+      measurement:
+        localStorage.getItem("measurement") != null
+          ? JSON.parse(localStorage.getItem("measurement"))
+          : true,
+
+      wikipedia_view:
+        localStorage.getItem("wikipedia_view") != null
+          ? JSON.parse(localStorage.getItem("wikipedia_view"))
+          : true,
+
+      tips_view:
+        localStorage.getItem("tips_view") != null
+          ? JSON.parse(localStorage.getItem("tips_view"))
+          : true,
+    };
 
     setting.tracking_screenlock
       ? (document.getElementById("screenlock-ckb").checked = true)
@@ -95,12 +144,7 @@ const settings = ((_) => {
       : (general.measurement_unit = "mil");
 
     ///show / hidde scale
-
-    if (setting.scale) {
-      scale.addTo(map);
-    } else {
-      scale.remove();
-    }
+    setting.scale ? scale.addTo(map) : scale.remove();
 
     if (setting.measurement) {
       document.querySelector("label[for='measurement-ckb']").innerText =
@@ -109,6 +153,18 @@ const settings = ((_) => {
       document.querySelector("label[for='measurement-ckb']").innerText =
         "imperial";
     }
+
+    //set values in setting page
+
+    document.getElementById("owm-key").value = setting.openweather_api;
+    document.getElementById("ipbase-key").value = setting.ipbase_api;
+    document.getElementById("ors-key").value = setting.ors_api;
+    document.getElementById("routing-profil").value = setting.routing_profil;
+
+    document.getElementById("cache-time").value = setting.cache_time;
+    document.getElementById("cache-zoom").value = setting.cache_zoom;
+    document.getElementById("export-path").value = setting.export_path;
+    document.getElementById("osm-tag").value = setting.osm_tag;
   };
 
   let load_settings_from_file = function () {
diff --git a/application/index.html b/application/index.html
index 8423bc63..d51006d0 100644
--- a/application/index.html
+++ b/application/index.html
@@ -116,7 +116,7 @@
       </div>
     </div>
 
-    <div id="markers-option" class="width-100 height-100">
+    <div id="markers-option" class="width-100">
       <div class="item" data-action="save_marker" tabindex="0">save marker</div>
       <div class="item" data-action="set_target_marker" tabindex="1">
         set marker as target
@@ -124,8 +124,18 @@
       <div class="item" data-action="remove_marker" tabindex="2">
         remove marker
       </div>
-      <div class="item" data-action="set_startup_marker" tabindex="3">
-        set as startup marker
+
+      <h2>Routing</h2>
+      <div class="item" data-action="set_marker_route_start" tabindex="3">
+        set as start point
+      </div>
+
+      <div class="item" data-action="set_marker_route_end" tabindex="3">
+        set as end point
+      </div>
+
+      <div class="item" data-action="start-routing" tabindex="3">
+        start routing
       </div>
 
       <label for="popup">Popup</label>
@@ -136,18 +146,16 @@
     </div>
 
     <div id="files-option" class="width-100 height-100">
-      <div class="item" data-action="upload-file-to-osm" tabindex="0">
+      <div class="item" data-action="upload-file-to-osm">
         upload gpx file to osm
       </div>
-      <div class="item only-gpx-local" data-action="delete-file" tabindex="1">
+      <div class="item only-gpx-local" data-action="delete-file">
         delete file
       </div>
-      <div class="item only-gpx-local" data-action="rename-file" tabindex="2">
+      <div class="item only-gpx-local" data-action="rename-file">
         rename file
       </div>
-      <div class="item" data-action="download-file" tabindex="3">
-        download file
-      </div>
+      <div class="item" data-action="download-file">download file</div>
     </div>
 
     <!--
@@ -201,6 +209,21 @@ <h2>Openweathermap</h2>
           <input type="text" class="qr" id="owm-key" />
         </div>
 
+        <h2>Routing Service</h2>
+        <div class="item input-parent" tabindex="0">
+          <label for="ors-key">openrouteservice.org API-Key</label>
+          <input type="text" class="qr" id="ors-key" />
+        </div>
+
+        <div class="item input-parent" tabindex="0">
+          <label for="cars">Routing profile</label>
+          <select name="routing-profil" id="routing-profil">
+            <option value="cycling-road">cycling</option>
+            <option value="foot-hiking">hiking</option>
+            <option value="driving-car">car</option>
+          </select>
+        </div>
+
         <h2>IP Geolocation</h2>
         <div class="item input-parent" tabindex="0">
           <label for="ipbase-key">ipbase.com API-Key</label>
@@ -445,6 +468,22 @@ <h2>Export</h2>
         </section>
       </div>
 
+      <div class="panel" id="routing" name="Routing">
+        <section>
+          <strong><u>Distance</u></strong>
+          <div id="routing-distance"></div>
+        </section>
+        <section>
+          <strong><u>Evolution</u></strong>
+          <div id="routing-evo-up">⬆<span></span></div>
+          <div id="routing-evo-down">⬇<span></span></div>
+        </section>
+        <section>
+          <strong><u>Duration</u></strong>
+          <div id="routing-duration">duration <span></span></div>
+        </section>
+      </div>
+
       <div class="panel" id="weather" name="Weather">
         <section id="forecast-hourly">
           <strong><u>forecast coming hour</u></strong>
@@ -695,6 +734,7 @@ <h2>Thank You!</h2>
     <script defer src="assets/js/mustache.js"></script>
     <script defer src="assets/js/L.TileLayer.PouchDBCached.js"></script>
     <script defer src="assets/js/gpx.js"></script>
+    <script defer src="assets/js/route-service.js"></script>
 
     <script defer src="index.js"></script>
     <script defer src="assets/js/overpass.js"></script>
diff --git a/application/index.js b/application/index.js
index 02a866ec..3f164c97 100644
--- a/application/index.js
+++ b/application/index.js
@@ -12,6 +12,7 @@ let measure_group_path = new L.FeatureGroup();
 let measure_group = new L.FeatureGroup();
 let tracking_group = new L.FeatureGroup();
 let gpx_group = new L.FeatureGroup();
+let ors_group = new L.FeatureGroup();
 
 let tracking_timestamp = [];
 let myMarker;
@@ -19,6 +20,12 @@ let gpx_selection_info = {};
 let tilesLayer = "";
 const days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
 
+let routing = {
+  start: "",
+  end: "",
+  data: "",
+};
+
 let mainmarker = {
   target_marker: "",
   selected_marker: "",
@@ -45,51 +52,7 @@ let mainmarker = {
       : [0, 0],
 };
 
-let setting = {
-  export_path:
-    localStorage.getItem("export-path") != null
-      ? localStorage.getItem("export-path")
-      : "",
-  osm_tag: localStorage.getItem("osm-tag"),
-
-  cache_time: localStorage["cache-time"] || "10",
-  cache_zoom: localStorage["cache-zoom"] || "12",
-  openweather_api: localStorage.getItem("owm-key"),
-  ipbase_api: localStorage.getItem("ipbase-key"),
-
-  useOnlyCache:
-    localStorage.getItem("useOnlyCache") != null
-      ? JSON.parse(localStorage.getItem("useOnlyCache"))
-      : true,
-
-  crosshair:
-    localStorage.getItem("crosshair") != null
-      ? JSON.parse(localStorage.getItem("crosshair"))
-      : true,
-  scale:
-    localStorage.getItem("scale") != null
-      ? JSON.parse(localStorage.getItem("scale"))
-      : true,
-  tracking_screenlock:
-    localStorage.getItem("tracking_screenlock") != null
-      ? JSON.parse(localStorage.getItem("tracking_screenlock"))
-      : true,
-
-  measurement:
-    localStorage.getItem("measurement") != null
-      ? JSON.parse(localStorage.getItem("measurement"))
-      : true,
-
-  wikipedia_view:
-    localStorage.getItem("wikipedia_view") != null
-      ? JSON.parse(localStorage.getItem("wikipedia_view"))
-      : true,
-
-  tips_view:
-    localStorage.getItem("tips_view") != null
-      ? JSON.parse(localStorage.getItem("tips_view"))
-      : true,
-};
+let setting = {};
 
 let general = {
   osm_token:
@@ -145,6 +108,41 @@ map.on("load", function () {
 });
 
 document.addEventListener("DOMContentLoaded", function () {
+  var myLayer = L.geoJSON("", { color: "red" }).addTo(map);
+
+  let routing_service_callback = function (e) {
+    routing.data = e;
+    //clean layer
+    myLayer.clearLayers();
+    myLayer.addData(e);
+    //fly to start point
+    L.geoJSON(e, {
+      onEachFeature: function (feature, layer) {
+        if (feature.geometry != "") {
+          //fly to start
+          let p = feature.geometry.coordinates[0];
+          console.log("yeah" + feature.properties.summary.distance);
+          document.getElementById("routing-distance").innerText =
+            feature.properties.summary.distance;
+
+          document.getElementById("routing-duration").innerText =
+            feature.properties.summary.duration;
+
+          p.reverse();
+          map.flyTo(p);
+        }
+      },
+    });
+
+    //store data
+    routing.data = e;
+    helper.side_toaster(
+      "the track has been loaded, to see information about it open the menu with enter",
+      2000
+    );
+    console.log(routing);
+  };
+
   //load KaiOs ads or not
   let load_ads = function () {
     var js = document.createElement("script");
@@ -236,6 +234,7 @@ document.addEventListener("DOMContentLoaded", function () {
   map.addLayer(measure_group_path);
   map.addLayer(tracking_group);
   map.addLayer(gpx_group);
+  map.addLayer(ors_group);
 
   //build menu
   let build_menu = function () {
@@ -614,20 +613,24 @@ document.addEventListener("DOMContentLoaded", function () {
     osm_server_list_gpx();
     document.getElementById("osm-server-gpx-title").style.display = "block";
   }
-
+  //callback download file
   let callback_download = function (filename, filepath) {
     helper.side_toaster("downloaded successfully", 2000);
 
-    document.querySelector("div#gpx").nextSibling.innerHTML =
-      "<div class='item' data-map='gpx' data-filename='" +
-      filename +
-      "' data-filepath='" +
-      filepath +
-      "'>" +
-      filename +
-      "</div>";
+    document
+      .querySelector("div#gpx")
+      .nextSibling.insertAdjacentHTML(
+        "afterend",
+        "<div class='item' data-map='gpx' data-filename='" +
+          filename +
+          "' data-filepath='" +
+          filepath +
+          "'>" +
+          filename +
+          "</div>"
+      );
 
-    console.log(filename, filepath);
+    finder_tabindex();
   };
 
   /////openweather callback
@@ -990,7 +993,7 @@ document.addEventListener("DOMContentLoaded", function () {
       if (crd.speed != undefined || crd.speed != null) {
         mainmarker.device_speed = crd.speed;
 
-        if (setting.measurement_unit == "km") {
+        if (general.measurement_unit == "km") {
           let n = crd.speed * 3.6;
           n = n.toFixed(2);
 
@@ -999,7 +1002,7 @@ document.addEventListener("DOMContentLoaded", function () {
           ).innerText = n + " km/h";
         }
 
-        if (setting.measurement_unit == "mil") {
+        if (general.measurement_unit == "mil") {
           let n = crd.speed * 2.236936;
           n = n.toFixed(2);
 
@@ -1107,6 +1110,45 @@ document.addEventListener("DOMContentLoaded", function () {
         bottom_bar("", "", "");
       }
 
+      if (item_value == "set_marker_route_start") {
+        rs.addPoint("start", "add", mainmarker.selected_marker._latlng);
+        document.querySelector("div#markers-option").style.display = "none";
+
+        status.windowOpen = "map";
+        bottom_bar("", "", "");
+        setTimeout(function () {
+          if (routing.start != "" && routing.end != "") {
+            status.routing = true;
+            rs.request(
+              routing.start,
+              routing.end,
+              setting.ors_api,
+              setting.routing_profil,
+              routing_service_callback
+            );
+          }
+        }, 1000);
+      }
+      if (item_value == "set_marker_route_end") {
+        rs.addPoint("end", "add", mainmarker.selected_marker._latlng);
+        document.querySelector("div#markers-option").style.display = "none";
+
+        status.windowOpen = "map";
+        bottom_bar("", "", "");
+        setTimeout(function () {
+          if (routing.start != "" && routing.end != "") {
+            status.routing = true;
+            rs.request(
+              routing.start,
+              routing.end,
+              setting.ors_api,
+              setting.routing_profil,
+              routing_service_callback
+            );
+          }
+        }, 1000);
+      }
+
       if (item_value == "remove_marker") {
         map.removeLayer(mainmarker.selected_marker);
         mainmarker.selected_marker.removeFrom(markers_group);
@@ -1329,12 +1371,17 @@ document.addEventListener("DOMContentLoaded", function () {
     bottom_bar("", "select", "");
     tabIndex = 0;
 
+    document
+      .querySelectorAll("div#files-option div")
+      .forEach(function (e, index) {
+        e.style.display = "block";
+      });
+
     if (general.active_item.getAttribute("data-map") == "gpx") {
       document
         .querySelectorAll("div.only-gpx-local")
         .forEach(function (e, index) {
           e.style.display = "block";
-          e.tabIndex = index;
         });
     }
 
@@ -1343,7 +1390,6 @@ document.addEventListener("DOMContentLoaded", function () {
         .querySelectorAll("div.only-gpx-local")
         .forEach(function (e, index) {
           e.style.display = "block";
-          e.tabIndex = index;
         });
     }
 
@@ -1352,9 +1398,28 @@ document.addEventListener("DOMContentLoaded", function () {
         .querySelectorAll("div.only-gpx-local")
         .forEach(function (e, index) {
           e.style.display = "none";
-          e.tabIndex = index;
         });
     }
+
+    document.querySelectorAll("#files-option div").forEach(function (e) {
+      e.classList.add("item");
+    });
+
+    let p = 0;
+    document.querySelectorAll("#files-option div.item").forEach(function (e) {
+      e.classList.add("item");
+
+      if (e.style.display == "block") {
+        e.classList.add("item");
+        e.setAttribute("tabindex", p++);
+
+        console.log(e);
+      } else {
+        e.classList.remove("item");
+      }
+    });
+
+    document.querySelector("#files-option div.item[tabindex='0']").focus();
   };
 
   /////////////////////
@@ -1953,7 +2018,7 @@ document.addEventListener("DOMContentLoaded", function () {
         }
 
         if (document.activeElement.classList.contains("input-parent")) {
-          document.activeElement.children[0].focus();
+          document.activeElement.children[1].focus();
           if (document.activeElement.type == "checkbox") {
             settings.save_chk(
               document.activeElement.id,
diff --git a/build/application.zip b/build/application.zip
index f746fcf8..6c7710e9 100644
Binary files a/build/application.zip and b/build/application.zip differ
diff --git a/build/o.map-omnisd.zip b/build/o.map-omnisd.zip
index eb90f0ce..3b225cd8 100644
Binary files a/build/o.map-omnisd.zip and b/build/o.map-omnisd.zip differ
diff --git a/build/o.map.zip b/build/o.map.zip
index f746fcf8..9312dcfa 100644
Binary files a/build/o.map.zip and b/build/o.map.zip differ