diff --git a/css/style.css b/css/style.css
index 83e193e..275a51f 100644
--- a/css/style.css
+++ b/css/style.css
@@ -249,22 +249,21 @@ input#trackname:focus:invalid {
     margin: 0;
 }
 
-.track-analysis-header-distance {
+table.dataTable.mini .track-analysis-header-distance {
     text-align: right;
+    padding-right: 4px;
 }
 
-.track-analysis-table td {
+.track-analysis-table {
     font-size: small;
+    padding-bottom: 0.5em;
 }
 
 table.dataTable.track-analysis-table tfoot td {
     font-weight: bold;
     text-align: right;
-    padding-right: 0;
-}
-
-table.track-analysis-table tr:hover {
-    background-color: rgba(255, 255, 0, 0.3);
+    padding-right: 4px;
+    padding-top: 4px;
 }
 
 .track-analysis-title {
@@ -276,8 +275,8 @@ table.track-analysis-table tr:hover {
 }
 
 .track-analysis-heading {
-    margin-top: 15px;
-    font-weight: bold;
+    margin-top: 0.7em;
+    margin-bottom: 0.1em;
     font-size: 1.2em;
 }
 
@@ -447,13 +446,10 @@ table.dataTable thead .sorting {
     background-position: center right -3px;
 }
 
+table.track-analysis-table tbody tr:hover,
 table.dataTable.hover tbody tr:hover,
-table.dataTable.hover tbody tr.odd:hover,
-table.dataTable.hover tbody tr.even:hover,
-table.dataTable.display tbody tr:hover,
-table.dataTable.display tbody tr.odd:hover,
-table.dataTable.display tbody tr.even:hover {
-    background-color: rgba(255, 255, 0, 0.2);
+table.dataTable.display tbody tr:hover {
+    background-color: rgba(255, 255, 0, 0.3);
 }
 table.dataTable.hover tbody tr:hover.selected,
 table.dataTable.display tbody tr:hover.selected {
diff --git a/js/control/TrackAnalysis.js b/js/control/TrackAnalysis.js
index ac6739a..7c35445 100644
--- a/js/control/TrackAnalysis.js
+++ b/js/control/TrackAnalysis.js
@@ -18,7 +18,9 @@ BR.TrackAnalysis = L.Class.extend({
         overlayStyle: {
             color: 'yellow',
             opacity: 0.8,
-            weight: 8
+            weight: 8,
+            // show above quality coding (pane defined in RoutingPathQuality.js)
+            pane: 'routingQualityPane'
         }
     },
 
@@ -226,11 +228,17 @@ BR.TrackAnalysis = L.Class.extend({
         var $content = $('#track_statistics');
 
         $content.html('');
-        $content.append($('<h4 class="analysis-heading">' + i18next.t('sidebar.analysis.header.highway') + '</h4>'));
+        $content.append(
+            $('<h4 class="track-analysis-heading">' + i18next.t('sidebar.analysis.header.highway') + '</h4>')
+        );
         $content.append(this.renderTable('highway', analysis.highway));
-        $content.append($('<h4 class="analysis-heading">' + i18next.t('sidebar.analysis.header.surface') + '</h4>'));
+        $content.append(
+            $('<h4 class="track-analysis-heading">' + i18next.t('sidebar.analysis.header.surface') + '</h4>')
+        );
         $content.append(this.renderTable('surface', analysis.surface));
-        $content.append($('<h4 class="analysis-heading">' + i18next.t('sidebar.analysis.header.smoothness') + '</h4>'));
+        $content.append(
+            $('<h4 class="track-analysis-heading">' + i18next.t('sidebar.analysis.header.smoothness') + '</h4>')
+        );
         $content.append(this.renderTable('smoothness', analysis.smoothness));
     },
 
diff --git a/js/plugin/RoutingPathQuality.js b/js/plugin/RoutingPathQuality.js
index 936f481..64b4872 100644
--- a/js/plugin/RoutingPathQuality.js
+++ b/js/plugin/RoutingPathQuality.js
@@ -18,13 +18,16 @@ BR.RoutingPathQuality = L.Control.extend({
                 icon: 'fa-line-chart',
                 provider: new HotLineQualityProvider({
                     hotlineOptions: {
-                        min: -15,
-                        max: 15,
+                        min: -8.5,
+                        max: 8.5, // angle in degree, == 15% incline
                         palette: {
-                            0.0: '#ff0000',
-                            0.5: '#00ff00',
-                            1.0: '#ff0000'
+                            0.0: '#0000ff', // blue
+                            0.25: '#00ffff', // cyan
+                            0.5: '#00ff00', // green
+                            0.75: '#ffff00', // yellow
+                            1.0: '#ff0000' // red
                         },
+                        outlineColor: 'dimgray',
                         renderer: renderer
                     },
                     valueFunction: function(latLng, prevLatLng) {
@@ -42,6 +45,7 @@ BR.RoutingPathQuality = L.Control.extend({
                 icon: 'fa-area-chart',
                 provider: new HotLineQualityProvider({
                     hotlineOptions: {
+                        outlineColor: 'dimgray',
                         renderer: renderer
                     },
                     valueFunction: function(latLng) {
@@ -54,6 +58,7 @@ BR.RoutingPathQuality = L.Control.extend({
                 icon: 'fa-usd',
                 provider: new HotLineQualityProvider({
                     hotlineOptions: {
+                        outlineColor: 'dimgray',
                         renderer: renderer
                     },
                     valueFunction: function(latLng) {