diff --git a/ui/jsp/template.jsp b/ui/jsp/template.jsp
index f41934da321..0bb291ee015 100644
--- a/ui/jsp/template.jsp
+++ b/ui/jsp/template.jsp
@@ -17,7 +17,8 @@ dictionary = {
 	'label.action.create.vm' : '<fmt:message key="label.action.create.vm"/>',
 	'label.action.create.vm.processing' : '<fmt:message key="label.action.create.vm.processing"/>',
 	'label.action.download.template' : '<fmt:message key="label.action.download.template"/>',
-	'message.download.template': '<fmt:message key="message.download.template"/>'
+	'message.download.template': '<fmt:message key="message.download.template"/>',
+	'label.download.progress' : '<fmt:message key="label.download.progress"/>'
 };	
 </script>
 
@@ -129,18 +130,8 @@ dictionary = {
 	                    <div class="row_celltitles" id="templatetype">
 	                    </div>                   
 	                </div>
-	            </div>	   	     
+	            </div>	         
 	            <div class="grid_rows odd">
-	                <div class="grid_row_cell" style="width: 20%;">
-	                    <div class="row_celltitles">
-	                        <fmt:message key="label.status"/>:</div>
-	                </div>
-	                <div class="grid_row_cell" style="width: 79%;">
-	                    <div class="row_celltitles" id="status">
-	                    </div>
-	                </div>
-	            </div>
-	            <div class="grid_rows even">
 	                <div class="grid_row_cell" style="width: 20%;">
 	                    <div class="row_celltitles">
 	                        <fmt:message key="label.size"/>:</div>
@@ -150,7 +141,7 @@ dictionary = {
 	                    </div>
 	                </div>
 	            </div>
-	            <div class="grid_rows odd">
+	            <div class="grid_rows even">
 	                <div class="grid_row_cell" style="width: 20%;">
 	                    <div class="row_celltitles">
 	                        <fmt:message key="label.password.enabled"/>:</div>
@@ -164,7 +155,7 @@ dictionary = {
 	                    </select>
 	                </div>
 	            </div>
-	            <div class="grid_rows even">
+	            <div class="grid_rows odd">
 	                <div class="grid_row_cell" style="width: 20%;">
 	                    <div class="row_celltitles">
 	                        <fmt:message key="label.public"/>:</div>
@@ -178,7 +169,7 @@ dictionary = {
 	                    </select>
 	                </div>
 	            </div>
-	            <div class="grid_rows odd">
+	            <div class="grid_rows even">
 	                <div class="grid_row_cell" style="width: 20%;">
 	                    <div class="row_celltitles">
 	                        <fmt:message key="label.featured"/>:</div>
@@ -192,7 +183,7 @@ dictionary = {
 	                    </select>
 	                </div>
 	            </div>
-	            <div class="grid_rows even">
+	            <div class="grid_rows odd">
 	                <div class="grid_row_cell" style="width: 20%;">
 	                    <div class="row_celltitles">
 	                        <fmt:message key="label.cross.zones"/>:</div>
@@ -202,7 +193,7 @@ dictionary = {
 	                    </div>
 	                </div>
 	            </div>
-	            <div class="grid_rows odd">
+	            <div class="grid_rows even">
 	                <div class="grid_row_cell" style="width: 20%;">
 	                    <div class="row_celltitles">
 	                        <fmt:message key="label.os.type"/>:</div>
@@ -214,7 +205,7 @@ dictionary = {
 	                    </select>
 	                </div>
 	            </div>		                  
-	            <div class="grid_rows even">
+	            <div class="grid_rows odd">
 	                <div class="grid_row_cell" style="width: 20%;">
 	                    <div class="row_celltitles">
 	                        <fmt:message key="label.account"/>:</div>
@@ -224,7 +215,7 @@ dictionary = {
 	                    </div>                   
 	                </div>
 	            </div>
-				<div class="grid_rows odd">
+				<div class="grid_rows even">
 					<div class="grid_row_cell" style="width: 20%;">
 						<div class="row_celltitles">
 							<fmt:message key="label.domain"/>:</div>
@@ -234,7 +225,7 @@ dictionary = {
 						</div>
 					</div>
 				</div>
-	            <div class="grid_rows even">
+	            <div class="grid_rows odd">
 	                <div class="grid_row_cell" style="width: 20%;">
 	                    <div class="row_celltitles">
 	                        <fmt:message key="label.created"/>:</div>
@@ -243,7 +234,27 @@ dictionary = {
 	                    <div class="row_celltitles" id="created">
 	                    </div>
 	                </div>
-	            </div>            
+	            </div>    
+	            
+	             <div class="grid_rows even">
+	                <div class="grid_row_cell" style="width: 20%;">
+	                    <div class="row_celltitles">
+	                        <fmt:message key="label.status"/>:</div>
+	                </div>
+	                <div class="grid_row_cell" style="width: 79%;">
+	                    <div class="row_celltitles" id="status">
+	                    </div>
+	                </div>
+	            </div>
+	            <div class="grid_rows odd" id="progressbar_container">
+	                <div class="grid_row_cell" style="width: 20%;">
+	                    <div class="row_celltitles">
+	                        <fmt:message key="label.download.progress"/>:</div>
+	                </div>
+	                <div class="grid_row_cell" style="width: 79%;">
+	                    <div id="progressbar"></div>
+	                </div>
+	            </div>        
 	        </div>
 	        <div class="grid_botactionpanel">
 	        	<div class="gridbot_buttons" id="save_button" style="display:none;"><fmt:message key="label.save"/></div>
diff --git a/ui/scripts/cloud.core.iso.js b/ui/scripts/cloud.core.iso.js
index 266d030f920..5ac75f32e9f 100644
--- a/ui/scripts/cloud.core.iso.js
+++ b/ui/scripts/cloud.core.iso.js
@@ -376,7 +376,7 @@ function isoJsonToDetailsTab() {
             2000,
             timerKey,
             function() {   
-                refreshStatusDownloadProgress(jsonObj, $thisTab, $midmenuItem1, timerKey);                                   	
+                isoRefreshStatusDownloadProgress(jsonObj, $thisTab, $midmenuItem1, timerKey);                                   	
             }
         )	     
 	}
@@ -467,7 +467,7 @@ function isoJsonToDetailsTab() {
     $thisTab.find("#tab_container").show();     
 }
 
-function refreshStatusDownloadProgress(oldJsonObj, $thisTab, $midmenuItem1, timerKey) {    
+function isoRefreshStatusDownloadProgress(oldJsonObj, $thisTab, $midmenuItem1, timerKey) {    
     var strCmd = "command=listIsos&isofilter=self&id="+oldJsonObj.id;
     if(oldJsonObj.zoneid != null)
         strCmd = strCmd + "&zoneid="+oldJsonObj.zoneid;    
diff --git a/ui/scripts/cloud.core.template.js b/ui/scripts/cloud.core.template.js
index 91d9a5d4c88..bd2be37bd49 100644
--- a/ui/scripts/cloud.core.template.js
+++ b/ui/scripts/cloud.core.template.js
@@ -350,11 +350,44 @@ function templateJsonToDetailsTab() {
     $thisTab.find("#hypervisor").text(fromdb(jsonObj.hypervisor));    
     $thisTab.find("#templatetype").text(fromdb(jsonObj.templatetype)); 
     
+    /*
     var status = "Ready";
 	if (jsonObj.isready == false) 
 		status = fromdb(jsonObj.status);	 
     setTemplateStateInRightPanel(status, $thisTab.find("#status"));
+    */
     
+    var timerKey = "templateDownloadProgress";	
+	$("body").stopTime(timerKey);	//stop timer on previously selected middle menu item in template page
+			
+	if(jsonObj.isready == true){
+	    setTemplateStateInRightPanel("Ready", $thisTab.find("#status"));
+	    $("#progressbar_container").hide();
+	}
+	else {
+	    $("#progressbar_container").show();	    
+	    
+	    setTemplateStateInRightPanel(fromdb(jsonObj.status), $thisTab.find("#status"));
+        var progressBarValue = 0;
+        if(jsonObj.status != null && jsonObj.status.indexOf("%") != -1) {      //e.g. jsonObj.status == "95% Downloaded" 	    
+            var s = jsonObj.status.substring(0, jsonObj.status.indexOf("%"));  //e.g. s	== "95"
+            if(isNaN(s) == false) {	        
+                progressBarValue = parseInt(s);	//e.g. progressBarValue	== 95   
+            } 
+        }
+        $("#progressbar").progressbar({
+            value: progressBarValue             //e.g. progressBarValue	== 95  
+        });	 
+	   	        
+        $("body").everyTime(
+            2000,
+            timerKey,
+            function() {   
+                templateRefreshStatusDownloadProgress(jsonObj, $thisTab, $midmenuItem1, timerKey);                                   	
+            }
+        )	     
+	}
+        
     if(jsonObj.size != null)
 	    $thisTab.find("#size").text(convertBytes(parseInt(jsonObj.size))); 
 	else
@@ -428,6 +461,43 @@ function templateJsonToDetailsTab() {
     $thisTab.find("#tab_container").show();      
 }
 
+function templateRefreshStatusDownloadProgress(oldJsonObj, $thisTab, $midmenuItem1, timerKey) {   
+    var strCmd = "command=listTemplates&templatefilter=self&id="+oldJsonObj.id;
+    
+    if(oldJsonObj.zoneid != null)
+        strCmd = strCmd +"&zoneid="+oldJsonObj.zoneid;     
+    $.ajax({
+        data: createURL(strCmd),
+        dataType: "json",        
+        success: function(json) { 
+            var items = json.listtemplatesresponse.template;
+            if(items != null && items.length > 0) {
+                var jsonObj = items[0];
+                $midmenuItem1.data("jsonObj", jsonObj);    
+                
+                if(jsonObj.isready == true) {
+                    setTemplateStateInRightPanel("Ready", $thisTab.find("#status"));
+                    $("#progressbar_container").hide();
+                    $("body").stopTime(timerKey);   
+                }
+                else {
+                    setTemplateStateInRightPanel(fromdb(jsonObj.status), $thisTab.find("#status"));
+                    var progressBarValue = 0;
+                    if(jsonObj.status != null && jsonObj.status.indexOf("%") != -1) {      //e.g. jsonObj.status == "95% Downloaded" 	    
+                        var s = jsonObj.status.substring(0, jsonObj.status.indexOf("%"));  //e.g. s	== "95"
+                        if(isNaN(s) == false) {	        
+                            progressBarValue = parseInt(s);	//e.g. progressBarValue	== 95   
+                        } 
+                    }
+                    $("#progressbar").progressbar({
+                        value: progressBarValue             //e.g. progressBarValue	== 95  
+                    });	 
+                }   
+            }            
+        }    
+    });      
+}
+
 //setIconByOsType() is shared by template page and ISO page
 function setIconByOsType(osType, $field) {
 	if (osType == null || osType.length == 0)