diff --git a/website/templates/html/transactions.html b/website/templates/html/transactions.html
new file mode 100644
index 0000000..1e61124
--- /dev/null
+++ b/website/templates/html/transactions.html
@@ -0,0 +1,59 @@
+{% extends "app/website/templates/html/page.html" %}
+
+{% block content -%}
+<div class="col-md-12">
+    <ul class="breadcrumb">
+    	<li><a href="index">Home</a></li>
+    	<li><a href="account">My Account</a></li>
+    	<li class="active"><i class="{{ icon }} icon-fixed-width"></i> {{ title }}</li>
+    </ul>
+	<div class="list-group transaction-list">
+		<div class="progress progress-striped active">
+			<div class="progress-bar progress-bar-info" style="width: 100%;"></div>
+		</div>
+	</div>
+	<div class="text-center">
+		<button class="btn btn-default btn-show-more hide">More</button>
+	</div>
+</div>
+{%- endblock %}
+
+{% block javascript -%}
+$(document).ready(function() {
+	window.start = 0;
+	window.$list = $(".transaction-list");
+	window.$show_more = $(".btn-show-more").on("click", function() { get_transactions(this); })
+	
+	get_transactions();
+});
+
+var get_transactions = function(btn) {
+	wn.call({
+		method: "{{ method }}",
+		args: { start: start },
+		btn: btn,
+		callback: function(r) {
+			$list.find(".progress").remove();
+			$show_more.toggleClass("hide", !(r.message && r.message.length===20));
+		
+			if(!(r.message && r.message.length)) {
+				console.log("empty");
+				if(!$list.html().trim()) {
+					$list.html("<div class='alert alert-warning'>\
+						{{ empty_list_message }}</div>");
+				}
+				return;
+			}
+		
+			start += r.message.length;
+		
+			$.each(r.message, function(i, doc) {
+				render(doc);
+			});
+		}
+	})
+};
+
+// var render = function(doc) { };
+
+{% endblock %}
\ No newline at end of file