diff --git a/frontend/src/Components/TimePerActivity.tsx b/frontend/src/Components/TimePerActivity.tsx
new file mode 100644
index 0000000..3dc1a6b
--- /dev/null
+++ b/frontend/src/Components/TimePerActivity.tsx
@@ -0,0 +1,175 @@
+import { useState, useEffect } from "react";
+import { useParams } from "react-router-dom";
+
+/**
+ * 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 token = localStorage.getItem("accessToken") ?? "";
+  //   const username = localStorage.getItem("username") ?? "";
+  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();
+  };
+
+  useEffect(() => {
+    void fetchTimePerActivity();
+  });
+
+  return (
+    <>
+      <h1 className="font-bold text-[30px] mb-[20px]">
+        Total Time Per Activity In: {projectName}{" "}
+      </h1>
+      <div className="border-4 border-black bg-white flex flex-col justify-start min-h-[65vh] h-fit w-[50vw] rounded-3xl overflow-scroll space-y-[2vh] p-[30px] items-center">
+        <div className="flex flex-col items-center">
+          <table className="w-full text-center divide-y divide-x divide-white text-[30px]">
+            <thead>
+              <tr>
+                <th className="w-1/2 py-2 border-b-2 border-black">Activity</th>
+                <th className="w-1/2 py-2 border-b-2 border-black">
+                  Total Time (min)
+                </th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-black">
+              <tr className="h-[10vh]">
+                <td>Development</td>
+                <td>
+                  <input
+                    type="string"
+                    className="border-2 border-black rounded-md text-center w-1/2"
+                    value={developmentTime}
+                    onKeyDown={(event) => {
+                      event.preventDefault();
+                    }}
+                  />
+                </td>
+              </tr>
+              <tr className="h-[10vh]">
+                <td>Meeting</td>
+                <td>
+                  <input
+                    type="string"
+                    className="border-2 border-black rounded-md text-center w-1/2"
+                    value={meetingTime}
+                    onKeyDown={(event) => {
+                      event.preventDefault();
+                    }}
+                  />
+                </td>
+              </tr>
+              <tr className="h-[10vh]">
+                <td>Administration</td>
+                <td>
+                  <input
+                    type="string"
+                    className="border-2 border-black rounded-md text-center w-1/2"
+                    value={adminTime}
+                    onKeyDown={(event) => {
+                      event.preventDefault();
+                    }}
+                  />
+                </td>
+              </tr>
+              <tr className="h-[10vh]">
+                <td>Own Work</td>
+                <td>
+                  <input
+                    type="string"
+                    className="border-2 border-black rounded-md text-center w-1/2"
+                    value={ownWorkTime}
+                    onKeyDown={(event) => {
+                      event.preventDefault();
+                    }}
+                  />
+                </td>
+              </tr>
+              <tr className="h-[10vh]">
+                <td>Studies</td>
+                <td>
+                  <input
+                    type="string"
+                    className="border-2 border-black rounded-md text-center w-1/2"
+                    value={studyTime}
+                    onKeyDown={(event) => {
+                      event.preventDefault();
+                    }}
+                  />
+                </td>
+              </tr>
+              <tr className="h-[10vh]">
+                <td>Testing</td>
+                <td>
+                  <input
+                    type="string"
+                    className="border-2 border-black rounded-md text-center w-1/2"
+                    value={testingTime}
+                    onKeyDown={(event) => {
+                      event.preventDefault();
+                    }}
+                  />
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/frontend/src/Pages/ProjectManagerPages/PMTotalTimeActivity.tsx b/frontend/src/Pages/ProjectManagerPages/PMTotalTimeActivity.tsx
index 676ea28..257a89c 100644
--- a/frontend/src/Pages/ProjectManagerPages/PMTotalTimeActivity.tsx
+++ b/frontend/src/Pages/ProjectManagerPages/PMTotalTimeActivity.tsx
@@ -1,14 +1,11 @@
 import BackButton from "../../Components/BackButton";
 import BasicWindow from "../../Components/BasicWindow";
-import TimeReport from "../../Components/NewWeeklyReport";
+import TimePerActivity from "../../Components/TimePerActivity";
 
 function PMTotalTimeActivity(): JSX.Element {
   const content = (
     <>
-      <h1 className="font-bold text-[30px] mb-[20px]">
-        Total Time Per Activity
-      </h1>
-      <TimeReport />
+      <TimePerActivity />
     </>
   );