diff --git a/src/components/rides/RideCard.tsx b/src/components/rides/RideCard.tsx
index 05684bcc..a8f1fe83 100644
--- a/src/components/rides/RideCard.tsx
+++ b/src/components/rides/RideCard.tsx
@@ -1,7 +1,7 @@
 import { useNavigate } from 'react-router-dom';
 import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
-import { Star, MapPin, Clock, Zap, FerrisWheel, Waves, Theater, Train } from 'lucide-react';
+import { Star, MapPin, Clock, Zap, FerrisWheel, Waves, Theater, Train, ArrowUp, CheckCircle, Calendar, Hammer, XCircle } from 'lucide-react';
 import { MeasurementDisplay } from '@/components/ui/measurement-display';
 import { Ride } from '@/types/database';
 import { getCloudflareImageUrl } from '@/lib/cloudflareImageUtils';
@@ -42,6 +42,15 @@ export function RideCard({ ride, showParkName = true, className, parkSlug }: Rid
     }
   };
 
+  const getStatusIcon = (status: string) => {
+    switch (status) {
+      case 'operating': return <CheckCircle className="w-3 h-3" />;
+      case 'seasonal': return <Calendar className="w-3 h-3" />;
+      case 'under_construction': return <Hammer className="w-3 h-3" />;
+      default: return <XCircle className="w-3 h-3" />;
+    }
+  };
+
   const formatCategory = (category: string) => {
     return category.split('_').map(word => 
       word.charAt(0).toUpperCase() + word.slice(1)
@@ -50,7 +59,7 @@ export function RideCard({ ride, showParkName = true, className, parkSlug }: Rid
 
   return (
     <Card 
-      className={`group overflow-hidden border-border/50 bg-gradient-to-br from-card via-card to-card/80 hover:shadow-2xl hover:shadow-primary/20 transition-all duration-300 cursor-pointer hover:scale-[1.02] ${className}`}
+      className={`group overflow-hidden border-border/50 bg-gradient-to-br from-card via-card to-card/80 hover:shadow-2xl hover:shadow-primary/20 hover:border-primary/30 transition-all duration-300 cursor-pointer hover:scale-[1.02] relative before:absolute before:inset-0 before:rounded-lg before:p-[1px] before:bg-gradient-to-br before:from-primary/20 before:via-transparent before:to-accent/20 before:-z-10 before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300 ${className}`}
       onClick={handleRideClick}
     >
       <div className="relative overflow-hidden">
@@ -69,26 +78,32 @@ export function RideCard({ ride, showParkName = true, className, parkSlug }: Rid
               loading="lazy"
             />
           ) : (
-            <div className="flex items-center justify-center w-12 h-12 text-muted-foreground/30">
-              {getRideIcon(ride.category)}
+            <div className="flex items-center justify-center w-20 h-20">
+              <div className="relative">
+                <div className="absolute inset-0 rounded-full bg-primary/20 blur-xl animate-pulse" />
+                <div className="relative w-12 h-12 rounded-full bg-gradient-to-br from-primary/30 to-secondary/30 flex items-center justify-center border border-primary/20">
+                  {getRideIcon(ride.category)}
+                </div>
+              </div>
             </div>
           )}
           
           {/* Gradient Overlay */}
-          <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
+          <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent opacity-80 group-hover:opacity-60 transition-opacity duration-300" />
           
           {/* Status Badge */}
           <Badge 
-            className={`absolute top-3 right-3 ${getStatusColor(ride.status)} border`}
+            className={`absolute top-3 right-3 ${getStatusColor(ride.status)} backdrop-blur-sm border shadow-lg font-medium text-xs px-2.5 py-1 inline-flex items-center gap-1.5`}
           >
-            {ride.status.replace('_', ' ').toUpperCase()}
+            {getStatusIcon(ride.status)}
+            <span>{ride.status.replace('_', ' ').toUpperCase()}</span>
           </Badge>
         </div>
 
-        <CardContent className="p-3 space-y-2">
+        <CardContent className="p-3 space-y-2 border-t border-border/30">
           {/* Header */}
           <div className="space-y-1">
-            <h3 className="font-bold text-base group-hover:text-primary transition-colors line-clamp-2">
+            <h3 className="font-bold text-base group-hover:text-primary transition-colors line-clamp-2 group-hover:drop-shadow-[0_0_8px_rgba(var(--primary),0.5)] transition-all duration-300">
               {ride.name}
             </h3>
             
@@ -105,43 +120,57 @@ export function RideCard({ ride, showParkName = true, className, parkSlug }: Rid
           </div>
 
           {/* Category Badge */}
-          <Badge variant="outline" className="text-xs">
-            {formatCategory(ride.category)}
-          </Badge>
+          <div className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-background/60 backdrop-blur-sm border border-border/40 text-xs font-medium shadow-sm">
+            <div className="w-4 h-4 text-primary/80">
+              {getRideIcon(ride.category)}
+            </div>
+            <span className="text-muted-foreground">
+              {formatCategory(ride.category)}
+            </span>
+          </div>
 
           {/* Stats */}
           <div className="flex items-center justify-between text-sm">
             <div className="flex items-center gap-4">
               {Number(ride.max_speed_kmh) > 0 && (
-                <div className="flex items-center gap-1">
-                  <Zap className="w-3 h-3 text-primary" />
-                  <span className="text-primary font-medium">
+                <div className="flex items-center gap-1.5">
+                  <div className="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center">
+                    <Zap className="w-3.5 h-3.5 text-primary" />
+                  </div>
+                  <span className="text-primary font-semibold">
                     <MeasurementDisplay value={ride.max_speed_kmh} type="speed" />
                   </span>
                 </div>
               )}
               {Number(ride.max_height_meters) > 0 && (
-                <div className="flex items-center gap-1">
-                  <span className="text-accent font-medium">
+                <div className="flex items-center gap-1.5">
+                  <div className="w-6 h-6 rounded-full bg-accent/10 flex items-center justify-center">
+                    <ArrowUp className="w-3.5 h-3.5 text-accent" />
+                  </div>
+                  <span className="text-accent font-semibold">
                     <MeasurementDisplay value={ride.max_height_meters} type="distance" />
                   </span>
                 </div>
               )}
               {Number(ride.duration_seconds) > 0 && (
-                <div className="flex items-center gap-1">
-                  <Clock className="w-3 h-3 text-secondary" />
-                  <span className="text-secondary font-medium">{Math.floor(ride.duration_seconds / 60)}</span>
-                  <span className="text-muted-foreground text-xs">min</span>
+                <div className="flex items-center gap-1.5">
+                  <div className="w-6 h-6 rounded-full bg-secondary/10 flex items-center justify-center">
+                    <Clock className="w-3.5 h-3.5 text-secondary" />
+                  </div>
+                  <span className="text-secondary font-semibold">{Math.floor(ride.duration_seconds / 60)}</span>
+                  <span className="text-muted-foreground text-xs font-normal">min</span>
                 </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 font-medium">{ride.average_rating.toFixed(1)}</span>
+              <div className="flex items-center gap-1.5 px-2 py-1 rounded-full bg-yellow-500/10 border border-yellow-500/20">
+                <div className="w-5 h-5 rounded-full bg-gradient-to-br from-yellow-400 to-yellow-500 flex items-center justify-center shadow-sm">
+                  <Star className="w-3 h-3 fill-white text-white" />
+                </div>
+                <span className="text-sm font-semibold text-foreground">{ride.average_rating.toFixed(1)}</span>
                 {ride.review_count > 0 && (
-                  <span className="text-xs text-muted-foreground">({ride.review_count})</span>
+                  <span className="text-xs text-muted-foreground font-normal">({ride.review_count})</span>
                 )}
               </div>
             )}