diff --git a/client/css/style.css b/client/css/style.css
index 63e8cfa..64d584b 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -1,7 +1,6 @@
 :root {
   --primary-color: #195962;
   --secondary-color: #f56f6c;
-  --board-background-color: #eee8;
   --dark-color:  #252932;
   --light-color: #ffffff;
   --post-it-pink: pink;
@@ -11,6 +10,10 @@
   --post-it-white: #e7e8e9;
   --text-color: var(--dark-color);
   --background-color: var(--light-color);
+  --board-opacity: 0.8;
+  --board-background-color: rgba(238, 238, 238, var(--board-opacity));
+  --board-background-color-outline: rgba(221, 221, 221, var(--board-opacity));
+  --board-background-color-shadow: rgba(153, 153, 153, var(--board-opacity));
 }
 
 body {
@@ -156,14 +159,14 @@ a:active {
   position: relative;
   background-color: var(--board-background-color);
   height: 100%;
-  box-shadow: inset 1px 1px 3px #999;
+  box-shadow: inset 1px 1px 3px var(--board-background-color-shadow);
 }
 
 .board-outline {
-  border: solid #ddda 6px;
+  border: solid var(--board-background-color-outline) 6px;
   display: block;
   height: 466px;
-  box-shadow: 1px 1px 1px #aaa;
+  box-shadow: 1px 1px 1px var(--board-background-color-shadow);
   margin: 0 auto;
 }
 
@@ -270,11 +273,10 @@ h2 {
   right: 3px;
   top: 200px;
   display: none;
-  opacity: 0.15;
 }
 
 #add-col:hover {
-  opacity: 0.5;
+  transform: scale(1.2);
 }
 
 #delete-col {
@@ -282,11 +284,10 @@ h2 {
   right: 3px;
   top: 224px;
   display: none;
-  opacity: 0.15;
 }
 
 #delete-col:hover {
-  opacity: 0.5;
+  transform: scale(1.2);
 }
 
 #board-table:hover #add-col,
diff --git a/views/index.jade b/views/index.jade
index 9145a63..558639d 100644
--- a/views/index.jade
+++ b/views/index.jade
@@ -48,6 +48,9 @@ block header
                 path(d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z")
 
 block body
+    div(style="margin: 1em;")
+        label(for="opacity-range") Transparence du tableau :
+        input#opacity-range(type="range", min="0", max="1", step="0.01", value="1")
     div.container
         div.board-container
             div.board-outline
@@ -59,3 +62,11 @@ block body
                                     span(style="font-weight:bold; font-size:16px;") +
                                 div#delete-col.col-icon(title="Supprimer une colonne", style="width:20px; height:20px; display:flex; justify-content:center; align-items:center; border:1px solid #000; cursor:pointer; margin-top:4px;")
                                     span(style="font-weight:bold; font-size:16px;") −
+                                    
+        script.
+            document.addEventListener('DOMContentLoaded', function () {
+                const slider = document.getElementById('opacity-range');
+                slider.addEventListener('input', function () {
+                    document.documentElement.style.setProperty('--board-opacity', slider.value);
+                });
+            });