diff --git a/src/components/Loader/AnimeInfo.loader.jsx b/src/components/Loader/AnimeInfo.loader.jsx
index 3a20c22..2652a9e 100644
--- a/src/components/Loader/AnimeInfo.loader.jsx
+++ b/src/components/Loader/AnimeInfo.loader.jsx
@@ -9,50 +9,125 @@ const SkeletonItems = ({ count, className }) => (
 function AnimeInfoLoader() {
     return (
         <>
-            <div className="relative grid grid-cols-[minmax(0,75%),minmax(0,25%)] h-fit w-full overflow-hidden mt-[64px] max-[1200px]:flex max-[1200px]:flex-col max-md:mt-[50px]">
-                <Skeleton className="absolute inset-0 w-full h-full blur-lg z-[-900] bg-gray-500" animation={false} />
-                <div className="flex items-start z-10 px-14 py-[70px] bg-[#252434] bg-opacity-70 gap-x-8 max-[1024px]:px-6 max-[1024px]:py-10 max-[1024px]:gap-x-4 max-[575px]:flex-col max-[575px]:items-center max-[575px]:justify-center">
-                    <Skeleton className="w-[200px] h-[270px] rounded-none" />
-                    <div className="flex flex-col ml-4 gap-y-5 w-full max-[575px]:items-center max-[575px]:justify-center max-[575px]:mt-0">
-                        <ul className="flex gap-x-2 items-center w-fit max-[1200px]:hidden">
-                            <SkeletonItems count={3} className="w-[40px] h-[15px] rounded-xl " />
-                        </ul>
-                        <div className="flex flex-col gap-y-2">
-                            <SkeletonItems count={2} className="w-[50%] h-[20px] rounded-xl " />
+            <div className="min-h-screen bg-[#0a0a0a] text-white">
+                <div className="relative w-full overflow-hidden mt-[74px] max-md:mt-[60px]">
+                    {/* Main Content */}
+                    <div className="relative z-10 container mx-auto px-3 sm:px-4 py-4 sm:py-6 lg:py-12 max-[478px]:px-2">
+                        {/* Mobile Layout */}
+                        <div className="block md:hidden">
+                            <div className="flex flex-row gap-4">
+                                {/* Poster Section */}
+                                <div className="flex-shrink-0">
+                                    <Skeleton className="w-[130px] xs:w-[150px] aspect-[2/3] rounded-xl" />
+                                </div>
+
+                                {/* Basic Info Section */}
+                                <div className="flex-1 min-w-0 space-y-2">
+                                    {/* Title */}
+                                    <div className="space-y-1">
+                                        <Skeleton className="h-6 w-[80%]" />
+                                        <Skeleton className="h-3 w-[60%]" />
+                                    </div>
+
+                                    {/* Tags */}
+                                    <div className="flex flex-wrap gap-1.5">
+                                        <SkeletonItems count={4} className="w-[40px] h-[20px] rounded-md" />
+                                    </div>
+
+                                    {/* Overview */}
+                                    <div className="space-y-1">
+                                        <SkeletonItems count={3} className="h-3 w-full" />
+                                    </div>
+                                </div>
+                            </div>
+
+                            {/* Watch Button */}
+                            <div className="mt-6">
+                                <Skeleton className="w-full h-12 rounded-lg" />
+                            </div>
+
+                            {/* Details Section */}
+                            <div className="mt-6 space-y-3 py-3 backdrop-blur-md bg-white/5 rounded-lg px-3">
+                                <div className="grid grid-cols-2 gap-2">
+                                    <SkeletonItems count={6} className="h-4 w-[90%]" />
+                                </div>
+
+                                {/* Genres */}
+                                <div className="pt-2 border-t border-white/10">
+                                    <Skeleton className="h-4 w-[60px] mb-2" />
+                                    <div className="flex flex-wrap gap-1">
+                                        <SkeletonItems count={6} className="w-[60px] h-[22px] rounded-md" />
+                                    </div>
+                                </div>
+
+                                {/* Studios & Producers */}
+                                <div className="space-y-2 pt-2 border-t border-white/10">
+                                    <SkeletonItems count={2} className="h-4 w-[80%]" />
+                                </div>
+                            </div>
                         </div>
-                        <div className="flex gap-x-[3px]">
-                            <SkeletonItems count={6} className="w-[30px] h-[20px] rounded-sm" />
-                        </div>
-                        <Skeleton className="w-[150px] h-[40px] rounded-3xl mt-4" />
-                        <div className="flex flex-col gap-y-2 mt-5 max-[575px]:hidden">
-                            <SkeletonItems count={3} className="w-[80%] h-[15px] rounded-3xl " />
-                        </div>
-                        <div className="flex gap-x-4 items-center mt-4">
-                            <Skeleton className="w-[60px] h-[60px] rounded-full bg-gray-500 max-[575px]:hidden" />
-                            <div className="flex flex-col w-fit gap-y-2">
-                                <SkeletonItems count={2} className="w-[150px] h-[10px] rounded-xl " />
+
+                        {/* Desktop Layout */}
+                        <div className="hidden md:block">
+                            <div className="flex flex-row gap-6 lg:gap-10">
+                                {/* Poster Section */}
+                                <div className="flex-shrink-0">
+                                    <Skeleton className="w-[220px] lg:w-[260px] aspect-[2/3] rounded-2xl" />
+                                </div>
+
+                                {/* Info Section */}
+                                <div className="flex-1 space-y-4 lg:space-y-5 min-w-0">
+                                    {/* Title */}
+                                    <div className="space-y-2">
+                                        <Skeleton className="h-10 w-[70%]" />
+                                        <Skeleton className="h-5 w-[50%]" />
+                                    </div>
+
+                                    {/* Tags */}
+                                    <div className="flex flex-wrap gap-2">
+                                        <SkeletonItems count={4} className="w-[60px] h-[30px] rounded-xl" />
+                                    </div>
+
+                                    {/* Overview */}
+                                    <div className="space-y-2">
+                                        <SkeletonItems count={3} className="h-5 w-full max-w-3xl" />
+                                    </div>
+
+                                    {/* Watch Button */}
+                                    <Skeleton className="w-[150px] h-[42px] rounded-xl" />
+
+                                    {/* Details Section */}
+                                    <div className="space-y-4 py-4 backdrop-blur-md bg-white/5 rounded-xl px-5">
+                                        <div className="grid grid-cols-2 gap-3">
+                                            <SkeletonItems count={6} className="h-5 w-[90%]" />
+                                        </div>
+
+                                        {/* Genres */}
+                                        <div className="pt-3 border-t border-white/10">
+                                            <Skeleton className="h-5 w-[80px] mb-2" />
+                                            <div className="flex flex-wrap gap-1.5">
+                                                <SkeletonItems count={8} className="w-[80px] h-[30px] rounded-lg" />
+                                            </div>
+                                        </div>
+
+                                        {/* Studios & Producers */}
+                                        <div className="space-y-3 pt-3 border-t border-white/10">
+                                            <SkeletonItems count={2} className="h-5 w-[80%]" />
+                                        </div>
+                                    </div>
+                                </div>
                             </div>
                         </div>
                     </div>
                 </div>
-                <div className="bg-[#4c4b57c3] flex items-center px-8 max-[1200px]:py-10 max-[1200px]:bg-[#363544e0] max-[575px]:p-4">
-                    <div className="w-full flex flex-col h-fit gap-y-4">
-                        <SkeletonItems count={6} className="w-full h-[15px] rounded-xl" />
-                        <div className="flex gap-x-4 py-2 mt-4">
-                            <Skeleton className="w-[50px] h-[20px] " />
-                            <div className="flex flex-wrap gap-1">
-                                <SkeletonItems count={4} className="w-[30px] h-[20px] rounded-sm bg-gray-500" />
-                            </div>
-                        </div>
-                        <SkeletonItems count={2} className="w-[90%] h-[15px] rounded-xl  " />
-                    </div>
+
+                {/* Recommendations Section */}
+                <div className="container mx-auto px-4 py-12 max-[478px]:px-2">
+                    <CategoryCardLoader />
                 </div>
             </div>
-            <div className="w-full grid grid-cols-[minmax(0,75%),minmax(0,25%)] gap-x-6 max-[1200px]:flex flex-col px-4">
-                <CategoryCardLoader className="mt-[60px]"/>
-                <SidecardLoader className="mt-[60px]" />
-            </div>
         </>
     );
 }
+
 export default AnimeInfoLoader;
diff --git a/src/components/Loader/AtoZ.loader.jsx b/src/components/Loader/AtoZ.loader.jsx
index 8c9ba62..1f9beab 100644
--- a/src/components/Loader/AtoZ.loader.jsx
+++ b/src/components/Loader/AtoZ.loader.jsx
@@ -2,25 +2,44 @@ import { Skeleton } from "../ui/Skeleton/Skeleton";
 import CategoryCardLoader from "./CategoryCard.loader";
 
 const SkeletonItems = ({ count, className }) => (
-    [...Array(count)].map((_, index) => <Skeleton key={index} className={className} />)
+  [...Array(count)].map((_, index) => <Skeleton key={index} className={className} />)
 );
 
 function AtoZLoader() {
-    return (
-        <div className="max-w-[1260px] mx-auto px-[15px] flex flex-col mt-[64px] max-md:mt-[50px]">
-            <ul className="flex gap-x-4 mt-[50px] items-center w-fit max-[1200px]:hidden">
-                <Skeleton className="w-[50px] h-[15px]" />
-                <Skeleton className="w-[70px] h-[15px]" />
-            </ul>
-            <div className="flex flex-col gap-y-5 mt-6">
-                <Skeleton className="w-[200px] h-[15px]" />
-                <div className='flex gap-x-[7px] flex-wrap justify-start gap-y-2 max-md:justify-start'>
-                    <SkeletonItems count={20} className="w-[40px] h-[20px] rounded-sm"/>
-                </div>
-            </div>
-            <CategoryCardLoader showLabelSkeleton={false}/>
-        </div >
-    );
+  const gridClass = "grid-cols-8 max-[1600px]:grid-cols-6 max-[1200px]:grid-cols-4 max-[758px]:grid-cols-3 max-[478px]:grid-cols-3 max-[478px]:gap-x-2";
+
+  return (
+    <div className="max-w-[1600px] mx-auto px-[15px] flex flex-col mt-[64px] max-md:mt-[50px]">
+      <div className="flex flex-col gap-y-5 mt-6">
+        <Skeleton className="w-[200px] h-8" />
+        <div className="flex gap-x-[7px] flex-wrap justify-start gap-y-2 max-md:justify-start">
+          {[...Array(38)].map((_, index) => (
+            <Skeleton
+              key={index}
+              className="h-[34px] w-[40px] rounded-md"
+            />
+          ))}
+        </div>
+      </div>
+      <div className="w-full flex flex-col gap-y-8">
+        <div>
+          <CategoryCardLoader 
+            showLabelSkeleton={false}
+            className="mt-8"
+            gridClass={gridClass}
+          />
+          <div className="flex justify-center items-center gap-2 mt-8">
+            {[...Array(5)].map((_, index) => (
+              <Skeleton
+                key={index}
+                className="w-10 h-10 rounded-lg"
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
 }
 
 export default AtoZLoader;
diff --git a/src/components/Loader/Category.loader.jsx b/src/components/Loader/Category.loader.jsx
index 45a6b21..96bd880 100644
--- a/src/components/Loader/Category.loader.jsx
+++ b/src/components/Loader/Category.loader.jsx
@@ -1,23 +1,43 @@
-import { Skeleton } from "../ui/Skeleton/Skeleton"
-import CategoryCardLoader from "./CategoryCard.loader"
-import SidecardLoader from "./Sidecard.loader"
+import { Skeleton } from "../ui/Skeleton/Skeleton";
+import CategoryCardLoader from "./CategoryCard.loader";
+import SidecardLoader from "./Sidecard.loader";
+
+const GenreLoader = () => (
+  <div className="flex flex-wrap gap-3">
+    {[...Array(8)].map((_, index) => (
+      <Skeleton
+        key={index}
+        className="h-[35px] w-[120px] rounded-full"
+      />
+    ))}
+  </div>
+);
 
 function CategoryLoader() {
-    return (
-        <div className='w-full flex flex-col gap-y-4 mt-[64px] max-md:mt-[50px]'>
-            <div className="flex gap-x-4 items-center p-5 mt-4">
-                <Skeleton className="w-[60px] h-[60px] rounded-full bg-gray-500 max-[575px]:hidden" />
-                <div className="flex flex-col w-fit gap-y-2">
-                    <Skeleton className="w-[150px] h-[10px] rounded-xl " />
-                    <Skeleton className="w-[150px] h-[10px] rounded-xl " />
-                </div>
-            </div>
-            <div className="w-full px-4 grid grid-cols-[minmax(0,75%),minmax(0,25%)] gap-x-6 max-[1200px]:flex max-[1200px]:flex-col max-[1200px]:gap-y-10">
-                <CategoryCardLoader className={"mt-[0px]"} />
-                <SidecardLoader />
-            </div>
+  return (
+    <div className="w-full flex flex-col gap-y-4 mt-[64px] max-md:mt-[50px]">
+      <div className="w-full px-4 grid grid-cols-[minmax(0,75%),minmax(0,25%)] gap-x-6 max-[1200px]:flex max-[1200px]:flex-col max-[1200px]:gap-y-10 max-[478px]:px-2">
+        <div>
+          <div className="flex items-center mb-6">
+            <Skeleton className="h-8 w-[200px]" />
+          </div>
+          <CategoryCardLoader className="mt-0" />
+          <div className="flex justify-center items-center gap-2 mt-8">
+            {[...Array(5)].map((_, index) => (
+              <Skeleton
+                key={index}
+                className="w-10 h-10 rounded-lg"
+              />
+            ))}
+          </div>
         </div>
-    )
+        <div className="w-full flex flex-col gap-y-10">
+          <SidecardLoader title="Top 10" />
+          <GenreLoader />
+        </div>
+      </div>
+    </div>
+  );
 }
 
-export default CategoryLoader
\ No newline at end of file
+export default CategoryLoader;
\ No newline at end of file
diff --git a/src/components/Loader/CategoryCard.loader.jsx b/src/components/Loader/CategoryCard.loader.jsx
index c170069..2d14064 100644
--- a/src/components/Loader/CategoryCard.loader.jsx
+++ b/src/components/Loader/CategoryCard.loader.jsx
@@ -1,30 +1,27 @@
 import { Skeleton } from "../ui/Skeleton/Skeleton";
 
-function CategoryCardLoader({ className, showLabelSkeleton = true }) {
+function CategoryCardLoader({ className, showLabelSkeleton = true, gridClass }) {
   return (
     <div className={`w-full ${className}`}>
       {showLabelSkeleton && (
         <Skeleton className="w-[200px] h-[20px] max-[320px]:w-[70px]" />
       )}
-      <div className="grid grid-cols-6 gap-x-3 gap-y-8 mt-6 max-[1400px]:grid-cols-4 max-[758px]:grid-cols-3 max-[478px]:grid-cols-2">
-        {[...Array(12)].map((_, index) => (
+      <div className={`grid ${gridClass || "grid-cols-6 max-[1400px]:grid-cols-4 max-[758px]:grid-cols-3 max-[478px]:grid-cols-2"} gap-x-3 gap-y-8 mt-6`}>
+        {[...Array(24)].map((_, index) => (
           <div
             key={index}
             className="flex flex-col"
             style={{ height: "fit-content" }}
           >
             <div className="w-full relative">
-              <Skeleton className="w-full h-[250px] object-cover max-[1200px]:h-[35vw] max-[758px]:h-[45vw] max-[478px]:h-[60vw] rounded-none" />
-              <div className="absolute left-2 bottom-4 flex items-center justify-center w-fit space-x-1 z-20 max-[320px]:w-[80%] max-[320px]:left-0">
-                <Skeleton className="w-[50px] h-[15px] bg-gray-600 max-[320px]:w-[40%]" />
-                <Skeleton className="w-[50px] h-[15px] bg-gray-600 max-[320px]:w-[40%]" />
+              <Skeleton className="w-full pb-[140%] rounded-lg" />
+              <div className="absolute left-3 bottom-3 flex items-center gap-1.5 flex-wrap">
+                <Skeleton className="w-[40px] h-[20px] rounded-[2px]" />
+                <Skeleton className="w-[40px] h-[20px] rounded-[2px]" />
+                <Skeleton className="w-[40px] h-[20px] rounded-[2px]" />
               </div>
             </div>
-            <Skeleton className="mt-1 w-[90%] h-[15px]" />
-            <div className="flex items-center gap-x-2 w-full mt-2">
-              <Skeleton className="w-[40%] h-[12px]" />
-              <Skeleton className="w-[40%] h-[12px]" />
-            </div>
+            <Skeleton className="mt-3 w-[90%] h-[20px] rounded-md" />
           </div>
         ))}
       </div>
@@ -33,3 +30,4 @@ function CategoryCardLoader({ className, showLabelSkeleton = true }) {
 }
 
 export default CategoryCardLoader;
+
diff --git a/src/components/Loader/Home.loader.jsx b/src/components/Loader/Home.loader.jsx
index 21f8491..6068a78 100644
--- a/src/components/Loader/Home.loader.jsx
+++ b/src/components/Loader/Home.loader.jsx
@@ -1,28 +1,93 @@
-import CartLoader from "./Cart.loader";
+import { Skeleton } from "../ui/Skeleton/Skeleton";
 import CategoryCardLoader from "./CategoryCard.loader";
 import SidecardLoader from "./Sidecard.loader";
 import SpotlightLoader from "./Spotlight.loader";
-import Trendingloader from "./Trending.loader";
+import TrendingLoader from "./Trending.loader";
+
+const GenreLoader = () => (
+  <div className="flex flex-wrap gap-3 px-4">
+    {[...Array(8)].map((_, index) => (
+      <Skeleton
+        key={index}
+        className="h-[35px] w-[120px] rounded-full"
+      />
+    ))}
+  </div>
+);
+
+const ContinueWatchingLoader = () => (
+  <div className="mt-6 px-4">
+    <Skeleton className="w-[200px] h-7 mb-4" />
+    <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
+      {[...Array(6)].map((_, index) => (
+        <div key={index} className="flex flex-col gap-2">
+          <Skeleton className="w-full aspect-[2/3] rounded-xl" />
+          <Skeleton className="w-3/4 h-4" />
+        </div>
+      ))}
+    </div>
+  </div>
+);
+
+const ScheduleLoader = () => (
+  <div className="mt-8 px-4">
+    <Skeleton className="w-[150px] h-7 mb-4" />
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+      {[...Array(6)].map((_, index) => (
+        <div key={index} className="flex gap-3">
+          <Skeleton className="w-[100px] aspect-[2/3] rounded-lg" />
+          <div className="flex-1 flex flex-col gap-2">
+            <Skeleton className="w-3/4 h-4" />
+            <Skeleton className="w-1/2 h-4" />
+            <Skeleton className="w-1/3 h-4" />
+          </div>
+        </div>
+      ))}
+    </div>
+  </div>
+);
+
+const TabbedAnimeSectionLoader = () => (
+  <div className="mt-8 px-4">
+    <div className="flex gap-4 mb-4">
+      {[...Array(3)].map((_, index) => (
+        <Skeleton key={index} className="w-[100px] h-8 rounded-full" />
+      ))}
+    </div>
+    <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
+      {[...Array(12)].map((_, index) => (
+        <div key={index} className="flex flex-col gap-2">
+          <Skeleton className="w-full aspect-[2/3] rounded-xl" />
+          <Skeleton className="w-3/4 h-4" />
+        </div>
+      ))}
+    </div>
+  </div>
+);
+
 function HomeLoader() {
   return (
-    <div className="px-4 w-full h-full  max-[1200px]:px-0 bg-[#3a395100]">
+    <div className="pt-16 px-4 w-full max-[1200px]:px-0 bg-[#0a0a0a]">
       <SpotlightLoader />
-      <Trendingloader />
-      <div className="mt-16 flex gap-6 max-[1200px]:px-4 max-[1200px]:grid max-[1200px]:grid-cols-2 max-[1200px]:mt-12 max-[1200px]:gap-y-10 max-[680px]:grid-cols-1">
-        <CartLoader />
-        <CartLoader />
-        <CartLoader />
-        <CartLoader />
+      <div className="mt-6">
+        <GenreLoader />
       </div>
-      <div className="w-full grid grid-cols-[minmax(0,75%),minmax(0,25%)] gap-x-6 max-[1200px]:flex flex-col max-[1200px]:px-4">
+      <ContinueWatchingLoader />
+      
+      <div className="w-full grid grid-cols-[minmax(0,75%),minmax(0,25%)] gap-x-6 max-[1200px]:flex flex-col max-[1200px]:px-2">
         <div>
-          <CategoryCardLoader className="mt-[60px]" />
-          <CategoryCardLoader className="mt-[60px]" />
-          <CategoryCardLoader className="mt-[60px]" />
+          <CategoryCardLoader 
+            className="mt-[60px]"
+            title="Latest Episode"
+          />
+          <ScheduleLoader />
+          <TabbedAnimeSectionLoader />
         </div>
         <div className="w-full mt-[60px]">
-          <SidecardLoader />
-          <SidecardLoader />
+          <TrendingLoader />
+          <div className="mt-12">
+            <SidecardLoader title="Top 10" />
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/components/Loader/Producer.loader.jsx b/src/components/Loader/Producer.loader.jsx
index b48b908..50c91f9 100644
--- a/src/components/Loader/Producer.loader.jsx
+++ b/src/components/Loader/Producer.loader.jsx
@@ -1,12 +1,28 @@
+import { Skeleton } from "../ui/Skeleton/Skeleton";
 import CategoryCardLoader from "./CategoryCard.loader";
-import SidecardLoader from "./Sidecard.loader";
 
 function ProducerLoader() {
+  const gridClass = "grid-cols-8 max-[1600px]:grid-cols-6 max-[1200px]:grid-cols-4 max-[758px]:grid-cols-3 max-[478px]:grid-cols-3 max-[478px]:gap-x-2";
+
   return (
-    <div className="w-full mt-[100px] flex flex-col gap-y-4 max-md:mt-[50px]">
-      <div className="w-full px-4 grid grid-cols-[minmax(0,75%),minmax(0,25%)] gap-x-6 max-[1200px]:flex max-[1200px]:flex-col max-[1200px]:gap-y-10">
-        <CategoryCardLoader className={"mt-[0px]"} />
-        <SidecardLoader />
+    <div className="max-w-[1600px] mx-auto px-[15px] flex flex-col mt-[64px] max-md:mt-[50px]">
+      <div className="w-full flex flex-col gap-y-8 mt-6">
+        <div className="flex flex-col gap-y-2">
+          <Skeleton className="w-[250px] h-8" />
+          <CategoryCardLoader 
+            showLabelSkeleton={false}
+            className="mt-4"
+            gridClass={gridClass}
+          />
+          <div className="flex justify-center items-center gap-2 mt-8">
+            {[...Array(5)].map((_, index) => (
+              <Skeleton
+                key={index}
+                className="w-10 h-10 rounded-lg"
+              />
+            ))}
+          </div>
+        </div>
       </div>
     </div>
   );
diff --git a/src/components/producer/Producer.jsx b/src/components/producer/Producer.jsx
index f1ff8d9..c1c0580 100644
--- a/src/components/producer/Producer.jsx
+++ b/src/components/producer/Producer.jsx
@@ -50,7 +50,7 @@ function Producer() {
   const producerName = (id.charAt(0).toUpperCase() + id.slice(1)).split("-").join(" ");
 
   return (
-    <div className="max-w-[1260px] mx-auto px-[15px] flex flex-col mt-[64px] max-md:mt-[50px]">
+    <div className="max-w-[1600px] mx-auto px-[15px] flex flex-col mt-[64px] max-md:mt-[50px]">
       <div className="w-full flex flex-col gap-y-8 mt-6">
         {loading ? (
           <Loader type="producer" />
@@ -71,8 +71,8 @@ function Producer() {
             <CategoryCard
               data={producerInfo}
               showViewMore={false}
-              className="mt-0"
-              cardStyle="max-[1400px]:h-[35vw]"
+              className="mt-4"
+              cardStyle="grid-cols-8 max-[1600px]:grid-cols-6 max-[1200px]:grid-cols-4 max-[758px]:grid-cols-3 max-[478px]:grid-cols-3 max-[478px]:gap-x-2"
             />
             <div className="flex justify-center w-full mt-8">
               <PageSlider 
diff --git a/src/components/ui/Skeleton/Skeleton.css b/src/components/ui/Skeleton/Skeleton.css
index d51e7a0..44475df 100644
--- a/src/components/ui/Skeleton/Skeleton.css
+++ b/src/components/ui/Skeleton/Skeleton.css
@@ -10,12 +10,12 @@
   .shimmer-effect {
     background: linear-gradient(
       to right,
-      rgba(255, 255, 255, 0.1) 0%,
-      rgba(255, 255, 255, 0.2) 20%,
-      rgba(255, 255, 255, 0.3) 40%,
-      rgba(255, 255, 255, 0.2) 60%,
-      rgba(255, 255, 255, 0.1) 80%,
-      rgba(0, 0, 0, 0.03) 100%
+      rgba(255, 255, 255, 0.03) 0%,
+      rgba(255, 255, 255, 0.08) 20%,
+      rgba(255, 255, 255, 0.1) 40%,
+      rgba(255, 255, 255, 0.08) 60%,
+      rgba(255, 255, 255, 0.03) 80%,
+      rgba(255, 255, 255, 0.02) 100%
     );
     background-size: 200% 100%;
     animation: shimmer 1.5s infinite linear;
diff --git a/src/components/ui/Skeleton/Skeleton.jsx b/src/components/ui/Skeleton/Skeleton.jsx
index eab2eaa..1b13d0b 100644
--- a/src/components/ui/Skeleton/Skeleton.jsx
+++ b/src/components/ui/Skeleton/Skeleton.jsx
@@ -4,7 +4,8 @@ import './Skeleton.css';
 function Skeleton({ className, animation=true, ...props }) {
   return (
     <div
-      className={cn("bg-gray-400 rounded-3xl",
+      className={cn(
+        "bg-white/5 backdrop-blur-sm rounded-lg",
         animation ? "shimmer-effect" : "",
         className
       )}
diff --git a/src/pages/a2z/AtoZ.jsx b/src/pages/a2z/AtoZ.jsx
index 8b8bdc2..f38a8af 100644
--- a/src/pages/a2z/AtoZ.jsx
+++ b/src/pages/a2z/AtoZ.jsx
@@ -45,7 +45,7 @@ function AtoZ({ path }) {
   };
 
   return (
-    <div className="max-w-[1260px] mx-auto px-[15px] flex flex-col mt-[64px] max-md:mt-[50px]">
+    <div className="max-w-[1600px] mx-auto px-[15px] flex flex-col mt-[64px] max-md:mt-[50px]">
       <div className="flex flex-col gap-y-5 mt-6">
         <h1 className="font-bold text-2xl text-white max-[478px]:text-[18px]">
           Sort By Letters
@@ -91,8 +91,8 @@ function AtoZ({ path }) {
               data={categoryInfo}
               limit={categoryInfo.length}
               showViewMore={false}
-              className="mt-0"
-              cardStyle="max-[1400px]:h-[35vw]"
+              className="mt-8"
+              cardStyle="grid-cols-8 max-[1600px]:grid-cols-6 max-[1200px]:grid-cols-4 max-[758px]:grid-cols-3 max-[478px]:grid-cols-3 max-[478px]:gap-x-2"
             />
           )}
           <div className="flex justify-center w-full mt-8">
diff --git a/src/pages/search/Search.jsx b/src/pages/search/Search.jsx
index 076714c..8f53c21 100644
--- a/src/pages/search/Search.jsx
+++ b/src/pages/search/Search.jsx
@@ -36,11 +36,13 @@ function Search() {
         setSearchParams({ keyword, page: newPage });
     };
 
+    const searchGridClass = "grid-cols-8 max-[1600px]:grid-cols-6 max-[1200px]:grid-cols-4 max-[758px]:grid-cols-3 max-[478px]:grid-cols-3 max-[478px]:gap-x-2";
+
     return (
-        <div className="max-w-[1260px] mx-auto px-[15px] flex flex-col mt-[64px] max-md:mt-[50px]">
+        <div className="max-w-[1600px] mx-auto px-[15px] flex flex-col mt-[64px] max-md:mt-[50px]">
             <div className="w-full flex flex-col gap-y-8 mt-6">
                 {loading ? (
-                    <CategoryCardLoader className={"max-[478px]:mt-2"} />
+                    <CategoryCardLoader className={"max-[478px]:mt-2"} gridClass={searchGridClass} />
                 ) : page > totalPages ? (
                     <div className="flex flex-col gap-y-4">
                         <h1 className="font-bold text-2xl text-white max-[478px]:text-[18px]">
@@ -59,7 +61,7 @@ function Search() {
                             data={searchData}
                             showViewMore={false}
                             className="mt-0"
-                            cardStyle="max-[1400px]:h-[35vw]"
+                            gridClass={searchGridClass}
                         />
                         <div className="flex justify-center w-full mt-8">
                             <PageSlider