diff --git a/frontend/src/Components/ProjectInfoModal.tsx b/frontend/src/Components/ProjectInfoModal.tsx
index 210e309..b153e9c 100644
--- a/frontend/src/Components/ProjectInfoModal.tsx
+++ b/frontend/src/Components/ProjectInfoModal.tsx
@@ -3,10 +3,11 @@ import Button from "./Button";
 import { UserProjectMember } from "../Types/goTypes";
 import GetUsersInProject from "./GetUsersInProject";
 
-function UserInfoModal(props: {
+function ProjectInfoModal(props: {
   isVisible: boolean;
   projectname: string;
   onClose: () => void;
+  onClick: (username: string) => void;
 }): JSX.Element {
   const [users, setUsers] = useState<UserProjectMember[]>([]);
   GetUsersInProject({ projectName: props.projectname, setUsersProp: setUsers });
@@ -17,23 +18,31 @@ function UserInfoModal(props: {
       className="fixed inset-0 bg-black bg-opacity-30 backdrop-blur-sm 
       flex justify-center items-center"
     >
-      <div className="border-4 border-black bg-white p-2 rounded-lg text-center">
-        <p className="font-bold text-[30px]">{props.projectname}</p>
-        <div>
-          <h2 className="font-bold text-[22px] mb-[20px]">
-            Members of this project:
-          </h2>
-          <div className="border-2 border-black bg-white p-2 rounded-lg text-center pl-6 pr-6">
-            <ul>
+      <div className="border-4 border-black bg-white p-2 rounded-2xl text-center h-[41vh] w-[40vw] flex flex-col">
+        <div className="pl-20 pr-20">
+          <h1 className="font-bold text-[32px] mb-[20px]">Project members:</h1>
+          <div className="border-2 border-black p-2 rounded-lg text-center overflow-scroll h-[26vh]">
+            <ul className="text-left font-medium space-y-2">
+              <div></div>
               {users.map((user) => (
-                <li key={user.Username}>
-                  <span>{user.Username}</span>
+                <li
+                  className="items-start p-1 border-2 border-black rounded-lg bg-orange-200 hover:bg-orange-600 hover:text-slate-100 hover:cursor-pointer"
+                  key={user.Username}
+                  onClick={() => {
+                    props.onClick(user.Username);
+                  }}
+                >
+                  <span>
+                    Name: {user.Username}
+                    <div></div>
+                    Role: {user.UserRole}
+                  </span>
                 </li>
               ))}
             </ul>
           </div>
         </div>
-        <div className="items-center space-x-6 pr-6 pl-6">
+        <div className="space-x-16">
           <Button
             text={"Delete"}
             onClick={function (): void {
@@ -54,4 +63,4 @@ function UserInfoModal(props: {
   );
 }
 
-export default UserInfoModal;
+export default ProjectInfoModal;