diff --git a/tsstats/templates/index.jinja2 b/tsstats/templates/index.jinja2
new file mode 100644
index 0000000..39d3e57
--- /dev/null
+++ b/tsstats/templates/index.jinja2
@@ -0,0 +1,35 @@
+<html>
+<head>
+  <title>{{ title }}</title>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/hint.css/2.4.1/hint.min.css" integrity="sha256-7KczUWqIa/6KaIKtNfG18eilVQR4vJ4S9SSiDAplUwc=" crossorigin="anonymous">
+  <style type="text/css">
+    body {
+      padding-top: 50px;
+    }
+  </style>
+</head>
+<body>
+<div class="container-fluid">
+  <nav class="navbar navbar-default navbar-fixed-top"><div class="container-fluid">
+    <div class="navbar-header">
+      <a class="navbar-brand" href="#">{{ title }}</a>
+    </div>
+    <ul class="nav navbar-nav">
+      {% for sid, _ in servers %}
+        <li><a href="#sid{{ sid }}">Server {{ sid }}</a></li>
+      {% endfor %}
+     </ul>
+     {% if debug %}
+     <p class="navbar-text navbar-right" style="color: red; padding-right: 10px;">debug mode</p>
+     {% endif %}
+  </div></nav>
+  {% for server in servers %}
+    <h1 class="page-header" onclick="window.location = '#sid{{ server.sid }}'" id="sid{{ server.sid }}">Server {{ server.sid }}</h2>
+    {% include 'stats.jinja2' %}
+  {% endfor %}
+  <small>Generated by <a href="https://github.com/Thor77/TeamspeakStats">TeamspeakStats</a> at {{ creation_time|frmttime }}</small>
+</div>
+</body>
+</html>
diff --git a/tsstats/templates/stats.jinja2 b/tsstats/templates/stats.jinja2
index 75eb192..bb2b918 100644
--- a/tsstats/templates/stats.jinja2
+++ b/tsstats/templates/stats.jinja2
@@ -1,30 +1,17 @@
-<html>
-<head>
-  <title>{{ title }}</title>
-  <meta charset="utf-8">
-  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/hint.css/2.4.1/hint.min.css" integrity="sha256-7KczUWqIa/6KaIKtNfG18eilVQR4vJ4S9SSiDAplUwc=" crossorigin="anonymous">
-  <style type="text/css">
-    h1, p {
-      text-align: center;
-    }
-  </style>
-</head>
-<body>
-<div class="container-fluid">
-{% if debug %}
-  <div class="alert alert-danger" role="alert" style="text-align: center;">
-    <b>DEBUG</b>
-  </div>
-{% endif %}
-<h1 class="page-header">{{ title }}</h1>
-{% for headline, list in objs %}
-  {% if list|length > 0 %}
-  {% set headline_id = headline|lower|replace(' ', '_') %}
+{% set clients = server.clients %}
+{% for headline, clients in [
+    ('Onlinetime', clients.onlinetime),
+    ('Kicks', clients.kicks),
+    ('Passive kicks', clients.pkicks),
+    ('Bans', clients.bans),
+    ('Passive bans', clients.pbans)
+] %}
+  {% if clients|length > 0 %}
+  {% set headline_id = [server.sid, headline|lower|replace(' ', '_')]|join('.') %}
   <h2 onclick="window.location = '#{{ headline_id }}'">{{ headline }}</h2>
   <ul class="list-group" id="{{ headline_id }}">
-    {% for client, value in list %}
-    {% set id = headline_id + "." + client.nick %}
+    {% for client, value in clients %}
+    {% set id = [headline_id, client.nick|striptags]|join('.') %}
     <li id="{{ id }}" onclick="window.location = '#{{ id }}'" class="list-group-item{{ ' list-group-item-success' if client.connected else loop.cycle('" style="background-color: #eee;', '') }}">
       <span {% if not client.connected %}class="hint--right" data-hint="{{ client.last_seen|frmttime }}"{% endif %}>{{ client.nick }}{{ " (" + client.identifier + ")" if debug }}</span>
       <span class="badge">{{ value }}</span>
@@ -33,7 +20,3 @@
   </ul>
   {% endif %}
 {% endfor %}
-<small>Generated by <a href="https://github.com/Thor77/TeamspeakStats">TeamspeakStats</a> at {{ creation_time|frmttime }}</small>
-</div>
-</body>
-</html>
