diff --git a/res/app/components/stf/basic-mode/index.js b/res/app/components/stf/basic-mode/index.js
index d46d5e13..160f6040 100644
--- a/res/app/components/stf/basic-mode/index.js
+++ b/res/app/components/stf/basic-mode/index.js
@@ -1,6 +1,5 @@
 require('./basic-mode.css')
 
 module.exports = angular.module('stf.basic-mode', [
-
 ])
   .directive('basicMode', require('./basic-mode-directive'))
diff --git a/res/app/components/stf/landscape/index.js b/res/app/components/stf/landscape/index.js
new file mode 100644
index 00000000..6420d66c
--- /dev/null
+++ b/res/app/components/stf/landscape/index.js
@@ -0,0 +1,4 @@
+module.exports = angular.module('stf.landscape', [
+  require('stf/browser-info').name
+])
+  .directive('landscape', require('./landscape-directive'))
diff --git a/res/app/components/stf/landscape/landscape-directive.js b/res/app/components/stf/landscape/landscape-directive.js
new file mode 100644
index 00000000..ae9090eb
--- /dev/null
+++ b/res/app/components/stf/landscape/landscape-directive.js
@@ -0,0 +1,52 @@
+module.exports = function landscapeDirective(BrowserInfo, $document, $window, $rootScope) {
+  return {
+    restrict: 'A',
+    link: function (scope, element, attrs) {
+      console.log($window.orientation)
+
+      if (typeof $window.orientation !== 'undefined') {
+        if ($window.orientation === 0) {
+          rotateHostAndGuest(true)
+        } else {
+          rotateHostAndGuest(false)
+        }
+      }
+
+      function rotateHostAndGuest(portrait) {
+        //console.log(scope.control)
+        if (portrait) {
+          if (scope.control) {
+            scope.control.rotate(0)
+          }
+          angular.element($document[0].body).addClass('guest-portrait')
+          angular.element($document[0].body).removeClass('guest-landscape')
+        } else {
+          if (scope.control) {
+            scope.control.rotate(90)
+          }
+          angular.element($document[0].body).addClass('guest-landscape')
+          angular.element($document[0].body).removeClass('guest-portrait')
+        }
+      }
+
+      function guestDisplayRotatated(eventData) {
+        var isPortrait = (window.innerHeight > window.innerWidth)
+        rotateHostAndGuest(isPortrait)
+      }
+
+      if (BrowserInfo.deviceorientation) {
+        window.addEventListener('orientationchange', guestDisplayRotatated, true)
+      }
+
+      function off() {
+        if (BrowserInfo.deviceorientation) {
+          window.removeEventListener('orientationchange', guestDisplayRotatated)
+        }
+      }
+
+      scope.$on('$destroy', off)
+
+
+    }
+  }
+}
diff --git a/res/app/components/stf/landscape/landscape-spec.js b/res/app/components/stf/landscape/landscape-spec.js
new file mode 100644
index 00000000..95f16600
--- /dev/null
+++ b/res/app/components/stf/landscape/landscape-spec.js
@@ -0,0 +1,23 @@
+describe('landscape', function () {
+
+  beforeEach(module('stf.landscape'));
+
+  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 landscape name="name">hi</div>')(scope);
+     expect(element.text()).toBe('hello, world');
+     */
+
+  });
+});
\ No newline at end of file
diff --git a/res/app/components/stf/screen/screen-directive.js b/res/app/components/stf/screen/screen-directive.js
index bc76c08d..186c7dab 100644
--- a/res/app/components/stf/screen/screen-directive.js
+++ b/res/app/components/stf/screen/screen-directive.js
@@ -274,10 +274,6 @@ module.exports = function DeviceScreenDirective($document, ScalingService, Vendo
         } else {
           element.unbind('mousedown', downListener)
         }
-
-        if (BrowserInfo.deviceorientation) {
-          window.removeEventListener('orientationchange', guestDisplayRotatated)
-        }
       }
 
       scope.$watch('$parent.showScreen', function (val) {
@@ -306,23 +302,6 @@ module.exports = function DeviceScreenDirective($document, ScalingService, Vendo
         rotation = r || 0
       })
 
-      function guestDisplayRotatated(eventData) {
-        var isPortrait = (window.innerHeight > window.innerWidth)
-        if (isPortrait) {
-          scope.control.rotate(0)
-          angular.element($document[0].body).addClass('guest-portrait')
-          angular.element($document[0].body).removeClass('guest-landscape')
-        } else {
-          scope.control.rotate(90)
-          angular.element($document[0].body).addClass('guest-landscape')
-          angular.element($document[0].body).removeClass('guest-portrait')
-        }
-      }
-
-      if (BrowserInfo.deviceorientation) {
-        window.addEventListener('orientationchange', guestDisplayRotatated, true)
-      }
-
       scope.$on('$destroy', off)
     }
   }
diff --git a/res/app/layout/index.js b/res/app/layout/index.js
index e70f8e09..f020598b 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/landscape').name,
   require('stf/basic-mode').name,
   'ui.bootstrap',
   'fa.directive.borderLayout',
diff --git a/res/app/views/index.jade b/res/app/views/index.jade
index 4fef9d84..4f863a8c 100644
--- a/res/app/views/index.jade
+++ b/res/app/views/index.jade
@@ -12,7 +12,7 @@ html
 
     title STF
   body(ng-app='app', ng-cloak).bg-1.fill-height
-    div(ng-controller='LayoutCtrl', basic-mode).fill-height
+    div(ng-controller='LayoutCtrl', basic-mode, landscape).fill-height
       .pane-top(pane).fill-height
         .pane-top-bar(pane, pane-anchor='north', pane-size='44px', pane-min='44px', pane-max='44px', pane-handle='')
           div(ng-include='"menu.jade"')