diff --git a/src/components/podcast-preview-card.tsx b/src/components/podcast-preview-card.tsx
new file mode 100644
index 0000000..6de66fa
--- /dev/null
+++ b/src/components/podcast-preview-card.tsx
@@ -0,0 +1,15 @@
+type Props = {
+  title: string;
+  author: string;
+  imageUrl: string;
+};
+
+export function PodcastPreviewCard({ title, author, imageUrl }: Props) {
+  return (
+    <div>
+      <img src={imageUrl} alt={title} />
+      <h3>{title}</h3>
+      <h4>{author}</h4>
+    </div>
+  );
+}
diff --git a/src/pages/home.tsx b/src/pages/home.tsx
index 51250d9..3e775c0 100644
--- a/src/pages/home.tsx
+++ b/src/pages/home.tsx
@@ -1,3 +1,30 @@
+import { PodcastPreviewCard } from "../components/podcast-preview-card";
+
 export function Home() {
-  return <h1>Home page</h1>;
+  return (
+    <main>
+      <div className={"grid grid-cols-4"}>
+        {podcasts.map((podcast) => (
+          <PodcastPreviewCard
+            title={podcast.title}
+            author={podcast.author}
+            imageUrl={podcast.imageSrc}
+          />
+        ))}
+      </div>
+    </main>
+  );
 }
+
+const podcasts = [
+  {
+    imageSrc: "https://picsum.photos/200/200",
+    title: "Podcast 1",
+    author: "Author 1",
+  },
+  {
+    imageSrc: "https://picsum.photos/200/200",
+    title: "Podcast 2",
+    author: "Author 2",
+  },
+];