diff --git a/deploy-list.txt b/deploy-list.txt
index de12806..7c00203 100644
--- a/deploy-list.txt
+++ b/deploy-list.txt
@@ -1,3 +1,4 @@
 css/
 images/
+js/
 index.html
diff --git a/index.html b/index.html
index 05c1211..991c075 100644
--- a/index.html
+++ b/index.html
@@ -53,10 +53,10 @@
       <h3><a href="https://www.economicmodeling.com/skillabi/">Skillabi</a></h3>
 			<div class="project">
 				<div class="project-image">
-					<img class="main-image" src="images/skillabi-1-login.png"/>
-					<img class="main-image" src="images/skillabi-2.gif"/>
-					<img class="main-image" src="images/skillabi-3.webp"/>
-          <img class="main-image" src="images/curricular-skills-api.png"/>
+					<img class="main-image" src="images/thumbnails/th_skillabi-1-login.png"/>
+					<img class="main-image" src="images/thumbnails/th_skillabi-2.gif"/>
+					<img class="main-image" src="images/thumbnails/th_skillabi-3.webp"/>
+          <img class="main-image" src="images/thumbnails/th_curricular-skills-api.png"/>
 				</div>
 				<div class="project-info">
 					<h4>Project Goals</h4>
@@ -100,9 +100,9 @@
 			<h3>Skillsmatch</h3>
 			<div class="project">
 				<div class="project-image">
-					<img class="main-image" src="images/dashdrop-1.png"/>
-					<img class="main-image" src="images/dashdrop-2.png"/>
-					<img class="main-image" src="images/dashdrop-3.png"/>
+					<img class="main-image" src="images/thumbnails/th_dashdrop-1.png"/>
+					<img class="main-image" src="images/thumbnails/th_dashdrop-2.png"/>
+					<img class="main-image" src="images/thumbnails/th_dashdrop-3.png"/>
 				</div>
 				<div class="project-info">
 					<h4>Project Goals</h4>
@@ -129,9 +129,9 @@
 			<h3>Dash Drop</h3>
 			<div class="project">
 				<div class="project-image">
-					<img class="main-image" src="images/dashdrop-1.png"/>
-					<img class="main-image" src="images/dashdrop-2.png"/>
-					<img class="main-image" src="images/dashdrop-3.png"/>
+					<img class="main-image" src="images/thumbnails/th_dashdrop-1.png"/>
+					<img class="main-image" src="images/thumbnails/th_dashdrop-2.png"/>
+					<img class="main-image" src="images/thumbnails/th_dashdrop-3.png"/>
 				</div>
 				<div class="project-info">
 					<h4>Project Goals</h4>
@@ -153,7 +153,7 @@
 			<h3>NewVistas Website Platform</h3>
 			<div class="project">
 				<div class="project-image">
-					<img class="main-image" src="images/newvistas.jpg"/>
+					<img class="main-image" src="images/thumbnails/th_newvistas.jpg"/>
 				</div>
 				<div class="project-info">
 					<h4>Project Goals</h4>
@@ -206,8 +206,8 @@
 			<h3>Payzoom Econosystem Platform</h3>
 			<div class="project">
 				<div class="project-image">
-					<img alt="The Payzoom Logo" src="images/PayZoom_logo.png"/>
-					<img class="main-image" alt="Payzoom Software Demo" src="images/payzoom.png"/>
+					<img alt="The Payzoom Logo" src="images/thumbnails/th_PayZoom_logo.png"/>
+					<img class="main-image" alt="Payzoom Software Demo" src="images/thumbnails/th_payzoom.png"/>
 				</div>
 				<div class="project-info">
 					<h4>Project Goal</h4>
@@ -248,8 +248,8 @@
 			<h3>Novatek Native Wrapper App</h3>
 			<div class="project">
 				<div class="project-image">
-					<img class="main-image" alt="Workaids App Icon" src="images/icon_work_aids.png" />
-					<img alt="Workaids Login Screen" src="images/workaids_login2.png" />
+					<img class="main-image" alt="Workaids App Icon" src="images/thumbnails/th_icon_work_aids.png" />
+					<img alt="Workaids Login Screen" src="images/thumbnails/th_workaids_login2.png" />
 				</div>
 				<div class="project-info">
 					<h4>Project Goals</h4>
@@ -285,4 +285,6 @@
 		</section>
 	</article>
 	</div>
+  <div id="image-modal" hidden><div class="close-x" aria-label="click to close modal">&#xd7;</div><div id="image-modal-contents"/></div>
+  <script src="./js/image-thumbnails.js"></script>
 </body>
diff --git a/js/image-thumbnails.js b/js/image-thumbnails.js
new file mode 100644
index 0000000..93cdbba
--- /dev/null
+++ b/js/image-thumbnails.js
@@ -0,0 +1,29 @@
+'use srict';
+
+(function() {
+  const imageModal = document.querySelector('#image-modal');
+  const imageModalContents = document.querySelector('#image-modal-contents');
+
+  imageModal.querySelector('.close-x').addEventListener('click', function(e) {
+    e.stopPropagation();
+    e.preventDefault();
+    imageModal.hidden = true;
+  });
+
+  const images = document.querySelectorAll('img');
+  images.forEach(function(img) {
+    const name = img.src.split('/').pop();
+
+    if(name.match(/^th_/)) {
+      img.addEventListener('click', function(e) {
+        e.stopPropagation();
+        e.preventDefault();
+
+        imageModal.hidden = undefined;
+        const fullImage = document.createElement('img');
+        fullImage.src = `./images/${name.replace(/^th_/, '')}`;
+        imageModalContents.replaceChildren(fullImage);
+      });
+    }
+  });
+})();