diff --git a/webapp/root.html b/webapp/root.html
index 3fc9dfa593..70cf47cc30 100644
--- a/webapp/root.html
+++ b/webapp/root.html
@@ -34,10 +34,52 @@
 
     <!-- CSS Should always go first -->
     <link rel='stylesheet' class='code_theme'>
+    <style>
+        .error-screen {
+            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+            padding-top: 50px;
+            max-width: 750px;
+            font-size: 14px;
+            color: #333333;
+            margin: auto;
+            display: none;
+            line-height: 1.5;
+        }
 
+        .error-screen h2 {
+            font-size: 30px;
+            font-weight: normal;
+            line-height: 1.2;
+        }
+
+        .error-screen ul {
+            padding-left: 15px;
+            line-height: 1.7;
+            margin-top: 0;
+            margin-bottom: 10px;
+        }
+
+        .error-screen hr {
+            color: #ddd;
+            margin-top: 20px;
+            margin-bottom: 20px;
+            border: 0;
+            border-top: 1px solid #eee;
+        }
+
+        .error-screen-visible {
+            display: block;
+        }
+    </style>
 </head>
 <body>
     <div id='root'>
+        <div class='error-screen'>
+            <h2>Cannot connect to Mattermost</h2>
+            <hr/>
+            <p>We’re having trouble connecting to Mattermost. If refreshing this page (Ctrl+R or Command+R) does not work, please verify that your computer is connected to the internet.</p>
+            <br/>
+        </div>
         <div
             class='loading-screen'
             style='position: relative'
@@ -50,6 +92,9 @@
         </div>
     </div>
     <script>
+        if (typeof window.setup_root !== 'function') {
+            document.querySelector('.error-screen').classList.add('error-screen-visible');
+        }
         window.setup_root();
     </script>
     <noscript>
