diff --git a/public/js/little-library.js b/public/js/little-library.js
index 249323a..c9389f6 100644
--- a/public/js/little-library.js
+++ b/public/js/little-library.js
@@ -3,6 +3,10 @@ $(document).ready(function() {
 
   var downloadButton;
 
+  socket.on('update visitors', function(visitors) {
+    $('#visitors').text(visitors);
+  });
+  
   socket.on('get book', function(url) {
     $(downloadButton).replaceWith('<a download href="' + url + '" class="button is-success is-large">Download</a>');
   });
diff --git a/server.js b/server.js
index 23a5c8d..6e5b820 100644
--- a/server.js
+++ b/server.js
@@ -24,6 +24,7 @@ function Server () {
 
   this.templateCache = {};
 
+  this.connections = 0;
   this.takenBooks = [];
 
   this.server.use(helmet());
@@ -136,7 +137,8 @@ function Server () {
   });
 
   this.io.on('connection', socket => {
-    this.broadcastVisitors();
+    this.connections++;
+    this.io.emit('update visitors', this.connections);
 
     socket.on('take book', bookId => {
       const fileLocation = this.takeBook(bookId, socket.id);
@@ -149,8 +151,8 @@ function Server () {
     });
 
     socket.on('disconnect', () => {
-      // console.log(socket.id + ' disconnected');
-      this.broadcastVisitors();
+      this.connections--;
+      this.io.emit('update visitors', this.connections);
       this.deleteBooks(socket.id);
     });
   });
@@ -276,11 +278,6 @@ Server.prototype.generateHistoryPage = function (req) {
   });
 }
 
-Server.prototype.broadcastVisitors = function () {
-  const numberConnected = this.io.of('/').clients().connected.length;
-  this.io.emit('connected', numberConnected);
-}
-
 Server.prototype.start = function () {
   this.http.listen(settings.port, () => {
     console.log('Started server on port ' + settings.port);
diff --git a/templates/htmlContainer.html b/templates/htmlContainer.html
index 5d87648..3d12840 100644
--- a/templates/htmlContainer.html
+++ b/templates/htmlContainer.html
@@ -20,7 +20,13 @@
   <nav class="navbar" role="navigation" aria-label="main navigation">
     <div class="navbar-brand">
       <a class="navbar-item" href="/">
-        <h1 class="title">{{siteTitle}}</h1>
+        <div>
+          <h1 class="title">{{siteTitle}}</h1>
+          <div class="subtitle tags has-addons">
+            <span class="tag">Current Visitors</span>
+            <span class="tag is-primary" id="visitors">&hellip;</span>
+          </div>
+        </div>
       </a>
   
       <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false">
@@ -66,8 +72,8 @@
   <footer class="footer">
     <div class="content has-text-centered">
       <p>
-        <strong>Little Library</strong> by <a href="https://robbie.antenesse.net">Robbie Antenesse</a>. The source code is licensed
-        <a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The website content
+        <strong>Little Library</strong> by <a href="https://robbie.antenesse.net">Robbie Antenesse</a>.
+        The source code is licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The website content
         is licensed <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA 4.0</a>.
       </p>
     </div>