diff --git a/demo-shell/resources/i18n/en.json b/demo-shell/resources/i18n/en.json
index 6896f25e7a..4af496843b 100644
--- a/demo-shell/resources/i18n/en.json
+++ b/demo-shell/resources/i18n/en.json
@@ -57,6 +57,7 @@
     "APP_NAME": "ADF Demo Application",
     "HOME": "Home",
     "NODE-SELECTOR": "Node Selector",
+    "SITES": "Sites",
     "CONTENT_SERVICES": "Content Services",
     "BREADCRUMB": "Breadcrumb",
     "NOTIFICATIONS": "Notifications",
diff --git a/demo-shell/src/app/app.module.ts b/demo-shell/src/app/app.module.ts
index 376d429c25..fa5db651ab 100644
--- a/demo-shell/src/app/app.module.ts
+++ b/demo-shell/src/app/app.module.ts
@@ -81,6 +81,7 @@ import { CloudSettingsComponent } from './components/app-layout/cloud/cloud-sett
 import { AppExtensionsModule } from './app-extension.module';
 import { ProcessDetailsCloudDemoComponent } from './components/app-layout/cloud/process-details-cloud-demo.component';
 import { NestedMenuPositionDirective } from './components/app-layout/cloud/directives/nested-menu-position.directive';
+import { SitesModule } from './components/sites/sites.module';
 
 @NgModule({
     imports: [
@@ -104,7 +105,8 @@ import { NestedMenuPositionDirective } from './components/app-layout/cloud/direc
         MonacoEditorModule.forRoot(),
         ProcessServicesCloudModule,
         GroupCloudModule,
-        TaskDirectiveModule
+        TaskDirectiveModule,
+        SitesModule
     ],
     declarations: [
         AppComponent,
diff --git a/demo-shell/src/app/app.routes.ts b/demo-shell/src/app/app.routes.ts
index b4c596abc3..1c5a7b2dc5 100644
--- a/demo-shell/src/app/app.routes.ts
+++ b/demo-shell/src/app/app.routes.ts
@@ -119,6 +119,16 @@ export const appRoutes: Routes = [
             }
         ]
     },
+    {
+        path: 'sites',
+        component: AppLayoutComponent,
+        children: [
+            {
+                path: '',
+                loadChildren: 'app/components/sites/sites.module#SitesModule'
+            }
+        ]
+    },
     {
         path: 'header-data',
         component: AppLayoutComponent,
diff --git a/demo-shell/src/app/components/app-layout/app-layout.component.ts b/demo-shell/src/app/components/app-layout/app-layout.component.ts
index c6485bc128..ebb65ba3fe 100644
--- a/demo-shell/src/app/components/app-layout/app-layout.component.ts
+++ b/demo-shell/src/app/components/app-layout/app-layout.component.ts
@@ -38,6 +38,7 @@ export class AppLayoutComponent implements OnInit {
         { href: '/card-view', icon: 'view_headline', title: 'APP_LAYOUT.CARD_VIEW' },
         { href: '/header-data', icon: 'edit', title: 'APP_LAYOUT.HEADER_DATA' },
         { href: '/node-selector', icon: 'attachment', title: 'APP_LAYOUT.NODE-SELECTOR' },
+        { href: '/sites', icon: 'format_list_bulleted', title: 'APP_LAYOUT.SITES' },
         { href: '/task-list', icon: 'assignment', title: 'APP_LAYOUT.TASK_LIST' },
         { href: '/cloud', icon: 'cloud', title: 'APP_LAYOUT.PROCESS_CLOUD', children: [
             { href: '/cloud/', icon: 'cloud', title: 'APP_LAYOUT.HOME' },
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 0b293de459..57c5b3e9a5 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
@@ -77,6 +77,13 @@
             </button>
         </mat-list-item>
 
+        <mat-list-item (click)="supportedPageSizesClick()">
+            <a matLine id="adf-supported-page-size">Supported Page Sizes </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>
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 8dbff1d5dd..fac02d4743 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
@@ -171,6 +171,16 @@ export class ConfigEditorComponent {
         });
     }
 
+    supportedPageSizesClick() {
+        this.isUserPreference = true;
+        this.userPreferenceProperty = UserPreferenceValues.SupportedPageSizes;
+        this.userPreferencesService.select(this.userPreferenceProperty).subscribe((supportedPageSizes: number) => {
+            this.code = JSON.stringify(supportedPageSizes);
+            this.field = 'adf-supported-page-size';
+            this.indentCode();
+        });
+    }
+
     indentCode() {
         setTimeout(() => {
             this.editor.getAction('editor.action.formatDocument').run();
diff --git a/demo-shell/src/app/components/sites/sites.component.html b/demo-shell/src/app/components/sites/sites.component.html
new file mode 100644
index 0000000000..487d40b193
--- /dev/null
+++ b/demo-shell/src/app/components/sites/sites.component.html
@@ -0,0 +1,28 @@
+<h1>Select Site</h1>
+<adf-sites-dropdown (change)="onSiteChange($event)" [relations]="'members'">
+</adf-sites-dropdown>
+
+Current Selected Site {{currentSelectedSite}}
+
+
+<h1>Hide My Files</h1>
+<adf-sites-dropdown  [hideMyFiles]="true" [relations]="'members'">
+</adf-sites-dropdown>
+
+
+<h1>Select Default Site</h1>
+
+<section>
+    <mat-form-field>
+        <label>Insert a Default site ID</label>
+        <input matInput [(ngModel)]="defaultSite">
+    </mat-form-field>
+</section>
+<button (click)="applySite()"  mat-button color="primary">Apply</button>
+
+<div *ngIf="showDefaultSite">
+    <adf-sites-dropdown [relations]="'members'" [value]="defaultSite">
+    </adf-sites-dropdown>
+</div>
+
+
diff --git a/demo-shell/src/app/components/sites/sites.component.scss b/demo-shell/src/app/components/sites/sites.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/demo-shell/src/app/components/sites/sites.component.ts b/demo-shell/src/app/components/sites/sites.component.ts
new file mode 100644
index 0000000000..5693a4670d
--- /dev/null
+++ b/demo-shell/src/app/components/sites/sites.component.ts
@@ -0,0 +1,40 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'app-sites',
+    templateUrl: 'sites.component.html',
+    styleUrls: ['sites.component.scss']
+})
+export class SitesComponent {
+
+    currentSelectedSite: string;
+    hideMyFiles: boolean = false;
+    showDefaultSite: boolean = false;
+    defaultSite: string;
+
+    onSiteChange($event: any) {
+        this.currentSelectedSite = JSON.stringify($event.entry);
+    }
+
+    applySite() {
+        this.showDefaultSite = true;
+    }
+
+}
diff --git a/demo-shell/src/app/components/sites/sites.module.ts b/demo-shell/src/app/components/sites/sites.module.ts
new file mode 100644
index 0000000000..77f305c58c
--- /dev/null
+++ b/demo-shell/src/app/components/sites/sites.module.ts
@@ -0,0 +1,41 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { NgModule } from '@angular/core';
+import { SitesComponent } from './sites.component';
+import { Routes, RouterModule } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@alfresco/adf-core';
+import { ContentModule } from '@alfresco/adf-content-services';
+
+const routes: Routes = [
+    {
+      path: '',
+      component: SitesComponent
+    }
+];
+
+@NgModule({
+    imports: [
+        CommonModule,
+        RouterModule.forChild(routes),
+        CoreModule.forChild(),
+        ContentModule.forChild()
+    ],
+    declarations: [SitesComponent]
+})
+export class SitesModule {}