diff --git a/index.html b/index.html
index 1e7c169002d55e337de02d07107484c3a708d8d0..2c25362e305a42231e897296cc72abed48f6a82c 100644
--- a/index.html
+++ b/index.html
@@ -8,17 +8,45 @@
 <body>
     <h1>Pokémon List</h1>
     <ul id="pokemon-list"></ul>
+
     <script>
-        const pokemons = ["Pikachu", "Bulbasaur", "Charmander", "Squirtle"];
-        const taille = [2, 4,8,10,7];
-        const poids = [3,3,9,10,2000];
-        const listElement = document.getElementById("pokemon-list");
+        const baseApiUrl = "https://pokeapi.co/api/v2/pokemon"
+
+        /**
+        * Fetch the pokemon list with the weight and height
+        */
+        function fetchPokemonList(callback, limit = 400) {
+            url = baseApiUrl + "?limit=" + limit;
+            const request = async() => {
+                const response = await fetch(url);
+                const json = await response.json();
+                let promisesArray = json["results"].map(result => {
+                    return fetch(result.url).then(response => response.json());
+                });
+                return Promise.all(promisesArray);
+            };
+            request().then( (data)=> {
+                let pokemons = [];
+                for (let i=0; i < data.length; ++i) {
+                    pokemons.push({"name":data[i].name, "weight": data[i].weight, "height": data[i].height});
+                }
+                callback(pokemons);
+            });  
+        }
 
-        for (let i = 0; i < pokemons.length; i++) {
-            const li = document.createElement("li");
-            li.textContent = pokemons[i] + ' ' + poids[i] + 'kg ' + taille[i] + 'm';
-            listElement.appendChild(li);
-        };
+        function displayPokemons(pokemons) {
+            const listElement = document.getElementById("pokemon-list");
+            listElement.innerHTML = ""; // Clear existing list
+        
+            pokemons.forEach(pokemon => {
+                const li = document.createElement("li");
+                li.textContent = `${pokemon.name} - ${pokemon.weight}kg, ${pokemon.height}m`;
+                listElement.appendChild(li);
+            });
+        }
+        
+        // Fetch and display Pokémon
+        fetchPokemonList(displayPokemons, 318);
     </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/pokemonProvider.js b/pokemonProvider.js
new file mode 100644
index 0000000000000000000000000000000000000000..964a9ae11a8cfe3fc6cfb2d4c747559a7cae414c
--- /dev/null
+++ b/pokemonProvider.js
@@ -0,0 +1,25 @@
+const baseApiUrl = "https://pokeapi.co/api/v2/pokemon"
+
+/**
+ * Fetch the pokemon list with the weight and height
+ */
+function fetchPokemonList(callback, limit = 20) {
+    url = baseApiUrl + "?limit=" + limit;
+    const request = async() => {
+         const response = await fetch(url);
+         const json = await response.json();
+         let promisesArray = json["results"].map(result => {
+            return fetch(result.url).then(response => response.json());
+        });
+        return Promise.all(promisesArray);
+    };
+    request().then( (data)=> {
+        let pokemons = [];
+        for (let i=0; i < data.length; ++i) {
+            pokemons.push({"name":data[i].name, "weight": data[i].weight, "height": data[i].height});
+        }
+        callback(pokemons);
+    });  
+}
+
+exports.fetchPokemonList = fetchPokemonList;