diff --git a/isochrone/index.html b/isochrone/index.html
index 9332f5a..1bd5586 100644
--- a/isochrone/index.html
+++ b/isochrone/index.html
@@ -5,8 +5,6 @@
   <title>Isochrones</title>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
-  <script src="https://unpkg.com/turf/turf.js"></script>
   <link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet">
   <link href="styles.css" rel="stylesheet">
 </head>
@@ -14,8 +12,8 @@
 <body>
   <div class="container">
     <div id="sidebar">
-      <div>
-        <img src="../routing/images/Valhalla.png" height="175" width="175" alt="Valhalla Logo">
+      <div id="sidebar-logo">
+        <img src="../routing/images/Valhalla.png" height="120" width="120" alt="Valhalla Logo">
       </div>
       <form>
         <label for="baseurl">Base URL</label>
@@ -28,16 +26,20 @@
         <input type="text" id="latlng" size="20" />
 
         <label for="denoise">Denoise</label>
-        <input id="denoise" type="range" min="0" max="1" value="0" step="0.01"
-          onchange="document.getElementById('denoise_text').value=this.value;" />
-        <input type="text" id="denoise_text" value="0" maxlength="4" size="4"
-          onchange="this.value = Math.max(0, Math.min(this.value, 1)); document.getElementById('denoise').value=this.value;" />
+        <div class="inline-controls">
+          <input id="denoise" type="range" min="0" max="1" value="0" step="0.01"
+            onchange="document.getElementById('denoise_text').value=this.value;" />
+          <input type="text" id="denoise_text" value="0" maxlength="4" size="4"
+            onchange="this.value = Math.max(0, Math.min(this.value, 1)); document.getElementById('denoise').value=this.value;" />
+        </div>
 
         <label for="generalize">Generalize</label>
-        <input id="generalize" type="range" min="0" max="1000" value="0" step="1"
-          onchange="document.getElementById('generalize_text').value=this.value;" />
-        <input type="text" id="generalize_text" value="0" maxlength="4" size="4"
-          onchange="this.value = Math.max(0, Math.min(this.value, 1000)); document.getElementById('generalize').value=this.value;" />
+        <div class="inline-controls">
+          <input id="generalize" type="range" min="0" max="1000" value="0" step="1"
+            onchange="document.getElementById('generalize_text').value=this.value;" />
+          <input type="text" id="generalize_text" value="0" maxlength="4" size="4"
+            onchange="this.value = Math.max(0, Math.min(this.value, 1000)); document.getElementById('generalize').value=this.value;" />
+        </div>
 
         <label for="contours">Contour minutes</label>
         <select id="contours">
@@ -64,10 +66,15 @@ <h5><b><a target="_blank" href='https://valhalla.github.io/valhalla/api/isochron
             reference</a></b></h5>
     </div>
     <div id="map-container">
+      <div id="map-logo">
+        <img src="../routing/images/Valhalla.png" height="120" width="120" alt="Valhalla Logo">
+      </div>
       <div id="map"></div>
     </div>
   </div>
 
+  <script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
+  <script src="https://unpkg.com/turf/turf.js"></script>
   <script src="main.js"></script>
 </body>
 
diff --git a/isochrone/main.js b/isochrone/main.js
index 832907d..06e5809 100644
--- a/isochrone/main.js
+++ b/isochrone/main.js
@@ -59,7 +59,7 @@ function getContours () {
     polygons: document.getElementById('polygons_lines').value === 'polygons'
   }
 
-  const url = document.getElementById('baseurl').value + '/isochrone?json=' + JSON.stringify(json)
+  const url = document.getElementById('baseurl').value + 'isochrone?json=' + JSON.stringify(json)
 
   fetch(url).then(response => response.json()).then(isochrones => {
     // clear this if its not empty
diff --git a/isochrone/styles.css b/isochrone/styles.css
index 10c91a1..2e00456 100644
--- a/isochrone/styles.css
+++ b/isochrone/styles.css
@@ -1,6 +1,7 @@
 body {
   width: 100%;
   height: 100vh;
+  min-height: 100dvh;
   padding: 0;
   margin: 0;
   font-family: sans-serif;
@@ -14,8 +15,9 @@ body {
 }
 
 #map-container {
+  position: relative;
   height: 100%;
-  width: 75%;
+  flex: 1;
 }
 
 #map {
@@ -25,9 +27,29 @@ body {
 
 #sidebar {
   height: 100%;
-  flex-grow: 1;
+  width: 25%;
+  max-width: 360px;
   padding: 10px;
   text-align: center;
+  overflow-y: auto;
+  box-sizing: border-box;
+}
+
+#sidebar-logo {
+  margin: 0 auto 10px;
+  width: fit-content;
+}
+
+#sidebar-logo img {
+  display: block;
+}
+
+#map-logo {
+  display: none;
+}
+
+#map-logo img {
+  display: block;
 }
 
 form {
@@ -37,5 +59,81 @@ form {
 
 label {
   display: block;
-  margin-top: 10px;
+  margin: 15px 0 5px;
+}
+
+form input,
+form select {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.inline-controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.inline-controls input[type="range"] {
+  flex: 1 1 auto;
+}
+
+.inline-controls input[type="text"] {
+  width: 64px;
+  flex: 0 0 64px;
+}
+
+@media (max-width: 768px) {
+  .container {
+    display: flex;
+    flex-direction: column-reverse;
+    height: 100%;
+  }
+
+  #map-container {
+    position: relative;
+    width: 100%;
+    height: 55%;
+  }
+
+  #sidebar {
+    position: relative;
+    width: 100%;
+    max-width: none;
+    height: 45%;
+    max-height: none;
+    background: rgba(255, 255, 255, 0.95);
+    border-radius: 14px 14px 0 0;
+    box-shadow: none;
+    padding: 12px;
+    overflow-y: auto;
+  }
+
+  #sidebar-logo {
+    display: none;
+  }
+
+  #map-logo {
+    display: block;
+    position: absolute;
+    z-index: 20;
+    line-height: 0;
+  }
+
+  #map-logo img {
+    width: 84px;
+    height: 84px;
+  }
+
+  form {
+    display: grid;
+    grid-template-columns: minmax(120px, auto) 1fr;
+    align-items: center;
+    gap: 10px;
+  }
+
+  label {
+    margin: 0 0 5px 0;
+  }
+
 }
\ No newline at end of file
