diff --git a/src/BootstrapBlazor.Server/Components/Pages/HostModel.razor b/src/BootstrapBlazor.Server/Components/Pages/HostModel.razor
new file mode 100644
index 00000000000..0e747d9dac9
--- /dev/null
+++ b/src/BootstrapBlazor.Server/Components/Pages/HostModel.razor
@@ -0,0 +1,36 @@
+@page "/host-model"
+@inject IOptions<WebsiteOptions> WebsiteOption
+
+<h3>ASP.NET Core Blazor 托管模型</h3>
+
+<p>目前 ASP.NET Core Blazor 的托管模型一共有三种，分别是</p>
+
+<ul class="ul-demo">
+	<li><a href="https://learn.microsoft.com/en-us/aspnet/core/blazor/hosting-models?wt.mc_id=DT-MVP-5004174#blazor-server" target="_blank">Blazor Server</a> <b class="text-danger">(新手强烈推荐)</b></li>
+	<li><a href="https://learn.microsoft.com/en-us/aspnet/core/blazor/hosting-models?wt.mc_id=DT-MVP-5004174#blazor-webassembly" target="_blank">Blazor WebAssembly</a></li>
+	<li><a href="https://learn.microsoft.com/en-us/aspnet/core/blazor/hosting-models?wt.mc_id=DT-MVP-5004174#blazor-hybrid" target="_blank">Blazor Hybrid</a></li>
+</ul>
+
+<p><b>目前我们推荐使用 <code>Blazor Server</code> 托管模型</b></p>
+
+<p>使用最新版 <code>Visual Studio</code> 新建 <code>Blazor</code> 项目时选择 <code>Blazor Web App</code></p>
+
+<img src="@WebsiteOption.Value.GetAssetUrl("images/blazor-web-app.png")" style="width: 100%; max-width: 780px;" />
+
+<p><code>Interactive render mode</code> 又分为以下几种方式</p>
+
+<ul class="ul-demo">
+	<li>None</li>
+	<li>Server <b class="text-danger">(新手强烈推荐)</b></li>
+	<li>WebAssembly</li>
+	<li>Auto</li>
+</ul>
+
+<p><code>Interactivity Location</code> 又分为以下两种方式</p>
+
+<ul class="ul-demo">
+	<li>Per page/component</li>
+	<li>Global <b class="text-danger">(新手强烈推荐)</b></li>
+</ul>
+
+<Video Name="hosting" />
diff --git a/src/BootstrapBlazor.Server/Components/Pages/Template.razor b/src/BootstrapBlazor.Server/Components/Pages/Template.razor
index 41561f42b8d..6a8bd21c0b6 100644
--- a/src/BootstrapBlazor.Server/Components/Pages/Template.razor
+++ b/src/BootstrapBlazor.Server/Components/Pages/Template.razor
@@ -24,4 +24,9 @@
 <p class="code-label">@Localizer["P7"]</p>
 <Pre>dotnet new uninstall Bootstrap.Blazor.Templates</Pre>
 
+<p class="code-label">@Localizer["TemplateList"]</p>
+<p>@((MarkupString)Localizer["TemplateDesc"].Value)</p>
+
+<img src="@WebsiteOption.Value.GetAssetUrl("images/bb-template.png")" style="width: 100%; max-width: 500px; margin-bottom: 1rem;" />
+
 <Video Name="template" />
diff --git a/src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs b/src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs
index 92150547362..04ed8425cc8 100644
--- a/src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs
+++ b/src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs
@@ -304,6 +304,11 @@ void AddQuickStar(DemoMenuItem item)
                     Match = NavLinkMatch.All
                 },
                 new()
+                {
+                    Text = Localizer["HostMode"],
+                    Url = "host-model"
+                },
+                new()
                 {
                     Text = Localizer["ProjectTemplate"],
                     Url = "template"
diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
index 543b47d8e42..a3902792179 100644
--- a/src/BootstrapBlazor.Server/Locales/en-US.json
+++ b/src/BootstrapBlazor.Server/Locales/en-US.json
@@ -1185,7 +1185,9 @@
     "P4": "After the project is created, the <code>BootstrapBlazorApp</code> solution will be generated in the current folder, and the <code>src</code> directory contains <code>Server-Side</code> <code>Wasm</code> Both types of projects can be run directly with <kbd>F5</kbd>",
     "P5": "3. Update project template",
     "P6": "The dotnet new update option checks if there are updates available for the template packages that are currently installed and installs them.",
-    "P7": "3. Uninstall project template"
+    "P7": "4. Uninstall project template",
+    "TemplateList": "List",
+    "TemplateDesc": "After the template is installed, searching for <code>Bootstrap</code> when creating a new project will list the following template candidates:"
   },
   "BootstrapBlazor.Server.Components.Pages.Globalization": {
     "Title": "Globalization",
@@ -4559,6 +4561,7 @@
     "Introduction": "Introduction",
     "Install": "Install",
     "ProjectTemplate": "Template",
+    "HostMode": "Hosting Models",
     "Globalization": "Globalization",
     "Localization": "Localization",
     "WebAppBlazor": "WebApp Blazor",
diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json
index e53993dcf8a..0bf40396b27 100644
--- a/src/BootstrapBlazor.Server/Locales/zh-CN.json
+++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json
@@ -1185,7 +1185,9 @@
     "P4": "创建工程后在当前文件夹内会生成 <code>BootstrapBlazorApp</code> 解决方案，<code>src</code> 目录内包含 <code>Server-Side</code> <code>Wasm</code> 两种类型的工程，均可以直接 <kbd>F5</kbd> 运行",
     "P5": "3. 更新项目模板",
     "P6": "注:此命令为检查是否有可用于当前安装的模板包的更新并安装这些更新。",
-    "P7": "4. 卸载项目模板"
+    "P7": "4. 卸载项目模板",
+    "TemplateList": "模板列表",
+    "TemplateDesc": "模板安装好后，新建项目时搜索 <code>Bootstrap</code> 会列出如下模板候选项"
   },
   "BootstrapBlazor.Server.Components.Pages.Globalization": {
     "Title": "全球化",
@@ -4559,6 +4561,7 @@
     "Introduction": "简介",
     "Install": "类库安装",
     "ProjectTemplate": "项目模板",
+    "HostMode": "托管模型",
     "Globalization": "全球化",
     "Localization": "本地化",
     "WebAppBlazor": "WebApp 模式",
diff --git a/src/BootstrapBlazor.Server/docs.json b/src/BootstrapBlazor.Server/docs.json
index 51e22230d46..4617821f601 100644
--- a/src/BootstrapBlazor.Server/docs.json
+++ b/src/BootstrapBlazor.Server/docs.json
@@ -322,7 +322,8 @@
     "dockview2/layout": "BV1sW421d74o",
     "icon": "BV1jx4y1s73i",
     "mask": "BV16E421w7vD",
-    "global-option": "BV17T421k7U1"
+    "global-option": "BV17T421k7U1",
+    "hosting": "BV1BD4y1Y7fg"
   },
   "link": {
     "AntDesign": "http://www.antblazor.com/?from=blazor.zone",
diff --git a/src/BootstrapBlazor.Server/wwwroot/images/bb-template.png b/src/BootstrapBlazor.Server/wwwroot/images/bb-template.png
new file mode 100644
index 00000000000..368b8c16e8c
Binary files /dev/null and b/src/BootstrapBlazor.Server/wwwroot/images/bb-template.png differ
diff --git a/src/BootstrapBlazor.Server/wwwroot/images/blazor-web-app.png b/src/BootstrapBlazor.Server/wwwroot/images/blazor-web-app.png
new file mode 100644
index 00000000000..1e1df6966b1
Binary files /dev/null and b/src/BootstrapBlazor.Server/wwwroot/images/blazor-web-app.png differ