diff --git a/ganttzk/src/main/java/org/zkoss/ganttz/timetracker/TimeTrackerComponent.java b/ganttzk/src/main/java/org/zkoss/ganttz/timetracker/TimeTrackerComponent.java
index 79b84941d..202535b98 100644
--- a/ganttzk/src/main/java/org/zkoss/ganttz/timetracker/TimeTrackerComponent.java
+++ b/ganttzk/src/main/java/org/zkoss/ganttz/timetracker/TimeTrackerComponent.java
@@ -8,6 +8,8 @@ import org.zkoss.ganttz.util.zoom.ZoomLevel;
 import org.zkoss.zk.au.AuRequest;
 import org.zkoss.zk.au.Command;
 import org.zkoss.zk.au.ComponentCommand;
+import org.zkoss.zk.ui.Component;
+import org.zkoss.zk.ui.Executions;
 import org.zkoss.zk.ui.HtmlMacroComponent;
 
 /**
@@ -17,8 +19,15 @@ public abstract class TimeTrackerComponent extends HtmlMacroComponent {
 
     private final TimeTracker timeTracker;
     private IZoomLevelChangedListener zoomListener;
+    private final String secondLevelZul;
 
     public TimeTrackerComponent(TimeTracker timeTracker) {
+        this(timeTracker, "~./ganttz/zul/timetrackersecondlevel.zul");
+    }
+
+    protected TimeTrackerComponent(TimeTracker timeTracker,
+            String secondLevelZul) {
+        this.secondLevelZul = secondLevelZul;
         this.timeTracker = timeTracker;
         zoomListener = new IZoomLevelChangedListener() {
 
@@ -30,6 +39,18 @@ public abstract class TimeTrackerComponent extends HtmlMacroComponent {
         this.timeTracker.addZoomListener(zoomListener);
     }
 
+    @Override
+    public void afterCompose() {
+        super.afterCompose();
+        Component fellow = getFellow("firstleveldetails");
+        addSecondLevels(fellow.getParent());
+    }
+
+    private void addSecondLevels(Component parent) {
+        Executions.getCurrent().createComponents(secondLevelZul, parent,
+                getAttributes());
+    }
+
     public ZoomLevel getZoomLevel() {
         return this.getTimeTracker().getDetailLevel();
     }
diff --git a/ganttzk/src/main/resources/web/ganttz/zul/timetracker/timetracker.zul b/ganttzk/src/main/resources/web/ganttz/zul/timetracker/timetracker.zul
index 30d347d24..cb7cf6940 100644
--- a/ganttzk/src/main/resources/web/ganttz/zul/timetracker/timetracker.zul
+++ b/ganttzk/src/main/resources/web/ganttz/zul/timetracker/timetracker.zul
@@ -39,42 +39,13 @@ function onDecrease(timetracker) {
             </hbox>
         </n:div>
 
-        <grid>
+        <grid id="firstleveldetails">
             <columns>
                 <column label="${each.name}" width="${each.size}px"
                     forEach="${top.detailsFirstLevel}"></column>
             </columns>
         </grid>
 
-        <n:div class="z-grid-header">
-            <n:table style="width: ${top.horizontalSize+2}px;" class="second_level_">
-
-                <n:tr class="z-columns">
-                    <n:th class="z-column" forEach="${top.detailsSecondLevel}"
-                    style="width: ${each.size}px">
-                    ${each.name}
-                    </n:th>
-                </n:tr>
-                <n:tr id="watermark" style="height:100px">
-                    <n:td class="timetracker_column${((each.even and (top.zoomLevel != 'DETAIL_FOUR'))?'_even':'')}
-                        ${(each.bankHoliday?'bankHoliday':'')}
-                        ${(each.currentPeriod?'timetracker_column_today':'')}"
-                        forEach="${top.detailsSecondLevel}"
-                        style="background-position: ${each.currentDayOffset}px">
-
-                        <n:table class="week_element" width="100%" height="100%" if="${top.zoomLevel == 'DETAIL_FOUR'}">
-                        <n:tr>
-                            <n:td/><n:td/><n:td/><n:td/><n:td/>
-                            <n:td class="weekend" />
-                            <n:td class="weekend" />
-                        </n:tr>
-                      </n:table>
-
-                    </n:td>
-                </n:tr>
-            </n:table>
-        </n:div>
-
     </vbox>
 
 </n:div>
diff --git a/ganttzk/src/main/resources/web/ganttz/zul/timetrackersecondlevel.zul b/ganttzk/src/main/resources/web/ganttz/zul/timetrackersecondlevel.zul
new file mode 100644
index 000000000..641049252
--- /dev/null
+++ b/ganttzk/src/main/resources/web/ganttz/zul/timetrackersecondlevel.zul
@@ -0,0 +1,30 @@
+<zk xmlns:n="http://www.zkoss.org/2005/zk/native">
+    <n:div class="z-grid-header">
+        <n:table style="width: ${top.horizontalSize+2}px;" class="second_level_">
+
+            <n:tr class="z-columns">
+                <n:th class="z-column" forEach="${top.detailsSecondLevel}"
+                style="width: ${each.size}px">
+                ${each.name}
+                </n:th>
+            </n:tr>
+            <n:tr id="watermark" style="height:100px">
+                <n:td class="timetracker_column${((each.even and (top.zoomLevel != 'DETAIL_FOUR'))?'_even':'')}
+                    ${(each.bankHoliday?'bankHoliday':'')}
+                    ${(each.currentPeriod?'timetracker_column_today':'')}"
+                    forEach="${top.detailsSecondLevel}"
+                    style="background-position: ${each.currentDayOffset}px">
+
+                    <n:table class="week_element" width="100%" height="100%" if="${top.zoomLevel == 'DETAIL_FOUR'}">
+                    <n:tr>
+                        <n:td/><n:td/><n:td/><n:td/><n:td/>
+                        <n:td class="weekend" />
+                        <n:td class="weekend" />
+                    </n:tr>
+                  </n:table>
+
+                </n:td>
+            </n:tr>
+        </n:table>
+    </n:div>
+</zk>
\ No newline at end of file