diff --git a/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj b/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj
index b99b85ef9a7..e250331f63a 100644
--- a/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj
+++ b/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj
@@ -79,6 +79,7 @@
     <PackageReference Include="BootstrapBlazor.TableExport" Version="10.0.2" />
     <PackageReference Include="BootstrapBlazor.Tasks.Dashboard" Version="10.0.1" />
     <PackageReference Include="BootstrapBlazor.Term" Version="10.0.0" />
+    <PackageReference Include="BootstrapBlazor.Theme.Fluent" Version="10.0.0-beta01" />
     <PackageReference Include="BootstrapBlazor.Topology" Version="10.0.0" />
     <PackageReference Include="BootstrapBlazor.UniverIcon" Version="10.0.0" />
     <PackageReference Include="BootstrapBlazor.UniverSheet" Version="10.0.15" />
diff --git a/src/BootstrapBlazor.Server/Components/Components/DemoBlock.razor.css b/src/BootstrapBlazor.Server/Components/Components/DemoBlock.razor.css
index 169859e1852..9032e3e25d9 100644
--- a/src/BootstrapBlazor.Server/Components/Components/DemoBlock.razor.css
+++ b/src/BootstrapBlazor.Server/Components/Components/DemoBlock.razor.css
@@ -54,12 +54,12 @@
 
 .card-footer-control {
     text-align: center;
-    color: #d3dce6;
+    color: var(--bs-secondary-color);
     display: block;
 }
 
     .card-footer-control:hover {
-        color: #409eff;
+        color: var(--bs-primary);
     }
 
     .card-footer-control i {
diff --git a/src/BootstrapBlazor.Server/Components/Components/Header.razor.css b/src/BootstrapBlazor.Server/Components/Components/Header.razor.css
index a4f1d7abb03..a4dc8e5a4f6 100644
--- a/src/BootstrapBlazor.Server/Components/Components/Header.razor.css
+++ b/src/BootstrapBlazor.Server/Components/Components/Header.razor.css
@@ -1,4 +1,4 @@
-.navbar-header {
+.navbar-header {
     background-color: transparent;
     background-image: linear-gradient(to right, rgba(var(--bb-primary-color-rgb), 1), rgba(var(--bb-primary-color-rgb), 0.9));
     box-shadow: 0 0.5rem 1rem rgba(0,0,0,.05), inset 0 -1px 0 rgba(0,0,0,.1);
@@ -41,6 +41,8 @@
 .nav-link img {
     height: 24px;
     width: auto;
+    /* the repo svgs ship without a fill (render black) — invert to white on the colored header */
+    filter: brightness(0) invert(1);
 }
 
 .navbar-version {
diff --git a/src/BootstrapBlazor.Server/Components/Components/ThemeChooser.razor.cs b/src/BootstrapBlazor.Server/Components/Components/ThemeChooser.razor.cs
index 70a2e84fb0b..fc0b961baff 100644
--- a/src/BootstrapBlazor.Server/Components/Components/ThemeChooser.razor.cs
+++ b/src/BootstrapBlazor.Server/Components/Components/ThemeChooser.razor.cs
@@ -1,4 +1,4 @@
-// Licensed to the .NET Foundation under one or more agreements.
+// 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
@@ -45,7 +45,7 @@ private void OnClickTheme(SelectedItem item)
         var theme = WebsiteOption.Value.Themes.FirstOrDefault(i => i.Key == item.Value);
         if (theme is { Files: not null })
         {
-            _currentTheme.AddRange(theme.Files);
+            _currentTheme.AddRange(theme.Files.Select(i => Assets[i]));
         }
     }
 
diff --git a/src/BootstrapBlazor.Server/Components/Components/ThemeChooser.razor.css b/src/BootstrapBlazor.Server/Components/Components/ThemeChooser.razor.css
index 14e158574b7..662e6dfeec4 100644
--- a/src/BootstrapBlazor.Server/Components/Components/ThemeChooser.razor.css
+++ b/src/BootstrapBlazor.Server/Components/Components/ThemeChooser.razor.css
@@ -1,4 +1,4 @@
-.theme-list {
+.theme-list {
     position: fixed;
     z-index: 47;
     bottom: 12rem;
@@ -13,7 +13,7 @@
 }
 
     .theme-list.is-open {
-        height: 306px;
+        height: 355px;
     }
 
 .theme-header {
diff --git a/src/BootstrapBlazor.Server/Components/Components/ThemeChooser.razor.js b/src/BootstrapBlazor.Server/Components/Components/ThemeChooser.razor.js
index 9efccd34bdb..03a890bec19 100644
--- a/src/BootstrapBlazor.Server/Components/Components/ThemeChooser.razor.js
+++ b/src/BootstrapBlazor.Server/Components/Components/ThemeChooser.razor.js
@@ -7,19 +7,47 @@ export function init(id) {
     }
 
     const themeList = document.querySelector('.theme-list');
-    const close = document.querySelector('.theme-list .btn-close');
+    if (themeList === null) {
+        return;
+    }
+
     EventHandler.on(el, 'click', () => {
         themeList.classList.toggle('is-open');
     });
-    EventHandler.on(close, 'click', () => {
+
+    const close = themeList.querySelector('.btn-close');
+    if (close) {
+        EventHandler.on(close, 'click', () => {
+            themeList.classList.remove('is-open');
+        });
+    }
+
+    EventHandler.on(themeList, 'click', '.theme-item', () => {
         themeList.classList.remove('is-open');
     });
+
+    const outsideClick = e => {
+        if (!el.contains(e.target) && !themeList.contains(e.target)) {
+            themeList.classList.remove('is-open');
+        }
+    };
+    EventHandler.on(document, 'click', outsideClick);
+    el.themeOutsideClick = outsideClick;
 }
 
 export function dispose(id) {
     const el = document.getElementById(id);
     if (el) {
         EventHandler.off(el, 'click');
+        if (el.themeOutsideClick) {
+            EventHandler.off(document, 'click', el.themeOutsideClick);
+            delete el.themeOutsideClick;
+        }
+    }
+
+    const themeList = document.querySelector('.theme-list');
+    if (themeList) {
+        EventHandler.off(themeList, 'click');
     }
 
     const close = document.querySelector('.theme-list .btn-close');
diff --git a/src/BootstrapBlazor.Server/Components/Pages/Install.razor b/src/BootstrapBlazor.Server/Components/Pages/Install.razor
index ca5c1dbe0a1..7ccfa35b757 100644
--- a/src/BootstrapBlazor.Server/Components/Pages/Install.razor
+++ b/src/BootstrapBlazor.Server/Components/Pages/Install.razor
@@ -1,4 +1,4 @@
-@page "/install"
+@page "/install"
 @inject IStringLocalizer<Install> Localizer
 @inject IOptions<WebsiteOptions> WebsiteOption
 
@@ -30,6 +30,9 @@
 &lt;link rel="stylesheet" href="@@Assets["_content/BootstrapBlazor.FontAwesome/css/font-awesome.min.css"]" /&gt;
 @Localizer["BootstrapStyle"]
 &lt;link rel="stylesheet" href="@@Assets["_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css"]" /&gt;
+@Localizer["FluentDesc"]
+dotnet add package BootstrapBlazor.Theme.Fluent
+&lt;link rel="stylesheet" href="@@Assets["_content/BootstrapBlazor.Theme.Fluent/fluent.min.css"]" /&gt;
 @Localizer["MotronicDesc"]
 &lt;link rel="stylesheet" href="@@Assets["_content/BootstrapBlazor/css/motronic.min.css"]" /&gt;</Pre>
 	</TabItem>
@@ -38,6 +41,9 @@
 &lt;link rel="stylesheet" href="_content/BootstrapBlazor.FontAwesome/css/font-awesome.min.css" /&gt;
 @Localizer["BootstrapStyle"]
 &lt;link rel="stylesheet" href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css" /&gt;
+@Localizer["FluentDesc"]
+dotnet add package BootstrapBlazor.Theme.Fluent
+&lt;link rel="stylesheet" href="_content/BootstrapBlazor.Theme.Fluent/fluent.min.css" /&gt;
 @Localizer["MotronicDesc"]
 &lt;link rel="stylesheet" href="_content/BootstrapBlazor/css/motronic.min.css" /&gt;</Pre>
 	</TabItem>
diff --git a/src/BootstrapBlazor.Server/Components/Pages/Theme.razor b/src/BootstrapBlazor.Server/Components/Pages/Theme.razor
index 8523cb49829..437bdd1010e 100644
--- a/src/BootstrapBlazor.Server/Components/Pages/Theme.razor
+++ b/src/BootstrapBlazor.Server/Components/Pages/Theme.razor
@@ -1,5 +1,7 @@
-@page "/theme"
+@page "/theme"
 @inject IStringLocalizer<Theme> Localizer
+@inject MessageService MessageService
+@inject ToastService ToastService
 
 <h3>@Localizer["H1"]</h3>
 
@@ -9,6 +11,7 @@
 
 <ul class="ul-demo">
     <li>@Localizer["P2"]</li>
+    <li>@Localizer["P11"]</li>
     <li>@Localizer["P3"]</li>
     <li>@Localizer["P4"]</li>
     <li>@Localizer["P5"]</li>
@@ -16,9 +19,290 @@
 
 <h4>@Localizer["P6"]</h4>
 
-<p>@Localizer["P7"] <code>Motronic</code> @Localizer["P8"] <code>head</code> @Localizer["P9"]：</p>
+<p>@Localizer["P12"] <code>head</code> @Localizer["P14"]：</p>
 
-<Pre>&lt;link href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css" rel="stylesheet"&gt;
+<Pre>// @Localizer["P23"]
+&lt;link href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css" rel="stylesheet"&gt;
 
-// @Localizer["P10"]
+// @Localizer["P15"] Fluent UI
+dotnet add package BootstrapBlazor.Theme.Fluent
+&lt;link rel="stylesheet" href="_content/BootstrapBlazor.Theme.Fluent/fluent.min.css"&gt;
+
+// @Localizer["P19"] Motronic
 &lt;link rel="stylesheet" href="_content/BootstrapBlazor/css/motronic.min.css"&gt;</Pre>
+
+<p>@Localizer["P24"] <code>BootstrapBlazor.Theme.Fluent</code> @Localizer["P25"] <code>_content/BootstrapBlazor.Theme.Fluent/fluent.min.css</code></p>
+
+<p>@Localizer["P16"] <code>data-bs-theme</code> @Localizer["P17"] <code>&lt;html&gt;</code> @Localizer["P20"] <code>data-bs-theme="dark"</code> @Localizer["P21"] <code>ThemeProvider</code> @Localizer["P22"]</p>
+
+<h4>Component preview</h4>
+
+<p>Sections below exercise the core components with minimal parameters. Use the theme button at the bottom-right corner of this site to switch between Fluent UI, Motronic and Bootstrap in light or dark mode and eyeball the result in one place.</p>
+
+<h4>Buttons</h4>
+
+<div class="row g-3">
+    <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button Color="Color.Primary">Primary</Button></div>
+    <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button Color="Color.Secondary">Secondary</Button></div>
+    <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button Color="Color.Success">Success</Button></div>
+    <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button Color="Color.Danger">Danger</Button></div>
+    <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button Color="Color.Warning">Warning</Button></div>
+    <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button Color="Color.Info">Info</Button></div>
+    <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button Color="Color.Light">Light</Button></div>
+    <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button Color="Color.Dark">Dark</Button></div>
+    <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button Color="Color.Link">Link</Button></div>
+</div>
+
+<div class="row g-3 mt-1">
+    <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Primary">Primary</Button></div>
+    <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Secondary">Secondary</Button></div>
+    <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Success">Success</Button></div>
+    <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Danger">Danger</Button></div>
+    <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Warning">Warning</Button></div>
+    <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Info">Info</Button></div>
+    <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Light">Light</Button></div>
+    <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Dark">Dark</Button></div>
+    <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Link">Link</Button></div>
+</div>
+
+<div class="row g-3 mt-1">
+    <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button Color="Color.Primary" IsDisabled="true">Disabled</Button></div>
+    <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Secondary" IsDisabled="true">Disabled outline</Button></div>
+    <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button Color="Color.Success" Icon="fa-solid fa-floppy-disk">Icon</Button></div>
+</div>
+
+<h4>Forms</h4>
+
+<div class="row g-3">
+    <div class="col-12 col-md-4">
+        <BootstrapInput TValue="string" Value="@("Text input")" />
+    </div>
+    <div class="col-12 col-md-4">
+        <BootstrapInputNumber TValue="int" Value="42" />
+    </div>
+    <div class="col-12 col-md-4">
+        <Textarea rows="1" Value="Textarea content" />
+    </div>
+    <div class="col-12 col-md-4">
+        <Select TValue="string" Items="SelectItems" Value="@("2")" />
+    </div>
+    <div class="col-12 col-md-4">
+        <MultiSelect TValue="string" Items="SelectItems" />
+    </div>
+    <div class="col-12 col-md-4">
+        <RadioList TValue="string" Items="SelectItems" />
+    </div>
+    <div class="col-12 col-md-4 d-flex align-items-center gap-3">
+        <Switch Value="true" OnText="On" OffText="Off" />
+        <Switch Value="false" OnColor="Color.Success" OnText="On" OffText="Off" />
+        <Switch Value="true" IsDisabled="true" />
+    </div>
+    <div class="col-12 col-md-4 d-flex align-items-center gap-3">
+        <Checkbox TValue="string" State="CheckboxState.Checked" DisplayText="Checked" ShowLabel="true" />
+        <Checkbox TValue="string" State="CheckboxState.UnChecked" DisplayText="Unchecked" ShowLabel="true" />
+        <Checkbox TValue="string" State="CheckboxState.Indeterminate" DisplayText="Indeterminate" ShowLabel="true" />
+    </div>
+    <div class="col-12 col-md-4 d-flex align-items-center gap-3">
+        <Rate Value="3" />
+    </div>
+    <div class="col-12 col-md-8">
+        <Slider TValue="double" Value="40" />
+    </div>
+    <div class="col-12 col-md-4">
+        <Slider TValue="double" Value="70" IsDisabled="true" />
+    </div>
+    <div class="col-12 col-md-4">
+        <input type="text" class="form-control is-valid" value="Valid input" />
+        <div class="valid-feedback">Looks good.</div>
+    </div>
+    <div class="col-12 col-md-4">
+        <input type="text" class="form-control is-invalid" value="Invalid input" />
+        <div class="invalid-feedback">Required field.</div>
+    </div>
+</div>
+
+<h4>Data display</h4>
+
+<div class="theme-preview-table">
+    <Table TItem="PreviewItem" Items="TableItems">
+        <TableColumns>
+            <TableColumn @bind-Field="@context.Name" />
+            <TableColumn @bind-Field="@context.Count" />
+            <TableColumn @bind-Field="@context.Date" />
+        </TableColumns>
+    </Table>
+</div>
+
+<div class="row g-3 mt-1 align-items-center">
+    <div class="col-auto"><Tag Color="Color.Primary">Primary</Tag></div>
+    <div class="col-auto"><Tag Color="Color.Success">Success</Tag></div>
+    <div class="col-auto"><Tag Color="Color.Danger">Danger</Tag></div>
+    <div class="col-auto"><Tag Color="Color.Warning">Warning</Tag></div>
+    <div class="col-auto"><Badge Color="Color.Primary">Primary</Badge></div>
+    <div class="col-auto"><Badge Color="Color.Success">Success</Badge></div>
+    <div class="col-auto"><Badge Color="Color.Danger">Danger</Badge></div>
+    <div class="col-auto"><Badge Color="Color.Warning">Warning</Badge></div>
+    <div class="col-auto"><Avatar Text="BB" Size="Size.Large" /></div>
+    <div class="col-auto"><Avatar Icon="fa-solid fa-user" IsCircle="true" /></div>
+</div>
+
+<div class="row g-3 mt-1">
+    <div class="col-12 col-md-4">
+        <Card>
+            <HeaderTemplate>
+                Featured
+            </HeaderTemplate>
+            <BodyTemplate>
+                <h5>Card title</h5>
+                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+            </BodyTemplate>
+            <FooterTemplate>
+                2 days ago
+            </FooterTemplate>
+        </Card>
+    </div>
+    <div class="col-12 col-md-4">
+        <div class="d-flex flex-column gap-3">
+            <BootstrapBlazor.Components.Progress Value="25" IsShowValue="true" />
+            <BootstrapBlazor.Components.Progress Value="50" Color="Color.Success" IsShowValue="true" />
+            <BootstrapBlazor.Components.Progress Value="75" Color="Color.Warning" IsShowValue="true" />
+            <div class="d-flex gap-3 align-items-center">
+                <Spinner Color="Color.Primary"></Spinner>
+                <Spinner Color="Color.Success"></Spinner>
+                <Spinner Color="Color.Danger"></Spinner>
+                <Spinner Color="Color.Warning"></Spinner>
+            </div>
+        </div>
+    </div>
+    <div class="col-12 col-md-4">
+        <div class="d-flex gap-3">
+            <SkeletonAvatar Circle="true" />
+            <div class="flex-fill">
+                <SkeletonParagraph />
+            </div>
+        </div>
+    </div>
+</div>
+
+<h4>Feedback</h4>
+
+<Alert Color="Color.Primary">Primary alert</Alert>
+<Alert Color="Color.Success">Success alert</Alert>
+<Alert Color="Color.Warning">Warning alert</Alert>
+<Alert Color="Color.Danger">Danger alert</Alert>
+<Alert Color="Color.Info" ShowDismiss="true">Info alert with dismiss</Alert>
+
+<div class="row g-3 mt-1">
+    <div class="col-auto"><Button Color="Color.Primary" OnClick="OnShowModal">Modal</Button></div>
+    <div class="col-auto">
+        <Tooltip Placement="Placement.Top" Title="Tooltip content">
+            <Button Color="Color.Secondary">Tooltip</Button>
+        </Tooltip>
+    </div>
+    <div class="col-auto">
+        <Popover Placement="Placement.Top" Title="Popover title" Content="Popover content" Trigger="click">
+            <Button Color="Color.Secondary">Popover</Button>
+        </Popover>
+    </div>
+    <div class="col-auto"><Button Color="Color.Success" OnClick="OnShowMessage">Message</Button></div>
+    <div class="col-auto"><Button Color="Color.Success" OnClick="OnShowToast">Toast</Button></div>
+</div>
+
+<Modal @ref="Modal">
+    <ModalDialog Title="Modal title">
+        <BodyTemplate>
+            <p>Modal body text.</p>
+        </BodyTemplate>
+    </ModalDialog>
+</Modal>
+
+<h4>Navigation</h4>
+
+<Tab>
+    <TabItem Text="First">
+        <div class="mt-3">First tab content</div>
+    </TabItem>
+    <TabItem Text="Second">
+        <div class="mt-3">Second tab content</div>
+    </TabItem>
+    <TabItem Text="Third">
+        <div class="mt-3">Third tab content</div>
+    </TabItem>
+</Tab>
+
+<div class="row g-3 mt-1 align-items-center">
+    <div class="col-12 col-md-6">
+        <Breadcrumb Value="BreadcrumbItems" />
+    </div>
+    <div class="col-12 col-md-6">
+        <Pagination PageCount="5" />
+    </div>
+</div>
+
+<div class="row g-3 mt-1">
+    <div class="col-12 col-md-4">
+        <Menu Items="MenuItems" DisableNavigation="true" IsVertical="true" style="width: 220px; border-right: 1px solid var(--bs-border-color); padding-right: 4px;"></Menu>
+    </div>
+</div>
+
+<h4>Pickers</h4>
+
+<div class="row g-3">
+    <div class="col-12 col-md-4">
+        <DateTimePicker TValue="DateTime" Value="DateTime.Today" />
+    </div>
+    <div class="col-12 col-md-4">
+        <Select TValue="string" Items="SelectItems" ShowSearch="true" />
+    </div>
+</div>
+
+@code {
+    [NotNull]
+    private Modal? Modal { get; set; }
+
+    private List<SelectedItem> SelectItems { get; } =
+    [
+        new SelectedItem("1", "Option 1"),
+        new SelectedItem("2", "Option 2"),
+        new SelectedItem("3", "Option 3")
+    ];
+
+    private List<BreadcrumbItem> BreadcrumbItems { get; } =
+    [
+        new BreadcrumbItem("Home", "#"),
+        new BreadcrumbItem("Library", "#"),
+        new BreadcrumbItem("Data")
+    ];
+
+    private List<MenuItem> MenuItems { get; } =
+    [
+        new MenuItem("Home", icon: "fa-solid fa-house"),
+        new MenuItem("Components", icon: "fa-solid fa-cubes")
+        {
+            Items = [new MenuItem("Button"), new MenuItem("Table")]
+        },
+        new MenuItem("Settings", icon: "fa-solid fa-gear")
+    ];
+
+    private List<PreviewItem> TableItems { get; } =
+    [
+        new PreviewItem { Name = "Alice", Count = 3, Date = new DateTime(2026, 1, 5) },
+        new PreviewItem { Name = "Bob", Count = 7, Date = new DateTime(2026, 2, 14) },
+        new PreviewItem { Name = "Carol", Count = 12, Date = new DateTime(2026, 3, 21) }
+    ];
+
+    private void OnShowModal() => Modal.Toggle();
+
+    private async Task OnShowMessage() => await MessageService.Show(new MessageOption { Content = "Message content", Color = Color.Success });
+
+    private async Task OnShowToast() => await ToastService.Success("Toast title", "Toast content");
+
+    private class PreviewItem
+    {
+        public string Name { get; set; } = "";
+
+        public int Count { get; set; }
+
+        public DateTime Date { get; set; }
+    }
+}
diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
index c8f2a443920..74074d1cd3b 100644
--- a/src/BootstrapBlazor.Server/Locales/en-US.json
+++ b/src/BootstrapBlazor.Server/Locales/en-US.json
@@ -550,6 +550,7 @@
   },
   "BootstrapBlazor.Server.Components.Pages.Install": {
     "BootstrapStyle": "// Component styles have been integrated with the latest version of Bootstrap",
+    "FluentDesc": "// The Fluent UI theme is an optional standalone package; install it before adding the stylesheet",
     "FontAwesomeCss": "// FontAwesome font icon style Note that you need to reference the BootstrapBlazor.FontAwesome package",
     "InstallDesc": "Getting started with BootstrapBlazor for faster and easier .NET web development.",
     "InstallTitle": "Install",
@@ -723,17 +724,27 @@
   },
   "BootstrapBlazor.Server.Components.Pages.Theme": {
     "H1": "Component theme",
-    "H2": "Test",
+    "H2": "Built-in Themes",
     "P1": "The current website theme supports the following",
-    "P10": "add this line",
+    "P11": "Fluent UI (integrated)",
+    "P12": "Theme styles are provided as static web assets. In the",
+    "P13": "static web assets",
+    "P14": "section, add the theme stylesheet after the base bundle",
+    "P15": "Enable",
+    "P16": "The built-in themes support both light and dark modes through the",
+    "P17": "attribute on the",
+    "P19": "Optional theme:",
     "P2": "Motronic (integrated)",
+    "P20": "element: set",
+    "P21": "for dark mode, or toggle it at runtime with the",
+    "P22": "component, just like the mode button at the bottom-right corner of this site",
+    "P23": "Required base stylesheet",
+    "P24": "The Fluent UI theme is distributed through the standalone NuGet package",
+    "P25": "and its stylesheet is available at",
     "P3": "LayUI (in progress)",
     "P4": "Bluma (in progress)",
     "P5": "Ant Design (in progress)",
-    "P6": "Theme switch",
-    "P7": "If switch to",
-    "P8": "theme, please use the original",
-    "P9": "The added style file is as follows"
+    "P6": "Theme switch"
   },
   "BootstrapBlazor.Server.Components.Samples.Affixs": {
     "AffixIntro": "Fix the element to a specific visible area",
diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json
index 43793b996e0..e4f0d57d55f 100644
--- a/src/BootstrapBlazor.Server/Locales/zh-CN.json
+++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json
@@ -550,6 +550,7 @@
   },
   "BootstrapBlazor.Server.Components.Pages.Install": {
     "BootstrapStyle": "// 组件样式已集成 Bootstrap 最新版",
+    "FluentDesc": "// Fluent UI 主题为可选独立包，安装包后添加样式引用",
     "FontAwesomeCss": "// FontAwesome 字体图标样式 注意需要引用 BootstrapBlazor.FontAwesome 包",
     "InstallDesc": "开始使用 BootstrapBlazor 进行更快、更舒服的 .NET Web 开发",
     "InstallTitle": "安装",
@@ -723,17 +724,27 @@
   },
   "BootstrapBlazor.Server.Components.Pages.Theme": {
     "H1": "组件主题",
-    "H2": "测试",
+    "H2": "内置主题",
     "P1": "目前网站主题支持如下",
-    "P10": "增加此行",
+    "P11": "Fluent UI (已集成)",
+    "P12": "主题样式通过静态 Web 资源提供，请在",
+    "P13": "静态 Web 资源",
+    "P14": "内、基础样式之后增加对应的主题样式文件即可",
+    "P15": "启用",
+    "P16": "内置主题通过",
+    "P17": "属性适配明暗两种模式，该属性设置于",
+    "P19": "可选主题：",
     "P2": "Motronic (已集成)",
+    "P20": "元素上，设置",
+    "P21": "即为深色模式，也可以在运行时通过",
+    "P22": "组件切换，与本站右下角的模式按钮一致",
+    "P23": "基础样式（必需）",
+    "P24": "Fluent UI 主题由独立 NuGet 包",
+    "P25": "提供，样式资源路径为",
     "P3": "LayUI (完善中)",
     "P4": "Bluma (完善中)",
     "P5": "Ant Design (完善中)",
-    "P6": "主题切换",
-    "P7": "如切换为",
-    "P8": "主题，则请在原有",
-    "P9": "内增加样式文件如下"
+    "P6": "主题切换"
   },
   "BootstrapBlazor.Server.Components.Samples.Affixs": {
     "AffixIntro": "将页面元素钉在可视范围",
diff --git a/src/BootstrapBlazor.Server/appsettings.json b/src/BootstrapBlazor.Server/appsettings.json
index fe5a1b5ddaa..4a5a90a3ea3 100644
--- a/src/BootstrapBlazor.Server/appsettings.json
+++ b/src/BootstrapBlazor.Server/appsettings.json
@@ -112,6 +112,14 @@
         "files": [
           "./css/devui.css"
         ]
+      },
+      {
+        "key": "fluent",
+        "name": "Fluent UI",
+        "files": [
+          "_content/BootstrapBlazor.Theme.Fluent/fluent.min.css",
+          "./css/fluent.css"
+        ]
       }
     ]
   },
diff --git a/src/BootstrapBlazor.Server/wwwroot/css/fluent.css b/src/BootstrapBlazor.Server/wwwroot/css/fluent.css
new file mode 100644
index 00000000000..26fab0a723a
--- /dev/null
+++ b/src/BootstrapBlazor.Server/wwwroot/css/fluent.css
@@ -0,0 +1,23 @@
+/*
+ * Fluent UI 主题演示站配套样式（仅覆盖站点外观变量）
+ * 组件主题本体由 BootstrapBlazor.Theme.Fluent 包分发：_content/BootstrapBlazor.Theme.Fluent/fluent.min.css
+ * 令牌来源：https://github.com/microsoft/fluentui @fluentui/tokens (brandWeb)
+ */
+:root {
+    --bb-sidebar-navbar-bg: #115ea3; /* brand70 */
+    --bb-sidebar-navbar-bar-bg: #0f6cbd; /* brand80 colorBrandBackground */
+    --bb-layout-button-bg: #0f6cbd;
+    --bb-layout-button-hover-bg: #115ea3; /* colorBrandBackgroundHover */
+    --bb-layout-button-active-bg: #0c3b5e; /* colorBrandBackgroundPressed */
+    --bb-layout-button-shadow: 0 0 6px rgba(15,108,189,.5);
+    --bb-layout-button-color: #fff;
+    --bb-layout-button-update-bg: #479ef5; /* brand100 */
+    --bb-button-theme-list-header-color: #fff;
+    --bb-button-theme-item-bg: #f5f5f5;
+    --bb-button-theme-item-color: var(--bs-body-color);
+    --bb-button-theme-item-hover-color: #fff;
+    --bb-button-theme-item-hover-bg: #115ea3;
+    --bb-button-theme-item-active-color: #fff;
+    --bb-button-theme-item-active-bg: #0f6cbd;
+    --bb-button-chat-color: #fff;
+}