diff --git a/res/app/components/stf/basic-mode/basic-mode-directive.js b/res/app/components/stf/basic-mode/basic-mode-directive.js
new file mode 100644
index 00000000..34cf29e5
--- /dev/null
+++ b/res/app/components/stf/basic-mode/basic-mode-directive.js
@@ -0,0 +1,15 @@
+module.exports = function basicModeDirective($rootScope, BrowserInfo) {
+  return {
+    restrict: 'AE',
+    link: function (scope, element, attrs) {
+      $rootScope.basicMode = !!BrowserInfo.small // TODO: use .mobile
+      if ($rootScope.basicMode) {
+        element.addClass('basic-mode')
+      }
+
+      if (BrowserInfo.mobile) {
+        element.addClass('mobile')
+      }
+    }
+  }
+}
diff --git a/res/app/components/stf/basic-mode/basic-mode-spec.js b/res/app/components/stf/basic-mode/basic-mode-spec.js
new file mode 100644
index 00000000..7e104919
--- /dev/null
+++ b/res/app/components/stf/basic-mode/basic-mode-spec.js
@@ -0,0 +1,23 @@
+describe('basicMode', function () {
+
+  beforeEach(module('stf.basic-mode'));
+
+  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 basic-mode name="name">hi</div>')(scope);
+     expect(element.text()).toBe('hello, world');
+     */
+
+  });
+});
\ No newline at end of file
diff --git a/res/app/components/stf/basic-mode/index.js b/res/app/components/stf/basic-mode/index.js
new file mode 100644
index 00000000..ada1adee
--- /dev/null
+++ b/res/app/components/stf/basic-mode/index.js
@@ -0,0 +1,4 @@
+module.exports = angular.module('stf.basic-mode', [
+
+])
+  .directive('basicMode', require('./basic-mode-directive'))
diff --git a/res/app/layout/index.js b/res/app/layout/index.js
index 553f4d4d..e70f8e09 100644
--- a/res/app/layout/index.js
+++ b/res/app/layout/index.js
@@ -24,6 +24,7 @@ require('angular-loading-bar/src/loading-bar.js')
 require('angular-loading-bar/src/loading-bar.css')
 
 module.exports = angular.module('layout', [
+  require('stf/basic-mode').name,
   'ui.bootstrap',
   'fa.directive.borderLayout',
   'angular-loading-bar',
diff --git a/res/app/layout/layout-controller.js b/res/app/layout/layout-controller.js
index 329051f0..59a15943 100644
--- a/res/app/layout/layout-controller.js
+++ b/res/app/layout/layout-controller.js
@@ -1,10 +1,3 @@
-module.exports = function LayoutCtrl(FatalMessageService, BrowserInfo, $rootScope) {
-
-  $rootScope.basicMode = false
-  if (BrowserInfo.small) {
-    $rootScope.basicMode = true
-  } else {
-    $rootScope.basicMode = false
-  }
+module.exports = function LayoutCtrl(FatalMessageService) {
 
 }
diff --git a/res/app/views/index.jade b/res/app/views/index.jade
index f9841046..2c109388 100644
--- a/res/app/views/index.jade
+++ b/res/app/views/index.jade
@@ -5,7 +5,7 @@ html
     meta(name='viewport', content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui')
     title STF
   body(ng-app='app', ng-cloak).bg-1.fill-height
-    div(ng-controller='LayoutCtrl').fill-height
+    div(ng-controller='LayoutCtrl', basic-mode).fill-height
       div(pane).fill-height
         .pane-top-bar(pane, pane-anchor='north', pane-size='46px', pane-min='46px', pane-max='46px', pane-handle='')
           div(ng-include='"menu.jade"')