diff --git a/apps/documenteditor/mobile/src/components/settings/controller/DocumentSettings.jsx b/apps/documenteditor/mobile/src/components/settings/controller/DocumentSettings.jsx
new file mode 100644
index 000000000..8af109245
--- /dev/null
+++ b/apps/documenteditor/mobile/src/components/settings/controller/DocumentSettings.jsx
@@ -0,0 +1,24 @@
+
+import React, {Component} from 'react';
+import DocumentSettings from '../document-settings/DocumentSettings'
+
+
+class DocumentSettingsController extends Component {
+    constructor(props) {
+        super(props);
+
+        console.log('controller created');
+    }
+
+    onPageOrientation(value){
+        console.log(`changed page orientation: ${value}`);
+    }
+
+    render() {
+        return (
+            <DocumentSettings onPageOrientation={this.onPageOrientation} />
+        )
+    }
+}
+
+export default DocumentSettingsController;
\ No newline at end of file
diff --git a/apps/documenteditor/mobile/src/components/settings/document-settings/DocumentSettings.jsx b/apps/documenteditor/mobile/src/components/settings/document-settings/DocumentSettings.jsx
index 8c86ccc35..331b5b22c 100644
--- a/apps/documenteditor/mobile/src/components/settings/document-settings/DocumentSettings.jsx
+++ b/apps/documenteditor/mobile/src/components/settings/document-settings/DocumentSettings.jsx
@@ -28,8 +28,8 @@ export default class DocumentSettings extends Component {
                 <Navbar title={textDocumentSettings} backLink={textBack} />
                 <BlockTitle>{textOrientation}</BlockTitle>
                 <List>
-                    <ListItem checkbox title={textPortrait} name="orientation-checkbox" defaultChecked></ListItem>
-                    <ListItem checkbox title={textLandscape} name="orientation-checkbox"></ListItem>
+                    <ListItem radio title={textPortrait} name="orientation-checkbox" defaultChecked onChange={e => this.props.onPageOrientation('portrait')}></ListItem>
+                    <ListItem radio title={textLandscape} name="orientation-checkbox" onChange={e => this.props.onPageOrientation('landscape')}></ListItem>
                 </List>
                 <BlockTitle>{textFormat}</BlockTitle>
                 <List mediaList>
diff --git a/apps/documenteditor/mobile/src/js/routes.js b/apps/documenteditor/mobile/src/js/routes.js
index cefa3d19b..6dc059e9c 100644
--- a/apps/documenteditor/mobile/src/js/routes.js
+++ b/apps/documenteditor/mobile/src/js/routes.js
@@ -1,8 +1,9 @@
 
 import HomePage from '../pages/home.jsx';
-import DocumentSettings from "../components/settings/document-settings/DocumentSettings.jsx";
+// import DocumentSettings from "../components/settings/document-settings/DocumentSettings.jsx";
 import Margins from "../components/settings/document-settings/Margins.jsx";
 import DocumentFormats from "../components/settings/document-settings/DocumentFormats.jsx";
+import DocumentSettingsController from "../components/settings/controller/DocumentSettings.jsx";
 
 import LeftPage1 from '../pages/left-page-1.jsx';
 import LeftPage2 from '../pages/left-page-2.jsx';
@@ -18,7 +19,7 @@ var routes = [
   },
   {
     path: '/document-settings/',
-    component: DocumentSettings,
+    component: DocumentSettingsController,
   },
   {
     path: '/users/',