diff --git a/src/public/stylesheets/theme-next/shell.css b/src/public/stylesheets/theme-next/shell.css
index ea20a2b66..fa39a5dd4 100644
--- a/src/public/stylesheets/theme-next/shell.css
+++ b/src/public/stylesheets/theme-next/shell.css
@@ -91,7 +91,7 @@ body.background-effects.platform-win32.layout-vertical #vertical-main-container
  */
 
 .login-page {
-    display: flex;
+    display: flex; /* Note: the login page contents is hidden before this property is applied  */
     height: 100%;
     flex-direction: column;
     justify-content: center;
diff --git a/src/views/login.ejs b/src/views/login.ejs
index cc80a129f..a2cc935c2 100644
--- a/src/views/login.ejs
+++ b/src/views/login.ejs
@@ -6,6 +6,12 @@
     <title><%= t("login.title") %></title>
     <link rel="apple-touch-icon" sizes="180x180" href="<%= assetPath %>/images/app-icons/ios/apple-touch-icon.png">
     <link rel="shortcut icon" href="favicon.ico">
+    <style>
+        .login-page {
+            /* Prevent the content from being rendered before the main stylesheet loads */
+            display: none;
+        }
+    </style>
     <% // TriliumNextTODO: move the css file to ${assetPath}/stylesheets/  %>
     <link rel="stylesheet" href="<%= appPath %>/login.css">
     <link rel="stylesheet" href="<%= assetPath %>/stylesheets/theme-light.css">