diff --git a/index.html b/index.html
index 2427134..751a36b 100755
--- a/index.html
+++ b/index.html
@@ -22,6 +22,22 @@
   <script src="js/libs/bootstrap.js"></script>
   <script src="js/libs/mustache.js"></script>
 
+  <script type="text/mustache" id="download_item_template">
+	<div class="row download_item">
+		<div class="span8">
+			<h3>{{name}}</h3>
+		</div>
+		<div class="span4">
+			<button class="btn btn-mini"><i class="icon-pause"></i>Pause</button>
+			<button class="btn btn-mini btn-danger"><i class="icon-remove"></i> Delete</button>
+			<span class="label label-success">Status: {{status}} {{percentage}}%</span>
+		</div>
+		<br><br>
+		<div class="span12 progress progress-striped">
+			<div class="bar" style="width: {{percentage}}%"></div>
+		</div>
+	</div>
+  </script>
   <style>
 	body {
 		padding-top: 60px;
@@ -51,34 +67,12 @@
 </div>
 
 <div role="main" class="container">
-	<h2>Pending Downloads</h2>
-	<table id="d_table" class="table table-bordered">
-		<tr>
-			<th>Name</th>
-			<th>Progress</th>
-			<th>Size</th>
-			<th>Download Speed</th>
-		</tr>
-	</table>
+	<h2>Current Downloads</h2>
+	<!-- Download items here -->
 	<div id="downloads">
-		<h2>Current Downloads</h2>
-		<div class="download_item">
-			<div class="row">
-				<div class="span8">
-					<h3>Sample Download</h3>
-				</div>
-				<div class="span4">
-					<button class="btn btn-mini"><i class="icon-pause"></i>Pause</button>
-					<button class="btn btn-mini btn-danger"><i class="icon-remove"></i> Delete</button>
-					<span class="label label-success">Status: Downloading 43%</span>
-				</div>
-				<br><br>
-				<div class="span12 progress progress-striped active">
-					<div class="bar" style="width: 40%"></div>
-				</div>
-			</div>
-		</div>
+
 	</div>
+
 	<h3 id="console"></h3>
 	<footer>
 		intital footer!!
@@ -153,6 +147,7 @@
 					<label class="control-label" for="newDownload_url">Enter url for the Download:</label>
 					<div class="controls">
 						<input type="text" class="input-xlarge" id="newDownload_url" placeholder="http://example.com"/>
+						<span class="help-block">URI can be HTTP(S)/FTP/BitTorrent Magnet URI</span>
 					</div>
 				</div>
 			</fieldset>
diff --git a/js/base64.js b/js/base64.js
new file mode 100644
index 0000000..8b13789
--- /dev/null
+++ b/js/base64.js
@@ -0,0 +1 @@
+
diff --git a/js/plugins.js b/js/plugins.js
index 9809a96..d724244 100755
--- a/js/plugins.js
+++ b/js/plugins.js
@@ -6,5 +6,60 @@ window.log = function f(){ log.history = log.history || []; log.history.push(arg
 (function(a){function b(){}for(var c="assert,count,debug,dir,dirxml,error,exception,group,groupCollapsed,groupEnd,info,log,markTimeline,profile,profileEnd,time,timeEnd,trace,warn".split(","),d;!!(d=c.pop());){a[d]=a[d]||b;}})
 (function(){try{console.log();return window.console;}catch(a){return (window.console={});}}());
 
+var base64 = (function (obj) {
+  var a64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/',
+    a256 = {
+      indexOf: function (c) {
+        return c.charCodeAt(0);
+      },
+      charAt: String.fromCharCode
+    };
+
+  function code(s, discard, alpha, beta, w1, w2) {
+    s = String(s);
+    var b = 0, x = '', i, c, bs = 1, sb = 1, length = s.length, tmp;
+    for (i = 0; i < length || (!discard && sb > 1); i += 1) {
+      b *= w1;
+      bs *= w1;
+      if (i < length) {
+        c = alpha.indexOf(s.charAt(i));
+        if (c <= -1 || c >= w1) {
+          throw new RangeError();
+        }
+        sb *= w1;
+        b += c;
+      }
+      while (bs >= w2) {
+        bs /= w2;
+        if (sb > 1) {
+          tmp = b;
+          b %= bs;
+          x += beta.charAt((tmp - b) / bs);
+          sb /= w2;
+        }
+      }
+    }
+    return x;
+  }
+
+  obj.btoa = function (s) {
+    s = code(s, false, a256, a64, 256, 64);
+    return s + '===='.slice((s.length % 4) || 4);
+  };
+
+  obj.atob = function (s) {
+    var i;
+    s = String(s).split('=');
+    for (i = s.length - 1; i >= 0; i -= 1) {
+      if (s[i].length % 4 === 1) {
+        throw new RangeError();
+      }
+      s[i] = code(s[i], true, a64, a256, 64, 256);
+    }
+    return s.join('');
+  };
+
+  return obj;
+}({}));
 
 
diff --git a/js/script.js b/js/script.js
index 2851ef9..2df77be 100755
--- a/js/script.js
+++ b/js/script.js
@@ -4,6 +4,11 @@ var modals = {
 	newDownload_modal: undefined
 
 };
+var clear_dialogs = function() {
+	modals.err_connect = $('#error_connect').modal('hide');
+	modals.change_conf = $('#change_conf').modal('hide');
+	modals.newDownload_modal = $('#newDownload_modal').modal('hide');
+};
 var server_conf = {
 	host: 'localhost',
 	port: 6800
@@ -15,6 +20,7 @@ var custom_aria2_connect = function() {
 var update_server_conf = function() {
 	server_conf.host = $('#input_host').val();
 	server_conf.port = $('#input_port').val();
+	clear_dialogs();
 	update_ui();
 };
 var aria_syscall = function(conf) {
@@ -36,14 +42,10 @@ var aria_syscall = function(conf) {
 }
 var log = $('#console');
 var update_ui = function() {
-	modals.err_connect = $('#error_connect').modal('hide');
-	modals.change_conf = $('#change_conf').modal('hide');
-	modals.newDownload_modal = $('#newDownload_modal').modal('hide');
-	log.append('connecting!!!<br>');
+
 	aria_syscall({
 		func: 'getVersion',
 		sucess: function(data) {
-			log.append(JSON.stringify(data) + '<br>');
 			updateDownloads();
 		},
 		error: function() {
@@ -54,6 +56,7 @@ var update_ui = function() {
 };
 
 $(function() {
+	clear_dialogs();
 	update_ui();
 	$('#newDownload').click(function() {
 		modals.newDownload_modal.modal('show');
@@ -67,55 +70,50 @@ $(function() {
 	updateStopDownloads();
 }*/
 function newDownload() {
+
 	var url = $('#newDownload_url').val();
 	aria_syscall({
 		func: 'addUri',
-		params: [["google.com"]],
+		params: base64.btoa(JSON.stringify([[url]])),
 		sucess: function() {
+			clear_dialogs();
 			update_ui();
 		}
 	});
-	alert(url);
 }
 
 var d_files = [];
-function d_fill() {
-	for(var i = 0; i < 10; i++) {
-		addDownload({
-			name: 'final name:' + i,
-			gid: i,
-			status: 'active',
-			totalLength: (i + 15) * 20,
-			completedLength: (i + 15) * 19,
-			downloadSpeed: 200 + i
-		});
-	}
-}
-function addDownload(conf) {
-	d_files.push(conf);
 
-	var d_table = $('#d_table');
-	var down = $('<tr></tr>');
-	down.append($('<td></td>').text(conf.name));
-	down.append($('<td></td>').text(conf.completedLength));
-	down.append($('<td></td>').text(conf.totalLength));
-	down.append($('<td></td>').text(conf.downloadSpeed));
-	console.log(down.html());
-	down.appendTo(d_table);
-
-}
 function updateDownloads() {
 	aria_syscall({
 		func: 'tellActive',
 		sucess: function(data) {
-			log.append("download Active are:" + JSON.stringify(data) + '<br>');
+			var down_template = $('#download_item_template').text();
+			var results = data.result;
+			$('#downloads').html("");
+			for(var i = 0; i < results.length; i++) {
+				console.log('adding downloads!!!');
+				var percentage =(results[i].completedLength / results[i].totalLength)*100;
+				percentage = Math.round(percentage*1000)/1000;
+				ctx = {
+					name: results[i].files[0].path,
+					status: results[i].status,
+					percentage:percentage
+				};
+				var item = Mustache.render(down_template, ctx);
+				console.log(ctx);
+				console.log(results[i]);
+				$('#downloads').append(item);
+			}
+			if(results && results.length === 0) {
+				$('#downloads').append('no downloads!!!!');
+			}
 		},
 		error: function() {
 			modals.err_connect.modal('show');
 			log.append('error connecting!!<br>');
 		}
 	});
-	d_fill();
 }
 
 function updateWaiting() {
@@ -125,3 +123,4 @@ function updateWaiting() {
 function updateStopDownloads() {
 
 }
+setInterval(update_ui, 1000);