diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Divider/Examples/FluentDividerAlignment.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Divider/Examples/FluentDividerAlignment.razor
new file mode 100644
index 0000000000..d0c47d3bd2
--- /dev/null
+++ b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Divider/Examples/FluentDividerAlignment.razor
@@ -0,0 +1,23 @@
+<FluentDivider AlignContent="DividerAlignContent.Start">
+    Start
+</FluentDivider>
+
+<FluentDivider AlignContent="DividerAlignContent.Center">
+    Center
+</FluentDivider>
+
+<FluentDivider AlignContent="DividerAlignContent.End">
+    End
+</FluentDivider>
+
+<FluentDivider AlignContent="DividerAlignContent.Start" Inset="true">
+    Start (with inset)
+</FluentDivider>
+
+<FluentDivider AlignContent="DividerAlignContent.Center" Inset="true">
+    Center (with inset)
+</FluentDivider>
+
+<FluentDivider AlignContent="DividerAlignContent.End" Inset="true">
+    End (with inset)
+</FluentDivider>
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Divider/Examples/FluentDividerAppeareance.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Divider/Examples/FluentDividerAppeareance.razor
new file mode 100644
index 0000000000..49f0926c8b
--- /dev/null
+++ b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Divider/Examples/FluentDividerAppeareance.razor
@@ -0,0 +1,15 @@
+<FluentDivider>
+    Default
+</FluentDivider>
+
+<FluentDivider Appearance="DividerAppearance.Strong">
+    Strong
+</FluentDivider>
+
+<FluentDivider Appearance="DividerAppearance.Brand">
+    Brand
+</FluentDivider>
+
+<FluentDivider Appearance="DividerAppearance.Subtle">
+    Subtle
+</FluentDivider>
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Divider/Examples/FluentDividerDefault.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Divider/Examples/FluentDividerDefault.razor
new file mode 100644
index 0000000000..c3bfa3cf9c
--- /dev/null
+++ b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Divider/Examples/FluentDividerDefault.razor
@@ -0,0 +1,8 @@
+<FluentDivider>
+    Horizontal
+</FluentDivider>
+
+<FluentDivider Vertical="true">
+    Vertical
+</FluentDivider>
+
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Divider/Examples/FluentDividerExamples.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Divider/Examples/FluentDividerExamples.razor
deleted file mode 100644
index 42eabbff74..0000000000
--- a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Divider/Examples/FluentDividerExamples.razor
+++ /dev/null
@@ -1,39 +0,0 @@
-<FluentStack HorizontalGap="12px"
-             Style="margin-bottom:15px;"
-             VerticalAlignment="VerticalAlignment.Bottom"
-             Orientation="Orientation.Horizontal"
-             Wrap="true">
-
-    <FluentTextInput Label="Content"
-                     @bind-Value="@content" />
-
-    <FluentSelect Label="Appearance"
-                  Items="@(Enum.GetValues<DividerAppearance>())"
-                  @bind-Value="@appearance" />
-
-    <FluentSelect Label="Align content"
-                  Items="@(Enum.GetValues<DividerAlignContent>())"
-                  @bind-Value="@alignContent" />
-
-    <FluentCheckbox Label="Inset"
-                    @bind-Value="inset" />
-
-    <FluentCheckbox Label="Vertical"
-                    @bind-Value="vertical" />
-</FluentStack>
-
-<FluentDivider Appearance="@appearance"
-               AlignContent="@alignContent"
-               Inset="@inset"
-               Vertical="@vertical">
-    @content
-</FluentDivider>
-
-@code
-{
-    string content = "Fluent divider";
-    DividerAppearance appearance = DividerAppearance.Default;
-    DividerAlignContent alignContent = DividerAlignContent.Center;
-    bool inset = false;
-    bool vertical = false;
-}
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Divider/FluentDivider.md b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Divider/FluentDivider.md
index 8b33ff4677..e440c4958d 100644
--- a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Divider/FluentDivider.md
+++ b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Divider/FluentDivider.md
@@ -7,11 +7,19 @@ icon: DividerShort
 # Divider
 
 The `Divider` component is used to separate content within a container.
-The component is a wrapper for the <fluentui-divider/> web component.
+The component is a wrapper for the `<fluentui-divider/>` web component.
 
 ## Examples
 
-{{ FluentDividerExamples }}
+{{ FluentDividerDefault }}
+
+## Appeareance
+
+{{ FluentDividerAppeareance }}
+
+## Alignment
+
+{{ FluentDividerAlignment }}
 
 ## API FluentDivider