diff --git a/mixtape.tmpl b/mixtape.tmpl
new file mode 100644
index 0000000..415a234
--- /dev/null
+++ b/mixtape.tmpl
@@ -0,0 +1,27 @@
+{{define "mixtape"}}
+<html>
+	<head>
+		<title>Mixtape</title>
+		<style type="text/css">
+			body {
+				font-size: 1.2em;
+				margin: 1em;
+			}
+			.active {
+				font-weight: bold;
+			}
+			#playlist {
+				list-style: none;
+				margin: 1em 0;
+				padding: 0;
+			}
+			#playlist li {
+				margin: 0.5em 0;
+			}
+		</style>
+	</head>
+	<body>
+		{{template "full-player" .Tracks}}
+	</body>
+</html>
+{{end}}
\ No newline at end of file
diff --git a/templates/parts.tmpl b/templates/parts.tmpl
new file mode 100644
index 0000000..d5a381d
--- /dev/null
+++ b/templates/parts.tmpl
@@ -0,0 +1,60 @@
+{{define "player"}}
+    {{with $x := index . 0}}
+    <audio id="player" preload="auto" tabindex="0" controls>
+        <source src="{{$x.Filename}}">
+    </audio>
+    {{end}}
+    <ol id="playlist">
+        {{range $i, $el := .}}
+        <li{{if eq $i 0}} class="active"{{end}}>
+            <a href="{{$el.Filename}}">{{$el.Artist}} - {{$el.Title}}</a>
+        </li>
+        {{end}}
+    </ol>
+{{end}}
+
+{{define "full-player"}}
+    {{template "player" .}}
+    {{template "playlist-js"}}
+{{end}}
+
+{{define "playlist-js"}}
+	<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
+	<script type="text/javascript">
+        $(document).ready(function() {
+            init();
+
+            function init() {
+                var current = 0;
+                var $audio = $('#player');
+                var $playlist = $('#playlist');
+                var $tracks = $playlist.find('li a');
+                var len = $tracks.length - 1;
+                $playlist.on('click', 'a', function (e) {
+                    e.preventDefault();
+                    link = $(this);
+                    current = link.parent().index();
+                    run(link, $audio[0]);
+                });
+                $audio[0].addEventListener('ended', function (e) {
+                    current++;
+                    if (current == len) {
+                        current = 0;
+                        link = $playlist.find('a')[0];
+                    } else {
+                        link = $playlist.find('a')[current];
+                    }
+                    run($(link), $audio[0]);
+                });
+            }
+
+            function run($link, $player) {
+                $player.src = $link.attr('href');
+                par = $link.parent();
+                par.addClass('active').siblings().removeClass('active');
+                $player.load();
+                $player.play();
+            }
+        });
+	</script>
+{{end}}
\ No newline at end of file
