diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 7cf69c3..841e7d0 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -1,40 +1,50 @@
-import Nav from "../components/ui/Nav";
-import { useWordpressCustomData } from "../services/WordpressFetchData";
-import coverWorker from "../assets/img/cover_worker.svg";
-import screenWorker1 from "../assets/img/screen_worker_1.svg";
-import screenWorker2 from "../assets/img/screen_worker_2.svg";
+import Lottie from "lottie-react";
+import { useUser } from "../hooks/useUser";
 import { Link } from "react-router-dom";
 
+import Nav from "../components/ui/Nav";
+import coverWorker from "../assets/img/illustrations/cover_worker.svg";
+import screenWorker1 from "../assets/img/illustrations/screen_worker_1.svg";
+import screenWorker2 from "../assets/img/illustrations/screen_worker_2.svg";
 import AnimatedPage from "../components/AnimatedPage";
-// import screensTranslations from "../data/screensTranslations.json";
-import { useUser } from "../hooks/useUser";
-import { useEffect } from "react";
+import cloudPageTransition from "../assets/animations/transition-nuages-pages";
 
 export default function Home() {
-	const { language, screensTranslations } = useUser();
+	const { screensTranslations } = useUser();
 
 	if (!screensTranslations || !screensTranslations.home) return <p>loading</p>;
 	const currentScreenTranslations = screensTranslations.home;
 
 	return (
-		<AnimatedPage className='page-container page-container--home'>
-			<div className='screen screen--home'>
-				<Nav />
-				<section className='screen__content'>
-					<img className='cover_worker' src={coverWorker} alt='' />
-					<h1 className='application_title'>stay safe</h1>
-					<h2 className='application_subtitle'>interactive</h2>
-					<p className='application_description'>
-						{currentScreenTranslations.app_description}
-					</p>
-					<Link
-						to='/select-profile'
-						className='cta cta--construction cta--round cta--button-icon cta--play  '
-					/>
-				</section>
-				<img className='screen_worker_1' src={screenWorker1} alt='' />
-				<img className='screen_worker_2' src={screenWorker2} alt='' />
-			</div>
-		</AnimatedPage>
+		<>
+			<Lottie
+				// lottieRef={playerRef}
+				className='test-load-animation'
+				animationData={cloudPageTransition}
+				speed={21}
+				loop={false}
+				autoplay
+			/>
+
+			<AnimatedPage className='page-container page-container--home'>
+				<div className='screen screen--home'>
+					<Nav />
+					<section className='screen__content'>
+						<img className='cover_worker' src={coverWorker} alt='' />
+						<h1 className='application_title'>stay safe</h1>
+						<h2 className='application_subtitle'>interactive</h2>
+						<p className='application_description'>
+							{currentScreenTranslations.app_description}
+						</p>
+						<Link
+							to='/select-profile'
+							className='cta cta--construction cta--round cta--button-icon cta--play  '
+						/>
+					</section>
+					<img className='screen_worker_1' src={screenWorker1} alt='' />
+					<img className='screen_worker_2' src={screenWorker2} alt='' />
+				</div>
+			</AnimatedPage>
+		</>
 	);
 }