diff --git a/ui/new/css/main.css b/ui/new/css/main.css
index b3b9ce4ffb6..2b2bd52aeba 100644
--- a/ui/new/css/main.css
+++ b/ui/new/css/main.css
@@ -3222,3 +3222,218 @@ a:hover.search_button {
 	padding:0;
 }
 
+
+
+
+/* 2010-10-10 */
+
+.adding_loading {
+	width:100%;
+	float:left;
+	margin:0;
+	padding:0;
+	background: #e7f7fc repeat-x top left;
+	border-bottom:1px solid #e8e8e8;	
+}
+
+.adding_animation {
+	width:16px;
+	height:16px;
+	margin:3px 0 0 10px;
+	float:left;
+	display:inline;
+	background:url(../images/ajax-loader.gif) no-repeat top left;
+}
+
+.adding_text {
+	width:auto;
+	height:auto;
+	float:left;
+	margin:8px 0 0 10px;
+	display:inline;
+	color:#333;
+	font-size:11px;
+	font-weight:bold;
+}
+
+
+/* zonetree (begin) */
+
+.zonetree_contentbox {
+	width:530px;
+	height:590px;
+	float:left;
+	margin:15px 0 0 0;
+	overflow-x:hidden;
+	overflow-y:scroll;
+	overflow-y:auto;
+}
+
+.zonetree_contentbox p {
+	width:auto;
+	height:auto;
+	float:left;
+	text-align:left;
+	margin:5px 0 0 10px;
+	padding:0;
+	font-size:12px;
+	font-weight:bold;
+}
+
+.zonetree_addbox {
+	width:510px;
+	height:25px;
+	float:left;
+	margin:0 0 5px 0;
+	padding:0;
+}
+
+
+
+.zonetree_addicon {
+	width:16px;
+	height:16px;
+	float:left;
+	background:url(../images/zone_addicon.png) no-repeat top left;
+	margin:5px 0 0 5px;
+	padding:0;
+}
+
+.tree_minusicon {
+	width:18px;
+	height:16px;
+	float:left;
+	background:url(../images/tree_minusopen_icon.png) no-repeat top left;
+	margin:5px 5px 0 0;
+	padding:0;
+}
+
+
+
+.zonetree_firstlevel {
+	width:510px;
+	height:25px;
+	float:left;
+	margin:0 0 5px 0;
+	padding:0;
+}
+
+.zonetree_firstlevel_selected {
+	width:510px;
+	height:25px;
+	float:left;
+	margin:0 0 5px 0;
+	background:#eaf3f5 repeat top left;
+	padding:0;
+}
+
+.zonetree_secondlevel {
+	width:455px;
+	height:25px;
+	float:left;
+	margin:0 0 5px 55px;
+	display:inline;
+	padding:0;
+}
+
+.zonetree_secondlevel_selected {
+	width:475px;
+	height:25px;
+	float:left;
+	margin:0 0 5px 55px;
+	background:#eaf3f5 repeat top left;
+	padding:0;
+}
+
+.zonetree_thirdlevel {
+	width:400px;
+	height:25px;
+	float:left;
+	margin:0 0 5px 110px;
+	display:inline;
+	padding:0;
+}
+
+.zonetree_thirdlevel_selected {
+	width:400px;
+	height:25px;
+	float:left;
+	margin:0 0 5px 110px;
+	background:#eaf3f5 repeat top left;
+	padding:0;
+}
+
+.zonetree_closedarrows {
+	width:12px;
+	height:14px;
+	background:url(../images/zone_sidearrow.png) no-repeat top left;
+	float:left;
+	margin:5px 5px 0 8px;
+	display:inline;
+	padding:0;
+	cursor:pointer;
+	cursor:hand;
+}
+
+.zonetree_openarrows {
+	width:12px;
+	height:14px;
+	background:url(../images/zone_openarrow.png) no-repeat top left;
+	float:left;
+	margin:10px 5px 0 8px;
+	display:inline;
+	padding:0;
+	cursor:pointer;
+	cursor:hand;
+}
+
+.zonetree_zoneicon {
+	width:18px;
+	height:18px;
+	float:left;
+	background:url(../images/zone_zoneicon.png) no-repeat top left;
+	font-weight:bold;
+	margin:3px 0 0 5px;
+	padding:0;
+}
+
+.zonetree_podicon {
+	width:22px;
+	height:18px;
+	float:left;
+	background:url(../images/zone_podicon.png) no-repeat top left;
+	font-weight:bold;
+	margin:3px 0 0 5px;
+	padding:0;
+}
+
+
+.zonetree_links {
+	width:auto;
+	height:auto;
+	float:left;
+	color:#2c8bbc;
+	text-decoration:none;
+	font-size:12px;
+	text-align:left;
+	margin:5px 0 0 10px;
+	display:inline;
+	padding:0;
+	cursor:pointer;
+	cursor:hand;
+}
+.zonetree_links:hover {
+	width:auto;
+	height:auto;
+	float:left;
+	color:#333;
+	text-decoration:underline;
+	font-size:12px;
+	text-align:left;
+	margin:5px 0 0 10px;
+	padding:0;
+	cursor:pointer;
+	cursor:hand;
+}
+/* zonetree (begin) */
+
diff --git a/ui/new/images/ajax-loader.gif b/ui/new/images/ajax-loader.gif
new file mode 100644
index 00000000000..5b33f7e54f4
Binary files /dev/null and b/ui/new/images/ajax-loader.gif differ
diff --git a/ui/new/images/tree_minusopen_icon.png b/ui/new/images/tree_minusopen_icon.png
new file mode 100644
index 00000000000..e5103e46f59
Binary files /dev/null and b/ui/new/images/tree_minusopen_icon.png differ
diff --git a/ui/new/images/zone_addicon.png b/ui/new/images/zone_addicon.png
new file mode 100644
index 00000000000..da0dadb7f4b
Binary files /dev/null and b/ui/new/images/zone_addicon.png differ
diff --git a/ui/new/images/zone_podicon.png b/ui/new/images/zone_podicon.png
new file mode 100644
index 00000000000..5f881f42095
Binary files /dev/null and b/ui/new/images/zone_podicon.png differ
diff --git a/ui/new/jsp/resource.jsp b/ui/new/jsp/resource.jsp
index 256fdddc9d3..21474aa19b1 100644
--- a/ui/new/jsp/resource.jsp
+++ b/ui/new/jsp/resource.jsp
@@ -266,4 +266,56 @@
         </div>
     </div> 
 </div>
-<!-- admin account tab template (end) -->
\ No newline at end of file
+<!-- admin account tab template (end) -->
+
+<!-- Zonetree Template (begin) -->
+<div class="zonetree_contentbox" id="zonetree" style="display:none">
+    <div class="zonetree_addbox">
+        <div class="zonetree_addicon">
+        </div>
+        <div class="zonetree_links" id="action_add_zone">
+            Add a Zone</div>
+    </div>
+    <div id="zones_container">
+    </div>
+</div>
+<!-- Zonetree Template (end) -->
+
+<!-- Zone Template (begin) -->
+<div id="zone_template" style="display:none">
+    <div class="adding_loading" style="height:25px;display:none" id="loading_container">
+	    <div class="adding_animation"></div>
+	    <div class="adding_text">Adding a zone &hellip; </div>
+    </div>
+    <div id="row_container">
+	    <div class="zonetree_firstlevel">
+		    <div class="zonetree_closedarrows" id="zone_expand"></div>
+		    <div class="zonetree_zoneicon"></div>
+		    <p>Zone:<div class="zonetree_links" id="zone_name">Zone 1</div></p>
+	    </div>
+	    <div id="zone_content" style="display:none">
+		    <div id="pods_container">
+		    </div>		  
+	    </div>
+	</div>
+</div>
+<!-- Zone Template (end) -->
+
+<!-- Pod Template (begin) -->
+<div id="pod_template" style="display:none">
+	<div class="adding_loading" style="height:25px;display:none" id="loading_container">
+	    <div class="adding_animation"></div>
+	    <div class="adding_text">Adding a pod &hellip; </div>
+    </div>
+    <div id="row_container">  
+	    <div class="zonetree_secondlevel">
+		    <div class="zonetree_podicon"></div>
+		    <p>Pod:<div class="zonetree_links" id="pod_name">Name of the Pod</div></p>
+	    </div>
+	    <div id="pod_content">
+	        <div id="directip_ranges_container">
+		    </div>
+	    </div>
+	</div>
+</div>
+<!-- Pod Template (end) -->
diff --git a/ui/new/scripts/cloud.core2.resource.js b/ui/new/scripts/cloud.core2.resource.js
index 40ae9b0e5d4..1d12b08600b 100644
--- a/ui/new/scripts/cloud.core2.resource.js
+++ b/ui/new/scripts/cloud.core2.resource.js
@@ -4,5 +4,61 @@ function afterLoadResourceJSP() {
     var tabContentArray = ["tab_content_details", "tab_content_network", "tab_content_secondary_storage"];
     switchBetweenDifferentTabs(tabArray, tabContentArray);       
     //***** switch between different tabs (end) **********************************************************************
-        
-}
\ No newline at end of file
+  
+    var forceLogout = true;  // We force a logout only if the user has first added a POD for the very first time   
+    $("#midmenu_container").append($("#zonetree").clone().attr("id", "zonetree1").show());
+    
+     $.ajax({
+	  data: createURL("command=listZones&available=true&response=json"+maxPageSize),
+		dataType: "json",
+		success: function(json) {
+			var zones = json.listzonesresponse.zone;
+			var grid = $("#zonetree1 #zones_container").empty();
+			if (zones != null && zones.length > 0) {					    
+				for (var i = 0; i < zones.length; i++) {
+					var template = $("#zone_template").clone(true).attr("id", "zone_"+zones[i].id);
+					zoneJSONToTemplate(zones[i], template);
+					grid.append(template.show());
+				}
+			}
+		}
+	});  
+
+    function zoneJSONToTemplate(json, template) {
+        var zoneid = json.id;
+	    template.data("id", zoneid).data("name", fromdb(json.name));
+	    template.find("#zone_name")
+		    .text(fromdb(json.name))
+		    .data("id", zoneid)
+		    .data("name", fromdb(json.name))
+		    .data("dns1", json.dns1)
+		    .data("internaldns1", json.internaldns1)
+		    .data("guestcidraddress", json.guestcidraddress);		
+	    if (json.dns2 != null) 
+		    template.find("#zone_name").data("dns2", json.dns2);	
+	    if (json.internaldns2 != null) 
+		    template.find("#zone_name").data("internaldns2", json.internaldns2);	
+	    if (json.vlan != null) 
+		    template.find("#zone_name").data("vlan", json.vlan);		
+    	
+	    $.ajax({
+	      data: createURL("command=listPods&zoneid="+zoneid+"&response=json"),
+		    dataType: "json",
+		    success: function(json) {
+			    var pods = json.listpodsresponse.pod;
+			    var grid = template.find("#pods_container").empty();
+			    if (pods != null && pods.length > 0) {					    
+				    for (var i = 0; i < pods.length; i++) {
+					    var podTemplate = $("#pod_template").clone(true).attr("id", "pod_"+pods[i].id);
+					    podJSONToTemplate(pods[i], podTemplate);
+					    grid.append(podTemplate.show());
+					    forceLogout = false;
+				    }
+			    }
+		    }
+	    });
+    }
+
+    function podJSONToTemplate(json, template) {}
+}
+