diff --git a/res/app/components/stf/common-ui/counter/counter-directive.js b/res/app/components/stf/common-ui/counter/counter-directive.js
new file mode 100644
index 00000000..3ebb410b
--- /dev/null
+++ b/res/app/components/stf/common-ui/counter/counter-directive.js
@@ -0,0 +1,63 @@
+module.exports = function counterDirective($timeout, $$rAF) {
+  return {
+    replace: false,
+    scope: true,
+    link: function (scope, element, attrs) {
+      // TODO: use $$rAF later
+
+      var el = element[0]
+      var num, refreshInterval, duration, steps, step, countTo, increment
+
+      var calculate = function () {
+        refreshInterval = 32
+        step = 0
+        scope.timoutId = null
+        countTo = parseInt(attrs.countTo) || 0
+        scope.value = parseInt(attrs.value, 10) || 0
+        duration = parseFloat(attrs.duration) || 0
+
+        steps = Math.ceil(duration / refreshInterval)
+
+        increment = ((countTo - scope.value) / steps)
+        num = scope.value
+      }
+
+      var tick = function () {
+        scope.timoutId = $timeout(function () {
+          num += increment
+          step++
+          if (step >= steps) {
+            $timeout.cancel(scope.timoutId)
+            num = countTo
+            el.innerText = countTo
+          } else {
+            el.innerText = Math.round(num)
+            tick()
+          }
+        }, refreshInterval)
+
+      }
+
+      var start = function () {
+        if (scope.timoutId) {
+          $timeout.cancel(scope.timoutId)
+        }
+        calculate()
+        tick()
+      }
+
+      attrs.$observe('countTo', function (val) {
+        if (val) {
+          start()
+        }
+      })
+
+      attrs.$observe('value', function (val) {
+        start()
+      })
+
+      return true
+    }
+  }
+
+}
diff --git a/res/app/components/stf/common-ui/counter/counter-spec.js b/res/app/components/stf/common-ui/counter/counter-spec.js
new file mode 100644
index 00000000..98017391
--- /dev/null
+++ b/res/app/components/stf/common-ui/counter/counter-spec.js
@@ -0,0 +1,23 @@
+describe('counter', function () {
+
+  beforeEach(module('stf.counter'));
+
+  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 counter 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/counter/index.js b/res/app/components/stf/common-ui/counter/index.js
new file mode 100644
index 00000000..aec9ccfa
--- /dev/null
+++ b/res/app/components/stf/common-ui/counter/index.js
@@ -0,0 +1,4 @@
+module.exports = angular.module('stf.counter', [
+
+])
+  .directive('counter', require('./counter-directive'))
diff --git a/res/app/components/stf/common-ui/index.js b/res/app/components/stf/common-ui/index.js
index 5c7c7e3f..ffd378f1 100644
--- a/res/app/components/stf/common-ui/index.js
+++ b/res/app/components/stf/common-ui/index.js
@@ -10,5 +10,6 @@ module.exports = angular.module('stf/common-ui', [
   //require('./tree').name,
   require('./modals').name,
   require('./include-cached').name,
-  require('./text-focus-select').name
+  require('./text-focus-select').name,
+  require('./counter').name
 ])
diff --git a/res/app/device-list/device-list-stats.jade b/res/app/device-list/device-list-stats.jade
index 51081240..d5321a9b 100644
--- a/res/app/device-list/device-list-stats.jade
+++ b/res/app/device-list/device-list-stats.jade
@@ -2,21 +2,20 @@
   .col-md-3
     .number
       .icon.fa.fa-globe.visitors
-      span(ng-bind='counter.total') 0
+      span(counter, count-from='0', count-to='{{counter.total}}', duration='100')
     .text(translate) Total devices
   .col-md-3
     .number
       .icon.fa.fa-check.visitors
-      span(ng-bind='counter.usable') 0
+      span(counter, count-from='0', count-to='{{counter.usable}}', duration='100')
     .text(translate) Usable devices
   .col-md-3
     .number
       .icon.fa.fa-users.visitors
-      span(ng-bind='counter.busy') 0
+      span(counter, count-from='0', count-to='{{counter.busy}}', duration='100')
     .text(translate) Busy devices
   .col-md-3
     .number
       .icon.fa.fa-user.visitors
-      span(ng-bind='counter.using') 0
-    //.text(translate) Using
+      span(counter, count-from='0', count-to='{{counter.using}}', duration='100')
     .text(ng-bind='currentUser.name')