diff --git a/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj b/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj
index 0b265fc0a15..367986c6626 100644
--- a/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj
+++ b/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj
@@ -64,7 +64,7 @@
     <PackageReference Include="BootstrapBlazor.SummerNote" Version="9.0.3" />
     <PackageReference Include="BootstrapBlazor.TableExport" Version="9.2.1" />
     <PackageReference Include="BootstrapBlazor.Topology" Version="9.0.0" />
-    <PackageReference Include="BootstrapBlazor.UniverSheet" Version="9.0.0-beta02" />
+    <PackageReference Include="BootstrapBlazor.UniverSheet" Version="9.0.0-beta04" />
     <PackageReference Include="BootstrapBlazor.VideoPlayer" Version="9.0.3" />
     <PackageReference Include="BootstrapBlazor.WinBox" Version="9.0.7" />
   </ItemGroup>
diff --git a/src/BootstrapBlazor.Server/Components/Layout/TutorialsLayout.razor b/src/BootstrapBlazor.Server/Components/Layout/TutorialsLayout.razor
index 14f5e5ff187..ddeaea3821e 100644
--- a/src/BootstrapBlazor.Server/Components/Layout/TutorialsLayout.razor
+++ b/src/BootstrapBlazor.Server/Components/Layout/TutorialsLayout.razor
@@ -9,6 +9,7 @@
         </div>
         <TutorialsNavMenu></TutorialsNavMenu>
         <Wwads IsVertical="true"></Wwads>
+        <LayoutSplitebar Min="220" Max="330" ContainerSelector=".section"></LayoutSplitebar>
     </aside>
 
     <section class="main">
diff --git a/src/BootstrapBlazor.Server/Components/Layout/TutorialsLayout.razor.css b/src/BootstrapBlazor.Server/Components/Layout/TutorialsLayout.razor.css
index b799b437c46..c3080b71a8f 100644
--- a/src/BootstrapBlazor.Server/Components/Layout/TutorialsLayout.razor.css
+++ b/src/BootstrapBlazor.Server/Components/Layout/TutorialsLayout.razor.css
@@ -1,8 +1,4 @@
-.section {
-    --bb-sidebar-width: 0;
-}
-
-.main {
+.main {
     padding: 1rem;
 }
 
@@ -24,7 +20,7 @@
 
 @media (min-width: 768px) {
     .section {
-        --bb-sidebar-width: 300px;
+        --bb-layout-sidebar-width: 300px;
         display: flex;
         flex-direction: row;
         -webkit-font-smoothing: antialiased;
@@ -35,7 +31,7 @@
     }
 
     .sidebar {
-        width: var(--bb-sidebar-width);
+        width: var(--bb-layout-sidebar-width);
         height: calc(100vh);
         position: sticky;
         top: 0;
@@ -44,7 +40,8 @@
     }
 
     .main {
-        flex: 1;
+        flex: 1 1 0%;
+        min-width: 0px;
         height: 100%;
     }
 }
diff --git a/src/BootstrapBlazor.Server/Components/Layout/TutorialsNavMenu.razor.cs b/src/BootstrapBlazor.Server/Components/Layout/TutorialsNavMenu.razor.cs
index 3ee57f35c32..c92f1019ab0 100644
--- a/src/BootstrapBlazor.Server/Components/Layout/TutorialsNavMenu.razor.cs
+++ b/src/BootstrapBlazor.Server/Components/Layout/TutorialsNavMenu.razor.cs
@@ -105,6 +105,11 @@ protected override async Task OnInitializedAsync()
             {
                 Text = Localizer["AdminSummary"],
                 Url = "tutorials/admin",
+            },
+            new()
+            {
+                Text = Localizer["OnlineSheet"],
+                Url = "tutorials/online-sheet",
             }
         ]);
     }
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Tutorials/OnlineSheet.razor b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/OnlineSheet.razor
new file mode 100644
index 00000000000..a71b4f0fac1
--- /dev/null
+++ b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/OnlineSheet.razor
@@ -0,0 +1,6 @@
+@page "/OnlineSheet"
+<h3>OnlineSheet</h3>
+
+@code {
+    
+}
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Tutorials/OnlineSheet.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/OnlineSheet.razor.cs
new file mode 100644
index 00000000000..dc06fd5d6fc
--- /dev/null
+++ b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/OnlineSheet.razor.cs
@@ -0,0 +1,8 @@
+using Microsoft.AspNetCore.Components;
+
+namespace BootstrapBlazor.Server.Components.Samples.Tutorials;
+
+public partial class OnlineSheet : ComponentBase
+{
+}
+
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Tutorials/OnlineSheet.razor.css b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/OnlineSheet.razor.css
new file mode 100644
index 00000000000..5f282702bb0
--- /dev/null
+++ b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/OnlineSheet.razor.css
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Tutorials/OnlineSheet/OnlineContributor.razor b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/OnlineSheet/OnlineContributor.razor
new file mode 100644
index 00000000000..9a991e2de4b
--- /dev/null
+++ b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/OnlineSheet/OnlineContributor.razor
@@ -0,0 +1,16 @@
+@namespace BootstrapBlazor.Server.Components.Samples.Tutorials
+
+<div class="bb-contributor">
+    <img src="@Contributor.Avatar" />
+    <div class="bb-contributor-main">
+        <div class="bb-contributor-item">
+            <label>姓名：</label>
+            <span>@Contributor.Name</span>
+        </div>
+        <div class="bb-contributor-item">
+            <label>姓名：</label>
+            <span>@Contributor.Description</span>
+        </div>
+    </div>
+</div>
+
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Tutorials/OnlineSheet/OnlineContributor.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/OnlineSheet/OnlineContributor.razor.cs
new file mode 100644
index 00000000000..586b1bb2f9e
--- /dev/null
+++ b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/OnlineSheet/OnlineContributor.razor.cs
@@ -0,0 +1,19 @@
+// 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.Tutorials;
+
+/// <summary>
+/// Online sheet sample code
+/// </summary>
+public partial class OnlineContributor
+{
+    /// <summary>
+    /// Gets or sets Contributor
+    /// </summary>
+    [Parameter]
+    [NotNull]
+    public Contributor? Contributor { get; set; }
+}
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Tutorials/OnlineSheet/OnlineContributor.razor.css b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/OnlineSheet/OnlineContributor.razor.css
new file mode 100644
index 00000000000..90fb2b1a8f8
--- /dev/null
+++ b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/OnlineSheet/OnlineContributor.razor.css
@@ -0,0 +1,10 @@
+.bb-contributor {
+    display: flex;
+    flex-direction: row;
+}
+
+    .bb-contributor img {
+        border-radius: 50%;
+        width: 56px;
+        margin-right: .5rem;
+    }
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Tutorials/OnlineSheet/OnlineSheet.razor b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/OnlineSheet/OnlineSheet.razor
new file mode 100644
index 00000000000..4e367f0684b
--- /dev/null
+++ b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/OnlineSheet/OnlineSheet.razor
@@ -0,0 +1,6 @@
+@namespace BootstrapBlazor.Server.Components.Samples.Tutorials
+@page "/tutorials/online-sheet"
+
+<div class="bb-online-sheet-demo">
+    <UniverSheet @ref="_sheetExcel" Data="@_data" OnReadyAsync="OnReadyAsync"></UniverSheet>
+</div>
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Tutorials/OnlineSheet/OnlineSheet.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/OnlineSheet/OnlineSheet.razor.cs
new file mode 100644
index 00000000000..1ad17d78894
--- /dev/null
+++ b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/OnlineSheet/OnlineSheet.razor.cs
@@ -0,0 +1,103 @@
+// 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.Tutorials;
+
+/// <summary>
+/// Online sheet sample code
+/// </summary>
+public partial class OnlineSheet : ComponentBase, IDisposable
+{
+    [Inject, NotNull]
+    private IWebHostEnvironment? WebHost { get; set; }
+
+    [Inject, NotNull]
+    private ToastService? ToastService { get; set; }
+
+    [Inject, NotNull]
+    private IStringLocalizer<OnlineSheet>? Localizer { get; set; }
+
+    [Inject]
+    [NotNull]
+    private IDispatchService<Contributor>? DispatchService { get; set; }
+
+    [NotNull]
+    private UniverSheet? _sheetExcel = null;
+
+    private UniverSheetData? _data = null;
+
+    private bool _inited = false;
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+
+        var reportFile = Path.Combine(WebHost.WebRootPath, "univer-sheet", "report.json");
+        if (File.Exists(reportFile))
+        {
+            var sheetData = File.ReadAllText(reportFile);
+
+            _data = new UniverSheetData()
+            {
+                Data = sheetData
+            };
+        }
+    }
+
+    private async Task OnReadyAsync()
+    {
+        _inited = true;
+        await ToastService.Information(Localizer["ToastOnReadyTitle"], Localizer["ToastOnReadyContent"]);
+        DispatchService.Subscribe(Dispatch);
+    }
+
+    private async Task Dispatch(DispatchEntry<Contributor> entry)
+    {
+        if (!_inited)
+        {
+            return;
+        }
+
+        if (entry.Entry != null)
+        {
+            await ToastService.Show(new ToastOption()
+            {
+                Title = "Dispatch 服务测试",
+                ChildContent = BootstrapDynamicComponent.CreateComponent<OnlineContributor>(new Dictionary<string, object?>()
+                {
+                    { "Contributor", entry.Entry }
+                }).Render(),
+                Category = ToastCategory.Information,
+                Delay = 3000,
+                ForceDelay = true
+            });
+
+            DispatchService.UnSubscribe(Dispatch);
+
+            await _sheetExcel.PushDataAsync(entry.Entry.Data);
+        }
+    }
+
+    private void Dispose(bool disposing)
+    {
+        if (disposing)
+        {
+            DispatchService.UnSubscribe(Dispatch);
+        }
+    }
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    public void Dispose()
+    {
+        Dispose(true);
+        GC.SuppressFinalize(this);
+    }
+}
+
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Tutorials/OnlineSheet/OnlineSheet.razor.css b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/OnlineSheet/OnlineSheet.razor.css
new file mode 100644
index 00000000000..e435f1e6d72
--- /dev/null
+++ b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/OnlineSheet/OnlineSheet.razor.css
@@ -0,0 +1,4 @@
+.bb-online-sheet-demo {
+    margin: -1rem;
+    height: calc(100vh - var(--bs-header-height));
+}
diff --git a/src/BootstrapBlazor.Server/Extensions/ServiceCollectionExtensions.cs b/src/BootstrapBlazor.Server/Extensions/ServiceCollectionExtensions.cs
index 78dfeeb67d3..6e0d00b0e1b 100644
--- a/src/BootstrapBlazor.Server/Extensions/ServiceCollectionExtensions.cs
+++ b/src/BootstrapBlazor.Server/Extensions/ServiceCollectionExtensions.cs
@@ -44,6 +44,7 @@ void Invoke(BootstrapBlazorOptions option)
         // 增加后台任务服务
         services.AddTaskServices();
         services.AddHostedService<ClearTempFilesService>();
+        services.AddHostedService<MockOnlineContributor>();
 
         // 增加通用服务
         services.AddBootstrapBlazorServices();
diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
index b83d22503d7..cb0e7190da5 100644
--- a/src/BootstrapBlazor.Server/Locales/en-US.json
+++ b/src/BootstrapBlazor.Server/Locales/en-US.json
@@ -21,7 +21,8 @@
     "WaterfallSummary": "Waterfall",
     "TranslateSummary": "Translate",
     "DrawingSummary": "Drawing",
-    "AdminSummary": "Admin"
+    "AdminSummary": "Admin",
+    "OnlineSheet": "UniverSheet"
   },
   "BootstrapBlazor.Server.Components.Components.Pre": {
     "LoadingText": "Loading ...",
@@ -7017,5 +7018,9 @@
     "ToastOnReadyContent": "The sheet is ready for push data.",
     "PluginTitle": "Plugins",
     "PluginIntro": "Set custom plugins by setting the <code>Plugins</code> parameter"
+  },
+  "BootstrapBlazor.Server.Components.Samples.Tutorials.OnlineSheet": {
+    "ToastOnReadyTitle": "Collaboration Notification",
+    "ToastOnReadyContent": "After 4 seconds the table is updated by other writers to change the content"
   }
 }
diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json
index 6b33b5ed63b..e51327f430c 100644
--- a/src/BootstrapBlazor.Server/Locales/zh-CN.json
+++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json
@@ -21,7 +21,8 @@
     "WaterfallSummary": "瀑布流图片 Waterfall",
     "TranslateSummary": "翻译工具 Translate",
     "DrawingSummary": "画图 Drawing",
-    "AdminSummary": "中台 Admin"
+    "AdminSummary": "中台 Admin",
+    "OnlineSheet": "在线表格 UniverSheet"
   },
   "BootstrapBlazor.Server.Components.Components.Pre": {
     "LoadingText": "正在加载 ...",
@@ -7017,5 +7018,9 @@
     "ToastOnReadyContent": "表格组件已就绪，可进行后续数据推送等操作",
     "PluginTitle": "自定义插件",
     "PluginIntro": "通过设置 <code>Plugins</code> 参数设置自己的插件"
+  },
+  "BootstrapBlazor.Server.Components.Samples.Tutorials.OnlineSheet": {
+    "ToastOnReadyTitle": "在线表格协作通知",
+    "ToastOnReadyContent": "4 秒后表格更新其他写作人员更改内容"
   }
 }
diff --git a/src/BootstrapBlazor.Server/Services/MockOnlineContributor.cs b/src/BootstrapBlazor.Server/Services/MockOnlineContributor.cs
new file mode 100644
index 00000000000..0a60295454c
--- /dev/null
+++ b/src/BootstrapBlazor.Server/Services/MockOnlineContributor.cs
@@ -0,0 +1,71 @@
+// 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
+
+using Longbow.Tasks;
+
+namespace BootstrapBlazor.Server.Services;
+
+class MockOnlineContributor(IDispatchService<Contributor> dispatchService) : BackgroundService
+{
+    /// <summary>
+    /// 运行任务
+    /// </summary>
+    /// <param name="stoppingToken"></param>
+    /// <returns></returns>
+    protected override Task ExecuteAsync(CancellationToken stoppingToken)
+    {
+        TaskServicesManager.GetOrAdd("OnlineSheet", (provider, token) =>
+        {
+            dispatchService.Dispatch(new DispatchEntry<Contributor>()
+            {
+                Name = "OnlineSheet-Demo",
+                Entry = new Contributor()
+                {
+                    Name = "Argo Zhang",
+                    Avatar = "/images/Argo-C.png",
+                    Description = "正在更新单元格 A8",
+                    Data = new UniverSheetData()
+                    {
+                        CommandName = "UpdateRange",
+                        Data = new
+                        {
+                            Range = "A8",
+                            Value = $"{DateTime.Now: yyyy-MM-dd HH:mm:ss} Argo 更新此单元格"
+                        }
+                    }
+                }
+            });
+            return Task.CompletedTask;
+        }, TriggerBuilder.Build(Cron.Secondly(5)));
+
+        return Task.CompletedTask;
+    }
+}
+
+/// <summary>
+/// Contributor
+/// </summary>
+public class Contributor
+{
+    /// <summary>
+    /// Gets or sets Name
+    /// </summary>
+    public string? Name { get; set; }
+
+    /// <summary>
+    /// Gets or sets Avatar
+    /// </summary>
+    public string? Avatar { get; set; }
+
+    /// <summary>
+    /// Gets or sets Description
+    /// </summary>
+    public string? Description { get; set; }
+
+    /// <summary>
+    /// Gets or sets Sheet data
+    /// </summary>
+    public UniverSheetData? Data { get; set; }
+}