diff --git a/web/components/carousel.tsx b/web/components/carousel.tsx
index 79baa451..030c256c 100644
--- a/web/components/carousel.tsx
+++ b/web/components/carousel.tsx
@@ -38,7 +38,7 @@ export function Carousel(props: {
   return (
     <div className={clsx('relative', className)}>
       <Row
-        className="scrollbar-hide w-full gap-4 overflow-x-auto scroll-smooth"
+        className="scrollbar-hide w-full snap-x gap-4 overflow-x-auto scroll-smooth"
         ref={ref}
         onScroll={onScroll}
       >
diff --git a/web/components/double-carousel.tsx b/web/components/double-carousel.tsx
index da01eb5a..a3d3759c 100644
--- a/web/components/double-carousel.tsx
+++ b/web/components/double-carousel.tsx
@@ -19,7 +19,7 @@ export function DoubleCarousel(props: {
         ? range(0, Math.floor(contracts.length / 2)).map((col) => {
             const i = col * 2
             return (
-              <Col key={contracts[i].id}>
+              <Col className="snap-start scroll-m-4" key={contracts[i].id}>
                 <ContractCard
                   contract={contracts[i]}
                   className="mb-2 w-96 shrink-0"
diff --git a/web/pages/tournaments/index.tsx b/web/pages/tournaments/index.tsx
index 4b573e3f..b308ee7f 100644
--- a/web/pages/tournaments/index.tsx
+++ b/web/pages/tournaments/index.tsx
@@ -237,7 +237,7 @@ const MarketCarousel = (props: { slug: string }) => {
           key={m.id}
           contract={m}
           hideGroupLink
-          className="mb-2 max-h-[200px] w-96 shrink-0"
+          className="mb-2 max-h-[200px] w-96 shrink-0 snap-start scroll-m-4 md:snap-align-none"
           questionClass="line-clamp-3"
           trackingPostfix=" tournament"
         />