diff --git a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml
index 1cc00f7994..b6f9174e79 100644
--- a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml
+++ b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml
@@ -3318,7 +3318,7 @@
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDesignTheme.Id">
             <summary>
             Gets or sets the identifier for the component.
-            </summary> 
+            </summary>
         </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDesignTheme.Mode">
             <summary>
@@ -3353,12 +3353,12 @@
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDesignTheme.StorageName">
             <summary>
             Gets or sets the local storage name to save and retrieve the <see cref="P:Microsoft.FluentUI.AspNetCore.Components.FluentDesignTheme.Mode"/> and the <see cref="P:Microsoft.FluentUI.AspNetCore.Components.FluentDesignTheme.OfficeColor"/> / <see cref="P:Microsoft.FluentUI.AspNetCore.Components.FluentDesignTheme.CustomColor"/>.
-            </summary> 
+            </summary>
         </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDesignTheme.Direction">
             <summary>
             Gets or sets the body.dir value.
-            </summary> 
+            </summary>
         </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDesignTheme.OnLuminanceChanged">
             <summary>
@@ -7850,6 +7850,9 @@
         <member name="T:Microsoft.FluentUI.AspNetCore.Components.FluentOverlay">
             <summary />
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentOverlay.GlobalState">
+            <summary />
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentOverlay.LibraryConfiguration">
             <summary />
         </member>
@@ -7896,6 +7899,7 @@
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentOverlay.Opacity">
             <summary>
             Gets or sets the opacity of the overlay.
+            Default is 0.4.
             </summary>
         </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentOverlay.Alignment">
@@ -7935,9 +7939,9 @@
         </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentOverlay.BackgroundColor">
             <summary>
-            Gets or sets the background color. 
-            Needs to be formatted as an HTML hex color string (#rrggbb or #rgb).
-            Default is '#ffffff'.
+            Gets or sets the background color.
+            Needs to be formatted as an HTML hex color string (#rrggbb or #rgb)
+            Default NeutralBaseColor token value (#808080).
             </summary>
         </member>
         <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentOverlay.DisposeAsync">
diff --git a/examples/Demo/Shared/Pages/Overlay/Examples/OverlayDefault.razor b/examples/Demo/Shared/Pages/Overlay/Examples/OverlayDefault.razor
index a0162bdded..8f66a65cb8 100644
--- a/examples/Demo/Shared/Pages/Overlay/Examples/OverlayDefault.razor
+++ b/examples/Demo/Shared/Pages/Overlay/Examples/OverlayDefault.razor
@@ -16,7 +16,7 @@
 <FluentButton Appearance="Appearance.Accent" @onclick="() => visible = !visible">Show Overlay</FluentButton>
 
 <FluentOverlay @bind-Visible=@visible
-               Opacity="0.4"
+               Transparent="false"
                Alignment="@alignment"
                Justification="@justification"
                OnClose="HandleOnClose">
diff --git a/examples/Demo/Shared/Pages/Overlay/Examples/OverlayInteractive.razor b/examples/Demo/Shared/Pages/Overlay/Examples/OverlayInteractive.razor
index 12705d982e..97c8976584 100644
--- a/examples/Demo/Shared/Pages/Overlay/Examples/OverlayInteractive.razor
+++ b/examples/Demo/Shared/Pages/Overlay/Examples/OverlayInteractive.razor
@@ -39,7 +39,7 @@
 
 <style>
     #my-zone {
-        background-color: white;
+        background-color: var(--neutral-base-color);
         width: 200px;
         height: 160px;
         display: flex;
@@ -47,6 +47,9 @@
         align-items: center;
         justify-content: center;
     }
+    #my-zone p {
+            color: var(--neutral-foregrond-rest);
+    }
 </style>
 
 @code {
diff --git a/examples/Demo/Shared/Pages/Overlay/OverlayPage.razor b/examples/Demo/Shared/Pages/Overlay/OverlayPage.razor
index 1d27a6ba78..961c3f27a6 100644
--- a/examples/Demo/Shared/Pages/Overlay/OverlayPage.razor
+++ b/examples/Demo/Shared/Pages/Overlay/OverlayPage.razor
@@ -11,7 +11,7 @@
 <h2 id="example">Examples</h2>
 
 <DemoSection Title="Default" Component="typeof(OverlayDefault)">
-    <Description>Overlay with a default white background</Description>
+    <Description>Overlay with a default background (= NeutralBaseColor (#808080)) and default opacity (0.4). </Description>
 </DemoSection>
 
 <DemoSection Title="Timed" Component="typeof(OverlayTimed)">
diff --git a/src/Core/Components/DesignSystemProvider/FluentDesignTheme.razor.cs b/src/Core/Components/DesignSystemProvider/FluentDesignTheme.razor.cs
index fd2ef55243..5f78af3ec3 100644
--- a/src/Core/Components/DesignSystemProvider/FluentDesignTheme.razor.cs
+++ b/src/Core/Components/DesignSystemProvider/FluentDesignTheme.razor.cs
@@ -37,7 +37,7 @@ public partial class FluentDesignTheme : ComponentBase
 
     /// <summary>
     /// Gets or sets the identifier for the component.
-    /// </summary> 
+    /// </summary>
     [Parameter]
     public string Id { get; set; }
 
@@ -85,13 +85,13 @@ public partial class FluentDesignTheme : ComponentBase
 
     /// <summary>
     /// Gets or sets the local storage name to save and retrieve the <see cref="Mode"/> and the <see cref="OfficeColor"/> / <see cref="CustomColor"/>.
-    /// </summary> 
+    /// </summary>
     [Parameter]
     public string? StorageName { get; set; }
 
     /// <summary>
     /// Gets or sets the body.dir value.
-    /// </summary> 
+    /// </summary>
     [Parameter]
     public LocalizationDirection? Direction
     {
@@ -183,10 +183,7 @@ public async Task OnChangeRaisedAsync(string name, string value)
 
                 break;
             case "neutral-color":
-                if (value.StartsWith('#'))
-                {
-                    GlobalDesign.SetNeutralColor(value);
-                }
+                GlobalDesign.SetNeutralColor(value);
                 break;
         }
     }
@@ -270,13 +267,10 @@ private async Task ApplyLocalStorageValuesAsync(DataLocalStorage? theme)
         }
 
         // Neutral base color
-        if (!string.IsNullOrEmpty(theme?.NeutralBaseColor))
+        if (!string.IsNullOrEmpty(theme?.NeutralColor))
         {
-            if (theme.NeutralBaseColor.StartsWith('#'))
-            {
-                GlobalDesign.SetNeutralColor(theme.NeutralBaseColor);
-            }
-            await OnChangeRaisedAsync("neutral-base-color", theme.NeutralBaseColor);
+            GlobalDesign.SetNeutralColor(theme.NeutralColor);
+            await OnChangeRaisedAsync("neutral-color", theme.NeutralColor);
         }
     }
 
@@ -285,7 +279,7 @@ private class DataLocalStorage
     {
         public string? Mode { get; set; }
         public string? PrimaryColor { get; set; }
-        public string? NeutralBaseColor { get; set; }
+        public string? NeutralColor { get; set; }
     }
 
     /// <summary />
diff --git a/src/Core/Components/Overlay/FluentOverlay.razor.cs b/src/Core/Components/Overlay/FluentOverlay.razor.cs
index 2d121aeeab..8e15e405ed 100644
--- a/src/Core/Components/Overlay/FluentOverlay.razor.cs
+++ b/src/Core/Components/Overlay/FluentOverlay.razor.cs
@@ -1,3 +1,7 @@
+// ------------------------------------------------------------------------
+// MIT License - Copyright (c) Microsoft Corporation. All rights reserved.
+// ------------------------------------------------------------------------
+
 using System.Globalization;
 using System.Text.RegularExpressions;
 using Microsoft.AspNetCore.Components;
@@ -16,8 +20,14 @@ public partial class FluentOverlay : IAsyncDisposable
     private int _r, _g, _b;
 
     private const string JAVASCRIPT_FILE = "./_content/Microsoft.FluentUI.AspNetCore.Components/Components/Overlay/FluentOverlay.razor.js";
+    private const string DEFAULT_NEUTRAL_COLOR = "#808080";
+
     private DotNetObjectReference<FluentOverlay>? _dotNetHelper = null;
 
+    /// <summary />
+    [Inject]
+    private GlobalState GlobalState { get; set; } = default!;
+
     /// <summary />
     [Inject]
     private LibraryConfiguration LibraryConfiguration { get; set; } = default!;
@@ -38,6 +48,7 @@ public partial class FluentOverlay : IAsyncDisposable
     protected string? StyleValue => new StyleBuilder()
         .AddStyle("cursor", "auto", () => Transparent)
         .AddStyle("background-color", $"rgba({_r}, {_g}, {_b}, {Opacity.ToString()!.Replace(',', '.')})", () => !Transparent)
+        //.AddStyle("opacity", Opacity.ToString()!.Replace(',', '.'), CheckCSSVariableName().IsMatch(BackgroundColor))
         .AddStyle("cursor", "default", () => !Transparent)
         .AddStyle("position", FullScreen ? "fixed" : "absolute")
         .AddStyle("display", "flex")
@@ -84,6 +95,7 @@ public partial class FluentOverlay : IAsyncDisposable
 
     /// <summary>
     /// Gets or sets the opacity of the overlay.
+    /// Default is 0.4.
     /// </summary>
     [Parameter]
     public double? Opacity { get; set; }
@@ -130,12 +142,12 @@ public partial class FluentOverlay : IAsyncDisposable
     public bool Dismissable { get; set; } = true;
 
     /// <summary>
-    /// Gets or sets the background color. 
-    /// Needs to be formatted as an HTML hex color string (#rrggbb or #rgb).
-    /// Default is '#ffffff'.
+    /// Gets or sets the background color.
+    /// Needs to be formatted as an HTML hex color string (#rrggbb or #rgb)
+    /// Default NeutralBaseColor token value (#808080).
     /// </summary>
     [Parameter]
-    public string BackgroundColor { get; set; } = "#ffffff";
+    public string? BackgroundColor { get; set; }
 
     [Parameter]
     public bool PreventScroll { get; set; } = false;
@@ -152,20 +164,19 @@ protected override async Task OnParametersSetAsync()
                 Id = _defaultId;
             }
 
-            // Add a document.addEventListener when Visible is true
             if (Visible)
             {
+                // Add a document.addEventListener when Visible is true
                 await InvokeOverlayInitializeAsync();
             }
-
-            // Remove a document.addEventListener when Visible is false
             else
             {
+                // Remove a document.addEventListener when Visible is false
                 await InvokeOverlayDisposeAsync();
             }
         }
 
-        if (!Transparent && Opacity == 0)
+        if (!Transparent && Opacity is null)
         {
             Opacity = 0.4;
         }
@@ -175,33 +186,37 @@ protected override async Task OnParametersSetAsync()
             Transparent = false;
         }
 
-        if (!string.IsNullOrWhiteSpace(BackgroundColor))
+        BackgroundColor ??= GlobalState.NeutralColor ?? DEFAULT_NEUTRAL_COLOR;
+
+        if (!CheckRGBString().IsMatch(BackgroundColor))
         {
+            throw new ArgumentException("BackgroundColor must be a valid HTML hex color string (#rrggbb or #rgb)");
+        }
 
-#if NET7_0_OR_GREATER
-            if (!CheckRGBString().IsMatch(BackgroundColor))
-#else
-            if (!Regex.IsMatch(BackgroundColor, "^(?:#([a-fA-F0-9]{6}|[a-fA-F0-9]{3}))"))
-#endif
-                throw new ArgumentException("BackgroundColor must be a valid HTML hex color string (#rrggbb or #rgb).");
-            else
-            {
-                _color = BackgroundColor[1..];
-            }
+        _color = BackgroundColor[1..];
 
-            if (_color.Length == 6)
-            {
-                _r = int.Parse(_color[..2], NumberStyles.HexNumber);
-                _g = int.Parse(_color[2..4], NumberStyles.HexNumber);
-                _b = int.Parse(_color[4..], NumberStyles.HexNumber);
-            }
-            else
-            {
-                _r = int.Parse(_color[0..1], NumberStyles.HexNumber);
-                _g = int.Parse(_color[1..2], NumberStyles.HexNumber);
-                _b = int.Parse(_color[2..], NumberStyles.HexNumber);
-            }
+        if (_color.Length == 6)
+        {
+            _r = int.Parse(_color[..2], NumberStyles.HexNumber);
+            _g = int.Parse(_color[2..4], NumberStyles.HexNumber);
+            _b = int.Parse(_color[4..], NumberStyles.HexNumber);
         }
+        else
+        {
+            _r = int.Parse(_color[0..1], NumberStyles.HexNumber);
+            _g = int.Parse(_color[1..2], NumberStyles.HexNumber);
+            _b = int.Parse(_color[2..], NumberStyles.HexNumber);
+        }
+    }
+    protected override void OnInitialized()
+    {
+        GlobalState.OnChange += UpdateNeutralColor;
+    }
+
+    private void UpdateNeutralColor()
+    {
+        BackgroundColor = GlobalState.NeutralColor;
+        StateHasChanged();
     }
 
     [JSInvokable]
@@ -231,7 +246,7 @@ public async Task OnCloseHandlerAsync(MouseEventArgs e)
     }
 
     private async Task OnCloseInternalHandlerAsync(MouseEventArgs e)
-    {        
+    {
         Visible = false;
 
         if (VisibleChanged.HasDelegate)
@@ -257,6 +272,8 @@ public async ValueTask DisposeAsync()
         {
             await _jsModule.DisposeAsync();
         }
+
+        GlobalState.OnChange -= UpdateNeutralColor;
     }
 
     /// <summary />
@@ -278,9 +295,6 @@ private async Task InvokeOverlayDisposeAsync()
         }
     }
 
-#if NET7_0_OR_GREATER
     [GeneratedRegex("^(?:#(?:[a-fA-F0-9]{6}|[a-fA-F0-9]{3}))")]
     private static partial Regex CheckRGBString();
-#endif
-
 }
diff --git a/src/Core/DesignTokens/Swatch.cs b/src/Core/DesignTokens/Swatch.cs
index c4138c7c13..b726fb5a32 100644
--- a/src/Core/DesignTokens/Swatch.cs
+++ b/src/Core/DesignTokens/Swatch.cs
@@ -1,3 +1,7 @@
+// ------------------------------------------------------------------------
+// MIT License - Copyright (c) Microsoft Corporation. All rights reserved.
+// ------------------------------------------------------------------------
+
 using System.Drawing;
 
 namespace Microsoft.FluentUI.AspNetCore.Components.DesignTokens;
@@ -82,5 +86,13 @@ private static float Normalize(float value, int min, int max)
         return value / (max - min);
     }
 
+    public System.Drawing.Color GetColor()
+    {
+        return System.Drawing.Color.FromArgb(
+            (byte)Denormalize(R, 0, 255),
+            (byte)Denormalize(G, 0, 255),
+            (byte)Denormalize(B, 0, 255));
+    }
+
     private static float Denormalize(float value, int min, int max) => min + (value * (max - min));
 }
diff --git a/src/Core/wwwroot/js/loading-theme.js b/src/Core/wwwroot/js/loading-theme.js
index df1fdc76da..9529e56e9d 100644
--- a/src/Core/wwwroot/js/loading-theme.js
+++ b/src/Core/wwwroot/js/loading-theme.js
@@ -1,4 +1,4 @@
-// To avoid Flash of Unstyled Content, the body is hidden.
+// To avoid Flash of Unstyled Content, the body is hidden.
 // Here we'll find the first web component and wait for it to be upgraded.
 // When it is, we'll remove this invisibility from the body.
 
@@ -24,9 +24,10 @@ class LoadingTheme extends HTMLElement {
         }
 
         // Attributes
-        const storageName = this.getAttribute("storage-name");
+        const storageName = this.getAttribute("storage-name"); 
         const mode = this.getAttribute("mode");
         const primaryColor = this.getAttribute("primary-color");
+        const neutralColor = this.getAttribute("neutral-color");
 
         const isDark = (modeSaved, isSystemDark) => {
             switch (modeSaved) {
@@ -42,6 +43,7 @@ class LoadingTheme extends HTMLElement {
         // Compute the saved or the system theme (dark/light).
         const modeSaved = mode ?? JSON.parse(localStorage.getItem(storageName))?.mode;
         const primaryColorSaved = primaryColor ?? JSON.parse(localStorage.getItem(storageName))?.primaryColor;
+        const neutralColorSaved = neutralColor ?? JSON.parse(localStorage.getItem(storageName))?.neutralColor;
         const isSystemDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
         const bgColor = isDark(modeSaved, isSystemDark) ? this.defaultDarkColor : this.defaultLightColor;
 
@@ -66,6 +68,7 @@ class LoadingTheme extends HTMLElement {
         const designTheme = document.createElement("fluent-design-theme");
         designTheme.setAttribute("mode", modeSaved);
         designTheme.setAttribute("primary-color", primaryColorSaved);
+        designTheme.setAttribute("neutral-color", neutralColorSaved);
         this.appendChild(designTheme);
 
         // Wait for the fluentui web components to be loaded
@@ -81,4 +84,4 @@ class LoadingTheme extends HTMLElement {
     }
 }
 
-customElements.define("loading-theme", LoadingTheme);
\ No newline at end of file
+customElements.define("loading-theme", LoadingTheme);
diff --git a/tests/Core/CounterBadge/FluentCounterBadgeTests.cs b/tests/Core/CounterBadge/FluentCounterBadgeTests.cs
index 26b787c3bb..84c1fffef7 100644
--- a/tests/Core/CounterBadge/FluentCounterBadgeTests.cs
+++ b/tests/Core/CounterBadge/FluentCounterBadgeTests.cs
@@ -14,11 +14,15 @@ public class FluentCounterBadgeTests : TestBase
     [Inject]
     public GlobalState GlobalState { get; set; } = new GlobalState();
 
+    public FluentCounterBadgeTests()
+    {
+        TestContext.Services.AddSingleton(GlobalState);
+    }
+
     [Fact]
     public void FluentCounterBadge_AttributesDefaultValues()
     {
         // Arrange && Act
-        TestContext.Services.AddSingleton(GlobalState);
         var cut = TestContext.RenderComponent<FluentCounterBadge>(parameters =>
         {
             parameters.Add(p => p.Count, 1);
@@ -36,7 +40,6 @@ public void FluentCounterBadge_AttributesDefaultValues()
     public void FluentCounterBadge_AppearanceAttribute(Appearance appearance)
     {
         // Arrange && Act
-        TestContext.Services.AddSingleton(GlobalState);
         var cut = TestContext.RenderComponent<FluentCounterBadge>(parameters =>
         {
             parameters.Add(p => p.Appearance, appearance);
@@ -53,8 +56,6 @@ public void FluentCounterBadge_AppearanceAttribute(Appearance appearance)
     public void FluentCounterBadge_AppearanceAttributeInvalid(Appearance appearance)
     {
         // Arrange && Act
-        TestContext.Services.AddSingleton(GlobalState);
-
         Assert.Throws<ArgumentException>(() => TestContext.RenderComponent<FluentCounterBadge>(parameters =>
         {
             parameters.Add(p => p.Appearance, appearance);
@@ -71,7 +72,6 @@ public void FluentCounterBadge_AppearanceAttributeInvalid(Appearance appearance)
     public void FluentCounterBadge_WithAdditionalCssClass()
     {
         // Arrange && Act
-        TestContext.Services.AddSingleton(GlobalState);
         var cut = TestContext.RenderComponent<FluentCounterBadge>(parameters =>
         {
             parameters.Add(p => p.Class, "additional_class");
@@ -87,7 +87,6 @@ public void FluentCounterBadge_WithAdditionalCssClass()
     public void FluentCounterBadge_WithAdditionalStyle()
     {
         // Arrange && Act
-        TestContext.Services.AddSingleton(GlobalState);
         var cut = TestContext.RenderComponent<FluentCounterBadge>(parameters =>
         {
             parameters.Add(p => p.Style, "background-color: red");
@@ -103,8 +102,6 @@ public void FluentCounterBadge_WithAdditionalStyle()
     public void FluentCounterBadge_ShowOverflowAttribute()
     {
         // Arrange && Act
-        TestContext.Services.AddSingleton(GlobalState);
-
         var cut = TestContext.RenderComponent<FluentCounterBadge>(parameters =>
         {
             parameters.Add(p => p.ShowOverflow, true);
@@ -121,7 +118,6 @@ public void FluentCounterBadge_ShowOverflowAttribute()
     public void FluentCounterBadge_BackgroundColorAndColorAttribute()
     {
         // Arrange && Act
-        TestContext.Services.AddSingleton(GlobalState);
         var cut = TestContext.RenderComponent<FluentCounterBadge>(parameters =>
         {
             parameters.Add(p => p.BackgroundColor, Color.Accent);
@@ -138,7 +134,6 @@ public void FluentCounterBadge_BackgroundColorAndColorAttribute()
     public void FluentCounterBadge_BackgroundLightWeightAndDarkMode()
     {
         // Arrange && Act
-        TestContext.Services.AddSingleton(GlobalState);
         GlobalState.SetLuminance(StandardLuminance.DarkMode);
 
         var cut = TestContext.RenderComponent<FluentCounterBadge>(parameters =>
@@ -157,7 +152,6 @@ public void FluentCounterBadge_BackgroundLightWeightAndDarkMode()
     public void FluentCounterBadge_BackgroundLightWeightAndLightMode()
     {
         // Arrange && Act
-        TestContext.Services.AddSingleton(GlobalState);
         GlobalState.SetLuminance(StandardLuminance.LightMode);
 
         var cut = TestContext.RenderComponent<FluentCounterBadge>(parameters =>
@@ -176,7 +170,6 @@ public void FluentCounterBadge_BackgroundLightWeightAndLightMode()
     public void FluentCounterBadge_BackgroundColorNullAndColorSet()
     {
         // Arrange, Act && Assert
-        TestContext.Services.AddSingleton(GlobalState);
         Assert.Throws<ArgumentException>(() => TestContext.RenderComponent<FluentCounterBadge>(parameters =>
         {
             parameters.Add(p => p.BackgroundColor, null);
@@ -190,7 +183,6 @@ public void FluentCounterBadge_BackgroundColorNullAndColorSet()
     public void FluentCounterBadge_BackgroundColorSetAndColorNull()
     {
         // Arrange, Act && Assert
-        TestContext.Services.AddSingleton(GlobalState);
         Assert.Throws<ArgumentException>(() => TestContext.RenderComponent<FluentCounterBadge>(parameters =>
         {
             parameters.Add(p => p.BackgroundColor, Color.Accent);
@@ -204,7 +196,6 @@ public void FluentCounterBadge_BackgroundColorSetAndColorNull()
     public void FluentCounterBadge_BackgroundColorCustom()
     {
         // Arrange, Act && Assert
-        TestContext.Services.AddSingleton(GlobalState);
         Assert.Throws<ArgumentException>(() => TestContext.RenderComponent<FluentCounterBadge>(parameters =>
         {
             parameters.Add(p => p.BackgroundColor, Color.Custom);
@@ -218,7 +209,6 @@ public void FluentCounterBadge_BackgroundColorCustom()
     public void FluentCounterBadge_AppearanceOutline()
     {
         // Arrange, Act && Assert
-        TestContext.Services.AddSingleton(GlobalState);
         Assert.Throws<ArgumentException>(() => TestContext.RenderComponent<FluentCounterBadge>(parameters =>
         {
             parameters.Add(p => p.Appearance, Appearance.Outline);
@@ -231,7 +221,6 @@ public void FluentCounterBadge_AppearanceOutline()
     public void FluentCounterBadge_ShowZeroAttributeWithCount0()
     {
         // Arrange && Act
-        TestContext.Services.AddSingleton(GlobalState);
         var cut = TestContext.RenderComponent<FluentCounterBadge>(parameters =>
         {
 #pragma warning disable CS0618 // Type or member is obsolete
@@ -249,7 +238,6 @@ public void FluentCounterBadge_ShowZeroAttributeWithCount0()
     public void FluentCounterBadge_ShowZeroAttributeCountNot0()
     {
         // Arrange && Act
-        TestContext.Services.AddSingleton(GlobalState);
         var cut = TestContext.RenderComponent<FluentCounterBadge>(parameters =>
         {
 #pragma warning disable CS0618 // Type or member is obsolete
@@ -268,7 +256,6 @@ public void FluentCounterBadge_BackgroundColorLightweightLuminanceDark()
     {
         // Arrange && Act
         GlobalState.Luminance = StandardLuminance.DarkMode;
-        TestContext.Services.AddSingleton(GlobalState);
 
         var cut = TestContext.RenderComponent<FluentCounterBadge>(parameters =>
         {
@@ -286,8 +273,6 @@ public void FluentCounterBadge_BackgroundColorLightweightLuminanceDark()
     public void FluentCounterBadge_BackgroundColorLightweightLuminanceLight()
     {
         // Arrange && Act
-        TestContext.Services.AddSingleton(GlobalState);
-
         var cut = TestContext.RenderComponent<FluentCounterBadge>(parameters =>
         {
             parameters.Add(p => p.BackgroundColor, Color.Lightweight);
@@ -304,8 +289,6 @@ public void FluentCounterBadge_BackgroundColorLightweightLuminanceLight()
     public void FluentCounterBadge_BackgroundColorErrorLuminanceDark()
     {
         // Arrange && Act
-        TestContext.Services.AddSingleton(GlobalState);
-
         var cut = TestContext.RenderComponent<FluentCounterBadge>(parameters =>
         {
             parameters.Add(p => p.BackgroundColor, Color.Error);
@@ -322,8 +305,6 @@ public void FluentCounterBadge_BackgroundColorErrorLuminanceDark()
     public void FluentCounterBadge_Dispose()
     {
         // Arrange & Act
-        TestContext.Services.AddSingleton(GlobalState);
-
         var cut = TestContext.RenderComponent<FluentCounterBadge>(parameters =>
         {
             parameters.Add(p => p.Count, 1);
@@ -340,8 +321,6 @@ public void FluentCounterBadge_Dispose()
     public void FluentCounterBadge_NoCount()
     {
         // Arrange && Act
-        TestContext.Services.AddSingleton(GlobalState);
-
         var cut = TestContext.RenderComponent<FluentCounterBadge>(parameters =>
         {
             parameters.AddChildContent("childcontent");
@@ -355,8 +334,6 @@ public void FluentCounterBadge_NoCount()
     public void FluentCounterBadge_BadgeContent()
     {
         // Arrange && Act
-        TestContext.Services.AddSingleton(GlobalState);
-
         var cut = TestContext.RenderComponent<FluentCounterBadge>(parameters =>
         {
 #pragma warning disable CS0618 // Type or member is obsolete
@@ -373,8 +350,6 @@ public void FluentCounterBadge_BadgeContent()
     public void FluentCounterBadge_BadgeContentWithMax()
     {
         // Arrange && Act
-        TestContext.Services.AddSingleton(GlobalState);
-
         var cut = TestContext.RenderComponent<FluentCounterBadge>(parameters =>
         {
 #pragma warning disable CS0618 // Type or member is obsolete
@@ -392,8 +367,6 @@ public void FluentCounterBadge_BadgeContentWithMax()
     public void FluentCounterBadge_BadgeContentNoCount()
     {
         // Arrange && Act
-        TestContext.Services.AddSingleton(GlobalState);
-
         var cut = TestContext.RenderComponent<FluentCounterBadge>(parameters =>
         {
 #pragma warning disable CS0618 // Type or member is obsolete
@@ -410,8 +383,6 @@ public void FluentCounterBadge_BadgeContentNoCount()
     public void FluentCounterBadge_BadgeContentNullWithCount()
     {
         // Arrange && Act
-        TestContext.Services.AddSingleton(GlobalState);
-
         var cut = TestContext.RenderComponent<FluentCounterBadge>(parameters =>
         {
 #pragma warning disable CS0618 // Type or member is obsolete
@@ -428,8 +399,6 @@ public void FluentCounterBadge_BadgeContentNullWithCount()
     public void FluentCounterBadge_Dot()
     {
         // Arrange && Act
-        TestContext.Services.AddSingleton(GlobalState);
-
         var cut = TestContext.RenderComponent<FluentCounterBadge>(parameters =>
         {
             parameters.Add(p => p.Dot, true);
@@ -443,8 +412,6 @@ public void FluentCounterBadge_Dot()
     public void FluentCounterBadge_DotWithCount()
     {
         // Arrange && Act
-        TestContext.Services.AddSingleton(GlobalState);
-
         var cut = TestContext.RenderComponent<FluentCounterBadge>(parameters =>
         {
             parameters.Add(p => p.Dot, true);
@@ -459,8 +426,6 @@ public void FluentCounterBadge_DotWithCount()
     public void FluentCounterBadge_DotWithPositioning()
     {
         // Arrange && Act
-        TestContext.Services.AddSingleton(GlobalState);
-
         var cut = TestContext.RenderComponent<FluentCounterBadge>(parameters =>
         {
             parameters.Add(p => p.Dot, true);
@@ -477,8 +442,6 @@ public void FluentCounterBadge_DotWithPositioning()
     public void FluentCounterBadge_WithPositioning()
     {
         // Arrange && Act
-        TestContext.Services.AddSingleton(GlobalState);
-
         var cut = TestContext.RenderComponent<FluentCounterBadge>(parameters =>
         {
             parameters.Add(p => p.Count, 1);
diff --git a/tests/Core/DateTime/FluentDatePickerTests.cs b/tests/Core/DateTime/FluentDatePickerTests.cs
index e0790e1c9f..7639705001 100644
--- a/tests/Core/DateTime/FluentDatePickerTests.cs
+++ b/tests/Core/DateTime/FluentDatePickerTests.cs
@@ -2,10 +2,10 @@
 // MIT License - Copyright (c) Microsoft Corporation. All rights reserved.
 // ------------------------------------------------------------------------
 
+using System.Globalization;
 using Bunit;
 using Microsoft.AspNetCore.Components;
 using Microsoft.Extensions.DependencyInjection;
-using System.Globalization;
 using Xunit;
 
 namespace Microsoft.FluentUI.AspNetCore.Components.Tests.DateTime;
@@ -15,6 +15,9 @@ public class FluentDatePickerTests : TestBase
     [Inject]
     private LibraryConfiguration LibraryConfiguration { get; set; } = new LibraryConfiguration();
 
+    [Inject]
+    public GlobalState GlobalState { get; set; } = new GlobalState();
+
     [Fact]
     public void FluentDatePicker_Closed()
     {
@@ -46,6 +49,7 @@ public void FluentDatePicker_ClickToOpenCalendar()
         using var ctx = new TestContext();
         ctx.JSInterop.Mode = JSRuntimeMode.Loose;
         ctx.Services.AddSingleton(LibraryConfiguration);
+        ctx.Services.AddSingleton(GlobalState);
 
         // Act
         var picker = ctx.RenderComponent<FluentDatePicker>();
@@ -72,6 +76,7 @@ public void FluentDatePicker_SetToday_CalendarSelectedDay()
         using var ctx = new TestContext();
         ctx.JSInterop.Mode = JSRuntimeMode.Loose;
         ctx.Services.AddSingleton(LibraryConfiguration);
+        ctx.Services.AddSingleton(GlobalState);
         var today = System.DateTime.Today;
 
         // Act
@@ -182,6 +187,7 @@ public void FluentCalendar_DisabledDate()
         using var ctx = new TestContext();
         ctx.JSInterop.Mode = JSRuntimeMode.Loose;
         ctx.Services.AddSingleton(LibraryConfiguration);
+        ctx.Services.AddSingleton(GlobalState);
 
         // Act
         var picker = ctx.RenderComponent<FluentDatePicker>(parameters =>
diff --git a/tests/Core/List/FluentAutocompleteTests.razor b/tests/Core/List/FluentAutocompleteTests.razor
index 4524b1b7ab..f0b77b64dd 100644
--- a/tests/Core/List/FluentAutocompleteTests.razor
+++ b/tests/Core/List/FluentAutocompleteTests.razor
@@ -7,10 +7,14 @@
     [Inject]
     private LibraryConfiguration LibraryConfiguration { get; set; } = new LibraryConfiguration();
 
+    [Inject]
+    public GlobalState GlobalState { get; set; } = new GlobalState();
+
     public FluentAutocompleteTests()
     {
         JSInterop.Mode = JSRuntimeMode.Loose;
         Services.AddSingleton(LibraryConfiguration);
+        Services.AddSingleton(GlobalState);
     }
 
     [Fact]
diff --git a/tests/Core/_ToDo/MenuButton/FluentMenuButtonTests.cs b/tests/Core/_ToDo/MenuButton/FluentMenuButtonTests.cs
index f8fbb0b2ed..e522d3c0cc 100644
--- a/tests/Core/_ToDo/MenuButton/FluentMenuButtonTests.cs
+++ b/tests/Core/_ToDo/MenuButton/FluentMenuButtonTests.cs
@@ -1,3 +1,7 @@
+// ------------------------------------------------------------------------
+// MIT License - Copyright (c) Microsoft Corporation. All rights reserved.
+// ------------------------------------------------------------------------
+
 using Bunit;
 using Microsoft.Extensions.DependencyInjection;
 using Microsoft.FluentUI.AspNetCore.Components.Tests.Extensions;
@@ -7,9 +11,13 @@ namespace Microsoft.FluentUI.AspNetCore.Components.Tests.MenuButton;
 
 public class FluentMenuButtonTests : TestBase
 {
+
+    public GlobalState GlobalState { get; set; } = new GlobalState();
+
     public FluentMenuButtonTests()
     {
         TestContext.Services.AddSingleton(LibraryConfiguration.ForUnitTests);
+        TestContext.Services.AddSingleton(GlobalState);
         TestContext.JSInterop.SetupModule("./_content/Microsoft.FluentUI.AspNetCore.Components/Components/Menu/FluentMenu.razor.js");
     }
 
diff --git a/tests/Core/_ToDo/Overlay/FluentOverlayTests.cs b/tests/Core/_ToDo/Overlay/FluentOverlayTests.cs
index 6d23f80b21..b066ff70b2 100644
--- a/tests/Core/_ToDo/Overlay/FluentOverlayTests.cs
+++ b/tests/Core/_ToDo/Overlay/FluentOverlayTests.cs
@@ -1,14 +1,22 @@
+// ------------------------------------------------------------------------
+// MIT License - Copyright (c) Microsoft Corporation. All rights reserved.
+// ------------------------------------------------------------------------
+
 using Bunit;
+using Microsoft.AspNetCore.Components;
 using Microsoft.Extensions.DependencyInjection;
 using Xunit;
 
 namespace Microsoft.FluentUI.AspNetCore.Components.Tests.Overlay;
 public class FluentOverlayTests : TestBase
 {
+    [Inject]
+    public GlobalState GlobalState { get; set; } = new GlobalState();
     public FluentOverlayTests()
     {
         TestContext.JSInterop.Mode = JSRuntimeMode.Loose;
         TestContext.Services.AddSingleton(LibraryConfiguration.ForUnitTests);
+        TestContext.Services.AddSingleton(GlobalState);
 
     }