diff --git a/src/components/homepage/ContentTabs.tsx b/src/components/homepage/ContentTabs.tsx
index f620438b..0d255628 100644
--- a/src/components/homepage/ContentTabs.tsx
+++ b/src/components/homepage/ContentTabs.tsx
@@ -125,7 +125,7 @@ export function ContentTabs() {
               <h2 className="text-2xl font-bold mb-2">Most Popular Parks</h2>
               <p className="text-muted-foreground">Highest rated theme parks worldwide</p>
             </div>
-            <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 gap-6">
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
               {popularParks.map((park) => (
                 <ParkCard key={park.id} park={park} />
               ))}
@@ -137,7 +137,7 @@ export function ContentTabs() {
               <h2 className="text-2xl font-bold mb-2">Trending Parks</h2>
               <p className="text-muted-foreground">Most reviewed parks this month</p>
             </div>
-            <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 gap-6">
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
               {trendingParks.map((park) => (
                 <ParkCard key={park.id} park={park} />
               ))}
@@ -149,7 +149,7 @@ export function ContentTabs() {
               <h2 className="text-2xl font-bold mb-2">Most Popular Rides</h2>
               <p className="text-muted-foreground">Highest rated attractions worldwide</p>
             </div>
-            <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 gap-6">
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
               {popularRides.map((ride) => (
                 <RideCard key={ride.id} ride={ride} />
               ))}
@@ -161,7 +161,7 @@ export function ContentTabs() {
               <h2 className="text-2xl font-bold mb-2">Trending Rides</h2>
               <p className="text-muted-foreground">Most talked about attractions</p>
             </div>
-            <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 gap-6">
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
               {trendingRides.map((ride) => (
                 <RideCard key={ride.id} ride={ride} />
               ))}
@@ -173,7 +173,7 @@ export function ContentTabs() {
               <h2 className="text-2xl font-bold mb-2">Recently Added Parks</h2>
               <p className="text-muted-foreground">Latest parks added to our database</p>
             </div>
-            <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 gap-6">
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
               {recentParks.map((park) => (
                 <ParkCard key={park.id} park={park} />
               ))}
@@ -185,7 +185,7 @@ export function ContentTabs() {
               <h2 className="text-2xl font-bold mb-2">Recently Added Rides</h2>
               <p className="text-muted-foreground">Latest attractions added to our database</p>
             </div>
-            <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 gap-6">
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
               {recentRides.map((ride) => (
                 <RideCard key={ride.id} ride={ride} />
               ))}