diff --git a/Moo/play/templates/alpha-buttons.html b/Moo/play/templates/alpha-buttons.html
new file mode 100644
index 0000000..338eeab
--- /dev/null
+++ b/Moo/play/templates/alpha-buttons.html
@@ -0,0 +1,13 @@
+<p>
+
+  {% for letter in alpha | sort %}
+
+  {% if request.path == "/alpha/" + letter %}
+  <b>{{ letter }}</b>
+  {% else %}
+  <a href="/alpha/{{ letter }}">{{ letter }}</a>
+  {% endif %}
+
+  {% endfor %}
+
+</p>
diff --git a/Moo/play/templates/audio-controls.html b/Moo/play/templates/audio-controls.html
new file mode 100644
index 0000000..b84bb44
--- /dev/null
+++ b/Moo/play/templates/audio-controls.html
@@ -0,0 +1,7 @@
+{% if request.path.startswith('/track') %}
+{% set autoplay = 'autoplay' %}
+{% endif %}
+
+<audio controls {{ autoplay }}>
+  <source src="{{ track.src }}" type="{{ track.type }}"/>
+</audio>
diff --git a/Moo/play/templates/audio-table.html b/Moo/play/templates/audio-table.html
new file mode 100644
index 0000000..64c0d4e
--- /dev/null
+++ b/Moo/play/templates/audio-table.html
@@ -0,0 +1,75 @@
+<div id="audio-table" class="bg-white">
+
+  <table id="album">
+
+    <tr>
+      <td id="track-title" class="clr-a">
+        {{ track.title }}
+      </td>
+    </tr>
+
+    {% set artist = track.artist or track.album_artist or "None" %}
+
+    {% if (artist | length + track.album | length) < 32 %}
+    {% set dash = True %}                                                     
+    {% endif %}                                                     
+
+    {% if artist | length > 32 %}
+    {% set artist = artist.split(';')[0].split(',')[0] %}
+    {% endif %}
+
+    <tr>
+      <td>
+        <a id="track-artist"
+           class="clr-b sans-serif"
+           href="/artist/{{ artist }}"
+           target="_blank">{{ artist  }}</a>
+      </td>
+    </tr>
+
+    {% set album = track.album or "<small>ALBUM</small>" | safe %}
+    
+    <tr>
+      <td id="track-album">
+        <i>
+          <a class="clr-c"
+             href="/album{{ slash }}{{ alkey | urlencode }}"
+             >{{ album }}</a></i>
+      </td>
+    </tr>
+    
+    <tr>
+      <td>
+        {% include "audio-controls.html" %}
+      </td>
+    </tr>
+
+    <tr>
+      <td>
+        <a href="/"
+           class="emoji"
+           target="_blank">{{ emoji.app | safe }}</a>
+
+        <a href="#" 
+           class="emoji hr-75"
+           onclick="gotoPrev()">{{ emoji.prev | safe }}</a>
+
+        <span 
+           id="track-number"
+           class="emoji clr-c">
+          {%- if track.disc %}{{ track.disc }}.{% endif -%}
+          {{ "{:02d}".format(track.track | int) }}</span>
+
+        <a href="#" 
+           class="emoji hr-75"
+           onclick="gotoNext()">{{ emoji.next | safe }}</a>
+
+        <a href="/random"
+           class="emoji">{{ emoji.random | safe }}</a>
+
+      </td>
+    </tr>
+
+  </table>
+
+</div>
diff --git a/Moo/play/templates/covers-heading.html b/Moo/play/templates/covers-heading.html
new file mode 100644
index 0000000..2ab88d1
--- /dev/null
+++ b/Moo/play/templates/covers-heading.html
@@ -0,0 +1,17 @@
+{% if request.path != '/' %}
+{% set arg = request.path.split('/')[-1] %}
+{% endif %}
+
+<p id="covers-heading">
+  <span class="box">
+    <span>{{ "{:,}".format(albums | length) }}</span>
+    {% if arg %}<b style="margin: 0 4px">{{ arg }}</b>{% endif %}
+    <span>albums</span>
+  </span>
+</p>
+
+<link rel="stylesheet" type="text/css" href="/static/counts.css"></link>
+
+{% for counter in counts %}
+{% include "counter.html" %}
+{% endfor %}
diff --git a/Moo/play/templates/emoji-buttons.html b/Moo/play/templates/emoji-buttons.html
new file mode 100644
index 0000000..3e21f21
--- /dev/null
+++ b/Moo/play/templates/emoji-buttons.html
@@ -0,0 +1,8 @@
+<div>
+  <span style="margin-right: 16px">
+    <a class="emoji" href="/base">{{ emoji.base | safe }}</a>
+    <a class="emoji" href="/None">{{ emoji.none | safe }}</a>
+  </span>
+  <a class="emoji" href="/stars">{{ emoji.starred | safe }}</a>
+  <a class="emoji" href="/hearts">{{ emoji.hearted | safe }}</a>
+</div>
diff --git a/Moo/play/templates/facet-buttons.html b/Moo/play/templates/facet-buttons.html
new file mode 100644
index 0000000..4f939d8
--- /dev/null
+++ b/Moo/play/templates/facet-buttons.html
@@ -0,0 +1,46 @@
+<p class="clr-4">
+
+  <a class="emoji">{{ emoji.app | safe }}</a>
+
+  <span style="margin-right: 8px">
+    <a class="button clr-5"
+       style="margin-right: 0"
+       href="/">Albums</a>
+    <span>{{ "{:,}".format(total) }}</span>
+  </span>
+
+  <span style="margin-right: 8px">
+    <a href="#"
+       class="button clr-5"
+       style="margin-right: 0"
+       onclick="toggle_hidden('artist-counts');">Artists</a>
+    <span>{{ "{:,}".format(counts['artist'] | length) }}</span>
+  </span>
+
+  <span style="margin-right: 8px">
+    <a href="#"
+       class="button clr-5" 
+       style="margin-right: 0" 
+       onclick="toggle_hidden('genre-counts');">Genres</a>
+    <span>{{ "{:,}".format(counts['genre'] | length) }}</span>
+  </span>
+
+  <span style="margin-right: 8px">
+    <a href="#"
+       class="button clr-5"
+       style="margin-right: 0"
+       onclick="toggle_hidden('year-counts');">Years</a>
+    <span>{{ "{:,}".format(counts['year'] | length) }}</span>
+  </span>
+
+  <span style="margin-right: 8px">
+    <a href="#"
+       class="button clr-5"
+       style="margin-right: 0"
+       onclick="toggle_hidden('format-counts')">Formats</a>
+    <span>{{ "{:,}".format(counts['format'] | length) }}</span>
+  </span>
+
+  <span><a class="emoji" href="/docs">{{ emoji.help | safe }}</a></span>
+
+</p>
diff --git a/Moo/play/templates/genre-buttons.html b/Moo/play/templates/genre-buttons.html
new file mode 100644
index 0000000..44497f7
--- /dev/null
+++ b/Moo/play/templates/genre-buttons.html
@@ -0,0 +1,14 @@
+<div style="display: inline-block; max-width: 65%;">
+
+  {% for label in genre_buttons %}
+
+  {% if label == request.path.split('/')[-1] %}
+  <b class="button">{{ label }}</b>
+  {% else %}
+  <a class="button clr-5"
+     href="/genre/{{ label }}">{{ label }}</a>
+  {% endif %}
+
+  {% endfor %}
+
+</div>
diff --git a/Moo/play/templates/recently-played.html b/Moo/play/templates/recently-played.html
new file mode 100644
index 0000000..64afd74
--- /dev/null
+++ b/Moo/play/templates/recently-played.html
@@ -0,0 +1,5 @@
+{% if recent %}
+<p class="box">
+  Recently played
+</p>
+{% endif %}
diff --git a/Moo/play/templates/station-buttons.html b/Moo/play/templates/station-buttons.html
new file mode 100644
index 0000000..7110da9
--- /dev/null
+++ b/Moo/play/templates/station-buttons.html
@@ -0,0 +1,13 @@
+<div id="station-buttons">
+  {% for station in stations %}
+
+  {% if station == station %}
+  <b class="button">{{ station }}</b>
+  {% else %}
+  <a class="button" href="/station/{{ station }}">{{ station }}</a>
+  {% endif %}
+
+  {% endfor %}
+</div>
+
+
diff --git a/Moo/play/templates/tracklist-footer.html b/Moo/play/templates/tracklist-footer.html
new file mode 100644
index 0000000..005b2c1
--- /dev/null
+++ b/Moo/play/templates/tracklist-footer.html
@@ -0,0 +1,16 @@
+<p class="clr-3 center">
+
+  <span>
+    {{ metadata | length }}
+    <span class="box encoding">
+      <a title="Go to format"
+         target="_blank"
+         href="/format/{{ info.encoding }}">{{ info.encoding }}</a>
+    </span>
+  </span>
+
+  <span style="margin: 0 16px">{{ info.size }}</span>
+
+  <span>{{ info.length }}</span>
+
+</p>
diff --git a/Moo/play/templates/tracklist-heading.html b/Moo/play/templates/tracklist-heading.html
new file mode 100644
index 0000000..3407a7a
--- /dev/null
+++ b/Moo/play/templates/tracklist-heading.html
@@ -0,0 +1,15 @@
+<p id="tracklist-heading" class="center clr-3">
+
+  <span>
+    {{ info['year'] or "<small>YEAR</small>" | safe }}</span>
+
+  <span>
+    <a class="clr-3"
+       href="/genre/{{ info['genre'] or 'None' }}"
+       target="_blank">
+      {{ info['genre'] or "<small>GENRE</small>" | safe }}</a></span>
+
+  <span style="white-space: nowrap">
+    {{ emoji.star | safe }} {{ emoji.heart | safe }}</span>
+
+</p>