diff --git a/src/app/dashboard/ai-coach/college-predictor/page.tsx b/src/app/dashboard/ai-coach/college-predictor/page.tsx
index ccfa7fe..906a0fe 100644
--- a/src/app/dashboard/ai-coach/college-predictor/page.tsx
+++ b/src/app/dashboard/ai-coach/college-predictor/page.tsx
@@ -48,6 +48,19 @@ const CustomLabel = (props: any) => {
       </text>
     </g>
   );
+// Custom Tooltip to clean up hover information
+const CustomTooltip = ({ active, payload }: any) => {
+  if (active && payload && payload.length) {
+    const data = payload[0].payload;
+    return (
+      <div className="bg-background border border-border p-3 rounded-lg shadow-md text-sm min-w-[150px]">
+        <p className="font-bold text-foreground mb-1">{data.label}</p>
+        <p className="text-muted-foreground">Test: <span className="font-semibold text-foreground">{data.name}</span></p>
+        <p className="text-muted-foreground">Score: <span className="font-bold text-blue-500">{data.value}</span> / 300</p>
+      </div>
+    );
+  }
+  return null;
 };
 
 // Custom dot
@@ -118,10 +131,7 @@ export default function CollegePredictorPage() {
                   tickLine={false}
                   label={{ value: 'Mock Exam Score', angle: -90, position: 'insideLeft', fill: 'var(--muted-foreground)', fontSize: 12, fontWeight: 'bold' }}
                 />
-                <Tooltip 
-                  contentStyle={{ backgroundColor: 'var(--background)', borderColor: 'var(--border)', color: 'var(--foreground)' }}
-                  itemStyle={{ color: 'var(--foreground)' }}
-                />
+                <Tooltip content={<CustomTooltip />} />
                 
                 {/* Target Spec Line Band */}
                 <ReferenceArea y1={230} y2={250} fill="rgba(250, 204, 21, 0.2)" />