diff --git a/public/images/showcases/devfestNantes/2024/background-filler-paysage.png b/public/images/showcases/devfestNantes/2024/background-filler-paysage.png
new file mode 100644
index 0000000000..08b3512624
Binary files /dev/null and b/public/images/showcases/devfestNantes/2024/background-filler-paysage.png differ
diff --git a/public/images/showcases/devfestNantes/2024/background-filler-totem.png b/public/images/showcases/devfestNantes/2024/background-filler-totem.png
new file mode 100644
index 0000000000..33192c163a
Binary files /dev/null and b/public/images/showcases/devfestNantes/2024/background-filler-totem.png differ
diff --git a/public/images/showcases/devfestNantes/2024/background-speaker.png b/public/images/showcases/devfestNantes/2024/background-speaker.png
deleted file mode 100644
index 0ad39d4e27..0000000000
Binary files a/public/images/showcases/devfestNantes/2024/background-speaker.png and /dev/null differ
diff --git a/remotion/compositions/showcases/devfestNantes/2024/DevfestNantes2024.tsx b/remotion/compositions/showcases/devfestNantes/2024/DevfestNantes2024.tsx
index de0828cbfe..e33e80a5b3 100644
--- a/remotion/compositions/showcases/devfestNantes/2024/DevfestNantes2024.tsx
+++ b/remotion/compositions/showcases/devfestNantes/2024/DevfestNantes2024.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import {loadFont} from '@remotion/google-fonts/CrimsonText';
-import {AbsoluteFill, Sequence} from 'remotion';
+import {AbsoluteFill, Sequence, staticFile} from 'remotion';
 import {z} from 'zod';
 
+import {BackgroundFiller} from '../../../../design/atoms/BackgroundFiller';
 import {ShowcaseDevfestNantes2024Schema} from '../types/types';
 
 import {Details} from './Details';
@@ -25,14 +26,21 @@ export const DevfestNantes2024 = ({
 	return (
 		<AbsoluteFill
 			style={{
-				backgroundColor: '#e4595c',
 				overflow: 'hidden',
 				fontFamily,
 				textTransform: 'uppercase',
-				boxShadow:
-					'inset 0 0px 200px rgba(0, 0, 0, 0.9), inset 0 -2px 4px rgba(0, 0, 0, 0.5)',
 			}}
 		>
+			<Sequence>
+				<BackgroundFiller
+					imageUrl={staticFile(
+						'/images/showcases/devfestNantes/2024/background-filler-paysage.png',
+					)}
+					style={{
+						transform: 'scale(1)',
+					}}
+				/>
+			</Sequence>
 			<Sequence from={30}>
 				<GhostBackground />
 			</Sequence>
diff --git a/remotion/compositions/showcases/devfestNantes/2024/DevfestNantes2024Phrase.tsx b/remotion/compositions/showcases/devfestNantes/2024/DevfestNantes2024Phrase.tsx
index 04f8e00fe4..6fa619dff6 100644
--- a/remotion/compositions/showcases/devfestNantes/2024/DevfestNantes2024Phrase.tsx
+++ b/remotion/compositions/showcases/devfestNantes/2024/DevfestNantes2024Phrase.tsx
@@ -5,10 +5,12 @@ import {
 	Easing,
 	interpolate,
 	Sequence,
+	staticFile,
 	useCurrentFrame,
 } from 'remotion';
 import {z} from 'zod';
 
+import {BackgroundFiller} from '../../../../design/atoms/BackgroundFiller';
 import {ShowcaseDevfestNantes2024Schema} from '../types/types';
 
 import {GhostBackground} from './GhostBackground';
@@ -35,14 +37,21 @@ export const DevfestNantesPhrase2024 = ({
 	return (
 		<AbsoluteFill
 			style={{
-				backgroundColor: '#e4595c',
 				overflow: 'hidden',
 				fontFamily,
 				textTransform: 'uppercase',
-				boxShadow:
-					'inset 0 0px 200px rgba(0, 0, 0, 0.9), inset 0 -2px 4px rgba(0, 0, 0, 0.5)',
 			}}
 		>
+			<Sequence>
+				<BackgroundFiller
+					imageUrl={staticFile(
+						'/images/showcases/devfestNantes/2024/background-filler-paysage.png',
+					)}
+					style={{
+						transform: 'scale(1)',
+					}}
+				/>
+			</Sequence>
 			<Sequence from={30}>
 				<GhostBackground />
 			</Sequence>
diff --git a/remotion/compositions/showcases/devfestNantes/2024/DevfestNantesLoop2024.tsx b/remotion/compositions/showcases/devfestNantes/2024/DevfestNantesLoop2024.tsx
index 04654ede66..576242bd43 100644
--- a/remotion/compositions/showcases/devfestNantes/2024/DevfestNantesLoop2024.tsx
+++ b/remotion/compositions/showcases/devfestNantes/2024/DevfestNantesLoop2024.tsx
@@ -5,10 +5,12 @@ import {
 	Easing,
 	interpolate,
 	Sequence,
+	staticFile,
 	useCurrentFrame,
 } from 'remotion';
 import {z} from 'zod';
 
+import {BackgroundFiller} from '../../../../design/atoms/BackgroundFiller';
 import {ShowcaseDevfestNantes2024Schema} from '../types/types';
 
 import {Details} from './Details';
@@ -39,14 +41,21 @@ export const DevfestNantesLoop2024 = ({
 	return (
 		<AbsoluteFill
 			style={{
-				backgroundColor: '#e4595c',
 				overflow: 'hidden',
 				fontFamily,
 				textTransform: 'uppercase',
-				boxShadow:
-					'inset 0 0px 200px rgba(0, 0, 0, 0.9), inset 0 -2px 4px rgba(0, 0, 0, 0.5)',
 			}}
 		>
+			<Sequence>
+				<BackgroundFiller
+					imageUrl={staticFile(
+						'/images/showcases/devfestNantes/2024/background-filler-paysage.png',
+					)}
+					style={{
+						transform: 'scale(1)',
+					}}
+				/>
+			</Sequence>
 			<Sequence from={30}>
 				<GhostBackground />
 			</Sequence>
diff --git a/remotion/compositions/showcases/devfestNantes/2024/DevfestNantesLoopTotem2024.tsx b/remotion/compositions/showcases/devfestNantes/2024/DevfestNantesLoopTotem2024.tsx
index 0c193d9622..21d613da6d 100644
--- a/remotion/compositions/showcases/devfestNantes/2024/DevfestNantesLoopTotem2024.tsx
+++ b/remotion/compositions/showcases/devfestNantes/2024/DevfestNantesLoopTotem2024.tsx
@@ -5,10 +5,12 @@ import {
 	Easing,
 	interpolate,
 	Sequence,
+	staticFile,
 	useCurrentFrame,
 } from 'remotion';
 import {z} from 'zod';
 
+import {BackgroundFiller} from '../../../../design/atoms/BackgroundFiller';
 import {ShowcaseDevfestNantes2024Schema} from '../types/types';
 
 import {Details} from './Details';
@@ -40,14 +42,21 @@ export const DevfestNantesLoopTotem2024 = ({
 	return (
 		<AbsoluteFill
 			style={{
-				backgroundColor: '#e4595c',
 				overflow: 'hidden',
 				fontFamily,
 				textTransform: 'uppercase',
-				boxShadow:
-					'inset 0 0px 200px rgba(0, 0, 0, 0.9), inset 0 -2px 4px rgba(0, 0, 0, 0.5)',
 			}}
 		>
+			<Sequence>
+				<BackgroundFiller
+					imageUrl={staticFile(
+						'/images/showcases/devfestNantes/2024/background-filler-totem.png',
+					)}
+					style={{
+						transform: 'scale(1)',
+					}}
+				/>
+			</Sequence>
 			<Sequence>
 				<Logo isTotemDisplayMode />
 			</Sequence>