diff --git a/frontend/src/component/project/Project/ProjectSettings/ProjectApiAccess/ProjectApiAccess.tsx b/frontend/src/component/project/Project/ProjectSettings/ProjectApiAccess/ProjectApiAccess.tsx
index 810b8aad9ac..75303dcc542 100644
--- a/frontend/src/component/project/Project/ProjectSettings/ProjectApiAccess/ProjectApiAccess.tsx
+++ b/frontend/src/component/project/Project/ProjectSettings/ProjectApiAccess/ProjectApiAccess.tsx
@@ -3,10 +3,6 @@ import { PageContent } from 'component/common/PageContent/PageContent';
 import { Alert } from '@mui/material';
 import { PageHeader } from 'component/common/PageHeader/PageHeader';
 import AccessContext from 'contexts/AccessContext';
-import {
-    CREATE_API_TOKEN,
-    READ_PROJECT_API_TOKEN,
-} from 'component/providers/AccessProvider/permissions';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 import { usePageTitle } from 'hooks/usePageTitle';
 import { useProjectNameOrId } from 'hooks/api/getters/useProject/useProject';
@@ -20,12 +16,14 @@ import { Search } from 'component/common/Search/Search';
 import {
     CREATE_PROJECT_API_TOKEN,
     DELETE_PROJECT_API_TOKEN,
+    READ_PROJECT_API_TOKEN,
 } from '@server/types/permissions';
 import { CopyApiTokenButton } from 'component/common/ApiTokenTable/CopyApiTokenButton/CopyApiTokenButton';
 import { RemoveApiTokenButton } from 'component/common/ApiTokenTable/RemoveApiTokenButton/RemoveApiTokenButton';
 import { ActionCell } from 'component/common/Table/cells/ActionCell/ActionCell';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 import useProjectApiTokensApi from 'hooks/api/actions/useProjectApiTokensApi/useProjectApiTokensApi';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 
 export const ProjectApiAccess = () => {
     const projectId = useRequiredPathParam('projectId');
@@ -81,17 +79,6 @@ export const ProjectApiAccess = () => {
         </ActionCell>
     ));
 
-    if (!hasAccess(READ_PROJECT_API_TOKEN, projectId)) {
-        return (
-            <PageContent header={<PageHeader title="Api access" />}>
-                <Alert severity="error">
-                    You need to be a member of the project or admin to access
-                    this section.
-                </Alert>
-            </PageContent>
-        );
-    }
-
     return (
         <div style={{ width: '100%', overflow: 'hidden' }}>
             <PageContent
@@ -108,23 +95,35 @@ export const ProjectApiAccess = () => {
                                 <CreateApiTokenButton
                                     permission={CREATE_PROJECT_API_TOKEN}
                                     path="create"
+                                    project={projectId}
                                 />
                             </>
                         }
                     />
                 }
             >
-                <ApiTokenTable
-                    compact
-                    loading={loading}
-                    headerGroups={headerGroups}
-                    setHiddenColumns={setHiddenColumns}
-                    prepareRow={prepareRow}
-                    getTableBodyProps={getTableBodyProps}
-                    getTableProps={getTableProps}
-                    rows={rows}
-                    columns={columns}
-                    globalFilter={globalFilter}
+                <ConditionallyRender
+                    condition={!hasAccess(READ_PROJECT_API_TOKEN, projectId)}
+                    show={
+                        <Alert severity="warning">
+                            You need to have the correct permissions to read API
+                            tokens
+                        </Alert>
+                    }
+                    elseShow={
+                        <ApiTokenTable
+                            compact
+                            loading={loading}
+                            headerGroups={headerGroups}
+                            setHiddenColumns={setHiddenColumns}
+                            prepareRow={prepareRow}
+                            getTableBodyProps={getTableBodyProps}
+                            getTableProps={getTableProps}
+                            rows={rows}
+                            columns={columns}
+                            globalFilter={globalFilter}
+                        />
+                    }
                 />
             </PageContent>