diff --git a/apps/console-v5/src/routes/_authenticated/organization/$organizationId/settings/webhook.tsx b/apps/console-v5/src/routes/_authenticated/organization/$organizationId/settings/webhook.tsx
index d8efb02d832..bce220469a0 100644
--- a/apps/console-v5/src/routes/_authenticated/organization/$organizationId/settings/webhook.tsx
+++ b/apps/console-v5/src/routes/_authenticated/organization/$organizationId/settings/webhook.tsx
@@ -1,9 +1,10 @@
 import { createFileRoute } from '@tanstack/react-router'
+import { SettingsWebhook } from '@qovery/domains/organizations/feature'
 
 export const Route = createFileRoute('/_authenticated/organization/$organizationId/settings/webhook')({
   component: RouteComponent,
 })
 
 function RouteComponent() {
-  return <div>Hello "/_authenticated/organization/$organizationId/settings/webhook"!</div>
+  return <SettingsWebhook />
 }
diff --git a/libs/domains/organizations/feature/src/index.ts b/libs/domains/organizations/feature/src/index.ts
index 08d63d01e2f..116706b3c94 100644
--- a/libs/domains/organizations/feature/src/index.ts
+++ b/libs/domains/organizations/feature/src/index.ts
@@ -92,5 +92,6 @@ export * from './lib/settings-general/settings-general'
 export * from './lib/settings-labels-annotations/settings-labels-annotations'
 export * from './lib/settings-helm-repositories/settings-helm-repositories'
 export * from './lib/settings-container-registries/settings-container-registries'
+export * from './lib/settings-webhook/settings-webhook'
 export * from './lib/settings-api-token/settings-api-token'
 export * from './lib/settings-danger-zone/settings-danger-zone'
diff --git a/libs/domains/organizations/feature/src/lib/hooks/use-webhooks/use-webhooks.ts b/libs/domains/organizations/feature/src/lib/hooks/use-webhooks/use-webhooks.ts
index 39b4b7f8902..02cb14c2914 100644
--- a/libs/domains/organizations/feature/src/lib/hooks/use-webhooks/use-webhooks.ts
+++ b/libs/domains/organizations/feature/src/lib/hooks/use-webhooks/use-webhooks.ts
@@ -3,11 +3,13 @@ import { queries } from '@qovery/state/util-queries'
 
 export interface UseWebhooksProps {
   organizationId: string
+  suspense?: boolean
 }
 
-export function useWebhooks({ organizationId }: UseWebhooksProps) {
+export function useWebhooks({ organizationId, suspense = false }: UseWebhooksProps) {
   return useQuery({
     ...queries.organizations.webhooks({ organizationId }),
+    suspense,
   })
 }
 
diff --git a/libs/domains/organizations/feature/src/lib/settings-webhook/settings-webhook.spec.tsx b/libs/domains/organizations/feature/src/lib/settings-webhook/settings-webhook.spec.tsx
new file mode 100644
index 00000000000..16d4c221da3
--- /dev/null
+++ b/libs/domains/organizations/feature/src/lib/settings-webhook/settings-webhook.spec.tsx
@@ -0,0 +1,147 @@
+import { webhookFactoryMock } from '@qovery/shared/factories'
+import * as sharedUi from '@qovery/shared/ui'
+import { renderWithProviders, screen, within } from '@qovery/shared/util-tests'
+import * as useDeleteWebhookHook from '../hooks/use-delete-webhook/use-delete-webhook'
+import * as useEditWebhookHook from '../hooks/use-edit-webhook/use-edit-webhook'
+import * as useWebhooksHook from '../hooks/use-webhooks/use-webhooks'
+import { SettingsWebhook } from './settings-webhook'
+import WebhookCrudModal from './webhook-crud-modal/webhook-crud-modal'
+
+jest.mock('@tanstack/react-router', () => ({
+  ...jest.requireActual('@tanstack/react-router'),
+  useParams: () => ({ organizationId: '1' }),
+}))
+
+const useWebhooksMockSpy = jest.spyOn(useWebhooksHook, 'useWebhooks') as jest.Mock
+const useEditWebhookMockSpy = jest.spyOn(useEditWebhookHook, 'useEditWebhook') as jest.Mock
+const useDeleteWebhookMockSpy = jest.spyOn(useDeleteWebhookHook, 'useDeleteWebhook') as jest.Mock
+const useModalMockSpy = jest.spyOn(sharedUi, 'useModal') as jest.Mock
+const useModalConfirmationMockSpy = jest.spyOn(sharedUi, 'useModalConfirmation') as jest.Mock
+
+describe('SettingsWebhook', () => {
+  let openModalMock: jest.Mock
+  let closeModalMock: jest.Mock
+  let openModalConfirmationMock: jest.Mock
+  let editWebhookMock: jest.Mock
+  let deleteWebhookMock: jest.Mock
+
+  const mockWebhooks = webhookFactoryMock(3)
+
+  beforeEach(() => {
+    openModalMock = jest.fn()
+    closeModalMock = jest.fn()
+    openModalConfirmationMock = jest.fn()
+    editWebhookMock = jest.fn().mockResolvedValue(undefined)
+    deleteWebhookMock = jest.fn().mockResolvedValue(undefined)
+
+    useModalMockSpy.mockReturnValue({
+      openModal: openModalMock,
+      closeModal: closeModalMock,
+      enableAlertClickOutside: jest.fn(),
+    })
+    useModalConfirmationMockSpy.mockReturnValue({
+      openModalConfirmation: openModalConfirmationMock,
+    })
+    useWebhooksMockSpy.mockReturnValue({
+      data: mockWebhooks,
+      isLoading: false,
+    })
+    useEditWebhookMockSpy.mockReturnValue({
+      mutateAsync: editWebhookMock,
+    })
+    useDeleteWebhookMockSpy.mockReturnValue({
+      mutateAsync: deleteWebhookMock,
+    })
+  })
+
+  it('should render successfully', () => {
+    const { baseElement } = renderWithProviders(<SettingsWebhook />)
+    expect(baseElement).toBeTruthy()
+  })
+
+  it('should render webhooks with actions', () => {
+    renderWithProviders(<SettingsWebhook />)
+
+    expect(useWebhooksMockSpy).toHaveBeenCalledWith({ organizationId: '1', suspense: true })
+
+    const rows = screen.getAllByTestId('webhook-row')
+    expect(rows).toHaveLength(3)
+
+    if (mockWebhooks[0].target_url) within(rows[0]).getByText(mockWebhooks[0].target_url)
+    within(rows[0]).getByTestId('edit-webhook')
+    within(rows[0]).getByTestId('input-toggle')
+    within(rows[0]).getByTestId('delete-webhook')
+  })
+
+  it('should open create modal on click on add new', async () => {
+    const { userEvent } = renderWithProviders(<SettingsWebhook />)
+
+    await userEvent.click(screen.getByRole('button', { name: 'Add new' }))
+
+    expect(openModalMock).toHaveBeenCalled()
+
+    const modalProps = openModalMock.mock.calls[0][0]
+    expect(modalProps.content.type).toBe(WebhookCrudModal)
+    expect(modalProps.content.props.organizationId).toBe('1')
+    expect(modalProps.content.props.webhook).toBeUndefined()
+  })
+
+  it('should open edit modal on click on cog', async () => {
+    const { userEvent } = renderWithProviders(<SettingsWebhook />)
+
+    await userEvent.click(screen.getAllByTestId('edit-webhook')[0])
+
+    expect(openModalMock).toHaveBeenCalled()
+
+    const modalProps = openModalMock.mock.calls[0][0]
+    expect(modalProps.content.type).toBe(WebhookCrudModal)
+    expect(modalProps.content.props.webhook).toEqual(mockWebhooks[0])
+  })
+
+  it('should toggle a webhook', async () => {
+    const { userEvent } = renderWithProviders(<SettingsWebhook />)
+
+    const rows = screen.getAllByTestId('webhook-row')
+    const toggle = within(rows[0]).getByTestId('input-toggle-button')
+
+    await userEvent.click(toggle)
+
+    expect(editWebhookMock).toHaveBeenCalledWith({
+      organizationId: '1',
+      webhookId: mockWebhooks[0].id,
+      webhookRequest: {
+        ...mockWebhooks[0],
+        enabled: true,
+      },
+    })
+    expect(closeModalMock).toHaveBeenCalled()
+  })
+
+  it('should display empty placeholder', () => {
+    useWebhooksMockSpy.mockReturnValue({
+      data: [],
+    })
+
+    renderWithProviders(<SettingsWebhook />)
+
+    expect(useWebhooksMockSpy).toHaveBeenCalledWith({ organizationId: '1', suspense: true })
+
+    screen.getByTestId('empty-webhook')
+  })
+
+  it('should call delete action from confirmation modal', async () => {
+    const { userEvent } = renderWithProviders(<SettingsWebhook />)
+
+    await userEvent.click(screen.getAllByTestId('delete-webhook')[0])
+
+    expect(openModalConfirmationMock).toHaveBeenCalled()
+
+    const modalProps = openModalConfirmationMock.mock.calls[0][0]
+    modalProps.action()
+
+    expect(deleteWebhookMock).toHaveBeenCalledWith({
+      organizationId: '1',
+      webhookId: mockWebhooks[0].id,
+    })
+  })
+})
diff --git a/libs/domains/organizations/feature/src/lib/settings-webhook/settings-webhook.tsx b/libs/domains/organizations/feature/src/lib/settings-webhook/settings-webhook.tsx
new file mode 100644
index 00000000000..43c127fccc9
--- /dev/null
+++ b/libs/domains/organizations/feature/src/lib/settings-webhook/settings-webhook.tsx
@@ -0,0 +1,200 @@
+import { useParams } from '@tanstack/react-router'
+import { OrganizationWebhookKindEnum, type OrganizationWebhookResponse } from 'qovery-typescript-axios'
+import { Suspense } from 'react'
+import { SettingsHeading } from '@qovery/shared/console-shared'
+import { IconEnum } from '@qovery/shared/enums'
+import { useModal, useModalConfirmation } from '@qovery/shared/ui'
+import { BlockContent, Button, Icon, InputToggle, Section, Skeleton, Tooltip, Truncate } from '@qovery/shared/ui'
+import { dateUTCString, timeAgo } from '@qovery/shared/util-dates'
+import { useDocumentTitle } from '@qovery/shared/util-hooks'
+import { upperCaseFirstLetter } from '@qovery/shared/util-js'
+import { useDeleteWebhook } from '../hooks/use-delete-webhook/use-delete-webhook'
+import { useEditWebhook } from '../hooks/use-edit-webhook/use-edit-webhook'
+import { useWebhooks } from '../hooks/use-webhooks/use-webhooks'
+import WebhookCrudModal from './webhook-crud-modal/webhook-crud-modal'
+
+const WebhookSkeleton = () => (
+  <BlockContent title="Webhook" classNameContent="p-0">
+    {[0, 1, 2].map((index) => (
+      <div key={index} className="flex items-center justify-between border-b border-neutral px-5 py-4 last:border-0">
+        <div className="flex flex-col gap-1">
+          <Skeleton width={320} height={16} show={true} />
+          <Skeleton width={220} height={16} show={true} />
+        </div>
+        <div className="flex items-center gap-2">
+          <Skeleton width={32} height={18} show={true} />
+          <Skeleton width={36} height={36} show={true} />
+          <Skeleton width={36} height={36} show={true} />
+        </div>
+      </div>
+    ))}
+  </BlockContent>
+)
+
+const WebhookList = ({ organizationId }: { organizationId: string }) => {
+  const fetchWebhooks = useWebhooks({ organizationId, suspense: true })
+  const { mutateAsync: deleteWebhook } = useDeleteWebhook()
+  const { openModal, closeModal } = useModal()
+  const { openModalConfirmation } = useModalConfirmation()
+  const { mutateAsync: editWebhook } = useEditWebhook()
+  const webhooks = fetchWebhooks.data ?? []
+
+  const openEdit = (webhook: OrganizationWebhookResponse) => {
+    openModal({
+      content: <WebhookCrudModal organizationId={organizationId} webhook={webhook} closeModal={closeModal} />,
+    })
+  }
+
+  const onDelete = (webhook: OrganizationWebhookResponse) => {
+    openModalConfirmation({
+      title: 'Delete webhook',
+      confirmationMethod: 'action',
+      name: webhook.target_url || '',
+      action: () => {
+        try {
+          deleteWebhook({ organizationId, webhookId: webhook.id })
+        } catch (error) {
+          console.error(error)
+        }
+      },
+    })
+  }
+
+  const toggleWebhook = (webhookId: string, enabled: boolean) => {
+    // this cast as Required is there to fix an incoherency in the api-doc. If request have all the field required
+    // then the Response must also have all the fields defined
+    const webhook = fetchWebhooks.data?.find(
+      (webhook) => webhook.id === webhookId
+    ) as Required<OrganizationWebhookResponse>
+
+    if (webhook !== undefined) {
+      try {
+        editWebhook({
+          organizationId,
+          webhookId,
+          webhookRequest: {
+            ...webhook,
+            enabled: enabled,
+          },
+        })
+        closeModal()
+      } catch (error) {
+        console.error(error)
+      }
+    }
+  }
+
+  return (
+    <BlockContent title="Webhook" classNameContent="p-0">
+      {webhooks.length > 0 ? (
+        <ul className="flex flex-col">
+          {webhooks.map((webhook) => (
+            <li
+              key={webhook.id}
+              data-testid="webhook-row"
+              className="flex items-center justify-between border-b border-neutral px-5 py-4 last:border-0"
+            >
+              <div className="flex flex-col">
+                <p className="mb-1 flex text-xs font-medium text-neutral">
+                  <Truncate truncateLimit={58} text={webhook.target_url || ''} />
+                  {webhook.description && (
+                    <Tooltip content={webhook.description}>
+                      <div className="ml-1 cursor-pointer">
+                        <Icon iconName="circle-info" iconStyle="regular" />
+                      </div>
+                    </Tooltip>
+                  )}
+                </p>
+                <div className="flex gap-3 text-xs text-neutral-subtle">
+                  <span className="flex gap-2">
+                    <Icon
+                      name={webhook.kind === OrganizationWebhookKindEnum.STANDARD ? IconEnum.QOVERY : IconEnum.SLACK}
+                      className="h-4 w-4"
+                    />{' '}
+                    {upperCaseFirstLetter(webhook.kind)}
+                  </span>
+                  {webhook.updated_at && (
+                    <span title={dateUTCString(webhook.updated_at)}>
+                      Last updated {timeAgo(new Date(webhook.updated_at))} ago
+                    </span>
+                  )}
+                </div>
+              </div>
+              <div className="flex items-center gap-2">
+                <InputToggle
+                  title={`${webhook.enabled ? 'Enabled' : 'Disabled'}`}
+                  className={`${webhook.enabled ? 'mr-5' : 'mr-4'}`}
+                  value={webhook.enabled}
+                  small
+                  onChange={(e) => toggleWebhook(webhook.id, e)}
+                />
+                <Button
+                  data-testid="edit-webhook"
+                  variant="outline"
+                  iconOnly
+                  color="neutral"
+                  size="md"
+                  onClick={() => openEdit(webhook)}
+                >
+                  <Icon iconName="gear" iconStyle="regular" />
+                </Button>
+                <Button
+                  data-testid="delete-webhook"
+                  variant="outline"
+                  iconOnly
+                  color="neutral"
+                  size="md"
+                  onClick={() => onDelete(webhook)}
+                >
+                  <Icon iconName="trash-can" iconStyle="regular" />
+                </Button>
+              </div>
+            </li>
+          ))}
+        </ul>
+      ) : (
+        <div className="px-5 py-4 text-center">
+          <Icon iconName="wave-pulse" className="text-neutral-subtle" />
+          <p className="mt-1 text-xs font-medium text-neutral-subtle" data-testid="empty-webhook">
+            No webhook found. <br /> Please add one.
+          </p>
+        </div>
+      )}
+    </BlockContent>
+  )
+}
+
+export function SettingsWebhook() {
+  useDocumentTitle('Webhooks - Organization settings')
+  const { organizationId = '' } = useParams({ strict: false })
+  const { openModal, closeModal } = useModal()
+
+  const openAddNew = () => {
+    openModal({
+      content: <WebhookCrudModal organizationId={organizationId} closeModal={closeModal} />,
+    })
+  }
+
+  return (
+    <div className="w-full">
+      <Section className="p-8">
+        <div className="relative">
+          <SettingsHeading
+            title="Webhook"
+            description="Qovery allows you to create webhooks at organization-level so that, when an event happens on an
+              environment within your organization, you can get notified on external applications (for instance, Slack)."
+          />
+          <Button size="md" className="absolute right-0 top-0 shrink-0 gap-2" onClick={openAddNew}>
+            <Icon iconName="circle-plus" iconStyle="regular" />
+            Add new
+          </Button>
+        </div>
+        <div className="max-w-content-with-navigation-left">
+          <Suspense fallback={<WebhookSkeleton />}>
+            <WebhookList organizationId={organizationId} />
+          </Suspense>
+        </div>
+      </Section>
+    </div>
+  )
+}
diff --git a/libs/pages/settings/src/lib/feature/page-organization-webhooks-feature/webhook-crud-modal-feature/webhook-crud-modal-feature.spec.tsx b/libs/domains/organizations/feature/src/lib/settings-webhook/webhook-crud-modal/webhook-crud-modal.spec.tsx
similarity index 81%
rename from libs/pages/settings/src/lib/feature/page-organization-webhooks-feature/webhook-crud-modal-feature/webhook-crud-modal-feature.spec.tsx
rename to libs/domains/organizations/feature/src/lib/settings-webhook/webhook-crud-modal/webhook-crud-modal.spec.tsx
index 0883efe6328..49f5566b550 100644
--- a/libs/pages/settings/src/lib/feature/page-organization-webhooks-feature/webhook-crud-modal-feature/webhook-crud-modal-feature.spec.tsx
+++ b/libs/domains/organizations/feature/src/lib/settings-webhook/webhook-crud-modal/webhook-crud-modal.spec.tsx
@@ -1,8 +1,9 @@
 import selectEvent from 'react-select-event'
-import * as organizationDomain from '@qovery/domains/organizations/feature'
 import { webhookFactoryMock } from '@qovery/shared/factories'
 import { renderWithProviders, screen } from '@qovery/shared/util-tests'
-import WebhookCrudModalFeature, { type WebhookCrudModalFeatureProps } from './webhook-crud-modal-feature'
+import * as useCreateWebhookHook from '../../hooks/use-create-webhook/use-create-webhook'
+import * as useEditWebhookHook from '../../hooks/use-edit-webhook/use-edit-webhook'
+import WebhookCrudModal, { type WebhookCrudModalFeatureProps } from './webhook-crud-modal'
 
 const mockWebhook = webhookFactoryMock(1)[0]
 const mockWebhookWithSecret = { ...mockWebhook, target_secret_set: true }
@@ -12,26 +13,33 @@ const props: WebhookCrudModalFeatureProps = {
   webhook: undefined,
 }
 
-const useEditWebhooksMockSpy = jest.spyOn(organizationDomain, 'useEditWebhook') as jest.Mock
-const useCreateWebhookMockSpy = jest.spyOn(organizationDomain, 'useCreateWebhook') as jest.Mock
+const useEditWebhookMockSpy = jest.spyOn(useEditWebhookHook, 'useEditWebhook') as jest.Mock
+const useCreateWebhookMockSpy = jest.spyOn(useCreateWebhookHook, 'useCreateWebhook') as jest.Mock
+
+describe('WebhookCrudModal', () => {
+  let createWebhookMock: jest.Mock
+  let editWebhookMock: jest.Mock
 
-describe('WebhookCrudModalFeature', () => {
   beforeEach(() => {
-    useEditWebhooksMockSpy.mockReturnValue({
-      mutateAsync: jest.fn(),
+    createWebhookMock = jest.fn().mockResolvedValue(undefined)
+    editWebhookMock = jest.fn().mockResolvedValue(undefined)
+    useEditWebhookMockSpy.mockReturnValue({
+      mutateAsync: editWebhookMock,
+      isLoading: false,
     })
     useCreateWebhookMockSpy.mockReturnValue({
-      mutateAsync: jest.fn(),
+      mutateAsync: createWebhookMock,
+      isLoading: false,
     })
   })
 
   it('should render successfully', () => {
-    const { baseElement } = renderWithProviders(<WebhookCrudModalFeature {...props} webhook={mockWebhook} />)
+    const { baseElement } = renderWithProviders(<WebhookCrudModal {...props} webhook={mockWebhook} />)
     expect(baseElement).toBeTruthy()
   })
 
   it('should render all the inputs when creating', () => {
-    renderWithProviders(<WebhookCrudModalFeature {...props} />)
+    renderWithProviders(<WebhookCrudModal {...props} />)
 
     screen.getByLabelText('URL')
     screen.getByLabelText('Kind')
@@ -43,7 +51,7 @@ describe('WebhookCrudModalFeature', () => {
   })
 
   it('should not show secret field when editing (before form is dirty)', () => {
-    renderWithProviders(<WebhookCrudModalFeature {...props} webhook={mockWebhook} />)
+    renderWithProviders(<WebhookCrudModal {...props} webhook={mockWebhook} />)
 
     screen.getByLabelText('URL')
     screen.getByLabelText('Kind')
@@ -53,7 +61,7 @@ describe('WebhookCrudModalFeature', () => {
   })
 
   it('should mutate useCreateWebhook', async () => {
-    const { userEvent } = renderWithProviders(<WebhookCrudModalFeature {...props} />)
+    const { userEvent } = renderWithProviders(<WebhookCrudModal {...props} />)
 
     const url = screen.getByLabelText('URL')
     const kind = screen.getByLabelText('Kind')
@@ -88,7 +96,7 @@ describe('WebhookCrudModalFeature', () => {
 
     await userEvent.click(button)
 
-    expect(useCreateWebhookMockSpy().mutateAsync).toHaveBeenCalledWith({
+    expect(createWebhookMock).toHaveBeenCalledWith({
       organizationId: '000-000-000',
       webhookRequest: {
         target_url: 'https://test.com',
@@ -103,7 +111,7 @@ describe('WebhookCrudModalFeature', () => {
   })
 
   it('should mutate useEditWebhook (webhook without existing secret)', async () => {
-    const { userEvent } = renderWithProviders(<WebhookCrudModalFeature {...props} webhook={mockWebhook} />)
+    const { userEvent } = renderWithProviders(<WebhookCrudModal {...props} webhook={mockWebhook} />)
     const url = screen.getByLabelText('URL')
     const kind = screen.getByLabelText('Kind')
     const description = screen.getByLabelText('Description')
@@ -132,7 +140,7 @@ describe('WebhookCrudModalFeature', () => {
 
     await userEvent.click(button)
 
-    expect(useEditWebhooksMockSpy().mutateAsync).toHaveBeenCalledWith({
+    expect(editWebhookMock).toHaveBeenCalledWith({
       organizationId: '000-000-000',
       webhookId: mockWebhook.id,
       webhookRequest: {
@@ -149,7 +157,7 @@ describe('WebhookCrudModalFeature', () => {
   })
 
   it('should trim URL with trailing whitespace on create', async () => {
-    const { userEvent } = renderWithProviders(<WebhookCrudModalFeature {...props} />)
+    const { userEvent } = renderWithProviders(<WebhookCrudModal {...props} />)
 
     const url = screen.getByLabelText('URL')
     const kind = screen.getByLabelText('Kind')
@@ -169,7 +177,7 @@ describe('WebhookCrudModalFeature', () => {
     const button = screen.getByTestId('submit-button')
     await userEvent.click(button)
 
-    expect(useCreateWebhookMockSpy().mutateAsync).toHaveBeenCalledWith({
+    expect(createWebhookMock).toHaveBeenCalledWith({
       organizationId: '000-000-000',
       webhookRequest: expect.objectContaining({
         target_url: 'https://test.com',
@@ -178,7 +186,7 @@ describe('WebhookCrudModalFeature', () => {
   })
 
   it('should trim URL with leading whitespace on create', async () => {
-    const { userEvent } = renderWithProviders(<WebhookCrudModalFeature {...props} />)
+    const { userEvent } = renderWithProviders(<WebhookCrudModal {...props} />)
 
     const url = screen.getByLabelText('URL')
     const kind = screen.getByLabelText('Kind')
@@ -198,7 +206,7 @@ describe('WebhookCrudModalFeature', () => {
     const button = screen.getByTestId('submit-button')
     await userEvent.click(button)
 
-    expect(useCreateWebhookMockSpy().mutateAsync).toHaveBeenCalledWith({
+    expect(createWebhookMock).toHaveBeenCalledWith({
       organizationId: '000-000-000',
       webhookRequest: expect.objectContaining({
         target_url: 'https://test.com',
@@ -207,7 +215,7 @@ describe('WebhookCrudModalFeature', () => {
   })
 
   it('should trim URL with whitespace on edit', async () => {
-    const { userEvent } = renderWithProviders(<WebhookCrudModalFeature {...props} webhook={mockWebhook} />)
+    const { userEvent } = renderWithProviders(<WebhookCrudModal {...props} webhook={mockWebhook} />)
 
     const url = screen.getByLabelText('URL')
 
@@ -218,7 +226,7 @@ describe('WebhookCrudModalFeature', () => {
     const button = screen.getByTestId('submit-button')
     await userEvent.click(button)
 
-    expect(useEditWebhooksMockSpy().mutateAsync).toHaveBeenCalledWith({
+    expect(editWebhookMock).toHaveBeenCalledWith({
       organizationId: '000-000-000',
       webhookId: mockWebhook.id,
       webhookRequest: expect.objectContaining({
@@ -229,20 +237,20 @@ describe('WebhookCrudModalFeature', () => {
 
   describe('secret field handling', () => {
     it('should show secret field as optional when creating new webhook', () => {
-      renderWithProviders(<WebhookCrudModalFeature {...props} />)
+      renderWithProviders(<WebhookCrudModal {...props} />)
 
       expect(screen.getByLabelText('Secret')).toBeInTheDocument()
     })
 
     it('should not show secret field when editing webhook (before form is dirty)', () => {
-      renderWithProviders(<WebhookCrudModalFeature {...props} webhook={mockWebhookWithSecret} />)
+      renderWithProviders(<WebhookCrudModal {...props} webhook={mockWebhookWithSecret} />)
 
       expect(screen.queryByLabelText('Secret')).not.toBeInTheDocument()
       expect(screen.queryByText('Confirm your secret')).not.toBeInTheDocument()
     })
 
     it('should show "Confirm your secret" section when editing webhook with existing secret and form is dirty', async () => {
-      const { userEvent } = renderWithProviders(<WebhookCrudModalFeature {...props} webhook={mockWebhookWithSecret} />)
+      const { userEvent } = renderWithProviders(<WebhookCrudModal {...props} webhook={mockWebhookWithSecret} />)
 
       expect(screen.queryByText('Confirm your secret')).not.toBeInTheDocument()
 
@@ -255,7 +263,7 @@ describe('WebhookCrudModalFeature', () => {
     })
 
     it('should not show secret field when editing webhook without existing secret (even when dirty)', async () => {
-      const { userEvent } = renderWithProviders(<WebhookCrudModalFeature {...props} webhook={mockWebhook} />)
+      const { userEvent } = renderWithProviders(<WebhookCrudModal {...props} webhook={mockWebhook} />)
 
       const description = screen.getByLabelText('Description')
       await userEvent.clear(description)
@@ -266,7 +274,7 @@ describe('WebhookCrudModalFeature', () => {
     })
 
     it('should require secret when editing webhook with existing secret', async () => {
-      const { userEvent } = renderWithProviders(<WebhookCrudModalFeature {...props} webhook={mockWebhookWithSecret} />)
+      const { userEvent } = renderWithProviders(<WebhookCrudModal {...props} webhook={mockWebhookWithSecret} />)
 
       const description = screen.getByLabelText('Description')
       await userEvent.clear(description)
@@ -278,11 +286,11 @@ describe('WebhookCrudModalFeature', () => {
       const button = screen.getByTestId('submit-button')
       await userEvent.click(button)
 
-      expect(useEditWebhooksMockSpy().mutateAsync).not.toHaveBeenCalled()
+      expect(editWebhookMock).not.toHaveBeenCalled()
     })
 
     it('should allow submit when editing webhook with existing secret and secret provided', async () => {
-      const { userEvent } = renderWithProviders(<WebhookCrudModalFeature {...props} webhook={mockWebhookWithSecret} />)
+      const { userEvent } = renderWithProviders(<WebhookCrudModal {...props} webhook={mockWebhookWithSecret} />)
 
       const description = screen.getByLabelText('Description')
       await userEvent.clear(description)
@@ -294,7 +302,7 @@ describe('WebhookCrudModalFeature', () => {
       const button = screen.getByTestId('submit-button')
       await userEvent.click(button)
 
-      expect(useEditWebhooksMockSpy().mutateAsync).toHaveBeenCalledWith({
+      expect(editWebhookMock).toHaveBeenCalledWith({
         organizationId: '000-000-000',
         webhookId: mockWebhookWithSecret.id,
         webhookRequest: expect.objectContaining({
@@ -304,7 +312,7 @@ describe('WebhookCrudModalFeature', () => {
     })
 
     it('should display password type input for secret field when shown', async () => {
-      const { userEvent } = renderWithProviders(<WebhookCrudModalFeature {...props} webhook={mockWebhookWithSecret} />)
+      const { userEvent } = renderWithProviders(<WebhookCrudModal {...props} webhook={mockWebhookWithSecret} />)
 
       const description = screen.getByLabelText('Description')
       await userEvent.type(description, 'x')
@@ -314,7 +322,7 @@ describe('WebhookCrudModalFeature', () => {
     })
 
     it('should allow editing webhook without secret and not providing a secret', async () => {
-      const { userEvent } = renderWithProviders(<WebhookCrudModalFeature {...props} webhook={mockWebhook} />)
+      const { userEvent } = renderWithProviders(<WebhookCrudModal {...props} webhook={mockWebhook} />)
 
       const description = screen.getByLabelText('Description')
       await userEvent.clear(description)
@@ -323,7 +331,7 @@ describe('WebhookCrudModalFeature', () => {
       const button = screen.getByTestId('submit-button')
       await userEvent.click(button)
 
-      expect(useEditWebhooksMockSpy().mutateAsync).toHaveBeenCalledWith({
+      expect(editWebhookMock).toHaveBeenCalledWith({
         organizationId: '000-000-000',
         webhookId: mockWebhook.id,
         webhookRequest: expect.objectContaining({
diff --git a/libs/domains/organizations/feature/src/lib/settings-webhook/webhook-crud-modal/webhook-crud-modal.tsx b/libs/domains/organizations/feature/src/lib/settings-webhook/webhook-crud-modal/webhook-crud-modal.tsx
new file mode 100644
index 00000000000..5e060f55c45
--- /dev/null
+++ b/libs/domains/organizations/feature/src/lib/settings-webhook/webhook-crud-modal/webhook-crud-modal.tsx
@@ -0,0 +1,292 @@
+import {
+  EnvironmentModeEnum,
+  type OrganizationWebhookCreateRequest,
+  OrganizationWebhookEventEnum,
+  OrganizationWebhookKindEnum,
+  type OrganizationWebhookResponse,
+} from 'qovery-typescript-axios'
+import { type FormEventHandler } from 'react'
+import { FormProvider, useForm } from 'react-hook-form'
+import { Controller } from 'react-hook-form'
+import { IconEnum } from '@qovery/shared/enums'
+import { useModal } from '@qovery/shared/ui'
+import { Icon, InputSelect, InputTags, InputText, InputTextArea, ModalCrud } from '@qovery/shared/ui'
+import { useCreateWebhook } from '../../hooks/use-create-webhook/use-create-webhook'
+import { useEditWebhook } from '../../hooks/use-edit-webhook/use-edit-webhook'
+
+export interface WebhookCrudModalFeatureProps {
+  organizationId: string
+  closeModal: () => void
+  webhook?: OrganizationWebhookResponse
+}
+
+export function WebhookCrudModal({ organizationId, closeModal, webhook }: WebhookCrudModalFeatureProps) {
+  const { enableAlertClickOutside } = useModal()
+  const { mutateAsync: createWebhook, isLoading: isLoadingCreateWebhook } = useCreateWebhook()
+  const { mutateAsync: editWebhook, isLoading: isLoadingEditWebhook } = useEditWebhook()
+  const isEdit = Boolean(webhook)
+  const hasExistingSecret = Boolean(webhook?.target_secret_set)
+
+  const methods = useForm<OrganizationWebhookCreateRequest>({
+    mode: 'all',
+    defaultValues: {
+      kind: webhook?.kind ?? undefined,
+      environment_types_filter: webhook?.environment_types_filter ?? [],
+      project_names_filter: webhook?.project_names_filter ?? [],
+      events: webhook?.events ?? [],
+      description: webhook?.description ?? '',
+      target_url: webhook?.target_url ?? '',
+      target_secret: '',
+    },
+  })
+
+  methods.watch(() => enableAlertClickOutside(methods.formState.isDirty))
+
+  const isEditDirty = isEdit && methods.formState.isDirty
+
+  const onSubmit = methods.handleSubmit(async (data) => {
+    const trimmedData = {
+      ...data,
+      target_url: data.target_url.trim(),
+      target_secret: data.target_secret || undefined,
+    }
+    try {
+      if (webhook) {
+        await editWebhook({
+          organizationId,
+          webhookId: webhook.id,
+          webhookRequest: { ...webhook, ...trimmedData },
+        })
+        closeModal()
+      } else {
+        await createWebhook({
+          organizationId,
+          webhookRequest: trimmedData,
+        })
+        closeModal()
+      }
+    } catch (error) {
+      console.error(error)
+    }
+  })
+
+  return (
+    <FormProvider {...methods}>
+      <ModalCrud
+        title="Create new webhook"
+        onClose={closeModal}
+        onSubmit={onSubmit}
+        submitLabel={isEdit ? 'Update' : 'Create'}
+        loading={isLoadingCreateWebhook || isLoadingEditWebhook}
+      >
+        <div className="mb-3 text-base font-medium text-neutral">General</div>
+
+        <Controller
+          name="target_url"
+          control={methods.control}
+          rules={{
+            required: 'Please enter a target url.',
+          }}
+          render={({ field, fieldState: { error } }) => (
+            <InputText
+              className="mb-3"
+              name={field.name}
+              onChange={field.onChange}
+              value={field.value}
+              label="URL"
+              error={error?.message}
+            />
+          )}
+        />
+
+        <Controller
+          name="kind"
+          control={methods.control}
+          rules={{
+            required: 'Please select a kind.',
+          }}
+          render={({ field, fieldState: { error } }) => (
+            <InputSelect
+              className="mb-3"
+              portal
+              options={[
+                {
+                  label: 'Slack',
+                  value: OrganizationWebhookKindEnum.SLACK,
+                  icon: <Icon name={IconEnum.SLACK} className="h-4 w-4" />,
+                },
+                {
+                  label: 'Standard',
+                  value: OrganizationWebhookKindEnum.STANDARD,
+                  icon: <Icon name={IconEnum.QOVERY} className="h-4 w-4" />,
+                },
+              ]}
+              onChange={field.onChange}
+              value={field.value}
+              label="Kind"
+              error={error?.message}
+            />
+          )}
+        />
+
+        <Controller
+          name="description"
+          control={methods.control}
+          render={({ field }) => (
+            <InputTextArea
+              className="mb-3"
+              name={field.name}
+              onChange={field.onChange}
+              value={field.value}
+              label="Description"
+            />
+          )}
+        />
+
+        {!isEdit && (
+          <Controller
+            name="target_secret"
+            control={methods.control}
+            render={({ field }) => (
+              <InputText
+                className="mb-3"
+                type="password"
+                name={field.name}
+                onChange={field.onChange}
+                value={field.value}
+                label="Secret"
+                placeholder="Enter webhook secret"
+              />
+            )}
+          />
+        )}
+
+        <div className="mb-3 mt-6 text-base font-medium text-neutral">Event & filters</div>
+
+        <div className="mb-3">
+          <Controller
+            name="events"
+            control={methods.control}
+            rules={{
+              required: 'Please enter events',
+            }}
+            render={({ field }) => (
+              <InputSelect
+                onChange={field.onChange}
+                value={field.value}
+                isMulti
+                portal
+                options={[
+                  {
+                    label: OrganizationWebhookEventEnum.FAILURE,
+                    value: OrganizationWebhookEventEnum.FAILURE,
+                  },
+                  {
+                    label: OrganizationWebhookEventEnum.STARTED,
+                    value: OrganizationWebhookEventEnum.STARTED,
+                  },
+                  {
+                    label: OrganizationWebhookEventEnum.CANCELLED,
+                    value: OrganizationWebhookEventEnum.CANCELLED,
+                  },
+                  {
+                    label: OrganizationWebhookEventEnum.SUCCESSFUL,
+                    value: OrganizationWebhookEventEnum.SUCCESSFUL,
+                  },
+                ]}
+                label="Events"
+                dataTestId="events-input"
+                hint="List all the events you want to be notified about."
+              />
+            )}
+          />
+        </div>
+
+        <div className="mb-3">
+          <Controller
+            name="project_names_filter"
+            control={methods.control}
+            render={({ field }) => (
+              <InputTags
+                onChange={field.onChange}
+                tags={field.value || []}
+                placeholder="Add project name"
+                label="Project name filter"
+                dataTestId="project-filter-input"
+              />
+            )}
+          />
+          <p className="ml-3 mt-0.5 text-xs text-neutral-subtle">
+            Webhook will be triggered only for projects whose names match or, if you're using a wildcard, start with one
+            of the values from your list.
+            <br />
+            Press Enter to add a new value.
+          </p>
+        </div>
+
+        <div className="mb-3">
+          <Controller
+            name="environment_types_filter"
+            control={methods.control}
+            render={({ field }) => (
+              <InputSelect
+                portal
+                onChange={field.onChange}
+                isMulti
+                options={[
+                  {
+                    label: EnvironmentModeEnum.DEVELOPMENT,
+                    value: EnvironmentModeEnum.DEVELOPMENT,
+                  },
+                  {
+                    label: EnvironmentModeEnum.STAGING,
+                    value: EnvironmentModeEnum.STAGING,
+                  },
+                  {
+                    label: EnvironmentModeEnum.PREVIEW,
+                    value: EnvironmentModeEnum.PREVIEW,
+                  },
+                  {
+                    label: EnvironmentModeEnum.PRODUCTION,
+                    value: EnvironmentModeEnum.PRODUCTION,
+                  },
+                ]}
+                value={field.value}
+                label="Environment type filter"
+                dataTestId="environment-type-input"
+                hint="Webhook will be triggered only for events happening on the environment with the selected environment type."
+              />
+            )}
+          />
+        </div>
+
+        {isEditDirty && hasExistingSecret && (
+          <>
+            <hr className="my-3 border-neutral" />
+            <span className="text-sm text-neutral-subtle">Confirm your secret</span>
+            <Controller
+              name="target_secret"
+              control={methods.control}
+              rules={{
+                required: 'Please enter a secret.',
+              }}
+              render={({ field, fieldState: { error } }) => (
+                <InputText
+                  className="mt-3"
+                  type="password"
+                  name={field.name}
+                  onChange={field.onChange}
+                  value={field.value}
+                  label="Secret"
+                  error={error?.message}
+                />
+              )}
+            />
+          </>
+        )}
+      </ModalCrud>
+    </FormProvider>
+  )
+}
+
+export default WebhookCrudModal
diff --git a/libs/pages/settings/src/lib/feature/page-organization-webhooks-feature/page-organization-webhooks-feature.spec.tsx b/libs/pages/settings/src/lib/feature/page-organization-webhooks-feature/page-organization-webhooks-feature.spec.tsx
deleted file mode 100644
index dc453ad3bd6..00000000000
--- a/libs/pages/settings/src/lib/feature/page-organization-webhooks-feature/page-organization-webhooks-feature.spec.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import * as organizationsDomain from '@qovery/domains/organizations/feature'
-import { webhookFactoryMock } from '@qovery/shared/factories'
-import { renderWithProviders, screen } from '@qovery/shared/util-tests'
-import PageOrganizationWebhooksFeature from './page-organization-webhooks-feature'
-
-const useWebhooksMockSpy = jest.spyOn(organizationsDomain, 'useWebhooks') as jest.Mock
-const useEditWebhooksMockSpy = jest.spyOn(organizationsDomain, 'useEditWebhook') as jest.Mock
-
-const mockWebhooks = webhookFactoryMock(1)
-
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useParams: () => ({ organizationId: '1' }),
-}))
-
-describe('PageOrganizationWebhooksFeature', () => {
-  beforeEach(() => {
-    useWebhooksMockSpy.mockReturnValue({
-      data: mockWebhooks,
-    })
-    useEditWebhooksMockSpy.mockReturnValue({
-      mutateAsync: jest.fn(),
-    })
-  })
-
-  it('should render successfully', () => {
-    const { baseElement } = renderWithProviders(<PageOrganizationWebhooksFeature />)
-    expect(baseElement).toBeTruthy()
-  })
-
-  it('should render 1 row', () => {
-    renderWithProviders(<PageOrganizationWebhooksFeature />)
-    const rows = screen.getAllByTestId('webhook-row')
-    expect(rows).toHaveLength(1)
-  })
-
-  it('should render empty placeholder', () => {
-    useWebhooksMockSpy.mockReturnValue({
-      data: [],
-    })
-    renderWithProviders(<PageOrganizationWebhooksFeature />)
-    screen.getByTestId('empty-webhook')
-  })
-
-  it('should render pass the toggle to true', async () => {
-    const { userEvent } = renderWithProviders(<PageOrganizationWebhooksFeature />)
-
-    const input = screen.getByTestId('input-toggle-button')
-    await userEvent.click(input)
-
-    expect(useEditWebhooksMockSpy().mutateAsync).toHaveBeenCalledWith({
-      organizationId: '1',
-      webhookId: mockWebhooks[0].id,
-      webhookRequest: {
-        ...mockWebhooks[0],
-        enabled: true,
-      },
-    })
-  })
-})
diff --git a/libs/pages/settings/src/lib/feature/page-organization-webhooks-feature/page-organization-webhooks-feature.tsx b/libs/pages/settings/src/lib/feature/page-organization-webhooks-feature/page-organization-webhooks-feature.tsx
deleted file mode 100644
index 249080e4ff8..00000000000
--- a/libs/pages/settings/src/lib/feature/page-organization-webhooks-feature/page-organization-webhooks-feature.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { type OrganizationWebhookResponse } from 'qovery-typescript-axios'
-import { useParams } from 'react-router-dom'
-import { useDeleteWebhook, useEditWebhook, useWebhooks } from '@qovery/domains/organizations/feature'
-import { useModal, useModalConfirmation } from '@qovery/shared/ui'
-import { useDocumentTitle } from '@qovery/shared/util-hooks'
-import PageOrganizationWebhooks from '../../ui/page-organization-webhooks/page-organization-webhooks'
-import WebhookCrudModalFeature from './webhook-crud-modal-feature/webhook-crud-modal-feature'
-
-export function PageOrganizationWebhooksFeature() {
-  useDocumentTitle('Webhooks - Organization settings')
-  const { organizationId = '' } = useParams()
-  const fetchWebhooks = useWebhooks({ organizationId })
-  const { mutateAsync: deleteWebhook } = useDeleteWebhook()
-  const { openModal, closeModal } = useModal()
-  const { openModalConfirmation } = useModalConfirmation()
-  const { mutateAsync: editWebhook } = useEditWebhook()
-
-  const openAddNew = () => {
-    openModal({
-      content: <WebhookCrudModalFeature organizationId={organizationId} closeModal={closeModal} />,
-    })
-  }
-
-  const openEdit = (webhook: OrganizationWebhookResponse) => {
-    openModal({
-      content: <WebhookCrudModalFeature organizationId={organizationId} webhook={webhook} closeModal={closeModal} />,
-    })
-  }
-
-  const onDelete = (webhook: OrganizationWebhookResponse) => {
-    openModalConfirmation({
-      title: 'Delete webhook',
-      confirmationMethod: 'action',
-      name: webhook.target_url || '',
-      action: () => {
-        try {
-          deleteWebhook({ organizationId, webhookId: webhook.id })
-        } catch (error) {
-          console.error(error)
-        }
-      },
-    })
-  }
-
-  const toggleWebhook = (webhookId: string, enabled: boolean) => {
-    // this cast as Required is there to fix an incoherency in the api-doc. If request have all the field required
-    // then the Response must also have all the fields defined
-    const webhook = fetchWebhooks.data?.find(
-      (webhook) => webhook.id === webhookId
-    ) as Required<OrganizationWebhookResponse>
-
-    if (webhook !== undefined) {
-      try {
-        editWebhook({
-          organizationId,
-          webhookId,
-          webhookRequest: {
-            ...webhook,
-            enabled: enabled,
-          },
-        })
-        closeModal()
-      } catch (error) {
-        console.error(error)
-      }
-    }
-  }
-
-  return (
-    <PageOrganizationWebhooks
-      webhooks={fetchWebhooks.data}
-      webhookLoading={fetchWebhooks.isLoading}
-      openAddNew={openAddNew}
-      onToggle={toggleWebhook}
-      openEdit={openEdit}
-      onDelete={onDelete}
-    />
-  )
-}
-
-export default PageOrganizationWebhooksFeature
diff --git a/libs/pages/settings/src/lib/feature/page-organization-webhooks-feature/webhook-crud-modal-feature/webhook-crud-modal-feature.tsx b/libs/pages/settings/src/lib/feature/page-organization-webhooks-feature/webhook-crud-modal-feature/webhook-crud-modal-feature.tsx
deleted file mode 100644
index 453f4f8038d..00000000000
--- a/libs/pages/settings/src/lib/feature/page-organization-webhooks-feature/webhook-crud-modal-feature/webhook-crud-modal-feature.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import { type OrganizationWebhookCreateRequest, type OrganizationWebhookResponse } from 'qovery-typescript-axios'
-import { FormProvider, useForm } from 'react-hook-form'
-import { useCreateWebhook, useEditWebhook } from '@qovery/domains/organizations/feature'
-import { useModal } from '@qovery/shared/ui'
-import WebhookCrudModal from '../../../ui/page-organization-webhooks/webhook-crud-modal/webhook-crud-modal'
-
-export interface WebhookCrudModalFeatureProps {
-  organizationId: string
-  closeModal: () => void
-  webhook?: OrganizationWebhookResponse
-}
-
-export function WebhookCrudModalFeature({ organizationId, closeModal, webhook }: WebhookCrudModalFeatureProps) {
-  const { enableAlertClickOutside } = useModal()
-  const { mutateAsync: createWebhook, isLoading: isLoadingCreateWebhook } = useCreateWebhook()
-  const { mutateAsync: editWebhook, isLoading: isLoadingEditWebhook } = useEditWebhook()
-
-  const isEdit = Boolean(webhook)
-  const hasExistingSecret = Boolean(webhook?.target_secret_set)
-
-  const methods = useForm<OrganizationWebhookCreateRequest>({
-    mode: 'all',
-    defaultValues: {
-      kind: webhook?.kind ?? undefined,
-      environment_types_filter: webhook?.environment_types_filter ?? [],
-      project_names_filter: webhook?.project_names_filter ?? [],
-      events: webhook?.events ?? [],
-      description: webhook?.description ?? '',
-      target_url: webhook?.target_url ?? '',
-      target_secret: '',
-    },
-  })
-
-  methods.watch(() => enableAlertClickOutside(methods.formState.isDirty))
-
-  const isEditDirty = isEdit && methods.formState.isDirty
-
-  const onSubmit = methods.handleSubmit(async (data) => {
-    const trimmedData = {
-      ...data,
-      target_url: data.target_url.trim(),
-      target_secret: data.target_secret || undefined,
-    }
-    try {
-      if (webhook) {
-        await editWebhook({
-          organizationId,
-          webhookId: webhook.id,
-          webhookRequest: { ...webhook, ...trimmedData },
-        })
-        closeModal()
-      } else {
-        await createWebhook({
-          organizationId,
-          webhookRequest: trimmedData,
-        })
-        closeModal()
-      }
-    } catch (error) {
-      console.error(error)
-    }
-  })
-
-  return (
-    <FormProvider {...methods}>
-      <WebhookCrudModal
-        closeModal={closeModal}
-        onSubmit={onSubmit}
-        isEdition={isEdit}
-        isLoading={isLoadingCreateWebhook || isLoadingEditWebhook}
-        hasExistingSecret={hasExistingSecret}
-        isEditDirty={isEditDirty}
-      />
-    </FormProvider>
-  )
-}
-
-export default WebhookCrudModalFeature
diff --git a/libs/pages/settings/src/lib/ui/page-organization-webhooks/page-organization-webhooks.spec.tsx b/libs/pages/settings/src/lib/ui/page-organization-webhooks/page-organization-webhooks.spec.tsx
deleted file mode 100644
index f497259ab56..00000000000
--- a/libs/pages/settings/src/lib/ui/page-organization-webhooks/page-organization-webhooks.spec.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { webhookFactoryMock } from '@qovery/shared/factories'
-import { renderWithProviders, screen, within } from '@qovery/shared/util-tests'
-import PageOrganizationWebhooks, { type PageOrganizationWebhooksProps } from './page-organization-webhooks'
-
-const mockWebhooks = webhookFactoryMock(3)
-const props: PageOrganizationWebhooksProps = {
-  openEdit: jest.fn(),
-  onToggle: jest.fn(),
-  webhooks: mockWebhooks,
-  webhookLoading: false,
-  openAddNew: jest.fn(),
-  onDelete: jest.fn(),
-}
-
-describe('PageOrganizationWebhooks', () => {
-  it('should render successfully', () => {
-    const { baseElement } = renderWithProviders(<PageOrganizationWebhooks {...props} />)
-    expect(baseElement).toBeTruthy()
-  })
-
-  it('should open create modal on click on add new', async () => {
-    const { userEvent } = renderWithProviders(<PageOrganizationWebhooks {...props} />)
-    const button = screen.getByTestId('add-new')
-
-    await userEvent.click(button)
-
-    expect(props.openAddNew).toHaveBeenCalled()
-  })
-
-  it('should open edit modal on click on cog', async () => {
-    const { userEvent } = renderWithProviders(<PageOrganizationWebhooks {...props} />)
-    const button = screen.getAllByTestId('edit-webhook')[0]
-
-    await userEvent.click(button)
-
-    expect(props.openEdit).toHaveBeenCalledWith(mockWebhooks[0])
-  })
-
-  it('should display three rows with good values inside', async () => {
-    renderWithProviders(<PageOrganizationWebhooks {...props} />)
-    const rows = screen.getAllByTestId('webhook-row')
-    expect(rows).toHaveLength(3)
-
-    if (mockWebhooks[0].target_url) within(rows[0]).getByText(mockWebhooks[0].target_url)
-    within(rows[0]).getByTestId('edit-webhook')
-    within(rows[0]).getByTestId('input-toggle')
-    within(rows[0]).getByTestId('delete-webhook')
-  })
-
-  it('should call onToggle', async () => {
-    const { userEvent } = renderWithProviders(<PageOrganizationWebhooks {...props} />)
-    const toggles = screen.getAllByTestId('input-toggle')
-
-    const input = within(toggles[0]).getByLabelText('toggle-btn')
-    await userEvent.click(input)
-
-    expect(props.onToggle).toHaveBeenCalledWith(mockWebhooks[0].id, !mockWebhooks[0].enabled)
-  })
-
-  it('should display empty placeholder', async () => {
-    renderWithProviders(<PageOrganizationWebhooks {...props} webhooks={[]} />)
-
-    screen.getByTestId('empty-webhook')
-  })
-
-  it('should call onDelete', async () => {
-    const { userEvent } = renderWithProviders(<PageOrganizationWebhooks {...props} />)
-    const rows = screen.getAllByTestId('webhook-row')
-
-    const toggle = within(rows[0]).getByTestId('delete-webhook')
-    await userEvent.click(toggle)
-
-    expect(props.onDelete).toHaveBeenCalledWith(mockWebhooks[0])
-  })
-})
diff --git a/libs/pages/settings/src/lib/ui/page-organization-webhooks/page-organization-webhooks.tsx b/libs/pages/settings/src/lib/ui/page-organization-webhooks/page-organization-webhooks.tsx
deleted file mode 100644
index 2bfcf733609..00000000000
--- a/libs/pages/settings/src/lib/ui/page-organization-webhooks/page-organization-webhooks.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import { OrganizationWebhookKindEnum, type OrganizationWebhookResponse } from 'qovery-typescript-axios'
-import { NeedHelp } from '@qovery/shared/assistant/feature'
-import { IconEnum } from '@qovery/shared/enums'
-import {
-  BlockContent,
-  Button,
-  Heading,
-  Icon,
-  InputToggle,
-  LoaderSpinner,
-  Section,
-  Tooltip,
-  Truncate,
-} from '@qovery/shared/ui'
-import { dateUTCString, timeAgo } from '@qovery/shared/util-dates'
-import { upperCaseFirstLetter } from '@qovery/shared/util-js'
-
-export interface PageOrganizationWebhooksProps {
-  webhookLoading: boolean
-  webhooks?: OrganizationWebhookResponse[]
-  openAddNew: () => void
-  openEdit: (webhook: OrganizationWebhookResponse) => void
-  onToggle: (id: string, enabled: boolean) => void
-  onDelete: (webhook: OrganizationWebhookResponse) => void
-}
-
-export function PageOrganizationWebhooks(props: PageOrganizationWebhooksProps) {
-  return (
-    <div className="flex w-full flex-col justify-between">
-      <Section className="max-w-content-with-navigation-left p-8">
-        <div className="mb-8 flex justify-between gap-2">
-          <div className="space-y-3">
-            <Heading>Webhook</Heading>
-            <p className="text-xs text-neutral-400">
-              Qovery allows you to create webhooks at organization-level so that, when an event happens on an
-              environment within your organization, you can get notified on external applications (for instance, Slack).
-            </p>
-            <NeedHelp />
-          </div>
-          <Button data-testid="add-new" onClick={props.openAddNew} size="md" className="shrink-0 gap-2">
-            Add new
-            <Icon iconName="circle-plus" iconStyle="regular" />
-          </Button>
-        </div>
-        <BlockContent title="Webhook" classNameContent="p-0">
-          {props.webhookLoading ? (
-            <div className="flex justify-center  px-5 py-4">
-              <LoaderSpinner className="w-5" />
-            </div>
-          ) : props.webhooks && props.webhooks?.length > 0 ? (
-            <ul className="flex flex-col">
-              {props.webhooks?.map((webhook) => (
-                <li
-                  key={webhook.id}
-                  data-testid="webhook-row"
-                  className="flex items-center justify-between border-b border-neutral-250 px-5 py-4 last:border-0"
-                >
-                  <div className="flex flex-col">
-                    <p className="mb-1 flex text-xs font-medium text-neutral-400">
-                      <Truncate truncateLimit={58} text={webhook.target_url || ''} />
-                      {webhook.description && (
-                        <Tooltip content={webhook.description}>
-                          <div className="ml-1 cursor-pointer">
-                            <Icon iconName="circle-info" iconStyle="regular" />
-                          </div>
-                        </Tooltip>
-                      )}
-                    </p>
-                    <div className="flex gap-3 text-xs text-neutral-350">
-                      <span className="flex gap-2">
-                        <Icon
-                          name={
-                            webhook.kind === OrganizationWebhookKindEnum.STANDARD ? IconEnum.QOVERY : IconEnum.SLACK
-                          }
-                          className="h-4 w-4"
-                        />{' '}
-                        {upperCaseFirstLetter(webhook.kind)}
-                      </span>
-                      {webhook.updated_at && (
-                        <span title={dateUTCString(webhook.updated_at)}>
-                          Last updated {timeAgo(new Date(webhook.updated_at))} ago
-                        </span>
-                      )}
-                    </div>
-                  </div>
-                  <div className="flex items-center gap-2">
-                    <InputToggle
-                      title={`${webhook.enabled ? 'Enabled' : 'Disabled'}`}
-                      className={`${webhook.enabled ? 'mr-5' : 'mr-4'}`}
-                      value={webhook.enabled}
-                      small
-                      onChange={(e) => props.onToggle(webhook.id, e)}
-                    />
-                    <Button
-                      data-testid="edit-webhook"
-                      type="button"
-                      variant="surface"
-                      color="neutral"
-                      size="md"
-                      onClick={() => props.openEdit(webhook)}
-                    >
-                      <Icon iconName="gear" iconStyle="regular" />
-                    </Button>
-                    <Button
-                      data-testid="delete-webhook"
-                      type="button"
-                      variant="surface"
-                      color="neutral"
-                      size="md"
-                      onClick={() => props.onDelete(webhook)}
-                    >
-                      <Icon iconName="trash-can" iconStyle="regular" />
-                    </Button>
-                  </div>
-                </li>
-              ))}
-            </ul>
-          ) : (
-            <div className="px-5 py-4 text-center">
-              <Icon iconName="wave-pulse" className="text-neutral-350" />
-              <p className="mt-1 text-xs font-medium text-neutral-350" data-testid="empty-webhook">
-                No webhook found. <br /> Please add one.
-              </p>
-            </div>
-          )}
-        </BlockContent>
-      </Section>
-    </div>
-  )
-}
-
-export default PageOrganizationWebhooks
diff --git a/libs/pages/settings/src/lib/ui/page-organization-webhooks/webhook-crud-modal/webhook-crud-modal.spec.tsx b/libs/pages/settings/src/lib/ui/page-organization-webhooks/webhook-crud-modal/webhook-crud-modal.spec.tsx
deleted file mode 100644
index 8726be9b86e..00000000000
--- a/libs/pages/settings/src/lib/ui/page-organization-webhooks/webhook-crud-modal/webhook-crud-modal.spec.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { wrapWithReactHookForm } from '__tests__/utils/wrap-with-react-hook-form'
-import {
-  EnvironmentModeEnum,
-  type OrganizationWebhookCreateRequest,
-  OrganizationWebhookEventEnum,
-  OrganizationWebhookKindEnum,
-} from 'qovery-typescript-axios'
-import { fireEvent, renderWithProviders, screen } from '@qovery/shared/util-tests'
-import WebhookCrudModal, { type WebhookCrudModalProps } from './webhook-crud-modal'
-
-const props: WebhookCrudModalProps = {
-  onSubmit: jest.fn((e) => e.preventDefault()),
-  isEdition: false,
-  closeModal: jest.fn(),
-}
-
-describe('WebhookCrudModal', () => {
-  const defaultValues: OrganizationWebhookCreateRequest = {
-    target_url: 'https://test.com',
-    kind: OrganizationWebhookKindEnum.STANDARD,
-    description: 'description',
-    target_secret: 'secret',
-    events: [OrganizationWebhookEventEnum.STARTED],
-    project_names_filter: ['test'],
-    environment_types_filter: [EnvironmentModeEnum.PRODUCTION],
-  }
-  it('should render successfully', () => {
-    const { baseElement } = renderWithProviders(
-      wrapWithReactHookForm<OrganizationWebhookCreateRequest>(<WebhookCrudModal {...props} />, {
-        defaultValues,
-      })
-    )
-    expect(baseElement).toBeTruthy()
-  })
-
-  it('should display create', () => {
-    renderWithProviders(
-      wrapWithReactHookForm<OrganizationWebhookCreateRequest>(<WebhookCrudModal {...props} isEdition={false} />, {
-        defaultValues,
-      })
-    )
-    screen.getByText('Create')
-  })
-
-  it('should display update', () => {
-    renderWithProviders(
-      wrapWithReactHookForm<OrganizationWebhookCreateRequest>(<WebhookCrudModal {...props} isEdition={true} />, {
-        defaultValues,
-      })
-    )
-    screen.getByText('Update')
-  })
-
-  it('should call onSubmit', async () => {
-    const spy = jest.fn().mockImplementation((e) => e.preventDefault())
-    props.onSubmit = spy
-    const { userEvent } = renderWithProviders(
-      wrapWithReactHookForm<OrganizationWebhookCreateRequest>(<WebhookCrudModal {...props} />, {
-        defaultValues,
-      })
-    )
-    const url = screen.getByLabelText('URL')
-    fireEvent.change(url, { target: { value: 'https://test.com' } })
-
-    const button = screen.getByText('Create')
-
-    await userEvent.click(button)
-
-    expect(props.onSubmit).toHaveBeenCalled()
-  })
-})
diff --git a/libs/pages/settings/src/lib/ui/page-organization-webhooks/webhook-crud-modal/webhook-crud-modal.tsx b/libs/pages/settings/src/lib/ui/page-organization-webhooks/webhook-crud-modal/webhook-crud-modal.tsx
deleted file mode 100644
index b82d8299fb8..00000000000
--- a/libs/pages/settings/src/lib/ui/page-organization-webhooks/webhook-crud-modal/webhook-crud-modal.tsx
+++ /dev/null
@@ -1,242 +0,0 @@
-import {
-  EnvironmentModeEnum,
-  type OrganizationWebhookCreateRequest,
-  OrganizationWebhookEventEnum,
-  OrganizationWebhookKindEnum,
-} from 'qovery-typescript-axios'
-import { type FormEventHandler } from 'react'
-import { Controller, useFormContext } from 'react-hook-form'
-import { IconEnum } from '@qovery/shared/enums'
-import { Icon, InputSelect, InputTags, InputText, InputTextArea, ModalCrud } from '@qovery/shared/ui'
-
-export interface WebhookCrudModalProps {
-  closeModal: () => void
-  onSubmit: FormEventHandler<HTMLFormElement>
-  isEdition?: boolean
-  isLoading?: boolean
-  hasExistingSecret?: boolean
-  isEditDirty?: boolean
-}
-
-export function WebhookCrudModal(props: WebhookCrudModalProps) {
-  const { closeModal, onSubmit, isEdition, isLoading, hasExistingSecret, isEditDirty } = props
-  const { control } = useFormContext<OrganizationWebhookCreateRequest>()
-
-  return (
-    <ModalCrud
-      title="Create new webhook"
-      onClose={closeModal}
-      onSubmit={onSubmit}
-      submitLabel={isEdition ? 'Update' : 'Create'}
-      loading={isLoading}
-    >
-      <div className="mb-3 font-bold text-neutral-400">General</div>
-
-      <Controller
-        name="target_url"
-        control={control}
-        rules={{
-          required: 'Please enter a target url.',
-        }}
-        render={({ field, fieldState: { error } }) => (
-          <InputText
-            className="mb-3"
-            name={field.name}
-            onChange={field.onChange}
-            value={field.value}
-            label="URL"
-            error={error?.message}
-          />
-        )}
-      />
-
-      <Controller
-        name="kind"
-        control={control}
-        rules={{
-          required: 'Please select a kind.',
-        }}
-        render={({ field, fieldState: { error } }) => (
-          <InputSelect
-            className="mb-3"
-            portal
-            options={[
-              {
-                label: 'Slack',
-                value: OrganizationWebhookKindEnum.SLACK,
-                icon: <Icon name={IconEnum.SLACK} className="h-4 w-4" />,
-              },
-              {
-                label: 'Standard',
-                value: OrganizationWebhookKindEnum.STANDARD,
-                icon: <Icon name={IconEnum.QOVERY} className="h-4 w-4" />,
-              },
-            ]}
-            onChange={field.onChange}
-            value={field.value}
-            label="Kind"
-            error={error?.message}
-          />
-        )}
-      />
-
-      <Controller
-        name="description"
-        control={control}
-        render={({ field }) => (
-          <InputTextArea
-            className="mb-3"
-            name={field.name}
-            onChange={field.onChange}
-            value={field.value}
-            label="Description"
-          />
-        )}
-      />
-
-      {!isEdition && (
-        <Controller
-          name="target_secret"
-          control={control}
-          render={({ field }) => (
-            <InputText
-              className="mb-3"
-              type="password"
-              name={field.name}
-              onChange={field.onChange}
-              value={field.value}
-              label="Secret"
-              placeholder="Enter webhook secret"
-            />
-          )}
-        />
-      )}
-
-      <div className="mb-3 font-bold text-neutral-400">Event & filters</div>
-
-      <div className="mb-3">
-        <Controller
-          name="events"
-          control={control}
-          rules={{
-            required: 'Please enter events',
-          }}
-          render={({ field }) => (
-            <InputSelect
-              onChange={field.onChange}
-              value={field.value}
-              isMulti
-              portal
-              options={[
-                {
-                  label: OrganizationWebhookEventEnum.FAILURE,
-                  value: OrganizationWebhookEventEnum.FAILURE,
-                },
-                {
-                  label: OrganizationWebhookEventEnum.STARTED,
-                  value: OrganizationWebhookEventEnum.STARTED,
-                },
-                {
-                  label: OrganizationWebhookEventEnum.CANCELLED,
-                  value: OrganizationWebhookEventEnum.CANCELLED,
-                },
-                {
-                  label: OrganizationWebhookEventEnum.SUCCESSFUL,
-                  value: OrganizationWebhookEventEnum.SUCCESSFUL,
-                },
-              ]}
-              label="Events"
-              dataTestId="events-input"
-              hint="List all the events you want to be notified about."
-            />
-          )}
-        />
-      </div>
-
-      <div className="mb-3">
-        <Controller
-          name="project_names_filter"
-          control={control}
-          render={({ field }) => (
-            <InputTags
-              onChange={field.onChange}
-              tags={field.value || []}
-              placeholder="Add project name"
-              label="Project name filter"
-              dataTestId="project-filter-input"
-            />
-          )}
-        />
-        <p className="ml-3 mt-0.5 text-xs text-neutral-350">
-          Webhook will be triggered only for projects whose names match or, if you're using a wildcard, start with one
-          of the values from your list.
-          <br />
-          Press Enter to add a new value.
-        </p>
-      </div>
-
-      <div className="mb-3">
-        <Controller
-          name="environment_types_filter"
-          control={control}
-          render={({ field }) => (
-            <InputSelect
-              portal
-              onChange={field.onChange}
-              isMulti
-              options={[
-                {
-                  label: EnvironmentModeEnum.DEVELOPMENT,
-                  value: EnvironmentModeEnum.DEVELOPMENT,
-                },
-                {
-                  label: EnvironmentModeEnum.STAGING,
-                  value: EnvironmentModeEnum.STAGING,
-                },
-                {
-                  label: EnvironmentModeEnum.PREVIEW,
-                  value: EnvironmentModeEnum.PREVIEW,
-                },
-                {
-                  label: EnvironmentModeEnum.PRODUCTION,
-                  value: EnvironmentModeEnum.PRODUCTION,
-                },
-              ]}
-              value={field.value}
-              label="Environment type filter"
-              dataTestId="environment-type-input"
-              hint="Webhook will be triggered only for events happening on the environment with the selected environment type."
-            />
-          )}
-        />
-      </div>
-
-      {isEditDirty && hasExistingSecret && (
-        <>
-          <hr className="my-3" />
-          <span className="text-sm text-neutral-350">Confirm your secret</span>
-          <Controller
-            name="target_secret"
-            control={control}
-            rules={{
-              required: 'Please enter a secret.',
-            }}
-            render={({ field, fieldState: { error } }) => (
-              <InputText
-                className="mt-3"
-                type="password"
-                name={field.name}
-                onChange={field.onChange}
-                value={field.value}
-                label="Secret"
-                error={error?.message}
-              />
-            )}
-          />
-        </>
-      )}
-    </ModalCrud>
-  )
-}
-
-export default WebhookCrudModal