diff --git a/res/app/components/stf/common-ui/notifications/index.js b/res/app/components/stf/common-ui/notifications/index.js
index 4e6f1c9f..4d69b1ec 100644
--- a/res/app/components/stf/common-ui/notifications/index.js
+++ b/res/app/components/stf/common-ui/notifications/index.js
@@ -6,4 +6,6 @@ require('angular-growl-v2/build/angular-growl.js')
 module.exports = angular.module('stf/common-ui/notifications', [
   'ngAnimate',
   'angular-growl'
-])
+]).config(['growlProvider', function (growlProvider) {
+  growlProvider.globalEnableHtml(true)
+}])
diff --git a/res/app/components/stf/socket/index.js b/res/app/components/stf/socket/index.js
index 1bc5fe49..900d8fd4 100644
--- a/res/app/components/stf/socket/index.js
+++ b/res/app/components/stf/socket/index.js
@@ -1,3 +1,2 @@
 module.exports = angular.module('stf/socket', [])
   .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 c926e317..e98781fa 100644
--- a/res/app/components/stf/socket/socket-service.js
+++ b/res/app/components/stf/socket/socket-service.js
@@ -24,53 +24,5 @@ module.exports = function SocketFactory($rootScope) {
     }
   }
 
-  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
deleted file mode 100644
index 839c7ebe..00000000
--- a/res/app/components/stf/socket/socket-state-directive.js
+++ /dev/null
@@ -1,18 +0,0 @@
-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
deleted file mode 100644
index 5a029486..00000000
--- a/res/app/components/stf/socket/socket-state.jade
+++ /dev/null
@@ -1 +0,0 @@
-div {{ state }}
diff --git a/res/app/components/stf/socket/socket-state/index.js b/res/app/components/stf/socket/socket-state/index.js
new file mode 100644
index 00000000..2a49361a
--- /dev/null
+++ b/res/app/components/stf/socket/socket-state/index.js
@@ -0,0 +1,6 @@
+module.exports = angular.module('stf/socket/socket-state', [
+  require('stf/socket').name,
+  require('stf/common-ui/notifications').name
+])
+  .directive('socketState', require('./socket-state-directive'))
+  .controller('SocketStateCtrl', require('./socket-state-controller'))
diff --git a/res/app/components/stf/socket/socket-state/socket-state-controller.js b/res/app/components/stf/socket/socket-state/socket-state-controller.js
new file mode 100644
index 00000000..8d72b7ca
--- /dev/null
+++ b/res/app/components/stf/socket/socket-state/socket-state-controller.js
@@ -0,0 +1,75 @@
+module.exports = function ($scope, $element, $attrs, $transclude, socket, growl, gettext) {
+  var hasFailedOnce = false
+
+  socket.on('connect', function () {
+    $scope.socketState = 'connect'
+  })
+
+  socket.on('connecting', function () {
+    $scope.socketState = 'connecting'
+  })
+
+  socket.on('disconnect', function () {
+    $scope.socketState = 'disconnect'
+    hasFailedOnce = true
+  })
+
+  socket.on('connect_failed', function () {
+    $scope.socketState = 'connect_failed'
+    hasFailedOnce = true
+  })
+
+  socket.on('error', function () {
+    $scope.socketState = 'error'
+    hasFailedOnce = true
+  })
+
+  socket.on('reconnect_failed', function () {
+    $scope.socketState = 'reconnect_failed'
+    hasFailedOnce = true
+  })
+
+  socket.on('reconnect', function () {
+    $scope.socketState = 'reconnect'
+    hasFailedOnce = true
+  })
+
+  socket.on('reconnecting', function () {
+    $scope.socketState = 'reconnecting'
+    hasFailedOnce = true
+  })
+
+  $scope.$watch('socketState', function (newValue, oldValue) {
+    console.log(newValue)
+    if (newValue) {
+      if (newValue === 'connecting' && oldValue) {
+        growl.info(gettext('<h4>WebSocket</h4> Connecting...'), {ttl: 1000})
+      } else if (newValue === 'connect' && oldValue === 'connecting') {
+        if (hasFailedOnce) {
+          growl.success(gettext('<h4>WebSocket</h4> Connected successfully.'), {ttl: 2000})
+        }
+      } else {
+        switch (newValue) {
+          case 'disconnect':
+            growl.info(gettext('<h4>WebSocket</h4> Disconnected.'), {ttl: 2000})
+            break;
+          case 'connect_failed':
+            growl.error(gettext('<h4>WebSocket</h4> Error while connecting.'), {ttl: 2000})
+            break;
+          case 'error':
+            growl.error(gettext('<h4>WebSocket</h4> Error.'), {ttl: 2000})
+            break;
+          case 'reconnect_failed':
+            growl.error(gettext('<h4>WebSocket</h4> Error while reconnecting.'), {ttl: 2000})
+            break;
+          case 'reconnect':
+            growl.success(gettext('<h4>WebSocket</h4> Reconnected successfully.'), {ttl: 2000})
+            break;
+          case 'reconnecting':
+            growl.info(gettext('<h4>WebSocket</h4> Reconnecting...'), {ttl: 1000})
+            break;
+        }
+      }
+    }
+  })
+}
diff --git a/res/app/components/stf/socket/socket-state/socket-state-directive.js b/res/app/components/stf/socket/socket-state/socket-state-directive.js
new file mode 100644
index 00000000..8d60ac70
--- /dev/null
+++ b/res/app/components/stf/socket/socket-state/socket-state-directive.js
@@ -0,0 +1,9 @@
+module.exports = function SocketStateDirectiveFactory() {
+  return {
+    restrict: 'EA',
+    template: require('./socket-state.jade'),
+    controller: 'SocketStateCtrl',
+    scope: {
+    }
+  }
+}
diff --git a/res/app/components/stf/socket/socket-state/socket-state.jade b/res/app/components/stf/socket/socket-state/socket-state.jade
new file mode 100644
index 00000000..e69de29b
diff --git a/res/app/layout/index.js b/res/app/layout/index.js
index 9dda3565..3881196f 100644
--- a/res/app/layout/index.js
+++ b/res/app/layout/index.js
@@ -16,6 +16,7 @@ require('./small.css')
 
 module.exports = angular.module('layout', [
   'fa.directive.borderLayout',
-  require('stf/common-ui').name
+  require('stf/common-ui').name,
+  require('stf/socket/socket-state').name
 ])
   .controller('LayoutCtrl', require('./layout-controller'))