diff --git a/scripts/planets.js b/scripts/planets.js
index 03436ff..c2d23bc 100644
--- a/scripts/planets.js
+++ b/scripts/planets.js
@@ -1,11 +1,10 @@
-import { api_call, API_URL, getPage } from "./util";
+import { api_call, API_URL, createPagination } from "./util";
+
 
 const planetes = document.getElementById("resultats");
 
-console.log('planet.js loaded');
 
-
-function remplissage(results){
+function remplissage(results) {
 
     planetes.innerHTML = "";
 
@@ -13,7 +12,7 @@ function remplissage(results){
     const nextUrl = results.next;
     const tabResults = results.results;
 
-    for(resultPlanet of tabResults){
+    for (resultPlanet of tabResults) {
         const nom = resultPlanet.name;
         const diametre = resultPlanet.diameter;
         const climate = resultPlanet.climate;
@@ -33,8 +32,8 @@ function remplissage(results){
         const tabFilms = resultPlanet.films;
 
 
-        planetes.innerHTML += 
-        `<section class="resultat">
+        planetes.innerHTML +=
+            `<section class="resultat">
             <h1 class="titreAccordeon">${nom}</h1>
             <div class="accordeon">
                 <div class="1">
@@ -49,35 +48,10 @@ function remplissage(results){
     }
 
     //Pagination
-    console.log("Url précédente : " + previousUrl);
-    console.group("Url suivante : " + nextUrl);
-    const currentPage = (previousUrl == null ? parseInt(getPage(nextUrl)) - 1 : parseInt(getPage(previousUrl)) + 1);
-    console.log("Page courante : " + currentPage);
-
-    let firstPage = false;
-    let lastPage = false;
-    if(previousUrl == null) firstPage = true;
-    if(nextUrl == null) lastPage = true;
-    let previousButton = `<button id="prevButton">Page précédente</button>`;
-    let currentButton = `${currentPage}`;
-    let nextButton = `<button id="nextButton">Page suivante</button>`;
-    if(!firstPage) {
-        planetes.innerHTML += previousButton;
-        console.log(document.getElementById("prevButton"));
-        document.getElementById("prevButton").addEventListener("click", () => {
-            api_call(previousUrl, remplissage);
-        });
-    }
-    planetes.innerHTML += currentButton;
-    if(!lastPage) {
-        planetes.innerHTML += nextButton;
-        document.getElementById("nextButton").addEventListener("click", () => {
-            api_call(nextUrl, remplissage);
-        });
-    };
-
-    
-    
+    createPagination(previousUrl, nextUrl, planetes, remplissage);
 }
 
 api_call(API_URL + "/planets", remplissage);
+
+
+console.log('planet.js loaded');
diff --git a/scripts/util.js b/scripts/util.js
index 9397675..446b1ee 100644
--- a/scripts/util.js
+++ b/scripts/util.js
@@ -26,7 +26,7 @@ export const api_call = (url, callback) => {
  * @param {string} url l'url d'un résultat multipage (qui se termine par ?page=2 par exemple)
  * @returns Le numéro de la page de l'url
  */
-export const getPage = (url) => {
+ const getPage = (url) => {
     tabUrl = url.split('/');
     pageEgal = tabUrl[tabUrl.length - 1];
     tabPageEgal = pageEgal.split('=');
@@ -34,3 +34,49 @@ export const getPage = (url) => {
 
     return numeroPage;
 }
+
+/**
+ * Ajoutes des boutons de pagination à un élément
+ * @param {string} prevUrl l'url de la page précédente
+ * @param {string} nextUrl l'url de la page suivante
+ * @param {object} elementParent L'objet parent dans lequel ajouter les boutons
+ */
+export const createPagination = (prevUrl, nextUrl, elementParent, remplissage) => {
+    console.log("Url précédente : " + prevUrl);
+    console.group("Url suivante : " + nextUrl);
+    const currentPage = (prevUrl == null ? parseInt(getPage(nextUrl)) - 1 : parseInt(getPage(prevUrl)) + 1);
+    console.log("Page courante : " + currentPage);
+
+    let firstPage = false;
+    let lastPage = false;
+    if (prevUrl == null) firstPage = true;
+    if (nextUrl == null) lastPage = true;
+    let previousButton = `<button id="prevButton">Page précédente</button>`;
+    let currentButton = `${currentPage}`;
+    let nextButton = `<button id="nextButton">Page suivante</button>`;
+
+    elementParent.innerHTML += previousButton;
+    elementParent.innerHTML += currentButton;
+    elementParent.innerHTML += nextButton;
+
+    if(firstPage){
+        document.getElementById("prevButton").hidden = true;
+    }
+    else{
+        document.getElementById("prevButton").hidden = false;
+    }
+    if(lastPage){
+        document.getElementById("nextButton").hidden = true;
+    }
+    else{
+        document.getElementById("nextButton").hidden = false;
+    }
+
+
+    document.getElementById("prevButton").addEventListener("click", () => {
+        api_call(prevUrl, remplissage);
+    });
+    document.getElementById("nextButton").addEventListener("click", () => {
+        api_call(nextUrl, remplissage);
+    });
+}