diff --git a/customize.dist/index.html b/customize.dist/index.html
index 390bd799b..3fcd56c9b 100644
--- a/customize.dist/index.html
+++ b/customize.dist/index.html
@@ -8,7 +8,7 @@
     <link rel="icon" type="image/png" href="/customize/favicon/main-favicon.png" id="favicon"/>
     <script src="/customize/pre-loading.js"></script>
     <script async data-bootload="/customize/template.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
-    <link href="/customize/src/outer.css" rel="stylesheet" type="text/css">
+    <link href="/customize/src/pre-loading.css" rel="stylesheet" type="text/css">
 </head>
 <body class="html">
     <noscript>
diff --git a/customize.dist/pre-loading.js b/customize.dist/pre-loading.js
index c5e836138..2b276ff20 100644
--- a/customize.dist/pre-loading.js
+++ b/customize.dist/pre-loading.js
@@ -1,11 +1,7 @@
-var logoPath = (/^\/(|index\.html)$/g.test(location.pathname)) ? '/customize/CryptPad_logo_grey.svg': '/customize/CryptPad_logo.svg';
-
-var logoPath2 = '/customize/CryptPad_logo.svg';
+var logoPath = '/customize/CryptPad_logo.svg';
 if (location.pathname == '/' || location.pathname == '/index.html') {
-    logoPath2 = '/customize/CryptPad_logo_grey.svg';
+    logoPath = '/customize/CryptPad_logo_hero.svg';
 }
-// XXX rewrite 'CryptPad_logo_grey' by 'CryptPad_logo_hero'
-// Choose between logoPath & logoPath2 OR do a separate "pre-loading" script for main page (customize/index.html)
 
 var elem = document.createElement('div');
 elem.setAttribute('id', 'placeholder');
diff --git a/customize.dist/src/outer.css b/customize.dist/src/outer.css
index cb368a356..564dc8472 100644
--- a/customize.dist/src/outer.css
+++ b/customize.dist/src/outer.css
@@ -18,88 +18,3 @@ iframe-placeholder, #sbox-iframe, #sbox-secure-iframe {
     padding:0;
     overflow:hidden;
 }
-
-@font-face {
-  font-family: 'Open Sans';
-  src: url('/bower_components/open-sans-fontface/fonts/Regular/OpenSans-Regular.eot');
-  src: url('/bower_components/open-sans-fontface/fonts/Regular/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
-       url('/bower_components/open-sans-fontface/fonts/Regular/OpenSans-Regular.woff') format('woff'),
-       url('/bower_components/open-sans-fontface/fonts/Regular/OpenSans-Regular.ttf') format('truetype'),
-       url('/bower_components/open-sans-fontface/fonts/Regular/OpenSans-Regular.svg#OpenSansRegular') format('svg');
-  font-weight: normal;
-  font-style: normal;
-}
-
-#placeholder {
-    visibility: visible;
-    position: fixed;
-    z-index: -1;
-    top: 0px;
-    bottom: 0px;
-    left: 0px;
-    right: 0px;
-    background-color: #EEEEEE; /* Hardcoded, really? @cp_loading-bg before */
-    color: #424242; /* @cp_loading-fg before (colortheme.less) */
-    font-size: 1.3em;
-    line-height: 120%;
-    opacity: 1;
-    display: flex;
-    flex-flow: column;
-    justify-content: center;
-    align-items: center;
-    font: 20px 'Open Sans', 'Helvetica Neue', sans-serif !important;
-}
-#placeholder .placeholder-logo-container {
-    height: 300px;
-    width: 300px;
-    margin-top: 50px;
-    flex: 0 1 auto;
-    min-height: 0;
-    text-align: center;
-}
-#placeholder .placeholder-logo-container img {
-    max-width: 100%;
-    max-height: 100%;
-}
-#placeholder .placeholder-message-container {
-    width: 700px;
-    max-width: 90vw;
-    height: 236px;
-    max-height: calc(100vh - 20px);
-    margin: 50px;
-    flex-shrink: 0;
-    display: flex;
-    flex-flow: column;
-    align-items: center;
-}
-#placeholder .placeholder-logo {
-    margin-left: auto;
-    margin-right: auto;
-    max-width: 90vw;
-    max-height: 300px;
-    width: auto;
-    height: auto;
-    margin-bottom: 2em;
-}
-
-@media screen and (max-width: 500px) {
-    #placeholder {
-        font-size: 16px !important;
-    }
-    #placeholder .placeholder-message-container {
-        height: 206px;
-    }
-}
-@media screen and (max-height: 700px) {
-    #placeholder {
-        font-size: 16px !important;
-    }
-    #placeholder .placeholder-message-container {
-        height: 206px;
-    }
-}
-@media screen and (max-height: 500px) {
-    #placeholder .placeholder-logo-container {
-        display: none;
-    }
-}
diff --git a/customize.dist/src/pre-loading.css b/customize.dist/src/pre-loading.css
new file mode 100644
index 000000000..aaed8c710
--- /dev/null
+++ b/customize.dist/src/pre-loading.css
@@ -0,0 +1,90 @@
+@font-face {
+  font-family: 'Open Sans';
+  src: url('/bower_components/open-sans-fontface/fonts/Regular/OpenSans-Regular.eot');
+  src: url('/bower_components/open-sans-fontface/fonts/Regular/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
+       url('/bower_components/open-sans-fontface/fonts/Regular/OpenSans-Regular.woff') format('woff'),
+       url('/bower_components/open-sans-fontface/fonts/Regular/OpenSans-Regular.ttf') format('truetype'),
+       url('/bower_components/open-sans-fontface/fonts/Regular/OpenSans-Regular.svg#OpenSansRegular') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+#placeholder {
+    visibility: visible;
+    position: fixed;
+    z-index: -10;
+    top: 0px;
+    bottom: 0px;
+    left: 0px;
+    right: 0px;
+    background-color: #EEEEEE; /* @cp_loading-bg */
+    color: #424242; /* @cp_loading-fg */
+    font-size: 1.3em;
+    line-height: 120%;
+    opacity: 1;
+    display: flex;
+    flex-flow: column;
+    justify-content: center;
+    align-items: center;
+    font: 20px 'Open Sans', 'Helvetica Neue', sans-serif !important;
+}
+@media (prefers-color-scheme: dark) {
+    #placeholder {
+        background-color: #212121; /* @cp_loading-bg (dark) */
+        color: #EEEEEE; /* @cp_loading-fg (dark) */
+    }
+}
+#placeholder .placeholder-logo-container {
+    height: 300px;
+    width: 300px;
+    margin-top: 50px;
+    flex: 0 1 auto;
+    min-height: 0;
+    text-align: center;
+}
+#placeholder .placeholder-logo-container img {
+    max-width: 100%;
+    max-height: 100%;
+}
+#placeholder .placeholder-message-container {
+    width: 700px;
+    max-width: 90vw;
+    height: 236px;
+    max-height: calc(100vh - 20px);
+    margin: 50px;
+    flex-shrink: 0;
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+}
+#placeholder .placeholder-logo {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 90vw;
+    max-height: 300px;
+    width: auto;
+    height: auto;
+    margin-bottom: 2em;
+}
+
+@media screen and (max-width: 500px) {
+    #placeholder {
+        font-size: 16px !important;
+    }
+    #placeholder .placeholder-message-container {
+        height: 206px;
+    }
+}
+@media screen and (max-height: 700px) {
+    #placeholder {
+        font-size: 16px !important;
+    }
+    #placeholder .placeholder-message-container {
+        height: 206px;
+    }
+}
+@media screen and (max-height: 500px) {
+    #placeholder .placeholder-logo-container {
+        display: none;
+    }
+}
diff --git a/customize.dist/template.js b/customize.dist/template.js
index 7c71b9557..fae7ca2bd 100644
--- a/customize.dist/template.js
+++ b/customize.dist/template.js
@@ -47,8 +47,7 @@ $(function () {
         ], function () {
             var $main = $(infoPage());
 
-            // Clean placeholder
-            document.querySelector('#placeholder').remove();
+            $('#placeholder').remove();
 
             $body.append($main);
 
diff --git a/www/common/common-interface.js b/www/common/common-interface.js
index d853f6c13..b7c70e802 100644
--- a/www/common/common-interface.js
+++ b/www/common/common-interface.js
@@ -984,6 +984,9 @@ define([
             Loading();
             todo();
         }
+
+        // Remove the inner placeholder (iframe)
+        $('#placeholder').remove();
     };
     UI.updateLoadingProgress = function (data) {
         if (window.CryptPad_updateLoadingProgress) {
diff --git a/www/common/sframe-common-outer.js b/www/common/sframe-common-outer.js
index 0d5072ceb..931146b37 100644
--- a/www/common/sframe-common-outer.js
+++ b/www/common/sframe-common-outer.js
@@ -228,12 +228,6 @@ define([
                     // Answer with the requested data
                     postMsg(JSON.stringify({ txid: data.txid, cache: cache, localStore: localStore, language: Cryptpad.getLanguage() }));
 
-                    // Remove the placeholder once iframe overwrites it for sure
-                    setTimeout(function() {
-                        document.querySelector('#placeholder').remove();
-                        console.log('Pre-loading placeholder removed');
-                    }, (5 * 1000));
-
                     // Then start the channel
                     window.addEventListener('message', function (msg) {
                         if (msg.source !== iframe) { return; }
@@ -1960,6 +1954,9 @@ define([
                 rtConfig = rtConfig || {};
                 rtStarted = true;
 
+                // Remove the outer placeholder once iframe overwrites it for sure
+                document.querySelector('#placeholder').remove();
+
                 var replaceHash = function (hash) {
                     // The pad has just been created but is not stored yet. We'll switch
                     // to hidden hash once the pad is stored
@@ -2196,3 +2193,4 @@ define([
 
     return common;
 });
+
diff --git a/www/pad/index.html b/www/pad/index.html
index e426b9b0b..d33c21392 100644
--- a/www/pad/index.html
+++ b/www/pad/index.html
@@ -7,7 +7,9 @@
     <meta name="referrer" content="no-referrer" />
     <script src="/customize/pre-loading.js"></script>
     <script async data-bootload="/common/sframe-app-outer.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
-    <link href="/customize/src/outer.css" rel="stylesheet" type="text/css">
+    <link href="/customize/src/pre-loading.css" rel="stylesheet" type="text/css">
+    <link href="/customize/src/outer.css?ver=1.3.2" rel="stylesheet" type="text/css">
 </head>
 <body>
 <iframe-placeholder>
+
diff --git a/www/pad/inner.html b/www/pad/inner.html
index d59060066..fa16f1aee 100644
--- a/www/pad/inner.html
+++ b/www/pad/inner.html
@@ -2,7 +2,9 @@
 <html class="cp-app-noscroll cp-app-print">
 <head>
     <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
+    <script src="/customize/pre-loading.js"></script>
     <script async data-bootload="/pad/inner.js" data-main="/common/sframe-boot.js?ver=1.11" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
+    <link href="/customize/src/pre-loading.css" rel="stylesheet" type="text/css">
     <style>
     html, body {
         margin: 0px;
