diff --git a/src/components/sections/about/AboutFeaturesSplit.tsx b/src/components/sections/about/AboutFeaturesSplit.tsx
index 6e3cb94..d6dda0d 100644
--- a/src/components/sections/about/AboutFeaturesSplit.tsx
+++ b/src/components/sections/about/AboutFeaturesSplit.tsx
@@ -54,7 +54,7 @@ const AboutFeaturesSplit = ({
         </div>
 
         <div className="flex flex-col md:flex-row md:items-stretch gap-5">
-          <div className="flex flex-col justify-center gap-3 xl:gap-4 2xl:gap-5 p-3 xl:p-4 2xl:p-5 w-full md:w-4/10 2xl:w-3/10 card rounded">
+          <div className="flex flex-col justify-center gap-3 xl:gap-4 2xl:gap-5 p-3 xl:p-4 2xl:p-5 w-full md:w-4/10 2xl:w-3/10 card rounded bg-background/60 backdrop-blur-md">
             {items.map((item, index) => {
               const ItemIcon = resolveIcon(item.icon);
               return (
@@ -74,7 +74,7 @@ const AboutFeaturesSplit = ({
             })}
           </div>
 
-          <div className="p-3 xl:p-4 2xl:p-5 w-full md:w-6/10 2xl:w-7/10 h-80 md:h-auto card rounded overflow-hidden">
+          <div className="p-3 xl:p-4 2xl:p-5 w-full md:w-6/10 2xl:w-7/10 h-80 md:h-auto card rounded overflow-hidden bg-background/60 backdrop-blur-md">
             <div className="relative size-full">
               <ImageOrVideo imageSrc={imageSrc} videoSrc={videoSrc} className="absolute inset-0 object-cover rounded" />
             </div>
diff --git a/src/components/sections/contact/ContactCta.tsx b/src/components/sections/contact/ContactCta.tsx
index 6d71ce6..842f23d 100644
--- a/src/components/sections/contact/ContactCta.tsx
+++ b/src/components/sections/contact/ContactCta.tsx
@@ -16,7 +16,7 @@ const ContactCta = ({
   return (
     <section aria-label="Contact section" className="py-20">
       <div className="w-content-width mx-auto">
-        <ScrollReveal variant="fade" className="flex items-center justify-center py-20 px-5 md:px-10 card rounded">
+        <ScrollReveal variant="fade" className="flex items-center justify-center py-20 px-5 md:px-10 card rounded bg-background/60 backdrop-blur-md">
           <div className="w-full md:w-3/4 flex flex-col items-center gap-3">
             <span className="card rounded px-3 py-1 text-sm">{tag}</span>
 
diff --git a/src/components/sections/faq/FaqSplitMedia.tsx b/src/components/sections/faq/FaqSplitMedia.tsx
index 442a7a9..3a64a8e 100644
--- a/src/components/sections/faq/FaqSplitMedia.tsx
+++ b/src/components/sections/faq/FaqSplitMedia.tsx
@@ -84,7 +84,7 @@ const FaqSplitMedia = ({
               <div
                 key={index}
                 onClick={() => handleToggle(index)}
-                className="p-3 2xl:p-4 rounded secondary-button cursor-pointer select-none"
+                className="p-3 2xl:p-4 rounded secondary-button cursor-pointer select-none bg-background/60 backdrop-blur-md"
               >
                 <div className="flex items-center justify-between gap-3">
                   <h3 className="text-base md:text-lg font-medium leading-tight">{item.question}</h3>
diff --git a/src/components/sections/features/FeaturesBento.tsx b/src/components/sections/features/FeaturesBento.tsx
index c9a541a..258b7a3 100644
--- a/src/components/sections/features/FeaturesBento.tsx
+++ b/src/components/sections/features/FeaturesBento.tsx
@@ -84,7 +84,7 @@ const FeaturesBento = ({
       <ScrollReveal variant="fade-blur">
         <GridOrCarousel>
           {features.map((feature) => (
-            <div key={feature.title} className="flex flex-col gap-3 xl:gap-4 2xl:gap-5 p-3 xl:p-4 2xl:p-5 card rounded h-full">
+            <div key={feature.title} className="flex flex-col gap-3 xl:gap-4 2xl:gap-5 p-3 xl:p-4 2xl:p-5 card rounded h-full bg-background/60 backdrop-blur-md">
               <div className="relative h-72 overflow-hidden">{getBentoComponent(feature)}</div>
               <div className="flex flex-col gap-1">
                 <h3 className="text-2xl font-medium leading-tight">{feature.title}</h3>
diff --git a/src/components/sections/metrics/MetricsMediaCards.tsx b/src/components/sections/metrics/MetricsMediaCards.tsx
index 9cdb3f2..c3a78cf 100644
--- a/src/components/sections/metrics/MetricsMediaCards.tsx
+++ b/src/components/sections/metrics/MetricsMediaCards.tsx
@@ -68,7 +68,7 @@ const MetricsMediaCards = ({
               className={cls("grid grid-cols-2 gap-5", shouldSpanFull && "md:col-span-2")}
             >
               <div className={cls(
-                "flex flex-col justify-between gap-3 xl:gap-4 2xl:gap-5 p-3 xl:p-4 2xl:p-5 card rounded",
+                "flex flex-col justify-between gap-3 xl:gap-4 2xl:gap-5 p-3 xl:p-4 2xl:p-5 card rounded bg-background/60 backdrop-blur-md",
                 shouldSpanFull ? "aspect-square md:aspect-video" : "aspect-square",
                 isEven && "order-2 md:order-1"
               )}>
diff --git a/src/components/sections/product/ProductRatingCards.tsx b/src/components/sections/product/ProductRatingCards.tsx
index 54bf7d8..f961d53 100644
--- a/src/components/sections/product/ProductRatingCards.tsx
+++ b/src/components/sections/product/ProductRatingCards.tsx
@@ -96,7 +96,7 @@ const ProductRatingCards = ({
               <button
                 key={product.name}
                 onClick={product.onClick}
-                className="group h-full flex flex-col gap-3 xl:gap-4 2xl:gap-5 p-3 xl:p-4 2xl:p-5 text-left card rounded cursor-pointer"
+                className="group h-full flex flex-col gap-3 xl:gap-4 2xl:gap-5 p-3 xl:p-4 2xl:p-5 text-left card rounded cursor-pointer bg-background/60 backdrop-blur-md"
               >
                 <div className="aspect-square rounded overflow-hidden">
                   <ImageOrVideo imageSrc={product.imageSrc} />
diff --git a/src/components/sections/testimonial/TestimonialMetricsCards.tsx b/src/components/sections/testimonial/TestimonialMetricsCards.tsx
index 54b9d97..a0d0280 100644
--- a/src/components/sections/testimonial/TestimonialMetricsCards.tsx
+++ b/src/components/sections/testimonial/TestimonialMetricsCards.tsx
@@ -72,7 +72,7 @@ const TestimonialMetricsCards = ({
                 <div key={testimonial.name} className="relative aspect-3/4 rounded overflow-hidden">
                   <ImageOrVideo imageSrc={testimonial.imageSrc} videoSrc={testimonial.videoSrc} />
 
-                  <div className="absolute inset-x-5 bottom-5 flex flex-col gap-2 p-3 xl:p-4 2xl:p-5 card rounded backdrop-blur-sm">
+                  <div className="absolute inset-x-5 bottom-5 flex flex-col gap-2 p-3 xl:p-4 2xl:p-5 card rounded bg-background/60 backdrop-blur-md">
                     <div className="flex gap-1 mb-1">
                       {Array.from({ length: 5 }).map((_, index) => (
                         <Star
@@ -95,7 +95,7 @@ const TestimonialMetricsCards = ({
             </GridOrCarousel>
           </ScrollReveal>
 
-          <ScrollReveal variant="fade-blur" className="flex flex-col md:flex-row items-center justify-between w-content-width mx-auto p-8 md:py-16 card rounded">
+          <ScrollReveal variant="fade-blur" className="flex flex-col md:flex-row items-center justify-between w-content-width mx-auto p-8 md:py-16 card rounded bg-background/60 backdrop-blur-md">
             {metrics.map((metric, index) => (
               <div key={metric.label} className="flex flex-col md:flex-row items-center w-full md:flex-1">
                 <div className={cls("flex flex-col items-center flex-1 gap-1 text-center md:py-0", index === 0 ? "pb-5" : index === 2 ? "pt-5" : "py-5")}>