diff --git a/frontend/src/views/Project/MembersPage/components/MemberListTab/MemberListTab.tsx b/frontend/src/views/Project/MembersPage/components/MemberListTab/MemberListTab.tsx
index ae7470af5..c0499d243 100644
--- a/frontend/src/views/Project/MembersPage/components/MemberListTab/MemberListTab.tsx
+++ b/frontend/src/views/Project/MembersPage/components/MemberListTab/MemberListTab.tsx
@@ -160,7 +160,7 @@ export const MemberListTab = () => {
 
   const findRoleFromId = useCallback(
     (roleId: string) => {
-      return roles.find(({ _id: id }) => id === roleId);
+      return (roles || []).find(({ _id: id }) => id === roleId);
     },
     [roles]
   );
@@ -305,7 +305,7 @@ export const MemberListTab = () => {
                                     onRoleChange(membershipId, selectedRole)
                                   }
                                 >
-                                  {roles
+                                  {(roles || [])
                                     .filter(({ slug }) =>
                                       slug === "owner" ? isIamOwner || role === "owner" : true
                                     )
diff --git a/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleList/ProjectRoleList.tsx b/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleList/ProjectRoleList.tsx
index a7ecaf409..cca666ba8 100644
--- a/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleList/ProjectRoleList.tsx
+++ b/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleList/ProjectRoleList.tsx
@@ -64,6 +64,8 @@ export const ProjectRoleList = ({ onSelectRole }: Props) => {
     }
   };
 
+  // roles={roles as TRole<string>[]}
+
   return (
     <div className="w-full">
       <div className="mb-4 flex">
@@ -99,7 +101,7 @@ export const ProjectRoleList = ({ onSelectRole }: Props) => {
             </THead>
             <TBody>
               {isRolesLoading && <TableSkeleton columns={4} innerKey="org-roles" />}
-              {roles?.map((role) => {
+              {(roles as TRole<string>[])?.map((role) => {
                 const { _id: id, name, slug } = role;
                 const isNonMutatable = ["admin", "member", "viewer"].includes(slug);