diff --git a/navalplanner-webapp/src/main/java/org/navalplanner/web/orders/OrderElementTreeController.java b/navalplanner-webapp/src/main/java/org/navalplanner/web/orders/OrderElementTreeController.java
index 5bfb0faac..93203e866 100644
--- a/navalplanner-webapp/src/main/java/org/navalplanner/web/orders/OrderElementTreeController.java
+++ b/navalplanner-webapp/src/main/java/org/navalplanner/web/orders/OrderElementTreeController.java
@@ -22,6 +22,7 @@ import org.zkoss.zk.ui.util.GenericForwardComposer;
 import org.zkoss.zul.Constraint;
 import org.zkoss.zul.Datebox;
 import org.zkoss.zul.Intbox;
+import org.zkoss.zul.Label;
 import org.zkoss.zul.SimpleTreeNode;
 import org.zkoss.zul.Textbox;
 import org.zkoss.zul.Treecell;
@@ -211,7 +212,10 @@ public class OrderElementTreeController extends GenericForwardComposer {
             // Construct treecells
             int[] path = getOrderElementTreeModel().getPath(t);
             String cssClass = "depth_"+path.length;
-            Treecell cellForName = new Treecell(pathAsString(path));
+            Treecell cellForName = new Treecell();
+            Label tasknumber = new Label(pathAsString(path));
+            tasknumber.setSclass("tasknumber");
+            cellForName.appendChild(tasknumber);
             cellForName.setSclass(cssClass);
             // It would be needed to expand the width for the numbers
             // to make it ready for 2 and 3 digit numbers
diff --git a/navalplanner-webapp/src/main/webapp/common/css/navalpro_zk.css b/navalplanner-webapp/src/main/webapp/common/css/navalpro_zk.css
index d36ceb02a..337848ea8 100644
--- a/navalplanner-webapp/src/main/webapp/common/css/navalpro_zk.css
+++ b/navalplanner-webapp/src/main/webapp/common/css/navalpro_zk.css
@@ -1,77 +1,117 @@
-
 .logo {
-    background-image: url("../img/v3/blue_ga.jpg");
-    height:50px;
-    width:300px;
-    height:100px;
-    float:left;
-    clear:both;
-    position:absolute;
+	background-image: url("../img/v3/blue_ga.jpg");
+	height: 50px;
+	width: 300px;
+	height: 100px;
+	float: left;
+	clear: both;
+	position: absolute;
 }
 
-.vision {
-}
-
-.headings {
-    /* height:90px; */
-    height:90px;
+.headings { /* height:90px; */
+	height: 90px;
 }
 
 table {
-    margin:0px;
-    padding:0px;
-    border:0px;
+	margin: 0px;
+	padding: 0px;
+	border: 0px;
 }
 
 .errorbox {
-    margin: 40px;
-    padding: 40px;
-    border: solid 1px red;
+	margin: 40px;
+	padding: 40px;
+	border: solid 1px red;
 }
 
 /* Forms */
-.z-button-tl, .z-button-tm, z-button-tr,
-.z-button-cl, .z-button-cr,
-.z-button-bl, .z-button-bm, z-button-br {
-    display:none;
+.z-button-tl,.z-button-tm,z-button-tr,.z-button-cl,.z-button-cr,.z-button-bl,.z-button-bm,z-button-br
+	{
+	display: none;
 }
 
-.zk .z-button-cm, .z-button-cm {
-    color:#007bbe;
-    background-color: #FFFFFF;
-    background-image: none;
-    border: 2px solid #007bbe;
+.zk .z-button-cm,.z-button-cm {
+	color: #007bbe;
+	background-color: #FFFFFF;
+	background-image: none;
+	border: 2px solid #007bbe;
 }
 
-.zk .z-button, .zk .z-button-br, .zk .z-button-tr {
-    background-image: none;
+.zk .z-button,.zk .z-button-br,.zk .z-button-tr {
+	background-image: none;
 }
 
 .z-button-tr {
-    background-image: none !important;
+	background-image: none !important;
 }
 
 .z-button-br {
-    background-image: none !important;
+	background-image: none !important;
 }
 
 .footer {
-    clear:both;
-    margin:20px;
-    font-size: 12px;
+	clear: both;
+	margin: 20px;
+	font-size: 12px;
 }
 
+/* ------------- order element tree  -------------  */
+.orderTree input {
+	height: 18px;
+	border-bottom: 0px;
+	font-size: 12px;
+}
 
-/* Styles for order element tree */
+/* Allows tasknumber span to have fixed width */
+.orderTree .tasknumber {
+	display: inline-block;
+}
+
+/* These constants may be reviewed when testing with 3 digit tasknumbers */
 .orderTree .depth_1 input {
-    width: 450px !important;
+	width: 470px !important;
 }
+
 .orderTree .depth_2 input {
-    width: 420px !important;
+	width: 440px !important; /* prev - 30 px */
 }
+
 .orderTree .depth_3 input {
-    width: 390px !important;
+	width: 410px !important; /* prev - 30 px */
 }
+
 .orderTree .depth_4 input {
-    width: 360px !important;
+	width: 380px !important; /* prev - 30 px */
 }
+
+.orderTree .depth_5 input {
+	width: 350px !important; /* prev - 30 px */
+}
+
+.orderTree .depth_6 input {
+	width: 320px !important; /* prev - 30 px */
+}
+
+.orderTree .depth_1 .tasknumber {
+	width: 25px;
+}
+
+.orderTree .depth_2 .tasknumber {
+	width: 37px; /* prev + 12 px */
+}
+
+.orderTree .depth_3 .tasknumber {
+	width: 49px; /* prev + 12 px */
+}
+
+.orderTree .depth_4 .tasknumber {
+	width: 61px; /* prev + 12 px */
+}
+
+.orderTree .depth_5 .tasknumber {
+	width: 73px; /* prev + 12 px */
+}
+
+.orderTree .depth_6 .tasknumber {
+	width: 85px; /* prev + 12 px */
+}
\ No newline at end of file
diff --git a/navalplanner-webapp/src/main/webapp/orders/_editOrderElement.zul b/navalplanner-webapp/src/main/webapp/orders/_editOrderElement.zul
index 932cf148d..959336cc5 100644
--- a/navalplanner-webapp/src/main/webapp/orders/_editOrderElement.zul
+++ b/navalplanner-webapp/src/main/webapp/orders/_editOrderElement.zul
@@ -1,4 +1,4 @@
-<popup id="${arg.top_id}" width="400px" height="300px" left="100px" top="100px">
+<popup id="${arg.top_id}" width="600px" left="100px" top="100px">
 
     <vbox>