diff --git a/client/animations.test.js b/client/animations.test.js
index 96a91b4e..fa76c5dd 100644
--- a/client/animations.test.js
+++ b/client/animations.test.js
@@ -1,4 +1,4 @@
-require('./assets/styles/styles.css');
+require('./assets/styles/styles.less');
 require('./assets/styles/styles.mobile.css');
 require('./assets/styles/instance.less');
 require('./assets/styles/instance.mobile.css');
diff --git a/client/assets/styles/colours.less b/client/assets/styles/colours.less
index 8eb0fde0..a6962591 100644
--- a/client/assets/styles/colours.less
+++ b/client/assets/styles/colours.less
@@ -4,9 +4,12 @@
 @white: #f5f5f5; // whitesmoke
 @purple: #9355b5; // 6lack - that far cover
 
-@darkgray: #222;
-@gray: #333;
-
+@gray: #222;
+@gray-box: #222;
+@gray-exists: #444;
+@gray-hint: #666;
+@gray-hover: #888;
+@gray-focus: whitesmoke;
 
 svg {
     stroke: none;
diff --git a/client/assets/styles/instance.less b/client/assets/styles/instance.less
index 77a2efc9..2681567d 100644
--- a/client/assets/styles/instance.less
+++ b/client/assets/styles/instance.less
@@ -1,6 +1,4 @@
-/*
-    INSTANCE
-*/
+@import 'colours.less';
 
 .instance {
     overflow-x: hidden;
@@ -92,7 +90,7 @@
 }
 
 .vbox-combiner-arrow {
-    color: #444;
+    color: @gray-hint;
     grid-area: carrow;
     display: block;
     text-align: center;
@@ -109,7 +107,7 @@
     margin: 1em 0.25em 0 0.25em;
     grid-area: varrow;
     font-size: 2em;
-    color: #444;
+    color: @gray-hint;
 }
 
 .vbox-combiner button {
@@ -134,7 +132,7 @@
 
 .arrow {
     grid-area: arrow;
-    color: #444;
+    color: @gray-hint;
 }
 
 @keyframes action {
@@ -350,8 +348,7 @@
 
 .equipping, .receiving {
     transition: border-color 0.5s ease-in;
-    border-color: whitesmoke;
-    border-width: 2px;
+    border: 2px dashed @gray-hint;
 }
 
 .thresholds {
diff --git a/client/assets/styles/styles.css b/client/assets/styles/styles.less
similarity index 98%
rename from client/assets/styles/styles.css
rename to client/assets/styles/styles.less
index 138c51a6..3ff5b031 100644
--- a/client/assets/styles/styles.css
+++ b/client/assets/styles/styles.less
@@ -1,3 +1,5 @@
+@import 'colours.less';
+
 /*
     GLOBAL
 */
@@ -6,7 +8,7 @@ html, body, #mnml {
     /*width: 100%;*/
     margin: 0;
 
-    background-color: #000000;
+    background-color: black;
     font-family: 'Jura';
     color: whitesmoke;
     font-size: 14pt;
@@ -146,7 +148,7 @@ button, input {
     color: whitesmoke;
     height: auto;
     border-width: 2px;
-    border-color: #333;
+    border-color: @gray-exists;
     border-radius: 0;
     letter-spacing: 0.25em;
     box-sizing: border-box;
@@ -162,13 +164,13 @@ button, input {
 
 button:hover {
     color: whitesmoke;
-    border-color: #888;
+    border-color: @gray-hover;
 }
 
 button:focus {
     /*colour necesary to bash skellington*/
-    color: whitesmoke;
-    border-color: whitesmoke;
+    color: @gray-focus;
+    border-color: @gray-focus;
 }
 
 a {
diff --git a/client/assets/styles/vbox.less b/client/assets/styles/vbox.less
index 074a813f..b24e2cca 100644
--- a/client/assets/styles/vbox.less
+++ b/client/assets/styles/vbox.less
@@ -3,10 +3,6 @@
 .vbox {
     margin-bottom: 2em;
 
-    .vbox-section {
-        // border: 2px solid #444;
-    }
-
     .vbox-hdr {
         margin-bottom: 1em;
         height: 2em;
@@ -35,7 +31,7 @@
     .vbox-btn {
         width: 100%;
         margin: 0;
-        background-color: @gray;
+        background-color: @gray-box;
         border-width: 0;
 
         height: 3em;
diff --git a/client/index.js b/client/index.js
index 42505427..a5a631f2 100644
--- a/client/index.js
+++ b/client/index.js
@@ -1,4 +1,4 @@
-require('./assets/styles/styles.css');
+require('./assets/styles/styles.less');
 require('./assets/styles/styles.mobile.css');
 require('./assets/styles/instance.less');
 require('./assets/styles/vbox.less');
diff --git a/client/src/components/anims/blast.jsx b/client/src/components/anims/blast.jsx
index 73e6e237..b8163225 100644
--- a/client/src/components/anims/blast.jsx
+++ b/client/src/components/anims/blast.jsx
@@ -42,23 +42,18 @@ class Blast extends Component {
                 transform-box='fill-box'
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 300 300">
-                <defs>
-                    <filter id="blastFilter">
-                        <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
-                        <feMerge>
-                            <feMergeNode />
-                            <feMergeNode in="SourceGraphic" />
-                        </feMerge>
-                    </filter>
-                </defs>
-                <g>
-                    {times(50, () => (
-                        <g>
-                            <rect filter="url(#blastFilter)" class="blue" x="150" y="200" width="3" height="5" />
-                            <rect filter="url(#blastFilter)" class="white" x="150" y="200" width="1" height="3" />
-                        </g>
-                    ))}
-                </g>
+                {times(50, () => (
+                    <g>
+                        <rect stroke-width="0" fill={COLOURS.BLUE} x="150" y="200" width="2" height="2" />
+                        <rect stroke-width="0" fill={COLOURS.WHITE} x="150" y="200" width="1" height="1" />
+                    </g>
+                ))}
+                {times(50, () => (
+                    <g>
+                        <rect stroke-width="0" fill={COLOURS.BLUE} x="150" y="200" width="3" height="3" />
+                        <rect stroke-width="0" fill={COLOURS.WHITE} x="150" y="200" width="2" height="2" />
+                    </g>
+                ))}
             </svg>
         );
     }
@@ -76,7 +71,7 @@ class Blast extends Component {
         this.animations.push(anime({
             targets: ['#blast g'],
             transform: () => `
-                translate(${anime.random(-100, 100)} ${anime.random(-100, 100)})
+                translate(${anime.random(-150, 150)} ${anime.random(-150, 150)})
             `,
             style: { rotate: anime.random(-180, 180) },
             easing: 'easeOutCubic',
diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx
index 6d588238..67b4808f 100644
--- a/client/src/components/vbox.component.jsx
+++ b/client/src/components/vbox.component.jsx
@@ -184,13 +184,15 @@ function Vbox(args) {
 
         const selected = vboxSelected[0] === group && vboxSelected[1] === index;
 
+        // state not yet set in double click handler
+        function onDblClick(e) {
+            sendVboxAccept(group, index);
+            e.stopPropagation();
+        }
+
         function onClick(e) {
             e.stopPropagation();
-            // double clicked
-            if (selected) {
-                return vboxBuySelected();
-            }
-
+            if (selected) return clearVboxSelected();
             return setVboxSelected([group, index]);
         }
 
@@ -201,7 +203,8 @@ function Vbox(args) {
                 <button
                     class={classes}
                     onMouseOver={e => vboxHover(e, v)}
-                    onClick={onClick}>
+                    onClick={onClick}
+                    onDblClick={onDblClick} >
                     {shapes[v]()}
                 </button>
             );
@@ -211,6 +214,7 @@ function Vbox(args) {
             <button
                 class={classes}
                 onClick={onClick}
+                onDblClick={onDblClick}
                 onMouseOver={e => vboxHover(e, v)}>
                 {v}
             </button>
@@ -361,7 +365,7 @@ function Vbox(args) {
         return (
             <div class='vbox-section'
                 onClick={inventoryClick}
-                style={vboxSelecting ? { cursor: 'pointer' } : null}
+                style={vboxSelecting || itemUnequip ? { cursor: 'pointer' } : null}
                 onMouseOver={e => hoverInfo(e, 'inventory')}>
                 <div class="vbox-hdr">
                     <h3 onTouchStart={e => e.target.scrollIntoView(true)}>INVENTORY</h3>