diff --git a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/Demos/ButtonsDemo/Default.cshtml b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/Demos/ButtonsDemo/Default.cshtml
index 9a00b3fc8f..3ae4c2a90d 100644
--- a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/Demos/ButtonsDemo/Default.cshtml
+++ b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/Demos/ButtonsDemo/Default.cshtml
@@ -1,12 +1,30 @@
 @using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.ButtonsDemo
-<h2>
-    Basic Buttons
-</h2>
-<abp-demo-section name="Buttons.Basic" view-path="@ButtonsDemoViewComponent.ViewPath">
-    <abp-button button-type="Primary" text="Primary button" />
-    <abp-button button-type="Secondary" text="Secondary button" />
-    <abp-button button-type="Info" text="Info button" />
-    <abp-button button-type="Warning" text="Warning button" />
-    <abp-button button-type="Dark" text="Dark button" />
-    <abp-button button-type="Light" text="Light button" />
-</abp-demo-section>
\ No newline at end of file
+
+<abp-component-demo-section title="Basics" view-path="@ButtonsDemoViewComponent.ViewPath">
+    <abp-button text="Default" />
+    <abp-button button-type="Primary" text="Primary" />
+    <abp-button button-type="Secondary">Secondary</abp-button>
+    <abp-button button-type="Success">Success</abp-button>
+    <abp-button button-type="Danger">Danger</abp-button>
+    <abp-button button-type="Warning">Warning</abp-button>
+    <abp-button button-type="Info">Info</abp-button>
+    <abp-button button-type="Light">Light</abp-button>
+    <abp-button button-type="Dark">Dark</abp-button>
+    <abp-button button-type="Link">Link</abp-button>
+</abp-component-demo-section>
+
+<abp-component-demo-section title="Outline" view-path="@ButtonsDemoViewComponent.ViewPath">
+    <abp-button button-type="Outline_Primary">Primary</abp-button>
+    <abp-button button-type="Outline_Secondary">Secondary</abp-button>
+    <abp-button button-type="Outline_Success">Success</abp-button>
+    <abp-button button-type="Outline_Danger">Danger</abp-button>
+    <abp-button button-type="Outline_Warning">Warning</abp-button>
+    <abp-button button-type="Outline_Info">Info</abp-button>
+    <abp-button button-type="Outline_Light">Light</abp-button>
+    <abp-button button-type="Outline_Dark">Dark</abp-button>
+</abp-component-demo-section>
+
+<abp-component-demo-section title="Icons" view-path="@ButtonsDemoViewComponent.ViewPath">
+    <abp-button button-type="Warning" icon="pencil" text="Edit" />
+    <abp-button button-type="Info" icon-type="FontAwesome" icon="info" text="Information" />
+</abp-component-demo-section>
\ No newline at end of file
diff --git a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/TagHelpers/AbpComponentDemoSectionTagHelper.cs b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/TagHelpers/AbpComponentDemoSectionTagHelper.cs
new file mode 100644
index 0000000000..5b3bd7791a
--- /dev/null
+++ b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/TagHelpers/AbpComponentDemoSectionTagHelper.cs
@@ -0,0 +1,105 @@
+using System;
+using System.Text;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Razor.TagHelpers;
+using Microsoft.Extensions.FileProviders;
+using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers;
+using Volo.Abp.VirtualFileSystem;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.TagHelpers
+{
+    public class AbpComponentDemoSectionTagHelper : AbpTagHelper
+    {
+        private const string DemoSectionOpeningTag = "<abp-component-demo-section";
+        private const string DemoSectionClosingTag = "</abp-component-demo-section";
+
+        public string ViewPath { get; set; }
+        public string Title { get; set; }
+
+        private readonly IVirtualFileProvider _virtualFileProvider;
+
+        public AbpComponentDemoSectionTagHelper(IVirtualFileProvider virtualFileProvider)
+        {
+            _virtualFileProvider = virtualFileProvider;
+        }
+
+        public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
+        {
+            output.TagName = null;
+
+            var content = await output.GetChildContentAsync();
+
+            output.PreContent.AppendHtml("<div class=\"abp-component-demo-section\">");
+            output.PreContent.AppendHtml($"<h2>{Title}</h2>");
+            output.PreContent.AppendHtml("<div class=\"abp-component-demo-section-body\">");
+            /* component rendering here */
+            output.PostContent.AppendHtml("</div>"); //abp-component-demo-section-body
+            AppendRawSource(output);
+            AppendBootstrapSource(output, content);
+            output.PostContent.AppendHtml("</div>"); //abp-component-demo-section
+        }
+
+        private static void AppendBootstrapSource(TagHelperOutput output, TagHelperContent content)
+        {
+            output.PostContent.AppendHtml("<div class=\"abp-component-demo-section-bs-source\">");
+            output.PostContent.AppendHtml("<h3>Bootstrap</h3>");
+            output.PostContent.AppendHtml("<pre>");
+            output.PostContent.Append(content.GetContent());
+            output.PostContent.AppendHtml("</pre>");
+            output.PostContent.AppendHtml("</div>");
+        }
+
+        private void AppendRawSource(TagHelperOutput output)
+        {
+            output.PostContent.AppendHtml("<div class=\"abp-component-demo-section-raw-source\">");
+            output.PostContent.AppendHtml("<h3>ABP Tag Helpers</h3>");
+            output.PostContent.AppendHtml("<pre>");
+            output.PostContent.Append(GetRawDemoSource());
+            output.PostContent.AppendHtml("</pre>");
+            output.PostContent.AppendHtml("</div>");
+        }
+
+        private string GetRawDemoSource()
+        {
+            StringBuilder sourceBuilder = null;
+
+            var lines = GetFileContent().SplitToLines();
+
+            foreach (var line in lines)
+            {
+                if (line.Contains(DemoSectionOpeningTag) && GetName(line) == Title)
+                {
+                    sourceBuilder = new StringBuilder();
+                }
+                else if (line.Contains(DemoSectionClosingTag, StringComparison.InvariantCultureIgnoreCase))
+                {
+                    if (sourceBuilder == null)
+                    {
+                        continue;
+                    }
+
+                    return sourceBuilder.ToString();
+                }
+                else if (sourceBuilder != null)
+                {
+                    sourceBuilder.AppendLine(line);
+                }
+            }
+
+            throw new AbpException($"Could not find {Title} demo section inside {ViewPath}");
+        }
+
+        private string GetFileContent()
+        {
+            var viewFileInfo = _virtualFileProvider.GetFileInfo(ViewPath);
+            return viewFileInfo.ReadAsString();
+        }
+
+        private string GetName(string line)
+        {
+            var str = line.Substring(line.IndexOf("title=\"", StringComparison.OrdinalIgnoreCase) + "title=\"".Length);
+            str = str.Left(str.IndexOf("\"", StringComparison.OrdinalIgnoreCase));
+            return str;
+        }
+    }
+}
diff --git a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/TagHelpers/AbpDemoSectionTagHelper.cs b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/TagHelpers/AbpDemoSectionTagHelper.cs
deleted file mode 100644
index f4b0231362..0000000000
--- a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/TagHelpers/AbpDemoSectionTagHelper.cs
+++ /dev/null
@@ -1,101 +0,0 @@
-using System;
-using System.Text;
-using System.Threading.Tasks;
-using Microsoft.AspNetCore.Mvc.TagHelpers;
-using Microsoft.AspNetCore.Razor.TagHelpers;
-using Microsoft.Extensions.FileProviders;
-using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Microsoft.AspNetCore.Razor.TagHelpers;
-using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers;
-using Volo.Abp.VirtualFileSystem;
-
-namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.TagHelpers
-{
-    public class AbpDemoSectionTagHelper : AbpTagHelper
-    {
-        private const string DemoSectionOpeningTag = "<abp-demo-section";
-        private const string DemoSectionClosingTag = "</abp-demo-section";
-
-        public string ViewPath { get; set; }
-
-        public string Name { get; set; }
-
-        private readonly IVirtualFileProvider _virtualFileProvider;
-
-        public AbpDemoSectionTagHelper(IVirtualFileProvider virtualFileProvider)
-        {
-            _virtualFileProvider = virtualFileProvider;
-        }
-
-        public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
-        {
-            output.TagName = null;
-
-            var content = await output.GetChildContentAsync();
-
-            output.PreContent.AppendHtml("<div class=\"abp-demo-section\">");
-            output.PreContent.AppendHtml("<div class=\"abp-demo-section-body\">");
-
-            /* component rendering here */
-
-            output.PostContent.AppendHtml("</div>"); //abp-demo-section-body
-
-            output.PostContent.AppendHtml("<div class=\"abp-demo-section-raw-source\">");
-            output.PostContent.AppendHtml("<h3>ABP Tag Helpers</h3>");
-            output.PostContent.AppendHtml("<pre>");
-            output.PostContent.Append(GetRawDemoSource());
-            output.PostContent.AppendHtml("</pre>");
-            output.PostContent.AppendHtml("</div>"); //abp-demo-section-raw-source
-
-            output.PostContent.AppendHtml("<div class=\"abp-demo-section-bs-source\">");
-            output.PostContent.AppendHtml("<h3>Bootstrap</h3>");
-            output.PostContent.AppendHtml("<pre>");
-            output.PostContent.Append(content.GetContent());
-            output.PostContent.AppendHtml("</pre>");
-            output.PostContent.AppendHtml("</div>"); //abp-demo-section-bs-source
-
-            output.PostContent.AppendHtml("</div>"); //abp-demo-section
-        }
-
-        private string GetRawDemoSource()
-        {
-            var viewFileInfo = _virtualFileProvider.GetFileInfo(ViewPath);
-            var viewFileContent = viewFileInfo.ReadAsString();
-            var lines = viewFileContent.SplitToLines();
-
-            StringBuilder sb = null;
-
-            foreach (var line in lines)
-            {
-                if (line.Contains(DemoSectionOpeningTag))
-                {
-                    if (GetName(line) == Name)
-                    {
-                        sb = new StringBuilder();
-                    }
-                }
-                else if (line.Contains(DemoSectionClosingTag, StringComparison.InvariantCultureIgnoreCase))
-                {
-                    if (sb == null)
-                    {
-                        continue;
-                    }
-
-                    return sb.ToString();
-                }
-                else if (sb != null)
-                {
-                    sb.AppendLine(line);
-                }
-            }
-
-            return "";
-        }
-
-        private string GetName(string line)
-        {
-            var str = line.Substring(line.IndexOf("name=\"", StringComparison.OrdinalIgnoreCase) + "name=\"".Length);
-            str = str.Left(str.IndexOf("\"", StringComparison.OrdinalIgnoreCase));
-            return str;
-        }
-    }
-}
diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Buttons.cshtml b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Buttons.cshtml
index 0274cd4d69..e58817d91c 100644
--- a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Buttons.cshtml
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Buttons.cshtml
@@ -31,16 +31,16 @@
 
 <div class="demo-with-code">
     <div class="demo-area">
-        <abp-button text="Default" />
-        <abp-button button-type="Primary" text="Primary" />
-        <abp-button button-type="Secondary">Secondary</abp-button>
-        <abp-button button-type="Success">Success</abp-button>
-        <abp-button button-type="Danger">Danger</abp-button>
-        <abp-button button-type="Warning">Warning</abp-button>
-        <abp-button button-type="Info">Info</abp-button>
-        <abp-button button-type="Light">Light</abp-button>
-        <abp-button button-type="Dark">Dark</abp-button>
-        <abp-button button-type="Link">Link</abp-button>
+<abp-button text="Default" />
+<abp-button button-type="Primary" text="Primary" />
+<abp-button button-type="Secondary">Secondary</abp-button>
+<abp-button button-type="Success">Success</abp-button>
+<abp-button button-type="Danger">Danger</abp-button>
+<abp-button button-type="Warning">Warning</abp-button>
+<abp-button button-type="Info">Info</abp-button>
+<abp-button button-type="Light">Light</abp-button>
+<abp-button button-type="Dark">Dark</abp-button>
+<abp-button button-type="Link">Link</abp-button>
     </div>
     <div class="code-area">
         <abp-tabs>
@@ -116,14 +116,14 @@
 
 <div class="demo-with-code">
     <div class="demo-area">
-        <abp-button button-type="Outline_Primary">Primary</abp-button>
-        <abp-button button-type="Outline_Secondary">Secondary</abp-button>
-        <abp-button button-type="Outline_Success">Success</abp-button>
-        <abp-button button-type="Outline_Danger">Danger</abp-button>
-        <abp-button button-type="Outline_Warning">Warning</abp-button>
-        <abp-button button-type="Outline_Info">Info</abp-button>
-        <abp-button button-type="Outline_Light">Light</abp-button>
-        <abp-button button-type="Outline_Dark">Dark</abp-button>
+<abp-button button-type="Outline_Primary">Primary</abp-button>
+<abp-button button-type="Outline_Secondary">Secondary</abp-button>
+<abp-button button-type="Outline_Success">Success</abp-button>
+<abp-button button-type="Outline_Danger">Danger</abp-button>
+<abp-button button-type="Outline_Warning">Warning</abp-button>
+<abp-button button-type="Outline_Info">Info</abp-button>
+<abp-button button-type="Outline_Light">Light</abp-button>
+<abp-button button-type="Outline_Dark">Dark</abp-button>
     </div>
     <div class="code-area">
         <abp-tabs>
diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo/AbpAspNetCoreMvcUiThemeBasicDemoModule.cs b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo/AbpAspNetCoreMvcUiThemeBasicDemoModule.cs
index 5cb2ca838b..88327941eb 100644
--- a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo/AbpAspNetCoreMvcUiThemeBasicDemoModule.cs
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo/AbpAspNetCoreMvcUiThemeBasicDemoModule.cs
@@ -8,6 +8,7 @@ using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo;
 using Volo.Abp.Autofac;
 using Volo.Abp.Modularity;
 using Volo.Abp.UI;
+using Volo.Abp.UI.Navigation;
 using Volo.Abp.VirtualFileSystem;
 
 namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo
@@ -37,6 +38,11 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo
                     .Get(StandardBundles.Styles.Global)
                     .AddFiles("/demo/styles/main.css");
             });
+
+            Configure<AbpNavigationOptions>(options =>
+            {
+                options.MenuContributors.Add(new BasicThemeDemoMenuContributor());
+            });
         }
 
         public override void OnApplicationInitialization(ApplicationInitializationContext context)
diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo/BasicThemeDemoMenuContributor.cs b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo/BasicThemeDemoMenuContributor.cs
new file mode 100644
index 0000000000..46d0467392
--- /dev/null
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo/BasicThemeDemoMenuContributor.cs
@@ -0,0 +1,28 @@
+using System.Threading.Tasks;
+using Volo.Abp.UI.Navigation;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo
+{
+    public class BasicThemeDemoMenuContributor : IMenuContributor
+    {
+        public Task ConfigureMenuAsync(MenuConfigurationContext context)
+        {
+            if(context.Menu.Name == StandardMenus.Main)
+            {
+                AddMainMenuItems(context);
+            }
+
+            return Task.CompletedTask;
+        }
+
+        private void AddMainMenuItems(MenuConfigurationContext context)
+        {
+            context.Menu.AddItem(
+                new ApplicationMenuItem("BasicThemeDemo.Components", "Components")
+                    .AddItem(
+                        new ApplicationMenuItem("BasicThemeDemo.Components.Buttons", "Buttons", url: "/Components/Buttons")
+                    )
+            );
+        }
+    }
+}
diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo/Pages/Index.cshtml b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo/Pages/Index.cshtml
new file mode 100644
index 0000000000..233d0f7c6a
--- /dev/null
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo/Pages/Index.cshtml
@@ -0,0 +1,3 @@
+@page
+@model Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo.Pages.IndexModel
+<h1>Basic Theme Demo</h1>
\ No newline at end of file
diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo/Pages/Index.cshtml.cs b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo/Pages/Index.cshtml.cs
new file mode 100644
index 0000000000..8d1eec93d4
--- /dev/null
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo/Pages/Index.cshtml.cs
@@ -0,0 +1,12 @@
+using Microsoft.AspNetCore.Mvc.RazorPages;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo.Pages
+{
+    public class IndexModel : PageModel
+    {
+        public void OnGet()
+        {
+
+        }
+    }
+}
\ No newline at end of file
diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo/wwwroot/demo/styles/main.css b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo/wwwroot/demo/styles/main.css
index 4a83f74d30..781074c39f 100644
--- a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo/wwwroot/demo/styles/main.css
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo/wwwroot/demo/styles/main.css
@@ -1,29 +1,29 @@
-.abp-demo-section {
+.abp-component-demo-section {
     border: 1px solid #999;
     padding: 10px;
 }
 
-.abp-demo-section-body {
+.abp-component-demo-section-body {
     padding-bottom: 10px;
 }
 
-.abp-demo-section-raw-source {
+.abp-component-demo-section-raw-source {
     background-color: #eee;
     padding: 5px;
 }
 
-    .abp-demo-section-raw-source pre {
+    .abp-component-demo-section-raw-source pre {
         border: 1px solid #999;
         margin: 5px;
     }
 
 
-.abp-demo-section-bs-source {
+.abp-component-demo-section-bs-source {
     background-color: #ddd;
     padding: 5px;
 }
 
-    .abp-demo-section-bs-source pre {
+    .abp-component-demo-section-bs-source pre {
         border: 1px solid #999;
         margin: 5px;
     }