diff --git a/src/components/Loader/Spotlight.loader.jsx b/src/components/Loader/Spotlight.loader.jsx
index 583d74c..b2bc0bf 100644
--- a/src/components/Loader/Spotlight.loader.jsx
+++ b/src/components/Loader/Spotlight.loader.jsx
@@ -5,26 +5,27 @@ const SkeletonItems = ({ count, className }) => (
 function SpotlightLoader() {
     return (
         <section className="w-full h-[600px] max-[1390px]:h-[530px] max-[1300px]:h-[500px] max-md:h-[420px] relative">
+            <Skeleton className="absolute inset-0 w-full h-full rounded-none" />
             <div className="absolute flex flex-col left-0 bottom-[100px] w-[55%] p-4 z-10 max-[1390px]:w-[45%] max-[1390px]:bottom-[10px] max-[1300px]:w-[600px] max-[1120px]:w-[60%] max-md:w-[90%] max-[300px]:w-full">
-                <Skeleton className="w-[400px] h-[20px] max-md:w-[180px]" />
-                <Skeleton className="w-[70%] h-[20px] mt-6 text-left max-[1300px]:mt-4  max-sm:w-[80%] max-[320px]:w-full " />
+                <Skeleton className="w-[450px] h-[32px] max-md:w-[200px] max-md:h-[24px]" />
+                <Skeleton className="w-[70%] h-[24px] mt-6 text-left max-[1300px]:mt-4 max-sm:w-[80%] max-[320px]:w-full max-md:h-[20px]" />
                 <div className="flex h-fit justify-center items-center w-fit space-x-5 mt-8 max-[1300px]:mt-6 max-md:hidden">
-                    <SkeletonItems count={2} className="w-[30px] h-[15px]" />
+                    <SkeletonItems count={2} className="w-[40px] h-[20px]" />
                     <div className="flex space-x-3 w-fit">
-                        <Skeleton className="w-[80px] h-[15px]" />
-                        <div className='flex space-x-[1px] rounded-r-[5px] rounded-l-[5px] w-fit py-[1px] overflow-hidden'>
-                            <SkeletonItems count={2} className="w-[30px] h-[15px]" />
+                        <Skeleton className="w-[90px] h-[20px]" />
+                        <div className='flex space-x-[2px] rounded-r-[5px] rounded-l-[5px] w-fit py-[1px] overflow-hidden'>
+                            <SkeletonItems count={2} className="w-[35px] h-[20px]" />
                         </div>
                     </div>
                 </div>
-                <div className="mt-6 max-[1300px]:w-[500px] flex flex-col gap-y-2 max-[1120px]:w-[90%] max-md:hidden">
-                    <Skeleton className="w-full h-[13px]" />
-                    <Skeleton className="w-[85%] h-[13px]" />
-                    <Skeleton className="w-[70%] h-[13px]" />
+                <div className="mt-6 max-[1300px]:w-[500px] flex flex-col gap-y-3 max-[1120px]:w-[90%] max-md:hidden">
+                    <Skeleton className="w-full h-[16px]" />
+                    <Skeleton className="w-[85%] h-[16px]" />
+                    <Skeleton className="w-[70%] h-[16px]" />
                 </div>
                 <div className='flex gap-x-5 mt-10 max-md:mt-6 max-sm:w-full max-[320px]:flex-col max-[320px]:space-y-3'>
-                    <Skeleton className="w-[170px] h-[40px] max-[575px]:w-[120px] max-[575px]:h-[30px]" />
-                    <Skeleton className="w-[150px] h-[40px] max-[575px]:w-[120px] max-[575px]:h-[30px]" />
+                    <Skeleton className="w-[180px] h-[45px] max-[575px]:w-[130px] max-[575px]:h-[35px]" />
+                    <Skeleton className="w-[160px] h-[45px] max-[575px]:w-[130px] max-[575px]:h-[35px]" />
                 </div>
             </div>
         </section >
diff --git a/src/components/Loader/Trending.loader.jsx b/src/components/Loader/Trending.loader.jsx
index bf777db..53175b3 100644
--- a/src/components/Loader/Trending.loader.jsx
+++ b/src/components/Loader/Trending.loader.jsx
@@ -19,11 +19,13 @@ function TrendingLoader() {
     }, []);
     return (
         <div className="flex flex-col w-full mt-10 max-[1200px]:px-4">
-            <Skeleton className="w-[150px] h-[20px] max-[400px]:w-[100px]" />
-            <div className="w-full h-[250px] overflow-hidden flex mt-6 justify-around max-[1300px]:h-fit">
+            <Skeleton className="w-[180px] h-[28px] max-[400px]:w-[120px] max-[400px]:h-[24px]" />
+            <div className="w-full h-[250px] overflow-hidden flex mt-6 justify-around max-[1300px]:h-fit gap-x-4">
                 {[...Array(count)].map((_, index) => (
-                    <div key={index}>
-                        <Skeleton className="w-[200px] h-full rounded-none max-[1300px]:w-[22vw] max-[1300px]:h-[30vw] max-[720px]:w-[25vw] max-[720px]:h-[35vw]" />
+                    <div key={index} className="flex flex-col gap-y-2">
+                        <Skeleton className="w-[200px] h-[250px] rounded-md max-[1300px]:w-[22vw] max-[1300px]:h-[30vw] max-[720px]:w-[25vw] max-[720px]:h-[35vw]" />
+                        <Skeleton className="w-[180px] h-[20px] max-[1300px]:w-[20vw] max-[720px]:w-[22vw]" />
+                        <Skeleton className="w-[140px] h-[16px] max-[1300px]:w-[15vw] max-[720px]:w-[18vw]" />
                     </div>
                 ))}
             </div>
diff --git a/src/components/Loader/VoiceActorlist.loader.jsx b/src/components/Loader/VoiceActorlist.loader.jsx
index f4b975e..b67b37c 100644
--- a/src/components/Loader/VoiceActorlist.loader.jsx
+++ b/src/components/Loader/VoiceActorlist.loader.jsx
@@ -4,12 +4,12 @@ function VoiceActorlistLoader() {
     return (
         <div className="w-full h-fit grid grid-cols-2 gap-4 overflow-y-hidden max-sm:gap-2 max-md:h-[400px] max-md:flex max-md:flex-col">
             {[...Array(10)].map((_, index) => (
-                <div key={index} className="h-[80px] p-4 rounded-md bg-[#444445]">
-                    <div className="flex h-full items-center gap-x-2">
-                        <Skeleton className="w-[45px] h-[45px] rounded-full max-sm:w-[30px] max-sm:h-[30px]" />
-                        <div className="flex flex-col gap-y-1">
-                            <Skeleton className="h-[10px] w-[100px] rounded-md max-[300px]:w-[50px] max-[300px]:h-[8px]" />
-                            <Skeleton className="h-[10px] w-[70px] rounded-md max-[300px]:w-[20px] max-[300px]:h-[8px]" />
+                <div key={index} className="h-[90px] p-4 rounded-md bg-[#444445] hover:bg-[#4f4f50] transition-colors">
+                    <div className="flex h-full items-center gap-x-3">
+                        <Skeleton className="w-[55px] h-[55px] rounded-full max-sm:w-[40px] max-sm:h-[40px]" />
+                        <div className="flex flex-col gap-y-2">
+                            <Skeleton className="h-[16px] w-[120px] rounded-md max-[300px]:w-[80px] max-[300px]:h-[14px]" />
+                            <Skeleton className="h-[14px] w-[80px] rounded-md max-[300px]:w-[60px] max-[300px]:h-[12px]" />
                         </div>
                     </div>
                 </div>
diff --git a/src/components/producer/Producer.jsx b/src/components/producer/Producer.jsx
index c1c0580..810772c 100644
--- a/src/components/producer/Producer.jsx
+++ b/src/components/producer/Producer.jsx
@@ -71,7 +71,7 @@ function Producer() {
             <CategoryCard
               data={producerInfo}
               showViewMore={false}
-              className="mt-4"
+              className="mt-0"
               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">