diff --git a/src/App.js b/src/App.js
index 6c62e23..9605677 100644
--- a/src/App.js
+++ b/src/App.js
@@ -17,6 +17,7 @@ function App() {
 	const location = useLocation();
 	return (
 		<AnimatePresence mode='wait'>
+			
 			<Routes location={location} key={location.pathname}>
 				<Route path='/' element={<Welcome />} />
 				<Route path='/home' element={<Home />} />
diff --git a/src/assets/css/components/GameAnswerExplanation.scss b/src/assets/css/components/GameAnswerExplanation.scss
index ceba141..0b75cdf 100644
--- a/src/assets/css/components/GameAnswerExplanation.scss
+++ b/src/assets/css/components/GameAnswerExplanation.scss
@@ -1,35 +1,36 @@
-.answer-explanation {
-	@apply p-8 flex gap-x-8;
-	&__type {
-		@apply text-white text-4xl w-fit px-6 py-1;
-		transform: skew(-2deg) rotate(-2deg);
-		&--success,
-		&--success .success-icon {
-			@apply bg-green-600;
-		}
-		&--error,
-		&--error .success-icon {
-			@apply bg-red-400;
+.answer-explanation-container {
+	.answer-explanation {
+		@apply p-8 flex gap-x-8;
+		&__type {
+			@apply text-white text-4xl w-fit px-6 py-1;
+			transform: skew(-2deg) rotate(-2deg);
+			&--success,
+			&--success .success-icon {
+				@apply bg-green-600;
+			}
+			&--error,
+			&--error .success-icon {
+				@apply bg-red-400;
+			}
+
+			.success-icon {
+				@apply w-6 h-6 object-contain object-center absolute top-0 right-0  rounded-full p-2 border-solid border-white border-4;
+				transform: translate(50%, -50%);
+			}
 		}
 
-		.success-icon {
-			@apply w-6 h-6 object-contain object-center absolute top-0 right-0  rounded-full p-2 border-solid border-white border-4;
-			transform: translate(50%, -50%);
+		&__title {
+			@apply text-5xl py-8;
 		}
-	}
 
-	&__title {
-		@apply text-5xl py-8;
-	}
-
-	&__cover {
-		@apply w-1/2;
-		img {
-			@apply h-auto object-contain object-center;
+		&__cover {
+			@apply w-1/2;
+			img {
+				@apply h-auto object-contain object-center;
+			}
 		}
 	}
 	.continue-game {
-		@apply absolute bottom-0 left-1/2;
-		translate: -50% 50%;
+		@apply mt-8;
 	}
 }
diff --git a/src/assets/css/components/ui/Modal.scss b/src/assets/css/components/ui/Modal.scss
index 09ddfca..6bbfee2 100644
--- a/src/assets/css/components/ui/Modal.scss
+++ b/src/assets/css/components/ui/Modal.scss
@@ -29,7 +29,7 @@ dialog {
 
 .modal-content-container {
 	@apply w-full
-	p-8 grid  gap-x-8;
+	p-8 px-24 grid  gap-x-8;
 	@apply pt-28 pb-16;
 
 	box-sizing: border-box;
diff --git a/src/assets/css/pages/Rating.scss b/src/assets/css/pages/Rating.scss
index 66d41b7..7d12f99 100644
--- a/src/assets/css/pages/Rating.scss
+++ b/src/assets/css/pages/Rating.scss
@@ -92,4 +92,8 @@
 	.cta--back {
 		@apply mt-3 mx-auto;
 	}
+	.cta--back[disabled] {
+		@apply bg-slate-300;
+		cursor: not-allowed;
+	}
 }
diff --git a/src/assets/css/pages/Results.scss b/src/assets/css/pages/Results.scss
index 0aa37ac..eb6fdf9 100644
--- a/src/assets/css/pages/Results.scss
+++ b/src/assets/css/pages/Results.scss
@@ -7,7 +7,7 @@
 		}
 		&__celebration-confettis-fixe {
 			@apply absolute top-0 left-0 z-10 w-full;
-
+			pointer-events: none;
 			// svg > g {
 			// 	@apply bg-purple-900 opacity-100 w-full;
 			// }
diff --git a/src/components/AnimatedPage.jsx b/src/components/AnimatedPage.jsx
index 36194d0..4df1125 100644
--- a/src/components/AnimatedPage.jsx
+++ b/src/components/AnimatedPage.jsx
@@ -4,7 +4,7 @@ import { motion } from "framer-motion";
 
 export default function AnimatedPage({ children, className }) {
 	const location = useLocation();
-	
+
 	const isNext = location.state && location.state.isNext;
 	const isPrev = location.state && location.state.isPrev;
 	const isGoingNext = location.state && location.state.isGoingNext;
@@ -39,6 +39,7 @@ export default function AnimatedPage({ children, className }) {
 			exit={animationParameters.exit}
 			transition={{ duration: 0.4, ease: "easeOut" }}>
 			{children}
+			<p>qsqsdds</p>
 		</motion.div>
 	);
 }
diff --git a/src/components/game/GameAnswerExplanation.jsx b/src/components/game/GameAnswerExplanation.jsx
index 4bf8608..23e3b4e 100644
--- a/src/components/game/GameAnswerExplanation.jsx
+++ b/src/components/game/GameAnswerExplanation.jsx
@@ -19,7 +19,7 @@ export default function GameAnwerExplanation({ questionId }) {
 		contextGameDatas.gameObjects[questionId].attrs.objectBehaviourDescription ??
 		"Pas d'explication pour cette question";
 	const objectPictureUrl = contextGameDatas.gameObjects[questionId].attrs.objectPictureUrl;
-	console.log(answer);
+	
 	return (
 		<div className='modal-content-container answer-explanation-container'>
 			<div className='modal-content-container__content'>
diff --git a/src/components/ui/LanguageSelect.jsx b/src/components/ui/LanguageSelect.jsx
index b8629b8..ea6ee0b 100644
--- a/src/components/ui/LanguageSelect.jsx
+++ b/src/components/ui/LanguageSelect.jsx
@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { useUser } from "../../hooks/useUser";
 
 export default function LanguageSelect() {
-	const { language, setLanguage, screensTranslations } = useUser();
+	const { language, changeUserLanguage, screensTranslations } = useUser();
 	const [isSubmenuOpen, setIsSubmenuOpen] = useState(false);
 
 	if (!screensTranslations || !screensTranslations.ui) return <p>loading translations…</p>;
@@ -14,7 +14,7 @@ export default function LanguageSelect() {
 
 	function chooseLanguage(lang) {
 		setIsSubmenuOpen(false);
-		setLanguage(lang);
+		changeUserLanguage(lang);
 	}
 
 	const supportedLanguages = ["FR", "EN", "ES", "PT", "DE", "DA", "FI", "PL", "CS", "SK", "MY"];
diff --git a/src/components/ui/Menu.jsx b/src/components/ui/Menu.jsx
index 3dfaaf7..dfcb623 100644
--- a/src/components/ui/Menu.jsx
+++ b/src/components/ui/Menu.jsx
@@ -2,22 +2,23 @@ import { NavLink } from "react-router-dom";
 import { useLocation } from "react-router-dom";
 import { useUser } from "../../hooks/useUser";
 import LanguageSelect from "./LanguageSelect";
-export default function Menu() {
+export default function Nav() {
 	let location = useLocation();
 	const { language, changeLanguage } = useUser();
 
 	return (
 		<nav className='main-menu'>
-			<ul className='navlist'>
+			{/* <ul className='navlist'>
 				<NavLink to='/'>Welcome</NavLink>
 				<NavLink to='/Home'>Home</NavLink>
 				<NavLink to='/select-profile'>Profile</NavLink>
 				<NavLink to='/select-country'>Country</NavLink>
 				<NavLink to='/play'>Play</NavLink>
 				<NavLink to='/results'>Results</NavLink>
-			</ul>
+			</ul> */}
 
 			<LanguageSelect />
+			<Nav />
 		</nav>
 	);
 }
diff --git a/src/context/UserContext.js b/src/context/UserContext.js
index 262904f..8fb0a5a 100644
--- a/src/context/UserContext.js
+++ b/src/context/UserContext.js
@@ -4,9 +4,17 @@ import CountriesJSON from "../data/countries/countries.json";
 export const UserContext = createContext();
 
 export function UserContextProvider({ children }) {
-	const [language, setLanguage] = useState("FR");
-	const [country, setCountry] = useState({ name: "belgique", iso: "BE", label: "Belgique" });
-	const [profile, setProfile] = useState("lhoist_employee");
+	const localLanguage = localStorage.getItem("userLanguage") || "FR";
+	const localCountry = JSON.parse(localStorage.getItem("userCountry")) || {
+		name: "belgique",
+		iso: "BE",
+		label: "Belgique",
+	};
+	const localProfile = localStorage.getItem("userProfile") || "lhoist_employee";
+
+	const [language, setLanguage] = useState(localLanguage);
+	const [country, setCountry] = useState(localCountry);
+	const [profile, setProfile] = useState(localProfile);
 	const [screensTranslations, setScreensTranslations] = useState({});
 
 	useEffect(() => {
@@ -30,27 +38,29 @@ export function UserContextProvider({ children }) {
 		setCountry({ ...country, label: currentCountry[language.toLowerCase()] });
 	}, [language]);
 
-	function changeLanguage() {
-		if (language === "FR") {
-			setLanguage("EN");
-		} else {
-			setLanguage("FR");
-		}
+	function changeUserLanguage(newLanguage) {
+		console.log(`userLanguage`, newLanguage);
+		setLanguage(newLanguage);
+		localStorage.setItem("userLanguage", newLanguage);
 	}
-
 	function changeCountry(newCountry) {
+		console.log(`newCountry`, newCountry);
+
 		setCountry(newCountry);
+		localStorage.setItem("userCountry", JSON.stringify(newCountry));
 	}
 
 	function changeProfile(newProfile) {
 		setProfile(newProfile);
+		localStorage.setItem("userProfile", newProfile);
 	}
 	return (
 		<UserContext.Provider
 			value={{
 				language,
 				screensTranslations,
-				changeLanguage,
+				changeUserLanguage,
+				// changeLanguage,
 				country,
 				setLanguage,
 				changeCountry,
diff --git a/src/pages/Rating.jsx b/src/pages/Rating.jsx
index a586374..4255658 100644
--- a/src/pages/Rating.jsx
+++ b/src/pages/Rating.jsx
@@ -1,69 +1,124 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import AnimatedPage from "../components/AnimatedPage";
 import { Link, useNavigate } from "react-router-dom";
-
+import { postRatingData } from "../services/WordpressFetchData";
 export default function Rate() {
+	const [rating, setRating] = useState(undefined);
+
+	useEffect(() => {
+		return () => {
+			setRating(undefined);
+		};
+	}, []);
+
 	const navigate = useNavigate();
 
-	function returnHome() {
-		navigate("/Home");
+	function handleRatingChange(event) {
+		// setRating({ ...rating, note: event.target.value });
+		setRating({ ...rating, note: 2 });
 	}
 
+	function handleCommentChange(event) {
+		setRating({ ...rating, comment: event.target.value });
+	}
+
+	function handleSubmit() {
+		postRatingData(rating);
+		navigate("/Home");
+	}
+	
 	return (
 		<AnimatedPage className='page-container page-container--rating'>
 			<div className='screen '>
 				<div className='screen__content'>
 					<h1 className='titling-construction '>Notes</h1>
 					<h2>merci pour votre participation</h2>
-					<div class='rating'>
-						<div class='rating__items'>
-							<input type='radio' name='stars' id='st5' />
-							<label for='st5'>
-								<div class='star-fill'></div>
+					<div className='rating'>
+						<div className='rating__items'>
+							<input
+								type='radio'
+								name='stars'
+								id='st5'
+								value='5'
+								onChange={handleRatingChange}
+							/>
+							<label htmlFor='st5'>
+								<div className='star-fill'></div>
 
 								<div
-									class='label-description'
+									className='label-description'
 									data-content='Excellent'></div>
 							</label>
-							<input type='radio' name='stars' id='st4' />
-							<label for='st4'>
-								<div class='star-fill'></div>
+							<input
+								type='radio'
+								name='stars'
+								id='st4'
+								value='4'
+								onChange={handleRatingChange}
+							/>
+							<label htmlFor='st4'>
+								<div className='star-fill'></div>
 
 								<div
-									class='label-description'
+									className='label-description'
 									data-content='Good'></div>
 							</label>
-							<input type='radio' name='stars' id='st3' />
-							<label for='st3'>
-								<div class='star-fill'></div>
+							<input
+								type='radio'
+								name='stars'
+								id='st3'
+								value='3'
+								onChange={handleRatingChange}
+							/>
+							<label htmlFor='st3'>
+								<div className='star-fill'></div>
 
-								<div class='label-description' data-content='OK'></div>
-							</label>
-							<input type='radio' name='stars' id='st2' />
-							<label for='st2'>
-								<div class='star-fill'></div>
-
-								<div class='label-description' data-content='Bad'></div>
-							</label>
-							<input type='radio' name='stars' id='st1' />
-							<label for='st1'>
-								<div class='star-fill'></div>
 								<div
-									class='label-description'
+									className='label-description'
+									data-content='OK'></div>
+							</label>
+							<input
+								type='radio'
+								name='stars'
+								id='st2'
+								value='2'
+								onChange={handleRatingChange}
+							/>
+							<label htmlFor='st2'>
+								<div className='star-fill'></div>
+
+								<div
+									className='label-description'
+									data-content='Bad'></div>
+							</label>
+							<input
+								type='radio'
+								name='stars'
+								id='st1'
+								value='1'
+								onChange={handleRatingChange}
+							/>
+							<label htmlFor='st1'>
+								<div className='star-fill'></div>
+								<div
+									className='label-description'
 									data-content='Terrible'></div>
 							</label>
 						</div>
 					</div>
 
 					<textarea
+						onChange={handleCommentChange}
 						placeholder="Qu'avez-vous pensé de cette expérience ?"
 						name=''
 						id=''
 						cols='10'
 						rows='2'></textarea>
 					<button
+						disabled={!rating}
+						title={!rating ? "Attribuer une note!" : "Retour à l'acceuil!"}
 						className='cta cta--construction cta--round cta--button-icon cta--back'
-						onClick={returnHome}></button>
+						onClick={handleSubmit}></button>
 				</div>
 			</div>
 		</AnimatedPage>
diff --git a/src/pages/Test.jsx b/src/pages/Test.jsx
index 9fb7ac4..06c96d6 100644
--- a/src/pages/Test.jsx
+++ b/src/pages/Test.jsx
@@ -1,11 +1,15 @@
 import Menu from "../components/ui/Menu";
-import { postGameStatisticsData } from "../services/WordpressFetchData";
+import { postGameStatisticsData, postRatingData } from "../services/WordpressFetchData";
 import { useLanguage } from "../hooks/useLanguage";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
+import axios from "axios";
+
 export default function Test() {
 	const { language } = useLanguage();
 
-	function testPost() {
+	const [randomData, setRandomData] = useState({});
+
+	function postRandomDatas() {
 		const requestDataExample = {
 			user_locale: "DE",
 			user_country: "France",
@@ -16,12 +20,23 @@ export default function Test() {
 		postGameStatisticsData(requestDataExample);
 	}
 
+	function postRandomRating() {
+		const requestDataExample = {
+			user_locale: "DE",
+			user_country: "France",
+			rating: 5,
+		};
+		postRatingData(requestDataExample);
+	}
+
+	console.log(randomData);
 	return (
 		<div className='page-container page-container--test'>
 			<div className='screen screen--test'>
 				<Menu />
+				<button onClick={postRandomRating}> Post Random Rating</button>
 				<div id='screen-container'>
-					<button onClick={testPost}>TEEEESt</button>
+					<button onClick={postRandomDatas}>Post Random Datas</button>
 				</div>
 			</div>
 		</div>
diff --git a/src/services/WordpressFetchData.js b/src/services/WordpressFetchData.js
index c6b0df1..eb00285 100644
--- a/src/services/WordpressFetchData.js
+++ b/src/services/WordpressFetchData.js
@@ -2,52 +2,46 @@ import { useEffect, useState } from "react";
 import axios from "axios";
 import { useUser } from "../hooks/useUser";
 
-const BASE_URL = "https://staysafe.deligraph.info/wp-json/wp/v2";
-const BASE_CUSTOM_URL = "https://staysafe.deligraph.info/wp-json/lhoist-datas";
-// const WORDPRESS_API_TOKEN = process.env.REACT_APP_WORDPRESS_API_TOKEN;
+const BASE_URL = process.env.REACT_APP_BASE_URL;
+const BASE_CUSTOM_URL = process.env.REACT_APP_BASE_CUSTOM_URL;
 
-// const UMAMI_API_TOKEN = process.env.REACT_APP_UMAMI_API_TOKEN;
-// const UMAMI_WEBSITE_ID = process.env.REACT_APP_UMAMI_WEBSITE_ID;
-// const UMAMI_API_BASE_ENDPOINT = process.env.REACT_APP_UMAMI_API_BASE_ENDPOINT;
+const fetchWordpressData = async (url) => {
+	try {
+		const response = await axios.get(url);
 
-// const umamiBaseEndpoint = process.env.REACT_APP_UMAMI_API_BASE_ENDPOINT;
+		return response.data;
+	} catch (error) {
+		console.error(error);
+	}
+};
 
-function useWordpressCustomData(url) {
+const useWordpressCustomData = (url) => {
 	const [data, setData] = useState();
-	const { language, country } = useUser();
+	const { language } = useUser();
 
 	const fullUrl = `${BASE_CUSTOM_URL}${url}?current-language=${language}`;
 
 	useEffect(() => {
-		const dataFetch = async () => {
-			const data = await (await fetch(fullUrl)).json();
-
+		fetchWordpressData(fullUrl).then((data) => {
 			setData(data);
-		};
-
-		dataFetch();
+		});
 	}, [language, fullUrl]);
-
 	return data;
-}
+};
 
-function useWordpressData(url) {
+const useWordpressData = (url) => {
 	const [data, setData] = useState();
 
 	useEffect(() => {
-		const dataFetch = async () => {
-			const data = await (await fetch(BASE_URL + url)).json();
-
+		fetchWordpressData(url).then((data) => {
 			setData(data);
-		};
-
-		dataFetch();
+		});
 	}, [url]);
 
 	return data;
-}
+};
 
-async function postGameStatisticsData(requestDatas) {
+const postGameStatisticsData = async (requestDatas) => {
 	const options = {
 		method: "POST",
 		url: BASE_CUSTOM_URL + "/statistics/post",
@@ -61,88 +55,22 @@ async function postGameStatisticsData(requestDatas) {
 		.catch((error) => {
 			console.error(error);
 		});
-}
-
-// function useUmamiDatas() {
-// 	const umamiUrl = "https://umami.deligraph.be/api/websites";
-// 	const bearerToken =
-// 		"Ii96P0XNdBE0gD0l8lX5Qf3+Lt7T0RsEoWUjf8qNaifyPbhi/PXmGygkIHuGbMm6bJ9iHPe9pIzfBJeFvG+ehlQSd4MWuWr3xKEmxtcwDMOlN4aDo3rlSf9phB02sjx0QcBhngfl0p9g/nI30d1XTWvHspw5BCNT7+NRzb5gDa24tbbSS/a/wL9+TN+mCjCUsaMOt9o/t0D3kNtE6qSgK4gAFijbDBXsgjbiPwb3HemrEb19JfY9gtMMpwBVE2KKst0j6kyKUWWDeJiBz3LQHO+FSthwG9tQCovVFgHNzLh+L+6fcmUkEpDC3nA62UCPmVAy3zJgjFWgtVZdXaSeFm7mLF1/Wsqk3g==";
-
-// 	const [data, setData] = useState();
-
-// 	useEffect(() => {
-// 		const dataFetch = async () => {
-// 			const data = await (
-// 				await fetch(umamiUrl, {
-// 					method: "GET",
-// 					headers: {
-// 						"Content-Type": "application/json",
-// 						Authorization: `Bearer ${bearerToken}`,
-// 					},
-// 				})
-// 			).json();
-
-// 			setData(data);
-// 		};
-
-// 		dataFetch();
-// 	}, []);
-// 	return data;
-// }
-
-// function useUmamiUpdateDatas() {
-// 	const [result, setResult] = useState(null); // État local pour stocker le résultat
-
-// 	const eventName = "event-name-de-test";
-
-// 	const UMAMI_SEND_URL = UMAMI_API_BASE_ENDPOINT + "/send";
-
-// 	const dataPayload = {
-// 		payload: {
-// 			hostname: window.location.hostname,
-// 			language: navigator.language,
-// 			referrer: document.referrer,
-// 			screen: `${window.screen.width}x${window.screen.height}`,
-// 			title: document.title,
-// 			url: window.location.pathname,
-// 			website: UMAMI_WEBSITE_ID,
-// 			name: "puzzle-1-complete",
-// 			data: {
-// 				lang: "fr",
-// 				country: "France",
-// 				level_post_id: 154,
-// 				level_is_completed: 0,
-// 				level_completion_time: 20000,
-// 				level_score: 12,
-// 			},
-// 		},
-// 		type: "event",
-// 	};
-// 	useEffect(() => {
-// 		const dataFetch = async () => {
-// 			try {
-// 				await axios.post(UMAMI_SEND_URL, dataPayload, {
-// 					headers: {
-// 						"User-Agent": navigator.userAgent,
-// 					},
-// 				});
-// 				setResult(`Event '${eventName}' sent successfully to Umami.`);
-// 				console.log(`Event '${eventName}' sent successfully to Umami.`);
-// 			} catch (error) {
-// 				setResult("Error sending Umami event:");
-// 				console.error("Error sending Umami event:", error);
-// 			}
-// 		};
-
-// 		dataFetch();
-// 	}, []);
-// 	return result;
-// }
-
-export {
-	useWordpressData,
-	useWordpressCustomData,
-	postGameStatisticsData,
-	// useUmamiDatas,
-	// useUmamiUpdateDatas,
 };
+
+const postRatingData = async (requestDatas) => {
+	const options = {
+		method: "POST",
+		url: BASE_CUSTOM_URL + "/rating/post",
+		data: requestDatas,
+	};
+
+	axios.request(options)
+		.then((response) => {
+			console.log(response.data);
+		})
+		.catch((error) => {
+			console.error(error);
+		});
+};
+
+export { useWordpressData, useWordpressCustomData, postGameStatisticsData, postRatingData };