diff --git a/ganttzk/src/main/resources/web/ganttz/task.dsp b/ganttzk/src/main/resources/web/ganttz/task.dsp
index 7d0e16038..263dcfab6 100755
--- a/ganttzk/src/main/resources/web/ganttz/task.dsp
+++ b/ganttzk/src/main/resources/web/ganttz/task.dsp
@@ -9,5 +9,6 @@
     <div id="${self.uuid}" z.type="ganttz.task.Task" idTask="${self.id}"
         z.autoz="true"${self.outerAttrs}">
         <div id="completion${self.uuid}" class="completion"></div>
+        <div id="completion2${self.uuid}" class="completion2"></div>
     </div>
 </div>
diff --git a/ganttzk/src/main/resources/web/ganttz/taskcontainer.dsp b/ganttzk/src/main/resources/web/ganttz/taskcontainer.dsp
index 0fa7063a7..1c6490703 100644
--- a/ganttzk/src/main/resources/web/ganttz/taskcontainer.dsp
+++ b/ganttzk/src/main/resources/web/ganttz/taskcontainer.dsp
@@ -8,7 +8,11 @@
 <div id="row${self.uuid}" class="row" z.valor="boxid="${self.uuid}">
     <div id="${self.uuid}" z.type="ganttz.taskcontainer.TaskContainer" idTask="${self.id}"
        z.autoz="true"${self.outerAttrs}" class="taskgroup">
+	<div class="taskcontainer_completion">
+	        <div id="completion${self.uuid}" class="completion"></div>
+	        <div id="completion2${self.uuid}" class="completion2"></div>
+	</div>
         <div class="taskgroup_start"></div>
         <div class="taskgroup_end"></div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/ganttzk/src/main/resources/web/js/ganttz/planner.js b/ganttzk/src/main/resources/web/js/ganttz/planner.js
index e7878b8f7..c26142a8e 100644
--- a/ganttzk/src/main/resources/web/js/ganttz/planner.js
+++ b/ganttzk/src/main/resources/web/js/ganttz/planner.js
@@ -128,7 +128,10 @@ zkPlanner.drawArrowStartStart = function(arrow, orig, dest){
     var xorig = orig[0] - zkTask.HALF_DEPENDENCY_PADDING;
     var yorig = orig[1] - zkTask.CORNER_WIDTH/2 + zkTask.HALF_DEPENDENCY_PADDING;
     var xend = dest[0] + zkTask.HALF_DEPENDENCY_PADDING;
-    var yend = dest[1] - zkTask.DEPENDENCY_PADDING;
+    var yend = dest[1] - zkTask.HALF_DEPENDENCY_PADDING;
+    if (yend < yorig) {
+      yorig = orig[1] + zkTask.DEPENDENCY_PADDING;
+    }
 
     width1 = zkTask.CORNER_WIDTH;
     width2 = Math.abs(xend - xorig) + zkTask.CORNER_WIDTH;
@@ -160,11 +163,11 @@ zkPlanner.drawArrowStartStart = function(arrow, orig, dest){
 	var depend = this.findImageElement(arrow, 'end');
 	depend.style.left = depstart.style.left;
 	depend.style.top = yend + "px";
-	depend.style.width = width2 + "px";
+	depend.style.width = width2 - zkTask.HALF_HEIGHT + "px";
 
     var deparrow = this.findImageElement(arrow, 'arrow');
     deparrow.src = this.getImagesDir()+"arrow.png";
-    deparrow.style.top = yend - 5 + "px";
+    deparrow.style.top = yend - zkTask.HALF_HEIGHT + "px";
     deparrow.style.left = xend - 15 + "px";
     }
 
@@ -187,7 +190,11 @@ zkPlanner.drawArrowEndEnd = function(arrow, orig, dest){
 	// First segment
 	var depstart = this.findImageElement(arrow, 'start');
 	depstart.style.left = xorig + "px";
-	depstart.style.top = yorig + "px";
+	if (yend > yorig) {
+		depstart.style.top = yorig + "px";
+	} else {
+		depstart.style.top = yorig + zkTask.HEIGHT + "px";
+	}
 	depstart.style.width = width1 + "px";
 	depstart.style.display = "inline";
 
@@ -198,6 +205,7 @@ zkPlanner.drawArrowEndEnd = function(arrow, orig, dest){
 	  depmid.style.top = yorig + "px";
 	} else {
 	  depmid.style.top = yend + "px";
+	  height = height + 10;
 	}
 	depmid.style.height = height + "px";
 
@@ -210,7 +218,7 @@ zkPlanner.drawArrowEndEnd = function(arrow, orig, dest){
     var deparrow = this.findImageElement(arrow, 'arrow');
     deparrow.src = this.getImagesDir()+"arrow3.png";
     deparrow.style.top = yend - 5 + "px";
-    deparrow.style.left = xend - 5 + "px";
+    deparrow.style.left = xend - 8 + "px";
     }
 
 
diff --git a/navalplanner-webapp/src/main/webapp/planner/css/ganttzk.css b/navalplanner-webapp/src/main/webapp/planner/css/ganttzk.css
index 98440f223..a61a900c6 100644
--- a/navalplanner-webapp/src/main/webapp/planner/css/ganttzk.css
+++ b/navalplanner-webapp/src/main/webapp/planner/css/ganttzk.css
@@ -6,7 +6,7 @@ The next constants are used within the planner styling:
 
 Ganntz.ListdetailsWidth = 280
 
-
+zkTasklist.HEIGHT_PER_TASK = 10
 zkTasklist.HEIGHT_PER_ROW = 15
 zkTasklist.HEIGHT_TIME_TRACKER = 120
 
@@ -146,15 +146,28 @@ zkTasklist.GANTT_PANEL_LEFT = 300
 }
 
 .completion {
-    display: none;
     width: 30%;
     margin-top:0px;
-    height: 10px;
+    height: 5px; /* zkTasklist.HEIGHT_PER_TASK / 2 */
     background-color: #FFCC99;
     z-index:5;
     border:0px;
 }
 
+.completion2 {
+    width: 50%;
+    height: 5px; /* zkTasklist.HEIGHT_PER_TASK / 2 */
+    background-color: #75d9b0;
+    z-index:5;
+    border:0px;
+}
+
+.taskgroup_start, .taskgroup_end {
+	position:relative;
+	top:-10px; /* zkTasklist.HEIGHT_PER_TASK */
+}
+
+
 .row span {
     display:none;
     position:relative;