diff --git a/README.md b/README.md
index 5d22ff27..19e7ce8d 100644
--- a/README.md
+++ b/README.md
@@ -8,6 +8,13 @@ minimal studios is ntr & mashy: 2 mates with a friendship forged in the fires of
 we have both bailed out of the big city life and have dedicated ourselves to growing farm fresh, organic, ethical gaming produce in the rolling hills of brisbane and leaves of melbourne.
 completely self funded, we're just here to make games that feel good & play it clean.
 
+## inspiration
+- peggle
+- soldat
+- mini metro
+- poe
+- mtg
+
 
 ## Construct Alignments
 
diff --git a/WORKLOG.md b/WORKLOG.md
index 066e89c0..f8bf9347 100644
--- a/WORKLOG.md
+++ b/WORKLOG.md
@@ -19,11 +19,8 @@
 
 * msg pane
 * game invites
-* change score to enum
 
-* pct based translates for combat animation
 * add speed to descriptions
-* clear skill (if currently targetted)
 
 ## SOON
 *SERVER*
diff --git a/client/assets/styles/menu.less b/client/assets/styles/menu.less
index 49a312fa..03a2334c 100644
--- a/client/assets/styles/menu.less
+++ b/client/assets/styles/menu.less
@@ -77,6 +77,12 @@
             }
         }
     }
+
+    .login {
+        display: flex;
+        flex-flow: column;
+        margin-bottom: 2em;
+    }
 }
 
 section {
@@ -108,4 +114,60 @@ section {
         display: flex;
         flex-flow: column;
     }
+}
+
+.demo {
+    margin-top: 1em;
+
+    display: grid;
+    grid-template-areas:
+        "vinfo game"
+        "vcons game";
+
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: min-content 1fr;
+
+    .colour-info {
+        grid-area: vinfo;
+        display: flex;
+        align-items: center;
+
+        div {
+            display: flex;
+        }
+
+        svg {
+            flex: 1;
+            height: 1em;
+        }
+    }
+
+    .vbox-demo {
+        grid-area: vinfo;
+    }
+
+    .game-demo {
+        grid-area: game;
+
+        display: grid;
+        grid-template-columns: 1fr 2fr;
+
+        .game {
+            display: flex;
+            flex-flow: column;
+
+            .game-construct {
+                flex: 1;
+            }
+        }
+    }
+
+    .construct-list {
+        grid-area: vcons;
+        height: 100%;
+
+        svg {
+            height: 100%;
+        }
+    }
 }
\ No newline at end of file
diff --git a/client/assets/styles/styles.less b/client/assets/styles/styles.less
index f64f48fa..85bb973c 100644
--- a/client/assets/styles/styles.less
+++ b/client/assets/styles/styles.less
@@ -112,7 +112,7 @@ button, input {
     flex: 1;
 
     /*the transitions */
-    transition-property: color, background;
+    transition-property: border-color, color, background;
     transition-duration: 0.25s;
     transition-delay: 0;
     transition-timing-function: ease;
@@ -195,28 +195,6 @@ button[disabled] {
     border-color: #222;
 }
 
-/*
-    LOGIN
-*/
-
-.welcome {
-    .login {
-        width: 50%;
-        display: flex;
-        flex-flow: column;
-        margin-bottom: 2em;
-    }
-
-    .options {
-        display: flex;
-        width: 50%;
-    }
-
-    h2 {
-        margin-bottom: 0.5em;
-    }
-}
-
 #mnml input, #mnml select {
     border-color: #222;
     background-color: #222;
@@ -272,14 +250,6 @@ header {
             color: @white;
             box-shadow: inset 0px 5px 0px 0px @white;
             border: 0;
-            &:first-child {
-                border-left: 1px solid #444;
-            }
-
-            &:last-child {
-                border-right: 1px solid #444;
-            }
-
         }
 
         border: 1px solid #444;
diff --git a/client/src/actions.jsx b/client/src/actions.jsx
index d4242eb1..d4fe0dc8 100644
--- a/client/src/actions.jsx
+++ b/client/src/actions.jsx
@@ -8,6 +8,8 @@ export const setAnimSource = value => ({ type: 'SET_ANIM_SOURCE', value });
 export const setAnimTarget = value => ({ type: 'SET_ANIM_TARGET', value });
 export const setAnimText   = value => ({ type: 'SET_ANIM_TEXT', value });
 
+export const setDemo = value => ({ type: 'SET_DEMO', value });
+
 export const setActiveItem = value => ({ type: 'SET_ACTIVE_VAR', value });
 export const setActiveSkill = (constructId, skill) => ({ type: 'SET_ACTIVE_SKILL', value: constructId ? { constructId, skill } : null });
 export const setCombiner = value => ({ type: 'SET_COMBINER', value: Array.from(value) });
diff --git a/client/src/components/animations.jsx b/client/src/components/animations.jsx
index ff1c9eaf..f72b356b 100644
--- a/client/src/components/animations.jsx
+++ b/client/src/components/animations.jsx
@@ -68,6 +68,7 @@ class ConstructAnimation extends Component {
         const animSkill = removeTier(skill);
         if (!constructId.includes(construct.id)) return false;
 
+
         // find target animation
         const chooseAnim = (animSkill) => {
             switch (animSkill) {
diff --git a/client/src/components/anims/absorb.jsx b/client/src/components/anims/absorb.jsx
index f32f47b6..d4f99252 100644
--- a/client/src/components/anims/absorb.jsx
+++ b/client/src/components/anims/absorb.jsx
@@ -90,7 +90,7 @@ class Absorb extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 
diff --git a/client/src/components/anims/amplify.jsx b/client/src/components/anims/amplify.jsx
index 2e82270e..86b67c7d 100644
--- a/client/src/components/anims/amplify.jsx
+++ b/client/src/components/anims/amplify.jsx
@@ -78,7 +78,7 @@ class Amplify extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 
diff --git a/client/src/components/anims/attack.jsx b/client/src/components/anims/attack.jsx
index 6e580daf..65756c1f 100644
--- a/client/src/components/anims/attack.jsx
+++ b/client/src/components/anims/attack.jsx
@@ -59,7 +59,7 @@ class Attack extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 
 }
diff --git a/client/src/components/anims/bash.circle.jsx b/client/src/components/anims/bash.circle.jsx
index c202e664..866b5d59 100644
--- a/client/src/components/anims/bash.circle.jsx
+++ b/client/src/components/anims/bash.circle.jsx
@@ -100,7 +100,7 @@ class Bash extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 
diff --git a/client/src/components/anims/bash.jsx b/client/src/components/anims/bash.jsx
index 81e43d6f..c8e3894d 100644
--- a/client/src/components/anims/bash.jsx
+++ b/client/src/components/anims/bash.jsx
@@ -103,7 +103,7 @@ class Bash extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 
diff --git a/client/src/components/anims/blast.jsx b/client/src/components/anims/blast.jsx
index b8163225..21d985fa 100644
--- a/client/src/components/anims/blast.jsx
+++ b/client/src/components/anims/blast.jsx
@@ -88,7 +88,7 @@ class Blast extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 
diff --git a/client/src/components/anims/block.jsx b/client/src/components/anims/block.jsx
index 5ea544a8..a962b11d 100644
--- a/client/src/components/anims/block.jsx
+++ b/client/src/components/anims/block.jsx
@@ -53,7 +53,7 @@ class Block extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 
diff --git a/client/src/components/anims/break.jsx b/client/src/components/anims/break.jsx
index f0fb7e07..9663bce6 100644
--- a/client/src/components/anims/break.jsx
+++ b/client/src/components/anims/break.jsx
@@ -107,7 +107,7 @@ class Break extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 
diff --git a/client/src/components/anims/buff.jsx b/client/src/components/anims/buff.jsx
index e49e556f..c73081d0 100644
--- a/client/src/components/anims/buff.jsx
+++ b/client/src/components/anims/buff.jsx
@@ -81,7 +81,7 @@ class Buff extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 
diff --git a/client/src/components/anims/chaos.jsx b/client/src/components/anims/chaos.jsx
index 288501ba..0d19b281 100644
--- a/client/src/components/anims/chaos.jsx
+++ b/client/src/components/anims/chaos.jsx
@@ -69,10 +69,9 @@ class Chaos extends Component {
                 stroke: colour,
             });
         });
-
         anime.set('.skill-anim', {
-            translateY: -300 * this.props.direction.y,
-            translateX: -200 * this.props.direction.x,
+            translateY: -(window.screen.height) * 0.35 * this.props.direction.y,
+            translateX: -(window.screen.width) * 0.15 * this.props.direction.x,
             opacity: 0,
         });
         anime.set('#explosion feDisplacementMap', {
@@ -120,7 +119,7 @@ class Chaos extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 
diff --git a/client/src/components/anims/counter.jsx b/client/src/components/anims/counter.jsx
index 0815f974..0ae9d709 100644
--- a/client/src/components/anims/counter.jsx
+++ b/client/src/components/anims/counter.jsx
@@ -85,7 +85,7 @@ class Counter extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 
diff --git a/client/src/components/anims/curse.jsx b/client/src/components/anims/curse.jsx
index 8ccfb2b7..0747b1c8 100644
--- a/client/src/components/anims/curse.jsx
+++ b/client/src/components/anims/curse.jsx
@@ -78,7 +78,7 @@ class Curse extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 
diff --git a/client/src/components/anims/debuff.jsx b/client/src/components/anims/debuff.jsx
index 72fac14f..0f68d33d 100644
--- a/client/src/components/anims/debuff.jsx
+++ b/client/src/components/anims/debuff.jsx
@@ -83,7 +83,7 @@ class Debuff extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 
diff --git a/client/src/components/anims/decay.jsx b/client/src/components/anims/decay.jsx
index 2759b8fd..ebd67e7d 100644
--- a/client/src/components/anims/decay.jsx
+++ b/client/src/components/anims/decay.jsx
@@ -68,7 +68,7 @@ class Decay extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 
diff --git a/client/src/components/anims/electrify.jsx b/client/src/components/anims/electrify.jsx
index 2e9a51cc..a0226894 100644
--- a/client/src/components/anims/electrify.jsx
+++ b/client/src/components/anims/electrify.jsx
@@ -109,7 +109,7 @@ class Electrify extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 
diff --git a/client/src/components/anims/electrocute.jsx b/client/src/components/anims/electrocute.jsx
index f33432e9..0d8fdc79 100644
--- a/client/src/components/anims/electrocute.jsx
+++ b/client/src/components/anims/electrocute.jsx
@@ -101,7 +101,7 @@ class Electrocute extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 
diff --git a/client/src/components/anims/haste.jsx b/client/src/components/anims/haste.jsx
index 8438d8f7..b93a7b68 100644
--- a/client/src/components/anims/haste.jsx
+++ b/client/src/components/anims/haste.jsx
@@ -83,7 +83,7 @@ class Haste extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 
diff --git a/client/src/components/anims/heal.jsx b/client/src/components/anims/heal.jsx
index 78684aa0..5a36cd98 100644
--- a/client/src/components/anims/heal.jsx
+++ b/client/src/components/anims/heal.jsx
@@ -81,7 +81,7 @@ class Heal extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 
diff --git a/client/src/components/anims/hex.jsx b/client/src/components/anims/hex.jsx
index 4be435b1..c279225d 100644
--- a/client/src/components/anims/hex.jsx
+++ b/client/src/components/anims/hex.jsx
@@ -88,7 +88,7 @@ class Hex extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 
diff --git a/client/src/components/anims/hybrid.jsx b/client/src/components/anims/hybrid.jsx
index 0b369d7b..7f2a2a58 100644
--- a/client/src/components/anims/hybrid.jsx
+++ b/client/src/components/anims/hybrid.jsx
@@ -153,7 +153,7 @@ class Hybrid extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 
diff --git a/client/src/components/anims/intercept.jsx b/client/src/components/anims/intercept.jsx
index 745f67f3..c5ee6b2a 100644
--- a/client/src/components/anims/intercept.jsx
+++ b/client/src/components/anims/intercept.jsx
@@ -96,7 +96,7 @@ class Intercept extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 
diff --git a/client/src/components/anims/link.jsx b/client/src/components/anims/link.jsx
index 6f6ebf32..e20d5bbf 100644
--- a/client/src/components/anims/link.jsx
+++ b/client/src/components/anims/link.jsx
@@ -91,7 +91,7 @@ class Link extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 
diff --git a/client/src/components/anims/purge.jsx b/client/src/components/anims/purge.jsx
index da072286..34bd6c68 100644
--- a/client/src/components/anims/purge.jsx
+++ b/client/src/components/anims/purge.jsx
@@ -81,7 +81,7 @@ class Purge extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 
diff --git a/client/src/components/anims/purify.jsx b/client/src/components/anims/purify.jsx
index 732a6180..adc83efd 100644
--- a/client/src/components/anims/purify.jsx
+++ b/client/src/components/anims/purify.jsx
@@ -115,7 +115,7 @@ class Purify extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 
diff --git a/client/src/components/anims/recharge.jsx b/client/src/components/anims/recharge.jsx
index 169f884e..7f224604 100644
--- a/client/src/components/anims/recharge.jsx
+++ b/client/src/components/anims/recharge.jsx
@@ -95,7 +95,7 @@ class Recharge extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 
diff --git a/client/src/components/anims/red.block.jsx b/client/src/components/anims/red.block.jsx
index 9961344c..4adb850d 100644
--- a/client/src/components/anims/red.block.jsx
+++ b/client/src/components/anims/red.block.jsx
@@ -76,7 +76,7 @@ class Block extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 
diff --git a/client/src/components/anims/red.circles.jsx b/client/src/components/anims/red.circles.jsx
index 74ff44ce..4b6134e1 100644
--- a/client/src/components/anims/red.circles.jsx
+++ b/client/src/components/anims/red.circles.jsx
@@ -82,7 +82,7 @@ class Intercept extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 
diff --git a/client/src/components/anims/reflect.jsx b/client/src/components/anims/reflect.jsx
index 816f1f76..ac18ab0e 100644
--- a/client/src/components/anims/reflect.jsx
+++ b/client/src/components/anims/reflect.jsx
@@ -77,7 +77,7 @@ class Refl extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 
diff --git a/client/src/components/anims/restrict.jsx b/client/src/components/anims/restrict.jsx
index f8c1395d..ac663cb8 100644
--- a/client/src/components/anims/restrict.jsx
+++ b/client/src/components/anims/restrict.jsx
@@ -102,7 +102,7 @@ class Restrict extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 
diff --git a/client/src/components/anims/ruin.jsx b/client/src/components/anims/ruin.jsx
index 7022f3a0..9738d7a8 100644
--- a/client/src/components/anims/ruin.jsx
+++ b/client/src/components/anims/ruin.jsx
@@ -100,7 +100,7 @@ class Ruin extends Component {
             this.animations[i].reset();
         }
         try {
-            this.props.animCb();
+            this.props.animCb && this.props.animCb();
         } catch (e) {
             console.log(e);
         }
diff --git a/client/src/components/anims/silence.jsx b/client/src/components/anims/silence.jsx
index bbd40c34..f30d1bb9 100644
--- a/client/src/components/anims/silence.jsx
+++ b/client/src/components/anims/silence.jsx
@@ -97,7 +97,7 @@ class Silence extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 
diff --git a/client/src/components/anims/siphon.jsx b/client/src/components/anims/siphon.jsx
index f6812a05..4ba6102b 100644
--- a/client/src/components/anims/siphon.jsx
+++ b/client/src/components/anims/siphon.jsx
@@ -69,9 +69,8 @@ class Siphon extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
-
 }
 
 module.exports = addState(Siphon);
diff --git a/client/src/components/anims/siphon.tick.jsx b/client/src/components/anims/siphon.tick.jsx
index accb7b7b..4a0b82e5 100644
--- a/client/src/components/anims/siphon.tick.jsx
+++ b/client/src/components/anims/siphon.tick.jsx
@@ -116,7 +116,7 @@ class SiphonTick extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 
diff --git a/client/src/components/anims/slay.jsx b/client/src/components/anims/slay.jsx
index 2713a569..c1624a62 100644
--- a/client/src/components/anims/slay.jsx
+++ b/client/src/components/anims/slay.jsx
@@ -91,7 +91,7 @@ class Slay extends Component {
         });
 
         anime.set('#slay', {
-            translateY: -400,
+            translateY: (window.screen.height) * 0.35 * this.props.direction.y,
             translateX: 0,
         });
         anime.set('#explosion feDisplacementMap', {
@@ -152,7 +152,7 @@ class Slay extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 
diff --git a/client/src/components/anims/sleep.jsx b/client/src/components/anims/sleep.jsx
index a9af121b..c76e1e55 100644
--- a/client/src/components/anims/sleep.jsx
+++ b/client/src/components/anims/sleep.jsx
@@ -47,7 +47,7 @@ class Sleep extends Component {
                 version="1.1"
                 id="sleep"
                 xmlns="http://www.w3.org/2000/svg"
-                viewBox="-291 -191 582 582">
+                viewBox="-291 -291 582 582">
                 <defs>
                     <filter id="sleepFilter">
                         <feGaussianBlur stdDeviation="3"/>
@@ -140,7 +140,7 @@ class Sleep extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 
diff --git a/client/src/components/anims/strike.jsx b/client/src/components/anims/strike.jsx
index 5aca4fbc..37cac718 100644
--- a/client/src/components/anims/strike.jsx
+++ b/client/src/components/anims/strike.jsx
@@ -85,7 +85,7 @@ class Strike extends Component {
         });
 
         anime.set('#strike', {
-            translateY: -400,
+            translateY: (window.screen.height) * 0.35 * this.props.direction.y,
             translateX: 0,
         });
 
@@ -120,7 +120,7 @@ class Strike extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 
diff --git a/client/src/components/anims/stun.jsx b/client/src/components/anims/stun.jsx
index 5a8eadce..5f53c5a1 100644
--- a/client/src/components/anims/stun.jsx
+++ b/client/src/components/anims/stun.jsx
@@ -78,7 +78,7 @@ class Stun extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 
diff --git a/client/src/components/anims/sustain.jsx b/client/src/components/anims/sustain.jsx
index dca163cb..a206e250 100644
--- a/client/src/components/anims/sustain.jsx
+++ b/client/src/components/anims/sustain.jsx
@@ -127,7 +127,7 @@ class Sustain extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 
diff --git a/client/src/components/anims/triage.jsx b/client/src/components/anims/triage.jsx
index cf7edc15..73d11d92 100644
--- a/client/src/components/anims/triage.jsx
+++ b/client/src/components/anims/triage.jsx
@@ -80,7 +80,7 @@ class Triage extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 
diff --git a/client/src/components/anims/triage.tick.jsx b/client/src/components/anims/triage.tick.jsx
index 06878d18..afeb6034 100644
--- a/client/src/components/anims/triage.tick.jsx
+++ b/client/src/components/anims/triage.tick.jsx
@@ -79,7 +79,7 @@ class TriageTick extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 
diff --git a/client/src/components/demo.jsx b/client/src/components/demo.jsx
new file mode 100644
index 00000000..84e05e93
--- /dev/null
+++ b/client/src/components/demo.jsx
@@ -0,0 +1,179 @@
+const { connect } = require('preact-redux');
+const preact = require('preact');
+
+const actions = require('../actions');
+const shapes = require('./shapes');
+
+const { ConstructAvatar } = require('./construct');
+const { ConstructAnimation } = require('./animations');
+
+const addState = connect(
+    function receiveState(state) {
+        const {
+            account,
+            itemInfo,
+            demo,
+        } = state;
+
+        return {
+            account,
+            itemInfo,
+            demo,
+        };
+    },
+
+    function receiveDispatch(dispatch) {
+        function setAnimTarget(anim) {
+            dispatch(actions.setAnimTarget(anim));
+        }
+
+        return { setAnimTarget };
+    }
+);
+
+
+function Demo(args) {
+    const {
+        demo,
+        itemInfo,
+        account,
+
+        setAnimTarget,
+    } = args;
+
+    if (!demo || !itemInfo.items.length || account) return false;
+
+    const { combiner, items, equipping, equipped, players } = demo;
+
+    console.log(items);
+
+    const vboxDemo = () => {
+        function inventoryBtn(i, j) {
+            if (!i) return <button disabled class='empty' >&nbsp;</button>;
+            const highlighted = combiner.indexOf(j) > -1;
+            const classes = `${highlighted ? 'highlight' : ''}`;
+
+            if (shapes[i]) {
+                return <button class={classes} key={j}>{shapes[i]()}</button>;
+            }
+
+            return <button class={classes}>{i}</button>;
+        }
+
+        function combinerBtn() {
+            let text = '';
+
+            if (combiner.length < 3) {
+                for (let i = 0; i < 3; i++) {
+                    if (combiner.length > i) {
+                        text += '■ ';
+                    } else {
+                        text += '▫ ';
+                    }
+                }
+            } else {
+                text = 'combine';
+            }
+
+            return (
+                <button
+                    class='vbox-btn'
+                    disabled={combiner.length !== 3}>
+                    {text}
+                </button>
+            );
+        }
+
+        function inventoryElement() {
+            return (
+                <div class="vbox">
+                    <div class='vbox-section'>
+                        <h2 class='colour-info'>
+                            VBOX PHASE {shapes.Red()} {shapes.Green()} {shapes.Blue()}
+                        </h2>
+                        <p>
+                            Combine the colour base items with an array of skills and specialisations to build powerful variants.
+                        </p>
+                    </div>
+                    <div>&nbsp;</div>
+                    <div class='vbox-section'>
+                        <div class='vbox-items'>
+                            {items.map((i, j) => inventoryBtn(i, j))}
+                        </div>
+                        {combinerBtn()}
+                    </div>
+                </div>
+            );
+        }
+
+        return (
+            <div class="news vbox-demo">
+                {inventoryElement()}
+            </div>
+        );
+    };
+
+    const vboxConstructs = () => {
+        const btnClass = equipping
+            ? 'equipping empty gray'
+            : 'empty gray';
+
+        return (
+            <div class='news construct-list'>
+                {players[0].constructs.map((c, i) => (
+                    <div class="instance-construct" key={i}>
+                        <h2 class="name" >{c.name}</h2>
+                        <ConstructAvatar construct={c} />
+                        <div class="skills">
+                            {i === 0 && equipped
+                                ? <button>Strike</button>
+                                : <button disabled={!equipping} class={btnClass}>SKILL</button>
+                            }
+                            <button disabled={!equipping} class={btnClass}>SKILL</button>
+                            <button disabled={!equipping} class={btnClass}>SKILL</button>
+                        </div>
+                        <div class="specs">
+                        </div>
+                        <div class="stats">
+                        </div>
+                    </div>
+                ))}
+            </div>
+        );
+    };
+
+    const gameDemo = () => {
+        return (
+            <div class="game-demo">
+                <div>
+                    <h2>COMBAT PHASE</h2>
+                    <p>Battle your opponent using dynamic team builds from the VBOX phase.</p>
+                    <p>Crafted skills can be used to damage the opponent or support your team.</p>
+                    <p>Turn based combat, each team picks targets for their skills during this phase.</p>
+                    <p>The damage dealt by skills, cast order and construct life depend on your decisions in the VBOX phase. </p>
+                </div>
+                <div class="game">
+                    <div class="game-construct">
+                        <ConstructAvatar construct={players[1].constructs[0]} />
+                        <ConstructAnimation construct={players[1].constructs[0]} />
+                    </div>
+                    <div></div>
+                    <div class="game-construct">
+                        <ConstructAvatar construct={players[1].constructs[1]} />
+                        <ConstructAnimation construct={players[1].constructs[1]} />
+                    </div>
+                </div>
+            </div>
+        );
+    };
+
+    return (
+        <section class='demo news'>
+            {vboxDemo()}
+            {vboxConstructs()}
+            {gameDemo()}
+        </section>
+    );
+}
+
+module.exports = addState(Demo);
diff --git a/client/src/components/game.ctrl.jsx b/client/src/components/game.ctrl.jsx
index f251770a..a1a1675c 100644
--- a/client/src/components/game.ctrl.jsx
+++ b/client/src/components/game.ctrl.jsx
@@ -27,8 +27,13 @@ const addState = connect(
             return ws.sendGameSkillClear(game.id);
         }
 
+        function sendAbandon() {
+            return ws.sendInstanceAbandon(game.instance);
+        }
+
         return {
             game,
+            sendAbandon,
             sendGameSkillClear,
             sendReady,
             account,
@@ -51,6 +56,7 @@ const addState = connect(
 function Controls(args) {
     const {
         account,
+        sendAbandon,
         game,
         animating,
         sendGameSkillClear,
@@ -104,7 +110,7 @@ function Controls(args) {
             <div class="controls">
                 <PlayerBox player={opponent}/>
                 {game.phase === 'Finish' ? quitBtn : readyBtn}
-                <PlayerBox player={player} isPlayer={true} isGame={true} clear={sendGameSkillClear}/>
+                <PlayerBox player={player} isPlayer={true} isGame={true} clear={sendGameSkillClear} abandon={sendAbandon}/>
             </div>
         </aside>
     );
diff --git a/client/src/components/game.jsx b/client/src/components/game.jsx
index eddde654..95c34691 100644
--- a/client/src/components/game.jsx
+++ b/client/src/components/game.jsx
@@ -42,7 +42,6 @@ const addState = connect(
     function receiveDispatch(dispatch) {
         function setActiveSkill(constructId, skill) {
             dispatch(actions.setActiveSkill(constructId, skill));
-            // particlesJS(`particles-${constructId}`, config);
         }
 
         function setActiveConstruct(construct) {
diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx
index 2d197b18..5f7c262f 100644
--- a/client/src/components/info.component.jsx
+++ b/client/src/components/info.component.jsx
@@ -21,15 +21,14 @@ function InfoComponent(args) {
             return (
                 <div>
                     <h2>VBOX phase</h2>
-                    <p>in this phase you strengthen and specialise your constructs by equipping items to them.</p>
-                    <p>double clicking items in the <b>VBOX</b> will purchase and move them to your <b>INVENTORY</b>.</p>
+                    <p>strengthen and specialise your constructs by equipping items to them.</p>
+                    <p>double click to purchase items in the <b>VBOX</b> and move them to your <b>INVENTORY</b>.</p>
                     <p>
-                        hover over an item to see its effects and combinations.<br />
                         combine a <b>SKILL</b> or <b>SPEC</b> with 2 <b>COLOURS</b> to create an item.<br />
-                        combine 3 of the same item to upgrade it.<br />
-                        click an item and then click a construct to equip that item to it.<br />
+                        combine <b>3 of the same item</b> to upgrade it.<br />
+                        click an item and then click a construct to <b>equip</b> that item to it.<br />
                     </p>
-                    <p>click the <b>READY</b> button on the right to progress to the <b>GAME PHASE</b>.</p>
+                    <p>click the <b>READY</b> button for the <b>GAME PHASE</b>.</p>
                 </div>
             );
         }
diff --git a/client/src/components/instance.constructs.jsx b/client/src/components/instance.constructs.jsx
index 1eecfd6e..24a1d833 100644
--- a/client/src/components/instance.constructs.jsx
+++ b/client/src/components/instance.constructs.jsx
@@ -179,7 +179,7 @@ function Construct(props) {
     const stats = Object.keys(STATS).map(s => {
         const stat = STATS[s];
 
-        const info = (s === 'Speed' && 'Speed')
+        const info = (s === 'SpeedStat' && 'Speed')
             || (s.includes('Power') && 'Power')
             || (s.includes('Life') && 'Life');
 
diff --git a/client/src/components/instance.ctrl.jsx b/client/src/components/instance.ctrl.jsx
index 47324fa9..7a2762c5 100644
--- a/client/src/components/instance.ctrl.jsx
+++ b/client/src/components/instance.ctrl.jsx
@@ -15,12 +15,16 @@ const addState = connect(
         } = state;
 
         function sendReady() {
-            document.activeElement.blur()
+            document.activeElement.blur();
             return ws.sendInstanceReady(instance.id);
-            return false;
+        }
+
+        function sendAbandon() {
+            return ws.sendInstanceAbandon(instance.id);
         }
 
         return {
+            sendAbandon,
             instance,
             sendReady,
             account,
@@ -41,6 +45,7 @@ const addState = connect(
 function Controls(args) {
     const {
         account,
+        sendAbandon,
         instance,
         sendReady,
         leave,
@@ -77,13 +82,18 @@ function Controls(args) {
         </div>
     );
 
+    const ready = instance.phase !== 'Finished'
+        ? <button class="ready" onClick={() => sendReady()}>Ready</button>
+        : <button class="ready" onClick={leave}>Leave</button>
+
+    const abandon = instance.phase !== 'Finished' ? sendAbandon : false;
     return (
         <aside>
             {timer}
             <div class="controls">
                 <PlayerBox player={opponent} />
-                <button class="ready" onClick={() => sendReady()}>Ready</button>
-                <PlayerBox player={player} isPlayer={true} leave={leave}/>
+                {ready}
+                <PlayerBox player={player} isPlayer={true} abandon={abandon}/>
             </div>
         </aside>
     );
diff --git a/client/src/components/molecule.jsx b/client/src/components/molecule.jsx
index 2be0cfc3..8054a844 100644
--- a/client/src/components/molecule.jsx
+++ b/client/src/components/molecule.jsx
@@ -1,18 +1,11 @@
 const preact = require('preact');
 
-module.exports = function molecule(combatText) {
-    const text = combatText
-        ?   <text x="0" y="400" class="combat-text">
-                {combatText}
-                <animate attributeType="XML" attributeName="y" from="300" to="200" dur="2s" repeatCount="1"/>
-                <animate attributeType="XML" attributeName="opacity" from="1" to="0" dur="2s" repeatCount="1"/>
-            </text>
-        : '';
-
-    return (<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 500 500">
-    <rect style="fill: none;"></rect>
-    <g transform="translate(-133.97462520598594, -116.025374794014) "><g><line x1="325.9602631261639" x2="296.95475676906796" y1="332.53171849251754" y2="315.78489034176926" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: butt;"></line><line x1="267.949250411972" x2="296.95475676906796" y1="299.038062191021" y2="315.78489034176926" transform="" style="stroke-width: 3; stroke: #1FF01F;"></line></g><g><line x1="383.9712758403558" x2="383.9712758403558" y1="433.01268739700697" y2="466.5063436985035" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: butt;"></line><line x1="383.9712758403558" x2="383.9712758403558" y1="500" y2="466.5063436985035" transform="" style="stroke-width: 3; stroke: #1FF01F;"></line></g><g><line x1="383.9712758403558" x2="383.9712758403558" y1="299.038062191021" y2="265.5444058895245" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: butt;"></line><line x1="383.9712758403558" x2="383.9712758403558" y1="232.050749588028" y2="265.5444058895245" transform="" style="stroke-width: 3; stroke: #1FF01F;"></line></g><g><line x1="500" x2="470.994493642904" y1="433.01268739700697" y2="416.26585924625874" transform="" style="stroke: #1FF01F; stroke-width: 3; stroke-linecap: butt;"></line><line x1="441.98898728580804" x2="470.994493642904" y1="399.5190310955105" y2="416.26585924625874" transform="" style="stroke-width: 3; stroke: #909090;"></line></g><g><line x1="441.98898728580804" x2="470.994493642904" y1="332.53171849251754" y2="315.78489034176926" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: butt;"></line><line x1="500" x2="470.994493642904" y1="299.038062191021" y2="315.78489034176926" transform="" style="stroke-width: 3; stroke: #1FF01F;"></line></g><g><line x1="325.9602631261639" x2="296.95475676906796" y1="399.5190310955105" y2="416.26585924625874" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: butt;"></line><line x1="267.949250411972" x2="296.95475676906796" y1="433.01268739700697" y2="416.26585924625874" transform="" style="stroke-width: 3; stroke: #1FF01F;"></line></g><g><line x1="383.9712758403558" x2="354.96576948325986" y1="299.038062191021" y2="315.78489034176926" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: round;"></line><line x1="325.9602631261639" x2="354.96576948325986" y1="332.53171849251754" y2="315.78489034176926" transform="" style="stroke-width: 3; stroke: #909090;"></line></g><g><line x1="441.98898728580804" x2="412.98013156308195" y1="332.53171849251754" y2="315.78489034176926" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: round;"></line><line x1="383.9712758403558" x2="412.98013156308195" y1="299.038062191021" y2="315.78489034176926" transform="" style="stroke-width: 3; stroke: #909090;"></line></g><g><line x1="325.9602631261639" x2="325.9602631261639" y1="332.53171849251754" y2="366.02537479401406" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: round;"></line><line x1="325.9602631261639" x2="325.9602631261639" y1="399.5190310955105" y2="366.02537479401406" transform="" style="stroke-width: 3; stroke: #909090;"></line></g><g><line x1="383.9712758403558" x2="412.98013156308195" y1="433.01268739700697" y2="416.26585924625874" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: round;"></line><line x1="441.98898728580804" x2="412.98013156308195" y1="399.5190310955105" y2="416.26585924625874" transform="" style="stroke-width: 3; stroke: #909090;"></line></g><g><line x1="325.9602631261639" x2="354.96576948325986" y1="399.5190310955105" y2="416.26585924625874" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: round;"></line><line x1="383.9712758403558" x2="354.96576948325986" y1="433.01268739700697" y2="416.26585924625874" transform="" style="stroke-width: 3; stroke: #909090;"></line></g><g><line x1="441.98898728580804" x2="441.98898728580804" y1="399.5190310955105" y2="366.02537479401406" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: round;"></line><line x1="441.98898728580804" x2="441.98898728580804" y1="332.53171849251754" y2="366.02537479401406" transform="" style="stroke-width: 3; stroke: #909090;"></line></g><g class="atom" transform="translate(267.949250411972, 299.038062191021) "><circle r="8" style="fill: #1FF01F;"></circle></g><g class="atom" transform="translate(383.9712758403558, 500) "><circle r="8" style="fill: #1FF01F;"></circle></g><g class="atom" transform="translate(383.9712758403558, 232.050749588028) "><circle r="8" style="fill: #1FF01F;"></circle></g><g class="atom" transform="translate(500, 433.01268739700697) "><circle r="8" style="fill: #1FF01F;"></circle></g><g class="atom" transform="translate(500, 299.038062191021) "><circle r="8" style="fill: #1FF01F;"></circle></g><g class="atom" transform="translate(267.949250411972, 433.01268739700697) "><circle r="8" style="fill: #1FF01F;"></circle></g>
-    </g>
-    {text}
-    </svg>);
+module.exports = function molecule() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 500 500">
+            <rect style="fill: none;"></rect>
+            <g transform="translate(-133.97462520598594, -116.025374794014) "><g><line x1="325.9602631261639" x2="296.95475676906796" y1="332.53171849251754" y2="315.78489034176926" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: butt;"></line><line x1="267.949250411972" x2="296.95475676906796" y1="299.038062191021" y2="315.78489034176926" transform="" style="stroke-width: 3; stroke: #1FF01F;"></line></g><g><line x1="383.9712758403558" x2="383.9712758403558" y1="433.01268739700697" y2="466.5063436985035" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: butt;"></line><line x1="383.9712758403558" x2="383.9712758403558" y1="500" y2="466.5063436985035" transform="" style="stroke-width: 3; stroke: #1FF01F;"></line></g><g><line x1="383.9712758403558" x2="383.9712758403558" y1="299.038062191021" y2="265.5444058895245" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: butt;"></line><line x1="383.9712758403558" x2="383.9712758403558" y1="232.050749588028" y2="265.5444058895245" transform="" style="stroke-width: 3; stroke: #1FF01F;"></line></g><g><line x1="500" x2="470.994493642904" y1="433.01268739700697" y2="416.26585924625874" transform="" style="stroke: #1FF01F; stroke-width: 3; stroke-linecap: butt;"></line><line x1="441.98898728580804" x2="470.994493642904" y1="399.5190310955105" y2="416.26585924625874" transform="" style="stroke-width: 3; stroke: #909090;"></line></g><g><line x1="441.98898728580804" x2="470.994493642904" y1="332.53171849251754" y2="315.78489034176926" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: butt;"></line><line x1="500" x2="470.994493642904" y1="299.038062191021" y2="315.78489034176926" transform="" style="stroke-width: 3; stroke: #1FF01F;"></line></g><g><line x1="325.9602631261639" x2="296.95475676906796" y1="399.5190310955105" y2="416.26585924625874" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: butt;"></line><line x1="267.949250411972" x2="296.95475676906796" y1="433.01268739700697" y2="416.26585924625874" transform="" style="stroke-width: 3; stroke: #1FF01F;"></line></g><g><line x1="383.9712758403558" x2="354.96576948325986" y1="299.038062191021" y2="315.78489034176926" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: round;"></line><line x1="325.9602631261639" x2="354.96576948325986" y1="332.53171849251754" y2="315.78489034176926" transform="" style="stroke-width: 3; stroke: #909090;"></line></g><g><line x1="441.98898728580804" x2="412.98013156308195" y1="332.53171849251754" y2="315.78489034176926" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: round;"></line><line x1="383.9712758403558" x2="412.98013156308195" y1="299.038062191021" y2="315.78489034176926" transform="" style="stroke-width: 3; stroke: #909090;"></line></g><g><line x1="325.9602631261639" x2="325.9602631261639" y1="332.53171849251754" y2="366.02537479401406" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: round;"></line><line x1="325.9602631261639" x2="325.9602631261639" y1="399.5190310955105" y2="366.02537479401406" transform="" style="stroke-width: 3; stroke: #909090;"></line></g><g><line x1="383.9712758403558" x2="412.98013156308195" y1="433.01268739700697" y2="416.26585924625874" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: round;"></line><line x1="441.98898728580804" x2="412.98013156308195" y1="399.5190310955105" y2="416.26585924625874" transform="" style="stroke-width: 3; stroke: #909090;"></line></g><g><line x1="325.9602631261639" x2="354.96576948325986" y1="399.5190310955105" y2="416.26585924625874" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: round;"></line><line x1="383.9712758403558" x2="354.96576948325986" y1="433.01268739700697" y2="416.26585924625874" transform="" style="stroke-width: 3; stroke: #909090;"></line></g><g><line x1="441.98898728580804" x2="441.98898728580804" y1="399.5190310955105" y2="366.02537479401406" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: round;"></line><line x1="441.98898728580804" x2="441.98898728580804" y1="332.53171849251754" y2="366.02537479401406" transform="" style="stroke-width: 3; stroke: #909090;"></line></g><g class="atom" transform="translate(267.949250411972, 299.038062191021) "><circle r="8" style="fill: #1FF01F;"></circle></g><g class="atom" transform="translate(383.9712758403558, 500) "><circle r="8" style="fill: #1FF01F;"></circle></g><g class="atom" transform="translate(383.9712758403558, 232.050749588028) "><circle r="8" style="fill: #1FF01F;"></circle></g><g class="atom" transform="translate(500, 433.01268739700697) "><circle r="8" style="fill: #1FF01F;"></circle></g><g class="atom" transform="translate(500, 299.038062191021) "><circle r="8" style="fill: #1FF01F;"></circle></g><g class="atom" transform="translate(267.949250411972, 433.01268739700697) "><circle r="8" style="fill: #1FF01F;"></circle></g>
+            </g>
+        </svg>
+    );
 };
diff --git a/client/src/components/player.box.jsx b/client/src/components/player.box.jsx
index 62184f3f..f7b1f9a6 100644
--- a/client/src/components/player.box.jsx
+++ b/client/src/components/player.box.jsx
@@ -1,15 +1,24 @@
 const preact = require('preact');
+const { connect } = require('preact-redux');
+
+const addState = connect(
+    function receiveState(state) {
+        const { animating } = state;
+        return { animating };
+    }
+);
 
 function Scoreboard(args) {
     const {
+        abandon,
+        animating,
         isPlayer,
         player,
         isGame,
         clear,
-        leave,
     } = args;
 
-    let scoreText = () => {
+    const scoreText = () => {
         if (player.score === 'Zero') return '▫▫▫▫';
         if (player.score === 'One') return '■▫▫▫';
         if (player.score === 'Two') return '■■▫▫';
@@ -37,14 +46,10 @@ function Scoreboard(args) {
             <div class="img">
                 <div>{player.name}</div>
             </div>
-            <div>
-                {(isPlayer && isGame) ? <button onClick={clear}>Clear</button> : null}
-            </div>
-            <div>
-                {leave ? <button onClick={leave}>Leave</button> : null}
-            </div>
+            {(isPlayer && isGame) ? <button disabled={animating} onClick={clear}>Clear</button> : null}
+            {(abandon) ? <button disabled={animating} onClick={abandon}>Abandon</button> : null}
         </div>
     );
 }
 
-module.exports = Scoreboard;
+module.exports = addState(Scoreboard);
diff --git a/client/src/components/welcome.jsx b/client/src/components/welcome.jsx
index 27575d98..80ce32a5 100644
--- a/client/src/components/welcome.jsx
+++ b/client/src/components/welcome.jsx
@@ -5,6 +5,7 @@ const Login = require('./welcome.login');
 const Register = require('./welcome.register');
 const Help = require('./welcome.help');
 const About = require('./welcome.about');
+const Demo = require('./demo');
 
 function Welcome() {
     const page = this.state.page || 'login';
@@ -19,41 +20,57 @@ function Welcome() {
     };
 
     return (
-        <main class="welcome">
-            <h1>mnml.gg</h1>
-            <div class="login">
-                <div>mnml is an abstract turn based strategy game</div>
-                <div>free to play</div>
-                <div>no email required</div>
-                <div>glhf</div>
+        <main class="menu">
+            <header>
+                <div class="options">
+                    <button
+                        class={`login-btn ${page === 'login' ? 'highlight' : ''}`}
+                        disabled={page === 'login'}
+                        onClick={() => this.setState({ page: 'login' })}>
+                        Login
+                    </button>
+                    <button
+                        class={`login-btn ${page === 'register' ? 'highlight' : ''}`}
+                        disabled={page === 'register'}
+                        onClick={() => this.setState({ page: 'register' })}>
+                        Register
+                    </button>
+                    <button
+                        class={`login-btn ${page === 'about' ? 'highlight' : ''}`}
+                        disabled={page === 'about'}
+                        onClick={() => this.setState({ page: 'about' })}>
+                        About
+                    </button>
+                    <button
+                        class={`login-btn ${page === 'help' ? 'highlight' : ''}`}
+                        disabled={page === 'help'}
+                        onClick={() => this.setState({ page: 'help' })}>
+                        Help
+                    </button>
+                </div>
+            </header>
+            <div class="top">
+                <section>
+                    <div class="news">
+                        <h1>mnml.gg</h1>
+                        <p>
+                            mnml is a turn-based 1v1 strategy game in an abstract setting.<br />
+                            outplay your opponents by building your team of 3 constructs from a shifting meta of skills, effects and specialisations.<br />
+                        </p>
+                        <p>
+                            simple rules, complex interactions, simultaneous turns to increase the pace, and a unique speed mechanic;<br />
+                            mnml is a tactical game unlike any other.
+                        </p>
+                        <p>
+                            free to play<br />
+                            no email required<br />
+                            glhf
+                        </p>
+                    </div>
+                    {pageEl()}
+                </section>
             </div>
-            <div class="options">
-                <button
-                    class={`login-btn ${page === 'login' ? 'highlight' : ''}`}
-                    disabled={page === 'login'}
-                    onClick={() => this.setState({ page: 'login' })}>
-                    Login
-                </button>
-                <button
-                    class={`login-btn ${page === 'register' ? 'highlight' : ''}`}
-                    disabled={page === 'register'}
-                    onClick={() => this.setState({ page: 'register' })}>
-                    Register
-                </button>
-                <button
-                    class={`login-btn ${page === 'about' ? 'highlight' : ''}`}
-                    disabled={page === 'about'}
-                    onClick={() => this.setState({ page: 'about' })}>
-                    About
-                </button>
-                <button
-                    class={`login-btn ${page === 'help' ? 'highlight' : ''}`}
-                    disabled={page === 'help'}
-                    onClick={() => this.setState({ page: 'help' })}>
-                    Help
-                </button>
-            </div>
-            {pageEl()}
+            <Demo />
         </main>
     );
 }
diff --git a/client/src/components/welcome.register.jsx b/client/src/components/welcome.register.jsx
index 7051a8ce..838a48e7 100644
--- a/client/src/components/welcome.register.jsx
+++ b/client/src/components/welcome.register.jsx
@@ -12,8 +12,8 @@ const addState = connect(
             ws
         } = state;
 
-        function submitRegister(name, password, code) {
-            postData('/account/register', { name, password, code })
+        function submitRegister(name, password) {
+            postData('/account/register', { name, password })
                 .then(res => res.json())
                 .then(data => {
                     if (data.error) return errorToast(data.error);
@@ -34,19 +34,18 @@ function Register(args) {
         submitRegister,
     } = args;
 
-    const { password, confirm, name, code } = this.state;
+    const { password, confirm, name } = this.state;
 
     const registerSubmit = (event) => {
         event.preventDefault();
-        submitRegister(name, password, code);
-        // this.setState({ name: '', password: '', confirm: '', code: ''});
+        submitRegister(name, password);
     }
 
     const registerConfirm = () =>
         password === confirm;
 
     const registerDisabled = () => {
-        return !(registerConfirm() && password && name && code);
+        return !(registerConfirm() && password && name);
     }
 
     return (
@@ -75,14 +74,6 @@ function Register(args) {
                 value={this.state.confirm}
                 onInput={linkState(this, 'confirm')}
             />
-            <label for="code">Access Code</label>
-            <input
-                class="login-input"
-                type="text"
-                placeholder="code"
-                value={this.state.code}
-                onInput={linkState(this, 'code')}
-            />
             <button
                 class="login-btn"
                 disabled={registerDisabled()}
diff --git a/client/src/constants.jsx b/client/src/constants.jsx
index 0719f25f..f7044d3d 100644
--- a/client/src/constants.jsx
+++ b/client/src/constants.jsx
@@ -1,3 +1,5 @@
+const preact = require('preact');
+
 const SOURCE_DURATION_MS = 1000;
 const TARGET_DELAY_MS = 500;
 const TARGET_DURATION_MS = 1500;
@@ -24,15 +26,11 @@ module.exports = {
     INFO: {
         vbox: {
             item: 'VBOX',
-            description: 'Contains ITEMS that are available for you to buy.\nDouble-click to purchase.',
+            description: <p><b>ITEMS</b> that are available to buy.<br />the <b>VBOX</b> is refilled every round.<br />click <b>REFILL</b> at the bottom to purchase a refill. </p>,
         },
         inventory: {
             item: 'INVENTORY',
-            description: 'Holds purchased ITEMS.\nClick to add ITEM to I-COMBINATOR.',
-        },
-        combiner: {
-            item: 'I-COMBINATOR',
-            description: 'Combines purchased ITEMS into more powerful variants. Hover over an ITEM to see recipes.',
+            description: <p>holds <b>ITEMS</b><br /><b>ITEMS</b> carry over each round.</p>,
         },
         bits: {
             item: 'BITS',
@@ -51,12 +49,12 @@ module.exports = {
             description: 'Reclaim ITEMS for half the purchase cost of their combined ITEMS.\nClick to enable and click ITEM to reclaim.',
         },
         refine: {
-            item: 'REFINE',
-            description: 'Refine ITEMS currently in I-COMBINATOR into more powerful variants',
+            item: 'COMBINE',
+            description: <p>combine the selected items.<br />hover over an item to see <b>RECIPES</b>.</p>,
         },
         refill: {
             item: 'REFILL',
-            description: 'Refill the VBOX with new ITEMS.',
+            description: 'Refill the VBOX with new items.',
         },
         equipSkills: {
             item: 'QUICK ACCESS - SKILLS',
diff --git a/client/src/events.jsx b/client/src/events.jsx
index f378ba24..f2e5d498 100644
--- a/client/src/events.jsx
+++ b/client/src/events.jsx
@@ -1,4 +1,5 @@
 const eachSeries = require('async/eachSeries');
+const sample = require('lodash/sample');
 
 const actions = require('./actions');
 const { TIMES } = require('./constants');
@@ -179,6 +180,7 @@ function registerEvents(store) {
                 store.dispatch(actions.setActiveConstruct(first));
             }
         }
+        if (v.phase === 'Finished') setGame(null);
         return store.dispatch(actions.setInstance(v));
     }
 
@@ -186,6 +188,53 @@ function registerEvents(store) {
         return store.dispatch(actions.setItemInfo(v));
     }
 
+    function setDemo(d) {
+        const initial = {
+            players: d,
+            combiner: [],
+            items: ['Red', 'Red', 'Attack'],
+            equipped: false,
+            equipping: false,
+        };
+
+        const startDemo = () => {
+            console.log(initial);
+            store.dispatch(actions.setDemo(initial));
+            store.dispatch(actions.setAnimTarget(null));
+            setTimeout(() => store.dispatch(actions.setDemo(Object.assign({}, initial, { combiner: [0] }))), 2000);
+            setTimeout(() => store.dispatch(actions.setDemo(Object.assign({}, initial, { combiner: [0, 1] }))), 4000);
+            setTimeout(() => store.dispatch(actions.setDemo(Object.assign({}, initial, { combiner: [0, 1, 2] }))), 6000);
+            setTimeout(() => store.dispatch(actions.setDemo(Object.assign({}, initial, { combiner: [], items: ['Strike', '', ''] }))), 8000);
+            setTimeout(() => store.dispatch(actions.setDemo(Object.assign({}, initial, { combiner: [0], items: ['Strike', '', ''], equipping: true }))), 10000);
+            setTimeout(() => store.dispatch(actions.setDemo(Object.assign({}, initial, { combiner: [], items: ['', '', ''], equipped: true, equipping: false }))), 12000);
+            setTimeout(() => store.dispatch(actions.setDemo(Object.assign({}, initial, { items: ['', '', ''], equipped: true, equipping: false }))), 12000);
+
+            setTimeout(() => {
+                const { itemInfo } = store.getState();
+                return store.dispatch(actions.setAnimTarget({
+                    skill: sample(itemInfo.items.filter(i => i.skill)).item,
+                    constructId: d[1].constructs[0].id,
+                    player: false,
+                    direction: 0,
+                }));
+            }, 14000);
+
+            setTimeout(() => {
+                const { itemInfo } = store.getState();
+                return store.dispatch(actions.setAnimTarget({
+                    skill: sample(itemInfo.items.filter(i => i.skill)).item,
+                    constructId: d[1].constructs[1].id,
+                    player: true,
+                    direction: 0,
+                }));
+            }, 16000);
+
+            setTimeout(startDemo, 20000);
+        };
+
+        startDemo();
+    }
+
     // events.on('SET_PLAYER', setInstance);
 
     // events.on('SEND_SKILL', function skillActive(gameId, constructId, targetConstructId, skill) {
@@ -229,6 +278,7 @@ function registerEvents(store) {
         setAccountInstances,
         setActiveItem,
         setActiveSkill,
+        setDemo,
         setConstructList,
         setNewConstruct,
         setGame,
diff --git a/client/src/reducers.jsx b/client/src/reducers.jsx
index 496a5acc..cfc6dad5 100644
--- a/client/src/reducers.jsx
+++ b/client/src/reducers.jsx
@@ -23,6 +23,8 @@ module.exports = {
     animTarget:         createReducer(null, 'SET_ANIM_TARGET'),
     animText:           createReducer(null, 'SET_ANIM_TEXT'),
 
+    demo:               createReducer(null, 'SET_DEMO'),
+
     combiner:           createReducer([], 'SET_COMBINER'),
     constructs:         createReducer([], 'SET_CONSTRUCTS'),
     constructEditId:    createReducer(null, 'SET_CONSTRUCT_EDIT_ID'),
diff --git a/client/src/socket.jsx b/client/src/socket.jsx
index a2ab9217..a6a97162 100644
--- a/client/src/socket.jsx
+++ b/client/src/socket.jsx
@@ -130,6 +130,10 @@ function createSocket(events) {
         send(['InstanceReady', { instance_id: instanceId }]);
     }
 
+    function sendInstanceAbandon(instanceId) {
+        send(['InstanceAbandon', { instance_id: instanceId }]);
+    }
+
     function sendMtxApply(constructId, mtx, name) {
         send(['MtxConstructApply', { construct_id: constructId, mtx, name }]);
         if (mtx === 'Rename') {
@@ -202,10 +206,14 @@ function createSocket(events) {
         events.setItemInfo(info);
     }
 
+    function onDemo(v) {
+        events.setDemo(v);
+    }
+
     let pongTimeout;
     function onPong() {
         events.setPing(Date.now() - ping);
-        // pongTimeout = setTimeout(sendPing, 1000);
+        pongTimeout = setTimeout(sendPing, 10000);
     }
 
     // -------------
@@ -227,6 +235,7 @@ function createSocket(events) {
         InstanceState: onInstanceState,
         ItemInfo: onItemInfo,
         Pong: onPong,
+        Demo: onDemo,
 
         QueueRequested: () => events.notify('pvp queue request received'),
         QueueJoined: () => events.notify('you have joined the pvp queue'),
@@ -324,6 +333,7 @@ function createSocket(events) {
         sendGameSkillClear,
         sendGameTarget,
 
+        sendInstanceAbandon,
         sendInstanceReady,
         sendInstancePractice,
         sendInstanceQueue,
diff --git a/server/src/account.rs b/server/src/account.rs
index db90e6a6..5eaeafd4 100644
--- a/server/src/account.rs
+++ b/server/src/account.rs
@@ -288,15 +288,11 @@ pub fn set_subscribed(tx: &mut Transaction, id: Uuid, subscribed: bool) -> Resul
     Ok(name)
 }
 
-pub fn create(name: &String, password: &String, code: &String, tx: &mut Transaction) -> Result<String, MnmlHttpError> {
+pub fn create(name: &String, password: &String, tx: &mut Transaction) -> Result<String, MnmlHttpError> {
     if password.len() < PASSWORD_MIN_LEN {
         return Err(MnmlHttpError::PasswordUnacceptable);
     }
 
-    if code.to_lowercase() != "grep842" {
-        return Err(MnmlHttpError::InvalidCode);
-    }
-
     if name.len() == 0 {
         return Err(MnmlHttpError::AccountNameNotProvided);
     }
diff --git a/server/src/http.rs b/server/src/http.rs
index c7475ee7..068234f3 100644
--- a/server/src/http.rs
+++ b/server/src/http.rs
@@ -52,8 +52,6 @@ pub enum MnmlHttpError {
     PasswordUnacceptable,
     #[fail(display="incorrect token. refresh or logout of existing sessions")]
     TokenDoesNotMatch,
-    #[fail(display="invalid code. https://discord.gg/YJJgurM")]
-    InvalidCode,
 }
 
 impl From<bcrypt::BcryptError> for MnmlHttpError {
@@ -129,7 +127,6 @@ impl From<MnmlHttpError> for IronError {
             MnmlHttpError::PasswordUnacceptable => (m_err.compat(), status::BadRequest),
 
             MnmlHttpError::PasswordNotMatch |
-            MnmlHttpError::InvalidCode |
             MnmlHttpError::TokenDoesNotMatch |
             MnmlHttpError::Unauthorized => (m_err.compat(), status::Unauthorized),
 
@@ -211,7 +208,6 @@ fn token_res(token: String) -> Response {
 struct RegisterBody {
     name: String,
     password: String,
-    code: String,
 }
 
 fn register(req: &mut Request) -> IronResult<Response> {
@@ -224,7 +220,7 @@ fn register(req: &mut Request) -> IronResult<Response> {
     let db = state.pool.get().or(Err(MnmlHttpError::DbError))?;
     let mut tx = db.transaction().or(Err(MnmlHttpError::DbError))?;
 
-    match account::create(&params.name, &params.password, &params.code, &mut tx) {
+    match account::create(&params.name, &params.password, &mut tx) {
         Ok(token) => {
             tx.commit().or(Err(MnmlHttpError::ServerError))?;
             Ok(token_res(token))
diff --git a/server/src/instance.rs b/server/src/instance.rs
index 58a7feeb..3e489c39 100644
--- a/server/src/instance.rs
+++ b/server/src/instance.rs
@@ -316,10 +316,6 @@ impl Instance {
     }
 
     fn finish_condition(&mut self) -> bool {
-        if self.rounds.len() < 4 {
-            return false;
-        }
-
         // tennis
         for player in self.players.iter() {
             if player.score == Score::Win {
@@ -327,6 +323,10 @@ impl Instance {
                 return true;
             }
         }
+        // Game defaults to lose otherwise
+        if self.rounds.len() < 4 {
+            return false;
+        }
 
         // both players afk
         if self.players.iter().all(|p| p.score == Score::Zero) {
@@ -458,6 +458,13 @@ impl Instance {
             .ok_or(err_msg("account not in instance"))
     }
 
+    fn account_opponent(&mut self, account: Uuid) -> Result<&mut Player, Error> {
+        self.players
+            .iter_mut()
+            .find(|p| p.id != account)
+            .ok_or(err_msg("opponent not in instance"))
+    }
+
     pub fn vbox_action_allowed(&self, account: Uuid) -> Result<(), Error> {
         if self.players.iter().find(|p| p.id == account).is_none() {
             return Err(err_msg("player not in this instance"));
@@ -739,6 +746,14 @@ pub fn pvp(tx: &mut Transaction, a: &Account, b: &Account) -> Result<Instance, E
     instance_update(tx, instance)
 }
 
+pub fn instance_abandon(tx: &mut Transaction, account: &Account, instance_id: Uuid) -> Result<RpcMessage, Error> {
+    let mut instance = instance_get(tx, instance_id)?;
+    instance.account_player(account.id)?.set_lose();
+    instance.account_opponent(account.id)?.set_win();
+    instance.next_round();
+
+    Ok(RpcMessage::InstanceState(instance_update(tx, instance)?))
+}
 
 pub fn instance_ready(tx: &mut Transaction, account: &Account, instance_id: Uuid) -> Result<RpcMessage, Error> {
     let mut instance = instance_get(tx, instance_id)?;
@@ -800,6 +815,25 @@ pub fn bot_instance() -> Instance {
     return instance;
 }
 
+pub fn demo() -> Result<Vec<Player>, Error> {
+    let bot = bot_player();
+
+    // generate bot imgs for the client to see
+    for c in bot.constructs.iter() {
+        img::molecular_write(c.img)?;
+    };
+
+    let bot2 = bot_player();
+
+    // generate bot imgs for the client to see
+    for c in bot2.constructs.iter() {
+        img::molecular_write(c.img)?;
+    };
+
+
+    Ok(vec![bot, bot2])
+}
+
 #[cfg(test)]
 mod tests {
     use super::*;
diff --git a/server/src/mob.rs b/server/src/mob.rs
index 6bb6aaf1..2cab954b 100644
--- a/server/src/mob.rs
+++ b/server/src/mob.rs
@@ -27,3 +27,4 @@ pub fn bot_player() -> Player {
     let constructs = instance_mobs(bot_id);
     Player::new(bot_id, &name(), constructs).set_bot(true)
 }
+
diff --git a/server/src/player.rs b/server/src/player.rs
index 5f6b3259..f5711200 100644
--- a/server/src/player.rs
+++ b/server/src/player.rs
@@ -99,6 +99,16 @@ impl Player {
         self
     }
 
+    pub fn set_win(&mut self) -> &mut Player {
+        self.score = Score::Win;
+        self
+    }
+
+    pub fn set_lose(&mut self) -> &mut Player {
+        self.score = Score::Lose;
+        self
+    }
+
     pub fn construct_get(&mut self, id: Uuid) -> Result<&mut Construct, Error> {
         self.constructs.iter_mut().find(|c| c.id == id).ok_or(err_msg("construct not found"))
     }
diff --git a/server/src/rpc.rs b/server/src/rpc.rs
index d8ce6405..4f73e17f 100644
--- a/server/src/rpc.rs
+++ b/server/src/rpc.rs
@@ -21,10 +21,12 @@ use account;
 use construct::{Construct};
 use events::{Event};
 use game::{Game, game_state, game_skill, game_skill_clear, game_ready};
-use instance::{Instance, instance_state, instance_practice, instance_ready};
+use instance::{Instance, instance_state, instance_practice, instance_ready, instance_abandon, demo};
 use item::{Item, ItemInfoCtr, item_info};
 use mtx;
 use mail;
+
+use player::{Player};
 use payments;
 use mail::Email;
 use pg::{Db};
@@ -41,6 +43,8 @@ pub enum RpcMessage {
     AccountInstances(Vec<Instance>),
     AccountShop(mtx::Shop),
 
+    Demo(Vec<Player>),
+
     ConstructSpawn(Construct),
     GameState(Game),
     ItemInfo(ItemInfoCtr),
@@ -88,6 +92,7 @@ enum RpcRequest {
 
     InstanceQueue {},
     InstancePractice {},
+    InstanceAbandon { instance_id: Uuid },
     InstanceReady { instance_id: Uuid },
     InstanceState { instance_id: Uuid },
 
@@ -184,6 +189,8 @@ impl Connection {
                         Ok(instance_ready(&mut tx, account, instance_id)?),
                     RpcRequest::InstanceState { instance_id } =>
                         Ok(instance_state(&mut tx, instance_id)?),
+                    RpcRequest::InstanceAbandon { instance_id } =>
+                        Ok(instance_abandon(&mut tx, account, instance_id)?),
 
                     RpcRequest::VboxAccept { instance_id, group, index } =>
                         Ok(RpcMessage::InstanceState(vbox_accept(&mut tx, account, instance_id, group, index)?)),
@@ -268,6 +275,8 @@ impl Handler for Connection {
 
             // tx should do nothing
             tx.commit().unwrap();
+        } else {
+            self.ws.send(RpcMessage::Demo(demo().unwrap())).unwrap();
         }
 
         Ok(())