diff --git a/ganttzk/src/main/resources/web/js/ganttz/mold/task-component.js b/ganttzk/src/main/resources/web/js/ganttz/mold/task-component.js
index c4784599d..3198e0fbd 100644
--- a/ganttzk/src/main/resources/web/js/ganttz/mold/task-component.js
+++ b/ganttzk/src/main/resources/web/js/ganttz/mold/task-component.js
@@ -14,12 +14,12 @@ function(out){
         out.push('<div class="completionMoneyCostBar"></div>');
         out.push('<div class="completion"></div>');
         out.push('<div class="completion2"></div>');
-        out.push('<div class="timesheet-date-mark first-timesheet-date">|</div>');
-        out.push('<div class="timesheet-date-mark last-timesheet-date">|</div>');
+        out.push('<div class="timesheet-date-mark first-timesheet-date"></div>');
+        out.push('<div class="timesheet-date-mark last-timesheet-date"></div>');
 
         out.push('<div id="tasktooltip', this.uuid,'" class="task_tooltip">',
                 this.getTooltipText(),
                 '</div>');
 
     out.push('</div>');
-}
\ No newline at end of file
+}
diff --git a/libreplan-webapp/src/main/webapp/planner/css/ganttzk.css b/libreplan-webapp/src/main/webapp/planner/css/ganttzk.css
index 941976473..06ca1ca63 100644
--- a/libreplan-webapp/src/main/webapp/planner/css/ganttzk.css
+++ b/libreplan-webapp/src/main/webapp/planner/css/ganttzk.css
@@ -284,16 +284,22 @@ div.box.limiting-unassigned {
     font-weight: bold;
     /* By default marks are hidden */
     display: none;
+    border: 2px solid #F21CFF;
+    height: 5px;
+    width: 2px;
+    opacity: 0.5;
 }
 
 .first-timesheet-date {
     position: absolute;
-    margin-top: -19px;
+    margin-top: -16px;
+    border-right: 0;
 }
 
 .last-timesheet-date {
     position: absolute;
-    margin-top: -19px;
+    margin-top: -16px;
+    border-left: 0;
 }
 
 .completion2 {