diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index a917ca5..625b9b8 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -11,7 +11,7 @@ import { SideNav } from "./components/navigations/IconSideNav";
 import { Eisenhower } from "./components/EisenhowerMatrix/Eisenhower";
 import { PrivateRoute } from "./PrivateRoute";
 import { ProfileUpdatePage } from "./components/profile/profilePage";
-import { Dashboard } from "./components/dashboard/dashboard";
+import { Dashboard } from "./components/dashboard/Dashboard";
 import { LandingPage } from "./components/landingPage/LandingPage";
 import { PublicRoute } from "./PublicRoute";
 import { useAuth } from "./hooks/AuthHooks";
diff --git a/frontend/src/components/dashboard/dashboard.jsx b/frontend/src/components/dashboard/dashboard.jsx
index 47bcaba..9e77163 100644
--- a/frontend/src/components/dashboard/dashboard.jsx
+++ b/frontend/src/components/dashboard/dashboard.jsx
@@ -9,17 +9,43 @@ import {
   Text,
   Title,
   Legend,
+  Metric,
 } from "@tremor/react";
 import { KpiCard } from "./KpiCard";
 import { BarChartGraph } from "./Barchart";
 import { AreaChartGraph } from "./Areachart";
 import { DonutChartGraph } from "./PieChart";
 import { ProgressCircleChart } from "./ProgressCircle";
+import { axiosInstance } from "src/api/AxiosConfig";
+import { useEffect, useState } from "react";
 
 const valueFormatter = (number) =>
   `$ ${new Intl.NumberFormat("us").format(number).toString()}`;
 
 export function Dashboard() {
+  const [totalTask, setTotalTask] = useState(0);
+  const [totalCompletedTasks, settotalCompletedTasks] = useState(0);
+  const [totalCompletedTasksToday, setTotalCompletedTasksToday] = useState(0);
+  const [totalTaskToday, setTotalTaskToday] = useState(0);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const response = await axiosInstance.get("/dashboard/todostats/");
+      const totalTaskValue = response.data.total_tasks || 0;
+      const totalCompletedTasksValue = response.data.total_completed_tasks || 0;
+      const totalCompletedTasksTodayValue =
+        response.data.total_completed_tasks_today || 0;
+      const totalTaskToday = response.data.total_task_today || 0;
+
+      setTotalTask(totalTaskValue);
+      settotalCompletedTasks(totalCompletedTasksValue);
+      setTotalCompletedTasksToday(totalCompletedTasksTodayValue);
+      setTotalTaskToday(totalTaskToday);
+    };
+
+    fetchData();
+  }, []);
+
   return (
     <div className="flex flex-col p-12">
       <div>
@@ -59,8 +85,38 @@ export function Dashboard() {
                 </Card>
               </Grid>
             </TabPanel>
+            {/*Overview Tab*/}
             <TabPanel>
               <Grid numItemsMd={2} numItemsLg={3} className="gap-6 mt-6">
+                <Card>
+                  <Card
+                    className="max-w-xs mx-auto"
+                    decoration="top"
+                    decorationColor="yellow"
+                  >
+                    <Text>Total tasks</Text>
+                    <Metric>{totalTask}</Metric>
+                  </Card>
+                  <br></br>
+                  <Card
+                    className="max-w-xs mx-auto"
+                    decoration="top"
+                    decorationColor="rose"
+                  >
+                    <Text>Total completed tasks</Text>
+                    <Metric>{totalCompletedTasks}</Metric>
+                  </Card>
+                  <br></br>
+                  <Card
+                    className="max-w-xs mx-auto"
+                    decoration="top"
+                    decorationColor="orange"
+                  >
+                    <Text>Task completed today</Text>
+                    <Metric>{totalCompletedTasksToday}</Metric>
+                  </Card>
+                </Card>
+                {/*Pie chart graph*/}
                 <div className="h-31">
                   <Card className="mx-auto h-full">
                     <Title>Tasks</Title>