diff --git a/html-client/src/actions.jsx b/html-client/src/actions.jsx
index 7ed080f2..0ea7db27 100644
--- a/html-client/src/actions.jsx
+++ b/html-client/src/actions.jsx
@@ -25,6 +25,9 @@ export const setActiveIncoming = value => ({ type: SET_ACTIVE_INCOMING, value })
 export const SET_ACTIVE_SKILL = 'SET_ACTIVE_SKILL';
 export const setActiveSkill = (crypId, skill) => ({ type: SET_ACTIVE_SKILL, value: crypId ? { crypId, skill } : null });
 
+export const SET_INFO = 'SET_INFO';
+export const setInfo = (type, info) => ({ type: SET_INFO, value: type ? { type, info } : null });
+
 export const SET_RECLAIMING = 'SET_RECLAIMING';
 export const setReclaiming = value => ({ type: SET_RECLAIMING, value });
 
diff --git a/html-client/src/components/constants.jsx b/html-client/src/components/constants.jsx
new file mode 100644
index 00000000..0d300ba1
--- /dev/null
+++ b/html-client/src/components/constants.jsx
@@ -0,0 +1,218 @@
+module.exports = {
+    ITEMS: {
+        SKILLS: {
+            Amplify: {
+                description: 'increase the magic damage dealt by a cryp',
+                colours: '1 Green 1 Blue',
+            },
+
+            Attack: {
+                description: 'a fast attack with red damage',
+                upgrades: 'combine with 2 red / blue / green - red + blue attack not implemented',
+            },
+
+            Banish: {
+                description: 'target cryp is prevented from casting any skills and taking any damage',
+                colours: '1 Red 1 Green',
+
+            },
+
+            Blast: {
+                description: 'blast the target with magic damage',
+                colours: '2 Blue',
+            },
+
+            Block: {
+                description: 'decreases incoming red damage for 1T',
+                upgrades: 'combine with 2 red / blue / green',
+            },
+
+            Buff: {
+                description: 'increase target cryp speed',
+                upgrades: 'combine with 2 red / blue / green',
+            },
+
+            Clutch: {
+                description: '??????',
+                colours: '1 Red 1 Green',
+            },
+
+            Corrupt: {
+                description: 'Inflicts a dot to attacker while active',
+                colours: '2 Blue',
+            },
+
+            Curse: {
+                description: 'target cryp takes increased magic damage',
+                colours: '2 Blue',
+            },
+
+            Debuff: {
+                description: 'reduce target cryp speed',
+                upgrades: 'combine with 2 red / blue / green',
+            },
+
+            Decay: {
+                description: 'afflict a cryp with a blue damage based damage over time debuff',
+                colours: '1 Green 1 Blue',
+            },
+
+            Empower: {
+                description: 'increase the red damage dealt by a cryp',
+                colours: '2 Red',
+            },
+
+            Haste: {
+                description: 'magical skill that increases speed of target cryp',
+                colours: '1 Red 1 Blue',
+            },
+
+            Heal: {
+                description: 'heal a cryp with blue damage',
+                colours: '2 Green',
+            },
+
+            Hex: {
+                description: 'magical bsed skill that prevents target cryp from using any skills',
+                colours: '1 Red 1 Blue',
+            },
+
+            Hostility: {
+                description: 'magical bsed skill that prevents target cryp from using any skills',
+                colours: '2 Blue',
+            },
+
+            Invert: {
+                description: 'reverse ???',
+                colours: '1 Red 1 Blue',
+            },
+
+            Parry: {
+                description: 'prevents all red damage for 1T',
+                colours: '2 Red',
+            },
+
+            Purge: {
+                description: 'remove magical buffs from target cryp',
+                colours: '2 Green',
+            },
+
+            Purify: {
+                description: 'remove magical debuffs from target cryp',
+                colours: '1 Red 1 Green',
+            },
+
+            Recharge: {
+                description: 'restore something',
+                colours: '1 Red 1 Blue',
+            },
+
+            Reflect: {
+                description: 'reflect damage back to attacker',
+                colours: '2 Green',
+            },
+
+            Riposte: {
+                description: '???',
+            },
+
+            Ruin: {
+                description: 'Stun the entire enemy team',
+                colours: '2 Blue',
+            },
+
+            Shield: {
+                description: 'grants immunity to magical skills to target cryp',
+                colours: '1 Green 1 Blue',
+            },
+
+            Silence: {
+                description: 'prevent target cryp from casting magical skills',
+                colours: '1 Green 1 Blue',
+            },
+
+            Siphon: {
+                description: 'siphon hp from target cryp with a blue damage based debuff',
+                colours: '1 Green 1 Blue',
+            },
+
+            Slay: {
+                description: '????',
+            },
+
+            Slow: {
+                description: 'magical skill that reduces speed of target cryp',
+                colours: '1 Red 1 Green',
+            },
+
+            Snare: {
+                description: 'prevents red skills from being used for 2T',
+                colours: '2 Red',
+            },
+
+            Strangle: {
+                description: 'Stun the enemy and inflict physical damage over 3T',
+                colours: '2 Red',
+            },
+
+            Strike: {
+                description: 'Fast attacking red skill',
+                colours: '2 Red',
+            },
+
+            Stun: {
+                description: 'red skill hat prevents target cryp from using any skills',
+                upgrades: 'combine with 2 red / blue / green',
+
+            },
+
+            Taunt: {
+                description: 'Enemy skills will prioritise cryps with this skill active',
+                colours: '1 Red 1 Green',
+            },
+
+            Throw: {
+                description: 'stuns and makes the target take increased red damage',
+                colours: '2 Green',
+            },
+
+            Triage: {
+                description: 'grants a blue damage based healing over time buff',
+                colours: '2 Green',
+            },
+        },
+
+        SPECS: {
+            Damage: {
+                description: 'Increase red / green / blue power stats cryp',
+                upgrades: 'combine with 2 red / blue / green',
+
+            },
+
+            Hp: {
+                description: 'Increases health of cryp',
+                upgrades: 'combine with 2 red / blue / green',
+
+            },
+
+            Speed: {
+                description: 'Increases speed of cryp',
+                upgrades: 'combine with 2 red / blue / green',
+            },
+        },
+
+        COLOURS: {
+            Red: {
+                description: 'Used to create offensive type combos - fast and chaotic',
+            },
+
+            Green: {
+                description: 'Used to create defensive / healing type combos',
+            },
+
+            Blue: {
+                description: 'Used to create offensive type combos - slow and reliable',
+            },
+        },
+    },
+};
diff --git a/html-client/src/components/game.jsx b/html-client/src/components/game.jsx
new file mode 100644
index 00000000..83a05744
--- /dev/null
+++ b/html-client/src/components/game.jsx
@@ -0,0 +1,169 @@
+const preact = require('preact');
+const key = require('keymaster');
+const range = require('lodash/range');
+const molecule = require('./molecule');
+const saw = require('./saw.component');
+
+const SKILL_HOT_KEYS = ['Q', 'W', 'E', 'R'];
+
+function GamePanel(props) {
+    const {
+        game,
+        activeSkill,
+        activeIncoming,
+        setActiveSkill,
+        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);
+
+    function Cryp(cryp) {
+        const skills = range(0, 4).map((i) => {
+            const s = cryp.skills[i]
+                ? cryp.skills[i].skill
+                : (<span>&nbsp;</span>);
+
+            return <button key={i} className="cryp-skill-btn" type ="submit" onClick={() => setActiveSkill(cryp.id, s)}>{s}</button>;
+        });
+
+        const stats = [
+            { stat: 'hp', colour: '#1FF01F' },
+            { stat: 'red_shield', colour: '#a52a2a' },
+            { stat: 'blue_shield', colour: '#3498db' },
+        ].map((s, i) => (
+            <figure key={i} alt={s.stat}>
+                {saw(s.colour)}
+                <figcaption>{cryp[s.stat].value} / {cryp[s.stat].max}</figcaption>
+            </figure>
+        ));
+
+        return (
+            <div className="cryp-box">
+                <figure className="img">
+                    {molecule}
+                </figure>
+                <div className="skills">
+                    {skills}
+                </div>
+                <div className="stats">
+                    {stats}
+                </div>
+            </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">
+                {Cryp(cryp, setActiveSkill)}
+            </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 className="tile"
+                style={activeSkill ? { cursor: 'pointer' } : {}}
+                onClick={() => selectSkillTarget(cryp.id)} >
+                <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>
+                            </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.hp.value} HP </div>
+                        <progress className="progress is-dark" value={cryp.hp.value} max={cryp.hp.max}></progress>
+
+                    </div>
+                    {effects}
+                </div>
+            </div>
+        );
+    }
+
+    function OpponentTeam(team) {
+        const cryps = team.cryps.map(OpponentCrypCard);
+        return (
+            <div>
+                {cryps}
+            </div>
+        );
+    }
+
+    const logs = game.log.reverse().map((l, i) => (<div key={i}>{l}</div>));
+
+    return (
+        <section>
+            <div className="row">
+                <div className="three columns">
+                    {playerTeam.id}
+                    {PlayerTeam(playerTeam, setActiveSkill)}
+                </div>
+                <div className="six columns" align="center">
+                    Round X
+                </div>
+
+                <div className="three columns">
+                    {otherTeams.id}
+                    {otherTeams.map(OpponentTeam)}
+                </div>
+            </div>
+            <div className="row">
+            </div>
+        </section>
+    );
+}
+
+module.exports = GamePanel;
diff --git a/html-client/src/components/info.component.jsx b/html-client/src/components/info.component.jsx
new file mode 100644
index 00000000..c108d453
--- /dev/null
+++ b/html-client/src/components/info.component.jsx
@@ -0,0 +1,29 @@
+const preact = require('preact');
+const { ITEMS: { SKILLS, SPECS, COLOURS } } = require('./constants');
+
+function Info(args) {
+    const {
+        info,
+    } = args;
+    let desc = null;
+    if (info) {
+        if (info.type === 'item') {
+            if (SKILLS[info.info]) {
+                desc = SKILLS[info.info];
+            } else if (SPECS[info.info]) {
+                desc = SPECS[info.info];
+            } else if (COLOURS[info.info]) {
+                desc = COLOURS[info.info];
+            }
+        }
+    }
+
+    return (
+        <div className="six columns">
+            <div> {JSON.stringify(info)} </div>
+            <div> {JSON.stringify(desc)} </div>
+        </div>
+    );
+}
+
+module.exports = Info;
diff --git a/html-client/src/components/info.container.jsx b/html-client/src/components/info.container.jsx
new file mode 100644
index 00000000..a45e921a
--- /dev/null
+++ b/html-client/src/components/info.container.jsx
@@ -0,0 +1,20 @@
+const { connect } = require('preact-redux');
+
+// const actions = require('../actions');
+
+const Info = require('./info.component');
+
+const addState = connect(
+    function receiveState(state) {
+        const { info } = state;
+        return { info };
+    }
+/*
+    function receiveDispatch(dispatch) {
+
+        return { };
+    }
+*/
+);
+
+module.exports = addState(Info);
diff --git a/html-client/src/components/instance.component.jsx b/html-client/src/components/instance.component.jsx
index 27cd72ab..88dce9a9 100644
--- a/html-client/src/components/instance.component.jsx
+++ b/html-client/src/components/instance.component.jsx
@@ -3,16 +3,17 @@ const preact = require('preact');
 const range = require('lodash/range');
 
 const VboxContainer = require('./vbox.container');
+const InfoContainer = require('./info.container');
 const molecule = require('./molecule');
 const saw = require('./saw.component');
 
-function Cryp(cryp, sendVboxApply) {
+function Cryp(cryp, sendVboxApply, setInfo) {
     const skills = range(0, 4).map(i => {
         const s = cryp.skills[i]
             ? cryp.skills[i].skill
             : (<span>&nbsp;</span>);
 
-        return <button key={i} className="cryp-skill-btn" >{s}</button>;
+        return <button key={i} className="cryp-skill-btn" onClick={() => setInfo('item', s)}>{s}</button>;
     });
 
     // needed for ondrop to fire
@@ -71,11 +72,12 @@ function InstanceComponent(args) {
         quit,
         sendInstanceReady,
         sendVboxApply,
+        setInfo,
     } = args;
 
     if (!instance) return <div>...</div>;
 
-    const cryps = instance.cryps.map(c => Cryp(c, sendVboxApply));
+    const cryps = instance.cryps.map(c => Cryp(c, sendVboxApply, setInfo));
 
     return (
         <section className="instance" >
@@ -103,6 +105,7 @@ function InstanceComponent(args) {
                 <div className="three columns instance-cryp-list">
                     {cryps}
                 </div>
+                <InfoContainer />
             </div>
         </section>
     );
diff --git a/html-client/src/components/instance.container.jsx b/html-client/src/components/instance.container.jsx
index c739de84..0554681d 100644
--- a/html-client/src/components/instance.container.jsx
+++ b/html-client/src/components/instance.container.jsx
@@ -24,7 +24,11 @@ const addState = connect(
             dispatch(actions.setInstance(null));
         }
 
-        return { quit };
+        function setInfo(type, info) {
+            dispatch(actions.setInfo(type, info));
+        }
+
+        return { quit, setInfo };
     }
 
 );
diff --git a/html-client/src/components/vbox.component.jsx b/html-client/src/components/vbox.component.jsx
index 2c71de07..22127c8f 100644
--- a/html-client/src/components/vbox.component.jsx
+++ b/html-client/src/components/vbox.component.jsx
@@ -21,6 +21,7 @@ function Vbox(args) {
         sendVboxCombine,
         setCombiner,
         setReclaiming,
+        setInfo,
     } = args;
 
     const { vbox } = instance;
@@ -54,7 +55,12 @@ function Vbox(args) {
         const cells = row.map((c, j) => (
             <td
                 key={j}
-                onClick={() => c && sendVboxAccept(j, i)} >
+                onClick={() => {
+                    if (c) {
+                        sendVboxAccept(j, i);
+                        setInfo('item', c);
+                    }
+                }} >
                 {convertVar(c)}
             </td>
         ));
diff --git a/html-client/src/components/vbox.container.jsx b/html-client/src/components/vbox.container.jsx
index 5e96c70f..cbd9a473 100644
--- a/html-client/src/components/vbox.container.jsx
+++ b/html-client/src/components/vbox.container.jsx
@@ -44,7 +44,12 @@ const addState = connect(
             return dispatch(actions.setReclaiming(v));
         }
 
-        return { setCombiner, setReclaiming };
+        function setInfo(type, info) {
+            return dispatch(actions.setInfo(type, info));
+        }
+
+
+        return { setCombiner, setReclaiming, setInfo };
     }
 
 );
diff --git a/html-client/src/events.jsx b/html-client/src/events.jsx
index 5b205fec..5c5e0a99 100644
--- a/html-client/src/events.jsx
+++ b/html-client/src/events.jsx
@@ -29,7 +29,7 @@ function registerEvents(store) {
     }
 
     function setActiveSkill(skill) {
-        store.dispatch(actions.setActiveSkill(null));
+        store.dispatch(actions.setActiveSkill(skill));
     }
 
     function setMenu() {
diff --git a/html-client/src/main.jsx b/html-client/src/main.jsx
index 0f429856..6ba2a8e4 100644
--- a/html-client/src/main.jsx
+++ b/html-client/src/main.jsx
@@ -21,6 +21,7 @@ const store = createStore(
         combiner: reducers.combinerReducer,
         cryps: reducers.crypsReducer,
         game: reducers.gameReducer,
+        info: reducers.infoReducer,
         instance: reducers.instanceReducer,
         instances: reducers.instancesReducer,
         reclaiming: reducers.reclaimingReducer,
diff --git a/html-client/src/reducers.jsx b/html-client/src/reducers.jsx
index a87d28d8..7f5c6258 100644
--- a/html-client/src/reducers.jsx
+++ b/html-client/src/reducers.jsx
@@ -100,6 +100,16 @@ function wsReducer(state = defaultWs, action) {
     }
 }
 
+const defaultInfo = null;
+function infoReducer(state = defaultInfo, action) {
+    switch (action.type) {
+        case actions.SET_INFO:
+            return action.value;
+        default:
+            return state;
+    }
+}
+
 module.exports = {
     accountReducer,
     activeSkillReducer,
@@ -111,4 +121,5 @@ module.exports = {
     reclaimingReducer,
     selectedCrypsReducer,
     wsReducer,
+    infoReducer,
 };