diff --git a/frontend/web/components/EditPermissions.tsx b/frontend/web/components/EditPermissions.tsx
index 7226e9fb1ab7..2a5a27fd7140 100644
--- a/frontend/web/components/EditPermissions.tsx
+++ b/frontend/web/components/EditPermissions.tsx
@@ -89,6 +89,7 @@ type EditPermissionModalType = {
   permissionChanged?: () => void
   isEditUserPermission?: boolean
   isEditGroupPermission?: boolean
+  isEditRolePermission?: boolean
 }
 
 type EditPermissionsType = Omit<EditPermissionModalType, 'onSave'> & {
@@ -175,12 +176,12 @@ const _EditPermissionsModal: FC<EditPermissionModalType> = withAdminPermissions(
 
     const levelUpperCase = level.toUpperCase()
     const viewPermission = `VIEW_${levelUpperCase}`
-    const projectId =
-      props.level === 'project'
-        ? props.id
-        : props.level === 'environment'
-        ? props.parentId
-        : undefined
+    let projectId: number | string | undefined
+    if (props.level === 'project') {
+      projectId = props.id
+    } else if (props.level === 'environment') {
+      projectId = props.parentId
+    }
 
     const [permissionWasCreated, setPermissionWasCreated] =
       useState<boolean>(false)
@@ -259,11 +260,14 @@ const _EditPermissionsModal: FC<EditPermissionModalType> = withAdminPermissions(
         )
       }
 
-      const foundPermission = isGroup
-        ? findPermissionByGroup()
-        : role
-        ? findPermissionByRole()
-        : findPermissionByUser()
+      let foundPermission
+      if (isGroup) {
+        foundPermission = findPermissionByGroup()
+      } else if (role) {
+        foundPermission = findPermissionByRole()
+      } else {
+        foundPermission = findPermissionByUser()
+      }
 
       const isProjectOrEnvironmentRole =
         role && (level === 'project' || level === 'environment')
@@ -708,7 +712,7 @@ const _EditPermissionsModal: FC<EditPermissionModalType> = withAdminPermissions(
             deleteRolePermissionUser({
               organisation_id: id,
               role_id: roleId,
-              user_id: roleSelected?.user_role_id!,
+              user_id: roleSelected?.user_role_id ?? 0,
             }).then(onRoleRemoved as any)
           }
         }
@@ -721,7 +725,7 @@ const _EditPermissionsModal: FC<EditPermissionModalType> = withAdminPermissions(
             }).then(onRoleRemoved as any)
           } else if (roleSelected) {
             deleteRolePermissionGroup({
-              group_id: roleSelected.group_role_id!,
+              group_id: roleSelected.group_role_id ?? 0,
               organisation_id: id,
               role_id: roleId,
             }).then(onRoleRemoved as any)
@@ -737,7 +741,7 @@ const _EditPermissionsModal: FC<EditPermissionModalType> = withAdminPermissions(
           setRolesSelected(
             (rolesSelected || []).concat({
               group_role_id: undefined,
-              role: usersData?.role!,
+              role: usersData?.role ?? 0,
               user_role_id: usersData?.id,
             }),
           )
@@ -746,7 +750,7 @@ const _EditPermissionsModal: FC<EditPermissionModalType> = withAdminPermissions(
           setRolesSelected(
             (rolesSelected || []).concat({
               group_role_id: groupsData?.id,
-              role: groupsData?.role!,
+              role: groupsData?.role ?? 0,
               user_role_id: undefined,
             }),
           )
@@ -995,6 +999,7 @@ const EditPermissions: FC<EditPermissionsType> = (props) => {
   const {
     envId,
     id,
+    isEditRolePermission,
     level,
     onSaveGroup,
     onSaveUser,
@@ -1134,7 +1139,9 @@ const EditPermissions: FC<EditPermissionsType> = (props) => {
                                 <Flex className='table-column px-3'>
                                   <div className='mb-1 font-weight-medium'>
                                     {`${first_name} ${last_name}`}{' '}
-                                    {id == AccountStore.getUserId() && '(You)'}
+                                    {String(id) ===
+                                      String(AccountStore.getUserId()) &&
+                                      '(You)'}
                                   </div>
                                   <div className='list-item-subtitle'>
                                     {email}
@@ -1212,73 +1219,75 @@ const EditPermissions: FC<EditPermissionsType> = (props) => {
             </div>
           </FormGroup>
         </TabItem>
-        <TabItem tabLabel='Roles'>
-          <PlanBasedAccess className='mt-4' feature={'RBAC'} theme='page'>
-            <Row space className='mt-4'>
-              <h5 className='m-b-0'>{roleTabTitle}</h5>
-            </Row>
-            <PanelSearch
-              id='org-members-list'
-              title={'Roles'}
-              className='no-pad'
-              items={roles}
-              itemHeight={65}
-              header={
-                <Row className='table-header px-3'>
-                  <div
-                    style={{
-                      width: rolesWidths[0],
-                    }}
-                  >
-                    Roles
-                  </div>
-                  <div
-                    style={{
-                      width: rolesWidths[1],
-                    }}
-                  >
-                    Description
-                  </div>
-                </Row>
-              }
-              renderRow={(role) => (
-                <Row
-                  className='list-item clickable cursor-pointer'
-                  key={role.id}
-                >
-                  <Row
-                    onClick={() => editRolePermissions(role)}
-                    className='table-column px-3'
-                    style={{
-                      width: rolesWidths[0],
-                    }}
-                  >
-                    {role.name}
+        {isEditRolePermission && (
+          <TabItem tabLabel='Roles'>
+            <PlanBasedAccess className='mt-4' feature={'RBAC'} theme='page'>
+              <Row space className='mt-4'>
+                <h5 className='m-b-0'>{roleTabTitle}</h5>
+              </Row>
+              <PanelSearch
+                id='org-members-list'
+                title={'Roles'}
+                className='no-pad'
+                items={roles}
+                itemHeight={65}
+                header={
+                  <Row className='table-header px-3'>
+                    <div
+                      style={{
+                        width: rolesWidths[0],
+                      }}
+                    >
+                      Roles
+                    </div>
+                    <div
+                      style={{
+                        width: rolesWidths[1],
+                      }}
+                    >
+                      Description
+                    </div>
                   </Row>
+                }
+                renderRow={(role) => (
                   <Row
-                    className='table-column px-3'
-                    onClick={() => editRolePermissions(role)}
-                    style={{
-                      width: rolesWidths[1],
-                    }}
+                    className='list-item clickable cursor-pointer'
+                    key={role.id}
                   >
-                    {role.description}
-                  </Row>
-                </Row>
-              )}
-              renderNoResults={
-                <Panel title={'Roles'} className='no-pad'>
-                  <div className='search-list'>
-                    <Row className='list-item p-3 text-muted'>
-                      {`You currently have no roles.`}
+                    <Row
+                      onClick={() => editRolePermissions(role)}
+                      className='table-column px-3'
+                      style={{
+                        width: rolesWidths[0],
+                      }}
+                    >
+                      {role.name}
                     </Row>
-                  </div>
-                </Panel>
-              }
-              isLoading={false}
-            />
-          </PlanBasedAccess>
-        </TabItem>
+                    <Row
+                      className='table-column px-3'
+                      onClick={() => editRolePermissions(role)}
+                      style={{
+                        width: rolesWidths[1],
+                      }}
+                    >
+                      {role.description}
+                    </Row>
+                  </Row>
+                )}
+                renderNoResults={
+                  <Panel title={'Roles'} className='no-pad'>
+                    <div className='search-list'>
+                      <Row className='list-item p-3 text-muted'>
+                        {`You currently have no roles.`}
+                      </Row>
+                    </div>
+                  </Panel>
+                }
+                isLoading={false}
+              />
+            </PlanBasedAccess>
+          </TabItem>
+        )}
       </Tabs>
     </div>
   )
diff --git a/frontend/web/components/pages/EnvironmentSettingsPage.tsx b/frontend/web/components/pages/EnvironmentSettingsPage.tsx
index 66a8136bca25..7b3376d5c637 100644
--- a/frontend/web/components/pages/EnvironmentSettingsPage.tsx
+++ b/frontend/web/components/pages/EnvironmentSettingsPage.tsx
@@ -17,7 +17,6 @@ import _ from 'lodash'
 import PageTitle from 'components/PageTitle'
 import { getStore } from 'common/store'
 import { getRoles } from 'common/services/useRole'
-import { getRoleEnvironmentPermissions } from 'common/services/useRolePermission'
 import AccountStore from 'common/stores/account-store'
 import { Link, useHistory, useRouteMatch } from 'react-router-dom'
 import { enableFeatureVersioning } from 'common/services/useEnableFeatureVersioning'
@@ -27,12 +26,7 @@ import Format from 'common/utils/format'
 import Setting from 'components/Setting'
 import API from 'project/api'
 import AppActions from 'common/dispatcher/app-actions'
-import {
-  Environment,
-  Webhook,
-  Role,
-  RolePermission,
-} from 'common/types/responses'
+import { Environment, Webhook, Role } from 'common/types/responses'
 import PanelSearch from 'components/PanelSearch'
 import moment from 'moment'
 import Panel from 'components/base/grid/Panel'
@@ -73,6 +67,7 @@ const EnvironmentSettingsPage: React.FC = () => {
   const { projectId } = useRouteContext()
   const [currentEnv, setCurrentEnv] = useState<Environment | null>(null)
   const [roles, setRoles] = useState<Role[]>([])
+  const [rolesLoaded, setRolesLoaded] = useState(false)
   const [environmentContentType, setEnvironmentContentType] =
     useState<any>(null)
 
@@ -130,24 +125,10 @@ const EnvironmentSettingsPage: React.FC = () => {
       { organisation_id: AccountStore.getOrganisation().id },
       { forceRefetch: true },
     )
-    if (!roles?.data?.results?.length) return
-
-    const roleEnvironmentPermissions = await getRoleEnvironmentPermissions(
-      store,
-      {
-        env_id: env.id,
-        organisation_id: AccountStore.getOrganisation().id,
-        role_id: roles.data.results[0].id,
-      },
-      { forceRefetch: true },
-    )
-
-    const matchingItems: Role[] = roles.data.results.filter((item1: Role) =>
-      roleEnvironmentPermissions.data.results.some(
-        (item2: RolePermission) => item2.role === item1.id,
-      ),
-    )
-    setRoles(matchingItems)
+    if (roles?.data?.results) {
+      setRoles(roles.data.results)
+      setRolesLoaded(true)
+    }
 
     if (Utils.getPlansPermission('METADATA')) {
       const supportedContentType = await getSupportedContentType(getStore(), {
@@ -804,6 +785,7 @@ const EnvironmentSettingsPage: React.FC = () => {
                         level='environment'
                         roleTabTitle='Environment Permissions'
                         roles={roles}
+                        isEditRolePermission={rolesLoaded}
                       />
                     </FormGroup>
                   </TabItem>
diff --git a/frontend/web/components/pages/project-settings/ProjectSettingsPage.tsx b/frontend/web/components/pages/project-settings/ProjectSettingsPage.tsx
index 0c1833265591..f5ecbe32314f 100644
--- a/frontend/web/components/pages/project-settings/ProjectSettingsPage.tsx
+++ b/frontend/web/components/pages/project-settings/ProjectSettingsPage.tsx
@@ -12,7 +12,7 @@ import EditHealthProvider from './tabs/EditHealthProvider'
 import FeatureExport from 'components/import-export/FeatureExport'
 import { GeneralTab } from './tabs/general-tab'
 import { SDKSettingsTab } from './tabs/SDKSettingsTab'
-import { PermissionsTab } from './tabs/PermissionsTab'
+import { ProjectPermissionsTab } from './tabs/ProjectPermissionsTab'
 import { CustomFieldsTab } from './tabs/CustomFieldsTab'
 import { ImportTab } from './tabs/ImportTab'
 import { useGetEnvironmentsQuery } from 'common/services/useEnvironment'
@@ -32,9 +32,9 @@ const ProjectSettingsPage = () => {
     error,
     isLoading,
     isUninitialized,
-  } = useGetProjectQuery({ id: projectId! }, { skip: !projectId })
+  } = useGetProjectQuery({ id: projectId ?? '' }, { skip: !projectId })
   const { data: environments } = useGetEnvironmentsQuery(
-    { projectId: projectId! },
+    { projectId: projectId ?? '' },
     { skip: !projectId },
   )
 
@@ -101,7 +101,7 @@ const ProjectSettingsPage = () => {
     },
     {
       component: (
-        <PermissionsTab
+        <ProjectPermissionsTab
           projectId={project.id}
           organisationId={organisationId}
         />
diff --git a/frontend/web/components/pages/project-settings/tabs/PermissionsTab.tsx b/frontend/web/components/pages/project-settings/tabs/ProjectPermissionsTab.tsx
similarity index 84%
rename from frontend/web/components/pages/project-settings/tabs/PermissionsTab.tsx
rename to frontend/web/components/pages/project-settings/tabs/ProjectPermissionsTab.tsx
index 713ff1bbafa0..b4a5e181f944 100644
--- a/frontend/web/components/pages/project-settings/tabs/PermissionsTab.tsx
+++ b/frontend/web/components/pages/project-settings/tabs/ProjectPermissionsTab.tsx
@@ -4,19 +4,20 @@ import React from 'react'
 import { useGetRolesQuery } from 'common/services/useRole'
 import { useGetProjectPermissionsQuery } from 'common/services/useProject'
 
-type PermissionsTabProps = {
+type ProjectPermissionsTabProps = {
   projectId: number
   organisationId: number
 }
 
-export const PermissionsTab = ({
+export const ProjectPermissionsTab = ({
   organisationId,
   projectId,
-}: PermissionsTabProps) => {
+}: ProjectPermissionsTabProps) => {
   const {
     data: rolesData,
     error: rolesError,
     isLoading: rolesLoading,
+    isSuccess: rolesSuccess,
   } = useGetRolesQuery({ organisation_id: organisationId })
 
   const {
@@ -38,7 +39,7 @@ export const PermissionsTab = ({
     )
   }
 
-  if (rolesError || permissionsError) {
+  if (permissionsError) {
     return (
       <div className='mt-4'>
         <InfoMessage>Error loading permissions data</InfoMessage>
@@ -55,6 +56,7 @@ export const PermissionsTab = ({
       roles={rolesData?.results || []}
       permissions={permissionsData || []}
       onSaveUser={handleSaveUser}
+      isEditRolePermission={rolesSuccess && !rolesError && !rolesLoading}
     />
   )
 }