diff --git a/__tests__/src/components/ThumbnailNavigation.test.js b/__tests__/src/components/ThumbnailNavigation.test.js
index 4c10fb37c404b96d05dddf438dbcf61bedf88797..30b60008edcb676d7ca479fcc21e48bdb4d52c94 100644
--- a/__tests__/src/components/ThumbnailNavigation.test.js
+++ b/__tests__/src/components/ThumbnailNavigation.test.js
@@ -64,7 +64,7 @@ describe('ThumbnailNavigation', () => {
     expect(setCanvas).toHaveBeenCalledWith('foobar', 0);
   });
   it('sets up calculated width based off of height of area and dimensions of canvas', () => {
-    expect(renderedGrid.find('.mirador-thumbnail-nav-container').first().prop('style').width).toEqual(90);
+    expect(renderedGrid.find('.mirador-thumbnail-nav-container').first().prop('style').width).toEqual(95);
   });
   it('renders canvas thumbnails', () => {
     expect(renderedGrid.find('CanvasThumbnail').length).toBe(3);
@@ -125,12 +125,12 @@ describe('ThumbnailNavigation', () => {
       expect(wrapper.instance().rightWidth()).toEqual(200);
     });
     it('calculateScaledWidth', () => {
-      expect(wrapper.instance().calculateScaledWidth({ index: 0 })).toEqual(90);
-      expect(rightWrapper.instance().calculateScaledWidth({ index: 0 })).toEqual(100);
+      expect(wrapper.instance().calculateScaledWidth({ index: 0 })).toEqual(95);
+      expect(rightWrapper.instance().calculateScaledWidth({ index: 0 })).toEqual(116);
     });
     it('calculateScaledHeight', () => {
       expect(wrapper.instance().calculateScaledHeight({ index: 0 })).toEqual(135);
-      expect(rightWrapper.instance().calculateScaledHeight({ index: 0 })).toEqual(126);
+      expect(rightWrapper.instance().calculateScaledHeight({ index: 0 })).toEqual(166);
     });
 
     it('columnCount', () => {
diff --git a/src/components/ThumbnailNavigation.js b/src/components/ThumbnailNavigation.js
index 459da0acd9236310ef7370cb139339fbf08fac22..7950ec197ffa8097afd2af8164b179881f520dce 100644
--- a/src/components/ThumbnailNavigation.js
+++ b/src/components/ThumbnailNavigation.js
@@ -2,7 +2,6 @@ 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 GridList from '@material-ui/core/GridList';
 import GridListTile from '@material-ui/core/GridListTile';
 import GridListTileBar from '@material-ui/core/GridListTileBar';
 import Typography from '@material-ui/core/Typography';
@@ -63,19 +62,18 @@ export class ThumbnailNavigation extends Component {
       classes, window, setCanvas, config, canvasGroupings, position,
     } = this.props;
     const currentIndex = (position === 'far-right') ? rowIndex : columnIndex;
-    const maxHeight = (position === 'far-right') ? null : config.thumbnailNavigation.height - (this.scrollbarSize + 12);
-    const maxWidth = (position === 'far-right') ? config.thumbnailNavigation.width : null;
     const currentGroupings = canvasGroupings.groupings()[currentIndex];
-    const currentWorld = new CanvasWorld(currentGroupings);
     return (
       <div
         key={key}
         style={style}
         className={ns('thumbnail-nav-container')}
       >
-        <GridList
-          component="div"
-          spacing={0}
+        <div
+          style={{
+            display: 'flex',
+            flexWrap: 'nowrap',
+          }}
           className={classNames(
             ns(['thumbnail-nav-canvas', `thumbnail-nav-canvas-${currentIndex}`, this.currentCanvasClass(currentGroupings.map(canvas => canvas.index))]),
             classes.canvas,
@@ -87,26 +85,26 @@ export class ThumbnailNavigation extends Component {
         >
           {currentGroupings.map((canvas, i) => {
             const manifestoCanvas = new ManifestoCanvas(canvas);
-            const worldWidth = currentWorld.worldBounds()[2];
-            const tileWidth = Math.floor(
-              canvas.getWidth() / worldWidth * 100,
+            const thumbWidth = Math.floor(
+              (style.height - this.spacing) * manifestoCanvas.aspectRatio,
             );
+            const maxHeight = (position === 'far-right') ? null : style.height - this.spacing;
+            const maxWidth = (position === 'far-right') ? thumbWidth : null;
             return (
               <GridListTile
                 component="div"
                 key={canvas.index}
                 onClick={() => setCanvas(window.id, currentGroupings[0].index)}
                 style={{
-                  height: style.height - this.spacing / 2,
-                  width: `${tileWidth}%`,
+                  height: '100%',
+                  width: 'auto',
                 }}
               >
                 <CanvasThumbnail
-                  imageUrl={manifestoCanvas.thumbnail(null, maxHeight)}
+                  imageUrl={manifestoCanvas.thumbnail(null, config.thumbnailNavigation.height)}
                   isValid={manifestoCanvas.hasValidDimensions}
                   maxHeight={maxHeight}
                   maxWidth={maxWidth}
-                  aspectRatio={manifestoCanvas.aspectRatio}
                 />
                 <GridListTileBar
                   classes={{ root: classes.root }}
@@ -119,7 +117,7 @@ export class ThumbnailNavigation extends Component {
               </GridListTile>
             );
           })}
-        </GridList>
+        </div>
       </div>
     );
   }
@@ -133,12 +131,18 @@ export class ThumbnailNavigation extends Component {
     const { config, canvasGroupings, position } = this.props;
     switch (position) {
       case 'far-right':
-        return this.rightWidth();
+        return this.rightWidth() + this.spacing;
       // Default case bottom
-      default:
-        return canvasGroupings.getCanvases(options.index)
-          .map(canvas => new ManifestoCanvas(canvas))
-          .reduce((acc, currentCanvas) => { return acc + (currentCanvas.hasValidDimensions ? Math.floor((config.thumbnailNavigation.height - this.scrollbarSize) * currentCanvas.aspectRatio) : config.thumbnailNavigation.width); }, 0); // eslint-disable-line arrow-body-style, max-len
+      default: {
+        const canvases = canvasGroupings.getCanvases(options.index);
+        const world = new CanvasWorld(canvases);
+        const bounds = world.worldBounds();
+        const calc = Math.floor(
+          (config.thumbnailNavigation.height - this.scrollbarSize - this.spacing)
+           * bounds[2] / bounds[3],
+        );
+        return calc + this.spacing;
+      }
     }
   }
 
@@ -150,12 +154,15 @@ export class ThumbnailNavigation extends Component {
   calculateScaledHeight(options) {
     const { config, canvasGroupings, position } = this.props;
     switch (position) {
-      case 'far-right':
-        return Math.max(
-          ...canvasGroupings.getCanvases(options.index)
-            .map(canvas => new ManifestoCanvas(canvas))
-            .map(canvas => (canvas.hasValidDimensions ? Math.floor((config.thumbnailNavigation.width - this.spacing) / canvas.aspectRatio) : config.thumbnailNavigation.height - 12)), // eslint-disable-line arrow-body-style, max-len
+      case 'far-right': {
+        const canvases = canvasGroupings.getCanvases(options.index);
+        const world = new CanvasWorld(canvases);
+        const bounds = world.worldBounds();
+        const calc = Math.floor(
+          config.thumbnailNavigation.width * canvases.length * bounds[3] / bounds[2],
         );
+        return calc + this.spacing;
+      }
       // Default case bottom
       default:
         return config.thumbnailNavigation.height - this.scrollbarSize;
diff --git a/src/containers/ThumbnailNavigation.js b/src/containers/ThumbnailNavigation.js
index 7b6859f51b5cded5ec9f227d13b625e55b7175e2..e3bddc280c3ac8ef2d59b72f36565f5b8161a85a 100644
--- a/src/containers/ThumbnailNavigation.js
+++ b/src/containers/ThumbnailNavigation.js
@@ -44,6 +44,7 @@ const styles = theme => ({
     color: theme.palette.common.white,
     cursor: 'pointer',
     padding: '2px',
+    margin: '2px',
     '&$currentCanvas': {
       border: `2px solid ${theme.palette.secondary.main}`,
     },