diff --git a/index.html b/index.html
index 1759506..0ebde55 100755
--- a/index.html
+++ b/index.html
@@ -24,13 +24,18 @@
 
   <script type="text/mustache" id="download_active_template">
 	  <div class="row download_active_item" data-gid="{{gid}}">
-		<div class="span5" style="overflow: hidden;">
+		<div class="span4" style="overflow: hidden;">
 			<h3>{{name}}</h3>
 		</div>
-		<div class="span4">
+		<div class="span6">
 			<span class="badge badge-success">Status: {{status}}</span>
+			<b style='display:inline; float:right;'>
+				Size: {{size}} |
+				Progress: {{percentage}}% |
+				down: {{down}}
+			</b>
 		</div>
-		<div class="span3">
+		<div class="span2">
 			<div style="float:right">
 				<button class="btn btn-mini download_pause"><i class="icon-pause"></i>Pause</button>
 				<button class="btn btn-mini btn-danger download_remove"><i class="icon-remove"></i> Remove</button>
@@ -38,19 +43,23 @@
 		</div>
 		<br><br>
 		<div class="span12 progress progress-striped">
-			<div class="bar" style="width: {{percentage}}%"></div>
+			<div class="bar" style="width: {{percentage}}%;"></div>
 		</div>
 	</div>
   </script>
   <script type="text/mustache" id="download_waiting_template">
 	  <div class="row download_waiting_item" data-gid="{{gid}}">
-		<div class="span5" style="overflow: hidden;">
+		<div class="span4" style="overflow: hidden;">
 			<h3>{{name}}</h3>
 		</div>
-		<div class="span4">
-			<span class="badge badge-info">Status: {{status}}</span>
+		<div class="span6">
+			<span class="badge badge-warning">Status: {{status}}</span>
+			<b style='display:inline; float:right;'>
+				Size: {{size}} |
+				Progress: {{percentage}}%
+			</b>
 		</div>
-		<div class="span3">
+		<div class="span2">
 			<div style="float:right">
 				<button class="btn btn-mini download_play"><i class="icon-play"></i> Play</button>
 				<button class="btn btn-mini btn-danger download_remove"><i class="icon-remove"></i> Remove</button>
@@ -58,19 +67,23 @@
 		</div>
 		<br><br>
 		<div class="span12 progress progress-striped">
-			<div class="bar" style="width: {{percentage}}%"></div>
+			<div class="bar" style="width: {{percentage}}%; background-color:#FBB450"></div>
 		</div>
 	</div>
   </script>
   <script type="text/mustache" id="download_stopped_template">
 	  <div class="row download_stopped_item" data-gid="{{gid}}">
-		<div class="span5" style="overflow: hidden;">
+		<div class="span4" style="overflow: hidden;">
 			<h3>{{name}}</h3>
 		</div>
-		<div class="span4">
+		<div class="span6">
 			<span class="badge badge-important">Status: {{status}}</span>
+			<b style='display:inline; float:right;'>
+				Size: {{size}} |
+				Progress: {{percentage}}%
+			</b>
 		</div>
-		<div class="span3">
+		<div class="span2">
 			<div style="float:right">
 				<button class="btn btn-mini download_restart"><i class="icon-repeat"></i> Restart</button>
 				<button class="btn btn-mini btn-danger download_remove"><i class="icon-fire"></i> Purge</button>
@@ -78,7 +91,7 @@
 		</div>
 		<br><br>
 		<div class="span12 progress progress-striped">
-			<div class="bar" style="width: {{percentage}}%"></div>
+			<div class="bar" style="width: {{percentage}}%; background-color:#EE5F5B"></div>
 		</div>
 	</div>
   </script>
diff --git a/js/script.js b/js/script.js
index 420124d..47ce203 100755
--- a/js/script.js
+++ b/js/script.js
@@ -83,6 +83,13 @@ var d_files = {
 	waiting: [],
 	stopped: []
 };
+function changeLength(len, pref) {
+	len = parseInt(len);
+	if(len <= 1000) return len  + " " + pref;
+	else if(len <= 1000000) return Math.round(len/1000 * 100)/100 + " k" + pref;
+	else if(len <= 1000000000) return Math.round(len/1000000 *100)/100 + " m" + pref;
+	else if(len <= 1000000000000) return Math.round(len/1000000000 *100)/100 + " g" + pref;
+}
 function updateActiveDownloads(data) {
 	var down_template = $('#download_active_template').text();
 	$('#active_downloads').html("");
@@ -96,7 +103,9 @@ function updateActiveDownloads(data) {
 			name: data[i].files[0].uris[0].uri.replace(/^.*[\\\/]/, ''),
 			status: data[i].status,
 			percentage:percentage,
-			gid: data[i].gid
+			gid: data[i].gid,
+			size: changeLength(data[i].totalLength, "b"),
+			down: changeLength(data[i].downloadSpeed, "b/s")
 		};
 		var item = Mustache.render(down_template, ctx);
 		$('#active_downloads').append(item);
@@ -143,7 +152,9 @@ function updateWaitingDownloads(data) {
 			name: data[i].files[0].uris[0].uri.replace(/^.*[\\\/]/, ''),
 			status: data[i].status,
 			percentage:percentage,
-			gid: data[i].gid
+			gid: data[i].gid,
+			size: changeLength(data[i].totalLength, "b"),
+			down: changeLength(data[i].downloadSpeed, "b/s")
 		};
 		var item = Mustache.render(down_template, ctx);
 		$('#waiting_downloads').append(item);
@@ -177,6 +188,7 @@ function updateWaitingDownloads(data) {
 		});
 	});
 }
+
 function updateStoppedDownloads(data) {
 	var down_template = $('#download_stopped_template').text();
 	$('#stopped_downloads').html("");
@@ -190,7 +202,9 @@ function updateStoppedDownloads(data) {
 			name: data[i].files[0].uris[0].uri.replace(/^.*[\\\/]/, ''),
 			status: data[i].status,
 			percentage:percentage,
-			gid: data[i].gid
+			gid: data[i].gid,
+			size: changeLength(data[i].totalLength, "b"),
+			down: changeLength(data[i].downloadSpeed, "b/s")
 		};
 		var item = Mustache.render(down_template, ctx);
 		$('#stopped_downloads').append(item);