diff --git a/ts_web/elements/dees-pdf-viewer/component.ts b/ts_web/elements/dees-pdf-viewer/component.ts
index 0823619..9c5e92b 100644
--- a/ts_web/elements/dees-pdf-viewer/component.ts
+++ b/ts_web/elements/dees-pdf-viewer/component.ts
@@ -604,41 +604,56 @@ export class DeesPdfViewer extends DeesElement {
 
     try {
       await this.updateComplete;
-      const thumbnails = this.shadowRoot?.querySelectorAll('.thumbnail-canvas') as NodeListOf<HTMLCanvasElement>;
-      const thumbnailWidth = 176; // Fixed width for thumbnails (200px container - 24px padding)
+      const thumbnails = this.shadowRoot?.querySelectorAll('.thumbnail') as NodeListOf<HTMLElement>;
+      const thumbnailCanvases = this.shadowRoot?.querySelectorAll('.thumbnail-canvas') as NodeListOf<HTMLCanvasElement>;
+      const sidebarContent = this.shadowRoot?.querySelector('.sidebar-content') as HTMLElement;
+
+      // Get the actual available width for thumbnails (sidebar width minus padding)
+      const sidebarStyles = window.getComputedStyle(sidebarContent);
+      const sidebarPadding = parseFloat(sidebarStyles.paddingLeft) + parseFloat(sidebarStyles.paddingRight);
+      const maxThumbnailWidth = 200 - sidebarPadding - 4; // Account for border
 
       // Clear all canvases first to prevent conflicts
-      for (const canvas of Array.from(thumbnails)) {
+      for (const canvas of Array.from(thumbnailCanvases)) {
         const context = canvas.getContext('2d');
         if (context) {
           context.clearRect(0, 0, canvas.width, canvas.height);
         }
       }
 
-      for (const canvas of Array.from(thumbnails)) {
+      for (let i = 0; i < thumbnailCanvases.length; i++) {
         if (signal?.aborted) return;
 
+        const canvas = thumbnailCanvases[i];
+        const thumbnail = thumbnails[i];
         const pageNum = parseInt(canvas.dataset.page || '1');
         const page = await this.pdfDocument.getPage(pageNum);
 
-        // Calculate scale to fit thumbnail width while maintaining aspect ratio
+        // Get the page's natural dimensions
         const initialViewport = page.getViewport({ scale: 1 });
-        const scale = thumbnailWidth / initialViewport.width;
+
+        // Calculate scale to fit within the max thumbnail width
+        const scale = maxThumbnailWidth / initialViewport.width;
         const viewport = page.getViewport({ scale });
 
         // Set canvas dimensions to actual render size
         canvas.width = viewport.width;
         canvas.height = viewport.height;
 
-        // Also set the display size via style to ensure proper display
+        // Set the display size via style to ensure proper display
         canvas.style.width = `${viewport.width}px`;
         canvas.style.height = `${viewport.height}px`;
 
+        // Set the actual thumbnail container height
+        thumbnail.style.height = `${viewport.height}px`;
+        thumbnail.style.minHeight = `${viewport.height}px`;
+
         const context = canvas.getContext('2d');
         if (!context) {
           page.cleanup?.();
           continue;
         }
+
         const renderContext = {
           canvasContext: context,
           viewport: viewport,
diff --git a/ts_web/elements/dees-pdf-viewer/styles.ts b/ts_web/elements/dees-pdf-viewer/styles.ts
index 4b2468b..d271cca 100644
--- a/ts_web/elements/dees-pdf-viewer/styles.ts
+++ b/ts_web/elements/dees-pdf-viewer/styles.ts
@@ -161,9 +161,7 @@ export const viewerStyles = [
       flex: 1;
       overflow-y: auto;
       padding: 12px;
-      display: flex;
-      flex-direction: column;
-      gap: 12px;
+      display: block;
       overscroll-behavior: contain;
       min-height: 0;
     }
@@ -175,11 +173,16 @@ export const viewerStyles = [
       cursor: pointer;
       border: 2px solid transparent;
       transition: border-color 0.15s ease;
-      background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(215 20% 18%)')};
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      min-height: 100px;
+      background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(215 20% 18%)')};
+      display: block;
+      width: 100%;
+      margin-bottom: 12px;
+      /* Default A4 aspect ratio (297mm / 210mm ≈ 1.414) */
+      min-height: calc(176px * 1.414);
+    }
+
+    .thumbnail:last-child {
+      margin-bottom: 0;
     }
 
     .thumbnail:hover {
@@ -192,7 +195,7 @@ export const viewerStyles = [
 
     .thumbnail-canvas {
       display: block;
-      max-width: 100%;
+      width: 100%;
       height: auto;
       image-rendering: -webkit-optimize-contrast;
       image-rendering: crisp-edges;