diff --git a/generateSite.js b/generateSite.js
index b279e81..04fb430 100644
--- a/generateSite.js
+++ b/generateSite.js
@@ -56,45 +56,52 @@ async function generateSite() {
             position: relative;
             width: 100%;
             height: 100%;
-            aspect-ratio: 1; /* This will be adjusted based on the actual image */
+            background: #000; /* Dark background while loading */
+            aspect-ratio: 1;
         }
         .progressive-image {
             position: absolute;
             top: 0;
             left: 0;
-            width: 100%;
-            height: 100%;
+            right: 0;
+            bottom: 0;
+            max-width: 100%;
+            max-height: 100%;
+            margin: auto;
             object-fit: contain;
-            transition: opacity 0.5s ease-in-out;
         }
         .thumbnail {
             filter: blur(10px);
-            transform: scale(1.1);
+            transform: scale(1.02); /* Reduced scale to prevent edges showing */
             opacity: 1;
+            z-index: 1; /* Place thumbnail above full image while loading */
         }
         .full-image {
             opacity: 0;
+            z-index: 2; /* Place full image on top when loaded */
         }
         .full-image.loaded {
             opacity: 1;
         }
+        .full-image.loaded + .thumbnail {
+            opacity: 0; /* Hide thumbnail when full image is loaded */
+        }
     </style>
 </head>
 <body>
     <div class="image-container">
         ${image?.localPath ? `
             <div class="progressive-image-container">
-                <img 
-                    class="progressive-image thumbnail" 
-                    src="${image.localPath}?quality=10&width=50" 
-                    alt="${image.metadata.description || ''}"
-                    onload="this.parentElement.style.aspectRatio = this.naturalWidth + '/' + this.naturalHeight;"
-                >
                 <img 
                     class="progressive-image full-image" 
                     src="${image.localPath}" 
                     alt="${image.metadata.description || ''}"
-                    onload="this.classList.add('loaded')"
+                    onload="this.classList.add('loaded'); this.parentElement.style.aspectRatio = this.naturalWidth + '/' + this.naturalHeight;"
+                >
+                <img 
+                    class="progressive-image thumbnail" 
+                    src="${image.localPath}?quality=10&width=50" 
+                    alt="${image.metadata.description || ''}"
                 >
             </div>
         ` : '<p>Image not available</p>'}
