diff --git a/package.json b/package.json
index d200e145a..b78502eec 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
         "jquery": "^3.3.1",
         "jwt-decode": "^2.2.0",
         "lodash": "^4.17.5",
+        "luxon": "^1.2.1",
         "postcss": "^6.0.21",
         "postcss-import": "^11.1.0",
         "postcss-preset-env": "^3.4.0",
@@ -35,6 +36,7 @@
         "vue": "^2.5.7",
         "vue-axios": "^2.1.1",
         "vue-devtools": "^3.1.9",
+        "vue-feather-icons": "^4.7.1",
         "vue-loader": "^14.2.2",
         "vue-mc": "^0.2.4",
         "vue-router": "^3.0.1",
diff --git a/resources/assets/scripts/components/dashboard/Dashboard.vue b/resources/assets/scripts/components/dashboard/Dashboard.vue
index 6359534c7..8f1997fde 100644
--- a/resources/assets/scripts/components/dashboard/Dashboard.vue
+++ b/resources/assets/scripts/components/dashboard/Dashboard.vue
@@ -25,6 +25,7 @@
 </template>
 
 <script>
+    import { DateTime } from 'luxon';
     import { ServerCollection } from '../../models/server';
     import _ from 'lodash';
     import Flash from '../Flash';
@@ -35,6 +36,8 @@
         components: { ServerBox, Flash },
         data: function () {
             return {
+                backgroundedAt: DateTime.local(),
+                documentVisible: true,
                 loading: true,
                 search: '',
                 servers: new ServerCollection,
@@ -46,6 +49,11 @@
          */
         created: function () {
             this.loadServers();
+
+            document.addEventListener('visibilitychange', () => {
+                this.documentVisible = document.visibilityState === 'visible';
+                this._handleDocumentVisibilityChange(this.documentVisible);
+            });
         },
 
         /**
@@ -53,9 +61,7 @@
          * iterate through the visible servers and fetch their resource usage.
          */
         mounted: function () {
-            setInterval(() => {
-                this.servers.each(this.getResourceUse)
-            }, 10000);
+            this._iterateServerResourceUse();
         },
 
         methods: {
@@ -124,6 +130,37 @@
                         console.error(err);
                     });
             },
+
+            /**
+             * Iterates over all of the active servers and gets their resource usage.
+             *
+             * @private
+             */
+            _iterateServerResourceUse: function (initialTimeout = 5000) {
+                window.setTimeout(() => {
+                    if (this.documentVisible) {
+                        return window.setTimeout(this._iterateServerResourceUse(), 5000);
+                    }
+                }, initialTimeout);
+            },
+
+            /**
+             * Handle changes to document visibilty to keep server statuses updated properly.
+             *
+             * @param {Boolean} isVisible
+             * @private
+             */
+            _handleDocumentVisibilityChange: function (isVisible) {
+                if (!isVisible) {
+                    this.backgroundedAt = DateTime.local();
+                    return;
+                }
+
+                // If it has been more than 30 seconds since this window was put into the background
+                // lets go ahead and refresh all of the listed servers so that they have fresh stats.
+                const diff = DateTime.local().diff(this.backgroundedAt, 'seconds');
+                this._iterateServerResourceUse(diff.seconds > 30 ? 1 : 5000);
+            },
         }
     };
 </script>
diff --git a/resources/assets/scripts/components/dashboard/ServerBox.vue b/resources/assets/scripts/components/dashboard/ServerBox.vue
index b422f0503..53de4d6ee 100644
--- a/resources/assets/scripts/components/dashboard/ServerBox.vue
+++ b/resources/assets/scripts/components/dashboard/ServerBox.vue
@@ -24,7 +24,7 @@
                 </div>
                 <div class="inline-block border border-grey-lighter border-l-0 border-r-0 p-4 flex-1">
                     <span class="font-bold text-xl">{{ memory > 0 ? memory : '&mdash;' }}</span>
-                    <span class="font-light text-sm">Mb</span>
+                    <span class="font-light text-sm">MB</span>
                 </div>
             </div>
             <div class="flex items-center">
diff --git a/yarn.lock b/yarn.lock
index a37252566..e422ce0e6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -505,6 +505,10 @@ babel-helper-replace-supers@^6.24.1:
     babel-traverse "^6.24.1"
     babel-types "^6.24.1"
 
+babel-helper-vue-jsx-merge-props@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz#22aebd3b33902328e513293a8e4992b384f9f1b6"
+
 babel-helpers@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-helpers/-/babel-helpers-6.24.1.tgz#3471de9caec388e5c850e597e58a26ddf37602b2"
@@ -3424,6 +3428,10 @@ lru-cache@^4.0.1, lru-cache@^4.1.1:
     pseudomap "^1.0.2"
     yallist "^2.1.2"
 
+luxon@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/luxon/-/luxon-1.2.1.tgz#5c4948d141939c2b2820f0c3a99276932245efb1"
+
 macaddress@^0.2.8:
   version "0.2.8"
   resolved "https://registry.yarnpkg.com/macaddress/-/macaddress-0.2.8.tgz#5904dc537c39ec6dbefeae902327135fa8511f12"
@@ -5985,6 +5993,12 @@ vue-devtools@^3.1.9:
   version "3.1.9"
   resolved "https://registry.yarnpkg.com/vue-devtools/-/vue-devtools-3.1.9.tgz#283b458c6853f569a987da0092e7c52e8243a436"
 
+vue-feather-icons@^4.7.1:
+  version "4.7.1"
+  resolved "https://registry.yarnpkg.com/vue-feather-icons/-/vue-feather-icons-4.7.1.tgz#d8c55fbee7c9ad59689ebbaf07ad1e2f1e5c37da"
+  dependencies:
+    babel-helper-vue-jsx-merge-props "^2.0.2"
+
 vue-hot-reload-api@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.0.tgz#97976142405d13d8efae154749e88c4e358cf926"