diff --git a/pro/src/components/AddressManual/AddressManual.tsx b/pro/src/components/AddressManual/AddressManual.tsx
index f0920211421..d76d21bdf31 100644
--- a/pro/src/components/AddressManual/AddressManual.tsx
+++ b/pro/src/components/AddressManual/AddressManual.tsx
@@ -2,11 +2,11 @@ import { useField, useFormikContext } from 'formik'
 import React from 'react'
 
 import { getCoordsType, parseDms } from 'commons/utils/coords'
-import { Callout } from 'components/Callout/Callout'
-import { CalloutVariant } from 'components/Callout/types'
 import { FormLayout } from 'components/FormLayout/FormLayout'
 import { ButtonLink } from 'ui-kit/Button/ButtonLink'
 import { ButtonVariant } from 'ui-kit/Button/types'
+import { Callout } from 'ui-kit/Callout/Callout'
+import { CalloutVariant } from 'ui-kit/Callout/types'
 import { TextInput } from 'ui-kit/form/TextInput/TextInput'
 
 import styles from './AddressManual.module.scss'
diff --git a/pro/src/components/BannerPublicApi/BannerPublicApi.tsx b/pro/src/components/BannerPublicApi/BannerPublicApi.tsx
index 54dd7f07d53..4f5a693d914 100644
--- a/pro/src/components/BannerPublicApi/BannerPublicApi.tsx
+++ b/pro/src/components/BannerPublicApi/BannerPublicApi.tsx
@@ -1,8 +1,8 @@
 import React from 'react'
 
-import { Callout } from 'components/Callout/Callout'
-import { CalloutVariant } from 'components/Callout/types'
 import logoPassCultureIcon from 'icons/logo-pass-culture.svg'
+import { Callout } from 'ui-kit/Callout/Callout'
+import { CalloutVariant } from 'ui-kit/Callout/types'
 import { SvgIcon } from 'ui-kit/SvgIcon/SvgIcon'
 
 import styles from './BannerPublicApi.module.scss'
diff --git a/pro/src/components/BannerRGS/BannerRGS.tsx b/pro/src/components/BannerRGS/BannerRGS.tsx
index b74d9ad58fa..2748df419f6 100644
--- a/pro/src/components/BannerRGS/BannerRGS.tsx
+++ b/pro/src/components/BannerRGS/BannerRGS.tsx
@@ -1,6 +1,4 @@
-import React from 'react'
-
-import { Callout } from 'components/Callout/Callout'
+import { Callout } from 'ui-kit/Callout/Callout'
 
 interface Props {
   closable?: boolean
diff --git a/pro/src/components/FormLayout/FormLayoutDescription.tsx b/pro/src/components/FormLayout/FormLayoutDescription.tsx
index 8bf054c759d..3bc8619d523 100644
--- a/pro/src/components/FormLayout/FormLayoutDescription.tsx
+++ b/pro/src/components/FormLayout/FormLayoutDescription.tsx
@@ -1,7 +1,7 @@
 import cn from 'classnames'
 
-import { Callout } from 'components/Callout/Callout'
-import { CalloutVariant } from 'components/Callout/types'
+import { Callout } from 'ui-kit/Callout/Callout'
+import { CalloutVariant } from 'ui-kit/Callout/types'
 import { Link } from 'ui-kit/LinkNodes/LinkNodes'
 
 import style from './FormLayout.module.scss'
diff --git a/pro/src/components/IndividualOffer/DetailsSummary/DetailsSummary.tsx b/pro/src/components/IndividualOffer/DetailsSummary/DetailsSummary.tsx
index b8417e65c02..c3084584e1d 100644
--- a/pro/src/components/IndividualOffer/DetailsSummary/DetailsSummary.tsx
+++ b/pro/src/components/IndividualOffer/DetailsSummary/DetailsSummary.tsx
@@ -8,8 +8,6 @@ import { OFFER_WIZARD_MODE } from 'commons/core/Offers/constants'
 import { getIndividualOfferUrl } from 'commons/core/Offers/utils/getIndividualOfferUrl'
 import { useActiveFeature } from 'commons/hooks/useActiveFeature'
 import { useOfferWizardMode } from 'commons/hooks/useOfferWizardMode'
-import { Callout } from 'components/Callout/Callout'
-import { CalloutVariant } from 'components/Callout/types'
 import { OFFER_WIZARD_STEP_IDS } from 'components/IndividualOfferNavigation/constants'
 import { OfferAppPreview } from 'components/OfferAppPreview/OfferAppPreview'
 import { SummaryAside } from 'components/SummaryLayout/SummaryAside'
@@ -23,6 +21,8 @@ import { SummarySection } from 'components/SummaryLayout/SummarySection'
 import { SummarySubSection } from 'components/SummaryLayout/SummarySubSection'
 import phoneStrokeIcon from 'icons/stroke-phone.svg'
 import { ButtonVariant } from 'ui-kit/Button/types'
+import { Callout } from 'ui-kit/Callout/Callout'
+import { CalloutVariant } from 'ui-kit/Callout/types'
 import { SvgIcon } from 'ui-kit/SvgIcon/SvgIcon'
 
 import { DisplayOfferInAppLink } from '../SummaryScreen/DisplayOfferInAppLink/DisplayOfferInAppLink'
diff --git a/pro/src/components/IndividualOffer/IndivualOfferLayout/OfferStatusBanner/OfferStatusBanner.tsx b/pro/src/components/IndividualOffer/IndivualOfferLayout/OfferStatusBanner/OfferStatusBanner.tsx
index ec10950d35c..90f83f288b3 100644
--- a/pro/src/components/IndividualOffer/IndivualOfferLayout/OfferStatusBanner/OfferStatusBanner.tsx
+++ b/pro/src/components/IndividualOffer/IndivualOfferLayout/OfferStatusBanner/OfferStatusBanner.tsx
@@ -2,8 +2,8 @@ import React from 'react'
 
 import { OfferStatus } from 'apiClient/v1'
 import { CGU_URL } from 'commons/utils/config'
-import { Callout } from 'components/Callout/Callout'
-import { CalloutVariant } from 'components/Callout/types'
+import { Callout } from 'ui-kit/Callout/Callout'
+import { CalloutVariant } from 'ui-kit/Callout/types'
 
 import styles from './OfferStatusBanner.module.scss'
 interface OfferStatusBannerProps {
diff --git a/pro/src/components/IndividualOffer/SummaryScreen/SummaryScreen.tsx b/pro/src/components/IndividualOffer/SummaryScreen/SummaryScreen.tsx
index 3020e5a9cfe..6ff3b3f2ec3 100644
--- a/pro/src/components/IndividualOffer/SummaryScreen/SummaryScreen.tsx
+++ b/pro/src/components/IndividualOffer/SummaryScreen/SummaryScreen.tsx
@@ -12,7 +12,6 @@ import { getIndividualOfferUrl } from 'commons/core/Offers/utils/getIndividualOf
 import { useNotification } from 'commons/hooks/useNotification'
 import { useOfferWizardMode } from 'commons/hooks/useOfferWizardMode'
 import { getOfferConditionalFields } from 'commons/utils/getOfferConditionalFields'
-import { Callout } from 'components/Callout/Callout'
 import { OFFER_WIZARD_STEP_IDS } from 'components/IndividualOfferNavigation/constants'
 import { OfferAppPreview } from 'components/OfferAppPreview/OfferAppPreview'
 import { SummaryAside } from 'components/SummaryLayout/SummaryAside'
@@ -22,6 +21,7 @@ import phoneStrokeIcon from 'icons/stroke-phone.svg'
 import { ActionBar } from 'pages/IndividualOffer/components/ActionBar/ActionBar'
 import { RedirectToBankAccountDialog } from 'pages/Offers/components/IndividualOffersScreen/RedirectToBankAccountDialog'
 import { ButtonVariant } from 'ui-kit/Button/types'
+import { Callout } from 'ui-kit/Callout/Callout'
 import { SvgIcon } from 'ui-kit/SvgIcon/SvgIcon'
 
 import { serializeDateTimeToUTCFromLocalDepartment } from '../StocksEventEdition/serializers'
diff --git a/pro/src/components/IndividualOffer/SynchronisedProviderInfos/SynchronizedProviderInformation.tsx b/pro/src/components/IndividualOffer/SynchronisedProviderInfos/SynchronizedProviderInformation.tsx
index f2e78ab2c5f..64d72c7c543 100644
--- a/pro/src/components/IndividualOffer/SynchronisedProviderInfos/SynchronizedProviderInformation.tsx
+++ b/pro/src/components/IndividualOffer/SynchronisedProviderInfos/SynchronizedProviderInformation.tsx
@@ -1,6 +1,6 @@
 import { getProviderInfo } from 'commons/core/Providers/utils/getProviderInfo'
-import { Callout } from 'components/Callout/Callout'
-import { CalloutVariant } from 'components/Callout/types'
+import { Callout } from 'ui-kit/Callout/Callout'
+import { CalloutVariant } from 'ui-kit/Callout/types'
 
 import styles from './SynchronizedProviderInformation.module.scss'
 
diff --git a/pro/src/components/IndividualOffer/UsefulInformationScreen/UsefulInformationForm/components/OfferRefundWarning.tsx b/pro/src/components/IndividualOffer/UsefulInformationScreen/UsefulInformationForm/components/OfferRefundWarning.tsx
index 570fb35f419..7e483914c97 100644
--- a/pro/src/components/IndividualOffer/UsefulInformationScreen/UsefulInformationForm/components/OfferRefundWarning.tsx
+++ b/pro/src/components/IndividualOffer/UsefulInformationScreen/UsefulInformationForm/components/OfferRefundWarning.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 
-import { Callout } from 'components/Callout/Callout'
-import { CalloutVariant } from 'components/Callout/types'
+import { Callout } from 'ui-kit/Callout/Callout'
+import { CalloutVariant } from 'ui-kit/Callout/types'
 
 export const OfferRefundWarning = () => {
   return (
diff --git a/pro/src/components/IndividualOffer/UsefulInformationScreen/UsefulInformationForm/components/WithdrawalReminder.tsx b/pro/src/components/IndividualOffer/UsefulInformationScreen/UsefulInformationForm/components/WithdrawalReminder.tsx
index 3fe5e7dd973..84663e1f581 100644
--- a/pro/src/components/IndividualOffer/UsefulInformationScreen/UsefulInformationForm/components/WithdrawalReminder.tsx
+++ b/pro/src/components/IndividualOffer/UsefulInformationScreen/UsefulInformationForm/components/WithdrawalReminder.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 
 import { CGU_URL } from 'commons/utils/config'
-import { Callout } from 'components/Callout/Callout'
+import { Callout } from 'ui-kit/Callout/Callout'
 
 export const WithdrawalReminder = () => {
   return (
diff --git a/pro/src/components/SignupJourneyForm/Offerer/BannerInvisibleSiren/BannerInvisibleSiren.tsx b/pro/src/components/SignupJourneyForm/Offerer/BannerInvisibleSiren/BannerInvisibleSiren.tsx
index 361f1b6b9b5..cf3836ee6ee 100644
--- a/pro/src/components/SignupJourneyForm/Offerer/BannerInvisibleSiren/BannerInvisibleSiren.tsx
+++ b/pro/src/components/SignupJourneyForm/Offerer/BannerInvisibleSiren/BannerInvisibleSiren.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 
-import { Callout } from 'components/Callout/Callout'
-import { CalloutVariant } from 'components/Callout/types'
+import { Callout } from 'ui-kit/Callout/Callout'
+import { CalloutVariant } from 'ui-kit/Callout/types'
 
 import styles from './BannerInvisibleSiren.module.scss'
 
diff --git a/pro/src/components/SignupJourneyForm/Offerer/Offerer.tsx b/pro/src/components/SignupJourneyForm/Offerer/Offerer.tsx
index 1d36e2a5b13..6b356f82783 100644
--- a/pro/src/components/SignupJourneyForm/Offerer/Offerer.tsx
+++ b/pro/src/components/SignupJourneyForm/Offerer/Offerer.tsx
@@ -16,12 +16,12 @@ import {
   GetSiretDataResponse,
 } from 'commons/core/Venue/getSiretData'
 import { useNotification } from 'commons/hooks/useNotification'
-import { Callout } from 'components/Callout/Callout'
 import { FormLayout } from 'components/FormLayout/FormLayout'
 import { OnboardingFormNavigationAction } from 'components/SignupJourneyFormLayout/constants'
 import { SIGNUP_JOURNEY_STEP_IDS } from 'components/SignupJourneyStepper/constants'
 import { MAYBE_APP_USER_APE_CODE } from 'pages/Signup/SignupContainer/constants'
 import { MaybeAppUserDialog } from 'pages/Signup/SignupContainer/MaybeAppUserDialog/MaybeAppUserDialog'
+import { Callout } from 'ui-kit/Callout/Callout'
 
 import { ActionBar } from '../ActionBar/ActionBar'
 
diff --git a/pro/src/components/SignupJourneyForm/Validation/Validation.tsx b/pro/src/components/SignupJourneyForm/Validation/Validation.tsx
index 86f3790fcae..505a4c80777 100644
--- a/pro/src/components/SignupJourneyForm/Validation/Validation.tsx
+++ b/pro/src/components/SignupJourneyForm/Validation/Validation.tsx
@@ -19,13 +19,13 @@ import { useInitReCaptcha } from 'commons/hooks/useInitReCaptcha'
 import { useNotification } from 'commons/hooks/useNotification'
 import { updateSelectedOffererId, updateUser } from 'commons/store/user/reducer'
 import { getReCaptchaToken } from 'commons/utils/recaptcha'
-import { Callout } from 'components/Callout/Callout'
 import { DEFAULT_OFFERER_FORM_VALUES } from 'components/SignupJourneyForm/Offerer/constants'
 import { OnboardingFormNavigationAction } from 'components/SignupJourneyFormLayout/constants'
 import { SIGNUP_JOURNEY_STEP_IDS } from 'components/SignupJourneyStepper/constants'
 import fullEditIcon from 'icons/full-edit.svg'
 import { ButtonLink } from 'ui-kit/Button/ButtonLink'
 import { ButtonVariant, IconPositionEnum } from 'ui-kit/Button/types'
+import { Callout } from 'ui-kit/Callout/Callout'
 import { Spinner } from 'ui-kit/Spinner/Spinner'
 
 import { ActionBar } from '../ActionBar/ActionBar'
diff --git a/pro/src/pages/AdageIframe/app/components/OfferInfos/AdageOffer/AdageOfferPartnerPanel/AdageOfferPartnerPanel.tsx b/pro/src/pages/AdageIframe/app/components/OfferInfos/AdageOffer/AdageOfferPartnerPanel/AdageOfferPartnerPanel.tsx
index 1986531de04..d4267a21987 100644
--- a/pro/src/pages/AdageIframe/app/components/OfferInfos/AdageOffer/AdageOfferPartnerPanel/AdageOfferPartnerPanel.tsx
+++ b/pro/src/pages/AdageIframe/app/components/OfferInfos/AdageOffer/AdageOfferPartnerPanel/AdageOfferPartnerPanel.tsx
@@ -3,13 +3,13 @@ import {
   CollectiveOfferTemplateResponseModel,
 } from 'apiClient/adage'
 import { getHumanizeRelativeDistance } from 'commons/utils/getDistance'
-import { Callout } from 'components/Callout/Callout'
-import { CalloutVariant } from 'components/Callout/types'
 import fullLinkIcon from 'icons/full-link.svg'
 import fullMailIcon from 'icons/full-mail.svg'
 import strokeInstitutionIcon from 'icons/stroke-institution.svg'
 import { ButtonLink } from 'ui-kit/Button/ButtonLink'
 import { ButtonVariant } from 'ui-kit/Button/types'
+import { Callout } from 'ui-kit/Callout/Callout'
+import { CalloutVariant } from 'ui-kit/Callout/types'
 import { SvgIcon } from 'ui-kit/SvgIcon/SvgIcon'
 
 import { ContactButton } from '../../../OffersInstantSearch/OffersSearch/Offers/ContactButton/ContactButton'
diff --git a/pro/src/pages/AdageIframe/app/components/OffersForInstitution/OffersForMyInstitution.tsx b/pro/src/pages/AdageIframe/app/components/OffersForInstitution/OffersForMyInstitution.tsx
index d7a82c23c6d..41f96911527 100644
--- a/pro/src/pages/AdageIframe/app/components/OffersForInstitution/OffersForMyInstitution.tsx
+++ b/pro/src/pages/AdageIframe/app/components/OffersForInstitution/OffersForMyInstitution.tsx
@@ -2,10 +2,10 @@ import useSWR from 'swr'
 
 import { apiAdage } from 'apiClient/api'
 import { GET_COLLECTIVE_OFFERS_FOR_INSTITUTION_QUERY_KEY } from 'commons/config/swrQueryKeys'
-import { Callout } from 'components/Callout/Callout'
 import strokeMyInstitution from 'icons/stroke-my-institution.svg'
 import { ButtonLink } from 'ui-kit/Button/ButtonLink'
 import { ButtonVariant } from 'ui-kit/Button/types'
+import { Callout } from 'ui-kit/Callout/Callout'
 import { SvgIcon } from 'ui-kit/SvgIcon/SvgIcon'
 
 import { AdageOfferListCard } from '../OffersInstantSearch/OffersSearch/Offers/AdageOfferListCard/AdageOfferListCard'
diff --git a/pro/src/pages/AdageIframe/app/components/OffersInstantSearch/OffersSearch/Offers/ContactButton/RequestFormDialog/RequestFormDialog.tsx b/pro/src/pages/AdageIframe/app/components/OffersInstantSearch/OffersSearch/Offers/ContactButton/RequestFormDialog/RequestFormDialog.tsx
index 20fa4f3a43a..9a9fa3deaa5 100644
--- a/pro/src/pages/AdageIframe/app/components/OffersInstantSearch/OffersSearch/Offers/ContactButton/RequestFormDialog/RequestFormDialog.tsx
+++ b/pro/src/pages/AdageIframe/app/components/OffersInstantSearch/OffersSearch/Offers/ContactButton/RequestFormDialog/RequestFormDialog.tsx
@@ -4,12 +4,12 @@ import { AdageFrontRoles } from 'apiClient/adage'
 import { apiAdage } from 'apiClient/api'
 import { useNotification } from 'commons/hooks/useNotification'
 import { isDateValid } from 'commons/utils/date'
-import { Callout } from 'components/Callout/Callout'
-import { CalloutVariant } from 'components/Callout/types'
 import { Dialog } from 'components/Dialog/Dialog/Dialog'
 import { MandatoryInfo } from 'components/FormLayout/FormLayoutMandatoryInfo'
 import { ButtonLink } from 'ui-kit/Button/ButtonLink'
 import { ButtonVariant } from 'ui-kit/Button/types'
+import { Callout } from 'ui-kit/Callout/Callout'
+import { CalloutVariant } from 'ui-kit/Callout/types'
 
 import { createCollectiveRequestPayload } from './createCollectiveRequestPayload'
 import { DefaultFormContact } from './DefaultFormContact'
diff --git a/pro/src/pages/CollectiveOffer/CollectiveOffer/components/OfferEducational/OfferEducationalForm/FormDates/FormDates.tsx b/pro/src/pages/CollectiveOffer/CollectiveOffer/components/OfferEducational/OfferEducationalForm/FormDates/FormDates.tsx
index 2b7c351aa28..c16fe79c3ce 100644
--- a/pro/src/pages/CollectiveOffer/CollectiveOffer/components/OfferEducational/OfferEducationalForm/FormDates/FormDates.tsx
+++ b/pro/src/pages/CollectiveOffer/CollectiveOffer/components/OfferEducational/OfferEducationalForm/FormDates/FormDates.tsx
@@ -4,9 +4,9 @@ import { ChangeEvent } from 'react'
 import { OfferEducationalFormValues } from 'commons/core/OfferEducational/types'
 import { useActiveFeature } from 'commons/hooks/useActiveFeature'
 import { isDateValid } from 'commons/utils/date'
-import { Callout } from 'components/Callout/Callout'
-import { CalloutVariant } from 'components/Callout/types'
 import { FormLayout } from 'components/FormLayout/FormLayout'
+import { Callout } from 'ui-kit/Callout/Callout'
+import { CalloutVariant } from 'ui-kit/Callout/types'
 import { DatePicker } from 'ui-kit/form/DatePicker/DatePicker'
 import { RadioGroup } from 'ui-kit/form/RadioGroup/RadioGroup'
 import { TimePicker } from 'ui-kit/form/TimePicker/TimePicker'
diff --git a/pro/src/pages/CollectiveOffer/CollectiveOffer/components/OfferEducational/OfferEducationalForm/FormVenue/FormVenue.tsx b/pro/src/pages/CollectiveOffer/CollectiveOffer/components/OfferEducational/OfferEducationalForm/FormVenue/FormVenue.tsx
index 631b15fbbfb..7c5e7c88a8c 100644
--- a/pro/src/pages/CollectiveOffer/CollectiveOffer/components/OfferEducational/OfferEducationalForm/FormVenue/FormVenue.tsx
+++ b/pro/src/pages/CollectiveOffer/CollectiveOffer/components/OfferEducational/OfferEducationalForm/FormVenue/FormVenue.tsx
@@ -14,9 +14,9 @@ import {
 import { applyVenueDefaultsToFormValues } from 'commons/core/OfferEducational/utils/applyVenueDefaultsToFormValues'
 import { SelectOption } from 'commons/custom_types/form'
 import { useActiveFeature } from 'commons/hooks/useActiveFeature'
-import { Callout } from 'components/Callout/Callout'
-import { CalloutVariant } from 'components/Callout/types'
 import { FormLayout } from 'components/FormLayout/FormLayout'
+import { Callout } from 'ui-kit/Callout/Callout'
+import { CalloutVariant } from 'ui-kit/Callout/types'
 import { Select } from 'ui-kit/form/Select/Select'
 
 import { STRUCTURE_LABEL, VENUE_LABEL } from '../../constants/labels'
diff --git a/pro/src/pages/CollectiveOffer/CollectiveOfferConfirmation/CollectiveOfferConfirmation/CollectiveOfferConfirmation.tsx b/pro/src/pages/CollectiveOffer/CollectiveOfferConfirmation/CollectiveOfferConfirmation/CollectiveOfferConfirmation.tsx
index c1a50604d29..5cf38f6a71e 100644
--- a/pro/src/pages/CollectiveOffer/CollectiveOfferConfirmation/CollectiveOfferConfirmation/CollectiveOfferConfirmation.tsx
+++ b/pro/src/pages/CollectiveOffer/CollectiveOfferConfirmation/CollectiveOfferConfirmation/CollectiveOfferConfirmation.tsx
@@ -2,11 +2,11 @@ import cn from 'classnames'
 import React from 'react'
 
 import { CollectiveOfferStatus } from 'apiClient/v1'
-import { Callout } from 'components/Callout/Callout'
 import fullValidateIcon from 'icons/full-validate.svg'
 import fullWaitIcon from 'icons/full-wait.svg'
 import { ButtonLink } from 'ui-kit/Button/ButtonLink'
 import { ButtonVariant } from 'ui-kit/Button/types'
+import { Callout } from 'ui-kit/Callout/Callout'
 import { SvgIcon } from 'ui-kit/SvgIcon/SvgIcon'
 
 import styles from './CollectiveOfferConfirmation.module.scss'
diff --git a/pro/src/pages/CollectiveOffer/CollectiveOfferStock/components/OfferEducationalStock/OfferEducationalStock.tsx b/pro/src/pages/CollectiveOffer/CollectiveOfferStock/components/OfferEducationalStock/OfferEducationalStock.tsx
index 96f4934e07c..1f34ac52285 100644
--- a/pro/src/pages/CollectiveOffer/CollectiveOfferStock/components/OfferEducationalStock/OfferEducationalStock.tsx
+++ b/pro/src/pages/CollectiveOffer/CollectiveOfferStock/components/OfferEducationalStock/OfferEducationalStock.tsx
@@ -21,8 +21,6 @@ import { NBSP } from 'commons/core/shared/constants'
 import { isDateValid } from 'commons/utils/date'
 import { ActionsBarSticky } from 'components/ActionsBarSticky/ActionsBarSticky'
 import { BannerPublicApi } from 'components/BannerPublicApi/BannerPublicApi'
-import { Callout } from 'components/Callout/Callout'
-import { CalloutVariant } from 'components/Callout/types'
 import { FormLayout } from 'components/FormLayout/FormLayout'
 import { OfferEducationalActions } from 'components/OfferEducationalActions/OfferEducationalActions'
 import { RouteLeavingGuardCollectiveOfferCreation } from 'components/RouteLeavingGuardCollectiveOfferCreation/RouteLeavingGuardCollectiveOfferCreation'
@@ -30,6 +28,8 @@ import { ScrollToFirstErrorAfterSubmit } from 'components/ScrollToFirstErrorAfte
 import { Button } from 'ui-kit/Button/Button'
 import { ButtonLink } from 'ui-kit/Button/ButtonLink'
 import { ButtonVariant } from 'ui-kit/Button/types'
+import { Callout } from 'ui-kit/Callout/Callout'
+import { CalloutVariant } from 'ui-kit/Callout/types'
 import { DatePicker } from 'ui-kit/form/DatePicker/DatePicker'
 import { TextArea } from 'ui-kit/form/TextArea/TextArea'
 
diff --git a/pro/src/pages/Desk/Desk.tsx b/pro/src/pages/Desk/Desk.tsx
index 5eb8dc57c9e..8ff03c6189a 100644
--- a/pro/src/pages/Desk/Desk.tsx
+++ b/pro/src/pages/Desk/Desk.tsx
@@ -5,8 +5,8 @@ import { apiContremarque } from 'apiClient/api'
 import { isErrorAPIError } from 'apiClient/helpers'
 import { GetBookingResponse } from 'apiClient/v2'
 import { Layout } from 'app/App/layout/Layout'
-import { Callout } from 'components/Callout/Callout'
 import { Button } from 'ui-kit/Button/Button'
+import { Callout } from 'ui-kit/Callout/Callout'
 import { TextInput } from 'ui-kit/form/TextInput/TextInput'
 
 import { BookingDetails } from './BookingDetails'
diff --git a/pro/src/pages/Homepage/Homepage.tsx b/pro/src/pages/Homepage/Homepage.tsx
index 3a5462eab54..be6bd2643be 100644
--- a/pro/src/pages/Homepage/Homepage.tsx
+++ b/pro/src/pages/Homepage/Homepage.tsx
@@ -13,13 +13,13 @@ import {
 import { hasStatusCode } from 'commons/core/OfferEducational/utils/hasStatusCode'
 import { selectCurrentOffererId } from 'commons/store/user/selectors'
 import { sortByLabel } from 'commons/utils/strings'
-import { AddBankAccountCallout } from 'components/Callout/AddBankAccountCallout'
-import { BankAccountHasPendingCorrectionCallout } from 'components/Callout/BankAccountHasPendingCorrectionCallout'
-import { LinkVenueCallout } from 'components/Callout/LinkVenueCallout'
 import { Newsletter } from 'components/Newsletter/Newsletter'
+import { AddBankAccountCallout } from 'pages/Homepage/components/AddBankAccountCallout/AddBankAccountCallout'
 import { HTTP_STATUS } from 'repository/pcapi/pcapiClient'
 import { Spinner } from 'ui-kit/Spinner/Spinner'
 
+import { BankAccountHasPendingCorrectionCallout } from './components/BankAccountHasPendingCorrectionCallout/BankAccountHasPendingCorrectionCallout'
+import { LinkVenueCallout } from './components/LinkVenueCallout/LinkVenueCallout'
 import { OffererBanners } from './components/Offerers/components/OffererBanners/OffererBanners'
 import {
   getPhysicalVenuesFromOfferer,
diff --git a/pro/src/components/Callout/__specs__/AddBankAccountCallout.spec.tsx b/pro/src/pages/Homepage/components/AddBankAccountCallout/AddBankAccountCallout.spec.tsx
similarity index 97%
rename from pro/src/components/Callout/__specs__/AddBankAccountCallout.spec.tsx
rename to pro/src/pages/Homepage/components/AddBankAccountCallout/AddBankAccountCallout.spec.tsx
index 97a7cfd8b45..acd7eb2a74c 100644
--- a/pro/src/components/Callout/__specs__/AddBankAccountCallout.spec.tsx
+++ b/pro/src/pages/Homepage/components/AddBankAccountCallout/AddBankAccountCallout.spec.tsx
@@ -6,7 +6,7 @@ import * as useAnalytics from 'app/App/analytics/firebase'
 import { BankAccountEvents } from 'commons/core/FirebaseEvents/constants'
 import { defaultGetOffererResponseModel } from 'commons/utils/factories/individualApiFactories'
 import { renderWithProviders } from 'commons/utils/renderWithProviders'
-import { AddBankAccountCallout } from 'components/Callout/AddBankAccountCallout'
+import { AddBankAccountCallout } from 'pages/Homepage/components/AddBankAccountCallout/AddBankAccountCallout'
 
 const mockLogEvent = vi.fn()
 
diff --git a/pro/src/components/Callout/AddBankAccountCallout.tsx b/pro/src/pages/Homepage/components/AddBankAccountCallout/AddBankAccountCallout.tsx
similarity index 92%
rename from pro/src/components/Callout/AddBankAccountCallout.tsx
rename to pro/src/pages/Homepage/components/AddBankAccountCallout/AddBankAccountCallout.tsx
index 24a9f25ad67..27891fdddb4 100644
--- a/pro/src/components/Callout/AddBankAccountCallout.tsx
+++ b/pro/src/pages/Homepage/components/AddBankAccountCallout/AddBankAccountCallout.tsx
@@ -3,8 +3,8 @@ import { useLocation } from 'react-router-dom'
 import { GetOffererResponseModel } from 'apiClient/v1'
 import { useAnalytics } from 'app/App/analytics/firebase'
 import { BankAccountEvents } from 'commons/core/FirebaseEvents/constants'
-import { Callout } from 'components/Callout/Callout'
-import { CalloutVariant } from 'components/Callout/types'
+import { Callout } from 'ui-kit/Callout/Callout'
+import { CalloutVariant } from 'ui-kit/Callout/types'
 
 interface AddBankAccountCalloutProps {
   offerer?: GetOffererResponseModel | null
diff --git a/pro/src/components/Callout/__specs__/BankAccountHasPendingCorrectionCallout.spec.tsx b/pro/src/pages/Homepage/components/BankAccountHasPendingCorrectionCallout/BankAccountHasPendingCorrectionCallout.spec.tsx
similarity index 96%
rename from pro/src/components/Callout/__specs__/BankAccountHasPendingCorrectionCallout.spec.tsx
rename to pro/src/pages/Homepage/components/BankAccountHasPendingCorrectionCallout/BankAccountHasPendingCorrectionCallout.spec.tsx
index 1361e2177e0..ef033740b0a 100644
--- a/pro/src/components/Callout/__specs__/BankAccountHasPendingCorrectionCallout.spec.tsx
+++ b/pro/src/pages/Homepage/components/BankAccountHasPendingCorrectionCallout/BankAccountHasPendingCorrectionCallout.spec.tsx
@@ -1,15 +1,15 @@
 import { screen } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
-import React from 'react'
 
 import * as useAnalytics from 'app/App/analytics/firebase'
 import { BankAccountEvents } from 'commons/core/FirebaseEvents/constants'
 import { defaultGetOffererResponseModel } from 'commons/utils/factories/individualApiFactories'
 import { renderWithProviders } from 'commons/utils/renderWithProviders'
+
 import {
-  BankAccountHasPendingCorrectionCallout,
   BankAccountHasPendingCorrectionCalloutProps,
-} from 'components/Callout/BankAccountHasPendingCorrectionCallout'
+  BankAccountHasPendingCorrectionCallout,
+} from './BankAccountHasPendingCorrectionCallout'
 
 const mockLogEvent = vi.fn()
 
diff --git a/pro/src/components/Callout/BankAccountHasPendingCorrectionCallout.tsx b/pro/src/pages/Homepage/components/BankAccountHasPendingCorrectionCallout/BankAccountHasPendingCorrectionCallout.tsx
similarity index 92%
rename from pro/src/components/Callout/BankAccountHasPendingCorrectionCallout.tsx
rename to pro/src/pages/Homepage/components/BankAccountHasPendingCorrectionCallout/BankAccountHasPendingCorrectionCallout.tsx
index 5903fb0aad1..d003460b73d 100644
--- a/pro/src/components/Callout/BankAccountHasPendingCorrectionCallout.tsx
+++ b/pro/src/pages/Homepage/components/BankAccountHasPendingCorrectionCallout/BankAccountHasPendingCorrectionCallout.tsx
@@ -3,8 +3,8 @@ import { useLocation } from 'react-router-dom'
 import { GetOffererResponseModel } from 'apiClient/v1'
 import { useAnalytics } from 'app/App/analytics/firebase'
 import { BankAccountEvents } from 'commons/core/FirebaseEvents/constants'
-import { Callout } from 'components/Callout/Callout'
-import { CalloutVariant } from 'components/Callout/types'
+import { Callout } from 'ui-kit/Callout/Callout'
+import { CalloutVariant } from 'ui-kit/Callout/types'
 
 export interface BankAccountHasPendingCorrectionCalloutProps {
   offerer?: GetOffererResponseModel | null
diff --git a/pro/src/components/Callout/__specs__/LinkVenueCallout.spec.tsx b/pro/src/pages/Homepage/components/LinkVenueCallout/LinkVenueCallout.spec.tsx
similarity index 97%
rename from pro/src/components/Callout/__specs__/LinkVenueCallout.spec.tsx
rename to pro/src/pages/Homepage/components/LinkVenueCallout/LinkVenueCallout.spec.tsx
index 31f82dde967..4d8a7d409f7 100644
--- a/pro/src/components/Callout/__specs__/LinkVenueCallout.spec.tsx
+++ b/pro/src/pages/Homepage/components/LinkVenueCallout/LinkVenueCallout.spec.tsx
@@ -1,15 +1,12 @@
 import { screen } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
-import React from 'react'
 
 import * as useAnalytics from 'app/App/analytics/firebase'
 import { BankAccountEvents } from 'commons/core/FirebaseEvents/constants'
 import { defaultGetOffererResponseModel } from 'commons/utils/factories/individualApiFactories'
 import { renderWithProviders } from 'commons/utils/renderWithProviders'
-import {
-  LinkVenueCallout,
-  LinkVenueCalloutProps,
-} from 'components/Callout/LinkVenueCallout'
+
+import { LinkVenueCalloutProps, LinkVenueCallout } from './LinkVenueCallout'
 
 const mockLogEvent = vi.fn()
 
diff --git a/pro/src/components/Callout/LinkVenueCallout.tsx b/pro/src/pages/Homepage/components/LinkVenueCallout/LinkVenueCallout.tsx
similarity index 93%
rename from pro/src/components/Callout/LinkVenueCallout.tsx
rename to pro/src/pages/Homepage/components/LinkVenueCallout/LinkVenueCallout.tsx
index 23c41405f2f..d1ea0e67960 100644
--- a/pro/src/components/Callout/LinkVenueCallout.tsx
+++ b/pro/src/pages/Homepage/components/LinkVenueCallout/LinkVenueCallout.tsx
@@ -4,8 +4,8 @@ import { GetOffererResponseModel } from 'apiClient/v1'
 import { useAnalytics } from 'app/App/analytics/firebase'
 import { BankAccountEvents } from 'commons/core/FirebaseEvents/constants'
 import { useActiveFeature } from 'commons/hooks/useActiveFeature'
-import { Callout } from 'components/Callout/Callout'
-import { CalloutVariant } from 'components/Callout/types'
+import { Callout } from 'ui-kit/Callout/Callout'
+import { CalloutVariant } from 'ui-kit/Callout/types'
 
 export interface LinkVenueCalloutProps {
   offerer?: GetOffererResponseModel | null
diff --git a/pro/src/pages/Homepage/components/Offerers/components/OffererBanners/OffererBanners.tsx b/pro/src/pages/Homepage/components/Offerers/components/OffererBanners/OffererBanners.tsx
index cc67eacea59..1930fc08755 100644
--- a/pro/src/pages/Homepage/components/Offerers/components/OffererBanners/OffererBanners.tsx
+++ b/pro/src/pages/Homepage/components/Offerers/components/OffererBanners/OffererBanners.tsx
@@ -2,8 +2,8 @@ import React from 'react'
 
 import { GetOffererResponseModel } from 'apiClient/v1'
 import { useActiveFeature } from 'commons/hooks/useActiveFeature'
-import { Callout } from 'components/Callout/Callout'
-import { CalloutVariant } from 'components/Callout/types'
+import { Callout } from 'ui-kit/Callout/Callout'
+import { CalloutVariant } from 'ui-kit/Callout/types'
 
 import { hasOffererAtLeastOnePhysicalVenue } from '../VenueList/venueUtils'
 
diff --git a/pro/src/pages/IndividualOffer/IndividualOfferDetails/components/DetailsForm/DetailsForm.tsx b/pro/src/pages/IndividualOffer/IndividualOfferDetails/components/DetailsForm/DetailsForm.tsx
index 3a6a76786a2..8be40996659 100644
--- a/pro/src/pages/IndividualOffer/IndividualOfferDetails/components/DetailsForm/DetailsForm.tsx
+++ b/pro/src/pages/IndividualOffer/IndividualOfferDetails/components/DetailsForm/DetailsForm.tsx
@@ -16,8 +16,6 @@ import { IndividualOfferImage } from 'commons/core/Offers/types'
 import { useActiveFeature } from 'commons/hooks/useActiveFeature'
 import { useSuggestedSubcategoriesAbTest } from 'commons/hooks/useSuggestedSubcategoriesAbTest'
 import { selectCurrentOffererId } from 'commons/store/user/selectors'
-import { Callout } from 'components/Callout/Callout'
-import { CalloutVariant } from 'components/Callout/types'
 import { FormLayout } from 'components/FormLayout/FormLayout'
 import { OnImageUploadArgs } from 'components/ImageUploader/ButtonImageEdit/ModalImageEdit/ModalImageEdit'
 import fullMoreIcon from 'icons/full-more.svg'
@@ -27,6 +25,8 @@ import {
   buildVenueOptions,
   isSubCategoryCD,
 } from 'pages/IndividualOffer/IndividualOfferDetails/commons/utils'
+import { Callout } from 'ui-kit/Callout/Callout'
+import { CalloutVariant } from 'ui-kit/Callout/types'
 import { Select } from 'ui-kit/form/Select/Select'
 import { TextArea } from 'ui-kit/form/TextArea/TextArea'
 import { TextInput } from 'ui-kit/form/TextInput/TextInput'
diff --git a/pro/src/pages/IndividualOffer/IndividualOfferDetails/components/DetailsForm/DetailsSubForm/DetailsSubForm.tsx b/pro/src/pages/IndividualOffer/IndividualOfferDetails/components/DetailsForm/DetailsSubForm/DetailsSubForm.tsx
index aa367e68728..7a5d46f7122 100644
--- a/pro/src/pages/IndividualOffer/IndividualOfferDetails/components/DetailsForm/DetailsSubForm/DetailsSubForm.tsx
+++ b/pro/src/pages/IndividualOffer/IndividualOfferDetails/components/DetailsForm/DetailsSubForm/DetailsSubForm.tsx
@@ -7,8 +7,6 @@ import { showOptionsTree } from 'commons/core/Offers/categoriesSubTypes'
 import { OFFER_WIZARD_MODE } from 'commons/core/Offers/constants'
 import { IndividualOfferImage } from 'commons/core/Offers/types'
 import { useOfferWizardMode } from 'commons/hooks/useOfferWizardMode'
-import { Callout } from 'components/Callout/Callout'
-import { CalloutVariant } from 'components/Callout/types'
 import { FormLayout } from 'components/FormLayout/FormLayout'
 import { OnImageUploadArgs } from 'components/ImageUploader/ButtonImageEdit/ModalImageEdit/ModalImageEdit'
 import { DEFAULT_DETAILS_FORM_VALUES } from 'pages/IndividualOffer/IndividualOfferDetails/commons/constants'
@@ -17,6 +15,8 @@ import {
   buildShowSubTypeOptions,
   hasMusicType,
 } from 'pages/IndividualOffer/IndividualOfferDetails/commons/utils'
+import { Callout } from 'ui-kit/Callout/Callout'
+import { CalloutVariant } from 'ui-kit/Callout/types'
 import { Select } from 'ui-kit/form/Select/Select'
 import { TextInput } from 'ui-kit/form/TextInput/TextInput'
 import { TimePicker } from 'ui-kit/form/TimePicker/TimePicker'
diff --git a/pro/src/pages/IndividualOffer/IndividualOfferDetails/components/EanSearchCallout/EanSearchCallout.tsx b/pro/src/pages/IndividualOffer/IndividualOfferDetails/components/EanSearchCallout/EanSearchCallout.tsx
index 27fa6b27088..ae44b420c6c 100644
--- a/pro/src/pages/IndividualOffer/IndividualOfferDetails/components/EanSearchCallout/EanSearchCallout.tsx
+++ b/pro/src/pages/IndividualOffer/IndividualOfferDetails/components/EanSearchCallout/EanSearchCallout.tsx
@@ -1,5 +1,5 @@
-import { Callout } from 'components/Callout/Callout'
-import { CalloutVariant } from 'components/Callout/types'
+import { Callout } from 'ui-kit/Callout/Callout'
+import { CalloutVariant } from 'ui-kit/Callout/types'
 
 import styles from './EanSearchCallout.module.scss'
 
diff --git a/pro/src/pages/IndividualOffer/IndividualOfferInformations/components/IndividualOfferInformationsScreen.tsx b/pro/src/pages/IndividualOffer/IndividualOfferInformations/components/IndividualOfferInformationsScreen.tsx
index 63a67e1dd2f..c99ea725e07 100644
--- a/pro/src/pages/IndividualOffer/IndividualOfferInformations/components/IndividualOfferInformationsScreen.tsx
+++ b/pro/src/pages/IndividualOffer/IndividualOfferInformations/components/IndividualOfferInformationsScreen.tsx
@@ -23,8 +23,6 @@ import { useNotification } from 'commons/hooks/useNotification'
 import { useOfferWizardMode } from 'commons/hooks/useOfferWizardMode'
 import { getOfferConditionalFields } from 'commons/utils/getOfferConditionalFields'
 import { localStorageAvailable } from 'commons/utils/localStorageAvailable'
-import { Callout } from 'components/Callout/Callout'
-import { CalloutVariant } from 'components/Callout/types'
 import { ConfirmDialog } from 'components/Dialog/ConfirmDialog/ConfirmDialog'
 import { FormLayout } from 'components/FormLayout/FormLayout'
 import { OFFER_WIZARD_STEP_IDS } from 'components/IndividualOfferNavigation/constants'
@@ -32,6 +30,8 @@ import { RouteLeavingGuardIndividualOffer } from 'components/RouteLeavingGuardIn
 import { ScrollToFirstErrorAfterSubmit } from 'components/ScrollToFirstErrorAfterSubmit/ScrollToFirstErrorAfterSubmit'
 import { serializePatchOffer } from 'pages/IndividualOffer/commons/serializers'
 import { ActionBar } from 'pages/IndividualOffer/components/ActionBar/ActionBar'
+import { Callout } from 'ui-kit/Callout/Callout'
+import { CalloutVariant } from 'ui-kit/Callout/types'
 import { Checkbox } from 'ui-kit/form/Checkbox/Checkbox'
 
 import { UsefulInformationFormValues } from '../commons/types'
diff --git a/pro/src/pages/IndividualOffer/IndividualOfferInformations/components/UsefulInformationForm/UsefulInformationForm.tsx b/pro/src/pages/IndividualOffer/IndividualOfferInformations/components/UsefulInformationForm/UsefulInformationForm.tsx
index 3c3ca83c4c9..d1ffe5f7a6c 100644
--- a/pro/src/pages/IndividualOffer/IndividualOfferInformations/components/UsefulInformationForm/UsefulInformationForm.tsx
+++ b/pro/src/pages/IndividualOffer/IndividualOfferInformations/components/UsefulInformationForm/UsefulInformationForm.tsx
@@ -11,6 +11,8 @@ import { useAccessibilityOptions } from 'commons/hooks/useAccessibilityOptions'
 import { useActiveFeature } from 'commons/hooks/useActiveFeature'
 import { useCurrentUser } from 'commons/hooks/useCurrentUser'
 import { FormLayout } from 'components/FormLayout/FormLayout'
+import { OfferRefundWarning } from 'components/IndividualOffer/UsefulInformationScreen/UsefulInformationForm/components/OfferRefundWarning'
+import { WithdrawalReminder } from 'components/IndividualOffer/UsefulInformationScreen/UsefulInformationForm/components/WithdrawalReminder'
 import { Checkbox } from 'ui-kit/form/Checkbox/Checkbox'
 import { CheckboxGroup } from 'ui-kit/form/CheckboxGroup/CheckboxGroup'
 import { RadioGroup } from 'ui-kit/form/RadioGroup/RadioGroup'
@@ -31,8 +33,6 @@ import { UsefulInformationFormValues } from '../../commons/types'
 import { setFormReadOnlyFields } from '../../commons/utils'
 import { OfferLocation } from '../OfferLocation/OfferLocation'
 
-import { OfferRefundWarning } from './components/OfferRefundWarning'
-import { WithdrawalReminder } from './components/WithdrawalReminder'
 import styles from './UsefulInformationForm.module.scss'
 
 interface UsefulInformationFormProps {
diff --git a/pro/src/pages/OfferType/OfferType/CollectiveOfferType/CollectiveOfferType.tsx b/pro/src/pages/OfferType/OfferType/CollectiveOfferType/CollectiveOfferType.tsx
index d6a6709c380..b04885a278e 100644
--- a/pro/src/pages/OfferType/OfferType/CollectiveOfferType/CollectiveOfferType.tsx
+++ b/pro/src/pages/OfferType/OfferType/CollectiveOfferType/CollectiveOfferType.tsx
@@ -10,13 +10,13 @@ import {
 } from 'commons/core/Offers/constants'
 import { selectCurrentOffererId } from 'commons/store/user/selectors'
 import { getLastDmsApplicationForOfferer } from 'commons/utils/getLastCollectiveDmsApplication'
-import { Callout } from 'components/Callout/Callout'
-import { CalloutVariant } from 'components/Callout/types'
 import { FormLayout } from 'components/FormLayout/FormLayout'
 import strokeBookedIcon from 'icons/stroke-booked.svg'
 import duplicateOfferIcon from 'icons/stroke-duplicate-offer.svg'
 import strokeNewOfferIcon from 'icons/stroke-new-offer.svg'
 import strokeTemplateOfferIcon from 'icons/stroke-template-offer.svg'
+import { Callout } from 'ui-kit/Callout/Callout'
+import { CalloutVariant } from 'ui-kit/Callout/types'
 import { RadioButtonWithImage } from 'ui-kit/RadioButtonWithImage/RadioButtonWithImage'
 
 import styles from '../OfferType.module.scss'
diff --git a/pro/src/pages/Offerers/Offerer/VenueV1/VenueEdition/CollectiveDataEdition/CollectiveDataEdition.tsx b/pro/src/pages/Offerers/Offerer/VenueV1/VenueEdition/CollectiveDataEdition/CollectiveDataEdition.tsx
index 488fea2241f..01922eff761 100644
--- a/pro/src/pages/Offerers/Offerer/VenueV1/VenueEdition/CollectiveDataEdition/CollectiveDataEdition.tsx
+++ b/pro/src/pages/Offerers/Offerer/VenueV1/VenueEdition/CollectiveDataEdition/CollectiveDataEdition.tsx
@@ -11,9 +11,9 @@ import {
 } from 'commons/config/swrQueryKeys'
 import { SelectOption } from 'commons/custom_types/form'
 import { getLastCollectiveDmsApplication } from 'commons/utils/getLastCollectiveDmsApplication'
-import { Callout } from 'components/Callout/Callout'
 import { PartnerPageCollectiveSection } from 'pages/Homepage/components/Offerers/components/PartnerPages/components/PartnerPageCollectiveSection'
 import { CollectiveDmsTimeline } from 'pages/VenueCreation/CollectiveDmsTimeline/CollectiveDmsTimeline'
+import { Callout } from 'ui-kit/Callout/Callout'
 import { Spinner } from 'ui-kit/Spinner/Spinner'
 
 import styles from './CollectiveDataEdition.module.scss'
diff --git a/pro/src/pages/Offerers/Offerer/VenueV1/fields/PricingPoint/PricingPoint.tsx b/pro/src/pages/Offerers/Offerer/VenueV1/fields/PricingPoint/PricingPoint.tsx
index 901bb4ce358..0596723246c 100644
--- a/pro/src/pages/Offerers/Offerer/VenueV1/fields/PricingPoint/PricingPoint.tsx
+++ b/pro/src/pages/Offerers/Offerer/VenueV1/fields/PricingPoint/PricingPoint.tsx
@@ -8,12 +8,12 @@ import { GetOffererResponseModel, GetVenueResponseModel } from 'apiClient/v1'
 import { SENT_DATA_ERROR_MESSAGE } from 'commons/core/shared/constants'
 import { useActiveFeature } from 'commons/hooks/useActiveFeature'
 import { useNotification } from 'commons/hooks/useNotification'
-import { Callout } from 'components/Callout/Callout'
 import { ConfirmDialog } from 'components/Dialog/ConfirmDialog/ConfirmDialog'
 import fullLinkIcon from 'icons/full-link.svg'
 import strokeValidIcon from 'icons/stroke-valid.svg'
 import { Button } from 'ui-kit/Button/Button'
 import { ButtonLink } from 'ui-kit/Button/ButtonLink'
+import { Callout } from 'ui-kit/Callout/Callout'
 import { Select } from 'ui-kit/form/Select/Select'
 import { SvgIcon } from 'ui-kit/SvgIcon/SvgIcon'
 
diff --git a/pro/src/pages/Offerers/Offerer/VenueV1/fields/ReimbursementFields/ReimbursementFields.tsx b/pro/src/pages/Offerers/Offerer/VenueV1/fields/ReimbursementFields/ReimbursementFields.tsx
index 31289bba85d..5bd3c153daf 100644
--- a/pro/src/pages/Offerers/Offerer/VenueV1/fields/ReimbursementFields/ReimbursementFields.tsx
+++ b/pro/src/pages/Offerers/Offerer/VenueV1/fields/ReimbursementFields/ReimbursementFields.tsx
@@ -1,8 +1,8 @@
 import { useCallback } from 'react'
 
 import { GetOffererResponseModel, GetVenueResponseModel } from 'apiClient/v1'
-import { Callout } from 'components/Callout/Callout'
 import { FormLayout } from 'components/FormLayout/FormLayout'
+import { Callout } from 'ui-kit/Callout/Callout'
 
 import { PricingPoint } from '../PricingPoint/PricingPoint'
 
diff --git a/pro/src/pages/Offers/OffersTable/CollectiveOffersTable/CollectiveOffersTable.tsx b/pro/src/pages/Offers/OffersTable/CollectiveOffersTable/CollectiveOffersTable.tsx
index 42ee9db7362..86af58ec4e2 100644
--- a/pro/src/pages/Offers/OffersTable/CollectiveOffersTable/CollectiveOffersTable.tsx
+++ b/pro/src/pages/Offers/OffersTable/CollectiveOffersTable/CollectiveOffersTable.tsx
@@ -4,11 +4,11 @@ import { useDefaultCollectiveSearchFilters } from 'commons/core/Offers/hooks/use
 import { CollectiveSearchFiltersParams } from 'commons/core/Offers/types'
 import { hasCollectiveSearchFilters } from 'commons/core/Offers/utils/hasSearchFilters'
 import { SortingMode } from 'commons/hooks/useColumnSorting'
-import { Callout } from 'components/Callout/Callout'
-import { CalloutVariant } from 'components/Callout/types'
 import { CollectiveOffersSortingColumn } from 'pages/CollectiveOffers/components/CollectiveOffersScreen/CollectiveOffersScreen'
 import { NoResults } from 'pages/Offers/components/IndividualOffersScreen/NoResults/NoResults'
 import { getOffersCountToDisplay } from 'pages/Offers/domain/getOffersCountToDisplay'
+import { Callout } from 'ui-kit/Callout/Callout'
+import { CalloutVariant } from 'ui-kit/Callout/types'
 import { BaseCheckbox } from 'ui-kit/form/shared/BaseCheckbox/BaseCheckbox'
 import { Spinner } from 'ui-kit/Spinner/Spinner'
 
diff --git a/pro/src/pages/Offers/OffersTable/IndividualOffersTable/IndividualOffersTable.tsx b/pro/src/pages/Offers/OffersTable/IndividualOffersTable/IndividualOffersTable.tsx
index ae6f82f982c..bbca7d891c6 100644
--- a/pro/src/pages/Offers/OffersTable/IndividualOffersTable/IndividualOffersTable.tsx
+++ b/pro/src/pages/Offers/OffersTable/IndividualOffersTable/IndividualOffersTable.tsx
@@ -2,10 +2,10 @@ import { ListOffersOfferResponseModel } from 'apiClient/v1'
 import { MAX_OFFERS_TO_DISPLAY } from 'commons/core/Offers/constants'
 import { SearchFiltersParams } from 'commons/core/Offers/types'
 import { hasSearchFilters } from 'commons/core/Offers/utils/hasSearchFilters'
-import { Callout } from 'components/Callout/Callout'
-import { CalloutVariant } from 'components/Callout/types'
 import { NoResults } from 'pages/Offers/components/IndividualOffersScreen/NoResults/NoResults'
 import { getOffersCountToDisplay } from 'pages/Offers/domain/getOffersCountToDisplay'
+import { Callout } from 'ui-kit/Callout/Callout'
+import { CalloutVariant } from 'ui-kit/Callout/types'
 import { BaseCheckbox } from 'ui-kit/form/shared/BaseCheckbox/BaseCheckbox'
 import { Pagination } from 'ui-kit/Pagination/Pagination'
 import { Spinner } from 'ui-kit/Spinner/Spinner'
diff --git a/pro/src/pages/Reimbursements/BankInformations/LinkVenuesDialog.tsx b/pro/src/pages/Reimbursements/BankInformations/LinkVenuesDialog.tsx
index 1655de396e2..3fa718b6774 100644
--- a/pro/src/pages/Reimbursements/BankInformations/LinkVenuesDialog.tsx
+++ b/pro/src/pages/Reimbursements/BankInformations/LinkVenuesDialog.tsx
@@ -11,13 +11,13 @@ import { BankAccountEvents } from 'commons/core/FirebaseEvents/constants'
 import { useActiveFeature } from 'commons/hooks/useActiveFeature'
 import { useNotification } from 'commons/hooks/useNotification'
 import { pluralizeString } from 'commons/utils/pluralize'
-import { Callout } from 'components/Callout/Callout'
-import { CalloutVariant } from 'components/Callout/types'
 import { ConfirmDialog } from 'components/Dialog/ConfirmDialog/ConfirmDialog'
 import fullEditIcon from 'icons/full-edit.svg'
 import strokeWarningIcon from 'icons/stroke-warning.svg'
 import { Button } from 'ui-kit/Button/Button'
 import { ButtonVariant, IconPositionEnum } from 'ui-kit/Button/types'
+import { Callout } from 'ui-kit/Callout/Callout'
+import { CalloutVariant } from 'ui-kit/Callout/types'
 import { DialogBuilder } from 'ui-kit/DialogBuilder/DialogBuilder'
 import { BaseCheckbox } from 'ui-kit/form/shared/BaseCheckbox/BaseCheckbox'
 
diff --git a/pro/src/pages/Reimbursements/BankInformations/PricingPointDialog/PricingPointDialog.tsx b/pro/src/pages/Reimbursements/BankInformations/PricingPointDialog/PricingPointDialog.tsx
index 7a1880bbedf..ed71ac9ea81 100644
--- a/pro/src/pages/Reimbursements/BankInformations/PricingPointDialog/PricingPointDialog.tsx
+++ b/pro/src/pages/Reimbursements/BankInformations/PricingPointDialog/PricingPointDialog.tsx
@@ -5,9 +5,9 @@ import { api } from 'apiClient/api'
 import { ManagedVenues } from 'apiClient/v1'
 import { useActiveFeature } from 'commons/hooks/useActiveFeature'
 import { useNotification } from 'commons/hooks/useNotification'
-import { Callout } from 'components/Callout/Callout'
 import { Button } from 'ui-kit/Button/Button'
 import { ButtonVariant } from 'ui-kit/Button/types'
+import { Callout } from 'ui-kit/Callout/Callout'
 import { Select } from 'ui-kit/form/Select/Select'
 
 import styles from './PricingPointDialog.module.scss'
diff --git a/pro/src/pages/Reimbursements/ReimbursementsInvoices/BannerReimbursementsInfo.tsx b/pro/src/pages/Reimbursements/ReimbursementsInvoices/BannerReimbursementsInfo.tsx
index 67a5281a9d4..e0d3bad8b51 100644
--- a/pro/src/pages/Reimbursements/ReimbursementsInvoices/BannerReimbursementsInfo.tsx
+++ b/pro/src/pages/Reimbursements/ReimbursementsInvoices/BannerReimbursementsInfo.tsx
@@ -1,6 +1,4 @@
-import React from 'react'
-
-import { Callout } from 'components/Callout/Callout'
+import { Callout } from 'ui-kit/Callout/Callout'
 
 export const BannerReimbursementsInfo = (): JSX.Element => {
   return (
diff --git a/pro/src/pages/Signup/SignupConfirmation/SignupConfirmation.tsx b/pro/src/pages/Signup/SignupConfirmation/SignupConfirmation.tsx
index b6c918067d0..146ecd97037 100644
--- a/pro/src/pages/Signup/SignupConfirmation/SignupConfirmation.tsx
+++ b/pro/src/pages/Signup/SignupConfirmation/SignupConfirmation.tsx
@@ -1,8 +1,8 @@
 import React from 'react'
 
 import { useRedirectLoggedUser } from 'commons/hooks/useRedirectLoggedUser'
-import { Callout } from 'components/Callout/Callout'
 import fullMailIcon from 'icons/full-mail.svg'
+import { Callout } from 'ui-kit/Callout/Callout'
 
 import styles from './SignupConfirmation.module.scss'
 
diff --git a/pro/src/pages/Signup/SignupContainer/OperationProcedures/OperationProcedures.tsx b/pro/src/pages/Signup/SignupContainer/OperationProcedures/OperationProcedures.tsx
index 8265560258d..ba661a28b58 100644
--- a/pro/src/pages/Signup/SignupContainer/OperationProcedures/OperationProcedures.tsx
+++ b/pro/src/pages/Signup/SignupContainer/OperationProcedures/OperationProcedures.tsx
@@ -3,7 +3,7 @@ import { useLocation } from 'react-router-dom'
 
 import { useAnalytics } from 'app/App/analytics/firebase'
 import { Events } from 'commons/core/FirebaseEvents/constants'
-import { Callout } from 'components/Callout/Callout'
+import { Callout } from 'ui-kit/Callout/Callout'
 
 import styles from './OperationProcedures.module.scss'
 
diff --git a/pro/src/pages/User/UserProfile/UserEmail/BannerPendingEmailValidation/BannerPendingEmailValidation.tsx b/pro/src/pages/User/UserProfile/UserEmail/BannerPendingEmailValidation/BannerPendingEmailValidation.tsx
index 23e34fcb4e3..42bb21f609a 100644
--- a/pro/src/pages/User/UserProfile/UserEmail/BannerPendingEmailValidation/BannerPendingEmailValidation.tsx
+++ b/pro/src/pages/User/UserProfile/UserEmail/BannerPendingEmailValidation/BannerPendingEmailValidation.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 
-import { Callout } from 'components/Callout/Callout'
-import { CalloutVariant } from 'components/Callout/types'
+import { Callout } from 'ui-kit/Callout/Callout'
+import { CalloutVariant } from 'ui-kit/Callout/types'
 
 import styles from './BannerPendingEmailValidation.module.scss'
 
diff --git a/pro/src/pages/VenueCreation/Accessibility/Accessibility.tsx b/pro/src/pages/VenueCreation/Accessibility/Accessibility.tsx
index 7dc1624e961..ff29738b15d 100644
--- a/pro/src/pages/VenueCreation/Accessibility/Accessibility.tsx
+++ b/pro/src/pages/VenueCreation/Accessibility/Accessibility.tsx
@@ -3,10 +3,10 @@ import isEqual from 'lodash.isequal'
 import React, { useMemo } from 'react'
 
 import { useAccessibilityOptions } from 'commons/hooks/useAccessibilityOptions'
-import { Callout } from 'components/Callout/Callout'
-import { CalloutVariant } from 'components/Callout/types'
 import { FormLayout } from 'components/FormLayout/FormLayout'
 import { VenueEditionFormValues } from 'pages/VenueEdition/types'
+import { Callout } from 'ui-kit/Callout/Callout'
+import { CalloutVariant } from 'ui-kit/Callout/types'
 import { Checkbox } from 'ui-kit/form/Checkbox/Checkbox'
 import { CheckboxGroup } from 'ui-kit/form/CheckboxGroup/CheckboxGroup'
 
diff --git a/pro/src/pages/VenueCreation/BankAccountInfos/BankAccountInfos.tsx b/pro/src/pages/VenueCreation/BankAccountInfos/BankAccountInfos.tsx
index ca0380d77da..3a546f74b0e 100644
--- a/pro/src/pages/VenueCreation/BankAccountInfos/BankAccountInfos.tsx
+++ b/pro/src/pages/VenueCreation/BankAccountInfos/BankAccountInfos.tsx
@@ -2,9 +2,9 @@ import React from 'react'
 
 import { BankAccountResponseModel } from 'apiClient/v1'
 import { useActiveFeature } from 'commons/hooks/useActiveFeature'
-import { Callout } from 'components/Callout/Callout'
-import { CalloutVariant } from 'components/Callout/types'
 import { FormLayout } from 'components/FormLayout/FormLayout'
+import { Callout } from 'ui-kit/Callout/Callout'
+import { CalloutVariant } from 'ui-kit/Callout/types'
 import { TextInput } from 'ui-kit/form/TextInput/TextInput'
 
 interface BankAccountInfosProps {
diff --git a/pro/src/pages/VenueCreation/CollectiveDmsTimeline/CollectiveDmsTimeline.tsx b/pro/src/pages/VenueCreation/CollectiveDmsTimeline/CollectiveDmsTimeline.tsx
index 8f984b90b79..3a0ab45e584 100644
--- a/pro/src/pages/VenueCreation/CollectiveDmsTimeline/CollectiveDmsTimeline.tsx
+++ b/pro/src/pages/VenueCreation/CollectiveDmsTimeline/CollectiveDmsTimeline.tsx
@@ -2,10 +2,10 @@ import { DMSApplicationForEAC, DMSApplicationstatus } from 'apiClient/v1'
 import { useAnalytics } from 'app/App/analytics/firebase'
 import { Events } from 'commons/core/FirebaseEvents/constants'
 import { getDateToFrenchText } from 'commons/utils/date'
-import { Callout } from 'components/Callout/Callout'
-import { CalloutVariant } from 'components/Callout/types'
 import { ButtonLink } from 'ui-kit/Button/ButtonLink'
 import { ButtonVariant } from 'ui-kit/Button/types'
+import { Callout } from 'ui-kit/Callout/Callout'
+import { CalloutVariant } from 'ui-kit/Callout/types'
 import { Timeline, TimelineStepType } from 'ui-kit/Timeline/Timeline'
 
 import styles from './CollectiveDmsTimeline.module.scss'
diff --git a/pro/src/pages/VenueCreation/VenueCreationForm.tsx b/pro/src/pages/VenueCreation/VenueCreationForm.tsx
index db1c3c44c60..35de639f5cd 100644
--- a/pro/src/pages/VenueCreation/VenueCreationForm.tsx
+++ b/pro/src/pages/VenueCreation/VenueCreationForm.tsx
@@ -6,8 +6,6 @@ import { GetOffererResponseModel, VenueTypeResponseModel } from 'apiClient/v1'
 import { selectCurrentOffererId } from 'commons/store/user/selectors'
 import { ActionsBarSticky } from 'components/ActionsBarSticky/ActionsBarSticky'
 import { AddressSelect } from 'components/Address/Address'
-import { Callout } from 'components/Callout/Callout'
-import { CalloutVariant } from 'components/Callout/types'
 import { FormLayout } from 'components/FormLayout/FormLayout'
 import {
   BlockerFunction,
@@ -17,6 +15,8 @@ import { ScrollToFirstErrorAfterSubmit } from 'components/ScrollToFirstErrorAfte
 import { Button } from 'ui-kit/Button/Button'
 import { ButtonLink } from 'ui-kit/Button/ButtonLink'
 import { ButtonVariant } from 'ui-kit/Button/types'
+import { Callout } from 'ui-kit/Callout/Callout'
+import { CalloutVariant } from 'ui-kit/Callout/types'
 import { Select } from 'ui-kit/form/Select/Select'
 import { TextInput } from 'ui-kit/form/TextInput/TextInput'
 import { InfoBox } from 'ui-kit/InfoBox/InfoBox'
diff --git a/pro/src/pages/VenueEdition/VenueEditionFormScreen.tsx b/pro/src/pages/VenueEdition/VenueEditionFormScreen.tsx
index b06e7dee708..b2fdfa6a1ff 100644
--- a/pro/src/pages/VenueEdition/VenueEditionFormScreen.tsx
+++ b/pro/src/pages/VenueEdition/VenueEditionFormScreen.tsx
@@ -2,8 +2,8 @@ import { Route, Routes } from 'react-router-dom'
 
 import { GetVenueResponseModel } from 'apiClient/v1'
 import { useActiveFeature } from 'commons/hooks/useActiveFeature'
-import { Callout } from 'components/Callout/Callout'
 import { PartnerPageIndividualSection } from 'pages/Homepage/components/Offerers/components/PartnerPages/components/PartnerPageIndividualSection'
+import { Callout } from 'ui-kit/Callout/Callout'
 
 import { AccesLibreSection } from './AccesLibreSection/AccesLibreSection'
 import { VenueEditionForm } from './VenueEditionForm'
diff --git a/pro/src/pages/VenueEdition/VenueEditionReadOnly.tsx b/pro/src/pages/VenueEdition/VenueEditionReadOnly.tsx
index 82b45106b52..b09d33cb7bb 100644
--- a/pro/src/pages/VenueEdition/VenueEditionReadOnly.tsx
+++ b/pro/src/pages/VenueEdition/VenueEditionReadOnly.tsx
@@ -1,11 +1,11 @@
 import { GetVenueResponseModel } from 'apiClient/v1'
 import { AccessibilitySummarySection } from 'components/AccessibilitySummarySection/AccessibilitySummarySection'
-import { Callout } from 'components/Callout/Callout'
-import { CalloutVariant } from 'components/Callout/types'
 import { SummaryDescriptionList } from 'components/SummaryLayout/SummaryDescriptionList'
 import { SummarySection } from 'components/SummaryLayout/SummarySection'
 import { SummarySubSection } from 'components/SummaryLayout/SummarySubSection'
 import { OpeningHoursReadOnly } from 'pages/VenueEdition/OpeningHoursReadOnly/OpeningHoursReadOnly'
+import { Callout } from 'ui-kit/Callout/Callout'
+import { CalloutVariant } from 'ui-kit/Callout/types'
 
 interface VenueEditionReadOnlyProps {
   venue: GetVenueResponseModel
diff --git a/pro/src/pages/VenueSettings/VenueProvidersManager/AllocineProviderForm/AllocineProviderForm.tsx b/pro/src/pages/VenueSettings/VenueProvidersManager/AllocineProviderForm/AllocineProviderForm.tsx
index b248c796497..8f2f9beae8e 100644
--- a/pro/src/pages/VenueSettings/VenueProvidersManager/AllocineProviderForm/AllocineProviderForm.tsx
+++ b/pro/src/pages/VenueSettings/VenueProvidersManager/AllocineProviderForm/AllocineProviderForm.tsx
@@ -5,11 +5,11 @@ import { useState } from 'react'
 import { PostVenueProviderBody } from 'apiClient/v1'
 import { useAnalytics } from 'app/App/analytics/firebase'
 import { SynchronizationEvents } from 'commons/core/FirebaseEvents/constants'
-import { Callout } from 'components/Callout/Callout'
 import { FormLayout } from 'components/FormLayout/FormLayout'
 import { validationSchema } from 'pages/VenueSettings/VenueProvidersManager/AllocineProviderForm/validationSchema'
 import { Button } from 'ui-kit/Button/Button'
 import { ButtonVariant } from 'ui-kit/Button/types'
+import { Callout } from 'ui-kit/Callout/Callout'
 import { QuantityInput } from 'ui-kit/form/QuantityInput/QuantityInput'
 import { TextInput } from 'ui-kit/form/TextInput/TextInput'
 
diff --git a/pro/src/components/Callout/Callout.module.scss b/pro/src/ui-kit/Callout/Callout.module.scss
similarity index 100%
rename from pro/src/components/Callout/Callout.module.scss
rename to pro/src/ui-kit/Callout/Callout.module.scss
diff --git a/pro/src/components/Callout/__specs__/Callout.spec.tsx b/pro/src/ui-kit/Callout/Callout.spec.tsx
similarity index 94%
rename from pro/src/components/Callout/__specs__/Callout.spec.tsx
rename to pro/src/ui-kit/Callout/Callout.spec.tsx
index 753e752e301..6e709a2a83e 100644
--- a/pro/src/components/Callout/__specs__/Callout.spec.tsx
+++ b/pro/src/ui-kit/Callout/Callout.spec.tsx
@@ -1,11 +1,10 @@
 import { screen } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
-import React from 'react'
 
 import { renderWithProviders } from 'commons/utils/renderWithProviders'
-import { CalloutVariant } from 'components/Callout/types'
+import { CalloutVariant } from 'ui-kit/Callout/types'
 
-import { Callout, CalloutProps } from '../Callout'
+import { Callout, CalloutProps } from './Callout'
 
 describe('Callout', () => {
   const props: CalloutProps = {
diff --git a/pro/src/components/Callout/Callout.stories.tsx b/pro/src/ui-kit/Callout/Callout.stories.tsx
similarity index 97%
rename from pro/src/components/Callout/Callout.stories.tsx
rename to pro/src/ui-kit/Callout/Callout.stories.tsx
index 8d3c5bbf4f9..96e87d6b970 100644
--- a/pro/src/components/Callout/Callout.stories.tsx
+++ b/pro/src/ui-kit/Callout/Callout.stories.tsx
@@ -3,7 +3,7 @@ import type { StoryObj } from '@storybook/react'
 import { Callout } from './Callout'
 
 export default {
-  title: 'components/Callout',
+  title: 'ui-kit/Callout',
   component: Callout,
 }
 
diff --git a/pro/src/components/Callout/Callout.tsx b/pro/src/ui-kit/Callout/Callout.tsx
similarity index 97%
rename from pro/src/components/Callout/Callout.tsx
rename to pro/src/ui-kit/Callout/Callout.tsx
index 05063c7f789..9f53304fc50 100644
--- a/pro/src/components/Callout/Callout.tsx
+++ b/pro/src/ui-kit/Callout/Callout.tsx
@@ -1,12 +1,12 @@
 import cn from 'classnames'
 import React from 'react'
 
-import { CalloutVariant } from 'components/Callout/types'
 import fullErrorIcon from 'icons/full-error.svg'
 import fullInfoIcon from 'icons/full-info.svg'
 import fullValidIcon from 'icons/full-validate.svg'
 import fullWarningIcon from 'icons/full-warning.svg'
 import strokeCloseIcon from 'icons/stroke-close.svg'
+import { CalloutVariant } from 'ui-kit/Callout/types'
 import { Link, LinkNodes } from 'ui-kit/LinkNodes/LinkNodes'
 import { SvgIcon } from 'ui-kit/SvgIcon/SvgIcon'
 
diff --git a/pro/src/components/Callout/types.ts b/pro/src/ui-kit/Callout/types.ts
similarity index 100%
rename from pro/src/components/Callout/types.ts
rename to pro/src/ui-kit/Callout/types.ts