diff --git a/contrib/js/livechan.js b/contrib/js/livechan.js
index cc2d551..46a6395 100644
--- a/contrib/js/livechan.js
+++ b/contrib/js/livechan.js
@@ -121,8 +121,9 @@ Captcha.prototype.show = function () {
   var widget = this.widget.widget;
   if ( widget.style ) {
     widget.style.zIndex = 5;
+    widget.style.visibility = "visible";
   } else {
-    widget.style = {zIndex: 5};
+    widget.style = {zIndex: 5, visibility: "visible"};
   }
 }
 /**
@@ -133,8 +134,9 @@ Captcha.prototype.hide = function () {
   var widget = this.widget.widget;
   if ( widget.style ) {
     widget.style.zIndex = -1;
+    widget.style.visibility = "hidden";
   } else {
-    widget.style = {zIndex: -1};
+    widget.style = {zIndex: -1, visibility: "hidden"};
   }
 }
 
@@ -857,6 +859,7 @@ ConvoBar.prototype.show = function(msgid) {
  */
 function Chat(domElem, channel, options) {
   var self = this;
+  this.pph = 0;
   this.name = channel.toLowerCase();
   this.domElem = domElem;
   this.lastOp = null;
@@ -891,6 +894,10 @@ function Chat(domElem, channel, options) {
     ajax.send(JSON.stringify({ID: id, Solution: solution}));
   });
   this.captcha.hide();
+  setInterval(function() {
+    self.tickPPHCount();
+    self.tickUserCount();
+  }, 5000);
 }
 
 Chat.prototype.clear = function () {
@@ -1026,6 +1033,8 @@ Chat.prototype.sendInput = function(event) {
           // reset shit
           inputElem.file.value = "";
           inputElem.message.value = '';
+        } else if (jdata.error) {
+          console.log(jdata.error);
         }
       } else if (ajax.readyState == 3 ) {
         // processing
@@ -1039,7 +1048,8 @@ Chat.prototype.sendInput = function(event) {
     data.set("name", name);
     data.set("subject", subject);
     data.set("message", message);
-    data.set("reference", convo);
+    if (convo)
+      data.set("reference", convo);
     if (inputElem.file.files[0])
       data.set("attachment_0", inputElem.file.files[0]);
     ajax.send(data);
@@ -1185,13 +1195,57 @@ Chat.prototype.initOutput = function() {
   var self = this;
 }
 
+Chat.prototype.tickUserCount = function () {
+  var self=this;
+  var ajax = new XMLHttpRequest();
+  ajax.open("GET", self.prefix + "livechan/api/online");
+  ajax.onreadystatechange = function () {
+    if (ajax.readyState == 4 && ajax.status == 200 ) {
+      var data = JSON.parse(ajax.responseText);
+      if (data && data.online) {
+        self.updateUserStats(data.online);
+      }
+    }
+  }
+  ajax.send();
+}
+
+Chat.prototype.tickPPHCount = function () {
+  var self=this;
+  var convo = self.chatElems.convobar.active;
+  var board;
+  if(convo)
+    board = self.chatElems.convobar.holder[convo].group;
+  if(!board) {
+    // no board selected?
+    var h = document.location.hash;
+    if (h.length > 1 ) {
+      board = "overchan." + h.substr(1);
+    }
+  }
+  if(board) {
+    var ajax = new XMLHttpRequest();
+    ajax.open("GET", self.prefix + "livechan/api/pph?newsgroup="+board);
+    ajax.onreadystatechange = function () {
+      if (ajax.readyState == 4 && ajax.status == 200 ) {
+        var data = JSON.parse(ajax.responseText);
+        if (data && data.pph !== undefined) {
+          self.pph = data.pph;
+        }
+      }
+    }
+    ajax.send();
+  }
+}
+
 /* @brief update the user counter for number of users online
  */
-Chat.prototype.updateUserCount = function(count) {
-  var elem = this.chatElems.navbar.userCount;
-  elem.textContent = "Online: "+count;
+Chat.prototype.updateUserStats = function(count) {
+  var elem = this.chatElems.navbar.status;
+  elem.textContent = "Online: "+count + " PPH: "+ this.pph;
 }
 
+
 /* @brief Scrolls the chat to the bottom.
  */
 Chat.prototype.scroll = function() {
diff --git a/contrib/static/livechan.css b/contrib/static/livechan.css
index f6924ba..5ea3a5e 100644
--- a/contrib/static/livechan.css
+++ b/contrib/static/livechan.css
@@ -2,7 +2,6 @@ input {
   -moz-border-radius: 0px;
   -webkit-border-radius: 0px;
   border-radius: 0px;
-  color: white;
 }
 
 .livechan_captcha_input {
@@ -19,12 +18,12 @@ textarea, select {
 .livechan_chat_input {
   padding: 0;
   margin: 0;
-  position: absolute;
+  position: fixed;
   width: 100%;
   bottom: 0;
   left: 0;
   right: 0;
-  padding:none;
+  background: #d6daf0;
 }
 
 .livechan_chat_input_name, .livechan_chat_input_convo {
@@ -110,7 +109,7 @@ textarea, select {
     top: 0px;
     bottom: 0px;
     right: 0px;
-    position: absolute;
+    position: fixed;
     opacity: 0.9;
 }
 
@@ -130,17 +129,20 @@ textarea, select {
     background: black;
 }
 
+.livechan_chat_output_chat {
+    background: #d6daf0;
+}
+
 .livechan_spoiler:hover {
     color: white;
 }
 
 .livechan_convo_label {
     padding: 5px;
-    color: white;
 }
 
 .livechan_convobar_root {
-    position: absolute;
+    position: fixed;
     top: 20px;
     right: 0;
     width: 10%;
@@ -148,11 +150,13 @@ textarea, select {
 
 .livechan_convobar_item {
     padding: 5px;
+    margin: 5px;
+    background: #d6daf0;
 }
 
 .livechan_navbar {
     z-index: 3;
-    position: absolute;
+    position: fixed;
     top: 0;
     width: 100%;
     height: 20px;
@@ -161,8 +165,7 @@ textarea, select {
 .livechan_navbar_mod_indicator_inactive, .livechan_navbar_mod_indicator_active, .livechan_navbar_status, .livechan_navbar_channel_label {
     padding-left: 10px;
     padding-right: 10px;
-    background: #050505;
-    color: white;
+    background: #d6daf0;
 }
 
 
@@ -182,29 +185,14 @@ textarea, select {
     visibility: visible;
 }
 
-.livechan_chat_output, .livechan_captcha, .livechan_convobar_root, #chat {
-  background: #050505;
-}
-
-.livechan_convobar_root {
- background: #111; 
- color: white;
-}
-
-.livechan_chat_output_chat, .livechan_navbar {
- background: #111;
-}
-
-.livechan_convobar_item {
- background: #111;
-
+.livechan_captcha, .livechan_convobar_root, #chat {
+    background: #EEF2FF;
 }
 
 .livechan_chat_output_chat {
   font-family: monospace;
   margin: 4px;
   padding: 4px;
-  color: white;
 }
 
 .livechan_chat_output_name {
@@ -216,10 +204,6 @@ textarea, select {
   color: red;
 }
 
-.livechan_chat_input {
-  background: #111;
-}
-
 .livechan_greentext {
   color: #789922;
 }
@@ -229,7 +213,7 @@ textarea, select {
 }
 
 .livechan_internallink , a {
-  color: cyan;
+    color: blue;
 }
 
 .livechan_internallink:hover , a {
@@ -254,7 +238,7 @@ textarea, select {
 
 .livechan_navbar_mod_indicator_inactive {
     color: #aaaaaa;
-    background: #eef2ff;
+    background: #EEF2FF;
 }
 
 
diff --git a/contrib/static/site.css b/contrib/static/site.css
index a073499..c0254f2 100644
--- a/contrib/static/site.css
+++ b/contrib/static/site.css
@@ -320,11 +320,14 @@ input, textarea {
     display: inline-block;
 }
 
+.op , .reply {
+    float: left;
+    clear: both;
+}
+
 .op {
     margin-top: 5px;
     margin-bottom: 1px;
-    float: left;
-    clear: both;
 }
 
 .post:target {
diff --git a/contrib/templates/default/post.mustache b/contrib/templates/default/post.mustache
index 342a822..63e6d28 100644
--- a/contrib/templates/default/post.mustache
+++ b/contrib/templates/default/post.mustache
@@ -1,4 +1,23 @@
-<div id="{{post.PostHash}}" class="{{post.CSSClass}}">
+<div id="{{post.PostHash}}" class="{{post.CSSClass}}"
+     data-frontend="{{post.Frontend}}"
+     data-newsgroup="{{post.Board}}"
+     data-msgid="{{post.MessageID}}"
+     data-msgidhash="{{post.PostHash}}"
+     data-rootmsgid="{{post.Reference}}"
+     data-rootmsgidhash="{{post.ReferenceHash}}"
+     {{#post.Sage}}
+     data-sage="1"
+     {{/post.Sage}}
+     {{#post.IsI2P}}
+     data-origin="i2p"
+     {{/post.IsI2P}}
+     {{#post.IsTor}}
+     data-origin="tor"
+     {{/post.IsTor}}
+     {{#post.IsClearnet}}
+     data-origin="clearnet"
+     {{/post.IsClearnet}}
+     data-posturl="{{post.PostURL}}">
   <legend class="postheader">
     <span class="origin">
   {{#post.IsI2P}}
@@ -10,17 +29,19 @@
   {{#post.IsClearnet}}
     <img src="{{post.Prefix}}static/clearnet.png" title="{{#i18n.Translations}}{{from_clearnet}}{{/i18n.Translations}}" />
   {{/post.IsClearnet}}
-    </span>  
+    <span class="frontend">{{post.Frontend}}</span>
+    </span>
     <span class="subject">{{post.Subject}}</span>
     <span class="name">{{post.Name}}</span>
+    <span class="msgid">{{post.MessageID}}</span>
     <time datetime="{{post.DateRFC}}">{{post.Date}}</time>
-    <a href="#" class="postnol">No.</a><a class="postno" onclick="nntpchan_reply(this, '{{post.ShortHash}}');" title="{{post.MessageID}}" root="{{post.Reference}}" boardname="{{post.Board}}">{{post.ShortHash}}</a>
+    <a href="#" class="postnol">No. {{post.Index}}</a><a class="postno" onclick="nntpchan_reply(this, '{{post.ShortHash}}');" title="{{post.MessageID}}" root="{{post.Reference}}" boardname="{{post.Board}}"> &gt;&gt;{{post.ShortHash}}</a>
     <a href="{{post.PostURL}}">[{{#i18n.Translations}}{{reply_label}}{{/i18n.Translations}}]</a>
     <span class="tripcode">{{{post.Pubkey}}}</span>  
   </legend>
   <div class="attachments">
   {{#post.Attachments}}
-    <figure>
+    <figure data-sha512="{{Hash}}">
     <figcaption>
     <a class="download_link" href="{{Source}}" download="{{Filename}}">{{#i18n.Translations}}{{download_prompt}}{{/i18n.Translations}}</a>
     <a class="file" href="{{Source}}" title="{{Filename}}" target="_blank"><img src="{{Thumbnail}}" alt="{{Filename}}" class="thumbnail"/></a>