diff --git a/BlazorFluentUI/Components/Layout/MainLayout.razor b/BlazorFluentUI/Components/Layout/MainLayout.razor
index db261da..45ac922 100644
--- a/BlazorFluentUI/Components/Layout/MainLayout.razor
+++ b/BlazorFluentUI/Components/Layout/MainLayout.razor
@@ -2,6 +2,8 @@
 
 @inject IHostEnvironment HostEnvironment
 
+@rendermode RenderMode.InteractiveServer
+
 <FluentLayout>
     <FluentHeader>
         BlazorFluentUI
diff --git a/BlazorFluentUI/Components/Pages/Components/CompoMessageBar.razor b/BlazorFluentUI/Components/Pages/Components/CompoMessageBar.razor
index 9383bdc..fd0aec0 100644
--- a/BlazorFluentUI/Components/Pages/Components/CompoMessageBar.razor
+++ b/BlazorFluentUI/Components/Pages/Components/CompoMessageBar.razor
@@ -51,6 +51,48 @@
     </FluentStack>
 </FluentCard>
 
+<h4 class="mt-4">Simple message</h4>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <FluentStack Orientation="Orientation.Vertical">
+        <h5>Default</h5>
+        <FluentMessageBar Title="Messagebar title">
+            MessageBar can provide information to the user with actionable insights.
+        </FluentMessageBar>
+        <h5 class="mt-3">Success</h5>
+        <FluentMessageBar Title="Messagebar title" Intent="MessageIntent.Success">
+            MessageBar can provide information to the user with actionable insights.
+        </FluentMessageBar>
+        <h5 class="mt-3">Warning</h5>
+        <FluentMessageBar Title="Messagebar title" Intent="MessageIntent.Warning">
+            MessageBar can provide information to the user with actionable insights.
+        </FluentMessageBar>
+        <h5 class="mt-3">Info</h5>
+        <FluentMessageBar Title="Messagebar title" Intent="MessageIntent.Info">
+            MessageBar can provide information to the user with actionable insights.
+        </FluentMessageBar>
+        <h5 class="mt-3">Error</h5>
+        <FluentMessageBar Title="Messagebar title" Intent="MessageIntent.Error">
+            MessageBar can provide information to the user with actionable insights.
+        </FluentMessageBar>
+        <h5 class="mt-3">Custom</h5>
+        <FluentMessageBar Title="Messagebar title" Intent="MessageIntent.Custom"
+                          Icon="@(new Icons.Filled.Size24.EarthLeaf())">
+            MessageBar can provide information to the user with actionable insights.
+        </FluentMessageBar>
+    </FluentStack>
+</FluentCard>
+
+<h4 class="mt-4">Simple notification</h4>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <FluentMessageBar Class="fluent-border-d1"
+                      Title="Notification operation"
+                      Timestamp="@(DateTime.Now.AddHours(-3))"
+                      Intent="MessageIntent.Success"
+                      Type="MessageType.Notification">
+        Successfully operated. <i>'Blazor-FluentUI.razor'</i>
+    </FluentMessageBar>
+</FluentCard>
+
 @code {
     int ecounter = 0;
     async Task AddInTopBar()