diff --git a/res/app/app.js b/res/app/app.js
index f8123143..1f8fee60 100644
--- a/res/app/app.js
+++ b/res/app/app.js
@@ -10,6 +10,7 @@ angular.module('app', [
   require('./device-list').name,
   require('./device-control').name,
   require('./control-panes').name,
+  require('./menu').name,
   require('./settings').name,
   require('./help').name
 ])
diff --git a/res/app/components/stf/page-visibility/index.js b/res/app/components/stf/page-visibility/index.js
new file mode 100644
index 00000000..5de1e9f3
--- /dev/null
+++ b/res/app/components/stf/page-visibility/index.js
@@ -0,0 +1,4 @@
+module.exports = angular.module('stf.page-visibility', [
+
+])
+  .directive('pageVisibility', require('./page-visibility-directive'))
diff --git a/res/app/components/stf/page-visibility/page-visibility-directive.js b/res/app/components/stf/page-visibility/page-visibility-directive.js
new file mode 100644
index 00000000..5703fad1
--- /dev/null
+++ b/res/app/components/stf/page-visibility/page-visibility-directive.js
@@ -0,0 +1,23 @@
+module.exports = function pageVisibilityDirective($document, $rootScope) {
+  return {
+    restrict: 'A',
+    link: function (scope, element, attrs) {
+
+      function pageVisibilityChanged() {
+        if (document.hidden) {
+          $rootScope.$broadcast('pageHidden')
+        } else {
+          $rootScope.$broadcast('pageVisible');
+          // Application is visible to the user
+          // Adjust polling rates and display update for active display mode
+        }
+      }
+
+      document.addEventListener('visibilitychange', pageVisibilityChanged, false)
+
+      scope.$on('$destroy', function () {
+        angular.element(document).unbind('visibilitychange');
+      })
+    }
+  }
+}
diff --git a/res/app/components/stf/page-visibility/page-visibility-spec.js b/res/app/components/stf/page-visibility/page-visibility-spec.js
new file mode 100644
index 00000000..f01d170c
--- /dev/null
+++ b/res/app/components/stf/page-visibility/page-visibility-spec.js
@@ -0,0 +1,23 @@
+describe('pageVisibility', function () {
+
+  beforeEach(module('stf.page-visibility'));
+
+  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 page-visibility name="name">hi</div>')(scope);
+     expect(element.text()).toBe('hello, world');
+     */
+
+  });
+});
\ No newline at end of file
diff --git a/res/app/layout/stf-styles.css b/res/app/layout/stf-styles.css
index ddbe3dee..4e4307e6 100644
--- a/res/app/layout/stf-styles.css
+++ b/res/app/layout/stf-styles.css
@@ -349,71 +349,6 @@ svg {
     text-align: left;
 }
 
-.stf-logo {
-    background: url(../../bower_components/stf-graphics/logo/exports/STF-128.png) no-repeat 0 0;
-    width: 32px;
-    height: 32px;
-    float: left;
-    text-indent: -9999em;
-    margin: 7px 10px 0 0;
-    background-size: 100% auto;
-    -webkit-background-size: 100% auto;
-}
-
-.stf-top-bar {
-    height: 46px;
-    /*border-bottom: 1px solid #e6e6e6;*/
-    padding: 0 10px 0 20px;
-    width: 100%;
-    float: left;
-}
-
-.stf-nav {
-    padding-left: 15px;
-    text-align: left;
-    margin: 0;
-    float: left;
-}
-
-.stf-nav > li {
-    padding-right: 15px;
-    float: left;
-    display: inline-block;
-    text-align: left;
-    position: relative;
-    margin: 0;
-}
-
-.stf-nav > li > a {
-    display: inline-block;
-    text-align: left;
-    padding: 0 !important;
-    padding-right: 18px !important;
-    padding-left: 14px !important;
-    font-size: 16px;
-    line-height: 44px;
-    height: 46px;
-    color: #777777;
-    /*border-bottom: 1px solid #eee;*/
-    font-weight: 400;
-    height: 45px;
-    position: relative;
-}
-
-.stf-nav > li > a > span {
-    display: inline-block;
-    float: left;
-    margin: 8px 8px 0 0;
-    font-size: 28px;
-    /*width: 28px;*/
-    /*height: 28px;*/
-}
-
-.stf-nav > li > a.current {
-    color: #007aff;
-    /*border-bottom: 1px solid #eee;*/
-    /*border-bottom-color: #007aff;*/
-}
 
 .remote-control {
     background: #888;
diff --git a/res/app/menu/index.js b/res/app/menu/index.js
new file mode 100644
index 00000000..514fdcc0
--- /dev/null
+++ b/res/app/menu/index.js
@@ -0,0 +1,8 @@
+require('./menu.css')
+
+module.exports = angular.module('stf.menu', [
+])
+  .run(["$templateCache", function ($templateCache) {
+    $templateCache.put('menu.jade', require('./menu.jade'))
+  }])
+  .controller('MenuCtrl', require('./menu-controller'))
diff --git a/res/app/menu/menu-controller.js b/res/app/menu/menu-controller.js
new file mode 100644
index 00000000..3f9aaaf2
--- /dev/null
+++ b/res/app/menu/menu-controller.js
@@ -0,0 +1,3 @@
+module.exports = function MenuCtrl($scope) {
+    
+}
diff --git a/res/app/menu/menu-spec.js b/res/app/menu/menu-spec.js
new file mode 100644
index 00000000..03f05b4c
--- /dev/null
+++ b/res/app/menu/menu-spec.js
@@ -0,0 +1,17 @@
+describe('MenuCtrl', function () {
+
+  beforeEach(module('stf.menu'));
+
+  var scope, ctrl;
+
+  beforeEach(inject(function ($rootScope, $controller) {
+    scope = $rootScope.$new();
+    ctrl = $controller('MenuCtrl', {$scope: scope});
+  }));
+
+  it('should ...', inject(function () {
+    expect(1).toEqual(1);
+
+  }));
+
+});
\ No newline at end of file
diff --git a/res/app/menu/menu.css b/res/app/menu/menu.css
new file mode 100644
index 00000000..ecb369f3
--- /dev/null
+++ b/res/app/menu/menu.css
@@ -0,0 +1,65 @@
+.stf-menu .stf-logo {
+  background: url(../../bower_components/stf-graphics/logo/exports/STF-128.png) no-repeat 0 0;
+  width: 32px;
+  height: 32px;
+  float: left;
+  text-indent: -9999em;
+  margin: 7px 10px 0 0;
+  background-size: 100% auto;
+  -webkit-background-size: 100% auto;
+}
+
+.stf-menu .stf-top-bar {
+  height: 46px;
+  /*border-bottom: 1px solid #e6e6e6;*/
+  padding: 0 10px 0 20px;
+  width: 100%;
+  float: left;
+}
+
+.stf-menu .stf-nav {
+  padding-left: 15px;
+  text-align: left;
+  margin: 0;
+  float: left;
+}
+
+.stf-menu .stf-nav > li {
+  padding-right: 15px;
+  float: left;
+  display: inline-block;
+  text-align: left;
+  position: relative;
+  margin: 0;
+}
+
+.stf-menu .stf-nav > li > a {
+  display: inline-block;
+  text-align: left;
+  padding: 0 !important;
+  padding-right: 18px !important;
+  padding-left: 14px !important;
+  font-size: 16px;
+  line-height: 44px;
+  height: 46px;
+  color: #777777;
+  /*border-bottom: 1px solid #eee;*/
+  font-weight: 400;
+  height: 45px;
+  position: relative;
+}
+
+.stf-menu .stf-nav > li > a > span {
+  display: inline-block;
+  float: left;
+  margin: 8px 8px 0 0;
+  font-size: 28px;
+  /*width: 28px;*/
+  /*height: 28px;*/
+}
+
+.stf-menu .stf-nav > li > a.current {
+  color: #007aff;
+  /*border-bottom: 1px solid #eee;*/
+  /*border-bottom-color: #007aff;*/
+}
diff --git a/res/app/menu/menu.jade b/res/app/menu/menu.jade
new file mode 100644
index 00000000..04813a2d
--- /dev/null
+++ b/res/app/menu/menu.jade
@@ -0,0 +1,23 @@
+.navbar.stf-menu
+  .container-fluid.stf-top-bar
+    a.stf-logo(href="/") STF 2
+    ul.nav.stf-nav
+      li(ng-cloak)
+        a(href='/#!/control')
+          span.fa.fa-mobile
+          | {{"Control"|translate}}
+        a(href='/#!/devices')
+          span.fa.fa-sitemap
+          | {{"Devices"|translate}}
+        a(href='/#!/settings')
+          span.fa.fa-gears
+          | {{"Settings"|translate}}
+    ul.nav.stf-nav.stf-feedback.pull-right(ng-cloak)
+      li.stf-nav-web-native-button
+        .btn-group
+          button(type='button', ng-model='$root.platform', btn-radio="'web'", translate).btn.btn-sm.btn-default-outline Web
+          button(type='button', ng-model='$root.platform', btn-radio="'native'", translate).btn.btn-sm.btn-default-outline Native
+      li
+        a(ng-href='/#!/help')
+          i.fa.fa-question-circle
+          | {{"Help"|translate}}
diff --git a/res/app/views/index.jade b/res/app/views/index.jade
index 01b4e3e5..cc34131d 100644
--- a/res/app/views/index.jade
+++ b/res/app/views/index.jade
@@ -7,31 +7,8 @@ html
     div(ng-controller='LayoutCtrl').fill-height
       div(pane).fill-height
         .pane-top-bar(pane, pane-anchor='north', pane-size='46px', pane-min='46px', pane-max='46px', pane-handle='')
-          .navbar
-            .container-fluid.stf-top-bar
-              a.stf-logo(href="/") STF
-              ul.nav.stf-nav
-                li(ng-cloak)
-                  a(href='/#!/control')
-                    span.fa.fa-mobile
-                    | {{"Control"|translate}}
-                  a(href='/#!/devices')
-                    span.fa.fa-sitemap
-                    | {{"Devices"|translate}}
-                  a(href='/#!/settings')
-                    span.fa.fa-gears
-                    | {{"Settings"|translate}}
-              ul.nav.stf-nav.stf-feedback.pull-right(ng-cloak)
-                li.stf-nav-web-native-button
-                  .btn-group
-                    button(type='button', ng-model='$root.platform', btn-radio="'web'", translate).btn.btn-sm.btn-default-outline Web
-                    button(type='button', ng-model='$root.platform', btn-radio="'native'", translate).btn.btn-sm.btn-default-outline Native
-                li
-                  a(ng-href='/#!/help')
-                    i.fa.fa-question-circle
-                    | {{"Help"|translate}}
+          div(ng-include='"menu.jade"')
         div(pane, pane-anchor='center').fill-height
           div(ng-view).fill-height
 
-    //div(ng-view)
     script(src='/static/build/bundle.js')
\ No newline at end of file