diff --git a/frontend/src/Components/UserInfoModal.tsx b/frontend/src/Components/UserInfoModal.tsx
new file mode 100644
index 0000000..fff6776
--- /dev/null
+++ b/frontend/src/Components/UserInfoModal.tsx
@@ -0,0 +1,46 @@
+import Button from "./Button";
+import DeleteUser from "./DeleteUser";
+import UserProjectListAdmin from "./UserProjectListAdmin";
+
+function UserInfoModal(props: {
+  isVisible: boolean;
+  username: string;
+  onClose: () => void;
+}): JSX.Element {
+  if (!props.isVisible) return <></>;
+
+  return (
+    <div
+      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">
+        <h1 className="font-bold text-[30px] mb-[20px]">{props.username}</h1>
+        <div>
+          <h2 className="font-bold text-[22px] mb-[20px]">
+            Member of these projects:
+          </h2>
+          <UserProjectListAdmin username={props.username} />
+        </div>
+        <div className="items-center space-x-6 pr-6 pl-6">
+          <Button
+            text={"Delete"}
+            onClick={function (): void {
+              DeleteUser({ usernameToDelete: props.username });
+            }}
+            type="button"
+          />
+          <Button
+            text={"Close"}
+            onClick={function (): void {
+              props.onClose();
+            }}
+            type="button"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default UserInfoModal;