diff --git a/pkg/srv/templates.go b/pkg/srv/templates.go
index 958d769..b62827f 100644
--- a/pkg/srv/templates.go
+++ b/pkg/srv/templates.go
@@ -8,29 +8,120 @@ var (
 	index = template.Must(template.New("index").Parse(`<!doctype html>
 <html>
 <head>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <style>
-    body { padding: 0 150px 0 150px; font: 20px Helvetica, sans-serif; color: #333; }
-    article { display: block; text-align: left; margin: 0 auto; }
-    table { text-align: left; width: 100%; }
+body {
+  font: 20px Helvetica, sans-serif;
+  background-color: #111111;
+  color: #e6e6e6;
+  margin: 0px;
+  padding: 0 150px 0 150px;
+}
+@media only screen and (max-width: 800px) {
+  body {
+    padding: 0px;
+  }
+}
+article {
+  background-color: #222222;
+  display: block; text-align: left; margin: 0 auto; box-shadow: 0px 0px 50px 10px #000000;
+}
+a:link {
+  color: #e6e6e6;
+  text-decoration: none;
+}
+a:visited {
+  color: #e6e6e6;
+}
+a:hover {
+  color: #ffffff;
+  text-decoration: underline;
+}
+a:active {
+  color: #a6a6a6;
+}
+table {
+  border-collapse: collapse;
+  width: 100%;
+  margin-bottom: 50px;
+}
+.listitem {
+  background-color: #333333;
+  height: 45px;
+  margin: 3px 0px;
+}
+.listitem:hover {
+  background-color: #404040;
+}
+.listitem:active {
+  background-color: #202020;
+}
+.listitem td {
+  padding: 5px;
+  vertical-align: middle;
+  display: table-cell;
+}
+.listpath {
+  white-space: normal;
+  width: 100%;
+}
+.listoptions {
+  white-space: nowrap;
+  text-align: right;
+}
+.listoptions span, a {
+  margin-left: 10px;
+}
+.spacer {
+  height: 3px;
+  width: 0%;
+}
+.red {
+  background-color: #e74c3c;
+}
+.yellow {
+  background-color: #f39c12;
+}
+.green {
+  background-color: #4caf50;
+}
+span {
+  color: #9b9b9b;
+  font-size: 15px;
+}
   </style>
 </head>
 <body>
   <article>
   <pre>
-[v]: show video
-[n]: skip file caching
-[p]: preload file
-[s]: stop preloading
+[v]: show video         [p]: preload file
+[n]: skip file caching  [s]: stop preloading
   </pre>
   <table>
-    <tr><th style="width:100%;">Path</th><th>Options</th></tr>
-    <tr><td><a href="../">../</a></td><td>[dir]</td></tr>
+    <tr class="listitem">
+      <td class="listpath"><a href="../">../</a></td>
+      <td class="listoptions">[dir]</td>
+    </tr>
+    <tr class="spacer"><td colspan="2"></td></tr>
 {{range $s := .Dirs -}}
-    <tr><td><a href="{{$s.URI}}">{{$s.Name}}</a></td><td>[dir]</td></tr>
+    <tr class="listitem">
+      <td class="listpath"><a href="{{$s.URI}}">{{$s.Name}}</a></td>
+      <td class="listoptions">[dir]</td>
+    </tr>
+    <tr class="spacer"><td colspan="2"></td></tr>
 {{end -}}
 {{range $s := .Files -}}
-    <tr><td><a id="{{$s.Anchor}}" href="{{$s.URI}}">{{$s.Name}}</a></td>
-    <td><a href="{{$s.URI}}?o=v">[v]</a>&nbsp;<a href="{{$s.URI}}?o=n">[n]</a>&nbsp;<a href="{{$s.URI}}?o=p">[p]</a>&nbsp;<a href="{{$s.URI}}?o=s">[s]</a>&nbsp;{{if ne $s.Status -1}}{{$s.Status}}%{{end}}</td></tr>
+    <tr class="listitem">
+      <td class="listpath"><a id="{{$s.Anchor}}" href="{{$s.URI}}">{{$s.Name}}</a></td>
+      <td class="listoptions">
+        {{if ge $s.Status 0}}<span>{{$s.Status}}%</span>{{end}}<a href="{{$s.URI}}?o=v">[v]</a><a href="{{$s.URI}}?o=n">[n]</a><a href="{{$s.URI}}?o=p">[p]</a><a href="{{$s.URI}}?o=s">[s]</a>
+      </td>
+    </tr>
+    <tr class="spacer"><td colspan="2">
+{{if ge $s.Status 0}}
+      <div class="spacer {{if le $s.Status 35}}red{{else if le $s.Status 65}}yellow{{else}}green{{end}}" style="width: {{$s.Status}}%;"></div>
+{{end -}}
+    </td></tr>
 {{end -}}
   </table>
   </article>
@@ -39,7 +130,7 @@ var (
 	video = template.Must(template.New("video").Parse(`<!doctype html>
 <html>
 <head>
-  <meta name="viewport" content="width=device-width">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>
   <video id="video" style="width: 100%; height: 100%;" src="{{.}}" controls=""></video>

Path	Options
../	[dir]
../	[dir]

{{$s.Name}}	[dir]
{{$s.Name}}	[dir]

{{$s.Name}}	[v] [n] [p] [s] {{if ne $s.Status -1}}{{$s.Status}}%{{end}}
{{$s.Name}}	+ {{if ge $s.Status 0}}{{$s.Status}}%{{end}}[v][n][p][s] +
+{{if ge $s.Status 0}} + +{{end -}} +