diff --git a/components/markets/MarketScroll.tsx b/components/markets/MarketScroll.tsx
index cc318a63c..180c2b4d5 100644
--- a/components/markets/MarketScroll.tsx
+++ b/components/markets/MarketScroll.tsx
@@ -37,18 +37,13 @@ const MarketScroll = ({
     markets.map((m) => m.marketId),
   );
 
-  const gap = 28;
+  const gap = 16;
 
   //calculate cards shown and width based on container width
   const cardsShown =
     windowWidth < BREAKPOINTS.md ? 1 : windowWidth < BREAKPOINTS.lg ? 2 : 3;
 
-  const cardWidth =
-    windowWidth < BREAKPOINTS.md
-      ? containerWidth
-      : windowWidth < BREAKPOINTS.lg
-      ? (containerWidth - gap) / cardsShown
-      : (containerWidth - gap * 2) / cardsShown;
+  const cardWidth = (containerWidth - gap * (cardsShown - 1)) / cardsShown;
 
   const handleRightClick = () => {
     setPageIndex(pageIndex + 1);
@@ -104,7 +99,7 @@ const MarketScroll = ({
             transform: `translateX(${
               windowWidth < BREAKPOINTS.sm
                 ? 0
-                : -(showRange[0] * (cardWidth + gap))
+                : -(showRange[0] * cardWidth + pageIndex * gap)
             }px)`,
           }}
           className={`flex ${
diff --git a/components/markets/market-card/index.tsx b/components/markets/market-card/index.tsx
index 1cb8f6318..ad8902b55 100644
--- a/components/markets/market-card/index.tsx
+++ b/components/markets/market-card/index.tsx
@@ -225,7 +225,7 @@ export const MarketCard = ({
     <MarketCardContext.Provider value={{ baseAsset }}>
       <div
         data-testid={`marketCard-${marketId}`}
-        className={`group flex flex-col min-w-full md:min-w-[calc(50%-14px)] lg:min-w-[calc(100%/3-9.67px)]  
+        className={`group flex flex-col min-w-full md:min-w-[calc(50%-8px)] lg:min-w-[calc(100%/3-9.67px)]  
         rounded-[10px] p-5 relative bg-white ztg-transition md:hover:scale-[1.035] ${className}`}
       >
         <Link