diff --git a/html/force-big.css b/html/force-big.css
index fd70a67..c4ea7f0 100644
--- a/html/force-big.css
+++ b/html/force-big.css
@@ -49,6 +49,6 @@
   fill: #C83771;
 }
 
-#legend {
+sidebar {
   color: #ddd;
 }
diff --git a/html/force-light.css b/html/force-light.css
index 282abf5..7c8735e 100644
--- a/html/force-light.css
+++ b/html/force-light.css
@@ -55,6 +55,6 @@
   fill: #C83771;
 }
 
-#legend {
+sidebar {
   color: #777;
 }
diff --git a/html/force.css b/html/force.css
index ed4fd7d..6c99999 100644
--- a/html/force.css
+++ b/html/force.css
@@ -131,16 +131,16 @@
     text-shadow: none;
 }
 
-#legend {
+sidebar {
   position: absolute;
   top: 1em;
   right: 1.5em;
   z-index: 0;
+  font-size: 9pt;
 }
 
 #legend ul {
   list-style: none;
-  font-size: 9pt;
 }
 
 #legend li {
@@ -153,7 +153,7 @@
   vertical-align: center;
 }
 
-#legend h2 {
+sidebar h2 {
   margin-top: 0;
   font-size: 9pt;
 }
diff --git a/html/force.js b/html/force.js
index d36a2c4..4a993ab 100644
--- a/html/force.js
+++ b/html/force.js
@@ -90,6 +90,20 @@ btns.append("button")
     .text("VPN")
     .on("click", update_graph)
 
+var meshinfo = d3.select("sidebar")
+                 .insert("div", ":first-child")
+
+meshinfo.append("h2").text("Mesh")
+
+meshinfo.append("p")
+        .attr("id", "nodecount")
+
+meshinfo.append("p")
+        .attr("id", "clientcount")
+
+meshinfo.append("p")
+        .attr("id", "gatewaycount")
+
 //cp.append("input")
 //  .on("keyup", function(){show_node(this.value)})
 //  .on("change", function(){show_node(this.value)})
@@ -310,6 +324,21 @@ function reload() {
 
     updated_at.text(d3.time.format("%X")(new Date()))
 
+    d3.select("#nodecount")
+      .text((data.nodes.filter(function(d) {
+        return !d.flags.client
+      }).length) + " Knoten")
+
+    d3.select("#gatewaycount")
+      .text((data.nodes.filter(function(d) {
+        return d.flags.gateway
+      }).length) + " Gateways")
+
+    d3.select("#clientcount")
+      .text((data.nodes.filter(function(d) {
+        return d.flags.client
+      }).length) + " Clients")
+
     update()
   })
 }
diff --git a/html/nodes.html b/html/nodes.html
index 076a6b5..728f6f8 100644
--- a/html/nodes.html
+++ b/html/nodes.html
@@ -22,49 +22,51 @@
       </ul>
     </header>
     <div id="chart">
-      <div id="legend">
-        <h2>Legende</h2>
-        <ul>
-          <li><svg width=30 height=20 class="node">
-              <ellipse cx=15 cy=10 ry=8 rx=8 />
-            </svg>
-            <label>Knoten</label>
-          </li>
-          <li><svg width=30 height=20 class="node">
-              <ellipse cx=15 cy=10 ry=8 rx=8 class="gateway"/>
-            </svg>
-            <label>Gateway</label>
-          </li>
-          <li><svg width=30 height=20 class="node">
-              <ellipse cx=15 cy=10 ry=4 rx=4 class="client"/>
-            </svg>
-            <label>Client</label>
-          </li>
-          <li><svg width=30 height=20 class="link">
-              <line x1="2" y1="10" x2="28" y2="10"/>
-            </svg>
-            <label>Link</label>
-          </li>
+      <sidebar>
+        <div id="legend">
+          <h2>Legende</h2>
+          <ul>
+            <li><svg width=30 height=20 class="node">
+                <ellipse cx=15 cy=10 ry=8 rx=8 />
+              </svg>
+              <label>Knoten</label>
+            </li>
+            <li><svg width=30 height=20 class="node">
+                <ellipse cx=15 cy=10 ry=8 rx=8 class="gateway"/>
+              </svg>
+              <label>Gateway</label>
+            </li>
+            <li><svg width=30 height=20 class="node">
+                <ellipse cx=15 cy=10 ry=4 rx=4 class="client"/>
+              </svg>
+              <label>Client</label>
+            </li>
+            <li><svg width=30 height=20 class="link">
+                <line x1="2" y1="10" x2="28" y2="10"/>
+              </svg>
+              <label>Link</label>
+            </li>
 
-          <li><svg width=30 height=20 class="link vpn">
-              <line x1="2" y1="10" x2="28" y2="10"/>
-            </svg>
-            <label>VPN-Link</label>
-          </li>
-          <li><svg width=30 height=20 class="node uplinks">
-              <g transform="translate(12,28)">
-                <line x1="2" y1="10" x2="28" y2="10" stroke="#000"/>
-                <path d="m -2.8850049,-13.182327 c 7.5369165,0.200772 12.1529864,-1.294922
-                         12.3338513,-10.639456 l 2.2140476,1.018191 -3.3137621,-5.293097
-                         -3.2945999,5.20893 2.4339957,-0.995747 c -0.4041883,5.76426
-                         -1.1549641,10.561363 -10.3735326,10.701179 z"/>
-                <text text-anchor="middle" y=-17>ℕ</text>
-              </g>
-            </svg>
-            <label>Anzahl VPN-Links</label>
-          </li>
-        </ul>
-      </div>
+            <li><svg width=30 height=20 class="link vpn">
+                <line x1="2" y1="10" x2="28" y2="10"/>
+              </svg>
+              <label>VPN-Link</label>
+            </li>
+            <li><svg width=30 height=20 class="node uplinks">
+                <g transform="translate(12,28)">
+                  <line x1="2" y1="10" x2="28" y2="10" stroke="#000"/>
+                  <path d="m -2.8850049,-13.182327 c 7.5369165,0.200772 12.1529864,-1.294922
+                           12.3338513,-10.639456 l 2.2140476,1.018191 -3.3137621,-5.293097
+                           -3.2945999,5.20893 2.4339957,-0.995747 c -0.4041883,5.76426
+                           -1.1549641,10.561363 -10.3735326,10.701179 z"/>
+                  <text text-anchor="middle" y=-17>ℕ</text>
+                </g>
+              </svg>
+              <label>Anzahl VPN-Links</label>
+            </li>
+          </ul>
+        </div>
+      </sidebar>
     </div>
     <script src='force.js' type='text/javascript'></script>
   </body>