diff --git a/app/src/App.vue b/app/src/App.vue
index 9c19e5cfdf25d742613c29bd5f61d869b8598749..8b602c7b43b9fb9a68843360644e5e8c5c394de6 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -1,23 +1,21 @@
 <template>
   <div id="app">
     <div id="nav">
-      <router-link to="/">Home</router-link>|
+      <router-link to="/">Home</router-link>&nbsp;|
       <router-link to="/about">About</router-link>
     </div>
+    <h1>nodenogg.in</h1>
     <router-view />
   </div>
 </template>
 
 <style>
+@import url('https://rsms.me/inter/inter.css');
+
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
+  font-family: 'Inter var', Helvetica, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-
-}
-
-#nav {
-  padding: 30px;
 }
 
 #nav a {
diff --git a/app/src/components/DeBug.vue b/app/src/components/DeBug.vue
index 4591fcd9722dba5b3cde810ef5c15ac39aca562d..68c32af54caa4cd3d7d9bdd185f55ae392d4390e 100644
--- a/app/src/components/DeBug.vue
+++ b/app/src/components/DeBug.vue
@@ -3,14 +3,14 @@
     <hr />
     <!-- <h2>Debug Options</h2> -->
     <h4>LAST UPDATE 29th Feb 2020.</h4>
-    <p>You need to know what these buttons do before you press them.</p>
+    <p>You need to know what this button does before you press it.</p>
     <button class="danger" @click="removeLocal()">Join another microcosm</button>
     <!-- <button @click="exportStorage()">Export my contributions</button>
     <button class="danger" v-on:click="deleteClient">
       Delete my contributions (inc. attachments) permanently
     </button>
     <button @click="handleConnection()">Online check</button>-->
-    <p>That's why they are red.</p>
+    <hr />
   </div>
 </template>
 
@@ -79,6 +79,29 @@ export default {
 li:before {
   content: '';
 }
+.danger {
+  background-color: red;
+}
+
+button {
+  font-size: 1em;
+  touch-action: manipulation;
+  color: white;
+  border: none;
+  outline: none;
+  border-radius: 8px;
+  box-shadow: 1px 1px 1px #000000;
+  padding: 0.6em;
+}
+
+hr {
+  display: block;
+  height: 1px;
+  border: 0;
+  border-top: 1px solid #ccc;
+  margin: 1em 0;
+  padding: 0;
+}
 
 b {
   background-color: yellow;
diff --git a/app/src/views/Home.vue b/app/src/views/Home.vue
index da2ed08868a682355d83dc29806725bd44453f45..c3b45dca63d793887b4123ec67ca27c7f8f78390 100644
--- a/app/src/views/Home.vue
+++ b/app/src/views/Home.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="home">
+    <DeBug />
     <div v-if="clientset">
       <OtherNodeslayer
         v-for="value in otherNodes"
@@ -16,7 +17,7 @@
       />
 
       <CanvasLayer />
-      <DeBug />
+
       <ControlsLayer />
     </div>
     <OnBoard v-else @clientAdded="clientAdded()" />