diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 19a403b..022ac25 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -6608,11 +6608,11 @@
 			}
 		},
 		"node_modules/commander": {
-			"version": "8.3.0",
-			"resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
-			"integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+			"version": "4.1.1",
+			"resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+			"integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
 			"engines": {
-				"node": ">= 12"
+				"node": ">= 6"
 			}
 		},
 		"node_modules/common-path-prefix": {
@@ -9625,6 +9625,14 @@
 				"node": ">=12"
 			}
 		},
+		"node_modules/html-minifier-terser/node_modules/commander": {
+			"version": "8.3.0",
+			"resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+			"integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+			"engines": {
+				"node": ">= 12"
+			}
+		},
 		"node_modules/html-webpack-plugin": {
 			"version": "5.6.0",
 			"resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.6.0.tgz",
@@ -11780,6 +11788,14 @@
 				"node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
 			}
 		},
+		"node_modules/jest-runtime/node_modules/strip-bom": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-4.0.0.tgz",
+			"integrity": "sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
 		"node_modules/jest-serializer": {
 			"version": "27.5.1",
 			"resolved": "https://registry.npmjs.org/jest-serializer/-/jest-serializer-27.5.1.tgz",
@@ -16958,11 +16974,11 @@
 			}
 		},
 		"node_modules/strip-bom": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-4.0.0.tgz",
-			"integrity": "sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==",
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
+			"integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
 			"engines": {
-				"node": ">=8"
+				"node": ">=4"
 			}
 		},
 		"node_modules/strip-comments": {
@@ -17067,14 +17083,6 @@
 				"balanced-match": "^1.0.0"
 			}
 		},
-		"node_modules/sucrase/node_modules/commander": {
-			"version": "4.1.1",
-			"resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
-			"integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
-			"engines": {
-				"node": ">= 6"
-			}
-		},
 		"node_modules/sucrase/node_modules/glob": {
 			"version": "10.3.10",
 			"resolved": "https://registry.npmjs.org/glob/-/glob-10.3.10.tgz",
@@ -17634,14 +17642,6 @@
 				"json5": "lib/cli.js"
 			}
 		},
-		"node_modules/tsconfig-paths/node_modules/strip-bom": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
-			"integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
-			"engines": {
-				"node": ">=4"
-			}
-		},
 		"node_modules/tslib": {
 			"version": "2.6.2",
 			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
diff --git a/frontend/src/components/image-slideshow/ImageSlideshow.jsx b/frontend/src/components/image-slideshow/ImageSlideshow.jsx
new file mode 100644
index 0000000..483c45f
--- /dev/null
+++ b/frontend/src/components/image-slideshow/ImageSlideshow.jsx
@@ -0,0 +1,97 @@
+import React, { useState } from "react";
+
+export default function ImageSlideshow({ images }) {
+  const [currentImageIndex, setCurrentImageIndex] = useState(0);
+  const [hoveredThumbnail, setHoveredThumbnail] = useState(null);
+  const numImagesToShow = 4;
+
+  const handleThumbnailHover = (index) => {
+    setHoveredThumbnail(index);
+  };
+
+  const handleThumbnailLeave = () => {
+    setHoveredThumbnail(null);
+  };
+
+
+  const handleNextImage = () => {
+    setCurrentImageIndex((prevIndex) =>
+      prevIndex === images.length - 1 ? 0 : prevIndex + 1
+    );
+  };
+
+  const handlePrevImage = () => {
+    setCurrentImageIndex((prevIndex) =>
+      prevIndex === 0 ? images.length - 1 : prevIndex - 1
+    );
+  };
+
+  const handleThumbnailClick = (index) => {
+    setCurrentImageIndex(index);
+  };
+
+  return (
+    <div className="relative aspect-w-1 aspect-h-1" style={{width: 360}}>
+      <div className="flex justify-between h-auto">
+        <img
+            src={images[currentImageIndex]}
+            alt={`Slideshow ${currentImageIndex}`}
+            className="w-auto h-auto object-cover"
+        />
+        <button
+          type="button"
+          aria-label="Previous Image"
+          className="absolute top-1/2 left-2 transform -translate-y-1/2 bg-mv-white rounded-full p-3 shadow-xl"
+          onClick={handlePrevImage}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="h-4 w-4 text-mv-black"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+          </svg>
+        </button>
+        <button
+          type="button"
+          aria-label="Next Image"
+          className="absolute top-1/2 right-2 transform -translate-y-1/2 bg-mv-white rounded-full p-3 shadow-xl"
+          onClick={handleNextImage}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="h-4 w-4 text-mv-black"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+          </svg>
+        </button>
+      </div>
+      <div className="flex justify-between mt-4">
+        {images.slice(0, numImagesToShow).map((image, index) => (
+          <button
+            type="button"
+            className="w-20 h-20 relative mr-2 ml-2 cursor-pointer p-0"
+            onClick={() => handleThumbnailClick(index)}
+            onMouseEnter={() => handleThumbnailHover(index)}
+                onMouseLeave={handleThumbnailLeave}
+                style={{
+                  opacity: hoveredThumbnail === index ? 0.8 : 0.5,
+                }}
+          >
+            <img
+              src={image}
+              alt={`Thumbnail ${index}`}
+              className="absolute inset-0 w-full h-full object-cover"
+              draggable="false"
+            />
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file