diff --git a/client/src/components/invstats.jsx b/client/src/components/invstats.jsx
new file mode 100755
index 00000000..6bb81263
--- /dev/null
+++ b/client/src/components/invstats.jsx
@@ -0,0 +1,56 @@
+const preact = require('preact');
+
+// components all the way down
+
+function InvStats() {
+    return (
+        <div className="tile is-ancestor has-text-centered has-background-grey is-dark is-10">
+            <div className="tile is-6">
+                <div className="tile is-parent is-vertical is-3">
+                    <article className="tile is-child notification is-success">
+                        <p>Helm Slot</p>
+                    </article>
+                    <article className="tile is-child notification is-success">
+                        <p>Body Armor</p>
+                    </article>
+                    <article className="tile is-child notification is-success">
+                        <p>Gloves</p>
+                    </article>
+                    <article className="tile is-child notification is-success">
+                        <p>Boots</p>
+                    </article>
+                </div>
+                <div className="tile is-parent is-6">
+                    <article className="tile is-child notification is-info">
+                        <figure className="image">
+                            <svg width="160" height="160" data-jdenticon-value="UltimateCryp"  />
+                        </figure>
+                        <p className="title">Cryp#XYZ</p>
+                        <p className="subtitle">The big boy</p>
+                    </article>
+                </div>
+                <div className="tile is-parent is-vertical is-3">
+                    <article className="tile is-child notification is-dark">
+                        <p>Weapon</p>
+                    </article>
+                    <article className="tile is-child notification is-dark">
+                        <p>Jewellery</p>
+                    </article>
+                    <article className="tile is-child notification is-dark">
+                        <p>Artifact</p>
+                    </article>
+                </div>
+            </div>
+            <div className="tile is-parent is-6">
+                <article className="tile is-child notification has-background-grey is-dark">
+                    <p className="title">Stat Area</p>
+                </article>
+            </div>
+        </div>
+    );
+    // map is a function that is called on every element of an array
+    // so in this ^^ case it calls Icon('Mashy') which returns some jsx
+    // that gets put into the dom
+}
+
+module.exports = InvStats;