diff --git a/frontend/src/components/dashboard/Barchart.jsx b/frontend/src/components/dashboard/Barchart.jsx
index 5c26cb8..b900474 100644
--- a/frontend/src/components/dashboard/Barchart.jsx
+++ b/frontend/src/components/dashboard/Barchart.jsx
@@ -2,11 +2,7 @@ import { BarChart, Card, Title } from "@tremor/react";
 import React from "react";
 import axiosInstance from "../../api/configs/AxiosConfig";
 
-const apiGetBarChartData = () => {
-    return axiosInstance.get("dashboard/stats/");
-    }
-console.log(apiGetBarChartData);
-      
+
 const chartdata3 = [
   {
     date: "Jan 23",
diff --git a/frontend/src/components/dashboard/DonutChart.jsx b/frontend/src/components/dashboard/DonutChart.jsx
new file mode 100644
index 0000000..4802b2b
--- /dev/null
+++ b/frontend/src/components/dashboard/DonutChart.jsx
@@ -0,0 +1,39 @@
+import { DonutChart } from "@tremor/react";
+import axiosInstance from "../../api/configs/AxiosConfig";
+
+const fetchDonutData = async () => {
+  try {
+    let res = await axiosInstance.get("/dashboard/stats/");
+    let todoCount = res.data.todo_count;
+    let recurrenceCount = res.data.recurrence_count;
+    if (todoCount === undefined) {
+      todoCount = 0;
+    }
+    if (recurrenceCount === undefined) {
+      recurrenceCount = 0;
+    }
+    const donutData = [
+      { name: "Todo", count: todoCount },
+      { name: "Recurrence", count: recurrenceCount },
+    ];
+    return donutData;
+  } catch (error) {
+    console.error("Error fetching donut data:", error);
+    return [];
+  }
+};
+
+const donutDataArray = await fetchDonutData();
+export default function DonutChartGraph() {
+  return (
+    <DonutChart
+      className="mt-6"
+      data={donutDataArray}
+      category="count"
+      index="name"
+      colors={["rose", "yellow", "orange"]}
+      onValueChange={(v) => setValue(v)}
+      showAnimation
+    />
+  );
+}
diff --git a/frontend/src/components/dashboard/dashboard.jsx b/frontend/src/components/dashboard/dashboard.jsx
index 7d7427e..a4204a1 100644
--- a/frontend/src/components/dashboard/dashboard.jsx
+++ b/frontend/src/components/dashboard/dashboard.jsx
@@ -1,20 +1,23 @@
-import { Card, Grid, Tab, TabGroup, TabList, TabPanel, TabPanels, Text, Title, DonutChart } from "@tremor/react";
+import {
+  Card,
+  Grid,
+  Tab,
+  TabGroup,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Text,
+  Title,
+  DonutChart,
+  Legend,
+} from "@tremor/react";
 import KpiCard from "./kpiCard";
 import { BarChartGraph } from "./Barchart";
+import DonutChartGraph from "./DonutChart";
 
-const cities = [
-  {
-    name: "New York",
-    sales: 9800,
-  },
-  // ...
-  {
-    name: "Zurich",
-    sales: 1398,
-  },
-];
 
-const valueFormatter = number => `$ ${new Intl.NumberFormat("us").format(number).toString()}`;
+const valueFormatter = (number) =>
+  `$ ${new Intl.NumberFormat("us").format(number).toString()}`;
 
 export default function Dashboard() {
   return (
@@ -41,16 +44,15 @@ export default function Dashboard() {
                 {/* Placeholder to set height */}
                 <div className="h-31">
                   <Card className="mx-auto h-full">
-                    <Title>Sales</Title>
-                    <DonutChart
-                      className="mt-6"
-                      data={cities}
-                      category="sales"
-                      index="name"
-                      colors={["rose", "yellow", "orange", "indigo", "blue", "emerald"]}
-                      onValueChange={v => setValue(v)}
-                      showAnimation
+                    <Title>Tasks</Title>
+                    <DonutChartGraph />
+                    <br/>
+                    <Legend
+                      className="mt-3 mx-auto w-1/2"
+                      categories={["Todo Task", "Recurrence Task"]}
+                      colors={["rose", "yellow"]}
                     />
+                    
                   </Card>
                 </div>
                 <BarChartGraph />