diff --git a/Directory.Packages.props b/Directory.Packages.props
index e8cc46cf48..1be40112a7 100644
--- a/Directory.Packages.props
+++ b/Directory.Packages.props
@@ -2,17 +2,17 @@
   <PropertyGroup>
     <ManagePackageVersionsCentrally>true</ManagePackageVersionsCentrally>
     <RuntimeVersion8>8.0.0</RuntimeVersion8>
-    <AspNetCoreVersion8>8.0.10</AspNetCoreVersion8>
-    <EfCoreVersion8>8.0.10</EfCoreVersion8>
+    <AspNetCoreVersion8>8.0.11</AspNetCoreVersion8>
+    <EfCoreVersion8>8.0.11</EfCoreVersion8>
     <RuntimeVersion9>9.0.0</RuntimeVersion9>
     <AspNetCoreVersion9>9.0.0</AspNetCoreVersion9>
     <EfCoreVersion9>9.0.0</EfCoreVersion9>
   </PropertyGroup>
   <ItemGroup>
     <!-- For Sample Apps -->
-    <PackageVersion Include="Microsoft.FluentUI.AspNetCore.Components" Version="4.11.0-beta.1" />
-    <PackageVersion Include="Microsoft.FluentUI.AspNetCore.Components.Icons" version="4.11.0-beta.1" />
-    <PackageVersion Include="Microsoft.FluentUI.AspNetCore.Components.Emoji" Version="4.11.0-beta.1" />
+    <PackageVersion Include="Microsoft.FluentUI.AspNetCore.Components" Version="4.11.0" />
+    <PackageVersion Include="Microsoft.FluentUI.AspNetCore.Components.Icons" version="4.11.0" />
+    <PackageVersion Include="Microsoft.FluentUI.AspNetCore.Components.Emoji" Version="4.11.0" />
     <!-- Test dependencies -->
     <PackageVersion Include="bunit" Version="1.31.3" />
     <PackageVersion Include="FluentAssertions" Version="6.12.0" />
diff --git a/src/Templates/templates/blazorweb-csharp/BlazorWeb-CSharp/Components/Pages/Weather.razor b/src/Templates/templates/blazorweb-csharp/BlazorWeb-CSharp/Components/Pages/Weather.razor
index fc481a4447..3986c09a4c 100644
--- a/src/Templates/templates/blazorweb-csharp/BlazorWeb-CSharp/Components/Pages/Weather.razor
+++ b/src/Templates/templates/blazorweb-csharp/BlazorWeb-CSharp/Components/Pages/Weather.razor
@@ -9,29 +9,29 @@
 
 <p>This component demonstrates showing data.</p>
 
+@*#if (InteractiveAtRoot) -->
 @if (forecasts == null)
 {
     <p><em>Loading...</em></p>
 }
 else
 {
-    @*#if (InteractiveAtRoot) -->
     <FluentDataGrid Id="weathergrid" Items="@forecasts" GridTemplateColumns="1fr 1fr 1fr 2fr" TGridItem="WeatherForecast">
         <PropertyColumn Title="Date" Property="@(c => c!.Date)" Sortable="true" Align="Align.Start"/>
         <PropertyColumn Title="Temp. (C)" Property="@(c => c!.TemperatureC)" Sortable="true" Align="Align.Center"/>
         <PropertyColumn Title="Temp. (F)" Property="@(c => c!.TemperatureF)" Sortable="true" Align="Align.Center"/>
         <PropertyColumn Title="Summary" Property="@(c => c!.Summary)" Sortable="true" Align="Align.End"/>
     </FluentDataGrid>
-    ##else
-    <!-- This page is rendered in SSR mode, so the FluentDataGrid component does not offer any interactivity (like sorting). -->
-    <FluentDataGrid Id="weathergrid" Items="@forecasts" GridTemplateColumns="1fr 1fr 1fr 2fr" TGridItem="WeatherForecast">
-        <PropertyColumn Title="Date" Property="@(c => c!.Date)" Align="Align.Start"/>
-        <PropertyColumn Title="Temp. (C)" Property="@(c => c!.TemperatureC)" Align="Align.Center"/>
-        <PropertyColumn Title="Temp. (F)" Property="@(c => c!.TemperatureF)" Align="Align.Center"/>
-        <PropertyColumn Title="Summary" Property="@(c => c!.Summary)" Align="Align.End"/>
-    </FluentDataGrid>
-    ##endif*@
 }
+##else
+<!-- This page is rendered in SSR mode, so the FluentDataGrid component does not offer any interactivity (like sorting). -->
+<FluentDataGrid Id="weathergrid" Items="@forecasts" GridTemplateColumns="1fr 1fr 1fr 2fr" Loading="@(forecasts == null)" Style="height:204px;" TGridItem="WeatherForecast">
+    <PropertyColumn Title="Date" Property="@(c => c!.Date)" Align="Align.Start"/>
+    <PropertyColumn Title="Temp. (C)" Property="@(c => c!.TemperatureC)" Align="Align.Center"/>
+    <PropertyColumn Title="Temp. (F)" Property="@(c => c!.TemperatureF)" Align="Align.Center"/>
+    <PropertyColumn Title="Summary" Property="@(c => c!.Summary)" Align="Align.End"/>
+</FluentDataGrid>
+##endif*@
 
 @code {
     private IQueryable<WeatherForecast>? forecasts;
diff --git a/src/Templates/templates/maui-blazor-solution/MauiApp.1.Shared/Pages/Weather.razor b/src/Templates/templates/maui-blazor-solution/MauiApp.1.Shared/Pages/Weather.razor
index af04ea03b1..734bcbb0b8 100644
--- a/src/Templates/templates/maui-blazor-solution/MauiApp.1.Shared/Pages/Weather.razor
+++ b/src/Templates/templates/maui-blazor-solution/MauiApp.1.Shared/Pages/Weather.razor
@@ -9,6 +9,7 @@
 
 <p>This component demonstrates showing data.</p>
 
+@*#if (InteractiveAtRoot) -->
 @if (forecasts == null)
 {
     <p><em>Loading...</em></p>
@@ -22,6 +23,16 @@ else
         <PropertyColumn Title="Summary" Property="@(c => c!.Summary)" Sortable="true" Align="Align.End"/>
     </FluentDataGrid>
 }
+##else
+<!-- This page is rendered in SSR mode, so the FluentDataGrid component does not offer any interactivity (like sorting). -->
+<FluentDataGrid Id="weathergrid" Items="@forecasts" GridTemplateColumns="1fr 1fr 1fr 2fr" Loading="@(forecasts == null)" Style="height:204px;" TGridItem="WeatherForecast">
+    <PropertyColumn Title="Date" Property="@(c => c!.Date)" Align="Align.Start"/>
+    <PropertyColumn Title="Temp. (C)" Property="@(c => c!.TemperatureC)" Align="Align.Center"/>
+    <PropertyColumn Title="Temp. (F)" Property="@(c => c!.TemperatureF)" Align="Align.Center"/>
+    <PropertyColumn Title="Summary" Property="@(c => c!.Summary)" Align="Align.End"/>
+</FluentDataGrid>
+##endif*@
+
 
 @code {
     private IQueryable<WeatherForecast>? forecasts;