diff --git a/templates/zerver/app/index.html b/templates/zerver/app/index.html
index b41707d7de..d5c7b5f6e6 100644
--- a/templates/zerver/app/index.html
+++ b/templates/zerver/app/index.html
@@ -12,6 +12,7 @@
 <link href="/static/images/logo/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed" />
 <style>
     #app-loading {
+    font-size: 16px;
     background-color: hsl(0, 0%, 100%);
     position: fixed;
     height: 100%;
@@ -21,7 +22,28 @@
     left: 0px;
     z-index: 9001;
     }
-
+    #app-loading-middle-content, #app-loading-bottom-content {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    padding: 10px;
+    }
+    #app-loading-logo {
+    width: 96px;
+    height: 96px;
+    margin: 0 auto 24px;
+    }
+    #app-loading-middle-content h3 {
+    text-align: center;
+    }
+    #app-loading-bottom-content {
+    top: unset;
+    bottom: 20px;
+    }
+    body.night-mode #app-loading {
+    background-color: hsl(212, 28%, 18%);
+    }
 </style>
 {% endblock %}
 
@@ -30,16 +52,23 @@
 </div>
 
 <div id="app-loading">
-    <h3>{{ _('Loading...') }}</h3>
-    <p>{% trans %}If this message does not go away, please wait a couple seconds and <a id="reload-lnk">reload</a> the page.{% endtrans %}</p>
-    <script nonce="{{ csp_nonce }}">
-        document.addEventListener('DOMContentLoaded', function () {
-            function reload() {
-                location.reload(true);
-            }
-            document.getElementById('reload-lnk').addEventListener('click', reload);
-        });
-    </script>
+    <div id="app-loading-middle-content">
+        <div id="app-loading-logo">
+            <img src="/static/images/logo/zulip-icon-circle.svg" />
+        </div>
+        <h3>{{ _('Loading...') }}</h3>
+    </div>
+    <div id="app-loading-bottom-content">
+        <p>{% trans %}If this message does not go away, please wait a couple seconds and <a id="reload-lnk">reload</a> the page.{% endtrans %}</p>
+        <script nonce="{{ csp_nonce }}">
+            document.addEventListener('DOMContentLoaded', function () {
+                function reload() {
+                    location.reload(true);
+                }
+                document.getElementById('reload-lnk').addEventListener('click', reload);
+            });
+        </script>
+    </div>
 </div>
 
 <div class="subscriptions">