diff --git a/frontend/index.html b/frontend/index.html
index cbeb76c4c1f0f13ebe8e8474ce9c443f8b56f58a..b7d4f1fb65d234fcdc931f75f86a57ecf92fb08c 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -103,9 +103,9 @@
         <!-- Visualisation à droite -->
         <div class="col-md-6">
           <div class="d-flex justify-content-between align-items-center my-3" id="steps-buttons-container">
-            <button id="stepsPrevYear" class="btn btn-outline-dark" disabled>&lt;</button>
+            <button id="stepsPrevYear" class="btn btn-success" disabled>&lt;</button>
             <span id="stepsCurrentYear" class="font-weight-bold" style="font-size: 1.5rem;">2024</span>
-            <button id="stepsNextYear" class="btn btn-outline-dark">&gt;</button>
+            <button id="stepsNextYear" class="btn btn-success">&gt;</button>
         </div>
           <div id="steps-visualization" style="position: relative;"></div>
           
@@ -121,9 +121,9 @@
         <!-- Visualisation à gauche -->
         <div class="col-md-6 order-md-1">
           <div id="distance-buttons-container" class="d-flex justify-content-between align-items-center">
-            <button id="distancePrevYear" class="btn btn-outline-dark" disabled>&lt;</button>
+            <button id="distancePrevYear" class="btn btn-success" disabled>&lt;</button>
             <span id="distanceCurrentYear" class="font-weight-bold" style="font-size: 1.5rem;">2024</span>
-            <button id="distanceNextYear" class="btn btn-outline-dark">&gt;</button>
+            <button id="distanceNextYear" class="btn btn-success">&gt;</button>
         </div>
         
           <div id="distance-visualization" style="position: relative;"></div>
@@ -166,9 +166,9 @@
         <!-- Visualisation à droite -->
         <div class="col-md-6">
           <div class="d-flex justify-content-between align-items-center my-3" id="calories-buttons-container">
-            <button id="caloriesPrevYear" class="btn btn-outline-dark" disabled>&lt;</button>
+            <button id="caloriesPrevYear" class="btn btn-success" disabled>&lt;</button>
             <span id="caloriesCurrentYear" class="font-weight-bold" style="font-size: 1.5rem;">2024</span>
-            <button id="caloriesNextYear" class="btn btn-outline-dark">&gt;</button>
+            <button id="caloriesNextYear" class="btn btn-success">&gt;</button>
         </div>
         
           <div id="calories-visualization" style="position: relative;"></div>
@@ -185,9 +185,9 @@
         <!-- Visualisation à gauche -->
         <div class="col-md-6 order-md-1">
           <div class="d-flex justify-content-between align-items-center">
-            <button id="prevYear" class="btn btn-outline-dark"> < </button>
+            <button id="prevYear" class="btn btn-success"> < </button>
             <span id="currentYear" class="font-weight-bold" style="font-size: 1.5rem;">2024</span>
-            <button id="nextYear" class="btn btn-outline-dark"> > </button>
+            <button id="nextYear" class="btn btn-success"> > </button>
           </div>
           <div id="sleep-visualization" style="position: relative;"></div>