diff --git a/frontend/src/Components/TimePerActivity.tsx b/frontend/src/Components/TimePerActivity.tsx
index e0bcddf..ef34521 100644
--- a/frontend/src/Components/TimePerActivity.tsx
+++ b/frontend/src/Components/TimePerActivity.tsx
@@ -1,70 +1,45 @@
 import { useState, useEffect } from "react";
 import { useParams } from "react-router-dom";
+import { api } from "../API/API";
+import { projectTimes } from "./GetProjectTimes";
 
 /**
  * Renders the component for showing total time per role in a project.
  * @returns JSX.Element
  */
 export default function TimePerRole(): JSX.Element {
-  const [developmentTime, setDevelopmentTime] = useState<number>();
-  const [meetingTime, setMeetingTime] = useState<number>();
-  const [adminTime, setAdminTime] = useState<number>();
-  const [ownWorkTime, setOwnWorkTime] = useState<number>();
-  const [studyTime, setStudyTime] = useState<number>();
-  const [testingTime, setTestingTime] = useState<number>();
+  const [development, setDevelopment] = useState<number>();
+  const [meeting, setMeeting] = useState<number>();
+  const [admin, setAdmin] = useState<number>();
+  const [own_work, setOwnWork] = useState<number>();
+  const [study, setStudy] = useState<number>();
+  const [testing, setTesting] = useState<number>();
 
-  //   const token = localStorage.getItem("accessToken") ?? "";
-  //   const username = localStorage.getItem("username") ?? "";
+  const token = localStorage.getItem("accessToken") ?? "";
   const { projectName } = useParams();
 
-  //   const fetchTimePerRole = async (): Promise<void> => {
-  //     const response = await api.getTimePerRole(
-  //       username,
-  //       projectName ?? "",
-  //       token,
-  //     );
-  // {
-  //     if (response.success) {
-  //       const report: TimePerRole = response.data ?? {
-  //         PManagerTime: 0,
-  //         SManagerTime: 0,
-  //         DeveloperTime: 0,
-  //         TesterTime: 0,
-  //       };
-  //     } else {
-  //       console.error("Failed to fetch weekly report:", response.message);
-  //     }
-  //   }
-
-  interface TimePerActivity {
-    developmentTime: number;
-    meetingTime: number;
-    adminTime: number;
-    ownWorkTime: number;
-    studyTime: number;
-    testingTime: number;
-  }
-
   const fetchTimePerActivity = async (): Promise<void> => {
-    // Use mock data
-    const report: TimePerActivity = {
-      developmentTime: 100,
-      meetingTime: 200,
-      adminTime: 300,
-      ownWorkTime: 50,
-      studyTime: 75,
-      testingTime: 110,
-    };
-
-    // Set the state with the mock data
-    setDevelopmentTime(report.developmentTime);
-    setMeetingTime(report.meetingTime);
-    setAdminTime(report.adminTime);
-    setOwnWorkTime(report.ownWorkTime);
-    setStudyTime(report.studyTime);
-    setTestingTime(report.testingTime);
-
-    await Promise.resolve();
+    const response = await api.getProjectTimes(projectName ?? "", token);
+    {
+      if (response.success) {
+        const report: projectTimes = response.data ?? {
+          development: 0,
+          meeting: 0,
+          admin: 0,
+          own_work: 0,
+          study: 0,
+          testing: 0,
+        };
+        setDevelopment(report.development);
+        setMeeting(report.meeting);
+        setAdmin(report.admin);
+        setOwnWork(report.own_work);
+        setStudy(report.study);
+        setTesting(report.testing);
+      } else {
+        console.error("Failed to fetch weekly report:", response.message);
+      }
+    }
   };
 
   useEffect(() => {