diff --git a/public/background.png b/public/background.png
new file mode 100644
index 0000000..a5ed4cc
Binary files /dev/null and b/public/background.png differ
diff --git a/public/miku.png b/public/miku.png
new file mode 100644
index 0000000..749896c
Binary files /dev/null and b/public/miku.png differ
diff --git a/public/nyan_cat.png b/public/nyan_cat.png
new file mode 100644
index 0000000..3d287a2
Binary files /dev/null and b/public/nyan_cat.png differ
diff --git a/public/pikachu.png b/public/pikachu.png
new file mode 100644
index 0000000..abd1914
Binary files /dev/null and b/public/pikachu.png differ
diff --git a/public/portal.png b/public/portal.png
new file mode 100644
index 0000000..93a316d
Binary files /dev/null and b/public/portal.png differ
diff --git a/public/screenshot1.png b/public/screenshot1.png
deleted file mode 100644
index 32ca1bb..0000000
Binary files a/public/screenshot1.png and /dev/null differ
diff --git a/public/screenshot2.png b/public/screenshot2.png
deleted file mode 100644
index af4fc70..0000000
Binary files a/public/screenshot2.png and /dev/null differ
diff --git a/public/windows.png b/public/windows.png
new file mode 100644
index 0000000..8ced1f6
Binary files /dev/null and b/public/windows.png differ
diff --git a/src/pages/IndexPage.tsx b/src/pages/IndexPage.tsx
index 38eb012..f33db2d 100644
--- a/src/pages/IndexPage.tsx
+++ b/src/pages/IndexPage.tsx
@@ -7,6 +7,7 @@ import { ThemeContext } from "@/context/Theme";
 
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
 
 import ThemeIcon from "@/components/ThemeIcon";
 import ImageComparison from "@/components/home/ImageComparison";
@@ -39,8 +40,8 @@ function IndexPage() {
 			</header>
 
 			<img
-				src="/screenshot1.png"
-				alt="screenshot"
+				src="/background.png"
+				alt="background"
 				className="absolute w-full object-cover -z-20"
 				style={{ maskImage: "linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 10%, rgba(255,255,255,0) 100%)" }}
 			/>
@@ -100,6 +101,33 @@ function IndexPage() {
 				</div>
 			</section>
 
+			<section className="mt-32 mx-8 max-w-2xl">
+				<h1 className="text-5xl font-bold mb-2 text-center">Gallery</h1>
+				<p className="mb-8 text-lg text-center">See examples of opening and placing art within Minecraft!</p>
+
+				<Carousel className="w-full">
+					<CarouselContent>
+						<CarouselItem>
+							<img src="/miku.png" className="rounded-xl border border-zinc-300 dark:border-zinc-800"></img>
+						</CarouselItem>
+						<CarouselItem>
+							<img src="/nyan_cat.png" className="rounded-xl border border-zinc-300 dark:border-zinc-800"></img>
+						</CarouselItem>
+						<CarouselItem>
+							<img src="/pikachu.png" className="rounded-xl border border-zinc-300 dark:border-zinc-800"></img>
+						</CarouselItem>
+						<CarouselItem>
+							<img src="/portal.png" className="rounded-xl border border-zinc-300 dark:border-zinc-800"></img>
+						</CarouselItem>
+						<CarouselItem>
+							<img src="/windows.png" className="rounded-xl border border-zinc-300 dark:border-zinc-800"></img>
+						</CarouselItem>
+					</CarouselContent>
+					<CarouselPrevious />
+					<CarouselNext />
+				</Carousel>
+			</section>
+
 			<section className="flex flex-col items-center mt-32 mx-8 max-w-xl">
 				<h1 className="text-5xl font-bold mb-2 text-center">See the difference</h1>
 				<p className="mb-8 text-lg text-center">