diff --git a/client/src/components/cryp.battle.jsx b/client/src/components/cryp.battle.jsx
new file mode 100644
index 00000000..b388afc2
--- /dev/null
+++ b/client/src/components/cryp.battle.jsx
@@ -0,0 +1,100 @@
+const preact = require('preact');
+
+function CrypPanel() {    
+    return (
+        <div className="tile is-ancestor has-text-centered">
+            <div className="tile is-vertical is-parent">
+                <div className="tile">
+                    <div className="tile is-vertical is-child is-6">
+                        <p className="title"> Future Animation / Fizzy Area</p>
+                    </div>
+                    <div className="tile is-vertical is-child">
+                        <div className="columns">
+                            <div className ="column has-text-right">
+                                <figure className="image">
+                                    <svg width="160" height="160" data-jdenticon-value="Drake" />
+                                </figure>
+                            </div>
+                            <div className="column">
+                                <div className="columns">
+                                    <div className="column has-text-left">
+                                        <p className="title">Drake</p>
+                                        <p className="subtitle">Level 1</p>
+                                    </div>
+                                    <div className="column has-text-centered">
+                                        <p> Flying </p>
+                                        <p> Fire </p>
+                                        <p> Stone </p>
+                                    </div>
+                                    <div className="column has-text-centered">
+                                        <ul> <i className="fas fa-bomb" /> 5 </ul>
+                                        <ul> <i className="fas fa-walking" /> 5 </ul>
+                                        <ul> <i className="fas fa-shield-alt" /> 5 </ul>
+                                    </div>
+                                </div>
+                                <div className="has-text-centered">5 / 5 HP </div>
+                                <progress className="progress is-success" value="5" max="5"></progress> 
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <br />
+                <br />
+                <div className="tile">
+                    <div className="tile is-vertical is-child is-5">
+                        <div className="columns">
+                            <div className="column">
+                                <div className="columns">
+                                    <div className="column has-text-centered">
+                                        <ul> <i className="fas fa-bomb" /> 10 </ul>
+                                        <ul> <i className="fas fa-walking" /> 1 </ul>
+                                        <ul> <i className="fas fa-shield-alt" /> 40 </ul>
+                                    </div>
+                                    <div className="column has-text-centered">
+                                        <p> Walking </p>
+                                        <p> Water </p>
+                                        <p> Rock </p>
+                                    </div>
+                                    <div className="column has-text-right">
+                                        <p className="title">BB</p>
+                                        <p className="subtitle">Level 1</p>
+                                    </div>
+                                </div>
+                                <div className="has-text-centered">5 / 5 HP </div>
+                                <progress className="progress is-success" value="5" max="5"></progress> 
+                            </div>
+                            <div className ="column has-text-left is-narrow">
+                                <figure className="image">
+                                    <svg width="160" height="160" data-jdenticon-value="Turtle" />
+                                </figure>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="tile is-vertical">
+                        <div className="columns">
+                            <div className="column is-one-quarter">
+                                <span className="button is-large is-info is-fullwidth is-rounded" >Ability 1</span>
+                                <br />
+                                <span className="button is-large is-info is-fullwidth is-rounded" >Ability 3</span>
+                            </div>
+                            <div className="column is-one-quarter">
+                                <span className="button is-large is-info is-fullwidth is-rounded" >Ability 2</span>
+                                <br />
+                                <span className="button is-large is-info is-fullwidth is-rounded" >Ability 4</span>
+                            </div>
+                            <div className="column">
+                                <p className="title"> Combat Log </p>
+                                <p> "bamboo basher" deals 0 dmg to "drake" (0 blocked / 1 hp remaining) </p>
+                                <p> "bamboo basher" deals 0 dmg to "drake" (0 blocked / 1 hp remaining) </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <br />
+
+            </div>
+        </div>
+    );
+}
+
+module.exports = CrypPanel;
diff --git a/client/src/components/cryps.panel.jsx b/client/src/components/cryps.panel.jsx
old mode 100755
new mode 100644
index a6801e17..a8fe1e84
--- a/client/src/components/cryps.panel.jsx
+++ b/client/src/components/cryps.panel.jsx
@@ -2,7 +2,6 @@ const preact = require('preact');
 
 function CrypPanel({ cryps, sendCombatPve }) {
     if (!cryps) return <div>not ready</div>;
-
     const crypPanels = cryps.map(cryp => (
         <div key={cryp.id} className="tile is-ancestor has-text-centered has-background-grey is-dark is-10">
             <div className="tile is-6">
@@ -43,11 +42,28 @@ function CrypPanel({ cryps, sendCombatPve }) {
             </div>
             <div className="tile is-parent is-6">
                 <section className="tile is-child notification has-background-grey is-dark">
-                    <p className="title">Stat Area</p>
-                    <p>{JSON.stringify(cryp.def)}</p>
-                    <p>{JSON.stringify(cryp.dmg)}</p>
-                    <p>{JSON.stringify(cryp.hp)}</p>
-                    <p>{JSON.stringify(cryp.stam)}</p>
+                    <p className="title">Cryp Stats</p>
+                    <p className="subtitle">Level - {cryp.lvl}</p>
+                    <div className="columns">
+                        <div className="column">
+                            <ul> Hit Points <i className="fas fa-plus" /> {cryp.hp.value} </ul>
+                            <ul> Attack Damage <i className="fas fa-bomb" /> {cryp.dmg.value} </ul>
+                        </div>
+                        <div className="column">
+                            <ul> Stamina <i className="fas fa-walking" /> {cryp.stam.value} </ul>
+                            <ul> Defense <i className="fas fa-shield-alt" /> {cryp.def.value} </ul>
+                        </div>
+                    </div>
+                    <br />
+                    Progress to next level
+                    <div className="columns">
+                        <div className="column is-10">
+                            <progress className="progress is-success" value={cryp.xp} max="4"></progress> 
+                        </div>
+                        <div className="column has-text-left has-text-weight-bold">
+                            {cryp.xp} / 4 XP
+                        </div>
+                    </div>                    
                     <button
                         className="button is-success"
                         type="submit"
diff --git a/client/src/main.jsx b/client/src/main.jsx
old mode 100644
new mode 100755
index de52979f..90828917
--- a/client/src/main.jsx
+++ b/client/src/main.jsx
@@ -11,6 +11,7 @@ const createSocket = require('./socket');
 
 const CrypsContainer = require('./components/cryps.container');
 const LoginContainer = require('./components/login.container');
+const CrypBattle = require('./components/cryp.battle');
 // const Navbar = require('./components/navbar');
 
 // Redux Store
@@ -39,6 +40,8 @@ const Cryps = () => (
         <LoginContainer />
         <div id="fizzytext" />
         <CrypsContainer />
+        <br />
+        <CrypBattle />
     </section>
 );