diff --git a/cryptide_project/src/App.tsx b/cryptide_project/src/App.tsx
index c61433c..ac0525d 100644
--- a/cryptide_project/src/App.tsx
+++ b/cryptide_project/src/App.tsx
@@ -19,6 +19,9 @@ import InfoPage from './Pages/InfoPage';
 /* Component */
 import AppNavbar from './Components/NavBar';
 
+/* service */
+import SessionService from './services/SessionService';
+
 /* nav */
 import { BrowserRouter, Route, Routes, useLocation } from "react-router-dom";
 
@@ -48,7 +51,7 @@ function App() {
   const [locale, setLocale] = useState('fr');
 
   //@ts-ignore
-  const changeLocale = (newLocale) => {
+  const changeLocale = async (newLocale) => {
     setLocale(newLocale);
   };
 
diff --git a/cryptide_project/src/Components/LangDropDown.tsx b/cryptide_project/src/Components/LangDropDown.tsx
new file mode 100644
index 0000000..56465e8
--- /dev/null
+++ b/cryptide_project/src/Components/LangDropDown.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { NavDropdown } from 'react-bootstrap';
+import LanguageNavItem from './LangNavItem';
+import { HiLanguage } from 'react-icons/hi2';
+
+// @ts-ignore
+const LangDropdown = ({ changeLocale }) => {
+  return (
+    <NavDropdown title={<HiLanguage/>} id="language-dropdown" align='end' drop='down-centered'>
+      <LanguageNavItem
+        countryCode="FR"
+        languageKey="languageSelector.french"
+        onClick={() => changeLocale('fr')}
+      />
+      <LanguageNavItem
+        countryCode="GB"
+        languageKey="languageSelector.english"
+        onClick={() => changeLocale('en')}
+      />
+      {/* Ajoutez d'autres langues selon vos besoins */}
+    </NavDropdown>
+  );
+};
+
+export default LangDropdown;
diff --git a/cryptide_project/src/Components/LangNavItem.tsx b/cryptide_project/src/Components/LangNavItem.tsx
new file mode 100644
index 0000000..67abfe4
--- /dev/null
+++ b/cryptide_project/src/Components/LangNavItem.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { NavDropdown } from 'react-bootstrap';
+import { FormattedMessage } from 'react-intl';
+import ReactCountryFlag from 'react-country-flag';
+
+/*@ts-ignore*/
+const LanguageNavItem = ({ countryCode, languageKey, onClick }) => {
+  return (
+    <NavDropdown.Item onClick={onClick}>
+      <ReactCountryFlag
+        className="custom-flag"
+        countryCode={countryCode}
+        svg
+        style={{ margin: 'auto 10px 3px auto' }}
+      />
+      <FormattedMessage id={languageKey} />
+    </NavDropdown.Item>
+  );
+};
+
+export default LanguageNavItem;
diff --git a/cryptide_project/src/Components/NavBar.css b/cryptide_project/src/Components/NavBar.css
index c1854e9..cbd55b5 100644
--- a/cryptide_project/src/Components/NavBar.css
+++ b/cryptide_project/src/Components/NavBar.css
@@ -1,5 +1,4 @@
-
-.custom-navbar{
+.custom-navbar {
     /* background-color: #85C9C2; */
     color: #fff;
     text-emphasis-color: #fff;
@@ -15,23 +14,20 @@
     border-radius: 15px;
 }
 
-
 .navbar-title-dd a {
-    color: #fff;
-    border-radius: 15;
+    border-radius: 15px;
     padding: 10px 20px; /* Ajustez le rembourrage selon vos préférences */
     text-decoration: none; /* Pour supprimer le soulignement des liens */
     display: inline-block; /* Pour que les styles de fond s'appliquent aux liens */
     margin-right: 10px; /* Pour ajouter de l'espace entre les boutons */
 }
 
-
-.centerdiv{
+.centerdiv {
     display: flex;
-    justify-content: center;    
+    justify-content: center;
 }
 
-.leftdiv{
+.leftdiv {
     display: flex;
     justify-content: start;
 }
\ No newline at end of file
diff --git a/cryptide_project/src/Components/NavBar.tsx b/cryptide_project/src/Components/NavBar.tsx
index feb9695..4500c85 100644
--- a/cryptide_project/src/Components/NavBar.tsx
+++ b/cryptide_project/src/Components/NavBar.tsx
@@ -9,17 +9,13 @@ import { FormattedMessage } from 'react-intl';
 /* Icon */
 import { BiDoorOpen, BiLogInCircle } from 'react-icons/bi';
 import { BsFillPersonPlusFill } from 'react-icons/bs';
-import { HiLanguage } from 'react-icons/hi2';
 
 /* Images */
 import logo from '../res/img/logo2_preview_rev_1.png';
 
 /* Components */
-import ReactCountryFlag from "react-country-flag"
-
-/* Services */
-import SessionService from '../services/SessionService';
-import AuthService from '../services/AuthService';
+import LanguageNavItem from './LangNavItem';
+import LangDropDown from './LangDropDown';
 
 /* Style */
 import './NavBar.css';
@@ -35,72 +31,60 @@ function AppNavbar({changeLocale}) {
 
     return (
         <Navbar expand="lg" className="custom-navbar" style={{ backgroundColor: theme.colors.primary }}>
-        <Container>
-            <Navbar.Brand href="/">
-                <img src={logo} alt="logo" className="logo"/>
-            </Navbar.Brand>
-            <Navbar.Toggle aria-controls="basic-navbar-nav" />
-            <Navbar.Collapse id="basic-navbar-nav">
-            <Nav className="me-auto">
-                <NavDropdown title={<span style={{color:theme.colors.text}}><FormattedMessage id="play"/></span>} className="navbar-title" id="basic-nav-dropdown" >
-                    <NavDropdown.Item href="play"><FormattedMessage id="play_solo"/> </NavDropdown.Item>
-                    <NavDropdown.Divider />
-                    <NavDropdown.Item href="play"><FormattedMessage id="create_room"/> </NavDropdown.Item>
-                    <NavDropdown.Item href="play"><FormattedMessage id="join"/> </NavDropdown.Item>
-                </NavDropdown>
-            </Nav>
-            <div className='leftdiv'>
-                <Nav className="ml-auto navbar-title-dd">
-                    {/* Affichage dynamique selon état de connexion */}
-                    {isLoggedIn ? (
-                                        <Nav.Link href="/play" onClick={logout} className='navbar-title-dd' style={{ backgroundColor: theme.colors.secondary }}>
-                                            <BiDoorOpen />
-                                            <FormattedMessage id="log_out" />
-                                        </Nav.Link>
-                                    ) 
-                                    : (
-                                        <>
-                                            <Nav.Link href="/login" className='navbar-title-dd' style={{ backgroundColor: theme.colors.secondary }}>
-                                                <BiLogInCircle />
-                                                <FormattedMessage id="log_in" />
-                                            </Nav.Link>
-                                            <Nav.Link href="/signup" className='navbar-title-dd' style={{ backgroundColor: theme.colors.secondary }}>
-                                                <BsFillPersonPlusFill />
-                                                <FormattedMessage id="sign_up" />
-                                            </Nav.Link>
-                                        </>
-                                    )
-                    }
-                </Nav>
-                <Nav className="me-auto">
-                    <NavDropdown 
-                    title={<span><HiLanguage /></span>}
-                    className="navbar-title" id="basic-nav-dropdown">
-                        <NavDropdown.Item onClick={() => changeLocale('fr')}> 
-                            <ReactCountryFlag countryCode="FR"
-                                                svg
-                                                style={{
-                                                    width: '30px',
-                                                    height: '20px',
-                                                    margin: 'auto 10px 3px auto',
-                                                }}/>        
-                            <FormattedMessage id="languageSelector.french"/> 
-                        </NavDropdown.Item>
-                        <NavDropdown.Item onClick={() => changeLocale('en')}> 
-                            <ReactCountryFlag countryCode="GB" 
-                                                svg
-                                                style={{
-                                                    width: '30px',
-                                                    height: '20px',
-                                                    margin: 'auto 10px 3px auto',
-                                                }}/>
-                            <FormattedMessage id="languageSelector.english"/> 
-                        </NavDropdown.Item>
-                    </NavDropdown>
-                </Nav>
-            </div>
-            </Navbar.Collapse>
-        </Container>
+            <Container>
+                <Navbar.Brand href="/">
+                    <img src={logo} alt="logo" className="logo" />
+                </Navbar.Brand>
+                <Navbar.Toggle aria-controls="basic-navbar-nav" />
+                <Navbar.Collapse id="basic-navbar-nav">
+                    <Nav className="me-auto">
+                        <NavDropdown title={<span style={{ color: theme.colors.text }}><FormattedMessage id="play" /></span>} className="navbar-title" id="basic-nav-dropdown">
+                        <NavDropdown.Item href="play"><FormattedMessage id="play_solo" /> </NavDropdown.Item>
+                        <NavDropdown.Divider />
+                        <NavDropdown.Item href="play"><FormattedMessage id="create_room" /> </NavDropdown.Item>
+                        <NavDropdown.Item href="play"><FormattedMessage id="join" /> </NavDropdown.Item>
+                        </NavDropdown>
+                    </Nav>
+                    <div className='leftdiv'>
+                        <Nav className="ml-auto navbar-title-dd">
+                        {isLoggedIn ? (
+                            <NavDropdown
+                                title={<span style={{ color: theme.colors.text }}>Menu <BiDoorOpen /></span>}
+                                id="basic-nav-dropdown"
+                                align="end"
+                                drop='down-centered'
+                            >
+                            <NavDropdown.Item href="/profile">Profil</NavDropdown.Item>
+                            <LanguageNavItem
+                                countryCode="FR"
+                                languageKey="languageSelector.french"
+                                onClick={() => changeLocale('fr')}
+                            />
+                            <LanguageNavItem
+                                countryCode="GB"
+                                languageKey="languageSelector.english"
+                                onClick={() => changeLocale('en')}
+                            />
+                            <NavDropdown.Divider />
+                            <NavDropdown.Item onClick={logout}>Déconnexion</NavDropdown.Item>
+                            </NavDropdown>
+                        ) : (
+                            <>
+                            <Nav.Link href="/login" className='navbar-title-dd' style={{ backgroundColor: theme.colors.secondary }}>
+                                <BiLogInCircle />
+                                <FormattedMessage id="log_in" />
+                            </Nav.Link>
+                            <Nav.Link href="/signup" className='navbar-title-dd' style={{ backgroundColor: theme.colors.secondary }}>
+                                <BsFillPersonPlusFill />
+                                <FormattedMessage id="sign_up" />
+                            </Nav.Link>
+                            <LangDropDown changeLocale={changeLocale}/>
+                            </>
+                        )}
+                        </Nav>
+                    </div>
+                </Navbar.Collapse>
+            </Container>
         </Navbar>
     );
 }
diff --git a/cryptide_project/src/Pages/Home.tsx b/cryptide_project/src/Pages/Home.tsx
index d6ba0c0..249099c 100644
--- a/cryptide_project/src/Pages/Home.tsx
+++ b/cryptide_project/src/Pages/Home.tsx
@@ -8,7 +8,7 @@ import { Link } from 'react-router-dom';
 import { FormattedMessage } from 'react-intl';
 import ButtonImgNav from '../Components/ButtonImgNav';
 
-
+// @ts-ignore
 function Home() {
     const theme=useTheme();
     const {isLoggedIn, login} = useAuth();
diff --git a/cryptide_project/src/Pages/Play.tsx b/cryptide_project/src/Pages/Play.tsx
index a3ea278..522e8af 100644
--- a/cryptide_project/src/Pages/Play.tsx
+++ b/cryptide_project/src/Pages/Play.tsx
@@ -78,7 +78,7 @@ function Play() {
         };
       
         fetchUserInformation();
-    }, []);
+    }, [isLoggedIn]);
       
 
     const { setIndicesData, setPersonData, setPersonNetworkData } = useGame();