diff --git a/cryptide_project/src/Components/LobbyContainer.tsx b/cryptide_project/src/Components/LobbyContainer.tsx
index 4c4fe51..313bde6 100644
--- a/cryptide_project/src/Components/LobbyContainer.tsx
+++ b/cryptide_project/src/Components/LobbyContainer.tsx
@@ -8,83 +8,149 @@ import Modal from 'react-bootstrap/Modal';
 import Offcanvas from 'react-bootstrap/Offcanvas';
 import Button from 'react-bootstrap/Button';
 import { socket } from '../SocketConfig';
+import Tooltip from 'react-bootstrap/esm/Tooltip';
+import OverlayTrigger from 'react-bootstrap/esm/OverlayTrigger';
 
 interface LobbyContainerProps {
         roomNum : string
         HeadPlayer : Player
         nbPlayer : number
         setFirst: (first: boolean) => void
+        started : boolean
     //? mettre un "nbplayermax" si le nombre de joueur max peut etre fixé ?
 }
 
-const LobbyContainer: React.FC<LobbyContainerProps> = ({roomNum, HeadPlayer, nbPlayer, setFirst}) => {
+const LobbyContainer: React.FC<LobbyContainerProps> = ({roomNum, HeadPlayer, nbPlayer, setFirst, started}) => {
     const theme=useTheme();
 
     const navigate = useNavigate();
     const dest = '/lobby?room=' + roomNum;
 
     //* Modal
-    const [show, setShow] = useState(false);
+    const [showFull, setShowFull] = useState(false);
+    const [showStart, setShowStart] = useState(false);
 
-    const handleClose = () => setShow(false);
-    const handleShow = () => setShow(true);
+    const handleClose = () => {
+        setShowFull(false) 
+        setShowStart(false)
+    };
+    
+    const handleShowFull = () => setShowFull(true);
+    const handleShowStart = () => setShowStart(true);
 
     const handleContainerClick = () => {
         
-        if (show){
+        if (showFull || showStart){
             handleClose()
         }
         else{
-            if (nbPlayer < 6) {
+            if (nbPlayer < 6 && !started) {
                 socket.off("request lobbies")
                 setFirst(true)
                 navigate(dest);
-            } else {
-                handleShow()
-                //alert('La salle est pleine. Impossible de rejoindre.');
+            }
+            else if(started){
+                handleShowStart()
+            }
+            else {
+                handleShowFull()
             }
         }
     };
 
+
+    //* popup pour salle pleine
+    //@ts-ignore
+    const renderTooltipFull = (props) => (
+        <Tooltip id="button-tooltip" {...props}>
+            Salle Pleine !
+        </Tooltip>
+    );
+    
+    //* popup pour partie déjà lancé
+    //@ts-ignore
+    const renderTooltipInGame = (props) => (
+        <Tooltip id="button-tooltip" {...props}>
+            En Jeu !
+        </Tooltip>
+    );
+
+    //* autre
+    //@ts-ignore
+    const renderTooltip = (props) => (
+        <Tooltip id="button-tooltip" {...props}>
+            Rejoindre le lobby !
+        </Tooltip>
+    );
+
+    //let IsInGame = true;
+
     let stylefull;
     let colorfull;
+    let actualRender = renderTooltip;
+    let bgcol = 'white';
+
     if (nbPlayer >= 6) {
         stylefull = "darkred"
         colorfull = "darkred"
+        actualRender = renderTooltipFull
+
     }
     else {
         stylefull = "whitesmoke"
         colorfull = "black"
     }
+    
+    if(started){
+        bgcol = 'lightgrey' //! le hover ne marche plus
+        actualRender = renderTooltipInGame
+    }
+
+
 
     return(
-        <div className='lobbyMainContainer' onClick={handleContainerClick} style={{borderColor:stylefull}}>
-                <header style={{height:'20%', display:'flex', justifyContent:'end'}}>
-                    <h6><i>Room : {roomNum}</i></h6>
-                </header>
-                <hr/>
-                    <h3><b>{HeadPlayer.pseudo}</b></h3>
-                <div style={{display:'flex', justifyContent:'end', alignItems:'end'}}>
-                    <h2 style={{color:colorfull}}>{nbPlayer}/6</h2>
-                </div>
-{/* 
-                <Button onClick={handleContainerClick} variant='danger'>
-                    click
-                </Button> */}
-
-                <Modal show={show} onHide={handleClose}>
-                    <Modal.Header closeButton>
-                    <Modal.Title>Salle pleine</Modal.Title>
-                    </Modal.Header>
-                    <Modal.Body>La salle est pleine, il est impossible d'y aller pour le moment !</Modal.Body>
-                    <Modal.Footer>
+    <OverlayTrigger
+        placement="top"
+        delay={{ show: 250, hide: 400 }}
+        overlay={actualRender}>
+
+        <div className='lobbyMainContainer' onClick={handleContainerClick} style={{borderColor:stylefull, backgroundColor:bgcol}}>
+            <header style={{height:'20%', display:'flex', justifyContent:'end'}}>
+                <h6><i>Room : {roomNum}</i></h6>
+            </header>
+            <hr/>
+                <h3><b>{HeadPlayer.pseudo}</b></h3>
+            <div style={{display:'flex', justifyContent:'end', alignItems:'end'}}>
+                <h2 style={{color:colorfull}}>{nbPlayer}/6</h2>
+            </div>
+
+            {/* Modals */}
+            <Modal show={showFull} onHide={handleClose}>
+                <Modal.Header closeButton>
+                    <Modal.Title>Salle pleine</Modal.Title> 
+                </Modal.Header>
+                <Modal.Body>La salle est pleine, il est impossible d'y aller pour le moment !</Modal.Body>
+                <Modal.Footer>
+                    <Button variant="secondary" onClick={handleClose}>
+                        Ok
+                    </Button>
+                </Modal.Footer>
+            </Modal>
+
+            <Modal show={showStart} onHide={handleClose}>
+                <Modal.Header closeButton>
+                    <Modal.Title>La partie a déjà commencée</Modal.Title> 
+                </Modal.Header>
+                <Modal.Body>La partie a déjà commencée, il est impossible d'y aller pour le moment !</Modal.Body>
+                <Modal.Footer>
                     <Button variant="secondary" onClick={handleClose}>
                         Ok
                     </Button>
-                    </Modal.Footer>
-                </Modal>
+                </Modal.Footer>
+            </Modal>
 
         </div>
+    </OverlayTrigger>
     );
 }
 
diff --git a/cryptide_project/src/Pages/Lobbies.css b/cryptide_project/src/Pages/Lobbies.css
index 2a69478..1da3c0f 100644
--- a/cryptide_project/src/Pages/Lobbies.css
+++ b/cryptide_project/src/Pages/Lobbies.css
@@ -18,6 +18,10 @@
     cursor: pointer;
 }
 
+.lobbyMainContainer:hover{
+    background-color: whitesmoke;
+}
+
 .lobbyList{
     display: flex;
     /* justify-content: space-around; */
diff --git a/cryptide_project/src/Pages/Lobbies.tsx b/cryptide_project/src/Pages/Lobbies.tsx
index 1635e34..da6a2d5 100644
--- a/cryptide_project/src/Pages/Lobbies.tsx
+++ b/cryptide_project/src/Pages/Lobbies.tsx
@@ -39,10 +39,26 @@ function Lobbies() {
 
     const [searchTerm, setSearchTerm] = useState('');
 
+    const [showAvailable, setShowAvailable] = useState(true);
+
+    const handleShowAllClick = () => {
+        setShowAvailable(false);
+    };
+    
+    const handleShowAvailableClick = () => {
+        setShowAvailable(true);
+    };
+
+
     const filteredLobbies = lobbyData.filter((lobby) =>
-    lobby.roomNum.toLowerCase().includes(searchTerm.toLowerCase()) ||
-    lobby.headPlayer.pseudo.toLowerCase().includes(searchTerm.toLowerCase())
-);
+        lobby.roomNum.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        lobby.headPlayer.pseudo.toLowerCase().includes(searchTerm.toLowerCase())
+    );
+
+    const filteredLobbiesToShow = showAvailable
+    ? filteredLobbies.filter((lobby) => lobby.started == false)
+    : filteredLobbies;
+
 
 
     const setFirstData = (first: boolean) => {
@@ -86,14 +102,52 @@ function Lobbies() {
                 value={searchTerm}
                 onChange={(e) => setSearchTerm(e.target.value)}
             />
+
+            {/* <div>
+                <button style={{borderColor:'whitesmoke', borderRadius:'15px 0px 0px 15px', padding:'5px'}}
+                        onClick={() => setShowAvailable(false)}>Tous</button>
+                <button style={{borderColor:'whitesmoke', borderRadius:'0px 15px 15px 0px', padding:'5px'}}
+                        onClick={() => setShowAvailable(true)}>Dispo</button>
+            </div> */}
+
+        <div style={{border:'solid 3px', borderColor:'lightgray', borderRadius:'20px', margin:'10px'}}>
+            <button
+                style={{
+                    border:'solid',
+                    borderStyle:'none',
+                    borderRadius: '15px 0px 0px 15px',
+                    borderWidth: '2px',
+                    padding: '10px 15px',
+                    backgroundColor: !showAvailable ? 'white' : 'lightgray',
+                }}
+                onClick={handleShowAllClick}
+            >
+                Tous
+            </button>
+            <button
+                style={{
+                    border:'solid',
+                    borderStyle:'none',
+                    borderRadius: '0px 15px 15px 0px',
+                    padding: '10px 15px',
+                    backgroundColor: showAvailable ? 'white' : 'lightgray',
+                }}
+                onClick={handleShowAvailableClick}
+            >
+                Disponible
+            </button>
+        </div>
+
+
             <div className="lobbyList">
-                {filteredLobbies.map((lobby, index) => (
+                {filteredLobbiesToShow.map((lobby, index) => (
                 <LobbyContainer
                     key={index}
                     roomNum={lobby.roomNum}
                     HeadPlayer={lobby.headPlayer}
                     nbPlayer={lobby.nbPlayer}
                     setFirst={setFirstData}
+                    started={lobby.started}
                 />
                 ))}
             </div>
diff --git a/cryptide_project/src/Pages/Lobby.css b/cryptide_project/src/Pages/Lobby.css
index 5fbe13c..869e661 100644
--- a/cryptide_project/src/Pages/Lobby.css
+++ b/cryptide_project/src/Pages/Lobby.css
@@ -41,6 +41,13 @@
     margin: 20px;
 }
 
+
+.NumbDiv{
+    display: flex;
+    align-items: start;
+    justify-content: start;
+    margin: auto 20px;
+}
 .codeDiv{
     display: flex;
     align-items: end;
@@ -48,7 +55,7 @@
     margin: auto 20px;
 }
 
-.codeDiv p{
+.codeDiv p, .NumbDiv p{
     font-style: italic;
     font-weight: bold;
     color: gray;
diff --git a/cryptide_project/src/Pages/Lobby.tsx b/cryptide_project/src/Pages/Lobby.tsx
index 7083ec5..0787b91 100644
--- a/cryptide_project/src/Pages/Lobby.tsx
+++ b/cryptide_project/src/Pages/Lobby.tsx
@@ -254,15 +254,26 @@ function Lobby() {
         <div className='lobby-container'>
             <div className='left-part'>
                 <div className='player-board'>
-                    <div className='codeDiv' onClick={() => setCodeShowed(!codeShowed)}>
-                        {
-                            codeShowed ? (
-                                <p>Room : {room}</p>
-                            ) : (
-                                <p>Room : ******</p>
-                            )
-                        }
+                    <div>
+                        <div className='codeDiv' onClick={() => setCodeShowed(!codeShowed)}>
+                            {
+                                codeShowed ? (
+                                    <p>Room : {room}</p>
+                                ) : (
+                                    <p>Room : ******</p>
+                                )
+                            }
+                        </div>
+                        <div className='NumbDiv'>
+                            {players.length == 6 ? (
+                                    <p style={{color:'darkred'}}>6/6 Players</p>
+                                ) : (
+                                    <p>{players.length}/6 Players</p>
+                                )
+                            }
+                        </div>
                     </div>
+
                     {/* //! voir pour la gestion avec un liste, utilisateur avec le "+ (vous)" et les pdp avec les lettres grecs (?)*/}
                     {players.map((player, index) => (
                         // <PlayerItemList key={player.id} pdp={PersonImg} name={player.name} id={player.id}/>
@@ -283,28 +294,6 @@ function Lobby() {
             <div className="lobby-vertical-divider" style={{backgroundColor: theme.colors.secondary}}></div>
 
             <div className='right-part'>
-                {/* <div className='title-param-div'>
-                    <img src={param} alt="param"/>
-                    <h2>Paramètre de la partie</h2>
-                </div>
-                <ul>
-                    <li><h4> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim</h4></li>
-                    <li><h4>paramètre super important pour la partie</h4></li>
-                    <li><h4>paramètre super important pour la partie</h4></li>
-                    <li><h4>paramètre super important pour la partie</h4></li>
-                    <li><h4>Niveau des bots : Facile </h4></li>
-                    <li><h4>Thèmes : basique </h4></li> */}
-                    {
-                        //? mettre un timer pour chaques personne ?
-                        //? indice avancé ? ==> négation, voisin du 2e degré etc.
-                    }
-                {/* </ul> */}
-                {/* <center >
-                    <button className='buttonNabImg' onClick={StartGame}>
-                        <img src={cible} alt="Button Image" height="50" width="50" />
-                        <p>{"la chasse !"}</p>
-                    </button>
-                </center> */}
                 <div className='lobbyR' 
                     style={{flexDirection:'column',
                             alignItems:'space-around'}}>
@@ -368,29 +357,6 @@ function Lobby() {
                         Démarrer la partie !
                     </button>
                 </div>
-                {/* <div className='centerDivH'>
-                <div>
-                    <label htmlFor="numberInput">Séléctionner le nombre de noeud (entre 20 et 60) :</label>
-                    <input
-                        type="number"
-                        id="numberInput"
-                        value={enteredNumber}
-                        onChange={handleNumberChange}
-                        min={20}
-                        max={60}/>
-                    <p>La valeur saisie : {enteredNumber}</p>
-                </div>
-
-
-                <div className='centerDivH'>
-                    <button className='button' onClick={StartGame}
-                        style={{ 
-                            backgroundColor: theme.colors.tertiary,
-                            borderColor: theme.colors.secondary
-                        }}>
-                        <img src={cible} alt="cible" height="40"/>
-                    </button>
-                </div> */}
             </div>
         </div>
     );
diff --git a/cryptide_project/src/server/db/socialgraph.db b/cryptide_project/src/server/db/socialgraph.db
index 70e1a19..481c484 100644
Binary files a/cryptide_project/src/server/db/socialgraph.db and b/cryptide_project/src/server/db/socialgraph.db differ