diff --git a/src/app/app.js b/src/app/app.js
index a8bebb8..65ad4e7 100644
--- a/src/app/app.js
+++ b/src/app/app.js
@@ -179,16 +179,20 @@ angular.element(document).ready(function() {
 
   function checkStatus() {
     d = api.getMaintenanceStatus(function(err, resp) {
-      var mode;
-      var html;
-      var style;
+      var mode = 'maintenance';
+      var title = 'This site is under maintenance.'
+      var html = '';
+      var style = '';
       var height;
 
       if (err) {
         console.log(err);
-        mode = 'maintenance';
-        html = err.message;
-        style = '';
+        if (err.status === 0) {
+          title = 'Unable to connect to the data service.'
+        } else {
+          title = err.message || err.text;
+          html += err.status
+        }
 
       } else {
         mode = resp && resp.mode ? resp.mode : 'normal';
@@ -204,7 +208,10 @@ angular.element(document).ready(function() {
 
       // show maintenance
       if (mode === 'maintenance') {
-        maintenance.select('.message')
+        maintenance.select('.title')
+        .html(title);
+
+        maintenance.select('.subtitle')
         .html(html);
 
         maintenance
diff --git a/src/common/apiHandler.js b/src/common/apiHandler.js
index d51ad63..24eaf74 100644
--- a/src/common/apiHandler.js
+++ b/src/common/apiHandler.js
@@ -411,7 +411,7 @@ ApiHandler = function (baseURL) {
       xhr.abort();
       callback({
         status: 500,
-        message: 'Data Response Timeout'
+        text: 'Data Response Timeout'
       });
     }, 15000);
 
diff --git a/src/index.html b/src/index.html
index fa3b4ce..b80d102 100644
--- a/src/index.html
+++ b/src/index.html
@@ -49,8 +49,8 @@
     </div>
     <div id="maintenance">
       <div class="logo"></div>
-      <h3>This site is under maintenance.</h3>
-      <div class="message"></div>
+      <h3 class="title"></h3>
+      <div class="subtitle"></div>
     </div>
     <div class="header">
       <div class="banner-wrap">