diff --git a/frontend/src/Components/UserStatistics.tsx b/frontend/src/Components/UserStatistics.tsx
new file mode 100644
index 0000000..efb61d9
--- /dev/null
+++ b/frontend/src/Components/UserStatistics.tsx
@@ -0,0 +1,145 @@
+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 [development, setDevelopment] = useState<number>(0);
+  const [meeting, setMeeting] = useState<number>(0);
+  const [admin, setAdmin] = useState<number>(0);
+  const [own_work, setOwnWork] = useState<number>(0);
+  const [study, setStudy] = useState<number>(0);
+  const [testing, setTesting] = useState<number>(0);
+  const total = development + meeting + admin + own_work + study + testing;
+
+  const token = localStorage.getItem("accessToken") ?? "";
+  const { projectName } = useParams();
+
+  const fetchTimePerActivity = async (): Promise<void> => {
+    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(() => {
+    void fetchTimePerActivity();
+  });
+
+  return (
+    <>
+      <h1 className="font-bold text-[30px] mb-[20px]">
+        Total Time 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={development}
+                    readOnly
+                  />
+                </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={meeting}
+                    readOnly
+                  />
+                </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={admin}
+                    readOnly
+                  />
+                </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={own_work}
+                    readOnly
+                  />
+                </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={study}
+                    readOnly
+                  />
+                </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={testing}
+                    readOnly
+                  />
+                </td>
+              </tr>
+              <tr className="h-[10vh] font-bold font-">
+                <td>In Total:</td>
+                <td>
+                  <h1>{total}</h1>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </>
+  );
+}