diff --git a/demo-shell/resources/i18n/en.json b/demo-shell/resources/i18n/en.json
index cfddbddc2e..e4effabf11 100644
--- a/demo-shell/resources/i18n/en.json
+++ b/demo-shell/resources/i18n/en.json
@@ -20,6 +20,7 @@
         "TAG": "Tag",
         "SOCIAL": "Social",
         "SETTINGS": "Settings",
+        "OVERLAY_VIEWER": "Overlay Viewer",
         "ABOUT": "About"
     },
     "DOCUMENT_LIST": {
diff --git a/demo-shell/src/app/app.module.ts b/demo-shell/src/app/app.module.ts
index 58b430752e..3c0d5b9585 100644
--- a/demo-shell/src/app/app.module.ts
+++ b/demo-shell/src/app/app.module.ts
@@ -20,6 +20,7 @@ import { AboutComponent } from './components/about/about.component';
 import { FormComponent } from './components/form/form.component';
 import { FormListComponent } from './components/form/form-list.component';
 import { CustomSourcesComponent } from './components/files/custom-sources.component';
+import { OverlayViewerComponent } from './components/overlay-viewer/overlay-viewer.component';
 
 import { ProcessServiceComponent } from './components/process-service/process-service.component';
 import { ShowDiagramComponent } from './components/process-service/show-diagram.component';
@@ -83,7 +84,8 @@ import { ProcessAttachmentsComponent } from './components/process-service/proces
         CustomSourcesComponent,
         VersionManagerDialogAdapterComponent,
         TaskAttachmentsComponent,
-        ProcessAttachmentsComponent
+        ProcessAttachmentsComponent,
+        OverlayViewerComponent
     ],
     providers: [
         TranslateService,
diff --git a/demo-shell/src/app/app.routes.ts b/demo-shell/src/app/app.routes.ts
index f9a7b5938f..913e872f5b 100644
--- a/demo-shell/src/app/app.routes.ts
+++ b/demo-shell/src/app/app.routes.ts
@@ -41,6 +41,7 @@ import { UploadButtonComponent } from '@alfresco/adf-content-services';
 import { FileViewComponent } from './components/file-view/file-view.component';
 import { CustomSourcesComponent } from './components/files/custom-sources.component';
 import { FormListComponent } from './components/form/form-list.component';
+import { OverlayViewerComponent } from './components/overlay-viewer/overlay-viewer.component';
 
 export const appRoutes: Routes = [
     { path: 'login', component: LoginComponent },
@@ -149,7 +150,12 @@ export const appRoutes: Routes = [
             },
             { path: 'about', component: AboutComponent },
             { path: 'form', component: FormComponent },
-            { path: 'form-list', component: FormListComponent }
+            { path: 'form-list', component: FormListComponent },
+            {
+                path: 'overlay-viewer',
+                component: OverlayViewerComponent,
+                canActivate: [AuthGuardEcm]
+            }
         ]
     }
 ];
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 0563949534..fc3c044d31 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
@@ -41,6 +41,7 @@ export class AppLayoutComponent {
         { href: '/tag', icon: 'local_offer', title: 'APP_LAYOUT.TAG' },
         { href: '/social', icon: 'thumb_up', title: 'APP_LAYOUT.SOCIAL' },
         { href: '/settings', icon: 'settings', title: 'APP_LAYOUT.SETTINGS' },
+        { href: '/overlay-viewer', icon: 'pageview', title: 'APP_LAYOUT.OVERLAY_VIEWER' },
         { href: '/about', icon: 'info_outline', title: 'APP_LAYOUT.ABOUT' }
     ];
 
diff --git a/demo-shell/src/app/components/overlay-viewer/overlay-viewer.component.html b/demo-shell/src/app/components/overlay-viewer/overlay-viewer.component.html
new file mode 100644
index 0000000000..75acdca195
--- /dev/null
+++ b/demo-shell/src/app/components/overlay-viewer/overlay-viewer.component.html
@@ -0,0 +1,12 @@
+<h1>Overlay Viewer</h1>
+
+<adf-document-list
+    currentFolderId="-my-"
+    (preview)="showPreview($event)">
+</adf-document-list>
+
+<adf-viewer
+    [(showViewer)]="showViewer"
+    [overlayMode]="true"
+    [fileNodeId]="nodeId">
+</adf-viewer>
diff --git a/demo-shell/src/app/components/overlay-viewer/overlay-viewer.component.ts b/demo-shell/src/app/components/overlay-viewer/overlay-viewer.component.ts
new file mode 100644
index 0000000000..f57b8e690a
--- /dev/null
+++ b/demo-shell/src/app/components/overlay-viewer/overlay-viewer.component.ts
@@ -0,0 +1,36 @@
+/*!
+ * @license
+ * Copyright 2016 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, Input } from '@angular/core';
+
+@Component({
+    templateUrl: 'overlay-viewer.component.html'
+})
+export class OverlayViewerComponent {
+
+    @Input()
+    showViewer: boolean = false;
+
+    nodeId: string;
+
+    showPreview(event) {
+        if (event.value.entry.isFile) {
+            this.nodeId = event.value.entry.id;
+            this.showViewer = true;
+        }
+    }
+}
diff --git a/docs/viewer.component.md b/docs/viewer.component.md
index 409b1e805c..e003bb3f3f 100644
--- a/docs/viewer.component.md
+++ b/docs/viewer.component.md
@@ -67,6 +67,42 @@ Using with file url:
 | print | any | Yes | Raised when user clicks the 'Print' button. |
 | share | any | Yes | Raised when user clicks the 'Share' button. |
 
+## Integrating with DocumentList component
+
+Below is the most simple integration of Pagination and DocumentList components within your custom component:
+
+```html
+<adf-document-list
+    currentFolderId="-my-"
+    (preview)="showPreview($event)">
+</adf-document-list>
+
+<adf-viewer
+    [(showViewer)]="showViewer"
+    [overlayMode]="true"
+    [fileNodeId]="nodeId">
+</adf-viewer>
+```
+
+And the component controller class implementation can look like the following:
+
+```ts
+export class OverlayViewerComponent {
+
+    @Input()
+    showViewer: boolean = false;
+
+    nodeId: string;
+
+    showPreview(event) {
+        if (event.value.entry.isFile) {
+            this.nodeId = event.value.entry.id;
+            this.showViewer = true;
+        }
+    }
+}
+```
+
 ## Details
 
 ### Supported file formats
diff --git a/lib/core/viewer/components/viewer.component.ts b/lib/core/viewer/components/viewer.component.ts
index 826b7d09c8..9b49e2365d 100644
--- a/lib/core/viewer/components/viewer.component.ts
+++ b/lib/core/viewer/components/viewer.component.ts
@@ -18,7 +18,7 @@
 import { Location } from '@angular/common';
 import {
     Component, ContentChild, EventEmitter, HostListener,
-    Input, OnChanges, OnDestroy, Output, TemplateRef, ViewEncapsulation
+    Input, OnChanges, Output, SimpleChanges, TemplateRef, ViewEncapsulation
 } from '@angular/core';
 import { MinimalNodeEntryEntity } from 'alfresco-js-api';
 import { BaseEvent } from '../../events';
@@ -37,7 +37,7 @@ import { ViewerToolbarComponent } from './viewer-toolbar.component';
     host: { 'class': 'adf-viewer' },
     encapsulation: ViewEncapsulation.None
 })
-export class ViewerComponent implements OnDestroy, OnChanges {
+export class ViewerComponent implements OnChanges {
 
     @ContentChild(ViewerToolbarComponent)
     toolbar: ViewerToolbarComponent;
@@ -146,7 +146,7 @@ export class ViewerComponent implements OnDestroy, OnChanges {
                 private renditionService: RenditionsService) {
     }
 
-    ngOnChanges(changes) {
+    ngOnChanges(changes: SimpleChanges) {
         if (this.showViewer) {
             if (!this.urlFile && !this.blobFile && !this.fileNodeId) {
                 throw new Error('Attribute urlFile or fileNodeId or blobFile is required');
@@ -308,26 +308,10 @@ export class ViewerComponent implements OnDestroy, OnChanges {
         if (this.otherMenu) {
             this.otherMenu.hidden = false;
         }
-        this.cleanup();
         this.showViewer = false;
         this.showViewerChange.emit(this.showViewer);
     }
 
-    /**
-     * cleanup before the close
-     */
-    cleanup() {
-        this.urlFileContent = '';
-        this.displayName = '';
-        this.fileNodeId = null;
-        this.extension = null;
-        this.mimeType = null;
-    }
-
-    ngOnDestroy() {
-        this.cleanup();
-    }
-
     /**
      * get File name from url
      *