diff --git a/src/components/sections/pricing/PricingCenteredCards.tsx b/src/components/sections/pricing/PricingCenteredCards.tsx
index 663df68..a5677fc 100644
--- a/src/components/sections/pricing/PricingCenteredCards.tsx
+++ b/src/components/sections/pricing/PricingCenteredCards.tsx
@@ -3,6 +3,7 @@ import Button from "@/components/ui/Button";
 import TextAnimation from "@/components/ui/TextAnimation";
 import GridOrCarousel from "@/components/ui/GridOrCarousel";
 import ScrollReveal from "@/components/ui/ScrollReveal";
+import { cls } from "@/lib/utils";
 
 type PricingPlan = {
   tag: string;
@@ -52,16 +53,16 @@ const PricingCenteredCards = ({
         {(primaryButton || secondaryButton) && (
           <div className="flex flex-wrap justify-center gap-3 mt-3">
             {primaryButton && <Button text={primaryButton.text} href={primaryButton.href} variant="primary"/>}
-            {secondaryButton && <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary"animationDelay={0.1} />}
+            {secondaryButton && <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary" animationDelay={0.1} />}
           </div>
         )}
       </div>
 
       <ScrollReveal variant="slide-up">
         <GridOrCarousel>
-          {plans.map((plan) => (
-            <div key={plan.tag} className="flex flex-col items-center gap-3 xl:gap-4 2xl:gap-5 p-3 xl:p-4 2xl:p-5 h-full card rounded text-center">
-              <span className="px-5 py-2 text-sm card rounded">{plan.tag}</span>
+          {plans.map((plan, index) => (
+            <div key={plan.tag} className={cls("flex flex-col items-center gap-3 xl:gap-4 2xl:gap-5 p-3 xl:p-4 2xl:p-5 h-full card rounded text-center", index === 1 && "!bg-purple-600 !bg-none text-white")}>
+              <span className={cls("px-5 py-2 text-sm rounded", index === 1 ? "bg-white/20" : "card")}>{plan.tag}</span>
 
               <div className="flex flex-col gap-1">
                 <span className="text-5xl font-medium">{plan.price}</span>
@@ -69,17 +70,17 @@ const PricingCenteredCards = ({
               </div>
 
               <div className="flex flex-col gap-3 w-full">
-                <Button text={plan.primaryButton.text} href={plan.primaryButton.href} variant="primary" className="w-full" />
-                {plan.secondaryButton && <Button text={plan.secondaryButton.text} href={plan.secondaryButton.href} variant="secondary" className="w-full" />}
+                <Button text={plan.primaryButton.text} href={plan.primaryButton.href} variant={index === 1 ? "secondary" : "primary"} className="w-full" />
+                {plan.secondaryButton && <Button text={plan.secondaryButton.text} href={plan.secondaryButton.href} variant={index === 1 ? "primary" : "secondary"} className="w-full" />}
               </div>
 
-              <div className="w-full h-px bg-foreground/20" />
+              <div className={cls("w-full h-px", index === 1 ? "bg-white/20" : "bg-foreground/20")} />
 
               <div className="flex flex-col gap-3 w-full">
                 {plan.features.map((feature) => (
                   <div key={feature} className="flex items-start gap-3">
-                    <div className="flex items-center justify-center shrink-0 size-6 primary-button rounded">
-                      <Check className="size-3 text-primary-cta-text" strokeWidth={2} />
+                    <div className={cls("flex items-center justify-center shrink-0 size-6 rounded", index === 1 ? "bg-white" : "primary-button")}>
+                      <Check className={cls("size-3", index === 1 ? "text-purple-600" : "text-primary-cta-text")} strokeWidth={2} />
                     </div>
                     <span className="text-base text-left">{feature}</span>
                   </div>
@@ -93,4 +94,4 @@ const PricingCenteredCards = ({
   </section>
 );
 
-export default PricingCenteredCards;
+export default PricingCenteredCards;
\ No newline at end of file