diff --git a/src/components/index.js b/src/components/index.js
index 5c7229b..837c976 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -7,10 +7,11 @@ import s from '../styles/app.style';
 /* Components */
 import API from './SpreadsheetData';
 import {PageNotFound, UnderConstruction, Donate} from './Snippets';
+import Home from './Home';
 import EnterTheCode from './entercode/index';
 import Collection from './collection/index';
 import Portal from './portal/index';
-import Home from './Home';
+import Play from './play/index';
 
 // const BlockAvoider = withRouter(Base)
 
@@ -31,6 +32,7 @@ function Routing(props) {
       <Route path="/EnterTheCode" component={EnterTheCode} />
       <Route path="/collection" component={Collection} />
       <Route path="/portal" component={Portal} />
+      <Route path="/play" component={Play} />
     </div>
   );
 }
diff --git a/src/components/play/index.js b/src/components/play/index.js
new file mode 100644
index 0000000..353b9bf
--- /dev/null
+++ b/src/components/play/index.js
@@ -0,0 +1,215 @@
+import React from 'react';
+import {observable} from "mobx";
+import {observer, inject} from 'mobx-react';
+import API from '../SpreadsheetData';
+import {Loading} from '../Snippets';
+import '../../scss/play.scss';
+
+@inject((stores, props, context) => props) @observer
+export default class Play extends React.Component {
+  @observable loaded = false;
+
+  constructor(props) {
+  	super(props);
+  }
+
+  handleChange() {
+
+  }
+
+  render() {
+  	if (this.loaded == false) {
+  	  API.LoadDB([{'cards': 'attacks'}, {'cards': 'battlegear'}, {'cards': 'creatures'}, {'cards': 'locations'}, {'cards': 'mugic'}])
+      .then(() => { this.loaded = true; });
+      return (<Loading />);
+  	}
+    
+    return (<Board handleChange={this.handleChange.bind(this)} />);
+  }
+}
+
+@inject((stores, props, context) => props) @observer
+class Board extends React.Component {
+  @observable spaces = [];
+  @observable phase = "reveal_location";
+  @observable source = -1;
+
+  constructor(props) {
+    super(props);
+    this.selectCard = this.selectCard.bind(this);
+
+    this.spaces = Array(12).fill({
+      'creatures': [this.empty_card()],
+      'battlegear': [this.empty_card()],
+      'mirage': [this.empty_card()]
+    });
+
+    this.loadcards();
+    // TODO
+    this.phase = "move_creature";
+  }
+
+  empty_card() {
+    return {
+      'card': null,
+      'selected': false,
+      'selectable': true
+    }
+  }
+
+  // TODO
+  loadcards() {
+    this.spaces[5].creatures[0].card = API.cards.creatures.findOne({'gsx$name': {'$regex': new RegExp("Maxxor", 'i')}});
+    this.spaces[5].battlegear[0].card = API.cards.battlegear.findOne({'gsx$name': {'$regex': new RegExp("Maxxor's Torch", 'i')}});
+  }
+
+  // TODO
+  checkrange() {
+    return 1;
+  }
+
+  // TODO
+  selectCard(e) {
+    let id = e.target.id.substr(1);
+    let type = (() => {
+      switch (e.target.id.charAt(0)) {
+        case 'b': return 'battlegear';
+        case 'c': return 'creatures';
+        default: return "";
+      }
+    })();
+
+    const resetSelection = () => {
+      this.spaces.forEach((space, i) => {
+        space.battlegear.forEach((card) => {
+          card.selectable = true;
+          card.selected = false;
+        });
+        space.creatures.forEach((card) => {
+          card.selectable = true;
+          card.selected = false;
+        });
+      });  
+      this.source = -1;
+    }
+
+    // Reset selection
+    if (this.spaces[id][type][0].selectable == false) {
+      return resetSelection();
+    }
+
+    console.log(this.spaces[id][type][0]);
+
+    if (this.phase == "move_creature" && type == "creatures") {
+      // TODO combat
+      if (this.source >= 0 && this.source != id) {
+        this.spaces[id].creatures = (this.spaces[this.source].creatures);
+        this.spaces[id].battlegear = (this.spaces[this.source].battlegear);
+        this.spaces[this.source].creatures = [this.empty_card()];
+        this.spaces[this.source].battlegear = [this.empty_card()];
+        return resetSelection();
+      }
+
+      if (this.spaces[id].creatures[0].card == null) {
+        return;
+      }
+      
+      // else select a card
+      this.source = id;
+
+      this.spaces.forEach((space, i) => {
+        space.battlegear.forEach((card) => {
+          card.selectable = false;
+        });
+        if (i !== id) {
+          // TODO check swift / check ocuppied
+          space.creatures.forEach((card) => {
+            card.selectable = true;
+          });
+        }
+      });
+
+      this.spaces[id].creatures[0].selected = true;
+      this.spaces[id].creatures[0].selectable = false;
+    }
+  }
+
+  render() {
+    return(
+      <div className="play">
+        <div className="r1">
+          <div className="space">
+            <Space id={"c0"} cards={this.spaces[0].creatures} selectCard={this.selectCard} />
+            <Space id={"b0"} cards={this.spaces[0].battlegear} selectCard={this.selectCard} />
+          </div>
+        </div>
+        <div className="r2">
+          <div className="space">
+            <Space id={"c1"} cards={this.spaces[1].creatures} selectCard={this.selectCard} />
+            <Space id={"b1"} cards={this.spaces[1].battlegear} selectCard={this.selectCard} />
+          </div>
+          <div className="space">
+            <Space id={"c3"} cards={this.spaces[3].creatures} selectCard={this.selectCard} />
+            <Space id={"b3"} cards={this.spaces[3].battlegear} selectCard={this.selectCard} />
+          </div>
+        </div>
+        <div className="r3">
+          <div className="space">
+            <Space id={"c4"} cards={this.spaces[4].creatures} selectCard={this.selectCard} />
+            <Space id={"b4"} cards={this.spaces[4].battlegear} selectCard={this.selectCard} />
+          </div>
+          <div className="space">
+            <Space id={"c5"} cards={this.spaces[5].creatures} selectCard={this.selectCard} />
+            <Space id={"b5"} cards={this.spaces[5].battlegear} selectCard={this.selectCard} />
+          </div>
+          <div className="space">
+            <Space id={"c6"} cards={this.spaces[6].creatures} selectCard={this.selectCard} />
+            <Space id={"b6"} cards={this.spaces[6].battlegear} selectCard={this.selectCard} />
+          </div>
+        </div>
+        <div className="r4">
+          <div className="space">
+            <Space id={"c7"} cards={this.spaces[7].creatures} selectCard={this.selectCard} />
+            <Space id={"b7"} cards={this.spaces[7].battlegear} selectCard={this.selectCard} />
+          </div>
+          <div className="space">
+            <Space id={"c8"} cards={this.spaces[8].creatures} selectCard={this.selectCard} />
+            <Space id={"b8"} cards={this.spaces[8].battlegear} selectCard={this.selectCard} />
+          </div>
+          <div className="space">
+            <Space id={"c9"} cards={this.spaces[9].creatures} selectCard={this.selectCard} />
+            <Space id={"b9"} cards={this.spaces[9].battlegear} selectCard={this.selectCard} />
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+
+@inject((stores, props, context) => props) @observer
+class Space extends React.Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    if (this.props.cards[0].card) {
+      return (
+        <img id={this.props.id} onClick={this.props.selectCard.bind(this)} 
+          className={(this.props.cards[0].selected ? "selected" : "") + " " 
+            + (this.props.cards[0].selectable ? "selectable" : "")}
+          src={API.base_image + this.props.cards[0].card.gsx$image} 
+        />
+      );
+    }
+    else {
+      return (
+        <img id={this.props.id} onClick={this.props.selectCard.bind(this)}
+          className={(this.props.cards[0].selectable ? "selectable" : "")}
+        />
+      );
+    }
+  }
+}
diff --git a/src/scss/play.scss b/src/scss/play.scss
new file mode 100644
index 0000000..1a1fc93
--- /dev/null
+++ b/src/scss/play.scss
@@ -0,0 +1,122 @@
+@import 'base';
+
+.play {
+	$margin_offset: 45;
+	$card_width: calc(350px / 2);
+	$card_height: calc(250px / 2);
+
+	height: 50em;
+
+	.space {
+		position: absolute;
+		background-color: grey;
+		width: calc(#{$card_width} + 20px);
+		height: #{$card_height};		
+		border: 1px solid #36a8ff;
+
+		img:hover, img.selected {
+
+		}
+
+		img.selectable:hover, img.selected {
+			// border: 1px solid #f41111;
+			box-shadow: 5px 5px 5px red, -5px 5px 5px red, 5px -5px 5px red, -5px -5px 5px red;
+			border-radius: 10px;
+			z-index: 11;
+		}
+
+		img {
+			display: block;
+			width: #{$card_height};
+			height: #{$card_width};
+			transform: rotate(90deg);
+		}
+
+		:first-child {
+			position: inherit;
+			z-index: 10;
+		}
+
+		:nth-child(2) {
+			position: relative;
+			z-index: 9;
+		}
+
+	}
+
+	.r1 {
+		:first-child{
+			top: 50%;
+		}
+		.space {
+			left: calc(#{$margin_offset+px} + 5px);
+			:first-child {
+				margin: -87px 25px;
+			}
+			:nth-child(2) {
+				margin: -25px 45px;
+			}
+		}
+	}
+
+	.r2 {
+		.space {
+			left: calc(#{$margin_offset+px} + #{$card_width} + 25px + 10px);
+			:first-child {
+				margin: -77px 25px;
+			}
+			:nth-child(2) {
+				margin: -97px 45px;
+			}
+		}
+		:first-child {
+			top: 42%;
+		}
+		:nth-child(2) {
+			top: 58%;
+		}
+	}
+
+	.r3 {
+		.space {
+			left: calc(#{$margin_offset+px} + (#{$card_width} + 25px + 10px)*2);
+			:first-child {
+				margin: -67px 25px;
+			}
+			:nth-child(2) {
+				margin: -87px 45px;
+			}
+		}
+		:first-child {
+			top: 33.3%;
+		}
+		:nth-child(2) {
+			top: 50%;
+		}
+		:nth-child(3) {
+			top: 66.6%;
+		}
+	}
+
+	.r4 {
+		.space {
+			left: calc(#{$margin_offset+px} + (#{$card_width} + 25px + 10px)*3);
+			:first-child {
+				margin: -67px 45px;
+			}
+			:nth-child(2) {
+				margin: -87px 25px;
+			}
+		}
+		:first-child {
+			top: 33.3%;
+		}
+		:nth-child(2) {
+			top: 50%;
+		}
+		:nth-child(3) {
+			top: 66.6%;
+		}
+	}
+
+}