diff --git a/client/src/Board.js b/client/src/Board.js
index a84d95b..3660848 100644
--- a/client/src/Board.js
+++ b/client/src/Board.js
@@ -126,47 +126,8 @@ const Board = () => {
       break;
     }
   };
- 
   const refWsMessage = useRef(onWsMessage);
   useEffect(() => { refWsMessage.current = onWsMessage; });
-  
-  useEffect(() => {
-    if (!board.current) {
-      return;
-    }
-
-    const onResize = debounce(() => {
-      if (!board.current) {
-        return;
-      }
-     /* Adjust the 'transform: scale' for the BoardBox
-      * so the board fills the Board 
-      *
-      * The board is H tall, and H * hexRatio wide */
-      const width = board.current.offsetWidth,
-        height = board.current.offsetHeight;
-      let _transform;
-      if (height * hexRatio > width) {
-        _transform = width / (450. * hexRatio);
-      } else {
-        _transform = height / (450.);
-      }
-      
-      const boardBox = board.current.querySelector('.BoardBox');
-      if (boardBox) {
-        console.log(`Setting transofrm scale to ${_transform}`);
-        boardBox.style.transform = `scale(${_transform})`;
-      }
-    }, 250);
-
-    window.addEventListener('resize', onResize);
-    onResize();
-
-    return () => {
-      window.removeEventListener('resize', onResize);
-    } 
-  }, [board]);
-
   useEffect(() => {
     if (!ws) {
       return;
@@ -179,17 +140,58 @@ const Board = () => {
       ws.removeEventListener('message', cbMessage);
     }
   }, [ws, refWsMessage]);
-
   useEffect(() => {
-    if (!ws) {
-      return;
-    }
+    if (!ws) { return; }
     ws.send(JSON.stringify({ 
       type: 'get', 
       fields
     }));
   }, [ws, fields]);
 
+  
+  const onResize = debounce(() => {
+    if (!board.current) {
+      return;
+    }
+
+    console.log(`board - resize`);
+   /* Adjust the 'transform: scale' for the BoardBox
+    * so the board fills the Board 
+    *
+    * The board is H tall, and H * hexRatio wide */
+    const width = board.current.innerWidth,
+      height = board.current.offsetHeight;
+    let _transform;
+    if (height * hexRatio > width) {
+      _transform = width / (450. * hexRatio);
+    } else {
+      _transform = height / (450.);
+    }
+    
+    const boardBox = board.current.querySelector('.BoardBox');
+    if (boardBox) {
+      console.log(`Setting transofrm scale to ${_transform}`);
+      if (boardBox.style.transform !== `scale(${_transform})`) {
+        boardBox.style.transform = `scale(${_transform})`;
+      }
+    }
+  }, 250);
+
+  const refOnResize = useRef(onResize);
+  useEffect(() => { refOnResize.current = onResize; });
+
+  useEffect(() => {
+    const cbOnResize = e => refOnResize.current(e);
+    window.addEventListener('resize', cbOnResize);
+    onResize();
+    return () => {
+      window.removeEventListener('resize', cbOnResize);
+    } 
+  }, [refOnResize]);
+
+  onResize();
+
+
   const Tile = ({tile}) => {
     const onClick = (event) => {
       console.log(`Tile clicked: ${tile.index}`);