diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 0000000..77a5b78
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8" />
+	<title>{% block title %}{{title}}{% endblock %}</title>
+	<link rel="stylesheet" type="text/css" href="{%block css %}styles.css{%endblock%}">
+	{% block scripts %}
+	<script src="jquery.js"></script>
+	<script src="jquery.tablesorter.js"></script>
+	<script src="script.js"></script>
+	{% endblock scripts %}
+</head>
+<body>
+{% block header %}<h1>{{title}}</h1>{% endblock %}
+{% block namefilter %}
+<div id="namefilter">
+<input type="text" id="namefilterinput" placeholder="name filter" autofocus >
+</div>
+<script>
+
+var namefilter = (function (opts) {
+	var timeout_id = null,
+		filter_value = '',
+		delay = (opts && opts.delay) || 1000;
+	function update() {
+		// console.log("update", filter_value);
+		var pat = new RegExp(filter_value, "i");
+		$("tbody tr").each(function () {
+			var n = $(".pad_name", this).text();
+			// console.log("n", n);
+			if (filter_value == "" || n.match(pat) !== null) {
+				$(this).show();
+			} else {
+				$(this).hide();
+			}
+		})
+	}
+	var ret = function (val) {
+		filter_value = val;
+		if (timeout_id !== null) {
+			window.clearTimeout(timeout_id);
+			timeout_id = null;
+		}
+		timeout_id = window.setTimeout(update, delay)
+	}
+	return ret;
+})();
+
+$("#namefilterinput").on("keyup", function (e) { namefilter($(this).val()); })
+
+</script>
+{% endblock %}
+
+<table class="listing">
+<thead>
+<tr>
+	<th>link</th>
+	<th>pad name</th>
+	<th>group</th>
+	<th>last edited</th>
+	<th>size</th>
+</tr>
+</thead>
+<tbody>
+{% for pad in pads %}
+<tr>
+	<td class="pad_url"><a class="edit" href="{{ pad.url }}">edit</a></td>
+	<td class="pad_name"><a href="{{ pad.html_path }}">{{ pad.pad_name }}</a></td>
+	<td class="pad_group">{{ pad.group_id }}</td>
+	<td class="pad_last_edited">{{ pad.last_edited }}</td>
+	<td class="pad_size">{{ pad.text_length_human }}</td>
+</tr>
+{% endfor %}
+</tbody>
+</table>
+</body>
+</html>
diff --git a/templates/pad.html b/templates/pad.html
new file mode 100644
index 0000000..41385f0
--- /dev/null
+++ b/templates/pad.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8" />
+	<title>{{title}}</title>
+	<link rel="edit" href="{{ editurl }}" />
+	<link rel="source" href="{{ sourceurl }}" />
+	<link rel="stylesheet" type="text/css" href="../styles.css" />
+	<script src ="../page.js"></script>
+	<script>
+		var padmeta = {{ metadata_json }};
+	</script>
+</head>
+<body>
+{{body}}
+</body>
+</html>
