diff --git a/bower.json b/bower.json
index b2ccfa88..5f97b891 100644
--- a/bower.json
+++ b/bower.json
@@ -28,6 +28,7 @@
   },
   "private": true,
   "resolutions": {
-    "angular": "~1.3.0-beta.2"
+    "angular": "~1.3.0-beta.2",
+    "localforage": "0.2.0"
   }
 }
diff --git a/res/app/components/stf/common-ui/safe-apply/index.js b/res/app/components/stf/common-ui/safe-apply/index.js
new file mode 100644
index 00000000..ff4bf5c3
--- /dev/null
+++ b/res/app/components/stf/common-ui/safe-apply/index.js
@@ -0,0 +1,20 @@
+module.exports = angular.module('stf.safe-apply', [])
+  .config([
+    '$provide', function ($provide) {
+      return $provide.decorator('$rootScope', [
+        '$delegate', function ($delegate) {
+          $delegate.safeApply = function (fn) {
+            var phase = $delegate.$$phase
+            if (phase === "$apply" || phase === "$digest") {
+              if (fn && typeof fn === 'function') {
+                fn()
+              }
+            } else {
+              $delegate.$apply(fn)
+            }
+          }
+          return $delegate
+        }
+      ])
+    }
+  ])
diff --git a/res/app/components/stf/common-ui/table/table.css b/res/app/components/stf/common-ui/table/table.css
index 4822ad47..23ee5c39 100644
--- a/res/app/components/stf/common-ui/table/table.css
+++ b/res/app/components/stf/common-ui/table/table.css
@@ -6,6 +6,7 @@
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
+  font-weight: bold;
 }
 
 .ng-table th.sortable {
diff --git a/res/app/components/stf/nav-menu/index.js b/res/app/components/stf/nav-menu/index.js
new file mode 100644
index 00000000..09f7229f
--- /dev/null
+++ b/res/app/components/stf/nav-menu/index.js
@@ -0,0 +1,2 @@
+module.exports = angular.module('stf.nav-menu', [])
+  .directive('navMenu', require('./nav-menu-directive'))
diff --git a/res/app/components/stf/nav-menu/nav-menu-directive.js b/res/app/components/stf/nav-menu/nav-menu-directive.js
new file mode 100644
index 00000000..7e5aec98
--- /dev/null
+++ b/res/app/components/stf/nav-menu/nav-menu-directive.js
@@ -0,0 +1,39 @@
+module.exports = function ($location) {
+  return function (scope, element, attrs) {
+    var links = element.find('a')
+    var onClass = attrs.navMenu || 'current'
+    var routePattern
+    var link
+    var url
+    var currentLink
+    var urlMap = {}
+    var i
+
+    if (!$location.$$html5) {
+      routePattern = /^#[^/]*/
+    }
+
+    for (i = 0; i < links.length; i++) {
+      link = angular.element(links[i])
+      url = link.attr('href')
+
+      if ($location.$$html5) {
+        urlMap[url] = link
+      } else {
+        urlMap[url.replace(routePattern, '')] = link
+      }
+    }
+
+    scope.$on('$routeChangeStart', function () {
+      var pathLink = urlMap[$location.path()]
+
+      if (pathLink) {
+        if (currentLink) {
+          currentLink.removeClass(onClass);
+        }
+        currentLink = pathLink;
+        currentLink.addClass(onClass);
+      }
+    })
+  }
+}
\ No newline at end of file
diff --git a/res/app/components/stf/nav-menu/nav-menu-spec.js b/res/app/components/stf/nav-menu/nav-menu-spec.js
new file mode 100644
index 00000000..1125ee1f
--- /dev/null
+++ b/res/app/components/stf/nav-menu/nav-menu-spec.js
@@ -0,0 +1,23 @@
+describe('navMenu', function () {
+
+  beforeEach(module('stf.nav-menu'));
+
+  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 nav-menu name="name">hi</div>')(scope);
+     expect(element.text()).toBe('hello, world');
+     */
+
+  });
+});
\ No newline at end of file
diff --git a/res/app/device-list/device-list.css b/res/app/device-list/device-list.css
index 512ff9d5..6429f696 100644
--- a/res/app/device-list/device-list.css
+++ b/res/app/device-list/device-list.css
@@ -6,6 +6,11 @@
   margin-top: -32px;
 }
 
+.stf-device-list .device-not-usable {
+  /*background: rgb(245, 245, 245);*/
+  opacity: 0.7;
+}
+
 .stf-device-list .devices-not-available {
   background: #f6f6f6;
 }
diff --git a/res/app/device-list/device-list.jade b/res/app/device-list/device-list.jade
index 08e2e9d0..5d391070 100644
--- a/res/app/device-list/device-list.jade
+++ b/res/app/device-list/device-list.jade
@@ -71,7 +71,7 @@ div.stf-device-list
                       div {{"User"|translate}}
 
                 //tbody
-                tr(ng-repeat='device in $data')
+                tr(ng-repeat='device in $data', ng-class='{ "device-not-usable": !device.usable }')
                   td(data-title="'Status'",
                   sortable='"state"',
                   filter="{ 'usable': 'select' }",
@@ -130,7 +130,7 @@ div.stf-device-list
                       a(ng-href='{{deviceUser(device).link}}', target='_blank') {{ deviceUser(device).name }}
 
 
-ul
+//ul
   li(ng-repeat='device in tracker.devices track by device.serial')
     pre {{device|json}}
 
diff --git a/res/app/menu/index.js b/res/app/menu/index.js
index 514fdcc0..0a517241 100644
--- a/res/app/menu/index.js
+++ b/res/app/menu/index.js
@@ -1,6 +1,7 @@
 require('./menu.css')
 
 module.exports = angular.module('stf.menu', [
+  require('stf/nav-menu').name
 ])
   .run(["$templateCache", function ($templateCache) {
     $templateCache.put('menu.jade', require('./menu.jade'))
diff --git a/res/app/menu/menu-controller.js b/res/app/menu/menu-controller.js
index 3f9aaaf2..1e1feadf 100644
--- a/res/app/menu/menu-controller.js
+++ b/res/app/menu/menu-controller.js
@@ -1,3 +1,16 @@
 module.exports = function MenuCtrl($scope) {
-    
+
+  $scope.isActive = function (viewLocation) {
+    var pattern = '/' + viewLocation,
+      re = new RegExp(pattern);
+    return re.test($location.path());
+  };
+
+  $scope.isActive = function (path) {
+    console.log($location.path())
+    console.log($location.path().substr(0, path.length))
+
+    return $location.path().substr(0, path.length) == path;
+  }
+
 }
diff --git a/res/app/menu/menu.jade b/res/app/menu/menu.jade
index 04813a2d..09fbf46c 100644
--- a/res/app/menu/menu.jade
+++ b/res/app/menu/menu.jade
@@ -1,7 +1,7 @@
 .navbar.stf-menu
   .container-fluid.stf-top-bar
     a.stf-logo(href="/") STF 2
-    ul.nav.stf-nav
+    ul.nav.stf-nav(nav-menu)
       li(ng-cloak)
         a(href='/#!/control')
           span.fa.fa-mobile
diff --git a/webpack.config.js b/webpack.config.js
index 364369b7..919aefa9 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -33,15 +33,15 @@ module.exports = {
     , { test: /\.png$/, loader: "url-loader?limit=5000&mimetype=image/png" }
     , { test: /\.gif$/, loader: "url-loader?limit=5000&mimetype=image/gif" }
     , { test: /\.svg$/
-      , loader: "url-loader?limit=5000&mimetype=image/svg+xml" }
+      , loader: "url-loader?limit=1&mimetype=image/svg+xml" }
     , { test: /\.woff$/
-      , loader: "url-loader?limit=5000&mimetype=application/font-woff" }
+      , loader: "url-loader?limit=1&mimetype=application/font-woff" }
     , { test: /\.otf$/
-      , loader: "url-loader?limit=5000&mimetype=application/font-woff" }
+      , loader: "url-loader?limit=1&mimetype=application/font-woff" }
     , { test: /\.ttf$/
-      , loader: "url-loader?limit=5000&mimetype=application/font-woff" }
+      , loader: "url-loader?limit=1&mimetype=application/font-woff" }
     , { test: /\.eot$/
-      , loader: "url-loader?limit=5000&mimetype=vnd.ms-fontobject" }
+      , loader: "url-loader?limit=1&mimetype=vnd.ms-fontobject" }
     , { test: /\.jade/
       , loader: 'template-html-loader' }
     , { test: /\.html/, loader: 'html-loader' }