diff --git a/mayan/apps/appearance/static/appearance/js/mayan_image.js b/mayan/apps/appearance/static/appearance/js/mayan_image.js
index f146b4b279..a3d7c47108 100644
--- a/mayan/apps/appearance/static/appearance/js/mayan_image.js
+++ b/mayan/apps/appearance/static/appearance/js/mayan_image.js
@@ -49,15 +49,10 @@ MayanImage.intialize = function () {
     });
 }
 
+MayanImage.templateInvalidDocument = $('#template-invalid-document').html();
+
 MayanImage.prototype.onImageError = function () {
-    this.element.parent().parent().html('\
-        <div class="fa-3x">\
-            <span class="fa-layers fa-fw">\
-                <i class="far fa-file"></i>\
-                <i class="fa-inverse fas fa-times text-danger" data-fa-transform="shrink-6"></i>\
-            </span>\
-        </div>\
-    ')
+    this.element.parent().parent().html(MayanImage.templateInvalidDocument);
 
     // Remove border to indicate non interactive image
     this.element.removeClass('thin_border');
diff --git a/mayan/apps/appearance/templates/appearance/root.html b/mayan/apps/appearance/templates/appearance/root.html
index d9034b6193..0ac8e7c730 100644
--- a/mayan/apps/appearance/templates/appearance/root.html
+++ b/mayan/apps/appearance/templates/appearance/root.html
@@ -117,6 +117,26 @@
             </div>
         </script>
 
+        <script id="template-invalid-document" type="text/x-template">
+            <div class="text-center" style="border: height: 100%;">
+                <div class="fa-3x">
+                    <span class="fa-layers fa-fw">
+                        <i class="far fa-file text-primary"></i>
+                        <i class="fa-inverse fas fa-times text-danger" data-fa-transform="shrink-6"></i>
+                    </span>
+                </div>
+            </div>
+        </script>
+
+        <script id="template-error" type="text/x-template">
+            <div class="content">
+                <h2 class="title">{% blocktrans %}Server communication error{% endblocktrans %}</h2>
+                <div class="inner">
+                    <p>{% blocktrans %}Check you network connection and try again in a few moments.{% endblocktrans %}</p>
+                </div>
+            </div>
+        </script>
+
         <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
         <!--[if lt IE 9]>
           <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
diff --git a/mayan/apps/documents/templates/documents/invalid_document.html b/mayan/apps/documents/templates/documents/invalid_document.html
deleted file mode 100644
index c7087512e5..0000000000
--- a/mayan/apps/documents/templates/documents/invalid_document.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<div class="fa-3x">
-    <span class="fa-layers fa-fw">
-        <i class="far fa-file"></i>
-        <i class="fa-inverse fas fa-question text-danger" data-fa-transform="shrink-6"></i>
-    </span>
-</div>