diff --git a/frontend/src/components/EisenhowerMatrix/Eisenhower.jsx b/frontend/src/components/EisenhowerMatrix/Eisenhower.jsx
index 7c31328..374ac66 100644
--- a/frontend/src/components/EisenhowerMatrix/Eisenhower.jsx
+++ b/frontend/src/components/EisenhowerMatrix/Eisenhower.jsx
@@ -1,13 +1,28 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { FiAlertCircle, FiClock, FiXCircle, FiCheckCircle } from "react-icons/fi";
+import { readTodoTasks } from "../../api/TaskApi";
+import axiosInstance from "../../api/configs/AxiosConfig";
 
 function EachBlog({ name, colorCode, contentList, icon }) {
   const [tasks, setTasks] = useState(contentList);
 
-  const handleCheckboxChange = index => {
-    const updatedTasks = [...tasks];
-    updatedTasks[index].checked = !updatedTasks[index].checked;
-    setTasks(updatedTasks);
+  const handleCheckboxChange = async index => {
+    try {
+      setTasks(contentList)
+
+      const updatedTasks = [...tasks];
+      const taskId = updatedTasks[index].id;
+
+      const response = await axiosInstance.patch(`todo/${taskId}/`, {
+        completed: !updatedTasks[index].completed,
+      });
+
+      updatedTasks[index].completed = response.data.completed;
+
+      setTasks(updatedTasks);
+    } catch (error) {
+      console.error("Error updating task:", error);
+    }
   };
 
   return (
@@ -18,20 +33,22 @@ function EachBlog({ name, colorCode, contentList, icon }) {
       </div>
       <hr className="my-3 h-0.5 border-t-0 bg-gray-300 opacity-100 dark:opacity-50" />
       <div className="space-y-2">
-        {tasks.length === 0 ? (
-          <p className="text-gray-500 text-center">No tasks</p>
-        ) : (
-          tasks.map((item, index) => (
+        {contentList && contentList.length > 0 ? (
+          contentList.map((item, index) => (
             <div key={index} className="flex items-start">
               <input
                 type="checkbox"
-                checked={item.checked}
+                checked={item.completed}
                 className="checkbox mt-1 mr-2"
                 onChange={() => handleCheckboxChange(index)}
               />
-              <label className="cursor-pointer">{item.text}</label>
+              <label className={`cursor-pointer ${item.completed ? "line-through text-gray-500" : ""}`}>
+                {item.title}
+              </label>
             </div>
           ))
+        ) : (
+          <p className="text-gray-500 text-center">No tasks</p>
         )}
       </div>
     </div>
@@ -39,38 +56,53 @@ function EachBlog({ name, colorCode, contentList, icon }) {
 }
 
 function Eisenhower() {
-  const contentList_ui = [
-    { text: "Complete report for the meeting", checked: true },
-    { text: "Review project proposal", checked: false },
-    { text: "Submit expense report", checked: false },
-    { text: "Complete report for the meeting", checked: true },
-    { text: "Review project proposal", checked: false },
-    { text: "Submit expense report", checked: false },
-    { text: "Complete report for the meeting", checked: true },
-    { text: "Review project proposal", checked: false },
-    { text: "Submit expense report", checked: false },
-  ];
+  const [tasks, setTasks] = useState([]);
 
-  const contentList_uni = [];
-  const contentList_nui = [];
-  const contentList_nuni = [];
+  useEffect(() => {
+    readTodoTasks()
+      .then(data => {
+        console.log(data);
+        const contentList_ui = data.filter(task => task.priority === 1);
+        const contentList_uni = data.filter(task => task.priority === 2);
+        const contentList_nui = data.filter(task => task.priority === 3);
+        const contentList_nuni = data.filter(task => task.priority === 4);
+
+        setTasks({
+          contentList_ui,
+          contentList_uni,
+          contentList_nui,
+          contentList_nuni,
+        });
+      })
+      .catch(error => console.error("Error fetching tasks:", error));
+  }, []);
 
   return (
-    <div className="bg-slate-100 text-left p-4 w-full">
+    <div className="bg-slate-100 text-left p-4 w-full h-max">
       <div className="grid grid-rows-2 grid-cols-2 gap-2">
-        <EachBlog name="Urgent & Important" colorCode="#ff5f68" icon={<FiAlertCircle />} contentList={contentList_ui} />
-        <EachBlog name="Urgent & Not important" colorCode="#ffb000" icon={<FiClock />} contentList={contentList_uni} />
+        <EachBlog
+          name="Urgent & Important"
+          colorCode="#ff5f68"
+          icon={<FiAlertCircle />}
+          contentList={tasks.contentList_ui}
+        />
+        <EachBlog
+          name="Urgent & Not important"
+          colorCode="#ffb000"
+          icon={<FiClock />}
+          contentList={tasks.contentList_uni}
+        />
         <EachBlog
           name="Not urgent & Important"
           colorCode="#4772fa"
           icon={<FiCheckCircle />}
-          contentList={contentList_nui}
+          contentList={tasks.contentList_nui}
         />
         <EachBlog
           name="Not urgent & Not important"
           colorCode="#0cce9c"
           icon={<FiXCircle />}
-          contentList={contentList_nuni}
+          contentList={tasks.contentList_nuni}
         />
       </div>
     </div>
diff --git a/frontend/src/components/calendar/TaskDataHandler.jsx b/frontend/src/components/calendar/TaskDataHandler.jsx
index d96c381..ff8a5df 100644
--- a/frontend/src/components/calendar/TaskDataHandler.jsx
+++ b/frontend/src/components/calendar/TaskDataHandler.jsx
@@ -4,7 +4,7 @@ let eventGuid = 0;
 
 const mapResponseToEvents = response => {
   return response.map(item => ({
-    id: createEventId(),
+    id: item.id,
     title: item.title,
     start: item.start_event,
     end: item.end_event,
diff --git a/frontend/src/components/calendar/calendar.jsx b/frontend/src/components/calendar/calendar.jsx
index 1740df4..b4f8430 100644
--- a/frontend/src/components/calendar/calendar.jsx
+++ b/frontend/src/components/calendar/calendar.jsx
@@ -5,6 +5,7 @@ import dayGridPlugin from "@fullcalendar/daygrid";
 import timeGridPlugin from "@fullcalendar/timegrid";
 import interactionPlugin from "@fullcalendar/interaction";
 import { getEvents, createEventId } from "./TaskDataHandler";
+import axiosInstance from "../../api/configs/AxiosConfig";
 
 export default class Calendar extends React.Component {
   state = {
@@ -101,7 +102,14 @@ export default class Calendar extends React.Component {
 
   handleEventClick = clickInfo => {
     if (confirm(`Are you sure you want to delete the event '${clickInfo.event.title}'`)) {
-      clickInfo.event.remove();
+      axiosInstance
+      .delete(`todo/${clickInfo.event.id}/`)
+      .then(response => {
+        clickInfo.event.remove();
+      })
+      .catch(error => {
+        console.error("Error deleting Task:", error);
+      });
     }
   };