diff --git a/app/components/ClassMates.tsx b/app/components/ClassMates.tsx
index d157775..683150e 100644
--- a/app/components/ClassMates.tsx
+++ b/app/components/ClassMates.tsx
@@ -1,146 +1,43 @@
-let classmatesData = [
-    {
-        id: "1",
-        name: "Daniel Nguyen",
-        program: "Graduate Program",
-        type: "Student",
-        avatar: "avatar1.png"
-    },
-    {
-        id: "2",
-        name: "Sarah Anderson",
-        program: "Post-Graduate Program",
-        type: "Student",
-        avatar: "avatar2.png"
-    },
-    {
-        id: "3",
-        name: "John Smith",
-        program: "Undergraduate Program",
-        type: "Student",
-        avatar: "avatar3.png"
-    },
-    {
-        id: "4",
-        name: "Emily Davis",
-        program: "Graduate Program",
-        type: "Student",
-        avatar: "avatar4.png"
-    },
-    {
-        id: "5",
-        name: "Michael Johnson",
-        program: "Post-Graduate Program",
-        type: "Student",
-        avatar: "avatar5.png"
-    },
-    {
-        id: "6",
-        name: "Jessica Wilson",
-        program: "Undergraduate Program",
-        type: "Student",
-        avatar: "avatar6.png"
-    },
-    {
-        id: "7",
-        name: "David Brown",
-        program: "Graduate Program",
-        type: "Student",
-        avatar: "avatar1.png"
-    },
-    {
-        id: "8",
-        name: "Laura Lee",
-        program: "Post-Graduate Program",
-        type: "Student",
-        avatar: "avatar2.png"
-    },
-    {
-        id: "9",
-        name: "Chris Miller",
-        program: "Undergraduate Program",
-        type: "Student",
-        avatar: "avatar3.png"
-    },
-    {
-        id: "10",
-        name: "Sophia Taylor",
-        program: "Graduate Program",
-        type: "Student",
-        avatar: "avatar4.png"
-    },
-    {
-        id: "11",
-        name: "James Anderson",
-        program: "Post-Graduate Program",
-        type: "Student",
-        avatar: "avatar5.png"
-    },
-    {
-        id: "12",
-        name: "Olivia Thomas",
-        program: "Undergraduate Program",
-        type: "Student",
-        avatar: "avatar6.png"
-    },
-    {
-        id: "13",
-        name: "Ethan Martinez",
-        program: "Graduate Program",
-        type: "Student",
-        avatar: "avatar1.png"
-    },
-    {
-        id: "14",
-        name: "Ava Garcia",
-        program: "Post-Graduate Program",
-        type: "Student",
-        avatar: "avatar2.png"
-    },
-    {
-        id: "15",
-        name: "Noah Rodriguez",
-        program: "Undergraduate Program",
-        type: "Student",
-        avatar: "avatar3.png"
-    },
-    {
-        id: "16",
-        name: "Mia Martinez",
-        program: "Graduate Program",
-        type: "Student",
-        avatar: "avatar4.png"
-    },
-    {
-        id: "17",
-        name: "Lucas Wilson",
-        program: "Post-Graduate Program",
-        type: "Student",
-        avatar: "avatar5.png"
-    },
-    {
-        id: "18",
-        name: "Isabella Clark",
-        program: "Undergraduate Program",
-        type: "Student",
-        avatar: "avatar6.png"
-    },
-    {
-        id: "19",
-        name: "Liam Walker",
-        program: "Graduate Program",
-        type: "Student",
-        avatar: "avatar1.png"
-    },
-    {
-        id: "20",
-        name: "Charlotte Lewis",
-        program: "Post-Graduate Program",
-        type: "Student",
-        avatar: "avatar2.png"
-    }
-];
-export default function Index() {
+import React, { useEffect, useState } from 'react';
+interface Performer {
+    id: number;
+    name: string;
+    avatar: string;
+    program: string;
+    type: string;
+}
+
+export default function classMatesDirectory() {
+    const [classmatesData, setData] = useState<Performer[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<Error | null>(null);
+
+
+    useEffect(() => {
+        fetch('https://iimtt-api.s38.siliconpin.com/api/class-mates')
+          .then(res => {
+            if (!res.ok) {
+              throw new Error('Network response was not ok');
+            }
+            return res.json();
+          })
+          .then(data => {
+            setData(data);
+            setLoading(false);
+          })
+          .catch(error => {
+            console.error('Error fetching data:', error);
+            setError(error);
+            setLoading(false);
+          });
+      }, []);
+      if (loading) {
+        return <div>Loading...</div>;
+      }
+    
+      if (error) {
+        return <div>Error: {error.message}</div>;
+      }
     return (
         <div className=''>
             <p className='text-[18px] font-[700] text-[#525252] border-b-[1px] border-b-[#CFCFCF] py-5 pl-5 container-fluid'>
@@ -149,9 +46,9 @@ export default function Index() {
             <div className='container mx-auto grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 gap-6 place-items-center p-6'>
                 {classmatesData.map(data => (
                     <div key={data.id} className='relative flex flex-col justify-center items-center shadow-lg w-full rounded-[10px] py-8 overflow-hidden' style={{ background: 'transparent' }}>
-                        <div className='absolute top-0 left-0 w-full h-1/2' style={{ backgroundImage: `url('../../assets/${data.avatar}')`, backgroundRepeat: 'no-repeat', backgroundSize: 'cover', backgroundPosition: 'center', filter: 'blur(8px)'}}></div>
+                        <div className='absolute top-0 left-0 w-full h-1/2' style={{ backgroundImage: `url('${data.avatar}')`, backgroundRepeat: 'no-repeat', backgroundSize: 'cover', backgroundPosition: 'center', filter: 'blur(8px)'}}></div>
                         <div className='absolute bottom-0 left-0 w-full h-1/2 bg-[#FFF] '></div><br /><br />
-                        <img className='w-[60px] h-[60px] border-[4px] border-[#FFF] rounded-full z-10' src={`../../assets/${data.avatar}`} alt="" />
+                        <img className='w-[60px] h-[60px] border-[4px] border-[#FFF] rounded-full z-10' src={data.avatar} alt="" />
                         <p className='z-10 text-[16px] font-[700] text-[]'>{data.name}</p>
                         <p className='z-10 text-[12px] font-[500] text-[#6E6E6E]'>
                             <span>{data.program}</span> | <span>{data.type}</span>
@@ -161,11 +58,4 @@ export default function Index() {
             </div>
         </div>
     );
-}
-
-
-
-{/* <div className="h-[90px] bg-cover bg-center w-full" style={{ backgroundImage: `url('../../assets/${data.avatar}')` }}>
-    <img className='w-[60px] h-[60px]' src={`../../assets/${data.avatar}`} alt="" />
-    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis quasi nisi eligendi consectetur sequi nemo doloribus, obcaecati corrupti dolorum dolores omnis magni similique. Debitis unde nam, magnam maxime magni repudiandae.</p>
-</div> */}
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/app/components/ContinueLearning.tsx b/app/components/ContinueLearning.tsx
index adc66e3..efc3b51 100644
--- a/app/components/ContinueLearning.tsx
+++ b/app/components/ContinueLearning.tsx
@@ -1,28 +1,43 @@
-let courseData = [
-    {
-      id : "1",
-      title : "Life History of Dr. Maria Montessori",
-      chapter : "1",
-      Program : "Graduate Program",
-      img : "../../assets/course1.jpg"
-    },
-      {
-      id : "2",
-      title : "Introduction to Montessori Methods",
-      chapter : "2",
-      Program : "Graduate Program",
-      img : "../../assets/course2.jpg"
-    },
-    {
-      id : "3",
-      title : "Exercises on Practical Life",
-      chapter : "3",
-      Program : "Graduate Program",
-      img : "../../assets/course3.jpg"
-    }
-];
+import React, { useEffect, useState } from 'react';
+interface Performer {
+    id: number;
+    title: string;
+    chapter: string;
+    img: string;
+    Program: string;
+}
 
-export default function Index() {
+export default function ContinueLearning() {
+    const [courseData, setData] = useState<Performer[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<Error | null>(null);
+
+
+    useEffect(() => {
+        fetch('https://iimtt-api.s38.siliconpin.com/api/continue-learning')
+          .then(res => {
+            if (!res.ok) {
+              throw new Error('Network response was not ok');
+            }
+            return res.json();
+          })
+          .then(data => {
+            setData(data);
+            setLoading(false);
+          })
+          .catch(error => {
+            console.error('Error fetching data:', error);
+            setError(error);
+            setLoading(false);
+          });
+        }, []);
+      if (loading) {
+        return <div>Loading...</div>;
+      }
+    
+      if (error) {
+        return <div>Error: {error.message}</div>;
+      }
     return (
         <section className='bg-[#FCFCFC]'>
             <div className='container mx-auto'>
diff --git a/app/components/KnowledgeQuests.tsx b/app/components/KnowledgeQuests.tsx
index a191567..6f0342c 100644
--- a/app/components/KnowledgeQuests.tsx
+++ b/app/components/KnowledgeQuests.tsx
@@ -1,31 +1,43 @@
-let knowledgeData = [
-    {
-      id: "1",
-      status: "1",
-      title: "Assessment on Special Education",
-      challenge: "Challenge yourself & climb the leaderboard.",
-      question: "Subjective Question",
-      img: "../../assets/knowledge1.jpg"
-    },
-    {
-      id: "2",
-      status: "1",
-      title: "Quiz on Children Psychology",
-      challenge: "Challenge yourself & climb the leaderboard.",
-      question: "MCQ",
-      img: "../../assets/knowledge2.jpg"
-    },
-    {
-      id: "3",
-      status: "1",
-      title: "Quiz on Montessori Methods",
-      challenge: "Challenge yourself & climb the leaderboard.",
-      question: "MCQ",
-      img: "../../assets/knowledge3.jpg"
-    }
-];
+import React, { useEffect, useState } from 'react';
+interface Performer {
+    id: number;
+    title: string;
+    img: string;
+    challenge: string;
+    question: string;
+}
 
-export default function(){
+export default function KnowledgeQuests() {
+    const [knowledgeData, setData] = useState<Performer[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<Error | null>(null);
+
+
+    useEffect(() => {
+        fetch('https://iimtt-api.s38.siliconpin.com/api/knowledge-quests')
+          .then(res => {
+            if (!res.ok) {
+              throw new Error('Network response was not ok');
+            }
+            return res.json();
+          })
+          .then(data => {
+            setData(data);
+            setLoading(false);
+          })
+          .catch(error => {
+            console.error('Error fetching data:', error);
+            setError(error);
+            setLoading(false);
+          });
+      }, []);
+      if (loading) {
+        return <div>Loading...</div>;
+      }
+    
+      if (error) {
+        return <div>Error: {error.message}</div>;
+      }
     return(
         <section className=''>
             <div className=''>
@@ -51,4 +63,4 @@ export default function(){
             </div>
         </section> 
     )
-}
\ No newline at end of file
+}
diff --git a/app/components/ProgressReview.tsx b/app/components/ProgressReview.tsx
index 3fae61e..05ba6ac 100644
--- a/app/components/ProgressReview.tsx
+++ b/app/components/ProgressReview.tsx
@@ -1,397 +1,71 @@
-
-
-let quizModuleData = {
-    modules: [
-      {
-        moduleId: 1,
-        type: "Theory Quiz Scores",
-        moduleName: "Module 1 - Life History of Dr. Maria Montessori",
-        quizzes: [
-          {
-            quizId: 1,
-            quizName: "Lorem Ipsum Dolor Sit",
-            attendQuestion: 48,
-            totalQuestion: 50,
-            internalMarks: 28,
-            attendance: 20,
-            questions: [
-              {
-                questionId: 1,
-                questionText: "What is the capital of France?",
-                options: [
-                  "Paris",
-                  "London",
-                  "Berlin",
-                  "Madrid"
-                ],
-                correctAnswer: "Paris"
-              },
-              {
-                questionId: 2,
-                questionText: "What is 2 + 2?",
-                options: [
-                  "3",
-                  "4",
-                  "5",
-                  "6"
-                ],
-                correctAnswer: "4"
-              },
-              {
-                questionId: 3,
-                questionText: "What is the boiling point of water?",
-                options: [
-                  "90°C",
-                  "100°C",
-                  "110°C",
-                  "120°C"
-                ],
-                correctAnswer: "100°C"
-              },
-              {
-                questionId: 4,
-                questionText: "Who wrote 'To Kill a Mockingbird'?",
-                options: [
-                  "Harper Lee",
-                  "Mark Twain",
-                  "J.K. Rowling",
-                  "Ernest Hemingway"
-                ],
-                correctAnswer: "Harper Lee"
-              },
-              {
-                questionId: 5,
-                questionText: "What is the largest planet in our solar system?",
-                options: [
-                  "Earth",
-                  "Mars",
-                  "Jupiter",
-                  "Saturn"
-                ],
-                correctAnswer: "Jupiter"
-              },
-              {
-                questionId: 6,
-                questionText: "What is the speed of light?",
-                options: [
-                  "300,000 km/s",
-                  "150,000 km/s",
-                  "100,000 km/s",
-                  "50,000 km/s"
-                ],
-                correctAnswer: "300,000 km/s"
-              },
-              {
-                questionId: 7,
-                questionText: "Who painted the Mona Lisa?",
-                options: [
-                  "Vincent van Gogh",
-                  "Pablo Picasso",
-                  "Leonardo da Vinci",
-                  "Claude Monet"
-                ],
-                correctAnswer: "Leonardo da Vinci"
-              },
-              {
-                questionId: 8,
-                questionText: "What is the chemical symbol for gold?",
-                options: [
-                  "Au",
-                  "Ag",
-                  "Pt",
-                  "Pb"
-                ],
-                correctAnswer: "Au"
-              },
-              {
-                questionId: 9,
-                questionText: "What is the tallest mountain in the world?",
-                options: [
-                  "K2",
-                  "Kangchenjunga",
-                  "Mount Everest",
-                  "Lhotse"
-                ],
-                correctAnswer: "Mount Everest"
-              },
-              {
-                questionId: 10,
-                questionText: "What is the smallest unit of life?",
-                options: [
-                  "Cell",
-                  "Atom",
-                  "Molecule",
-                  "Organ"
-                ],
-                correctAnswer: "Cell"
-              }
-            ]
-          },
-          {
-            quizId: 2,
-            quizName: "Lorem Ipsum Dolor Sit",
-            attendQuestion: 45,
-            totalQuestion: 50,
-            internalMarks: 29,
-            attendance: 20,
-            questions: [
-              {
-                questionId: 1,
-                questionText: "What is the capital of Italy?",
-                options: [
-                  "Rome",
-                  "Venice",
-                  "Florence",
-                  "Milan"
-                ],
-                correctAnswer: "Rome"
-              },
-              {
-                questionId: 2,
-                questionText: "What is 3 + 5?",
-                options: [
-                  "7",
-                  "8",
-                  "9",
-                  "10"
-                ],
-                correctAnswer: "8"
-              },
-              {
-                questionId: 3,
-                questionText: "What is the freezing point of water?",
-                options: [
-                  "0°C",
-                  "32°C",
-                  "100°C",
-                  "273K"
-                ],
-                correctAnswer: "0°C"
-              },
-              {
-                questionId: 4,
-                questionText: "Who wrote 'Pride and Prejudice'?",
-                options: [
-                  "Jane Austen",
-                  "Charles Dickens",
-                  "Emily Brontë",
-                  "George Eliot"
-                ],
-                correctAnswer: "Jane Austen"
-              },
-              {
-                questionId: 5,
-                questionText: "What is the smallest planet in our solar system?",
-                options: [
-                  "Mercury",
-                  "Venus",
-                  "Earth",
-                  "Mars"
-                ],
-                correctAnswer: "Mercury"
-              },
-              {
-                questionId: 6,
-                questionText: "What is the speed of sound?",
-                options: [
-                  "343 m/s",
-                  "300 m/s",
-                  "1500 m/s",
-                  "1000 m/s"
-                ],
-                correctAnswer: "343 m/s"
-              },
-              {
-                questionId: 7,
-                questionText: "Who painted the Starry Night?",
-                options: [
-                  "Vincent van Gogh",
-                  "Pablo Picasso",
-                  "Leonardo da Vinci",
-                  "Claude Monet"
-                ],
-                correctAnswer: "Vincent van Gogh"
-              },
-              {
-                questionId: 8,
-                questionText: "What is the chemical symbol for silver?",
-                options: [
-                  "Au",
-                  "Ag",
-                  "Pt",
-                  "Pb"
-                ],
-                correctAnswer: "Ag"
-              },
-              {
-                questionId: 9,
-                questionText: "What is the second tallest mountain in the world?",
-                options: [
-                  "K2",
-                  "Kangchenjunga",
-                  "Mount Everest",
-                  "Lhotse"
-                ],
-                correctAnswer: "K2"
-              },
-              {
-                questionId: 10,
-                questionText: "What is the largest organ in the human body?",
-                options: [
-                  "Liver",
-                  "Heart",
-                  "Skin",
-                  "Brain"
-                ],
-                correctAnswer: "Skin"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        moduleId: 2,
-        type: "Theory Quiz Scores",
-        moduleName: "Module 2",
-        attendQuestion: 42,
-        totalQuestion: 50,
-        internalMarks: 22,
-        attendance: 20,
-        quizzes: [
-          {
-            quizId: 1,
-            quizName: "Quiz 1",
-            attendQuestion: 49,
-            totalQuestion: 50,
-            internalMarks: 2,
-            attendance: 20,
-            questions: [
-              {
-                questionId: 1,
-                questionText: "What is the capital of Germany?",
-                options: [
-                  "Berlin",
-                  "Munich",
-                  "Hamburg",
-                  "Frankfurt"
-                ],
-                correctAnswer: "Berlin"
-              },
-              {
-                questionId: 2,
-                questionText: "What is 5 + 3?",
-                options: [
-                  "7",
-                  "8",
-                  "9",
-                  "10"
-                ],
-                correctAnswer: "8"
-              },
-              {
-                questionId: 3,
-                questionText: "What is the melting point of ice?",
-                options: [
-                  "0°C",
-                  "32°C",
-                  "100°C",
-                  "273K"
-                ],
-                correctAnswer: "0°C"
-              },
-              {
-                questionId: 4,
-                questionText: "Who wrote '1984'?",
-                options: [
-                  "George Orwell",
-                  "Aldous Huxley",
-                  "Ray Bradbury",
-                  "J.D. Salinger"
-                ],
-                correctAnswer: "George Orwell"
-              },
-              {
-                questionId: 5,
-                questionText: "What is the second smallest planet in our solar system?",
-                options: [
-                  "Mercury",
-                  "Venus",
-                  "Earth",
-                  "Mars"
-                ],
-                correctAnswer: "Mars"
-              },
-              {
-                questionId: 6,
-                questionText: "What is the speed of light in a vacuum?",
-                options: [
-                  "300,000 km/s",
-                  "150,000 km/s",
-                  "299,792 km/s",
-                  "299,792 m/s"
-                ],
-                correctAnswer: "299,792 km/s"
-              },
-              {
-                questionId: 7,
-                questionText: "Who painted the Last Supper?",
-                options: [
-                  "Vincent van Gogh",
-                  "Pablo Picasso",
-                  "Leonardo da Vinci",
-                  "Claude Monet"
-                ],
-                correctAnswer: "Leonardo da Vinci"
-              },
-              {
-                questionId: 8,
-                questionText: "What is the chemical symbol for iron?",
-                options: [
-                  "Fe",
-                  "Ir",
-                  "In",
-                  "I"
-                ],
-                correctAnswer: "Fe"
-              },
-              {
-                questionId: 9,
-                questionText: "What is the third tallest mountain in the world?",
-                options: [
-                  "K2",
-                  "Kangchenjunga",
-                  "Mount Everest",
-                  "Lhotse"
-                ],
-                correctAnswer: "Kangchenjunga"
-              },
-              {
-                questionId: 10,
-                questionText: "What is the smallest bone in the human body?",
-                options: [
-                  "Stapes",
-                  "Femur",
-                  "Tibia",
-                  "Fibula"
-                ],
-                correctAnswer: "Stapes"
-              }
-            ]
-          }
-        ]
-      }
-    ]
-}
-console.log(quizModuleData)
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Modal } from 'antd';
 
+interface Question {
+  questionId: string;
+  questionText: string;
+  correctAnswer: string;
+  options: string[];
+}
+
+interface Quiz {
+  quizId: string;
+  quizName: string;
+  internalMarks: string;
+  attendance: string;
+  attendQuestion: string;
+  totalQuestion: string;
+  questions: Question[];
+}
+
+interface Module {
+  moduleId: string;
+  type: string;
+  moduleName: string;
+  quizzes: Quiz[];
+}
 
 export default function Index() {
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const [selectedQuiz, setSelectedQuiz] = useState(null);
+  const [selectedQuiz, setSelectedQuiz] = useState<Quiz | null>(null);
+  const [quizModuleData, setQuizModuleData] = useState<Module[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
 
-  const showModal = (quiz) => {
+  useEffect(() => {
+    fetch('https://iimtt-api.s38.siliconpin.com/api/quiz-module')
+      .then((res) => {
+        if (!res.ok) {
+          throw new Error('Network response was not ok');
+        }
+        return res.json();
+      })
+      .then((data) => {
+        // console.log('Fetched data:', data);
+        // Extract the modules array from the response
+        if (data && Array.isArray(data.modules)) {
+          setQuizModuleData(data.modules);
+        } else {
+          setError(new Error('Fetched data is not an array'));
+        }
+        setLoading(false);
+      })
+      .catch((error) => {
+        console.error('Error fetching data:', error);
+        setError(error);
+        setLoading(false);
+      });
+  }, []);
+
+  if (loading) {
+    return <div>Loading...</div>;
+  }
+
+  if (error) {
+    return <div>Error: {error.message}</div>;
+  }
+
+  const showModal = (quiz: Quiz) => {
     setSelectedQuiz(quiz);
     setIsModalOpen(true);
   };
@@ -408,98 +82,113 @@ export default function Index() {
 
   return (
     <section className="">
-        <div className="flex flex-col">
-            {
-                quizModuleData.modules.map((moduleData) => (
-                    <div key={moduleData.moduleId}>
-                    <div className="p-6">
-                        <p className="text-[16px] font-[700] text-[#EF7A0C]">{moduleData.type}</p>
-                        <p className="text-[22px] font-[700]">{moduleData.moduleName}</p>
-                        <p className="text-[14px] font-[600]">3/8 Quizzes Completed </p>
+      <div className="flex flex-col">
+        {quizModuleData.length > 0 ? (
+          quizModuleData.map((moduleData) => (
+            <div key={moduleData.moduleId}>
+              <div className="p-6">
+                <p className="text-[16px] font-[700] text-[#EF7A0C]">{moduleData.type}</p>
+                <p className="text-[22px] font-[700]">{moduleData.moduleName}</p>
+                <p className="text-[14px] font-[600]">3/8 Quizzes Completed </p>
+              </div>
+              <div className="flex flex-col">
+                {moduleData.quizzes.map((quizData) => (
+                  <div
+                    onClick={() => showModal(quizData)}
+                    className="flex flex-row justify-between place-items-center hover:bg-[#FFF4EA] duration-500 border-b-[1px] border-b-[#CFCFCF] p-6 cursor-pointer"
+                    key={quizData.quizId}
+                  >
+                    <div className="flex flex-col space-y-2">
+                      <h3 className="text-[20px] font-[700]">
+                        #{quizData.quizId} {quizData.quizName}
+                      </h3>
+                      <p className="text-[16px] font-[700] text-[#6E6E6E]">
+                        <span>Internal Marks: {quizData.internalMarks}</span>
+                        &nbsp;&#8226; &nbsp;
+                        <span>Attendance: {quizData.attendance}</span>
+                      </p>
                     </div>
-                    <div className="flex flex-col">
-                        {
-                            moduleData.quizzes.map((quizData) => (
-                                <div onClick={() => showModal(quizData)} className="flex flex-row justify-between place-items-center hover:bg-[#FFF4EA] duration-500 border-b-[1px] border-b-[#CFCFCF] p-6 cursor-pointer" key={quizData.quizId}>
-                                    <div className="flex flex-col space-y-2">
-                                        <h3 className="text-[20px] font-[700]">#{quizData.quizId} {quizData.quizName}</h3>
-                                        <p className="text-[16px] font-[700] text-[#6E6E6E]">
-                                        <span>Internal Marks:  {quizData.internalMarks}</span> &nbsp;&#8226; &nbsp;
-                                        <span>Attendance:  {quizData.attendance}</span>
-                                        </p>
-                                    </div>
-                                    <div className="flex flex-row space-x-4">
-                                        <p className="bg-[#FFE2C7] p-2 rounded-[8px]">
-                                        <span className="text-[32px] font-[700] text-[#EF7A0C]">{quizData.attendQuestion}</span>/
-                                        <span className="text-[16px] font-[700] ">{quizData.totalQuestion}</span>
-                                        </p>
-                                        <img src="../../assets/right-arrow.svg" alt="" />
-                                    </div>
-                                </div>
-                            ))
-                        }
+                    <div className="flex flex-row space-x-4">
+                      <p className="bg-[#FFE2C7] p-2 rounded-[8px]">
+                        <span className="text-[32px] font-[700] text-[#EF7A0C]">{quizData.attendQuestion}</span>/
+                        <span className="text-[16px] font-[700] ">{quizData.totalQuestion}</span>
+                      </p>
+                      <img src="../../assets/right-arrow.svg" alt="" />
                     </div>
-                    </div>
-                ))
-            }
-        </div>
-        {selectedQuiz && (
-            <Modal title={selectedQuiz.quizName} open={isModalOpen} onOk={handleOk} onCancel={handleCancel} width={1000}>
-                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 border-b-[1px] border-b-[#CFCFCF]">
-                        <div className="flex justify-center place-items-center border-r-[1px] border-[#CFCFCF] my-3">
-                            <div className="flex flex-row space-x-2">
-                                <div className="w-[53px] h-[53px] bg-[#FFF1E3] rounded-full flex justify-center place-items-center">
-                                    <img className=" " src="../../assets/calendar.svg" alt="" />
-                                </div>
-                                <div className='flex flex-col'>
-                                    <p className="text-[20px] font-[800]">18/10</p>
-                                    <p className="text-[14px] font-[600] text-[#414141]">Attendance</p>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div className="flex justify-center place-items-center border-r-[1px] border-[#CFCFCF] my-3">
-                            <div className="flex flex-row space-x-2">
-                                <div className="w-[53px] h-[53px] bg-[#FFF1E3] rounded-full flex justify-center place-items-center">
-                                    <img className=" " src="../../assets/note.svg" alt="" />
-                                </div>
-                                <div className='flex flex-col'>
-                                    <p className="text-[20px] font-[800]">12 <span className="text-[14px] font-[500]">Questions</span></p>
-                                    <p className="text-[14px] font-[600] text-[#414141]">Attempted</p>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div className="flex justify-center place-items-center my-3">
-                            <div className="flex flex-row space-x-2">
-                                <div className="w-[53px] h-[53px] bg-[#FFF1E3] rounded-full flex justify-center place-items-center">
-                                    <img className=" " src="../../assets/note.svg" alt="" />
-                                </div>
-                                <div className='flex flex-col'>
-                                    <p className="text-[20px] font-[800]">12 <span className="text-[14px] font-[500]">Correct</span></p>
-                                    <p className="text-[14px] font-[600] text-[#414141]">Attempts</p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-              {selectedQuiz.questions.map((questionData) => (
-                  <div key={questionData.questionId} className="mb-4 px-10 flex flex-col space-y-2">
-                      <p className='text-[20px] font-[700]'>Q{questionData.questionId}: {questionData.questionText}</p>
-                      <p className="text-[16px] font-[600] text-[#EF7A0C]">Your Answer</p>
-                      <p className="text-[20px] font-[500]">{questionData.correctAnswer}</p>
-                      <div className='inline-flex place-items-center space-x-4 w-full border-[1px] border-[#218B32] rounded-[10px] p-3'>
-                          <p className='text-[14px] font-[700] text-[#218B32] inline-flex place-items-center'><img src="../../assets/green-tick.svg" alt="" /> &nbsp;Correct</p>
-                          <p className='text-[14px] font-[400]'> {questionData.correctAnswer}</p>
-                      </div>
-                  <ul>
-                      {/* {questionData.options.map((option, index) => (
-                      <li key={index}>{option}</li>
-                      ))} */}
-                  </ul>
                   </div>
-              ))}
-            </Modal>
+                ))}
+              </div>
+            </div>
+          ))
+        ) : (
+          <div>No quiz modules available.</div>
         )}
+      </div>
+      {selectedQuiz && (
+        <Modal title={selectedQuiz.quizName} open={isModalOpen} onOk={handleOk} onCancel={handleCancel} width={1000}>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 border-b-[1px] border-b-[#CFCFCF]">
+            <div className="flex justify-center place-items-center border-r-[1px] border-[#CFCFCF] my-3">
+              <div className="flex flex-row space-x-2">
+                <div className="w-[53px] h-[53px] bg-[#FFF1E3] rounded-full flex justify-center place-items-center">
+                  <img className=" " src="../../assets/calendar.svg" alt="" />
+                </div>
+                <div className="flex flex-col">
+                  <p className="text-[20px] font-[800]">18/10</p>
+                  <p className="text-[14px] font-[600] text-[#414141]">Attendance</p>
+                </div>
+              </div>
+            </div>
+
+            <div className="flex justify-center place-items-center border-r-[1px] border-[#CFCFCF] my-3">
+              <div className="flex flex-row space-x-2">
+                <div className="w-[53px] h-[53px] bg-[#FFF1E3] rounded-full flex justify-center place-items-center">
+                  <img className=" " src="../../assets/note.svg" alt="" />
+                </div>
+                <div className="flex flex-col">
+                  <p className="text-[20px] font-[800]">
+                    12 <span className="text-[14px] font-[500]">Questions</span>
+                  </p>
+                  <p className="text-[14px] font-[600] text-[#414141]">Attempted</p>
+                </div>
+              </div>
+            </div>
+
+            <div className="flex justify-center place-items-center my-3">
+              <div className="flex flex-row space-x-2">
+                <div className="w-[53px] h-[53px] bg-[#FFF1E3] rounded-full flex justify-center place-items-center">
+                  <img className=" " src="../../assets/note.svg" alt="" />
+                </div>
+                <div className="flex flex-col">
+                  <p className="text-[20px] font-[800]">
+                    12 <span className="text-[14px] font-[500]">Correct</span>
+                  </p>
+                  <p className="text-[14px] font-[600] text-[#414141]">Attempts</p>
+                </div>
+              </div>
+            </div>
+          </div>
+          {selectedQuiz.questions.map((questionData) => (
+            <div key={questionData.questionId} className="mb-4 px-10 flex flex-col space-y-2">
+              <p className="text-[20px] font-[700]">
+                Q{questionData.questionId}: {questionData.questionText}
+              </p>
+              <p className="text-[16px] font-[600] text-[#EF7A0C]">Your Answer</p>
+              <p className="text-[20px] font-[500]">{questionData.correctAnswer}</p>
+              <div className="inline-flex place-items-center space-x-4 w-full border-[1px] border-[#218B32] rounded-[10px] p-3">
+                <p className="text-[14px] font-[700] text-[#218B32] inline-flex place-items-center">
+                  <img src="../../assets/green-tick.svg" alt="" /> &nbsp;Correct
+                </p>
+                <p className="text-[14px] font-[400]"> {questionData.correctAnswer}</p>
+              </div>
+              <ul>
+                {/* {questionData.options.map((option, index) => (
+                  <li key={index}>{option}</li>
+                ))} */}
+              </ul>
+            </div>
+          ))}
+        </Modal>
+      )}
     </section>
   );
 }
diff --git a/app/components/QuizzesScore.tsx b/app/components/QuizzesScore.tsx
index 15e27bd..99f2d7e 100644
--- a/app/components/QuizzesScore.tsx
+++ b/app/components/QuizzesScore.tsx
@@ -1,130 +1,43 @@
-import React from 'react';
 import { Flex, Progress } from 'antd';
+import React, { useEffect, useState } from 'react';
+interface Performer {
+  quizId: number;
+  quizType: string;
+  quizName: string;
+  percentage: string;
+}
 
-let quizData = [
-    {
-      quizId: 1,
-      quizType: "AI Quiz",
-      quizName: "Assessment on Special Education - 1",
-      percentage: "60"
-    },
-    {
-      quizId: 2,
-      quizType: "AI Quiz",
-      quizName: "Assessment on Special Education - 2",
-      percentage: "75"
-    },
-    {
-      quizId: 3,
-      quizType: "AI Quiz",
-      quizName: "Assessment on Special Education - 3",
-      percentage: "80"
-    },
-    {
-      quizId: 4,
-      quizType: "AI Quiz",
-      quizName: "Assessment on Special Education - 4",
-      percentage: "65"
-    },
-    {
-      quizId: 5,
-      quizType: "AI Quiz",
-      quizName: "Assessment on Special Education - 5",
-      percentage: "70"
-    },
-    {
-      quizId: 6,
-      quizType: "AI Quiz",
-      quizName: "Assessment on Special Education - 6",
-      percentage: "85"
-    },
-    {
-      quizId: 7,
-      quizType: "AI Quiz",
-      quizName: "Assessment on Special Education - 7",
-      percentage: "90"
-    },
-    {
-      quizId: 8,
-      quizType: "AI Quiz",
-      quizName: "Assessment on Special Education - 8",
-      percentage: "95"
-    },
-    {
-      quizId: 9,
-      quizType: "AI Quiz",
-      quizName: "Assessment on Special Education - 9",
-      percentage: "88"
-    },
-    {
-      quizId: 10,
-      quizType: "AI Quiz",
-      quizName: "Assessment on Special Education - 10",
-      percentage: "92"
-    },
-    {
-      quizId: 11,
-      quizType: "AI Quiz",
-      quizName: "Assessment on Special Education - 11",
-      percentage: "77"
-    },
-    {
-      quizId: 12,
-      quizType: "AI Quiz",
-      quizName: "Assessment on Special Education - 12",
-      percentage: "82"
-    },
-    {
-      quizId: 13,
-      quizType: "AI Quiz",
-      quizName: "Assessment on Special Education - 13",
-      percentage: "68"
-    },
-    {
-      quizId: 14,
-      quizType: "AI Quiz",
-      quizName: "Assessment on Special Education - 14",
-      percentage: "73"
-    },
-    {
-      quizId: 15,
-      quizType: "AI Quiz",
-      quizName: "Assessment on Special Education - 15",
-      percentage: "79"
-    },
-    {
-      quizId: 16,
-      quizType: "AI Quiz",
-      quizName: "Assessment on Special Education - 16",
-      percentage: "87"
-    },
-    {
-      quizId: 17,
-      quizType: "AI Quiz",
-      quizName: "Assessment on Special Education - 17",
-      percentage: "93"
-    },
-    {
-      quizId: 18,
-      quizType: "AI Quiz",
-      quizName: "Assessment on Special Education - 18",
-      percentage: "67"
-    },
-    {
-      quizId: 19,
-      quizType: "AI Quiz",
-      quizName: "Assessment on Special Education - 19",
-      percentage: "89"
-    },
-    {
-      quizId: 20,
-      quizType: "AI Quiz",
-      quizName: "Assessment on Special Education - 20",
-      percentage: "91"
-    }
-  ]
+export default function quizScoreData() {
+    const [quizData, setData] = useState<Performer[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<Error | null>(null);
 
-export default function Index(){
+
+    useEffect(() => {
+        fetch('https://iimtt-api.s38.siliconpin.com/api/quiz-score')
+          .then(res => {
+            if (!res.ok) {
+              throw new Error('Network response was not ok');
+            }
+            return res.json();
+          })
+          .then(data => {
+            setData(data);
+            setLoading(false);
+          })
+          .catch(error => {
+            console.error('Error fetching data:', error);
+            setError(error);
+            setLoading(false);
+          });
+        }, []);
+      if (loading) {
+        return <div>Loading...</div>;
+      }
+    
+      if (error) {
+        return <div>Error: {error.message}</div>;
+      }
     return(
         <section>
             <div className="border-[1px] border-[#CFCFCF] rounded-t-[10px]" style={{background: 'linear-gradient(138.22deg, #4377C6 0%, #092E76 180.99%)'}}>
@@ -148,5 +61,5 @@ export default function Index(){
     )
 }
 
-
+// quiz-details
 {/* <Progress type="dashboard" percent={75} gapDegree={30} /> */}
\ No newline at end of file
diff --git a/app/components/TopPerformers.tsx b/app/components/TopPerformers.tsx
index 244c2c0..316f533 100644
--- a/app/components/TopPerformers.tsx
+++ b/app/components/TopPerformers.tsx
@@ -1,254 +1,99 @@
-let performersData = [
-    {
-        id: "1",
-        name: "Eiden",
-        score: "48/50",
-        points: "999",
-        rank: "1",
-        program: "Graduate Program",
-        avatar: "avatar1.png"
-    },
-    {
-        id: "2",
-        name: "Jackson",
-        score: "45/50",
-        points: "997",
-        rank: "2",
-        program: "Graduate Program",
-        avatar: "avatar2.png"
-    },
-    {
-        id: "3",
-        name: "Emma Aria",
-        score: "43/50",
-        points: "994",
-        rank: "3",
-        program: "Graduate Program",
-        avatar: "avatar3.png"
-    },
-    {
-        id: "4",
-        name: "John Doe",
-        score: "40/50",
-        points: "990",
-        rank: "4",
-        program: "Graduate Program",
-        avatar: "avatar4.png"
-    },
-    {
-        id: "5",
-        name: "Jane Cooper",
-        score: "37/50",
-        points: "987",
-        rank: "5",
-        program: "Graduate Program",
-        avatar: "avatar5.png"
-    },
-    {
-        id: "6",
-        name: "John Doe",
-        score: "35/50",
-        points: "982",
-        rank: "6",
-        program: "Graduate Program",
-        avatar: "avatar6.png"
-    },
-    {
-        id: "7",
-        name: "Alice",
-        score: "33/50",
-        points: "980",
-        rank: "7",
-        program: "Graduate Program",
-        avatar: "avatar1.png"
-    },
-    {
-        id: "8",
-        name: "Bob",
-        score: "32/50",
-        points: "978",
-        rank: "8",
-        program: "Graduate Program",
-        avatar: "avatar2.png"
-    },
-    {
-        id: "9",
-        name: "Charlie",
-        score: "30/50",
-        points: "975",
-        rank: "9",
-        program: "Graduate Program",
-        avatar: "avatar3.png"
-    },
-    {
-        id: "10",
-        name: "Diana",
-        score: "28/50",
-        points: "972",
-        rank: "10",
-        program: "Graduate Program",
-        avatar: "avatar4.png"
-    },
-    {
-        id: "11",
-        name: "Edward",
-        score: "27/50",
-        points: "970",
-        rank: "11",
-        program: "Graduate Program",
-        avatar: "avatar5.png"
-    },
-    {
-        id: "12",
-        name: "Fiona",
-        score: "26/50",
-        points: "968",
-        rank: "12",
-        program: "Graduate Program",
-        avatar: "avatar6.png"
-    },
-    {
-        id: "13",
-        name: "George",
-        score: "25/50",
-        points: "965",
-        rank: "13",
-        program: "Graduate Program",
-        avatar: "avatar1.png"
-    },
-    {
-        id: "14",
-        name: "Hannah",
-        score: "23/50",
-        points: "962",
-        rank: "14",
-        program: "Graduate Program",
-        avatar: "avatar2.png"
-    },
-    {
-        id: "15",
-        name: "Ian",
-        score: "22/50",
-        points: "960",
-        rank: "15",
-        program: "Graduate Program",
-        avatar: "avatar3.png"
-    },
-    {
-        id: "16",
-        name: "Julia",
-        score: "20/50",
-        points: "957",
-        rank: "16",
-        program: "Graduate Program",
-        avatar: "avatar4.png"
-    },
-    {
-        id: "17",
-        name: "Kyle",
-        score: "19/50",
-        points: "955",
-        rank: "17",
-        program: "Graduate Program",
-        avatar: "avatar5.png"
-    },
-    {
-        id: "18",
-        name: "Laura",
-        score: "18/50",
-        points: "953",
-        rank: "18",
-        program: "Graduate Program",
-        avatar: "avatar6.png"
-    },
-    {
-        id: "19",
-        name: "Michael",
-        score: "17/50",
-        points: "950",
-        rank: "19",
-        program: "Graduate Program",
-        avatar: "avatar1.png"
-    },
-    {
-        id: "20",
-        name: "Nancy",
-        score: "16/50",
-        points: "947",
-        rank: "20",
-        program: "Graduate Program",
-        avatar: "avatar2.png"
-    },
-    {
-        id: "21",
-        name: "Oliver",
-        score: "15/50",
-        points: "945",
-        rank: "21",
-        program: "Graduate Program",
-        avatar: "avatar3.png"
-    }
-];
+import React, { useEffect, useState } from 'react';
 
-const sortedData = performersData.sort((a, b) => parseInt(a.rank) - parseInt(b.rank));
+interface Performer {
+  id: number;
+  name: string;
+  rank: number;
+  avatar: string;
+  score: number;
+  program: string;
+  points: number;
+}
 
-const highestRank = sortedData[0];
-const secondHighestRank = sortedData[1];
-const thirdHighestRank = sortedData[2];
+export default function TopPerformers() {
+  const [data, setData] = useState<Performer[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
 
-// console.log('The highest rank is:', highestRank);
-// console.log('The second highest rank is:', secondHighestRank);
-// console.log('The Third highest rank is:', thirdHighestRank);
+  useEffect(() => {
+    fetch('https://iimtt-api.s38.siliconpin.com/api/top-performers')
+      .then(res => {
+        if (!res.ok) {
+          throw new Error('Network response was not ok');
+        }
+        return res.json();
+      })
+      .then(data => {
+        const sortedData: Performer[] = data.sort((a: Performer, b: Performer) => a.rank - b.rank);
+        setData(sortedData);
+        setLoading(false);
+      })
+      .catch(error => {
+        console.error('Error fetching data:', error);
+        setError(error);
+        setLoading(false);
+      });
+  }, []);
 
+  if (loading) {
+    return <div>Loading...</div>;
+  }
 
-export default function(){
-    return(
-        <div className=''>
-            <h2 className='text-[20px] font-[700] inline-flex px-4 pt-4'>Top Performers <img src="../../assets/right-arrow.svg" alt="" /></h2>
-            <p className='text-[16px] font-[700] text-[#6E6E6E] px-4 pb-4 mb-28'>Knowledge Quest</p>
-            <div className='flex flex-row justify-between place-items-center space-x-2 border-b-[1px] border-[#CFCFCF]'>
-                <div className='w-full mx-auto h-[88px] border-x-[1px] border-t-[1px] border-[#CFCFCF] rounded-t-[10px] justify-center place-items-center mx-auto py-4'>
-                    <div className='-mt-10 relative flex flex-col justify-center place-items-center'>
-                        <img className='mx-auto h-[52px] w-[60px] ' src={`../../assets/${secondHighestRank.avatar}`} alt="" />
-                        <img className='absolute mt-12' src="../../assets/bacth2.svg" alt="" />
-                    </div>
-                    <p className='text-[12px] font-[700] text-center mt-4'>{secondHighestRank.name}</p>
-                    <p className='text-[12px] font-[700] text-center'>{secondHighestRank.score}</p>
-                </div>
-                <div className='w-full mx-auto h-[130px] -mt-[42px] border-x-[1px] border-t-[1px] border-[#CFCFCF] rounded-t-[10px] justify-center place-items-center mx-auto py-4'>
-                    <div className='-mt-10 relative flex flex-col justify-center place-items-center'>
-                        <img className='-mt-10' src="../../assets/crown.png" alt="" />
-                        <img className='mx-auto h-[52px] w-[60px]' src={`../../assets/${highestRank.avatar}`} alt="" />
-                        <img className='absolute mt-12' src="../../assets/bacth1.svg" alt="" />
-                    </div>
-                    <p className='text-[12px] font-[700] text-center mt-4'>{highestRank.name}</p>
-                    <p className='text-[12px] font-[700] text-center'>{highestRank.score}</p>
-                </div>
-                <div className='w-full mx-auto h-[88px] border-x-[1px] border-t-[1px] border-[#CFCFCF] rounded-t-[10px] justify-center place-items-center mx-auto py-4'>
-                    <div className='-mt-10 relative flex flex-col justify-center place-items-center'>
-                        <img className='mx-auto h-[52px] w-[60px]' src={`../../assets/${thirdHighestRank.avatar}`} alt="" />
-                        <img className='absolute mt-12' src="../../assets/bacth3.svg" alt="" />
-                    </div>
-                    <p className='text-[12px] font-[700] text-center mt-4'>{thirdHighestRank.name}</p>
-                    <p className='text-[12px] font-[700] text-center'>{thirdHighestRank.score}</p>
-                </div>
-            </div>
-            <div className='flex flex-col'>
-                {sortedData.slice(3).map(data => (
-                    <div key={data.id} className='flex flex-row justify-between place-items-center border-b-[1px] border-[#CFCFCF] p-2'>
-                        <p className='text-[11px] font-[700]'># {data.rank}</p>
-                        <img className='w-[35px] h-[35px]' src={`../../assets/${data.avatar}`} alt="" />
-                        <div>
-                            <p className='text-[14px] font-[700]'>{data.name}</p>
-                            <p className='text-[10px] font-[700] text-[#6E6E6E]'>{data.program}</p>
-                        </div>
-                        <div className='flex flex-col justify-center place-items-center'>
-                            <img src="../../assets/points-icon.svg" alt="" />
-                            <p className='text-[10px] font-[700]'>{data.points} Points</p>
-                        </div>
-                    </div>
-                ))}
-            </div>
+  if (error) {
+    return <div>Error: {error.message}</div>;
+  }
+
+  const [highestRank, secondHighestRank, thirdHighestRank, ...sortedData] = data;
+
+  return (
+    <div className=''>
+      <h2 className='text-[20px] font-[700] inline-flex px-4 pt-4'>
+        Top Performers <img src="../../assets/right-arrow.svg" alt="" />
+      </h2>
+      <p className='text-[16px] font-[700] text-[#6E6E6E] px-4 pb-4 mb-28'>Knowledge Quest</p>
+      <div className='flex flex-row justify-between place-items-center space-x-2 border-b-[1px] border-[#CFCFCF]'>
+        <div className='w-full mx-auto h-[88px] border-x-[1px] border-t-[1px] border-[#CFCFCF] rounded-t-[10px] justify-center place-items-center mx-auto py-4'>
+          <div className='-mt-10 relative flex flex-col justify-center place-items-center'>
+            <img className='mx-auto h-[52px] w-[60px]' src={secondHighestRank.avatar} alt="" />
+            <img className='absolute mt-12' src="../../assets/bacth2.svg" alt="" />
+          </div>
+          <p className='text-[12px] font-[700] text-center mt-4'>{secondHighestRank.name}</p>
+          <p className='text-[12px] font-[700] text-center'>{secondHighestRank.score}</p>
         </div>
-    )
-}
\ No newline at end of file
+        <div className='w-full mx-auto h-[130px] -mt-[42px] border-x-[1px] border-t-[1px] border-[#CFCFCF] rounded-t-[10px] justify-center place-items-center mx-auto py-4'>
+          <div className='-mt-10 relative flex flex-col justify-center place-items-center'>
+            <img className='-mt-10' src="../../assets/crown.png" alt="" />
+            <img className='mx-auto h-[52px] w-[60px]' src={highestRank.avatar} alt="" />
+            <img className='absolute mt-12' src="../../assets/bacth1.svg" alt="" />
+          </div>
+          <p className='text-[12px] font-[700] text-center mt-4'>{highestRank.name}</p>
+          <p className='text-[12px] font-[700] text-center'>{highestRank.score}</p>
+        </div>
+        <div className='w-full mx-auto h-[88px] border-x-[1px] border-t-[1px] border-[#CFCFCF] rounded-t-[10px] justify-center place-items-center mx-auto py-4'>
+          <div className='-mt-10 relative flex flex-col justify-center place-items-center'>
+            <img className='mx-auto h-[52px] w-[60px]' src={thirdHighestRank.avatar} alt="" />
+            <img className='absolute mt-12' src="../../assets/bacth3.svg" alt="" />
+          </div>
+          <p className='text-[12px] font-[700] text-center mt-4'>{thirdHighestRank.name}</p>
+          <p className='text-[12px] font-[700] text-center'>{thirdHighestRank.score}</p>
+        </div>
+      </div>
+      <div className='flex flex-col'>
+        {sortedData.map(data => (
+          <div key={data.id} className='flex flex-row justify-between place-items-center border-b-[1px] border-[#CFCFCF] p-2'>
+            <p className='text-[11px] font-[700]'># {data.rank}</p>
+            <img className='w-[35px] h-[35px]' src={data.avatar} alt="" />
+            <div>
+              <p className='text-[14px] font-[700]'>{data.name}</p>
+              <p className='text-[10px] font-[700] text-[#6E6E6E]'>{data.program}</p>
+            </div>
+            <div className='flex flex-col justify-center place-items-center'>
+              <img src="../../assets/points-icon.svg" alt="" />
+              <p className='text-[10px] font-[700]'>{data.points} Points</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}