diff --git a/src/components/podcast-preview-card.tsx b/src/components/podcast-preview-card.tsx
index 6de66fa..9b69dbc 100644
--- a/src/components/podcast-preview-card.tsx
+++ b/src/components/podcast-preview-card.tsx
@@ -1,15 +1,23 @@
+import { Link } from "react-router-dom";
+
 type Props = {
   title: string;
   author: string;
   imageUrl: string;
+  detailUrl: string;
 };
 
-export function PodcastPreviewCard({ title, author, imageUrl }: Props) {
+export function PodcastPreviewCard({
+  title,
+  author,
+  imageUrl,
+  detailUrl,
+}: Props) {
   return (
-    <div>
+    <Link to={detailUrl}>
       <img src={imageUrl} alt={title} />
       <h3>{title}</h3>
       <h4>{author}</h4>
-    </div>
+    </Link>
   );
 }
diff --git a/src/pages/home.tsx b/src/pages/home.tsx
index e5b4f5f..9ebc524 100644
--- a/src/pages/home.tsx
+++ b/src/pages/home.tsx
@@ -10,6 +10,7 @@ export function Home() {
       <div className={"grid grid-cols-4"}>
         {data?.map((podcast) => (
           <PodcastPreviewCard
+            detailUrl={`/podcast/${podcast.id}`}
             key={podcast.id}
             title={podcast.title}
             author={podcast.author}