diff --git a/client/src/components/ui/Skeleton.tsx b/client/src/components/ui/Skeleton.tsx
index 98d9eee2f..afe1e064d 100644
--- a/client/src/components/ui/Skeleton.tsx
+++ b/client/src/components/ui/Skeleton.tsx
@@ -10,7 +10,7 @@ interface SkeletonProps {
  * Compose multiple <Skeleton /> elements to build page-level loading states.
  */
 const Skeleton: React.FC<SkeletonProps> = ({ className = "" }) => (
-    <div className={`animate-pulse bg-gray-700 rounded ${className}`} />
+    <div className={`animate-pulse bg-gray-200 dark:bg-white/5 rounded-2xl ${className}`} />
 );
 
 export default Skeleton;
diff --git a/client/src/pages/CreatorProfile.tsx b/client/src/pages/CreatorProfile.tsx
index 96eb1ea6c..294871c5b 100644
--- a/client/src/pages/CreatorProfile.tsx
+++ b/client/src/pages/CreatorProfile.tsx
@@ -6,6 +6,7 @@ import RaffleCard from "../components/cards/RaffleCard";
 import { mapListItemToCardProps } from "../services/raffleService";
 import ErrorMessage from "../components/ui/ErrorMessage";
 import { Spinner } from "../components/ui/Spinner";
+import Skeleton from "../components/ui/Skeleton";
 
 const CreatorProfile: React.FC = () => {
     const { address } = useParams<{ address: string }>();
@@ -123,7 +124,7 @@ const CreatorProfile: React.FC = () => {
                     {rafflesLoading && page === 0 ? (
                         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                             {[1, 2, 3, 4].map((n) => (
-                                <div key={n} className="h-[450px] bg-white dark:bg-[#11172E] rounded-3xl animate-pulse" />
+                                <Skeleton key={n} className="h-[450px] rounded-3xl" />
                             ))}
                         </div>
                     ) : rafflesError ? (
diff --git a/client/src/pages/MyRaffles.tsx b/client/src/pages/MyRaffles.tsx
index a332c50ec..739fbe472 100644
--- a/client/src/pages/MyRaffles.tsx
+++ b/client/src/pages/MyRaffles.tsx
@@ -4,6 +4,7 @@ import { useWallet } from "../hooks/useWallet";
 import { useUserProfile, useUserHistory } from "../hooks/useRaffles";
 import ErrorMessage from "../components/ui/ErrorMessage";
 import { Breadcrumbs } from "../components/ui/Breadcrumbs";
+import Skeleton from "../components/ui/Skeleton";
 import type { ApiUserHistoryItem } from "../types/types";
 
 // ── Status badge ──────────────────────────────────────────────────────────────
@@ -196,7 +197,7 @@ const MyRaffles: React.FC = () => {
             return (
                 <div className="space-y-3">
                     {[1, 2, 3].map((i) => (
-                        <div key={i} className="h-20 bg-gray-100 dark:bg-[#1E1932] rounded-xl animate-pulse" />
+                        <Skeleton key={i} className="h-20 rounded-xl" />
                     ))}
                 </div>
             );
@@ -288,7 +289,7 @@ const MyRaffles: React.FC = () => {
                     </div>
                 )}
                 {profileLoading && (
-                    <div className="h-28 bg-white dark:bg-[#1E1932] rounded-2xl animate-pulse mb-8" />
+                    <Skeleton className="h-28 rounded-2xl mb-8" />
                 )}
 
                 {/* Tabs */}
diff --git a/client/src/pages/RaffleDetails.tsx b/client/src/pages/RaffleDetails.tsx
index 0d2959d6d..da6a1577f 100644
--- a/client/src/pages/RaffleDetails.tsx
+++ b/client/src/pages/RaffleDetails.tsx
@@ -13,6 +13,7 @@ import EnterRaffleButton from "../components/EnterRaffleButton";
 import detailimage from "../assets/detailimage.png";
 import { Breadcrumbs } from "../components/ui/Breadcrumbs";
 import { Helmet } from "react-helmet-async";
+import Skeleton from "../components/ui/Skeleton";
 
 const RaffleDetails = () => {
     const { id } = useParams();
@@ -69,13 +70,13 @@ const RaffleDetails = () => {
     if (isLoading) {
         return (
             <div className="w-full mx-auto max-w-7xl px-6 md:px-12 lg:px-16 flex flex-col">
-                <div className="bg-white dark:bg-[#11172E] p-8 rounded-3xl animate-pulse">
-                    <div className="w-full h-64 bg-gray-700 rounded-3xl mb-6"></div>
-                    <div className="h-8 bg-gray-700 rounded mb-4"></div>
-                    <div className="h-4 bg-gray-700 rounded mb-2"></div>
-                    <div className="h-4 bg-gray-700 rounded mb-2"></div>
-                    <div className="h-4 bg-gray-700 rounded mb-6"></div>
-                    <div className="h-12 bg-gray-700 rounded-xl"></div>
+                <div className="bg-white dark:bg-[#11172E] p-8 rounded-3xl space-y-4">
+                    <Skeleton className="w-full h-64 rounded-3xl" />
+                    <Skeleton className="h-8 w-3/4" />
+                    <Skeleton className="h-4 w-full" />
+                    <Skeleton className="h-4 w-full" />
+                    <Skeleton className="h-4 w-2/3" />
+                    <Skeleton className="h-12 w-full rounded-xl" />
                 </div>
             </div>
         );
diff --git a/client/src/pages/RafflePage.tsx b/client/src/pages/RafflePage.tsx
index 634ee521f..5445a86c1 100644
--- a/client/src/pages/RafflePage.tsx
+++ b/client/src/pages/RafflePage.tsx
@@ -22,6 +22,7 @@ import {
     Bell
 } from "lucide-react";
 import AddToCalendar from "../components/ui/AddToCalendar";
+import Skeleton from "../components/ui/Skeleton";
 import Line from "../assets/svg/Line";
 import detailimage from "../assets/detailimage.png";
 import { Breadcrumbs } from "../components/ui/Breadcrumbs";
@@ -29,10 +30,6 @@ import { Helmet } from "react-helmet-async";
 import { useTranslation } from "react-i18next";
 import { CountdownTimer } from "../components/ui/CountdownTimer";
 
-const Skeleton = ({ className }: { className?: string }) => (
-    <div className={`animate-pulse bg-gray-200 dark:bg-white/5 rounded-2xl ${className}`} />
-);
-
 const RafflePage = () => {
     const { t } = useTranslation();
     const { id } = useParams<{ id: string }>();