diff --git a/docs/docassets/images/pdf-thumbnails.png b/docs/docassets/images/pdf-thumbnails.png
index 80384ba544..d74c582bcf 100644
Binary files a/docs/docassets/images/pdf-thumbnails.png and b/docs/docassets/images/pdf-thumbnails.png differ
diff --git a/docs/viewer.component.md b/docs/viewer.component.md
index e084004887..1f1bccc3d7 100644
--- a/docs/viewer.component.md
+++ b/docs/viewer.component.md
@@ -306,7 +306,7 @@ export class CustomThumbnailsComponent {
 ```
 
 ```html
-<ng-template let-pdfViewer="viewer" #customThumbnailsTemplate>
+<ng-template #customThumbnailsTemplate let-pdfViewer="viewer">
     <custom-thumbnails [pdfViewer]="pdfViewer"></custom-thumbnails>
 </ng-template>
 
diff --git a/lib/core/viewer/components/pdfViewer-thumbnails.component.scss b/lib/core/viewer/components/pdfViewer-thumbnails.component.scss
index cddcd0a774..903fc56d03 100644
--- a/lib/core/viewer/components/pdfViewer-thumbnails.component.scss
+++ b/lib/core/viewer/components/pdfViewer-thumbnails.component.scss
@@ -16,16 +16,16 @@
         }
 
         &__thumb:first-child {
-            margin-top: 14px;
+            margin-top: 15px;
         }
 
         &__thumb {
             cursor: pointer;
             display: block;
-            height: 140px;
-            width: 100px;
+            height: 114px;
+            width: 91px;
             background: mat-color($background, background);
-            margin-bottom: 14px;
+            margin-bottom: 15px;
         }
 
         &__thumb:hover {
diff --git a/lib/core/viewer/components/pdfViewer-thumbnails.component.spec.ts b/lib/core/viewer/components/pdfViewer-thumbnails.component.spec.ts
index 5c2723515d..df68e9aa5d 100644
--- a/lib/core/viewer/components/pdfViewer-thumbnails.component.spec.ts
+++ b/lib/core/viewer/components/pdfViewer-thumbnails.component.spec.ts
@@ -81,7 +81,7 @@ describe('PdfThumbListComponent', () => {
         fixture.detectChanges();
 
         const renderedIds = component.renderItems.map(item => item.id);
-        const rangeIds = viewerMock._pages.slice(0, 5).map(item => item.id);
+        const rangeIds = viewerMock._pages.slice(0, 7).map(item => item.id);
 
         expect(renderedIds).toEqual(rangeIds);
     });
@@ -91,7 +91,7 @@ describe('PdfThumbListComponent', () => {
         fixture.detectChanges();
 
         const renderedIds = component.renderItems.map(item => item.id);
-        const rangeIds = viewerMock._pages.slice(5, 10).map(item => item.id);
+        const rangeIds = viewerMock._pages.slice(6, 14).map(item => item.id);
 
         expect(renderedIds).toEqual(rangeIds);
     });
diff --git a/lib/core/viewer/components/pdfViewer-thumbnails.component.ts b/lib/core/viewer/components/pdfViewer-thumbnails.component.ts
index 24a5040097..09e281ffff 100644
--- a/lib/core/viewer/components/pdfViewer-thumbnails.component.ts
+++ b/lib/core/viewer/components/pdfViewer-thumbnails.component.ts
@@ -35,7 +35,7 @@ export class PdfThumbListComponent implements OnInit, AfterViewInit, OnDestroy {
     renderItems = [];
 
     private items = [];
-    private itemHeight: number = 140;
+    private itemHeight: number = 114;
 
     @ContentChild(TemplateRef)
     template: any;
diff --git a/lib/core/viewer/components/pdfViewer.component.html b/lib/core/viewer/components/pdfViewer.component.html
index 2e53e1b1cd..35a5f5ac83 100644
--- a/lib/core/viewer/components/pdfViewer.component.html
+++ b/lib/core/viewer/components/pdfViewer.component.html
@@ -1,12 +1,21 @@
 <div class="adf-pdf-viewer__container">
     <ng-container *ngIf="showThumbnails">
         <div class="adf-pdf-viewer__thumbnails">
-            <ng-container *ngIf="thumbnailsTemplate">
-                <ng-container *ngTemplateOutlet="thumbnailsTemplate;context:pdfThumbnailsContext"></ng-container>
-            </ng-container>
-            <ng-container *ngIf="!thumbnailsTemplate">
-                <adf-pdf-thumbnails [pdfViewer]="pdfViewer"></adf-pdf-thumbnails>
-            </ng-container>
+            <div class="thumbnails-template__container">
+                <div class="thumbnails-template__buttons">
+                    <button mat-icon-button (click)="toggleThumbnails()">
+                            <mat-icon>close</mat-icon>
+                    </button>
+                </div>
+
+                <ng-container *ngIf="thumbnailsTemplate">
+                    <ng-container *ngTemplateOutlet="thumbnailsTemplate;context:pdfThumbnailsContext"></ng-container>
+                </ng-container>
+
+                <ng-container *ngIf="!thumbnailsTemplate">
+                    <adf-pdf-thumbnails [pdfViewer]="pdfViewer"></adf-pdf-thumbnails>
+                </ng-container>
+            </div>
         </div>
     </ng-container>
 
diff --git a/lib/core/viewer/components/pdfViewer.component.scss b/lib/core/viewer/components/pdfViewer.component.scss
index c182caa0e0..720b71195c 100644
--- a/lib/core/viewer/components/pdfViewer.component.scss
+++ b/lib/core/viewer/components/pdfViewer.component.scss
@@ -22,7 +22,25 @@
         }
 
         &__thumbnails {
-            position: relative; height: 100%; width: 140px; background-color: rgba(0, 0, 0, 0.12);
+            position: relative;
+            height: 100%;
+            width: 190px;
+            background-color: rgba(0, 0, 0, 0.12);
+        }
+
+        .thumbnails-template {
+            &__container {
+                display: flex;
+                flex-direction: column;
+                height: 100%;
+            }
+
+            &__buttons {
+                height: 45px;
+                justify-content: flex-end;
+                align-items: flex-end;
+                display: flex;
+            }
         }
 
         &__container {
diff --git a/lib/core/viewer/components/pdfViewer.component.spec.ts b/lib/core/viewer/components/pdfViewer.component.spec.ts
index 1e26d096a8..9fb7461796 100644
--- a/lib/core/viewer/components/pdfViewer.component.spec.ts
+++ b/lib/core/viewer/components/pdfViewer.component.spec.ts
@@ -388,4 +388,38 @@ describe('Test PdfViewer component', () => {
             });
         });
     });
+
+    describe('Thumbnails', () => {
+        beforeEach(() => {
+            component.urlFile = require('../assets/fake-test-file.pdf');
+            component.showThumbnails = false;
+
+            fixture.detectChanges();
+        });
+
+        it('should have own context', (done) => {
+            component.ngOnChanges(null).then(() => {
+                fixture.detectChanges();
+                return fixture.whenStable().then(() => {
+                    expect(component.pdfThumbnailsContext.viewer).not.toBeNull();
+                    done();
+                });
+            });
+        });
+
+        it('should open thumbnails panel', (done) => {
+            expect(element.querySelector('.adf-pdf-viewer__thumbnails')).toBeNull();
+
+            component.ngOnChanges(null).then(() => {
+                fixture.detectChanges();
+                return fixture.whenStable().then(() => {
+                    component.toggleThumbnails();
+                    fixture.detectChanges();
+
+                    expect(element.querySelector('.adf-pdf-viewer__thumbnails')).not.toBeNull();
+                    done();
+                });
+            });
+        });
+    });
 });
diff --git a/lib/core/viewer/components/pdfViewer.component.ts b/lib/core/viewer/components/pdfViewer.component.ts
index 8cb034c401..f6ca061220 100644
--- a/lib/core/viewer/components/pdfViewer.component.ts
+++ b/lib/core/viewer/components/pdfViewer.component.ts
@@ -67,7 +67,7 @@ export class PdfViewerComponent implements OnChanges, OnDestroy {
     MIN_SCALE: number = 0.25;
     MAX_SCALE: number = 10.0;
 
-    showThumbnails = false;
+    showThumbnails: boolean = false;
     pdfThumbnailsContext: { viewer: any } = { viewer: null };
 
     get currentScaleText(): string {