diff --git a/containers/react/src/components/Profile/EditName.tsx b/containers/react/src/components/Profile/EditName.tsx
index c3f058f0..da364971 100644
--- a/containers/react/src/components/Profile/EditName.tsx
+++ b/containers/react/src/components/Profile/EditName.tsx
@@ -1,8 +1,8 @@
-import {motion} from "framer-motion"
+import { AnimatePresence, motion } from "framer-motion"
 // import Backdrop from "../Sidebar/Backdrop"
-import {Link} from 'react-router-dom';
+import { Link } from 'react-router-dom';
 // import { UserProfile } from "../../DataBase/DataUserProfile";
-import {useState} from 'react';
+import { useState } from 'react';
 import "../../styles/Profile.css"
 
 import api from '../../script/axiosApi.tsx';
@@ -22,61 +22,60 @@ const dropIn = {
 }
 
 // const changeName = ({handleclose, name}) => {
-	// 	return (
-		// 		UserProfile.UserName = name
+// 	return (
+// 		UserProfile.UserName = name
 // 	)
 // }
 
-const ModalEdit = ( handleClose ) => {
+const ModalEdit = (handleClose) => {
 	// let new_name = "";
 	const [nickname, setNickname] = useState("");
-	const [closeModal, setModalClose] = useState(false);
-	const [err, setErr] = useState(false);
-	const close = () => setErr(false);
-	
-	const handler = e =>
-	{
+	const [errTaken, setErrTaken] = useState(false);
+	const closeTaken = () => setErrTaken(false);
+	const [errTooShort, setErrTooShort] = useState(false);
+	const closeTooShort = () => setErrTooShort(false);
+
+	const handler = e => {
 		setNickname(e.target.value);
 		console.log("testeeeee")
-		const postNickname = async ()=>{
-			try{
-				await api.post("/nickname", {nickname: nickname})
-				// setUser(tmpUser.data);
-				// setIsLoading(false)
-			}
-			catch(err){
-				console.log(err);
-			}
+		const postNickname = async () => {
+			// try{
+			// 	await api.post("/nickname", {nickname: nickname})
+			// 	// setUser(tmpUser.data);
+			// 	// setIsLoading(false)
+			// }
+			// catch(err){
+			// 	console.log(err);
+			// }
 		};
 		postNickname();
 	}
-	
-	const handlePostNickname = async () => 
-	{
-		console.log("nickname=" ,nickname)
-		try{
-			const ret = await api.post("/nickname", {nickname: nickname});
+
+	const handlePostNickname = async () => {
+		console.log("nickname=", nickname)
+		try {
+			const ret = await api.post("/nickname", { nickname: nickname });
 			// console.log("cest ici = ",ret);
 			// if (!ret)
-			console.log("test ret =",ret.data);
-			if(ret.data)
-			{
-				console.log ("ici error = ", ret.data);
-				// window.location.reload();
+			console.log("test ret =", ret.data);
+			if (nickname.length < 3) {
+				setErrTooShort(true);
 			}
-			else if (!ret.data)
-			{
-				console.log ("nickname already set = ", ret.data);
+			else if (ret.data) {
+				console.log("ici error = ", ret.data);
+				window.location.reload();
+			}
+			else {
+				console.log("nickname already set = ", ret.data);
 
-				setErr(true);
-				setModalClose(true);
+				setErrTaken(true);
 			}
-			
-			
+
+
 			// setUser(tmpUser.data);
 			// setIsLoading(false)
 		}
-		catch(err){
+		catch (err) {
 			console.log(err);
 		}
 	}
@@ -86,29 +85,35 @@ const ModalEdit = ( handleClose ) => {
 	// 	//do nothing
 	// }
 	return (
-			<motion.div 
-						className="modal"
-						variants={dropIn}
-						initial="hidden"
-						animate="visible"
-						exit="exit">
-				<h2>Type your new name</h2>
-				<input className="text" minLength={2} maxLength={10} type="text" value={nickname} onChange={handler}/>
-				<div>
-					<div className="button" onClick={handlePostNickname}> 
-						change
-						{/* <Link className="button" to={""}>change</Link> */}
-					</div>
+		<motion.div
+			className="modal"
+			variants={dropIn}
+			initial="hidden"
+			animate="visible"
+			exit="exit">
+			<h2>Type your new name</h2>
+			<input className="text" minLength={2} maxLength={10} type="text" value={nickname} onChange={handler} />
+			<div>
+				<div className="button" onClick={handlePostNickname}>
+					change
+					{/* <Link className="button" to={""}>change</Link> */}
+				</div>
+				<AnimatePresence initial={false} onExitComplete={() => null}>
 				{
-					err ? (
-						<RedAlert handleClose={close} text="Nickname already taken"/>
+					errTaken ? (
+						<RedAlert handleClose={closeTaken} text="Error: Nickname already taken" />
 					) : ("")
 				}
-				</div>
-			</motion.div>
-			
-			
-			)
-		}
-		
-		export default ModalEdit
\ No newline at end of file
+				{
+					errTooShort ? (
+						<RedAlert handleClose={closeTooShort} text="Error: Nickname it too short" />
+					) : ("")
+				}
+
+				</AnimatePresence>
+			</div>
+		</motion.div>
+	)
+}
+
+export default ModalEdit
\ No newline at end of file
diff --git a/containers/react/src/pages/Home.tsx b/containers/react/src/pages/Home.tsx
index 2e2dba72..cd381f6e 100644
--- a/containers/react/src/pages/Home.tsx
+++ b/containers/react/src/pages/Home.tsx
@@ -6,7 +6,7 @@
 /*   By: sadjigui <sadjigui@student.42.fr>          +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2023/06/09 08:19:04 by apommier          #+#    #+#             */
-/*   Updated: 2023/06/23 22:46:23 by sadjigui         ###   ########.fr       */
+/*   Updated: 2023/06/24 14:31:22 by sadjigui         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -20,7 +20,7 @@ import { motion, AnimatePresence } from 'framer-motion'
 // import { GrClose } from 'react-icons/gr'
 import { Link } from "react-router-dom";
 import ModalEdit from "../components/Profile/EditName.tsx";
-import {AiOutlineHistory} from 'react-icons/ai'
+import {AiOutlineCloseCircle, AiOutlineHistory} from 'react-icons/ai'
 import { MdQrCodeScanner, MdOutlinePhotoLibrary } from 'react-icons/md';
 import { GiWingedSword, GiCrownedSkull } from 'react-icons/gi';
 
@@ -274,7 +274,7 @@ function Home () {
 				className="div_history"
 			// className="history"
 				onClick={ () => setmove(!move)}>
-					<Link to="#" className="history"><AiOutlineHistory/>  Match History</Link>
+					<Link to="#" className="history"> {move ? (<AiOutlineCloseCircle/>):(<AiOutlineHistory/>)}  Match History</Link>
 			</motion.div>
 			<AnimatePresence initial={false} onExitComplete={() => null}>
           		{successQr ? (
diff --git a/containers/react/src/styles/Game.css b/containers/react/src/styles/Game.css
index 28cc1795..94adce85 100644
--- a/containers/react/src/styles/Game.css
+++ b/containers/react/src/styles/Game.css
@@ -3,6 +3,7 @@
 	margin: 50px;
 }
 
+
 .rank_elements {
 	border-width:1px;
 	border-style:solid;
@@ -25,4 +26,14 @@
 	height: 30px;
 	width: 30px;
 	border-radius: 50%;
-}
\ No newline at end of file
+}
+
+@media screen and (max-width: 755px){
+	.game{
+		display: grid;
+		height: 20vh;
+	}
+	.scroll{
+		height: 20vh;
+	}
+  }
\ No newline at end of file
diff --git a/containers/react/src/styles/field.css b/containers/react/src/styles/field.css
index bb3ad554..828dddc0 100644
--- a/containers/react/src/styles/field.css
+++ b/containers/react/src/styles/field.css
@@ -11,6 +11,10 @@
 	font-size: 300%;
   }
 
+  .inside_checkbox{
+	height : 70%;
+	width:  70%;
+  }
   
   .field {
 	background-color: rgb(249, 249, 249);
@@ -65,6 +69,18 @@
   }
 }
 
+.responsive{
+	display: flex;
+	flex-direction: column;
+}
+
+/* @media screen and (max-width: 350px){
+	.responsive{
+		display:list-item;
+		flex-direction: column;
+	}
+  } */
+
 #myCanvas {
 	background-color: rgb(124, 47, 47);
 	/* position: absolute; */