diff --git a/src/components/categorycard/CategoryCard.jsx b/src/components/categorycard/CategoryCard.jsx
index 65dadf3..097eaa3 100644
--- a/src/components/categorycard/CategoryCard.jsx
+++ b/src/components/categorycard/CategoryCard.jsx
@@ -189,7 +189,7 @@ const CategoryCard = React.memo(
               ))}
             </div>
           )}
-          <div className="grid grid-cols-6 gap-x-3 gap-y-8 mt-6 transition-all duration-300 ease-in-out max-[1400px]:grid-cols-4 max-[758px]:grid-cols-3 max-[478px]:grid-cols-3 max-[478px]:gap-x-2">
+          <div className={`grid ${cardStyle || 'grid-cols-6 max-[1400px]:grid-cols-4 max-[758px]:grid-cols-3 max-[478px]:grid-cols-3'} gap-x-3 gap-y-8 mt-6 transition-all duration-300 ease-in-out max-[478px]:gap-x-2`}>
             {itemsToRender.remainingItems.map((item, index) => (
               <div
                 key={index}
diff --git a/src/components/continue/ContinueWatching.jsx b/src/components/continue/ContinueWatching.jsx
index cc3c786..ff5ef86 100644
--- a/src/components/continue/ContinueWatching.jsx
+++ b/src/components/continue/ContinueWatching.jsx
@@ -35,7 +35,7 @@ const ContinueWatching = () => {
   if (memoizedWatchList.length === 0) return null;
 
   return (
-    <div className="mt-8 max-[1200px]:px-6 max-md:px-0">
+    <div className="mt-8">
       <div className="flex items-center justify-between max-md:pl-4 mb-6">
         <div className="flex items-center gap-x-3 justify-center">
           <FaHistory className="text-gray-200 text-xl" />
diff --git a/src/components/producer/Producer.jsx b/src/components/producer/Producer.jsx
index 810772c..2b177b6 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-[1600px] mx-auto px-[15px] flex flex-col mt-[64px] max-md:mt-[50px]">
+    <div className="max-w-[1600px] mx-auto 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" />
@@ -64,7 +64,7 @@ function Producer() {
             </p>
           </div>
         ) : producerInfo && producerInfo.length > 0 ? (
-          <div className="flex flex-col gap-y-2">
+          <div className="flex flex-col gap-y-2 max-[478px]:gap-y-0">
             <h1 className="font-bold text-2xl text-white max-[478px]:text-[18px]">
               {producerName} Anime
             </h1>
diff --git a/src/components/trending/Trending.jsx b/src/components/trending/Trending.jsx
index b70e866..1b8d081 100644
--- a/src/components/trending/Trending.jsx
+++ b/src/components/trending/Trending.jsx
@@ -11,7 +11,7 @@ const Trending = ({ trending, className }) => {
   const { language } = useLanguage();
 
   return (
-    <div className={`bg-[#141414] rounded-lg p-6 ${className}`}>
+    <div className={`bg-[#141414] rounded-lg p-4 ${className}`}>
       <div className="flex items-center gap-2 mb-4">
         <FontAwesomeIcon icon={faFire} className="text-white/90" />
         <h2 className="text-xl font-semibold text-white">Trending Now</h2>
diff --git a/src/pages/Home/Home.jsx b/src/pages/Home/Home.jsx
index c83309a..cc6eb62 100644
--- a/src/pages/Home/Home.jsx
+++ b/src/pages/Home/Home.jsx
@@ -18,14 +18,14 @@ function Home() {
   if (!homeInfo) return <Error error="404" />;
   return (
     <>
-      <div className="pt-16 px-4 w-full max-[1200px]:px-0">
+      <div className="pt-16 w-full">
         <Spotlight spotlights={homeInfo.spotlights} />
         <div className="mt-6">
           <Genre data={homeInfo.genres} />
         </div>
         <ContinueWatching />
         
-        <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 className="w-full grid grid-cols-[minmax(0,75%),minmax(0,25%)] gap-x-6 max-[1200px]:flex flex-col">
           <div>
             <CategoryCard
               label="Latest Episode"
diff --git a/src/pages/a2z/AtoZ.jsx b/src/pages/a2z/AtoZ.jsx
index f38a8af..57f3d91 100644
--- a/src/pages/a2z/AtoZ.jsx
+++ b/src/pages/a2z/AtoZ.jsx
@@ -45,8 +45,8 @@ function AtoZ({ path }) {
   };
 
   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">
+    <div className="max-w-[1600px] mx-auto flex flex-col mt-[64px] max-md:mt-[50px]">
+      <div className="flex flex-col gap-y-2 max-[478px]:gap-y-0 mt-6">
         <h1 className="font-bold text-2xl text-white max-[478px]:text-[18px]">
           Sort By Letters
         </h1>
diff --git a/src/pages/animeInfo/AnimeInfo.jsx b/src/pages/animeInfo/AnimeInfo.jsx
index 0e74ba4..0daa94d 100644
--- a/src/pages/animeInfo/AnimeInfo.jsx
+++ b/src/pages/animeInfo/AnimeInfo.jsx
@@ -156,7 +156,7 @@ function AnimeInfo({ random = false }) {
       <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">
+        <div className="relative z-10 container mx-auto py-4 sm:py-6 lg:py-12">
           {/* Mobile Layout */}
           <div className="block md:hidden">
             <div className="flex flex-row gap-4">
@@ -447,7 +447,7 @@ function AnimeInfo({ random = false }) {
 
       {/* Seasons Section */}
       {seasons?.length > 0 && (
-        <div className="container mx-auto px-3 py-8 sm:px-4 sm:py-12 max-[478px]:px-2">
+        <div className="container mx-auto py-8 sm:py-12">
           <h2 className="text-2xl font-bold mb-6 sm:mb-8 px-1">More Seasons</h2>
           <div className="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2 sm:gap-4">
             {seasons.map((season, index) => (
@@ -501,14 +501,14 @@ function AnimeInfo({ random = false }) {
 
       {/* Voice Actors Section */}
       {animeInfo?.charactersVoiceActors.length > 0 && (
-        <div className="container mx-auto px-4 py-12 max-[478px]:px-2">
+        <div className="container mx-auto py-12">
           <Voiceactor animeInfo={animeInfo} />
         </div>
       )}
 
       {/* Recommendations Section */}
       {animeInfo.recommended_data.length > 0 && (
-        <div className="container mx-auto px-4 py-12 max-[478px]:px-2">
+        <div className="container mx-auto py-12">
           <CategoryCard
             label="Recommended for you"
             data={animeInfo.recommended_data}
diff --git a/src/pages/contact/Contact.jsx b/src/pages/contact/Contact.jsx
index 541aebd..bdde696 100644
--- a/src/pages/contact/Contact.jsx
+++ b/src/pages/contact/Contact.jsx
@@ -6,7 +6,7 @@ import { faPaperPlane } from "@fortawesome/free-solid-svg-icons";
 
 function Contact() {
   return (
-    <div className="max-w-4xl mx-auto px-4 py-8 max-[478px]:px-2">
+    <div className="max-w-4xl mx-auto pt-16 pb-8">
       <h1 className="text-2xl font-bold mb-6">Contact Us</h1>
       <div className="space-y-8 text-white/60">
         <p>
diff --git a/src/pages/dmca/DMCA.jsx b/src/pages/dmca/DMCA.jsx
index 4f107d2..11e5b7e 100644
--- a/src/pages/dmca/DMCA.jsx
+++ b/src/pages/dmca/DMCA.jsx
@@ -5,7 +5,7 @@ import { faShield } from "@fortawesome/free-solid-svg-icons";
 
 function DMCA() {
   return (
-    <div className="max-w-5xl mx-auto px-4 pt-24 pb-5">
+    <div className="max-w-5xl mx-auto pt-16 pb-5">
       {/* Content */}
       <div className="space-y-12 text-white/60">
         <div className="text-center mb-8">
diff --git a/src/pages/search/Search.jsx b/src/pages/search/Search.jsx
index 8f53c21..bbe67e1 100644
--- a/src/pages/search/Search.jsx
+++ b/src/pages/search/Search.jsx
@@ -39,7 +39,7 @@ function Search() {
     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-[1600px] mx-auto px-[15px] flex flex-col mt-[64px] max-md:mt-[50px]">
+        <div className="max-w-[1600px] mx-auto 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"} gridClass={searchGridClass} />
@@ -53,7 +53,7 @@ function Search() {
                         </p>
                     </div>
                 ) : searchData && searchData.length > 0 ? (
-                    <div className="flex flex-col gap-y-2">
+                    <div className="flex flex-col gap-y-2 max-[478px]:gap-y-0">
                         <h1 className="font-bold text-2xl text-white max-[478px]:text-[18px]">
                             Search Results for: {keyword}
                         </h1>
diff --git a/src/pages/terms/Terms.jsx b/src/pages/terms/Terms.jsx
index 1f7c4f8..5a156cc 100644
--- a/src/pages/terms/Terms.jsx
+++ b/src/pages/terms/Terms.jsx
@@ -3,7 +3,7 @@ import website_name from '@/src/config/website.js';
 
 function Terms() {
   return (
-    <div className="max-w-5xl mx-auto px-4 pt-24 pb-5">
+    <div className="max-w-5xl mx-auto pt-16 pb-5">
       {/* Content */}
       <div className="space-y-12 text-white/60">
         <div className="text-center mb-8">
diff --git a/src/pages/watch/Watch.jsx b/src/pages/watch/Watch.jsx
index 53ec986..1fb1e62 100644
--- a/src/pages/watch/Watch.jsx
+++ b/src/pages/watch/Watch.jsx
@@ -223,10 +223,10 @@ export default function Watch() {
   }, [animeId, animeInfo]);
   return (
     <div className="w-full min-h-screen bg-[#0a0a0a]">
-      <div className="w-full max-w-[1920px] mx-auto pt-16 px-4 pb-6 w-full max-[1200px]:px-0 max-[1200px]:pt-12">
+      <div className="w-full max-w-[1920px] mx-auto pt-16 pb-6 w-full max-[1200px]:pt-12">
         <div className="grid grid-cols-[minmax(0,70%),minmax(0,30%)] gap-6 w-full h-full max-[1200px]:flex max-[1200px]:flex-col">
           {/* Left Column - Player, Controls, Servers */}
-          <div className="flex flex-col w-full gap-6 max-[1200px]:px-2">
+          <div className="flex flex-col w-full gap-6">
             <div ref={playerRef} className="player w-full h-fit bg-black flex flex-col rounded-xl overflow-hidden">
               {/* Video Container */}
               <div ref={videoContainerRef} className="w-full relative aspect-video bg-black">
@@ -354,7 +354,7 @@ export default function Watch() {
 
             {/* Mobile-only Seasons Section */}
             {seasons?.length > 0 && (
-              <div className="hidden max-[1200px]:block p-6 bg-[#141414] rounded-lg">
+              <div className="hidden max-[1200px]:block bg-[#141414] rounded-lg p-4">
                 <h2 className="text-xl font-semibold mb-4 text-white">More Seasons</h2>
                 <div className="grid grid-cols-2 gap-2">
                   {seasons.map((season, index) => (
@@ -425,7 +425,7 @@ export default function Watch() {
             </div>
 
             {/* Anime Info Section */}
-            <div className="p-6 bg-[#141414] rounded-lg max-[600px]:p-4">
+            <div className="bg-[#141414] rounded-lg p-4">
               <div className="flex gap-x-6 max-[600px]:flex-row max-[600px]:gap-4">
                 {animeInfo && animeInfo?.poster ? (
                   <img
@@ -495,7 +495,7 @@ export default function Watch() {
 
             {/* Desktop-only Seasons Section */}
             {seasons?.length > 0 && (
-              <div className="p-6 bg-[#141414] rounded-lg max-[1200px]:hidden">
+              <div className="bg-[#141414] rounded-lg p-4 max-[1200px]:hidden">
                 <h2 className="text-xl font-semibold mb-4 text-white">More Seasons</h2>
                 <div className="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2 sm:gap-4">
                   {seasons.map((season, index) => (
@@ -568,7 +568,7 @@ export default function Watch() {
 
             {/* Related Anime Section */}
             {animeInfo && animeInfo.related_data ? (
-              <div className="bg-[#141414] rounded-lg p-6">
+              <div className="bg-[#141414] rounded-lg p-4">
                 <h2 className="text-xl font-semibold mb-4 text-white">Related Anime</h2>
                 <Sidecard
                   data={animeInfo.related_data}
@@ -584,7 +584,7 @@ export default function Watch() {
 
           {/* Mobile-only Related Section */}
           {animeInfo && animeInfo.related_data && (
-            <div className="hidden max-[1200px]:block bg-[#141414] rounded-lg p-6">
+            <div className="hidden max-[1200px]:block bg-[#141414] rounded-lg p-4">
               <h2 className="text-xl font-semibold mb-4 text-white">Related Anime</h2>
               <Sidecard
                 data={animeInfo.related_data}