diff --git a/html-client/cryps.css b/html-client/cryps.css
index 30bf22b3..c666b385 100755
--- a/html-client/cryps.css
+++ b/html-client/cryps.css
@@ -1,14 +1,33 @@
 /*
     GLOBAL
 */
-body {
+html, body, .cryps {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+
     background-color: #000000;
     font-family: 'Jura';
     color: whitesmoke;
     font-size: 16pt;
-    padding: 0 2em;
-    /*overflow: hidden;*/
     user-select: none;
+    /*overflow: hidden;*/
+}
+
+html {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    height: 100%;
+}
+
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+/* main container */
+.cryps {
+    padding: 0 2em;
 }
 
 button, input {
@@ -49,8 +68,31 @@ button.left:hover, button.left:focus {
 /*
     MENU
 */
-.header {
+header {
     margin-bottom: 1em;
+    display: flex;
+    flex-flow: row;
+}
+
+.header-title {
+    flex: 1;
+    font-size: 2em;
+}
+
+.header-username {
+    letter-spacing: 0.25em;
+    font-size: 2em;
+    display: inline;
+}
+
+.header-status {
+    text-align: right;
+}
+
+.header-status svg {
+    margin-left: 1em;
+    height: 1em;
+    background-color: black;
 }
 
 .menu-cryps {
@@ -85,31 +127,11 @@ button.left:hover, button.left:focus {
     background-color: #000000
 }
 
-.cryps-title {
-    font-size: 200%;
-    display: inline;
-}
-
 .login {
     display: inline;
     margin-right: 0;
 }
 
-.header-username {
-    display: inline;
-    letter-spacing: 0.25em;
-}
-
-.header-status {
-    text-align: right;
-}
-
-.header-status svg {
-    margin-left: 1em;
-    height: 1em;
-    background-color: black;
-}
-
 .ping-path {
     fill: none;
     stroke-width: 4px;
diff --git a/html-client/src/components/body.component.jsx b/html-client/src/components/body.component.jsx
index ed411225..af8ec085 100644
--- a/html-client/src/components/body.component.jsx
+++ b/html-client/src/components/body.component.jsx
@@ -1,10 +1,8 @@
 // eslint-disable-next-line
 const preact = require('preact');
 const { connect } = require('preact-redux');
-const actions = require('../actions');
 
 const InstanceListContainer = require('./instance.list.container');
-const CrypSpawnContainer = require('./cryp.spawn.container');
 const CrypListContainer = require('./cryp.list.container');
 const GameContainer = require('./game.container');
 const InstanceContainer = require('./instance.container');
@@ -42,8 +40,6 @@ function renderBody(props) {
 
     return (
         <div>
-            <div className="background"/>
-            <CrypSpawnContainer />
             <section className="row" >
                 <div className="six columns">
                     <CrypListContainer />
diff --git a/html-client/src/components/header.component.jsx b/html-client/src/components/header.component.jsx
index a040c3ec..3dd2be8b 100644
--- a/html-client/src/components/header.component.jsx
+++ b/html-client/src/components/header.component.jsx
@@ -5,8 +5,8 @@ const LoginContainer = require('./login.container');
 
 function renderHeader() {
     return (
-        <header className="row header">
-            <h1 className="cryps-title six columns">
+        <header>
+            <h1 className="header-title">
                 cryps.gg
             </h1>
             <LoginContainer />
diff --git a/html-client/src/main.jsx b/html-client/src/main.jsx
index 6ba2a8e4..ecf02927 100644
--- a/html-client/src/main.jsx
+++ b/html-client/src/main.jsx
@@ -46,7 +46,7 @@ document.fonts.load('16pt "Jura"').then(() => {
     };
 
     const Cryps = () => (
-        <section>
+        <section className='cryps' >
             <Header />
             <Body />
         </section>
