diff --git a/frontend/src/components/authentication/SignUpPage.jsx b/frontend/src/components/authentication/SignUpPage.jsx
index 5d3c76f..6bcc8dc 100644
--- a/frontend/src/components/authentication/SignUpPage.jsx
+++ b/frontend/src/components/authentication/SignUpPage.jsx
@@ -54,6 +54,7 @@ export default function SignUp() {
   const handleChange = (e) => {
     const { name, value } = e.target;
     setFormData({ ...formData, [name]: value });
+    console.log(formData);
   };
   {
     /* Particles Loader*/
@@ -218,7 +219,7 @@ export default function SignUp() {
           </div>
           <br></br>
 
-          {/* Login Button */}
+          {/* Signups Button */}
           <button className="btn btn-success w-full " onClick={handleSubmit}>
             Signup
           </button>
diff --git a/frontend/src/components/dashboard/Areachart.jsx b/frontend/src/components/dashboard/Areachart.jsx
new file mode 100644
index 0000000..9d0fe41
--- /dev/null
+++ b/frontend/src/components/dashboard/Areachart.jsx
@@ -0,0 +1,65 @@
+import { AreaChart, Title } from "@tremor/react";
+import React from "react";
+import axiosInstance from "../../api/configs/AxiosConfig";
+
+const fetchAreaChartData = async () => {
+    let res = await axiosInstance.get("/dashboard/weekly/");
+    console.log(res.data);
+    const areaChartData = [
+        {
+            date: "Monday",
+            "This Week": res.data[0]["This Week"],
+            "Last Week": res.data[0]["Last Week"],
+        },
+        {
+            date: "Tuesday",
+            "This Week": res.data[1]["This Week"],
+            "Last Week": res.data[1]["Last Week"],
+        },
+        {
+            date: "Wednesday",
+            "This Week": res.data[2]["This Week"],
+            "Last Week": res.data[2]["Last Week"],
+        },
+        {
+            date: "Thursday",
+            "This Week": res.data[3]["This Week"],
+            "Last Week": res.data[3]["Last Week"],
+        },
+        {
+            date: "Friday",
+            "This Week": res.data[4]["This Week"],
+            "Last Week": res.data[4]["Last Week"],
+        },
+        {
+            date: "Saturday",
+            "This Week": res.data[5]["This Week"],
+            "Last Week": res.data[5]["Last Week"],
+        },
+        {
+            date: "Sunday",
+            "This Week": res.data[6]["This Week"],
+            "Last Week": res.data[6]["Last Week"],
+        },
+    ];
+}
+
+const areaChartDataArray = await fetchAreaChartData();
+export const AreaChartGraph = () => {
+    const [value, setValue] = React.useState(null);
+    return (
+        <>
+            <Title>Number of tasks statistics vs. last week</Title>
+            <AreaChart
+                className="mt-6"
+                data={areaChartDataArray}
+                index="date"
+                categories={["This Week", "Last Week"]}
+                colors={["neutral", "indigo"]}
+                yAxisWidth={30}
+                onValueChange={(v) => setValue(v)}
+                showAnimation
+            />
+        </>
+    );
+};
\ No newline at end of file
diff --git a/frontend/src/components/dashboard/Barchart.jsx b/frontend/src/components/dashboard/Barchart.jsx
index 5c26cb8..fcf9044 100644
--- a/frontend/src/components/dashboard/Barchart.jsx
+++ b/frontend/src/components/dashboard/Barchart.jsx
@@ -1,93 +1,66 @@
-import { BarChart, Card, Title } from "@tremor/react";
+import { BarChart, 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",
-    "2022": 45,
-    "2023": 78,
-  },
-  {
-    date: "Feb 23",
-    "2022": 52,
-    "2023": 71,
-  },
-  {
-    date: "Mar 23",
-    "2022": 48,
-    "2023": 80,
-  },
-  {
-    date: "Apr 23",
-    "2022": 61,
-    "2023": 65,
-  },
-  {
-    date: "May 23",
-    "2022": 55,
-    "2023": 58,
-  },
-  {
-    date: "Jun 23",
-    "2022": 67,
-    "2023": 62,
-  },
-  {
-    date: "Jul 23",
-    "2022": 60,
-    "2023": 54,
-  },
-  {
-    date: "Aug 23",
-    "2022": 72,
-    "2023": 49,
-  },
-  {
-    date: "Sep 23",
-    "2022": 65,
-    "2023": 52,
-  },
-  {
-    date: "Oct 23",
-    "2022": 68,
-    "2023": null,
-  },
-  {
-    date: "Nov 23",
-    "2022": 74,
-    "2023": null,
-  },
-  {
-    date: "Dec 23",
-    "2022": 71,
-    "2023": null,
-  },
-];
-
+const fetchBarChartData = async () => {
+  let res = await axiosInstance.get("/dashboard/weekly/");
+  console.log(res.data);
+  const barchartData = [
+    {
+      date: "Monday",
+      "This Week": res.data[0]["Completed This Week"],
+      "Last Week": res.data[0]["Completed Last Week"],
+    },
+    {
+      date: "Tuesday",
+      "This Week": res.data[1]["Completed This Week"],
+      "Last Week": res.data[1]["Completed Last Week"],
+    },
+    {
+      date: "Wednesday",
+      "This Week": res.data[2]["Completed This Week"],
+      "Last Week": res.data[2]["Completed Last Week"],
+    },
+    {
+      date: "Thursday",
+      "This Week": res.data[3]["Completed This Week"],
+      "Last Week": res.data[3]["Completed Last Week"],
+    },
+    {
+      date: "Friday",
+      "This Week": res.data[4]["Completed This Week"],
+      "Last Week": res.data[4]["Completed Last Week"],
+    },
+    {
+      date: "Saturday",
+      "This Week": res.data[5]["Completed This Week"],
+      "Last Week": res.data[5]["Completed Last Week"],
+    },
+    {
+      date: "Sunday",
+      "This Week": res.data[6]["Completed This Week"],
+      "Last Week": res.data[6]["Completed Last Week"],
+    },
+  ];
+  return barchartData;
+ 
+};
+const barchartDataArray = await fetchBarChartData();
 export const BarChartGraph = () => {
   const [value, setValue] = React.useState(null);
   return (
     <>
-      <Card>
-        <Title>Closed Pull Requests</Title>
+        <Title>Task completed statistics vs. last week</Title>
         <BarChart
           className="mt-6"
-          data={chartdata3}
+          data={barchartDataArray}
           index="date"
-          categories={["2022", "2023"]}
+          categories={["This Week", "Last Week"]}
           colors={["neutral", "indigo"]}
           yAxisWidth={30}
           onValueChange={(v) => setValue(v)}
           showAnimation
         />
-      </Card>
-      <pre>{JSON.stringify(value)}</pre>
     </>
   );
 };
\ No newline at end of file
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/KpiCard.jsx b/frontend/src/components/dashboard/KpiCard.jsx
index 08d7a99..2ed9f10 100644
--- a/frontend/src/components/dashboard/KpiCard.jsx
+++ b/frontend/src/components/dashboard/KpiCard.jsx
@@ -1,21 +1,40 @@
 
 import { BadgeDelta, Card, Flex, Metric, ProgressBar, Text } from "@tremor/react";
+import React from "react";
+import axiosInstance from "../../api/configs/AxiosConfig";
+
+const fetchKpiCardData = async () => {
+  let res = await axiosInstance.get("/dashboard/stats/");
+  let completedThisWeek = res.data["completed_this_week"];
+  let completedLastWeek = res.data["completed_last_week"];
+  let percentage = (completedThisWeek / completedLastWeek)*100;
+  let incOrdec = undefined;
+  if (completedThisWeek <= completedLastWeek) {
+    incOrdec = "moderateDecrease";
+  }
+  if (completedThisWeek > completedLastWeek) {
+    incOrdec = "moderateIncrease";
+  }
+  return {completedThisWeek, completedLastWeek, incOrdec, percentage};
+}
+
+const {kpiCardDataArray, completedThisWeek ,completedLastWeek,  incOrdec, percentage} = await fetchKpiCardData();
+
 
 export default function KpiCard() {
   return (
+    
     <Card className="max-w-lg mx-auto">
       <Flex alignItems="start">
         <div>
-          <Text>Sales</Text>
-          <Metric>$ 12,699</Metric>
+          <Metric>{completedThisWeek}</Metric>
         </div>
-        <BadgeDelta deltaType="moderateIncrease">13.2%</BadgeDelta>
+        <BadgeDelta deltaType={incOrdec}>{percentage}%</BadgeDelta>
       </Flex>
       <Flex className="mt-4">
-        <Text className="truncate">68% ($ 149,940)</Text>
-        <Text>$ 220,500</Text>
+        <Text className="truncate">vs. {completedLastWeek} (last week)</Text>
       </Flex>
-      <ProgressBar value={15.9} className="mt-2" />
+      <ProgressBar value={percentage} className="mt-2" />
     </Card>
   );
 }
\ No newline at end of file
diff --git a/frontend/src/components/dashboard/dashboard.jsx b/frontend/src/components/dashboard/dashboard.jsx
index 7d7427e..ac26298 100644
--- a/frontend/src/components/dashboard/dashboard.jsx
+++ b/frontend/src/components/dashboard/dashboard.jsx
@@ -1,20 +1,24 @@
-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";
+import { AreaChartGraph } from "./Areachart";
 
-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 (
@@ -34,26 +38,30 @@ export default function Dashboard() {
             <TabPanel>
               <Grid numItemsMd={2} numItemsLg={3} className="gap-6 mt-6">
                 <Card>
-                  <KpiCard />
+                  <Title>Highlights vs. last week</Title>
                   <br />
                   <KpiCard />
+                  <br />
+                </Card>
+                <Card>
+                <BarChartGraph />
+                </Card>
+                <Card>
+                  <AreaChartGraph />
                 </Card>
-                {/* 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 />
               </Grid>
             </TabPanel>
           </TabPanels>