UI/UX Polishing: CBT dashboard, sidebar tiers, landing pricing, and exam disclaimer

src/app/cbt/[examId]/page.tsx

@@ -32,6 +32,7 @@ export default function CBTExamPage({ params }: { params: Promise<{ examId: stri
   const resolvedParams = use(params);
   const examId = resolvedParams.examId;
   const [mounted, setMounted] = useState(false);
+  const [examType, setExamType] = useState<string>('Test');
   const [showCalc, setShowCalc] = useState(false);
   const [showScratchpad, setShowScratchpad] = useState(false);
   const [showPeriodicTable, setShowPeriodicTable] = useState(false);
@@ -61,7 +62,10 @@ export default function CBTExamPage({ params }: { params: Promise<{ examId: stri
     submitAttemptToServer,
     resetExamState,
     status,
-    attemptId
+    attemptId,
+    currentQuestionId,
+    getQuestion,
+    examState
   } = useCBTStore();
 
   const { formattedTime, isTimedOut } = useExamTimer();
@@ -75,6 +79,7 @@ export default function CBTExamPage({ params }: { params: Promise<{ examId: stri
         const testRes = await fetch(`${apiUrl}/api/tests/${examId}?user_id=b0e17378-864d-439e-8806-708dc48a891b`);
         if (!testRes.ok) throw new Error("Failed to fetch test structure");
         const testData = await testRes.json();
+        setExamType(testData.type);
         
         // Extract all question IDs from sections
         const questionIds: string[] = [];
@@ -82,23 +87,31 @@ export default function CBTExamPage({ params }: { params: Promise<{ examId: stri
           questionIds.push(...section.questions);
         });
 
-        // Fetch full question objects
-        const fetchedQuestions = await Promise.all(
-          questionIds.map(async (id, idx) => {
-            const qRes = await fetch(`${apiUrl}/api/questions/${id}`);
-            const qData = await qRes.json();
-            return {
-              id: qData.id,
-              number: idx + 1,
-              subject: qData.subject,
-              type: qData.type,
-              text_en: qData.question_text,
-              text_hi: qData.question_text_hi || qData.question_text,
-              options: Object.values(qData.options || {}),
-              options_hi: Object.values(qData.options_hi || qData.options || {}),
-            };
-          })
-        );
+        const qRes = await fetch(`${apiUrl}/api/tests/${examId}/questions`);
+        if (!qRes.ok) throw new Error("Failed to fetch questions in bulk");
+        const allQuestionsData = await qRes.json();
+        
+        // Map questions by ID for fast lookup
+        const questionsMap = new Map();
+        allQuestionsData.forEach((q: any) => {
+          questionsMap.set(q.id, q);
+        });
+
+        // Construct fetchedQuestions retaining the exact order of questionIds
+        const fetchedQuestions = questionIds.map((id, idx) => {
+          const qData = questionsMap.get(id);
+          if (!qData) return null; // Fallback in case of mismatch
+          return {
+            id: qData.id,
+            number: idx + 1,
+            subject: qData.subject,
+            type: qData.type,
+            text_en: qData.question_text,
+            text_hi: qData.question_text_hi || qData.question_text,
+            options: Object.values(qData.options || {}),
+            options_hi: Object.values(qData.options_hi || qData.options || {}),
+          };
+        }).filter(Boolean) as any[];
 
         initExam(examId, fetchedQuestions, testData.total_time * 60);
         setMounted(true);
@@ -221,6 +234,10 @@ export default function CBTExamPage({ params }: { params: Promise<{ examId: stri
             </ul>
           </div>
           
+          <div className="mb-8 p-4 bg-yellow-500/10 border border-yellow-500/30 rounded-xl text-yellow-600 dark:text-yellow-500 text-sm text-left">
+            <strong>Disclaimer:</strong> Only the score obtained in your <em>first attempt</em> will be considered for growth tracking and performance evaluation. Any subsequent attempts are intended solely for practice and will not be included in the official assessment.
+          </div>
+          
           <div className="mb-8 p-4 bg-muted rounded-xl flex items-center justify-between">
             <div>
               <p className="font-semibold">Preferred Theme</p>
@@ -247,19 +264,34 @@ export default function CBTExamPage({ params }: { params: Promise<{ examId: stri
       <ExamResult 
         payload={payload} 
         attemptId={attemptId}
-        onRetake={() => {
+        onRetake={examType === 'DPS' ? () => {
           resetExamState();
           window.location.reload();
-        }} 
+        } : undefined}
       />
     )
   }
 
-  const currentQuestion = questions[currentQuestionIndex];
-  const currentState = answers[currentQuestion.id];
+  const currentQuestion = getQuestion(currentQuestionId)
+  const currentState = currentQuestion ? examState?.answers[currentQuestion.id] : null
 
-  // Derive palette stats
-  const paletteStats = Object.values(answers).reduce(
+  const handleOptionSelect = (qId: string, letter: string, type: string) => {
+    if (type === 'Multiple_Choice') {
+      const currentSelected = currentState?.selected_answer || "";
+      const selectedArray = currentSelected.split(',').filter(Boolean);
+      if (selectedArray.includes(letter)) {
+        const newArray = selectedArray.filter((l: string) => l !== letter).sort();
+        selectAnswer(qId, newArray.length > 0 ? newArray.join(',') : null);
+      } else {
+        selectedArray.push(letter);
+        selectAnswer(qId, selectedArray.sort().join(','));
+      }
+    } else {
+      selectAnswer(qId, letter);
+    }
+  }
+
+  // Effect to close overlay tools on EscapealetteStats = Object.values(answers).reduce(
     (acc, val) => {
       acc[val.status]++;
       return acc;
@@ -322,9 +354,9 @@ export default function CBTExamPage({ params }: { params: Promise<{ examId: stri
         
         <div className="flex items-center gap-3 md:gap-6">
           <div className="hidden lg:flex items-center gap-2 mr-4">
-            <Button variant="ghost" size="sm" onClick={() => setShowCalc(true)} className="gap-2 text-xs font-semibold text-muted-foreground hover:text-foreground"><CalculatorIcon size={14}/> Calc</Button>
-            <Button variant="ghost" size="sm" onClick={() => setShowPeriodicTable(true)} className="gap-2 text-xs font-semibold text-muted-foreground hover:text-foreground"><FlaskConical size={14}/> Periodic Table</Button>
-            <Button variant="ghost" size="sm" onClick={() => setShowScratchpad(true)} className="gap-2 text-xs font-semibold text-muted-foreground hover:text-foreground"><Edit3 size={14}/> Scratchpad</Button>
+            <Button variant="ghost" size="sm" onClick={() => setShowCalc(true)} className="gap-2 text-xs font-semibold text-muted-foreground hover:bg-[#00F0FF] hover:text-black transition-colors"><CalculatorIcon size={14}/> Calculator</Button>
+            <Button variant="ghost" size="sm" onClick={() => setShowPeriodicTable(true)} className="gap-2 text-xs font-semibold text-muted-foreground hover:bg-[#00F0FF] hover:text-black transition-colors"><FlaskConical size={14}/> Periodic Table</Button>
+            <Button variant="ghost" size="sm" onClick={() => setShowScratchpad(true)} className="gap-2 text-xs font-semibold text-muted-foreground hover:bg-[#00F0FF] hover:text-black transition-colors"><Edit3 size={14}/> Scratchpad</Button>
           </div>
           
           <div className={`flex items-center gap-2 px-3 py-1.5 md:px-4 md:py-2 rounded-xl font-mono text-base md:text-lg tracking-wider font-medium border border-border ${isTimedOut ? 'bg-red-500/10 text-red-500' : 'bg-secondary/50 text-foreground'}`}>
@@ -368,7 +400,15 @@ export default function CBTExamPage({ params }: { params: Promise<{ examId: stri
               </div>
 
               <div className="space-y-3 mt-8">
-                {(currentQuestion.type === 'Subjective' || currentQuestion.type === 'Numerical') ? (
+                {currentQuestion.type === 'Numerical' ? (
+                  <input
+                    type="text"
+                    className="w-full p-4 rounded-xl border border-border bg-background focus:ring-2 focus:ring-primary focus:border-transparent text-base"
+                    placeholder="Type your numerical answer here..."
+                    value={currentState?.selected_answer || ""}
+                    onChange={(e) => selectAnswer(currentQuestion.id, e.target.value)}
+                  />
+                ) : currentQuestion.type === 'Subjective' ? (
                   <textarea
                      className="w-full min-h-[150px] p-4 rounded-xl border border-border bg-background focus:ring-2 focus:ring-primary focus:border-transparent resize-y text-base"
                      placeholder="Type your answer or explanation here..."
@@ -378,16 +418,19 @@ export default function CBTExamPage({ params }: { params: Promise<{ examId: stri
                 ) : (
                   currentQuestion.options?.map((option: string, idx: number) => {
                   const letter = String.fromCharCode(65 + idx);
-                  const isSelected = currentState?.selected_answer === letter;
+                  const isSelected = currentQuestion.type === 'Multiple_Choice' 
+                    ? (currentState?.selected_answer || "").split(',').includes(letter)
+                    : currentState?.selected_answer === letter;
+                    
                   return (
                     <button 
                       key={idx}
-                      onClick={() => selectAnswer(currentQuestion.id, letter)}
+                      onClick={() => handleOptionSelect(currentQuestion.id, letter, currentQuestion.type)}
                       className={`w-full text-left p-4 rounded-xl border transition-all duration-200 flex items-center gap-4 group focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent
                         ${isSelected ? 'border-primary bg-primary/5 shadow-[0_0_15px_-5px_var(--color-primary)]' : 'border-border bg-background hover:border-primary/50 hover:bg-secondary/20'}
                       `}
                     >
-                      <div className={`flex-shrink-0 size-8 rounded-lg border flex items-center justify-center font-medium transition-colors
+                      <div className={`flex-shrink-0 size-8 ${currentQuestion.type === 'Multiple_Choice' ? 'rounded-md' : 'rounded-full'} border flex items-center justify-center font-medium transition-colors
                         ${isSelected ? 'border-primary bg-primary text-primary-foreground' : 'border-border text-muted-foreground group-hover:border-primary/50 group-hover:text-primary group-hover:bg-primary/5'}
                       `}>
                         {letter}
@@ -424,7 +467,15 @@ export default function CBTExamPage({ params }: { params: Promise<{ examId: stri
               </div>
 
               <div className="space-y-3 mt-8">
-                {(currentQuestion.type === 'Subjective' || currentQuestion.type === 'Numerical') ? (
+                {currentQuestion.type === 'Numerical' ? (
+                  <input
+                    type="text"
+                    className="w-full p-4 rounded-xl border border-border bg-background focus:ring-2 focus:ring-primary focus:border-transparent text-base"
+                    placeholder="अपना संख्यात्मक उत्तर यहाँ टाइप करें..."
+                    value={currentState?.selected_answer || ""}
+                    onChange={(e) => selectAnswer(currentQuestion.id, e.target.value)}
+                  />
+                ) : currentQuestion.type === 'Subjective' ? (
                   <textarea
                      className="w-full min-h-[150px] p-4 rounded-xl border border-border bg-background focus:ring-2 focus:ring-primary focus:border-transparent resize-y text-base"
                      placeholder="अपना उत्तर या स्पष्टीकरण यहाँ टाइप करें..."
@@ -434,16 +485,19 @@ export default function CBTExamPage({ params }: { params: Promise<{ examId: stri
                 ) : (
                   currentQuestion.options_hi?.map((option: string, idx: number) => {
                   const letter = String.fromCharCode(65 + idx);
-                  const isSelected = currentState?.selected_answer === letter;
+                  const isSelected = currentQuestion.type === 'Multiple_Choice' 
+                    ? (currentState?.selected_answer || "").split(',').includes(letter)
+                    : currentState?.selected_answer === letter;
+                    
                   return (
                     <button 
                       key={idx}
-                      onClick={() => selectAnswer(currentQuestion.id, letter)}
+                      onClick={() => handleOptionSelect(currentQuestion.id, letter, currentQuestion.type)}
                       className={`w-full text-left p-4 rounded-xl border transition-all duration-200 flex items-center gap-4 group focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent
                         ${isSelected ? 'border-primary bg-primary/5 shadow-[0_0_15px_-5px_var(--color-primary)]' : 'border-border bg-background hover:border-primary/50 hover:bg-secondary/20'}
                       `}
                     >
-                      <div className={`flex-shrink-0 size-8 rounded-lg border flex items-center justify-center font-medium transition-colors
+                      <div className={`flex-shrink-0 size-8 ${currentQuestion.type === 'Multiple_Choice' ? 'rounded-md' : 'rounded-full'} border flex items-center justify-center font-medium transition-colors
                         ${isSelected ? 'border-primary bg-primary text-primary-foreground' : 'border-border text-muted-foreground group-hover:border-primary/50 group-hover:text-primary group-hover:bg-primary/5'}
                       `}>
                         {letter}

src/app/dashboard/cbt/page.tsx

@@ -25,6 +25,7 @@ export default function CBTPage() {
   const [targetExam, setTargetExam] = useState("");
   const [attempts, setAttempts] = useState<any[]>([]);
   const [showUpgradeModal, setShowUpgradeModal] = useState(false);
+  const [showAllExams, setShowAllExams] = useState(false);
 
   const { userId, user, hasAccessTo, loading: userLoading } = useActiveUser();
 
@@ -111,76 +112,165 @@ export default function CBTPage() {
             No active exams found for {targetExam || "your target exam"}. Try switching it in settings!
           </div>
         ) : (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {filteredExams.map((exam) => {
-              const attempt = attemptsByTest[exam.id];
-              const isAttempted = !!attempt;
-              const isLocked = !hasAccessTo("weekly-test-series");
-              
-              // Date logic
-              const now = new Date();
-              const scheduledTime = exam.scheduled_date ? new Date(exam.scheduled_date) : now;
-              const isUpcoming = scheduledTime > now;
-              
-              return (
-              <Card key={exam.id} className={`hover:border-[#00F0FF]/50 hover:shadow-[0_0_15px_-5px_#00F0FF] transition-all group ${isAttempted ? 'border-primary/20' : ''} ${isLocked ? 'opacity-80' : ''}`}>
-                <CardContent className="p-6">
-                  <div className="flex justify-between items-start mb-4">
-                    <div className="flex gap-2 flex-wrap">
-                      <Badge variant="outline" className="bg-[#00F0FF]/10 text-[#00F0FF] border-[#00F0FF]/20">
-                        {exam.type} Test
-                      </Badge>
-                      {exam.exam_pattern && (
-                        <Badge variant="outline" className="bg-primary/20 text-primary border-primary/30 uppercase tracking-wider text-[10px]">
-                          {exam.exam_pattern === 'JEE_Main' ? 'JEE Main' : exam.exam_pattern === 'JEE_Advanced' ? 'JEE Advanced' : exam.exam_pattern}
+          <div className="space-y-8">
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+              {filteredExams.slice(0, 3).map((exam) => {
+                const attempt = attemptsByTest[exam.id];
+                const isAttempted = !!attempt;
+                const isLocked = !hasAccessTo("weekly-test-series");
+                
+                // Date logic
+                const now = new Date();
+                const scheduledTime = exam.scheduled_date ? new Date(exam.scheduled_date) : now;
+                const isUpcoming = scheduledTime > now;
+                
+                return (
+                <Card key={exam.id} className={`hover:border-[#00F0FF]/50 hover:shadow-[0_0_15px_-5px_#00F0FF] transition-all group ${isAttempted ? 'border-primary/20' : ''} ${isLocked ? 'opacity-80' : ''}`}>
+                  <CardContent className="p-6">
+                    <div className="flex justify-between items-start mb-4">
+                      <div className="flex gap-2 flex-wrap">
+                        <Badge variant="outline" className="bg-[#00F0FF]/10 text-[#00F0FF] border-[#00F0FF]/20">
+                          {exam.type} Test
                         </Badge>
-                      )}
+                        {exam.exam_pattern && (
+                          <Badge variant="outline" className="bg-primary/20 text-primary border-primary/30 uppercase tracking-wider text-[10px]">
+                            {exam.exam_pattern === 'JEE_Main' ? 'JEE Main' : exam.exam_pattern === 'JEE_Advanced' ? 'JEE Advanced' : exam.exam_pattern}
+                          </Badge>
+                        )}
+                      </div>
+                      {isUpcoming ? (
+                        <Badge variant="secondary" className="bg-yellow-500/10 text-yellow-500 border-yellow-500/20">
+                          Upcoming
+                        </Badge>
+                      ) : isLocked ? (
+                        <Badge variant="outline" className="bg-red-500/10 text-red-500 border-red-500/20 flex items-center gap-1">
+                          <Lock size={12} /> Premium
+                        </Badge>
+                      ) : isAttempted ? (
+                        <Badge variant="secondary" className="bg-green-500/10 text-green-500 border-green-500/20">
+                          Attempted
+                        </Badge>
+                      ) : null}
                     </div>
+                    <h3 className="font-bold text-lg leading-tight mb-2 group-hover:text-[#00F0FF] transition-colors">
+                      {exam.title}
+                    </h3>
+                    <div className="text-sm text-muted-foreground space-y-1 mb-6">
+                      <div className="font-medium text-foreground">
+                        {isUpcoming ? `Available on ${formatDate(exam.scheduled_date!)}` : 'Available Now'}
+                      </div>
+                      <div>{exam.total_time} Min • {exam.difficulty} Difficulty</div>
+                    </div>
+                    
                     {isUpcoming ? (
-                      <Badge variant="secondary" className="bg-yellow-500/10 text-yellow-500 border-yellow-500/20">
-                        Upcoming
-                      </Badge>
-                    ) : isLocked ? (
-                      <Badge variant="outline" className="bg-red-500/10 text-red-500 border-red-500/20 flex items-center gap-1">
-                        <Lock size={12} /> Premium
-                      </Badge>
-                    ) : isAttempted ? (
-                      <Badge variant="secondary" className="bg-green-500/10 text-green-500 border-green-500/20">
-                        Attempted
-                      </Badge>
-                    ) : null}
-                  </div>
-                  <h3 className="font-bold text-lg leading-tight mb-2 group-hover:text-[#00F0FF] transition-colors">
-                    {exam.title}
-                  </h3>
-                  <div className="text-sm text-muted-foreground space-y-1 mb-6">
-                    <div className="font-medium text-foreground">
-                      {isUpcoming ? `Available on ${formatDate(exam.scheduled_date!)}` : 'Available Now'}
-                    </div>
-                    <div>{exam.total_time} Min • {exam.difficulty} Difficulty</div>
-                  </div>
-                  
-                  {isUpcoming ? (
-                    <Button disabled className="w-full gap-2 rounded-xl bg-secondary text-muted-foreground font-bold">
-                      <Clock size={16} /> Starts Soon
-                    </Button>
-                  ) : isLocked ? (
-                    <Button 
-                      onClick={() => setShowUpgradeModal(true)}
-                      className="w-full gap-2 rounded-xl bg-secondary text-muted-foreground border border-dashed border-border hover:border-[#00F0FF]/50 hover:text-foreground font-bold"
-                    >
-                      <Lock size={16} /> Unlock Test
-                    </Button>
-                  ) : (
-                    <Link href={`/cbt/${exam.id}`}>
-                      <Button className={`w-full gap-2 rounded-xl transition-colors font-bold ${isAttempted ? 'bg-secondary border border-border text-foreground' : 'bg-secondary text-foreground hover:bg-[#00F0FF] hover:text-background'}`}>
-                        <PlayCircle size={16} /> {isAttempted ? 'Retake Exam' : 'Start Exam'}
+                      <Button disabled className="w-full gap-2 rounded-xl bg-secondary text-muted-foreground font-bold">
+                        <Clock size={16} /> Starts Soon
                       </Button>
-                    </Link>
-                  )}
-                </CardContent>
-              </Card>
-            )})}
+                    ) : isLocked ? (
+                      <Button 
+                        onClick={() => setShowUpgradeModal(true)}
+                        className="w-full gap-2 rounded-xl bg-secondary text-muted-foreground border border-dashed border-border hover:border-[#00F0FF]/50 hover:text-foreground font-bold"
+                      >
+                        <Lock size={16} /> Unlock Test
+                      </Button>
+                    ) : (
+                      <Link href={isAttempted ? `/cbt/${exam.id}/result` : `/cbt/${exam.id}`}>
+                        <Button className={`w-full gap-2 rounded-xl transition-colors font-bold ${isAttempted ? 'bg-secondary border border-border text-foreground hover:bg-secondary/80' : 'bg-secondary text-foreground hover:bg-[#00F0FF] hover:text-background'}`}>
+                          <PlayCircle size={16} /> {isAttempted ? 'View Result' : 'Start Exam'}
+                        </Button>
+                      </Link>
+                    )}
+                  </CardContent>
+                </Card>
+              )})}
+            </div>
+
+            {filteredExams.length > 3 && !showAllExams && (
+              <div className="flex justify-center mt-6">
+                <Button variant="outline" onClick={() => setShowAllExams(true)} className="rounded-xl border-dashed">
+                  Show More Earlier Exams ({filteredExams.length - 3})
+                </Button>
+              </div>
+            )}
+
+            {showAllExams && filteredExams.length > 3 && (
+              <div className="space-y-6 pt-4 animate-in fade-in duration-500">
+                <h3 className="text-lg font-bold border-b border-border pb-2 flex items-center gap-2">
+                  <Clock size={18} className="text-muted-foreground" /> Earlier Exams
+                </h3>
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                  {filteredExams.slice(3).map((exam) => {
+                    const attempt = attemptsByTest[exam.id];
+                    const isAttempted = !!attempt;
+                    const isLocked = !hasAccessTo("weekly-test-series");
+                    
+                    // Date logic
+                    const now = new Date();
+                    const scheduledTime = exam.scheduled_date ? new Date(exam.scheduled_date) : now;
+                    const isUpcoming = scheduledTime > now;
+                    
+                    return (
+                    <Card key={exam.id} className={`hover:border-[#00F0FF]/50 hover:shadow-[0_0_15px_-5px_#00F0FF] transition-all group ${isAttempted ? 'border-primary/20' : ''} ${isLocked ? 'opacity-80' : ''}`}>
+                      <CardContent className="p-6">
+                        <div className="flex justify-between items-start mb-4">
+                          <div className="flex gap-2 flex-wrap">
+                            <Badge variant="outline" className="bg-[#00F0FF]/10 text-[#00F0FF] border-[#00F0FF]/20">
+                              {exam.type} Test
+                            </Badge>
+                            {exam.exam_pattern && (
+                              <Badge variant="outline" className="bg-primary/20 text-primary border-primary/30 uppercase tracking-wider text-[10px]">
+                                {exam.exam_pattern === 'JEE_Main' ? 'JEE Main' : exam.exam_pattern === 'JEE_Advanced' ? 'JEE Advanced' : exam.exam_pattern}
+                              </Badge>
+                            )}
+                          </div>
+                          {isUpcoming ? (
+                            <Badge variant="secondary" className="bg-yellow-500/10 text-yellow-500 border-yellow-500/20">
+                              Upcoming
+                            </Badge>
+                          ) : isLocked ? (
+                            <Badge variant="outline" className="bg-red-500/10 text-red-500 border-red-500/20 flex items-center gap-1">
+                              <Lock size={12} /> Premium
+                            </Badge>
+                          ) : isAttempted ? (
+                            <Badge variant="secondary" className="bg-green-500/10 text-green-500 border-green-500/20">
+                              Attempted
+                            </Badge>
+                          ) : null}
+                        </div>
+                        <h3 className="font-bold text-lg leading-tight mb-2 group-hover:text-[#00F0FF] transition-colors">
+                          {exam.title}
+                        </h3>
+                        <div className="text-sm text-muted-foreground space-y-1 mb-6">
+                          <div className="font-medium text-foreground">
+                            {isUpcoming ? `Available on ${formatDate(exam.scheduled_date!)}` : 'Available Now'}
+                          </div>
+                          <div>{exam.total_time} Min • {exam.difficulty} Difficulty</div>
+                        </div>
+                        
+                        {isUpcoming ? (
+                          <Button disabled className="w-full gap-2 rounded-xl bg-secondary text-muted-foreground font-bold">
+                            <Clock size={16} /> Starts Soon
+                          </Button>
+                        ) : isLocked ? (
+                          <Button 
+                            onClick={() => setShowUpgradeModal(true)}
+                            className="w-full gap-2 rounded-xl bg-secondary text-muted-foreground border border-dashed border-border hover:border-[#00F0FF]/50 hover:text-foreground font-bold"
+                          >
+                            <Lock size={16} /> Unlock Test
+                          </Button>
+                        ) : (
+                          <Link href={isAttempted ? `/cbt/${exam.id}/result` : `/cbt/${exam.id}`}>
+                            <Button className={`w-full gap-2 rounded-xl transition-colors font-bold ${isAttempted ? 'bg-secondary border border-border text-foreground hover:bg-secondary/80' : 'bg-secondary text-foreground hover:bg-[#00F0FF] hover:text-background'}`}>
+                              <PlayCircle size={16} /> {isAttempted ? 'View Result' : 'Start Exam'}
+                            </Button>
+                          </Link>
+                        )}
+                      </CardContent>
+                    </Card>
+                  )})}
+                </div>
+              </div>
+            )}
           </div>
         )}
       </div>

src/app/dashboard/community/page.tsx

@@ -78,7 +78,7 @@ export default function CommunityPage() {
     return true
   })
 
-  if (!hasAccessTo("ask-doubts-from-tutors")) {
+  if (!hasAccessTo("doubt-resolution-community")) {
     return (
       <div className="p-8 h-full flex flex-col items-center justify-center text-center animate-in fade-in zoom-in duration-500 max-w-2xl mx-auto">
         <div className="size-20 rounded-full bg-red-500/10 flex items-center justify-center mx-auto text-red-500 mb-6">

src/app/dashboard/dpp/page.tsx

@@ -52,9 +52,6 @@ export default function DPPPage() {
             Hyper-personalized problem sets generated daily by our AI Evaluator to target your specific weak areas based on past exam performance.
           </p>
         </div>
-        <Button size="lg" className="h-14 px-8 rounded-xl bg-[#00F0FF] text-background hover:bg-[#00F0FF]/90 font-bold shadow-[0_0_20px_-5px_#00F0FF] shrink-0">
-          <BrainCircuit className="mr-2" /> Generate Custom DPP
-        </Button>
       </div>
 
       <div className="flex flex-col sm:flex-row justify-between items-center gap-4 border-b border-border pb-6">

src/app/dashboard/layout.tsx

@@ -35,6 +35,17 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
   const userInitials = user ? user.name.split(" ").filter(n => /^[a-zA-Z]/.test(n)).slice(0, 2).map(n => n[0]).join("").toUpperCase() : "DS"
   const targetExamLabel = user?.target_exam === "JEE_Main" ? "JEE Main" : user?.target_exam === "JEE_Advanced" ? "JEE Advanced" : user?.target_exam === "NEET" ? "NEET" : "NEET/JEE"
 
+  let daysLeft = null;
+  if (user && user.created_at) {
+    const createdDate = new Date(user.created_at);
+    const msPerDay = 1000 * 60 * 60 * 24;
+    const daysElapsed = Math.floor((new Date().getTime() - createdDate.getTime()) / msPerDay);
+    daysLeft = Math.max(0, 15 - daysElapsed);
+  } else if (user && user.tier === 'Free') {
+    // Mock value for demo Free tier if no date
+    daysLeft = 14; 
+  }
+
   return (
     <div className="flex h-screen bg-background overflow-hidden text-foreground selection:bg-primary/20">
       {/* Sidebar */}
@@ -43,7 +54,22 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
           <Logo href="/dashboard" className="w-full" imageClassName="object-contain object-left scale-110 origin-left" height={56} />
         </div>
         <nav className="flex-1 px-4 space-y-1.5 mt-4 overflow-y-auto">
+          <div className="pt-2 pb-2">
+            <p className="px-3 text-xs font-bold uppercase tracking-widest text-muted-foreground flex items-center gap-2">
+              <span className="w-1.5 h-1.5 rounded-full bg-white"></span> Free Tier
+            </p>
+          </div>
           <NavItem href="/dashboard" icon={<LayoutDashboard size={18} />} label="Overview" active={pathname === "/dashboard"} />
+          <NavItem href="/dashboard/dpp" icon={<FileText size={18} />} label="Daily Practice" active={pathname.startsWith("/dashboard/dpp")} />
+          <NavItem href="/dashboard/materials" icon={<BookOpen size={18} />} label="Study Materials" active={pathname.startsWith("/dashboard/materials")} />
+          <NavItem href="/dashboard/progress" icon={<Activity size={18} />} label="Syllabus Tracker" active={pathname.startsWith("/dashboard/progress")} />
+          <NavItem href="/dashboard/leaderboard" icon={<Trophy size={18} />} label="Leaderboard" active={pathname.startsWith("/dashboard/leaderboard")} />
+          
+          <div className="pt-4 pb-2">
+            <p className="px-3 text-xs font-bold uppercase tracking-widest text-muted-foreground flex items-center gap-2">
+              <span className="w-1.5 h-1.5 rounded-full bg-yellow-500 shadow-[0_0_8px_-2px_var(--color-yellow-500)]"></span> Pro Tier
+            </p>
+          </div>
           <NavItem 
             href="/dashboard/cbt" 
             icon={<Activity size={18} />} 
@@ -51,25 +77,6 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
             active={pathname.startsWith("/dashboard/cbt")} 
             isLocked={!hasAccessTo("weekly-test-series")}
           />
-          <NavItem href="/dashboard/dpp" icon={<FileText size={18} />} label="Daily Practice" active={pathname.startsWith("/dashboard/dpp")} />
-          <NavItem href="/dashboard/materials" icon={<BookOpen size={18} />} label="Study Materials" active={pathname.startsWith("/dashboard/materials")} />
-          
-          <div className="pt-4 pb-2">
-            <p className="px-3 text-xs font-bold uppercase tracking-widest text-muted-foreground">Community & Tracking</p>
-          </div>
-          <NavItem href="/dashboard/leaderboard" icon={<Trophy size={18} />} label="Leaderboard" active={pathname.startsWith("/dashboard/leaderboard")} />
-          <NavItem href="/dashboard/progress" icon={<Activity size={18} />} label="Syllabus Tracker" active={pathname.startsWith("/dashboard/progress")} />
-          <NavItem 
-            href="/dashboard/community" 
-            icon={<BookOpen size={18} />} 
-            label="Doubt Forum" 
-            active={pathname.startsWith("/dashboard/community")} 
-            isLocked={!hasAccessTo("ask-doubts-from-tutors")}
-          />
-          
-          <div className="pt-4 pb-2">
-            <p className="px-3 text-xs font-bold uppercase tracking-widest text-muted-foreground">AI Intelligence</p>
-          </div>
           <NavItem 
             href="/dashboard/analytics" 
             icon={<LineChart size={18} />} 
@@ -84,6 +91,19 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
             active={pathname.startsWith("/dashboard/rank-predictor")} 
             isLocked={!hasAccessTo("college-predictor")}
           />
+          <NavItem 
+            href="/dashboard/community" 
+            icon={<BookOpen size={18} />} 
+            label="Doubt Forum" 
+            active={pathname.startsWith("/dashboard/community")} 
+            isLocked={!hasAccessTo("ask-doubts-from-tutors")}
+          />
+          
+          <div className="pt-4 pb-2">
+            <p className="px-3 text-xs font-bold uppercase tracking-widest text-muted-foreground flex items-center gap-2">
+              <span className="w-1.5 h-1.5 rounded-full bg-[#00F0FF] shadow-[0_0_8px_-2px_#00F0FF]"></span> AI Coach
+            </p>
+          </div>
           <NavItem 
             href="/dashboard/ai-coach" 
             icon={<BrainCircuitIcon />} 
@@ -160,6 +180,11 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
                 {targetExamLabel} Target
               </Badge>
             )}
+            {daysLeft !== null && user?.tier !== 'Al_Coach' && user?.tier !== 'Pro' && (
+              <Badge variant="outline" className="bg-yellow-500/10 text-yellow-500 border-yellow-500/20 font-bold px-2.5 py-0.5">
+                {daysLeft} Days Left in AI Coach Trial
+              </Badge>
+            )}
           </div>
           
           <div className="flex items-center gap-4">
@@ -185,7 +210,7 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
             </div>
 
             <div className="flex items-center gap-2 border-l border-border pl-4">
-              <LanguageToggle />
+              {/* <LanguageToggle /> */}
               <ThemeToggle />
             </div>
           </div>

src/app/dashboard/page.tsx

@@ -54,7 +54,10 @@ export default function DashboardPage() {
       {/* Basic Performance Dashboard (F-05) */}
       <section>
         <div className="flex items-center justify-between mb-5">
-          <h2 className="text-xl font-semibold tracking-tight">Performance Overview</h2>
+          <h2 className="text-xl font-semibold tracking-tight flex items-center gap-2">
+            Performance Overview 
+            <Badge variant="outline" className="border-white/30 text-muted-foreground bg-white/5 rounded-md text-[10px] uppercase font-bold">Free</Badge>
+          </h2>
           <Button onClick={handleExport} variant="outline" size="sm" className="gap-2 font-medium">
             <Share2 size={16} /> Share Card
           </Button>
@@ -109,7 +112,11 @@ export default function DashboardPage() {
         {/* Dynamic DPP Modules */}
         <section>
           <div className="flex items-center justify-between mb-5">
-            <h2 className="text-xl font-semibold tracking-tight">Today's DPPs</h2>
+            <h2 className="text-xl font-semibold tracking-tight flex items-center gap-2">
+              Today's DPPs
+              <Badge variant="outline" className="border-white/30 text-muted-foreground bg-white/5 rounded-md text-[10px] uppercase font-bold">Free (1/Day)</Badge>
+              <Badge variant="outline" className="border-yellow-500/30 text-yellow-500 bg-yellow-500/5 rounded-md text-[10px] uppercase font-bold">Pro (Unlimited)</Badge>
+            </h2>
             <Button variant="ghost" size="sm" className="text-muted-foreground font-medium">View All</Button>
           </div>
           <div className="space-y-4">
@@ -171,7 +178,10 @@ export default function DashboardPage() {
         {/* Upcoming CBTs */}
         <section>
           <div className="flex items-center justify-between mb-5">
-            <h2 className="text-xl font-semibold tracking-tight">Upcoming CBTs</h2>
+            <h2 className="text-xl font-semibold tracking-tight flex items-center gap-2">
+              Upcoming CBTs
+              <Badge variant="outline" className="border-yellow-500/30 text-yellow-500 bg-yellow-500/5 rounded-md text-[10px] uppercase font-bold">Pro</Badge>
+            </h2>
           </div>
           <Card className="overflow-hidden">
             <div className="p-6 border-b border-border flex items-center justify-between bg-background">

src/app/page.tsx

@@ -422,12 +422,12 @@ export default function MarketingPage() {
                 <p className="text-muted-foreground mb-8 text-lg">Perfect to get started.</p>
                 <div className="text-6xl font-bold tracking-tighter mb-10">₹0<span className="text-xl text-muted-foreground font-medium">/yr</span></div>
                 <ul className="space-y-5 mb-10 flex-1 font-medium text-lg">
-                  <li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-muted-foreground" /> 1 Daily Practice Sheet</li>
-                  <li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-muted-foreground" /> Basic Performance Analytics</li>
-                  <li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-muted-foreground" /> Community Access</li>
+                  <li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-white" /> 1 Daily Practice Sheet</li>
+                  <li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-white" /> Basic Performance Analytics</li>
+                  <li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-white" /> Community Access</li>
                 </ul>
                 <Link href="/signup">
-                  <Button variant="outline" size="lg" className="w-full rounded-2xl h-16 border-border font-bold text-lg hover:bg-secondary hover:text-foreground">Get Started Free</Button>
+                  <Button variant="outline" size="lg" className="w-full rounded-2xl h-16 border-white text-white font-bold text-lg hover:bg-secondary hover:text-white">Get Started Free</Button>
                 </Link>
               </Card>
             </motion.div>
@@ -442,47 +442,44 @@ export default function MarketingPage() {
               <Card className="bg-background/80 backdrop-blur-md border-border p-8 rounded-[2.5rem] flex flex-col hover:border-border/80 transition-colors h-full z-10 relative shadow-xl">
                 <h3 className="text-3xl font-bold mb-2">Pro</h3>
                 <p className="text-muted-foreground mb-8 text-lg">Perfect for self-paced practice.</p>
-                <div className="text-6xl font-bold tracking-tighter mb-10">₹2,499<span className="text-xl text-muted-foreground font-medium">/yr</span></div>
+                <div className="text-6xl font-bold tracking-tighter mb-10">₹12,499<span className="text-xl text-muted-foreground font-medium">/yr</span></div>
                 <ul className="space-y-5 mb-10 flex-1 font-medium text-lg">
-                  <li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-primary" /> Unlimited Daily Practice Sheets</li>
-                  <li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-primary" /> Weekly Test Series & Mock Tests</li>
-                  <li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-primary" /> Detailed Performance Analytics</li>
-                  <li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-primary" /> Parent Dashboard Access</li>
+                  <li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-yellow-500" /> Unlimited Daily Practice Sheets</li>
+                  <li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-yellow-500" /> Weekly Test Series & Mock Tests</li>
+                  <li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-yellow-500" /> Detailed Performance Analytics</li>
+                  <li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-yellow-500" /> Parent Dashboard Access</li>
                 </ul>
                 <Link href="/signup">
-                  <Button variant="outline" size="lg" className="w-full rounded-2xl h-16 border-border font-bold text-lg hover:bg-secondary hover:text-foreground">Choose Pro</Button>
+                  <Button size="lg" className="w-full rounded-2xl h-16 bg-yellow-500 text-black font-bold text-lg hover:bg-yellow-400">Choose Pro</Button>
                 </Link>
               </Card>
             </motion.div>
 
             {/* AI Coach Plan */}
             <motion.div
-              initial={{ opacity: 0, x: 50 }}
-              whileInView={{ opacity: 1, x: 0 }}
-              viewport={{ once: true }}
-              transition={{ duration: 0.6, type: "spring", delay: 0.2 }}
-              className="relative mt-8 lg:mt-0"
-            >
-              <div className="absolute -top-4 left-1/2 -translate-x-1/2 z-20">
-                <Badge className="bg-primary text-primary-foreground font-extrabold px-6 py-2 text-sm rounded-full shadow-[0_0_20px_-2px_var(--color-primary)]">MOST POPULAR</Badge>
-              </div>
-              <Card className="bg-secondary/30 backdrop-blur-xl border-primary p-8 rounded-[2.5rem] flex flex-col shadow-[0_0_60px_-15px_var(--color-primary)] hover:shadow-[0_0_80px_-15px_var(--color-primary)] transition-all h-full relative">
-                <div className="absolute inset-0 rounded-[2.5rem] overflow-hidden">
+                initial={{ opacity: 0, x: 50 }}
+                whileInView={{ opacity: 1, x: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, type: "spring", delay: 0.2 }}
+                className="relative mt-8 lg:mt-0"
+              >
+                <Card className="bg-secondary/30 backdrop-blur-xl border-[#00F0FF] p-8 rounded-[2.5rem] flex flex-col transition-all h-full relative">
+                  <div className="absolute inset-0 rounded-[2.5rem] overflow-hidden">
                    <div className="absolute inset-0 -translate-x-full animate-shine bg-gradient-to-r from-transparent via-white/10 to-transparent z-0 pointer-events-none"></div>
                 </div>
                 <div className="relative z-10 flex flex-col h-full mt-4">
                   <h3 className="text-3xl font-bold mb-2">AI Coach</h3>
                   <p className="text-muted-foreground mb-8 text-lg">The complete AI-driven system.</p>
-                  <div className="text-6xl font-bold tracking-tighter mb-10 text-primary drop-shadow-[0_0_10px_var(--color-primary)]">₹4,999<span className="text-xl text-foreground font-medium">/yr</span></div>
+                  <div className="text-6xl font-bold tracking-tighter mb-10 text-[#00F0FF] drop-shadow-[0_0_10px_rgba(0,240,255,0.5)]">₹4,999<span className="text-xl text-foreground font-medium">/yr</span></div>
                   <ul className="space-y-5 mb-10 flex-1 font-medium text-lg">
-                    <li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-[#00F0FF]" /> Everything in Pro</li>
-                    <li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-[#00F0FF]" /> AI Spaced Repetition (Mistakes)</li>
-                    <li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-[#00F0FF]" /> 24/7 Streaming AI Tutor Chat</li>
-                    <li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-[#00F0FF]" /> Predictive Rank & College Predictor</li>
-                  </ul>
-                  <Link href="/signup">
-                    <Button size="lg" className="w-full rounded-2xl h-16 font-bold text-lg bg-primary text-primary-foreground hover:bg-primary/90 shadow-[0_0_20px_-5px_var(--color-primary)] transition-all">Get AI Coach</Button>
-                  </Link>
+                      <li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-[#00F0FF]" /> Everything in Pro</li>
+                      <li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-[#00F0FF]" /> AI Spaced Repetition (Mistakes)</li>
+                      <li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-[#00F0FF]" /> 24/7 Streaming AI Tutor Chat</li>
+                      <li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-[#00F0FF]" /> Predictive Rank & College Predictor</li>
+                    </ul>
+                    <Link href="/signup">
+                      <Button size="lg" className="w-full rounded-2xl h-16 font-bold text-lg bg-[#00F0FF] text-black hover:bg-[#00F0FF]/90 transition-all">Get AI Coach</Button>
+                    </Link>
                 </div>
               </Card>
             </motion.div>
@@ -496,14 +493,14 @@ export default function MarketingPage() {
             <p className="text-muted-foreground text-lg max-w-2xl mx-auto">See exactly what you get with each PragatiVeer plan.</p>
           </div>
           
-          <div className="overflow-x-auto rounded-2xl border border-border/50 bg-secondary/10 backdrop-blur-sm shadow-xl">
+          <div className="overflow-x-auto rounded-2xl border border-border/50 bg-secondary/10 backdrop-blur-sm">
             <table className="w-full text-left border-collapse min-w-[700px]">
               <thead>
                 <tr className="border-b border-border/50 bg-background/50">
                   <th className="p-4 md:p-6 font-bold text-lg w-2/5">Feature</th>
-                  <th className="p-4 md:p-6 font-bold text-lg text-center w-1/5">Free</th>
-                  <th className="p-4 md:p-6 font-bold text-lg text-center w-1/5 text-primary drop-shadow-[0_0_5px_var(--color-primary)]">Pro</th>
-                  <th className="p-4 md:p-6 font-bold text-lg text-center w-1/5 text-[#00F0FF] drop-shadow-[0_0_5px_rgba(0,240,255,0.5)]">AI Coach</th>
+                  <th className="p-4 md:p-6 font-bold text-lg text-center w-1/5 border-x border-white">Free</th>
+                  <th className="p-4 md:p-6 font-bold text-lg text-center w-1/5 text-yellow-500 border-x border-yellow-500">Pro</th>
+                  <th className="p-4 md:p-6 font-bold text-lg text-center w-1/5 text-[#00F0FF] border-x border-[#00F0FF]">AI Coach</th>
                 </tr>
               </thead>
               <tbody className="divide-y divide-border/30 text-sm md:text-base">
@@ -532,15 +529,15 @@ export default function MarketingPage() {
                   { name: "Study Time Optimization", free: false, pro: false, ai: true },
                 ].map((feature, idx) => (
                   <tr key={idx} className="hover:bg-background/40 transition-colors">
-                    <td className="p-4 md:p-6 font-medium">{feature.name}</td>
-                    <td className="p-4 md:p-6 text-center text-muted-foreground">
-                      {typeof feature.free === 'boolean' ? (feature.free ? <CheckCircle2 className="mx-auto text-muted-foreground" size={20} /> : <Minus className="mx-auto opacity-30" size={20} />) : <span className="font-semibold">{feature.free}</span>}
+                    <td className="p-4 md:p-6 font-medium border-y border-border/30">{feature.name}</td>
+                    <td className="p-4 md:p-6 text-center text-muted-foreground border border-white">
+                      {typeof feature.free === 'boolean' ? (feature.free ? <CheckCircle2 className="mx-auto text-white" size={20} /> : <Minus className="mx-auto text-white/30" size={20} />) : <span className="font-semibold text-white">{feature.free}</span>}
                     </td>
-                    <td className="p-4 md:p-6 text-center">
-                      {typeof feature.pro === 'boolean' ? (feature.pro ? <CheckCircle2 className="mx-auto text-primary" size={20} /> : <Minus className="mx-auto opacity-30" size={20} />) : <span className="font-semibold text-primary">{feature.pro}</span>}
+                    <td className="p-4 md:p-6 text-center border border-yellow-500">
+                      {typeof feature.pro === 'boolean' ? (feature.pro ? <CheckCircle2 className="mx-auto text-yellow-500" size={20} /> : <Minus className="mx-auto text-yellow-500/30" size={20} />) : <span className="font-semibold text-yellow-500">{feature.pro}</span>}
                     </td>
-                    <td className="p-4 md:p-6 text-center bg-[#00F0FF]/5">
-                      {typeof feature.ai === 'boolean' ? (feature.ai ? <CheckCircle2 className="mx-auto text-[#00F0FF]" size={20} /> : <Minus className="mx-auto opacity-30" size={20} />) : <span className="font-semibold text-[#00F0FF]">{feature.ai}</span>}
+                    <td className="p-4 md:p-6 text-center bg-[#00F0FF]/5 border border-[#00F0FF]">
+                      {typeof feature.ai === 'boolean' ? (feature.ai ? <CheckCircle2 className="mx-auto text-[#00F0FF]" size={20} /> : <Minus className="mx-auto text-[#00F0FF]/30" size={20} />) : <span className="font-semibold text-[#00F0FF]">{feature.ai}</span>}
                     </td>
                   </tr>
                 ))}

src/app/parent/dashboard/page.tsx

@@ -113,6 +113,7 @@ export default function ParentDashboard() {
           </h1>
           <p className="text-muted-foreground mt-1 font-medium">{t.subtitle} — {data?.student_name}</p>
         </div>
+        {/*
         <div className="flex items-center space-x-3">
           <Label htmlFor="lang-switch" className="font-bold text-muted-foreground">{lang === 'hi' ? 'English' : 'हिंदी'}</Label>
           <Switch 
@@ -121,6 +122,7 @@ export default function ParentDashboard() {
             onCheckedChange={(c) => setLang(c ? 'hi' : 'en')}
           />
         </div>
+        */}
       </header>
 
       {/* Metric Blocks */}

src/app/upgrade/page.tsx

@@ -105,43 +105,42 @@ export default function UpgradePage() {
 
       <div className="grid grid-cols-1 md:grid-cols-3 gap-8 items-start">
         {/* Free Tier */}
-        <Card className="border-border">
+        <Card className="bg-background/80 backdrop-blur-md border-white p-8 rounded-[2.5rem] flex flex-col h-full z-10 relative">
           <CardHeader>
             <CardTitle className="text-2xl">Free</CardTitle>
             <CardDescription>Basic access for everyone.</CardDescription>
-            <div className="mt-4 font-black text-4xl">₹0<span className="text-xl text-muted-foreground font-normal">/mo</span></div>
+            <div className="mt-4 font-black text-4xl">₹10<span className="text-xl text-muted-foreground font-normal">/mo</span></div>
           </CardHeader>
           <CardContent className="space-y-4 text-sm font-medium">
-            <div className="flex items-center gap-3"><Check className="text-green-500" size={18}/> Subject-wise diagnostics</div>
-            <div className="flex items-center gap-3"><Check className="text-green-500" size={18}/> Basic progress tracking</div>
+            <div className="flex items-center gap-3"><Check className="text-white" size={18}/> Subject-wise diagnostics</div>
+            <div className="flex items-center gap-3"><Check className="text-white" size={18}/> Basic progress tracking</div>
             <div className="flex items-center gap-3 text-muted-foreground opacity-50"><Minus size={18}/> Tests</div>
             <div className="flex items-center gap-3 text-muted-foreground opacity-50"><Minus size={18}/> AI Spaced Repetition</div>
             <div className="flex items-center gap-3 text-muted-foreground opacity-50"><Minus size={18}/> Parent Analytics</div>
           </CardContent>
           <CardFooter>
-            <Button variant="outline" className="w-full" disabled>Current Plan</Button>
+            <Button variant="outline" className="w-full rounded-2xl h-16 border-white text-white font-bold text-lg hover:bg-secondary hover:text-white" disabled>Current Plan</Button>
           </CardFooter>
         </Card>
 
         {/* Pro Tier */}
-        <Card className="border-border border-primary shadow-lg shadow-primary/10 relative">
-          <div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-primary text-primary-foreground px-3 py-1 rounded-full text-xs font-bold tracking-wider uppercase">Most Popular</div>
+        <Card className="bg-background/80 backdrop-blur-md border-yellow-500 p-8 rounded-[2.5rem] flex flex-col h-full z-10 relative">
           <CardHeader>
-            <CardTitle className="text-2xl text-primary">Pro</CardTitle>
+            <CardTitle className="text-2xl text-yellow-500">Pro</CardTitle>
             <CardDescription>For serious aspirants.</CardDescription>
-            <div className="mt-4 font-black text-4xl">₹299<span className="text-xl text-muted-foreground font-normal">/mo</span></div>
+            <div className="mt-4 font-black text-4xl">₹1299<span className="text-xl text-muted-foreground font-normal">/mo</span></div>
           </CardHeader>
           <CardContent className="space-y-4 text-sm font-medium">
-            <div className="flex items-center gap-3"><Check className="text-green-500" size={18}/> Everything in Free</div>
-            <div className="flex items-center gap-3"><Check className="text-green-500" size={18}/> Unlimited Sectional Tests</div>
-            <div className="flex items-center gap-3"><Check className="text-green-500" size={18}/> Performance Analytics</div>
-            <div className="flex items-center gap-3"><Check className="text-green-500" size={18}/> Parent Dashboard</div>
+            <div className="flex items-center gap-3"><Check className="text-yellow-500" size={18}/> Everything in Free</div>
+            <div className="flex items-center gap-3"><Check className="text-yellow-500" size={18}/> Unlimited Sectional Tests</div>
+            <div className="flex items-center gap-3"><Check className="text-yellow-500" size={18}/> Performance Analytics</div>
+            <div className="flex items-center gap-3"><Check className="text-yellow-500" size={18}/> Parent Dashboard</div>
             <div className="flex items-center gap-3 text-muted-foreground opacity-50"><Minus size={18}/> AI Mistake Heatmap</div>
             <div className="flex items-center gap-3 text-muted-foreground opacity-50"><Minus size={18}/> Spaced Repetition (SM-2)</div>
           </CardContent>
           <CardFooter>
             <Button 
-              className="w-full" 
+              className="w-full bg-yellow-500 text-black hover:bg-yellow-400 font-bold text-lg rounded-2xl h-16" 
               onClick={() => handleUpgrade("Pro")}
               disabled={!!loadingTier}
             >
@@ -151,23 +150,22 @@ export default function UpgradePage() {
         </Card>
 
         {/* AI Coach Tier */}
-        <Card className="border-border bg-gradient-to-b from-primary/10 to-background border-primary">
+        <Card className="bg-secondary/30 backdrop-blur-xl border-[#00F0FF] p-8 rounded-[2.5rem] flex flex-col transition-all h-full relative">
           <CardHeader>
-            <CardTitle className="text-2xl flex items-center gap-2">AI Coach <ShieldCheck size={24} className="text-primary"/></CardTitle>
+            <CardTitle className="text-2xl flex items-center gap-2 text-[#00F0FF]">AI Coach <ShieldCheck size={24} className="text-[#00F0FF]"/></CardTitle>
             <CardDescription>Personalized mastery loop.</CardDescription>
-            <div className="mt-4 font-black text-4xl">₹599<span className="text-xl text-muted-foreground font-normal">/mo</span></div>
+            <div className="mt-4 font-black text-4xl">₹1599<span className="text-xl text-muted-foreground font-normal">/mo</span></div>
           </CardHeader>
           <CardContent className="space-y-4 text-sm font-medium">
-            <div className="flex items-center gap-3"><Check className="text-green-500" size={18}/> Everything in Pro</div>
-            <div className="flex items-center gap-3"><Check className="text-green-500" size={18}/> Daily AI Error Review Queue</div>
-            <div className="flex items-center gap-3"><Check className="text-green-500" size={18}/> SM-2 Spaced Repetition</div>
-            <div className="flex items-center gap-3"><Check className="text-green-500" size={18}/> Mistake Heatmap Tracking</div>
-            <div className="flex items-center gap-3"><Check className="text-green-500" size={18}/> AI Chat Tutor Support</div>
+            <div className="flex items-center gap-3"><Check className="text-[#00F0FF]" size={18}/> Everything in Pro</div>
+            <div className="flex items-center gap-3"><Check className="text-[#00F0FF]" size={18}/> Daily AI Error Review Queue</div>
+            <div className="flex items-center gap-3"><Check className="text-[#00F0FF]" size={18}/> SM-2 Spaced Repetition</div>
+            <div className="flex items-center gap-3"><Check className="text-[#00F0FF]" size={18}/> Mistake Heatmap Tracking</div>
+            <div className="flex items-center gap-3"><Check className="text-[#00F0FF]" size={18}/> AI Chat Tutor Support</div>
           </CardContent>
           <CardFooter>
             <Button 
-              className="w-full font-bold" 
-              size="lg"
+              className="w-full font-bold text-lg rounded-2xl h-16 bg-[#00F0FF] text-black hover:bg-[#00F0FF]/90 transition-all" 
               onClick={() => handleUpgrade("Al_Coach")}
               disabled={!!loadingTier}
             >