diff --git a/client/assets/styles/instance.css b/client/assets/styles/instance.less
similarity index 72%
rename from client/assets/styles/instance.css
rename to client/assets/styles/instance.less
index 71d0b229..4b7cd9de 100644
--- a/client/assets/styles/instance.css
+++ b/client/assets/styles/instance.less
@@ -173,96 +173,89 @@
     border-left-width: 1px;
 }
 
-.construct-list .name {
-    grid-area: name;
-    margin-bottom: 0.5em;
-}
+.construct-list {
+    .avatar {
+        grid-area: avatar;
+        object-fit: contain;
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center;
+        pointer-events: none;
+    }
 
-.construct-list .avatar {
-    grid-area: avatar;
-    object-fit: contain;
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: center;
-    pointer-events: none;
-}
+    .name {
+        grid-area: name;
+        margin-bottom: 0.5em;
+        text-align: center;
+    }
 
-.construct-list .name {
-    text-align: center;
-}
+    .skills {
+        grid-area: skills;
+        padding: 0 0.5em;
+        margin-bottom: 0.75em;
 
-.construct-list .skills {
-    grid-area: skills;
-    display: flex;
-    border-width: 0px;
-}
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        grid-gap: 0 0.5em;
 
-.construct-list .skills button {
-    flex: 1;
-    /*border: 1px solid #222;*/
-    border: none;
-}
+        button {
+            height: 3em;
+        }
+    }
 
-.construct-list .specs {
-    margin-top: 1em;
-    grid-area: specs;
-    display: flex;
-    flex: 1;
-    justify-content: center;
-    border-width: 0px;
-}
+    .specs {
+        grid-area: specs;
+        padding: 0 0.5em;
 
-.construct-list .specs figure {
-    flex: 1;
-    border: 0;
-    align-items: center;
-    text-align: center;
-}
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        grid-gap: 0 0.5em;
 
-.construct-list .specs figcaption {
-    font-size: 75%;
-}
+        button {
+            padding: 0.25em 0;
+        }
 
-.construct-list .stats {
-    grid-area: stats;
-    display: flex;
-    flex-flow: row;
-    flex: 1;
-    border-width: 0px;
-    text-align: center;
-}
+        figure {
+            flex: 1;
+            align-items: center;
+            text-align: center;
+        }
 
-.construct-list .stats figcaption {
-    font-size: 75%;
-}
+        figcaption {
+            font-size: 75%;
+            line-height: initial;
+        }
+    }
 
-.stats div:nth-child(4n) {
-    margin: 0 1em;
-}
+    .stats {
+        grid-area: stats;
+        display: flex;
+        flex-flow: row;
+        flex: 1;
+        border-width: 0px;
+        text-align: center;
 
-.stats div {
-    flex: 1;
-}
+        figcaption {
+            font-size: 75%;
+        }
 
-.construct-list .stats .damage-label {
-    grid-area: dl;
-    display: flex;
-    justify-content: center;
-    color: #666;
-}
+        // give speed some space
+        div:nth-child(4n) {
+            margin: 0 1em;
+        }
 
-.construct-list .stats .speed-label {
-    grid-area: sl;
-    display: flex;
-    justify-content: center;
-    color: #666;
-}
+        div {
+            flex: 1;
+        }
+    }
 
-.construct-list .stats .life-label {
-    grid-area: ll;
-    display: flex;
-    justify-content: center;
-    color: #666;
+    button {
+        margin: 0;
+
+        &.empty {
+            border-style: dashed;
+        }
+    }
 }
 
 /* Equipment */
@@ -294,19 +287,6 @@
     flex: 1 0 100%;
 }
 
-.equip .skills {
-    flex: 1;
-    border: 2px solid #222;
-}
-
-.equip .skills button {
-    color: whitesmoke;
-    font-size: 1em;
-    padding: 0.2em;
-    border-width: 0px;
-    margin-bottom: 0.5em;
-}
-
 .equipping {
   position: relative;
 }
@@ -349,11 +329,6 @@
     }
 }
 
-.equip .specs figure {
-    border: 0;
-    text-align: center;
-}
-
 .equip-spec {
     position: relative;
     stroke: #333;
@@ -372,10 +347,6 @@
     opacity: 0;
 }
 
-.equip .specs figcaption {
-    font-size: 75%;
-}
-
 .thresholds {
     display: flex;
     flex-flow: column;
diff --git a/client/assets/styles/vbox.less b/client/assets/styles/vbox.less
index e8a47386..f1947ce3 100644
--- a/client/assets/styles/vbox.less
+++ b/client/assets/styles/vbox.less
@@ -15,17 +15,17 @@
     .vbox-colours {
         display: grid;
         grid-template-columns: repeat(6, 1fr);
-        grid-gap: 1em 2em;
+        grid-gap: 0.5em 1em;
         align-items: center;
-        margin-bottom: 1em;
+        margin-bottom: 0.5em;
     }
 
     .vbox-items {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
-        grid-gap: 1em 2em;
+        grid-gap: 0.5em 1em;
         align-items: center;
-        margin-bottom: 1em;
+        margin-bottom: 0.5em;
 
         button {
             width: 100%;
@@ -38,6 +38,8 @@
         background-color: @gray;
         border-width: 0;
 
+        height: 3em;
+
         :active, :hover, :focus {
             color: white;
         }
@@ -62,9 +64,11 @@
     }
 
     button {
-        height: 3em;
+        height: 4em;
         margin: 0;
 
+        // text-transform: none;
+
         &.empty {
             border-style: dashed;
         }
@@ -73,10 +77,26 @@
             color: black;
             background: @white;
             border: 1px solid @white;
+
+            ellipse.white {
+                stroke: black;
+            }
         }
     }
 
     svg {
         stroke: none;
     }
+
+    // figures don't scale well
+    figure {
+        svg {
+            height: 2em;
+            stroke-width: 8px;
+        }
+
+        figcaption {
+            line-height: initial;
+        }
+    }
 }
diff --git a/client/index.js b/client/index.js
index 636aa1df..42505427 100644
--- a/client/index.js
+++ b/client/index.js
@@ -1,6 +1,6 @@
 require('./assets/styles/styles.css');
 require('./assets/styles/styles.mobile.css');
-require('./assets/styles/instance.css');
+require('./assets/styles/instance.less');
 require('./assets/styles/vbox.less');
 require('./assets/styles/instance.mobile.css');
 require('./assets/styles/game.css');
diff --git a/client/src/components/instance.constructs.jsx b/client/src/components/instance.constructs.jsx
index 7ffe9786..bda246d2 100644
--- a/client/src/components/instance.constructs.jsx
+++ b/client/src/components/instance.constructs.jsx
@@ -124,12 +124,12 @@ function Construct(props) {
         }
 
         // const action = skill ? '' : 'action';
-        const equip = skillList.includes(vbox.bound[itemEquip]) && !skill ? 'equipping' : '';
-        const classes = `${equip}`;
+        const equipping = skillList.includes(vbox.bound[itemEquip]) && !skill;
+        const classes = `${equipping ? 'equipping' : ''} ${!skill ? 'empty' : ''}`;
         return (
             <button
                 key={i}
-                disabled={!skill && itemEquip === null}
+                disabled={!skill && !equipping}
                 class={classes}
                 onClick={skillClick}
                 onDblClick={skillDblClick}
@@ -143,12 +143,12 @@ function Construct(props) {
         const s = construct.specs[i];
 
         if (!s) {
-            const equip = specList.includes(vbox.bound[itemEquip]) ? 'equip-spec' : 'gray';
+            const equipping = specList.includes(vbox.bound[itemEquip]);
+            const classes = `${equipping ? 'equip-spec' : 'gray'} empty`;
             return (
-                <figure key={i} class={equip} >
-                    {shapes.diamond(equip)}
-                    <figcaption>&nbsp;</figcaption>
-                </figure>
+                <button key={i} class={classes} disabled={!equipping} >
+                    {shapes.None()}
+                </button>
             );
         }
 
@@ -171,14 +171,13 @@ function Construct(props) {
 
 
         return (
-            <figure
+            <button
                 key={i}
                 onClick={specClick}
                 onDblClick={specDblClick}
                 onMouseOver={e => hoverInfo(e, s)} >
                 {shapes[s]()}
-                <figcaption>{s}</figcaption>
-            </figure>
+            </button>
         );
     });
 
diff --git a/client/src/components/nav.jsx b/client/src/components/nav.jsx
index 7a6aff29..b9a057c4 100644
--- a/client/src/components/nav.jsx
+++ b/client/src/components/nav.jsx
@@ -1,15 +1,9 @@
 const { connect } = require('preact-redux');
 const preact = require('preact');
-const { Fragment } = require('preact');
 
-const { postData } = require('../utils');
-console.log(postData);
 const actions = require('../actions');
 const AccountStatus = require('./account.status');
 
-const testGame = process.env.NODE_ENV === 'development' && require('./../test.game');
-const testInstance = process.env.NODE_ENV === 'development' && require('./../test.instance');
-
 const addState = connect(
     function receiveState(state) {
         const {
@@ -115,15 +109,6 @@ function Nav(args) {
         return <button key={i.id} onClick={() => joinInstance(i)} >{`${phase} ${score.wins} / ${score.losses}`}</button>
     });
 
-    const haxSection = process.env.NODE_ENV === 'development'
-        ? (
-            <Fragment>
-                <h2>Hax</h2>
-                <button onClick={() => setTestGame(account.id)}>Test Game</button>
-                <button onClick={() => setTestInstance(account.id)}>Test Instance</button>
-            </Fragment>)
-        : null;
-
     const canJoin = team.some(c => !c);
 
     return (
@@ -134,7 +119,6 @@ function Nav(args) {
             <button class="play-btn" disabled={canJoin} onClick={() => navTo('list')}>Play</button>
             <hr />
             {joined}
-            {haxSection}
         </nav>
     );
 }
diff --git a/client/src/components/shapes.jsx b/client/src/components/shapes.jsx
index 3f70c894..760ae491 100644
--- a/client/src/components/shapes.jsx
+++ b/client/src/components/shapes.jsx
@@ -1,3 +1,5 @@
+const preact = require('preact');
+
 const circle = require('./svgs/circle');
 const diamond = require('./svgs/diamond');
 const hexagon = require('./svgs/hexagon');
@@ -20,6 +22,10 @@ module.exports = {
     saw,
     vboxColour,
 
+    Red: () => vboxColour('red'),
+    Green: () => vboxColour('green'),
+    Blue: () => vboxColour('blue'),
+
     // stats
     RedLife: () => square(['red']),
     GreenLife: () => square(['green']),
@@ -29,33 +35,145 @@ module.exports = {
     BluePower: () => circle(['blue']),
     Speed: () => triangle(['white']),
 
+
     // specs
     // Base
-    Power: () => circle(['white']),
-    Life: () => square(['white']),
-    // Speed,
+
+    None: () =>
+    <figure>
+        {diamond(['gray'])}
+        <figcaption>&nbsp;</figcaption>
+    </figure>,
+
+
+    Power: () =>
+    <figure>
+        {circle(['white'])}
+        <figcaption>Power</figcaption>
+    </figure>,
+
+    Life: () =>
+    <figure>
+        {square(['white'])}
+        <figcaption>Life</figcaption>
+    </figure>,
+
+    // Speed:
+    // <figure>
+    //     {triangle(['white'])}
+    //     <figcaption>Speed</figcaption>
+    // </figure>,
+
 
     // Lifes Upgrades
-    LifeGG: () => square(['green']),
-    LifeRR: () => square(['red']),
-    LifeBB: () => square(['blue']),
-    LifeRG: () => square(['red', 'green']),
-    LifeGB: () => square(['green', 'blue']),
-    LifeRB: () => square(['red', 'blue']),
+    LifeGG: () =>
+    <figure>
+        {square(['green'])}
+        <figcaption>Life</figcaption>
+    </figure>,
+
+    LifeRR: () =>
+    <figure>
+        {square(['green'])}
+        <figcaption>Life</figcaption>
+    </figure>,
+
+    LifeBB:() =>
+    <figure>
+        {square(['green'])}
+        <figcaption>Life</figcaption>
+    </figure>,
+
+    LifeRG: () =>
+    <figure>
+        {square(['red', 'green'])}
+        <figcaption>Life</figcaption>
+    </figure>,
+
+    LifeGB: () =>
+    <figure>
+        {square(['green', 'blue'])}
+        <figcaption>Life</figcaption>
+    </figure>,
+
+    LifeRB:() =>
+    <figure>
+        {square(['red', 'blue'])}
+        <figcaption>Life</figcaption>
+    </figure>,
+
 
     // Power Upgrades
-    PowerGG: () => circle(['green']),
-    PowerRR: () => circle(['red']),
-    PowerBB: () => circle(['blue']),
-    PowerRG: () => circle(['red', 'green']),
-    PowerGB: () => circle(['green', 'blue']),
-    PowerRB: () => circle(['red', 'blue']),
+    PowerGG: () =>
+    <figure>
+        {circle(['green'])}
+        <figcaption>Power</figcaption>
+    </figure>,
+
+    PowerRR: () =>
+    <figure>
+        {circle(['green'])}
+        <figcaption>Power</figcaption>
+    </figure>,
+
+    PowerBB:() =>
+    <figure>
+        {circle(['green'])}
+        <figcaption>Power</figcaption>
+    </figure>,
+
+    PowerRG: () =>
+    <figure>
+        {circle(['red', 'green'])}
+        <figcaption>Power</figcaption>
+    </figure>,
+
+    PowerGB: () =>
+    <figure>
+        {circle(['green', 'blue'])}
+        <figcaption>Power</figcaption>
+    </figure>,
+
+    PowerRB:() =>
+    <figure>
+        {circle(['red', 'blue'])}
+        <figcaption>Power</figcaption>
+    </figure>,
 
     // Speed Upgrades
-    SpeedGG: () => triangle(['green']),
-    SpeedRR: () => triangle(['red']),
-    SpeedBB: () => triangle(['blue']),
-    SpeedRG: () => triangle(['red', 'green']),
-    SpeedGB: () => triangle(['green', 'blue']),
-    SpeedRB: () => triangle(['red', 'blue']),
+    SpeedGG: () =>
+    <figure>
+        {triangle(['green'])}
+        <figcaption>Speed</figcaption>
+    </figure>,
+
+    SpeedRR: () =>
+    <figure>
+        {triangle(['green'])}
+        <figcaption>Speed</figcaption>
+    </figure>,
+
+    SpeedBB:() =>
+    <figure>
+        {triangle(['green'])}
+        <figcaption>Speed</figcaption>
+    </figure>,
+
+    SpeedRG: () =>
+    <figure>
+        {triangle(['red', 'green'])}
+        <figcaption>Speed</figcaption>
+    </figure>,
+
+    SpeedGB: () =>
+    <figure>
+        {triangle(['green', 'blue'])}
+        <figcaption>Speed</figcaption>
+    </figure>,
+
+    SpeedRB:() =>
+    <figure>
+        {triangle(['red', 'blue'])}
+        <figcaption>Speed</figcaption>
+    </figure>,
 };
diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx
index 65c713ab..902d1013 100644
--- a/client/src/components/vbox.component.jsx
+++ b/client/src/components/vbox.component.jsx
@@ -124,7 +124,7 @@ function Vbox(args) {
     function combinerChange(newCombiner) {
         setCombiner(newCombiner);
 
-        if (combiner.length === 1) {
+        if (newCombiner.length === 1) {
             setItemEquip(newCombiner[0]);
         } else {
             setItemEquip(null);
@@ -171,12 +171,12 @@ function Vbox(args) {
             return setVboxSelected([group, index]);
         }
 
-        if (['Red', 'Green', 'Blue'].includes(v)) {
+        if (shapes[v]) {
             return (
                 <button
                     onMouseOver={e => vboxHover(e, v)}
                     onClick={onClick}>
-                    {shapes.vboxColour(v.toLowerCase())}
+                    {shapes[v]()}
                 </button>
             );
         }
@@ -271,13 +271,13 @@ function Vbox(args) {
         const highlighted = combiner.indexOf(i) > -1;
         const classes = `${highlighted ? 'highlight' : ''}`;
 
-        if (['Red', 'Green', 'Blue'].includes(v)) {
+        if (shapes[v]) {
             return (
                 <button
                     class={classes}
                     onMouseOver={e => vboxHover(e, v)}
                     onClick={onClick}>
-                    {shapes.vboxColour(v.toLowerCase())}
+                    {shapes[v]()}
                 </button>
             );
         }
diff --git a/server/src/names.rs b/server/src/names.rs
index 67c6e918..36833363 100644
--- a/server/src/names.rs
+++ b/server/src/names.rs
@@ -1,7 +1,7 @@
 use rand::prelude::*;
 use rand::{thread_rng};
 
-const FIRSTS: [&'static str; 33] = [
+const FIRSTS: [&'static str; 36] = [
     "artificial",
     "ambient",
     "borean",
@@ -13,6 +13,8 @@ const FIRSTS: [&'static str; 33] = [
     "convex",
     "distorted",
     "dub",
+    "emotive",
+    "emotionless",
     "fierce",
     "inverted",
     "leafy",
@@ -31,6 +33,7 @@ const FIRSTS: [&'static str; 33] = [
     "purified",
     "recalcitrant",
     "rogue",
+    "subversive",
     "subterranean",
     "synthetic",
     "sweet",
diff --git a/server/src/vbox.rs b/server/src/vbox.rs
index 866bed49..4e2e1a96 100644
--- a/server/src/vbox.rs
+++ b/server/src/vbox.rs
@@ -88,7 +88,7 @@ impl Vbox {
                 };
 
                 let dist = WeightedIndex::new(items.iter().map(|item| item.1)).unwrap();
-                iter::repeat_with(|| { 
+                iter::repeat_with(|| {
                     items[dist.sample(&mut rng)].0}).take(match item_type {
                         ItemType::Colours => 6,
                         _ => 3,