diff --git a/package-lock.json b/package-lock.json
index 646efa9e..0cec6e89 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "@szhsin/react-menu": "^4.2.3",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-lazy-load-image-component": "^1.6.3",
         "react-player": "^2.16.0",
         "react-router-dom": "^7.0.2",
         "react-slick": "^0.30.3",
@@ -3469,6 +3470,11 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -3869,6 +3875,18 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "license": "MIT"
     },
+    "node_modules/react-lazy-load-image-component": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/react-lazy-load-image-component/-/react-lazy-load-image-component-1.6.3.tgz",
+      "integrity": "sha512-kdQYUDbuISF3T9El0sBLNoWrmPohqlytcG4ognLtHYjY8bZAsJ0/Ez+VaV+0QlVyUY3K6dDXkuQAz3GpvdjBkw==",
+      "dependencies": {
+        "lodash.debounce": "^4.0.8",
+        "lodash.throttle": "^4.1.1"
+      },
+      "peerDependencies": {
+        "react": "^15.x.x || ^16.x.x || ^17.x.x || ^18.x.x || ^19.x.x"
+      }
+    },
     "node_modules/react-player": {
       "version": "2.16.0",
       "resolved": "https://registry.npmjs.org/react-player/-/react-player-2.16.0.tgz",
diff --git a/package.json b/package.json
index 79432698..13e7c31b 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "@szhsin/react-menu": "^4.2.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-lazy-load-image-component": "^1.6.3",
     "react-player": "^2.16.0",
     "react-router-dom": "^7.0.2",
     "react-slick": "^0.30.3",
diff --git a/src/components/Gallery/Winner.jsx b/src/components/Gallery/Winner.jsx
index ff88425b..0d38a1e9 100644
--- a/src/components/Gallery/Winner.jsx
+++ b/src/components/Gallery/Winner.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import '../../styles/Gallery.css';
+import { LazyLoadImage } from 'react-lazy-load-image-component';
 
 export default function Winner({ year, appName, description, category, image, link}) {
 
@@ -12,7 +13,7 @@ export default function Winner({ year, appName, description, category, image, li
     return (
         <div className='winner-container'>
             <div className='winner-image'>
-                <img src={currentImage} alt={appName} />
+                <LazyLoadImage src={currentImage} alt={appName} />
             </div>
             <div className='winner-info'>
                 <h2 className='winner-title'>{appName}</h2>
diff --git a/src/components/General/Navbar.jsx b/src/components/General/Navbar.jsx
index 1ebb0e67..54532b40 100644
--- a/src/components/General/Navbar.jsx
+++ b/src/components/General/Navbar.jsx
@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
 import { Menu } from '@geist-ui/icons';
 import '../../styles/Navbar.css';
 import HackLogo from '../../images/hothXI-logo.svg';
+import { LazyLoadImage } from 'react-lazy-load-image-component';
 
 export default function Navbar() {
 	const [isOpen, setIsOpen] = useState(false);
@@ -38,7 +39,7 @@ export default function Navbar() {
 	return (
 		<nav className='navbar'>
 			<Link to='/' onClick={closeMenu} className='nav-hack'>
-				<img src={HackLogo} alt='ACM Hack Logo' className='nav-hack-logo' />
+				<LazyLoadImage src={HackLogo} alt='ACM Hack Logo' className='nav-hack-logo' />
 				<h1>Hack on the Hill</h1>
 			</Link>
 
diff --git a/src/components/Home/Banner.jsx b/src/components/Home/Banner.jsx
index 79e98d92..9584b403 100644
--- a/src/components/Home/Banner.jsx
+++ b/src/components/Home/Banner.jsx
@@ -1,11 +1,19 @@
 import React from 'react';
 import '../../styles/Home.css';
 import hothBanner from '../../images/hothXI-banner.png';
+import { LazyLoadImage } from 'react-lazy-load-image-component';
+import 'react-lazy-load-image-component/src/effects/blur.css';
 
 export default function Banner() {
 	return (
 		<div className='banner-container'>
-			<img className='hoth-banner' src={hothBanner} alt='HOTH Banner' />
+			<LazyLoadImage 
+				className='hoth-banner' 
+				src={hothBanner} 
+				alt='HOTH Banner' 
+				placeholderSrc={hothBanner} 
+				effect='blur'
+			/>
 
 			<div className='banner-text'>
 				<h1>
diff --git a/src/components/Home/HothDescription.jsx b/src/components/Home/HothDescription.jsx
index 65a73f47..bebc685e 100644
--- a/src/components/Home/HothDescription.jsx
+++ b/src/components/Home/HothDescription.jsx
@@ -3,12 +3,14 @@ import '../../styles/Home.css';
 import img1 from '../../images/hoth-title/IMG_1914.jpg';
 import img2 from '../../images/hoth-title/IMG_2030.jpg';
 import img3 from '../../images/hoth-title/hack_motif_applied.jpg';
+import { LazyLoadImage } from 'react-lazy-load-image-component';
+import 'react-lazy-load-image-component/src/effects/blur.css';
 
 export default function HothDescription() {
 	return (
 		<div>
-			<div className='hoth-title-container'>
-				<div data-aos='light-fade-up'>
+			<div className='hoth-title-container' data-aos='light-fade-up'>
+				<div>
 					<div className='title-left'>
 						<h1 className='hoth-what'>What&apos;s</h1>
 					</div>
@@ -18,46 +20,62 @@ export default function HothDescription() {
 					</div>
 				</div>
 			</div>
+
 			<div className='img-left-container' data-aos='light-fade-up'>
 				<div className='img-left'>
-					<img
+					<LazyLoadImage
 						src={img1}
 						alt='Participants at Hack on the Hill'
 						className='hoth-img'
+						wrapperProps={{
+							style: { transitionDelay: '0.4s' },
+						}}
+						placeholderSrc={img1}
+						effect='blur'
 					/>
 				</div>
 				<p className='img-left-p'>
-					Hack on the Hill (HOTH XI) is a{' '}
-					<strong>12-hour beginner-friendly</strong> hackathon designed to be
+					Hack on the Hill (HOTH XI) is a <strong>12-hour beginner-friendly</strong> hackathon designed to be
 					your first hackathon experience. HOTH XI will be in-person on the
 					Hill in the Carnesale Commons Palisades Room. We hope to see you
 					there!
 				</p>
 			</div>
+
 			<div className='img-right-container' data-aos='light-fade-up'>
 				<div className='img-right'>
-					<img
+					<LazyLoadImage
 						src={img2}
 						alt='Participants at Hack on the Hill'
 						className='hoth-img'
+						wrapperProps={{
+							style: { transitionDelay: '0.4s' },
+						}}
+						placeholderSrc={img2}
+						effect='blur'
 					/>
 				</div>
 				<p className='img-right-p'>
-					During HOTH, you&apos;ll get to learn from{' '}
-					<strong>workshops</strong>, receive technical help from{' '}
-					<strong>mentors</strong>, and meet new people while participating in{' '}
-					<strong>fun</strong>
-					social activities. There will be <strong>prizes</strong> for the
-					best hacks!
+					During HOTH, you&apos;ll get to learn from <strong>workshops</strong>, receive technical help from <strong>mentors</strong>, and meet new people while participating in <strong>fun</strong>
+					social activities. There will be <strong>prizes</strong> for the best hacks!
 				</p>
 			</div>
+
 			<div className='img-left-container' data-aos='light-fade-up'>
 				<div className='img-left'>
-					<img src={img3} alt='Hack banner' className='hoth-img' />
+					<LazyLoadImage
+						src={img3}
+						alt='Hack banner'
+						className='hoth-img'
+						wrapperProps={{
+							style: { transitionDelay: '0.4s' },
+						}}
+						placeholderSrc={img3}
+						effect='blur'
+					/>
 				</div>
 				<p className='img-left-p'>
-					Hack on the Hill is an event hosted by ACM Hack. A student run
-					organization, Hack&apos;s mission is to help the community to apply
+					Hack on the Hill is an event hosted by ACM Hack. A student-run organization, Hack&apos;s mission is to help the community to apply
 					their creativity and build amazing things with code. Check out our{' '}
 					<a
 						className='hack-website-link'
@@ -73,4 +91,4 @@ export default function HothDescription() {
 			</div>
 		</div>
 	);
-}
+}
\ No newline at end of file
diff --git a/src/components/Home/PhotoCarousel.jsx b/src/components/Home/PhotoCarousel.jsx
index dcc7eb28..266aa4f3 100644
--- a/src/components/Home/PhotoCarousel.jsx
+++ b/src/components/Home/PhotoCarousel.jsx
@@ -3,6 +3,8 @@ import Slider from 'react-slick';
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
 import '../../styles/PhotoCarousel.css';
+import { LazyLoadImage } from 'react-lazy-load-image-component';
+import 'react-lazy-load-image-component/src/effects/blur.css';
 
 import image1 from '../../images/carousel/image1.jpg';
 import image2 from '../../images/carousel/image2.jpg';
@@ -12,6 +14,7 @@ import image5 from '../../images/carousel/image5.jpg';
 import image6 from '../../images/carousel/image6.jpg';
 import image7 from '../../images/carousel/image7.jpg';
 
+
 export default function PhotoCarousel() {
 	const settings = {
 		dots: true,
@@ -27,10 +30,15 @@ export default function PhotoCarousel() {
 	return (
 		<Slider {...settings}>
 			{images.map((image, index) => (
-				<img
+				<LazyLoadImage
 					src={image}
 					alt={`Carousel ${index + 1}`}
 					className='carousel-image'
+					wrapperProps={{
+						style: {transitionDelay: '0.4s'},
+					}}
+					placeholderSrc={image}
+					effect='blur'
 					key={index}
 				/>
 			))}
diff --git a/src/components/Workshops/Workshop.jsx b/src/components/Workshops/Workshop.jsx
index f73b0f94..5fa37cd5 100644
--- a/src/components/Workshops/Workshop.jsx
+++ b/src/components/Workshops/Workshop.jsx
@@ -1,44 +1,73 @@
-import React from 'react';
-import '../../styles/Workshops.css';
-import ReactPlayer from 'react-player/youtube';
-import { Github, Youtube, File } from '@geist-ui/icons';
-
-
-export default function Workshop({ title, youtube, author, description, readme, slides}) {
-
-    
-    const README =  readme ?
-                    <button className='workshop-button'>
-                        <Github color='var(--hackAccent)' size={28} />
-                        <a className='workshop-link' href={readme} target='_blank' rel='noreferrer'>Readme</a>
-                    </button> : null;
-
-    const SLIDES =  slides ? 
-                    <button className='workshop-button'>
-                        <File color='var(--hackAccent)' size={28} />
-                        <a className='workshop-link' href={slides} target='_blank' rel='noreferrer'>Slides</a>
-                    </button> : null;
-    return (
-        <div className='workshop-container'>
-            <ReactPlayer 
-                className='workshop-video'
-                id={'id_' + title.replace(/ /g, '_')}
-                controls={true}
-                width='100%'
-                url={youtube} />
-            <hgroup className='workshop-header'>
-                <h3 className='workshop-title'>{title}</h3>
-                <h4 className='workshop-author'>Taught by: {author}</h4>
-            </hgroup>
-            <p className='workshop-description'>{description}</p>
-            <div className='workshop-links'>
-                <button className='workshop-button'>
-                    <Youtube color='var(--hackAccent)' size={28} />
-                    <a className='workshop-link' href={youtube} target='_blank' rel='noreferrer'>Video</a>
-                </button>
-                {README}
-                {SLIDES}
-            </div>
-        </div>
-    );
+import React, {useState} from 'react';
+import '../../styles/Workshops.css';
+import ReactPlayer from 'react-player/youtube';
+import { Github, Youtube, File } from '@geist-ui/icons';
+import { LazyLoadImage } from 'react-lazy-load-image-component';
+
+
+export default function Workshop({ title, youtube, author, description, readme, slides}) {
+
+    const [isPlayerVisible, setIsPlayerVisible] = useState(false);
+    
+    const README =  readme ?
+                    <button className='workshop-button'>
+                        <Github color='var(--hackAccent)' size={28} />
+                        <a className='workshop-link' href={readme} target='_blank' rel='noreferrer'>&nbsp; Readme</a>
+                    </button> : null;
+
+    const SLIDES =  slides ? 
+                    <button className='workshop-button'>
+                        <File color='var(--hackAccent)' size={28} />
+                        <a className='workshop-link' href={slides} target='_blank' rel='noreferrer'>&nbsp; Slides</a>
+                    </button> : null;
+    return (
+        <div className='workshop-container'>
+
+            {/* Lazy loads thumbnail images
+            video player is not actually loaded until a thumbnail is clicked */}
+            <div className='video-container'>
+                {!isPlayerVisible ? (
+                    <>
+                        <LazyLoadImage
+                            className='video-thumbnail'
+                            src={`https://img.youtube.com/vi/${youtube.split('/').pop()}/0.jpg`}
+                            alt={title}
+                            effect='blur'
+                            onClick={() => setIsPlayerVisible(true)}
+                        />
+                        <div 
+                            className='video-overlay'
+                            onClick={() => setIsPlayerVisible(true)}
+                        >
+                            <div className='play-button'>
+                                <div className='play-button-triangle' />
+                            </div>
+                        </div>
+                    </>
+                ) : (
+                    <ReactPlayer
+                        className='workshop-video'
+                        id={'id_' + title.replace(/ /g, '_')}
+                        controls={true}
+                        width='100%'
+                        url={youtube}
+                    />
+                )}
+            </div>
+
+            <hgroup className='workshop-header'>
+                <h3 className='workshop-title'>{title}</h3>
+                <h4 className='workshop-author'>Taught by: {author}</h4>
+            </hgroup>
+            <p className='workshop-description'>{description}</p>
+            <div className='workshop-links'>
+                <button className='workshop-button'>
+                    <Youtube color='var(--hackAccent)' size={28} />
+                    <a className='workshop-link' href={youtube} target='_blank' rel='noreferrer'>&nbsp; Video</a>
+                </button>
+                {README}
+                {SLIDES}
+            </div>
+        </div>
+    );
 }
\ No newline at end of file
diff --git a/src/pages/Prizes.jsx b/src/pages/Prizes.jsx
index 44aff062..b21da8af 100644
--- a/src/pages/Prizes.jsx
+++ b/src/pages/Prizes.jsx
@@ -8,6 +8,7 @@ import mobileIcon from '../images/prizes/mobile.png';
 import gameIcon from '../images/prizes/game.png';
 import ieIcon from '../images/prizes/ie.png';
 import begIcon from '../images/prizes/beg.png';
+import { LazyLoadImage } from 'react-lazy-load-image-component';
 
 export default function Prizes() {
 	useTitle(' | Prizes');
@@ -22,14 +23,14 @@ export default function Prizes() {
 					{/* Best Overall */}
 					<div className='prize-card'>
 						<div className='prize-card-icon-circle'>
-							<img
+							<LazyLoadImage
 								src={overallIcon}
 								alt='Trophy Icon'
 								className='prize-card-icon'
 							/>
 						</div>
 						<h2>Best Overall</h2>
-						<img src={squiggle} alt='Squiggle' className='card-squiggle' />
+						<LazyLoadImage src={squiggle} alt='Squiggle' className='card-squiggle' />
 						<p className='prize-label'>PRIZE</p>
 						<p className='prize-amount'>$150 Amazon Gift Card</p>
 					</div>
@@ -37,10 +38,10 @@ export default function Prizes() {
 					{/* Best Web */}
 					<div className='prize-card'>
 						<div className='prize-card-icon-circle'>
-							<img src={webIcon} alt='Web Icon' className='prize-card-icon' />
+							<LazyLoadImage src={webIcon} alt='Web Icon' className='prize-card-icon' />
 						</div>
 						<h2>Best Web</h2>
-						<img src={squiggle} alt='Squiggle' className='card-squiggle' />
+						<LazyLoadImage src={squiggle} alt='Squiggle' className='card-squiggle' />
 						<p className='prize-label'>PRIZE</p>
 						<p className='prize-amount'>$80 Amazon Gift Card</p>
 					</div>
@@ -48,14 +49,14 @@ export default function Prizes() {
 					{/* Best Mobile */}
 					<div className='prize-card'>
 						<div className='prize-card-icon-circle'>
-							<img
+							<LazyLoadImage
 								src={mobileIcon}
 								alt='Mobile Icon'
 								className='prize-card-icon'
 							/>
 						</div>
 						<h2>Best Mobile</h2>
-						<img src={squiggle} alt='Squiggle' className='card-squiggle' />
+						<LazyLoadImage src={squiggle} alt='Squiggle' className='card-squiggle' />
 						<p className='prize-label'>PRIZE</p>
 						<p className='prize-amount'>$80 Amazon Gift Card</p>
 					</div>
@@ -63,10 +64,10 @@ export default function Prizes() {
 					{/* Best Game */}
 					<div className='prize-card'>
 						<div className='prize-card-icon-circle'>
-							<img src={gameIcon} alt='Game Icon' className='prize-card-icon' />
+							<LazyLoadImage src={gameIcon} alt='Game Icon' className='prize-card-icon' />
 						</div>
 						<h2>Best Game</h2>
-						<img src={squiggle} alt='Squiggle' className='card-squiggle' />
+						<LazyLoadImage src={squiggle} alt='Squiggle' className='card-squiggle' />
 						<p className='prize-label'>PRIZE</p>
 						<p className='prize-amount'>$80 Amazon Gift Card</p>
 					</div>
@@ -74,14 +75,14 @@ export default function Prizes() {
 					{/* Best in Intersectional Environmentalism */}
 					<div className='prize-card'>
 						<div className='prize-card-icon-circle'>
-							<img
+							<LazyLoadImage
 								src={ieIcon}
 								alt='Intersectional Environmentalism Icon'
 								className='prize-card-icon'
 							/>
 						</div>
 						<h2>Best in Intersectional Environmentalism</h2>
-						<img src={squiggle} alt='Squiggle' className='card-squiggle' />
+						<LazyLoadImage src={squiggle} alt='Squiggle' className='card-squiggle' />
 						<p className='prize-label'>PRIZE</p>
 						<p className='prize-amount'>
 							2 Camping Hammocks and 2 Wireless Charging Pads
@@ -91,14 +92,14 @@ export default function Prizes() {
 					{/* Best Beginner */}
 					<div className='prize-card'>
 						<div className='prize-card-icon-circle'>
-							<img
+							<LazyLoadImage
 								src={begIcon}
 								alt='Beginner Icon'
 								className='prize-card-icon'
 							/>
 						</div>
 						<h2>Best Beginner</h2>
-						<img src={squiggle} alt='Squiggle' className='card-squiggle' />
+						<LazyLoadImage src={squiggle} alt='Squiggle' className='card-squiggle' />
 						<p className='prize-label'>PRIZE</p>
 						<p className='prize-amount'>4 Wireless 3-in-1 Charging Stations</p>
 					</div>
diff --git a/src/pages/Workshops.jsx b/src/pages/Workshops.jsx
index b7e6307f..08ceabb4 100644
--- a/src/pages/Workshops.jsx
+++ b/src/pages/Workshops.jsx
@@ -13,6 +13,7 @@ export default function Workshops() {
 		</div>
 	);
 
+	{/*YouTube links MUST be in https://youtu.be/(ID) format nothing can trail the ID field*/}
 	return (
 		<div id='workshops'>
 			<h1 className='page-title'>Workshops</h1>
@@ -64,7 +65,7 @@ export default function Workshops() {
 				<Workshop
 					title='Hackathon 101'
 					author='Aazel Tan'
-					youtube='https://youtu.be/Plz5kfY8JLs?list=PLPO7_kXilXFYCo6UngcitrjAHnRXyBmwi'
+					youtube='https://youtu.be/Plz5kfY8JLs'
 					description='This workshop video explains the basics of hackathons, which are events where people work together to create technology projects. You&#39;ll learn what to expect and how to make the most out of your experience. By the end of the video, you&#39;ll have a better understanding of what hackathons are all about and how to get started with attending one. Happy hacking, handy hackers!'
 					slides='https://docs.google.com/presentation/d/1omzpuEm3yUB92c0uwrMp79aXWa74Ft99jgSNZoUOb7I/edit?usp=drive_link'
 				/>
diff --git a/src/styles/Home.css b/src/styles/Home.css
index 9a28f4d0..389d677f 100644
--- a/src/styles/Home.css
+++ b/src/styles/Home.css
@@ -32,11 +32,16 @@
 	display: flex;
 	justify-content: center;
 	width: 100%;
+	position: relative;
+	aspect-ratio: 2.5 / 1;
+	background-color: var(--bgGray);
 }
 
 .hoth-banner {
 	width: 100%;
+	height: 100%;
 	display: block;
+	object-fit: cover;
 }
 
 .banner-text {
@@ -257,7 +262,11 @@
 
 .hoth-img {
 	max-width: 27rem;
+	width: 100%;
+	aspect-ratio: 3 / 2;
 	border-radius: 1rem;
+	background-color: var(--bgGray);
+	object-fit: cover;
 }
 
 .img-left-container {
@@ -266,6 +275,7 @@
 	align-items: center;
 	flex-direction: row;
 	margin-bottom: 2rem;
+	gap: 2rem;
 }
 
 .img-right-container {
@@ -274,14 +284,17 @@
 	align-items: center;
 	flex-direction: row-reverse;
 	margin-bottom: 2rem;
+	gap: 2rem;
 }
 
 .img-right-p {
+	flex: 1;
 	margin-right: 4rem;
 	font-size: 1.2rem;
 }
 
 .img-left-p {
+	flex: 1;
 	margin-left: 4rem;
 	font-size: 1.2rem;
 }
@@ -404,4 +417,4 @@
 	.hoth-desc {
 		font-size: 0.6rem;
 	}
-}
+}
\ No newline at end of file
diff --git a/src/styles/Workshops.css b/src/styles/Workshops.css
index 969e95e4..fe7a17bc 100644
--- a/src/styles/Workshops.css
+++ b/src/styles/Workshops.css
@@ -162,4 +162,55 @@
     .workshop-link {
         font-size: 0.7rem;
     }
-}
\ No newline at end of file
+}
+
+.video-container {
+    position: relative;
+    width: 100%;
+    border-radius: var(--rounded-lg);
+    overflow: hidden;
+    line-height: 0;
+}
+
+.video-thumbnail {
+    width: 100%;
+    cursor: pointer;
+    display: block;
+}
+
+.video-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0);
+    transition: background 0.2s;
+}
+
+.video-overlay:hover {
+    background: rgba(0,0,0,0.3);
+}
+
+.play-button {
+    width: 68px;
+    height: 48px;
+    background-color: rgba(33,33,33,0.8);
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.play-button-triangle {
+    width: 0;
+    height: 0;
+    border-top: 10px solid transparent;
+    border-bottom: 10px solid transparent;
+    border-left: 16px solid white;
+    margin-left: 4px;
+}
+