diff --git a/src/components/sections/feature/FeatureCardTwentyOne.tsx b/src/components/sections/feature/FeatureCardTwentyOne.tsx
index 9c87b5c..0f529bb 100644
--- a/src/components/sections/feature/FeatureCardTwentyOne.tsx
+++ b/src/components/sections/feature/FeatureCardTwentyOne.tsx
@@ -37,22 +37,20 @@ export default function FeatureCardTwentyOne({
   return (
     <section className="w-full py-12 md:py-20 lg:py-24">
       <div className="container mx-auto px-4 md:px-6">
-        {/* Header Section */}
-        <div className="mb-12 md:mb-16 text-center">
-          <div className="inline-flex items-center gap-2 mb-4 px-4 py-2 bg-blue-50 rounded-full">
-            <TagIcon className="w-4 h-4 text-blue-600" />
-            <span className="text-sm font-semibold text-blue-600">{tag}</span>
+        <div className="mb-12 md:mb-16">
+          <div className="flex items-center gap-2 mb-4">
+            <div className="flex items-center gap-2 px-3 py-1 rounded-full bg-blue-50 border border-blue-200">
+              <TagIcon className="w-4 h-4 text-blue-600" />
+              <span className="text-sm font-medium text-blue-600">{tag}</span>
+            </div>
           </div>
           <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-4 text-gray-900">
             {title}
           </h2>
-          <p className="text-lg text-gray-600 max-w-2xl mx-auto">
-            {description}
-          </p>
+          <p className="text-lg text-gray-600 max-w-2xl">{description}</p>
         </div>
 
-        {/* Flip Cards Grid */}
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
           {accordionItems.map((item) => (
             <div
               key={item.id}
@@ -68,47 +66,64 @@ export default function FeatureCardTwentyOne({
                     : "rotateY(0deg)",
                 }}
               >
-                {/* Front Side */}
+                {/* Front of card */}
                 <div
-                  className="absolute w-full h-full bg-white rounded-lg shadow-lg p-6 flex flex-col justify-between border border-gray-200"
+                  className="absolute w-full h-full bg-white rounded-lg border border-gray-200 shadow-md p-6 flex flex-col justify-between"
                   style={{
                     backfaceVisibility: "hidden",
                   }}
                 >
                   <div>
-                    <h3 className="text-xl md:text-2xl font-bold text-gray-900 mb-2">
+                    <h3 className="text-xl font-bold text-gray-900 mb-2">
                       {item.title}
                     </h3>
-                    <p className="text-gray-500 text-sm">
-                      Click to read more
+                    <p className="text-sm text-gray-500">
+                      Click to read full testimonial
                     </p>
                   </div>
-                  <div className="flex items-center justify-center w-12 h-12 bg-blue-100 rounded-lg">
-                    <span className="text-blue-600 font-bold text-lg">
-                      {item.id}
-                    </span>
+                  <div className="flex items-center justify-center w-10 h-10 rounded-full bg-blue-100">
+                    <svg
+                      className="w-5 h-5 text-blue-600"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M9 5l7 7-7 7"
+                      />
+                    </svg>
                   </div>
                 </div>
 
-                {/* Back Side */}
+                {/* Back of card */}
                 <div
-                  className="absolute w-full h-full bg-blue-600 rounded-lg shadow-lg p-6 flex flex-col justify-between border border-blue-700"
+                  className="absolute w-full h-full bg-blue-600 rounded-lg border border-blue-700 shadow-md p-6 flex flex-col justify-between text-white"
                   style={{
                     backfaceVisibility: "hidden",
                     transform: "rotateY(180deg)",
                   }}
                 >
                   <div>
-                    <h3 className="text-xl md:text-2xl font-bold text-white mb-4">
-                      {item.title}
-                    </h3>
-                    <p className="text-blue-50 text-sm leading-relaxed">
-                      {item.content}
-                    </p>
+                    <p className="text-sm leading-relaxed">{item.content}</p>
+                  </div>
+                  <div className="flex items-center justify-center w-10 h-10 rounded-full bg-blue-500">
+                    <svg
+                      className="w-5 h-5 text-white"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M15 19l-7-7 7-7"
+                      />
+                    </svg>
                   </div>
-                  <p className="text-blue-200 text-xs text-center">
-                    Click to flip back
-                  </p>
                 </div>
               </div>
             </div>