diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index e033c38..08f4939 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -12,21 +12,21 @@ const baseStyles = {
 
 const variantStyles = {
   solid: {
-    cyan: 'relative overflow-hidden bg-cyan-500 text-white before:absolute before:inset-0 active:before:bg-transparent hover:before:bg-white/10 active:bg-cyan-600 active:text-white/80 before:transition-colors',
+    cyan: 'relative overflow-hidden bg-cyan-500 text-white before:absolute before:inset-0 hover:bg-cyan-400 active:before:bg-transparent hover:before:bg-white/10 active:bg-cyan-500 active:text-white/80 before:transition-colors',
     white:
       'bg-white text-cyan-900 hover:bg-white/90 active:bg-white/90 active:text-cyan-900/70',
     gray: 'bg-gray-800 text-white hover:bg-gray-900 active:bg-gray-800 active:text-white/80',
     green: 'bg-green-500 text-white hover:bg-green-600',
   },
   outline: {
-    cyan: 'border-cyan-500 text-cyan-500',
-    gray: 'border-gray-200 text-gray-600 hover:text-cyan-500 hover:border-cyan-500 active:border-cyan-500',
-    white: 'border-gray-300 text-white hover:text-cyan-500 hover:border-cyan-500 active:border-cyan-500',
+    cyan: 'border-cyan-500 text-cyan-500 hover:border-cyan-400 hover:text-cyan-400 active:border-cyan-400',
+    gray: 'border-gray-200 text-gray-600 hover:text-cyan-400 hover:border-cyan-400 active:border-cyan-400',
+    white: 'border-gray-300 text-white hover:text-cyan-400 hover:border-cyan-400 active:border-cyan-400',
   },
   link: {
     cyan: 'text-cyan-400 underline hover:text-cyan-300',
     white: 'text-white underline hover:text-cyan-300',
-    dark: 'text-gray-900 underline hover:text-cyan-500',
+    dark: 'text-gray-900 underline hover:text-cyan-400',
   },
 }
 
diff --git a/src/components/Texts.tsx b/src/components/Texts.tsx
index 7e81fc9..0bc9624 100644
--- a/src/components/Texts.tsx
+++ b/src/components/Texts.tsx
@@ -12,8 +12,8 @@ const colorVariants = {
   primary: 'text-gray-900',
   secondary: 'text-gray-600',
   light: 'text-gray-50',
-  accent: 'text-cyan-500',
-  cyan: 'text-cyan-50',
+  accent: 'text-cyan-400',
+  cyan: 'text-cyan-400',
   white: 'text-white',
   dark: 'text-gray-950',
   tertiary: 'text-gray-700',
diff --git a/src/pages/cloud/CloudBluePrint.tsx b/src/pages/cloud/CloudBluePrint.tsx
index ef673e7..7160dbc 100644
--- a/src/pages/cloud/CloudBluePrint.tsx
+++ b/src/pages/cloud/CloudBluePrint.tsx
@@ -20,7 +20,7 @@ export function CloudBluePrint() {
       <div className="max-w-7xl bg-white mx-auto py-12 border border-t-0 border-b-0 border-gray-100">
         <Container>
           <div className="mx-auto max-w-4xl sm:text-center">
-            <Eyebrow className="text-cyan-500">Featured Blueprint</Eyebrow>
+            <Eyebrow className="text-cyan-400">Featured Blueprint</Eyebrow>
 
             <H3 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900 mt-2">
               Your Personal Sovereign Cloud Workspace
diff --git a/src/pages/cloud/CloudFeatures.tsx b/src/pages/cloud/CloudFeatures.tsx
index 6d0df56..c365ee7 100644
--- a/src/pages/cloud/CloudFeatures.tsx
+++ b/src/pages/cloud/CloudFeatures.tsx
@@ -254,8 +254,8 @@ function CloudFeaturesDesktop() {
             className={clsx(
               'relative rounded-2xl outline-2 transition-all duration-300 ease-in-out hover:scale-105 hover:bg-gray-800/30 ml-16',
               selectedIndex === featureIndex
-                ? 'outline-cyan-500'
-                : 'outline-transparent hover:outline-cyan-500',
+                ? 'outline-cyan-400'
+                : 'outline-transparent hover:outline-cyan-400',
             )}
           >
             {featureIndex === selectedIndex && (
diff --git a/src/pages/cloud/CloudFeaturesLight.tsx b/src/pages/cloud/CloudFeaturesLight.tsx
index d8ed698..497ee3c 100644
--- a/src/pages/cloud/CloudFeaturesLight.tsx
+++ b/src/pages/cloud/CloudFeaturesLight.tsx
@@ -153,8 +153,8 @@ function CloudFeaturesDesktop() {
             className={clsx(
               'relative rounded-2xl outline-2 transition-all duration-300 ease-in-out hover:scale-105 hover:bg-gray-100',
               selectedIndex === featureIndex
-                ? 'outline-cyan-500'
-                : 'outline-transparent hover:outline-cyan-500',
+                ? 'outline-cyan-400'
+                : 'outline-transparent hover:outline-cyan-400',
             )}
           >
             {featureIndex === selectedIndex && (
diff --git a/src/pages/cloud/CloudPros.tsx b/src/pages/cloud/CloudPros.tsx
index 4061180..e1f3631 100644
--- a/src/pages/cloud/CloudPros.tsx
+++ b/src/pages/cloud/CloudPros.tsx
@@ -37,7 +37,7 @@ export function CloudPros() {
       {/* Intro Block */}
       <div className="bg-white w-full max-w-7xl mx-auto border border-t-0 border-b-0 border-gray-100">
         <div className="px-8 py-12 max-w-4xl">
-          <Eyebrow className="uppercase tracking-[0.16em] text-cyan-500">
+          <Eyebrow className="uppercase tracking-[0.16em] text-cyan-400">
             Cloud Advantages
           </Eyebrow>
 
diff --git a/src/pages/cloud/CloudUseCases.tsx b/src/pages/cloud/CloudUseCases.tsx
index 537979e..9d9beb3 100644
--- a/src/pages/cloud/CloudUseCases.tsx
+++ b/src/pages/cloud/CloudUseCases.tsx
@@ -48,7 +48,7 @@ export function CloudUseCases() {
       <div className="max-w-7xl bg-white mx-auto py-12 border border-t-0 border-b-0 border-gray-100">
         <Container>
           <div className="mx-auto max-w-4xl sm:text-center">
-            <Eyebrow className="text-cyan-500">USE CASES</Eyebrow>
+            <Eyebrow className="text-cyan-400">USE CASES</Eyebrow>
 
             <H3 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
               Built for intelligent workloads across every edge.
diff --git a/src/pages/compute/ComputeCapabilities.tsx b/src/pages/compute/ComputeCapabilities.tsx
index 1eec05c..c1a3f7d 100644
--- a/src/pages/compute/ComputeCapabilities.tsx
+++ b/src/pages/compute/ComputeCapabilities.tsx
@@ -47,7 +47,7 @@ export function ComputeCapabilities() {
       <div className="relative mx-auto max-w-7xl border border-t-0 border-b-0 border-gray-800 bg-[#111111] py-12">
         <Container>
           <div className="mx-auto max-w-4xl sm:text-center">
-            <Eyebrow className="text-cyan-500">CAPABILITIES</Eyebrow>
+            <Eyebrow className="text-cyan-400">CAPABILITIES</Eyebrow>
             <H3 className="text-3xl lg:text-4xl font-medium tracking-tight text-white">
               What You Can Run
             </H3>
diff --git a/src/pages/pods/PodsPro.tsx b/src/pages/pods/PodsPro.tsx
index ddeec07..bc065db 100644
--- a/src/pages/pods/PodsPro.tsx
+++ b/src/pages/pods/PodsPro.tsx
@@ -57,7 +57,7 @@ export function PodsPro() {
       <div className="bg-white w-full max-w-7xl mx-auto border border-t-0 border-b-0 border-gray-100">
         <div className="px-8 py-12 max-w-4xl mx-auto flex flex-col items-center justify-center min-h-[220px] text-center">
           
-          <Eyebrow className="text-cyan-500">
+          <Eyebrow className="text-cyan-400">
             {product.subtitle}
           </Eyebrow>