diff --git a/frontend/src/Components/TimePerRole.tsx b/frontend/src/Components/TimePerRole.tsx
new file mode 100644
index 0000000..a43e732
--- /dev/null
+++ b/frontend/src/Components/TimePerRole.tsx
@@ -0,0 +1,141 @@
+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 [PManagerTime, setPManagerTime] = useState(0);
+  const [SManagerTime, setSManagerTime] = useState(0);
+  const [DeveloperTime, setDeveloperTime] = useState(0);
+  const [TesterTime, setTesterTime] = useState(0);
+
+  //   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 TimePerRole {
+    PManager: number;
+    SManager: number;
+    Developer: number;
+    Tester: number;
+  }
+
+  const fetchWeeklyReport = async (): Promise<void> => {
+    // Use mock data
+    const report: TimePerRole = {
+      PManager: 120,
+      SManager: 80,
+      Developer: 200,
+      Tester: 150,
+    };
+
+    // Set the state with the mock data
+    setPManagerTime(report.PManager);
+    setSManagerTime(report.SManager);
+    setDeveloperTime(report.Developer);
+    setTesterTime(report.Tester);
+
+    await Promise.resolve();
+  };
+
+  useEffect(() => {
+    void fetchWeeklyReport();
+  });
+
+  return (
+    <>
+      <h1 className="font-bold text-[30px] mb-[20px]">
+        Total Time Per Role 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">Role</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>Project Manager</td>
+                <td>
+                  <input
+                    type="string"
+                    className="border-2 border-black rounded-md text-center w-1/2"
+                    value={PManagerTime}
+                    onKeyDown={(event) => {
+                      event.preventDefault();
+                    }}
+                  />
+                </td>
+              </tr>
+              <tr className="h-[10vh]">
+                <td>System Manager</td>
+                <td>
+                  <input
+                    type="string"
+                    className="border-2 border-black rounded-md text-center w-1/2"
+                    value={SManagerTime}
+                    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={DeveloperTime}
+                    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={TesterTime}
+                    onKeyDown={(event) => {
+                      event.preventDefault();
+                    }}
+                  />
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/frontend/src/Pages/ProjectManagerPages/PMTotalTimeRole.tsx b/frontend/src/Pages/ProjectManagerPages/PMTotalTimeRole.tsx
index c0161f8..7caea04 100644
--- a/frontend/src/Pages/ProjectManagerPages/PMTotalTimeRole.tsx
+++ b/frontend/src/Pages/ProjectManagerPages/PMTotalTimeRole.tsx
@@ -1,8 +1,13 @@
 import BasicWindow from "../../Components/BasicWindow";
 import BackButton from "../../Components/BackButton";
+import TimePerRole from "../../Components/TimePerRole";
 
 function PMTotalTimeRole(): JSX.Element {
-  const content = <></>;
+  const content = (
+    <>
+      <TimePerRole />
+    </>
+  );
 
   const buttons = (
     <>