diff --git a/__tests__/src/lib/ManifestoCanvas.test.js b/__tests__/src/lib/ManifestoCanvas.test.js
index 7a3c8db79d83cac6371700a15b1290bf9ab686a7..ef43ad1c765850821ea4f25bea4eff436a64b91a 100644
--- a/__tests__/src/lib/ManifestoCanvas.test.js
+++ b/__tests__/src/lib/ManifestoCanvas.test.js
@@ -43,14 +43,28 @@ describe('ManifestoCanvas', () => {
     });
   });
   describe('thumbnail', () => {
-    it('calculates a thumbnail image API request based off of height', () => {
+    it('calculates a thumbnail image API request based off of width, height and aspect ratio', () => {
+      expect(instance.thumbnail(100, 100)).toEqual(
+        'https://stacks.stanford.edu/image/iiif/hg676jb4964%2F0380_796-44/full/,100/0/default.jpg',
+      );
+
+      expect(instance.thumbnail(100, 1000)).toEqual(
+        'https://stacks.stanford.edu/image/iiif/hg676jb4964%2F0380_796-44/full/100,/0/default.jpg',
+      );
+    });
+    it('calculates a thumbnail image API request based off of width', () => {
       expect(instance.thumbnail(100)).toEqual(
-        'https://stacks.stanford.edu/image/iiif/hg676jb4964%2F0380_796-44/full/66,/0/default.jpg',
+        'https://stacks.stanford.edu/image/iiif/hg676jb4964%2F0380_796-44/full/100,/0/default.jpg',
+      );
+    });
+    it('calculates a thumbnail image API request based off of height', () => {
+      expect(instance.thumbnail(null, 100)).toEqual(
+        'https://stacks.stanford.edu/image/iiif/hg676jb4964%2F0380_796-44/full/,100/0/default.jpg',
       );
     });
     it('defaults to using 150 as a height', () => {
       expect(instance.thumbnail()).toEqual(
-        'https://stacks.stanford.edu/image/iiif/hg676jb4964%2F0380_796-44/full/100,/0/default.jpg',
+        'https://stacks.stanford.edu/image/iiif/hg676jb4964%2F0380_796-44/full/,150/0/default.jpg',
       );
     });
 
diff --git a/src/components/ThumbnailNavigation.js b/src/components/ThumbnailNavigation.js
index b79404d53926f62588a9ac732151838e2867959b..edd162f34c80021b2c7873d4a2c0071ae38b7534 100644
--- a/src/components/ThumbnailNavigation.js
+++ b/src/components/ThumbnailNavigation.js
@@ -73,7 +73,7 @@ export class ThumbnailNavigation extends Component {
             >
               <CanvasThumbnail
                 onClick={() => setCanvas(window.id, currentGroupings[0].index)}
-                imageUrl={new ManifestoCanvas(canvas).thumbnail(config.thumbnailNavigation.height)}
+                imageUrl={new ManifestoCanvas(canvas).thumbnail(null, config.thumbnailNavigation.height)}
                 height={config.thumbnailNavigation.height}
               />
             </div>
diff --git a/src/components/WindowSideBarCanvasPanel.js b/src/components/WindowSideBarCanvasPanel.js
index 58ff4ee6257224ccb89ce24dd54fe1185821d1cf..cd71348bcd42def01d0cb8c92b74ded9d2827666 100644
--- a/src/components/WindowSideBarCanvasPanel.js
+++ b/src/components/WindowSideBarCanvasPanel.js
@@ -48,7 +48,7 @@ export class WindowSideBarCanvasPanel extends Component {
                     <CanvasThumbnail
                       className={classNames(classes.clickable)}
                       isValid={isValid}
-                      imageUrl={manifestoCanvas.thumbnail(config.canvasNavigation.height)}
+                      imageUrl={manifestoCanvas.thumbnail(config.canvasNavigation.width, config.canvasNavigation.height)}
                       onClick={onClick}
                       style={{
                         cursor: 'pointer',
diff --git a/src/config/settings.js b/src/config/settings.js
index 24e7359328bd1a68dd5fc4d0b3d00a0d75fa6935..5cb87c448822c6eaa14ce75caa9c31eb786ae7a1 100644
--- a/src/config/settings.js
+++ b/src/config/settings.js
@@ -1,6 +1,7 @@
 export default {
   canvasNavigation: {
-    height: 100,
+    height: 50,
+    width: 50,
   },
   theme: { // Sets up a MaterialUI theme. See https://material-ui.com/customization/default-theme/
     palette: {
diff --git a/src/lib/ManifestoCanvas.js b/src/lib/ManifestoCanvas.js
index 7f243436b448c177f0227baa6da4b2e1cc919f7c..e092144d41a9b59432cfe0e3a3f2e8b97c099f29 100644
--- a/src/lib/ManifestoCanvas.js
+++ b/src/lib/ManifestoCanvas.js
@@ -43,14 +43,37 @@ export default class ManifestoCanvas {
    * Creates a canonical image request for a thumb
    * @param {Number} height
    */
-  thumbnail(height = 150) {
-    const width = Math.floor(height * this.aspectRatio);
+  thumbnail(maxWidth = undefined, maxHeight = undefined) {
+    let width;
+    let height;
 
     if (!this.imageInformationUri) {
       return undefined;
     }
 
-    return this.canonicalImageUri.replace(/\/full\/.*\/0\//, `/full/${width},/0/`);
+    if (maxWidth && maxHeight) {
+      const { aspectRatio } = this;
+      const desiredAspectRatio = maxWidth / maxHeight;
+
+      // size to width
+      if (desiredAspectRatio < aspectRatio) {
+        height = null;
+        width = maxWidth;
+      } else {
+        height = maxHeight;
+        width = null;
+      }
+    } else if (!maxWidth && !maxHeight) {
+      width = null;
+      height = '150';
+    } else {
+      width = maxWidth;
+      height = maxHeight;
+    }
+    // note that, although the IIIF server may support sizeByConfinedWh (e.g. !w,h)
+    // this is a IIIF level 2 feature, so we're instead providing w, or h,-style requests
+    // which are only level 1.
+    return this.canonicalImageUri.replace(/\/full\/.*\/0\//, `/full/${width || ''},${height || ''}/0/`);
   }
 
   /**