diff --git a/src/components/FrameworkDetailsSection/FrameworkDetailsSection.tsx b/src/components/FrameworkDetailsSection/FrameworkDetailsSection.tsx
index 56ec61e..14594a9 100644
--- a/src/components/FrameworkDetailsSection/FrameworkDetailsSection.tsx
+++ b/src/components/FrameworkDetailsSection/FrameworkDetailsSection.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
-import { Check } from "lucide-react";
+import { CircleCheckBig } from "lucide-react";
 import {
   FrameworkDetailsSectionProps,
   CapabilityListProps,
@@ -11,17 +11,15 @@ const CapabilityList: React.FC<CapabilityListProps> = ({
   capabilities,
 }) => {
   return (
-    <Card className="bg-card border-border">
+    <Card>
       <CardHeader>
-        <CardTitle className="text-xl font-semibold text-foreground">
-          {title}
-        </CardTitle>
+        <CardTitle className="text-2xl text-primary">{title}</CardTitle>
       </CardHeader>
       <CardContent className="space-y-3">
         {capabilities.map((capability, index) => (
-          <div key={index} className="flex items-center gap-3">
-            <Check className="h-4 w-4 text-green-500 flex-shrink-0" />
-            <span className="text-muted-foreground text-sm">{capability}</span>
+          <div key={index} className="flex items-center gap-5">
+            <CircleCheckBig className="h-6 w-6 text-green-500 stroke-3" />
+            <span className="text-muted-foreground text-md">{capability}</span>
           </div>
         ))}
       </CardContent>
@@ -67,10 +65,10 @@ const FrameworkDetailsSection: React.FC<FrameworkDetailsSectionProps> = () => {
     <section className="py-20 px-4 sm:px-6 lg:px-8 bg-background">
       <div className="container mx-auto">
         <div className="text-center mb-16">
-          <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-6">
+          <h2 className="text-3xl font-bold text-foreground mb-6">
             Framework & Technology Details
           </h2>
-          <p className="text-lg text-muted-foreground max-w-3xl mx-auto">
+          <p className="text-lg font-semibold text-muted-foreground max-w-3xl mx-auto">
             Deep dive into the technology that powers our rapid development
           </p>
         </div>
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index 113d66c..3adac87 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card"
       className={cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        "bg-card text-card-foreground flex flex-col gap-6 py-6 shadow-sm",
         className,
       )}
       {...props}
diff --git a/src/index.css b/src/index.css
index 3b2334e..225bde1 100644
--- a/src/index.css
+++ b/src/index.css
@@ -85,7 +85,7 @@
 .dark {
   --background: oklch(0.145 0 0);
   --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
+  --card: oklch(0.16 0 0);
   --card-foreground: oklch(0.985 0 0);
   --popover: oklch(0.205 0 0);
   --popover-foreground: oklch(0.985 0 0);