diff --git a/client/src/components/battle.cryp.card.jsx b/client/src/components/battle.cryp.card.jsx
deleted file mode 100644
index 19d63c92..00000000
--- a/client/src/components/battle.cryp.card.jsx
+++ /dev/null
@@ -1,40 +0,0 @@
-const preact = require('preact');
-
-function CrypCard(cryp) {
-    return (
-        <div key={cryp.id}
-            className="tile is-vertical box"
-            style={activeItem ? { cursor: 'pointer' } : {}}
-            onClick={() => sendItemUse(cryp.id)} >
-            <div className="tile is-child">
-                <div className="columns" >
-                    <div className="column is-10">
-                        <p className="title">{cryp.name}</p>
-                        <p className="subtitle">Level {cryp.lvl}</p>
-                    </div>
-                    <div className="column">
-                        <figure className="image">
-                            <svg width="40" height="40" data-jdenticon-value={cryp.name} />
-                        </figure>
-                    </div>
-
-                </div>
-                <div className="has-text-centered">{cryp.hp.value} / {cryp.stam.value} HP </div>
-                <progress className="progress is-dark" value={cryp.hp.value} max={cryp.stam.value}></progress>
-
-                <div className="has-text-centered">{cryp.xp} / {Math.pow(2, cryp.lvl + 1)} XP </div>
-                <progress className="progress is-dark" value={cryp.xp} max={Math.pow(2, cryp.lvl + 1)}></progress>
-
-            </div>
-            <button
-                className="button is-dark"
-                type="submit"
-                disabled={cryp.hp.value === 0}
-                onClick={() => sendGamePve(cryp.id)}>
-                Start PVE
-            </button>
-        </div>
-    );
-}
-
-module.exports = CrypCard;
diff --git a/client/src/components/body.component.jsx b/client/src/components/body.component.jsx
deleted file mode 100755
index bf3287c5..00000000
--- a/client/src/components/body.component.jsx
+++ /dev/null
@@ -1,72 +0,0 @@
-// eslint-disable-next-line
-const preact = require('preact');
-const { connect } = require('preact-redux');
-const actions = require('../actions');
-
-const ItemListContainer = require('./item.list.container');
-const CrypSpawnContainer = require('./cryp.spawn.container');
-const GameJoinButton = require('./game.join.button');
-const CrypListContainer = require('./cryp.list.container');
-const GameContainer = require('./game.container');
-const Passives = require('./passive.container');
-
-const addState = connect(
-    (state) => {
-        const { game, ws } = state;
-        if (!game) {
-            ws.clearGameStateInterval();
-        }
-        return state;
-    },
-    (dispatch) => {
-        function setGame(game) {
-            dispatch(actions.setGame(game));
-        }
-        return { setGame };
-    }
-);
-
-function renderBody(props) {
-    const { game, setGame, account } = props;
-    if (game) {
-        return (
-            <div>
-                <GameContainer />
-                <button
-                    className="button is-dark is-fullwidth"
-                    type="submit"
-                    onClick={() => setGame(null)}
-                >
-                Return to Main Menu
-                </button>
-            </div>
-        );
-    }
-    if (account) {
-        return (
-            <section className="columns">
-                <div className="column is-4">
-                    <div className="column">
-                        <GameJoinButton />
-                        <CrypSpawnContainer />
-                    </div>
-                    <div className="column">
-                        <div className="columns">
-                            <div className="column is-8">
-                                <CrypListContainer />
-                            </div>
-                            <div className="column">
-                                <ItemListContainer />
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div className ="column">
-                    <Passives />
-                </div>
-            </section>
-        );
-    } return <div>not ready</div>;
-}
-
-module.exports = addState(renderBody);
diff --git a/client/src/components/cryp.list.container.js b/client/src/components/cryp.list.container.js
deleted file mode 100755
index e1f4a5cf..00000000
--- a/client/src/components/cryp.list.container.js
+++ /dev/null
@@ -1,29 +0,0 @@
-const { connect } = require('preact-redux');
-
-const CrypList = require('./cryp.list');
-
-const addState = connect(
-    function receiveState(state) {
-        const { ws, cryps, activeItem } = state;
-        function sendGamePve(crypId) {
-            return ws.sendGamePve(crypId);
-        }
-
-        function sendGamePvp(crypIds) {
-            return ws.sendGamePvp(crypIds);
-        }
-
-        function sendItemUse(targetId) {
-            if (activeItem) {
-                return ws.sendItemUse(activeItem, targetId);
-            }
-            return false;
-        }
-
-        return {
-            cryps, sendGamePve, sendGamePvp, activeItem, sendItemUse,
-        };
-    }
-);
-
-module.exports = addState(CrypList);
diff --git a/client/src/components/cryp.list.jsx b/client/src/components/cryp.list.jsx
deleted file mode 100755
index a3f094ff..00000000
--- a/client/src/components/cryp.list.jsx
+++ /dev/null
@@ -1,62 +0,0 @@
-const preact = require('preact');
-
-const { stringSort } = require('./../utils');
-
-const nameSort = stringSort('name');
-
-function CrypList({
-    cryps, activeItem, sendGamePve, sendGamePvp, sendItemUse,
-}) {
-    if (!cryps) return <div>not ready</div>;
-    const crypPanels = cryps.sort(nameSort).map(cryp => (
-
-        <div key={cryp.id}
-            className="tile is-vertical"
-            style={activeItem ? { cursor: 'pointer' } : {}}
-            onClick={() => sendItemUse(cryp.id)} >
-            <div className="tile is-child">
-                <div className="columns" >
-                    <div className="column is-10">
-                        <p className="title">{cryp.name}</p>
-                        <p className="subtitle">Level {cryp.lvl}</p>
-                    </div>
-                    <div className="column">
-                        <figure className="image">
-                            <svg width="40" height="40" data-jdenticon-value={cryp.name} />
-                        </figure>
-                    </div>
-
-                </div>
-                <div className="has-text-centered">{cryp.hp.value} / {cryp.stamina.value} HP </div>
-                <progress className="progress is-dark" value={cryp.hp.value} max={cryp.stamina.value}></progress>
-
-                <div className="has-text-centered">{cryp.xp} / {Math.pow(2, cryp.lvl + 1)} XP </div>
-                <progress className="progress is-dark" value={cryp.xp} max={Math.pow(2, cryp.lvl + 1)}></progress>
-
-            </div>
-            <button
-                className="button is-dark"
-                type="submit"
-                disabled={cryp.hp.value === 0}
-                onClick={() => sendGamePve(cryp.id)}>
-                Start PVE
-            </button>
-
-            <button
-                className="button is-dark"
-                type="submit"
-                disabled={cryp.hp.value === 0}
-                onClick={() => sendGamePvp([cryp.id])}>
-                PVP
-            </button>
-
-        </div>
-    ));
-    return (
-        <div className="tile is-parent is-vertical" >
-            {crypPanels}
-        </div>
-    );
-}
-
-module.exports = CrypList;
diff --git a/client/src/components/cryp.panel.jsx b/client/src/components/cryp.panel.jsx
deleted file mode 100644
index f9324eb7..00000000
--- a/client/src/components/cryp.panel.jsx
+++ /dev/null
@@ -1,37 +0,0 @@
-const preact = require('preact');
-
-function renderCrypPanel(cryp) {
-    return (
-        <div className="tile">
-            <div className="tile is-vertical is-child">
-                <div className="columns">
-                    <div className ="column has-text-right">
-                        <figure className="image">
-                            <svg width="160" height="160" data-jdenticon-value="Drake" />
-                        </figure>
-                    </div>
-                    <div className="column">
-                        <div className="columns">
-                            <div className="column has-text-left">
-                                <p className="title">Drake</p>
-                                <p className="subtitle">Level 1</p>
-                            </div>
-                            <div className="column has-text-centered">
-                                <p>Flying</p>
-                                <p>Fire</p>
-                                <p>Stone</p>
-                            </div>
-                            <div className="column has-text-centered">
-                                <ul> <i className="fas fa-bomb" /> 5 </ul>
-                                <ul> <i className="fas fa-walking" /> 5 </ul>
-                                <ul> <i className="fas fa-shield-alt" /> 5 </ul>
-                            </div>
-                        </div>
-                        <div className="has-text-centered">5 / 5 HP </div>
-                        <progress className="progress is-dark" value="5" max="5"></progress>
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-}
diff --git a/client/src/components/cryp.spawn.button.jsx b/client/src/components/cryp.spawn.button.jsx
deleted file mode 100644
index 3e454fac..00000000
--- a/client/src/components/cryp.spawn.button.jsx
+++ /dev/null
@@ -1,30 +0,0 @@
-const preact = require('preact');
-
-function renderSpawnButton({ account, sendCrypSpawn }) {
-    let name = '';
-
-    if (!account) return <div>...</div>;
-
-    return (
-        <div className="columns">
-            <div className="column">
-                <input
-                    className="input"
-                    type="email"
-                    placeholder="cryp name"
-                    onChange={e => (name = e.target.value)}
-                />
-            </div>
-            <div className="column is-4">
-                <button
-                    className="button is-dark is-fullwidth"
-                    type="submit"
-                    onClick={() => sendCrypSpawn(name)}>
-                    Spawn 👾
-                </button>
-            </div>
-        </div>
-    );
-}
-
-module.exports = renderSpawnButton;
diff --git a/client/src/components/cryp.spawn.container.js b/client/src/components/cryp.spawn.container.js
deleted file mode 100644
index 7dd8bfac..00000000
--- a/client/src/components/cryp.spawn.container.js
+++ /dev/null
@@ -1,16 +0,0 @@
-const { connect } = require('preact-redux');
-
-const CrypSpawnButton = require('./cryp.spawn.button');
-
-const addState = connect(
-    function receiveState(state) {
-        const { ws } = state;
-        function sendCrypSpawn(name) {
-            return ws.sendCrypSpawn(name);
-        }
-
-        return { account: state.account, sendCrypSpawn };
-    }
-);
-
-module.exports = addState(CrypSpawnButton);
diff --git a/client/src/components/game.container.js b/client/src/components/game.container.js
deleted file mode 100644
index 8adac3fd..00000000
--- a/client/src/components/game.container.js
+++ /dev/null
@@ -1,48 +0,0 @@
-const { connect } = require('preact-redux');
-
-const actions = require('../actions');
-
-const Game = require('./game');
-
-const addState = connect(
-    function receiveState(state) {
-        const { ws, game, account, activeSkill, activeIncoming } = state;
-
-        function selectSkillTarget(targetTeamId) {
-            if (activeSkill) {
-                return ws.sendGameSkill(game.id, activeSkill.crypId, targetTeamId, activeSkill.skill.skill);
-            }
-            return false;
-        }
-
-        // intercept self casting skills
-        if (activeSkill && activeSkill.skill.self_targeting) {
-            ws.sendGameSkill(game.id, activeSkill.crypId, null, activeSkill.skill.skill);
-        }
-
-        function selectIncomingTarget(crypId) {
-            if (activeIncoming) {
-                return ws.sendGameTarget(game.id, crypId, activeIncoming);
-            }
-            return false;
-        }
-
-        return { game, account, activeSkill, activeIncoming, selectSkillTarget, selectIncomingTarget };
-    },
-
-    function receiveDispatch(dispatch) {
-        function setActiveSkill(crypId, skill) {
-            dispatch(actions.setActiveSkill(crypId, skill));
-        }
-
-        function setActiveIncoming(skillId) {
-            dispatch(actions.setActiveIncoming(skillId));
-        }
-
-
-        return { setActiveSkill, setActiveIncoming };
-    }
-
-);
-
-module.exports = addState(Game);
diff --git a/client/src/components/game.join.button.jsx b/client/src/components/game.join.button.jsx
deleted file mode 100644
index 35c56555..00000000
--- a/client/src/components/game.join.button.jsx
+++ /dev/null
@@ -1,42 +0,0 @@
-const preact = require('preact');
-const { connect } = require('preact-redux');
-
-const addState = connect(
-    (state) => {
-        const { ws, cryps } = state;
-        function sendGameJoin(gameId) {
-            return ws.sendGameJoin(gameId, [cryps[0].id]);
-        }
-
-        return { account: state.account, sendGameJoin };
-    },
-);
-
-function GameJoinButton({ account, sendGameJoin }) {
-    let gameId = '';
-
-    if (!account) return <div>...</div>;
-
-    return (
-        <div className="columns">
-            <div className="column">
-                <input
-                    className="input"
-                    type="text"
-                    placeholder="gameId"
-                    onChange={e => (gameId = e.target.value)}
-                />
-            </div>
-            <div className="column is-4">
-                <button
-                    className="button is-dark is-fullwidth"
-                    type="submit"
-                    onClick={() => sendGameJoin(gameId)}>
-                    Join Game
-                </button>
-            </div>
-        </div>
-    );
-}
-
-module.exports = addState(GameJoinButton);
diff --git a/client/src/components/game.jsx b/client/src/components/game.jsx
deleted file mode 100755
index c1944f18..00000000
--- a/client/src/components/game.jsx
+++ /dev/null
@@ -1,188 +0,0 @@
-const preact = require('preact');
-const key = require('keymaster');
-const Phaser = require('./phaser.container');
-const SKILL_HOT_KEYS = ['Q', 'W', 'E', 'R'];
-
-function GamePanel(props) {
-    const {
-        game,
-        activeSkill,
-        activeIncoming,
-        setActiveSkill,
-        setActiveIncoming,
-        selectSkillTarget,
-        selectIncomingTarget,
-        account,
-    } = props;
-
-    if (!game) return <div>...</div>;
-
-    const otherTeams = game.teams.filter(t => t.id !== account.id);
-
-    const playerTeam = game.teams.find(t => t.id === account.id);
-
-    const incoming = game.stack.filter(s => s.target_team_id === playerTeam.id).map((inc) => {
-        key.unbind('1');
-        key('1', () => setActiveIncoming(inc.id));
-        return (
-            <div className="tile is-child" key={inc.id}>
-                <div>{JSON.stringify(inc)}</div>
-                <button
-                    className="button is-dark is-fullwidth"
-                    type="submit"
-                    onClick={() => setActiveIncoming(inc.id)}>
-                    (1) Block skill: {inc.skill}
-                </button>
-            </div>
-        );
-    });
-
-    function PlayerCrypCard(cryp) {
-        const skills = cryp.skills.map((skill, i) => {
-            const hotkey = SKILL_HOT_KEYS[i];
-            key.unbind(hotkey);
-            key(hotkey, () => setActiveSkill(cryp.id, skill));
-
-            return (
-                <button
-                    key={i}
-                    className="button is-dark"
-                    type="submit"
-                    onClick={() => setActiveSkill(cryp.id, skill)}
-                >
-                    ({hotkey}) {skill.skill} {skill.cd && `(${skill.cd}T)`}
-                </button>
-            );
-        });
-
-        const effects = cryp.effects.map((effect, i) => (
-            <div key={i}>{effect} for {effect.turns}T</div>
-        ));
-
-        return (
-            <div
-                key={cryp.id}
-                style={ activeIncoming ? { cursor: 'pointer' } : {}}
-                onClick={() => selectIncomingTarget(cryp.id)}
-                className="tile is-vertical">
-                <div className="tile is-child">
-                    <div className="columns" >
-                        <div className="column is-10">
-                            <p className="title">{cryp.name}</p>
-                            <p className="subtitle">Level {cryp.lvl}</p>
-                        </div>
-                        <div className="column">
-                            <figure className="image">
-                                <svg width="40" height="40" data-jdenticon-value={cryp.name} />
-                            </figure>
-                        </div>
-
-                    </div>
-                    <div className="has-text-centered">{cryp.hp.value} / {cryp.stamina.value} HP </div>
-                    <progress className="progress is-dark" value={cryp.hp.value} max={cryp.stamina.value}></progress>
-
-                    <div className="has-text-centered">{cryp.xp} / {Math.pow(2, cryp.lvl + 1)} XP </div>
-                    <progress className="progress is-dark" value={cryp.xp} max={Math.pow(2, cryp.lvl + 1)}></progress>
-                </div>
-                {effects}
-                {skills}
-            </div>
-        );
-    }
-
-    function PlayerTeam(team) {
-        const cryps = team.cryps.map(c => PlayerCrypCard(c, setActiveSkill));
-
-        return (
-            <div className="tile">
-                {cryps}
-            </div>
-        );
-    }
-
-    function OpponentCrypCard(cryp) {
-        const effects = cryp.effects.map((effect, i) => (
-            <div key={i}>{effect.effect} for {effect.turns}T</div>
-        ));
-
-        return (
-            <div key={cryp.id} className="tile is-vertical">
-                <div className="tile is-child">
-                    <div className="columns" >
-                        <div className="column is-10">
-                            <p className="title">{cryp.name}</p>
-                            <p className="subtitle">Level {cryp.lvl}</p>
-                        </div>
-                        <div className="column">
-                            <figure className="image">
-                                <svg width="40" height="40" data-jdenticon-value={cryp.name} />
-                            </figure>
-                        </div>
-
-                    </div>
-                    <div className="has-text-centered">{cryp.hp.value} / {cryp.stamina.value} HP </div>
-                    <progress className="progress is-dark" value={cryp.hp.value} max={cryp.stamina.value}></progress>
-
-                    <div className="has-text-centered">{cryp.xp} / {Math.pow(2, cryp.lvl + 1)} XP </div>
-                    <progress className="progress is-dark" value={cryp.xp} max={Math.pow(2, cryp.lvl + 1)}></progress>
-
-                </div>
-                {effects}
-            </div>
-        );
-    }
-
-    function OpponentTeam(team) {
-        const cryps = team.cryps.map(OpponentCrypCard);
-        return (
-            <div
-                className="tile"
-                style={activeSkill ? { cursor: 'pointer' } : {}}
-                onClick={() => selectSkillTarget(team.id)} >
-                {cryps}
-            </div>
-        );
-    }
-
-    // style={{ "min-height": "100%" }}
-    function phaseText(phase) {
-        switch (phase) {
-            case 'Skill':
-                return 'Choose abilities';
-            case 'Target':
-                return 'Block abilities';
-            case 'Finish':
-                return 'Game over';
-        }
-    }
-
-    const logs = game.log.reverse().map((l, i) => (<div key={i}>{l}</div>));
-
-    return (
-        <section className="columns">
-            <div className="column is-1">
-            </div>
-            <div className="column is-6">
-                <Phaser />
-                <section className="columns">
-                    <div className="column is-6">
-                        {PlayerTeam(playerTeam, setActiveSkill)}
-                    </div>            
-                    <div className="column is-6">
-                        <div>
-                            {otherTeams.map(OpponentTeam)}
-                        </div>
-                        <div>
-                            {incoming}
-                        </div>
-                    </div>
-                </section>
-            </div>
-            <div className="column is-2">
-                <div className="title is-4">{logs}</div>
-            </div>
-        </section>
-    )
-}
-
-module.exports = GamePanel;
diff --git a/client/src/components/header.component.jsx b/client/src/components/header.component.jsx
deleted file mode 100644
index 78f50ebe..00000000
--- a/client/src/components/header.component.jsx
+++ /dev/null
@@ -1,19 +0,0 @@
-// eslint-disable-next-line
-const preact = require('preact');
-
-const LoginContainer = require('./login.container');
-
-function renderHeader() {
-    return (
-        <section className="hero is-dark">
-            <div className="hero-body">
-                <div className="container">
-                    <h1 className="title">cryps.gg</h1>
-                    <LoginContainer />
-                </div>
-            </div>
-        </section>
-    );
-}
-
-module.exports = renderHeader;
diff --git a/client/src/components/item.list.container.js b/client/src/components/item.list.container.js
deleted file mode 100644
index bfa8731d..00000000
--- a/client/src/components/item.list.container.js
+++ /dev/null
@@ -1,20 +0,0 @@
-const { connect } = require('preact-redux');
-const actions = require('../actions');
-
-const ItemList = require('./item.list');
-
-const addState = connect(
-    function receiveState(state) {
-        const { items } = state;
-        return { items };
-    },
-    function receiveDispatch(dispatch) {
-        function setActiveItem(id) {
-            dispatch(actions.setActiveItem(id))
-        }
-
-        return { setActiveItem };
-    }
-);
-
-module.exports = addState(ItemList);
diff --git a/client/src/components/item.list.jsx b/client/src/components/item.list.jsx
deleted file mode 100644
index b003b5b8..00000000
--- a/client/src/components/item.list.jsx
+++ /dev/null
@@ -1,37 +0,0 @@
-// eslint-disable-next-line
-const preact = require('preact');
-
-function ItemList({ items, setActiveItem }) {
-    if (!items) return <div>...</div>;
-    const itemPanels = items.map(item => (
-
-        <div key={item.id} className="tile is-parent is-vertical">
-            <div className="tile is-vertical is-child">
-                <div className="columns" >
-                    <div className="column is-8">
-                        <p className="title">{item.action}</p>
-                        <p className="subtitle">∞</p>
-                    </div>
-                    <div className="column">
-                        <figure className="image">
-                            <svg width="40" height="40" data-jdenticon-value={item.action} />
-                        </figure>
-                    </div>
-                </div>
-            </div>
-            <button
-                className="button is-dark"
-                type="submit"
-                onClick={() => setActiveItem(item.id)}>
-                Use
-            </button>
-        </div>
-    ));
-    return (
-        <div>
-            {itemPanels}
-        </div>
-    );
-}
-
-module.exports = ItemList;
diff --git a/client/src/components/login.component.jsx b/client/src/components/login.component.jsx
deleted file mode 100755
index 2e0a3e62..00000000
--- a/client/src/components/login.component.jsx
+++ /dev/null
@@ -1,69 +0,0 @@
-// eslint-disable-next-line
-const preact = require('preact');
-
-function renderLogin({ account, submitLogin, submitRegister }) {
-    if (account) return <div>{JSON.stringify(account)}</div>;
-
-    const details = {
-        name: '',
-        password: '',
-    };
-
-    return (
-        <div>
-            <div className="field">
-                <p className="control has-icons-left has-icons-right">
-                    <input
-                        className="input"
-                        type="email"
-                        placeholder="Email"
-                        onChange={e => (details.name = e.target.value)}
-                    />
-                    <span className="icon is-small is-left">
-                        <i className="fas fa-user" />
-                    </span>
-                    <span className="icon is-small is-right">
-                        <i className="fas fa-check" />
-                    </span>
-                </p>
-            </div>
-            <div className="field">
-                <p className="control has-icons-left">
-                    <input
-                        className="input"
-                        type="password"
-                        placeholder="Password"
-                        onChange={e => (details.password = e.target.value)}
-                    />
-                    <span className="icon is-small is-left">
-                        <i className="fas fa-lock" />
-                    </span>
-                </p>
-            </div>
-            <div className="field">
-                <p className="control">
-                    <button
-                        className="button inverted"
-                        type="submit"
-                        onClick={() => submitLogin('ntr', 'grepgrepgrep')}>
-                        Default
-                    </button>
-                    <button
-                        className="button inverted"
-                        type="submit"
-                        onClick={() => submitLogin(details.name, details.password)}>
-                        Login
-                    </button>
-                    <button
-                        className="button inverted"
-                        type="submit"
-                        onClick={() => submitRegister(details.name, details.password)}>
-                        Register
-                    </button>
-                </p>
-            </div>
-        </div>
-    );
-}
-
-module.exports = renderLogin;
diff --git a/client/src/components/login.container.jsx b/client/src/components/login.container.jsx
deleted file mode 100755
index d299732d..00000000
--- a/client/src/components/login.container.jsx
+++ /dev/null
@@ -1,18 +0,0 @@
-const { connect } = require('preact-redux');
-
-const Login = require('./login.component');
-
-const addState = connect(
-    (state) => {
-        const { ws } = state;
-        function submitLogin(name, password) {
-            return ws.sendAccountLogin(name, password);
-        }
-        function submitRegister(name, password) {
-            return ws.sendAccountRegister(name, password);
-        }
-        return { account: state.account, submitLogin, submitRegister };
-    },
-);
-
-module.exports = addState(Login);
diff --git a/client/src/components/navbar.jsx b/client/src/components/navbar.jsx
deleted file mode 100644
index d45dc8e8..00000000
--- a/client/src/components/navbar.jsx
+++ /dev/null
@@ -1,47 +0,0 @@
-const preact = require('preact');
-
-// components all the way down
-const Icon = name => (
-    <span>
-        {name}
-        <svg width="80" height="80" data-jdenticon-value={name} />
-    </span>
-);
-
-// the css attribute name `class` is reserved in js
-// so in react you have to call it `className`
-function Navbar() {
-    const NAMES = ['Mashy', 'ntr'];
-
-    return (
-        <div>
-            <nav className="navbar">
-                <div className="navbar-end">
-                    <a href="/somewhere" className="navbar-item is-active">
-                        Home
-                    </a>
-                    <a href="/somewhere" className="navbar-item">
-                        Store
-                    </a>
-                    <a href="/somewhere" className="navbar-item">
-                        FAQ
-                    </a>
-                    <span className="navbar-item">
-                        <a href="/somewhere" className="button is-info is-inverted">
-                            <span className="icon">
-                                <svg width="80" height="80" data-jdenticon-value="Blog" />
-                            </span>
-                            <span>Blog</span>
-                        </a>
-                    </span>
-                </div>
-            </nav>
-            {NAMES.map(Icon)}
-        </div>
-    );
-    // map is a function that is called on every element of an array
-    // so in this ^^ case it calls Icon('Mashy') which returns some jsx
-    // that gets put into the dom
-}
-
-module.exports = Navbar;
diff --git a/client/src/components/passive.container.jsx b/client/src/components/passive.container.jsx
deleted file mode 100755
index f0fd037a..00000000
--- a/client/src/components/passive.container.jsx
+++ /dev/null
@@ -1,56 +0,0 @@
-const preact = require('preact');
-const { connect } = require('preact-redux');
-const Phaser = require('phaser');
-const PhaserPassives = require('./passive.phaser');
-
-const addState = connect(
-    function receiveState(state) {
-        const {
-            game, account,
-        } = state;
-        return {
-            game, account,
-        };
-    }
-);
-
-class PhaserInstance extends preact.Component {
-    constructor(props) {
-        super(props);
-        this.props = props;
-    }
-
-    componentWillReceiveProps(nextProps) {
-        // code here will update passive allocation from state
-    }
-
-    componentDidMount() {
-    // now mounted, can freely modify the DOM:
-        this.PhaserPassives = new PhaserPassives();
-        const config = {
-            type: Phaser.DOM.FILL,
-            width: 1200,
-            height: 900,
-            parent: 'passives',
-            physics: {
-                default: 'arcade',
-                arcade: {
-                    gravity: { y: 0 },
-                },
-            },
-            scene: this.PhaserPassives,
-        };
-        const game = new Phaser.Game(config);
-        game.canvas.addEventListener('mousedown', () => this.PhaserPassives.camPan(true));
-        game.canvas.addEventListener('mouseup', () => this.PhaserPassives.camPan(false));
-
-    }
-
-    render() {
-        return (
-            <div id="passives" style="overflow: hidden;">
-            </div>
-        );
-    }
-}
-module.exports = addState(PhaserInstance);
diff --git a/client/src/components/passive.phaser.js b/client/src/components/passive.phaser.js
deleted file mode 100755
index 0ba2fb38..00000000
--- a/client/src/components/passive.phaser.js
+++ /dev/null
@@ -1,126 +0,0 @@
-const Phaser = require('phaser');
-const PassiveNode = require('./passive.node');
-const passiveDataNode = require('./passive.data.node');
-const passiveDataEdge = require('./passive.data.edge');
-
-// Passive tree generator - proof of concept visuals need work
-// Mouse click hold to move, Q + E to zoom in and out
-// Press 'A' to reset allocated passive nodes
-
-class PhaserPassives extends Phaser.Scene {
-    preload() {
-        this.load.image('eye', 'https://labs.phaser.io/assets/particles/green-orb.png');
-        this.load.image('background', 'http://labs.phaser.io/assets/skies/nebula.jpg');
-    }
-
-    create() {
-        this.background = this.add.image(0, 0, 'background');
-        this.background.setScale(5);
-        this.background.setInteractive();
-        this.graphics = this.add.graphics();
-        this.nodeText = this.add.text(10000, 10000, 'grep', {
-            fontSize: '32px',
-            fontFamily: 'Arial',
-            color: '#ffffff',
-            backgroundColor: '#000000',
-        }).setPadding(32);
-
-        this.passiveNodeData = passiveDataNode;
-        this.passiveEdgeData = passiveDataEdge;
-        this.addPassiveNodes();
-        this.drawPassiveEdges();
-        this.addCanmeraControl();
-    }
-
-    addPassiveNodes() {
-        this.passiveNodes = [];
-        this.passiveNodeData.forEach((n) => {
-            this.passiveNodes[n.id] = this.add.existing(
-                new PassiveNode(this, n.x, n.y, n.id, n.alloc, n.text)
-            ).setInteractive();
-        });
-
-        this.input.on('pointerover', (pointer, gameObjects) => {
-            if (gameObjects[0] instanceof PassiveNode) {
-                if (!gameObjects[0].alloc) gameObjects[0].setTint(0xff00ff);
-                this.nodeText.x = pointer.x + this.cameras.main.scrollX;
-                this.nodeText.y = pointer.y + this.cameras.main.scrollY;
-                this.nodeText.text = gameObjects[0].text;
-            } else {
-                this.nodeText.text = '';
-            }
-        });
-        this.input.on('pointerout', (pointer, gameObjects) => {
-            if (gameObjects[0] instanceof PassiveNode) {
-                if (!gameObjects[0].alloc) gameObjects[0].clearTint();
-            }
-        });
-        this.input.on('pointerup', (pointer, gameObjects) => {
-            if (Math.abs(pointer.upX - pointer.downX) < 5
-                    && Math.abs(pointer.upY - pointer.downY) < 5) {
-                // Check cursor hasn't significantly moved during point allocation
-                // If panning and mouse release is on node it won't allocate
-                if (gameObjects[0] instanceof PassiveNode) {
-                    gameObjects[0].allocate();
-                }
-            }
-        });
-
-        this.input.keyboard.on('keydown_A', () => {
-            this.updatePassives(); // Will update nodes from state
-        }, 0, this);
-    }
-
-    drawPassiveEdges() {
-        this.graphics.clear();
-        this.passiveEdgeData.forEach((e) => {
-            const drawEdge = this.passiveNodeData.filter(n => (
-                e[0] === n.id || e[1] === n.id
-            ));
-            if (drawEdge[0].alloc && drawEdge[1].alloc) {
-                this.graphics.lineStyle(10, 0xfff00f, 0.2);
-            } else {
-                this.graphics.lineStyle(2, 0xffffff, 0.2);
-            }
-            // console.log(drawEdge);
-            this.graphics.lineBetween(drawEdge[0].x, drawEdge[0].y, drawEdge[1].x, drawEdge[1].y);
-        });
-    }
-
-    addCanmeraControl() {
-        this.input.on('pointermove', (pointer) => {
-            if (this.pan) {
-                const points = pointer.getInterpolatedPosition(2);
-                this.cameras.main.scrollX -= (points[1].x - points[0].x) * 2;
-                this.cameras.main.scrollY -= (points[1].y - points[0].y) * 2;
-            }
-        }, this);
-        this.controls = new Phaser.Cameras.Controls.SmoothedKeyControl({
-            camera: this.cameras.main,
-            zoomIn: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Q),
-            zoomOut: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.E),
-            acceleration: 0.005,
-            drag: 0.0005,
-            maxSpeed: 0.001,
-        });
-    }
-
-    updatePassives() {
-        this.passiveNodeData.forEach((n) => {
-            this.passiveNodes[n.id].alloc = false;
-            this.passiveNodes[n.id].updateNode();
-        });
-        // This function will  be modified to just update from state
-        // State will update n.alloc instead of false
-    }
-
-    camPan(bool) {
-        this.pan = bool;
-    }
-
-    update(delta) {
-        this.controls.update(delta);
-    }
-}
-
-module.exports = PhaserPassives;
diff --git a/client/src/components/phaser.combat.js b/client/src/components/phaser.combat.js
deleted file mode 100755
index 98afa3be..00000000
--- a/client/src/components/phaser.combat.js
+++ /dev/null
@@ -1,74 +0,0 @@
-const Phaser = require('phaser');
-const fs = require('fs');
-
-class PhaserCombat extends Phaser.Scene {
-    preload() {
-        /* Static Images */
-        this.textures.addBase64('alk', `data:image/png;base64,${new Buffer.from(fs.readFileSync('./assets/alakazam-f.png')).toString('base64')}`);
-        this.textures.addBase64('magmar', `data:image/png;base64,${new Buffer.from(fs.readFileSync('./assets/magmar.png')).toString('base64')}`);
-
-        this.load.image('sky', 'http://labs.phaser.io/assets/skies/nebula.jpg');
-        this.load.image('proj', 'http://labs.phaser.io/assets/sprites/bullet.png');
-        this.load.image('blue', 'http://labs.phaser.io/assets/particles/blue.png');
-        this.load.image('green', 'http://labs.phaser.io/assets/particles/green.png');
-        this.load.image('red', 'http://labs.phaser.io/assets/particles/red.png');
-        this.load.image('white', 'http://labs.phaser.io/assets/particles/white.png');
-        this.load.image('yellow', 'http://labs.phaser.io/assets/particles/yellow.png');
-
-
-        /* Spritesheets */
-        this.load.spritesheet({
-            key: 'explosion',
-            url: 'http://labs.phaser.io/assets/sprites/explosion.png',
-            frameConfig: { frameWidth: 64, frameHeight: 64, endFrame: 23 },
-        });
-    }
-
-    create() {
-        this.add.image(400, 300, 'sky');// Background image
-        this.createPlayers();
-        this.createAnim();
-        this.cursors = this.input.keyboard.createCursorKeys();
-        this.combat = false;
-    }
-
-    createPlayers() {
-        this.players = this.physics.add.staticGroup();
-        const img = this.players.create(100, 300, 'alk');
-        const imgTwo = this.players.create(500, 300, 'magmar');
-        img.setScale(0.5);
-        imgTwo.setScale(0.5);
-        this.playerOneHp = this.add.text(20, 200, 'HP', { fontFamily: 'Arial', fontSize: 24, color: '#00ff00' });
-        this.playerTwoHp = this.add.text(450, 200, 'HP', { fontFamily: 'Arial', fontSize: 24, color: '#00ff00' });
-        this.loaded = true;
-    }
-
-    createAnim() {
-        const config = {
-            key: 'explodeAnimation',
-            frames: this.anims.generateFrameNumbers('explosion', { start: 0, end: 23, first: 23 }),
-            frameRate: 20,
-            repeat: 0,
-        };
-        this.anims.create(config);
-    }
-
-    setPlayerOneHp(health) {
-        this.playerOneHp.text = health;
-    }
-
-    setPlayerTwoHp(health) {
-        this.playerTwoHp.text = health;
-    }
-
-
-    explode(proj) {
-        this.proj.disableBody(true, true);
-        this.emitter.stop();
-        const sprite = this.add.sprite(proj.x, proj.y, 'explosion').play('explodeAnimation');
-        sprite.setScale(3);
-    }
-}
-PhaserCombat.prototype.skills = require('./phaser.skills.js');
-
-module.exports = PhaserCombat;
diff --git a/client/src/components/phaser.container.jsx b/client/src/components/phaser.container.jsx
deleted file mode 100755
index 75460513..00000000
--- a/client/src/components/phaser.container.jsx
+++ /dev/null
@@ -1,67 +0,0 @@
-const preact = require('preact');
-const { connect } = require('preact-redux');
-const Phaser = require('phaser');
-const PhaserCombat = require('./phaser.combat');
-
-const addState = connect(
-    function receiveState(state) {
-        const {
-            game, activeSkill, activeIncoming, account,
-        } = state;
-        return {
-            game, activeSkill, activeIncoming, account,
-        };
-    }
-);
-
-class PhaserInstance extends preact.Component {
-    constructor(props) {
-        super(props);
-        this.props = props;
-    }
-
-    componentWillReceiveProps(nextProps) {
-        const playerTeam = nextProps.game.teams.find(t => t.id === nextProps.account.id);
-        const otherTeams = nextProps.game.teams.filter(t => t.id !== nextProps.account.id);
-
-        if (playerTeam && otherTeams[0] && this.PhaserCombat.loaded) {
-            this.PhaserCombat.setPlayerOneHp(`${playerTeam.cryps[0].hp.value.toString()} / ${playerTeam.cryps[0].stamina.value.toString()} HP`);
-            this.PhaserCombat.setPlayerTwoHp(`${otherTeams[0].cryps[0].hp.value.toString()} / ${otherTeams[0].cryps[0].stamina.value.toString()} HP`);
-
-            if (playerTeam.cryps[0].hp.value === 0) {
-                // this.PhaserCombat.skills('blast', 400, -150);
-                this.PhaserCombat.skills('chargeBall', 'green', 400, -250);
-            } else if (otherTeams[0].cryps[0].hp.value === 0) {
-                // this.PhaserCombat.skills('blast', 180, 150);
-                this.PhaserCombat.skills('chargeBall', 'green', 180, 250);
-            }
-        }
-    }
-
-    componentDidMount() {
-    // now mounted, can freely modify the DOM:
-        this.PhaserCombat = new PhaserCombat();
-        const config = {
-            type: Phaser.DOM.FILL,
-            width: 600,
-            height: 400,
-            parent: 'phaser-example',
-            physics: {
-                default: 'arcade',
-                arcade: {
-                    gravity: { y: 0 },
-                },
-            },
-            scene: this.PhaserCombat,
-        };
-        const game = new Phaser.Game(config);
-    }
-
-    render() {
-        return (
-            <div id="phaser-example" style="overflow: hidden;">
-            </div>
-        );
-    }
-}
-module.exports = addState(PhaserInstance);
diff --git a/client/src/components/phaser.skills.js b/client/src/components/phaser.skills.js
deleted file mode 100755
index 16b6b1c5..00000000
--- a/client/src/components/phaser.skills.js
+++ /dev/null
@@ -1,141 +0,0 @@
-// Skill function called by phaser combat
-const Phaser = require('phaser');
-
-function skills(skill, img, location, spd) {
-    if (this.combat) {
-        return;
-    }
-    this.combat = true;
-    const particles = this.add.particles(img);
-
-    switch (skill) {
-        case 'blast':
-            this.proj = this.physics.add.image(-100, 300, 'proj');
-            this.emitter = particles.createEmitter({
-                speed: 25,
-                scale: { start: 1, end: 0 },
-                blendMode: 'ADD',
-            });
-            this.emitter.startFollow(this.proj);
-            this.physics.add.overlap(this.proj, this.players, this.explode, null, this);
-            this.proj.x = location;
-            this.proj.setVelocity(spd, 0);
-            break;
-
-        case 'wall':
-            this.emitter = particles.createEmitter({
-                x: location,
-                y: { min: 200, max: 350 },
-                lifespan: 2000,
-                speedX: { min: spd, max: spd * 2 },
-                scale: { start: 0.4, end: 0 },
-                quantity: 4,
-                blendMode: 'ADD',
-            });
-            this.time.delayedCall(1000, () => { this.emitter.stop(); }, [], this);
-            break;
-
-        case 'spit':
-            if (location > 250) {
-                this.angleMin = 180;
-                this.angleMax = 220;
-            } else {
-                this.angleMin = 320;
-                this.angleMax = 360;
-            }
-            this.emitter = particles.createEmitter({
-                x: location,
-                y: 300,
-                lifespan: 2000,
-                angle: { min: this.angleMin, max: this.angleMax },
-                speed: spd * 2,
-                scale: { start: 0.4, end: 1 },
-                gravityY: 250,
-                quantity: 4,
-                blendMode: 'ADD',
-            });
-            this.time.delayedCall(1000, () => { this.emitter.stop(); }, [], this);
-            break;
-        case 'gravBomb':
-            this.well = particles.createGravityWell({
-                x: 150,
-                y: 150,
-                power: 4,
-                gravity: 500,
-            });
-            this.emitter = particles.createEmitter({
-                x: 150,
-                y: 150,
-                lifespan: 1500,
-                speed: 1000,
-                scale: { start: 0.7, end: 1 },
-                blendMode: 'ADD',
-            });
-            this.time.delayedCall(1000, () => {
-                this.emitter.stop();
-                this.well.active = false;
-            }, [], this);
-            break;
-        case 'gravBlast':
-            this.well = particles.createGravityWell({
-                x: 400,
-                y: 300,
-                power: 4,
-                gravity: 500,
-            });
-            this.emitter = particles.createEmitter({
-                x: 400,
-                y: 300,
-                lifespan: 2000,
-                speed: 1000,
-                scale: { start: 0.7, end: 1 },
-                blendMode: 'ADD',
-                bounds: {
-                    x: 0, y: 250, w: 450, h: 150,
-                },
-            });
-            this.time.delayedCall(1000, () => {
-                this.emitter.stop();
-                this.well.x = 100;
-            }, [], this);
-            this.time.delayedCall(3000, () => {
-                this.well.active = false;
-            }, [], this);
-            break;
-        case 'chargeBall':
-
-            this.emitter = particles.createEmitter({
-                x: -400,
-                y: -100,
-                lifespan: 1000,
-                moveToX: 450,
-                moveToY: 150,
-                scale: 0.75,
-                quantity: 4,
-                _frequency: 20,
-                blendMode: 'ADD',
-                emitZone: { source: new Phaser.Geom.Rectangle(0, 0, 1600, 700) },
-            });
-            this.emitter2 = particles.createEmitter({
-                radial: false,
-                x: { min: 450, max: 50, steps: 256 },
-                y: { min: 150, max: 300, steps: 256 },
-                lifespan: 1000,
-                speedX: { min: 200, max: 400 },
-                quantity: 4,
-                gravityY: 0,
-                scale: { start: 1.5, end: 0, ease: 'Power3' },
-                blendMode: 'ADD',
-                active: false,
-            });
-            this.time.delayedCall(1000, () => { this.emitter.stop(); }, [], this);
-            this.time.delayedCall(2000, () => { this.emitter2.active = true; }, [], this);
-            this.time.delayedCall(3000, () => { this.emitter2.stop(); }, [], this);
-            break;
-        default:
-            break;
-    }
-}
-
-
-module.exports = skills;
diff --git a/client/src/scenes/cryp.list.js b/client/src/scenes/cryp.list.js
index 4d3adea9..2a34a558 100644
--- a/client/src/scenes/cryp.list.js
+++ b/client/src/scenes/cryp.list.js
@@ -12,8 +12,6 @@ class CrypList extends Phaser.Scene {
 
         const cryps = this.registry.get('cryps');
         this.graphics = this.add.graphics();
-        this.graphics.originX = 0;
-        this.graphics.originY = 0;
         this.renderCryps(cryps);
         return true;
     }
@@ -32,11 +30,17 @@ class CrypList extends Phaser.Scene {
             crypRow(this, cryp, i);
         });
 
+        this.input.on('gameobjectup', this.clickHandler, this);
+
         // seal the boxes in and stop rerendering them
         this.graphics.generateTexture();
 
         return true;
     }
+
+    clickHandler(pointer, crypBox) {
+        this.registry.set('activeCryp', crypBox.cryp);
+    }
 }
 
 module.exports = CrypList;
diff --git a/client/src/scenes/cryp.page.js b/client/src/scenes/cryp.page.js
new file mode 100644
index 00000000..4e7ec3f0
--- /dev/null
+++ b/client/src/scenes/cryp.page.js
@@ -0,0 +1,55 @@
+const Phaser = require('phaser');
+
+const ROW_WIDTH = 400;
+const ROW_HEIGHT = 200;
+const ROW_FILL = 0x888888;
+
+const TOP_MARGIN = 50;
+const ROW_MARGIN = 50;
+const TEXT_MARGIN = 24;
+
+const xPos = i => 0;
+const yPos = i => (i * ROW_HEIGHT + ROW_MARGIN) + TOP_MARGIN;
+
+function crypSkill(scene, skill, i) {
+    scene.add.text(500, 500 + (TEXT_MARGIN * (i + 1)), skill.skill, { fontFamily: 'Arial', fontSize: 24, color: '#ffffff', fontStyle: 'bold' });
+    return true;
+}
+
+
+class CrypPage extends Phaser.Scene {
+    constructor() {
+        super({ key: 'CrypPage', active: true });
+    }
+
+    create() {
+        this.registry.events.on('changedata', this.updateData, this);
+
+        const cryp = this.registry.get('activeCryp');
+        this.graphics = this.add.graphics();
+
+        this.renderCryp(cryp);
+        return true;
+    }
+
+    updateData(parent, key, data) {
+        if (key === 'activeCryp') {
+            return this.scene.restart();
+        }
+        return true;
+    }
+
+    renderCryp(cryp) {
+        if (!cryp) return true;
+
+        this.add.text(500, 500, cryp.name, { fontFamily: 'Arial', fontSize: 24, color: '#ffffff', fontStyle: 'bold' });
+
+        cryp.skills.forEach((skill, i) => crypSkill(this, skill, i));
+
+        // seal the boxes in and stop rerendering them
+        this.graphics.generateTexture();
+        return true;
+    }
+}
+
+module.exports = CrypPage;
diff --git a/client/src/scenes/cryp.row.js b/client/src/scenes/cryp.row.js
index 514c57dd..360d9887 100644
--- a/client/src/scenes/cryp.row.js
+++ b/client/src/scenes/cryp.row.js
@@ -15,12 +15,15 @@ function crypRow(list, cryp, i) {
     const X_ORIGIN = xPos(i);
     const Y_ORIGIN = yPos(i);
 
-    list.graphics.fillStyle(ROW_FILL * Math.random(), 1.0);
-    list.graphics.fillRect(X_ORIGIN, Y_ORIGIN, ROW_WIDTH, ROW_HEIGHT);
+    const row = list.add.rectangle(X_ORIGIN, Y_ORIGIN, ROW_WIDTH, ROW_HEIGHT, ROW_FILL * Math.random())
+        .setInteractive()
+        .setOrigin(0);
+
+    row.cryp = cryp;
     list.add.text(X_ORIGIN, Y_ORIGIN + (TEXT_MARGIN * 0), cryp.name, { fontFamily: 'Arial', fontSize: 24, color: '#ffffff', fontStyle: 'bold' });
     list.add.text(X_ORIGIN, Y_ORIGIN + (TEXT_MARGIN * 1), cryp.stamina.base, { fontFamily: 'Arial', fontSize: 24, color: '#ffffff', fontStyle: 'bold' });
 
     return true;
 }
 
-module.exports = crypRow;
+module.exports = crypRow;
\ No newline at end of file
diff --git a/client/src/scenes/cryps.js b/client/src/scenes/cryps.js
index 79bddaf9..5981e930 100644
--- a/client/src/scenes/cryps.js
+++ b/client/src/scenes/cryps.js
@@ -1,6 +1,7 @@
 const Phaser = require('phaser');
 
 const CrypList = require('./cryp.list');
+const CrypPage = require('./cryp.page');
 const Menu = require('./menu');
 // const Passives = require('./passives');
 
@@ -22,6 +23,7 @@ function renderCryps(store) {
         scene: [
             Menu,
             CrypList,
+            CrypPage,
         ],
     };