diff --git a/src/app/dashboard/ai-coach/college-predictor/page.tsx b/src/app/dashboard/ai-coach/college-predictor/page.tsx
index ab6a25c..81e0514 100644
--- a/src/app/dashboard/ai-coach/college-predictor/page.tsx
+++ b/src/app/dashboard/ai-coach/college-predictor/page.tsx
@@ -8,10 +8,10 @@ import { useActiveUser, isDemoUser } from "@/hooks/useActiveUser"
 
 const DEMO_TREND_DATA = [
   { name: 'Week 1', rank: 4500, label: 'NIT Trichy CSE' },
-  { name: 'Week 2', rank: 4100 },
-  { name: 'Week 3', rank: 3800 },
-  { name: 'Week 4', rank: 3300 },
-  { name: 'Week 5', rank: 2900 },
+  { name: 'Week 2', rank: 4100, label: 'NIT Surathkal CSE' },
+  { name: 'Week 3', rank: 3800, label: 'IIT Mandi EEE' },
+  { name: 'Week 4', rank: 3300, label: 'IIT Ropar CSE' },
+  { name: 'Week 5', rank: 2900, label: 'IIT Guwahati ECE' },
   { name: 'Week 6', rank: 2750, label: 'IIT Roorkee' },
 ]
 
@@ -26,13 +26,31 @@ const ZERO_TREND_DATA = [
 
 // Custom Label to permanently show text on the graph (not on hover)
 const CustomLabel = (props: any) => {
-  const { x, y, stroke, value, index, data } = props;
+  const { x, y, index, data } = props;
   const point = data[index];
   if (!point || !point.label) return null;
+  
+  let anchor = "middle";
+  let xPos = x;
+  let yPos = y - 20;
+
+  if (index === 0) {
+    anchor = "start";
+    xPos = x + 5;
+  } else if (index === data.length - 1) {
+    anchor = "end";
+    xPos = x - 5;
+  }
+  
   return (
-    <text x={x} y={y - 15} fill="#fff" fontSize={12} fontWeight="bold" textAnchor="middle">
-      {point.label}
-    </text>
+    <g>
+      <text x={xPos} y={yPos} fill="#fff" fontSize={11} fontWeight="bold" textAnchor={anchor as any}>
+        {point.label}
+      </text>
+      <text x={xPos} y={yPos + 14} fill="var(--cyan-ai)" fontSize={11} fontWeight="bold" textAnchor={anchor as any}>
+        Rank: {point.rank}
+      </text>
+    </g>
   );
 };
 
@@ -74,16 +92,11 @@ export default function CollegePredictorPage() {
           </CardHeader>
           <CardContent className="h-[350px] mt-4">
             <ResponsiveContainer width="100%" height="100%">
-              <LineChart data={trendData} margin={{ top: 25, right: 30, bottom: 5, left: 10 }}>
+              <LineChart data={trendData} margin={{ top: 35, right: 30, bottom: 5, left: 10 }}>
                 {/* User said static line, not dotted. So removed strokeDasharray from grid? Let's make it solid if they mean grid, or just the line. Line is monotone. */}
                 <CartesianGrid stroke="#333" vertical={false} />
                 <XAxis dataKey="name" stroke="#888" tick={{ fill: '#888' }} />
                 <YAxis stroke="#888" tick={{ fill: '#888' }} domain={[0, 5000]} reversed={true} />
-                <Tooltip 
-                  contentStyle={{ backgroundColor: '#1f2937', borderColor: '#374151', borderRadius: '8px' }}
-                  itemStyle={{ color: 'var(--cyan-ai)' }}
-                  formatter={(value: any) => [`Rank: ${value}`, 'Prediction']}
-                />
                 <Line 
                   type="linear" 
                   dataKey="rank"