diff --git a/backend/Room.js b/backend/Room.js
index 93f9d80..00ff668 100644
--- a/backend/Room.js
+++ b/backend/Room.js
@@ -2,19 +2,21 @@ const utils = require('./utils')
 const _ = require('lodash');
 
 function Room(id) {
+  this.id = id;
+  this.name = "";
+  this.players = [];
+  this.numberOfPlayer = 0;
+  this.gameMaster = null;
+  this.settings = this.getDefaultSettings();
   this.team1Player = 0;
   this.team2Player = 0;
-  this.name = "";
-  this.id = id;
   this.gifUrl = "";
-  this.players = [];
   this.wordToGuess = ""
   this.words = [];
   this.wordsPerPlayer = {};
   this.wordsOfRound = [];
   this.wordsValidated = [];
   this.teams = [];
-  this.gameMaster = null;
   this.round = 0;
   this.roundDescription = [];
   this.set = 1;
@@ -25,9 +27,7 @@ function Room(id) {
   this.setFinished = false;
   this.scoreFirstTeam = 0;
   this.scoreSecondTeam = 0;
-  this.numberOfPlayer = 0;
   this.lastActivity = Date.now();
-  this.settings = this.getDefaultSettings();
 }
 
 Room.prototype = {
@@ -80,6 +80,13 @@ Room.prototype = {
     });
     delete this.wordsPerPlayer[id];
     this.numberOfPlayer = this.players.length;
+    if (id == this.gameMaster){
+      if (this.numberOfPlayer > 0){
+        this.setGameMaster(this.players[0].id);
+      } else {
+        this.setGameMaster(null);
+      }
+    }
   },
   addWord: function(word, playerId) {
     this.updateActivity();
@@ -167,8 +174,8 @@ Room.prototype = {
     this.team1Player = 0;
     this.team2Player = 0;
     this.gifUrl = "";
-    this.words = [];
     this.wordToGuess = "";
+    this.words = [];
     let wordsPerPlayer = {};
     this.players.map(function(player){
       wordsPerPlayer[player.id] = [];
diff --git a/backend/timesUpGame.js b/backend/timesUpGame.js
index dd59304..e27d2b2 100644
--- a/backend/timesUpGame.js
+++ b/backend/timesUpGame.js
@@ -125,33 +125,19 @@ function createRoom(ws, obj) {
 function joinRoom(ws, obj) {
   let roomId = obj.roomId;
   let room = rooms.get(roomId);
-  if (room !== undefined) { // room already exists
-    ws.roomId = roomId;
-    addPlayerToRoom(ws, room);
-    let response = {
-      type: 'updateState',
-      global: {
-        joinedRoom: true,
-      },
-      room: room.serialize()
-    };
-    broadcast(response, room);
-    broadcastRoomsInfo();
-  } else { // room does not exist - can happen if trying to access deleted room URL
-    console.log(`Player ${ws.playerName} tried to join room that does not exist anymore`);
-    let response = {
-      type: 'updateState',
-      global: {
-        joinedRoom: false,
-      },
-      room: {
-        id: ''
-      }
-    };
-    ws.roomId = '';
-    ws.send(JSON.stringify(response));
-  }
+  if (room === undefined){ return; }
+  ws.roomId = roomId;
+  addPlayerToRoom(ws, room);
+  let response = {
+    type: 'updateState',
+    global: {
+      joinedRoom: true,
+    },
+    room: room.serialize()
+  };
   notifyGameMaster(room);
+  broadcast(response, room);
+  broadcastRoomsInfo();
 }
 
 /**
@@ -170,50 +156,36 @@ function leaveRoom(ws, obj) {
   let room = rooms.get(roomId);
   let gameMaster = room.gameMaster;
   room.removePlayer(clientId);
+  client = getClient(clientId);
+  client.roomId = '';
   console.log(`Player ${ws.playerName} left room ${room.id}`);
 
-  // If room empty, delete it.
-  if (room.players.length === 0){
-    console.log(`No more players in room. Deleting room ${room.id}`);
-    rooms.delete(room.id);
-  }
+  // Send individual response to client to disconnect from room
   let response = {
     type: 'updateState',
     global: {
       joinedRoom: false,
-      rooms: serializeRooms()
-    },
-    room: {
-      id: ''
     }
   };
   sendMessage(response, clientId);
 
-  let response2 = {
-    type:'updateState',
-    room: {
-      players: room.players
-    }
-  };
-  // If player leaving is the game master, appoint a new game master
-  // If no more players are left, set gameMaster to null.
-  if (clientId == gameMaster) {
-    if (room.players.length > 0) {
-      newGameMaster = room.players[0].id;
-      console.log("Game master left the room. Appointing " + newGameMaster + " as gameMaster.");
-      room.setGameMaster(newGameMaster);
-      response2.room.gameMaster = newGameMaster;
-    } else {
-      console.log("No more players in room. Room gameMaster set to null.")
-      room.setGameMaster(null);
-      response2.room.gameMaster = null;
+  // Send broadcast response to other clients.
+  if (room.players.length === 0){ // no players left in room, delete room
+    console.log(`No more players in room. Deleting room ${room.id}`);
+    rooms.delete(room.id);
+    broadcastRoomsInfo();
+  } else {
+    console.log(`Updating players in room and broadcasting to clients.`);
+    let response2 = {
+      type:'updateState',
+      room: {
+        players: room.players
+      }
     }
-  }
-  broadcast(response2, room);
-  if (room.gameMaster){
     notifyGameMaster(room);
-  }
-  broadcastRoomsInfo();
+    broadcast(response2, room);
+    broadcastRoomsInfo();
+  };
 }
 
 /**
diff --git a/frontend/package.json b/frontend/package.json
index cf6d450..6e67cdb 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -8,6 +8,7 @@
     "@giphy/react-components": "^1.0.2",
     "@material-ui/core": "^4.9.9",
     "@material-ui/icons": "^4.9.1",
+    "@material-ui/lab": "^4.0.0-alpha.50",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.4.1",
     "@testing-library/user-event": "^7.2.1",
diff --git a/frontend/src/component/Chat/Chat.jsx b/frontend/src/component/Chat/Chat.jsx
index 50231ab..6badfcc 100644
--- a/frontend/src/component/Chat/Chat.jsx
+++ b/frontend/src/component/Chat/Chat.jsx
@@ -27,7 +27,7 @@ function Chat (props) {
     if (props.incomingChatMessage) {
       setMessages(messages.concat(props.incomingChatMessage));
     }
-
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.incomingChatMessage]);
 
   useEffect(() => {
@@ -37,7 +37,7 @@ function Chat (props) {
 
 
   const submitMessage = function (messageString) {
-      if(messageString !== '') {
+      if (messageString !== '') {
           props.sendChatMessage(messageString);
       }
   }
diff --git a/frontend/src/component/Game/CenterPanel.jsx b/frontend/src/component/Game/CenterPanel.jsx
index 5a68212..03c8731 100644
--- a/frontend/src/component/Game/CenterPanel.jsx
+++ b/frontend/src/component/Game/CenterPanel.jsx
@@ -1,12 +1,18 @@
 import React from 'react';
 import {makeStyles} from '@material-ui/core/styles';
 import Paper from "@material-ui/core/Paper";
+import Slide from "@material-ui/core/Slide";
+import Snackbar from "@material-ui/core/Snackbar";
 import PlayerActivePanel from "./PlayerActivePanel";
 import PlayerInactivePanel from "./PlayerInactivePanel";
 import TopInformation from "./TopInformation";
 import Grid from "@material-ui/core/Grid";
 import WordInput from "./WordInput";
 
+function TransitionRight(props) {
+  return <Slide {...props} direction="right" />;
+}
+
 const useStyles = makeStyles((theme) => ({
   paper: {
     width: '100%',
@@ -17,11 +23,24 @@ const useStyles = makeStyles((theme) => ({
   },
   grid: {
     display :'grid',
+  },
+  snackbar: {
+    textAlign: 'center'
   }
 }));
 
 function CenterPanel(props) {
   const classes = useStyles();
+  const isActivePlayer = props.currentPlayer.id === props.activePlayer.id;
+  const [open, setOpen] = React.useState(isActivePlayer);
+  const handleClose = (event, reason) => {
+    setOpen(false);
+  };
+
+  React.useEffect(() => {
+    setOpen(isActivePlayer);
+  }, [isActivePlayer]);
+
   return (<React.Fragment>
     <Paper className={classes.paper} elevation={3}>
       {/* <p>props.currentPlayer {JSON.stringify(props.currentPlayer)}</p> */}
@@ -33,7 +52,7 @@ function CenterPanel(props) {
         roomSettings={props.roomSettings}
         startTimer={props.startTimer}
         playSound={props.playSound}/>
-      {props.currentPlayer.id === props.activePlayer.id && <React.Fragment>
+      {isActivePlayer && <React.Fragment>
         <PlayerActivePanel
           currentPlayer={props.currentPlayer}
           gameMaster={props.gameMaster}
@@ -46,7 +65,7 @@ function CenterPanel(props) {
           wordToGuess={props.wordToGuess}/>
         </React.Fragment>
       }
-      {props.currentPlayer.id !== props.activePlayer.id && <React.Fragment>
+      {!isActivePlayer && <React.Fragment>
         <PlayerInactivePanel
           currentPlayer={props.currentPlayer}
           gameMaster={props.gameMaster}
@@ -80,6 +99,14 @@ function CenterPanel(props) {
         </Paper>
       </Grid>
         }
+      <Snackbar
+        className={classes.snackbar}
+        anchorOrigin={{vertical: 'bottom', horizontal: 'left'}}
+        open={open}
+        autoHideDuration={1000}
+        onClose={handleClose}
+        TransitionComponent={TransitionRight}
+        message="It's your turn !"/>
     </Paper>
   </React.Fragment>);
 }
diff --git a/frontend/src/component/Game/Scoreboard.jsx b/frontend/src/component/Game/Scoreboard.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/component/Game/TeamPanel.jsx b/frontend/src/component/Game/TeamPanel.jsx
index c46e9b7..621f7f8 100644
--- a/frontend/src/component/Game/TeamPanel.jsx
+++ b/frontend/src/component/Game/TeamPanel.jsx
@@ -41,10 +41,11 @@ function TeamPanel(props) {
   const teamMembers1 = teams[0].map(player => {
     return (<React.Fragment key={player.name}>
       <Grid item>
-      <PlayerAvatar
-        player = {player}
-        gameMaster = {props.gameMaster}
-        currentPlayer = {props.currentPlayer}/>
+        <PlayerAvatar
+          player = {player}
+          gameMaster = {props.gameMaster}
+          displayPlayerName = {true}
+          currentPlayer = {props.currentPlayer}/>
       </Grid>
     </React.Fragment>);
   });
@@ -52,9 +53,10 @@ function TeamPanel(props) {
     return (<React.Fragment key={player.name}>
       <Grid item>
         <PlayerAvatar
-            player = {player}
-            gameMaster = {props.gameMaster}
-            currentPlayer = {props.currentPlayer}/>
+          player = {player}
+          gameMaster = {props.gameMaster}
+          displayPlayerName = {true}
+          currentPlayer = {props.currentPlayer}/>
       </Grid>
     </React.Fragment>);
   });
diff --git a/frontend/src/component/Player/PlayerAvatar.css b/frontend/src/component/Player/PlayerAvatar.css
deleted file mode 100644
index bcb8e43..0000000
--- a/frontend/src/component/Player/PlayerAvatar.css
+++ /dev/null
@@ -1,3 +0,0 @@
-div > .MuiCardHeader-avatar {
-  margin-right: 10px
-}
diff --git a/frontend/src/component/Player/PlayerAvatar.jsx b/frontend/src/component/Player/PlayerAvatar.jsx
index 75f2e2b..e7a5635 100644
--- a/frontend/src/component/Player/PlayerAvatar.jsx
+++ b/frontend/src/component/Player/PlayerAvatar.jsx
@@ -7,7 +7,6 @@ import IconButton from '@material-ui/core/IconButton';
 import TextField from '@material-ui/core/TextField';
 import EditIcon from '@material-ui/icons/Edit';
 import CheckIcon from '@material-ui/icons/Check';
-import './PlayerAvatar.css'
 
 const useStyles = makeStyles(({ palette }) => ({
   header: {
@@ -69,7 +68,7 @@ function PlayerAvatar(props){
         </Avatar>
       }
       {isGameMaster &&
-        <Avatar src='https://api.iconify.design/mdi-crown.svg' style={{'backgroundColor': 'yellow'}} className={classes.avatar}/>
+        <Avatar src='https://api.iconify.design/mdi-crown.svg' className={classes.avatar} style={{'backgroundColor': 'yellow'}}/>
       }
       </React.Fragment>);
   };
@@ -112,14 +111,20 @@ function PlayerAvatar(props){
     </Typography>);
   };
 
-  return (
+  return (<React.Fragment>
+    {props.displayPlayerName &&
     <CardHeader
       className={classes.header}
       avatar={getAvatar(props.player, props.isGameMaster)}
       title={getDisplayName(props.player, props.isCurrentPlayer, editMode)}
       subheader={props.player.status}
       titleTypographyProps={{className: classes.noPadding}}/>
-  );
+    }
+    {!props.displayPlayerName && <React.Fragment>
+      {getAvatar(props.player, props.isGameMaster)}
+      </React.Fragment>
+    }
+    </React.Fragment>);
 };
 
 
diff --git a/frontend/src/component/Player/Players.jsx b/frontend/src/component/Player/Players.jsx
index a909a1f..ddbfc38 100644
--- a/frontend/src/component/Player/Players.jsx
+++ b/frontend/src/component/Player/Players.jsx
@@ -42,6 +42,7 @@ function Players(props) {
                 isCurrentPlayer={p.id === currentPlayer.id}
                 isGameMaster={p.id === gameMaster}
                 gameMaster={gameMaster}
+                displayPlayerName={true}
                 onSendUsername={props.onSendUsername}/>
             </TableCell>
             <TableCell align="left">
diff --git a/frontend/src/component/Room/RoomSettings.jsx b/frontend/src/component/Room/RoomSettings.jsx
index 7408467..982eb78 100644
--- a/frontend/src/component/Room/RoomSettings.jsx
+++ b/frontend/src/component/Room/RoomSettings.jsx
@@ -5,7 +5,6 @@ import FormControlLabel from '@material-ui/core/FormControlLabel';
 import {makeStyles} from '@material-ui/core/styles';
 import SettingsIcon from '@material-ui/icons/Settings';
 import TextIcon from '../TextIcon/TextIcon';
-import './Rooms.css'
 
 const useStyles = makeStyles((theme) => ({
   root: {
diff --git a/frontend/src/component/Room/Rooms.css b/frontend/src/component/Room/Rooms.css
deleted file mode 100644
index 5d17876..0000000
--- a/frontend/src/component/Room/Rooms.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.avatar {
-  margin-bottom: 5px;
-}
diff --git a/frontend/src/component/Room/Rooms.jsx b/frontend/src/component/Room/Rooms.jsx
index ecfaab8..066b2d2 100644
--- a/frontend/src/component/Room/Rooms.jsx
+++ b/frontend/src/component/Room/Rooms.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import './Rooms.css'
 import PlayerAvatar from "../Player/PlayerAvatar";
 import {makeStyles} from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
@@ -12,6 +11,7 @@ import TableHead from '@material-ui/core/TableHead';
 import TableRow from '@material-ui/core/TableRow';
 import MeetingRoomIcon from '@material-ui/icons/MeetingRoom';
 import TextIcon from '../TextIcon/TextIcon';
+import AvatarGroup from '@material-ui/lab/AvatarGroup';
 
 const useStyles = makeStyles({
   table: {
@@ -57,17 +57,20 @@ function Rooms(props) {
               <TableCell align="left">{new Date(room.lastActivity).toDateString()}</TableCell>
               <TableCell align="left">{room.scoreFirstTeam} - {room.scoreSecondTeam}</TableCell>
               <TableCell align="left">
-              {
-                room.players.map((player) => (
-                  <PlayerAvatar
-                    key={player.id}
-                    player={player}
-                    isGameMaster={player.id === room.gameMaster}
-                    isCurrentPlayer={player.id === currentPlayer.id}
-                    gridContainerProps={{'justify': 'flex-start'}}
-                    onSendUsername={props.onSendUsername}/>
-                ))
-              }
+                <AvatarGroup max={2} spacing='small'>
+                {
+                  room.players.map((player) => (
+                    <PlayerAvatar
+                      key={player.id}
+                      player={player}
+                      isGameMaster={player.id === room.gameMaster}
+                      isCurrentPlayer={player.id === currentPlayer.id}
+                      gridContainerProps={{'justify': 'flex-start'}}
+                      displayPlayerName={false}
+                      onSendUsername={props.onSendUsername}/>
+                  ))
+                }
+                </AvatarGroup>
               </TableCell>
               <TableCell align="left">
                 <Button