diff --git a/frontend/src/Components/DisplayUnsignedReports.tsx b/frontend/src/Components/DisplayUnsignedReports.tsx
index 232cb31..25a1da3 100644
--- a/frontend/src/Components/DisplayUnsignedReports.tsx
+++ b/frontend/src/Components/DisplayUnsignedReports.tsx
@@ -3,17 +3,14 @@ import { Link, useParams } from "react-router-dom";
 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.
- * @returns The JSX element representing the component.
- */
 function DisplayUserProject(): JSX.Element {
   const { projectName } = useParams();
   const [unsignedReports, setUnsignedReports] = useState<WeeklyReport[]>([]);
-  //const navigate = useNavigate();
+  const [usernames, setUsernames] = useState<string[]>([]);
+  const token = localStorage.getItem("accessToken") ?? "";
+
   useEffect(() => {
     const getUnsignedReports = async (): Promise<void> => {
-      const token = localStorage.getItem("accessToken") ?? "";
       const response = await api.getUnsignedReportsInProject(
         projectName ?? "",
         token,
@@ -21,13 +18,21 @@ function DisplayUserProject(): JSX.Element {
       console.log(response);
       if (response.success) {
         setUnsignedReports(response.data ?? []);
+        const usernamesPromises = (response.data ?? []).map((report) =>
+          api.getUsername(report.userId, token),
+        );
+        const usernamesResponses = await Promise.all(usernamesPromises);
+        const usernames = usernamesResponses.map(
+          (res) => (res.data as { username?: string }).username ?? "",
+        );
+        setUsernames(usernames);
       } else {
         console.error(response.message);
       }
     };
 
     void getUnsignedReports();
-  }, [projectName]); // Include 'projectName' in the dependency array
+  }, [projectName, token]);
 
   return (
     <>
@@ -39,8 +44,8 @@ function DisplayUserProject(): JSX.Element {
           <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">Username:</span>
+                <h1>{usernames[index]}</h1>{" "}
                 <span className="ml-6 mr-2 font-bold">Week:</span>
                 <h1>{unsignedReport.week}</h1>
                 <span className="ml-6 mr-2 font-bold">Total Time:</span>
@@ -58,7 +63,7 @@ function DisplayUserProject(): JSX.Element {
               <div className="flex">
                 <div className="ml-auto flex space-x-4">
                   <Link
-                    to={`/PMViewUnsignedReport/${projectName}/${unsignedReport.userId}/${unsignedReport.week}`}
+                    to={`/PMViewUnsignedReport/${projectName}/${usernames[index]}/${unsignedReport.week}`}
                   >
                     <h1 className="underline cursor-pointer font-bold">
                       View Report