diff --git a/client/src/App.css b/client/src/App.css
index b2f9649..edfbec5 100755
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -106,3 +106,11 @@ body {
   flex-grow: 1;
 }
 
+.Table .ViewCard {
+  display: flex;
+  positin: relative;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
\ No newline at end of file
diff --git a/client/src/App.js b/client/src/App.js
index 1a5d13e..ea6e118 100755
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -21,6 +21,7 @@ import { GameOrder } from "./GameOrder.js";
 import { Activities } from "./Activities.js";
 import { SelectPlayer } from "./SelectPlayer.js";
 import { PlayersStatus } from "./PlayersStatus.js";
+import { ViewCard } from "./ViewCard.js";
 import { Hand } from "./Hand.js";
 
 import history from "./history.js";
@@ -41,6 +42,7 @@ const Table = () => {
   const [players, setPlayers] = useState(undefined);
   const [player, setPlayer] = useState(undefined);
   const [buildActive, setBuildActive] = useState(false);
+  const [cardActive, setCardActive] = useState(undefined);
   const fields = [ 'id', 'state', 'color', 'name' ];
 
   useEffect(() => {
@@ -301,7 +303,7 @@ const Table = () => {
           { color && state === 'game-order' && <GameOrder/> }
           { /* state === 'normal' && <Trade/> */ }
           { /* state === 'winner' &&  <Winner color={winner}/>  */ }
-          { /* cardActive && <ViewCard card={cardActive}/> */ }
+          { <ViewCard {...{cardActive, setCardActive }}/> }
 
           { /*isTurn && turn && turn.actions && game.turn.actions.indexOf('select-resources') !== -1 &&
             <ChooseCard type={turn.active}/>
@@ -310,7 +312,7 @@ const Table = () => {
           <Board/>          
           <PlayersStatus/>
           <PlayersStatus active={true}/>
-          <Hand {...{buildActive, setBuildActive}}/>
+          <Hand {...{buildActive, setBuildActive, setCardActive}}/>
         </div>
         <div className="Sidebar">
           { name !== "" && <PlayerList/> }
diff --git a/client/src/Chat.js b/client/src/Chat.js
index 1aec829..c501f67 100644
--- a/client/src/Chat.js
+++ b/client/src/Chat.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useContext, useRef, useCallback } from "react";
+import React, { useState, useEffect, useContext, useRef, useCallback, useMemo } from "react";
 import Paper from '@material-ui/core/Paper';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
@@ -22,7 +22,9 @@ const Chat = () => {
   const [startTime, setStartTime] = useState(0);
 
   const { ws, name } = useContext(GlobalContext);
-
+  const fields = useMemo(() => [
+    'chat', 'startTime'
+  ], []);
   const onWsMessage = (event) => {
     const data = JSON.parse(event.data);
     switch (data.type) {
@@ -54,9 +56,9 @@ const Chat = () => {
     if (!ws) { return; }
     ws.send(JSON.stringify({ 
       type: 'get', 
-      fields: ['chat', 'startTime' ]
+      fields
     }));
-  }, [ws]);
+  }, [ws, fields]);
 
   const chatKeyPress = useCallback((event) => {
     if (event.key === "Enter") {
diff --git a/client/src/ViewCard.js b/client/src/ViewCard.js
index 1593c1e..549832e 100644
--- a/client/src/ViewCard.js
+++ b/client/src/ViewCard.js
@@ -1,21 +1,70 @@
-import React from "react";
-import "./ViewCard.css";
+import React, {useEffect, useContext, useMemo, useRef, useState,
+  useCallback} from "react";
+import equal from "fast-deep-equal";
+
 import Paper from '@material-ui/core/Paper';
 import Button from '@material-ui/core/Button';
-import Resource from './Resource.js';
 
-const ViewCard = ({table, card}) => {
-  if (!table.game.player) {
+import "./ViewCard.css";
+import { Resource } from './Resource.js';
+import { GlobalContext } from "./GlobalContext.js";
+
+const ViewCard = ({cardActive, setCardActive}) => {
+  const { ws } = useContext(GlobalContext);
+  const [priv, setPriv] = useState(undefined);
+  const [turns, setTurns] = useState(0);
+  const fields = useMemo(() => [
+    'private', 'turns'
+  ], []);
+  const onWsMessage = (event) => {
+    const data = JSON.parse(event.data);
+    switch (data.type) {
+    case 'game-update':
+      console.log(`view-card - game update`);
+      if ('private' in data.update && !equal(data.update.private, priv)) {
+        setPriv(data.update.private);
+      }
+      if ('turns' in data.update && data.update.turns !== turns) {
+        setTurns(data.update.turns);
+      }
+      break;
+    default:
+      break;
+    }
+  };
+  const refWsMessage = useRef(onWsMessage);
+  useEffect(() => { refWsMessage.current = onWsMessage; });
+  useEffect(() => {
+    if (!ws) { return; }
+    const cbMessage = e => refWsMessage.current(e);
+    ws.addEventListener('message', cbMessage);
+    return () => {
+      ws.removeEventListener('message', cbMessage);
+    }
+  }, [ws, refWsMessage]);
+  useEffect(() => {
+    if (!ws) { return; }
+    ws.send(JSON.stringify({ 
+      type: 'get', 
+      fields
+    }));
+  }, [ws, fields]);
+
+  const playCard = useCallback((event) => {
+    ws.send(JSON.stringify({
+      type: 'play-card',
+      card: cardActive
+    }));
+  }, [ws, cardActive]);
+
+  const close = (event) => {
+    setCardActive(undefined);
+  };
+
+  if (!cardActive) {
     return <></>;
   }
 
-  const playCard = (event) => {
-    table.playCard(card);
-  }
-  const close = (event) => {
-    table.closeCard();
-  };
-
   const capitalize = (string) => {
     if (string === 'vp') {
       return 'Victory Point';
@@ -28,10 +77,10 @@ const ViewCard = ({table, card}) => {
   };
 
   let description, lookup;
-  if (card.type === 'progress') {
-    lookup = `${card.type}-${card.card}`;
+  if (cardActive.type === 'progress') {
+    lookup = `${cardActive.type}-${cardActive.card}`;
   } else {
-    lookup = card.type;
+    lookup = cardActive.type;
   }
 
   switch (lookup) {
@@ -56,7 +105,7 @@ const ViewCard = ({table, card}) => {
       <div>This is still limited by the number of roads you have. If you do not have enough roads
         remaining, or if there are no valid road building locations, the number of roads
         you can place will be reduced.</div>
-      <div>You currently have <b>{table.game.player.roads}</b> roads remaining.</div>
+      <div>You currently have <b>{priv.roads}</b> roads remaining.</div>
       </>;
       break;
   case 'progress-monopoly':
@@ -77,31 +126,31 @@ const ViewCard = ({table, card}) => {
   };
 
   let canPlay = false;
-  if (card.type === 'vp') {
-    let points = table.game.player.points;
-    table.game.player.development.forEach(item => {
+  if (cardActive.type === 'vp') {
+    let points = priv.points;
+    priv.development.forEach(item => {
       if (item.type === 'vp') {
         points++;
       }
     });
     canPlay = points >= 10;
-    if (!canPlay && !card.played) {
+    if (!canPlay && !cardActive.played) {
       description = <>{description}<div>You do not have enough victory points to play this card yet. You can currently reach <b>{points}</b> points.</div></>;
     }
   } else {
-    canPlay = card.turn < table.game.turns;
+    canPlay = cardActive.turn < turns;
     if (!canPlay) {
       description = <>{description}<div>You can not play this card until your next turn.</div></>;
     }
     if (canPlay) {
-      canPlay = table.game.player.playedCard !== table.game.turns;
+      canPlay = priv.playedCard !== turns;
       if (!canPlay) {
         description = <>{description}<div>You have already played a development card this turn.</div></>;
       }
     }
   }
   
-  if (card.played) {
+  if (cardActive.played) {
     description = <>{description}<div>You have already played this card.</div></>;
     canPlay = false;
   }
@@ -109,12 +158,12 @@ const ViewCard = ({table, card}) => {
   return (
     <div className="ViewCard">
       <Paper>
-        <div className="Title">{capitalize(card.type)}</div>
+        <div className="Title">{capitalize(cardActive.type)}</div>
         <div style={{display: 'flex', flexDirection: 'row'}}>
-          <Resource type={`${card.type}-${card.card}`} disabled count={1}/>
+          <Resource type={`${cardActive.type}-${cardActive.card}`} disabled count={1}/>
           <div className="Description">{description}</div>
         </div>
-        { !card.played && 
+        { !cardActive.played && 
           <Button disabled={!canPlay}
             onClick={playCard}>play</Button>
         }
@@ -124,4 +173,4 @@ const ViewCard = ({table, card}) => {
   );
 };
 
-export default ViewCard;
\ No newline at end of file
+export {ViewCard};
\ No newline at end of file