diff --git a/packages/webapp/index.html b/packages/webapp/index.html
index 74fd7ed88..678a6e1eb 100644
--- a/packages/webapp/index.html
+++ b/packages/webapp/index.html
@@ -9,7 +9,8 @@
       name="description"
       content="Bigcapital Financial Managment Software"
     />
-    <link rel="manifest" href="/manifest.json" />
+    <link rel="modulepreload" href="/manifest.json" />
+    <script type="module" src="/public/preload-theme.js"></script>
     <title>Bigcapital</title>
   </head>
   <body class="bp4-dark">
@@ -25,4 +26,3 @@
     <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>
-
diff --git a/packages/webapp/public/preload-theme.js b/packages/webapp/public/preload-theme.js
new file mode 100644
index 000000000..839bf2476
--- /dev/null
+++ b/packages/webapp/public/preload-theme.js
@@ -0,0 +1,16 @@
+const theme =
+  localStorage.getItem('theme') ||
+  (window.matchMedia('(prefers-color-scheme: dark)').matches
+    ? 'dark'
+    : 'light');
+
+if (theme === 'dark') {
+  document.documentElement.classList.add('bp4-dark');
+  document.body.classList.add('bp4-dark');
+}
+
+// Remove dark mode for payment portal pages
+if (window.location.pathname.startsWith('/payment')) {
+  document.documentElement.classList.remove('bp4-dark');
+  document.body.classList.remove('bp4-dark');
+}
