diff --git a/website/src/components/About.jsx b/website/src/components/About.jsx
index efc9c66..c81f3b6 100644
--- a/website/src/components/About.jsx
+++ b/website/src/components/About.jsx
@@ -51,7 +51,7 @@ export default function About() {
         </p>
 
         {/* Developer Card */}
-        <div className="max-w-[24rem] w-full bg-slate-700 hover:bg-slate-600 rounded-md flex items-center p-4 my-6">
+        <div className="max-w-[24rem] w-full bg-gray-700 hover:bg-gray-600 rounded-md flex items-center p-4 my-6">
           <img
             src="https://avatars.githubusercontent.com/u/61614402?v=4"
             alt=""
diff --git a/website/src/components/Carousal.jsx b/website/src/components/Carousal.jsx
index fd661d7..17b9939 100644
--- a/website/src/components/Carousal.jsx
+++ b/website/src/components/Carousal.jsx
@@ -50,20 +50,20 @@ const Carousel = () => {
         </div>
       </div>
 
-      <div className="py-2 px-10 w-full bg-[#15212b] text-neutral-400 flex items-center justify-center">
+      <div className="py-2 px-10 w-full bg-[#15212b] text-neutral-300 flex items-center justify-center">
         <div className="controllor w-full max-w-[41rem] flex items-center justify-between font-['ubuntu']">
           <div className="title"><h1>{images[currentIndex].title}</h1>
-          <p className="text-sm text-neutral-500">{images[currentIndex].lightingCondition}</p>
+          <p className="text-sm text-neutral-400">{images[currentIndex].lightingCondition}</p>
           </div>
           <div className="controls">
             <button
-              className="bg-slate-600 w-[3rem] h-[3rem] rounded-full mx-2 hover:bg-slate-500"
+              className="bg-gray-800 w-[3rem] h-[3rem] rounded-full mx-2 hover:bg-gray-700"
               onClick={goToPrevSlide}
             >
               <i className="fa-solid fa-angle-left"></i>
             </button>
             <button
-              className="bg-slate-600 w-[3rem] h-[3rem] rounded-full ml-2 hover:bg-slate-500"
+              className="bg-gray-800 w-[3rem] h-[3rem] rounded-full ml-2 hover:bg-gray-700"
               onClick={goToNextSlide}
             >
               <i className="fa-solid fa-angle-right"></i>
diff --git a/website/src/components/Installation.jsx b/website/src/components/Installation.jsx
index 4f0c08b..63247f5 100644
--- a/website/src/components/Installation.jsx
+++ b/website/src/components/Installation.jsx
@@ -34,10 +34,10 @@ export default function Installation() {
         <div className="flex items-center justify-center border-t-[1px] border-slate-400 md:hidden">
           {tabs.map((item) => {
             let myStyle =
-              "bg-secondary hover:bg-slate-600 py-2 w-auto px-8";
+              "bg-secondary hover:bg-gray-600 py-2 w-auto px-8";
             if (item.tab_name === activeTab) {
               myStyle =
-                "bg-slate-500 hover:bg-slate-600 py-2 w-auto px-8";
+                "bg-gray-500 hover:bg-gray-600 py-2 w-auto px-8";
             }
             return (
               <Button
@@ -55,10 +55,10 @@ export default function Installation() {
         <div className="md:flex items-end flex-col hidden">
           {tabs.map((item) => {
             let myStyle =
-              "bg-secondary hover:bg-slate-600 py-2 w-40 border-b-[1px]";
+              "bg-secondary hover:bg-gray-600 py-2 w-40 border-b-[1px]";
             if (item.tab_name === activeTab) {
               myStyle =
-                "bg-slate-500 hover:bg-slate-600 py-2 w-40 border-b-[1px]";
+                "bg-gray-500 hover:bg-gray-600 py-2 w-40 border-b-[1px]";
             }
             return (
               <Button