diff --git a/src/components/homepage/ContentTabs.tsx b/src/components/homepage/ContentTabs.tsx
index f3be7137..4124a1d1 100644
--- a/src/components/homepage/ContentTabs.tsx
+++ b/src/components/homepage/ContentTabs.tsx
@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { ParkCard } from '@/components/parks/ParkCard';
 import { Card, CardContent } from '@/components/ui/card';
@@ -10,6 +11,7 @@ import { Park, Ride } from '@/types/database';
 import { supabase } from '@/integrations/supabase/client';
 
 export function ContentTabs() {
+  const navigate = useNavigate();
   const [popularParks, setPopularParks] = useState<Park[]>([]);
   const [trendingParks, setTrendingParks] = useState<Park[]>([]);
   const [popularRides, setPopularRides] = useState<Ride[]>([]);
@@ -109,6 +111,7 @@ export function ContentTabs() {
   const RideCard = ({ ride }: { ride: Ride }) => (
     <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]"
+      onClick={() => navigate(`/parks/${ride.park?.slug}/rides/${ride.slug}`)}
     >
       <div className="relative overflow-hidden">
         {/* Image/Icon Section */}
@@ -266,7 +269,7 @@ export function ContentTabs() {
             </div>
             <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 gap-6">
               {popularParks.map((park) => (
-                <ParkCard key={park.id} park={park} />
+                <ParkCard key={park.id} park={park} onClick={() => navigate(`/parks/${park.slug}`)} />
               ))}
             </div>
           </TabsContent>
@@ -278,7 +281,7 @@ export function ContentTabs() {
             </div>
             <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 gap-6">
               {trendingParks.map((park) => (
-                <ParkCard key={park.id} park={park} />
+                <ParkCard key={park.id} park={park} onClick={() => navigate(`/parks/${park.slug}`)} />
               ))}
             </div>
           </TabsContent>
@@ -314,7 +317,7 @@ export function ContentTabs() {
             </div>
             <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 gap-6">
               {recentParks.map((park) => (
-                <ParkCard key={park.id} park={park} />
+                <ParkCard key={park.id} park={park} onClick={() => navigate(`/parks/${park.slug}`)} />
               ))}
             </div>
           </TabsContent>