diff --git a/frontend/src/components/dashboard/PieChart.jsx b/frontend/src/components/dashboard/PieChart.jsx
new file mode 100644
index 0000000..73f132b
--- /dev/null
+++ b/frontend/src/components/dashboard/PieChart.jsx
@@ -0,0 +1,43 @@
+import { DonutChart } from "@tremor/react";
+import axiosInstance from "../../api/configs/AxiosConfig";
+
+const fetchPieData = async () => {
+  try {
+    let res = await axiosInstance.get("/dashboard/stats/");
+    // let todoCount = res.data.todo_count;
+    // let recurrenceCount = res.data.recurrence_count;
+    let todoCount = 10;
+    let recurrenceCount = 15;
+    if (todoCount === undefined) {
+      todoCount = 0;
+    }
+    if (recurrenceCount === undefined) {
+      recurrenceCount = 0;
+    }
+    const donutData = [
+      { name: "Completed Tasks", count: todoCount },
+      { name: "Uncompleted Tasks", count: recurrenceCount },
+    ];
+    return donutData;
+  } catch (error) {
+    console.error("Error fetching donut data:", error);
+    return [];
+  }
+};
+
+const pieDataArray = await fetchPieData();
+
+export  function PieChartGraph() {
+  return (
+    <DonutChart
+      className="mt-6"
+      data={pieDataArray}
+      category="count"
+      index="name"
+      colors={["rose", "yellow"]}
+      showAnimation
+      radius={25}
+      variant="pie"
+    />
+  );
+}
diff --git a/frontend/src/components/dashboard/dashboard.jsx b/frontend/src/components/dashboard/dashboard.jsx
index 31cc71f..7825141 100644
--- a/frontend/src/components/dashboard/dashboard.jsx
+++ b/frontend/src/components/dashboard/dashboard.jsx
@@ -1,22 +1,29 @@
-import { Card, Grid, Tab, TabGroup, TabList, TabPanel, TabPanels, Text, Title, Legend } from "@tremor/react";
-import { KpiCard } from "./KpiCard";
+import {
+  Card,
+  Grid,
+  Tab,
+  TabGroup,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Text,
+  Title,
+  Legend,
+} from "@tremor/react";
+import {KpiCard} from "./KpiCard";
 import { BarChartGraph } from "./Barchart";
-import { DonutChartGraph } from "./DonutChart";
 import { AreaChartGraph } from "./Areachart";
-import { ProgressCircleChart } from "./ProgressCircle";
-import { useState } from "react";
+import {ProgressCircleChart} from "./ProgressCircle";
+
+const valueFormatter = (number) =>
+  `$ ${new Intl.NumberFormat("us").format(number).toString()}`;
 
 export function Dashboard() {
-  const [value, setValue] = useState({
-    from: new Date(2021, 0, 1),
-    to: new Date(2023, 0, 7),
-  });
   return (
     <div className="flex flex-col p-12">
       <div>
         <Title>Dashboard</Title>
         <Text>All of your progress will be shown right here.</Text>
-        <br />
       </div>
 
       <div>
@@ -40,7 +47,8 @@ export function Dashboard() {
                   <Legend
                     className="mt-3 mx-auto w-1/2"
                     categories={["Completed Tasks", "Assigned Tasks"]}
-                    colors={["indigo"]}></Legend>
+                    colors={["indigo"]}
+                  ></Legend>
                 </Card>
                 <Card>
                   <BarChartGraph />
@@ -51,18 +59,17 @@ export function Dashboard() {
               </Grid>
             </TabPanel>
             <TabPanel>
-              <div className="h-31">
-                <Card className="mx-auto h-full">
-                  <Title>Tasks</Title>
-                  <DonutChartGraph />
-                  <br />
-                  <Legend
-                    className="mt-3 mx-auto w-1/2"
-                    categories={["Todo Task", "Recurrence Task"]}
-                    colors={["rose", "yellow"]}
-                  />
-                </Card>
-              </div>
+            <div className="h-31">
+                  <Card className="mx-auto h-full">
+                    <Title>Tasks</Title>
+                    <br />
+                    <Legend
+                      className="mt-3 mx-auto w-1/2"
+                      categories={["Todo Task", "Recurrence Task"]}
+                      colors={["rose", "yellow"]}
+                    />
+                  </Card>
+                </div>
             </TabPanel>
           </TabPanels>
         </TabGroup>