diff --git a/front/src/components/ThemeToggleButton.astro b/front/src/components/ThemeToggleButton.astro
index 92647e2..fcd7983 100644
--- a/front/src/components/ThemeToggleButton.astro
+++ b/front/src/components/ThemeToggleButton.astro
@@ -105,11 +105,11 @@ import { Icon } from "astro-icon/components";
   @keyframes fadein {
     0% {
       opacity: 0;
-      background-color: #e5e9f0;
+      background-color: #fdf6e3;
     }
     100% {
       opacity: 1;
-      background-color: #e5e9f0;
+      background-color: #fdf6e3;
     }
   }
   body.fadeinlightclass {
@@ -118,11 +118,11 @@ import { Icon } from "astro-icon/components";
   @keyframes fadeindark {
     0% {
       opacity: 0;
-      background-color: #3b4252;
+      background-color: #2d353b;
     }
     100% {
       opacity: 1;
-      background-color: #3b4252;
+      background-color: #2d353b;
     }
   }
   body.fadeindarkclass {
diff --git a/front/tailwind.config.cjs b/front/tailwind.config.cjs
index 159c3e6..d69bb8e 100644
--- a/front/tailwind.config.cjs
+++ b/front/tailwind.config.cjs
@@ -9,24 +9,24 @@ module.exports = {
         normal: ["Zen Kaku Gothic New", "sans-serif"]
       },
       colors: {
-        "main": "#3B4252",
-        "main-dark": "#E5E9F0",
-        "sub": "#81A1C1",
-        "sub-dark": "#81A1C1",
-        "sub-darker": "#5E81AC",
-        "sub-darker-dark": "#5E81AC",
-        "background": "#E5E9F0",
-        "background-dark": "#3B4252",
-        "red": "#BF616A",
-        "orange": "#D08770",
-        "green": "#A3BE8C",
-        "yellow": "#EBCB8B",
-        "yellow-lighter": "#FFE79D",
-        "purple": "#B48EAD",
-        "purple-lighter": "#C69ABE",
-        "blue": "#5E81AC",
-        "gray": "#D8DEE9",
-        "gray-dark": "#4C566A",
+        "main": "#5c6a72",
+        "main-dark": "#d3c6aa",
+        "sub": "#7fbbb3",
+        "sub-dark": "#7fbbb3",
+        "sub-darker": "#83c092",
+        "sub-darker-dark": "#83c092",
+        "background": "#fdf6e3",
+        "background-dark": "#2d353b",
+        "red": "#e67e80",
+        "orange": "#e69875",
+        "green": "#a7c080",
+        "yellow": "#dfa000",
+        "yellow-lighter": "#dbbc7f",
+        "purple": "#df69ba",
+        "purple-lighter": "#d699b6",
+        "blue": "#83c092",
+        "gray": "#bec5b2",
+        "gray-dark": "#4f5b58",
       },
       typography: (theme) => ({
         DEFAULT: {