diff --git a/client/src/components/join.jsx b/client/src/components/join.jsx
new file mode 100644
index 00000000..c77ebc39
--- /dev/null
+++ b/client/src/components/join.jsx
@@ -0,0 +1,50 @@
+const preact = require('preact');
+const { connect } = require('preact-redux');
+
+const addState = connect(
+    function receiveState(state) {
+        const { ws } = state;
+
+        function sendInstancePractice() {
+            ws.sendInstancePractice();
+        }
+
+        function sendInstanceQueue() {
+            ws.sendInstanceQueue();
+        }
+
+        return {
+            sendInstanceQueue,
+            sendInstancePractice,
+        };
+    }
+);
+
+function JoinButtons(args) {
+    const {
+        sendInstanceQueue,
+        sendInstancePractice,
+    } = args;
+
+    return (
+        <div class="join">
+            <h1>Join Game</h1>
+            <div class="buttons">
+                <button
+                    class='practice'
+                    onClick={() => sendInstancePractice()}
+                    type="submit">
+                    Practice vs CPU
+                </button>
+                <button
+                    class='pvp'
+                    onClick={() => sendInstanceQueue()}
+                    type="submit">
+                    PVP
+                </button>
+            </div>
+        </div>
+    );
+}
+
+module.exports = addState(JoinButtons);
diff --git a/client/src/components/play.jsx b/client/src/components/play.jsx
new file mode 100644
index 00000000..13fa2adb
--- /dev/null
+++ b/client/src/components/play.jsx
@@ -0,0 +1,121 @@
+const { connect } = require('preact-redux');
+const preact = require('preact');
+
+const { stringSort } = require('./../utils');
+const { ConstructAvatar } = require('./construct');
+const actions = require('./../actions');
+const Join = require('./join');
+const Inventory = require('./inventory');
+
+const idSort = stringSort('id');
+
+const addState = connect(
+    function receiveState(state) {
+        const {
+            ws,
+            constructs,
+            constructRename,
+            team,
+            mtxActive,
+        } = state;
+
+        function sendInstancePractice() {
+            return ws.sendInstancePractice();
+        }
+
+        function sendConstructAvatarReroll(id) {
+            console.log('using', mtxActive, 'on', id);
+            return ws.sendMtxApply(id, mtxActive, '');
+        }
+
+        function sendConstructRename(id, name) {
+            ws.sendMtxApply(id, 'Rename', name);
+        }
+
+        return {
+            constructs,
+            mtxActive,
+            constructRename,
+            team,
+            sendConstructRename,
+            sendInstancePractice,
+            sendConstructAvatarReroll,
+        };
+    },
+
+    function receiveDispatch(dispatch) {
+        function setConstructRename(id) {
+            dispatch(actions.setConstructRename(id));
+        }
+
+        function clearMtxRename() {
+            dispatch(actions.setConstructRename(null));
+            dispatch(actions.setMtxActive(null));
+        }
+
+        return {
+            clearMtxRename,
+            setConstructRename,
+        };
+    }
+
+);
+
+function Play(args) {
+    const {
+        team,
+        constructRename,
+        clearMtxRename,
+        setConstructRename,
+        sendConstructRename,
+        mtxActive,
+        sendConstructAvatarReroll,
+    } = args;
+
+    const constructPanels = team
+        .map(construct => {
+            const constructName = constructRename === construct.id
+                ? <input id='renameInput' type="text" style="text-align: center" placeholder="enter a new name"></input>
+                : <h2>{construct.name}</h2>;
+
+            const confirm = constructRename === construct.id
+                ? <button onClick={() => sendConstructRename(construct.id, document.getElementById('renameInput').value)}>
+                    Confirm
+                </button>
+                : false;
+
+            const cancel = constructRename === construct.id
+                ? <button onClick={() => clearMtxRename()}>
+                    Cancel
+                </button>
+                : false;
+            return (
+                <div
+                    key={construct.id}
+                    style={ mtxActive ? { cursor: 'pointer' } : {}}
+                    onClick={() => {
+                        if (!mtxActive) return false;
+                        if (mtxActive === 'Rename') return setConstructRename(construct.id);
+                        return sendConstructAvatarReroll(construct.id);
+                    }}
+                    class="menu-construct" >
+                    <ConstructAvatar construct={construct} />
+                    {constructName}
+                    {confirm}
+                    {cancel}
+                </div>
+            );
+        });
+
+    return (
+        <main class="play">
+            <div class="team">
+                {constructPanels}
+            </div>
+            <Inventory />
+            <Join />
+        </main>
+    );
+}
+
+module.exports = addState(Play);
diff --git a/server/src/account.rs b/server/src/account.rs
index 009ba195..16833c3a 100644
--- a/server/src/account.rs
+++ b/server/src/account.rs
@@ -296,7 +296,7 @@ pub fn constructs(tx: &mut Transaction, account: &Account) -> Result<Vec<Constru
     return Ok(constructs);
 }
 
-pub fn account_team(tx: &mut Transaction, account: &Account) -> Result<Vec<Construct>, Error> {
+pub fn team(tx: &mut Transaction, account: &Account) -> Result<Vec<Construct>, Error> {
     let query = "
         SELECT data
         FROM constructs
@@ -350,7 +350,7 @@ pub fn set_team(tx: &mut Transaction, account: &Account, ids: Vec<Uuid>) -> Resu
     let _updated = tx
         .execute(query, &[&account.id, &ids])?;
 
-    account_team(tx, account)
+    team(tx, account)
 }
 
 pub fn account_instances(tx: &mut Transaction, account: &Account) -> Result<Vec<Instance>, Error> {
diff --git a/server/src/instance.rs b/server/src/instance.rs
index e6c7ad11..bfe6420b 100644
--- a/server/src/instance.rs
+++ b/server/src/instance.rs
@@ -676,7 +676,7 @@ pub fn instance_practice(tx: &mut Transaction, account: &Account) -> Result<Inst
         .set_time_control(TimeControl::Practice)
         .set_name(bot.name.clone())?;
 
-    let constructs = account::account_team(tx, account)?;
+    let constructs = account::team(tx, account)?;
     let player = Player::new(account.id, &account.name, constructs);
 
     instance.add_player(player.clone())?;
@@ -700,7 +700,7 @@ pub fn pvp(tx: &mut Transaction, a: &Account, b: &Account) -> Result<Instance, E
     instance = instance_create(tx, instance)?;
 
     for account in [a, b].iter() {
-        let constructs = account::account_team(tx, account)?;
+        let constructs = account::team(tx, account)?;
         let player = player_create(tx, Player::new(account.id, &account.name, constructs), instance.id, account)?;
         instance.add_player(player)?;
     }
diff --git a/server/src/mtx.rs b/server/src/mtx.rs
index 41f95601..81aeadbe 100644
--- a/server/src/mtx.rs
+++ b/server/src/mtx.rs
@@ -159,7 +159,7 @@ pub fn apply(tx: &mut Transaction, account: &Account, variant: MtxVariant, const
     };
 
     construct_write(tx, construct)?;
-    account::constructs(tx, account)
+    account::team(tx, account)
 }
 
 pub fn select(tx: &mut Transaction, variant: MtxVariant, account: Uuid) -> Result<Mtx, Error> {
diff --git a/server/src/rpc.rs b/server/src/rpc.rs
index 1316d78f..6c4594de 100644
--- a/server/src/rpc.rs
+++ b/server/src/rpc.rs
@@ -237,7 +237,7 @@ impl Handler for Connection {
             let shop = mtx::account_shop(&mut tx, &a).unwrap();
             self.ws.send(RpcMessage::AccountShop(shop)).unwrap();
 
-            let team = account::account_team(&mut tx, &a).unwrap();
+            let team = account::team(&mut tx, &a).unwrap();
             self.ws.send(RpcMessage::AccountTeam(team)).unwrap();
 
             // tx should do nothing