diff --git a/html-client/cryps.css b/html-client/cryps.css
index f7ee492e..65140d09 100755
--- a/html-client/cryps.css
+++ b/html-client/cryps.css
@@ -51,7 +51,7 @@ button:hover {
     height: 100%;
     margin: 0.5em;
     box-sizing: border-box;
-    border: 2px solid whitesmoke;
+    border-width: 2px solid whitesmoke;
 }
 
 .background {
@@ -314,6 +314,11 @@ button:hover {
     color: #333333;
 }
 
+.game-cryp-ctr.ko {
+    animation: none;
+    opacity: 0.5;
+}
+
 .stack {
     display: flex;
     flex-flow: column;
diff --git a/html-client/src/components/game.component.jsx b/html-client/src/components/game.component.jsx
index 96afed24..2d50ee0f 100644
--- a/html-client/src/components/game.component.jsx
+++ b/html-client/src/components/game.component.jsx
@@ -48,6 +48,8 @@ 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];
             if (!s) {
@@ -72,10 +74,10 @@ function GamePanel(props) {
             return (
                 <button
                     key={i}
-                    disabled={!!cdText}
+                    disabled={!!cdText || ko}
                     className={`cryp-skill-btn ${highlight ? 'active' : ''}`}
                     type="submit"
-                    onClick={() => setActiveSkill(cryp.id, s)}>
+                    onClick={() => setActiveSkill(cryp.id, s.skill)}>
                     {s.skill} {cdText}
                 </button>
             );
@@ -94,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' } : {}}