diff --git a/client/assets/styles/menu.less b/client/assets/styles/menu.less
index 7efd2b7a..dabdce28 100644
--- a/client/assets/styles/menu.less
+++ b/client/assets/styles/menu.less
@@ -112,4 +112,19 @@ section {
 
 .demo {
     margin-top: 5em;
+
+    .colour-info {
+        display: grid;
+        grid-template-columns: 2fr 1fr;
+
+        div {
+            display: flex;
+        }
+    }
+
+    svg {
+        flex: 1;
+        display: inline;
+    }
+
 }
\ No newline at end of file
diff --git a/client/src/components/demo.jsx b/client/src/components/demo.jsx
index 59ba8943..9e40b4c3 100644
--- a/client/src/components/demo.jsx
+++ b/client/src/components/demo.jsx
@@ -48,6 +48,15 @@ function Demo(args) {
         function inventoryElement() {
             return (
                 <div class='vbox-section'>
+                    <h2>VBOX PHASE</h2>
+                    <div class='colour-info'>
+                        <p>
+                            combine the colour base items with an array of skills and specialisations to build powerful variants.
+                        </p>
+                        <div>
+                            {shapes.Red()} {shapes.Green()} {shapes.Blue()}
+                        </div>
+                    </div>
                     <div class='vbox-items'>
                         {items.map((i, j) => inventoryBtn(i, j))}
                     </div>
diff --git a/client/src/components/welcome.jsx b/client/src/components/welcome.jsx
index 194880bb..759a6b88 100644
--- a/client/src/components/welcome.jsx
+++ b/client/src/components/welcome.jsx
@@ -55,6 +55,7 @@ function Welcome() {
                 </button>
             </div>
             {pageEl()}
+            <hr />
             <Demo />
         </main>
     );