diff --git a/themes/bootstrap/public/inbucket.css b/themes/bootstrap/public/inbucket.css
index 63d80bb..c3c9f49 100644
--- a/themes/bootstrap/public/inbucket.css
+++ b/themes/bootstrap/public/inbucket.css
@@ -86,3 +86,7 @@ table.metrics {
   cursor: pointer;
   font-size: 12px;
 }
+
+#conn-status {
+  font-style: italic;
+}
diff --git a/themes/bootstrap/public/monitor.js b/themes/bootstrap/public/monitor.js
index 6a975ca..e7716d2 100644
--- a/themes/bootstrap/public/monitor.js
+++ b/themes/bootstrap/public/monitor.js
@@ -18,6 +18,9 @@ function startMonitor() {
   var url = ((l.protocol === "https:") ? "wss://" : "ws://") + l.host + uri
   var ws = new WebSocket(url);
 
+  ws.addEventListener('open', function (e) {
+    $('#conn-status').text('Connected.');
+  });
   ws.addEventListener('message', function (e) {
     var msg = JSON.parse(e.data);
     msg['href'] = '/mailbox?name=' + msg.mailbox + '&id=' + msg.id;
@@ -26,6 +29,9 @@ function startMonitor() {
         msg,
         { append: true });
   });
+  ws.addEventListener('close', function (e) {
+    $('#conn-status').text('Disconnected!');
+  });
 }
 
 function messageClick(node) {
diff --git a/themes/bootstrap/templates/root/monitor.html b/themes/bootstrap/templates/root/monitor.html
index 54cebaf..f20313d 100644
--- a/themes/bootstrap/templates/root/monitor.html
+++ b/themes/bootstrap/templates/root/monitor.html
@@ -47,5 +47,7 @@ $(document).ready(function () {
     <tbody id="monitor-message-list"></tbody>
   </table>
 </div>
+
+<div id="conn-status">Connecting...</div>
 {{end}}