diff --git a/components/products/RelatedProductCards.jsx b/components/products/RelatedProductCards.jsx
index c68b7ae..fa28756 100644
--- a/components/products/RelatedProductCards.jsx
+++ b/components/products/RelatedProductCards.jsx
@@ -30,12 +30,12 @@ const RelatedProductCards = ({ productId }) => {
           You may also like
         </h1>
       </div>
-      <div className="overflow-x-auto  hide-navbar gap-5 flex items-center justify-center">
+      <div className="overflow-x-auto hide-navbar flex items-center justify-start px-4 pb-4 -mx-4 snap-x">
         {relatedProducts.map((product) => (
           <Link href={`/products/${product.id}`} key={product.id}>
             <div
               key={product.id}
-              className="relative bg-[#EDE8E0]  overflow-hidden sm:h-[350px] sm:w-[300px] "
+              className="relative bg-[#EDE8E0] overflow-hidden sm:h-[350px] sm:w-[300px] flex-shrink-0 mx-3 snap-center"
             >
               <div className="absolute top-0 left-0 bg-[#C19A5B] text-white py-1 px-3 rounded-br-lg z-10">
                 Exclusive
@@ -49,8 +49,8 @@ const RelatedProductCards = ({ productId }) => {
                   className="w-full h-full object-cover hover:scale-125 transition-transform ease-in-out duration-300"
                 />
               </div>
-              <div className="p-4 ">
-                <h3 className="text-center text-[1rem] uppercase  text-gray-800">
+              <div className="p-4">
+                <h3 className="text-center text-[1rem] uppercase text-gray-800">
                   {product.product_name}
                 </h3>
               </div>