diff --git a/web/src/components/Hero.vue b/web/src/components/Hero.vue
new file mode 100644
index 0000000..c8af5d2
--- /dev/null
+++ b/web/src/components/Hero.vue
@@ -0,0 +1,29 @@
+<template>
+  <section class="hero is-primary is-bold">
+    <div class="hero-body">
+      <div class="container">
+        <h3 class="is-size-3">
+          <span class="icon">
+            <i class="fas fa-stream"></i>
+          </span>
+          <span>&nbsp&nbspWelcome {{ username }},</span>
+        </h3>
+        <h2 class="subtitle mt-3">
+
+        </h2>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import {Vue} from 'vue-class-component';
+
+export default class Hero extends Vue {
+  private username = '';
+
+  mounted() {
+    this.username = this.$store.getters.user.username
+  }
+}
+</script>
\ No newline at end of file
diff --git a/web/src/views/Dashboard.vue b/web/src/views/Dashboard.vue
index 947ebb6..a3fa7cc 100644
--- a/web/src/views/Dashboard.vue
+++ b/web/src/views/Dashboard.vue
@@ -1,11 +1,20 @@
 <template>
-
+  <Navbar/>
+  <Hero/>
 </template>
 
 <script lang="ts">
-import {Vue} from 'vue-class-component';
+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'
 
+@Options({
+  components: {
+    Navbar,
+    Hero
+  }
+})
 
 export default class Dashboard extends Vue {
   private socket!: any;
@@ -19,7 +28,6 @@ export default class Dashboard extends Vue {
 
     this.socket.on('connect', () => {
       console.log(('Connected to server!'));
-      this.socket.emit('subscribe', 'web');
     });
 
     this.socket.on('disconnect', (reason: string) => {
@@ -35,13 +43,11 @@ export default class Dashboard extends Vue {
     });
 
     this.socket.on('console', (data: {}) => {
-      console.log(data);
     })
   }
 }
 </script>
 
-
 <style scoped>
 
 </style>
\ No newline at end of file