diff --git a/BlazorFluentUI/Components/App.razor b/BlazorFluentUI/Components/App.razor
index 2204422..e3db781 100644
--- a/BlazorFluentUI/Components/App.razor
+++ b/BlazorFluentUI/Components/App.razor
@@ -27,3 +27,8 @@
 </body>
 
 </html>
+
+@code {
+    public static string MESSAGE_TOP = "MESSAGE_TOP";
+    public static string MESSAGE_NAV_TOP = "MESSAGE_NAV_TOP";
+}
\ No newline at end of file
diff --git a/BlazorFluentUI/Components/Layout/MainLayout.razor b/BlazorFluentUI/Components/Layout/MainLayout.razor
index 7d12bad..db261da 100644
--- a/BlazorFluentUI/Components/Layout/MainLayout.razor
+++ b/BlazorFluentUI/Components/Layout/MainLayout.razor
@@ -10,7 +10,7 @@
         <NavMenu />
         <FluentBodyContent Class="body-content">
             <div class="content">
-                <FluentMessageBarProvider Section="MESSAGES_TOP" />
+                <FluentMessageBarProvider Section="@App.MESSAGE_TOP" />
                 @Body
             </div>
         </FluentBodyContent>
@@ -26,7 +26,6 @@
 <FluentToastProvider />
 <FluentDialogProvider />
 <FluentTooltipProvider />
-<FluentMessageBarProvider />
 
 
 @* <div id="blazor-error-ui">
@@ -46,4 +45,4 @@
     }
     <a href="" class="reload">Reload</a>
     <a class="dismiss">🗙</a>
-</div>
+</div>
\ No newline at end of file
diff --git a/BlazorFluentUI/Components/Layout/NavMenu.razor b/BlazorFluentUI/Components/Layout/NavMenu.razor
index 38ac807..94ac143 100644
--- a/BlazorFluentUI/Components/Layout/NavMenu.razor
+++ b/BlazorFluentUI/Components/Layout/NavMenu.razor
@@ -4,6 +4,7 @@
     <input type="checkbox" title="Menu expand/collapse toggle" id="navmenu-toggle" class="navmenu-icon" />
     <label for="navmenu-toggle" class="navmenu-icon"><FluentIcon Value="@(new Icons.Regular.Size20.Navigation())" Color="Color.Fill" /></label>
     <nav class="sitenav" aria-labelledby="main-menu">
+        <FluentMessageBarProvider Section="@App.MESSAGE_NAV_TOP" />
         <FluentNavMenu Id="main-menu" Collapsible="true" Width="250" Title="Navigation menu" @bind-Expanded="expanded" CustomToggle="true">
             <FluentNavLink Href="/" Match="NavLinkMatch.All" Icon="@(new Icons.Regular.Size20.Home())" IconColor="Color.Accent">Home</FluentNavLink>
             <FluentNavGroup Icon="@(new Icons.Regular.Size20.Globe())" Expanded="false" Title="Original">
@@ -66,6 +67,7 @@
                 <FluentNavLink Href="compohighlighter" Icon="@(new Icons.Regular.Size20.Highlight())" IconColor="Color.Accent">Highlighter</FluentNavLink>
                 <FluentNavLink Href="compohorizontalscroll" Icon="@(new Icons.Regular.Size20.AlignSpaceEvenlyHorizontal())" IconColor="Color.Accent">HorizontalScroll</FluentNavLink>
                 <FluentNavLink Href="compomenu" Icon="@(new Icons.Regular.Size20.ListBar())" IconColor="Color.Accent">Menu</FluentNavLink>
+                <FluentNavLink Href="compomessagebar" Icon="@(new Icons.Regular.Size20.WindowArrowUp())" IconColor="Color.Accent">MessageBar</FluentNavLink>
 
             </FluentNavGroup>
         </FluentNavMenu>
diff --git a/BlazorFluentUI/Components/Pages/Components/CompoMessageBar.razor b/BlazorFluentUI/Components/Pages/Components/CompoMessageBar.razor
new file mode 100644
index 0000000..9383bdc
--- /dev/null
+++ b/BlazorFluentUI/Components/Pages/Components/CompoMessageBar.razor
@@ -0,0 +1,95 @@
+@page "/compomessagebar"
+
+@inject IMessageService MessageService;
+@inject IDialogService DialogService;
+
+@rendermode RenderMode.InteractiveServer
+
+<h3>MessageBar</h3>
+<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
+<div>
+    <code>MessageBar</code>s are rendered by the <code>&lt;FluentMessageBarProvider /&gt;</code>.
+    This component needs to be added to the layout of application/site.
+</div>
+
+
+<h4 class="mt-4">Message Service</h4>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <div>
+        This is the advised way to use <code>MessageBar</code>s.
+    </div>
+    <FluentStack Orientation="Orientation.Vertical" HorizontalGap="2">
+        <FluentButton Appearance="Appearance.Accent"
+                      OnClick="@AddInTopBar">
+            Add on top
+        </FluentButton>
+        <FluentButton Appearance="Appearance.Accent"
+                      OnClick="@AddInNavTopBar">
+            Add on navigation top
+        </FluentButton>
+        <FluentButton Appearance="Appearance.Neutral"
+                      OnClick="@(e => MessageService.Clear())">
+            Clear all messages
+        </FluentButton>
+    </FluentStack>
+</FluentCard>
+
+<h4 class="mt-4">Message Service</h4>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <div>
+        This is the advised way to use <code>MessageBar</code>s.
+    </div>
+    <FluentStack Orientation="Orientation.Vertical" HorizontalGap="2">
+        <FluentButton Appearance="Appearance.Accent"
+                      OnClick="@(() => AddInTopBar(3000))">
+            Add on top (3 sec)
+        </FluentButton>
+        <FluentButton Appearance="Appearance.Accent"
+                      OnClick="@(() => AddInNavTopBar(5000))">
+            Add on navigation top (5 sec)
+        </FluentButton>
+    </FluentStack>
+</FluentCard>
+
+@code {
+    int ecounter = 0;
+    async Task AddInTopBar()
+    {
+        var message = $"Simple message #{ecounter++}";
+        var type = Enum.GetValues<MessageIntent>()[ecounter % 4];
+        await MessageService.ShowMessageBarAsync(message, type, App.MESSAGE_TOP);
+    }
+
+    async Task AddInNavTopBar()
+    {
+        var message = $"Simple message #{ecounter++}";
+        var type = Enum.GetValues<MessageIntent>()[ecounter % 4];
+        await MessageService.ShowMessageBarAsync(message, type, App.MESSAGE_NAV_TOP);
+    }
+
+    void AddInTopBar(int timeout)
+    {
+        var message = $"Simple message #{ecounter++}";
+        var type = Enum.GetValues<MessageIntent>()[ecounter % 4];
+        MessageService.ShowMessageBar(options =>
+        {
+            options.Title = message;
+            options.Intent = type;
+            options.Section = App.MESSAGE_TOP;
+            options.Timeout = timeout;
+        });
+    }
+
+    void AddInNavTopBar(int timeout)
+    {
+        var message = $"Simple message #{ecounter++}";
+        var type = Enum.GetValues<MessageIntent>()[ecounter % 4];
+        MessageService.ShowMessageBar(options =>
+         {
+             options.Title = message;
+             options.Intent = type;
+             options.Section = App.MESSAGE_NAV_TOP;
+             options.Timeout = timeout;
+         });
+    }
+}