diff --git a/src/components/Dash.vue b/src/components/Dash.vue
index f195b972..aa775e1c 100644
--- a/src/components/Dash.vue
+++ b/src/components/Dash.vue
@@ -1,132 +1,12 @@
 <template>
   <div :class="['wrapper', classes]">
-    <header class="main-header">
-	<span class="logo-mini">
-		<a href="/"><img src="/static/img/copilot-logo-white.svg" alt="Logo" class="img-responsive center-block logo"></a>
-	</span>
-      <!-- Header Navbar -->
-      <nav class="navbar navbar-static-top" role="navigation">
-        <!-- Sidebar toggle button-->
-        <a href="javascript:;" class="sidebar-toggle" data-toggle="offcanvas" role="button">
-          <span class="sr-only">Toggle navigation</span>
-        </a>
-        <!-- Navbar Right Menu -->
-        <div class="navbar-custom-menu">
-          <ul class="nav navbar-nav">
-            <!-- Messages-->
-            <li class="dropdown messages-menu">
-              <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
-                <i class="fa fa-envelope-o"></i>
-                <span class="label label-success">{{ userInfo.messages | count }}</span>
-              </a>
-              <ul class="dropdown-menu">
-                <li class="header">You have {{ userInfo.messages | count }} message(s)</li>
-                <li v-if="userInfo.messages.length > 0">
-                  <!-- inner menu: contains the messages -->
-                  <ul class="menu">
-                    <li>
-                      <!-- start message -->
-                      <a href="javascript:;">
-                        <!-- Message title and timestamp -->
-                        <h4>
-                          Support Team
-                          <small>
-                            <i class="fa fa-clock-o"></i> 5 mins</small>
-                        </h4>
-                        <!-- The message -->
-                        <p>Why not consider this a test message?</p>
-                      </a>
-                    </li>
-                    <!-- end message -->
-                  </ul>
-                  <!-- /.menu -->
-                </li>
-                <li class="footer" v-if="userInfo.messages.length > 0">
-                  <a href="javascript:;">See All Messages</a>
-                </li>
-              </ul>
-            </li>
-            <!-- /.messages-menu -->
 
-            <!-- Notifications Menu -->
-            <li class="dropdown notifications-menu">
-              <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
-                <i class="fa fa-bell-o"></i>
-                <span class="label label-warning">{{ userInfo.notifications | count }}</span>
-              </a>
-              <ul class="dropdown-menu">
-                <li class="header">You have {{ userInfo.notifications | count }} notification(s)</li>
-                <li v-if="userInfo.notifications.length > 0">
-                  <!-- Inner Menu: contains the notifications -->
-                  <ul class="menu">
-                    <li>
-                      <!-- start notification -->
-                      <a href="javascript:;">
-                        <i class="fa fa-users text-aqua"></i> 5 new members joined today
-                      </a>
-                    </li>
-                    <!-- end notification -->
-                  </ul>
-                </li>
-                <li class="footer" v-if="userInfo.notifications.length > 0">
-                  <a href="javascript:;">View all</a>
-                </li>
-              </ul>
-            </li>
-
-            <!-- Tasks Menu -->
-            <li class="dropdown tasks-menu">
-              <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
-                <i class="fa fa-flag-o"></i>
-                <span class="label label-danger">{{ userInfo.tasks | count }} </span>
-              </a>
-              <ul class="dropdown-menu">
-                <li class="header">You have {{ userInfo.tasks | count }} task(s)</li>
-                <li v-if="userInfo.tasks.length > 0">
-                  <!-- Inner menu: contains the tasks -->
-                  <ul class="menu">
-                    <li>
-                      <!-- Task item -->
-                      <a href="javascript:;">
-                        <!-- Task title and progress text -->
-                        <h3>
-                          Design some buttons
-                          <small class="pull-right">20%</small>
-                        </h3>
-                        <!-- The progress bar -->
-                        <div class="progress xs">
-                          <!-- Change the css width attribute to simulate progress -->
-                          <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
-                            <span class="sr-only">20% Complete</span>
-                          </div>
-                        </div>
-                      </a>
-                    </li>
-                    <!-- end task item -->
-                  </ul>
-                </li>
-                <li class="footer" v-if="userInfo.tasks.length > 0">
-                  <a href="javascript:;">View all tasks</a>
-                </li>
-              </ul>
-            </li>
-
-            <!-- User Account Menu -->
-            <li class="dropdown user user-menu">
-              <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
-                <!-- The user image in the navbar-->
-                <img v-bind:src="demo.avatar" class="user-image" alt="User Image">
-                <!-- hidden-xs hides the username on small devices so only the image appears. -->
-                <span class="hidden-xs">{{ demo.displayName }}</span>
-              </a>
-            </li>
-          </ul>
-        </div>
-      </nav>
-    </header>
+    <!-- Horizontal bar at top. Contains messages, notifications, tasks and user menu -->
+    <dash-header :user="user"></dash-header>
+    
     <!-- Left side column. contains the logo and sidebar -->
-    <sidebar :display-name="demo.displayName" :picture-url="demo.avatar" />
-
+    <sidebar :user="user" />
+  
     <!-- Content Wrapper. Contains page content -->
     <div class="content-wrapper">
       <!-- Content Header (Page header) -->
@@ -147,56 +27,44 @@
       <router-view></router-view>
     </div>
     <!-- /.content-wrapper -->
-
-    <!-- Main Footer -->
-    <footer class="main-footer">
-      <strong>Copyright &copy; {{year}}
-        <a href="javascript:;">CoPilot</a>.</strong> All rights reserved.
-    </footer>
+  
+    <!-- Horizontal bar at bottom. Contains copy right -->
+    <dash-footer></dash-footer>
   </div>
-  <!-- ./wrapper -->
 </template>
 
 <script>
 import faker from 'faker'
-import { mapState } from 'vuex'
 import config from '../config'
-import Sidebar from './Sidebar'
+import DashFooter from './layout/DashFooter'
+import DashHeader from './layout/DashHeader'
+import Sidebar from './layout/Sidebar'
 import 'hideseek'
 
 export default {
   name: 'Dash',
   components: {
+    DashFooter,
+    DashHeader,
     Sidebar
   },
   data: function () {
     return {
       // section: 'Dash',
-      year: new Date().getFullYear(),
       classes: {
         fixed_layout: config.fixedLayout,
         hide_logo: config.hideLogoOnMobile
-      },
-      error: ''
+      }
     }
   },
   computed: {
-    ...mapState([
-      'userInfo'
-    ]),
-    demo () {
+    user () {
       return {
         displayName: faker.name.findName(),
         avatar: faker.image.avatar(),
-        email: faker.internet.email(),
-        randomCard: faker.helpers.createCard()
+        roles: [faker.name.jobTitle(), faker.name.jobTitle()]
       }
     }
-  },
-  methods: {
-    changeloading () {
-      this.$store.commit('TOGGLE_SEARCHING')
-    }
   }
 }
 </script>
diff --git a/src/components/layout/DashFooter.vue b/src/components/layout/DashFooter.vue
new file mode 100644
index 00000000..cb45f9a1
--- /dev/null
+++ b/src/components/layout/DashFooter.vue
@@ -0,0 +1,17 @@
+<template>
+  <footer class="main-footer">
+    <strong>Copyright &copy; {{ year }}
+    <a href="javascript:;">CoPilot</a>.</strong> All rights reserved.
+  </footer>
+</template>
+
+<script>
+export default {
+  name: 'DashFooter',
+  data: function () {
+    return {
+      year: new Date().getFullYear()
+    }
+  }
+}
+</script>
diff --git a/src/components/layout/DashHeader.vue b/src/components/layout/DashHeader.vue
new file mode 100644
index 00000000..8915bb94
--- /dev/null
+++ b/src/components/layout/DashHeader.vue
@@ -0,0 +1,48 @@
+<template>
+  <header class="main-header">
+    <span class="logo-mini">
+      <a href="/"><img src="/static/img/copilot-logo-white.svg" alt="Logo" class="img-responsive center-block logo"></a>
+    </span>
+    <!-- Header Navbar -->
+    <nav class="navbar navbar-static-top" role="navigation">
+      <!-- Sidebar toggle button-->
+      <a href="javascript:;" class="sidebar-toggle" data-toggle="offcanvas" role="button">
+        <span class="sr-only">Toggle navigation</span>
+      </a>
+
+      <!-- Navbar Right Menu -->
+      <div class="navbar-custom-menu">
+        <ul class="nav navbar-nav">
+          <messages-menu></messages-menu>
+          <notifications-menu></notifications-menu>
+          <tasks-menu></tasks-menu>
+          <user-menu :user="user"></user-menu>
+        </ul>
+      </div>
+    </nav>
+  </header>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import MessagesMenu from './MessagesMenu'
+import NotificationsMenu from './NotificationsMenu'
+import TasksMenu from './TasksMenu'
+import UserMenu from './UserMenu'
+
+export default {
+  name: 'DashHeader',
+  components: {
+    MessagesMenu,
+    NotificationsMenu,
+    TasksMenu,
+    UserMenu
+  },
+  props: ['user'],
+  computed: {
+    ...mapState([
+      'userInfo'
+    ])
+  }
+}
+</script>
diff --git a/src/components/layout/MessageItem.vue b/src/components/layout/MessageItem.vue
new file mode 100644
index 00000000..790c7c00
--- /dev/null
+++ b/src/components/layout/MessageItem.vue
@@ -0,0 +1,28 @@
+<template>
+  <li>
+    <a href="javascript:;">
+      <h4>
+        <span>{{message.title}}</span>
+        <small>
+          <i class="fa fa-clock-o"></i>
+          <span>{{message.createdAt}}</span>
+        </small>
+      </h4>
+      <p>{{message.body}}</p>
+    </a>
+  </li>
+</template>
+
+<script>
+export default {
+  name: 'MessageItem',
+  props: ['message']
+}
+</script>
+
+<style scoped>
+.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > h4,
+.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > p {
+  margin-left: 0;
+}
+</style>
diff --git a/src/components/layout/MessagesMenu.vue b/src/components/layout/MessagesMenu.vue
new file mode 100644
index 00000000..b41c9d6a
--- /dev/null
+++ b/src/components/layout/MessagesMenu.vue
@@ -0,0 +1,40 @@
+<template>
+  <li class="dropdown messages-menu">
+    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
+      <i class="fa fa-envelope-o"></i>
+      <span class="label label-success">{{ userInfo.messages | count }}</span>
+    </a>
+    <ul class="dropdown-menu">
+      <li class="header">You have {{ userInfo.messages | count }} message(s)</li>
+      <li v-if="userInfo.messages.length > 0">
+        <!-- inner menu: contains the messages -->
+        <ul class="menu">
+          <message-item v-for="message in userInfo.messages"
+              :key="message.id"
+              :message="message"></message-item>
+        </ul>
+        <!-- /.menu -->
+      </li>
+      <li class="footer" v-if="userInfo.messages.length > 0">
+        <a href="javascript:;">See All Messages</a>
+      </li>
+    </ul>
+  </li>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import MessageItem from './MessageItem'
+
+export default {
+  name: 'MessagesMenu',
+  components: {
+    MessageItem
+  },
+  computed: {
+    ...mapState([
+      'userInfo'
+    ])
+  }
+}
+</script>
diff --git a/src/components/layout/NotificationItem.vue b/src/components/layout/NotificationItem.vue
new file mode 100644
index 00000000..4546bdd4
--- /dev/null
+++ b/src/components/layout/NotificationItem.vue
@@ -0,0 +1,48 @@
+<template>
+  <li class="notification-item">
+    <a href="javascript:;">
+      <h4>
+        <span>{{ notification.title }}</span>
+        <small class="time pull-right">
+          <i class="fa fa-clock-o"></i>
+          <span>{{ notification.createdAt }}</span>
+        </small>
+      </h4>
+      <p>{{ notification.body }}</p>
+    </a>
+  </li>
+</template>
+
+<script>
+export default {
+  props: {
+    notification: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+.navbar-custom-menu > .navbar-nav > li.notifications-menu > .dropdown-menu > li > ul.menu li > a > h4, .navbar-custom-menu > .navbar-nav > li.notifications-menu > .dropdown-menu > li > ul.menu li > a > p {
+  margin: 0;
+  white-space: normal;
+  word-break: break-word;
+}
+.navbar-custom-menu > .navbar-nav > li.notifications-menu > .dropdown-menu > li > ul.menu li > a > h4 {
+  font-size: 15px;
+}
+.navbar-custom-menu > .navbar-nav > li.notifications-menu > .dropdown-menu > li > ul.menu li > a > h4 small {
+  font-size: 10px;
+}
+.navbar-custom-menu > .navbar-nav > li.notifications-menu > .dropdown-menu > li > ul.menu li > a > p {
+  font-size: 12px;
+}
+.navbar-custom-menu > .navbar-nav > li.notifications-menu > .dropdown-menu > li > ul.menu li > a > h4 > span {
+  display: inline-block;
+}
+.navbar-custom-menu > .navbar-nav > li.notifications-menu > .dropdown-menu > li > ul.menu li > a > h4 > small.time {
+  margin-top: 3px;
+}
+</style>
diff --git a/src/components/layout/NotificationsMenu.vue b/src/components/layout/NotificationsMenu.vue
new file mode 100644
index 00000000..0f7e80d6
--- /dev/null
+++ b/src/components/layout/NotificationsMenu.vue
@@ -0,0 +1,115 @@
+<template>
+  <li class="dropdown notifications-menu">
+    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
+      <i class="fa fa-bell-o"></i>
+      <span class="label label-warning">{{ newNotifications | count }}</span>
+    </a>
+    <ul class="dropdown-menu">
+      <li class="header">
+        <div class="row no-margin">
+          <span class="col-xs-12 col-md-6 tab-link" :class="{active: tab === 'new'}" @click="switchTab($event, 'new')">
+              <a href="javascript:;">New</a>
+            </span>
+          <span class="col-xs-12 col-md-6 tab-link" :class="{active: tab === 'old'}" @click="switchTab($event, 'old')">
+              <a href="javascript:;">Old</a>
+            </span>
+        </div>
+      </li>
+      <li>
+        <ul v-if="tab === 'new'" class="menu">
+          <notification-item v-for="notification in newNotifications" :key="notification.id" :notification="notification"></notification-item>
+          <li v-if="!newNotifications.length">
+            <span class="center-block text-center">There are no new notifications</span>
+          </li>
+        </ul>
+        <ul v-if="tab === 'old'" class="menu">
+          <notification-item v-for="notification in oldNotifications" :key="notification.id" :notification="notification"></notification-item>
+          <li v-if="!oldNotifications.length">
+            <span class="center-block text-center">There are no old notifications</span>
+          </li>
+        </ul>
+      </li>
+      <li v-if="newNotifications.length && tab === 'new'" class="footer">
+        <a href="javascript:;" @click="markAllAsRead">
+          <i class="fa fa-check"></i>
+          <span>Mark all as read</span>
+        </a>
+      </li>
+    </ul>
+  </li>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import NotificationItem from './NotificationItem'
+
+export default {
+  name: 'NotificationsMenu',
+  components: {
+    NotificationItem
+  },
+  data() {
+    return {
+      tab: 'new'
+    }
+  },
+  computed: {
+    ...mapState([
+      'userInfo'
+    ]),
+    newNotifications() {
+      return this.userInfo.notifications.filter(n => !n.readAt)
+    },
+    oldNotifications() {
+      return this.userInfo.notifications.filter(n => n.readAt)
+    }
+  },
+  methods: {
+    markAllAsRead() {
+      event.stopPropagation()
+
+      this.userInfo.notifications.filter(n => !n.readAt).forEach(function(notification) {
+        notification.readAt = new Date().toUTCString
+      })
+    },
+    switchTab(event, tab) {
+      event.stopPropagation()
+
+      this.tab = tab
+    }
+  }
+}
+</script>
+
+<style scoped>
+.navbar-custom-menu > .navbar-nav > li.notifications-menu > .dropdown-menu {
+  width: 400px;
+}
+.navbar-custom-menu > .navbar-nav > li.notifications-menu > .dropdown-menu li.header {
+  padding: 0;
+}
+.navbar-custom-menu > .navbar-nav > li.notifications-menu > .dropdown-menu li.header span.tab-link {
+  padding: 4px;
+  text-align: center;
+  cursor: pointer;
+}
+.navbar-custom-menu > .navbar-nav > li.notifications-menu > .dropdown-menu li.header span.tab-link a {
+  color: #444;
+}
+.navbar-custom-menu > .navbar-nav > li.notifications-menu > .dropdown-menu li.header span.tab-link.active {
+  font-weight: bold;
+  border-bottom: 2px solid #3c8dbc;
+}
+.navbar-custom-menu > .navbar-nav > li.notifications-menu > .dropdown-menu li.header span:hover.tab-link > a {
+  color: #3c8dbc !important;
+}
+.navbar-custom-menu > .navbar-nav > li.notifications-menu > .dropdown-menu li > ul.menu {
+  max-height: 300px;
+}
+.navbar-custom-menu > .navbar-nav > li.notifications-menu > .dropdown-menu li > ul.menu li > span {
+  padding: 10px;
+}
+.navbar-custom-menu > .navbar-nav > li.notifications-menu > .dropdown-menu li:hover.footer > a {
+  color: #3c8dbc !important;
+}
+</style>
diff --git a/src/components/Sidebar.vue b/src/components/layout/Sidebar.vue
similarity index 93%
rename from src/components/Sidebar.vue
rename to src/components/layout/Sidebar.vue
index 1b7c7a16..d6829475 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/layout/Sidebar.vue
@@ -7,11 +7,11 @@
       <!-- Sidebar user panel (optional) -->
       <div class="user-panel">
         <div class="pull-left image">
-          <img :src="pictureUrl" />
+          <img :src="user.avatar" />
         </div>
         <div class="pull-left info">
           <div>
-            <p class="white">{{ displayName }}</p>
+            <p class="white">{{user.displayName}}</p>
           </div>
           <a href="javascript:;">
             <i class="fa fa-circle text-success"></i> Online
@@ -50,7 +50,7 @@ import SidebarMenu from './SidebarMenu'
 
 export default {
   name: 'Sidebar',
-  props: ['displayName', 'pictureUrl'],
+  props: ['user'],
   components: { SidebarMenu },
   mounted: function() {
     window
diff --git a/src/components/SidebarMenu.vue b/src/components/layout/SidebarMenu.vue
similarity index 100%
rename from src/components/SidebarMenu.vue
rename to src/components/layout/SidebarMenu.vue
diff --git a/src/components/layout/TasksMenu.vue b/src/components/layout/TasksMenu.vue
new file mode 100644
index 00000000..c49564f5
--- /dev/null
+++ b/src/components/layout/TasksMenu.vue
@@ -0,0 +1,50 @@
+<template>
+  <li class="dropdown tasks-menu">
+    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
+      <i class="fa fa-flag-o"></i>
+      <span class="label label-danger">{{ userInfo.tasks | count }} </span>
+    </a>
+    <ul class="dropdown-menu">
+      <li class="header">You have {{ userInfo.tasks | count }} task(s)</li>
+      <li v-if="userInfo.tasks.length > 0">
+        <!-- Inner menu: contains the tasks -->
+        <ul class="menu">
+          <li>
+            <!-- Task item -->
+            <a href="javascript:;">
+              <!-- Task title and progress text -->
+              <h3>
+                Design some buttons
+                <small class="pull-right">20%</small>
+              </h3>
+              <!-- The progress bar -->
+              <div class="progress xs">
+                <!-- Change the css width attribute to simulate progress -->
+                <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
+                  <span class="sr-only">20% Complete</span>
+                </div>
+              </div>
+            </a>
+          </li>
+          <!-- end task item -->
+        </ul>
+      </li>
+      <li class="footer" v-if="userInfo.tasks.length > 0">
+        <a href="javascript:;">View all tasks</a>
+      </li>
+    </ul>
+  </li>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  name: 'TasksMenu',
+  computed: {
+    ...mapState([
+      'userInfo'
+    ])
+  }
+}
+</script>
diff --git a/src/components/layout/UserMenu.vue b/src/components/layout/UserMenu.vue
new file mode 100644
index 00000000..8961e72a
--- /dev/null
+++ b/src/components/layout/UserMenu.vue
@@ -0,0 +1,32 @@
+<template>
+  <li class="dropdown user user-menu">
+    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
+      <!-- The user image in the navbar-->
+      <img :src="user.avatar" class="user-image" alt="User Image">
+      <!-- hidden-xs hides the username on small devices so only the image appears. -->
+      <span class="hidden-xs">{{user.displayName}}</span>
+    </a>
+    <!-- Account Info and Menu -->
+    <ul class="dropdown-menu">
+      <li class="user-header" style="height:auto;min-height:85px;padding-bottom:15px;">
+        <p>
+          <span>{{user.displayName}}</span>
+          <small v-for="role in user.roles" :key="role">{{role}}</small>
+        </p>
+      </li>
+      <li class="user-footer">
+        <a href="javascript:;" class="btn btn-default btn-flat btn-block">
+          <i class="fa fa-sign-out"></i>
+          <span>Logout</span>
+        </a>
+      </li>
+    </ul>
+  </li>
+</template>
+
+<script>
+export default {
+  name: 'UserMenu',
+  props: ['user']
+}
+</script>
diff --git a/src/components/views/Dashboard.vue b/src/components/views/Dashboard.vue
index b2b14410..fb5b24ab 100644
--- a/src/components/views/Dashboard.vue
+++ b/src/components/views/Dashboard.vue
@@ -1,67 +1,51 @@
 <template>
   <!-- Main content -->
   <section class="content">
-    <!-- Info boxes -->
+    <!-- GitHub hint -->
     <div class="row">
-      <div class="alert alert-success alert-dismissible">
-        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
-        <h4><i class="icon fa fa-check"></i> CoPilot is open source!</h4>
-        Click on icon to check it out on github. <a href="https://github.com/misterGF/CoPilot" target="_blank"><i class="fa fa-github fa-2x"></i></a>
+      <div class="col-xs-12">
+        <alert :dismissible="true"
+               type="success"
+               :iconClasses="['fa', 'fa-check']"
+               title="CoPilot is open source!">
+          <span>Click on icon to check it out on github.</span>
+          <a href="https://github.com/misterGF/CoPilot" target="_blank">
+            <i class="fa fa-github fa-2x"></i>
+          </a>
+        </alert>
       </div>
-      <div class="col-md-3 col-sm-6 col-xs-12">
-        <div class="info-box">
-          <span class="info-box-icon bg-aqua"><i class="ion ion-ios-gear-outline"></i></span>
 
-          <div class="info-box-content">
-            <span class="info-box-text">CPU Traffic</span>
-            <span class="info-box-number">90<small>%</small></span>
-          </div>
-          <!-- /.info-box-content -->
-        </div>
-        <!-- /.info-box -->
+      <!-- Info boxes -->
+      <div class="col-md-3 col-sm-6 col-xs-12">
+        <info-box color-class="bg-aqua"
+                  :icon-classes="['ion', 'ion-ios-gear-outline']"
+                  text="CPU Traffic"
+                  number="90%"></info-box>
       </div>
       <!-- /.col -->
       <div class="col-md-3 col-sm-6 col-xs-12">
-        <div class="info-box">
-          <span class="info-box-icon bg-red"><i class="fa fa-google-plus"></i></span>
-
-          <div class="info-box-content">
-            <span class="info-box-text">Likes</span>
-            <span class="info-box-number">41,410</span>
-          </div>
-          <!-- /.info-box-content -->
-        </div>
-        <!-- /.info-box -->
+        <info-box color-class="bg-red"
+                  :icon-classes="['fa', 'fa-google-plus']"
+                  text="Likes"
+                  number="41,410"></info-box>
       </div>
       <!-- /.col -->
 
       <!-- fix for small devices only -->
       <div class="clearfix visible-sm-block"></div>
-
+      
       <div class="col-md-3 col-sm-6 col-xs-12">
-        <div class="info-box">
-          <span class="info-box-icon bg-green"><i class="ion ion-ios-cart-outline"></i></span>
-
-          <div class="info-box-content">
-            <span class="info-box-text">Sales</span>
-            <span class="info-box-number">760</span>
-          </div>
-          <!-- /.info-box-content -->
-        </div>
-        <!-- /.info-box -->
+        <info-box color-class="bg-green"
+                  :icon-classes="['ion', 'ion-ios-cart-outline']"
+                  text="Sales"
+                  number="760"></info-box>
       </div>
       <!-- /.col -->
       <div class="col-md-3 col-sm-6 col-xs-12">
-        <div class="info-box">
-          <span class="info-box-icon bg-yellow"><i class="ion ion-ios-people-outline"></i></span>
-
-          <div class="info-box-content">
-            <span class="info-box-text">New Members</span>
-            <span class="info-box-number">2,000</span>
-          </div>
-          <!-- /.info-box-content -->
-        </div>
-        <!-- /.info-box -->
+        <info-box color-class="bg-yellow"
+                  :icon-classes="['ion', 'ion-ios-people-outline']"
+                  text="New Members"
+                  number="2,000"></info-box>
       </div>
       <!-- /.col -->
     </div>
@@ -87,7 +71,9 @@
             </div>
           </div>
         </div>
-        <small class="space"><b>Pro Tip</b> Don"t forget to star us on github!</small>
+        <div class="text-center">
+          <small><b>Pro Tip</b> Don't forget to star us on github!</small>
+        </div>
       </div>
     </div>
     <!-- /.row -->
@@ -95,77 +81,41 @@
     <!-- Main row -->
     <div class="row">
       <div class="col-md-3 col-sm-6 col-xs-12">
-        <div class="info-box bg-yellow">
-          <span class="info-box-icon"><i class="ion ion-ios-pricetag-outline"></i></span>
-
-          <div class="info-box-content">
-            <span class="info-box-text">Inventory</span>
-            <span class="info-box-number">5,200</span>
-
-            <div class="progress">
-              <div class="progress-bar" style="width: 50%"></div>
-            </div>
-                <span class="progress-description">
-                  50% Increase
-                </span>
-          </div>
-          <!-- /.info-box-content -->
-        </div>
+        <process-info-box color-class="bg-yellow"
+                          :icon-classes="['ion', 'ion-ios-pricetag-outline']"
+                          text="Inventory"
+                          number="5,200"
+                          :progress="50"
+                          description="50% increase since May"></process-info-box>
       </div>
+      <!-- /.col -->
       <div class="col-md-3 col-sm-6 col-xs-12">
-        <div class="info-box bg-green">
-          <span class="info-box-icon"><i class="ion ion-ios-heart-outline"></i></span>
-
-          <div class="info-box-content">
-            <span class="info-box-text">Mentions</span>
-            <span class="info-box-number">92,050</span>
-
-            <div class="progress">
-              <div class="progress-bar" style="width: 20%"></div>
-            </div>
-                <span class="progress-description">
-                  20% Increase
-                </span>
-          </div>
-          <!-- /.info-box-content -->
-        </div>
+        <process-info-box color-class="bg-green"
+                          :icon-classes="['ion', 'ion-ios-heart-outline']"
+                          text="Mentions"
+                          number="92,050"
+                          :progress="20"
+                          description="20% increase in 30 days"></process-info-box>
       </div>
+      <!-- /.col -->
       <div class="col-md-3 col-sm-6 col-xs-12">
-        <div class="info-box bg-red">
-          <span class="info-box-icon"><i class="ion ion-ios-cloud-download-outline"></i></span>
-
-          <div class="info-box-content">
-            <span class="info-box-text">Downloads</span>
-            <span class="info-box-number">114,381</span>
-
-            <div class="progress">
-              <div class="progress-bar" style="width: 70%"></div>
-            </div>
-                <span class="progress-description">
-                  70% Increase
-                </span>
-          </div>
-          <!-- /.info-box-content -->
-        </div>
+        <process-info-box color-class="bg-red"
+                          :icon-classes="['ion', 'ion-ios-cloud-download-outline']"
+                          text="Downloads"
+                          number="114,381"
+                          :progress="70"
+                          description="70% increase since yesterday"></process-info-box>
       </div>
+      <!-- /.col -->
       <div class="col-md-3 col-sm-6 col-xs-12">
-        <div class="info-box bg-aqua">
-          <span class="info-box-icon"><i class="ion-ios-chatbubble-outline"></i></span>
-
-          <div class="info-box-content">
-            <span class="info-box-text">Direct Messages</span>
-            <span class="info-box-number">163,921</span>
-
-            <div class="progress">
-              <div class="progress-bar" style="width: 40%"></div>
-            </div>
-                <span class="progress-description">
-                  40% Increase
-                </span>
-          </div>
-          <!-- /.info-box-content -->
-        </div>
+        <process-info-box color-class="bg-aqua"
+                          :icon-classes="['ion', 'ion-ios-chatbubble-outline']"
+                          text="Direct Messages"
+                          number="163,921"
+                          :progress="40"
+                          description="40% increase compared to last year"></process-info-box>
       </div>
+      <!-- /.col -->
     </div>
     <!-- /.row -->
   </section>
@@ -174,8 +124,17 @@
 
 <script>
 import Chart from 'chart.js'
+import Alert from '../widgets/Alert'
+import InfoBox from '../widgets/InfoBox'
+import ProcessInfoBox from '../widgets/ProcessInfoBox'
 
 export default {
+  name: 'Dashboard',
+  components: {
+    Alert,
+    InfoBox,
+    ProcessInfoBox
+  },
   data () {
     return {
       generateRandomNumbers (numbers, max, min) {
diff --git a/src/components/widgets/Alert.vue b/src/components/widgets/Alert.vue
new file mode 100644
index 00000000..64a9f686
--- /dev/null
+++ b/src/components/widgets/Alert.vue
@@ -0,0 +1,36 @@
+<template>
+  <div :class="['alert', 'alert-' + type, {'alert-dismissible': dismissible}]">
+    <button v-if="dismissible" type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+    <h4>
+      <i :class="['icon', iconClasses]"></i>
+      <span>{{title}}</span>
+    </h4>
+    <span>
+      <slot></slot>
+    </span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Alert',
+  props: {
+    dismissible: {
+      type: Boolean,
+      default: true
+    },
+    type: {
+      type: String,
+      default: 'info'
+    },
+    iconClasses: {
+      type: Array,
+      default: []
+    },
+    title: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>
diff --git a/src/components/widgets/InfoBox.vue b/src/components/widgets/InfoBox.vue
new file mode 100644
index 00000000..0c8c7f29
--- /dev/null
+++ b/src/components/widgets/InfoBox.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="info-box">
+    <span :class="['info-box-icon', colorClass]">
+      <i :class="iconClasses"></i>
+    </span>
+    <div class="info-box-content">
+      <span class="info-box-text">{{text}}</span>
+      <span class="info-box-number">{{number}}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'InfoBox',
+  props: {
+    text: {
+      type: String,
+      required: true
+    },
+    number: {
+      type: String,
+      default: ''
+    },
+    iconClasses: {
+      type: Array,
+      default: []
+    },
+    colorClass: {
+      type: String,
+      default: 'bg-default'
+    }
+  }
+}
+</script>
diff --git a/src/components/widgets/ProcessInfoBox.vue b/src/components/widgets/ProcessInfoBox.vue
new file mode 100644
index 00000000..342ecf2f
--- /dev/null
+++ b/src/components/widgets/ProcessInfoBox.vue
@@ -0,0 +1,50 @@
+<template>
+  <div :class="['info-box', colorClass]">
+    <span class="info-box-icon">
+      <i :class="iconClasses"></i>
+    </span>
+    <div class="info-box-content">
+      <span class="info-box-text">{{text}}</span>
+      <span class="info-box-number">{{number}}</span>
+      <div class="progress">
+        <div class="progress-bar" :style="{width: progress + '%'}"></div>
+      </div>
+      <span class="progress-description">{{description}}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'InfoBox',
+  props: {
+    text: {
+      type: String,
+      required: true
+    },
+    number: {
+      type: String,
+      default: ''
+    },
+    progress: {
+      type: Number,
+      default: 0,
+      validator(value) {
+        return value >= 0 && value <= 100
+      }
+    },
+    description: {
+      type: String,
+      default: ''
+    },
+    iconClasses: {
+      type: Array,
+      default: []
+    },
+    colorClass: {
+      type: String,
+      default: 'bg-default'
+    }
+  }
+}
+</script>
diff --git a/src/store/state.js b/src/store/state.js
index a9f1170f..317896da 100644
--- a/src/store/state.js
+++ b/src/store/state.js
@@ -5,8 +5,51 @@ export default {
   user: null,
   token: null,
   userInfo: {
-    messages: [{1: 'test', 2: 'test'}],
-    notifications: [],
+    messages: [
+      {
+        id: 1,
+        title: 'Support Team',
+        body: 'Why not consider this a test message?',
+        createdAt: '17 min ago'
+      }
+    ],
+    notifications: [
+      {
+        id: 1,
+        title: 'Birthday Reminder',
+        body: 'Today is Brians birthday.',
+        createdAt: 'just now',
+        readAt: null
+      },
+      {
+        id: 2,
+        title: 'Bank Holiday in London',
+        body: 'Our office in London has a bank holiday today. Do not expect them to answer the phone.',
+        createdAt: '4 hours ago',
+        readAt: null
+      },
+      {
+        id: 3,
+        title: 'Birthday Reminder',
+        body: 'Today is Christians birthday.',
+        createdAt: '27 days ago',
+        readAt: '2018-08-12 00:00:00'
+      },
+      {
+        id: 4,
+        title: 'Birthday Reminder',
+        body: 'Today is Tanjas birthday.',
+        createdAt: '29 days ago',
+        readAt: '2018-08-12 00:00:00'
+      },
+      {
+        id: 5,
+        title: 'Sales Bonus received',
+        body: 'You received your monthly sales bonus of 3%. This month you made $2,700 extra!',
+        createdAt: '7 hours ago',
+        readAt: null
+      }
+    ],
     tasks: []
   }
 }