diff --git a/frontend/src/Components/UserInfoModal.tsx b/frontend/src/Components/UserInfoModal.tsx
index 9d8dc11..7888c6b 100644
--- a/frontend/src/Components/UserInfoModal.tsx
+++ b/frontend/src/Components/UserInfoModal.tsx
@@ -1,34 +1,38 @@
-import { Link } from "react-router-dom";
 import Button from "./Button";
 import DeleteUser from "./DeleteUser";
 import UserProjectListAdmin from "./UserProjectListAdmin";
+import { useState } from "react";
+import InputField from "./InputField";
+import ChangeUsername from "./ChangeUsername";
+import { StrNameChange } from "../Types/goTypes";
 
 function UserInfoModal(props: {
   isVisible: boolean;
-  manageMember: boolean;
   username: string;
   onClose: () => void;
-  onDelete: (username: string) => void;
 }): JSX.Element {
-  if (!props.isVisible) return <></>;
-  const ManageUserOrMember = (check: boolean): JSX.Element => {
-    if (check) {
-      return (
-        <Link to="/AdminChangeRole">
-          <p className="mb-[20px] hover:font-bold hover:cursor-pointer underline">
-            (Change Role)
-          </p>
-        </Link>
-      );
+  const [showInput, setShowInput] = useState(false);
+  const [newUsername, setNewUsername] = useState("");
+  if (!props.isVisible) {
+    return <></>;
+  }
+
+  const handleChangeNameView = (): void => {
+    if (showInput) {
+      setShowInput(false);
+    } else {
+      setShowInput(true);
     }
-    return (
-      <Link to="/AdminChangeUserName">
-        <p className="mb-[20px] hover:font-bold hover:cursor-pointer underline">
-          (Change Username)
-        </p>
-      </Link>
-    );
   };
+
+  const handleClickChangeName = (): void => {
+    const nameChange: StrNameChange = {
+      prevName: props.username,
+      newName: newUsername,
+    };
+    ChangeUsername({ nameChange: nameChange });
+  };
+
   return (
     <div
       className="fixed inset-0 bg-black bg-opacity-30 backdrop-blur-sm 
@@ -36,7 +40,32 @@ function UserInfoModal(props: {
     >
       <div className="border-4 border-black bg-white p-2 rounded-lg text-center flex flex-col">
         <p className="font-bold text-[30px]">{props.username}</p>
-        {ManageUserOrMember(props.manageMember)}
+        <p
+          className="mb-[20px] hover:font-bold hover:cursor-pointer underline"
+          onClick={handleChangeNameView}
+        >
+          (Change Username)
+        </p>
+        {showInput && (
+          <div className="border-2 border-black rounded-lg p-2">
+            <InputField
+              label={"New username"}
+              type={"text"}
+              value={newUsername}
+              onChange={function (e): void {
+                e.defaultPrevented;
+                setNewUsername(e.target.value);
+              }}
+            />
+            <Button
+              text={"Change"}
+              onClick={function (): void {
+                handleClickChangeName();
+              }}
+              type={"submit"}
+            />
+          </div>
+        )}
         <div>
           <h2 className="font-bold text-[22px] mb-[20px]">
             Member of these projects:
@@ -62,6 +91,8 @@ function UserInfoModal(props: {
           <Button
             text={"Close"}
             onClick={function (): void {
+              setNewUsername("");
+              setShowInput(false);
               props.onClose();
             }}
             type="button"