diff --git a/css/stylesheet.css b/css/stylesheet.css
index 9363756..c76f41f 100644
--- a/css/stylesheet.css
+++ b/css/stylesheet.css
@@ -1,7 +1,38 @@
 html {
     font-family:sans-serif;
-    color: white
+    color:#080808;
+    overflow-y: scroll;
+    height: 100%;
+    font: 100%/1.5 sans-serif;
+    word-wrap: break-word;
+    margin: 1 auto;
+    padding: 1.5em;
 }
+
+body {
+    background-color: #F6F1EC;
+    margin:1 auto;
+    padding:1.5rem;
+    color: black;
+    font-size: 18px;
+    line-height: 130%;
+}
+
+
+@media (min-width: 768px) {
+    html {
+        font-size: 100%;
+        max-width: 100em;
+    }
+}
+
+@media(max-width:720px) {
+    html {
+        font-size: 100%;
+        max-width: 48em;
+    }
+}
+
 h1 {
     text-align: center;
     margin: auto;
@@ -13,14 +44,10 @@
     color: purple;
 }
 #map {
-    width: 1280px;
-    height: 720px;
+    width: 100%;
+    height: 80%;
     margin: auto;
 }
-body {
-    background-color: #F6F1EC;
-}
-
 /* TOOLTIP formatting */
 .maptooltip {
     font-size: 14px;
@@ -61,7 +88,6 @@
     margin-bottom: 0px;
 }
 
-
 /* override default leaflet formatting */
 .leaflet-tooltip {
     background-color: transparent;
@@ -76,3 +102,29 @@
 .leaflet-tooltip-right:before {
     border: none !important;
 }
+
+/* track list */
+.tracks {
+    display: inline-block;
+    text-align: center;
+    width: 60%;
+    margin-left: 20%;
+    list-style: none;
+}
+.tracks .track a {
+    display: flex;
+    padding: 1em;
+    color: black;
+    cursor: pointer;
+}
+.tracks .track a:hover,
+.tracks .track a:focus,
+.tracks .track a:active {
+    text-decoration: none;
+    background: #f9e197;
+}
+.tracks .track date {
+    vertical-align: middle;
+    padding-right: 2rem;
+    color: grey;
+}
diff --git a/index.html b/index.html
index 7fd0160..3e9ae31 100644
--- a/index.html
+++ b/index.html
@@ -12,7 +12,9 @@
     <h1>........: GpX :........</h1><p></p>
 
     <div id="map"></div>
-    <script src="/js/gpx.js"></script>
+
+    <ul class="tracks" id="tracklist">
+    </ul>
 
     <p></p>
     <h1>
@@ -23,5 +25,6 @@
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
     </pre>
     </h1>
+    <script src="/js/gpx.js"></script>
   </body>
 </html>
diff --git a/js/gpx.js b/js/gpx.js
index fdfff44..c232496 100644
--- a/js/gpx.js
+++ b/js/gpx.js
@@ -2,11 +2,15 @@
  * see leaflet-gpx https://github.com/mpetazzoni/leaflet-gpx for the underlying leaflet plugin
  */
 
-var map = L.map('map');
+// keep track of how many tracks we've added
+var trackCount = 0
+var trackArray = []
+
+var map = L.map('map')
 
 L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-    attribution: 'Map data &copy; <a href="http://www.osm.org">OpenStreetMap</a>'
-}).addTo(map);
+    attribution: 'Map data &copy <a href="http://www.osm.org">OpenStreetMap</a>'
+}).addTo(map)
 
 function download(url) {
     const a = document.createElement('a')
@@ -17,6 +21,38 @@
     document.body.removeChild(a)
 }
 
+function sortedAppend(t) {
+    // splice might fail "not a function" otherwise
+    if(trackArray.length == 0) {
+        trackArray.push(t)
+        return
+    }
+    // find idx to splice
+    var idx = 0
+    for(const track of trackArray) {
+        if(t.date > track.date) {
+            break
+        }
+        idx++
+    }
+    trackArray.splice(idx, 0, t)
+    trackCount++
+}
+
+function createTrackList(arr) {
+    var tracklist = document.getElementById('tracklist')
+    arr.forEach((track, idx, array) => {
+        const date = track.date
+        const text = track.name
+        const bounds = track.bounds
+        var t = document.createElement('li')
+        t.className = 'track'
+        t.innerHTML = `<a><date>${date.toISOString().split('T')[0]}</date><span>${text}</span></a>`
+        t.onclick = function() { map.fitBounds(bounds) }
+        tracklist.appendChild(t)
+    })
+}
+
 function addGPX(map, gpx, lineColor) {
     new L.GPX(gpx, {
         async: true,
@@ -33,15 +69,23 @@
             lineCap: 'round'
         }
     }).on('loaded', function(e) {
-        map.fitBounds(e.target.getBounds());
+        // add track to list
+        const track = {
+            date: e.target.get_start_time(),
+            name: e.target.get_name(),
+            bounds: e.target.getBounds()
+        }
+        sortedAppend(track)
+        // fit map to track bounds on loading
+        map.fitBounds(e.target.getBounds())
     }).on('mouseover', function(e) {
         var paths = gpx.split("/")
-        var filename = paths[paths.length - 1];
-        var kms = e.target.get_distance() / 1000;
-        var movingTime = e.target.get_duration_string_iso(e.target.get_moving_time(), true);
-        var movingSpeed = e.target.get_moving_speed();
-        var totalAvgTime = e.target.get_duration_string_iso(e.target.get_total_time(), true);
-        var totalAvgSpeed = e.target.get_total_speed();
+        var filename = paths[paths.length - 1]
+        var kms = e.target.get_distance() / 1000
+        var movingTime = e.target.get_duration_string_iso(e.target.get_moving_time(), true)
+        var movingSpeed = e.target.get_moving_speed()
+        var totalAvgTime = e.target.get_duration_string_iso(e.target.get_total_time(), true)
+        var totalAvgSpeed = e.target.get_total_speed()
         var tooltip = `
 <div class="maptooltip">
     <h3>${e.target.get_name()}</h3>
@@ -57,14 +101,32 @@
     </div>
     <div style="clear:both"></div>
     <h4>Click to download: ${filename}</h4>
-</div>`;
-        this.bindTooltip(tooltip, {sticky: true});
-        this.openPopup(e.latlng);
+</div>`
+        this.bindTooltip(tooltip, {sticky: true})
+        this.openPopup(e.latlng)
     }).on('click', function(e) {
-        download(gpx);
-    }).addTo(map);
+        download(gpx)
+    }).addTo(map)
 }
 
-addGPX(map, '../tracks/turin_09122022.gpx', 'red')
-addGPX(map, '../tracks/biella_27122022.gpx', 'blue')
-addGPX(map, '../tracks/la_fausto_coppi_2026_lungo.gpx', 'purple')
+const ta = [
+    this.addGPX(map, '../tracks/turin_09122022.gpx', 'red'),
+    this.addGPX(map, '../tracks/biella_27122022.gpx', 'blue'),
+    this.addGPX(map, '../tracks/la_fausto_coppi_2026_lungo.gpx', 'purple')
+]
+
+// this.createTrackList(trackArray)
+
+// // wait for all tracks to be loaded, then create tracklist
+function sleep(ms) {
+    return new Promise(resolve => { setTimeout(resolve, ms); });
+}
+async function waitForLoading() {
+    while (trackArray.length < ta.length) {
+        await(sleep(100));
+    }
+    this.createTrackList(trackArray)
+}
+waitForLoading()
+
+// todo this should run after addGPX complete