diff --git a/metrics.go b/metrics.go
index 98d531a..2ddb734 100644
--- a/metrics.go
+++ b/metrics.go
@@ -27,6 +27,7 @@ type OneMetric struct {
 	Vbat                 string
 	Fw                   string
 	BatteryPercent       string
+	BatteryPercentHTML   template.HTML
 	ActiveUntil          string
 	DaysUntilDeactivated int // berechneter Wert
 }
@@ -204,26 +205,46 @@ func metricsHandler(response http.ResponseWriter, request *http.Request) {
 }
 
 func vbat2percent(vbat string) int {
-	res := 0
 	i, err := strconv.Atoi(vbat)
+	res := 0
 	if err == nil {
-		if i < 3400 {
-			res = 1
-		} else if i < 3700 {
-			res = 2
-		} else if i < 3850 {
-			res = 3
-		} else if i < 4000 {
-			res = 4
-		} else {
-			res = 5
+		res = int(float64(i-3500) * float64((100.0/0.7)*0.001))
+		fmt.Printf("vbat2percent Result in Percent: %d\n", res)
+		if res < 0 {
+			res = 0
+		} else if res > 100 {
+			res = 100
 		}
-
 	}
 
 	return res
 }
 
+func vbat2html(vbat string) string {
+	percent := vbat2percent(vbat)
+	fa_battery_string := ""
+	icon_color := ""
+
+	if percent <= 20 {
+		fa_battery_string = "fa-battery-empty"
+		icon_color = "has-background-danger-dark has-text-white pl-2 pr-2"
+	} else if percent <= 40 {
+		fa_battery_string = "fa-battery-quarter"
+		icon_color = "has-background-danger-light has-text-danger pl-2 pr-2"
+	} else if percent <= 60 {
+		fa_battery_string = "fa-battery-half"
+		icon_color = "has-text-success pl-2 pr-2"
+	} else if percent <= 80 {
+		fa_battery_string = "fa-battery-three-quarters"
+		icon_color = "has-text-success pl-2 pr-2"
+	} else {
+		fa_battery_string = "fa-battery-full"
+		icon_color = "has-text-success pl-2 pr-2"
+	}
+
+	return "<span class=\"" + icon_color + "\"><i class=\"fas " + fa_battery_string + "\"></i>&nbsp;" + strconv.Itoa(percent) + " &percnt;</span>"
+}
+
 func CalcDaysUntil(mydate string) int {
 	var days int
 	layout := "02.01.2006"
@@ -299,7 +320,8 @@ func getLastMetrics(deveui string) OneMetric {
 				res.Lon = s[10]
 				res.PosTimestamp = t.In(location).Format("02.01.2006 15:04")
 			}
-			res.BatteryPercent = s[11]
+			res.BatteryPercent = strconv.Itoa(vbat2percent(s[11]))
+			res.BatteryPercentHTML = template.HTML(vbat2html(s[11]))
 
 		}
 
diff --git a/snippets/index.html b/snippets/index.html
index e7fc3d2..bbad34d 100644
--- a/snippets/index.html
+++ b/snippets/index.html
@@ -2,6 +2,11 @@
 {{end}}
 {{define "body_content"}}
 <p class="title is-4">GPS Tracking leichtgemacht...</p>
+<div>
+  <figure class="image is-square">
+    <img src="/static/images/wo-bisch-tracker.jpg">
+  </figure>
+</div>
 <div class="message is-danger">
   <div class="message-body">
 Aktuell noch in Entwicklung, kommen Sie sp&auml;ter noch einmal vorbei...
diff --git a/snippets/tracker.html b/snippets/tracker.html
index 8d03bae..b6dc302 100644
--- a/snippets/tracker.html
+++ b/snippets/tracker.html
@@ -101,9 +101,10 @@ Sie erhalten eine E-Mail, sobald die Zahlung erfolgreich abgeschlossen ist.
 </div>
 
 {{range .LastMetrics}}
-<div class="column tracker is-full notification is-warning">
+<div class="column tracker is-full notification is-light">
   <p class="is-size-2 is-size-5-mobile has-text-centered has-text-weight-bold" ><span class="alias" id="alias_{{.Deveui}}">{{.Alias}}</span>{{ if not .Readonly }}<a class="show-modal" class="block-link"><span style="float:right;" class="icon is-size-4 is-size-5-mobile"><i class="fa fa-cog"></i></span></a>{{ end }}</p>
   <p id="lastmeasurement_{{.Deveui}}" class="has-text-centered">letzte &uuml;bermittelte Messung: {{.Timestamp}}</p>
+  <p id="batpercent_{{.Deveui}}" class="has-text-centered">{{.BatteryPercentHTML}}</p>
   <div id="{{.Deveui}}" class="columns mt-3">
     <p id="lat" hidden>{{.Lat}}</p>
     <p id="lon" hidden>{{.Lon}}</p>
diff --git a/static/css/wo-bisch-web-custom.css b/static/css/wo-bisch-web-custom.css
index 60cedfe..c4337e4 100644
--- a/static/css/wo-bisch-web-custom.css
+++ b/static/css/wo-bisch-web-custom.css
@@ -89,6 +89,10 @@ input:focus,
   height: 300px;
 }
 
+.modal {
+  z-index: 9999;
+}
+
 .mapbig {
   height: 100%;
 }
diff --git a/static/images/wo-bisch-tracker.jpg b/static/images/wo-bisch-tracker.jpg
new file mode 100644
index 0000000..7e61ec9
Binary files /dev/null and b/static/images/wo-bisch-tracker.jpg differ
diff --git a/static/js/map.js b/static/js/map.js
index a67ed93..9e3966d 100644
--- a/static/js/map.js
+++ b/static/js/map.js
@@ -30,34 +30,25 @@ var start = dstart.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
 var dstop = moment();
 var stop = dstop.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
 
-function vbat2icon(level) {
-  switch (level) {
-    case 1:
-      fa_battery_string = "fa-battery-empty";
-      icon_color = "has-text-danger";
-      break;
-    case 2:
-      fa_battery_string = "fa-battery-quarter";
-      icon_color = "has-text-warning";
-      break;
-    case 3:
-      fa_battery_string = "fa-battery-half";
-      icon_color = "has-text-info";
-      break;
-    case 4:
-      fa_battery_string = "fa-battery-three-quarters";
-      icon_color = "has-text-link";
-      break;
-    case 5:
-      fa_battery_string = "fa-battery-full";
-      icon_color = "has-text-success";
-      break;
-    default:
-      fa_battery_string = "fa-battery-slash";
-      icon_color = "has-text-danger";
+function vbat2icon(percent) {
+  if (percent <= 20) {
+     fa_battery_string = "fa-battery-empty";
+     icon_color = "has-background-danger-dark has-text-white pl-2 pr-2";
+  } else if (percent <= 40) {
+     fa_battery_string = "fa-battery-quarter";
+     icon_color = "has-background-danger-light has-text-danger pl-2 pr-2";
+  } else if (percent <= 60) {
+     fa_battery_string = "fa-battery-half";
+     icon_color = "has-text-success pl-2 pr-2";
+  } else if (percent <= 80) {
+     fa_battery_string = "fa-battery-three-quarters";
+     icon_color = "has-text-success pl-2 pr-2";
+  } else {
+     fa_battery_string = "fa-battery-full";
+     icon_color = "has-text-success pl-2 pr-2";
   }
 
-  return '<span class="icon ' + icon_color + '"><i class="fas ' + fa_battery_string + '"></i></span>';
+  return '<span class="' + icon_color + '"><i class="fas ' + fa_battery_string + '"></i>&nbsp;' + percent + ' &percnt;</span>';
 }
 
 function refreshDatapoints(deveui, start, stop) {
diff --git a/static/js/tracker.js b/static/js/tracker.js
index 8d0ccee..e4f06f0 100644
--- a/static/js/tracker.js
+++ b/static/js/tracker.js
@@ -278,12 +278,12 @@ $(document).ready(function () {
     var url = 'https://wmts20.geo.admin.ch/1.0.0/ch.swisstopo.pixelkarte-farbe/default/current/3857/{z}/{x}/{y}.jpeg';
     var tilelayer = new L.tileLayer(url);
     map.addLayer(tilelayer);
+    map.attributionControl.setPrefix('Source: Swiss Federal Office of Topography')
     map.setView(L.latLng(lat, lon), 10);
 
     var marker = L.marker([lat, lon], { icon: woBischIcon }).addTo(map);
 
     maps.push(map);
 
-
   });
 });