diff --git a/test.html b/test.html
index 95c817b..b722e61 100644
--- a/test.html
+++ b/test.html
@@ -1,43 +1,76 @@
 <!DOCTYPE html>
 <html>
-<head><meta charset="UTF-8"></head>
+<head>
+    <meta charset="UTF-8">
+    <style>
+        body { font-family: sans-serif; background: #222; color: #eee; padding: 20px; }
+        .card { background: #444; padding: 20px; border-radius: 8px; margin-bottom: 20px; }
+        input, select { padding: 8px; border-radius: 4px; border: 1px solid #666; margin-right: 5px; }
+        table { width: 100%; border-collapse: collapse; background: #333; margin-top: 20px; }
+        th, td { border: 1px solid #555; padding: 10px; text-align: left; }
+        th { background: #444; }
+    </style>
+</head>
 <body>
-    <select id="sel" onchange="fill()"><option value="">-- Choisir un produit --</option></select>
-    <input id="id" readonly placeholder="ID">
-    <select id="cat-sel"><option value="">-- Choisir une catégorie --</option></select>
-    <button onclick="save()">SAVE</button>
+
+    <div class="card">
+        <h3>Modification de produit</h3>
+        <select id="sel" onchange="fill()"><option value="">-- Choisir un produit --</option></select>
+        <input id="id" readonly placeholder="ID" style="width: 50px;">
+        <select id="cat-sel"><option value="">-- Catégorie --</option></select>
+        <button onclick="save()">ENREGISTRER</button>
+    </div>
+
+    <table id="prod-table">
+        <thead><tr><th>Produit</th><th>Catégorie</th><th>Emplacement</th></tr></thead>
+        <tbody></tbody>
+    </table>
 
     <script>
         let fullProductList = [];
         let categories = {};
 
-        // 1. Charger les catégories en français
-        fetch('translations/fr.json')
-            .then(r => r.json())
-            .then(data => {
-                categories = data.categories || {};
-                const catSel = document.getElementById('cat-sel');
-                Object.entries(categories).forEach(([key, val]) => {
-                    let opt = document.createElement('option');
-                    opt.value = key; opt.textContent = val;
-                    catSel.appendChild(opt);
-                });
+        // 1. Initialisation : Chargement des catégories et des produits
+        Promise.all([
+            fetch('translations/fr.json').then(r => r.json()),
+            fetch('api/index.php?action=products_list').then(r => r.json())
+        ]).then(([trans, prods]) => {
+            categories = trans.categories || {};
+            fullProductList = prods.inventory || prods.products || prods;
+            
+            // Remplir le select de modif
+            const sel = document.getElementById('sel');
+            const catSel = document.getElementById('cat-sel');
+            
+            Object.entries(categories).forEach(([key, val]) => {
+                let opt = document.createElement('option');
+                opt.value = key; opt.textContent = val;
+                catSel.appendChild(opt);
             });
 
-        // 2. Charger les produits
-        fetch('api/index.php?action=products_list')
-            .then(r => r.json())
-            .then(data => {
-                fullProductList = data.inventory || data.products || data;
-                const sel = document.getElementById('sel');
-                fullProductList.forEach((p, index) => {
-                    let opt = document.createElement('option');
-                    opt.value = index;
-                    opt.textContent = p.name;
-                    sel.appendChild(opt);
-                });
+            fullProductList.forEach((p, index) => {
+                let opt = document.createElement('option');
+                opt.value = index;
+                opt.textContent = p.name;
+                sel.appendChild(opt);
             });
 
+            renderTable();
+        });
+
+        function renderTable() {
+            const tbody = document.querySelector('#prod-table tbody');
+            tbody.innerHTML = "";
+            fullProductList.forEach(p => {
+                let row = `<tr>
+                    <td>${p.name}</td>
+                    <td>${categories[p.category] || p.category}</td>
+                    <td>${p.location || 'N/A'}</td>
+                </tr>`;
+                tbody.innerHTML += row;
+            });
+        }
+
         function fill() {
             let s = document.getElementById('sel');
             let p = fullProductList[s.value];
@@ -48,16 +81,16 @@
         function save() {
             let s = document.getElementById('sel');
             let p = fullProductList[s.value];
-            // On met à jour avec la clé sélectionnée dans le menu déroulant
             p.category = document.getElementById('cat-sel').value;
 
             fetch('api/index.php?action=product_save', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify(p)
-            })
-            .then(r => r.json())
-            .then(res => alert("Réponse serveur : " + JSON.stringify(res)));
+            }).then(() => {
+                renderTable(); // Rafraîchit le tableau immédiatement
+                alert("Modifié avec succès !");
+            });
         }
     </script>
 </body>
