diff --git a/frontend/src/Components/DisplayUnsignedReports.tsx b/frontend/src/Components/DisplayUnsignedReports.tsx
index 780f20c..13adc4b 100644
--- a/frontend/src/Components/DisplayUnsignedReports.tsx
+++ b/frontend/src/Components/DisplayUnsignedReports.tsx
@@ -1,12 +1,7 @@
 import { useState, useEffect } from "react";
 import { Link, useParams } from "react-router-dom";
-
-interface UnsignedReports {
-  projectName: string;
-  username: string;
-  week: number;
-  signed: boolean;
-}
+import { api } from "../API/API";
+import { WeeklyReport } from "../Types/goTypes";
 
 /**
  * Renders a component that displays the projects a user is a part of and links to the projects start-page.
@@ -14,74 +9,21 @@ interface UnsignedReports {
  */
 function DisplayUserProject(): JSX.Element {
   const { projectName } = useParams();
-  const [unsignedReports, setUnsignedReports] = useState<UnsignedReports[]>([]);
+  const [unsignedReports, setUnsignedReports] = useState<WeeklyReport[]>([]);
   //const navigate = useNavigate();
 
-  //   const getUnsignedReports = async (): Promise<void> => {
-  //     const token = localStorage.getItem("accessToken") ?? "";
-  //     const response = await api.getUserProjects(token);
-  //     console.log(response);
-  //     if (response.success) {
-  //       setUnsignedReports(response.data ?? []);
-  //     } else {
-  //       console.error(response.message);
-  //     }
-  //   };
-
-  //   const handleReportClick = async (projectName: string): Promise<void> => {
-  //     const username = localStorage.getItem("username") ?? "";
-  //     const token = localStorage.getItem("accessToken") ?? "";
-  //     const response = await api.checkIfProjectManager(
-  //       username,
-  //       projectName,
-  //       token,
-  //     );
-  //     if (response.success) {
-  //       if (response.data) {
-  //         navigate(`/PMProjectPage/${projectName}`);
-  //       } else {
-  //         navigate(`/project/${projectName}`);
-  //       }
-  //     } else {
-  //       // handle error
-  //       console.error(response.message);
-  //     }
-  //   };
-
   const getUnsignedReports = async (): Promise<void> => {
-    // Simulate a delay
-    await Promise.resolve();
-
-    // Use mock data
-    const reports: UnsignedReports[] = [
-      {
-        projectName: "projecttest",
-        username: "user1",
-        week: 2,
-        signed: false,
-      },
-      {
-        projectName: "projecttest",
-        username: "user2",
-        week: 2,
-        signed: false,
-      },
-      {
-        projectName: "projecttest",
-        username: "user3",
-        week: 2,
-        signed: false,
-      },
-      {
-        projectName: "projecttest",
-        username: "user4",
-        week: 2,
-        signed: false,
-      },
-    ];
-
-    // Set the state with the mock data
-    setUnsignedReports(reports);
+    const token = localStorage.getItem("accessToken") ?? "";
+    const response = await api.getUnsignedReportsInProject(
+      projectName ?? "",
+      token,
+    );
+    console.log(response);
+    if (response.success) {
+      setUnsignedReports(response.data ?? []);
+    } else {
+      console.error(response.message);
+    }
   };
 
   // Call getProjects when the component mounts
@@ -95,32 +37,31 @@ function DisplayUserProject(): JSX.Element {
         All Unsigned Reports In: {projectName}{" "}
       </h1>
       <div className="border-4 border-black bg-white flex flex-col items-center justify-center min-h-[65vh] h-fit w-[70vw] rounded-3xl content-center overflow-scroll space-y-[10vh] p-[30px] text-[20px]">
-        {unsignedReports.map(
-          (unsignedReport: UnsignedReports, index: number) => (
-            <h1 key={index} className="border-b-2 border-black w-full">
-              <div className="flex justify-between">
-                <div className="flex">
-                  <h1>{unsignedReport.username}</h1>
-                  <span className="ml-6 mr-2 font-bold">Week:</span>
-                  <h1>{unsignedReport.week}</h1>
-                  <span className="ml-6 mr-2 font-bold">Signed:</span>
-                  <h1>NO</h1>
-                </div>
-                <div className="flex">
-                  <div className="ml-auto flex space-x-4">
-                    <Link
-                      to={`/PMViewUnsignedReport/${projectName}/${unsignedReport.username}/${unsignedReport.week}`}
-                    >
-                      <h1 className="underline cursor-pointer font-bold">
-                        View Report
-                      </h1>
-                    </Link>
-                  </div>
+        {unsignedReports.map((unsignedReport: WeeklyReport, index: number) => (
+          <h1 key={index} className="border-b-2 border-black w-full">
+            <div className="flex justify-between">
+              <div className="flex">
+                <span className="ml-6 mr-2 font-bold">UserID:</span>
+                <h1>{unsignedReport.userId}</h1>
+                <span className="ml-6 mr-2 font-bold">Week:</span>
+                <h1>{unsignedReport.week}</h1>
+                <span className="ml-6 mr-2 font-bold">Signed:</span>
+                <h1>NO</h1>
+              </div>
+              <div className="flex">
+                <div className="ml-auto flex space-x-4">
+                  <Link
+                    to={`/PMViewUnsignedReport/${projectName}/${unsignedReport.userId}/${unsignedReport.week}`}
+                  >
+                    <h1 className="underline cursor-pointer font-bold">
+                      View Report
+                    </h1>
+                  </Link>
                 </div>
               </div>
-            </h1>
-          ),
-        )}
+            </div>
+          </h1>
+        ))}
       </div>
     </>
   );