diff --git a/public/header-snippet.html b/public/header-snippet.html
index 289e0b4..82283e7 100644
--- a/public/header-snippet.html
+++ b/public/header-snippet.html
@@ -4,10 +4,10 @@
 
 <div class="back-button"">
             <svg width=" 24" height="8" viewBox="0 0 16 8" fill="none" class="arrow-icon">
-    <path d="M15 4H4V1" stroke="#C99CCF" />
-    <path d="M14.5 4H3.5H0" stroke="#C99CCF" />
+    <path d="M15 4H4V1" stroke="#CDF5FF" />
+    <path d="M14.5 4H3.5H0" stroke="#CDF5FF" />
     <path
         d="M15.8536 4.35355C16.0488 4.15829 16.0488 3.84171 15.8536 3.64645L12.6716 0.464466C12.4763 0.269204 12.1597 0.269204 11.9645 0.464466C11.7692 0.659728 11.7692 0.976311 11.9645 1.17157L14.7929 4L11.9645 6.82843C11.7692 7.02369 11.7692 7.34027 11.9645 7.53553C12.1597 7.7308 12.4763 7.7308 12.6716 7.53553L15.8536 4.35355ZM15 4.5L15.5 4.5L15.5 3.5L15 3.5L15 4.5Z"
-        fill="#C99CCF" />
+        fill="#CDF5FF" />
     </svg>
 </div>
\ No newline at end of file
diff --git a/public/styles/common.css b/public/styles/common.css
index cb44175..e3682ad 100644
--- a/public/styles/common.css
+++ b/public/styles/common.css
@@ -25,8 +25,8 @@ body {
 
 .body {
   background: repeating-conic-gradient(from 45deg,
-      #a37fb1 0% 25%,
-      #604566 0% 50%);
+      #c2d1cf 0% 25%,
+      #a0a9b6 0% 50%);
   background-size: max(10vw, 10svh) max(10vw, 10svh);
 
   display: flex;
@@ -46,13 +46,13 @@ header {
   height: 90px;
   min-height: 90px;
   width: calc(100% - 80px);
-  color: #C99CCF;
+  color: rgb(205, 245, 255);
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0 20px;
   flex-direction: row;
-  background: #433147d8;
+  background: #78888f85;
   margin: 20px;
   border-radius: 10px;
   -webkit-border-radius: 10px;
@@ -87,7 +87,7 @@ footer {
   width: calc(100% - 80px);
 
 
-  color: rgb(201, 156, 207);
+  color: rgb(205, 245, 255);
 
   display: flex;
   justify-content: space-between;
@@ -95,7 +95,7 @@ footer {
   padding: 0 20px;
   flex-direction: row;
 
-  background: #433147d8;
+  background: #78888f85;
 
   margin: 20px;
   border-radius: 10px;
@@ -154,9 +154,9 @@ main {
   border-radius: 10px;
 
   text-decoration: none;
-  color: rgb(201, 156, 207);
+  color: rgb(205, 245, 255);
 
-  background: #433147d8;
+  background: #78888f85;
 
   transition: background 0.3s ease-in-out, transform 0.3s ease-in-out, margin 0.3s ease-in-out;
 
@@ -168,8 +168,11 @@ main {
 .card:hover {
   transform: scale(1.05);
   transition: background 0.3s ease-in-out, transform 0.3s ease-in-out, margin 0.3s ease-in-out;
-
   margin: 7px;
+  -webkit-transform: scale(1.05);
+  -moz-transform: scale(1.05);
+  -ms-transform: scale(1.05);
+  -o-transform: scale(1.05);
 }
 
 .card::before {
@@ -223,7 +226,7 @@ main {
 
   .card-container {
     display: grid;
-    grid-template-columns: repeat(5, 1fr);
+    grid-template-columns: repeat(3, 1fr);
     /* 2 colonnes de largeur égale */
     gap: 20px;
     width: 1400px;