diff --git a/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj b/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj
index 226ae626e35..af761f16097 100644
--- a/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj
+++ b/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj
@@ -56,6 +56,7 @@
     <PackageReference Include="BootstrapBlazor.MindMap" Version="9.1.6" />
     <PackageReference Include="BootstrapBlazor.MouseFollower" Version="9.0.1" />
     <PackageReference Include="BootstrapBlazor.OctIcon" Version="9.0.4" />
+    <PackageReference Include="BootstrapBlazor.OfficeViewer" Version="9.0.0" />
     <PackageReference Include="BootstrapBlazor.OnScreenKeyboard" Version="9.0.1" />
     <PackageReference Include="BootstrapBlazor.PdfReader" Version="9.0.1" />
     <PackageReference Include="BootstrapBlazor.PdfViewer" Version="9.0.3" />
diff --git a/src/BootstrapBlazor.Server/Components/Samples/FileViewers.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/FileViewers.razor.cs
index a6b5012f2d4..374f36165ad 100644
--- a/src/BootstrapBlazor.Server/Components/Samples/FileViewers.razor.cs
+++ b/src/BootstrapBlazor.Server/Components/Samples/FileViewers.razor.cs
@@ -25,9 +25,6 @@ protected override void OnInitialized()
         ExcelSampleFile = CombineFilename("sample.xlsx");
 
         FileList.Add("sample.xlsx");
-        FileList.Add("sample2.xlsx");
-        FileList.Add("sample3.xlsx");
-        FileList.Add("sample2.docx");
         FileList.Add("sample.docx");
         Url = FileList[0];
 
diff --git a/src/BootstrapBlazor.Server/Components/Samples/OfficeViewers.razor b/src/BootstrapBlazor.Server/Components/Samples/OfficeViewers.razor
new file mode 100644
index 00000000000..d157120cef9
--- /dev/null
+++ b/src/BootstrapBlazor.Server/Components/Samples/OfficeViewers.razor
@@ -0,0 +1,15 @@
+@page "/office-viewer"
+@inject IStringLocalizer<OfficeViewers> Localizer
+
+<h3>@Localizer["OfficeViewerTitle"]</h3>
+
+<h4>@Localizer["OfficeViewerDescription"]</h4>
+
+<PackageTips Name="BootstrapBlazor.OfficeDocumentViewer" />
+
+<DemoBlock Title="@Localizer["OfficeViewerNormalTitle"]" Introduction="@Localizer["OfficeViewerNormalIntro"]" Name="Normal">
+    <section ignore>
+        <Select @bind-Value="@_doc" Items="_docs"></Select>
+    </section>
+    <OfficeViewer Url="@_doc" Height="620px" OnLoaded="OnLoaded"></OfficeViewer>
+</DemoBlock>
diff --git a/src/BootstrapBlazor.Server/Components/Samples/OfficeViewers.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/OfficeViewers.razor.cs
new file mode 100644
index 00000000000..4db9812022b
--- /dev/null
+++ b/src/BootstrapBlazor.Server/Components/Samples/OfficeViewers.razor.cs
@@ -0,0 +1,26 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the Apache 2.0 License
+// See the LICENSE file in the project root for more information.
+// Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone
+
+namespace BootstrapBlazor.Server.Components.Samples;
+
+/// <summary>
+/// PdfViewers
+/// </summary>
+public partial class OfficeViewers
+{
+    [Inject, NotNull]
+    private ToastService? ToastService { get; set; }
+
+    private readonly List<SelectedItem> _docs =
+    [
+        new SelectedItem("https://www.blazor.zone/samples/sample.docx", "sample.docx"),
+        new SelectedItem("https://www.blazor.zone/samples/sample.xlsx", "sample.xlsx"),
+        new SelectedItem("https://www.blazor.zone/samples/sample.pptx", "sample.pptx"),
+    ];
+
+    private string _doc = "https://www.blazor.zone/samples/sample.docx";
+
+    private Task OnLoaded() => ToastService.Success("Office Documentation Viewer", Localizer["OfficeViewerToastSuccessfulContent"]);
+}
diff --git a/src/BootstrapBlazor.Server/Components/Samples/PdfViewers.razor b/src/BootstrapBlazor.Server/Components/Samples/PdfViewers.razor
index b20f17a6b7c..f45b78dfe9f 100644
--- a/src/BootstrapBlazor.Server/Components/Samples/PdfViewers.razor
+++ b/src/BootstrapBlazor.Server/Components/Samples/PdfViewers.razor
@@ -18,7 +18,7 @@
             </div>
         </div>
     </section>
-    <PdfViewer Url="./samples/pdf-viewer.pdf" Height="620px"
+    <PdfViewer Url="./samples/sample.pdf" Height="620px"
                NotSupportCallback="NotSupportCallback" OnLoaded="OnLoaded"
                UseGoogleDocs="@_useGoogleDocs"></PdfViewer>
 </DemoBlock>
diff --git a/src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs b/src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs
index 459a4f5661f..a90ea8df21e 100644
--- a/src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs
+++ b/src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs
@@ -707,6 +707,12 @@ void AddData(DemoMenuItem item)
                     Url = "mermaid"
                 },
                 new()
+                {
+                    IsNew = true,
+                    Text = Localizer["OfficeViewer"],
+                    Url = "office-viewer"
+                },
+                new()
                 {
                     Text = Localizer["PdfReader"],
                     Url = "pdf-reader"
diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
index 5fe051767ce..2c81246c0a8 100644
--- a/src/BootstrapBlazor.Server/Locales/en-US.json
+++ b/src/BootstrapBlazor.Server/Locales/en-US.json
@@ -4952,7 +4952,8 @@
     "CardUpload": "CardUpload",
     "DropUpload": "DropUpload",
     "Vditor": "Vditor Markdown",
-    "TcpSocketFactory": "ITcpSocketFactory"
+    "TcpSocketFactory": "ITcpSocketFactory",
+    "OfficeViewer": "Office Viewer"
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": {
     "TablesHeaderTitle": "Header grouping function",
@@ -7200,5 +7201,12 @@
     "VditorSubTitle": "Vditor is a browser-based Markdown editor that supports WYSIWYG, instant rendering (similar to Typora), and split-screen preview mode.",
     "BaseUsageTitle": "Basic usage",
     "BaseUsageIntro": "Set the content displayed by the component by setting the <code>Value</code> value, and set the component configuration information by setting the <code>Options</code> parameter"
+  },
+  "BootstrapBlazor.Server.Components.Samples.OfficeViewers": {
+    "OfficeViewerTitle": "Office Document Viewer",
+    "OfficeViewerDescription": "This component previews Office documents using Microsoft's online document preview feature",
+    "OfficeViewerNormalTitle": "Basic Usage",
+    "OfficeViewerNormalIntro": "Set the document URL for preview by configuring the <code>Url</code> value",
+    "OfficeViewerToastSuccessfulContent": "Office document loaded successfully"
   }
 }
diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json
index bc724f75a12..c36c64523c0 100644
--- a/src/BootstrapBlazor.Server/Locales/zh-CN.json
+++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json
@@ -4952,7 +4952,8 @@
     "CardUpload": "卡片上传组件 CardUpload",
     "DropUpload": "拖动上传组件 DropUpload",
     "Vditor": "富文本框 Vditor Markdown",
-    "TcpSocketFactory": "套接字服务 ITcpSocketFactory"
+    "TcpSocketFactory": "套接字服务 ITcpSocketFactory",
+    "OfficeViewer": "Office 文档预览组件"
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": {
     "TablesHeaderTitle": "表头分组功能",
@@ -7200,5 +7201,12 @@
     "VditorSubTitle": "Vditor 是一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式",
     "BaseUsageTitle": "基本用法",
     "BaseUsageIntro": "通过设置 <code>Value</code> 值设置组件显示的内容，通过 <code>Options</code> 参数设置组件配置信息"
+  },
+  "BootstrapBlazor.Server.Components.Samples.OfficeViewers": {
+    "OfficeViewerTitle": "Office 文档预览器",
+    "OfficeViewerDescription": "本组件通过使用微软在线文档预览功能预览 Office 文档内容",
+    "OfficeViewerNormalTitle": "基本用法",
+    "OfficeViewerNormalIntro": "通过设置 <code>Url</code> 值设置预览文档地址",
+    "OfficeViewerToastSuccessfulContent": "Office 文档加载成功"
   }
 }
diff --git a/src/BootstrapBlazor.Server/docs.json b/src/BootstrapBlazor.Server/docs.json
index cd61dad5f3a..71a4b1105d6 100644
--- a/src/BootstrapBlazor.Server/docs.json
+++ b/src/BootstrapBlazor.Server/docs.json
@@ -241,7 +241,8 @@
     "fullscreen-button": "FullScreenButtons",
     "meet": "Meets",
     "vditor": "Vditors",
-    "socket-factory": "SocketFactories"
+    "socket-factory": "SocketFactories",
+    "office-viewer": "OfficeViewers"
   },
   "video": {
     "table": "BV1ap4y1x7Qn?p=1",
diff --git a/src/BootstrapBlazor.Server/wwwroot/samples/pdf-viewer.pdf b/src/BootstrapBlazor.Server/wwwroot/samples/pdf-viewer.pdf
deleted file mode 100644
index 65570184ac8..00000000000
Binary files a/src/BootstrapBlazor.Server/wwwroot/samples/pdf-viewer.pdf and /dev/null differ
diff --git a/src/BootstrapBlazor.Server/wwwroot/samples/sample.docx b/src/BootstrapBlazor.Server/wwwroot/samples/sample.docx
index 1164fb86e46..74c44348ef8 100644
Binary files a/src/BootstrapBlazor.Server/wwwroot/samples/sample.docx and b/src/BootstrapBlazor.Server/wwwroot/samples/sample.docx differ
diff --git a/src/BootstrapBlazor.Server/wwwroot/samples/sample.pdf b/src/BootstrapBlazor.Server/wwwroot/samples/sample.pdf
index 02fa4ea0fff..65570184ac8 100644
Binary files a/src/BootstrapBlazor.Server/wwwroot/samples/sample.pdf and b/src/BootstrapBlazor.Server/wwwroot/samples/sample.pdf differ
diff --git a/src/BootstrapBlazor.Server/wwwroot/samples/sample.pptx b/src/BootstrapBlazor.Server/wwwroot/samples/sample.pptx
new file mode 100644
index 00000000000..44d4ffc5bf8
Binary files /dev/null and b/src/BootstrapBlazor.Server/wwwroot/samples/sample.pptx differ
diff --git a/src/BootstrapBlazor.Server/wwwroot/samples/sample.xlsx b/src/BootstrapBlazor.Server/wwwroot/samples/sample.xlsx
index 9ec15511a5b..5c2ca0afef2 100644
Binary files a/src/BootstrapBlazor.Server/wwwroot/samples/sample.xlsx and b/src/BootstrapBlazor.Server/wwwroot/samples/sample.xlsx differ
diff --git a/src/BootstrapBlazor.Server/wwwroot/samples/sample2.docx b/src/BootstrapBlazor.Server/wwwroot/samples/sample2.docx
deleted file mode 100644
index 835ca60b6c6..00000000000
Binary files a/src/BootstrapBlazor.Server/wwwroot/samples/sample2.docx and /dev/null differ
diff --git a/src/BootstrapBlazor.Server/wwwroot/samples/sample2.xlsx b/src/BootstrapBlazor.Server/wwwroot/samples/sample2.xlsx
deleted file mode 100644
index 9ec15511a5b..00000000000
Binary files a/src/BootstrapBlazor.Server/wwwroot/samples/sample2.xlsx and /dev/null differ
diff --git a/src/BootstrapBlazor.Server/wwwroot/samples/sample3.xlsx b/src/BootstrapBlazor.Server/wwwroot/samples/sample3.xlsx
deleted file mode 100644
index e1df0407e7c..00000000000
Binary files a/src/BootstrapBlazor.Server/wwwroot/samples/sample3.xlsx and /dev/null differ
diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj
index d49673a728c..9ea07b157a0 100644
--- a/src/BootstrapBlazor/BootstrapBlazor.csproj
+++ b/src/BootstrapBlazor/BootstrapBlazor.csproj
@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.7.4-beta08</Version>
+    <Version>9.7.4</Version>
   </PropertyGroup>
 
   <ItemGroup>