diff --git a/src/ServicePulse.Host/app/css/particular.css b/src/ServicePulse.Host/app/css/particular.css
index e788152d66..ab02335877 100644
--- a/src/ServicePulse.Host/app/css/particular.css
+++ b/src/ServicePulse.Host/app/css/particular.css
@@ -1747,6 +1747,22 @@ hr.top-separator {
     font-size: 11px;
 }
 
+.sparkline-value.sec span {
+    color: #007AFF;
+}
+
+.sparkline-value.min span {
+    color: #AE00FF;
+}
+
+.sparkline-value.h span {
+    color: #FF7DFD;
+}
+
+.sparkline-value.d span {
+    color: #FF0004;
+}
+
 .graph-area {
     width: 33%;
     box-sizing: border-box;
diff --git a/src/ServicePulse.Host/app/modules/monitoring/js/services/services.monitoring.js b/src/ServicePulse.Host/app/modules/monitoring/js/services/services.monitoring.js
index cad39b6395..866213a3c2 100644
--- a/src/ServicePulse.Host/app/modules/monitoring/js/services/services.monitoring.js
+++ b/src/ServicePulse.Host/app/modules/monitoring/js/services/services.monitoring.js
@@ -41,12 +41,20 @@
         function loadEndpointDetailsFromMonitoringService(endpointName, sourceIndex, historyPeriod) {
             return $http.get(uri.join(scConfig.monitoring_urls[sourceIndex], 'monitored-endpoints', endpointName) + "?history=" + historyPeriod)
                 .then(function (result) {
+                    filterOutSystemMessage(result.data);
                     return result.data;
                 }, function (error) {
                     return { error: error };
                 });
         }
 
+        function filterOutSystemMessage(data)
+        {
+            data.messageTypes = data.messageTypes.filter(mt => {
+                return mt.id;
+            });
+        }
+
         function createEndpointDetailsSource(endpointName, sourceIndex, historyPeriod, refreshInterval) {
             return Rx.Observable.interval(refreshInterval).startWith(0)
                 .flatMap(function (i) {
diff --git a/src/ServicePulse.Host/app/modules/monitoring/views/endpoint_details.html b/src/ServicePulse.Host/app/modules/monitoring/views/endpoint_details.html
index a14931f1e1..24a54953ab 100644
--- a/src/ServicePulse.Host/app/modules/monitoring/views/endpoint_details.html
+++ b/src/ServicePulse.Host/app/modules/monitoring/views/endpoint_details.html
@@ -309,10 +309,12 @@ <h5 ng-class="{active: showInstancesBreakdown}">
                                             <div class="no-side-padding">
                                                 <graph plot-data="instance.metrics.processingTime" minimum-YAxis="{{smallGraphsMinimumYAxis.processingTime}}" class="graph processing-time pull-left"></graph>
                                             </div>
-                                            <div class="no-side-padding sparkline-value">
+                                            <div class="no-side-padding sparkline-value" ng-class="instance.metrics.processingTime.displayValue.unit">
                                                 {{(instance.isStale == true || instance.isScMonitoringDisconnected == true) ? "" : instance.metrics.processingTime.displayValue.value}}
                                                 <strong ng-if="instance.isStale || instance.isScMonitoringDisconnected">?</strong>
-                                                <span ng-if="instance.isStale == false && instance.isScMonitoringDisconnected == false">{{instance.metrics.processingTime.displayValue.unit}}</span>
+                                                <span ng-if="instance.isStale == false && instance.isScMonitoringDisconnected == false" class="unit">
+                                                    {{instance.metrics.processingTime.displayValue.unit}}
+                                                </span>
                                             </div>
                                         </div>
                                     </div>
@@ -321,10 +323,12 @@ <h5 ng-class="{active: showInstancesBreakdown}">
                                             <div class="no-side-padding">
                                                 <graph plot-data="instance.metrics.criticalTime" minimum-YAxis="{{smallGraphsMinimumYAxis.criticalTime}}" class="graph critical-time pull-left"></graph>
                                             </div>
-                                            <div class="no-side-padding sparkline-value">
+                                            <div class="no-side-padding sparkline-value" ng-class="instance.metrics.criticalTime.displayValue.unit">
                                                 {{(instance.isStale == true || instance.isScMonitoringDisconnected == true) ? "" : instance.metrics.criticalTime.displayValue.value}}
                                                 <strong ng-if="instance.isStale || instance.isScMonitoringDisconnected">?</strong>
-                                                <span ng-if="instance.isStale == false && instance.isScMonitoringDisconnected == false">{{instance.metrics.criticalTime.displayValue.unit}}</span>
+                                                <span ng-if="instance.isStale == false && instance.isScMonitoringDisconnected == false" class="unit">
+                                                    {{instance.metrics.criticalTime.displayValue.unit}}
+                                                </span>
                                             </div>
                                         </div>
                                     </div>
@@ -442,10 +446,12 @@ <h5 ng-class="{active: showInstancesBreakdown}">
                                             <div class="no-side-padding">
                                                 <graph plot-data="messageType.metrics.processingTime" minimum-YAxis="{{smallGraphsMinimumYAxis.processingTime}}" class="graph processing-time pull-left"></graph>
                                             </div>
-                                            <div class="no-side-padding sparkline-value">
+                                            <div class="no-side-padding sparkline-value" ng-class="messageType.metrics.processingTime.displayValue.unit">
                                                 {{(endpoint.isStale == true || endpoint.isScMonitoringDisconnected == true) ? "" : messageType.metrics.processingTime.displayValue.value}}
                                                 <strong ng-if="endpoint.isStale || endpoint.isScMonitoringDisconnected">?</strong>
-                                                <span ng-if="endpoint.isStale == false && endpoint.isScMonitoringDisconnected == false">{{messageType.metrics.processingTime.displayValue.unit}}</span>
+                                                <span ng-if="endpoint.isStale == false && endpoint.isScMonitoringDisconnected == false" class="unit">
+                                                    {{messageType.metrics.processingTime.displayValue.unit}}
+                                                </span>
                                             </div>
                                         </div>
                                     </div>
@@ -454,10 +460,12 @@ <h5 ng-class="{active: showInstancesBreakdown}">
                                             <div class="no-side-padding">
                                                 <graph plot-data="messageType.metrics.criticalTime" minimum-YAxis="{{smallGraphsMinimumYAxis.criticalTime}}" class="graph critical-time pull-left"></graph>
                                             </div>
-                                            <div class="no-side-padding sparkline-value">
+                                            <div class="no-side-padding sparkline-value" ng-class="messageType.metrics.criticalTime.displayValue.unit">
                                                 {{(endpoint.isStale == true || endpoint.isScMonitoringDisconnected == true) ? "" : messageType.metrics.criticalTime.displayValue.value}}
                                                 <strong ng-if="endpoint.isStale || endpoint.isScMonitoringDisconnected">?</strong>
-                                                <span ng-if="endpoint.isStale == false && endpoint.isScMonitoringDisconnected == false">{{messageType.metrics.criticalTime.displayValue.unit}}</span>
+                                                <span ng-if="endpoint.isStale == false && endpoint.isScMonitoringDisconnected == false" class="unit">
+                                                    {{messageType.metrics.criticalTime.displayValue.unit}}
+                                                </span>
                                             </div>
                                         </div>
                                     </div>
diff --git a/src/ServicePulse.Host/app/modules/monitoring/views/monitored_endpoints.html b/src/ServicePulse.Host/app/modules/monitoring/views/monitored_endpoints.html
index 48ef1efbd9..70763b43cd 100644
--- a/src/ServicePulse.Host/app/modules/monitoring/views/monitored_endpoints.html
+++ b/src/ServicePulse.Host/app/modules/monitoring/views/monitored_endpoints.html
@@ -125,10 +125,10 @@ <h1>Endpoints overview</h1>
                                         <div class="no-side-padding">
                                             <graph plot-data="endpoint.metrics.processingTime" minimum-YAxis="{{smallGraphsMinimumYAxis.processingTime}}" class="graph processing-time pull-left"></graph>
                                         </div>
-                                        <div class="no-side-padding sparkline-value">
+                                        <div class="no-side-padding sparkline-value" ng-class="endpoint.metrics.processingTime.displayValue.unit">
                                             {{(endpoint.isStale == true || endpoint.isScMonitoringDisconnected == true) ? "" : endpoint.metrics.processingTime.displayValue.value}}
                                             <strong ng-if="endpoint.isStale || endpoint.isScMonitoringDisconnected">?</strong>
-                                            <span ng-if="endpoint.isStale == false && endpoint.isScMonitoringDisconnected == false"> {{endpoint.metrics.processingTime.displayValue.unit}}</span>
+                                            <span ng-if="endpoint.isStale == false && endpoint.isScMonitoringDisconnected == false" class="unit"> {{endpoint.metrics.processingTime.displayValue.unit}}</span>
                                         </div>
                                     </div>
                                 </div>
@@ -137,10 +137,10 @@ <h1>Endpoints overview</h1>
                                         <div class="no-side-padding">
                                             <graph plot-data="endpoint.metrics.criticalTime" minimum-YAxis="{{smallGraphsMinimumYAxis.criticalTime}}" class="graph critical-time pull-left"></graph>
                                         </div>
-                                        <div class="no-side-padding sparkline-value">
+                                        <div class="no-side-padding sparkline-value" ng-class="endpoint.metrics.criticalTime.displayValue.unit">
                                             {{(endpoint.isStale == true || endpoint.isScMonitoringDisconnected == true) ? "" : endpoint.metrics.criticalTime.displayValue.value}}
                                             <strong ng-if="endpoint.isStale || endpoint.isScMonitoringDisconnected">?</strong>
-                                            <span ng-if="endpoint.isStale == false && endpoint.isScMonitoringDisconnected == false"> {{endpoint.metrics.criticalTime.displayValue.unit}}</span>
+                                            <span ng-if="endpoint.isStale == false && endpoint.isScMonitoringDisconnected == false" class="unit"> {{endpoint.metrics.criticalTime.displayValue.unit}}</span>
                                         </div>
                                     </div>
                                 </div>