diff --git a/app/views/consumptionsByPeriod.pug b/app/views/consumptionsByPeriod.pug
index d2a4cfee8067f6b789fe374c0bc3feff3ac0b127..0095e5a8670e5616c06e89b0b1447ae09c40d788 100644
--- a/app/views/consumptionsByPeriod.pug
+++ b/app/views/consumptionsByPeriod.pug
@@ -5,55 +5,63 @@ block content
         h1.text-center.title-centered.d-flex.flex-row.bd-highlight.mb-3 Consommations par Période
             img(src="/images/calendar.svg", width="45", height="45", alt="Image", class="img-fluid mx-3")
 
-        // Consommations par jour
-        #consommations-jour
-            h2 Consommations par Jour
-            ul.list-group
-
-        // Consommations par semaine
-        #consommations-semaine
-            h2 Consommations par Semaine
-            ul.list-group
-
-        // Consommations par mois
-        #consommations-mois
-            h2 Consommations par Mois
-            ul.list-group
-
-        // Consommations par année
-        #consommations-annee
-            h2 Consommations par Année
-            ul.list-group
+        // Sélecteur de période
+        select#periode-select.form-select.mb-3
+            option(value="jour") Jour
+            option(value="semaine") Semaine
+            option(value="mois") Mois
+            option(value="annee") Année
+
+        // Graphique des consommations
+        canvas#consommations-chart(width="400", height="200")
 
     script.
         document.addEventListener('DOMContentLoaded', async function () {
-            // Consommations par jour
-            const responseJour = await fetch('/consommations/par-jour');
-            const consommationsJour = await responseJour.json();
-            updateList('consommations-jour', 'Consommations par Jour', consommationsJour);
-
-            // Consommations par semaine
-            const responseSemaine = await fetch('/consommations/par-semaine');
-            const consommationsSemaine = await responseSemaine.json();
-            updateList('consommations-semaine', 'Consommations par Semaine', consommationsSemaine);
-
-            // Consommations par mois
-            const responseMois = await fetch('/consommations/par-mois');
-            const consommationsMois = await responseMois.json();
-            updateList('consommations-mois', 'Consommations par Mois', consommationsMois);
-
-            // Consommations par année
-            const responseAnnee = await fetch('/consommations/par-annee');
-            const consommationsAnnee = await responseAnnee.json();
-            updateList('consommations-annee', 'Consommations par Année', consommationsAnnee);
+            const periodeSelect = document.getElementById('periode-select');
+            const canvas = document.getElementById('consommations-chart');
+            let chart;
+
+            // Mettre à jour le graphique en fonction de la période sélectionnée
+            async function updateChart() {
+                const periode = periodeSelect.value;
+                const response = await fetch(`/consommations/par-${periode}`);
+                const data = await response.json();
+
+                const labels = data.map(cons => cons._id);
+                const values = data.map(cons => cm3ToLitres(cons.totalConsommation).toFixed(2));
+
+                if (chart) {
+                    chart.destroy();
+                }
+
+                chart = new Chart(canvas, {
+                    type: 'bar',
+                    data: {
+                        labels: labels,
+                        datasets: [{
+                            label: 'Consommations (L)',
+                            data: values,
+                            backgroundColor: 'rgba(75, 192, 192, 0.2)',
+                            borderColor: 'rgba(75, 192, 192, 1)',
+                            borderWidth: 1
+                        }]
+                    },
+                    options: {
+                        scales: {
+                            y: {
+                                beginAtZero: true
+                            }
+                        }
+                    }
+                });
+            }
+
+            periodeSelect.addEventListener('change', updateChart);
+
+            updateChart();
         });
 
         // Fonction pour convertir les centimètres cubes en litres
         function cm3ToLitres(cm3) {
             return cm3 / 1000;
         }
-
-        function updateList(containerId, label, data) {
-            const container = document.getElementById(containerId);
-            container.innerHTML = `<h2>${label}</h2><ul class="list-group">${data && data.length ? data.map(cons => `<li class="list-group-item">Date: ${cons._id}, Consommation: ${cm3ToLitres(cons.totalConsommation).toFixed(2)} L</li>`).join('') : '<li class="list-group-item">Pas de données disponibles</li>'}</ul>`;
-        }
diff --git a/app/views/layout.pug b/app/views/layout.pug
index 1fe5c9a6ba766948f53ef089a48c241d00f17cee..fb9f02a683a594f0369c5b7a2c1b8effc8e81784 100644
--- a/app/views/layout.pug
+++ b/app/views/layout.pug
@@ -21,12 +21,12 @@ html(lang="en")
                     ul.navbar-nav
                         li.nav-item.mx-3
                             a.nav-link(href="/information-generale", class="fw-bold") Informations Générales
+                        li.nav-item.mx-3
+                            a.nav-link(href="/graphique-consommations", class="fw-bold") Tableau de bord
                         li.nav-item.mx-3
                             a.nav-link(href="/liste-consommations", class="fw-bold") Liste des Consommations
                         li.nav-item.mx-3
                                 a.nav-link(href="/consommations-par-periode", class="fw-bold") Consommations par Période
-                        li.nav-item.mx-3
-                            a.nav-link(href="/graphique-consommations", class="fw-bold") Tableau de bord
 
     .container.mt-5
         block content