diff --git a/frontend/.gitignore b/frontend/.gitignore
index 7d5390b6df..10bbc1c1fa 100644
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -49,6 +49,7 @@ build
 
 .DS_Store
 
+cypress/downloads/*
 cypress/videos/*
 cypress/downloads/*
 cypress/screenshots/*
diff --git a/frontend/src/component/project/ProjectAccess/ProjectAccessAssign/ProjectAccessAssign.tsx b/frontend/src/component/project/ProjectAccess/ProjectAccessAssign/ProjectAccessAssign.tsx
index 73ff6c6fb3..5f033a65da 100644
--- a/frontend/src/component/project/ProjectAccess/ProjectAccessAssign/ProjectAccessAssign.tsx
+++ b/frontend/src/component/project/ProjectAccess/ProjectAccessAssign/ProjectAccessAssign.tsx
@@ -1,4 +1,4 @@
-import { FormEvent, useEffect, useMemo, useState } from 'react';
+import React, { FormEvent, useEffect, useMemo, useState } from 'react';
 import {
     Autocomplete,
     Button,
diff --git a/frontend/src/component/project/ProjectAccess/ProjectAccessTable/ProjectAccessTable.tsx b/frontend/src/component/project/ProjectAccess/ProjectAccessTable/ProjectAccessTable.tsx
index edb500bb84..fd75a7224a 100644
--- a/frontend/src/component/project/ProjectAccess/ProjectAccessTable/ProjectAccessTable.tsx
+++ b/frontend/src/component/project/ProjectAccess/ProjectAccessTable/ProjectAccessTable.tsx
@@ -32,6 +32,7 @@ import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 import { IUser } from 'interfaces/user';
 import { IGroup } from 'interfaces/group';
 import { LinkCell } from 'component/common/Table/cells/LinkCell/LinkCell';
+import { mapGroupUsers } from '../../../../hooks/api/getters/useGroup/useGroup';
 
 const StyledAvatar = styled(Avatar)(({ theme }) => ({
     width: theme.spacing(4),
@@ -339,7 +340,6 @@ export const ProjectAccessTable: VFC = () => {
         setRemoveOpen(false);
         setSelectedRow(undefined);
     };
-
     return (
         <PageContent
             header={
diff --git a/frontend/src/hooks/api/actions/useProjectApi/useProjectApi.ts b/frontend/src/hooks/api/actions/useProjectApi/useProjectApi.ts
index ca13284ea9..2f64d621ea 100644
--- a/frontend/src/hooks/api/actions/useProjectApi/useProjectApi.ts
+++ b/frontend/src/hooks/api/actions/useProjectApi/useProjectApi.ts
@@ -112,23 +112,6 @@ const useProjectApi = () => {
         }
     };
 
-    const addUserToRole = async (
-        projectId: string,
-        roleId: number,
-        userId: number
-    ) => {
-        const path = `api/admin/projects/${projectId}/users/${userId}/roles/${roleId}`;
-        const req = createRequest(path, { method: 'POST' });
-
-        try {
-            const res = await makeRequest(req.caller, req.id);
-
-            return res;
-        } catch (e) {
-            throw e;
-        }
-    };
-
     const addAccessToProject = async (
         projectId: string,
         roleId: number,
@@ -226,7 +209,6 @@ const useProjectApi = () => {
         deleteProject,
         addEnvironmentToProject,
         removeEnvironmentFromProject,
-        addUserToRole,
         addAccessToProject,
         removeUserFromRole,
         removeGroupFromRole,
diff --git a/frontend/src/hooks/api/getters/useProjectAccess/useProjectAccess.ts b/frontend/src/hooks/api/getters/useProjectAccess/useProjectAccess.ts
index a3ceea8a32..9d67f266eb 100644
--- a/frontend/src/hooks/api/getters/useProjectAccess/useProjectAccess.ts
+++ b/frontend/src/hooks/api/getters/useProjectAccess/useProjectAccess.ts
@@ -1,10 +1,12 @@
 import useSWR, { mutate, SWRConfiguration } from 'swr';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { formatApiPath } from 'utils/formatPath';
 import handleErrorResponses from '../httpErrorResponseHandler';
 import { IProjectRole } from 'interfaces/role';
 import { IGroup } from 'interfaces/group';
 import { IUser } from 'interfaces/user';
+import { useGroups } from '../useGroups/useGroups';
+import { mapGroupUsers } from '../useGroup/useGroup';
 
 export enum ENTITY_TYPE {
     USER = 'USERS',
@@ -45,11 +47,7 @@ const useProjectAccess = (
 
     const CACHE_KEY = `api/admin/projects/${projectId}/users`;
 
-    const { data, error } = useSWR<IProjectAccessOutput>(
-        CACHE_KEY,
-        fetcher,
-        options
-    );
+    const { data, error } = useSWR(CACHE_KEY, fetcher, options);
 
     const [loading, setLoading] = useState(!error && !data);
 
@@ -61,21 +59,19 @@ const useProjectAccess = (
         setLoading(!error && !data);
     }, [data, error]);
 
-    // TODO: Remove this and replace `mockData` back for `data` @79. This mocks what a group looks like when returned along with the access.
-    // const { groups } = useGroups();
-    // const mockData = useMemo(
-    //     () => ({
-    //         ...data,
-    //         groups: groups?.map(group => ({
-    //             ...group,
-    //             roleId: 4,
-    //         })) as IProjectAccessGroup[],
-    //     }),
-    //     [data, groups]
-    // );
-
+    let access: IProjectAccessOutput = data
+        ? {
+              roles: data.roles,
+              users: data.users,
+              groups:
+                  data?.groups.map((group: any) => ({
+                      ...group,
+                      users: mapGroupUsers(group.users ?? []),
+                  })) ?? [],
+          }
+        : { roles: [], users: [], groups: [] };
     return {
-        access: data ? data : { roles: [], users: [], groups: [] },
+        access: access,
         error,
         loading,
         refetchProjectAccess,