diff --git a/.gitignore b/.gitignore
index 153c933..eeec143 100644
--- a/.gitignore
+++ b/.gitignore
@@ -27,3 +27,6 @@ HELP.md
 
 ### VS Code ###
 .vscode/
+
+/logs/
+/workdir/
diff --git a/src/main/java/dev/fyloz/trial/colorrecipesexplorer/core/io/response/ResponseDataType.java b/src/main/java/dev/fyloz/trial/colorrecipesexplorer/core/io/response/ResponseDataType.java
index 44bfbeb..6019cf3 100644
--- a/src/main/java/dev/fyloz/trial/colorrecipesexplorer/core/io/response/ResponseDataType.java
+++ b/src/main/java/dev/fyloz/trial/colorrecipesexplorer/core/io/response/ResponseDataType.java
@@ -9,7 +9,7 @@ import java.util.stream.Stream;
 public enum ResponseDataType {
     MATERIAL("material", Material.class),
     MATERIALS("materials", ArrayList.class, MATERIAL),
-    MATERIAL_ID("materialId", Integer.class),
+    MATERIAL_ID("materialId", Long.class),
     MATERIAL_CODE("materialCode", String.class),
 
     MATERIAL_TYPE("materialType", MaterialType.class),
@@ -18,7 +18,7 @@ public enum ResponseDataType {
 
     RECIPE("recipe", Recipe.class),
     RECIPES("recipes", ArrayList.class, RECIPE),
-    RECIPE_ID("recipeId", Integer.class),
+    RECIPE_ID("recipeId", Long.class),
     RECIPE_CODE("recipeCode", String.class),
     RECIPE_MAP("recipeMap", HashMap.class),
 
@@ -27,7 +27,7 @@ public enum ResponseDataType {
 
     MIX("mix", Mix.class),
     MIXES("mixes", ArrayList.class, MIX),
-    MIX_ID("mixId", Integer.class),
+    MIX_ID("mixId", Long.class),
 
     MIX_TYPE("mixType", MixType.class),
     MIX_TYPES("mixTypes", ArrayList.class, MIX_TYPE),
@@ -37,7 +37,7 @@ public enum ResponseDataType {
 
     COMPANY("company", Company.class),
     COMPANIES("companies", ArrayList.class, COMPANY),
-    COMPANY_ID("companyId", Integer.class),
+    COMPANY_ID("companyId", Long.class),
     COMPANY_NAME("companyName", String.class),
 
     IMAGE("image", String.class),
diff --git a/src/main/resources/templates/images/add.html b/src/main/resources/templates/images/add.html
index bf97a76..f0f0401 100644
--- a/src/main/resources/templates/images/add.html
+++ b/src/main/resources/templates/images/add.html
@@ -12,7 +12,7 @@
     <div th:include="fragments.html :: messages"></div>
 
     <form th:action="@{/images/add}" class="requireAuth" enctype="multipart/form-data" method="POST">
-        <input name="recipeId" th:value="${recipeId}" type="hidden"/>
+        <input name="id" th:value="${recipeId}" type="hidden"/>
 
         <input type="file" id="image" name="image" required/>
         <br/>
diff --git a/src/main/resources/templates/material/edit.html b/src/main/resources/templates/material/edit.html
index 2198091..e96b7e8 100644
--- a/src/main/resources/templates/material/edit.html
+++ b/src/main/resources/templates/material/edit.html
@@ -87,24 +87,28 @@
 <!-- Fragment du pied de page -->
 <footer th:include="fragments.html :: footer(null, true)"></footer>
 
-
 <script>
-    (() => {
-        const materialId = document.querySelector("#materialId").value;
+    $(() => {
+        const materialId = $("#id").val();
 
-        document.querySelector("#showSIMDUT").addEventListener("click", () => {
-            window.open(`/simdut/${materialId}`);
+        $("#showSIMDUT").on({
+            click: () => {
+                window.open(`/simdut/${materialId}`);
+            }
         });
 
-        document.querySelector("#editSIMDUT").addEventListener("click", () => {
-            window.location.href = `/material/simdut/${materialId}`;
+        $("#editSIMDUT").on({
+            click: () => {
+                window.location.href = `/material/simdut/${materialId}`;
+            }
         });
-    })();
+    });
 
     function switchUnits(unitSelect) {
-        const quantityElem = document.querySelector("#quantity");
-        quantityElem.dataset.unit = unitSelect.value;
-        calculateMilliliters(quantityElem.value, unitSelect.value);
+        unitSelect = $(unitSelect);
+        const quantityElem = $("#quantity");
+        quantityElem.data({unit: unitSelect.val()})
+        calculateMilliliters(quantityElem.val(), unitSelect.val());
     }
 
     function calculateMilliliters(quantity, unit) {
@@ -121,7 +125,7 @@
                 break;
         }
 
-        document.querySelector("#inventoryQuantity").value = convertedQuantity;
+        $("#inventoryQuantity").val(convertedQuantity);
     }
 </script>
 </body>
diff --git a/src/main/resources/templates/material/remover.html b/src/main/resources/templates/material/remover.html
index 27d6fee..e20cf34 100644
--- a/src/main/resources/templates/material/remover.html
+++ b/src/main/resources/templates/material/remover.html
@@ -36,7 +36,7 @@
                 <td th:text="${material.materialType.name}"></td>
                 <td>
                     <button class="remover" th:data-code="${material.name}"
-                            th:data-entityId="${material.materialId}"
+                            th:data-entityId="${material.id}"
                             type="button" th:text="#{keyword.delete}"></button>
                 </td>
             </tr>
diff --git a/src/main/resources/templates/material/simdut.html b/src/main/resources/templates/material/simdut.html
index 7303221..827e641 100644
--- a/src/main/resources/templates/material/simdut.html
+++ b/src/main/resources/templates/material/simdut.html
@@ -14,7 +14,7 @@
     <h1 th:text="#{material.add.title}"></h1>
     <div class="form">
         <form th:action="@{/material/simdut}" class="requireAuth" enctype="multipart/form-data" method="POST">
-            <input name="materialId" th:value="${id}" type="hidden"/>
+            <input name="id" th:value="${id}" type="hidden"/>
 
             <label for="simdut" th:text="#{material.simdut.choose} + ':'"></label>
             <input id="simdut" name="simdut" type="file"/>
diff --git a/src/main/resources/templates/materialType/edit.html b/src/main/resources/templates/materialType/edit.html
index a368d36..213f20a 100644
--- a/src/main/resources/templates/materialType/edit.html
+++ b/src/main/resources/templates/materialType/edit.html
@@ -2,7 +2,7 @@
 <html lang="fr" xmlns:th="http://www.thymeleaf.org">
 <head>
     <th:block
-            th:include="fragments.html :: head(#{materialType.editing.title(${materialType.materialTypeName})}, 'form')"></th:block>
+            th:include="fragments.html :: head(#{materialType.editing.title(${materialType.name})}, 'form')"></th:block>
 </head>
 <body>
 
diff --git a/src/main/resources/templates/recipe/edit.html b/src/main/resources/templates/recipe/edit.html
index 7b012ae..e400c44 100644
--- a/src/main/resources/templates/recipe/edit.html
+++ b/src/main/resources/templates/recipe/edit.html
@@ -183,102 +183,131 @@
 
 <script>
     /*<![CDATA[*/
+    const removeText = "[[#{keyword.remove}]]";
+
     let stepNbr = 0;
 
-    (() => {
-        document.querySelector("#gotoRecipe").addEventListener("click", () => {
-            window.open("/recipe/explore/" + document.querySelector("#recipeId").value, "_blank");
+    $(() => {
+        const recipeId = $("#id").val();
+
+        $("#gotoRecipe").on({
+            click: function () {
+                window.open(`/recipe/explore/${recipeId}`, "_blank");
+            }
         });
 
-        document.querySelectorAll(".mixEditor").forEach(e => {
-            e.addEventListener("click", () => {
-                const mixId = e.getAttribute("data-mixId");
+        $(".mixEditor").on({
+            click: function () {
+                const mixId = $(this).data("mixid");
+                window.location.href = `/mix/editor/${mixId}`;
+            }
+        })
 
-                window.location.href = "/mix/editor/" + mixId;
-            });
+        $("#newMix").on({
+            click: function () {
+                window.location.href = `/mix/creator/${recipeId}`;
+            }
         });
 
-        document.querySelector("#newMix").addEventListener("click", () => {
-            const recipeId = "[[${recipe.id}]]";
+        $("#addStep").on({click: () => addStep()});
 
-            window.location.href = "/mix/creator/" + recipeId;
+        $("#addImage").on({
+            click: function () {
+                showConfirm(askChangePage, false, () => window.location.href = `/images/add/${recipeId}`);
+            }
         });
 
-        document.querySelectorAll(".deleteImg").forEach(e => {
-            e.addEventListener("click", async () => {
+        $(".deleteImg").on({
+            click: function () {
                 showConfirm(askChangePage, false, () => {
-                    checkPassword(null, () => {
-                        let data = {};
-                        data['image'] = e.getAttribute("data-image");
+                    let data = {
+                        image: $(this).data("image")
+                    }
 
-                        axios.post("/images/delete", data)
-                            .then(r => {
-                                const data = r.data;
+                    axios.post("/images/delete", data)
+                        .then(r => {
+                            const responseData = r.data;
 
-                                if (data['error'] !== undefined) {
-                                    showMessage(errorMsg, data['error']);
-                                } else {
-                                    window.location.reload();
-                                }
-                            })
-                            .catch(e => {
-                                console.log(e);
-                                showMessage(errorMsg, generalErrorText);
-                            });
-                    });
+                            if (responseData.error) showMessage(errorMsg, responseData.error);
+                            else window.location.reload();
+                        })
+                        .catch(e => {
+                            console.log(e);
+                            showMessage(errorMsg, generalErrorText);
+                        });
                 });
-            });
-        });
-
-        document.querySelector("#addImage").addEventListener("click", () => {
-            showConfirm(askChangePage, false, () => window.location.href = "/images/add/[[${recipe.id}]]");
+            }
         });
 
         const recipeText = "[[${recipeJSON}]]";
         const recipeJSON = JSON.parse(recipeText.replace(/&quot;/g, '"').replace(/&#39;/g, '\'').replace(/\r\n/g, ""));
 
         // Ajoute les étapes déjà présentes dans la recette
-        recipeJSON.recipeSteps.forEach(s => {
-            addStep(s.stepMessage);
-        });
-
-        document.querySelector("#addStep").addEventListener("click", () => {
-            addStep();
-        });
-    })();
+        recipeJSON.recipeSteps.forEach(s => addStep(s.message));
+    });
 
     function addStep(value) {
+        const input = $("<input />")
+            .attr({
+                type: "text",
+                id: `step_${stepNbr}`,
+                name: "step",
+                autocomplete: "off",
+                value: value
+            });
 
-        let input = document.createElement("input");
-        input.type = "text";
-        input.id = `step_${stepNbr}`;
-        input.classList.add("step", "rawInput", "toSave");
-        input.name = "step";
-        input.autocomplete = "off";
-        if (value != null) input.value = value;
+        // let input = document.createElement("input");
+        // input.type = "text";
+        // input.id = `step_${stepNbr}`;
+        // input.classList.add("step", "rawInput", "toSave");
+        // input.name = "step";
+        // input.autocomplete = "off";
+        // if (value != null) input.value = value;
 
-        let number = document.createElement("label");
-        number.textContent = `${stepNbr + 1}. `;
-        number.for = input.id;
+        const number = $("<label></label>")
+            .attr({
+                for: input.id
+            })
+            .text(`${stepNbr + 1}`);
 
-        let deleteButton = document.createElement("button");
-        deleteButton.type = "button";
-        deleteButton.innerText = "[[#{keyword.remove}]]";
-        deleteButton.addEventListener("click", () => deleteStep(input.id));
+        // let number = document.createElement("label");
+        // number.textContent = `${stepNbr + 1}. `;
+        // number.for = input.id;
 
-        let div = document.createElement("div");
-        div.appendChild(number);
-        div.appendChild(input);
-        div.appendChild(deleteButton);
+        const deleteButton = $("<button></button>")
+            .attr({
+                type: "button"
+            })
+            .text(removeText)
+            .on({
+                click: () => deleteStep(input.id)
+            });
 
-        document.querySelector("#steps").appendChild(div);
+        // let deleteButton = document.createElement("button");
+        // deleteButton.type = "button";
+        // deleteButton.innerText = "[[#{keyword.remove}]]";
+        // deleteButton.addEventListener("click", () => deleteStep(input.id));
+
+        const div = $("<div></div>")
+            .append(number)
+            .append(input)
+            .append(deleteButton);
+
+        // let div = document.createElement("div");
+        // div.appendChild(number);
+        // div.appendChild(input);
+        // div.appendChild(deleteButton);
+
+        $("#steps").append(div);
+        // document.querySelector("#steps").appendChild(div);
 
         stepNbr++;
     }
 
     function deleteStep(stepId) {
         // Supprime la rangée de l'étape
-        document.querySelector(`#${stepId}`).parentElement.remove();
+        $(`#${stepId}`).parent().remove();
+        // document.querySelector(`#${stepId}`).parentElement.remove();
     }
 
     /*]]*/
diff --git a/src/main/resources/templates/recipe/explore.html b/src/main/resources/templates/recipe/explore.html
index 4297b81..ea0d637 100644
--- a/src/main/resources/templates/recipe/explore.html
+++ b/src/main/resources/templates/recipe/explore.html
@@ -188,7 +188,7 @@
                     </div>
                     <ol>
                         <li th:each="step : ${steps}"
-                            th:text="${step.stepMessage}"></li>
+                            th:text="${step.message}"></li>
                     </ol>
                 </div>
             </div>
@@ -249,7 +249,7 @@
         $("#formSubmit").on({
             click: function () {
                 let formData = {};
-                formData.recipeID = $("#recipeID").val();
+                formData.recipeID = $("#recipeId").val();
 
                 formData.locations = {};
                 $(".recipeLocation").each(function () {
@@ -468,7 +468,7 @@
 
     async function printMix(printButton) {
         const mixContainer = $(printButton).parents(".mixContainer");
-        const allBases = $(mixContainer).find(".materialRow[data-materialtypename='[[${T(dev.fyloz.trial.colorrecipesexplorer.core.model.MaterialType).BASE_MATERIAL_TYPE_NAME}]]']");
+        const allBases = $(mixContainer).find(".materialRow[data-materialtypename='[[${T(dev.fyloz.trial.colorrecipesexplorer.core.model.MaterialType).BASE_MATERIAL_TYPE.name}]]']");
         console.log(allBases.length + " bases trouvées");
         if (allBases.length <= 0) {
             showMessage(errorMsg, noBaseError);
diff --git a/src/main/resources/updates.md b/src/main/resources/updates.md
index 4f71f51..f7cd2d9 100644
--- a/src/main/resources/updates.md
+++ b/src/main/resources/updates.md
@@ -1,3 +1,8 @@
+# v1.3.0 (Optimisations back-end)
+### Note: Cette mise à jour n'est pas compatible avec les anciennes versions.
+### Corrections
+* Reusinage des modèles. (Empêche la compatibilité avec les anciennes versions)
+
 # v1.2.0 (Imprimante P-touch)
 ### Corrections
 * Correction d'un bug qui empêchait la suppression des mélanges.