diff --git a/src/components/SwiperCards/index.tsx b/src/components/SwiperCards/index.tsx
index d9ac2c47697..e0299abb9ec 100644
--- a/src/components/SwiperCards/index.tsx
+++ b/src/components/SwiperCards/index.tsx
@@ -18,7 +18,12 @@ import "swiper/css/pagination"
 const SwiperCards = ({ className }: ClassNameProp) => {
   const { items } = useBentoBox()
   return (
-    <div className={cn(className, "max-w-full")}>
+    <div
+      className={cn(
+        "-mx-4 w-[100vw] overflow-hidden px-4 sm:-mx-6 sm:px-6",
+        className
+      )}
+    >
       <Title />
       <Swiper
         className="mx-auto mt-4 h-fit max-w-128"
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 9f21707a9ef..ff53284b34d 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -309,7 +309,7 @@ const HomePage = ({
         </div>
 
         {/* Mobile */}
-        <SwiperCards className="my-16 lg:hidden" />
+        <SwiperCards className="lg:hidden" />
 
         {/* Desktop */}
         <BentoBox className="hidden lg:block" />