diff --git a/components/Categories.jsx b/components/Categories.jsx
index 245974f..ac7daed 100644
--- a/components/Categories.jsx
+++ b/components/Categories.jsx
@@ -1,17 +1,34 @@
 import Link from "next/link";
+import AOS from "aos";
+import "aos/dist/aos.css";
+import { useEffect } from "react";
 
 const Category = () => {
+  useEffect(() => {
+    AOS.init();
+  }, []);
+
   return (
-    <div className="category wrapper my-20 flex flex-col gap-10">
+    <div className="category wrapper my-20 flex flex-col gap-10 overflow-x-hidden">
       <h2 className="section-title">Categories</h2>
       <div className="category-wrapper flex flex-col-2 gap-5">
-        <Link href={"products/men"} className="sq-men">
+        <Link
+          href={"products/men"}
+          className="sq-men"
+          data-aos="zoom-in"
+          data-aos-duration="1500"
+        >
           <div className="overlay"></div>
           <h3 className="category-title-men">
             <p>Men</p>
           </h3>
         </Link>
-        <Link href={"products/women"} className="sq-women">
+        <Link
+          href={"products/women"}
+          className="sq-women"
+          data-aos="zoom-in"
+          data-aos-duration="1500"
+        >
           <div className="overlay"></div>
           <h3 className="category-title-women">
             <p>Women</p>
diff --git a/components/Countdown.jsx b/components/Countdown.jsx
index a576acf..5930ee0 100644
--- a/components/Countdown.jsx
+++ b/components/Countdown.jsx
@@ -28,7 +28,7 @@ const CountdownTimer = ({ endDate }) => {
   }, [endDate]);
 
   return (
-    <div className="wrapper my-20 flex flex-col gap-10 items-center">
+    <div className="wrapper my-20 flex flex-col gap-10 items-center overflow-x-hidden">
       <h2 className="section-title text-center">April Sale Ends in</h2>
       <div className="text-center text-3xl md:text-6xl font-bold bg-rose-700 p-7 text-rose-100 px-10 w-full md:w-[40rem]">
         {expired ? (
diff --git a/components/Footer.jsx b/components/Footer.jsx
index 1b60c74..b8bca7e 100644
--- a/components/Footer.jsx
+++ b/components/Footer.jsx
@@ -1,24 +1,39 @@
 import Link from "next/link";
+import { useEffect } from "react";
 import {
   FaFacebookF,
   FaLinkedinIn,
   FaInstagram,
   FaTwitter,
 } from "react-icons/fa";
+import AOS from "aos";
+import "aos/dist/aos.css";
 
 const Footer = () => {
+  useEffect(() => {
+    AOS.init();
+  }, []);
+
   return (
     <footer className="text-gray-300 bg-black py-20">
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 pb-20 wrapper w-full gap-16 md:gap-10 lg:gap-5 xl:gap-10 2xl:px-20 ">
         <div className="footer-col-1 flex flex-col items-start">
           <Link
+            data-aos="fade-up"
+            data-aos-duration="1000"
+            data-aos-delay="0"
             href="/"
             className="text-4xl md:text-2xl font-semibold text-rose-500 hover:text-white duration-300"
           >
             euphoria.
           </Link>
         </div>
-        <div className="footer-col-2 flex flex-col items-start">
+        <div
+          className="footer-col-2 flex flex-col items-start"
+          data-aos="fade-up"
+          data-aos-duration="1500"
+          data-aos-delay="300"
+        >
           <p className="follow-text uppercase tracking-wider text-gray-400">{`Don't forget to follow us`}</p>
           <div className="social-icons">
             <div className="icon-circle">
@@ -35,7 +50,12 @@ const Footer = () => {
             </div>
           </div>
         </div>
-        <div className="footer-col-3 flex flex-col items-start">
+        <div
+          className="footer-col-3 flex flex-col items-start"
+          data-aos="fade-up"
+          data-aos-duration="1500"
+          data-aos-delay="600"
+        >
           <p className="uppercase font-medium text-rose-500 tracking-wider">
             Useful Links
           </p>
@@ -67,7 +87,12 @@ const Footer = () => {
             </div>
           </div>
         </div>
-        <div className="footer-col-4 flex flex-col items-start xl:items-center gap-3">
+        <div
+          className="footer-col-4 flex flex-col items-start xl:items-center gap-3"
+          data-aos="flip-up"
+          data-aos-duration="1500"
+          data-aos-delay="1000"
+        >
           <p className="uppercase tracking-wider text-gray-400">
             Need more informations?
           </p>
@@ -78,7 +103,12 @@ const Footer = () => {
         </div>
       </div>
 
-      <p className="copyright border-t border-gray-500/40 pt-20 text-gray-400 wrapper text-center uppercase">
+      <p
+        className="copyright border-t border-gray-500/40 pt-20 text-gray-400 wrapper text-center uppercase"
+        data-aos="zoom-in-up"
+        data-aos-duration="800"
+        data-aos-delay="1300"
+      >
         &copy; {new Date().getFullYear()} Euphoria. All rights reserved.
       </p>
     </footer>
diff --git a/components/Gallery.jsx b/components/Gallery.jsx
index b207a0b..ed1b45f 100644
--- a/components/Gallery.jsx
+++ b/components/Gallery.jsx
@@ -7,57 +7,83 @@ const data = [
     id: 1,
     src: "https://images.pexels.com/photos/13565969/pexels-photo-13565969.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
     title: "Women tops",
+    animStyle: "fade-right",
+    animDuration: "800",
+    animDelay: "250",
   },
   {
     id: 2,
     src: "https://images.pexels.com/photos/10041282/pexels-photo-10041282.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
     title: "Women shirts",
+    animStyle: "fade-right",
+    animDuration: "800",
   },
   {
     id: 3,
     src: "https://images.pexels.com/photos/769731/pexels-photo-769731.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
     title: "Men shirts",
+    animStyle: "fade-down",
+    animDuration: "800",
   },
   {
     id: 4,
     src: "https://images.pexels.com/photos/2453823/pexels-photo-2453823.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
     title: "Men pants",
+    animStyle: "fade-down",
+    animDuration: "800",
+    animDelay: "250",
   },
   {
     id: 5,
     src: "https://images.pexels.com/photos/7473356/pexels-photo-7473356.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
     title: "Women pants",
+    animStyle: "fade-up",
+    animDuration: "800",
+    animDelay: "500",
   },
   {
     id: 6,
     src: "https://images.pexels.com/photos/7848603/pexels-photo-7848603.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
     title: "Men shirts",
+    animStyle: "fade-up",
+    animDuration: "800",
+    animDelay: "250",
   },
   {
     id: 7,
     src: "https://images.pexels.com/photos/1007018/pexels-photo-1007018.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
     title: "Women skirts",
+    animStyle: "fade-up",
+    animDuration: "800",
   },
   {
     id: 8,
     src: "https://images.pexels.com/photos/4637874/pexels-photo-4637874.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
     title: "Men shoes",
+    animStyle: "fade-left",
+    animDuration: "800",
   },
   {
     id: 9,
     src: "https://images.pexels.com/photos/5713302/pexels-photo-5713302.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
     title: "Women shoes",
+    animStyle: "fade-left",
+    animDuration: "800",
+    animDelay: "250",
   },
   {
     id: 10,
     src: "https://images.pexels.com/photos/16131075/pexels-photo-16131075.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
     title: "Men jackets",
+    animStyle: "fade-left",
+    animDuration: "800",
+    animDelay: "500",
   },
 ];
 
 const Gallery = () => {
   return (
-    <div className="wrapper image-container my-20">
+    <div className="wrapper image-container my-20 overflow-x-hidden">
       <div className="text-center mb-10 flex flex-col gap-5">
         <span className="font-medium tracking-widest">{`LET'S SEE`}</span>
         <span className="section-title">GALLERY OF THE EUPHORIA</span>
diff --git a/components/GridItemForGallery.jsx b/components/GridItemForGallery.jsx
index 599ffe1..47e151f 100644
--- a/components/GridItemForGallery.jsx
+++ b/components/GridItemForGallery.jsx
@@ -1,8 +1,20 @@
 import Image from "next/image";
+import { useEffect } from "react";
+import AOS from "aos";
+import "aos/dist/aos.css";
 
 const GridItemForGallery = ({ item }) => {
+  useEffect(() => {
+    AOS.init();
+  }, []);
+
   return (
-    <div className={`item${item.id}`}>
+    <div
+      className={`item${item.id}`}
+      data-aos={item.animStyle}
+      data-aos-duration={item.animDuration}
+      data-aos-delay={item.animDelay}
+    >
       <Image
         priority
         unoptimized
diff --git a/components/Slide.jsx b/components/Slide.jsx
index a0a5d61..2587138 100644
--- a/components/Slide.jsx
+++ b/components/Slide.jsx
@@ -1,16 +1,34 @@
 import Link from "next/link";
+import AOS from "aos";
+import "aos/dist/aos.css";
+import { useEffect } from "react";
 
 const Slide = ({ image }) => {
+  useEffect(() => {
+    AOS.init();
+  }, []);
+
   return (
     <div className="slide" style={{ backgroundImage: `url(${image.src})` }}>
       <div className="slide-text container mx-8 md:mx-10 xl:mx-20 flex flex-col items-start justify-center h-full gap-5 text-violet-50">
-        <h1 className="text-4xl md:text-6xl lg:text-7xl  font-semibold uppercase space-font z-10">
+        <h1
+          data-aos="fade-down"
+          data-aos-duration="1500"
+          className="text-4xl md:text-6xl lg:text-7xl  font-semibold uppercase space-font z-10"
+        >
           {image.headline}
         </h1>
-        <p className="w-2/3 lg:w-1/2 z-20 text-sm md:text-base lg:text-lg xl:text-xl">
+        <p
+          data-aos="fade-right"
+          data-aos-duration="1500"
+          className="w-2/3 lg:w-1/2 z-20 text-sm md:text-base lg:text-lg xl:text-xl"
+        >
           {image.body}
         </p>
         <Link
+          data-aos="fade-left"
+          data-aos-duration="1500"
+          data-aos-delay="1000"
           href={`products/${image.category}`}
           className="cta-btn border-[1px] uppercase h-12 w-64 md:h-14 md:w-72 mt-5 duration-300 font-medium"
         >
diff --git a/package-lock.json b/package-lock.json
index f7e6e41..3b922d6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@prisma/client": "^4.12.0",
         "@reduxjs/toolkit": "^1.9.3",
         "@stripe/stripe-js": "^1.52.1",
+        "aos": "^2.3.4",
         "axios": "^1.4.0",
         "date-fns": "^2.30.0",
         "eslint": "8.37.0",
@@ -24,6 +25,7 @@
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-icons": "^4.8.0",
+        "react-parallax": "^3.5.1",
         "react-redux": "^8.0.5",
         "react-responsive-carousel": "^3.2.23",
         "react-toastify": "^9.1.2",
@@ -631,6 +633,16 @@
         "node": ">= 8"
       }
     },
+    "node_modules/aos": {
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/aos/-/aos-2.3.4.tgz",
+      "integrity": "sha512-zh/ahtR2yME4I51z8IttIt4lC1Nw0ktsFtmeDzID1m9naJnWXhCoARaCgNOGXb5CLy3zm+wqmRAEgMYB5E2HUw==",
+      "dependencies": {
+        "classlist-polyfill": "^1.0.3",
+        "lodash.debounce": "^4.0.6",
+        "lodash.throttle": "^4.0.1"
+      }
+    },
     "node_modules/arg": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
@@ -997,6 +1009,11 @@
         "node": ">= 6"
       }
     },
+    "node_modules/classlist-polyfill": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz",
+      "integrity": "sha512-GzIjNdcEtH4ieA2S8NmrSxv7DfEV5fmixQeyTmqmRmRJPGpRBaSnA2a0VrCjyT8iW8JjEdMbKzDotAJf+ajgaQ=="
+    },
     "node_modules/classnames": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
@@ -2778,11 +2795,21 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
     },
+    "node_modules/lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -3639,6 +3666,15 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/react-parallax": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/react-parallax/-/react-parallax-3.5.1.tgz",
+      "integrity": "sha512-p5zPsPsqELlIOGaPS01O0IRx8R2bxcBAtrdF/RHf9nIxxk5hijbM2y89tk4rJQBcNH6ESSLe7J2NV4/ms7FLFw==",
+      "peerDependencies": {
+        "react": "16.x.x || 17.x.x || 18.x.x",
+        "react-dom": "16.x.x || 17.x.x || 18.x.x"
+      }
+    },
     "node_modules/react-redux": {
       "version": "8.0.5",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.5.tgz",
diff --git a/package.json b/package.json
index a41ad8c..3047768 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@prisma/client": "^4.12.0",
     "@reduxjs/toolkit": "^1.9.3",
     "@stripe/stripe-js": "^1.52.1",
+    "aos": "^2.3.4",
     "axios": "^1.4.0",
     "date-fns": "^2.30.0",
     "eslint": "8.37.0",
@@ -25,6 +26,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-icons": "^4.8.0",
+    "react-parallax": "^3.5.1",
     "react-redux": "^8.0.5",
     "react-responsive-carousel": "^3.2.23",
     "react-toastify": "^9.1.2",
diff --git a/pages/about.js b/pages/about.js
index 97b2d28..173b091 100644
--- a/pages/about.js
+++ b/pages/about.js
@@ -1,6 +1,7 @@
 import { ImageAbout } from "@/components/ImageAbout";
 import LogoItemForAbout from "@/components/LogoItemForAbout";
 import Image from "next/image";
+import { Parallax } from "react-parallax";
 
 const AboutPage = () => {
   const logos = [
@@ -39,24 +40,17 @@ const AboutPage = () => {
   return (
     <div className="min-h-screen mt-20">
       <div className="header">
-        <Image
-          priority
-          unoptimized
-          loader={() =>
-            "https://images.pexels.com/photos/242829/pexels-photo-242829.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
-          }
-          src={
-            "https://images.pexels.com/photos/242829/pexels-photo-242829.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
-          }
-          width={50}
-          height={25}
-          alt={"Man Riding on Motorcycle"}
-          className="w-full h-[48rem] object-cover brightness-50"
-        />
-
-        <p className="text-center absolute top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%] uppercase font-extralight text-white text-8xl">
-          About Euphoria
-        </p>
+        <Parallax
+          className="w-full h-[calc(100vh-5rem)] object-cover brightness-[.6]"
+          bgImage="https://images.pexels.com/photos/242829/pexels-photo-242829.jpeg"
+          strength={225}
+        >
+          <div style={{ height: 500 }}>
+            <p className="text-center absolute top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%] uppercase font-extralight text-white text-8xl">
+              About Euphoria
+            </p>
+          </div>
+        </Parallax>
       </div>
 
       <div className="wrapper">
diff --git a/pages/contact.js b/pages/contact.js
index e627fb7..2308e59 100644
--- a/pages/contact.js
+++ b/pages/contact.js
@@ -47,7 +47,7 @@ const ContactPage = () => {
   };
 
   return (
-    <div className="my-20 wrapper min-h-screen mt-20">
+    <div className="mb-20 wrapper min-h-screen mt-40">
       <h2 className="section-title">Contact Us</h2>
 
       <div className="flex mt-10">
diff --git a/pages/index.js b/pages/index.js
index 324d2fe..d77c020 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -19,10 +19,10 @@ const HomePage = ({ products }) => {
     <div className="mt-20">
       <Slider />
       <Categories />
-      <ProductsPage products={products} />
+      <ProductsPage products={products} isAddedInHomepage={true} />
       <Countdown endDate={endDate} />
-      <MenProductsPage products={menProducts} />
-      <WomenProductsPage products={womenProducts} />
+      <MenProductsPage products={menProducts} isAddedInHomepage={true} />
+      <WomenProductsPage products={womenProducts} isAddedInHomepage={true} />
       <Gallery />
     </div>
   );
diff --git a/pages/products/[productId].js b/pages/products/[productId].js
index 8c99a55..ce13201 100644
--- a/pages/products/[productId].js
+++ b/pages/products/[productId].js
@@ -1,12 +1,18 @@
-import { useCallback, useState } from "react";
+import { useCallback, useState, useEffect } from "react";
 import { getProduct } from "@/prisma/products";
 import { addToCart } from "@/store/productSlice";
 import { useDispatch } from "react-redux";
 import { formatCurrency } from "@/utils/formatCurrency";
 import Image from "next/image";
 import Link from "next/link";
+import AOS from "aos";
+import "aos/dist/aos.css";
 
 const ProductDetails = ({ product }) => {
+  useEffect(() => {
+    AOS.init();
+  }, []);
+
   const [quantity, setQuantity] = useState(1);
 
   const handleDecrease = useCallback(() => {
@@ -20,55 +26,74 @@ const ProductDetails = ({ product }) => {
   const dispatch = useDispatch();
 
   return (
-    <div className="wrapper my-10 grid lg:grid-cols-2 gap-10 mt-20">
-      <Image
-        priority
-        unoptimized
-        loader={() => product.imageUrl}
-        src={product.imageUrl}
-        width={500}
-        height={500}
-        alt={product.title}
-        className="w-full h-full object-cover"
-      />
+    <div>
+      <div className="wrapper mb-20 grid lg:grid-cols-2 gap-10 mt-20">
+        <Image
+          priority
+          unoptimized
+          loader={() => product.imageUrl}
+          src={product.imageUrl}
+          width={500}
+          height={500}
+          alt={product.title}
+          className="w-full h-full object-cover"
+        />
 
-      <div className="flex flex-col gap-5">
-        <span className="uppercase tracking-widest font-semibold text-sm text-cyan-500">
-          {product.category}
-        </span>
-        <h2 className="text-4xl">{product.title}</h2>
-        <div className="flex gap-10 items-center">
-          <p className="text-2xl text-rose-500 font-medium">
-            {formatCurrency(product.price * quantity)}
-          </p>
-          <div className="counter flex items-center bg-gray-100 text-2xl">
-            <button
-              onClick={handleDecrease}
-              className="bg-gray-700 text-white h-10 w-10 flex items-center justify-center hover:bg-cyan-500 duration-300"
-            >
-              -
-            </button>
-            <span className="h-10 w-10 flex items-center justify-center">
-              {quantity}
-            </span>
-            <button
-              onClick={handleIncrease}
-              className="bg-gray-700 text-white h-10 w-10 flex items-center justify-center hover:bg-cyan-500 duration-300"
-            >
-              +
-            </button>
+        <div className="flex flex-col gap-5">
+          <span
+            className="uppercase tracking-widest font-semibold text-sm text-cyan-500"
+            data-aos="fade-right"
+            data-aos-duration="1000"
+          >
+            {product.category}
+          </span>
+          <h2
+            className="text-4xl"
+            data-aos="fade-left"
+            data-aos-duration="1000"
+          >
+            {product.title}
+          </h2>
+          <div
+            className="flex gap-10 items-center"
+            data-aos="fade-right"
+            data-aos-duration="1000"
+          >
+            <p className="text-2xl text-rose-500 font-medium">
+              {formatCurrency(product.price * quantity)}
+            </p>
+            <div className="counter flex items-center bg-gray-100 text-2xl">
+              <button
+                onClick={handleDecrease}
+                className="bg-gray-700 text-white h-10 w-10 flex items-center justify-center hover:bg-cyan-500 duration-300"
+              >
+                -
+              </button>
+              <span className="h-10 w-10 flex items-center justify-center">
+                {quantity}
+              </span>
+              <button
+                onClick={handleIncrease}
+                className="bg-gray-700 text-white h-10 w-10 flex items-center justify-center hover:bg-cyan-500 duration-300"
+              >
+                +
+              </button>
+            </div>
+          </div>
+          <Link
+            onClick={() => dispatch(addToCart({ ...product, quantity }))}
+            href="/cart"
+            className="bg-cyan-500 text-center py-3 text-white text-xl font-medium hover:bg-cyan-600 duration-300 mt-5"
+            data-aos="zoom-in"
+            data-aos-duration="1000"
+            data-aos-delay="800"
+          >
+            Add to Cart
+          </Link>
+          <div className="mt-5" data-aos="fade-up" data-aos-duration="1000">
+            <p className="font-medium mb-3">Description:</p>
+            <p className="text-gray-500">{product.description}</p>
           </div>
-        </div>
-        <Link
-          onClick={() => dispatch(addToCart({ ...product, quantity }))}
-          href="/cart"
-          className="bg-cyan-500 text-center py-3 text-white text-xl font-medium hover:bg-cyan-600 duration-300 mt-5"
-        >
-          Add to Cart
-        </Link>
-        <div className="mt-5">
-          <p className="font-medium mb-3">Description:</p>
-          <p className="text-gray-500">{product.description}</p>
         </div>
       </div>
     </div>
diff --git a/pages/products/index.js b/pages/products/index.js
index 94ee3bb..78d740e 100644
--- a/pages/products/index.js
+++ b/pages/products/index.js
@@ -1,15 +1,17 @@
 import ProductItem from "@/components/ProductItem";
 import { getAllProducts } from "@/prisma/products";
 
-const ProductsPage = ({ products }) => {
+const ProductsPage = ({ products, isAddedInHomepage }) => {
+  const marginClass = `${isAddedInHomepage ? "mt-20" : "mt-40"}`;
   return (
-    <div className="wrapper my-20 flex flex-col gap-10 mt-20">
-      <h2 className="section-title">Browse all products</h2>
-
-      <div className="products grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-10">
-        {products.map((product) => (
-          <ProductItem key={product.id} product={product} />
-        ))}
+    <div className={`${marginClass} overflow-x-hidden`}>
+      <div className="wrapper mb-20 flex flex-col gap-10">
+        <h2 className="section-title">Browse all products</h2>
+        <div className="products grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-10">
+          {products.map((product) => (
+            <ProductItem key={product.id} product={product} />
+          ))}
+        </div>
       </div>
     </div>
   );
diff --git a/pages/products/men.js b/pages/products/men.js
index d6f1dcc..fb8d28a 100644
--- a/pages/products/men.js
+++ b/pages/products/men.js
@@ -1,15 +1,18 @@
 import ProductItem from "@/components/ProductItem";
 import { getAllProducts } from "@/prisma/products";
 
-const MenProductsPage = ({ products }) => {
+const MenProductsPage = ({ products, isAddedInHomepage }) => {
+  const marginClass = `${isAddedInHomepage ? "mt-20" : "mt-40"}`;
   return (
-    <div className="wrapper my-20 flex flex-col gap-10 mt-20">
-      <h2 className="section-title">Browse all mens wear</h2>
+    <div className={`${marginClass} overflow-x-hidden`}>
+      <div className="wrapper mb-20 flex flex-col gap-10">
+        <h2 className="section-title">Browse all mens wear</h2>
 
-      <div className="products grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-10">
-        {products.map((product) => (
-          <ProductItem key={product.id} product={product} />
-        ))}
+        <div className="products grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-10">
+          {products.map((product) => (
+            <ProductItem key={product.id} product={product} />
+          ))}
+        </div>
       </div>
     </div>
   );
diff --git a/pages/products/women.js b/pages/products/women.js
index 9aa5123..31bf7e4 100644
--- a/pages/products/women.js
+++ b/pages/products/women.js
@@ -1,15 +1,18 @@
 import ProductItem from "@/components/ProductItem";
 import { getAllProducts } from "@/prisma/products";
 
-const WomenProductsPage = ({ products }) => {
+const WomenProductsPage = ({ products, isAddedInHomepage }) => {
+  const marginClass = `${isAddedInHomepage ? "mt-20" : "mt-40"}`;
   return (
-    <div className="wrapper my-20 flex flex-col gap-10 mt-20">
-      <h2 className="section-title">Browse all womens wear</h2>
+    <div className={`${marginClass} overflow-x-hidden`}>
+      <div className="wrapper mb-20 flex flex-col gap-10">
+        <h2 className="section-title">Browse all womens wear</h2>
 
-      <div className="products grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-10">
-        {products.map((product) => (
-          <ProductItem key={product.id} product={product} />
-        ))}
+        <div className="products grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-10">
+          {products.map((product) => (
+            <ProductItem key={product.id} product={product} />
+          ))}
+        </div>
       </div>
     </div>
   );