diff --git a/BlazorFluentUI/Components/Layout/NavMenu.razor b/BlazorFluentUI/Components/Layout/NavMenu.razor
index da3f872..f6dc33b 100644
--- a/BlazorFluentUI/Components/Layout/NavMenu.razor
+++ b/BlazorFluentUI/Components/Layout/NavMenu.razor
@@ -10,8 +10,10 @@
                 <FluentNavLink Href="counter" Icon="@(new Icons.Regular.Size20.NumberSymbolSquare())" IconColor="Color.Accent">Counter</FluentNavLink>
                 <FluentNavLink Href="weather" Icon="@(new Icons.Regular.Size20.WeatherPartlyCloudyDay())" IconColor="Color.Accent">Weather</FluentNavLink>
             </FluentNavGroup>
-            <FluentNavGroup Icon="@(new Icons.Regular.Size20.SlideLayout())" Expanded="false" Title="Original">
-                <FluentNavLink Href="layoutheader" Icon="@(new Icons.Regular.Size20.DocumentHeader())" IconColor="Color.Accent">Layout</FluentNavLink>
+            <FluentNavGroup Icon="@(new Icons.Regular.Size20.SlideLayout())" Expanded="false" Title="Layout">
+                <FluentNavLink Href="layoutheader" Icon="@(new Icons.Regular.Size20.DocumentHeader())" IconColor="Color.Accent">Header</FluentNavLink>
+                <FluentNavLink Href="layoutfooter" Icon="@(new Icons.Regular.Size20.DocumentFooter())" IconColor="Color.Accent">Footer</FluentNavLink>
+                <FluentNavLink Href="layoutbodycontent" Icon="@(new Icons.Regular.Size20.ContentViewGallery())" IconColor="Color.Accent">BodyContent</FluentNavLink>
             </FluentNavGroup>
         </FluentNavMenu>
     </nav>
diff --git a/BlazorFluentUI/Components/Pages/LayoutBodyContent.razor b/BlazorFluentUI/Components/Pages/LayoutBodyContent.razor
new file mode 100644
index 0000000..5a54975
--- /dev/null
+++ b/BlazorFluentUI/Components/Pages/LayoutBodyContent.razor
@@ -0,0 +1,16 @@
+@page "/layoutbodycontent"
+
+<FluentLabel Typo="Typography.H3">BodyContent</FluentLabel>
+<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
+<FluentLabel Typo="Typography.Body">
+    The <code>BodyContent</code> component is a placeholder for where actual site content needs to be shown.
+</FluentLabel>
+<FluentCard Width="auto" Height="auto">
+    <FluentBodyContent>
+        This is some body content.
+    </FluentBodyContent>
+</FluentCard>
+
+@code {
+
+}
diff --git a/BlazorFluentUI/Components/Pages/LayoutFooter.razor b/BlazorFluentUI/Components/Pages/LayoutFooter.razor
new file mode 100644
index 0000000..5474c48
--- /dev/null
+++ b/BlazorFluentUI/Components/Pages/LayoutFooter.razor
@@ -0,0 +1,18 @@
+@page "/layoutfooter"
+
+<FluentLabel Typo="Typography.H3">Footer</FluentLabel>
+<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
+<FluentLabel Typo="Typography.Body">
+    The <code>FluentFooter</code> component is used to display a footer at the bottom.
+</FluentLabel>
+<FluentCard Width="auto" Height="auto">
+    <FluentFooter>
+        Footer start text
+        <FluentSpacer />
+        Footer end text
+    </FluentFooter>
+</FluentCard>
+
+@code {
+
+}