diff --git a/res/app/components/stf/common-ui/refresh-page/index.js b/res/app/components/stf/common-ui/refresh-page/index.js
new file mode 100644
index 00000000..790e6717
--- /dev/null
+++ b/res/app/components/stf/common-ui/refresh-page/index.js
@@ -0,0 +1,2 @@
+module.exports = angular.module('stf.refresh-page', [])
+  .directive('refreshPage', require('./refresh-page-directive'))
diff --git a/res/app/components/stf/common-ui/refresh-page/refresh-page-directive.js b/res/app/components/stf/common-ui/refresh-page/refresh-page-directive.js
new file mode 100644
index 00000000..89dde1d6
--- /dev/null
+++ b/res/app/components/stf/common-ui/refresh-page/refresh-page-directive.js
@@ -0,0 +1,12 @@
+module.exports = function refreshPageDirective() {
+  return {
+    restrict: 'E',
+    replace: true,
+    scope: {
+    },
+    template: require('./refresh-page.jade'),
+    link: function (scope, element, attrs) {
+      // TODO: reload with $route.reload()
+    }
+  }
+}
diff --git a/res/app/components/stf/common-ui/refresh-page/refresh-page-spec.js b/res/app/components/stf/common-ui/refresh-page/refresh-page-spec.js
new file mode 100644
index 00000000..7dd808d4
--- /dev/null
+++ b/res/app/components/stf/common-ui/refresh-page/refresh-page-spec.js
@@ -0,0 +1,23 @@
+describe('refreshPage', function () {
+
+  beforeEach(module('stf.refresh-page'));
+
+  var scope, compile;
+
+  beforeEach(inject(function ($rootScope, $compile) {
+    scope = $rootScope.$new();
+    compile = $compile;
+  }));
+
+  it('should ...', function () {
+
+    /* 
+     To test your directive, you need to create some html that would use your directive,
+     send that through compile() then compare the results.
+
+     var element = compile('<div refresh-page name="name">hi</div>')(scope);
+     expect(element.text()).toBe('hello, world');
+     */
+
+  });
+});
\ No newline at end of file
diff --git a/res/app/components/stf/common-ui/refresh-page/refresh-page.jade b/res/app/components/stf/common-ui/refresh-page/refresh-page.jade
new file mode 100644
index 00000000..beed086b
--- /dev/null
+++ b/res/app/components/stf/common-ui/refresh-page/refresh-page.jade
@@ -0,0 +1,3 @@
+button.btn.btn-sm.btn-primary-outline(ng-click='window.location.reload()')
+  i.fa.fa-refresh
+  span(translate) Refresh
\ No newline at end of file
diff --git a/res/app/components/stf/socket/socket-state/index.js b/res/app/components/stf/socket/socket-state/index.js
index 117be91a..32d7f85f 100644
--- a/res/app/components/stf/socket/socket-state/index.js
+++ b/res/app/components/stf/socket/socket-state/index.js
@@ -1,10 +1,10 @@
 module.exports = angular.module('stf/socket/socket-state', [
   require('stf/socket').name,
   require('stf/common-ui/safe-apply').name,
-  require('stf/common-ui/notifications').name
+  require('stf/common-ui/notifications').name,
+  require('stf/common-ui/refresh-page').name
 ])
   .directive('socketState', require('./socket-state-directive'))
-  .controller('SocketStateCtrl', require('./socket-state-controller'))
   .config([
     '$provide', function ($provide) {
       return $provide.decorator('$rootScope', [
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
deleted file mode 100644
index a2b8604e..00000000
--- a/res/app/components/stf/socket/socket-state/socket-state-controller.js
+++ /dev/null
@@ -1,90 +0,0 @@
-module.exports = function ($scope, $element, $attrs, $transclude, socket, growl, gettext) {
-  var hasFailedOnce = false
-
-  socket.on('connect', function () {
-    $scope.$apply(function () {
-      $scope.socketState = 'connect'
-    })
-  })
-
-  socket.on('connecting', function () {
-    $scope.$apply(function () {
-      $scope.socketState = 'connecting'
-    })
-  })
-
-  socket.on('disconnect', function () {
-    $scope.$apply(function () {
-      $scope.socketState = 'disconnect'
-    })
-    hasFailedOnce = true
-  })
-
-  socket.on('connect_failed', function () {
-    $scope.$apply(function () {
-      $scope.socketState = 'connect_failed'
-    })
-    hasFailedOnce = true
-  })
-
-  socket.on('error', function () {
-    $scope.$apply(function () {
-      $scope.socketState = 'error'
-    })
-    hasFailedOnce = true
-  })
-
-  socket.on('reconnect_failed', function () {
-    $scope.$apply(function () {
-      $scope.socketState = 'reconnect_failed'
-    })
-    hasFailedOnce = true
-  })
-
-  socket.on('reconnect', function () {
-    $scope.$apply(function () {
-      $scope.socketState = 'reconnect'
-    })
-    hasFailedOnce = true
-  })
-
-  socket.on('reconnecting', function () {
-    $scope.$apply(function () {
-      $scope.socketState = 'reconnecting'
-    })
-    hasFailedOnce = true
-  })
-
-  $scope.$watch('socketState', function (newValue, oldValue) {
-    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.error(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: 10000})
-            break;
-          case 'reconnecting':
-            growl.info(gettext('<h4>WebSocket</h4> Reconnecting...'), {ttl: 10000})
-            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
index 8d60ac70..e532caaa 100644
--- a/res/app/components/stf/socket/socket-state/socket-state-directive.js
+++ b/res/app/components/stf/socket/socket-state/socket-state-directive.js
@@ -1,9 +1,98 @@
-module.exports = function SocketStateDirectiveFactory() {
+module.exports = function SocketStateDirectiveFactory(socket, growl, gettext) {
   return {
     restrict: 'EA',
     template: require('./socket-state.jade'),
-    controller: 'SocketStateCtrl',
-    scope: {
+//    scope: {
+//    }
+    link: function (scope) {
+      var hasFailedOnce = false
+
+      socket.on('connect', function () {
+        scope.$apply(function () {
+          scope.socketState = 'connect'
+        })
+      })
+
+      socket.on('connecting', function () {
+        scope.$apply(function () {
+          scope.socketState = 'connecting'
+        })
+      })
+
+      socket.on('disconnect', function () {
+        scope.$apply(function () {
+          scope.socketState = 'disconnect'
+        })
+        hasFailedOnce = true
+      })
+
+      socket.on('connect_failed', function () {
+        scope.$apply(function () {
+          scope.socketState = 'connect_failed'
+        })
+        hasFailedOnce = true
+      })
+
+      socket.on('error', function () {
+        scope.$apply(function () {
+          scope.socketState = 'error'
+        })
+        hasFailedOnce = true
+      })
+
+      socket.on('reconnect_failed', function () {
+        scope.$apply(function () {
+          scope.socketState = 'reconnect_failed'
+        })
+        hasFailedOnce = true
+      })
+
+      socket.on('reconnect', function () {
+        scope.$apply(function () {
+          scope.socketState = 'reconnect'
+        })
+        hasFailedOnce = true
+      })
+
+      socket.on('reconnecting', function () {
+        scope.$apply(function () {
+          scope.socketState = 'reconnecting'
+        })
+        hasFailedOnce = true
+      })
+
+      scope.$watch('socketState', function (newValue, oldValue) {
+        if (newValue) {
+          if (newValue === 'connecting' && oldValue) {
+            growl.info('<h4>WebSocket</h4>' + gettext('Connecting...'), {ttl: 1000})
+          } else if (newValue === 'connect' && oldValue === 'connecting') {
+            if (hasFailedOnce) {
+              growl.success('<h4>WebSocket</h4>' + gettext('Connected successfully.') + '<refresh-page></refresh-page>', {ttl: 2000})
+            }
+          } else {
+            switch (newValue) {
+              case 'disconnect':
+                growl.error('<h4>WebSocket</h4>' + gettext('Disconnected.'), {ttl: 2000})
+                break;
+              case 'connect_failed':
+                growl.error('<h4>WebSocket</h4>' + gettext('Error while connecting.'), {ttl: 2000})
+                break;
+              case 'error':
+                growl.error('<h4>WebSocket</h4>' + gettext('Error.'), {ttl: 2000})
+                break;
+              case 'reconnect_failed':
+                growl.error('<h4>WebSocket</h4>' + gettext('Error while reconnecting.'), {ttl: 2000})
+                break;
+              case 'reconnect':
+                growl.success('<h4>WebSocket</h4>' + gettext('Reconnected successfully.'), {ttl: 10000})
+                break;
+              case 'reconnecting':
+                growl.error('<h4>WebSocket</h4>' + gettext('Reconnecting...') + '<refresh-page></refresh-page>', {ttl: 10000})
+                break;
+            }
+          }
+        }
+      })
     }
   }
 }