everything looks nice!

src/app/portfolio/[slug]/(portfolio)/your-projects/live/SurveyedResultsPieChart.tsx

@@ -24,6 +24,17 @@ export default function SurveyedPieChart({
     "Rescheduled",
   ];
 
+  const colors = [
+    "indigo-600",
+    "indigo-400",
+    "blue-300",
+    "amber-400",
+    "amber-200",
+    "slate-400",
+    "gray-300",
+    "gray-100",
+  ];
+
   const data = useMemo(() => {
     const outcomeCounts: Record<string, number> = {};
     deals.forEach((deal) => {
@@ -32,9 +43,11 @@ export default function SurveyedPieChart({
         outcomeCounts[outcome] = (outcomeCounts[outcome] || 0) + 1;
       }
     });
+    const total = Object.values(outcomeCounts).reduce((a, b) => a + b, 0);
     return Object.entries(outcomeCounts).map(([name, amount]) => ({
       name,
       amount,
+      percentage: total ? ((amount / total) * 100).toFixed(1) : "0.0",
     }));
   }, [deals]);
 
@@ -45,35 +58,54 @@ export default function SurveyedPieChart({
   };
 
   return (
-    <Card className="max-w-lg mx-auto bg-white rounded-2xl shadow-md hover:shadow-lg transition-all duration-200 p-6">
-      <div className="flex flex-col items-center space-y-4">
-        <Title className="text-gray-800 text-lg font-semibold tracking-tight text-center">
-          Survey Outcomes
-        </Title>
-        <p className="text-sm text-gray-500 text-center -mt-2">
-          Click a segment to view filtered properties
-        </p>
+<Card className="flex flex-col items-center p-6 pt-10 pb-8">
+  {/* Header */}
+  <div className="text-center mb-4">
+    <Title className="text-gray-800 text-[15px] font-semibold tracking-tight">
+      Survey Performance
+    </Title>
+    <p className="text-xs text-gray-500 mt-1">
+      Click a segment or label to view filtered properties
+    </p>
+  </div>
 
-        <DonutChart
-          data={data}
-          category="amount"
-          index="name"
-          valueFormatter={(n) => `${n.toLocaleString()}`}
-          colors={[
-            "#2d348f",
-            "#14163d",
-            "#3943b7",
-            "#5d6be0",
-            "black",
-            "#eff6fc",
-            "lightBlue",
-            "navy",
-            "azure",
-          ]}
-          className="w-64 h-64 cursor-pointer transition-transform hover:scale-[1.03]"
-          onValueChange={handleClick}
-        />
+  {/* Chart */}
+  <div className="relative flex justify-center items-center mt-8">
+    <DonutChart
+      data={data}
+      category="amount"
+      index="name"
+      valueFormatter={(n) => `${n.toLocaleString()}`}
+      colors={colors}
+      onValueChange={handleClick}
+      showLabel={false}
+      className="w-64 h-64 cursor-pointer"
+      customTooltip={({ payload }) => {
+        const item = payload?.[0]?.payload;
+        if (!item) return null;
+        const { name, amount } = item;
+        return (
+          <div
+            className="bg-white/80 backdrop-blur-md px-4 py-2.5 rounded-lg shadow-md 
+                      border border-gray-200 text-gray-800 text-sm font-medium"
+          >
+            <div className="flex flex-col items-center">
+              <span className="text-[0.95rem] font-semibold text-gray-900">{name}</span>
+              <span className="opacity-70">{amount.toLocaleString()}</span>
+            </div>
+          </div>
+        );
+      }}
+    />
+    {data.length > 0 && (
+      <div className="absolute text-center">
+        <span className="text-3xl font-semibold text-gray-800">
+          {data.reduce((a, b) => a + b.amount, 0)}
+        </span>
       </div>
-    </Card>
+    )}
+  </div>
+</Card>
+
   );
 }