diff --git a/data/courses.js b/data/courses.js
index 0d92fa9..e9b9768 100644
--- a/data/courses.js
+++ b/data/courses.js
@@ -1,7 +1,7 @@
-const COURSES = {
-  1: {id: 1, img: 'ux_ui.jpg', title: 'UX/UI', initial_price: 200, price: 9.99, mark: 4, stock: 10},
-  2: {id: 2, img: 'php_8.png', title: 'PHP 8', initial_price: 200, price: 9.99, mark: 3, stock: 10},
-  3: {id: 3, img: 'react_js.png', title: 'React JS', initial_price: 200, price: 9.99, mark: 2, stock: 5},
-  4: {id: 4, img: 'node_js.jpg', title: 'Node JS', initial_price: 200, price: 9.99, mark: 5, stock: 3},
-  5: {id: 5, img: 'my_sql.png', title: 'MySQL', initial_price: 200, price: 9.99, mark: 4, stock: 2}
-}
+const COURSES = [
+  {id: 1, img: 'ux_ui.jpg', title: 'UX/UI', initial_price: 200, price: 9.99, mark: 4, stock: 10},
+  {id: 2, img: 'php_8.png', title: 'PHP 8', initial_price: 200, price: 9.99, mark: 3, stock: 10},
+  {id: 3, img: 'react_js.png', title: 'React JS', initial_price: 200, price: 9.99, mark: 2, stock: 5},
+  {id: 4, img: 'node_js.jpg', title: 'Node JS', initial_price: 200, price: 9.99, mark: 5, stock: 3},
+  {id: 5, img: 'my_sql.png', title: 'MySQL', initial_price: 200, price: 9.99, mark: 4, stock: 2}
+]
diff --git a/index.html b/index.html
index 7edda34..771c8d3 100644
--- a/index.html
+++ b/index.html
@@ -1,167 +1,73 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
+  <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Cours en ligne</title>
     <link rel="stylesheet" href="css/styles.css">
     <link rel="stylesheet" href="css/skeleton.css">
-    <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans" rel="stylesheet">
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
-</head>
-<body>
-  <header id="header" class="header">
-    <div class="container">
-      <div class="row">
-        <div class="four columns logo">
-          <img src="img/coding_factory.jpg" id="logo">
-        </div>
-        <div class="two columns u-pull-right">
-          <ul>
-            <li class="submenu">
-              <img src="img/cart.png" id="img-cart">
-              <div id="cart">
-                <table id="cart-table" class="u-full-width">
-                  <thead>
-                    <tr>
-                      <th></th>
-                      <th>Article</th>
-                      <th>Prix</th>
-                      <th>Qté</th>
-                      <th></th>
-                    </tr>
-                  </thead>
-                  <tbody></tbody>
-                </table>
-                <a href="#" id="empty-cart" class="button u-full-width">Vider le panier</a>
-              </div>
-            </li>
-          </ul>
+    <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans"
+      rel="stylesheet">
+    <link rel="stylesheet"
+      href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+  </head>
+  <body>
+    <header id="header" class="header">
+      <div class="container">
+        <div class="row">
+          <div class="four columns logo">
+            <img src="img/coding_factory.jpg" id="logo">
+          </div>
+          <div class="two columns u-pull-right">
+            <ul>
+              <li class="submenu">
+                <img src="img/cart.png" id="img-cart">
+                <div id="cart">
+                  <table id="cart-table" class="u-full-width">
+                    <thead>
+                      <tr>
+                        <th></th>
+                        <th>Article</th>
+                        <th>Prix</th>
+                        <th>Qté</th>
+                        <th></th>
+                      </tr>
+                    </thead>
+                    <tbody></tbody>
+                  </table>
+                  <a href="#" id="empty-cart" class="button u-full-width">Vider
+                    le panier</a>
+                </div>
+              </li>
+            </ul>
+          </div>
         </div>
       </div>
-    </div>
-  </header>
+    </header>
 
-  <form id="search-item" class="search-form">
-    <input type="text" placeholder="Rechercher ...">
-  </form>
+    <form id="search-item" class="search-form">
+      <input type="text" onkeyup="search_cours()" placeholder="Rechercher ...">
+    </form>
 
-  <div id="courses-list">
+    <div id="courses-list">
 
-    <h1>Cours en ligne</h1>
-    <div class="courses__container"></div>
-    <div id="no_course" class="hidden">Aucun cours n'est disponible pour votre recherche</div>
-  </div>
-
-  <div class="courses__container">
-    <div class="course__item">
-      <figure class="course_img">
-        <img src="img/courses/ux_ui.jpg">
-      </figure>
-      <div class="info__card">
-        <h4>UX/UI</h4>
-        <figure class="mark m_4">
-          <img src="img/rates.png">
-        </figure>
-        <p>
-          <span class="price">200 €</span>
-          <span class="discount">9.99 €</span>
-        </p>
-        <p>
-          Disponible: <span class="stock">10</span>
-        </p>
-        <a href="#" class="add-to-cart" data-id="1"><i class="fa fa-cart-plus"></i>Ajouter au panier</a>
-      </div>
+      <h1>Cours en ligne</h1>
+      <div class="courses__container"></div>
+      <div id="no_course" class="hidden">Aucun cours n'est disponible pour votre
+        recherche</div>
     </div>
 
-    <div class="course__item">
-      <figure class="course_img">
-        <img src="img/courses/php_8.png">
-      </figure>
-      <div class="info__card">
-        <h4>PHP 8</h4>
-        <figure class="mark m_3">
-          <img src="img/rates.png">
-        </figure>
-        <p>
-          <span class="price">200 €</span>
-          <span class="discount">9.99 €</span>
-        </p>
-        <p>
-          Disponible: <span class="stock">10</span>
-        </p>
-        <a href="#" class="add-to-cart" data-id="2"><i class="fa fa-cart-plus"></i>Ajouter au panier</a>
-      </div>
-    </div>
+    <div class="courses__container">
 
-    <div class="course__item">
-      <figure class="course_img">
-        <img src="img/courses/react_js.png">
-      </figure>
-      <div class="info__card">
-        <h4>React JS</h4>
-        <figure class="mark m_2">
-          <img src="img/rates.png">
-        </figure>
-        <p>
-          <span class="price">200 €</span>
-          <span class="discount">9.99 €</span>
-        </p>
-        <p>
-          Disponible: <span class="stock">5</span>
-        </p>
-        <a href="#" class="add-to-cart" data-id="3"><i class="fa fa-cart-plus"></i>Ajouter au panier</a>
-      </div>
-    </div>
-
-    <div class="course__item">
-      <figure class="course_img">
-        <img src="img/courses/node_js.jpg">
-      </figure>
-      <div class="info__card">
-        <h4>Node JS</h4>
-        <figure class="mark m_5">
-          <img src="img/rates.png">
-        </figure>
-        <p>
-          <span class="price">200 €</span>
-          <span class="discount">9.99 €</span>
-        </p>
-        <p>
-          Disponible: <span class="stock">3</span>
-        </p>
-        <a href="#" class="add-to-cart" data-id="4"><i class="fa fa-cart-plus"></i>Ajouter au panier</a>
-      </div>
-    </div>
-
-    <div class="course__item">
-      <figure class="course_img">
-        <img src="img/courses/my_sql.png">
-      </figure>
-      <div class="info__card">
-        <h4>MySQL</h4>
-        <figure class="mark m_4">
-          <img src="img/rates.png">
-        </figure>
-        <p>
-          <span class="price">200 €</span>
-          <span class="discount">9.99 €</span>
-        </p>
-        <p>
-          Disponible: <span class="stock">2</span>
-        </p>
-        <a href="#" class="add-to-cart" data-id="5"><i class="fa fa-cart-plus"></i>Ajouter au panier</a>
-      </div>
     </div>
-  </div>
 
-  <footer>
-  </footer>
+    <footer>
+    </footer>
 
-  <script src="data/courses.js"></script>
-  <script src="js/app.js"></script>
-  <script src="js/search.js"></script>
+    <script src="data/courses.js"></script>
+    <script src="js/app.js"></script>
+    <script src="js/search.js"></script>
 
-</body>
-</html>
+  </body>
+</html>
\ No newline at end of file
diff --git a/js/app.js b/js/app.js
index e69de29..28793cf 100644
--- a/js/app.js
+++ b/js/app.js
@@ -0,0 +1,34 @@
+for (var i = 0; i < COURSES.length; i++) {
+    console.log(COURSES[i]); // Console log all courses
+
+    // Show all courses in HTML file
+    document.querySelector('.courses__container').innerHTML += `
+        <div class="course__item">
+        <figure class="course_img">
+        <img src="img/courses/${COURSES[i].img}">
+        </figure>
+        <div class="info__card">
+        <h4>${COURSES[i].title}</h4>
+        <figure class="mark m_4">
+            <img src="img/rates.png">
+        </figure>
+        <p>
+            <span class="price">${COURSES[i].initial_price} €</span>
+            <span class="discount">${COURSES[i].price} €</span>
+        </p>
+        <p>
+            Disponible: <span class="stock">${COURSES[i].stock}</span>
+        </p>
+        <a href="#" class="add-to-cart" data-id="${COURSES[i].id}"><i class="fa
+            fa-cart-plus"></i>Ajouter au panier</a>
+        </div>
+    </div>
+    `;
+}
+
+// On button click add product to cart
+document.querySelector('.courses__container').addEventListener('click', function (e) {
+    if(e.target.classList.contains('add-to-cart')) {
+        console.log(`Tu as cliqué sur le produit ${e.target.dataset.id}`);
+    }
+});
\ No newline at end of file
