diff --git a/.DS_Store b/.DS_Store
index 1ed875d..320858b 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/books.html b/books.html
index 79cb17f..c84e426 100644
--- a/books.html
+++ b/books.html
@@ -60,24 +60,14 @@ <h1 class="logo_header">The Retro New</h1>
   </header>
 
   <div class="container spacing">
-    <div class="row">
+    <div class="row justify-content-center">
       <!-- Thumbnails -->
-      <!-- <div class="col-md-3 col-sm-6 mb-4">
-        <img src="img/old/samurai_jack_old.jpg" alt="Thumbnail" class="img-fluid"
-          onclick="openModal('img/new/samurai_jack_new.jpg', 'img/old/samurai_jack_old.jpg', 0)" />
-      </div>
-      <div class="col-md-3 col-sm-6 mb-4">
-        <img src="img/old/ssw_old.jpg" alt="Thumbnail" class="img-fluid"
-          onclick="openModal('img/new/ssw_new.jpg', 'img/old/ssw_old.jpg', 1)" />
-      </div>
       <div class="col-md-3 col-sm-6 mb-4">
-        <img src="img/old/tsomi_old.jpg" alt="Thumbnail" class="img-fluid"
-          onclick="openModal('img/new/tsomi_new.jpg', 'img/old/tsomi_old.jpg', 2)" />
+        <!-- <div class="thumbnail-container">
+          <img src="img/old/samurai_jack_old.jpg" alt="Thumbnail" class="thumbnail"
+            onclick="openModal('img/new/samurai_jack_new.jpg', 'img/old/samurai_jack_old.jpg', 0)" />
+        </div> -->
       </div>
-      <div class="col-md-3 col-sm-6 mb-4">
-        <img src="img/old/ewj_old.jpg" alt="Thumbnail" class="img-fluid"
-          onclick="openModal('img/new/ewj_new.jpg', 'img/old/ewj_old.jpg', 3)" />
-      </div> -->
     </div>
   </div>
 
@@ -108,125 +98,125 @@ <h1 class="logo_header">The Retro New</h1>
 
   <script>
     let currentImageIndex = 0;
-    
+
     function setClipPath(compareDiv) {
-        const rangeInput = compareDiv.querySelector('.c-rng.c-compare__range');
-        const newImg = compareDiv.querySelector('.c-compare__left');
-        const oldImg = compareDiv.querySelector('.c-compare__right');
-        const value = `${rangeInput.value}%`;
-        newImg.style.clipPath = `polygon(0% 0%, ${value} 0%, ${value} 100%, 0% 100%)`;
-        oldImg.style.clipPath = `polygon(100% 0%, ${value} 0%, ${value} 100%, 100% 100%)`;
+      const rangeInput = compareDiv.querySelector('.c-rng.c-compare__range');
+      const newImg = compareDiv.querySelector('.c-compare__left');
+      const oldImg = compareDiv.querySelector('.c-compare__right');
+      const value = `${rangeInput.value}%`;
+      newImg.style.clipPath = `polygon(0% 0%, ${value} 0%, ${value} 100%, 0% 100%)`;
+      oldImg.style.clipPath = `polygon(100% 0%, ${value} 0%, ${value} 100%, 100% 100%)`;
     }
-    
+
     function openModal(newImgSrc, oldImgSrc, index) {
-    console.log("openModal function triggered");
-    console.log("New Image Source:", newImgSrc);
-    console.log("Old Image Source:", oldImgSrc);
-
-    const modal = document.getElementById('myModal');
-    const modalContent = document.querySelector('.modal-content');
-
-    // Create the comparison div
-    const compareDiv = document.createElement('div');
-    compareDiv.className = 'c-compare';
-    compareDiv.style.setProperty('--value', '50%');
-
-    // Create the new image
-    const newImg = document.createElement('img');
-    newImg.className = 'c-compare__left';
-    newImg.src = newImgSrc;
-    newImg.alt = 'New';
-    compareDiv.appendChild(newImg);
-
-    // Create the old image
-    const oldImg = document.createElement('img');
-    oldImg.className = 'c-compare__right';
-    oldImg.src = oldImgSrc;
-    oldImg.alt = 'Original';
-    compareDiv.appendChild(oldImg);
-
-    // Create the range input
-    const rangeInput = document.createElement('input');
-    rangeInput.type = 'range';
-    rangeInput.className = 'c-rng c-compare__range';
-    rangeInput.min = '0';
-    rangeInput.max = '100';
-    rangeInput.value = '50';
-
-    // Add the oninput function for the range input
-    rangeInput.oninput = function () {
+      console.log("openModal function triggered");
+      console.log("New Image Source:", newImgSrc);
+      console.log("Old Image Source:", oldImgSrc);
+
+      const modal = document.getElementById('myModal');
+      const modalContent = document.querySelector('.modal-content');
+
+      // Create the comparison div
+      const compareDiv = document.createElement('div');
+      compareDiv.className = 'c-compare';
+      compareDiv.style.setProperty('--value', '50%');
+
+      // Create the new image
+      const newImg = document.createElement('img');
+      newImg.className = 'c-compare__left';
+      newImg.src = newImgSrc;
+      newImg.alt = 'New';
+      compareDiv.appendChild(newImg);
+
+      // Create the old image
+      const oldImg = document.createElement('img');
+      oldImg.className = 'c-compare__right';
+      oldImg.src = oldImgSrc;
+      oldImg.alt = 'Original';
+      compareDiv.appendChild(oldImg);
+
+      // Create the range input
+      const rangeInput = document.createElement('input');
+      rangeInput.type = 'range';
+      rangeInput.className = 'c-rng c-compare__range';
+      rangeInput.min = '0';
+      rangeInput.max = '100';
+      rangeInput.value = '50';
+
+      // Add the oninput function for the range input
+      rangeInput.oninput = function () {
         compareDiv.style.setProperty('--value', `${this.value}%`);
-    };
+      };
 
-    compareDiv.appendChild(rangeInput);
+      compareDiv.appendChild(rangeInput);
 
-    // Append the comparison div to the modal content
-    modalContent.innerHTML = '';
-    modalContent.appendChild(compareDiv);
+      // Append the comparison div to the modal content
+      modalContent.innerHTML = '';
+      modalContent.appendChild(compareDiv);
 
-    // Manually trigger the oninput event to set the initial state
-    rangeInput.dispatchEvent(new Event('input'));
+      // Manually trigger the oninput event to set the initial state
+      rangeInput.dispatchEvent(new Event('input'));
 
-    modal.style.display = "block";
-    currentImageIndex = index;
+      modal.style.display = "block";
+      currentImageIndex = index;
 
-    // Close modal when clicking on the modal's background
-    modal.onclick = function(event) {
+      // Close modal when clicking on the modal's background
+      modal.onclick = function (event) {
         if (event.target === modal) {
-            closeModal();
+          closeModal();
         }
-    };
+      };
 
-    // Stop event propagation for the modal's content
-    modalContent.onclick = function(event) {
+      // Stop event propagation for the modal's content
+      modalContent.onclick = function (event) {
         event.stopPropagation();
-    };
-}
-f
-    
+      };
+    }
+    f
+
     function closeModal() {
-        const modal = document.getElementById('myModal');
-        modal.style.display = "none";
+      const modal = document.getElementById('myModal');
+      modal.style.display = "none";
     }
-    
+
     function previousImage() {
-        if (currentImageIndex > 0) {
-            currentImageIndex--;
-            const newImgSrc = getRelativePath(document.querySelectorAll('.thumbnail-grid img')[currentImageIndex].src);
-            const oldImgSrc = newImgSrc.replace('/new/', '/old/');
-            openModal(newImgSrc, oldImgSrc, currentImageIndex);
-        }
+      if (currentImageIndex > 0) {
+        currentImageIndex--;
+        const newImgSrc = getRelativePath(document.querySelectorAll('.thumbnail-grid img')[currentImageIndex].src);
+        const oldImgSrc = newImgSrc.replace('/new/', '/old/');
+        openModal(newImgSrc, oldImgSrc, currentImageIndex);
+      }
     }
-    
+
     function nextImage() {
-        if (currentImageIndex < document.querySelectorAll('.thumbnail-grid img').length - 1) {
-            currentImageIndex++;
-            const newImgSrc = getRelativePath(document.querySelectorAll('.thumbnail-grid img')[currentImageIndex].src);
-            const oldImgSrc = newImgSrc.replace('/new/', '/old/');
-            openModal(newImgSrc, oldImgSrc, currentImageIndex);
-        }
+      if (currentImageIndex < document.querySelectorAll('.thumbnail-grid img').length - 1) {
+        currentImageIndex++;
+        const newImgSrc = getRelativePath(document.querySelectorAll('.thumbnail-grid img')[currentImageIndex].src);
+        const oldImgSrc = newImgSrc.replace('/new/', '/old/');
+        openModal(newImgSrc, oldImgSrc, currentImageIndex);
+      }
     }
-    
+
     function getRelativePath(absoluteUrl) {
-        const a = document.createElement('a');
-        a.href = absoluteUrl;
-        return a.pathname.startsWith('/') ? a.pathname.substring(1) : a.pathname;
+      const a = document.createElement('a');
+      a.href = absoluteUrl;
+      return a.pathname.startsWith('/') ? a.pathname.substring(1) : a.pathname;
     }
-    
+
     document.addEventListener('DOMContentLoaded', function () {
-        const compareDivs = document.querySelectorAll('.c-compare');
-        compareDivs.forEach(div => div.style.setProperty('--value', '50%'));
+      const compareDivs = document.querySelectorAll('.c-compare');
+      compareDivs.forEach(div => div.style.setProperty('--value', '50%'));
     });
-    
+
     document.addEventListener('keydown', function (event) {
-        if (event.key === "ArrowLeft") {
-            previousImage();
-        } else if (event.key === "ArrowRight") {
-            nextImage();
-        }
+      if (event.key === "ArrowLeft") {
+        previousImage();
+      } else if (event.key === "ArrowRight") {
+        nextImage();
+      }
     });
-    </script>
-    
+  </script>
+
 
 
 
diff --git a/comics.html b/comics.html
index 79cb17f..f3b9666 100644
--- a/comics.html
+++ b/comics.html
@@ -60,24 +60,14 @@ <h1 class="logo_header">The Retro New</h1>
   </header>
 
   <div class="container spacing">
-    <div class="row">
+    <div class="row justify-content-center">
       <!-- Thumbnails -->
       <!-- <div class="col-md-3 col-sm-6 mb-4">
-        <img src="img/old/samurai_jack_old.jpg" alt="Thumbnail" class="img-fluid"
-          onclick="openModal('img/new/samurai_jack_new.jpg', 'img/old/samurai_jack_old.jpg', 0)" />
+        <div class="thumbnail-container">
+          <img src="img/old/samurai_jack_old.jpg" alt="Thumbnail" class="thumbnail"
+            onclick="openModal('img/new/samurai_jack_new.jpg', 'img/old/samurai_jack_old.jpg', 0)" />
+        </div> -->
       </div>
-      <div class="col-md-3 col-sm-6 mb-4">
-        <img src="img/old/ssw_old.jpg" alt="Thumbnail" class="img-fluid"
-          onclick="openModal('img/new/ssw_new.jpg', 'img/old/ssw_old.jpg', 1)" />
-      </div>
-      <div class="col-md-3 col-sm-6 mb-4">
-        <img src="img/old/tsomi_old.jpg" alt="Thumbnail" class="img-fluid"
-          onclick="openModal('img/new/tsomi_new.jpg', 'img/old/tsomi_old.jpg', 2)" />
-      </div>
-      <div class="col-md-3 col-sm-6 mb-4">
-        <img src="img/old/ewj_old.jpg" alt="Thumbnail" class="img-fluid"
-          onclick="openModal('img/new/ewj_new.jpg', 'img/old/ewj_old.jpg', 3)" />
-      </div> -->
     </div>
   </div>
 
diff --git a/css/style.css b/css/style.css
index 7460608..96ea3ef 100644
--- a/css/style.css
+++ b/css/style.css
@@ -23,7 +23,7 @@ body {
 }
 
 .spacing {
-  margin-top: 15px;
+  margin-top: 30px;
 }
 
 .accentcolor {
@@ -41,12 +41,27 @@ ul li a:hover {
   font-family: 'serious3b', sans-serif;
   font-weight: bold;
   color:#ffffff
+  
 }
 
 .tagline-color {
   color:#ffffff
 }
 
+.thumbnail-container {
+  overflow: hidden;
+  position: relative;
+  padding-top: 100%; /* 1:1 aspect ratio */
+}
+.thumbnail {
+  object-fit: cover;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+
 /* modal */
 .modal {
   display: none; /* Changed to none */
diff --git a/games.html b/games.html
index d963d90..480f145 100644
--- a/games.html
+++ b/games.html
@@ -60,24 +60,47 @@ <h1 class="logo_header">The Retro New</h1>
   </header>
 
   <div class="container spacing">
-    <div class="row">
+    <div class="row justify-content-center">
       <!-- Thumbnails -->
       <div class="col-md-3 col-sm-6 mb-4">
-        <img src="img/old/ssw_old.jpg" alt="Thumbnail" class="img-fluid"
-          onclick="openModal('img/new/ssw_new.jpg', 'img/old/ssw_old.jpg', 1)" />
+        <div class="thumbnail-container">
+          <img src="img/old/ssw_old.jpg" alt="Thumbnail" class="thumbnail"
+            onclick="openModal('img/old/ssw_old.jpg', 'img/new/ssw_new.jpg')" />
+        </div>
       </div>
       <div class="col-md-3 col-sm-6 mb-4">
-        <img src="img/old/tsomi_old.jpg" alt="Thumbnail" class="img-fluid"
-          onclick="openModal('img/new/tsomi_new.jpg', 'img/old/tsomi_old.jpg', 2)" />
+        <div class="thumbnail-container">
+          <img src="img/old/tsomi_old.jpg" alt="Thumbnail" class="thumbnail"
+            onclick="openModal('img/old/tsomi_old.jpg', 'img/new/tsomi_new.jpg')" />
+        </div>
       </div>
       <div class="col-md-3 col-sm-6 mb-4">
-        <img src="img/old/ewj_old.jpg" alt="Thumbnail" class="img-fluid"
-          onclick="openModal('img/new/ewj_new.jpg', 'img/old/ewj_old.jpg', 3)" />
+        <div class="thumbnail-container">
+          <img src="img/old/kings_quest_old.jpg" alt="Thumbnail" class="thumbnail"
+            onclick="openModal('img/old/kings_quest_old.jpg', 'img/new/kings_quest_new.jpg')" />
+        </div>
+      </div>
+      <div class="col-md-3 col-sm-6 mb-4">
+        <div class="thumbnail-container">
+          <img src="img/old/contra_old.jpg" alt="Thumbnail" class="thumbnail"
+            onclick="openModal('img/old/contra_old.jpg', 'img/new/contra_new.jpg')" />
+        </div>
+      </div>
+      <div class="col-md-3 col-sm-6 mb-4">
+        <div class="thumbnail-container">
+          <img src="img/old/myst_old.jpg" alt="Thumbnail" class="thumbnail"
+            onclick="openModal('img/old/myst_old.jpg', 'img/new/myst_new.jpg')" />
+        </div>
+      </div>
+      <div class="col-md-3 col-sm-6 mb-4">
+        <div class="thumbnail-container">
+          <img src="img/old/dkc1_old.jpg" alt="Thumbnail" class="thumbnail"
+            onclick="openModal('img/old/dkc1_old.jpg', 'img/new/dkc1_new.jpg')" />
+        </div>
       </div>
     </div>
   </div>
 
-
   <!-- <div class="row-cols-1">
     <div class="column thumbnail-grid">
       <img src="img/old/samurai_jack_old.jpg" alt="Thumbnail"
diff --git a/img/.DS_Store b/img/.DS_Store
index 0fdf607..cd251a9 100644
Binary files a/img/.DS_Store and b/img/.DS_Store differ
diff --git a/img/new/.DS_Store b/img/new/.DS_Store
new file mode 100644
index 0000000..5008ddf
Binary files /dev/null and b/img/new/.DS_Store differ
diff --git a/img/new/contra_new.jpg b/img/new/contra_new.jpg
new file mode 100644
index 0000000..c46ba17
Binary files /dev/null and b/img/new/contra_new.jpg differ
diff --git a/img/new/dkc1_new.jpg b/img/new/dkc1_new.jpg
new file mode 100644
index 0000000..a1f0aaf
Binary files /dev/null and b/img/new/dkc1_new.jpg differ
diff --git a/img/new/myst_new.jpg b/img/new/myst_new.jpg
new file mode 100644
index 0000000..c7332e9
Binary files /dev/null and b/img/new/myst_new.jpg differ
diff --git a/img/old/.DS_Store b/img/old/.DS_Store
new file mode 100644
index 0000000..1a16d2b
Binary files /dev/null and b/img/old/.DS_Store differ
diff --git a/img/old/contra_old.jpg b/img/old/contra_old.jpg
new file mode 100644
index 0000000..713f001
Binary files /dev/null and b/img/old/contra_old.jpg differ
diff --git a/img/old/dkc1_old.jpg b/img/old/dkc1_old.jpg
new file mode 100644
index 0000000..b89476d
Binary files /dev/null and b/img/old/dkc1_old.jpg differ
diff --git a/img/old/kings_quest_old.jpg b/img/old/kings_quest_old.jpg
index 3246aa3..1a8f031 100644
Binary files a/img/old/kings_quest_old.jpg and b/img/old/kings_quest_old.jpg differ
diff --git a/img/old/myst_old.jpg b/img/old/myst_old.jpg
new file mode 100644
index 0000000..7839ce2
Binary files /dev/null and b/img/old/myst_old.jpg differ
diff --git a/img/old/myst_old2.jpg b/img/old/myst_old2.jpg
new file mode 100644
index 0000000..554e457
Binary files /dev/null and b/img/old/myst_old2.jpg differ
diff --git a/movies.html b/movies.html
index 47593b0..56ca7a6 100644
--- a/movies.html
+++ b/movies.html
@@ -60,11 +60,13 @@ <h1 class="logo_header">The Retro New</h1>
   </header>
 
   <div class="container spacing">
-    <div class="row">
+    <div class="row justify-content-center">
       <!-- Thumbnails -->
       <div class="col-md-3 col-sm-6 mb-4">
-        <img src="img/old/samurai_jack_old.jpg" alt="Thumbnail" class="img-fluid"
-          onclick="openModal('img/new/samurai_jack_new.jpg', 'img/old/samurai_jack_old.jpg', 0)" />
+        <div class="thumbnail-container">
+          <img src="img/old/samurai_jack_old.jpg" alt="Thumbnail" class="thumbnail"
+            onclick="openModal('img/new/samurai_jack_new.jpg', 'img/old/samurai_jack_old.jpg', 0)" />
+        </div>
       </div>
     </div>
   </div>