diff --git a/public/css/ControllerVues/edit.css b/public/css/ControllerVues/edit.css
index e5a8e3a..0ee0756 100644
--- a/public/css/ControllerVues/edit.css
+++ b/public/css/ControllerVues/edit.css
@@ -1,15 +1,3 @@
-/* Global styles */
-body {
-    font-family: 'Arial', sans-serif;
-    background-color: #f9f9f9;
-    color: #333;
-    margin: 0;
-    padding: 20px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 100vh;
-}
 
 /* Page container */
 .page-container {
diff --git a/public/css/ControllerVues/list.css b/public/css/ControllerVues/list.css
index c1125b4..37866e5 100644
--- a/public/css/ControllerVues/list.css
+++ b/public/css/ControllerVues/list.css
@@ -1,16 +1,10 @@
-/* Global styles */
-body {
-    font-family: Arial, sans-serif;
-    margin: 20px;
-    background-color: #f9f9f9;
-    color: #333;
-}
 
-h1 {
-    text-align: center;
-    color: #db5559;
-    margin-bottom: 20px;
-}
+
+/*h1 {*/
+/*    text-align: center;*/
+/*    color: #db5559;*/
+/*    margin-bottom: 20px;*/
+/*}*/
 
 /* Table styles */
 .table {
diff --git a/public/css/ControllerVues/new.css b/public/css/ControllerVues/new.css
index c442783..5f888aa 100644
--- a/public/css/ControllerVues/new.css
+++ b/public/css/ControllerVues/new.css
@@ -1,15 +1,3 @@
-/* Global styles */
-body {
-    font-family: 'Arial', sans-serif;
-    background-color: #fff5f5;
-    color: #333;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    min-height: 100vh;
-}
 
 /* Page container */
 .page-container {
diff --git a/public/js/GestionTables/GestionTables.js b/public/js/GestionTables/GestionTables.js
new file mode 100644
index 0000000..bf72f9b
--- /dev/null
+++ b/public/js/GestionTables/GestionTables.js
@@ -0,0 +1,77 @@
+document.querySelector('.btn-gestion-table').addEventListener('click', function(event) {
+    event.preventDefault();
+
+    document.getElementById('container_modal');
+
+    fetch('/tables')
+        .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 addTable (event) {
+    document.getElementById('container_modal');
+
+    fetch(`/tables/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 updateTable (event) {
+    document.getElementById('container_modal');
+    const reductionsIdString = event.getAttribute('data-id');
+    let reductionsId = parseInt(reductionsIdString);
+
+    fetch(`/reductions/${reductionsId}/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 deletePromotion (event) {
+    document.getElementById('container_modal');
+    const reductionsIdString = event.getAttribute('data-id');
+    let reductionsId = parseInt(reductionsIdString);
+
+    fetch(`/reductions/${reductionsId}`)
+        .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/index/admin.html.twig b/templates/index/admin.html.twig
index 11cb279..b6ee974 100644
--- a/templates/index/admin.html.twig
+++ b/templates/index/admin.html.twig
@@ -41,7 +41,7 @@
                             </div>
                     </li>
                     <li>
-                        <div class="btn-custom icon-container">
+                        <div class="btn-custom btn-gestion-table icon-container">
                             <i class="icon-medium"> {{ ux_icon('ic:outline-table-bar') }}</i>
                             <span>Gérer Table</span>
                         </div>
@@ -134,4 +134,5 @@
     <script src="{{ asset('js/Compte/CompteModal.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>
 {% endblock %}
\ No newline at end of file
diff --git a/templates/tables/index.html.twig b/templates/tables/index.html.twig
index 48fe8b8..84979b9 100644
--- a/templates/tables/index.html.twig
+++ b/templates/tables/index.html.twig
@@ -35,5 +35,9 @@
         </tbody>
     </table>
 
-    <a href="{{ path('app_tables_new') }}">Créer une nouvelle table</a>
+    <button onclick="addTable(this)" href="{{ path('app_reductions_new') }}">Créer une tables</button>
+{% endblock %}
+
+{% block javascripts %}
+    <script src="{{ asset('js/GestionPromotion/GestionPromotion.js') }}" defer></script>
 {% endblock %}