diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Forms/Forms.md b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Forms/Forms.md
index 6da78db158..16a4f2b121 100644
--- a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Forms/Forms.md
+++ b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Forms/Forms.md
@@ -19,7 +19,7 @@ By default the Fluent UI components render validation feedback using the library
 builder.Services.AddFluentUIComponents(config =>
 {
     // Default is false. Set to true to enable the browser's native constraint validation UI.
-    config.UseNativeConstraintValidationUi = true;
+    config.UseNativeConstraintValidationUI = true;
 });
 ```
 
diff --git a/src/Core/Components/Forms/FluentValidationMessage.razor b/src/Core/Components/Forms/FluentValidationMessage.razor
index 893d4a34ea..cf7da2d972 100644
--- a/src/Core/Components/Forms/FluentValidationMessage.razor
+++ b/src/Core/Components/Forms/FluentValidationMessage.razor
@@ -2,15 +2,17 @@
 @inherits FluentComponentBase
 @typeparam TValue
 
-@foreach (var message in ValidationMessages)
-{
-    <FluentText slot="@FluentSlot.FieldMessage"
-                Class="@ClassValue"
-                Style="@StyleValue"
-                Size="@TextSize.Size200"
-                Color="@Color.Error"
-                @attributes="AdditionalAttributes">
-        @CreateIcon(Icon)
-        @message
-    </FluentText>
-}
+<FluentText slot="@FluentSlot.FieldMessage"
+            Class="@ClassValue"
+            Style="@StyleValue"
+            Size="@TextSize.Size200"
+            Color="@Color.Error"
+            @attributes="AdditionalAttributes">
+    @foreach (var message in ValidationMessages)
+    {   <div message >
+            @CreateIcon(Icon)
+            @message
+        </div>
+
+    }
+</FluentText>
diff --git a/src/Core/Components/Forms/FluentValidationMessage.razor.css b/src/Core/Components/Forms/FluentValidationMessage.razor.css
index f0c57884a9..d21a42c6d9 100644
--- a/src/Core/Components/Forms/FluentValidationMessage.razor.css
+++ b/src/Core/Components/Forms/FluentValidationMessage.razor.css
@@ -1,4 +1,5 @@
-.fluent-validation-message {
+.fluent-validation-message > div[message] {
   display: flex;
   align-items: center;
+  border: 1px dotted green;
 }