diff --git a/__tests__/src/components/ThumbnailNavigation.test.js b/__tests__/src/components/ThumbnailNavigation.test.js
index 133465a26840f422cbc32593703b37b4e72e1949..19ca09079c501dde70a1f51d1fbd0d6f90adb66c 100644
--- a/__tests__/src/components/ThumbnailNavigation.test.js
+++ b/__tests__/src/components/ThumbnailNavigation.test.js
@@ -52,7 +52,7 @@ describe('ThumbnailNavigation', () => {
     expect(wrapper.find('.mirador-thumbnail-nav-canvas-1.mirador-current-canvas'));
   });
   it('when clicked, updates the current canvas', () => {
-    renderedGrid.find('.mirador-thumbnail-nav-canvas-0 CanvasThumbnail').simulate('click');
+    renderedGrid.find('.mirador-thumbnail-nav-canvas-0 WithStyles(GridListTile)').simulate('click');
     expect(setCanvas).toHaveBeenCalledWith('foobar', 0);
   });
   it('sets up calculated width based off of height of area and dimensions of canvas', () => {
diff --git a/__tests__/src/components/WindowSideBarCanvasPanel.test.js b/__tests__/src/components/WindowSideBarCanvasPanel.test.js
index 14bbf84443cf53ab80b467971eee0b4537565fae..a5937e1c9e6df98d804722df62c372b1c7780d50 100644
--- a/__tests__/src/components/WindowSideBarCanvasPanel.test.js
+++ b/__tests__/src/components/WindowSideBarCanvasPanel.test.js
@@ -4,7 +4,6 @@ import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import Typography from '@material-ui/core/Typography';
 import manifesto from 'manifesto.js';
-import { CanvasThumbnail } from '../../../src/components/CanvasThumbnail';
 import { WindowSideBarCanvasPanel } from '../../../src/components/WindowSideBarCanvasPanel';
 import manifestJson from '../../fixtures/version-2/019.json';
 import { getIdAndLabelOfCanvases } from '../../../src/state/selectors';
@@ -54,13 +53,8 @@ describe('WindowSideBarCanvasPanel', () => {
       .text()).toBe(idsAndLabels[1].label);
   });
 
-  it('should call the onClick handler of a navigation item\'s label', () => {
-    wrapper.find(Typography).at(1).simulate('click');
-    expect(setCanvas).toHaveBeenCalledTimes(1);
-  });
-
-  it('should call the onClick handler of a navigation item\'s thumbnail', () => {
-    wrapper.find(CanvasThumbnail).at(0).simulate('click');
+  it('should call the onClick handler of a list item', () => {
+    wrapper.find(ListItem).at(1).simulate('click');
     expect(setCanvas).toHaveBeenCalledTimes(1);
   });
 });
diff --git a/src/components/CanvasThumbnail.js b/src/components/CanvasThumbnail.js
index 76d14f6905b082503fe7e81f2e8481b8f227bbe0..e12e3c3f39507e677ca0d75a1370a381b64d0bd9 100644
--- a/src/components/CanvasThumbnail.js
+++ b/src/components/CanvasThumbnail.js
@@ -91,14 +91,11 @@ export class CanvasThumbnail extends Component {
   /**
    */
   render() {
-    const { onClick } = this.props;
     return (
       <>
         <IntersectionObserver onChange={this.handleIntersection}>
           <img
             alt=""
-            onClick={onClick}
-            onKeyPress={onClick}
             role="presentation"
             src={this.imageSrc()}
             style={this.imageStyles()}
@@ -115,7 +112,6 @@ CanvasThumbnail.defaultImgPlaceholder = 'data:image/png;base64,iVBORw0KGgoAAAANS
 CanvasThumbnail.propTypes = {
   imageUrl: PropTypes.string,
   isValid: PropTypes.bool,
-  onClick: PropTypes.func.isRequired,
   maxHeight: PropTypes.number,
   maxWidth: PropTypes.number,
   aspectRatio: PropTypes.number,
diff --git a/src/components/ThumbnailNavigation.js b/src/components/ThumbnailNavigation.js
index 8943df25f5732866bdcc97fb67ab7a546c8f58de..33674bdcde9cbd4d714da4b6963816052f2250e5 100644
--- a/src/components/ThumbnailNavigation.js
+++ b/src/components/ThumbnailNavigation.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
 import Grid from 'react-virtualized/dist/commonjs/Grid';
+import GridListTile from '@material-ui/core/GridListTile';
 import { CanvasThumbnail } from './CanvasThumbnail';
 import ManifestoCanvas from '../lib/ManifestoCanvas';
 import ns from '../config/css-ns';
@@ -66,18 +67,28 @@ export class ThumbnailNavigation extends Component {
           }}
           className={ns(['thumbnail-nav-canvas', `thumbnail-nav-canvas-${columnIndex}`, this.currentCanvasClass(currentGroupings.map(canvas => canvas.index))])}
         >
-          {currentGroupings.map((canvas, i) => (
-            <div
-              key={canvas.index}
-              style={{ position: 'absolute', left: (style.width - 8) * i / 2, top: 2 }}
-            >
-              <CanvasThumbnail
+          {currentGroupings.map((canvas, i) => {
+            const { height } = config.thumbnailNavigation;
+            const manifestoCanvas = new ManifestoCanvas(canvas);
+
+            return (
+              <GridListTile
+                component="div"
+                key={canvas.index}
                 onClick={() => setCanvas(window.id, currentGroupings[0].index)}
-                imageUrl={new ManifestoCanvas(canvas).thumbnail(null, config.thumbnailNavigation.height)}
-                maxHeight={config.thumbnailNavigation.height}
-              />
-            </div>
-          ))}
+                style={{
+                  position: 'absolute', left: (style.width - 8) * i / 2, top: 2,
+                }}
+              >
+                <CanvasThumbnail
+                  imageUrl={manifestoCanvas.thumbnail(null, height)}
+                  maxHeight={config.thumbnailNavigation.height}
+                  maxWidth={style.width}
+                  aspectRatio={manifestoCanvas.aspectRatio}
+                />
+              </GridListTile>
+            );
+          })}
         </div>
       </div>
     );
diff --git a/src/components/WindowSideBarCanvasPanel.js b/src/components/WindowSideBarCanvasPanel.js
index 8f457b0779afeba32c37a5d47cf57548846c6154..8ea64a7bf9e75393b88f1ef97b562cf13685c5f8 100644
--- a/src/components/WindowSideBarCanvasPanel.js
+++ b/src/components/WindowSideBarCanvasPanel.js
@@ -36,6 +36,8 @@ export class WindowSideBarCanvasPanel extends Component {
               return (
                 <ListItem
                   key={canvas.id}
+                  onClick={onClick}
+                  button
                 >
                   <div>
                     <CanvasThumbnail
@@ -45,7 +47,6 @@ export class WindowSideBarCanvasPanel extends Component {
                       maxHeight={config.canvasNavigation.height}
                       maxWidth={config.canvasNavigation.width}
                       aspectRatio={manifestoCanvas.aspectRatio}
-                      onClick={onClick}
                       style={{
                         cursor: 'pointer',
                         height: config.canvasNavigation.height,
@@ -54,8 +55,7 @@ export class WindowSideBarCanvasPanel extends Component {
                     />
                   </div>
                   <Typography
-                    className={classNames(classes.clickable, classes.label)}
-                    onClick={onClick}
+                    className={classNames(classes.label)}
                     variant="body2"
                     color="secondary"
                   >
diff --git a/src/containers/WindowSideBarCanvasPanel.js b/src/containers/WindowSideBarCanvasPanel.js
index 7c821cc77aa2795f38a95c2cc7c21f82b313fc53..a5ff9e6ade46f6e4423d6bcf28b2581100543ae2 100644
--- a/src/containers/WindowSideBarCanvasPanel.js
+++ b/src/containers/WindowSideBarCanvasPanel.js
@@ -27,14 +27,10 @@ const mapDispatchToProps = { setCanvas: actions.setCanvas };
 /**
  *
  * @param theme
- * @returns {{clickable: {cursor: string},
- * label: {fontSize: string, paddingLeft: number}, windowSideBarH2: *}}
+ * @returns {label: {fontSize: string, paddingLeft: number}, windowSideBarH2: *}}
  */
 const styles = theme => ({
   windowSideBarH2: theme.typography.h5,
-  clickable: {
-    cursor: 'pointer',
-  },
   label: {
     fontSize: '8pt',
     paddingLeft: 8,