diff --git a/index.html b/index.html
index 6f4b1fc..f8540a2 100644
--- a/index.html
+++ b/index.html
@@ -1,11 +1,13 @@
 <!DOCTYPE HTML>
 <html>
 	<head>
-		<title>FileListTest</title>
+		<title>Speedtest.net map</title>
 		<meta charset="utf-8" />
+		<meta name='viewport' content='width=device-width, initial-scale=1'>
 		<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" type="text/css">
 
 		<style>
+		#statusbox p { margin: 0; }
 		.error {
 			color: red;
 		}
@@ -16,32 +18,74 @@
 			height: 800px;
 			width: 100%;
 		}
+
+		.ol-popup {
+			position: absolute;
+			background-color: white;
+			box-shadow: 0 1px 4px rgba(0,0,0,0.2);
+			padding: 15px;
+			border-radius: 10px;
+			border: 1px solid #cccccc;
+			bottom: 12px;
+			left: -50px;
+			min-width: 280px;
+			white-space: nowrap;
+		}
+		.ol-popup:after, .ol-popup:before {
+			top: 100%;
+			border: solid transparent;
+			content: " ";
+			height: 0;
+			width: 0;
+			position: absolute;
+			pointer-events: none;
+		}
+		.ol-popup:after {
+			border-top-color: white;
+			border-width: 10px;
+			left: 48px;
+			margin-left: -10px;
+		}
+		.ol-popup:before {
+			border-top-color: #cccccc;
+			border-width: 11px;
+			left: 48px;
+			margin-left: -11px;
+		}
+		.ol-popup-closer {
+			text-decoration: none;
+			position: absolute;
+			top: 2px;
+			right: 8px;
+		}
 		</style>
 		<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
 	</head>
 	<body>
 		<h1>SpeedTest.net file mapper</h1>
 		<hr />
-		<form action="" method="post" onsubmit="return trigger(this);">
-		<input type="file" name="file" id="files" multiple /><br />
-		<input type="reset" value="clear"/><input type="submit" id="ok" value="ok"/>
+		<form action="javascript:void(0);">
+			<input type="file" name="file" id="files" oninput="trigger(event)" multiple />
+			<button type="button" onclick="trigger(event)">OK</button>
 		</form>
 
 		<h3>Status:</h3>
-		<div id="statusbox" style="color: red; display: none;">
-		</div>
+		<div id="statusbox"></div>
 
-		<div id="overlaytest">
-		</div>
+		<div id="overlaytest"></div>
 
 		<div id="map" class="map"></div>
+		<div id="popup" class="ol-popup">
+		<a href="#" id="popup-closer" class="ol-popup-closer">✖</a>
+		<div id="popup-content"></div>
+		</div>
 
 		<script>
 
 		//class defs
 		class Entry {
 			constructor(data) {
-				this.date = data[0];
+				this.date = data[0].replaceAll("/", ".").replace(",", "");
 				this.conntype = data[1];
 				this.loc = [parseFloat(data[3]), parseFloat(data[2])];  // long, lat
 				this.speed = [parseFloat(data[4]), parseFloat(data[6])]; // dl, up
@@ -54,54 +98,82 @@
 			}
 
 			toHTML() {
-				return "Date: " + this.date + " type: " + this.conntype + " loc: " + this.loc + " speed: " + this.speed + "  Ping: " + this.ping + " url: <a target=\"_blank\"href=\"" + this.url + "\">" + this.url + "</a><br />\n";
+				return this.conntype.toUpperCase() + " [" + this.date + "] " + "<br />\n" + this.speedStr + "<br />\nPing: " + this.ping + "ms<br />\n<a target=\"_blank\"href=\"" + this.url + "\">result Page&#128279;</a><br />\n";
+			}
+
+			get speedStr() {
+				return this.speed[0].toFixed(2) + " Mbps ↓ / " + this.speed[1].toFixed(2) + " Mbps ↑";
 			}
 		};
 
+		/** @type {HTMLDivElement} */
 		var statusBox = document.getElementById("statusbox");
 		var overlaytest = document.getElementById("overlaytest");
-		var test = "";
+
+		var popupcontainer = document.getElementById('popup');
+		var popupcontent = document.getElementById('popup-content');
+		var popupcloser = document.getElementById('popup-closer');
 
 		var zoomstart = 15;
+		var dotradius = 5;
 
 		var isInit = false;
 		var entryList = [];
 
 		//init map
+		var overlay = new ol.Overlay({
+			element: popupcontainer,
+			autoPan: true,
+			autoPanAnimation: {
+				duration: 250,
+			},
+		});
+
+		popupcloser.onclick = function () {
+			popupcontent.innerHTML = "";
+
+			overlay.setPosition(undefined);
+			popupcloser.blur();
+			return false;
+		};
+
 		var map = new ol.Map({
-		target: 'map',
-		layers: [
-			new ol.layer.Tile({
-				source: new ol.source.OSM()
-			})
-		],
-		view: new ol.View({
-			center: ol.proj.fromLonLat([0, 0]),
-			zoom: zoomstart
-		})
+			target: 'map',
+			layers: [
+				new ol.layer.Tile({
+					source: new ol.source.OSM()
+				})
+			],
+			view: new ol.View({
+				center: ol.proj.fromLonLat([0, 0]),
+				zoom: zoomstart
+			}),
+			overlays: [overlay]
 		});
 
 		var highlightStyle = new ol.style.Style({
 					image: new ol.style.Circle({
-						radius: 4,
+						radius: dotradius,
 						fill: new ol.style.Fill({color: 'green'})
 					})
 				});
 
 		var defaultStyle = new ol.style.Style({
 					image: new ol.style.Circle({
-						radius: 4,
+						radius: dotradius,
 						fill: new ol.style.Fill({color: 'red'})
 					})
 				});
 
+		//liste of features, that have the highlighted style
 		var highlighted = [];
 
+		// event listener
 		map.on("pointermove", e => {
 			var newhighlighted = [];
 
 			//gather overlay information
-			var fids = [];
+			var fids = []; //lsit of currently hovered feature ids
 			map.forEachFeatureAtPixel(e.pixel, feature => {
 				var fid = feature.getProperties().id;
 				fids.push(fid);
@@ -110,37 +182,44 @@
 			})
 
 			if(newhighlighted.length > 0) {
-				//remove highlight style
+				//remove highlight style from non hovered elements
 				highlighted.filter(h => newhighlighted.indexOf(h) == -1).forEach(h => h.setStyle(defaultStyle));
 				highlighted = newhighlighted;
 			}
 
 			// display information
-			if(fids.length > 0)
-				overlaytest.innerHTML = "";
+			if(fids.length > 0) {
+				popupcontent.innerHTML = "";
+				overlay.setPosition(e.coordinate);
+			}
 			for(var i = 0; i < fids.length; ++i) {
 				var entry = entryList[fids[i]];
 
 				console.log(entry);
 
 				//print entry
-				overlaytest.innerHTML += entry.toHTML();
+				popupcontent.innerHTML += entry.toHTML();
+				if(i+1 < fids.length)
+					popupcontent.innerHTML += "<hr />\n";
 			}
 		});
 
 		function showError(error) {
-			statusBox.innerHTML += "<span class=\"error\"> Error: " + error + "</span><br />\n";
-			statusBox.style.display = "";
+			var span = document.createElement('p');
+			span.classList.add('error');
+			span.innerHTML = `Error: ${error}`;
+			statusBox.appendChild(span);
 		}
 
 		function showSuccess(success) {
-			statusBox.innerHTML += "<span class=\"success\"> Success: " + success + "</span><br />\n";
-			statusBox.style.display = "";
+			var span = document.createElement('p');
+			span.classList.add('success');
+			span.innerHTML = `Success: ${success}`;
+			statusBox.appendChild(span);
 		}
 
 		function clearStatus() {
 			statusBox.innerHTML = "";
-			statusBox.style.display = "none";
 		}
 
 		function addElement(data, features) {
@@ -151,7 +230,7 @@
 			if(!isInit) {
 				isInit = true;
 				map.setView(new ol.View({center: dot, zoom: zoomstart}));
-				console.log(dot);			//console.log(data);
+				console.log(dot);
 			}
 
 			var feat = new ol.Feature({
@@ -207,7 +286,7 @@
 			text.then(t => loadedFile(t));
 		}
 
-		function trigger(form) {
+		function trigger(event) {
 			console.log("OK");
 
 			clearStatus();
@@ -228,7 +307,7 @@
 					loadFile(f);
 					successC ++;
 				} else {
-					showError("The file <i>" + f.name + "</i> is not in the csv format");
+					showError(`The file <i>${f.name}</i> is not in the csv format`);
 				}
 			}
 
