diff --git a/src/components/GalleryScroller.tsx b/src/components/GalleryScroller.tsx
index 637b558..9f6b6d0 100644
--- a/src/components/GalleryScroller.tsx
+++ b/src/components/GalleryScroller.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
-import { Modal, Box } from "@mui/material";
 import HorizontalScroller from "@/components/HorizontalScroller";
+import ImagePreviewModal from "@/components/ImagePreviewModal";
 
 export type GalleryImage = { src: string; alt?: string };
 
@@ -17,6 +17,7 @@ const GalleryScroller: React.FC<Props> = ({ images, className }) => {
     setActive(img);
     setOpen(true);
   };
+
   const closeModal = () => {
     setOpen(false);
     setActive(null);
@@ -43,34 +44,18 @@ const GalleryScroller: React.FC<Props> = ({ images, className }) => {
         ))}
       </HorizontalScroller>
 
-      <Modal open={open} onClose={closeModal}>
-        <Box
-          sx={{
-            position: "absolute",
-            top: "50%",
-            left: "50%",
-            transform: "translate(-50%, -50%)",
-            boxShadow: 24,
-            outline: "none",
-            maxWidth: "min(95vw, 1200px)",
-            maxHeight: "90vh",
-          }}
-        >
-          {active && (
-            <img
-              src={active.src}
-              alt={active.alt ?? "Event photo"}
-              style={{
-                display: "block",
-                width: "100%",
-                height: "100%",
-                objectFit: "contain",
-                background: "#000",
-              }}
-            />
-          )}
-        </Box>
-      </Modal>
+      <ImagePreviewModal
+        open={open}
+        image={
+          active
+            ? {
+                src: active.src,
+                alt: active.alt ?? "Event photo",
+              }
+            : null
+        }
+        onClose={closeModal}
+      />
     </>
   );
 };
diff --git a/src/components/ImagePreviewModal.tsx b/src/components/ImagePreviewModal.tsx
new file mode 100644
index 0000000..808f079
--- /dev/null
+++ b/src/components/ImagePreviewModal.tsx
@@ -0,0 +1,58 @@
+import React from "react";
+import { Modal, Box } from "@mui/material";
+
+type ImagePreviewModalProps = {
+  open: boolean;
+  image: {
+    src: string;
+    alt: string;
+  } | null;
+  onClose: () => void;
+};
+
+const ImagePreviewModal: React.FC<ImagePreviewModalProps> = ({
+  open,
+  image,
+  onClose,
+}) => {
+  return (
+    <Modal open={open} onClose={onClose}>
+      <Box
+        sx={{
+          position: "absolute",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
+          maxWidth: "90vw",
+          maxHeight: "90dvh",
+          width: "auto",
+          height: "auto",
+          p: 1,
+          boxShadow: 24,
+          outline: "none",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+        }}
+      >
+        {image && (
+          <img
+            src={image.src}
+            alt={image.alt}
+            style={{
+              display: "block",
+              maxWidth: "90vw",
+              maxHeight: "90dvh",
+              width: "auto",
+              height: "auto",
+              objectFit: "contain",
+              background: "#000",
+            }}
+          />
+        )}
+      </Box>
+    </Modal>
+  );
+};
+
+export default ImagePreviewModal;
diff --git a/src/resources/data/devHacksArchive/HackathonYearPictures.tsx b/src/resources/data/devHacksArchive/HackathonYearPictures.tsx
index 9d27347..116bd99 100644
--- a/src/resources/data/devHacksArchive/HackathonYearPictures.tsx
+++ b/src/resources/data/devHacksArchive/HackathonYearPictures.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
-import { Modal, Box } from "@mui/material";
 import HorizontalScroller from "@/components/HorizontalScroller";
+import ImagePreviewModal from "@/components/ImagePreviewModal";
 import "@/styles/pictures.scss";
 
 //2026 images
@@ -76,15 +76,15 @@ const HackathonYearPictures: React.FC<HackathonYearPicturesProps> = ({
 }) => {
   const pictures: Record<string, { src: string; alt: string }[]> = {
     "2023": [
-      { src: P2023_1, alt: "devHacks 2024 photo 1" },
-      { src: P2023_2, alt: "devHacks 2024 photo 2" },
-      { src: P2023_3, alt: "devHacks 2024 photo 3" },
-      { src: P2023_4, alt: "devHacks 2024 photo 4" },
-      { src: P2023_5, alt: "devHacks 2024 photo 5" },
-      { src: P2023_6, alt: "devHacks 2024 photo 6" },
-      { src: P2023_7, alt: "devHacks 2024 photo 7" },
-      { src: P2023_8, alt: "devHacks 2024 photo 8" },
-      { src: P2023_9, alt: "devHacks 2024 photo 9" },
+      { src: P2023_1, alt: "devHacks 2023 photo 1" },
+      { src: P2023_2, alt: "devHacks 2023 photo 2" },
+      { src: P2023_3, alt: "devHacks 2023 photo 3" },
+      { src: P2023_4, alt: "devHacks 2023 photo 4" },
+      { src: P2023_5, alt: "devHacks 2023 photo 5" },
+      { src: P2023_6, alt: "devHacks 2023 photo 6" },
+      { src: P2023_7, alt: "devHacks 2023 photo 7" },
+      { src: P2023_8, alt: "devHacks 2023 photo 8" },
+      { src: P2023_9, alt: "devHacks 2023 photo 9" },
     ],
     "2024": [
       { src: P2024_1, alt: "devHacks 2024 photo 1" },
@@ -130,12 +130,9 @@ const HackathonYearPictures: React.FC<HackathonYearPicturesProps> = ({
       { src: P2026_15, alt: "devHacks 2026 photo 15" },
       { src: P2026_9, alt: "devHacks 2026 photo 9" },
       { src: P2026_11, alt: "devHacks 2026 photo 11" },
-
       { src: P2026_8, alt: "devHacks 2026 photo 8" },
-
       { src: P2026_13, alt: "devHacks 2026 photo 13" },
       { src: P2026_14, alt: "devHacks 2026 photo 14" },
-
       { src: P2026_16, alt: "devHacks 2026 photo 16" },
       { src: P2026_17, alt: "devHacks 2026 photo 17" },
       { src: P2026_18, alt: "devHacks 2026 photo 18" },
@@ -152,6 +149,11 @@ const HackathonYearPictures: React.FC<HackathonYearPicturesProps> = ({
   const yearKey = String(year) as keyof typeof pictures;
   const images = pictures[yearKey] || [];
 
+  const handleClose = () => {
+    setOpen(false);
+    setActive(null);
+  };
+
   return (
     <>
       <HorizontalScroller>
@@ -175,34 +177,7 @@ const HackathonYearPictures: React.FC<HackathonYearPicturesProps> = ({
         ))}
       </HorizontalScroller>
 
-      <Modal open={open} onClose={() => setOpen(false)}>
-        <Box
-          sx={{
-            position: "absolute",
-            top: "50%",
-            left: "50%",
-            transform: "translate(-50%,-50%)",
-            maxWidth: "min(95vw, 1200px)",
-            maxHeight: "90vh",
-            boxShadow: 24,
-            outline: "none",
-          }}
-        >
-          {active && (
-            <img
-              src={active.src}
-              alt={active.alt}
-              style={{
-                display: "block",
-                width: "100%",
-                height: "100%",
-                objectFit: "contain",
-                background: "#000",
-              }}
-            />
-          )}
-        </Box>
-      </Modal>
+      <ImagePreviewModal open={open} image={active} onClose={handleClose} />
     </>
   );
 };
diff --git a/src/resources/data/devHacksArchive/PicturesGeneral.tsx b/src/resources/data/devHacksArchive/PicturesGeneral.tsx
index 81e136e..44f8a5c 100644
--- a/src/resources/data/devHacksArchive/PicturesGeneral.tsx
+++ b/src/resources/data/devHacksArchive/PicturesGeneral.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
-import { Modal, Box } from "@mui/material";
 import HorizontalScroller from "@/components/HorizontalScroller";
+import ImagePreviewModal from "@/components/ImagePreviewModal";
 import "@/styles/pictures.scss";
 
 import P1 from "@/resources/images/devhacks/general/2024_1.png";
@@ -22,12 +22,11 @@ import P15 from "@/resources/images/devhacks/2026/pictures/2026_3.png";
 
 export const picturesGeneralImages = [
   { src: P13, alt: "devHacks photo 13" },
-  { src: P14, alt: "devHacks photo 14" },
-  { src: P15, alt: "devHacks photo 15" },
-  { src: P1, alt: "devHacks photo 1" },
   { src: P2, alt: "devHacks photo 2" },
-  { src: P3, alt: "devHacks photo 3" },
+  { src: P1, alt: "devHacks photo 1" },
+  { src: P15, alt: "devHacks photo 15" },
   { src: P4, alt: "devHacks photo 4" },
+  { src: P3, alt: "devHacks photo 3" },
   { src: P5, alt: "devHacks photo 5" },
   { src: P6, alt: "devHacks photo 6" },
   { src: P7, alt: "devHacks photo 7" },
@@ -44,6 +43,11 @@ const PicturesGeneral: React.FC = () => {
     typeof picturesGeneralImages[number] | null
   >(null);
 
+  const handleClose = () => {
+    setOpen(false);
+    setActive(null);
+  };
+
   return (
     <>
       <HorizontalScroller>
@@ -67,34 +71,7 @@ const PicturesGeneral: React.FC = () => {
         ))}
       </HorizontalScroller>
 
-      <Modal open={open} onClose={() => setOpen(false)}>
-        <Box
-          sx={{
-            position: "absolute",
-            top: "50%",
-            left: "50%",
-            transform: "translate(-50%,-50%)",
-            maxWidth: "min(95vw, 1200px)",
-            maxHeight: "90vh",
-            boxShadow: 24,
-            outline: "none",
-          }}
-        >
-          {active && (
-            <img
-              src={active.src}
-              alt={active.alt}
-              style={{
-                display: "block",
-                width: "100%",
-                height: "100%",
-                objectFit: "contain",
-                background: "#000",
-              }}
-            />
-          )}
-        </Box>
-      </Modal>
+      <ImagePreviewModal open={open} image={active} onClose={handleClose} />
     </>
   );
 };
diff --git a/src/routes/Home.tsx b/src/routes/Home.tsx
index 193c360..31e1117 100644
--- a/src/routes/Home.tsx
+++ b/src/routes/Home.tsx
@@ -12,13 +12,13 @@ import ImageList from "@mui/material/ImageList";
 import ImageListItem from "@mui/material/ImageListItem";
 
 import PeopleList from "@/components/PeopleList";
+import ImagePreviewModal from "@/components/ImagePreviewModal";
 
 import {
   workshopImages,
   hackathonImages,
   // devchampsImages,
 } from "@/resources/data/homepage-mission-images";
-import { Box, Modal } from "@mui/material";
 
 interface IMissionImageList {
   imagesData: {
@@ -27,7 +27,7 @@ interface IMissionImageList {
     rows?: number;
     cols?: number;
   }[];
-  openFn: (img: string) => void;
+  openFn: (img: string, title: string) => void;
 }
 
 function MissionImageList({ imagesData, openFn }: IMissionImageList) {
@@ -49,7 +49,7 @@ function MissionImageList({ imagesData, openFn }: IMissionImageList) {
             alt={item.title}
             loading="lazy"
             style={{ cursor: "pointer" }}
-            onClick={() => openFn(item.img)}
+            onClick={() => openFn(item.img, item.title)}
           />
         </ImageListItem>
       ))}
@@ -59,14 +59,22 @@ function MissionImageList({ imagesData, openFn }: IMissionImageList) {
 
 function Home() {
   const [openImageModal, setOpenImageModal] = useState(false);
-  const [modalImage, setModalImage] = useState<string | undefined>(undefined);
-  const handleOpenModal = (img: string) => {
-    setModalImage(img);
+  const [modalImage, setModalImage] = useState<{
+    src: string;
+    alt: string;
+  } | null>(null);
+
+  const handleOpenModal = (img: string, title: string) => {
+    setModalImage({
+      src: img,
+      alt: title,
+    });
     setOpenImageModal(true);
   };
+
   const handleCloseModal = () => {
     setOpenImageModal(false);
-    setModalImage(undefined);
+    setModalImage(null);
   };
 
   return (
@@ -97,6 +105,7 @@ function Home() {
           }
         }}
       />
+
       <div className="white-background" id="intro">
         <div className="info">
           <div className="aboutAndText">
@@ -125,26 +134,12 @@ function Home() {
         <br />
 
         <div className="missions-container">
-          <Modal open={openImageModal} onClose={handleCloseModal}>
-            <Box
-              sx={{
-                width: "fit-content",
-                height: "fit-content",
-                position: "absolute",
-                top: "50%",
-                left: "50%",
-                transform: "translate(-50%, -50%)",
-                boxShadow: 24,
-                outline: "none",
-              }}
-            >
-              <img
-                src={modalImage}
-                alt="Modal Content"
-                style={{ width: "100%", height: "100%", objectFit: "cover" }}
-              />
-            </Box>
-          </Modal>
+          <ImagePreviewModal
+            open={openImageModal}
+            image={modalImage}
+            onClose={handleCloseModal}
+          />
+
           <div className="mission-container">
             <div className="mission-text-container">
               <span className="mission-heading">Workshops and Activities</span>
diff --git a/src/routes/hackathon/HackathonArchive.tsx b/src/routes/hackathon/HackathonArchive.tsx
index 5ea365f..ecca9a3 100644
--- a/src/routes/hackathon/HackathonArchive.tsx
+++ b/src/routes/hackathon/HackathonArchive.tsx
@@ -51,8 +51,6 @@ function HackathonArchive() {
             <iframe
               loading="lazy"
               src="https://www.youtube.com/embed/CBMg3kI84ok"
-              title=".devHacks 2026 Recap"
-              allow="autoplay; picture-in-picture"
               allowFullScreen
             />
           </div>
diff --git a/src/styles/Hackathon.scss b/src/styles/Hackathon.scss
index 609fb23..ab23884 100644
--- a/src/styles/Hackathon.scss
+++ b/src/styles/Hackathon.scss
@@ -206,24 +206,26 @@
 }
 
 .hackathon-recap-video {
-  margin: 4rem;
-  margin-bottom: 4rem;
+  width: 100%;
+  margin: 4rem 0;
   text-align: center;
-
   padding-inline: clamp(1rem, 4vw, 2rem);
+  box-sizing: border-box;
 
   &_frame {
+    position: relative;
     width: 100%;
     max-width: 900px;
     margin: 1.5rem auto 0;
     aspect-ratio: 16 / 9;
+    overflow: hidden;
+    border-radius: 20px;
 
     iframe {
+      display: block;
       width: 100%;
       height: 100%;
-      border: none;
-      border-radius: 20px;
-      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
+      border: 0;
     }
   }
 }