diff --git a/ServiceHost/wwwroot/AssetsClient/pages/RollCall/css/CaseHistory.css b/ServiceHost/wwwroot/AssetsClient/pages/RollCall/css/CaseHistory.css
index 0f0d86ab..68be32a2 100644
--- a/ServiceHost/wwwroot/AssetsClient/pages/RollCall/css/CaseHistory.css
+++ b/ServiceHost/wwwroot/AssetsClient/pages/RollCall/css/CaseHistory.css
@@ -28,6 +28,14 @@
     white-space: nowrap;
 }
 
+.positive-time {
+    color: #65a30d !important;
+}
+
+.negative-time {
+    color: #F20E0E !important;
+}
+
 .tooltipfull-container:hover .tooltipfull, a:hover .tooltipfull {
     opacity: 1;
     -webkit-transform: scale(1);
diff --git a/ServiceHost/wwwroot/AssetsClient/pages/RollCall/js/CaseHistory.js b/ServiceHost/wwwroot/AssetsClient/pages/RollCall/js/CaseHistory.js
index b347a24e..ab43761c 100644
--- a/ServiceHost/wwwroot/AssetsClient/pages/RollCall/js/CaseHistory.js
+++ b/ServiceHost/wwwroot/AssetsClient/pages/RollCall/js/CaseHistory.js
@@ -837,7 +837,13 @@ function caseHistoryLoadAjax() {
 				    </div>`;
 
 
-                                html += `<div class="width3 d-block d-md-none" style="width:1% !important;border-right: 1px dashed #CACACA;padding: 0 20px 0 7px;">-</div>`;
+                            html += `<div class="width3 d-block d-md-none" style="width:1% !important;border-right: 1px dashed #CACACA;padding: 0 20px 0 7px;white-space: nowrap;">`;
+                            item.rollCallTimesList.forEach(function (itemTime) {
+                                let { timeDiff, cssClass } = getTimeDiffData(itemTime.entryTimeDifferences);
+                                html += ` <span class="${cssClass}">${timeDiff}</span>`;
+                            });
+
+                            html += `</div>`;
 
                                 html += `<div class="width4 d-block d-md-none" style="width:18% !important">`;
                                 if (item.rollCallTimesList.length > 0) {
@@ -871,7 +877,13 @@ function caseHistoryLoadAjax() {
                                 }
                                 html += `</div>`;
 
-                                html += `<div class="width3 d-block d-md-none" style="width:1% !important;padding: 0 0 0 20px;">-</div>`;
+                            html += `<div class="width3 d-block d-md-none" style="width:1% !important;padding: 0 0 0 20px;white-space: nowrap;">`;
+                            item.rollCallTimesList.forEach(function (itemTime) {
+                                let { timeDiff, cssClass } = getTimeDiffData(itemTime.exitTimeDifferences);
+                                html += ` <span class="${cssClass}">${timeDiff}</span>`;
+                            });
+
+                            html += `</div>`;
 
                                 html += `</div>`;
 
@@ -2031,7 +2043,7 @@ function getSearchParamsFromUrl() {
         day: urlParams.get("day") || "",
         startDate: urlParams.get("start-date") || "",
         endDate: urlParams.get("end-date") || "",
-        employeeId: urlParams.get("employee") || "0"
+        employeeId: urlParams.get("employee-id") || "0"
     };
 }