diff --git a/assets/original/borders-5.6.jpg b/assets/original/borders-5.6.jpg
deleted file mode 100644
index 6ccbfed..0000000
Binary files a/assets/original/borders-5.6.jpg and /dev/null differ
diff --git a/assets/original/borders-5.6.png b/assets/original/borders-5.6.png
deleted file mode 100644
index b11bce1..0000000
Binary files a/assets/original/borders-5.6.png and /dev/null differ
diff --git a/assets/original/card-army-1.png b/assets/original/card-army-1.png
new file mode 100644
index 0000000..e31b395
Binary files /dev/null and b/assets/original/card-army-1.png differ
diff --git a/assets/original/card-army-10.png b/assets/original/card-army-10.png
new file mode 100644
index 0000000..c9b4d79
Binary files /dev/null and b/assets/original/card-army-10.png differ
diff --git a/assets/original/card-army-11.png b/assets/original/card-army-11.png
new file mode 100644
index 0000000..f473c34
Binary files /dev/null and b/assets/original/card-army-11.png differ
diff --git a/assets/original/card-army-12.png b/assets/original/card-army-12.png
new file mode 100644
index 0000000..8bc21f0
Binary files /dev/null and b/assets/original/card-army-12.png differ
diff --git a/assets/original/card-army-13.png b/assets/original/card-army-13.png
new file mode 100644
index 0000000..4eb68f7
Binary files /dev/null and b/assets/original/card-army-13.png differ
diff --git a/assets/original/card-army-14.png b/assets/original/card-army-14.png
new file mode 100644
index 0000000..f9f4db8
Binary files /dev/null and b/assets/original/card-army-14.png differ
diff --git a/assets/original/card-army-2.png b/assets/original/card-army-2.png
new file mode 100644
index 0000000..075477a
Binary files /dev/null and b/assets/original/card-army-2.png differ
diff --git a/assets/original/card-army-3.png b/assets/original/card-army-3.png
new file mode 100644
index 0000000..1ae04c8
Binary files /dev/null and b/assets/original/card-army-3.png differ
diff --git a/assets/original/card-army-4.png b/assets/original/card-army-4.png
new file mode 100644
index 0000000..1980779
Binary files /dev/null and b/assets/original/card-army-4.png differ
diff --git a/assets/original/card-army-5.png b/assets/original/card-army-5.png
new file mode 100644
index 0000000..0d5b099
Binary files /dev/null and b/assets/original/card-army-5.png differ
diff --git a/assets/original/card-army-6.png b/assets/original/card-army-6.png
new file mode 100644
index 0000000..ce5bd5c
Binary files /dev/null and b/assets/original/card-army-6.png differ
diff --git a/assets/original/card-army-7.png b/assets/original/card-army-7.png
new file mode 100644
index 0000000..0421ae5
Binary files /dev/null and b/assets/original/card-army-7.png differ
diff --git a/assets/original/card-army-8.png b/assets/original/card-army-8.png
new file mode 100644
index 0000000..a85e233
Binary files /dev/null and b/assets/original/card-army-8.png differ
diff --git a/assets/original/card-army-9.png b/assets/original/card-army-9.png
new file mode 100644
index 0000000..e2a262f
Binary files /dev/null and b/assets/original/card-army-9.png differ
diff --git a/assets/original/card-brick.png b/assets/original/card-brick.png
new file mode 100644
index 0000000..a32ac09
Binary files /dev/null and b/assets/original/card-brick.png differ
diff --git a/assets/original/card-monopoly.png b/assets/original/card-monopoly.png
new file mode 100644
index 0000000..76bfec3
Binary files /dev/null and b/assets/original/card-monopoly.png differ
diff --git a/assets/original/card-road-1.png b/assets/original/card-road-1.png
new file mode 100644
index 0000000..edf4fa8
Binary files /dev/null and b/assets/original/card-road-1.png differ
diff --git a/assets/original/card-road-2.png b/assets/original/card-road-2.png
new file mode 100644
index 0000000..6ab8f17
Binary files /dev/null and b/assets/original/card-road-2.png differ
diff --git a/assets/original/card-sheep.png b/assets/original/card-sheep.png
new file mode 100644
index 0000000..652618e
Binary files /dev/null and b/assets/original/card-sheep.png differ
diff --git a/assets/original/card-stone.png b/assets/original/card-stone.png
new file mode 100644
index 0000000..53f8d91
Binary files /dev/null and b/assets/original/card-stone.png differ
diff --git a/assets/original/card-vp-library.png b/assets/original/card-vp-library.png
new file mode 100644
index 0000000..1af2088
Binary files /dev/null and b/assets/original/card-vp-library.png differ
diff --git a/assets/original/card-vp-market.png b/assets/original/card-vp-market.png
new file mode 100644
index 0000000..05a78f7
Binary files /dev/null and b/assets/original/card-vp-market.png differ
diff --git a/assets/original/card-vp-palace.png b/assets/original/card-vp-palace.png
new file mode 100644
index 0000000..042e93d
Binary files /dev/null and b/assets/original/card-vp-palace.png differ
diff --git a/assets/original/card-vp-university.png b/assets/original/card-vp-university.png
new file mode 100644
index 0000000..ec2fe32
Binary files /dev/null and b/assets/original/card-vp-university.png differ
diff --git a/assets/original/card-wheat.png b/assets/original/card-wheat.png
new file mode 100644
index 0000000..e20d4c4
Binary files /dev/null and b/assets/original/card-wheat.png differ
diff --git a/assets/original/card-wood.png b/assets/original/card-wood.png
new file mode 100644
index 0000000..315b035
Binary files /dev/null and b/assets/original/card-wood.png differ
diff --git a/assets/original/pip-numbers.jpg b/assets/original/pip-numbers.jpg
deleted file mode 100644
index dd1b83a..0000000
Binary files a/assets/original/pip-numbers.jpg and /dev/null differ
diff --git a/assets/original/pip-ships.jpg b/assets/original/pip-ships.jpg
deleted file mode 100644
index 3f63c36..0000000
Binary files a/assets/original/pip-ships.jpg and /dev/null differ
diff --git a/assets/original/placard-blue.png b/assets/original/placard-blue.png
new file mode 100644
index 0000000..25b7b07
Binary files /dev/null and b/assets/original/placard-blue.png differ
diff --git a/assets/original/placard-largest-army.png b/assets/original/placard-largest-army.png
new file mode 100644
index 0000000..2dcf62f
Binary files /dev/null and b/assets/original/placard-largest-army.png differ
diff --git a/assets/original/placard-longest-road.png b/assets/original/placard-longest-road.png
new file mode 100644
index 0000000..d2e3789
Binary files /dev/null and b/assets/original/placard-longest-road.png differ
diff --git a/assets/original/placard-orange.png b/assets/original/placard-orange.png
new file mode 100644
index 0000000..0c8079f
Binary files /dev/null and b/assets/original/placard-orange.png differ
diff --git a/assets/original/placard-red.png b/assets/original/placard-red.png
new file mode 100644
index 0000000..845d12a
Binary files /dev/null and b/assets/original/placard-red.png differ
diff --git a/assets/original/placard-white.png b/assets/original/placard-white.png
new file mode 100644
index 0000000..16f2d4a
Binary files /dev/null and b/assets/original/placard-white.png differ
diff --git a/assets/original/robber.jpg b/assets/original/robber.jpg
deleted file mode 100644
index 4ef7329..0000000
Binary files a/assets/original/robber.jpg and /dev/null differ
diff --git a/assets/original/table.png b/assets/original/table.png
old mode 100755
new mode 100644
index 472c072..ab168d4
Binary files a/assets/original/table.png and b/assets/original/table.png differ
diff --git a/assets/original/brick.png b/assets/original/tiles-brick.png
similarity index 100%
rename from assets/original/brick.png
rename to assets/original/tiles-brick.png
diff --git a/assets/original/robber.png b/assets/original/tiles-robber.png
similarity index 100%
rename from assets/original/robber.png
rename to assets/original/tiles-robber.png
diff --git a/assets/original/sheep.png b/assets/original/tiles-sheep.png
similarity index 100%
rename from assets/original/sheep.png
rename to assets/original/tiles-sheep.png
diff --git a/assets/original/stone.png b/assets/original/tiles-stone.png
similarity index 100%
rename from assets/original/stone.png
rename to assets/original/tiles-stone.png
diff --git a/assets/original/wheat.png b/assets/original/tiles-wheat.png
similarity index 100%
rename from assets/original/wheat.png
rename to assets/original/tiles-wheat.png
diff --git a/assets/original/wood.png b/assets/original/tiles-wood.png
similarity index 100%
rename from assets/original/wood.png
rename to assets/original/tiles-wood.png
diff --git a/assets/original/tiles.jpg b/assets/original/tiles.jpg
deleted file mode 100644
index 2e6607f..0000000
Binary files a/assets/original/tiles.jpg and /dev/null differ
diff --git a/assets/original/uncut/army.png b/assets/original/uncut/army.png
new file mode 100644
index 0000000..af9058a
Binary files /dev/null and b/assets/original/uncut/army.png differ
diff --git a/assets/original/borders.jpg b/assets/original/uncut/borders.jpg
similarity index 100%
rename from assets/original/borders.jpg
rename to assets/original/uncut/borders.jpg
diff --git a/assets/original/cards.jpg b/assets/original/uncut/cards.jpg
similarity index 100%
rename from assets/original/cards.jpg
rename to assets/original/uncut/cards.jpg
diff --git a/assets/original/uncut/cards.xcf b/assets/original/uncut/cards.xcf
new file mode 100644
index 0000000..8c464bb
Binary files /dev/null and b/assets/original/uncut/cards.xcf differ
diff --git a/assets/original/pips.jpg b/assets/original/uncut/pips.jpg
similarity index 100%
rename from assets/original/pips.jpg
rename to assets/original/uncut/pips.jpg
diff --git a/assets/original/placards.jpg b/assets/original/uncut/placards.jpg
similarity index 100%
rename from assets/original/placards.jpg
rename to assets/original/uncut/placards.jpg
diff --git a/assets/original/tiles.png b/assets/original/uncut/tiles.png
similarity index 100%
rename from assets/original/tiles.png
rename to assets/original/uncut/tiles.png
diff --git a/src/App.css b/src/App.css
index a214fa3..d027a56 100755
--- a/src/App.css
+++ b/src/App.css
@@ -2,47 +2,89 @@ body {
   font-family: 'Droid Sans', 'Arial Narrow', Arial, sans-serif;
 }
 
-#PCILOOKUP {
-  margin: 1em;
-  padding: 1em;
+.Cards {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  display: inline-block;
+  text-align: right;
+  vertical-align: bottom;
+  padding: 0.5em;
+}
+
+.Stack {
   position: relative;
-  background-color: lightyellow;
-  border: 1px solid #252525;
+  display: inline-block;
 }
 
-#PCILOOKUP p {
-  margin: 0;
+.Stack:not(:first-child) {
+  margin-left: -3em;
+  transition: margin-left 1s ease-in-out 0.25s;
 }
 
-#PCIRESULTS {
-  margin-top: 0.5em;
-  margin-bottom: 0.5em;
+.Stack > * {
+  transition: margin-left 1s ease-in-out 0.25s, margin-right 1s ease-in-out 0.25s;
 }
 
-#PCIDEVICE {
-  padding: 0.5em 1em;
-  font-family: 'Courier New'
+.Development:hover,
+.Placard:hover,
+.Resource:hover {
+  filter: brightness(150%);
 }
 
-#PCIBASH::before {
-  content: '# ';
+.Stack > *:not(:first-child) {
+  margin-left: -4.5em;
 }
 
-#PCIBASH {
-  margin-top: 0.5em;
-  background-color: #fff;
-  color: #040;
-  font-weight: bold;
-  white-space: pre-wrap;
-  font-family: 'Courier New';
-  padding: 1em;
+.Hand:hover .Stack:hover > *:not(:first-child) {
+  margin-left: -2em;
 }
 
-#PCIID {
-  margin-left: 0.25em;
-  padding: 0.1em;
-  width: 4em;
-  text-transform: uppercase;
+.Hand:hover .Stack:hover:not(:last-child) > *:last-child {
+  margin-right: 3em;
+}
+
+.Placard {
+  position: relative;
+  width: 9.4em;
+  height: 11.44em;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  margin: 0.25em;
+  display: inline-block;
+}
+
+.Development {
+  position: relative;
+  display: inline-block;
+  width: 4.9em;
+  height: 7.2em;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  margin: 0.25em;
+}
+
+.Resource {
+  position: relative;
+  width: 4.9em;
+  height: 7.2em;
+  display: inline-block;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  margin: 0.25em;
+}
+
+.Statistics > div:nth-child(2) {
+  display: flex;
+  flex-direction: row;
+  border: 1px solid black;
+}
+
+.Statistics div:nth-child(2) div {
+  padding: 0.25em 0.5em;
 }
 
 .MarkdownLoader {
diff --git a/src/Board.js b/src/Board.js
index 6db808a..f01b313 100755
--- a/src/Board.js
+++ b/src/Board.js
@@ -49,7 +49,7 @@ const Tiles = (board) => {
 
   [ "robber", "brick", "wood", "sheep", "stone", "wheat" ].forEach((type) => {
     const image = new Image(),
-      file = type + ".png";
+      file = "tiles-" + type + ".png";
     tiles.forEach((tile) => {
       if (tile.type == type) {
         tile.image = image;
@@ -158,6 +158,62 @@ function shuffle(array) {
   return array;
 }
 
+class Placard extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <div className="Placard"
+        style={{backgroundImage:`url(assets/original/placard-${this.props.type}.png)`}}>
+      </div>
+    );
+  }
+};
+
+class Development extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    const array = [];
+    for (let i = 0; i < this.props.count; i++) {
+      if (this.props.type.match(/-$/)) {
+        array.push(Math.ceil(Math.random() * this.props.max));
+      } else {
+        array.push("");
+      }
+    }
+    return (
+      <div className="Stack">
+        { React.Children.map(array, i => (
+          <div className="Development"
+            style={{backgroundImage:`url(assets/original/card-${this.props.type}${i}.png)`}}>
+          </div>
+        )) }
+      </div>
+    );
+  }
+};
+
+class Resource extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    const array = new Array(Number(this.props.count));
+    return (
+      <div className="Stack">
+        { React.Children.map(array, i => (
+          <div className="Resource"
+            style={{backgroundImage:`url(assets/original/card-${this.props.type}.png)`}}>
+          </div>
+        )) }
+      </div>
+    );
+  }
+};
+
 class Board extends React.Component {
   constructor(props) {
     super(props);
@@ -307,11 +363,56 @@ class Board extends React.Component {
     ctx.filleStyle = 'rgba(0, 0, 0, 0)';
 
     this.minSize = Math.min(this.canvas.height, this.canvas.width);
-    ctx.drawImage(this.table,
-      0, 0,
-      this.table.width, this.table.height,
-      0, 0, this.minSize, this.minSize);
+    /*
+     * Table tiling:
+     * Image width: 1080
+     * Left start: 32
+     * Right edge: 1010 (1010 - 32 = 978)
+     * 
+     * If the view is wider than taller, then 
+     */
 
+    /* If view is taller than wide, tile the table vertically */
+    ctx.save();
+    if (this.canvas.height > this.canvas.width) {
+      const tableHeight = this.canvas.width * this.table.height / this.table.width;
+      for (let top = 0, step = 0; top < this.canvas.height; top += tableHeight, step++) {
+        if (step % 2) {
+          ctx.save();
+          ctx.translate(0, tableHeight - 1);
+          ctx.transform(1, 0, 0, -1, 0, 0);
+          ctx.drawImage(this.table,
+            0, 0,
+            this.table.width, this.table.height,
+            0, 0, this.canvas.width, this.canvas.width * this.table.height / this.table.width);
+          ctx.restore();
+        } else {
+          ctx.drawImage(this.table,
+            0, 0,
+            this.table.width, this.table.height,
+            0, 0, 
+            this.canvas.width, this.canvas.width * this.table.height / this.table.width);
+        }
+        ctx.translate(0, tableHeight);
+      }
+    } else {
+      const tableWidth = this.canvas.height * this.table.width / this.table.height;
+      ctx.drawImage(this.table,
+        0, 0,
+        1010, this.table.height,
+        0, 0, 
+        this.canvas.height * 1010 / this.table.height, this.canvas.height);
+      let left = this.canvas.height * 1010 / this.table.height;
+      while (left < this.canvas.width) {
+        ctx.drawImage(this.table,
+          32, 0,
+          978, this.table.height,
+          left, 0, 
+          this.canvas.height * 978 / this.table.height, this.canvas.height);
+        left += this.canvas.height * 978 / this.table.height;
+      }
+    }
+    ctx.restore();
     ctx.scale(this.minSize / hexagonRatio, this.minSize / hexagonRatio);
     ctx.translate(0.5 * hexagonRatio, 0.5 * hexagonRatio);
     ctx.lineWidth = 2. / this.minSize;
@@ -514,7 +615,51 @@ class Board extends React.Component {
 
   render() {
     return (
-      <canvas className="Board" ref={el => this.canvas = el}></canvas>
+      <>
+        <canvas className="Board" ref={el => this.canvas = el}></canvas>
+        <div className="Cards">
+          <div>In hand</div>
+          <div className="Hand">
+            <Resource type="wood" count="0"/>
+            <Resource type="wheat" count="3"/>
+            <Resource type="stone" count="8"/>
+            <Resource type="brick" count="2"/>
+            <Resource type="sheep" count="5"/>
+          </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"/>
+            </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>
+          </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: 8</div>
+              <div>Roads remaining: 4</div>
+              <div>Longest road: 7</div>
+              <div>Cities remaining: 4</div>
+              <div>Settlements remaining: 5</div>
+            </div>
+          </div>
+        </div>
+      </>
     );
   }
 }