diff --git a/libs/pages/cluster/src/lib/feature/page-settings-danger-zone-feature/page-settings-danger-zone-feature.spec.tsx b/libs/pages/cluster/src/lib/feature/page-settings-danger-zone-feature/page-settings-danger-zone-feature.spec.tsx
new file mode 100644
index 00000000000..2fc652e5170
--- /dev/null
+++ b/libs/pages/cluster/src/lib/feature/page-settings-danger-zone-feature/page-settings-danger-zone-feature.spec.tsx
@@ -0,0 +1,9 @@
+import { render } from '__tests__/utils/setup-jest'
+import PageSettingsDangerZoneFeature from './page-settings-danger-zone-feature'
+
+describe('PageSettingsDangerZoneFeature', () => {
+ it('should render successfully', () => {
+ const { baseElement } = render()
+ expect(baseElement).toBeTruthy()
+ })
+})
diff --git a/libs/pages/cluster/src/lib/feature/page-settings-danger-zone-feature/page-settings-danger-zone-feature.tsx b/libs/pages/cluster/src/lib/feature/page-settings-danger-zone-feature/page-settings-danger-zone-feature.tsx
new file mode 100644
index 00000000000..95f90c7612f
--- /dev/null
+++ b/libs/pages/cluster/src/lib/feature/page-settings-danger-zone-feature/page-settings-danger-zone-feature.tsx
@@ -0,0 +1,27 @@
+import { useDispatch, useSelector } from 'react-redux'
+import { useNavigate, useParams } from 'react-router-dom'
+import { deleteClusterAction, selectClusterById } from '@qovery/domains/organization'
+import { ClusterEntity } from '@qovery/shared/interfaces'
+import { CLUSTERS_GENERAL_URL, CLUSTERS_URL } from '@qovery/shared/routes'
+import { AppDispatch, RootState } from '@qovery/store'
+import PageSettingsDangerZone from '../../ui/page-settings-danger-zone/page-settings-danger-zone'
+
+export function PageSettingsDangerZoneFeature() {
+ const { organizationId = '', clusterId = '' } = useParams()
+ const dispatch = useDispatch()
+ const navigate = useNavigate()
+
+ const cluster = useSelector((state) => selectClusterById(state, clusterId))
+
+ const deleteCluster = () => {
+ if (cluster) {
+ dispatch(deleteClusterAction({ organizationId, clusterId }))
+ .unwrap()
+ .then(() => navigate(CLUSTERS_URL(organizationId) + CLUSTERS_GENERAL_URL))
+ }
+ }
+
+ return
+}
+
+export default PageSettingsDangerZoneFeature
diff --git a/libs/pages/cluster/src/lib/router/router.tsx b/libs/pages/cluster/src/lib/router/router.tsx
index 5ee2ae818a8..b18f673549d 100644
--- a/libs/pages/cluster/src/lib/router/router.tsx
+++ b/libs/pages/cluster/src/lib/router/router.tsx
@@ -9,6 +9,7 @@ import {
CLUSTER_SETTINGS_URL,
Route,
} from '@qovery/shared/routes'
+import { PageSettingsDangerZoneFeature } from '../feature/page-settings-danger-zone-feature/page-settings-danger-zone-feature'
import { PageSettingsFeature } from '../feature/page-settings-feature/page-settings-feature'
import { PageSettingsV2 } from '../ui/page-settings-v2/page-settings-v2'
@@ -46,6 +47,6 @@ export const ROUTER_CLUSTER_SETTINGS: Route[] = [
},
{
path: CLUSTER_SETTINGS_DANGER_ZONE_URL,
- component: ,
+ component: ,
},
]
diff --git a/libs/pages/cluster/src/lib/ui/page-settings-danger-zone/page-settings-danger-zone.spec.tsx b/libs/pages/cluster/src/lib/ui/page-settings-danger-zone/page-settings-danger-zone.spec.tsx
new file mode 100644
index 00000000000..2b5df7d049e
--- /dev/null
+++ b/libs/pages/cluster/src/lib/ui/page-settings-danger-zone/page-settings-danger-zone.spec.tsx
@@ -0,0 +1,13 @@
+import { render } from '__tests__/utils/setup-jest'
+import PageSettingsDangerZone, { PageSettingsDangerZoneProps } from './page-settings-danger-zone'
+
+const props: PageSettingsDangerZoneProps = {
+ deleteCluster: jest.fn(),
+}
+
+describe('PageSettingsDangerZone', () => {
+ it('should render successfully', () => {
+ const { baseElement } = render()
+ expect(baseElement).toBeTruthy()
+ })
+})
diff --git a/libs/pages/cluster/src/lib/ui/page-settings-danger-zone/page-settings-danger-zone.tsx b/libs/pages/cluster/src/lib/ui/page-settings-danger-zone/page-settings-danger-zone.tsx
new file mode 100644
index 00000000000..c6c53c9b539
--- /dev/null
+++ b/libs/pages/cluster/src/lib/ui/page-settings-danger-zone/page-settings-danger-zone.tsx
@@ -0,0 +1,41 @@
+import { EnvironmentModeEnum } from 'qovery-typescript-axios'
+import { ClusterEntity } from '@qovery/shared/interfaces'
+import { BlockContentDelete, HelpSection } from '@qovery/shared/ui'
+
+export interface PageSettingsDangerZoneProps {
+ deleteCluster: () => void
+ cluster?: ClusterEntity
+}
+
+export function PageSettingsDangerZone(props: PageSettingsDangerZoneProps) {
+ const { deleteCluster, cluster } = props
+ return (
+
+ )
+}
+
+export default PageSettingsDangerZone