diff --git a/lib/assets/client.js b/lib/assets/client.js
index 9b86107a..8257292b 100644
--- a/lib/assets/client.js
+++ b/lib/assets/client.js
@@ -66,14 +66,24 @@ socket.on('data', function (users){
   for (var i in users) update(i, users[i])
 })
 socket.on('total', function (n){ update('total', n) })
-socket.on('active', function (n){ update('active', n) })
+socket.on('active', function (n){
+  if (n > 0) {
+    document.querySelector('.statusActive').className = 'statusActive'
+    document.querySelector('.statusInactive').className = 'statusInactive hide'
+  } else {
+    document.querySelector('.statusActive').className = 'statusActive hide'
+    document.querySelector('.statusInactive').className = 'statusInactive'
+  }
+  update('active', n)
+})
 
 function update (val, n, noanim){
-  var el = document.querySelector('.' + val)
-  if (n != el.innerHTML) {
-    el.innerHTML = n
-    anim(el, val)
-  }
+  document.querySelectorAll('.' + val).forEach(function(el) {
+    if (n != el.innerHTML) {
+      el.innerHTML = n
+      anim(el, val)
+    }
+  })
 }
 
 function anim (el, c){
diff --git a/lib/splash.js b/lib/splash.js
index df4d7081..61509695 100644
--- a/lib/splash.js
+++ b/lib/splash.js
@@ -13,12 +13,17 @@ export default function splash ({ path, name, org, coc, logo, active, total, cha
       ' on Slack.'
     ),
     dom('p.status',
-      active
-        ? [
+      dom('span.' + (active ? 'statusActive' : 'statusActive.hide'),
+        [
           dom('b.active', active), ' users online now of ',
           dom('b.total', total), ' registered.'
         ]
-        : [dom('b.total', total), ' users are registered so far.']
+      ),
+      dom('span.' + (active ? 'statusInactive.hide' : 'statusInactive'),
+        [
+          dom('b.total', total), ' users are registered so far.'
+        ]
+      )
     ),
     dom('form id=invite',
       channels && (
@@ -81,6 +86,10 @@ function style ({ logo, active, large, iframe } = {}){
     'font-family': '"Helvetica Neue", Helvetica, Arial'
   })
 
+  css.add('.hide', {
+    'display': 'none'
+  })
+
   if (iframe) {
     css.add('body, html', {
       'margin': '0',
@@ -300,11 +309,9 @@ function style ({ logo, active, large, iframe } = {}){
     'outline': '0'
   })
 
-  if (active) {
-    css.add('.active', {
-      'color': pink
-    })
-  }
+  css.add('.active', {
+    'color': pink
+  })
 
   css.add('p.signin', {
     'padding': '1rem 0 1rem',