diff --git a/demo-shell/src/app/app.component.html b/demo-shell/src/app/app.component.html
index 01a1ec089a..d06c2af228 100644
--- a/demo-shell/src/app/app.component.html
+++ b/demo-shell/src/app/app.component.html
@@ -1,2 +1,4 @@
-<router-outlet></router-outlet>
-<router-outlet name="overlay"></router-outlet>
+<div [dir]="textOrientation" class="adf-demo-app-container" >
+    <router-outlet></router-outlet>
+    <router-outlet name="overlay"></router-outlet>
+</div>
diff --git a/demo-shell/src/app/app.component.scss b/demo-shell/src/app/app.component.scss
index 88ac91260b..5e73563291 100644
--- a/demo-shell/src/app/app.component.scss
+++ b/demo-shell/src/app/app.component.scss
@@ -7,6 +7,11 @@ router-outlet[name='overlay'] + * {
     right: 0;
 }
 
+.adf-demo-app-container {
+    height: 100%;
+    width: 100%;
+}
+
 @media (max-width: 425px) {
     adf-content-node-selector {
         .adf-content-node-selector-content-list {
diff --git a/demo-shell/src/app/app.component.ts b/demo-shell/src/app/app.component.ts
index 650c73d023..365e7095fa 100644
--- a/demo-shell/src/app/app.component.ts
+++ b/demo-shell/src/app/app.component.ts
@@ -16,7 +16,12 @@
  */
 
 import { Component, ViewEncapsulation, OnInit } from '@angular/core';
-import { AuthenticationService, AlfrescoApiService, PageTitleService } from '@alfresco/adf-core';
+import {
+    UserPreferencesService,
+    AuthenticationService,
+    AlfrescoApiService,
+    PageTitleService
+} from '@alfresco/adf-core';
 import { Router } from '@angular/router';
 import { MatDialog } from '@angular/material';
 
@@ -28,14 +33,24 @@ import { MatDialog } from '@angular/material';
 })
 export class AppComponent implements OnInit {
 
+    textOrientation: string = 'ltr';
+
     constructor(private pageTitleService: PageTitleService,
                 private alfrescoApiService: AlfrescoApiService,
                 private authenticationService: AuthenticationService,
+                private userPreferencesService: UserPreferencesService,
                 private router: Router,
                 private dialogRef: MatDialog) {
+
+        this.userPreferencesService.set('textOrientation', this.textOrientation);
+
     }
 
     ngOnInit() {
+        this.userPreferencesService.select('textOrientation').subscribe((textOrientation) => {
+            this.textOrientation = textOrientation;
+        });
+
         this.pageTitleService.setTitle('title');
 
         this.alfrescoApiService.getInstance().on('error', (error) => {
diff --git a/demo-shell/src/app/components/config-editor/config-editor.component.html b/demo-shell/src/app/components/config-editor/config-editor.component.html
index cffed65c68..0b293de459 100644
--- a/demo-shell/src/app/components/config-editor/config-editor.component.html
+++ b/demo-shell/src/app/components/config-editor/config-editor.component.html
@@ -49,12 +49,12 @@
             </button>
         </mat-list-item>
 
-        <mat-list-item (click)="editProcessFilterConfClick()">	
-            <a matLine id="adf-edit-process-filter-conf">Edit process filter</a>	
-            <button mat-icon-button>	
-                <mat-icon>info</mat-icon>	
-            </button>	
-        </mat-list-item>	
+        <mat-list-item (click)="editProcessFilterConfClick()">
+            <a matLine id="adf-edit-process-filter-conf">Edit process filter</a>
+            <button mat-icon-button>
+                <mat-icon>info</mat-icon>
+            </button>
+        </mat-list-item>
 
         <mat-list-item (click)="processListCloudConfClick()">
             <a matLine id="adf-process-list-cloud-conf">Process List Cloud</a>
@@ -63,18 +63,25 @@
             </button>
         </mat-list-item>
 
-        <mat-list-item (click)="editTaskFilterConfClick()">	
-            <a matLine id="adf-edit-task-filter-conf">Edit task filter</a>	
-            <button mat-icon-button>	
-                <mat-icon>info</mat-icon>	
-            </button>	
+        <mat-list-item (click)="editTaskFilterConfClick()">
+            <a matLine id="adf-edit-task-filter-conf">Edit task filter</a>
+            <button mat-icon-button>
+                <mat-icon>info</mat-icon>
+            </button>
         </mat-list-item>
 
-        <mat-list-item (click)="infinitePaginationConfClick()">	
-            <a matLine id="adf-infinite-pagination-conf">Infinite pagination</a>	
-            <button mat-icon-button>	
-                <mat-icon>info</mat-icon>	
-            </button>	
+        <mat-list-item (click)="infinitePaginationConfClick()">
+            <a matLine id="adf-infinite-pagination-conf">Infinite pagination</a>
+            <button mat-icon-button>
+                <mat-icon>info</mat-icon>
+            </button>
+        </mat-list-item>
+
+        <mat-list-item (click)="textOrientationClick()">
+            <a matLine id="adf-page-orientation-conf">Page Orientation</a>
+            <button mat-icon-button>
+                <mat-icon>info</mat-icon>
+            </button>
         </mat-list-item>
     </mat-nav-list>
 
diff --git a/demo-shell/src/app/components/config-editor/config-editor.component.ts b/demo-shell/src/app/components/config-editor/config-editor.component.ts
index fca0f509a4..8dbff1d5dd 100644
--- a/demo-shell/src/app/components/config-editor/config-editor.component.ts
+++ b/demo-shell/src/app/components/config-editor/config-editor.component.ts
@@ -85,6 +85,19 @@ export class ConfigEditorComponent {
         this.indentCode();
     }
 
+    textOrientationClick() {
+        this.isUserPreference = true;
+        this.userPreferenceProperty = 'textOrientation';
+
+        this.userPreferencesService.select( this.userPreferenceProperty).subscribe((textOrientation: number) => {
+            this.code = JSON.stringify(textOrientation);
+            this.field = 'textOrientation';
+            this.indentCode();
+        });
+
+        this.indentCode();
+    }
+
     searchConfClick() {
         this.isUserPreference = false;
         this.code = JSON.stringify(this.appConfig.config['search']);