diff --git a/src/components/About.tsx b/src/components/About.tsx
index 2c5438d..727ec5b 100644
--- a/src/components/About.tsx
+++ b/src/components/About.tsx
@@ -10,8 +10,7 @@ export function About() {
       className="relative overflow-hidden bg-gray-900 py-20 lg:py-32 lg:top-0 top-0"
     >
       <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
-        <CircleBackground color="#fff" className="animate-spin-slower" />
-        <CircleBackground color="#06b6d4" className="animate-spin-reverse-slower" />
+        <CircleBackground color="#06b6d4" className="animate-spin-slower" />
       </div>
       <Container className="relative">
         <div className="mx-auto max-w-3xl text-center">
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 99a630e..9ff92ac 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -16,8 +16,8 @@ const variantStyles = {
     gray: 'bg-gray-800 text-white hover:bg-gray-900 active:bg-gray-800 active:text-white/80',
   },
   outline: {
-    gray: 'border-gray-300 text-gray-700 hover:text-gray-500 hover:border-gray-400 active:bg-gray-100 active:text-gray-700/80',
-    white: 'border-gray-300 text-white hover:text-gray-200 hover:border-gray-400 active:bg-gray-100 active:text-gray-700/80', 
+    gray: 'border-gray-300 text-gray-700 hover:border-cyan-500 active:border-cyan-500',
+    white: 'border-gray-300 text-white hover:border-cyan-500 active:border-cyan-500',
   },
 }
 
diff --git a/src/components/CallToAction.tsx b/src/components/CallToAction.tsx
index c8bc92b..f5e46fe 100644
--- a/src/components/CallToAction.tsx
+++ b/src/components/CallToAction.tsx
@@ -12,7 +12,7 @@ export function CallToAction() {
       className="relative overflow-hidden bg-gray-900 py-20 sm:py-28"
     >
       <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
-        <CircleBackground color="#fff" className="animate-spin-slower" />
+        <CircleBackground color="#06b6d4" className="animate-spin-slower" />
       </div>
       <Container className="relative">
         <div className="mx-auto max-w-2xl sm:text-center">
diff --git a/src/components/PrimaryFeatures.tsx b/src/components/PrimaryFeatures.tsx
index 4a75197..c03cd3f 100644
--- a/src/components/PrimaryFeatures.tsx
+++ b/src/components/PrimaryFeatures.tsx
@@ -256,10 +256,10 @@ function FeaturesDesktop() {
           <div
             key={feature.name}
             className={clsx(
-              'relative rounded-2xl border transition-all duration-300 ease-in-out hover:scale-105 hover:bg-gray-800/30',
+              'relative rounded-2xl outline outline-2 transition-all duration-300 ease-in-out hover:scale-105 hover:bg-gray-800/30',
               selectedIndex === featureIndex
-                ? 'border-cyan-500'
-                : 'border-transparent hover:border-cyan-500',
+                ? 'outline-cyan-500'
+                : 'outline-transparent hover:outline-cyan-500',
             )}
           >
             {featureIndex === selectedIndex && (
@@ -362,10 +362,10 @@ function FeaturesMobile() {
           >
             <div
               className={clsx(
-                'relative transform overflow-hidden rounded-2xl bg-gray-800 px-5 py-6 border transition-colors',
+                'relative transform overflow-hidden rounded-2xl bg-gray-800 px-5 py-6 outline outline-2 transition-colors',
                 activeIndex === featureIndex
-                  ? 'border-cyan-500'
-                  : 'border-transparent hover:border-cyan-500',
+                  ? 'outline-cyan-500'
+                  : 'outline-transparent hover:outline-cyan-500',
               )}
             >
               <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">