diff --git a/frontend/src/component/feature/CreateFeatureButton/CreateFeatureButton.tsx b/frontend/src/component/feature/CreateFeatureButton/CreateFeatureButton.tsx
index ff5c999a5d..719dbca6a7 100644
--- a/frontend/src/component/feature/CreateFeatureButton/CreateFeatureButton.tsx
+++ b/frontend/src/component/feature/CreateFeatureButton/CreateFeatureButton.tsx
@@ -1,5 +1,5 @@
 import classnames from 'classnames';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import { Button, IconButton, Tooltip } from '@mui/material';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { Add } from '@mui/icons-material';
@@ -7,6 +7,9 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit
 import { NAVIGATE_TO_CREATE_FEATURE } from 'utils/testIds';
 import { IFeaturesFilter } from 'hooks/useFeaturesFilter';
 import { useCreateFeaturePath } from 'component/feature/CreateFeatureButton/useCreateFeaturePath';
+import PermissionButton from 'component/common/PermissionButton/PermissionButton';
+import { CREATE_FEATURE } from 'component/providers/AccessProvider/permissions';
+import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
 
 interface ICreateFeatureButtonProps {
     loading: boolean;
@@ -19,6 +22,7 @@ export const CreateFeatureButton = ({
 }: ICreateFeatureButtonProps) => {
     const smallScreen = useMediaQuery('(max-width:800px)');
     const createFeature = useCreateFeaturePath(filter);
+    const navigate = useNavigate();
 
     if (!createFeature) {
         return null;
@@ -28,30 +32,33 @@ export const CreateFeatureButton = ({
         <ConditionallyRender
             condition={smallScreen}
             show={
-                <Tooltip title="Create feature toggle" arrow>
-                    <IconButton
-                        component={Link}
-                        to={createFeature.path}
-                        data-testid={NAVIGATE_TO_CREATE_FEATURE}
-                        disabled={!createFeature.access}
-                        size="large"
-                    >
-                        <Add />
-                    </IconButton>
-                </Tooltip>
+                <PermissionIconButton
+                    permission={CREATE_FEATURE}
+                    projectId={createFeature.projectId}
+                    component={Link}
+                    to={createFeature.path}
+                    size="large"
+                    tooltipProps={{
+                        title: 'Create feature toggle',
+                    }}
+                >
+                    <Add />
+                </PermissionIconButton>
             }
             elseShow={
-                <Button
-                    to={createFeature.path}
+                <PermissionButton
+                    onClick={() => {
+                        navigate(createFeature.path);
+                    }}
+                    permission={CREATE_FEATURE}
+                    projectId={createFeature.projectId}
                     color="primary"
                     variant="contained"
-                    component={Link}
                     data-testid={NAVIGATE_TO_CREATE_FEATURE}
-                    disabled={!createFeature.access}
                     className={classnames({ skeleton: loading })}
                 >
                     New feature toggle
-                </Button>
+                </PermissionButton>
             }
         />
     );
diff --git a/frontend/src/component/feature/CreateFeatureButton/useCreateFeaturePath.ts b/frontend/src/component/feature/CreateFeatureButton/useCreateFeaturePath.ts
index 7a5b571eb8..d94ee5f546 100644
--- a/frontend/src/component/feature/CreateFeatureButton/useCreateFeaturePath.ts
+++ b/frontend/src/component/feature/CreateFeatureButton/useCreateFeaturePath.ts
@@ -2,33 +2,29 @@ import { useDefaultProjectId } from 'hooks/api/getters/useDefaultProject/useDefa
 import { IFeaturesFilter } from 'hooks/useFeaturesFilter';
 import { getCreateTogglePath } from 'utils/routePathHelpers';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
-import { CREATE_FEATURE } from 'component/providers/AccessProvider/permissions';
-import AccessContext from 'contexts/AccessContext';
-import { useContext } from 'react';
 
 interface IUseCreateFeaturePathOutput {
     path: string;
-    access: boolean;
+    projectId: string;
 }
 
 export const useCreateFeaturePath = (
     filter: IFeaturesFilter
 ): IUseCreateFeaturePathOutput | undefined => {
-    const { hasAccess } = useContext(AccessContext);
     const defaultProjectId = useDefaultProjectId();
     const { uiConfig } = useUiConfig();
 
-    const selectedProjectId =
+    const projectId =
         filter.project === '*' || !filter.project
             ? defaultProjectId
             : filter.project;
 
-    if (!selectedProjectId) {
+    if (!projectId) {
         return;
     }
 
     return {
-        path: getCreateTogglePath(selectedProjectId, uiConfig.flags.E),
-        access: hasAccess(CREATE_FEATURE, selectedProjectId),
+        path: getCreateTogglePath(projectId, uiConfig.flags.E),
+        projectId,
     };
 };