diff --git a/recipes.mv.db b/recipes.mv.db
index 6895fe6..98b5a16 100644
Binary files a/recipes.mv.db and b/recipes.mv.db differ
diff --git a/src/main/resources/static/js/main.js b/src/main/resources/static/js/main.js
index 7be4dc6..cc198f2 100644
--- a/src/main/resources/static/js/main.js
+++ b/src/main/resources/static/js/main.js
@@ -119,26 +119,31 @@ const galTomL = 3785.41;
 
 // Change les unités selon la sélection de l'utilisateur
 function changeUnits(unitSelect, quantitiesSelector, unitsSelector) {
+    const newUnit = unitSelect.value;
+
     document.querySelectorAll(unitsSelector).forEach(e => {
-        e.innerText = unitSelect.value;
+        e.innerText = newUnit;
 
         // Modifie la quantitée
         const quantityElem = e.parentElement.parentElement.querySelector(quantitiesSelector);
         const originalQuantity = parseInt(quantityElem.dataset.quantityml);
 
-        switch (unitSelect.value) {
-            case "L":
-                quantityElem.innerText = originalQuantity / lTomL;
-                break;
-            case "gal":
-                quantityElem.innerText = originalQuantity / galTomL;
-                break;
-            default:
-                quantityElem.innerText = originalQuantity;
-                break;
-        }
-
-        // Arrondi à deux décimaux
-        quantityElem.innerText = Math.round(quantityElem.innerText * 100) / 100;
+        quantityElem.innerText = convertMlToUnit(newUnit, originalQuantity);
     });
+}
+
+// Convertit une quantité en millilitres vers une autre unité de volume
+function convertMlToUnit(unit, quantity) {
+    let newQuantity = unit === "L" ? quantity / lTomL : unit === "gal" ? quantity / galTomL : quantity;
+    return round(newQuantity);
+}
+
+// Convertit une quantité d'une autre unité vers des millilitres
+function convertUnitToMl(unit, quantity) {
+    let newQuantity = unit === "L" ? quantity * lTomL : unit === "gal" ? quantity * galTomL : quantity;
+    return round(newQuantity);
+}
+
+function round(x) {
+    return Math.round(x * 100) / 100;
 }
\ No newline at end of file
diff --git a/src/main/resources/templates/recipe/explore.html b/src/main/resources/templates/recipe/explore.html
index ef4895d..c10aa02 100644
--- a/src/main/resources/templates/recipe/explore.html
+++ b/src/main/resources/templates/recipe/explore.html
@@ -55,7 +55,8 @@
     <button id="modifyRecipe" type="button">Modifier</button>
     <button id="useSubmit" type="button">Utiliser</button>
     <br/>
-    <select id="unitsSelect" onchange="changeUnits(this, '.inventoryQuantity', '.inventoryQuantityUnits')">
+    <select id="unitsSelect"
+            onchange="changeUnits(this, '.inventoryQuantity', '.inventoryQuantityUnits'); changeCustomizersUnits(this)">
         <option selected value="mL">Millilitres</option>
         <option value="L">Litres</option>
         <option value="gal">Gallons</option>
@@ -151,10 +152,9 @@
                                         <th>Produit</th>
                                         <th>Type</th>
                                         <th>Quantité</th>
-                                        <!-- Unités -->
-                                        <td></td>
                                         <!-- Changement des quantités -->
                                         <td></td>
+                                        <td>Unités</td>
                                     </tr>
                                     <!-- Produits -->
                                     <th:block th:each="mixQuantity : ${mix.mixQuantities}"
@@ -171,15 +171,16 @@
                                                    th:data-quantityML="${mixQuantity.quantity}"
                                                    th:text="${mixQuantity.quantity}"></p>
                                             </td>
-                                            <td>
-                                                <p class="inventoryQuantityUnits">mL</p>
-                                            </td>
                                             <th:block th:if="${!material.isMixType()}">
                                                 <td><input class="quantityCustomizer" min="0" step="0.01"
+                                                           th:data-quantityML="${mixQuantity.quantity}"
                                                            th:data-materialID="${material.materialID}"
                                                            th:data-mixID="${mix.mixID}"
                                                            th:value="${mixQuantity.quantity}" type="number"/></td>
                                             </th:block>
+                                            <td>
+                                                <p class="inventoryQuantityUnits">mL</p>
+                                            </td>
                                         </tr>
                                     </th:block>
                                 </table>
@@ -237,36 +238,40 @@
         });
 
         document.querySelectorAll(".quantityCustomizer").forEach((e) => {
-            // Modifie les quantités de tous les produits
             e.addEventListener("change", () => {
                 const value = e.valueAsNumber;
                 const oldValue = e.defaultValue;
+                const currentUnit = document.querySelector("#unitsSelect").value;
 
-                const mixID = e.dataset.mixid;
+                // Modifie les quantités de tous les produits
+                // Les 3 parentElement récupèrent la table dans laquelle le produit se trouve
+                // TODO simplifier ?
+                e.parentElement.parentElement.parentElement.querySelectorAll(".quantityCustomizer").forEach((elem) => {
+                    const defaultValue = elem.defaultValue;
+                    const newValue = (defaultValue * value) / oldValue;
 
-                document.querySelectorAll(".quantityCustomizer").forEach((elem) => {
-                    if (elem.dataset.mixid === mixID) {
-                        const defaultValue = elem.defaultValue;
-                        const newValue = (defaultValue * value) / oldValue;
+                    elem.value = round(newValue);
 
-                        elem.value = Math.round(newValue * 100) / 100;
-                    }
+                    // Recalcule la quantité en millilitres de chaque produit
+                    elem.dataset.quantityml = convertUnitToMl(currentUnit, newValue);
                 });
             });
         });
 
-        const mixes = document.querySelectorAll(".mixes");
-        let maxWidth = 0;
-        mixes.forEach((e) => {
-            const width = e.style.width;
-
-            if (width > maxWidth) {
-                maxWidth = width;
-            }
-        });
-        mixes.forEach((e) => {
-            e.style.width = maxWidth;
-        });
+        // Fait que toutes les tables de mélange soit de la même largeur
+        // TODO Voir si nécessaire, semble être fait par défault
+        // const mixes = document.querySelectorAll(".mixes");
+        // let maxWidth = 0;
+        // mixes.forEach((e) => {
+        //     const width = e.style.width;
+        //
+        //     if (width > maxWidth) {
+        //         maxWidth = width;
+        //     }
+        // });
+        // mixes.forEach((e) => {
+        //     e.style.width = maxWidth;
+        // });
 
         document.querySelector("#formSubmit").addEventListener("click", () => {
             let formData = {};
@@ -296,20 +301,12 @@
                     formData[mixID] = {};
                 }
 
-                formData[mixID][materialID] = e.value;
+                formData[mixID][materialID] = e.dataset.quantityml;
             });
 
-            document.querySelectorAll(".notEnough").forEach(e => {
-                e.classList.remove("notEnough");
-            });
+            clearNotEnoughClasses();
 
-            sendPost(formData, "/inventory/use", r => {
-                const splitReason = r.split("-");
-                const mixID = splitReason[0];
-                const materialID = splitReason[1];
-
-                document.querySelector(`#recipe-${mixID}`).querySelector(`#material-${materialID}`).classList.add("notEnough");
-            });
+            sendPost(formData, "/inventory/use", r => displayNotEnoughReason(r));
         });
 
         document.querySelectorAll(".useMixSubmit").forEach(e => {
@@ -324,24 +321,40 @@
                         formData[mixID] = {};
                     }
 
-                    formData[mixID][materialID] = elem.value;
+                    formData[mixID][materialID] = elem.dataset.quantityml;
                 });
 
-                document.querySelectorAll(".notEnough").forEach(elem => {
-                    elem.classList.remove("notEnough");
-                });
+                clearNotEnoughClasses();
 
-                sendPost(formData, "/inventory/use", r => {
-                    const splitReason = r.split("-");
-                    const mixID = splitReason[0];
-                    const materialID = splitReason[1];
-
-                    document.querySelector(`#recipe-${mixID}`).querySelector(`#material-${materialID}`).classList.add("notEnough");
-                });
+                sendPost(formData, "/inventory/use", r => displayNotEnoughReason(r));
             });
         });
     })();
 
+    function changeCustomizersUnits(unitSelect) {
+        const unit = unitSelect.value;
+
+        document.querySelectorAll(".quantityCustomizer").forEach(e => {
+            const originalValue = e.dataset.quantityml;
+
+            e.value = convertMlToUnit(unit, originalValue);
+        });
+    }
+
+    function clearNotEnoughClasses() {
+        document.querySelectorAll(".notEnough").forEach(elem => {
+            elem.classList.remove("notEnough");
+        });
+    }
+
+    function displayNotEnoughReason(reason) {
+        const splitReason = reason.split("-");
+        const mixID = splitReason[0];
+        const materialID = splitReason[1];
+
+        document.querySelector(`#recipe-${mixID}`).querySelector(`#material-${materialID}`).classList.add("notEnough");
+    }
+
     function sendPost(data, url, errorCallback) {
         const successP = document.querySelector(".success");
         const errorP = document.querySelector(".error");
diff --git a/workdir/recipes.mv.db b/workdir/recipes.mv.db
index 7346774..13c74c1 100644
Binary files a/workdir/recipes.mv.db and b/workdir/recipes.mv.db differ