diff --git a/static/css/style.css b/static/css/style.css
index 2cd68a61c8356dfef02bdce2909d0b0ed1490946..d638d27e3783c70df09b9caee5ee9c503ff58356 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -2068,6 +2068,19 @@ button:hover {
   transform: translate(-50%, -50%); /* Centrer autour de la souris */
   z-index: 9999;
 }
+.tooltip-sleepactivity{
+  position: absolute;
+  background-color: rgba(0, 0, 0, 0.7); /* Fond noir semi-transparent */
+  color: white; /* Texte blanc */
+  padding: 5px 10px;
+  border-radius: 5px; /* Bordures arrondies */
+  font-size: 12px;
+  pointer-events: none; /* Empêche l'interaction avec le tooltip */
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* Ajout d'une ombre */
+  transform: translate(-50%, -50%); /* Centrer autour de la souris */
+  z-index: 9999;
+}
+
 /* Visu 5 */
 /* Sleep and Activity Analysis */
 #sleep-activity-analysis {
diff --git a/static/js/main.js b/static/js/main.js
index 546104903da49855dc2914f271a9ad17da39d662..878b8a896633f4ed6b96eb523e0dc3e977cc4f5b 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -1262,15 +1262,8 @@ function renderSleepActivityVisualization() {
       const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
 
       const tooltip = d3.select("body").append("div")
-        .attr("class", "tooltip")
-        .style("position", "absolute")
-        .style("visibility", "hidden")
-        .style("background", "#fff")
-        .style("border", "1px solid #ccc")
-        .style("padding", "5px")
-        .style("border-radius", "4px")
-        .style("font-size", "12px");
-
+        .attr("class", "tooltip-sleepactivity")
+     
       const colorMap = {
         "Maya": "#0f7e06",
         "Corentin": "#1d38e3",
@@ -1358,6 +1351,37 @@ function renderSleepActivityVisualization() {
         .attr("x", 20)
         .attr("y", (d, i) => i * 20 + 12)
         .text(d => d);
+        // Ajout de la légende pour la taille des bulles
+
+
+legend.append("text")
+.attr("x", 0)
+.attr("y", Object.keys(colorMap).length * 20 + 50)
+.text(" burned calories ");
+
+legend.append("circle")
+.attr("cx", 3)
+.attr("cy", Object.keys(colorMap).length * 20 + 70)
+.attr("r", radius(10)) // Taille de la bulle pour 10 calories (ajustez si nécessaire)
+.attr("fill", "#ccc")
+.attr("opacity", 0.7);
+
+legend.append("text")
+.attr("x", 30)
+.attr("y", Object.keys(colorMap).length * 20 + 75)
+.text("3 calories");
+
+legend.append("circle")
+.attr("cx", 10)
+.attr("cy", Object.keys(colorMap).length * 20 + 100)
+.attr("r", radius(100)) // Taille de la bulle pour 100 calories
+.attr("fill", "#ccc")
+.attr("opacity", 0.7);
+
+legend.append("text")
+.attr("x", 30)
+.attr("y", Object.keys(colorMap).length * 20 + 105)
+.text("600 calories");
 
       const slider = document.getElementById("date-slider");
       const playButton = document.getElementById("play-button");