diff --git a/src/pages/ParkDetail.tsx b/src/pages/ParkDetail.tsx
index 7aaa368a..3782670a 100644
--- a/src/pages/ParkDetail.tsx
+++ b/src/pages/ParkDetail.tsx
@@ -372,42 +372,103 @@ export default function ParkDetail() {
           </TabsContent>
 
           <TabsContent value="rides" className="mt-6">
-            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
-              {rides.map(ride => <Card key={ride.id} className="hover:shadow-lg transition-shadow cursor-pointer" onClick={() => navigate(`/parks/${park.slug}/rides/${ride.slug}`)}>
-                  <CardContent className="p-4">
-                    <div className="flex items-start gap-3 mb-3">
-                      <div className="flex items-center">{getRideIcon(ride.category)}</div>
-                      <div className="flex-1">
-                        <h3 className="font-medium">{ride.name}</h3>
-                        <p className="text-sm text-muted-foreground">
-                          {ride.category.replace('_', ' ')}
-                        </p>
+            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+              {rides.map(ride => (
+                <Card 
+                  key={ride.id} 
+                  className="group overflow-hidden hover:shadow-xl transition-all duration-300 cursor-pointer border-0 bg-gradient-to-br from-card via-card/95 to-card/90 backdrop-blur-sm"
+                  onClick={() => navigate(`/parks/${park.slug}/rides/${ride.slug}`)}
+                >
+                  <div className="aspect-[4/3] bg-gradient-to-br from-primary/20 via-secondary/15 to-accent/10 relative overflow-hidden">
+                    {ride.image_url ? (
+                      <img 
+                        src={ride.image_url} 
+                        alt={ride.name}
+                        className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+                      />
+                    ) : (
+                      <div className="flex items-center justify-center h-full">
+                        <div className="opacity-40 group-hover:opacity-60 transition-opacity">
+                          {getRideIcon(ride.category)}
+                        </div>
                       </div>
-                      {ride.average_rating > 0 && <div className="flex items-center gap-1">
-                          <Star className="w-3 h-3 fill-yellow-400 text-yellow-400" />
-                          <span className="text-sm">{ride.average_rating.toFixed(1)}</span>
-                        </div>}
-                    </div>
+                    )}
                     
-                    {ride.description && <p className="text-sm text-muted-foreground line-clamp-2 mb-3">
-                        {ride.description}
-                      </p>}
-
-                    <div className="flex items-center justify-between text-xs">
-                      <div className="flex items-center gap-2">
-                        {ride.max_speed_kmh && <span className="bg-primary/10 text-primary px-2 py-1 rounded">
-                            <MeasurementDisplay value={ride.max_speed_kmh} type="speed" />
-                          </span>}
-                        {ride.max_height_meters && <span className="bg-accent/10 text-accent px-2 py-1 rounded">
-                            <MeasurementDisplay value={ride.max_height_meters} type="distance" />
-                          </span>}
-                      </div>
-                      <Badge variant="outline" className="text-xs">
+                    {/* Status Badge */}
+                    <div className="absolute top-3 right-3">
+                      <Badge 
+                        variant="secondary" 
+                        className={`text-xs font-medium ${
+                          ride.status === 'operating' 
+                            ? 'bg-green-500/20 text-green-400 border-green-500/30' 
+                            : ride.status === 'closed' 
+                            ? 'bg-red-500/20 text-red-400 border-red-500/30'
+                            : 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30'
+                        }`}
+                      >
                         {ride.status}
                       </Badge>
                     </div>
+
+                    {/* Rating */}
+                    {ride.average_rating > 0 && (
+                      <div className="absolute bottom-3 right-3 bg-black/50 backdrop-blur-sm rounded-lg px-2 py-1">
+                        <div className="flex items-center gap-1">
+                          <Star className="w-3 h-3 fill-yellow-400 text-yellow-400" />
+                          <span className="text-white text-xs font-medium">
+                            {ride.average_rating.toFixed(1)}
+                          </span>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+
+                  <CardContent className="p-4">
+                    <div className="space-y-3">
+                      {/* Title and Category */}
+                      <div>
+                        <h3 className="font-semibold text-lg group-hover:text-primary transition-colors line-clamp-1">
+                          {ride.name}
+                        </h3>
+                        <div className="flex items-center gap-2 mt-1">
+                          <div className="opacity-60">
+                            {getRideIcon(ride.category)}
+                          </div>
+                          <p className="text-sm text-muted-foreground capitalize">
+                            {ride.category.replace('_', ' ')}
+                          </p>
+                        </div>
+                      </div>
+
+                      {/* Description */}
+                      {ride.description && (
+                        <p className="text-sm text-muted-foreground line-clamp-2 leading-relaxed">
+                          {ride.description}
+                        </p>
+                      )}
+
+                      {/* Stats */}
+                      <div className="flex items-center gap-2 flex-wrap">
+                        {ride.max_speed_kmh && (
+                          <span className="bg-primary/10 text-primary px-2 py-1 rounded-md text-xs font-medium">
+                            <MeasurementDisplay value={ride.max_speed_kmh} type="speed" />
+                          </span>
+                        )}
+                        {ride.max_height_meters && (
+                          <span className="bg-accent/10 text-accent px-2 py-1 rounded-md text-xs font-medium">
+                            <MeasurementDisplay value={ride.max_height_meters} type="distance" />
+                          </span>
+                        )}
+                        {ride.inversions > 0 && (
+                          <span className="bg-secondary/10 text-secondary px-2 py-1 rounded-md text-xs font-medium">
+                            {ride.inversions} inversions
+                          </span>
+                        )}
+                      </div>
+                    </div>
                   </CardContent>
-                </Card>)}
+                </Card>
+              ))}
             </div>
           </TabsContent>