diff --git a/public/js/GestionCommande/GestionCommande.js b/public/js/GestionCommande/GestionCommande.js
new file mode 100644
index 0000000..3387268
--- /dev/null
+++ b/public/js/GestionCommande/GestionCommande.js
@@ -0,0 +1,76 @@
+document.querySelector('.btn-gestion-commandes').addEventListener('click', function(event) {
+    event.preventDefault();
+
+    document.getElementById('container_modal');
+
+    fetch('/commandes')
+        .then(response => {
+            if (!response.ok) {
+                throw new Error('Erreur de chargement de la section Promotions');
+            }
+            return response.text();
+        })
+        .then(html => {
+            // Insérer le HTML dans le conteneur et l'afficher
+            container_modal.innerHTML = html;
+            container_modal.style.display = 'block';
+        })
+        .catch(error => {
+            console.error('Erreur:', error);
+        });
+});
+
+function addCommandes (event) {
+    document.getElementById('container_modal');
+    fetch(`/commandes/new`)
+        .then(response => {
+            return response.text();
+        })
+        .then(html => {
+            // Insérer le HTML dans le conteneur et l'afficher
+            container_modal.innerHTML = html;
+            container_modal.style.display = 'block';
+        })
+        .catch(error => {
+            console.error('Erreur:', error);
+        });
+}
+
+
+function updateCommandes (event) {
+    document.getElementById('container_modal');
+    const commandesIdString = event.getAttribute('data-id');
+    let commandesId = parseInt(commandesIdString);
+
+    fetch(`/commandes/${commandesId}/edit`)
+        .then(response => {
+            return response.text();
+        })
+        .then(html => {
+            // Insérer le HTML dans le conteneur et l'afficher
+            container_modal.innerHTML = html;
+            container_modal.style.display = 'block';
+        })
+        .catch(error => {
+            console.error('Erreur:', error);
+        });
+}
+
+function deleteCommandes (event) {
+    document.getElementById('container_modal');
+    const commandesIdString = event.getAttribute('data-id');
+    let commandesId = parseInt(commandesIdString);
+
+    fetch(`/commandes/${commandesId}`)
+        .then(response => {
+            return response.text();
+        })
+        .then(html => {
+            // Insérer le HTML dans le conteneur et l'afficher
+            container_modal.innerHTML = html;
+            container_modal.style.display = 'block';
+        })
+        .catch(error => {
+            console.error('Erreur:', error);
+        });
+}
\ No newline at end of file
diff --git a/templates/commandes/edit.html.twig b/templates/commandes/edit.html.twig
index 104ce92..d5038f3 100644
--- a/templates/commandes/edit.html.twig
+++ b/templates/commandes/edit.html.twig
@@ -11,3 +11,6 @@
 
 
 {% endblock %}
+{% block javascripts %}
+    <script src="{{ asset('js/GestionPromotion/GestionPromotion.js') }}" defer></script>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/commandes/index.html.twig b/templates/commandes/index.html.twig
index 38ce9b9..1ccd523 100644
--- a/templates/commandes/index.html.twig
+++ b/templates/commandes/index.html.twig
@@ -31,7 +31,7 @@
                         {{ include('commandes/_delete_form.html.twig') }}
                     </form>
 
-                    <a href="{{ path('app_commandes_edit', {'id': commande.id}) }}">Modifier</a>
+                    <button onclick="updateCommandes(this)" data-id="{{ commande.id }}" href="{{ path('app_commandes_edit', {'id': commande.id}) }}">Modifier</button>
                 </td>
             </tr>
         {% else %}
@@ -41,6 +41,5 @@
         {% endfor %}
         </tbody>
     </table>
-
-    <a href="{{ path('app_commandes_new') }}">Créer une nouvelle commande</a>
+    <button onclick="addCommandes(this)" href="{{ path('app_commandes_new') }}">Créer une réduction</button>
 {% endblock %}
diff --git a/templates/index/admin.html.twig b/templates/index/admin.html.twig
index b6ee974..3f4472a 100644
--- a/templates/index/admin.html.twig
+++ b/templates/index/admin.html.twig
@@ -97,7 +97,7 @@
                 </ul>
                 <ul>
                     <li>
-                        <div class="btn-custom icon-container">
+                        <div class="btn-custom btn-gestion-commandes icon-container">
                             <i class="icon-medium"> {{ ux_icon('icon-park-outline:view-list') }}</i>
                             <span>Commande</span>
                         </div>
@@ -132,6 +132,7 @@
 
 {% block javascripts %}
     <script src="{{ asset('js/Compte/CompteModal.js') }}" defer></script>
+    <script src="{{ asset('js/GestionCommande/GestionCommande.js') }}" defer></script>
     <script src="{{ asset('js/GestionUtilisateurs/GestionUtilisateurs.js') }}" defer></script>
     <script src="{{ asset('js/GestionPromotion/GestionPromotion.js') }}" defer></script>
     <script src="{{ asset('js/GestionTables/GestionTables.js') }}" defer></script>