diff --git a/.jshintrc b/.jshintrc
index 74a30d8f..f18a4487 100644
--- a/.jshintrc
+++ b/.jshintrc
@@ -24,6 +24,7 @@
     "beforeEach": false,
     "after": false,
     "afterEach": false,
-    "inject": false
+    "inject": false,
+    "angular": false
   }
 }
diff --git a/res/app/components/stf/common-ui/clear-button/clear-button-directive.js b/res/app/components/stf/common-ui/clear-button/clear-button-directive.js
new file mode 100644
index 00000000..1b8aea65
--- /dev/null
+++ b/res/app/components/stf/common-ui/clear-button/clear-button-directive.js
@@ -0,0 +1,8 @@
+module.exports = function clearButtonDirective() {
+  return {
+    restrict: 'EA',
+    replace: true,
+    scope: {},
+    template: require('./clear-button.jade')
+  }
+}
diff --git a/res/app/components/stf/common-ui/clear-button/clear-button-spec.js b/res/app/components/stf/common-ui/clear-button/clear-button-spec.js
new file mode 100644
index 00000000..0ca3aaa8
--- /dev/null
+++ b/res/app/components/stf/common-ui/clear-button/clear-button-spec.js
@@ -0,0 +1,23 @@
+describe('clearButton', function () {
+
+  beforeEach(module('stf.clear-button'));
+
+  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 clear-button 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/clear-button/clear-button.jade b/res/app/components/stf/common-ui/clear-button/clear-button.jade
new file mode 100644
index 00000000..d63f2dae
--- /dev/null
+++ b/res/app/components/stf/common-ui/clear-button/clear-button.jade
@@ -0,0 +1,3 @@
+button.btn.btn-sm.btn-danger-outline.pull-right
+  i.fa.fa-trash-o
+  span(translate) Clear
\ No newline at end of file
diff --git a/res/app/components/stf/common-ui/clear-button/index.js b/res/app/components/stf/common-ui/clear-button/index.js
new file mode 100644
index 00000000..fb4023b9
--- /dev/null
+++ b/res/app/components/stf/common-ui/clear-button/index.js
@@ -0,0 +1,2 @@
+module.exports = angular.module('stf.clear-button', [])
+  .directive('clearButton', require('./clear-button-directive'))
diff --git a/res/app/components/stf/common-ui/filter-button/filter-button-directive.js b/res/app/components/stf/common-ui/filter-button/filter-button-directive.js
new file mode 100644
index 00000000..e7a4b63b
--- /dev/null
+++ b/res/app/components/stf/common-ui/filter-button/filter-button-directive.js
@@ -0,0 +1,9 @@
+module.exports = function filterButtonDirective() {
+  return {
+    require: 'ngModel',
+    restrict: 'EA',
+    replace: true,
+    scope: {},
+    template: require('./filter-button.jade')
+  }
+}
diff --git a/res/app/components/stf/common-ui/filter-button/filter-button-spec.js b/res/app/components/stf/common-ui/filter-button/filter-button-spec.js
new file mode 100644
index 00000000..f3214f5a
--- /dev/null
+++ b/res/app/components/stf/common-ui/filter-button/filter-button-spec.js
@@ -0,0 +1,23 @@
+describe('filterButton', function () {
+
+  beforeEach(module('stf.filter-button'));
+
+  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 clear-button 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/filter-button/filter-button.jade b/res/app/components/stf/common-ui/filter-button/filter-button.jade
new file mode 100644
index 00000000..751852fe
--- /dev/null
+++ b/res/app/components/stf/common-ui/filter-button/filter-button.jade
@@ -0,0 +1,3 @@
+button(btn-checkbox, title='{{"Filter"|translate}}').btn.btn-sm.btn-primary-outline.pull-right
+  i.fa.fa-filter
+  span {{"Filter"|translate}}
\ No newline at end of file
diff --git a/res/app/components/stf/common-ui/filter-button/index.js b/res/app/components/stf/common-ui/filter-button/index.js
new file mode 100644
index 00000000..25e70392
--- /dev/null
+++ b/res/app/components/stf/common-ui/filter-button/index.js
@@ -0,0 +1,2 @@
+module.exports = angular.module('stf.filter-button', [])
+  .directive('filterButton', require('./filter-button-directive'))
diff --git a/res/app/components/stf/common-ui/index.js b/res/app/components/stf/common-ui/index.js
new file mode 100644
index 00000000..2d1f769e
--- /dev/null
+++ b/res/app/components/stf/common-ui/index.js
@@ -0,0 +1,5 @@
+module.exports = angular.module('stf/common-ui', [
+  require('./clear-button').name,
+  require('./filter-button').name,
+  require('./nothing-to-show').name
+])
\ No newline at end of file
diff --git a/res/app/components/stf/common/nothing-to-show/index.js b/res/app/components/stf/common-ui/nothing-to-show/index.js
similarity index 60%
rename from res/app/components/stf/common/nothing-to-show/index.js
rename to res/app/components/stf/common-ui/nothing-to-show/index.js
index 4934199d..963b2399 100644
--- a/res/app/components/stf/common/nothing-to-show/index.js
+++ b/res/app/components/stf/common-ui/nothing-to-show/index.js
@@ -1,4 +1,4 @@
 require('./nothing-to-show.css')
 
-module.exports = angular.module('stf/common/nothing-to-show', [])
+module.exports = angular.module('stf/common-ui/nothing-to-show', [])
   .directive('nothingToShow', require('./nothing-to-show-directive'))
diff --git a/res/app/components/stf/common/nothing-to-show/nothing-to-show-directive.js b/res/app/components/stf/common-ui/nothing-to-show/nothing-to-show-directive.js
similarity index 100%
rename from res/app/components/stf/common/nothing-to-show/nothing-to-show-directive.js
rename to res/app/components/stf/common-ui/nothing-to-show/nothing-to-show-directive.js
diff --git a/res/app/components/stf/common/nothing-to-show/nothing-to-show.css b/res/app/components/stf/common-ui/nothing-to-show/nothing-to-show.css
similarity index 100%
rename from res/app/components/stf/common/nothing-to-show/nothing-to-show.css
rename to res/app/components/stf/common-ui/nothing-to-show/nothing-to-show.css
diff --git a/res/app/components/stf/common/nothing-to-show/nothing-to-show.html b/res/app/components/stf/common-ui/nothing-to-show/nothing-to-show.html
similarity index 100%
rename from res/app/components/stf/common/nothing-to-show/nothing-to-show.html
rename to res/app/components/stf/common-ui/nothing-to-show/nothing-to-show.html
diff --git a/res/app/device-list/device-list.jade b/res/app/device-list/device-list.jade
index 286b1bf5..7b32a4e9 100644
--- a/res/app/device-list/device-list.jade
+++ b/res/app/device-list/device-list.jade
@@ -4,7 +4,7 @@ div.stf-device-list
       .widget-container.fluid-height
         .widget-content.padded
           tabset.unselectable
-            tab
+            tab(active='activeTabs.devices')
               tab-heading
                 i.fa.fa-th-large
                 span(translate) Devices
@@ -33,16 +33,19 @@ div.stf-device-list
                   button.btn.btn-default.btn-xs.device-status {{statusName(device)}}
                 .clear-fix
 
-            tab(heading='Details')
+            tab(active='activeTabs.details')
               tab-heading
                 i.fa.fa-list(translate)
                 span(translate) Details
               nothing-to-show(message='{{"No devices connected"|translate}}', icon='fa-sitemap', ng-show='!tracker.devices.length')
 
-              p
-                button(ng-click="tableParams.sorting({}); tableParams.filter({})").btn.btn-default-outline.btn-sm.pull-right Clear
+              div
+                clear-button(ng-click="tableParams.sorting({}); tableParams.filter({})")
+                filter-button(ng-model='filterEnabled')
 
-              table.table.table-hover(ng-table='tableParams', show-filter='true', ng-show='tracker.devices.length')
+
+              table.table.table-hover(ng-table='tableParams',
+              show-filter='filterEnabled', ng-show='tracker.devices.length')
                 //.cursor.selectable
                 //thead
                   tr
@@ -69,8 +72,12 @@ div.stf-device-list
 
                 //tbody
                 tr(ng-repeat='device in $data')
-                  td(data-title="'Use'", sortable='"state"')
-                    button(ng-class='{"btn-primary": device.state == "using", "btn-primary-outline": device.state == "available"}',
+                  td(data-title="'Status'",
+                  sortable='"state"',
+                  filter="{ 'usable': 'select' }",
+                  filter-data="statusFilter($column)")
+                    button(ng-class='{"btn-primary": device.state == "using", \
+                    "btn-primary-outline": device.state == "available"}',
                       ng-click='toggle(device)').btn.btn-xs.device-status {{statusName(device)}}
                   td(data-title="'Model'", sortable='"model"', filter='{"model": "text"}')
                     span {{device.model}}
diff --git a/res/app/device-list/index.js b/res/app/device-list/index.js
index 48bb33ff..a778825a 100644
--- a/res/app/device-list/index.js
+++ b/res/app/device-list/index.js
@@ -6,7 +6,7 @@ require('ng-table/ng-table.css')
 module.exports = angular.module('device-list', [
   require('stf/device').name,
   require('stf/user/group').name,
-  require('stf/common/nothing-to-show').name,
+  require('stf/common-ui').name,
   'ngTable'
 ])
   .config(['$routeProvider', function ($routeProvider) {
@@ -15,5 +15,4 @@ module.exports = angular.module('device-list', [
       controller: 'DeviceListCtrl'
     })
   }])
-  .controller('DeviceListCtrl', require('./device-list-controller'))
-  .controller('ShellCommandCtrl', require('./shell-controller'))
+  .controller('DeviceListCtrl', require('./device-list-controller'))
\ No newline at end of file
diff --git a/res/app/device-list/shell-controller.js b/res/app/device-list/shell-controller.js
deleted file mode 100644
index e9f3c63b..00000000
--- a/res/app/device-list/shell-controller.js
+++ /dev/null
@@ -1,16 +0,0 @@
-module.exports = function ShellCommandCtrl($scope) {
-  $scope.results = []
-
-  $scope.run = function(command) {
-    var cmd = $scope.control.shell(command)
-    return cmd.promise
-      .progressed(function(results) {
-        $scope.results = results
-        $scope.$digest()
-      })
-      .then(function(results) {
-        $scope.results = results
-        $scope.$digest()
-      })
-  }
-}