diff --git a/html-client/cryps.css b/html-client/cryps.css
index 61b6d22f..10df300f 100755
--- a/html-client/cryps.css
+++ b/html-client/cryps.css
@@ -19,15 +19,29 @@ button, input {
     border-color: whitesmoke;
     border-radius: 0;
     letter-spacing: 0.25em;
+    box-sizing: border-box;
+
+    /*the transitions */
+    transition-property: box-shadow;
+    transition-duration: 0.5s;
+    transition-delay: 0;
+    transition-timing-function: ease;
 }
 
-/*colour necesary to bash skellington*/
-button:hover {
+button:hover, button:focus {
+    /*colour necesary to bash skellington*/
     color: whitesmoke;
-    animation: whiteglow 2000ms infinite;
     border-color: whitesmoke;
 }
 
+button.right:hover, button.right:focus {
+    box-shadow: inset -0.5em 0 0 0 whitesmoke;
+}
+
+button.left:hover, button.left:focus {
+    box-shadow: inset 0.5em 0 0 0 whitesmoke;
+}
+
 /*
     MENU
 */
@@ -51,7 +65,7 @@ button:hover {
     height: 100%;
     margin: 0.5em;
     box-sizing: border-box;
-    border: 2px solid whitesmoke;
+    border: 1px solid black;
 }
 
 .background {
@@ -91,62 +105,29 @@ button:hover {
     fill: none;
     stroke-width: 4px;
     stroke-dasharray: 121, 242;
-    animation: pulse 2s infinite linear;
+    animation: saw 2s infinite linear;
 }
 
-@keyframes pulse {
-  0% {
-    stroke-dashoffset: 363;
-  }
-  100% {
-    stroke-dashoffset: 0;
-  }
-}
-
-
-@keyframes whiteglow {
+@keyframes saw {
     0% {
-        box-shadow: 0 0 0px whitesmoke;
-    }
-    20% {
-        box-shadow: 0 0 20px whitesmoke;
-    }
-    60% {
-        box-shadow: 0 0 20px whitesmoke;
+        stroke-dashoffset: 363;
     }
     100% {
-        box-shadow: 0 0 0px whitesmoke;
-    }
-}
-
-@keyframes greenglow {
-    0% {
-        box-shadow: 0 0 -20px forestgreen;
-    }
-    100% {
-        box-shadow: 0 0 30px forestgreen;
-        color: forestgreen;
-        border-color: forestgreen;
-    }
-}
-
-@keyframes whiteblackglow {
-    0% {
-        box-shadow: 0 0 0px black;
-    }
-    100% {
-        background: whitesmoke;
-        color: black;
-        box-shadow: 0 0 -30px black;
+        stroke-dashoffset: 0;
     }
 }
 
 /*
     INSTANCE
 */
+
 .green-btn:hover {
-    animation: greenglow 2s ease 0s 1 normal forwards;
-    animation-iteration-count: 1;
+    transition-property: all;
+    transition-duration: 2s;
+    transition-timing-function: ease;
+    color: forestgreen;
+    border-color: forestgreen;
+    /*box-shadow: inset -0.5em 0 0 0 forestgreen;*/
 }
 
 .instance-btn {
@@ -185,7 +166,6 @@ button:hover {
 
 .vbox-btn:hover {
     color: black;
-    animation: whiteblackglow 2s ease 0s 1 normal forwards;
 }
 
 .vbox-table {
@@ -304,9 +284,13 @@ button:hover {
     flex: 1 1 60%;
 }
 
-.cryp-skill-btn.active {
-    animation: whiteblackglow 1s ease 0s 1 normal forwards;
-    animation-iteration-count: 1;
+.cryp-skill-btn[disabled] {
+    color: #333333;
+}
+
+.game-cryp-ctr.ko {
+    animation: none;
+    opacity: 0.5;
 }
 
 .stack {
diff --git a/html-client/src/components/game.component.jsx b/html-client/src/components/game.component.jsx
index e0993850..1bf0dab9 100644
--- a/html-client/src/components/game.component.jsx
+++ b/html-client/src/components/game.component.jsx
@@ -48,10 +48,24 @@ function GamePanel(props) {
     }
 
     function Cryp(cryp) {
+        const ko = cryp.hp.value === 0 ? 'ko' : '';
+
         const skills = range(0, 4).map(i => {
-            const s = cryp.skills[i]
-                ? cryp.skills[i].skill
-                : (<span>&nbsp;</span>);
+            const s = cryp.skills[i];
+            if (!s) {
+                return (
+                    <button
+                        disabled='true'
+                        key={i}
+                        className='cryp-skill-btn disabled'>
+                        <span>&nbsp;</span>
+                    </button>
+                );
+            }
+
+            const cdText = cryp.skills[i].cd > 0
+                ? `- ${s.cd}`
+                : '';
 
             const highlight = activeSkill
                 ? activeSkill.crypId === cryp.id && activeSkill.skill === s
@@ -60,9 +74,11 @@ function GamePanel(props) {
             return (
                 <button
                     key={i}
-                    className={`cryp-skill-btn ${highlight ? 'active' : ''}`}
+                    disabled={!!cdText || ko}
+                    className={`cryp-skill-btn right ${highlight ? 'active' : ''}`}
                     type="submit"
-                    onClick={() => setActiveSkill(cryp.id, s)}>{s}
+                    onClick={() => setActiveSkill(cryp.id, s.skill)}>
+                    {s.skill} {cdText}
                 </button>
             );
         });
@@ -80,8 +96,9 @@ function GamePanel(props) {
             </figure>
         ));
 
+
         return (
-            <div className="game-cryp-ctr" >
+            <div className={`game-cryp-ctr ${ko}`} >
                 <div
                     key={cryp.id}
                     style={ activeSkill ? { cursor: 'pointer' } : {}}
@@ -160,7 +177,7 @@ function GamePanel(props) {
             <div className="row">
                 <div className="three columns">
                     <button
-                        className="instance-btn instance-ui-btn glow-btn"
+                        className="instance-btn instance-ui-btn left"
                         onClick={quit}>
                         Back
                     </button>
diff --git a/html-client/src/components/instance.component.jsx b/html-client/src/components/instance.component.jsx
index 88dce9a9..b6f37796 100644
--- a/html-client/src/components/instance.component.jsx
+++ b/html-client/src/components/instance.component.jsx
@@ -84,7 +84,7 @@ function InstanceComponent(args) {
             <div className="row">
                 <div className="three columns">
                     <button
-                        className="instance-btn instance-ui-btn glow-btn"
+                        className="instance-btn instance-ui-btn left"
                         onClick={quit}>
                         Menu
                     </button>
diff --git a/html-client/src/components/instance.list.component.jsx b/html-client/src/components/instance.list.component.jsx
index 4e158868..71a73008 100644
--- a/html-client/src/components/instance.list.component.jsx
+++ b/html-client/src/components/instance.list.component.jsx
@@ -8,20 +8,20 @@ function instanceList({ instances, setActiveInstance, sendInstanceJoin }) {
 
     const instanceJoin = (
         <button
-            className="instance-btn glow-btn"
+            className="instance-btn right"
             onClick={() => sendInstanceJoin()}>
             Join New Instance
         </button>
     );
 
-    const instancePanels = instances.map((instance) => {
+    const instancePanels = instances.map(instance => {
         const name = instance.instance === NULL_UUID
             ? 'Normal Mode'
             : `${instance.instance.substring(0, 5)}`;
 
         return (
             <button
-                className="instance-btn glow-btn"
+                className="instance-btn right"
                 key={instance.id}
                 onClick={() => setActiveInstance(instance)}>
                 {name}
diff --git a/html-client/src/components/vbox.component.jsx b/html-client/src/components/vbox.component.jsx
index 22127c8f..b8887027 100644
--- a/html-client/src/components/vbox.component.jsx
+++ b/html-client/src/components/vbox.component.jsx
@@ -33,12 +33,10 @@ function Vbox(args) {
             return sendVboxReclaim(i);
         }
 
-        if (combiner.indexOf(i) === -1) {
-            const insert = combiner.findIndex(j => j === null);
-            combiner[insert] = i;
-            return setCombiner(combiner);
-        }
-        return setCombiner([i, null, null]);
+        const insert = combiner.findIndex(j => j === null);
+        if (insert === -1) return setCombiner([i, null, null]);
+        combiner[insert] = i;
+        return setCombiner(combiner);
     }
 
     function combinerRmv(i) {
@@ -72,15 +70,25 @@ function Vbox(args) {
         );
     });
 
-    const boundTds = range(0, 9).map(i => (
-        <td
-            key={i}
-            draggable="true"
-            onDragStart={e => e.dataTransfer.setData('text', i)}
-            onClick={() => boundClick(i) }>
-            {convertVar(vbox.bound[i])}
-        </td>
-    ));
+    const boundTds = range(0, 9).map(i => {
+        if (combiner.indexOf(i) > -1) {
+            return (
+                <td
+                    key={i}>
+                    &nbsp;
+                </td>
+            );
+        }
+        return (
+            <td
+                key={i}
+                draggable="true"
+                onDragStart={e => e.dataTransfer.setData('text', i)}
+                onClick={() => boundClick(i) }>
+                {convertVar(vbox.bound[i])}
+            </td>
+        );
+    });
 
     const boundRows = [
         <tr key={0} >
diff --git a/server/WORKLOG.md b/server/WORKLOG.md
index 20afb1d7..2f7f6fc5 100644
--- a/server/WORKLOG.md
+++ b/server/WORKLOG.md
@@ -26,8 +26,6 @@ put ticks on stack at start of phase
 cryp vbox
   update defensives in skill.rs
 
-  Skill::Slay     -> red attack with bonus somethingorother for blue / maim no healing
-
 consolidate buffs debuffs and disables
   no more red/blue