diff --git a/src/components/PrefetchedImage.tsx b/src/components/PrefetchedImage.tsx
new file mode 100644
index 0000000..c6d520d
--- /dev/null
+++ b/src/components/PrefetchedImage.tsx
@@ -0,0 +1,22 @@
+import { useState, useEffect } from "react";
+import ImageSkeleton from "./ui/Skeletons/ImageSkeleton";
+
+interface PrefetchedImageProps {
+    src: string;
+    alt: string;
+    className?: string;
+}
+
+export default function PrefetchedImage({ src, alt, className }: PrefetchedImageProps) {
+    const [loaded, setLoaded] = useState(false);
+
+    useEffect(() => {
+        const img = new Image();
+        img.src = src;
+        img.onload = () => setLoaded(true);
+    }, [src]);
+
+    if (!loaded) return <ImageSkeleton />
+
+    return <img src={src} alt={alt} className={className} />;
+}
\ No newline at end of file
diff --git a/src/components/ui/Skeletons/ImageSkeleton.tsx b/src/components/ui/Skeletons/ImageSkeleton.tsx
new file mode 100644
index 0000000..22ae4ca
--- /dev/null
+++ b/src/components/ui/Skeletons/ImageSkeleton.tsx
@@ -0,0 +1,27 @@
+import { Skeleton } from "@/components/ui/skeleton";
+import { useTheme } from "@/contexts/ThemeContext";
+
+export default function SkeletonCard() {
+    const { theme } = useTheme();
+
+    const skeletonColor = theme === "light" ? "bg-gray-300" : "bg-gray-700";
+    const bgGradient =
+        theme === "light"
+            ? "bg-gradient-to-r from-white to-gray-200"
+            : "bg-gradient-to-r from-gray-900 to-gray-700";
+
+    return (
+        <div
+            className={`flex flex-col md:flex-row min-h-screen justify-center items-center w-full pt-32 md:pt-20 ${bgGradient} gap-8 px-4`}
+        >
+            <Skeleton
+                className={`${skeletonColor}
+                h-48 w-3/4  
+                sm:h-64 sm:w-3/4   
+                md:h-80 md:w-1/2  
+                lg:h-96 lg:w-1/2  
+                rounded-xl`}
+            />
+        </div>
+    );
+}
diff --git a/src/pages/SkeletonCard.tsx b/src/components/ui/Skeletons/SkeletonCard.tsx
similarity index 100%
rename from src/pages/SkeletonCard.tsx
rename to src/components/ui/Skeletons/SkeletonCard.tsx
diff --git a/src/hooks/useImagePrefetch.ts b/src/hooks/useImagePrefetch.ts
new file mode 100644
index 0000000..9127a8e
--- /dev/null
+++ b/src/hooks/useImagePrefetch.ts
@@ -0,0 +1,10 @@
+import { useEffect } from "react";
+
+export function useImagePrefetch(urls: string[]) {
+  useEffect(() => {
+    urls.forEach((src) => {
+      const img = new Image();
+      img.src = src;
+    });
+  }, [urls]);
+}
diff --git a/src/layouts/MainLayout.tsx b/src/layouts/MainLayout.tsx
index d45410f..27a8c34 100644
--- a/src/layouts/MainLayout.tsx
+++ b/src/layouts/MainLayout.tsx
@@ -3,7 +3,8 @@ import Footer from "@/components/Footer";
 import { Outlet, useLocation } from "react-router-dom";
 import { ThemeProvider } from "@/contexts/ThemeContext";
 import { Suspense, useEffect } from "react";
-import SkeletonCard from "@/pages/SkeletonCard";
+import { useImagePrefetch } from "@/hooks/useImagePrefetch";
+import SkeletonCard from "@/components/ui/Skeletons/SkeletonCard";
 
 function ScrollToTop() {
   const { pathname } = useLocation();
@@ -14,6 +15,15 @@ function ScrollToTop() {
 }
 
 function MainLayout() {
+  useImagePrefetch([
+    "/svg/pagessvg/bookingpage.svg",
+    "/svg/pagessvg/buspage.svg",
+    "/svg/pagessvg/trainpage.svg",
+    "/svg/pagessvg/hotelpage.svg",
+    "/svg/pagessvg/holidaypage.svg",
+    "/svg/pagessvg/flightpage.svg",
+    "/svg/pagessvg/cabpage.svg",
+  ]);
   return (
     <ThemeProvider>
       <ScrollToTop />
diff --git a/src/pages/Booking.tsx b/src/pages/Booking.tsx
index 1ae5637..95111d5 100644
--- a/src/pages/Booking.tsx
+++ b/src/pages/Booking.tsx
@@ -1,3 +1,4 @@
+import PrefetchedImage from "@/components/PrefetchedImage";
 import { useTheme } from "@/contexts/ThemeContext";
 
 export default function Booking() {
@@ -13,7 +14,7 @@ export default function Booking() {
         }`}
     >
       <div className="w-full md:w-1/2 flex justify-center items-center p-4 md:p-8">
-        <img
+        <PrefetchedImage
           src="/svg/pagessvg/bookingpage.svg"
           alt="Manage Booking"
           className="w-full max-w-xs sm:max-w-sm md:max-w-full h-auto object-contain"
diff --git a/src/pages/Bus.tsx b/src/pages/Bus.tsx
index edc6d6e..8f8993f 100644
--- a/src/pages/Bus.tsx
+++ b/src/pages/Bus.tsx
@@ -1,3 +1,4 @@
+import PrefetchedImage from "@/components/PrefetchedImage";
 import { useTheme } from "@/contexts/ThemeContext";
 
 export default function Bus() {
@@ -13,7 +14,7 @@ export default function Bus() {
         }`}
     >
       <div className="w-full md:w-1/2 flex justify-center items-center p-8">
-        <img
+        <PrefetchedImage
           src="/svg/pagessvg/buspage.svg"
           alt="Bus Booking"
           className="w-full max-w-md md:max-w-full h-auto object-contain"
diff --git a/src/pages/Cabs.tsx b/src/pages/Cabs.tsx
index d30d429..d554022 100644
--- a/src/pages/Cabs.tsx
+++ b/src/pages/Cabs.tsx
@@ -1,3 +1,4 @@
+import PrefetchedImage from "@/components/PrefetchedImage";
 import { useTheme } from "@/contexts/ThemeContext";
 
 export default function Cabs() {
@@ -13,7 +14,7 @@ export default function Cabs() {
         }`}
     >
       <div className="w-full md:w-1/2 flex justify-center items-center p-8">
-        <img
+        <PrefetchedImage
           src="/svg/pagessvg/cabpage.svg"
           alt="Cab Service"
           className="w-full max-w-md md:max-w-full h-auto object-contain"
diff --git a/src/pages/Flight.tsx b/src/pages/Flight.tsx
index 093d907..8861a6f 100644
--- a/src/pages/Flight.tsx
+++ b/src/pages/Flight.tsx
@@ -1,3 +1,4 @@
+import PrefetchedImage from "@/components/PrefetchedImage";
 import { useTheme } from "@/contexts/ThemeContext";
 
 export default function Flight() {
@@ -13,7 +14,7 @@ export default function Flight() {
         }`}
     >
       <div className="w-full md:w-1/2 flex justify-center items-center p-8">
-        <img
+        <PrefetchedImage
           src="/svg/pagessvg/flightpage.svg"
           alt="Flight Booking"
           className="w-full max-w-md md:max-w-full h-auto object-contain"
diff --git a/src/pages/Holidays.tsx b/src/pages/Holidays.tsx
index 1b153fa..8b0f30d 100644
--- a/src/pages/Holidays.tsx
+++ b/src/pages/Holidays.tsx
@@ -1,3 +1,4 @@
+import PrefetchedImage from "@/components/PrefetchedImage";
 import { useTheme } from "@/contexts/ThemeContext";
 
 export default function Holidays() {
@@ -13,7 +14,7 @@ export default function Holidays() {
         }`}
     >
       <div className="w-full md:w-1/2 flex justify-center items-center p-8">
-        <img
+        <PrefetchedImage
           src="/svg/pagessvg/holidaypage.svg"
           alt="Holiday planning"
           className="w-full max-w-md md:max-w-full h-auto object-contain"
diff --git a/src/pages/Hotel.tsx b/src/pages/Hotel.tsx
index 3d4c271..831132c 100644
--- a/src/pages/Hotel.tsx
+++ b/src/pages/Hotel.tsx
@@ -1,3 +1,4 @@
+import PrefetchedImage from "@/components/PrefetchedImage";
 import { useTheme } from "@/contexts/ThemeContext";
 
 export default function Hotel() {
@@ -13,7 +14,7 @@ export default function Hotel() {
         }`}
     >
       <div className="w-full md:w-1/2 flex justify-center items-center p-8">
-        <img
+        <PrefetchedImage
           src="/svg/pagessvg/hotelpage.svg"
           alt="Hotel Booking"
           className="w-full max-w-md md:max-w-full h-auto object-contain"
diff --git a/src/pages/Trains.tsx b/src/pages/Trains.tsx
index 89c3f1d..76e1d3d 100644
--- a/src/pages/Trains.tsx
+++ b/src/pages/Trains.tsx
@@ -1,3 +1,4 @@
+import PrefetchedImage from "@/components/PrefetchedImage";
 import { useTheme } from "@/contexts/ThemeContext";
 
 export default function Trains() {
@@ -13,7 +14,7 @@ export default function Trains() {
         }`}
     >
       <div className="w-full md:w-1/2 flex justify-center items-center p-8">
-        <img
+        <PrefetchedImage
           src="/svg/pagessvg/trainpage.svg"
           alt="Train Booking"
           className="w-full max-w-md md:max-w-full h-auto object-contain"