diff --git a/js/main.js b/js/main.js
index 02d6c4f28ff5303e44c16e8fcecb4bcee715b9d0..e2f6f48116ef37f749d6e3d3e75c7372b6973456 100644
--- a/js/main.js
+++ b/js/main.js
@@ -27,22 +27,39 @@ const data = [
 
 class Component {
 	tag;
+	attribute;
 	children;
 
-	constructor(tag, children) {
+	constructor(tag, attribute, children) {
 		this.tag = tag;
+		this.attribute = attribute;
 		this.children = children;
 	}
 
 	render() {
-		return `<${this.tag} ${
+		return `<${this.tag} ${this.renderAttributes()} ${
 			this.children ? `>${this.children}</${this.tag}>` : ' />'
 		}`;
 	}
+
+	renderAttributes() {
+		if (this.attribute) {
+			return `${this.attribute.name}="${this.attribute.value}"`;
+		}
+		return '';
+	}
+}
+
+class Img extends Component {
+	constructor(url) {
+		super('img', { name: 'src', value: url });
+	}
 }
 
-const title = new Component('h1', 'La carte');
+const title = new Component('h1', null, 'La carte');
 document.querySelector('.pageTitle').innerHTML = title.render();
 
-const img = new Component('img');
+const img = new Img(
+	'https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300'
+);
 document.querySelector('.pizzasContainer').innerHTML = img.render();