diff --git a/frontend/src/Components/ProjectMembers.tsx b/frontend/src/Components/ProjectMembers.tsx
index 73e29e5..469382a 100644
--- a/frontend/src/Components/ProjectMembers.tsx
+++ b/frontend/src/Components/ProjectMembers.tsx
@@ -1,60 +1,57 @@
 import { useEffect, useState } from "react";
 import { Link, useParams } from "react-router-dom";
+import { api } from "../API/API";
+import { UserProjectMember } from "../Types/goTypes";
 
 function ProjectMembers(): JSX.Element {
   const { projectName } = useParams();
-  const [projectMembers, setProjectMembers] = useState<ProjectMember[]>([]);
-
-  //   const getProjectMembers = async (): Promise<void> => {
-  //     const token = localStorage.getItem("accessToken") ?? "";
-  //     const response = await api.getProjectMembers(projectName ?? "", token);
-  //     console.log(response);
-  //     if (response.success) {
-  //       setProjectMembers(response.data ?? []);
-  //     } else {
-  //       console.error(response.message);
-  //     }
-  //   };
-
-  interface ProjectMember {
-    username: string;
-    role: string;
-  }
-
-  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 [projectMembers, setProjectMembers] = useState<UserProjectMember[]>([]);
 
   const getProjectMembers = async (): Promise<void> => {
-    // Use the mock data
-    setProjectMembers(mockProjectMembers);
-
-    await Promise.resolve();
+    const token = localStorage.getItem("accessToken") ?? "";
+    const response = await api.getAllUsersProject(projectName ?? "", token);
+    console.log(response);
+    if (response.success) {
+      setProjectMembers(response.data ?? []);
+    } else {
+      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();
   });
@@ -66,21 +63,21 @@ function ProjectMembers(): JSX.Element {
           <h1 key={index} className="border-b-2 border-black w-full">
             <div className="flex justify-between">
               <div className="flex">
-                <h1>{projectMember.username}</h1>
+                <h1>{projectMember.Username}</h1>
                 <span className="ml-6 mr-2 font-bold">Role:</span>
-                <h1>{projectMember.role}</h1>
+                <h1>{projectMember.UserRole}</h1>
               </div>
               <div className="flex">
                 <div className="ml-auto flex space-x-4">
                   <Link
-                    to={`/viewReports/${projectName}/${projectMember.username}`}
+                    to={`/viewReports/${projectName}/${projectMember.Username}`}
                   >
                     <h1 className="underline cursor-pointer font-bold">
                       View Reports
                     </h1>
                   </Link>
                   <Link
-                    to={`/changeRole/${projectName}/${projectMember.username}`}
+                    to={`/changeRole/${projectName}/${projectMember.Username}`}
                   >
                     <h1 className="underline cursor-pointer font-bold">
                       Change Role