diff --git a/src/components/RoastCard.jsx b/src/components/RoastCard.jsx
new file mode 100644
index 0000000..3900873
--- /dev/null
+++ b/src/components/RoastCard.jsx
@@ -0,0 +1,18 @@
+export default function RoastCard({ image, caption }) {
+  return (
+    <div className="group relative overflow-hidden rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 hover:scale-105 bg-white">
+      <div className="aspect-square overflow-hidden">
+        <img
+          src={`/images/${image}`}
+          alt={caption}
+          className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
+        />
+      </div>
+      <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-4">
+        <p className="text-white text-sm md:text-base font-medium text-center">
+          {caption}
+        </p>
+      </div>
+    </div>
+  )
+}