diff --git a/src/components/SocialLayout.tsx b/src/components/SocialLayout.tsx
index 7ed8495..b0aa4b2 100644
--- a/src/components/SocialLayout.tsx
+++ b/src/components/SocialLayout.tsx
@@ -11,7 +11,10 @@ export const SocialLayout = () => {
           reference={social.ref}
           copyValue={social.copyValue}
         >
-          {React.createElement(social.icon)}
+          {React.createElement(social.icon, {
+            className:
+              'fill-current focus:outline-none transition duration-300 ease-in-out hover:text-[#ad87ed]',
+          })}
         </Icon>
       ))}
     </div>
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
index 535af9f..ebe02f6 100644
--- a/src/styles/globals.scss
+++ b/src/styles/globals.scss
@@ -5,13 +5,13 @@
 @layer base {
   html {
     scrollbar-width: thin;
-    scrollbar-color: #8a58e0 transparent;
+    scrollbar-color: #8040ee transparent;
   }
 }
 
 @layer components {
   ::selection {
-    background-color: #8039e2;
+    background-color: #8040ee;
     color: #fff;
   }
 
@@ -20,7 +20,7 @@
   }
 
   ::-webkit-scrollbar-thumb {
-    background-color: #8a58e0;
+    background-color: #8040ee;
     border-radius: 10px;
   }
 }