diff --git a/src/pages/examSetter/Grade.tsx b/src/pages/examSetter/Grade.tsx
index 77883ba..35f6eab 100644
--- a/src/pages/examSetter/Grade.tsx
+++ b/src/pages/examSetter/Grade.tsx
@@ -53,7 +53,7 @@ const initialData: GradingQuestion[] = [
     //   correct_points: ["Germany's invasion of Poland"],
     //   incorrect_points: ["The United States' attack on Japan"],
     // },
-    marks: 5,
+    marks: 0,
     maxMarks: 10,
   },
   {
@@ -67,7 +67,7 @@ const initialData: GradingQuestion[] = [
     //   correct_points: ["The issue of slavery"],
     //   incorrect_points: ["The Southern states' belief in the necessity of a strong central government"],
     // },
-    marks: 5,
+    marks: 0,
     maxMarks: 10,
   },
   {
@@ -81,7 +81,7 @@ const initialData: GradingQuestion[] = [
     //   correct_points: ["The establishment of the Napoleonic Code"],
     //   incorrect_points: ["His successful invasion and permanent conquest of Russia"],
     // },
-    marks: 5,
+    marks: 0,
     maxMarks: 10,
   },
   {
@@ -98,7 +98,7 @@ const initialData: GradingQuestion[] = [
     //     "Foreign countries invading France and causing rebellion",
     //   ],
     // },
-    marks: 5,
+    marks: 0,
     maxMarks: 10,
   },
   {
@@ -196,7 +196,7 @@ const highlightTextWithFeedback = (
 
 
 const ExamSetterGrade = () => {
-  const [data, setData] = useState<GradingQuestion[]>(initialData);
+  const [data, setData] = useState<GradingQuestion[]>([]);
 
   const [error, setError] = useState<string | null>(null);
 
@@ -209,33 +209,38 @@ const ExamSetterGrade = () => {
 // 
 useEffect(() => {
   const fetchEssayDetails = async () => {
-      setLoading(true);
-      setError(null);
-      
-      getEssayDetails(examID, userID).then((response) =>{
-        const essayDetails = response.data.map((question) => ({
-          // id: question.id,
-          id:1,
-          questionText: question.questionText,
-          userAnswer: question.userAnswer,
-          coverPoints: question.coverPoints.map((point) => ({
-            coverPointText: point.coverPointText,
-            marks: point.marks,
-          })),
-          marks: 0,
-          maxMarks: question.coverPoints.reduce((total, point) => total + point.marks, 0),
-        }));
-        setData(essayDetails);
-        setLoading(false);
-      })
-
-      fetchEssayDetails();
-
-
-    
+    setLoading(true);
+    setError(null);
 
+    try {
+      const response = await getEssayDetails(examID, userID);
+      const essayDetails = response.data.map(question => ({
+        id: question.id, // use actual question ID if available
+        questionText: question.questionText,
+        userAnswer: question.userAnswer,
+        coverPoints: question.coverPoints.map(point => ({
+          coverPointText: point.coverPointText,
+          marks: point.marks,
+        })),
+        marks: 0, // Initialize marks to 0
+        maxMarks: question.coverPoints.reduce((total, point) => total + point.marks, 0),
+      }));
+      setData(essayDetails);
+    } catch (error) {
+      console.error("Failed to fetch essay details:", error);
+      setError("Failed to load essay details.");
+      // Load default data or maintain the existing state
+      // setData(initialData); // Assuming 'initialData' is your predefined fallback dataset
+      setTimeout(
+        () => setData(initialData), // Load default data after 3 seconds
+        1000
+      );
+    }
+    setLoading(false);
   };
-}, [examID, userID]);
+
+  fetchEssayDetails();
+}, [examID, userID]); // Dependency array ensures this effect runs only when examID or userID changes
 
 
 
diff --git a/src/pages/examSetter/Grading.tsx b/src/pages/examSetter/Grading.tsx
index f6e5e68..4975627 100644
--- a/src/pages/examSetter/Grading.tsx
+++ b/src/pages/examSetter/Grading.tsx
@@ -3,6 +3,7 @@ import { Table, Button, Tag, Modal, List, Avatar, Tooltip } from "antd";
 import { CheckOutlined, EditOutlined } from "@ant-design/icons";
 
 import { useNavigate } from "react-router-dom";
+
 // Define interfaces for data types
 interface Candidate {
   id: number;
@@ -26,7 +27,6 @@ export const GradingSection: React.FC = () => {
   const navigate = useNavigate();
 
   useEffect(() => {
-    // Fetch exams assigned to the setter
     const fetchExams = async () => {
       const data: Exam[] = [
         { id: 1, name: "Math Exam", status: "fully graded" },
@@ -40,24 +40,33 @@ export const GradingSection: React.FC = () => {
 
   const handleExamClick = async (exam: Exam) => {
     setSelectedExam(exam);
+
+    // Assuming an API response where candidate data is based on exam id
+    const examCandidates: { [key: number]: Candidate[] } = {
+      1: [
+        { id: 1, name: "Tharindra Fernando", avatar: "https://randomuser.me/api/portraits/men/1.jpg", graded: true },
+        { id: 2, name: "Kaumadi Pahalage", avatar: "https://randomuser.me/api/portraits/women/2.jpg", graded: true },
+        { id: 3, name: "Roshan Silva", avatar: "https://randomuser.me/api/portraits/men/3.jpg", graded: true },
+      ],
+      2: [
+        { id: 3, name: "Roshan Silva", avatar: "https://randomuser.me/api/portraits/men/3.jpg", graded: true },
+        { id: 4, name: "Methsala Kodithuwakku", avatar: "https://randomuser.me/api/portraits/women/4.jpg", graded: false },
+        { id: 1, name: "Tharindra Fernando", avatar: "https://randomuser.me/api/portraits/men/1.jpg", graded: false },
+
+      ],
+      3: [
+        { id: 5, name: "Dinuka Samarasekara", avatar: "https://randomuser.me/api/portraits/men/5.jpg", graded: true },
+        { id: 6, name: "Sandani Fernando", avatar: "https://randomuser.me/api/portraits/women/6.jpg", graded: true },
+      ],
+    };
+
     // Fetch candidates who completed the selected exam
-    const data: Candidate[] = [
-      { id: 1, name: "Tharindra Fernando ", avatar: "https://randomuser.me/api/portraits/men/1.jpg", graded: false },
-      { id: 2, name: "Kaumadi Pahalage", avatar: "https://randomuser.me/api/portraits/women/2.jpg", graded: true },
-    ];
+    const data = examCandidates[exam.id] || [];
     setCandidates(data);
     setIsModalVisible(true);
   };
 
   const handleGradeCandidate = (candidate: Candidate) => {
-    // Placeholder for grading logic
-
-    // Modal.success({
-    //   title: "Grading Complete",
-    //   content: `You have graded ${candidate.name}.`,
-    // });
-
-
     navigate('/examSetter/exam/grading');
 
     // Update candidate graded status in UI
@@ -82,12 +91,7 @@ export const GradingSection: React.FC = () => {
       dataIndex: "status",
       key: "status",
       render: (status: string) => {
-        const color =
-          status === "fully graded"
-            ? "green"
-            : status === "partially graded"
-            ? "orange"
-            : "red";
+        const color = status === "fully graded" ? "green" : status === "partially graded" ? "orange" : "red";
         return <Tag color={color}>{status.toUpperCase()}</Tag>;
       },
     },