diff --git a/frontend/src/Components/ProjectMembers.tsx b/frontend/src/Components/ProjectMembers.tsx
index 469382a..be485c3 100644
--- a/frontend/src/Components/ProjectMembers.tsx
+++ b/frontend/src/Components/ProjectMembers.tsx
@@ -17,49 +17,19 @@ function ProjectMembers(): JSX.Element {
       console.error(response.message);
     }
   };
-
-  // const mockProjectMembers = [
-  //   {
-  //     username: "username1",
-  //     role: "Project Manager",
-  //   },
-  //   {
-  //     username: "username2",
-  //     role: "System Manager",
-  //   },
-  //   {
-  //     username: "username3",
-  //     role: "Developer",
-  //   },
-  //   {
-  //     username: "username4",
-  //     role: "Tester",
-  //   },
-  //   {
-  //     username: "username5",
-  //     role: "Tester",
-  //   },
-  //   {
-  //     username: "username6",
-  //     role: "Tester",
-  //   },
-  // ];
-
-  // const getProjectMembers = async (): Promise<void> => {
-  //   // Use the mock data
-  //   setProjectMembers(mockProjectMembers);
-
-  //   await Promise.resolve();
-  // };
-
   useEffect(() => {
     void getProjectMembers();
-  });
+  }, []);
+
+  interface ProjectMember {
+    Username: string;
+    UserRole: string;
+  }
 
   return (
     <>
       <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]">
-        {projectMembers.map((projectMember, index) => (
+        {projectMembers.map((projectMember: ProjectMember, index: number) => (
           <h1 key={index} className="border-b-2 border-black w-full">
             <div className="flex justify-between">
               <div className="flex">