diff --git a/_site/assets/css/styles.css b/_site/assets/css/styles.css
index 7f905f1..b45d78c 100644
--- a/_site/assets/css/styles.css
+++ b/_site/assets/css/styles.css
@@ -234,4 +234,37 @@ select {
     .main-content.gallery-open {
         width: 100%;
     }
+}
+
+/* New styles for thumbnail navigation */
+.thumbnail-nav {
+    position: fixed;
+    bottom: 40px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    gap: 10px;
+    padding: 15px;
+    background: rgba(255, 255, 255, 0.9);
+    border-radius: 4px;
+    z-index: 1002;
+}
+
+.thumbnail {
+    width: 60px;
+    height: 40px;
+    background: #f0f0f0;
+    cursor: pointer;
+    opacity: 0.6;
+    transition: opacity 0.2s;
+}
+
+.thumbnail img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.thumbnail.active {
+    opacity: 1;
 } 
\ No newline at end of file
diff --git a/_site/index.html b/_site/index.html
index 0c30d81..a8012cb 100644
--- a/_site/index.html
+++ b/_site/index.html
@@ -218,10 +218,14 @@ <h1>A MAGNO</h1>
     
     // Filter images for this folder
     const folderImages = imageData.images.filter(img => img.folder === folderPath);
-    console.log('Images found for folder:', folderImages);
     
-    // Add images to gallery
-    folderImages.forEach(image => {
+    // Create thumbnail navigation
+    const thumbnailNav = document.createElement('div');
+    thumbnailNav.className = 'thumbnail-nav';
+    
+    // Add images to gallery and create thumbnails
+    folderImages.forEach((image, index) => {
+        // Create main photo item
         const photoItem = document.createElement('div');
         photoItem.className = 'photo-item';
         photoItem.innerHTML = `
@@ -232,6 +236,33 @@ <h1>A MAGNO</h1>
             </div>
         `;
         photoGrid.appendChild(photoItem);
+        
+        // Create thumbnail
+        const thumbnail = document.createElement('div');
+        thumbnail.className = 'thumbnail';
+        thumbnail.innerHTML = `<img src="/photos${image.path}" loading="lazy">`;
+        thumbnail.onclick = () => {
+            const offset = index * (window.innerWidth - 200);
+            galleryView.scrollTo({
+                left: offset,
+                behavior: 'smooth'
+            });
+        };
+        thumbnailNav.appendChild(thumbnail);
+    });
+    
+    // Add thumbnail navigation to gallery view
+    galleryView.appendChild(thumbnailNav);
+    
+    // Update active thumbnail on scroll
+    galleryView.addEventListener('scroll', () => {
+        const scrollPosition = galleryView.scrollLeft;
+        const itemWidth = window.innerWidth - 200;
+        const activeIndex = Math.round(scrollPosition / itemWidth);
+        
+        document.querySelectorAll('.thumbnail').forEach((thumb, index) => {
+            thumb.classList.toggle('active', index === activeIndex);
+        });
     });
 
     galleryView.classList.add('active');
@@ -242,8 +273,11 @@ <h1>A MAGNO</h1>
     if (event) {
         event.preventDefault();
     }
-    console.log('Hiding gallery');
     const galleryView = document.querySelector('.gallery-view');
+    const thumbnailNav = galleryView.querySelector('.thumbnail-nav');
+    if (thumbnailNav) {
+        thumbnailNav.remove();
+    }
     galleryView.classList.remove('active');
     document.body.style.overflow = '';
 }
diff --git a/assets/css/styles.css b/assets/css/styles.css
index 649c31e..778c107 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -236,4 +236,37 @@ select {
     .main-content.gallery-open {
         width: 100%;
     }
+}
+
+/* New styles for thumbnail navigation */
+.thumbnail-nav {
+    position: fixed;
+    bottom: 40px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    gap: 10px;
+    padding: 15px;
+    background: rgba(255, 255, 255, 0.9);
+    border-radius: 4px;
+    z-index: 1002;
+}
+
+.thumbnail {
+    width: 60px;
+    height: 40px;
+    background: #f0f0f0;
+    cursor: pointer;
+    opacity: 0.6;
+    transition: opacity 0.2s;
+}
+
+.thumbnail img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.thumbnail.active {
+    opacity: 1;
 } 
\ No newline at end of file
diff --git a/index.html b/index.html
index bb0afff..0117167 100644
--- a/index.html
+++ b/index.html
@@ -178,10 +178,14 @@ <h1>A MAGNO</h1>
     
     // Filter images for this folder
     const folderImages = imageData.images.filter(img => img.folder === folderPath);
-    console.log('Images found for folder:', folderImages);
     
-    // Add images to gallery
-    folderImages.forEach(image => {
+    // Create thumbnail navigation
+    const thumbnailNav = document.createElement('div');
+    thumbnailNav.className = 'thumbnail-nav';
+    
+    // Add images to gallery and create thumbnails
+    folderImages.forEach((image, index) => {
+        // Create main photo item
         const photoItem = document.createElement('div');
         photoItem.className = 'photo-item';
         photoItem.innerHTML = `
@@ -192,6 +196,33 @@ <h1>A MAGNO</h1>
             </div>
         `;
         photoGrid.appendChild(photoItem);
+        
+        // Create thumbnail
+        const thumbnail = document.createElement('div');
+        thumbnail.className = 'thumbnail';
+        thumbnail.innerHTML = `<img src="{{ site.baseurl }}${image.path}" loading="lazy">`;
+        thumbnail.onclick = () => {
+            const offset = index * (window.innerWidth - 200);
+            galleryView.scrollTo({
+                left: offset,
+                behavior: 'smooth'
+            });
+        };
+        thumbnailNav.appendChild(thumbnail);
+    });
+    
+    // Add thumbnail navigation to gallery view
+    galleryView.appendChild(thumbnailNav);
+    
+    // Update active thumbnail on scroll
+    galleryView.addEventListener('scroll', () => {
+        const scrollPosition = galleryView.scrollLeft;
+        const itemWidth = window.innerWidth - 200;
+        const activeIndex = Math.round(scrollPosition / itemWidth);
+        
+        document.querySelectorAll('.thumbnail').forEach((thumb, index) => {
+            thumb.classList.toggle('active', index === activeIndex);
+        });
     });
 
     galleryView.classList.add('active');
@@ -202,8 +233,11 @@ <h1>A MAGNO</h1>
     if (event) {
         event.preventDefault();
     }
-    console.log('Hiding gallery');
     const galleryView = document.querySelector('.gallery-view');
+    const thumbnailNav = galleryView.querySelector('.thumbnail-nav');
+    if (thumbnailNav) {
+        thumbnailNav.remove();
+    }
     galleryView.classList.remove('active');
     document.body.style.overflow = '';
 }