diff --git a/res/app/components/stf/socket/index.js b/res/app/components/stf/socket/index.js
index 3bb52b11..1bc5fe49 100644
--- a/res/app/components/stf/socket/index.js
+++ b/res/app/components/stf/socket/index.js
@@ -1,2 +1,3 @@
 module.exports = angular.module('stf/socket', [])
-  .factory('socket', require('./socket-service'));
+  .factory('socket', require('./socket-service'))
+  .directive('socketState', require('./socket-state-directive'))
diff --git a/res/app/components/stf/socket/socket-service.js b/res/app/components/stf/socket/socket-service.js
index 153375d2..c926e317 100644
--- a/res/app/components/stf/socket/socket-service.js
+++ b/res/app/components/stf/socket/socket-service.js
@@ -1,6 +1,6 @@
 var io = require('socket.io')
 
-module.exports = function SocketFactory() {
+module.exports = function SocketFactory($rootScope) {
   var socket = io.connect()
 
   socket.scoped = function($scope) {
@@ -24,5 +24,53 @@ module.exports = function SocketFactory() {
     }
   }
 
+  socket.on('connect', function() {
+    $rootScope.$apply(function() {
+      socket.state = 'connect'
+    })
+  })
+
+  socket.on('connecting', function() {
+    $rootScope.$apply(function() {
+      socket.state = 'connecting'
+    })
+  })
+
+  socket.on('disconnect', function() {
+    $rootScope.$apply(function() {
+      socket.state = 'disconnect'
+    })
+  })
+
+  socket.on('connect_failed', function() {
+    $rootScope.$apply(function() {
+      socket.state = 'connect_failed'
+    })
+  })
+
+  socket.on('error', function() {
+    $rootScope.$apply(function() {
+      socket.state = 'error'
+    })
+  })
+
+  socket.on('reconnect_failed', function() {
+    $rootScope.$apply(function() {
+      socket.state = 'reconnect_failed'
+    })
+  })
+
+  socket.on('reconnect', function() {
+    $rootScope.$apply(function() {
+      socket.state = 'reconnect'
+    })
+  })
+
+  socket.on('reconnecting', function() {
+    $rootScope.$apply(function() {
+      socket.state = 'reconnecting'
+    })
+  })
+
   return socket
 }
diff --git a/res/app/components/stf/socket/socket-state-directive.js b/res/app/components/stf/socket/socket-state-directive.js
new file mode 100644
index 00000000..839c7ebe
--- /dev/null
+++ b/res/app/components/stf/socket/socket-state-directive.js
@@ -0,0 +1,18 @@
+module.exports = function SocketStateDirectiveFactory(socket) {
+  return {
+    restrict: 'E'
+  , template: require('./socket-state.jade')
+  , scope: {
+    }
+  , link: function (scope) {
+      scope.$watch(
+        function() {
+          return socket.state
+        }
+      , function(state) {
+          scope.state = state
+        }
+      )
+    }
+  }
+}
diff --git a/res/app/components/stf/socket/socket-state.jade b/res/app/components/stf/socket/socket-state.jade
new file mode 100644
index 00000000..5a029486
--- /dev/null
+++ b/res/app/components/stf/socket/socket-state.jade
@@ -0,0 +1 @@
+div {{ state }}
diff --git a/res/app/views/index.jade b/res/app/views/index.jade
index cc34131d..b99dc348 100644
--- a/res/app/views/index.jade
+++ b/res/app/views/index.jade
@@ -9,6 +9,7 @@ html
         .pane-top-bar(pane, pane-anchor='north', pane-size='46px', pane-min='46px', pane-max='46px', pane-handle='')
           div(ng-include='"menu.jade"')
         div(pane, pane-anchor='center').fill-height
+          socket-state
           div(ng-view).fill-height
 
-    script(src='/static/build/bundle.js')
\ No newline at end of file
+    script(src='/static/build/bundle.js')