From d0264ed695937f4987bd33259a7ea25f4691cd25 Mon Sep 17 00:00:00 2001
From: Pierre GB <pgerbelot@qovery.com>
Date: Tue, 13 Oct 2026 15:22:43 +0200
Subject: [PATCH 1/7] feat(clusters): label Operator updates in deployment
 history (#3098)

---
 .../deployments/logs/$deploymentId.tsx        |   1 +
 .../cluster-deployment-list.spec.tsx          |  41 +++++-
 .../cluster-deployment-list.tsx               |   6 +-
 .../cluster-last-deployment-section.spec.tsx  | 130 +++++++++++++++---
 .../cluster-last-deployment-section.tsx       |  10 +-
 .../cluster-header-logs.spec.tsx              |  16 ++-
 .../cluster-header-logs.tsx                   |  10 +-
 .../deployment-action.spec.tsx                |  35 ++++-
 .../deployment-action/deployment-action.tsx   |  20 ++-
 package.json                                  |   2 +-
 yarn.lock                                     |  10 +-
 11 files changed, 248 insertions(+), 33 deletions(-)

diff --git a/apps/console/src/routes/_authenticated/organization/$organizationId/cluster/$clusterId/deployments/logs/$deploymentId.tsx b/apps/console/src/routes/_authenticated/organization/$organizationId/cluster/$clusterId/deployments/logs/$deploymentId.tsx
index d64c36585a5..98d1d4e6880 100644
--- a/apps/console/src/routes/_authenticated/organization/$organizationId/cluster/$clusterId/deployments/logs/$deploymentId.tsx
+++ b/apps/console/src/routes/_authenticated/organization/$organizationId/cluster/$clusterId/deployments/logs/$deploymentId.tsx
@@ -88,6 +88,7 @@ function ClusterDeploymentLogsPage({
               triggeredBy={deployment?.auditing_data.triggered_by}
               actionStatus={deployment?.action_status}
               totalDuration={deployment?.total_duration}
+              operation={deployment?.operation}
             />
           </div>
           {deployment?.action_status === 'ONGOING' && deployment?.reason === 'MAINTENANCE' && (
diff --git a/libs/domains/clusters/feature/src/lib/cluster-deployment-list/cluster-deployment-list.spec.tsx b/libs/domains/clusters/feature/src/lib/cluster-deployment-list/cluster-deployment-list.spec.tsx
index 50bf60934ef..b5ba9d8433c 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-deployment-list/cluster-deployment-list.spec.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-deployment-list/cluster-deployment-list.spec.tsx
@@ -1,4 +1,4 @@
-import { type ClusterDeploymentHistory } from 'qovery-typescript-axios'
+import { type ClusterDeploymentHistory, ClusterDeploymentHistoryOperationEnum } from 'qovery-typescript-axios'
 import { type ReactNode } from 'react'
 import { renderWithProviders, screen } from '@qovery/shared/util-tests'
 import { ClusterDeploymentList } from './cluster-deployment-list'
@@ -19,6 +19,7 @@ const defaultDeploymentHistory: ClusterDeploymentHistory[] = [
     status: 'DEPLOYED',
     action_status: 'SUCCESS',
     trigger_action: 'DEPLOY',
+    operation: ClusterDeploymentHistoryOperationEnum.CLUSTER,
     is_dry_run: false,
     reason: 'MAINTENANCE',
     total_duration: 'PT16.503S',
@@ -67,6 +68,44 @@ describe('ClusterDeploymentList', () => {
     expect(screen.getByText('Maintenance')).toBeInTheDocument()
   })
 
+  it('should render the Operator action with its maintenance badge when operation is OPERATOR_UPDATE', () => {
+    mockDeploymentHistory = [
+      {
+        ...defaultDeploymentHistory[0],
+        operation: ClusterDeploymentHistoryOperationEnum.OPERATOR_UPDATE,
+      },
+    ]
+
+    renderWithProviders(<ClusterDeploymentList organizationId="org-123" clusterId="cluster-123" />)
+
+    const action = screen.getByText('Operator').parentElement
+    expect(screen.queryByText('Deploy')).not.toBeInTheDocument()
+    expect(screen.getByText('Maintenance')).toBeInTheDocument()
+    expect(screen.getByRole('link', { name: /Operator update/ }).tagName).toBe('TR')
+    expect(action?.querySelector('.fa-rotate-right')).toBeInTheDocument()
+    expect(action?.querySelector('[tabindex]')).toBeNull()
+    expect(action?.closest('[tabindex]')?.tagName).toBe('TR')
+  })
+
+  it('should render the Deploy action when operation is CLUSTER', () => {
+    renderWithProviders(<ClusterDeploymentList organizationId="org-123" clusterId="cluster-123" />)
+
+    expect(screen.getByText('Deploy')).toBeInTheDocument()
+    expect(screen.queryByText('Operator')).not.toBeInTheDocument()
+    expect(screen.getByText('Maintenance')).toBeInTheDocument()
+  })
+
+  it('should render the Deploy action when operation is missing from the payload', () => {
+    const legacyDeployment: Partial<ClusterDeploymentHistory> = { ...defaultDeploymentHistory[0] }
+    delete legacyDeployment.operation
+    mockDeploymentHistory = [legacyDeployment as ClusterDeploymentHistory]
+
+    renderWithProviders(<ClusterDeploymentList organizationId="org-123" clusterId="cluster-123" />)
+
+    expect(screen.getByText('Deploy')).toBeInTheDocument()
+    expect(screen.queryByText('Operator')).not.toBeInTheDocument()
+  })
+
   it('should render a dry run badge when the deployment is a dry run', () => {
     mockDeploymentHistory = [
       {
diff --git a/libs/domains/clusters/feature/src/lib/cluster-deployment-list/cluster-deployment-list.tsx b/libs/domains/clusters/feature/src/lib/cluster-deployment-list/cluster-deployment-list.tsx
index 03aabb583da..32746321701 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-deployment-list/cluster-deployment-list.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-deployment-list/cluster-deployment-list.tsx
@@ -153,8 +153,8 @@ export function ClusterDeploymentList({ organizationId, clusterId }: ClusterDepl
 
           return (
             <div className="flex items-center justify-between gap-4">
-              <div className="flex items-center gap-2">
-                <DeploymentAction status={data.trigger_action} />
+              <div className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1">
+                <DeploymentAction status={data.trigger_action} operation={data.operation} />
                 {data.reason === 'MAINTENANCE' && (
                   <Badge color="neutral" variant="surface" className="font-medium">
                     Maintenance
@@ -166,7 +166,7 @@ export function ClusterDeploymentList({ organizationId, clusterId }: ClusterDepl
                   </Badge>
                 )}
               </div>
-              <div className="flex items-center gap-2">
+              <div className="flex shrink-0 items-center gap-2">
                 {data.action_status === 'ERROR' && (
                   <DevopsCopilotTroubleshootTrigger
                     source="cluster-deployment-list"
diff --git a/libs/domains/clusters/feature/src/lib/cluster-last-deployment-section/cluster-last-deployment-section.spec.tsx b/libs/domains/clusters/feature/src/lib/cluster-last-deployment-section/cluster-last-deployment-section.spec.tsx
index 6b5bc407f87..2dc12f1302f 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-last-deployment-section/cluster-last-deployment-section.spec.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-last-deployment-section/cluster-last-deployment-section.spec.tsx
@@ -1,6 +1,8 @@
 import { TooltipProvider } from '@radix-ui/react-tooltip'
 import posthog from 'posthog-js'
 import {
+  type ClusterDeploymentHistory,
+  ClusterDeploymentHistoryOperationEnum,
   ClusterStateEnum,
   type ClusterStatus,
   DeploymentHistoryTriggerAction,
@@ -46,28 +48,35 @@ jest.mock('@qovery/shared/ui', () => ({
 
 let mockClusterDeploymentHistoryProps: UseClusterDeploymentHistoryProps | undefined
 
+const defaultDeploymentHistory: ClusterDeploymentHistory[] = [
+  {
+    identifier: {
+      deployment_id: 'deployment-1',
+      execution_id: 'execution-1',
+      cluster_id: 'cluster-1',
+    },
+    auditing_data: {
+      created_at: '2026-08-10T12:30:00Z',
+      updated_at: '2026-08-10T12:31:00Z',
+    },
+    status: 'DEPLOYED',
+    action_status: 'SUCCESS',
+    trigger_action: 'DEPLOY',
+    operation: ClusterDeploymentHistoryOperationEnum.CLUSTER,
+    is_dry_run: false,
+    reason: 'UNSPECIFIED',
+    total_duration: 'PT1M',
+  },
+]
+
+let mockDeploymentHistory = defaultDeploymentHistory
+
 jest.mock('../hooks/use-cluster-deployment-history/use-cluster-deployment-history', () => ({
   useClusterDeploymentHistory: (props: UseClusterDeploymentHistoryProps) => {
     mockClusterDeploymentHistoryProps = props
 
     return {
-      data: [
-        {
-          identifier: {
-            deployment_id: 'deployment-1',
-            execution_id: 'execution-1',
-            cluster_id: 'cluster-1',
-          },
-          auditing_data: {
-            created_at: '2026-08-10T12:30:00Z',
-          },
-          status: 'DEPLOYED',
-          action_status: 'SUCCESS',
-          trigger_action: 'DEPLOY',
-          reason: 'UNSPECIFIED',
-          total_duration: 'PT1M',
-        },
-      ],
+      data: mockDeploymentHistory,
       isFetched: true,
     }
   },
@@ -101,6 +110,7 @@ describe('ClusterLastDeploymentSection', () => {
   beforeEach(() => {
     jest.clearAllMocks()
     mockClusterDeploymentHistoryProps = undefined
+    mockDeploymentHistory = defaultDeploymentHistory
   })
 
   it('renders the latest cluster deployment row linked to its deployment logs', () => {
@@ -181,6 +191,92 @@ describe('ClusterLastDeploymentSection', () => {
     expect(screen.getByText('Maintenance')).toBeInTheDocument()
   })
 
+  it('renders the Operator action with the reason when the last deployment is an Operator update', () => {
+    mockDeploymentHistory = [
+      { ...defaultDeploymentHistory[0], operation: ClusterDeploymentHistoryOperationEnum.OPERATOR_UPDATE },
+    ]
+
+    renderWithProviders(
+      <ClusterLastDeploymentSection
+        organizationId="org-1"
+        clusterId="cluster-1"
+        clusterStatus={{ ...baseClusterStatus, reason: DeploymentInfraReason.MAINTENANCE }}
+      />
+    )
+
+    expect(screen.getByText('Operator')).toBeInTheDocument()
+    expect(screen.queryByText('Deploy')).not.toBeInTheDocument()
+    expect(screen.getByText('Maintenance')).toBeInTheDocument()
+    expect(screen.getByText('Operator').closest('a')?.querySelector('[tabindex]')).toBeNull()
+    expect(screen.getByRole('link', { name: /Operator update/ })).toHaveAttribute(
+      'href',
+      '/organization/org-1/cluster/cluster-1/deployments/logs/deployment-1'
+    )
+  })
+
+  it('renders the Deploy action when the cluster status has no last execution id', () => {
+    mockDeploymentHistory = [
+      { ...defaultDeploymentHistory[0], operation: ClusterDeploymentHistoryOperationEnum.OPERATOR_UPDATE },
+    ]
+
+    renderWithProviders(
+      <ClusterLastDeploymentSection
+        organizationId="org-1"
+        clusterId="cluster-1"
+        clusterStatus={{ ...baseClusterStatus, last_execution_id: undefined }}
+      />
+    )
+
+    expect(screen.getByText('Deploy')).toBeInTheDocument()
+    expect(screen.queryByText('Operator')).not.toBeInTheDocument()
+  })
+
+  it('renders the Deploy action when the last deployment is a cluster deployment', () => {
+    renderWithProviders(
+      <ClusterLastDeploymentSection organizationId="org-1" clusterId="cluster-1" clusterStatus={baseClusterStatus} />
+    )
+
+    expect(screen.getByText('Deploy')).toBeInTheDocument()
+    expect(screen.queryByText('Operator')).not.toBeInTheDocument()
+  })
+
+  it('renders the Deploy action when operation is missing from the payload', () => {
+    const legacyDeployment: Partial<ClusterDeploymentHistory> = { ...defaultDeploymentHistory[0] }
+    delete legacyDeployment.operation
+    mockDeploymentHistory = [legacyDeployment as ClusterDeploymentHistory]
+
+    renderWithProviders(
+      <ClusterLastDeploymentSection organizationId="org-1" clusterId="cluster-1" clusterStatus={baseClusterStatus} />
+    )
+
+    expect(screen.getByText('Deploy')).toBeInTheDocument()
+    expect(screen.queryByText('Operator')).not.toBeInTheDocument()
+  })
+
+  it('ignores a stale Operator update when the cluster status points to a newer execution', () => {
+    mockDeploymentHistory = [
+      { ...defaultDeploymentHistory[0], operation: ClusterDeploymentHistoryOperationEnum.OPERATOR_UPDATE },
+    ]
+
+    renderWithProviders(
+      <ClusterLastDeploymentSection
+        organizationId="org-1"
+        clusterId="cluster-1"
+        clusterStatus={
+          {
+            ...baseClusterStatus,
+            status: ClusterStateEnum.STOPPED,
+            last_execution_id: 'execution-2',
+            trigger_action: DeploymentHistoryTriggerAction.STOP,
+          } as ClusterStatus & { trigger_action: DeploymentHistoryTriggerAction }
+        }
+      />
+    )
+
+    expect(screen.getByText('Stop')).toBeInTheDocument()
+    expect(screen.queryByText('Operator')).not.toBeInTheDocument()
+  })
+
   it('renders an empty state when the cluster has no deployment information', () => {
     renderWithProviders(
       <ClusterLastDeploymentSection
diff --git a/libs/domains/clusters/feature/src/lib/cluster-last-deployment-section/cluster-last-deployment-section.tsx b/libs/domains/clusters/feature/src/lib/cluster-last-deployment-section/cluster-last-deployment-section.tsx
index 81fe7c2299e..08baac09e83 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-last-deployment-section/cluster-last-deployment-section.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-last-deployment-section/cluster-last-deployment-section.tsx
@@ -117,6 +117,11 @@ export function ClusterLastDeploymentSection({
   const lastDeployment = deploymentHistory[0]
   const hasLastDeployment = Boolean(clusterStatus?.last_deployment_date || clusterStatus?.last_execution_id)
   const deploymentReasonLabel = getDeploymentReasonLabel(clusterStatus?.reason)
+  const lastDeploymentOperation =
+    lastDeployment?.identifier.execution_id &&
+    lastDeployment.identifier.execution_id === clusterStatus?.last_execution_id
+      ? lastDeployment.operation
+      : undefined
 
   const handleLaunchDiagnostic = () => {
     if (!clusterStatus) return
@@ -170,7 +175,10 @@ export function ClusterLastDeploymentSection({
           >
             <div className="flex flex-wrap items-center gap-2.5 text-sm text-neutral">
               <span className="font-medium">
-                <DeploymentAction status={getClusterDeploymentAction(clusterStatus)} />
+                <DeploymentAction
+                  status={getClusterDeploymentAction(clusterStatus)}
+                  operation={lastDeploymentOperation}
+                />
               </span>
               <StatusChip status={clusterStatus.status} />
               {deploymentReasonLabel && (
diff --git a/libs/domains/clusters/feature/src/lib/cluster-logs/cluster-header-logs/cluster-header-logs.spec.tsx b/libs/domains/clusters/feature/src/lib/cluster-logs/cluster-header-logs/cluster-header-logs.spec.tsx
index 0487137548d..d7f94026945 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-logs/cluster-header-logs/cluster-header-logs.spec.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-logs/cluster-header-logs/cluster-header-logs.spec.tsx
@@ -1,5 +1,5 @@
 import download from 'downloadjs'
-import { ClusterStateEnum } from 'qovery-typescript-axios'
+import { ClusterDeploymentHistoryOperationEnum, ClusterStateEnum } from 'qovery-typescript-axios'
 import { type RefObject } from 'react'
 import { clusterFactoryMock, clusterLogFactoryMock } from '@qovery/shared/factories'
 import { renderWithProviders, screen } from '@qovery/shared/util-tests'
@@ -45,6 +45,20 @@ describe('ClusterHeaderLogs', () => {
     expect(screen.getByText('Romain Billard')).toBeInTheDocument()
   })
 
+  it('should render an Operator update badge when operation is OPERATOR_UPDATE', () => {
+    renderWithProviders(
+      <ClusterHeaderLogs {...props} operation={ClusterDeploymentHistoryOperationEnum.OPERATOR_UPDATE} />
+    )
+
+    expect(screen.getByText('Operator update')).toBeInTheDocument()
+  })
+
+  it('should not render an Operator update badge when operation is CLUSTER', () => {
+    renderWithProviders(<ClusterHeaderLogs {...props} operation={ClusterDeploymentHistoryOperationEnum.CLUSTER} />)
+
+    expect(screen.queryByText('Operator update')).not.toBeInTheDocument()
+  })
+
   it('should trigger scroll up on click', async () => {
     const { userEvent } = renderWithProviders(<ClusterHeaderLogs {...props} />)
     const scrollUpButton = screen.getByTestId('scroll-up-button')
diff --git a/libs/domains/clusters/feature/src/lib/cluster-logs/cluster-header-logs/cluster-header-logs.tsx b/libs/domains/clusters/feature/src/lib/cluster-logs/cluster-header-logs/cluster-header-logs.tsx
index c5d67642b6e..4a94246eb88 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-logs/cluster-header-logs/cluster-header-logs.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-logs/cluster-header-logs/cluster-header-logs.tsx
@@ -2,6 +2,7 @@ import download from 'downloadjs'
 import posthog from 'posthog-js'
 import {
   type Cluster,
+  ClusterDeploymentHistoryOperationEnum,
   type ClusterLogs,
   type ClusterStatus,
   type DeploymentHistoryActionStatus,
@@ -9,7 +10,7 @@ import {
 } from 'qovery-typescript-axios'
 import { type RefObject, useContext } from 'react'
 import { DevopsCopilotContext } from '@qovery/shared/devops-copilot/feature'
-import { Button, Icon, Tooltip, Truncate } from '@qovery/shared/ui'
+import { Badge, Button, Icon, Tooltip, Truncate } from '@qovery/shared/ui'
 import { dateDifference, dateFullFormat, dateUTCString, formatDuration } from '@qovery/shared/util-dates'
 import { useIntervalTick } from '@qovery/shared/util-hooks'
 import { EventOriginIcon } from '@qovery/shared/util-icons'
@@ -35,6 +36,7 @@ export interface ClusterHeaderLogsProps {
   triggeredBy?: string | null
   actionStatus?: DeploymentHistoryActionStatus
   totalDuration?: string | null
+  operation?: ClusterDeploymentHistoryOperationEnum
 }
 
 export function ClusterHeaderLogs({
@@ -49,6 +51,7 @@ export function ClusterHeaderLogs({
   triggeredBy,
   actionStatus,
   totalDuration,
+  operation,
 }: ClusterHeaderLogsProps) {
   const { setDevopsCopilotOpen, sendMessageRef } = useContext(DevopsCopilotContext)
 
@@ -90,6 +93,11 @@ export function ClusterHeaderLogs({
             <Icon className="text-base" iconName="arrow-left" iconStyle="regular" />
           </Button>
         )}
+        {operation === ClusterDeploymentHistoryOperationEnum.OPERATOR_UPDATE && (
+          <Badge color="neutral" variant="surface" className="font-medium">
+            Operator update
+          </Badge>
+        )}
         {createdAt && (
           <>
             <span
diff --git a/libs/shared/ui/src/lib/components/deployment-action/deployment-action.spec.tsx b/libs/shared/ui/src/lib/components/deployment-action/deployment-action.spec.tsx
index 3d248093c2c..5bfb893ef23 100644
--- a/libs/shared/ui/src/lib/components/deployment-action/deployment-action.spec.tsx
+++ b/libs/shared/ui/src/lib/components/deployment-action/deployment-action.spec.tsx
@@ -1,4 +1,6 @@
-import { getTriggerAction } from './deployment-action'
+import { ClusterDeploymentHistoryOperationEnum } from 'qovery-typescript-axios'
+import { renderWithProviders, screen } from '@qovery/shared/util-tests'
+import { DeploymentAction, getTriggerAction } from './deployment-action'
 
 describe('getTriggerAction', () => {
   it('returns undefined without status details', () => {
@@ -18,3 +20,34 @@ describe('getTriggerAction', () => {
     expect(getTriggerAction({})).toBe('UNKNOWN')
   })
 })
+
+describe('DeploymentAction', () => {
+  it('renders the action label derived from the status', () => {
+    renderWithProviders(<DeploymentAction status="DEPLOY" />)
+
+    expect(screen.getByText('Deploy')).toBeInTheDocument()
+  })
+
+  it('renders the Operator action with a screen-reader description for an Operator update', () => {
+    const { container } = renderWithProviders(
+      <DeploymentAction status="DEPLOY" operation={ClusterDeploymentHistoryOperationEnum.OPERATOR_UPDATE} />
+    )
+
+    expect(screen.getByText('Operator')).toHaveAttribute('aria-hidden', 'true')
+    expect(screen.getByText('Operator update')).toHaveClass('sr-only')
+    expect(screen.queryByText('Deploy')).not.toBeInTheDocument()
+    expect(container.querySelector('.fa-rotate-right')).toBeInTheDocument()
+    expect(container.querySelector('.fa-rocket')).not.toBeInTheDocument()
+    expect(container.querySelector('[tabindex]')).toBeNull()
+  })
+
+  it('renders the status action without a description for a cluster operation', () => {
+    const { container } = renderWithProviders(
+      <DeploymentAction status="DEPLOY" operation={ClusterDeploymentHistoryOperationEnum.CLUSTER} />
+    )
+
+    expect(screen.getByText('Deploy')).not.toHaveAttribute('aria-hidden')
+    expect(screen.queryByText('Operator update')).not.toBeInTheDocument()
+    expect(container.querySelector('.fa-rocket')).toBeInTheDocument()
+  })
+})
diff --git a/libs/shared/ui/src/lib/components/deployment-action/deployment-action.tsx b/libs/shared/ui/src/lib/components/deployment-action/deployment-action.tsx
index 21c5181e20c..24e883dc413 100644
--- a/libs/shared/ui/src/lib/components/deployment-action/deployment-action.tsx
+++ b/libs/shared/ui/src/lib/components/deployment-action/deployment-action.tsx
@@ -1,4 +1,5 @@
 import {
+  ClusterDeploymentHistoryOperationEnum,
   type ClusterStateEnum,
   type DeploymentHistoryTriggerAction,
   type ServiceActionEnum,
@@ -137,6 +138,15 @@ export const getDeploymentAction = (
     .exhaustive()
 }
 
+const getDeploymentOperationAction = (operation?: ClusterDeploymentHistoryOperationEnum) =>
+  operation === ClusterDeploymentHistoryOperationEnum.OPERATOR_UPDATE
+    ? {
+        status: 'Operator',
+        description: 'Operator update',
+        icon: <Icon iconStyle="regular" iconName="rotate-right" />,
+      }
+    : undefined
+
 export const getTriggerAction = (statusDetails?: {
   action?: ServiceActionEnum
   sub_action?: ServiceSubActionEnum
@@ -148,6 +158,7 @@ export const getTriggerAction = (statusDetails?: {
 
 export const DeploymentAction = ({
   status,
+  operation,
   className,
   iconClassName,
   textClassName,
@@ -161,17 +172,22 @@ export const DeploymentAction = ({
     | StageStatusEnum
     | StepMetricStatusEnum
     | undefined
+  operation?: ClusterDeploymentHistoryOperationEnum
   className?: string
   iconClassName?: string
   textClassName?: string
 }) => {
-  const action = getDeploymentAction(status)
+  const operationAction = getDeploymentOperationAction(operation)
+  const action = operationAction ?? getDeploymentAction(status)
   if (!status || !action) return null
 
   return (
     <div className={twMerge('flex items-center gap-2 text-sm', className)}>
       <span className={iconClassName}>{action.icon}</span>
-      <span className={twMerge('text-neutral', textClassName)}>{action.status}</span>
+      <span className={twMerge('text-neutral', textClassName)} aria-hidden={operationAction ? true : undefined}>
+        {action.status}
+      </span>
+      {operationAction && <span className="sr-only">{operationAction.description}</span>}
     </div>
   )
 }
diff --git a/package.json b/package.json
index 9cda0d0263e..26248dcb196 100644
--- a/package.json
+++ b/package.json
@@ -78,7 +78,7 @@
     "mermaid": "11.6.0",
     "monaco-editor": "0.53.0",
     "posthog-js": "1.345.1",
-    "qovery-typescript-axios": "1.1.1004",
+    "qovery-typescript-axios": "1.1.1007",
     "react": "19.3.0",
     "react-country-flag": "3.0.2",
     "react-datepicker": "4.12.0",
diff --git a/yarn.lock b/yarn.lock
index c8d85d5dfea..6ece0fd2fff 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6285,7 +6285,7 @@ __metadata:
     prettier: 3.2.5
     prettier-plugin-tailwindcss: 0.5.14
     pretty-quick: 4.0.0
-    qovery-typescript-axios: 1.1.1004
+    qovery-typescript-axios: 1.1.1007
     qovery-ws-typescript-axios: 0.1.666
     react: 19.3.0
     react-country-flag: 3.0.2
@@ -24656,12 +24656,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"qovery-typescript-axios@npm:1.1.1004":
-  version: 1.1.1004
-  resolution: "qovery-typescript-axios@npm:1.1.1004"
+"qovery-typescript-axios@npm:1.1.1007":
+  version: 1.1.1007
+  resolution: "qovery-typescript-axios@npm:1.1.1007"
   dependencies:
     axios: 1.20.0
-  checksum: 99fca71abb55689b534cb7c3874deabb11fe6c20a564d7bd4b03d034f5a2a37c4daefbb568b46b468141b7ad7a858daae7e1013516fa8ba272046ba9ba635d73
+  checksum: f8662f1567d11edcbe0119c2db44ceeb0b1f0181517b31ca70c89173872dde9fde0f07087b48cbd0d81372c4399675191b520378e9021539ecca100182a5bba8
   languageName: node
   linkType: hard
 

From 929a289674e996ed44863ee4a7a6e745eedfc5ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Bonnet?= <rbonnet@qovery.com>
Date: Tue, 13 Oct 2026 16:02:37 +0200
Subject: [PATCH 2/7] chore(skills): clarify implementation and review guidance
 (#3101)

* chore(skills): clarify implementation and review guidance

* chore(skills): refine actionable review rules

* chore(skills): synchronize standards rule index

* chore(skills): define operation display mismatches

* chore(skills): clarify conditional class composition

* chore(skills): clarify domain placement and library ownership

* chore(skills): align legacy shared library guidance

* chore(skills): consolidate implementation and review guidance

- Align clsx/twMerge guidance across rules
- Move code placement and console-shared rules to project architecture
- Compile implementation and review rules into AGENTS.md and SKILL.md
- Drop tool-specific cubic section and tighten wording into bullets

* chore(skills): reconcile shared helper placement
---
 .../skills/qovery-console-standards/AGENTS.md | 47 +++++++++++++++++--
 .../skills/qovery-console-standards/SKILL.md  | 35 +++++++++-----
 .../rules/implementation-review.md            | 38 +++++++++++++++
 .../rules/project-architecture.md             | 10 +++-
 .../rules/react-typescript-standards.md       |  2 +-
 .../rules/styling-standards.md                |  2 +-
 .agents/skills/qovery-ui/SKILL.md             |  6 ++-
 .../skills/qovery-ui/references/components.md | 17 +++++++
 libs/shared/console-shared/src/index.ts       |  5 +-
 9 files changed, 142 insertions(+), 20 deletions(-)
 create mode 100644 .agents/skills/qovery-console-standards/rules/implementation-review.md

diff --git a/.agents/skills/qovery-console-standards/AGENTS.md b/.agents/skills/qovery-console-standards/AGENTS.md
index f271b8dfdf8..c477865956a 100644
--- a/.agents/skills/qovery-console-standards/AGENTS.md
+++ b/.agents/skills/qovery-console-standards/AGENTS.md
@@ -33,10 +33,18 @@ libs/
 - `data-access` libs contain API wiring only.
 - `feature` libs contain business components.
 - `ui` libs contain reusable presentation components.
-- Utilities that can be shared must live in `@qovery/shared/util-js` and be imported directly (never re-export via data-access).
+- Reusable generic helpers belong in the shared library that owns their concern; use `@qovery/shared/util-js` when no specialized shared library fits. Import them directly, never re-export them via data-access.
 - Respect Nx architecture (no circular imports).
 - Use Nx generators to create new components/libs.
 
+### Code Placement
+
+- Before adding a folder or abstraction, follow comparable code in the same domain. A generic name alone does not make a helper shared.
+- Domain feature libs: hooks in `src/lib/hooks/use-<name>/`, domain-specific pure helpers in `src/lib/utils/`. Do not create a second `hooks/` directory inside a feature folder.
+- For generic helpers, prefer the existing shared library that owns their concern; otherwise use `@qovery/shared/util-js`. Reuse across callers in one domain does not make a domain-specific helper generic.
+- Create a dedicated library only for a cohesive concept (types, behavior, or UI) reused across domains with no existing owner. Choose its Nx layer from its real dependencies and callers.
+- `@qovery/shared/console-shared` is legacy: add nothing new to it. Existing usages can stay; do not migrate them as part of an unrelated change.
+
 ---
 
 ## 2. React & TypeScript Standards
@@ -56,7 +64,7 @@ libs/
 - Destructure props directly in parameters.
 - Props interface named `<ComponentName>Props`.
 - Named exports only (no default exports).
-- Use `clsx` or `twMerge` from `@qovery/shared/util-js` for conditional classes.
+- Use `clsx` (from `clsx`) for conditional classes and `twMerge` (from `@qovery/shared/util-js`) to resolve conflicting Tailwind classes, such as defaults and a caller's `className`.
 - Prefer Radix UI components when available.
 
 ### Route Parameters
@@ -94,7 +102,7 @@ libs/
 - TailwindCSS only (no CSS modules or styled-components in new code).
 - Use utilities from `@qovery/shared/ui` when available.
 - Mobile-first responsive design.
-- Use `clsx` or `twMerge` from `@qovery/shared/util-js` for conditional classes.
+- Use `clsx` (from `clsx`) for conditional classes and `twMerge` (from `@qovery/shared/util-js`) to resolve conflicting Tailwind classes, such as defaults and a caller's `className`.
 
 ### Component Styling
 
@@ -249,3 +257,36 @@ Types: `feat`, `fix`, `docs`, `style`, `refactor`, `test`, `chore`
 - All tests must pass.
 - Code must be properly formatted.
 - Snapshot changes must be intentional and reviewed.
+
+---
+
+## 8. Implementation & Review Decisions
+
+### Keep Shared Changes Necessary
+
+- Every new prop, abstraction, or shared-component change needs a concrete caller or behavior today. No props or tokens for hypothetical future needs.
+- Prefer the existing API when it covers the need. When extending, keep existing callers working and check the behavior in their flows, not only in the new screen.
+
+### Separate Business Rules from Rendering
+
+- Keep payload construction, API parsing, and business transformations in domain hooks or helpers that can be tested on their own, not in rendering components.
+- Prefer typed API fields over parsing opaque payloads. If the contract cannot change, parse and validate once at the domain boundary.
+- An action's label, icon, and description must describe the same operation. A neutral icon shared by several operations is fine.
+- Name helpers after the resource or capability they identify, not after a version, rollout, or feature flag.
+
+### Choose State Ownership Explicitly
+
+- Derive values from props or state instead of copying them into state.
+- Use controlled inputs when the caller owns the value; use default values only for initialization.
+- Reserve effects for synchronization with external systems. See the `react-useeffect` skill for alternatives.
+
+### Validate and Review Proportionally
+
+- Test the behavior and boundaries the change affects, including invalid or legacy API data when relevant. Extract complex pure logic for direct tests; small expressions do not need extraction.
+- Classify each finding as a **bug** (give the concrete trigger and consequence), a **convention** departure (cite the rule or comparable code), or an optional **suggestion**. Only bugs are blocking by default.
+- Check current callers and comparable implementations before recommending a new abstraction or shared change.
+- Treat automated review findings and "resolved" labels as leads, not proof: check the fix against the current diff before closing a finding.
+
+### Write Actionable Review Rules
+
+When adding a rule, state its scope, the behavior to flag, why it matters, and legitimate exceptions. Prefer checks lint does not already enforce, and avoid generalizing a rule from a single PR.
diff --git a/.agents/skills/qovery-console-standards/SKILL.md b/.agents/skills/qovery-console-standards/SKILL.md
index 9c26353ee00..6ca640fa781 100644
--- a/.agents/skills/qovery-console-standards/SKILL.md
+++ b/.agents/skills/qovery-console-standards/SKILL.md
@@ -9,7 +9,7 @@ metadata:
 
 # Qovery Console Standards
 
-Comprehensive coding standards for the Qovery Console React/TypeScript monorepo. Contains 7 rules covering architecture, React patterns, styling, testing, naming, development workflow, and pre-commit quality gates.
+Comprehensive coding standards for the Qovery Console React/TypeScript monorepo. Contains 8 rules covering architecture, React patterns, styling, testing, naming, development workflow, pre-commit quality gates, and implementation and review decisions.
 
 ## When to Apply
 
@@ -24,15 +24,16 @@ Reference these guidelines when:
 
 ## Rule Categories
 
-| Rule                 | File                            | Scope                                                     |
-| -------------------- | ------------------------------- | --------------------------------------------------------- |
-| Project Architecture | `project-architecture.md`       | Nx monorepo structure, lib organization, layer boundaries |
-| React & TypeScript   | `react-typescript-standards.md` | Import rules, component patterns, state management        |
-| Styling              | `styling-standards.md`          | TailwindCSS, Radix UI, responsive design, accessibility   |
-| Testing              | `testing-standards.md`          | Test setup, structure, mocking, coverage                  |
-| Naming Conventions   | `naming-conventions.md`         | File, variable, component, and constant naming            |
-| Development Commands | `development-commands.md`       | Daily workflow, Nx commands, package management, git      |
-| Pre-commit Workflow  | `pre-commit-workflow.md`        | Conventional commits, format/test/lint checks             |
+| Rule                    | File                            | Scope                                                           |
+| ----------------------- | ------------------------------- | --------------------------------------------------------------- |
+| Project Architecture    | `project-architecture.md`       | Nx monorepo structure, lib organization, layer boundaries       |
+| React & TypeScript      | `react-typescript-standards.md` | Import rules, component patterns, state management              |
+| Styling                 | `styling-standards.md`          | TailwindCSS, Radix UI, responsive design, accessibility         |
+| Testing                 | `testing-standards.md`          | Test setup, structure, mocking, coverage                        |
+| Naming Conventions      | `naming-conventions.md`         | File, variable, component, and constant naming                  |
+| Development Commands    | `development-commands.md`       | Daily workflow, Nx commands, package management, git            |
+| Pre-commit Workflow     | `pre-commit-workflow.md`        | Conventional commits, format/test/lint checks                   |
+| Implementation & Review | `implementation-review.md`      | Code placement, shared changes, API boundaries, state ownership |
 
 ## Quick Reference
 
@@ -41,13 +42,14 @@ Reference these guidelines when:
 - Nx monorepo: `apps/` and `libs/` (domains, pages, shared)
 - `data-access` = API logic, `feature` = business components, `ui` = reusable presentation
 - No circular imports; use Nx generators for new libs
+- Domain hooks in `src/lib/hooks/use-<name>/`, helpers in `src/lib/utils/`; nothing new in `shared/console-shared` (legacy)
 
 ### React & TypeScript
 
 - Inline type imports: `import { type Foo, bar } from './module'`
 - Functional components only, no `React.FC`, destructure props in signature
 - Route-scoped components read URL identifiers with TanStack Router `useParams({ strict: false })`; do not forward route IDs through props solely for data access
-- React Query for server state, `clsx`/`twMerge` for conditional classes
+- React Query for server state, `clsx` for conditional classes, `twMerge` for conflicting Tailwind classes
 
 ### Styling
 
@@ -66,6 +68,12 @@ Reference these guidelines when:
 - Snake-case files (`user-profile.tsx`), PascalCase components
 - `Props` suffix for interfaces, `UPPER_SNAKE_CASE` for constants
 
+### Implementation & Review
+
+- Shared changes need a concrete caller; keep existing callers working
+- Business transformations in domain hooks/helpers, not in rendering
+- Classify review findings: bug (trigger + consequence), convention, or optional suggestion
+
 ### Workflow
 
 - Yarn Berry only (never npm), `nvm use`
@@ -80,6 +88,11 @@ Read individual rule files for detailed guidelines:
 rules/project-architecture.md
 rules/react-typescript-standards.md
 rules/styling-standards.md
+rules/testing-standards.md
+rules/naming-conventions.md
+rules/development-commands.md
+rules/pre-commit-workflow.md
+rules/implementation-review.md
 ```
 
 ## Full Compiled Document
diff --git a/.agents/skills/qovery-console-standards/rules/implementation-review.md b/.agents/skills/qovery-console-standards/rules/implementation-review.md
new file mode 100644
index 00000000000..4171d8810fc
--- /dev/null
+++ b/.agents/skills/qovery-console-standards/rules/implementation-review.md
@@ -0,0 +1,38 @@
+---
+title: Implementation and Review Decisions
+impact: HIGH
+tags: [architecture, review, api, state]
+---
+
+# Implementation and Review Decisions
+
+Code placement and library ownership are covered in [project-architecture.md](project-architecture.md#code-placement).
+
+## Keep Shared Changes Necessary
+
+- Every new prop, abstraction, or shared-component change needs a concrete caller or behavior today. No props or tokens for hypothetical future needs.
+- Prefer the existing API when it covers the need. When extending, keep existing callers working and check the behavior in their flows, not only in the new screen.
+
+## Separate Business Rules from Rendering
+
+- Keep payload construction, API parsing, and business transformations in domain hooks or helpers that can be tested on their own, not in rendering components.
+- Prefer typed API fields over parsing opaque payloads. If the contract cannot change, parse and validate once at the domain boundary.
+- An action's label, icon, and description must describe the same operation. A neutral icon shared by several operations is fine.
+- Name helpers after the resource or capability they identify, not after a version, rollout, or feature flag.
+
+## Choose State Ownership Explicitly
+
+- Derive values from props or state instead of copying them into state.
+- Use controlled inputs when the caller owns the value; use default values only for initialization.
+- Reserve effects for synchronization with external systems. See the `react-useeffect` skill for alternatives.
+
+## Validate and Review Proportionally
+
+- Test the behavior and boundaries the change affects, including invalid or legacy API data when relevant. Extract complex pure logic for direct tests; small expressions do not need extraction.
+- Classify each finding as a **bug** (give the concrete trigger and consequence), a **convention** departure (cite the rule or comparable code), or an optional **suggestion**. Only bugs are blocking by default.
+- Check current callers and comparable implementations before recommending a new abstraction or shared change.
+- Treat automated review findings and "resolved" labels as leads, not proof: check the fix against the current diff before closing a finding.
+
+## Write Actionable Review Rules
+
+When adding a rule, state its scope, the behavior to flag, why it matters, and legitimate exceptions. Prefer checks lint does not already enforce, and avoid generalizing a rule from a single PR.
diff --git a/.agents/skills/qovery-console-standards/rules/project-architecture.md b/.agents/skills/qovery-console-standards/rules/project-architecture.md
index 6774d415001..c81b4692258 100644
--- a/.agents/skills/qovery-console-standards/rules/project-architecture.md
+++ b/.agents/skills/qovery-console-standards/rules/project-architecture.md
@@ -35,7 +35,15 @@ libs/
 - `data-access` libs contain API wiring only
 - `feature` libs contain business components
 - `ui` libs contain reusable presentation components
-- Utilities that can be shared must live in `@qovery/shared/util-js` and be imported directly (never re-export via data-access)
+- Reusable generic helpers belong in the shared library that owns their concern; use `@qovery/shared/util-js` when no specialized shared library fits. Import them directly, never re-export them via data-access
+
+## Code Placement
+
+- Before adding a folder or abstraction, follow comparable code in the same domain. A generic name alone does not make a helper shared.
+- Domain feature libs: hooks in `src/lib/hooks/use-<name>/`, domain-specific pure helpers in `src/lib/utils/`. Do not create a second `hooks/` directory inside a feature folder.
+- For generic helpers, prefer the existing shared library that owns their concern; otherwise use `@qovery/shared/util-js`. Reuse across callers in one domain does not make a domain-specific helper generic.
+- Create a dedicated library only for a cohesive concept (types, behavior, or UI) reused across domains with no existing owner. Choose its Nx layer from its real dependencies and callers.
+- `@qovery/shared/console-shared` is legacy: add nothing new to it. Existing usages can stay; do not migrate them as part of an unrelated change.
 
 ## Important Rules
 
diff --git a/.agents/skills/qovery-console-standards/rules/react-typescript-standards.md b/.agents/skills/qovery-console-standards/rules/react-typescript-standards.md
index 347ea1bda48..10b5edcb0aa 100644
--- a/.agents/skills/qovery-console-standards/rules/react-typescript-standards.md
+++ b/.agents/skills/qovery-console-standards/rules/react-typescript-standards.md
@@ -21,7 +21,7 @@ tags: [react, typescript, components, imports, state]
 - Destructure props directly in parameters
 - Props interface named `<ComponentName>Props`
 - Named exports only (no default exports)
-- Use `clsx` or `twMerge` from `@qovery/shared/util-js` for conditional classes
+- Use `clsx` (from `clsx`) for conditional classes and `twMerge` (from `@qovery/shared/util-js`) to resolve conflicting Tailwind classes, such as defaults and a caller's `className`
 - Prefer Radix UI components when available
 
 ## Route Parameters
diff --git a/.agents/skills/qovery-console-standards/rules/styling-standards.md b/.agents/skills/qovery-console-standards/rules/styling-standards.md
index d086fcc35ba..66938e1a16b 100644
--- a/.agents/skills/qovery-console-standards/rules/styling-standards.md
+++ b/.agents/skills/qovery-console-standards/rules/styling-standards.md
@@ -11,7 +11,7 @@ tags: [tailwind, css, styling, accessibility, radix, responsive]
 - TailwindCSS only (no CSS modules or styled-components in new code)
 - Use utilities from `@qovery/shared/ui` when available
 - Mobile-first responsive design
-- Use `clsx` or `twMerge` from `@qovery/shared/util-js` for conditional classes
+- Use `clsx` (from `clsx`) for conditional classes and `twMerge` (from `@qovery/shared/util-js`) to resolve conflicting Tailwind classes, such as defaults and a caller's `className`
 
 ## Component Styling
 
diff --git a/.agents/skills/qovery-ui/SKILL.md b/.agents/skills/qovery-ui/SKILL.md
index 7735b237153..20894210762 100644
--- a/.agents/skills/qovery-ui/SKILL.md
+++ b/.agents/skills/qovery-ui/SKILL.md
@@ -38,7 +38,7 @@ Design review and implementation guidance for the Qovery Console. Read `.claude/
 
 ## /audit
 
-**Load:** `references/colors.md`, `references/spacing-layout.md`, `references/anti-patterns.md`, `references/accessibility.md`
+**Load:** `references/colors.md`, `references/spacing-layout.md`, `references/anti-patterns.md`, `references/accessibility.md`, `references/components.md`
 
 Four-phase review. Label every finding:
 
@@ -46,6 +46,8 @@ Four-phase review. Label every finding:
 - `[important]` — degrades experience, likely to cause design review rejection
 - `[nit]` — minor inconsistency, low impact
 
+A component substitution or refactor is not `[blocking]` just because it is preferred: state the user impact and check that the proposed shared component fits the interaction.
+
 **Phase 1 — Token hygiene:** hardcoded values, legacy tokens, raw Tailwind palette classes used semantically.
 **Phase 2 — Semantic color:** status colors used decoratively, color-only state, brand as page wash.
 **Phase 3 — Spacing & density:** off-grid values, whitespace inflation, button height overrides.
@@ -81,6 +83,8 @@ Fix without changing functionality. Output a Before / After / Why table, one row
 
 **Load:** `references/components.md`
 
+Also use this reference when extending shared components or reviewing a new interactive flow. Follow its reuse, compatibility, Storybook, and interaction checks for the states affected by the change.
+
 1. Identify if a shared component already exists — always prefer it
 2. Return the import path and correct usage with props
 3. If nothing fits, explain why before scaffolding new
diff --git a/.agents/skills/qovery-ui/references/components.md b/.agents/skills/qovery-ui/references/components.md
index adbadabea9d..b8ce6bfb5a6 100644
--- a/.agents/skills/qovery-ui/references/components.md
+++ b/.agents/skills/qovery-ui/references/components.md
@@ -2,6 +2,23 @@
 
 All shared components live in `libs/shared/ui/src/lib/components/`. Check here before building anything new.
 
+## Reuse and Extend Shared UI
+
+- Check `shared/ui` and its existing callers first. Reuse a component when its **behavior** fits; visual similarity alone does not justify swapping in a component with different interaction semantics.
+- Nothing new in `shared/console-shared` (legacy). Generic presentation goes to `shared/ui`, business UI stays in its domain. Do not move business logic into the design system just to avoid `console-shared`.
+- Extend a shared component only for a concrete need its API cannot cover. Keep the extension generic and existing callers working.
+- Multiple styling variants: follow the existing CVA pattern. Simple conditions do not need a variant.
+- Classes: `clsx` for conditional composition, `twMerge` (`@qovery/shared/util-js`) when defaults can conflict with a caller's `className`. No nested template strings.
+- Add or update Storybook stories for new shared components and new visual states or variants.
+
+## Verify the Interaction
+
+- Loading, failure, validation, and saving states give clear feedback.
+- Clickable controls look clickable. "Draft being checked" is distinguishable from "changes ready to save".
+- Read-only fields stay read-only in nested editors and dialogs.
+- Leaving with unsaved changes has deliberate behavior; leave-page protection must not block navigation within the draft.
+- Test tooltips and popovers from their actual keyboard focus target, including controls nested in clickable rows or links. A focusable parent does not make a hover tooltip keyboard-accessible.
+
 ---
 
 ## Decision Guide
diff --git a/libs/shared/console-shared/src/index.ts b/libs/shared/console-shared/src/index.ts
index c0f310b63d4..b51a615ca01 100644
--- a/libs/shared/console-shared/src/index.ts
+++ b/libs/shared/console-shared/src/index.ts
@@ -1,5 +1,6 @@
-// Please use util or domain libraries first,
-// then console-shared only as a last resort.
+// This library is being phased out: do not add new components, helpers, or exports.
+// Use the appropriate shared UI, utility, or domain library, or consider a dedicated library.
+// Existing usages can remain; migrations should stay within the change's scope.
 export * from './lib/settings-heading/settings-heading'
 export * from './lib/live-elapsed-duration-cell/live-elapsed-duration-cell'
 export * from './lib/resource-tree-list/resource-tree-list'

From 80fbd303f56be682b5902c9c89fa10a8c3d73055 Mon Sep 17 00:00:00 2001
From: Pierre GB <pgerbelot@qovery.com>
Date: Tue, 13 Oct 2026 16:20:37 +0200
Subject: [PATCH 3/7] feat(audit-logs): label Operator update events (#3104)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bump qovery-typescript-axios to 1.1.1010 for the OPERATOR_UPDATE and
MAINTENANCE_OPERATOR audit event types. They read "Operator Update" and
"Maintenance · Operator Update", with the icons of their TRIGGER_DEPLOY and
MAINTENANCE counterparts, and show up in the Event filter.
---
 .../src/lib/audit-logs/audit-logs.spec.tsx    | 11 ++++++++++
 .../src/lib/row-event/row-event.spec.tsx      | 22 +++++++++++++++++++
 .../feature/src/lib/row-event/row-event.tsx   | 14 +++++++-----
 package.json                                  |  2 +-
 yarn.lock                                     | 10 ++++-----
 5 files changed, 48 insertions(+), 11 deletions(-)

diff --git a/libs/domains/audit-logs/feature/src/lib/audit-logs/audit-logs.spec.tsx b/libs/domains/audit-logs/feature/src/lib/audit-logs/audit-logs.spec.tsx
index 68d26715f93..766ec71a6a0 100644
--- a/libs/domains/audit-logs/feature/src/lib/audit-logs/audit-logs.spec.tsx
+++ b/libs/domains/audit-logs/feature/src/lib/audit-logs/audit-logs.spec.tsx
@@ -200,3 +200,14 @@ describe('AuditLogs layering', () => {
     expect(tableHeader).toHaveClass('z-dropdown')
   })
 })
+
+describe('AuditLogs event filter', () => {
+  it('should list the Operator update event types in the Event filter', async () => {
+    const { userEvent } = renderWithProviders(<AuditLogs {...props} events={[]} isLoading={false} />)
+
+    await userEvent.click(screen.getByText('Event'))
+
+    const menuItems = screen.getAllByTestId('menuItem').map((item) => item.textContent)
+    expect(menuItems).toEqual(expect.arrayContaining(['Operator update', 'Maintenance operator']))
+  })
+})
diff --git a/libs/domains/audit-logs/feature/src/lib/row-event/row-event.spec.tsx b/libs/domains/audit-logs/feature/src/lib/row-event/row-event.spec.tsx
index 765cbda2d95..5b83acacbf9 100644
--- a/libs/domains/audit-logs/feature/src/lib/row-event/row-event.spec.tsx
+++ b/libs/domains/audit-logs/feature/src/lib/row-event/row-event.spec.tsx
@@ -127,6 +127,28 @@ describe('RowEvent', () => {
     }
   )
 
+  it.each([
+    [OrganizationEventType.OPERATOR_UPDATE, 'Operator Update', 'fa-rocket-launch'],
+    [OrganizationEventType.MAINTENANCE_OPERATOR, 'Maintenance · Operator Update', 'fa-wrench'],
+    [OrganizationEventType.TRIGGER_DEPLOY, 'Trigger Deploy', 'fa-rocket-launch'],
+    [OrganizationEventType.MAINTENANCE, 'Maintenance', 'fa-wrench'],
+  ])('should render %s with its label and icon', (eventType, label, iconClass) => {
+    renderWithProviders(
+      <RowEvent
+        {...props}
+        event={{
+          ...props.event,
+          event_type: eventType,
+          target_type: OrganizationEventTargetType.CLUSTER,
+          sub_target_type: null,
+        }}
+      />
+    )
+
+    expect(screen.getByTestId('tag')).toHaveTextContent(new RegExp(`^${label}$`))
+    expect(screen.getByTestId('row-event').querySelector(`.${iconClass}`)).toBeInTheDocument()
+  })
+
   it('should render Agent task for the agentic workflow target type', () => {
     renderWithProviders(
       <RowEvent
diff --git a/libs/domains/audit-logs/feature/src/lib/row-event/row-event.tsx b/libs/domains/audit-logs/feature/src/lib/row-event/row-event.tsx
index a27a4cea65e..30c7fdb2d79 100644
--- a/libs/domains/audit-logs/feature/src/lib/row-event/row-event.tsx
+++ b/libs/domains/audit-logs/feature/src/lib/row-event/row-event.tsx
@@ -23,9 +23,10 @@ export interface RowEventProps {
   validTargetIds?: ValidTargetIds
 }
 
-const formatEventName = (eventName: string) => {
-  return eventName.split('_').map(upperCaseFirstLetter).join(' ')
-}
+const formatEventName = (eventType?: OrganizationEventType) =>
+  match(eventType)
+    .with(OrganizationEventType.MAINTENANCE_OPERATOR, () => 'Maintenance · Operator Update')
+    .otherwise((type) => (type ?? '').split('_').map(upperCaseFirstLetter).join(' '))
 
 const serviceOverviewUrl = (organizationId: string, projectId: string, environmentId: string, serviceId: string) =>
   `/organization/${organizationId}/project/${projectId}/environment/${environmentId}/service/${serviceId}/overview`
@@ -174,6 +175,7 @@ export function RowEvent(props: RowEventProps) {
       OrganizationEventType.TRIGGER_STOP,
       OrganizationEventType.TRIGGER_TERRAFORM_FORCE_UNLOCK,
       OrganizationEventType.TRIGGER_TERRAFORM_MIGRATE_STATE,
+      OrganizationEventType.OPERATOR_UPDATE,
       () => <Icon iconName="rocket-launch" className="text-neutral-subtle" />
     )
     .with(OrganizationEventType.DELETE, OrganizationEventType.DELETED, () => (
@@ -181,7 +183,9 @@ export function RowEvent(props: RowEventProps) {
     ))
     .with(OrganizationEventType.CLONE, () => <Icon iconName="copy" className="text-neutral-subtle" />)
     .with(OrganizationEventType.DRY_RUN, () => <Icon iconName="rotate-right" className="text-neutral-subtle" />)
-    .with(OrganizationEventType.MAINTENANCE, () => <Icon iconName="wrench" className="text-neutral-subtle" />)
+    .with(OrganizationEventType.MAINTENANCE, OrganizationEventType.MAINTENANCE_OPERATOR, () => (
+      <Icon iconName="wrench" className="text-neutral-subtle" />
+    ))
     .with(OrganizationEventType.FORCE_RUN_SUCCEEDED, () => (
       <Icon iconName="circle-check" className="text-neutral-subtle" />
     ))
@@ -235,7 +239,7 @@ export function RowEvent(props: RowEventProps) {
           <Skeleton height={10} width={80} show={isPlaceholder}>
             <span className="block truncate whitespace-nowrap">
               <span className={isEventTypeFailed ? 'text-negative' : 'text-brand'}>
-                {formatEventName(event.event_type ?? '')}
+                {formatEventName(event.event_type)}
               </span>
               {event.sub_target_type && (
                 <span className="text-neutral">
diff --git a/package.json b/package.json
index 26248dcb196..25c491e7ab9 100644
--- a/package.json
+++ b/package.json
@@ -78,7 +78,7 @@
     "mermaid": "11.6.0",
     "monaco-editor": "0.53.0",
     "posthog-js": "1.345.1",
-    "qovery-typescript-axios": "1.1.1007",
+    "qovery-typescript-axios": "1.1.1010",
     "react": "19.3.0",
     "react-country-flag": "3.0.2",
     "react-datepicker": "4.12.0",
diff --git a/yarn.lock b/yarn.lock
index 6ece0fd2fff..06eda2225d7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6285,7 +6285,7 @@ __metadata:
     prettier: 3.2.5
     prettier-plugin-tailwindcss: 0.5.14
     pretty-quick: 4.0.0
-    qovery-typescript-axios: 1.1.1007
+    qovery-typescript-axios: 1.1.1010
     qovery-ws-typescript-axios: 0.1.666
     react: 19.3.0
     react-country-flag: 3.0.2
@@ -24656,12 +24656,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"qovery-typescript-axios@npm:1.1.1007":
-  version: 1.1.1007
-  resolution: "qovery-typescript-axios@npm:1.1.1007"
+"qovery-typescript-axios@npm:1.1.1010":
+  version: 1.1.1010
+  resolution: "qovery-typescript-axios@npm:1.1.1010"
   dependencies:
     axios: 1.20.0
-  checksum: f8662f1567d11edcbe0119c2db44ceeb0b1f0181517b31ca70c89173872dde9fde0f07087b48cbd0d81372c4399675191b520378e9021539ecca100182a5bba8
+  checksum: a1957c4f49a2c1d131d3826751e0e650f8494c8819e8d1dba0f0989d69f76f7ef6588a3636e950a92cfb5c46b8380fa17863a47ced60d046f181ca31c1e94c01
   languageName: node
   linkType: hard
 

From ac7c13b5519d790b81a699b3df99973e5f67a74b Mon Sep 17 00:00:00 2001
From: Melvin Zottola <37779145+mzottola@users.noreply.github.com>
Date: Tue, 13 Oct 2026 16:50:48 +0200
Subject: [PATCH 4/7] feat(qov-2363): Set SAML local storage even if coming
 from direct link (#3100)

* feat(qov-2363) Set SAML local storage even if coming from direct link

* refacto: Use the useLocalStorage hook

---------

Co-authored-by: Melvin Zottola <mzottola@qovery.com>
---
 .../components/auth-page/auth-page-utils.spec.ts    | 13 +++++++++++++
 .../src/app/components/auth-page/auth-page-utils.ts | 12 +++++++++++-
 .../src/lib/use-local-storage/use-local-storage.ts  |  4 ++--
 3 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/apps/console/src/app/components/auth-page/auth-page-utils.spec.ts b/apps/console/src/app/components/auth-page/auth-page-utils.spec.ts
index 5ab8793ffee..f7a6b5941d5 100644
--- a/apps/console/src/app/components/auth-page/auth-page-utils.spec.ts
+++ b/apps/console/src/app/components/auth-page/auth-page-utils.spec.ts
@@ -3,6 +3,7 @@ import { authPageBeforeLoad, clearAuthEntry, readAuthEntry } from './auth-page-u
 describe('auth entry', () => {
   beforeEach(() => {
     sessionStorage.clear()
+    localStorage.clear()
   })
 
   afterEach(() => {
@@ -22,6 +23,18 @@ describe('auth entry', () => {
     expect(readAuthEntry()).toEqual({ screen: 'signup', redirect: '/organization/123/overview' })
   })
 
+  it('remembers SAML SSO as the last used login of a `?connection=` auto-login', async () => {
+    localStorage.setItem('lastUsedLogin', 'github')
+
+    await authPageBeforeLoad({
+      page: 'login',
+      auth: { isAuthenticated: false, login: jest.fn().mockResolvedValue(undefined) },
+      search: { connection: 'acme' },
+    })
+
+    expect(localStorage.getItem('lastUsedLogin')).toBe('saml_sso')
+  })
+
   it('falls back to the login page and the root when nothing was remembered', () => {
     expect(readAuthEntry()).toEqual({ screen: 'login', redirect: '/' })
   })
diff --git a/apps/console/src/app/components/auth-page/auth-page-utils.ts b/apps/console/src/app/components/auth-page/auth-page-utils.ts
index cf93580bb60..735be1bd4fc 100644
--- a/apps/console/src/app/components/auth-page/auth-page-utils.ts
+++ b/apps/console/src/app/components/auth-page/auth-page-utils.ts
@@ -1,6 +1,7 @@
 import { redirect } from '@tanstack/react-router'
 import { z } from 'zod'
 import { AuthEnum, getSsoConnectionName } from '@qovery/shared/auth'
+import { getLocalStorageItem, setLocalStorageItem } from '@qovery/shared/util-hooks'
 import { type AuthPage } from './auth-page-tracking'
 
 export const LAST_USED_LOGIN_STORAGE_KEY = 'lastUsedLogin'
@@ -50,12 +51,20 @@ export function clearAuthEntry() {
 
 export function getStoredLastUsedLogin() {
   try {
-    return window.localStorage.getItem(LAST_USED_LOGIN_STORAGE_KEY) ?? undefined
+    return getLocalStorageItem(LAST_USED_LOGIN_STORAGE_KEY) ?? undefined
   } catch {
     return undefined
   }
 }
 
+function storeLastUsedLogin(lastUsedLogin: string) {
+  try {
+    setLocalStorageItem(LAST_USED_LOGIN_STORAGE_KEY, lastUsedLogin)
+  } catch (error) {
+    console.error(error)
+  }
+}
+
 export type TrackedAuthProvider = 'google' | 'github' | 'saml' | 'bitbucket' | 'gitlab' | 'microsoft'
 
 const TRACKED_PROVIDERS: Record<string, TrackedAuthProvider> = {
@@ -87,6 +96,7 @@ export async function authPageBeforeLoad({
   const connection = search.connection && getSsoConnectionName(search.connection)
   if (connection) {
     rememberAuthEntry(page, search.redirect)
+    storeLastUsedLogin(SAML_SSO_LOGIN)
     try {
       await auth.login(getSafeRedirect(search.redirect), connection)
     } catch (error) {
diff --git a/libs/shared/util-hooks/src/lib/use-local-storage/use-local-storage.ts b/libs/shared/util-hooks/src/lib/use-local-storage/use-local-storage.ts
index 8221467d424..6b64233a462 100644
--- a/libs/shared/util-hooks/src/lib/use-local-storage/use-local-storage.ts
+++ b/libs/shared/util-hooks/src/lib/use-local-storage/use-local-storage.ts
@@ -4,7 +4,7 @@ function dispatchStorageEvent(key: string, newValue: string | null) {
   window.dispatchEvent(new StorageEvent('storage', { key, newValue }))
 }
 
-function setLocalStorageItem<T>(key: string, value: T) {
+export function setLocalStorageItem<T>(key: string, value: T) {
   const localStorageValue = typeof value === 'string' ? value : JSON.stringify(value)
   window.localStorage.setItem(key, localStorageValue)
   dispatchStorageEvent(key, localStorageValue)
@@ -15,7 +15,7 @@ function removeLocalStorageItem(key: string) {
   dispatchStorageEvent(key, null)
 }
 
-function getLocalStorageItem(key: string) {
+export function getLocalStorageItem(key: string) {
   return window.localStorage.getItem(key)
 }
 

From a55195b82ae725f91c6ff3f985c711b76cf45db7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o=20Grandin?= <theo.grandin74@gmail.com>
Date: Wed, 14 Oct 2026 10:40:30 +0200
Subject: [PATCH 5/7] feat(environments): add deploy by version (#3014)

* feat(environments): add deploy by version

* fix(environments): harden deploy by version

* fix(environments): keep version menu above modal

* fix(environments): pin deploy modal actions

* test(environments): clarify deploy modal option coverage

* fix(environments): redirect actions to deployment pipeline

* fix(environments): share pipeline toast navigation

* test(environments): mock tanstack params in redeploy flag

* fix(environments): update environment pipeline hook callers

* fix(toast): show loading for async actions

* fix(shared-ui): catch toast action errors

* fix(shared-ui): allow toast callbacks to return values

* chore(environments): group pipeline navigation hook and helper

* fix(environments): use registry details for version selection
---
 .../$environmentId/variables/built-in.tsx     |   4 +-
 .../variables/external-secrets.tsx            |   4 +-
 .../$environmentId/variables/index.tsx        |   4 +-
 .../deployment-action-button.spec.tsx         |   2 +-
 .../deployment-action-button.tsx              |  10 +-
 .../environment-pipeline.tsx                  |   1 +
 .../deploy-by-version-modal.spec.tsx          | 324 ++++++++++++++
 .../deploy-by-version-modal.tsx               | 238 +++++++++++
 .../deploy-by-version.spec.ts                 | 206 +++++++++
 .../deploy-by-version.ts                      | 276 ++++++++++++
 .../service-version-row.tsx                   | 230 ++++++++++
 .../use-deploy-by-version-services.ts         | 150 +++++++
 .../environment-action-toolbar.spec.tsx.snap  |   4 +-
 .../environment-action-toolbar.spec.tsx       |  16 +
 .../environment-action-toolbar.tsx            |  34 +-
 .../dropdown-services/dropdown-services.tsx   |  14 +-
 .../environment-deployment-list.tsx           |   8 +-
 .../environment-last-deployment-section.tsx   |  12 +-
 .../use-cancel-deployment-environment.ts      |  30 +-
 .../use-delete-environment.ts                 |  10 +-
 .../use-deploy-all-services.spec.ts           |  54 +++
 .../use-deploy-all-services.ts                |  26 +-
 .../use-deploy-environment.ts                 |  30 +-
 .../get-latest-environment-deployment-id.ts   |  40 ++
 .../use-navigate-to-environment-pipeline.ts   |  43 ++
 .../use-outdated-services.ts                  |  58 ---
 .../use-stop-environment.ts                   |  31 +-
 .../use-uninstall-environment.ts              |  30 +-
 .../need-redeploy-flag.spec.tsx               |   5 +-
 .../need-redeploy-flag/need-redeploy-flag.tsx |   9 +-
 .../settings-danger-zone.tsx                  |   3 +-
 .../update-all-modal.spec.tsx.snap            | 398 ------------------
 .../update-all-modal.spec.tsx                 | 190 ---------
 .../lib/update-all-modal/update-all-modal.tsx | 286 -------------
 .../ui/src/lib/components/toast/toast.tsx     |  35 +-
 libs/shared/ui/src/lib/utils/toast-error.tsx  |   4 +-
 libs/shared/ui/src/lib/utils/toast.tsx        |   3 +-
 37 files changed, 1751 insertions(+), 1071 deletions(-)
 create mode 100644 libs/domains/environments/feature/src/lib/deploy-by-version-modal/deploy-by-version-modal.spec.tsx
 create mode 100644 libs/domains/environments/feature/src/lib/deploy-by-version-modal/deploy-by-version-modal.tsx
 create mode 100644 libs/domains/environments/feature/src/lib/deploy-by-version-modal/deploy-by-version.spec.ts
 create mode 100644 libs/domains/environments/feature/src/lib/deploy-by-version-modal/deploy-by-version.ts
 create mode 100644 libs/domains/environments/feature/src/lib/deploy-by-version-modal/service-version-row.tsx
 create mode 100644 libs/domains/environments/feature/src/lib/deploy-by-version-modal/use-deploy-by-version-services.ts
 create mode 100644 libs/domains/environments/feature/src/lib/hooks/use-deploy-all-services/use-deploy-all-services.spec.ts
 create mode 100644 libs/domains/environments/feature/src/lib/hooks/use-navigate-to-environment-pipeline/get-latest-environment-deployment-id.ts
 create mode 100644 libs/domains/environments/feature/src/lib/hooks/use-navigate-to-environment-pipeline/use-navigate-to-environment-pipeline.ts
 delete mode 100644 libs/domains/environments/feature/src/lib/hooks/use-outdated-services/use-outdated-services.ts
 delete mode 100644 libs/domains/environments/feature/src/lib/update-all-modal/__snapshots__/update-all-modal.spec.tsx.snap
 delete mode 100644 libs/domains/environments/feature/src/lib/update-all-modal/update-all-modal.spec.tsx
 delete mode 100644 libs/domains/environments/feature/src/lib/update-all-modal/update-all-modal.tsx

diff --git a/apps/console/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/variables/built-in.tsx b/apps/console/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/variables/built-in.tsx
index 5280f68562b..20e8980de12 100644
--- a/apps/console/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/variables/built-in.tsx
+++ b/apps/console/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/variables/built-in.tsx
@@ -1,7 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { useDeployEnvironment } from '@qovery/domains/environments/feature'
 import { VariableList } from '@qovery/domains/variables/feature'
-import { ENVIRONMENT_LOGS_URL, ENVIRONMENT_STAGES_URL } from '@qovery/shared/routes'
 import { toast } from '@qovery/shared/ui'
 import { useDocumentTitle } from '@qovery/shared/util-hooks'
 
@@ -16,8 +15,9 @@ function RouteComponent() {
   useDocumentTitle('Built-in variables - Environment')
 
   const { mutate: deployEnvironment } = useDeployEnvironment({
+    organizationId,
     projectId,
-    logsLink: ENVIRONMENT_LOGS_URL(organizationId, projectId, environmentId) + ENVIRONMENT_STAGES_URL(),
+    environmentId,
   })
 
   const toasterCallback = () => {
diff --git a/apps/console/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/variables/external-secrets.tsx b/apps/console/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/variables/external-secrets.tsx
index 19533863201..0c4cfc3c4c8 100644
--- a/apps/console/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/variables/external-secrets.tsx
+++ b/apps/console/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/variables/external-secrets.tsx
@@ -4,7 +4,6 @@ import { useFeatureFlagEnabled } from 'posthog-js/react'
 import { useEffect } from 'react'
 import { useDeployEnvironment } from '@qovery/domains/environments/feature'
 import { ExternalSecretsTab, SecretManagerFeatureFlagEntryPoint } from '@qovery/domains/variables/feature'
-import { ENVIRONMENT_LOGS_URL, ENVIRONMENT_STAGES_URL } from '@qovery/shared/routes'
 import { toast } from '@qovery/shared/ui'
 import { useDocumentTitle } from '@qovery/shared/util-hooks'
 
@@ -29,8 +28,9 @@ function RouteComponent() {
   }, [organizationId, projectId, environmentId])
 
   const { mutate: deployEnvironment } = useDeployEnvironment({
+    organizationId,
     projectId,
-    logsLink: ENVIRONMENT_LOGS_URL(organizationId, projectId, environmentId) + ENVIRONMENT_STAGES_URL(),
+    environmentId,
   })
 
   const redeployEnvironmentAction = () => {
diff --git a/apps/console/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/variables/index.tsx b/apps/console/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/variables/index.tsx
index fc00f4873d0..0843a1d7d64 100644
--- a/apps/console/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/variables/index.tsx
+++ b/apps/console/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/variables/index.tsx
@@ -1,7 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { useDeployEnvironment } from '@qovery/domains/environments/feature'
 import { VariableList, VariablesActionToolbar } from '@qovery/domains/variables/feature'
-import { ENVIRONMENT_LOGS_URL, ENVIRONMENT_STAGES_URL } from '@qovery/shared/routes'
 import { toast } from '@qovery/shared/ui'
 import { useDocumentTitle } from '@qovery/shared/util-hooks'
 
@@ -16,8 +15,9 @@ function RouteComponent() {
   useDocumentTitle('Custom variables - Environment')
 
   const { mutate: deployEnvironment } = useDeployEnvironment({
+    organizationId,
     projectId,
-    logsLink: ENVIRONMENT_LOGS_URL(organizationId, projectId, environmentId) + ENVIRONMENT_STAGES_URL(),
+    environmentId,
   })
 
   const toasterCallback = () => {
diff --git a/libs/domains/environment-logs/feature/src/lib/deployment-action-button/deployment-action-button.spec.tsx b/libs/domains/environment-logs/feature/src/lib/deployment-action-button/deployment-action-button.spec.tsx
index 68fa960aebe..c6c0054eeaf 100644
--- a/libs/domains/environment-logs/feature/src/lib/deployment-action-button/deployment-action-button.spec.tsx
+++ b/libs/domains/environment-logs/feature/src/lib/deployment-action-button/deployment-action-button.spec.tsx
@@ -14,7 +14,6 @@ const mockCancel = jest.fn()
 const mockOpenModalConfirmation = jest.fn()
 
 jest.mock('@qovery/domains/services/feature', () => ({
-  useDeployAllServices: () => ({ mutate: mockDeployAllServices }),
   useRestartAllServices: () => ({ mutate: mockRestartAllServices }),
   useStopAllServices: () => ({ mutate: mockStopAllServices }),
   useUninstallAllServices: () => ({ mutate: mockUninstallAllServices }),
@@ -24,6 +23,7 @@ jest.mock('@qovery/domains/services/feature', () => ({
 jest.mock('@qovery/domains/environments/feature', () => ({
   ...jest.requireActual('@qovery/domains/environments/feature'),
   useCancelDeploymentEnvironment: () => ({ mutate: mockCancel }),
+  useDeployAllServices: () => ({ mutate: mockDeployAllServices }),
 }))
 
 jest.mock('@qovery/shared/ui', () => ({
diff --git a/libs/domains/environment-logs/feature/src/lib/deployment-action-button/deployment-action-button.tsx b/libs/domains/environment-logs/feature/src/lib/deployment-action-button/deployment-action-button.tsx
index b8abda937c0..585bda81570 100644
--- a/libs/domains/environment-logs/feature/src/lib/deployment-action-button/deployment-action-button.tsx
+++ b/libs/domains/environment-logs/feature/src/lib/deployment-action-button/deployment-action-button.tsx
@@ -1,14 +1,12 @@
 import { type DeploymentHistoryEnvironmentV2, type Environment, type StateEnum } from 'qovery-typescript-axios'
 import { match } from 'ts-pattern'
-import { useCancelDeploymentEnvironment } from '@qovery/domains/environments/feature'
+import { useCancelDeploymentEnvironment, useDeployAllServices } from '@qovery/domains/environments/feature'
 import {
   useDeleteAllServices,
-  useDeployAllServices,
   useRestartAllServices,
   useStopAllServices,
   useUninstallAllServices,
 } from '@qovery/domains/services/feature'
-import { ENVIRONMENT_LOGS_URL, ENVIRONMENT_STAGES_URL } from '@qovery/shared/routes'
 import { Button, Icon, Tooltip, useModalConfirmation } from '@qovery/shared/ui'
 import { isCancelBuildAvailable } from '@qovery/shared/util-js'
 
@@ -21,12 +19,10 @@ export interface DeploymentActionButtonProps {
 export function DeploymentActionButton({ environment, deploymentHistory, state }: DeploymentActionButtonProps) {
   const { openModalConfirmation } = useModalConfirmation()
 
-  const logsLink =
-    ENVIRONMENT_LOGS_URL(environment.organization.id, environment.project.id, environment.id) + ENVIRONMENT_STAGES_URL()
-
   const { mutate: cancelDeploymentEnvironment } = useCancelDeploymentEnvironment({
+    organizationId: environment.organization.id,
     projectId: environment.project.id,
-    logsLink,
+    environmentId: environment.id,
   })
   const { mutate: deployAllServices } = useDeployAllServices()
   const { mutate: restartAllServices } = useRestartAllServices()
diff --git a/libs/domains/environment-logs/feature/src/lib/environment-pipeline/environment-pipeline.tsx b/libs/domains/environment-logs/feature/src/lib/environment-pipeline/environment-pipeline.tsx
index 7f3b404710e..be15670294d 100644
--- a/libs/domains/environment-logs/feature/src/lib/environment-pipeline/environment-pipeline.tsx
+++ b/libs/domains/environment-logs/feature/src/lib/environment-pipeline/environment-pipeline.tsx
@@ -288,6 +288,7 @@ export function EnvironmentPipeline() {
     },
     enabled:
       Boolean(organizationId) && Boolean(environment?.cluster_id) && Boolean(projectId) && Boolean(environmentId),
+    shouldReconnect: true,
     onMessage: messageHandler,
   })
 
diff --git a/libs/domains/environments/feature/src/lib/deploy-by-version-modal/deploy-by-version-modal.spec.tsx b/libs/domains/environments/feature/src/lib/deploy-by-version-modal/deploy-by-version-modal.spec.tsx
new file mode 100644
index 00000000000..e76e0dcc9a2
--- /dev/null
+++ b/libs/domains/environments/feature/src/lib/deploy-by-version-modal/deploy-by-version-modal.spec.tsx
@@ -0,0 +1,324 @@
+import { environmentFactoryMock } from '@qovery/shared/factories'
+import { renderWithProviders, screen } from '@qovery/shared/util-tests'
+import { type DeployByVersionService } from './deploy-by-version'
+import { DeployByVersionModal } from './deploy-by-version-modal'
+
+const mockEnvironment = environmentFactoryMock(1)[0]
+const mockDeployAllServices = jest.fn()
+const mockCloseModal = jest.fn()
+const mockSetModalDismissible = jest.fn()
+let mockDeployIsLoading = false
+
+const unavailableService: DeployByVersionService = {
+  id: 'unavailable',
+  name: 'Unavailable service',
+  iconUri: 'app://qovery-console/application',
+  serviceType: 'APPLICATION',
+  sourceType: 'git',
+  currentVersion: 'current-commit',
+  versions: [],
+  isSkipped: false,
+  hasVersionError: true,
+}
+
+const defaultServices: DeployByVersionService[] = [
+  {
+    id: 'terraform',
+    name: 'Infrastructure',
+    iconUri: 'app://qovery-console/terraform',
+    serviceType: 'TERRAFORM',
+    sourceType: 'git',
+    currentVersion: 'old-terraform-commit',
+    versions: [
+      { value: 'new-terraform-commit', message: 'Update infrastructure' },
+      { value: 'old-terraform-commit', message: 'Current infrastructure' },
+    ],
+    isSkipped: false,
+  },
+  {
+    id: 'application',
+    name: 'API',
+    iconUri: 'app://qovery-console/application',
+    serviceType: 'APPLICATION',
+    sourceType: 'git',
+    currentVersion: 'current-app-commit',
+    versions: [
+      { value: 'current-app-commit', message: 'Current application' },
+      { value: 'previous-app-commit', message: 'Previous application' },
+    ],
+    isSkipped: false,
+  },
+  unavailableService,
+]
+let mockServices = defaultServices
+
+jest.mock('@qovery/domains/services/feature', () => ({
+  ServiceAvatar: () => <span data-testid="service-avatar" />,
+}))
+
+jest.mock('@qovery/shared/ui', () => ({
+  ...jest.requireActual('@qovery/shared/ui'),
+  useModal: () => ({ closeModal: mockCloseModal, setModalDismissible: mockSetModalDismissible }),
+}))
+
+jest.mock('./use-deploy-by-version-services', () => ({
+  useDeployByVersionServices: () => ({ data: mockServices, isLoading: false, isError: false }),
+}))
+
+jest.mock('../hooks/use-deploy-all-services/use-deploy-all-services', () => ({
+  useDeployAllServices: () => ({ mutate: mockDeployAllServices, isLoading: mockDeployIsLoading }),
+}))
+
+describe('DeployByVersionModal', () => {
+  beforeEach(() => {
+    jest.useFakeTimers()
+    jest.clearAllMocks()
+    mockServices = defaultServices
+    mockDeployIsLoading = false
+    mockDeployAllServices.mockImplementation((_variables: unknown, options: { onSuccess?: () => void }) => {
+      options.onSuccess?.()
+    })
+  })
+
+  afterEach(() => {
+    jest.clearAllTimers()
+    jest.useRealTimers()
+  })
+
+  it('preselects outdated services and submits an explicit Terraform commit', async () => {
+    const { userEvent } = renderWithProviders(<DeployByVersionModal environment={mockEnvironment} />)
+
+    expect(screen.getByRole('button', { name: 'Update 1 service' })).toBeEnabled()
+    expect(screen.getByRole('checkbox', { name: 'Infrastructure' })).toBeChecked()
+    expect(screen.getByRole('checkbox', { name: 'API' })).not.toBeChecked()
+
+    await userEvent.click(screen.getByRole('button', { name: 'Update 1 service' }))
+
+    expect(mockDeployAllServices).toHaveBeenCalledWith(
+      {
+        environment: mockEnvironment,
+        payload: { terraforms: [{ id: 'terraform', git_commit_id: 'new-terraform-commit' }] },
+      },
+      { onSuccess: mockCloseModal }
+    )
+    expect(mockSetModalDismissible).toHaveBeenLastCalledWith(false)
+    expect(mockCloseModal).toHaveBeenCalledTimes(1)
+  })
+
+  it('allows an up-to-date service to be selected explicitly', async () => {
+    const { userEvent } = renderWithProviders(<DeployByVersionModal environment={mockEnvironment} />)
+
+    await userEvent.click(screen.getByRole('checkbox', { name: 'API' }))
+
+    expect(screen.getByRole('button', { name: 'Update 2 services' })).toBeEnabled()
+    expect(screen.getByRole('button', { name: 'Select a version for API' })).toBeEnabled()
+  })
+
+  it('keeps the version selector enabled and selects the service when its target changes', async () => {
+    const { userEvent } = renderWithProviders(<DeployByVersionModal environment={mockEnvironment} />)
+
+    const selector = screen.getByRole('button', { name: 'Select a version for API' })
+    expect(selector).toBeEnabled()
+    expect(screen.getByRole('checkbox', { name: 'API' })).not.toBeChecked()
+
+    await userEvent.click(selector)
+    await userEvent.click(screen.getByRole('menuitem', { name: /previou Previous application/ }))
+
+    expect(screen.getByRole('checkbox', { name: 'API' })).toBeChecked()
+    expect(selector).toHaveTextContent('previou')
+    expect(screen.getByRole('button', { name: 'Update 2 services' })).toBeEnabled()
+  })
+
+  it('sizes version icons with their adjacent text', () => {
+    renderWithProviders(<DeployByVersionModal environment={mockEnvironment} />)
+
+    const selector = screen.getByRole('button', { name: 'Select a version for Infrastructure' })
+    const row = selector.closest('[data-testid="service-version-row"]')
+
+    expect(selector.querySelector('.fa-code-commit')).toHaveClass('text-ssm')
+    expect(selector.querySelector('.fa-chevron-down')).toHaveClass('text-ssm')
+    expect(selector.querySelector('.fa-chevron-down')).not.toHaveClass('text-neutral-subtle')
+    expect(selector.querySelector('.fa-chevron-down')).toHaveClass('group-data-[state=open]:rotate-180')
+    expect(row?.querySelector('.fa-arrow-right')).toHaveClass('text-ssm')
+  })
+
+  it('lets version controls hug their content without width constraints', () => {
+    renderWithProviders(<DeployByVersionModal environment={mockEnvironment} />)
+
+    const selector = screen.getByRole('button', { name: 'Select a version for Infrastructure' })
+    const row = selector.closest('[data-testid="service-version-row"]')
+    const currentVersion = screen.getByText('old-ter').closest('[class~="h-6"]')
+
+    expect(selector).not.toHaveClass('min-w-28', 'max-w-44')
+    expect(row?.querySelector('.max-w-36')).not.toBeInTheDocument()
+    expect(currentVersion).toHaveClass('px-1.5')
+  })
+
+  it('renders commit details using the Figma dropdown hierarchy', async () => {
+    const { userEvent } = renderWithProviders(<DeployByVersionModal environment={mockEnvironment} />)
+
+    const selector = screen.getByRole('button', { name: 'Select a version for Infrastructure' })
+    await userEvent.click(selector)
+
+    expect(selector).toHaveAttribute('data-state', 'open')
+    expect(screen.getByRole('menuitem', { name: /new-ter Update infrastructure/ })).toHaveClass(
+      'hover:bg-surface-neutral-subtle'
+    )
+    expect(screen.getByText('Update infrastructure')).toBeInTheDocument()
+    expect(screen.queryByText('main')).not.toBeInTheDocument()
+    expect(screen.getAllByText('Latest').length).toBeGreaterThan(0)
+    expect(screen.getByTestId('version-options')).toHaveClass('z-dropdown')
+    expect(screen.getByTestId('version-options')).not.toHaveClass('font-code', 'font-mono')
+    expect(screen.getByTestId('version-options').querySelector('.fa-code-commit')).not.toBeInTheDocument()
+  })
+
+  it('renders complete non-Git versions and prevents selecting the mutable latest tag', async () => {
+    mockServices = [
+      {
+        id: 'container',
+        name: 'Container',
+        iconUri: 'app://qovery-console/container',
+        serviceType: 'CONTAINER',
+        sourceType: 'container',
+        currentVersion: 'release-2026-09-alpha',
+        containerRegistryId: 'registry',
+        imageName: 'image',
+        versions: [
+          { value: 'release-2026-09-alpha' },
+          { value: 'release-2026-09-beta' },
+          {
+            value: 'latest',
+            isDisabled: true,
+            disabledReason: 'Image tag cannot be latest to ensure consistent deployment',
+          },
+        ],
+        isSkipped: false,
+      },
+    ]
+    const { userEvent } = renderWithProviders(<DeployByVersionModal environment={mockEnvironment} />)
+    const checkbox = screen.getByRole('checkbox', { name: 'Container' })
+
+    await userEvent.click(screen.getByRole('button', { name: 'Select a version for Container' }))
+
+    expect(screen.getByRole('menuitem', { name: 'release-2026-09-alpha' })).toBeInTheDocument()
+    expect(screen.getByRole('menuitem', { name: 'release-2026-09-beta' })).toBeInTheDocument()
+    const latest = screen.getByRole('menuitem', {
+      name: 'latest Image tag cannot be latest to ensure consistent deployment',
+    })
+    expect(latest).toHaveAttribute('data-disabled')
+
+    await userEvent.click(latest)
+
+    expect(checkbox).not.toBeChecked()
+  })
+
+  it('renders every fetched version in a natively scrollable four-row menu', async () => {
+    mockServices = [
+      {
+        ...defaultServices[0],
+        versions: Array.from({ length: 6 }, (_, index) => ({
+          value: `commit-${index}`,
+          message: `Commit message ${index}`,
+        })),
+      },
+    ]
+    const { userEvent } = renderWithProviders(<DeployByVersionModal environment={mockEnvironment} />)
+
+    await userEvent.click(screen.getByRole('button', { name: 'Select a version for Infrastructure' }))
+
+    const versionItems = screen.getAllByRole('menuitem')
+    expect(versionItems).toHaveLength(6)
+    versionItems.forEach((item) => expect(item).toHaveClass('h-[62px]', 'shrink-0'))
+    expect(screen.getByTestId('version-options')).toHaveClass(
+      'max-h-[248px]',
+      'overflow-x-hidden',
+      'overflow-y-auto',
+      'overscroll-contain'
+    )
+  })
+
+  it('selects a different version from the dropdown', async () => {
+    const { userEvent } = renderWithProviders(<DeployByVersionModal environment={mockEnvironment} />)
+
+    await userEvent.click(screen.getByRole('button', { name: 'Select a version for Infrastructure' }))
+    await userEvent.click(screen.getByRole('menuitem', { name: /old-ter Current infrastructure/ }))
+
+    expect(screen.queryByRole('menu')).not.toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Select a version for Infrastructure' })).toHaveTextContent('old-ter')
+
+    await userEvent.click(screen.getByRole('button', { name: 'Update 1 service' }))
+
+    expect(mockDeployAllServices).toHaveBeenCalledWith(
+      {
+        environment: mockEnvironment,
+        payload: { terraforms: [{ id: 'terraform', git_commit_id: 'old-terraform-commit' }] },
+      },
+      { onSuccess: mockCloseModal }
+    )
+  })
+
+  it('locks modal dismissal and prevents duplicate submission while deployment is pending', async () => {
+    mockDeployAllServices.mockImplementation(() => undefined)
+    const { rerender, userEvent } = renderWithProviders(<DeployByVersionModal environment={mockEnvironment} />)
+
+    await userEvent.click(screen.getByRole('button', { name: 'Update 1 service' }))
+    expect(mockDeployAllServices).toHaveBeenCalledTimes(1)
+    expect(mockSetModalDismissible).toHaveBeenLastCalledWith(false)
+
+    mockDeployIsLoading = true
+    rerender(<DeployByVersionModal environment={mockEnvironment} />)
+
+    const submit = screen.getByRole('button', { name: 'Update 1 service' })
+    expect(screen.getByRole('button', { name: 'Cancel' })).toBeDisabled()
+    expect(submit).toBeDisabled()
+    submit.focus()
+    await userEvent.keyboard('{Enter}')
+    expect(mockDeployAllServices).toHaveBeenCalledTimes(1)
+    expect(mockCloseModal).not.toHaveBeenCalled()
+
+    mockDeployIsLoading = false
+    rerender(<DeployByVersionModal environment={mockEnvironment} />)
+    expect(mockSetModalDismissible).toHaveBeenLastCalledWith(true)
+  })
+
+  it('does not show services without selectable versions', () => {
+    renderWithProviders(<DeployByVersionModal environment={mockEnvironment} />)
+
+    expect(screen.getAllByTestId('service-version-row')).toHaveLength(2)
+    expect(screen.queryByText('Unavailable service')).not.toBeInTheDocument()
+  })
+
+  it('keeps the actions visible while the modal content scrolls', () => {
+    renderWithProviders(<DeployByVersionModal environment={mockEnvironment} />)
+
+    const modalMainContent = screen.getByTestId('modal-main-content')
+    const form = modalMainContent.closest('form')
+    const actions = screen.getByRole('button', { name: 'Cancel' }).parentElement
+
+    expect(form).toHaveClass('flex', 'max-h-[80vh]', 'flex-col')
+    expect(modalMainContent).toHaveClass('min-h-0', 'flex-1', 'overflow-y-auto', 'p-6')
+    expect(actions).toHaveClass('shrink-0', 'border-t', 'bg-background')
+    expect(modalMainContent).toContainElement(screen.getByRole('heading', { name: 'Deploy by version' }))
+    expect(modalMainContent).toContainElement(screen.getByText('1 outdated service'))
+    expect(modalMainContent).toContainElement(screen.getByText('1 up to date service'))
+    expect(screen.queryByTestId('scroll-shadow-wrapper')).not.toBeInTheDocument()
+    expect(screen.queryByTestId('scroll-shadow-bottom')).not.toBeInTheDocument()
+  })
+
+  it('shows an error when every version lookup failed', () => {
+    mockServices = [unavailableService]
+
+    renderWithProviders(<DeployByVersionModal environment={mockEnvironment} />)
+
+    expect(screen.getByText('Service versions could not be loaded.')).toBeInTheDocument()
+    expect(screen.queryByText('Unavailable service')).not.toBeInTheDocument()
+  })
+
+  it('renders the dedicated empty state when only excluded services remain', () => {
+    mockServices = []
+
+    renderWithProviders(<DeployByVersionModal environment={mockEnvironment} />)
+
+    expect(screen.getByText('No services support version selection.')).toBeInTheDocument()
+  })
+})
diff --git a/libs/domains/environments/feature/src/lib/deploy-by-version-modal/deploy-by-version-modal.tsx b/libs/domains/environments/feature/src/lib/deploy-by-version-modal/deploy-by-version-modal.tsx
new file mode 100644
index 00000000000..bca385b9712
--- /dev/null
+++ b/libs/domains/environments/feature/src/lib/deploy-by-version-modal/deploy-by-version-modal.tsx
@@ -0,0 +1,238 @@
+import { type Environment } from 'qovery-typescript-axios'
+import { useEffect, useMemo, useState } from 'react'
+import { Button, Icon, LoaderSpinner, useModal } from '@qovery/shared/ui'
+import { useDeployAllServices } from '../hooks/use-deploy-all-services/use-deploy-all-services'
+import {
+  type DeployByVersionService,
+  type ServiceVersionSelections,
+  buildDeployByVersionPayload,
+  countDeployByVersionServices,
+  createInitialSelections,
+  getFirstDeployableVersion,
+} from './deploy-by-version'
+import { ServiceVersionRow } from './service-version-row'
+import { useDeployByVersionServices } from './use-deploy-by-version-services'
+
+export interface DeployByVersionModalProps {
+  environment: Environment
+}
+
+function ServiceSection({
+  title,
+  services,
+  selections,
+  action,
+  onToggle,
+  onVersionChange,
+}: {
+  title: string
+  services: DeployByVersionService[]
+  selections: ServiceVersionSelections
+  action?: React.ReactNode
+  onToggle: (serviceId: string) => void
+  onVersionChange: (serviceId: string, version: string) => void
+}) {
+  if (services.length === 0) return null
+
+  return (
+    <section className="mb-6 last:mb-0">
+      <div className="mb-2 flex min-h-6 items-center justify-between">
+        <h3 className="text-sm font-medium text-neutral-subtle">
+          {services.length} {title}
+        </h3>
+        {action}
+      </div>
+      <ul>
+        {services.map((service) => (
+          <ServiceVersionRow
+            key={service.id}
+            service={service}
+            selection={selections[service.id]}
+            onToggle={() => onToggle(service.id)}
+            onVersionChange={(version) => onVersionChange(service.id, version)}
+          />
+        ))}
+      </ul>
+    </section>
+  )
+}
+
+function DeployByVersionHeader() {
+  return (
+    <div className="mb-6">
+      <h2 className="mb-1 text-lg font-medium text-neutral">Deploy by version</h2>
+      <p className="text-sm text-neutral-subtle">
+        Select the service and choose a specific version to deploy on each of those
+      </p>
+    </div>
+  )
+}
+
+function DeployByVersionForm({
+  environment,
+  services,
+}: DeployByVersionModalProps & { services: DeployByVersionService[] }) {
+  const { closeModal, setModalDismissible } = useModal()
+  const { mutate: deployAllServices, isLoading } = useDeployAllServices()
+  const [selections, setSelections] = useState<ServiceVersionSelections>(() => createInitialSelections(services))
+
+  const outdatedServices = services.filter(
+    (service) => getFirstDeployableVersion(service)?.value !== service.currentVersion
+  )
+  const upToDateServices = services.filter(
+    (service) => getFirstDeployableVersion(service)?.value === service.currentVersion
+  )
+  const payload = useMemo(() => buildDeployByVersionPayload(services, selections), [selections, services])
+  const selectedCount = countDeployByVersionServices(payload)
+  const allOutdatedSelected = outdatedServices
+    .filter(({ isSkipped }) => !isSkipped)
+    .every(({ id }) => selections[id].selected)
+
+  useEffect(() => {
+    setModalDismissible(!isLoading)
+  }, [isLoading, setModalDismissible])
+
+  useEffect(
+    () => () => {
+      setModalDismissible(true)
+    },
+    [setModalDismissible]
+  )
+
+  const toggleService = (serviceId: string) => {
+    setSelections((current) => ({
+      ...current,
+      [serviceId]: { ...current[serviceId], selected: !current[serviceId].selected },
+    }))
+  }
+
+  const changeVersion = (serviceId: string, version: string) => {
+    setSelections((current) => ({
+      ...current,
+      [serviceId]: { ...current[serviceId], selected: true, version },
+    }))
+  }
+
+  const toggleOutdatedServices = () => {
+    setSelections((current) =>
+      Object.fromEntries(
+        Object.entries(current).map(([serviceId, selection]) => {
+          const service = outdatedServices.find(({ id }) => id === serviceId)
+          return [
+            serviceId,
+            service && !service.isSkipped ? { ...selection, selected: !allOutdatedSelected } : selection,
+          ]
+        })
+      )
+    )
+  }
+
+  const onSubmit = (event: React.FormEvent) => {
+    event.preventDefault()
+    if (selectedCount === 0 || isLoading) return
+    setModalDismissible(false)
+    deployAllServices(
+      { environment, payload },
+      {
+        onSuccess: closeModal,
+      }
+    )
+  }
+
+  return (
+    <form className="flex max-h-[80vh] flex-col" onSubmit={onSubmit}>
+      <div className="min-h-0 flex-1 overflow-y-auto p-6" data-testid="modal-main-content">
+        <DeployByVersionHeader />
+        <ServiceSection
+          title={outdatedServices.length === 1 ? 'outdated service' : 'outdated services'}
+          services={outdatedServices}
+          selections={selections}
+          action={
+            outdatedServices.some(({ isSkipped }) => !isSkipped) ? (
+              <Button type="button" size="xs" variant="outline" color="neutral" onClick={toggleOutdatedServices}>
+                {allOutdatedSelected ? 'Unselect all' : 'Select all'}
+              </Button>
+            ) : undefined
+          }
+          onToggle={toggleService}
+          onVersionChange={changeVersion}
+        />
+        <ServiceSection
+          title={upToDateServices.length === 1 ? 'up to date service' : 'up to date services'}
+          services={upToDateServices}
+          selections={selections}
+          onToggle={toggleService}
+          onVersionChange={changeVersion}
+        />
+      </div>
+
+      <div className="flex shrink-0 justify-end gap-2 border-t border-neutral bg-background px-5 py-4">
+        <Button type="button" color="neutral" variant="plain" size="lg" disabled={isLoading} onClick={closeModal}>
+          Cancel
+        </Button>
+        <Button type="submit" size="lg" disabled={selectedCount === 0 || isLoading} loading={isLoading}>
+          {selectedCount === 0
+            ? 'No services to update'
+            : `Update ${selectedCount} service${selectedCount === 1 ? '' : 's'}`}
+        </Button>
+      </div>
+    </form>
+  )
+}
+
+export function DeployByVersionModal({ environment }: DeployByVersionModalProps) {
+  const { closeModal } = useModal()
+  const {
+    data: services,
+    isLoading,
+    isError,
+  } = useDeployByVersionServices({
+    environmentId: environment.id,
+    organizationId: environment.organization.id,
+  })
+  const servicesWithVersions = services.filter((service) => getFirstDeployableVersion(service))
+  const hasVersionErrors = services.some(({ hasVersionError }) => hasVersionError)
+
+  const formKey = servicesWithVersions
+    .map((service) =>
+      [service.id, service.currentVersion, getFirstDeployableVersion(service)?.value, service.isSkipped].join(':')
+    )
+    .join('|')
+
+  if (!isLoading && !isError && servicesWithVersions.length > 0) {
+    return <DeployByVersionForm key={formKey} environment={environment} services={servicesWithVersions} />
+  }
+
+  return (
+    <div className="p-6" data-testid="modal-main-content">
+      <DeployByVersionHeader />
+      {isLoading ? (
+        <div className="flex min-h-48 items-center justify-center">
+          <LoaderSpinner />
+        </div>
+      ) : isError || (servicesWithVersions.length === 0 && hasVersionErrors) ? (
+        <div className="py-10 text-center">
+          <Icon iconName="circle-exclamation" className="text-negative" />
+          <p className="mt-2 text-sm font-medium text-neutral">Service versions could not be loaded.</p>
+          <p className="mt-1 text-xs text-neutral-subtle">Close the modal and try again.</p>
+          <Button type="button" className="mt-4" color="neutral" variant="outline" size="sm" onClick={closeModal}>
+            Close
+          </Button>
+        </div>
+      ) : servicesWithVersions.length === 0 ? (
+        <div className="py-10 text-center" data-testid="empty-state">
+          <Icon iconName="check-circle" className="text-positive" />
+          <p className="mt-2 text-sm font-medium text-neutral">No services support version selection.</p>
+          <p className="mt-1 text-xs text-neutral-subtle">
+            Blueprint, database, Argo CD, and agentic workflow services are not included.
+          </p>
+          <Button type="button" className="mt-4" color="neutral" variant="outline" size="sm" onClick={closeModal}>
+            Close
+          </Button>
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+export default DeployByVersionModal
diff --git a/libs/domains/environments/feature/src/lib/deploy-by-version-modal/deploy-by-version.spec.ts b/libs/domains/environments/feature/src/lib/deploy-by-version-modal/deploy-by-version.spec.ts
new file mode 100644
index 00000000000..0fb4ba493d8
--- /dev/null
+++ b/libs/domains/environments/feature/src/lib/deploy-by-version-modal/deploy-by-version.spec.ts
@@ -0,0 +1,206 @@
+import { type Commit } from 'qovery-typescript-axios'
+import { helmFactoryMock, terraformFactoryMock } from '@qovery/shared/factories'
+import {
+  type DeployByVersionService,
+  buildDeployByVersionPayload,
+  commitsToVersionOptions,
+  containerVersionsToOptions,
+  countDeployByVersionServices,
+  createInitialSelections,
+  sortVersions,
+  toVersionedService,
+  versionsToOptions,
+} from './deploy-by-version'
+
+const services: DeployByVersionService[] = [
+  {
+    id: 'application',
+    name: 'Application',
+    iconUri: 'app://qovery-console/application',
+    serviceType: 'APPLICATION',
+    sourceType: 'git',
+    currentVersion: 'app-old',
+    versions: [{ value: 'app-new' }, { value: 'app-old' }],
+    isSkipped: false,
+  },
+  {
+    id: 'container',
+    name: 'Container',
+    iconUri: 'app://qovery-console/container',
+    serviceType: 'CONTAINER',
+    sourceType: 'container',
+    currentVersion: '1.0.0',
+    containerRegistryId: 'registry',
+    imageName: 'nginx',
+    versions: [{ value: '2.0.0' }, { value: '1.0.0' }],
+    isSkipped: false,
+  },
+  {
+    id: 'git-job',
+    name: 'Git job',
+    iconUri: 'app://qovery-console/cron-job',
+    serviceType: 'JOB',
+    sourceType: 'git',
+    jobType: 'CRON',
+    currentVersion: 'job-old',
+    versions: [{ value: 'job-new' }],
+    isSkipped: false,
+  },
+  {
+    id: 'container-job',
+    name: 'Container job',
+    iconUri: 'app://qovery-console/lifecycle-job',
+    serviceType: 'JOB',
+    sourceType: 'container',
+    jobType: 'LIFECYCLE',
+    currentVersion: '1.0.0',
+    containerRegistryId: 'registry',
+    imageName: 'job',
+    versions: [{ value: '2.0.0' }],
+    isSkipped: false,
+  },
+  {
+    id: 'git-helm',
+    name: 'Git Helm',
+    iconUri: 'app://qovery-console/helm',
+    serviceType: 'HELM',
+    sourceType: 'git',
+    currentVersion: 'helm-old',
+    versions: [{ value: 'helm-new' }],
+    isSkipped: false,
+  },
+  {
+    id: 'repository-helm',
+    name: 'Repository Helm',
+    iconUri: 'app://qovery-console/helm',
+    serviceType: 'HELM',
+    sourceType: 'helm-repository',
+    currentVersion: '1.0.0',
+    helmRepositoryId: 'helm-repository',
+    chartName: 'chart',
+    versions: [{ value: '2.0.0' }],
+    isSkipped: false,
+  },
+  {
+    id: 'terraform',
+    name: 'Terraform',
+    iconUri: 'app://qovery-console/terraform',
+    serviceType: 'TERRAFORM',
+    sourceType: 'git',
+    currentVersion: 'terraform-old',
+    versions: [{ value: 'terraform-new' }],
+    isSkipped: false,
+  },
+  {
+    id: 'skipped-terraform',
+    name: 'Skipped Terraform',
+    iconUri: 'app://qovery-console/terraform',
+    serviceType: 'TERRAFORM',
+    sourceType: 'git',
+    currentVersion: 'terraform-old',
+    versions: [{ value: 'terraform-new' }],
+    isSkipped: true,
+  },
+]
+
+describe('deploy by version', () => {
+  it('builds a typed payload for every supported source, including Terraform', () => {
+    const selections = createInitialSelections(services)
+    expect(selections['skipped-terraform'].selected).toBe(false)
+    selections['skipped-terraform'].selected = true
+    const payload = buildDeployByVersionPayload(services, selections)
+
+    expect(payload).toEqual({
+      applications: [{ application_id: 'application', git_commit_id: 'app-new' }],
+      containers: [{ id: 'container', image_tag: '2.0.0' }],
+      jobs: [
+        { id: 'git-job', git_commit_id: 'job-new' },
+        { id: 'container-job', image_tag: '2.0.0' },
+      ],
+      helms: [
+        { id: 'git-helm', git_commit_id: 'helm-new' },
+        { id: 'repository-helm', chart_version: '2.0.0' },
+      ],
+      terraforms: [{ id: 'terraform', git_commit_id: 'terraform-new' }],
+    })
+    expect(countDeployByVersionServices(payload)).toBe(7)
+    expect(payload.terraforms).not.toContainEqual(expect.objectContaining({ id: 'skipped-terraform' }))
+  })
+
+  it('excludes all blueprint-backed services before source classification', () => {
+    const terraform = { ...terraformFactoryMock(1)[0], blueprint_id: 'blueprint-id' }
+    const helm = { ...helmFactoryMock(1)[0], blueprint_id: 'blueprint-id' }
+
+    expect(toVersionedService(terraform)).toBeUndefined()
+    expect(toVersionedService(helm)).toBeUndefined()
+  })
+
+  it('includes a regular Terraform service and reads its deployed commit', () => {
+    const terraform = terraformFactoryMock(1)[0]
+    const gitRepository = terraform.terraform_files_source?.git?.git_repository
+    if (!gitRepository) throw new Error('The Terraform factory must have a Git repository')
+    gitRepository.deployed_commit_id = 'deployed-commit'
+
+    expect(toVersionedService(terraform)).toMatchObject({
+      id: terraform.id,
+      serviceType: 'TERRAFORM',
+      sourceType: 'git',
+      currentVersion: 'deployed-commit',
+    })
+  })
+
+  it('keeps API version arrays immutable while sorting semantic versions first', () => {
+    const versions = ['latest', '1.9.0', 'v2.0.0']
+
+    expect(sortVersions(versions)).toEqual(['v2.0.0', '1.9.0', 'latest'])
+    expect(versions).toEqual(['latest', '1.9.0', 'v2.0.0'])
+  })
+
+  it('disables the mutable latest tag only for container versions', () => {
+    expect(containerVersionsToOptions(['latest', '1.0.0'])).toEqual([
+      { value: '1.0.0' },
+      {
+        value: 'latest',
+        isDisabled: true,
+        disabledReason: 'Image tag cannot be latest to ensure consistent deployment',
+      },
+    ])
+    expect(versionsToOptions(['latest'])).toEqual([{ value: 'latest' }])
+  })
+
+  it('selects the first deployable version and rejects disabled selections from the payload', () => {
+    const container = {
+      ...services[1],
+      versions: [{ value: 'latest', isDisabled: true }, { value: '2.0.0' }],
+    } satisfies DeployByVersionService
+    const containerJob = {
+      ...services[3],
+      versions: [{ value: 'latest', isDisabled: true }],
+    } satisfies DeployByVersionService
+    const selections = createInitialSelections([container, containerJob])
+
+    expect(selections).toEqual({
+      container: { selected: true, version: '2.0.0' },
+      'container-job': { selected: false, version: '' },
+    })
+
+    selections.container = { selected: true, version: 'latest' }
+    selections['container-job'] = { selected: true, version: 'latest' }
+
+    expect(buildDeployByVersionPayload([container, containerJob], selections)).toEqual({})
+  })
+
+  it('preserves commit metadata for the version menu', () => {
+    const commit: Commit = {
+      git_commit_id: 'abc123',
+      created_at: '2026-01-01T00:00:00Z',
+      message: 'Add deployment support',
+      tag: 'v1.0.0',
+      author_name: 'Ada',
+    }
+
+    expect(commitsToVersionOptions([commit])).toEqual([
+      { value: 'abc123', message: 'Add deployment support', tag: 'v1.0.0' },
+    ])
+  })
+})
diff --git a/libs/domains/environments/feature/src/lib/deploy-by-version-modal/deploy-by-version.ts b/libs/domains/environments/feature/src/lib/deploy-by-version-modal/deploy-by-version.ts
new file mode 100644
index 00000000000..e8c903d1002
--- /dev/null
+++ b/libs/domains/environments/feature/src/lib/deploy-by-version-modal/deploy-by-version.ts
@@ -0,0 +1,276 @@
+import { type Commit, type DeployAllRequest } from 'qovery-typescript-axios'
+import { match } from 'ts-pattern'
+import {
+  type AnyService,
+  isApplication,
+  isBlueprintService,
+  isContainer,
+  isHelm,
+  isJob,
+} from '@qovery/domains/services/data-access'
+import { isHelmGitSource, isHelmRepositorySource, isJobContainerSource, isJobGitSource } from '@qovery/shared/enums'
+
+interface VersionedServiceBase {
+  id: string
+  name: string
+  iconUri: string
+  currentVersion?: string
+  jobType?: 'CRON' | 'LIFECYCLE'
+}
+
+export type GitVersionedService = VersionedServiceBase & {
+  sourceType: 'git'
+  serviceType: 'APPLICATION' | 'JOB' | 'HELM' | 'TERRAFORM'
+}
+
+export type ContainerVersionedService = VersionedServiceBase & {
+  sourceType: 'container'
+  serviceType: 'CONTAINER' | 'JOB'
+  containerRegistryId: string
+  imageName: string
+}
+
+export type HelmRepositoryVersionedService = VersionedServiceBase & {
+  sourceType: 'helm-repository'
+  serviceType: 'HELM'
+  helmRepositoryId: string
+  chartName: string
+}
+
+export type VersionedService = GitVersionedService | ContainerVersionedService | HelmRepositoryVersionedService
+
+export interface VersionOption {
+  value: string
+  message?: string
+  tag?: string
+  isDisabled?: boolean
+  disabledReason?: string
+}
+
+export type DeployByVersionService = VersionedService & {
+  versions: VersionOption[]
+  isSkipped: boolean
+  hasVersionError?: boolean
+}
+
+export interface ServiceVersionSelection {
+  selected: boolean
+  version: string
+}
+
+export type ServiceVersionSelections = Record<string, ServiceVersionSelection>
+
+function baseService(service: AnyService): VersionedServiceBase {
+  return {
+    id: service.id,
+    name: service.name,
+    iconUri: service.icon_uri,
+    jobType: isJob(service) ? service.job_type : undefined,
+  }
+}
+
+export function toVersionedService(service: AnyService): VersionedService | undefined {
+  // Blueprint-backed services are deployed through their blueprint flow.
+  if (isBlueprintService(service)) return undefined
+
+  if (isApplication(service)) {
+    if (!service.git_repository) return undefined
+
+    return {
+      ...baseService(service),
+      sourceType: 'git',
+      serviceType: 'APPLICATION',
+      currentVersion: service.git_repository.deployed_commit_id,
+    }
+  }
+
+  if (isContainer(service)) {
+    const containerRegistryId = service.registry.id
+    if (!containerRegistryId) return undefined
+
+    return {
+      ...baseService(service),
+      sourceType: 'container',
+      serviceType: 'CONTAINER',
+      currentVersion: service.tag,
+      containerRegistryId,
+      imageName: service.image_name,
+    }
+  }
+
+  if (isJob(service)) {
+    if (isJobGitSource(service.source) && service.source.docker?.git_repository) {
+      return {
+        ...baseService(service),
+        sourceType: 'git',
+        serviceType: 'JOB',
+        currentVersion: service.source.docker.git_repository.deployed_commit_id,
+      }
+    }
+
+    if (isJobContainerSource(service.source)) {
+      const containerRegistryId = service.source.image.registry.id
+      if (!containerRegistryId) return undefined
+
+      return {
+        ...baseService(service),
+        sourceType: 'container',
+        serviceType: 'JOB',
+        currentVersion: service.source.image.tag,
+        containerRegistryId,
+        imageName: service.source.image.image_name,
+      }
+    }
+
+    return undefined
+  }
+
+  if (isHelm(service)) {
+    if (isHelmGitSource(service.source) && service.source.git?.git_repository) {
+      return {
+        ...baseService(service),
+        sourceType: 'git',
+        serviceType: 'HELM',
+        currentVersion: service.source.git.git_repository.deployed_commit_id,
+      }
+    }
+
+    if (isHelmRepositorySource(service.source) && service.source.repository) {
+      return {
+        ...baseService(service),
+        sourceType: 'helm-repository',
+        serviceType: 'HELM',
+        currentVersion: service.source.repository.chart_version,
+        helmRepositoryId: service.source.repository.repository.id,
+        chartName: service.source.repository.chart_name,
+      }
+    }
+
+    return undefined
+  }
+
+  if (service.serviceType === 'TERRAFORM') {
+    const gitRepository = service.terraform_files_source?.git?.git_repository
+    if (!gitRepository) return undefined
+
+    return {
+      ...baseService(service),
+      sourceType: 'git',
+      serviceType: 'TERRAFORM',
+      currentVersion: gitRepository.deployed_commit_id,
+    }
+  }
+
+  return undefined
+}
+
+export function commitsToVersionOptions(commits: Commit[]): VersionOption[] {
+  return commits.map(({ git_commit_id, message, tag }) => ({
+    value: git_commit_id,
+    message,
+    tag,
+  }))
+}
+
+export function sortVersions(versions: string[]): string[] {
+  const semanticVersion = /^v?\d+\.\d+\.\d+/
+
+  return [...versions].sort((a, b) => {
+    const aIsSemantic = semanticVersion.test(a)
+    const bIsSemantic = semanticVersion.test(b)
+
+    if (aIsSemantic && bIsSemantic) {
+      return b.replace(/^v/i, '').localeCompare(a.replace(/^v/i, ''), undefined, { numeric: true })
+    }
+    if (aIsSemantic) return -1
+    if (bIsSemantic) return 1
+    return a.localeCompare(b)
+  })
+}
+
+export function versionsToOptions(versions: string[]): VersionOption[] {
+  return sortVersions(versions).map((value) => ({ value }))
+}
+
+export function containerVersionsToOptions(versions: string[]): VersionOption[] {
+  return versionsToOptions(versions).map((option) =>
+    option.value === 'latest'
+      ? {
+          ...option,
+          isDisabled: true,
+          disabledReason: 'Image tag cannot be latest to ensure consistent deployment',
+        }
+      : option
+  )
+}
+
+export function getFirstDeployableVersion(service: DeployByVersionService): VersionOption | undefined {
+  return service.versions.find(({ isDisabled }) => !isDisabled)
+}
+
+export function createInitialSelections(services: DeployByVersionService[]): ServiceVersionSelections {
+  return Object.fromEntries(
+    services.map((service) => {
+      const latestVersion = getFirstDeployableVersion(service)?.value ?? ''
+      return [
+        service.id,
+        {
+          selected: !service.isSkipped && Boolean(latestVersion) && latestVersion !== service.currentVersion,
+          version: latestVersion,
+        },
+      ]
+    })
+  )
+}
+
+export function buildDeployByVersionPayload(
+  services: DeployByVersionService[],
+  selections: ServiceVersionSelections
+): DeployAllRequest {
+  return services.reduce<DeployAllRequest>((payload, service) => {
+    const selection = selections[service.id]
+    const selectedVersion = service.versions.find(({ value }) => value === selection?.version)
+    if (!selection?.selected || !selectedVersion || selectedVersion.isDisabled || service.isSkipped) return payload
+
+    return match(service)
+      .with({ serviceType: 'APPLICATION', sourceType: 'git' }, ({ id }) => ({
+        ...payload,
+        applications: [...(payload.applications ?? []), { application_id: id, git_commit_id: selection.version }],
+      }))
+      .with({ serviceType: 'CONTAINER', sourceType: 'container' }, ({ id }) => ({
+        ...payload,
+        containers: [...(payload.containers ?? []), { id, image_tag: selection.version }],
+      }))
+      .with({ serviceType: 'JOB', sourceType: 'git' }, ({ id }) => ({
+        ...payload,
+        jobs: [...(payload.jobs ?? []), { id, git_commit_id: selection.version }],
+      }))
+      .with({ serviceType: 'JOB', sourceType: 'container' }, ({ id }) => ({
+        ...payload,
+        jobs: [...(payload.jobs ?? []), { id, image_tag: selection.version }],
+      }))
+      .with({ serviceType: 'HELM', sourceType: 'git' }, ({ id }) => ({
+        ...payload,
+        helms: [...(payload.helms ?? []), { id, git_commit_id: selection.version }],
+      }))
+      .with({ serviceType: 'HELM', sourceType: 'helm-repository' }, ({ id }) => ({
+        ...payload,
+        helms: [...(payload.helms ?? []), { id, chart_version: selection.version }],
+      }))
+      .with({ serviceType: 'TERRAFORM', sourceType: 'git' }, ({ id }) => ({
+        ...payload,
+        terraforms: [...(payload.terraforms ?? []), { id, git_commit_id: selection.version }],
+      }))
+      .exhaustive()
+  }, {})
+}
+
+export function countDeployByVersionServices(payload: DeployAllRequest): number {
+  return (
+    (payload.applications?.length ?? 0) +
+    (payload.containers?.length ?? 0) +
+    (payload.jobs?.length ?? 0) +
+    (payload.helms?.length ?? 0) +
+    (payload.terraforms?.length ?? 0)
+  )
+}
diff --git a/libs/domains/environments/feature/src/lib/deploy-by-version-modal/service-version-row.tsx b/libs/domains/environments/feature/src/lib/deploy-by-version-modal/service-version-row.tsx
new file mode 100644
index 00000000000..af7f1722cff
--- /dev/null
+++ b/libs/domains/environments/feature/src/lib/deploy-by-version-modal/service-version-row.tsx
@@ -0,0 +1,230 @@
+// eslint-disable-next-line @nx/enforce-module-boundaries
+import { ServiceAvatar } from '@qovery/domains/services/feature'
+import { Button, Checkbox, DropdownMenu, Icon, Tooltip, Truncate } from '@qovery/shared/ui'
+import { twMerge } from '@qovery/shared/util-js'
+import {
+  type DeployByVersionService,
+  type ServiceVersionSelections,
+  type VersionOption,
+  getFirstDeployableVersion,
+} from './deploy-by-version'
+
+function Version({ service, value, latest }: { service: DeployByVersionService; value?: string; latest?: boolean }) {
+  if (!value) return <span className="text-neutral-subtle">Not deployed</span>
+
+  return (
+    <span className="flex min-w-0 items-center gap-1">
+      {service.sourceType === 'git' && (
+        <Icon iconName="code-commit" iconStyle="regular" className="shrink-0 text-ssm" />
+      )}
+      <span className="truncate text-ssm">
+        {latest ? 'Latest' : service.sourceType === 'git' ? value.slice(0, 7) : value}
+      </span>
+    </span>
+  )
+}
+
+function VersionServiceAvatar({ service }: { service: DeployByVersionService }) {
+  const props = {
+    size: 'custom' as const,
+    radius: 'none' as const,
+    serviceAvatarRadius: 'sm' as const,
+    className: 'h-5 w-5',
+  }
+
+  if (service.serviceType === 'JOB') {
+    if (!service.jobType) return null
+    return (
+      <ServiceAvatar
+        {...props}
+        service={{ icon_uri: service.iconUri, serviceType: 'JOB', job_type: service.jobType }}
+      />
+    )
+  }
+
+  return <ServiceAvatar {...props} service={{ icon_uri: service.iconUri, serviceType: service.serviceType }} />
+}
+
+function VersionOptionButton({
+  option,
+  isGit,
+  selected,
+  onChange,
+}: {
+  option: VersionOption
+  isGit: boolean
+  selected: boolean
+  onChange: (version: string) => void
+}) {
+  return (
+    <DropdownMenu.Item
+      color="neutral"
+      disabled={option.isDisabled}
+      className={twMerge(
+        'h-[62px] w-full shrink-0 cursor-pointer flex-col items-start justify-center gap-0.5 rounded-none border-b border-neutral px-3 py-3 text-left font-normal last:border-b-0 hover:bg-surface-neutral-subtle data-[highlighted]:bg-surface-neutral-subtle',
+        selected && 'bg-surface-neutral-subtle',
+        option.isDisabled &&
+          'cursor-not-allowed hover:bg-transparent data-[disabled]:pointer-events-auto data-[highlighted]:bg-transparent'
+      )}
+      onSelect={() => onChange(option.value)}
+    >
+      <span
+        className={twMerge(
+          'flex min-w-0 items-center gap-1 text-sm font-normal leading-5 text-neutral',
+          option.isDisabled && 'text-neutral-disabled'
+        )}
+      >
+        <span className="truncate">{isGit ? option.value.slice(0, 7) : option.value}</span>
+        {selected && <Icon iconName="check" className="shrink-0 text-sm text-positive" />}
+      </span>
+      {(option.message || option.disabledReason) && (
+        <span
+          className={twMerge(
+            'w-full truncate text-ssm font-normal leading-4 text-neutral-subtle',
+            option.isDisabled && 'text-neutral-disabled'
+          )}
+        >
+          {option.message ?? option.disabledReason}
+        </span>
+      )}
+    </DropdownMenu.Item>
+  )
+}
+
+function VersionOptions({
+  service,
+  value,
+  onChange,
+}: {
+  service: DeployByVersionService
+  value: string
+  onChange: (version: string) => void
+}) {
+  return service.versions.map((option) => (
+    <VersionOptionButton
+      key={option.value}
+      option={option}
+      isGit={service.sourceType === 'git'}
+      selected={option.value === value}
+      onChange={onChange}
+    />
+  ))
+}
+
+function VersionSelector({
+  service,
+  value,
+  selected,
+  disabled,
+  onChange,
+}: {
+  service: DeployByVersionService
+  value: string
+  selected: boolean
+  disabled: boolean
+  onChange: (version: string) => void
+}) {
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger asChild>
+        <Button
+          type="button"
+          size="xs"
+          color="neutral"
+          variant="outline"
+          disabled={disabled}
+          aria-label={`Select a version for ${service.name}`}
+          className={twMerge('group justify-between', selected && 'border-brand-subtle')}
+        >
+          <Version service={service} value={value} latest={value === getFirstDeployableVersion(service)?.value} />
+          <Icon
+            iconName="chevron-down"
+            className="shrink-0 text-ssm transition-transform duration-200 ease-[cubic-bezier(0.87,_0,_0.13,_1)] group-data-[state=open]:rotate-180"
+          />
+        </Button>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content
+        align="end"
+        data-testid="version-options"
+        className="z-dropdown max-h-[248px] w-80 gap-0 overflow-y-auto overflow-x-hidden overscroll-contain rounded-md p-0"
+      >
+        <VersionOptions service={service} value={value} onChange={onChange} />
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  )
+}
+
+export function ServiceVersionRow({
+  service,
+  selection,
+  onToggle,
+  onVersionChange,
+}: {
+  service: DeployByVersionService
+  selection: ServiceVersionSelections[string]
+  onToggle: () => void
+  onVersionChange: (version: string) => void
+}) {
+  const hasVersions = Boolean(getFirstDeployableVersion(service))
+  const disabled = service.isSkipped || !hasVersions
+  const tooltip = service.isSkipped
+    ? 'This service is skipped and cannot be deployed at environment level.'
+    : service.hasVersionError
+      ? 'Versions could not be loaded for this service.'
+      : 'No versions are available for this service.'
+
+  return (
+    <Tooltip content={tooltip} disabled={!disabled}>
+      <li
+        data-testid="service-version-row"
+        className={twMerge(
+          'flex min-h-[53px] items-center gap-3 border border-b-0 border-neutral p-4 last:border-b',
+          'first:rounded-t-md last:rounded-b-md',
+          selection.selected && !disabled && 'bg-surface-brand-subtle',
+          disabled && 'opacity-50'
+        )}
+      >
+        <label
+          htmlFor={`deploy-service-${service.id}`}
+          className="flex min-w-0 flex-1 cursor-pointer items-center gap-4"
+        >
+          <Checkbox
+            id={`deploy-service-${service.id}`}
+            checked={selection.selected}
+            disabled={disabled}
+            onCheckedChange={(checked) => checked !== 'indeterminate' && onToggle()}
+          />
+          <span className="flex min-w-0 items-center gap-2">
+            <VersionServiceAvatar service={service} />
+            <span className="min-w-0 text-sm font-medium text-neutral">
+              <Truncate truncateLimit={28} text={service.name} />
+            </span>
+          </span>
+        </label>
+
+        <div className="flex shrink-0 items-center gap-2">
+          <span
+            className={twMerge(
+              'flex h-6 items-center rounded border border-neutral bg-surface-neutral px-1.5 text-neutral',
+              selection.selected && !disabled && 'border-brand-subtle'
+            )}
+          >
+            <Version
+              service={service}
+              value={service.currentVersion}
+              latest={service.currentVersion === getFirstDeployableVersion(service)?.value}
+            />
+          </span>
+          <Icon iconName="arrow-right" className="text-ssm text-neutral-subtle" />
+          <VersionSelector
+            service={service}
+            value={selection.version}
+            selected={selection.selected}
+            disabled={disabled}
+            onChange={onVersionChange}
+          />
+        </div>
+      </li>
+    </Tooltip>
+  )
+}
diff --git a/libs/domains/environments/feature/src/lib/deploy-by-version-modal/use-deploy-by-version-services.ts b/libs/domains/environments/feature/src/lib/deploy-by-version-modal/use-deploy-by-version-services.ts
new file mode 100644
index 00000000000..90c68554ee1
--- /dev/null
+++ b/libs/domains/environments/feature/src/lib/deploy-by-version-modal/use-deploy-by-version-services.ts
@@ -0,0 +1,150 @@
+import { useQueries, useQuery } from '@tanstack/react-query'
+import { useMemo } from 'react'
+import { match } from 'ts-pattern'
+import { queries } from '@qovery/state/util-queries'
+import { useListDeploymentStages } from '../hooks/use-list-deployment-stages/use-list-deployment-stages'
+import {
+  type ContainerVersionedService,
+  type DeployByVersionService,
+  type GitVersionedService,
+  type HelmRepositoryVersionedService,
+  type VersionedService,
+  commitsToVersionOptions,
+  containerVersionsToOptions,
+  toVersionedService,
+  versionsToOptions,
+} from './deploy-by-version'
+
+interface UseDeployByVersionServicesProps {
+  environmentId: string
+  organizationId: string
+}
+
+const queryOptions = {
+  staleTime: 3 * 60 * 1000,
+  retry: false,
+  retryOnMount: true,
+  refetchOnWindowFocus: false,
+} as const
+
+function isGitService(service: VersionedService): service is GitVersionedService {
+  return service.sourceType === 'git'
+}
+
+function isContainerService(service: VersionedService): service is ContainerVersionedService {
+  return service.sourceType === 'container'
+}
+
+function isHelmRepositoryService(service: VersionedService): service is HelmRepositoryVersionedService {
+  return service.sourceType === 'helm-repository'
+}
+
+export function useDeployByVersionServices({ environmentId, organizationId }: UseDeployByVersionServicesProps) {
+  const servicesQuery = useQuery({
+    ...queries.services.list(environmentId),
+    refetchOnWindowFocus: false,
+  })
+  const deploymentStagesQuery = useListDeploymentStages({ environmentId })
+
+  const versionedServices = useMemo(
+    () => servicesQuery.data?.map(toVersionedService).filter((service) => service !== undefined) ?? [],
+    [servicesQuery.data]
+  )
+  const gitServices = versionedServices.filter(isGitService)
+  const containerServices = versionedServices.filter(isContainerService)
+  const helmRepositoryServices = versionedServices.filter(isHelmRepositoryService)
+
+  const gitQueries = useQueries({
+    queries: gitServices.map((service) => ({
+      ...match(service.serviceType)
+        .with('HELM', () => queries.services.listCommits({ serviceId: service.id, serviceType: 'HELM', of: 'chart' }))
+        .with('APPLICATION', () => queries.services.listCommits({ serviceId: service.id, serviceType: 'APPLICATION' }))
+        .with('JOB', () => queries.services.listCommits({ serviceId: service.id, serviceType: 'JOB' }))
+        .with('TERRAFORM', () => queries.services.listCommits({ serviceId: service.id, serviceType: 'TERRAFORM' }))
+        .exhaustive(),
+      ...queryOptions,
+    })),
+  })
+
+  const containerQueries = useQueries({
+    queries: containerServices.map(({ containerRegistryId, imageName }) => ({
+      ...queries.organizations.containerVersions({ organizationId, containerRegistryId, imageName }),
+      ...queryOptions,
+    })),
+  })
+
+  const helmRepositoryQueries = useQueries({
+    queries: helmRepositoryServices.map(({ helmRepositoryId, chartName }) => ({
+      ...queries.serviceHelm.helmCharts({ organizationId, helmRepositoryId, chartName }),
+      ...queryOptions,
+    })),
+  })
+
+  const data = useMemo<DeployByVersionService[]>(() => {
+    const skippedServiceIds = new Set(
+      deploymentStagesQuery.data?.flatMap(({ services = [] }) =>
+        services.filter(({ is_skipped }) => is_skipped).map(({ service_id }) => service_id)
+      ) ?? []
+    )
+
+    const gitResults = new Map(gitServices.map((service, index) => [service.id, gitQueries[index]]))
+    const containerResults = new Map(containerServices.map((service, index) => [service.id, containerQueries[index]]))
+    const helmResults = new Map(
+      helmRepositoryServices.map((service, index) => [service.id, helmRepositoryQueries[index]])
+    )
+
+    return versionedServices.map((service): DeployByVersionService => {
+      const result = match(service)
+        .with({ sourceType: 'git' }, ({ id }) => {
+          const query = gitResults.get(id)
+          return {
+            versions: commitsToVersionOptions(query?.data ?? []),
+            hasVersionError: query?.isError,
+          }
+        })
+        .with({ sourceType: 'container' }, ({ id, imageName }) => {
+          const query = containerResults.get(id)
+          const versions = query?.data?.find(({ image_name }) => image_name === imageName)?.versions ?? []
+          return {
+            versions: containerVersionsToOptions(versions),
+            hasVersionError: query?.isError,
+          }
+        })
+        .with({ sourceType: 'helm-repository' }, ({ id, chartName }) => {
+          const query = helmResults.get(id)
+          const versions = query?.data?.find(({ chart_name }) => chart_name === chartName)?.versions ?? []
+          return {
+            versions: versionsToOptions(versions),
+            hasVersionError: query?.isError,
+          }
+        })
+        .exhaustive()
+
+      return {
+        ...service,
+        ...result,
+        isSkipped: skippedServiceIds.has(service.id),
+      }
+    })
+  }, [
+    containerQueries,
+    containerServices,
+    deploymentStagesQuery.data,
+    gitQueries,
+    gitServices,
+    helmRepositoryQueries,
+    helmRepositoryServices,
+    versionedServices,
+  ])
+
+  return {
+    data,
+    isLoading:
+      servicesQuery.isLoading ||
+      deploymentStagesQuery.isLoading ||
+      gitQueries.some(({ isLoading }) => isLoading) ||
+      containerQueries.some(({ isLoading }) => isLoading) ||
+      helmRepositoryQueries.some(({ isLoading }) => isLoading),
+    isError: servicesQuery.isError || deploymentStagesQuery.isError,
+  }
+}
diff --git a/libs/domains/environments/feature/src/lib/environment-action-toolbar/__snapshots__/environment-action-toolbar.spec.tsx.snap b/libs/domains/environments/feature/src/lib/environment-action-toolbar/__snapshots__/environment-action-toolbar.spec.tsx.snap
index a72dfac10e4..33dadd0fb80 100644
--- a/libs/domains/environments/feature/src/lib/environment-action-toolbar/__snapshots__/environment-action-toolbar.spec.tsx.snap
+++ b/libs/domains/environments/feature/src/lib/environment-action-toolbar/__snapshots__/environment-action-toolbar.spec.tsx.snap
@@ -173,9 +173,9 @@ exports[`EnvironmentActionToolbar should match manage deployment snapshot 1`] =
       >
         <i
           aria-hidden="true"
-          class="fa-regular fa-rotate text-sm mr-2 min-w-5 text-brand"
+          class="fa-regular fa-code-branch text-sm mr-2 min-w-5 text-brand"
         />
-        Deploy latest version for..
+        Deploy by version
       </div>
     </div>
   </div>
diff --git a/libs/domains/environments/feature/src/lib/environment-action-toolbar/environment-action-toolbar.spec.tsx b/libs/domains/environments/feature/src/lib/environment-action-toolbar/environment-action-toolbar.spec.tsx
index aea59ed2cae..1ef70fe862f 100644
--- a/libs/domains/environments/feature/src/lib/environment-action-toolbar/environment-action-toolbar.spec.tsx
+++ b/libs/domains/environments/feature/src/lib/environment-action-toolbar/environment-action-toolbar.spec.tsx
@@ -149,6 +149,22 @@ describe('EnvironmentActionToolbar', () => {
     expect(mockOpenModalConfirmation).not.toHaveBeenCalled()
   })
 
+  it('should open deploy by version with the fake-modal option so the dropdown is not scroll-locked', async () => {
+    const { userEvent } = renderWithProviders(<EnvironmentActionToolbar environment={mockEnvironment} />)
+
+    await userEvent.click(screen.getByLabelText(/manage deployment/i))
+    await userEvent.click(screen.getByRole('menuitem', { name: /deploy by version/i }))
+
+    expect(mockOpenModal).toHaveBeenCalledWith(
+      expect.objectContaining({
+        options: expect.objectContaining({
+          fakeModal: true,
+          width: 676,
+        }),
+      })
+    )
+  })
+
   it('should disable manage deployment when the environment has no services', async () => {
     mockServices = []
 
diff --git a/libs/domains/environments/feature/src/lib/environment-action-toolbar/environment-action-toolbar.tsx b/libs/domains/environments/feature/src/lib/environment-action-toolbar/environment-action-toolbar.tsx
index 382625e2250..56fb578ea28 100644
--- a/libs/domains/environments/feature/src/lib/environment-action-toolbar/environment-action-toolbar.tsx
+++ b/libs/domains/environments/feature/src/lib/environment-action-toolbar/environment-action-toolbar.tsx
@@ -12,7 +12,7 @@ import { isArgoCd, isEditableService } from '@qovery/domains/services/data-acces
 // eslint-disable-next-line @nx/enforce-module-boundaries
 import { useServices } from '@qovery/domains/services/feature'
 import { useVariables } from '@qovery/domains/variables/feature'
-import { ENVIRONMENT_LOGS_URL, ENVIRONMENT_STAGES_URL, OVERVIEW_URL } from '@qovery/shared/routes'
+import { OVERVIEW_URL } from '@qovery/shared/routes'
 import { Button, DropdownMenu, Icon, Link, Skeleton, Tooltip, useModal, useModalConfirmation } from '@qovery/shared/ui'
 import { useCopyToClipboard } from '@qovery/shared/util-hooks'
 import {
@@ -23,6 +23,7 @@ import {
   isStopAvailable,
 } from '@qovery/shared/util-js'
 import { CreateCloneEnvironmentModal } from '../create-clone-environment-modal/create-clone-environment-modal'
+import { DeployByVersionModal } from '../deploy-by-version-modal/deploy-by-version-modal'
 import { useCancelDeploymentEnvironment } from '../hooks/use-cancel-deployment-environment/use-cancel-deployment-environment'
 import { useDeleteEnvironment } from '../hooks/use-delete-environment/use-delete-environment'
 import { useDeployEnvironment } from '../hooks/use-deploy-environment/use-deploy-environment'
@@ -31,7 +32,6 @@ import { useEnvironmentServices } from '../hooks/use-environment-services/use-en
 import { useStopEnvironment } from '../hooks/use-stop-environment/use-stop-environment'
 import useUninstallEnvironment from '../hooks/use-uninstall-environment/use-uninstall-environment'
 import { TerraformExportModal } from '../terraform-export-modal/terraform-export-modal'
-import { UpdateAllModal } from '../update-all-modal/update-all-modal'
 
 type ActionToolbarVariant = 'default' | 'header'
 const NAMESPACE_VARIABLE_NAME = 'QOVERY_KUBERNETES_NAMESPACE_NAME'
@@ -94,18 +94,25 @@ export function MenuManageDeployment({
   const { openModal } = useModal()
   const { openModalConfirmation } = useModalConfirmation()
 
-  const logsLink =
-    ENVIRONMENT_LOGS_URL(environment.organization.id, environment.project.id, environment.id) + ENVIRONMENT_STAGES_URL()
-
   const { mutate: deployEnvironment } = useDeployEnvironment({
+    organizationId: environment.organization.id,
+    projectId: environment.project.id,
+    environmentId: environment.id,
+  })
+  const { mutate: stopEnvironment } = useStopEnvironment({
+    organizationId: environment.organization.id,
+    projectId: environment.project.id,
+    environmentId: environment.id,
+  })
+  const { mutate: uninstallEnvironment } = useUninstallEnvironment({
+    organizationId: environment.organization.id,
     projectId: environment.project.id,
-    logsLink,
+    environmentId: environment.id,
   })
-  const { mutate: stopEnvironment } = useStopEnvironment({ projectId: environment.project.id, logsLink })
-  const { mutate: uninstallEnvironment } = useUninstallEnvironment({ projectId: environment.project.id, logsLink })
   const { mutate: cancelDeploymentEnvironment } = useCancelDeploymentEnvironment({
+    organizationId: environment.organization.id,
     projectId: environment.project.id,
-    logsLink,
+    environmentId: environment.id,
   })
   // XXX: Required to display a warning for managed Database
   // https://qovery.atlassian.net/jira/software/projects/FRT/boards/23?selectedIssue=FRT-1416
@@ -177,10 +184,11 @@ export function MenuManageDeployment({
     })
   }
 
-  const openUpdateAllModal = () => {
+  const openDeployByVersionModal = () => {
     openModal({
-      content: <UpdateAllModal environment={environment} />,
+      content: <DeployByVersionModal environment={environment} />,
       options: {
+        fakeModal: true,
         width: 676,
       },
     })
@@ -283,8 +291,8 @@ export function MenuManageDeployment({
           .otherwise(() => (
             <>
               <DropdownMenu.Separator />
-              <DropdownMenu.Item icon={<Icon iconName="rotate" />} onSelect={openUpdateAllModal}>
-                Deploy latest version for..
+              <DropdownMenu.Item icon={<Icon iconName="code-branch" />} onSelect={openDeployByVersionModal}>
+                Deploy by version
               </DropdownMenu.Item>
             </>
           ))}
diff --git a/libs/domains/environments/feature/src/lib/environment-deployment-list/dropdown-services/dropdown-services.tsx b/libs/domains/environments/feature/src/lib/environment-deployment-list/dropdown-services/dropdown-services.tsx
index c49ae235b1c..b61b9362d62 100644
--- a/libs/domains/environments/feature/src/lib/environment-deployment-list/dropdown-services/dropdown-services.tsx
+++ b/libs/domains/environments/feature/src/lib/environment-deployment-list/dropdown-services/dropdown-services.tsx
@@ -15,7 +15,6 @@ import { type AnyService } from '@qovery/domains/services/data-access'
 // eslint-disable-next-line @nx/enforce-module-boundaries
 import { ServiceAvatar } from '@qovery/domains/services/feature'
 import { DevopsCopilotContext } from '@qovery/shared/devops-copilot/context'
-import { ENVIRONMENT_LOGS_URL, ENVIRONMENT_STAGES_URL } from '@qovery/shared/routes'
 import { Indicator, StageStatusChip, StatusChip, Tooltip, TriggerActionIcon, Truncate } from '@qovery/shared/ui'
 import { Icon } from '@qovery/shared/ui'
 import { dateUTCString, formatDurationMinutesSeconds } from '@qovery/shared/util-dates'
@@ -271,13 +270,12 @@ export function DropdownServices({ environment, deploymentHistory, stages, size
                                 asChild
                               >
                                 <Link
-                                  to={
-                                    ENVIRONMENT_LOGS_URL(
-                                      environment.organization.id,
-                                      environment.project.id,
-                                      environment.id
-                                    ) + ENVIRONMENT_STAGES_URL()
-                                  }
+                                  to="/organization/$organizationId/project/$projectId/environment/$environmentId/deployments"
+                                  params={{
+                                    organizationId: environment.organization.id,
+                                    projectId: environment.project.id,
+                                    environmentId: environment.id,
+                                  }}
                                   onClick={(event) => {
                                     event.stopPropagation()
                                   }}
diff --git a/libs/domains/environments/feature/src/lib/environment-deployment-list/environment-deployment-list.tsx b/libs/domains/environments/feature/src/lib/environment-deployment-list/environment-deployment-list.tsx
index c3c1c75e7e4..018e14550d9 100644
--- a/libs/domains/environments/feature/src/lib/environment-deployment-list/environment-deployment-list.tsx
+++ b/libs/domains/environments/feature/src/lib/environment-deployment-list/environment-deployment-list.tsx
@@ -23,7 +23,6 @@ import { P, match } from 'ts-pattern'
 // Keep in mind for future refactoring if possible.
 // eslint-disable-next-line @nx/enforce-module-boundaries
 import { DevopsCopilotTroubleshootTrigger } from '@qovery/shared/devops-copilot/feature'
-import { ENVIRONMENT_LOGS_URL, ENVIRONMENT_STAGES_URL } from '@qovery/shared/routes'
 import {
   Button,
   CopyToClipboardButtonIcon,
@@ -79,16 +78,13 @@ export function EnvironmentDeploymentList() {
   })
   const { data: environment } = useEnvironment({ environmentId, suspense: true })
 
-  const logsLink =
-    ENVIRONMENT_LOGS_URL(environment?.organization.id, environment?.project.id, environment?.id) +
-    ENVIRONMENT_STAGES_URL()
-
   const { data: deploymentHistory = [] } = useDeploymentHistory({ environmentId, suspense: true })
   const { data: deploymentHistoryQueue = [] } = useDeploymentQueue({ environmentId, suspense: true })
 
   const { mutate: cancelDeploymentEnvironment } = useCancelDeploymentEnvironment({
+    organizationId: environment?.organization.id ?? '',
     projectId: environment?.project.id ?? '',
-    logsLink,
+    environmentId,
   })
   const { mutate: cancelDeploymentQueueService } = useCancelDeploymentQueueEnvironment({
     environmentId,
diff --git a/libs/domains/environments/feature/src/lib/environment-last-deployment-section/environment-last-deployment-section.tsx b/libs/domains/environments/feature/src/lib/environment-last-deployment-section/environment-last-deployment-section.tsx
index f4923313785..143b1f51465 100644
--- a/libs/domains/environments/feature/src/lib/environment-last-deployment-section/environment-last-deployment-section.tsx
+++ b/libs/domains/environments/feature/src/lib/environment-last-deployment-section/environment-last-deployment-section.tsx
@@ -1,4 +1,4 @@
-import { useLinkProps, useParams } from '@tanstack/react-router'
+import { useParams } from '@tanstack/react-router'
 import posthog from 'posthog-js'
 import { Suspense, useContext, useMemo } from 'react'
 import { P, match } from 'ts-pattern'
@@ -88,15 +88,7 @@ const EnvironmentLastDeploymentContent = () => {
     ? ''
     : `${timeAgo(new Date(lastDeployment.auditing_data.created_at))} ago`
 
-  const logsLink = useLinkProps({
-    to: '/organization/$organizationId/project/$projectId/environment/$environmentId/deployments',
-    params: { organizationId, projectId, environmentId },
-  })
-
-  const { mutate: deployEnvironment } = useDeployEnvironment({
-    projectId,
-    logsLink: logsLink.href,
-  })
+  const { mutate: deployEnvironment } = useDeployEnvironment({ organizationId, projectId, environmentId })
 
   const handleDeploy = () => {
     if (!environment?.id) return
diff --git a/libs/domains/environments/feature/src/lib/hooks/use-cancel-deployment-environment/use-cancel-deployment-environment.ts b/libs/domains/environments/feature/src/lib/hooks/use-cancel-deployment-environment/use-cancel-deployment-environment.ts
index df0e67ec633..b310d716659 100644
--- a/libs/domains/environments/feature/src/lib/hooks/use-cancel-deployment-environment/use-cancel-deployment-environment.ts
+++ b/libs/domains/environments/feature/src/lib/hooks/use-cancel-deployment-environment/use-cancel-deployment-environment.ts
@@ -1,11 +1,20 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query'
-import { useNavigate } from '@tanstack/react-router'
+import { type EnvironmentStatus } from 'qovery-typescript-axios'
 import { mutations } from '@qovery/domains/environments/data-access'
 import { queries } from '@qovery/state/util-queries'
+import { useNavigateToEnvironmentPipeline } from '../use-navigate-to-environment-pipeline/use-navigate-to-environment-pipeline'
 
-export function useCancelDeploymentEnvironment({ projectId, logsLink }: { projectId: string; logsLink?: string }) {
+export function useCancelDeploymentEnvironment({
+  organizationId,
+  projectId,
+  environmentId,
+}: {
+  organizationId: string
+  projectId: string
+  environmentId: string
+}) {
   const queryClient = useQueryClient()
-  const navigate = useNavigate()
+  const navigateToEnvironmentPipeline = useNavigateToEnvironmentPipeline()
 
   return useMutation(mutations.cancelDeploymentEnvironment, {
     onSuccess(_, { environmentId }) {
@@ -21,14 +30,13 @@ export function useCancelDeploymentEnvironment({ projectId, logsLink }: { projec
       })
     },
     meta: {
-      notifyOnSuccess: {
-        title: 'Your environment deployment is cancelling',
-        ...(logsLink
-          ? {
-              labelAction: 'See deployment logs',
-              callback: () => navigate({ to: logsLink }),
-            }
-          : {}),
+      notifyOnSuccess(data: unknown) {
+        const { last_deployment_id: deploymentId } = data as EnvironmentStatus
+        return {
+          title: 'Your environment deployment is cancelling',
+          labelAction: 'See pipeline',
+          callback: () => navigateToEnvironmentPipeline({ organizationId, projectId, environmentId, deploymentId }),
+        }
       },
       notifyOnError: true,
     },
diff --git a/libs/domains/environments/feature/src/lib/hooks/use-delete-environment/use-delete-environment.ts b/libs/domains/environments/feature/src/lib/hooks/use-delete-environment/use-delete-environment.ts
index c52d70772f4..32327a47365 100644
--- a/libs/domains/environments/feature/src/lib/hooks/use-delete-environment/use-delete-environment.ts
+++ b/libs/domains/environments/feature/src/lib/hooks/use-delete-environment/use-delete-environment.ts
@@ -1,11 +1,9 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query'
-import { useNavigate } from '@tanstack/react-router'
 import { mutations } from '@qovery/domains/environments/data-access'
 import { queries } from '@qovery/state/util-queries'
 
-export function useDeleteEnvironment({ projectId, logsLink }: { projectId: string; logsLink?: string }) {
+export function useDeleteEnvironment({ projectId }: { projectId: string }) {
   const queryClient = useQueryClient()
-  const navigate = useNavigate()
 
   return useMutation(mutations.deleteEnvironment, {
     onSuccess() {
@@ -22,12 +20,6 @@ export function useDeleteEnvironment({ projectId, logsLink }: { projectId: strin
     meta: {
       notifyOnSuccess: {
         title: 'Your environment is being deleted',
-        ...(logsLink
-          ? {
-              labelAction: 'See deployment logs',
-              callback: () => navigate({ to: logsLink }),
-            }
-          : {}),
       },
       notifyOnError: true,
     },
diff --git a/libs/domains/environments/feature/src/lib/hooks/use-deploy-all-services/use-deploy-all-services.spec.ts b/libs/domains/environments/feature/src/lib/hooks/use-deploy-all-services/use-deploy-all-services.spec.ts
new file mode 100644
index 00000000000..e8bd07b350b
--- /dev/null
+++ b/libs/domains/environments/feature/src/lib/hooks/use-deploy-all-services/use-deploy-all-services.spec.ts
@@ -0,0 +1,54 @@
+import { environmentFactoryMock } from '@qovery/shared/factories'
+import { renderHook } from '@qovery/shared/util-tests'
+import { queries } from '@qovery/state/util-queries'
+import { useDeployAllServices } from './use-deploy-all-services'
+
+const mockInvalidateQueries = jest.fn()
+const mockUseMutation = jest.fn()
+
+interface MutationOptions {
+  onSuccess: (
+    data: unknown,
+    variables: {
+      environment: ReturnType<typeof environmentFactoryMock>[number]
+      payload: { terraforms: { id: string; git_commit_id: string }[] }
+    }
+  ) => void
+}
+
+let mockMutationOptions: MutationOptions
+
+jest.mock('@tanstack/react-query', () => ({
+  ...jest.requireActual('@tanstack/react-query'),
+  useMutation: (...args: unknown[]) => mockUseMutation(...args),
+  useQueryClient: () => ({ invalidateQueries: mockInvalidateQueries }),
+}))
+
+jest.mock('@tanstack/react-router', () => ({
+  ...jest.requireActual('@tanstack/react-router'),
+  useNavigate: () => jest.fn(),
+}))
+
+describe('useDeployAllServices', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockUseMutation.mockImplementation((_mutation: unknown, options: MutationOptions) => {
+      mockMutationOptions = options
+      return {}
+    })
+  })
+
+  it('invalidates Terraform details after a successful deployment', () => {
+    const environment = environmentFactoryMock(1)[0]
+    renderHook(() => useDeployAllServices())
+
+    mockMutationOptions.onSuccess(undefined, {
+      environment,
+      payload: { terraforms: [{ id: 'terraform-1', git_commit_id: 'commit-1' }] },
+    })
+
+    expect(mockInvalidateQueries).toHaveBeenCalledWith({
+      queryKey: queries.services.details({ serviceId: 'terraform-1', serviceType: 'TERRAFORM' }).queryKey,
+    })
+  })
+})
diff --git a/libs/domains/environments/feature/src/lib/hooks/use-deploy-all-services/use-deploy-all-services.ts b/libs/domains/environments/feature/src/lib/hooks/use-deploy-all-services/use-deploy-all-services.ts
index 3bf3640f3aa..4b81e02a627 100644
--- a/libs/domains/environments/feature/src/lib/hooks/use-deploy-all-services/use-deploy-all-services.ts
+++ b/libs/domains/environments/feature/src/lib/hooks/use-deploy-all-services/use-deploy-all-services.ts
@@ -1,14 +1,14 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query'
-import { useNavigate } from '@tanstack/react-router'
+import { type EnvironmentStatus } from 'qovery-typescript-axios'
 import { mutations } from '@qovery/domains/services/data-access'
-import { ENVIRONMENT_LOGS_URL } from '@qovery/shared/routes'
 import { queries } from '@qovery/state/util-queries'
+import { useNavigateToEnvironmentPipeline } from '../use-navigate-to-environment-pipeline/use-navigate-to-environment-pipeline'
 
 // XXX: Duplicate with the one in the Services domain
 // Necessary to avoid circular dependencies
 export function useDeployAllServices() {
   const queryClient = useQueryClient()
-  const navigate = useNavigate()
+  const navigateToEnvironmentPipeline = useNavigateToEnvironmentPipeline()
 
   return useMutation(mutations.deployAllServices, {
     onSuccess(_, { environment, payload }) {
@@ -45,9 +45,17 @@ export function useDeployAllServices() {
           })
         }
       }
+      for (const { id: serviceId } of payload.terraforms ?? []) {
+        if (serviceId) {
+          queryClient.invalidateQueries({
+            queryKey: queries.services.details({ serviceId, serviceType: 'TERRAFORM' }).queryKey,
+          })
+        }
+      }
     },
     meta: {
-      notifyOnSuccess(_: unknown, variables: unknown) {
+      notifyOnSuccess(data: unknown, variables: unknown) {
+        const { last_deployment_id: deploymentId } = data as EnvironmentStatus
         const {
           environment: {
             id: environmentId,
@@ -56,13 +64,9 @@ export function useDeployAllServices() {
           },
         } = variables as Parameters<typeof mutations.deployAllServices>[0]
         return {
-          title: 'Your services are being updated',
-          labelAction: 'See deployment logs',
-          callback() {
-            navigate({
-              to: ENVIRONMENT_LOGS_URL(organizationId, projectId, environmentId),
-            })
-          },
+          title: 'Your services are being deployed',
+          labelAction: 'See pipeline',
+          callback: () => navigateToEnvironmentPipeline({ organizationId, projectId, environmentId, deploymentId }),
         }
       },
       notifyOnError: true,
diff --git a/libs/domains/environments/feature/src/lib/hooks/use-deploy-environment/use-deploy-environment.ts b/libs/domains/environments/feature/src/lib/hooks/use-deploy-environment/use-deploy-environment.ts
index bc528ccbd24..0a7c6bb8416 100644
--- a/libs/domains/environments/feature/src/lib/hooks/use-deploy-environment/use-deploy-environment.ts
+++ b/libs/domains/environments/feature/src/lib/hooks/use-deploy-environment/use-deploy-environment.ts
@@ -1,11 +1,20 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query'
-import { useNavigate } from '@tanstack/react-router'
+import { type Status } from 'qovery-typescript-axios'
 import { mutations } from '@qovery/domains/environments/data-access'
 import { queries } from '@qovery/state/util-queries'
+import { useNavigateToEnvironmentPipeline } from '../use-navigate-to-environment-pipeline/use-navigate-to-environment-pipeline'
 
-export function useDeployEnvironment({ projectId, logsLink }: { projectId: string; logsLink?: string }) {
+export function useDeployEnvironment({
+  organizationId,
+  projectId,
+  environmentId,
+}: {
+  organizationId: string
+  projectId: string
+  environmentId: string
+}) {
   const queryClient = useQueryClient()
-  const navigate = useNavigate()
+  const navigateToEnvironmentPipeline = useNavigateToEnvironmentPipeline()
 
   return useMutation(mutations.deployEnvironment, {
     onSuccess(_, { environmentId }) {
@@ -21,14 +30,13 @@ export function useDeployEnvironment({ projectId, logsLink }: { projectId: strin
       })
     },
     meta: {
-      notifyOnSuccess: {
-        title: 'Your environment is redeploying',
-        ...(logsLink
-          ? {
-              labelAction: 'See deployment logs',
-              callback: () => navigate({ to: logsLink }),
-            }
-          : {}),
+      notifyOnSuccess(data: unknown) {
+        const { execution_id: deploymentId } = data as Status
+        return {
+          title: 'Your environment is redeploying',
+          labelAction: 'See pipeline',
+          callback: () => navigateToEnvironmentPipeline({ organizationId, projectId, environmentId, deploymentId }),
+        }
       },
       notifyOnError: true,
     },
diff --git a/libs/domains/environments/feature/src/lib/hooks/use-navigate-to-environment-pipeline/get-latest-environment-deployment-id.ts b/libs/domains/environments/feature/src/lib/hooks/use-navigate-to-environment-pipeline/get-latest-environment-deployment-id.ts
new file mode 100644
index 00000000000..723b0bfa559
--- /dev/null
+++ b/libs/domains/environments/feature/src/lib/hooks/use-navigate-to-environment-pipeline/get-latest-environment-deployment-id.ts
@@ -0,0 +1,40 @@
+import { type QueryClient } from '@tanstack/react-query'
+import { queries } from '@qovery/state/util-queries'
+
+export function isEnvironmentVersionedId(deploymentId?: string | null) {
+  // Environment mutation responses can contain a VersionedId for the environment itself,
+  // which is not the execution ID expected by the pipeline route.
+  return Boolean(deploymentId && /^VersionedId\(id=.+, version=\d+\)$/.test(deploymentId))
+}
+
+function getUsableEnvironmentExecutionId(deploymentId?: string | null) {
+  if (!deploymentId || isEnvironmentVersionedId(deploymentId)) return undefined
+
+  return deploymentId
+}
+
+export async function getLatestEnvironmentDeploymentId(
+  queryClient: QueryClient,
+  environmentId: string,
+  deploymentId?: string | null
+) {
+  const usableDeploymentId = getUsableEnvironmentExecutionId(deploymentId)
+  if (usableDeploymentId) return usableDeploymentId
+
+  try {
+    const deployments = await queryClient.fetchQuery({
+      ...queries.environments.deploymentHistoryV2({ environmentId, pageSize: 100 }),
+      staleTime: 0,
+    })
+
+    const latestDeploymentId = [...(deployments ?? [])].sort(
+      (a, b) => new Date(b.auditing_data.created_at).getTime() - new Date(a.auditing_data.created_at).getTime()
+    )[0]?.identifier.execution_id
+
+    if (latestDeploymentId) return getUsableEnvironmentExecutionId(latestDeploymentId)
+  } catch {
+    // Deployment history may be temporarily unavailable.
+  }
+
+  return undefined
+}
diff --git a/libs/domains/environments/feature/src/lib/hooks/use-navigate-to-environment-pipeline/use-navigate-to-environment-pipeline.ts b/libs/domains/environments/feature/src/lib/hooks/use-navigate-to-environment-pipeline/use-navigate-to-environment-pipeline.ts
new file mode 100644
index 00000000000..df35810f49f
--- /dev/null
+++ b/libs/domains/environments/feature/src/lib/hooks/use-navigate-to-environment-pipeline/use-navigate-to-environment-pipeline.ts
@@ -0,0 +1,43 @@
+import { useQueryClient } from '@tanstack/react-query'
+import { useNavigate } from '@tanstack/react-router'
+import { toast } from '@qovery/shared/ui'
+import { getLatestEnvironmentDeploymentId, isEnvironmentVersionedId } from './get-latest-environment-deployment-id'
+
+interface NavigateToEnvironmentPipelineProps {
+  organizationId: string
+  projectId: string
+  environmentId: string
+  deploymentId?: string | null
+}
+
+const PIPELINE_LOOKUP_ATTEMPTS = 4
+const PIPELINE_LOOKUP_RETRY_DELAY_MS = 500
+
+export function useNavigateToEnvironmentPipeline() {
+  const queryClient = useQueryClient()
+  const navigate = useNavigate()
+
+  return async ({ organizationId, projectId, environmentId, deploymentId }: NavigateToEnvironmentPipelineProps) => {
+    const waitForHistoryToCatchUp = isEnvironmentVersionedId(deploymentId)
+    let resolvedDeploymentId: string | undefined
+
+    for (let attempt = 0; attempt < PIPELINE_LOOKUP_ATTEMPTS; attempt++) {
+      resolvedDeploymentId = await getLatestEnvironmentDeploymentId(queryClient, environmentId, deploymentId)
+      if (resolvedDeploymentId && !waitForHistoryToCatchUp) break
+
+      if (attempt < PIPELINE_LOOKUP_ATTEMPTS - 1) {
+        await new Promise((resolve) => setTimeout(resolve, PIPELINE_LOOKUP_RETRY_DELAY_MS))
+      }
+    }
+
+    if (!resolvedDeploymentId) {
+      toast('warning', 'Pipeline is not available yet', 'Try again in a moment.')
+      return
+    }
+
+    await navigate({
+      to: '/organization/$organizationId/project/$projectId/environment/$environmentId/deployment/$deploymentId',
+      params: { organizationId, projectId, environmentId, deploymentId: resolvedDeploymentId },
+    })
+  }
+}
diff --git a/libs/domains/environments/feature/src/lib/hooks/use-outdated-services/use-outdated-services.ts b/libs/domains/environments/feature/src/lib/hooks/use-outdated-services/use-outdated-services.ts
deleted file mode 100644
index 5ca64996ca9..00000000000
--- a/libs/domains/environments/feature/src/lib/hooks/use-outdated-services/use-outdated-services.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { useQueries, useQuery } from '@tanstack/react-query'
-import { type Commit } from 'qovery-typescript-axios'
-import { P, match } from 'ts-pattern'
-import { type Application, type Job, isApplication, isJob } from '@qovery/domains/services/data-access'
-import { isJobGitSource } from '@qovery/shared/enums'
-import { unionTypeGuard } from '@qovery/shared/util-types'
-import { queries } from '@qovery/state/util-queries'
-
-export interface UseOutdatedServicesProps {
-  environmentId?: string
-}
-
-export type OutdatedService = (Application | Job) & { commits: Commit[] }
-
-export function useOutdatedServices({ environmentId }: UseOutdatedServicesProps) {
-  const { data: services = [], isLoading: isServicesLoading } = useQuery({
-    ...queries.services.list(environmentId!),
-    enabled: Boolean(environmentId),
-  })
-
-  const getGitRepository = (service: Application | Job) =>
-    match(service)
-      .with({ serviceType: 'APPLICATION' }, ({ git_repository }) => git_repository)
-      .with({ serviceType: 'JOB', source: P.when(isJobGitSource) }, ({ source }) => source.docker?.git_repository)
-      .otherwise(() => undefined)
-
-  const gitServices = services
-    .filter(unionTypeGuard([isApplication, isJob]))
-    .filter((service) => Boolean(getGitRepository(service)))
-  const queryResults = useQueries({
-    queries: gitServices.map(({ id, serviceType }) => ({
-      ...queries.services.listCommits({ serviceId: id, serviceType }),
-      staleTime: 3 * 60 * 1000, // 3 minutes - commit history doesn't change frequently
-      retry: false,
-      retryOnMount: false,
-      refetchOnWindowFocus: false,
-    })),
-  })
-
-  const outdatedServices: OutdatedService[] = []
-
-  for (let i = 0; i < queryResults.length; i++) {
-    const { data: commits = [] } = queryResults[i]
-    if (commits.length === 0) continue
-    const service = gitServices[i]
-    const gitRepository = getGitRepository(service)
-    if (gitRepository?.deployed_commit_id !== commits[0]?.git_commit_id) {
-      outdatedServices.push({
-        ...service,
-        commits,
-      })
-    }
-  }
-
-  return { data: outdatedServices, isLoading: queryResults.some(({ isLoading }) => isLoading) || isServicesLoading }
-}
-
-export default useOutdatedServices
diff --git a/libs/domains/environments/feature/src/lib/hooks/use-stop-environment/use-stop-environment.ts b/libs/domains/environments/feature/src/lib/hooks/use-stop-environment/use-stop-environment.ts
index 360c5a2e47e..caa2234f233 100644
--- a/libs/domains/environments/feature/src/lib/hooks/use-stop-environment/use-stop-environment.ts
+++ b/libs/domains/environments/feature/src/lib/hooks/use-stop-environment/use-stop-environment.ts
@@ -1,19 +1,22 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query'
-import { useNavigate } from '@tanstack/react-router'
+import { type EnvironmentStatus } from 'qovery-typescript-axios'
 import { mutations } from '@qovery/domains/environments/data-access'
 import { queries } from '@qovery/state/util-queries'
+import { useNavigateToEnvironmentPipeline } from '../use-navigate-to-environment-pipeline/use-navigate-to-environment-pipeline'
 
 export function useStopEnvironment({
+  organizationId,
   projectId,
-  logsLink,
+  environmentId,
   notifyOnSuccess = true,
 }: {
+  organizationId?: string
   projectId: string
-  logsLink?: string
+  environmentId?: string
   notifyOnSuccess?: boolean
 }) {
   const queryClient = useQueryClient()
-  const navigate = useNavigate()
+  const navigateToEnvironmentPipeline = useNavigateToEnvironmentPipeline()
 
   return useMutation(mutations.stopEnvironment, {
     onSuccess(_, { environmentId }) {
@@ -30,14 +33,18 @@ export function useStopEnvironment({
     },
     meta: {
       notifyOnSuccess: notifyOnSuccess
-        ? {
-            title: 'Your environment is being stopped',
-            ...(logsLink
-              ? {
-                  labelAction: 'See deployment logs',
-                  callback: () => navigate({ to: logsLink }),
-                }
-              : {}),
+        ? (data: unknown) => {
+            const { last_deployment_id: deploymentId } = data as EnvironmentStatus
+            return {
+              title: 'Your environment is being stopped',
+              ...(organizationId && environmentId
+                ? {
+                    labelAction: 'See pipeline',
+                    callback: () =>
+                      navigateToEnvironmentPipeline({ organizationId, projectId, environmentId, deploymentId }),
+                  }
+                : {}),
+            }
           }
         : false,
       notifyOnError: true,
diff --git a/libs/domains/environments/feature/src/lib/hooks/use-uninstall-environment/use-uninstall-environment.ts b/libs/domains/environments/feature/src/lib/hooks/use-uninstall-environment/use-uninstall-environment.ts
index d7ed7a345d3..f102d3539a7 100644
--- a/libs/domains/environments/feature/src/lib/hooks/use-uninstall-environment/use-uninstall-environment.ts
+++ b/libs/domains/environments/feature/src/lib/hooks/use-uninstall-environment/use-uninstall-environment.ts
@@ -1,11 +1,20 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query'
-import { useNavigate } from '@tanstack/react-router'
+import { type EnvironmentStatus } from 'qovery-typescript-axios'
 import { mutations } from '@qovery/domains/environments/data-access'
 import { queries } from '@qovery/state/util-queries'
+import { useNavigateToEnvironmentPipeline } from '../use-navigate-to-environment-pipeline/use-navigate-to-environment-pipeline'
 
-export function useUninstallEnvironment({ projectId, logsLink }: { projectId: string; logsLink?: string }) {
+export function useUninstallEnvironment({
+  organizationId,
+  projectId,
+  environmentId,
+}: {
+  organizationId: string
+  projectId: string
+  environmentId: string
+}) {
   const queryClient = useQueryClient()
-  const navigate = useNavigate()
+  const navigateToEnvironmentPipeline = useNavigateToEnvironmentPipeline()
 
   return useMutation(mutations.uninstallEnvironment, {
     onSuccess(_, { environmentId }) {
@@ -21,14 +30,13 @@ export function useUninstallEnvironment({ projectId, logsLink }: { projectId: st
       })
     },
     meta: {
-      notifyOnSuccess: {
-        title: 'Your environment is being uninstalled',
-        ...(logsLink
-          ? {
-              labelAction: 'See deployment logs',
-              callback: () => navigate({ to: logsLink }),
-            }
-          : {}),
+      notifyOnSuccess(data: unknown) {
+        const { last_deployment_id: deploymentId } = data as EnvironmentStatus
+        return {
+          title: 'Your environment is being uninstalled',
+          labelAction: 'See pipeline',
+          callback: () => navigateToEnvironmentPipeline({ organizationId, projectId, environmentId, deploymentId }),
+        }
       },
       notifyOnError: true,
     },
diff --git a/libs/domains/environments/feature/src/lib/need-redeploy-flag/need-redeploy-flag.spec.tsx b/libs/domains/environments/feature/src/lib/need-redeploy-flag/need-redeploy-flag.spec.tsx
index 01e90dcba72..5fe3b1b7b9a 100644
--- a/libs/domains/environments/feature/src/lib/need-redeploy-flag/need-redeploy-flag.spec.tsx
+++ b/libs/domains/environments/feature/src/lib/need-redeploy-flag/need-redeploy-flag.spec.tsx
@@ -6,14 +6,13 @@ import NeedRedeployFlag from './need-redeploy-flag'
 
 const useDeployEnvironmentSpy = jest.spyOn(useDeployEnvironmentImport, 'useDeployEnvironment') as jest.Mock
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
+jest.mock('@tanstack/react-router', () => ({
+  ...jest.requireActual('@tanstack/react-router'),
   useParams: () => ({
     organizationId: 'organization-id',
     projectId: 'project-id',
     environmentId: 'environment-id',
   }),
-  useNavigate: () => jest.fn(),
 }))
 
 describe('NeedRedeployFlag', () => {
diff --git a/libs/domains/environments/feature/src/lib/need-redeploy-flag/need-redeploy-flag.tsx b/libs/domains/environments/feature/src/lib/need-redeploy-flag/need-redeploy-flag.tsx
index 2ede0f64c10..44de9a9a56c 100644
--- a/libs/domains/environments/feature/src/lib/need-redeploy-flag/need-redeploy-flag.tsx
+++ b/libs/domains/environments/feature/src/lib/need-redeploy-flag/need-redeploy-flag.tsx
@@ -1,17 +1,17 @@
+import { useParams } from '@tanstack/react-router'
 import { EnvironmentDeploymentStatusEnum } from 'qovery-typescript-axios'
-import { useNavigate, useParams } from 'react-router-dom'
-import { ENVIRONMENT_LOGS_URL, ENVIRONMENT_STAGES_URL } from '@qovery/shared/routes'
 import { Banner } from '@qovery/shared/ui'
 import { useDeployEnvironment } from '../hooks/use-deploy-environment/use-deploy-environment'
 import { useDeploymentStatus } from '../hooks/use-deployment-status/use-deployment-status'
 
 export function NeedRedeployFlag() {
-  const { organizationId = '', projectId = '', environmentId = '' } = useParams()
-  const navigate = useNavigate()
+  const { organizationId = '', projectId = '', environmentId = '' } = useParams({ strict: false })
 
   const { data: environmentDeploymentStatus } = useDeploymentStatus({ environmentId })
   const { mutate: deployEnvironment } = useDeployEnvironment({
+    organizationId,
     projectId,
+    environmentId,
   })
 
   if (!environmentDeploymentStatus) return null
@@ -26,7 +26,6 @@ export function NeedRedeployFlag() {
 
   const mutationDeployEnvironment = () => {
     deployEnvironment({ environmentId })
-    navigate(ENVIRONMENT_LOGS_URL(organizationId, projectId, environmentId) + ENVIRONMENT_STAGES_URL())
   }
 
   return (
diff --git a/libs/domains/environments/feature/src/lib/settings-danger-zone/settings-danger-zone.tsx b/libs/domains/environments/feature/src/lib/settings-danger-zone/settings-danger-zone.tsx
index 394303c9a23..013efa45cd3 100644
--- a/libs/domains/environments/feature/src/lib/settings-danger-zone/settings-danger-zone.tsx
+++ b/libs/domains/environments/feature/src/lib/settings-danger-zone/settings-danger-zone.tsx
@@ -1,6 +1,6 @@
 import { useNavigate, useParams } from '@tanstack/react-router'
 import { type Environment } from 'qovery-typescript-axios'
-import { ENVIRONMENTS_GENERAL_URL, ENVIRONMENTS_URL, OVERVIEW_URL } from '@qovery/shared/routes'
+import { OVERVIEW_URL } from '@qovery/shared/routes'
 import { BlockContentDelete, Section } from '@qovery/shared/ui'
 import { useDeleteEnvironment } from '../hooks/use-delete-environment/use-delete-environment'
 import { useEnvironment } from '../hooks/use-environment/use-environment'
@@ -49,7 +49,6 @@ export function PageSettingsDangerZoneFeature() {
   const { data: environment } = useEnvironment({ environmentId })
   const { mutateAsync: deleteEnvironment } = useDeleteEnvironment({
     projectId,
-    logsLink: ENVIRONMENTS_URL(organizationId, projectId) + ENVIRONMENTS_GENERAL_URL,
   })
 
   return (
diff --git a/libs/domains/environments/feature/src/lib/update-all-modal/__snapshots__/update-all-modal.spec.tsx.snap b/libs/domains/environments/feature/src/lib/update-all-modal/__snapshots__/update-all-modal.spec.tsx.snap
deleted file mode 100644
index 032ac287df3..00000000000
--- a/libs/domains/environments/feature/src/lib/update-all-modal/__snapshots__/update-all-modal.spec.tsx.snap
+++ /dev/null
@@ -1,398 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`UpdateAllModal should reduce opacity of commit blocks 1`] = `
-<body>
-  <div>
-    <div
-      class="p-6"
-    >
-      <h2
-        class="h4 mb-1 max-w-sm truncate text-neutral"
-      >
-        Deploy latest version for..
-      </h2>
-      <p
-        class="mb-4 text-sm text-neutral-subtle"
-      >
-        Select the services you want to update to the latest version
-      </p>
-      <div
-        class="mb-4 flex items-center justify-between text-sm text-neutral"
-      >
-        <p>
-          For
-           
-          <strong
-            class="font-medium"
-          >
-            Barry Lyons
-          </strong>
-        </p>
-        <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 gap-x-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
-          data-testid="deselect-all"
-        >
-          Deselect All
-        </button>
-      </div>
-      <div
-        class="relative overflow-y-auto pr-[1px] max-h-[440px]"
-        data-testid="scroll-shadow-wrapper"
-      >
-        <div
-          class="pointer-events-none sticky top-0 z-overlay -mb-4 h-5 w-full bg-scroll-shadow-up transition-opacity duration-300 opacity-0"
-          data-testid="scroll-shadow-top"
-        />
-        <ul>
-          <li
-            class="flex justify-between border border-b-0 p-4 rounded-t cursor-pointer border-brand-strong bg-surface-brand-subtle"
-            data-testid="outdated-service-row"
-          >
-            <div
-              class="flex font-medium text-neutral"
-            >
-              <span
-                class="mr-4 flex items-center"
-              >
-                <button
-                  aria-checked="true"
-                  class="group inline-flex shrink-0 items-center justify-center h-4 w-4 rounded border border-neutral bg-surface-neutral transition-colors disabled:cursor-not-allowed disabled:border-neutral disabled:bg-surface-neutral-subtle disabled:hover:border-neutral disabled:data-[state=checked]:bg-surface-neutral-subtle disabled:data-[state=checked]:border-neutral disabled:data-[state=indeterminate]:border-neutral hover:border-brand-strong data-[state=checked]:bg-surface-brand-solid hover:data-[state=checked]:bg-surface-brand-solidHover data-[state=checked]:border-0 data-[state=indeterminate]:border-brand-strong"
-                  data-state="checked"
-                  role="checkbox"
-                  type="button"
-                  value="on"
-                >
-                  <span
-                    class="flex h-full w-full items-center justify-center"
-                    data-state="checked"
-                    style="pointer-events: none;"
-                  >
-                    <i
-                      aria-hidden="true"
-                      class="fa-regular fa-check text-xs text-neutralInvert group-disabled:text-neutral-disabled"
-                    />
-                  </span>
-                </button>
-              </span>
-              Amy Maxwell
-            </div>
-            <div
-              class="ml-auto flex items-center"
-            >
-              <div
-                class="flex items-center opacity-50"
-                data-testid="current-commit-block"
-              >
-                <span
-                  class="flex items-center justify-center rounded-full border border-neutral mr-2 h-7 w-7"
-                >
-                  <span
-                    class="flex items-center justify-center h-full w-full rounded-full h-full w-full"
-                  >
-                    <span
-                      class="flex h-full w-full items-center justify-center rounded-full bg-surface-neutral-subtle text-xs font-medium text-neutral"
-                    >
-                      U
-                    </span>
-                  </span>
-                </span>
-                <div
-                  class="block w-fit cursor-pointer"
-                  data-state="closed"
-                  data-testid="tag-commit"
-                >
-                  <span
-                    class="inline-flex items-center rounded text-xs font-bold h-7 px-2   flex items-center justify-center border font-medium bg-background w-[90px] border-neutral text-neutral-subtle hover:bg-surface-neutral-subtle"
-                    data-testid="tag"
-                  >
-                    <div
-                      class="mr-1 w-4"
-                    >
-                      <i
-                        aria-hidden="true"
-                        class="fa-regular fa-code-commit mr-1"
-                      />
-                    </div>
-                    commit0
-                  </span>
-                </div>
-              </div>
-              <i
-                aria-hidden="true"
-                class="fa-regular fa-arrow-left mx-2 -scale-100 text-neutral-subtle"
-              />
-              <div
-                class="flex items-center "
-                data-testid="last-commit-block"
-              >
-                <span
-                  class="flex items-center justify-center rounded-full border border-neutral mr-2 h-7 w-7"
-                >
-                  <span
-                    class="flex items-center justify-center h-full w-full rounded-full h-full w-full"
-                  >
-                    <span
-                      class="flex h-full w-full items-center justify-center rounded-full bg-surface-neutral-subtle text-xs font-medium text-neutral"
-                    />
-                  </span>
-                </span>
-                <div
-                  class="block w-fit cursor-pointer"
-                  data-state="closed"
-                  data-testid="tag-commit"
-                >
-                  <span
-                    class="inline-flex items-center rounded text-xs font-bold h-7 px-2   flex items-center justify-center border font-medium bg-background w-[90px] border-neutral text-neutral-subtle hover:bg-surface-neutral-subtle"
-                    data-testid="tag"
-                  >
-                    <div
-                      class="mr-1 w-4"
-                    >
-                      <i
-                        aria-hidden="true"
-                        class="fa-regular fa-code-commit mr-1"
-                      />
-                    </div>
-                    commit1
-                  </span>
-                </div>
-              </div>
-            </div>
-          </li>
-          <li
-            class="flex justify-between border border-b-0 border-neutral p-4 cursor-pointer border-t-brand-strong"
-            data-testid="outdated-service-row"
-          >
-            <div
-              class="flex font-medium text-neutral"
-            >
-              <span
-                class="mr-4 flex items-center"
-              >
-                <button
-                  aria-checked="false"
-                  class="group inline-flex shrink-0 items-center justify-center h-4 w-4 rounded border border-neutral bg-surface-neutral transition-colors disabled:cursor-not-allowed disabled:border-neutral disabled:bg-surface-neutral-subtle disabled:hover:border-neutral disabled:data-[state=checked]:bg-surface-neutral-subtle disabled:data-[state=checked]:border-neutral disabled:data-[state=indeterminate]:border-neutral hover:border-brand-strong data-[state=checked]:bg-surface-brand-solid hover:data-[state=checked]:bg-surface-brand-solidHover data-[state=checked]:border-0 data-[state=indeterminate]:border-brand-strong"
-                  data-state="unchecked"
-                  role="checkbox"
-                  type="button"
-                  value="on"
-                />
-              </span>
-              Jeff Rhodes
-            </div>
-            <div
-              class="ml-auto flex items-center"
-            >
-              <div
-                class="flex items-center "
-                data-testid="current-commit-block"
-              >
-                <span
-                  class="flex items-center justify-center rounded-full border border-neutral mr-2 h-7 w-7"
-                >
-                  <span
-                    class="flex items-center justify-center h-full w-full rounded-full h-full w-full"
-                  >
-                    <span
-                      class="flex h-full w-full items-center justify-center rounded-full bg-surface-neutral-subtle text-xs font-medium text-neutral"
-                    >
-                      U
-                    </span>
-                  </span>
-                </span>
-                <div
-                  class="block w-fit cursor-pointer"
-                  data-state="closed"
-                  data-testid="tag-commit"
-                >
-                  <span
-                    class="inline-flex items-center rounded text-xs font-bold h-7 px-2   flex items-center justify-center border font-medium bg-background w-[90px] border-neutral text-neutral-subtle hover:bg-surface-neutral-subtle"
-                    data-testid="tag"
-                  >
-                    <div
-                      class="mr-1 w-4"
-                    >
-                      <i
-                        aria-hidden="true"
-                        class="fa-regular fa-code-commit mr-1"
-                      />
-                    </div>
-                    commit0
-                  </span>
-                </div>
-              </div>
-              <i
-                aria-hidden="true"
-                class="fa-regular fa-arrow-left mx-2 -scale-100 text-neutral-subtle"
-              />
-              <div
-                class="flex items-center opacity-50"
-                data-testid="last-commit-block"
-              >
-                <span
-                  class="flex items-center justify-center rounded-full border border-neutral mr-2 h-7 w-7"
-                >
-                  <span
-                    class="flex items-center justify-center h-full w-full rounded-full h-full w-full"
-                  >
-                    <span
-                      class="flex h-full w-full items-center justify-center rounded-full bg-surface-neutral-subtle text-xs font-medium text-neutral"
-                    />
-                  </span>
-                </span>
-                <div
-                  class="block w-fit cursor-pointer"
-                  data-state="closed"
-                  data-testid="tag-commit"
-                >
-                  <span
-                    class="inline-flex items-center rounded text-xs font-bold h-7 px-2   flex items-center justify-center border font-medium bg-background w-[90px] border-neutral text-neutral-subtle hover:bg-surface-neutral-subtle"
-                    data-testid="tag"
-                  >
-                    <div
-                      class="mr-1 w-4"
-                    >
-                      <i
-                        aria-hidden="true"
-                        class="fa-regular fa-code-commit mr-1"
-                      />
-                    </div>
-                    commit1
-                  </span>
-                </div>
-              </div>
-            </div>
-          </li>
-          <li
-            class="flex justify-between border border-b-0 border-neutral p-4 rounded-b !border-b cursor-pointer"
-            data-testid="outdated-service-row"
-          >
-            <div
-              class="flex font-medium text-neutral"
-            >
-              <span
-                class="mr-4 flex items-center"
-              >
-                <button
-                  aria-checked="false"
-                  class="group inline-flex shrink-0 items-center justify-center h-4 w-4 rounded border border-neutral bg-surface-neutral transition-colors disabled:cursor-not-allowed disabled:border-neutral disabled:bg-surface-neutral-subtle disabled:hover:border-neutral disabled:data-[state=checked]:bg-surface-neutral-subtle disabled:data-[state=checked]:border-neutral disabled:data-[state=indeterminate]:border-neutral hover:border-brand-strong data-[state=checked]:bg-surface-brand-solid hover:data-[state=checked]:bg-surface-brand-solidHover data-[state=checked]:border-0 data-[state=indeterminate]:border-brand-strong"
-                  data-state="unchecked"
-                  role="checkbox"
-                  type="button"
-                  value="on"
-                />
-              </span>
-              Joseph Morgan
-            </div>
-            <div
-              class="ml-auto flex items-center"
-            >
-              <div
-                class="flex items-center "
-                data-testid="current-commit-block"
-              >
-                <span
-                  class="flex items-center justify-center rounded-full border border-neutral mr-2 h-7 w-7"
-                >
-                  <span
-                    class="flex items-center justify-center h-full w-full rounded-full h-full w-full"
-                  >
-                    <span
-                      class="flex h-full w-full items-center justify-center rounded-full bg-surface-neutral-subtle text-xs font-medium text-neutral"
-                    >
-                      U
-                    </span>
-                  </span>
-                </span>
-                <div
-                  class="block w-fit cursor-pointer"
-                  data-state="closed"
-                  data-testid="tag-commit"
-                >
-                  <span
-                    class="inline-flex items-center rounded text-xs font-bold h-7 px-2   flex items-center justify-center border font-medium bg-background w-[90px] border-neutral text-neutral-subtle hover:bg-surface-neutral-subtle"
-                    data-testid="tag"
-                  >
-                    <div
-                      class="mr-1 w-4"
-                    >
-                      <i
-                        aria-hidden="true"
-                        class="fa-regular fa-code-commit mr-1"
-                      />
-                    </div>
-                    commit0
-                  </span>
-                </div>
-              </div>
-              <i
-                aria-hidden="true"
-                class="fa-regular fa-arrow-left mx-2 -scale-100 text-neutral-subtle"
-              />
-              <div
-                class="flex items-center opacity-50"
-                data-testid="last-commit-block"
-              >
-                <span
-                  class="flex items-center justify-center rounded-full border border-neutral mr-2 h-7 w-7"
-                >
-                  <span
-                    class="flex items-center justify-center h-full w-full rounded-full h-full w-full"
-                  >
-                    <span
-                      class="flex h-full w-full items-center justify-center rounded-full bg-surface-neutral-subtle text-xs font-medium text-neutral"
-                    />
-                  </span>
-                </span>
-                <div
-                  class="block w-fit cursor-pointer"
-                  data-state="closed"
-                  data-testid="tag-commit"
-                >
-                  <span
-                    class="inline-flex items-center rounded text-xs font-bold h-7 px-2   flex items-center justify-center border font-medium bg-background w-[90px] border-neutral text-neutral-subtle hover:bg-surface-neutral-subtle"
-                    data-testid="tag"
-                  >
-                    <div
-                      class="mr-1 w-4"
-                    >
-                      <i
-                        aria-hidden="true"
-                        class="fa-regular fa-code-commit mr-1"
-                      />
-                    </div>
-                    commit1
-                  </span>
-                </div>
-              </div>
-            </div>
-          </li>
-        </ul>
-        <div
-          class="pointer-events-none sticky bottom-0 z-overlay -mt-4 h-5 w-full rotate-180 bg-scroll-shadow-bottom transition-opacity duration-300 opacity-0"
-          data-testid="scroll-shadow-bottom"
-        />
-      </div>
-      <div
-        class="sticky bottom-0 -mb-6 flex justify-end gap-3 bg-background py-6"
-      >
-        <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 gap-x-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
-          data-testid="cancel-button"
-        >
-          Cancel
-        </button>
-        <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 gap-x-1.5 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
-          data-testid="submit-button"
-          type="submit"
-        >
-          Update 
-          1
-           service
-        </button>
-      </div>
-    </div>
-  </div>
-</body>
-`;
diff --git a/libs/domains/environments/feature/src/lib/update-all-modal/update-all-modal.spec.tsx b/libs/domains/environments/feature/src/lib/update-all-modal/update-all-modal.spec.tsx
deleted file mode 100644
index 70240b2413d..00000000000
--- a/libs/domains/environments/feature/src/lib/update-all-modal/update-all-modal.spec.tsx
+++ /dev/null
@@ -1,190 +0,0 @@
-import { type Commit, ServiceTypeEnum } from 'qovery-typescript-axios'
-import { applicationFactoryMock, environmentFactoryMock } from '@qovery/shared/factories'
-import { renderWithProviders, screen } from '@qovery/shared/util-tests'
-import { useDeployAllServices } from '../hooks/use-deploy-all-services/use-deploy-all-services'
-import { type OutdatedService } from '../hooks/use-outdated-services/use-outdated-services'
-import { UpdateAllModal, type UpdateAllModalProps } from './update-all-modal'
-
-const [mockEnvironment1, mockEnvironment2] = environmentFactoryMock(2).map((env, index) => ({
-  ...env,
-  id: `env${index + 1}`,
-}))
-
-const mockApplications = applicationFactoryMock(3).map((app): OutdatedService => {
-  return {
-    ...app,
-    environment: {
-      id: '1',
-    },
-    healthchecks: {},
-    git_repository: {
-      ...app.git_repository,
-      url: '',
-      deployed_commit_contributor: '',
-      deployed_commit_date: '',
-      deployed_commit_id: 'commit0',
-      deployed_commit_tag: '',
-    },
-    serviceType: ServiceTypeEnum.APPLICATION,
-    commits: [
-      { git_commit_id: 'commit1' } as Commit,
-      { git_commit_id: 'commit2' } as Commit,
-      { git_commit_id: 'commit3' } as Commit,
-    ],
-  }
-})
-
-jest.mock('../hooks/use-outdated-services/use-outdated-services', () => ({
-  useOutdatedServices: ({ environmentId }: { environmentId: string }) => ({
-    data: environmentId === 'env1' ? mockApplications : [],
-    isLoading: false,
-    error: {},
-  }),
-}))
-
-jest.mock('../hooks/use-list-deployment-stages/use-list-deployment-stages', () => ({
-  useListDeploymentStages: () => ({
-    data: [],
-    isLoading: false,
-    error: {},
-  }),
-}))
-
-jest.mock('../hooks/use-deploy-all-services/use-deploy-all-services', () => {
-  const mutate = jest.fn()
-  return {
-    ...jest.requireActual('../hooks/use-deploy-all-services/use-deploy-all-services'),
-    useDeployAllServices: () => ({
-      mutate,
-      isLoading: false,
-      error: {},
-    }),
-  }
-})
-
-describe('UpdateAllModal', () => {
-  const props: UpdateAllModalProps = {
-    environment: mockEnvironment1,
-  }
-
-  it('should render successfully', () => {
-    const { baseElement } = renderWithProviders(<UpdateAllModal {...props} />)
-    expect(baseElement).toBeTruthy()
-  })
-
-  it('should useDeployAllServices have been called on submit with good payload', async () => {
-    const { userEvent } = renderWithProviders(<UpdateAllModal {...props} />)
-
-    const deselectAll = screen.getByTestId('deselect-all')
-
-    await userEvent.click(deselectAll)
-
-    const firstRow = screen.getAllByTestId('outdated-service-row')[0]
-
-    await userEvent.click(firstRow)
-
-    const submitButton = screen.getByTestId('submit-button')
-
-    await userEvent.click(submitButton)
-
-    expect(useDeployAllServices().mutate).toHaveBeenCalledWith({
-      environment: mockEnvironment1,
-      payload: {
-        applications: [
-          {
-            application_id: mockApplications[0].id,
-            git_commit_id: mockApplications[0].commits[0].git_commit_id,
-          },
-        ],
-        jobs: [],
-      },
-    })
-  })
-
-  it('should useDeployAllServices have been called on submit with selectAll', async () => {
-    const { userEvent } = renderWithProviders(<UpdateAllModal {...props} />)
-
-    const deselectAll = screen.getByTestId('deselect-all')
-
-    await userEvent.click(deselectAll)
-
-    await userEvent.click(screen.getByTestId('select-all'))
-
-    const submitButton = screen.getByTestId('submit-button')
-
-    await userEvent.click(submitButton)
-
-    expect(useDeployAllServices().mutate).toHaveBeenCalledWith({
-      environment: mockEnvironment1,
-      payload: {
-        applications: [
-          {
-            application_id: mockApplications[0].id,
-            git_commit_id: mockApplications[0].commits[0].git_commit_id,
-          },
-          {
-            application_id: mockApplications[1].id,
-            git_commit_id: mockApplications[1].commits[0].git_commit_id,
-          },
-          {
-            application_id: mockApplications[2].id,
-            git_commit_id: mockApplications[2].commits[0].git_commit_id,
-          },
-        ],
-        jobs: [],
-      },
-    })
-  })
-
-  it('should display 3 rows', () => {
-    renderWithProviders(<UpdateAllModal {...props} />)
-    expect(screen.getAllByTestId('outdated-service-row')).toHaveLength(3)
-  })
-
-  it('should have 1 row checked and next sibling color border top', async () => {
-    const { userEvent } = renderWithProviders(<UpdateAllModal {...props} />)
-
-    await userEvent.click(screen.getByTestId('deselect-all'))
-
-    const rows = screen.getAllByTestId('outdated-service-row')
-    const firstRow = rows[0]
-    await userEvent.click(firstRow)
-
-    expect(firstRow).toHaveClass('bg-surface-brand-subtle', 'border-brand-strong')
-
-    const secondRow = rows[1]
-    expect(secondRow).toHaveClass('border-t-brand-strong')
-
-    const submitButton = screen.getByTestId('submit-button')
-
-    expect(submitButton).toHaveTextContent('Update 1 service')
-  })
-
-  it('should disabled submit button if no selected', async () => {
-    const { userEvent } = renderWithProviders(<UpdateAllModal {...props} />)
-
-    await userEvent.click(screen.getByTestId('deselect-all'))
-
-    const submitButton = screen.getByTestId('submit-button')
-    expect(submitButton).toHaveTextContent('Update 0 service')
-    expect(submitButton).toBeDisabled()
-  })
-
-  it('should display empty state', async () => {
-    renderWithProviders(<UpdateAllModal {...props} environment={mockEnvironment2} />)
-
-    screen.getByTestId('empty-state')
-  })
-
-  it('should reduce opacity of commit blocks', async () => {
-    const { baseElement, userEvent } = renderWithProviders(<UpdateAllModal {...props} />)
-
-    await userEvent.click(screen.getByTestId('deselect-all'))
-
-    const rows = screen.getAllByTestId('outdated-service-row')
-    const firstRow = rows[0]
-    await userEvent.click(firstRow)
-
-    expect(baseElement).toMatchSnapshot()
-  })
-})
diff --git a/libs/domains/environments/feature/src/lib/update-all-modal/update-all-modal.tsx b/libs/domains/environments/feature/src/lib/update-all-modal/update-all-modal.tsx
deleted file mode 100644
index 23643357d7d..00000000000
--- a/libs/domains/environments/feature/src/lib/update-all-modal/update-all-modal.tsx
+++ /dev/null
@@ -1,286 +0,0 @@
-import { clsx } from 'clsx'
-import { type Commit, type DeployAllRequest, type Environment } from 'qovery-typescript-axios'
-import { useEffect, useState } from 'react'
-import { P, match } from 'ts-pattern'
-import { isJobGitSource } from '@qovery/shared/enums'
-import {
-  Avatar,
-  Button,
-  Checkbox,
-  Icon,
-  LoaderSpinner,
-  ScrollShadowWrapper,
-  TagCommit,
-  Tooltip,
-  Truncate,
-  useModal,
-} from '@qovery/shared/ui'
-import { twMerge } from '@qovery/shared/util-js'
-import { useDeployAllServices } from '../hooks/use-deploy-all-services/use-deploy-all-services'
-import { useListDeploymentStages } from '../hooks/use-list-deployment-stages/use-list-deployment-stages'
-import { type OutdatedService, useOutdatedServices } from '../hooks/use-outdated-services/use-outdated-services'
-
-export interface UpdateAllModalProps {
-  environment: Environment
-}
-
-export function UpdateAllModal({ environment }: UpdateAllModalProps) {
-  const { closeModal } = useModal()
-  const { data: outdatedServices = [], isLoading: isOutdatedServicesLoading } = useOutdatedServices({
-    environmentId: environment.id,
-  })
-  const { data: deploymentStages } = useListDeploymentStages({ environmentId: environment.id })
-  const [selectedServiceIds, setSelectedServiceIds] = useState<string[]>([])
-  const { mutate: deployAllServices, isLoading: isDeployAllServicesLoading } = useDeployAllServices()
-
-  const isSkipped = (serviceId: string) =>
-    deploymentStages?.some((stage) => stage.services?.some((s) => s.service_id === serviceId && s.is_skipped)) ?? false
-
-  const checkService = (serviceId: string) => {
-    if (isSkipped(serviceId)) return
-    if (selectedServiceIds.includes(serviceId)) {
-      setSelectedServiceIds(selectedServiceIds.filter((id) => id !== serviceId))
-    } else {
-      setSelectedServiceIds([...selectedServiceIds, serviceId])
-    }
-  }
-
-  const onSubmit = () => {
-    if (selectedServiceIds.length > 0) {
-      const appsToUpdate: DeployAllRequest['applications'] = []
-      const jobsToUpdate: DeployAllRequest['jobs'] = []
-
-      const servicesDictionary = outdatedServices.reduce(
-        (acc, service) => {
-          acc[service.id] = service
-          return acc
-        },
-        {} as Record<string, OutdatedService>
-      )
-
-      selectedServiceIds.forEach((serviceId) => {
-        const { serviceType, id, commits } = servicesDictionary[serviceId]
-        if (serviceType === 'APPLICATION') {
-          appsToUpdate.push({
-            application_id: id,
-            git_commit_id: commits[0]?.git_commit_id ?? '',
-          })
-        }
-
-        if (serviceType === 'JOB') {
-          jobsToUpdate.push({
-            id,
-            git_commit_id: commits[0]?.git_commit_id ?? '',
-          })
-        }
-      })
-
-      const deployRequest: DeployAllRequest = {
-        applications: appsToUpdate,
-        jobs: jobsToUpdate,
-      }
-
-      deployAllServices({ environment, payload: deployRequest })
-      closeModal()
-    }
-  }
-
-  const unselectAll = () => {
-    setSelectedServiceIds([])
-  }
-
-  const selectAll = () => {
-    setSelectedServiceIds(outdatedServices.filter(({ id }) => !isSkipped(id)).map(({ id }) => id))
-  }
-
-  useEffect(() => {
-    if (!isOutdatedServicesLoading) {
-      selectAll()
-    }
-  }, [isOutdatedServicesLoading])
-
-  const findCommitById = (application: OutdatedService, commitId?: string): Commit | undefined => {
-    return application.commits.find((commit) => commit.git_commit_id === commitId) as Commit
-  }
-
-  const getAvatarForCommit = (application: OutdatedService, commitId?: string): string | undefined => {
-    return findCommitById(application, commitId)?.author_avatar_url
-  }
-
-  const getNameForCommit = (application: OutdatedService, commitId?: string): string | undefined => {
-    return findCommitById(application, commitId)?.author_name
-  }
-
-  const getInitials = (fullName: string) =>
-    fullName
-      .split(' ')
-      .filter(Boolean)
-      .slice(0, 2)
-      .map((name) => name.charAt(0).toUpperCase())
-      .join('')
-
-  const isChecked = (serviceId: string) => selectedServiceIds.includes(serviceId)
-
-  return (
-    <div className="p-6">
-      <h2 className="h4 mb-1 max-w-sm truncate text-neutral">Deploy latest version for..</h2>
-      <p className="mb-4 text-sm text-neutral-subtle">Select the services you want to update to the latest version</p>
-
-      <div className="mb-4 flex items-center justify-between text-sm text-neutral">
-        <p>
-          For{' '}
-          <strong className="font-medium">
-            <Truncate truncateLimit={60} text={environment?.name || ''} />
-          </strong>
-        </p>
-
-        {outdatedServices.length > 0 &&
-          (selectedServiceIds.length > 0 ? (
-            <Button onClick={unselectAll} data-testid="deselect-all" size="sm" variant="outline" color="neutral">
-              Deselect All
-            </Button>
-          ) : (
-            <Button onClick={selectAll} data-testid="select-all" size="sm" variant="outline" color="neutral">
-              Select All
-            </Button>
-          ))}
-      </div>
-      {isOutdatedServicesLoading ? (
-        <LoaderSpinner className="mx-auto block" />
-      ) : outdatedServices.length ? (
-        <ScrollShadowWrapper className="max-h-[440px]">
-          <ul>
-            {outdatedServices.map((application, index) => {
-              const gitRepository = match(application)
-                .with({ serviceType: 'APPLICATION' }, ({ git_repository }) => git_repository)
-                .with(
-                  { serviceType: 'JOB', source: P.when(isJobGitSource) },
-                  ({ source }) => source.docker?.git_repository
-                )
-                .otherwise(() => undefined)
-
-              const skipped = isSkipped(application.id)
-              const deployedCommitAuthorName =
-                getNameForCommit(application, gitRepository?.deployed_commit_id) || 'Unknown'
-              const deployedCommitAuthorAvatarUrl = getAvatarForCommit(application, gitRepository?.deployed_commit_id)
-              const latestCommitAuthorName = application.commits[0].author_name || ''
-              const latestCommitAuthorAvatarUrl = application.commits[0].author_avatar_url || ''
-
-              return (
-                <Tooltip
-                  key={application.id}
-                  content="This service is skipped and cannot be deployed at environment level"
-                  disabled={!skipped}
-                >
-                  <li
-                    data-testid="outdated-service-row"
-                    onClick={skipped ? undefined : () => checkService(application.id)}
-                    className={twMerge(
-                      'flex justify-between border border-b-0 border-neutral p-4',
-                      index === 0 && 'rounded-t',
-                      outdatedServices.length - 1 === index && 'rounded-b !border-b',
-                      clsx({
-                        'cursor-default opacity-50': skipped,
-                        'cursor-pointer': !skipped,
-                        'border-brand-strong bg-surface-brand-subtle': !skipped && isChecked(application.id),
-                        'border-t-brand-strong': !skipped && isChecked(outdatedServices[index - 1]?.id),
-                      })
-                    )}
-                  >
-                    <div className="flex font-medium text-neutral">
-                      <span className="mr-4 flex items-center" onClick={(e) => e.stopPropagation()}>
-                        <Checkbox
-                          name={application.id}
-                          checked={isChecked(application.id)}
-                          disabled={skipped}
-                          onCheckedChange={(checked) => {
-                            if (checked === 'indeterminate') {
-                              return
-                            }
-                            checkService(application.id)
-                          }}
-                        />
-                      </span>
-                      <Truncate truncateLimit={31} text={application.name} />
-                    </div>
-                    <div className="ml-auto flex items-center">
-                      <div
-                        data-testid="current-commit-block"
-                        className={`flex items-center ${isChecked(application.id) ? 'opacity-50' : ''}`}
-                        onClick={(e) => e.stopPropagation()}
-                      >
-                        {}
-                        <Tooltip content={deployedCommitAuthorName}>
-                          <Avatar
-                            size="custom"
-                            border="solid"
-                            className="mr-2 h-7 w-7"
-                            src={deployedCommitAuthorAvatarUrl}
-                            alt={deployedCommitAuthorName}
-                            fallback={
-                              <span className="flex h-full w-full items-center justify-center rounded-full bg-surface-neutral-subtle text-xs font-medium text-neutral">
-                                {getInitials(deployedCommitAuthorName)}
-                              </span>
-                            }
-                          />
-                        </Tooltip>
-                        <TagCommit withBackground commitId={gitRepository?.deployed_commit_id} />
-                      </div>
-                      <Icon iconName="arrow-left" className="mx-2 -scale-100 text-neutral-subtle" />
-                      {application.commits && Boolean(application.commits.length) && (
-                        <div
-                          data-testid="last-commit-block"
-                          className={`flex items-center ${!isChecked(application.id) ? 'opacity-50' : ''}`}
-                          onClick={(e) => e.stopPropagation()}
-                        >
-                          <Tooltip content={latestCommitAuthorName} disabled={!latestCommitAuthorName}>
-                            <Avatar
-                              size="custom"
-                              border="solid"
-                              className="mr-2 h-7 w-7"
-                              src={latestCommitAuthorAvatarUrl}
-                              alt={latestCommitAuthorName}
-                              fallback={
-                                <span className="flex h-full w-full items-center justify-center rounded-full bg-surface-neutral-subtle text-xs font-medium text-neutral">
-                                  {getInitials(latestCommitAuthorName)}
-                                </span>
-                              }
-                            />
-                          </Tooltip>
-                          <TagCommit withBackground commitId={application.commits[0].git_commit_id} />
-                        </div>
-                      )}
-                    </div>
-                  </li>
-                </Tooltip>
-              )
-            })}
-          </ul>
-        </ScrollShadowWrapper>
-      ) : (
-        <div className="px-3 py-6 text-center" data-testid="empty-state">
-          <Icon iconName="wave-pulse" className="text-neutral-subtle" />
-          <p className="mt-1 text-xs font-medium text-neutral-subtle">No outdated services found</p>
-        </div>
-      )}
-
-      <div className="sticky bottom-0 -mb-6 flex justify-end gap-3 bg-background py-6">
-        <Button data-testid="cancel-button" color="neutral" variant="plain" size="lg" onClick={closeModal}>
-          Cancel
-        </Button>
-        <Button
-          data-testid="submit-button"
-          disabled={selectedServiceIds.length === 0}
-          type="submit"
-          size="lg"
-          onClick={onSubmit}
-          loading={isDeployAllServicesLoading}
-        >
-          Update {selectedServiceIds.length} service{selectedServiceIds.length > 1 ? 's' : ''}
-        </Button>
-      </div>
-    </div>
-  )
-}
-
-export default UpdateAllModal
diff --git a/libs/shared/ui/src/lib/components/toast/toast.tsx b/libs/shared/ui/src/lib/components/toast/toast.tsx
index 7c28146e5e5..d2510a42bea 100644
--- a/libs/shared/ui/src/lib/components/toast/toast.tsx
+++ b/libs/shared/ui/src/lib/components/toast/toast.tsx
@@ -1,7 +1,7 @@
-import { type MouseEvent } from 'react'
+import { type MouseEvent, useState } from 'react'
 import { Toaster, toast as sonnerToast } from 'sonner'
 import { twMerge } from '@qovery/shared/util-js'
-import { type ToastStatus } from '../../utils/toast'
+import { type ToastActionCallback, type ToastStatus } from '../../utils/toast'
 import Button from '../button/button'
 import { Icon } from '../icon/icon'
 
@@ -9,13 +9,13 @@ export interface ToastProps {
   status: ToastStatus
   title?: string
   description?: string
-  callback?: () => void
+  callback?: ToastActionCallback
   actionLabel?: string
 }
 
 export interface ToastActionProps {
   label: string
-  onClick?: () => void
+  onClick?: ToastActionCallback
 }
 
 export interface CustomToastProps {
@@ -44,9 +44,19 @@ const statusIcon: Record<
 }
 
 export function CustomToast({ id, status, title, description, action }: CustomToastProps) {
-  const onActionClick = () => {
-    sonnerToast.dismiss(id)
-    action?.onClick?.()
+  const [isActionLoading, setIsActionLoading] = useState(false)
+
+  const onActionClick = async () => {
+    if (isActionLoading) return
+
+    setIsActionLoading(true)
+    try {
+      await action?.onClick?.()
+    } catch (error) {
+      console.error('Toast action failed:', error)
+    } finally {
+      sonnerToast.dismiss(id)
+    }
   }
 
   return (
@@ -79,7 +89,16 @@ export function CustomToast({ id, status, title, description, action }: CustomTo
         </p>
         {description && <p className="mt-0.5 text-ssm text-neutral-subtle">{description}</p>}
         {action?.label && (
-          <Button type="button" size="sm" variant="surface" color="neutral" className="mt-2.5" onClick={onActionClick}>
+          <Button
+            type="button"
+            size="sm"
+            variant="surface"
+            color="neutral"
+            className="mt-2.5"
+            onClick={onActionClick}
+            loading={isActionLoading}
+            disabled={isActionLoading}
+          >
             {action.label}
           </Button>
         )}
diff --git a/libs/shared/ui/src/lib/utils/toast-error.tsx b/libs/shared/ui/src/lib/utils/toast-error.tsx
index 4e2da77b09c..1b2bee37802 100644
--- a/libs/shared/ui/src/lib/utils/toast-error.tsx
+++ b/libs/shared/ui/src/lib/utils/toast-error.tsx
@@ -1,11 +1,11 @@
 import { type SerializedError } from '@qovery/shared/utils'
-import toast from './toast'
+import toast, { type ToastActionCallback } from './toast'
 
 export function toastError(
   error: SerializedError | Error,
   title?: string,
   description?: string,
-  callback?: () => void,
+  callback?: ToastActionCallback,
   labelAction?: string
 ): void {
   toast(
diff --git a/libs/shared/ui/src/lib/utils/toast.tsx b/libs/shared/ui/src/lib/utils/toast.tsx
index 5f47b21ab2c..9854b130617 100644
--- a/libs/shared/ui/src/lib/utils/toast.tsx
+++ b/libs/shared/ui/src/lib/utils/toast.tsx
@@ -2,12 +2,13 @@ import { toast as sonnerToast } from 'sonner'
 import { CustomToast } from '../components/toast/toast'
 
 export type ToastStatus = 'success' | 'error' | 'warning'
+export type ToastActionCallback = () => unknown
 
 export const toast = (
   status: ToastStatus,
   title: string,
   description?: string,
-  callback?: () => void,
+  callback?: ToastActionCallback,
   labelAction?: string
 ) => {
   const action = labelAction

From 78e0baad4edc3bc5504e410ed21f81d9ef936dcc Mon Sep 17 00:00:00 2001
From: Romain Billard <rmnbrd@users.noreply.github.com>
Date: Wed, 14 Oct 2026 11:30:05 +0200
Subject: [PATCH 6/7] feat: introduce new engine (#2997)

* Add Profile page

* Implement main Profile page UI elements

* fix(clusters): disable unavailable cluster profile controls

- Remove unused cluster actions
- Disable the log infrastructure toggle and update its test

* feat(clusters): support dynamic platform configuration

- Resolve cluster bindings and component configuration previews
- Render API-defined fields and validation states in cluster profiles

* feat(clusters): add the cluster profile layer sidebar

- Add searchable, selectable layer and component navigation with status indicators
- Reuse the shared search input and expose its accessible label

* feat(clusters): arrange profile inputs in compact rows

- Add row layouts with truncated descriptions and tooltips
- Align profile controls and errors consistently

* feat(clusters): show positive empty state for unconfigured components

- Add a positive variant to the shared EmptyState component
- Use it when a cluster profile component needs no configuration

* fix(clusters): constrain profile page to its container

* fix(clusters): match profile skeleton to configuration rows

* chore(clusters): log profile schema responses in development

* fix(clusters): preserve resolved profile fields on refresh

- Show configuration skeletons only until displayed components resolve
- Keep the last resolved fields visible when background refreshes fail

* fix(clusters): match profile tab icons to sidebar

- Reuse the sidebar component icon in profile tabs
- Assert matching icons for Loki and Alloy

* fix(clusters): remove operator footer from profile sidebar

- Add bottom spacing to the profile configuration panel

* feat(clusters): support nested profile configuration fields

- Add and edit array items through validated modals
- Show nested field violations and enforce array limits

* feat(clusters): remove heading

* fix(clusters): use section for profile content region

* feat(clusters): add searchable cluster profile settings

- Persist profile search in the URL and filter matching layers, components, and fields
- Highlight search matches in configuration labels and descriptions

* feat(clusters): save and deploy profile changes

* refactor(clusters): move profile state into context

* fix(shared-ui): order highlight text classes consistently

* fix(clusters): remove profile header surface background

* feat(clusters): add Engine V2 cluster creation flow

* fix(clusters): disable components without configuration

- Skip non-configurable components when opening profile layers or URL selections
- Hide their tabs and explain disabled sidebar items

* fix(clusters): reflect resolved layer statuses in profile

- Disable skipped and Qovery-managed layers using cluster configuration
- Show a status-specific explanation when a layer is disabled

* fix(ui): preserve input defaults and select accessibility

- Omit undefined search defaults from rendered input attributes
- Keep small select aria labels explicit
- Center select chevrons vertically

* fix(clusters): detect Engine v2 clusters for deployment actions

- Use Operator status to identify Engine v2 clusters
- Restrict deployment actions for those clusters

* feat(clusters): show Operator status in cluster profile

* fix(clusters): prevent dismissing install flow

- Keep the creation modal open during Operator installation
- Cover dismissal before and after installation in ClusterAdd specs

* fix(clusters): create self-managed clusters without a template

- Send only edited Operator configuration and allow default platform selection
- Clarify Operator installation guidance and cover template loading

* fix(clusters): block creation when templates fail to load

- Show a retry option when Operator templates cannot be loaded
- Keep cluster creation disabled until templates load successfully

* fix(clusters): remove obsolete requirement status badge

* fix(clusters): use list items for layer sidebar states

* fix(clusters): use navbar links for profile components

- Replace tab buttons with Navbar links
- Update navigation tests for link semantics and keyboard movement

* fix(clusters): prevent leaving flow during cluster creation

* fix(clusters): block saving invalid profile changes

- Disable save actions until component checks pass
- Cover violations, missing inputs, and unresolved checks

* fix(clusters): reset profile state when switching clusters

* feat(clusters): add component routes to cluster profile

* fix(clusters): ignore cached Operator status when disabled

- Gate Engine v2 detection on the feature flag and self-managed cluster type
- Cover disabled, managed, and unattached cluster cases

* fix(clusters): prevent duplicate Operator updates

- Disable the update button while an update is in progress
- Cover version arguments and in-progress behavior with tests

* fix(clusters): remove obsolete update button comment

* fix(clusters): wait for profile feature flag to load

* fix(clusters): expose profile navbar as navigation

* fix(clusters): stop loading when template queries are disabled

- Gate template loading on the query being enabled
- Cover supported, failed, and unsupported cluster states

* fix(clusters): remove gateway API warning indicator

* test(clusters): verify self-managed cluster selection tracking

* fix(clusters): block saving for offscreen invalid components

- Include edited components outside the active section in configuration resolution
- Keep save actions disabled when any edited component has validation errors

* test(clusters): cover Operator update action visibility

* fix(clusters): remove disabled profile controls

* fix(clusters): close item modal when profile unmounts

- Track the array item modal lifecycle and close it on profile unmount
- Cover modal cleanup with a regression test

* fix(clusters): address engine v2 review comments (#3057)

* fix(clusters): wait for the Operator configuration check before creating

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

* fix(clusters): stop polling clusters without Operator and show status errors

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

* fix(clusters): block incomplete or invalid profile array items

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

* fix(clusters): show the cluster provider and layers on every profile width

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

* fix(ui): name and sync profile inputs for assistive tech and navigation

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

* fix(clusters): mark EKS Anywhere as an access request

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

* chore(ui): rename the search highlight surface token

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

* fix(clusters): require resolved Operator inputs before creating

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

* fix(clusters): ignore paused or outdated Operator checks

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

* fix(clusters): let a failed Operator check be retried

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

* fix(clusters): map vendor names to their profile header icons

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

* test(clusters): assert the array items added from defaults

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

* fix(clusters): show Operator status errors over the cached status

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

* fix(ui): show the clear button for external search values

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

* chore(clusters): engine v2 review improvements (#3060)

* fix(clusters): keep profile edits made while saving

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

* fix(clusters): redirect only once when the Operator connects

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

* fix(clusters): track the item modal however it is dismissed

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

* perf(clusters): only debounce profile edits, not component switches

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

* fix(clusters): use the brand focus outline on profile sidebar buttons

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

* fix(clusters): show OVH, Oracle and IBM icons in cluster avatars

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

* refactor(clusters): use ClusterAvatar in the profile header

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

* fix(clusters): align Operator and profile search copy

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

* refactor(clusters): use the layer-group icon in the profile sidebar

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

* refactor(clusters): keep the HTTP status helper private to data-access

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

* test(ui): drive InputSearch with userEvent

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

* refactor(clusters): read route ids in the Operator status components

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

* test(clusters): cover the platform configuration helpers

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

* test(clusters): drop an unused testing import

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

* UI tweak

* perf(clusters): debounce profile edits instead of preview requests

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

* fix(clusters): only mention the search when the sidebar has one

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

* fix(clusters): report the item modal mount state explicitly

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

* chore(clusters): remove profile API response logging

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

* fix(clusters): address remaining Cubic and Copilot review feedback on engine v2 (#3063)

* fix(clusters): do not select a disabled layer when none can be opened

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

* fix(clusters): do not open non-configurable components matched by search

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

* fix(clusters): keep polling the Operator status while the Operator is being installed

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

* fix(clusters): leave out reverted edits when saving the profile

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

* fix(shared): mask sensitive number inputs

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

* fix(clusters): hide decorative provider icons from assistive technologies

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

* test(clusters): cover analytics of the EKS Anywhere access request

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

* test(clusters): drop keyboard simulation on a disabled update button

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

* fix(clusters): show the Operator status in a popover so its action is keyboard reachable

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

* test(clusters): cover an enabled layer with nothing to configure

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

* fix(clusters): give the Operator status popover an accessible name

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

* fix(clusters): hide cloned SVG provider icons from assistive technologies

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

* test(clusters): scope the decorative icon assertion to the rendered cluster-add

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Sonnet 5.5 <noreply@anthropic.com>

* fix(clusters): close out the remaining engine v2 review threads (#3064)

* fix(shared): tie catalog input errors to their controls for assistive technologies

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

* fix(shared): reset the allowed-values select when its value is cleared

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

* fix(shared): give the modal close button an accessible name

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

* feat(clusters): style the EKS Anywhere card as unavailable until access is granted

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

* fix(clusters): do not mark a cluster input reset to its default as changed

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

* feat(clusters): confirm before leaving the Operator install step

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

* test(clusters): name the install step blocker test after what it verifies

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

* fix(shared): derive catalog input error ids per instance

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

* fix(clusters): compare cluster input edits as the inputs display them

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Sonnet 5.5 <noreply@anthropic.com>

* fix(clusters): resolve engine v2 build and profile issues

- Ignore test files when generating TanStack routes
- Normalize platform requirement types and provider icon props
- Upgrade React and the TypeScript Axios SDK

* fix(clusters): show resolved values for read-only fields

- Disable read-only profile inputs and display their API-resolved values
- Add regression coverage for the read-only field behavior

* fix(clusters): keep disabled sensitive fields masked

* refactor(clusters): address engine v2 review comments (#3099)

* fix(clusters): keep read-only fields disabled in the array item modal

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* feat(clusters): warn before leaving the profile with unsaved changes

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* refactor(shared): move isHttpStatus next to the Axios interceptor

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* refactor(clusters): rename useIsEngineV2Cluster to useIsOperatorManagedCluster

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* refactor(clusters): default platform configuration hook keys to empty strings

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* refactor(clusters): move platform configuration hooks next to the other cluster hooks

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* refactor(clusters): move platform configuration utils next to the other cluster utils

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* refactor(clusters): use the shared Heading and Section in the self-managed creation flow

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* refactor(clusters): type the creation flow layouts with PropsWithChildren

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* refactor(clusters): show unmapped Operator violations in a Callout

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* chore(clusters): export the profile tree like the other modules

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* refactor(catalog): move the catalog variable helpers and input into their own library

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* refactor(ui): use cva for the EmptyState size and variant classes

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* docs(ui): add HighlightText stories

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* refactor(ui): drop the unused Tooltip arrow class and collision padding props

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* refactor(ui): control the InputSearch value instead of syncing its default value

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* refactor(clusters): rename useIsOperatorManagedCluster to useIsOperatorAttached

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* refactor(ui): keep the InputSelectSmall accessible name opt-in

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* refactor(clusters): simplify the cluster profile layout

- Remove the cluster header and its unused context data
- Add a divider to the profile sidebar

* fix(clusters): show empty state when no settings match search

- Detect when the selected component matches only hidden settings
- Cover the filtered settings empty state

* refactor(clusters): clarify layer is not configurable yet

* refactor(clusters): clarify when the Operator status row is clickable

- Add hover and pointer styling only when the status panel can open
- Cover clickable and unavailable status states in the footer spec

* test(clusters): clarify Operator status row clickability coverage

* fix(clusters): keep profile saving available during checks

- Allow saving while configuration edits are being checked again
- Keep saving blocked when checks fail or report violations or missing inputs

* fix(clusters): keep the refresh error visible when no setting matches the search

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* docs(clusters): describe that the last save verdict holds during rechecks

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* refactor(schema-fields): rename the catalog lib to a shared schema fields library

The library holds schema-driven field definitions, validation and inputs. It is not tied to
the service catalog and is meant to be shared across domains, so it moves to
@qovery/shared/schema-fields/feature and drops the Catalog and Variable prefixes.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* test(ui): render InputSearch specs with the shared test utils

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>

* feat(clusters): only show the profile for Engine v2 clusters (#3105)

feat(clusters): only show the profile for clusters attached to the Operator

The Profile tab and route were gated on the feature flag alone, so every cluster had them.
They now also require a self-managed cluster attached to the Qovery Operator, like the
Operator-specific cluster actions. useIsOperatorAttached reports undefined until the flags,
the cluster and its Operator status are loaded, so the route does not redirect too early.

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 apps/console/src/routeTree.gen.ts             |   87 ++
 .../$clusterId/profile/$componentKey.tsx      |   48 +
 .../cluster/$clusterId/profile/index.tsx      |   35 +
 .../cluster/$clusterId/profile/route.tsx      |   39 +
 .../$organizationId/cluster/new.tsx           |   12 +-
 .../_authenticated/organization/route.tsx     |   19 +-
 apps/console/vite.config.ts                   |    1 +
 .../domains/clusters/data-access/src/index.ts |    1 +
 .../src/lib/domains-clusters-data-access.ts   |   52 +
 .../platform-configuration.ts                 |  105 ++
 libs/domains/clusters/feature/src/index.ts    |   14 +
 .../cluster-actions/cluster-actions.spec.tsx  |   66 +
 .../lib/cluster-actions/cluster-actions.tsx   |   19 +-
 .../src/lib/cluster-add/cluster-add.spec.tsx  |  145 ++
 .../src/lib/cluster-add/cluster-add.tsx       |  280 ++++
 .../cluster-avatar/cluster-avatar.spec.tsx    |   35 +
 .../src/lib/cluster-avatar/cluster-avatar.tsx |    8 +-
 .../cluster-operator-status.spec.tsx          |   63 +
 .../cluster-operator-status.tsx               |  147 ++
 .../cluster-profile-context.tsx               |  267 ++++
 .../cluster-profile-sidebar.tsx               |  219 +++
 .../cluster-profile/cluster-profile.spec.tsx  | 1285 +++++++++++++++++
 .../lib/cluster-profile/cluster-profile.tsx   |  550 +++++++
 .../profile-array-item-modal.spec.tsx         |   81 ++
 .../profile-array-item-modal.tsx              |  107 ++
 .../cluster-profile/profile-changes-bar.tsx   |   86 ++
 .../profile-configuration-field.spec.tsx      |   68 +
 .../profile-configuration-field.tsx           |  356 +++++
 .../profile-operator-footer.spec.tsx          |  138 ++
 .../profile-operator-footer.tsx               |   74 +
 .../src/lib/cluster-profile/profile-search.ts |   40 +
 .../lib/cluster-profile/profile-tree.spec.ts  |   68 +
 .../src/lib/cluster-profile/profile-tree.ts   |  125 ++
 .../use-cluster-profile-tree.spec.ts          |   53 +
 .../use-cluster-profile-tree.ts               |   66 +
 .../use-cluster-operator-bootstrap.ts         |   24 +
 .../use-cluster-operator-status.spec.ts       |   43 +
 .../use-cluster-operator-status.ts            |   33 +
 .../use-create-self-managed-cluster.ts        |   20 +
 .../use-is-operator-attached.spec.ts          |   79 +
 .../use-is-operator-attached.ts               |   25 +
 .../use-platform-component-configuration.ts   |   27 +
 .../use-platform-component-configurations.ts  |   29 +
 .../use-platform-configuration.ts             |   20 +
 ...atform-template-component-configuration.ts |   43 +
 .../use-platform-templates.ts                 |   25 +
 .../use-update-cluster-operator.ts            |   23 +
 .../use-update-platform-configuration.ts      |   16 +
 ...elf-managed-cluster-creation-flow.spec.tsx |  501 +++++++
 .../self-managed-cluster-creation-flow.tsx    |  605 ++++++++
 .../platform-configuration-utils.spec.ts      |  109 ++
 .../lib/utils/platform-configuration-utils.ts |  270 ++++
 ...s-override-arguments-setting.spec.tsx.snap |    8 +-
 .../instance-metrics.spec.tsx.snap            |    4 +-
 libs/shared/schema-fields/feature/.babelrc    |   12 +
 .../schema-fields/feature/.eslintrc.json      |   18 +
 libs/shared/schema-fields/feature/README.md   |    7 +
 .../schema-fields/feature/jest.config.ts      |   11 +
 .../shared/schema-fields/feature/project.json |    9 +
 .../shared/schema-fields/feature/src/index.ts |    2 +
 .../schema-field-input.spec.tsx               |  267 ++++
 .../schema-field-input/schema-field-input.tsx |  301 ++++
 .../src/lib/schema-field/schema-field.spec.ts |  118 ++
 .../src/lib/schema-field/schema-field.ts      |  149 ++
 .../schema-fields/feature/tsconfig.json       |   20 +
 .../schema-fields/feature/tsconfig.lib.json   |   19 +
 .../schema-fields/feature/tsconfig.spec.json  |   20 +
 libs/shared/ui/src/index.ts                   |    1 +
 .../__snapshots__/empty-state.spec.tsx.snap   |    2 +-
 .../components/empty-state/empty-state.tsx    |   66 +-
 .../highlight-text/highlight-text.spec.tsx    |   23 +
 .../highlight-text/highlight-text.stories.tsx |   37 +
 .../highlight-text/highlight-text.tsx         |   28 +
 .../inputs/input-search/input-search.spec.tsx |   35 +-
 .../inputs/input-search/input-search.tsx      |   10 +-
 .../input-select-small.spec.tsx               |   16 +-
 .../input-select-small/input-select-small.tsx |   11 +-
 .../input-text-small.spec.tsx                 |   12 +
 .../input-text-small/input-text-small.tsx     |    7 +-
 .../inputs/input-toggle/input-toggle.tsx      |    6 +
 .../ui/src/lib/components/modal/modal.tsx     |    1 +
 .../src/lib/components/truncate/truncate.tsx  |    4 +-
 libs/shared/utils/src/index.ts                |    1 +
 .../is-http-status/is-http-status.spec.ts     |   19 +
 .../lib/http/is-http-status/is-http-status.ts |   14 +
 .../util-queries/src/lib/queries/queries.ts   |    3 +-
 tailwind-workspace-preset.js                  |    1 +
 tsconfig.base.json                            |    1 +
 88 files changed, 7864 insertions(+), 50 deletions(-)
 create mode 100644 apps/console/src/routes/_authenticated/organization/$organizationId/cluster/$clusterId/profile/$componentKey.tsx
 create mode 100644 apps/console/src/routes/_authenticated/organization/$organizationId/cluster/$clusterId/profile/index.tsx
 create mode 100644 apps/console/src/routes/_authenticated/organization/$organizationId/cluster/$clusterId/profile/route.tsx
 create mode 100644 libs/domains/clusters/data-access/src/lib/platform-configuration/platform-configuration.ts
 create mode 100644 libs/domains/clusters/feature/src/lib/cluster-add/cluster-add.spec.tsx
 create mode 100644 libs/domains/clusters/feature/src/lib/cluster-add/cluster-add.tsx
 create mode 100644 libs/domains/clusters/feature/src/lib/cluster-avatar/cluster-avatar.spec.tsx
 create mode 100644 libs/domains/clusters/feature/src/lib/cluster-operator-status/cluster-operator-status.spec.tsx
 create mode 100644 libs/domains/clusters/feature/src/lib/cluster-operator-status/cluster-operator-status.tsx
 create mode 100644 libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile-context.tsx
 create mode 100644 libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile-sidebar.tsx
 create mode 100644 libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.spec.tsx
 create mode 100644 libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.tsx
 create mode 100644 libs/domains/clusters/feature/src/lib/cluster-profile/profile-array-item-modal.spec.tsx
 create mode 100644 libs/domains/clusters/feature/src/lib/cluster-profile/profile-array-item-modal.tsx
 create mode 100644 libs/domains/clusters/feature/src/lib/cluster-profile/profile-changes-bar.tsx
 create mode 100644 libs/domains/clusters/feature/src/lib/cluster-profile/profile-configuration-field.spec.tsx
 create mode 100644 libs/domains/clusters/feature/src/lib/cluster-profile/profile-configuration-field.tsx
 create mode 100644 libs/domains/clusters/feature/src/lib/cluster-profile/profile-operator-footer.spec.tsx
 create mode 100644 libs/domains/clusters/feature/src/lib/cluster-profile/profile-operator-footer.tsx
 create mode 100644 libs/domains/clusters/feature/src/lib/cluster-profile/profile-search.ts
 create mode 100644 libs/domains/clusters/feature/src/lib/cluster-profile/profile-tree.spec.ts
 create mode 100644 libs/domains/clusters/feature/src/lib/cluster-profile/profile-tree.ts
 create mode 100644 libs/domains/clusters/feature/src/lib/cluster-profile/use-cluster-profile-tree.spec.ts
 create mode 100644 libs/domains/clusters/feature/src/lib/cluster-profile/use-cluster-profile-tree.ts
 create mode 100644 libs/domains/clusters/feature/src/lib/hooks/use-cluster-operator-bootstrap/use-cluster-operator-bootstrap.ts
 create mode 100644 libs/domains/clusters/feature/src/lib/hooks/use-cluster-operator-status/use-cluster-operator-status.spec.ts
 create mode 100644 libs/domains/clusters/feature/src/lib/hooks/use-cluster-operator-status/use-cluster-operator-status.ts
 create mode 100644 libs/domains/clusters/feature/src/lib/hooks/use-create-self-managed-cluster/use-create-self-managed-cluster.ts
 create mode 100644 libs/domains/clusters/feature/src/lib/hooks/use-is-operator-attached/use-is-operator-attached.spec.ts
 create mode 100644 libs/domains/clusters/feature/src/lib/hooks/use-is-operator-attached/use-is-operator-attached.ts
 create mode 100644 libs/domains/clusters/feature/src/lib/hooks/use-platform-component-configuration/use-platform-component-configuration.ts
 create mode 100644 libs/domains/clusters/feature/src/lib/hooks/use-platform-component-configurations/use-platform-component-configurations.ts
 create mode 100644 libs/domains/clusters/feature/src/lib/hooks/use-platform-configuration/use-platform-configuration.ts
 create mode 100644 libs/domains/clusters/feature/src/lib/hooks/use-platform-template-component-configuration/use-platform-template-component-configuration.ts
 create mode 100644 libs/domains/clusters/feature/src/lib/hooks/use-platform-templates/use-platform-templates.ts
 create mode 100644 libs/domains/clusters/feature/src/lib/hooks/use-update-cluster-operator/use-update-cluster-operator.ts
 create mode 100644 libs/domains/clusters/feature/src/lib/hooks/use-update-platform-configuration/use-update-platform-configuration.ts
 create mode 100644 libs/domains/clusters/feature/src/lib/self-managed-cluster-creation/self-managed-cluster-creation-flow.spec.tsx
 create mode 100644 libs/domains/clusters/feature/src/lib/self-managed-cluster-creation/self-managed-cluster-creation-flow.tsx
 create mode 100644 libs/domains/clusters/feature/src/lib/utils/platform-configuration-utils.spec.ts
 create mode 100644 libs/domains/clusters/feature/src/lib/utils/platform-configuration-utils.ts
 create mode 100644 libs/shared/schema-fields/feature/.babelrc
 create mode 100644 libs/shared/schema-fields/feature/.eslintrc.json
 create mode 100644 libs/shared/schema-fields/feature/README.md
 create mode 100644 libs/shared/schema-fields/feature/jest.config.ts
 create mode 100644 libs/shared/schema-fields/feature/project.json
 create mode 100644 libs/shared/schema-fields/feature/src/index.ts
 create mode 100644 libs/shared/schema-fields/feature/src/lib/schema-field-input/schema-field-input.spec.tsx
 create mode 100644 libs/shared/schema-fields/feature/src/lib/schema-field-input/schema-field-input.tsx
 create mode 100644 libs/shared/schema-fields/feature/src/lib/schema-field/schema-field.spec.ts
 create mode 100644 libs/shared/schema-fields/feature/src/lib/schema-field/schema-field.ts
 create mode 100644 libs/shared/schema-fields/feature/tsconfig.json
 create mode 100644 libs/shared/schema-fields/feature/tsconfig.lib.json
 create mode 100644 libs/shared/schema-fields/feature/tsconfig.spec.json
 create mode 100644 libs/shared/ui/src/lib/components/highlight-text/highlight-text.spec.tsx
 create mode 100644 libs/shared/ui/src/lib/components/highlight-text/highlight-text.stories.tsx
 create mode 100644 libs/shared/ui/src/lib/components/highlight-text/highlight-text.tsx
 create mode 100644 libs/shared/utils/src/lib/http/is-http-status/is-http-status.spec.ts
 create mode 100644 libs/shared/utils/src/lib/http/is-http-status/is-http-status.ts

diff --git a/apps/console/src/routeTree.gen.ts b/apps/console/src/routeTree.gen.ts
index 3ad1beaacba..6a7e6a19f53 100644
--- a/apps/console/src/routeTree.gen.ts
+++ b/apps/console/src/routeTree.gen.ts
@@ -70,10 +70,12 @@ import { Route as AuthenticatedOrganizationOrganizationIdClusterClusterIdCloudSh
 import { Route as AuthenticatedOrganizationOrganizationIdProjectProjectIdSettingsRouteRouteImport } from './routes/_authenticated/organization/$organizationId/project/$projectId/settings/route'
 import { Route as AuthenticatedOrganizationOrganizationIdClusterCreateSlugRouteRouteImport } from './routes/_authenticated/organization/$organizationId/cluster/create/$slug/route'
 import { Route as AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsRouteRouteImport } from './routes/_authenticated/organization/$organizationId/cluster/$clusterId/settings/route'
+import { Route as AuthenticatedOrganizationOrganizationIdClusterClusterIdProfileRouteRouteImport } from './routes/_authenticated/organization/$organizationId/cluster/$clusterId/profile/route'
 import { Route as AuthenticatedOrganizationOrganizationIdProjectProjectIdSettingsIndexRouteImport } from './routes/_authenticated/organization/$organizationId/project/$projectId/settings/index'
 import { Route as AuthenticatedOrganizationOrganizationIdProjectProjectIdDeploymentRulesIndexRouteImport } from './routes/_authenticated/organization/$organizationId/project/$projectId/deployment-rules/index'
 import { Route as AuthenticatedOrganizationOrganizationIdClusterCreateSlugIndexRouteImport } from './routes/_authenticated/organization/$organizationId/cluster/create/$slug/index'
 import { Route as AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsIndexRouteImport } from './routes/_authenticated/organization/$organizationId/cluster/$clusterId/settings/index'
+import { Route as AuthenticatedOrganizationOrganizationIdClusterClusterIdProfileIndexRouteImport } from './routes/_authenticated/organization/$organizationId/cluster/$clusterId/profile/index'
 import { Route as AuthenticatedOrganizationOrganizationIdClusterClusterIdDeploymentsIndexRouteImport } from './routes/_authenticated/organization/$organizationId/cluster/$clusterId/deployments/index'
 import { Route as AuthenticatedOrganizationOrganizationIdSettingsRolesEditRoleIdRouteImport } from './routes/_authenticated/organization/$organizationId/settings/roles/edit/$roleId'
 import { Route as AuthenticatedOrganizationOrganizationIdProjectProjectIdSettingsGeneralRouteImport } from './routes/_authenticated/organization/$organizationId/project/$projectId/settings/general'
@@ -96,6 +98,7 @@ import { Route as AuthenticatedOrganizationOrganizationIdClusterClusterIdSetting
 import { Route as AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsCredentialsRouteImport } from './routes/_authenticated/organization/$organizationId/cluster/$clusterId/settings/credentials'
 import { Route as AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsAdvancedSettingsRouteImport } from './routes/_authenticated/organization/$organizationId/cluster/$clusterId/settings/advanced-settings'
 import { Route as AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsAddonsRouteImport } from './routes/_authenticated/organization/$organizationId/cluster/$clusterId/settings/addons'
+import { Route as AuthenticatedOrganizationOrganizationIdClusterClusterIdProfileComponentKeyRouteImport } from './routes/_authenticated/organization/$organizationId/cluster/$clusterId/profile/$componentKey'
 import { Route as AuthenticatedOrganizationOrganizationIdProjectProjectIdEnvironmentEnvironmentIdIndexRouteImport } from './routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/index'
 import { Route as AuthenticatedOrganizationOrganizationIdProjectProjectIdEnvironmentEnvironmentIdDeploymentsRouteImport } from './routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/deployments'
 import { Route as AuthenticatedOrganizationOrganizationIdProjectProjectIdEnvironmentEnvironmentIdAutomationRouteImport } from './routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/automation'
@@ -648,6 +651,14 @@ const AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsRouteRoute
       getParentRoute: () => AuthenticatedOrganizationOrganizationIdRouteRoute,
     } as any,
   )
+const AuthenticatedOrganizationOrganizationIdClusterClusterIdProfileRouteRoute =
+  AuthenticatedOrganizationOrganizationIdClusterClusterIdProfileRouteRouteImport.update(
+    {
+      id: '/cluster/$clusterId/profile',
+      path: '/cluster/$clusterId/profile',
+      getParentRoute: () => AuthenticatedOrganizationOrganizationIdRouteRoute,
+    } as any,
+  )
 const AuthenticatedOrganizationOrganizationIdProjectProjectIdSettingsIndexRoute =
   AuthenticatedOrganizationOrganizationIdProjectProjectIdSettingsIndexRouteImport.update(
     {
@@ -683,6 +694,15 @@ const AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsIndexRoute
         AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsRouteRoute,
     } as any,
   )
+const AuthenticatedOrganizationOrganizationIdClusterClusterIdProfileIndexRoute =
+  AuthenticatedOrganizationOrganizationIdClusterClusterIdProfileIndexRouteImport.update(
+    {
+      id: '/',
+      path: '/',
+      getParentRoute: () =>
+        AuthenticatedOrganizationOrganizationIdClusterClusterIdProfileRouteRoute,
+    } as any,
+  )
 const AuthenticatedOrganizationOrganizationIdClusterClusterIdDeploymentsIndexRoute =
   AuthenticatedOrganizationOrganizationIdClusterClusterIdDeploymentsIndexRouteImport.update(
     {
@@ -879,6 +899,15 @@ const AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsAddonsRoute
         AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsRouteRoute,
     } as any,
   )
+const AuthenticatedOrganizationOrganizationIdClusterClusterIdProfileComponentKeyRoute =
+  AuthenticatedOrganizationOrganizationIdClusterClusterIdProfileComponentKeyRouteImport.update(
+    {
+      id: '/$componentKey',
+      path: '/$componentKey',
+      getParentRoute: () =>
+        AuthenticatedOrganizationOrganizationIdClusterClusterIdProfileRouteRoute,
+    } as any,
+  )
 const AuthenticatedOrganizationOrganizationIdProjectProjectIdEnvironmentEnvironmentIdIndexRoute =
   AuthenticatedOrganizationOrganizationIdProjectProjectIdEnvironmentEnvironmentIdIndexRouteImport.update(
     {
@@ -1974,6 +2003,7 @@ export interface FileRoutesByFullPath {
   '/organization/$organizationId/$clusterId': typeof AuthenticatedOrganizationOrganizationIdClusterIdIndexRoute
   '/organization/$organizationId/alerts/': typeof AuthenticatedOrganizationOrganizationIdAlertsIndexRoute
   '/organization/$organizationId/settings/': typeof AuthenticatedOrganizationOrganizationIdSettingsIndexRoute
+  '/organization/$organizationId/cluster/$clusterId/profile': typeof AuthenticatedOrganizationOrganizationIdClusterClusterIdProfileRouteRouteWithChildren
   '/organization/$organizationId/cluster/$clusterId/settings': typeof AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsRouteRouteWithChildren
   '/organization/$organizationId/cluster/create/$slug': typeof AuthenticatedOrganizationOrganizationIdClusterCreateSlugRouteRouteWithChildren
   '/organization/$organizationId/project/$projectId/settings': typeof AuthenticatedOrganizationOrganizationIdProjectProjectIdSettingsRouteRouteWithChildren
@@ -1989,6 +2019,7 @@ export interface FileRoutesByFullPath {
   '/organization/$organizationId/project/$projectId': typeof AuthenticatedOrganizationOrganizationIdProjectProjectIdIndexRoute
   '/organization/$organizationId/settings/agents/': typeof AuthenticatedOrganizationOrganizationIdSettingsAgentsIndexRoute
   '/organization/$organizationId/settings/roles': typeof AuthenticatedOrganizationOrganizationIdSettingsRolesIndexRoute
+  '/organization/$organizationId/cluster/$clusterId/profile/$componentKey': typeof AuthenticatedOrganizationOrganizationIdClusterClusterIdProfileComponentKeyRoute
   '/organization/$organizationId/cluster/$clusterId/settings/addons': typeof AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsAddonsRoute
   '/organization/$organizationId/cluster/$clusterId/settings/advanced-settings': typeof AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsAdvancedSettingsRoute
   '/organization/$organizationId/cluster/$clusterId/settings/credentials': typeof AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsCredentialsRoute
@@ -2011,6 +2042,7 @@ export interface FileRoutesByFullPath {
   '/organization/$organizationId/project/$projectId/settings/general': typeof AuthenticatedOrganizationOrganizationIdProjectProjectIdSettingsGeneralRoute
   '/organization/$organizationId/settings/roles/edit/$roleId': typeof AuthenticatedOrganizationOrganizationIdSettingsRolesEditRoleIdRoute
   '/organization/$organizationId/cluster/$clusterId/deployments': typeof AuthenticatedOrganizationOrganizationIdClusterClusterIdDeploymentsIndexRoute
+  '/organization/$organizationId/cluster/$clusterId/profile/': typeof AuthenticatedOrganizationOrganizationIdClusterClusterIdProfileIndexRoute
   '/organization/$organizationId/cluster/$clusterId/settings/': typeof AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsIndexRoute
   '/organization/$organizationId/cluster/create/$slug/': typeof AuthenticatedOrganizationOrganizationIdClusterCreateSlugIndexRoute
   '/organization/$organizationId/project/$projectId/deployment-rules': typeof AuthenticatedOrganizationOrganizationIdProjectProjectIdDeploymentRulesIndexRoute
@@ -2189,6 +2221,7 @@ export interface FileRoutesByTo {
   '/organization/$organizationId/project/$projectId': typeof AuthenticatedOrganizationOrganizationIdProjectProjectIdIndexRoute
   '/organization/$organizationId/settings/agents': typeof AuthenticatedOrganizationOrganizationIdSettingsAgentsIndexRoute
   '/organization/$organizationId/settings/roles': typeof AuthenticatedOrganizationOrganizationIdSettingsRolesIndexRoute
+  '/organization/$organizationId/cluster/$clusterId/profile/$componentKey': typeof AuthenticatedOrganizationOrganizationIdClusterClusterIdProfileComponentKeyRoute
   '/organization/$organizationId/cluster/$clusterId/settings/addons': typeof AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsAddonsRoute
   '/organization/$organizationId/cluster/$clusterId/settings/advanced-settings': typeof AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsAdvancedSettingsRoute
   '/organization/$organizationId/cluster/$clusterId/settings/credentials': typeof AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsCredentialsRoute
@@ -2211,6 +2244,7 @@ export interface FileRoutesByTo {
   '/organization/$organizationId/project/$projectId/settings/general': typeof AuthenticatedOrganizationOrganizationIdProjectProjectIdSettingsGeneralRoute
   '/organization/$organizationId/settings/roles/edit/$roleId': typeof AuthenticatedOrganizationOrganizationIdSettingsRolesEditRoleIdRoute
   '/organization/$organizationId/cluster/$clusterId/deployments': typeof AuthenticatedOrganizationOrganizationIdClusterClusterIdDeploymentsIndexRoute
+  '/organization/$organizationId/cluster/$clusterId/profile': typeof AuthenticatedOrganizationOrganizationIdClusterClusterIdProfileIndexRoute
   '/organization/$organizationId/cluster/$clusterId/settings': typeof AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsIndexRoute
   '/organization/$organizationId/cluster/create/$slug': typeof AuthenticatedOrganizationOrganizationIdClusterCreateSlugIndexRoute
   '/organization/$organizationId/project/$projectId/deployment-rules': typeof AuthenticatedOrganizationOrganizationIdProjectProjectIdDeploymentRulesIndexRoute
@@ -2369,6 +2403,7 @@ export interface FileRoutesById {
   '/_authenticated/organization/$organizationId/$clusterId/': typeof AuthenticatedOrganizationOrganizationIdClusterIdIndexRoute
   '/_authenticated/organization/$organizationId/alerts/': typeof AuthenticatedOrganizationOrganizationIdAlertsIndexRoute
   '/_authenticated/organization/$organizationId/settings/': typeof AuthenticatedOrganizationOrganizationIdSettingsIndexRoute
+  '/_authenticated/organization/$organizationId/cluster/$clusterId/profile': typeof AuthenticatedOrganizationOrganizationIdClusterClusterIdProfileRouteRouteWithChildren
   '/_authenticated/organization/$organizationId/cluster/$clusterId/settings': typeof AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsRouteRouteWithChildren
   '/_authenticated/organization/$organizationId/cluster/create/$slug': typeof AuthenticatedOrganizationOrganizationIdClusterCreateSlugRouteRouteWithChildren
   '/_authenticated/organization/$organizationId/project/$projectId/settings': typeof AuthenticatedOrganizationOrganizationIdProjectProjectIdSettingsRouteRouteWithChildren
@@ -2384,6 +2419,7 @@ export interface FileRoutesById {
   '/_authenticated/organization/$organizationId/project/$projectId/': typeof AuthenticatedOrganizationOrganizationIdProjectProjectIdIndexRoute
   '/_authenticated/organization/$organizationId/settings/agents/': typeof AuthenticatedOrganizationOrganizationIdSettingsAgentsIndexRoute
   '/_authenticated/organization/$organizationId/settings/roles/': typeof AuthenticatedOrganizationOrganizationIdSettingsRolesIndexRoute
+  '/_authenticated/organization/$organizationId/cluster/$clusterId/profile/$componentKey': typeof AuthenticatedOrganizationOrganizationIdClusterClusterIdProfileComponentKeyRoute
   '/_authenticated/organization/$organizationId/cluster/$clusterId/settings/addons': typeof AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsAddonsRoute
   '/_authenticated/organization/$organizationId/cluster/$clusterId/settings/advanced-settings': typeof AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsAdvancedSettingsRoute
   '/_authenticated/organization/$organizationId/cluster/$clusterId/settings/credentials': typeof AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsCredentialsRoute
@@ -2406,6 +2442,7 @@ export interface FileRoutesById {
   '/_authenticated/organization/$organizationId/project/$projectId/settings/general': typeof AuthenticatedOrganizationOrganizationIdProjectProjectIdSettingsGeneralRoute
   '/_authenticated/organization/$organizationId/settings/roles/edit/$roleId': typeof AuthenticatedOrganizationOrganizationIdSettingsRolesEditRoleIdRoute
   '/_authenticated/organization/$organizationId/cluster/$clusterId/deployments/': typeof AuthenticatedOrganizationOrganizationIdClusterClusterIdDeploymentsIndexRoute
+  '/_authenticated/organization/$organizationId/cluster/$clusterId/profile/': typeof AuthenticatedOrganizationOrganizationIdClusterClusterIdProfileIndexRoute
   '/_authenticated/organization/$organizationId/cluster/$clusterId/settings/': typeof AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsIndexRoute
   '/_authenticated/organization/$organizationId/cluster/create/$slug/': typeof AuthenticatedOrganizationOrganizationIdClusterCreateSlugIndexRoute
   '/_authenticated/organization/$organizationId/project/$projectId/deployment-rules/': typeof AuthenticatedOrganizationOrganizationIdProjectProjectIdDeploymentRulesIndexRoute
@@ -2579,6 +2616,7 @@ export interface FileRouteTypes {
     | '/organization/$organizationId/$clusterId'
     | '/organization/$organizationId/alerts/'
     | '/organization/$organizationId/settings/'
+    | '/organization/$organizationId/cluster/$clusterId/profile'
     | '/organization/$organizationId/cluster/$clusterId/settings'
     | '/organization/$organizationId/cluster/create/$slug'
     | '/organization/$organizationId/project/$projectId/settings'
@@ -2594,6 +2632,7 @@ export interface FileRouteTypes {
     | '/organization/$organizationId/project/$projectId'
     | '/organization/$organizationId/settings/agents/'
     | '/organization/$organizationId/settings/roles'
+    | '/organization/$organizationId/cluster/$clusterId/profile/$componentKey'
     | '/organization/$organizationId/cluster/$clusterId/settings/addons'
     | '/organization/$organizationId/cluster/$clusterId/settings/advanced-settings'
     | '/organization/$organizationId/cluster/$clusterId/settings/credentials'
@@ -2616,6 +2655,7 @@ export interface FileRouteTypes {
     | '/organization/$organizationId/project/$projectId/settings/general'
     | '/organization/$organizationId/settings/roles/edit/$roleId'
     | '/organization/$organizationId/cluster/$clusterId/deployments'
+    | '/organization/$organizationId/cluster/$clusterId/profile/'
     | '/organization/$organizationId/cluster/$clusterId/settings/'
     | '/organization/$organizationId/cluster/create/$slug/'
     | '/organization/$organizationId/project/$projectId/deployment-rules'
@@ -2794,6 +2834,7 @@ export interface FileRouteTypes {
     | '/organization/$organizationId/project/$projectId'
     | '/organization/$organizationId/settings/agents'
     | '/organization/$organizationId/settings/roles'
+    | '/organization/$organizationId/cluster/$clusterId/profile/$componentKey'
     | '/organization/$organizationId/cluster/$clusterId/settings/addons'
     | '/organization/$organizationId/cluster/$clusterId/settings/advanced-settings'
     | '/organization/$organizationId/cluster/$clusterId/settings/credentials'
@@ -2816,6 +2857,7 @@ export interface FileRouteTypes {
     | '/organization/$organizationId/project/$projectId/settings/general'
     | '/organization/$organizationId/settings/roles/edit/$roleId'
     | '/organization/$organizationId/cluster/$clusterId/deployments'
+    | '/organization/$organizationId/cluster/$clusterId/profile'
     | '/organization/$organizationId/cluster/$clusterId/settings'
     | '/organization/$organizationId/cluster/create/$slug'
     | '/organization/$organizationId/project/$projectId/deployment-rules'
@@ -2973,6 +3015,7 @@ export interface FileRouteTypes {
     | '/_authenticated/organization/$organizationId/$clusterId/'
     | '/_authenticated/organization/$organizationId/alerts/'
     | '/_authenticated/organization/$organizationId/settings/'
+    | '/_authenticated/organization/$organizationId/cluster/$clusterId/profile'
     | '/_authenticated/organization/$organizationId/cluster/$clusterId/settings'
     | '/_authenticated/organization/$organizationId/cluster/create/$slug'
     | '/_authenticated/organization/$organizationId/project/$projectId/settings'
@@ -2988,6 +3031,7 @@ export interface FileRouteTypes {
     | '/_authenticated/organization/$organizationId/project/$projectId/'
     | '/_authenticated/organization/$organizationId/settings/agents/'
     | '/_authenticated/organization/$organizationId/settings/roles/'
+    | '/_authenticated/organization/$organizationId/cluster/$clusterId/profile/$componentKey'
     | '/_authenticated/organization/$organizationId/cluster/$clusterId/settings/addons'
     | '/_authenticated/organization/$organizationId/cluster/$clusterId/settings/advanced-settings'
     | '/_authenticated/organization/$organizationId/cluster/$clusterId/settings/credentials'
@@ -3010,6 +3054,7 @@ export interface FileRouteTypes {
     | '/_authenticated/organization/$organizationId/project/$projectId/settings/general'
     | '/_authenticated/organization/$organizationId/settings/roles/edit/$roleId'
     | '/_authenticated/organization/$organizationId/cluster/$clusterId/deployments/'
+    | '/_authenticated/organization/$organizationId/cluster/$clusterId/profile/'
     | '/_authenticated/organization/$organizationId/cluster/$clusterId/settings/'
     | '/_authenticated/organization/$organizationId/cluster/create/$slug/'
     | '/_authenticated/organization/$organizationId/project/$projectId/deployment-rules/'
@@ -3573,6 +3618,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsRouteRouteImport
       parentRoute: typeof AuthenticatedOrganizationOrganizationIdRouteRoute
     }
+    '/_authenticated/organization/$organizationId/cluster/$clusterId/profile': {
+      id: '/_authenticated/organization/$organizationId/cluster/$clusterId/profile'
+      path: '/cluster/$clusterId/profile'
+      fullPath: '/organization/$organizationId/cluster/$clusterId/profile'
+      preLoaderRoute: typeof AuthenticatedOrganizationOrganizationIdClusterClusterIdProfileRouteRouteImport
+      parentRoute: typeof AuthenticatedOrganizationOrganizationIdRouteRoute
+    }
     '/_authenticated/organization/$organizationId/project/$projectId/settings/': {
       id: '/_authenticated/organization/$organizationId/project/$projectId/settings/'
       path: '/'
@@ -3601,6 +3653,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsIndexRouteImport
       parentRoute: typeof AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsRouteRoute
     }
+    '/_authenticated/organization/$organizationId/cluster/$clusterId/profile/': {
+      id: '/_authenticated/organization/$organizationId/cluster/$clusterId/profile/'
+      path: '/'
+      fullPath: '/organization/$organizationId/cluster/$clusterId/profile/'
+      preLoaderRoute: typeof AuthenticatedOrganizationOrganizationIdClusterClusterIdProfileIndexRouteImport
+      parentRoute: typeof AuthenticatedOrganizationOrganizationIdClusterClusterIdProfileRouteRoute
+    }
     '/_authenticated/organization/$organizationId/cluster/$clusterId/deployments/': {
       id: '/_authenticated/organization/$organizationId/cluster/$clusterId/deployments/'
       path: '/cluster/$clusterId/deployments'
@@ -3755,6 +3814,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsAddonsRouteImport
       parentRoute: typeof AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsRouteRoute
     }
+    '/_authenticated/organization/$organizationId/cluster/$clusterId/profile/$componentKey': {
+      id: '/_authenticated/organization/$organizationId/cluster/$clusterId/profile/$componentKey'
+      path: '/$componentKey'
+      fullPath: '/organization/$organizationId/cluster/$clusterId/profile/$componentKey'
+      preLoaderRoute: typeof AuthenticatedOrganizationOrganizationIdClusterClusterIdProfileComponentKeyRouteImport
+      parentRoute: typeof AuthenticatedOrganizationOrganizationIdClusterClusterIdProfileRouteRoute
+    }
     '/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/': {
       id: '/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/'
       path: '/project/$projectId/environment/$environmentId'
@@ -4718,6 +4784,24 @@ const AuthenticatedOrganizationOrganizationIdSettingsRouteRouteWithChildren =
     AuthenticatedOrganizationOrganizationIdSettingsRouteRouteChildren,
   )
 
+interface AuthenticatedOrganizationOrganizationIdClusterClusterIdProfileRouteRouteChildren {
+  AuthenticatedOrganizationOrganizationIdClusterClusterIdProfileComponentKeyRoute: typeof AuthenticatedOrganizationOrganizationIdClusterClusterIdProfileComponentKeyRoute
+  AuthenticatedOrganizationOrganizationIdClusterClusterIdProfileIndexRoute: typeof AuthenticatedOrganizationOrganizationIdClusterClusterIdProfileIndexRoute
+}
+
+const AuthenticatedOrganizationOrganizationIdClusterClusterIdProfileRouteRouteChildren: AuthenticatedOrganizationOrganizationIdClusterClusterIdProfileRouteRouteChildren =
+  {
+    AuthenticatedOrganizationOrganizationIdClusterClusterIdProfileComponentKeyRoute:
+      AuthenticatedOrganizationOrganizationIdClusterClusterIdProfileComponentKeyRoute,
+    AuthenticatedOrganizationOrganizationIdClusterClusterIdProfileIndexRoute:
+      AuthenticatedOrganizationOrganizationIdClusterClusterIdProfileIndexRoute,
+  }
+
+const AuthenticatedOrganizationOrganizationIdClusterClusterIdProfileRouteRouteWithChildren =
+  AuthenticatedOrganizationOrganizationIdClusterClusterIdProfileRouteRoute._addFileChildren(
+    AuthenticatedOrganizationOrganizationIdClusterClusterIdProfileRouteRouteChildren,
+  )
+
 interface AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsRouteRouteChildren {
   AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsAddonsRoute: typeof AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsAddonsRoute
   AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsAdvancedSettingsRoute: typeof AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsAdvancedSettingsRoute
@@ -5285,6 +5369,7 @@ interface AuthenticatedOrganizationOrganizationIdRouteRouteChildren {
   AuthenticatedOrganizationOrganizationIdIndexRoute: typeof AuthenticatedOrganizationOrganizationIdIndexRoute
   AuthenticatedOrganizationOrganizationIdClusterNewRoute: typeof AuthenticatedOrganizationOrganizationIdClusterNewRoute
   AuthenticatedOrganizationOrganizationIdClusterIdIndexRoute: typeof AuthenticatedOrganizationOrganizationIdClusterIdIndexRoute
+  AuthenticatedOrganizationOrganizationIdClusterClusterIdProfileRouteRoute: typeof AuthenticatedOrganizationOrganizationIdClusterClusterIdProfileRouteRouteWithChildren
   AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsRouteRoute: typeof AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsRouteRouteWithChildren
   AuthenticatedOrganizationOrganizationIdClusterCreateSlugRouteRoute: typeof AuthenticatedOrganizationOrganizationIdClusterCreateSlugRouteRouteWithChildren
   AuthenticatedOrganizationOrganizationIdProjectProjectIdSettingsRouteRoute: typeof AuthenticatedOrganizationOrganizationIdProjectProjectIdSettingsRouteRouteWithChildren
@@ -5351,6 +5436,8 @@ const AuthenticatedOrganizationOrganizationIdRouteRouteChildren: AuthenticatedOr
       AuthenticatedOrganizationOrganizationIdClusterNewRoute,
     AuthenticatedOrganizationOrganizationIdClusterIdIndexRoute:
       AuthenticatedOrganizationOrganizationIdClusterIdIndexRoute,
+    AuthenticatedOrganizationOrganizationIdClusterClusterIdProfileRouteRoute:
+      AuthenticatedOrganizationOrganizationIdClusterClusterIdProfileRouteRouteWithChildren,
     AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsRouteRoute:
       AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsRouteRouteWithChildren,
     AuthenticatedOrganizationOrganizationIdClusterCreateSlugRouteRoute:
diff --git a/apps/console/src/routes/_authenticated/organization/$organizationId/cluster/$clusterId/profile/$componentKey.tsx b/apps/console/src/routes/_authenticated/organization/$organizationId/cluster/$clusterId/profile/$componentKey.tsx
new file mode 100644
index 00000000000..7559880c93b
--- /dev/null
+++ b/apps/console/src/routes/_authenticated/organization/$organizationId/cluster/$clusterId/profile/$componentKey.tsx
@@ -0,0 +1,48 @@
+import { Navigate, createFileRoute, useParams } from '@tanstack/react-router'
+import { ClusterProfileFeature, resolveProfileSelection, useClusterProfileTree } from '@qovery/domains/clusters/feature'
+
+export const Route = createFileRoute(
+  '/_authenticated/organization/$organizationId/cluster/$clusterId/profile/$componentKey'
+)({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  const { organizationId = '', clusterId = '' } = useParams({ strict: false })
+  const { componentKey } = Route.useParams()
+  const { search } = Route.useSearch()
+  const navigate = Route.useNavigate()
+  const { profileTree, isLoading } = useClusterProfileTree({ organizationId, clusterId })
+  // Disabled layers and components with nothing to configure cannot be opened: the URL follows what is displayed.
+  const resolvedComponentKey = resolveProfileSelection(profileTree, componentKey).component?.key
+
+  if (!isLoading && resolvedComponentKey && resolvedComponentKey !== componentKey) {
+    return (
+      <Navigate
+        to="/organization/$organizationId/cluster/$clusterId/profile/$componentKey"
+        params={{ organizationId, clusterId, componentKey: resolvedComponentKey }}
+        search={(previous) => previous}
+        replace
+      />
+    )
+  }
+
+  return (
+    <ClusterProfileFeature
+      // The route is reused across clusters: remount so unsaved edits never carry over to another cluster.
+      key={clusterId}
+      activeComponentKey={componentKey}
+      search={search}
+      onActiveComponentChange={(nextComponentKey) =>
+        navigate({
+          to: '/organization/$organizationId/cluster/$clusterId/profile/$componentKey',
+          params: (previous) => ({ ...previous, componentKey: nextComponentKey }),
+          search: (previous) => previous,
+        })
+      }
+      onSearchChange={(nextSearch) =>
+        navigate({ search: (previous) => ({ ...previous, search: nextSearch || undefined }), replace: true })
+      }
+    />
+  )
+}
diff --git a/apps/console/src/routes/_authenticated/organization/$organizationId/cluster/$clusterId/profile/index.tsx b/apps/console/src/routes/_authenticated/organization/$organizationId/cluster/$clusterId/profile/index.tsx
new file mode 100644
index 00000000000..6b16d2f8a04
--- /dev/null
+++ b/apps/console/src/routes/_authenticated/organization/$organizationId/cluster/$clusterId/profile/index.tsx
@@ -0,0 +1,35 @@
+import { Navigate, createFileRoute, useParams } from '@tanstack/react-router'
+import { ClusterProfileFeature, resolveProfileSelection, useClusterProfileTree } from '@qovery/domains/clusters/feature'
+import { LoaderSpinner } from '@qovery/shared/ui'
+
+export const Route = createFileRoute('/_authenticated/organization/$organizationId/cluster/$clusterId/profile/')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  const { organizationId = '', clusterId = '' } = useParams({ strict: false })
+  const { profileTree, isLoading, isError } = useClusterProfileTree({ organizationId, clusterId })
+  const componentKey = resolveProfileSelection(profileTree).component?.key
+
+  if (isLoading) {
+    return (
+      <div className="flex min-h-page-container items-center justify-center">
+        <LoaderSpinner />
+      </div>
+    )
+  }
+
+  // Without a component to open, the feature shows the error or empty state.
+  if (isError || !componentKey) {
+    return <ClusterProfileFeature key={clusterId} />
+  }
+
+  return (
+    <Navigate
+      to="/organization/$organizationId/cluster/$clusterId/profile/$componentKey"
+      params={{ organizationId, clusterId, componentKey }}
+      search={(previous) => previous}
+      replace
+    />
+  )
+}
diff --git a/apps/console/src/routes/_authenticated/organization/$organizationId/cluster/$clusterId/profile/route.tsx b/apps/console/src/routes/_authenticated/organization/$organizationId/cluster/$clusterId/profile/route.tsx
new file mode 100644
index 00000000000..87296f8db54
--- /dev/null
+++ b/apps/console/src/routes/_authenticated/organization/$organizationId/cluster/$clusterId/profile/route.tsx
@@ -0,0 +1,39 @@
+import { Navigate, Outlet, createFileRoute, useParams } from '@tanstack/react-router'
+import { z } from 'zod'
+import { useCluster, useIsOperatorAttached } from '@qovery/domains/clusters/feature'
+import { LoaderSpinner } from '@qovery/shared/ui'
+import { useDocumentTitle } from '@qovery/shared/util-hooks'
+
+export const Route = createFileRoute('/_authenticated/organization/$organizationId/cluster/$clusterId/profile')({
+  component: RouteComponent,
+  validateSearch: z.object({ search: z.string().optional() }),
+})
+
+function RouteComponent() {
+  useDocumentTitle('Cluster - Profile')
+  const { organizationId = '', clusterId = '' } = useParams({ strict: false })
+  const { data: cluster, isLoading: isClusterLoading } = useCluster({ organizationId, clusterId })
+  // Only Engine v2 clusters, attached to the Qovery Operator, have a profile.
+  const isOperatorAttached = useIsOperatorAttached(cluster)
+
+  // Redirecting before the flags, the cluster and its Operator status are loaded would turn away users who have access.
+  if (isClusterLoading || (cluster && isOperatorAttached === undefined)) {
+    return (
+      <div className="flex min-h-page-container items-center justify-center">
+        <LoaderSpinner />
+      </div>
+    )
+  }
+
+  if (!isOperatorAttached && organizationId && clusterId) {
+    return (
+      <Navigate
+        to="/organization/$organizationId/cluster/$clusterId/overview"
+        params={{ organizationId, clusterId }}
+        replace
+      />
+    )
+  }
+
+  return <Outlet />
+}
diff --git a/apps/console/src/routes/_authenticated/organization/$organizationId/cluster/new.tsx b/apps/console/src/routes/_authenticated/organization/$organizationId/cluster/new.tsx
index e955a38d1ce..31789bf2153 100644
--- a/apps/console/src/routes/_authenticated/organization/$organizationId/cluster/new.tsx
+++ b/apps/console/src/routes/_authenticated/organization/$organizationId/cluster/new.tsx
@@ -1,5 +1,6 @@
 import { createFileRoute, useParams } from '@tanstack/react-router'
-import { ClusterNew } from '@qovery/domains/clusters/feature'
+import { useFeatureFlagEnabled } from 'posthog-js/react'
+import { ClusterAdd, ClusterNew } from '@qovery/domains/clusters/feature'
 import { Heading, Icon, Link, Section } from '@qovery/shared/ui'
 import { useDocumentTitle } from '@qovery/shared/util-hooks'
 
@@ -9,7 +10,8 @@ export const Route = createFileRoute('/_authenticated/organization/$organization
 
 function RouteComponent() {
   const { organizationId = '' } = useParams({ strict: false })
-  useDocumentTitle('Create new cluster')
+  const isEngineV2Enabled = Boolean(useFeatureFlagEnabled('engine-v2-platform-configuration'))
+  useDocumentTitle(isEngineV2Enabled ? 'Add cluster' : 'Create new cluster')
 
   return (
     <Section className="flex w-full flex-1 flex-col pb-48 pt-6">
@@ -20,12 +22,12 @@ function RouteComponent() {
         className="mb-2 text-xs"
       >
         <Icon iconName="arrow-left" className="mr-1" />
-        Back to clusters
+        {isEngineV2Enabled ? 'Back to cluster list' : 'Back to clusters'}
       </Link>
       <div className="flex flex-col border-b border-neutral pb-6">
-        <Heading className="text-2xl">Install cluster</Heading>
+        <Heading className="text-2xl">{isEngineV2Enabled ? 'Add cluster' : 'Install cluster'}</Heading>
       </div>
-      <ClusterNew />
+      {isEngineV2Enabled ? <ClusterAdd /> : <ClusterNew />}
     </Section>
   )
 }
diff --git a/apps/console/src/routes/_authenticated/organization/route.tsx b/apps/console/src/routes/_authenticated/organization/route.tsx
index a7d05cc0ce5..96c264313c7 100644
--- a/apps/console/src/routes/_authenticated/organization/route.tsx
+++ b/apps/console/src/routes/_authenticated/organization/route.tsx
@@ -4,7 +4,7 @@ import posthog from 'posthog-js'
 import { useFeatureFlagEnabled } from 'posthog-js/react'
 import { type BlueprintDetailsResponse, type Cluster } from 'qovery-typescript-axios'
 import { Suspense, useEffect, useLayoutEffect, useRef, useState } from 'react'
-import { useClusters } from '@qovery/domains/clusters/feature'
+import { useClusters, useIsOperatorAttached } from '@qovery/domains/clusters/feature'
 import { useEnvironment } from '@qovery/domains/environments/feature'
 import { useProject } from '@qovery/domains/projects/feature'
 import {
@@ -118,6 +118,12 @@ const CLUSTER_TABS: NavigationTab[] = [
     iconName: 'terminal',
     routeId: '/_authenticated/organization/$organizationId/cluster/$clusterId/cloud-shell',
   },
+  {
+    id: 'profile',
+    label: 'Profile',
+    iconName: 'layer-group',
+    routeId: '/_authenticated/organization/$organizationId/cluster/$clusterId/profile',
+  },
   {
     id: 'settings',
     label: 'Settings',
@@ -393,6 +399,8 @@ function useNavigationContext(): NavigationContext | null {
   })
   const hasAlerting = clusters.some((cluster) => cluster.metrics_parameters?.configuration?.alerting?.enabled)
   const currentCluster = clusters.find((cluster) => cluster.id === environment?.cluster_id)
+  // Only Engine v2 clusters, attached to the Qovery Operator, have a profile.
+  const isProfileAvailable = Boolean(useIsOperatorAttached(clusters.find((cluster) => cluster.id === params.clusterId)))
   const blueprintId = service && isBlueprintService(service) && isTerraform(service) ? service.blueprint_id : ''
   const { data: blueprint } = useBlueprint({
     blueprintId,
@@ -423,9 +431,11 @@ function useNavigationContext(): NavigationContext | null {
             ? getServiceTabs(service, currentCluster, isAgenticWorkflowEnabled, blueprint)
             : context.type === 'organization'
               ? context.tabs.filter((tab) => hasAlerting || tab.id !== 'alerts')
-              : context.type === 'environment'
-                ? context.tabs.filter((tab) => isAgenticWorkflowEnabled || tab.id !== 'automation')
-                : context.tabs
+              : context.type === 'cluster'
+                ? context.tabs.filter((tab) => isProfileAvailable || tab.id !== 'profile')
+                : context.type === 'environment'
+                  ? context.tabs.filter((tab) => isAgenticWorkflowEnabled || tab.id !== 'automation')
+                  : context.tabs
 
         return {
           type: context.type,
@@ -546,6 +556,7 @@ const fullWidthRouteIds: FileRouteTypes['id'][] = [
   '/_authenticated/organization/$organizationId/cluster/$clusterId/cluster-logs',
   '/_authenticated/organization/$organizationId/cluster/$clusterId/deployments/logs/$deploymentId',
   '/_authenticated/organization/$organizationId/cluster/$clusterId/cloud-shell',
+  '/_authenticated/organization/$organizationId/cluster/$clusterId/profile',
   '/_authenticated/organization/$organizationId/cluster/$clusterId/settings',
   '/_authenticated/organization/$organizationId/project/$projectId/settings',
   '/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/settings',
diff --git a/apps/console/vite.config.ts b/apps/console/vite.config.ts
index c19f5e87ce8..9541d8e35ec 100644
--- a/apps/console/vite.config.ts
+++ b/apps/console/vite.config.ts
@@ -44,6 +44,7 @@ export default defineConfig(({ mode }) => {
       tanstackRouter({
         target: 'react',
         autoCodeSplitting: true,
+        routeFileIgnorePattern: '\\.(spec|test)\\.tsx?$',
       }),
       viteStaticCopy({
         targets: [
diff --git a/libs/domains/clusters/data-access/src/index.ts b/libs/domains/clusters/data-access/src/index.ts
index e8ca0eb7ad5..8e8229f53d9 100644
--- a/libs/domains/clusters/data-access/src/index.ts
+++ b/libs/domains/clusters/data-access/src/index.ts
@@ -1,4 +1,5 @@
 export * from './lib/domains-clusters-data-access'
+export * from './lib/platform-configuration/platform-configuration'
 export { isGcpCluster } from './lib/cluster-checks/is-gcp-cluster'
 export { isAwsCluster } from './lib/cluster-checks/is-aws-cluster'
 export { excludeSecretManagerAccess } from './lib/secret-manager/exclude-secret-manager-access'
diff --git a/libs/domains/clusters/data-access/src/lib/domains-clusters-data-access.ts b/libs/domains/clusters/data-access/src/lib/domains-clusters-data-access.ts
index e2e1e85d328..d639e790b66 100644
--- a/libs/domains/clusters/data-access/src/lib/domains-clusters-data-access.ts
+++ b/libs/domains/clusters/data-access/src/lib/domains-clusters-data-access.ts
@@ -9,17 +9,22 @@ import {
   type ClusterDeleteMode,
   ClusterDeploymentHistoryApi,
   type ClusterDnsProviderRequest,
+  ClusterOperatorApi,
+  type ClusterOperatorUpdateRequest,
   type ClusterRequest,
   type ClusterRoutingTableRequest,
   ClustersApi,
   KubernetesEnum,
   OrganizationMainCallsApi,
   SecretManagerAccessApi,
+  type SelfManagedClusterRequest,
 } from 'qovery-typescript-axios'
 import { type ClusterMetricsDto, type ClusterStatusDto } from 'qovery-ws-typescript-axios'
+import { isHttpStatus } from '@qovery/shared/utils'
 
 const clusterApi = new ClustersApi()
 const clusterDeploymentHistoryApi = new ClusterDeploymentHistoryApi()
+const clusterOperatorApi = new ClusterOperatorApi()
 const argoCdApi = new ArgoCDApi()
 const secretManagerApi = new SecretManagerAccessApi()
 const organizationApi = new OrganizationMainCallsApi()
@@ -50,6 +55,26 @@ export const clusters = createQueryKeys('clusters', {
       return response.data
     },
   }),
+  operatorStatus: ({ organizationId, clusterId }: { organizationId: string; clusterId: string }) => ({
+    queryKey: [organizationId, clusterId],
+    async queryFn() {
+      try {
+        const response = await clusterOperatorApi.getClusterOperatorStatus(organizationId, clusterId)
+        return response.data
+      } catch (error) {
+        // No Operator state: the cluster is not enrolled in the Engine v2 Operator path.
+        if (isHttpStatus(error, 404)) return null
+        throw error
+      }
+    },
+  }),
+  operatorBootstrap: ({ organizationId, clusterId }: { organizationId: string; clusterId: string }) => ({
+    queryKey: [organizationId, clusterId],
+    async queryFn() {
+      const response = await clusterOperatorApi.getClusterOperatorBootstrap(organizationId, clusterId)
+      return response.data
+    },
+  }),
   eksAnywhereCommits: ({ organizationId, clusterId }: { organizationId: string; clusterId: string }) => ({
     queryKey: [organizationId, clusterId],
     async queryFn() {
@@ -203,6 +228,33 @@ export const clusters = createQueryKeys('clusters', {
 })
 
 export const mutations = {
+  async updateClusterOperator({
+    organizationId,
+    clusterId,
+    chartVersion,
+    imageVersion,
+  }: {
+    organizationId: string
+    clusterId: string
+    chartVersion: ClusterOperatorUpdateRequest['chart_version']
+    imageVersion?: ClusterOperatorUpdateRequest['image_version']
+  }) {
+    const response = await clusterOperatorApi.updateClusterOperator(organizationId, clusterId, {
+      chart_version: chartVersion,
+      image_version: imageVersion,
+    })
+    return response.data
+  },
+  async createSelfManagedCluster({
+    organizationId,
+    clusterRequest,
+  }: {
+    organizationId: string
+    clusterRequest: SelfManagedClusterRequest
+  }) {
+    const response = await clusterApi.createSelfManagedCluster(organizationId, clusterRequest)
+    return response.data
+  },
   async createCluster({ organizationId, clusterRequest }: { organizationId: string; clusterRequest: ClusterRequest }) {
     const response = await clusterApi.createCluster(organizationId, clusterRequest)
     return response.data
diff --git a/libs/domains/clusters/data-access/src/lib/platform-configuration/platform-configuration.ts b/libs/domains/clusters/data-access/src/lib/platform-configuration/platform-configuration.ts
new file mode 100644
index 00000000000..72bd8473781
--- /dev/null
+++ b/libs/domains/clusters/data-access/src/lib/platform-configuration/platform-configuration.ts
@@ -0,0 +1,105 @@
+import { createQueryKeys } from '@lukemorales/query-key-factory'
+import {
+  type ClusterPlatformConfigurationRequest,
+  type PlatformCloudVendor,
+  type PlatformClusterMode,
+  type PlatformComponentConfigurationPreviewRequest,
+  PlatformConfigurationApi,
+} from 'qovery-typescript-axios'
+import { isHttpStatus } from '@qovery/shared/utils'
+
+const platformConfigurationApi = new PlatformConfigurationApi()
+
+export const platformConfiguration = createQueryKeys('platformConfiguration', {
+  templates: ({
+    organizationId,
+    clusterMode,
+    cloudProvider,
+  }: {
+    organizationId: string
+    clusterMode?: PlatformClusterMode
+    cloudProvider?: PlatformCloudVendor
+  }) => ({
+    queryKey: [organizationId, clusterMode, cloudProvider],
+    async queryFn() {
+      const response = await platformConfigurationApi.listPlatformTemplates(organizationId, clusterMode, cloudProvider)
+      return response.data.results
+    },
+  }),
+  // Resolves a component draft against a template release, before the cluster exists.
+  templateComponentConfiguration: ({
+    organizationId,
+    templateKey,
+    templateVersion,
+    componentKey,
+    clusterMode,
+    cloudProvider,
+    request,
+  }: {
+    organizationId: string
+    templateKey: string
+    templateVersion: string
+    componentKey: string
+    clusterMode: PlatformClusterMode
+    cloudProvider: PlatformCloudVendor
+    request: PlatformComponentConfigurationPreviewRequest
+  }) => ({
+    queryKey: [organizationId, templateKey, templateVersion, componentKey, clusterMode, cloudProvider, request],
+    async queryFn() {
+      const response = await platformConfigurationApi.resolvePlatformTemplateComponentConfiguration(
+        organizationId,
+        templateKey,
+        templateVersion,
+        componentKey,
+        clusterMode,
+        cloudProvider,
+        request
+      )
+      return response.data
+    },
+  }),
+  configuration: ({ clusterId }: { clusterId: string }) => ({
+    queryKey: [clusterId],
+    async queryFn() {
+      try {
+        const response = await platformConfigurationApi.getClusterPlatformConfiguration(clusterId)
+        return response.data
+      } catch (error) {
+        if (isHttpStatus(error, 404)) return null
+        throw error
+      }
+    },
+  }),
+  componentConfiguration: ({
+    clusterId,
+    componentKey,
+    request,
+  }: {
+    clusterId: string
+    componentKey: string
+    request: PlatformComponentConfigurationPreviewRequest
+  }) => ({
+    queryKey: [clusterId, componentKey, request],
+    async queryFn() {
+      const response = await platformConfigurationApi.resolveClusterPlatformComponentConfiguration(
+        clusterId,
+        componentKey,
+        request
+      )
+      return response.data
+    },
+  }),
+})
+
+export const platformConfigurationMutations = {
+  async updateConfiguration({
+    clusterId,
+    configurationRequest,
+  }: {
+    clusterId: string
+    configurationRequest: ClusterPlatformConfigurationRequest
+  }) {
+    const response = await platformConfigurationApi.updateClusterPlatformConfiguration(clusterId, configurationRequest)
+    return response.data
+  },
+}
diff --git a/libs/domains/clusters/feature/src/index.ts b/libs/domains/clusters/feature/src/index.ts
index 30fdf89ed64..b4e0c7de319 100644
--- a/libs/domains/clusters/feature/src/index.ts
+++ b/libs/domains/clusters/feature/src/index.ts
@@ -7,6 +7,9 @@ export * from './lib/cluster-actions/cluster-actions'
 export * from './lib/cluster-avatar/cluster-avatar'
 export * from './lib/cluster-advanced-settings/cluster-advanced-settings'
 export * from './lib/cluster-advanced-settings/cluster-advanced-settings-feature'
+export * from './lib/cluster-profile/cluster-profile'
+export * from './lib/cluster-profile/profile-tree'
+export * from './lib/cluster-profile/use-cluster-profile-tree'
 export * from './lib/cluster-advanced-settings/init-form-values'
 export * from './lib/cluster-setup/cluster-setup'
 export * from './lib/cluster-need-redeploy-flag/cluster-need-redeploy-flag'
@@ -59,6 +62,10 @@ export * from './lib/hooks/use-cluster-status/use-cluster-status'
 export * from './lib/hooks/use-services-cluster/use-services-cluster'
 export * from './lib/hooks/use-cluster-statuses/use-cluster-statuses'
 export * from './lib/hooks/use-cluster/use-cluster'
+export * from './lib/hooks/use-platform-templates/use-platform-templates'
+export * from './lib/hooks/use-platform-configuration/use-platform-configuration'
+export * from './lib/hooks/use-platform-component-configuration/use-platform-component-configuration'
+export * from './lib/hooks/use-platform-component-configurations/use-platform-component-configurations'
 export * from './lib/hooks/use-clusters/use-clusters'
 export * from './lib/hooks/use-argocd-credentials/use-argocd-credentials'
 export * from './lib/hooks/use-cluster-advanced-settings/use-cluster-advanced-settings'
@@ -91,3 +98,10 @@ export * from './lib/utils/derive-global-spot-enabled'
 export * from './lib/utils/map-creation-spot-to-node-pools'
 export * from './lib/utils/normalize-karpenter-spot'
 export * from './lib/cluster-resources-settings/cluster-resources-settings'
+export * from './lib/cluster-add/cluster-add'
+export * from './lib/hooks/use-create-self-managed-cluster/use-create-self-managed-cluster'
+export * from './lib/hooks/use-cluster-operator-status/use-cluster-operator-status'
+export * from './lib/hooks/use-update-platform-configuration/use-update-platform-configuration'
+export * from './lib/hooks/use-cluster-operator-bootstrap/use-cluster-operator-bootstrap'
+export * from './lib/hooks/use-is-operator-attached/use-is-operator-attached'
+export * from './lib/hooks/use-update-cluster-operator/use-update-cluster-operator'
diff --git a/libs/domains/clusters/feature/src/lib/cluster-actions/cluster-actions.spec.tsx b/libs/domains/clusters/feature/src/lib/cluster-actions/cluster-actions.spec.tsx
index 0d34841026c..57652a02284 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-actions/cluster-actions.spec.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-actions/cluster-actions.spec.tsx
@@ -8,8 +8,12 @@ import {
 import type { ReactNode } from 'react'
 import { clusterFactoryMock } from '@qovery/shared/factories'
 import { renderWithProviders, screen } from '@qovery/shared/util-tests'
+import { useIsOperatorAttached } from '../hooks/use-is-operator-attached/use-is-operator-attached'
 import { ClusterActions } from './cluster-actions'
 
+jest.mock('../hooks/use-is-operator-attached/use-is-operator-attached')
+const mockUseIsOperatorAttached = useIsOperatorAttached as jest.Mock
+
 const mockCluster = clusterFactoryMock(1)[0]
 const mockOpenModal = jest.fn()
 const mockOpenModalConfirmation = jest.fn()
@@ -54,6 +58,7 @@ jest.mock('@qovery/shared/util-hooks', () => ({
 describe('ClusterActions', () => {
   beforeEach(() => {
     jest.clearAllMocks()
+    mockUseIsOperatorAttached.mockReturnValue(false)
     mockCluster.deployment_status = ClusterDeploymentStatusEnum.UP_TO_DATE
     mockClusterStatus = {
       cluster_id: mockCluster.id,
@@ -310,4 +315,65 @@ describe('ClusterActions', () => {
     expect(screen.getByRole('button', { name: 'Deployments' })).toBeInTheDocument()
     expect(screen.queryByRole('button', { name: 'Logs' })).not.toBeInTheDocument()
   })
+
+  describe('clusters with an attached Operator', () => {
+    const selfManagedCluster = {
+      ...mockCluster,
+      kubernetes: KubernetesEnum.SELF_MANAGED,
+      cloud_provider: 'AWS' as const,
+    }
+
+    it('keeps the installation guide for self-managed clusters without an attached Operator', () => {
+      const { container } = renderWithProviders(
+        <ClusterActions cluster={selfManagedCluster} clusterStatus={mockClusterStatus} />
+      )
+
+      // The installation guide button is only named by its tooltip.
+      expect(container.querySelector('.fa-circle-info')).toBeInTheDocument()
+      expect(screen.queryByLabelText(/manage deployment/i)).not.toBeInTheDocument()
+    })
+
+    it('offers to deploy a cluster with an attached Operator, without stopping it', async () => {
+      mockUseIsOperatorAttached.mockReturnValue(true)
+      const { userEvent } = renderWithProviders(
+        <ClusterActions
+          cluster={selfManagedCluster}
+          clusterStatus={{ ...mockClusterStatus, status: ClusterStateEnum.READY }}
+        />,
+        { container: document.body }
+      )
+
+      expect(document.body.querySelector('.fa-circle-info')).not.toBeInTheDocument()
+      await userEvent.click(screen.getByLabelText(/manage deployment/i))
+
+      expect(screen.getByRole('menuitem', { name: 'Deploy' })).toBeInTheDocument()
+      expect(screen.queryByRole('menuitem', { name: /stop/i })).not.toBeInTheDocument()
+    })
+
+    it('offers to redeploy a deployed cluster with an attached Operator, without upgrading Kubernetes', async () => {
+      mockUseIsOperatorAttached.mockReturnValue(true)
+      const { userEvent } = renderWithProviders(
+        <ClusterActions
+          cluster={selfManagedCluster}
+          clusterStatus={{ ...mockClusterStatus, next_k8s_available_version: '1.29' }}
+        />,
+        { container: document.body }
+      )
+
+      await userEvent.click(screen.getByLabelText(/manage deployment/i))
+
+      expect(screen.getByRole('menuitem', { name: 'Update' })).toBeInTheDocument()
+      expect(screen.queryByRole('menuitem', { name: /upgrade k8s/i })).not.toBeInTheDocument()
+      expect(screen.queryByRole('menuitem', { name: /stop/i })).not.toBeInTheDocument()
+    })
+
+    it('shows the deployments card action for clusters with an attached Operator', () => {
+      mockUseIsOperatorAttached.mockReturnValue(true)
+      renderWithProviders(
+        <ClusterActions cluster={selfManagedCluster} clusterStatus={mockClusterStatus} variant="card" />
+      )
+
+      expect(screen.getByRole('button', { name: 'Deployments' })).toBeInTheDocument()
+    })
+  })
 })
diff --git a/libs/domains/clusters/feature/src/lib/cluster-actions/cluster-actions.tsx b/libs/domains/clusters/feature/src/lib/cluster-actions/cluster-actions.tsx
index 7b43dce6519..2216439e960 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-actions/cluster-actions.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-actions/cluster-actions.tsx
@@ -25,6 +25,7 @@ import { useClusterRunningStatus } from '../hooks/use-cluster-running-status/use
 import { useDeployCluster } from '../hooks/use-deploy-cluster/use-deploy-cluster'
 import { useDownloadKubeconfig } from '../hooks/use-download-kubeconfig/use-download-kubeconfig'
 import { useEksAnywhereClusterJwt } from '../hooks/use-eks-anywhere-cluster-jwt/use-eks-anywhere-cluster-jwt'
+import { useIsOperatorAttached } from '../hooks/use-is-operator-attached/use-is-operator-attached'
 import { useStopCluster } from '../hooks/use-stop-cluster/use-stop-cluster'
 import { useUpdateEksAnywhereCommit } from '../hooks/use-update-eks-anywhere-commit/use-update-eks-anywhere-commit'
 import { useUpgradeCluster } from '../hooks/use-upgrade-cluster/use-upgrade-cluster'
@@ -36,10 +37,13 @@ function MenuManageDeployment({
   cluster,
   clusterStatus,
   variant = 'default',
+  isOperatorAttached = false,
 }: {
   cluster: Cluster
   clusterStatus: ClusterStatus
   variant?: ActionToolbarVariant
+  // The cluster is attached to the Qovery Operator: Qovery only deploys its platform profile, it cannot stop or upgrade it.
+  isOperatorAttached?: boolean
 }) {
   const { openModalConfirmation } = useModalConfirmation()
   const { openModal, closeModal } = useModal()
@@ -63,7 +67,8 @@ function MenuManageDeployment({
     clusterStatus.next_k8s_available_version &&
     clusterStatus.next_k8s_available_version !== null &&
     clusterStatus.status === 'DEPLOYED' &&
-    cluster.kubernetes !== 'PARTIALLY_MANAGED'
+    cluster.kubernetes !== 'PARTIALLY_MANAGED' &&
+    !isOperatorAttached
   const clusterNeedUpdate = cluster.deployment_status !== 'UP_TO_DATE' && clusterStatus.status !== 'STOPPED'
   const isEksAnywhereCluster = cluster.kubernetes === 'PARTIALLY_MANAGED'
   const hasEksAnywhereGitRepository = Boolean(
@@ -202,7 +207,8 @@ function MenuManageDeployment({
         {tooltipClusterNeedUpdate}
       </DropdownMenu.Item>
     ),
-    cluster.cloud_provider !== 'GCP' &&
+    !isOperatorAttached &&
+      cluster.cloud_provider !== 'GCP' &&
       cluster.cloud_provider !== 'AZURE' &&
       isStopAvailable(clusterStatus.status) &&
       cluster.kubernetes !== 'PARTIALLY_MANAGED' && (
@@ -422,6 +428,7 @@ export function ClusterActions({ cluster, clusterStatus, variant = 'default' }:
     organizationId: cluster.organization.id,
     clusterId: cluster.id,
   })
+  const isOperatorAttached = useIsOperatorAttached(cluster)
 
   const searchParams = useMemo(() => {
     // @ts-expect-error TODO needs to be fixed
@@ -471,6 +478,12 @@ export function ClusterActions({ cluster, clusterStatus, variant = 'default' }:
   }, [searchParams, location.search, location.pathname, cluster.kubernetes, closeModal, openInstallationGuideModal])
 
   const primaryActionButton = match(cluster)
+    .when(
+      () => isOperatorAttached,
+      () => (
+        <MenuManageDeployment cluster={cluster} clusterStatus={clusterStatus} variant={variant} isOperatorAttached />
+      )
+    )
     .with({ cloud_provider: P.not('ON_PREMISE'), kubernetes: 'SELF_MANAGED' }, () => (
       <Tooltip content="Installation guide">
         <Button onClick={() => openInstallationGuideModal()} iconOnly size={variant === 'default' ? 'sm' : 'md'}>
@@ -493,7 +506,7 @@ export function ClusterActions({ cluster, clusterStatus, variant = 'default' }:
     ))
     .otherwise(() => <MenuManageDeployment cluster={cluster} clusterStatus={clusterStatus} variant={variant} />)
   const logsButton =
-    variant === 'card' && cluster.kubernetes !== 'SELF_MANAGED' ? (
+    variant === 'card' && (cluster.kubernetes !== 'SELF_MANAGED' || isOperatorAttached) ? (
       <Tooltip content="Deployments">
         <Button
           aria-label="Deployments"
diff --git a/libs/domains/clusters/feature/src/lib/cluster-add/cluster-add.spec.tsx b/libs/domains/clusters/feature/src/lib/cluster-add/cluster-add.spec.tsx
new file mode 100644
index 00000000000..16c9ce35e97
--- /dev/null
+++ b/libs/domains/clusters/feature/src/lib/cluster-add/cluster-add.spec.tsx
@@ -0,0 +1,145 @@
+import posthog from 'posthog-js'
+import { renderWithProviders, screen, waitFor } from '@qovery/shared/util-tests'
+import { type SelfManagedClusterCreationFlowProps } from '../self-managed-cluster-creation/self-managed-cluster-creation-flow'
+import { ClusterAdd } from './cluster-add'
+
+const mockUseBlocker = jest.fn()
+jest.mock('@tanstack/react-router', () => {
+  const React = jest.requireActual('react')
+  return {
+    ...jest.requireActual('@tanstack/react-router'),
+    useParams: () => ({ organizationId: 'org-123' }),
+    useBlocker: (options: unknown) => mockUseBlocker(options),
+    Link: React.forwardRef(
+      ({ children, ...props }: { children?: React.ReactNode }, ref: React.Ref<HTMLAnchorElement>) =>
+        React.createElement('a', { ref, ...props }, children)
+    ),
+  }
+})
+jest.mock('posthog-js', () => ({
+  __esModule: true,
+  default: { capture: jest.fn() },
+}))
+jest.mock('posthog-js/react', () => ({ useFeatureFlagEnabled: () => false }))
+const mockShowPylonForm = jest.fn()
+jest.mock('@qovery/shared/util-hooks', () => ({
+  ...jest.requireActual('@qovery/shared/util-hooks'),
+  useSupportChat: () => ({ showPylonForm: mockShowPylonForm }),
+}))
+jest.mock('../hooks/use-cluster-creation-restriction/use-cluster-creation-restriction', () => ({
+  useClusterCreationRestriction: () => ({ isClusterCreationRestricted: false }),
+}))
+jest.mock('../self-managed-cluster-creation/self-managed-cluster-creation-flow', () => ({
+  ...jest.requireActual('../self-managed-cluster-creation/self-managed-cluster-creation-flow'),
+  SelfManagedClusterCreationFlow: ({ onStepChange, onClose }: SelfManagedClusterCreationFlowProps) => (
+    <div>
+      <p>Creation flow</p>
+      <button type="button" onClick={() => onStepChange?.('install')}>
+        Reach install step
+      </button>
+      <button type="button" onClick={onClose}>
+        Operator connected
+      </button>
+    </div>
+  ),
+}))
+
+type BlockerOptions = { disabled: boolean; shouldBlockFn: () => boolean; enableBeforeUnload: boolean }
+const getBlocker = () => mockUseBlocker.mock.calls.at(-1)?.[0] as BlockerOptions
+
+describe('ClusterAdd', () => {
+  afterEach(() => jest.restoreAllMocks())
+
+  async function openCreationFlow(userEvent: ReturnType<typeof renderWithProviders>['userEvent']) {
+    await userEvent.click(screen.getByRole('button', { name: 'AWS' }))
+    expect(await screen.findByText('Creation flow')).toBeInTheDocument()
+  }
+
+  it('asks for EKS Anywhere access when it is not enabled', async () => {
+    const { userEvent } = renderWithProviders(<ClusterAdd />)
+
+    await userEvent.click(screen.getByRole('button', { name: /Amazon Web Services EKS Anywhere\s*Request access/ }))
+
+    expect(mockShowPylonForm).toHaveBeenCalledWith('request-access-eks-anywhere')
+    expect(posthog.capture).toHaveBeenCalledWith('select-cluster', {
+      selectedCloudProvider: 'AWS',
+      selectedInstallationType: 'partially-managed',
+    })
+  })
+
+  it('names each provider card once for assistive technologies', () => {
+    const { container } = renderWithProviders(<ClusterAdd />)
+
+    expect(screen.getByRole('button', { name: 'AWS' })).toBeInTheDocument()
+    expect(screen.queryAllByRole('img')).toHaveLength(0)
+    expect(container.querySelectorAll('svg:not([aria-hidden="true"])')).toHaveLength(0)
+  })
+
+  it('lets the creation flow be dismissed before the cluster is created', async () => {
+    const { userEvent } = renderWithProviders(<ClusterAdd />)
+
+    await openCreationFlow(userEvent)
+    expect(posthog.capture).toHaveBeenCalledWith('select-cluster', {
+      selectedCloudProvider: 'AWS',
+      selectedInstallationType: 'self-managed',
+    })
+    expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument()
+    await userEvent.keyboard('{Escape}')
+
+    await waitFor(() => expect(screen.queryByText('Creation flow')).not.toBeInTheDocument())
+  })
+
+  it('cannot be dismissed on the install step, only closed by the flow once the Operator connects', async () => {
+    const { userEvent } = renderWithProviders(<ClusterAdd />)
+
+    await openCreationFlow(userEvent)
+    await userEvent.click(screen.getByRole('button', { name: 'Reach install step' }))
+    await userEvent.keyboard('{Escape}')
+
+    expect(screen.getByText('Creation flow')).toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'Close' })).not.toBeInTheDocument()
+
+    await userEvent.click(screen.getByRole('button', { name: 'Operator connected' }))
+
+    await waitFor(() => expect(screen.queryByText('Creation flow')).not.toBeInTheDocument())
+  })
+
+  describe('leaving the install step', () => {
+    it('does not guard the page before the cluster is created', async () => {
+      const { userEvent } = renderWithProviders(<ClusterAdd />)
+
+      expect(getBlocker().disabled).toBe(true)
+
+      await openCreationFlow(userEvent)
+
+      expect(getBlocker().disabled).toBe(true)
+    })
+
+    it('asks for confirmation before leaving, and enables the before-unload warning', async () => {
+      const confirm = jest.spyOn(window, 'confirm')
+      const { userEvent } = renderWithProviders(<ClusterAdd />)
+
+      await openCreationFlow(userEvent)
+      await userEvent.click(screen.getByRole('button', { name: 'Reach install step' }))
+
+      expect(getBlocker()).toMatchObject({ disabled: false, enableBeforeUnload: true })
+      confirm.mockReturnValueOnce(false)
+      expect(getBlocker().shouldBlockFn()).toBe(true)
+      confirm.mockReturnValueOnce(true)
+      expect(getBlocker().shouldBlockFn()).toBe(false)
+    })
+
+    it('lets the flow navigate away once the Operator connects', async () => {
+      const confirm = jest.spyOn(window, 'confirm')
+      const { userEvent } = renderWithProviders(<ClusterAdd />)
+
+      await openCreationFlow(userEvent)
+      await userEvent.click(screen.getByRole('button', { name: 'Reach install step' }))
+      await userEvent.click(screen.getByRole('button', { name: 'Operator connected' }))
+
+      expect(getBlocker().shouldBlockFn()).toBe(false)
+      expect(getBlocker().disabled).toBe(true)
+      expect(confirm).not.toHaveBeenCalled()
+    })
+  })
+})
diff --git a/libs/domains/clusters/feature/src/lib/cluster-add/cluster-add.tsx b/libs/domains/clusters/feature/src/lib/cluster-add/cluster-add.tsx
new file mode 100644
index 00000000000..d37d5cdbcd9
--- /dev/null
+++ b/libs/domains/clusters/feature/src/lib/cluster-add/cluster-add.tsx
@@ -0,0 +1,280 @@
+import { Link, useBlocker, useParams } from '@tanstack/react-router'
+import Azure from 'devicon/icons/azure/azure-original.svg'
+import DigitalOcean from 'devicon/icons/digitalocean/digitalocean-original.svg'
+import GCP from 'devicon/icons/googlecloud/googlecloud-original.svg'
+import Kubernetes from 'devicon/icons/kubernetes/kubernetes-original.svg'
+import posthog from 'posthog-js'
+import { useFeatureFlagEnabled } from 'posthog-js/react'
+import { type ReactElement, type ReactNode, cloneElement, useRef, useState } from 'react'
+import { Callout, Heading, Icon, Modal, Section, useModal } from '@qovery/shared/ui'
+import { useSupportChat } from '@qovery/shared/util-hooks'
+import { twMerge } from '@qovery/shared/util-js'
+import { ClusterInstallationGuideModal } from '../cluster-installation-guide-modal/cluster-installation-guide-modal'
+import { useClusterCreationRestriction } from '../hooks/use-cluster-creation-restriction/use-cluster-creation-restriction'
+import {
+  SELF_MANAGED_CLUSTER_CREATION_MODAL_WIDTH,
+  SelfManagedClusterCreationFlow,
+  type SelfManagedClusterCreationStep,
+} from '../self-managed-cluster-creation/self-managed-cluster-creation-flow'
+
+const LEAVE_INSTALL_STEP_MESSAGE =
+  'The Operator installation instructions will be lost if you leave this page. Leave anyway?'
+
+type ProviderIconSource = string | ReactElement<{ className?: string; 'aria-hidden'?: boolean }>
+
+type ProviderCardProps = {
+  title: string
+  icon: ProviderIconSource
+  disabled?: boolean
+  actionLabel?: string
+  analytics: { selectedCloudProvider: string; selectedInstallationType: string }
+} & ({ slug: string } | { onClick: () => void })
+
+// Decorative: the card title already names the provider.
+function ProviderIcon({ icon }: { icon: ProviderIconSource }) {
+  return typeof icon === 'string' ? (
+    <img className="size-5 select-none" src={icon} alt="" />
+  ) : (
+    cloneElement(icon, { className: 'size-5 select-none', 'aria-hidden': true })
+  )
+}
+
+function ProviderCard({ title, icon, disabled = false, actionLabel, analytics, ...props }: ProviderCardProps) {
+  const { organizationId = '' } = useParams({ strict: false })
+  const className = twMerge(
+    'flex h-[52px] items-center gap-2 rounded-md border border-neutral bg-surface-neutral px-4 text-left text-sm font-medium text-neutral transition-colors',
+    disabled ? 'cursor-not-allowed bg-surface-neutral-component text-neutral-subtle' : 'hover:border-brand-strong',
+    // Not available to the organization yet: it opens an access request, not the creation flow.
+    actionLabel && 'border-dashed text-neutral-subtle'
+  )
+  const content = (
+    <>
+      <ProviderIcon icon={icon} />
+      <span className="min-w-0 flex-1 truncate">{title}</span>
+      {actionLabel ? (
+        <span className="shrink-0 text-ssm font-normal text-neutral-subtle">{actionLabel}</span>
+      ) : (
+        <Icon iconName="angle-right" iconStyle="regular" className="text-neutral-subtle" />
+      )}
+    </>
+  )
+  const capture = () => posthog.capture('select-cluster', analytics)
+
+  if ('slug' in props && !disabled) {
+    return (
+      <Link
+        to="/organization/$organizationId/cluster/create/$slug"
+        params={{ organizationId, slug: props.slug }}
+        className={className}
+        onClick={capture}
+      >
+        {content}
+      </Link>
+    )
+  }
+
+  return (
+    <button
+      type="button"
+      aria-disabled={disabled}
+      className={className}
+      onClick={() => {
+        if (disabled || !('onClick' in props)) return
+        capture()
+        props.onClick()
+      }}
+    >
+      {content}
+    </button>
+  )
+}
+
+function ProviderSection({
+  title,
+  description,
+  children,
+}: {
+  title: string
+  description: string
+  children: ReactNode
+}) {
+  return (
+    <Section className="flex flex-col gap-4">
+      <div className="flex flex-col gap-1">
+        <Heading>{title}</Heading>
+        <p className="text-sm text-neutral-subtle">{description}</p>
+      </div>
+      <div className="grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3">{children}</div>
+    </Section>
+  )
+}
+
+export function ClusterAdd() {
+  const { organizationId = '' } = useParams({ strict: false })
+  const { openModal, closeModal } = useModal()
+  const { showPylonForm } = useSupportChat()
+  const isEksAnywhereEnabled = useFeatureFlagEnabled('eks-anywhere')
+  const { isClusterCreationRestricted: disabled } = useClusterCreationRestriction({ organizationId })
+  const [isCreationFlowOpen, setIsCreationFlowOpen] = useState(false)
+  const [creationStep, setCreationStep] = useState<SelfManagedClusterCreationStep>('general')
+
+  // The flow closes itself before navigating once the Operator connects: that navigation must not be blocked.
+  const isFlowClosingRef = useRef(false)
+  // Once the cluster exists, leaving the page would lose the Operator installation instructions.
+  const isInstalling = isCreationFlowOpen && creationStep === 'install'
+
+  useBlocker({
+    disabled: !isInstalling,
+    shouldBlockFn: () => !isFlowClosingRef.current && !window.confirm(LEAVE_INSTALL_STEP_MESSAGE),
+    enableBeforeUnload: isInstalling,
+  })
+
+  const openInstallationGuideModal = ({ isDemo = false }: { isDemo?: boolean } = {}) =>
+    openModal({
+      options: { width: 500 },
+      content: <ClusterInstallationGuideModal mode="CREATE" isDemo={isDemo} type="ON_PREMISE" onClose={closeModal} />,
+    })
+
+  const openCreationFlow = () => {
+    isFlowClosingRef.current = false
+    setCreationStep('general')
+    setIsCreationFlowOpen(true)
+  }
+
+  const managed = (selectedCloudProvider: string) => ({
+    selectedCloudProvider,
+    selectedInstallationType: 'managed',
+  })
+  const selfManaged = (selectedCloudProvider: string) => ({
+    selectedCloudProvider,
+    selectedInstallationType: 'self-managed',
+  })
+
+  return (
+    <div className="mt-8 flex w-full flex-col gap-10">
+      {disabled && (
+        <Callout.Root color="red">
+          <Callout.Icon>
+            <Icon iconName="circle-exclamation" iconStyle="regular" />
+          </Callout.Icon>
+          <Callout.Text>
+            <Callout.TextHeading>Cluster creation is restricted</Callout.TextHeading>
+            <Callout.TextDescription>
+              Your organization has a billing restriction that prevents cluster creation. Please contact support to
+              resolve this issue.
+            </Callout.TextDescription>
+          </Callout.Text>
+        </Callout.Root>
+      )}
+
+      <ProviderSection
+        title="Create managed cluster"
+        description="Qovery creates and manages the cluster for you, in your cloud account"
+      >
+        <ProviderCard
+          title="Amazon Web Services"
+          icon={<Icon name="AWS" />}
+          slug="aws"
+          disabled={disabled}
+          analytics={managed('AWS')}
+        />
+        {isEksAnywhereEnabled ? (
+          <ProviderCard
+            title="Amazon Web Services EKS Anywhere"
+            icon={<Icon name="AWS" />}
+            slug="aws-eks-anywhere"
+            disabled={disabled}
+            analytics={{ selectedCloudProvider: 'AWS', selectedInstallationType: 'partially-managed' }}
+          />
+        ) : (
+          <ProviderCard
+            title="Amazon Web Services EKS Anywhere"
+            icon={<Icon name="AWS" />}
+            actionLabel="Request access"
+            onClick={() => showPylonForm('request-access-eks-anywhere')}
+            analytics={{ selectedCloudProvider: 'AWS', selectedInstallationType: 'partially-managed' }}
+          />
+        )}
+        <ProviderCard
+          title="Google Cloud Platform"
+          icon={GCP}
+          slug="gcp"
+          disabled={disabled}
+          analytics={managed('GCP')}
+        />
+        <ProviderCard
+          title="Scaleway"
+          icon={<Icon name="SCW" />}
+          slug="scw"
+          disabled={disabled}
+          analytics={managed('SCW')}
+        />
+        <ProviderCard
+          title="Microsoft Azure"
+          icon={Azure}
+          slug="azure"
+          disabled={disabled}
+          analytics={managed('AZURE')}
+        />
+      </ProviderSection>
+
+      <ProviderSection
+        title="Connect existing cluster (BYOK)"
+        description="Install the Qovery Operator on a cluster you already run"
+      >
+        <ProviderCard
+          title="Local machine (Demo)"
+          icon={Kubernetes}
+          onClick={() => openInstallationGuideModal({ isDemo: true })}
+          analytics={{ selectedCloudProvider: 'OTHER', selectedInstallationType: 'demo' }}
+        />
+        <ProviderCard
+          title="AWS"
+          icon={<Icon name="AWS" />}
+          onClick={openCreationFlow}
+          disabled={disabled}
+          analytics={selfManaged('AWS')}
+        />
+        {[
+          { title: 'GCP', icon: GCP, provider: 'GCP' },
+          { title: 'Microsoft Azure', icon: Azure, provider: 'AZURE' },
+          { title: 'OVH Cloud', icon: <Icon name="OVH_CLOUD" />, provider: 'OVH_CLOUD' },
+          { title: 'Digital Ocean', icon: DigitalOcean, provider: 'DIGITAL_OCEAN' },
+          { title: 'CIVO', icon: <Icon name="CIVO" />, provider: 'CIVO' },
+          { title: 'Oracle Cloud Infrastructure', icon: <Icon name="ORACLE_CLOUD" />, provider: 'ORACLE_CLOUD' },
+          { title: 'Hetzner', icon: <Icon name="HETZNER" />, provider: 'HETZNER' },
+          { title: 'IBM Cloud', icon: <Icon name="IBM_CLOUD" />, provider: 'IBM_CLOUD' },
+        ].map(({ title, icon, provider }) => (
+          <ProviderCard
+            key={title}
+            title={title}
+            icon={icon}
+            onClick={() => openInstallationGuideModal()}
+            disabled={disabled}
+            analytics={selfManaged(provider)}
+          />
+        ))}
+      </ProviderSection>
+
+      <Modal
+        externalOpen={isCreationFlowOpen}
+        setExternalOpen={setIsCreationFlowOpen}
+        width={SELF_MANAGED_CLUSTER_CREATION_MODAL_WIDTH[creationStep]}
+        // Once the cluster exists, the modal only closes itself when its Operator connects.
+        dismissible={creationStep !== 'install'}
+      >
+        {/* The dialog unmounts its content once closed, so each opening starts a fresh flow. */}
+        <SelfManagedClusterCreationFlow
+          organizationId={organizationId}
+          onStepChange={setCreationStep}
+          onClose={() => {
+            isFlowClosingRef.current = true
+            setIsCreationFlowOpen(false)
+          }}
+        />
+      </Modal>
+    </div>
+  )
+}
+
+export default ClusterAdd
diff --git a/libs/domains/clusters/feature/src/lib/cluster-avatar/cluster-avatar.spec.tsx b/libs/domains/clusters/feature/src/lib/cluster-avatar/cluster-avatar.spec.tsx
new file mode 100644
index 00000000000..a99d790af0d
--- /dev/null
+++ b/libs/domains/clusters/feature/src/lib/cluster-avatar/cluster-avatar.spec.tsx
@@ -0,0 +1,35 @@
+import { renderWithProviders } from '@qovery/shared/util-tests'
+import { ClusterAvatar } from './cluster-avatar'
+
+jest.mock('@qovery/shared/ui', () => {
+  const React = jest.requireActual('react')
+  const ui = jest.requireActual('@qovery/shared/ui')
+  return {
+    ...ui,
+    Icon: (props: { name?: string; iconName?: string }) =>
+      React.createElement('span', { 'data-icon-name': props.name ?? props.iconName }),
+  }
+})
+
+describe('ClusterAvatar', () => {
+  it.each([
+    ['AWS', 'AWS'],
+    ['GCP', 'GCP'],
+    ['ON_PREMISE', 'KUBERNETES'],
+    ['OVH', 'OVH_CLOUD'],
+    ['ORACLE', 'ORACLE_CLOUD'],
+    ['IBM', 'IBM_CLOUD'],
+  ] as const)('shows the %s provider icon', (cloudProvider, iconName) => {
+    const { container } = renderWithProviders(<ClusterAvatar cloudProvider={cloudProvider} />)
+
+    expect(container.querySelector(`[data-icon-name="${iconName}"]`)).toBeInTheDocument()
+  })
+
+  it('shows a demo icon for demo clusters', () => {
+    const { container } = renderWithProviders(
+      <ClusterAvatar cluster={{ id: 'cluster-id', is_demo: true, cloud_provider: 'ON_PREMISE' } as never} />
+    )
+
+    expect(container.querySelector('[data-icon-name="laptop-code"]')).toBeInTheDocument()
+  })
+})
diff --git a/libs/domains/clusters/feature/src/lib/cluster-avatar/cluster-avatar.tsx b/libs/domains/clusters/feature/src/lib/cluster-avatar/cluster-avatar.tsx
index 10ed95a8863..045ae72bd7c 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-avatar/cluster-avatar.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-avatar/cluster-avatar.tsx
@@ -1,10 +1,11 @@
-import { type CloudProviderEnum, type Cluster, type ClusterOverviewResponse } from 'qovery-typescript-axios'
+import { type CloudVendorEnum, type Cluster, type ClusterOverviewResponse } from 'qovery-typescript-axios'
 import { type ComponentPropsWithoutRef, type ElementRef, forwardRef } from 'react'
 import { match } from 'ts-pattern'
+import { IconEnum } from '@qovery/shared/enums'
 import { Avatar, Icon } from '@qovery/shared/ui'
 
 export interface ClusterAvatarProps extends Omit<ComponentPropsWithoutRef<typeof Avatar>, 'fallback'> {
-  cloudProvider?: CloudProviderEnum
+  cloudProvider?: CloudVendorEnum
   cluster?: Cluster | ClusterOverviewResponse
 }
 
@@ -18,6 +19,9 @@ export const ClusterAvatar = forwardRef<ElementRef<typeof Avatar>, ClusterAvatar
       <Icon iconName="laptop-code" className="text-base text-neutral-subtle" />
     ))
     .with({ localCloudProvider: 'ON_PREMISE' }, () => <Icon name="KUBERNETES" height="65%" width="65%" />)
+    .with({ localCloudProvider: 'OVH' }, () => <Icon name={IconEnum.OVH_CLOUD} height="65%" width="65%" />)
+    .with({ localCloudProvider: 'ORACLE' }, () => <Icon name={IconEnum.ORACLE_CLOUD} height="65%" width="65%" />)
+    .with({ localCloudProvider: 'IBM' }, () => <Icon name={IconEnum.IBM_CLOUD} height="65%" width="65%" />)
     .otherwise(() => <Icon name={localCloudProvider} height="65%" width="65%" />)
 
   return <Avatar ref={ref} fallback={fallback} {...props} />
diff --git a/libs/domains/clusters/feature/src/lib/cluster-operator-status/cluster-operator-status.spec.tsx b/libs/domains/clusters/feature/src/lib/cluster-operator-status/cluster-operator-status.spec.tsx
new file mode 100644
index 00000000000..25563eeb131
--- /dev/null
+++ b/libs/domains/clusters/feature/src/lib/cluster-operator-status/cluster-operator-status.spec.tsx
@@ -0,0 +1,63 @@
+import { type ClusterOperatorStatusResponse } from 'qovery-typescript-axios'
+import { renderWithProviders, screen } from '@qovery/shared/util-tests'
+import { useUpdateClusterOperator } from '../hooks/use-update-cluster-operator/use-update-cluster-operator'
+import { ClusterOperatorStatus } from './cluster-operator-status'
+
+jest.mock('@tanstack/react-router', () => ({
+  ...jest.requireActual('@tanstack/react-router'),
+  useParams: () => ({ organizationId: 'organization-id', clusterId: 'cluster-id' }),
+}))
+jest.mock('../hooks/use-update-cluster-operator/use-update-cluster-operator')
+
+const mockUseUpdateClusterOperator = useUpdateClusterOperator as jest.Mock
+const mockUpdateOperator = jest.fn()
+
+const operatorStatus = {
+  status: 'OUTDATED_CHART',
+  operator_connected: true,
+  desired_chart_version: '1.2.0',
+  desired_image_version: '1.2.0',
+} as ClusterOperatorStatusResponse
+
+describe('ClusterOperatorStatus', () => {
+  beforeEach(() => {
+    mockUpdateOperator.mockReset()
+    mockUseUpdateClusterOperator.mockReturnValue({ mutate: mockUpdateOperator, isLoading: false })
+  })
+
+  it('updates the Operator to the target versions', async () => {
+    const { userEvent } = renderWithProviders(<ClusterOperatorStatus operatorStatus={operatorStatus} />)
+
+    await userEvent.click(screen.getByRole('button', { name: 'Update Operator' }))
+
+    expect(mockUpdateOperator).toHaveBeenCalledWith({
+      organizationId: 'organization-id',
+      clusterId: 'cluster-id',
+      chartVersion: '1.2.0',
+      imageVersion: '1.2.0',
+    })
+  })
+
+  it('does not start another update while one is in progress', async () => {
+    mockUseUpdateClusterOperator.mockReturnValue({ mutate: mockUpdateOperator, isLoading: true })
+    const { userEvent } = renderWithProviders(<ClusterOperatorStatus operatorStatus={operatorStatus} />)
+
+    const button = screen.getByRole('button', { name: 'Update Operator' })
+    expect(button).toBeDisabled()
+    await userEvent.click(button)
+
+    expect(mockUpdateOperator).not.toHaveBeenCalled()
+  })
+
+  it('hides the update action while the Operator is not connected', () => {
+    renderWithProviders(<ClusterOperatorStatus operatorStatus={{ ...operatorStatus, operator_connected: false }} />)
+
+    expect(screen.queryByRole('button', { name: 'Update Operator' })).not.toBeInTheDocument()
+  })
+
+  it('disables the update action without a target chart version', () => {
+    renderWithProviders(<ClusterOperatorStatus operatorStatus={{ ...operatorStatus, desired_chart_version: null }} />)
+
+    expect(screen.getByRole('button', { name: 'Update Operator' })).toBeDisabled()
+  })
+})
diff --git a/libs/domains/clusters/feature/src/lib/cluster-operator-status/cluster-operator-status.tsx b/libs/domains/clusters/feature/src/lib/cluster-operator-status/cluster-operator-status.tsx
new file mode 100644
index 00000000000..5e8599de14f
--- /dev/null
+++ b/libs/domains/clusters/feature/src/lib/cluster-operator-status/cluster-operator-status.tsx
@@ -0,0 +1,147 @@
+import { type IconName } from '@fortawesome/fontawesome-common-types'
+import { useParams } from '@tanstack/react-router'
+import { type ClusterOperatorFleetStatus, type ClusterOperatorStatusResponse } from 'qovery-typescript-axios'
+import { match } from 'ts-pattern'
+import { Badge, Button, StatusChip } from '@qovery/shared/ui'
+import { timeAgo } from '@qovery/shared/util-dates'
+import { useUpdateClusterOperator } from '../hooks/use-update-cluster-operator/use-update-cluster-operator'
+
+export function getClusterOperatorStatusDisplay(status: ClusterOperatorFleetStatus) {
+  return match(status)
+    .with('CURRENT', () => ({
+      label: 'Versions current',
+      color: 'green' as const,
+      chipStatus: 'DEPLOYED' as const,
+      icon: { name: 'circle-check' as IconName, className: 'text-positive' },
+      description: 'The Operator is connected and runs the selected image and Helm chart versions.',
+    }))
+    .with('DISCONNECTED', () => ({
+      label: 'Disconnected',
+      color: 'red' as const,
+      chipStatus: 'ERROR' as const,
+      icon: { name: 'circle-xmark' as IconName, className: 'text-negative' },
+      description: 'No recent heartbeat was received from the Operator.',
+    }))
+    .with('OUTDATED_IMAGE', () => ({
+      label: 'Image update available',
+      color: 'yellow' as const,
+      chipStatus: 'WARNING' as const,
+      icon: { name: 'circle-exclamation' as IconName, className: 'text-warning' },
+      description: 'The installed Operator image differs from the selected version.',
+    }))
+    .with('OUTDATED_CHART', () => ({
+      label: 'Chart update available',
+      color: 'yellow' as const,
+      chipStatus: 'WARNING' as const,
+      icon: { name: 'circle-exclamation' as IconName, className: 'text-warning' },
+      description: 'The installed Helm chart differs from the selected version.',
+    }))
+    .with('OUTDATED_IMAGE_AND_CHART', () => ({
+      label: 'Update available',
+      color: 'yellow' as const,
+      chipStatus: 'WARNING' as const,
+      icon: { name: 'circle-exclamation' as IconName, className: 'text-warning' },
+      description: 'The installed Operator image and Helm chart differ from the selected versions.',
+    }))
+    .with('TARGET_UNKNOWN', () => ({
+      label: 'Target unknown',
+      color: 'yellow' as const,
+      chipStatus: 'WARNING' as const,
+      icon: { name: 'circle-exclamation' as IconName, className: 'text-warning' },
+      description: 'Qovery cannot determine the image or Helm chart version selected for this cluster.',
+    }))
+    .with('REPORTED_VERSION_UNKNOWN', () => ({
+      label: 'Version unknown',
+      color: 'yellow' as const,
+      chipStatus: 'WARNING' as const,
+      icon: { name: 'circle-exclamation' as IconName, className: 'text-warning' },
+      description: 'The Operator is connected but does not report enough version information.',
+    }))
+    .with('NOT_ATTACHED', () => ({
+      label: 'Not attached',
+      color: 'neutral' as const,
+      chipStatus: 'UNKNOWN' as const,
+      icon: { name: 'circle-minus' as IconName, className: 'text-neutral-subtle' },
+      description: 'This cluster is not attached to the Qovery Operator execution path.',
+    }))
+    .exhaustive()
+}
+
+function Version({ installed, target }: { installed?: string | null; target?: string | null }) {
+  return (
+    <span className="flex flex-col">
+      <span className="font-medium text-neutral">{installed ?? 'Not reported'}</span>
+      <span className="text-ssm text-neutral-subtle">Target: {target ?? 'Unknown'}</span>
+    </span>
+  )
+}
+
+export interface ClusterOperatorStatusProps {
+  operatorStatus: ClusterOperatorStatusResponse
+}
+
+export function ClusterOperatorStatus({ operatorStatus }: ClusterOperatorStatusProps) {
+  const { organizationId = '', clusterId = '' } = useParams({ strict: false })
+  const { mutate: updateOperator, isLoading: isUpdating } = useUpdateClusterOperator()
+  const display = getClusterOperatorStatusDisplay(operatorStatus.status)
+
+  return (
+    <section aria-label="Qovery Operator status" className="flex flex-col gap-4">
+      <div className="flex items-start justify-between gap-4">
+        <div className="flex flex-col gap-1">
+          <h2 className="text-base font-medium text-neutral">Qovery Operator</h2>
+          <p className="text-sm font-normal text-neutral-subtle">{display.description}</p>
+        </div>
+        <div className="flex shrink-0 items-center gap-2">
+          <Badge size="sm" variant="surface" color={display.color} className="gap-1.5">
+            <StatusChip status={display.chipStatus} disabledTooltip />
+            {display.label}
+          </Badge>
+          {operatorStatus.operator_connected && (
+            <Button
+              size="sm"
+              variant="outline"
+              color="neutral"
+              disabled={isUpdating || !operatorStatus.desired_chart_version}
+              loading={isUpdating}
+              onClick={() => {
+                if (!operatorStatus.desired_chart_version) return
+                updateOperator({
+                  organizationId,
+                  clusterId,
+                  chartVersion: operatorStatus.desired_chart_version,
+                  imageVersion: operatorStatus.desired_image_version,
+                })
+              }}
+            >
+              Update Operator
+            </Button>
+          )}
+        </div>
+      </div>
+
+      <dl className="grid grid-cols-3 gap-4 border-t border-neutral pt-4 text-sm font-normal">
+        <div className="flex flex-col gap-1">
+          <dt className="text-neutral-subtle">Last heartbeat</dt>
+          <dd className="font-medium text-neutral">
+            {operatorStatus.last_heartbeat ? `${timeAgo(new Date(operatorStatus.last_heartbeat))} ago` : 'Never'}
+          </dd>
+        </div>
+        <div className="flex flex-col gap-1">
+          <dt className="text-neutral-subtle">Operator image</dt>
+          <dd>
+            <Version installed={operatorStatus.operator_version} target={operatorStatus.desired_image_version} />
+          </dd>
+        </div>
+        <div className="flex flex-col gap-1">
+          <dt className="text-neutral-subtle">Helm chart</dt>
+          <dd>
+            <Version installed={operatorStatus.reported_chart_version} target={operatorStatus.desired_chart_version} />
+          </dd>
+        </div>
+      </dl>
+    </section>
+  )
+}
+
+export default ClusterOperatorStatus
diff --git a/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile-context.tsx b/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile-context.tsx
new file mode 100644
index 00000000000..22569ed15f8
--- /dev/null
+++ b/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile-context.tsx
@@ -0,0 +1,267 @@
+import { useBlocker, useParams } from '@tanstack/react-router'
+import equal from 'fast-deep-equal'
+import {
+  type ClusterPlatformConfigurationRequest,
+  type ClusterPlatformConfigurationResponse,
+  type PlatformTemplateSummaryResponse,
+} from 'qovery-typescript-axios'
+import { type PropsWithChildren, createContext, useContext, useState } from 'react'
+import { type SchemaFieldValue, getSchemaFieldValue } from '@qovery/shared/schema-fields/feature'
+import { toast } from '@qovery/shared/ui'
+import { useDeployCluster } from '../hooks/use-deploy-cluster/use-deploy-cluster'
+import { useUpdatePlatformConfiguration } from '../hooks/use-update-platform-configuration/use-update-platform-configuration'
+import {
+  type PlatformFieldDescriptor,
+  type PlatformScalarField,
+  applyPlatformConfigurationDefaults,
+  isPlatformScalarField,
+  omitEmptyValues,
+  updateComponentValue,
+} from '../utils/platform-configuration-utils'
+import { type ProfileTreeItem } from './profile-tree'
+import { useClusterProfileTree } from './use-cluster-profile-tree'
+
+const PROFILE_ROUTE_ID = '/_authenticated/organization/$organizationId/cluster/$clusterId/profile'
+const LEAVE_UNSAVED_CHANGES_MESSAGE = 'You have unsaved changes on this profile. Leave the page and discard them?'
+
+export type ProfileValues = Record<string, Record<string, unknown>>
+export type ClusterInputValues = Record<string, Record<string, string>>
+
+// Scalars are compared as the inputs display them: an unset toggle shows as off, an unset text as empty.
+function getDisplayedScalarValue(field: Pick<PlatformFieldDescriptor, 'type' | 'defaultValue'>, value: unknown) {
+  return getSchemaFieldValue(field, value) ?? (field.type === 'bool' ? false : '')
+}
+
+// Local edits differing from the saved (or default) value; edits reverted by hand do not count.
+function getChangedProfileValues(
+  profileTree: ProfileTreeItem[],
+  configuration: ClusterPlatformConfigurationResponse | null | undefined,
+  profileValues: ProfileValues
+): ProfileValues {
+  const fieldsByComponent = new Map(
+    profileTree.flatMap((layer) => layer.children).map((component) => [component.key, component.fields])
+  )
+  return Object.fromEntries(
+    Object.entries(profileValues).flatMap(([componentKey, values]) => {
+      const fields = fieldsByComponent.get(componentKey) ?? []
+      const savedValues = applyPlatformConfigurationDefaults(
+        fields,
+        configuration?.platform.managedConfig?.[componentKey] ?? {}
+      )
+      const changedValues = Object.fromEntries(
+        Object.entries(values).filter(([fieldKey, value]) => {
+          const field = fields.find(({ key }) => key === fieldKey)
+          return field && isPlatformScalarField(field)
+            ? getDisplayedScalarValue(field, value) !== getDisplayedScalarValue(field, savedValues[fieldKey])
+            : !equal(value, savedValues[fieldKey])
+        })
+      )
+      return Object.keys(changedValues).length ? [[componentKey, changedValues]] : []
+    })
+  )
+}
+
+function countProfileChanges(
+  profileTree: ProfileTreeItem[],
+  configuration: ClusterPlatformConfigurationResponse | null | undefined,
+  profileValues: ProfileValues,
+  clusterInputs: ClusterInputValues
+) {
+  const profileChanges = Object.values(getChangedProfileValues(profileTree, configuration, profileValues)).flatMap(
+    (values) => Object.keys(values)
+  )
+  const clusterInputChanges = Object.entries(clusterInputs).flatMap(([componentKey, values]) =>
+    Object.entries(values).filter(
+      ([inputKey, value]) => value !== (configuration?.clusterInputs[componentKey]?.[inputKey] ?? '')
+    )
+  )
+
+  return profileChanges.length + clusterInputChanges.length
+}
+
+function omitSubmittedValues<T extends Record<string, Record<string, unknown>>>(currentValues: T, submittedValues: T) {
+  return Object.fromEntries(
+    Object.entries(currentValues).flatMap(([componentKey, values]) => {
+      const remainingValues = Object.fromEntries(
+        Object.entries(values).filter(([key, value]) => !equal(value, submittedValues[componentKey]?.[key]))
+      )
+      return Object.keys(remainingValues).length ? [[componentKey, remainingValues]] : []
+    })
+  ) as T
+}
+
+// PUT replaces the whole configuration: unedited components and inputs are sent back as saved, and edits reverted
+// by hand are left out so the field keeps following the schema default.
+function getConfigurationRequest(
+  template: PlatformTemplateSummaryResponse,
+  profileTree: ProfileTreeItem[],
+  configuration: ClusterPlatformConfigurationResponse | null | undefined,
+  profileValues: ProfileValues,
+  clusterInputs: ClusterInputValues
+): ClusterPlatformConfigurationRequest {
+  const savedManagedConfig = configuration?.platform.managedConfig
+  const managedConfig = { ...savedManagedConfig }
+  for (const [componentKey, values] of Object.entries(
+    getChangedProfileValues(profileTree, configuration, profileValues)
+  )) {
+    managedConfig[componentKey] = omitEmptyValues({ ...savedManagedConfig?.[componentKey], ...values })
+  }
+  const nextClusterInputs = { ...configuration?.clusterInputs }
+  for (const [componentKey, values] of Object.entries(clusterInputs)) {
+    if (!Object.keys(values).length) continue
+    nextClusterInputs[componentKey] = { ...configuration?.clusterInputs[componentKey], ...values }
+  }
+
+  return {
+    platform: {
+      templateKey: configuration?.platform.templateKey ?? template.key,
+      templateVersion: configuration?.platform.templateVersion ?? template.version,
+      layerSelections: configuration?.platform.layerSelections,
+      managedConfig,
+    },
+    clusterInputs: nextClusterInputs,
+  }
+}
+
+interface ClusterProfileContextValue {
+  organizationId: string
+  clusterId: string
+  templates?: PlatformTemplateSummaryResponse[]
+  configuration?: ClusterPlatformConfigurationResponse | null
+  profileTree: ProfileTreeItem[]
+  isLoading: boolean
+  isError: boolean
+  // Unsaved edits, keyed by component then field.
+  profileValues: ProfileValues
+  clusterInputs: ClusterInputValues
+  // Changes on reset: some inputs are uncontrolled, remounting the form shows the saved values again.
+  formKey: number
+  changeCount: number
+  isSaving: boolean
+  isDeploying: boolean
+  updateProfileConfig: (componentKey: string, fieldKey: string, value: unknown) => void
+  updateClusterInput: (componentKey: string, field: PlatformFieldDescriptor, value: SchemaFieldValue) => void
+  resetChanges: () => void
+  saveChanges: () => Promise<void>
+  saveAndDeployChanges: () => Promise<void>
+}
+
+const ClusterProfileContext = createContext<ClusterProfileContextValue | undefined>(undefined)
+
+export function ClusterProfileProvider({ children }: PropsWithChildren) {
+  const { organizationId = '', clusterId = '' } = useParams({ strict: false })
+  const [profileValues, setProfileValues] = useState<ProfileValues>({})
+  const [clusterInputs, setClusterInputs] = useState<ClusterInputValues>({})
+  const [formKey, setFormKey] = useState(0)
+  const [isSaveAndDeployPending, setIsSaveAndDeployPending] = useState(false)
+  const { mutateAsync: updatePlatformConfiguration, isLoading: isSavingConfiguration } =
+    useUpdatePlatformConfiguration()
+  const { mutateAsync: deployCluster } = useDeployCluster()
+  const { templates, configuration, selectedTemplate, profileTree, isLoading, isError } = useClusterProfileTree({
+    organizationId,
+    clusterId,
+  })
+
+  const updateProfileConfig = (componentKey: string, fieldKey: string, value: unknown) => {
+    setProfileValues((currentValues) => updateComponentValue(currentValues, componentKey, fieldKey, value))
+  }
+
+  const updateClusterInput = (componentKey: string, field: PlatformFieldDescriptor, value: SchemaFieldValue) => {
+    // The input shows its default while unsaved: setting it back to what is displayed is no edit.
+    const nextValue = String(value)
+    const isDisplayedValue =
+      getDisplayedScalarValue(field, nextValue) ===
+      getDisplayedScalarValue(field, configuration?.clusterInputs[componentKey]?.[field.key])
+    setClusterInputs((currentValues) =>
+      updateComponentValue(currentValues, componentKey, field.key, isDisplayedValue ? undefined : nextValue)
+    )
+  }
+
+  const changeCount = countProfileChanges(profileTree, configuration, profileValues, clusterInputs)
+  const hasChanges = changeCount > 0
+
+  useBlocker({
+    disabled: !hasChanges,
+    // Edits are kept while switching components of this profile: only leaving it would drop them.
+    shouldBlockFn: ({ next }) =>
+      !(
+        next.routeId.startsWith(PROFILE_ROUTE_ID) &&
+        'clusterId' in next.params &&
+        next.params.clusterId === clusterId
+      ) && !window.confirm(LEAVE_UNSAVED_CHANGES_MESSAGE),
+    enableBeforeUnload: hasChanges,
+  })
+
+  const resetChanges = () => {
+    setProfileValues({})
+    setClusterInputs({})
+    setFormKey((key) => key + 1)
+  }
+
+  const saveConfiguration = async () => {
+    if (!selectedTemplate) return
+    await updatePlatformConfiguration({
+      clusterId,
+      configurationRequest: getConfigurationRequest(
+        selectedTemplate,
+        profileTree,
+        configuration,
+        profileValues,
+        clusterInputs
+      ),
+    })
+    // The saved configuration now carries the submitted edits, so their local copies can go.
+    setProfileValues((currentValues) => omitSubmittedValues(currentValues, profileValues))
+    setClusterInputs((currentValues) => omitSubmittedValues(currentValues, clusterInputs))
+  }
+
+  const saveChanges = async () => {
+    try {
+      await saveConfiguration()
+      toast('success', 'Profile saved', 'Deploy the cluster to apply the changes.')
+    } catch {
+      // Errors are notified by the mutation.
+    }
+  }
+
+  const saveAndDeployChanges = async () => {
+    setIsSaveAndDeployPending(true)
+    try {
+      await saveConfiguration()
+      await deployCluster({ organizationId, clusterId })
+    } catch {
+      // Errors are notified by the mutations.
+    } finally {
+      setIsSaveAndDeployPending(false)
+    }
+  }
+
+  const value: ClusterProfileContextValue = {
+    organizationId,
+    clusterId,
+    templates,
+    configuration,
+    profileTree,
+    isLoading,
+    isError,
+    profileValues,
+    clusterInputs,
+    formKey,
+    changeCount,
+    isSaving: isSavingConfiguration && !isSaveAndDeployPending,
+    isDeploying: isSaveAndDeployPending,
+    updateProfileConfig,
+    updateClusterInput,
+    resetChanges,
+    saveChanges,
+    saveAndDeployChanges,
+  }
+
+  return <ClusterProfileContext.Provider value={value}>{children}</ClusterProfileContext.Provider>
+}
+
+export function useClusterProfileContext() {
+  const context = useContext(ClusterProfileContext)
+  if (!context) throw new Error('useClusterProfileContext must be used within a ClusterProfileProvider')
+  return context
+}
diff --git a/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile-sidebar.tsx b/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile-sidebar.tsx
new file mode 100644
index 00000000000..463971686a3
--- /dev/null
+++ b/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile-sidebar.tsx
@@ -0,0 +1,219 @@
+import { type ReactNode, useState } from 'react'
+import { IconEnum } from '@qovery/shared/enums'
+import { Icon, InputSearch, Tooltip } from '@qovery/shared/ui'
+
+type LayerStatus = 'disabled' | 'success'
+
+export const NOT_CONFIGURABLE_COMPONENT_REASON = 'No configuration needed for this component'
+export const NOT_CONFIGURABLE_LAYER_REASON = 'No configuration needed for this layer yet'
+
+export interface ClusterProfileSidebarItem {
+  id: string
+  key: string
+  label: string
+  configurable: boolean
+}
+
+export interface ClusterProfileSidebarLayer {
+  id: string
+  label: string
+  status: LayerStatus
+  disabledReason?: string
+  configurable: boolean
+  items: readonly ClusterProfileSidebarItem[]
+}
+
+interface LayerSectionRowProps {
+  section: ClusterProfileSidebarLayer
+  selectedSectionId?: string
+  selectedItemId?: string
+  onSelectSection: (sectionId: string) => void
+  onSelectItem: (itemId: string) => void
+}
+
+function LayerIcon() {
+  return <Icon iconName="layer-group" iconStyle="regular" aria-hidden="true" className="shrink-0 text-sm" />
+}
+
+export function ClusterProfileItemIcon() {
+  return <Icon name={IconEnum.HELM_OFFICIAL} width="15" height="15" className="shrink-0" aria-hidden="true" />
+}
+
+function LayerSectionRow({
+  section,
+  selectedSectionId,
+  selectedItemId,
+  onSelectSection,
+  onSelectItem,
+}: LayerSectionRowProps) {
+  const isDisabled = section.status === 'disabled' || !section.configurable
+  const isSelected = !isDisabled && section.id === selectedSectionId
+  const disabledReason = section.disabledReason ?? (section.configurable ? undefined : NOT_CONFIGURABLE_LAYER_REASON)
+
+  return (
+    <Tooltip content={disabledReason ?? ''} disabled={!disabledReason} side="right">
+      <li className={isSelected ? 'bg-surface-neutral-component' : ''}>
+        <button
+          type="button"
+          disabled={isDisabled}
+          aria-current={isSelected && !selectedItemId ? 'page' : undefined}
+          className={`flex h-8 w-full items-center gap-1.5 rounded px-3 text-left text-sm outline-none focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-brand-strong disabled:cursor-not-allowed disabled:text-neutral-disabled ${
+            isDisabled
+              ? ''
+              : `${isSelected ? 'text-neutral' : 'text-neutral-subtle'} hover:bg-surface-neutral-component hover:text-neutral`
+          }`}
+          onClick={() => {
+            const firstItem = section.items.find((item) => item.configurable) ?? section.items[0]
+            if (firstItem) {
+              onSelectItem(firstItem.id)
+            } else {
+              onSelectSection(section.id)
+            }
+          }}
+        >
+          <LayerIcon />
+          <span className="truncate">{section.label}</span>
+          {section.status === 'disabled' ? (
+            <Icon iconName="circle-minus" iconStyle="regular" className="ml-auto shrink-0 text-sm" />
+          ) : null}
+        </button>
+
+        {section.items.map((item) => {
+          const isItemSelected = isSelected && item.id === selectedItemId
+          const isItemDisabled = isDisabled || !item.configurable
+
+          const itemButton = (
+            <button
+              key={item.id}
+              type="button"
+              disabled={isItemDisabled}
+              aria-current={isItemSelected ? 'page' : undefined}
+              className={`group flex h-7 w-full items-center gap-1.5 px-3 text-left text-sm outline-none focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-brand-strong disabled:cursor-not-allowed disabled:text-neutral-disabled ${
+                isItemDisabled
+                  ? ''
+                  : isItemSelected
+                    ? 'text-neutral'
+                    : 'text-neutral-subtle hover:bg-surface-neutral-component hover:text-neutral'
+              }`}
+              onClick={() => onSelectItem(item.id)}
+            >
+              <span aria-hidden="true" className="relative h-7 w-3.5 shrink-0">
+                <span
+                  className={`absolute inset-y-0 left-1/2 -translate-x-1/2 border-l ${
+                    isItemDisabled
+                      ? 'border-neutral'
+                      : isItemSelected
+                        ? 'border-neutralInvert'
+                        : 'border-neutral group-hover:border-neutralInvert'
+                  }`}
+                />
+              </span>
+              <span className="flex min-w-0 items-center gap-1.5 py-1">
+                <ClusterProfileItemIcon />
+                <span className="truncate">{item.label}</span>
+              </span>
+            </button>
+          )
+
+          // The layer tooltip already explains a disabled layer; disabled buttons fire no pointer events.
+          return isDisabled || item.configurable ? (
+            itemButton
+          ) : (
+            <Tooltip key={item.id} content={NOT_CONFIGURABLE_COMPONENT_REASON} side="right">
+              <div>{itemButton}</div>
+            </Tooltip>
+          )
+        })}
+      </li>
+    </Tooltip>
+  )
+}
+
+export interface ClusterProfileSidebarProps {
+  // Layers already filtered by the search.
+  layers: readonly ClusterProfileSidebarLayer[]
+  search: string
+  selectedSectionId?: string
+  selectedItemId?: string
+  isLoading?: boolean
+  isError?: boolean
+  onSearchChange: (search: string) => void
+  onSelectSection: (sectionId: string) => void
+  onSelectItem: (itemId: string) => void
+  // Pinned below the layers.
+  footer?: ReactNode
+}
+
+export function ClusterProfileSidebar({
+  layers,
+  search,
+  selectedSectionId,
+  selectedItemId,
+  isLoading = false,
+  isError = false,
+  onSearchChange,
+  onSelectSection,
+  onSelectItem,
+  footer,
+}: ClusterProfileSidebarProps) {
+  const showEmptyState = !isLoading && !isError && layers.length === 0
+  // The URL search lags behind typing, so the input keeps its own value and follows the URL when navigation changes it.
+  const [searchInput, setSearchInput] = useState(search)
+  const [previousSearch, setPreviousSearch] = useState(search)
+  if (search !== previousSearch) {
+    setPreviousSearch(search)
+    setSearchInput(search)
+  }
+
+  return (
+    <aside
+      aria-label="Cluster layers"
+      className="flex w-56 shrink-0 flex-col border-r border-neutral bg-background-secondary lg:w-[272px]"
+    >
+      <div className="p-3">
+        <InputSearch
+          ariaLabel="Search layers"
+          placeholder="Search…"
+          customSize="h-7 text-ssm"
+          value={searchInput}
+          onChange={(nextSearch) => {
+            setSearchInput(nextSearch)
+            onSearchChange(nextSearch)
+          }}
+        />
+      </div>
+
+      <div className="flex min-h-0 flex-1 flex-col">
+        <h2 className="flex h-8 shrink-0 items-center px-3 text-sm font-medium">Layers</h2>
+        <nav aria-label="Layers" className="min-h-0 flex-1 overflow-y-auto">
+          <ul>
+            {isLoading ? <li className="px-3 py-1 text-xs text-neutral-subtle">Loading layers…</li> : null}
+            {isError ? (
+              <li className="px-3 py-1 text-xs text-negative">
+                Layers could not be loaded. Refresh the page to try again.
+              </li>
+            ) : null}
+            {showEmptyState ? (
+              <li className="px-3 py-1 text-ssm text-neutral-subtle">
+                {search.trim() ? 'No layers match your search' : 'No layers available'}
+              </li>
+            ) : null}
+            {!isLoading && !isError
+              ? layers.map((section) => (
+                  <LayerSectionRow
+                    key={section.id}
+                    section={section}
+                    selectedSectionId={selectedSectionId}
+                    selectedItemId={selectedItemId}
+                    onSelectSection={onSelectSection}
+                    onSelectItem={onSelectItem}
+                  />
+                ))
+              : null}
+          </ul>
+        </nav>
+      </div>
+      {footer}
+    </aside>
+  )
+}
diff --git a/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.spec.tsx b/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.spec.tsx
new file mode 100644
index 00000000000..3c43e47be8f
--- /dev/null
+++ b/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.spec.tsx
@@ -0,0 +1,1285 @@
+import { useParams } from '@tanstack/react-router'
+import {
+  type PlatformComponentConfigurationResolutionResponse,
+  type PlatformTemplateComponentResponse,
+  type PlatformTemplateSummaryResponse,
+} from 'qovery-typescript-axios'
+import { useState } from 'react'
+import { useModal } from '@qovery/shared/ui'
+import { act, renderWithProviders, screen, waitFor, within } from '@qovery/shared/util-tests'
+import { useCluster } from '../hooks/use-cluster/use-cluster'
+import { useDeployCluster } from '../hooks/use-deploy-cluster/use-deploy-cluster'
+import { usePlatformComponentConfigurations } from '../hooks/use-platform-component-configurations/use-platform-component-configurations'
+import { usePlatformConfiguration } from '../hooks/use-platform-configuration/use-platform-configuration'
+import { usePlatformTemplates } from '../hooks/use-platform-templates/use-platform-templates'
+import { useUpdatePlatformConfiguration } from '../hooks/use-update-platform-configuration/use-update-platform-configuration'
+import { ClusterProfileFeature } from './cluster-profile'
+
+const mockUseBlocker = jest.fn()
+jest.mock('@tanstack/react-router', () => ({
+  useParams: jest.fn(),
+  useBlocker: (options: unknown) => mockUseBlocker(options),
+}))
+const mockUseDebounce = jest.fn(<T,>(value: T) => value)
+jest.mock('@qovery/shared/util-hooks', () => ({
+  ...jest.requireActual('@qovery/shared/util-hooks'),
+  useDebounce: <T,>(value: T) => mockUseDebounce(value),
+}))
+jest.mock('../hooks/use-cluster/use-cluster')
+jest.mock('../hooks/use-cluster-operator-status/use-cluster-operator-status', () => ({
+  useClusterOperatorStatus: () => ({ data: null, isLoading: false }),
+}))
+jest.mock('../hooks/use-deploy-cluster/use-deploy-cluster')
+jest.mock('../hooks/use-update-platform-configuration/use-update-platform-configuration')
+jest.mock('../hooks/use-platform-templates/use-platform-templates')
+jest.mock('../hooks/use-platform-configuration/use-platform-configuration')
+jest.mock('../hooks/use-platform-component-configurations/use-platform-component-configurations')
+
+const mockUseParams = useParams as jest.Mock
+const mockUseCluster = useCluster as jest.MockedFunction<typeof useCluster>
+const mockUsePlatformTemplates = usePlatformTemplates as jest.MockedFunction<typeof usePlatformTemplates>
+const mockUsePlatformConfiguration = usePlatformConfiguration as jest.MockedFunction<typeof usePlatformConfiguration>
+const mockUseDeployCluster = useDeployCluster as jest.Mock
+const mockUseUpdatePlatformBinding = useUpdatePlatformConfiguration as jest.Mock
+const mockDeployCluster = jest.fn()
+const mockUpdatePlatformConfiguration = jest.fn()
+const mockUsePlatformComponentConfigurations = usePlatformComponentConfigurations as jest.MockedFunction<
+  typeof usePlatformComponentConfigurations
+>
+
+function createComponent(key: string, fields: unknown[] = [], configurationSections: unknown[] = []) {
+  return {
+    key,
+    kind: 'HELM',
+    fields,
+    configurationSections,
+  } as unknown as PlatformTemplateComponentResponse
+}
+
+const mockTemplates = [
+  {
+    key: 'qovery-cluster-v0',
+    version: '1.0.0',
+    status: 'PUBLISHED',
+    layers: [
+      {
+        key: 'infrastructure',
+        mandatory: false,
+        enabledByDefault: false,
+        description: 'Infrastructure components',
+        components: [],
+      },
+      {
+        key: 'qovery-stack',
+        mandatory: true,
+        enabledByDefault: true,
+        components: [
+          createComponent('cluster-agent'),
+          createComponent('shell-agent'),
+          createComponent('qovery-priority-class'),
+        ],
+      },
+      {
+        key: 'log-infra',
+        mandatory: true,
+        enabledByDefault: true,
+        description: 'Collects logs from everything running on this cluster and makes them searchable in Qovery',
+        components: [
+          createComponent('loki', [
+            {
+              key: 'retention-period',
+              label: 'Retention period',
+              type: 'number',
+              required: true,
+              sensitive: false,
+              defaultValue: '12',
+              constraints: { min: 1 },
+            },
+            {
+              key: 'high-availability',
+              label: 'High availability',
+              type: 'bool',
+              required: false,
+              sensitive: false,
+              constraints: {},
+            },
+            {
+              key: 'resource-profile',
+              label: 'Resource profile',
+              type: 'string',
+              required: false,
+              sensitive: false,
+              constraints: { allowedValues: ['CHART_DEFAULT', 'SMALL', 'MEDIUM', 'LARGE'] },
+            },
+            {
+              key: 'storage',
+              label: 'Storage',
+              type: 'string',
+              required: false,
+              sensitive: false,
+              constraints: { allowedValues: ['PVC', 's3', 'gcs', 'azure'] },
+            },
+          ]),
+          createComponent(
+            'alloy',
+            [
+              {
+                key: 'endpoint',
+                label: 'Endpoint',
+                type: 'string',
+                required: false,
+                sensitive: false,
+                constraints: {},
+              },
+            ],
+            [{ sourceComponentKey: 'loki', fieldKeys: ['resource-profile'] }]
+          ),
+        ],
+      },
+      {
+        key: 'network',
+        mandatory: false,
+        enabledByDefault: true,
+        components: [
+          createComponent('envoy', [
+            {
+              key: 'envoy.client_validation.ca_certificates',
+              label: 'Client-validation CA certificates',
+              description: 'Trust anchors required for mutual TLS client validation.',
+              type: 'array',
+              required: false,
+              sensitive: false,
+              constraints: { minItems: null, maxItems: 2, uniqueItems: false },
+              items: {
+                type: 'object',
+                fields: [
+                  {
+                    key: 'name',
+                    label: 'Certificate name',
+                    type: 'string',
+                    required: true,
+                    sensitive: false,
+                    defaultValue: null,
+                    constraints: {},
+                  },
+                  {
+                    key: 'ca_crt',
+                    label: 'CA certificate PEM',
+                    type: 'string',
+                    required: true,
+                    sensitive: false,
+                    defaultValue: null,
+                    constraints: {},
+                  },
+                ],
+              },
+              itemFields: [],
+            },
+            {
+              key: 'envoy.trusted_cidrs',
+              label: 'Trusted CIDRs',
+              type: 'array',
+              required: false,
+              sensitive: false,
+              constraints: { uniqueItems: true },
+              items: { type: 'string', constraints: {} },
+            },
+          ]),
+        ],
+      },
+      {
+        key: 'karpenter',
+        mandatory: false,
+        enabledByDefault: true,
+        components: [
+          createComponent('karpenter-crd'),
+          createComponent('karpenter-configuration', [
+            {
+              key: 'node-pool',
+              label: 'Node pool',
+              type: 'string',
+              required: false,
+              sensitive: false,
+              constraints: {},
+            },
+          ]),
+        ],
+      },
+      {
+        key: 'crds',
+        mandatory: false,
+        enabledByDefault: true,
+        components: [createComponent('gateway-crd')],
+      },
+    ],
+  },
+] as unknown as PlatformTemplateSummaryResponse[]
+
+function createResolution(componentKey: string): PlatformComponentConfigurationResolutionResponse {
+  const component = mockTemplates[0].layers.flatMap((layer) => layer.components).find(({ key }) => key === componentKey)
+
+  return {
+    componentKey,
+    fields: component?.fields ?? [],
+    requirements: [],
+    componentBindings: [],
+    violations: [],
+    resolvedValues: {},
+  }
+}
+
+function createComponentQueries(componentKeys: string[], isFetching = false, isError = false) {
+  return componentKeys.map((componentKey) => ({
+    data: createResolution(componentKey),
+    isError,
+    isFetching,
+  })) as ReturnType<typeof usePlatformComponentConfigurations>
+}
+
+describe('ClusterProfileFeature', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockUseDebounce.mockImplementation(<T,>(value: T) => value)
+    mockUseParams.mockReturnValue({ organizationId: 'organization-id', clusterId: 'cluster-id' })
+    mockUseCluster.mockReturnValue({
+      data: { cloud_provider: 'AWS', kubernetes: 'SELF_MANAGED' },
+      isError: false,
+      isLoading: false,
+    } as ReturnType<typeof useCluster>)
+    mockUsePlatformTemplates.mockReturnValue({
+      data: mockTemplates,
+      isError: false,
+      isLoading: false,
+    } as ReturnType<typeof usePlatformTemplates>)
+    mockUsePlatformConfiguration.mockReturnValue({
+      data: null,
+      isError: false,
+      isLoading: false,
+    } as ReturnType<typeof usePlatformConfiguration>)
+    mockUsePlatformComponentConfigurations.mockReturnValue(createComponentQueries(['loki', 'alloy']))
+    mockUpdatePlatformConfiguration.mockResolvedValue({})
+    mockDeployCluster.mockResolvedValue({})
+    mockUseUpdatePlatformBinding.mockReturnValue({ mutateAsync: mockUpdatePlatformConfiguration, isLoading: false })
+    mockUseDeployCluster.mockReturnValue({ mutateAsync: mockDeployCluster, isLoading: false })
+  })
+
+  it('renders API-defined configuration fields', () => {
+    const { container } = renderWithProviders(<ClusterProfileFeature />)
+
+    expect(mockUsePlatformTemplates).toHaveBeenCalledWith({
+      organizationId: 'organization-id',
+      clusterMode: 'CUSTOMER_MANAGED',
+      cloudProvider: 'AWS',
+      enabled: true,
+    })
+    expect(screen.queryByRole('banner')).not.toBeInTheDocument()
+    expect(container.querySelectorAll('.fa-circle-check')).toHaveLength(0)
+    // No layer status without a cluster configuration: no layer is skipped or managed by Qovery.
+    expect(container.querySelectorAll('.fa-circle-minus')).toHaveLength(0)
+    expect(screen.getByRole('heading', { name: 'Log infra' })).toBeInTheDocument()
+    expect(
+      screen.getByText('Collects logs from everything running on this cluster and makes them searchable in Qovery')
+    ).toBeInTheDocument()
+    expect(screen.getByRole('link', { name: 'Loki' })).toHaveAttribute('aria-current', 'page')
+    expect(screen.getByRole('link', { name: 'Loki' }).querySelector('svg')?.outerHTML).toBe(
+      screen.getByRole('button', { name: 'Loki' }).querySelector('svg')?.outerHTML
+    )
+    expect(screen.getByRole('link', { name: 'Alloy' }).querySelector('svg')?.outerHTML).toBe(
+      screen.getByRole('button', { name: 'Alloy' }).querySelector('svg')?.outerHTML
+    )
+    expect(screen.getByRole('spinbutton', { name: 'Retention period' })).toHaveValue(12)
+    expect(screen.getByRole('combobox', { name: 'Resource profile' })).toBeInTheDocument()
+    expect(screen.getByRole('combobox', { name: 'Storage' })).toBeInTheDocument()
+    expect(screen.getAllByText('Loki').length).toBeGreaterThan(0)
+    expect(screen.getAllByText('Alloy').length).toBeGreaterThan(0)
+  })
+
+  it('allows the UI controls to be previewed locally', async () => {
+    const { userEvent } = renderWithProviders(<ClusterProfileFeature />)
+
+    expect(screen.getByRole('link', { name: 'Loki' })).toHaveAttribute('aria-current', 'page')
+    expect(screen.getByRole('spinbutton', { name: 'Retention period' })).toHaveValue(12)
+
+    const highAvailability = screen.getByRole('switch', { name: 'High availability' })
+    expect(highAvailability).not.toBeChecked()
+    await userEvent.click(highAvailability)
+    expect(highAvailability).toBeChecked()
+  })
+
+  it('shows read-only fields disabled with their resolved value instead of the draft', () => {
+    mockUsePlatformConfiguration.mockReturnValue({
+      data: {
+        clusterInputs: {},
+        platform: {
+          templateKey: 'qovery-cluster-v0',
+          templateVersion: '1.0.0',
+          managedConfig: { loki: { 'cpu-limit': '250m' } },
+        },
+      },
+      isError: false,
+      isLoading: false,
+    } as unknown as ReturnType<typeof usePlatformConfiguration>)
+    const [loki, alloy] = createComponentQueries(['loki', 'alloy'])
+    const resolution = createResolution('loki')
+    mockUsePlatformComponentConfigurations.mockReturnValue([
+      {
+        ...loki,
+        data: {
+          ...resolution,
+          fields: [
+            ...resolution.fields,
+            {
+              key: 'cpu-limit',
+              label: 'CPU limit',
+              type: 'string',
+              required: false,
+              sensitive: false,
+              readOnly: true,
+              defaultValue: null,
+              constraints: {},
+            },
+          ],
+          resolvedValues: { 'cpu-limit': '500m' },
+        },
+      },
+      alloy,
+    ] as ReturnType<typeof usePlatformComponentConfigurations>)
+    renderWithProviders(<ClusterProfileFeature />)
+
+    const cpuLimit = screen.getByRole('textbox', { name: 'CPU limit' })
+    expect(cpuLimit).toBeDisabled()
+    expect(cpuLimit).toHaveValue('500m')
+    expect(screen.getByRole('spinbutton', { name: 'Retention period' })).toBeEnabled()
+  })
+
+  it('renders configuration sections from their source component', () => {
+    renderWithProviders(<ClusterProfileFeature activeComponentKey="alloy" />)
+
+    expect(screen.getByRole('textbox', { name: 'Endpoint' })).toBeInTheDocument()
+    expect(screen.getByRole('combobox', { name: 'Resource profile' })).toBeInTheDocument()
+  })
+
+  it('shows a skeleton instead of stale fields while switching components', () => {
+    const { rerender } = renderWithProviders(<ClusterProfileFeature activeComponentKey="loki" />)
+
+    expect(screen.getByRole('spinbutton', { name: 'Retention period' })).toBeInTheDocument()
+
+    mockUsePlatformComponentConfigurations.mockReturnValue(createComponentQueries(['loki'], true))
+    rerender(<ClusterProfileFeature activeComponentKey="alloy" />)
+
+    expect(screen.getByRole('status', { name: 'Loading configuration' })).toBeInTheDocument()
+    expect(screen.queryByRole('spinbutton', { name: 'Retention period' })).not.toBeInTheDocument()
+  })
+
+  it('shows the skeleton until the selected component has a resolved configuration', () => {
+    mockUsePlatformComponentConfigurations.mockReturnValue([
+      { data: undefined, isError: false, isFetching: true },
+    ] as ReturnType<typeof usePlatformComponentConfigurations>)
+
+    renderWithProviders(<ClusterProfileFeature />)
+
+    expect(screen.getByRole('status', { name: 'Loading configuration' })).toBeInTheDocument()
+    expect(screen.queryByRole('spinbutton', { name: 'Retention period' })).not.toBeInTheDocument()
+  })
+
+  it('keeps the form visible while a field edit triggers a resolver refetch', async () => {
+    const { userEvent } = renderWithProviders(<ClusterProfileFeature />)
+    const highAvailability = screen.getByRole('switch', { name: 'High availability' })
+    // Queries keep their previous data while refetching.
+    mockUsePlatformComponentConfigurations.mockReturnValue(createComponentQueries(['loki', 'alloy'], true))
+
+    await userEvent.click(highAvailability)
+
+    expect(highAvailability).toBeChecked()
+    expect(screen.getByRole('spinbutton', { name: 'Retention period' })).toBeInTheDocument()
+    expect(screen.queryByRole('status', { name: 'Loading configuration' })).not.toBeInTheDocument()
+  })
+
+  it('keeps the last resolved form visible when a background resolver refresh fails', () => {
+    mockUsePlatformComponentConfigurations.mockReturnValue(createComponentQueries(['loki'], false, true))
+
+    renderWithProviders(<ClusterProfileFeature />)
+
+    expect(screen.getByRole('alert')).toHaveTextContent('The last resolved fields are still shown.')
+    expect(screen.getByRole('spinbutton', { name: 'Retention period' })).toBeInTheDocument()
+  })
+
+  it('does not replace the active form with an error from an undisplayed component', () => {
+    mockUsePlatformComponentConfigurations.mockReturnValue([
+      ...createComponentQueries(['loki']),
+      ...createComponentQueries(['alloy'], false, true),
+    ])
+
+    renderWithProviders(<ClusterProfileFeature />)
+
+    expect(screen.queryByRole('alert')).not.toBeInTheDocument()
+    expect(screen.getByRole('spinbutton', { name: 'Retention period' })).toBeInTheDocument()
+  })
+
+  it('uses the URL-selected component as the active sidebar item', async () => {
+    const onActiveComponentChange = jest.fn()
+    const { userEvent } = renderWithProviders(
+      <ClusterProfileFeature activeComponentKey="alloy" onActiveComponentChange={onActiveComponentChange} />
+    )
+
+    expect(screen.getByRole('button', { name: 'Log infra' }).closest('li')).toHaveClass('bg-surface-neutral-component')
+    expect(screen.getByRole('button', { name: 'Alloy' })).toHaveAttribute('aria-current', 'page')
+    expect(screen.getByRole('link', { name: 'Alloy' })).toHaveAttribute('aria-current', 'page')
+    expect(screen.getByRole('button', { name: 'Loki' })).not.toHaveAttribute('aria-current', 'page')
+    expect(
+      within(screen.getByRole('navigation', { name: 'Log infra configuration' })).getByRole('link', { name: 'Alloy' })
+    ).toBeInTheDocument()
+
+    await userEvent.click(screen.getByRole('link', { name: 'Loki' }))
+
+    expect(onActiveComponentChange).toHaveBeenCalledWith('loki')
+  })
+
+  it('resolves another component without waiting for the edit debounce', async () => {
+    // A debounce that never settles: only edits may wait for it.
+    mockUseDebounce.mockImplementation(<T,>(value: T) => jest.requireActual('react').useRef(value).current)
+    mockUsePlatformComponentConfigurations.mockImplementation(({ requests }) =>
+      createComponentQueries(Object.keys(requests))
+    )
+    function ClusterProfileWithNavigation() {
+      const [componentKey, setComponentKey] = useState<string>()
+      return <ClusterProfileFeature activeComponentKey={componentKey} onActiveComponentChange={setComponentKey} />
+    }
+    const { userEvent } = renderWithProviders(<ClusterProfileWithNavigation />)
+
+    await userEvent.click(screen.getByRole('button', { name: 'Envoy' }))
+
+    expect(mockUsePlatformComponentConfigurations).toHaveBeenLastCalledWith(
+      expect.objectContaining({ requests: { envoy: expect.anything() } })
+    )
+    expect(screen.queryByRole('status', { name: 'Loading configuration' })).not.toBeInTheDocument()
+  })
+
+  describe('edits debounce across component switches', () => {
+    function ClusterProfileWithNavigation() {
+      const [componentKey, setComponentKey] = useState<string>()
+      return <ClusterProfileFeature activeComponentKey={componentKey} onActiveComponentChange={setComponentKey} />
+    }
+    const getLastLokiRequest = () =>
+      mockUsePlatformComponentConfigurations.mock.calls.at(-1)?.[0].requests['loki']?.profileConfig
+
+    beforeEach(() => {
+      mockUsePlatformComponentConfigurations.mockImplementation(({ requests }) =>
+        createComponentQueries(Object.keys(requests))
+      )
+    })
+
+    it('keeps an edit debounced after switching to another component', async () => {
+      // A debounce that never settles.
+      mockUseDebounce.mockImplementation(<T,>(value: T) => jest.requireActual('react').useRef(value).current)
+      const { userEvent } = renderWithProviders(<ClusterProfileWithNavigation />)
+
+      await userEvent.click(screen.getByRole('switch', { name: 'High availability' }))
+      const bar = screen.getByRole('region', { name: 'Unsaved profile changes' })
+      await userEvent.click(screen.getByRole('button', { name: 'Envoy' }))
+
+      expect(getLastLokiRequest()).not.toHaveProperty('high-availability', true)
+      // Saving stays available while the edit waits to be checked: the API validates it too.
+      expect(within(bar).getByRole('button', { name: 'Save' })).toBeEnabled()
+    })
+
+    it('checks the latest edit when coming back to its component', async () => {
+      const { userEvent } = renderWithProviders(<ClusterProfileWithNavigation />)
+
+      await userEvent.click(screen.getByRole('switch', { name: 'High availability' }))
+      await userEvent.click(screen.getByRole('button', { name: 'Envoy' }))
+      await userEvent.click(screen.getByRole('button', { name: 'Log infra' }))
+
+      expect(screen.getByRole('switch', { name: 'High availability' })).toBeChecked()
+      expect(getLastLokiRequest()).toHaveProperty('high-availability', true)
+      expect(
+        within(screen.getByRole('region', { name: 'Unsaved profile changes' })).getByRole('button', { name: 'Save' })
+      ).toBeEnabled()
+    })
+  })
+
+  it('moves between the component tabs with the arrow keys', async () => {
+    const onActiveComponentChange = jest.fn()
+    const { userEvent } = renderWithProviders(
+      <ClusterProfileFeature activeComponentKey="loki" onActiveComponentChange={onActiveComponentChange} />
+    )
+    screen.getByRole('link', { name: 'Loki' }).focus()
+    await userEvent.keyboard('{ArrowRight}')
+
+    expect(screen.getByRole('link', { name: 'Alloy' })).toHaveFocus()
+    expect(onActiveComponentChange).not.toHaveBeenCalled()
+
+    await userEvent.keyboard('{Enter}')
+
+    expect(onActiveComponentChange).toHaveBeenCalledWith('alloy')
+  })
+
+  describe('array fields', () => {
+    beforeEach(() => {
+      mockUsePlatformComponentConfigurations.mockReturnValue(createComponentQueries(['envoy']))
+    })
+
+    it('adds, edits and removes object array items through a modal', async () => {
+      const { userEvent } = renderWithProviders(<ClusterProfileFeature activeComponentKey="envoy" />)
+
+      expect(screen.getByText('Client-validation CA certificates')).toBeInTheDocument()
+      await userEvent.click(screen.getByRole('button', { name: 'Add item to Client-validation CA certificates' }))
+
+      const dialog = await screen.findByRole('dialog')
+      expect(within(dialog).getByText('Client-validation CA certificates')).toBeInTheDocument()
+      expect(within(dialog).getByRole('button', { name: 'Add' })).toBeDisabled()
+
+      await userEvent.type(within(dialog).getByLabelText('Certificate name'), 'client-ca')
+      await userEvent.type(within(dialog).getByLabelText('CA certificate PEM'), 'pem')
+      await userEvent.click(within(dialog).getByRole('button', { name: 'Add' }))
+
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+      expect(screen.getByText('client-ca')).toBeInTheDocument()
+
+      await userEvent.click(screen.getByRole('button', { name: 'Edit client-ca' }))
+      const editDialog = await screen.findByRole('dialog')
+      const nameInput = within(editDialog).getByLabelText('Certificate name')
+      expect(nameInput).toHaveValue('client-ca')
+      await userEvent.clear(nameInput)
+      await userEvent.type(nameInput, 'renamed-ca')
+      await userEvent.click(within(editDialog).getByRole('button', { name: 'Save' }))
+
+      expect(screen.getByText('renamed-ca')).toBeInTheDocument()
+
+      await userEvent.click(screen.getByRole('button', { name: 'Remove renamed-ca' }))
+      expect(screen.queryByText('renamed-ca')).not.toBeInTheDocument()
+    })
+
+    it('closes the item modal when the profile unmounts', async () => {
+      let hideProfile: () => void = () => undefined
+      function ClusterProfileUntilHidden() {
+        const [isShown, setIsShown] = useState(true)
+        hideProfile = () => setIsShown(false)
+        return isShown ? <ClusterProfileFeature activeComponentKey="envoy" /> : null
+      }
+      const { userEvent } = renderWithProviders(<ClusterProfileUntilHidden />)
+
+      await userEvent.click(screen.getByRole('button', { name: 'Add item to Client-validation CA certificates' }))
+      expect(await screen.findByRole('dialog')).toBeInTheDocument()
+
+      act(() => hideProfile())
+
+      await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument())
+    })
+
+    it('does not close another modal after the item modal was dismissed', async () => {
+      let hideProfile: () => void = () => undefined
+      function ClusterProfileWithOtherModal() {
+        const [isShown, setIsShown] = useState(true)
+        const { openModal } = useModal()
+        hideProfile = () => setIsShown(false)
+        return (
+          <>
+            <button type="button" onClick={() => openModal({ content: <p>Other modal</p> })}>
+              Open other modal
+            </button>
+            {isShown ? <ClusterProfileFeature activeComponentKey="envoy" /> : null}
+          </>
+        )
+      }
+      const { userEvent } = renderWithProviders(<ClusterProfileWithOtherModal />)
+
+      await userEvent.click(screen.getByRole('button', { name: 'Add item to Client-validation CA certificates' }))
+      expect(await screen.findByRole('dialog')).toBeInTheDocument()
+      await userEvent.keyboard('{Escape}')
+      await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument())
+
+      await userEvent.click(screen.getByRole('button', { name: 'Open other modal' }))
+      expect(await screen.findByText('Other modal')).toBeInTheDocument()
+      act(() => hideProfile())
+
+      expect(screen.getByText('Other modal')).toBeInTheDocument()
+    })
+
+    it('disables the add button once the item limit is reached', () => {
+      mockUsePlatformConfiguration.mockReturnValue({
+        data: {
+          clusterInputs: {},
+          platform: {
+            templateKey: 'qovery-cluster-v0',
+            templateVersion: '1.0.0',
+            managedConfig: {
+              envoy: {
+                'envoy.client_validation.ca_certificates': [
+                  { name: 'first', ca_crt: 'pem' },
+                  { name: 'second', ca_crt: 'pem' },
+                ],
+              },
+            },
+          },
+        },
+        isError: false,
+        isLoading: false,
+      } as unknown as ReturnType<typeof usePlatformConfiguration>)
+
+      renderWithProviders(<ClusterProfileFeature activeComponentKey="envoy" />)
+
+      expect(screen.getByRole('button', { name: 'Add item to Client-validation CA certificates' })).toBeDisabled()
+      expect(screen.getByText('Limit of 2 reached.')).toBeInTheDocument()
+    })
+
+    it('adds scalar array items through a modal', async () => {
+      const { userEvent } = renderWithProviders(<ClusterProfileFeature activeComponentKey="envoy" />)
+
+      await userEvent.click(screen.getByRole('button', { name: 'Add item to Trusted CIDRs' }))
+      const dialog = await screen.findByRole('dialog')
+      await userEvent.type(within(dialog).getByLabelText('Trusted CIDRs'), '10.0.0.0/8')
+      await userEvent.click(within(dialog).getByRole('button', { name: 'Add' }))
+
+      expect(screen.getByText('10.0.0.0/8')).toBeInTheDocument()
+      const calls = mockUsePlatformComponentConfigurations.mock.calls
+      expect(calls[calls.length - 1][0].requests['envoy'].profileConfig).toEqual({
+        'envoy.trusted_cidrs': ['10.0.0.0/8'],
+      })
+    })
+
+    it('shows violations on array items and unmapped violations', () => {
+      mockUsePlatformConfiguration.mockReturnValue({
+        data: {
+          clusterInputs: {},
+          platform: {
+            templateKey: 'qovery-cluster-v0',
+            templateVersion: '1.0.0',
+            managedConfig: {
+              envoy: { 'envoy.client_validation.ca_certificates': [{ name: 'INVALID', ca_crt: 'pem' }] },
+            },
+          },
+        },
+        isError: false,
+        isLoading: false,
+      } as unknown as ReturnType<typeof usePlatformConfiguration>)
+      mockUsePlatformComponentConfigurations.mockReturnValue([
+        {
+          data: {
+            ...createResolution('envoy'),
+            violations: [
+              {
+                code: 'PATTERN',
+                fieldPath: 'envoy.client_validation.ca_certificates[0].name',
+                message: 'Name must be lowercase.',
+              },
+              { code: 'UNKNOWN', fieldPath: 'envoy.unknown', message: 'Something else is wrong.' },
+            ],
+          },
+          isError: false,
+          isFetching: false,
+        },
+      ] as ReturnType<typeof usePlatformComponentConfigurations>)
+
+      renderWithProviders(<ClusterProfileFeature activeComponentKey="envoy" />)
+
+      expect(screen.getByText('INVALID')).toBeInTheDocument()
+      expect(screen.getByText('Name must be lowercase.')).toBeInTheDocument()
+      expect(screen.getByRole('alert')).toHaveTextContent('Something else is wrong.')
+    })
+  })
+
+  describe('search', () => {
+    it('reports search input changes', async () => {
+      const onSearchChange = jest.fn()
+      const { userEvent } = renderWithProviders(<ClusterProfileFeature onSearchChange={onSearchChange} />)
+
+      await userEvent.type(screen.getByRole('textbox', { name: 'Search layers' }), 'n')
+
+      expect(onSearchChange).toHaveBeenCalledWith('n')
+    })
+
+    it('keeps the typed search and follows the URL one when navigation changes it', async () => {
+      let navigateToSearch: (search: string) => void = () => undefined
+      function ClusterProfileWithUrlSearch() {
+        const [search, setSearch] = useState('network')
+        navigateToSearch = setSearch
+        return <ClusterProfileFeature search={search} />
+      }
+      const { userEvent } = renderWithProviders(<ClusterProfileWithUrlSearch />)
+      const input = screen.getByRole('textbox', { name: 'Search layers' })
+
+      await userEvent.type(input, 's')
+
+      expect(input).toHaveValue('networks')
+
+      act(() => navigateToSearch(''))
+
+      expect(input).toHaveValue('')
+    })
+
+    it('keeps the whole layer when its label matches', () => {
+      renderWithProviders(<ClusterProfileFeature search="network" />)
+
+      expect(screen.getByRole('textbox', { name: 'Search layers' })).toHaveValue('network')
+      expect(screen.getByRole('button', { name: 'Network' })).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'Envoy' })).toHaveAttribute('aria-current', 'page')
+      expect(screen.queryByRole('button', { name: 'Qovery stack' })).not.toBeInTheDocument()
+    })
+
+    it('filters components and fields matching the search', () => {
+      renderWithProviders(<ClusterProfileFeature search="Resource" />)
+
+      expect(screen.getByRole('button', { name: 'Loki' })).toHaveAttribute('aria-current', 'page')
+      // Alloy renders the Loki resource profile through a configuration section.
+      expect(screen.getByRole('button', { name: 'Alloy' })).toBeInTheDocument()
+      expect(screen.queryByRole('button', { name: 'Network' })).not.toBeInTheDocument()
+      expect(screen.getByText('Resource', { selector: 'mark' })).toBeInTheDocument()
+      expect(screen.queryByRole('spinbutton', { name: 'Retention period' })).not.toBeInTheDocument()
+    })
+
+    it('selects the first matching component when the URL one does not match', () => {
+      const onActiveComponentChange = jest.fn()
+      renderWithProviders(
+        <ClusterProfileFeature
+          activeComponentKey="loki"
+          search="certificate name"
+          onActiveComponentChange={onActiveComponentChange}
+        />
+      )
+
+      expect(screen.getByRole('button', { name: 'Envoy' })).toHaveAttribute('aria-current', 'page')
+      expect(screen.getByRole('link', { name: 'Envoy' })).toHaveAttribute('aria-current', 'page')
+      expect(screen.queryByRole('link', { name: 'Loki' })).not.toBeInTheDocument()
+      expect(onActiveComponentChange).not.toHaveBeenCalled()
+    })
+
+    it('does not open a component without configuration matching the search', () => {
+      renderWithProviders(<ClusterProfileFeature search="karpenter crd" />)
+
+      expect(screen.getByRole('button', { name: 'Karpenter crd' })).toBeDisabled()
+      expect(screen.getByText('No settings match your search')).toBeInTheDocument()
+      expect(screen.queryByText('No configuration needed for this component')).not.toBeInTheDocument()
+    })
+
+    it('tells when the selected component only matches through settings hidden by the current values', () => {
+      mockUsePlatformComponentConfigurations.mockImplementation(
+        ({ requests }) =>
+          Object.keys(requests).map((componentKey) => {
+            const resolution = createResolution(componentKey)
+            return {
+              data:
+                componentKey === 'loki'
+                  ? { ...resolution, fields: resolution.fields.filter(({ key }) => key !== 'retention-period') }
+                  : resolution,
+              isError: false,
+              isFetching: false,
+            }
+          }) as ReturnType<typeof usePlatformComponentConfigurations>
+      )
+      renderWithProviders(<ClusterProfileFeature activeComponentKey="loki" search="retention" />)
+
+      expect(screen.getByRole('button', { name: 'Loki' })).toHaveAttribute('aria-current', 'page')
+      expect(screen.getByText('No settings match your search')).toBeInTheDocument()
+    })
+
+    it('still reports a failed refresh when no displayed setting matches the search', () => {
+      mockUsePlatformComponentConfigurations.mockImplementation(
+        ({ requests }) =>
+          Object.keys(requests).map((componentKey) => {
+            const resolution = createResolution(componentKey)
+            return componentKey === 'loki'
+              ? {
+                  data: { ...resolution, fields: resolution.fields.filter(({ key }) => key !== 'retention-period') },
+                  isError: true,
+                  isFetching: false,
+                }
+              : { data: resolution, isError: false, isFetching: false }
+          }) as ReturnType<typeof usePlatformComponentConfigurations>
+      )
+      renderWithProviders(<ClusterProfileFeature activeComponentKey="loki" search="retention" />)
+
+      expect(screen.getByRole('alert')).toHaveTextContent('Configuration could not be refreshed')
+      expect(screen.getByText('No settings match your search')).toBeInTheDocument()
+    })
+
+    it('shows empty states when nothing matches', () => {
+      renderWithProviders(<ClusterProfileFeature search="CPUza" />)
+
+      expect(screen.getByText('No layers match your search')).toBeInTheDocument()
+      expect(screen.getByText('No settings match your search')).toBeInTheDocument()
+      expect(screen.getByRole('heading', { name: 'Log infra' })).toBeInTheDocument()
+      expect(screen.queryByRole('link')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('changes bar', () => {
+    async function editProfile(userEvent: ReturnType<typeof renderWithProviders>['userEvent']) {
+      await userEvent.click(screen.getByRole('switch', { name: 'High availability' }))
+      return screen.getByRole('region', { name: 'Unsaved profile changes' })
+    }
+
+    it('blocks saving while the edits have violations', async () => {
+      const [loki, alloy] = createComponentQueries(['loki', 'alloy'])
+      mockUsePlatformComponentConfigurations.mockReturnValue([
+        {
+          ...loki,
+          data: {
+            ...createResolution('loki'),
+            violations: [{ fieldPath: 'storage', code: 'REQUIRED', message: 'Storage is required.' }],
+          },
+        },
+        alloy,
+      ] as ReturnType<typeof usePlatformComponentConfigurations>)
+      const { userEvent } = renderWithProviders(<ClusterProfileFeature />)
+
+      const bar = await editProfile(userEvent)
+
+      expect(within(bar).getByRole('button', { name: 'Save' })).toBeDisabled()
+      expect(within(bar).getByRole('button', { name: 'Save and deploy' })).toBeDisabled()
+    })
+
+    it('keeps blocking saving once the invalid component is out of view', async () => {
+      mockUsePlatformComponentConfigurations.mockImplementation(
+        ({ requests }) =>
+          Object.keys(requests).map((componentKey) => ({
+            data: {
+              ...createResolution(componentKey),
+              violations:
+                componentKey === 'loki'
+                  ? [{ fieldPath: 'storage', code: 'REQUIRED', message: 'Storage is required.' }]
+                  : [],
+            },
+            isError: false,
+            isFetching: false,
+          })) as ReturnType<typeof usePlatformComponentConfigurations>
+      )
+      function ClusterProfileWithNavigation() {
+        const [componentKey, setComponentKey] = useState<string>()
+        return <ClusterProfileFeature activeComponentKey={componentKey} onActiveComponentChange={setComponentKey} />
+      }
+      const { userEvent } = renderWithProviders(<ClusterProfileWithNavigation />)
+
+      const bar = await editProfile(userEvent)
+      await userEvent.click(screen.getByRole('button', { name: 'Envoy' }))
+
+      expect(screen.getByRole('link', { name: 'Envoy' })).toHaveAttribute('aria-current', 'page')
+      expect(within(bar).getByRole('button', { name: 'Save' })).toBeDisabled()
+      expect(within(bar).getByRole('button', { name: 'Save and deploy' })).toBeDisabled()
+    })
+
+    it('blocks saving while a required input is missing', async () => {
+      const [loki, alloy] = createComponentQueries(['loki', 'alloy'])
+      mockUsePlatformComponentConfigurations.mockReturnValue([
+        {
+          ...loki,
+          data: {
+            ...createResolution('loki'),
+            requirements: [
+              {
+                key: 'infra.s3BucketName',
+                label: 'S3 bucket name',
+                type: 'string',
+                required: true,
+                sensitive: false,
+                constraints: {},
+                status: 'MISSING',
+              },
+            ],
+          },
+        },
+        alloy,
+      ] as ReturnType<typeof usePlatformComponentConfigurations>)
+      const { userEvent } = renderWithProviders(<ClusterProfileFeature />)
+
+      const bar = await editProfile(userEvent)
+
+      expect(within(bar).getByRole('button', { name: 'Save' })).toBeDisabled()
+    })
+
+    it('keeps saving available while the edits are being checked', async () => {
+      mockUsePlatformComponentConfigurations.mockReturnValue(createComponentQueries(['loki', 'alloy'], true))
+      const { userEvent } = renderWithProviders(<ClusterProfileFeature />)
+
+      const bar = await editProfile(userEvent)
+
+      expect(within(bar).getByRole('button', { name: 'Save' })).toBeEnabled()
+      expect(within(bar).getByRole('button', { name: 'Save and deploy' })).toBeEnabled()
+    })
+
+    it('keeps saving blocked while edits with violations are checked again', async () => {
+      const [loki, alloy] = createComponentQueries(['loki', 'alloy'])
+      mockUsePlatformComponentConfigurations.mockReturnValue([
+        {
+          ...loki,
+          isFetching: true,
+          data: {
+            ...createResolution('loki'),
+            violations: [{ fieldPath: 'storage', code: 'REQUIRED', message: 'Storage is required.' }],
+          },
+        },
+        alloy,
+      ] as ReturnType<typeof usePlatformComponentConfigurations>)
+      const { userEvent } = renderWithProviders(<ClusterProfileFeature />)
+
+      const bar = await editProfile(userEvent)
+
+      expect(within(bar).getByRole('button', { name: 'Save' })).toBeDisabled()
+    })
+
+    it('blocks saving when the edits could not be checked', async () => {
+      mockUsePlatformComponentConfigurations.mockReturnValue(createComponentQueries(['loki', 'alloy'], false, true))
+      const { userEvent } = renderWithProviders(<ClusterProfileFeature />)
+
+      const bar = await editProfile(userEvent)
+
+      expect(within(bar).getByRole('button', { name: 'Save' })).toBeDisabled()
+    })
+
+    it('appears once a value differs from the saved one', async () => {
+      const { userEvent } = renderWithProviders(<ClusterProfileFeature />)
+
+      expect(screen.queryByRole('button', { name: 'Deploy' })).not.toBeInTheDocument()
+      expect(screen.queryByRole('region', { name: 'Unsaved profile changes' })).not.toBeInTheDocument()
+
+      const highAvailability = screen.getByRole('switch', { name: 'High availability' })
+      await userEvent.click(highAvailability)
+
+      expect(screen.getByRole('region', { name: 'Unsaved profile changes' })).toHaveTextContent('1 change ongoing')
+
+      await userEvent.click(highAvailability)
+
+      await waitFor(() =>
+        expect(screen.queryByRole('region', { name: 'Unsaved profile changes' })).not.toBeInTheDocument()
+      )
+    })
+
+    it('resets the local changes', async () => {
+      const { userEvent } = renderWithProviders(<ClusterProfileFeature />)
+
+      await userEvent.click(screen.getByRole('switch', { name: 'High availability' }))
+      await userEvent.click(screen.getByRole('button', { name: 'Reset' }))
+
+      expect(screen.getByRole('switch', { name: 'High availability' })).not.toBeChecked()
+      await waitFor(() =>
+        expect(screen.queryByRole('region', { name: 'Unsaved profile changes' })).not.toBeInTheDocument()
+      )
+    })
+
+    it('saves the changes into the cluster platform configuration', async () => {
+      const { userEvent } = renderWithProviders(<ClusterProfileFeature />)
+
+      await userEvent.click(screen.getByRole('switch', { name: 'High availability' }))
+      await userEvent.click(screen.getByRole('button', { name: 'Save' }))
+
+      expect(mockUpdatePlatformConfiguration).toHaveBeenCalledWith({
+        clusterId: 'cluster-id',
+        configurationRequest: {
+          platform: expect.objectContaining({
+            templateKey: 'qovery-cluster-v0',
+            templateVersion: '1.0.0',
+            managedConfig: { loki: { 'high-availability': true } },
+          }),
+          clusterInputs: {},
+        },
+      })
+      expect(mockDeployCluster).not.toHaveBeenCalled()
+    })
+
+    it('does not count a cluster input set back to its default as a change', async () => {
+      const [loki, alloy] = createComponentQueries(['loki', 'alloy'])
+      mockUsePlatformComponentConfigurations.mockReturnValue([
+        {
+          ...loki,
+          data: {
+            ...createResolution('loki'),
+            requirements: [
+              {
+                key: 'infra.region',
+                label: 'Region',
+                type: 'string',
+                required: false,
+                sensitive: false,
+                constraints: {},
+                defaultValue: 'eu-west-1',
+                status: 'READY',
+              },
+            ],
+          },
+        },
+        alloy,
+      ] as ReturnType<typeof usePlatformComponentConfigurations>)
+      const { userEvent } = renderWithProviders(<ClusterProfileFeature />)
+      const region = screen.getByRole('textbox', { name: 'Region' })
+      expect(region).toHaveValue('eu-west-1')
+
+      await userEvent.type(region, '2')
+      expect(screen.getByRole('region', { name: 'Unsaved profile changes' })).toHaveTextContent('1 change ongoing')
+
+      await userEvent.type(region, '{Backspace}')
+
+      await waitFor(() =>
+        expect(screen.queryByRole('region', { name: 'Unsaved profile changes' })).not.toBeInTheDocument()
+      )
+    })
+
+    it('does not count a toggle cluster input switched back off as a change', async () => {
+      const [loki, alloy] = createComponentQueries(['loki', 'alloy'])
+      mockUsePlatformComponentConfigurations.mockReturnValue([
+        {
+          ...loki,
+          data: {
+            ...createResolution('loki'),
+            requirements: [
+              {
+                key: 'infra.useSpot',
+                label: 'Use spot instances',
+                type: 'bool',
+                required: false,
+                sensitive: false,
+                constraints: {},
+                status: 'READY',
+              },
+            ],
+          },
+        },
+        alloy,
+      ] as ReturnType<typeof usePlatformComponentConfigurations>)
+      const { userEvent } = renderWithProviders(<ClusterProfileFeature />)
+      const useSpot = screen.getByRole('switch', { name: 'Use spot instances' })
+
+      await userEvent.click(useSpot)
+      expect(screen.getByRole('region', { name: 'Unsaved profile changes' })).toHaveTextContent('1 change ongoing')
+
+      await userEvent.click(useSpot)
+
+      await waitFor(() =>
+        expect(screen.queryByRole('region', { name: 'Unsaved profile changes' })).not.toBeInTheDocument()
+      )
+    })
+
+    it('does not save edits that were reverted by hand', async () => {
+      const { userEvent } = renderWithProviders(<ClusterProfileFeature />)
+
+      await userEvent.click(screen.getByRole('switch', { name: 'High availability' }))
+      await userEvent.click(screen.getByRole('switch', { name: 'High availability' }))
+      await userEvent.clear(screen.getByRole('spinbutton', { name: 'Retention period' }))
+      await userEvent.type(screen.getByRole('spinbutton', { name: 'Retention period' }), '24')
+      await userEvent.click(screen.getByRole('button', { name: 'Save' }))
+
+      expect(mockUpdatePlatformConfiguration).toHaveBeenCalledWith({
+        clusterId: 'cluster-id',
+        configurationRequest: {
+          platform: expect.objectContaining({ managedConfig: { loki: { 'retention-period': 24 } } }),
+          clusterInputs: {},
+        },
+      })
+    })
+
+    it('keeps the edits made while saving', async () => {
+      let resolveSave = () => undefined as unknown
+      mockUpdatePlatformConfiguration.mockReturnValue(new Promise((resolve) => (resolveSave = resolve)))
+      const { userEvent } = renderWithProviders(<ClusterProfileFeature />)
+
+      await userEvent.click(screen.getByRole('switch', { name: 'High availability' }))
+      await userEvent.click(screen.getByRole('button', { name: 'Save' }))
+      await userEvent.clear(screen.getByRole('spinbutton', { name: 'Retention period' }))
+      await userEvent.type(screen.getByRole('spinbutton', { name: 'Retention period' }), '24')
+      await act(async () => {
+        resolveSave()
+      })
+
+      expect(screen.getByRole('spinbutton', { name: 'Retention period' })).toHaveValue(24)
+      expect(screen.getByRole('switch', { name: 'High availability' })).not.toBeChecked()
+      expect(
+        within(screen.getByRole('region', { name: 'Unsaved profile changes' })).getByText(/1 change/)
+      ).toBeInTheDocument()
+    })
+
+    it('deploys the cluster once the changes are saved', async () => {
+      const { userEvent } = renderWithProviders(<ClusterProfileFeature />)
+
+      await userEvent.click(screen.getByRole('switch', { name: 'High availability' }))
+      await userEvent.click(screen.getByRole('button', { name: 'Save and deploy' }))
+
+      expect(mockUpdatePlatformConfiguration).toHaveBeenCalled()
+      expect(mockDeployCluster).toHaveBeenCalledWith({ organizationId: 'organization-id', clusterId: 'cluster-id' })
+    })
+
+    it('does not deploy when saving fails', async () => {
+      mockUpdatePlatformConfiguration.mockRejectedValue(new Error('Invalid profile'))
+      const { userEvent } = renderWithProviders(<ClusterProfileFeature />)
+
+      await userEvent.click(screen.getByRole('switch', { name: 'High availability' }))
+      await userEvent.click(screen.getByRole('button', { name: 'Save and deploy' }))
+
+      expect(mockDeployCluster).not.toHaveBeenCalled()
+      expect(screen.getByRole('region', { name: 'Unsaved profile changes' })).toBeInTheDocument()
+    })
+  })
+
+  describe('leaving with unsaved changes', () => {
+    type BlockerOptions = {
+      disabled: boolean
+      enableBeforeUnload: boolean
+      shouldBlockFn: (args: { next: { routeId: string; params: Record<string, string> } }) => boolean
+    }
+    const getBlocker = () => mockUseBlocker.mock.calls.at(-1)?.[0] as BlockerOptions
+    const profileRoute = '/_authenticated/organization/$organizationId/cluster/$clusterId/profile/$componentKey'
+
+    it('does not block navigation without changes', () => {
+      renderWithProviders(<ClusterProfileFeature />)
+
+      expect(getBlocker()).toMatchObject({ disabled: true, enableBeforeUnload: false })
+    })
+
+    it('asks for confirmation before leaving the profile, and enables the before-unload warning', async () => {
+      const confirm = jest.spyOn(window, 'confirm')
+      const { userEvent } = renderWithProviders(<ClusterProfileFeature />)
+
+      await userEvent.click(screen.getByRole('switch', { name: 'High availability' }))
+
+      expect(getBlocker()).toMatchObject({ disabled: false, enableBeforeUnload: true })
+      const leaveProfile = {
+        next: { routeId: '/_authenticated/organization/$organizationId/cluster/$clusterId/overview', params: {} },
+      }
+      confirm.mockReturnValueOnce(false)
+      expect(getBlocker().shouldBlockFn(leaveProfile)).toBe(true)
+      confirm.mockReturnValueOnce(true)
+      expect(getBlocker().shouldBlockFn(leaveProfile)).toBe(false)
+      confirm.mockReturnValueOnce(false)
+      expect(
+        getBlocker().shouldBlockFn({ next: { routeId: profileRoute, params: { clusterId: 'other-cluster-id' } } })
+      ).toBe(true)
+      confirm.mockRestore()
+    })
+
+    it('lets the user switch components of the same profile', async () => {
+      const confirm = jest.spyOn(window, 'confirm')
+      const { userEvent } = renderWithProviders(<ClusterProfileFeature />)
+
+      await userEvent.click(screen.getByRole('switch', { name: 'High availability' }))
+
+      expect(getBlocker().shouldBlockFn({ next: { routeId: profileRoute, params: { clusterId: 'cluster-id' } } })).toBe(
+        false
+      )
+      expect(confirm).not.toHaveBeenCalled()
+      confirm.mockRestore()
+    })
+  })
+
+  it('tells when the profile has no layers', () => {
+    mockUsePlatformTemplates.mockReturnValue({
+      data: [{ ...mockTemplates[0], layers: [] }],
+      isError: false,
+      isLoading: false,
+    } as unknown as ReturnType<typeof usePlatformTemplates>)
+    renderWithProviders(<ClusterProfileFeature />)
+
+    expect(screen.getByText('No layers available')).toBeInTheDocument()
+    expect(screen.queryByText('No layers match your search')).not.toBeInTheDocument()
+  })
+
+  it('greys out the layers skipped or disabled in the cluster configuration', async () => {
+    mockUsePlatformConfiguration.mockReturnValue({
+      data: {
+        clusterId: 'cluster-id',
+        organizationId: 'organization-id',
+        clusterInputs: {},
+        platform: { templateKey: 'qovery-cluster-v0', templateVersion: '1.0.0' },
+        layers: [
+          {
+            key: 'network',
+            status: 'SKIPPED',
+            reason: 'not applicable to CUSTOMER_MANAGED/AWS cluster',
+            componentKeys: [],
+          },
+          { key: 'qovery-stack', status: 'DISABLED', reason: 'optional layer disabled', componentKeys: [] },
+          { key: 'log-infra', status: 'ENABLED', reason: 'mandatory layer', componentKeys: ['loki', 'alloy'] },
+        ],
+      },
+      isError: false,
+      isLoading: false,
+    } as unknown as ReturnType<typeof usePlatformConfiguration>)
+    const { userEvent } = renderWithProviders(<ClusterProfileFeature />)
+
+    const network = screen.getByRole('button', { name: 'Network' })
+    expect(network).toBeDisabled()
+    expect(screen.getByRole('button', { name: 'Envoy' })).toBeDisabled()
+    expect(screen.getByRole('button', { name: 'Log infra' })).toBeEnabled()
+
+    await userEvent.hover(network.closest('li') as HTMLElement)
+
+    expect((await screen.findAllByText('This layer does not apply to this cluster'))[0]).toBeInTheDocument()
+
+    expect(screen.getByRole('button', { name: 'Qovery stack' })).toBeDisabled()
+  })
+
+  it.each(['envoy', 'network'])('does not open a disabled layer from the URL (%s)', (requestedKey) => {
+    mockUsePlatformConfiguration.mockReturnValue({
+      data: {
+        clusterId: 'cluster-id',
+        organizationId: 'organization-id',
+        clusterInputs: {},
+        platform: { templateKey: 'qovery-cluster-v0', templateVersion: '1.0.0' },
+        layers: [
+          {
+            key: 'network',
+            status: 'SKIPPED',
+            reason: 'not applicable to CUSTOMER_MANAGED/AWS cluster',
+            componentKeys: [],
+          },
+        ],
+      },
+      isError: false,
+      isLoading: false,
+    } as unknown as ReturnType<typeof usePlatformConfiguration>)
+    renderWithProviders(<ClusterProfileFeature activeComponentKey={requestedKey} />)
+
+    expect(screen.getByRole('heading', { name: 'Log infra' })).toBeInTheDocument()
+    expect(screen.getByRole('link', { name: 'Loki' })).toHaveAttribute('aria-current', 'page')
+    expect(screen.queryByRole('link', { name: 'Envoy' })).not.toBeInTheDocument()
+  })
+
+  it('explains that a disabled layer is managed by Qovery', async () => {
+    mockUsePlatformConfiguration.mockReturnValue({
+      data: {
+        clusterId: 'cluster-id',
+        organizationId: 'organization-id',
+        clusterInputs: {},
+        platform: { templateKey: 'qovery-cluster-v0', templateVersion: '1.0.0' },
+        layers: [{ key: 'network', status: 'DISABLED', reason: 'optional layer disabled', componentKeys: [] }],
+      },
+      isError: false,
+      isLoading: false,
+    } as unknown as ReturnType<typeof usePlatformConfiguration>)
+    const { userEvent } = renderWithProviders(<ClusterProfileFeature />)
+
+    const network = screen.getByRole('button', { name: 'Network' })
+    expect(network).toBeDisabled()
+    await userEvent.hover(network.closest('li') as HTMLElement)
+
+    expect((await screen.findAllByText('These values are currently managed by Qovery'))[0]).toBeInTheDocument()
+  })
+
+  describe('components without configuration', () => {
+    it('greys out components and layers that have no field to configure', () => {
+      renderWithProviders(<ClusterProfileFeature />)
+
+      expect(screen.getByRole('button', { name: 'Karpenter crd' })).toBeDisabled()
+      expect(screen.getByRole('button', { name: 'Karpenter configuration' })).toBeEnabled()
+      expect(screen.getByRole('button', { name: 'Crds' })).toBeDisabled()
+      expect(screen.getByRole('button', { name: 'Gateway crd' })).toBeDisabled()
+    })
+
+    it('opens a layer on its first configurable component', async () => {
+      const onActiveComponentChange = jest.fn()
+      const { userEvent } = renderWithProviders(
+        <ClusterProfileFeature onActiveComponentChange={onActiveComponentChange} />
+      )
+
+      await userEvent.click(screen.getByRole('button', { name: 'Karpenter' }))
+
+      expect(onActiveComponentChange).toHaveBeenCalledWith('karpenter-configuration')
+    })
+
+    it('does not open a component without configuration from the URL', () => {
+      mockUsePlatformComponentConfigurations.mockReturnValue(createComponentQueries(['karpenter-configuration']))
+      renderWithProviders(<ClusterProfileFeature activeComponentKey="karpenter-crd" />)
+
+      expect(screen.getByRole('link', { name: 'Karpenter configuration' })).toHaveAttribute('aria-current', 'page')
+      expect(screen.queryByRole('link', { name: 'Karpenter crd' })).not.toBeInTheDocument()
+      expect(screen.getByLabelText('Node pool')).toBeInTheDocument()
+    })
+  })
+})
diff --git a/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.tsx b/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.tsx
new file mode 100644
index 00000000000..90f144cc0a6
--- /dev/null
+++ b/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.tsx
@@ -0,0 +1,550 @@
+import { type PlatformComponentConfigurationResolutionResponse } from 'qovery-typescript-axios'
+import { useMemo } from 'react'
+import { SchemaFieldInput, type SchemaFieldValue, getSchemaFieldValue } from '@qovery/shared/schema-fields/feature'
+import { EmptyState, Heading, Navbar, Skeleton } from '@qovery/shared/ui'
+import { useDebounce } from '@qovery/shared/util-hooks'
+import { usePlatformComponentConfigurations } from '../hooks/use-platform-component-configurations/use-platform-component-configurations'
+import {
+  type PlatformFieldDescriptor,
+  applyPlatformConfigurationDefaults,
+  getFieldViolation,
+  getUnmappedViolations,
+  isPlatformConfigurationReady,
+  isPlatformReadOnlyField,
+  isSupportedPlatformField,
+  omitEmptyValues,
+  toPlatformFieldDescriptor,
+  toSchemaField,
+} from '../utils/platform-configuration-utils'
+import { ClusterProfileProvider, useClusterProfileContext } from './cluster-profile-context'
+import {
+  ClusterProfileItemIcon,
+  ClusterProfileSidebar,
+  type ClusterProfileSidebarLayer,
+} from './cluster-profile-sidebar'
+import { ProfileChangesBar } from './profile-changes-bar'
+import { ProfileConfigurationField } from './profile-configuration-field'
+import { ProfileOperatorFooter } from './profile-operator-footer'
+import {
+  fieldMatchesProfileSearch,
+  filterFieldsByProfileSearch,
+  matchesProfileSearch,
+  normalizeProfileSearch,
+} from './profile-search'
+import {
+  type ProfileComponent,
+  type ProfileTreeItem,
+  formatProfileLabel,
+  getFirstConfigurableComponent,
+  resolveProfileSelection,
+} from './profile-tree'
+
+type ProfileTab = {
+  id: string
+  label: string
+}
+
+type ProfileSection = {
+  id: string
+  label: string
+  component: ProfileComponent
+  fieldKeys?: readonly string[]
+  // Search restricting the displayed fields; unset when the whole component matched.
+  fieldSearch?: string
+}
+
+// Layers and components matching the search, directly or through one of their fields.
+function filterProfileTree(profileTree: ProfileTreeItem[], query: string): ProfileTreeItem[] {
+  if (!query) return profileTree
+
+  return profileTree.flatMap((layer) => {
+    if (matchesProfileSearch(layer, query)) return [layer]
+
+    const children = layer.children.filter(
+      (component) =>
+        matchesProfileSearch(component, query) ||
+        getProfileSections(component, layer).some((section) =>
+          getSectionFields(section).some((field) => fieldMatchesProfileSearch(field, query))
+        )
+    )
+    // A layer matched through components with nothing to configure has nothing left to open.
+    return children.length
+      ? [{ ...layer, children, configurable: children.some(({ configurable }) => configurable) }]
+      : []
+  })
+}
+
+function getProfileSections(
+  component: ProfileComponent | undefined,
+  layer: ProfileTreeItem | undefined,
+  fieldSearch?: string
+): ProfileSection[] {
+  if (!component) return []
+
+  const sections: ProfileSection[] = [
+    {
+      id: component.key,
+      label: formatProfileLabel(component.key),
+      component,
+      fieldSearch,
+    },
+  ]
+
+  for (const configurationSection of component.configurationSections ?? []) {
+    const sourceComponent = layer?.children?.find(({ key }) => key === configurationSection.sourceComponentKey)
+    if (!sourceComponent) continue
+
+    sections.push({
+      id: `${component.key}/${sourceComponent.key}`,
+      label: formatProfileLabel(sourceComponent.key),
+      component: sourceComponent,
+      fieldKeys: configurationSection.fieldKeys,
+      fieldSearch,
+    })
+  }
+
+  return sections
+}
+
+function getSectionFields(section: ProfileSection, preview?: PlatformComponentConfigurationResolutionResponse) {
+  const fields = (preview?.fields ?? section.component.fields).filter(
+    (field) => isSupportedPlatformField(field) && (!section.fieldKeys || section.fieldKeys.includes(field.key))
+  )
+
+  return section.fieldSearch ? filterFieldsByProfileSearch(fields, section.fieldSearch) : fields
+}
+
+// What a section displays once resolved: its fields and the cluster inputs it requires, narrowed by the search.
+function getSectionContent(section: ProfileSection, preview?: PlatformComponentConfigurationResolutionResponse) {
+  const allRequirements = preview?.requirements ?? []
+  return {
+    fields: getSectionFields(section, preview),
+    allRequirements,
+    requirements: section.fieldSearch
+      ? allRequirements.filter((requirement) => matchesProfileSearch(requirement, section.fieldSearch ?? ''))
+      : allRequirements,
+  }
+}
+
+function ProfileConfigurationSkeleton() {
+  return (
+    <div role="status" aria-label="Loading configuration" className="flex flex-col">
+      {[0, 1, 2, 3, 4].map((row) => (
+        <div
+          key={row}
+          className="flex flex-col gap-4 border-b border-neutral p-4 md:flex-row md:items-start md:justify-between"
+        >
+          <div className="min-w-0 flex-1">
+            <Skeleton width={row === 1 ? '32%' : '40%'} height={20} />
+            <div className="mt-2">
+              <Skeleton width={row === 2 ? '82%' : '68%'} height={12} />
+            </div>
+          </div>
+          <div className="w-full shrink-0 md:w-[400px]">
+            <Skeleton className="h-10 w-full rounded" />
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function ProfileConfigurationSection({
+  section,
+  highlight,
+  preview,
+  profileConfig,
+  clusterInputs,
+  onProfileConfigChange,
+  onClusterInputChange,
+}: {
+  section: ProfileSection
+  highlight?: string
+  preview?: PlatformComponentConfigurationResolutionResponse
+  profileConfig: Record<string, unknown>
+  clusterInputs: Record<string, string>
+  onProfileConfigChange: (componentKey: string, fieldKey: string, value: unknown) => void
+  onClusterInputChange: (componentKey: string, field: PlatformFieldDescriptor, value: SchemaFieldValue) => void
+}) {
+  const { fields, allRequirements, requirements } = getSectionContent(section, preview)
+  const violations = preview?.violations ?? []
+  // Sections showing a subset of a source component's fields would surface that component's other violations.
+  const unmappedViolations = section.fieldKeys
+    ? []
+    : getUnmappedViolations(violations, fields, profileConfig, allRequirements)
+
+  if (section.fieldSearch && !fields.length && !requirements.length) return null
+
+  return (
+    <section className="flex flex-col">
+      {unmappedViolations.length > 0 ? (
+        <ul role="alert" className="flex flex-col gap-1 border-b border-neutral px-4 py-3 text-sm text-negative">
+          {unmappedViolations.map((violation) => (
+            <li key={`${violation.fieldPath}-${violation.code}`}>{violation.message}</li>
+          ))}
+        </ul>
+      ) : null}
+      {fields.map((field) => (
+        <ProfileConfigurationField
+          key={field.key}
+          field={field}
+          path={field.key}
+          value={isPlatformReadOnlyField(field) ? preview?.resolvedValues[field.key] : profileConfig[field.key]}
+          violations={violations}
+          highlight={highlight}
+          onChange={(value) => onProfileConfigChange(section.component.key, field.key, value)}
+        />
+      ))}
+
+      {requirements.length > 0 ? (
+        <div className="flex flex-col">
+          {requirements.map(toPlatformFieldDescriptor).map((requirement) => (
+            <SchemaFieldInput
+              key={requirement.key}
+              booleanControl="toggle"
+              field={toSchemaField(requirement)}
+              layout="row"
+              value={getSchemaFieldValue(requirement, clusterInputs[requirement.key])}
+              error={getFieldViolation(violations, requirement.key, 'clusterInputs')}
+              highlight={highlight}
+              onChange={(value) => onClusterInputChange(section.component.key, requirement, value)}
+            />
+          ))}
+        </div>
+      ) : null}
+
+      {!fields.length && !requirements.length ? (
+        <div className="flex flex-col items-start p-4">
+          <EmptyState
+            icon="circle-check"
+            title={<span className="font-normal leading-5">No configuration needed for this component</span>}
+            variant="positive"
+            className="h-auto w-full p-8 shadow-sm"
+          />
+        </div>
+      ) : null}
+    </section>
+  )
+}
+
+type ClusterProfileFeatureProps = {
+  activeComponentKey?: string
+  search?: string
+  onActiveComponentChange?: (componentKey: string) => void
+  onSearchChange?: (search: string) => void
+}
+
+export function ClusterProfileFeature(props: ClusterProfileFeatureProps) {
+  return (
+    <ClusterProfileProvider>
+      <ClusterProfileView {...props} />
+    </ClusterProfileProvider>
+  )
+}
+
+function ClusterProfileView({
+  activeComponentKey: requestedComponentKey,
+  search = '',
+  onActiveComponentChange,
+  onSearchChange,
+}: ClusterProfileFeatureProps) {
+  const {
+    clusterId,
+    configuration,
+    profileTree,
+    isLoading,
+    isError,
+    profileValues,
+    clusterInputs,
+    formKey,
+    changeCount,
+    isSaving,
+    isDeploying,
+    updateProfileConfig,
+    updateClusterInput,
+    resetChanges,
+    saveChanges,
+    saveAndDeployChanges,
+  } = useClusterProfileContext()
+  const searchQuery = normalizeProfileSearch(search)
+  const visibleProfileTree = useMemo(() => filterProfileTree(profileTree, searchQuery), [profileTree, searchQuery])
+  // The header keeps showing a layer when nothing matches the search.
+  const { layer: activeLayer, component: activeComponent } = resolveProfileSelection(
+    visibleProfileTree,
+    requestedComponentKey
+  )
+  const headerLayer = activeLayer ?? resolveProfileSelection(profileTree, requestedComponentKey).layer
+  // Fields are only filtered when the match comes from them, not from the layer or component itself.
+  const fieldSearch =
+    activeLayer &&
+    activeComponent &&
+    !matchesProfileSearch(activeLayer, searchQuery) &&
+    !matchesProfileSearch(activeComponent, searchQuery)
+      ? searchQuery
+      : undefined
+  // Components with nothing to configure get no tab.
+  const profileTabs: ProfileTab[] =
+    activeLayer?.children
+      ?.filter((component) => component.configurable)
+      .map((component) => ({
+        id: component.key,
+        label: component.label,
+      })) ?? []
+  const profileSections = useMemo(
+    () =>
+      getProfileSections(
+        activeComponent,
+        // Configuration sections can source components the search filtered out of the layer.
+        profileTree.find((item) => item.id === activeLayer?.id),
+        fieldSearch
+      ),
+    [activeComponent, activeLayer?.id, fieldSearch, profileTree]
+  )
+  const resolvedComponents = useMemo(() => {
+    const components = new Map(profileSections.map((section) => [section.component.key, section.component]))
+    for (const component of profileTree.flatMap((item) => item.children)) {
+      if (!components.has(component.key) && (profileValues[component.key] || clusterInputs[component.key])) {
+        components.set(component.key, component)
+      }
+    }
+    return [...components.values()]
+  }, [clusterInputs, profileSections, profileTree, profileValues])
+  const profileConfigs = useMemo(
+    () =>
+      Object.fromEntries(
+        resolvedComponents.map((component) => {
+          const persistedValues = configuration?.platform.managedConfig?.[component.key] ?? {}
+          const localValues = profileValues[component.key] ?? {}
+          return [
+            component.key,
+            applyPlatformConfigurationDefaults(component.fields, { ...persistedValues, ...localValues }),
+          ]
+        })
+      ),
+    [configuration?.platform.managedConfig, profileValues, resolvedComponents]
+  )
+  const resolvedClusterInputs = useMemo(
+    () =>
+      Object.fromEntries(
+        resolvedComponents.map((component) => [
+          component.key,
+          { ...configuration?.clusterInputs[component.key], ...clusterInputs[component.key] },
+        ])
+      ),
+    [configuration?.clusterInputs, clusterInputs, resolvedComponents]
+  )
+  const edits = useMemo(() => ({ profileValues, clusterInputs }), [clusterInputs, profileValues])
+  const debouncedEdits = useDebounce(edits, 300)
+  const previewRequests = useMemo(
+    () =>
+      Object.fromEntries(
+        resolvedComponents.map((component) => [
+          component.key,
+          {
+            profileConfig: omitEmptyValues(
+              applyPlatformConfigurationDefaults(component.fields, {
+                ...configuration?.platform.managedConfig?.[component.key],
+                ...debouncedEdits.profileValues[component.key],
+              })
+            ),
+            clusterInputs: {
+              ...configuration?.clusterInputs[component.key],
+              ...debouncedEdits.clusterInputs[component.key],
+            },
+            componentOutputs: {},
+          },
+        ])
+      ),
+    [configuration, debouncedEdits, resolvedComponents]
+  )
+  const componentQueries = usePlatformComponentConfigurations({
+    clusterId,
+    requests: previewRequests,
+    enabled: Boolean(resolvedComponents.length),
+  })
+  const requestedComponentKeys = Object.keys(previewRequests)
+  const componentQueriesByKey = Object.fromEntries(
+    requestedComponentKeys.flatMap((componentKey, index) => {
+      const query = componentQueries[index]
+      return query ? [[componentKey, query]] : []
+    })
+  )
+  const previewsByComponent = Object.fromEntries(
+    componentQueries.flatMap((query) => (query.data ? [[query.data.componentKey, query.data]] : []))
+  )
+  const sidebarLayers = useMemo<ClusterProfileSidebarLayer[]>(
+    () =>
+      visibleProfileTree.map((item) => ({
+        id: item.id,
+        label: item.label,
+        status: item.status,
+        disabledReason: item.disabledReason,
+        configurable: item.configurable,
+        items: item.children.map((child) => ({
+          id: child.key,
+          key: child.key,
+          label: child.label,
+          configurable: child.configurable,
+        })),
+      })),
+    [visibleProfileTree]
+  )
+
+  const displayedComponentKeys = [...new Set(profileSections.map((section) => section.component.key))]
+  const displayedComponentKeySet = new Set(displayedComponentKeys)
+  const hasResolvedConfiguration = displayedComponentKeys.every(
+    (componentKey) => previewsByComponent[componentKey]?.componentKey === componentKey
+  )
+  const hasResolverError =
+    displayedComponentKeys.some((componentKey) => componentQueriesByKey[componentKey]?.isError) ||
+    componentQueries.some(
+      (query) => query.isError && query.data && displayedComponentKeySet.has(query.data.componentKey)
+    )
+  const isConfigurationLoading = Boolean(activeComponent) && !hasResolvedConfiguration
+  // The sidebar searches the template fields, which include fields the current values hide: the active component can
+  // match the search while none of its displayed settings do.
+  const hasNoMatchingSetting =
+    Boolean(fieldSearch) &&
+    profileSections.every((section) => {
+      const { fields, requirements } = getSectionContent(section, previewsByComponent[section.component.key])
+      return !fields.length && !requirements.length
+    })
+  const isInitialResolverError = hasResolverError && !hasResolvedConfiguration
+  const isBackgroundResolverError = hasResolverError && hasResolvedConfiguration
+  // Saving is optimistic, as the API validates it too: only a failed check or one reporting violations or missing inputs
+  // blocks it. While edits are checked again, the last verdict holds so the buttons do not flicker.
+  const canSaveConfiguration = Object.keys(previewRequests).every((componentKey) => {
+    const query = componentQueriesByKey[componentKey]
+    if (query?.isError) return false
+    const preview = query?.data
+    return (
+      preview?.componentKey !== componentKey || isPlatformConfigurationReady(preview.violations, preview.requirements)
+    )
+  })
+
+  const handleSelectSection = (sectionId: string) => {
+    const firstItem = getFirstConfigurableComponent(visibleProfileTree.find((item) => item.id === sectionId)?.children)
+    onActiveComponentChange?.(firstItem?.key ?? sectionId)
+  }
+
+  const handleSelectItem = (itemId: string) => {
+    onActiveComponentChange?.(itemId)
+  }
+
+  const noSettingsState = (
+    <div className="p-4">
+      <EmptyState
+        icon="wave-pulse"
+        title={
+          <span className="font-normal leading-5">
+            {searchQuery ? 'No settings match your search' : 'Nothing to configure for this cluster'}
+          </span>
+        }
+        className="h-auto w-full p-8 shadow-sm"
+      />
+    </div>
+  )
+
+  return (
+    <div className="flex h-page-container min-h-0 items-stretch overflow-hidden text-sm">
+      <ClusterProfileSidebar
+        layers={sidebarLayers}
+        search={search}
+        selectedSectionId={activeLayer?.id}
+        selectedItemId={activeComponent?.key}
+        isLoading={isLoading}
+        isError={isError}
+        onSearchChange={(nextSearch) => onSearchChange?.(nextSearch)}
+        onSelectSection={handleSelectSection}
+        onSelectItem={handleSelectItem}
+        footer={<ProfileOperatorFooter />}
+      />
+
+      <section className="relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden bg-background">
+        <div className="flex items-start justify-between gap-4 bg-surface-neutral px-4 pb-2 pt-4">
+          <div className="min-w-0">
+            <Heading level={2} className="!text-base font-medium leading-6">
+              {headerLayer?.label ?? 'Log infra'}
+            </Heading>
+            {headerLayer?.description ? (
+              <p className="mt-0.5 text-xs text-neutral-subtle">{headerLayer.description}</p>
+            ) : null}
+          </div>
+        </div>
+
+        <div className="border-b border-neutral bg-surface-neutral px-4">
+          <Navbar.Root
+            activeId={activeComponent?.key}
+            role="navigation"
+            ariaLabel={`${headerLayer?.label ?? 'Profile'} configuration`}
+          >
+            {profileTabs.map((tab) => (
+              <Navbar.Item
+                key={tab.id}
+                id={tab.id}
+                href="#"
+                onClick={(event) => {
+                  event.preventDefault()
+                  onActiveComponentChange?.(tab.id)
+                }}
+              >
+                <ClusterProfileItemIcon />
+                {tab.label}
+              </Navbar.Item>
+            ))}
+          </Navbar.Root>
+        </div>
+
+        <div className="min-h-0 flex-1 overflow-y-auto">
+          <div key={formKey} className="flex min-h-full flex-col">
+            {!isLoading && !isError && !activeComponent ? (
+              noSettingsState
+            ) : isInitialResolverError ? (
+              <div role="alert" className="border-b border-neutral px-4 py-3 text-sm text-negative">
+                Configuration could not be checked. Refresh the page and try again.
+              </div>
+            ) : isConfigurationLoading ? (
+              <ProfileConfigurationSkeleton />
+            ) : (
+              <>
+                {isBackgroundResolverError ? (
+                  <div role="alert" className="border-b border-neutral px-4 py-3 text-sm text-negative">
+                    Configuration could not be refreshed. The last resolved fields are still shown.
+                  </div>
+                ) : null}
+                {hasNoMatchingSetting
+                  ? noSettingsState
+                  : profileSections.map((section) => (
+                      <ProfileConfigurationSection
+                        key={section.id}
+                        section={section}
+                        highlight={searchQuery}
+                        preview={previewsByComponent[section.component.key]}
+                        profileConfig={profileConfigs[section.component.key] ?? {}}
+                        clusterInputs={resolvedClusterInputs[section.component.key] ?? {}}
+                        onProfileConfigChange={updateProfileConfig}
+                        onClusterInputChange={updateClusterInput}
+                      />
+                    ))}
+              </>
+            )}
+            {/* Keeps the last settings reachable above the floating changes bar. */}
+            {changeCount > 0 ? <div aria-hidden="true" className="h-28 shrink-0" /> : null}
+          </div>
+        </div>
+
+        <div className="pointer-events-none absolute inset-x-0 bottom-6 flex justify-center px-4">
+          <ProfileChangesBar
+            changeCount={changeCount}
+            isSaving={isSaving}
+            isDeploying={isDeploying}
+            canSubmit={canSaveConfiguration}
+            onReset={resetChanges}
+            onSave={saveChanges}
+            onSaveAndDeploy={saveAndDeployChanges}
+          />
+        </div>
+      </section>
+    </div>
+  )
+}
diff --git a/libs/domains/clusters/feature/src/lib/cluster-profile/profile-array-item-modal.spec.tsx b/libs/domains/clusters/feature/src/lib/cluster-profile/profile-array-item-modal.spec.tsx
new file mode 100644
index 00000000000..a1079a5279a
--- /dev/null
+++ b/libs/domains/clusters/feature/src/lib/cluster-profile/profile-array-item-modal.spec.tsx
@@ -0,0 +1,81 @@
+import { StrictMode } from 'react'
+import { renderWithProviders, screen, waitFor } from '@qovery/shared/util-tests'
+import { type PlatformFieldDescriptor } from '../utils/platform-configuration-utils'
+import { ProfileArrayItemModal } from './profile-array-item-modal'
+
+const cidrField = {
+  key: 'cidr',
+  label: 'CIDR',
+  type: 'string',
+  required: false,
+  sensitive: false,
+  constraints: {},
+} as PlatformFieldDescriptor
+
+describe('ProfileArrayItemModal', () => {
+  it.each([
+    ['optional fields', cidrField, {}],
+    ['prefilled required fields', { ...cidrField, required: true, defaultValue: '10.0.0.0/8' }, { cidr: '10.0.0.0/8' }],
+  ])('lets an item made of %s be added without editing it', async (_, field, submittedValues) => {
+    const onSubmit = jest.fn()
+    const { userEvent } = renderWithProviders(
+      <ProfileArrayItemModal
+        title="Trusted CIDRs"
+        fields={[field as PlatformFieldDescriptor]}
+        values={{}}
+        isEdit={false}
+        onClose={jest.fn()}
+        onSubmit={onSubmit}
+      />
+    )
+
+    const addButton = screen.getByRole('button', { name: 'Add' })
+    await waitFor(() => expect(addButton).toBeEnabled())
+    await userEvent.click(addButton)
+
+    expect(onSubmit).toHaveBeenCalledWith(submittedValues)
+  })
+
+  it('keeps read-only fields disabled and submits their value unchanged', async () => {
+    const onSubmit = jest.fn()
+    const { userEvent } = renderWithProviders(
+      <ProfileArrayItemModal
+        title="Trusted CIDRs"
+        fields={[{ ...cidrField, readOnly: true }]}
+        values={{ cidr: '10.0.0.0/8' }}
+        isEdit
+        onClose={jest.fn()}
+        onSubmit={onSubmit}
+      />
+    )
+
+    expect(screen.getByRole('textbox')).toBeDisabled()
+
+    await userEvent.click(screen.getByRole('button', { name: 'Save' }))
+
+    expect(onSubmit).toHaveBeenCalledWith({ cidr: '10.0.0.0/8' })
+  })
+
+  it('reports being mounted until it unmounts, including under StrictMode', () => {
+    const onMountedChange = jest.fn()
+    const { unmount } = renderWithProviders(
+      <StrictMode>
+        <ProfileArrayItemModal
+          title="Trusted CIDRs"
+          fields={[cidrField]}
+          values={{}}
+          isEdit={false}
+          onClose={jest.fn()}
+          onMountedChange={onMountedChange}
+          onSubmit={jest.fn()}
+        />
+      </StrictMode>
+    )
+
+    expect(onMountedChange).toHaveBeenLastCalledWith(true)
+
+    unmount()
+
+    expect(onMountedChange).toHaveBeenLastCalledWith(false)
+  })
+})
diff --git a/libs/domains/clusters/feature/src/lib/cluster-profile/profile-array-item-modal.tsx b/libs/domains/clusters/feature/src/lib/cluster-profile/profile-array-item-modal.tsx
new file mode 100644
index 00000000000..763f9250358
--- /dev/null
+++ b/libs/domains/clusters/feature/src/lib/cluster-profile/profile-array-item-modal.tsx
@@ -0,0 +1,107 @@
+import { useEffect } from 'react'
+import { Controller, FormProvider, useForm } from 'react-hook-form'
+import {
+  SchemaFieldInput,
+  type SchemaFieldValue,
+  getSchemaFieldValidationError,
+  getSchemaFieldValue,
+  isSchemaFieldValueFulfilled,
+} from '@qovery/shared/schema-fields/feature'
+import { ModalCrud } from '@qovery/shared/ui'
+import {
+  type PlatformFieldDescriptor,
+  toPlatformConfigurationValue,
+  toSchemaField,
+} from '../utils/platform-configuration-utils'
+
+export interface ProfileArrayItemModalProps {
+  title: string
+  description?: string | null
+  fields: PlatformFieldDescriptor[]
+  values: Record<string, unknown>
+  isEdit: boolean
+  onClose: () => void
+  onMountedChange?: (isMounted: boolean) => void
+  onSubmit: (values: Record<string, unknown>) => void
+}
+
+// Field keys can contain dots, which react-hook-form reads as nested paths: register them by position instead.
+const getFormName = (index: number) => `field${index}`
+
+export function ProfileArrayItemModal({
+  title,
+  description,
+  fields,
+  values,
+  isEdit,
+  onClose,
+  onMountedChange,
+  onSubmit,
+}: ProfileArrayItemModalProps) {
+  useEffect(() => {
+    onMountedChange?.(true)
+    return () => onMountedChange?.(false)
+  }, [onMountedChange])
+
+  const methods = useForm<Record<string, SchemaFieldValue | undefined>>({
+    mode: 'onChange',
+    defaultValues: Object.fromEntries(
+      fields.map((field, index) => [getFormName(index), getSchemaFieldValue(field, values[field.key])])
+    ),
+  })
+
+  const handleSubmit = methods.handleSubmit((data) => {
+    onSubmit(
+      Object.fromEntries(
+        fields.flatMap((field, index) => {
+          const formValue = data[getFormName(index)]
+          const value = formValue === undefined ? undefined : toPlatformConfigurationValue(field, formValue)
+          return value === '' || value === undefined ? [] : [[field.key, value]]
+        })
+      )
+    )
+    onClose()
+  })
+
+  return (
+    <FormProvider {...methods}>
+      <ModalCrud
+        title={title}
+        description={description ?? undefined}
+        isEdit={isEdit}
+        submitLabel={isEdit ? 'Save' : 'Add'}
+        onClose={onClose}
+        onSubmit={handleSubmit}
+      >
+        <div className="flex flex-col gap-4">
+          {fields.map((field, index) => {
+            const schemaField = toSchemaField(field)
+            return (
+              <Controller
+                key={field.key}
+                name={getFormName(index)}
+                control={methods.control}
+                rules={{
+                  validate: (value) => {
+                    if (schemaField.required && !isSchemaFieldValueFulfilled(value)) return 'Please enter a value.'
+                    return getSchemaFieldValidationError(schemaField, value) ?? true
+                  },
+                }}
+                render={({ field: { value, onChange }, fieldState: { error } }) => (
+                  <SchemaFieldInput
+                    autoFocus={index === 0}
+                    field={schemaField}
+                    disabled={field.readOnly}
+                    value={value}
+                    error={error?.message}
+                    onChange={onChange}
+                  />
+                )}
+              />
+            )
+          })}
+        </div>
+      </ModalCrud>
+    </FormProvider>
+  )
+}
diff --git a/libs/domains/clusters/feature/src/lib/cluster-profile/profile-changes-bar.tsx b/libs/domains/clusters/feature/src/lib/cluster-profile/profile-changes-bar.tsx
new file mode 100644
index 00000000000..81de4b02edc
--- /dev/null
+++ b/libs/domains/clusters/feature/src/lib/cluster-profile/profile-changes-bar.tsx
@@ -0,0 +1,86 @@
+import { AnimatePresence, motion, useReducedMotion } from 'framer-motion'
+import { Button, Icon } from '@qovery/shared/ui'
+import { pluralize } from '@qovery/shared/util-js'
+
+interface ProfileChangesBarProps {
+  changeCount: number
+  isSaving: boolean
+  isDeploying: boolean
+  // False once a check fails or reports violations or missing inputs. While edits are checked again, the last verdict holds.
+  canSubmit: boolean
+  onReset: () => void
+  onSave: () => void
+  onSaveAndDeploy: () => void
+}
+
+export function ProfileChangesBar({
+  changeCount,
+  isSaving,
+  isDeploying,
+  canSubmit,
+  onReset,
+  onSave,
+  onSaveAndDeploy,
+}: ProfileChangesBarProps) {
+  const reducedMotion = useReducedMotion()
+  const isPending = isSaving || isDeploying
+
+  return (
+    <AnimatePresence>
+      {changeCount > 0 ? (
+        <motion.div
+          key="profile-changes-bar"
+          role="region"
+          aria-label="Unsaved profile changes"
+          className="pointer-events-auto flex w-full max-w-[544px] items-center justify-between gap-4 rounded-lg border border-neutral bg-surface-neutral py-3 pl-4 pr-3 shadow-[0_2px_2px_-1px_rgba(27,36,44,0.04),0_16px_24px_-6px_rgba(27,36,44,0.16)]"
+          initial={reducedMotion ? { opacity: 0 } : { opacity: 0, y: 16 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={reducedMotion ? { opacity: 0 } : { opacity: 0, y: 16 }}
+          transition={{ duration: 0.2, ease: 'easeOut' }}
+        >
+          <p className="text-sm text-neutral">
+            {changeCount} {pluralize(changeCount, 'change')} ongoing
+          </p>
+          <div className="flex items-center gap-4">
+            <button
+              type="button"
+              className="text-ssm font-medium text-neutral-subtle underline hover:text-neutral disabled:cursor-not-allowed disabled:text-neutral-disabled"
+              disabled={isPending}
+              onClick={onReset}
+            >
+              Reset
+            </button>
+            <div className="flex items-center gap-2">
+              <Button
+                type="button"
+                variant="solid"
+                color="neutral"
+                size="md"
+                className="gap-1.5"
+                loading={isSaving}
+                disabled={isPending || !canSubmit}
+                onClick={onSave}
+              >
+                <Icon iconName="floppy-disk" iconStyle="regular" />
+                Save
+              </Button>
+              <Button
+                type="button"
+                variant="outline"
+                color="neutral"
+                size="md"
+                className="gap-1.5"
+                loading={isDeploying}
+                disabled={isPending || !canSubmit}
+                onClick={onSaveAndDeploy}
+              >
+                <Icon iconName="rocket" iconStyle="regular" />
+                Save and deploy
+              </Button>
+            </div>
+          </div>
+        </motion.div>
+      ) : null}
+    </AnimatePresence>
+  )
+}
diff --git a/libs/domains/clusters/feature/src/lib/cluster-profile/profile-configuration-field.spec.tsx b/libs/domains/clusters/feature/src/lib/cluster-profile/profile-configuration-field.spec.tsx
new file mode 100644
index 00000000000..2340f196c7b
--- /dev/null
+++ b/libs/domains/clusters/feature/src/lib/cluster-profile/profile-configuration-field.spec.tsx
@@ -0,0 +1,68 @@
+import { type FieldSchemaResponse } from 'qovery-typescript-axios'
+import { renderWithProviders, screen } from '@qovery/shared/util-tests'
+import { ProfileConfigurationField } from './profile-configuration-field'
+
+const scalarItemField = {
+  key: 'name',
+  label: 'Name',
+  type: 'string',
+  required: true,
+  sensitive: false,
+  constraints: {},
+}
+
+function createArrayField(itemFields: unknown[]) {
+  return {
+    key: 'listeners',
+    label: 'Listeners',
+    type: 'array',
+    required: false,
+    sensitive: false,
+    constraints: {},
+    items: { type: 'object', fields: itemFields },
+    itemFields: [],
+  } as unknown as FieldSchemaResponse
+}
+
+describe('ProfileConfigurationField', () => {
+  it('lets object items with scalar fields be added', () => {
+    renderWithProviders(
+      <ProfileConfigurationField
+        field={createArrayField([scalarItemField])}
+        path="listeners"
+        value={[]}
+        violations={[]}
+        onChange={jest.fn()}
+      />
+    )
+
+    expect(screen.getByRole('button', { name: 'Add item to Listeners' })).toBeEnabled()
+  })
+
+  it('does not add object items whose nested settings the modal cannot edit', () => {
+    renderWithProviders(
+      <ProfileConfigurationField
+        field={createArrayField([
+          scalarItemField,
+          {
+            key: 'tls',
+            label: 'TLS',
+            type: 'object',
+            required: true,
+            sensitive: false,
+            constraints: {},
+            fields: [{ ...scalarItemField, key: 'secret', label: 'Secret' }],
+          },
+        ])}
+        path="listeners"
+        value={[{ name: 'https', tls: { secret: 'certificate' } }]}
+        violations={[]}
+        onChange={jest.fn()}
+      />
+    )
+
+    expect(screen.getByRole('button', { name: 'Add item to Listeners' })).toBeDisabled()
+    expect(screen.getByText('Items with nested settings cannot be added here yet.')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Edit https' })).toBeEnabled()
+  })
+})
diff --git a/libs/domains/clusters/feature/src/lib/cluster-profile/profile-configuration-field.tsx b/libs/domains/clusters/feature/src/lib/cluster-profile/profile-configuration-field.tsx
new file mode 100644
index 00000000000..743df84231f
--- /dev/null
+++ b/libs/domains/clusters/feature/src/lib/cluster-profile/profile-configuration-field.tsx
@@ -0,0 +1,356 @@
+import { type FieldSchemaResponse, type PlatformComponentConfigurationViolationResponse } from 'qovery-typescript-axios'
+import { type ReactNode, useEffect, useRef } from 'react'
+import {
+  SchemaFieldDescription,
+  SchemaFieldInput,
+  getSchemaFieldSummaryValue,
+  getSchemaFieldValue,
+} from '@qovery/shared/schema-fields/feature'
+import { Button, HighlightText, Icon, useModal } from '@qovery/shared/ui'
+import {
+  type PlatformArrayField,
+  type PlatformObjectField,
+  getFieldViolation,
+  getPlatformArrayItemFields,
+  getPlatformArrayItemPath,
+  getPlatformFieldPath,
+  isPlainObject,
+  isPlatformArrayField,
+  isPlatformObjectField,
+  isPlatformScalarField,
+  toPlatformArrayItemDescriptor,
+  toPlatformConfigurationValue,
+  toSchemaField,
+} from '../utils/platform-configuration-utils'
+import { ProfileArrayItemModal } from './profile-array-item-modal'
+
+type Violations = PlatformComponentConfigurationViolationResponse[]
+
+interface ProfileConfigurationFieldProps {
+  field: FieldSchemaResponse
+  path: string
+  value: unknown
+  violations: Violations
+  highlight?: string
+  onChange: (value: unknown) => void
+}
+
+function FieldError({ error }: { error?: string }) {
+  return error ? <p className="mt-1 text-xs font-medium text-negative">{error}</p> : null
+}
+
+function CompositeFieldHeader({
+  field,
+  error,
+  highlight,
+  children,
+}: {
+  field: PlatformArrayField | PlatformObjectField
+  error?: string
+  highlight?: string
+  children?: ReactNode
+}) {
+  return (
+    <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
+      <div className="min-w-0 flex-1">
+        <p className="text-sm text-neutral">
+          <HighlightText text={field.label} highlight={highlight} />
+        </p>
+        {field.description ? <SchemaFieldDescription description={field.description} highlight={highlight} /> : null}
+        <FieldError error={error} />
+      </div>
+      {children}
+    </div>
+  )
+}
+
+function NestedFields({
+  fields,
+  path,
+  value,
+  violations,
+  highlight,
+  onChange,
+}: {
+  fields: FieldSchemaResponse[]
+  path: string
+  value: unknown
+  violations: Violations
+  highlight?: string
+  onChange: (value: Record<string, unknown>) => void
+}) {
+  const values = isPlainObject(value) ? value : {}
+
+  return (
+    <div className="flex flex-col [&>*:last-child]:border-b-0">
+      {fields.map((childField) => (
+        <ProfileConfigurationField
+          key={childField.key}
+          field={childField}
+          path={getPlatformFieldPath(path, childField.key)}
+          value={values[childField.key]}
+          violations={violations}
+          highlight={highlight}
+          onChange={(childValue) => {
+            const { [childField.key]: _, ...otherValues } = values
+            onChange(childValue === undefined ? otherValues : { ...otherValues, [childField.key]: childValue })
+          }}
+        />
+      ))}
+    </div>
+  )
+}
+
+function ProfileObjectField({
+  field,
+  path,
+  value,
+  violations,
+  highlight,
+  onChange,
+}: Omit<ProfileConfigurationFieldProps, 'field'> & { field: PlatformObjectField }) {
+  return (
+    <div className="flex flex-col gap-3 border-b border-neutral p-4">
+      <CompositeFieldHeader field={field} error={getFieldViolation(violations, path)} highlight={highlight} />
+      <div className="overflow-hidden rounded-md border border-neutral">
+        <NestedFields
+          fields={field.fields}
+          path={path}
+          value={value}
+          violations={violations}
+          highlight={highlight}
+          onChange={onChange}
+        />
+      </div>
+    </div>
+  )
+}
+
+function getArrayItemViolations(violations: Violations, itemPath: string) {
+  return violations.filter(
+    ({ fieldPath }) =>
+      fieldPath === itemPath || fieldPath.startsWith(`${itemPath}.`) || fieldPath.startsWith(`${itemPath}[`)
+  )
+}
+
+// Values shown for each item row, one column per scalar item field (sensitive values masked).
+function getArrayItemColumns(field: PlatformArrayField, item: unknown, index: number) {
+  if (field.items.type !== 'object') {
+    const itemField = toPlatformArrayItemDescriptor(field)
+    return [String(getSchemaFieldSummaryValue(itemField, getSchemaFieldValue(itemField, item)) ?? '')]
+  }
+
+  const values = isPlainObject(item) ? item : {}
+  return getPlatformArrayItemFields(field, index)
+    .filter(isPlatformScalarField)
+    .map((itemField) =>
+      String(getSchemaFieldSummaryValue(itemField, getSchemaFieldValue(itemField, values[itemField.key])) ?? '')
+    )
+}
+
+function ProfileArrayField({
+  field,
+  path,
+  value,
+  violations,
+  highlight,
+  onChange,
+}: Omit<ProfileConfigurationFieldProps, 'field'> & { field: PlatformArrayField }) {
+  const { openModal, closeModal } = useModal()
+  const isItemModalOpenRef = useRef(false)
+  const items: unknown[] = Array.isArray(value) ? value : []
+  const { minItems, maxItems } = field.constraints
+  const isUnderLimit = typeof maxItems !== 'number' || items.length < maxItems
+  const hasNestedItemFields =
+    field.items.type === 'object' && field.items.fields.some((itemField) => !isPlatformScalarField(itemField))
+  const canAdd = isUnderLimit && !hasNestedItemFields
+  const canRemove = typeof minItems !== 'number' || items.length > minItems
+  const error = getFieldViolation(violations, path)
+
+  useEffect(
+    () => () => {
+      if (isItemModalOpenRef.current) closeModal()
+    },
+    [closeModal]
+  )
+
+  const openItemModal = (index?: number) => {
+    const isEdit = index !== undefined
+    const item = isEdit ? items[index] : undefined
+    const isObjectItem = field.items.type === 'object'
+    const itemValues = isObjectItem ? (isPlainObject(item) ? item : {}) : { value: item }
+    const itemFields = isObjectItem
+      ? getPlatformArrayItemFields(field, index ?? items.length).filter(isPlatformScalarField)
+      : [toPlatformArrayItemDescriptor(field)]
+
+    openModal({
+      content: (
+        <ProfileArrayItemModal
+          title={field.label}
+          description={field.description}
+          fields={itemFields}
+          values={itemValues}
+          isEdit={isEdit}
+          onClose={closeModal}
+          onMountedChange={(isMounted) => {
+            isItemModalOpenRef.current = isMounted
+          }}
+          onSubmit={(submittedValues) => {
+            // Keep keys the modal does not edit (non-scalar or unevaluated fields) on existing object items.
+            const nextItem = isObjectItem
+              ? {
+                  ...Object.fromEntries(
+                    Object.entries(itemValues).filter(([key]) => !itemFields.some((itemField) => itemField.key === key))
+                  ),
+                  ...submittedValues,
+                }
+              : submittedValues['value']
+            onChange(
+              isEdit
+                ? items.map((currentItem, itemIndex) => (itemIndex === index ? nextItem : currentItem))
+                : [...items, nextItem]
+            )
+          }}
+        />
+      ),
+    })
+  }
+
+  return (
+    <div className="flex flex-col gap-4 border-b border-neutral p-4">
+      <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
+        <div className="min-w-0 flex-1">
+          <p className="text-sm text-neutral">
+            <HighlightText text={field.label} highlight={highlight} />
+          </p>
+          {field.description ? <SchemaFieldDescription description={field.description} highlight={highlight} /> : null}
+          <FieldError error={error} />
+        </div>
+        <div className="flex shrink-0 flex-col items-end gap-1">
+          <Button
+            type="button"
+            variant="outline"
+            color="neutral"
+            size="md"
+            aria-label={`Add item to ${field.label}`}
+            disabled={!canAdd}
+            onClick={() => openItemModal()}
+          >
+            <Icon iconName="circle-plus" iconStyle="regular" />
+            Add item
+          </Button>
+          {hasNestedItemFields ? (
+            <p className="text-xs text-neutral-subtle">Items with nested settings cannot be added here yet.</p>
+          ) : typeof maxItems === 'number' && !isUnderLimit ? (
+            <p className="text-xs text-neutral-subtle">Limit of {maxItems} reached.</p>
+          ) : null}
+        </div>
+      </div>
+
+      {items.length > 0 ? (
+        <ul className="flex flex-col gap-2">
+          {items.map((item, index) => {
+            const itemViolations = getArrayItemViolations(violations, getPlatformArrayItemPath(path, index))
+            const [primaryValue, ...otherValues] = getArrayItemColumns(field, item, index)
+            const itemName = primaryValue || `Item ${index + 1}`
+            return (
+              <li key={index} className="flex flex-col">
+                <div
+                  className={`flex min-h-11 items-center gap-4 rounded-md border bg-surface-neutral py-2 pl-4 pr-2 ${
+                    itemViolations.length ? 'border-negative-strong' : 'border-neutral'
+                  }`}
+                >
+                  <p className="w-1/4 min-w-0 shrink-0 truncate text-sm font-medium text-neutral">{itemName}</p>
+                  {otherValues.map((otherValue, valueIndex) => (
+                    <p key={valueIndex} className="min-w-0 flex-1 truncate text-sm text-neutral-subtle">
+                      {otherValue}
+                    </p>
+                  ))}
+                  <div className="ml-auto flex shrink-0 items-center gap-1.5">
+                    <Button
+                      type="button"
+                      variant="outline"
+                      color="neutral"
+                      size="sm"
+                      iconOnly
+                      aria-label={`Edit ${itemName}`}
+                      onClick={() => openItemModal(index)}
+                    >
+                      <Icon iconName="pen" iconStyle="regular" />
+                    </Button>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      color="neutral"
+                      size="sm"
+                      iconOnly
+                      aria-label={`Remove ${itemName}`}
+                      disabled={!canRemove}
+                      onClick={() => onChange(items.filter((_, itemIndex) => itemIndex !== index))}
+                    >
+                      <Icon iconName="trash-can" iconStyle="regular" />
+                    </Button>
+                  </div>
+                </div>
+                {itemViolations.map((violation) => (
+                  <FieldError key={`${violation.fieldPath}-${violation.code}`} error={violation.message} />
+                ))}
+              </li>
+            )
+          })}
+        </ul>
+      ) : null}
+    </div>
+  )
+}
+
+export function ProfileConfigurationField({
+  field,
+  path,
+  value,
+  violations,
+  highlight,
+  onChange,
+}: ProfileConfigurationFieldProps) {
+  if (isPlatformArrayField(field)) {
+    return (
+      <ProfileArrayField
+        field={field}
+        path={path}
+        value={value}
+        violations={violations}
+        highlight={highlight}
+        onChange={onChange}
+      />
+    )
+  }
+
+  if (isPlatformObjectField(field)) {
+    return (
+      <ProfileObjectField
+        field={field}
+        path={path}
+        value={value}
+        violations={violations}
+        highlight={highlight}
+        onChange={onChange}
+      />
+    )
+  }
+
+  if (!isPlatformScalarField(field)) return null
+
+  return (
+    <SchemaFieldInput
+      booleanControl="toggle"
+      // Nested fields reuse keys like `name`: the full path keeps input ids unique.
+      field={toSchemaField({ ...field, key: path })}
+      layout="row"
+      disabled={field.readOnly}
+      value={getSchemaFieldValue(field, value)}
+      error={getFieldViolation(violations, path)}
+      highlight={highlight}
+      onChange={(nextValue) => onChange(toPlatformConfigurationValue(field, nextValue))}
+    />
+  )
+}
diff --git a/libs/domains/clusters/feature/src/lib/cluster-profile/profile-operator-footer.spec.tsx b/libs/domains/clusters/feature/src/lib/cluster-profile/profile-operator-footer.spec.tsx
new file mode 100644
index 00000000000..343c2733d08
--- /dev/null
+++ b/libs/domains/clusters/feature/src/lib/cluster-profile/profile-operator-footer.spec.tsx
@@ -0,0 +1,138 @@
+import { type ClusterOperatorStatusResponse } from 'qovery-typescript-axios'
+import { renderWithProviders, screen } from '@qovery/shared/util-tests'
+import { useClusterOperatorStatus } from '../hooks/use-cluster-operator-status/use-cluster-operator-status'
+import { useUpdateClusterOperator } from '../hooks/use-update-cluster-operator/use-update-cluster-operator'
+import { ProfileOperatorFooter } from './profile-operator-footer'
+
+jest.mock('@tanstack/react-router', () => ({
+  ...jest.requireActual('@tanstack/react-router'),
+  useParams: () => ({ organizationId: 'org-123', clusterId: 'cluster-123' }),
+}))
+jest.mock('../hooks/use-cluster-operator-status/use-cluster-operator-status')
+jest.mock('../hooks/use-update-cluster-operator/use-update-cluster-operator')
+
+const mockUseClusterOperatorStatus = useClusterOperatorStatus as jest.Mock
+const mockUseUpdateClusterOperator = useUpdateClusterOperator as jest.Mock
+const mockUpdateOperator = jest.fn()
+
+const operatorStatus: ClusterOperatorStatusResponse = {
+  organization_id: 'org-123',
+  cluster_id: 'cluster-123',
+  operator_connected: true,
+  last_heartbeat: new Date().toISOString(),
+  operator_version: 'v1.202.0',
+  desired_image_version: 'v1.203.0',
+  reported_chart_version: '0.2.0',
+  desired_chart_version: '0.2.1',
+  status: 'OUTDATED_IMAGE_AND_CHART',
+}
+
+describe('ProfileOperatorFooter', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockUseUpdateClusterOperator.mockReturnValue({ mutate: mockUpdateOperator, isLoading: false })
+  })
+
+  it('renders nothing for a cluster without Operator', () => {
+    mockUseClusterOperatorStatus.mockReturnValue({ data: null, isLoading: false })
+    const { container } = renderWithProviders(<ProfileOperatorFooter />)
+
+    expect(container).toBeEmptyDOMElement()
+  })
+
+  it('configures polling for the Operator status', () => {
+    mockUseClusterOperatorStatus.mockReturnValue({ data: operatorStatus, isLoading: false })
+    renderWithProviders(<ProfileOperatorFooter />)
+
+    expect(mockUseClusterOperatorStatus).toHaveBeenCalledWith({
+      organizationId: 'org-123',
+      clusterId: 'cluster-123',
+      refetchInterval: 30_000,
+      stopPollingWhenMissing: true,
+    })
+    expect(screen.getByRole('button', { name: 'Qovery Operator: Update available' })).toBeInTheDocument()
+  })
+
+  it('looks clickable when the row opens the status panel', () => {
+    mockUseClusterOperatorStatus.mockReturnValue({ data: operatorStatus, isLoading: false })
+    renderWithProviders(<ProfileOperatorFooter />)
+
+    expect(screen.getByRole('button', { name: 'Qovery Operator: Update available' })).toHaveClass('cursor-pointer')
+  })
+
+  it('does not look clickable when the status cannot be retrieved', () => {
+    mockUseClusterOperatorStatus.mockReturnValue({ data: undefined, isLoading: false, isError: true })
+    renderWithProviders(<ProfileOperatorFooter />)
+
+    expect(screen.getByRole('button', { name: 'Qovery Operator: status unavailable' })).not.toHaveClass(
+      'cursor-pointer'
+    )
+  })
+
+  it('tells when the Operator status cannot be retrieved', async () => {
+    mockUseClusterOperatorStatus.mockReturnValue({ data: undefined, isLoading: false, isError: true })
+    const { userEvent } = renderWithProviders(<ProfileOperatorFooter />)
+
+    await userEvent.hover(screen.getByRole('button', { name: 'Qovery Operator: status unavailable' }))
+
+    expect((await screen.findAllByText('The Operator status could not be retrieved'))[0]).toBeInTheDocument()
+  })
+
+  it('does not keep showing a stale status once a refresh fails', async () => {
+    mockUseClusterOperatorStatus.mockReturnValue({ data: operatorStatus, isLoading: false, isError: true })
+    const { userEvent } = renderWithProviders(<ProfileOperatorFooter />)
+
+    await userEvent.hover(screen.getByRole('button', { name: 'Qovery Operator: status unavailable' }))
+
+    expect((await screen.findAllByText('The Operator status could not be retrieved'))[0]).toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'Update Operator' })).not.toBeInTheDocument()
+  })
+
+  it('shows the Operator versions in a popover and starts an update', async () => {
+    mockUseClusterOperatorStatus.mockReturnValue({ data: operatorStatus, isLoading: false })
+    const { userEvent } = renderWithProviders(<ProfileOperatorFooter />)
+
+    await userEvent.click(screen.getByRole('button', { name: 'Qovery Operator: Update available' }))
+
+    expect(await screen.findByRole('dialog', { name: 'Qovery Operator status' })).toBeInTheDocument()
+    const status = await screen.findByRole('region', { name: 'Qovery Operator status' })
+    expect(status).toHaveTextContent('Update available')
+    expect(status).toHaveTextContent('v1.202.0')
+    expect(status).toHaveTextContent('Target: v1.203.0')
+    expect(status).toHaveTextContent('0.2.0')
+    expect(status).toHaveTextContent('Target: 0.2.1')
+
+    await userEvent.click(screen.getByRole('button', { name: 'Update Operator' }))
+
+    expect(mockUpdateOperator).toHaveBeenCalledWith({
+      organizationId: 'org-123',
+      clusterId: 'cluster-123',
+      chartVersion: '0.2.1',
+      imageVersion: 'v1.203.0',
+    })
+  })
+
+  it('reaches the update action from the keyboard', async () => {
+    mockUseClusterOperatorStatus.mockReturnValue({ data: operatorStatus, isLoading: false })
+    const { userEvent } = renderWithProviders(<ProfileOperatorFooter />)
+
+    screen.getByRole('button', { name: 'Qovery Operator: Update available' }).focus()
+    await userEvent.keyboard('{Enter}')
+    await userEvent.tab()
+
+    expect(screen.getByRole('button', { name: 'Update Operator' })).toHaveFocus()
+  })
+
+  it('hides the update action while the Operator is disconnected', async () => {
+    mockUseClusterOperatorStatus.mockReturnValue({
+      data: { ...operatorStatus, operator_connected: false, status: 'DISCONNECTED' },
+      isLoading: false,
+    })
+    const { userEvent } = renderWithProviders(<ProfileOperatorFooter />)
+
+    await userEvent.click(screen.getByRole('button', { name: 'Qovery Operator: Disconnected' }))
+
+    expect(await screen.findByText('No recent heartbeat was received from the Operator.')).toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'Update Operator' })).not.toBeInTheDocument()
+  })
+})
diff --git a/libs/domains/clusters/feature/src/lib/cluster-profile/profile-operator-footer.tsx b/libs/domains/clusters/feature/src/lib/cluster-profile/profile-operator-footer.tsx
new file mode 100644
index 00000000000..a4d19badd18
--- /dev/null
+++ b/libs/domains/clusters/feature/src/lib/cluster-profile/profile-operator-footer.tsx
@@ -0,0 +1,74 @@
+import { useParams } from '@tanstack/react-router'
+import clsx from 'clsx'
+import { Icon, LoaderSpinner, Popover, Tooltip } from '@qovery/shared/ui'
+import {
+  ClusterOperatorStatus,
+  getClusterOperatorStatusDisplay,
+} from '../cluster-operator-status/cluster-operator-status'
+import { useClusterOperatorStatus } from '../hooks/use-cluster-operator-status/use-cluster-operator-status'
+
+const OPERATOR_STATUS_REFRESH_INTERVAL = 30_000
+
+export function ProfileOperatorFooter() {
+  const { organizationId = '', clusterId = '' } = useParams({ strict: false })
+  const {
+    data: operatorStatus,
+    isLoading,
+    isError,
+  } = useClusterOperatorStatus({
+    organizationId,
+    clusterId,
+    refetchInterval: OPERATOR_STATUS_REFRESH_INTERVAL,
+    stopPollingWhenMissing: true,
+  })
+
+  // Clusters without Operator state (q-core answers 404) have no Operator to describe.
+  if (!isLoading && !isError && !operatorStatus) return null
+
+  const display = operatorStatus && !isError ? getClusterOperatorStatusDisplay(operatorStatus.status) : undefined
+
+  // Only the status opens a panel: the row then reacts on hover.
+  const opensPanel = Boolean(operatorStatus) && !isError
+
+  const trigger = (
+    <button
+      type="button"
+      aria-label={`Qovery Operator: ${display?.label ?? (isError ? 'status unavailable' : 'loading')}`}
+      className={clsx(
+        'flex w-full shrink-0 items-center gap-2 bg-background-secondary p-3 text-left text-sm font-medium text-neutral outline-none transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-brand-strong',
+        { 'cursor-pointer hover:bg-surface-neutral-component': opensPanel }
+      )}
+    >
+      Qovery Operator
+      {display ? (
+        <Icon iconName={display.icon.name} iconStyle="regular" className={`text-sm ${display.icon.className}`} />
+      ) : isError ? (
+        <Icon iconName="circle-exclamation" iconStyle="regular" className="text-sm text-warning" />
+      ) : (
+        <LoaderSpinner className="w-3" />
+      )}
+    </button>
+  )
+
+  if (isError) {
+    return (
+      <Tooltip side="right" content="The Operator status could not be retrieved">
+        {trigger}
+      </Tooltip>
+    )
+  }
+
+  // The panel holds an action: a popover keeps it reachable by keyboard, unlike a tooltip.
+  return operatorStatus ? (
+    <Popover.Root>
+      <Popover.Trigger>{trigger}</Popover.Trigger>
+      <Popover.Content side="right" align="end" aria-label="Qovery Operator status" className="w-[480px] rounded-lg">
+        <ClusterOperatorStatus operatorStatus={operatorStatus} />
+      </Popover.Content>
+    </Popover.Root>
+  ) : (
+    trigger
+  )
+}
+
+export default ProfileOperatorFooter
diff --git a/libs/domains/clusters/feature/src/lib/cluster-profile/profile-search.ts b/libs/domains/clusters/feature/src/lib/cluster-profile/profile-search.ts
new file mode 100644
index 00000000000..4377131ecfc
--- /dev/null
+++ b/libs/domains/clusters/feature/src/lib/cluster-profile/profile-search.ts
@@ -0,0 +1,40 @@
+import { type FieldSchemaResponse } from 'qovery-typescript-axios'
+import { isPlatformArrayField, isPlatformObjectField } from '../utils/platform-configuration-utils'
+
+type SearchableText = { label: string; description?: string | null }
+
+export function normalizeProfileSearch(search?: string) {
+  return search?.trim().toLocaleLowerCase() ?? ''
+}
+
+export function matchesProfileSearch({ label, description }: SearchableText, query: string) {
+  return (
+    !query || label.toLocaleLowerCase().includes(query) || Boolean(description?.toLocaleLowerCase().includes(query))
+  )
+}
+
+function getChildFields(field: FieldSchemaResponse): FieldSchemaResponse[] {
+  if (isPlatformObjectField(field)) return field.fields
+  if (isPlatformArrayField(field) && field.items.type === 'object') return field.items.fields
+  return []
+}
+
+export function fieldMatchesProfileSearch(field: FieldSchemaResponse, query: string): boolean {
+  return (
+    matchesProfileSearch(field, query) || getChildFields(field).some((child) => fieldMatchesProfileSearch(child, query))
+  )
+}
+
+// Keeps matching fields; an object matched through its children only shows those children.
+export function filterFieldsByProfileSearch(fields: FieldSchemaResponse[], query: string): FieldSchemaResponse[] {
+  if (!query) return fields
+
+  return fields.flatMap((field) => {
+    if (matchesProfileSearch(field, query)) return [field]
+    if (isPlatformObjectField(field)) {
+      const childFields = filterFieldsByProfileSearch(field.fields, query)
+      return childFields.length ? [{ ...field, fields: childFields }] : []
+    }
+    return fieldMatchesProfileSearch(field, query) ? [field] : []
+  })
+}
diff --git a/libs/domains/clusters/feature/src/lib/cluster-profile/profile-tree.spec.ts b/libs/domains/clusters/feature/src/lib/cluster-profile/profile-tree.spec.ts
new file mode 100644
index 00000000000..e479d3b09c3
--- /dev/null
+++ b/libs/domains/clusters/feature/src/lib/cluster-profile/profile-tree.spec.ts
@@ -0,0 +1,68 @@
+import { type PlatformTemplateSummaryResponse } from 'qovery-typescript-axios'
+import { getProfileTree, resolveProfileSelection } from './profile-tree'
+
+const field = { key: 'replicas', type: 'int' }
+const template = {
+  key: 'qovery-cluster-v0',
+  version: '1.0.0',
+  layers: [
+    { key: 'network', components: [{ key: 'envoy', fields: [field] }] },
+    {
+      key: 'karpenter',
+      components: [
+        { key: 'karpenter-crd', fields: [] },
+        { key: 'karpenter-configuration', fields: [field] },
+      ],
+    },
+    {
+      key: 'log-infra',
+      components: [
+        { key: 'loki', fields: [field] },
+        { key: 'alloy', fields: [field] },
+      ],
+    },
+  ],
+} as unknown as PlatformTemplateSummaryResponse
+const profileTree = getProfileTree(template, [{ key: 'network', status: 'SKIPPED', reason: '', componentKeys: [] }])
+
+describe('resolveProfileSelection', () => {
+  it('keeps a configurable component', () => {
+    expect(resolveProfileSelection(profileTree, 'alloy').component?.key).toBe('alloy')
+  })
+
+  it.each([undefined, 'unknown', 'envoy', 'network'])('falls back to the default component (%s)', (requestedKey) => {
+    const { layer, component } = resolveProfileSelection(profileTree, requestedKey)
+
+    expect(layer?.id).toBe('log-infra')
+    expect(component?.key).toBe('loki')
+  })
+
+  it.each(['karpenter', 'karpenter-crd'])(
+    'opens the first configurable component of the requested layer (%s)',
+    (requestedKey) => {
+      expect(resolveProfileSelection(profileTree, requestedKey).component?.key).toBe('karpenter-configuration')
+    }
+  )
+
+  it('selects nothing when the only enabled layer has nothing to configure', () => {
+    const emptyTree = getProfileTree({
+      ...template,
+      layers: [{ key: 'crds', components: [{ key: 'karpenter-crd', fields: [] }] }],
+    } as unknown as PlatformTemplateSummaryResponse)
+
+    expect(emptyTree[0]).toMatchObject({ status: 'success', configurable: false })
+    expect(resolveProfileSelection(emptyTree, undefined)).toEqual({ layer: undefined, component: undefined })
+    expect(resolveProfileSelection(emptyTree, 'karpenter-crd')).toEqual({ layer: undefined, component: undefined })
+  })
+
+  it('selects nothing when every layer is skipped or managed by Qovery', () => {
+    const lockedTree = getProfileTree(template, [
+      { key: 'network', status: 'SKIPPED', reason: '', componentKeys: [] },
+      { key: 'log-infra', status: 'DISABLED', reason: '', componentKeys: [] },
+      { key: 'karpenter', status: 'DISABLED', reason: '', componentKeys: [] },
+    ])
+
+    expect(resolveProfileSelection(lockedTree, undefined)).toEqual({ layer: undefined, component: undefined })
+    expect(resolveProfileSelection(lockedTree, 'loki')).toEqual({ layer: undefined, component: undefined })
+  })
+})
diff --git a/libs/domains/clusters/feature/src/lib/cluster-profile/profile-tree.ts b/libs/domains/clusters/feature/src/lib/cluster-profile/profile-tree.ts
new file mode 100644
index 00000000000..c889bac00d5
--- /dev/null
+++ b/libs/domains/clusters/feature/src/lib/cluster-profile/profile-tree.ts
@@ -0,0 +1,125 @@
+import {
+  type ClusterPlatformBindingLayerResponse,
+  type PlatformTemplateComponentResponse,
+  type PlatformTemplateSummaryResponse,
+} from 'qovery-typescript-axios'
+
+export type ProfileComponent = PlatformTemplateComponentResponse & {
+  id: string
+  label: string
+  // Without fields of its own or sourced from another component, there is nothing to configure.
+  configurable: boolean
+}
+
+export type ProfileTreeItem = {
+  id: string
+  label: string
+  description?: string | null
+  status: 'disabled' | 'success'
+  // Why a disabled layer cannot be opened.
+  disabledReason?: string
+  configurable: boolean
+  children: readonly ProfileComponent[]
+}
+
+export function isProfileComponentConfigurable(component: PlatformTemplateComponentResponse) {
+  return component.fields.length > 0 || Boolean(component.configurationSections?.length)
+}
+
+// The component a layer opens on: its first configurable one, if any.
+export function getFirstConfigurableComponent(components: readonly ProfileComponent[] | undefined) {
+  return components?.find((component) => component.configurable) ?? components?.[0]
+}
+
+export function formatProfileLabel(value: string) {
+  const label = value.replace(/[-_]+/g, ' ').trim().toLowerCase()
+  return label ? `${label[0].toUpperCase()}${label.slice(1)}` : value
+}
+
+export const SKIPPED_LAYER_REASON = 'This layer does not apply to this cluster'
+export const QOVERY_MANAGED_LAYER_REASON = 'These values are currently managed by Qovery'
+
+// A DISABLED layer is managed by Qovery and read-only for the customer.
+function getLayerDisabledReason(resolvedLayer?: ClusterPlatformBindingLayerResponse) {
+  if (resolvedLayer?.status === 'SKIPPED') return SKIPPED_LAYER_REASON
+  if (resolvedLayer?.status === 'DISABLED') return QOVERY_MANAGED_LAYER_REASON
+  return undefined
+}
+
+// Layer statuses come from the cluster configuration, resolved by q-core against the cluster mode and provider.
+export function getProfileTree(
+  template: PlatformTemplateSummaryResponse | undefined,
+  resolvedLayers: readonly ClusterPlatformBindingLayerResponse[] = []
+): ProfileTreeItem[] {
+  return (
+    template?.layers.map((layer) => {
+      const label = formatProfileLabel(layer.key)
+      const disabledReason = getLayerDisabledReason(resolvedLayers.find(({ key }) => key === layer.key))
+      const isDisabled = Boolean(disabledReason)
+      const children = layer.components.map((component) => ({
+        ...component,
+        id: `${layer.key}/${component.key}`,
+        key: component.key,
+        label: formatProfileLabel(component.key),
+        configurable: isProfileComponentConfigurable(component),
+      }))
+
+      return {
+        id: layer.key,
+        label,
+        description: layer.description,
+        status: isDisabled ? 'disabled' : 'success',
+        disabledReason,
+        configurable: children.some((component) => component.configurable),
+        children,
+      }
+    }) ?? []
+  )
+}
+
+function findProfileComponent(profileTree: ProfileTreeItem[], requestedKey?: string) {
+  if (!requestedKey) return undefined
+
+  return profileTree
+    .flatMap((item) => item.children ?? [])
+    .find((component) => component.key === requestedKey || component.id === requestedKey)
+}
+
+function findProfileLayer(profileTree: ProfileTreeItem[], requestedKey?: string) {
+  if (!requestedKey) return undefined
+
+  return profileTree.find((item) => item.id === requestedKey)
+}
+
+// Skipped or Qovery-managed layers, and layers with nothing to configure, cannot be opened.
+const isOpenableLayer = (item: ProfileTreeItem) => item.status !== 'disabled' && item.configurable
+
+// Nothing is selected when no layer can be opened.
+function getDefaultProfileComponent(profileTree: ProfileTreeItem[]) {
+  return getFirstConfigurableComponent(
+    (
+      profileTree.find((item) => item.label.toLowerCase() === 'log infra' && isOpenableLayer(item)) ??
+      profileTree.find(isOpenableLayer)
+    )?.children
+  )
+}
+
+export function resolveProfileSelection(profileTree: ProfileTreeItem[], requestedKey?: string) {
+  const requestedComponent = findProfileComponent(profileTree, requestedKey)
+  const requestedLayer =
+    findProfileLayer(profileTree, requestedKey) ??
+    profileTree.find((item) => item.children?.some((child) => child.id === requestedComponent?.id))
+  // The URL cannot open what the sidebar disables: a disabled layer falls back to the default selection, and a
+  // component with nothing to configure to the first configurable component of its layer.
+  const openableLayer = requestedLayer && isOpenableLayer(requestedLayer) ? requestedLayer : undefined
+  const openableComponent = openableLayer && requestedComponent?.configurable ? requestedComponent : undefined
+  const defaultComponent = getDefaultProfileComponent(profileTree)
+  const layer =
+    openableLayer ?? profileTree.find((item) => item.children?.some((child) => child.id === defaultComponent?.id))
+
+  return {
+    layer,
+    component:
+      openableComponent ?? (openableLayer ? getFirstConfigurableComponent(openableLayer.children) : defaultComponent),
+  }
+}
diff --git a/libs/domains/clusters/feature/src/lib/cluster-profile/use-cluster-profile-tree.spec.ts b/libs/domains/clusters/feature/src/lib/cluster-profile/use-cluster-profile-tree.spec.ts
new file mode 100644
index 00000000000..ae6618cbd1e
--- /dev/null
+++ b/libs/domains/clusters/feature/src/lib/cluster-profile/use-cluster-profile-tree.spec.ts
@@ -0,0 +1,53 @@
+import { renderHook } from '@qovery/shared/util-tests'
+import { useCluster } from '../hooks/use-cluster/use-cluster'
+import { usePlatformConfiguration } from '../hooks/use-platform-configuration/use-platform-configuration'
+import { usePlatformTemplates } from '../hooks/use-platform-templates/use-platform-templates'
+import { useClusterProfileTree } from './use-cluster-profile-tree'
+
+jest.mock('../hooks/use-cluster/use-cluster')
+jest.mock('../hooks/use-platform-templates/use-platform-templates')
+jest.mock('../hooks/use-platform-configuration/use-platform-configuration')
+
+const mockUseCluster = useCluster as jest.Mock
+const mockUsePlatformTemplates = usePlatformTemplates as jest.Mock
+const mockUsePlatformConfiguration = usePlatformConfiguration as jest.Mock
+
+const props = { organizationId: 'organization-id', clusterId: 'cluster-id' }
+
+describe('useClusterProfileTree', () => {
+  beforeEach(() => {
+    mockUseCluster.mockReturnValue({
+      data: { kubernetes: 'SELF_MANAGED', cloud_provider: 'AWS' },
+      isError: false,
+      isLoading: false,
+    })
+    mockUsePlatformTemplates.mockReturnValue({ data: undefined, isError: false, isLoading: true })
+    mockUsePlatformConfiguration.mockReturnValue({ data: null, isError: false, isLoading: false })
+  })
+
+  it('waits for the templates of a supported cluster', () => {
+    const { result } = renderHook(() => useClusterProfileTree(props))
+
+    expect(mockUsePlatformTemplates).toHaveBeenCalledWith(expect.objectContaining({ enabled: true }))
+    expect(result.current.isLoading).toBe(true)
+  })
+
+  it('stops loading when the cluster request fails', () => {
+    mockUseCluster.mockReturnValue({ data: undefined, isError: true, isLoading: false })
+    const { result } = renderHook(() => useClusterProfileTree(props))
+
+    expect(mockUsePlatformTemplates).toHaveBeenCalledWith(expect.objectContaining({ enabled: false }))
+    expect(result.current).toMatchObject({ isLoading: false, isError: true })
+  })
+
+  it('stops loading for a cluster without platform mode', () => {
+    mockUseCluster.mockReturnValue({
+      data: { kubernetes: 'PARTIALLY_MANAGED', cloud_provider: 'AWS' },
+      isError: false,
+      isLoading: false,
+    })
+    const { result } = renderHook(() => useClusterProfileTree(props))
+
+    expect(result.current).toMatchObject({ isLoading: false, isError: false, profileTree: [] })
+  })
+})
diff --git a/libs/domains/clusters/feature/src/lib/cluster-profile/use-cluster-profile-tree.ts b/libs/domains/clusters/feature/src/lib/cluster-profile/use-cluster-profile-tree.ts
new file mode 100644
index 00000000000..83e161b070d
--- /dev/null
+++ b/libs/domains/clusters/feature/src/lib/cluster-profile/use-cluster-profile-tree.ts
@@ -0,0 +1,66 @@
+import { useMemo } from 'react'
+import { useCluster } from '../hooks/use-cluster/use-cluster'
+import { usePlatformConfiguration } from '../hooks/use-platform-configuration/use-platform-configuration'
+import { usePlatformTemplates } from '../hooks/use-platform-templates/use-platform-templates'
+import { toPlatformCloudVendor, toPlatformClusterMode } from '../utils/platform-configuration-utils'
+import { getProfileTree } from './profile-tree'
+
+export interface UseClusterProfileTreeProps {
+  organizationId: string
+  clusterId: string
+}
+
+// The template saved on the cluster, laid out with the layer statuses of its configuration.
+export function useClusterProfileTree({ organizationId, clusterId }: UseClusterProfileTreeProps) {
+  const {
+    data: cluster,
+    isError: isClusterError,
+    isLoading: isClusterLoading,
+  } = useCluster({
+    organizationId,
+    clusterId,
+  })
+  const clusterMode = toPlatformClusterMode(cluster?.kubernetes)
+  const cloudProvider = toPlatformCloudVendor(cluster?.cloud_provider)
+  const isTemplateQueryEnabled = Boolean(clusterMode && cloudProvider)
+  const {
+    data: templates,
+    isError: isTemplateError,
+    isLoading: isTemplateLoading,
+  } = usePlatformTemplates({
+    organizationId,
+    clusterMode,
+    cloudProvider,
+    enabled: isTemplateQueryEnabled,
+  })
+  const {
+    data: configuration,
+    isError: isConfigurationError,
+    isLoading: isConfigurationLoading,
+  } = usePlatformConfiguration({ clusterId })
+  const selectedTemplate = useMemo(
+    () =>
+      templates?.find(
+        (template) =>
+          template.key === configuration?.platform.templateKey &&
+          template.version === configuration?.platform.templateVersion
+      ) ?? templates?.[0],
+    [configuration?.platform.templateKey, configuration?.platform.templateVersion, templates]
+  )
+  const profileTree = useMemo(
+    () => getProfileTree(selectedTemplate, configuration?.layers),
+    [configuration?.layers, selectedTemplate]
+  )
+
+  return {
+    cluster,
+    templates,
+    configuration,
+    selectedTemplate,
+    profileTree,
+    isLoading: isClusterLoading || (isTemplateQueryEnabled && isTemplateLoading) || isConfigurationLoading,
+    isError: isClusterError || isTemplateError || isConfigurationError,
+  }
+}
+
+export default useClusterProfileTree
diff --git a/libs/domains/clusters/feature/src/lib/hooks/use-cluster-operator-bootstrap/use-cluster-operator-bootstrap.ts b/libs/domains/clusters/feature/src/lib/hooks/use-cluster-operator-bootstrap/use-cluster-operator-bootstrap.ts
new file mode 100644
index 00000000000..418fd916fcd
--- /dev/null
+++ b/libs/domains/clusters/feature/src/lib/hooks/use-cluster-operator-bootstrap/use-cluster-operator-bootstrap.ts
@@ -0,0 +1,24 @@
+import { useQuery } from '@tanstack/react-query'
+import { queries } from '@qovery/state/util-queries'
+
+export interface UseClusterOperatorBootstrapProps {
+  organizationId: string
+  clusterId: string
+  enabled?: boolean
+}
+
+// The bootstrap values carry the cluster credential: never keep them in the cache once unused.
+export function useClusterOperatorBootstrap({
+  organizationId,
+  clusterId,
+  enabled = true,
+}: UseClusterOperatorBootstrapProps) {
+  return useQuery({
+    ...queries.clusters.operatorBootstrap({ organizationId, clusterId }),
+    enabled: enabled && Boolean(organizationId) && Boolean(clusterId),
+    cacheTime: 0,
+    refetchOnWindowFocus: false,
+  })
+}
+
+export default useClusterOperatorBootstrap
diff --git a/libs/domains/clusters/feature/src/lib/hooks/use-cluster-operator-status/use-cluster-operator-status.spec.ts b/libs/domains/clusters/feature/src/lib/hooks/use-cluster-operator-status/use-cluster-operator-status.spec.ts
new file mode 100644
index 00000000000..5c0a39133bf
--- /dev/null
+++ b/libs/domains/clusters/feature/src/lib/hooks/use-cluster-operator-status/use-cluster-operator-status.spec.ts
@@ -0,0 +1,43 @@
+import { useQuery } from '@tanstack/react-query'
+import { renderHook } from '@qovery/shared/util-tests'
+import { useClusterOperatorStatus } from './use-cluster-operator-status'
+
+jest.mock('@tanstack/react-query', () => ({
+  ...jest.requireActual('@tanstack/react-query'),
+  useQuery: jest.fn(),
+}))
+
+const mockUseQuery = useQuery as jest.Mock
+
+describe('useClusterOperatorStatus', () => {
+  it('keeps polling while the Operator state is missing by default', () => {
+    renderHook(() =>
+      useClusterOperatorStatus({ organizationId: 'org-123', clusterId: 'cluster-123', refetchInterval: 5_000 })
+    )
+
+    const { refetchInterval } = mockUseQuery.mock.calls[0][0]
+    expect(refetchInterval(null)).toBe(5_000)
+  })
+
+  it('stops polling once the cluster is known to have no Operator when asked to', () => {
+    renderHook(() =>
+      useClusterOperatorStatus({
+        organizationId: 'org-123',
+        clusterId: 'cluster-123',
+        refetchInterval: 30_000,
+        stopPollingWhenMissing: true,
+      })
+    )
+
+    const { refetchInterval } = mockUseQuery.mock.calls[0][0]
+    expect(refetchInterval({ status: 'CURRENT' })).toBe(30_000)
+    expect(refetchInterval(undefined)).toBe(30_000)
+    expect(refetchInterval(null)).toBe(false)
+  })
+
+  it('does not poll without interval', () => {
+    renderHook(() => useClusterOperatorStatus({ organizationId: 'org-123', clusterId: 'cluster-123' }))
+
+    expect(mockUseQuery.mock.calls.at(-1)[0].refetchInterval).toBeUndefined()
+  })
+})
diff --git a/libs/domains/clusters/feature/src/lib/hooks/use-cluster-operator-status/use-cluster-operator-status.ts b/libs/domains/clusters/feature/src/lib/hooks/use-cluster-operator-status/use-cluster-operator-status.ts
new file mode 100644
index 00000000000..8906d11076d
--- /dev/null
+++ b/libs/domains/clusters/feature/src/lib/hooks/use-cluster-operator-status/use-cluster-operator-status.ts
@@ -0,0 +1,33 @@
+import { useQuery } from '@tanstack/react-query'
+import { queries } from '@qovery/state/util-queries'
+
+export interface UseClusterOperatorStatusProps {
+  organizationId: string
+  clusterId: string
+  enabled?: boolean
+  // Poll interval in milliseconds, disabled when unset.
+  refetchInterval?: number
+  // Stop polling once the cluster is known to have no Operator state (404), instead of waiting for it to appear.
+  stopPollingWhenMissing?: boolean
+  staleTime?: number
+}
+
+export function useClusterOperatorStatus({
+  organizationId,
+  clusterId,
+  enabled = true,
+  refetchInterval,
+  stopPollingWhenMissing = false,
+  staleTime,
+}: UseClusterOperatorStatusProps) {
+  return useQuery({
+    ...queries.clusters.operatorStatus({ organizationId, clusterId }),
+    enabled: enabled && Boolean(organizationId) && Boolean(clusterId),
+    refetchInterval: refetchInterval
+      ? (data) => (stopPollingWhenMissing && data === null ? false : refetchInterval)
+      : undefined,
+    staleTime,
+  })
+}
+
+export default useClusterOperatorStatus
diff --git a/libs/domains/clusters/feature/src/lib/hooks/use-create-self-managed-cluster/use-create-self-managed-cluster.ts b/libs/domains/clusters/feature/src/lib/hooks/use-create-self-managed-cluster/use-create-self-managed-cluster.ts
new file mode 100644
index 00000000000..1a88cb25335
--- /dev/null
+++ b/libs/domains/clusters/feature/src/lib/hooks/use-create-self-managed-cluster/use-create-self-managed-cluster.ts
@@ -0,0 +1,20 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { mutations } from '@qovery/domains/clusters/data-access'
+import { queries } from '@qovery/state/util-queries'
+
+export function useCreateSelfManagedCluster() {
+  const queryClient = useQueryClient()
+
+  return useMutation(mutations.createSelfManagedCluster, {
+    onSuccess(_, { organizationId }) {
+      queryClient.invalidateQueries({
+        queryKey: queries.clusters.list({ organizationId }).queryKey,
+      })
+    },
+    meta: {
+      notifyOnError: true,
+    },
+  })
+}
+
+export default useCreateSelfManagedCluster
diff --git a/libs/domains/clusters/feature/src/lib/hooks/use-is-operator-attached/use-is-operator-attached.spec.ts b/libs/domains/clusters/feature/src/lib/hooks/use-is-operator-attached/use-is-operator-attached.spec.ts
new file mode 100644
index 00000000000..04c14b855e9
--- /dev/null
+++ b/libs/domains/clusters/feature/src/lib/hooks/use-is-operator-attached/use-is-operator-attached.spec.ts
@@ -0,0 +1,79 @@
+import { useFeatureFlagEnabled } from 'posthog-js/react'
+import { type Cluster } from 'qovery-typescript-axios'
+import { renderHook } from '@qovery/shared/util-tests'
+import { useClusterOperatorStatus } from '../use-cluster-operator-status/use-cluster-operator-status'
+import { useIsOperatorAttached } from './use-is-operator-attached'
+
+jest.mock('posthog-js/react', () => ({ useFeatureFlagEnabled: jest.fn() }))
+jest.mock('../use-cluster-operator-status/use-cluster-operator-status')
+
+const mockUseFeatureFlagEnabled = useFeatureFlagEnabled as jest.Mock
+const mockUseClusterOperatorStatus = useClusterOperatorStatus as jest.Mock
+
+const cluster = {
+  id: 'cluster-id',
+  organization: { id: 'organization-id' },
+  kubernetes: 'SELF_MANAGED',
+} as Pick<Cluster, 'id' | 'organization' | 'kubernetes'>
+
+describe('useIsOperatorAttached', () => {
+  beforeEach(() => {
+    mockUseFeatureFlagEnabled.mockReturnValue(true)
+    mockUseClusterOperatorStatus.mockReturnValue({ data: { status: 'CURRENT' } })
+  })
+
+  it('detects a self-managed cluster attached to the Operator', () => {
+    const { result } = renderHook(() => useIsOperatorAttached(cluster))
+
+    expect(result.current).toBe(true)
+  })
+
+  it('ignores clusters not attached to the Operator', () => {
+    mockUseClusterOperatorStatus.mockReturnValue({ data: { status: 'NOT_ATTACHED' } })
+    const { result } = renderHook(() => useIsOperatorAttached(cluster))
+
+    expect(result.current).toBe(false)
+  })
+
+  it('ignores a cached Operator status while the feature flag is disabled', () => {
+    mockUseFeatureFlagEnabled.mockReturnValue(false)
+    const { result } = renderHook(() => useIsOperatorAttached(cluster))
+
+    expect(mockUseClusterOperatorStatus).toHaveBeenCalledWith(expect.objectContaining({ enabled: false }))
+    expect(result.current).toBe(false)
+  })
+
+  it('ignores a cached Operator status for managed clusters', () => {
+    const { result } = renderHook(() => useIsOperatorAttached({ ...cluster, kubernetes: 'MANAGED' }))
+
+    expect(result.current).toBe(false)
+  })
+
+  it('ignores self-managed clusters without Operator state', () => {
+    mockUseClusterOperatorStatus.mockReturnValue({ data: null })
+    const { result } = renderHook(() => useIsOperatorAttached(cluster))
+
+    expect(result.current).toBe(false)
+  })
+
+  it('is unknown while the feature flags are loading', () => {
+    mockUseFeatureFlagEnabled.mockReturnValue(undefined)
+    const { result } = renderHook(() => useIsOperatorAttached(cluster))
+
+    expect(result.current).toBeUndefined()
+  })
+
+  it('is unknown while the cluster is loading', () => {
+    const { result } = renderHook(() => useIsOperatorAttached(undefined))
+
+    expect(mockUseClusterOperatorStatus).toHaveBeenCalledWith(expect.objectContaining({ enabled: false }))
+    expect(result.current).toBeUndefined()
+  })
+
+  it('is unknown while the Operator status is loading', () => {
+    mockUseClusterOperatorStatus.mockReturnValue({ data: undefined, isLoading: true })
+    const { result } = renderHook(() => useIsOperatorAttached(cluster))
+
+    expect(result.current).toBeUndefined()
+  })
+})
diff --git a/libs/domains/clusters/feature/src/lib/hooks/use-is-operator-attached/use-is-operator-attached.ts b/libs/domains/clusters/feature/src/lib/hooks/use-is-operator-attached/use-is-operator-attached.ts
new file mode 100644
index 00000000000..23f842bb265
--- /dev/null
+++ b/libs/domains/clusters/feature/src/lib/hooks/use-is-operator-attached/use-is-operator-attached.ts
@@ -0,0 +1,25 @@
+import { useFeatureFlagEnabled } from 'posthog-js/react'
+import { type Cluster } from 'qovery-typescript-axios'
+import { useClusterOperatorStatus } from '../use-cluster-operator-status/use-cluster-operator-status'
+
+// Self-managed clusters may be attached to the Qovery Operator: the Cluster model does not say it,
+// only the Operator status does (q-core answers 404 for clusters without Operator state).
+// Undefined until it is known: while the feature flags, the cluster or its Operator status are loading.
+export function useIsOperatorAttached(cluster?: Pick<Cluster, 'id' | 'organization' | 'kubernetes'>) {
+  const isEngineV2Enabled = useFeatureFlagEnabled('engine-v2-platform-configuration')
+  const enabled = Boolean(isEngineV2Enabled) && cluster?.kubernetes === 'SELF_MANAGED'
+  const { data: operatorStatus, isLoading } = useClusterOperatorStatus({
+    organizationId: cluster?.organization.id ?? '',
+    clusterId: cluster?.id ?? '',
+    enabled,
+    staleTime: 60_000,
+  })
+
+  if (isEngineV2Enabled === undefined || !cluster) return undefined
+  // A disabled query still exposes cached data, which other views may have fetched without the flag.
+  if (!enabled) return false
+  if (isLoading) return undefined
+  return Boolean(operatorStatus && operatorStatus.status !== 'NOT_ATTACHED')
+}
+
+export default useIsOperatorAttached
diff --git a/libs/domains/clusters/feature/src/lib/hooks/use-platform-component-configuration/use-platform-component-configuration.ts b/libs/domains/clusters/feature/src/lib/hooks/use-platform-component-configuration/use-platform-component-configuration.ts
new file mode 100644
index 00000000000..e42efbacd3d
--- /dev/null
+++ b/libs/domains/clusters/feature/src/lib/hooks/use-platform-component-configuration/use-platform-component-configuration.ts
@@ -0,0 +1,27 @@
+import { useQuery } from '@tanstack/react-query'
+import { type PlatformComponentConfigurationPreviewRequest } from 'qovery-typescript-axios'
+import { queries } from '@qovery/state/util-queries'
+
+interface UsePlatformComponentConfigurationProps {
+  clusterId: string
+  componentKey?: string
+  request: PlatformComponentConfigurationPreviewRequest
+  enabled?: boolean
+}
+
+export function usePlatformComponentConfiguration({
+  clusterId,
+  componentKey = '',
+  request,
+  enabled = true,
+}: UsePlatformComponentConfigurationProps) {
+  return useQuery({
+    ...queries.platformConfiguration.componentConfiguration({
+      clusterId,
+      componentKey,
+      request,
+    }),
+    enabled: enabled && Boolean(clusterId) && Boolean(componentKey),
+    keepPreviousData: true,
+  })
+}
diff --git a/libs/domains/clusters/feature/src/lib/hooks/use-platform-component-configurations/use-platform-component-configurations.ts b/libs/domains/clusters/feature/src/lib/hooks/use-platform-component-configurations/use-platform-component-configurations.ts
new file mode 100644
index 00000000000..c3381d7dde5
--- /dev/null
+++ b/libs/domains/clusters/feature/src/lib/hooks/use-platform-component-configurations/use-platform-component-configurations.ts
@@ -0,0 +1,29 @@
+import { useQueries } from '@tanstack/react-query'
+import { type PlatformComponentConfigurationPreviewRequest } from 'qovery-typescript-axios'
+import { queries } from '@qovery/state/util-queries'
+
+interface UsePlatformComponentConfigurationsProps {
+  clusterId: string
+  requests: Record<string, PlatformComponentConfigurationPreviewRequest>
+  enabled?: boolean
+}
+
+export function usePlatformComponentConfigurations({
+  clusterId,
+  requests,
+  enabled = true,
+}: UsePlatformComponentConfigurationsProps) {
+  const componentKeys = Object.keys(requests)
+
+  return useQueries({
+    queries: componentKeys.map((componentKey) => ({
+      ...queries.platformConfiguration.componentConfiguration({
+        clusterId,
+        componentKey,
+        request: requests[componentKey],
+      }),
+      enabled: enabled && Boolean(clusterId) && Boolean(componentKey),
+      keepPreviousData: true,
+    })),
+  })
+}
diff --git a/libs/domains/clusters/feature/src/lib/hooks/use-platform-configuration/use-platform-configuration.ts b/libs/domains/clusters/feature/src/lib/hooks/use-platform-configuration/use-platform-configuration.ts
new file mode 100644
index 00000000000..802fa7891be
--- /dev/null
+++ b/libs/domains/clusters/feature/src/lib/hooks/use-platform-configuration/use-platform-configuration.ts
@@ -0,0 +1,20 @@
+import { useQuery } from '@tanstack/react-query'
+import { queries } from '@qovery/state/util-queries'
+
+interface UsePlatformConfigurationProps {
+  clusterId: string
+  enabled?: boolean
+  suspense?: boolean
+}
+
+export function usePlatformConfiguration({
+  clusterId,
+  enabled = true,
+  suspense = false,
+}: UsePlatformConfigurationProps) {
+  return useQuery({
+    ...queries.platformConfiguration.configuration({ clusterId }),
+    enabled: enabled && Boolean(clusterId),
+    suspense,
+  })
+}
diff --git a/libs/domains/clusters/feature/src/lib/hooks/use-platform-template-component-configuration/use-platform-template-component-configuration.ts b/libs/domains/clusters/feature/src/lib/hooks/use-platform-template-component-configuration/use-platform-template-component-configuration.ts
new file mode 100644
index 00000000000..692e0b1037d
--- /dev/null
+++ b/libs/domains/clusters/feature/src/lib/hooks/use-platform-template-component-configuration/use-platform-template-component-configuration.ts
@@ -0,0 +1,43 @@
+import { useQuery } from '@tanstack/react-query'
+import {
+  type PlatformCloudVendor,
+  type PlatformClusterMode,
+  type PlatformComponentConfigurationPreviewRequest,
+} from 'qovery-typescript-axios'
+import { queries } from '@qovery/state/util-queries'
+
+interface UsePlatformTemplateComponentConfigurationProps {
+  organizationId: string
+  templateKey?: string
+  templateVersion?: string
+  componentKey?: string
+  clusterMode: PlatformClusterMode
+  cloudProvider: PlatformCloudVendor
+  request: PlatformComponentConfigurationPreviewRequest
+  enabled?: boolean
+}
+
+export function usePlatformTemplateComponentConfiguration({
+  organizationId,
+  templateKey = '',
+  templateVersion = '',
+  componentKey = '',
+  clusterMode,
+  cloudProvider,
+  request,
+  enabled = true,
+}: UsePlatformTemplateComponentConfigurationProps) {
+  return useQuery({
+    ...queries.platformConfiguration.templateComponentConfiguration({
+      organizationId,
+      templateKey,
+      templateVersion,
+      componentKey,
+      clusterMode,
+      cloudProvider,
+      request,
+    }),
+    enabled: enabled && Boolean(organizationId && templateKey && templateVersion && componentKey),
+    keepPreviousData: true,
+  })
+}
diff --git a/libs/domains/clusters/feature/src/lib/hooks/use-platform-templates/use-platform-templates.ts b/libs/domains/clusters/feature/src/lib/hooks/use-platform-templates/use-platform-templates.ts
new file mode 100644
index 00000000000..44606748ab5
--- /dev/null
+++ b/libs/domains/clusters/feature/src/lib/hooks/use-platform-templates/use-platform-templates.ts
@@ -0,0 +1,25 @@
+import { useQuery } from '@tanstack/react-query'
+import { type PlatformCloudVendor, type PlatformClusterMode } from 'qovery-typescript-axios'
+import { queries } from '@qovery/state/util-queries'
+
+interface UsePlatformTemplatesProps {
+  organizationId: string
+  clusterMode?: PlatformClusterMode
+  cloudProvider?: PlatformCloudVendor
+  enabled?: boolean
+  suspense?: boolean
+}
+
+export function usePlatformTemplates({
+  organizationId,
+  clusterMode,
+  cloudProvider,
+  enabled = true,
+  suspense = false,
+}: UsePlatformTemplatesProps) {
+  return useQuery({
+    ...queries.platformConfiguration.templates({ organizationId, clusterMode, cloudProvider }),
+    enabled: enabled && Boolean(organizationId),
+    suspense,
+  })
+}
diff --git a/libs/domains/clusters/feature/src/lib/hooks/use-update-cluster-operator/use-update-cluster-operator.ts b/libs/domains/clusters/feature/src/lib/hooks/use-update-cluster-operator/use-update-cluster-operator.ts
new file mode 100644
index 00000000000..750729c4764
--- /dev/null
+++ b/libs/domains/clusters/feature/src/lib/hooks/use-update-cluster-operator/use-update-cluster-operator.ts
@@ -0,0 +1,23 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { mutations } from '@qovery/domains/clusters/data-access'
+import { queries } from '@qovery/state/util-queries'
+
+export function useUpdateClusterOperator() {
+  const queryClient = useQueryClient()
+
+  return useMutation(mutations.updateClusterOperator, {
+    onSuccess(_, { organizationId, clusterId }) {
+      queryClient.invalidateQueries({
+        queryKey: queries.clusters.operatorStatus({ organizationId, clusterId }).queryKey,
+      })
+    },
+    meta: {
+      notifyOnSuccess: {
+        title: 'Operator update started',
+      },
+      notifyOnError: true,
+    },
+  })
+}
+
+export default useUpdateClusterOperator
diff --git a/libs/domains/clusters/feature/src/lib/hooks/use-update-platform-configuration/use-update-platform-configuration.ts b/libs/domains/clusters/feature/src/lib/hooks/use-update-platform-configuration/use-update-platform-configuration.ts
new file mode 100644
index 00000000000..d642a05c6fb
--- /dev/null
+++ b/libs/domains/clusters/feature/src/lib/hooks/use-update-platform-configuration/use-update-platform-configuration.ts
@@ -0,0 +1,16 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { platformConfigurationMutations } from '@qovery/domains/clusters/data-access'
+import { queries } from '@qovery/state/util-queries'
+
+export function useUpdatePlatformConfiguration() {
+  const queryClient = useQueryClient()
+
+  return useMutation(platformConfigurationMutations.updateConfiguration, {
+    onSuccess(configuration, { clusterId }) {
+      queryClient.setQueryData(queries.platformConfiguration.configuration({ clusterId }).queryKey, configuration)
+    },
+    meta: {
+      notifyOnError: true,
+    },
+  })
+}
diff --git a/libs/domains/clusters/feature/src/lib/self-managed-cluster-creation/self-managed-cluster-creation-flow.spec.tsx b/libs/domains/clusters/feature/src/lib/self-managed-cluster-creation/self-managed-cluster-creation-flow.spec.tsx
new file mode 100644
index 00000000000..4eba4d7d745
--- /dev/null
+++ b/libs/domains/clusters/feature/src/lib/self-managed-cluster-creation/self-managed-cluster-creation-flow.spec.tsx
@@ -0,0 +1,501 @@
+import download from 'downloadjs'
+import { CloudProviderEnum } from 'qovery-typescript-axios'
+import { useState } from 'react'
+import selectEvent from 'react-select-event'
+import * as cloudProvidersDomain from '@qovery/domains/cloud-providers/feature'
+import { renderWithProviders, screen, waitFor } from '@qovery/shared/util-tests'
+import { useClusterOperatorBootstrap } from '../hooks/use-cluster-operator-bootstrap/use-cluster-operator-bootstrap'
+import { useClusterOperatorStatus } from '../hooks/use-cluster-operator-status/use-cluster-operator-status'
+import { useCreateSelfManagedCluster } from '../hooks/use-create-self-managed-cluster/use-create-self-managed-cluster'
+import { usePlatformTemplateComponentConfiguration } from '../hooks/use-platform-template-component-configuration/use-platform-template-component-configuration'
+import { usePlatformTemplates } from '../hooks/use-platform-templates/use-platform-templates'
+import { SelfManagedClusterCreationFlow } from './self-managed-cluster-creation-flow'
+
+const mockNavigate = jest.fn()
+
+jest.mock('downloadjs', () => jest.fn())
+jest.mock('@qovery/shared/util-hooks', () => ({
+  ...jest.requireActual('@qovery/shared/util-hooks'),
+  useDebounce: <T,>(value: T) => value,
+}))
+jest.mock('@tanstack/react-router', () => {
+  const React = jest.requireActual('react')
+  return {
+    ...jest.requireActual('@tanstack/react-router'),
+    useNavigate: () => mockNavigate,
+    useParams: () => ({ organizationId: 'org-123' }),
+    Link: React.forwardRef(
+      ({ children, ...props }: { children?: React.ReactNode }, ref: React.Ref<HTMLAnchorElement>) =>
+        React.createElement('a', { ref, ...props }, children)
+    ),
+  }
+})
+jest.mock('../hooks/use-platform-templates/use-platform-templates')
+jest.mock('../hooks/use-create-self-managed-cluster/use-create-self-managed-cluster')
+jest.mock('../hooks/use-cluster-operator-status/use-cluster-operator-status')
+jest.mock('../hooks/use-cluster-operator-bootstrap/use-cluster-operator-bootstrap')
+jest.mock('../hooks/use-platform-template-component-configuration/use-platform-template-component-configuration')
+
+const useCloudProvidersMockSpy = jest.spyOn(cloudProvidersDomain, 'useCloudProviders') as jest.Mock
+const useCloudProviderCredentialsMockSpy = jest.spyOn(cloudProvidersDomain, 'useCloudProviderCredentials') as jest.Mock
+const mockUsePlatformTemplates = usePlatformTemplates as jest.Mock
+const mockUseCreateSelfManagedCluster = useCreateSelfManagedCluster as jest.Mock
+const mockUseClusterOperatorStatus = useClusterOperatorStatus as jest.Mock
+const mockUseClusterOperatorBootstrap = useClusterOperatorBootstrap as jest.Mock
+const mockUsePlatformTemplateComponentConfiguration = usePlatformTemplateComponentConfiguration as jest.Mock
+const mockDownload = download as jest.Mock
+const mockCreateSelfManagedCluster = jest.fn()
+const mockOnClose = jest.fn()
+
+const HELM_COMMAND =
+  'helm upgrade --install qovery-operator oci://registry/qovery-operator --version 1.0.0 --namespace qovery --create-namespace --atomic --wait --timeout 15m -f values.yaml'
+
+const operatorComponent = {
+  key: 'qovery-operator',
+  kind: 'HELM',
+  fields: [
+    {
+      key: 'cpuArchitectures',
+      label: 'CPU architectures',
+      type: 'string',
+      required: false,
+      sensitive: false,
+      constraints: { allowedValues: ['AMD64', 'ARM64'] },
+    },
+    {
+      key: 'nodeSelectorKey',
+      label: 'Node group label key',
+      description: 'Node label key selecting where the Operator and its Engine worker Jobs run.',
+      type: 'string',
+      required: false,
+      sensitive: false,
+      defaultValue: 'eks.amazonaws.com/nodegroup',
+      constraints: {},
+    },
+    {
+      key: 'nodeSelectorValue',
+      label: 'Node group label value',
+      type: 'string',
+      required: false,
+      sensitive: false,
+      constraints: {},
+    },
+  ],
+}
+
+async function fillGeneralStep(userEvent: ReturnType<typeof renderWithProviders>['userEvent']) {
+  await userEvent.type(screen.getByLabelText('Cluster name'), 'my-cluster')
+  await selectEvent.select(screen.getByLabelText('Credentials'), 'creds', { container: document.body })
+  await selectEvent.select(screen.getByLabelText('Region'), 'Paris (eu-west-3)', { container: document.body })
+  // Validation runs asynchronously on change.
+  await waitFor(() => expect(screen.getByRole('button', { name: 'Continue' })).toBeEnabled())
+}
+
+async function goToOperatorStep(userEvent: ReturnType<typeof renderWithProviders>['userEvent']) {
+  await fillGeneralStep(userEvent)
+  await userEvent.click(screen.getByRole('button', { name: 'Continue' }))
+  await screen.findByRole('heading', { name: 'Configure Qovery Operator' })
+}
+
+describe('SelfManagedClusterCreationFlow', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    useCloudProvidersMockSpy.mockReturnValue({
+      data: [
+        {
+          name: 'AWS',
+          short_name: CloudProviderEnum.AWS,
+          regions: [{ name: 'eu-west-3', city: 'Paris', country_code: 'FR' }],
+        },
+      ],
+    })
+    useCloudProviderCredentialsMockSpy.mockReturnValue({ data: [{ id: 'credential-id', name: 'creds' }] })
+    mockUsePlatformTemplates.mockReturnValue({
+      data: [{ key: 'qovery-cluster-v0', version: '1.0.0', layers: [], bootstrapComponent: operatorComponent }],
+      isLoading: false,
+      isSuccess: true,
+      isError: false,
+      refetch: jest.fn(),
+    })
+    mockUsePlatformTemplateComponentConfiguration.mockReturnValue({
+      data: {
+        componentKey: 'qovery-operator',
+        fields: operatorComponent.fields,
+        requirements: [],
+        componentBindings: [],
+        violations: [],
+      },
+      isFetching: false,
+      isError: false,
+    })
+    mockCreateSelfManagedCluster.mockResolvedValue({ id: 'cluster-id' })
+    mockUseCreateSelfManagedCluster.mockReturnValue({ mutateAsync: mockCreateSelfManagedCluster, isLoading: false })
+    mockUseClusterOperatorStatus.mockReturnValue({ data: { operator_connected: false } })
+    mockUseClusterOperatorBootstrap.mockReturnValue({
+      data: { values_yaml: 'secret: values', helm_command: HELM_COMMAND },
+      isLoading: false,
+      isError: false,
+      refetch: jest.fn(),
+    })
+  })
+
+  it('enables Continue once the name, credentials and region are set', async () => {
+    const { userEvent } = renderWithProviders(
+      <SelfManagedClusterCreationFlow organizationId="org-123" onClose={mockOnClose} />
+    )
+
+    expect(screen.getByRole('heading', { name: 'Connect AWS cluster' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Continue' })).toBeDisabled()
+
+    await fillGeneralStep(userEvent)
+
+    expect(screen.getByRole('button', { name: 'Continue' })).toBeEnabled()
+  })
+
+  it('keeps the general values when going back from the Operator step', async () => {
+    const { userEvent } = renderWithProviders(
+      <SelfManagedClusterCreationFlow organizationId="org-123" onClose={mockOnClose} />
+    )
+
+    await goToOperatorStep(userEvent)
+    await userEvent.click(screen.getByRole('button', { name: 'Back' }))
+
+    expect(screen.getByLabelText('Cluster name')).toHaveValue('my-cluster')
+  })
+
+  it('renders the Operator fields of the template bootstrap component, without the demo-only ones', async () => {
+    const { userEvent } = renderWithProviders(
+      <SelfManagedClusterCreationFlow organizationId="org-123" onClose={mockOnClose} />
+    )
+
+    await goToOperatorStep(userEvent)
+
+    expect(screen.getByLabelText('Node group label key')).toHaveValue('eks.amazonaws.com/nodegroup')
+    expect(screen.getByLabelText('Node group label value')).toHaveValue('')
+    expect(screen.queryByText('CPU architectures')).not.toBeInTheDocument()
+  })
+
+  it('alerts about violations that no displayed field can show', async () => {
+    mockUsePlatformTemplateComponentConfiguration.mockReturnValue({
+      data: {
+        componentKey: 'qovery-operator',
+        fields: operatorComponent.fields,
+        requirements: [],
+        componentBindings: [],
+        violations: [{ fieldPath: 'unknownSetting', code: 'INVALID', message: 'The template is invalid.' }],
+      },
+    })
+    const { userEvent } = renderWithProviders(
+      <SelfManagedClusterCreationFlow organizationId="org-123" onClose={mockOnClose} />
+    )
+
+    await goToOperatorStep(userEvent)
+
+    expect(screen.getByRole('alert')).toHaveTextContent('The template is invalid.')
+  })
+
+  it('validates the Operator configuration against the template', async () => {
+    mockUsePlatformTemplateComponentConfiguration.mockReturnValue({
+      data: {
+        componentKey: 'qovery-operator',
+        fields: operatorComponent.fields,
+        requirements: [],
+        componentBindings: [],
+        violations: [{ fieldPath: 'nodeSelectorValue', code: 'PATTERN', message: 'Invalid label value.' }],
+      },
+    })
+    const { userEvent } = renderWithProviders(
+      <SelfManagedClusterCreationFlow organizationId="org-123" onClose={mockOnClose} />
+    )
+
+    await goToOperatorStep(userEvent)
+
+    expect(screen.getByText('Invalid label value.')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Continue' })).toBeDisabled()
+    expect(mockUsePlatformTemplateComponentConfiguration).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        templateKey: 'qovery-cluster-v0',
+        componentKey: 'qovery-operator',
+        clusterMode: 'CUSTOMER_MANAGED',
+        cloudProvider: 'AWS',
+        request: {
+          profileConfig: { nodeSelectorKey: 'eks.amazonaws.com/nodegroup' },
+          clusterInputs: {},
+          componentOutputs: {},
+        },
+      })
+    )
+  })
+
+  it.each([
+    ['has not been checked yet', { data: undefined, isFetching: true, isError: false }],
+    ['is being checked again', { data: { componentKey: 'qovery-operator', violations: [] }, isFetching: true }],
+    ['could not be checked', { data: undefined, isFetching: false, isError: true }],
+    [
+      'is waiting for the network',
+      { data: { componentKey: 'qovery-operator', violations: [], requirements: [] }, isPaused: true },
+    ],
+    [
+      'only has the result of previous values',
+      { data: { componentKey: 'qovery-operator', violations: [], requirements: [] }, isPreviousData: true },
+    ],
+    [
+      'misses a required input',
+      {
+        data: {
+          componentKey: 'qovery-operator',
+          violations: [],
+          requirements: [{ key: 'clusterName', source: 'CLUSTER_INPUT', status: 'MISSING' }],
+        },
+        isFetching: false,
+        isError: false,
+      },
+    ],
+  ])('cannot continue while the Operator configuration %s', async (_, preview) => {
+    mockUsePlatformTemplateComponentConfiguration.mockReturnValue(preview)
+    const { userEvent } = renderWithProviders(
+      <SelfManagedClusterCreationFlow organizationId="org-123" onClose={mockOnClose} />
+    )
+
+    await goToOperatorStep(userEvent)
+
+    expect(screen.getByRole('button', { name: 'Continue' })).toBeDisabled()
+  })
+
+  it('creates the cluster with the Operator configuration', async () => {
+    const { userEvent } = renderWithProviders(
+      <SelfManagedClusterCreationFlow organizationId="org-123" onClose={mockOnClose} />
+    )
+
+    await goToOperatorStep(userEvent)
+    await userEvent.type(screen.getByLabelText('Node group label value'), 'stable')
+    await userEvent.click(screen.getByRole('button', { name: 'Continue' }))
+
+    expect(mockCreateSelfManagedCluster).toHaveBeenCalledWith({
+      organizationId: 'org-123',
+      clusterRequest: {
+        name: 'my-cluster',
+        production: true,
+        provider: 'AWS',
+        region: 'eu-west-3',
+        credentials: { id: 'credential-id' },
+        platform: {
+          managedConfig: {
+            'qovery-operator': { nodeSelectorKey: 'eks.amazonaws.com/nodegroup', nodeSelectorValue: 'stable' },
+          },
+        },
+      },
+    })
+    expect(await screen.findByRole('heading', { name: 'Install Qovery Operator' })).toBeInTheDocument()
+  })
+
+  it('sends no Operator configuration when it is left untouched', async () => {
+    const { userEvent } = renderWithProviders(
+      <SelfManagedClusterCreationFlow organizationId="org-123" onClose={mockOnClose} />
+    )
+
+    await goToOperatorStep(userEvent)
+    await userEvent.click(screen.getByRole('button', { name: 'Continue' }))
+
+    expect(mockCreateSelfManagedCluster).toHaveBeenCalledWith({
+      organizationId: 'org-123',
+      clusterRequest: expect.objectContaining({ platform: {} }),
+    })
+  })
+
+  it('creates the cluster with the default platform template when none is listed', async () => {
+    mockUsePlatformTemplates.mockReturnValue({
+      data: [],
+      isLoading: false,
+      isSuccess: true,
+      isError: false,
+      refetch: jest.fn(),
+    })
+    mockUsePlatformTemplateComponentConfiguration.mockReturnValue({
+      data: undefined,
+      isFetching: false,
+      isError: false,
+    })
+    const { userEvent } = renderWithProviders(
+      <SelfManagedClusterCreationFlow organizationId="org-123" onClose={mockOnClose} />
+    )
+
+    await goToOperatorStep(userEvent)
+
+    expect(screen.getByText('Qovery installs the Operator with its default configuration.')).toBeInTheDocument()
+    await userEvent.click(screen.getByRole('button', { name: 'Continue' }))
+
+    expect(mockCreateSelfManagedCluster).toHaveBeenCalledWith({
+      organizationId: 'org-123',
+      clusterRequest: expect.objectContaining({ platform: {} }),
+    })
+  })
+
+  it('waits for the platform templates before creating the cluster', async () => {
+    mockUsePlatformTemplates.mockReturnValue({
+      data: undefined,
+      isLoading: true,
+      isSuccess: false,
+      isError: false,
+      refetch: jest.fn(),
+    })
+    const { userEvent } = renderWithProviders(
+      <SelfManagedClusterCreationFlow organizationId="org-123" onClose={mockOnClose} />
+    )
+
+    await goToOperatorStep(userEvent)
+
+    expect(screen.getByRole('button', { name: 'Continue' })).toBeDisabled()
+  })
+
+  it('lets a failed Operator configuration check be retried', async () => {
+    const refetchPreview = jest.fn()
+    mockUsePlatformTemplateComponentConfiguration.mockReturnValue({
+      data: undefined,
+      isFetching: false,
+      isError: true,
+      refetch: refetchPreview,
+    })
+    const { userEvent } = renderWithProviders(
+      <SelfManagedClusterCreationFlow organizationId="org-123" onClose={mockOnClose} />
+    )
+
+    await goToOperatorStep(userEvent)
+
+    expect(screen.getByText('The Operator configuration could not be checked.')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Continue' })).toBeDisabled()
+
+    await userEvent.click(screen.getByRole('button', { name: 'Try again' }))
+
+    expect(refetchPreview).toHaveBeenCalled()
+  })
+
+  it('does not create the cluster when the platform templates cannot be loaded', async () => {
+    const refetchTemplates = jest.fn()
+    mockUsePlatformTemplates.mockReturnValue({
+      data: undefined,
+      isLoading: false,
+      isSuccess: false,
+      isError: true,
+      refetch: refetchTemplates,
+    })
+    const { userEvent } = renderWithProviders(
+      <SelfManagedClusterCreationFlow organizationId="org-123" onClose={mockOnClose} />
+    )
+
+    await goToOperatorStep(userEvent)
+
+    expect(screen.getByText('The Operator configuration could not be loaded.')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Continue' })).toBeDisabled()
+
+    await userEvent.click(screen.getByRole('button', { name: 'Try again' }))
+
+    expect(refetchTemplates).toHaveBeenCalled()
+    expect(mockCreateSelfManagedCluster).not.toHaveBeenCalled()
+  })
+
+  it('cannot be cancelled or left while the cluster is being created', async () => {
+    mockUseCreateSelfManagedCluster.mockReturnValue({ mutateAsync: mockCreateSelfManagedCluster, isLoading: true })
+    const { userEvent } = renderWithProviders(
+      <SelfManagedClusterCreationFlow organizationId="org-123" onClose={mockOnClose} />
+    )
+
+    await goToOperatorStep(userEvent)
+
+    expect(screen.getByRole('button', { name: 'Cancel' })).toBeDisabled()
+    expect(screen.getByRole('button', { name: 'Back' })).toBeDisabled()
+  })
+
+  it('stays on the Operator step when the creation fails', async () => {
+    mockCreateSelfManagedCluster.mockRejectedValue(new Error('Invalid credentials'))
+    const { userEvent } = renderWithProviders(
+      <SelfManagedClusterCreationFlow organizationId="org-123" onClose={mockOnClose} />
+    )
+
+    await goToOperatorStep(userEvent)
+    await userEvent.click(screen.getByRole('button', { name: 'Continue' }))
+
+    expect(mockCreateSelfManagedCluster).toHaveBeenCalled()
+    expect(screen.getByRole('heading', { name: 'Configure Qovery Operator' })).toBeInTheDocument()
+  })
+
+  it('gives the Operator bootstrap values file and Helm command', async () => {
+    const { userEvent } = renderWithProviders(
+      <SelfManagedClusterCreationFlow organizationId="org-123" onClose={mockOnClose} />
+    )
+
+    await goToOperatorStep(userEvent)
+    await userEvent.click(screen.getByRole('button', { name: 'Continue' }))
+    await screen.findByRole('heading', { name: 'Install Qovery Operator' })
+
+    expect(mockUseClusterOperatorBootstrap).toHaveBeenLastCalledWith({
+      organizationId: 'org-123',
+      clusterId: 'cluster-id',
+    })
+    expect(screen.getByText(HELM_COMMAND)).toBeInTheDocument()
+    expect(screen.queryByText('secret: values')).not.toBeInTheDocument()
+
+    await userEvent.click(screen.getByRole('button', { name: 'Download values.yaml' }))
+
+    expect(mockDownload).toHaveBeenCalledWith('secret: values', 'values.yaml', 'text/yaml')
+    expect(mockUseClusterOperatorStatus).toHaveBeenLastCalledWith(
+      expect.objectContaining({ organizationId: 'org-123', clusterId: 'cluster-id', refetchInterval: 5000 })
+    )
+  })
+
+  it('offers to retry when the bootstrap cannot be generated', async () => {
+    const refetch = jest.fn()
+    mockUseClusterOperatorBootstrap.mockReturnValue({ data: undefined, isLoading: false, isError: true, refetch })
+    const { userEvent } = renderWithProviders(
+      <SelfManagedClusterCreationFlow organizationId="org-123" onClose={mockOnClose} />
+    )
+
+    await goToOperatorStep(userEvent)
+    await userEvent.click(screen.getByRole('button', { name: 'Continue' }))
+    await userEvent.click(await screen.findByRole('button', { name: 'Try again' }))
+
+    expect(refetch).toHaveBeenCalled()
+  })
+
+  it('redirects only once while the parent keeps re-rendering', async () => {
+    function ClusterCreationWithParentState() {
+      const [, setCloseCount] = useState(0)
+      return (
+        <SelfManagedClusterCreationFlow
+          organizationId="org-123"
+          onClose={() => {
+            mockOnClose()
+            setCloseCount((count) => count + 1)
+          }}
+        />
+      )
+    }
+    const { userEvent } = renderWithProviders(<ClusterCreationWithParentState />)
+
+    await goToOperatorStep(userEvent)
+    mockUseClusterOperatorStatus.mockReturnValue({ data: { operator_connected: true } })
+    await userEvent.click(screen.getByRole('button', { name: 'Continue' }))
+
+    await waitFor(() => expect(mockNavigate).toHaveBeenCalled())
+    expect(mockOnClose).toHaveBeenCalledTimes(1)
+    expect(mockNavigate).toHaveBeenCalledTimes(1)
+  })
+
+  it('redirects to the cluster profile once the Operator is connected', async () => {
+    const { userEvent } = renderWithProviders(
+      <SelfManagedClusterCreationFlow organizationId="org-123" onClose={mockOnClose} />
+    )
+
+    await goToOperatorStep(userEvent)
+    mockUseClusterOperatorStatus.mockReturnValue({ data: { operator_connected: true } })
+    await userEvent.click(screen.getByRole('button', { name: 'Continue' }))
+
+    await waitFor(() =>
+      expect(mockNavigate).toHaveBeenCalledWith({
+        to: '/organization/$organizationId/cluster/$clusterId/profile',
+        params: { organizationId: 'org-123', clusterId: 'cluster-id' },
+      })
+    )
+    expect(mockOnClose).toHaveBeenCalled()
+  })
+})
diff --git a/libs/domains/clusters/feature/src/lib/self-managed-cluster-creation/self-managed-cluster-creation-flow.tsx b/libs/domains/clusters/feature/src/lib/self-managed-cluster-creation/self-managed-cluster-creation-flow.tsx
new file mode 100644
index 00000000000..c8c1872c661
--- /dev/null
+++ b/libs/domains/clusters/feature/src/lib/self-managed-cluster-creation/self-managed-cluster-creation-flow.tsx
@@ -0,0 +1,605 @@
+import { useNavigate } from '@tanstack/react-router'
+import download from 'downloadjs'
+import equal from 'fast-deep-equal'
+import {
+  type ClusterRegion,
+  type PlatformComponentConfigurationResolutionResponse,
+  type PlatformTemplateComponentResponse,
+  type SelfManagedClusterPlatformSelection,
+} from 'qovery-typescript-axios'
+import { type PropsWithChildren, type ReactNode, useEffect, useMemo, useRef, useState } from 'react'
+import { Controller, FormProvider, useForm } from 'react-hook-form'
+import { useCloudProviders } from '@qovery/domains/cloud-providers/feature'
+import {
+  Button,
+  Callout,
+  CopyButton,
+  ExternalLink,
+  Heading,
+  Icon,
+  IconFlag,
+  InputSelect,
+  InputText,
+  InputToggle,
+  LoaderSpinner,
+  Section,
+} from '@qovery/shared/ui'
+import { useDebounce } from '@qovery/shared/util-hooks'
+import { ClusterCredentialsSettings } from '../cluster-credentials-settings/cluster-credentials-settings'
+import { ProfileConfigurationField } from '../cluster-profile/profile-configuration-field'
+import { useClusterOperatorBootstrap } from '../hooks/use-cluster-operator-bootstrap/use-cluster-operator-bootstrap'
+import { useClusterOperatorStatus } from '../hooks/use-cluster-operator-status/use-cluster-operator-status'
+import { useCreateSelfManagedCluster } from '../hooks/use-create-self-managed-cluster/use-create-self-managed-cluster'
+import { usePlatformTemplateComponentConfiguration } from '../hooks/use-platform-template-component-configuration/use-platform-template-component-configuration'
+import { usePlatformTemplates } from '../hooks/use-platform-templates/use-platform-templates'
+import {
+  applyPlatformConfigurationDefaults,
+  getUnmappedViolations,
+  isPlatformConfigurationReady,
+  isSupportedPlatformField,
+  omitEmptyValues,
+} from '../utils/platform-configuration-utils'
+
+const OPERATOR_STATUS_POLL_INTERVAL = 5000
+const INSTALLATION_DOCUMENTATION_URL = 'https://www.qovery.com/docs/getting-started/installation/kubernetes'
+const SUPPORT_URL = 'https://www.qovery.com/contact'
+
+export type SelfManagedClusterCreationStep = 'general' | 'operator' | 'install'
+
+export const SELF_MANAGED_CLUSTER_CREATION_MODAL_WIDTH: Record<SelfManagedClusterCreationStep, number> = {
+  general: 676,
+  operator: 676,
+  install: 474,
+}
+
+interface GeneralValues {
+  name: string
+  production: boolean
+  credentials: string
+  region: string
+}
+
+type OperatorValues = Record<string, unknown>
+
+// The bootstrap Helm command reads its values from this file name.
+export const OPERATOR_VALUES_FILE_NAME = 'values.yaml'
+
+// Only the local demo builder needs the Operator CPU architecture.
+const DEMO_ONLY_OPERATOR_FIELD_KEYS = ['cpuArchitectures']
+
+export function getOperatorFields(
+  component: PlatformTemplateComponentResponse | null | undefined,
+  preview?: PlatformComponentConfigurationResolutionResponse
+) {
+  // The resolved fields carry per-item fields for arrays: prefer them once available.
+  return (preview?.fields ?? component?.fields ?? []).filter(
+    (field) => isSupportedPlatformField(field) && !DEMO_ONLY_OPERATOR_FIELD_KEYS.includes(field.key)
+  )
+}
+
+function StepLayout({
+  title,
+  description,
+  children,
+  footer,
+}: PropsWithChildren<{
+  title: string
+  description: ReactNode
+  footer?: ReactNode
+}>) {
+  return (
+    <Section className="gap-6 pt-5">
+      <div className="flex flex-col gap-1 px-5">
+        <Heading className="text-2xl">{title}</Heading>
+        <p className="text-sm text-neutral-subtle">{description}</p>
+      </div>
+      {children}
+      {footer ? (
+        <div className="flex items-center justify-between gap-2 border-t border-neutral bg-surface-neutral px-5 py-4">
+          {footer}
+        </div>
+      ) : null}
+    </Section>
+  )
+}
+
+function StepSection({ title, action, children }: PropsWithChildren<{ title: string; action?: ReactNode }>) {
+  return (
+    <Section className="gap-3 px-5">
+      <div className="flex items-center justify-between gap-2">
+        <Heading className="text-sm">{title}</Heading>
+        {action}
+      </div>
+      {children}
+    </Section>
+  )
+}
+
+function GeneralStep({
+  values,
+  onCancel,
+  onContinue,
+}: {
+  values?: GeneralValues
+  onCancel: () => void
+  onContinue: (values: GeneralValues) => void
+}) {
+  const methods = useForm<GeneralValues>({
+    mode: 'onChange',
+    defaultValues: values ?? { name: '', production: true, credentials: '', region: '' },
+  })
+  const { data: cloudProviders = [] } = useCloudProviders()
+  const regionOptions = useMemo(
+    () =>
+      cloudProviders
+        .find(({ short_name }) => short_name === 'AWS')
+        ?.regions?.map((region: ClusterRegion) => {
+          const label = `${region.city} (${region.name})`
+          return { label, value: region.name, icon: <IconFlag code={region.country_code} /> }
+        }) ?? [],
+    [cloudProviders]
+  )
+
+  return (
+    <FormProvider {...methods}>
+      <form onSubmit={methods.handleSubmit(onContinue)}>
+        <StepLayout
+          title="Connect AWS cluster"
+          description="Fill in your cluster base information to connect it with Qovery"
+          footer={
+            <>
+              <span />
+              <div className="flex gap-2">
+                <Button type="button" variant="plain" color="neutral" size="lg" onClick={onCancel}>
+                  Cancel
+                </Button>
+                <Button type="submit" size="lg" disabled={!methods.formState.isValid}>
+                  Continue
+                </Button>
+              </div>
+            </>
+          }
+        >
+          <StepSection title="General information">
+            <Controller
+              name="name"
+              control={methods.control}
+              rules={{ validate: (value) => Boolean(value.trim()) || 'Please enter a cluster name.' }}
+              render={({ field, fieldState: { error } }) => (
+                <InputText
+                  name={field.name}
+                  label="Cluster name"
+                  value={field.value}
+                  onChange={field.onChange}
+                  error={error?.message}
+                  autoFocus
+                />
+              )}
+            />
+            <Controller
+              name="production"
+              control={methods.control}
+              render={({ field }) => (
+                <InputToggle small title="Production cluster" value={field.value} onChange={field.onChange} />
+              )}
+            />
+          </StepSection>
+          <StepSection title="Deployment target">
+            <ClusterCredentialsSettings cloudProvider="AWS" isSetting={false} />
+            <Controller
+              name="region"
+              control={methods.control}
+              rules={{ required: 'Please select a region.' }}
+              render={({ field, fieldState: { error } }) => (
+                <InputSelect
+                  label="Region"
+                  options={regionOptions}
+                  value={field.value}
+                  onChange={field.onChange}
+                  error={error?.message}
+                  isSearchable
+                  portal
+                />
+              )}
+            />
+          </StepSection>
+        </StepLayout>
+      </form>
+    </FormProvider>
+  )
+}
+
+function OperatorStep({
+  component,
+  preview,
+  values,
+  isCreating,
+  canContinue,
+  isTemplatesError,
+  isPreviewError,
+  onRetryTemplates,
+  onRetryPreview,
+  onChange,
+  onBack,
+  onCancel,
+  onContinue,
+}: {
+  component?: PlatformTemplateComponentResponse | null
+  preview?: PlatformComponentConfigurationResolutionResponse
+  values: OperatorValues
+  isCreating: boolean
+  canContinue: boolean
+  isTemplatesError: boolean
+  isPreviewError: boolean
+  onRetryTemplates: () => void
+  onRetryPreview: () => void
+  onChange: (values: OperatorValues) => void
+  onBack: () => void
+  onCancel: () => void
+  onContinue: () => void
+}) {
+  const fields = getOperatorFields(component, preview)
+  const violations = preview?.violations ?? []
+  const unmappedViolations = getUnmappedViolations(violations, fields, values, preview?.requirements ?? [])
+  const loadingError = isTemplatesError
+    ? { message: 'The Operator configuration could not be loaded.', onRetry: onRetryTemplates }
+    : isPreviewError
+      ? { message: 'The Operator configuration could not be checked.', onRetry: onRetryPreview }
+      : undefined
+
+  return (
+    <form
+      onSubmit={(event) => {
+        event.preventDefault()
+        onContinue()
+      }}
+    >
+      <StepLayout
+        title="Configure Qovery Operator"
+        description={
+          <>
+            The Operator runs on your cluster and installs the Qovery stack. Leave as is unless you want it pinned to a
+            specific node group. Consult our{' '}
+            <ExternalLink href={INSTALLATION_DOCUMENTATION_URL} size="sm" withIcon={false} className="underline">
+              documentation
+            </ExternalLink>{' '}
+            for more details.
+          </>
+        }
+        footer={
+          <>
+            <Button type="button" variant="outline" color="neutral" size="lg" disabled={isCreating} onClick={onBack}>
+              Back
+            </Button>
+            <div className="flex gap-2">
+              <Button type="button" variant="plain" color="neutral" size="lg" disabled={isCreating} onClick={onCancel}>
+                Cancel
+              </Button>
+              <Button type="submit" size="lg" loading={isCreating} disabled={!canContinue}>
+                Continue
+              </Button>
+            </div>
+          </>
+        }
+      >
+        {loadingError ? (
+          <Callout.Root color="red" className="mx-5">
+            <Callout.Icon>
+              <Icon iconName="circle-exclamation" iconStyle="regular" />
+            </Callout.Icon>
+            <Callout.Text>
+              <Callout.TextDescription>{loadingError.message}</Callout.TextDescription>
+              <Button
+                type="button"
+                variant="outline"
+                color="neutral"
+                size="sm"
+                className="mt-2"
+                onClick={loadingError.onRetry}
+              >
+                Try again
+              </Button>
+            </Callout.Text>
+          </Callout.Root>
+        ) : null}
+        {unmappedViolations.length ? (
+          <Callout.Root color="red" className="mx-5" role="alert">
+            <Callout.Icon>
+              <Icon iconName="circle-exclamation" iconStyle="regular" />
+            </Callout.Icon>
+            <Callout.Text>
+              <ul className="flex flex-col gap-1">
+                {unmappedViolations.map((violation) => (
+                  <li key={`${violation.fieldPath}-${violation.code}`}>{violation.message}</li>
+                ))}
+              </ul>
+            </Callout.Text>
+          </Callout.Root>
+        ) : null}
+        {fields.length ? (
+          <StepSection title="Configuration">
+            <div className="overflow-hidden rounded-md border border-neutral [&>*:last-child]:border-b-0">
+              {fields.map((field) => (
+                <ProfileConfigurationField
+                  key={field.key}
+                  field={field}
+                  path={field.key}
+                  value={values[field.key]}
+                  violations={violations}
+                  onChange={(value) => {
+                    const { [field.key]: _, ...otherValues } = values
+                    onChange(value === undefined ? otherValues : { ...otherValues, [field.key]: value })
+                  }}
+                />
+              ))}
+            </div>
+          </StepSection>
+        ) : (
+          <p className="px-5 text-sm text-neutral-subtle">
+            Qovery installs the Operator with its default configuration.
+          </p>
+        )}
+      </StepLayout>
+    </form>
+  )
+}
+
+function InstallStep({
+  organizationId,
+  clusterId,
+  onInstalled,
+}: {
+  organizationId: string
+  clusterId: string
+  onInstalled: () => void
+}) {
+  const {
+    data: bootstrap,
+    isLoading: isBootstrapLoading,
+    isError: isBootstrapError,
+    refetch: refetchBootstrap,
+  } = useClusterOperatorBootstrap({ organizationId, clusterId })
+  const { data: operatorStatus } = useClusterOperatorStatus({
+    organizationId,
+    clusterId,
+    refetchInterval: OPERATOR_STATUS_POLL_INTERVAL,
+  })
+
+  const hasNotifiedInstallRef = useRef(false)
+
+  useEffect(() => {
+    if (!operatorStatus?.operator_connected || hasNotifiedInstallRef.current) return
+    hasNotifiedInstallRef.current = true
+    onInstalled()
+  }, [onInstalled, operatorStatus?.operator_connected])
+
+  return (
+    <Section className="gap-4 p-5">
+      <Heading className="text-2xl">Install Qovery Operator</Heading>
+      {isBootstrapLoading ? (
+        <div className="flex justify-center py-6">
+          <LoaderSpinner />
+        </div>
+      ) : isBootstrapError || !bootstrap ? (
+        <Callout.Root color="red">
+          <Callout.Icon>
+            <Icon iconName="circle-exclamation" iconStyle="regular" />
+          </Callout.Icon>
+          <Callout.Text>
+            <Callout.TextDescription>The installation instructions could not be generated.</Callout.TextDescription>
+            <Button
+              type="button"
+              variant="outline"
+              color="neutral"
+              size="sm"
+              className="mt-2"
+              onClick={() => refetchBootstrap()}
+            >
+              Try again
+            </Button>
+          </Callout.Text>
+        </Callout.Root>
+      ) : (
+        <ol className="flex flex-col gap-4 text-sm text-neutral">
+          <li className="flex flex-col gap-2">
+            <p>
+              <span className="font-medium">1. Download the Helm values file.</span>{' '}
+              <span className="text-neutral-subtle">
+                It contains the cluster credential: keep it private and delete it once installed.
+              </span>
+            </p>
+            <Button
+              type="button"
+              variant="outline"
+              color="neutral"
+              size="md"
+              className="self-start"
+              onClick={() => download(bootstrap.values_yaml, OPERATOR_VALUES_FILE_NAME, 'text/yaml')}
+            >
+              <Icon iconName="download" iconStyle="regular" />
+              Download {OPERATOR_VALUES_FILE_NAME}
+            </Button>
+          </li>
+          <li className="flex flex-col gap-2">
+            <p>
+              <span className="font-medium">2. Run this command</span>{' '}
+              <span className="text-neutral-subtle">
+                from the folder of the values file, with a kubeconfig pointing to your cluster.
+              </span>
+            </p>
+            <div className="flex items-center gap-3 rounded-md border border-neutral bg-surface-neutral-subtle p-3">
+              <code className="min-w-0 flex-1 break-all text-sm text-neutral">{bootstrap.helm_command}</code>
+              <CopyButton content={bootstrap.helm_command} />
+            </div>
+          </li>
+        </ol>
+      )}
+      <Callout.Root color="sky">
+        <Callout.Icon>
+          <Icon iconName="circle-info" iconStyle="regular" />
+        </Callout.Icon>
+        <Callout.Text>
+          Do not close this tab. The Operator will connect to Qovery shortly once its installation completes. You'll be
+          redirected to the cluster profile settings once the Operator is installed.
+        </Callout.Text>
+      </Callout.Root>
+      <p className="text-ssm text-neutral-subtle">
+        Having trouble installing? Check our{' '}
+        <ExternalLink href={INSTALLATION_DOCUMENTATION_URL} size="ssm" withIcon={false} className="underline">
+          documentation
+        </ExternalLink>{' '}
+        or{' '}
+        <ExternalLink href={SUPPORT_URL} size="ssm" withIcon={false} className="underline">
+          contact support
+        </ExternalLink>
+      </p>
+    </Section>
+  )
+}
+
+export interface SelfManagedClusterCreationFlowProps {
+  organizationId: string
+  onStepChange?: (step: SelfManagedClusterCreationStep) => void
+  onClose: () => void
+}
+
+export function SelfManagedClusterCreationFlow({
+  organizationId,
+  onStepChange,
+  onClose,
+}: SelfManagedClusterCreationFlowProps) {
+  const navigate = useNavigate()
+  const [step, setStep] = useState<SelfManagedClusterCreationStep>('general')
+  const [generalValues, setGeneralValues] = useState<GeneralValues>()
+  // Unset until edited, so the defaults of the template loaded meanwhile still apply.
+  const [operatorValues, setOperatorValues] = useState<OperatorValues>()
+  const [clusterId, setClusterId] = useState<string>()
+  const {
+    data: templates,
+    isSuccess: isTemplatesSuccess,
+    isError: isTemplatesError,
+    refetch: refetchTemplates,
+  } = usePlatformTemplates({
+    organizationId,
+    clusterMode: 'CUSTOMER_MANAGED',
+    cloudProvider: 'AWS',
+  })
+  const template = templates?.[0]
+  const operatorComponent = template?.bootstrapComponent
+  const resolvedOperatorValues = useMemo(
+    () => operatorValues ?? applyPlatformConfigurationDefaults(getOperatorFields(operatorComponent), {}),
+    [operatorComponent, operatorValues]
+  )
+  const operatorConfig = useMemo(() => omitEmptyValues(resolvedOperatorValues), [resolvedOperatorValues])
+  const { mutateAsync: createSelfManagedCluster, isLoading: isCreating } = useCreateSelfManagedCluster()
+  const debouncedOperatorConfig = useDebounce(operatorConfig, 300)
+  const {
+    data: operatorPreview,
+    isFetching: isOperatorPreviewFetching,
+    isPaused: isOperatorPreviewPaused,
+    isPreviousData: isOperatorPreviewOutdated,
+    isError: isOperatorPreviewError,
+    refetch: refetchOperatorPreview,
+  } = usePlatformTemplateComponentConfiguration({
+    organizationId,
+    templateKey: template?.key,
+    templateVersion: template?.version,
+    componentKey: operatorComponent?.key,
+    clusterMode: 'CUSTOMER_MANAGED',
+    cloudProvider: 'AWS',
+    request: { profileConfig: debouncedOperatorConfig, clusterInputs: {}, componentOutputs: {} },
+    enabled: step === 'operator',
+  })
+  const isOperatorConfigurationValid =
+    !operatorComponent ||
+    (equal(debouncedOperatorConfig, operatorConfig) &&
+      !isOperatorPreviewFetching &&
+      !isOperatorPreviewPaused &&
+      !isOperatorPreviewOutdated &&
+      !isOperatorPreviewError &&
+      operatorPreview?.componentKey === operatorComponent.key &&
+      isPlatformConfigurationReady(operatorPreview.violations, operatorPreview.requirements))
+
+  const goToStep = (nextStep: SelfManagedClusterCreationStep) => {
+    setStep(nextStep)
+    onStepChange?.(nextStep)
+  }
+
+  // q-core selects the self-managed platform template release: only the edited Operator values are sent.
+  const getPlatformSelection = (): SelfManagedClusterPlatformSelection =>
+    operatorComponent && operatorValues !== undefined && Object.keys(operatorConfig).length
+      ? { managedConfig: { [operatorComponent.key]: operatorConfig } }
+      : {}
+
+  const createCluster = async () => {
+    if (!generalValues) return
+
+    try {
+      const cluster = await createSelfManagedCluster({
+        organizationId,
+        clusterRequest: {
+          name: generalValues.name.trim(),
+          production: generalValues.production,
+          provider: 'AWS',
+          region: generalValues.region,
+          credentials: { id: generalValues.credentials },
+          platform: getPlatformSelection(),
+        },
+      })
+      setClusterId(cluster.id)
+      goToStep('install')
+    } catch {
+      // Errors are notified by the mutation.
+    }
+  }
+
+  if (step === 'install' && clusterId) {
+    return (
+      <InstallStep
+        organizationId={organizationId}
+        clusterId={clusterId}
+        onInstalled={() => {
+          onClose()
+          navigate({
+            to: '/organization/$organizationId/cluster/$clusterId/profile',
+            params: { organizationId, clusterId },
+          })
+        }}
+      />
+    )
+  }
+
+  if (step === 'operator') {
+    return (
+      <OperatorStep
+        component={operatorComponent}
+        preview={operatorPreview}
+        values={resolvedOperatorValues}
+        isCreating={isCreating}
+        // An empty template list lets q-core pick the default; a failed request must not create the cluster blindly.
+        canContinue={isTemplatesSuccess && isOperatorConfigurationValid}
+        isTemplatesError={isTemplatesError}
+        isPreviewError={isOperatorPreviewError}
+        onRetryTemplates={() => refetchTemplates()}
+        onRetryPreview={() => refetchOperatorPreview()}
+        onChange={setOperatorValues}
+        onBack={() => goToStep('general')}
+        onCancel={onClose}
+        onContinue={createCluster}
+      />
+    )
+  }
+
+  return (
+    <GeneralStep
+      values={generalValues}
+      onCancel={onClose}
+      onContinue={(values) => {
+        setGeneralValues(values)
+        goToStep('operator')
+      }}
+    />
+  )
+}
+
+export default SelfManagedClusterCreationFlow
diff --git a/libs/domains/clusters/feature/src/lib/utils/platform-configuration-utils.spec.ts b/libs/domains/clusters/feature/src/lib/utils/platform-configuration-utils.spec.ts
new file mode 100644
index 00000000000..698255dc138
--- /dev/null
+++ b/libs/domains/clusters/feature/src/lib/utils/platform-configuration-utils.spec.ts
@@ -0,0 +1,109 @@
+import { type FieldSchemaResponse } from 'qovery-typescript-axios'
+import {
+  applyPlatformConfigurationDefaults,
+  getFieldViolation,
+  getPlatformFieldPaths,
+  getUnmappedViolations,
+  isPlatformConfigurationReady,
+  omitEmptyValues,
+  toPlatformCloudVendor,
+  toPlatformClusterMode,
+  toPlatformConfigurationValue,
+  updateComponentValue,
+} from './platform-configuration-utils'
+
+const scalarField = (key: string, type: 'string' | 'number' | 'bool', defaultValue: string | null = null) =>
+  ({ key, label: key, type, required: false, sensitive: false, defaultValue, constraints: {} }) as FieldSchemaResponse
+
+const listenersField = {
+  key: 'listeners',
+  label: 'Listeners',
+  type: 'array',
+  required: false,
+  sensitive: false,
+  constraints: {},
+  items: { type: 'object', fields: [scalarField('port', 'number')] },
+  itemFields: [],
+} as unknown as FieldSchemaResponse
+
+const tlsField = {
+  key: 'tls',
+  label: 'TLS',
+  type: 'object',
+  required: false,
+  sensitive: false,
+  constraints: {},
+  fields: [scalarField('secret', 'string')],
+} as unknown as FieldSchemaResponse
+
+describe('platform configuration utils', () => {
+  it('maps clusters to the platform vocabulary', () => {
+    expect(toPlatformClusterMode('MANAGED')).toBe('QOVERY_MANAGED')
+    expect(toPlatformClusterMode('SELF_MANAGED')).toBe('CUSTOMER_MANAGED')
+    expect(toPlatformClusterMode('PARTIALLY_MANAGED')).toBeUndefined()
+    expect(toPlatformCloudVendor('ON_PREMISE')).toBe('UNKNOWN')
+    expect(toPlatformCloudVendor('AWS')).toBe('AWS')
+    expect(toPlatformCloudVendor(undefined)).toBeUndefined()
+  })
+
+  it('fills scalar defaults without overriding values', () => {
+    const fields = [scalarField('retention', 'number', '12'), scalarField('enabled', 'bool', 'true')]
+
+    expect(applyPlatformConfigurationDefaults(fields, {})).toEqual({ retention: 12, enabled: true })
+    expect(applyPlatformConfigurationDefaults(fields, { retention: '' })).toEqual({ retention: '', enabled: true })
+  })
+
+  it('converts number inputs, keeping cleared and invalid values', () => {
+    const numberField = { type: 'number' as const }
+
+    expect(toPlatformConfigurationValue(numberField, '24')).toBe(24)
+    expect(toPlatformConfigurationValue(numberField, ' ')).toBe('')
+    expect(toPlatformConfigurationValue(numberField, '1e')).toBe('1e')
+    expect(toPlatformConfigurationValue(numberField, true)).toBeUndefined()
+    expect(toPlatformConfigurationValue({ type: 'string' }, 'value')).toBe('value')
+  })
+
+  it('omits empty values while keeping array rows in place', () => {
+    expect(
+      omitEmptyValues({ name: '', port: undefined, tls: { secret: '' }, listeners: [{ port: '' }, { port: 80 }] })
+    ).toEqual({ tls: {}, listeners: [{}, { port: 80 }] })
+  })
+
+  it('sets and unsets a component value', () => {
+    const values = updateComponentValue({ loki: { retention: 12 } }, 'loki', 'storage', 's3')
+
+    expect(values).toEqual({ loki: { retention: 12, storage: 's3' } })
+    expect(updateComponentValue(values, 'loki', 'retention', undefined)).toEqual({ loki: { storage: 's3' } })
+  })
+
+  it('lists the paths of nested fields and array rows', () => {
+    expect(getPlatformFieldPaths([tlsField, listenersField], { listeners: [{ port: 80 }] })).toEqual([
+      'tls',
+      'tls.secret',
+      'listeners',
+      'listeners[0]',
+      'listeners[0].port',
+    ])
+  })
+
+  it('maps violations to fields and cluster inputs', () => {
+    const violations = [
+      { fieldPath: 'tls.secret', code: 'REQUIRED', message: 'Secret is required.' },
+      { fieldPath: 'clusterInputs.domain', code: 'REQUIRED', message: 'Domain is required.' },
+      { fieldPath: 'unknown', code: 'INVALID', message: 'Something is wrong.' },
+    ]
+    const requirements = [{ key: 'domain', status: 'MISSING' }] as never
+
+    expect(getFieldViolation(violations, 'tls.secret')).toBe('Secret is required.')
+    expect(getFieldViolation(violations, 'domain', 'clusterInputs')).toBe('Domain is required.')
+    expect(getUnmappedViolations(violations, [tlsField], {}, requirements)).toEqual([violations[2]])
+  })
+
+  it('is ready without violations and with every requirement ready', () => {
+    expect(isPlatformConfigurationReady([], [{ key: 'domain', status: 'READY' }] as never)).toBe(true)
+    expect(isPlatformConfigurationReady([], [{ key: 'domain', status: 'MISSING' }] as never)).toBe(false)
+    expect(isPlatformConfigurationReady([{ fieldPath: 'storage', code: 'REQUIRED', message: 'Required.' }], [])).toBe(
+      false
+    )
+  })
+})
diff --git a/libs/domains/clusters/feature/src/lib/utils/platform-configuration-utils.ts b/libs/domains/clusters/feature/src/lib/utils/platform-configuration-utils.ts
new file mode 100644
index 00000000000..e1bdba05a8f
--- /dev/null
+++ b/libs/domains/clusters/feature/src/lib/utils/platform-configuration-utils.ts
@@ -0,0 +1,270 @@
+import {
+  type CloudProviderEnum,
+  type CloudVendorEnum,
+  type FieldSchemaConstraintsResponse,
+  type FieldSchemaResponse,
+  type KubernetesEnum,
+  type PlatformCloudVendor,
+  type PlatformClusterMode,
+  type PlatformComponentConfigurationResolutionResponse,
+  type PlatformComponentConfigurationViolationResponse,
+  type PlatformComponentInputRequirementResponse,
+  type PlatformTemplateSummaryResponse,
+} from 'qovery-typescript-axios'
+import { match } from 'ts-pattern'
+import { type SchemaField, type SchemaFieldValue, getSchemaFieldValue } from '@qovery/shared/schema-fields/feature'
+
+export function toPlatformCloudVendor(
+  cloudProvider: CloudProviderEnum | CloudVendorEnum | undefined
+): PlatformCloudVendor | undefined {
+  return match(cloudProvider)
+    .with(undefined, () => undefined)
+    .with('ON_PREMISE', () => 'UNKNOWN' as const)
+    .otherwise((provider) => provider)
+}
+
+export function toPlatformClusterMode(kubernetes: KubernetesEnum | undefined): PlatformClusterMode | undefined {
+  return match(kubernetes)
+    .with('MANAGED', () => 'QOVERY_MANAGED' as const)
+    .with('SELF_MANAGED', () => 'CUSTOMER_MANAGED' as const)
+    .otherwise(() => undefined)
+}
+
+export type PlatformScalarField = Extract<FieldSchemaResponse, { type: 'string' | 'number' | 'bool' }>
+
+export type PlatformFieldDescriptor = {
+  key: string
+  label: string
+  type: 'string' | 'number' | 'bool'
+  description?: string | null
+  sensitive: boolean
+  required: boolean
+  readOnly?: boolean
+  constraints: FieldSchemaConstraintsResponse
+  defaultValue?: string | null
+}
+
+// The API types requirement `type` as a plain string; unknown types fall back to a text input.
+export function toPlatformFieldDescriptor(
+  requirement: PlatformComponentInputRequirementResponse
+): PlatformFieldDescriptor {
+  return match(requirement.type)
+    .with('string', 'number', 'bool', (type) => ({ ...requirement, type }))
+    .otherwise(() => ({ ...requirement, type: 'string' as const }))
+}
+
+export type PlatformArrayField = Extract<FieldSchemaResponse, { type: 'array' }>
+
+export type PlatformObjectField = Extract<FieldSchemaResponse, { type: 'object' }>
+
+export function isPlatformScalarField(field: FieldSchemaResponse): field is PlatformScalarField {
+  return field.type === 'string' || field.type === 'number' || field.type === 'bool'
+}
+
+// Read-only fields display the value resolved by the API (`resolvedValues`), never the draft's.
+export function isPlatformReadOnlyField(field: FieldSchemaResponse): field is PlatformScalarField {
+  return isPlatformScalarField(field) && Boolean(field.readOnly)
+}
+
+export function isPlatformArrayField(field: FieldSchemaResponse): field is PlatformArrayField {
+  return field.type === 'array'
+}
+
+export function isPlatformObjectField(field: FieldSchemaResponse): field is PlatformObjectField {
+  return field.type === 'object'
+}
+
+export function isSupportedPlatformField(field: FieldSchemaResponse) {
+  return isPlatformScalarField(field) || isPlatformArrayField(field) || isPlatformObjectField(field)
+}
+
+export function isPlainObject(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value)
+}
+
+export function getPlatformFieldPath(parentPath: string | undefined, fieldKey: string) {
+  return parentPath ? `${parentPath}.${fieldKey}` : fieldKey
+}
+
+export function getPlatformArrayItemPath(arrayPath: string, index: number) {
+  return `${arrayPath}[${index}]`
+}
+
+// Prefer the row-specific descriptors evaluated by the resolver; items.fields
+// covers rows added locally that have not been resolved yet.
+export function getPlatformArrayItemFields(field: PlatformArrayField, index: number): FieldSchemaResponse[] {
+  if (field.items.type !== 'object') return []
+  return field.itemFields?.[index] ?? field.items.fields
+}
+
+export function toPlatformArrayItemDescriptor(field: PlatformArrayField): PlatformFieldDescriptor {
+  return {
+    key: 'value',
+    label: field.label,
+    type: field.items.type === 'object' ? 'string' : field.items.type,
+    sensitive: field.sensitive,
+    required: true,
+    constraints: field.items.type === 'object' ? {} : field.items.constraints,
+  }
+}
+
+export function getPlatformFieldPaths(
+  fields: FieldSchemaResponse[],
+  values: Record<string, unknown>,
+  parentPath?: string
+): string[] {
+  return fields.flatMap((field) => {
+    const path = getPlatformFieldPath(parentPath, field.key)
+    const value = values[field.key]
+
+    if (isPlatformObjectField(field)) {
+      return [path, ...getPlatformFieldPaths(field.fields, isPlainObject(value) ? value : {}, path)]
+    }
+
+    if (isPlatformArrayField(field)) {
+      const items = Array.isArray(value) ? value : []
+      return [
+        path,
+        ...items.flatMap((item, index) => {
+          const itemPath = getPlatformArrayItemPath(path, index)
+          return [
+            itemPath,
+            ...getPlatformFieldPaths(
+              getPlatformArrayItemFields(field, index),
+              isPlainObject(item) ? item : {},
+              itemPath
+            ),
+          ]
+        }),
+      ]
+    }
+
+    return isPlatformScalarField(field) ? [path] : []
+  })
+}
+
+export function getTemplateId(template: Pick<PlatformTemplateSummaryResponse, 'key' | 'version'>) {
+  return `${template.key}@${template.version}`
+}
+
+export function findPlatformComponent(template: PlatformTemplateSummaryResponse, componentKey?: string) {
+  return template.layers.flatMap((layer) => layer.components).find((component) => component.key === componentKey)
+}
+
+export function getCurrentPlatformConfigurationPreview(
+  preview: PlatformComponentConfigurationResolutionResponse | undefined,
+  componentKey: string | undefined,
+  isPreviewPending: boolean
+) {
+  if (isPreviewPending || preview?.componentKey !== componentKey) return undefined
+  return preview
+}
+
+export function toSchemaField(field: PlatformFieldDescriptor): SchemaField {
+  return {
+    key: field.key,
+    label: field.label,
+    type: field.type,
+    description: field.description ?? undefined,
+    required: field.required,
+    sensitive: field.sensitive,
+    defaultValue: field.defaultValue ?? undefined,
+    allowedValues: field.constraints.allowedValues ?? undefined,
+    pattern: field.constraints.pattern ?? undefined,
+    minLength: field.constraints.minLength ?? undefined,
+    maxLength: field.constraints.maxLength ?? undefined,
+    min: field.constraints.min ?? undefined,
+    max: field.constraints.max ?? undefined,
+  }
+}
+
+export function applyPlatformConfigurationDefaults(
+  fields: FieldSchemaResponse[],
+  values: Record<string, unknown>
+): Record<string, unknown> {
+  const defaultValues = Object.fromEntries(
+    fields.filter(isPlatformScalarField).flatMap((field) => {
+      const defaultValue = getSchemaFieldValue(field, undefined)
+      if (defaultValue === undefined) return []
+
+      return [[field.key, toPlatformConfigurationValue(field, defaultValue)]]
+    })
+  )
+
+  return { ...defaultValues, ...values }
+}
+
+export function toPlatformConfigurationValue(field: Pick<PlatformFieldDescriptor, 'type'>, value: SchemaFieldValue) {
+  if (field.type !== 'number') return value
+  if (typeof value !== 'string') return undefined
+  // Keep the empty string: it marks a field the user explicitly cleared, so
+  // applyPlatformConfigurationDefaults must not resurrect the schema default.
+  if (value.trim() === '') return ''
+
+  const numberValue = Number(value)
+  return Number.isFinite(numberValue) ? numberValue : value
+}
+
+function omitEmptyNestedValues(value: unknown): unknown {
+  // Array rows are kept in place so their indexes keep matching violation paths.
+  if (Array.isArray(value)) return value.map(omitEmptyNestedValues)
+  if (isPlainObject(value)) return omitEmptyValues(value)
+  return value
+}
+
+export function omitEmptyValues(values: Record<string, unknown>): Record<string, unknown> {
+  return Object.fromEntries(
+    Object.entries(values).flatMap(([key, value]) =>
+      value === '' || value === undefined ? [] : [[key, omitEmptyNestedValues(value)]]
+    )
+  )
+}
+
+export function updateComponentValue<T>(
+  valuesByComponent: Record<string, Record<string, T>>,
+  componentKey: string,
+  fieldKey: string,
+  value: T | undefined
+) {
+  const componentValues = { ...valuesByComponent[componentKey] }
+
+  if (value === undefined) {
+    delete componentValues[fieldKey]
+  } else {
+    componentValues[fieldKey] = value
+  }
+
+  return {
+    ...valuesByComponent,
+    [componentKey]: componentValues,
+  }
+}
+
+export function getFieldViolation(
+  violations: PlatformComponentConfigurationViolationResponse[],
+  fieldPath: string,
+  source?: 'clusterInputs'
+) {
+  const expectedPath = source ? `${source}.${fieldPath}` : fieldPath
+  return violations.find((violation) => violation.fieldPath === expectedPath)?.message
+}
+
+export function getUnmappedViolations(
+  violations: PlatformComponentConfigurationViolationResponse[],
+  fields: FieldSchemaResponse[],
+  values: Record<string, unknown>,
+  requirements: PlatformComponentInputRequirementResponse[]
+) {
+  const mappedPaths = new Set([
+    ...getPlatformFieldPaths(fields, values),
+    ...requirements.map((requirement) => `clusterInputs.${requirement.key}`),
+  ])
+  return violations.filter((violation) => !mappedPaths.has(violation.fieldPath))
+}
+
+export function isPlatformConfigurationReady(
+  violations: PlatformComponentConfigurationViolationResponse[],
+  requirements: PlatformComponentInputRequirementResponse[]
+) {
+  return violations.length === 0 && requirements.every((requirement) => requirement.status === 'READY')
+}
diff --git a/libs/domains/service-helm/feature/src/lib/values-override-arguments-setting/__snapshots__/values-override-arguments-setting.spec.tsx.snap b/libs/domains/service-helm/feature/src/lib/values-override-arguments-setting/__snapshots__/values-override-arguments-setting.spec.tsx.snap
index 665e73c69db..607be7aaf94 100644
--- a/libs/domains/service-helm/feature/src/lib/values-override-arguments-setting/__snapshots__/values-override-arguments-setting.spec.tsx.snap
+++ b/libs/domains/service-helm/feature/src/lib/values-override-arguments-setting/__snapshots__/values-override-arguments-setting.spec.tsx.snap
@@ -111,7 +111,7 @@ exports[`ValuesOverrideArgumentsSetting should match snapshot 1`] = `
                 </select>
                 <i
                   aria-hidden="true"
-                  class="fa-regular fa-chevron-down pointer-events-none absolute right-3 top-2.5 translate-y-0.5 text-xs leading-3 text-neutral-subtle group-hover:text-neutral"
+                  class="fa-regular fa-chevron-down pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-xs leading-3 text-neutral-subtle group-hover:text-neutral"
                 />
               </div>
               <div
@@ -185,7 +185,7 @@ exports[`ValuesOverrideArgumentsSetting should match snapshot 1`] = `
                 </select>
                 <i
                   aria-hidden="true"
-                  class="fa-regular fa-chevron-down pointer-events-none absolute right-3 top-2.5 translate-y-0.5 text-xs leading-3 text-neutral-subtle group-hover:text-neutral"
+                  class="fa-regular fa-chevron-down pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-xs leading-3 text-neutral-subtle group-hover:text-neutral"
                 />
               </div>
               <div
@@ -268,7 +268,7 @@ exports[`ValuesOverrideArgumentsSetting should match snapshot 1`] = `
                 </select>
                 <i
                   aria-hidden="true"
-                  class="fa-regular fa-chevron-down pointer-events-none absolute right-3 top-2.5 translate-y-0.5 text-xs leading-3 text-neutral-subtle group-hover:text-neutral"
+                  class="fa-regular fa-chevron-down pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-xs leading-3 text-neutral-subtle group-hover:text-neutral"
                 />
               </div>
               <div
@@ -428,7 +428,7 @@ exports[`ValuesOverrideArgumentsSetting should match snapshot for the v5-compati
                 </select>
                 <i
                   aria-hidden="true"
-                  class="fa-regular fa-chevron-down pointer-events-none absolute right-3 top-2.5 translate-y-0.5 text-xs leading-3 text-neutral-subtle group-hover:text-neutral"
+                  class="fa-regular fa-chevron-down pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-xs leading-3 text-neutral-subtle group-hover:text-neutral"
                 />
               </div>
               <div
diff --git a/libs/domains/services/feature/src/lib/service-overview/instance-metrics/__snapshots__/instance-metrics.spec.tsx.snap b/libs/domains/services/feature/src/lib/service-overview/instance-metrics/__snapshots__/instance-metrics.spec.tsx.snap
index f2d2a5a167c..c54253f5f9e 100644
--- a/libs/domains/services/feature/src/lib/service-overview/instance-metrics/__snapshots__/instance-metrics.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/service-overview/instance-metrics/__snapshots__/instance-metrics.spec.tsx.snap
@@ -226,7 +226,7 @@ exports[`InstanceMetrics should match snapshot with data 1`] = `
 exports[`InstanceMetrics should match snapshot with empty data 1`] = `
 <div>
   <div
-    class="flex h-56 flex-col items-center justify-center gap-4 rounded-lg border border-neutral p-10 text-center text-sm text-neutral-subtle bg-surface-neutral"
+    class="rounded-lg border text-sm flex h-56 flex-col items-center justify-center gap-4 p-10 text-center border-neutral text-neutral-subtle bg-surface-neutral"
   >
     <span
       class="relative inline-flex h-10 min-h-10 w-10 min-w-10 items-center justify-center"
@@ -274,7 +274,7 @@ exports[`InstanceMetrics should match snapshot with empty data 1`] = `
 exports[`InstanceMetrics should match snapshot with null data 1`] = `
 <div>
   <div
-    class="flex h-56 flex-col items-center justify-center gap-4 rounded-lg border border-neutral p-10 text-center text-sm text-neutral-subtle bg-surface-neutral"
+    class="rounded-lg border text-sm flex h-56 flex-col items-center justify-center gap-4 p-10 text-center border-neutral text-neutral-subtle bg-surface-neutral"
   >
     <span
       class="relative inline-flex h-10 min-h-10 w-10 min-w-10 items-center justify-center"
diff --git a/libs/shared/schema-fields/feature/.babelrc b/libs/shared/schema-fields/feature/.babelrc
new file mode 100644
index 00000000000..1ea870ead41
--- /dev/null
+++ b/libs/shared/schema-fields/feature/.babelrc
@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}
diff --git a/libs/shared/schema-fields/feature/.eslintrc.json b/libs/shared/schema-fields/feature/.eslintrc.json
new file mode 100644
index 00000000000..772a43d2783
--- /dev/null
+++ b/libs/shared/schema-fields/feature/.eslintrc.json
@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nx/react", "../../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}
diff --git a/libs/shared/schema-fields/feature/README.md b/libs/shared/schema-fields/feature/README.md
new file mode 100644
index 00000000000..fc1235d381c
--- /dev/null
+++ b/libs/shared/schema-fields/feature/README.md
@@ -0,0 +1,7 @@
+# shared-schema-fields-feature
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test shared-schema-fields-feature` to execute the unit tests via [Jest](https://jestjs.io).
diff --git a/libs/shared/schema-fields/feature/jest.config.ts b/libs/shared/schema-fields/feature/jest.config.ts
new file mode 100644
index 00000000000..1d303f38219
--- /dev/null
+++ b/libs/shared/schema-fields/feature/jest.config.ts
@@ -0,0 +1,11 @@
+/* eslint-disable */
+module.exports = {
+  displayName: 'shared-schema-fields-feature',
+  preset: '../../../../jest.preset.js',
+  transform: {
+    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nx/react/plugins/jest',
+    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/react/babel'] }],
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  coverageDirectory: '../../../../coverage/libs/shared/schema-fields/feature',
+}
diff --git a/libs/shared/schema-fields/feature/project.json b/libs/shared/schema-fields/feature/project.json
new file mode 100644
index 00000000000..9d00a288f3e
--- /dev/null
+++ b/libs/shared/schema-fields/feature/project.json
@@ -0,0 +1,9 @@
+{
+  "name": "shared-schema-fields-feature",
+  "$schema": "../../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/shared/schema-fields/feature/src",
+  "projectType": "library",
+  "tags": ["scope:shared", "type:feature"],
+  "// targets": "to see all targets run: nx show project shared-schema-fields-feature --web",
+  "targets": {}
+}
diff --git a/libs/shared/schema-fields/feature/src/index.ts b/libs/shared/schema-fields/feature/src/index.ts
new file mode 100644
index 00000000000..9f3cae8a6d5
--- /dev/null
+++ b/libs/shared/schema-fields/feature/src/index.ts
@@ -0,0 +1,2 @@
+export * from './lib/schema-field/schema-field'
+export * from './lib/schema-field-input/schema-field-input'
diff --git a/libs/shared/schema-fields/feature/src/lib/schema-field-input/schema-field-input.spec.tsx b/libs/shared/schema-fields/feature/src/lib/schema-field-input/schema-field-input.spec.tsx
new file mode 100644
index 00000000000..c0659c31e65
--- /dev/null
+++ b/libs/shared/schema-fields/feature/src/lib/schema-field-input/schema-field-input.spec.tsx
@@ -0,0 +1,267 @@
+import { useState } from 'react'
+import { renderWithProviders, screen } from '@qovery/shared/util-tests'
+import { SchemaFieldInput, type SchemaFieldInputProps } from './schema-field-input'
+
+const defaultProps: SchemaFieldInputProps = {
+  field: {
+    key: 'retention',
+    label: 'Retention',
+    type: 'number',
+    description: 'Retention period in weeks.',
+  },
+  onChange: jest.fn(),
+  value: '12',
+}
+
+describe('SchemaFieldInput', () => {
+  beforeEach(() => {
+    jest.useFakeTimers()
+  })
+
+  afterEach(() => {
+    jest.useRealTimers()
+  })
+
+  it('renders a number field with its validation error in place of the description', () => {
+    renderWithProviders(<SchemaFieldInput {...defaultProps} error="Retention is invalid." />)
+
+    expect(screen.getByRole('spinbutton', { name: 'Retention' })).toHaveValue(12)
+    expect(screen.getByText('Retention is invalid.')).toBeInTheDocument()
+    expect(screen.queryByText('Retention period in weeks.')).not.toBeInTheDocument()
+  })
+
+  it('renders row layout with its description beside the control', () => {
+    renderWithProviders(<SchemaFieldInput {...defaultProps} layout="row" />)
+
+    expect(screen.getByRole('spinbutton', { name: 'Retention' })).toHaveValue(12)
+    expect(screen.getByText('Retention period in weeks.')).toBeInTheDocument()
+    expect(screen.getByText('Retention period in weeks.')).not.toHaveAttribute('data-state')
+  })
+
+  it('clamps long row descriptions and exposes their full content in a tooltip', async () => {
+    const description =
+      "CPU/memory budget applied to the active Loki workloads. CHART_DEFAULT keeps the chart's own behavior, while presets apply Qovery's versioned budgets. Budgets are not capacity guarantees. Every resource field may be changed at any time; an update recompiles the Helm values and rolls the workloads. Preset budgets apply versioned resource values."
+
+    const { userEvent } = renderWithProviders(
+      <SchemaFieldInput
+        {...defaultProps}
+        field={{ key: 'resource-profile', label: 'Resource profile', type: 'string', description }}
+        layout="row"
+      />
+    )
+
+    const descriptionElement = screen.getByTestId('truncate-text')
+    expect(descriptionElement.parentElement).toHaveClass('line-clamp-3')
+    expect(descriptionElement).toHaveTextContent(/CPU\/memory budget applied/)
+    expect(descriptionElement.innerHTML).toContain('\n')
+
+    await userEvent.hover(descriptionElement)
+
+    expect(await screen.findByRole('tooltip')).toHaveTextContent(description)
+  })
+
+  it('shows the whole row description while searching', () => {
+    renderWithProviders(<SchemaFieldInput {...defaultProps} layout="row" highlight="weeks" />)
+
+    const match = screen.getByText('weeks', { selector: 'mark' })
+    expect(match.closest('p')).not.toHaveClass('line-clamp-3')
+  })
+
+  it('names the row checkbox after its field', async () => {
+    const onChange = jest.fn()
+    const { userEvent } = renderWithProviders(
+      <SchemaFieldInput
+        {...defaultProps}
+        booleanControl="checkbox"
+        field={{ key: 'enabled', label: 'Enabled', type: 'bool' }}
+        layout="row"
+        value={false}
+        onChange={onChange}
+      />
+    )
+
+    await userEvent.click(screen.getByRole('checkbox', { name: 'Enabled' }))
+
+    expect(onChange).toHaveBeenCalledWith(true)
+  })
+
+  it('keeps a boolean control aligned to the right when showing an error', () => {
+    const error = 'Loki high availability requires object storage.'
+
+    renderWithProviders(
+      <SchemaFieldInput
+        {...defaultProps}
+        error={error}
+        field={{ key: 'high-availability', label: 'High availability', type: 'bool' }}
+        layout="row"
+        value={false}
+      />
+    )
+
+    expect(screen.getByRole('switch', { name: 'High availability' })).toBeInTheDocument()
+    expect(screen.getByText(error)).toBeInTheDocument()
+    expect(screen.getByTestId('input-toggle').parentElement).toHaveClass('items-end')
+  })
+
+  it.each([
+    ['a toggle in the row layout', { type: 'bool' }, 'row', 'switch', undefined],
+    ['a select in the row layout', { type: 'string', allowedValues: ['small', 'large'] }, 'row', 'combobox', undefined],
+    ['a toggle in the card layout', { type: 'bool' }, 'card', 'switch', undefined],
+    ['a checkbox in the card layout', { type: 'bool' }, 'card', 'checkbox', 'checkbox'],
+  ] as const)('ties the error to %s', (_, fieldType, layout, role, booleanControl) => {
+    renderWithProviders(
+      <SchemaFieldInput
+        {...defaultProps}
+        error="This value is not allowed."
+        field={{ key: 'profile', label: 'Profile', ...fieldType }}
+        layout={layout}
+        booleanControl={booleanControl}
+        value={fieldType.type === 'bool' ? false : 'small'}
+      />
+    )
+
+    const control = screen.getByRole(role, { name: 'Profile' })
+    expect(control).toHaveAttribute('aria-invalid', 'true')
+    expect(control).toHaveAccessibleDescription('This value is not allowed.')
+  })
+
+  it('does not keep a stale option once the value is cleared', async () => {
+    const field = { key: 'profile', label: 'Profile', type: 'string', allowedValues: ['small', 'large'] } as const
+    function ClearableSelect() {
+      const [value, setValue] = useState('large')
+      return (
+        <>
+          <SchemaFieldInput {...defaultProps} field={field} layout="row" value={value} />
+          <button type="button" onClick={() => setValue('')}>
+            Clear
+          </button>
+        </>
+      )
+    }
+    const { userEvent } = renderWithProviders(<ClearableSelect />)
+    expect(screen.getByRole('combobox', { name: 'Profile' })).toHaveValue('large')
+
+    await userEvent.click(screen.getByRole('button', { name: 'Clear' }))
+
+    expect(screen.getByRole('combobox', { name: 'Profile' })).not.toHaveValue('large')
+  })
+
+  it('keeps error ids unique when two inputs share a field key', () => {
+    const field = { key: 'enabled', label: 'Enabled', type: 'bool' } as const
+    renderWithProviders(
+      <>
+        <SchemaFieldInput {...defaultProps} field={{ ...field, label: 'First' }} layout="row" error="First error" />
+        <SchemaFieldInput {...defaultProps} field={{ ...field, label: 'Second' }} layout="row" error="Second error" />
+      </>
+    )
+
+    expect(screen.getByRole('switch', { name: 'First' })).toHaveAccessibleDescription('First error')
+    expect(screen.getByRole('switch', { name: 'Second' })).toHaveAccessibleDescription('Second error')
+  })
+
+  it('does not flag a control without error', () => {
+    renderWithProviders(
+      <SchemaFieldInput
+        {...defaultProps}
+        field={{ key: 'high-availability', label: 'High availability', type: 'bool' }}
+        layout="row"
+        value={false}
+      />
+    )
+
+    const control = screen.getByRole('switch', { name: 'High availability' })
+    expect(control).not.toHaveAttribute('aria-invalid')
+    expect(control).not.toHaveAttribute('aria-describedby')
+  })
+
+  it('renders sensitive values as passwords', () => {
+    renderWithProviders(
+      <SchemaFieldInput
+        {...defaultProps}
+        field={{ key: 'token', label: 'Token', type: 'string', sensitive: true }}
+        value="secret"
+      />
+    )
+
+    expect(screen.getByLabelText('Token')).toHaveAttribute('type', 'password')
+  })
+
+  it.each(['card', 'row'] as const)('masks sensitive number values in the %s layout', (layout) => {
+    renderWithProviders(
+      <SchemaFieldInput
+        {...defaultProps}
+        field={{ key: 'pin', label: 'Pin', type: 'number', sensitive: true }}
+        layout={layout}
+        value="1234"
+      />
+    )
+
+    expect(screen.getByLabelText('Pin')).toHaveAttribute('type', 'password')
+  })
+
+  it('does not let a disabled sensitive field reveal its value', () => {
+    renderWithProviders(
+      <SchemaFieldInput
+        {...defaultProps}
+        field={{ key: 'token', label: 'Token', type: 'string', sensitive: true }}
+        layout="row"
+        value="secret"
+        disabled
+      />
+    )
+
+    expect(screen.getByLabelText('Token')).toHaveAttribute('type', 'password')
+    expect(screen.queryByTestId('show-password-button')).not.toBeInTheDocument()
+  })
+
+  it('keeps the toggle presentation as the default for boolean fields', async () => {
+    const onChange = jest.fn()
+    const { userEvent } = renderWithProviders(
+      <SchemaFieldInput
+        {...defaultProps}
+        field={{ key: 'enabled', label: 'Enabled', type: 'bool', description: 'Enable this option.' }}
+        value={false}
+        onChange={onChange}
+      />
+    )
+
+    await userEvent.click(screen.getByRole('switch', { name: 'Enabled' }))
+
+    expect(onChange).toHaveBeenCalledWith(true)
+    expect(screen.getByText('Enable this option.')).toBeInTheDocument()
+  })
+
+  it('renders a boolean control even when the field declares allowed values', async () => {
+    const onChange = jest.fn()
+    const { userEvent } = renderWithProviders(
+      <SchemaFieldInput
+        {...defaultProps}
+        field={{ key: 'enabled', label: 'Enabled', type: 'bool', allowedValues: ['true', 'false'] }}
+        value={true}
+        onChange={onChange}
+      />
+    )
+
+    await userEvent.click(screen.getByRole('switch', { name: 'Enabled' }))
+
+    expect(onChange).toHaveBeenCalledWith(false)
+  })
+
+  it('supports a checkbox presentation for boolean fields', async () => {
+    const onChange = jest.fn()
+    const { userEvent } = renderWithProviders(
+      <SchemaFieldInput
+        {...defaultProps}
+        booleanControl="checkbox"
+        field={{ key: 'enabled', label: 'Enabled', type: 'bool', description: 'Enable this option.' }}
+        value={false}
+        onChange={onChange}
+      />
+    )
+
+    await userEvent.click(screen.getByRole('checkbox', { name: 'Enabled' }))
+
+    expect(onChange).toHaveBeenCalledWith(true)
+    expect(screen.getByText('Enable this option.')).toBeInTheDocument()
+  })
+})
diff --git a/libs/shared/schema-fields/feature/src/lib/schema-field-input/schema-field-input.tsx b/libs/shared/schema-fields/feature/src/lib/schema-field-input/schema-field-input.tsx
new file mode 100644
index 00000000000..7d8177fefd9
--- /dev/null
+++ b/libs/shared/schema-fields/feature/src/lib/schema-field-input/schema-field-input.tsx
@@ -0,0 +1,301 @@
+import { useId } from 'react'
+import {
+  Checkbox,
+  HighlightText,
+  InputSelect,
+  InputSelectSmall,
+  InputText,
+  InputTextSmall,
+  InputToggle,
+  Truncate,
+} from '@qovery/shared/ui'
+import { type SchemaField, type SchemaFieldValue } from '../schema-field/schema-field'
+
+export interface SchemaFieldInputProps {
+  autoFocus?: boolean
+  booleanControl?: 'checkbox' | 'toggle'
+  disabled?: boolean
+  error?: string
+  field: SchemaField
+  // Search text highlighted in the label and description (row layout only).
+  highlight?: string
+  layout?: 'card' | 'row'
+  onChange: (value: SchemaFieldValue) => void
+  value: SchemaFieldValue | undefined
+}
+
+const DESCRIPTION_TRUNCATE_LIMIT = 200
+const formatDescription = (description: string) => description.replace(/([.!?])\s+/g, '$1\n')
+
+export function SchemaFieldDescription({ description, highlight }: { description: string; highlight?: string }) {
+  const formattedDescription = formatDescription(description)
+
+  return (
+    <p className={`${highlight?.trim() ? '' : 'line-clamp-3 '}whitespace-pre-line text-sm text-neutral-subtle`}>
+      {highlight?.trim() ? (
+        // Truncating could hide the match, so the full description is shown while searching.
+        <HighlightText text={formattedDescription} highlight={highlight} />
+      ) : (
+        <Truncate
+          text={formattedDescription}
+          truncateLimit={DESCRIPTION_TRUNCATE_LIMIT}
+          defaultTooltipLimit={formattedDescription.length + 1}
+          classNameContent="max-w-lg whitespace-pre-line"
+        />
+      )}
+    </p>
+  )
+}
+
+type SchemaFieldControlProps = Omit<SchemaFieldInputProps, 'layout'> & { errorId: string }
+
+function SchemaFieldControl({
+  autoFocus,
+  booleanControl = 'toggle',
+  disabled,
+  error,
+  errorId,
+  field,
+  onChange,
+  value,
+}: SchemaFieldControlProps) {
+  const errorProps = {
+    'aria-describedby': error ? errorId : undefined,
+    'aria-invalid': error ? true : undefined,
+  }
+
+  if (field.type === 'bool') {
+    if (booleanControl === 'checkbox') {
+      return (
+        <Checkbox
+          name={field.key}
+          id={field.key}
+          aria-label={field.label}
+          {...errorProps}
+          autoFocus={autoFocus}
+          disabled={disabled}
+          checked={typeof value === 'boolean' ? value : false}
+          onCheckedChange={(checked) => {
+            if (checked === 'indeterminate') return
+            onChange(checked)
+          }}
+        />
+      )
+    }
+
+    return (
+      <InputToggle
+        small
+        value={typeof value === 'boolean' ? value : false}
+        ariaLabel={field.label}
+        ariaDescribedBy={errorProps['aria-describedby']}
+        ariaInvalid={errorProps['aria-invalid']}
+        autoFocus={autoFocus}
+        disabled={disabled}
+        onChange={onChange}
+      />
+    )
+  }
+
+  if (field.allowedValues?.length) {
+    return (
+      <InputSelectSmall
+        // InputSelectSmall ignores an emptied defaultValue: remount so a cleared value does not keep its old option.
+        key={value ? 'selected' : 'empty'}
+        name={field.key}
+        ariaLabel={field.label}
+        ariaDescribedBy={errorProps['aria-describedby']}
+        ariaInvalid={errorProps['aria-invalid']}
+        inputClassName="h-10 disabled:bg-surface-neutral-component disabled:text-neutral-disabled disabled:hover:bg-surface-neutral-component"
+        disabled={disabled}
+        defaultValue={typeof value === 'string' ? value : ''}
+        items={field.allowedValues.map((allowedValue) => ({ label: allowedValue, value: allowedValue }))}
+        onChange={(nextValue) => {
+          if (nextValue !== undefined) onChange(nextValue)
+        }}
+      />
+    )
+  }
+
+  return (
+    <InputTextSmall
+      name={field.key}
+      id={field.key}
+      label={field.label}
+      className="w-full [&>div[data-testid=input].input--disabled]:bg-surface-neutral-component [&>div[data-testid=input]]:!h-10 [&>div[data-testid=input]]:!min-h-10"
+      inputClassName="px-3 disabled:text-neutral-disabled"
+      type={field.sensitive ? 'password' : field.type === 'number' ? 'number' : 'text'}
+      value={typeof value === 'string' ? value : ''}
+      error={error}
+      // A disabled field must not reveal its masked value.
+      hasShowPasswordButton={field.sensitive && !disabled}
+      autoFocus={autoFocus}
+      disabled={disabled}
+      onChange={(event) => onChange(event.currentTarget.value)}
+    />
+  )
+}
+
+function SchemaFieldInputRow({
+  autoFocus,
+  booleanControl,
+  disabled,
+  error,
+  errorId,
+  field,
+  highlight,
+  onChange,
+  value,
+}: SchemaFieldControlProps) {
+  return (
+    <div className="flex flex-col gap-4 border-b border-neutral p-4 md:flex-row md:items-start md:justify-between">
+      <div className="min-w-0 flex-1">
+        <p className="text-sm text-neutral">
+          <HighlightText text={field.label} highlight={highlight} />
+        </p>
+        {field.description ? <SchemaFieldDescription description={field.description} highlight={highlight} /> : null}
+      </div>
+      <div className={field.type === 'bool' ? 'flex shrink-0 flex-col items-end' : 'w-full shrink-0 md:w-[400px]'}>
+        <SchemaFieldControl
+          autoFocus={autoFocus}
+          disabled={disabled}
+          booleanControl={booleanControl}
+          error={error}
+          errorId={errorId}
+          field={field}
+          onChange={onChange}
+          value={value}
+        />
+        {error && (field.type === 'bool' || field.allowedValues?.length) ? (
+          <p id={errorId} className="mt-1 text-xs font-medium text-negative">
+            {error}
+          </p>
+        ) : null}
+      </div>
+    </div>
+  )
+}
+
+export function SchemaFieldInput({
+  autoFocus,
+  booleanControl = 'toggle',
+  disabled,
+  error,
+  field,
+  highlight,
+  layout = 'card',
+  onChange,
+  value,
+}: SchemaFieldInputProps) {
+  // Field keys can repeat on a page (nested fields, requirements): the error id must be unique per instance.
+  const errorId = useId()
+
+  if (layout === 'row') {
+    return (
+      <SchemaFieldInputRow
+        autoFocus={autoFocus}
+        disabled={disabled}
+        booleanControl={booleanControl}
+        error={error}
+        errorId={errorId}
+        field={field}
+        highlight={highlight}
+        onChange={onChange}
+        value={value}
+      />
+    )
+  }
+
+  // Bool fields take precedence over allowedValues: a bool field carrying allowed
+  // values must keep emitting booleans, not the allowed-value strings.
+  if (field.type === 'bool') {
+    if (booleanControl === 'toggle') {
+      return (
+        <div className="rounded-md border border-neutral bg-surface-neutral px-3 py-3">
+          <InputToggle
+            small
+            align="top"
+            name={field.key}
+            value={typeof value === 'boolean' ? value : false}
+            title={field.label}
+            description={field.description}
+            ariaLabel={field.label}
+            ariaDescribedBy={error ? errorId : undefined}
+            ariaInvalid={error ? true : undefined}
+            autoFocus={autoFocus}
+            disabled={disabled}
+            onChange={onChange}
+          />
+          {error ? (
+            <p id={errorId} className="mt-1 pl-11 text-xs text-negative">
+              {error}
+            </p>
+          ) : null}
+        </div>
+      )
+    }
+
+    return (
+      <div className="rounded-md border border-neutral bg-surface-neutral px-3 py-3">
+        <div className="flex items-center gap-2">
+          <Checkbox
+            name={field.key}
+            id={field.key}
+            aria-describedby={error ? errorId : undefined}
+            aria-invalid={error ? true : undefined}
+            autoFocus={autoFocus}
+            disabled={disabled}
+            checked={typeof value === 'boolean' ? value : false}
+            onCheckedChange={(checked) => {
+              if (checked === 'indeterminate') return
+              onChange(checked)
+            }}
+          />
+          <label htmlFor={field.key} className="cursor-pointer text-sm leading-5 text-neutral">
+            {field.label}
+          </label>
+        </div>
+        {field.description ? (
+          <p className="mt-1 pl-6 text-ssm leading-[18px] text-neutral-subtle">{field.description}</p>
+        ) : null}
+        {error ? (
+          <p id={errorId} className="mt-1 pl-6 text-xs text-negative">
+            {error}
+          </p>
+        ) : null}
+      </div>
+    )
+  }
+
+  if (field.allowedValues?.length) {
+    return (
+      <InputSelect
+        label={field.label}
+        value={typeof value === 'string' ? value : ''}
+        options={field.allowedValues.map((allowedValue) => ({ label: allowedValue, value: allowedValue }))}
+        hint={field.description}
+        error={error}
+        autoFocus={autoFocus}
+        disabled={disabled}
+        onChange={(value) => {
+          if (Array.isArray(value)) return
+          onChange(value)
+        }}
+      />
+    )
+  }
+
+  return (
+    <InputText
+      name={field.key}
+      label={field.label}
+      type={field.sensitive ? 'password' : field.type === 'number' ? 'number' : 'text'}
+      value={typeof value === 'string' ? value : ''}
+      error={error}
+      hint={field.description}
+      autoFocus={autoFocus}
+      disabled={disabled}
+      onChange={(event) => onChange(event.currentTarget.value)}
+    />
+  )
+}
diff --git a/libs/shared/schema-fields/feature/src/lib/schema-field/schema-field.spec.ts b/libs/shared/schema-fields/feature/src/lib/schema-field/schema-field.spec.ts
new file mode 100644
index 00000000000..6db6b7328fa
--- /dev/null
+++ b/libs/shared/schema-fields/feature/src/lib/schema-field/schema-field.spec.ts
@@ -0,0 +1,118 @@
+import {
+  formatSchemaFieldKey,
+  getSchemaFieldBooleanValue,
+  getSchemaFieldLengthValidationError,
+  getSchemaFieldNumberValidationError,
+  getSchemaFieldStringValue,
+  getSchemaFieldSummaryValue,
+  getSchemaFieldValidationError,
+  getSchemaFieldValue,
+  isSchemaFieldValid,
+  isSchemaFieldValueFulfilled,
+  isSchemaFieldValueMatchingPattern,
+} from './schema-field'
+
+describe('formatSchemaFieldKey', () => {
+  it('formats snake_case and kebab-case keys into a readable label', () => {
+    expect(formatSchemaFieldKey('database_name')).toBe('Database name')
+    expect(formatSchemaFieldKey('log-storage')).toBe('Log storage')
+    expect(formatSchemaFieldKey('CUSTOMER_MANAGED')).toBe('CUSTOMER MANAGED')
+  })
+})
+
+describe('schema field value coercion', () => {
+  it('returns string and boolean values with safe fallbacks', () => {
+    expect(getSchemaFieldStringValue('value')).toBe('value')
+    expect(getSchemaFieldStringValue(true)).toBe('')
+    expect(getSchemaFieldStringValue(undefined)).toBe('')
+    expect(getSchemaFieldBooleanValue(true)).toBe(true)
+    expect(getSchemaFieldBooleanValue('value')).toBe(false)
+    expect(getSchemaFieldBooleanValue(undefined)).toBe(false)
+  })
+
+  it('resolves values against the field default without losing their type', () => {
+    expect(getSchemaFieldValue({ type: 'number', defaultValue: '12' }, undefined)).toBe('12')
+    expect(getSchemaFieldValue({ type: 'number', defaultValue: '12' }, 24)).toBe('24')
+    expect(getSchemaFieldValue({ type: 'bool', defaultValue: 'true' }, undefined)).toBe(true)
+    expect(getSchemaFieldValue({ type: 'bool' }, 'false')).toBe(false)
+    expect(getSchemaFieldValue({ type: 'bool' }, undefined)).toBeUndefined()
+    expect(getSchemaFieldValue({ type: 'string', defaultValue: null }, undefined)).toBeUndefined()
+    expect(getSchemaFieldValue({ type: 'string' }, { unexpected: true })).toBeUndefined()
+  })
+})
+
+describe('schema field validation', () => {
+  it('treats booleans and non-blank strings as fulfilled', () => {
+    expect(isSchemaFieldValueFulfilled(false)).toBe(true)
+    expect(isSchemaFieldValueFulfilled('value')).toBe(true)
+    expect(isSchemaFieldValueFulfilled('   ')).toBe(false)
+    expect(isSchemaFieldValueFulfilled(undefined)).toBe(false)
+  })
+
+  it('matches values against the field pattern and ignores broken patterns', () => {
+    expect(isSchemaFieldValueMatchingPattern({ pattern: '^[a-z]+$' }, 'value')).toBe(true)
+    expect(isSchemaFieldValueMatchingPattern({ pattern: '^[a-z]+$' }, 'Value')).toBe(false)
+    expect(isSchemaFieldValueMatchingPattern({ pattern: '(' }, 'value')).toBe(true)
+    expect(isSchemaFieldValueMatchingPattern({}, 'value')).toBe(true)
+    expect(isSchemaFieldValueMatchingPattern({ pattern: '^[a-z]+$' }, undefined)).toBe(true)
+  })
+
+  it('reports length violations with a dedicated message', () => {
+    expect(getSchemaFieldLengthValidationError({ minLength: 2, maxLength: 4 }, 'value')).toBe(
+      'Value must be between 2 and 4 characters.'
+    )
+    expect(getSchemaFieldLengthValidationError({ minLength: 8 }, 'value')).toBe('Value must be at least 8 characters.')
+    expect(getSchemaFieldLengthValidationError({ maxLength: 3 }, 'value')).toBe('Value must be at most 3 characters.')
+    expect(getSchemaFieldLengthValidationError({ minLength: 2, maxLength: 8 }, 'value')).toBeUndefined()
+    expect(getSchemaFieldLengthValidationError({ minLength: 2 }, undefined)).toBeUndefined()
+  })
+
+  it('reports numeric violations with a dedicated message', () => {
+    expect(getSchemaFieldNumberValidationError({ type: 'number', min: 20, max: 65536 }, '19')).toBe(
+      'Value must be between 20 and 65536.'
+    )
+    expect(getSchemaFieldNumberValidationError({ type: 'number', min: 20 }, '19')).toBe('Value must be at least 20.')
+    expect(getSchemaFieldNumberValidationError({ type: 'number', max: 65536 }, '65537')).toBe(
+      'Value must be at most 65536.'
+    )
+    expect(getSchemaFieldNumberValidationError({ type: 'number' }, 'not-a-number')).toBe('Value must be a number.')
+    expect(getSchemaFieldNumberValidationError({ type: 'number', min: 20, max: 65536 }, '20')).toBeUndefined()
+    expect(getSchemaFieldNumberValidationError({ type: 'string', min: 20 }, '19')).toBeUndefined()
+  })
+
+  it('combines length and pattern checks into one validation error', () => {
+    expect(getSchemaFieldValidationError({ type: 'string', maxLength: 3, pattern: '^[a-z]+$' }, 'value')).toBe(
+      'Value must be at most 3 characters.'
+    )
+    expect(getSchemaFieldValidationError({ type: 'string', pattern: '^[a-z]+$' }, 'Value')).toBe(
+      'Value does not match the expected format.'
+    )
+    expect(getSchemaFieldValidationError({ type: 'string', pattern: '^[a-z]+$' }, 'value')).toBeUndefined()
+  })
+
+  it('rejects values outside the allowed values', () => {
+    const field = { type: 'string' as const, allowedValues: ['pvc', 's3'] }
+
+    expect(getSchemaFieldValidationError(field, 'gcs')).toBe('Please select one of the allowed values.')
+    expect(getSchemaFieldValidationError(field, 's3')).toBeUndefined()
+    expect(getSchemaFieldValidationError(field, '')).toBeUndefined()
+    expect(getSchemaFieldValidationError({ type: 'bool', allowedValues: ['true'] }, false)).toBeUndefined()
+  })
+
+  it('validates required state and constraints together', () => {
+    expect(isSchemaFieldValid({ type: 'string', required: true }, undefined)).toBe(false)
+    expect(isSchemaFieldValid({ type: 'string', required: true }, 'value')).toBe(true)
+    expect(isSchemaFieldValid({ type: 'string', required: false, pattern: '^[a-z]+$' }, 'Value')).toBe(false)
+    expect(isSchemaFieldValid({ type: 'string', required: false }, undefined)).toBe(true)
+  })
+})
+
+describe('getSchemaFieldSummaryValue', () => {
+  it('renders booleans as enabled state and masks sensitive values', () => {
+    expect(getSchemaFieldSummaryValue({}, true)).toBe('Enabled')
+    expect(getSchemaFieldSummaryValue({}, false)).toBe('Disabled')
+    expect(getSchemaFieldSummaryValue({ sensitive: true }, 'secret')).toBe('••••••••')
+    expect(getSchemaFieldSummaryValue({ sensitive: true }, '')).toBe('')
+    expect(getSchemaFieldSummaryValue({ sensitive: false }, 'value')).toBe('value')
+  })
+})
diff --git a/libs/shared/schema-fields/feature/src/lib/schema-field/schema-field.ts b/libs/shared/schema-fields/feature/src/lib/schema-field/schema-field.ts
new file mode 100644
index 00000000000..b631846e932
--- /dev/null
+++ b/libs/shared/schema-fields/feature/src/lib/schema-field/schema-field.ts
@@ -0,0 +1,149 @@
+export type SchemaFieldValue = string | boolean
+
+export type SchemaFieldType = 'string' | 'number' | 'bool'
+
+export interface SchemaField {
+  key: string
+  label: string
+  type: SchemaFieldType
+  description?: string
+  required?: boolean
+  sensitive?: boolean
+  defaultValue?: string
+  allowedValues?: string[]
+  pattern?: string
+  minLength?: number
+  maxLength?: number
+  min?: number
+  max?: number
+}
+
+export function formatSchemaFieldKey(key: string) {
+  const label = key.replace(/[-_]/g, ' ')
+  return `${label.charAt(0).toUpperCase()}${label.slice(1)}`
+}
+
+export function getSchemaFieldStringValue(value: SchemaFieldValue | undefined) {
+  return typeof value === 'string' ? value : ''
+}
+
+export function getSchemaFieldBooleanValue(value: SchemaFieldValue | undefined) {
+  return typeof value === 'boolean' ? value : false
+}
+
+export function getSchemaFieldValue(
+  field: Pick<SchemaField, 'type'> & { defaultValue?: string | null },
+  value: unknown
+): SchemaFieldValue | undefined {
+  const resolvedValue = value ?? field.defaultValue
+  if (field.type === 'bool') {
+    if (typeof resolvedValue === 'boolean') return resolvedValue
+    if (typeof resolvedValue === 'string') return resolvedValue === 'true'
+    return undefined
+  }
+
+  if (typeof resolvedValue === 'string' || typeof resolvedValue === 'number') return String(resolvedValue)
+  return undefined
+}
+
+export function isSchemaFieldValueFulfilled(value: SchemaFieldValue | undefined) {
+  if (typeof value === 'boolean') return true
+  return Boolean(value?.trim())
+}
+
+export function isSchemaFieldValueMatchingPattern(
+  field: Pick<SchemaField, 'pattern'>,
+  value: SchemaFieldValue | undefined
+) {
+  if (typeof value !== 'string' || !value || !field.pattern) return true
+
+  try {
+    return new RegExp(field.pattern).test(value)
+  } catch {
+    return true
+  }
+}
+
+export function getSchemaFieldLengthValidationError(
+  field: Pick<SchemaField, 'minLength' | 'maxLength'>,
+  value: SchemaFieldValue | undefined
+) {
+  if (typeof value !== 'string' || !value) return undefined
+
+  const { minLength, maxLength } = field
+  const hasMinLength = typeof minLength === 'number'
+  const hasMaxLength = typeof maxLength === 'number'
+
+  if (hasMinLength && hasMaxLength && (value.length < minLength || value.length > maxLength)) {
+    return `Value must be between ${minLength} and ${maxLength} characters.`
+  }
+
+  if (hasMinLength && value.length < minLength) return `Value must be at least ${minLength} characters.`
+  if (hasMaxLength && value.length > maxLength) return `Value must be at most ${maxLength} characters.`
+
+  return undefined
+}
+
+export function getSchemaFieldNumberValidationError(
+  field: Pick<SchemaField, 'type' | 'min' | 'max'>,
+  value: SchemaFieldValue | undefined
+) {
+  if (field.type !== 'number' || typeof value !== 'string' || !value.trim()) return undefined
+
+  const numberValue = Number(value)
+  if (!Number.isFinite(numberValue)) return 'Value must be a number.'
+
+  const { min, max } = field
+  const hasMin = typeof min === 'number'
+  const hasMax = typeof max === 'number'
+
+  if (hasMin && hasMax && (numberValue < min || numberValue > max)) {
+    return `Value must be between ${min} and ${max}.`
+  }
+
+  if (hasMin && numberValue < min) return `Value must be at least ${min}.`
+  if (hasMax && numberValue > max) return `Value must be at most ${max}.`
+
+  return undefined
+}
+
+export function getSchemaFieldValidationError(
+  field: Pick<SchemaField, 'type' | 'allowedValues' | 'pattern' | 'minLength' | 'maxLength' | 'min' | 'max'>,
+  value: SchemaFieldValue | undefined
+) {
+  if (
+    field.type !== 'bool' &&
+    field.allowedValues?.length &&
+    typeof value === 'string' &&
+    value !== '' &&
+    !field.allowedValues.includes(value)
+  ) {
+    return 'Please select one of the allowed values.'
+  }
+
+  const numberValidationError = getSchemaFieldNumberValidationError(field, value)
+  if (numberValidationError) return numberValidationError
+
+  const lengthValidationError = getSchemaFieldLengthValidationError(field, value)
+  if (lengthValidationError) return lengthValidationError
+
+  if (!isSchemaFieldValueMatchingPattern(field, value)) return 'Value does not match the expected format.'
+  return undefined
+}
+
+export function isSchemaFieldValid(
+  field: Pick<
+    SchemaField,
+    'required' | 'type' | 'allowedValues' | 'pattern' | 'minLength' | 'maxLength' | 'min' | 'max'
+  >,
+  value: SchemaFieldValue | undefined
+) {
+  if (field.required && !isSchemaFieldValueFulfilled(value)) return false
+  return !getSchemaFieldValidationError(field, value)
+}
+
+export function getSchemaFieldSummaryValue(field: Pick<SchemaField, 'sensitive'>, value: SchemaFieldValue | undefined) {
+  if (typeof value === 'boolean') return value ? 'Enabled' : 'Disabled'
+  if (field.sensitive && value) return '••••••••'
+  return value
+}
diff --git a/libs/shared/schema-fields/feature/tsconfig.json b/libs/shared/schema-fields/feature/tsconfig.json
new file mode 100644
index 00000000000..c88d07daddd
--- /dev/null
+++ b/libs/shared/schema-fields/feature/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../../../tsconfig.base.json"
+}
diff --git a/libs/shared/schema-fields/feature/tsconfig.lib.json b/libs/shared/schema-fields/feature/tsconfig.lib.json
new file mode 100644
index 00000000000..45b22973977
--- /dev/null
+++ b/libs/shared/schema-fields/feature/tsconfig.lib.json
@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../../dist/out-tsc",
+    "types": ["node", "@nx/react/typings/cssmodule.d.ts", "@nx/react/typings/image.d.ts"]
+  },
+  "exclude": [
+    "jest.config.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.js",
+    "src/**/*.test.js",
+    "src/**/*.spec.jsx",
+    "src/**/*.test.jsx"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}
diff --git a/libs/shared/schema-fields/feature/tsconfig.spec.json b/libs/shared/schema-fields/feature/tsconfig.spec.json
new file mode 100644
index 00000000000..1033686367b
--- /dev/null
+++ b/libs/shared/schema-fields/feature/tsconfig.spec.json
@@ -0,0 +1,20 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ]
+}
diff --git a/libs/shared/ui/src/index.ts b/libs/shared/ui/src/index.ts
index ecf5263903d..09b7226487c 100644
--- a/libs/shared/ui/src/index.ts
+++ b/libs/shared/ui/src/index.ts
@@ -91,6 +91,7 @@ export * from './lib/components/legacy-avatar/legacy-avatar'
 export * from './lib/components/avatar/avatar'
 export * from './lib/components/link/link'
 export * from './lib/components/truncate/truncate'
+export * from './lib/components/highlight-text/highlight-text'
 export * from './lib/components/inputs/input-select/input-select'
 export * from './lib/components/enable-box/enable-box'
 export * from './lib/components/badge-deployment-order/badge-deployment-order'
diff --git a/libs/shared/ui/src/lib/components/empty-state/__snapshots__/empty-state.spec.tsx.snap b/libs/shared/ui/src/lib/components/empty-state/__snapshots__/empty-state.spec.tsx.snap
index 58cb84cdff6..405dcf3d70c 100644
--- a/libs/shared/ui/src/lib/components/empty-state/__snapshots__/empty-state.spec.tsx.snap
+++ b/libs/shared/ui/src/lib/components/empty-state/__snapshots__/empty-state.spec.tsx.snap
@@ -4,7 +4,7 @@ exports[`EmptyState should match snapshot 1`] = `
 <body>
   <div>
     <div
-      class="flex h-56 flex-col items-center justify-center gap-4 rounded-lg border border-neutral bg-surface-neutral-subtle p-10 text-center text-sm text-neutral-subtle"
+      class="rounded-lg border text-sm flex h-56 flex-col items-center justify-center gap-4 p-10 text-center border-neutral bg-surface-neutral-subtle text-neutral-subtle"
     >
       <span
         class="relative inline-flex h-10 min-h-10 w-10 min-w-10 items-center justify-center"
diff --git a/libs/shared/ui/src/lib/components/empty-state/empty-state.tsx b/libs/shared/ui/src/lib/components/empty-state/empty-state.tsx
index 6ab1a450ea4..7a73a23e37a 100644
--- a/libs/shared/ui/src/lib/components/empty-state/empty-state.tsx
+++ b/libs/shared/ui/src/lib/components/empty-state/empty-state.tsx
@@ -1,14 +1,55 @@
 import { type IconName, type IconStyle } from '@fortawesome/fontawesome-common-types'
+import { type VariantProps, cva } from 'class-variance-authority'
 import { type PropsWithChildren, type ReactNode } from 'react'
 import { twMerge } from '@qovery/shared/util-js'
 import { Icon } from '../icon/icon'
 
-export interface EmptyStateProps extends PropsWithChildren {
+const emptyStateVariants = cva(['rounded-lg border text-sm'], {
+  variants: {
+    size: {
+      sm: ['flex items-center justify-between gap-4 px-4 py-4'],
+      base: ['flex h-56 flex-col items-center justify-center gap-4 p-10 text-center'],
+    },
+    variant: {
+      neutral: ['border-neutral bg-surface-neutral-subtle text-neutral-subtle'],
+      positive: ['border-positive-subtle bg-surface-positive-subtle text-positive'],
+    },
+  },
+  defaultVariants: {
+    size: 'base',
+    variant: 'neutral',
+  },
+})
+
+const emptyStateIconVariants = cva([], {
+  variants: {
+    variant: {
+      neutral: ['text-neutral-disabled'],
+      positive: ['text-positive'],
+    },
+  },
+  defaultVariants: {
+    variant: 'neutral',
+  },
+})
+
+const emptyStateIconBackgroundVariants = cva([], {
+  variants: {
+    variant: {
+      neutral: ['fill-surface-neutral-component'],
+      positive: ['fill-surface-positive-component'],
+    },
+  },
+  defaultVariants: {
+    variant: 'neutral',
+  },
+})
+
+export interface EmptyStateProps extends PropsWithChildren, VariantProps<typeof emptyStateVariants> {
   title: ReactNode
   icon?: IconName | ReactNode
   iconStyle?: IconStyle
   description?: ReactNode
-  size?: 'sm' | 'base'
   className?: string
 }
 
@@ -19,6 +60,7 @@ export function EmptyState({
   icon,
   iconStyle,
   size = 'base',
+  variant = 'neutral',
   children,
 }: EmptyStateProps) {
   const emptyStateIcon =
@@ -28,7 +70,7 @@ export function EmptyState({
         <Icon
           iconName={icon as IconName}
           iconStyle={iconStyle}
-          className="absolute top-2 text-base text-neutral-disabled"
+          className={twMerge('absolute top-2 text-base', emptyStateIconVariants({ variant }))}
         />
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -39,12 +81,12 @@ export function EmptyState({
           className="h-10 w-10"
         >
           <path
-            className="fill-surface-neutral-component"
+            className={emptyStateIconBackgroundVariants({ variant })}
             fill="currentColor"
             d="M0 6a6 6 0 0 1 6-6h28a6 6 0 0 1 6 6v28a6 6 0 0 1-6 6H6a6 6 0 0 1-6-6z"
           ></path>
           <path
-            className="text-neutral-disabled"
+            className={emptyStateIconVariants({ variant })}
             stroke="currentColor"
             d="M.5 7V4.5a4 4 0 0 1 4-4H7M39.5 33v2.5a4 4 0 0 1-4 4H33M.5 33v2.5a4 4 0 0 0 4 4H7M39.5 7V4.5a4 4 0 0 0-4-4H33"
           ></path>
@@ -56,12 +98,7 @@ export function EmptyState({
 
   if (size === 'sm') {
     return (
-      <div
-        className={twMerge(
-          'flex items-center justify-between gap-4 rounded-lg border border-neutral bg-surface-neutral-subtle px-4 py-4 text-sm text-neutral-subtle',
-          className
-        )}
-      >
+      <div className={twMerge(emptyStateVariants({ size, variant }), className)}>
         <div className="flex min-w-0 flex-1 items-center gap-4">
           {emptyStateIcon}
           <div className="flex min-w-0 flex-col gap-0.5 text-left">
@@ -75,12 +112,7 @@ export function EmptyState({
   }
 
   return (
-    <div
-      className={twMerge(
-        'flex h-56 flex-col items-center justify-center gap-4 rounded-lg border border-neutral bg-surface-neutral-subtle p-10 text-center text-sm text-neutral-subtle',
-        className
-      )}
-    >
+    <div className={twMerge(emptyStateVariants({ size, variant }), className)}>
       {emptyStateIcon}
 
       <div className="flex flex-col gap-1">
diff --git a/libs/shared/ui/src/lib/components/highlight-text/highlight-text.spec.tsx b/libs/shared/ui/src/lib/components/highlight-text/highlight-text.spec.tsx
new file mode 100644
index 00000000000..c80f82a36a5
--- /dev/null
+++ b/libs/shared/ui/src/lib/components/highlight-text/highlight-text.spec.tsx
@@ -0,0 +1,23 @@
+import { renderWithProviders, screen } from '@qovery/shared/util-tests'
+import HighlightText from './highlight-text'
+
+describe('HighlightText', () => {
+  it('renders plain text without a highlight', () => {
+    const { container } = renderWithProviders(<HighlightText text="CPU target" />)
+
+    expect(container).toHaveTextContent('CPU target')
+    expect(container.querySelector('mark')).toBeNull()
+  })
+
+  it('highlights every case-insensitive match', () => {
+    renderWithProviders(<HighlightText text="CPU and cpu budget" highlight="cpu" />)
+
+    expect(screen.getAllByText(/cpu/i, { selector: 'mark' }).map((mark) => mark.textContent)).toEqual(['CPU', 'cpu'])
+  })
+
+  it('treats regular expression characters literally', () => {
+    renderWithProviders(<HighlightText text="Timeout (seconds)" highlight="(sec" />)
+
+    expect(screen.getByText('(sec', { selector: 'mark' })).toBeInTheDocument()
+  })
+})
diff --git a/libs/shared/ui/src/lib/components/highlight-text/highlight-text.stories.tsx b/libs/shared/ui/src/lib/components/highlight-text/highlight-text.stories.tsx
new file mode 100644
index 00000000000..2cd944bfea1
--- /dev/null
+++ b/libs/shared/ui/src/lib/components/highlight-text/highlight-text.stories.tsx
@@ -0,0 +1,37 @@
+import { type Meta, type StoryObj } from '@storybook/react-webpack5'
+import { HighlightText } from './highlight-text'
+
+const meta: Meta<typeof HighlightText> = {
+  component: HighlightText,
+  title: 'HighlightText',
+  render: (args) => (
+    <p className="text-sm text-neutral">
+      <HighlightText {...args} />
+    </p>
+  ),
+}
+
+export default meta
+
+type Story = StoryObj<typeof HighlightText>
+
+export const Match: Story = {
+  args: {
+    text: 'Retention period in weeks',
+    highlight: 'retention',
+  },
+}
+
+export const NoMatch: Story = {
+  args: {
+    text: 'Retention period in weeks',
+    highlight: 'storage',
+  },
+}
+
+export const RepeatedMatches: Story = {
+  args: {
+    text: 'Log level of the logs collector',
+    highlight: 'log',
+  },
+}
diff --git a/libs/shared/ui/src/lib/components/highlight-text/highlight-text.tsx b/libs/shared/ui/src/lib/components/highlight-text/highlight-text.tsx
new file mode 100644
index 00000000000..1212cebf9a5
--- /dev/null
+++ b/libs/shared/ui/src/lib/components/highlight-text/highlight-text.tsx
@@ -0,0 +1,28 @@
+export interface HighlightTextProps {
+  text: string
+  highlight?: string
+}
+
+const escapeRegExp = (value: string) => value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+
+export function HighlightText({ text, highlight }: HighlightTextProps) {
+  const query = highlight?.trim()
+  // Split with a capture group puts matches at odd indexes.
+  const parts = query ? text.split(new RegExp(`(${escapeRegExp(query)})`, 'gi')) : [text]
+
+  return (
+    <>
+      {parts.map((part, index) =>
+        index % 2 === 1 ? (
+          <mark key={index} className="rounded-sm bg-surface-warning-highlight text-neutral">
+            {part}
+          </mark>
+        ) : (
+          part
+        )
+      )}
+    </>
+  )
+}
+
+export default HighlightText
diff --git a/libs/shared/ui/src/lib/components/inputs/input-search/input-search.spec.tsx b/libs/shared/ui/src/lib/components/inputs/input-search/input-search.spec.tsx
index 5c97a0eab58..78741b49b42 100644
--- a/libs/shared/ui/src/lib/components/inputs/input-search/input-search.spec.tsx
+++ b/libs/shared/ui/src/lib/components/inputs/input-search/input-search.spec.tsx
@@ -1,21 +1,46 @@
-import { fireEvent, render, screen } from '__tests__/utils/setup-jest'
+import { useState } from 'react'
+import { renderWithProviders, screen } from '@qovery/shared/util-tests'
 import InputSearch, { type InputSearchProps } from './input-search'
 
 let props: InputSearchProps
 
 describe('InputSearch', () => {
   it('should render successfully', () => {
-    const { baseElement } = render(<InputSearch />)
+    const { baseElement } = renderWithProviders(<InputSearch />)
     expect(baseElement).toBeTruthy()
   })
 
   it('should set the text value when the input event is emitted', async () => {
-    render(<InputSearch {...props} />)
+    const { userEvent } = renderWithProviders(<InputSearch {...props} />)
 
     const input = screen.getByRole('textbox')
 
-    fireEvent.change(input, { target: { value: 'some new text value' } })
+    await userEvent.type(input, 'some new text value')
 
-    expect(input as HTMLInputElement).toHaveValue('some new text value')
+    expect(input).toHaveValue('some new text value')
+  })
+
+  it('shows a controlled value with its clear button', () => {
+    const { rerender } = renderWithProviders(<InputSearch value="loki" />)
+
+    expect(screen.getByRole('textbox')).toHaveValue('loki')
+    expect(screen.getByRole('button', { name: 'Clear search' })).toBeInTheDocument()
+
+    rerender(<InputSearch value="" />)
+
+    expect(screen.getByRole('textbox')).toHaveValue('')
+    expect(screen.queryByRole('button', { name: 'Clear search' })).not.toBeInTheDocument()
+  })
+
+  it('clears a controlled value through onChange', async () => {
+    function ControlledInputSearch() {
+      const [value, setValue] = useState('loki')
+      return <InputSearch value={value} onChange={setValue} />
+    }
+    const { userEvent } = renderWithProviders(<ControlledInputSearch />)
+
+    await userEvent.click(screen.getByRole('button', { name: 'Clear search' }))
+
+    expect(screen.getByRole('textbox')).toHaveValue('')
   })
 })
diff --git a/libs/shared/ui/src/lib/components/inputs/input-search/input-search.tsx b/libs/shared/ui/src/lib/components/inputs/input-search/input-search.tsx
index 87c16a5ebfb..e5c1aa7af60 100644
--- a/libs/shared/ui/src/lib/components/inputs/input-search/input-search.tsx
+++ b/libs/shared/ui/src/lib/components/inputs/input-search/input-search.tsx
@@ -3,7 +3,10 @@ import { twMerge } from '@qovery/shared/util-js'
 import Icon from '../../icon/icon'
 
 export interface InputSearchProps {
+  ariaLabel?: string
   placeholder?: string
+  // Controls the input value; the input keeps its own value when unset.
+  value?: string
   className?: string
   onChange?: (value: string) => void
   isEmpty?: boolean
@@ -14,7 +17,9 @@ export interface InputSearchProps {
 
 export function InputSearch(props: InputSearchProps) {
   const {
+    ariaLabel,
     placeholder = '',
+    value,
     className = '',
     onChange,
     isEmpty = false,
@@ -25,6 +30,7 @@ export function InputSearch(props: InputSearchProps) {
 
   const ref = useRef<HTMLInputElement>(null)
   const [toggleDelete, setToggleDelete] = useState(false)
+  const showClearButton = value === undefined ? toggleDelete : value !== ''
 
   const getValue = (value: string) => {
     if (onChange) onChange(value)
@@ -57,12 +63,14 @@ export function InputSearch(props: InputSearchProps) {
             customSize
           )}
           type="text"
+          aria-label={ariaLabel}
+          value={value}
           placeholder={placeholder}
           disabled={false}
           onChange={(e) => getValue(e.currentTarget.value)}
           name="search"
         />
-        {toggleDelete && (
+        {showClearButton && (
           <button
             type="button"
             title="Clear search"
diff --git a/libs/shared/ui/src/lib/components/inputs/input-select-small/input-select-small.spec.tsx b/libs/shared/ui/src/lib/components/inputs/input-select-small/input-select-small.spec.tsx
index 42780a2961c..fef706e5e9e 100644
--- a/libs/shared/ui/src/lib/components/inputs/input-select-small/input-select-small.spec.tsx
+++ b/libs/shared/ui/src/lib/components/inputs/input-select-small/input-select-small.spec.tsx
@@ -1,4 +1,4 @@
-import { render } from '__tests__/utils/setup-jest'
+import { render, screen } from '__tests__/utils/setup-jest'
 import InputSelectSmall, { type InputSelectSmallProps } from './input-select-small'
 
 describe('InputSelectSmall', () => {
@@ -15,4 +15,18 @@ describe('InputSelectSmall', () => {
     const { baseElement } = render(<InputSelectSmall {...props} />)
     expect(baseElement).toBeTruthy()
   })
+
+  it('names the select with its aria label', () => {
+    render(
+      <InputSelectSmall
+        {...props}
+        name="storage"
+        label="Storage"
+        ariaLabel="Loki storage"
+        items={[{ label: 'PVC', value: 'pvc' }]}
+      />
+    )
+
+    expect(screen.getByRole('combobox', { name: 'Loki storage' })).toBeInTheDocument()
+  })
 })
diff --git a/libs/shared/ui/src/lib/components/inputs/input-select-small/input-select-small.tsx b/libs/shared/ui/src/lib/components/inputs/input-select-small/input-select-small.tsx
index f4e27e2b855..211441391d1 100644
--- a/libs/shared/ui/src/lib/components/inputs/input-select-small/input-select-small.tsx
+++ b/libs/shared/ui/src/lib/components/inputs/input-select-small/input-select-small.tsx
@@ -6,6 +6,9 @@ import Icon from '../../icon/icon'
 export interface InputSelectSmallProps {
   name: string
   label?: string
+  ariaLabel?: string
+  ariaDescribedBy?: string
+  ariaInvalid?: boolean
   items: Value[]
   getValue?: (name: string, value: Value | null) => void
   className?: string
@@ -20,6 +23,9 @@ export function InputSelectSmall(props: InputSelectSmallProps) {
   const {
     name,
     label,
+    ariaLabel,
+    ariaDescribedBy,
+    ariaInvalid,
     items,
     defaultValue,
     className = '',
@@ -54,6 +60,9 @@ export function InputSelectSmall(props: InputSelectSmallProps) {
       <select
         data-testid={dataTestId || 'input-select-small'}
         name={name}
+        aria-label={ariaLabel}
+        aria-describedby={ariaDescribedBy}
+        aria-invalid={ariaInvalid}
         value={value}
         disabled={disabled}
         className={twMerge(
@@ -70,7 +79,7 @@ export function InputSelectSmall(props: InputSelectSmallProps) {
       </select>
       <Icon
         iconName="chevron-down"
-        className="pointer-events-none absolute right-3 top-2.5 translate-y-0.5 text-xs leading-3 text-neutral-subtle group-hover:text-neutral"
+        className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-xs leading-3 text-neutral-subtle group-hover:text-neutral"
       />
     </div>
   )
diff --git a/libs/shared/ui/src/lib/components/inputs/input-text-small/input-text-small.spec.tsx b/libs/shared/ui/src/lib/components/inputs/input-text-small/input-text-small.spec.tsx
index 8c0139d4362..dea23e2fafe 100644
--- a/libs/shared/ui/src/lib/components/inputs/input-text-small/input-text-small.spec.tsx
+++ b/libs/shared/ui/src/lib/components/inputs/input-text-small/input-text-small.spec.tsx
@@ -102,4 +102,16 @@ describe('InputTextSmall', () => {
     await userEvent.click(button)
     expect(input).toHaveAttribute('type', 'password')
   })
+
+  it('labels the input with its explicit id', () => {
+    renderWithProviders(<InputTextSmall {...props} id="retention" label="Retention" />)
+
+    expect(screen.getByLabelText('Retention')).toHaveAttribute('id', 'retention')
+  })
+
+  it('falls back to the label as input id', () => {
+    renderWithProviders(<InputTextSmall {...props} label="Retention" />)
+
+    expect(screen.getByLabelText('Retention')).toHaveAttribute('id', 'Retention')
+  })
 })
diff --git a/libs/shared/ui/src/lib/components/inputs/input-text-small/input-text-small.tsx b/libs/shared/ui/src/lib/components/inputs/input-text-small/input-text-small.tsx
index 2de7cb0528e..ce4e1a43fe7 100644
--- a/libs/shared/ui/src/lib/components/inputs/input-text-small/input-text-small.tsx
+++ b/libs/shared/ui/src/lib/components/inputs/input-text-small/input-text-small.tsx
@@ -14,6 +14,7 @@ import Tooltip from '../../tooltip/tooltip'
 
 export interface InputTextSmallProps {
   name: string
+  id?: string
   type?: string
   onChange?: ChangeEventHandler<HTMLInputElement>
   onKeyDown?: KeyboardEventHandler<HTMLInputElement>
@@ -40,6 +41,7 @@ export const InputTextSmall = forwardRef<HTMLInputElement, InputTextSmallProps>(
 ) {
   const {
     name,
+    id,
     value,
     placeholder,
     error,
@@ -60,6 +62,7 @@ export const InputTextSmall = forwardRef<HTMLInputElement, InputTextSmallProps>(
     autoFocus = false,
   } = props
 
+  const inputId = id ?? label
   const [focused, setFocused] = useState(false)
   const [currentType, setCurrentType] = useState(type)
 
@@ -91,7 +94,7 @@ export const InputTextSmall = forwardRef<HTMLInputElement, InputTextSmallProps>(
           'input--disabled': disabled,
         })}
       >
-        <label className="hidden" htmlFor={label}>
+        <label className="hidden" htmlFor={inputId}>
           {label}
         </label>
         <input
@@ -111,7 +114,7 @@ export const InputTextSmall = forwardRef<HTMLInputElement, InputTextSmallProps>(
           value={value}
           onInput={onChange as InputEventHandler<HTMLInputElement> | undefined}
           disabled={disabled}
-          id={label}
+          id={inputId}
           onFocus={() => setFocused(true)}
           onBlur={(e) => {
             setFocused(false)
diff --git a/libs/shared/ui/src/lib/components/inputs/input-toggle/input-toggle.tsx b/libs/shared/ui/src/lib/components/inputs/input-toggle/input-toggle.tsx
index a6c5e7987ac..278c0b944a1 100644
--- a/libs/shared/ui/src/lib/components/inputs/input-toggle/input-toggle.tsx
+++ b/libs/shared/ui/src/lib/components/inputs/input-toggle/input-toggle.tsx
@@ -11,6 +11,8 @@ export interface InputToggleProps {
   className?: string
   dataTestId?: string
   ariaLabel?: string
+  ariaDescribedBy?: string
+  ariaInvalid?: boolean
   align?: 'center' | 'top'
   disabled?: boolean
   name?: string
@@ -29,6 +31,8 @@ export function InputToggle(props: InputToggleProps) {
     disabled = false,
     name,
     ariaLabel,
+    ariaDescribedBy,
+    ariaInvalid,
     autoFocus,
   } = props
 
@@ -75,6 +79,8 @@ export function InputToggle(props: InputToggleProps) {
         type="button"
         data-testid={props.dataTestId || 'input-toggle-button'}
         aria-label={accessibleName}
+        aria-describedby={ariaDescribedBy}
+        aria-invalid={ariaInvalid}
         checked={isChecked}
         disabled={disabled}
         name={name}
diff --git a/libs/shared/ui/src/lib/components/modal/modal.tsx b/libs/shared/ui/src/lib/components/modal/modal.tsx
index 75d08df7a0f..b8f555bced7 100644
--- a/libs/shared/ui/src/lib/components/modal/modal.tsx
+++ b/libs/shared/ui/src/lib/components/modal/modal.tsx
@@ -181,6 +181,7 @@ export const Modal = (props: ModalProps) => {
               <Dialog.Close className="absolute right-4 top-4" asChild>
                 <button
                   type="button"
+                  aria-label="Close"
                   className="flex h-7 w-7 items-center justify-center rounded-full bg-background text-neutral-disabled transition-colors hover:bg-surface-neutral-componentHover hover:text-neutral"
                 >
                   <Icon iconName="xmark" iconStyle="solid" />
diff --git a/libs/shared/ui/src/lib/components/truncate/truncate.tsx b/libs/shared/ui/src/lib/components/truncate/truncate.tsx
index 6ed0df0026e..ba29a29bf35 100644
--- a/libs/shared/ui/src/lib/components/truncate/truncate.tsx
+++ b/libs/shared/ui/src/lib/components/truncate/truncate.tsx
@@ -5,17 +5,19 @@ export interface TruncateProps {
   text: string
   defaultTooltipLimit?: number
   delayDuration?: number
+  classNameContent?: string
 }
 
 export const truncateText = (text: string, truncateLimit: number) => text.slice(0, truncateLimit)
 
 export function Truncate(props: TruncateProps) {
-  const { truncateLimit, text, defaultTooltipLimit = 200, delayDuration = 150 } = props
+  const { truncateLimit, text, defaultTooltipLimit = 200, delayDuration = 150, classNameContent } = props
 
   if (text.length >= truncateLimit) {
     return (
       <Tooltip
         delayDuration={delayDuration}
+        classNameContent={classNameContent}
         content={text.length >= defaultTooltipLimit ? `${truncateText(text, defaultTooltipLimit)}…` : text}
       >
         <span data-testid="truncate-text">{truncateText(text, truncateLimit)}…</span>
diff --git a/libs/shared/utils/src/index.ts b/libs/shared/utils/src/index.ts
index 90dc59e9490..66f393d914c 100644
--- a/libs/shared/utils/src/index.ts
+++ b/libs/shared/utils/src/index.ts
@@ -1,2 +1,3 @@
 // http
 export * from './lib/http/interceptors/auth-interceptor/auth-interceptor'
+export * from './lib/http/is-http-status/is-http-status'
diff --git a/libs/shared/utils/src/lib/http/is-http-status/is-http-status.spec.ts b/libs/shared/utils/src/lib/http/is-http-status/is-http-status.spec.ts
new file mode 100644
index 00000000000..2b92bdf4e39
--- /dev/null
+++ b/libs/shared/utils/src/lib/http/is-http-status/is-http-status.spec.ts
@@ -0,0 +1,19 @@
+import { AxiosError, type AxiosResponse } from 'axios'
+import { isHttpStatus } from './is-http-status'
+
+describe('isHttpStatus', () => {
+  it('matches the status of an Axios error', () => {
+    const error = new AxiosError('Not found', undefined, undefined, undefined, { status: 404 } as AxiosResponse)
+
+    expect(isHttpStatus(error, 404)).toBe(true)
+    expect(isHttpStatus(error, 500)).toBe(false)
+  })
+
+  it('matches the status of a serialized error', () => {
+    expect(isHttpStatus({ response: { status: 404 } }, 404)).toBe(true)
+  })
+
+  it.each([undefined, null, 'Not found', {}, { response: null }])('does not match %p', (error) => {
+    expect(isHttpStatus(error, 404)).toBe(false)
+  })
+})
diff --git a/libs/shared/utils/src/lib/http/is-http-status/is-http-status.ts b/libs/shared/utils/src/lib/http/is-http-status/is-http-status.ts
new file mode 100644
index 00000000000..8aa634a76a6
--- /dev/null
+++ b/libs/shared/utils/src/lib/http/is-http-status/is-http-status.ts
@@ -0,0 +1,14 @@
+import { isAxiosError } from 'axios'
+
+export function isHttpStatus(error: unknown, status: number) {
+  if (isAxiosError(error)) return error.response?.status === status
+  return Boolean(
+    error &&
+      typeof error === 'object' &&
+      'response' in error &&
+      error.response &&
+      typeof error.response === 'object' &&
+      'status' in error.response &&
+      error.response.status === status
+  )
+}
diff --git a/libs/state/util-queries/src/lib/queries/queries.ts b/libs/state/util-queries/src/lib/queries/queries.ts
index bc4a4eced70..6db64214083 100644
--- a/libs/state/util-queries/src/lib/queries/queries.ts
+++ b/libs/state/util-queries/src/lib/queries/queries.ts
@@ -1,6 +1,6 @@
 import { type inferQueryKeyStore, mergeQueryKeys } from '@lukemorales/query-key-factory'
 import { cloudProviders } from '@qovery/domains/cloud-providers/data-access'
-import { clusters } from '@qovery/domains/clusters/data-access'
+import { clusters, platformConfiguration } from '@qovery/domains/clusters/data-access'
 import { customDomains } from '@qovery/domains/custom-domains/data-access'
 import { environments } from '@qovery/domains/environments/data-access'
 import { observability } from '@qovery/domains/observability/data-access'
@@ -19,6 +19,7 @@ import { webflow } from '@qovery/shared/webflow/data-access'
 export const queries = mergeQueryKeys(
   cloudProviders,
   clusters,
+  platformConfiguration,
   environments,
   organizations,
   projects,
diff --git a/tailwind-workspace-preset.js b/tailwind-workspace-preset.js
index 2bd3df063da..0e173929d37 100644
--- a/tailwind-workspace-preset.js
+++ b/tailwind-workspace-preset.js
@@ -293,6 +293,7 @@ module.exports = {
           warning: {
             solid: 'var(--warning-9)',
             solidHover: 'var(--warning-10)',
+            highlight: 'var(--warning-5)',
             component: 'var(--warning-3)',
             subtle: 'var(--warning-2)',
           },
diff --git a/tsconfig.base.json b/tsconfig.base.json
index dd097509415..d9478ca5b11 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -65,6 +65,7 @@
       "@qovery/shared/posthog/feature": ["libs/shared/posthog/feature/src/index.ts"],
       "@qovery/shared/router": ["libs/shared/router/src/index.ts"],
       "@qovery/shared/routes": ["libs/shared/routes/src/index.ts"],
+      "@qovery/shared/schema-fields/feature": ["libs/shared/schema-fields/feature/src/index.ts"],
       "@qovery/shared/spotlight/feature": ["libs/shared/spotlight/feature/src/index.ts"],
       "@qovery/shared/ui": ["libs/shared/ui/src/index.ts"],
       "@qovery/shared/util-const": ["libs/shared/util-const/src/index.ts"],

From 684990172f0a7385c0abeaac74439673f4e02646 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Er=C3=A8be=20-=20Romain=20Gerard?= <erebe@erebe.eu>
Date: Wed, 14 Oct 2026 15:03:34 +0200
Subject: [PATCH 7/7] feat(api-tokens): show last usage in token lists (#3107)

Help users assess token activity directly from organization settings when
reviewing credentials to keep or remove.

Show Last used beside creation details for regular and policy API tokens.
Format the timestamp as a human-readable age relative to when the list
loads, keeping that reference stable across rerenders. Show the exact UTC
timestamp on hover and No recorded usage when the value is null or absent.

Extend the list prop types with optional last_used_at support while the
pinned generated API client does not yet declare the field.

Test relative formatting, placement, hover timestamps, missing values, and
the fixed reference time across rerenders for both lists.
---
 .../policy-api-token-list.spec.tsx            | 44 +++++++++++++++++
 .../policy-api-token-list.tsx                 | 10 +++-
 .../settings-api-token.spec.tsx               | 47 +++++++++++++++++++
 .../settings-api-token/settings-api-token.tsx | 13 +++--
 package.json                                  |  2 +-
 yarn.lock                                     | 10 ++--
 6 files changed, 116 insertions(+), 10 deletions(-)

diff --git a/libs/domains/organizations/feature/src/lib/settings-api-token/policy-api-token/policy-api-token-list.spec.tsx b/libs/domains/organizations/feature/src/lib/settings-api-token/policy-api-token/policy-api-token-list.spec.tsx
index 35a7826bbed..31d486a01fa 100644
--- a/libs/domains/organizations/feature/src/lib/settings-api-token/policy-api-token/policy-api-token-list.spec.tsx
+++ b/libs/domains/organizations/feature/src/lib/settings-api-token/policy-api-token/policy-api-token-list.spec.tsx
@@ -1,4 +1,6 @@
 import { type OrganizationPolicyApiToken } from 'qovery-typescript-axios'
+import { useState } from 'react'
+import { dateUTCString } from '@qovery/shared/util-dates'
 import { renderWithProviders, screen } from '@qovery/shared/util-tests'
 import { PolicyApiTokenList } from './policy-api-token-list'
 
@@ -31,6 +33,48 @@ describe('PolicyApiTokenList', () => {
     jest.clearAllMocks()
   })
 
+  afterEach(() => {
+    jest.useRealTimers()
+  })
+
+  it('should show last usage next to creation, relative to when the list loaded', async () => {
+    jest.useFakeTimers().setSystemTime(new Date('2026-10-13T12:00:00Z'))
+    const lastUsedAt = '2026-10-13T11:55:00Z'
+    const tokens = [{ ...policyApiToken, last_used_at: lastUsedAt }]
+    const onDelete = jest.fn()
+
+    function TestPage() {
+      const [renderCount, setRenderCount] = useState(0)
+      return (
+        <>
+          <button onClick={() => setRenderCount(renderCount + 1)}>Render {renderCount}</button>
+          <PolicyApiTokenList policyApiTokens={tokens} onDelete={onDelete} />
+        </>
+      )
+    }
+
+    const { userEvent } = renderWithProviders(<TestPage />)
+
+    const lastUsed = screen.getByText('Last used 5 minutes ago')
+    expect(lastUsed).toHaveAttribute('title', dateUTCString(lastUsedAt))
+    expect(lastUsed.previousElementSibling).toHaveTextContent('Created since')
+
+    jest.setSystemTime(new Date('2026-10-13T13:00:00Z'))
+    await userEvent.click(screen.getByRole('button', { name: 'Render 0' }))
+
+    expect(screen.getByRole('button', { name: 'Render 1' })).toBeInTheDocument()
+    expect(screen.getByText('Last used 5 minutes ago')).toBeInTheDocument()
+  })
+
+  it.each([null, undefined])('should hide last usage when the timestamp is %s', (lastUsedAt) => {
+    renderWithProviders(
+      <PolicyApiTokenList policyApiTokens={[{ ...policyApiToken, last_used_at: lastUsedAt }]} onDelete={jest.fn()} />
+    )
+
+    expect(screen.getByTestId(`policy-token-list-${policyApiToken.id}`)).toBeInTheDocument()
+    expect(screen.queryByText(/Last used/)).not.toBeInTheDocument()
+  })
+
   it('should render an empty state', () => {
     renderWithProviders(<PolicyApiTokenList policyApiTokens={[]} onDelete={jest.fn()} />)
 
diff --git a/libs/domains/organizations/feature/src/lib/settings-api-token/policy-api-token/policy-api-token-list.tsx b/libs/domains/organizations/feature/src/lib/settings-api-token/policy-api-token/policy-api-token-list.tsx
index f9ee442ada6..67103cdf219 100644
--- a/libs/domains/organizations/feature/src/lib/settings-api-token/policy-api-token/policy-api-token-list.tsx
+++ b/libs/domains/organizations/feature/src/lib/settings-api-token/policy-api-token/policy-api-token-list.tsx
@@ -1,4 +1,6 @@
+import { formatDistanceStrict } from 'date-fns'
 import { type OrganizationPolicyApiToken } from 'qovery-typescript-axios'
+import { useState } from 'react'
 import { Button, EmptyState, Icon, Skeleton, Tooltip, Truncate, useModal } from '@qovery/shared/ui'
 import { dateMediumLocalFormat, dateUTCString } from '@qovery/shared/util-dates'
 import { upperCaseFirstLetter } from '@qovery/shared/util-js'
@@ -12,6 +14,7 @@ export interface PolicyApiTokenListProps {
 
 export function PolicyApiTokenList({ policyApiTokens, onDelete }: PolicyApiTokenListProps) {
   const { openModal, closeModal } = useModal()
+  const [loadedAt] = useState(() => new Date())
 
   if (policyApiTokens.length === 0) {
     return (
@@ -53,10 +56,15 @@ export function PolicyApiTokenList({ policyApiTokens, onDelete }: PolicyApiToken
               )}
               {token.creator_name && <span className="mr-3 inline-block">Created by {token.creator_name}</span>}
               {token.created_at && (
-                <span className="inline-block" title={dateUTCString(token.created_at)}>
+                <span className="mr-3 inline-block" title={dateUTCString(token.created_at)}>
                   Created since {dateMediumLocalFormat(token.created_at)}
                 </span>
               )}
+              {token.last_used_at && (
+                <span className="inline-block" title={dateUTCString(token.last_used_at)}>
+                  Last used {formatDistanceStrict(new Date(token.last_used_at), loadedAt, { addSuffix: true })}
+                </span>
+              )}
             </p>
           </div>
           <div className="flex items-center gap-2">
diff --git a/libs/domains/organizations/feature/src/lib/settings-api-token/settings-api-token.spec.tsx b/libs/domains/organizations/feature/src/lib/settings-api-token/settings-api-token.spec.tsx
index cb19ed636c7..2b531fb558c 100644
--- a/libs/domains/organizations/feature/src/lib/settings-api-token/settings-api-token.spec.tsx
+++ b/libs/domains/organizations/feature/src/lib/settings-api-token/settings-api-token.spec.tsx
@@ -1,4 +1,6 @@
 import { type OrganizationApiToken } from 'qovery-typescript-axios'
+import { useState } from 'react'
+import { dateUTCString } from '@qovery/shared/util-dates'
 import { renderWithProviders, screen } from '@qovery/shared/util-tests'
 import * as useApiTokensModule from '../hooks/use-api-tokens/use-api-tokens'
 import * as useDeleteApiTokenModule from '../hooks/use-delete-api-token/use-delete-api-token'
@@ -37,6 +39,51 @@ describe('SettingsApiToken', () => {
     })
   })
 
+  afterEach(() => {
+    jest.useRealTimers()
+  })
+
+  it('should show last usage next to creation, relative to when the list loaded', async () => {
+    jest.useFakeTimers().setSystemTime(new Date('2026-10-13T12:00:00Z'))
+    const lastUsedAt = '2026-10-13T10:00:00Z'
+    useApiTokensMockSpy.mockReturnValue({
+      data: [{ id: 'token-1', name: 'My token', created_at: '2024-01-01T00:00:00Z', last_used_at: lastUsedAt }],
+    })
+
+    function TestPage() {
+      const [renderCount, setRenderCount] = useState(0)
+      return (
+        <>
+          <button onClick={() => setRenderCount(renderCount + 1)}>Render {renderCount}</button>
+          <SettingsApiToken />
+        </>
+      )
+    }
+
+    const { userEvent } = renderWithProviders(<TestPage />)
+
+    const lastUsed = screen.getByText('Last used 2 hours ago')
+    expect(lastUsed).toHaveAttribute('title', dateUTCString(lastUsedAt))
+    expect(lastUsed.previousElementSibling).toHaveTextContent('Created since')
+
+    jest.setSystemTime(new Date('2026-10-13T13:00:00Z'))
+    await userEvent.click(screen.getByRole('button', { name: 'Render 0' }))
+
+    expect(screen.getByRole('button', { name: 'Render 1' })).toBeInTheDocument()
+    expect(screen.getByText('Last used 2 hours ago')).toBeInTheDocument()
+  })
+
+  it.each([null, undefined])('should hide last usage when the timestamp is %s', (lastUsedAt) => {
+    useApiTokensMockSpy.mockReturnValue({
+      data: [{ id: 'token-1', name: 'My token', last_used_at: lastUsedAt }],
+    })
+
+    renderWithProviders(<SettingsApiToken />)
+
+    expect(screen.getByTestId('token-list-token-1')).toBeInTheDocument()
+    expect(screen.queryByText(/Last used/)).not.toBeInTheDocument()
+  })
+
   it('should render empty state', () => {
     useApiTokensMockSpy.mockReturnValue({ data: [] })
 
diff --git a/libs/domains/organizations/feature/src/lib/settings-api-token/settings-api-token.tsx b/libs/domains/organizations/feature/src/lib/settings-api-token/settings-api-token.tsx
index c794dc8bcc6..ef5d0cd1694 100644
--- a/libs/domains/organizations/feature/src/lib/settings-api-token/settings-api-token.tsx
+++ b/libs/domains/organizations/feature/src/lib/settings-api-token/settings-api-token.tsx
@@ -1,6 +1,7 @@
 import { useParams } from '@tanstack/react-router'
+import { formatDistanceStrict } from 'date-fns'
 import { type OrganizationApiToken } from 'qovery-typescript-axios'
-import { Suspense } from 'react'
+import { Suspense, useState } from 'react'
 import { SettingsHeading } from '@qovery/shared/console-shared'
 import { useModal, useModalConfirmation } from '@qovery/shared/ui'
 import { BlockContent, Button, Icon, Section, Skeleton, Tooltip, Truncate } from '@qovery/shared/ui'
@@ -18,13 +19,14 @@ interface PageOrganizationApiProps {
 
 function PageOrganizationApi(props: PageOrganizationApiProps) {
   const { apiTokens, onDelete } = props
+  const [loadedAt] = useState(() => new Date())
 
   return (
     <div className="max-w-content-with-navigation-left">
       <BlockContent title="Token List" classNameContent="p-0">
         {apiTokens.length > 0 ? (
           <ul>
-            {apiTokens.map((token: OrganizationApiToken) => (
+            {apiTokens.map((token) => (
               <li
                 data-testid={`token-list-${token.id}`}
                 key={token.id}
@@ -45,10 +47,15 @@ function PageOrganizationApi(props: PageOrganizationApiProps) {
                     <p className="text-xs text-neutral-subtle">
                       <span className="mr-3 inline-block">Role: {upperCaseFirstLetter(token.role_name)}</span>
                       {token.created_at && (
-                        <span className="inline-block" title={dateUTCString(token.created_at)}>
+                        <span className="mr-3 inline-block" title={dateUTCString(token.created_at)}>
                           Created since {dateMediumLocalFormat(token.created_at)}
                         </span>
                       )}
+                      {token.last_used_at && (
+                        <span className="inline-block" title={dateUTCString(token.last_used_at)}>
+                          Last used {formatDistanceStrict(new Date(token.last_used_at), loadedAt, { addSuffix: true })}
+                        </span>
+                      )}
                     </p>
                   </div>
                 </div>
diff --git a/package.json b/package.json
index 25c491e7ab9..e7af72cca59 100644
--- a/package.json
+++ b/package.json
@@ -78,7 +78,7 @@
     "mermaid": "11.6.0",
     "monaco-editor": "0.53.0",
     "posthog-js": "1.345.1",
-    "qovery-typescript-axios": "1.1.1010",
+    "qovery-typescript-axios": "1.1.1011",
     "react": "19.3.0",
     "react-country-flag": "3.0.2",
     "react-datepicker": "4.12.0",
diff --git a/yarn.lock b/yarn.lock
index 06eda2225d7..6a9c4a5161a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6285,7 +6285,7 @@ __metadata:
     prettier: 3.2.5
     prettier-plugin-tailwindcss: 0.5.14
     pretty-quick: 4.0.0
-    qovery-typescript-axios: 1.1.1010
+    qovery-typescript-axios: 1.1.1011
     qovery-ws-typescript-axios: 0.1.666
     react: 19.3.0
     react-country-flag: 3.0.2
@@ -24656,12 +24656,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"qovery-typescript-axios@npm:1.1.1010":
-  version: 1.1.1010
-  resolution: "qovery-typescript-axios@npm:1.1.1010"
+"qovery-typescript-axios@npm:1.1.1011":
+  version: 1.1.1011
+  resolution: "qovery-typescript-axios@npm:1.1.1011"
   dependencies:
     axios: 1.20.0
-  checksum: a1957c4f49a2c1d131d3826751e0e650f8494c8819e8d1dba0f0989d69f76f7ef6588a3636e950a92cfb5c46b8380fa17863a47ced60d046f181ca31c1e94c01
+  checksum: 2cb3f535fab0de6a47beae6e800871eaa3b075aa2258d78e8f2addb45f2e352db7f6e56e989c10e68a3ec6b770dd73e297238faf91678f36afb3f015ffe80783
   languageName: node
   linkType: hard