diff --git a/src/BootstrapBlazor.Server/Components/Pages/HostModel.razor b/src/BootstrapBlazor.Server/Components/Pages/HostModel.razor
index 0e747d9dac9..5b7725cb36f 100644
--- a/src/BootstrapBlazor.Server/Components/Pages/HostModel.razor
+++ b/src/BootstrapBlazor.Server/Components/Pages/HostModel.razor
@@ -1,36 +1,37 @@
 @page "/host-model"
 @inject IOptions<WebsiteOptions> WebsiteOption
+@inject IStringLocalizer<HostModel> Localizer
 
-<h3>ASP.NET Core Blazor 托管模型</h3>
+<h3>@Localizer["Title"]</h3>
 
-<p>目前 ASP.NET Core Blazor 的托管模型一共有三种，分别是</p>
+<p>@Localizer["HostModelsIntro"]</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-server" target="_blank">Blazor Server</a> <b class="text-danger">@Localizer["Recommended"]</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><b>@((MarkupString)Localizer["RecommendServer"].Value)</b></p>
 
-<p>使用最新版 <code>Visual Studio</code> 新建 <code>Blazor</code> 项目时选择 <code>Blazor Web App</code></p>
+<p>@((MarkupString)Localizer["CreateProject"].Value)</p>
 
 <img src="@WebsiteOption.Value.GetAssetUrl("images/blazor-web-app.png")" style="width: 100%; max-width: 780px;" />
 
-<p><code>Interactive render mode</code> 又分为以下几种方式</p>
+<p>@((MarkupString)Localizer["RenderModeIntro"].Value)</p>
 
 <ul class="ul-demo">
 	<li>None</li>
-	<li>Server <b class="text-danger">(新手强烈推荐)</b></li>
+	<li>Server <b class="text-danger">@Localizer["Recommended"]</b></li>
 	<li>WebAssembly</li>
 	<li>Auto</li>
 </ul>
 
-<p><code>Interactivity Location</code> 又分为以下两种方式</p>
+<p>@((MarkupString)Localizer["InteractivityLocationIntro"].Value)</p>
 
 <ul class="ul-demo">
 	<li>Per page/component</li>
-	<li>Global <b class="text-danger">(新手强烈推荐)</b></li>
+	<li>Global <b class="text-danger">@Localizer["Recommended"]</b></li>
 </ul>
 
 <Video Name="hosting" />
diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
index f116ba78eee..62671075965 100644
--- a/src/BootstrapBlazor.Server/Locales/en-US.json
+++ b/src/BootstrapBlazor.Server/Locales/en-US.json
@@ -529,6 +529,15 @@
     "SubTitle": "Added component <code>ErrorLogger</code> Through this component, global logs and exceptions can be output uniformly; currently, the <code>Blazor</code> framework does not provide a <code>MVC</code> like <b>Global exception</b> The overall solution",
     "Title": "Global exception"
   },
+  "BootstrapBlazor.Server.Components.Pages.HostModel": {
+    "CreateProject": "When creating a new <code>Blazor</code> project with the latest <code>Visual Studio</code>, select <code>Blazor Web App</code>.",
+    "HostModelsIntro": "ASP.NET Core Blazor currently has three hosting models:",
+    "InteractivityLocationIntro": "<code>Interactivity Location</code> has the following options:",
+    "Recommended": "(strongly recommended for beginners)",
+    "RecommendServer": "We currently recommend using the <code>Blazor Server</code> hosting model.",
+    "RenderModeIntro": "<code>Interactive render mode</code> has the following options:",
+    "Title": "ASP.NET Core Blazor hosting models"
+  },
   "BootstrapBlazor.Server.Components.Pages.Index": {
     "Docs": "Read the docs",
     "DonateH1": "Donate",
diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json
index e7c03e9d673..c69c01d480a 100644
--- a/src/BootstrapBlazor.Server/Locales/zh-CN.json
+++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json
@@ -529,6 +529,15 @@
     "SubTitle": "组件库提供一种对当前应用程序中所有组件进行配置的方法，通过 <code>BootstrapBlazorOptions</code> 全局配置类实现此功能",
     "Title": "全局配置"
   },
+  "BootstrapBlazor.Server.Components.Pages.HostModel": {
+    "CreateProject": "使用最新版 <code>Visual Studio</code> 新建 <code>Blazor</code> 项目时选择 <code>Blazor Web App</code>",
+    "HostModelsIntro": "目前 ASP.NET Core Blazor 的托管模型一共有三种，分别是",
+    "InteractivityLocationIntro": "<code>Interactivity Location</code> 又分为以下两种方式",
+    "Recommended": "(新手强烈推荐)",
+    "RecommendServer": "目前我们推荐使用 <code>Blazor Server</code> 托管模型",
+    "RenderModeIntro": "<code>Interactive render mode</code> 又分为以下几种方式",
+    "Title": "ASP.NET Core Blazor 托管模型"
+  },
   "BootstrapBlazor.Server.Components.Pages.Index": {
     "Docs": "阅读文档",
     "DonateH1": "捐助",