diff --git a/src/assets/css/components/animation/Clouds.scss b/src/assets/css/components/animation/Clouds.scss
new file mode 100644
index 0000000..460755f
--- /dev/null
+++ b/src/assets/css/components/animation/Clouds.scss
@@ -0,0 +1,13 @@
+.cloud-animation {
+	@apply w-full h-full fixed top-0 left-0;
+	z-index: 90;
+	position: fixed;
+	z-index: 40;
+	pointer-events: none;
+	scale: 1.1;
+	filter: blur(2px);
+	svg {
+		width: 100px;
+		heigth: 100px;
+	}
+}
diff --git a/src/components/animations/Clouds.jsx b/src/components/animations/Clouds.jsx
new file mode 100644
index 0000000..5547f7f
--- /dev/null
+++ b/src/components/animations/Clouds.jsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+import cloudPageTransition from "../../assets/animations/transition-nuages-pages";
+import Lottie from "lottie-react";
+
+export default function Clouds() {
+	return (
+		<Lottie
+			className='cloud-animation'
+			animationData={cloudPageTransition}
+			speed={21}
+			loop={false}
+			autoplay
+		/>
+	);
+}