diff --git a/src/lib/components/en/about/about.svelte b/src/lib/components/en/about/about.svelte
index c9a2c0e..5063c1a 100644
--- a/src/lib/components/en/about/about.svelte
+++ b/src/lib/components/en/about/about.svelte
@@ -11,7 +11,7 @@ import { twitterUser } from "$lib/name";
     >
       <div
         id="sidebar"
-        class="w-full sm:max-w-sm p-8 bg-gradient-to-b from-blue-500 via-blue-300 to-blue-200"
+        class="w-full sm:max-w-sm p-8 bg-gradient-to-b from-green-400 via-red-300 to-red-400"
       >
         <div class="px-2 mb-12">
           <!-- svelte-ignore a11y-img-redundant-alt -->
@@ -106,11 +106,11 @@ import { twitterUser } from "$lib/name";
                 Built with:
               </div>
               <div class="lg:inline-block lg:w-8/12 w-full">
-                <span class="rounded-xl bg-blue-300 px-3">Svelte</span>
-                <span class="rounded-xl bg-blue-300 px-3">Tailwindcss</span>
-                <span class="rounded-xl bg-blue-300 px-3">Bootstrap icon</span>
-                <span class="rounded-xl bg-blue-300 px-3">Supabase</span>
-                <span class="rounded-xl bg-blue-300 px-3">Vercel</span>
+                <span class="rounded-xl bg-red-300 px-3">Svelte</span>
+                <span class="rounded-xl bg-red-300 px-3">Tailwindcss</span>
+                <span class="rounded-xl bg-red-300 px-3">Bootstrap icon</span>
+                <span class="rounded-xl bg-red-300 px-3">Supabase</span>
+                <span class="rounded-xl bg-red-300 px-3">Vercel</span>
               </div>
             </section>
           </div>
diff --git a/src/lib/components/en/home/heroes.svelte b/src/lib/components/en/home/heroes.svelte
index 0425f8c..530a6fa 100644
--- a/src/lib/components/en/home/heroes.svelte
+++ b/src/lib/components/en/home/heroes.svelte
@@ -47,13 +47,13 @@
             <h1 class="font-bold text-6xl mb-4">Ronnapat Srivoravilai</h1>
             <h2 class="font-bold text-3xl mb-12">I create website application and bot</h2>
             <div>
-                <a href="https://blog.ronnapat.com/" target="_blank" class="bg-blue-400 rounded font-bold text-white text-center px-4 py-3 transition duration-300 ease-in-out hover:bg-blue-400 hover:text-gray-700 mr-2">
+                <a href="https://blog.ronnapat.com/" target="_blank" class="bg-red-400 rounded font-bold text-white text-center px-4 py-3 transition duration-300 ease-in-out hover:bg-red-500 hover:text-green-200 mr-2">
                     Blog
                 </a>
-                <a href="/about" class="bg-blue-400 rounded font-bold text-white text-center px-4 py-3 transition duration-300 ease-in-out hover:bg-blue-400 hover:text-gray-700 mr-2">
+                <a href="/about" class="bg-red-400 rounded font-bold text-white text-center px-4 py-3 transition duration-300 ease-in-out hover:bg-red-500 hover:text-green-200 mr-2">
                     About
                 </a>
-                <a href="/contact" class="bg-blue-400 rounded font-bold text-white text-center px-4 py-3 transition duration-300 ease-in-out hover:bg-blue-400 hover:text-gray-700 mr-2">
+                <a href="/contact" class="bg-red-400 rounded font-bold text-white text-center px-4 py-3 transition duration-300 ease-in-out hover:bg-red-500 hover:text-green-200 mr-2">
                     Contact
                 </a>
             </div>
@@ -78,7 +78,7 @@
     I am a student in Bangkok,Thailand that like coding
     <p class="text-xl">Learn more about me at about page.</p>
 </div>
-<div class="bg-blue-100 dark:bg-slate-600">
+<div class="bg-green-100 dark:bg-slate-600">
 <div class="container mx-auto mt-4 md:mt-0 lg:mt-5 md:space-x-10 md:grid grid-cols-3 justify-center">
     <div class="grid md:justify-center md:items-center sm:float-left">
       <img class="lg:h-80 md:h-64 sm:h-52" src="/cover.jpeg" alt="" />
@@ -106,7 +106,7 @@
             </center>
           </div>
     </section>
-    <div class="bg-blue-100">
+    <div class="bg-red-100">
 <div class="md:h-36 lg:h-40 h-20 container mx-auto mt-10 mb-10 px-1">
     <div class="float-left md:mt-14 lg:mt-14 mt-5">
         <b class="md:text-4xl lg:text-5xl text-2xl">Have a question</b>