diff --git a/src/components/sections/feature/FeatureCardNineteen.tsx b/src/components/sections/feature/FeatureCardNineteen.tsx
index 33fd7b7..9facab3 100644
--- a/src/components/sections/feature/FeatureCardNineteen.tsx
+++ b/src/components/sections/feature/FeatureCardNineteen.tsx
@@ -119,12 +119,14 @@ const FeatureCardNineteen = ({
             titleImageClassName={titleImageClassName}
             ariaLabel={ariaLabel}
         >
-            {features.map((feature) => {
+            {features.map((feature, index) => {
                 const stepNumber = String(feature.id).padStart(2, "0");
+                const backgroundColors = ["bg-blue-100", "bg-pink-100", "bg-yellow-100", "bg-green-100", "bg-purple-100", "bg-orange-100"];
+                const bgColor = backgroundColors[index % backgroundColors.length];
                 return (
                     <div
                         key={feature.id}
-                        className={cls("relative z-1 w-full min-h-0 h-full flex flex-col md:flex-row justify-between overflow-hidden", cardContentClassName)}
+                        className={cls("relative z-1 w-full min-h-0 h-full flex flex-col md:flex-row justify-between overflow-hidden", bgColor, cardContentClassName)}
                     >
                         <div className="relative w-full md:w-1/2 md:h-full flex flex-col justify-between p-8 md:p-12">
                             <div className="flex flex-col gap-4 md:gap-6">