diff --git a/client/src/Board.css b/client/src/Board.css
index 0447a41..f30b447 100755
--- a/client/src/Board.css
+++ b/client/src/Board.css
@@ -71,7 +71,8 @@
   width: 40vw;
   max-height: 100vh;
   overflow: hidden;
-  min-width: 20em;
+  min-width: 100vw;
+  max-width: 40vw;
   z-index: 100;
   padding: 0.5em;
   opacity: 0.7;
@@ -87,7 +88,7 @@
 }
 
 .lobby {
-  width: calc(100vw - 1em);
+  width: 100vw;
 }
 
 .Chat {
@@ -102,10 +103,11 @@
   min-height: 0;
 }
 
-.Chat #ChatList {
+#ChatList {
   flex: 1;
   overflow: auto;
   scroll-behavior: smooth;
+  align-items: flex-start;
 } 
 
 #ChatList .MuiListItem-gutters {
@@ -129,7 +131,8 @@
 #ChatList .PlayerColor {
   width: 1em;
   height: 1em;
-  padding: 0px;
+  padding: 0;
+  margin-top: 4px;
 }
 
 .Players {
@@ -137,22 +140,44 @@
   user-select: none;
 }
 
+.PlayerSelector .PlayerColor {
+  width: 1em;
+  height: 1em;
+}
+
 .PlayerSelector {
-  display: flex;
+  display: inline-flex;
+  flex-wrap: wrap;
   flex-direction: row;
   justify-content: space-between;
 }
 
+.PlayerSelector.MuiList-padding {
+  padding: 0;
+}
+
 .PlayerSelector .PlayerEntry {
+  flex: 1 1 0px;
   align-items: center;
-  display: flex;
+  display: inline-flex;
   flex-direction: row;
-  width: 50%;
+  min-width: 10em;
+}
+
+.PlayerSelector .MuiTypography-body1 {
+  font-size: 0.8rem;
+  white-space: nowrap;
+}
+
+.PlayerSelector .MuiTypography-body2 {
+  font-size: 0.7rem;
+  white-space: nowrap;
 }
 
 .Players .PlayerEntry {
   border: 1px solid rgba(0,0,0,0);
   border-radius: 0.5em;
+  min-width: 10em;
 }
 
 .Players .PlayerEntry[data-selectable=true]:hover {
@@ -258,6 +283,8 @@ button {
   text-align: left;
   font-size: 12pt;
   padding: 1em;
+  margin: 1em;
+  z-index: 10000;
 }
 
 .Message {
@@ -266,7 +293,7 @@ button {
   background-color: rgba(224, 224, 224);
   text-align: left;
   font-size: 12pt;
-  padding: 1em;
+  padding: 0.5em;
   user-select: none;
 }
 
diff --git a/client/src/Board.js b/client/src/Board.js
index 734cb34..38a9a56 100755
--- a/client/src/Board.js
+++ b/client/src/Board.js
@@ -9,7 +9,7 @@ import ListItem from '@material-ui/core/ListItem';
 import ListItemAvatar from  '@material-ui/core/ListItemAvatar';
 import ListItemText from '@material-ui/core/ListItemText';
 import { makeStyles } from '@material-ui/core/styles';
-import { deepOrange, lightBlue, red, grey } from '@material-ui/core/colors';
+import { orange, deepOrange, lightBlue, red, grey } from '@material-ui/core/colors';
 import Avatar from '@material-ui/core/Avatar';
 import Moment from 'react-moment';
 //import moment from 'moment';
@@ -57,8 +57,8 @@ const useStyles = makeStyles((theme) => ({
     backgroundColor: red[500],
   },
   O: {
-    color: theme.palette.getContrastText(deepOrange[500]),
-    backgroundColor: deepOrange[500],
+    color: theme.palette.getContrastText(orange[500]),
+    backgroundColor: orange[500],
   },
   W: {
     color: theme.palette.getContrastText(grey[500]),
@@ -73,7 +73,7 @@ const useStyles = makeStyles((theme) => ({
 const PlayerColor = ({ color }) => {
   const classes = useStyles();
   return (
-    <Avatar className={['PlayerColor', classes[color]]}/>
+    <Avatar className={['PlayerColor', classes[color]].join(' ')}/>
   );
 };
 
@@ -425,13 +425,14 @@ const getPlayerName = (sessions, color) => {
  * player's active item in the game */
 const Players = ({ board }) => {
   const toggleSelected = (key) => {
+    console.log('toggle');
     board.setSelected(board.game.color === key ? "" : key);
   }
 
   const players = [];
   for (let color in board.game.players) {
-    const item = board.game.players[color];
-    if (board.game.state !== "lobby" && item.status === 'Not active') {
+    const item = board.game.players[color], inLobby = board.game.state === 'lobby';
+    if (!inLobby && item.status === 'Not active') {
       continue;
     }
     const name = getPlayerName(board.game.sessions, color),
@@ -442,15 +443,16 @@ const Players = ({ board }) => {
         data-selectable={selectable}
         data-selected={board.game.color === color}
         className="PlayerEntry"
+        onClick={() => { inLobby && selectable && toggleSelected(color) }} 
         key={`player-${color}`}>
-        <PlayerColor onClick={() => { selectable && toggleSelected(color) }} color={color}/>
-        <ListItemText onClick={() => { selectable && toggleSelected(color) }}primary={toggleText} secondary={(
+        <PlayerColor color={color}/>
+        <ListItemText primary={toggleText} secondary={(
         <>
           { item.status + ' ' }
           { item.status !== 'Not active' && <Moment fromNow date={item.lastActive > Date.now() ? Date.now() : item.lastActive}/>}
         </>)} />
-        { board.game.state !== 'lobby' && board.game.color === color && 
-          <Button onClick={() => toggleSelected(color)}>exit to lobby</Button>
+        { !inLobby && board.game.color === color && 
+          <Button onClick={() => toggleSelected(color)}>Quit</Button>
         }
       </div>
     ));
@@ -1478,7 +1480,7 @@ class Board extends React.Component {
     return (
       <div className="Board" ref={el => this.el = el}>
         <canvas className="Display" ref={el => this.canvas = el}></canvas>
-        
+
         { game && <div className={'Game ' + game.state}>
           <Paper className="Message">{ this.state.message }</Paper>
           {(this.state.pickName || !this.game.name) && <PlayerName board={this}/> }
@@ -1487,54 +1489,55 @@ class Board extends React.Component {
             <Chat board={this} promoteGameState={this.promoteGameState}/>
             <Action board={this}/>
           </> }
-          { this.state.error && <Paper className="Error"><div>{this.state.error}</div></Paper> }
         </div> }
+
         <div className="Cards" ref={el => this.cards = el}>
-       {
-        game && game.state === "active" &&
-        <>
-         <div>In hand</div>
-          <div className="Hand">
-            <Resource type="wood" count={this.state.wood}/>
-            <Resource type="wheat" count={this.state.wheat}/>
-            <Resource type="stone" count={this.state.stone}/>
-            <Resource type="brick" count={this.state.brick}/>
-            <Resource type="sheep" count={this.state.sheep}/>
-          </div>
-          <div>Available to play</div>
-          <div className="Hand">
-            <Development type="monopoly" count="1"/>
-            <Development type="army-" max="14" count="4"/>
-            <div className="Stack">
-              <Development type="vp-library" count="1"/>
-              <Development type="vp-market" count="1"/>
+          { game && game.state === "active" && <>
+            <div>In hand</div>
+            <div className="Hand">
+              <Resource type="wood" count={this.state.wood}/>
+              <Resource type="wheat" count={this.state.wheat}/>
+              <Resource type="stone" count={this.state.stone}/>
+              <Resource type="brick" count={this.state.brick}/>
+              <Resource type="sheep" count={this.state.sheep}/>
             </div>
-          </div>
-          <div>Points</div>
-          <div className="Hand">
-            <div className="Stack">
-              <Development type="vp-library" count="1"/>
-              <Development type="vp-palace" count="1"/>
-              <Development type="army-" max="14" count="6"/>
+            <div>Available to play</div>
+            <div className="Hand">
+              <Development type="monopoly" count="1"/>
+              <Development type="army-" max="14" count="4"/>
+              <div className="Stack">
+                <Development type="vp-library" count="1"/>
+                <Development type="vp-market" count="1"/>
+              </div>
             </div>
-          </div>
-          <div className="Hand">
-            <Placard type="largest-army" count="1"/>
-            <Placard type="longest-road" count="1"/>
-          </div>
-          <div className="Statistics">
-            <div>Stats</div>
-            <div>
-              <div>Points: 7</div>
-              <div>Cards: {this.state.total} </div>
-              <div>Roads remaining: 4</div>
-              <div>Longest road: 7</div>
-              <div>Cities remaining: 4</div>
-              <div>Settlements remaining: 5</div>
+            <div>Points</div>
+            <div className="Hand">
+              <div className="Stack">
+                <Development type="vp-library" count="1"/>
+                <Development type="vp-palace" count="1"/>
+                <Development type="army-" max="14" count="6"/>
+              </div>
+            </div>
+            <div className="Hand">
+              <Placard type="largest-army" count="1"/>
+              <Placard type="longest-road" count="1"/>
+            </div>
+            <div className="Statistics">
+              <div>Stats</div>
+              <div>
+                <div>Points: 7</div>
+                <div>Cards: {this.state.total} </div>
+                <div>Roads remaining: 4</div>
+                <div>Longest road: 7</div>
+                <div>Cities remaining: 4</div>
+                <div>Settlements remaining: 5</div>
+              </div>
             </div>
-          </div>
           </> }
         </div>
+
+        { this.state.error && <Paper className="Error"><div>{this.state.error}</div></Paper> }
+
       </div>
     );
   }