diff --git a/js/components/PizzaThumbnail.js b/js/components/PizzaThumbnail.js
new file mode 100644
index 0000000000000000000000000000000000000000..4e831447199b3ba35c72467ef7565a38746714de
--- /dev/null
+++ b/js/components/PizzaThumbnail.js
@@ -0,0 +1,27 @@
+import Component from './Component.js';
+import Img from './Img.js';
+
+export default class PizzaThumbnail extends Component {
+	constructor({ nom, image, prix_petite, prix_grande }) {
+		super('article', { name: 'class', value: 'media' }, [
+			new Component('a', { name: 'href', value: image }, [
+				new Img(image),
+				new Component('section', { name: 'class', value: 'infos' }, [
+					new Component('h4', null, nom),
+					new Component('ul', null, [
+						new Component(
+							'li',
+							null,
+							`Prix petit format : ${prix_petite.toFixed(2)} €`
+						),
+						new Component(
+							'li',
+							null,
+							`Prix grand format : ${prix_grande.toFixed(2)} €`
+						),
+					]),
+				]),
+			]),
+		]);
+	}
+}
diff --git a/js/main.js b/js/main.js
index 1b18a504df34a19be51606c6c644a0f41ad27a62..4fa116eeb468d51727d0365cac6ba249960e3451 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,14 +1,9 @@
 import data from './data.js';
 import Component from './components/Component.js';
-import Img from './components/Img.js';
+import PizzaThumbnail from './components/PizzaThumbnail.js';
 
 const title = new Component('h1', null, ['La', ' ', 'carte']);
 document.querySelector('.pageTitle').innerHTML = title.render();
 
-const c = new Component('article', { name: 'class', value: 'media' }, [
-	new Img(
-		'https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300'
-	),
-	'Regina',
-]);
-document.querySelector('.pizzasContainer').innerHTML = c.render();
+const pt = new PizzaThumbnail(data[0]);
+document.querySelector('.pizzasContainer').innerHTML = pt.render();