diff --git a/client/assets/styles/instance.less b/client/assets/styles/instance.less
index 4b7cd9de..04077c41 100644
--- a/client/assets/styles/instance.less
+++ b/client/assets/styles/instance.less
@@ -287,66 +287,80 @@
     flex: 1 0 100%;
 }
 
+// .equipping {
+//     position: relative;
+// }
+
+// .equipping::before {
+//     content: '';
+//     position: absolute;
+//     top: 2px;
+//     left: 50%;
+//     width: 100%;
+//     height: 2px;
+//     transform-origin: center;
+//     background-color: whitesmoke;
+//     animation: equipping-skill 2s infinite ease-out alternate;
+//     opacity: 0;
+// }
+
+// .equipping::after {
+//     content: '';
+//     position: absolute;
+//     bottom: 2px;
+//     left: 50%;
+//     width: 100%;
+//     height: 2px;
+//     transform-origin: center;
+//     background-color: whitesmoke;
+//     animation: equipping-skill 2s infinite ease-out alternate;
+//     opacity: 0;
+//     animation-delay: 0.75s
+// }
+
+// @keyframes equipping-skill {
+//     from {
+//         transform: translate(-50%, 0) scaleX(0);
+//     }
+
+//     to {
+//         transform: translate(-50%, 0) scaleX(0.75);
+//         opacity: 1;
+//     }
+// }
+
+// .equip-spec {
+//     position: relative;
+//     stroke: #333;
+// }
+
+// .equip-spec::after {
+//     content: '';
+//     position: absolute;
+//     bottom: 2px;
+//     left: 50%;
+//     width: 100%;
+//     height: 2px;
+//     transform-origin: center;
+//     background-color: whitesmoke;
+//     animation: equipping-skill 2s infinite ease-out alternate;
+//     opacity: 0;
+// }
+
 .equipping {
-  position: relative;
+    animation: equipping 2s infinite ease-in-out alternate;
 }
 
-.equipping::before {
-    content: '';
-    position: absolute;
-    top: 2px;
-    left: 50%;
-    width: 100%;
-    height: 2px;
-    transform-origin: center;
-    background-color: whitesmoke;
-    animation: equipping-skill 2s infinite ease-out alternate;
-    opacity: 0;
-}
-
-.equipping::after {
-    content: '';
-    position: absolute;
-    bottom: 2px;
-    left: 50%;
-    width: 100%;
-    height: 2px;
-    transform-origin: center;
-    background-color: whitesmoke;
-    animation: equipping-skill 2s infinite ease-out alternate;
-    opacity: 0;
-    animation-delay: 0.75s
-}
-
-@keyframes equipping-skill {
+@keyframes equipping {
     from {
-        transform: translate(-50%, 0) scaleX(0);
+        border-color: #444;
     }
 
     to {
-        transform: translate(-50%, 0) scaleX(0.75);
-        opacity: 1;
+        border-color: whitesmoke;
     }
 }
 
-.equip-spec {
-    position: relative;
-    stroke: #333;
-}
-
-.equip-spec::after {
-    content: '';
-    position: absolute;
-    bottom: 2px;
-    left: 50%;
-    width: 100%;
-    height: 2px;
-    transform-origin: center;
-    background-color: whitesmoke;
-    animation: equipping-skill 2s infinite ease-out alternate;
-    opacity: 0;
-}
-
 .thresholds {
     display: flex;
     flex-flow: column;
diff --git a/client/assets/styles/vbox.less b/client/assets/styles/vbox.less
index f1947ce3..4af09140 100644
--- a/client/assets/styles/vbox.less
+++ b/client/assets/styles/vbox.less
@@ -78,9 +78,18 @@
             background: @white;
             border: 1px solid @white;
 
+            // overwrite the classes on white svg elements
             ellipse.white {
                 stroke: black;
             }
+
+            rect.white {
+                stroke: black;
+            }
+
+            polygon.white {
+                stroke: black;
+            }
         }
     }
 
diff --git a/client/src/animations.socket.jsx b/client/src/animations.socket.jsx
index ce2e883e..c1567fa5 100644
--- a/client/src/animations.socket.jsx
+++ b/client/src/animations.socket.jsx
@@ -41,7 +41,10 @@ function createSocket(store) {
             store.dispatch(actions.setAnimFocus(animations.getFocusTargets(r)));
 
             if (sequence.includes('START_SKILL')) store.dispatch(actions.setAnimSource(anims.animSource));
-            if (sequence.includes('END_SKILL')) store.dispatch(actions.setAnimTarget(anims.animTarget));
+            if (sequence.includes('END_SKILL')) {
+                store.dispatch(actions.setAnimTarget(anims.animTarget));
+                if (!['Banish', 'Invert'].includes(anims.animTarget.skill)) store.dispatch(actions.setAnimCb(cb));
+            }
             if (sequence.includes('POST_SKILL')) {
                 // timeout to prevent text classes from being added too soon
                 setTimeout(
@@ -49,15 +52,14 @@ function createSocket(store) {
                     timeout - TIMES.POST_SKILL_DURATION_MS
                 );
             }
-
             return setTimeout(() => {
                 store.dispatch(actions.setAnimSource(null));
                 store.dispatch(actions.setAnimTarget(null));
                 store.dispatch(actions.setAnimText(null));
                 store.dispatch(actions.setAnimFocus([]));
-                // We currently need another small timeout so that everything can properly dismount / unload
-                // Otherwise 3 x Attack on same target will only render the first time
-                return setTimeout(cb, 200);
+                if (!sequence.includes('END_SKILL')
+                    || ['Banish', 'Invert'].includes(anims.animTarget.skill)) return cb();
+                return true;
             }, timeout);
         }, err => {
             if (err) return console.error(err);
diff --git a/client/src/components/instance.constructs.jsx b/client/src/components/instance.constructs.jsx
index bda246d2..5a027298 100644
--- a/client/src/components/instance.constructs.jsx
+++ b/client/src/components/instance.constructs.jsx
@@ -144,7 +144,7 @@ function Construct(props) {
 
         if (!s) {
             const equipping = specList.includes(vbox.bound[itemEquip]);
-            const classes = `${equipping ? 'equip-spec' : 'gray'} empty`;
+            const classes = `${equipping ? 'equipping' : 'gray'} empty`;
             return (
                 <button key={i} class={classes} disabled={!equipping} >
                     {shapes.None()}
diff --git a/client/src/components/shapes.jsx b/client/src/components/shapes.jsx
index 760ae491..5c26096b 100644
--- a/client/src/components/shapes.jsx
+++ b/client/src/components/shapes.jsx
@@ -33,7 +33,7 @@ module.exports = {
     RedPower: () => circle(['red']),
     GreenPower: () => circle(['green']),
     BluePower: () => circle(['blue']),
-    Speed: () => triangle(['white']),
+    SpeedStat: () => triangle(['white']),
 
 
     // specs
@@ -58,12 +58,11 @@ module.exports = {
         <figcaption>Life</figcaption>
     </figure>,
 
-    // Speed:
-    // <figure>
-    //     {triangle(['white'])}
-    //     <figcaption>Speed</figcaption>
-    // </figure>,
-
+    Speed: () =>
+    <figure>
+        {triangle(['white'])}
+        <figcaption>Speed</figcaption>
+    </figure>,
 
     // Lifes Upgrades
     LifeGG: () =>
diff --git a/client/src/components/svgs/diamond.jsx b/client/src/components/svgs/diamond.jsx
index 736a13af..ab417697 100644
--- a/client/src/components/svgs/diamond.jsx
+++ b/client/src/components/svgs/diamond.jsx
@@ -4,9 +4,9 @@ module.exports = function triangle(classes) {
     return (
         <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 200 200" class={classes} transform="rotate(45)" >
-            <rect x="10" y="10" width="180" height="180"/>
-            <rect x="40" y="40" width="120" height="120"/>
-            <rect x="70" y="70" width="60" height="60"/>
+            <rect x="25" y="25" width="175" height="175"/>
+            <rect x="55" y="55" width="115" height="115"/>
+            <rect x="85" y="85" width="55" height="55"/>
         </svg>
     );
 };
diff --git a/client/src/utils.jsx b/client/src/utils.jsx
index 7349ccf6..a2e48f98 100644
--- a/client/src/utils.jsx
+++ b/client/src/utils.jsx
@@ -63,7 +63,7 @@ const STATS = {
         colour: 'blue',
         svg: shapes.circle,
     },
-    Speed: {
+    SpeedStat: {
         stat: 'speed',
         colour: 'white',
         svg: shapes.triangle,