diff --git a/index.html b/index.html
index b7ab814..4928ccd 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" class="bg-slate-50">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
diff --git a/src/components/podcast-preview-card.tsx b/src/components/podcast-preview-card.tsx
index 9b69dbc..1e2929a 100644
--- a/src/components/podcast-preview-card.tsx
+++ b/src/components/podcast-preview-card.tsx
@@ -14,10 +14,26 @@ export function PodcastPreviewCard({
   detailUrl,
 }: Props) {
   return (
-    <Link to={detailUrl}>
-      <img src={imageUrl} alt={title} />
-      <h3>{title}</h3>
-      <h4>{author}</h4>
+    <Link to={detailUrl} className={"w-full"}>
+      <div className={"relative mt-12 p-3 pt-12 shadow-md"}>
+        <img
+          src={imageUrl}
+          alt={title}
+          className={
+            "absolute -top-12 left-2/4  h-24 w-24 -translate-x-1/2 rounded-full object-cover"
+          }
+        />
+        <h3
+          className={
+            "text-md mt-2 text-center font-semibold uppercase tracking-tight"
+          }
+        >
+          {title}
+        </h3>
+        <h4 className={"mt-2 text-center text-sm text-slate-500"}>
+          Author: {author}
+        </h4>
+      </div>
     </Link>
   );
 }
diff --git a/src/pages/home.tsx b/src/pages/home.tsx
index c63f307..2a0e923 100644
--- a/src/pages/home.tsx
+++ b/src/pages/home.tsx
@@ -1,5 +1,6 @@
-import { PodcastPreviewCard } from "../components/podcast-preview-card";
 import { useState } from "react";
+
+import { PodcastPreviewCard } from "../components/podcast-preview-card";
 import { useTopPodcastsQuery } from "../services/podcasts/podcast.hooks";
 
 export function Home() {
@@ -18,14 +19,24 @@ export function Home() {
   }
 
   return (
-    <main>
-      <input
-        type="text"
-        value={search}
-        onChange={(e) => setSearch(e.target.value)}
-        placeholder="Search..."
-      />
-      <div className={"grid grid-cols-4"}>
+    <div>
+      <div className={"mb-6 flex items-center justify-end gap-3"}>
+        <span
+          className={
+            "flex items-center rounded-xl bg-sky-800 px-2 py-1.5 font-bold leading-none text-white"
+          }
+        >
+          {filteredData?.length}
+        </span>
+        <input
+          type="text"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder="Filter podcasts..."
+          className={"w-1/3 rounded-md border border-gray-300 p-2"}
+        />
+      </div>
+      <div className={"grid grid-cols-4 gap-x-6 gap-y-14"}>
         {filteredData?.map((podcast) => (
           <PodcastPreviewCard
             detailUrl={`/podcast/${podcast.id}`}
@@ -36,6 +47,6 @@ export function Home() {
           />
         ))}
       </div>
-    </main>
+    </div>
   );
 }
