diff --git a/web/public/index.html b/web/public/index.html
index 4123528..c46c86c 100644
--- a/web/public/index.html
+++ b/web/public/index.html
@@ -1,17 +1,24 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+<head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
+</head>
+<style>
+    body, html {
+        width: 100%;
+        height: 100%;
+    }
+</style>
+<body>
+<noscript>
+    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
+        Please enable it to continue.</strong>
+</noscript>
+<div id="app"></div>
+<!-- built files will be auto injected -->
+</body>
 </html>
diff --git a/web/src/components/Navbar.vue b/web/src/components/Navbar.vue
index d4cd1f8..2db61fb 100644
--- a/web/src/components/Navbar.vue
+++ b/web/src/components/Navbar.vue
@@ -1,11 +1,10 @@
 <template>
-  <nav class="navbar is-dark" role="navigation" aria-label="main navigation">
+  <nav class="navbar is-fixed-top is-black" role="navigation" aria-label="main navigation">
     <div class="navbar-brand">
-      <a class="navbar-item" href="/" >
-        <img src="../assets/undraw_server_q2pb.svg" width="60" height="150" />
+      <a class="navbar-item" href="/">
+        <img src="../assets/undraw_server_q2pb.svg" width="60" height="150"/>
         <h3 class="is-size-4">Ichnaea</h3>
       </a>
-
       <a
           role="button"
           class="navbar-burger burger"
@@ -18,10 +17,24 @@
         <span aria-hidden="true"></span>
       </a>
     </div>
-
     <div id="navbarBasicExample" class="navbar-menu">
       <div class="navbar-end">
+        <a class="navbar-item">
+                    <span class="icon mr-1">
+                        <i class="fa fa-user"></i>
+                    </span>
+          <span>{{ username }}</span>
+        </a>
+        <a class="navbar-item has-text-danger mr-2" @click="logout">
+                    <span class="icon mr-1">
+                        <i class="fa fa-sign-out-alt"></i>
+                    </span>
+          <span>Logout</span>
+        </a>
         <a class="navbar-item" href="https://github.com/xrazis/ichnaea" target="_blank">
+          <span class="icon mr-1">
+                        <i class="fas fa-book"></i>
+                    </span>
           Documentation
         </a>
       </div>
@@ -32,9 +45,25 @@
 import {Vue} from "vue-class-component";
 
 export default class Navbar extends Vue {
+  private username = '';
+
+  mounted() {
+    this.username = this.$store.getters.user.username
+  }
+
+  private logout() {
+    this.$store.dispatch('logout')
+        .then(() => this.$router.push('/'))
+        .catch((err: any) => {
+          console.log(err)
+          this.$router.push('/')
+        })
+  }
 }
 </script>
 
 <style scoped>
-
+.navbar {
+  height: 5vh;
+}
 </style>
\ No newline at end of file
diff --git a/web/src/components/Sidebar.vue b/web/src/components/Sidebar.vue
new file mode 100644
index 0000000..0ccc92b
--- /dev/null
+++ b/web/src/components/Sidebar.vue
@@ -0,0 +1,84 @@
+<template>
+  <aside class="menu has-background-black">
+    <div class="container mx-5 my-4">
+      <p class="menu-label">
+        General
+      </p>
+      <ul class="menu-list">
+        <li>
+          <a>
+          <span class="icon-text">
+            <span class="icon">
+               <i class="fas fa-digital-tachograph"/>
+            </span>
+              <span>&nbsp;Dashboard</span>
+          </span>
+          </a>
+        </li>
+        <li>
+          <a>
+          <span class="icon-text">
+            <span class="icon">
+               <i class="fas fa-users"/>
+            </span>
+              <span>&nbsp;Athletes</span>
+          </span>
+          </a>
+        </li>
+      </ul>
+      <p class="menu-label">
+        Athlete Data
+      </p>
+      <ul class="menu-list">
+        <li>
+          <a>
+          <span class="icon-text">
+            <span class="icon">
+               <i class="fas fa-table"/>
+            </span>
+              <span>&nbsp;Tables</span>
+          </span>
+          </a>
+        </li>
+        <li>
+          <a>
+          <span class="icon-text">
+            <span class="icon">
+               <i class="fas fa-chart-area"/>
+            </span>
+              <span>&nbsp;Charts</span>
+          </span>
+          </a>
+        </li>
+      </ul>
+    </div>
+  </aside>
+</template>
+
+<script lang="ts">
+import {Vue} from 'vue-class-component';
+
+export default class Sidebar extends Vue {
+
+}
+</script>
+
+<style scoped>
+
+@media (max-width: 572px) {
+  aside {
+    position: relative;
+    top: 5vh;
+    min-width: 100%;
+  }
+}
+
+@media (min-width: 572px) {
+  aside {
+    position: fixed;
+    height: 95vh;
+    width: 15rem;
+    top: 5vh;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/web/src/components/Tile.vue b/web/src/components/Tile.vue
new file mode 100644
index 0000000..0d9b1b2
--- /dev/null
+++ b/web/src/components/Tile.vue
@@ -0,0 +1,67 @@
+<template>
+  <div class="tile">
+    <article class="tile is-child notification has-background-primary-dark has-text-white">
+      <nav class="level">
+        <div class="level-left">
+          <div class="level-item ">
+            <span class="icon is-large">
+               <i class="fa fa-3x fa-user-circle"/>
+            </span>
+            <p class="is-size-4 is-bold">&nbspWhats up, {{ user.username }}</p>
+          </div>
+        </div>
+        <div class="level-right">
+          <div class="level-item has-text-centered">
+            <p class="is-size-6 is-bold">Last login on {{ date }}</p>
+          </div>
+        </div>
+      </nav>
+      <nav class="level">
+        <div class="level-item has-text-centered">
+          <div>
+            <p class="heading">Your Athletes</p>
+            <p class="title">3,456</p>
+          </div>
+        </div>
+        <div class="level-item has-text-centered">
+          <div>
+            <p class="heading">Live Athletes</p>
+            <p class="title">123</p>
+          </div>
+        </div>
+        <div class="level-item has-text-centered">
+          <div>
+            <p class="heading">Followers</p>
+            <p class="title">456K</p>
+          </div>
+        </div>
+        <div class="level-item has-text-centered">
+          <div>
+            <p class="heading">Likes</p>
+            <p class="title">789</p>
+          </div>
+        </div>
+      </nav>
+    </article>
+  </div>
+</template>
+
+<script lang="ts">
+import {Vue} from 'vue-class-component';
+
+interface User {
+  username: string,
+  lastLogin: string
+}
+
+export default class Tile extends Vue {
+  private user!: User;
+  private date!: string;
+
+  created() {
+    this.user = this.$store.getters.user
+    this.date = new Date(this.user.lastLogin).toLocaleString()
+  }
+
+}
+</script>
\ No newline at end of file
diff --git a/web/src/views/Dashboard.vue b/web/src/views/Dashboard.vue
index a3fa7cc..02a243e 100644
--- a/web/src/views/Dashboard.vue
+++ b/web/src/views/Dashboard.vue
@@ -1,18 +1,23 @@
 <template>
   <Navbar/>
-  <Hero/>
+  <Sidebar/>
+  <div class="content">
+    <Tile/>
+  </div>
 </template>
 
 <script lang="ts">
 import {Options, Vue} from 'vue-class-component';
 import {io} from 'socket.io-client'
 import Navbar from '@/components/Navbar.vue'
-import Hero from '@/components/Hero.vue'
+import Sidebar from '@/components/Sidebar.vue'
+import Tile from '@/components/Tile.vue'
 
 @Options({
   components: {
     Navbar,
-    Hero
+    Sidebar,
+    Tile,
   }
 })
 
@@ -27,19 +32,15 @@ export default class Dashboard extends Vue {
     this.socket = io('/')
 
     this.socket.on('connect', () => {
-      console.log(('Connected to server!'));
     });
 
     this.socket.on('disconnect', (reason: string) => {
-      console.log(('Lost connection!'));
 
       if (reason === 'io server disconnect') this.socket.connect();
 
       if (reason === 'io client disconnect') {
-        console.log(('Server kicked you!'))
       }
 
-      console.log(('Reconnecting...'));
     });
 
     this.socket.on('console', (data: {}) => {
@@ -49,5 +50,12 @@ export default class Dashboard extends Vue {
 </script>
 
 <style scoped>
-
+@media (min-width: 572px) {
+  .content {
+    position: relative;
+    margin-top: 7vh;
+    margin-left: 17rem;
+    margin-right: 2rem;
+  }
+}
 </style>
\ No newline at end of file
