diff --git a/src/app/projects/page.tsx b/src/app/projects/page.tsx
index 8a9f20a..a677eaa 100644
--- a/src/app/projects/page.tsx
+++ b/src/app/projects/page.tsx
@@ -13,7 +13,7 @@ import { Button } from "~/components/ui/button";
 import Link from "next/link";
 import { ArrowUpRight, Play, BookOpen, FolderGit2, Github } from "lucide-react";
 import { projects } from "~/lib/data";
-import Image from "next/image";
+import { ImageWithSkeleton } from "~/components/ui/image-with-skeleton";
 import { CardSkeleton } from "~/components/ui/skeletons";
 
 export default function ProjectsPage() {
@@ -63,12 +63,13 @@ export default function ProjectsPage() {
                     {project.image && (
                       <div className="lg:w-1/3">
                         <div className="flex items-center justify-center p-4 lg:h-full">
-                          <Image
+                          <ImageWithSkeleton
                             src={project.image}
                             alt={project.imageAlt || project.title}
                             width={400}
                             height={300}
-                            className="h-auto w-full object-contain rounded-xl shadow-md"
+                            className="h-auto w-full object-contain"
+                            containerClassName="w-full rounded-xl shadow-md overflow-hidden"
                             priority={index === 0}
                           />
                         </div>
@@ -212,12 +213,13 @@ export default function ProjectsPage() {
                   <Card className="card-full-height flex flex-col">
                     {project.image && (
                       <div className="flex h-48 items-center justify-center p-4">
-                        <Image
+                        <ImageWithSkeleton
                           src={project.image}
                           alt={project.imageAlt || project.title}
                           width={400}
                           height={250}
-                          className="h-auto max-h-full w-full object-contain rounded-xl shadow-md"
+                          className="h-auto max-h-full w-full object-contain"
+                          containerClassName="w-full h-full flex items-center justify-center rounded-xl shadow-md overflow-hidden"
                         />
                       </div>
                     )}
diff --git a/src/app/travel/page.tsx b/src/app/travel/page.tsx
index 7c0d0ba..db8c9bf 100644
--- a/src/app/travel/page.tsx
+++ b/src/app/travel/page.tsx
@@ -9,7 +9,7 @@ import {
   CardDescription,
 } from "~/components/ui/card";
 import { CardSkeleton } from "~/components/ui/skeletons";
-import Image from "next/image";
+import { ImageWithSkeleton } from "~/components/ui/image-with-skeleton";
 import { Badge } from "~/components/ui/badge";
 import { Plane } from "lucide-react";
 import { travel } from "~/lib/data";
@@ -60,7 +60,7 @@ export default function TripsPage() {
                     <div className="flex space-x-0 overflow-x-auto">
                       {trip.images.map((image, imgIndex) => (
                         <div key={imgIndex} className="flex-shrink-0">
-                          <Image
+                          <ImageWithSkeleton
                             src={image}
                             alt={
                               trip.alts && trip.alts[imgIndex]
@@ -70,6 +70,7 @@ export default function TripsPage() {
                             width={250}
                             height={200}
                             className="max-h-[200px] min-h-[200px] object-cover"
+                            containerClassName="max-h-[200px] min-h-[200px]"
                           />
                         </div>
                       ))}