diff --git a/src/components/rides/CoasterStatistics.tsx b/src/components/rides/CoasterStatistics.tsx
index f50dbd77..c3d8b3ff 100644
--- a/src/components/rides/CoasterStatistics.tsx
+++ b/src/components/rides/CoasterStatistics.tsx
@@ -64,7 +64,7 @@ export const CoasterStatistics = ({ statistics }: CoasterStatisticsProps) => {
               <h3 className="text-sm font-semibold mb-3 text-muted-foreground uppercase tracking-wide">
                 {category}
               </h3>
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+              <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-3">
                 {stats
                   .sort((a, b) => a.display_order - b.display_order)
                   .map((stat) => (
diff --git a/src/components/rides/RecentPhotosPreview.tsx b/src/components/rides/RecentPhotosPreview.tsx
index 95729c9b..c230f40a 100644
--- a/src/components/rides/RecentPhotosPreview.tsx
+++ b/src/components/rides/RecentPhotosPreview.tsx
@@ -66,7 +66,7 @@ export function RecentPhotosPreview({ rideId, onViewAll }: RecentPhotosPreviewPr
         </CardTitle>
       </CardHeader>
       <CardContent>
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3">
           {photos.map((photo) => (
             <div
               key={photo.id}
diff --git a/src/components/rides/RideHighlights.tsx b/src/components/rides/RideHighlights.tsx
index a1d1a3ac..dcc9c87e 100644
--- a/src/components/rides/RideHighlights.tsx
+++ b/src/components/rides/RideHighlights.tsx
@@ -62,7 +62,7 @@ export function RideHighlights({ ride }: RideHighlightsProps) {
         <CardTitle>Ride Highlights</CardTitle>
       </CardHeader>
       <CardContent>
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+        <div className="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-4 xl:grid-cols-4 gap-4 max-w-4xl mx-auto">
           {highlights.map((highlight, index) => (
             <div key={index} className="flex flex-col items-center text-center p-4 rounded-lg bg-accent/50">
               <div className="mb-2">{highlight.icon}</div>
diff --git a/src/components/rides/SimilarRides.tsx b/src/components/rides/SimilarRides.tsx
index a1a04f8e..776fcb39 100644
--- a/src/components/rides/SimilarRides.tsx
+++ b/src/components/rides/SimilarRides.tsx
@@ -79,7 +79,7 @@ export function SimilarRides({ currentRideId, parkId, parkSlug, category }: Simi
         <CardTitle>Similar Rides You Might Enjoy</CardTitle>
       </CardHeader>
       <CardContent>
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
           {rides.map((ride) => (
             <RideCard 
               key={ride.id} 
diff --git a/src/components/rides/TechnicalSpecifications.tsx b/src/components/rides/TechnicalSpecifications.tsx
index 860806bb..18cd3279 100644
--- a/src/components/rides/TechnicalSpecifications.tsx
+++ b/src/components/rides/TechnicalSpecifications.tsx
@@ -71,7 +71,7 @@ export const TechnicalSpecifications = ({ specifications }: TechnicalSpecificati
               <h3 className="text-sm font-semibold mb-3 text-muted-foreground uppercase tracking-wide">
                 {category}
               </h3>
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+              <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-3">
                 {specs
                   .sort((a, b) => a.display_order - b.display_order)
                   .map((spec) => (
diff --git a/src/pages/DesignerDetail.tsx b/src/pages/DesignerDetail.tsx
index 4ca2cda7..15474cbd 100644
--- a/src/pages/DesignerDetail.tsx
+++ b/src/pages/DesignerDetail.tsx
@@ -200,7 +200,7 @@ export default function DesignerDetail() {
         </div>
 
         {/* Company Info */}
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mb-8 max-w-5xl mx-auto">
           {designer.founded_year && (
             <Card>
               <CardContent className="p-4 text-center">
diff --git a/src/pages/ManufacturerDetail.tsx b/src/pages/ManufacturerDetail.tsx
index 35b0dd12..25adbdce 100644
--- a/src/pages/ManufacturerDetail.tsx
+++ b/src/pages/ManufacturerDetail.tsx
@@ -202,7 +202,7 @@ export default function ManufacturerDetail() {
         </div>
 
         {/* Company Info */}
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mb-8 max-w-5xl mx-auto">
           {manufacturer.founded_year && (
             <Card>
               <CardContent className="p-3 md:p-4 text-center">
diff --git a/src/pages/OperatorDetail.tsx b/src/pages/OperatorDetail.tsx
index c9983ae8..f4bb34c9 100644
--- a/src/pages/OperatorDetail.tsx
+++ b/src/pages/OperatorDetail.tsx
@@ -229,7 +229,7 @@ export default function OperatorDetail() {
         </div>
 
         {/* Company Info */}
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mb-8 max-w-5xl mx-auto">
           {operator.founded_year && (
             <Card>
               <CardContent className="p-4 text-center">
@@ -292,13 +292,13 @@ export default function OperatorDetail() {
                 </div>
                 
                 {parksLoading ? (
-                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 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">
                     {[1, 2, 3].map((i) => (
                       <div key={i} className="h-64 bg-muted rounded-lg animate-pulse" />
                     ))}
                   </div>
                 ) : parks.length > 0 ? (
-                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 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">
                     {parks.map((park) => (
                       <ParkCard key={park.id} park={park} />
                     ))}
diff --git a/src/pages/ParkDetail.tsx b/src/pages/ParkDetail.tsx
index 24c06755..c54e0cd0 100644
--- a/src/pages/ParkDetail.tsx
+++ b/src/pages/ParkDetail.tsx
@@ -282,11 +282,11 @@ export default function ParkDetail() {
         </div>
 
         {/* Quick Stats */}
-        <div className="relative mb-12">
+        <div className="relative mb-12 max-w-7xl mx-auto">
           {/* Background decorative elements */}
           <div className="absolute inset-0 bg-gradient-to-r from-primary/5 via-secondary/5 to-accent/5 rounded-3xl blur-xl"></div>
           
-          <div className="relative grid grid-cols-2 md:grid-cols-4 gap-4 p-4 bg-gradient-to-br from-background/80 via-card/90 to-background/80 backdrop-blur-sm rounded-xl border border-border/50 shadow-md">
+          <div className="relative grid grid-cols-2 sm:grid-cols-2 md:grid-cols-4 gap-4 p-4 bg-gradient-to-br from-background/80 via-card/90 to-background/80 backdrop-blur-sm rounded-xl border border-border/50 shadow-md">
             {/* Total Rides */}
             <div className="group relative overflow-hidden">
               <Card className="h-full border-0 bg-gradient-to-br from-primary/10 via-primary/5 to-transparent hover:shadow-lg hover:shadow-primary/15 transition-all duration-300 hover:scale-[1.02]">
@@ -388,8 +388,8 @@ export default function ParkDetail() {
                     <CardTitle>Featured Rides</CardTitle>
                   </CardHeader>
                   <CardContent>
-                    <div className="grid sm:grid-cols-2 gap-4">
-                      {rides.slice(0, 4).map(ride => (
+                    <div className="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+                      {rides.slice(0, 6).map(ride => (
                         <RideCard 
                           key={ride.id} 
                           ride={ride} 
@@ -399,7 +399,7 @@ export default function ParkDetail() {
                         />
                       ))}
                     </div>
-                    {rides.length > 4 && (
+                    {rides.length > 6 && (
                       <div className="mt-4 text-center">
                         <Button 
                           variant="outline" 
diff --git a/src/pages/PropertyOwnerDetail.tsx b/src/pages/PropertyOwnerDetail.tsx
index 3a8e860e..050e0537 100644
--- a/src/pages/PropertyOwnerDetail.tsx
+++ b/src/pages/PropertyOwnerDetail.tsx
@@ -229,7 +229,7 @@ export default function PropertyOwnerDetail() {
         </div>
 
         {/* Company Info */}
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mb-8 max-w-5xl mx-auto">
           {owner.founded_year && (
             <Card>
               <CardContent className="p-4 text-center">
@@ -292,13 +292,13 @@ export default function PropertyOwnerDetail() {
                 </div>
                 
                 {parksLoading ? (
-                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 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">
                     {[1, 2, 3].map((i) => (
                       <div key={i} className="h-64 bg-muted rounded-lg animate-pulse" />
                     ))}
                   </div>
                 ) : parks.length > 0 ? (
-                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 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">
                     {parks.map((park) => (
                       <ParkCard key={park.id} park={park} />
                     ))}
diff --git a/src/pages/RideDetail.tsx b/src/pages/RideDetail.tsx
index 16d67a82..f17d04b1 100644
--- a/src/pages/RideDetail.tsx
+++ b/src/pages/RideDetail.tsx
@@ -290,7 +290,8 @@ export default function RideDetail() {
         </div>
 
         {/* Quick Stats */}
-        <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 mb-8">
+        <div className="max-w-7xl mx-auto mb-8">
+          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4">
           {ride.max_speed_kmh && (
             <Card>
               <CardContent className="p-4 text-center">
@@ -378,6 +379,7 @@ export default function RideDetail() {
             </Card>
           )}
         </div>
+        </div>
 
 
         {/* Main Content */}
@@ -391,8 +393,8 @@ export default function RideDetail() {
           </TabsList>
 
           <TabsContent value="overview" className="mt-6">
-            <div className="grid lg:grid-cols-3 gap-6">
-              <div className="lg:col-span-2 space-y-6">
+            <div className="grid lg:grid-cols-2 gap-6">
+              <div className="space-y-6">
                 {/* Description */}
                 {ride.description && (
                   <Card>