diff --git a/src/index.html b/src/index.html
index 4d94d29df..aae9877b7 100644
--- a/src/index.html
+++ b/src/index.html
@@ -57,6 +57,10 @@
                         <input id='fileid-set' placeholder='Enter file ID' data-testid="fileid"/>
                         <button onClick="setProperty('fileid')" data-testid="fileid-set">Set new file ID</button>
                 </div>
+
+                <div class='container' id='load'>
+                    <button onClick="loadPreview()" data-testid="load-preview">Load Preview</button>
+                </div>
         </div>
 
         <div class='preview-container' data-testid="preview-container"> </div>
@@ -77,9 +81,6 @@
 
                 // Cache it in local storage
                 localStorage.setItem(selector, value)
-
-                // Attempt to load Preview
-                loadPreview();
             }
 
             function loadPreview(options) {
@@ -102,6 +103,7 @@
             // Try to load all properties from storage on page load
             setProperty('token');
             setProperty('fileid');
+            loadPreview();
         </script>
     </body>
 </html>
diff --git a/src/lib/VirtualScroller.js b/src/lib/VirtualScroller.js
index 60a67b013..117549030 100644
--- a/src/lib/VirtualScroller.js
+++ b/src/lib/VirtualScroller.js
@@ -250,7 +250,7 @@ class VirtualScroller {
 
         // If specified offset is in the last window into the list then
         // render that last window instead of starting at that offset
-        const lastWindowOffset = this.totalItems - this.maxRenderedItems;
+        const lastWindowOffset = Math.max(0, this.totalItems - this.maxRenderedItems);
         let newStartOffset = offset > lastWindowOffset ? lastWindowOffset : offset;
         let newEndOffset = offset + this.maxRenderedItems;
         // If the default count of items to render exceeds the totalItems count
diff --git a/src/lib/shell.html b/src/lib/shell.html
index ea11e09a4..7f0d58abc 100644
--- a/src/lib/shell.html
+++ b/src/lib/shell.html
@@ -50,7 +50,7 @@
                 <button class="bp-btn-plain bp-btn-loading-download bp-is-invisible"></button>
             </div>
         </div>
-        <div class="bp-content">
+        <div class="bp-content" data-testid="bp-content">
             <button class="bp-btn-plain bp-navigate bp-navigate-left bp-is-hidden">
                 <svg viewBox="0 0 48 48" focusable="false">
                     <path fill="#494949" stroke="#DCDCDC" stroke-miterlimit="10" d="M30.8,33.2L21.7,24l9.2-9.2L28,12L16,24l12,12L30.8,33.2z"/>
diff --git a/src/lib/viewers/doc/DocBaseViewer.js b/src/lib/viewers/doc/DocBaseViewer.js
index 0d1dd42a5..d55a48d05 100644
--- a/src/lib/viewers/doc/DocBaseViewer.js
+++ b/src/lib/viewers/doc/DocBaseViewer.js
@@ -131,6 +131,7 @@ class DocBaseViewer extends BaseViewer {
         if (this.options.enableThumbnailsSidebar) {
             this.thumbnailsSidebarEl = document.createElement('div');
             this.thumbnailsSidebarEl.className = `${CLASS_BOX_PREVIEW_THUMBNAILS_CONTAINER} ${CLASS_HIDDEN}`;
+            this.thumbnailsSidebarEl.setAttribute('data-testid', 'thumbnails-sidebar');
             this.containerEl.parentNode.insertBefore(this.thumbnailsSidebarEl, this.containerEl);
         }
     }
diff --git a/test/integration/document/Controls.e2e.test.js b/test/integration/document/Controls.e2e.test.js
index 2cf7c2bc7..23814c81f 100644
--- a/test/integration/document/Controls.e2e.test.js
+++ b/test/integration/document/Controls.e2e.test.js
@@ -3,17 +3,11 @@ describe('Preview Document Controls', () => {
     const token = Cypress.env('ACCESS_TOKEN');
     const fileId = Cypress.env('FILE_ID_DOC');
 
-    /* eslint-disable */
-    const showControls = () => {
-        cy.getByTestId('bp').trigger('mouseover');
-        cy.getByTestId('controls-wrapper').should('be.visible');
-    };
-    /* eslint-enable */
-
     beforeEach(() => {
         cy.visit('/');
         cy.showPreview(token, fileId);
         cy.getByTestId('current-page').as('currentPage');
+        cy.getPreviewPage(1);
     });
 
     it('Should zoom in and out', () => {
@@ -25,7 +19,7 @@ describe('Preview Document Controls', () => {
             cy.wrap($page[0].scrollHeight).as('originalHeight');
         });
 
-        showControls();
+        cy.showDocumentControls();
 
         cy.getByTitle('Zoom out').click();
 
@@ -40,7 +34,7 @@ describe('Preview Document Controls', () => {
             cy.wrap(zoomedOutHeight).as('zoomedOutHeight');
         });
 
-        showControls();
+        cy.showDocumentControls();
 
         cy.getByTitle('Zoom in').click();
 
@@ -58,14 +52,14 @@ describe('Preview Document Controls', () => {
         cy.contains('The Content Platform for Your Apps');
         cy.get('@currentPage').invoke('text').should('equal', '1');
 
-        showControls();
+        cy.showDocumentControls();
         cy.getByTitle('Next page').click();
 
         cy.getPreviewPage(2).should('be.visible');
         cy.contains('Discover how your business can use Box Platform');
         cy.get('@currentPage').invoke('text').should('equal', '2');
 
-        showControls();
+        cy.showDocumentControls();
         cy.getByTitle('Previous page').click();
 
         cy.getPreviewPage(1).should('be.visible');
@@ -78,7 +72,7 @@ describe('Preview Document Controls', () => {
         cy.contains('The Content Platform for Your Apps');
         cy.get('@currentPage').invoke('text').should('equal', '1');
 
-        showControls();
+        cy.showDocumentControls();
         cy.getByTitle('Click to enter page number').click();
         cy.getByTestId('page-num-input').should('be.visible').type('2').blur();
 
@@ -94,7 +88,7 @@ describe('Preview Document Controls', () => {
     // it('Should handle going fullscreen', () => {
     //     cy.getPreviewPage(1).should('be.visible');
     //     cy.contains('The Content Platform for Your Apps');
-    //     showControls();
+    //     cy.showDocumentControls();
     //     cy.getByTitle('Enter fullscreen').should('be.visible').click();
     //     cy.getByTitle('Exit fullscreen').should('be.visible');
     // });
diff --git a/test/integration/document/Thumbnails.e2e.test.js b/test/integration/document/Thumbnails.e2e.test.js
new file mode 100644
index 000000000..eb130dcb4
--- /dev/null
+++ b/test/integration/document/Thumbnails.e2e.test.js
@@ -0,0 +1,99 @@
+// <reference types="Cypress" />
+describe('Preview Document Thumbnails', () => {
+    const token = Cypress.env('ACCESS_TOKEN');
+    const fileId = Cypress.env('FILE_ID_DOC');
+    const THUMBNAIL_SELECTED_CLASS = 'bp-thumbnail-is-selected';
+
+    /* eslint-disable */
+    const getThumbnail = (pageNum) => cy.get(`.bp-thumbnail[data-bp-page-num=${pageNum}]`);
+    const showDocumentPreview = ({ enableThumbnailsSidebar } = {}) => {
+        cy.showPreview(token, fileId, { enableThumbnailsSidebar });
+        cy.getPreviewPage(1);
+        cy.contains('The Content Platform for Your Apps');
+    };
+    const toggleThumbnails = () => {
+        cy.showDocumentControls();
+
+        cy
+            .getByTitle('Toggle thumbnails')
+            .should('be.visible')
+            .click();
+
+        return cy.getByTestId('thumbnails-sidebar');
+    };
+    /* eslint-enable */
+
+    beforeEach(() => {
+        cy.visit('/');
+    });
+
+    it('Should not see the sidebar button if disabled', () => {
+        showDocumentPreview({ enableThumbnailsSidebar: false });
+
+        cy.showDocumentControls();
+        cy.getByTitle('Toggle thumbnails').should('not.be.visible');
+    });
+
+    it('Should see the sidebar button if enabled', () => {
+        showDocumentPreview({ enableThumbnailsSidebar: true });
+
+        cy.showDocumentControls();
+        cy.getByTitle('Toggle thumbnails').should('be.visible');
+    });
+
+    it('Should render thumbnails when toggled', () => {
+        showDocumentPreview({ enableThumbnailsSidebar: true });
+
+        toggleThumbnails().should('be.visible');
+
+        toggleThumbnails().should('not.be.visible');
+    });
+
+    it('Should be able to change page by clicking on the thumbnail', () => {
+        showDocumentPreview({ enableThumbnailsSidebar: true });
+
+        // Verify we're on page 1
+        cy.getByTestId('current-page').as('currentPage')
+            .invoke('text')
+            .should('equal', '1');
+
+        toggleThumbnails().should('be.visible');
+
+        // Verify which thumbnail is selected
+        getThumbnail(1)
+            .should('have.class', THUMBNAIL_SELECTED_CLASS)
+            .as('thumbOne');
+        getThumbnail(2)
+            .click()
+            .should('have.class', THUMBNAIL_SELECTED_CLASS);
+        cy.get('@thumbOne').should('not.have.class', THUMBNAIL_SELECTED_CLASS);
+        cy
+            .get('@currentPage')
+            .invoke('text')
+            .should('equal', '2');
+    });
+
+    it('Should reflect the selected page when page is changed', () => {
+        showDocumentPreview({ enableThumbnailsSidebar: true });
+        cy
+            .getByTestId('current-page')
+            .as('currentPage')
+            .invoke('text')
+            .should('equal', '1');
+
+        toggleThumbnails().should('be.visible');
+
+        getThumbnail(1)
+            .should('have.class', THUMBNAIL_SELECTED_CLASS)
+            .as('thumbOne');
+
+        cy.getByTitle('Next page').click();
+
+        getThumbnail(2).should('have.class', THUMBNAIL_SELECTED_CLASS);
+        cy.get('@thumbOne').should('not.have.class', THUMBNAIL_SELECTED_CLASS);
+        cy
+            .get('@currentPage')
+            .invoke('text')
+            .should('equal', '2');
+    });
+});
diff --git a/test/integration/sanity/Sanity.e2e.test.js b/test/integration/sanity/Sanity.e2e.test.js
index 2c7d095ed..519bda252 100644
--- a/test/integration/sanity/Sanity.e2e.test.js
+++ b/test/integration/sanity/Sanity.e2e.test.js
@@ -8,9 +8,8 @@ describe('Preview Sanity', () => {
     });
 
     it('Should load a document preview', () => {
-        // Show the preview
         cy.showPreview(token, fileId);
-        // Assert document content is present
+        cy.getPreviewPage(1);
         cy.contains('The Content Platform for Your Apps');
     });
 });
diff --git a/test/support/commands.js b/test/support/commands.js
index 086d12ba2..bbc4cc877 100644
--- a/test/support/commands.js
+++ b/test/support/commands.js
@@ -4,22 +4,26 @@ Cypress.Commands.add('getPreviewPage', (pageNum) => {
     cy
         .get(`.page[data-page-number=${pageNum}]`)
         .as('previewPage')
-        .find('[data-testid="page-loading-indicator"]')
+        // Adding timeout here because sometimes it takes more than the Cypress
+        // default timeout to render the preview
+        .find('[data-testid="page-loading-indicator"]', { timeout: 15000 })
         .should('not.exist');
 
     return cy.get('@previewPage');
 });
+Cypress.Commands.add('showDocumentControls', () => {
+    cy.getByTestId('bp').trigger('mousemove');
+    return cy.getByTestId('controls-wrapper').should('be.visible');
+});
 Cypress.Commands.add('showPreview', (token, fileId, options) => {
     cy.getByTestId('token').type(token);
     cy.getByTestId('token-set').click();
     cy.getByTestId('fileid').type(fileId);
     cy.getByTestId('fileid-set').click();
 
-    if (options) {
-        cy.window().then((win) => {
-            win.loadPreview(options);
-        });
-    }
+    cy.window().then((win) => {
+        win.loadPreview(options);
+    });
 
     // Wait for .bp to load viewer
     return cy.getByTestId('bp').should('have.class', 'bp-loaded');