diff --git a/src/BootstrapBlazor.Server/Components/Components/Pre.razor.js b/src/BootstrapBlazor.Server/Components/Components/Pre.razor.js
index d36a6cbd382..1c4efade929 100644
--- a/src/BootstrapBlazor.Server/Components/Components/Pre.razor.js
+++ b/src/BootstrapBlazor.Server/Components/Components/Pre.razor.js
@@ -1,4 +1,4 @@
-import { copy, getDescribedElement, addLink, removeLink, addScript, getHeight, getPreferredTheme, registerBootstrapBlazorModule } from "../../_content/BootstrapBlazor/modules/utility.js"
+import { copy, getDescribedElement, addLink, removeLink, addScript, getHeight, getTheme, registerBootstrapBlazorModule } from "../../_content/BootstrapBlazor/modules/utility.js"
 import EventHandler from "../../_content/BootstrapBlazor/modules/event-handler.js"
 
 export async function init(id, title, assetRoot) {
@@ -9,7 +9,7 @@ export async function init(id, title, assetRoot) {
 
     await addScript(`${assetRoot}lib/highlight/highlight.min.js`)
     await addScript(`${assetRoot}lib/highlight/cshtml-razor.min.js`)
-    await switchTheme(getPreferredTheme(), assetRoot);
+    await switchTheme(getTheme(), assetRoot);
 
     const preElement = el.querySelector('pre')
     const code = el.querySelector('pre > code')
diff --git a/src/BootstrapBlazor.Server/Components/Layout/BaseLayout.razor b/src/BootstrapBlazor.Server/Components/Layout/BaseLayout.razor
index 2c3286201cf..d31966d483f 100644
--- a/src/BootstrapBlazor.Server/Components/Layout/BaseLayout.razor
+++ b/src/BootstrapBlazor.Server/Components/Layout/BaseLayout.razor
@@ -1,10 +1,13 @@
 @inherits LayoutComponentBase
 
 <BootstrapBlazorRoot>
-    <Header></Header>
-    <main>
-        @Body
-    </main>
+    @if (_init)
+    {
+        <Header></Header>
+        <main>
+            @Body
+        </main>
+    }
 </BootstrapBlazorRoot>
 
 <div id="blazor-error-ui">
diff --git a/src/BootstrapBlazor.Server/Components/Layout/BaseLayout.razor.cs b/src/BootstrapBlazor.Server/Components/Layout/BaseLayout.razor.cs
index 324edf5136a..1ec51dc3808 100644
--- a/src/BootstrapBlazor.Server/Components/Layout/BaseLayout.razor.cs
+++ b/src/BootstrapBlazor.Server/Components/Layout/BaseLayout.razor.cs
@@ -3,6 +3,10 @@
 // See the LICENSE file in the project root for more information.
 // Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone
 
+using BootstrapBlazor.Server.Data;
+using Microsoft.Extensions.Options;
+using Microsoft.JSInterop;
+
 namespace BootstrapBlazor.Server.Components.Layout;
 
 /// <summary>
@@ -10,6 +14,10 @@ namespace BootstrapBlazor.Server.Components.Layout;
 /// </summary>
 public partial class BaseLayout : IDisposable
 {
+    [Inject]
+    [NotNull]
+    private IJSRuntime? JSRuntime { get; set; }
+
     [Inject]
     [NotNull]
     private IStringLocalizer<BaseLayout>? Localizer { get; set; }
@@ -26,6 +34,10 @@ public partial class BaseLayout : IDisposable
     [NotNull]
     private IDispatchService<bool>? RebootDispatchService { get; set; }
 
+    [Inject]
+    [NotNull]
+    private IOptions<WebsiteOptions>? WebsiteOption { get; set; }
+
     [NotNull]
     private string? FlowText { get; set; }
 
@@ -38,6 +50,8 @@ public partial class BaseLayout : IDisposable
     [NotNull]
     private string? CancelText { get; set; }
 
+    private bool _init = false;
+
     /// <summary>
     /// <inheritdoc/>
     /// </summary>
@@ -54,6 +68,19 @@ protected override void OnInitialized()
         RebootDispatchService.Subscribe(NotifyReboot);
     }
 
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <returns></returns>
+    protected override async Task OnInitializedAsync()
+    {
+        await base.OnInitializedAsync();
+
+        var module = await JSRuntime.LoadModule($"{WebsiteOption.Value.JSModuleRootPath}Layout/BaseLayout.razor.js");
+        await module.InvokeVoidAsync("initTheme");
+        _init = true;
+    }
+
     private async Task NotifyCommit(DispatchEntry<GiteePostBody> payload)
     {
         if (payload.CanDispatch())
diff --git a/src/BootstrapBlazor.Server/Components/Layout/BaseLayout.razor.js b/src/BootstrapBlazor.Server/Components/Layout/BaseLayout.razor.js
new file mode 100644
index 00000000000..6d4599d796a
--- /dev/null
+++ b/src/BootstrapBlazor.Server/Components/Layout/BaseLayout.razor.js
@@ -0,0 +1,6 @@
+import { getTheme, setTheme } from "../../_content/BootstrapBlazor/modules/utility.js"
+
+export function initTheme() {
+    const currentTheme = getTheme();
+    setTheme(currentTheme, false);
+}
diff --git a/src/BootstrapBlazor/Components/ThemeProvider/ThemeProvider.razor.js b/src/BootstrapBlazor/Components/ThemeProvider/ThemeProvider.razor.js
index 0e51455a0f6..eb6112fb489 100644
--- a/src/BootstrapBlazor/Components/ThemeProvider/ThemeProvider.razor.js
+++ b/src/BootstrapBlazor/Components/ThemeProvider/ThemeProvider.razor.js
@@ -1,4 +1,4 @@
-import { getPreferredTheme, setTheme, switchTheme, calcCenterPosition } from "../../modules/utility.js"
+import { getTheme, setTheme, switchTheme, calcCenterPosition } from "../../modules/utility.js"
 import EventHandler from "../../modules/event-handler.js"
 import Data from "../../modules/data.js"
 
@@ -17,7 +17,7 @@ export function init(id, invoke, themeValue, callback) {
 
     let currentTheme = themeValue;
     if (currentTheme === 'useLocalStorage') {
-        currentTheme = getPreferredTheme();
+        currentTheme = getTheme();
     }
     setTheme(currentTheme, true);
     theme.currentTheme = currentTheme;
diff --git a/src/BootstrapBlazor/wwwroot/modules/utility.js b/src/BootstrapBlazor/wwwroot/modules/utility.js
index 8cc314048fe..e01a94c81cc 100644
--- a/src/BootstrapBlazor/wwwroot/modules/utility.js
+++ b/src/BootstrapBlazor/wwwroot/modules/utility.js
@@ -716,18 +716,8 @@ export function getHtml(options) {
     return html;
 }
 
-
-export function getPreferredTheme() {
-    const storedTheme = getTheme()
-    if (storedTheme) {
-        return storedTheme
-    }
-
-    return getAutoThemeValue();
-}
-
 export function getTheme() {
-    return localStorage.getItem('theme') || document.documentElement.getAttribute('data-bs-theme') || 'light';
+    return localStorage.getItem('theme') || document.documentElement.getAttribute('data-bs-theme') || getAutoThemeValue();
 }
 
 export function saveTheme(theme) {