diff --git a/resources/static/dialog/views/error.ejs b/resources/static/dialog/views/error.ejs
index 6c5e9bcbd7c0557004a4a96e8ea138807e907c47..6440c09d01181e32fdb4be32d2e03634cfdc3f4c 100644
--- a/resources/static/dialog/views/error.ejs
+++ b/resources/static/dialog/views/error.ejs
@@ -1,5 +1,9 @@
 
-  <h2>We are very sorry, there has been an error!</h2>
+  <% if (typeof network !== "undefined" && network.status == 503) { %>
+    <h2 id="error_503">We are very sorry, the server is under extreme load!</h2>
+  <% } else { %>
+    <h2>We are very sorry, there has been an error!</h2>
+  <% } %>
 
   <p>
   <% if (typeof dialog !== "undefined" && dialog !== false) { %>
diff --git a/resources/static/test/qunit/shared/screens_unit_test.js b/resources/static/test/qunit/shared/screens_unit_test.js
index 80ff0050d1030d4ab35ad2a75855d412083af656..e82bc0dfd9099831da8918a41085b4627ce78613 100644
--- a/resources/static/test/qunit/shared/screens_unit_test.js
+++ b/resources/static/test/qunit/shared/screens_unit_test.js
@@ -47,7 +47,9 @@
     },
 
     teardown: function() {
-      el.empty();
+      if (el) {
+        el.empty();
+      }
     }
   });
 
@@ -83,4 +85,17 @@
     equal($("body").hasClass("form"), false, "form class taken off of body");
     equal($("body").hasClass("error"), true, "error class added to body");
   });
+
+  test("XHR 503 (server unavailable) error", function() {
+    var el = $("#error .contents");
+    el.empty();
+
+    screens.error("error", {
+      network: {
+        status: 503
+      }
+    });
+
+    ok($("#error_503").length, "503 header is shown");
+  });
 }());