diff --git a/site/source/design-system/index.ts b/site/source/design-system/index.ts
index 9c5211a0c..44b67609f 100644
--- a/site/source/design-system/index.ts
+++ b/site/source/design-system/index.ts
@@ -5,3 +5,4 @@ export * as layout from './layout'
export { default as Popover } from './Popover'
export { default as PopoverWithTrigger } from './PopoverWithTrigger'
export * as typography from './typography'
+export * from './message'
diff --git a/site/source/design-system/message/baseIcon.svg b/site/source/design-system/message/baseIcon.svg
new file mode 100644
index 000000000..28a4d40ac
--- /dev/null
+++ b/site/source/design-system/message/baseIcon.svg
@@ -0,0 +1,4 @@
+
diff --git a/site/source/design-system/message/errorIcon.svg b/site/source/design-system/message/errorIcon.svg
new file mode 100644
index 000000000..1307cb2f7
--- /dev/null
+++ b/site/source/design-system/message/errorIcon.svg
@@ -0,0 +1,5 @@
+
diff --git a/site/source/design-system/message/index.stories.tsx b/site/source/design-system/message/index.stories.tsx
new file mode 100644
index 000000000..c65da335c
--- /dev/null
+++ b/site/source/design-system/message/index.stories.tsx
@@ -0,0 +1,45 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import { Message } from '@/design-system'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+ component: Message,
+ // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+ argTypes: {
+ children: { type: 'string' },
+ },
+} as ComponentMeta
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template: ComponentStory = (args) =>
+
+export const AccompanyingMessage = Template.bind({})
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+AccompanyingMessage.args = {
+ children:
+ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam',
+ type: 'primary',
+ icon: true,
+ border: true,
+}
+
+const AlertTemplate: ComponentStory = (args) => (
+ <>
+
+ Votre message a bien été envoyé
+
+
+ Certaines informations sont incorrectes
+
+
+ Échec de l’envoi du message
+
+
+)
+
+export const Alert = AlertTemplate.bind({})
+Alert.args = {
+ children: 'Votre message a bien été envoyé',
+ icon: true,
+ border: true,
+}
diff --git a/site/source/design-system/message/index.tsx b/site/source/design-system/message/index.tsx
new file mode 100644
index 000000000..05f9c5e87
--- /dev/null
+++ b/site/source/design-system/message/index.tsx
@@ -0,0 +1,91 @@
+import React from 'react'
+import styled, { css } from 'styled-components'
+import baseIcon from './baseIcon.svg'
+import infoIcon from './infoIcon.svg'
+import errorIcon from './errorIcon.svg'
+import successIcon from './successIcon.svg'
+import { Body } from '../typography/paragraphs'
+
+type MessageType = 'primary' | 'secondary' | 'info' | 'error' | 'success'
+type MessageProps = {
+ children: React.ReactNode
+ icon?: boolean
+ border?: boolean
+ type: MessageType
+ light?: boolean
+}
+export function Message({
+ type = 'primary',
+ icon = false,
+ border = true,
+ light = false,
+ children,
+}: MessageProps) {
+ if (typeof children !== 'object') {
+ children = {children}
+ }
+ return (
+
+ {icon &&
+ (type === 'success' ? (
+
+ ) : type === 'error' ? (
+
+ ) : type === 'info' ? (
+
+ ) : (
+
+ ))}
+ {children}
+
+ )
+}
+
+const StyledMessage = styled.div<
+ Pick
+>`
+ display: flex;
+ align-items: flex-start;
+ ${({ theme, type, border, light }) => {
+ const colorSpace =
+ type === 'secondary' || type === 'primary'
+ ? theme.colors.bases[type]
+ : theme.colors.extended[type]
+ return css`
+ padding: ${theme.spacings.xs} ${theme.spacings.lg};
+ background-color: ${light ? 'rgba(255,255,255,0.75)' : colorSpace[100]};
+ border: 2px solid ${colorSpace[border ? 500 : 100]};
+ border-radius: ${theme.box.borderRadius};
+ margin-bottom: ${theme.spacings.md};
+ `
+ }}
+`
+
+const StyledIcon = styled.img`
+ padding-right: ${({ theme }) => theme.spacings.md};
+ ${({ theme, title }) =>
+ title !== 'paragraph'
+ ? css`
+ margin-top: calc(${theme.spacings.md} + ${theme.spacings.xxs} / 2);
+ height: calc(${theme.spacings.md} + ${theme.spacings.xxs});
+ `
+ : css`
+ margin-top: calc(${theme.spacings.lg});
+ `}
+`
diff --git a/site/source/design-system/message/infoIcon.svg b/site/source/design-system/message/infoIcon.svg
new file mode 100644
index 000000000..c97b6bc9c
--- /dev/null
+++ b/site/source/design-system/message/infoIcon.svg
@@ -0,0 +1,5 @@
+
diff --git a/site/source/design-system/message/successIcon.svg b/site/source/design-system/message/successIcon.svg
new file mode 100644
index 000000000..e02eae0e5
--- /dev/null
+++ b/site/source/design-system/message/successIcon.svg
@@ -0,0 +1,4 @@
+