diff --git a/frontend/index.html b/frontend/index.html
index f2e21bd920c4580a92b8a3a6c1616413fb8134e4..cbeb76c4c1f0f13ebe8e8474ce9c443f8b56f58a 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -237,12 +237,13 @@
         </div>
         <!-- Visualisation à droite -->
         <div class="col-md-6">
-          <div id="sleep-activity-visualization" style="position: relative;"></div>
           <div class="slider-container-sleep-activity d-flex align-items-center mt-3">
             <div class="slider-label">Date: <span id="date-label">2023-W39</span></div>
-            <input type="range" id="date-slider" class="slider mx-2" min="0" max="10" step="1" style="flex-grow: 1;">
-            <button id="play-button" class="btn btn-primary">Play</button>
+            <input type="range" id="date-slider" class="form-range mx-2" min="0" max="10" step="1" style="flex-grow: 1; color: green;">
+            <button id="play-button" class="btn btn-success">Play</button>
           </div>
+          <div id="sleep-activity-visualization" style="position: relative;"></div>
+          
         </div>
       </div>
     </div>
diff --git a/static/js/main.js b/static/js/main.js
index 364b475d849830f31d0f311db7c524ad902f8448..329664230903b19797bb0580db4926dee59ecf72 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -1302,7 +1302,7 @@ function renderSleepActivityVisualization() {
               update(index);
               index++;
             }
-          }, 1000);
+          }, 800);
         } else {
           clearInterval(interval);
           playButton.textContent = "Play";