diff --git a/components/home/HomeActionButton/index.tsx b/components/home/HomeActionButton/index.tsx
new file mode 100644
index 00000000..feca93dd
--- /dev/null
+++ b/components/home/HomeActionButton/index.tsx
@@ -0,0 +1,35 @@
+import { fr } from '@codegouvfr/react-dsfr';
+import Button from '@codegouvfr/react-dsfr/Button';
+import { text } from 'stream/consumers';
+import { tss } from 'tss-react/dsfr';
+
+const HomeActionButton = () => {
+	const { cx, classes } = useStyles();
+
+	return (
+		<section className={fr.cx('fr-container', 'fr-py-16v')}>
+			<div className={cx(classes.container)}>
+				<h2>Prêt à recueillir les avis des usagers</h2>
+				<Button className={fr.cx('fr-my-2v')}>Commencer</Button>
+			</div>
+		</section>
+	);
+};
+
+const useStyles = tss
+	.withName(HomeActionButton.name)
+	.withParams()
+	.create(() => ({
+		container: {
+			h2: {
+				color: fr.colors.decisions.text.title.blueFrance.default,
+				textAlign: 'center'
+			},
+			justifyContent: 'center',
+			alignItems: 'center',
+			display: 'flex',
+			flexDirection: 'column'
+		}
+	}));
+
+export default HomeActionButton;
diff --git a/components/home/HomeFeatureDisplay/index.tsx b/components/home/HomeFeatureDisplay/index.tsx
index 6ac5ba38..4ae398e0 100644
--- a/components/home/HomeFeatureDisplay/index.tsx
+++ b/components/home/HomeFeatureDisplay/index.tsx
@@ -39,7 +39,13 @@ const HomeFeatureDisplay = (props: HFDProps) => {
 							classes.imageContainer
 						)}
 					>
-						<Image src={props.image} alt="" width={448} height={316} />
+						<Image
+							src={props.image}
+							alt=""
+							width={448}
+							height={316}
+							style={{ maxWidth: '100%' }}
+						/>
 					</div>
 				</div>
 			</section>
@@ -66,6 +72,11 @@ const useStyles = tss
 			},
 			i: {
 				color: fr.colors.decisions.text.title.blueFrance.default
+			},
+			[fr.breakpoints.down('md')]: {
+				...fr.spacing('margin', {
+					topBottom: '1v'
+				})
 			}
 		},
 		blueBlock: {
@@ -77,6 +88,7 @@ const useStyles = tss
 			position: 'absolute',
 			left: imagePosition === 'left' ? '30%' : '0',
 			[fr.breakpoints.down('md')]: {
+				display: 'none',
 				left: imagePosition === 'left' ? 100 : '0'
 			}
 		},
diff --git a/components/home/HomePills/index.tsx b/components/home/HomePills/index.tsx
new file mode 100644
index 00000000..a085e706
--- /dev/null
+++ b/components/home/HomePills/index.tsx
@@ -0,0 +1,88 @@
+import { Pill } from '@/pages';
+import { fr } from '@codegouvfr/react-dsfr';
+import { tss } from 'tss-react/dsfr';
+
+interface HomePillsProps {
+	pills: Pill[];
+}
+
+const HomePills = (props: HomePillsProps) => {
+	const { cx, classes } = useStyles();
+
+	return (
+		<section className={fr.cx('fr-container')}>
+			<div
+				className={fr.cx(
+					'fr-grid-row',
+					'fr-grid-row--gutters',
+					'fr-grid-row--center',
+					'fr-py-12w'
+				)}
+			>
+				{props.pills.map((pill, index) => (
+					<div
+						key={index}
+						className={cx(fr.cx('fr-col', 'fr-col-12', 'fr-col-md-4'))}
+					>
+						<div className={cx(classes.badge)}>
+							<h2 className={cx(classes.title)}>{pill.title}</h2>
+							<div className={cx(classes.badgeIcon)}>
+								<i className="ri-check-line"></i>
+							</div>
+						</div>
+						<div className={cx(classes.paragraph)}>
+							<p>{pill.description}</p>
+						</div>
+					</div>
+				))}
+			</div>
+		</section>
+	);
+};
+
+const useStyles = tss
+	.withName(HomePills.name)
+	.withParams()
+	.create(() => ({
+		badge: {
+			...fr.spacing('margin', {
+				rightLeft: '5w'
+			}),
+			position: 'relative',
+			...fr.spacing('padding', {
+				rightLeft: '3w'
+			})
+		},
+		title: {
+			color: fr.colors.decisions.text.title.blueFrance.default,
+			textAlign: 'center',
+			backgroundColor: fr.colors.decisions.background.alt.blueEcume.default,
+			...fr.spacing('padding', {
+				topBottom: '1v'
+			}),
+			borderRadius: fr.spacing('3w')
+		},
+		badgeIcon: {
+			position: 'absolute',
+			top: '0',
+			right: '0',
+			transform: 'translate(-50%, -50%)',
+			color: '#FFF',
+			backgroundColor:
+				fr.colors.decisions.background.actionHigh.success.default,
+			borderRadius: '50%',
+			...fr.spacing('padding', {
+				topBottom: '1v',
+				rightLeft: '1v'
+			})
+		},
+		paragraph: {
+			...fr.spacing('padding', {
+				rightLeft: '4w'
+			}),
+			textAlign: 'center',
+			fontWeight: fr.typography[0].style.fontWeight
+		}
+	}));
+
+export default HomePills;
diff --git a/components/home/HomeReferences/index.tsx b/components/home/HomeReferences/index.tsx
new file mode 100644
index 00000000..403bc8e7
--- /dev/null
+++ b/components/home/HomeReferences/index.tsx
@@ -0,0 +1,91 @@
+import { Reference } from '@/pages';
+import Image from 'next/image';
+import { tss } from 'tss-react/dsfr';
+import { fr } from '@codegouvfr/react-dsfr';
+
+interface HomeReferencesProps {
+	references: Reference[];
+}
+
+const HomeReferences = (props: HomeReferencesProps) => {
+	const { cx, classes } = useStyles();
+
+	return (
+		<section className={cx(fr.cx('fr-container'), classes.root)}>
+			<h2>Elles recommandent</h2>
+			{props.references.map((reference, index) => (
+				<div
+					key={index}
+					className={fr.cx('fr-grid-row', 'fr-grid-row--gutters', 'fr-pb-6w')}
+				>
+					<div
+						className={cx(
+							fr.cx('fr-col', 'fr-col-12', 'fr-col-md-3'),
+							classes.imageContainer
+						)}
+					>
+						<Image
+							src={reference.image_path}
+							alt={reference.author}
+							width={180}
+							height={180}
+							className={cx(classes.image)}
+						/>
+					</div>
+					<div className={fr.cx('fr-col', 'fr-col-12', 'fr-col-md-9')}>
+						<div className={cx(classes.textContainer)}>
+							<i className={cx(fr.cx('fr-icon-quote-line'), classes.icon)} />
+							<h6>{reference.description}</h6>
+							<div>
+								<p className={cx(classes.underInfos, classes.bold)}>
+									{reference.author}
+								</p>
+								<p className={cx(classes.underInfos, classes.italic)}>
+									{reference.job_title}
+								</p>
+							</div>
+						</div>
+					</div>
+				</div>
+			))}
+		</section>
+	);
+};
+
+const useStyles = tss.withName(HomeReferences.name).create(() => ({
+	root: {
+		h2: {
+			color: fr.colors.decisions.text.title.blueFrance.default
+		}
+	},
+	imageContainer: {
+		display: 'flex',
+		justifyContent: 'center',
+		borderRight: '1px solid #e5e5e5',
+		paddingRight: 0
+	},
+	image: {
+		borderRadius: '50%'
+	},
+	icon: {
+		color: fr.colors.decisions.text.actionHigh.blueFrance.default
+	},
+	textContainer: {
+		display: 'flex',
+		flexDirection: 'column',
+		justifyContent: 'space-between',
+		height: '100%'
+	},
+	underInfos: {
+		marginBottom: 0
+	},
+	bold: {
+		fontWeight: 'bold'
+	},
+	italic: {
+		fontStyle: 'italic',
+		color: fr.colors.decisions.text.mention.grey.default
+	}
+}));
+
+export default HomeReferences;
diff --git a/components/home/HomeStepper/index.tsx b/components/home/HomeStepper/index.tsx
index 280390f6..b0c42479 100644
--- a/components/home/HomeStepper/index.tsx
+++ b/components/home/HomeStepper/index.tsx
@@ -68,9 +68,9 @@ const useStyles = tss
 		container: {
 			h2: {
 				color: fr.colors.decisions.text.title.blueFrance.default,
-				marginBottom: '3rem',
+				...fr.spacing('margin', { bottom: '6w' }),
 				[fr.breakpoints.down('md')]: {
-					marginBottom: '2rem'
+					...fr.spacing('margin', { bottom: '3w' })
 				}
 			}
 		},
@@ -83,7 +83,7 @@ const useStyles = tss
 			justifyContent: 'center',
 			alignItems: 'center',
 			[fr.breakpoints.down('md')]: {
-				marginBottom: '2rem'
+				...fr.spacing('margin', { bottom: '3w' })
 			}
 		},
 		numberContainer: {
@@ -91,7 +91,7 @@ const useStyles = tss
 			borderRadius: '50%',
 			width: '5rem',
 			height: '5rem',
-			marginBottom: '1.5rem',
+			...fr.spacing('margin', { bottom: '2w' }),
 			textAlign: 'center'
 		},
 		number: {
diff --git a/pages/index.tsx b/pages/index.tsx
index b47f3493..44e47d8d 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -4,6 +4,9 @@ import Image from 'next/image';
 import HomeStepper from '@/components/home/HomeStepper';
 import HomeFeatureDisplay from '@/components/home/HomeFeatureDisplay';
 import { ReactElement } from 'react';
+import HomePills from '@/components/home/HomePills';
+import HomeReferences from '@/components/home/HomeReferences';
+import HomeActionButton from '@/components/home/HomeActionButton';
 
 interface Feature {
 	icon: ReactElement<any, any>;
@@ -13,6 +16,18 @@ interface Feature {
 	imagePosition: 'left' | 'right';
 }
 
+export interface Pill {
+	title: string;
+	description: string;
+}
+
+export interface Reference {
+	image_path: string;
+	author: string;
+	job_title: string;
+	description: string;
+}
+
 export default function Home() {
 	const { classes, cx } = useStyles();
 
@@ -51,6 +66,39 @@ export default function Home() {
 		}
 	];
 
+	const pills: Pill[] = [
+		{
+			title: 'Gratuit',
+			description: 'Gratuit, concu pour les administrations publiques'
+		},
+		{
+			title: 'RGAA',
+			description: 'Accessible à toutes et tous, conforme au RGAA'
+		},
+		{
+			title: 'RGPD',
+			description: 'Respectueux de la vie privée, conforme au RGPD'
+		}
+	];
+
+	const references: Reference[] = [
+		{
+			image_path: '/assets/temoignage_1.jpeg',
+			description:
+				'« Le bouton je donne mon avis, que nous avons installé pour récolter les avis des usagers de la démarche de paiement des impôt en ligne, nous a fournis les pistes pour augmenter le taux de satisfaction de 20% en un an ! »',
+			author: 'Fabienne D.',
+			job_title: 'Responsable projet à la DGFIP'
+		},
+		{
+			image_path: '/assets/temoignage_2.jpeg',
+			description:
+				'« Cela nous a pris moins de 2h pour configurer et installer le bouton Je donne mon avis. Le code est extrèment simple et la procédure bien indiquée. »',
+			author: 'Mathilde P.',
+			job_title:
+				'Directrice technique au ministère des Solidarité et de la Santé'
+		}
+	];
+
 	const displayHomeFeature = () => {
 		return features.map((feature, index) => (
 			<HomeFeatureDisplay
@@ -67,6 +115,7 @@ export default function Home() {
 	return (
 		<div>
 			<section>
+				<div className={cx(classes.blueContainer)} />
 				<div className={fr.cx('fr-container')}>
 					<div
 						className={fr.cx(
@@ -105,6 +154,9 @@ export default function Home() {
 			</section>
 			<HomeStepper />
 			{displayHomeFeature()}
+			<HomePills pills={pills} />
+			<HomeReferences references={references} />
+			<HomeActionButton />
 		</div>
 	);
 }
@@ -119,6 +171,14 @@ const useStyles = tss
 			justifyContent: 'center',
 			height: '100%'
 		},
+		blueContainer: {
+			backgroundColor: fr.colors.decisions.background.alt.blueFrance.default,
+			width: '100%',
+			height: '100%',
+			transform: 'translateY(-50%) skewY(-4deg)',
+			zIndex: -1,
+			position: 'absolute'
+		},
 		headerTitle: {
 			color: fr.colors.decisions.text.title.blueFrance.default,
 			marginBottom: '1.5rem',
diff --git a/public/assets/temoignage_1.jpeg b/public/assets/temoignage_1.jpeg
new file mode 100644
index 00000000..f06a4821
Binary files /dev/null and b/public/assets/temoignage_1.jpeg differ
diff --git a/public/assets/temoignage_2.jpeg b/public/assets/temoignage_2.jpeg
new file mode 100644
index 00000000..2e1e148c
Binary files /dev/null and b/public/assets/temoignage_2.jpeg differ