diff --git a/frontend/templates/client_consumption.pages.tmpl b/frontend/templates/client_consumption.pages.tmpl
index 7142d13..6e976bd 100644
--- a/frontend/templates/client_consumption.pages.tmpl
+++ b/frontend/templates/client_consumption.pages.tmpl
@@ -30,27 +30,68 @@
         <a class="button is-info is-light" href="/admin/consumption">🔁 Tout</a>
       </div>
 
-      <table class="table is-striped is-fullwidth">
-        <thead>
-          <tr>
-            <th>Date</th>
-            <th>Type</th>
-            <th>Description</th>
-            <th>Crédits utilisés</th>
-          </tr>
-        </thead>
-        <tbody>
-          {{ range .Consumptions }}
-          <tr>
-            <td>{{ .CreatedAt.Format "02/01/2006 15:04" }}</td>
-            <td>{{ .MessageType }}</td>
-            <td>{{ .Description }}</td>
-            <td>{{ .CreditsUsed }}</td>
-          </tr>
-          {{ end }}
-        </tbody>
-      </table>
+      {{ if not .Summaries }}
+        <p>Aucune consommation trouvée pour cette période.</p>
+      {{ else }}
+        <div class="box">
+          <table class="table is-striped is-fullwidth">
+            <thead>
+              <tr>
+                <th>Date</th>
+                <th>Total crédits utilisés</th>
+                <th>Détails</th>
+              </tr>
+            </thead>
+            <tbody>
+              {{ range .Summaries }}
+              <tr>
+                <td>{{ .Date.Format "02/01/2006" }}</td>
+                <td>{{ .TotalCredits }}</td>
+                <td>
+                  <button class="button is-small is-link" onclick="toggleDetail('{{ .Date.Format "2006-01-02" }}')">🔽 Voir détails</button>
+                </td>
+              </tr>
+              <tr id="detail-{{ .Date.Format "2006-01-02" }}" style="display: none;">
+                <td colspan="3">
+                  <table class="table is-narrow is-fullwidth">
+                    <thead>
+                      <tr>
+                        <th>Heure</th>
+                        <th>Type</th>
+                        <th>Description</th>
+                        <th>Crédits</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {{ range (index $.DetailsByDate (.Date.Format "2006-01-02")) }}
+                      <tr>
+                        <td>{{ .CreatedAt.Format "15:04:05" }}</td>
+                        <td>{{ .MessageType }}</td>
+                        <td>{{ .Description }}</td>
+                        <td>{{ .CreditsUsed }}</td>
+                      </tr>
+                      {{ end }}
+                    </tbody>
+                  </table>
+                </td>
+              </tr>
+              {{ end }}
+            </tbody>
+          </table>
+        </div>
+      {{ end }}
     </section>
   </div>
 </div>
-{{ end }}
+
+<script>
+function toggleDetail(id) {
+  const row = document.getElementById("detail-" + id);
+  if (row.style.display === "none") {
+    row.style.display = "";
+  } else {
+    row.style.display = "none";
+  }
+}
+</script>
+{{ end }}
\ No newline at end of file