diff --git a/static/css/tailwind.css b/static/css/tailwind.css
index 01630272..148cd1b0 100644
--- a/static/css/tailwind.css
+++ b/static/css/tailwind.css
@@ -437,9 +437,6 @@
   .bottom-0 {
     bottom: calc(var(--spacing) * 0);
   }
-  .bottom-3 {
-    bottom: calc(var(--spacing) * 3);
-  }
   .bottom-4 {
     bottom: calc(var(--spacing) * 4);
   }
@@ -653,12 +650,6 @@
   .ml-auto {
     margin-left: auto;
   }
-  .line-clamp-1 {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 1;
-  }
   .line-clamp-2 {
     overflow: hidden;
     display: -webkit-box;
@@ -1625,13 +1616,6 @@
     --tw-gradient-position: to top in oklab;
     background-image: linear-gradient(var(--tw-gradient-stops));
   }
-  .from-black\/60 {
-    --tw-gradient-from: color-mix(in srgb, #000 60%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-gradient-from: color-mix(in oklab, var(--color-black) 60%, transparent);
-    }
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
   .from-black\/70 {
     --tw-gradient-from: color-mix(in srgb, #000 70%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1678,13 +1662,6 @@
     --tw-gradient-from: var(--color-red-500);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
-  .from-secondary\/20 {
-    --tw-gradient-from: color-mix(in srgb, #e11d48 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-gradient-from: color-mix(in oklab, var(--color-secondary) 20%, transparent);
-    }
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
   .from-slate-50 {
     --tw-gradient-from: var(--color-slate-50);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -1703,23 +1680,11 @@
     --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
     --tw-gradient-stops: var(--tw-gradient-via-stops);
   }
-  .via-transparent {
-    --tw-gradient-via: transparent;
-    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
-    --tw-gradient-stops: var(--tw-gradient-via-stops);
-  }
   .via-white {
     --tw-gradient-via: var(--color-white);
     --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
     --tw-gradient-stops: var(--tw-gradient-via-stops);
   }
-  .to-accent\/20 {
-    --tw-gradient-to: color-mix(in srgb, #8b5cf6 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-gradient-to: color-mix(in oklab, var(--color-accent) 20%, transparent);
-    }
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
   .to-blue-50 {
     --tw-gradient-to: var(--color-blue-50);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -2410,13 +2375,6 @@
       }
     }
   }
-  .group-hover\:text-primary {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        color: var(--color-primary);
-      }
-    }
-  }
   .group-hover\:opacity-100 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
diff --git a/templates/partials/homepage/featured_rides.html b/templates/partials/homepage/featured_rides.html
index ea38de36..7235341e 100644
--- a/templates/partials/homepage/featured_rides.html
+++ b/templates/partials/homepage/featured_rides.html
@@ -1,122 +1,8 @@
+{% load cotton %}
+
 <!-- Featured Rides Grid -->
 {% for ride in featured_rides %}
-<div class="group relative overflow-hidden rounded-xl bg-background border border-border/50 shadow-sm hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1">
-    <!-- Ride Image -->
-    <div class="aspect-square relative overflow-hidden">
-        {% if ride.card_image %}
-            <img src="{{ ride.card_image.url }}" 
-                 alt="{{ ride.name }}" 
-                 class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
-                 loading="lazy">
-        {% else %}
-            <div class="w-full h-full bg-gradient-to-br from-secondary/20 to-accent/20 flex items-center justify-center">
-                <svg class="w-12 h-12 text-muted-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
-                </svg>
-            </div>
-        {% endif %}
-        
-        <!-- Overlay -->
-        <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
-        
-        <!-- Quick Stats Overlay -->
-        <div class="absolute top-3 right-3 flex flex-col gap-1">
-            {% if ride.average_rating %}
-                <div class="bg-background/90 backdrop-blur-sm px-2 py-1 rounded-full text-xs font-medium flex items-center gap-1">
-                    <svg class="w-3 h-3 text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
-                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
-                    </svg>
-                    {{ ride.average_rating|floatformat:1 }}
-                </div>
-            {% endif %}
-            
-            {% if ride.ride_type %}
-                <div class="bg-background/90 backdrop-blur-sm px-2 py-1 rounded-full text-xs font-medium">
-                    {{ ride.get_ride_type_display }}
-                </div>
-            {% endif %}
-        </div>
-        
-        <!-- Thrill Level Indicator -->
-        {% if ride.thrill_level %}
-            <div class="absolute bottom-3 left-3">
-                <div class="flex items-center gap-1 bg-background/90 backdrop-blur-sm px-2 py-1 rounded-full text-xs font-medium">
-                    {% if ride.thrill_level == 'family' %}
-                        <div class="w-2 h-2 rounded-full bg-green-500"></div>
-                        <span class="text-green-700 dark:text-green-400">Family</span>
-                    {% elif ride.thrill_level == 'moderate' %}
-                        <div class="w-2 h-2 rounded-full bg-yellow-500"></div>
-                        <span class="text-yellow-700 dark:text-yellow-400">Moderate</span>
-                    {% elif ride.thrill_level == 'extreme' %}
-                        <div class="w-2 h-2 rounded-full bg-red-500"></div>
-                        <span class="text-red-700 dark:text-red-400">Extreme</span>
-                    {% endif %}
-                </div>
-            </div>
-        {% endif %}
-    </div>
-    
-    <!-- Ride Info -->
-    <div class="p-4">
-        <h3 class="font-bold mb-1 group-hover:text-primary transition-colors line-clamp-1">
-            <a href="/rides/{{ ride.slug }}/" class="stretched-link">
-                {{ ride.name }}
-            </a>
-        </h3>
-        
-        <p class="text-sm text-muted-foreground mb-2 line-clamp-1">
-            <a href="/parks/{{ ride.park.slug }}/" class="hover:text-primary transition-colors">
-                {{ ride.park.name }}
-            </a>
-        </p>
-        
-        <!-- Ride Stats -->
-        <div class="flex items-center justify-between text-xs text-muted-foreground">
-            {% if ride.height_requirement %}
-                <div class="flex items-center gap-1">
-                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4V2a1 1 0 011-1h8a1 1 0 011 1v2m-9 0h10m-10 0a2 2 0 00-2 2v14a2 2 0 002 2h10a2 2 0 002-2V6a2 2 0 00-2-2"></path>
-                    </svg>
-                    {{ ride.height_requirement }}"
-                </div>
-            {% endif %}
-            
-            {% if ride.opening_year %}
-                <div class="flex items-center gap-1">
-                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
-                    </svg>
-                    {{ ride.opening_year }}
-                </div>
-            {% endif %}
-        </div>
-        
-        <!-- Roller Coaster Stats (if applicable) -->
-        {% if ride.roller_coaster_stats %}
-            <div class="mt-2 pt-2 border-t border-border/50">
-                <div class="grid grid-cols-2 gap-2 text-xs">
-                    {% if ride.roller_coaster_stats.max_height %}
-                        <div class="flex items-center gap-1 text-muted-foreground">
-                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11l5-5m0 0l5 5m-5-5v12"></path>
-                            </svg>
-                            {{ ride.roller_coaster_stats.max_height }}ft
-                        </div>
-                    {% endif %}
-                    
-                    {% if ride.roller_coaster_stats.max_speed %}
-                        <div class="flex items-center gap-1 text-muted-foreground">
-                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
-                            </svg>
-                            {{ ride.roller_coaster_stats.max_speed }}mph
-                        </div>
-                    {% endif %}
-                </div>
-            </div>
-        {% endif %}
-    </div>
-</div>
+    <c-ride_card ride=ride url_variant="global" class="h-full" />
 {% empty %}
 <div class="col-span-full text-center py-12">
     <svg class="w-16 h-16 text-muted-foreground mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">