diff --git a/site/source/components/layout/Footer/Footer.tsx b/site/source/components/layout/Footer/Footer.tsx
index ee891a487..9e24643cd 100644
--- a/site/source/components/layout/Footer/Footer.tsx
+++ b/site/source/components/layout/Footer/Footer.tsx
@@ -53,7 +53,11 @@ export default function Footer() {
 			/>
 			<footer>
 				<Container
-					backgroundColor={(theme) => theme.colors.bases.tertiary[100]}
+					backgroundColor={(theme) =>
+						theme.darkMode
+							? theme.colors.extended.dark[600]
+							: theme.colors.bases.tertiary[100]
+					}
 				>
 					{showFeedback && <PageFeedback />}
 					{language === 'en' && (
diff --git a/site/source/design-system/card/Card.tsx b/site/source/design-system/card/Card.tsx
index fbc42c093..5709cd91b 100644
--- a/site/source/design-system/card/Card.tsx
+++ b/site/source/design-system/card/Card.tsx
@@ -50,33 +50,31 @@ export function Card({
 	delete buttonOrLinkProps.title
 
 	return (
-		<ThemeProvider theme={(theme) => ({ ...theme, darkMode: false })}>
-			<CardContainer $compact={compact} {...buttonOrLinkProps} tabIndex={0}>
-				{icon && <IconContainer>{icon}</IconContainer>}
-				{title &&
-					(compact ? (
-						<CompactStyledHeader {...titleProps} />
-					) : (
-						<StyledHeader {...titleProps} />
-					))}
-				<div
-					css={`
-						flex: 1;
-						text-align: center;
-						width: 100%;
-					`}
-				>
-					<Body as={bodyAs}>{children}</Body>
-				</div>
-				{ctaLabel && (
-					// The button is not selectable with keyboard navigation because the whole card already is
-					<CardButton tabIndex={-1} $size="XS" $light $color="primary" as="div">
-						{ctaLabel}
-						{linkProps.external && <NewWindowLinkIcon />}
-					</CardButton>
-				)}
-			</CardContainer>
-		</ThemeProvider>
+		<CardContainer $compact={compact} {...buttonOrLinkProps} tabIndex={0}>
+			{icon && <IconContainer>{icon}</IconContainer>}
+			{title &&
+				(compact ? (
+					<CompactStyledHeader {...titleProps} />
+				) : (
+					<StyledHeader {...titleProps} />
+				))}
+			<div
+				css={`
+					flex: 1;
+					text-align: center;
+					width: 100%;
+				`}
+			>
+				<Body as={bodyAs}>{children}</Body>
+			</div>
+			{ctaLabel && (
+				// The button is not selectable with keyboard navigation because the whole card already is
+				<CardButton tabIndex={-1} $size="XS" $light $color="primary" as="div">
+					{ctaLabel}
+					{linkProps.external && <NewWindowLinkIcon />}
+				</CardButton>
+			)}
+		</CardContainer>
 	)
 }
 
@@ -128,12 +126,18 @@ export const CardContainer = styled.div<{ $compact?: boolean }>`
 	cursor: pointer;
 	flex-direction: column;
 	align-items: center;
-	background-color: ${({ theme }) => theme.colors.extended.grey[100]};
+	background-color: ${({ theme }) =>
+		theme.darkMode
+			? theme.colors.extended.dark[600]
+			: theme.colors.extended.grey[100]};
 	border-radius: ${({ theme }) => theme.box.borderRadius};
 	box-shadow: ${({ theme }) => theme.elevations[2]};
 	&:hover {
 		box-shadow: ${({ theme }) => theme.elevations[3]};
-		background-color: ${({ theme }) => theme.colors.bases.primary[100]};
+		background-color: ${({ theme }) =>
+			theme.darkMode
+				? theme.colors.extended.dark[500]
+				: theme.colors.bases.primary[100]};
 	}
 	&:focus,
 	&:focus-visible {
diff --git a/site/source/pages/Landing/Landing.tsx b/site/source/pages/Landing/Landing.tsx
index 6f42dd8b5..b0b812f05 100644
--- a/site/source/pages/Landing/Landing.tsx
+++ b/site/source/pages/Landing/Landing.tsx
@@ -101,7 +101,14 @@ export default function Landing() {
 					</Grid>
 					<Spacing xl />
 				</Container>
-				<Container backgroundColor={(theme) => theme.colors.bases.primary[100]}>
+				<Container
+					backgroundColor={(theme) =>
+						theme.darkMode
+							? theme.colors.extended.dark[700]
+							: theme.colors.bases.primary[100]
+					}
+				>
+					{' '}
 					<Spacing lg />
 					<Grid
 						container
diff --git a/site/source/pages/gerer/declaration-revenu-independants/cotisations.tsx b/site/source/pages/gerer/declaration-revenu-independants/cotisations.tsx
index acae95c3b..f492ceba2 100644
--- a/site/source/pages/gerer/declaration-revenu-independants/cotisations.tsx
+++ b/site/source/pages/gerer/declaration-revenu-independants/cotisations.tsx
@@ -144,7 +144,11 @@ export default function Cotisations() {
 				</Container>
 
 				<Container
-					backgroundColor={(theme) => theme.colors.bases.tertiary[100]}
+					backgroundColor={(theme) =>
+						theme.darkMode
+							? theme.colors.extended.dark[600]
+							: theme.colors.bases.tertiary[100]
+					}
 				>
 					<PageFeedback customMessage="Qu'avez-vous pensé de cet assistant ?" />
 				</Container>
