diff --git a/html-client/cryps.css b/html-client/cryps.css
index 10df300f..30bf22b3 100755
--- a/html-client/cryps.css
+++ b/html-client/cryps.css
@@ -22,7 +22,7 @@ button, input {
     box-sizing: border-box;
 
     /*the transitions */
-    transition-property: box-shadow;
+    transition-property: all;
     transition-duration: 0.5s;
     transition-delay: 0;
     transition-timing-function: ease;
@@ -34,6 +34,10 @@ button:hover, button:focus {
     border-color: whitesmoke;
 }
 
+button.right[disabled]:hover, button.left[disabled]:hover {
+    box-shadow: none;
+}
+
 button.right:hover, button.right:focus {
     box-shadow: inset -0.5em 0 0 0 whitesmoke;
 }
@@ -66,6 +70,11 @@ button.left:hover, button.left:focus {
     margin: 0.5em;
     box-sizing: border-box;
     border: 1px solid black;
+
+    transition-property: border;
+    transition-duration: 0.5s;
+    transition-delay: 0;
+    transition-timing-function: ease;
 }
 
 .background {
@@ -182,10 +191,6 @@ button.left:hover, button.left:focus {
     text-transform: uppercase;
 }
 
-.vbox-table td div {
-    border: 1px solid whitesmoke;
-}
-
 .spacer {
     min-width: 100%;
 }
diff --git a/html-client/src/components/cryp.list.container.js b/html-client/src/components/cryp.list.container.jsx
similarity index 100%
rename from html-client/src/components/cryp.list.container.js
rename to html-client/src/components/cryp.list.container.jsx
diff --git a/html-client/src/components/game.container.jsx b/html-client/src/components/game.container.jsx
new file mode 100644
index 00000000..64149b37
--- /dev/null
+++ b/html-client/src/components/game.container.jsx
@@ -0,0 +1,51 @@
+const { connect } = require('preact-redux');
+
+const actions = require('../actions');
+
+const Game = require('./game.component');
+
+const addState = connect(
+    function receiveState(state) {
+        const { ws, game, account, activeSkill, activeIncoming } = state;
+
+        function selectSkillTarget(targetCrypId) {
+            if (activeSkill) {
+                return ws.sendGameSkill(game.id, activeSkill.crypId, targetCrypId, activeSkill.skill);
+            }
+            return false;
+        }
+
+        // intercept self casting skills
+        if (activeSkill && activeSkill.skill.self_targeting) {
+            ws.sendGameSkill(game.id, activeSkill.crypId, null, activeSkill.skill.skill);
+        }
+
+        function selectIncomingTarget(crypId) {
+            if (activeIncoming) {
+                return ws.sendGameTarget(game.id, crypId, activeIncoming);
+            }
+            return false;
+        }
+
+        return { game, account, activeSkill, activeIncoming, selectSkillTarget, selectIncomingTarget };
+    },
+
+    function receiveDispatch(dispatch) {
+        function setActiveSkill(crypId, skill) {
+            dispatch(actions.setActiveSkill(crypId, skill));
+        }
+
+        function setActiveIncoming(skillId) {
+            dispatch(actions.setActiveIncoming(skillId));
+        }
+
+        function quit() {
+            dispatch(actions.setGame(null));
+        }
+
+        return { setActiveSkill, setActiveIncoming, quit };
+    }
+
+);
+
+module.exports = addState(Game);
diff --git a/html-client/src/components/instance.component.jsx b/html-client/src/components/instance.component.jsx
index b6f37796..f4c70aa8 100644
--- a/html-client/src/components/instance.component.jsx
+++ b/html-client/src/components/instance.component.jsx
@@ -13,7 +13,7 @@ function Cryp(cryp, sendVboxApply, setInfo) {
             ? cryp.skills[i].skill
             : (<span>&nbsp;</span>);
 
-        return <button key={i} className="cryp-skill-btn" onClick={() => setInfo('item', s)}>{s}</button>;
+        return <button key={i} className="cryp-skill-btn right" onClick={() => setInfo('item', s)}>{s}</button>;
     });
 
     // needed for ondrop to fire
diff --git a/html-client/src/components/vbox.component.jsx b/html-client/src/components/vbox.component.jsx
index b8887027..1a6b891c 100644
--- a/html-client/src/components/vbox.component.jsx
+++ b/html-client/src/components/vbox.component.jsx
@@ -151,7 +151,7 @@ function Vbox(args) {
             <button
                 className="instance-btn instance-ui-btn vbox-btn"
                 onClick={() => sendVboxCombine()}>
-                repurpose
+                refine
             </button>
             {combinerElement}
         </div>
diff --git a/server/src/player.rs b/server/src/player.rs
index 0b7c3032..7645274a 100644
--- a/server/src/player.rs
+++ b/server/src/player.rs
@@ -118,7 +118,10 @@ pub fn player_create(tx: &mut Transaction, player: Player, account: &Account) ->
     return Ok(player);
 }
 
-pub fn player_update(tx: &mut Transaction, player: Player, ignore_phase: bool) -> Result<Player, Error> {
+pub fn player_update(tx: &mut Transaction, mut player: Player, ignore_phase: bool) -> Result<Player, Error> {
+    // sort vbox for niceness
+    player.vbox.bound.sort_unstable();
+
     // update the instance this player is associated with
     // if not a global player
     if player.instance != Uuid::nil() {