diff --git a/css/stylesheet.css b/css/stylesheet.css
index c76f41f..bc5d372 100644
--- a/css/stylesheet.css
+++ b/css/stylesheet.css
@@ -16,21 +16,43 @@
     color: black;
     font-size: 18px;
     line-height: 130%;
+    /* sidebar */
+    display: flex;
 }
 
+/* div to clear float style */
+.clear {
+    clear: both;
+}
 
 @media (min-width: 768px) {
     html {
         font-size: 100%;
         max-width: 100em;
     }
+    #map {
+        min-width: 640px;
+        min-height: 840px;
+    }
+
+    .dbutton {
+        padding: 12px 50px;
+    }
 }
 
-@media(max-width:720px) {
+@media(max-width:768px) {
     html {
         font-size: 100%;
         max-width: 48em;
     }
+    body {
+        display: inline-block;
+    }
+    #map {
+        min-width: 480px;
+        min-height: 640px;
+       
+    }
 }
 
 h1 {
@@ -45,7 +67,7 @@
 }
 #map {
     width: 100%;
-    height: 80%;
+    height: 120%;
     margin: auto;
 }
 /* TOOLTIP formatting */
@@ -107,8 +129,8 @@
 .tracks {
     display: inline-block;
     text-align: center;
-    width: 60%;
-    margin-left: 20%;
+    /* width: 60%; */
+    /* margin-left: 20%; */
     list-style: none;
 }
 .tracks .track a {
@@ -125,6 +147,109 @@
 }
 .tracks .track date {
     vertical-align: middle;
-    padding-right: 2rem;
+    padding-right: 1rem;
     color: grey;
 }
+
+.tracks .track span {
+    text-align: left;
+}
+
+.tracks p {
+    font-size: 14px;
+}
+
+/* sidebar */
+.sidebar {
+    height: 100%;
+    width: 30%;
+    padding: 0.5em;
+    
+    nav .tracks {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        
+        li {
+            padding: 0;
+            margin: 0;
+        }
+    }
+}
+
+/* side/bottom track text */
+.bottomtext {
+    width: 30%;
+    padding: 1em;
+    background-color: #F6F1EC;
+    vertical-align: middle;
+    padding-right: 1rem;
+    color: grey;
+
+    a {
+        margin: 2em;
+        text-decoration: none;
+        text-align: left;
+        text-color: black;
+    }
+
+    a:hover,
+    a:focus,
+    a:active {
+        text-decoration: none;
+        background: #f9e197;
+    }
+}
+
+/* download button */
+.dbutton {
+  appearance: button;
+  background-color: purple;
+  background-image: none;
+  border: 1px solid #000;
+  border-radius: 4px;
+  box-shadow: #fff 4px 4px 0 0,#000 4px 4px 0 1px;
+  box-sizing: border-box;
+  color: #F6F1EC;
+  cursor: pointer;
+  display: inline-block;
+  font-family: ITCAvantGardeStd-Bk,Arial,sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  margin: 0 5px 10px 0;
+  overflow: visible;
+  padding: 12px 40px;
+  text-align: center;
+  text-transform: none;
+  touch-action: manipulation;
+  user-select: none;
+  -webkit-user-select: none;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+.dbutton:focus {
+  text-decoration: none;
+}
+
+.dbutton:hover {
+  text-decoration: none;
+}
+
+.dbutton:active {
+  box-shadow: rgba(0, 0, 0, .125) 0 3px 5px inset;
+  outline: 0;
+}
+
+.dbutton:not([disabled]):active {
+  box-shadow: #fff 2px 2px 0 0, #000 2px 2px 0 1px;
+  transform: translate(2px, 2px);
+}
+
+@media (min-width: 768px) {
+}
+
+.cbutton {
+    background-color: red;
+}
diff --git a/index.html b/index.html
index 3e9ae31..3e7f8fe 100644
--- a/index.html
+++ b/index.html
@@ -8,23 +8,24 @@
   <body>
     <title>GPX track viewer</title>
 
-    <h1>________/^v^\________</h1>
-    <h1>........: GpX :........</h1><p></p>
+    <!-- sidebar for tracks-->
+    <aside class="sidebar" id="sidebar">
+      <nav>
+        <ul class="tracks" id="tracklist">
+          <li>
+            <h3>........: GpX :........</h3>
+          </li>
+          <li>
+            <p>Click on a track to focus it on the map. Click track on map to download. Details of the track will be shown aside.</p>
+            </li>
+        </ul>
+      </nav>
+    </aside>
 
     <div id="map"></div>
+    <div class="clear"></div>
 
-    <ul class="tracks" id="tracklist">
-    </ul>
-
-    <p></p>
-    <h1>
-    <pre>
----------- __o       __o       __o       __o
--------- _`\<,_    _`\<,_    _`\<,_    _`\<,_
-------- (*)/ (*)  (*)/ (*)  (*)/ (*)  (*)/ (*)
-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-    </pre>
-    </h1>
+    <div class="bottomtext" id="bottomtext"></div>
     <script src="/js/gpx.js"></script>
   </body>
 </html>
diff --git a/js/gpx.js b/js/gpx.js
index c232496..43359df 100644
--- a/js/gpx.js
+++ b/js/gpx.js
@@ -45,10 +45,43 @@
         const date = track.date
         const text = track.name
         const bounds = track.bounds
-        var t = document.createElement('li')
+        var t = document.createElement('section')
         t.className = 'track'
         t.innerHTML = `<a><date>${date.toISOString().split('T')[0]}</date><span>${text}</span></a>`
-        t.onclick = function() { map.fitBounds(bounds) }
+
+        /* create side information */
+        t.onclick = function() {
+            map.fitBounds(bounds)
+            var bt = document.getElementById('bottomtext')
+
+            /* download button */
+            const button = document.createElement('button')
+            button.onclick = function() { download(track.filename) }
+            button.className = "dbutton"
+            button.innerHTML = `Download GPX`
+            button.role = "button"
+
+            /* close button */
+            const cb = document.createElement('button')
+            cb.onclick = function() { this.parentNode.parentNode.removeChild(this.parentNode); } // TODO find a way to open this again
+            cb.className = "dbutton cbutton"
+            cb.innerHTML = `Close`
+            cb.role = "button"
+
+            const txt = document.createElement('span')
+            txt.innerHTML = `
+<h3>${track.name}</h3>
+<b>Distance: ${track.kms.toFixed(2)} km</b><br>
+<b>Elevation gain: ${track.elevation.toFixed()} m d+</b><br><br>
+Total time: ${track.totalAvgTime} h<br>
+Moving time: ${track.movingTime} h<br>
+Avg speed: ${track.totalAvgSpeed.toFixed(2)} km/h<br>
+Avg moving speed: ${track.movingSpeed.toFixed(2)} km/h <br><br>`
+
+            bt.replaceChildren(txt)
+            bt.appendChild(button)
+            bt.appendChild(cb)
+        }
         tracklist.appendChild(t)
     })
 }
@@ -73,7 +106,14 @@
         const track = {
             date: e.target.get_start_time(),
             name: e.target.get_name(),
-            bounds: e.target.getBounds()
+            bounds: e.target.getBounds(),
+            filename: gpx,
+            kms: e.target.get_distance() / 1000,
+            elevation: e.target.get_elevation_gain(),
+            movingTime: e.target.get_duration_string_iso(e.target.get_moving_time(), true),
+            movingSpeed: e.target.get_moving_speed(),
+            totalAvgTime: e.target.get_duration_string_iso(e.target.get_total_time(), true),
+            totalAvgSpeed: e.target.get_total_speed()
         }
         sortedAppend(track)
         // fit map to track bounds on loading
@@ -99,7 +139,7 @@
         Avg speed: ${totalAvgSpeed.toFixed(2)} km/h<br>
         Avg moving speed: ${movingSpeed.toFixed(2)} km/h <br>
     </div>
-    <div style="clear:both"></div>
+    <div class="clear"></div>
     <h4>Click to download: ${filename}</h4>
 </div>`
         this.bindTooltip(tooltip, {sticky: true})