diff --git a/public/roasts.json b/public/roasts.json
new file mode 100644
index 0000000..812a388
--- /dev/null
+++ b/public/roasts.json
@@ -0,0 +1,4 @@
+[
+  { "image": "placeholder-1.jpg", "caption": "Thêm ảnh vào thư mục public/images/ nhé! 😄" },
+  { "image": "placeholder-2.jpg", "caption": "Chỉnh caption trong public/roasts.json" }
+]
diff --git a/src/components/RoastGallery.jsx b/src/components/RoastGallery.jsx
new file mode 100644
index 0000000..9905f7f
--- /dev/null
+++ b/src/components/RoastGallery.jsx
@@ -0,0 +1,30 @@
+import { useState, useEffect } from 'react'
+import RoastCard from './RoastCard'
+
+export default function RoastGallery() {
+  const [roasts, setRoasts] = useState([])
+
+  useEffect(() => {
+    fetch('/roasts.json')
+      .then((res) => res.json())
+      .then((data) => setRoasts(data))
+      .catch((err) => console.error('Failed to load roasts:', err))
+  }, [])
+
+  return (
+    <section className="max-w-7xl mx-auto px-4 py-12">
+      <h2 className="text-3xl font-bold text-center mb-8 text-gray-800">
+        📸 Bộ Sưu Tập "Huyền Thoại"
+      </h2>
+      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6">
+        {roasts.map((roast, index) => (
+          <RoastCard
+            key={index}
+            image={roast.image}
+            caption={roast.caption}
+          />
+        ))}
+      </div>
+    </section>
+  )
+}