diff --git a/client/src/components/forms/MemberForm/UsernameForm.tsx b/client/src/components/forms/MemberForm/UsernameForm.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..60565d2cffe68a18f42ab79721142c3b3a4245a7
--- /dev/null
+++ b/client/src/components/forms/MemberForm/UsernameForm.tsx
@@ -0,0 +1,5 @@
+
+
+export default function UsernameForm() {
+
+}
\ No newline at end of file
diff --git a/client/src/components/forms/MemberForm/index.tsx b/client/src/components/forms/MemberForm/index.tsx
index 68e32a13201ece5fc8af8e6015feebe8fc38e55d..45edc24c78acf641cd0cbe6a9581692a47b1bd70 100644
--- a/client/src/components/forms/MemberForm/index.tsx
+++ b/client/src/components/forms/MemberForm/index.tsx
@@ -1,6 +1,7 @@
 import './member-form.scss';
 import RoleForm from 'components/forms/RoleForm';
 import { Team, TeamMember, TeamRole } from 'adapters/team';
+import { useState } from 'react';
 
 interface Props {
     roles: TeamRole[];
@@ -8,11 +9,14 @@ interface Props {
 }
 
 export default function MemberForm({ roles, team }: Props) {
+    const [role, setRole] = useState<TeamRole>();
+    const [username, setUsername] = useState<string>();
     return (
         <div className="member-form">
-            asdf
-            
-            {/*<RoleForm roles={roles} team={team} />*/}
+            {
+                
+            }
+            <RoleForm roles={roles} team={team} setResult={setRole} />
         </div>
     )
 }
\ No newline at end of file
diff --git a/client/src/components/forms/RoleForm/RoleChangeForm.tsx b/client/src/components/forms/RoleForm/RoleChangeForm.tsx
index cd61656eff069f0cad89764e78c71c0f13aae3c2..ddb67d056279ac0467ba5585522bd491f118d7d5 100644
--- a/client/src/components/forms/RoleForm/RoleChangeForm.tsx
+++ b/client/src/components/forms/RoleForm/RoleChangeForm.tsx
@@ -5,30 +5,38 @@ import Button from 'components/ui/Button';
 interface Props {
     roles: TeamRole[];
     setEdit: Function;
-    member: TeamMember;
+    member?: TeamMember;
+    setResult?: Function
     team: Team;
+    setAllRoles: (state: any) => void
 }
 
-export default function RoleForm({ roles, setEdit, member, team }: Props) {
-    const [currentRole, setRole] = useState(member.role.id);
-    const [allRoles, setRoles] = useState(roles);
+export default function RoleForm({ roles, setEdit, member, team, setResult, setAllRoles }: Props) {
+    const [currentRole, setRole] = useState(member?.role.id);
 
     const onSubmit = useCallback(async (e: FormEvent) => {
         e.preventDefault();
-        await updateTeamMember(team.id, { user: member.id, role: currentRole });
-        window.location.reload();
-    }, [currentRole, member, team]);
+        if (currentRole) {
+            if (setResult) {
+                setResult(currentRole);
+            }
+            if (member) {
+                await updateTeamMember(team.id, { user: member.id, role: currentRole });
+                window.location.reload();
+            }
+        }
+    }, [currentRole, member, team, setResult]);
 
     const onDelete = useCallback(async (id: string) => {
         await deleteTeamRole(team.id, id);
-        setRoles(state => state.filter(role => role.id !== id));
-    }, [team]);
+        setAllRoles((state: any) => state.filter((role: any) => role.id !== id));
+    }, [team, setAllRoles]);
 
     return (
         <form className="role-change-form" onSubmit={onSubmit}>
-            <h2>Change the role of {member.username}</h2>
+            <h2>Update the role</h2>
             {
-                allRoles.map((role) => (
+                roles.map((role) => (
                     <div className="role-item" key={role.id}>
                         <input
                             type="radio"
diff --git a/client/src/components/forms/RoleForm/RoleEditForm.tsx b/client/src/components/forms/RoleForm/RoleEditForm.tsx
index 8b9d68db0257f310831f2d0b206556f33ccb6315..b62519de70fd623d8ddc474ec6ae01f98f24b2a6 100644
--- a/client/src/components/forms/RoleForm/RoleEditForm.tsx
+++ b/client/src/components/forms/RoleForm/RoleEditForm.tsx
@@ -8,6 +8,7 @@ interface Props {
     role?: TeamRole;
     team: Team;
     setEdit: Function;
+    setAllRoles: (state: any) => void
 }
 
 export function validateName(name: string): string | null {
@@ -17,21 +18,22 @@ export function validateName(name: string): string | null {
     return 'The name is required';
 }
 
-export default function RoleEditForm({ role, team, setEdit }: Props) {
+export default function RoleEditForm({ role, team, setEdit, setAllRoles }: Props) {
     const [name, setName] = useState(role?.name ?? '');
 
     const onSubmit = useCallback(async (e: FormEvent) => {
         e.preventDefault();
         if (validateName(name) === null) {
             if (!role?.id) {
-                await createTeamRole(team.id, name);
+                const role = await createTeamRole(team.id, name);
+                setAllRoles((state: any) => [...state, role]);
                 setEdit(null);
             } else {
                 //todo edit team role
                 setEdit(null);
             }
         }
-    }, [name, team, setEdit, role]);
+    }, [name, team, setEdit, role, setAllRoles]);
 
     return (
         <form className="role-edit-form" onSubmit={onSubmit}>
diff --git a/client/src/components/forms/RoleForm/index.tsx b/client/src/components/forms/RoleForm/index.tsx
index 16b7dd6bcaeb18c58f07a5040cf5602805293927..8919e53182b7283ced0d1e7a9ad44a83d551fea8 100644
--- a/client/src/components/forms/RoleForm/index.tsx
+++ b/client/src/components/forms/RoleForm/index.tsx
@@ -7,22 +7,19 @@ import './role-form.scss';
 interface Props {
     roles: TeamRole[];
     team: Team;
-    member: TeamMember
+    member?: TeamMember;
+    setResult?: Function;
 }
 
-export default function RoleForm({ roles, team, member }: Props) {
+export default function RoleForm({ roles, team, member, setResult }: Props) {
     const [edit, setEdit] = useState<TeamRole | null>(null);
+    const [allRoles, setRoles] = useState(roles);
     return (
         <>
             {
-                edit === null && (
-                    <RoleChangeForm roles={roles} setEdit={setEdit} team={team} member={member}/>
-                )
-            }
-            {
-                edit && (
-                    <RoleEditForm role={edit} team={team} setEdit={setEdit}/>
-                )
+                edit === null ?
+                    <RoleChangeForm roles={allRoles} setEdit={setEdit} team={team} member={member} setAllRoles={setRoles} setResult={setResult} />
+                    : <RoleEditForm role={edit} team={team} setEdit={setEdit} setAllRoles={setRoles} />
             }
         </>
     )