diff --git a/src/components/explore/ExploreCard.tsx b/src/components/explore/ExploreCard.tsx
index 4e7305d..df5ed2e 100644
--- a/src/components/explore/ExploreCard.tsx
+++ b/src/components/explore/ExploreCard.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Link from "next/link";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
 import { FollowButton } from "@/components/social/FollowButton";
@@ -27,16 +28,18 @@ export function ExploreCard({ pet, activePetId }: ExploreCardProps) {
 
   return (
     <div className="flex flex-col items-center gap-2 p-3 rounded-xl border bg-card hover:bg-muted/50 transition-colors">
-      <Avatar className="w-14 h-14">
-        {avatarUrl && <AvatarImage src={avatarUrl} alt={pet.name} />}
-        <AvatarFallback className="text-sm bg-muted">
-          {pet.name[0]?.toUpperCase() ?? "?"}
-        </AvatarFallback>
-      </Avatar>
+      <Link href={`/pets/${pet.id}`} className="flex flex-col items-center gap-2 w-full">
+        <Avatar className="w-14 h-14">
+          {avatarUrl && <AvatarImage src={avatarUrl} alt={pet.name} />}
+          <AvatarFallback className="text-sm bg-muted">
+            {pet.name[0]?.toUpperCase() ?? "?"}
+          </AvatarFallback>
+        </Avatar>
 
-      <p className="text-sm font-medium text-center truncate max-w-full">
-        {pet.name}
-      </p>
+        <p className="text-sm font-medium text-center truncate max-w-full">
+          {pet.name}
+        </p>
+      </Link>
 
       <Badge variant="secondary" className="text-xs">
         {labelName}