diff --git a/src/components/user/messages.vue b/src/components/user/messages.vue
index ec31dd9..fe2417a 100644
--- a/src/components/user/messages.vue
+++ b/src/components/user/messages.vue
@@ -1,77 +1,13 @@
 <template>
   <div class="q-pa-md" style="max-width: 700px">
     <q-bar class="bg-none">
-      Messages
+      Notifications
       <q-space />
       <q-btn dense flat round icon="close" @click="onClose" />
     </q-bar>
 
     <q-list style="width: 600px" separator>
       <message v-for="message in messagesList" v-bind:key="message.id" :message="message"></message>
-
-      <!--
-      <q-item>
-        <q-item-section avatar top>
-          <q-icon name="account_tree" color="black" size="34px" />
-        </q-item-section>
-
-        <q-item-section top class="col-2 gt-sm">
-          <q-item-label class="q-mt-sm">GitHub</q-item-label>
-        </q-item-section>
-
-        <q-item-section top>
-          <q-item-label lines="1">
-            <span class="text-weight-medium">[quasarframework/quasar]</span>
-            <span class="text-grey-8"> - GitHub repository</span>
-          </q-item-label>
-          <q-item-label caption lines="1">
-            @rstoenescu in #3: > Generic type parameter for props
-          </q-item-label>
-          <q-item-label lines="1" class="q-mt-xs text-body2 text-weight-bold text-primary text-uppercase">
-            <span class="cursor-pointer">Open in GitHub</span>
-          </q-item-label>
-        </q-item-section>
-
-        <q-item-section top side>
-          <div class="text-grey-8 q-gutter-xs">
-            <q-btn class="gt-xs" size="12px" flat dense round icon="delete" />
-            <q-btn class="gt-xs" size="12px" flat dense round icon="done" />
-          </div>
-        </q-item-section>
-      </q-item>
-
-      <q-separator spaced />
-
-      <q-item>
-        <q-item-section avatar top>
-          <q-icon name="account_tree" color="black" size="34px" />
-        </q-item-section>
-
-        <q-item-section top class="col-2 gt-sm">
-          <q-item-label class="q-mt-sm">GitHub</q-item-label>
-        </q-item-section>
-
-        <q-item-section top>
-          <q-item-label lines="1">
-            <span class="text-weight-medium">[quasarframework/quasar]</span>
-            <span class="text-grey-8"> - GitHub repository</span>
-          </q-item-label>
-          <q-item-label caption lines="1">
-            @rstoenescu in #1: > The build system
-          </q-item-label>
-          <q-item-label lines="1" class="q-mt-xs text-body2 text-weight-bold text-primary text-uppercase">
-            <span class="cursor-pointer">Open in GitHub</span>
-          </q-item-label>
-        </q-item-section>
-
-        <q-item-section top side>
-          <div class="text-grey-8 q-gutter-xs">
-            <q-btn class="gt-xs" size="12px" flat dense round icon="delete" />
-            <q-btn class="gt-xs" size="12px" flat dense round icon="done" />
-          </div>
-        </q-item-section>
-      </q-item>
-      -->
     </q-list>
   </div>
 </template>
diff --git a/src/components/user/userinfo.vue b/src/components/user/userinfo.vue
index 87882ae..7fa6a8c 100644
--- a/src/components/user/userinfo.vue
+++ b/src/components/user/userinfo.vue
@@ -1,6 +1,75 @@
 <template>
-  <div class="q-pa-md" style="max-width: 350px">
-    <q-list bordered padding>
+  <div class="q-pa-md" style="max-width: 280px">
+    <q-list style="width: 260px">
+      <q-item>
+        <q-item-section avatar>
+          <q-avatar>
+            <img src="images/avatars/male/1.png" />
+          </q-avatar>
+        </q-item-section>
+        <q-item-section>
+          <q-item-label lines="1">
+            <div class="text-h5">John Smith</div>
+          </q-item-label>
+        </q-item-section>
+      </q-item>
+
+      <q-separator spaced />
+
+      <q-item clickable v-ripple v-close-popup>
+        <q-item-section avatar>
+          <q-icon name="mdi-account"></q-icon>
+        </q-item-section>
+        <q-item-section>
+          <q-item-label lines="1">
+            My Account
+          </q-item-label>
+        </q-item-section>
+      </q-item>
+
+      <q-item clickable v-ripple v-close-popup>
+        <q-item-section avatar>
+          <q-icon name="mdi-bell"></q-icon>
+        </q-item-section>
+        <q-item-section>
+          <q-item-label lines="1">
+            Notifications
+          </q-item-label>
+        </q-item-section>
+        <q-item-section side>
+          <q-badge color="red" label="5" />
+        </q-item-section>
+      </q-item>
+
+      <q-item clickable v-ripple v-close-popup>
+        <q-item-section avatar>
+          <q-icon name="mdi-calendar"></q-icon>
+        </q-item-section>
+        <q-item-section>
+          <q-item-label lines="1">
+            Calendar
+          </q-item-label>
+        </q-item-section>
+        <q-item-section side>
+          <q-badge color="red" label="1" />
+        </q-item-section>
+      </q-item>
+
+      <q-separator spaced />
+
+      <q-item clickable v-ripple v-close-popup>
+        <q-item-section avatar>
+          <q-icon name="mdi-logout"></q-icon>
+        </q-item-section>
+        <q-item-section>
+          <q-item-label lines="1">
+            Log Out
+          </q-item-label>
+        </q-item-section>
+      </q-item>
+    </q-list>
+
+    <!--<q-list bordered padding>
       <q-item-label header>User Controls</q-item-label>
 
       <q-item clickable v-ripple>
@@ -127,7 +196,7 @@
           <q-slider v-model="mic" :min="0" :max="50" label />
         </q-item-section>
       </q-item>
-    </q-list>
+    </q-list>-->
   </div>
 </template>
 <script>
@@ -136,19 +205,7 @@ export default {
   components: {},
   props: {},
   data() {
-    return {
-      check1: true,
-      check2: false,
-      check3: false,
-
-      notif1: true,
-      notif2: true,
-      notif3: false,
-
-      volume: 6,
-      brightness: 3,
-      mic: 8
-    };
+    return {};
   },
   computed: {},
   watch: {},
diff --git a/src/layouts/Default.vue b/src/layouts/Default.vue
index effc336..5f7146e 100644
--- a/src/layouts/Default.vue
+++ b/src/layouts/Default.vue
@@ -17,7 +17,7 @@
         </q-input>
 
         <q-btn dense unelevated icon="mdi-bell" class="q-ma-sm">
-          <q-badge color="red" floating>4</q-badge>
+          <q-badge color="red" floating>5</q-badge>
           <q-menu v-model="messagesOpen">
             <messages @close="messagesOpen = false"></messages>
           </q-menu>
@@ -27,7 +27,7 @@
           <settings @close="settingsOpen = false"></settings>
         </q-btn-dropdown>
 
-        <q-btn-dropdown unelevated dense v-model="userInfoOpen" no-caps>
+        <q-btn-dropdown unelevated v-model="userInfoOpen" no-caps>
           <template v-slot:label>
             <div class="row items-center no-wrap">
               <q-avatar size="sm">
@@ -40,19 +40,6 @@
           </template>
           <user-info></user-info>
         </q-btn-dropdown>
-
-        <!--
-        <q-btn dense flat size="md" round icon="refresh" @click="performRefresh" />
-        <q-btn-toggle
-          v-model="refreshTimeout"
-          text-color="blue-grey-8"
-          toggle-text-color="grey-4"
-          size="md"
-          dense
-          flat
-          :options="refreshOptions"
-        />
-        -->
       </q-toolbar>
     </q-header>
 
@@ -100,9 +87,18 @@ export default {
       testColors: null,
       menuItems: [
         { id: '1', title: 'Dashboard', link: '/', icon: 'dashboard' },
+        { id: 'observability', title: 'Observability Dashboards', icon: 'mdi-eye-check', caption: 'Monitor your Microservices' },
         { id: '3', title: 'Forms', link: '/forms', icon: 'mdi-playlist-edit' },
         { id: '4', title: 'Tables', link: '/tables', icon: 'mdi-table' },
-        { id: '5', title: 'Charts', icon: 'pie_chart', items: [{ id: 'chartjs', title: 'Chart.js', link: '/chartjs', icon: 'mdi-chart-bar' }] },
+        {
+          id: '5',
+          title: 'Charts',
+          icon: 'pie_chart',
+          items: [
+            { id: 'chartjs', title: 'Chart.js', link: '/chartjs', icon: 'mdi-chart-bar' },
+            { id: 'dygraphs', title: 'Dygraphs', link: '/dygraphs', icon: 'mdi-chart-line' }
+          ]
+        },
         {
           id: '6',
           title: 'Style',
@@ -163,32 +159,6 @@ export default {
       handler: function(val) {
         this.$q.dark.set(val);
       }
-    },
-    rotateEnabled: {
-      handler: function(val) {
-        if (val) {
-          this.rotateCurrent = -1;
-        }
-      }
-    },
-    rotateTrigger: {
-      handler: function() {
-        if (!this.rotateEnabled) {
-          return;
-        }
-        console.log(`Rotating screen: ${Date.now()}`);
-        this.rotateCurrent++;
-        if (this.rotateCurrent >= this.rotateOptions.length) {
-          this.rotateCurrent = 0;
-        }
-        this.transitionName = 'fade';
-        this.$router.push(this.rotateOptions[this.rotateCurrent]);
-        this.$nextTick(() => {
-          setTimeout(() => {
-            this.transitionName = '';
-          }, 550);
-        });
-      }
     }
   },
   mounted() {
diff --git a/src/router.js b/src/router.js
index d9b7316..22723c7 100644
--- a/src/router.js
+++ b/src/router.js
@@ -7,6 +7,7 @@ import DashblocksShowcase from './views/DashblocksShowcase.vue';
 import Typography from './views/typography.vue';
 import MaterialIcons from './views/materialicons.vue';
 import ChartJsShowcase from './views/ChartJsShowcase.vue';
+import Dygraphs from './views/Dygraphs.vue';
 import Mdi from './views/mdi.vue';
 
 Vue.use(Router);
@@ -27,6 +28,11 @@ export default new Router({
           name: 'chartjs',
           component: ChartJsShowcase
         },
+        {
+          path: '/dygraphs',
+          name: 'dygraphs',
+          component: Dygraphs
+        },
         {
           path: '/typography',
           name: 'typography',
diff --git a/src/views/ChartJsShowcase.vue b/src/views/ChartJsShowcase.vue
index 5c5d888..cb934b0 100644
--- a/src/views/ChartJsShowcase.vue
+++ b/src/views/ChartJsShowcase.vue
@@ -249,7 +249,6 @@ export default {
 
       this.dbdata.setWData('wTrend', { data: dataTrend });
 
-      //let bw = 1;
       // Dynamic updates
       this.refreshIntervalId = setInterval(() => {
         this.performRefresh();
diff --git a/src/views/mdi.vue b/src/views/mdi.vue
index 72c4c7f..e278d67 100644
--- a/src/views/mdi.vue
+++ b/src/views/mdi.vue
@@ -1,7 +1,7 @@
 <template>
   <q-page class="ub-page">
     <div class="row items-center">
-      <div class="col-md-12 q-ma-lg">
+      <div class="col-md-10 offset-md-1 q-ma-lg">
         <div class="text-h3">Material Design Icons</div>
       </div>
     </div>
@@ -13,7 +13,7 @@
       </q-input>
     </div>
     <div class="row items-center">
-      <div class="col-md-12 q-ma-lg ub-icons-set" v-on:click="onIconClick">
+      <div class="col-md-10 offset-md-1 ub-icons-set" v-on:click="onIconClick">
         <!--<q-icon v-for="icon in icons" v-bind:key="icon" :name="`mdi-${icon}`" :title="`mdi-${icon}`" size="xl" class="q-pa-md q-ma-lg"></q-icon>-->
         <i v-for="icon in icons" v-bind:key="icon" :class="`mdi mdi-${icon}`" :title="`mdi-${icon}`"></i>
       </div>
diff --git a/src/views/typography.vue b/src/views/typography.vue
index 69dbfca..cd79741 100644
--- a/src/views/typography.vue
+++ b/src/views/typography.vue
@@ -1,12 +1,12 @@
 <template>
   <q-page class="ub-page">
     <div class="row items-center">
-      <div class="col-md-8 offset-md-2 q-ma-lg">
+      <div class="col-md-10 offset-md-1 q-ma-lg">
         <div class="text-h3">Typography</div>
       </div>
     </div>
     <div class="row items-center">
-      <div class="col-md-8 offset-md-2 q-ma-md">
+      <div class="col-md-10 offset-md-1 q-ma-md">
         <div class="text-body1">
           Typography by <a href="https://quasar.dev/">Quasar</a>. See detailed documentation at
           <a href="https://quasar.dev/style/typography">https://quasar.dev/style/typography</a>
@@ -14,7 +14,7 @@
       </div>
     </div>
     <div class="row items-center">
-      <div class="col-md-8 offset-md-2 q-ma-md">
+      <div class="col-md-10 offset-md-1 q-ma-md">
         <div class="row items-center q-mb-lg">
           <div class="col-sm-3 col-12">
             <div role="alert" class="q-badge flex inline items-center no-wrap q-badge--single-line bg-primary">text-h1</div>