diff --git a/BlazorFluentUI/Components/Layout/NavMenu.razor b/BlazorFluentUI/Components/Layout/NavMenu.razor
index 85aa6a8..5bc0f95 100644
--- a/BlazorFluentUI/Components/Layout/NavMenu.razor
+++ b/BlazorFluentUI/Components/Layout/NavMenu.razor
@@ -61,6 +61,7 @@
                 <FluentNavLink Href="compodialog" Icon="@(new Icons.Regular.Size20.AppTitle())" IconColor="Color.Accent">Dialog</FluentNavLink>
                 <FluentNavLink Href="compodivider" Icon="@(new Icons.Regular.Size20.DividerShort())" IconColor="Color.Accent">Divider</FluentNavLink>
                 <FluentNavLink Href="compodrag" Icon="@(new Icons.Regular.Size20.Drag())" IconColor="Color.Accent">Drag</FluentNavLink>
+                <FluentNavLink Href="compoemoji" Icon="@(new Icons.Regular.Size20.EmojiMeme())" IconColor="Color.Accent">Emoji</FluentNavLink>
 
             </FluentNavGroup>
         </FluentNavMenu>
diff --git a/BlazorFluentUI/Components/Pages/Components/CompoEmoji.razor b/BlazorFluentUI/Components/Pages/Components/CompoEmoji.razor
new file mode 100644
index 0000000..38b9f71
--- /dev/null
+++ b/BlazorFluentUI/Components/Pages/Components/CompoEmoji.razor
@@ -0,0 +1,46 @@
+@page "/compoemoji"
+
+@rendermode RenderMode.InteractiveServer
+
+<h3>Emoji</h3>
+<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
+<div>
+    The <code>FluentEmoji</code> are a collection of emoji in SVG format.
+</div>
+
+
+<h4 class="mt-4">Example</h4>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <FluentStack Orientation="Orientation.Horizontal">
+        <FluentEmoji Value="@(new Emojis.PeopleBody.Color.Default.Artist())" />
+        <FluentEmoji Value="@(new Emojis.SmileysEmotion.Color.Default.RollingOnTheFloorLaughing())" Width="50px" />
+    </FluentStack>
+    <h5 class="mt-2">As Markup</h5>
+    @(new Emojis.Objects.Color.Default.Accordion().ToMarkup("80px"))
+    @(new Emojis.TravelPlaces.Color.Default.Ambulance().ToMarkup())
+    <h5 class="mt-2">Differenct sizes</h5>
+    <FluentStack Orientation="Orientation.Horizontal" VerticalAlignment="VerticalAlignment.Bottom">
+        <div>
+            <span>16x16:</span><FluentEmoji Value="@(new Emojis.FoodDrink.Color.Default.Avocado())" Width="16px" />
+            <span>32x32:</span><FluentEmoji Value="@(new Emojis.FoodDrink.Color.Default.Avocado())" Width="32px" />
+            <span>64x64:</span><FluentEmoji Value="@(new Emojis.FoodDrink.Color.Default.Avocado())" Width="64px" />
+            <span>128x128:</span><FluentEmoji Value="@(new Emojis.FoodDrink.Color.Default.Avocado())" Width="128px" />
+        </div>
+    </FluentStack>
+    <h5 class="mt-2">Custom size</h5>
+    <div>
+        <FluentInputLabel for="CustomSize">Custom size</FluentInputLabel>
+        <FluentTextField Id="CustomSize" @bind-Value="custom" Placeholder="input number for size"/>
+    </div>
+    @if (int.TryParse(custom, out int size) && size > 0)
+    {
+        <div style="m-1">
+            <span>@(size)x@(size)</span> <br/>
+            <FluentEmoji Value="@(new Emojis.FoodDrink.Color.Default.Broccoli())" Width="@($"{size}px")"/>
+        </div>
+    }
+</FluentCard>
+
+@code {
+    string custom = "";
+}
\ No newline at end of file