diff --git a/index.html b/index.html
index b0ab707..2b2bf49 100644
--- a/index.html
+++ b/index.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+      <meta charset="UTF-8">
       <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css">
       <link rel="stylesheet" href="./static/css/style.css">
       <script src="./static/js/script.js"></script>
@@ -64,20 +65,6 @@
     </div>
 </section>
 
-<br>
-
-<!-- BOUTON DARK MODE -->
-<div class="switch">
-    <input type="checkbox" id="switch" /><br>
-    <label for="switch">
-        <i class="fas fa-sun"></i>
-        <i class="fas fa-moon"></i>
-        <span class="ball"></span>
-    </label>
-</div>
-
-<br>
-
 <div class="content">
   <h1>LES DEVELOPPEURS</h1>
     <p>Voici la team</p>
@@ -175,21 +162,61 @@
                 
     </div>
 
+<br><hr><br>
+
+  <div class="has-text-centered">
+    <h1 style="text-decoration: underline;">JAVASCRIPT</h1><br>
+  </div>
+
+  <div class="has-text-centered">
+    <h3>CAROUSSEL</h3>
+  </div>
+
 <!-- CAROUSSEL -->
 <div class="carousel">
-  <div class="carousel-track" id="carouselTrack">
+  <div class="carousel-track">
     <div class="carousel-slide"><img src="./static/img/1.jpg" alt="1"></div>
     <div class="carousel-slide"><img src="./static/img/2.jpg" alt="2"></div>
     <div class="carousel-slide"><img src="./static/img/3.jpg" alt="3"></div>
   </div>
 </div><br>
 
+<div class="has-text-centered">
+  <h3>TRICKY BOUTON</h3>
+</div>
+
 <!-- BOUTON -->
+ <div class="has-text-centered">
   <div class="button-area">
     <button id="trickyButton">Click me!</button>
   </div>
+ </div>
   <br>
 
+  <div class="has-text-centered">
+    <h3>COMPTEUR</h3>
+  </div>
+
+<!-- COMPTEUR -->
+ <div class="content has-text-centered">
+  <button id="incrementer">Incrémenter</button>
+  <p>Compteur : <span id="compteur">0</span></p>
+ </div>
+
+ <div class="has-text-centered">
+  <h3>DARK MODE</h3>
+</div>
+
+<!-- BOUTON DARK MODE -->
+<div class="switch">
+  <input type="checkbox" id="switch" /><br>
+  <label for="switch">
+      <i class="fas fa-sun"></i>
+      <i class="fas fa-moon"></i>
+      <span class="ball"></span>
+  </label>
+</div>
+
 <!-- FOOTER -->
     <footer class="footer">
       <div class="content has-text-centered">
@@ -203,4 +230,4 @@
     </footer>
 
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/static/css/style.css b/static/css/style.css
index 412389f..7cdbe3c 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -14,6 +14,10 @@
     text-align: center;
 }
 
+h3 h1 {
+  color: var(--primary-text-color) !important;
+}
+
 /* DARK MODE */
 :root {
     --bg-color: #fff;
@@ -66,23 +70,33 @@ body {
   object-fit: cover;
 }
 
-/* BOUTON */
+/* TRICKY BOUTON */
 .button-area {
     width: 100%;
     height: 300px;
-    position: relative;
+    position:relative;
     overflow: hidden;
     border: 1px solid #ccc;
   }
   
-  #trickyButton {
-    position: absolute;
-    padding: 10px 20px;
-    background-color: #4CAF50;
-    color: white;
-    border: none;
-    cursor: pointer;
-    left: 50px;
-    top: 50px;
-  }
+#trickyButton {
+  position: absolute;
+  padding: 10px 20px;
+  background-color: #4CAF50;
+  color: white;
+  border: none;
+  cursor: pointer;
+  left: 50px;
+  top: 50px;
+}
+
+#incrementer {
+  padding: 10px 20px;
+  background-color: #3f57c0 !important;
+  color: white !important;
+  border: none !important;
+  cursor: pointer !important;
+  left: 50px !important;
+  top: 120px !important;
+}
   
\ No newline at end of file
diff --git a/static/js/script.js b/static/js/script.js
index 17761f7..8b1871a 100644
--- a/static/js/script.js
+++ b/static/js/script.js
@@ -38,4 +38,14 @@ document.addEventListener("DOMContentLoaded", function () {
     button.style.left = `${randomX}px`;
     button.style.top = `${randomY}px`;
   });
-});
\ No newline at end of file
+});
+
+// COMPTEUR
+document.addEventListener("DOMContentLoaded", function () {
+let compteur = 0;
+document.getElementById("incrementer").addEventListener("click", () => {
+  compteur++;
+  document.getElementById("compteur").textContent = compteur;
+  });
+});
+
